İNTERNET PROGRAMCILIĞI I BTP 207 Ders 9. Tek değişkende birden fazla bilgi tutulmak istendiğinde kullanılır. Kullanım şekli: var dizi_adı= new Array(eleman1,

... konulu sunumlar: "İNTERNET PROGRAMCILIĞI I BTP 207 Ders 9. Tek değişkende birden fazla bilgi tutulmak istendiğinde kullanılır. Kullanım şekli: var dizi_adı= new Array(eleman1,"— Sunum transkripti:

1 İNTERNET PROGRAMCILIĞI I BTP 207 Ders 9

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) 2

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. Dizi Değişkenler (Array) 3

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 4

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 5

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 6

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: Ekrana Çıktı ve Klavyeden Bilgi Girişi 7

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 8

9 if-else (2/3) 3. Karşılaştırma Deyimleri 9

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 10

11 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. Karşılaştırma Deyimleri 11

12 switch-case (2/2) Kullanım şekli: Karşılaştırma Deyimleri 12

13 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 13

14 for Döngüsü (1/2) UYGULAMA: 1 ile 20 arasındaki çift sayıları ekrana yazdırma. Döngü Deyimleri 14

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 15

16 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 16

17 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 17

18 UYGULAMA: Bir dizi değişkenin içeriğini for … in yapısını kullanarak yazdırma. Döngü Deyimleri 18

19 Fonksiyon Tanımlama ve Çağırma (1/2)  Fonksiyonlar ve etiketlerinin içerisinde tanımlanmak ve çağrılmak zorundadır.  Sayfada kullanılacak fonksiyonlar genellikle ve etiketleri arasında tanımlanır. Böylece, sayfa yüklenmeden fonksiyonlar yüklenir.  Fonksiyonlar ve 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 19

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: Fonksiyonlar 20

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ı 21

22 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ı 22

23 İ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 Tarih-Saat Fonksiyonları 23

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ı 24

25 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. Karakter Fonksiyonları 25

26 UYGULAMA: Kullanıcıdan alınan bir bilginin tersini mesaj olarak yazdırma. Karakter Fonksiyonları 26

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ı 27

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. Karakter Fonksiyonları 28