JavaScript Trainer

What JavaScript is, the environments it executes in, and how code reaches a page. Editor and tooling setup, script placement and the loading attributes, output and logging, then the fundamentals: declarations, expressions, identifiers, operators and the primitive type system.

Topics: Why JavaScript, and where it runs — browser, Node, build tools, serverless · Setting up an editor, a runtime and the browser console · Script placement, defer, async and module scripts · Output and logging techniques · Variable declaration — var, let and const, and the differences that matter · Expressions, keywords and identifiers · Operators — arithmetic, assignment, string, comparison, logical, typeof, bitwise, ternary · Data types — string, number, boolean, array, object, null and undefined

• Assignments: (1) Set up a project that runs the same module in the browser and in Node; (2) Predict the result of twenty coercion and comparison expressions, then verify each
• Capstone: Produce a working development environment and a scratch project used for the rest of the course

Decision and repetition, then the language's most important construct. Conditionals, switch and the loop family, break and continue, then functions in depth — declarations against expressions, parameters and defaults, anonymous and callback functions, arrow functions, call, apply and bind, scope, closures and recursion.

Topics: Conditional statements and the switch statement · Loops — while, do-while, for, for-of and for-in · Control flow — break and continue · Function definitions, expressions and hoisting · Anonymous, arrow and callback functions · Parameters, defaults, rest and arguments · Call by value versus call by reference · call, apply and bind, and what this resolves to · Function scope, closures and recursion

• Assignments: (1) Rewrite a set of loops using array iteration methods and compare readability; (2) Build a closure-based counter and explain exactly what it retains in memory
• Capstone: Implement a small utility module of pure functions with documented inputs, outputs and edge cases

The operations most real code spends its time in. Creating and accessing arrays, single, associative and multidimensional forms, the full sorting, filtering and transformation set, string properties and methods, and the destructuring and spread syntax that removes most manual copying.

Topics: Creating and accessing array elements · Single, associative and multidimensional arrays · sort, reverse, concat, join, splice, slice and toString · filter, map, reduce, forEach, find, some and every · Which array operations mutate and which return a new value · String properties, methods, template literals and Unicode traps · Destructuring, spread and rest · Set, Map and when they beat an object or array

• Assignments: (1) Transform a raw dataset into a grouped summary using only immutable operations; (2) Fix a sort that produces the wrong order for numbers and for locale strings
• Capstone: Build a data-shaping layer that turns an API payload into exactly the structure the interface needs

The object model, taught underneath the class syntax rather than instead of it. Properties and methods, primitive against reference semantics, wrapper types, classes and constructors, inheritance, getters, setters and static members, and the prototype chain that all of it resolves against.

Topics: Object properties, methods, access and display · Primitive and reference types, and primitive wrapper types · Object copying — shallow, deep, and structured cloning · Classes, constructors and the new operator · Inheritance, getter and setter methods, and static members · Prototypes and the prototype chain behind class syntax · Property descriptors, freezing and immutability · JSON serialisation of objects and its limits

• Assignments: (1) Implement the same model with a factory function and with a class, and compare; (2) Debug a bug caused by a shared mutable reference across two components
• Capstone: Model a domain entity with validation, computed properties and a defined serialisation shape

How code behaves when something goes wrong, which is what separates a demo from a service. try, catch and finally, the Error object and its properties, throwing and subclassing errors, and regular expressions — patterns, flags, groups and the practical use in validation and log parsing.

Topics: Handling errors with try, catch and finally · The Error object, its properties and error names · Throwing, rethrowing and custom error classes · Errors across asynchronous boundaries and unhandled rejections · Regular expression syntax, patterns and flags · Capture groups, named groups and replacement · Validation and log parsing with regular expressions · Catastrophic backtracking and why a regex can hang a service

• Assignments: (1) Add structured error handling to a script that currently fails silently; (2) Write and test a validation pattern, including the inputs that should fail
• Capstone: Deliver an error-handling convention for a codebase — error types, logging shape and boundaries

Reading and changing the document from code. DOM structure and the programming interface, finding elements by id, tag, class name and CSS selector, changing content, attributes and style, node navigation and creation, and the difference between an HTMLCollection and a NodeList that catches almost everyone.

Topics: DOM structure, methods and properties · Finding elements by id, tag name, class name, CSS selector and collection · Changing content, attribute values and style · Retrieving elements using node properties · Node value and node type properties · Creating, removing and replacing nodes — append, remove and replace · HTMLCollection versus NodeList and live collections · Reflow, repaint and batching DOM writes

• Assignments: (1) Render a list from data into the DOM without using innerHTML, and explain why; (2) Fix a script that breaks because it iterates a live collection while modifying it
• Capstone: Build a dynamic view that renders, updates and removes items with no framework

The event system in full. Event types across keyboard, form, document and pointer, addEventListener and removeEventListener, attaching handlers to elements and the window, the event object, the capture and bubble phases, delegation, and the listener leaks that grow memory in long-lived pages.

Topics: Event types — keyboard, form, document, click and pointer · addEventListener and removeEventListener · Adding single and multiple handlers to elements and to window · The event object — target, currentTarget, key, coordinates · Capture, bubble and stopPropagation · preventDefault and default browser behaviour · Event delegation for large and dynamic lists · Listener leaks, cleanup and debouncing or throttling

• Assignments: (1) Replace two hundred individual handlers with one delegated listener and measure the difference; (2) Build a keyboard-accessible interaction that works without a mouse
• Capstone: Deliver an interactive component with delegation, cleanup and full keyboard support

The model that explains ordering, timing and most production bugs. The single-threaded event loop with its task and microtask queues, callbacks and callback hell, promises and combinators, async and await, then cancellation, timeouts, retries and concurrency control.

Topics: The event loop, the call stack, task and microtask queues · Callbacks, callback hell and inversion of control · Promises — creation, chaining, rejection and finally · Promise.all, allSettled, race and any · async and await, and error handling around them · setTimeout, setInterval and why timing is not guaranteed · AbortController, timeouts and cancellation · Retry with backoff, concurrency limits and race conditions

• Assignments: (1) Predict the output order of an interleaved set of timers, promises and synchronous code; (2) Add cancellation and a retry policy to an unreliable network call
• Capstone: Build a task runner that executes work with a concurrency limit, timeouts and per-item failure handling

The platform beyond the language. What a Web API is and how browser APIs differ from third-party ones, the History API and navigation, Web Storage for local and session data, the Fetch API in depth including uploads and status handling, and Geolocation as a worked example of a permissioned API.

Topics: What a Web API is — browser APIs versus third-party APIs · The History object — properties, back, forward and go · Web Storage concepts — the localStorage and sessionStorage objects · Saving, reading and removing data from storage, and its properties and methods · What must never be stored in the browser · The Fetch API — sending requests, single and multiple file upload · Reading responses and handling status codes · CORS, credentials and debugging failed requests · The Geolocation API — usage, interfaces, properties and methods, permissions

• Assignments: (1) Build a page that persists state across reloads using storage, then handle a quota error; (2) Debug three deliberately broken cross-origin requests and explain each failure
• Capstone: Deliver a small application combining Fetch, storage and history so navigation and refresh both behave

The format every JavaScript application talks in. What JSON is and how it differs from JavaScript object syntax, its structure and permitted types, parsing and serialising with replacers and revivers, validating and linting, and the boundary discipline that keeps untrusted payloads from becoming runtime failures.

Topics: What JSON is, and JavaScript object literals versus JSON · JSON structure and data types — string, number, boolean, array, object, null · JSON.parse and JSON.stringify, with replacer and reviver · Converting between JSON and JavaScript objects safely · Dates, undefined, big integers and other serialisation traps · Validating and linting JSON, and schema validation at the boundary · Working with a sample JSON source and nested payloads · Structured logging as JSON in Node

• Assignments: (1) Write a parser boundary that validates an untrusted payload before it reaches application code; (2) Round-trip a complex object and document everything that did not survive
• Capstone: Define and enforce the JSON contract between a page and one of your own APIs

Turning code into something a team can ship. ES modules and npm, bundling and transpilation, source maps, linting and formatting, unit and end-to-end tests, debugging techniques, then the CI gates — coverage, bundle budgets, dependency audit — that keep quality from drifting.

Topics: ES modules, CommonJS and interop · npm, package.json, lockfiles and dependency auditing · Bundling with Vite, webpack or esbuild — what the output actually contains · Transpilation, browser targets and polyfills · Source maps in development and production · ESLint and Prettier as enforced standards · Unit testing with Jest or Vitest, mocking network calls · End-to-end testing with Playwright · Debugging — console methods, the debugger statement, breakpoints and performance profiles · CI gates — coverage thresholds, bundle size budgets and vulnerability scanning

• Assignments: (1) Bundle an application and analyse the output to find the largest dependency; (2) Add a test suite plus coverage and bundle-size gates to a pipeline
• Capstone: Deliver a project that lints, tests, builds, budgets and publishes from a single pipeline run