Turkcell | Geleceği Yazanlar

Web Programlama

Web Programlama

DERS PROGRAMI
301: JavaScript Ders Programı

Olayların Kullanımı

Lisans: Creative Commos (by-nc-sa)12.09.2019 tarihinde güncellendi
Bakabileceğiniz Etiketler:Eğitmen: Geleceği Yazanlar Ekibi

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.