BOM Elements and Cookies in Web Development

Introduction

This lesson introduces two core concepts in web development – Browser Object Model (BOM) elements and Cookies. The BOM is a hierarchy of objects that represent a web browser's interface to a web page, while cookies serve as temporary storage for user data on the client's computer.

BOM Elements

Definition

The Browser Object Model (BOM) is a representation of the current browser window in JavaScript. It consists of objects that model items in a browser's interface, such as the window itself, the document displayed in that window, and any form fields or other elements within the document.

Key Points:

• The BOM provides a way for JavaScript to interact with the browser.

• It contains various objects, including window, document, history, location, screen, and more.

• Each object has properties and methods that can be manipulated using JavaScript.

Code Examples

Accessing the window object:

console.log(window.innerHeight); // prints the inner height of the window

Manipulating the location object:

window.location.href = '<https://www.google.com>'; // redirects the browser to Google's homepage

Cookies

Definition

Cookies are small text files stored on a user's computer by their web browser. They contain data specific to a particular client and website and can be accessed either by the web server or the client's computer. Cookies are often used to remember stateful information or to record the user's browsing activity.

Key Points:

• Cookies are stored on the client's computer.

• They can store a range of data, including usernames, passwords, shopping cart items, etc.

• The data in cookies persists even when the browser is refreshed or closed and reopened.

How Cookies Work

When a user visits a website, the web server may send a cookie to the user's browser. If the browser accepts the cookie, it is stored on the user's computer. When the user revisits that website, the browser sends the cookie back to the server, allowing the server to remember the user's previous activity.

Code Examples

Creating a cookie with JavaScript:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

Reading all cookies from the browser:

console.log(document.cookie);

Conclusion

Understanding BOM elements and cookies is crucial for manipulating web browser behaviors and maintaining stateful information in web applications. They form a fundamental part of client-side scripting and web development.

Reference

The content in this document is based on the original notes provided in Azerbaijani. For further details, you can refer to the original document using the following link:

Original Note - Azerbaijani Version