Seperti CSS, JavaScript bisa ditulis langsung di HTML atau di file terpisah.

<!-- inline: kodenya di dalam tag -->
<script>
  console.log("Halo dari inline");
</script>

<!-- external: kodenya di file lain -->
<script src="js/script.js"></script>

Untuk proyek sungguhan, pilih external dengan alasan yang sama seperti CSS: bisa dipakai banyak halaman, di-cache browser, dan HTML tetap bersih. Dua aturan kecil yang sering bikin bingung:

• Tag <script> wajib ditutup dengan </script>, walau isinya kosong. <script src="..." /> tidak dikenali sebagai tag tertutup.
• Kalau tag punya src, kode yang ditulis di antara tag pembuka dan penutup diabaikan. Pilih salah satu.

Path di src mengikuti aturan yang sama dengan href di <link>: relatif terhadap file HTML yang membuka.

Browser membaca HTML dari atas ke bawah sambil membangun halaman. Saat bertemu <script> biasa (tanpa atribut tambahan), browser berhenti, mengunduh, menjalankan script itu, baru lanjut membaca HTML. Ini disebut parser-blocking.

Akibatnya terlihat di contoh ini:

<head>
  <script>
    const judul = document.querySelector("#judul");
    console.log(judul); // null
  </script>
</head>
<body>
  <h1 id="judul">Halo</h1>
</body>

Console mencetak null, karena saat script berjalan, <h1> belum dibuat. Baris berikutnya seperti judul.textContent = "..." langsung error: Cannot set properties of null. Kodemu benar, waktunya yang salah.

Ada beberapa cara memperbaikinya:

Penjelasan lebih detail:

• defer membuat browser mengunduh file sambil terus membaca HTML. Script baru dijalankan setelah seluruh dokumen selesai di-parse, tepat sebelum event DOMContentLoaded. Kalau ada beberapa script defer, urutannya dijaga sesuai urutan di HTML. Atribut defer hanya berlaku untuk script dengan src. Di script inline, defer diabaikan.
• async juga mengunduh paralel, tapi menjalankan script begitu filenya siap, bisa sebelum HTML selesai, dan urutan antar script async tidak dijamin. Jangan pakai untuk script yang memanipulasi elemen atau yang bergantung pada script lain.
• type="module" menandai file sebagai ES module (standar sejak ES2015). Module otomatis ditunda seperti defer, berjalan dalam strict mode, dan variabel tingkat atasnya tidak menjadi global. Module juga bisa memakai import untuk memecah kode ke beberapa file. Detail sintaks modul ada di kelas JavaScript.

Alternatif lain, kode dibungkus dengan event:

<script>
  document.addEventListener("DOMContentLoaded", () => {
    document.querySelector("#judul").textContent = "Siap!";
  });
</script>

Walau script ini ditaruh di <head>, isinya baru jalan setelah struktur halaman siap, jadi judul berubah jadi "Siap!".

Saat membaca HTML, browser tidak menyimpannya sebagai teks. Ia membangun DOM (Document Object Model): pohon objek di memori. Paling atas ada document, di bawahnya <html>, lalu cabang <head> dan <body>, dan seterusnya sampai teks terkecil.

Poin yang sering disalahpahami: JavaScript tidak mengedit file .html. JavaScript mengedit pohon di memori. Kalau kamu muat ulang halaman, pohon dibangun ulang dari file asli, dan semua perubahan dari JavaScript hilang. Karena itu, di DevTools tab Elements kamu melihat DOM yang sekarang (sudah diubah JS), sedangkan View Page Source menampilkan file asli dari server.

Setiap node di pohon itu adalah objek dengan properti (textContent, id, className) dan method (append, remove, addEventListener).

Polanya selalu sama: pilih, simpan ke variabel, lalu ubah.

const judul = document.getElementById("judul");    // tanpa #
const tombolPertama = document.querySelector(".tombol");
const semuaTombol = document.querySelectorAll(".tombol");

Kabar baiknya, querySelector memakai selector yang sama persis dengan CSS: #id, .class, [data-status="habis"], nav a. Ilmu selector dari bab sebelumnya langsung terpakai. NodeList dari querySelectorAll bisa di-loop dengan forEach atau for...of.

judul.textContent = "Selamat Datang";       // teks murni
judul.innerHTML = "<em>Halo</em> Dunia";    // ditafsirkan sebagai HTML

const logo = document.querySelector("img.logo");
logo.setAttribute("src", "img/logo-baru.png");
logo.alt = "Logo Ruang Materi";

• textContent memperlakukan isinya sebagai teks biasa. Kalau isinya <b>, yang tampil adalah tulisan <b>, bukan huruf tebal. Ini pilihan paling aman, terutama untuk input pengguna.
• innerHTML menafsirkan isinya sebagai HTML. Berguna, tapi jangan pernah diisi teks dari pengguna, karena bisa disisipi script jahat (serangan XSS).
• setAttribute(nama, nilai) mengubah atribut apa pun. Banyak atribut juga punya properti langsung seperti el.id, el.href, img.src.

const daftar = document.querySelector("#daftar");
const item = document.createElement("li");
item.textContent = "Belajar DOM";
item.dataset.id = "4";
daftar.append(item);

Hasilnya: daftar #daftar mendapat item baru "Belajar DOM" di posisi paling bawah, dengan atribut data-id="4". Elemen dari createElement belum tampil sampai disisipkan ke pohon lewat append (atau appendChild, prepend, before, after). Untuk menghapus elemen, panggil el.remove().

• Script di <head> tanpa defer, lalu heran querySelector menghasilkan null.
• Menulis getElementById("#judul"). Method ini menerima id tanpa #. Sebaliknya, querySelector butuh #.
• Mengira querySelector mengembalikan semua elemen. Ia hanya mengambil yang pertama. Pakai querySelectorAll lalu loop.
• Memakai async untuk script yang mengubah DOM, sehingga kadang jalan kadang error tergantung kecepatan unduhan.
• Mengisi innerHTML dengan input pengguna. Pakai textContent.
• Lupa append setelah createElement, jadi elemen baru tidak pernah muncul.