START HEREWhy JavaScript first
You asked to learn to write code yourself, without Claude doing the typing. JavaScript is the first language for four reasons.
- It is already on your machine. Every web browser runs JavaScript, with nothing to install or set up. This page runs your code the moment you press Run.
- You have been shipping it all term. Every live URL you built with an AI agent runs on JavaScript. Learning it means you can finally read, and fix, what the agent wrote for you.
- You see the result straight away. One line can change what is on the screen. That makes it a good language for games, and games are what Play to Learn is about.
- It shares a shape with the languages you asked about. C++, C#, Java and PHP all use the same
if, the same{ }and the same;. Learn the shape once and most of it carries over.
let lives = 3;
if (lives > 0) {
console.log("Keep playing");
}int lives = 3;
if (lives > 0) {
cout << "Keep playing";
}The only real difference above is how you create the variable and how you print. The decision itself is identical.
How this page works. Each idea has a short example. Before you press Run, pick what you think it will print - Run stays locked until you do. Guessing wrong is fine; it shows you exactly what to fix in your thinking. Then change the code as the page suggests and run it again.
The examples are yours to break. Reset puts them back.
Red lines are normal. When JavaScript can't follow your code, the line turns red with a note under it. The real mistake is often at the end of the line above.
CONCEPT 1Code runs top to bottom
A program is a list of instructions, called statements. JavaScript runs them one at a time, from the top, in order. Most end with a semicolon ;.
console.log( ) prints whatever is inside the brackets to the console - the dark box under each example. Text goes inside quotes.
Now change it: add a fourth line that prints your name. Then move that line to the very top and run it again.
Order is everything. When something happens too early or too late in your game, the fix is usually moving a line.
CONCEPT 2Variables hold values
A variable is a named box with a value in it. You create one with let or const, a name, =, and the value.
Read = as "store", not "equals". let lives = 3; means "make a box called lives and store 3 in it".
let- the value can change later. Scores, lives, positions.const- the value is fixed once it is set. Names, rules, settings.
Names can't have spaces, so join words and capitalise each new word after the first: playerName, maxTries. Capitals count - playername is a different box.
Now change it: add a line at the bottom that says playerName = "Kai"; and run it. Read the red note. Then change const to let on line 2 and run again.
No quotes means "look inside the box called this". With quotes, "playerName" would print the word itself.
The same thing in C++
int lives = 3; // C++ wants the type: int is a whole number
const std::string playerName = "Rin"; // string is text
cout << playerName;CONCEPT 3Changing a value
To change a let variable, store a new value in it - with no let this time, because the box already exists.
JavaScript works out the right side first, using what is in the box right now, and then stores the answer back in the box.
Now change it: add score = score * 10; just before the console.log. Predict the answer in your head before you run it.
Line 2 reads "take what is in score (5), add 2, store 7 back in score". * multiplies, / divides, - subtracts.
CONCEPT 4A variable is a snapshot, not a link
When you write let b = a;, JavaScript copies the value that is in a at that moment into b. The two boxes are not connected. Changing a later does nothing to b.
Now change it: add console.log(a); at the end. Predict both lines before you run it.
Not one person in the class got this one on the Hand-Coding Check, so it is worth a second look. Lists behave differently, and that is in Primer 3.
CONCEPT 5Text and numbers are different things
Anything in quotes is a string - text. "42" is a string. 42 is a number. They look alike, but JavaScript treats them differently.
+ adds numbers. But if either side is a string, + joins them into longer text. It works left to right, one + at a time.
Now change it: on line 3, put brackets round (3 + 4) and run it. Brackets go first, just like in maths.
Line 3: "Score: " + 3 gives the text "Score: 3", and adding 4 to text joins again, so you get Score: 34. Number( ) turns text into a real number.
This matters in the game. Anything a player types into a box reaches your code as text - even digits.
CONCEPT 6Questions with a true or false answer
A comparison asks a question, and the answer is always true or false.
===is it the same?!==is it different?><>=<=bigger, smaller, or equal-or-bigger and equal-or-smaller&&are both true?||is either one true?
One = stores a value. Three, ===, compares two values. Mixing them up is the most common beginner bug there is, so this page flags it for you.
Now change it: change the last line's && to ||, then set lives to 0. Predict each run first.
"5" === 5 is false because text is never the same as a number. That is exactly the trap waiting in the vault game, and Number( ) is the fix. (JavaScript also has ==, which bends the rules. Stick with ===.)
CONCEPT 7if / else: choose one path
An if asks a true-or-false question in round brackets. When the answer is true, the code inside its curly braces { } runs. When it is false, the else block runs. Only one of the two ever runs.
You can leave out the else. Then, when the answer is false, nothing happens and JavaScript carries on with the next line.
Now change it: make it print Hot without touching lines 2 to 6. Then try writing if (temp = 90) and read the red note.
Indenting the inside of a block by two spaces doesn't change what the code does. It lets you see at a glance what belongs inside the braces.
The same thing in C++
int temp = 75;
if (temp > 80) {
cout << "Hot";
} else {
cout << "Nice";
}CONCEPT 8else if: the first match wins
To choose between more than two paths, chain them with else if. JavaScript checks each question from the top and stops at the first one that is true. It never looks at the rest.
So the order is up to you. Put the most specific checks first.
Now change it: rearrange the checks so that 95 prints Top marks and 60 still prints Pass.
95 is bigger than 50, so the first question is already true and the chain stops there. Three out of four of you picked Top marks on the Hand-Coding Check. This is the idea the last step of the game turns on.