External JavaScript

Setelah satu halaman hidup, halaman kedua biasanya butuh perilaku yang sama, lalu halaman ketiga. Menyalin-tempel script inline ke setiap halaman mengubah perbaikan kecil menjadi pekerjaan berulang: satu pembenaran harus dilakukan di semua salinan. Pola yang benar adalah memisahkan kode ke berkas .js sendiri, lalu menyambungkannya lewat atribut src.

Berkas eksternal bukan sekadar kerapian. Kode bisa dipakai ulang antar halaman, diunduh sekali lalu disimpan cache oleh browser, dan diuji terpisah dari HTML. Chapter ini memandu pemindahan lengkapnya.

Memisahkan Kode ke Berkas .js #

Kita mulai dari dua berkas JavaScript murni — tanpa tag HTML sama sekali. Berkas pertama memuat data penjualan:

console.log("=== Data penjualan ===");
console.log("Kopi Gayo  - 24 cangkir terjual");
console.log("Teh Melati - 40 cangkir terjual");

Output yang Dihasilkan:

=== Data penjualan ===
Kopi Gayo  - 24 cangkir terjual
Teh Melati - 40 cangkir terjual

Berkas kedua menyusun laporannya:

console.log("=== Laporan harian ===");
console.log("Total pendapatan:", 24 * 18000 + 40 * 12000);

Output yang Dihasilkan:

=== Laporan harian ===
Total pendapatan: 912000

Kedua berkas bisa langsung diuji di terminal dengan node skrip-data.js dan node skrip-utama.js — keluarannya persis seperti ditampilkan di atas. Inilah salah satu manfaat pemisahan: logika murni teruji tanpa membuka browser dan tanpa membuat halaman.

Menyambungkan dengan Atribut src #

Tag <script> dengan atribut src menyebut alamat berkas yang harus dijalankan browser. Kedua berkas di atas kita sambungkan ke sebuah halaman:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Laporan Toko</title>
</head>
<body>
  <h1>Laporan Toko</h1>

  <script src="skrip-data.js"></script>
  <script src="skrip-utama.js"></script>
</body>
</html>

Output yang Dihasilkan (pada tab Console browser):

=== Data penjualan ===
Kopi Gayo  - 24 cangkir terjual
Teh Melati - 40 cangkir terjual
=== Laporan harian ===
Total pendapatan: 912000

Keluaran di tab Console sama dengan menjalankan kedua berkas secara berurutan — dan urutan itu dijamin. Browser mengeksekusi script klasik sesuai urutan tag-nya di dokumen: skrip-utama.js tidak akan berjalan sebelum skrip-data.js selesai.

Mari kita telaah baris demi baris:

1. Baris 8 (<h1>Laporan Toko</h1>): elemen halaman yang ditempatkan sebelum script; sesuai pola chapter Script Tag, elemen yang dibaca script harus muncul lebih dulu di dokumen.
2. Baris 10 (<script src="skrip-data.js"></script>): parser menemui tag, berhenti, mengunduh berkas yang ditunjuk src, mengeksekusinya, lalu melanjutkan pembacaan dokumen.
3. Baris 11 (<script src="skrip-utama.js"></script>): proses yang sama terulang untuk berkas kedua — dieksekusi hanya setelah berkas pertama tuntas.

Cara Browser Memuat Berkas Eksternal #

Perbedaan utama dengan script inline ada di tahap pengunduhan. Untuk script inline, isinya sudah ada di dokumen, jadi eksekusinya langsung. Untuk script eksternal, parser harus menunggu dua hal: unduhan dari jaringan, lalu eksekusi. Alur lengkapnya:

1. Parser menemui <script src="..."> dan berhenti membaca dokumen.
2. Browser mengunduh berkas yang ditunjuk src.
3. Isi berkas dieksekusi sampai selesai.
4. Parser melanjutkan pembacaan dokumen dari posisi terakhir.

Karena tahap 2 menunggu jaringan, tag <script src> di <head> tanpa atribut tambahan adalah penyebab klasik halaman yang lambat tampil. Bayangkan Budi membuka toko daring di jaringan yang lambat: browser menemui script laporan sebesar ratusan kilobyte di <head>, berhenti membaca dokumen, dan menunggu unduhan selesai. Selama menunggu itu, halaman masih kosong — teks, tombol, dan gambar belum ter-render. Semakin banyak script yang disambungkan, semakin lama masa tunggu tersebut. Chapter berikutnya (defer dan async) mengubah perilaku ini; untuk sekarang kita menaruh script di akhir <body> seperti pada halaman-toko.html.

Menulis Path pada src #

Nilai src adalah path relatif terhadap halaman yang menyebutnya:

• src="skrip-data.js" — berkas berada di folder yang sama dengan file HTML.
• src="js/skrip-data.js" — berkas berada di subfolder js di dalam folder halaman.
• src="/js/skrip-data.js" — path absolut dari akar situs; dipakai saat struktur folder proyek sudah tetap.

Salah path tidak selalu terasa saat menulis, tetapi gejalanya jelas di DevTools: tab Console menampilkan galat 404 untuk berkas yang tidak ditemukan, dan tab Network mencantumkan permintaan yang gagal. Alat yang kita kenal di chapter Browser DevTools langsung berguna di sini.

Satu kebiasaan kecil yang mencegah banyak galat path: tulis nama berkas secara konsisten huruf kecil dengan tanda hubung, seperti skrip-data.js. Server berkas sering membedakan huruf besar dan kecil — Skrip-Data.js dan skrip-data.js dianggap dua berkas berbeda — sehingga ketidakseragaman penamaan mudah berubah menjadi 404 yang membingungkan.

Struktur Folder yang Terbentuk #

Dengan pemisahan ini, folder proyek toko kita berisi pasangan yang jelas: satu berkas HTML dan dua berkas JavaScript di folder yang sama:

toko/
├── halaman-toko.html
├── skrip-data.js
└── skrip-utama.js

Saat proyek tumbuh, konvensi yang umum adalah memindahkan berkas JavaScript ke subfolder js/ dan menyesuaikan src menjadi js/skrip-data.js — salah satu bentuk path yang dibahas di atas. Langkah penataan seperti ini murah berkat pemisahan tadi: kode di dalam berkas tidak perlu diubah sama sekali, cukup nilai src pada setiap halaman yang disesuaikan.

Aturan Baku: Berkas .js Berisi JavaScript Murni #

Perbandingan singkat dengan script inline:

Keuntungan yang Kita Peroleh #

Berkas eksternal membawa empat manfaat yang terasa sejak dini:

• Dipakai ulang: satu berkas disambungkan ke banyak halaman; perbaikan cukup dilakukan sekali.
• Cache: setelah unduhan pertama, browser menyimpan salinan berkas; halaman berikutnya memakainya tanpa mengunduh lagi. Buktinya ada di tab Network — kolom Size menandai sumber cache untuk permintaan kedua.
• HTML tetap bersih: struktur halaman tidak bercampur dengan logika program, sehingga keduanya lebih mudah dibaca dan dirawat.
• Jalan menuju modul: pemisahan berkas ini adalah fondasi sistem module JavaScript yang dibahas di section Modules.

Manfaat pemakaian ulang langsung terasa pada proyek kecil sekalipun. Bila toko kita kelak punya halaman kedua — misalnya halaman-laporan.html yang menampilkan ringkasan mingguan — berkas skrip-data.js yang sama cukup disambungkan sekali lagi lewat tag <script src>. Perbaikan rumus pendapatan di skrip-utama.js otomatis berlaku untuk kedua halaman, tanpa menyentuh HTML mana pun.

Dengan berkas eksternal, struktur proyek kita kini terdiri atas HTML sebagai kerangka dan .js sebagai isi program. Kelemahan terakhir pola <script src> masih tersisa: parser berhenti menunggu setiap unduhan. Chapter berikutnya menutup celah itu dengan atribut defer dan async.

console.log("=== Data penjualan ===");
console.log("Kopi Gayo  - 24 cangkir terjual");
console.log("Teh Melati - 40 cangkir terjual");

console.log("=== Laporan harian ===");
console.log("Total pendapatan:", 24 * 18000 + 40 * 12000);