{ }

JavaScript

for Beginners

Think Like a Programmer — not a copy-paste machine

Data-driven code • Reusable functions • Loops over duplication

A vibe-coding lesson • Vanilla JavaScript • Beginner friendly

1

What is JavaScript? (and why it exists)

🎯 Learning Objective: Understand what JavaScript is and why the web needs it.

Explanation

Code Example

• JavaScript is a programming language that runs inside the web browser.
• It makes pages interactive: respond to clicks, update content, do math.
• HTML and CSS cannot "think" — JavaScript adds the logic and behavior.
• It runs almost everywhere: browsers, phones, and servers.

// JavaScript reacting to a click

button.addEventListener("click", function () {

alert("Hello, world!");

});

💡 Important Note

Before JavaScript, web pages were static — like a printed poster. JS makes them respond.

▶ Expected Output

A small popup box appears on screen saying: Hello, world!

2

HTML vs CSS vs JavaScript

🎯 Learning Objective: Tell apart the three web languages and the job each one does.

Explanation

Code Example

• HTML = STRUCTURE — the content (headings, buttons, lists).
• CSS = STYLE — the looks (colors, fonts, spacing).
• JavaScript = BEHAVIOR — the logic (what happens when you interact).
• Analogy: HTML is the skeleton, CSS is the clothes, JS is the muscles.

<!-- HTML: structure -->

<button id="btn">Click me</button>

​

/* CSS: style */

#btn { background: gold; }

​

// JS: behavior

btn.onclick = function () { count++; };

💡 Important Note

This whole lesson focuses on JavaScript. Keep your HTML and CSS small and simple.

▶ Expected Output

A gold button that counts up every time you click it.

3

Variables: let vs const

🎯 Learning Objective: Store data in named boxes and choose between let and const.

Explanation

Code Example

• A variable is a named box that holds a value.
• let = a box whose value CAN change later.
• const = a box whose value must STAY the same.
• Rule of thumb: use const by default, use let only when it will change.

let score = 0; // can change

score = 10; // OK

​

const name = "Ana"; // fixed

// name = "Ben"; // ERROR

💡 Important Note

Good names explain the value. Write price and score , not p and s .

▶ Expected Output

score becomes 10. Trying to change name would crash the program.

4

Data Types: String, Number, Boolean

🎯 Learning Objective: Recognize the three basic types of values in JavaScript.

Explanation

Code Example

• String = text, always inside quotes: "Apple" , 'Hi'.
• Number = any number, no quotes: 20 , 3.5.
• Boolean = true or false (a simple yes / no answer).
• Use typeof to check what type a value is.

const product = "Apple"; // String

const price = 20; // Number

const inStock = true; // Boolean

​

console.log(typeof price); // "number"

💡 Important Note

"20" with quotes is TEXT, not a number. Quotes change the type — be careful!

▶ Expected Output

The console prints: number

5

Data Types: Array & Object

🎯 Learning Objective: Store many values (array) or labeled values (object).

Explanation

Code Example

• Array = an ordered list of values, in square brackets [ ].
• Object = a group of labeled values (key: value), in braces { }.
• Use an ARRAY for "many of the same thing".
• Use an OBJECT to describe "one thing with details".

const fruits = ["Apple", "Orange"]; // array

​

const product = { // object

name: "Apple",

price: 20

};

💡 Important Note

An ARRAY OF OBJECTS (a list of things, each with details) powers most real apps.

▶ Expected Output

fruits holds 2 items; product describes 1 item with 2 details.

6

Arrays: create, access, add, remove

🎯 Learning Objective: Work confidently with lists of data.

Explanation

Code Example

• Create: const list = ["a", "b", "c"].
• Access by index (counting starts at 0): list[0] is "a".
• Add to the end: list.push("d").
• Remove from the end: list.pop().

const fruits = ["Apple", "Orange"];

console.log(fruits[0]); // "Apple"

fruits.push("Banana"); // add to end

fruits.pop(); // remove last

console.log(fruits.length); // 2

💡 Important Note

The FIRST item is index 0, not 1. This trips up every beginner at first!

▶ Expected Output

Prints "Apple" , then 2 (the length after adding & removing).

7

Objects: create, read, update

🎯 Learning Objective: Store and change labeled data about one thing.

Explanation

Code Example

• Create with key: value pairs inside { }.
• Read a property with dot notation: product.name.
• Update by assigning a new value: product.price = 25.
• The keys are the labels; the values are the data.

const product = { name: "Apple", price: 20 };

​

console.log(product.name); // "Apple"

product.price = 25; // update

console.log(product.price); // 25

💡 Important Note

Use dot notation ( product.price ) to reach inside an object and grab a value.

▶ Expected Output

Prints "Apple" , then 25.

8

Functions: why they exist + declaration

🎯 Learning Objective: Package reusable instructions under one name.

Explanation

Code Example

• A function is a reusable block of code with a name.
• Write it once, then run it as many times as you like.
• It saves you from repeating the same code everywhere.
• Declare one with the function keyword.

function greet() {

console.log("Hello!");

}

​

greet(); // run it

greet(); // run it again

💡 Important Note

Functions are your #1 tool for avoiding copy-pasted, duplicated code.

▶ Expected Output

Prints Hello! twice.

9

Functions: parameters, return, calling

🎯 Learning Objective: Pass data in, and get a result back out.

Explanation

Code Example

• Parameters are the inputs written inside the ( ).
• return sends a value back to whoever called the function.
• Call a function by writing its name followed by ( ).
• One good function can work for ANY input you give it.

function addTax(price) {

return price + (price * 0.12);

}

​

const total = addTax(100);

console.log(total); // 112

💡 Important Note

One addTax() works for every price — no need for addTax100(), addTax200()...

▶ Expected Output

Prints 112.

10

Loops: the for loop

🎯 Learning Objective: Repeat code a set number of times without copy-pasting.

Explanation

Code Example

• A loop runs the same code again and again.
• The for loop has 3 parts: start ; condition ; step.
• i++ means "add 1 to i each time around".
• Perfect for visiting every index of an array.

const fruits = ["Apple", "Orange", "Banana"];

​

for (let i = 0; i < fruits.length; i++) {

console.log(fruits[i]);

}

💡 Important Note

The condition i < fruits.length stops the loop safely at the end of the list.

▶ Expected Output

Prints Apple , Orange , Banana (one per line).

11

Loops: for...of and forEach()

🎯 Learning Objective: Loop through items with simpler, cleaner syntax.

Explanation

Code Example

• for...of gives you each item directly — no index needed.
• forEach() runs a function once for every item in the array.
• Both remove repeated, copy-pasted lines of code.
• Pick whichever one reads more clearly to you.

const fruits = ["Apple", "Orange"];

​

for (const fruit of fruits) {

console.log(fruit);

}

​

fruits.forEach(function (fruit) {

console.log(fruit);

});

💡 Important Note

Loops turn 100 lines of copy-paste into just a few lines. That's the whole point!

▶ Expected Output

Each block prints Apple , then Orange.

12

DOM: getElementById & querySelector

🎯 Learning Objective: Grab HTML elements so JavaScript can control them.

Explanation

Code Example

• The DOM is the page seen as objects that JS can touch.
• getElementById("id") finds one element by its id.
• querySelector("...") finds the first match of any CSS selector.
• Save the result in a variable to reuse it later.

const title = document.getElementById("title");

const firstBtn = document.querySelector("button");

const card = document.querySelector(".card");

💡 Important Note

querySelector uses CSS style: # for an id, . for a class.

▶ Expected Output

Each variable now holds a real element taken from the page.

13

DOM: innerHTML vs textContent

🎯 Learning Objective: Read and change what is inside an element.

Explanation

Code Example

• textContent = the plain text inside an element.
• innerHTML = the HTML inside (tags become real elements).
• Use textContent for plain words (safer and faster).
• Use innerHTML when you need to build HTML from data.

title.textContent = "Welcome!";

​

list.innerHTML =

"<li>Apple</li><li>Orange</li>";

💡 Important Note

This is how JS builds page content FROM DATA — instead of hardcoding HTML by hand.

▶ Expected Output

The heading shows Welcome! ; the list shows two bullet items.

14

Events: onclick & addEventListener

🎯 Learning Objective: Make code run in response to what the user does.

Explanation

Code Example

• An event is something the user does (click, type, hover).
• onclick attaches one action to an element.
• addEventListener is the flexible, preferred way.
• The function runs each time the event happens.

btn.onclick = function () {

console.log("clicked!");

};

​

btn.addEventListener("click", function () {

console.log("clicked again!");

});

💡 Important Note

Prefer addEventListener — you can attach many listeners to one element.

▶ Expected Output

Each click prints a message to the console.

15

Putting Everything Together

🎯 Learning Objective: Combine array + object + loop + function + DOM in one demo.

Explanation

Code Example

• Store the data in an array of objects.
• Write a function that builds ONE item.
• Loop over the data to build them ALL.
• Put the finished result on the page with the DOM.

const products = [

{ name: "Apple", price: 20 },

{ name: "Orange", price: 15 }

];

​

function makeRow(p) {

return `<li>${p.name} — ₱${p.price}</li>`;

}

​

let html = "";

products.forEach(function (p) {

html += makeRow(p);

});

list.innerHTML = html;

💡 Important Note

The `${...}` inside backticks is a TEMPLATE LITERAL — it drops data into text. This is exactly the pattern you'll use in the activity!

▶ Expected Output

A list on the page: Apple — ₱20 , Orange — ₱15.

{ }

🚀 Your Turn: Build a Mini Product Store

Store products as DATA, then let JavaScript build the page. No hardcoded HTML!

What you'll build

• A list of products shown as cards
• An "Add to cart" button on each card
• A cart list that updates when you click
• A running total that adds up prices
• An "empty cart" message using an if

Your code must include

• Variables (let + const)
• An array of product objects
• 3+ reusable functions
• A for loop and a forEach()
• DOM manipulation
• An event listener
• Template literals ( `${...}` )
• A basic if statement

Full instructions, starter files & the 100-point rubric are in ACTIVITY.md