Javscript BOM ( Browser Object Model)

JavaScript browser object model (BOM) navigation: exposed methods

The browser object model (BOM) is an important part of JavaScript that allows you to interact with the browser itself. While the DOM deals with the structure and content of the document, the BOM focuses on the browser window and its components. In this article, we'll explore different BOM techniques, including their implementation, real-life examples, and programmatic use cases.

Access window properties

windows.innerHeight and windows.innerWidth

This property returns the internal height and width of the browser window's content area. Useful when you need to dynamically adjust the schedule based on available space.

Implementation:

const windowHeight = windows.innerHeight;
const windowsWidth = windows.innerWidth;

Real life example:

Please refer to the website to adjust the layout according to the screen size of your device. You can use this property to determine available screen properties and adapt the UI accordingly.

Programming example:

if (windows.innerWidth < 768) {
  // Adjust layout for small screens
} else {
  // Use default mode
}

Control browser behavior

windows.open()

This method opens a new browser window or tab that allows you to control its dimensions, content, and other features.

Implementation:

const newWindow = windows.open('https://www.example.com', 'exampleWindow', 'width = 500, height = 300');

Real life example:

Imagine implementing a feature in your web application that opens the user guide in a separate window for reference when interacting with the main application.

Programming example:

document.querySelector('#openGuideButton'). addEventListener ( 'click' , () => {
  windows.open('https://www.example.com/user-guide', 'userGuide', 'width=800, height=600');
});

User interaction

windows.alert()

The notify() method displays a simple dialog box with a message and an OK button. It is often used to provide important messages or notifications to users.

Implementation:

windows.alert('Hello, world!');

Real life example:
When a user tries to change a resource, you can use an alert to confirm their action and prevent accidental deletion.

Programming example:

const deleteButton = document.querySelector('#deleteButton');
deleteButton.addEventListener( 'click', () => {
  const confirmDelete = windows.confirm('Are you sure you want to delete this item?');
  if (confirmDelete) {
    // Perform the shutdown
  }
});

Navigate browsing history

windows.history

The "History" object provides methods to access the browser's history and control backward and forward actions.

Implementation:

// One full page
windows.history.back();

// Go forward one page
windows.history.forward();

Real life example:
In a single page application (SPA), you can use the "history" object to perform custom navigation without reloading the page.

Programming example:

const backButton = document.querySelector('#backButton');
backButton.addEventListener( 'click', () => {
  windows.history.back();
});

The results

The browser object model (BOM) exposes several methods that allow developers to interact with the browser environment by providing additional capabilities than the document object model (DOM). Whether you're designing layouts, controlling browser behavior, or managing user interactions, these techniques offer a powerful toolbox for improving your web applications.