JS · JAVASCRIPT · BEGINNER PATH

Make a page respond.

JavaScript can remember values, notice events, and update a page. Start small: name a message, listen for a click, then repeat a task.

Three lessons · about 21 minutes0 of 3 complete

LESSON 1 · VALUES & VARIABLES

Give a value a name.

A variable lets you refer to a value by name. Use const when you do not plan to assign a different value to that name. Strings hold text, numbers hold numeric values, and the browser console can show either.

const learner = "Sam";
const lessonsFinished = 1;

console.log("Hello, " + learner);
console.log(lessonsFinished);

Good names help: lessonsFinished gives more context than a vague name like x.

Quick check: which keyword creates a value you will not reassign?

A small step counts.

LESSON 2 · EVENTS & THE PAGE

Respond to a click.

An event listener waits for an event such as a click. When the event happens, JavaScript runs the function you provide. Here, the function changes the message in the page.

const button = document.querySelector("#hello");
const message = document.querySelector("#message");

button.addEventListener("click", () => {
  message.textContent = "Nice click!";
});

Connect the pieces: The selector finds an element. The listener waits. The function describes the response.

Quick check: what does an event listener do?

A small step counts.

LESSON 3 · REPEAT WITH A LOOP

Let a loop count the steps.

A for loop has a starting point, a condition, and an update. As long as the condition is true, the block runs. This example prints five step numbers.

for (let step = 1; step <= 5; step++) {
  console.log("Step " + step);
}

Trace it: Start at 1. Add 1 after every run. Stop once step becomes greater than 5.

Quick check: when does this loop stop?

A small step counts.Next path: try Python ↗

← All courses Continue to Python →