Olay Yöneticileri (Event Handlers)
Olay Yöneticileri (Event Handlers)
JavaScript event-driven (olay tarafından yönlendirilen) türde programlamaya olanak sağlayan bir dildir. Olay yöneticisi bir olay meydana geldiği zaman bir işlemler grubunu harekete geçirebilen bir nesnedir.
Aşağıdaki tabloda JavaScript olayları ve işlevleri verilmektedir:
| Olay Yöneticisi | Gerçekleştirdiği İş |
| onBlur | Bir parola kutusu, metin alanı ya da metin kutusu ilgi odağı olmaktan çıkınca bir eylem grubunu harekete geçirir. |
| onChange | Bir metin kutusu metin alanı ya da seçim listesindeki bir metin değiştiği zaman ya da kontrol nesnesi odaktan çıkınca bir eylem grubunu harekete geçirir. |
| onClick | Bir form düğmesi ya da hipermetin linki tıklanınca bir eylem grubunu harekete geçirir. |
| onFocus | Bir metin kutusu metin bölgesi ya da seçme listesi ilgi odağı olunca bir eylem grubunu harekete geçirir. |
| onLoad | Bir document nesnesi tam olarak yüklenince bir eylem grubunu harekete geçirir. |
| onMouseMove | Fare hareket edince bir eylem grubunu harekete geçirir. |
| onMouseOver | Fare bir hipermetin linkinin üzerinden geçince bir eylem grubunu harekete geçirir. |
| onSelect | Bir metin kutusu (text box) ya da metin bölgesi (text area) içindeki metin seçilince bir eylem grubunu harekete geçirir. |
| onSubmit | Bir form bir sunucuya sunulunca bir eylem grubunu harekete geçirir. |
| onUnload | Bir document nesnesi yüklenmemişse bir eylem grubunu harekete geçirir. |
Olayların Kullanımı
Olay tarafından yönlendirilen (event driven) türde programlamaya olanak sağlayan JavaScript dilinde bir olayın program içinde nasıl kullanılacağı ile ilişkili basit bir örnek vermek istiyoruz.
onClick olayı
1) Aşağıdaki JavaScript kodunu oluşturunuz ve çağırınız:
<html>
<head><title>events.htm</title></head>
<body >
<FONT FACE="Comic Sans MS">
<h2>JavaScript OLAY(EVENT) KAVRAMI</h2>
<a href=""
onClick="alert('onClick \nOlayi \n uygulamasi'); return false;">
BURAYI TIKLAYINIZ</a>.
</FONT>
</body>
</html>
2) BURAYI TIKLAYINIZ bağlantısının üzerine fare imleçini götürüp farenin sol tuşuna basarsanız bu durumda onClick olayı meydana gelmiş olacaktır.
Kod içinde onClick olayı meydana geldiği takdirde alert metodunun devreye girmesini söyleyen aşağıdaki parça mevcuttur:
onClick="alert('onClick \nOlayi \n uygulamasi');
Böylece alert metodu devreye girecek ve sayfa üzerinde mesaj görünecektir. Kod içindeki return false ifadesiyse link ile başka bir sayfaya geçiş istenmediği için konulmuştur.
Örnek: OnClick olayı
<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
function goster() {
var m = ""
if (document.ReaderInfo.cins[0].checked) {
m = 'KADIN'
}
if (document.ReaderInfo.cins[1].checked) {
m = 'ERKEK'
}
alert ("SEÇİLEN CİNSİYET: "+m)
}
</SCRIPT>
</HEAD>
<BODY bgColor="lightblue" fgColor="red">
<FONT FACE="Comic Sans MS">
<H3>CİNSİYETİ SEÇİNİZ...</H3>
<FORM name = "ReaderInfo">
<INPUT TYPE="RADIO" NAME="cins" VALUE="KADIN">KADIN<BR>
<INPUT TYPE="RADIO" NAME="cins" VALUE="ERKEK">ERKEK<BR><P>
<INPUT type="button" value="TIKLA" onClick="goster()">
</FORM>
</FONT>
</BODY>
</HTML>
Yukarıdaki sayfa gelince fare imleciyle KADIN seçeneğini işaretleyip TIKLA düğmesine tıklarsanız, seçilen cinsiyeti doğrulayan bir mesaj görünecektir.
OnClick Olayı ve Confirm Diyalog Kutusu
Confirm (onay) diyalog kutusu ile onclick olayı birlikte kullanılabilir.
Aşağıdaki HTML/JavaScript kodu bu konuda bir fikir vermektedir:
<HTML>
<HEAD>
<TITLE>confirm diyalog kutusu</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- JS-uyumsuz tarayıcılardan gizleme
function kontrol(){
// Onay kutusundaki stringe ilk değer ataması
str="Geleceği Yazanlar Web sayfasına erişmek istiyor musunuz ?";
/* Kullanıcı OK düğmesini tıklarsa if deyimi koşulu true olacaktır
ve belirlenen hedefe gidilecektir.
Aşağıdaki ifade yerine,
if (confirm(str)==true) ifadesi ya da
if (confirm(str)==1) ifadesi de kullanılabilirdi.
*/
if (confirm(str)){
// Aktif sayfanın URL'ini değiştirir.
location.href="http://www.gelecegiyazanlar.org";
} // end if
} // end function
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="pink">
<FONT FACE="Comic Sans MS" >
<CENTER>
<P><B>ONAY(confirm) DİYALOG KUTUSU ÖRNEĞİ</B>
<P>
<FORM>
<INPUT TYPE="button" VALUE=" GELECEĞİ YAZANLAR ANA SAYFASI" onClick="kontrol()">
</FORM>
</FONT>
</BODY>
</HTML>
Açılan pencerede Tamam düğmesine tıkladığınız takdirde aşağıdaki gibi Geleceği Yazanlar web sayfasına eriştiğinizi göreceksiniz.
onMouseOver Olayı
onMouseOver olayı için güzel bir örneğimiz var, dikkatle inceleyelim:
<html>
<head><title>JavaScript OLAYLARI(EVENTS)</title></head>
<body>
<FONT FACE="Comic Sans MS" >
<h2>JavaScript OLAYLARI(EVENTS)</h2>
<a href=""
onMouseOver="alert('BU ORNEK \n onMouseOver\n OLAYINI GOSTERIYOR'); return false;">
MOUSE GOSTERGESINI BURAYA KONUMLANDIRINIZ</a>
</FONT>
</body>
</html>
onFocus Olayı
Focus, imlecin o esnada bulunduğu yerdeki nesne anlamındadır. Fare göstergesi bir metin kutusu ya da metin alanı üzerine getirilip tıklanırsa onFocus olayı meydana gelir.
Örnek bir OnFocus olayını birlikte inceleyelim:
<HTML>
<BODY bgColor="lightblue" fgColor="red">
<FONT FACE="Comic Sans MS">
<H3>FOCUS UYGULAMASI</H3>
<FORM>
<INPUT TYPE=TEXT SIZE=20 onFocus="document.write('FOCUS BURADA');return true">
</FORM>
</FONT>
</BODY>
</HTML>
Yukarıdaki kod çalıştırılınca gelen sayfada fareyi metin kutusu içine götürüp tıklayınca onFocus olayı meydana gelecek ve ekranda "FOCUS BURADA" ifadesi görünecektir.
OnBlur Olayı
OnBlur olayı OnFocus olayının tersidir. Bir başka deyişle, odak kaybedilince meydana gelir.
OnChange Olayı
Bir metin kutusu, metin alanı ya da seçim listesindeki bir metin değiştiği zaman ya da kontrol nesnesi odaktan çıkınca bir eylem grubunu harekete geçirir.
Aşağıdaki örnekte bir seçim listesinde bir seçenek seçilince onChange olayı meydana gelmekte ve kullanıcının seçtiği arama motoru sayfaya gelmektedir:
<HTML>
<BODY bgColor="lightblue" fgColor="red">
<FONT FACE="Comic Sans MS">
<H3>ARAMA</H3>
<SCRIPT>
function sec(s) {
return s.options[s.selectedIndex].value
}
</SCRIPT>
<FORM>
<SELECT NAME="list" SIZE=1 OnChange="location=sec(this)">
<OPTION value="#"> BİR ARAMA MOTORU SEÇİNİZ
<OPTION value="http://www.google.com"> Google
<OPTION value="http://www.yahoo.com"> Yahoo
<OPTION value="http://www.yandex.com"> Yandex
</SELECT>
</FORM>
</FONT>
</BODY>
</HTML>
OnSubmit Olay Yöneticisi
Submit olayı Submit düğmesiyle form üzerindeki bilgiler sunulduğu zaman meydana gelir. OnSubmit olay yöneticisi bu olay meydana gelince bir fonksiyonu tetikleyecektir.
Aşağıdaki örneği dikkatle incerleyelim:
<HTML>
<HEAD>
</HEAD>
<SCRIPT>
var veri=false
function verikont (){
if (document.form1.kar.value.length == 5) {
return true}
else {
alert("TAM OLARAK 5 KARAKTER GİRİNİZ " + document.form1.kar.value +
" KARAKTER GEÇERLİ DEĞİL")
return false}
}
</SCRIPT>
<BODY bgColor="lightGreen">
<FONT FACE="Comic Sans MS">
<H2>OnSUBMIT UYGULAMASI</H4>
</FONT>
<FORM NAME="form1" onSubmit="return verikont()">
<B>5 KARAKTER GİRİNİZ:</B>
<INPUT TYPE="text" NAME="kar" SIZE=5>
<P><INPUT TYPE="submit" VALUE="KARAKTERLER GİRİLDİ" NAME="submit1" onClick="document.form1.kar.value=document.form1.kar.value.toUpperCase()">
</FORM>
</BODY>
</HTML>
Yukarıdaki kod çalıştırılınca bir form görünecektir. Burada giriş kutusuna 5 karakter girerek "KARAKTERLER GİRİLDİ" düğmesine tıklayınız. Bu durumda giriş kabul edilecek ve giriş büyük harfe çevrilerek kod sona erecektir.
Aynı pencerede şimdi bilgi giriş penceresine erf şeklinde 3 karakter giriniz. Bu durumda 5 karakter girmediğiniz için uyarı mesajı alacaksınız.
Yorumlar
Yorum Gönder