Let's begin with the primary components involved in web interaction: the Web Browser and the Web Server. The Web Browser serves as the user interface, facilitating requests made over the internet network. Conversely, the Web Server responds to these requests. Both utilize the HTTPS protocol to establish a request/response architecture, enabling the manipulation of data displayed on websites through operations such as Create, Read, Update, and Delete (CRUD).

In JavaScript, the window object embodies the functionality of the web browser, while the global object represents the web server. Both window and global are globally accessible within the codebase, offering an array of properties and methods to manipulate and manage the Document Object Model (DOM). However, it's often unnecessary to explicitly reference window or global; JavaScript permits direct access to their properties and methods. For example, the following two lines of code achieve the same outcome, rendering the use of the window object to access and utilize its alert() function redundant.

  
  
      window.alert("Hello, I'm the Alert()")
       alert("Hello, I'm the Alert()")
  
  

In this lesson, our focus will be primarily on the window object rather than the global object. We'll delve into the properties of the window object, such as document, location, navigation, screen, history, localStorage, among others. These properties, in turn, are objects with their own distinct set of properties and methods. It's essential to note that in JavaScript, all these objects and properties are conventionally written in lowercase or lowerCamelCase.

THE WINDOW OBJECT.

In JavaScript, the window object serves as an interface representing the current window containing the Document Object Model (DOM). It offers a range of methods and properties designed to interact with the browser's window. Through this object, you gain control over the visible components of the website that you're manipulating, allowing you to tailor the user experience to your needs.

Exploring the window object reveals a plethora of properties and methods that offer valuable insights into various aspects such as user information, viewport details, operating system, device specifics, and browser characteristics. Understanding and utilizing these features enables the implementation of compelling effects, events, and enhancements, ultimately contributing to a more engaging, interactive, and responsive user experience.

THE MOST IMPORTANT WINDOW PROPERTIES.

1. DOCUMENT PROPERTY.

The document property grants access to and enables manipulation of all HTML elements within the browser's window. In JavaScript, the document interface represents every webpage loaded in the browser. It serves as an entry point into the webpage content, which constitutes the Document Object Model (DOM) tree, encompassing HTML elements such as body, table, and more HTML tags. When accessing either window.document or simply document, a reference to the DOM with all its HTML children is returned.

The DOM, or Document Object Model, is a JavaScript API that represents the structure of the document loaded in the browser's window. It consists of the HTML tree and the node tree, where each node represents parts of the DOM visible on the website, such as titles, sections, images, and links, which you can see in the viewport. So, The document is all the HTML content of a web page, including what is inside and outside the viewport. The viewport is the visible area of the document in the browser. When you browse a web page, the viewport shows a portion of the document, and you can scroll to see other parts of the same document that are outside the viewport. Therefore, the document is larger than the viewport, since it contains the entire contents of the web page, whereas the viewport is simply the window through which a portion of the document is displayed in a browser.

Please, look the follow picture, you can get, the different between window, document and viewport.

The DOM enables code running in a browser to access and interact with every node in the HTML tree. Through the document property, we can create, move, show, hide, delete, and modify every HTML element within the DOM, and attach listeners to establish events, such as button clicks.

While the following code snippet may appear complex at first glance, it is straightforward. By utilizing the document property, we gain access to an HTML component with its id = "open-modal", allowing us to define events and manipulate its CSS style.

  
  
       document.getElementById("open-modal").addEventListener( "click", function(){
          document.getElementById("modal").style.display = "block";
       });
  
  

Unlike the window object, the document object requires explicit invocation to access all its methods and properties. Therefore, it must be used in the following manner: document.function(). It's unnecessary to prefix window.document.function() for access.

2. LOCATION PROPERTY.

The location property gives access and allows manipulation of the Tab Searching URL of the browser’s window. In JavaScript, location allows us to set/get the current URL of the webpage in the browser’s window. Por instance, you can get or set through an event the hash, host, hostname, href, pathname, port, protocol the current website’s URL. You will able to redirection the user into several pages, using location.replace("https://www..."); or location.href = "https://www....".

How can you see, in the follow code example, a HTML Component Button, is a listener, target or trigger of event function that change the URL of the page, using location property.

  
  
        //HTML Code
        < button id="redirect" onclick="redirectToNewPage()"> Redirect 
       
       //JavaScript Code
       function redirectToNewPage(){
          location.href = "https://www.google.com"
       }
  
  

3. NAVIGATOR PROPERTY.

The navigator property furnishes comprehensive insights into the user's browser and device, offering valuable data for tailoring the user experience or executing specific actions based on the capabilities and characteristics of their browser and device.

Information obtainable via the navigator property includes, but is not limited to, browser version, cookie status, browser language, platform, online status, user agent, connection type, Bluetooth availability, device memory, among others. In the following code example, we detect the default language of the user's browser to dynamically adjust the page content to their preferred language.

  
  
        function customizeUserExperience() {
        // Get the user's browser language
        const userLanguage = navigator.language;

        // Check if the user's browser language is Spanish
        if (userLanguage === "es" || userLanguage === "es-ES") {
            document.documentElement.lang = "es";
            document.title = "Página web en español";
            document.querySelector("h1").textContent = "¡Hola, mundo!";
        } else {
            // If the user's browser language is not Spanish, say hello  English
            document.title = "Web page in English";
            document.querySelector("h1").textContent = "Hello, world!";
        }
  
  

4. HISTORY PROPERTY.

The history object pertains to the user's browsing history within the browser. It enables access to and management of the user's browsing session, encompassing previously visited pages and the capability to navigate backward or forward through the browsing history.The history object offers various properties and methods, including:

history.length: Returns the number of pages in the browsing history.
history.back(): Navigates the user to the previous page in the browsing history.
history.forward(): Navigates the user to the next page in the browsing history.
history.go(): Navigates the user to a specific page in the browsing history.
Here's a practical example to illustrate its utility:

  
  
        //HTML Code
        < button id="redirect" onclick="goBack()">◀️
       
       //JavaScript Code
        function goBack() {
            history.back();
        }
  
  

5. SCREEN PROPERTY.

The screen property furnishes essential information regarding the user's screen, encompassing details such as its width, height, color depth, and pixel depth. Unlike the viewport, which pertains to the visible area of the browser window, the screen refers to the physical display of the device.

Key properties of the screen object include:

screen.width: Indicates the width of the user's physical display.
screen.height: Specifies the height of the user's physical display. It's important to note that these properties, screen.width and screen.height, remain constant as they represent the physical dimensions of the user's device.

Contrastingly, innerWidth and innerHeight are properties of the window object, providing the width and height of the viewport, which excludes elements like the browser's URL bar and open tabs, as well as the Dev Tools area if activated.

For precise control over the visualization of your website, understanding the dimensions of various elements is crucial. To access the dimensions of the viewport without considering scrollbars, you can use:
document.documentElement.clientWidth
document.documentElement.clientHeight

If you specifically need the dimensions of the HTML body element, you would access them as follows:
document.body.clientWidth
document.body.clientHeight

In essence, document.documentElement represents the entire HTML element component, while document.body specifically refers to the "< body >" tag of your webpage. Familiarity with these dimensions enables the creation of responsive designs that adapt seamlessly to different screen sizes, preventing elements from being hidden or overlapping.