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
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

Dil Değiştir(Change Language)
Kategoriler
- Csharp(49)
- Csharp Formlar(11)
- Web Tasarım(10)
- CSS(22)
- JavaScript(27)
- PHP(47)
- Laravel(2)
- ASP.net(38)
- Excel(13)
- Güvenlik(4)
- E-Ticaret(3)
- Kariyer(2)
- SQL Server(7)
- MySQL(12)
- Linux(9)
- MacOSX(8)
- Ayarlar(11)
- Bilgisayar Ağları(2)
- Symfony(1)
- Teknoloji(7)
- VBS(1)
- Arduino(1)
- RaspberryPi(1)
- Algoritmalar(0)
En çok Okunan 23 Makale
- :: Hangi Linux Dağıtımı?
- :: OSX İşletim Sistemine PHP, MySQL, A...
- :: Csharp ile Access Veritabanı Bağlan...
- :: Hangisi acaba, PHP mi ASP.NET mi ?
- :: PHP ile Basit Dosya Yükleme
- :: Hangi Programlama Dilini Öğrenmeliy...
- :: Web Tasarım öğrenmeye nereden başla...
- :: Linux İşletim Sistemi Giriş ve Orta...
- :: ASP.net Giriş Örnekleri, Textbox, L...
- :: Mac Bilgisayarınıza Windows 7 Yükle...
- :: Excel Hesap tablosunda ÇOKEĞERSAY F...
- :: Mac ve Windows Dosya Sistemleri Ara...
- :: PHP dilini kullanarak MySQLi tekniğ...
- :: Web sitenizi Google Web Dil Çeviric...
- :: Web Sitenize Google Güvenlik Kodu E...
- :: Mesaj Özütü (Hash) Algoritmaları...
- :: Excelde EĞER Fonksiyonu Kullanımı...
- :: Excel Hesap tablosunda ÇOKETOPLA Fo...
- :: PHP Dili kullanarak MySQLi Tekniği ...
- :: MySQL Veritabanında Veri Şifreleme...
- :: Bootstrap ile Responsive Form İşlem...
- :: Excel Hesap tablosunda EĞERSAY Fonk...