PAYLAÞIMEVÝ

sahinaltintop · Moderatör Kayýt: 17 May 2005 Mesajlar: 58 Konum: Ýstabul

Bir önceki bölümde JavaScript ile HTML arasýndaki iliþkiye deðinmiþ, JavaScript'in neden nesne-yönelimli bir kodlama dili olduðuna açýklýk getirmiþtik. Bu yazýmýzda ise JavaScript kodlarýný HTML etiketleri içine yazmadan nasýl ayrý bir dosya olarak kaydeceðimizi göreceðiz. Tabi yazýmýz bu konuyla sýnýrlý deðil; iyi bir kod yazarý, yani programcý olmak için bilinmesi gereken bazý temel yazým kurallarýnýn neler olduðunu da yine bu yazýda öðreneceðiz. Ayrýca yeri geldikçe DOM ile ilgili küçük ama yararlý bilgileri paylaþmayý sürdürüyoruz. Hazýrsanýz yazýmýza bir soruyla baþlayalým :

JavaScript kodlarýný HTML içine yazmak zorunda mýyýz?
"JavaScript kodlarý HTML içine gömülür" ifadesi, "bütün kodlar, HTML belgesinin içine yazýlmalýdýr" anlamýna gelmediði için sriptlerimizi ayrý düz yazý dosyalarý olarak kaydedip HTML'ye dýþardan ekleme olanaðýna da sahibiz. Peki bu yöntem bize ne kazandýrýr? Örneðin kodlarýnýza belge kaynaðýndan ulaþýlmasýný istemiyor olabilirsiniz; belki de script bloklarýyla html etiketlerinin içiçe olmasý hoþunuza gitmiyordur... Buna benzer durumlarda JavaScript kodlarýný ayrý dosyalara kaydedip HTML'ye eklemek iþinizi kolaylaþtýrabilir. Þimdi örneðimizi inceleyelim :

Aþaðýdaki kodlarý favori metin editörünüzde (örneðin Not Defteri) yazýp kaydedin.

/* merhaba_dunya.js dosyasý */

// Bu fonksiyon çaðrýldýðýnda bir uyarý kutusu görüntülenir.

function merhabaDunya(){

alert("Merhaba Dünya! Biz dostuz...");

}

Örnek kodun ilk satýrýnda yer alan açýklama, dosya adýnýn "merhaba_dunya.js" olduðunu belirtiyor. "JS" uzantýsýyla ilk defa karþýlaþýyor olabilirsiniz; bu uzantý, içinde sadece JavaScript kodlarý bulunan dosyalarý belirtmek için kullanýlýr. Dosyanýn uzantýsýný "js" olarak deðiþtirdiðinizde simgesinin de deðiþtiðini farkedeceksiniz. Windows altýnda bu simgeye sað týklayýp "Edit(Düzenle)" komutunu vererek, dosyayý Notepad(Not Defteri) programýyla açabilirsiniz. Artýk JavaScript dosyamýzý HTML'ye ekleyebiliriz. Aþaðýdaki kodlarý yazalým :

<!
merhaba_dunya.htm dosyasý

Bu HTML sayfasý, ayrý bir script dosyasýnýn içindeki
"merhabaDunya()" fonksiyonunu çaðýrmaktadýr.
>

<html>
<head>
<title>JavaScript Dosyasýný HTML'ye Eklemek</title>
<script language="JavaScript" src="merhaba_dunya.js">
</script>
</head>

<body onLoad="merhabaDunya()">

<p>Merhaba, merhaba...</p>

</body>
</html>

Ýlk bakýþta farkedebileceðiniz gibi "merhaba_dunya.js" adýyla kaydettiðimiz script dosyamýzý "source", yani "kaynak" anlamýndaki "src" ifadesiyle çaðýrýyoruz. Belirtilen kaynaktan çaðrýlýp html belgesine eklenen script kodlarýmýz "<script>...</script>" etiketlerinin arasýndaymýþcasýna icra edilir. Örnek kodumuzdaki ikinci önemli nokta, "onClick" yerine "onLoad" olayýnýn kullanýlmýþ olmasýdýr. Hatýrlayacaðýnýz gibi "onClick" JavaScript kodlarýnýn belirli bir nesneye týklandýðýnda çalýþtýrýlmasýný saðlýyordu. "onLoad" ise kodlarýn nesne yüklendiðinde icra edilmesini olanaklý kýlmaktadýr. Burada olayýmýz "body" nesnesini -ki bu nesne html gövdesinde yer alan tüm nesneleri de kapsamaktadýr ayný zamanda- yönlendirerek sayfa içeriði yüklendikten sonra fonksiyonu çaðýrýr. Hazýr "onLoad" olayýndan da bahsetmiþken daha sonra ayrýntýlý bir þekilde ele alacaðýmýz DOM hakkýnda bir iki açýklama daha yapmamýz gerekiyor :

Bildiðiniz gibi DOM, "Belge Nesne Modeli(Document Object Model)" anlamýna gelmekteydi. DOM, tarayýcý programý ve program penceresinde görüntülenen tüm nesneler ile ilgili olaylarý(event) ve metodlarý(method) belirten bir kurallar topluluðudur. JavaScript kodlarý bu kurallara göre iþlerlik kazanýr. Burada olay(event) olarak tanýmladýðýmýz þey, herhangi bir iþ, herhangi bir eylemdir. Sözgelimi ziyaretçinin, sayfa üzerindeki bir butona týklamasý, yeni bir tarayýcý penceresinin açýlmasý veya sayfa üzerinde yer alan bir nesnenin yüklenmesi DOM tarafýndan birer olay olarak kabul görür. Metod(method) ise, bu olaylarý ve/veya nesnelerin özelliklerini(property) kullanarak tarayýcý programýnýn veya tarayýcý penceresinde görüntülenen unsurlarýn durumlarýný deðiþtirmek için baþvurulan yöntemlerin genel adýdýr.

Ýþte þimdiye kadarki örneklerimizde kullandýðýmýz "onLoad" ve "onClick" ifadeleri DOM içinde tanýmlý olan olaylardan ikisidir. Olaylarý tanýmlarken kullandýðýmýz sözcüklerin anlamýný bilmek konunun daha iyi kavranmasýna yardýmcý olacaktýr : Ýngilizce bir sözcük olan "Load", "yükleme" anlamýndadýr ve "on" takýsýyla beraber kullanýldýðýnda, "yüklendiðinde" ifadesine karþýlýk gelir. Ayný þekilde "onClick" ise "týklandýðýnda" ifadesinin karþýlýðýdýr. Örneklerde, "Button" nesnesine týklandýðýnda veya "Body" nesnesi yüklendiðinde bizim gösterdiðimiz metodlar uygulanarak fonksiyonumuz icra edilmiþ ve bir mesaj kutusu görüntülenmiþtir. Bu mesaj kutusunun da bir nesne olduðunu unutmayalým... Aþaðýdaki örneði inceleyin ve anlamaya çalýþýn; bu örnekte karþýmýza çýkan yeni olaylara ve metodlara ileride deðineceðiz.

// merhaba_dunya.js dosyasý

/* "solTiklandiginda, uzerinGeldiginde ve
sagTiklandiginda" fonksiyonlarý "merhabaDunya"
adýndaki fonksiyonu çaðýrmaktadýr. */

function merhabaDunya(){
alert("Merhaba Dünya! Biz dostuz...");
}

function solTiklandiginda(){
merhabaDunya(); // fonksiyon çaðrýlýyor
}

function uzerineGelindiginde(){
merhabaDunya(); // fonksiyon çaðrýlýyor
}

function sagTiklandiginda(){
merhabaDunya(); // fonksiyon çaðrýlýyor
}

<!
merhaba_dunya.htm dosyasý

Bu HTML sayfasý, ayrý bir script dosyasýnýn içindeki
fonksiyonlarý çaðýrmaktadýr.
>

<html>
<head>
<title>JavaScript Dosyasýný HTML'ye Eklemek</title>
<script language="JavaScript" src="merhaba_dunya.js">
</script>
</head>

<body onLoad="merhabaDunya()">

<p
onMouseDown="alert('Merhaba Dünya! Biz dostuz...');">
Merhaba, merhaba...</p>

<form>

<b>"merhabaDunya" Fonksiyonu</b><br>

<input type="button" value="Sol Týklayýn"
onClick="merhabaDunya();">
<input type="button" value="Üzerime Gelin"
onMouseOver="merhabaDunya();">
<input type="button" value="Sað Týklayýn"
onContextMenu="merhabaDunya();">

</form>

<form>

<b>Diðer Fonksiyonlar</b><br>

<input type="button" value="Sol Týklayýn"
onClick="solTiklandiginda();">
<input type="button" value="Üzerime Gelin"
onMouseOver="uzerineGelindiginde();">
<input type="button" value="Sað Týklayýn"
onContextMenu="sagTiklandiginda();">

</form>

<p>

</body>
</html>
_________________
Sen Ne kadar bilirsen bil karþýndakinin anlayacaðý bildiði kadardýr.