Pelajari acara JavaScript lengkap mulai dari onclick, mengubah elemen HTML, mengubah elemennya sendiri, hingga memanggil function.
Acara JavaScript (JavaScript Events) Lengkap untuk Pemula
Pembukaan
Acara JavaScript atau JavaScript Events adalah tindakan yang terjadi pada halaman website dan dapat dideteksi oleh browser. Event memungkinkan website menjadi interaktif karena JavaScript dapat merespons aksi pengguna seperti klik tombol, mengetik keyboard, atau menggerakkan mouse.
Dalam pengembangan sistem profesional seperti Haikal IT Support, event JavaScript digunakan untuk monitoring CCTV realtime, kontrol analytic camera system, dashboard server, hingga manajemen jaringan interaktif.
Berikut penjelasan lengkap acara JavaScript.
1. Peristiwa onclick Mengubah Elemen HTML
Event onclick dapat digunakan untuk mengubah isi elemen HTML.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2 id="demo">
Status CCTV Offline
</h2>
<button onclick="ubahText()">
Aktifkan CCTV
</button>
<script>
function ubahText() {
document.getElementById("demo").innerHTML =
"CCTV Online - Haikal IT Support";
}
</script>
</body>
</html>
Penjelasan
onclickaktif saat tombol diklik.JavaScript mengubah isi elemen HTML menggunakan:
innerHTML
2. Peristiwa onclick Mengubah Elemennya Sendiri
Event juga dapat mengubah elemen yang diklik itu sendiri.
Contoh:
<!DOCTYPE html>
<html>
<body>
<button onclick="this.innerHTML='Monitoring Aktif'">
Klik Tombol
</button>
</body>
</html>
Penjelasan
thismengacu pada elemen yang sedang diklik.Tombol berubah otomatis setelah ditekan.
3. Peristiwa onclick Memanggil Suatu Fungsi
Event dapat digunakan untuk menjalankan function JavaScript.
Contoh:
<!DOCTYPE html>
<html>
<body>
<button onclick="cekServer()">
Cek Server
</button>
<script>
function cekServer() {
alert("Server Monitoring Online");
}
</script>
</body>
</html>
Penjelasan
onclickmemanggil function:cekServer()Function menampilkan popup menggunakan
alert().
Cara Kerja Event JavaScript
JavaScript menunggu aksi pengguna seperti:
Klik tombol
Menekan keyboard
Scroll halaman
Hover mouse
Submit form
Saat event terjadi, browser menjalankan kode JavaScript.
Event JavaScript Populer
| Event | Fungsi |
|---|---|
onclick | Saat elemen diklik |
onchange | Saat nilai berubah |
onmouseover | Saat mouse diarahkan |
onkeydown | Saat keyboard ditekan |
onsubmit | Saat form dikirim |
Penyebab Event JavaScript Tidak Berfungsi
Beberapa kesalahan umum:
Salah penulisan nama function
ID elemen salah
JavaScript belum dimuat
Kurang tanda kutip
Event ditulis salah
Cara Mengatasi Error Event
1. Pastikan Function Ada
Salah:
<button onclick="serverAktif()">
Klik
</button>
Tanpa function:
function serverAktif()
Benar:
<button onclick="serverAktif()">
Klik
</button>
<script>
function serverAktif() {
alert("Server Online");
}
</script>
2. Pastikan ID HTML Sesuai
Salah:
document.getElementById("statuss")
Benar:
document.getElementById("status")
3. Gunakan Console Browser
Buka:
F12 → Console
Untuk melihat error JavaScript.
Contoh Kasus
Kasus:
Tombol monitoring CCTV tidak bekerja.
Penyebab:
Function salah penulisan nama.
Salah:
<button onclick="monitoring()">
Klik
</button>
<script>
function monitor() {
alert("CCTV Aktif");
}
</script>
Benar:
<button onclick="monitoring()">
Klik
</button>
<script>
function monitoring() {
alert("CCTV Aktif");
}
</script>
Tips Tambahan
Gunakan nama function yang jelas.
Hindari inline JavaScript terlalu banyak.
Gunakan file JavaScript eksternal untuk project besar.
Gunakan event listener modern pada aplikasi kompleks.
Internal Link
Artikel terkait di Haikal IT Support:
Fungsi JavaScript
Objek JavaScript
Dasar JavaScript
Keluaran JavaScript
Sintaks JavaScript
Kesimpulan
Acara JavaScript (events) memungkinkan website merespons tindakan pengguna sehingga website menjadi lebih interaktif dan dinamis.
Event seperti onclick dapat digunakan untuk mengubah HTML, mengubah elemen itu sendiri, maupun menjalankan function. Pemahaman event sangat penting dalam pengembangan sistem monitoring CCTV, analytic camera system, server dashboard, dan network management di Haikal IT Support.
