The browser environment

JavaScript inside a browser

You already know a lot of JavaScript: values, functions, objects, scope, classes, errors, and code that waits. Stage 7 adds something new. Your code now runs inside a host. A host is the program that runs JavaScript and adds its own extra tools. Here, the host is the web browser.

The browser gives your code objects that are not part of the language itself. These objects make web pages possible. For example, document lets you read and change the page.

This lesson answers five questions:

• What is window?
• Why does document exist?
• What do people mean by "BOM"?
• Which written standards describe these objects?
• Why don't a page script, a module script, a worker, and Node.js all have the same global names?

const price = 3;
const total = price * 2;
console.log(total);

Line 1 stores the number 3 in price. Line 2 multiplies it by 2. Line 3 prints 6. This code needs no page, no web address, and no browser window. So it runs the same way in a browser, in Node.js, or in a test runner.

Two earlier lessons cover the background: Engines, runtimes & hosts and Manuals & specifications. This lesson is about the browser tools you will use in every lesson about the page that comes next.

In a page script, the browser gives you a big object called window. It is the global object: the object where JavaScript looks for global names. That is why you can write alert("Hi") instead of window.alert("Hi"). Your code has no variable called alert, so JavaScript looks on window and finds it there.

A classic script is a normal <script> tag, without type="module". A top-level name is one made outside every function and block. In a classic script, top-level names work in two different ways:

• Top-level var and top-level function declarations become properties on window. You saw this in the var and the global object lesson.
• Top-level let, const, and class make global names too, but they are not properties on window. The browser keeps them in a separate list of global names.

Other classic scripts on the same page can still use those let names. They just can't reach them through window.

1var fruit = "mango";Run2function greet() {3  return "hello from a classic script";4}5console.log("fruit" in globalThis);6console.log(globalThis.fruit);7console.log(typeof greet);

Now let a real page answer the same question. The explorer below runs fixed code inside an iframe, a small page inside this page. The iframe is sandboxed: its permissions are locked down. It sends its results to this page as a message. This page checks event.source first, so it only trusts that one frame.

Press Module script to switch to <script type="module">. In a module, top-level names stay inside the module. Even var fruit no longer makes window.fruit.

1<div id="banner">Named access demo</div>2<script>3var fruit = "mango";4let veggie = "carrot";5function greet() { return "hi"; }6parent.postMessage({7  source: "global-explorer",8  mode: "classic",9  rows: [10    ["'fruit' in window", String("fruit" in window)],11    ["window.veggie", String(window.veggie)],12    ["typeof window.greet", typeof window.greet],13    ["globalThis === window", String(globalThis === window)],14    ["window.window === window", String(window.window === window)],15    ["self === window", String(self === window)],16    ["window.banner exists", String(Boolean(window.banner))]17  ]18}, "*");19</script>

console.log(typeof window);
console.log(globalThis === window);

Line 1 prints object, because a page has a window object. Line 2 prints true. globalThis is a name for the global object that works in every host. In a page, it gives you window.

var name = "Asha";
console.log(name);
console.log(window.name);

Line 2 prints Asha. Line 3 prints Asha too. The browser already has a property called window.name. In a classic script, top-level var name doesn't make a new variable. It reuses that browser property. The browser turns anything you store in window.name into a string, so var name = 42 gives you "42".

So name is a poor global name. Use a local variable, or a clearer name such as profileName.

When code really needs "the global object, wherever I am running", use globalThis. It means:

• In a page script: window, so globalThis === window is true. (Strictly, the browser gives you a stand-in object called a WindowProxy. It passes everything on to the current window.)
• In a worker: the worker's own global object, which is also called self.
• In Node.js: the Node.js global object, which is also called global.

The most important name on window for the next lesson is document. It is a live copy of the HTML page, made of objects. You can search it, read parts of it, and change it. The other names describe the browser around the page: the web address, the pages visited in this tab, the screen, and the device.

The DOM (Document Object Model) is the standard way to show a page as a tree of objects, called nodes. Scripts can read and change those nodes. The next lesson, "The DOM tree", looks at that tree up close.

BOM is short for Browser Object Model. It is a nickname, not an official standard. People use it for the browser objects that are not the page itself:

• location: the web address of the page.
• history: the pages visited in this tab.
• navigator: facts about the browser and the device.
• screen: the size of the screen.
• Pop-up dialogs, such as alert.

Most of these are written down in the HTML Standard. There is no single official "BOM standard".

console.log(typeof window.innerWidth);
console.log(window.innerWidth > 0);

The viewport is the part of the browser window that shows the page. innerWidth is its width in pixels. Line 1 prints number. Line 2 prints true, because a visible viewport is always wider than 0.

Real sites usually change their look with CSS media queries (CSS rules that apply only at some screen sizes). They use JavaScript for behavior, such as opening a menu on small screens.

console.log(typeof location.href);
console.log(typeof location.pathname);
console.log(new URL(location.href).searchParams.get("q") ?? "no query");

location.href is the whole web address. location.pathname is the part after the site name, such as /javascript/browser-environment. Lines 1 and 2 print string, because both are text.

Line 3 reads the query: the part of the address after ?. new URL(location.href) turns the address into an object with handy parts. Its searchParams.get("q") finds the value of q. For ?q=shoes, line 3 prints shoes. With no q, get gives null, and ?? swaps in no query. A search page can use the value to ask for matching results.

const greeting = navigator.language.startsWith("en")
  ? "Hello"
  : "Welcome";
console.log(greeting);

navigator.language is the reader's language as a short tag, such as en-GB for British English. Line 1 checks whether the tag starts with en. If it does, the greeting is Hello. If not, it is Welcome. Line 4 prints the greeting.

This is a small safe default, not a full translation system.

document.title = "Cart";
console.log(document.title);

document.title is the text shown on the browser tab. Line 1 sets it to Cart, and line 2 prints Cart. A shop can change the title after the user adds an item. Keep the title short and clear.

1const snapshot = {2  pathname: location.pathname,3  language: navigator.language,4  online: navigator.onLine,5  viewport: innerWidth + " × " + innerHeight,6  screenWidth: screen.width,7  devicePixelRatio,8  historyLength: history.length,9  title: document.title,10  readyState: document.readyState11};

Browser tools look like one big pile of objects. In fact they come from several written standards. A standard is a rule book that every browser follows. Each standard covers a different part. This explains three puzzles:

• Array.prototype.map works in Node.js, because it is part of the language.
• document.querySelector doesn't work in Node.js, because it comes from a browser standard.
• fetch works in more than one host, but it is still not part of the language.

So ask where a name comes from, not whether it "is JavaScript". The replay below runs three checks in a Node.js-like place, with no page:

• Array.isArray([]) is language code, so it works and gives true.
• typeof document gives "undefined", because there is no page.
• typeof globalThis gives "object", because every host has a global object.

1const result = {Run2  languageValue: Array.isArray([]),3  pageApi: typeof document,4  sharedGlobal: typeof globalThis5};6console.log(result.languageValue);7console.log(result.pageApi);8console.log(result.sharedGlobal);

Each row below names some tools and the standard that describes them. Read across to see why it matters to you. A "Living Standard" is one that is updated all the time, not in big numbered versions.

console.log(window.setTimeout === setTimeout);
console.log(typeof setTimeout);

Line 1 prints true. The short name setTimeout and window.setTimeout are the same browser function. Line 2 prints function.

setTimeout asks the browser to run some code later. It does not pause the code that is running now.

You don't need to remember standard names to write a click handler. But keep one habit. When a name is missing, ask: is it part of the language, a browser tool, a worker tool, or a Node.js tool? That one question saves a lot of confusion.

"JavaScript runs in the browser" is true, but it is not the whole story. There are four common places to run it:

• A classic page script runs in the page. It has window and document.
• A module page script (<script type="module">) also runs in the page and can use browser tools. But its top-level names stay inside the module.
• A Web Worker runs JavaScript in the background, away from the page's main thread. The main thread is the single line of work that also handles clicks and draws the page. A worker has self, but no document.
• Node.js runs outside the browser. It has process and global, but no window.

A worker is useful for long calculations, because the page keeps reacting to clicks while the worker is busy. A worker can't change the page directly. It sends messages to the page instead.

Node.js is a different host again. Its process object helps with servers and scripts. But a Node.js program has no page.

console.log(typeof window === "object"
  ? "browser-like"
  : "node-like");

The ? : picks one of two texts. In a browser page, typeof window is "object", so it prints browser-like. In a normal Node.js program it prints node-like.

This check can help in code that both hosts share. But it is safer to check for the exact tool you need, such as typeof document. Don't guess the whole host from one name.

1self.postMessage({2  windowType: typeof window,3  documentType: typeof document,4  selfType: typeof self,5  importScriptsType: typeof importScripts,6  globalThisType: typeof globalThis7});

Each row below is one place where JavaScript runs. Read across to see its global names, whether it can change the page, and what it is usually used for.

Where you will use this

You use these ideas whenever code reaches outside the language. The code below is normal front-end code. It does four things:

• Line 1 finds an element on the page, using the DOM.
• Line 4 reads the web address from location.
• Line 5 asks navigator whether the browser thinks it is online.
• Lines 9 and 10 listen for two browser events: the browser going online, and going offline.

1const status = document.querySelector("#status");2 3function describePage() {4  const path = location.pathname;5  const online = navigator.onLine ? "online" : "offline";6  status.textContent = `You are on ${path} and currently ${online}.`;7}8 9window.addEventListener("online", describePage);10window.addEventListener("offline", describePage);11describePage();

history.pushState({}, "", "#search");
console.log(location.hash);

history.pushState changes the address and adds a step to the tab's history. It does not load a new page. The #search part of an address is called the hash, so line 2 prints #search.

This example has no Run button. The lesson editor runs code in a locked-down frame that has no real web address of its own, so pushState can't work there. Try it on a normal page of your own site.

This is why it helps to keep the language and the host apart. Three examples from the status code above:

• If the code fails in a Node.js test, suspect document first. Node.js has no page.
• If status is null, the element is not on the page, or the script ran before the element existed.
• If navigator.onLine says online but requests still fail, remember that it is only the browser's guess. It doesn't prove that your server can be reached.

• "Every global name is on window." In a classic script, top-level let, const, and class make global names that are not properties on window.
• "Modules can't use browser tools." A browser module can use document, location, and the rest. Only its own top-level names stay inside the module.
• "BOM is an official standard, like the DOM." BOM is only a nickname. Most of these objects are described in the HTML Standard and other web standards.
• "fetch and setTimeout are part of the language." They come from the host. The language describes promises. The host adds tools such as timers and network requests, which make and use promises.
• "A worker is a small page." A worker runs JavaScript, but it has no document. It can't change the page directly.
• "Named access is handy, so I should use it." It is old behavior, and names can clash. Find elements through document instead.

alert("Saved");
const confirmed = confirm("Delete this item?");
const answer = prompt("Your name?");
console.log(confirmed, answer);

alert, confirm, and prompt each show a pop-up box. The page stops reacting until the reader answers. This code has no Run button, because an automatic editor can't answer the pop-ups.

Modern sites usually use a <dialog> element or their own form instead. These don't freeze the page's code while they wait.

Key takeaways

• ECMAScript is the JavaScript language itself. The browser, as the host, adds web tools around it.
• In a page script, window is the global object, and globalThis === window is true.
• In a classic script, top-level var and function declarations become properties on window. Top-level let, const, and class don't, and nothing at the top level of a module does.
• The DOM is the standard for the page as a tree of objects. BOM is a nickname for the browser objects around the page, and most of them are described in the HTML Standard.
• Workers and Node.js run the same language, but they don't have the same global names as a page.

Final definition: the browser environment is JavaScript plus the objects a browser adds, based on shared standards, so your code can read and change a web page.

Up next: The DOM tree.