JavaScript nesne tabanlı (object-oriented) bir dildir. Nesne tabanlı olmasından dolayı olay yönelimli çalışır. Örneğin; bir button'a tıkladıktan sonra çıkan uyarı penceresi JavaScript'in nesne tabanlı bir dil olduğunun açık bir göstergesidir.
JavaScript'te bazı olayların gerçekleştirilmesi için geliştirilmiş ve web sitelerinde senelerdir başarı ile kullanılan hazır olaylar vardır. Şimdi bu olayları öğrenmeye başlayalım.
Daima <body> etiketi ile kullanılır. Sayfa yüklendikten sonra gerçekleşecek olayları yerine getirir.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<script>
function hosGeldiniz() {
alert("Sayfamıza hoş geldiniz!");
}
</script>
</head>
<body onload="hosGeldiniz()">
<div>
@RenderBody()
</div>
</body>
</html>
hosGeldiniz( ) isimli bir fonksiyon tanımladım ve bu fonksiyonumu onload olayı ile body etiketi içerisinde kullandım. Sayfam yüklendikten sonra "Sayfamıza hoş geldiniz!" bildirimi yayınlanacaktır. onload olayı bu şekilde çalışmaktadır.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<script>
window.onload = alert("Sayfamıza hoş geldiniz!");
</script>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
Bu kodları onload olayını kullanmadan bu şekilde de yazabiliriz.
En çok kullanılan olaydır. Bir nesneye tıklandığında çalışacak kodları yerine getirir.
<script>
function onayla() {
alert("Mesajınız başarı ile gönderildi. Sizinle en yakın zamanda iletişime geçeceğiz.");
}
function temizle() {
return confirm("Form temizlensin mi?");
}
</script>
<form>
<fieldset>
<legend>Mesaj Gönder</legend>
<label>Rumuzunuz: </label> <input type="text"/> <br/><br/>
<label>e-Posta Adresiniz: </label> <input type="text"/> <br/><br/>
<label>Doğum Tarihiniz: </label> <input type="text"/> <br/><br/>
<label>Mesajınız: </label> <textarea rows="2" cols="18"></textarea> <br/><br/>
<input type="submit" value="Onayla" onclick="onayla()"/><br/><br/>
<input type="reset" value="Formu Temizle" onclick="return temizle()"/>
</fieldset>
</form>
Şeklinde kodlarımız olsun. HTML5 derslerinde kullandığımız örnek bir form. İlk olarak onayla( ) ve temizle( ) isimli iki fonksiyon tanımladım. Bunları "Onayla" ve "Form Temizle" düğmelerinde kullandım.
Burada dikkatimizi çeken temizle( ) fonksiyonundaki confirm( ) fonksiyonu ve return deyimi olmalı. confirm dilimizde onayla anlamına gelmektedir. "Ok" ve "Cancel" seçimlerinin olduğu bir uyarı penceresi açar. Fonksiyonda ve onclick olayında return kullanmamızın sebebi kullanıcı iptal'e tıkladığında reset'leme işlevinin yerine getirilmemesini sağlamak için.
Formdaki "Onayla" ve "Formu Temizle" düğmelerini test edebilirsiniz.
onfocus nesne seçildiğinde meydana gelecek olayları, onblur ise seçimden çıkıldığında gerçekleşecek olayları belirtir. CSS'teki :focus sözde sınıfı ile aynı işlevi gördüğü için kullanımı gereksizdir. Bu yüzden bu olayı örneklendirmiyorum. Yine de bilmenizde fayda var.
Tarayıcı nesneyi sayfa yükledikten sonra meydana gelecek olayları gerçekleştirir.
<script>
function hata() {
alert("Resim sayfaya yüklenemedi.");
}
</script>
<img src="~/Areas/web_tasarim/Content/img/cicek.png" onerror="hata()" />
hata( ) isimli bir fonksiyonumuz olsun ve hata uyarısını versin. cicek.png dosyasımız sayfada yüklenemediği zaman bir uyarı penceresi açılacak.
Fare imleci ile bir nesnenin üzerine gelindiğinde gerçekleşecek olayları sağlarlar. onmousedown fare ile bir tuşa basıldığında, onmousemove nesnenin üzerinde gezildiğinde, onmouseout nesnenin üzerinden gidildiğinde, onmouseover nesnenin üzerine gelindiğinde, onmouseup ise tuşa basmaktan vazgeçildiğinde gerçekleşecek olayları yerine getirir. Tüm bu olaylar CSS'teki :active, :hover, :focus gibi sözde sınıflar ile aynı işlevleri yerine getirdikleri için artık kullanılmamaktadırlar. Bu yüzden anlatma gereği duymuyorum.
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.
Bu derslik bu kadar. Bir sonraki dersimizde Hatalarla Baş Etme konusuna değineceğiz.