JavaScript Lab Examples
Phase 2 — Foundations: running JavaScript
Demos 01–08 pair with the Foundations phase: how code reaches the browser, and the first
interactive programs. JS files run with node <file>; HTML files open in
place.
| # | Description | Source | Preview |
|---|---|---|---|
| 01 | Your first line of JavaScript, in the browser console | 01_hello_console.html | open |
| 02 | Running a file with Node instead of the console | 02_first_file.js | — |
| 03 | Triggering your first error messages — on purpose | 03_errors_on_purpose.js | — |
| 04 | Inline script: JavaScript embedded in a page | 04_script_inline.html | open |
| 05 | External script: separating app code from markup | 05_app.js · 05_script_external.html | open |
| 06 | defer versus async: load-order timing, visualized | 06_defer_vs_async.html | open |
| 07 | ES modules: splitting code across files | 07_modules/ | open |
| 08 | The first event listener: a click counter | 08_click_counter.html | open |
Phase 2 — Foundations: the language model
Demos 09–21 exercise values, control flow, functions, and the collection types — each is a predict-then-run lab with the expected output in the comments.
| # | Description | Source | Preview |
|---|---|---|---|
| 09 | typeof tour: the value types | 09_values_and_types.js | — |
| 10 | Coercion traps: ==, +, and falsy values | 10_coercion_lab.js | — |
| 11 | Strings: template literals and the method toolbox | 11_strings_lab.js | — |
| 12 | Control flow: branching and loops, interactive | 12_control_flow.html | open |
| 13 | Functions: parameters, returns, and arrow syntax | 13_functions_lab.js | — |
| 14 | Closures: functions that remember, visualized | 14_closures.html | open |
| 15 | Objects: references versus copies | 15_objects_lab.js | — |
| 16 | Arrays: map, filter, reduce in practice | 16_arrays_lab.js | — |
| 17 | Map and Set: collections with any key type | 17_collections_lab.js | — |
| 18 | Classes: state, methods, and inheritance | 18_classes_lab.js | — |
| 19 | this binding: the four rules in one file | 19_this_binding.js | — |
| 20 | A module project: logger, utils, main — wired together | 20_modules_lab/ | open |
| 21 | Prototype pollution: mutating the shared chain, and the damage | 21_prototype_pollution.js | — |
Phase 3 — Runtime: errors, DOM, debugging
Demos 22–26 pair with the Runtime phase: the error system, the engine's stack and heap, the
DOM, platform APIs, and DevTools. JS demos run with node; the HTML labs are
interactive.
| # | Description | Source | Preview |
|---|---|---|---|
| 22 | Errors lab: every error type triggered, caught by class, plus a custom ValidationError | 22_errors_lab.js | — |
| 23 | Runtime lab: call-stack depth, a deliberate stack overflow, stack vs heap, a measurable leak | 23_runtime_lab.js | — |
| 24 | DOM lab: build a list with textContent and event delegation | 24_dom_lab.html | open |
| 25 | Storage lab: strings-only round trips through localStorage and JSON | 25_storage_lab.html | open |
| 26 | DevTools lab: catch a planted string-concatenation bug with breakpoints only | 26_devtools_lab.html | open |
Phase 4 — Async: the event loop, promises, iteration, workers
Demos 27–30 pair with the Async phase: the two-queue execution model, promise mechanics and
traps, generators as lazy pipelines, and real parallelism with worker threads. All four run
with node.
| # | Description | Source | Preview |
|---|---|---|---|
| 27 | Event-loop lab: sync vs microtask vs macrotask ordering, plus a visible starvation block | 27_event_loop_lab.js | — |
| 28 | Promises lab: settlement, chain error paths, the four combinators, and the floating-promise trap | 28_promises_lab.js | — |
| 29 | Generators lab: the iterator protocol, lazy infinite sequences, yield*, for await…of | 29_generators_lab.js | — |
| 30 | Workers lab: serial vs parallel CPU-bound blocks, zero-copy buffer transfer, measured speedup | 30_workers_lab.js | — |
| 31 | Scheduling lab: raw vs throttled vs debounced handlers, visualized; frame budget | 31_scheduling_lab.html | Preview |
Phase 5 — Practice: tested bank, store counter, worker pool
| # | Description | Source | Preview |
|---|---|---|---|
| 32 | The tested bank: a full node:test suite — hooks, nested tests, rejection assertions, immutability proof | 32_node_test_demo.js | — |
| 33 | Store counter: the same app twice — DOM-as-state versus one-way data flow with undo | 33_store_counter.html | Preview |
| 34 | Worker pool: N long-lived worker_threads, a job queue, promise-per-job — and the timing to prove it | 34_worker_pool_sample.js | — |
How to study them
Open the source in the code viewer, change one line, predict what changes, then verify — in the terminal for Node demos, in the preview for browser demos.