JavaScript Reference
Everything the machine understands, in the order you learn it. Bottom half is the Explorer Zone — Level 4 territory.
Taught in class
// Variables — Day 10 (labelled boxes)
const topic = "sourdough"; // const = locked after filling
let score = 0; // let = can be refilled
score = score + 1;
// Strings — Day 11 (text is data)
const name = "Ada";
const line = `Hello ${name}, you have ${score} points`; // template literal — backticks!
// prompt() — Days 11–14 only (training wheels; retired Day 15)
const answer = prompt("What's your name?");
// Functions — Day 12 (name a recipe, reuse it)
function double(n) {
return n * 2;
}
double(4); // → 8
// Decisions — Day 13
if (age < 13) {
return 5;
} else if (age < 18) {
return 8;
} else {
return 12;
}
// Comparisons: === !== < > <= >=
// The page — Day 14 (find → listen → change)
const btn = document.getElementById("magic-button");
btn.addEventListener("click", function () {
document.getElementById("status").textContent = "Clicked!";
document.body.classList.add("dark-mode"); // .remove() takes it off
document.getElementById("title").style.color = "hotpink";
});
// Input boxes — Day 15 (prompt retires)
const typed = document.getElementById("user-input").value; // ALWAYS text!
const asNumber = Number(typed); // now it's a number
// Loops — Day 18 (repeat without repeating yourself)
for (let i = 1; i <= 10; i = i + 1) {
show(i);
}
// Arrays — Day 19 (one variable, many values)
const favs = ["pizza", "shawarma", "pho"];
favs[0]; // "pizza" — counting starts at 0!
favs.length; // 3
favs.push("banh mi");
// Objects — Day 21 (data with named parts)
const hero = { name: "Rex", hp: 100, move: "MEGA CHOMP" };
hero.name; // "Rex"
hero.hp = 90;
// Randomness — Day 22
Math.random(); // a random decimal from 0 up to (not including) 1
A whole working page
The snippets above are one idea each. Here they are together, as three real files that talk to each other. This is the shape of every interactive thing you build from Day 14 on:
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Snack Counter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Snack Counter</h1>
<input id="snack-input" type="text">
<button id="add-button">Add snack</button>
<p id="status">Nothing yet…</p>
<ul id="snack-list"></ul>
<script src="script.js"></script>
</body>
</html>
// script.js
// ⚙️ Leave these two lines alone — they let the auto-checker run your file.
if (typeof show === "undefined") { globalThis.show = function () {}; }
if (typeof prompt === "undefined") { globalThis.prompt = function () { return ""; }; }
// ── Your data ──────────────────────────────────────────────
const snacks = [];
// ── Your functions live OUT HERE (the checker tests these) ──
function addSnack(list, item) {
list.push(item);
return list;
}
function summary(list) {
return `You have ${list.length} snacks.`;
}
// ── The browser block: code IN HERE runs on the page ───────
if (typeof document !== "undefined") {
const button = document.getElementById("add-button");
button.addEventListener("click", function () {
const typed = document.getElementById("snack-input").value;
if (typed === "") {
document.getElementById("status").textContent = "Type something first!";
return;
}
addSnack(snacks, typed);
const list = document.getElementById("snack-list");
list.innerHTML = "";
for (let i = 0; i < snacks.length; i = i + 1) {
const row = document.createElement("li");
row.textContent = snacks[i];
list.appendChild(row);
}
document.getElementById("status").textContent = summary(snacks);
});
}
// ⚙️ Leave this line alone — it lets the auto-checker test your functions.
if (typeof module !== "undefined") { module.exports = { addSnack, summary }; }
The house rule, visible: addSnack and summary sit outside the browser block — that's why the checker can test them. All the document wiring sits inside it, so loading the file outside a browser never crashes.
🔭 Explorer Zone
Math helpers
Math.floor(4.9); // 4 — chops the decimal OFF (never rounds up)
Math.round(4.5); // 5 — normal rounding
17 % 5; // 2 — the REMAINDER after dividing ("mod")
Math.floor + % together solve every "how many groups and what's left over" problem: hours from minutes, dollars from cents, rows from items.
The random whole number recipe
Math.floor(Math.random() * 6) + 1; // a die: 1, 2, 3, 4, 5, or 6
list[Math.floor(Math.random() * list.length)]; // random item from a list
String methods (every string carries these)
"quiet".toUpperCase(); // "QUIET" → louder
"LOUD".toLowerCase(); // "loud"
"pizza".length; // 5
"hello".includes("ell"); // true
AND / OR (for beefy ifs)
if (year % 4 === 0 && year % 100 !== 0) { ... } // && = both must be true
if (day === "sat" || day === "sun") { ... } // || = either one is enough
setInterval — code on a timer
setInterval(function () {
timeLeft = timeLeft - 1;
show(timeLeft);
}, 1000); // runs every 1000 ms = every second
Deep cuts (show-off tier)
list.includes(x) asks if an array has something. list.splice(i, 1) removes the item at position i. setTimeout(fn, ms) runs code ONCE after a delay. element.remove() deletes an element from the page. JSON.stringify(obj) turns anything into printable text — great for debugging.