← ACARA Digital Technologies Years 9–10

The behaviour layer: JavaScript

The programming language that adds behaviour to a web page, such as reacting to a click, on top of its HTML content and structure and its CSS presentation.

Part of: ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 4, QCE Digital Solutions Unit 3 — Interactions Between Users, Data and Digital Systems — Module 40

Understanding The behaviour layer: JavaScript in ACARA Digital Technologies Years 9–10

What it does: An if statement is a programming instruction that makes a decision. HTML and CSS are markup languages and cannot do this. addEventListener makes the page react to a click, which is behaviour. A CSS rule like color: red only changes how the button looks. Reacting to a click is behaviour. Colours and rounded corners are presentation, set with CSS. Content and structure come from HTML, and presentation from CSS. A page can work without JavaScript, but it will have no custom behaviour.

Common mistakes: Adding () calls sayHi straight away, when the page loads. To run it on a click, give the browser the function itself: document.onclick = sayHi;. JavaScript is linked with a script element. A style element is for CSS (presentation), so the behaviour code would never run. It should be <script src="app.js"></script>.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add The behaviour layer: JavaScript to a class →

This module's key terms are also in a printable crossword (Modules 116–154) and word search (Modules 116–225).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Which layer of a web page decides what happens when a user clicks a button?
The presentation layer (CSS)The behaviour layer (JavaScript)
Matches
<style> button.onclick = sayHi; </style>
↓
JavaScript behaviour was put inside a style element, which only holds CSS presentation rules
Applying
Meanings
Term
JavaScript
Meaning
The programming language that adds behaviour to a web page, such as reacting to a click, on top of its HTML content and structure and its CSS presentation.
Practice
<button id="btn">Click me</button>
Testing
Gaps
<button ="sayHi()">Click me</button>
Check Answer
Spots
3}
4document.onclick = sayHi();

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Stag' badge — Forest Legend, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which layer of a web page decides what happens when a user clicks a button?
A. The behaviour layer (JavaScript) ✓
B. The presentation layer (CSS)
JavaScript is the behaviour layer. It responds to user actions like clicks. CSS only controls how the page looks.
2. Which language is a programming language?
A. HTML
B. JavaScript ✓
JavaScript is a programming language that can make decisions and respond to events. HTML is a markup language that only describes content and structure.
3. Which statement about HTML and CSS is true?
A. They are markup languages that describe structure and style ✓
B. They are programming languages that run code when users click
HTML and CSS are markup languages. They describe a page rather than running instructions. Behaviour comes from JavaScript.
4. Which change is an example of behaviour rather than presentation?
A. A button has a blue background and rounded corners
B. A button shows a message when it is clicked ✓
Reacting to a click is behaviour. Colours and rounded corners are presentation, set with CSS.
5. A page has headings, paragraphs and links but no JavaScript. What happens?
A. The page still displays and its links still work ✓
B. The page will not load at all
Content and structure come from HTML, and presentation from CSS. A page can work without JavaScript, but it will have no custom behaviour.

Match the Pairs

<button onclick="alert('Hi!')">Click me</button> → A button whose behaviour runs JavaScript when the user clicks it
<script src="app.js"></script> → Loads a JavaScript file that adds behaviour to the page
JavaScript is a programming language, so it can make decisions and respond to the user → if (clicked) { console.log('Hello'); }
Presentation changes how a page looks, but behaviour changes what the page does when the user acts → button.addEventListener('click', sayHi);
<style> button.onclick = sayHi; </style> → JavaScript behaviour was put inside a style element, which only holds CSS presentation rules
HTML and CSS are programming languages that make pages respond to clicks → HTML and CSS are markup languages for structure and presentation, not programming languages

Key Term

JavaScript
The programming language that adds behaviour to a web page, such as reacting to a click, on top of its HTML content and structure and its CSS presentation.

Fill in the Blanks

1. <button onclick="sayHi()">Click me</button>
Hint: Type the HTML attribute that runs JavaScript when the button is clicked.
2. <script src="app.js"></script>
Hint: Type the attribute that tells the browser which JavaScript file to load.
3. function sayHi() { alert("Hi!"); }
Hint: Type the JavaScript keyword used to define a named block of behaviour.
4. button.addEventListener("click", sayHi);
Hint: Type the method name that makes the button wait for an event and then react.
5. let title = document.getElementById("h"); title.textContent = "Clicked!";
Hint: Type the property that changes the text shown inside the element.

Spot the Error

Question 1
A function sayHi() {
B alert("Hi!");
C }
D document.onclick = sayHi();
Line D — Adding () calls sayHi straight away, when the page loads. To run it on a click, give the browser the function itself: document.onclick = sayHi;
Question 2
A <button id="go">Go</button>
B <style src="app.js"></style>
C <p id="msg"></p>
Line B — JavaScript is linked with a script element. A style element is for CSS (presentation), so the behaviour code would never run. It should be <script src="app.js"></script>.
Question 3
A function show() {
B Console.log("Clicked");
C }
Line B — JavaScript is a programming language and is case-sensitive. The object is console with a lowercase c, so it should be console.log("Clicked");
Question 4
A button {
B background-color = blue;
C }
Line B — CSS is a markup (stylesheet) language that describes presentation. It uses property: value; and not the = sign used in a programming language. It should be background-color: blue;
Question 5
A let clicks = 0;
B function count() {
C clicks == clicks + 1;
D }
Line C — A single = stores a new value in the variable. == only compares two values and changes nothing, so the click counter would never go up. It should be clicks = clicks + 1;

Student with a class code? Join your class →