F3 — JavaScript Fundamentals

Track 1: Foundations · How pages think and act

HTML structures, CSS styles — JavaScript makes it do things. This is where a page becomes an app.

---

🧱 The building blocks

• Variables — named boxes that hold values: let score = 0;
• Data types — text ("strings"), numbers, true/false (booleans), lists (arrays), and structured records (objects).
• Functions — reusable actions: "given this input, do this and maybe return that."
• Conditionals — decisions: if (score > 10) { ... } else { ... }
• Loops — repetition: do something for each item in a list.

function greet(name) {
  if (name) return "Welcome, " + name + "!";
  return "Welcome!";
}

🖱️ The DOM — talking to the page

The DOM is your page, represented as something JavaScript can read and change. With it you can:

• React to events (a click, a keypress, a form submit)
• Read what the user typed
• Update the page live — add a to-do, show a message, change a color

This loop — user does something → JS responds → page updates — is the heart of every interactive app.

🧠 Learn it by doing, not memorizing

You won't memorize syntax up front, and you don't need to. You'll look things up (that's the job). What matters is the concepts: store data, make decisions, repeat, respond to the user.

---

🛠️ Your mission

Build an interactive to-do list: type a task, click a button, see it appear in the list; click an item to remove it. Use a variable/array to hold the tasks, a function to add one, and the DOM to update the page. By hand — wrestling with it is the learning. Post it when it works!

✅ You're done when…

• You can explain variables, functions, conditionals, and loops in your own words
• Your to-do list adds and removes items in response to clicks
• You understand every line you wrote (no black boxes — the rule starts now)

---

➡️ Next: F4 — The Command Line & Git/GitHub. Build It Right, Or Don't Build It At All. 🏛️