JavaScript mousedown ve mouseup olayları

JavaScript ile nesneler üzerinde olayları inceleyeceğiz. C#, Java gibi görsel programlama dillerini kullananların hatırlayacağı gibi mouse up ve mouse down gibi olaylar mevcuttur. Mouse Down olayı farenin tuşuna basıldığında, mouse up ise farenin tuşu bırakıldığında devreye girer. Aşağıdaki örneğimizde html sayfasını ilk açtığımızda şemsiye kapalı olacak, fareyi şemsiye üzerine getirince ise resim değişecek ve şemsiye açık duruma geçecek.

JavaScript kodlarımızı aşağıdaki gibi bir index.html dosyasına kaydedelim.  Aşağıdaki resimlerin üzerine sağ tıklayıp Farklı kaydet diyerek indirebilirsiniz. Resimler depositphotos dan alınmıştır

<!DOCTYPE html>
<html>
<head>
    <title> JS  MouseDown olayları</title>
    <meta charset="utf-8">
</head>

<script type="text/javascript">
    function semsiyeAc(){
        document.getElementById('semsiye').src="semsiye_acik.jpg";
    }

function semsiyeKapat(){
        document.getElementById('semsiye').src="semsiye_kapali.jpg";
    }
</script>    

<body>

<h1>JavaScript MouseDown ve MouseUp Olayları</h1>

    <img id="semsiye" src="semsiye_kapali.jpg" onmouseup="semsiyeKapat()"
     onmousedown="semsiyeAc()">

</body>
</html>

Bu kodlamada iki fonksiyon oluşturduk, semsiyeAc() ve semsiyeKapat() fonksiyonları. Daha sonra resim göstermek için kullandığımız img nesnesinin ID değerini "semsiye" yaptık. Dikkat ederseniz Türkçe karakter kullanmadık, fonksiyon isimlerinde ve nesnelere id degeri verirken İngilizce karakterler kullandık. JavaScript ile farklı örneklere devam edeceğiz. Örnekleri uygulamayı unutmayın.

Mutlu kodlamalar,
Oğuzhan TAŞ
Mart, 2018
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 23 Makale