Mengetahui Browser Object Mode (BOM) Pada Javascript

rowser Object Mode (BOM) adalah model objek dari browser yang dapat dimanfaatkan oleh JavaScript manipulasi fitur-fitur pada browser. Tidak seperti M
Mengetahui Browser Object Mode (BOM)  Pada Javascript


Tutorial JavaScript Pemula Part 14 : Mengetahui Browser Object Mode Pada Javascript 

Tutorial JavaScript Pemula Part 14 : Mengetahui Browser Object Mode Pada Javascript - Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan membahas Mengetahui Browser Object Mode (BOM)  Pada Javascript.

Sebenarnya apa itu Browser Object Mode (BOM)  Pada Javascript, pada tutorial sebelumnya kita sudah membahas mengenai DOM Pada Javascript, sebenarnya agak sedikit mirip nih dengan artikel sebelumnya jadi disini saya akan memberi contoh penggunaan, fungsi dan istilah-istilah BOM Javascript.

Bagaimana? Mari kita lanjut saja oke!

Mengetahui Browser Object Mode (BOM)  Pada Javascript

Apa Itu Browser  Object Mode (BOM)  Pada Javascript

Browser  Object Mode (BOM) adalah model objek dari browser yang dapat dimanfaatkan oleh JavaScript manipulasi fitur-fitur pada browser. Tidak seperti Model Object Dokumen (DOM), tidak ada standar untuk implementasi dan tidak ada definisi yang ketat, jadi vendor browser bebas untuk mengimplementasikan BOM dengan cara apapun yang mereka inginkan.

Hal yang paling harus kalian tahu adalah mengenai property/method yang bisa digunakan untuk Browser  Object Mode (BOM) yaitu sebagai berikut:

  • window.open() :  Membuka jendela baru browser
  • window.close() :  Menutup jendela browser
  • window.moveTo() :  Memindahkan jendela browser
  • window.resizeTo() :  Mengubah ukuran jendela browser
  • window.print() : Mencetak halaman browser yang dibuka
  • window.innerWidth :  Mendapatkan lebar bagian dalam browser tidak termasuk scrollbar
  • window.innerHeight : Mendapatkan tinggi bagian dalam browser tidak termasuk toolbar dan scrollbar
  • screen.width : Mendapatkan lebar layar
  • screen.height : Mendapatkan tinggi layar
  • screen.awailwidth :  Mendapatkan lebar layar tanpa fitur interface seperti taskbar
  • screen.availHeight : Mendapatkan tinggi layar tanap fitur interface
  • screen.colorDepth  : Mendapatkan nomor bit yang digunakan untuk menampilkan warna, biasanya 24 bit atau 32 bit
  • location.href :  Mendapatkan nilai URL dari halaman aktif
  • location.hostname : Mendapatkan nama domain dari web host
  • location.pathname : Mendapatkan nama path dan nama file dari halaman aktif
  • location.protocol : Mendapatkan protocol web yang digunakan apakah http: atau https:
  • location.port : Mendapatkan nomor port yang digunakan
  • location.assign() :  Load sebuah dokumen baru
  • history.back() : Menuju ke halaman yang dibuka sebelumnya atau seperti menekan tombol back
  • history.forward() :  Menuju ke halaman yang dibuka setelahnya
  • navigator.appName : Mendapatkan nama aplikasi browser yang digunakan
  • navigator.appCodeName :  Mendapatkan code name aplikasi browser
  • navigator.platform :  Mendapatkan nama sistem operasi yang digunakan.
  • navigator.onLine : Mendapatkan status online browser dengan hasil true atau false

Objek yang tidak diawali dengan kata window sebenarnya juga termasuk property window, namun dapat ditulis dengan menghilangkan awalan window.

Seperti contohnya dibawah ini:

  • location.href dapat ditulis dengan window.location.href atau location.href.
  • location.hostname dapat ditulis dengan window.location.hostname atau location.hostname.
  • location.pathname dapat ditulis dengan window.location.pathname atau location.pathname.
  • location.protocol dapat ditulis dengan window.location.protocol atau location.protocol.

Contoh penggunaan dari Browser  Object Mode (BOM)

Disini saya mau coba dulu menggunakan salah satu property/method dari Browser  Object Mode (BOM). Misalnya saya ingin membuka jendela baru pada halaman web browser. Perhatikan code dibawah ini:



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Belajar Javascript</title>
</head>
<body>
                <button onclick="openNewWindow()">Tekan Tombol</button>
    <script>
        function openNewWindow(){
            window.open("https://www.belajarwithib.my.id/");
        }
    </script>
</body>
</html>

Code diatas akan menghasilkan sebuah button, yang jika button itu ditekan maka kamu akan diarahkan ke blog saya pada jendela atau new tab pada web browser kamu.

 Lalu bagaimana caranya agar kita tahu mengenai ukuran tinggi dan lebar dari web browser kamu? Ya dengan menggunakan BOM Javascript kamu dapat mengetahui nya. Perhatikanlah code dibawah ini:



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Belajar Javascript</title>
</head>
<body>
                <p id="pesan"></p>
    <script>
        document.getElementById("pesan").innerHTML =
        "Lebar jendela bagian dalam browser: " + window.innerWidth + "px<br>" +
        "Tinggi jendela bagian dalam browser: " + window.innerHeight + "px";
    </script>
</body>
</html>

Maka hasilnya akan seperti dibawah ini :


Mengetahui Browser Object Mode (BOM)  Pada Javascript

Okey mungkin sekian mengenai Browser Object Mode (BOM)  Pada Javascript, untuk selebihnya silahkan uji coba sendiri agar kamu jauh lebih paham mengenai method ataupun property untuk BOM ini.

Semoga Bermanfaat!