Konu başlığına tıklayarak detayları görebilirsiniz!!!
Event Handler bir aksiyon gerçekleştirdiğimizde ne yapması gerektiğini programa söylüyor. Mesela bir butona tıkladığımızda, bir linkin üzerine geldiğimizde ne yapması gerektiği gibi. Örnekler üzerinde ilerleyerek ne anlama geldiğini daha iyi kavrayabileceğiz.
İlk olarak bir buton oluşturarak bu butona tıkladığımızda ne yapmasını istediğimize dair bir örnekle başlayalım. Yine standart html şablonumuzu oluşturarak <body> etkiketleri arasında kodumuzu yazıyoruz. Bir <form> oluşturup içerisine <input> öğemizi yerleştiriyoruz. Sonrasında bir buton olauşturarak butonumuzun üzerinde yazmasını istediğimiz şeyi belirterek, onClick kullanarak butonumuza tıkladığımızda alert(uyarı) kutucuğu içerisinde 'Tıklama Başarılı' yazmasını istediğimizi söylüyoruz. Eğer bunu yazmasaydık butona tıkladığımızda hiçbir işlem yapmayacaktı. onClick adından da anlaşılacağı üzere tıklama yapıldığında gibi bir anlama geliyor.
<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>
<form>
<input type="button" value="Tıkla" onClick="alert('Tıklama Başarılı');" />
<form/>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
onClick kullanarak javascript fonksiyonlarımızı da tetikleyebiliyoruz. Aşağıdaki örneğimizde oluşturduğumuz <script> içerisinde bulunan fonskyionu butonumuz aracılığıyla harekete geçireceğiz. Bunun için yine bir javascript fonksyionu oluşturuyoruz. Herhangi bir sayıyı kullanıcıdan prompt ile alıp karekökünü hesaplamak amacıyla karekokBul() adında bir fonksiyon oluşturuyoruz. Fonksiyonumuz içersinde sayi adında bir değişken oluşturarak prompt ile kullanıcının karşına gelecek kutucuğa bir sayı girmesini istiyoruz. Sonrasında sonucu yazdırmak için sonuc adında bir değişken oluşturarak daha önce öğrendiğimiz Math.sqrt yani karekök bulma metodu ile sayi değişkenimizin karekökünü sonuc olarak bize bir alert(uyarı) kutucuğu içerisinde yazdırmasını söylüyoruz.
<html>
<head>
<script type="text/javascript">
function karekokBul() {
var sayi = prompt ("Karekökünü bulmak istediğiniz sayıyı giriniz: ", "Değeri Giriniz");
var sonuc = Math.sqrt(sayi);
alert(sonuc);
}
</script>
</head>
<body>
<form>
<input type="button" value="Karekök Hesapla" onClick="karekokBul();" />
<form/>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Mouse Over mouse'umuz ile bir öğenin üzerine geldiğimizde ne yapacağını, Mouse Out mouse'umuz ile bir öğenin üzerinden çıktığımızda ne yapacağını söyleyebiliyoruz. Bu öğe bir link, bir resim, herhangi bir html öğesi olabilir.
Örneğimizde ilk olarak onMouseOver kullanarak oluşturduğumuz link üzerine geldiğimizde alert kullanarak bir uyarı mesajı vermesini sağlıyoruz. İkinci kısımda ise onMouseOut kullanarak mouse'umuzu linkten uzaklaştırdığımızda bir alert yani uyarı mesajı vermesini sağlıyoruz.
<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>
<form>
<a href="http://wwww.turkiye.gov.tr" onMouseOver="alert('Site Linki');">E-Devlet Giriş</a>
<br/>
<a href="http://wwww.turkiye.gov.tr" onMouseOut="alert('Site Linkinden Çıktınız');">E-Devlete Giriş</a>
<form/>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Aynı işlemleri resim, yazı vb. html öğeleri üzerinde de deneyerek pratik yapabilirsiniz.
onLoad ile web sayfamız her yüklendiğinde ne yapmasını istediğimizi belirtmemize yarıyor. onUnload ise tam tersi sayfamız kapanırken ne yapmasını istediğimizi söylememize yarıyor. onScroll ise mouse'umuzu aşağıya doğru sürüklediğimizde ne yapmasını istediğimizi belirtmemize yarıyor.
İlk olarak onLoad ile bir önek yapalım. Örneğimizde <script> etiketi arasında onLoadMesajı adında bir fonksiyon oluşturuyoruz. İçerisinde sayfamızı her açtığımızda veya yenilediğimizde 'Sayfamıza Hoşgeldiniz' gibisinden bir alert(uyarı) ekranın bizi karşılamasını söylüyoruz. Sonrasında html <body> etiketi içerisinde onLoad komutunu kullanarak onLoadMesaji isimili fonksiyonumuzu çağırıyoruz. Bu sayede sayfamız her açıldığında veya yenilendiğinde 'Sayfamıza Hoşgeldiniz!' mesajı bizi karşılayacktır. Bu mesaja Tamam veya Ok dediğimizde artık sayfamız içerisinde gezinebilir veya istediğimiz işlemleri gerçekleştirebiliriz. Bu mesaj tekrar bizi sadece sayfayı yenilediğimizde veya yeniden açtığımızda karşılayacaktır.
<html>
<head>
<script type="text/javascript">
function onLoadMesaji () {
alert('Sayfamıza Hoşgeldiniz!');
}
</script>
</head>
<body onLoad="onLoadMesaji();" >
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Yine onLoad benzeri bir onUnLoadMesaji fonksiyonu oluşturuyoruz <script> etiketlerimiz içerisinde. Bu sefer html <body> içerisinde onUnloadMesaji fonksiyonumuzu çağırıyoruz. Bu sefer taracıyımızdan çıktığımızda ya aynı sayfa içerisinde başka bir sayfaya yönlendiğimizde 'Güle Güle! mesajının bizi karşılayacağını göreceğiz. Eğer siz de bu kod çalışmıyorsa bu tarayıcınızdan kaynaklı olabilir. Bazı tarayıcılar onUnload komutunu göremeyebiliyor. Bu noktada kodunuzun çalışmadığını düşünmeyin.
<html>
<head>
<script type="text/javascript">
function onLoadMesaji () {
alert('Sayfamıza Hoşgeldiniz!');
}
function onUnLoadMesaji () {
alert('Güle Güle!');
}
</script>
</head>
<body onLoad="onLoadMesaji();" onUnLoad="onUnLoadMesaji();" >
</body>
</html>
onScroll komutu ile de sayfamızda aşağıya doğru gezindiğimizde bir mesaj bizi karşılayacaktır. Yine <script> etiketlerimiz arasında onScrollMesaji adıyla bir fonksiyon oluşturup onScroll komutunu <body> etiketleri arasında çağırıyoruz. Sayfamız boş olarak açılacak ama aşağıya doğru bir sürükleme yaptığımızda 'Aşağıda sizi sürprizler bekliyor!' mesajı ekranda belirecektir.
<html>
<head>
<script type="text/javascript">
function onScrollMesaji () {
alert('Aşağıda sizi sürprizler bekliyor!');
}
</script>
</head>
<body onScroll="onScrollMesaji();" >
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
