BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 7

Transkript

1 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 7

2 HTML in sahip olmadığı bazı özelliklerin web sayfalarında kullanılmasını sağlar. Java ile javascript birbirine karıştırılmamalıdır. Java Sun firması tarafından Pascal ve Delphi dillerinden esinlenerek yazılmış bir programlama dilidir. Javascript Netscape firması tarafından C dilinden türetilmiş bir script dilidir. Yorumlanması için bir tarayıcıya ihtiyaç duyar ve yorumlandığı tarayıcının türüne bağlı olarak farklı sonuç verebilir. Javascript kodları HTML sayfa içerisinde veya js uzantılı harici bir dosya oluşturularak kullanılabilir. Javascript kodları, sayfanın açılması, tıklama, sayfanın kapanması, kullanıcının kodları çağırması gibi bir olay meydana geldiğinde çalıştırılır. İstenilirse, hazırlanan kodların belirli aralıklarla çalışması sağlanabilir. HTML ile oluşturulabilen bir işlem javascript kullanılarak da oluşturulabilir ama bu çok doğru bir yöntem değildir. Eklenen her javascript kodu sayfaya yük getirecek ve her tarayıcıda aynı sonucu vermeyecektir. JavaScript 2

3 JavaScript le Neler Yapılabilir? (1/2) Javascript HTML tasarımlarına programlama desteği sağlar. Javascript yardımıyla HTML sayfalarına dinamik metinler konulabilir. document.write( Adınız : + isim) şeklindeki bir javascript kullanımı isim değişkenine verilen değeri HTML sayfasına yazacaktır. Javascript yardımıyla web sayfasında gerçekleşen olaylara göre işlemler gerçekleştirilebilir. HTML sayfası üzerindeki nesnelerin değerlerini okuma, değiştirme veya bunlara değer yazmak için kullanılır. JavaScript 3 İnteraktif web sayfaları tasarlanmasını sağlar. Genellikle HTML sayfalarının içerisine gömülerek kullanılır. Javascript bir yorumlama dilidir. Lisans satın alınmasına gerek yoktur.

4 JavaScript 4 JavaScript le Neler Yapılabilir? (2/2) Form üzerine girilen bilgileri göndermeden önce doğruluğunu kontrol etmek için kullanılabilir. Sayfayı ziyaret eden kişinin web tarayıcısını belirlemek ve tarayıcıya özel yapılması gereken işlemler varsa bunları gerçekleştirmek için kullanılır. JavaScript Yapısı Javascript kodları yazmak için özel bir yazılıma gerek yoktur. Javascript genellikle HTML sayfanın ihtiyaç duyulan bölümlerinde kullanılır. Hazırlanan sayfalar web browser tarafından yorumlanırken, web browser <script language= JavaScript > etiketini gördüğünde bu kısımdan itibaren javascript olarak yorumlar ve </script> etiketini gördüğü anda bu yoruma son verip, HTML yorumuna döner.

5 JavaScript Kodlama 5 Javascript HTML kodları gibi kodlar arasındaki boşlukları ve açıklama satırlarını dikkate almaz. Javascript te komut satırları noktalı virgül (;) işareti ile yan yana veya alt alta yazılabilir. Javascript küçük harf, büyük harf ayrımı yapmaktadır. Nesnelere isim verilirken büyük harf-küçük harf ayrımına dikkat edilmelidir. Javascript nesnelerinin ilk harfi sayı ile başlayamaz ama sonraki karakterlerde sayı kullanılabilir. Javascript nesnelerinin karakterleri arasında boşluk bırakılamaz, boşluk yerine _ işareti kullanılmalıdır. Örneğin deger_1=8 gibi Javascript komutları nesne ismi olarak kullanılamaz.

6 JavaScript Kodlama 6 Nesne ismi olarak kullanılamayan isimler: abstract, alert, arguments, Array, blur, boolean, Boolean, break, byte, callee, caller, captureevents, case, catch, char, class, clearinterval, cleartimeout, close, closed, confirm, const, constructor, continue, Date, debugger, default, defaultstatus, delete, do, document, double, else, enum, escape, eval, export, extends, FALSE, final, finally, find, float, focus, for, frames Function, function, goto, history, home, if, implements, import, in, infinity, innerheight, innerwidth, instanceof, int, interface, isfinite, isnan, java, length, location, locationbar, long, Math, menubar, moveby, moveto, name, NaN, native, netscape, new, null, Number, Object, open, opener, outerheight, outerwidth, package, Packages, pagexoffset, pageyoffset, parent, parsefloat, parseint, personalbar print, private, prompt, protected, prototype, public, RegExp, releaseevents, resizeby, resizeto, return, routeevent, scroll, scrollbars, scrollby, ScrollTo, self, setinterval, settimeout, short, static, status, statusbar, stop, String, super, switch, synchronized, this, throw, throws, toolbar, top, tostring, transient, TRUE, try, typeof, unescape, unwatch, valueof, var, void, watch, while, window, with

7 JavaScript Kodlama 7 Yazılan kodlar ziyaretçinin bilgisayarında çalışacağı için nesne isimlerinde Türkçe karakter kullanılmamalıdır. Javascript te tek tırnak ( ) işareti ile çift tırnak ( ) işareti arasında işlevsel bakımdan bir fark yoktur. Ancak iç içe tırnak kullanılan durumlarda, içteki ve dıştaki tırnaklar farklı olmalıdır. <input type= button onclick= alert( Düğmeye Tıklayınız ); > Yazılan koda açıklama satırı eklemek için // işareti kullanılır. // işareti, sadece işaretin konulduğu satır için geçerli olup yorumlayıcı bu satırı dikkate almayacaktır. Açıklama satırlarının bir satırdan fazla olduğu durumlarda /*.*/ işareti kullanılır. Yazılan kodlar bazı tarayıcılarda sorun çıkartabilir. Bu gibi durumlarda kodlar <!-- //--> yapısı kullanılarak gizlenebilir.

8 JavaScript Kodlama 8 UYGULAMA : JavaScript desteği olmayan bir tarayıcıdan kodları gizleme. 1. Verilen kodları yazıp tarayıcı sayfasında görüntüleyiniz. 2. Sayfada İlk mesajım yazısıyla karşılaşıyorsanız kullandığınız web tarayıcısının javascript desteği var demektir. 3. Oluşturduğunuz sayfayı farklı web tarayıcılarda çalıştırarak deneyiniz.

9 JavaScript Kullanımı 9 HTML sayfa içerisinde JavaScript kullanmak için <script> etiketi kullanılır. JavaScript kodlaması bittikten sonra </script> etiketi ile sonlandırılır. document.write komutu ile web sayfasına istenilen yazı yazdırılabilir. Yazı içerisine yerleştirilen bir HTML etiketi de işlevini yerine getirecektir. A. <head> Etiketi İçerisinde JavaScript Kullanımı <head> ve </head> etiketleri arasına yazılan JavaScript kodları genellikle fonksiyon tanımlamalarında kullanılır. Buraya yazılan script kodları fonksiyon oluşturuyorsa, çağrıldığında veya bir olay gerçekleştiğinde çalışır. Herhangi bir fonksiyon oluşturmuyorsa, sayfa açıldığı anda çalışır ve sayfa yüklenmeden burası aktif olur. Sayfa yüklenirken kullanıcıdan alınmak istenilen bilgi var ise burası kullanılabilir. Bu bölümde tanımlanan değişkenlere, sayfanın herhangi bir bölümünden ulaşılabilir.

10 JavaScript Kullanımı 10 UYGULAMA : <head> etiketi içerisinde JavaScript kullanımı. 1. Verilen kodları yazıp tarayıcı sayfasında görüntüleyiniz. 2. Oluşturulan fonksiyonu farklı yerlerde tanımlayarak farkı görünüz.

11 JavaScript Kullanımı 11 B. <body> Etiketi İçerisinde JavaScript Kullanımı <body> ve </body> etiketleri arasına yazılan JavaScript kodları, sayfa yüklenirken yükleme işlemi <body> etiketine geldiğinde çalışmaya başlar. Bu bölge içerisinde tanımlanan değişkenler tanımlandığı noktadan sonra kullanılabilir. UYGULAMA : JavaScript yardımıyla web sayfasına kayan yazı ekleme. 1. Verilen kodları yazıp tarayıcı sayfasında görüntüleyiniz. 2. HTML yardımıyla tablo oluşturarak iki ayrı sütun için kayan yazı uygulaması yapınız.

12 JavaScript Kullanımı 12 C. <head> ve <body> Etiketlerinde JavaScript Kullanımı Web sayfası içerisine yerleştirilebilecek script sayısında herhangi bir sınırlama yoktur. D. Harici JavaScript Dosyalarının Kullanımı JavaScript kodları harici bir dosyaya yazılır ve bu dosya HTML sayfasından çağrılır. Oluşturulan harici dosyalar.js dosya uzantılı olarak kaydedilir. Bu dosyalarda <script> ve </script> etiketleri kullanılmaz. Javascript kodları doğrudan yazılır. Harici dosyaları çağırmak için kullanılan script satırı <head> veya <body> etiketleri arasında olabilir. Kullanım şekli aşağıdaki gibidir: <script type= text/javascript src= dosya_yolu/dosya_adı.js > </script>

13 Değişkenlere isim verilirken kodlama standartlarına dikkat edilmesi gerekir. Değişken tanımlamak için var ifadesi kullanılır. Tek satırda birden fazla değişken tanımlanabilir. Değişkene değer ataması tanımlama esnasında veya daha sonra yapılabilir. Değişkenler tanımlanırken tipini belirtmeye gerek yoktur. İçerdiği değere göre değişken tipi belirlenecektir. Sayısal türdeki değer atama işlemlerinde değerler tırnak içerisine alınmadan yazılmalıdır. Karakter kümesi şeklindeki ifadelerde ise değerler tırnak içerisinde belirtilmelidir. Daha önce tanımlanan bir değişken tekrar tanımlanırsa içerdiği değer silinecektir. Örneğin, aşağıda ders değişkeni tekrar tanımlandığı için içerdiği EEM306 değeri silinecektir. var ders = EEM306 ; var ders; Değişkenler 13

14 Değişkenler 14 UYGULAMA : 1. Verilen kodları yazıp tarayıcı sayfasında görüntüleyiniz. 2. Değişkenleri harici bir javascript dosyasında tanımlayarak kullanınız.