The behaviour layer: JavaScript
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which layer of a web page decides what happens when a user clicks a button?
2. Which language is a programming language?
3. Which statement about HTML and CSS is true?
4. Which change is an example of behaviour rather than presentation?
5. A page has headings, paragraphs and links but no JavaScript. What happens?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1<button onclick="alert('Hi!')">Click me</button> | Aif (clicked) { console.log('Hello'); } | |
| 2<script src="app.js"></script> | Bbutton.addEventListener('click', sayHi); | |
| 3JavaScript is a programming language, so it can make decisions and respond to the user | CHTML and CSS are markup languages for structure and presentation, not programming languages | |
| 4Presentation changes how a page looks, but behaviour changes what the page does when the user acts | DLoads a JavaScript file that adds behaviour to the page | |
| 5<style> button.onclick = sayHi; </style> | EJavaScript behaviour was put inside a style element, which only holds CSS presentation rules | |
| 6HTML and CSS are programming languages that make pages respond to clicks | FA button whose behaviour runs JavaScript when the user clicks it |
C
Definitions
JavaScript
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<button _______="sayHi()">Click me</button>
2.
<script ___="app.js"></script>
3.
________ sayHi() {
alert("Hi!");
}
4.
button.________________("click", sayHi);
5.
let title = document.getElementById("h");
title.___________ = "Clicked!";
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
function sayHi() {
B
alert("Hi!");
C
}
D
document.onclick = sayHi();
Question 2
A
<button id="go">Go</button>
B
<style src="app.js"></style>
C
<p id="msg"></p>
Question 3
A
function show() {
B
Console.log("Clicked");
C
}
Question 4
A
button {
B
background-color = blue;
C
}
Question 5
A
let clicks = 0;
B
function count() {
C
clicks == clicks + 1;
D
}
Answer Key
The behaviour layer: JavaScript
Section A: Quick Questions
Q1
A — The behaviour layer (JavaScript)
Q2
B — JavaScript
Q3
A — They are markup languages that describe structure and style
Q4
B — A button shows a message when it is clicked
Q5
A — The page still displays and its links still work
Section B: Match the Pairs
Q1
<button onclick="alert('Hi!')">Click me</button> → A button whose behaviour runs JavaScript when the user clicks it
Q2
<script src="app.js"></script> → Loads a JavaScript file that adds behaviour to the page
Q3
JavaScript is a programming language, so it can make decisions and respond to the user → if (clicked) { console.log('Hello'); }
Q4
Presentation changes how a page looks, but behaviour changes what the page does when the user acts → button.addEventListener('click', sayHi);
Q5
<style>
button.onclick = sayHi;
</style> → JavaScript behaviour was put inside a style element, which only holds CSS presentation rules
Q6
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
Section C: Definitions
Q1
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.Section D: Fill in the Blanks
Q1
<button onclick="sayHi()">Click me</button>Q2
<script src="app.js"></script>Q3
function sayHi() {
alert("Hi!");
}Q4
button.addEventListener("click", sayHi);Q5
let title = document.getElementById("h");
title.textContent = "Clicked!";Section E: Spot the Error
Q1
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;
Q2
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>.
Q3
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");
Q4
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;
Q5
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;