Skill Maps

Where does JavaScript Live?

JavaScript was originally created to run inside web browsers. When your code runs in a browser, it doesn't just perform math and logic; it gains access to a massive set of built-in tools called APIs (Application Programming Interfaces). These tools allow your code to interact with the browser window, the web page itself, and the user's system.

Imagine the browser as a house, and JavaScript as the smart home system. To control the house, the system needs specific interfaces. In the browser, these interfaces are divided into three main components: Window, DOM, and BOM.

1. Window: The Global Object

The window object is the absolute " root " or the highest level of the browser's JavaScript environment. You can think of it as the ultimate container for everything else.

It serves two primary roles:

  1. The Global Scope: It holds all global variables and built-in JavaScript functions. For example, when you use the alert() function, you are actually calling window.alert().
  2. The Browser Window itself: It represents the physical browser tab or window. You can use it to find out the window's inner height, check the scroll position, open new tabs, or close the current one.

Try interacting with the window object right now. Type the command below with your keyboard and click " Run " :

JS Console

Type: window.innerHeight

Now try typing window.innerWidth and run it again to see the width!

2. DOM (Document Object Model): The Web Page

This is the most important part for web developers. The DOM is an object-oriented representation of your HTML page.

When the browser loads your HTML file, it reads your tags (<div>, <p>, <body>) and converts them into JavaScript objects.

  • The Entry Point: The document object is your main access point to this tree.
  • Total Control: Through the document object, you can dynamically change the text of a paragraph, change the color of a button, create new elements, or delete existing ones.

Let's check the title of the current document you are reading. Type this command:

JS Console

Type: document.title

Or see the URL of this exact page via the DOM:

JS Console

Type: document.URL

3. BOM (Browser Object Model): Everything Else

While the DOM deals exclusively with the content of the page, the BOM deals with the browser environment outside the page content.

It provides objects to interact with the browser itself:

  • navigator: Gives you information about the user's browser, operating system, and hardware.
  • location: Represents the current URL in the address bar.

Let's find out what browser and operating system you are using right now. Ask the navigator for its User Agent string by typing:

JS Console

Type: navigator.userAgent

Note

Modern DOM and BOM standards are meticulously documented in the WHATWG (Web Hypertext Application Technology Working Group) specifications. This strict standardization ensures that your JavaScript code works consistently across Chrome, Firefox, Safari, and other modern browsers.