Chapter 2

Java Script

Department of Statistics & Computer Science

University of Kelaniya

COSC 32025
Web & Internet Technologies

Chapter 2

JavaScript

Conditional Operator
JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.

Syntax:

Variablename=(condition)?value1:value2

Example:

greeting=(visitor=="PRES")?"Dear President ":"Dear ";

If the variable visitor has the value of "PRES", then the variable greeting will be assigned the value "Dear
President " else it will be assigned "Dear".

Conditional Statements
Very often when you write code, you want to perform different actions for different decisions. You can use
conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
if statement - use this statement if you want to execute some code only if a specified condition is
true
if...else statement - use this statement if you want to execute some code if the condition is true
and another code if the condition is false
if...else if....else statement - use this statement if you want to select one of many blocks of code
to be executed
switch statement - use this statement if you want to select one of many blocks of code to be
executed

If Statement

You should use the if statement if you want to execute some code only if a specified condition is true.

Syntax

if (condition)
{
code to be executed if condition is true
}

Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error!

Example 1

<script type="text/javascript">
//Write a "Good morning" greeting if the time is less than 10
var d=new Date();
var time=d.getHours();
if (time<10)
{
document.write("<b>Good morning</b>");
}
</script>

Example 2

<script type="text/javascript">
//Write "Lunch-time!" if the time is 11
var d=new Date();
var time=d.getHours();
if (time==11)
{
document.write("<b>Lunch-time!</b>");
}
</script>

Notice that there is no ..else.. in this syntax. You just tell the code to execute some code only if the specified
condition is true.

If...else Statement
If you want to execute some code if a condition is true and another code if the condition is not true, use the
if....else statement.
Notes taken from w3schools.com

Chapter 2

Syntax

Example

if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}

Java Script

<script type="text/javascript">
/*
If the time is less than 10,
you will get a "Good morning" greeting.
Otherwise you will get a "Good day" greeting. */
var d = new Date();
var time = d.getHours();
if (time < 10)
{ document.write("Good morning!");
}
else
{ document.write("Good day!");
}
</script>

If...else if...else Statement

You should use the if....else if...else statement if you want to select one of many sets of lines to execute.

Syntax

Example

if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if condition1 and
condition2 are not true
}
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>");
}
else if (time>10 && time<16)
{ document.write("<b>Good day</b>");
}
else
{ document.write("<b>Hello World!</b>");
}
</script>

JavaScript Switch Statement

You should use the switch statement if you want to select one of many blocks of code to be executed.

Syntax

switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is
different from case 1 and 2
}

Notes taken from w3schools.com

Chapter 2

Java Script

This is how it works: First we have a single expression n (most often a variable), that is evaluated once. The
value of the expression is then compared with the values for each case in the structure. If there is a match,
the block of code associated with that case is executed. Use break to prevent the code from running into
the next case automatically.

<script type="text/javascript">
/*
You will receive a different greeting based
on what day it is. Note that Sunday=0,
Monday=1, Tuesday=2, etc.
*/
var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("Finally Friday");
break;
case 6:
document.write("Super Saturday");
break;
case 0:
document.write("Sleepy Sunday");
break;
default:
document.write("I'm looking forward to this weekend!");
}
</script>

Example

JavaScript Popup Boxes

In JavaScript we can create three kinds of popup boxes: Alert box, Confirm box, and Prompt box.

Alert Box
An alert box is often used if you want to make sure information comes through to the user. When an alert
box pops up, the user will have to click "OK" to proceed.

Syntax:

alert("sometext");

<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("I am an alert box!!");
}
</script>
</head>
<body>
<input type="button" onclick="disp_alert()" value="Display alert
box"/>
</body>
</html>
function disp_confirm()
{
Alert box with
line breaks
var r=confirm("Press
function
disp_alert() a button");
if
(r==true)
{
{
alert("Hello
again! This is how we" + '\n' + "add line breaks to an
document.write("You
pressed OK!");
alert
box!");
}
}
else
{
Confirm Box
document.write("You pressed Cancel!");
A confirm box is often used if you want the user to verify or accept something.
}
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
}
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
</script>
Syntax: </head>
confirm("sometext");
<body>
<html>
<input
<head> type="button" onclick="disp_confirm()" value="Display a
confirm
/>
<script box"
type="text/javascript">
Notes taken from w3schools.com

</body>
</html>

Chapter 2

Java Script

Prompt Box
A prompt box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an
input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
Syntax:

prompt("sometext","defaultvalue");

<html>
<head>
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("Please enter your name","Harry Potter");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?");
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_prompt()" value="Display a prompt
box" />
</body>
</html>

JavaScript Functions

A function is a reusable code-block that will be executed by an event, or when the function is called.
To keep the browser from executing a script when the page loads, you can put your script into a function.
A function contains code that will be executed by an event or by a call to that function.
You may call a function from anywhere within the page (or even from other pages if the function is
embedded in an external .js file).
Functions can be defined both in the <head> and in the <body> section of a document. However, to assure
that the function is read/loaded by the browser before it is called, it could be wise to put it in the <head>
section.

How to Define a Function

Syntax :

function functionname(var1,var2,...,varX)
{
some code
}

var1, var2, etc are variables or values passed into the function. The { and the } defines the start and end of
the function.
Note: A function with no parameters must include the parentheses () after the function name:

Notes taken from w3schools.com

Chapter 2

Java Script

function functionname()
{
some code
}

Example

<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!"
onclick="displaymessage()" >
</form>
</body>
</html>

If the line: alert("Hello world!!") in the example above had not been put within a function, it would have
been executed as soon as the line was loaded. Now, the script is not executed before the user hits the
button. We have added an onClick event to the button that will execute the function displaymessage() when
the button is clicked.

The return Statement

The return statement is used to specify the value that is returned from the function.
So, functions that are going to return a value must use the return statement.
Example

The function below should return the product of two numbers (a and b):

function prod(a,b)
{
x=a*b;
return x;
}
When you call the function above, you must pass along two parameters:
product=prod(2,3);
The returned value from the prod() function is 6, and it will be stored in the variable called product.

The Lifetime of JavaScript Variables

When you declare a variable within a function, the variable can only be accessed within that function. When
you exit the function, the variable is destroyed. These variables are called local variables. You can have local
variables with the same name in different functions, because each is recognized only by the function in
which it is declared.
If you declare a variable outside a function, all the functions on your page can access it. The lifetime of
these variables starts when they are declared, and ends when the page is closed.

JavaScript Loops
Loops in JavaScript are used to execute the same block of code a specified number of times or while a specified
condition is true.
Very often when you write code, you want the same block of code to run over and over again in a row. Instead of
adding several almost equal lines in a script we can use loops to perform a task like this.
In JavaScript there are two different kind of loops:
for - loops through a block of code a specified number of times
while - loops through a block of code while a specified condition is true

The for Loop

The for loop is used when you know in advance how many times the script should run.
Syntax

for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}

Example
Notes taken from w3schools.com

Chapter 2

Java Script

The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or
equal to 10. i will increase by 1 each time the loop runs.
Note: The increment parameter could also be negative, and the <= could be any comparing statement.

Result:

<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

The
The
The
The
The
The
The
The
The
The
The

number
number
number
number
number
number
number
number
number
number
number

is
is
is
is
is
is
is
is
is
is
is

0
1
2
3
4
5
6
7
8
9
10

The While Loop

The while loop is used when you want the loop to execute and continue executing while the specified condition is
true.

while (var<=endvalue)
{
code to be executed
}

Syntax

Note: The <= could be any comparing statement.

Example
Explanation: The example below defines a loop that starts with i=0. The loop will continue to run as long as i is
less than, or equal to 10. i will increase by 1 each time the loop runs.

<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=10)
{
document.write("The number is "
+ i);
document.write("<br />");
i=i+1;
}
</script>
</body>
</html>

Result:
The number
The number
The number
The number
The number
The number
The number
The number
The number
The number
The number

is
is
is
is
is
is
is
is
is
is
is

0
1
2
3
4
5
6
7
8
9
10

The do...while Loop

The do...while loop is a variant of the while loop. This loop will always execute a block of code ONCE, and then it
will repeat the loop as long as the specified condition is true. This loop will always be executed at least once, even
if the condition is false, because the code is executed before the condition is tested.

do
{

code to be executed
}
while (var<=endvalue);

Example

JavaScript

<html>
<body>
<script type="text/javascript">
var i=0;
do
{
document.write("The number is "
+ i);
document.write("<br />");
i=i+1;
}
while (i<0);
</script>
</body>
Break </html>
and Continue

Notes taken from w3schools.com

Result:
The number is 0

Chapter 2

Java Script

There are two special statements that can be used inside loops: break and continue.
Break
The break command will break the loop and continue executing the code that
any).
<html>
<body>
Example
<script type="text/javascript">
var i=0;
Result:
for (i=0;i<=10;i++)
{
The number is
if (i==3)
The number is
{
The number is
break;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

follows after the loop (if

0
1
2

Continue
The continue command will break the current loop and continue with the next value.
Example

<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

Result:
The
The
The
The
The
The
The
The
The
The

number
number
number
number
number
number
number
number
number
number

is
is
is
is
is
is
is
is
is
is

0
1
2
4
5
6
7
8
9
10

JavaScript For...In Statement

The for...in statement is used to loop (iterate) through the elements of an array or through the properties of
an object.
The code in the body of the for ... in loop is executed once for each element/property.

Syntax

for (variable in object)

{
code to be executed
}

The variable argument can be a named variable, an array element, or a property of an object.

Example
Using for...in to loop through an array:

JavaScript Events
Notes taken from w3schools.com

<html>
<body>
<script type="text/javascript">
var x;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (x in mycars)
{
document.write(mycars[x] + "<br />");
}
</script>
</body>
</html>
7

Chapter 2

Java Script

Events are actions that can be detected by JavaScript.

By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be
detected by JavaScript. Every element on a web page has certain events which can trigger JavaScript
functions. For example, we can use the onClick event of a button element to indicate that a function will run
when a user clicks on the button. We define the events in the HTML tags.
Examples of events:
A mouse click
A web page or an image loading
Mousing over a hot spot on the web page
Selecting an input box in an HTML form
Submitting an HTML form
A keystroke
Note: Events are normally used in combination with functions, and the function will not be executed before
the event occurs!.

onload and onUnload

The onload and onUnload events are triggered when the user enters or leaves the page.
The onload event is often used to check the visitor's browser type and browser version, and load the proper
version of the web page based on the information.
Both the onload and onUnload events are also often used to deal with cookies that should be set when a
user enters or leaves a page. For example, you could have a popup asking for the user's name upon his first
arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you
could have another popup saying something like: "Welcome John Doe!".

onFocus, onBlur and onChange

The onFocus, onBlur and onChange events are often used in combination with validation of form fields.
Below is an example of how to use the onChange event. The checkEmail() function will be called whenever
the user changes the content of the field:

<input type="text" size="30" id="email" onchange="checkEmail()">

onSubmit
The onSubmit event is used to validate ALL form fields before submitting it.
Below is an example of how to use the onSubmit event. The checkForm() function will be called when the
user clicks the submit button in the form. If the field values are not accepted, the submit should be
cancelled. The function checkForm() returns either true or false. If it returns true the form will be submitted,
otherwise the submit will be cancelled:

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

onMouseOver and onMouseOut

onMouseOver and onMouseOut are often used to create "animated" buttons.
Below is an example of an onMouseOver event. An alert box appears when an onMouseOver event is
detected:

<a href=http://www.w3schools.com onmouseover="alert('An onMouseOver event');return

false">
<img src="w3schools.gif" width="100" height="30">
</a>

JavaScript Try...Catch Statement

The try...catch statement allows you to test a block of code for errors.

JavaScript - Catching Errors

When browsing Web pages on the internet, we all have seen a JavaScript alert box telling us there is a
runtime error and asking "Do you wish to debug?". Error message like this may be useful for developers but
not for users. When users see errors, they often leave the Web page.
There are two ways of catching errors in a Web page:
By using the try...catch statement (available in IE5+, Mozilla 1.0, and Netscape 6)
By using the onerror event. This is the old standard solution to catch errors (available since
Netscape 3)

Notes taken from w3schools.com

Chapter 2

Java Script

Try...Catch Statement
The try...catch statement allows you to test a block of code for errors. The try block contains the code to be
run, and the catch block contains the code to be executed if an error occurs.

try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}

Syntax

Note that try...catch is written in lowercase letters. Using uppercase letters will generate a JavaScript error!
Example 1

The example below contains a script that is supposed to display the message "Welcome guest!" when you
click on a button. However, there's a typo in the message() function. alert() is misspelled as adddlert(). A
JavaScript error occurs:

<html>
<head>
<script type="text/javascript">
function message()
{adddlert("Welcome guest!");}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
To take more appropriate action when an error occurs, you can add a try...catch statement.
The example below contains the "Welcome guest!" example rewritten to use the try...catch statement. Since
alert() is misspelled, a JavaScript error occurs. However, this time, the catch block catches the error and
executes a custom code to handle it. The code displays a custom error message informing the user what
happened:

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.description + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
Example 2
The next example uses a confirm box to display a custom message telling users they can click OK to
continue viewing the page or click Cancel to go to the homepage. If the confirm method returns false, the
user clicked Cancel, and the code redirects the user. If the confirm method returns true, the code does
nothing:
Notes taken from w3schools.com

Chapter 2

Java Script

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Click OK to continue viewing this page,\n";
txt+="or Cancel to return to the home page.\n\n";
if(!confirm(txt))
{
document.location.href="http://www.w3schools.com/";
}
}
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>

JavaScript Throw Statement

The throw statement allows you to create an exception. If you use this statement together with the
try...catch statement, you can control program flow and generate accurate error messages.
Syntax
throw(exception)
The exception can be a string, integer, Boolean or an object.
Example 1
The example below determines the value of a variable called x. If the value of x is higher than 10 or lower
than 0 we are going to throw an error. The error is then caught by the catch argument and the proper error
message is displayed:

<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","");
try
{
if(x>10)
throw "Err1";
else if(x<0)
throw "Err2";
}
catch(er)
{
if(er=="Err1")
alert("Error! The value is too high");
if(er == "Err2")
alert("Error! The value is too low");
}
</script>
</body>
</html>

JavaScript Special Characters

The backslash (\) is used to insert apostrophes, new lines, quotes, and other special characters into a text
string. Look at the following JavaScript code:

var txt="We are the so-called "Vikings" from the north.";

document.write(txt);
Notes taken from w3schools.com

10

Chapter 2

Java Script

In JavaScript, a string is started and stopped with either single or double quotes. This means that the string
above will be chopped to: We are the so-called
To solve this problem, you must place a backslash (\) before each double quote in "Viking". This turns each
double quote into a string literal:

var txt="We are the so-called \"Vikings\" from the north.";

document.write(txt);
JavaScript will now output the proper text string:
Here is another example:

We are the so-called "Vikings" from the north.

document.write ("You \& I are singing!");

The example above will produce the output:
You & I are singing!
The table below lists other special characters that can be added to a text string with the backslash sign:
Code
\'
\"
\&
\\
\n
\r
\t
\b
\f

Outputs
single quote
double quote
ampersand
backslash
new line
carriage return
tab
backspace
form feed

JavaScript Guidelines
Some other important things to know when scripting with JavaScript.

White Space
JavaScript ignores extra spaces. You can add white space to your script to make it more readable. The
following lines are equivalent:

name="Hege";
name = "Hege";

Break up a Code Line

You can break up a code line within a text string with a backslash. The example below will be displayed
properly:

document.write("Hello \
World!");
However, you cannot break up a code line like this:

document.write \
("Hello World!");

Notes taken from w3schools.com

11