HTML Dasar #26 - Cara Menambahkan JavaScript ke HTML (Inline, Internal, External)

Setelah kita belajar HTML (struktur) dan CSS (tampilan), sekarang saatnya mengenal JavaScript yang membuat website menjadi interaktif. JavaScript adalah bahasa pemrograman yang berjalan di browser dan bisa merespon aksi pengguna seperti klik, ketik, atau gerakan mouse.

Sama seperti CSS, ada 3 cara untuk menambahkan JavaScript ke HTML. Mari kita pelajari satu per satu!

Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman yang membuat halaman web hidup dan interaktif. Tanpa JavaScript, website hanya bisa menampilkan konten statis (seperti dokumen). Dengan JavaScript, website bisa:

Menampilkan alert / peringatan
Mengubah konten halaman tanpa reload
Merespon klik tombol
Memvalidasi form sebelum dikirim
Membuat animasi dan efek interaktif

Analogi Sederhana:
- HTML = Kerangka rumah (pondasi, dinding, atap)
- CSS = Cat dan dekorasi (membuat rumah cantik)
- JavaScript = Listrik dan peralatan elektronik (membuat rumah hidup)

Ringkasan Tiga Cara Menambahkan JavaScript

Metode	Cara Penulisan	Cakupan	Kapan Pakai?
Inline JavaScript	Atribut event seperti `onclick` di elemen HTML	1 elemen saja	Testing cepat, event sederhana
Internal JavaScript	Tag `<script>` di dalam `<head>` atau `<body>`	1 halaman HTML	Website 1 halaman, prototipe
External JavaScript	File `.js` terpisah, dihubungkan dengan `<script src="...">`	Seluruh halaman website	Website profesional (paling disarankan)

1. Inline JavaScript (JavaScript Langsung di Elemen)

Inline JavaScript ditulis langsung di atribut event HTML seperti onclick, onmouseover, onchange, dll. Ini cara paling cepat tapi paling tidak disarankan untuk kode yang kompleks.

Contoh Inline JavaScript:

<button onclick="alert('Halo! Kamu mengklik tombol!')">
    Klik Aku
</button>

<p onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
    Hover mouse ke teks ini!
</p>

Hasilnya:

Hover mouse ke teks ini!

Klik tombol untuk melihat alert. Hover ke teks untuk mengubah warna.

Kekurangan Inline JavaScript:

Sulit di-maintenance (setiap elemen harus diedit satu per satu)
Tidak bisa digunakan ulang (reusable)
Membuat HTML jadi berantakan dan sulit dibaca
Campuran HTML dan JavaScript dalam satu tempat

Gunakan inline JavaScript hanya untuk: testing cepat atau event yang sangat sederhana.

2. Internal JavaScript (JavaScript di Dalam File HTML)

Internal JavaScript ditulis di dalam tag <script> yang diletakkan di <head> atau di akhir <body>. Ini lebih rapi daripada inline karena bisa menulis fungsi yang lebih kompleks.

Contoh Internal JavaScript:

<!DOCTYPE html>
<html>
<head>
    <script>
        function tampilkanPesan() {
            alert('Halo dari Internal JavaScript!');
        }
        
        function ubahWarna() {
            document.getElementById('teks').style.color = 'blue';
        }
    </script>
</head>
<body>
    <button onclick="tampilkanPesan()">Klik Saya</button>
    <button onclick="ubahWarna()">Ubah Warna Teks</button>
    <p id="teks">Teks ini akan berubah warna.</p>
</body>
</html>

Hasilnya:

Teks ini akan berubah warna.

Kelebihan Internal JavaScript:

Lebih rapi daripada inline JavaScript
Bisa menulis fungsi yang kompleks
Cocok untuk website 1 halaman
Tidak perlu file tambahan

Kekurangan Internal JavaScript:

Tidak bisa digunakan di halaman lain (harus copy-paste)
Membuat file HTML semakin besar

3. External JavaScript (File JS Terpisah) - PALING DISARANKAN

External JavaScript adalah cara profesional dan paling disarankan. Kita menulis JavaScript di file terpisah dengan ekstensi .js, lalu menghubungkannya ke HTML menggunakan tag <script src="...">.

Langkah-langkah:

1. Buat file HTML (index.html):

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Website dengan External JavaScript</title>
</head>
<body>
    <h1>Selamat Datang</h1>
    <button id="myButton">Klik Saya</button>
    <p id="message"></p>
    
    <script src="script.js"></script>
</body>
</html>

2. Buat file script.js di folder yang sama:

// script.js
// Menunggu halaman selesai dimuat
document.addEventListener('DOMContentLoaded', function() {
    // Ambil elemen tombol
    const button = document.getElementById('myButton');
    const message = document.getElementById('message');
    
    // Tambahkan event klik
    button.addEventListener('click', function() {
        message.innerHTML = 'Tombol telah diklik! Terima kasih.';
        message.style.color = 'green';
        message.style.fontWeight = 'bold';
    });
});

Hasilnya (setelah dihubungkan):

Selamat Datang

Klik tombol di atas (simulasi external JS)

Kelebihan External JavaScript (WAJIB UNTUK WEBSITE PROFESIONAL):

Satu file JS bisa digunakan untuk banyak halaman (reusable)
HTML jadi lebih bersih dan mudah dibaca
Loading lebih cepat karena browser menyimpan cache file JS
Memudahkan tim developer bekerja (HTML dan JS terpisah)
Kode lebih terorganisir dan mudah di-maintenance

Posisi Penulisan Tag Script

Posisi tag <script> mempengaruhi kapan JavaScript dijalankan.

Posisi	Contoh	Penjelasan
Di dalam <head>	`<head><script>...</script></head>`	Dijalankan sebelum halaman dimuat (belum bisa akses elemen body)
Di akhir <body>	`<body>...<script>...</script></body>`	Paling disarankan! Dijalankan setelah semua elemen dimuat
Dengan atribut defer	`<script src="..." defer>`	Dijalankan setelah HTML selesai diparse
Dengan atribut async	`<script src="..." async>`	Dijalankan bersamaan dengan loading HTML (tidak berurutan)

Rekomendasi Posisi Script:

Untuk pemula, letakkan <script> di akhir <body> sebelum </body>
Ini memastikan semua elemen HTML sudah dimuat sebelum JavaScript dijalankan
Alternatif: gunakan defer pada external script

Perbandingan Ketiga Metode

Aspek	Inline JS	Internal JS	External JS
Tempat penulisan	Atribut event	Tag `<script>` di HTML	File `.js` terpisah
Cakupan	1 elemen	1 halaman	Banyak halaman
Dapat digunakan ulang	Tidak	Tidak (halaman lain)	Ya
Maintenance	Sulit	Sedang	Mudah
Rekomendasi	Hanya untuk testing	Website 1 halaman	Website profesional

Contoh Proyek Kecil: Counter Sederhana

Berikut contoh website interaktif dengan external JavaScript:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Counter Sederhana</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #f0f4f8;
        }
        .counter-card {
            background: white;
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .number {
            font-size: 64px;
            font-weight: bold;
            color: #3b82f6;
            margin: 20px 0;
        }
        button {
            background: #3b82f6;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 0 5px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background: #2563eb;
        }
        .reset {
            background: #ef4444;
        }
        .reset:hover {
            background: #dc2626;
        }
    </style>
</head>
<body>

    <div class="counter-card">
        <h2>Simple Counter</h2>
        <div class="number" id="counterValue">0</div>
        <div>
            <button id="decrementBtn">- Kurang</button>
            <button id="incrementBtn">Tambah +</button>
            <button id="resetBtn" class="reset">Reset</button>
        </div>
    </div>

    <script>
        let count = 0;
        const counterElement = document.getElementById('counterValue');
        const decrementBtn = document.getElementById('decrementBtn');
        const incrementBtn = document.getElementById('incrementBtn');
        const resetBtn = document.getElementById('resetBtn');

        function updateDisplay() {
            counterElement.textContent = count;
        }

        incrementBtn.addEventListener('click', function() {
            count++;
            updateDisplay();
        });

        decrementBtn.addEventListener('click', function() {
            count--;
            updateDisplay();
        });

        resetBtn.addEventListener('click', function() {
            count = 0;
            updateDisplay();
        });
    </script>

</body>
</html>

Hasil counter interaktif:

Simple Counter

Event JavaScript yang Sering Digunakan

Event	Kapan Terjadi?	Contoh
`click`	Saat elemen diklik	Tombol, link, gambar
`mouseover`	Saat mouse berada di atas elemen	Efek hover
`mouseout`	Saat mouse meninggalkan elemen	Mengembalikan efek hover
`change`	Saat nilai input berubah	Form, checkbox, select
`submit`	Saat form di-submit	Validasi form
`keyup`	Saat tombol keyboard dilepaskan	Search live
`DOMContentLoaded`	Saat HTML selesai dimuat	Menjalankan kode setelah halaman siap

Kesalahan Umum Pemula

Lupa menutup tag <script> → JavaScript tidak akan berjalan.
Path file JS salah saat menggunakan src → Pastikan src="script.js" sesuai lokasi file.
Mencoba akses elemen sebelum elemen dimuat → Letakkan script di akhir body atau gunakan DOMContentLoaded.
Lupa tanda kutip pada string → alert(Halo) (salah) vs alert('Halo') (benar).
Typo pada nama function atau variable → JavaScript case-sensitive, myFunction berbeda dengan myfunction.
Lupa menambahkan id pada elemen yang ingin diakses → document.getElementById tidak akan menemukan elemen.

Debugging Tips:

Buka Developer Tools (F12) → tab Console → lihat pesan error
Gunakan console.log('pesan') untuk debugging
Untuk external JS, cek tab Network → apakah file .js berhasil dimuat (status 200)
Periksa apakah ada typo di nama file, function, atau variable

Latihan Singkat

Buat file HTML baru dengan judul "Latihan JavaScript"
Buat inline JavaScript pada tombol yang menampilkan alert "Halo!"
Buat internal JavaScript dengan fungsi yang mengubah teks paragraf menjadi "Teks telah diubah" saat tombol diklik
Buat file external JavaScript bernama script.js dan hubungkan ke HTML. Di file JS, buat fungsi yang menampilkan alert "External JS berhasil!"
Simpan dan buka di browser, pastikan semua JavaScript berfungsi

Intisari Hari Ini

Inline JavaScript → atribut event di elemen (tidak disarankan untuk proyek besar)
Internal JavaScript → tag <script> di dalam HTML (cakupan 1 halaman)
External JavaScript → file .js terpisah + tag <script src="..."> (paling disarankan)
Letakkan <script> di akhir <body> agar elemen sudah dimuat sebelum JavaScript dijalankan
Gunakan document.getElementById() untuk mengakses elemen HTML
Gunakan addEventListener() untuk menambahkan event (lebih baik daripada atribut onclick)

Tantangan Akhir Pekan: Buat sebuah Form Validasi Sederhana dengan JavaScript! Persyaratan:

Form memiliki field: Nama, Email, Password
Semua field wajib diisi (required) dengan validasi JavaScript
Email harus mengandung karakter '@' dan '.'
Password minimal 8 karakter
Jika validasi gagal, tampilkan pesan error di bawah field masing-masing
Jika validasi berhasil, tampilkan alert "Pendaftaran berhasil!"
Gunakan External JavaScript (file terpisah)
Gunakan CSS untuk styling form yang menarik

Bonus: Tambahkan validasi real-time (saat user mengetik, langsung divalidasi).

Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #25 - Membuat Navigasi Bar (Navbar) Sederhana dengan CSS
Artikel Selanjutnya: HTML Dasar #27 - Menampilkan Alert dan Prompt dengan JavaScript