JavaScript · Bab 4
Event Handling & Interaktivitas Aplikasi Web
Mengenali event pengguna, memakai addEventListener, membaca input keyboard/form, dan membuat halaman merespons aksi pengguna.
Event adalah kejadian pada halaman web. Contohnya klik tombol, mengetik pada input, menekan keyboard, mengirim form, atau halaman selesai dimuat. Event handling membuat JavaScript menjalankan fungsi saat kejadian itu terjadi.
4.1 Event Klik dengan addEventListener
Event dapat dipasang dengan properti lama seperti onclick, tetapi addEventListener() lebih disarankan karena satu elemen dapat memiliki lebih dari satu handler untuk event yang sama tanpa saling menimpa.
🧪 Coba ubah: mulai total dari 10, lalu klik tombol beberapa kali.
Belum ada output.
🧪 Coba ubah: ubah contoh di atas menjadi addEventListener("click", ...).
Belum ada output.
4.2 Membaca Nilai Input
Event input terpanggil setiap kali isi input berubah. Event ini cocok untuk pencarian langsung, validasi form, dan preview teks.
🧪 Coba ubah: ganti awalan "Preview: " menjadi "Nama pengunjung: ".
Belum ada output.
4.3 Event Keyboard
Event keyboard berguna untuk shortcut, kontrol sederhana, dan input cepat. keydown terjadi saat tombol ditekan, sedangkan keyup terjadi saat tombol dilepas.
🧪 Coba ubah: tambahkan kondisi untuk ArrowUp agar posisi bertambah 10.
Belum ada output.
Event keyboard juga sering dipakai untuk menggerakkan elemen 2D. Siapkan elemen dengan position: absolute, simpan posisi dalam variabel, lalu ubah style.left atau style.top.
🧪 Coba ubah: tambahkan posisiY dan gerakkan elemen dengan style.top saat ArrowUp atau ArrowDown ditekan.
Belum ada output.
Contoh gabungan berikut memakai perpindahan dari titik awal 50 piksel. Variabel geser menyimpan jarak perpindahan, jadi posisi di layar dihitung dengan 50 + geser.
🧪 Coba ubah: ganti jarak tiap tekanan menjadi 8 piksel.
Belum ada output.
4.4 Mencegah Submit Form Default
Saat form disubmit, browser biasanya memuat ulang halaman. Untuk validasi atau aplikasi interaktif, gunakan event.preventDefault() agar halaman tetap berada di tempat.
🧪 Coba ubah: ganti batas minimal username dari 3 menjadi 5.
Belum ada output.
Berikutnya: studi kasus dan evaluasi di bab 5 untuk menggabungkan teknik yang sudah dipelajari.
Kondisi awal
Pada akhir Bab 3, JavaScript sudah mengubah judul, daftar peserta, dan kartu melalui DOM. Perubahan itu terjadi langsung ketika kode berjalan. Sekarang buka Lab Bab 4: Event Interaktif, latihan baru dengan tombol Tambah klik, isian nama, dan kotak biru sebagai pemain.
Event adalah kejadian pada halaman, misalnya klik atau ketikan. Event handling berarti menjalankan fungsi saat kejadian itu diterima. Fungsi tersebut disebut handler. addEventListener memasang handler tanpa langsung menjalankannya. Cara lama onclick juga merespons klik, tetapi penugasan berikutnya pada properti itu mengganti handler sebelumnya; addEventListener memungkinkan beberapa handler terpasang pada event yang sama.
Editor mewakili script.js. Ganti hanya isi zona bernomor dengan potongan yang ditunjuk. Elemen serta variabel penghitung sudah disiapkan di luar zona; pertahankan semuanya. Tekan Jalankan untuk membuka Preview, lalu lakukan tindakan di dalam Preview. Cek menjalankan tindakan pengujian otomatis. Tidak perlu memasang aplikasi.
Panduan memasang respons pengguna
Langkah 1: Hitung klik tombol
tombolKlik menunjuk tombol dan jumlahKlik menunjuk paragraf penghitung. totalKlik sudah bernilai 0. Parameter pertama addEventListener adalah nama event; parameter kedua adalah fungsi yang dijalankan setiap event itu terjadi.
Tempel di Lab 4, Zona 1. Berkas: script.js
tombolKlik.addEventListener("click", function () {
totalKlik++;
jumlahKlik.textContent = "Jumlah klik: " + totalKlik;
});totalKlik++ menambah penghitung satu. Baris berikutnya menggabungkan teks dengan angka terbaru dan menampilkannya lewat textContent. Tekan Jalankan, lalu klik Tambah klik dua kali di Preview. Jangan mengklik tombol Jalankan sebagai pengganti tombol di dalam Preview.
Hasil: sesaat setelah Jalankan tertulis Jumlah klik: 0; setelah dua klik tombol Tambah klik, tertulis Jumlah klik: 2.
Langkah 2: Tampilkan sapaan saat mengetik
inputNama dan preview sudah disediakan. Event input terjadi ketika pengguna mengubah isian, tanpa perlu menekan Enter. Parameter event berisi keterangan kejadian. event.target.value membaca isi elemen asal kejadian; trim membuang spasi di awal dan akhir teks.
Tempel di Lab 4, Zona 2. Berkas: script.js
inputNama.addEventListener("input", function (event) {
const nilai = event.target.value.trim();
preview.textContent = "Halo, " + nilai;
});Tekan Jalankan, lalu ketik Alya pada isian nama di Preview. Sebelum pengguna mengetik, paragraf masih berisi teks bawaan. Handler baru memperbaruinya ketika event input terjadi. Hapus seluruh isi untuk melihat sapaan tanpa nama; kode ini belum memvalidasi nama kosong.
Hasil: ketikan dengan spasi tepi menampilkan Halo, Alya; setelah isian dihapus, teks menjadi Halo, tanpa nama.
Langkah 3: Gerakkan pemain dengan keyboard
keydown terjadi saat tombol keyboard ditekan, sedangkan keyup terjadi saat dilepas. Kita memasang handler pada document agar kejadian keyboard yang diterima halaman Preview dapat dibaca. event.key berisi nama tombol. ArrowRight berarti panah kanan; ArrowLeft berarti panah kiri.
Tempel di Lab 4, Zona 3. Berkas: script.js
document.addEventListener("keydown", function (event) {
if (event.key === "ArrowRight") {
posisi += 10;
} else if (event.key === "ArrowLeft") {
posisi = Math.max(0, posisi - 10);
}
pemain.style.left = 50 + posisi + "px";
posisiEl.textContent = "Posisi: " + posisi;
});posisi menyimpan jarak dari titik awal, bukan koordinat kiri sebenarnya. Panah kanan menambah 10. Math.max memilih nilai terbesar antara 0 dan hasil pengurangan sehingga jarak tidak negatif. style.left mengatur jarak sisi kiri pemain dari arena dalam piksel, ditulis px. Titik awalnya 50 piksel: posisi 20 berarti left 70px. Karena arena memakai position relative dan pemain absolute, pemain bergerak di dalam acuan arena tersebut.
Tekan Jalankan untuk mulai dari nol, lalu klik area kosong di dalam Preview supaya keyboard masuk ke halaman itu. Tekan panah kanan dua kali, kemudian panah kiri tiga kali. Tidak ada batas kanan dalam kode ini; ikuti jumlah tekanan yang disebutkan. Tombol lain tetap memperbarui teks dengan posisi yang sama. Handler tidak memakai preventDefault sehingga perilaku bawaan tombol, seperti menggulir halaman, masih dapat terjadi.
Hasil: dua tekanan panah kanan dari awal menghasilkan Posisi: 20 dengan left 70px; tiga tekanan panah kiri sesudahnya berhenti pada Posisi: 0 dengan left 50px.
Langkah 4: Jalankan contoh lengkap dan periksa lab
Playground berikut menggabungkan HTML dan script, mengikuti pola bab sebelumnya. Tekan Jalankan untuk kembali ke keadaan awal, klik Tambah klik dua kali, ketik Alya, klik area kosong Preview, lalu tekan panah kanan dua kali. Kode ini tidak menulis pesan ke Console; baca perubahan pada Preview.
Berkas: index.html
Belum ada output.
Untuk pemeriksaan lab, lengkapi ketiga zona lalu pilih dan Cek setiap langkah lab. Setiap Cek menjalankan kode pada Preview baru dari keadaan awal. Pada langkah pertama penilai mengirim dua klik, pada langkah kedua mengisi nama Alya, dan pada langkah ketiga mengirim dua event ArrowRight ke document. Penilai juga memeriksa penggunaan addEventListener serta style.left. Pisahkan urutan percobaan manual dari pemeriksaan otomatis agar hitungan awal tidak membingungkan.
Hasil: pada playground setelah urutan tindakan tadi terlihat Jumlah klik: 2, Halo, Alya, dan Posisi: 20, dengan pemain di left 70px.
Bekal event form
Event submit terjadi ketika form dikirim. Browser biasanya menjalankan navigasi bawaan form; event.preventDefault() membatalkan tindakan bawaan itu sehingga handler dapat memproses isian tanpa berpindah halaman. Lab ini memakai input langsung dan tidak mempunyai form yang dikirim. Untuk bab ini cukup gunakan click, input, dan keydown sesuai zonanya.
Kalau ada galat
Klik tidak menambah angka. Ganti seluruh Zona 1 dengan Langkah 1. Pertahankan deklarasi totalKlik di luar handler agar nilainya tidak kembali nol setiap klik. Tekan Jalankan setelah mengubah kode.
Sapaan tidak mengikuti isian. Ganti Zona 2 dengan Langkah 2. Gunakan event input dan pertahankan event.target.value.trim(). Isi nama pada Preview, bukan pada editor kode.
Panah tidak menggerakkan pemain. Tempel ulang Zona 3, termasuk handler pada document. Klik area kosong Preview sebelum menekan panah; keyboard yang masih berada di editor menggerakkan kursor editor. Tekan Jalankan untuk memulai lagi dari posisi nol.
Nama sudah dideklarasikan atau angka bertambah dua kali. Isi zona dengan satu salinan potongan saja. Jangan menyalin deklarasi bawaan atau script lengkap playground ke zona. Jalankan ulang agar halaman dan handler dibuat dari awal.
Keadaan akhir
Tombol menghitung klik, isian nama memperbarui sapaan, dan keyboard menggerakkan pemain dari titik awal 50 piksel dengan batas jarak kiri nol. Semua nilai berada di halaman yang sedang berjalan dan kembali ke awal saat Jalankan ditekan. Bab 5 menggabungkan pola ini dalam latihan studi kasus dan evaluasi Mandiri.