JavaScript - Handler

Pendahuluan kepada Penangan JavaScript

Hai, para pemrogram yang sedang mencari ilmu! Hari ini, kita akan mendalam ke dunia yang menarik penangan JavaScript. Seperti guru komputer tetangga Anda yang ramah, saya di sini untuk menghidahkan Anda dalam perjalanan ini dengan banyak contoh dan penjelasan. Jadi, ambil minuman kesukaan Anda, duduk kembali, dan mari kita mulai!

Apa Itu Penangan dalam JavaScript?

Dalam JavaScript, penangan adalah fungsi yang dipanggil saat terjadi peristiwa tertentu. Bayangkan itu seperti seorang asisten khusus yang selalu siaga, menunggu sesuatu untuk terjadi. Ketika sesuatu itu terjadi, penangan kita langsung bereaksi!

Mari kita mulai dengan contoh sederhana:

let button = document.querySelector('button');
button.onclick = function() {
alert('Hello, World!');
};

Dalam kode ini, kita mengatakan ke JavaScript, "Hey, saat seseorang mengklik tombol ini, tunjukkan peringatan 'Hello, World!'" Fungsi yang kita tetapkan ke button.onclick adalah penangan kita.

Jenis Penangan Umum

JavaScript memiliki banyak jenis penangan. Mari kita lihat beberapa yang paling umum:

Jenis Penangan	Deskripsi	Contoh
onclick	Diperankan saat elemen diklik	element.onclick = function() { ... }
onmouseover	Diperankan saat mouseberger ke atas elemen	element.onmouseover = function() { ... }
onkeydown	Diperankan saat tombol ditekan	document.onkeydown = function(event) { ... }
onload	Diperankan saat halaman atau gambar selesai dimuat	window.onload = function() { ... }
onsubmit	Diperankan saat formulir dikirim	form.onsubmit = function(event) { ... }

Membuat dan Menggunakan Penangan

Metode 1: Atribut HTML

Salah satu cara untuk membuat penangan adalah menambahkannya langsung ke elemen HTML sebagai atribut. Berikut adalah contoh:

<button onclick="alert('Clicked!')">Klik saya</button>

Saat Anda mengklik tombol ini, ia akan menunjukkan peringatan "Clicked!". Mudah, kan?

Metode 2: Properti DOM

Metode yang lebih fleksibel adalah menggunakan JavaScript untuk menetapkan penangan ke properti elemen:

let button = document.querySelector('button');
button.onclick = function() {
console.log('Tombol diklik!');
};

Metode ini memungkinkan kita untuk mengubah penangan secara dinamis dan mengakses elemen dalam fungsi.

Metode 3: addEventListener

Metode yang paling kuat adalah menggunakan addEventListener. Itu memungkinkan kita untuk menambahkan beberapa penangan ke acara yang sama:

let button = document.querySelector('button');
button.addEventListener('click', function() {
console.log('Penangan pertama');
});
button.addEventListener('click', function() {
console.log('Penangan kedua');
});

Sekarang, saat Anda mengklik tombol, kedua pesan akan dicatat ke konsol!

Objek Event

Saat peristiwa terjadi, JavaScript membuat objek 'event' dengan rincian tentang apa yang terjadi. Kita dapat mengakses objek ini di penangan kita:

document.onmousemove = function(event) {
console.log('Posisi mouse:', event.clientX, event.clientY);
};

Kode ini mencatat posisi mouse saat ia bergerak. Objek event memberikan kita akses ke semua jenis informasi yang berguna!

Menghapus Penangan

kadang-kadang, kita perlu menghapus penangan. Berikut adalah cara kita dapat melakukannya:

let button = document.querySelector('button');
function handler() {
console.log('Diklik!');
button.removeEventListener('click', handler);
}
button.addEventListener('click', handler);

Penangan ini hanya akan berjalan sekali karena ia menghapus dirinya sendiri setelah klik pertama!

Contoh Praktis: Sebuah Permainan Sederhana

Ayo kita gabungkan semua ini dalam permainan kecil yang menyenangkan. Kita akan membuat tombol yang bergerak saat Anda mencoba mengkliknya:

<button id="catch-me">Tangkap saya jika Anda bisa!</button>

<script>
let button = document.getElementById('catch-me');
button.addEventListener('mouseover', function() {
let top = Math.random() * (window.innerHeight - this.offsetHeight);
let left = Math.random() * (window.innerWidth - this.offsetWidth);
this.style.top = top + 'px';
this.style.left = left + 'px';
});

button.addEventListener('click', function() {
alert('Selamat! Anda menangkap saya!');
});
</script>

Dalam permainan ini, tombol bergerak ke posisi acak saat Anda mencoba mengarahkan mouse kepadanya. Jika Anda berhasil mengkliknya, Anda menang!

Kesimpulan

Dan begitulah, teman-teman! Kita telah melihat dasar penangan JavaScript, dari apa itu hingga bagaimana menggunakannya dalam situasi praktis. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba konsep ini.

Seperti yang saya selalu katakan kepada murid-muridku, mengoding adalah seperti belajar menunggang sepeda. Mungkin tampak wobble pada awalnya, tapi dengan latihan, Anda akan segera berlari! Terus mengoding, terus belajar, dan terutama, bersenang-senang!

Credits: Image by storyset