Turkcell | Geleceği Yazanlar

301: JavaScriptBaşlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

Olayların Kullanımı

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler : web-programlama

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.