Introduction to JavaScript
What is JavaScript?
JavaScript's role in the web: HTML structures content, CSS styles it, JavaScript makes it interactive.
How JavaScript runs in the browser — the JavaScript engine, the event loop, and the call stack in plain terms.
Writing and running JavaScript: the browser console, inline script tags, and external .js files.
A first program: displaying output with console.log and alert.
Start
Variables and Data Types
Declaring variables with let, const, and var — and why const and let are preferred over var.
The seven primitive types: string, number, bigint, boolean, undefined, null, and symbol.
Type coercion and how JavaScript converts between types implicitly.
Checking types with typeof and understanding why typeof null === 'object' is a known quirk.
Start
Operators and Expressions
Arithmetic operators: +, -, *, /, %, and **.
Comparison operators: ==, ===, !=, !==, <, >, <=, >= — and why strict equality (===) is almost always the right choice.
Logical operators: &&, ||, and ! — including short-circuit evaluation.
String concatenation with + and template literals with backticks.
The ternary operator as a concise conditional expression.
Start
Control Flow — Conditionals
if, else if, and else statements for branching logic.
The switch statement for multi-way branching on a single value.
Truthy and falsy values — understanding which values JavaScript treats as false in a boolean context.
Nullish coalescing (??) and optional chaining (?.) for safe property access.
Start
Loops and Iteration
Repeating code with while, do...while, and for loops.
Iterating over arrays with for...of and over object keys with for...in.
Loop control: break to exit early and continue to skip an iteration.
Common loop patterns: counting, accumulating totals, and finding an item.
Start
Functions
Declaring functions with the function keyword and calling them with arguments.
Return values and the difference between a function that returns and one that only has side effects.
Function expressions and arrow functions (=>) — syntax differences and when each is appropriate.
Default parameters, rest parameters (...args), and the spread operator.
Scope: global, function, and block scope — and how var, let, and const behave differently.
Start
Arrays
Creating arrays, accessing elements by index, and understanding that arrays are zero-indexed.
Mutating methods: push, pop, shift, unshift, splice, and sort.
Non-mutating methods: slice, concat, and the spread operator for copying.
Transforming arrays: map, filter, reduce, find, findIndex, some, and every.
Iterating with forEach and for...of.
Start
Objects
Creating objects with object literals: key-value pairs, nested objects, and methods.
Accessing properties with dot notation and bracket notation.
Destructuring assignment for objects and arrays.
The spread operator for copying and merging objects.
Built-in objects: Math, Date, and JSON — with practical use cases.
Start
The DOM — Selecting and Reading
What the Document Object Model is: the browser's live tree of HTML elements.
Selecting elements: getElementById, querySelector, and querySelectorAll.
Reading element properties: textContent, innerHTML, value, and attributes.
Traversing the DOM: parentElement, children, nextElementSibling, and previousElementSibling.
Start
The DOM — Modifying and Creating
Changing element content with textContent and innerHTML (and the security implications of innerHTML).
Setting, getting, and removing attributes with setAttribute and removeAttribute.
Adding and removing CSS classes with classList: add, remove, toggle, and contains.
Creating new elements with createElement and inserting them with appendChild, insertBefore, and the modern before/after/prepend/append.
Removing elements with remove.
Start
Events
What events are: user actions and browser signals that JavaScript can respond to.
Attaching handlers with addEventListener and removing them with removeEventListener.
The Event object: target, type, preventDefault, and stopPropagation.
Common event types: click, input, change, submit, keydown, mouseover, and load.
Event delegation — attaching a single listener to a parent to handle dynamic children.
Start
Asynchronous JavaScript
Why JavaScript needs asynchronous patterns: the single-threaded model and blocking code.
Callbacks and callback hell — the problem they create.
Promises: creating them with new Promise, chaining with .then(), and catching errors with .catch().
async/await as syntactic sugar over promises — making asynchronous code read like synchronous code.
The Fetch API: making HTTP requests, reading JSON responses, and handling errors.
Start
ES6+ Modern JavaScript
Key features introduced in ES2015 and later that are now standard practice.
Modules: export and import for splitting code across files.
Classes: constructor, methods, inheritance with extends, and the super keyword.
Iterators, generators, and Symbols — a conceptual introduction.
An overview of the current JavaScript release cadence and how to check browser compatibility on MDN.
Start
Error Handling and Debugging
Types of errors: syntax errors, runtime errors, and logic errors.
try...catch...finally for graceful error handling.
Throwing custom errors with throw and the Error constructor.
Browser DevTools for debugging: the Sources panel, breakpoints, step-through execution, and the watch panel.
Reading stack traces and using console methods beyond log: warn, error, table, and time.
Start
Building an Interactive Web Page
A capstone project that brings together DOM manipulation, events, asynchronous fetch, and modern ES6+ syntax.
Builds a small interactive application — a filterable list, a quiz, or a weather card — from scratch.
Covers code organisation, separation of concerns, and writing readable JavaScript.
Points the way forward: browser APIs, frameworks (React, Vue), Node.js, and the wider JavaScript ecosystem.
Start