Halo teman-teman semuanya, setelah kita belajar bagaimana cara mengatur tampilan halaman dengan CSS, sekarang saatnya kita mengenal JavaScript, bahasa pemrograman yang membuat halaman web kita interaktif.
Di artikel ini, kita akan belajar bagaimana cara menghubungkan HTML dengan JavaScript dan membuat interaksi dasar seperti menampilkan pesan atau merespons klik tombol.
Apa Itu JavaScript?
JavaScript adalah bahasa pemrograman yang berjalan di browser dan digunakan untuk menambahkan logika, interaktivitas, dan dinamika pada halaman web.
Kalau HTML adalah struktur, CSS adalah gaya, maka JavaScript adalah otak yang mengatur aksi dan reaksi.
1. Cara Menghubungkan JavaScript ke HTML
Ada 3 cara utama untuk menggunakan JavaScript di HTML:
-
Inline JavaScript
Langsung di atribut HTML, misalnya di event seperti onclick.
<button onclick="alert('Halo teman-teman!')">Klik Aku</button>
Cocok untuk percobaan cepat, tapi sebaiknya tidak digunakan untuk project besar.
-
Internal JavaScript (dalam tag <script>)
JavaScript ditulis langsung di dalam tag <script> di file HTML.
<!DOCTYPE html>
<html>
<head>
<title>Contoh JavaScript</title>
</head>
<body>
<button id="tombol">Klik Aku</button>
<script>
const tombol = document.getElementById('tombol');
tombol.addEventListener('click', function() {
alert('Tombol diklik!');
});
</script>
</body>
</html>
-
External JavaScript (file .js terpisah)
Cara paling dianjurkan: kita tulis JavaScript di file terpisah (misalnya script.js) dan hubungkan ke HTML.
-
HTML:
<script src="script.js"></script>
-
script.js:
document.getElementById('tombol').addEventListener('click', function() {
alert('Halo dari file eksternal!');
});
2. Contoh Interaksi Dasar
Contoh: Menyembunyikan teks saat tombol diklik
<p id="pesan">Ini adalah teks yang bisa disembunyikan.</p>
<button onclick="document.getElementById('pesan').style.display = 'none';">Sembunyikan</button>
Kita bisa mengontrol elemen HTML menggunakan JavaScript dengan DOM (Document Object Model).
3. Struktur Dasar JavaScript
// Variabel
let nama = "Santri Koding";
// Fungsi
function sapa() {
alert("Halo " + nama);
}
// Pemanggilan fungsi
sapa();
Kesimpulan
JavaScript adalah bagian penting dalam dunia web modern. Dengan mengintegrasikan JavaScript ke dalam HTML, kita bisa membuat halaman web yang lebih hidup dan interaktif.
Terima kasih sudah mengikuti seri Belajar HTML Dasar ini! Semoga bermanfaat dan bisa jadi bekal awal dalam membuat website yang interaktif dan dinamis.
Terima Kasih