Introduction to JavaScript

All in one: every first idea of JavaScript, side by side

What this example compares

Three jobs: HTML (structure) vs CSS (presentation) vs JavaScript (behaviour), on the same button
What JavaScript does: respond vs check input vs calculate vs change the page
Words and names: program, programming language, script, high-level vs machine code; JavaScript vs Java vs ECMAScript (ES6 = ES2015)
Three styles: event-driven vs functional vs object-oriented
The engine: V8 vs SpiderMonkey vs JavaScriptCore, and parse vs interpret vs JIT-compile
The sandbox: the six things browser JavaScript cannot do, and the browser vs Node.js
Three ways to add it: inline onclick vs internal <script> vs external <script src>
The rules of src: src vs href, empty vs code inside, </script> vs />, type="text/javascript"
Script position: head vs just before </body> vs head with defer
Where output goes: console.log vs the page, and F12, Ctrl+Shift+J, Ctrl+Shift+K
What console.log prints: "2 + 3" vs 2 + 3 vs several values with commas
Statements and comments: ; vs no ;, // vs /* */
Capital letters: console vs Console vs console.Log, total vs Total
Tools from the past: alert vs prompt vs confirm vs document.write

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see fourteen panels, most with a grey box of result rows. Panel 2 already shows 120 + 80 + 50 -> 250; panel 5 names the engine running your browser (V8 in Chrome or Edge) and shows SyntaxError: missing ) after argument list; panel 7 has rows from the internal and the external script; in panel 8 the card with /> has lost its paragraph and card 2 (href) wrote nothing; panel 9 shows null for scripts A and C, Chrome's TypeError: Cannot set properties of null (setting 'textContent'), and <h1 id="title"> for scripts B and D; panel 13 shows ReferenceError: Console is not defined and TypeError: console.Log is not a function. The Console prints the same rows, in the order the scripts ran: first the rows of panels 7, 8 and 14 (their small scripts ran while the page loaded), then the main script's rows, then Hi and panel 11's five lines (Hello, CSE326!, 5, 2 + 3, Asha scored 87 out of 100, Marks: 85), and last of all 9. D: head, src + defer -> <h1 id="title">, because the deferred script waited for the whole page. Rows for panels 1, 2, 4, 6, 7 and 14 also appear when you press their buttons.

Quick check: in panel 9, why does script C find null although it has defer, while script D finds the heading?

defer works only on a script with src. Script C is internal (no src), so its defer is ignored and it runs at once, before the body is read. Script D has src and defer, so it waits until the whole page has been read, and its line is the last one in the Console.