JavaScript: the behavior

Before you begin

By the end, you can…

• Select elements and change them with JavaScript
• Respond to clicks and input with events
• Keep the page working when JavaScript is blocked

01 / Understand

JavaScript makes pages respond

JavaScript runs in the browser and can read and change the page. The usual recipe: select an element with querySelector, listen for an event with addEventListener, and update the page with textContent or classList.

Treat JavaScript as an enhancement. A page whose links, forms, and content work without scripts is robust, and its interactive layer can only improve on that.

02 / Apply

Add one real interaction

Choose a small, genuine interaction: a button that counts, a greeting that changes, a list you can add to, a theme that toggles. Write the HTML for it first, then attach behavior in a separate script.

Test with JavaScript blocked: the content must remain readable and the page must not be broken. Then turn JavaScript back on and confirm the interaction works.

const button = document.querySelector("button");
const output = document.querySelector("output");
let count = 0;
button.addEventListener("click", () => {
  count += 1;
  output.textContent = count;
});

03 / Make

Your studio task

Make — Add one genuine interaction to your page.

1. Pick one small interaction and write its HTML first.
2. Select the elements and attach an event listener.
3. Update the page and keep the interaction state in the page itself.
4. Verify the core page works with JavaScript blocked.

04 / Check

Knowledge check