CAMBRIDGE INTERNATIONAL AS & A LEVEL IT
Worksheet 20.1: JavaScript tasks
Complete the following tasks:
1 Create a web page that displays the number 0 and a button. When the button is clicked the number
changes to 1, then 2, etc. until it reaches 10, and then it starts at 0 again.
2 Create a web page that simulates a simple calculator. There are two text boxes for the user to enter
numbers, and buttons for +, -, / and *. When the user clicks one of these buttons it outputs the result,
e.g. textbox1 + textbox2.
Extension: add validation, so that if the button is pressed and there is not a number in one (or both) text
boxes, an error message is displayed.
3 Create a web page that has a button and displays a series of images. Each time the button is clicked a
new image is displayed. When all the images have been displayed it starts with the first image again.
4 Create a web page that validates information about the user. The user has to enter their name, age,
favourite colour (from a list), favourite animal (from a list), etc. When a Submit button is pressed, a
suitable message is displayed if any of these are invalid.
5 Create a web page that asks the user to enter the mark they got in a test out of 100. The web page
outputs an appropriate grade depending on their mark, e.g. over 80 = A.
6 Create a web page that asks the user to input a number. The web page then outputs all the numbers
from 0 to the number entered.
7 Create a web page that asks the user to enter ten numbers, and stores these numbers in an array. The
user then clicks either a + button, - button, / button or * button. Each number stored in the array is then
calculated using 10 and the button clicked, e.g. if they clicked + each number has 10 added to it, if * is
clicked each number is multiplied by 10.
Cambridge International AS & A Level IT – Ellis © Cambridge University Press 2020
CAMBRIDGE INTERNATIONAL AS & A LEVEL IT
Worksheet 20.2: JavaScript description
Task 1
Read the web page code below, find out what each line of code does and write a detailed explanation of each
function used, each variable, etc.
<html>
<body>
<h1>Javascript Code</h1>
<p id = 'Paragraph1'> This is my first paragraph</p>
<p id="demo"></p>
<button type="button" onclick =
"document.getElementById('Paragraph1').innerHTML = theFunc(10,2)">
Press me!</button>
<script>
function theFunc(num1, num2) {
return num1 + num2;
}
</script>
</body>
</html>
Task 2
Edit the program so that it performs a different calculation.
Task 3
Edit the output so that it contains a statement and the result of the function.
Cambridge International AS & A Level IT – Ellis © Cambridge University Press 2020
CAMBRIDGE INTERNATIONAL AS & A LEVEL IT
Worksheet 20.3: JavaScript to correct
The following JavaScript program does not work. Find and correct the errors to make the program output
the text that the user enters.
<html>
<body>
<h1>Javascript Code</h1
<p id = 'theText> Enter your data</p>
<input type="text" id="enterAnswer">
<button type="button" onclick =
"document.getElementById("secondText").innerHTML = random(x)"> Press
me!</button>
<p id = 'secondTxet'></p>
<script>
function random() {
var userInput = document.getElemnetById("enterAnswer");
return userInput
}
<script>
</body>
</html>
Cambridge International AS & A Level IT – Ellis © Cambridge University Press 2020
CAMBRIDGE INTERNATIONAL AS & A LEVEL IT
Worksheet 20.4: Selection
What will happen when the following data is input into the text box?
a 1
b 9
c 10
d 19
e 20
f 25
<html>
<body>
<h1>Javascript Code</h1>
<p id = "theText"> Enter your data</p>
<input type="text" id="enterAnswer">
<button type="button" onclick = outputValue()> Press me!</button>
<p id = 'secondText'></p>
<script>
function outputValue() {
var userInput =
document.getElementById("enterAnswer").value;
if (userInput < 10){
document.write("one");
}else if(userInput < 20){
document.write("two");
}else if (userInput == 20){
document.write("three");
}else{
document.write("four");
}
}
</script>
</body>
</html>
Cambridge International AS & A Level IT – Ellis © Cambridge University Press 2020
