Javascript Nedir?

YAZAR :Emin Gökçe
ALANI :Php, Mysql

Javascript Nedir?

Java Sun firması tarafından Pascal ve Delphi dillerinden esinlenerek yazılmış bir programlama dilidir. Sonuçta tarayıcıdan bağımsız bir program elde edersiniz. Yani bir exe veya com uzantılı dosya vardır elinizde. Fakat JavaScript bu tür bir programlama dili değildir. Yorumlanması için bir tarayıcıya ihtiyaç duyar. Bu yüzden script dilidir. Html dosyasını içine gömülüdür. Sonuçta elinizde exe veya com uzantılı bir dosya yoktur. Javascript , Netscape firması tarafından C dilinden esinlenilerek yazılmıştır. Yazılma amacı Html'in sahip olmadığı bazı özelliklerin web sayfalarında kullanılmak istenmesidir. Yani ziyaretçi ile etkileşim gibi önemli unsurlar Html'de yok veya oldukça az kapasitede diyebiliriz. Netscape firması bu konuya ağırlık vererek JavaScript script dilini internet ortamına kazandırmıştır.

Netscape ve Internet Explorer tarayıcılarının JavaScript kodundaki bazı farklılar vardır. Netscape firması JavaScript dilini hazırladığında Microsoft firması bu dilin özelliklerini veya yazılım tarzını tam anlamıyla Internet Explorer'a eklemedi. Kendi yazım kurallarını belirledi. Bu yüzden biz JavaScript kodu yazarken bu iki tarayıcı özelliklerini de göz önünde bulundurmalıyız. Fakat bu her kodda karşımıza çıkmaz.

Javascript'in bazı genel özellikleri :

· · · · Javascript kodlarını yazmak için Windows kullanıcıları için NotePad, Macintos kullanıcıları için Simple Text yeterlidir.

· · · · JavaScript kodları etiketi ile biter.

· · · · Etiketi JavaScript’i anlamayan eski sürüm tarayıcıların bu kısmı geçmeleri içindir.

· · · · Genellikle yazım tarzı

şeklindedir.

O halde, ilk Javascript programımızı yazalım. Şu kodu yazıp, ornek01.html adıyla kaydedin:

<Html>
<Head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<Title>Javascrpit</TITLE>
</Head>
<Body>
<B>Gaziantep Üniversitesi</B><br>
<Form>
<Button onclick="alert('Gölbaşı M.Y.O.')">TIKLAYIN!</BUTTON>
</Form>
</Body>
</Html>

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

İşte sonuç:

Bütün Web sayfaları gibi, Javascript kodunuzun yer aldığı sayfa da tipik bir HTML kod kümesidir.

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

2. HTML kodu iki bölüm içerir: Başlık (Head) ve gövde (Body) bölümleri. Her bölümlerin nerede başladığı ve nerede bittiği açıkça belirtilir.

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

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

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 zorunluluğu vardır. Kural olarak, Javascript bölümü, HTML’in içine <SCRIPT>..</SCRIPT> etiketlerinin arasına gömülür. Bütün kuralları yerine getirilmiş bir Javascript bölümü ;

<Html>
<Head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<Title>Javascript ornek02</TITLE>
<Script Language=”Javascript1.2”>
</script>
</Head>
<Body>
<B>Gaziantep Üniversitesi GBMYO</B><br>
<Form>
<Button onclick=ornek02()>TIKLAYINI!</BUTTON>
</Form>
</Body>
</Html>

Bu metni ornek02.html 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 ornek03.js adıyla şu metni kaydedin:

Function merhaba()
{
alert("Javascript ile web sayfası Hazırlamaya Başlıyorum!")
}

Sonra, ornek02.html dosyasında şu değişikliği yapın ve ornek03.html adıyla kaydedin:

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Javascript!</TITLE>
<SCRIPT SRC="ornek03.js" LANGUAGE=”JavaScript”>
</SCRIPT>
</HEAD>
<BODY>
<B>Gaziantep Üniversitesi GBMYO</B><br>
<FORM>
<INPUT TYPE="SUBMIT" NAME="BUTTON1" VALUE="TIKLAYIN!" onclick="ornek03()">
</FORM>
</BODY>
</HTML>

Ve ornek03.html’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.

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.

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ği imiş gibi görüntülemesini önlemek için Script bölümlerini eski sürüm Browser’lardan, ornek02.html sayfasında yaptığınız gibi gizlemeniz gerekir. Ornek02.html’e bakarsanız:

şeklinde bir bölüm göreceksiniz. Bu bölümün başında ve sonunda yer alan “” 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. ornek2.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:

/* yorumun birinci satırı
yorumun ikinci satırı
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.

Düz yazı programınıza ve şu kodları girin:

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE> javascript Dünyası!</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">

</SCRIPT>
</HEAD>
<BODY>
<B>Gaziantep Üniversitesi</B><br>
</BODY>
<HTML>

Bu dosyayı da ornek04.htm adıyla kaydedin ve Browser’ınızda açın. Sayfanızın içeriğini oluşturan “javascript Dünyası!” 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:

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE> javascript Dünyası!</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">

</SCRIPT>
</HEAD>
<BODY onLoad="ornek()">
<B> Gaziantep Üniversitesi!</B><br>
</BODY>
<HTML>

ornek5.html 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. Ornek04’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 ornek05’te, Javascript komutunu bir fonksiyon olarak tanımlanmış ve bu fonksiyonun icrasını HTML’in BODY etiketinin içeriğinin Browser’ın penceresine yüklenmesine bağlanmıştır. Bu Javascript’in “onLoad” komutuyla gerçekleştirilmiştir. (onLoad’ın nasıl kullanıldığını ve nerelerde kullanıldığını daha sonra ayrıntılı olarak anlatımıştır.)

Buraya kadar gösterilen örnekler, Javascript kodlarının ne zaman ve nasıl işlediğini göstermek amacıyla verilmiştir. Fakat bu örneklerden çıkartacağınız başka bir sonuç daha var: Dikkat edilirse 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 oluyor.

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ç çıkarılmamalıdır. 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 edeceğiz. 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 etmemiz gereken iki kelime vardır. 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:

HTML sayfanızda şöyle bir bölüm var:

<FORM NAME=form01> WEB KİTAPÇISI
<INPUT TYPE=”checkbox” NAME=”roman”>Roman
<INPUT TYPE=”checkbox” NAME=”hikaye”>Hikaye
<INPUT TYPE=”checkbox” NAME=”biyografi”>Biyografi
<TEXTAREA NAME=”sonuc” ROWS=”6” COLS=”6”>Burada sonuç gösterilecek</TEXTAREA>
</FORM>

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ı

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.

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.