Javascriptte Olay Fonksiyonları (Events)
onMouseOver, onMouseOut Javascript dünyasında en çok kullanılan iki “event” varsa, birincisi Mouse işaretçisinin bir nesnenin üzerine gelmesi (“MouseOver” olayı), ikincisi ise Mouse isaretçisinin bir nesnenin üzerinden çekilmesi (“MouseOut” olayı) sayılabilir. Bu iki olayı onMouseOver ve onMouseOut yönlendiricileri ile karşılayabiliriz. Gerçekte bu iki olayla, Mouse isaretçisi bir bağlantı satırı veya grafiğinin ve bir grafik haritasının (Map, Area) üzerine geldiği veya üzerinden çekildiği zaman ilgilenebiliriz; çünkü diğer HTML unsurları ve Javascript nesneleri ile Mouse isaretçisinin işaretleme ilişkisi yoktur. Bu olayı ve yönlendirilmesini, şu küçük programda görebiliriz:
onMouseOver, onMouseOut Örneği <HTML> <SCRIPT LANGUAGE="JavaScript"> function faregelince() { window.status = "En guzel site icin burayi tiklayin!"; return true } function faregidince() { window.status = "En guzel siteye gitme firsatini kacirdiniz!" </SCRIPT> </HEAD> <BODY> <A HREF="http://pcworld.com.tr" NAME="bag" onMouseOver="return faregelince()" onMouseOut="return faregidince()">PC World-Türkiye</A> </BODY> </HTML>
onFocus, onBlur Bilgisayarda bir program açıkken, Mouse ile programın başlık çubuğunu tıklayın; çubuğun renginden işletim sisteminin dikkatinin bu programın penceresinde yoğunlaştığını göreceksiniz. Bir de masaüstünde boş bir yeri tıklayın; bu pencere sistemin odak noktası olmaktan çıkacaktır. HTML sayfasında da Browser’in Focus’unu (dikkat odağını) üzerinde topladığı veya odağın çekildiği üç nesne olabilir: Text (Metin) , Textarea( Metinalanı) ve Select(Seç) etiketleri. Çünkü ziyaretçinin sadece bu etiketlerin oluşturduğu nesnelere klavyenin dikkatini çekme hakkı vardır. Bu nesnelerden biri tıklanınca Browser’in focus’u bu nesneye dönmüş, yani “focus” olayı olmuş demektir; bu durumda, biz de bu olayı yönlendiren onFocus’u kullanabiliriz . Aynı mantıkla, ziyaretçi Browser’in focus’unu bu nesneden baska bir yere çektiği zaman bu nesne focus’u kaybeder, “blur” (netlikten çıkma, flulaşma) olayı olur. Bunu da onBlur ile yönlendiririz.
<html> <head> <title>onFocus,onBlur</title <script language="JavaScript"> function dogru() { document.form1.mesaj.value="Lütfen hata yapmayın!" } function sor() { document.form1.mesaj.value="isminiz alındı" } </script> </head> <body> <form name="form1" method="post"> <p><h3>Lütfen isminizi yazınız!</h3></p> <input type="text" size="20" name="isim" onfocus="dogru()" onblur="sor()"> <p><input type="text" name="mesaj"></p> </form> </body> </html>
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function goster() { document.isimForm.ad.value="Adiniz kayda gecmistir." } function uyar() { document.isimForm.ad.value="Lutfen yanlislik yapmayiniz!" } </SCRIPT> </HEAD> <BODY> <BR> <FORM NAME="isimForm"> <P>Lütfen adinizi yazin ve sayfa üzerinde baska bir yeri tiklayin: <BR><INPUT TYPE="text" NAME="ad" VALUE="Adinizi buraya yaziniz" SIZE=25 onBlur="goster()"> <P>Simdi de asagidaki kutuya mesleginizi yazin: <BR><INPUT TYPE="text" NAME="meslek" VALUE="Mesleginizi buraya yaziniz" SIZE=25 onFocus="uyar()"> </FORM> </BODY> </HTML>
onFocus, onBlur Javascript, üstteki kutuya adınızı yazdıktan sonra başka bir yeri tıkladığınızda olan iş, “ad” isimli metin kutusunun “blur” olayına onBlur’un çağırdığı goster() fonksiyonu ile; alttaki kutuyu mesleğinizi yazmak üzere tıkladığınız anda “meslek” kutusunda olan “focus” olayına da uyar() fonksiyonu ile karşılık veriyor .
Formun unsurları Şimdi bir form içeren sayfa örneği yapalım; Javascript ile formun tamamen doldurulmuş olup olmadığını sınayalım. Böylece ziyaretçinin göndereceği formun eksik olduğunu anlamakta geç kalmamış oluruz . Aşağıdaki kodu kaydedip, Browser’da bir yerini eksik olarak doldurup formu göndermeyi deneyin.
<html> <head> <script type="text/javascript"> function btnCheckForm_onclick() { var myForm = document.form1; if (myForm.txtAge.value == "" || myForm.txtName.value == "") alert("Please complete all the form"); if (myForm.txtName.value == "") myForm.txtName.focus(); } else myForm.txtAge.focus(); alert("Thanks for completing the form " + myForm.txtName.value);
function txtAge_onblur() { var txtAge = document. form1 function txtAge_onblur() { var txtAge = document.form1.txtAge; if (isNaN(txtAge.value) == true) alert("Please enter a valid age"); txtAge.focus(); txtAge.select(); } function txtName_onchange() window.status = "Hi " + document.form1.txtName.value; </script> </head> <body> <form action="" name="form1"> Please enter the following details: <p> Name: <br /> <input type="text" name="txtName" onchange="txtName_onchange()" /> </p> <p> Age: <br /> <input type="text" name="txtAge" onblur="txtAge_onblur()" size="3" maxlength="3" /> </p> <p> <input type="button" value="Check Details" name="btnCheckForm" onclick="btnCheckForm_onclick()"> </form> </body> </html>