JAVASCRIPT
Events
Bugünün dersi Events yani olaylar hakkinda. Eger sitenizin epeyi bir interaktiv olmasini istiyorsaniz kesinlikle Event'lere ihtiyaciniz var. Events yani olaylari Javascriptin bir kisimlarini tetikleyenler olarak görünüz. Eger birisi faresini linklerin üzerinde gezdirirse, "onMouseOver" özelligi ateslenmis olur. Eger linki tiklarsa, bu sefer önce "onMouseDown", sonra ise "onMouseUp" ve "onClick" ateslenmis olur. Derslerin en basindaki Javascript örnegini hatirlarsaniz (Alert-box) orada "onMouseOver" yani "farenin üzerinden gezmesi" eventi karsiliginda o fonksiyon ateslenmis oldu. "onMouse" diye baslayan event'ler bol biçimde degisik menü yapiminda kullanilabilir. Dügmelerin renkleri, yada resimlerin degismesi gibi efektler.
Ve iste ilk örnek:
Move your mouse here!
<b onMouseOver="yey()">Move your mouse here!</b>
Gördünüz mü? Bir kere fare üzerine geldiginde ("onMouseOver") 'yey()' fonksiyonu çagriliyor. "yey()" fonksiyonu ile daha önceden sayfanin üst kisminda Alert-Box açilmasi seklinde tarif edilmisti. Event (olay) tetiklenince hemen Alert-boxda açilmis oldu. Çok yaygin bir örnekte, resim degisiklikleridir. Bugün çok basit bir tanesini görecegiz. Asagidaki 2 resmi ve "onMouseOver" ile "onMouseOut" efektleri ile asagidaki 2 resimde uygulayacagiz:
Ilk satirla baslayalim:
<img src="image1.gif" name="image1">
Resimin bir ismi olmasi çok önemlidir.
Simdi "onMouseOver" ile kodu genisletelim.
<img src="image1.gif" name="image1" onMouseOver="document.image1.src='image2.gif'"; >
Olayi bir diyalog gibi hayal edini:
- Git ismi "image1" olan resmi bul.
- Tamam efendim,
- Simdi "image1"in "src"sini "image2.gif" ile degistir,
- Oda tamam efendim, görev bitmistir.
- Aferin, güzel is!
- Tesekkür ederim!.
Sanirim anladiniz. Simdiye kadar ki ile sonuç:
Simdi diyeceksiniz ki, resmi nasil eski haline getirebiliriz. Azicik nefes alin yahu, nefesinizi tutmus buraya bakiyorsunuz. Gidin iki tane kahve kapinda gelin bakalim.
Kahvenizi aldiysaniz devam edelim, simdi artik ikinci event olan "onMouseOut" kullanma zamani geldi. (yani fare resmi terkedince orijinal haline dönme islemi). Simdi yukardaki koda gerekli ilaveyi yapalim:
<img src="image1.gif" name="image1" onMouseOver="documents.image1.src='image2.gif'"; onMouseOut="document.image1.src='image1.gif'"; >
Sanirim deminki diyalog gibi bir senaryo yazmamiza gerek yok, siz manzarayi çakmissinizdir artik. Olan bir önceki efektin tam tersidir.
Event (olaylar) dersi için bukadar yeter sanirim. Bu gün bir resmin kaynaginin nasil degistirildigini ögrendiniz. Dersin özetini çikarmadan önemli noktalari belirtmek istiyorum.
- Nesnelere kesinlikle ayni isimi vermeyin. Ayni isimli 2 resmin javascriptin çalismasina bir zarari olmaz (hata mesaji vermez) sadece bir tanesini belirtmemis olursunuz. Eger moseover effekti isterseniz, bu sefer ikisi birden degisir :-))
- Yukardaki örnekte 'image1.gif' etrafinda tek tirnak, geri kalan heryerde "" vardi. Eger "" içinde tekrar tirnak gerekirse, içerde ' kullanmaniz gerekir. Söyle: " ' Örnek ' " veya ' " Örnek " ' olabilir.ama kesinlikle " ' Örnek " ' veya " " Örnek " " olmamali. Tamammi?
Umarim,
- ... Olaylar fonksiyonlari tetikler
- ... Olaylar statementleri tetikler
- ... böylece resim kaynagi (src) degisir
- ... Javascripti dikkatli kullanip, hatalardan kaçinmayi
Ögrendiniz.
|
EgLeNCe