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.
2/4/2026 1
[Link]
<html><head>
<script type="text/javascript">
function myfunction()
{
alert("HELLO");
}
</script>
</head>
<body>
<form>
<input type="button"
> value="Call function">
</form>
<p>By pressing the button, a function will be called.
The function will alert a message.</p>
</body></html>
2/4/2026 2
Output
2/4/2026 3
How to Define a Function
The syntax for creating a function is:
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:
function functionname()
{ some code }
Note: Do not forget about the importance of capitals in
JavaScript! The word function must be written in
lowercase letters, otherwise a JavaScript error occurs!
Also note that you must call a function with the exact
same capitals as in the function name.
2/4/2026 4
Function_arg.html
<html><head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt);
}
</script></head>
<body>
<form>
<input type="button"
> value="Call function">
</form>
<p>By pressing the button, a function with an
argument will be called. The function will alert
this argument.</p>
</body></html>
2/4/2026 5
Output
2/4/2026 6
Function_two.html
<html> <head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt);
}
</script> </head>
<body>
<form> <input type="button"
Morning!')“ value="In the
Morning">
<input type="button"
Evening!')" value="In the
Evening">
</form>
<p>When you click on one of the buttons, a function will be
called. The function will alert the argument that is passed to
it.</p></body> </html>
2/4/2026 7
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.
2/4/2026 8
Function that returns a value
<html><head>
<script type="text/javascript">
function myFunction()
{
return ("Hello, have a nice day!");
}
</script></head>
<body>
<script type="text/javascript">
document. Write(myFunction())
</script>
<p>The script in the body section calls a
function.</p>
<p>The function returns a
text.</p></body></html>
2/4/2026 9
Return_fun.html
<html><head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script></head>
<body>
<script type="text/javascript">
[Link](product(4,3));
</script>
<p>The script in the body section calls a function
with two parameters (4 and 3).</p>
<p>The function will return the product of these
two parameters.</p></body></html>
2/4/2026 10
JavaScript Loops
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
2/4/2026 11
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
}
2/4/2026 12
[Link]
<html><body>
<script type="text/javascript">
for (i = 0; i <= 5; i++)
{
[Link]("The number is " + i);
[Link]("<br />");
}
</script>
<p>Explanation:</p>
<p>This for loop starts with i=0.</p>
<p>As long as <b>i</b> is less than, or equal to 5,
the loop will continue to run.</p>
<p><b>i</b> will increase by 1 each time the loop
runs.</p></body></html>
2/4/2026 13
Header_for.html
<html>
<body>
<script type="text/javascript">
for (i = 1; i <= 6; i++)
{
[Link]("<h" + i + ">This is header " + i);
[Link]("</h" + i + ">");
}
</script>
</body>
</html>
2/4/2026 14
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
}
Note: The <= could be any
comparing statement.
2/4/2026 15
[Link]
<html><body>
<script type="text/javascript">
i=0;
while (i<=5)
{
[Link]("The number is " + i);
[Link]("<br />");
i++;
}
</script>
<p>Explanation:</p>
<p><b>i</b> is equal to 0.</p>
<p>While <b>i</b> is less than , or equal to, 5, the
loop will continue to run.</p>
<p><b>i</b> will increase by 1 each time the loop
runs.</p>
</body></html>
2/4/2026 16
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);
2/4/2026 17
[Link]
<html><body>
<script type="text/javascript">
i = 0;
do
{ [Link]("The number is " + i);
[Link]("<br />");
i++;
}
while (i <= 5)
</script>
<p>Explanation:</p>
<p><b>i</b> equal to 0.</p>
<p>The loop will run</p>
<p><b>i</b> will increase by 1 each time the loop
runs.</p>
<p>While <b>i</b> is less than , or equal to, 5, the
loop will continue to run.</p>
</body></html>
2/4/2026 18
JavaScript Break and Continue
Break: The break command will break the loop and continue
executing the code that follows after the loop (if any).
<html><body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
[Link]("The number is " + i);
[Link]("<br />");
}
</script>
<p>Explanation: The loop will break when i=3.
</p></body></html>
2/4/2026 19
Continue
The continue command will break the current loop and
continue with the next value.
<html><body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
[Link]("The number is " + i);
[Link]("<br />");
}
</script>
<p>Explanation: The loop will break the current loop and
continue with the next value when
i=3.</p></body></html>
2/4/2026 20
Output
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10
2/4/2026 21
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.
This chapter will teach you how to trap and handle
JavaScript error messages, so you don't lose your
audience.
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)
2/4/2026 22
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.
Syntax
try { //Run some code here }
catch(err)
{ //Handle errors here }
Note: that try...catch is written in
lowercase letters. Using uppercase letters
will generate a JavaScript error!
2/4/2026 23
Err_alert.html
<html><head>
<script type="text/javascript">
var txt="";
function message()
{
try
{
alert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + [Link] + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script></head><body>
<input type="button" value="View message" />
</body></html>
2/4/2026 24
Err_confirm.html
<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))
{
[Link]="[Link]
} } }
</script></head><body>
<input type="button" value="View message" />
</body></html>
2/4/2026 25
The 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.
Note that throw is written in lowercase
letters. Using uppercase letters will
generate a JavaScript error!
2/4/2026 26
[Link]
<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";
}else {
throw "Err3";
}
}
2/4/2026 27
catch(er)
{ if(er=="Err1")
{
alert("Error! The value is too high");
} if(er=="Err2")
{
alert("Error! The value is too low");
}if(er=="Err3")
{
alert(" The value is between 0 and 10");
}
}</script></body></html>
2/4/2026 28
