Contoh JavaScript pada HTML: Menghubungkan Struktur dan Aksi

JavaScript (JS) adalah bahasa pemrograman inti dari web modern. Ketika disematkan atau dihubungkan ke dalam dokumen HTML, ia memberikan kemampuan dinamis—membuat halaman web yang semula statis menjadi interaktif dan responsif terhadap tindakan pengguna.

Integrasi JavaScript dalam HTML dapat dilakukan dalam tiga cara utama: secara inline (langsung di dalam tag), internal (di dalam tag <script> pada dokumen HTML), atau eksternal (menghubungkan file .js terpisah). Untuk demonstrasi terbaik pada perangkat mobile, kita akan fokus pada contoh inline dan internal.

1. Contoh JavaScript Inline (Atribut Acara/Events)

Ini adalah cara tercepat untuk menambahkan fungsi kecil langsung ke elemen HTML menggunakan atribut seperti onclick, onmouseover, atau onchange.

A. Mengubah Teks Setelah Diklik

Pada contoh ini, ketika tombol diklik, fungsi JavaScript kecil akan langsung mengubah teks paragraf menggunakan ID elemen.

<p id="salam">Halo! Klik tombol di bawah ini.</p>
<button onclick="ubahSalam()">Klik Saya

<script>
function ubahSalam() {
    document.getElementById('salam').textContent = 'Selamat datang! JavaScript telah bekerja.';
}
</script>

Demonstrasi Langsung:

Halo! Klik tombol di bawah ini.

2. Contoh JavaScript Internal (Tag <script>)

Metode ini menempatkan seluruh kode JavaScript di dalam tag <script> di dalam file HTML Anda (biasanya diletakkan sebelum tag penutup </body> untuk performa loading yang optimal).

B. Kalkulator Sederhana Interaktif

Kita akan menggunakan JavaScript untuk mengambil input dari dua kotak teks dan menampilkan hasilnya di kotak output ketika sebuah tombol ditekan. Ini menunjukkan manipulasi DOM (Document Object Model) dasar.

<label for="angka1">Angka Pertama:
<input type="number" id="angka1" value="10">

<label for="angka2">Angka Kedua:
<input type="number" id="angka2" value="5">

<button onclick="hitungJumlah()">Hitung Penjumlahan

<p>Hasil: <span id="hasil_penjumlahan">0</span></p>

Angka Pertama: Angka Kedua:

Hasil: 0

Mengapa JavaScript Penting dalam HTML?

Tanpa JavaScript, HTML hanya berfungsi sebagai kerangka (struktur) dan CSS hanya mengatur tampilan (gaya). JavaScript mengisi kekosongan fungsionalitas. Ia memungkinkan:

Validasi Formulir: Memeriksa apakah email yang dimasukkan valid sebelum dikirim ke server.
Manipulasi Konten: Menambah, menghapus, atau mengubah elemen halaman secara dinamis tanpa perlu memuat ulang seluruh halaman.
Animasi Kompleks: Membuat efek visual yang lebih canggih daripada yang bisa dicapai hanya dengan CSS.
Interaksi Asinkron (AJAX/Fetch): Mengambil data dari server di latar belakang (misalnya, memuat unggahan media sosial baru) tanpa mengganggu tampilan pengguna.

Memahami bagaimana menyematkan kode JavaScript ke dalam HTML adalah langkah fundamental pertama dalam pengembangan web front-end yang modern. Dengan menguasai manipulasi DOM, Anda dapat mulai membangun pengalaman pengguna yang kaya dan interaktif.