JavaScript Olaylar #11
OLAYLAR
Bir olayın oluşması, mevcut durumda bir değişikik olması anlamına gelir.Javascript açısından kullanıcının bir yere tıklaması, mousunu oynatması, sayfanın yüklenmesi, sayfadan çıkılması hep birer olay olarak yorumlanır. Olayların genel kullanımları:
<form name=isim olayAdı="ilgiliFonksiyon()">
şeklindedir. Bu kullanımı her olay için verilen örnekleri inceleyerek daha iyi anlayabilirsiniz. JavaScript'de olaylar ve adlarını aşağıda görmektesiniz.
onClick
Mouse'un tıklanması olayıdır. Tıklanabilecek, dolayısıyla onClick metodu'nun kullanılabileceği yerler submit, reset, buton, radio, checkbox ve link nesneleridir.
Aşağıdaki örnekte onClick ile bir text nesnesine yazı yazdıracağız.
Kod:
<html><head><title>onClick</title><****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type><script language="Javascript1.2"> <!--formNesnesi.value="Bu işi onClick ile yaptık!"function yazdir(formNesnesi) { } --> </script> </script> </head><input type="Button" value="Tıklayın" onClick="yazdir(********.form1.mesaj)"><body > <form name="form1" > <input type="text" name="mesaj" value="1"></html></form></body>
onMouseOver, onMouseOut
Mouse'un imleçinin bir nesne üzerinde olması onMouseOver, o nesne üzerinde olmaması onMouseOut olayı olarak adlandırılır.
Aşağıdaki örnekteki linkin üzerine gelince yeni bir pencere açılacak, açılan bu pencere mouse'u linkin üzerinden çekince kapanacak.
Kod:
<html><head><title>onMouseOver,onMouseOut</title><****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type><script language="Javascript1.2"> function ustunde() <!-- {yenipencere=window.open("oneri","oneriPenceresi","toolbar=0,width=200,height=200")yenipencere.********.writeln("<h3>Yeni sayfa!</h3>") } function disinda() { yenipencere.close() } --> </script> </head> <body></html><a href="#" onMouseover="ustunde()" onMouseout="disinda()"><b>Ustüme Gel!</b></a></body>
onLoad, onUnLoad
web sayfasının yüklenmesi onLoad, sayfadan çıkılması ise onUnLoad olayına karşılık gelir.
Aşağıdaki örnekte sayfa yüklenince bize browser'ımızın hangisi olduğunu söyleyecek, çıkarken ise bir uğurlama mesajı verecek
Kod:
<html><head><title>onLoad, onUnLoad</title><****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type><script language="Javascript1.2"> <!-- function hangiBrowser() {if(tur.substring(0,8)=="Netscape")var tur =navigator.appName+" "+navigator.appVersion alert("Netscape kullaniyorsunuz")alert("Ne tur browser kullandiginizi anlayamadik!")else if(tur.substring(0,9)=="Microsoft") alert("Explorer kullaniyosunuz!") else } function mesaj() { alert("Hoşçakalın!") }</html>--> </script> </head> <body onload="hangiBrowser()" onunload="mesaj()"></body>
onSubmit, onReset
Form'ların vazgeçilmez ögeleri olan submit butonuna basılması onSubmit, reset butonuna basılması onReset olayıyla tanımlanır.
Aşağıdaki örnek formu gönderirken ve silerken bizim onayımızı isteyecek.
Kod:
<html><head><title>onSubmit,onReset</title><****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type><script language="JavaScript1.2"> <!-- function dogruMu() {function sor()return confirm("Bilgilerin doğru olduğuna emin misiniz?") } { return confirm("Silmek istediğinize emin misiniz?") }<p><h3>Isim</h3></p>--> </script> </head> <body> <form name="form1" onsubmit="return dogruMu()" onReset="return sor()" method="post"><p><h3>telefon#</h3></p><input type="text" size="30" name="isim"> <p><h3>adres</h3></p> <input type="text" size="30" name="adres"> <input type="text" size="30" name="telefon"></html><p><input type="Submit" value="Gonder"> <input type="Reset" value="Sil"></p> </form></body>
onChange
Text veya textarea unsurlarına birşey yazılması ya da select unsurunda bir seçim yapılması onChange olayına karşılık gelir.
Aşağıda onChange ile yapılmış bir örnek görüyoruz.
Kod:
<html><head><title>onChange</title><****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type><script language="JavaScript1.2"> <!-- function yaz(secnesnesi){</script>return secnesnesi.options[secnesnesi.selectedIndex].value} --> </head> <body> <form name="form1"><option name="mesaj" value="program">mesaj2<select name="mesaj" size="3" onchange="alert(yaz(this.form.mesaj))"> <option name="mesaj" value="Bu">mesaj1</html><option name="mesaj" value="onChange komutu ile yapılmıştır">mesaj3 </select> </form></body>
onFocus, onBlur
Sayfanızdaki Text , Textarea veya Select unsurlarının üzerine tıklandığında onFocus olayı gerçekleşir. Bu durumda mouse'un başka bir yeri tıklaması da onBlur olayına karşılık gelir. Yani kullanıcı dikkatini bu üç unsurdan birine verdiği zaman browser'a bir iş yaptırabilriz; aynı şekilde kullanıcının dikkatinin başka yöne kayması halinde yapılacak başka bir iş tanımlayabiliriz.
Kod:
<html><head><title>onFocus,onBlur</title>< BR><****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type><script language="JavaScript1.2"> <!-- function dogru() { ********.form1.mesaj.value="Lütfen hata yapmayın!"<form name="form1" method="post">} function sor() { ********.form1.mesaj.value="isminiz alındı" } --> </script> </head> <body><input type="text" size="20" name="isim" onfocus="dogru()" onblur="sor()"><p><h3>Lütfen isminizi yazınız!</h3></p> <p><input type="text" name="mesaj"></p> </form> </body></html>
onAbort, onError
Ziyaretçinin browser'ı sayfanızın bir kısmını veya tamamını yükleyemez, ya da sayfanızın JavaScript veya HTML kodlarını yorumlayamazsa hata durumu oluşur, bu durumun adı JavaScript dilinde onError'dur. OnAbort olayı ise ziyaretçi sayfanız tamamen yüklenmeden stop tuşuna basarsa oluşur.
ALINTI THT
ALINTI THT
