JavaScript Dünyasında Adım Adım

Jul 24,2007 00:00 by canawar

Yazı dizimizin giriş bölümünde JavaScript'in kısa tarihi, ne olup ne olmadığı ve bugüne kadar yayınlanan JavaScript versiyonları hakkında bilgi sahibi olmuştuk. Artık JavaScript ile yapabileceklerimiz ve nasıl yapabileceğimiz ile ilgili fikirler edinip adımlarımızı sıklaştırmanın vakti geldi. Öyleyse dikkat kesilip bu konudaki yazımızı okumaya başlayabilirsiniz.

Netscape firmasının JavaScript dilini geliştirmesindeki amaç HTML(Hyper Text Markup Language - Zengin Metin İşaretleme Dili)' nin dinamik web sayfaları hazırlamak için sunduğu olanakların yok denilecek kadar az olmasıydı. Bu yüzden kısaca HTML ile yapamadıklarımızı JavaScript ile yapabiliriz denilebilir. Tabi bu tanım yazıya son noktayı koymak için yeterli olmayacağından biraz daha açıklama yapmamız gerekiyor.

JavaScript istemci-taraflı(client-side) bir dil olduğu için JavaScript ile yazılan kodlar web sunucusunda(server) değil, kodların içinde bulunduğu sayfayı gezen ziyaretçinin-ki burada ziyaretçiye istemci de diyebiliriz- bilgisayarında çalışır. Yani ilk olarak ziyaretçi tarayıcı programının URL bölümüne bir web sayfasının adresini yazıp onay vererek bu sayfanın görüntülenmesi için istemde bulunur; web sunucusu da bu istemi kabul ederek dosyaların iletimine olanak tanıdıktan sonra sayfa, tüm içeriğiyle birlikte ziyaretçinin bilgisayarında belli bir tampon alana(cache) yüklenerek bu alandan çalıştırılır. İşte JavaScript kodları da web sayfasıyla beraber iletilen içerikler arasındadır.

Bu noktaya kadar edindiğimiz bilginin ışığında JavaScript kodlarının web sayfasından bağımsız çalışabilecek programlar olmadığını anladık. Peki JavaScript'i sayfamıza nasıl bağlayabiliriz? Aslında terminolojide bu işlemi tanımlamak için "bağlamak" yerine "gömmek" sözcüğünü tercih ediyoruz. Evet, JavaScript kodları web sayfasını oluşturan html kodlarının içine gömülür ve html kodları yorumlanırken işlerlik kazanır. Buna göre eğer ortada bir script uygulaması varsa html belgesi de olmak zorundadır. Bazı durumlarda tüm html belgesinin JavaScript ile oluşturulması da söz konusu olabilir; ileride bu konuya geniş olarak değineceğiz. Şimdi biraz html bilgilerimizi gözden geçirelim...

Tüm HTML içeriğinin "<html>" ve "</html>" etiketleri arasına alınarak işaretlendiğini biliyoruz. "<html>" etiketinden sonra gelen "<head>" bölümünde belge içeriğini tanıtmak amacıyla bir takım bilgiler verilir. "<body>" ve "</body>" etiketleri arasına yazdıklarımız ise sayfanın gövde kısmıdır; sayfada yer almasını istediğimiz yazı, grafik, ses gibi tüm öğeler bu kısımda belirtilir. Sadece bu etiketlerden oluşan temel HTML sayfasının kod dizilimi aşağıdakine benzeyecektir :

<html> <head> <title>HTML sayfası</title> </head> <body> </body> </html>

JavaScript kodları genel olarak "<head>..</head>" etiketleriyle sınırlandırılan bölüme eklenir. Ancak özel durumlarda belgenin gövde kısmına eklendiği de görülebilir. Biz gerçekleştireceğimiz ilk uygulamada birinci yöntemi kullanacağız. Öyleyse metin editörünü(Windows altında "Notepad", Linux'ta "Kate" önerilir) açıp bir çırpıda aşağıdaki kodları yazalım :

<html> <head> <title>HTML Sayfası</title> <script language="JavaScript">  </script> </head> <body> <form> <input type="button" value="Tıklayın" onClick="merhabaDunya();"> </form> </body> </html>

Dosyayı "merhaba_dunya.htm" adıyla kaydettikten sonra simgesine tıklayıp açalım. Açılan sayfadaki düğmeye tıklayınca ilk JavaScript kodumuzun(hatta fonksiyonumuzun) icra edilmesi sonucunda görüntülenen uyarı kutusu bizi selamlayacaktır. Peki bunu nasıl yaptık? Veya şöyle soralım : Salt html kodu yazarak bu uyarı kutusunun görüntülenmesini sağlabilir miydik? Tabiki hayır! O halde html içine gömdüğümüz JavaScript kodumuzu derinlemesine inceleyerek bazı gerçekleri su üstüne çıkaralım;

JavaScript kod bloğu "<script>...</script>" etiketleri arasına yazılır. Örnek kodda bulunan "<script language="JavaScript">" ifadesi script dilinin JavaScript olduğunu belirtiyor. Eğer belli bir JavaScript versiyonuna ait komutlar kullanılacaksa ilgili versiyon numarası belirtilmelidir. Örneğin "<script language="JavaScript1.2">" gibi.
JavaScript yorumlayıcısı olmayan eski tarayıcı versiyonlarında JavaScript kodlarının icra edilmemesi için, kod bloğu örneğimizdeki gibi "" işaretleri arasına alınır. Bu yolla eski tarayıcıların JavaScript kodlarını yorum-açıklama satırı olarak algılaması sağlanır. Yani kodlar ne icra edilir ne de düz-metin olarak tarayıcı ekranında gösterilir.
Eğer C ya da Visual Basic gibi programlama dilleriyle ilgilendiyseniz "fonksiyon" kullanımı hakkında da az çok bilgi sahibi olabilirsiniz. Fonksiyonlar belirli bir kaynak tarafından çağrılmadığı sürece icra edilmeyen program bölümleridir. Örneğimizde "merhabaDunya" adını verdiğimiz fonksiyonu gerektiği yerde çağrılması, yani icra edilmesi için bildiriyoruz(declaration). Burada fonksiyon kodlarının "{" ve "}" işaretleri arasına yazılması gerektiğini hemen belirtelim
Örnek JavaScript'imizde yer alan "alert()" komutu, uyarı kutuları görüntületmek amacıyla kullanılır. Bu örnekte komutumuz, "Merhaba Dünya!..." metni ile birlikte kullanılıyor; fonksiyon icra edildiğinde komut işlerlik kazanmakta.
Örnekte bol bol "//" işaretleri bulunduğunu farketmişsinizdir(sizden de hiçbir şey kaçmıyor :)) Bu işaretlerin arkasına yazılan metinler, içeriği ne olursa olsun kod olarak algılanmaz; kullanım amacı genellikle bir kod satırının ya da kod kümesinin ne işe yaradığını açıklamaktır. İyi kod yazarları gerektiği yerde açıklama ve yorum yazmaktan kaçınmazlar. Böylece kod bloklarının hem okunabilirliği hem de anlaşılabilirliği artar. Eğer yorum metni bir satırdan fazlaysa, örneğimizdeki gibi "/*" ve "*/" işaretleri arasına yazılmalıdır.
Örnek html kaynak kodumuzun gövde kısmında bir form öğesi bulunuyor. "<input type="button"..." ifadesiyle tanımladığımız düğmeyi JavaScript fonksiyonunu çağırmak amacıyla sayfaya ekledik. Fonksiyonu nasıl mı çağırıyoruz? "onClick" komutu bizim için bu işi gerçekleştiriyor. DOM(Document Object Model - Belge Nesne Modeli) referansları arasında tanımı yapılan bu komut(veya olay) bir nesneye tıklandığında belli bir işin yerine getirilmesi amacıyla kullanılıyor.

Buraya kadar herşey anlaşıldıysa su üstüne çıkardığımız gerçekleri kurulamanın zamanı geldi demektir(!) Yukarıdaki listede belirttiğimiz noktalar ışığında diyebiliriz ki; evet, JavaScript nesne-yönelimli(object-orianted) bir dildir. Çünkü JavaScript kodları html etiketleri kullanarak oluşturulan nesneleri kontrol eder ve nesnelere uygulanan olaylar sonucunda icra edilir. Örneğin "BODY" öğesi veya örneğimizde kullandığımız "INPUT" unsuru birer nesnedir. Aynı şeklide "alert()" komutuyla görüntülettiğimiz uyarı kutusu da bir nesnedir. Bu yüzden bilmeniz gereken en önemli nokta, JavaScript uygulamaları hazırlamaktaki amacın Web tarayıcısı programın bir/bir çok unsuruna-nesnesine müdahale etmek veya bir nesne oluşturmasını sağlamak olduğudur. Sözgelimi bazı web sitelerinde karşılaştığınız kaydırma çubuğu olmayan ve/veya belirli boyutlarda kendiliğinden açılan pencereler bu tanıma güzel bir örnek olabilir. Veya kursörü üzerine taşıyınca değişen grafikler, aşağı-yukarı kayan metinler, sayfayı ne kadar kaydırırsanız kaydırın konumu değişmeyen iletiler,vs,vs...

Şimdi, hazırsanız iyi haberi veriyorum : Siz de artık bir OOP(object-orianted program) kod geliştiricisi olabileceksiniz... Henüz bu konuyla yeni ilgilenmeye başlamışsanız ve bu yazıdaki bazı kavramları anlamakta zorluk çekiyorsanız, merak etmeyin, çünkü yazı dizimiz ilerledikçe bu kavramlar hakkındaki bilgilerinizi arttıracak, sağlamlaştıracağız. Bu defa size vereceğim kötü bir haber yok. Umarım iyi haberlerin sayısı gün geçtikçe artar.

Bir sonraki yazımızda, JavaScript kodlarını nasıl ayrı bir dosya olarak kaydedip html belgemize ekleyebileceğimizi görecek, DOM hakkında kısa bir ön bilgi edineceğiz. Genel programlama bilgisi de sayılabilecek olan yazım kurallarına değindikten sonra bazı temel bilgileri aktararak JavaScript dünyasındaki adımlarımızı hızlandıracağız. Artık Türkçe JavaScript referans dökümanlarımızı oluşturmaya başlayabiliriz. Unutmayın; eğer programlamayla yeni ilgilenmeye başladıysanız, bu büyülü evrenin küçük bir gezegeni olan JavaScript dünyasını keşfettikten sonra "olay ufku"nu daha net görebilirsiniz!