İnternet Programlama-I JAVASCRİPT. JavaScript Nedir? JavaScript web programlama dilleri arasında yer almaktadır. JavaScript, adından da anlaşılacağı gibi.

... konulu sunumlar: "İnternet Programlama-I JAVASCRİPT. JavaScript Nedir? JavaScript web programlama dilleri arasında yer almaktadır. JavaScript, adından da anlaşılacağı gibi."— Sunum transkripti:

1 İnternet Programlama-I JAVASCRİPT

2 JavaScript Nedir? JavaScript web programlama dilleri arasında yer almaktadır. JavaScript, adından da anlaşılacağı gibi bir script dilidir. Ancak Java programlama dilinden daha az yeteneklidir. Java’nın bazı özelliklerini içeren bir web programlama dili olarak karşımıza çıkmaktadır.

3 JavaScript Nedir? JavaScript ilk önce Netscape şirketi tarafından geliştirilmiştir. Söz konusu bu sürüm sadece Netscape Navigatör tarayıcısında çalışıyordu. Şu anda Microsoft İnternet Explorer ‘da da çalışmaktadır. JavaScript programları herhangi bir derleme (compile) işlemine tabi tutulmadan doğrudan doğruya tarayıcıda çalışabilmektedir. Bunun için HTML programlarını oluşturmak için izlediğimiz yoldan gidilir.

4 JavaScript Nedir? JavaScript programları kullanıcının tarayıcısında çalışan programlardır. Bir sayfa kullanıcı tarayıcısı tarafında çalıştırıldığında, içerdiği JavaScript kodlarıda çalışır. Bunun anlamı, tarayıcı bir takım işlemleri yapmak için sunucuya başvurmaz. Bu yöntem çoğu uygulamada pratik çözümler sunabilir. Özellikle form alanlarının denetlenmesinde, sunucu tarafı programları yerine, kullanıcı tarafı için JavaScript programları hazırlanır.

5 HTML İçinde JavaScript Kullanımı JavaScript programları HTML kodlarıyla birlikte kullanılır. HTML kodları arasında bir JavaScript programını yerleştirebilmek için elementinden yararlanılır. Tarayıcı ile arasında yer alan tüm satırları bir HTML satırı olarak değil, bir JavaScript programı olarak algılar.

6 HTML İçinde JavaScript Kullanımı ilk javascript programım alert ("merhaba Türkiye !"); Örnek - 1

7 JavaScript Hatalarını Ayıklama JavaScript programları belirli kurallara uyarak yazılmalıdır. Aksi taktirde çalışmayacaktır. Hatalı satırların belirlenerek, düzeltilmesi gerekecektir. Bunun için tarayıcıda bazı tanımların yapılmış olması söz konusudur. Her JavaScript hatasıyla karşılaşıldığında kullanıcının uyarılması gerekiyorsa, tarayıcı menüsü üzerindeki araçlar komutu ve ardından İnternet Seçenekleri komutu çalıştırılır. Açılan pencere üzerinden Gelişmiş sekmesi tıklatılır.

8 JavaScript Hatalarını Ayıklama Şekilde görüldüğü gibi “Her komut dizisi hatası için bir hata iletisi göster” onay kutusu işaretlenir.

9 JavaScript Hatalarını Ayıklama Örnek -2 ilk javascript programım document.write "Merhaba Türkiye !");

10 JavaScript Hatalarını Ayıklama document.write ("Merhaba Türkiye !"); satırı düzeltilince uyarı yapılmaz.

11 Bilgileri Tarayıcı Penceresinde Görüntüleme En basit Javascript deyimleri, bilgiyi tarayıcı penceresinde görüntüleyenlerdir. Bu amaçla document.write ve document.writeln deyimlerinden yararlanılır. Aslında burada document bir Javascript nesnesidir. Bu nesne üzerine uygulanacak write() ve writeln() ise birer Javascript yöntemi olarak karşımıza çıkmaktadır.

12 Bilgileri Tarayıcı Penceresinde Görüntüleme Write() yöntemi, belirtilen bir bilgiyi doğrudan doğruya tarayıcı penceresinde görüntüler. Writeln() yöntemi de aynı görevi yerine getirir. Ancak farklı olarak bilginin sonuna yeni satır karakterini ekler.

13 Mesaj Kutusu Önceki örneklerde alert() yöntemine yer vermiştik. Bu deyim, belirtilen bir ifadenin mesaj kutusu içinde görüntülenmesini sağlıyordu. Bu yöntem direk olarak kullanılabileceği gibi, window nesnesi ile birlikte window.alert() biçiminde de kullanılabilir.

14 Mesaj Kutusu mesaj kutusu alert ("Devam etmek için TAMAM düğmesini tıklayınız..."); Örnek - 3

15 Onay Kutusu Mesaj kutuları sadece TAMAM düğmesine sahiptir. Bu düğme tıklatıldığında herhangi bir işlem yapılmadan bir sonraki adıma geçilir. Bazı durumlarda mesaj kutusunun Tamam ve İptal düğmelerine sahip olması gerekebilir. Bunun için window nesnesinin confirm() yönteminden yararlanılarak onay kutuları yaratılır.

16 Onay Kutusu onay kutusu var onay = window.confirm("Devam etmek için TAMAM düğmesini, İptal için İPTAL düğmesini tıklayınız… "); if (onay) { window.alert (“onaylandı”); } Örnek - 4 else window.alert (“İptal Edildi”);

17 Onay Kutusu

18 Bilgi Giriş Kutusu Programa bilgi giriş kutuları yardımıyla herhangi bir değerin girilmesi istenebilir. Bunun anlamı, program tarayıcıda çalıştırıldıktan sonra bir giriş kutusu görüntülenecek, kullanıcı buraya bilgi girdikten sonra söz konusu değer programa aktarılacak ve orada değerlendirilecektir. Javascript programlarında bilgi girişi kutusu window nesnesinin prompt() yöntemi ile tanımlanır. Elde edilen değerin programda kullanılabilmesi için bir değişkene atanması gerekmektedir.

19 Bilgi Girişi Kutusu bilgi girişi kutusu var cevap=window.prompt (“Lütfen adınızı yazınız: ”); document.write(cevap); Örnek - 5

20 Bilgi Girişi Kutusu Program çalıştırılıp bilgi girişi yapıldıktan sonra TAMAM butonuna basılırsa tarayıcıda aşağıdaki gibi görüntülenecektir.

21 Veri Türleri ve Değişkenler Diğer programlama dillerinde olduğu gibi, Jacascript programlarında da çeşitli türden veriler kullanılabilir. Programlar bu veriler ile çalışacaktır. Verilerin tanımlanması ve gerektiğinde dönüştürülmesi büyük önem taşır. Javascript içinde veriler iki farklı şekilde karşımıza çıkmaktadır.  Sabit değerler  Değişkenler

22 Veri Türleri ve Değişkenler Sabit değerler, yada başka bir deyişle “literal”, program içinde kullanılan değişmez değerleri ifade eder. Örneğin, “123” sayısı bir sabiti gösterir. Çünkü bu ifade sabit bir sayıdır. Değişmeden program içinde kullanılabilir. Değişkenler ise, javascript programı içinde değişebilen ifadeler olarak karşımıza çıkarlar. Örneğin “tarih” bir değişken adı ise, program içinde farklı değerler alabilir yada değiştirilebilir.

23 Veri Türlerinin Dönüşümü Javascript’de bir değişkenin içerdiği veri türü istendiğinde değiştirilebilir. Aslında değişken içine hangi tür veri aktarılırsa, değişken artık o veri türüne sahip olur. Örneğin, “durum” isimli bir değişkene “1” sayısal değerinin atandığını varsayalım. Bu durumda programın herhangi bir yerinde “durum” değişkeni kullanıldığında, içerdiği “1” sayısal değeri işlem görecektir. Ancak programın herhangi bir aşamasında aynı değişkene farklı bir veri türüne sahip değer atanabilir.

24 Veri Türlerinin Dönüşümü Javascript programlarında bir değişkenin içerdiği veri türü, bu değişkene atanan verinin türüne bağlı olarak işlem görmektedir. Yani, değişken içine hangi tür veri aktarılırsa, değişken o veri türüne bağlı olarak işlem yapacaktır. Burada dikkat etmemiz gerekecek bir özellik var. Örneğin “üye numaranız” bilgisi ile 99 sayısal değerini üyelik isimli aynı değişkene atamak için; uyelik= “üye numaranız” + 99; şeklinde tanım yapılabilir.

25 Veri Türlerinin Dönüşümü Bu durumda değişkenin içerdiği değer “ üye numaranız 99 ” biçiminde olacaktır. Bir dizgi değer sayısal değeri içeriyorsa, örneğin “75” biçiminde tırnak içinde gösteriliyorsa, gerektiğinde aritmetik işlemlere tabi tutulabilir. toplam= “75” + 25; biçiminde yapılan tanım sonucunda toplam değişkeninin 100 sayısal değerini içerdiği görülecektir.

26 Veri Türlerinin Dönüşümü veri türlerinin dönüşümü document.write ( “Sonuç= ” +(15+20)); Örnek - 5

27 Değişkenler Değişken adından da anlaşılacağı gibi, programlarda içine veri yerleştirilebilen ortamlar olarak düşünülebilir. Değişkenlerin içerdiği değer program içinde değişebilir. Her değişkenin bir ismi olmalıdır. Bu isim program içinde tanımlanır. Değişken isimleri bir harf ile veya “_” işareti ile başlamalıdır. Değişken ismi verilirken Javascriptin büyük küçük harf duyarlılığı unutulmamalıdır.

28 Değişkenlerin Tanımlanması say=70; var say=70; mesaj= “hata var…”; say= 70 * 2; sayi_1= 2; sayi_2= 70; say= 70* sayi_1; say= sayi_1 * sayi_2; ….

29 Sabitler Javascript programlarında değişkenlerin yanı sıra sabitlere de yer verilebilir. Javascript sabitleri şu türlerden biri olabilir.  Tamsayılar  Kayan noktalı sabitler  Dizgi sabitleri  Mantıksal sabitler  Dizi sabitleri  Nesne sabitler

30 Tamsayılar Tamsayı matematiksel anlamda bildiğimiz, birbirini takip eden rakamlardan oluşur. Javascript sabitleri onluk (decimal) ve sekizlik (octal) olabilir. Onluk tam sayı sabitler 0-9 rakamlarından oluşabilir. Onaltılık tamsayı sabitler 0-9 rakamları ve A-F harflerinden oluşur ve 0x ifadesi ile başlar. Sekizlik tamsayı sabitleri ise 0-7 rakamlarından oluşur.

31 Tamsayılar Onluk tamsayı sabitler: 12234 823 -49 Onaltılık tamsayı sabitler: 0xAFF 0xAA 0x1AC Sekizlik tamsayı sabitler 123 -456 777

32 Kayan Noktalı Sabitler Kayan noktalı sabitler, ondalık noktaya sahip sabitler olarak bilinir. Bu tür sabitler üstel biçimde ifade edilebilir..E 5.3E9 -4.63E12 8.91E-8 -5.3E-11

33 Dizgi Sabitler Dizgi, karakterler katarı olarak bilinir. Dizgi içinde rakam, harf ve bazı özel işaretler yer alabilir. Dizgiler (“) veya (‘) işaretleri arasında ifade edilirler. “2001” “Pazartesi” ‘Pazartesi’ “Hata var…”

34 Dizgi Sabitler Dizgiler içinde belirli amaçlara yönelik özel karakterler kullanılabilir; Karakterİşlevi \bGeri boşluk \fForm besleme (form feed) \nYeni satır (new line) \rSatır başı (Carriage return) \t Sekme (tab) \’(‘) işaretinin dizgi içinde tanımı

35 Dizgi Sabitler Karakterİşlevi \”(“) işaretinin dizgi içinde tanımı \\(\) işaretinin dizgi içinde tanımı test_yol= “C:\\test”  (C:\test) hata_var= “hata durumunda \”Hata Var \” mesajı görüntülenir”;

36 Boolean (Mantıksal) Sabitler javascript programlarında Boolean Sabitleri kullanılabilir. Bu tür sabitler iki değere sahip olabilirler: true ve false. Örneğin program içerisinde durum isimli değişkene true sabiti aşağıda görüldüğü şekilde atanabilir. durum= true;

37 Dizi Sabiti Javascript programlarında dizilere sıkça yer verilir. Dizi (array) program içinde aynen değişkenler gibi kullanılabilen olanaklardır. Ancak bir dizi birden fazla değer içerebilir. O halde bir dizinin sabit değerleri içermesi söz konusu olacaktır. Bir dizi elemanları “[ ]” işaretleri içinde, birbirleriyle virgülle ayrılmak suretiyle tanımlanırlar. gunler= [ “Pazartesi”, “Salı”, “Çarşamba”, “Perşembe”, “Cuma”, “Cumartesi”, “Pazar”]

38 Nesne Sabitleri Bir nesne sabiti, özellik isimleri ve onlarla ilişkili değerlerden oluşan bir liste olarak düşünülebilir. gun= {1: “Pazartesi”, 2: “Salı”} document.write(gun.1); document.write(gun.2);

39 İşleçler Javascript programlarında, diğer programlama dillerinde olduğu gibi, farklı amaçlara yönelik birçok işleç (operator) kullanılabilmektedir. Javascript işleçleri arasında atama, karşılaştırma, aritmetik, bit, mantıksal ve özel işleçler sayılabilir.

40 Atama İşleçleri Bir değişkene bir değerin ya da bir ifadenin yerleştirilmesi amacıyla atama işleçlerinden yararlanılır. Javascript’in çok sayıda atama işleci bulunmaktadır. Temel atama işleci (=) olarak kabul edilmektedir. sonuc = a sonuc= a+b a= a+b a += b

41 Atama İşleçleri işleçanlamı a+=ba=a+b a<<=ba=a << b a-=ba=a-b a>>=ba=a >> b a*=ba=a*b a&=ba=a & b a/=ba=a/b a^=ba=a ^ b a%=ba=a%b a|=ba=a | b

42 Atama İşleçleri atama işleçleri a=2 b=1 a+=b document.write(a); Örnek - 6

43 Karşılaştırma İşleçleri Javascript programında iki değeri karşılaştırmak amacıyla karşılaştırma işleçlerinden yararlanılır. İki değerin birbirine eşit olup olmadığı veya birbirinden küçük yada büyük olup olmadıkları bu işleçler yardımıyla denetlenir.

44 Karşılaştırma İşleçleri işleçanlamı ==İki değerin eşitliğini ifade eder. !=Eşit değil ===İki değerin eşitliğini ifade eder (Aynı tür) !==Eşit değil (aynı tür) >Büyüktür >=Büyük veya eşittir <Küçüktür <=Küçük veya eşittir

45 Karşılaştırma İşleçleri karşılaştırma işleçleri sayi=2 if (sayi>0) document.write("Değerpozitif bir sayıdır..."); Örnek - 7

46 Aritmetik İşleçler İşleçAnlamı +Toplama İşlemi -Çıkarma İşlemi *Çarpma İşlemi /Bölme İşlemi %Bölmedeki kalan (Mod) ++Arttırma --Eksiltme

47 Aritmetik İşleçler Örnek – 8 aritmetiksel işleçler sayi_1=20 sayi_2=10 sonuc= (sayi_1-sayi_2)/5 document.write(" İşlemin sonucu: " +sonuc);

48 Aritmetik İşleçler Örnek – 9 aritmetiksel işleçler sayi_1=15 sayi_2=4 sonuc= sayi_1%sayi_2 document.write("İşleminin sonucu: " +sonuc );

49 Aritmetik İşleçler aritmetiksel işleçler x=10 sonuc= x++ document.write("İşleminin sonucu: " +sonuc ); Örnek – 10

50 Aritmetik İşleçler aritmetiksel işleçler x=10 sonuc= x++ document.write("İşleminin sonucu: " +sonuc ); Örnek – 11

51 Aritmetik İşleçler aritmetiksel işleçler x=10 sonuc= ++x document.write("İşleminin sonucu: " +sonuc ); Örnek – 12

52 Aritmetik İşleçler aritmetiksel işleçler x=10 sonuc= --x document.write("İşleminin sonucu: " +sonuc ); Örnek – 13

53 Bit İşleçleri İşleçAnlamı &Ve işleci |Veya işleci ^Xor işleci ( iki bitte “0” veya “1” ise sonuç “0” aksi halde “1”dir) ~ değil işleci (“1” i “0” a, “0”ı “1” e çevirir) <<İkili karşılığını sola doğru belirlenen sayıda kaydırır, sağ tarafına sıfır ilave eder. >>ikili karşılığının sağ tarafında belirli sayıda biti sol tarafa kaydırılır. >>> İkili karşılığını sağa doğru belirlenen sayıda kaydırır, sol tarafına sıfır ilave eder.

54 Bit İşleçleri bit işleçleri x=19 (10011) y=22 (10110) sonuc=x&y document.write("İşleminin sonucu: " +sonuc ); Örnek – 14

55 Mantıksal İşleçler İşleçAnlamı &&“ve” (AND) ||“veya” (OR) !“değil” (NOT) Mantıksal işleçlerin kullanılmasında ifadelerin doğruluk değerlerine dikkat etmek gerekiyor. Doğruluk değeri, ifadenin “doğru” (true) ya da “yanlış” (false) olmasıyla ilgilidir.

56 Mantıksal İşleçler bit işleçleri x=true y=false sonuc=x&&y document.write("İşleminin sonucu: " +sonuc ); Örnek – 15

57 Mantıksal İşleçler bit işleçleri x=true y=false sonuc=x||y document.write("İşleminin sonucu: " +sonuc ); Örnek – 16

58 Mantıksal İşleçler bit işleçleri x=true sonuc= !x document.write("İşleminin sonucu: " +sonuc ); Örnek – 17

59 Dizgi İşleçleri İşleçAnlamı +İki dizgiyi birleştirir. +=Diziyi önceki değeriyle birleştirir. Dizgi, harf, rakam, ve bazı özel işaretlerden oluşan topluluklardır. İki dizgiyi birleştirerek biz başka dizgi elde edilebilir.

60 Dizgi İşleçleri bit işleçleri x="Programda " y="bir hatayla karşılaşıldı." sonuc= x+y document.write(sonuc); Örnek – 18

61 Dizgi İşleçleri x="Programda " y="bir hatayla karşılaşıldı." document.write(x+y); Örnek – 18 x="Programda " x+="bir hatayla karşılaşıldı." document.write(x);