BTP 207 İNTERNET PROGRAMCILIĞI I Ders 9
Dizi Değişkenler (Array) 2 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.
Dizi Değişkenler (Array) 3 Ö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.
Ekrana Çıktı ve Klavyeden Bilgi Girişi 4 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.
Ekrana Çıktı ve Klavyeden Bilgi Girişi 5 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.
Ekrana Çıktı ve Klavyeden Bilgi Girişi 6 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.
Ekrana Çıktı ve Klavyeden Bilgi Girişi 7 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:
Karşılaştırma Deyimleri 8 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.
Karşılaştırma Deyimleri 9 if-else (2/3) 3.
Karşılaştırma Deyimleri 10 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.
Karşılaştırma Deyimleri 11 switch-case (1/3) 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.
Karşılaştırma Deyimleri 12 switch-case (2/3) Kullanım şekli:
Karşılaştırma Deyimleri 13 switch-case (3/3) UYGULAMA: Switch-case yapısını kullanarak, 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.
Döngü Deyimleri 14 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.
Döngü Deyimleri 15 for Döngüsü (1/2) UYGULAMA: 1 ile 20 arasındaki çift sayıları ekrana yazdırma.
Döngü Deyimleri 16 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 17 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:
Döngü Deyimleri 18 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.
Döngü Deyimleri 19 UYGULAMA: Bir dizi değişkenin içeriğini for in yapısını kullanarak yazdırma.
Fonksiyonlar 20 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:
Fonksiyonlar 21 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ı 22 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ı 23 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.
Tarih-Saat Fonksiyonları 24 İ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
Karakter Fonksiyonları 25 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.
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. Karakter Fonksiyonları 26 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.
Karakter Fonksiyonları 27 UYGULAMA: Kullanıcıdan alınan bir bilginin tersini mesaj olarak yazdırma.
Karakter Fonksiyonları 28 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ı 29 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 (1/2): 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ırma.
Karakter Fonksiyonları 30 UYGULAMA (2/2):