JavaScript tutorial
Learn JavaScript basics and create interactive experiences for the web.
Course contents
Basics
- Introduction — What JavaScript is and why it matters, how HTML, CSS and JavaScript share a page, your first program with console.log(), client-side versus server-side code, and adding scripts to HTML.
- Data Types — Declaring variables with var, let and const, the seven primitive types and the non-primitive object, array and function, and how implicit and explicit type conversion work.
- Operators — Arithmetic, assignment, comparison, logical, unary and ternary operators, and the precedence rules that decide which operator runs first.
- Conditional Statements — Making decisions with if, if...else, else if and nested if, matching one value against many cases with switch, and producing a value with the ternary operator.
- Loops — Repeating work with for, while and do...while, walking objects with for...in and arrays with for...of, and controlling a loop with break and continue.
Functions
- Function Basics — Learn what a function is, why functions are useful, how to create and use functions, how inputs and outputs work, and how function hoisting works.
- Types of Functions — Learn different ways to write and use functions in JavaScript, including function expressions, arrow functions, callbacks, nested functions, recursion, and async functions.
Dates and Times
- Date Fundamentals — What a Date stores, the current time and timestamps, four ways to create a date, reading parts with local and UTC getters, the zero-based month, rollover, invalid dates, parsing ISO strings, validation, date arithmetic and the setters.
- Date Formatting and Time Zones — Showing dates with toString, toDateString and toISOString, formatting for people with Intl.DateTimeFormat, locales, dateStyle and timeStyle, the timeZone option and getTimezoneOffset, and filtering and comparing dates in a half-open range.
Arrays
- Array Fundamentals — Learn how arrays help you store and manage a collection of related values in a JavaScript program.
- Array Operations — Transforming arrays with forEach, map, filter, reduce and flatMap, searching with find, findIndex, includes, indexOf, some and every, sorting numbers, text and objects with comparators, toSorted and toReversed, and grouping with Object.groupBy and Map.groupBy to count, total, average and rank.
Objects
- Object Fundamentals — What an object is, creating one with a literal or new Object(), dot and bracket access, updating, adding and deleting properties, methods and this, checking a property with in, and looping with for...in.
- Object Operations — Nested objects and safe nested reads with ?., destructuring with default values, copying and combining objects with spread, collecting leftovers with rest, shallow versus deep copies, and computed property keys.
Data Handling
- Collections — Why Map and Set exist alongside objects and arrays, every Map and Set method, removing duplicates, converting between arrays, Sets, objects and Maps, and looping over collections with for...of and forEach().
- JSON Handling — What JSON is and how it differs from a JavaScript object, JSON structure, JSON.stringify() with indentation, JSON.parse(), the values JSON cannot carry, replacers, revivers and toJSON, and the common JSON errors and how to parse safely.
Error Handling
- Error and Exception Handling — What an error is, the three kinds of error, and how exceptions work, then try, catch and finally, throwing your own errors with clear messages, the error object, the built-in error types and handling JSON.parse() failures.
- Debugging — What debugging is and why it matters, console debugging with log, error, warn and table, breakpoints and stepping in DevTools, watching variables and inspecting scope, reading a stack trace, and fixing the most common beginner bugs.
Async Concepts
- Asynchronous Fundamentals — What asynchronous code is and why JavaScript needs it, sync vs async behaviour, callbacks after a task and with events, callback hell, setTimeout, setInterval and how to cancel them, and the event loop with its microtask and macrotask queues.
- Promises and Async/Await — What a promise is and its three states, creating promises with resolve() and reject(), then(), catch(), finally() and chaining, async functions and await with try...catch, fetch(), and Promise.all(), allSettled() and race().
- Fetch API — Calling APIs with fetch(), reading responses and converting them to JSON, sending HTTP requests, handling HTTP and network errors with catch() and try...catch, and fixing the most common async mistakes.
Object-Oriented JavaScript
- Object-Oriented JavaScript — Object properties and methods, accessing, adding, removing and displaying members, constructor functions with new and this, classes with constructors, instance properties and instance methods, and static methods and properties.
- Core OOP Principles — Encapsulation with public members, private # fields and data hiding; inheritance with parent and child classes and extends; polymorphism through method overriding; and abstraction that hides implementation details behind a small interface.
DOM Manipulation
- DOM Fundamentals — What the DOM is, DOM methods and properties, finding elements by id, class, tag and selector, and creating, adding, replacing, removing and deleting elements through the document object.
- DOM Content Management — Reading and changing content with innerHTML, textContent and outerHTML, adding, replacing and removing HTML, and working with attributes, properties and form attributes through getAttribute, setAttribute, removeAttribute and hasAttribute.
- DOM Styling — Changing inline styles, class-based styling, reading final styles with getComputedStyle, setting custom properties, and adding, removing, toggling and checking classes through classList and the DOMTokenList it returns.
- DOM Events and Forms — Attaching and removing event listeners, the everyday events from click to blur, and reading, updating and validating the controls in a form.
- DOM Traversal, Collections and Animation — Stepping between parent, child and sibling elements, working with HTMLCollection and NodeList, live and static collections, and moving, showing, hiding and fading elements.
Modules and Clean Coding
- Import and Export — What a module is and why module scope matters, named and default exports, importing with as and import * as, type="module" and file paths, common module errors, dynamic import(), and CommonJS.
- Clean Coding — Strict mode and the silent errors it turns into real ones, then modern habits (const and let, ===, no implicit globals, rest parameters) and naming conventions for clean, maintainable code.
Performance Optimization
- Performance Optimization — Debounce for search boxes, API calls and form input; throttle for scroll, mouse-move and click events; memoization for caching the results of slow, repeated calculations; and how to choose between them.
- JavaScript Essentials — Immutability: mutable vs immutable data, updating objects with spread, updating arrays without mutation, nested updates, const vs frozen objects, common mutation mistakes and real use cases such as undo history.
Reference
- Array and String Method Cheat Sheet — Every array and string method this course uses, with what it returns, whether it mutates, and a Try button on every row to run it for real.
- Equality and Coercion — The tables you actually look up: what == does, what converts to what, the eight falsy values, and what typeof reports.
- Error Message Index — The messages you will paste into a search box, what each one actually means, and the line to look at.