High School

Closures, array power tools, the DOM, events and modern JS. Five grades, Grades 9 to 13, with fifteen lessons in all.

Start learning

Everyone starts in Kiddie School and works up to here, one grade at a time.

Grade 9

Scope and closures

Three lessons, then a test against Buggsy.

What you’ll learn

  • Scope decides where a variable can be seen.
  • Global scope: the hallway, visible everywhere. Function scope: your bedroom. Block scope ({ } with let/const): your closet.
  • var ignores blocks and leaks out of them. Another reason to use let and const.
  • Shadowing: an inner variable with the same name hides the outer one.
  • The scope chain: JavaScript looks in the current scope, then outward, all the way to global.
  • Hoisting: function declarations can be called before they appear. let/const can’t be used before their line.
  • A closure is a function that remembers the variables from where it was created, like a backpack.

The lessons

  1. Hallways, bedrooms and closets Global, function and block scope, and why var leaks.
  2. Shadowing, chains and hoisting When names collide, how JavaScript looks things up, and hoisting.
  3. Closures: functions with backpacks Functions that remember, private data and the secret vault.

Read the Grade 9 course notes

Grade 10

Array power tools

Three lessons, then a test against Buggsy.

What you’ll learn

  • Array methods take a callback function, called once per item: (item, index, array) => …
  • forEach does something for each item (returns nothing).
  • map transforms every item into a new array of the same length.
  • filter keeps the items where the callback returns true.
  • find returns the first match (or undefined); findIndex returns its index (or -1).
  • some asks “is any true?”; every asks “are all true?”
  • reduce((total, item) => …, start) boils an array down to one value.
  • Chain them into pipelines: .filter(…).map(…).reduce(…).

The lessons

  1. forEach and map Loop without the loop, and transform every item.
  2. filter, find, some and every Keep some items, find one, or ask yes-or-no questions.
  3. reduce, sort and chaining Boil an array down, sort it properly, and build data pipelines.

Read the Grade 10 course notes

Grade 11

The DOM: controlling the page

Three lessons, then a test against Buggsy.

What you’ll learn

  • The DOM is the browser’s live tree of the page. JavaScript can read and change it.
  • document.querySelector("css selector") finds the first match; querySelectorAll finds all of them.
  • document.getElementById("id") finds an element by its id.
  • el.textContent = "…" changes text safely. innerHTML parses HTML, so never use it with user input.
  • el.style.color = "red" changes one style; el.classList.add/remove/toggle("name") is better.
  • el.setAttribute(name, value); data-* attributes appear in el.dataset.
  • document.createElement("li"), then parent.append(child); el.remove() removes it.

The lessons

  1. Meet the DOM The page as a tree, and how to select elements.
  2. Changing the page Text, HTML, styles, classes and attributes.
  3. Creating and removing elements Build new elements, add them to the page, and build lists from data.

Read the Grade 11 course notes

Grade 12

Events: reacting to people

Three lessons, then a test against Buggsy.

What you’ll learn

  • el.addEventListener("click", handler) runs handler every time the event happens.
  • Common events: click, input, change, submit, keydown, mouseover, DOMContentLoaded.
  • The handler receives an event object: event.target is the element, event.key the key pressed.
  • Read an input with input.value (always a string).
  • Forms: listen for submit and call event.preventDefault() to stop the page reloading.
  • Events bubble up to parents. Event delegation: one listener on a parent handles all its children.
  • localStorage.setItem(key, string) and getItem(key) remember things between visits. Use JSON for objects.

The lessons

  1. Listening for events addEventListener, named handlers and the most common events.
  2. The event object and forms event.target, reading inputs, live updates and preventDefault.
  3. Bubbling, delegation and saving How events travel, one listener for many items, and localStorage.

Read the Grade 12 course notes

Grade 13

Modern JavaScript

Three lessons, then a test against Buggsy.

What you’ll learn

  • Spread ... unpacks: [...a, ...b], { ...obj, x: 1 }, Math.max(...nums).
  • Rest ... packs up: function sum(...nums), const [first, ...others] = list.
  • Destructuring deluxe: swap with [a, b] = [b, a], nested patterns, defaults, renaming.
  • Optional chaining user?.address?.city gives undefined instead of crashing.
  • Nullish coalescing a ?? b uses b only if a is null or undefined (unlike ||).
  • && and || return one of their values; ||=, &&= and ??= assign smartly.
  • Set holds unique values; Map holds key-value pairs with any type of key; Date handles dates.

The lessons

  1. Spread, rest and destructuring Three dots that unpack and pack, and destructuring deluxe.
  2. ?. ?? and short-circuit tricks Optional chaining, nullish coalescing and logical assignment.
  3. Sets, Maps and Dates Unique collections, flexible key-value pairs, and working with time.

Read the Grade 13 course notes

Class starts whenever you’re ready

Every lesson is free, there’s nothing to sign up for, and your progress saves as you go.

Start learning