IAL IT 9 WS JavaScript Functions

Worksheet 9
Topic 9: Understanding the functions of JavaScript

1. Create a simple script in a HTML page to display a message when a button is
clicked:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("Hello World");
}
</script>
</head>
<body>
<h1>JavaScript Example</h1>
<p>Click the button</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
This example used the <script> tag in the <head> section, implemented as a function
which runs when a button is clicked. Try this out and check it works properly.
The next example for you to try has scripts tags in both the <head> and <body>
sections:
<!DOCTYPE html>
<html>
<head>
<script>
{
var name = prompt("enter your name", "");
}
</script>
</head>
<body>
<h1>JavaScript Example</h1>
<p>
<script>
document.write('<p>Welcome ' + name + '</p>');
</script>
</p>
</body>
</html>
This scripts run when the page loads, rather than when any event occurs, such as a
button click.
© Pearson Education Ltd 2018. Copying permitted for purchasing institution only. This material is not copyright free.
Write a version of this second program that lets the user input their name in a form
text input box. You could write the function like this:
function myFunction() {
var myName = document.forms["myForm"]["myInput"].value;
*alert("Hello " + myName);
}
In this script myForm is the name of the form and myInput is the name of the text
input.
Create a form to use the function like this:
<form name="myForm" onsubmit= "return myFunction()" method =
"post">
Try this out, then see what happens if you change the way the message is displayed
from the alert methods, shown above, to using document.write, as shown in the
second example above. How does this change the way the page works?
2. Create a JavaScript program which will implement a simple guessing game. It will
create a random number between 1 and 10 and allow the user to guess what the
number is. The program should:
Create a random number using the following code:
var theNumber = Math.floor(Math.random()*10);
Create a form which allows the user to enter their guess in a text input box.
Write a function which will run when the user enters their guess and clicks a button.
The function will tell the user if they have guessed correctly or not.
You can improve the game, making it a bit easier by modifying the function so it tells
the user if they have guessed higher or lower than the random number.
Extension: You could make the game a bit harder by only allowing the user a limited
number of attempts.
3. Practise creating and using arrays in JavaScript by using this simple example:
<!DOCTYPE html>
<html>
<body>
<h1>Array example</h1>
<p>Add to values to the array: </p>
<form id="add-form" name="myAdd" method="post">
<input type="text" name="myInput">
<input type="submit" value="Go">
</form>
<p>Get values from the array by entering the array index
(starts at zero)</p>
<form id="get-form" name="myGet" method="post">
<input type="text" name="theIndex">
<input type="submit" value="Go">
</form>
<script>
var theArray = ["apple"];
//reference the forms in DOM
var addForm = document.getElementById('add-form');
var getForm = document.getElementById('get-form');
//use an event listener otherwise submitting the form resets
the variables
addForm.addEventListener('submit', addValue);
getForm.addEventListener('submit', getValue);
function addValue(event) {
event.preventDefault(); // Stops the form submission
var myValue = document.forms["myAdd"]["myInput"].value;
theArray.push(myValue);
alert("Value added to the array");
}
function getValue(event) {
event.preventDefault();
var myIndex = document.forms["myGet"]["theIndex"].value;
alert(theArray[myIndex]);
}
</script>
</body>
</html>
This example has two functions, one (called addValue) which adds values to the
array (called theArray) and one (called getValue) which takes an array index number
from the user and displays the value at the index in the array.
Note that the forms don’t use the usual onSubmit method to call the functions as this
would reload the page, which resets all the JavaScript variables.
4. Try the following simple JavaScript programs to help you understand how loops work.
The first one is a simple ‘for’ loop.
<!DOCTYPE html>
<html>
<head>
<title>For Loop Example</title>
</head>
<body>
<h2>JavaScript For Loop</h2>
<p id=example>Loop output:<br></p>
<script>
var textOutput = "";
var i;
for (i = 0; i < 5; i++) {
textOutput += "The loop counter is " + i + "<br>";
}
document.getElementById("example").innerHTML = textOutput;
</script>
</body>
</html>
a) What happens if you change the values of i = 0 or i = 1 in the ‘for’ loop?

b) What happens if you change i++ to i = I + 2 ?
This page uses a simple JavaScript ‘do-while’ loop to go through all the elements in
an array:
<!DOCTYPE html>
<html>
<html>
<head>
<title>Do-while Loop Example</title>
</head>
<body>
<h2>JavaScript Do-while Loop</h2>
<p id=example>Loop output:<br></p>
<script>
var fruit = ["apple", "banana", "orange", "pear", "raspberry"];
var i = 0;
var textOutput = "";
while (fruit[i]) {
textOutput += fruit[i] + "<br>";
i++;
}
document.getElementById("example").innerHTML = textOutput;
</script>
</body>
</html>
Extension: Use the page from the previous activity on arrays and change the second
function so it lists out all the values in the array, similar to the example above.
5. Create a simple HTML form like this one:
Write a Javascript function which will check that the First name input box on the form
is not empty when the form is submitted.
Add code to your JavaScript function to check that the Age text box contains a
numeric value.
Add further code to your JavaScript function to test if the check box at the bottom of
the form has been checked when it is submitted.
6. a) Use a combination of JavaScript, CSS and HTML to create a tabbed content
section on a web page similar to this:
b) Create a page like this:
Write a JavaScript function to sort the list in alphabetical order.

Extension: write a version of the JavaScript function which filters the list based on a
value the user enters.

IAL IT 9 WS JavaScript Functions

Uploaded by

Copyright:

Available Formats

IAL IT 9 WS JavaScript Functions

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IAL IT 9 WS JavaScript Functions

Uploaded by

Copyright:

Available Formats

Worksheet 9

Topic 9: Understanding the functions of JavaScript

a) What happens if you change the values of i = 0 or i = 1 in the ‘for’ loop?

b) Create a page like this:

Write a JavaScript function to sort the list in alphabetical order.

You might also like