What JavaScript is
JavaScript is the programming language of the web: every browser has an engine that runs it, and Node.js runs it outside the browser too. Follow a button that counts clicks, from the HTML page and the script tag, through three lines that run once, to a function that runs on every click, updates a variable, changes the page and writes to the console.
Try it
0/1 exercises passed
Make JavaScript calculate
A coffee costs 3 and you buy 2. Store their product in total, then print total with console.log().
Ctrl/Cmd + Enter to run. Tab indents; Escape then Tab leaves the editor.
Run your code to see its output.
- Check your code when you’re ready.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01Where does JavaScript run?
Every web browser has a JavaScript engine built in. Node.js runs the same language outside the browser, for example on servers.
02What is the DOM?
The browser builds the DOM from the HTML. Changing it, for example with textContent, changes what the page shows.
03When the script first runs, what does line 3, btn.addEventListener("click", () => { ... }), do?
addEventListener only registers the function. Lines 4 to 6 run later, once per click.
04The button has been clicked twice. What does it say, and what is in count?
Each click runs count = count + 1, then sets the button's text to "Clicks: " + count. After two clicks both show 2.
05What does console.log(count) do?
console.log writes to the developer console. Visitors don't see it; it is for checking what your code does.
Glossary
- JavaScript
- The programming language of the web. Browsers run it to make pages interactive; Node.js runs it outside the browser.
- JavaScript engine
- The part of a browser (or of Node.js) that runs JavaScript code, such as V8, SpiderMonkey or JavaScriptCore.
- DOM
- Document Object Model: the tree of objects the browser builds from the HTML. Changing it changes the page.
- Variable
- A named place to keep a value, such as count. let makes one that can change; const makes one that cannot be reassigned.
- Event
- Something that happens on the page, such as a click. A script can listen for it and run a function when it happens.
- Function
- A block of code saved to run later, here the arrow function () => { ... } that runs on every click.
- Console
- A panel in the browser's developer tools where console.log writes messages for the developer.
- Node.js
- A program that runs JavaScript outside the browser, for example on a server or your laptop.
Notes and sources
- A full HTML page also has <!DOCTYPE html>, <html>, <head> with a <title>, and <body>. Browsers add the missing html, head and body elements to the DOM themselves, so this two-line page still works.
- 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.
- Node.js runs JavaScript outside the browser. It has no page, so there is no document or button there, but console.log works the same.
- Both files are real. Save them side by side, open count.html in a browser, and each click adds one.
Quiz Unlocks after the last step.