Browser Object Model (BOM)

What is BOM ?

The Browser Object Model (BOM) in Javascript provides a set of objects that allow interaction with the web browser and its environment, independent of the content of the web browser and its environment, independent of the content of the web page itself (which is handled by the Document Object Model, or DOM).

Unlike the DOM, the BOM is not standardised specification and its implementation can vary slightly across different browsers. It is set of objects provided by the browser for web developers to enhance web page interactivity, not an environment for system-level programming.

The central object of the BOM is the window object, which represents browser window or a frame. It is the global object in client-side Javascript and contains various properties and methods for controlling the browser.

The BOM enables Javascript to perform actions such as:

• Controlling browser window size and position. screen,width()
• Navigating to different URLs
• Accessing browser history - history.back()
• Displaying alerts, confirmations and prompts to the user.
• Obtaining information about user's browser and screen.
• Scheduling code execution at specified intervals or delays.
• Managing windows (window.open(), window.close())

Key objects and functionalities within BOM include:

window object:

1. Properties: innerWidth, innerHeight (viewport dimensions), outerWidth, outerHeight (total window dimensions), screenX, screenY (window position), location (URL information), history (browser history), navigator (browser information), screen (user's screen details).

2. Methods: alert (), confirm(), prompt() (for user interaction), open(), close() (for managing windows/tabs) moveTo(), resizeTo() (for window manipulation) setTimeout(), setInterval(), clearTimeout(), clearInterval() for timed execution. requestAnimationFrame() for animations

location object:

Provides information about the current URL and allows for navigation

1. Properties: href, protocol, host, pathname, search, hash
2. Methods: assign(), reload(), replace()

history object:

Allows navigation through the browser's session history

Methods: back(), forward(), go()

navigator object:

Provides information about the user's browser and operating system

Properties: userAgent, appName, platform, cookieEnabled

screen object:

Contains information about the user's screen:

Properties: width, height, availWidth, availHeight, colorDepth, pixelDepth.

Usage :

1. innerWidth (viewport dimensions)

The window.innerWidth property in Javascript returns the interior width of the browser window's layout viewport in pixels. This includes the width of the content area and any vertical scrollbar if present. It does not include the browser's borders or margins.

Key Characteristics:

• Read-only property: The value of window.innerWidth cannot be directly changed.
• Returns a number : The value represents the width in pixels.
• Includes vertical scrollbar - If a vertical scrollbar is visible, it's width is included in the reported innerWidth.
• Affected by zoom level - If the browser's zoom level is changed, window.innerWidth will affect the logical pixel width at that zoom level, not the actual physical pixel width.

Usage example :

var currentWidth = window.innerWidth;
console.log("the current inner width of the window is: " + currentWidth +  "pixels.");

2. innerHeight

In JavaScript, window.innerHeight is a read-only property that returns the interior height of the browser window in pixels.

This value represents the height of the window's layout viewport, including the height of any horizontal scrollbar that may be present.

Key Characteristics:

• Read-only property - You cannot set the value of window.innerHeight directly.

• Pixels - The returned value is always in pixels.

• Includes horizontal scrollbar - If a horizontal scrollbar is present, the height is included in the innerHeight measurement.

• Viewport measurement - It measures the visible content area of the window, not the entire browser window (which would include browser toolbars and borders). For the entire window height, including toolbars and borders, window.outerHeight is used.

// Get the current inner height of the window
let currentInnerHeight = window.innerHeight;
console.log('current inner height: " + currentInnerHeight + "px");

// You can also use it in an event listener for window resizing
window.addEventListener('resize', function() {
	let newInnerHeight = window.innerHeight;
	console.log("Window resized! New inner height: " + newInnerHeight + "px");
});

3. outerWidth (total window dimensions)

The window.outerWidth property in Javascript is a read-only property that returns the full width of the browser window in pixels, including all interface elements such as toolbars, scrollbars, sidebars, and window borders.

Key characteristics

• Measurement - It includes the entire browser application's width as it appears on the screen, not just the space available for the web page content.

• Unit - This value is returned as a number representing pixels.

• Read-only - This property cannot be used to set the window's width, it only retrieves the current value.

• ** Use case** - It is useful for understanding the total screen space the browser window occupies, which can be helpful for managing overall window layout or positioning new windows.

Example usage:

You can access the outerWidth value the following JavaScript code:

// Get the outer width of the browser window
var fullWindowWidth = window.outerWidth;
console.log("The outer width of the window is: " + fullWindowWidth + "px");

4. outerHeight (total window dimensions)

The window.outerHeight property in Javascript is a read-only property that returns the full height of the browser window in pixels, including all interface elements such as toolbars, scrollbars, tabs and window borders.

This contrasts with window.innerHeight, which only measures the height of the viewport or content area where the web page is displayed.

Key charactersistics

• Measurement - It includes the entire browser application's height as it appears on the screen, not just the space available for the web page content.
• Unit - This value is returned as a number representing pixels.
• Read-only - This property cannot be used to set the window's height, it only retrieves the current value.
• Use case - It is useful for understanding the total screen space the browser window occupies, which can be helpful for managing overall window layout or positioning new windows.

Example usage:

You can access the outerHeight value using the following Javascript code:

var fullWindowHeight = window.outerHeight;
console.log('The outer height of the window is:" + fullWindowHeight + "px");

5. screenX

The window.screenX property in JavaScript is a read-only property that returns the horizontal coordinate (X position) of the top-left corner of the current browser window, relative to the top-left corner of the physical screen or browser workspace in CSS pixels.

Key Characteristics:

• Measurement: It indicates how far the browser window is positioned from the left edge of the entire screen.
• Unit: The value is returned as a number representing CSS pixels.
• Read-only: You cannot change the window's position by assigning a new value to screenX; instead, methods like window.moveTo() or window.moveBy() are used for that purpose.
• Cross-Browser Differences: - while the concept is standard, older versions of some browsers (especially Firefox) sometimes used screenLeft interchangeably or reported slightly different values based on whether the measurement started from the screen edge or the application window edge. Modern browsers generally align well with the description above.

Example Usage in Javascript:

You can access the screenX value using the following Javascript code:

// Get the X cordinatate of the top-left corner of the window.
var horizontalPosition = window.screenX;

// Display the value (eg. in the browser console)
console.log("The horizontal position of the window is: " + horizontalPosition + "px from the left edge of the screen.");

6. screenY