🎭 Interactive lesson · Grade 10 · about 90 minutes

Your first steps in JavaScript: play first, then code.

See how HTML, CSS and JavaScript work together, aim a laser at a page element, drop values into memory boxes, sort data types and test every operator. Then build four small web pages step by step and watch them run in a live preview.

Grade 10 (ages 14-16)
4 guided coding activities
Live page preview
Free jump for teachers
Free · no sign-up

Loading the lesson…

What students learn

What JavaScript adds to HTML and CSS, and what Node.js does outside the browser
Writing code between <script> tags and leaving notes with // comments
Finding a page element with document.getElementById("id") and changing it with .innerHTML
Creating variables with var, the = sign, and the 4 naming rules
Statements and semicolons, and the data types Number, String, Boolean and Object
Arithmetic operators + - * / % and assignment operators = += -= *= /=

The ten modules

The Puppeteer Studio. Switch on HTML, then CSS, then JavaScript to see the same page get a skeleton, an outfit and a puppeteer, then compare the browser with the Node.js kitchen.
The DOM Laser Grabber. Choose an id, type a message and fire getElementById to fill a box, and see which lines the computer ignores.
Guided Activity 1: syntax and comments. Five steps in a live editor with a preview: ids, a script tag, two comments and two innerHTML lines.
The Memory Box Factory. Drop values into var boxes, watch a sum appear, and play the Variable Name Bouncer on the four naming rules.
Guided Activity 2: variables. Ten steps from DOCTYPE to the finished sum page, with sliders to change num1 and num2.
The Recipe Sequencer and Type Sorter. Step through four statements and sort Number, String, Boolean and Object values.
Guided Activity 3: statements. Ten steps: declare x, y and z, give them values, add them and show z.
The Math and Combo Machine. Test + - * / % with a cookie-sharing picture of the remainder, and the += -= *= /= power-ups.
Guided Activity 4: operators. Eleven steps plus an Operator Switcher that changes the operator in your own code.
Eye break, summary and certificate. A calm figure-8 eye exercise, revision cards, practice tasks and a JavaScript Explorer certificate with all four .html files.

For teachers

Every module can be opened at any time (Free Jump / Teacher Mode is always on), so you can move around the lesson freely.

Open the page as ?student=Name&mentor=Name to put the learner's and mentor's names on the certificate.
There are no timers or pop-ups: hints and feedback appear inline.
Each guided step is checked by actually running the student's page.
All four finished activities can be copied or downloaded as .html files.

Key idea in code

<p id="result"></p>
<script>
  var num1 = 5;
  var num2 = 6;
  var sum = num1 + num2;
  document.getElementById("result")
    .innerHTML = "The total sum is: " + sum;
</script>

FAQ

JavaScript introduction: common questions

What is JavaScript used for?

JavaScript is the programming language that makes web pages interactive. HTML builds the structure, CSS styles it, and JavaScript adds behaviour such as reacting to clicks, doing calculations and changing what the page shows.

What is Node.js?

Node.js lets you run JavaScript outside the browser, on your own computer or on a server. In a classroom it is often used with VS Code and the Code Runner extension to run JavaScript files and see the output in a terminal.

What does document.getElementById do?

It finds the element on the page that has a matching id. You can then change what is inside it with .innerHTML, for example document.getElementById("demo").innerHTML = "Hello";

What are the rules for naming a JavaScript variable?

A name cannot start with a number, it is case-sensitive (score and Score are different), it cannot be a reserved keyword such as var, and it cannot contain spaces. Letters, digits, underscores and dollar signs are allowed.

What are the JavaScript data types?

Common data types are Number (10 or 10.567), String (text in quotes), Boolean (true or false without quotes) and Object (values grouped in curly braces). Note that "true" in quotes is a String, not a Boolean.

What does the % operator do in JavaScript?

The % operator gives the remainder after division. For example 5 % 2 is 1, because 5 shared into groups of 2 leaves 1 over.

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