Java Script'i Tanıyalım

Javascript programı yazmak için ihtiyacınız olan alet-edavat, bu sitenin yanı sıra, iyi bir bilgisayar ve bir düz yazı programıdır. Bilgisayarınız ecza dolabı kılıklı bir PC ise Notepad yeterlidir. Eğer bu amaçla bir kelime-işlem programı kullanacaksanız, oluşturacağınız metnin dosyasını diske veya diskete kaydederken, düz yazı biçiminde kaydetmesini sağlamalısınız. Çalışmaya başlamadan önce örnek kodlarınızı bir arada tutabilmek ve gerektiğinde gerçek sayfalarınızda yararlanabilmek için sabit diskinizde bir dizin açmanız yerinde olur.

Javascript, HTML’in bir parçasıdır ve içinde bulunduğu HTML ile birlikte Web Browser programı tarafından yorumlanır. Dolayısıyla, Javascript programı yazmak demek, bir Web sayfası hazırlamak ve bu sayfadaki HTML kodlarının arasına Javascript kodları gömmek demektir.

O halde, kolları sıvayıp, ilk Javascript programımızı yazalım. Şu kodu yazıp, merhaba1.htm adıyla kaydedin:

 

 
  1. <html>
  2. <head>
  3. <title>Merhaba Dünya!</title>
  4. </head>
  5. <body>
  6. <b>Merhaba Dünya</b><br>
  7. <form>
  8. <button onclick="alert('Merhaba Dünya!')">Tıklayın</button>
  9. </form>
  10. </body>
  11. </html> 
  
 

 

Sonra ya bu dosyayı iki kere tıklayın; ya da favori Browser programınızı çalıştırın ve bu dosyayı açın. Karşınıza çıkacak düğmeyi tıklayın. 

Şimdi kendi kendinizi kutlayın: Birazcık yardımla da olsa, Javascript programcısı olarak dünyaya merhaba demiş bulunuyorsunuz. Yazdığınız koddan tek kelime bile anlamıyorsanız da hiç önemli değil. Önemli olan ilk adımı atmaktı.

Bu adımı attığınıza göre şimdi yazdığınız kodu biraz irdeleyelim. Bütün Web sayfaları gibi, Javascript kodunuzun yer aldığı sayfa da tipik bir HTML kod kümesi:

1. Browser programına kendisinin bir HTML dosyası olduğunu birinci satırda beyan ediyor; ve bittiği yer açıkça gösteriliyor.

2. HTML kodu iki bölüm içeriyor: Başlık (Head) ve Gövde (Body) bölümleri. Her bölümün nerede başladığı ve nerede bittiği açıkça belirtiliyor.

3. Gövde bölümünde bir Form unsuruna yer veriliyor; fakat bu formun tek ögesi var: Düğme (Button).

4. Daha önce Web sayfalarınıza düğme koyduysanız, bu düğmenin onlardan farklı bir tarafı var: Türü, değeri, vs. belirtilmiyor; sadece “onclick="alert('Merhaba Dünya!')" şeklinde bir ifadeye yer veriliyor.

5. Ve ilk Javascript programınızda ne Javascript’in adı geçiyor; ne de HTML ile Javascript bölümlerini birbirinden ayırteden, script etiketine yer veriliyor!

Özellikle bu son husus, size şunu gösteriyor: Günümüzde Netscape ve IE Javascript ile o kadar içiçe geçmiş ve Javascript özellikle 1.2’nci sürümü ile o kadar Browserların Belge Nesnesi Modeli (Document Object Model) ile kaynaşmıştır ki, kimi zaman HTML’in işlevi nerede bitiyor, Javascript’in işlevi nerede başlıyor, kolaylıkla ayırt edilemez.

Javascript’ten söz ederken, bu dilin imla kuralları olmakla birlikte bu kurallara yüzde 100 uymanın zorunlu olmadığını ifade ettik. Kural olarak, Javascript bölümü, HTML’in içine script etiketlerinin arasına gömülür. İşte size bütün kuralları yerine getirilmiş bir Javascript bölümü yazma örneği:

 

 
  1. <head> 
  2. <title>Merhaba Dünya!</title> 
  3. <script language=”Javascript1.2”> 
  4. <!--Javascript kodunu eski sürüm Browserlardan gizleyelim 
  5. function merhaba() //merhaba isimli fonksiyonu deklare ediyoruz 
  6. { //bu, fonksiyonun başlama işareti 
  7. alert (“Merhaba Dünya!”) //fonksiyonun komutu ve komutun gerektirdiği metin 
  8. } //bu fonksiyonun bitme işareti 
  9. // kod gizlemenin sonu --> 
  10. </head> 
  11. <body> 
  12. <b>Merhaba Dünya</b><br> 
  13. <form> 
  14. <button onclick=merhaba()>Tıklayın!</button> 
  15. </form> 
  16. </body> 
  17. <html> 
  
 

 

Bu metni merhaba2.htm adıyla kaydeder ve Browser’ınızda açarsanız, görüntünün ve işlevin tıpatıp aynı olduğunu göreceksiniz. İki metin arasındaki fark, ikincisinin Javascript yazma kurallarına yüzde 100 uymasından ibaret. Bununla birlikte Javascript ile HTML’i birbirinden dikkatlice ayırmanız gereken durumlar, ikisinin birbiriyle kaynaştığı noktalardan daha çoktur. Hatta o kadar ki, Javascript’in ileri sürümüne ilişkin komutlar kullanıyorsanız, eski sürüm Browser’ların kafasının karışmaması ve dolayısıyla ziyaretçinizin bilgisayarının kilitlenmemesi için bunu bile belirtmeniz gereken durumlar olabilir.

Bir de şunu deneyin: önce merhaba.js adıyla şu metni kaydedin:

 

 
  1. function merhaba() 
  2. { 
  3. alert("Merhaba, Dünya!") 
  
 

 

Sonra, merhaba2.htm dosyasında şu değişikliği yapın ve merhaba3.htm adıyla kaydedin.

 

 
  1. <html> 
  2. <head> 
  3. <title>Merhaba Dünya!</title> 
  4. <script src="merhaba.js" language=”JavaScript”> 
  5. </script> 
  6. </head> 
  7. <body> 
  8. <b>Merhaba Dünya</b><br> 
  9. <form> 
  10. <input type="submit" name="button1" value="Tıklayın!" onclick="merhaba()"> 
  11. </form> 
  12. </body> 
  13. </html> 
  
 

 

Ve merhaba3.htm’i açtığınızda yine aynı görüntü ve aynı işlevle karşılaştığınızı göreceksiniz. Bu üçüncü yöntemde sadece Javascript kodlarını içeren ve dosya adının uzatması “.js” olan bir düzyazı dosyasını HTML’e dışardan da eklemiş olduk.

Bu esnekliğe bakarak, Javascript diline, “Ne yapsam olur! Nasıl yazsam işler!” anlayışıyla yaklaşamazsınız. Javascript, bütün bilgisayar dilleri gibi yorumlanabilmesi (çalışabilmesi) için kendi imla ve dilbilgisi kurallarına son derece bağlı kalınmasını ister. Bunu sınamak isterseniz, şu ana kadar oluşturduğunuz herhangi bir HTML dosyasında Javascript bölümündeki bir parantezi veya süslü parantezi kaldırın; dosyayı başka bir isimle kaydedin ve Browser’ınıza açtırmaya çalışın! Merhaba3.htm dosyasında onclick=”merhaba() komutunun bir parantezini kaldırdığımızda hata mesajlarını verdiğini görüyoruz:

HTML sayfalarınının Web Browser programlarında yapabileceği bir başka hata ise, kodu icra etmek yerine içerik gibi görüntülemektir. Web ziyaretçilerinin halâ kullandığı eski sürüm Browser programları, Javascript programlarını ya hiç anlamazlar, ya da eski sürümlerini anlarlar. Netscape 2.0 öncesi ile IE 3.0 öncesi Browser programlarının, Javascript kodlarını icra etmek yerine sayfanın içeriğiymiş gibi görüntülemesini önlemek için Script bölümlerini eski sürüm Browser’lardan, merhaba2.htm sayfasında yaptığınız gibi gizlemeniz gerekir. Merhaba2.htm’e bakarsanız, 

 

 
  1. <!-- Javascript kodunu eski sürüm Browserlardan gizleyelim 
  2. function merhaba() 
  3. { 
  4. alert (“Merhaba Dünya!”) 
  5. } 
  6. // kod gizlemenin sonu -->  
  
 

 

şeklinde bir bölüm göreceksiniz. Bu bölümün başında ve sonunda yer alan “<!--“ ve “-->” işaretlerinin arasındaki herşey, eski sürüm Browserlar tarafından HTML dili kurallarına göre “yorum” sayılacak ve görmezden gelinecektir. Javascript dilinin yorumları ise “//” işaretiyle başlar ve satır sonunda sona erer. Merhaba2.htm’de Javascript kodlarının bütün satırlarında böyle yorumlar koydunuz. Eğer yorumlarınız bir satırdan uzun olacaksa, bunu şöyle belirtebilirsiniz:

 

 
  1. /* yorumun birinci satırı 
  2. yorumun ikinci satırı    
  3. yorumun üçüncü satırı */ 
  
 

 

Javascript veya başka bir dille program yazarken, iyi programcılar, programlarını kendilerinden başkası denetlemeyecek ve yeniden kullanmayacak da olsa, önemli işleri yaptıkları satırlara mutlaka yorum koyarlar. Bunun yararını, kendi yazdığınız bir programı bile bir yıl sonra yeniden açtığınızda görürsünüz!

Ziyaretçinin Web Browser programı Javascript anlıyor ise sayfanızdaki Javascript kodları, ya ilk yazdığınız programda olduğu gibi, ziyaretçinin sayfanızda bir yeri tıklaması veya klavyede bir tuşa basmasıyla harekete geçer; ya da HTML sayfası ziyaretçinin Browser’ında görüntülendiği anda otomatik olarak çalışmaya başlar. Otomatik çalışan Javascript kodu ise iki ayrı yöntemle çalıştırılabilir: HTML kodları icra edilmeden önce (yani sayfanız ziyaretçinin Web Browser’ında görüntülenmeden önce, veya sayfa görüntülendikten sonra.

Davranın düz yazı programınıza ve şu kodları girin. 

 

 
  1. <html> 
  2. <head> 
  3. <title>Merhaba Dünya!</title> 
  4. <script language ="Javascript1.2"> 
  5. <!-- 
  6. alert("Merhaba Dünya!") 
  7. // --> 
  8. </script> 
  9. </head> 
  10. <body> 
  11. <b>Merhaba Dünya</b><br> 
  12. </body> 
  13. <html>  
  
 

 

Bu dosyayı da merhaba4.htm adıyla kaydedin ve Browser’ınızda açın. Sayfanızın içeriğini oluşturan “Merhaba Dünya” yazısı ile Javascript programınızın icra ettirdiği uyarı kutusunun görüntülenmelerindeki sıraya dikkat edin.

Bu dosyada, küçük bir değişiklik yapalım ve kodlarımıza şu şekli verelim: 

 

 
  1. <html> 
  2. <head> 
  3. <title>Merhaba Dünya!</title> 
  4. <script language="Javascript1.2"> 
  5. <!-- 
  6. function merhaba() 
  7. { 
  8. alert("Merhaba Dünya!") 
  9. } 
  10. // --> 
  11. </script> 
  12. </head> 
  13. <body onLoad="merhaba()"> 
  14. <b>Merhaba Dünya</b><br> 
  15. </body> 
  16. <html>  
  
 

 

merhaba5.htm adıyla kaydedeceğiniz bu dosyayı Browser’ınızda açtığınızda, sayfa metni ile uyarı kutusunun görüntülenme sırasına dikkat edin. Merhaba4’de önce uyarı kutusunun görüntülenmesinin sebebi, Browser’ın HTML kodundaki komutları yukarıdan aşağı sırayla yerine getirmesi ve bu arada karşısına çıkan Javascript komutunu da icra etmesidir. Oysa merhaba5’te, Javascript komutunu bir fonksiyon olarak tanımladınız ve bu fonksiyonun icrasını HTML’in BODY etiketinin içeriğinin Browser’ın penceresine yüklenmesine bağladınız. Bunu Javascript’in onLoad komutuyla yaptık. (onLoad’ın nasıl kullanıldığını ve nerelerde kullanıldığını daha sonra ayrıntılı ele alacağız. Şimdiden telaşa kapılmaya gerek yok!)

Buraya kadar gördüğümüz bir kaç örneği, Javascript kodlarının ne zaman ve nasıl işlediğini göstermek amacıyla verdik. Fakat bu örneklerden çıkartacağımız başka bir sonuç daha var: Dikkat etti iseniz Javascript komutları, daima HTML sayfasının bir unsuruna bağlı olarak veriliyor. Yani Javascript’in konusu veya hedefi, Web Browser programının (Netscape veya IE’nin) bilgisayarın ekranında oluşturduğu pencerenin içindeki belgenin bir ögesi. Bu öge, şimdilik ya bu belgenin içindeki FORM unsurunun bir bölümü (örneğin, düğmesi), ya da sayfanın BODY bölümünün bizzat kendisi oldu.

Bu ögeler, unsurlar, unsurların bölümlerine programcılık dilinde Nesne (Object) denir. Ya kendisi bir nesne oluşturabilen veya içinde çalıştığı programın ya da işletim sisteminin nesnelerini konu alan ve bu nesnenin unsurlarını, ögelerini, parçalarını hedef olarak alan dillere Object-oriented (nesne-yönelimli) diller denir. Bu dillerle yazılan programlara (isterse bir Script dilinin düz yazı şeklindeki komutları olsun) Object-oriented Program (OOP) adı verilir.

Javascript programları da OPP sınıfına girdiği için, Javascript programcısı olacaksanız, programlarınızın mutlaka Web Browser’ın bir nesnesinin bir özelliğini belirlemeye veya değiştirmeye ve Web Browser’ı bir nesne oluşturmaya ve nesnenin şu özelliğini şöyle veya böyle yapmaya yönelik olması gerektiğini akıldan hiç çıkartmamalısınız. Bu nesne, Browser’ın penceresinin menü çubuğunun olması ya da olmaması, pencerenin bilgisayar ekranında ne büyüklükte olması, pencerenin alt çerçevesindeki statü mesajının içeriğinin değiştirilmesi bile olabilir. Javascript programı açısından HTML etiketleri ile oluşturacağınız hemen herşey nesnedir. Bu nesnelerin nasıl etkileneceği ise Javascript programının içeriğini oluşturur.
Özetlersek, Javascript ile Web Browser programını penceresini ve Browser programının yorumladığı HTML etiketlerinin oluşturacağı sayfa ögelerini, bu ögelerin biçimini, değerini belirler, sorgulayabilir ve değiştirebilirsiniz.

Şimdi kısaca bu işlevselliğin temeli olan ve adına Document Object Model (DOM, Belge Nesne Modeli) denen kurallar demetinden söz edelim. Javascript kodu, DOM’u hedef alır: bu bağlamda DOM, bir Browser’ın penceresi ve penceresinin içindeki herşey demektir. Ama henüz herşey için bir olay ve metod standardı geliştirilmiş değil.

Olay (Event) ve Metod (Method) burada dikkat etmeniz gereken iki kelime. Olay, Web Browser’ın veya kullanıcının yaptığı bir iş, eylem, hareket demektir; “Metod” ise programcı olarak sizin bu “Olay”ı veya nesnenin bir özelliğini (Property) kullanarak, Belge’nin bir unsuruna yaptırtabileceğiniz iş, eylem, hareket veya değişikliktir. Bu “teori” ilk bakışta sanıldığı kadar kavranması zor değil. Bir örnekle açıklayalım:
Diyelim ki, HTML sayfanızda şöyle bir bölüm var: 

 

 
  1. <form name=form01> WEB KİTAPÇISI    
  2. <input type=”checkbox” name=”roman”>Roman 
  3. <input type=”checkbox” name=”hikaye”>Hikaye 
  4. <input type=”checkbox” name=”biyografi”>Biyografi 
  5. <textarea name=”sonuc” rows=”6” cols=”6”>Burada sonuç gösterilecek</textarea> 
  6. </form>  
  
 

 

Şimdi bu HTML kodu sayfanızda şu Nesne’leri oluşturur:

1. Bir adet Form
2. Dört adet “checkbox” türü INPUT alanı
3. Bir adet metin alanı

Şimdi dikkat: Sizin açınızdan “form01” isimli bu formu oluşturan FORM ögesi, Javascript açısından document.form01 adlı nesnedir. Ziyaretçinin içine işaret koyduğu kutu, Javascript tarafından document.checkboxSelected diye tanınır. Sizin sonuc isimli metin alanınızın içinde yazılı olacak metin ise Javascript bakımından document.form01.sonuc.value (value=değer) diye bilinir.

HTML dilini geliştirenler, türü checkbox olan INPUT nesnesinin başına gelebilecek “olay” türlerinin neler olabileceğini düşünürken, “Mesela,” demişler, “Kullanıcı bu kutuyu tıklayabilir!” Yani, bu nesnenin Browser açısından yol açabileceği “olay”lardan biri tıklanması halinde olan olaydır. Tıklamanın İngilizcesi ne? “click!” O halde bu olayın adı “Click,” bu olayı yönlenrdiren metodun adı ise “onClick”tir (on, İngilizce -de, -da eki veya üzerinde, halinde kelimesinin karşılığıdır). Bu durumda “onClick,” olayı, bu kutu açısından bir olaydır ve Javascript prnogramcısı olarak bu olayı yakalayabilir, kullanabiliriz. Başka bir deyişle, Browser’a, Javascript yoluyla “Ey Browser; kullanıcı benim INPUT nesnelerimden “roman” adlı olanı tıkladığı zaman şu, şu işi yap!” emrini verebiliriz. Bu noktada bilgisayar programının, hangi dille yazılırsa yazılsın, alt alta gelmiş komutlar listesi olduğunu hatırlatalım.

Peki, yine aynı örnekte, Browser’a Javascript yoluyla ne gibi bir iş yaptırtabiliriz? Mesela, “Ey Browser, kullanıcı benim INPUT nesnelerimden ‘roman’ adlı olanı tıkladığı zaman benim ’sonuc’ adlı TEXTAREA nesnemin değerini ‘Roman’ yap!” diyebiliriz. Biliyorsunuz ki, TEXTAREA nesnelerinin değeri, ekranda çizdikleri kutunun içine koydukları içerik demektir. Tabiî aynı mantıkla, “hikaye” kutusu işaretlenince Sonuç kutusuna “Hikaye,” “biyografi” kutusu işaretlenince de Sonuç kutusuna “Biyografi” yazdırtmak elimizde.

Kısaca, Javascript herşeyi, bir HTML ögesine göre tanımlar, adlandırır ve bilir. Unutmayacağınız kural: “Javascript, sayfanın bir şeyini alır, sayfanın bir şeyine hitabeder!”

Bu gayet anlamlı şekilde ifade ettiğimiz kuralı yerine getirmekte sorun, sadece Javascript’in on-onbeş kelimesini, yedi-sekiz işlemini öğrenmek değil, aslında HTML belgesinin nesnelerinin olaylarını ve metodlarını öğrenmektir.