JavaScript İle Tanışalım #Öğreniyorum
Javascript programı yazmak için ihtiyacınız olan alet-edavat, bu kitapçığın 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, bilgisayarınız mandalina, çilek veya şeftali renkli bir iMac ise SimpleText bu iş için biçilmiş kaftan sayılır. 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:
| ExampleHelloWorld.html Indir |
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Merhaba Dünya!</TITLE> </HEAD> <BODY> <B>Merhaba Dünya</B><br> <FORM> <BUTTON onclick="alert('Merhaba Dünya!')">TIKLAYINI!</BUTTON> </FORM> </BODY> </HTML>
Ş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:
- Browser programına kendisinin bir HTML dosyası olduğunu birinci satırda beyan ediyor; ve bittiği yer açıkça gösteriliyor.
- 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
- Gövde bölümünde bir Form unsuruna yer veriliyor; fakat bu formun tek ögesi var: Düğme (Button).
- 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.
- Ve ilk Javascript programınızda ne Javascript'in adı geçiyor; ne de HTML ile Javascript bölümlerini birbirinden ayırteden, <SCRIPT>..</SCRIPT> etiketine yer veriliyor!
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>..</SCRIPT> etiketlerinin arasına gömülür. İşte size bütün kuralları yerine getirilmiş bir Javascript bölümü yazma örneği
| ExampleHelloWorld2.html Indir |
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Merhaba Dünya!</TITLE> <SCRIPT LANGUAGE="Javascript1.2"> <!--Javascript kodunu eski sürüm Browserlardan gizleyelim function merhaba() //merhaba isimli fonksiyonu deklare ediyoruz { //bu, fonksiyonun başlama işareti alert ("Merhaba Dünya!") //fonksiyonun komutu ve komutun gerektirdiği metin } //bu fonksiyonun bitme işareti // kod gizlemenin sonu --> </HEAD> <BODY> <B>Merhaba Dünya</B><br> <FORM> <BUTTON onclick=merhaba()>TIKLAYINI!</BUTTON> </FORM> </BODY> <HTML>
Bir de şunu deneyin: önce merhaba.js adıyla şu metni kaydedin
| ExampleHelloWorldJS.html Indir |
function merhaba()
{
alert("Merhaba, Dünya!");
}
| ExampleHelloWorld3.html Indir |
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Merhaba Dünya!</TITLE> <SCRIPT SRC="merhaba.js" LANGUAGE="JavaScript"></SCRIPT> </HEAD> <BODY> <B>Merhaba Dünya</B><br> <FORM> <INPUT TYPE="SUBMIT" NAME="BUTTON1" VALUE="TIKLAYIN!" onclick="merhaba()"> </FORM> </BODY> </HTML>
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, Netscape ve IE'nin şu 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ği imiş 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:
<!-- Javascript kodunu eski sürüm Browserlardan gizleyelim
function merhaba()
{
alert ("Merhaba Dünya!")
}
// 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:
/* 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
Davranın düz yazı programınıza ve şu kodları girin:
| ExampleHelloWorld4.html Indir |
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Merhaba Dünya!</TITLE> <SCRIPT LANGUAGE="Javascript1.2"> <!-- alert("Merhaba Dünya!") // --> </SCRIPT> </HEAD> <BODY> <B>Merhaba Dünya</B><br> </BODY> <HTML>
Bu dosyada, küçük bir değişiklik yapalım ve kodlarımıza şu şekli verelim:
| ExampleHelloWorld5.html Indir |
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <TITLE>Merhaba Dünya!</TITLE> <SCRIPT LANGUAGE="Javascript1.2"> <!-- function merhaba() { alert("Merhaba Dünya!") } // --> </SCRIPT> </HEAD> <BODY onLoad="merhaba()"> <B>Merhaba Dünya</B><br> </BODY> <HTML>
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:
<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>
Şimdi bu HTML kodu sayfanızda şu Nesne'leri oluşturur:- Bir adet Form
- Dört adet "checkbox" türü INPUT alanı
- Bir adet metin alanı
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. Dolayısıyla, önce Javascript'in on-onbeş kelimesi ve yedi-sekiz işleminden ibaret temel kurallarını ele alacağız; sonra da bunlarla Belge Nesneleri'ne hangi olay halinde ne yapabileceğimizi ve bunu nasıl yapabileceğimizi göreceğiz.
%2B%C4%B0ndir-Download.jpg)
Reklam vermek için,
fahrimeral@outlook.com
adresinden ulaşabilirsiniz..
Hiç yorum yok:
Yorum Gönder