Masrizky - Jika kamu sedang belajar pemrograman web, dua hal yang tidak bisa dipisahkan adalah HTML dan JavaScript. HTML berfungsi sebagai kerangka halaman web, sedangkan JavaScript berperan menambahkan interaktivitas agar website terasa lebih hidup dan dinamis.
Namun, banyak pemula yang masih bingung: bagaimana sebenarnya cara menulis kode JavaScript di dalam HTML?
Nah, artikel ini akan membahas 4 cara utama menulis JavaScript pada HTML yang wajib kamu ketahui jika ingin menjadi web developer handal. Kita juga akan membahas contoh kode, kelebihan, serta kapan waktu yang tepat menggunakan masing-masing metode.
Apa Itu JavaScript dalam HTML?
Sebelum membahas lebih jauh, kamu perlu tahu bahwa JavaScript bukanlah bagian dari HTML, melainkan bahasa pemrograman terpisah yang bisa “disisipkan” ke dalam dokumen HTML.
JavaScript digunakan untuk membuat halaman web bisa:
-
Merespons klik pengguna
-
Menampilkan pop-up atau notifikasi
-
Mengubah konten halaman tanpa memuat ulang (reload)
-
Membuat animasi dan efek visual
-
Mengambil data dari server secara real-time (AJAX)
Untuk menjalankan semua itu, browser membutuhkan cara untuk membaca kode JavaScript. Di sinilah peran tag <script> dalam HTML.
1. Menulis JavaScript Langsung di Dalam Tag <script>
Cara paling dasar dan umum digunakan adalah menuliskan kode JavaScript langsung di dalam dokumen HTML menggunakan tag <script>.
Contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Contoh JavaScript Langsung</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<script>
alert("Selamat datang di halaman belajar JavaScript!");
console.log("Kode ini berjalan di dalam HTML!");
</script>
</body>
</html>
Ketika halaman dijalankan, JavaScript di dalam tag <script> akan langsung dieksekusi oleh browser.
Kelebihan:
-
Mudah dipahami dan digunakan untuk percobaan singkat.
-
Tidak memerlukan file tambahan.
-
Cocok untuk pemula yang baru belajar dasar JavaScript.
Kekurangan:
-
Sulit dikelola jika kode JavaScript panjang.
-
Tidak direkomendasikan untuk proyek besar karena membuat HTML berantakan.
Kapan Digunakan:
Gunakan cara ini untuk belajar dasar JavaScript atau membuat script sederhana seperti notifikasi, validasi form, atau pengujian cepat.
2. Menulis JavaScript di File Terpisah (Eksternal)
Cara kedua yang lebih profesional adalah menulis kode JavaScript di file terpisah, lalu menghubungkannya ke HTML menggunakan atribut src pada tag <script>.
Contohnya:
Langkah 1: Buat file JavaScript
Buat file bernama script.js berisi kode berikut:
function sapa() {
alert("Halo! Ini pesan dari file eksternal JavaScript.");
}
Langkah 2: Hubungkan file JS ke HTML
<!DOCTYPE html>
<html>
<head>
<title>Contoh JavaScript Eksternal</title>
</head>
<body>
<button onclick="sapa()">Klik Aku</button>
<script src="script.js"></script>
</body>
</html>
Kelebihan:
-
Kode lebih rapi dan mudah dikelola.
-
Dapat digunakan ulang di banyak halaman (reusable).
-
HTML lebih bersih dan terstruktur.
Kekurangan:
-
Memerlukan file tambahan, jadi sedikit lebih kompleks.
-
Butuh koneksi internet (jika file JS disimpan di server eksternal).
Kapan Digunakan:
Gunakan cara ini untuk proyek profesional, website besar, atau aplikasi web agar kode JavaScript mudah dikelola dan diperbarui.
3. Menulis JavaScript di Dalam Atribut HTML (Inline Script)
Selain di dalam tag <script>, JavaScript juga bisa ditulis langsung di dalam atribut HTML, biasanya pada elemen yang memiliki aksi tertentu seperti onclick, onmouseover, onchange, dan sebagainya.
Contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Inline JavaScript</title>
</head>
<body>
<button onclick="alert('Tombol telah diklik!')">Klik Aku</button>
</body>
</html>
Ketika tombol diklik, JavaScript akan dijalankan secara langsung.
Kelebihan:
-
Sangat cepat dan sederhana.
-
Tidak membutuhkan tag
<script>. -
Cocok untuk percobaan kecil atau fitur ringan.
Kekurangan:
-
Tidak disarankan untuk proyek besar karena sulit dikelola.
-
Sulit melakukan debug atau pengembangan lanjutan.
-
Memisahkan logika dan tampilan menjadi tidak rapi (melanggar prinsip clean code).
Kapan Digunakan:
Cocok untuk website statis atau fungsi sederhana seperti notifikasi cepat, menampilkan tanggal, atau mengubah tampilan tombol.
4. Menulis JavaScript di Dalam Tag <head> atau di Akhir <body>
Selain cara penulisan, posisi penempatan kode JavaScript dalam HTML juga penting. Umumnya, kode JavaScript bisa ditempatkan di dua tempat:
a. Di Dalam Tag <head>
<!DOCTYPE html>
<html>
<head>
<script>
function tampilPesan() {
alert("JavaScript di dalam tag head!");
}
</script>
</head>
<body>
<button onclick="tampilPesan()">Klik Saya</button>
</body>
</html>
Namun, JavaScript yang ditempatkan di <head> akan dijalankan sebelum halaman selesai dimuat, sehingga berpotensi memperlambat tampilan awal.
b. Di Akhir Tag <body>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript di Akhir Body</title>
</head>
<body>
<h1>Belajar JavaScript di HTML</h1>
<button onclick="tampilPesan()">Klik Saya</button>
<script>
function tampilPesan() {
alert("JavaScript dijalankan setelah halaman dimuat!");
}
</script>
</body>
</html>
Menaruh script di bagian bawah lebih disarankan karena browser akan memuat seluruh elemen HTML terlebih dahulu sebelum menjalankan kode JavaScript.
Kelebihan:
-
Membuat halaman lebih cepat dimuat.
-
Menghindari error akibat elemen HTML yang belum siap.
Kapan Digunakan:
Gunakan cara ini untuk semua website modern yang membutuhkan performa cepat dan stabil.
Tips Penting Saat Menulis JavaScript pada HTML
Agar hasil koding lebih optimal, perhatikan beberapa hal berikut:
-
✅ Gunakan komentar (
//atau/* */) untuk menjelaskan bagian kode, terutama jika kamu bekerja dalam tim. -
⚡ Letakkan script di akhir body untuk mengoptimalkan kecepatan loading halaman.
-
🔍 Gunakan console log (
console.log()) untuk mengecek dan menguji hasil kode tanpa pop-up. -
🧩 Pisahkan file JavaScript eksternal jika proyek mulai besar agar mudah di-maintain.
-
🧠 Gunakan nama variabel dan fungsi yang jelas agar mudah dibaca dan dipahami.
Kesimpulan
Sekarang kamu sudah tahu 4 cara menulis kode JavaScript pada HTML yang wajib dikuasai oleh setiap pengembang web, yaitu:
-
Menulis langsung di dalam tag
<script> -
Menggunakan file JavaScript eksternal
-
Menulis inline script di atribut HTML
-
Menempatkan script di dalam
<head>atau di akhir<body>
Setiap metode memiliki kelebihan dan kekurangan masing-masing. Untuk pemula, menulis langsung di dalam HTML adalah cara terbaik untuk belajar dasar. Namun untuk proyek besar, penggunaan file eksternal akan jauh lebih efisien dan profesional.
Dengan memahami cara-cara ini, kamu akan lebih mudah mengembangkan halaman web interaktif dan responsif menggunakan JavaScript.
Jadi, mulai sekarang, cobalah praktikkan satu per satu metode di atas agar kamu benar-benar paham bagaimana JavaScript bekerja di dalam HTML. 🌐💻
Education
Work
My Skills
