	Sign In Sign-Up

BİRSEY.COM

JAVASCRİPT

HTML__icon.gif (2655 bytes)

KONULAR

JAVA'YA GİRİŞ

TEMEL İLKELERİ

DEGİŞKENLER

İŞLEMLER (OPERATOR) 1

İŞLEMLER (OPERATOR) 2

PROG.AKİŞ DENETİMİ

FONKSİYON

FONSİYOLA HTML İLİŞKİSİ

NESNELER

OLAYLAR

DİNAMİK HTML İLE JAVASCRİPT

JAVA DERSİ MUSTAFA OZKAN

Olaylar

Ziyaretçiye sunulan bir web sayfasi üzerinde ziyaretçinin yaptigi her tür hareket bir baglantiyi tiklamasi, bir resmin üzerine gelmesi, resmin üzerinde ayrilmasi, bir formu yanlis doldurup hataya yol açmasi hep bir olaydir.

Simdi bu olaylari inceleyelim.

8.1 onClick

Web sayfasi üzerinde bir nesnenin mouse ile üzerine tiklanmasi sonucu onClick olayi gerçeklesir. Olayin gerçeklesmesi için mouse'un nesneyi tiklayip birakmasi gereklidir. Yani mouse tusuna basildiginda onClick olayi gerçeklesmis olmaz. onClick olayi tusa basilip birakildiktan sonra gerçeklesir. Baglantilar, resimler, form dügmeleri tiklanabilecek nesneler arasindadir.

OnClick yönlendiricisine bu durumda ne yapacagini Html etiketleri arasinda bildirmeniz gerekir. Simdi bunu bir örnekle açiklayalim.

<html>

<head>

<title>onClick</title>

<!--

function merhaba()

{alert ("beni tikladiniz"); }

-->

</script></head><body>

</body>

</html>

Burada yaptigimiz islem html etiketleri arasinda yer verdigimiz bir butona tiklama (onClick) ile ne yapacagini merhaba fonksiyonuna git diyoruz. Fonksiyonda ekrana bir uyari ile beni tikladiniz diye bir uyari mesaji geçiyor.

Simdi burada alert nesnesini de görmüs olduk. Alert nesnesi ziyaretçiye herhangi bir durumda uyari vermek amaciyla kullanilir. Görüldügü üzere parantez içerisinde çift tirnak içine uyari yazisi yazilir.

OnDblClick olayi da onClick olayi ile yapi olarak aynidir. onClick'ten farki nesneye çift tiklandiginda çalismasidir. Diger yöntemler onClick ile aynidir.

8.2 onMouseOver , onMouseOut

Bu tür nesne olaylari ingilizce adi (onMouseOver = mouse isaretçisi(imleç) üzerindeyken , onMouseOut = mouse isaretçisi üzerinden ayrildiginda) üzerinde olmakla birlikte mouse'un nesnenin üzerinde olup olmadigi ile ilgilenir.

Bir örnek ile açiklayalim:

<title>onMouseOver ve onMouseOut </title>

<!--

function uzerinde()

{window.status="Tiklayin ve birsey.com adresine gidin" }

function disinda()

{window.status="birsey.com baglantisina tiklayin" }

-->

</script></head><body>

<p>birsey.com </a></p>

</body>

</html>

onMouseOver ve onMouseOut metodu ile ilgili güzel bir örnek daha :

<title>OnMouseOver</title>

<!--

function altavista()

{document.web.mesaj.value="En unlu web motorlarindan biri" }

function altavistasil()

{ document.web.mesaj.value="" }

function yahoo()

{ document.web.mesaj.value="En unlulerden bir tane daha" }

function yahoosil()

{document.web.mesaj.value="" }

function hotbot()

{document.web.mesaj.value="Ve bir tanesi daha" }

function hotbotsil()

{document.web.mesaj.value="" }

-->

</script></head><body>

<p>Altavista</a><br>

<a href="www.yahoo.com" onMouseOver="yahoo()" onMouseOut="yahoosil()">Yahoo</a><br>

<a href="www.hotbot.com" onMouseOver="hotbot()" onMouseOut="hotbotsil()">Hotbot</a></p>

</form></body></html>

8.3 onSubmit

Web-de sörf yaparken çogunlukla karsimiza çikan formlar biz doldurduktan sonra sayfanin bagli bulundugu server (ana makine) ya gönderilir. Fakat biz bu onSubmit olayi ile form gönderilmeden önce formun düzgün doldurulup doldurulmadigini kontrol edebiliriz.

Bunu örnek bir kod ile açiklayalim. Html sayfamizda body etiketleri arasinda doldurulmasini istedigimiz bir form var ve ona iliskin kod baslangici ise söyle :

Bu satir ile formun gönderilmesiyle (onSubmit) dogrula fonksiyonunu çagiriyoruz.

dogrula fonksiyonu da su sekilde olabilir.(Bu fonksiyon head etiketleri arasinda olan script etiketleri arasinda olmalidir.)

function dogrula()
{ confirm ("Formu düzgün doldurduysaniz OK'i tiklayiniz'); }

Bu fonksiyonda kullandigimiz confirm nesnesi ile kullaniciya OK ve Cancel tuslari ile emin misin ? Gönderiyorum denilmektedir.

8.4 onReset

Bu olay ile web sayfanizda bulunan formdaki yazdiklarinizin tamamen silinir. Yani yazdiginizin yanlis oldugunu farkettiniz bu durumda Sil (Reset) tusunu tiklarsiniz ve size bos bir form gelir. Yalniz burada birseyi belirtmek isterim. Reset(Sil) tusuna tikladiktan sonra tarayicinin back(geri) dügmesini tikladiginizda formunuzda yazdiklariniz tekrar geri gelmez. Fakat siz onReset olayi ile bu durum için son bir ziyaretçiye seçenek sunabilirsiniz.

Bunun ile ilgili bir örnek yapalim :

<html>

<head>

<title>onReset</title>

<!--

function sil()

{ return confirm('Silmek istediginize emin misiniz?'); }

-->

</script>

</head>

<body>

</form>

</body>

</html>

8.6 onLoad , onUnLoad

Bu olaylar bize sayfanin yüklenmeye baslamasinda (onLoad) sayfadan ayrilincaya (onUnLoad) kadar olan yapilacak islemler için gereklidir. Bir Javascript fonksiyonun web sayfasi yüklenmeye basladiginda otomatik olarak çalismasini istiyorsak onLoad olayini kullaniriz. Eski DOS'çular bilirler Autoexec.bat dosyasi nasil makine açildiginda yapilmak istenenleri yapiyorsa onLoad olayinda da sayfa yüklenmeye basladiginda nelerin otomatik olarak baslatilacagini belirleyebiliriz. Mesela sayfa yüklenmeye basladiginda (onLoad) ziyaretçiye Web sitemiz hos geldiniz diyebiliriz. Sayfadan ayrildiginda (onUnLoad) ise Iyi sörfler diyebiliriz. Örnek kodlara geçmeden önce sunu belirtmekte yarar var. Bildiginiz üzere web sayfasi kod açisinda iki kisima ayrilir. Bunlar head ve body kismidir. Tarayici açisinda body kismi asil kisimdir. Head kisminda sayanin nasil görüntülenecegi gibi bölümler yer alir. Bu yüzden onLoad ve onUnload kismi body etiketleri arasinda yer alir.

Simdi de bunun için gerekli kodlara bir göz atalim

<title>onLoad onUnLoad</title>

<!--

function hosgeldiniz()

{

alert("Web Sitemize Hosgeldiniz")

}

function gulegule()

{

alert("Iyi sorfler..")

}

-->

</script></head>

</body></html>

8.7 onError onAbort

Ziyaretçi sayfayi herhangi bir neden yüzünden tam haliyle yükleyememis olabilir. Bu nedenler aktarim hizi veya tarayicinin Javascript kodunu tam manasiyla yorumlayamamis olmasidir. Iste bu durumda Error(hata) olusur. Html üzerinde olusan en sik error(hata) resim haritalarinin (image-map) tam anlamiyla yüklenmemesinden kaynaklanir. Çünkü bu durumda resim tam yüklenmemistir. Bu da ziyaretçinin resim üzerinde tiklayacagi yerlerin yorumlanmamasini dogurur.

Örnek :

Ziyaretçi resimlerin yüklenmesi çok uzun sürüp yüklemeyi stop(dur) tusu ile kestiyse bu durumda onAbort olayi gerçeklesir. Bunun sonucu olarak ziyaretçiye bir hata mesaji verebilirsiniz. Bu durum daha önce bahsettigimiz image-map ler içindir.

İLERİ