Javascriptte Olay Fonksiyonlar Events on Mouse Over on

  • Slides: 10
Download presentation
Javascriptte Olay Fonksiyonları (Events)

Javascriptte Olay Fonksiyonları (Events)

on. Mouse. Over, on. Mouse. Out • Javascript dünyasında en çok kullanılan iki “event”

on. Mouse. Over, on. Mouse. Out • Javascript dünyasında en çok kullanılan iki “event” varsa, birincisi Mouse işaretçisinin bir nesnenin üzerine gelmesi (“Mouse. Over” olayı), ikincisi ise Mouse isaretçisinin bir nesnenin üzerinden çekilmesi (“Mouse. Out” olayı) sayılabilir. • Bu iki olayı on. Mouse. Over ve on. Mouse. Out 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:

on. Mouse. Over, on. Mouse. Out Örneği <HTML> <SCRIPT LANGUAGE="Java. Script"> function faregelince() {

on. Mouse. Over, on. Mouse. Out Örneği <HTML> <SCRIPT LANGUAGE="Java. Script"> function faregelince() { window. status = "En guzel site icin burayi tiklayin!"; return true } function faregidince() { window. status = "En guzel siteye gitme firsatini kacirdiniz!" return true } </SCRIPT> </HEAD> <BODY> <A HREF="http: //pcworld. com. tr" NAME="bag" on. Mouse. Over="return faregelince()" on. Mouse. Out="return faregidince()">PC World-Türkiye</A> • </BODY> • </HTML> • • •

on. Focus, on. Blur • Bilgisayarda bir program açıkken, Mouse ile programın başlık çubuğunu

on. Focus, on. Blur • 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 on. Focus’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 on. Blur ile yönlendiririz.

 • <html> <head> <title>on. Focus, on. Blur</title <script language="Java. Script"> function dogru() {

• <html> <head> <title>on. Focus, on. Blur</title <script language="Java. Script"> function dogru() { document. form 1. mesaj. value="Lütfen hata yapmayın!" } function sor() { document. form 1. mesaj. value="isminiz alındı" } </script> </head> <body> <form name="form 1" method="post"> <p><h 3>Lütfen isminizi yazınız!</h 3></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="Java. Script"> • function goster() { document. isim.

• <HTML> <HEAD> • <SCRIPT LANGUAGE="Java. Script"> • function goster() { document. isim. Form. ad. value="Adiniz kayda gecmistir. " } • function uyar() { document. isim. Form. ad. value="Lutfen yanlislik yapmayiniz!" } • </SCRIPT> </HEAD> • <BODY> <BR> • <FORM NAME="isim. Form"> • <P>Lütfen adinizi yazin ve sayfa üzerinde baska bir yeri tiklayin: • <BR><INPUT TYPE="text" NAME="ad" VALUE="Adinizi buraya yaziniz" SIZE=25 on. Blur="goster()"> • <P>Simdi de asagidaki kutuya mesleginizi yazin: <BR><INPUT TYPE="text" NAME="meslek" VALUE="Mesleginizi buraya yaziniz" SIZE=25 on. Focus="uyar()"> • </FORM> • </BODY> </HTML>

on. Focus, on. Blur • Javascript, üstteki kutuya adınızı yazdıktan sonra başka bir yeri

on. Focus, on. Blur • 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 on. Blur’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

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 btn. Check. Form_onclick() { var my. Form = document.

<html> <head> <script type="text/javascript"> function btn. Check. Form_onclick() { var my. Form = document. form 1; if (my. Form. txt. Age. value == "" || my. Form. txt. Name. value == "") { alert("Please complete all the form"); if (my. Form. txt. Name. value == "") { my. Form. txt. Name. focus(); } else { my. Form. txt. Age. focus(); } } else { alert("Thanks for completing the form " + my. Form. txt. Name. value); } }

 function txt. Age_onblur() { var txt. Age = document. form 1. txt. Age;

function txt. Age_onblur() { var txt. Age = document. form 1. txt. Age; if (is. Na. N(txt. Age. value) == true) { alert("Please enter a valid age"); txt. Age. focus(); txt. Age. select(); } } function txt. Name_onchange() { window. status = "Hi " + document. form 1. txt. Name. value; } </script> </head> <body> <form action="" name="form 1"> Please enter the following details: <p> Name: <br /> <input type="text" name="txt. Name" onchange="txt. Name_onchange()" /> </p> <p> Age: <br /> <input type="text" name="txt. Age" onblur="txt. Age_onblur()" size="3" maxlength="3" /> </p> <p> <input type="button" value="Check Details" name="btn. Check. Form" onclick="btn. Check. Form_onclick()"> </p> </form> </body> </html>