Dalam artikel ini, Anda akan mempelajari tentang injeksi kode JavaScript dalam dokumen HTML, kemungkinan cara melakukannya, perbedaan antara cara-cara tersebut, dan banyak lagi!

Prasyarat

Anda harus terbiasa dengan HTML/CSS. Anda tidak memerlukan pengalaman pemrograman sebelumnya.

Tag ‹skrip›

Dalam HTML, kode JavaScript disisipkan di antara tag <script> dan </script>.

<script>
 // Here goes your JS code
</script>

Anda dapat menempatkan sejumlah skrip dalam dokumen HTML. Skrip dapat ditempatkan di bagian <body>, atau di <head> halaman HTML, atau di keduanya.

Apakah ada perbedaan?

Saya senang Anda bertanya karena ada perbedaan, dan itu cukup penting.

Praktik terbaiknya adalah menempatkan tag JavaScript <script> tepat sebelum tag</body> penutup, bukan di bagian <head> HTML Anda.

Alasannya adalah HTML dimuat dari atas ke bawah. Kepala dimuat terlebih dahulu, lalu badan, dan kemudian semua yang ada di dalam badan. Jika kita menempatkan JavaScript di bagian kepala, seluruh JavaScript akan dimuat sebelum memuat HTML apa pun, yang dapat menyebabkan beberapa masalah:

  1. Jika Anda memiliki kode di JavaScript yang mengubah HTML segera setelah kode JavaScript dimuat, sebenarnya belum ada elemen HTML apa pun yang tersedia untuk memengaruhinya, jadi sepertinya kode JavaScript tidak berfungsi, dan Anda mungkin mendapatkan kesalahan.
  2. Jika Anda memiliki banyak JavaScript, ini dapat memperlambat pemuatan halaman Anda karena memuat semua JavaScript sebelum memuat HTML apa pun.

Saat Anda menempatkan JavaScript di bagian bawah badan HTML, hal ini memberikan waktu bagi HTML untuk dimuat sebelum JavaScript apa pun dimuat, sehingga dapat mencegah kesalahan, dan mempercepat waktu respons situs web.

Mari kita memahami lebih lanjut dengan sebuah contoh (dan jangan khawatir tentang sintaksis yang saya gunakan, Anda hanya perlu memahami apa yang kami coba lakukan).

Pada kode di atas, saya mencoba mengubah warna paragraf menjadi hijau dengan menulis JavaScript saya di <head>tag. Hasilnya adalah:

Jadi kode tersebut tidak mempengaruhi warna paragraf, karena seperti yang kami sebutkan sebelumnya, skrip dimuat sebelum paragraf itu sendiri, jadi pada saat itu, tidak ada paragraf yang warnanya dapat kami ubah.

Sekarang mari kita coba sebaliknya, pada bodi bagian bawah:

Dan benar saja, kita mendapatkan apa yang kita inginkan, karena sekarang kode JS mengetahui paragrafnya.

Satu hal lagi: Meskipun yang terbaik adalah memasukkan JavaScript di akhir HTML <body>, menempatkan JavaScript di <head> HTML Anda tidak SELALU menyebabkan kesalahan.

JavaScript Eksternal

JavaScript juga dapat digunakan di file eksternal. File JavaScript memiliki ekstensi file '.js'. Untuk menggunakan skrip eksternal, masukkan nama file skrip di atribut src dari tag skrip.

|<script src="myScript.js"></script>

Kelebihan JavaScript Eksternal:

Menempatkan kode JavaScript di file js eksternal memiliki beberapa keunggulan dibandingkan skrip inline:

  • Memisahkan kode HTML dan JavaScript akan membantu mengelola basis kode dengan lebih mudah.
  • Desainer dapat bekerja sama dengan pembuat kode secara paralel tanpa konflik kode.
  • Bekerja dengan baik dengan sistem kontrol versi kode sumber modern seperti GIT. Artinya, masing-masing file ini akan menyimpan riwayatnya dan dapat diperiksa, diperiksa oleh banyak pemrogram.
  • Kode serta HTML mudah dibaca.
  • File JavaScript eksternal di-cache oleh browser dan dapat mempercepat waktu pemuatan halaman.
  • Banyak paket JavaScript populer tersedia sebagai host di jaringan pengiriman konten (cdn) dan Anda cukup mengarahkannya menggunakan URL di src, sehingga menghindari penyalinan file js ke folder lokal.

Perlu disebutkan bahwa ada beberapa keuntungan lainnya, tetapi karena artikel ini ditujukan untuk pengembang non tingkat lanjut, saya memilih untuk tidak membicarakannya.

asinkron & tunda

Ada beberapa cara bagi Anda untuk memuat JavaScript eksternaltanpa khawatir tentang di mana Anda harus memasukkannya. Gambar ini menjelaskan cara kerja kedua atribut ini dan apa perbedaannya.

Sekian untuk hari ini kawan! Saya harap Anda menikmati yang satu ini dan saya harap ini membantu Anda memahami topiknya. Terima kasih telah membaca ini, sampai jumpa lagi untuk konten lainnya! 😄

PS: apakah Anda ingin mendukung saya? …Anda dapat melakukannya dengan menjadi anggota medium menggunakan link ini 🙏



Pertanyaan Wawancara Pengkodean | Skilled.dev
Sebuah platform lengkap tempat saya mengajari Anda semua yang Anda butuhkan untuk mendapatkan pekerjaan berikutnya dan teknik untuk…skilled.dev