Jendela JavaScript (Browser Object Model), Objek dan Codenya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari October 26, 2020

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

Section Artikel

1 Browser Object Model (BOM)
2 Objek Jendela
3 Window Size (Ukuran Jendela)
4 Metode Jendela Lainnya

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)