JavaScript Basics (Years 9–11) — Computer Science

The three layers of a web page (HTML structure, CSS style, JavaScript behaviour); JavaScript runs client-side in the browser; variables store values; events such as onclick trigger code; and code can change the page (the DOM).

You have met the two languages that build a page: HTML for structure and CSS for style. But a page built from those alone just sits there. To make it do something — count clicks, check a form, swap a picture when you tap it — you need a third language: JavaScript. It is the language that gives a web page a pulse.

Why this matters: Almost every interactive thing you meet online — a like button, a search box that suggests as you type, a game — is JavaScript at work. Understanding the three layers, and how a click can trigger code that changes the page, is the leap from reading web pages to building ones that respond.

The three layers of a web page

A modern page is a team of three languages, each with one job. HTML gives the structure (the headings, buttons and text). CSS gives the style (colours, fonts, layout). JavaScript gives the behaviour — what happens when the user does something. Think of a car: HTML is the body and seats, CSS is the paint and trim, and JavaScript is the engine that makes it move.

Three layers, three jobs: structure + style + behaviour = an interactive page.

JavaScript runs in the browser (this is called client-side): the code is sent with the page and runs on your own device, so it can react to you instantly without asking a distant server first.

Variables: boxes that hold a value

A variable is a named box that holds a value you can read and change.

A variable is a named store for a value the program wants to remember. In JavaScript you make one with let, as in let score = 7; — that puts the number 7 into a box named score. Later the program can read it, or change it with score = score + 1;. Variables can hold numbers, text (called a string, written in quotes like "Ali") and more.

Events: something happens, code runs

An event (a click) triggers code, and the code changes the page.

An event is something the user does that the page can react to: a click, a key press, a mouse hover. You tell the browser, "when this button is clicked, run this code." In HTML the simplest way is the onclick attribute: <button onclick="countUp()">Click me</button> runs a piece of code called countUp every time the button is clicked. The event is the trigger; the code is the response.

Changing the page: the DOM

The browser holds the whole page in memory as a tree of objects called the DOM (Document Object Model). JavaScript can reach into this tree and change it — edit some text, hide an element, change a colour — and the page updates on screen straight away. That is how a click can make the page different from how it started.

Click the button and JavaScript updates the DOM: the counter jumps from 0 to 1.

Layer	Language	Job
Structure	HTML	What is on the page
Style	CSS	How it looks
Behaviour	JavaScript	What it does when used

Worked example: A click counter. A variable holds the count: let count = 0;. The button says <button onclick="count = count + 1">Click me</button>. Each click fires the onclick event, which runs code that adds 1 to count and writes the new number into the DOM. The user sees 0, 1, 2, 3… without the page reloading.

Common mistake: Confusing the layers — trying to make something interactive with CSS, or trying to change colours with JavaScript when a CSS rule would do. Remember: CSS styles, JavaScript reacts. If it needs to respond to the user, that is a job for JavaScript.

Tip: JavaScript is completely different from Java — the similar name is a historical accident. They are two separate languages, so do not mix them up in an exam answer.