Sign in Subscribe
Javascript

Menulis JavaScript di Browser, Internal vs External

Menulis JavaScript di Browser, Internal vs External
Photo by Firmbee.com / Unsplash

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web lebih interaktif. Dalam pengembangannya, kita bisa menuliskan kode JavaScript langsung di dalam file HTML atau di file terpisah. Artikel ini akan membahas dua metode utama dalam menulis JavaScript di browser, yaitu internal dan external, serta kapan sebaiknya kita menggunakan masing-masing metode.

Metode internal berarti menuliskan kode JavaScript langsung di dalam file HTML menggunakan tag <script>.

Contoh Internal JavaScript

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal JavaScript</title>
    <script>
        function sapaPengguna() {
            alert("Selamat datang di website kami!");
        }
    </script>
</head>
<body onload="sapaPengguna()">
    <h1>Halo, Dunia!</h1>
</body>
</html>

Kelebihan Internal JavaScript

✅ Mudah digunakan untuk skrip kecil dan uji coba cepat.
✅ Tidak memerlukan file tambahan.
✅ Kode tetap berada dalam satu file sehingga lebih simpel untuk halaman kecil.

Kekurangan Internal JavaScript

❌ Sulit dikelola jika kode JavaScript semakin kompleks.
❌ Tidak bisa digunakan ulang di halaman lain.
❌ Bisa memperlambat pemuatan halaman karena browser harus membaca JavaScript setiap kali halaman dimuat.

Metode eksternal berarti menulis kode JavaScript di file terpisah dengan ekstensi .js dan menghubungkannya ke file HTML menggunakan tag <script>.

Contoh External JavaScript

1. File HTML (index.html)

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External JavaScript</title>
    <script src="script.js" defer></script>
</head>
<body>
    <h1>Halo, Dunia!</h1>
    <button onclick="sapaPengguna()">Klik Saya</button>
</body>
</html>

2. File JavaScript (script.js)

function sapaPengguna() {
    alert("Halo! Selamat datang di website kami!");
}

Kelebihan External JavaScript

✅ Memisahkan kode JavaScript dari HTML, membuat kode lebih rapi dan terorganisir.
✅ Bisa digunakan kembali di beberapa halaman web.
✅ Browser dapat menyimpan file JavaScript dalam cache sehingga meningkatkan performa.

Kekurangan External JavaScript

❌ Memerlukan permintaan HTTP tambahan untuk mengambil file .js, yang bisa memperlambat halaman jika tidak dioptimalkan.
❌ Tidak bisa langsung digunakan tanpa memuat file eksternal terlebih dahulu.

Kapan Menggunakan Internal atau External JavaScript?

  • Gunakan Internal JavaScript jika:
    • Kodenya pendek dan hanya digunakan di satu halaman.
    • Membutuhkan eksekusi cepat tanpa file tambahan.
  • Gunakan External JavaScript jika:
    • Kodenya panjang dan kompleks.
    • Ingin menggunakan ulang kode di beberapa halaman.
    • Ingin meningkatkan performa halaman dengan caching.

Kesimpulan

  • Internal JavaScript lebih cocok untuk skrip sederhana dan eksperimen cepat.
  • External JavaScript lebih cocok untuk pengembangan yang lebih besar, karena meningkatkan keterbacaan, pemeliharaan, dan performa situs web.
  • Kombinasi keduanya bisa digunakan, misalnya, untuk menuliskan skrip kecil dalam HTML sementara logika utama diletakkan dalam file eksternal.

Dengan memahami perbedaan ini, kita bisa memilih metode terbaik sesuai kebutuhan proyek kita!

Read next