Browser Object Model (BOM) in JavaScript

Jul 18, 2024

Lecture Notes: Browser Object Model (BOM) in JavaScript

Introduction

  • Browser Object Model (BOM): Refers to everything in the browser window, including browser features outside of the basic DOM (Document Object Model).
  • Window Object: Core of BOM, contains the document object, console, etc.

Key BOM Features and Methods

  • Console: console.log() to print messages in the console. Example: console.log('Hello') outputs 'Hello' in the console.
  • Document: Use document to access and manipulate HTML content. Example: document.title = 'Hello JS' changes the page title.

Browser Window Operations

  • Open a new window: window.open('URL') opens a new browser window/tab with the specified URL.
  • Close a window: window.close() closes the current browser window/tab.
  • Resize window: window.resizeTo(width, height) resizes the browser window to given width and height.
  • Move window: window.moveTo(x, y) moves the browser window to the specified (x, y) screen coordinates.

Working with URLs

  • Parse URL: window.location object contains details about the current URL, such as protocol, hostname, pathname, and search parameters.
  • Change URL: window.location.href = 'newURL' changes the URL of the browser window.
  • Components of a URL: Protocol (http, https), domain, TLD (Top-Level Domain), path, and query parameters.

Local Storage and Session Storage

  • Save Data: Local storage saves data across sessions while session storage only saves data for the current session.
  • Example: localStorage.setItem('key', 'value'), sessionStorage.setItem('key', 'value') to store data.
  • Retrieve Data: localStorage.getItem('key'), sessionStorage.getItem('key') to fetch stored data.

Interacting with the User

  • Alert: window.alert('message') shows an alert box with the message. Blocks the browser until the user responds.
  • Confirm: window.confirm('message') shows a confirmation box, returns true or false based on userโ€™s choice.
  • Prompt: window.prompt('message', 'default value') shows a prompt box to take user input.

Using Timing Events

  • setTimeout(): setTimeout(function, delay) runs a function once after a specified delay (milliseconds).
  • setInterval(): setInterval(function, delay) repeatedly runs a function at the specified delay interval.
  • clearTimeout(): clearTimeout(timeoutID) clears a timeout set with setTimeout().
  • clearInterval(): clearInterval(intervalID) clears an interval set with setInterval().

Location Object

  • Reload the page: window.location.reload() reloads the current page.
  • Assign new URL: window.location.assign('URL') loads a new document.
  • Replace current document: window.location.replace('URL') replaces the current document with the new one without saving the current page in session history.

Advanced Window Methods

  • open(): Opens a URL in new or existing window/tab with specified features (width, height, etc.). Example: window.open('https://google.com', 'newwindow', 'width=400, height=400').
  • Managing Window Features: Control visibility and functionality of window elements like toolbars, scrollbars, location bar, etc.

History Object

  • Navigate History: window.history.back() and window.history.forward() navigate backward and forward in browser history.
  • Manipulate History: window.history.go(n) where n can be any integer to navigate by number of pages in history.

Scrolling Methods

  • scrollBy(): window.scrollBy(x, y) scrolls the document by specified x and y pixels.
  • scrollTo(): window.scrollTo(x, y) scrolls the document to specified coordinates.
  • scrollIntoView(): element.scrollIntoView() scrolls the document until the element is in view.

Practical Examples

  • Countdown Timer: Use setInterval() for creating countdowns. Update text every second until reaching zero.
  • Saving Preferences: Save user preferences like theme color using localStorage and retrieve them on subsequent visits.

Handling Dialog Boxes

  • window.alert(): Blocks execution until the user dismisses the message.
  • window.confirm(): Can perform actions based on whether the user clicked OK or Cancel.
  • window.prompt(): Collects input from the user. Useful for small data entry forms.

Summary

  • Browser Object Model (BOM) enhances control over the browser window and documents beyond the DOM manipulation.
  • Important in creating dynamic behaviors, handling browser windows/tabs, manipulating URLs, using storage effectively, and improving user interaction with timing events and prompt dialogs.