Intern eksternal JavaScript: Belajar dengan Contoh

Oleh: James Hartman James Hartman
Hours Updated

⚡ Ringkasan Cerdas

Internal dan Eksternal JavaScript menjelaskan dua penempatan yang didukung untuk kode skrip di dalam proyek web. Artikel ini membandingkan kedua pendekatan tersebut, menunjukkan contoh yang berfungsi, menjelaskan tautan yang benar dengan async dan defer, dan menyatakan kapan setiap penempatan memberikan pemeliharaan dan kinerja yang lebih baik.

  • 📄 Penempatan Internal: Code Terletak di antara tag skrip di dalam dokumen HTML dan dimuat bersamaan dengan halaman pemiliknya.
  • ️ Penempatan Eksternal: Code tersimpan dalam file .js terpisah yang dirujuk melalui atribut src, sehingga banyak halaman berbagi satu sumber yang sama.
  • 🔗 Aturan Penautan: Tag skrip eksternal harus selalu ditutup, dan jalur src akan diselesaikan relatif terhadap dokumen HTML kecuali jika jalur lengkap diberikan.
  • ⚙️ Kontrol Pemuatan: Atribut `defer` menjalankan file setelah proses parsing HTML selesai, sedangkan `async` menjalankannya segera setelah pengunduhan selesai.
  • 🚀 Manfaat Caching: File eksternal disimpan dalam cache oleh browser sekali dan digunakan kembali di setiap halaman yang merujuknya.
  • 🧭 Kriteria Seleksi: Simpan logika singkat yang spesifik untuk setiap halaman di dalam file, dan pindahkan logika bersama atau logika yang panjang ke file eksternal agar lebih mudah dalam proses debugging.
  • 🚫 Handler Inline: Handler berbasis atribut seperti onclick mencampur markup dengan perilaku dan sebaiknya diganti dengan addEventListener.
Baca Selengkapnya

Internal dan Eksternal JavaNaskah

Apa itu Internal dan Eksternal? JavaNaskah?

Anda dapat menggunakan JavaKode skrip dalam dua cara.

  1. Anda dapat memasukkan JavaKode skrip secara internal dalam dokumen HTML Anda itu sendiri.
  2. Anda dapat menyimpan JavaKode skrip di file eksternal terpisah lalu arahkan ke file itu dari dokumen HTML Anda.

Kedua penempatan tersebut menjalankan bahasa yang sama persis dan menghasilkan hasil yang sama di browser. Perbedaannya terletak pada di mana kode sumber disimpan, bagaimana browser mengunduhnya, dan seberapa mudah kode tersebut dapat digunakan kembali dan dipelihara di seluruh situs web.

Apa itu Internal JavaNaskah?

Intern JavaScript adalah kode yang ditulis langsung di dalam sepasang tag `<script>` dalam file HTML. Browser membaca markup dari atas ke bawah, dan ketika mencapai tag `<script>`, browser akan langsung mengeksekusi pernyataan tersebut tanpa permintaan jaringan tambahan.

Kami telah menggunakan JS Internal sejauh ini. Ini contohnya –

<html>
<head>
  <title>My First JavaScript code!!!</title>
  <script type="text/javascript">
    // Create a Date Object
    var day = new Date();
    // Use getDay function to obtain todays Day.
    // getDay() method returns the day of the week as a number like 0 for Sunday, 1 for Monday,….., 5
    // This value is stored in today variable
    var today = day.getDay();
    // To get the name of the day as Sunday, Monday or Saturday, we have created an array named weekday and stored the values
    var weekday = new Array(7);
    weekday[0]="Sunday";
    weekday[1]="Monday";
    weekday[2]="Tuesday";
    weekday[3]="Wednesday";
    weekday[4]="Thursday";
    weekday[5]="Friday";
    weekday[6]="Saturday";
    // weekday[today] will return the day of the week as we want
    document.write("Today is " + weekday[today] + ".");
  </script>
</head>
<body>
</body>
</html>

Keluaran:

Today is Wednesday.

Tanggal yang tercetak berubah sesuai dengan jam sistem pengunjung, karena getDay mengembalikan angka dari 0 untuk hari Minggu hingga 6 untuk hari Sabtu, dan angka tersebut digunakan sebagai indeks ke dalam array hari dalam seminggu.

Apa itu Eksternal JavaNaskah?

Anda berencana menampilkan tanggal dan waktu saat ini di semua halaman web Anda. Misalkan Anda telah menulis kode dan menyalinnya ke semua halaman web Anda (katakanlah 100). Tetapi kemudian, Anda ingin mengubah format tampilan tanggal atau waktu tersebut. Dalam hal ini, Anda harus melakukan perubahan di semua 100 halaman web tersebut. Ini akan menjadi tugas yang sangat memakan waktu dan sulit.

Jadi, simpanlah JavaNaskah kode dalam file baru dengan ekstensi .js. Kemudian, tambahkan sebaris kode di semua halaman web Anda untuk menunjuk ke file .js Anda seperti ini:

<script type="text/javascript" src="currentdetails.js"></script>

NoteDiasumsikan bahwa file .js dan semua halaman web Anda berada dalam folder yang sama. Jika file external.js berada di folder yang berbeda, Anda perlu menentukan jalur lengkap ke file Anda di atribut src. Penutup </script> Tag `<script>` wajib ada meskipun elemen tersebut tidak memiliki konten, karena tag `<script>` yang menutup sendiri bukanlah HTML yang valid dan sisa halaman akan tertelan oleh elemen yang tidak diakhiri.

Ini kode yang Anda masukkan ke dalam currentdetails.js:

var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var monthName;

var hours = currentDate.getHours();
var mins = currentDate.getMinutes();
var secs = currentDate.getSeconds();
var strToAppend;
if (hours >12 )
{
	hours1 = "0" + (hours - 12);
strToAppend = "PM";
}
else if (hours <12)
{
	hours1 = "0" + hours;
	strToAppend = "AM";
}
else
{
	hours1 = hours;
	strToAppend = "PM";
}

if(mins<10)
mins = "0" + mins;
if (secs<10)
	secs = "0" + secs;

switch (month)
{
	case 1:
		monthName = "January";
		break;
	case 2:
		monthName = "February";
		break;
	case 3:
		monthName = "March";
		break;
	case 4:
		monthName = "April";
		break;
	case 5:
		monthName = "May";
		break;
	case 6:
		monthName = "June";
		break;
	case 7:
		monthName = "July";
		break;
	case 8:
		monthName = "August";
		break;
	case 9:
		monthName = "September";
		break;
	case 10:
		monthName = "October";
		break;
	case 11:
		monthName = "November";
		break;
	case 12:
		monthName = "December";
		break;
}

var year = currentDate.getFullYear();
var myString;
myString = "Today is " + day +  " - " + monthName + " - " + year + ".<br />Current time is " + hours1 + ":" + mins + ":" + secs + " " + strToAppend + ".";
document.write(myString);

Ini adalah file currentdetails.js Anda. Jangan khawatir melihat baris kode yang panjang. Anda akan segera belajar coding. Lakukan perubahan pada dokumen HTML Anda seperti ini:

<html>
	<head>
	   <title>My External JavaScript Code!!!</title>
	   <script type="text/javascript" src="currentdetails.js">
	   </script>
	</head>
	<body>
	</body>
</html>

⚠️ Peringatan: Skrip lama di atas menambahkan angka nol di depan setiap jam, sehingga pukul 11 ​​pagi ditampilkan sebagai 011. Skrip ini juga menetapkan hours1 tanpa mendeklarasikannya, yang menciptakan variabel global implisit dan menimbulkan kesalahan dalam mode ketat. Versi yang diperbaiki di bawah ini memperbaiki kedua kekurangan tersebut.

Penulisan ulang modern dari file yang sama lebih pendek, mendeklarasikan setiap variabel, dan menambahkan nilai dengan benar:

// currentdetails.js - corrected modern version
const now = new Date();

const months = ["January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"];

const hours24 = now.getHours();
const suffix  = hours24 >= 12 ? "PM" : "AM";
const hours12 = String(hours24 % 12 || 12).padStart(2, "0");
const mins    = String(now.getMinutes()).padStart(2, "0");
const secs    = String(now.getSeconds()).padStart(2, "0");

const message = "Today is " + now.getDate() + " - " + months[now.getMonth()] +
                " - " + now.getFullYear() + ". Current time is " +
                hours12 + ":" + mins + ":" + secs + " " + suffix + ".";

document.getElementById("stamp").textContent = message;

Output sampel:

Today is 29 - July - 2026. Current time is 09:05:07 AM.

ARTIKEL TERKAIT

Cara Menautkan Eksternal JavaFile Skrip dengan Benar

Tiga detail menentukan apakah file eksternal dimuat atau tidak: jalur yang ditulis dalam atribut src, posisi tag script dalam dokumen, dan atribut loading yang diterapkan padanya.

Jalur akan ditentukan relatif terhadap dokumen HTML kecuali jika diawali dengan garis miring atau diberikan alamat lengkap.

Nilai src Arti Memutuskan Untuk
currentdetails.js Folder yang sama dengan halaman HTML. /pages/currentdetails.js
js/currentdetails.js Subfolder dari folder saat ini /pages/js/currentdetails.js
../currentdetails.js Satu folder di atas folder saat ini. /currentdetails.js
/assets/js/currentdetails.js Jalur absolut dari direktori akar situs /assets/js/currentdetails.js

Atribut `loading` mengontrol kapan browser berhenti mengurai HTML untuk menjalankan file. Tabel di bawah ini merangkum tiga perilaku yang tersedia.

Atribut Unduh Momen Eksekusi Pesanan Terjaga
None Blok penguraian HTML Segera setelah pengunduhan Ya
menunda Sejajar dengan penguraian Setelah dokumen diuraikan Ya
Async Sejajar dengan penguraian Segera setelah unduhan selesai Tidak 
<!-- Recommended for scripts that read the DOM -->
<script src="js/currentdetails.js" defer></script>

<!-- Recommended for independent third party scripts -->
<script src="js/analytics.js" async></script>

<!-- Modern module syntax, deferred by default -->
<script type="module" src="js/app.js"></script>

💡 Kiat: The type="text/javascript" Atribut ini opsional di HTML5 dan dapat dihilangkan. Pertahankan hanya jika mendukung browser yang sangat lama, atau ganti dengan type="module" saat menggunakan pernyataan impor dan ekspor.

Internal vs Eksternal JavaNaskah: Perbedaan Utama

Perbandingan di bawah ini menempatkan kedua peringkat berdampingan berdasarkan faktor-faktor yang biasanya menentukan pilihan.

Faktor Intern JavaNaskah Luar JavaNaskah
Lokasi penyimpanan Di dalam file HTML File terpisah dengan ekstensi .js
Dapat digunakan kembali di berbagai halaman Membutuhkan penyalinan ke setiap halaman Setiap halaman merujuk pada satu file.
Caching browser Diunduh ulang setiap kali ada halaman baru Disimpan dalam cache sekali dan digunakan kembali.
Upaya pemeliharaan Tinggi ketika kode dibagikan Rendah, satu file untuk diedit
Permintaan HTTP tambahan Tidak Ya, satu per berkas.
Debugging Lebih sulit dalam file HTML yang panjang. Lebih mudah dengan nama file dan nomor baris yang jelas.
Paling cocok untuk Logika singkat khusus halaman Pustaka bersama dan skrip panjang

Kapan Menggunakan Internal dan Eksternal JavaNaskah Code?

Jika Anda hanya memiliki beberapa baris kode yang khusus untuk halaman web tertentu, lebih baik simpan saja JavaKode skrip internal dalam dokumen HTML Anda.

Di sisi lain, jika file JavaKode skrip digunakan di banyak halaman web, jadi Anda harus mempertimbangkan untuk menyimpannya.ping Simpan kode Anda dalam file terpisah. Dengan begitu, jika Anda ingin melakukan perubahan pada kode Anda, Anda hanya perlu mengubah satu file saja, yang membuat pemeliharaan kode menjadi mudah. ​​Jika kode Anda terlalu panjang, maka lebih baik juga untuk menyimpannya dalam file terpisah. Ini membantu dalam proses debugging yang mudah.

Aturan praktis untuk pemula adalah batasan sekitar sepuluh baris. Apa pun yang lebih pendek dan spesifik untuk halaman tertentu dapat tetap berada di dalam file, sedangkan apa pun yang lebih panjang atau digunakan bersama sebaiknya berada di file eksternal.

Di barisan JavaNaskah dan Mengapa Harus Dihindari

Penempatan ketiga terdapat pada halaman-halaman lama, di mana kode ditulis langsung di dalam atribut HTML. Meskipun masih berjalan, kode ini mencampur struktur dengan perilaku dan tidak dapat di-cache, digunakan kembali, atau dilindungi oleh kebijakan keamanan konten yang ketat.

<!-- Inline handler: works, but avoid it -->
<button onclick="alert('Clicked')">Click me</button>

<!-- Preferred: behaviour attached from a script -->
<button id="greet">Click me</button>

<script>
  document.getElementById("greet").addEventListener("click", () => {
      alert("Clicked");
  });
</script>

Setelah Anda merasa nyaman menempatkan skrip, lanjutkan dengan JavaMetode array skrip, belajar lingkaran di JavaNaskahdan kerjakanlah praktis JavaContoh kode skripFile eksternal juga mempermudah pengelolaan logika penyimpanan browser, seperti... cookie di JavaNaskah.

Pertanyaan Umum Demo Slot

Letakkan tepat sebelum tag penutup `<body>`, atau di dalam `<head>` dengan atribut `defer`. Kedua opsi tersebut memungkinkan HTML untuk dirender terlebih dahulu, sehingga elemen-elemen sudah ada saat kode dijalankan.

Ya. Tambahkan satu tag skrip per file. Tanpa async, browser akan mengeksekusinya sesuai urutan kemunculannya, jadi letakkan file yang mendefinisikan fungsi bersama sebelum file yang memanggilnya.

Penyebab umumnya adalah jalur src yang salah, tag penutup script yang hilang, atau nama file dengan kapitalisasi yang berbeda. Buka panel jaringan browser dan cari respons 404.

Hanya pada kunjungan pertama, ketika satu permintaan tambahan dibuat. Setelah itu, file disajikan dari cache browser, yang biasanya lebih cepat daripada mengulang kode yang sama di setiap halaman.

Sebagian besar asisten mengembalikan satu file HTML dengan tag skrip internal, karena itu berjalan tanpa pengaturan. Mintalah secara eksplisit file .js terpisah jika Anda membutuhkan struktur yang siap produksi.

File eksternal dengan atribut async cocok untuk widget AI pihak ketiga seperti chatbot, karena file tersebut dimuat secara independen dan tidak pernah menghalangi rendering halaman di sekitarnya.

Ringkaslah postingan ini dengan: