Loading...

JavaScript Window

The shop has a bell. It is a paragraph, #bell, and it starts as blank. There is no form on this page.
window is the object for this tab. The document, the viewport width, and any var you declare in a plain script all sit on it. A let does not. The page reads four things and joins them. The line reads same / 4 / undefined / number.

Not the slip

The previous page refused an empty guest and a cup count outside 1 to 3. Its line was need guest / ok. This page does not look at #guest or #cups. The name cups here is a var, not a field.
The question is different: what can you reach through window?

One document

document is not a second copy. It is window.document. The bell found through window.document is the bell found through document.

The same document

javascript 
let bell = window.document.getElementById("bell");
let also = document.getElementById("bell");
bell.textContent = window.document === document ? "same" : "no";
console.log(bell.textContent);
console.log(bell === also);

The log is same, then true. One document, one bell.

A var hangs on the window

var cups = 4 in this script creates window.cups. Reading window.cups is the number 4. String only turns it into text for the bell.

Read a var through window

javascript 
var cups = 4;
let bell = document.getElementById("bell");
bell.textContent = String(window.cups);
console.log(bell.textContent);

The log is 4. The 4 is the variable, not a form field.

A let stays off the window

let kettle = 1 is real. It is not a property of window. window.kettle is undefined, and String of that is the word undefined.

A let is not on window

javascript 
let kettle = 1;
let bell = document.getElementById("bell");
bell.textContent = String(window.kettle);
console.log(bell.textContent);
console.log(kettle);

The log is undefined, then 1. The kettle exists. It just does not hang on window.

The width is a number

window.innerWidth is how many CSS pixels across the viewport are. typeof that value is "number". It is not text the way an input’s value is text.

Width is a number

javascript 
let bell = document.getElementById("bell");
bell.textContent = typeof window.innerWidth;
console.log(bell.textContent);

The log is number. The pixel count changes with the window. The type does not.

Leave the address alone

window.location.href is the address of this tab, and it is a string. Reading it is safe. Assigning a new address to it navigates away, and this page is gone. None of the snippets write to href.

Four reads, not a form

Nothing here trims a name or checks a range. The four reads are a yes-or-no on the document, the var, the missing let, and the type of the width. String(undefined) is the word undefined, not a blank bell.

The line under the bell

The script is at the end of the body. It declares var cups = 4 and let kettle = 1, then pushes four reads: whether the document is the same object, window.cups, window.kettle, and typeof window.innerWidth.

Page demo — the shop bell

html 
<!DOCTYPE html>
<html>
<head>
<title>shop-bell — page</title>
</head>
<body>
<p id="bell">blank</p>
<p id="line">…</p>
<script>
var cups = 4;
let kettle = 1;
let seen = [];
seen.push(window.document === document ? "same" : "no");
seen.push(String(window.cups));
seen.push(String(window.kettle));
seen.push(typeof window.innerWidth);
document.getElementById("line").textContent = seen.join(" / ");
</script>
</body>
</html>

The line reads same / 4 / undefined / number. The document matched. The var was visible on window. The let was not. The width’s type is number. The word blank is gone. need guest / ok is the previous page.

At the counter

  1. Compare window.document with document. The bell shows same.
  2. Declare var cups = 4 and read window.cups. The bell shows 4.
  3. Declare let kettle = 1 and read window.kettle. The bell shows undefined. kettle itself is still 1.
  4. Read typeof window.innerWidth. The bell shows number.
  5. Read the page line: same / 4 / undefined / number.

Misses at the counter

The bell shows one of those words, not a guest name.

  • Expecting window.kettle to be 1
  • Expecting window.cups to be undefined
  • Treating innerWidth as text
  • Assigning location.href and leaving the page
  • Reading the line as need guest / ok

Keep this

  • window.document and document are the same object
  • var cups = 4 is readable as window.cups
  • let kettle = 1 does not create window.kettle
  • typeof window.innerWidth is number
  • The page line reads same / 4 / undefined / number

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
5
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 55 of 55
Javascript Tutorial