How JavaScript
controls a webpage

Every interaction follows the same four steps

HTML gives the page structure. JavaScript finds parts of it, waits for a person to act, then changes the data and the page.

Where each idea shows up in the program

Three files, three jobs

The project folder holds three files. The HTML file connects the other two.

<!DOCTYPE html>
<html>
  <head>
    <title>Tech Shop</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="product-list" class="product-grid"></div>

    <h2 class="section-title">Your Cart</h2>
    <p id="empty-cart-message">Your cart is empty.</p>
    <div id="cart-items" class="cart-items"></div>
    <div id="cart-total"></div>

    <script src="script.js"></script>
  </body>
</html>

Every HTML tag in the project

Click a tag to see what it does and where it appears on the page.

Attributes are labels JavaScript can read

Attributes go inside the opening tag as name="value". Hover a row to find it in the code.

The DOM is the page as a family tree

The browser turns your HTML into a tree of objects called the Document Object Model. JavaScript starts at document and works its way down to find any element.

Three ways to find elements

Before JavaScript can change something, it has to find it. Each method asks the document a different kind of question.

const cartItems =
  document.getElementById("cart-items");

document.querySelector("p");          // tag
document.querySelector(".my-div");    // class
document.querySelector("#myDiv");     // id

const buttons = document
  .querySelectorAll(".add-to-cart-button");
buttons.forEach((button) => { ... });

🔬 Selector playground

Choose a method, then a selector, or type your own. Matching elements light up on the real page below, numbered in the order JavaScript finds them.

Variables, operators, and decisions

A variable is a labeled box for a value. const means the label always points to the same box; let means you can swap in a new value later.

Objects describe one thing

An object groups related values as key: value pairs. Each product is an object, and each cart item is a product object plus a quantity.

// One product object (Week 4)
const product = {
  id: "candy",
  name: "Sour Patch Kids",
  price: 1.29,
  image: "candy.jpg",
};

product.name;          // read  → "Sour Patch Kids"
product.price = 2.00;  // change a field
product.category = "Snack"; // add a new field

// Spread ... copies every field into a NEW object,
// then adds quantity (Week 5, addToCart)
cart.push({ ...product, quantity: 1 });

Arrays are ordered lists

The project uses two arrays: products (everything for sale) and cart (what the shopper picked). Positions are counted from 0.

const products = [
  { id: "game",  name: "Minecraft",       price: 29.99 },
  { id: "candy", name: "Sour Patch Kids", price: 1.29  },
];
products[0].name;   // "Minecraft"
products.length;    // 2

const cart = [];   // starts empty

// after clicking Minecraft twice and candy once:
[
  { id: "game",  name: "Minecraft", price: 29.99, quantity: 2 },
  { id: "candy", name: "Sour Patch Kids", price: 1.29, quantity: 1 },
]

🔬 Array method lab

Run each method and watch the array change. Output is shown in the console below, just like console.log.

Functions are reusable recipes

A function is a named set of steps. You define it once, then call it whenever you need it. Hover each part:

// These two do the same thing:
function (p) { return p.id === productId; }
(p) => p.id === productId

Who calls whom?

The functions call each other in a chain. Press a trigger to watch the chain run.

🔬 Building new elements, step by step

createElement makes an element in memory. It is not on the page until appendChild places it there.

const name = "Minecraft";
const price = 29.99;

// Backticks ` ` let you insert values with ${ }
card.innerHTML = `
  <h2>${name}</h2>
  <p>$${price.toFixed(2)}</p>
`;
// toFixed(2) → "29.99" (always 2 decimals)

Event listeners make the page respond

An event is something that happens: a click, the mouse moving over an element, or a key press. A listener is the function that runs when its event happens.

Try three event types

const removeButton = document.createElement("button");
removeButton.textContent = "Remove";
removeButton.addEventListener("click", () => removeFromCart(item.id));

🔬 Watch the whole script.js run, line by line

Common bugs and how to fix them

Open DevTools (right-click → Inspect → Console) and add console.log(something) to see what's really in a variable.

Every tag, function, and method in one table