JavaScript (JS) adalah bahasa pemrograman inti di dunia web, bertugas memberikan interaktivitas pada halaman HTML statis. Memahami cara menempatkan kode JavaScript di dalam struktur HTML adalah langkah fundamental bagi setiap pengembang front-end. Ada tiga metode utama yang dapat Anda gunakan untuk membuat javascript di html, masing-masing dengan kegunaan dan praktik terbaiknya sendiri.
Metode ini melibatkan penempatan kode JavaScript langsung di dalam dokumen HTML Anda menggunakan tag <script>. Kode ini akan dieksekusi segera setelah browser mencapai tag tersebut.
Secara tradisional, tag script diletakkan di dalam bagian <head>. Namun, praktik modern menyarankan penempatan tag <script> tepat sebelum tag penutup </body>. Mengapa? Karena menempatkannya di akhir body memastikan bahwa seluruh struktur HTML (DOM) telah dimuat dan siap dimanipulasi oleh JavaScript Anda, menghindari potensi error "element not found".
Contoh implementasi internal:
<!DOCTYPE html>
<html lang="id">
<head>
<title>JS Internal</title>
</head>
<body>
<h1 id="judul">Halo Dunia</h1>
<script>
document.getElementById('judul').style.color = 'blue';
console.log("Skrip internal berjalan.");
</script>
</body>
</html>
Untuk proyek yang lebih besar atau kode yang ingin digunakan ulang, memisahkan JavaScript ke dalam file terpisah (biasanya berekstensi .js) adalah pendekatan yang paling disarankan. Ini meningkatkan keterbacaan, kemudahan pemeliharaan, dan caching oleh browser.
Pertama, buat file misalnya script.js. Kedua, tautkan file tersebut di HTML menggunakan atribut src (source) di dalam tag <script>. Sama seperti metode internal, letakkan tautan ini sebelum </body>.
Di file HTML Anda:
<script src="path/ke/script.js"></script>
Di file script.js:
// script.js
const tombol = document.createElement('button');
tombol.textContent = 'Klik Saya (Eksternal)';
tombol.onclick = function() { alert('Ini datang dari file eksternal!'); };
document.body.appendChild(tombol);
Ketika memuat skrip eksternal, kinerja menjadi perhatian utama. Jika Anda harus meletakkannya di <head>, gunakan atribut defer atau async untuk menghindari pemblokiran rendering HTML:
async: Skrip diunduh secara paralel dengan parsing HTML. Skrip akan dieksekusi segera setelah selesai diunduh, meskipun parsing HTML belum selesai. Urutan eksekusi antar skrip async tidak terjamin.defer: Skrip diunduh secara paralel, tetapi eksekusinya ditunda hingga seluruh dokumen HTML selesai diparsing. Urutan skrip dengan defer dijamin. Ini sering menjadi pilihan terbaik untuk skrip yang bergantung pada DOM.Contoh penggunaan di <head>:
<script src="app.js" defer></script>
Metode ketiga adalah menempatkan JavaScript langsung sebagai nilai atribut pada elemen HTML, seperti onclick, onmouseover, dll. Meskipun ini cepat untuk pengujian sederhana, praktik ini sangat tidak dianjurkan karena mencampurkan struktur (HTML) dan perilaku (JS) secara langsung, melanggar prinsip pemisahan kekhawatiran (Separation of Concerns).
Contoh:
<button onclick="alert('Ini inline!');">Tekan Saya</button>
Meskipun sangat lugas untuk membuat javascript di html secara instan, hindari penggunaan ini dalam proyek serius. Menggunakan addEventListener dalam file eksternal jauh lebih bersih dan fleksibel.
Ketika mengembangkan untuk perangkat mobile, kecepatan muat sangat krusial. Pastikan Anda selalu memprioritaskan pemuatan JavaScript secara asinkron (menggunakan defer atau async) jika skrip besar dimuat di <head>, atau letakkan skrip yang memanipulasi DOM di akhir <body>. Dengan menguasai ketiga cara integrasi ini, Anda dapat membangun aplikasi web yang dinamis dan responsif.