JavaScript Olaylar

JavaScript için ne kadar nesne tabanlı programlama dili olmadığını söyleseler de çıkan bir uyarı penceresi, internet sitesinde yaptığımız her hangi bir gösterme işlemi bize nesne tabanlı programlama dili olduğunun kanıtını vermektedir. Nesne tabanlı olduğu için bazı durumların gerçekleştiğinde bazı şeyleri yapması adına JavaScript olaylarını gerçekleştirmekteyiz.

 

Örneğin kullanıcıya vereceğimiz her bir şey bizim JavaScript için oluşturmuş olacağımız olaylar olacaktır. Temel olarak sayfa yüklendi, bilgi değiştirildi gibi olayları JavaScript olayları ile gerçekleştirmekteyiz. JavaScript ‘te bir olay değiştirmek için ise bir HTML nesnesinin :

 

  • onchange
  • onclick
  • onmouseover
  • onmouseout
  • onkeydown
  • onload

 

gibi olaylarına ve daha nicesine kodlar yazıp çalıştırabilmemiz mümkündür.

 

 

JavaScript Olay Örnekleri

JavaScript ‘te olay örneklerine göz atacağımız zaman ise öncelikle HTML sayfası yüklendiği zaman body etiketinin içine onload özelliğine sayfaya hoş geldiniz diye çıkan bir kutucuk yapabiliriz.

 

<!DOCTYPE html>

<head>

<script>

<script>

function merhaba() {

alert ("Sayfamıza Hoş Geldiniz");

}

</head>

<body onload="merhaba()">

</body>

 

Yukarıda yer alan kodda header içine bir script etiketi ile JavaScript kodlarını yazacağını belirttikten sonrasında ise daha önce ki derslerimizde öğrenmiş olduğumuz function ve alert sayesinde ekrana bir kutucuk içinde Sayfamıza Hoş Geldiniz yazısını yazdırmasını istiyoruz. Daha sonrasında ise body etiketinin onload özelliğine bu fonksiyonu çağırıp çalışmasını sağlıyoruz.

 

<body>

<button onclick="document.getElementById('demo').innerHTML=Date()">Zaman Kaç ?</button>

<p id="demo"></p>

</body>

 

Yukarıda ise butona bastığımızda JavaScript ‘in HTML sayfalarını değiştirebilme özelliğinden yararlanarak paragraf etiketine şuan ki zamanı yazacaktır. Yani butona her bastığımızda paragraf etiketinde şimdi ki zaman yazacaktır. Eğer bunu bi buton üzerine yazmak istiyor isek :

 

<body>

<button onclick="this.innerHTML=Date()">Zaman Kaç ?</button>

</body>

 

Yukarıda yer alan kodda ise artık butona her bastığınızda butonun üzerinde zamanının yazdığını göreceksiniz. JavaScript event örnekleri bu sayede bir çok farklı şekilde çoğaltılabilir. Bu örnekleri çoğaltmak tamamen sizin JavaScript bilginize ve yapmak istedikleriniz ile sınırlı olan bir şeydir.


] }

Yorum yapın