Skip to content

19 - BOM (Browser Object Model).md

Latest commit

 

History

History
688 lines (416 loc) · 7.61 KB

19 - BOM (Browser Object Model).md

File metadata and controls

688 lines (416 loc) · 7.61 KB
Raw

BOM (Browser Object Model)

1. Introduction

The Browser Object Model (BOM) is a collection of objects provided by the browser that allows JavaScript to communicate with and control the browser window.

Unlike the DOM, which deals with the HTML document, the BOM deals with the browser environment itself.

The BOM allows developers to:

  • Open new browser windows
  • Resize browser windows
  • Get screen information
  • Access browser history
  • Obtain browser details
  • Display popup messages
  • Navigate to different URLs

2. Definition

BOM (Browser Object Model) is a collection of browser-provided objects that enables JavaScript to interact with the browser and its components.

It acts as a bridge between:

JavaScript  <------>  Browser

3. Main BOM Objects

1. Window Object

The window object is the root object of BOM.

It represents:

Browser Window

It is automatically created by the browser.

Example:

window.alert("Welcome");

or simply

alert("Welcome");

because every BOM object belongs to the window object.

2. Navigator Object

The navigator object contains information about:

  • Browser name
  • Browser version
  • Platform
  • User Agent

Example:

console.log(navigator.appName);

console.log(navigator.platform);

console.log(navigator.userAgent);

3. Screen Object

The screen object provides information about the user's display screen.

Properties:

screen.width

screen.height

screen.availWidth

screen.availHeight

4. History Object

The history object stores the browser history.

Methods:

history.back()

history.forward()

history.go()

Example:

history.back();

Moves to previous page.

5. Location Object

The location object contains information about the current URL.

Example:

console.log(location.href);

console.log(location.hostname);

console.log(location.protocol);

4. Hierarchy of BOM

                 Window
        _______________________

       |          |            |

 Navigator     Screen       History

       |

    Location

       |

     Document (DOM)

The Window object is the top-most object.

5. Why BOM is Used

BOM is used to:

  1. Communicate with browser
  2. Get screen size
  3. Navigate pages
  4. Display alerts
  5. Open new windows
  6. Access browser information
  7. Control browser history

6. Example Program

<!DOCTYPE html>

<html>

<head>

<title>BOM Example</title>

</head>

<body>

<p id="Wid"></p>

<script>

document.getElementById("Wid").innerHTML =

"The width of browser window is : "

+ screen.width;

document.getElementById("Wid").innerHTML +=

"<br>The height of browser window is : "

+ screen.height;

</script>

</body>

</html>

7. Step-by-Step Explanation

Line 1

<!DOCTYPE html>

Declares HTML5 document.

Line 2

<html>

Root element.

Line 3

<head>

Contains metadata.

Line 4

<title>BOM Example</title>

Sets browser tab title.

Line 5

<body>

Contains webpage content.

Line 6

<p id="Wid"></p>

Creates an empty paragraph with id:

Wid

The screen details will be displayed here.

Line 7

document.getElementById("Wid")

Selects the paragraph element.

Line 8

screen.width

Returns:

Browser Screen Width

Example:

1920

Line 9

screen.height

Returns:

Browser Screen Height

Example:

1080

Line 10

innerHTML

Displays the data inside the HTML element.

Output

Suppose your monitor resolution is:

1920 × 1080

Output:

The width of browser window is : 1920

The height of browser window is : 1080

8. Alert Box Example

alert("Welcome to JavaScript");

Output:

-----------------------

Welcome to JavaScript

         OK

-----------------------

9. Confirm Box Example

confirm("Are you sure?");

Output:

--------------------

Are you sure?

 OK     Cancel

--------------------

Returns:

true  -> OK

false -> Cancel

10. Prompt Box Example

prompt("Enter Your Name");

Output:

-------------------------

Enter Your Name

_____________

      OK

-------------------------

Returns the value entered by the user.

11. Window Methods

Open a New Window

window.open();

Close Current Window

window.close();

Print Current Page

window.print();

12. Navigator Properties

navigator.appName

navigator.appVersion

navigator.platform

navigator.userAgent

navigator.language

Example:

console.log(navigator.platform);

Output:

Win32

13. Location Properties

location.href

location.hostname

location.protocol

location.pathname

Example:

console.log(location.href);

Output:

https://www.example.com/index.html

14. History Methods

Back

history.back();

Moves:

Current Page

↓

Previous Page

Forward

history.forward();

Moves:

Current Page

↓

Next Page

Go

history.go(-1)

Moves one page back.

Difference Between DOM and BOM

DOM BOM
Document Object Model Browser Object Model
Represents HTML document Represents Browser
Manipulates HTML elements Manipulates Browser
Root object is document Root object is window
Changes webpage contents Controls browser behavior

Interview Questions

Q1. What is BOM?

Answer:

BOM stands for Browser Object Model.

It allows JavaScript to communicate with and control the browser.

Q2. What is the root object of BOM?

Answer:

window

Q3. Name important BOM objects.

Answer:

  1. Window
  2. Navigator
  3. Screen
  4. History
  5. Location

Q4. Which object provides screen dimensions?

Answer:

screen

Example:

screen.width

screen.height

Q5. Which object stores browser history?

Answer:

history

Q6. Which object stores URL information?

Answer:

location

Q7. Difference between DOM and BOM?

Answer:

DOM manipulates HTML documents.

BOM manipulates browser components.

Q8. What is window.alert()?

Answer:

Displays a popup alert message.

Example:

alert("Hello");

Important Points

  1. BOM stands for Browser Object Model.
  2. Window is the root object.
  3. DOM is a part of BOM.
  4. screen object gives screen information.
  5. navigator object gives browser details.
  6. history object manages browser history.
  7. location object manages URL information.
  8. alert(), confirm(), and prompt() are window methods.

Summary

The Browser Object Model (BOM) is a browser-provided interface that enables JavaScript to interact with browser components such as the window, screen, navigator, history, and location objects. Using BOM, developers can obtain browser information, manage navigation, display dialogs, access screen properties, and build dynamic and interactive web applications efficiently.