The language of the web
JavaScript is the programming language of the web. Every web browser has a JavaScript engine built in, which runs it. Node.js runs the same language outside the browser, on servers and laptops.
Loading the page
A web page starts as HTML. The browser reads <button>Clicks: 0</button> and draws a button. It also builds the DOM: a tree of objects, one for each element, that JavaScript can read and change.
The next line is a script tag. It tells the browser to fetch the file count.js and hand it to the JavaScript engine. The engine runs the script once, top to bottom, one statement at a time.
Running the script
let makes a variable: a named box in memory. The engine puts 0 in a box called count. It will remember how many times the button has been clicked.
document is the page as JavaScript sees it. document.querySelector("button") searches the DOM for the first button and returns it. const keeps that button in btn, so later lines can use it.
addEventListener tells the button: whenever you are clicked, run this function. The function, lines 4 to 6, does not run yet. The script has finished, and the page waits for you.
Reacting to a click
You click. The browser creates a click event and calls the function you gave to addEventListener. Now, and only now, lines 4, 5 and 6 run, in order.
The engine reads 0 from count, adds 1, and puts 1 back in the same box. The old value is replaced: a variable made with let can change.
textContent is the text inside an element. Setting it changes the DOM, and the browser redraws the button: it now says "Clicks: 1". The page changed without loading again.
console.log writes a value to the console, a panel inside the browser's developer tools. It prints 1. Visitors do not see it; it is how you check what your code is doing.
Click again and the same three lines run again: count becomes 2, the button says "Clicks: 2", and the console prints 2. Events plus changes to the DOM make a page interactive.
What happens
// step 1/11 · language
JavaScript the programming language of web pages
runs in every web browser (its JavaScript engine)
and outside the browser with Node.js
used for making pages react to you
standard ECMAScript (ECMA-262)
Browser engines compile JavaScript to fast machine code as it runs (for example V8 in Chrome and Node.js, SpiderMonkey in Firefox, JavaScriptCore in Safari). The result is the same as running each statement in order, which is how the figure shows it. The named box is a simplification: count is a binding in the script's scope that refers to the number value. The button stored in btn is a reference to the DOM object, not a copy of it.