ID (Indonesia) Translation

JavaScript - Penangan

Pengenalan ke Penangan JavaScript

Halo, para pemrogram yang sedang berkembang! Hari ini, kita akan melompat ke dunia yang menarik dari penangan JavaScript. Sebagai guru komputer yang ramah di lingkungan tetangga Anda, saya di sini untuk menggイドi Anda dalam perjalanan ini dengan banyak contoh dan penjelasan. Jadi, ambil minuman favorit Anda, duduk kenyang, dan mari kita mulai!

Apa Itu Penangan di JavaScript?

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

Mari kita mulai dengan contoh sederhana:

let tombol = document.querySelector('button');
tombol.onclick = function() {
alert('Halo, Dunia!');
};

Dalam kode ini, kita mengatakan ke JavaScript, "Hey, saat seseorang mengklik tombol ini, tunjukkan peringatan yang mengatakan 'Halo, Dunia!'" Fungsi yang kita tentukan untuk tombol.onclick adalah penangan kami.

Jenis Penangan Umum

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

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

Membuat dan Menggunakan Penangan

Metode 1: Atribut HTML

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

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

Ketika Anda mengklik tombol ini, ia akan menampilkan peringatan yang mengatakan "Diklik!". Mudah, kan?

Metode 2: Properti DOM

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

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

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

Metode 3: addEventListener

Metode yang paling kuat adalah menggunakan addEventListener. Ini memungkinkan kita untuk menambahkan beberapa penangan ke同一 event:

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

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

Objek Event

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

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

Kode ini mencatat posisi mouse setiap kali ia bergerak. Objek event memberikan kita akses ke berbagai informasi yang berguna!

Menghapus Penangan

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

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

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 tombol = document.getElementById('catch-me');
tombol.addEventListener('mouseover', function() {
let atas = Math.random() * (window.innerHeight - this.offsetHeight);
let kiri = Math.random() * (window.innerWidth - this.offsetWidth);
this.style.top = atas + 'px';
this.style.left = kiri + 'px';
});

tombol.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-dasar penangan JavaScript, dari apa itu penangan hingga bagaimana menggunakannya dalam situasi praktis. Ingat, latihan membuat sempurna, jadi jangan takut untuk mengexperimen dengan konsep ini.

Seperti yang saya selalu katakan ke murid-muridku, mengoding seperti belajar menunggang sepeda. Mungkin terlihat berliku pertama kali, tetapi dengan latihan, Anda akan berlari dengan cepat dalam waktu singkat! Terus mengoding, terus belajar, dan terutama, bersenang-senang!

Credits: Image by storyset