Introduction to the Browser Object Model (BOM)

What is BOM?

The Browser Object Model (BOM) provides a way to interact with the browser's components and environment, allowing developers to manipulate the browser window, access information about the user's environment, and interact with the web page.

BOM enables developers to perform tasks like opening new windows, navigating to different URLs, managing browser history, and accessing user information, thereby enhancing the user experience.

BOM Properties

Window Properties

The global object representing the browser window:

• window.document: Refers to the Document Object Model (DOM) of the current webpage.
• window.location: The current URL of the window.
• window.navigator: The browser and operating system information.
• window.history: The browsing history of the window.
• window.screen: Information about the user's screen.
• window.innerWidth: The width of the window's content area.
• window.innerHeight: The height of the window's content area.
• window.outerWidth: The width of the entire browser window.
• window.outerHeight: The height of the entire browser window.

Changing the current URL using window.location

// Navigate to a new URL
    window.location.href = "https://www.example.com";

Screen Properties

Provides information about the user's screen dimensions and color depth:

• screen.width: The width of the screen in pixels.
• screen.height: The height of the screen in pixels.
• screen.availWidth: The width of the screen excluding UI features (like the taskbar).
• screen.availHeight: The height of the screen excluding UI features.
• screen.colorDepth: The number of bits used to represent the color of a single pixel.
• screen.pixelDepth: The color depth of the screen.

Displaying screen dimensions

console.log("Screen Width: " + screen.width);
    console.log("Screen Height: " + screen.height);

Location Properties

Represents the current URL and provides methods to manipulate it:

• location.href: The entire URL of the current page.
• location.protocol: The protocol of the current URL (e.g., http:, https:).
• location.host: The hostname and port number.
• location.pathname: The path of the URL.
• location.search: The query string of the URL.
• location.hash: The fragment identifier of the URL.
• location.port: The port number of the URL.

Accessing URL components

console.log("Current URL: " + location.href);
    console.log("Protocol: " + location.protocol);
    console.log("Host: " + location.host);

Navigator Properties

Provides information about the browser and the user's operating system:

• navigator.userAgent: Returns the user agent string for the current browser.
• navigator.platform: Returns the platform on which the browser is running.
• navigator.language: Returns the preferred language of the user.
• navigator.cookieEnabled: Returns a boolean indicating whether cookies are enabled.
• navigator.onLine: Returns a boolean indicating whether the browser is online.