Diskon kelas baru hingga 25%! Masukkan kupon "lebihcepat" di kelas ini

X
Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

APA ITU BROWSER OBJECT MODEL

Browser Object Model atau yang biasa dikenal dengan BOM adalah sebuah API yang memungkinkan kamu untuk berinteraksi dengan browser.

Berinteraksi langsung dengan browser lewat kode itu mungkin dengan bantuan BOM.

Apa itu BOM?

Browser Object Model atau yang biasa dikenal dengan BOM adalah sebuah API yang memungkinkan kamu untuk berinteraksi dengan browser. Ini merupakan bagian dari JavaScript yang memberikan akses ke objek-objek di tingkat browser.

BOM dan DOM

JavaScipt memiliki dua model yang memungkinkan kamu berinteraksi dengan browser: BOM dan Document Object Model (DOM). DOM memungkinkan kamu berinteraksi dengan dokumen HTML itu sendiri sementara BOM memungkinkan hal serupa namun diluar konteks dokumen, seperti pembuatan pop-up atau cookies.

Objek dalam BOM

Berikut beberapa objek penting yang ada dalam BOM:

  • window: Ini adalah objek global, dan semua yang lain (termasuk dokumen itu sendiri dengan DOM) berada di dalamnya.

  • navigator: Object ini mewakili browser itu sendiri dan memungkinkan kamu mendapatkan informasi tentangnya.

  • screen: Representasi dari layar pengguna, memungkinkan kamu mendapatkan informasi seperti resolusi.

  • location: Objek ini memberikan informasi tentang halaman yang sedang dimuat saat ini dan memungkinkan kamu untuk mengubahnya.

  • history: Memberikan akses ke riwayat browser.

Berikut adalah contoh penggunaan sederhana:

console.log(window.innerHeight); //mendapatkan tinggi jendela
console.log(navigator.userAgent); //mendapatkan informasi tentang browser
console.log(screen.width); //mendapatkan lebar layar
console.log(location.href); //mendapatkan URL halaman saat ini
history.back(); //mengarahkan browser untuk kembali ke halaman sebelumnya

#Beberapa Fungsi BOM

Berikut beberapa fungsi yang dapat kamu lakukan dengan BOM:

  • alert(): Membuat sebuah pop-up dengan pesan teks yang disediakan.
  • prompt(): Membuat pop-up dengan formulir input text.
  • confirm(): Membuat pop-up dengan pilihan ‘OK’ atau ‘Cancel’.

Berikut adalah contoh penggunaan:

alert("Hallo!"); //membuat pop-up dengan teks "Hallo!"
var name = prompt("Nama kamu?"); //meminta input teks dengan pertanyaan "Nama kamu?"
var isSure = confirm("Yakin?"); //meminta konfirmasi dengan pilihan 'OK' atau 'Cancel'

Dengan memahami BOM JavaScript, kamu dapat membuat interaksi dengan browser lebih dinamis dan intuitif. Ingat bahwa BOM adalah bagian dari JavaScript, bukan standar tersendiri, jadi beberapa fungsionalitas mungkin tidak bekerja di semua browser. Selalu cek kompatibilitas browser sebelum mengimplementasikan sesuatu yang baru.

👈🏼 Event propagation dan delegation
JS Window 👉🏼