Hallo...
Semangat pagi !
Pada kesempatan ini saya akan membahas tentang jawascript, eh maksudnya javascript :D hehe... jangan terlalu fokus kawan, dibawa slow wae.
Oke, Postingan saya kali ini berjudul Penanganan Event In Javascript (Event Handler), dan pastinya isi dari postingan ini akan bertema sesuai judulnya. *maaf kebanyakan prolog :D *
Dari pad kebanyakan pembukaan, langsung aja ke pembahasan yuk.
Yuk simak !
Pengertian
Penanganan Event atau Event Handler adalah kemampuan javascript untuk mendeteksi eventatau kejadian-kejadian yang terjadi di halaman web, kemudian menangani atau melakukan
suatu proses jika terdeteksi suatu event. Event di web bisa macam-macam, seperti klik, double
klik, menggerakkan mouse, bila pointer mouse berada di atas suatu objek HTML, dan
sebagainya.
Latar Belakang
Pengguaan javascript sangatlah banyak, diantaranya adalah penggunaan event ini, penggunaan event dengan javascript sangatlah menarik, sehingga menarik juga untuk kita pelajari dan kita terapkan di dala website kita.Maksud dan Tujuan
Untuk memberikan referensi kepada pengunjung blog tentang penggunaan event di javascript.Jangka Waktu Kegiatan
Jangka waktu pembuatan event ini adalah 1 jam.Alat dan Bahan
- Koputer atau laptop.
- Text editor (Sublime text, notepad++, atom ataupun yang lainnya).
Tahapan dan Langkah kegiatan
Dalam tutorial ini, akan ada 2 jenis event yang akan Saya bagikan.1. Event dengan Hover.
- Demo
Arahkan ke sini
- Source Code
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Arahkan ke sini</div>
<script>
function mOver(obj) {
obj.innerHTML = "Terimaasih :*"
}
function mOut(obj) {
obj.innerHTML = "Dada !!!"
}
</script>
</body>
</html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Arahkan ke sini</div>
<script>
function mOver(obj) {
obj.innerHTML = "Terimaasih :*"
}
function mOut(obj) {
obj.innerHTML = "Dada !!!"
}
</script>
</body>
</html>
2. Event dengan Click.
- Demo
Click Di sini
- Source Code
<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Di sini</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Pergi !";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Terimakasih :*";
}
</script>
</body>
</html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Di sini</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Pergi !";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Terimakasih :*";
}
</script>
</body>
</html>
Hasil
Telah membuat event handler dengan javascript.Kesimpulan
Event yang bisa terjadi pada halaman web atau objek HTML.Referensi
- https://app.box.com/s/mae8os7vom2bkufjrg4t
- www.w3schools.com/
Terimakasih telah menyimak, semoga postingan ini dapat bermanfaat untuk Anda. Selamat mencoba dan selamat belajar !
1 comments:
Write commentshasilnya keren gan !
Reply