Transcript BTP207_ders9 - Anadolu Üniversitesi

BTP 207
İNTERNET PROGRAMCILIĞI I
Ders 9
Dizi Değişkenler (Array)
Tek değişkende birden fazla bilgi tutulmak istendiğinde kullanılır.
Kullanım şekli:
var dizi_adı= new Array(eleman1, eleman2, …, elemanN)
 Dizi değişkende tutulan her değerin bir index değeri vardır. Index değerleri
0’dan başlar ve dizideki eleman sayısı kadar devam eder. Dizi değişkenin
herhangi bir değeri alınmak istenirse dizi_adı[index_no] şeklinde index
numarasıyla çağrılır.
var iller=new Array(“Eskişehir”,”Ankara”,”Amasya”);
document.write(iller[1]);
Yukarıda verilen örnekte, dönen sonuç Ankara olacaktır.
 Varolan bir dizi değişkenine değer atamak veya yeni bir eleman eklemek için
dizi_adı[index_no]=değer
şeklinde kullanılmalıdır.
2
Dizi Değişkenler (Array)
Örneğin,
var iller=new Array(“Eskişehir”,”Ankara”,”Amasya”);
iller[3]=“Samsun”; // 3 nolu index olmadığı için diziye yeni bir eleman eklenir.
iller[2]=“Adana”; // 2 nolu index olan Amasya değeri Adana değerini alır.
 Dizi değişkeninin eleman sayısını öğrenmek için length parametresi kullanılır.
dizi_adı.length şeklinde kullanılır.
var iller=new Array(“Eskişehir”,”Ankara”,”Amasya”,”Samsun”);
document.write(iller.length); // Dönen sonuç 4 olacaktır.
iller[iller.length]=“İzmir” // Dizinin sonuna İzmir eklenecektir.
3
Ekrana Çıktı ve Klavyeden Bilgi Girişi
prompt (Kullanıcıdan Bilgi Alma 1/2)
 prompt fonksiyonu ile bilgi almak için sayfayı submit yapmaya gerek yoktur.
Yeni bir pencere açılarak bilgi girişi yapılabilir.
 Açılan bilgi girişi penceresinde “Tamam” ve “İptal” seçenekleri vardır. Kullanıcı
“Tamam” seçeneğine tıklarsa girilen değer döner, “İptal” seçeneğine tıklarsa
NULL değer döner.
Kullanım şekli:
prompt(“Sorulan soru”, “Cevap örneği”)
Birinci parametre yani “Sorulan soru” açılan pencerede görünen ve kullanıcının
gireceği değer hakkında bilgi veren bölümdür. İkinci parametre “Cevap örneği” ise
kullanıcının bilgi girişi yapacağı bölümde kullanıcıya yardımcı olmak amacıyla
kullanılır. İkinci parametrenin kullanılması zorunlu değildir.
4
Ekrana Çıktı ve Klavyeden Bilgi Girişi
prompt (Kullanıcıdan Bilgi Alma 2/2)
 Bilgi penceresinden dönen değer aşağıdaki şekilde bir değişkene atanabilir:
değişken_adı=prompt(“Sorulan soru”, “Cevap örneği”)
 prompt fonksiyonundan dönen değerin türü sayısal değildir. Dönen değeri
sayısala çevirmek için parseInt fonksiyonu kullanılmalıdır.
UYGULAMA: Kullanıcının telefon numarasını alma ve ekrana yazdırma.
5
Ekrana Çıktı ve Klavyeden Bilgi Girişi
alert (Uyarı Mesajı Verdirme)
Kullanıcıya uyarı mesajı vermek amacıyla kullanılır. Parametre olarak tırnak
içerisinde uyarı mesajının yazılması yeterlidir.
Kullanım şekli:
alert(“Uyarı mesajı”);
UYGULAMA: Kullanıcının girmiş olduğu mesajı uyarı mesajı olarak verme.
6
Ekrana Çıktı ve Klavyeden Bilgi Girişi
confirm (Onay Penceresi)
Kullanıcının bir seçim yapması veya yapılan işlemi doğrulaması için kullanılan
mesaj kutularıdır.
 Açılan pencerede “Tamam” ve “İptal” seçenekleri vardır. Kullanıcı “Tamam”
seçeneğine tıklarsa True, “İptal” seçeneğine tıklarsa False değeri döner.
Kullanım şekli:
confirm(“Mesaj”);
UYGULAMA:
7
Karşılaştırma Deyimleri
if-else (1/3)
Çoğu programlama dilinde olduğu gibi JavaScript içerisinde de koşula bağlı
işlemlerde if-else yapısı çoğunlukla kullanılmaktadır.
If-else yapısının üç farklı kullanımı:
1.
2.
8
Karşılaştırma Deyimleri
if-else (2/3)
3.
9
Karşılaştırma Deyimleri
if-else (3/3)
UYGULAMA: Kullanıcıdan alınan iki sınav notunun ortalamasını alarak, ortalama
45 ve üzeri ise sayfaya “Başarılı” değilse “Başarısız” yazdıran kod.
10
Karşılaştırma Deyimleri
switch-case (1/2)
Seçilen değişkenin belirlenen değerlerden hangisine uygun olduğuna bakarak o
değer için belirlenmiş işlemleri gerçekleştirir.
 Her case ifadesinde gerçekleştirilecek işlemlerden sonra break komutuyla
switch yapısından çıkılması gerekmektedir. Aksi takdirde koşula bakılmaksızın
diğer komutlarda çalıştırılır.
 Belirtilen değerlerin hiçbiri sağlanmazsa, default için yazılan komutlar işleme
konulur.
 Case ifadesinde belirtilen bir değer olabileceği gibi bir koşul ifadesi de olabilir.
 Belirtilen değer karakter kümesi türündeyse tırnak içerisinde olmalıdır.
11
Karşılaştırma Deyimleri
switch-case (2/2)
Kullanım şekli:
12
Döngü Deyimleri
for Döngüsü (1/2)
Tekrarlanması istenilen durumlarda kullanılır.
 Döngünün tekrar sayısı sayaç değişkenine göre gerçekleştirilir. Sayacın
başlangıç ve bitiş değerleri, ve artış miktarı istenilen şekilde ayarlanabilir.
Kullanım şekli:
Sayaç değişkeni, döngünün tekrar sayısını belirlemek ve döngü süresince tekrar
sayısının tutmak için kullanılır.
Örneğin,
for (a=0; a<=10; a++) kullanımında, döngü 0’dan başlar, 10’a kadar bir artarak
devam eder.
13
Döngü Deyimleri
for Döngüsü (1/2)
UYGULAMA: 1 ile 20 arasındaki çift sayıları ekrana yazdırma.
14
Döngü Deyimleri
15
while Döngüsü
Verilen şart gerçekleşene kadar belirtilen komutları gerçekleştirir. Eğer şart hiç
gerçekleşmezse döngü çalışmayacaktır. Şart için kullanılan değişkenin değeri kodlar
vasıtasıyla değiştirilmelidir.
Kullanım şekli:
Döngü Deyimleri
do … while Döngüsü
While döngüsüne çok benzer. Şartın doğrulanması başta değil de sonda
gerçekleştirilir.
 Do-while döngüsünde şart sağlanmamış olsa bile döngü bir kez çalışacaktır.
 Özellikle kullanıcıyla etkileşim kuran sayfalarda kullanılır.
Kullanım şekli:
16
Döngü Deyimleri
break (Döngü Sonlandırma)
Bazı durumlarda döngü sonuna kadar beklemeden istenilen adımda döngünün
sonlandırılması istenebilir. Bu gibi durumlarda break komutu döngünün işlevini
sonlandırır ve program akışı döngüden sonraki ilk işlemle devam eder.
continue (Döngüde Basamak Atlama)
Döngü çalıştığı süre içerisinde atlanmak istenilen belirli adımlar varsa continue
komutu kullanılır. Continue komutu döngünün sadece o anki adımını atlayarak bir
sonraki adımdan devam etmesini sağlar.
for … in
Bir dizi değişkenin elemanları sayısınca veya bir nesnenin özellikleri sayısınca
dönme işlemi gerçekleştirir. Kullanım şekli aşağıdaki gibidir.
17
Döngü Deyimleri
UYGULAMA: Bir dizi değişkenin içeriğini for … in yapısını kullanarak yazdırma.
18
Fonksiyonlar
Fonksiyon Tanımlama ve Çağırma (1/2)
 Fonksiyonlar <script> ve </script> etiketlerinin içerisinde tanımlanmak ve
çağrılmak zorundadır.
 Sayfada kullanılacak fonksiyonlar genellikle <head> ve </head> etiketleri
arasında tanımlanır. Böylece, sayfa yüklenmeden fonksiyonlar yüklenir.
 Fonksiyonlar <script> ve </script> etiketlerinin dışında nesnelerin olaylarında
da çağrılabilir. Örneğin, sayfa içerisinde bulunan bir düğmeye tıklandığında.
 Fonksiyon bloğu içerisinde tanımlanan değişkenler yerel değişkenler olup
sadece fonksiyon içinde kullanılabilir.
Kullanım şekli:
19
Fonksiyonlar
20
Fonksiyon Tanımlama ve Çağırma (2/2)
 Fonksiyondan elde edilen sonuç, fonksiyonu çağıran yere gönderilecekse return
komutu kullanılır.
UYGULAMA:
Tarih-Saat Fonksiyonları
21
Tarih ve saat ile ilgili işlemlerde date nesnesi kullanılır. Bu nesne içerisinde tarih ve
zamanla ilgili tüm bilgiler mevcuttur.
 Javascript kullanıcı taraflı çalıştığı için burada alınan tarih-saat bilgisi sunucuya
ait değil sayfanın ziyaret edildiği bilgisayara aittir.
Tarih Fonksiyonları
 getDate: Date nesnesinden sayısal gün bilgisini almak için kullanılır. (1,2,…)
 getMonth: Date nesnesinden ay bilgisini almak için kullanılır.
(0=Ocak, 1=Şubat,…)
 getFullYear: Date nesnesinden yıl bilgisini almak için kullanılır. (2014, 2015,…)
 getDay: Date nesnesinden haftanın kaçıncı günü olduğu bilgisini almak için
kullanılır. (0=Pazar, 1=Pazartesi, …, 6=Cumartesi)
Not: getMonth fonksiyonu Ocak ayını 0 olarak döndürür. Doğru tarihi göstermek
için getMonth fonksiyonunun döndürdüğü değere 1 eklenmelidir.
Tarih-Saat Fonksiyonları
UYGULAMA: Aktif tarihin gün, ay ve yıl bilgilerini date nesnesinden alıp yazdırma.
Zaman Fonksiyonları
 getHours: Date nesnesinden saat bilgisini almak için kullanılır.
 getMinutes: Date nesnesinden dakika bilgisini almak için kullanılır.
 getSeconds: Date nesnesinden saniye bilgisini almak için kullanılır.
22
Tarih-Saat Fonksiyonları
İstenilen Tarih ve Zamanı Hazırlama Fonksiyonları
 setDate: Date nesnesine istenilen günü atar.
 setHour: Date nesnesine istenilen zamanı atar.
 setFullYear: Date nesnesine istenilen yılı ayarlar.
 setMonth: Date nesnesine istenilen ayı ayarlar
 setHours: Date nesnesine istenilen saati ayarlar
 setMinutes: Date nesnesine istenilen dakikayı ayarlar
 setSeconds: Date nesnesine istenilen saniyeyi ayarlar
23
Karakter Fonksiyonları
24
length
Karakter türündeki bir değişkenin içerdiği karakter sayısını verir.
var z=“Porsuk MYO”;
var uzunluk=z.length; //Bu örnekte, uzunluk değişkeninin değeri 10 olacaktır.
indexOf()
String değişken içerisinde yer alan bir karakter ya da karakter grubunun konumu
hakkında bilgi verir. Sonuç -1 ise belirtilen karakter ya da karakter grubu yoktur.
Diğer durumlarda, karakterin bulunduğu index değeri döner. Karakterlerin index
değerleri 0’dan başlar.
var a=“Anadolu Üniversitesi”;
var b=a.indexOf(“A”) ; // A ilk karakter olduğu için b değişkeni 0 değerini alacaktır.
var c=a.indexOf(“w”); // w karakteri olmadığı için c değişkeni -1 değerini alacaktır.
Karakter Fonksiyonları
charAt()
Parametre olarak verilen index değerine, karakter kümesi içinde karşılık gelen
değeri verir.
var a=“Porsuk MYO”;
var b=a.charAt(7); // b değişkeninin değeri M olacaktır.
split()
Bir karakter kümesini istenilen karaktere göre parçalara ayırır ve bu parçaları dizi
içerisine yerleştirir.
var a=“Anadolu Üniversitesi Porsuk MYO”;
var dizi=new Array();
dizi=a.split(‘ ’); // a karakter kümesi boşluk karakterine göre parçalanacaktır.
Bu işlem sonucunda, dizi[0]=Anadolu, dizi[1]=Üniversitesi, dizi[2]=Porsuk,
dizi[3]=MYO değerlerini alacaktır.
25
Karakter Fonksiyonları
UYGULAMA: Kullanıcıdan alınan bir bilginin tersini mesaj olarak yazdırma.
26
Karakter Fonksiyonları
27
substring()
Bir karakter kümesinden istenilen bir bölümün alınmasını sağlar. Birinci parametre
başlangıç noktasını, ikinci parametre bitiş noktasını ifade eder.
var a=“Porsuk MYO”;
var b=a.substring(5,8); // b değişkeni k MY değerini alacaktır.
substr()
Bir karakter kümesinden istenilen bir bölümün alınmasını sağlar. Birinci parametre
başlangıç noktasını, ikinci parametre alınacak karakter sayısını ifade eder.
var a=“Porsuk MYO”;
var b=a.substr(5,4); // b değişkeni k MY değerini alacaktır.
Karakter Fonksiyonları
28
toUpperCase() ve toLowerCase()
Bir karakter kümesindeki elemanları, toUpperCase fonksiyonu büyük harfe,
toLowerCase fonksiyonu küçük harfe çevirir.
var a=“Porsuk MYO”;
var b=a.toUpperCase(); // b değişkeni PORSUK MYO değerini alacaktır.
var c=a.toLowerCase(); // c değişkeni porsuk myo değerini alacaktır.
UYGULAMA: Kullanıcıdan alınan bir bilgiyi, kelimelerin ilk harfini büyük ve kırmızı,
kelimenin geri kalanını küçük harf ve mavi yaparak sayfaya yazdırın.