Good place to start. I'd keep the first JavaScript layer very small:
### 1. Connect JavaScript with the `script` tag
Place an external script near the end of the HTML `body`:
```html
```
The `src` attribute gives the path to the JavaScript file. Placing the tag
after the page content lets those HTML elements exist before the script tries
to select them.
### 2. Variables, numbers, strings, and `console.log`
Use `let` when the value needs to change:
```javascript
let score = 0;
score = 10;
```
And learn `const` alongside it for values you don't reassign:
```javascript
const name = "Trent";
```
A useful rule: **use `const` by default; use `let` when reassignment is needed.** Avoid old-style `var` for now.
Numbers do not use quotation marks. Strings are text surrounded by quotation
marks:
```javascript
const quantity = 3;
const product = "notebook";
```
Use `console.log()` to inspect a value in the browser's developer console:
```javascript
console.log(quantity);
console.log(product);
```
The `+` operator adds numbers, but concatenates when a string is involved:
```javascript
console.log(2 + 3); // 5
console.log("2" + 3); // "23"
console.log("Quantity: " + quantity); // "Quantity: 3"
```
JavaScript evaluates these operations from left to right:
```javascript
console.log("Total: " + 2 + 3); // "Total: 23"
console.log("Total: " + (2 + 3)); // "Total: 5"
```
Use parentheses when numbers must be added before they are joined to a string.
### 3. Functions
Functions package reusable behavior:
```javascript
function greet(name) {
return "Hello " + name;
}
const message = greet("Trent");
```
Understand these four pieces first:
**parameters → arguments → function body → return value**
### 4. Basic DOM selection
By ID:
```javascript
const title = document.getElementById("title");
```
By class:
```javascript
const cards = document.getElementsByClassName("card");
```
Important difference:
```javascript
getElementById()
```
returns **one element** (or `null`).
```javascript
getElementsByClassName()
```
returns an **HTMLCollection of potentially many elements**.
Notice it's `getElementsByClassName` — **Elements** is plural.
### 5. Change DOM content
```javascript
const title = document.getElementById("title");
title.textContent = "New title";
```
The property is spelled **`innerText`**, not `innerTxt`. It differs from
`textContent`:
- `textContent` reads all text in the element's DOM, including hidden text.
- `innerText` reads text as it is visibly rendered. It respects CSS and may
calculate layout.
For example:
```html
Visible secret
```
```javascript
const message = document.getElementById("message");
console.log(message.textContent); // "Visible secret"
console.log(message.innerText); // "Visible"
```
Rendered block elements also produce line breaks with `innerText`:
```html
One
Two
```
```javascript
const items = document.getElementById("items");
console.log(items.textContent); // "OneTwo"
console.log(items.innerText); // "One\nTwo"
```
Use `textContent` for predictable text reading and updates. Use `innerText`
when you specifically need the text a user can see.
Or styling:
```javascript
title.style.color = "red";
```
### 6. Events
This should come almost immediately afterward:
```javascript
const button = document.getElementById("myButton");
button.addEventListener("click", function () {
console.log("Clicked!");
});
```
That gives you your first complete mental model:
**Find an HTML element → listen for something → run a function → change something.**
That's probably enough JavaScript to focus on initially before adding arrays, objects, loops, `querySelector`, etc.
## Phase 2
Phase 2 adds collections, simple structured data, decisions, repetition, and
selected methods from the built-in `Math` object.
### 7. Arrays
An array stores an ordered list of values. Its first value is at index `0`:
```javascript
const teams = ["Lions", "Hawks", "Bulls"];
console.log(teams[0]); // "Lions"
console.log(teams.length); // 3
```
Use these methods to change either end of an array:
```javascript
const players = ["Ava", "Noah"];
players.push("Mia"); // add to the end
players.pop(); // remove from the end
players.unshift("Leo"); // add to the beginning
players.shift(); // remove from the beginning
```
`push()` and `unshift()` return the new array length. `pop()` and `shift()`
return the removed value, or `undefined` when the array is empty.
### 8. Basic objects
An object groups related values under property names:
```javascript
const player = {
name: "Jordan",
team: "Comets",
points: 18,
isStarter: true
};
console.log(player.name);
console.log(player.points);
console.log(player["team"]);
```
Use dot notation for ordinary property names. Bracket notation is useful when
the property name comes from another value. Phase 2 uses data properties only;
object functions (methods) come later.
### 9. Booleans and decisions
A boolean is either `true` or `false`:
```javascript
const isMember = true;
const isBlocked = false;
```
Use `if`, `else if`, and `else` to choose which code runs:
```javascript
const score = 82;
if (score >= 90) {
console.log("Excellent");
} else if (score >= 60) {
console.log("Passed");
} else {
console.log("Try again");
}
```
### 10. Comparison and logical operators
Comparisons produce boolean values:
| Operator | Meaning |
| --- | --- |
| `===` | equal value and equal type |
| `!==` | different value or different type |
| `>` | greater than |
| `<` | less than |
| `>=` | greater than or equal to |
| `<=` | less than or equal to |
Prefer strict equality (`===` and `!==`) so JavaScript does not silently
convert values before comparing them.
Logical operators combine or reverse boolean expressions:
```javascript
const age = 20;
const hasTicket = true;
const hasPass = false;
const canEnter = age >= 18 && hasTicket; // AND: both must be true
const hasAccess = hasTicket || hasPass; // OR: either may be true
const needsTicket = !hasTicket; // NOT: reverses the boolean
```
### 11. `for` loops
A `for` loop repeats while its condition remains true:
```javascript
const scores = [12, 18, 15];
let total = 0;
for (let index = 0; index < scores.length; index = index + 1) {
total = total + scores[index];
}
console.log(total); // 45
```
The loop starts at index `0`, continues while the index is less than the array
length, and increases the index after each pass.
### 12. The `Math` object
The built-in `Math` object provides number utilities:
```javascript
console.log(Math.floor(4.8)); // 4: rounds down
console.log(Math.ceil(4.2)); // 5: rounds up
console.log(Math.random()); // random number from 0 up to, but not including, 1
```
The method is named `Math.ceil()`, not `Math.ceiling()`.
To generate a random whole number from `1` through `6`:
```javascript
const roll = Math.floor(Math.random() * 6) + 1;
```
### 13. Return statements
`return` sends a value back to the code that called a function and immediately
ends that function call:
```javascript
function canPlay(age, hasPermission) {
if (age >= 18 || hasPermission) {
return true;
}
return false;
}
const allowed = canPlay(16, true);
```
Keep calculation and decision functions pure when practical: use their
parameters, return a result, and leave DOM updates to separate code.
## Phase 3
Phase 3 adds richer DOM work, form selects, template strings, objects in arrays,
JSON, and browser storage.
### 14. Reading and writing form control values
Form controls store their current choice in the `value` property:
```javascript
const nameInput = document.getElementById("name");
console.log(nameInput.value);
nameInput.value = "Jordan";
```
Use `value` for `input` and `select` controls. Use `textContent` or
`innerHTML` for ordinary elements.
### 15. The `select` element
A `select` offers a fixed list of choices with nested `option` elements:
```html
```
Read and write the selected option with `value`. Use `selectedIndex` when you
need the position of the choice. Use `options` to inspect every option:
```javascript
const focusSelect = document.getElementById("focus");
console.log(focusSelect.value);
console.log(focusSelect.selectedIndex);
console.log(focusSelect.options.length);
focusSelect.value = "Defense";
focusSelect.selectedIndex = 0;
```
You can also build options in JavaScript:
```javascript
const option = document.createElement("option");
option.value = "Conditioning";
option.textContent = "Conditioning";
focusSelect.appendChild(option);
```
Prefer a `select` when the allowed values are known in advance. Prefer a text
`input` when the user may type any value.
### 16. `innerHTML` versus `textContent`
`textContent` sets or reads plain text. `innerHTML` sets or reads HTML markup:
```javascript
const panel = document.getElementById("panel");
panel.textContent = "Safe plain text";
panel.innerHTML = "Trusted markup";
```
Prefer `textContent` when you only need text. Use `innerHTML` only for markup
you control. Do not insert untrusted user text as HTML.
### 17. Function parameters
Parameters receive values when a function is called:
```javascript
function makeLabel(title, count) {
return title + " (" + count + ")";
}
const label = makeLabel("Notes", 3);
```
Name parameters clearly. Pass arguments in the same order the parameters are
declared.
### 18. Template strings
Template strings use backticks and `${}` to insert values:
```javascript
const name = "Ava";
const score = 18;
const summary = `${name} scored ${score} points.`;
```
They keep string building readable when you combine several values.
### 19. More DOM selection
Phase 1 introduced `getElementById` and `getElementsByClassName`. Phase 3 adds
tag and CSS-selector methods:
```javascript
const title = document.getElementById("title");
const notes = document.getElementsByClassName("note");
const paragraphs = document.getElementsByTagName("p");
const firstCard = document.querySelector(".card");
const allCards = document.querySelectorAll(".card");
```
| Method | Result |
| --- | --- |
| `getElementById("title")` | One element, or `null` |
| `getElementsByClassName("note")` | Live HTMLCollection of matching classes |
| `getElementsByTagName("p")` | Live HTMLCollection of every `p` |
| `querySelector(".card")` | First matching element, or `null` |
| `querySelectorAll(".card")` | Static NodeList of all matches |
`getElementById` and `getElementsByClassName` take plain names with no `#` or
`.`. `querySelector` and `querySelectorAll` accept CSS selectors such as `#id`,
`.class`, and `section p`.
When teaching selectors, you may display sample markup with `pre` and `code` so
learners can compare the HTML source with live matches.
### 20. Creating and removing elements
Build new nodes with `createElement()`, insert them with `append()` or
`prepend()`, and take them off the page with `remove()`:
```javascript
const list = document.getElementById("items");
const item = document.createElement("li");
item.textContent = "Practice drills";
list.append(item); // add as the last child
// list.prepend(item); // add as the first child instead
item.remove();
```
- `createElement("li")` builds a new element that is not on the page yet.
- `append()` inserts at the **end** of the parent’s children.
- `prepend()` inserts at the **start** of the parent’s children.
- `remove()` takes that element off the page.
`appendChild()` still works and returns the inserted node; prefer `append()` /
`prepend()` in new code — they also accept text strings and multiple arguments.
**Performance rule:** keep DOM writes outside the loop. Touching the live page on
every pass (reflow/repaint) is slower than building work in memory, then
updating the DOM once.
With `innerHTML`, build the markup string in the loop, then assign once:
```javascript
const list = document.getElementById("items");
let html = "";
for (let index = 0; index < players.length; index = index + 1) {
html += `
${players[index].name}
`;
}
list.innerHTML = html;
```
Avoid `innerHTML +=` inside the loop: each `+=` reads the current HTML, rebuilds
it, and writes it back.
With `createElement`, build nodes off the page (or on a
`DocumentFragment`), then append once:
```javascript
const list = document.getElementById("items");
const fragment = document.createDocumentFragment();
for (let index = 0; index < players.length; index = index + 1) {
const item = document.createElement("li");
item.textContent = players[index].name;
fragment.append(item);
}
list.append(fragment);
```
`DocumentFragment` is a lightweight container that is not in the document. One
`append(fragment)` moves all of its children onto the page in a single update.
### 21. Objects in arrays
Arrays can store objects as items:
```javascript
const roster = [
{ name: "Jordan", points: 18 },
{ name: "Ava", points: 22 }
];
console.log(roster[0].name);
console.log(roster[1].points);
```
Loop through the array to read each object and update the page.
### 22. Basic JSON
JSON is a text format for data. Convert between JavaScript values and JSON
strings with:
```javascript
const players = [
{ name: "Jordan", points: 18 },
{ name: "Ava", points: 22 }
];
const asText = JSON.stringify(players);
const asValue = JSON.parse(asText);
```
`JSON.stringify()` turns a value into a string. `JSON.parse()` turns a JSON
string back into a value.
### 23. `localStorage`
`localStorage` saves key/value strings in the browser:
```javascript
const notes = [
{ title: "Warm-up", body: "Stretch first" }
];
localStorage.setItem("notes", JSON.stringify(notes));
const savedText = localStorage.getItem("notes");
const savedNotes = JSON.parse(savedText);
localStorage.removeItem("notes");
```
Always store strings. Use `JSON.stringify()` before saving arrays or objects,
and `JSON.parse()` after loading them. Check for `null` when nothing is saved
yet.
## Phase 4
Phase 4 teaches changing how elements look and reading or writing HTML
attributes: inline styles, CSS classes, generic attributes, and `data-*`
values.
### 24. The `.style` property
`.style` sets one CSS property at a time on an element. Property names use
camelCase in JavaScript (`backgroundColor`), not CSS kebab-case
(`background-color`):
```javascript
const preview = document.getElementById("preview");
preview.style.color = "#0f766e";
preview.style.fontSize = "28px";
preview.style.backgroundColor = "#ecfeff";
```
These writes become **inline** styles on the element. Prefer `.style` for a
single quick change. Prefer CSS classes when several properties should change
together.
### 25. `classList`
`classList` adds, removes, or checks CSS class names without rewriting the
whole `class` attribute:
```javascript
const card = document.getElementById("player-card");
card.classList.add("is-starter");
card.classList.remove("is-bench");
card.classList.toggle("is-highlighted");
const isStarter = card.classList.contains("is-starter");
```
- `add()` puts a class on the element (no duplicate if it is already there).
- `remove()` takes a class off.
- `toggle()` adds the class when missing and removes it when present.
- `contains()` returns `true` or `false`.
Keep visual themes in CSS. Use JavaScript only to flip class names.
### 26. `getAttribute()` and `setAttribute()`
Use these methods to read or write any HTML attribute by name:
```javascript
const link = document.getElementById("court-link");
const tipoff = document.getElementById("tipoff");
console.log(link.getAttribute("href"));
link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");
tipoff.setAttribute("disabled", "disabled");
tipoff.removeAttribute("disabled");
```
`getAttribute()` returns a string, or `null` when the attribute is missing.
Use attributes for generic HTML attrs such as `href`, `alt`, and `title`. Prefer
`classList` for classes and `dataset` for `data-*` values.
### 27. `dataset`
Custom `data-*` attributes map to the `dataset` object. Kebab-case names become
camelCase properties (`data-jersey-number` → `dataset.jerseyNumber`):
```html
```
```javascript
const card = document.querySelector(".roster-card");
console.log(card.dataset.name); // "Ava"
console.log(card.dataset.position); // "Guard"
console.log(card.dataset.points); // "22"
console.log(card.dataset.jerseyNumber); // "7"
card.dataset.points = "24";
```
All `dataset` values are strings. `getAttribute("data-points")` reads the same
value; `dataset` is the shorter form for `data-*` work.
## Phase 5
Phase 5 deepens events: listening for more than one event type, reading which
element was involved, and stopping the browser’s default action.
### 28. `addEventListener()` (deeper)
Phase 1 introduced `addEventListener` for clicks. The same method works for many
event types. The first argument is the event name as a string; the second is the
function to run:
```javascript
const tipoff = document.getElementById("tipoff");
const nameInput = document.getElementById("player-name");
tipoff.addEventListener("click", function () {
console.log("Tip off clicked");
});
nameInput.addEventListener("input", function () {
console.log("Typing: " + nameInput.value);
});
```
Common types for this phase: `"click"`, `"input"`, `"submit"`, `"mouseover"`.
You can attach more than one listener to the same element.
### 29. `event.target`
The handler receives an **event object**. `event.target` is the element that
actually triggered the event (useful when one listener sits on a parent and
several children can be clicked):
```javascript
const board = document.getElementById("play-board");
board.addEventListener("click", function (event) {
console.log(event.target);
console.log(event.target.textContent);
});
```
`event.currentTarget` is the element that has the listener (`board` above).
`event.target` may be a child inside that element.
For delegation, prefer `event.target.closest(selector)` so a click on nested
markup still finds the intended control or row (see also §33):
```javascript
expenseBody.addEventListener("click", function (event) {
const btn = event.target.closest("button[data-id]");
if (!btn) return;
// handle the row action using btn.dataset.id
});
```
Bare `event.target` breaks when the user clicks a child (an icon `span`, text
node wrapper, or nested element) instead of the element you expected. Lab:
`phase5/06-delegation-closest.html` compares bare `dataset.id` with
`closest("[data-id]")` side by side.
### 30. `preventDefault()`
Some elements have built-in browser behavior: a form `submit` reloads the page;
a link navigates away. Call `event.preventDefault()` to keep the page in place
and handle the action in JavaScript:
```javascript
const form = document.getElementById("signup-form");
const link = document.getElementById("leave-court");
form.addEventListener("submit", function (event) {
event.preventDefault();
console.log("Form stayed on the page");
});
link.addEventListener("click", function (event) {
event.preventDefault();
console.log("Link did not navigate");
});
```
Use `preventDefault()` when you need to validate input, save data, or update the
DOM without a full page reload.
**Required for desks, web apps, games, and `projects/`:** whenever JavaScript owns
the outcome, cancel the browser default first.
| Situation | Call `preventDefault()` on… |
| --- | --- |
| In-page form (save, filter, wizard, desk, project app) | `"submit"` — every time, even if there is no submit button (Enter in a field can still submit) |
| Control styled as a link (`href="#"` / `javascript:`) | `"click"` |
| Drag-and-drop file zone | `"dragover"` and `"drop"` (see §39) |
| Game / app keyboard that would scroll or activate the page (Space, arrows, Tab traps you handle yourself) | `"keydown"` / `"keyup"` for those keys |
Also prefer `type="button"` on non-submit controls inside a `