JavaScript: Programming for the Web
Learn to program in JavaScript from the first console.log to closures, classes, asynchronous code and modules, then make real web pages respond, load data and remember it.
- Level
- Beginner
- Time
- About 48 hours
- Modules
- 4
- Lessons
- 20
- Exercises
- 60
JavaScript is the language that runs in every web browser, and one of the most widely used programming languages in the world. This course teaches it as a real programming language first: values, decisions, loops, functions and data. You can watch every program run step by step, with each variable, object and function call on screen, so nothing about it has to stay mysterious.
The second half explains what makes JavaScript different, including closures, the event loop and promises. Then you use all of it on real pages: finding and changing elements, responding to clicks and forms, loading data and saving it. Your exercises are checked by running your code, so you always know whether it really works.
What you will learn
- Write correct programs using variables, conditions, loops and functions
- Choose suitable data structures: arrays, objects, Maps and Sets
- Explain scope, closures and the order in which asynchronous code runs
- Handle errors so that programs fail in a controlled way
- Build interactive pages that respond to people and load and save data
Skills you will gain
- Writing and debugging JavaScript programs
- Transforming data with array methods
- Designing with functions, closures, classes and modules
- Writing asynchronous code with promises and async/await
- Changing web pages through the DOM, and handling events safely
Before you start
- Basic computer skills: installing a browser, and opening and saving files
- No programming experience is needed for the first three modules
- For the last module, the HTML and CSS courses on StepVioz, or the ability to write a basic page
Where it is used
- Interactive websites and web applications
- Front-end frameworks such as React, Vue and Angular
- Servers and tools built with Node.js
- Browser extensions and mobile apps built with web technology
Modules
Module 1: First programs
How a program runs, the kinds of values it works with, and the two tools that give programs their power: decisions and repetition. You finish by handling text and numbers with confidence.
- 1
JavaScript and the web
What HTML, CSS and JavaScript each do in a web page, how a JavaScript program runs one statement at a time, and printing with console.log.
- 2
Values, variables and types
let, const and var; numbers, strings, booleans, null and undefined; typeof; template strings; and why === is safer than ==.
- 3
Decisions: if, else and switch
Comparisons and the logical operators, truthy and falsy values, if, else if and else, the ternary operator, switch, and reading input with prompt().
- 4
Loops
Repeating code with for, while and do...while, walking through arrays and strings with for...of, and break and continue.
- 5
Working with text and numbers
The everyday tools for strings and numbers: length and indexes, searching, cutting and changing text, splitting into words, rounding, formatting and the Math object.
Module 2: Functions and data
Breaking programs into functions, and choosing the right shape for your data: arrays, objects, Maps and Sets. Array methods and modern syntax make this code short and clear.
- 1
Functions and the call stack
Writing functions with parameters and return values, default parameters, arrow functions, the call stack that keeps track of calls, and recursion.
- 2
Arrays
Lists of values: indexes, length, adding and removing with push, pop, shift and unshift, slice and splice, and why two variables can share one array.
- 3
Objects
Grouping values with names: object literals, reading and changing properties with dot and bracket notation, methods and this, looping over keys, destructuring, and JSON.
- 4
Array methods: forEach, map, filter and reduce
Passing a function to another function: callbacks, forEach, map, filter, find, some, every, reduce and sort, and chaining them to answer questions about data.
- 5
Destructuring, spread and safe access
The modern shorthand you will meet in almost every JavaScript file: unpacking arrays and objects, the spread and rest dots, optional chaining and the nullish operator.
- 6
Maps and Sets
Two collections built for looking things up: Map for pairs of keys and values, and Set for groups without repeats, and how to choose between them and plain objects.
Module 3: How JavaScript really works
The ideas that separate someone who can write JavaScript from someone who understands it: closures, objects and prototypes, error handling, the event loop and modules.
- 1
Scope and closures
Where a variable can be seen: global, function and block scope, shadowing, hoisting and the temporal dead zone, and closures: functions that remember the variables around them.
- 2
Classes and prototypes Intermediate
Making many objects of one shape with class: constructors, methods, getters, static members, private fields, inheritance with extends and super, and the prototype chain underneath.
- 3
Errors: throw, try and catch
The kinds of errors JavaScript throws, reading an error message, throw, try, catch and finally, your own error classes, and checking input before using it.
- 4
Asynchronous JavaScript: event loop, promises, async/await Intermediate
Why JavaScript never waits: callbacks and setTimeout, the event loop with its task and microtask queues, promises with then and catch, async functions and await, and fetching data.
- 5
Modules: splitting a program into files Intermediate
Why large programs are split into files, how import and export work, the module pattern that came before them, and how a program's parts can depend on each other safely.
Module 4: JavaScript in the browser
Using everything you know on real pages: finding and changing elements, responding to people, loading data from a server, and remembering it between visits.
- 1
HTML and CSS
The structure of a web page: elements, tags and attributes, the head and body, headings, lists, links, images and forms; and CSS: selectors, the box model, colours and a flexbox layout.
- 2
The DOM: changing the page with JavaScript Intermediate
The Document Object Model: the page as a tree of objects, finding elements with querySelector, changing text, attributes, classes and styles, and creating and removing elements.
- 3
Events and forms Intermediate
Making a page respond: addEventListener, the event object, clicks, typing and form submits, preventDefault, event bubbling and delegation, and a small to-do app.
- 4
Fetching data and saving it Intermediate
How a page talks to a server with fetch and JSON, how to show loading and error states, and how to remember data in the browser with localStorage.
Projects
- A quiz game Build a browser quiz that asks one question at a time, tells the player whether each answer was right, and shows a final score with a chance to play again.
- An expense tracker Build a page where a person can record spending, see totals for each category, delete mistakes, and find everything still there when they come back.
What to learn next
- Data Structures Lists, stacks, queues, trees, heaps, hash tables and graphs, built in C node by node, with every pointer drawn.
- Algorithms Searching, sorting, recursion, greedy choices, dynamic programming and graph algorithms, with the cost of each one counted.
- Developer Tools The terminal, gcc and its warnings, error messages, header files, make, gdb, testing and Git: the tools around the code.