Home » Javascript » Jendela JavaScript (Browser Object Model), Objek dan Codenya

Jendela JavaScript (Browser Object Model), Objek dan Codenya

by Catur Kurnia Sari
by Catur Kurnia Sari

Browser Object Model (BOM) memungkinkan JavaScript untuk “berkomunikasi” dengan browser.

Browser Object Model (BOM)

Tidak ada standar resmi untuk Browser Object Model (BOM).

Karena hampir semua browser modern telah mengimplementasikan metode dan properti yang sama untuk interaktivitas JavaScript atau yang sering disebut, sebagai metode dan properti BOM.

Objek Jendela

Objek window didukung oleh semua browser. Objek ini mewakili jendela browser.

Semua objek, fungsi, dan variabel JavaScript global secara otomatis menjadi anggota objek window.

Variabel global adalah properti dari objek window.

Fungsi global adalah metode objek window.

Bahkan objek dokumen (dari DOM HTML) adalah properti dari objek window.

Sintaks:

window.document.getElementById(“header“);

sama dengan:

document.getElementById(“header”);

Window Size (Ukuran Jendela)

Dua properti dapat digunakan untuk menentukan ukuran jendela browser.

Kedua properti tersebut akan mengembalikan ukuran dalam pixel:

  • window.innerHeight – tinggi bagian dalam jendela browser (dalam pixel)
  • window.innerWidth – lebar bagian dalam jendela browser (dalam pixel)

Jendela browser (viewport browser) TIDAK termasuk toolbar dan scrollbar.

Sintaks pada Internet Explorer versi 8, 7, 6, 5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

atau

  • document.body.clientHeight
  • document.body.clientWidth

Solusi JavaScript praktis (mencakup semua browser):

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
</script>

</body>
</html>

Contoh menampilkan tinggi dan lebar jendela browser: (TIDAK termasuk toolbar / scrollbar)

Metode Jendela Lainnya

Beberapa metode lain:

  • window.open () – buka jendela baru
  • window.close () – tutup jendela saat ini
  • window.moveTo () – memindahkan jendela saat ini
  • window.resizeTo () – mengubah ukuran jendela saat ini

You may also like