WEB PROGRAMLAMA. DERS NOTLARI / JavaScript e Giriş YARD. DOÇ. DR. MEHTAP YALÇINKAYA

Transkript

1 WEB PROGRAMLAMA DERS NOTLARI / JavaScript e Giriş YARD. DOÇ. DR. MEHTAP YALÇINKAYA

2 Betik dili web sayfalarında dinamik içerik sağlamak ve kullanıcıyla iletişim kurmak için kullanılan istemci tarafında çalışan bir dildir. Html etiketleri arasında tanımlanarak kullanılabilir yılında Brendan Eich tarafından geliştirilmiştir. Javascript dilini, C dilinin web sayfalarına uyarlanmış basit sürümü olarak düşünülebilirsiniz. Javascript dili isim benzerliğine rağmen Java ile birbirinden bağımsız, farklı dillerdir. Java gerçek bir programlama dilidir. Javascript ise bir script dildir. Javascript dili C, Java, Perl, Python, Self dillerinden etkilenmiş ve geliştirilmiştir. JScript, JScript.NET, Objective-J, TIScript dillerinin oluşturulması için kullanılmış ve gelişmesine yardımcı olmuştur. Javascript dili 1.0 versiyonundan başlayarak versiyonuna ulaşmıştır. Script kodlarını web editör uygulamasında ya da notepad kullanarak oluşturup düzenleyebilirsiniz.

3 Başlangıçta sadece Netscape tarafından desteklenen dil, şimdi tüm tarayıcılar tarafından desteklenmekte ve kullanılmaktadır. Temel script komutları her tarayıcıda çalışmasına rağmen ileri düzey komutlar bazı tarayıcılar tarafından tam olarak desteklenmemektedir. Script komutlarının browser üzerinde çalışıp çalışmamasını güvenlik açısından kullanıcının belirlemesi sağlanmıştır. İsteyen browser ayarlarından script kullanımını kapatabilir. HTML e JavaScript Kodlarını Tanıtma Script kodlarını html e tanıtmak için;

4 HTML e JavaScript Kodlarını Tanıtma Betik Dili (JavaScript ) Type parametresi script blokları arasında yazılacak kodların türünü belirtir. Language parametresi ile javascript kodlarının sürümünü belirtir. Tüm tarayıcılarda sorunsuz çalışması için javascript seçmek doğru olacaktır.

5 JavaScript Kodlarının HTML deki Konumu JavaScript kodları sayfa içerisinde 3 bölümde kullanılabilir; Birinci yol script kodlarını head etiketleri arasına yazarak kullanmaktır. Head etikletleri arasında yazılan kodlar sayfa yüklenmeden derlenecektir. Sayfamızda gerçekleşen olaylar karşısında (düğme tıklanması vb.) kodların çalışmasını istiyorsak gerekli fonksiyonları ve değişkenleri bu bölümde yazmamız gereklidir.

6 JavaScript Kodlarının HTML deki Konumu İkinci yol script kodlarını body etiketleri arasına yazarak kullanmaktır. Body etiketleri arasına yazılan script kodları sayfa yüklendiğinde otomatik olarak derlenip çalışacaktır.

7 JavaScript Kodlarının HTML deki Konumu Script çalıştırmanın diğer bir yolu *.js uzantılı olarak kaydettiğimiz harici bir js dosyasını sayfaya dahil edip kodları çalıştırmaktır. Web sayfasına harici javascript dosyası dahil etmek için; Script kodlarını yazarak ilkkod.js şeklinde kaydedelim. Web editör programını çalıştırarak yeni bir html sayfası oluşturun. Script komutunun src parametresini kullanarak oluşturduğunuz js dosyasını aşağıdaki şekilde web sayfasına dahil ediniz. Oluşturduğumuz js dosyası ve html dosyası farklı klasörlerde ise js dosyasının html dosyasına göre adresi src parametresi içerisinde belirtilmek gerekir. Html sayfasını çalıştırdığımızda, ekranda sola dayalı olarak ilk JavaScript Kodlarım ifadesi yazdırılacaktır.

8 JavaScript Kodlarının Yazım Kuralları Betik Dili (JavaScript )

9 JavaScript Kodlarını İsimlendirme Betik Dili (JavaScript )

10 JavaScript Kodlarında Özel İşaret Gösterimi

11 JavaScript Kodlarında Özel İşaret Gösterimi

12 JavaScript Kodlarında Yorum Kodları Betik Dili (JavaScript )

13 Değişkenler Betik Dili (JavaScript )

14 Değişkenler-Türleri Betik Dili (JavaScript )

15 Değişkenlere Değer Vermek Betik Dili (JavaScript )

16 Değişkenlere Değer Vermek Betik Dili (JavaScript )

17 Değişkenlere Değer Vermek Betik Dili (JavaScript ) Yeni bir html sayfası açıp, sayı, string ve boolean türünde değişkenler tanımlayıp rastgele değerler aktaralım ;

18 Değişkenlere Değer Vermek-Tür Dönüşümleri

19 Değişkenler-Türler Arası İşlemler Betik Dili (JavaScript )

24 Operatörler- İşlem Öncelik Sırası Aritmetik Operatörler

28 Operatörler- İşlem Öncelik Sırası Atama Operatörleri

29 Operatörler- İşlem Öncelik Sırası Karşılaştırma Operatörleri

30 Operatörler- İşlem Öncelik Sırası Karşılaştırma Operatörleri

31 Operatörler- İşlem Öncelik Sırası Mantıksal Operatörler

32 Operatörler- İşlem Öncelik Sırası Mantıksal Operatörler

33 Operatörler- İşlem Öncelik Sırası İşlem Önceliği

34 Çalışma Betik Dili (JavaScript )

35 Kodlama Yapısı Betik Dili (JavaScript )

47 Kodlama Yapısı "Merhaba Dünya" yazısı 7 defa yazılacak ve her defasında büyüklüğü artacaktır. var sayac=1 while (sayac <= 7) { document.writeln ("") document.writeln ("merhaba Dünya") document.writeln ("") } sayac++

60 Kodlama Yapısı Fonksiyonlar

65 Kodlama Yapısı Fonksiyonlar Girilen sayının karesini hesaplayan ve uygulamaya sayısal değer olarak dahil eden bir fonksiyon yazalım. Script etiketleri arasında karesi isminde bir fonksiyon tanımlayalım. Fonksiyonumuz dışarıdan tek parametre alsın. Dışarıdan aldığı x değerini fonksiyon, kendi içerisinde kare alma işlemini yapsın. Hesapladığı kare değerini fonksiyon dışına veri olarak göndermek için return komutunu kullanalım.

69 Kodlama Yapısı ÖDEV

72 OLAYLAR (EVENTS) İnternet sayfamızdaki her şey olaylarla gözlenebilir. Farenin herhangi bir yere tıklaması klavyeden bir şeyler yazılması, sayfanın yüklenmesi vb. eylemler olaylarla kontrol edilebilir. Olayların gerçekleşmesi ile yazılmış fonksiyonların tetiklenmesi sağlanır. Olay yöneticileri, olay gerçekleştiğinde hazırladığımız fonksiyonları tetiklememizi sağlar. Kullanımı basittir. Html etiketlerine olay yöneticisi eklerken etiketi kapatmadan komut satırı eklenir. Html etiketlerinin neredeyse tamamına uygulanabilir. Örneğin <a> etiketine olay yöneticisi eklersek yazım şu şekilde olacaktır.

73 OLAYLAR (EVENTS) onclick Olayı html etiketlerinin üstüne tek tıklandığında gerçekleşen olay Sahneye eklediğimiz düğmeye tıklama sonucu uyarı veren script kodu // Fonksiyonumuz ekrana düğme tıklandı // uyarısını versin. Fonksiyonumuz hazır. Artık body etiketleri arasına düğme oluşturmak için gerekli html komutlarını yazıp olayımızı düğme etiketinin içerisinde tanımlayabiliriz.

74 OLAYLAR (EVENTS) ondblclick Olayı html etiketlerinin üstüne çift tıklandığında gerçekleşen olay <a href=" ondblclick="alert ('Ders Notları açılıyor..')"> Ders Notları</a> onload Olayı Sayfamızdaki herhangi bir nesnenin tamamen yüklenme olayını temsil eder. Body,img,frame ve frameset etiketlerinde kullanılabilir. Resim yüklenmesine göre kontrol ettirseydik <img> etiketi içerisine yazmamız gerekirdi.

75 OLAYLAR (EVENTS) onunload Olayı Nesnenin kaldırılması olayını gözler. Body etiketi içerisine parametre olarak yazılırsa sayfanın kapatılma olayını gözlemiş oluruz. onfocus Olayı Sayfa üzerinde html elemanı işlem yapılmak üzere seçildiğinde yani o nesneye odaklanıldığında çalışan olay tipidir. Metin kutusunun içine yazı yazmaya çalıştığımızda artık uyarı verecektir.

76 OLAYLAR (EVENTS) onblur Olayı Seçilen html nesnesinin seçilme özelliğini kaybettiğinde çalışan olaydır. Seçilmiş eleman seçimden çıkartılmışsa tetiklenir. onmouseover Olayı Html nesnesinin üstüne gelme olayını gözleyen olaydır. onmouseout Olayı onmousemove Olayı onmousedown Olayı Farenin nesne üzerinden ayrılması olayıdır. Fare nesne üzerinde gezdirildiğinde meydana gelen olaydır. Fare nesne üzerinde basıldığı anda gerçekleşen olaydır. Click ile farkı click olayının bırakılma eylemidir. onmouseup Olayı Farenin basılı olan tuşu bırakma olayıdır.

77 OLAYLAR (EVENTS) ÖDEV onkeydown Olayı Klavyeden tuşa basma olayıdır. Metin kutusu nesnesinde klavyeden tuşa basıldığında olay dinleyicisi çalışır. Klavyeden basılan tuşu ekranda göstermek için; Klavyeden basılan tuşu tespit etmek için olayın event özelliğini ve keycode komutunu kullanacağız. Event.keyCode basılan tuşun ascii kodunu okuyacaktır. String.fromCharCode ile okunan ascii değeri tuşun ismine çevirecektir.

78 OLAYLAR (EVENTS) onselect Olayı Metin kutuları içerisindeki yazı seçildiğinde meydana gelen olaydır. onresize Olayı Tarayıcı penceresinin boyutunu değiştirdiğinde gerçekleşen olaydır. Body etiketine yazılır.

79 OLAYLAR (EVENTS) ÖDEV

80 NESNELER Betik Dili (JavaScript )

81 NESNELER Tarayıcının alt kısmındaki, durum çubuğunda gösterilen mesajdır. Script komutları arasında herhangi bir yere yazılabilir. Tarayıcıların bir kısmı bu özelliği desteklememektedir.

82 NESNELER Alert Metodu Daha önceki örneklerde defalarca kullandığımız alert kullanıcıyı bilgilendirmek için uyarı pencereleri oluşturur. Gereksiz yere kullanmaktan kaçınmak gerekir. Ekranda 10 defa uyarı kutusu oluşturacak script kodları için ;

83 NESNELER Confirm Metodu Yapılan işlem sonucu onay kutusu oluşturur. Onay kutusunun sonucu bir boolean olarak geri döner. True ya da false şeklinde alınan cevap ile programın akışı belirlenir. Sayfaya eklediğimiz kapat düğmesine basıldığında sayfayı kapatmak için onay isteyen script kodları için; Head etiketleri arasında, düğmeye basıldığında çalışmak üzere bir fonksiyon oluşturalım. Fonksiyonumuz düğmeye bastığında bir onaylama penceresi oluştursun. Kullanıcının vereceği cevaba göre sayfayı kapatıp kapatmamaya karar versin. Onaylama kutusu için karar isminde bir boolean değişken oluşturalım. Confirm kutusundan gelecek true yada false bilgisi bu değişkene atanacak.

86 NESNELER Close Metodu Prompt Metodu

87 NESNELER Open Metodu

88 NESNELER Nesneler ile ilgili ders notlarının devamı; JAVASCRIPT-Nesne.pdf isimli belgededir.

89 NESNELER ÖDEV

90 NESNELER ÖDEV

91 NESNELER ÖDEV

92 Kaynaklar Adım Adım HTML ve XHTML- Faithe Wempen Fatih HAYRİOĞLU-CSS(Stil Şablonları) Başlangıç için Seval ÖZBALCI - Internet Programlama Ders Notu Umut ÖZTÜRK- CSS giriş