Introduction to the Browser Object Model

JavaScript consists of three main components: ECMAScript (the core language), DOM (Document Object Model), and BOM (Browser Object Model). While ECMAScript defines the syntax and core features, the BOM provides JavaScript with the ability to interact with the browser itself.

The Browser Object Model allows scripts to interact with aspects of the browser outside of the webpage content. Unlike the DOM, which focuses on the document structure, the BOM deals with browser windows and functionality.

The Window Object

The window object serves as the global object in client-side JavaScript and represents the browser window itself. It's the root of the BOM hierarchy and contains numerous properties and methods that enable browser interaction.

Since the window object is the global object, its properties and methods can be accessed directly without the window prefix. For instance, window.document.write() can be simplified to document.write().

Key properties and methods of the window object include:

• window.innerHeight - Returns the height of the browser window's content area
• window.innerWidth - Returns the width of the browser window's content area
• window.open() - Opens a new browser window
• window.close() - Closes the current browser window

Window Sub-objects

Navigator Object

The navigator object cotnains information about the browser itself:

browserInfo.appName      // Full name of the web browser
browserInfo.appVersion   // Detailed string of vendor and version
browserInfo.userAgent    // Most client information
browserInfo.platform     // Operating system where the browser runs

Screen Object

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

// Available screen properties
display.availWidth  // Available screen width
display.availHeight // Available screen height

History Object

The history object allows navigation through the user's session history:

pageHistory.forward()  // Move forward one page
pageHistory.back()     // Move back one page

Location Object

The location object contains information about the current URL and provides methods for navigation:

currentLocation.href          // Get the current URL
currentLocation.href="https://example.com" // Navigate to a new page
currentLocation.reload()      // Reload the current page

Browser Dialog Boxes

JavaScript provides three types of dialog boxes for user interaction:

Alert Box

An alert box dislpays a message with an OK button. The user must click OK to proceed:

alert("Important message here!");

Confirm Box

A confirm box displays a message with OK and Cancel buttons. It returns true if the user clicks OK and false if they click Cancel:

let userConfirmed = confirm("Are you sure you want to continue?");

Prompt Box

A prompt box displays a message, an input field, and OK/Cancel buttons. It returns the input value if OK is clicked, or null if Cancel is clicked:

let userInput = prompt("Please enter your name:", "Guest");

Timing Functions

JavaScript allows you to execute code at specified time intervals, enabling dynamic content updates and timed operations.

setTimeout()

The setTimeout() method executes a function once after a specified delay:

let timeoutID = setTimeout(function() {
  console.log("This message appears after 3 seconds");
}, 3000);

// To cancel the timeout before it executes
clearTimeout(timeoutID);

setInterval()

The setInterval() method repeatedly executes a function at specified intervals:

let intervalID = setInterval(function() {
  console.log("This message appears every 3 seconds");
}, 3000);

// To stop the interval
clearInterval(intervalID);

Here's a more complex example that combines timing functions:

function showMessage() {
  alert("Hello there!");
}

function setupTimers() {
  // Set up a repeating interval
  let interval = setInterval(showMessage, 3000);
  
  // Set up a timeout to clear the interval after 9 seconds
  setTimeout(function() {
    clearInterval(interval);
  }, 9000);
}

setupTimers();