Interactivity with JavaScript

Why this matters

HTML and CSS give you a page that just sits there. To make it do something, like changing text when you click, growing a heading, or reacting to the user, you need a third language. JavaScript runs inside the browser and turns a static page into a dynamic one.

The idea

JavaScript is a programming language that runs in web browsers. By embedding it in a page, you add interactivity: the page can move, change, or respond to what the user does.

Two ideas do most of the work:

• Selecting an element. JavaScript finds a specific part of the page, usually by an id you gave the HTML tag, so it can read or change it. Changing the text inside an element uses its text content; changing its look (like size) uses its style.
• Responding to an event. An event is something that happens, such as a button click. You tell JavaScript what to run when that event occurs, so the page reacts at the right moment.

Put together: give a button an id, tell JavaScript "when this button is clicked, change that paragraph", and the page becomes a dynamic web page, one that responds to the user instead of only displaying.

Picture it

flowchart LR
  U[User clicks a button] --> E[Event fires]
  E --> J[JavaScript runs]
  J --> S[Select the element by id]
  S --> C[Change its text or style]
  C --> D[Page updates - dynamic]

Worked example

This page changes the text when the button is clicked. (Read it to see the idea; it is not graded.)

<p id="name">Ichiro</p>
<button id="btn">Change Text</button>

const p = document.getElementById("name");
const btn = document.getElementById("btn");

btn.onclick = () => {
  p.textContent = "Ohtani";
};

JavaScript selects the paragraph and the button by their ids, then says: on the button's click event, set the paragraph's text to "Ohtani". Before the click the page shows one thing; after the click it shows another, and that is what makes it dynamic. The same pattern can change colour, size, or combine the text of two elements.

Your turn

Try it in a browser editor: make a button that changes both the colour and size of some text, or one that toggles a colour between red and blue on each click. (You can ask an AI to generate a starting version, then read and tweak it.) Then do the practice questions to match each web language to its job.

Recap

• JavaScript runs in the browser and adds behaviour to a page.
• It works by selecting elements (often by id) and responding to events like clicks.
• HTML structures, CSS styles, and JavaScript makes the page dynamic (it reacts to the user).