Skip to content

Latest commit

 

History

History
292 lines (195 loc) · 13.2 KB

39-BOM.md

File metadata and controls

292 lines (195 loc) · 13.2 KB
Raw

Window object

The BOM (Browser Object Model) is a collection of APIs that allows JavaScript to interact with the browser. The BOM includes the Window object, which represents the current browser window or tab.

The Window object has many properties and methods that can be used in JavaScript to manipulate the browser window.

One useful property of the Window object is the document property, which represents the current web page loaded in the window. For example:

console.log(window.document.title); // prints the title of the current web page

Another useful method of the Window object is the alert() method, which displays an alert box in the browser window. For example:

window.alert("Hello World!"); // displays "Hello World!" in an alert box

The Window object also provides access to the browser's history, location, and navigator objects. For example:

console.log(window.history.length); // prints the number of items in the browser's history
console.log(window.location.href); // prints the URL of the current web page
console.log(window.navigator.userAgent); // prints information about the user's browser and operating system

Overall, the Window object is a powerful tool for interacting with the browser and manipulating the current web page.

History object

The BOM (Browser Object Model) History object is a built-in JavaScript object that provides information about the user's browsing history. It represents the session history, which is the list of pages visited in the current window or tab.

The History object has several properties and methods that can be used to navigate through the user's browsing history. Some of the important properties are:

  • length: Returns the number of URLs in the history list.
  • state: Returns an object representing the state at the top of the history stack.

Some of the important methods are:

  • back(): Loads the previous URL in the history list.
  • forward(): Loads the next URL in the history list.
  • go(n): Loads the URL n positions away from the current URL in the history list.

Here is an example that demonstrates how to use the History object in JavaScript:

// Check if the browser supports the History object
if (window.history) {
  // Get the length of the history list
  console.log("History length: " + window.history.length);

  // Navigate back one page
  window.history.back();

  // Navigate forward one page
  window.history.forward();

  // Navigate to the third page in the history list
  window.history.go(2);

  // Get the current state of the history stack
  console.log("Current state: ", window.history.state);
}

In this example, we first check if the browser supports the History object using the window.history global variable. Then, we use the length property to get the number of URLs in the history list. We then use the back(), forward(), and go() methods to navigate through the history list. Finally, we use the state property to get the current state of the history stack.

Navigator Object

The BOM (Browser Object Model) Navigator object provides information about the web browser that is currently being used to view a webpage. It contains properties that describe various aspects of the user's system and the browser, including the name, version, platform, and language.

Here is an example of how to use the BOM Navigator Object in JavaScript:

// Get the navigator object
const nav = window.navigator;

// Get the name of the browser
const browserName = nav.appName;

// Get the version of the browser
const browserVersion = nav.appVersion;

// Get the user agent string
const userAgent = nav.userAgent;

// Get the language of the browser
const browserLanguage = nav.language;

// Get the operating system of the user
const os = nav.platform;

// Output the results to the console
console.log(`Browser Name: ${browserName}`);
console.log(`Browser Version: ${browserVersion}`);
console.log(`User Agent: ${userAgent}`);
console.log(`Browser Language: ${browserLanguage}`);
console.log(`Operating System: ${os}`);

In this example, we first get the navigator object by accessing it from the window object. We then use various properties of the navigator object to retrieve information about the user's browser and system.

The appName property returns the name of the browser, such as "Microsoft Internet Explorer" or "Google Chrome". The appVersion property returns the version number of the browser, such as "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36".

The userAgent property returns a string that identifies the user's browser, including its name, version number, and operating system. The language property returns the language code for the browser's user interface, such as "en-US" for U.S. English.

Finally, the platform property returns the operating system on which the browser is running, such as "Win32" or "MacIntel".

By using the BOM Navigator object, developers can tailor their web applications to work optimally with different browsers and systems.

Screen Object

BOM (Browser Object Model) is a set of objects provided by the browser to interact with different aspects of the client-side environment. The BOM Screen object represents the physical display or monitor screen of the user's device and provides information about its size, color depth, orientation, and other related properties.

In JavaScript, you can access the BOM Screen object through the global screen variable. Here is an example:

// Get the width and height of the screen
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;

// Get the color depth of the screen
const screenColorDepth = window.screen.colorDepth;

// Display the screen information
console.log(`Screen width: ${screenWidth}`);
console.log(`Screen height: ${screenHeight}`);
console.log(`Screen color depth: ${screenColorDepth}`);

In this example, we are using the width, height, and colorDepth properties of the screen object to get information about the user's device. We then log this information to the console for display purposes.

The BOM Screen object also provides other properties like availWidth, availHeight, pixelDepth, orientation, etc., which can be used to retrieve additional information about the user's screen.

Overall, the BOM Screen object is a useful tool for web developers to create responsive web applications that adapt to the user's screen size and resolution.

Location Object

The BOM (Browser Object Model) Location object represents the current URL of the web page loaded in the browser window. It provides various properties and methods to work with the URL.

Here are some examples of using the BOM Location object in JavaScript:

  1. Get the current URL:
const currentURL = window.location.href;
console.log(currentURL); // "https://www.example.com/page.html"
  1. Change the current URL:
window.location.href = "https://www.example.com/newpage.html";
  1. Get the protocol of the current URL:
const protocol = window.location.protocol;
console.log(protocol); // "https:"
  1. Get the hostname of the current URL:
const hostname = window.location.hostname;
console.log(hostname); // "www.example.com"
  1. Get the pathname of the current URL:
const pathname = window.location.pathname;
console.log(pathname); // "/page.html"
  1. Get the search string of the current URL:
const search = window.location.search;
console.log(search); // "?query=example"
  1. Reload the current page:
window.location.reload();

These are just a few examples of what you can do with the BOM Location object in JavaScript. It is a powerful tool for working with URLs in web applications.

Timing

BOM (Browser Object Model) Timing in JavaScript refers to the mechanism of measuring the loading and processing times of web pages within a web browser. This timing information can be accessed using the Performance API, which provides detailed metrics about various aspects of page loading, including network latency, DOM construction, and script execution.

The following is an example of how to use the Performance API to measure the time it takes for a web page to load:

// Start timer
const startTime = window.performance.now();

// Load page resources
window.addEventListener('load', () => {
  // Calculate page load time
  const loadTime = window.performance.now() - startTime;
  console.log(`Page loaded in ${loadTime} milliseconds`);
});

In this example, we first start a timer using window.performance.now(), which returns the current timestamp in milliseconds. We then wait for the load event to fire, indicating that all page resources have finished loading, and calculate the page load time by subtracting the start time from the current timestamp. Finally, we log the load time to the console.

Using the Performance API, we can also measure the time it takes to execute specific pieces of code by wrapping them in a performance.mark() and performance.measure() method calls. For example:

// Mark the start time
performance.mark('start');

// Execute some code
for (let i = 0; i < 10000000; i++) {
  // do something
}

// Mark the end time
performance.mark('end');

// Measure the elapsed time
performance.measure('code execution time', 'start', 'end');

In this example, we first mark the start time using performance.mark('start'). We then execute some code and mark the end time using performance.mark('end'). Finally, we measure the elapsed time between the two marks using performance.measure('code execution time', 'start', 'end'). The resulting measurement can be accessed using performance.getEntriesByName('code execution time')[0].duration, which returns the duration in milliseconds.

Cookies

BOM (Browser Object Model) Cookies are small text files that are used by websites to store information on the user's device. These cookies are stored in the user's browser and can be accessed and modified using JavaScript.

To create a cookie using JavaScript, you can use the document.cookie property. The syntax for creating a cookie is as follows:

document.cookie = "name=value; expires=expiration_date; path=path_name";

Here, name refers to the name of the cookie, value refers to the value of the cookie, expires refers to the expiration date of the cookie, and path refers to the path where the cookie is valid.

For example, to create a cookie named "username" with a value of "JohnDoe" that expires on April 30, 2023 and is valid on all pages, you can use the following code:

document.cookie = "username=JohnDoe; expires=Fri, 30 Apr 2023 00:00:00 UTC; path=/";

To read the value of a cookie, you can also use the document.cookie property. However, this property returns a string containing all the cookies for the current domain. You can parse this string to get the value of a specific cookie.

For example, to read the value of the "username" cookie, you can use the following code:

let cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
  let cookie = cookies[i].trim();
  if (cookie.startsWith("username=")) {
    let username = cookie.substring("username=".length, cookie.length);
    console.log(username);
    break;
  }
}

This code splits the document.cookie string into an array of individual cookies, and then loops through each cookie to find the one with the name "username". Once found, it extracts the value of the cookie and logs it to the console.

LocalStorage

BOM (Browser Object Model) LocalStorage is a client-side storage mechanism that allows web applications to store key-value pairs in the user's browser. It is a part of the window object and is accessible through the localStorage property.

Here's an example of how to use BOM LocalStorage in JavaScript:

// Store data in LocalStorage
localStorage.setItem('username', 'JohnDoe');
localStorage.setItem('email', '[email protected]');

// Retrieve data from LocalStorage
const username = localStorage.getItem('username');
const email = localStorage.getItem('email');

// Remove data from LocalStorage
localStorage.removeItem('username');
localStorage.clear();

In the above example, we first store two key-value pairs ('username' and 'email') in LocalStorage using the setItem() method. We can retrieve the stored data using the getItem() method and passing it the key of the desired value. We can also remove data using the removeItem() method or clear all stored data using the clear() method.

Note that the data stored in LocalStorage persists even after the user closes the browser or navigates away from the page. This makes it useful for storing user preferences or other persistent data that needs to be accessed between sessions. However, it is important to be mindful of the amount of data being stored, as LocalStorage has a limit of around 5-10MB depending on the browser.