-
JS Setting Up Environment
-
JS Syntax
-
JS Comments
-
JS Generating OutPut
-
JS Variables
-
JS Data Types
-
JS String
-
JS String Methods & Properties
-
JS Template Literals
-
JS Operators
-
JS Conditional Statements
-
JS Break and Continue
-
JS Functions
-
JS DOM
-
JS DOM Methods and Elements
-
JS DOM HTML/CSS Manipulation
-
JS DOM Navigation & Nodes
-
JS Events
-
JS Array
-
JS Loops
-
JS Object
-
JS Accessors
-
JS Object Constructors
-
JS Prototype & Iterables
-
JS Date & Time Function
-
JS Math Function
-
JS Storage
-
JS Classes
-
JS Map & Set
-
JS Global Scope
-
JS Rest and Spread
-
JS Error Handling
-
JS Asynchronous
-
JS Promise
-
JS Async/Await
-
JS Node.js
-
JS Regular Expression
-
JS Fetch API
-
JS BOM
-
JS Form Validation
-
JS Practiced Example
-
JS Projects
The Browser Object Model (BOM)
The Browser Object Model (BOM) is a set of objects exposed by browsers that allows JavaScript to interact with the browser itself. While there are no official standards for the BOM, it provides a way to manipulate browser windows, control navigation, and handle various browser-related functionalities.
Key points about the Browser Object Model:
Hierarchy of Objects
The BOM consists of a hierarchy of objects that represent different aspects of the browser. The top-level object is usually the `window` object.
Window Object:
The `window` object represents the browser window and is supported by all browsers. It serves as a container for global JavaScript objects, functions, and variables.
Global variables become properties of the `window` object, and global functions become methods of the `window` object.
Example:
Window Size:
Two properties, `window.innerHeight` and `window.innerWidth`, can be used to determine the size of the browser window in pixels.
Example:
Other Window Methods:
Various methods are available for manipulating the browser window.
– window.open(): Open a new window.
– window.close(): Close the current window.
– window.moveTo(): Move the current window.
– window.resizeTo(): Resize the current window.
Example:
window.open(“https://example.com”, “_blank”);
The Browser Object Model is essential for handling browser-related operations and provides a way to create dynamic and interactive web pages. Keep in mind that certain methods like `window.open()` might be subject to browser popup-blocking policies and might not work as expected in all scenarios.
Here is the list of some Methods and Objects.
Course Video
Examples for Practice
You have to solve all the questions given below in the editor without copy-pasting.
1. Write a function getCurrentURL that uses the BOM to retrieve and log the current URL of the browser.
The task is to create a JavaScript function called getCurrentURL that uses the Browser Object Model (BOM) to retrieve and log the current URL of the browser.
1. BOM (Browser Object Model): The Browser Object Model (BOM) is a set of JavaScript objects provided by the browser to interact with the browser itself. One of the objects in the BOM is a window, which represents the browser window.
2. Current URL: The current URL of the browser can be accessed using the window.location object.
3. Log the URL: The function should log the current URL to the console.
Here’s an example program:
function getCurrentURL() {
// Access the current URL using window.location.href
const currentURL = window.location.href;
// Log the current URL to the console
console.log(‘Current URL:’, currentURL);
}
// Call the function to get and log the current URL
getCurrentURL();
Output
2. Create a function openNewTab that uses the BOM to open a new tab with a specified URL.
The task is to create a JavaScript function called openNewTab that uses the Browser Object Model (BOM) to open a new tab with a specified URL.
1. BOM (Browser Object Model): The Browser Object Model (BOM) is a set of JavaScript objects provided by the browser to interact with the browser itself. One of the functions available in the BOM is window.open(), which can be used to open a new browser window or tab.
2. Open a New Tab: The function should use window.open() to open a new tab with a specified URL.
Here’s an example program:
Note : Please run this program in Your Browser Console
function openNewTab(url) {
// Use window.open() to open a new tab with the specified URL
window.open(url, ‘_blank’);
}
// Example usage: Open a new tab with the URL ‘https://www.example.com’
openNewTab(‘https://www.example.com’);
Output
3. Write a function getWindowSize that uses the BOM to retrieve and log the width and height of the current browser window.
The task is to create a JavaScript function called getWindowSize that uses the Browser Object Model (BOM) to retrieve and log the width and height of the current browser window.
1. BOM (Browser Object Model): The Browser Object Model (BOM) is a set of JavaScript objects provided by the browser to interact with the browser itself. The window object in BOM provides information about the browser window.
2. Window Size: The width and height of the current browser window can be accessed using window.innerWidth for the width and window.innerHeight for the height.
3. Log the Size: The function should log the width and height of the window to the console.
Here’s an example program:
function getWindowSize() {
// Access the width and height of the current window
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
// Log the window size to the console
console.log(‘Window Width:’, windowWidth);
console.log(‘Window Height:’, windowHeight);
}
// Call the function to get and log the window size
getWindowSize();
Output
4. Create a function redirectPage that uses the BOM to redirect the user to a specified URL after a delay of 3 seconds.
The task is to create a JavaScript function called redirectPage that uses the Browser Object Model (BOM) to redirect the user to a specified URL after a delay of 3 seconds.
1. BOM (Browser Object Model): The Browser Object Model (BOM) is a set of JavaScript objects provided by the browser to interact with the browser itself. The window object in BOM provides methods for navigation.
2. Redirecting after Delay: The function should use setTimeout to introduce a delay of 3 seconds and then use window.location.href to redirect the user to the specified URL.
Here’s an example program:
Note : Please run this program in Your Browser Console
function redirectPage(targetURL) {
// Use setTimeout to introduce a delay of 3 seconds
setTimeout(function () {
// Redirect the user to the specified URL
window.location.href = targetURL;
}, 3000); // 3000 milliseconds (3 seconds)
}
// Example usage: Redirect to ‘https://www.example.com’ after a 3-second delay
redirectPage(‘https://www.example.com’);
Output
