🪐 Interactive lesson · Grade 9 · about 45 minutes

Learn JavaScript classes by building planets.

Eight short missions turn an abstract idea into something you can touch: stamp objects from a blueprint, watch values fly into a constructor, see what happens when you forget this, and build a real page of Planet Cards in a live editor.

Grade 9 (ages 13-15)
8 missions
Live code editor
Teacher mode
Free · no sign-up

Loading the lesson…

What students learn

What a class is (a blueprint) and how it differs from an object (a thing made from it)
Defining a class with class Planet { } and why class names start with a capital letter
The constructor: code that runs automatically when you write new Planet(...)
The this keyword: saving values on the object being created
Making independent objects with new and proving they don't affect each other
Writing methods inside a class (no function keyword) and using return
Connecting JavaScript to a web page with document.getElementById(...).innerHTML and a button

The eight modules

Warm-Up: the 50 characters problem. Feel why we need classes by writing planets by hand, then stamping them from a blueprint. Sort real-world templates from the things made from them.
What is a class? (the cookie cutter). Drag the keyword and a capitalised name into the blueprint, then press cookies with different toppings.
The constructor (the registration form). Watch values fly from new Planet(...) into the constructor. See that defining a class alone runs nothing, and trigger the classic function constructor() error.
The this keyword (the name badge). Flip a switch between this.name = name and name = name and see the object keep or lose its values.
Creating objects (independent copies). Change p1 from Earth to Venus and prove p2 and p3 stay untouched.
Class methods (built-in superpowers). Call describe() on three planets, then catch two bugs: a stray function keyword and a missing return.
Guided build: My Planet Cards. Eight steps in a live editor with a preview, a DOM inspector and a console, plus a bonus Jupiter card.
Wrap-up: recap cards and boss quiz. Flip five recap cards, answer three questions and earn a certificate with your name and your finished HTML file.

For teachers

Switch on Teacher mode (top right of the lesson) to jump to any mission, read talking points and common mistakes, and mark missions complete.

Text is large for screen sharing; use the full-screen button.
Ask students to predict what will happen before they click.
Progress, XP and badges save in the student's own browser.
The finished page can be downloaded as a single HTML file.

Key idea in code

class Planet {
  constructor(name, fact) {
    this.name = name;
    this.fact = fact;
  }
  describe() {
    return this.name + ": " + this.fact;
  }
}
let p1 = new Planet("Earth", "Has life");

FAQ

JavaScript classes: common questions

What is a class in JavaScript?

A class is a blueprint for making objects. You write it once with the class keyword (for example class Planet { }), and then create as many objects as you need with new Planet(...). Each object gets its own values and the same methods.

What does the constructor do in a JavaScript class?

The constructor is a special method that runs automatically every time you create an object with new. It receives the values you pass in and saves them on the new object with this, for example this.name = name.

What does this mean inside a class?

Inside a constructor or method, this means the object the code is working on right now. this.name = name saves the value on that object. If you forget this., the value only changes a temporary parameter and the object's property stays undefined.

What is the difference between a class and an object?

A class is the blueprint (like a cookie cutter or a blank ID card). An object is one thing made from it (a cookie, or your own ID card). One class can make many different objects.

Do I need to install anything to use this lesson?

No. It runs in your browser on a laptop, tablet or phone. The code you write runs in a built-in classroom runner, so you don't need Node.js or an editor.

Is this lesson free, and can teachers use it live?

Yes, it is free and needs no sign-up. Teacher mode lets an instructor jump between any step and shows talking points and common mistakes, so it works for live one-to-one or group classes.

Start a conversation

Questions about coding classes?

Tell us the learner's age and level and we'll suggest a starting point and confirm the format before anything is booked.

Tell us the learner’s age or grade and goals
We’ll suggest a suitable class or learning path
We’ll confirm format, timing and fees with a parent or guardian

Play it, don't just read it

Take a break and play

Free games that need no sign-up. Pick one and play for five minutes.

All free games →

Pick a game

Today's maths challengeFive questions · the same for everyone today · keep your streak goingPlay