Events

   Bugünün dersi Events yani olaylar hakkında. Eğer sitenizin epeyi bir interaktiv olmasını istiyorsanız kesinlikle Event'lere ihtiyacınız var. Events yani olayları Javascriptin bir kısımlarını tetikleyenler olarak görünüz. Eğer birisi faresini linklerin üzerinde gezdirirse, "onMouseOver" özelliği ateşlenmiş olur. Eğer linki tıklarsa, bu sefer önce "onMouseDown", sonra ise "onMouseUp" ve "onClick" ateşlenmiş olur. Derslerin en başındaki Javascript örneğini hatırlarsanız (Alert-box) orada "onMouseOver" yani "farenin üzerinden gezmesi" eventi karşılığında o fonksiyon ateşlenmiş oldu. "onMouse" diye başlayan event'ler bol biçimde değişik menü yapımında kullanılabilir. Düğmelerin renkleri, yada resimlerin değişmesi gibi efektler.

   Ve işte ilk örnek:
   Move your mouse here!

   <b onMouseOver="yey()">Move your mouse here!</b>

   Gördünüz mü? Bir kere fare üzerine geldiğinde ("onMouseOver") 'yey()' fonksiyonu çağrılıyor. "yey()" fonksiyonu ile daha önceden sayfanın üst kısmında Alert-Box açılması şeklinde tarif edilmişti. Event (olay) tetiklenince hemen Alert-boxda açılmış oldu. Çok yaygın bir örnekte, resim değişiklikleridir. Bugün çok basit bir tanesini göreceğiz. Aşağıdaki 2 resmi ve "onMouseOver" ile "onMouseOut" efektleri ile aşağıdaki 2 resimde uygulayacağız:

   İlk satırla başlayalım:

   <img src="image1.gif" name="image1">

   Resimin bir ismi olması çok önemlidir.

   Şimdi "onMouseOver" ile kodu genişletelim.

   <img src="image1.gif" name="image1" onMouseOver="document.image1.src='image2.gif'";>

   Olayı bir diyalog gibi hayal edini:

   - Git ismi "image1" olan resmi bul.
   - Tamam efendim,
   - Şimdi "image1"in "src"sini "image2.gif" ile değiştir,
   - Oda tamam efendim, görev bitmiştir.
   - Aferin, güzel iş!
   - Teşekkür ederim!.

   Sanırım anladınız. Şimdiye kadar ki ile sonuç:

   Şimdi diyeceksiniz ki, resmi nasıl eski haline getirebiliriz. Azıcık nefes alın yahu, nefesinizi tutmuş buraya bakıyorsunuz. Gidin iki tane kahve kapında gelin bakalım.

   Kahvenizi aldıysanız devam edelim, şimdi artık ikinci event olan "onMouseOut" kullanma zamanı geldi. (yani fare resmi terkedince orijinal haline dönme işlemi). Şimdi yukardaki koda gerekli ilaveyi yapalım:

   <img src="image1.gif" name="image1" onMouseOver="documents.image1.src='image2.gif'"; onMouseOut="document.image1.src='image1.gif'";>

   Sanırım deminki diyalog gibi bir senaryo yazmamıza gerek yok, siz manzarayı çakmışsınızdır artık. Olan bir önceki efektin tam tersidir.

   Event (olaylar) dersi için bukadar yeter sanırım. Bu gün bir resmin kaynağının nasıl değiştirildiğini öğrendiniz. Dersin özetini çıkarmadan önemli noktaları belirtmek istiyorum.

• Nesnelere kesinlikle aynı isimi vermeyin. Aynı isimli 2 resmin javascriptin çalışmasına bir zararı olmaz (hata mesajı vermez) sadece bir tanesini belirtmemiş olursunuz. Eğer moseover effekti isterseniz, bu sefer ikisi birden değişir :-))

• Yukardaki örnekte 'image1.gif' etrafında tek tırnak, geri kalan heryerde "" vardı. Eğer "" içinde tekrar tırnak gerekirse, içerde ' kullanmanız gerekir. Şöyle: " ' Örnek ' " veya ' " Örnek " ' olabilir.ama kesinlikle " ' Örnek " ' veya " " Örnek " " olmamalı. Tamammı?