JavaScript dan HTML: Cara Kerja, Hubungan, dan Contoh Penerapannya
Saat pertama kali belajar web development, saya sempat bingung membedakan HTML dan JavaScript. Keduanya sering muncul bersamaan, tapi fungsinya ternyata sangat berbeda. Setelah sering ngoding dan trial error, barulah saya benar-benar paham bagaimana HTML dan JavaScript saling bekerja sama membangun sebuah website.
Di artikel ini, kita akan bahas dari dasar sampai contoh sederhana agar kamu tidak bingung lagi.
Apa Itu HTML?
HTML (HyperText Markup Language) adalah kerangka dasar sebuah halaman web.
HTML digunakan untuk:
- Membuat struktur halaman
- Menampilkan teks, gambar, tombol, link
- Menentukan elemen seperti header, paragraf, dan form
Contoh HTML Sederhana
JavaScript
Html
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<h1>Hello World</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>
Tanpa HTML, browser tidak tahu apa yang harus ditampilkan.
Apa Itu JavaScript?
JavaScript adalah bahasa pemrograman yang membuat website menjadi interaktif dan dinamis.
JavaScript digunakan untuk:
- Merespons klik tombol
- Mengubah isi HTML
- Menampilkan popup
- Validasi form
- Membuat animasi
Contoh JavaScript Sederhana
JavaScript
alert("Halo, selamat datang!");
Saat pertama kali mencoba ini, saya langsung sadar:
JavaScript adalah “nyawa” interaksi di website.
Hubungan JavaScript dan HTML
HTML dan JavaScript tidak bisa dipisahkan dalam web modern.
- HTML → Struktur
- CSS → Tampilan
- JavaScript → Interaksi
JavaScript bekerja dengan cara mengontrol dan memanipulasi elemen HTML.
Ilustrasi Sederhana
Bayangkan website seperti rumah:
- HTML = rangka rumah
- CSS = cat & dekorasi
- JavaScript = listrik & alat elektronik
Cara JavaScript Berinteraksi dengan HTML
JavaScript berinteraksi dengan HTML melalui DOM (Document Object Model).
Contoh Mengubah HTML dengan JavaScript
Html
<p id="teks">Halo</p>
<button onclick="ubahTeks()">Klik Saya</button>
<script>
function ubahTeks() {
document.getElementById("teks").innerHTML = "Teks Berubah!";
}
</script>
Saat tombol diklik, JavaScript:
- Mencari elemen HTML
- Mengubah isinya
- Browser menampilkan perubahan secara langsung
Cara Menyisipkan JavaScript ke dalam HTML
Ada 3 cara umum menyisipkan JavaScript ke HTML.
1. JavaScript di dalam Tag <script>
Html
<script>
console.log("Hello JavaScript");
</script>
2. JavaScript di File Terpisah
Html
<script src="script.js"></script>
Cara ini paling direkomendasikan saat proyek mulai besar.
3. JavaScript Langsung di Atribut HTML
Html
<button onclick="alert('Halo!')">Klik</button>
Kesalahan Umum Pemula Saat Menggabungkan HTML dan JavaScript
Berdasarkan pengalaman pribadi, ini beberapa kesalahan yang sering terjadi:
JavaScript Dijalanakan Sebelum HTML Siap
Solusi:
Html
<script>
document.addEventListener("DOMContentLoaded", function() {
// kode JS
});
</script>
Salah ID atau Nama Elemen
JavaScript case-sensitive, jadi:
Html
id="Teks"
JavaScript
getElementById("teks")
Kenapa Harus Paham HTML Sebelum JavaScript?
Tanpa HTML:
- JavaScript tidak punya objek untuk dikontrol
- Sulit memahami DOM
- Debugging jadi membingungkan
Itulah kenapa di roadmap ini, HTML dan JavaScript dipelajari beriringan.
Penutup
JavaScript dan HTML adalah fondasi utama web development.
HTML membentuk struktur, JavaScript memberi interaksi.
Kalau kamu sudah paham hubungan keduanya:
- Belajar DOM jadi lebih mudah
- Ngoding terasa lebih masuk akal
- Tidak sekadar copy-paste kode
Di artikel selanjutnya, kita akan mulai Keyword Penting JavaScript yang Wajib Dipahami