Table of Contents

1. Introduction.....................................................................................................................................2
2. Objectives .......................................................................................................................................3
3. Background......................................................................................................................................3
4. Working with JavaScript .................................................................................................................3
4.1. Block of Code....................................................................................................................5
4.2. Conditional statements........................................................................................................5
4.3. Loops...................................................................................................................................7
4.4. Arrays..................................................................................................................................9
4.5. Functions.............................................................................................................................9
4.6. Objects..............................................................................................................................10
5. Summary........................................................................................................................................11

2
1.Introduction
This laboratory is the second of the weekly laboratory activities to support the ICT
2304 – Web Design course. In last week's laboratory you designed a page using HTML
and CSS. The main objective of this week's laboratory activity is to familiarise
yourselves with client side scripting of an HTML page, using JavaScript.

2.Objectives
The objectives of this laboratory activity are to:
a) Introduce you to client-side programming concepts.
b) Practice on JavaScript concepts covered in the lectures.

3.Background
JavaScript is a client-side scripting language which runs in a browser. Most browsers
support Javascript but not all functionalities are supported by some browser.
Client-side scripting can be used for the following:
a) Validating user input.
b) Manipulation of the contents of a page, without contacting the server.
c) Submission of a form to the server using script.
d) Dynamic updates of web pages via client side scripting techniques that contact
the server, without a normal submission. This is done through AJAX
(Asynchronous JavaScript and XML) calls to the Server and the supplying of a
method to collect the new information from the server, which runs on the client
to update part of the page.
We will try to see how a), b) and c) can be implemented using JavaScript. d) will be
discussed further in another course. In this laboratory we will work on several tasks
which are designed to remind us of the syntax of JavaScript. Note that the scripts are
not that realistic but they illustrate on how to work with JavaScript and a web
scripting language. A more realistic example will be included in the next lab script
after we have discussed more concepts in our lectures.
Remember that JavaScript is case-sensitive and loosely-typed. The former makes
JavaScipt very hard to debug. It is prudent to follow some of the basic rules of
programming to make the debugging tasks less tedious.

3
4.Working with JavaScript
There are three ways of adding JavaScript script to a web page. A script can be
included in the body of the HTML document if it is generating content for the page.

Scripts in external files and the head tag allows the scripts to be downloaded before
the page loads. This code can be invoked to handle a Javascript event. In this lab
activity, we will try to use all the three methods.

Task 1 – Script in the body

Open a text editor program and copy the following text to file. Save it as task1.htm.
Preview the file in the browser. Make sure you understand the contents of the script.

<html>
<body>
<script type="text/javascript">
document.write("This is my first JavaScript!");
</script>
</body>
</html>

Task 2 – Script in the header

The following html page has a script in the head tag . A function has been used to
group the code. The code in this function is executed when the page is loading hence
the onload event.

Open a text editor program and copy the following text to file. Save it as task2.htm.
Preview the file in the browser. Why is nothing happening? Correct the code and
preview the file again in a browser. Make sure you understand the contents of the
script.

<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload
event");
}
</script>
</head>
<body onload="message()">
</body>
</html>

4
Task 3 – Script in an external file
Open a text editor program and copy the following text to file. Save it as task3.htm.

<html>
<head>
<script type="text/javascript" src="script.js">
</script>
</head>
<body onload="message()">
</body>
</html>

Open a text editor and copy the following code into the file:

function message()
{
alert("Alert from external JS file");
}
Save the file as script.js. Preview the HTML page in the browser.

4.1. Block of Code

Code enclosed in curly brackets is refered to as block of code and it is executed as a
sequence of statements, one after another.

Task 4 – Block of code

Copy the following code into a text editor program and save it with a filename
task4.htm. Preview it in a browser.

<html>
<body>
<script type="text/javascript">
{
document.write("This” + “ ”);
document.write("is” + “ ”);
document.write("my” + “ ”);
document.write("first” + “ ”);
document.write("javascript” + + “ ”);
}
</script
</body>
</html>

5
4.2.Conditional statements
Conditional statements allow code to be executed based on the outcome of the
condition. Preceding code can be executed when the outcome of the condition is true,
otherwise a false outcome will enforce the program to jump the execution of the code.

Task 5 – Using if statement

Copy the following text to a text editor program and save it as task5.htm. What does
the code do? How can you handle the unwanted exceptions?

<html>
<head>
<script type="text/javascript">

function getLetter()
{
var x = prompt("Please enter a letter", "");
if (x == x.toUpperCase())
{
alert ("upper case");
}

if (x == x.toLowerCase())
{
alert ("lower case");
}
}

</script>
</head>
<body >
<input type="button" onclick="getLetter()" value="get next letter" />
</body>
</html>

Task 6 - Using if ... else

Edit the code so that it uses the if - .... else conditional statement. Save the file with a
filename task6.htm.

Task 7 Using if ... if else ... else .......

Edit the code so that it uses the if .... else if ... else .... conditional statement and save
it as task7.htm. Add in the final else option the code to be executed when something
other than a character is entered (This should not be executed unless the user types in
something other than a letter! Check out the behaviour of the code when such an input
is provided. ). How should the code be changed to allow these unwanted cases to be
handled.

6
Task 8 (Homework exercise)

Edit the code so that it should first check whether it is a character or not. Surely, you
can keep this as an exercise.

Task 9 Using the switch statement

<html>
<head>
<script type="text/javascript">
function addNum()
{
var num =10;
var x = prompt("Please enter Y for yes and N for no", "");
switch(x)
{
case 'Y':
{
num++;
alert ("Number has been incremented by 1");
break;
}
case 'N':
{
num--;
alert ("Number has been decremented by 1");
break;
}
}
}
</script>
</head>
<body >
<input type="button" onclick="addNum()" value="Add" />
</body>
</html>

Change the code to allow lower case letters y and n to work as one of the options for
the user input . Also include a statement which would provide output for letters other
than y(Y) and n (N).