0% found this document useful (0 votes)

23 views

Lecture7 - Javascript

Uploaded by

Muhammad Ali

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

23 views

Lecture7 - Javascript

Uploaded by

Muhammad Ali

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 208

INTRODUCTION TO

JAVASCRIPT
JavaScript is the most popular scripting language on the
Internet, and works in all major browsers, such as
Internet Explorer, Firefox, and Opera.

JavaScript is used in millions of Web pages to improve

the design, validate forms, detect browsers, create
cookies, and much more.

What is JavaScript?

• JavaScript was designed to add interactivity to HTML pages

• JavaScript is a scripting language
• A scripting language is a lightweight programming language
• JavaScript is usually embedded directly into HTML pages
• JavaScript is an interpreted language (means that scripts
execute without preliminary compilation)
• Everyone can use JavaScript without purchasing a license

3/24/2024 1
Introduction To Javascript
Java and JavaScript are two completely different languages in
both concept and design!
Advantages
• JavaScript can put dynamic text into an HTML page -
A JavaScript statement like this: document.write("<h1>"
+ name + "</h1>") can write a variable text into an
HTML page
• JavaScript can react to events - A JavaScript can be set to
execute when something happens, like when a page has
finished loading or when a user clicks on an HTML element
• JavaScript can read and write HTML elements - A
JavaScript can read and change the content of an HTML
element

3/24/2024 2
Continue…
• JavaScript can be used to validate data - A JavaScript
can be used to validate form data before it is submitted to a
server. This saves the server from extra processing.
• JavaScript can be used to detect the visitor's browser -
A JavaScript can be used to detect the visitor's browser, and
- depending on the browser - load another page specifically
designed for that browser
• JavaScript can be used to create cookies - A JavaScript
can be used to store and retrieve information on the visitor's
computer

3/24/2024 3
Ecmascript
JavaScript's official name is "ECMAScript". The standard is
developed and maintained by the
ECMA organisation.
The language was invented by Brendan Eich at Netscape (with
Navigator 2.0), and has appeared in all Netscape and Microsoft
browsers since 1996.

Example Explained
To insert a JavaScript into an HTML page, we use the <script> tag.
Inside the <script> tag we use the type attribute to define the
scripting language.
So, the <script type="text/javascript"> and </script> tells where
the JavaScript starts and ends:
<html>
<head>
<script type="text/javascript">
...
</script>
</head>
<body>
3/24/2024 4
</body>
</html>
document.write
The word document.write is a standard JavaScript
command for writing output to a page.
By entering the document.write command between the
<script> and </script> tags, the browser will recognize it
as a JavaScript command and execute the code line. In this
case the browser will write Hello World! to the page:

<html>
<head>
<script type="text/javascript">
document.write("Hello World!");
</script>

</head>
<body>
</body>
</html>

Note: If we had not entered the <script> tag, the browser

would have treated the document.write("Hello World!")
command as pure text, and just write the entire line3/24/2024
on the 5

page.
Javascript where to

• JavaScripts in the body section will be executed

WHILE the page loads.
• JavaScripts in the head section will be executed when
CALLED.
• JavaScripts in a body will be executed immediately
while the page loads into the browser. This is not
always what we want. Sometimes we want to execute
a script when a page loads, other times when a user
triggers an event.
• Scripts in the head section: Scripts to be executed
when they are called, or when an event is triggered,
go in the head section. When you place a script in
the head section, you will ensure that the script is
loaded before anyone uses it.

<html>
<head>
<script type="text/javascript"> 3/24/2024 6

....
</script>
</head>
Javascript where to
Scripts in the body section: Scripts to be executed when the
page loads go in the body section. When you place a script in the
body section it generates the content of the page.
<html>
<head>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>

Scripts in both the body and the head section: You can place
an unlimited number of scripts in your document, so you can
have scripts in both the body and the head section.
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
<body>
<script type="text/javascript"> 3/24/2024 7

....
</script>
</body>
Using an External JavaScript

• Sometimes you might want to run the same JavaScript

on several pages, without having to write the same
script on every page.
• To simplify this, you can write a JavaScript in an
external file. Save the external JavaScript file with a
.js file extension.
• Note: The external script cannot contain the <script>
tag!
• To use the external script, point to the .js file in the
"src" attribute of the <script> tag:

3/24/2024 8
Note:
• JavaScript is a sequence of statements to be executed by
the browser.
• JavaScript is case sensitive - therefore watch your
capitalization closely when you write JavaScript
statements, create or call variables, objects and functions.
• It is normal to add a semicolon at the end of each
executable statement.
• Using semicolons makes it possible to write multiple
statements on one line

JavaScript Statement

A JavaScript statement is a command to the browser. The

purpose of the command is to tell the browser what to do.
This JavaScript statement tells the browser to write "Hello
Dolly" to the web page:

document.write("Hello Dolly");

3/24/2024 9
JavaScript Code
JavaScript code (or just JavaScript) is a sequence of JavaScript

statements. Each statement is executed by the browser in the

sequence they are written. This example will write a header and

two paragraphs to a web page:

3/24/2024 10
JavaScript Blocks

JavaScript statements can be grouped together in blocks.

Blocks start with a left curly bracket {, and ends with a right curly

bracket }. The purpose of a block is to make the sequence of

statements execute together. This example will write a header and

two paragraphs to a web page:

The example above is not very useful. It just demonstrates the use of a block. Normally a block
is used to group statements together in a function or in a condition (where a group of statements
should be executed if a condition is met).

3/24/2024 11
JavaScript Comments
• Comments can be added to explain the JavaScript or to make it

• Single line comments start with //.

• This example uses single line comments to explain the code:

3/24/2024 12
JavaScript Multi-Line Comments
Multi-line comments start with /* and end with */.

This example uses a multi line comment to explain the code:

Using Comments to Prevent Execution

In this example the comment is used to prevent the execution of a

single code line:

Using Comments at the End of a Line

In this example the comment is placed at the end of a line:

3/24/2024 14
JavaScript Variables

• Variables are "containers" for storing information.

• JavaScript variables are used to hold values or expressions.
• Rules for JavaScript variable names:
• Variable names are case sensitive (y and Y are two different
variables)
• Variable names must begin with a letter or the underscore character
• Note: Because JavaScript is case-sensitive, variable names are case-
sensitive.

3/24/2024 15
Declaring (Creating) JavaScript Variables
Creating variables in JavaScript is most often referred to as

"declaring" variables. You can declare JavaScript variables with the

var statement:
var x;
var carname;

After the declaration shown above, the variables are empty (they
have no values yet).

However, you can also assign values to the variables when you
declare them:
var x=5;
var carname="Volvo";

After the execution of the statements above, the variable x will

hold the value 5, and carname
will hold the value Volvo.

Note: When you assign a text value to a variable, use quotes

around the value.

3/24/2024 16
Assigning Values to Undeclared JavaScript Variables
If you assign values to variables that have not yet been declared,
the variables will automatically be declared.

These statements:
x=5;
carname="Volvo";

have the same effect as:

var x=5;
var carname="Volvo";

3/24/2024 17
Redeclaring JavaScript Variables
If you redeclare a JavaScript variable, it will not lose its original
value.

Var x=5; var x;

After the execution of the statements above, the variable x will

still have the value of 5. The value of x is not reset (or cleared)
when you redeclare it.

3/24/2024 18
JavaScript Operators

The operator = is used to assign values. The operator + is used to

add values.

The assignment operator = is used to assign values to JavaScript

variables.

The arithmetic operator + is used to add values together.

y=5;
z=2;
x=y+z;

The value of x, after the execution of the statements above is 7.

JavaScript Arithmetic Operators

Arithmetic operators are used to perform arithmetic between variables and/or values.

Operator Description Example Result

+ Addition x=y+2 x=7
- Subtraction x=y-2 x=3
3/24/2024 19
* Multiplication x=y*2 x=10
/ Division x=y/2 x=2.5
% Modulus (division x=y%2 x=1
remainder)
++ Increment x=++y x=6
-- Decrement x=--y x=4

JavaScript Assignment Operators

Assignment operators are used to assign values to JavaScript

variables. Given that x=10 and y=5, the table below explains the

assignment operators:

Operator Example Same As Result

= x=y x=5
+= x += y x = x+y x=15
-= x -= y x = x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0

3/24/2024 20
The + Operator Used on Strings

• The + operator can also be used to add string variables or text

values together. To add two or more string variables together,
use the + operator.
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

• After the execution of the statements above, the variable txt3 contains
"What a verynice day".

• To add a space between the two strings, insert a space into one of the
strings:

txt1="What a very ";

txt2="nice day";
txt3=txt1+txt2;

or insert a space into the expression:

3/24/2024 21
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

• After the execution of the statements above, the variable

txt3 contains:

• "What a very nice day"

Adding Strings and Numbers

Look at these examples:
x=5+5;
document.write(x);

x="5"+"5";
document.write(x);

x=5+"5";
document.write(x);

x="5"+5;
document.write(x);

Try it yourself.

The rule is:

If you add a number and a string, the result will be a string.

3/24/2024 22
JavaScript Comparison and Logical
Operators

Comparison and Logical operators are used to test for true or false.

Comparison Operators

Comparison operators are used in logical statements to determine

equality or difference between variables or values.

Given that x=5, the table below explains the comparison operators:

Operator Description Example

== is equal to x = = 8 is false
=== is exactly equal to (value x = = = 5 is
and type) true
x = = = " 5 " is
false
!= is not equal x != 8 is true
> is greater than x > 8 is false
< is less than x < 8 is true
>= is greater than or equal to x > = 8 is false
<= is less than or equal to x < = 8 is true

3/24/2024 23
How Can it be Used
Comparison operators can be used in conditional statements to
compare values and take action depending on the result:
if (age<18) document.write("Too young");

You will learn more about the use of conditional statements in the
next chapter of this tutorial.

Logical Operators
Logical operators are used to determine the logic

between variables or values. Given that x=6 and y=3, the

table below explains the logical operators:

Operator Description Example

&& and (x < 1 0 & & y > 1) is
true
|| or ( x = = 5 || y = = 5 ) is
false
! not ! ( x = = y ) is true

3/24/2024 24
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".

3/24/2024 25
JavaScript If...Else Statements

Conditional statements in JavaScript are used to perform

different actions based on different conditions.

Examples
If statement
How to write an if statement.

If...else statement
How to write an if...else statement.

If..else if...else statement

How to write an if..else if...else statement.

3/24/2024 26
Random link
• This example demonstrates a link, when you click on the link
it will take you to W3Schools.com OR to RefsnesData.no.
There is a 50% chance for each of them.

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 ma n y blocks of code to be
executed
• switch statement - use this statement if you want to
select one of man y blocks of code to be executed

3/24/2024 27
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>

3/24/2024 28
Example 2

//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>

Note: When comparing variables you must always use two equals signs
next to each other (==)!

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.

3/24/2024 29
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.

Syntax

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

Example
<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>

3/24/2024 30
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.

S yn tax
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
}

Example
<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>

3/24/2024 31
<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r d = n e w Date();

v a r t i m e = d.getHours();

if ( t ime < 10)

do cument .writ e( " < b> Go o d m o r n i n g < / b > " ) ;

< / s c r i pt >

<html>

<body>

<p>

This e x a m p l e d e m o n s t r a t e s t he If s t a t e me nt .

</p>

<p>
If t h e t i m e on your browser is l e s s t h a n 10,

y o u will g e t a "Good m o r n i n g " greet ing.

</p>

</body>

</html>

3/24/2024 32
<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r d = n e w Date();

v a r t i m e = d.getHours();

if ( t ime < 10)

do cument .writ e( " < b> Go o d m o r n i n g < / b > " ) ;

else

do cument .writ e( " < b> Go o d d a y < / b > " ) ;

< / s c r i pt >

<p>

This e x a m p l e d e m o n s t r a t e s t he If...Else s t a t e me nt .

</p>

<p>
If t h e t i m e on your browser is l e s s t h a n 10,

y o u will g e t a "Good m o r n i n g " greet ing.

Otherwise y o u will g e t a "Good d a y " greet ing.

</p>

</body> 3/24/2024 33

</html>
html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r d = n e w Date();
v a r t i m e = d.getHours();

if ( t i m e < 1 0 )

do cument .writ e( " < b> Go o d m o r n i n g < / b > " ) ;

e l s e if ( t i m e > = 1 0 & & t i m e < 1 6 )

do cument .writ e( " < b> Go o d d a y < / b > " ) ;

else

do cument .writ e( " < b> Hello World!</b>");

< / s c r i pt >

<p>

This e x a m p l e d e m o n s t r a t e s t he if..else if...else s t a t e ment .

</p>

</body>

</html>

3/24/2024 34
<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r r= Mat h.random();

if ( r> 0.5)

d o c u m e nt .wr it e( " < a href= 'ht t p://www.w3scho o ls.co m'> Learn Web
Development!</a>");

else

d o c u m e nt .wr it e( " < a href= 'ht tp://www.refsnesdata.no'> Visit R e f s n e s D a t a ! < / a > " ) ;

< / s c r i pt >

</body>

</html>

3/24/2024 35
JavaScript Switch Statement
Conditional statements in JavaScript are used to perform different actions based on different
conditions.

Examples
Switch statement
How to write a switch statement.

The JavaScript Switch Statement

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

S yn tax
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
}

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.

Example
<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"); 3/24/2024 36
break;
case 0:
document.write("Sleepy Sunday");
break;
default:
document.write("I'm looking forward to this weekend!");
}
</script>
<html>

v a r d = n e w Date();

t h e D a y= d .g et Da y ( ) ;

swit ch (theDay)

c a s e 5:
d o c u m e nt .wr it e( " < b> Fin a lly F r i d a y < /b> " ) ;

break;

c a s e 6:
document.write("<b>Super Saturday</b>");

break;

c a s e 0:
document.write("<b>Sleepy Sunday</b>");

break;

default :

d o c u m e n t . w r i t e ( " < b > I ' m really looking forward to this w e e k e n d ! < / b > " ) ;

< / s c r i pt >

< p > T h i s J a v a S c r i p t will g e n e r a t e a different g r e e t i n g b a s e d on w h a t d a y it is. Note

t hat S u n d a y = 0 , M o n d a y = 1 , T u e s d a y = 2 , e t c . < / p >

</body>

</html>

3/24/2024 37
JavaScript Popup Boxes

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

Examples
Alert box
Alert box with line breaks

Confirm box

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");

Confirm Box
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.

Syntax:

confirm("sometext");

3/24/2024 38
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>

function disp_alert()

alert("I a m a n alert box!!");

< / s c r i pt >

</head>

<body>

< i n p u t t y p e = " b u t t o n " onclick="disp_alert()" v a l u e = " D i s p l a y alert box" / >

</body>

</html>

3/24/2024 39
<html>

<head>
< s c r i p t t ype= " t ext /javascript " >
function disp_alert()

alert("Hello a g a i n ! This is how w e " + '\n' + " a d d line b r e a k s to a n alert box!");

< / s c r i pt >

</head>

</body>

</html>
<html>

<head>
< s c r i p t t ype= " t ext /javascript " >
function disp_confirm()

v a r r=confirm("Press a button");

if (r==true)

document.write("You p r e s s e d OK!");

else

document.write("You p r e s s e d Cancel!");

}
3/24/2024 40
< / s c r i pt >

</head>

function disp_prompt()

{
v a r n a m e = p r o m p t ( " P l e a s e enter your n a m e " , " Ha r r y Potter");

if ( n a m e ! = n u l l & & n a m e ! = " " )

document.write("Hello " + n a m e + " ! How a r e y o u t o day? " ) ;

< / s c r i pt >

</head>

<body>

< i n p u t t y p e = " b u t t o n " onclick="disp_prompt()" v a l u e = " D i s p l a y a prompt box" / >

</body>

</html>

3/24/2024 41
JavaScript Functions

A function is a reusable code-block that will be executed by an event, or when the function is
called.

Examples
Function
How to call a function.

Function with arguments

How to pass a variable to a function, and use the variable in the function.

Function with arguments 2

How to pass variables to a function, and use these variables in the function.

Function that returns a value

How to let the function return a value.

A function with arguments, that returns a value

How to let the function find the product of two arguments and return the result.

JavaScript Functions
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.

Example

3/24/2024 42
<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 t h e line: alert("Hello world!!") i n t h e e x a m p l e a b o v e h a d not b e e n p u t within a

function, it would h a v e b e e n e x e c u t e d a s soon a s t h e line w a s l o a d e d . Now, the
script is not e x e c u t ed before t h e user hit s t he button. We h a v e a d d e d a n onClick
e v e n t to t h e button t hat will execut e t h e function d i s p l a y m e s s a g e ( ) w h e n t h e button
is clicked.

You will learn more about JavaScript events in the JS Events chapter.

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 the3/24/2024
function 43
name.
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.

3/24/2024 44
<html>

<head>

< s c r i p t t ype= " t ext /javascript " >

function myfunction()

alert("HELLO");

< / s c r i pt >

</head>

<body>

<form>

< i n p u t t ype= " but t o n"

onclick="myfunction()"

v a l u e = " C a l l funct io n" >

</form>

< p > B y p r e s s i n g t h e button, a function will b e called. The function will alert a
message.</p>

</body>

</html>

<html> 3/24/2024 45

function myfunction(txt)

alert(txt);

< / s c r i pt >

</head>

<body>

<form>
< i n p u t t ype= " but t o n"

onclick="myfunction('Hello')"

v a l u e = " C a l l funct io n" >

</form>

< p > B y p r e s s i n g t h e button, a function with a n a r g u m e n t will b e c a l l e d . The function

will alert

this a r g u m e n t . < / p >

</body>

</html>

3/24/2024 46
<html>

function myfunction(txt)

alert(txt);

< / s c r i pt >

</head>

<body>

<form>
< i n p u t t ype= " but t o n"

o nclick= " myfunct io n('Goo d Morning!')"

v a l u e = " I n t h e Mo rning" >

< i n p u t t ype= " but t o n"

o nclick= " myfunct io n('Goo d E v e n i n g ! ' ) "

value="In the Evening">

</form>

<p>

When y o u click on o ne of t h e but t o ns, a function will b e c a l l e d . The function will

alert

t h e a r g u m e n t t hat is p a s s e d to it.

</p>

3/24/2024 47

</body>

</html>
<html>

<head>

< s c r i p t t ype= " t ext /javascript " >

function myFunction()

return ("Hello, h a v e a nice d a y ! " ) ;

< / s c r i pt >

</head>

<body>

< s c r i p t t ype= " t ext /javascript " >

document.write(myFunction())

< / s c r i pt >

< p > T h e script in t h e b o d y section calls a f u n c t i o n .< /p>

< p > T h e function returns a t e x t . < / p >

</body>
</html>

3/24/2024 48
<html>

function product(a,b)

return a*b;

< / s c r i pt >

</head>

document.write(product(4,3));

< / s c r i pt >

< p > T h e script in t h e b o d y section calls a function with two p a r a m e t e r s ( 4 a n d

3).</p>

< p > T h e function will return t h e product of t h e s e two p a r a m e t e r s . < / p >

</body>

</html>

3/24/2024 49
JAVASCRIPT FOR LOOP
Loops in JavaScript are used to execute the same block of code a specified number of times or
while a specified condition is true.

Examples
For loop
How to write a for loop. Use a For loop to run the same block of code a specified number of
times.

Looping through HTML headers

How to use the for loop to loop through the different HTML headers.

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

The for Loop

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

Syntax

3/24/2024 50
for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}

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.

Note: The increment parameter could also be negative, and the <= could be any comparing
statement.

Result

The number is 0
The number is 1
The number is 2
The number is 3
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

3/24/2024 51
The while loop
The while loop will be explained in the next chapter.

<html>

for (i = 0 ; i < = 5 ; i + + )

{
document.write("The n u m b e r is " + i);

do cument .write("<br />");

< / s c r i pt >

<p>Explanation:</p>

< p > T h i s for loop starts with i = 0 . < / p >

< p > A s l o n g a s < b > i < / b > is l e s s t h a n , or e q u a l to 5 , t he loop will co nt inue to

run.</p>

< p > < b > i < / b > will i n c r e a s e b y 1 e a c h t i m e t h e loop r u n s . < / p >

</body>
</html>

3/24/2024 52
<html>

for (i = 1 ; i < = 6 ; i + + )

d o c u m e nt .wr it e( " < h" + i + " > T h i s is h e a d e r " + i);

do cument .writ e( " < /h" + i + " > " ) ;

< / s c r i pt >

</body>

</html>
JavaScript While Loop
Loops in JavaScript are used to execute the same block of code a specified number of times or
while a specified condition is true.

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.

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>
3/24/2024 54
</body>
</html>

3/24/2024 54
Result

The number is 0
The number is 1
The number is 2
The number is 3
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

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

<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>
</html>

3/24/2024 55
Result

The number is 0

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

i=0;

while ( i < = 5 )

{
document.write("The n u m b e r is " + i);

do cument .write("<br />");

i++;

< / s c r i pt >

<p>Explanation:</p>

< p > < b > i < / b > is e q u a l to 0 . < / p >

< p > W h i l e < b > i < / b > is l e s s t h a n , or e q u a l to, 5 , t h e loop will co nt inue to r u n . < / p >

< p > < b > i < / b > will i n c r e a s e b y 1 e a c h t i m e t h e loop r u n s . < / p >

3/24/2024 56
</body>

</html>

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

i = 0;

{
document.write("The n u m b e r is " + i);

do cument .write("<br />");

i++;

while (i < = 5)

< / s c r i pt >

<p>Explanation:</p>

< p > < b > i < / b > e q u a l to 0 . < / p >

< p > T h e loop will r u n < / p >

< p > < b > i < / b > will i n c r e a s e b y 1 e a c h t i m e t h e loop r u n s . < / p >

< p > W h i l e < b > i < / b > is l e s s t h a n , or e q u a l to, 5 , t h e loop will co nt inue to r u n . < / p >

3/24/2024 57
JAVASCRIPT BREAK AND CONTINUE

JavaScript break and continue Statements

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 follows after the
loop (if any).

Example

Result

The number is 0
The number is 1
The number is 2

3/24/2024 58
Continue

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

Example

Result

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
<html>

var i=0;

for ( i = 0 ; i < = 1 0 ; i + + )

if ( i = = 3 )
3/24/2024 59
{
break;

}
document.write("The n u m b e r is " + i);

do cument .write("<br />");

< / s c r i pt >

< p > E x p l a n a t i o n : The loop will b r e a k w h e n i = 3 . < / p >

</body>

</html>

<html>

var i=0;

for ( i = 0 ; i < = 1 0 ; i + + )

if ( i = = 3 )

continue;

}
document.write("The n u m b e r is " + i);

do cument .write("<br />");

< / s c r i pt >

< p > E x p l a n a t i o n : The loop will b r e a k t h e current loop a n d co nt inue with t h 3/24/2024
e next 60
value when i=3.</p>

</body>

</html>
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.

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:

<html>
<body>
<script type="text/javascript">
var x;
var mycars = new Array();

3/24/2024 61
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

for (x in mycars)
{
document.write(mycars[x] + "<br />");
}
</script>
</body>
</html>

<html>

v a r x;

v a r m y c a r s = n e w Array();

mycars[0] = "Saab";

m y c a r s [ 1 ] = "Volvo";

m y c a r s [ 2 ] = "BMW";

for (x in m y c a r s )

do cument .write(mycars[ x] + " < b r /> " ) ;

< / s c r i pt >

</body>

</html>

3/24/2024 62
JavaScript Events
Events are actions that can be detected by JavaScript.

Events
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!

For a complete reference of the events recognized by JavaScript, go to our complete Event
reference.

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
3/24/2024 63
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:

JavaScript Try...Catch Statement

3/24/2024 64
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.

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:

• B y u s i n g t h e try...catch s t a t e m e n t ( a v a i l a b l e in I E 5 + , Mozilla 1 . 0 , a n d
Net scape 6)
• B y u s i n g t h e onerror e v e n t . This is t h e old s t a n d a r d solution to c a t c h errors
( a v a i l a b l e s i n c e Net scape 3)

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.

S yn tax
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!

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> 3/24/2024 65
<head>
<script type="text/javascript">
function message()
{
adddlert("Welcome guest!");
}
</script>
</head>

</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>

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
3/24/2024 66
returns false, the user clicked Cancel, and the code redirects the user. If the confirm method
returns true, the code does nothing:

<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>

The onerror Event

The onerror event will be explained soon, but first you will learn how to use the throw statement
to create an exception. The throw statement can be used together with the try...catch statement.

<html>

v a r t xt ="";

function m e s s a g e ( )

{ 3/24/2024 67
try

adddlert("Welcome guest !" ) ;

catch(err)

{
txt="There w a s a n error on this p a g e . \ n \n" ;

txt+="Error description: " + err.description + "\n\n";

t xt +="Click OK to continue.\n\n";

alert(txt);

< / s c r i pt >

</head>

<body>

<input type="button" value="View m e s s a g e " onclick="message()" />

</body>

</html>

<html>

v a r t xt =""

function m e s s a g e ( ) 3/24/2024 68
{

try

adddlert("Welcome guest !" ) ;

catch(err)

{
txt="There w a s a n error on this p a g e . \ n \n" ;

t xt +="Click OK to co nt inue v i e w i n g this p a g e , \ n " ;

t x t + = " o r Cancel to return to t h e h o m e p a g e . \ n \ n " ;

if(!confirm(txt))

document.location.href="http://www.w3schools.com/";

< / s c r i pt >

</head>

<body>

<input type="button" value="View m e s s a g e " onclick="message()" />

</body>

</html>

3/24/2024 69
JAVASCRIPT THROW STATEMENT
The throw statement allows you to create an exception.

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.

S yn tax
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!

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>

3/24/2024 70
<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r x= pro mpt ( " Ent er a n u m b e r b e t w e e n 0 a n d 10:" ,"");

try

if( x> 10)

throw "Err1";

e l s e if(x<0)

throw "Err2";

e l s e if(isNaN(x))

throw "Err3";

catch(er)

if(er=="Err1")

alert("Error! The v a l u e is too high" ) ;

}
3/24/2024 71
if(er=="Err2")
{

alert("Error! The v a l u e is too low");

if(er=="Err3")

alert("Error! The v a l u e is not a number" );

< / s c r i pt >

</body>

</html>

JavaScript The onerror Event

Using the onerror event is the old standard solution to catch errors in a web page.

The onerror Event

We have just explained how to use the try...catch statement to catch errors in a web page. Now
we are going to explain how to use the onerror event for the same purpose.

The onerror event is fired whenever there is a script error in the page.

To use the onerror event, you must create a function to handle the errors. Then you call the
function with the onerror event handler. The event handler is called with three arguments: msg
(error message), url (the url of the page that caused the error) and line (the line where the error
occurred).

S yn tax
onerror=handleErr
function handleErr(msg,url,l)
{
//Handle the error here 3/24/2024 72
return true or false
}

The value returned by onerror determines whether the browser displays a standard error message.
If you return false, the browser displays the standard error message in the JavaScript console. If
you return true, the browser does not display the standard error message.

Example

The following example shows how to catch the error with the onerror event:

<html>
<head>
<script type="text/javascript">
onerror=handleErr;
var txt="";
function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n";
txt+="Error: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Line: " + l + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
return true;
}
function message()
{
adddlert("Welcome guest!");
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>

3/24/2024 73
<html>

onerror=handleErr;

v a r t xt ="";
function handleErr(msg,url,l)

{
txt="There w a s a n error on this p a g e . \ n \n" ; txt+="Error: " + m s g +

"\n";

t x t + = " UR L: " + url + "\n"; t x t + = " L i n e : " + l + "\n\n";

t xt +="Click OK to continue.\n\n"; alert(txt);

return true;

function m e s s a g e ( )

adddlert("Welcome guest !" ) ;

< / s c r i pt >

</head>
<body>

<input type="button" value="View m e s s a g e " onclick="message()" />

</body>
</html>

3/24/2024 74
JavaScript Special Characters
In JavaScript you can add special characters to a text string by using the backslash sign.

Insert 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);

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: We are the so-called "Vikings" from the north.

Here is another example:

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

The example above will produce the following 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 Outputs
\' single quote
\" double quote
\& ampersand
\\ backslash
\n new line
3/24/2024 75
\r carriage return
\t tab
\b backspace
\f form feed

JAVASCRIPT GUIDELINES
Some other important things to know when scripting with JavaScript.

JavaScript is Case Sensitive

A function named "myfunction" is not the same as "myFunction" and a variable named "myVar"
is not the same as "myvar".

JavaScript is case sensitive - therefore watch your capitalization closely when you create or call
variables, objects and functions.

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!");

3/24/2024 76
JAVASCRIPT OBJECTS INTRODUCTION

JavaScript is an Object Oriented Programming (OOP) language.

An OOP language allows you to define your own objects and make your own variable types.

Object Oriented Programming

JavaScript is an Object Oriented Programming (OOP) language. An OOP language allows you to
define your own objects and make your own variable types.

However, creating your own objects will be explained later, in the Advanced JavaScript section.
We will start by looking at the built-in JavaScript objects, and how they are used. The next pages
will explain each built-in JavaScript object in detail.

Note that an object is just a special kind of data. An object has properties and methods.

Properties
Properties are the values associated with an object.

In the following example we are using the length property of the String object to return the
number of characters in a string:

The output of the code above will be:

12
3/24/2024 77
Methods
Methods are the actions that can be performed on objects.

In the following example we are using the toUpperCase() method of the String object to display
a text in uppercase letters:

The output of the code above will be:

HELLO WORLD!

JavaScript String Object

The String object is used to manipulate a stored piece of text.

Complete String Object Reference

For a complete reference of all the properties and methods that can be used with the String
object, go to our complete String object reference.

The reference contains a brief description and examples of use for each property and method!

3/24/2024 78
String object
The String object is used to manipulate a stored piece of text.

Examples of use:

The following example uses the length property of the String object to find the length of a string:

var txt="Hello world!";

document.write(txt.length);

The code above will result in the following output:

The following example uses the toUpperCase() method of the String object to convert a string to
uppercase letters:

var txt="Hello world!";

document.write(txt.toUpperCase());

The code above will result in the following output:

HELLO WORLD!

<html>

<body>
< s c r i p t t ype= " t ext /javascript " >
v a r txt="Hello World!";

document.write(txt.length);
< / s c r i pt >
</body>
</html>

3/24/2024 79
<html>

<body>
< s c r i p t t ype= " t ext /javascript " >
v a r txt="Hello World!";
d o c u m e n t . w r i t e ( " < p > B i g : " + txt.big() + " < / p > " ) ;

d o c u m e n t . w r i t e ( " < p > S m a l l : " + t xt .small() + " < / p > " ) ;

d o c u m e nt .wr it e( " < p> B o ld: " + txt.bold() + " < / p > " ) ;

d o c u m e nt .wr it e( " < p> It a lic : " + txt.italics() + " < / p > " ) ;
d o c u m e nt .wr it e( " < p> B l ink: " + txt.blink() + " ( do es not work in I E ) < / p> " );
d o c u m e nt .wr it e( " < p> Fix ed: " + txt.fixed() + " < / p > " ) ;

d o c u m e nt .wr it e( " < p> St r ike: " + txt.strike() + " < / p > " ) ;
do cument .write("<p>Fo ntco lo r: " + txt.fontcolor("Red") + " < / p > " ) ;

d o c u m e nt .wr it e( " < p> Fo nt s i z e: " + txt.fontsize(16) + " < / p > " ) ;
d o c u m e nt .wr it e( " < p> Lo wer c a s e: " + txt.toLowerCase() + " < / p > " ) ;

d o c u m e n t . w r i t e ( " < p > U p pe r c a s e : " + txt.toUpperCase() + " < / p > " ) ;

d o c u m e n t . w r i t e ( " < p > S u b s c r i p t : " + txt.sub() + " < / p > " ) ;

d o c u m e nt .wr it e( " < p> Sup er s c r ipt : " + txt.sup() + " < / p > " ) ;
d o c u m e nt .wr it e( " < p> Lin k: " + txt.link("http://www.w3schools.com") + " < / p > " ) ;

< / s c r i pt >

</body>

</html>

3/24/2024 80
<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r str="Hello world!";
document.write(str.indexOf("Hello") + " < b r />");

document.write(str.indexOf("World") + " < b r /> " ) ;

document.write(str.indexOf("world"));

< / s c r i pt >

</body>

</html>

3/24/2024 81
<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r str="Hello world!";
document.write(str.match("world") + " < b r /> ") ;

document.write(str.match("World") + " < b r />");

document.write(str.match("worlld") + " < b r /> ") ;

document.write(str.match("world!"));
< / s c r i pt >

</body>

</html>

<html>

<body>
< s c r i p t t ype= " t ext /javascript " >
v a r str="Visit Microsoft!";

document.write(str.replace(/Microsoft/,"W3Schools"));

< / s c r i pt >

</body>

</html>

3/24/2024 82
JavaScript Date Object
The Date object is used to work with dates and times.

Complete Date Object Reference

For a complete reference of all the properties and methods that can be used with the Date object,
go to our complete Date object reference.

The reference contains a brief description and examples of use for each property and method!

Create a Date Object

The Date object is used to work with dates and times.

The following code create a Date object called myDate:

var myDate=new Date()

Note: The Date object will automatically hold the current date and time as its initial value!

Set Dates
We can easily manipulate the date by using the methods available for the Date object.

In the example below we set a Date object to a specific date (14th January 2010):

var myDate=new Date();

myDate.setFullYear(2010,0,14);

And in the following example we set a Date object to be 5 days into the future:

var myDate=new Date();

myDate.setDate(myDate.getDate()+5);

Note: If adding five days to a date shifts the month or year, the changes are handled
3/24/2024 83
automatically by the Date object itself!
Compare Two Dates
The Date object is also used to compare two dates.

The following example compares today's date with the 14th January 2010:

var myDate=new Date();

myDate.setFullYear(2010,0,14);
var today = new Date();
if (myDate>today)
{
alert("Today is before 14th January 2010");
}
else
{
alert("Today is after 14th January 2010");
}

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

document.write(Date());

< / s c r i pt >

</body>

</html>

<html>

var minutes = 1000*60;

v a r hours = minut es*60;

v a r d a y s = hours*24;

var years = days*365;

v a r d = n e w Date();

v a r t = d.getTime();

v a r y = t/years;

document.write("It's b e e n : " + y + " y e a r s s i n c e 1970/01/01!" ) ;

< / s c r i pt >

</body>

</html>

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r d = n e w Date();
d.setFullYear(1992,10,3);

document.write(d);

< / s c r i pt > 3/24/2024 85

</body>

</html>

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r d = n e w Date();

do cument .write (d.toUTCString());

< / s c r i pt >

</body>

</html>

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r d = n e w Date();
v a r w e e k d a y = n e w Array(7);

weekday[0]="Sunday";

w e e k d a y [ 1 ] = " Mo n d a y " ;

weekday[ 2] = " T uesday" ;

3/24/2024 86
w e e k da y [ 3] = " Wed nes da y " ;
w e e k da y [ 4] = " Th ur s da y " ;

weekday[ 5] = " Friday" ;

w e e k d a y [ 6 ] = " Sa t u r d a y " ;

document.write("Today it is " + weekday[ d.getDay()]);

< / s c r i pt >

</body>

</html>

<html>

function startTime()

{
v a r t o d a y = n e w Date();

v a r h=today.getHours();

v a r m= t o day.get Minutes();

v a r s= t o day.get Seco nds( ) ;

// a d d a zero in front of n u m b e r s < 1 0

m=checkTime(m);

s= checkT ime( s) ;

d o c u m e nt .g et E lem ent B y I d( ' t xt ' ) .in ner HT M L=h+ " :" + m+ " :" +s ;

t=setTimeout('startTime()',500);
3/24/2024 87
}

function checkTime(i)

if ( i< 10)

i = " 0 " + i;

return i;

< / s c r i pt >

</head>

< b o d y onload="startTime()">

< div id="txt"></div>

</body>

</html>

JavaScript Array Object

The Array object is used to store multiple values in a single variable.

Complete Array Object Reference

3/24/2024 88
For a complete reference of all the properties and methods that can be used with the Array object,
go to our complete Array object reference.

The reference contains a brief description and examples of use for each property and method!

Create an Array
The following code creates an Array object called myCars:

var myCars=new Array()

There are two ways of adding values to an array (you can add as many values as you need to
define as many variables you require).

var myCars=new Array();

mycars[0]="Saab";
mycars[1]="Volvo";
mycars[2]="BMW";

You could also pass an integer argument to control the array's size:

var myCars=new Array(3);

mycars[0]="Saab";
mycars[1]="Volvo";
mycars[2]="BMW";

var myCars=new Array("Saab","Volvo","BMW");

Note: If you specify numbers or true/false values inside the array then the type of variables will
be numeric or Boolean instead of string.

Access an Array
You can refer to a particular element in an array by referring to the name of the array and the
index number. The index number starts at 0.

The following code line: 3/24/2024 89

document.write(myCars[0]);

will result in the following output:

Saab

Modify Values in an Array

To modify a value in an existing array, just add a new value to the array with a specified index
number:

myCars[0]="Opel";

Now, the following code line:

document.write(myCars[0]);

will result in the following output:

Opel

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r m y c a r s = n e w Array();

mycars[0] = "Saab";

m y c a r s [ 1 ] = "Volvo";

m y c a r s [ 2 ] = "BMW";

for ( i = 0 ; i < m y c a r s . l e n g t h ; i + + )

do cument .write(mycars[ i] + " < b r /> " ) ; 3/24/2024 90

}

< / s c r i pt >

</body>

</html>

<html>

v a r x;

v a r m y c a r s = n e w Array();

mycars[0] = "Saab";

m y c a r s [ 1 ] = "Volvo";

m y c a r s [ 2 ] = "BMW";

for (x in m y c a r s )

do cument .write(mycars[ x] + " < b r /> " ) ;

< / s c r i pt >

</body>

</html>

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

3/24/2024 91
v a r arr = n e w Array(3);

arr[0] = "Jani";

arr[1] = "Tove";

arr[2] = " Hege" ;

v a r arr2 = n e w Array(3);

arr2[0] = "John";

arr2[1] = "Andy";

arr2[2] = "Wendy";

document.write(arr.concat(arr2));

< / s c r i pt >

</body>

</html>

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r arr = n e w Array(3);

arr[0] = "Jani";

arr[1] = " Hege" ;

arr[2] = " St ale" ;

3/24/2024 92
document.write(arr.join() + " < b r /> " ) ;

document.write(arr.join("."));

< / s c r i pt >

</body>

</html>

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r arr = n e w Array(6);

arr[0] = "Jani";

arr[1] = " Hege" ;

arr[2] = " St ale" ;

arr[3] = "Kai Jim";

arr[4] = "Borge";

arr[5] = "Tove";

document.write(arr + " < b r /> " ) ;

document.write(arr.sort());

< / s c r i pt >

</body> 3/24/2024 93
</html>

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

function sortNumber(a, b)

return a - b;

v a r arr = n e w Array(6);

arr[0] = " 10" ;

arr[1] = "5";

arr[2] = " 40" ;

arr[3] = " 25" ;

arr[4] = " 1 0 00 " ;

arr[5] = "1";

document.write(arr + " < b r /> " ) ;

document.write(arr.sort(sortNumber));

< / s c r i pt >

</body> 3/24/2024 94
</html>

JAVASCRIPT BOOLEAN OBJECT

The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false).

Complete Boolean Object Reference

For a complete reference of all the properties and methods that can be used with the Boolean
object, go to our complete Boolean object reference.

The reference contains a brief description and examples of use for each property and method!

Create a Boolean Object

The Boolean object represents two values: "true" or "false".

The following code creates a Boolean object called myBoolean:

var myBoolean=new Boolean();

Note: If the Boolean object has no initial value or if it is 0, -0, null, "", false, undefined, or NaN,
the object is set to false. Otherwise it is true (even with the string "false")!

All the following lines of code create Boolean objects with an initial value of false:

var myBoolean=new Boolean();

var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
3/24/2024 95
And all the following lines of code create Boolean objects with an initial value of true:

var myBoolean=new Boolean(true);

var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Richard");

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r b 1 = n e w B o o lean( 0);

v a r b 2 = n e w Boolean(1);

v a r b 3 = n e w Boolean("");

v a r b 4 = n e w Boolean(null);

v a r b 5 = n e w Boolean(NaN);

v a r b 6 = n e w Boolean("false");

document.write("0 is b o o l e a n " + b 1 + " < b r /> " ) ;

document.write("1 is b o o l e a n " + b 2 + " < b r /> " ) ;

document.write("An e m p t y string is boolean " + b 3 + " < b r /> " ) ;

document.write("null is bo o lean " + b 4 + " < b r />");

document.write("NaN is bo o lean " + b 5 + " < b r /> " ) ;

document.write("The st ring ' f a l s e ' is boolean " + b 6 + " < b r /> " ) ;

< / s c r i pt >

</body> 3/24/2024 96
</html>

JAVASCRIPT MATH OBJECT

The Math object allows you to perform mathematical tasks.

Complete Math Object Reference

For a complete reference of all the properties and methods that can be used with the Math object,
go to our complete Math object reference.

The reference contains a brief description and examples of use for each property and method!

Math Object
The Math object allows you to perform mathematical tasks.

The Math object includes several mathematical constants and methods.

Syntax for using properties/methods of Math:

var pi_value=Math.PI;
var sqrt_value=Math.sqrt(16);

Note: Math is not a constructor. All properties and methods of Math can be called by using Math
as an object without creating it.

Mathematical Constants
JavaScript provides eight mathematical constants that can be accessed from the Math object.
These are: E, PI, square root of 2, square root of 1/2, natural log of 2, natural log of 10, base-2
log of E, and base-10 log of E.
3/24/2024 97
You may reference these constants from your JavaScript like this:
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

Mathematical Methods
In addition to the mathematical constants that can be accessed from the Math object there are
also several methods available.

The following example uses the round() method of the Math object to round a number to the
nearest integer:

document.write(Math.round(4.7));

The code above will result in the following output:

The following example uses the random() method of the Math object to return a random number
between 0 and 1:

document.write(Math.random());

The code above can result in the following output:

0.06312843761329368

The following example uses the floor() and random() methods of the Math object to return a
random number between 0 and 10:

document.write(Math.floor(Math.random()*11));

The code above can result in the following output:

3/24/2024 98
<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

document.write(Math.round(0.60) + " < b r /> " ) ;

document.write(Math.round(0.50) + " < b r /> " ) ;

document.write(Math.round(0.49) + " < b r /> " ) ;

document.write(Math.round(-4.40) + " < b r /> " ) ;

document.write(Math.round(-4.60));

< / s c r i pt >

</body>

</html>

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

document.write(Math.random());

< / s c r i pt >

</body> 3/24/2024 99
</html>

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

do cument .writ e( Mat h.max( 5,7) + " < b r /> " ) ;

do cument .writ e( Mat h.max( - 3,5) + " < b r /> " ) ;

do cument .writ e( Mat h.max( - 3,-5) + " < b r /> " ) ;

document.write(Math.max(7.25,7.30));

< / s c r i pt >

</body>

</html>

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

do cument .write(Math.min(5,7) + " < b r />");

do cument .write(Math.min(-3,5) + " < b r /> " ) ;

do cument .write(Math.min(-3,-5) + " < b r /> " ) ;

document.write(Math.min(7.25,7.30));

3/24/2024 100
< / s c r i pt >

</body>

</html>

JavaScript RegExp Object

The RegExp object is used to specify what to search for in a text

What is RegEp
RegExp, is short for regular expression.

When you search in a text, you can use a pattern to describe what you are searching for. RegExp
IS this pattern.

A simple pattern can be a single character.

A more complicated pattern consists of more characters, and can be used for parsing, format
checking, substitution and more.

You can specify where in the string to search, what type of characters to search for, and more.

Defining RegExp
The RegExp object is used to store the search pattern.

We define a RegExp object with the new keyword. The following code line defines a RegExp
object called patt1 with the pattern "e":

var patt1=new RegExp("e");

When you use this RegExp object to search in a string, you will find the letter "e".
3/24/2024 101
Methods of the RegExp Object
The RegExp Object has 3 methods: test(), exec(), and compile().

test()
The test() method searches a string for a specified value. Returns true or false

Example:
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));

Since there is an "e" in the string, the output of the code above will be:

true

Try it yourself

exec()
The exec() method searches a string for a specified value. Returns the text of the found value. If
no match is found, it returns null

Example 1:
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));

Since there is an "e" in the string, the output of the code above will be:

Example 2: 3/24/2024 102

You can add a second parameter to the RegExp object, to specify your search. For example; if
you want to find all occurrences of a character, you can use the "g" parameter ("global").

For a complete list of how to modify your search, visit our complete RegExp object reference.

When using the "g" parameter, the exec() method works like this:

• Finds the first occurence of "e", and stores its position

• If you run exec() again, it starts at the stored position, and finds the next occurence of "e",
and stores its position

var patt1=new RegExp("e","g");

do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)

Since there is six "e" letters in the string, the output of the code above will be:

eeeeeenull

compile()
The compile() method is used to change the RegExp.

compile() can change both the search pattern, and add or remove the second parameter.

Example:
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));

Since there is an "e" in the string, but not a "d", the output of the code above will be:

truefalse

3/24/2024 103
Complete RegExp Object Reference
For a complete reference of all the properties and methods that can be used with the RegExp
object, go to our complete RegExp object reference.

The reference contains a brief description and examples of use for each property and method
including the string object

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r p a t t 1 = n e w R egExp(" e");

document.write(patt1.test("The b e s t t h i n g s in life are free"));

< / s c r i pt >

</body>

</html>

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r p a t t 1 = n e w R egExp(" e");

do cument .write(patt1.exec("The b e s t t h i n g s in life are free"));

< / s c r i pt >

3/24/2024 104
</body>

</html>

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r p a t t 1 = n e w R egExp( " e" ," g" ) ;

{
result = pat t1.exec( "The b e s t t h i n g s in life are free");

document.write(result);

while (result!=null)

< / s c r i pt >

</body>

</html>

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r p a t t 1 = n e w R egExp(" e");

document.write(patt1.test("The b e s t t h i n g s in life are free"));

3/24/2024 105
patt1.compile("d");

document.write(patt1.test("The b e s t t h i n g s in life are free"));

< / s c r i pt >

</body>

</html>

JavaScript HTML DOM Objects

In addition to the built-in JavaScript objects, you can also access and manipulate all of the
HTML DOM objects with JavaScript.

More JavaScript Objects

Follow the links to learn more about the objects and their collections, properties, methods and
events.

Object Description
Window The top level object in the JavaScript hierarchy. The Window object
represents a browser window. A Window object is created automatically
with every instance of a <body> or <frameset> tag
Navigator Contains information about the client's browser
Screen Contains information about the client's display screen
History Contains the visited URLs in the browser window
Location Contains information about the current URL

3/24/2024 106
The HTML DOM
The HTML DOM is a W3C standard and it is an abbreviation for the Document Object Model
for HTML.

The HTML DOM defines a standard set of objects for HTML, and a standard way to access and
manipulate HTML documents.

All HTML elements, along with their containing text and attributes, can be accessed through the
DOM. The contents can be modified or deleted, and new elements can be created.

The HTML DOM is platform and language independent. It can be used by any programming
language like Java, JavaScript, and VBScript.

Follow the links below to learn more about how to access and manipulate each DOM object with
JavaScript:

Object Description
Document Represents the entire HTML document and can be used to access all
elements in a page
Anchor Represents an <a> element
Area Represents an <area> element inside an image-map
Base Represents a <base> element
Body Represents the <body> element
Button Represents a <button> element
Event Represents the state of an event
Form Represents a <form> element
Frame Represents a <frame> element
Frameset Represents a <frameset> element
Iframe Represents an <iframe> element
Image Represents an <img> element
Input button Represents a button in an HTML form
Input checkbox Represents a checkbox in an HTML form
Input file Represents a fileupload in an HTML form
Input hidden Represents a hidden field in an HTML form
Input password Represents a password field in an HTML form
Input radio Represents a radio button in an HTML form
Input reset Represents a reset button in an HTML form
Input submit Represents a submit button in an HTML form
Input text Represents a text-input field in an HTML form
Link Represents a <link> element 3/24/2024 107
Meta Represents a <meta> element
Option Represents an <option> element
Select Represents a selection list in an HTML form
Style Represents an individual style statement
Table Represents a <table> element
TableData Represents a <td> element
TableRow Represents a <tr> element
Textarea Represents a <textarea> element

JAVASCRIPT HTML DOM OBJECTS

In addition to the built-in JavaScript objects, you can also access and manipulate all of the
HTML DOM objects with JavaScript.

More JavaScript Objects

Follow the links to learn more about the objects and their collections, properties, methods and
events.

3/24/2024 108
The HTML DOM
The HTML DOM is a W3C standard and it is an abbreviation for the Document Object Model
for HTML.

The HTML DOM defines a standard set of objects for HTML, and a standard way to access and
manipulate HTML documents.

All HTML elements, along with their containing text and attributes, can be accessed through the
DOM. The contents can be modified or deleted, and new elements can be created.

The HTML DOM is platform and language independent. It can be used by any programming
language like Java, JavaScript, and VBScript.

Follow the links below to learn more about how to access and manipulate each DOM object with
JavaScript:

Object Description
Document Represents the entire HTML document and can be used to access all
elements in a page
Anchor Represents an <a> element
Area Represents an <area> element inside an image-map
Base Represents a <base> element
Body Represents the <body> element
Button Represents a <button> element
Event Represents the state of an event
Form Represents a <form> element
Frame Represents a <frame> element
Frameset Represents a <frameset> element
Iframe Represents an <iframe> element
Image Represents an <img> element
Input button Represents a button in an HTML form
Input checkbox Represents a checkbox in an HTML form
Input file Represents a fileupload in an HTML form
Input hidden Represents a hidden field in an HTML form
Input password Represents a password field in an HTML form
Input radio Represents a radio button in an HTML form
Input reset Represents a reset button in an HTML form
Input submit Represents a submit button in an HTML form
Input text Represents a text-input field in an HTML form
Link Represents a <link> element
Meta Represents a <meta> element 3/24/2024 109
Option Represents an <option> element
Select Represents a selection list in an HTML form
Style Represents an individual style statement
Table Represents a <table> element
TableData Represents a <td> element
TableRow Represents a <tr> element
Textarea Represents a <textarea> element

<html>

v a r bro wser= navigat o r.appName;

v a r b_version=navigator.appVersion;

v a r version=parseFloat(b_version);

document.write("Browser n a m e : " + browser);

do cument .write("<br />");

document.write("Browser version: " + version);

< / s c r i pt >

</body>

</html>

<html>

do cument .writ e( " < p> B ro wser: ");

d o c u m e nt .wr it e( n a v ig a t o r .a pp Na me + " < / p > " ) ;

do cument .writ e( " < p> B ro wserversio n: ");

do cument .write(navigat or.appVersio n + " < / p > " ) ;

3/24/2024 110
do cument .writ e( " < p> Co de: ");

do cument .writ e( navigat o r.appCo deName + " < / p > " ) ;

d o c u m e nt .wr it e( " < p> Pla t f o r m: ");

do cument .write(navigat or.platfo rm + " < / p > " ) ;

do cument .writ e( " < p> Co o kies e n a b l e d : ");

do cument .write(navigat or.co o kieEnabled + " < / p > " ) ;

do cument .writ e( " < p> B ro wser's user a g e n t h e a d e r : ");

do cument .write(navigat or.userAgent + " < / p > " ) ;

< / s c r i pt >

</body>

</html>

<html>

<body>

< s c r i p t t ype= " t ext /javascript " >

v a r x = navigat o r;
do cument .writ e( " Co deName= " + x.appCodeName);

do cument .write("<br />");

document.write("MinorVersion=" + x.appMinorVersion);

do cument .write("<br />");

d o c u m e nt .wr it e( " Na m e= " + x . a p p N a m e);

do cument .write("<br />");

3/24/2024 111
document.write("Version=" + x.appVersion);
do cument .write("<br />");

do cument .write("Co o kieEnabled=" + x.cookieEnabled);

do cument .write("<br />");

document.write("CPUClass=" + x.cpuClass);

do cument .write("<br />");

do cument .write("OnLine=" + x.onLine);

do cument .write("<br />");

do cument .write("Plat fo rm=" + x.platform);

do cument .write("<br />");

document.write("UA=" + x.userAgent);

do cument .write("<br />");

d o c u m e nt .wr it e( " B r o ws er L a ng u a g e= " + x.bro wserLanguage) ;

do cument .write("<br />");

document.write("SystemLanguage=" + x.systemLanguage);

do cument .write("<br />");

document.write("UserLanguage=" + x.userLanguage);

< / s c r i pt >

</body>

</html>

<html>

function detectBrowser()
3/24/2024 112
{
v a r bro wser= navigat o r.appName;

v a r b_version=navigator.appVersion;

v a r version=parseFloat(b_version);

if ( ( browser=="Netscape"||bro wser=="Microsoft Internet Explorer") & &

( versio n> = 4) )

alert("Your browser is g o o d e n o u g h !" ) ;

else

alert("It's t i m e to u p g r a d e your browser!");

< / s c r i pt >

</head>

< b o d y onload="detectBrowser()">

</body>

</html>

3/24/2024 113
A cookie is often used to identify a user.

JavaScript Cookies

What is a Cookie?
A cookie is a variable that is stored on the visitor's computer. Each time the same computer
requests a page with a browser, it will send the cookie too. With JavaScript, you can both create
and retrieve cookie values.

Examples of cookies:

• Name cookie - The first time a visitor arrives to your web page, he or she must fill in
her/his name. The name is then stored in a cookie. Next time the visitor arrives at your
page, he or she could get a welcome message like "Welcome John Doe!" The name is
retrieved from the stored cookie
• Password cookie - The first time a visitor arrives to your web page, he or she must fill in
a password. The password is then stored in a cookie. Next time the visitor arrives at your
page, the password is retrieved from the cookie
• Date cookie - The first time a visitor arrives to your web page, the current date is stored
in a cookie. Next time the visitor arrives at your page, he or she could get a message like
"Your last visit was on Tuesday August 11, 2005!" The date is retrieved from the stored
cookie

Create and Store a Cookie

In this example we will create a cookie that stores the name of a visitor. The first time a visitor
arrives to the web page, he or she will be asked to fill in her/his name. The name is then stored
in a cookie. The next time the visitor arrives at the same page, he or she will get welcome
message.

First, we create a function that stores the name of the visitor in a cookie variable:

function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays); 3/24/2024 114
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

The parameters of the function above hold the name of the cookie, the value of the cookie, and
the number of days until the cookie expires.

In the function above we first convert the number of days to a valid date, then we add the number
of days until the cookie should expire. After that we store the cookie name, cookie value and the
expiration date in the document.cookie object.

Then, we create another function that checks if the cookie has been set:

The function above first checks if a cookie is stored at all in the document.cookie object. If the
document.cookie object holds some cookies, then check to see if our specific cookie is stored. If
our cookie is found, then return the value, if not - return an empty string.

Last, we create the function that displays a welcome message if the cookie is set, and if the
cookie is not set it will display a prompt box, asking for the name of the user:

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
function checkCookie()
{
username=getCookie('username');
if (username!=null && username!="")
{
alert('Welcome again '+username+'!');
}
else
{
username=prompt('Please enter your name:',"");
if (username!=null && username!="")
{
setCookie('username',username,365);
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>

The example above runs the checkCookie() function when the page loads.

3/24/2024 116
<html>

function getCookie(c_name)

if ( do cument.co o kie.lengt h>0)

{
c_start=document.co okie.indexOf(c_ name + " = " ) ;

if (c_start!=-1)

{
c_start=c_start + c _ n a m e . l e n g t h + 1 ;

c_end=document.cookie.indexOf(";",c_start);

if ( c _ e n d= = - 1 ) c_ end= do cument.co o kie.lengt h

return unescape(document.cookie.substring(c_start,c_end));

return ""

function setCookie(c_name,value,expiredays)

{
v a r e x d a t e = n e w Date();

exdat e.setDate(exdate.getDat e()+expiredays) ;

d o c u m e n t . c o o k i e = c _ n a m e + " = " + e s c a p e ( v a l u e ) + ( ( e x p i r e d a y s = = n u l l ) ? " " : ";

expires="+exdate.toGMTString());
3/24/2024 117
}
function checkCookie()

username= get Co o kie( 'username') ;

if ( u s e r n a m e ! = n u l l & & u s e r n a m e ! = " " )

alert('Welcome a g a i n ' + u s e r n a m e + ' ! ' ) ;

else

{
u s e r n a m e = p r o m p t ( ' P l e a s e enter your n a m e : ' , " " );

if ( u s e r n a m e ! = n u l l & & u s e r n a m e ! = " " )

set Co o kie('username',username,365);

< / s c r i pt >

</head>

< b o d y onLoad="checkCookie()">

</body>

</html>

3/24/2024 118
JavaScript Form Validation
JavaScript can be used to validate input data in HTML forms before sending off the content to a
server.

JavaScript Form Validation

JavaScript can be used to validate input data in HTML forms before sending off the content to a
server.

Form data that typically are checked by a JavaScript could be:

• has the user left required fields empty?

• has the user entered a valid e-mail address?
• has the user entered a valid date?
• has the user entered text in a numeric field?

Required Fields
The function below checks if a required field has been left empty. If the required field is blank,
an alert box alerts a message and the function returns false. If a value is entered, the function
returns true (means that data is OK):

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}

The entire script, with the HTML form could look something like this:

<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{ 3/24/2024 119
if (value==null||value=="")
{alert(alerttxt);return false;}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false;}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"
onsubmit="return validate_form(this)"
method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>

E-mail Validation
The function below checks if the content has the general syntax of an email.

This means that the input data must contain at least an @ sign and a dot (.). Also, the @ must not
be the first character of the email address, and the last dot must at least be one character after the
@ sign:

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false;}
else {return true;}
}
}

The entire script, with the HTML form could look something like this:

<html>
<head> 3/24/2024 120
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false;}
else {return true;}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false;}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"
onsubmit="return validate_form(this);"
method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>

JavaScript Animation

With JavaScript we can create animated images.

Examples
Button animation

3/24/2024 121
JavaScript Animation
It is possible to use JavaScript to create animated images.

The trick is to let a JavaScript change between different images on different events.

In the following example we will add an image that should act as a link button on a web page.
We will then add an onMouseOver event and an onMouseOut event that will run two JavaScript
functions that will change between the images.

The HTML Code

The HTML code looks like this:

<a href="http://www.w3schools.com" target="_blank">

Note that we have given the image a name to make it possible for JavaScript to address it later.

The onMouseOver event tells the browser that once a mouse is rolled over the image, the
browser should execute a function that will replace the image with another image.

The onMouseOut event tells the browser that once a mouse is rolled away from the image,
another JavaScript function should be executed. This function will insert the original image
again.

The JavaScript Code

The changing between the images is done with the following JavaScript:

The function mouseOver() causes the image to shift to "b_blue.gif".

The function mouseOut() causes the image to shift to "b_pink.gif".

The Entire Code

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="b_blue.gif";
}
function mouseOut()
{
document.b1.src ="b_pink.gif";
}
</script>
</head>

<html>

function mouseOver()

d o c u m e nt .b 1.s r c = " b_ blue.gif";

}
3/24/2024 123
function mouseOut()
{

d o c u m e nt .b 1.s r c = " b_ pink.gif";

< / s c r i pt >

</head>

<body>

< a href= "http://www.w3scho o ls.co m" t a r g e t = " _ b la nk" >

< i m g bo rder= " 0" alt = " V isit W3Schools!" src= " b_ pink.gif" n a m e = " b 1 " w i d t h= " 26"
h e i g h t = " 2 6 " o n m o u s eo v er= " m o us eO v e r( ) " o n m o u s eo ut = " mo us eO ut () " / > < / a >

</body>

</html>

JavaScript Image Maps

An image-map is an image with clickable regions.

HTML Image Maps

From our HTML tutorial we have learned that an image-map is an image with clickable regions.
Normally, each region has an associated hyperlink. Clicking on one of the regions takes you to
the associated link.

Example

The example below demonstrates how to create an HTML image map, with clickable regions.
Each of the regions is a hyperlink:

<img src ="planets.gif"

width ="145" height ="126"
3/24/2024 124
alt="Planets"
usemap ="#planetmap" />
<map id ="planetmap"
name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
href ="sun.htm" target ="_blank"
alt="Sun" />
<area shape ="circle" coords ="90,58,3"
href ="mercur.htm" target ="_blank"
alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
href ="venus.htm" target ="_blank"
alt="Venus" />
</map>

Re su lt

Adding some JavaScript

We can add events (that can call a JavaScript) to the <area> tags inside the image map. The
<area> tag supports the onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver,
onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, and onBlur events.

Here's the above example, with some JavaScript added:

<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
</script>
</head>
<body>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />

<map id ="planetmap" name="planetmap">

<area shape ="circle" coords ="90,58,3"

onMouseOver="writeText('The planet Mercury is very
difficult to study from the Earth because it is
always so close to the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />

<area shape ="circle" coords ="124,58,8"

onMouseOver="writeText('Until the 1960s, Venus was
often considered a twin sister to the Earth because
Venus is the nearest planet to us, and because the
two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>

</body>
</html>

<html>

<body>

< i m g src = " p l a n e t s . g i f " width = " 1 4 5 " h e i g h t = " 1 2 6 " a l t = " Pl a net s "
usemap="#planetmap" />

< m a p id = " p l a n e t m a p " n a m e = " p l a n e t m a p " >

< a r e a s h a p e = " r e c t " coords = " 0 , 0 , 8 2 , 1 2 6 "

href = " s u n . h t m " t a r g e t = " _ b l a n k " a l t = " S u n " / >

< a r e a s h a p e = " circle" coords = " 9 0 , 5 8 , 3 "

href = " m er c u r .ht m" t arget = " _ b l a n k " alt = " Mercury" / >

< a r e a s h a p e = " circle" coords = " 1 2 4 , 5 8 , 8 "

href = " v e n u s . h t m " t a r g e t = " _ bl a nk" a l t = " V e n u s " / > 3/24/2024 126
</map>

</body>

</html>

<html>

function writeText(txt)

document.getElementById("desc").innerHTML=txt;

< / s c r i pt >

</head>

<body>

< i m g src = " p l a n e t s . g i f " width = " 1 4 5 " h e i g h t = " 1 2 6 " a l t = " Pl a net s "
usemap="#planetmap" />

< m a p id = " p l a n e t m a p " n a m e = " p l a n e t m a p " >

< a r e a s h a p e = " r e c t " coords = " 0 , 0 , 8 2 , 1 2 6 "

onMouseOver="writeText('The S u n a n d t h e g a s g i a n t p l a n e t s like Jupiter a r e b y far

t h e l a r g e s t objects in our Solar S y s t e m. ' ) "

href = " s u n . h t m " t a r g e t = " _ b l a n k " a l t = " S u n " / >

< a r e a s h a p e = " circle" coords = " 9 0 , 5 8 , 3 "

3/24/2024 127
onMouseOver="writeText('The p l a n e t Mercury is v e r y difficult to s t u d y from the
Eart h b e c a u s e it is a l w a y s so clo se to t he Sun.') "

href = " m er c u r .ht m" t arget = " _ b l a n k " alt = " Mercury" / >

< a r e a s h a p e = " circle" coords = " 1 2 4 , 5 8 , 8 "

onMouseOver="writeText('Until t he 1 9 6 0 s , V enus w a s often co nsidered a twin sister

to t he Eart h b e c a u s e V enus is t he ne a re st p l a n e t to u s , a n d b e c a u s e t h e two planet s
s e e m to s h a r e m a n y characteristics.')"

href = " v e n u s . h t m " t a r g e t = " _ bl a nk" a l t = " V e n u s " / >

</map>

< p id="desc"></p>

</body>

</html>

JavaScript Timing Events

With JavaScript, it is possible to execute some code NOT immediately after a function is called,
but after a specified time interval. This is called timing events.

Examples
Simple timing 3/24/2024 128
Another simple timing

Timing event in an infinite loop

Timing event in an infinite loop - with a Stop button

A clock created with a timing event

JavaScript Timing Events

With JavaScript, it is possible to execute some code NOT immediately after a function is called,
but after a specified time interval. This is called timing events.

It's very easy to time events in JavaScript. The two key methods that are used are:

• setTimeout() - e x e c u t es a co de s o m e t i m e in t h e future
• clearTimeout() - c a n c e l s t h e setTimeout()

Note: The setTimeout() and clearTimeout() are both methods of the HTML DOM Window
object.

setTimeout()
S yn tax
var t=setTimeout("javascript statement",milliseconds);

The setTimeout() method returns a value - In the statement above, the value is stored in a
variable called t. If you want to cancel this setTimeout(), you can refer to it using the variable
name.

The first parameter of setTimeout() is a string that contains a JavaScript statement. This
statement could be a statement like "alert('5 seconds!')" or a call to a function, like "alertMsg()".

The second parameter indicates how many milliseconds from now you want to execute the first
parameter.

Note: There are 1000 milliseconds in one second.

Example
3/24/2024 129
When the button is clicked in the example below, an alert box will be displayed after 5 seconds.
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!"
onClick="timedMsg()">
</form>
</body>
</html>

Example - Infinite Loop

To get a timer to work in an infinite loop, we must write a function that calls itself. In the
example below, when the button is clicked, the input field will start to count (for ever), starting at
0:

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!"
onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>
</html>

clearTimeout()
3/24/2024 130
S yn tax
clearTimeout(setTimeout_variable)

Example

The example below is the same as the "Infinite Loop" example above. The only difference is that
we have now added a "Stop Count!" button that stops the timer:

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function stopCount()
{
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!"
onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!"
onClick="stopCount()">
</form>
</body>
</html>

<html>

f u n ctio n timedMsg()

v a r t=setTimeout("alert('5 s e c o n d s ! ') ", 5 0 0 0 ) ; 3/24/2024 131

}

</script>

</head>

<body>

<form>

< i n p u t t y p e = "bu t t o n" v a l u e = " D i s p l a y timed alertbox!" onClick =

"time d Msg()">

</form>

< p > C l i c k o n t h e b u tto n a b o v e . An alert b o x will b e d i s p l a y e d af ter 5

seconds.</p>

</body>

</html>

<html>

f u n ctio n timedText()

v a r t1=setTimeout("document.getElementById('txt').value='2
s e c o n d s !' ", 2 0 0 0 ) ;

v a r t2=setTimeout("document.getElementById('txt').value='4
s e c o n d s !' ", 4 0 0 0 ) ;

v a r t3=setTimeout("document.getElementById('txt').value='6
s e c o n d s !' ", 6 0 0 0 ) ;

</script> 3/24/2024 132

</head>

<body>

<form>

< i n p u t t y p e = "b ut t o n " v a l u e = " D i s p l a y timed text!" onClick="timedText()">

< i n p u t typ e = "te x t" id = "tx t">

</form>

< p > C l i c k o n t h e b u tto n a b o v e . The in p u t f ie ld will tell y o u w h e n two , four,

and six seconds have p a s s e d .</p>

</body>

</html>

<html>

var c=0;

v a r t;

f u n ctio n timedCount()

{
document.getElementById('txt').value=c;

c=c+1;

t=setTimeout("timedCount()",1000);

</script>

</head>
3/24/2024 133
<body>

<form>

< i n p u t t y p e = "b u t t o n" v a l u e = "S t art co u n t!" onClick="timedCount()">

< i n p u t typ e = "te x t" id = "tx t">

</form>

< p > C l i c k o n t h e b u tto n a b o v e . The in p u t f ie ld will co u nt for ever, starting

at 0 .< /p >

</body>

</html>

<html>

var c=0;

v a r t;

f u n ctio n timedCount()

{
document.getElementById('txt').value=c;

c=c+1;

t=setTimeout("timedCount()",1000);

f u n ctio n stopCount()

{
3/24/2024 134
clearTimeout(t);
}

</script>

</head>

<body>

<form>

< i n p u t t y p e = "b u t t o n" v a l u e = "S t art co u n t!" onClick="timedCount()">

< i n p u t typ e = "te x t" id = "tx t">

< i n p u t t y p e = "b ut t o n " v a l u e = " S t o p co u nt!" onClick="stopCount()">

</form>

<p>

Click o n t h e "Start co u n t!" b u tto n a b o v e to start t h e timer. The in p u t field

will co u nt forever, startin g a t 0 . Click o n t h e "Stop co u nt!" b u tto n to stop
t h e co u n ting.

</p>

</body>

</html>

<html>

f u n ctio n startTime()

{
v a r t o d a y = n e w Date();

v a r h=today.getHours();

v a r m= to d ay.ge tMinute s(); 3/24/2024 135

v a r s = t o d a y. ge t S e co n ds ( ) ;
// a d d a zero in front o f n u m b e r s < 1 0

m=checkTime(m);

s= ch eckTime (s);

document.getElementById('txt').innerHTML=h+":"+m+":"+s;

t=setTimeout('startTime()',500);

f u n ctio n checkTime(i)

if ( i < 1 0 )

i = " 0 " + i;

return i;

</script>

</head>

< b o d y onload="startTime()">

< d i v id="txt"></div>

</body>

</html>

JavaScript Create Your Own Objects

3/24/2024 136
Objects are useful to organize information.

Examples
Create a direct instance of an object

Create a template for an object

JavaScript Objects
Earlier in this tutorial we have seen that JavaScript has several built-in objects, like String, Date,
Array, and more. In addition to these built-in objects, you can also create your own.

An object is just a special kind of data, with a collection of properties and methods.

Let's illustrate with an example: A person is an object. Properties are the values associated with
the object. The persons' properties include name, height, weight, age, skin tone, eye color, etc.
All persons have these properties, but the values of those properties will differ from person to
person. Objects also have methods. Methods are the actions that can be performed on objects.
The persons' methods could be eat(), sleep(), work(), play(), etc.

Properties

The syntax for accessing a property of an object is:

objName.propName

You can add properties to an object by simply giving it a value. Assume that the personObj
already exists - you can give it properties named firstname, lastname, age, and eyecolor as
follows:

personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=30;
personObj.eyecolor="blue";
document.write(personObj.firstname);

The code above will generate the following output: 3/24/2024 137
John

Me th o d s

An object can also contain methods.

You can call a method with the following syntax:

objName.methodName()

Note: Parameters required for the method can be passed between the parentheses.

To call a method called sleep() for the personObj:

personObj.sleep();

Creating Your Own Objects

There are different ways to create a new object:

1. Create a direct instance of an object

The following code creates an instance of an object and adds four properties to it:

personObj=new Object();
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";

Adding a method to the personObj is also simple. The following code adds a method called eat()
to the personObj:

personObj.eat=eat;

2. Create a template of an object

The template defines the structure of an object:

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname; 3/24/2024 138
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

Notice that the template is just a function. Inside the function you need to assign things to
this.propertyName. The reason for all the "this" stuff is that you're going to have more than one
person at a time (which person you're dealing with must be clear). That's what "this" is: the
instance of the object at hand.

Once you have the template, you can create new instances of the object, like this:

myFather=new person("John","Doe",50,"blue");
myMother=new person("Sally","Rally",48,"green");

You can also add some methods to the person object. This is also done inside the template:

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.newlastname=newlastname;
}

Note that methods are just functions attached to objects. Then we will have to write the
newlastname() function:

function newlastname(new_lastname)
{
this.lastname=new_lastname;
}

The newlastname() function defines the person's new last name and assigns that to the person.
JavaScript knows which person you're talking about by using "this.". So, now you can write:
myMother.newlastname("Doe").

<html>

<body>

< s c r i p t typ e = "te x t/javascript"> 3/24/2024 139

p e r s o n O b j = n e w Object();
personObj.firstname="John";

personObj.lastname="Doe";

p e r s o n Ob j. ag e = 5 0 ;

personObj.eyecolor="blue";

document.write(personObj.firstname + " i s " + p e rso n O b j.age + " y e a r s

old.");

</script>

</body>

</html>

<html>

<body>

< s c r i p t typ e = "te x t/javascript">

f u n ctio n p e rso n(f irstn ame ,lastname,age,eyecolor)

{
th is.firstn ame = f irstn ame ;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

m y F a t h e r = n e w person("John","Doe",50,"blue");

3/24/2024 140
document.write(myFather.firstname + " i s " + myFather.age + " y e a r s
old.");

</script>

</body>
</html>

Examples

<html>

<body>

< s c r i p t typ e = "te x t/javascript">

document.write("Hello World!");

</script>

</body>

</html>

<html>

<body>

< s c r i p t typ e = "te x t/javascript">

d o cu men t.write ("< h 1 > This i s a h e a d e r < / h 1 > " ) ;

</script>

</body>

</html>
3/24/2024 141
<html>
<head>

</head>

<body>

< s c r i p t typ e = "te x t/javascript">

document.write("This m e s s a g e i s written b y JavaScript");

</script>

</body>

</html>

<html>

f u n ctio n m e s s a g e ( )

alert("This alert b o x w a s calle d with th e o n lo ad event");

</script>

</head>

< b o d y o n l o a d = " me s s a g e ( ) " >

</body>

</html> 3/24/2024 142

<html>

<head>

</head>

<body>

< s c r i p t src= "x x x .js">

</script>

<p>

The actu al script i s in a n external script file calle d "xxx.js".

</p>

</body>

</html>

<html>

<body>

< s c r i p t typ e = "te x t/javascript">

d o cu men t.write ("< h 1 > This i s a h e a d e r < / h 1 > " ) ;

d o cu me n t.write ("< p > This i s a p a r a g r a p h < / p > " ) ;

d o cu me n t.write ("< p > This i s an o th er p a r a g r a p h < / p > " ) ;

</script>

</body> 3/24/2024 143

</html>

<html>

<body>

< s c r i p t typ e = "te x t/javascript">

{
d o cu men t.write ("< h 1 > This i s a h e a d e r < / h 1 > " ) ;

d o cu me n t.write ("< p > This i s a p a r a g r a p h < / p > " ) ;

d o cu me n t.write ("< p > This i s an o th er p a r a g r a p h < / p > " ) ;

</script>

</body>

</html>

<html>

<body>

< s c r i p t typ e = "te x t/javascript">

// This will write a h e ad e r:

d o cu men t.write ("< h 1 > This i s a h e a d e r < / h 1 > " ) ;

// This will write two p a r a g r a p h s :

d o cu me n t.write ("< p > This i s a p a r a g r a p h < / p > " ) ;

d o cu me n t.write ("< p > This i s an o th er p a r a g r a p h < / p > " ) ;

</script>

3/24/2024 144
</body>

</html>

<html>

<body>

< s c r i p t typ e = "te x t/javascript">

The c o d e b e l o w will write

o n e h e a d e r a n d two p a r a g r a p h s

*/
d o cu men t.write ("< h 1 > This i s a h e a d e r < / h 1 > " ) ;

d o cu me n t.write ("< p > This i s a p a r a g r a p h < / p > " ) ;

d o cu me n t.write ("< p > This i s an o th er p a r a g r a p h < / p > " ) ;

</script>

</body>

</html>

<html>

<body>

< s c r i p t typ e = "te x t/javascript">

d o cu men t.write ("< h 1 > This i s a h e a d e r < / h 1 > " ) ;

d o cu me n t.write ("< p > This i s a p a r a g r a p h < / p > " ) ;

//d o cu men t.write ("< p > Th is i s an o ther p a r a g r a p h < / p > ") ; 3/24/2024 145
</script>

</body>

</html>

<html>

<body>

< s c r i p t typ e = "te x t/javascript">

/*
d o cu men t.write ("< h 1 > This i s a h e a d e r < / h 1 > " ) ;

d o cu me n t.write ("< p > This i s a p a r a g r a p h < / p > " ) ;

d o cu me n t.write ("< p > This i s an o th er p a r a g r a p h < / p > " ) ;

</script>

</body>

</html>

<html>

<body>

< s c r i p t typ e = "te x t/javascript">

v a r firstname;

firstn ame ="He ge ";

document.write(firstname);
3/24/2024 146
d o cume nt.write ("<br /> ");
firstname="Tove";

document.write(firstname);

</script>

< p > T h e script a b o v e d e c l are s a variable,

a s s i g n s a v a l u e to it, d i s p l a y s t h e v a l u e , c h a n g e t h e v a l u e ,

a n d d i s p l a y s th e v a l u e a g a i n . < / p >

</body>

</html>

HTML DOM - Events

Events are actions that can be detected by JavaScript.

Events
By using JavaScript, we have the ability to create dynamic web pages. Events are actions that
can be detected by JavaScript.

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 3/24/2024 147
• 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!

For a complete reference of the events supported by the HTML DOM, see our HTML DOM
Event reference.

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.

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()">

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:

HTML 4.0 EVENT ATTRIBUTES

New to HTML 4.0 is the ability to let HTML events trigger actions in the browser, like starting a
JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be
inserted into HTML tags to define event actions.

If you want to learn more about programming with these events, you should study our JavaScript
tutorial and our DHTML tutorial.

Window Events
Only valid in body and frameset elements.

Attribute Value Description

onload script Script to be run when a document loads
onunload script Script to be run when a document unloads

Form Element Events

Only valid in form elements.

Attribute Value Description

onchange script Script to be run when the element changes
onsubmit script Script to be run when the form is submitted
onreset script Script to be run when the form is reset
onselect script Script to be run when the element is selected
onblur script Script to be run when the element loses focus
onfocus script Script to be run when the element gets focus
3/24/2024 149
Keyboard Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and
title elements.

Attribute Value Description

onkeydown script What to do when key is pressed
onkeypress script What to do when key is pressed and released
onkeyup script What to do when key is released

Mouse Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title
elements.

Attribute Value Description

onclick script What to do on a mouse click
ondblclick script What to do on a mouse double-click
onmousedown script What to do when mouse button is pressed
onmousemove script What to do when mouse pointer moves
onmouseout script What to do when mouse pointer moves out of an element
onmouseover script What to do when mouse pointer moves over an element
onmouseup script What to do when mouse button is released

HTML DOM Window Object

Window Object
The Window object is the top level object in the JavaScript hierarchy.

The Window object represents a browser window.

A Window object is created automatically with every instance of a <body> or <frameset> tag.

IE: Internet Explorer, F: Firefox, O: Opera. 3/24/2024 150

Window Object Collections
Collection Description IE F O

frames[ ] Returns all n a m e d f r a m e s in t h e window 4 1 9

Window Object Properties

Property Description IE F O

closed Returns whether or not a window h a s b e e n closed 4 1 9

default St at us S e t s or returns t he d e f a u l t text in t h e s t a t u s b a r of t h e 4 No 9

window

do cument S e e Do cument object 4 1 9

history S e e History object 4 1 9

lengt h S e t s or returns t he n u m b e r of f r a m e s in t h e window 4 1 9

location S e e Location object 4 1 9

name S e t s or returns t he n a m e of t h e window 4 1 9

opener Returns a reference to t h e window t hat creat ed the 4 1 9

window

outerHeight S e t s or returns t he outer h e i g h t of a window No 1 No

outerWidth S e t s or returns t he outer width of a window No 1 No

pageXOffset S e t s or returns t he X position of t h e current p a g e in No No No

relation to t h e u p p e r left corner of a window's d i s p l a y
area

pageYOffset S e t s or returns t he Y position of t h e current p a g e in No No No

relation to t h e u p p e r left corner of a window's d i s p l a y
area

parent Returns t he parent window 4 1 9

personalbar S e t s whet her or not t h e browser's perso nal b a r (or

directories bar) sho uld b e visible

scrollbars S e t s whet her or not t h e scrollbars sho uld b e visible

3/24/2024 151
self Returns a reference to t h e current window 4 1 9

st at us S e t s t h e text in t h e s t a t u s b a r of a window 4 No 9

st at usbar S e t s whet her or not t h e browser's s t a t u s b a r sho uld b e

visible

toolbar S e t s whether or not th e browser's tool b a r is visible or

not ( c a n only b e set before t h e window is o p e n e d a n d
y o u m u s t h a v e UniversalBrowserWrite privilege)

top Returns t he t o pmost ancest o r window 4 1 9

Window Object Me th o d s
Method Description IE F O

alert() D i s p l a y s a n alert box with a m e s s a g e a n d a n OK 4 1 9

button

blur() R e m o v e s fo cus from t he current window 4 1 9

clearInterval() Cancels a timeout s e t with setInterval() 4 1 9

clearTimeout() Cancels a timeout s e t with setTimeout() 4 1 9

close() Closes t h e current window 4 1 9

confirm() D i s p l a y s a d i a l o g box with a m e s s a g e a n d a n OK a n d a 4 1 9

Cancel button

createPopup() Creates a pop-u p window 4 No No

focus() S e t s fo cus to t h e current window 4 1 9

mo veB y( ) M o v e s a window relative to its current position 4 1 9

moveTo() M o v e s a window to t h e specified position 4 1 9

open() Opens a n e w browser window 4 1 9

print() Prints t he co nt ent s of t h e current window 5 1 9

prompt() D i s p l a y s a d i a l o g box t hat pro mpt s t h e user for input 4 1 9

resizeBy() R esizes a window b y t h e s p e c i f ie d pixels 4 1 9

3/24/2024 152
resizeTo() R esizes a window to t he s p e c i f ied width a n d h e i g h t 4 1.5 9

scrollBy() Scrolls t h e content b y t h e s p e c i f i e d n u m b e r of pixels 4 1 9

scrollTo() Scrolls t h e content to t he s p e c i f i ed coordinates 4 1 9

setInterval() E v a l u a t e s a n expressio n a t s p e c i f ie d intervals 4 1 9

setTimeout() E v a l u a t e s a n expressio n after a specified n u m b e r of

milliseconds

HTML DOM DOCUMENT

OBJECT
Document Object
The Document object represents the entire HTML document and can be used to access all
elements in a page.

The Document object is part of the Window object and is accessed through the
window.document property.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet
Standard).

Document Object Collections

Collection Description IE F O W3C

anchors[] Returns a reference to all Anchor objects 4 1 9 Yes

in t h e do cument

forms[] Returns a reference to all Form objects in 4 1 9 Yes

t he d o c u m e nt

images[] Returns a reference to all I m a g e objects 4 1 9 Yes

in t h e do cument

links[] Returns a reference to all Area a n d Link 4 1 9 Yes

objects in t h e do cument 3/24/2024 153
Document Object Properties
Property Description IE F O W3C

body Gives direct a c c e s s to t he < b o d y >

e l e m ent

cookie S e t s or returns all cookies a s s o c i a t e d with 4 1 9 Yes

t he current d o c u m e nt

domain Returns t h e d o m a i n n a m e for t h e current 4 1 9 Yes

do cument

lastModified Returns t h e d a t e a n d t i m e a do cument 4 1 No No

w a s l a s t modified

referrer Returns t h e URL of t h e d o c u m e n t that 4 1 9 Yes

l o a d e d t h e current do cument

title Returns t h e title of t h e current do cument 4 1 9 Yes

URL Returns t h e URL of t h e current do cument 4 1 9 Yes

Document Object Me th o d s
Method Description IE F O W3C

close() Closes a n output s t r e a m o p e n e d with 4 1 9 Yes

t he do cument .o pen( ) m e t h o d , a n d
d i s p l a y s t he collected d a t a

get Element B yId( ) Returns a reference to t he first object 5 1 9 Yes

with t h e s p e c i f i ed id

g e t E l emen t sB y N a me( ) Returns a collection of objects with the 5 1 9 Yes

specified n a m e

get ElementsB yTagName() Returns a collection of objects with the 5 1 9 Yes

specified t a g n a m e

open() Opens a s t r e a m to collect t he output 4 1 9 Yes

from a n y document.write() or
document.writeln() m e t h o ds

write() Writes HTML expressio ns or JavaScript 4 1 9 Yes

co de to a do cument
3/24/2024 154
writeln() Ident ical to t h e write() m e t h o d , with the 4 1 9 Yes
addition of writing a n e w line character
after e a c h expression

Your browser d o e s not support inline f r a m e s or is currently co nfigured not to d i s p l a y

inline f r a m e s .

HTML DOM STYLE OBJECT

Style object
The Style object represents an individual style statement. The Style object can be accessed from
the document or from the elements to which that style is applied.

Syntax for using the Style object properties:

document.getElementById("id").style.property="value"

IE: Internet Explorer, M: Mac IE only, W: Windows IE only, F: Firefox, O: Opera, W3C:
World Wide Web Consortium (Internet Standard).

Back gro u n d properties

Property Description IE F O W3C

backgro und S e t s all b a c k g r o u n d properties in one 4 1 9 Yes

backgro undAt t achment S e t s whether a b a c k g r o u n d - i m a g e i s fixed 4 1 9 Yes

3/24/2024 155
or scrolls with t h e p a g e

backgroundColor S e t s t he backgro und- color of a n e l e m e n t 4 1 9 Yes

backgroundImage S e t s t he b a c k g r o u n d - i m a g e of a n e l e m e n t 4 1 9 Yes

backgroundPosition S e t s t he st art ing position of a 4 No No Yes

background-image

backgroundPositionX S e t s t he x-coordinates of the 4 No No No

backgroundPo sition property

backgroundPositionY S e t s t he y- coordinates of the 4 No No No

backgroundPo sition property

backgro undR epeat S e t s if/how a b a c k g r o u n d - i m a g e will b e 4 1 9 Yes

repeat ed

Border a n d M a r g i n properties
Property Description IE F O W3C

border S e t s all properties for t h e four borders in 4 1 9 Yes

one

borderBottom S e t s all properties for t h e bottom border 4 1 9 Yes

in one

borderBottomColor S e t s t he color of t h e bottom border 4 1 9 Yes

borderBottomStyle S e t s t he st yle of t h e bottom border 4 1 9 Yes

borderBottomWidth S e t s t he width of t h e bottom border 4 1 9 Yes

borderColor S e t s t he color of all four borders ( can 4 1 9 Yes

h a v e u p to four colors)

borderLeft S e t s all properties for t h e left border in 4 1 9 Yes

one

borderLeftColor S e t s t he color of t h e left border 4 1 9 Yes

borderLeftStyle S e t s t he st yle of t h e left border 4 1 9 Yes

borderLeftWidth S e t s t he width of t h e left border 4 1 9 Yes

3/24/2024 156
borderRight S e t s all properties for t h e right border in 4 1 9 Yes
one

borderRightColor S e t s t he color of t h e right border 4 1 9 Yes

borderRightStyle S e t s t he st yle of t h e right border 4 1 9 Yes

borderRightWidth S e t s t he width of t h e right border 4 1 9 Yes

borderStyle S e t s t he st yle of all four borders ( can 4 1 9 Yes

h a v e u p to four styles)

borderTop S e t s all properties for t h e top border in 4 1 9 Yes

one

borderTopColor S e t s t he color of t h e top border 4 1 9 Yes

borderTopStyle S e t s t he st yle of t h e top border 4 1 9 Yes

borderTopWidth S e t s t he width of t h e top border 4 1 9 Yes

borderWidth S e t s t he width of all four borders ( can 4 1 9 Yes

h a v e u p to four widths)

margin S e t s t he m a r g i n s of a n e l e m e n t ( c a n h a v e 4 1 9 Yes
u p to four v a l u e s )

marginBot t o m S e t s t he bottom m a r g i n of a n e l e m e n t 4 1 9 Yes

marginLeft S e t s t he left m a r g i n of a n e l e m e n t 4 1 9 Yes

m a r g i n R ig ht S e t s t he right m a r g i n of a n e l e m e n t 4 1 9 Yes

marginTop S e t s t he top m a r g i n of a n e l e m e n t 4 1 9 Yes

outline S e t s all outline properties in one 5M 1 9 Yes

outlineColor S e t s t he color of t h e outline aro und a n 5M 1 9 Yes

e l e m ent

outlineStyle S e t s t he st yle of t h e outline aro und a n 5M 1 9 Yes

e l e m ent

outlineWidth S e t s t he width of t h e outline aro und a n 5M 1 9 Yes

e l e m ent
3/24/2024 157
padding S e t s t he p a d d i n g of a n e l e m e n t ( c a n h a v e 4 1 9 Yes
u p to four v a l u e s )

paddingBot t o m S e t s t he bottom p a d d i n g of a n e l e m e n t 4 1 9 Yes

paddingLeft S e t s t he left p a d d i n g of a n e l e m e n t 4 1 9 Yes

paddingRight S e t s t he right p a d d i n g of a n e l e m e n t 4 1 9 Yes

paddingTop S e t s t he top p a d d i n g of a n e l e m e n t 4 1 9 Yes

Layout properties
Property Description IE F O W3C

clear S e t s on which s i d e s of a n e l e m e n t other 4 1 9 Yes

flo at ing e l e m e n t s are not allowed

clip S e t s t he s h a p e of a n e l e m e nt 4 1 9 Yes

content S e t s m e t a - information 5M 1 Yes

counterIncrement S e t s a list of counter n a m e s , followed b y 5M 1 Yes

a n integer. The int eger i n d i c a t e s b y how
m u c h t h e counter is i n c r e m ent e d for
e v e r y occurrence of t h e e l e m e n t . The
d e f a u lt is 1

counterReset S e t s a list of counter n a m e s , followed b y 5M 1 Yes

a n integer. The int eger g i v e s t he v a l u e
t hat t h e counter is s e t to on e a c h
occurrence of t h e e l e m e n t . The d e f a u l t is
0

cssFloat S e t s where a n i m a g e or a text will a p p e a r 5 M 1 9 Yes

(float) in ano t her e l e m e nt

cursor S e t s t he t y p e of cursor to b e d i s p l a y e d 4 1 9 Yes

direction S e t s t he text direction of a n e l e m e n t 5 1 9 Yes

display S e t s how a n e l e m e n t will b e d i s p l a y e d 4 1 9 Yes

height S e t s t he h e i g h t of a n e l e m e n t 4 1 9 Yes

markerOffset S e t s t he d i s t a n c e b e t w e e n t h e nearest Yes

5 M 1 3/24/2024 158
border e d g e s of a marker box a n d its
principal box

marks S e t s whether cross m a r k s or crop m a r k s 5M 1 Yes

sho uld b e rendered just outside t h e p a g e
box e d g e

m a x H e ig h t S e t s t he m a x i m u m h e i g h t of a n e l e m e n t 5M 1 9 Yes

maxWidth S e t s t he m a x i m u m width of a n e l e m e n t 5M 1 9 Yes

minHeight S e t s t he m i n i m u m h e i g h t of a n e l e m ent 5M 1 9 Yes

minWidth S e t s t he m i n i m u m width of a n e l e m e n t 5M 1 9 Yes

overflow S p e c i f i e s w h a t to do with content that 4 1 9 Yes

d o e s not fit in a n e l e m e n t box

verticalAlign S e t s t he vertical a l i g n m e n t of content in 4 1 No Yes

a n e l e m ent

visibility S e t s whether or not a n e l e m e n t sho uld b e 4 1 9 Yes

visible

width S e t s t he width of a n e l e m e n t 4 1 9 Yes

List properties
Property Description IE F O W3C

listStyle S e t s all t h e properties for a list in one 4 1 9 Yes

list St yleImage S e t s a n i m a g e a s t h e list-i t e m marker 4 1 No Yes

listStylePosition Positions t he list-i t e m marker 4 1 9 Yes

listStyleType S e t s t he list-i t e m marker type 4 1 9 Yes

M i s c properties
Property Description IE F O W3C

cssText 4 1

Po sitio n in g properties
3/24/2024 159
Property Description IE F O W3C
bottom S e t s how far t h e bottom e d g e of a n 5 1 9 Yes
e l e m e n t is a b o v e / b el o w t h e bottom e d g e
of t h e parent e l e m e n t

left S e t s how far t he left e d g e of a n e l em e nt 4 1 9 Yes

is to t he right/left of t h e left e d g e of the
parent e l e m e n t

position P l a c e s a n e l e m e n t in a st at ic, relative, 4 1 9 Yes

a b s o l u t e or fixed position

right S e t s how far t h e right e d g e of a n e l e m e n t 5 1 9 Yes

is to t h e left/right of t h e right e d g e of the
parent e l e m e n t

top S e t s how far t h e top e d g e of a n e l e m e n t 4 1 9 Yes

is a b o v e / b elo w t he top e d g e of t he parent
e l e m ent

zIndex S e t s t he s t a c k order of a n e l e m e n t 4 1 9 Yes

Printing properties
Property Description IE F O W3C

o rphans S e t s t he m i n i m u m n u m b e r of lines for a 5M 1 9 Yes

p a r a g r a p h t hat m u s t b e left a t t h e bottom
of a p a g e

page S e t s a p a g e t y p e to u s e w h e n d i s p l a y i n g 5M 1 9 Yes
a n e l e m ent

pageBreakAfter S e t s t he p a g e - b r e a k i n g b e h a v i o r after a n 4 1 9 Yes

e l e m ent

pageBreakB efo re S e t s t he p a g e - b r e a k i n g b e h a v i o r before 4 1 9 Yes

a n e l e m ent

p a g e B r e a k In s ide S e t s t he p a g e - b r e a k i n g b e h a v i o r i n s i d e a n 5M 1 9 Yes
e l e m ent

size S e t s t he orientation a n d s i z e of a p a g e 1 9 Yes

3/24/2024 160
widows S e t s t he m i n i m u m n u m b e r of lines for a 5M 1 9 Yes
p a r a g r a p h t hat m u s t b e left a t t h e top of
a page

Scrollbar p ro pe rties (IE-only)

Property Description IE F O W3C

scrollbar3dLightColor S e t s t he color of t h e left a n d top s i d e s of 5W No No No

t he arrows a n d scroll boxes

scrollbarArrowColor S e t s t he color of t h e arrows on a scroll b a r 5W No No No

scrollbarBaseColor S e t s t he b a s e color of t h e scroll bar 5W No No No

scrollbarDarkShadowCol S e t s t he color of t h e right a n d bottom 5W No No No

or s i d e s of t h e arrows a n d scroll boxes

scrollbarFaceColor S e t s t he front color of t h e scroll bar 5W No No No

scrollbarHighlightColor S e t s t he color of t h e left a n d top s i d e s of 5W No No No

t he arrows a n d scroll bo xes, a n d the
b a c k g r o u n d of a scroll bar

scrollbarShadowColor S e t s t he color of t h e right a n d bottom 5W No No No

s i d e s of t h e arrows a n d scroll boxes

scrollbarTrackColor S e t s t he b a c k g r o u n d color of a scroll bar 5W No No No

Table properties
Property Description IE F O W3C

borderCollapse S e t s whether t h e t a b l e border are 5 1 9 Yes

c o l l a p s e d into a s i n g l e border or d e t a c h e d
a s in s t a n d a r d HTML

bo rderSpacing S e t s t he d i s t a n c e t hat s e p a r a t e s cell 5M 1 9 Yes

borders

capt io nSide S e t s t he position of t h e t a b l e caption 5M No No Yes

emptyCells S e t s whether or not to sho w e m p t y cells 5M 1 9 Yes

in a t able

t ableLayo ut S e t s t he algo rit hm u s e d to d i s p l a y the 5 No No Yes

3/24/2024 161
t a b l e cells, rows, a n d co lumns

Text properties
Property Description IE F O W3C

color S e t s t he color of t h e text 4 1 9 Yes

font S e t s all font properties in one 4 1 9 Yes

fontFamily S e t s t he font of a n e l e m e nt 4 1 9 Yes

fontSize S e t s t he font-size of a n e l e m e nt 4 1 9 Yes

fontSizeAdjust S e t s / a d j u s t s t h e s i z e of a text 5M 1 No Yes

fontStretch S e t s how to c o n d e n s e or stretch a font 5 M No No Yes

fontStyle S e t s t he font-style of a n e l e m e n t 4 1 9 Yes

fontVariant Displays text in a s m a l l - c a p s font 4 1 9 Yes

fontWeight S e t s t he b o l d n e s s of t h e font 4 1 9 Yes

let t erSpacing S e t s t he s p a c e b e t w e e n charact ers 4 1 9 Yes

lineHeight S e t s t he d i s t a n c e b e t w e e n lines 4 1 9 Yes

quotes S e t s which quotation m a r k s to u s e in a 5M 1 Yes

text

textAlign Aligns t h e text 4 1 9 Yes

textDecoration S e t s t he decoration of a text 4 1 9 Yes

textIndent Indent s t he first line of text 4 1 9 Yes

t ext Shado w S e t s t he s h a d o w effect of a text 5M 1 Yes

textTransform S e t s capit alizat io n e f f e c t on a text 4 1 9 Yes

unicodeBidi 5 1 Yes

w h i t e Spa c e S e t s how to h a n d l e line-b r e a k s a n d white- 4 1 9 Yes

s p a c e in a text

wo rdSpacing S e t s t he s p a c e b e t w e e n words in a text 6 1 3/24/2024

9 Yes 162
S t a n d a rd Properties
Property Description IE F O W3C

dir S e t s or returns t h e direction of text 5 1 9 Yes

lang S e t s or returns t h e l a n g u a g e co de for a n 5 1 9 Yes

e l e m ent

title S e t s or returns a n e l e m e n t ' s a d v i s o r y title 5 1 9 Yes

HTML DOM HIDDEN OBJECT

Hidden Object
The Hidden object represents a hidden input field in an HTML form.

For each instance of an <input type="hidden"> tag in an HTML form, a Hidden object is created.

You can access a hidden input field by searching through the elements[] array of the form, or by
using document.getElementById().

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet
Standard).

Hidden Object Properties

Property Description IE F O W3C

alt S e t s or returns a n alt ernat e text to d i s p l a y if a 5 1 9 Yes

browser d o e s not support h i d d e n fields

form Returns a reference to t he form t hat c o n t a i ns the 4 1 9 Yes

h i d d e n field

id S e t s or returns t h e id of a h i d d e n field 4 1 9 Yes

name S e t s or returns t h e n a m e of a h i d d e n field 4 1 9 Yes

3/24/2024 163
type Returns t h e t y p e of form e l e m e n t a h i d d e n input 4 1 9 Yes
field is

value S e t s or returns t h e v a l u e of t h e v a l u e attribute of 4 1 9 Yes

t he h i d d e n field

S t a n d a rd Properties
Property Description IE F O W3C

className S e t s or returns t h e c l a s s attribute of a n e l e m e n t 5 1 9 Yes

dir S e t s or returns t h e direction of text 5 1 9 Yes

lang S e t s or returns t h e l a n g u a g e co de for a n e l e m ent 5 1 9 Yes

title S e t s or returns a n e l e m e n t ' s a d v i s o r y title 5 1 9 Yes

Your browser d o e s not support inline f r a m e s or is currently co nfigured not to d i s p l a y

inline f r a m e s .

HTML DOM TableCell Object

TableCell Object
The TableCell object represents an HTML table cell.

For each instance of a <td> tag in an HTML document, a TableCell object is created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet
Standard).

TableCell Object Properties

Property Description IE F O W3C

abbr S e t s or returns a n a b b r e v i a t e d versio n of the 6 1 9 Yes

content in a t a b l e cell

align S e t s or returns t h e horizontal a l i g n m e n t of d a t a 4 1 9 Yes

3/24/2024 164
within a t a b l e cell

axis S e t s or returns a c o m m a - delimit ed list of related 6 1 9 Yes

t a b l e cells

cellIndex Returns t h e position of a cell i n t h e cells collection 4 1 9 Yes

of a row

ch S e t s or returns t h e a l i g n m e n t charact er for a t able Yes

cell

chOff S e t s or returns t h e offset of a l i g n m e n t character Yes

for a t a b l e cell

colSpan S e t s or returns t h e n u m b e r of c o l u m n s a t a b l e cell 4 1 9 Yes

sho uld s p a n

headers S e t s or returns a list of s p a c e - s e p a r a t e d header- Yes

cell ids

id S e t s or returns t h e id of a t a b l e cell 4 1 9 Yes

innerHTML S e t s or returns t h e HTML b e t w e e n t h e start a n d 4 1 9 No

e n d t a g s of a t a b l e cell

ro wSpan S e t s or returns t h e n u m b e r of rows a t a b l e cell 4 1 9 Yes

sho uld s p a n

sco pe S e t s or returns if this cell provides h e a d e r Yes

information

vAlign S e t s or returns t h e vertical a l i g n m e n t of d a t a 4 1 9 Yes

within a t a b l e cell

width S e t s or returns t h e width of a t a b l e cell 4 1 9 Yes

S t a n d a rd Properties
Property Description IE F O W3C

className S e t s or returns t h e c l a s s attribute of a n e l e m e n t 5 1 9 Yes

dir S e t s or returns t h e direction of text 5 1 9 Yes

lang S e t s or returns t h e l a n g u a g e co de for a n e l e m ent 5 1 9 Yes

3/24/2024 165
title S e t s or returns a n e l e m e n t ' s a d v i s o r y title 5 1 9 Yes

Your browser d o e s not support inline f r a m e s or is currently co nfigured not to d i s p l a y

inline f r a m e s .

HTML DOM TABLEROW OBJECT

TableRow Object
The TableRow object represents an HTML table row.

For each instance of a <tr> tag in an HTML document, a TableRow object is created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet
Standard).

TableRow Object Collections

Collection Description IE F O W3C

cells[] Returns a n array c o n t a i n i n g e a c h cell in the 4 1 9 Yes

t a b l e row

TableRow Object Properties

Property Description IE F O W3C

align S e t s or returns t he horizontal a l i g n m e n t of 4 1 9 Yes

d a t a within a t a b l e row

ch S e t s or returns t he a l i g n m e n t charact er for Yes

cells in a t a b l e row

chOff S e t s or returns t he offset of a l i g n m e n t Yes

charact er for t he cells in a t a b l e row

id S e t s or returns t he id of a t a b l e row 4 1 9 Yes

innerHTML S e t s or returns t he HTML b e t w e e n t h e start 5 1 9 No

a n d e n d t a g s of a t a b l e row 3/24/2024 166
rowIndex Returns t he position of a row in t h e t able's 4 1 9 Yes
rows collection

sectionRowIndex Returns t he position of a row in t h e tBody, Yes

t Head, or tFoot rows collection

vAlign S e t s or returns t he vertically a l i g n m e n t of 4 1 9 Yes

d a t a within a t a b l e row

TableRow Object Me th o d s
Method Description IE F O W3C

deleteCell() Deletes a cell i n a t a b l e row 4 1 9 Yes

insertCell() Inserts a cell in a t a b l e row 4 1 9 Yes

Your browser d o e s not support inline f r a m e s or is currently co nfigured not to d i s p l a y

inline f r a m e s .

HTML DOM Event Object

The event object gives you information about an event that has occurred.

Examples
Which mouse button was clicked?

What are the coordinates of the cursor?

What is the unicode of the key pressed?

What are the coordinates of the cursor, relative to the screen?

What are the coordinates of the cursor? 3/24/2024 167

Was the shift key pressed?
Which element was clicked?

Which eventype occured?

Event Object
The Event object represents the state of an event, such as the element in which the event
occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse
buttons.

Events are normally used in combination with functions, and the function will not be executed
before the event occurs!

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet
Standard).

Event Handlers
New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like starting
a JavaScript when a user clicks on an HTML element. Below is a list of the attributes that can be
inserted into HTML tags to define event actions.

Attribute The e v e n t o ccu rs w h e n . .. IE F O W3C

onabort L o a d i n g of a n i m a g e is interrupted 4 1 9 Yes

onblur An e l e m e n t lo ses focus 3 1 9 Yes

onchange The content of a field c h a n g e s 3 1 9 Yes

onclick Mo use clicks a n object 3 1 9 Yes

ondblclick Mo use do uble-clicks a n object 4 1 9 Yes

onerror An error occurs w h e n l o a d i n g a do cument 4 1 9 Yes

or a n i m a g e

onfocus An e l e m e n t g e t s fo cus 3 1 9 Yes

onkeydown A keybo ard k e y is pressed 3 1 No Yes

3/24/2024 168
onkeypress A keybo ard k e y is p r e s s e d or h e l d down 3 1 9 Yes

o nkeyup A keybo ard k e y is released 3 1 9 Yes

onload A p a g e or a n i m a g e is f i n i s h ed l o a d i n g 3 1 9 Yes

onmousedown A m o u s e button is pressed 4 1 9 Yes

onmousemove The m o u s e is m o v e d 3 1 9 Yes

onmouseout The m o u s e is m o v e d off a n e l e m e nt 4 1 9 Yes

onmouseover The m o u s e is m o v e d over a n e l e m e n t 3 1 9 Yes

o n m o u s eu p A m o u s e button is released 4 1 9 Yes

onreset The reset button is clicked 4 1 9 Yes

onresize A window or f r a m e is resized 4 1 9 Yes

onselect Text is select ed 3 1 9 Yes

o nsubmit The s u b m i t button is clicked 3 1 9 Yes

o nunlo ad The user exits t h e p a g e 3 1 9 Yes

M o u s e / Ke yb o ard Attributes
Property Description IE F O W3C

altKey Returns whet her or not t h e "ALT" k e y w a s 6 1 9 Yes

p r e s s e d w h e n a n e v e n t w a s triggered

button Returns which m o u s e button w a s clicked 6 1 9 Yes

w h e n a n e v e n t w a s triggered

clientX Returns t h e horizontal coordinate of the 6 1 9 Yes

m o u s e pointer w h e n a n e v e n t w a s
triggered

clientY Returns t h e vertical coordinate of the 6 1 9 Yes

m o u s e pointer w h e n a n e v e n t w a s
triggered
3/24/2024 169
ctrlKey Returns whet her or not t h e "CTRL" key 6 1 9 Yes
w a s p r e s s e d w h e n a n e v e n t w a s triggered

met aKey Returns whet her or not t h e " m e t a " key 6 1 9 Yes
w a s p r e s s e d w h e n a n e v e n t w a s triggered

relatedTarget Returns t h e e l e m e n t related to the No 1 9 Yes

e l e m e n t t hat t riggered t h e e v e n t

screenX Returns t h e horizontal coordinate of the 6 1 9 Yes

m o u s e pointer w h e n a n e v e n t w a s
triggered

screenY Returns t h e vertical coordinate of the 6 1 9 Yes

m o u s e pointer w h e n a n e v e n t w a s
triggered

shiftKey Returns whet her or not t h e "SHIFT" key 6 1 9 Yes

w a s p r e s s e d w h e n a n e v e n t w a s triggered

Other Eve n t Attributes

Property Description IE F O W3C

b u b b l es Returns a Boolean v a l u e t hat indicat es No 1 9 Yes

whether or not a n e v e n t is a b u b b l ing
event

cancelable Returns a Boolean v a l u e t hat indicat es No 1 9 Yes

whether or not a n e v e n t c a n h a v e its
d e f a u lt act io n prevent ed

currentTarget Returns t h e e l e m e n t w h o s e e v e n t No 1 9 Yes

listeners t riggered t h e e v e n t

eventPhase Returns which p h a s e of t h e e v e n t flow is Yes

currently b e i n g e v a l u a t e d

target Returns t h e e l e m e n t t h a t t riggered the No 1 9 Yes

event

timeStamp Returns t h e t i m e s t a m p , in milliseconds, No 1 9 Yes

from t he e p o c h ( s y s t e m start or event
trigger)

type Returns t h e n a m e of t h e e v e n t 6 1 9 Ye
3/24/2024 170
<html>

f u n ctio n whichButton(event)

if ( e v e n t . b u t t o n = = 2 )

alert("You clicked t h e right m o u s e b u tto n!");

e lse

alert("You clicked t h e le f t m o u s e b u tto n!");

</script>

</head>

< b o d y o n mo use d o wn= "whichButto n (e ve n t)">

< p > C l i c k in t h e d o cu me n t. An alert b o x will alert w h i ch m o u s e b u tto n you

clicked.</p>

</body>

</html>

f u n ctio n show_coords(event)

{
x=event.clientX;

y=event.clientY;

alert("X co o rd s: " + x + ", Y co o rd s: " + y);

</script>

</head>

< b o d y o n mo use d o wn= "sh ow_coo rds(e ve n t)">

< p > C l i c k in t h e d o cu me n t. An alert b o x will alert t h e x a n d y coordinates

o f t h e m o u s e p o inte r.</p>

</body>

</html>

<html>

f u n ctio n whichButton(event)

alert(event.keyCode);

3/24/2024 172
</script>
</head>

< b o d y o n k e yup="whichButton(e ve nt)">

< p > < b > N o t e : < / b > M a k e s u r e th e right f rame h a s f o c u s w h e n tryin g this
example!</p>

< p > P r e s s a k e y o n yo u r k e yb o ard . An alert b o x will alert th e u n ico d e of

the key pressed.</p>

</body>

</html>

<html>

<head>

< s c r i p t typ e = "te x t/javascript">

f u n ctio n coordinates(event)

{
x= even t.scre e n X ;

y= even t.scre e n Y;

alert("X=" + x + " Y= " + y);

</script>

</head>

< b o d y o n mo use d o wn= "coordin ates(even t)">

<p>

3/24/2024 173
Click s o m e w h e r e in t h e d o cu me n t. An alert b o x will alert th e x a n d y
co o rdinate s o f th e cursor, relative to th e scre e n .

</p>

</body>

</html>

<html>

<head>

< s c r i p t typ e = "te x t/javascript">

f u n ctio n coordinates(event)

{
x=event.x;

y=event.y;

alert("X=" + x + " Y= " + y);

</script>

</head>

< b o d y o n mo use d o wn= "coordin ates(even t)">

<p>

Click s o m e w h e r e in t h e d o cu me n t. An alert b o x will alert th e x a n d y

co o rdinate s o f th e cursor.

</p>

3/24/2024 174
</body>

</html>

<html>

f u n ctio n isKe yPre sse d (e ve nt)

if ( e v e n t . s h i f t K e y = = 1 )

alert("The s h i f t k e y w a s p r e s s e d !" );

e lse

alert("The s h i f t k e y w a s NOT p r e s s e d ! ") ;

</script>

</head>

< b o d y o n mo us e d o wn = "is K e y P res s e d (e ve n t )">

< p > C l i c k s o m e w h e r e in t h e d o cu me n t. An alert b o x will tell y o u if you

p r e s s e d th e s h i f t k e y or n o t . < / p >

</body>
3/24/2024 175
</html>
<html>

f u n ctio n whichElement(e)

{
v a r targ;

if (!e)

var e=window.event;

if (e.target)

t a r g = e. t arg e t ;

e l s e if (e.srcElement)

targ= e .srcElement;

if ( t a r g . n o d e T y p e = = 3 ) // d e f e a t S af ari b u g

targ = targ.parentNode;

}
v a r tn ame ;

t n a m e= t a rg. t agN a me ;

3/24/2024 176
alert("You clicked o n a " + tn ame + " element.");
}

</script>

</head>

< b o d y o n mo use d o wn= "whichElemen t(even t)">

< p > C l i c k s o m e w h e r e in t h e d o cu me n t. An alert b o x will alert t h e t a g n ame

o f t h e eleme n t y o u clicked o n . < / p >

<h3>This is a header</h3>

<p>This is a paragraph</p>

< i m g b o rd e r= "0 " s r c = "b al l1 6 . gi f " w i d t h = " 2 9 " h e i g h t = " 2 8 " alt="Ball">

</body>

</html>

<html>

f u n ctio n getEventType(event)

alert(event.type);

</script>

</head>

< b o d y o n mouse down="ge tEventType(e ve nt)">

3/24/2024 177
< p > C l i c k in t h e document.
An alert b o x will tell w h a t t y p e o f even t

th at w a s t r i g g e r e d . < / p >

</body>

</html>

onabort Event

Definition and Usage

The onabort event occurs when loading of an image is aborted.

Syntax
onabort="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<img>

Supported by the following JavaScript objects:

image

Example 1
In this example an alert box will be displayed if the loading of the image is aborted: 3/24/2024 178
<img src="image_w3default.gif"
onabort="alert('Error: Loading of the image was aborted')">

Example 2
In this example we will call a function if the loading of the image is aborted:

<html>
<head>
<script type="text/javascript">
function abortImage()
{
alert('Error: Loading of the image was aborted')
}
</script>
</head>
<body>
<img src="image_w3default.gif"
onabort="abortImage()">
</body>
</html>

onblur Event
Definition and Usage
The onblur event occurs when an object loses focus.

Syntax
onblur="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

Supported by the following JavaScript objects:

button, checkbox, fileUpload, layer, frame, password, radio, reset, submit, text, textarea, window

Example
In this example we will execute some JavaScript code when a user leaves an input field:

<html>
<head>
<script type="text/javascript">
function upperCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</script>
</head>
<body>
Enter your name:
<input type="text" id="fname" onblur="upperCase()">
</body>
</html>

The output of the code above will be:

Enter your name:

onchange Event
Complete Event Object Reference

Definition and Usage

The onchange event occurs when the content of a field changes.

Syntax
onchange="SomeJavaScriptCode" 3/24/2024 180
Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<input type="text">, <select>, <textarea>

Supported by the following JavaScript objects:

fileUpload, select, text, textarea

Example
In this example we will execute some JavaScript code when a user changes the content of an
input field:

<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>
<body>
Enter your name:
<input type="text" id="fname"
onchange="upperCase(this.id)">
</body>
</html>

The output of the code above will be:

Enter your name:

Try-It-Yourself Demos
onchange
How to use the onchange event to execute some JavaScript code when a user changes3/24/2024
the content 181
of an input field.
ONCLICK EVENT
Definition and Usage
The onclick event occurs when an object gets clicked.

Syntax
onclick="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

Supported by the following JavaScript objects:

button, document, checkbox, link, radio, reset, submit

Example
In this example the text in the first input field will be copied to the second input field when a
button is clicked:

<html>
<body>
Field1: <input type="text" id="field1" value="Hello World!">
<br />
Field2: <input type="text" id="field2">
<br /><br />
Click the button below to copy the content of Field1 to Field2.
<br />
<button onclick="document.getElementById('field2').value= 3/24/2024 182
document.getElementById('field1').value">Copy Text</button>
</body>
</html>

The output of the code above will be:

Field1:
Field2:

Click the button below to copy the content of Field1 to Field2.

Copy Text

ondblclick Event
Definition and Usage
The ondblclick event occurs when an object gets double-clicked.

Syntax
ondblclick="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

Supported by the following JavaScript objects:

document, link

3/24/2024 183
Example
In this example the second field changes according to the first field when you double-click on the
button:

<html>
<body>
Field1: <input type="text" id="field1" value="Hello World!">
<br />
Field2: <input type="text" id="field2">
<br /><br />
Click the button below to copy the content of Field1 to Field2.
<br />
<button ondblclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>
</body>
</html>

The output of the code above will be:

Field1:
Field2:

Double-click the button below to copy the content of Field1 to Field2.

Copy Text

onerror Event

Definition and Usage

The onerror event is triggered when an error occurs loading a document or an image.

Syntax
onerror="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags: 3/24/2024 184

Supported by the following JavaScript objects:

window, image

Example
In this example an alert box will be displayed if an error occurs when loading an image:

onerror
How to use onerror.

Your browser does not support inline frames or is currently configured not to display inline
frames.

onfocus Event

Definition and Usage

The onfocus event occurs when an object gets focus.

Syntax
onfocus="SomeJavaScriptCode"

3/24/2024 185
Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

Supported by the following JavaScript objects:

button, checkbox, fileUpload, layer, frame, password, radio, reset, select, submit, text, textarea,
window

Example
In this example the background color of the input fields change when they get focus:

<html>
<head>
<script type="text/javascript">
function setStyle(x)
{
document.getElementById(x).style.background="yellow"
}
</script>
</head>
<body>
First name: <input type="text"
onfocus="setStyle(this.id)" id="fname">
<br />
Last name: <input type="text"
onfocus="setStyle(this.id)" id="lname">
</body>
</html>

The output of the code above will be:

First name:
Last name:

3/24/2024 186
ONKEYDOWN EVENT

Definition and Usage

The onkeydown event occurs when a keyboard key is pressed.

Syntax
onkeydown="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

Supported by the following JavaScript objects:

document, image, link, textarea

Tips and Notes

Browser differences: Internet Explorer uses event.keyCode to retrieve the character that was
pressed and Netscape/Firefox/Opera uses event.which.

Example
In this example the user cannot type numbers into the input field:

<html>
<body> 3/24/2024 187
<script type="text/javascript">
function noNumbers(e)
{
var keynum
var keychar
var numcheck
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>
<form>
<input type="text" onkeydown="return noNumbers(event)" />
</form>
</html>

The output of t h e co de a b o v e will be:

onkeypress Event

Definition and Usage

The onkeydown event occurs when a keyboard key is pressed or held down.

Syntax
onkeypress="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags: 3/24/2024 188

Supported by the following JavaScript objects:

document, image, link, textarea

Tips and Note

Browser differences: Internet Explorer uses event.keyCode to retrieve the character that was
pressed and Netscape/Firefox/Opera uses event.which.

Example
In this example the user cannot type numbers into the input field:

<html>
<body>
<script type="text/javascript">
function noNumbers(e)
{
var keynum
var keychar
var numcheck
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>
<form>
<input type="text" onkeypress="return noNumbers(event)" />
</form>
</html>
3/24/2024 189
The output of t h e co de a b o v e will be:

ONKEYUP EVENT

Definition and Usage

The onkeyup event occurs when a keyboard key is released.

Syntax
onkeyup="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

Supported by the following JavaScript objects:

The output of the code above will be:

Enter your name:

onload Event

Definition and Usage

The onload event occurs immediately after a page or an image is loaded.

Syntax
onload="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event
occurs.

Supported by the following HTML tags:

<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

Supported by the following JavaScript objects:

image, layer, window 3/24/2024 191

Example
In this example the text "Page is loaded" will be displayed in the status bar:

<html>
<head>
<script type="text/javascript">
function load()
{
window.status="Page is loaded"
}
</script>
</head>
<body onload="load()">
</body>
</html>

onmousedown Event

Definition and Usage

The onmousedown event occurs when a mouse button is clicked.

Syntax
onmousedown="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

Supported by the following JavaScript objects:

button, document, link

Example 1
In this example an alert box is displayed when clicking on the picture:

The output of the code above will be (click on the picture):

Example 2
In this example an alert box will alert the tag name of the element you clicked on:

<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body onmousedown="whichElement(event)"> 3/24/2024 193
<h2>This is a header</h2>
<p>This is a paragraph</p>
<img border="0" src="ball16.gif" alt="Ball">
</body>
</html>

onmousedown
How to use onmousedown to display an alert box when an image is clicked.

onmousedown 2
How to use onmousedown to alert the tag name of the element you clicked on.

onmousemove Event
Definition and Usage
The onmousemove event occurs when the mouse pointer is moved.

Syntax
onmousemove="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event
occurs.

Supported by the following HTML tags:

Supported by the following JavaScript objects:

onmousemove is, by default, not an event of any object, because mouse movement happens very
frequently. 3/24/2024 194
Tips and Notes
Note: Each time a user moves the mouse one pixel, a mousemove event occurs. It takes system
resources to process all mousemove events. Use this event carefully!

Example
In the following example we will display an alert box when the user moves the mouse pointer
over the image:

<img src="image_w3default.gif" alt="W3Schools"

onmousemove="alert('Visit W3Schools!')" />

The output of the code above will be:

onmouseout Event

Definition and Usage

The onmouseout event occurs when the mouse pointer moves away from a specified object.

Syntax
onmouseout="SomeJavaScriptCode"

Parameter Description
3/24/2024 195
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event
occurs.

Supported by the following HTML tags:

Supported by the following JavaScript objects:

layer, link

Example 1
In the following example we will display an alert box when the user moves the mouse pointer
away from the image:

<img src="image_w3default.gif" alt="W3Schools"

onmouseout="alert('Visit W3Schools!')" />

The output of the code above will be:

Example 2
In the following example we will add an image that should act as a link button on a web page.
We will then add an onMouseOver event and an onMouseOut event that will run two JavaScript
functions that will change between two images:

<html>
<head>
<script type="text/javascript"> 3/24/2024 196
function mouseOver()
{
document.b1.src ="b_blue.gif"
}
function mouseOut()
{
document.b1.src ="b_pink.gif"
}
</script>
</head>
<body>
<a href="http://www.w3schools.com" target="_blank"
onmouseover="mouseOver()"
onmouseout="mouseOut()">
<img border="0" alt="Visit W3Schools!"
src="b_pink.gif" name="b1" /></a>
</body>
</html>

The output of the code above will be:

onmouseout
How to use onmouseout.

onmouseover Event

Definition and Usage

The onmouseover event occurs when the mouse pointer moves over a specified object.

Syntax
onmouseover="SomeJavaScriptCode"

Parameter Description
3/24/2024 197
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event
occurs.

Supported by the following HTML tags:

Supported by the following JavaScript objects:

layer, link

Example 1
In the following example we will display an alert box when the user moves the mouse pointer
over the image:

<img src="image_w3default.gif" alt="W3Schools"

onmouseover="alert('Visit W3Schools!')" />

The output of the code above will be:

<html>
<head>
<script type="text/javascript">
function mouseOver() 3/24/2024 198
{
document.b1.src ="b_blue.gif"
}
function mouseOut()
{
document.b1.src ="b_pink.gif"
}
</script>
</head>
<body>
<a href="http://www.w3schools.com" target="_blank"
onmouseover="mouseOver()"
onmouseout="mouseOut()">
<img border="0" alt="Visit W3Schools!"
src="b_pink.gif" name="b1" /></a>
</body>
</html>

The output of the code above will be:

onmouseup Event

Definition and Usage

The onmouseup event occurs when a mouse button is released.

Syntax
onmouseup="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

Supported by the following JavaScript objects:

button, document, link

Example 1
In this example an alert box is displayed when the mouse button is released after clicking the
picture:

The output of the code above will be (click on the picture):

Example 2
In this example an alert box will alert the tag name of the element you clicked on:

<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script> 3/24/2024 200
</head>
<body onmouseup="whichElement(event)">
<h2>This is a header</h2>
<p>This is a paragraph</p>
<img border="0" src="ball16.gif" alt="Ball">
</body>
</html>

onmouseup
How to use onmouseup to display an alert box when an image is clicked.

onmouseup 2
How to use onmouseup to alert the tag name of the element you clicked on.

onreset Event
Definition and Usage
The onreset event occurs when the reset button in a form is clicked.

Syntax
onreset="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event
occurs.

Supported by the following HTML tags:

<form>

Supported by the following JavaScript objects:

form

3/24/2024 201
Example
In this example the form changes back to the default values and displays an alert box when the
reset button is clicked:

<form onreset="alert('The form will be reset')">

Firstname: <input type="text" name="fname" value="John" />
<br />
Lastname: <input type="text" name="lname" />
<br /><br />
<input type="reset" value="Reset">
</form>

The output of the code above will be:

Firstname:
Lastname:

onresize Event

Definition and Usage

The onresize event occurs when a window or frame is resized.

Syntax
onresize="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, <dd>, <dfn>,
<div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>, <hr>, <i>, <img>,
<input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <samp>, <select>,
<small>, <span>, <strong>, <sub>, <sup>, <table>, <textarea>, <tt>, <ul>, <var> 3/24/2024 202
Supported by the following JavaScript objects:

window

Example
In this example an alert box will be displayed when a user tries to resize the window:

<body onresize="alert('You have changed the size of the window')">

</body>

onselect event

Definition and Usage

The onselect event occurs when text is selected in a text or textarea field.

Syntax
onselect="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<input type="text">, <textarea>

Supported by the following JavaScript objects:

text, textarea
3/24/2024 203
Example
In this example an alert box will be displayed if some of the text is selected:

<form>
Select text: <input type="text" value="Hello world!"
onselect="alert('You have selected some of the text.')">
<br /><br />
Select text: <textarea cols="20" rows="5"
onselect="alert('You have selected some of the text.')">
Hello world!</textarea>
</form>

The output of the code above will be:

Select text:

onsubmit event

Definition and Usage

The onsubmit event occurs when the submit button in a form is clicked.

Syntax
onsubmit="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event
occurs.

Supported by the following HTML tags:

<form>

Supported by the following JavaScript objects:

3/24/2024 204
form

Example
In this example an alert box displays when a submit box is used:

<form name="testform" action="jsref_onsubmit.asp"

onsubmit="alert('Hello ' + testform.fname.value +'!')">
What is your name?<br />
<input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>

The output of the code above will be:

What is your name?

onunload Event

Definition and Usage

The onunload event occurs when a user exits a page.

Syntax
onunload="SomeJavaScriptCode"

Parameter Description
SomeJavaScriptCode Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<body>, <frameset> 3/24/2024 205

Supported by the following JavaScript objects:

window

Example
In this example an alert box will be displayed when the page is closed:

<body onunload="alert('The onunload event was triggered')">

</body>

3/24/2024 206
Quiz # 2

1. Reverse a string in JavaScript without using any

inbuilt function

2. Write a JavaScript program to print prime

numbers from 1 to 50.

3/24/2024 207
Quiz # 2 - Solution

Reverse a string in javascript without using any inbuilt function

console.log(countPrimes(100));

3/24/2024 208

Learn JavaScript in 24 Hours
From Everand
Learn JavaScript in 24 Hours
Alex Nordeen
3.5/5 (5)
Javascript W3schools
100% (1)
Javascript W3schools
190 pages
Javascript/Print Version: The Script Element
No ratings yet
Javascript/Print Version: The Script Element
48 pages
Csci04 Lec
No ratings yet
Csci04 Lec
12 pages
Introduction To Javascript: What You Should Already Know What Is Javascript?
No ratings yet
Introduction To Javascript: What You Should Already Know What Is Javascript?
5 pages
What Is Javascript?
No ratings yet
What Is Javascript?
13 pages
Java Script
No ratings yet
Java Script
96 pages
BCA212 - Unit 4
No ratings yet
BCA212 - Unit 4
23 pages
JavaScript Last Final
No ratings yet
JavaScript Last Final
30 pages
Chapter 6 - JAVASCRIPT - Hamid
No ratings yet
Chapter 6 - JAVASCRIPT - Hamid
55 pages
What You Should Already Know
No ratings yet
What You Should Already Know
23 pages
Javascript
100% (5)
Javascript
75 pages
Chapter 3 Javascrpit Note 2013
No ratings yet
Chapter 3 Javascrpit Note 2013
33 pages
JS Notes
No ratings yet
JS Notes
66 pages
Javascript: Marian C. de Luna Instructor
No ratings yet
Javascript: Marian C. de Luna Instructor
18 pages
Javascript: What You Should Already Know
No ratings yet
Javascript: What You Should Already Know
6 pages
Javascript Notes - Web App - Xii-1
No ratings yet
Javascript Notes - Web App - Xii-1
35 pages
Unit 4 Javascript
No ratings yet
Unit 4 Javascript
140 pages
Java Script
No ratings yet
Java Script
109 pages
Javascript
No ratings yet
Javascript
14 pages
Introduction To Javascript Instructor: Engr. Laila Nadeem: Pat Morin Comp240 5
No ratings yet
Introduction To Javascript Instructor: Engr. Laila Nadeem: Pat Morin Comp240 5
21 pages
Javascript Note by Vikas Kadakkal
100% (1)
Javascript Note by Vikas Kadakkal
66 pages
Javascript Notes
No ratings yet
Javascript Notes
108 pages
M2 R5 Web Designing PDF
No ratings yet
M2 R5 Web Designing PDF
103 pages
JavaScript Notes
No ratings yet
JavaScript Notes
81 pages
Java Script
No ratings yet
Java Script
46 pages
Java Script
No ratings yet
Java Script
70 pages
Lecture-13-JavaScript-Part-01 - Basics - New
No ratings yet
Lecture-13-JavaScript-Part-01 - Basics - New
36 pages
Java Script
No ratings yet
Java Script
52 pages
Lecture 05 JavaScript
No ratings yet
Lecture 05 JavaScript
97 pages
JAVASCRIPT
No ratings yet
JAVASCRIPT
21 pages
Unit II
No ratings yet
Unit II
168 pages
Introduction To Javascript: What You Should Already Know
No ratings yet
Introduction To Javascript: What You Should Already Know
34 pages
What Is Javascript
No ratings yet
What Is Javascript
45 pages
ICT-008-HCI-Week-11
No ratings yet
ICT-008-HCI-Week-11
23 pages
Java Script
No ratings yet
Java Script
32 pages
WT Unit 2 Notes
No ratings yet
WT Unit 2 Notes
80 pages
Chapter 3 Web Technology II Javascript
No ratings yet
Chapter 3 Web Technology II Javascript
97 pages
Hy Is Javascripts Used?
No ratings yet
Hy Is Javascripts Used?
5 pages
Javascript Was Designed To Add Interactivity To HTML Pages
No ratings yet
Javascript Was Designed To Add Interactivity To HTML Pages
8 pages
JS
No ratings yet
JS
156 pages
Java Script Class 1
No ratings yet
Java Script Class 1
90 pages
Javascript: Web Engineering
No ratings yet
Javascript: Web Engineering
115 pages
Chap-4 Javascript Final
No ratings yet
Chap-4 Javascript Final
16 pages
3 - Javascript Notes
No ratings yet
3 - Javascript Notes
174 pages
Java Script
No ratings yet
Java Script
34 pages
Java Script - Unit 1
No ratings yet
Java Script - Unit 1
95 pages
Unit 4 Notes
No ratings yet
Unit 4 Notes
22 pages
Chapter III - JavaScript
No ratings yet
Chapter III - JavaScript
17 pages
1st and 2nd Class Notes
No ratings yet
1st and 2nd Class Notes
38 pages
Javascript
100% (2)
Javascript
56 pages
Introduction To Javascript What Is Javascript?
No ratings yet
Introduction To Javascript What Is Javascript?
30 pages
JavaScript Notes PDF
67% (3)
JavaScript Notes PDF
19 pages
JavaScript Chapter 02 - 927F3F
No ratings yet
JavaScript Chapter 02 - 927F3F
3 pages
Javascript in Unit2 Part1
No ratings yet
Javascript in Unit2 Part1
93 pages
Unit 1 Client Side Scripting Latest
No ratings yet
Unit 1 Client Side Scripting Latest
62 pages
JavaScript Fundamentals: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event Handlers: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event Handlers
From Everand
JavaScript Fundamentals: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event Handlers: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event Handlers
Steven Bright
No ratings yet
JavaScript Fundamentals: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event Handlers
From Everand
JavaScript Fundamentals: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event Handlers
Steven Bright
No ratings yet
JavaScript: Igniting Business Growth Through Dynamic Web Development
From Everand
JavaScript: Igniting Business Growth Through Dynamic Web Development
Sachin Naha
No ratings yet
James Learning Javascript Programming
From Everand
James Learning Javascript Programming
James Lombard
No ratings yet
Lec 3 Software Engineering Ethics
No ratings yet
Lec 3 Software Engineering Ethics
8 pages
DLD Lab#7
No ratings yet
DLD Lab#7
4 pages
Lec 2 Introduction To Software Development
No ratings yet
Lec 2 Introduction To Software Development
18 pages
DLD Lab#9
No ratings yet
DLD Lab#9
6 pages
DLD Assignment#4 PDF
No ratings yet
DLD Assignment#4 PDF
5 pages
DLD Assignment#2
No ratings yet
DLD Assignment#2
3 pages
DLD Assignment#3
No ratings yet
DLD Assignment#3
3 pages
DLD Lab#08
No ratings yet
DLD Lab#08
6 pages
Coal L#08
No ratings yet
Coal L#08
8 pages
Planning and Writing A Grant Proposal
No ratings yet
Planning and Writing A Grant Proposal
10 pages
Cover Letter
No ratings yet
Cover Letter
20 pages
Javascript
No ratings yet
Javascript
15 pages
Understanding Ecmascript 6
No ratings yet
Understanding Ecmascript 6
18 pages
CRC Quick Javascript
No ratings yet
CRC Quick Javascript
167 pages
DCT Academy
No ratings yet
DCT Academy
18 pages
JavaScript Unlocked - Sample Chapter
No ratings yet
JavaScript Unlocked - Sample Chapter
36 pages
Building Web Components With TypeScript and Angular 4
No ratings yet
Building Web Components With TypeScript and Angular 4
498 pages
JavaScript Wikipedia PDF
No ratings yet
JavaScript Wikipedia PDF
33 pages
ECMAScript 6
100% (1)
ECMAScript 6
2 pages
HTML Cheatsheet: Basic Tags Formatting
No ratings yet
HTML Cheatsheet: Basic Tags Formatting
68 pages
Lecture7 - Javascript
No ratings yet
Lecture7 - Javascript
208 pages
Es6 Tutorial
100% (1)
Es6 Tutorial
435 pages
Khadka Hritik
No ratings yet
Khadka Hritik
39 pages
Vumbula React
No ratings yet
Vumbula React
93 pages
React Js W3 School
No ratings yet
React Js W3 School
127 pages
Tiny ES6 Notebook Curated JavaScript Examples
100% (1)
Tiny ES6 Notebook Curated JavaScript Examples
100 pages
JavaScript ES6_ Comprehensive Guide
No ratings yet
JavaScript ES6_ Comprehensive Guide
8 pages
Instant download JavaScript The Definitive Guide Fourth Edition Flanagan pdf all chapter
100% (7)
Instant download JavaScript The Definitive Guide Fourth Edition Flanagan pdf all chapter
67 pages
Unit 4
No ratings yet
Unit 4
19 pages
Angular 246 Basic
No ratings yet
Angular 246 Basic
17 pages
Javascript Introduction: Javascript Can Change HTML Content
No ratings yet
Javascript Introduction: Javascript Can Change HTML Content
41 pages
JAVA SCRIPT SUDHAKAR SHARMA(1)
0% (1)
JAVA SCRIPT SUDHAKAR SHARMA(1)
111 pages
Test Answer
No ratings yet
Test Answer
5 pages
Chapter 7 JVS
No ratings yet
Chapter 7 JVS
65 pages
Document Reference Materials
No ratings yet
Document Reference Materials
12 pages
JavaScript T. J. Crowder - Download the ebook now for instant access to all chapters
100% (1)
JavaScript T. J. Crowder - Download the ebook now for instant access to all chapters
48 pages
NXT Shop Documentation
No ratings yet
NXT Shop Documentation
79 pages
Ecma 262 PDF
No ratings yet
Ecma 262 PDF
798 pages
2 ECMAScript and JavaScript-3312
No ratings yet
2 ECMAScript and JavaScript-3312
3 pages
Instant download Building React Apps with Server Side Rendering Use React Redux and Next to Build Full Server Side Rendering Applications Thakkar Mohit pdf all chapter
100% (3)
Instant download Building React Apps with Server Side Rendering Use React Redux and Next to Build Full Server Side Rendering Applications Thakkar Mohit pdf all chapter
55 pages
Modern Web Development PDF
100% (1)
Modern Web Development PDF
412 pages