Baricode LMS - Cara Menyisipkan JavaScript

Cara Menyisipkan JavaScript 🔗

Ada tiga cara untuk menyisipkan kode JavaScript ke dalam dokumen HTML. Masing-masing memiliki kegunaan dan situasi terbaik untuk digunakan.

1. Inline JavaScript

Inline JavaScript ditulis langsung di atribut event HTML:

<button onclick="alert('Tombol diklik!')">Klik Aku</button>
<input type="text" onchange="console.log(this.value)">
<div onmouseover="this.style.background='yellow'">Hover Aku</div>

Kelebihan:

Sederhana dan langsung terlihat
Cocok untuk demo atau pengujian cepat

Kekurangan:

Mencampur HTML dan JavaScript — kode jadi susah dibaca
Tidak bisa digunakan ulang
Sangat sulit dikelola di proyek besar
Bermasalah dengan Content Security Policy (keamanan)

2. Internal JavaScript

JavaScript ditulis di dalam tag <script> langsung di file HTML:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Internal JavaScript</title>
</head>
<body>
  <h1 id="judul">Halo!</h1>
  <button id="tombol">Ganti Teks</button>

  <!-- Script di akhir body — cara yang benar -->
  <script>
    const tombol = document.getElementById('tombol');
    const judul = document.getElementById('judul');

    tombol.addEventListener('click', function() {
      judul.textContent = 'Teks Sudah Diganti!';
    });
  </script>
</body>
</html>

Mengapa <script> di bagian akhir <body>?

Jika <script> diletakkan di <head>, JavaScript dieksekusi sebelum elemen HTML dimuat, sehingga getElementById tidak akan menemukan elemen:

<head>
  <script>
    // ❌ SALAH — elemen belum ada saat ini dijalankan
    document.getElementById('tombol').addEventListener('click', function() {});
  </script>
</head>
<body>
  <button id="tombol">Tombol</button>
</body>

Kelebihan:

Tidak perlu file terpisah
CSS berlaku untuk seluruh elemen di satu halaman
Cocok untuk prototype atau halaman tunggal

Kekurangan:

Tidak bisa digunakan di halaman lain
File HTML menjadi besar dan campur aduk

3. External JavaScript

JavaScript ditulis di file .js terpisah, lalu dihubungkan ke HTML menggunakan atribut src pada tag <script>:

File: index.html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>External JavaScript</title>
</head>
<body>
  <h1 id="judul">Selamat Datang</h1>
  <button id="tombol">Klik Aku</button>

  <!-- Link ke file JavaScript eksternal -->
  <script src="script.js"></script>
</body>
</html>

File: script.js

const tombol = document.getElementById('tombol');
const judul = document.getElementById('judul');

tombol.addEventListener('click', function() {
  judul.textContent = 'Halo dari file eksternal!';
  judul.style.color = '#3b82f6';
});

Kelebihan:

Satu file JS bisa dipakai di banyak halaman HTML
Pemisahan bersih antara HTML dan JavaScript
Browser menyimpan file JS di cache — lebih cepat
Mudah dikelola dan dipelihara

Kekurangan:

Butuh request HTTP tambahan
Jika file JS gagal dimuat, fitur interaktif tidak berjalan

Atribut defer dan async

Untuk file JS di <head>, gunakan atribut defer atau async agar tidak memblokir pemuatan HTML:

<head>
  <!-- defer: diunduh paralel, dieksekusi SETELAH HTML selesai dimuat -->
  <script src="script.js" defer></script>

  <!-- async: diunduh paralel, dieksekusi SEGERA setelah selesai unduh -->
  <script src="analytics.js" async></script>
</head>

Atribut	Unduh	Eksekusi	Urutan
(tanpa atribut)	Blokir HTML	Langsung	Berurutan
`defer`	Paralel	Setelah HTML selesai	Berurutan
`async`	Paralel	Segera selesai unduh	Tidak dijamin

Rekomendasi:

Gunakan defer untuk script yang bergantung pada DOM (paling umum)
Gunakan async untuk script independen (analytics, ads)
Atau letakkan <script> di akhir </body> (cara klasik)

Perbandingan Ketiga Metode

Metode	Lokasi	Cakupan	Rekomendasi
Inline	Di atribut event HTML	Satu elemen	Hindari
Internal	Di dalam `<script>`	Satu halaman	Prototype/demo
External	File `.js` terpisah	Seluruh situs	Selalu gunakan ini

💡 Tips: Selalu gunakan External JavaScript untuk proyek nyata. Letakkan <script src="script.js"> di bagian akhir <body> atau gunakan atribut defer di <head>. Kebiasaan ini membuat kode lebih terorganisir dan performa halaman lebih optimal. 🚀

Cara Menyisipkan JavaScript

Cara Menyisipkan JavaScript 🔗

1. Inline JavaScript

2. Internal JavaScript

3. External JavaScript

Atribut defer dan async

Perbandingan Ketiga Metode

Informasi Kursus

Pelajaran dalam Kategori Ini