BOM: window, location, dan history

Selain DOM ada BOM

Kalau DOM mengurus isi halaman, BOM (Browser Object Model) mengurus browser itu sendiri: jendela, URL, riwayat navigasi, dan info perangkat. Object utamanya adalah window.

window: object teratas

Semua yang global sebenarnya milik window:

console.log(window.innerWidth);  // lebar viewport
console.log(window.innerHeight); // tinggi viewport

// alert, confirm, prompt adalah method window
alert("Halo!");
let yakin = confirm("Yakin hapus?"); // true/false
let nama = prompt("Siapa namamu?");  // string atau null

alert/confirm/prompt memblokir eksekusi sampai pengguna merespons. Praktis untuk belajar, tapi di aplikasi nyata biasanya diganti modal custom yang lebih cantik.

location: baca dan atur URL

console.log(location.href);     // URL lengkap
console.log(location.hostname); // nama domain
console.log(location.pathname); // path setelah domain
console.log(location.search);   // query string (?a=1&b=2)

// pindah halaman
location.href = "https://contoh.com";
// atau reload halaman saat ini
location.reload();

history: navigasi mundur-maju

history.back();    // sama dengan tombol back
history.forward(); // sama dengan tombol forward
history.go(-2);    // mundur 2 langkah

SPA modern memakai history.pushState untuk mengganti URL tanpa reload, tapi itu materi lanjutan.

navigator: info perangkat

console.log(navigator.language); // "id-ID"
console.log(navigator.onLine);   // true/false, status koneksi

navigator.onLine berguna untuk menampilkan pesan "kamu offline" sebelum user mencoba aksi yang butuh internet.

Catatan teknis: BOM tidak punya standar seketat DOM, jadi perilaku bisa sedikit beda antar browser untuk fitur pinggiran. Untuk fitur umum seperti location dan history, semua browser modern konsisten. Selalu cek dokumentasi MDN kalau memakai API BOM yang jarang dipakai.

Studi kasus: konfirmasi sebelum hapus

Gabungkan confirm dengan manipulasi DOM untuk aksi destruktif:

document.querySelectorAll(".btn-hapus").forEach(tombol => {
  tombol.addEventListener("click", () => {
    let nama = tombol.closest("li").querySelector(".nama").textContent;
    let yakin = confirm('Hapus "' + nama + '"?');
    if (yakin) {
      tombol.closest("li").remove();
      console.log(nama + " dihapus");
    }
  });
});

confirm mengembalikan true/false dan memblokir sampai pengguna memilih. Untuk aplikasi nyata, gantilah dengan modal custom yang tidak memblokir dan bisa di-style. Tapi untuk admin panel internal atau prototipe, confirm bawaan sudah cukup dan tidak butuh kode tambahan.

Membuka tab baru

window.open membuka URL di tab atau jendela baru:

// buka di tab baru
window.open("https://contoh.com", "_blank");

Browser modern memblokir popup yang tidak dipicu aksi pengguna langsung (misalnya dipanggil dari setTimeout tanpa klik). Jadi panggil window.open di dalam handler click agar tidak diblokir. Untuk navigasi biasa dalam aplikasi, location.href tetap cara yang tepat.

Kesimpulan

DOM untuk isi halaman, BOM untuk browsernya. Kuasai window, location, dan history untuk kebutuhan navigasi dan info dasar. Cukup untuk sebagian besar aplikasi.