PENERAPAN JAVASCRIPT ( JS ) PADA PROGRAM

JavaScript (JS) adalah bahasa pemrograman yang digunakan untuk membuat halaman HTML menjadi lebih interaktif dan dinamis. Jika HTML berfungsi untuk membangun struktur web dan CSS untuk mengatur tampilannya, maka JavaScript berperan sebagai “otak” yang mengatur perilaku dan fungsi interaktif di dalam web tersebut, seperti menampilkan pop-up, memvalidasi formulir, atau mengubah konten tanpa perlu memuat ulang halaman.

Secara umum, ada tiga cara utama untuk menghubungkan atau menuliskan JavaScript di dalam dokumen HTML:

---

1. JavaScript Internal (Menggunakan Tag <script>)

Cara ini dilakukan dengan menuliskan langsung kode JavaScript di dalam file HTML menggunakan tag <script>. Tag ini bisa diletakkan di dalam bagian <head> or di akhir bagian <body>. Menempatkannya di akhir <body> sangat direkomendasikan agar performa loading halaman web menjadi lebih cepat.

Contoh Penggunaan:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh JS Internal</title>
</head>
<body>

    <h2 id="judul">Teks Asli</h2>
    <button onclick="ubahTeks()">Klik untuk Mengubah</button>

    <!-- JavaScript ditulis di dalam tag <script> sebelum penutup body -->
    <script>
        function ubahTeks() {
            // Mengubah konten elemen HTML berdasarkan ID
            document.getElementById("judul").innerHTML = "Hebat! Teks Berhasil Diubah.";
        }
    </script>

</body>
</html>

2. JavaScript Eksternal (Menggunakan File .js Terpisah)

Cara terbaik untuk proyek skala besar adalah dengan memisahkan kode JavaScript ke dalam file tersendiri dengan ekstensi .js. Metode ini membuat kode HTML menjadi lebih bersih, rapi, dan file JavaScript tersebut bisa digunakan kembali di halaman HTML lain.

Langkah 1: Buat file JavaScript, beri nama skrip.js, lalu tulis kodenya:

function sapaPengguna() {
    alert("Halo! Selamat datang di tutorial JavaScript.");
}

Langkah 2: Hubungkan file tersebut ke dalam file HTML menggunakan atribut src pada tag <script>:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh JS Eksternal</title>
</head>
<body>

    <h2>Belajar JS Eksternal</h2>
    <!-- Memanggil fungsi dari file eksternal saat tombol diklik -->
    <button onclick="sapaPengguna()">Klik Saya</button>

    <!-- Menghubungkan file eksternal -->
    <script src="skrip.js"></script>

</body>
</html>

3. JavaScript Inline (Langsung pada Atribut HTML)

JavaScript ditulis langsung di dalam atribut event milik elemen HTML tertentu, seperti onclick, onmouseover, dan sejenisnya. Cara ini hanya disarankan untuk kode yang sangat pendek karena jika terlalu sering digunakan akan membuat kode HTML menjadi berantakan (dirty code).

Contoh Penggunaan:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh JS Inline</title>
</head>
<body>

    <h2>Contoh Tombol dengan JS Inline</h2>
    <!-- Kode JS ditulis langsung di dalam atribut onclick -->
    <button onclick="alert('Ini adalah pop-up dari JavaScript Inline!')">Klik Di Sini</button>

</body>
</html>

---

Rangkuman Perbandingan

Metode	Lokasi Penulisan	Kelebihan	Kekurangan
Internal	Di dalam tag <script> pada HTML	Cocok untuk skrip sederhana khusus satu halaman saja.	Membuat file HTML menjadi lebih panjang dan berat jika kodenya banyak.
Eksternal	Di file terpisah bertipe .js	HTML menjadi rapi, kode reusable (bisa dipakai berulang kali), dan web loading lebih efisien.	Memerlukan koneksi atau pemanggilan file tambahan.
Inline	Langsung di atribut tag HTML	Sangat praktis untuk fungsi instan atau sekadar pengujian cepat.	Membuat HTML kotor/berantakan dan sulit dirawat (maintenance).