Scribd
Upload
163 views

Java Script

This document provides an introduction to JavaScript, including: 1) JavaScript allows for interactivity on web pages by reacting to user actions and manipulating the browser and page. It is a type of programming language that is easy to learn and was developed by Netscape. 2) JavaScript works by being embedded within HTML pages and executing on the client-side, providing interactivity without needing a connection once loaded. It uses simple programming statements combined with HTML tags. 3) JavaScript functions can be defined and called to perform tasks like finding the maximum of input numbers. Functions allow code to be reused and organized.

Uploaded by

Arunachalam Rm
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
163 views

Java Script

This document provides an introduction to JavaScript, including: 1) JavaScript allows for interactivity on web pages by reacting to user actions and manipulating the browser and page. It is a type of programming language that is easy to learn and was developed by Netscape. 2) JavaScript works by being embedded within HTML pages and executing on the client-side, providing interactivity without needing a connection once loaded. It uses simple programming statements combined with HTML tags. 3) JavaScript functions can be defined and called to perform tasks like finding the maximum of input numbers. Functions allow code to be reused and organized.

Uploaded by

Arunachalam Rm
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 192

Introduction to

JavaScript
T.Shanmugapriya

Introduction
What is it?
How does it work?
What is Java?
Learning JavaScript
JavaScript Statements
JavaScript and HTML forms

What is JavaScript?
Browsers have limited functionality
Text, images, tables, frames

JavaScript allows for interactivity


Browser/page manipulation
Reacting to user actions

A type of programming language


Easy to learn
Developed by Netscape
Now a standard exists
www.ecma-international.org/publications/
standards/ECMA-262.HTM

JavaScript Allows Interactivity


Improve appearance
Especially graphics
Visual feedback

Site navigation
Perform calculations
Validation of input
Other technologies
javascript.internet.com

How Does It Work?


Embedded within HTML page
View source

Executes on client
Fast, no connection needed once loaded

Simple programming statements


combined with HTML tags
Interpreted (not compiled)
No special tools required

What is Java?
Totally different
A full programming language
Much harder!
A compiled language
Independent of the web
Sometimes used together

JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">
document.write('This is my first JavaScript
Page');
</script>
</body>
</html>

JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language=JavaScript">
document.write('<h1>This is my first
JavaScript Page</h1>');
</script>
</body>
</html>

HTML written
inside JavaScript

JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<p>
<a href="myfile.html">My Page</a>
<br />
<a href="myfile.html"
onMouseover="window.alert('Hello');">
My Page</A>
</p>
</body>
JavaScript written
An Event
</html>
inside HTML

Example Statements
<script language="JavaScript">
window.prompt('Enter your name:','');
Another event
</script>
<form>
<input type="button" Value="Press"
onClick="window.alert('Hello');">
</form>
Note quotes: " and '

JavaScript Comments
Comments can be added to explain
the JavaScript, or to make the code
more readable.
Single line comments start with //.
The following example uses single
line comments to explain the code:

Example
<script type="text/javascript">
// Write a heading
document.write("<h1>This is a heading</h1>");
// Write two paragraphs:
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another
paragraph.</p>");
</script>

JavaScript Multi-Line
Comments
Multi line comments start with /* and
end with */.
The following example uses a multi
line comment to explain the code:

Example
<script type="text/javascript">
/*
The code below will write
one heading and two paragraphs
*/
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another
paragraph.</p>");
</script>

Using Comments at the End of


a Line
Example
<script type="text/javascript">
document.write("Hello"); // Write "Hello"
document.write(" Dolly!"); // Write "
Dolly!"
</script>

Simple Program: Printing a Line of


Text in a Web Page
Inline scripting
Written in the <body> of a document
<script> tag
Indicate that the text is part of a script
type attribute
Specifies the type of file and the scripting language use
writeln method
Write a line in the document
alert method
Dialog box

welcome.html
(1 of 1)

welcome2.html
(1 of 1)

welcome3.html
1 of 1

welcome4.html
1 of 1

welcome5.html
(1 of 2)

23
24

</head>

25
26

<body>

27

<p>Click Refresh (or Reload) to run this script again.</p>

28

</body>

29 </html>

welcome5.html
(2 of 2)

Adding Integers
Prompt user for two integers and
calculate the sum NaN (not a number)
parseInt
Converts its string argument to an
integer

Addition.html
(1 of 2)

Addition.html
(2 of 2)

Arithmetic
Many scripts perform arithmetic
calculations
Expressions in JavaScript must be written in
straight-line form

Arithmetic

Precedence and associativity

Arithmetic
Step 1. y = 2 * 5 * 5 + 3 * 5 + 7;
2 * 5 is 10

(Leftmost multiplication)

Step 2. y = 10 * 5 + 3 * 5 + 7;
10 * 5 is 50

(Leftmost multiplication)

Step 3. y = 50 + 3 * 5 + 7;
3 * 5 is 15

(Multiplication before addition)

Step 4. y = 50 + 15 + 7;
50 + 15 is 65

(Leftmost addition)

Step 5. y = 65 + 7;
65 + 7 is 72
Step 6. y = 72;

(Last addition)
(Last operationplace72intoy )

Adding Strings and Numbers


The rule is: If you add a number and a string, the result will
be a string!

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

Decision Making: Equality and


Relational Operators
Decision based on the truth or falsity of a
condition
Equality operators
Relational operators

Decision Making: Equality and


Relational Operators

Decision Making: Equality and


Relational Operators
Precedence and associativity

JavaScript Assignment Operators


Assignment operators are used to assign
values to JavaScript variables.

Increment and Decrement


Operators
Preincrement or predecrement operator
Increment of decrement operator placed before
a variable

Postincrement or postdecrement operator


Increment of decrement operator placed after
a variable

Increment and Decrement


Operators

Increment and Decrement


Operators
Precedence and associativity

Logical Operators
More logical operators
Logical AND ( && )
Logical OR ( || )
Logical NOT ( ! )

Truth table for the && (logical AND) operator.

Logical Operators
Truth table for the || (logical OR) operator.

Truth table for operator ! (logical negation).

Logical Operators
Precedence and associativity

Conditional Statements
In JavaScript we have the following conditional
statements:
if statement - use this statement to execute
some code only if a specified condition is true
if...else statement - use this statement 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 to select one of many blocks of code to
be executed
switch statement - use this statement to select
one of many blocks of code to be executed

If Statement
Use the if statement to execute some code only if
a specified condition is true.
Syntax
if (condition)
{
codetobeexecutedifconditionistrue
}

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

If...else Statement
Use the if....else statement to execute some code if a
condition is true and another code if the condition is not
true.

Syntax
if (condition)
{
codetobeexecutedifconditionistrue
}
else
{
codetobeexecutedifconditionisnottrue
}

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>

If...else if...else Statement


Use the if....else if...else statement to select one of several
blocks of code to be executed.
Syntax
if (condition1)
{
codetobeexecutedifcondition1istrue
}
else if (condition2)
{
codetobeexecutedifcondition2istrue
}
else
{
codetobeexecutedifcondition1andcondition2arenot
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>

The JavaScript Switch Statement


Use the switch statement to select one of many blocks of
code to be executed.
Syntax
switch(n)
{
case 1:
executecodeblock1
break;
case 2:
executecodeblock2
break;
default:
codetobeexecutedifnisdifferentfromcase1and2
}

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

Function Definitions
Format of a function definition
function function-name( parameter-list )
{
declarationsandstatements
}

Function name any valid identifier


Parameter list names of variables that will
receive arguments
Must have same number as function call
May be empty

Declarations and statements


Function body (block of code)

Function Definitions
Returning control
return statement

Can return either nothing, or a value


return expression;

No return statement same as return;


Not returning a value when expected
is an error

Function Definitions
Writing a function to square two
numbers
for loop from 1 to 10

Pass each number as argument to


square
return value of argument multiplied

by itself
Display result

Calling function square and passing it the value of x.

22

// The following square function's body is executed

23

// only when the functionVariable


is explicitly
y gets called.
the value

of variable x.

24
25

// square function definition

26

function square( y )

27

28

return y * y;

29

30

// -->

31

</script>

32
33

</head><body></body>

34 </html>

The return statement passes the value of y * y back


to the calling function.

Function Definitions

Function Definitions
Finding the maximum of 3
numbers
Prompt for 3 inputs
Convert to numbers
Pass to maximum
Math.max

Prompt for the user to input three integers.

24
25

var maxValue = maximum( value1, value2, value3 );

26
27

document.writeln( "First number: " + value1 +

Call function maximum and pass it the value of


variables value1, value2 and value3.

28

"<br />Second number: " + value2 +

29

"<br />Third number: " + value3 +

30

"<br />Maximum is: " + maxValue );

Method max returns the larger of the two


integers passed to it.

31
32

// maximum method definition (called from line 25)

33

function maximum( x, y, z )

34

35

return Math.max( x, Math.max( Variables


y, z ) );x,

36

37

// -->

38

</script>

y and z get the value of variables value1,


value2 and value3, respectively.

39
40

</head>

41

<body>

42
43

<p>Click Refresh (or Reload) to run the script again</p>


</body>

44 </html>

Function Definitions

Function Definitions

JavaScript Loops
In JavaScript, there are two different kind
of loops:
for - loops through a block of code a
specified number of times
while - loops through a block of code
while a specified condition is true

The for Loop


The for loop is used when you know in
advance how many times the script should
run.
Syntax
for
(var=startvalue;var<=endvalue;var=var+i
ncrement)
{
codetobeexecuted
}

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

The while Loop


The while loop loops through a block of
code while a specified condition is true.
Syntax
while (var<=endvalue)
{
codetobeexecuted
}

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

The do...while Loop


The do...while loop is a variant of the while
loop. This loop will execute the block of
code ONCE, and then it will repeat the loop
as long as the specified condition is true.
Syntax
do
{
codetobeexecuted
}
while (var<=endvalue);

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

JavaScript Break and Continue


Statements
The break Statement
The break statement will break the
loop and continue executing the code that
follows after the loop (if any).

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

The continue Statement


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

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

JavaScript For...In Statement


The for...in statement loops through the
elements of an array or through the
properties of an object.
Syntax
for (variable in object)
{
codetobeexecuted
}

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

JavaScript Popup Boxes


JavaScript has three kind of popup
boxes:
Alert box,
Confirm box, and
Prompt box.

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

Example
<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show
alert box" />
</body>
</html>

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

Example
<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show confirm box" />
</body>
</html>

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

JavaScript Functions
How to Define a Function
Syntax
function
functionname(var1,var2,...,varX)
{
somecode
}

Example
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>

Example
Contd...

<body>
<form>
<input type="button" value="Click
me!" onclick="displaymessage()" />
</form>
</body>
</html>

Events
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 field in an HTML form
Submitting an HTML form
A keystroke

onLoad and onUnload


The onLoad and onUnload events are
triggered when the user enters or leaves
the page.
onFocus, onBlur and onChange
The onFocus, onBlur and onChange
events are often used in combination with
validation of form fields.
<input type="text" size="30" id="email"
onchange="checkEmail()">

onSubmit
The onSubmit event is used to validate
ALL form fields before submitting it.
<form method="post" action=abc.htm"
onsubmit="return checkForm()">

onMouseOver and onMouseOut


onMouseOver and onMouseOut are
often used to create "animated" buttons.
<a href="http://www.annauniv.edu" onmouseover="alert('An
onMouseOver event');return false"><img src=anna.gif"
alt=annauniv" /></a>

JavaScript Try...Catch Statement


The try...catch statement allows you to test a
block of code for errors.
Syntax
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}

Example
<html>
<head>
<script type="text/javascript">
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.description + "\n\n";

Example
Contd...

txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="View message"
onclick="message()" />
</body>
</html>

The Throw Statement


The throw statement allows you to create
an exception. If you use this statement
together with the try...catch statement,
you can control program flow and
generate accurate error messages.
Syntax
throw(exception)

Example

<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","");
try
{
if(x>10)
{
throw "Err1";
}
else if(x<0)
{
throw "Err2";
}
else if(isNaN(x))
{
throw "Err3";
}
}

Example
Contd...

catch(er)
{
if(er=="Err1")
{
alert("Error! The value is too high");
}
if(er=="Err2")
{
alert("Error! The value is too low");
}
if(er=="Err3")
{
alert("Error! The value is not a number");
}
}
</script>
</body>
</html>

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

Introduction
Use JavaScript to manipulate every
element of XHTML document from a
script
Reference for several of JavaScripts
built-in objects
Demonstrates the capabilities

12.2 Thinking About Objects


Objects
Attributes
Behaviors
Encapsulate data and methods
Property of information hiding
Details hidden within the objects
themselves

Math Object
Allow the programmer to perform
many common mathematical
calculations

12.3
Math Object
Description
Example

Method
abs( x )

abs( 7.2 ) is 7.2


abs( 0.0 ) is 0.0
abs( -5.6 ) is 5.6
rounds x to the smallest ceil( 9.2 ) is 10.0
ceil( x )
integer not less than x
ceil( -9.8 ) is -9.0
trigonometric cosine of x cos( 0.0 ) is 1.0
cos( x )
(x in radians)
exp( x )
exponential method ex exp( 1.0 ) is 2.71828
exp( 2.0 ) is 7.38906
floor( x ) rounds x to the largest
floor( 9.2 ) is 9.0
integer not greater than x floor( -9.8 ) is -10.0
natural logarithm of x
log( x )
log( 2.718282 ) is 1.0
(base e)
log( 7.389056 ) is 2.0
max( x, y ) larger value of x and y max( 2.3, 12.7 ) is 12.7
max( -2.3,-12.7 ) is -2.3
.

absolute value of x

Math Object
min( x, y ) smaller value of x
and y
pow( x, y ) x raised to power y
(xy)
round( x ) rounds x to the
closest integer
trigonometric sine of
sin( x )
x (x in radians)
square root of x
sqrt( x )

min( 2.3, 12.7 ) is 2.3


min( -2.3, -12.7 ) is -12.7
pow( 2.0, 7.0 ) is 128.0
pow( 9.0, .5 ) is 3.0
round( 9.75 ) is 10
round( 9.25 ) is 9
sin( 0.0 ) is 0.0

sqrt( 900.0 ) is 30.0


sqrt( 9.0 ) is 3.0
trigonometric tangent tan( 0.0 ) is 0.0
tan( x )
of x
(x in radians)
Fig. 12.1 Math object methods.

Math Object
Constant
Math.E

Description
Base of a natural
logarithm (e).
Natural logarithm of 2.
Math.LN2
Natural logarithm of 10.
Math.LN10
Base 2 logarithm of e.
Math.LOG2E
Math.LOG10E Base 10 logarithm of e.
Math.PI
the ratio of a circles
circumference to its
diameter.
Math.SQRT1_2 Square root of 0.5.
Square root of 2.0.
Math.SQRT2
Fig. 12.2 Properties of the Math object.

Value
Approximately 2.718.
Approximately 0.693.
Approximately 2.302.
Approximately 1.442.
Approximately 0.434.
Approximately
3.141592653589793.
Approximately 0.707.
Approximately 1.414.

Date Object
Provides methods for date and time
manipulations

12.5 Date Object


Method

Description

getDay()
getUTCDay()

Returns a number from 0 (Sunday) to 6 (Saturday) representing the day of the week in local time or UTC,
respectively.

getFullYear()
getUTCFullYear()
getHours()
getUTCHours()
getMilliseconds()
getUTCMilliSeconds()

Returns the year as a four-digit number in local time or UTC, respectively.

getMinutes()
getUTCMinutes()
getMonth()
getUTCMonth()
getSeconds()
getUTCSeconds()
getTime()

Returns a number from 0 to 59 representing the minutes for the time in local time or UTC, respectively.

getTimezoneOffset()

Returns the difference in minutes between the current time on the local computer and UTCpreviously
known as Greenwich Mean Time (GMT).

setDate( val )
setUTCDate( val )
Fig. 12.8
Methods of the Date object.

Sets the day of the month (1 to 31) in local time or UTC, respectively.

getDate()
getUTCDate()

Returns a number from 1 to 31 representing the day of the month in local time or UTC, respectively.

Returns a number from 0 to 23 representing hours since midnight in local time or UTC, respectively.
Returns a number from 0 to 999 representing the number of milliseconds in local time or UTC, respectively.
The time is stored in hours, minutes, seconds and milliseconds.

Returns a number from 0 (January) to 11 (December) representing the month in local time or UTC,
respectively.
Returns a number from 0 to 59 representing the seconds for the time in local time or UTC, respectively.
Returns the number of milliseconds between January 1, 1970 and the time in the Date object.

12.5 Date Object


Method

Description

setHours( h, m, s, ms )
setUTCHours( h, m, s, ms )

Sets the hour in local time or UTC, respectively. The second, third and fourth
arguments representing the minutes, seconds and milliseconds are optional. If
an optional argument is not specified, the current value in the Date object is
used.

setMilliSeconds( ms )
setUTCMilliseconds( ms )
setMinutes( m, s, ms )
setUTCMinutes( m, s, ms )

Sets the number of milliseconds in local time or UTC, respectively.

setMonth( m, d )
setUTCMonth( m, d )

Sets the month in local time or UTC, respectively. The second argument
representing the date is optional. If the optional argument is not specified, the
current date value in the Date object is used.

setSeconds( s, ms )
setUTCSeconds( s, ms )

Sets the second in local time or UTC, respectively. The second argument
representing the milliseconds is optional. If this argument is not specified, the
current millisecond value in the Date object is used.

setFullYear( y, m, d )
setUTCFullYear( y, m, d )

Fig. 12.8

Sets the year in local time or UTC, respectively. The second and third
arguments representing the month and the date are optional. If an optional
argument is not specified, the current value in the Date object is used.

Sets the minute in local time or UTC, respectively. The second and third
arguments representing the seconds and milliseconds are optional. If an
optional argument is not specified, the current value in the Date object is
used.

Methods of the Date object.

12.5 Date Object


Method

Description

toLocaleString()

Returns a string representation of the date and time in a form specific to the
computers locale. For example, September 13, 2001 at 3:42:22 PM is
represented as 09/13/01 15:47:22 in the United States and 13/09/01
15:47:22 in Europe.

toUTCString()

Returns a string representation of the date and time in the form: 19 Sep
2001 15:47:22 UTC

toString()

Returns a string representation of the date and time in a form specific to the
locale of the computer (Mon Sep 19 15:47:22 EDT 2001 in the United
States).

valueOf()

The time in number of milliseconds since midnight, January 1, 1970.

setTime( ms )

Fig. 12.8

Sets the time based on its argumentthe number of elapsed milliseconds


since January 1, 1970.

Methods of the Date object.

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4
5

<!-- Fig. 12.9: DateTime.html -->

<!-- Date and Time Methods

-->

7
8
9
10

<html xmlns = "http://www.w3.org/1999/xhtml">


<head>
<title>Date and Time Methods</title>

11
12

DateTime.html
1 of 3

<script type = "text/javascript">

13

<!--

14

var current = new Date();

15
16
17
18

document.writeln(
"<h1>String representations and valueOf</h1>" );
document.writeln( "toString: " + current.toString() +

19

"<br />toLocaleString: " + current.toLocaleString() +

20

"<br />toUTCString: " + current.toUTCString() +

21

"<br />valueOf: " + current.valueOf() );

22
23
24

document.writeln(
"<h1>Get methods for local time zone</h1>" );

25

document.writeln( "getDate: " + current.getDate() +

26

"<br />getDay: " + current.getDay() +

27

"<br />getMonth: " + current.getMonth() +

28

"<br />getFullYear: " + current.getFullYear() +

29

"<br />getTime: " + current.getTime() +

30

"<br />getHours: " + current.getHours() +

31

"<br />getMinutes: " + current.getMinutes() +

32

"<br />getSeconds: " + current.getSeconds() +

33

"<br />getMilliseconds: " +

34

current.getMilliseconds() +

35

"<br />getTimezoneOffset: " +

36

current.getTimezoneOffset() );

37
38
39

document.writeln(

DateTime.html
2 of 3

"<h1>Specifying arguments for a new Date</h1>" );

40

var anotherDate = new Date( 2001, 2, 18, 1, 5, 0, 0 );

41

document.writeln( "Date: " + anotherDate );

42
43
44

document.writeln(
"<h1>Set methods for local time zone</h1>" );

45

anotherDate.setDate( 31 );

46

anotherDate.setMonth( 11 );

47

anotherDate.setFullYear( 2001 );

48

anotherDate.setHours( 23 );

49

anotherDate.setMinutes( 59 );

50

anotherDate.setSeconds( 59 );

51

document.writeln( "Modified date: " + anotherDate );

52

// -->

53

</script>

54
55

</head><body></body>

56 </html>

JavaScript Date Object


The Date object is used to work with dates
and times.
Date objects are created with the Date()
constructor.
There are four ways of instantiating a date:

new Date() // current date and time


new Date(milliseconds) //milliseconds since 1970/01/01
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds,
milliseconds)

To set a Date object to a specific date


(30th November 2010):
var myDate=new Date();
myDate.setFullYear(2010,10,30);

To set a Date object to be 5 days into the


future:
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

Compare Two Dates


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

12.6 Boolean and Number


Objects
Object wrappers for boolean
true/false values and numbers

12.6 Boolean and Number


Objects

Method
toString()
valueOf()
Fig. 12.10

Description
Returns the string true if the value of the Boolean object is
true; otherwise, returns the string false.
Returns the value true if the Boolean object is true; otherwise,
returns false.
Boolean object methods.

12.6 Boolean and Number


Objects

Method or Property
toString( radix )

Description
Returns the string representation of the number. The optional radix
argument (a number from 2 to 36) specifies the numbers base. For
example, radix 2 results in the binary representation of the number,
8 results in the octal representation, 10 results in the decimal
representation and 16 results in the hexadecimal representation.
See Appendix E, Number Systems for a review of the binary, octal,
decimal and hexadecimal number systems.
Returns the numeric value.
valueOf()
This property represents the largest value that can be stored in a
Number.MAX_VALUE
JavaScript programapproximately 1.79E+308
This property represents the smallest value that can be stored in a
Number.MIN_VALUE
JavaScript programapproximately
2.22E308
This property represents not a numbera value returned from an
Number.NaN
arithmetic expression that does not result in a number (e.g., the
expression parseInt( "hello" ) cannot convert the string
"hello" into a number, so parseInt would return
Number.NaN. To determine whether a value is NaN, test the
result with function isNaN, which returns true if the value is
NaN; otherwise, it returns false.
This property represents a value less than
Number.NEGATIVE_INFINITY
-Number.MAX_VALUE.
This property represents a value greater than
Number.POSITIVE_INFINITY
Number.MAX_VALUE.
Fig. 12.11 Number object methods and properties.

JavaScript Boolean Object


The Boolean object is used to convert a
non-Boolean value to a Boolean value
(true or false).
The following code creates a Boolean
object called myBoolean:
-var myBoolean=new Boolean();

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

And all the following lines of code create


Boolean objects with an initial value of
true:
var myBoolean=new Boolean(1);
var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Richard");

JavaScript Math Object


The Math object allows you to perform
mathematical tasks.
round()
How to use round().
random()
How to use random() to return a random number between 0
and 1.
max()
How to use max() to return the number with the highest value
of two specified numbers.
min()
How to use min() to return the number with the lowest value of
two specified numbers.

Mathematical Constants

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

Mathematical Methods
Few Examples:
document.write(Math.round(4.7));
document.write(Math.random());
document.write(Math.floor(Math.random()*11));

JavaScript Browser Detection

The Navigator object contains information about the visitor's browser.


Example
<html>
<body>
<script type="text/javascript">
document.write("Browser CodeName: " + navigator.appCodeName);
document.write("<br /><br />");
document.write("Browser Name: " + navigator.appName);
document.write("<br /><br />");
document.write("Browser Version: " + navigator.appVersion);
document.write("<br /><br />");
document.write("Cookies Enabled: " + navigator.cookieEnabled);
document.write("<br /><br />");
document.write("Platform: " + navigator.platform);
document.write("<br /><br />");
document.write("User-agent header: " + navigator.userAgent);
</script>
</body>
</html>

Java Script String Object


Method

Description

anchor()

Creates an HTML anchor

big()

Displays a string in a big font

blink()

Displays a blinking string

bold()

Displays a string in bold

charAt()

Returns the character at a specified position

charCodeAt()

Returns the Unicode of the character at a specified


position

concat()

Joins two or more strings

fixed()

Displays a string as teletype text

fontcolor()

Displays a string in a specified color

fontsize()

Displays a string in a specified size

fromCharCod
e
()
indexOf()

Takes the specified Unicode values and returns a string


Returns the position of the first occurrence of a
specified string value in a string

String Object

italics()

Displays a string in italic

lastIndexOf()

Returns the position of the last occurrence of a specified


string value, searching backwards from the specified
position in a string

link()

Displays a string as a hyperlink

match()

Searches for a specified value in a string

replace()

Replaces some characters with some other characters in a


string

search()

Searches a string for a specified value

slice()

Extracts a part of a string and returns the extracted part in


a new string

small()

Displays a string in a small font

split()

Splits a string into an array of strings

strike()

Displays a string with a strikethrough

String object
sub()

Displays a string as subscript

substr()

Extracts a specified number of characters in a string, from a


start index

substring()

Extracts the characters in a string between two specified


indices

sup()

Displays a string as superscript

toLowerCase()

Displays a string in lowercase letters

toUpperCase()

Displays a string in uppercase letters

toSource()

Represents the source code of an object

valueOf()

Returns the primitive value of a String object

String Object Properties

constructor

A reference to the function that created


the object

length

Returns the number of characters in a


string

prototype

Allows you to add properties and


methods to the object

CharAt method

The charAt() method returns the character at a


specified position.
stringObject.charAt(index)

In the string "Hello world!", we will return the


character at position 1:
<script type="text/javascript">
var str="Hello world!";
document.write(str.charAt(1));
</script>

Index of Method
The indexOf() method returns the position of the first
occurrence of a specified string value in a string.
stringObject.indexOf(searchvalue,fromindex)

Specifies a string value to search forfromindexOptional.


Specifies where to start the searchNote: This method
returns -1 if the string value to search for never occurs.
Example
In this example we will do different searches within a "Hello
world!" string:
<script type="text/javascript">
var str="Hello world!";
document.write(str.indexOf("Hello") + "<br />");
document.write(str.indexOf("World") + "<br />");
document.write(str.indexOf("world"));
</script>

Substring method
The substring() method extracts the characters in a string
between two specified indices.
Syntax
stringObject.substring(start,stop)
we will use substring() to extract some characters from a string:
<script type="text/javascript">
var str="Hello world!";
document.write(str.substring(3));
</script>
The output of the code above will be:
lo world!
<script type="text/javascript">
var str="Hello world!";
document.write(str.substring(3,7));
</script>
The output of the code above will be:
lo w

toSource method

<script type="text/javascript">
var str="Hello world!";
document.write(str.substring(3,7));
</script>
The output of the code above will be:
lo w
The toSource() method represents the source code of an object.
object.toSource()
<script type="text/javascript">
function employee(name,jobtitle,born)
{this.name=name;
this.jobtitle=jobtitle;this.born=born;}
var fred=new employee("Fred Flintstone","Caveman",1970);
document.write(fred.toSource());
</script>
The output of the code above will be:
({name:"Fred Flintstone", jobtitle:"Caveman", born:1970})

Slice
The slice() method extracts a part of a string and returns
the extracted part in a new string.
Syntax
stringObject.slice(start,end)
Specify where to start the selection. Must be a
numberendOptional. Specify where to end the selection.
Must be a number.
In this example we will extract all characters from a string,
starting at position 6:
<script type="text/javascript">var str="Hello happy
world!";document.write(str.slice(6));</script>
The output of the code above will be:
happy world!

Search
The search() method is used to search a string
for a specified value.
Syntax
stringObject.search(searchstring)
The value to search for in a string. To perform a
case-insensitive search add an 'i' flag.
In the following example we will search for the word
"W3Schools":
<script type="text/javascript">var str="Visit
W3Schools!";document.write(str.search(/W3Scho
ols/));</script>
The output of the code above will be:
6

Replace
The replace() method is used to replace some characters with
some other characters in a string.
Syntax
stringObject.replace(findstring,newstring)
Specifies a string value to find. To perform a global search add a
'g' flag to this parameter and to perform a case-insensitive search
add an 'i' flagnewstringRequired.
Specifies the string to replace the found value from findstring.
In the following example we will replace the word Microsoft with
W3Schools:
<script type="text/javascript">var str="Visit
Microsoft!";document.write(str.replace(/Microsoft/,
"W3Schools"));</script>
The output of the code above will be:
Visit W3Schools!

Match method
<script type="text/javascript">
var str="Hello world!";
document.write(str.match("world") +
"<br />");
document.write(str.match("World") +
"<br/>");
document.write(str.match("worlld") +
"<br />");
document.write(str.match("world!"));
</script>
The output of the code above will be:
worldnullnullworld!

Split method
<script type="text/javascript">var
str="How are you doing today?";
document.write(str.split(" ") + "<br />");
document.write(str.split("") + "<br />");
document.write(str.split(" ",3));
</script>
The output of the code above will be:
How,are,you,doing,today?H,o,w, ,a,r,e,
,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?How,are,you

JavaScript String Object


The String object is used to manipulate a
stored piece of text.
Examples:
var txt="Hello world!";
document.write(txt.length);
var txt="Hello world!";
document.write(txt.toUpperCase());

JavaScript Array Object


The Array object is used to store multiple
values in a single variable.
Create an Array
An array can be defined in three ways.
1)
var myCars=new Array(); // regular array (add an optional integer
myCars[0]="Saab";
// argument to control array's size)
myCars[1]="Volvo";
myCars[2]="BMW";

2)
var myCars=new
Array("Saab","Volvo","BMW"); // condensed
array
3)
var myCars=["Saab","Volvo","BMW"]; //
literal array

Access an Array
document.write(myCars[0]);

Modify Values in an Array


myCars[0]="Opel";

Array Object
concat()

Joins two or more arrays and returns the


result

join()

Puts all the elements of an array into a


string. The elements are separated by a
specified delimiter

pop()

Removes and returns the last element of


an array

push()

Adds one or more elements to the end of


an array and returns the new length

reverse()

Reverses the order of the elements in an


array

shift()

Removes and returns the first element of


an array

slice()

Returns selected elements from an


existing array

Array Object
sort()

Sorts the elements of an array

splice()

Removes and adds new elements to an array

toSource Represents the source code of an object


()
toString( Converts an array to a string and returns the result
)
unshift()

Adds one or more elements to the beginning of an


array and returns the new length

valueOf(
)

Returns the primitive value of an Array object

Array Examples - concat


The concat() method is used to join two or more arrays.
This method does not change the existing arrays, it only
returns a copy of the joined arrays.
Syntax
arrayObject.concat(arrayX,arrayX,......,arrayX)
One or more array objects to be joined to an array.
Here we create two arrays and show them as one using
concat():
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "Jani";arr[1] = "Tove";arr[2] = "Hege";var arr2 =
new Array(3);arr2[0] = "John";arr2[1] = "Andy";arr2[2] =
"Wendy";
document.write(arr.concat(arr2));</script>

Join method
The join() method is used to put all the elements of an
array into a string.
The elements will be separated by a specified separator.
Syntax
arrayObject.join(separator)
Specifies the separator to be used.
we will create an array, and then put all the elements in a
string:
<script type="text/javascript">var arr = new
Array(3);arr[0] = "Jani";arr[1] = "Hege";arr[2] =
"Stale";document.write(arr.join() + "<br
/>");document.write(arr.join("."));</script>

The output of the code above will be:


Jani,Hege,StaleJani.Hege.Stale

Push method
The push() method adds one or more elements to the end of an
array and returns the new length.
Syntax
arrayObject.push(newelement1,newelement2,....,newelementX)
The first element to add to the arraynewelement2Optional. The
second element to add to the arraynewelementXOptional.
Several elements may be added.
In this example we will create an array, and then change the
length of it by adding a element:
<script type="text/javascript">var arr = new Array(3);arr[0] =
"Jani";arr[1] = "Hege";arr[2] = "Stale";document.write(arr +
"<br />");document.write(arr.push("Kai Jim") + "<br
/>");document.write(arr);</script>
The output of the code above will be:
Jani,Hege,Stale
Jani,Hege,Stale,Kai Jim

Slice method
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "Jani";arr[1] = "Hege";
arr[2] = "Stale";
document.write(arr + "<br />");
document.write(arr.slice(1) + "<br />");
document.write(arr);
</script>
The output of the code above will be:
Jani,Hege,Stale
Hege,Stale
Jani,Hege,Stale

Sorting
<script type="text/javascript">
var arr = new Array(6);
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";
arr[5] = "Tove";
document.write(arr + "<br />");
document.write(arr.sort());</script>

Splice method

The splice() method is used to remove and add new elements to an array.
Syntax
arrayObject.splice(index,howmany,element1,.....,elementX)
Specify where to add/remove elements.
Must be a numberhowmanyRequired
Specify how many elements should be removed. Must be a number, but
can be "0"element1Optional.
Specify a new element to add to the arrayelementXOptional. Several
elements can be added

In this example we will create an array and add an element to it:


<script type="text/javascript">var arr = new Array(5);arr[0] =
"Jani";arr[1] = "Hege";arr[2] = "Stale";arr[3] = "Kai Jim";arr[4] =
"Borge";document.write(arr + "<br />");arr.splice(2,0,"Lene");
document.write(arr + "<br />");</script>
The output of the code above will be:
Jani,Hege,Stale,Kai Jim,Borge
Jani,Hege,Lene,Stale,Kai Jim,Borge

Create an array and convert it into String

<script type="text/javascript">
var arr = new Array(3);
arr[0] = "Jani";arr[1] = "Hege";
arr[2] = "Stale";
document.write(arr.toString());
</script>
The output of the code above will be:
Jani,Hege,Stale

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

JavaScript Cookies
A cookie is often used to identify a user.
Create and Store a Cookie
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.toUTCString());
}

Using Cookies
Cookie
Data stored on users computer to maintain
information about client during and between
browser sessions
Can be accessed through cookie property
Set expiration date through expires property
Use escape function to convert nonalphanumeric characters to hexadecimal escape
sequences
unescape function converts hexadecimal escape
sequences back to English characters

cookie.html
1 of 4

cookie.html
2 of 4

cookie.html
3 of 4

74
75
76

<body>
<p>Click Refresh (or Reload) to run the script again</p>
</body>

77 </html>

cookie.html
4 of 4

Event Modeling

Event

Description

Keyboard events
onhelp
onkeydown
onkeypress
onkeyup
Marquee events
onbounce
onfinish
onstart
Mouse events
oncontextmenu
ondblclick
ondrag
ondragend
ondragenter
ondragleave
ondragover
ondragstart

Fires when the user initiates help (i.e., by pressing the F1 key).
Fires when the user pushes down a key.
Fires when the user presses a key.
Fires when the user ends a key press.
Fires when a scrolling marquee bounces back in the other
direction.
Fires when a marquee finishes its scrolling.
Fires when a marquee begins a new loop.

Fires when the context menu is shown (right-click).


Fires when the mouse is double clicked.
Fires during a mouse drag.
Fires when a mouse drag ends.
Fires when something is dragged onto an area.
Fires when something is dragged out of an area.
Fires when a drag is held over an area.
Fires when a mouse drag begins.
ondrop
Fires when a mouse button is released over a valid target
during a drag.
onmousedown
Fires when a mouse button is pressed down.
Fig. 14.10
Dynamic HTML events.

Event
onmouseup
Miscellaneous events
onafterprint
onbeforeeditfocus
onbeforeprint
onbeforeunload

Description
Fires when a mouse button is released.

Fires immediately after the document prints.


Fires before an element gains focus for editing.
Fires before a document is printed.
Fires before a document is unloaded (i.e., the window was closed or a link was
clicked).
onchange
Fires when a new choice is made in a select element, or when a text input is
changed and the element loses focus.
onfilterchange
Fires when a filter changes properties or finishes a transition (see Chapter 15,
Dynamic HTML: Filters and Transitions).
onlosecapture
Fires when the releaseCapture method is invoked.
onpropertychange
Fires when the property of an object is changed.
onreadystatechange Fires when the readyState property of an element
changes.
onreset
Fires when a form resets (i.e., the user clicks a reset button).
onresize
Fires when the size of an object changes (i.e., the user resizes a window or frame).
onscroll
Fires when a window or frame is scrolled.
onselect
Fires when a text selection begins (applies to input or
textarea).
onselectstart
Fires when the object is selected.
onstop
Fires when the user stops loading the object.
onunload
Fires when a page is about to unload.
Fig. 14.10
Dynamic HTML events.

onabort

Frequently used Events


Loading of an image is interrupted

onblur

An element loses focus

onchange

The user changes the content of a field

onclick

Mouse clicks an object

ondblclick

Mouse double-clicks an object

onerror

An error occurs when loading a document or an image

onfocus

An element gets focus

onkeydown

A keyboard key is pressed

onkeypress

A keyboard key is pressed or held down

onkeyup

A keyboard key is released

onload

A page or an image is finished loading

onmousedown

A mouse button is pressed

onmousemove

The mouse is moved

onmouseout

The mouse is moved off an element

onmouseover

The mouse is moved over an element

onmouseup

A mouse button is released

onreset

The reset button is clicked

onresize

A window or frame is resized

onselect

Text is selected

HTML Forms and JavaScript


JavaScript is very good at processing
user input in the web browser
HTML <form> elements receive input
Forms and form elements have
unique names
Each unique element can be identified
Uses JavaScript Document Object Model
(DOM)

Naming Form Elements in


HTML

<form name="addressform">
Name: <input name="yourname"><br />
Phone: <input name="phone"><br />
Email: <input name="email"><br />
</form>

Forms and JavaScript


document.formname.elementname.value
Thus:
document.addressform.yourname.value
document.addressform.phone.value
document.addressform.email.value

Using Form Data


Personalising an alert box

<form name="alertform">
Enter your name:
<input type="text" name="yourname">
<input type="button" value= "Go"
onClick="window.alert('Hello ' +
document.alertform.yourname.value);">
</form>

JavaScript Form Validation


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

Required Field Validation


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

E-mail Validation
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;}
}
}

JavaScript Animation
It is possible to use JavaScript to create
animated images.
The HTML code looks like this:
<a href="http://www.annauniv.edu"
target="_blank">
<img border="0" alt="Visit AnnaUniv!"
src="b_pink.gif" id="b1"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()" /></a>

The changing between the images is done with


the following JavaScript:
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="b_blue.gif";
}
function mouseOut()
{
document.getElementById("b1").src ="b_pink.gif";
}
</script>

JavaScript Timing Events


JavaScript can be executed in timeintervals.
This is called timing events.
The two key methods that are used are:
setTimeout() - executes a code some time in
the future
clearTimeout() - cancels the setTimeout()

The setTimeout() Method


Syntax
var t=setTimeout("javascript
statement",milliseconds);

The clearTimeout() Method


Syntax
clearTimeout(setTimeout_variable)

document Object
Method or Property
write( string )

Description
Writes the string to the XHTML document as
XHTML code.
Writes the string to the XHTML document as
writeln( string )
XHTML code and adds a newline character at
the end.
This property is a string containing the values
document.cookie
of all the cookies stored on the users computer
for the current document. See Section 12.9,
Using Cookies.
This property is the date and time that this
document.lastModified
document was last modified.
Fig. 12.12
Important document object methods and properties.

window Object
Provides methods for manipulating
browser window

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

4
5

<!-- Fig. 12.13: window.html

-->

<!-- Using the Window Object

-->

7
8

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

10 <title>Using the Window Object</title>


11

window.html
1 of 7

12 <script type = "text/javascript">


13

<!--

14

var childWindow; // variable to control the child window

15
16

function createChildWindow()

17

18

// these variables all contain either "yes" or "no"

19

// to enable or disable a feature in the child window

20

var toolBar // specify if toolbar will appear in child window

21

var menuBar; // specify if menubar will appear in child window

22

var location; // specify if address bar will appear in child window

23

var scrollBars; // specify if scrollbars will appear in child window

24

var status; // specify if status bar will appear in child window

25

var resizable; // specify if the child window will be resizable

26
27

// determine whether the Tool Bar checkbox is checked

28

if ( toolBarCheckBox.checked )

29
30
31

toolBar = "yes";
else
toolBar = "no";

32
33

// determine whether the Menu Bar checkbox is checked

34

if ( menuBarCheckBox.checked )

35
36
37

menuBar = "yes";
else
menuBar = "no";

38

window.html
2 of 7

39

// determine whether the Address Bar checkbox is checked

40

if ( locationCheckBox.checked )

41
42
43

location = "yes";
else
location = "no";

44
45

// determine whether the Scroll Bar checkbox is checked

46

if ( scrollBarsCheckBox.checked )

47
48
49
50

scrollBars = "yes";
else
scrollBars = "no";

51

// determine whether the Status Bar checkbox is checked

52

if ( statusCheckBox.checked )

53
54
55

status = "yes";
else
status = "no";

56
57

// determine whether the Resizable checkbox is checked

58

if ( resizableCheckBox.checked )

59
60
61

resizable = "yes";
else
resizable = "no";

62

window.html
3 of 7

63

// display window with selected features

64

childWindow = window.open( "", "", "resizable = " + resizable +

65

", toolbar = " + toolBar + ", menubar = " + menuBar +

66

", status = " + status + ", location = " + location +

67

", scrollbars = " + scrollBars );

68
69

// disable buttons

70

closeButton.disabled = false;

71

modifyButton.disabled = false;

72

getURLButton.disabled = false;

73

setURLButton.disabled = false;

74
75

} // end function createChildWindow

76

// insert text from the textbox into the child window

77

function modifyChildWindow()

78

79

if ( childWindow.closed )

80

alert( "You attempted to interact with a closed window" );

81

else

82
83

childWindow.document.write( textForChild.value );
} // end function modifyChildWindow

84
85

// close the child window

86

function closeChildWindow()

87

88
89
90
91

if ( childWindow.closed )

window.html
4 of 7

alert( "You attempted to interact with a closed window" );


else
childWindow.close();

92
93

closeButton.disabled = true;

94

modifyButton.disabled = true;

95

getURLButton.disabled = true;

96

setURLButton.disabled = true;

97
98

} // end function closeChildWindow

99

// copy the URL of the child window into the parent windows myChildURL

100

function getChildWindowURL()

101

102

if ( childWindow.closed )

103

alert( "You attempted to interact with a closed window" );

104

else

105
106

myChildURL.value = childWindow.location;
} // end function getChildWindowURL

107
108

// set the URL of the child window to the URL

109

// in the parent windows myChildURL

110

function setChildWindowURL()

111

112

window.html
5 of 7

if ( childWindow.closed )

113
114

alert( "You attempted to interact with a closed window" );


else

115

childWindow.location = myChildURL.value;

116

} // end function setChildWindowURL

117

//-->

118 </script>
119
120 </head>
121
122 <body>
123 <h1>Hello, This is the main window</h1>

124 <p>Please check the features to enable for the child window<br/>
125

<input id = "toolBarCheckBox" type = "checkbox" value = ""

126

checked = "checked" />

127

<label>Tool Bar</label>

128

<input id = "menuBarCheckBox" type = "checkbox" value = ""

129

checked = "checked" />

130

<label>Menu Bar</label>

131

<input id = "locationCheckBox" type = "checkbox" value = ""

132

checked = "checked" />

133

<label>Address Bar</label><br/>

134

window.html
6 of 7

<input id = "scrollBarsCheckBox" type = "checkbox" value = ""

135

checked = "checked" />

136

<label>Scroll Bars</label>

137

<input id = "statusCheckBox" type = "checkbox" value = ""

138

checked = "checked" />

139

<label>Status Bar</label>

140

<input id = "resizableCheckBox" type = "checkbox" value = ""

141

checked = "checked" />

142

<label>Resizable</label><br/></p>

143
144 <p>Please enter the text that you would like to display
145

in the child window<br/>

146

<input id = "textForChild" type = "text"

147

value = "<h1> Hello, I am a child window</h1> <br\>"/>

148

<input id = "createButton" type = "button"

149

value = "Create Child Window" onclick = "createChildWindow()" />

150

<input id= "modifyButton" type = "button" value = "Modify Child Window"

151
152
153

onclick = "modifyChildWindow()" disabled = "disabled"/>


<input id = "closeButton" type = "button" value = "Close Child Window"
onclick = "closeChildWindow()" disabled = "disabled"/></p>

154
155 <p>The other window's URL is: <br/>
156

<input id = "myChildURL" type = "text" value = "./"/>

157

<input id = "setURLButton" type = "button" value = "Set Child URL"

158
159
160

window.html
7 of 7

onclick = "setChildWindowURL()" disabled = "disabled"/>

<input id = "getURLButton" type = "button" value = "Get URL From Child"


onclick = "getChildWindowURL()" disabled = "disabled"/></p>

161
162 </body>
163 </html>

window Object
Method or Property
open( url, name, options )

Description
Creates a new window with the URL of the window set to
url, the name set to name, and the visible features set by
the string passed in as option.
Displays a dialog box asking the user for input. The text
prompt( prompt, default )
of the dialog is prompt, and the default value is set to
default.
Closes the current window and deletes its object from
close()
memory.
This method gives focus to the window (i.e., puts the
window.focus()
window in the foreground, on top of any other open
browser windows).
This property contains the document object representing
window.document
the document currently inside the window.
This property contains a boolean value that is set to true if
window.closed
the window is closed, and false if it is not.
This property contains the window object of the window
window.opener
that opened the current window, if such a window exists.
Fig. 12.14
Important window object methods and properties.

Final JavaScript Example


Combines concepts discussed
previously

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

4
5

<!-- Fig. 12.16: final.html

<!-- Putting It All Together -->

-->

7
8
9
10

<html xmlns = "http://www.w3.org/1999/xhtml">


<head>
<title>Putting It All Together</title>

11
12

final.html
1 of 6

<script type = "text/javascript">

13

<!--

14

var now = new Date(); // current date and time

15

var hour = now.getHours(); // current hour

16
17

// array with names of the images that will be randomly selected

18

var pictures =

19

[ "CPE", "EPT", "GPP", "GUI", "PERF", "PORT", "SEO" ];

20
21

// array with the quotes that will be randomly selected

22

var quotes = [ "Form ever follows function.<br/>" +

23

" Louis Henri Sullivan", "E pluribus unum." +

24

" (One composed of many.) <br/> Virgil", "Is it a" +

25

" world to hide virtues in?<br/> William Shakespeare" ];

26
27

// write the current date and time to the web page

28

document.write( "<p>" + now.toLocaleString() + "<br/></p>" );

29
30

// determine whether it is morning

31

if ( hour < 12 )

32

document.write( "<h2>Good Morning, " );

33

else

34

35

hour = hour - 12; // convert from 24 hour clock to PM time

36

final.html
2 of 6

37

// determine whether it is afternoon or evening

38

if ( hour < 6 )

39

document.write( "<h2>Good Afternoon, " );

40

else

41
42

document.write( "<h2>Good Evening, " );


}

43
44

// determine whether there is a cookie

45

if ( document.cookie )

46

47

// convert escape characters in the cookie string to their

48

// english notation

49

var myCookie = unescape( document.cookie );

50

51

// split the cookie into tokens using = as delimiter

52

var cookieTokens = myCookie.split( "=" );

53
54

// set name to the part of the cookie that follows the = sign

55

name = cookieTokens[ 1 ];

56

57

else

58

59

// if there was no cookie then ask the user to input a name

60

name = window.prompt( "Please enter your name", "GalAnt" );

final.html
3 of 6

61
62

// escape special characters in the name string

63

// and add name to the cookie

64

document.cookie = "name =" + escape( name );

65

66
67

// write the greeting to the page

68

document.writeln(

69

name + ", welcome to JavaScript programming!</h2>" );

70
71

// write the link for deleting the cookie to the page

72

document.writeln( "<a href = \" JavaScript:wrongPerson() \" > " +

73
74

"Click here if you are not " + name + "</a><br/>" );

75

// write the random image to the page

76

document.write ( "<img src = \"" +

77

pictures[ Math.floor( Math.random() * 7 ) ] +

78

".gif\" width= \" 105 \" height= \" 100 \" /> <br/>" );

79
80

// write the random quote to the page

81

document.write ( quotes[ Math.floor( Math.random() * 3 ) ] );

82
83

// create a window with all the quotes in it

84

function allQuotes()

85

final.html
4 of 6

86

// create the child window for the quotes

87

quoteWindow = window.open( "", "", "resizable=yes, toolbar" +

88

"=no, menubar=no, status=no, location=no," +

89

" scrollBars=yes" );

90

quoteWindow.document.write( "<p>" )

91
92

// loop through all quotes and write them in the new window

93

for ( var i = 0; i < quotes.length; i++ )

94
95
96

quoteWindow.document.write( ( i + 1 ) + ".) " +


quotes[ i ] + "<br/><br/>");

97

// write a close link to the new window

98

quoteWindow.document.write( "</p><br/><a href = \" " +

99

"JavaScript:window.close()\">" +

100

" Close this window </a>" )

101

102
103

// reset the document's cookie if wrong person

104

function wrongPerson()

105

106

// reset the cookie

107

document.cookie= "name=null;" +

108

final.html
5 of 6

" expires=Thu, 01-Jan-95 00:00:01 GMT";

109
110

// after removing the cookie reload the page to get a new name

111

location.reload();

112

113
114

// open a new window with the quiz2.html file in it

115

function openQuiz()

116

117

window.open( "quiz2.html", "", "resizable = yes, " +

118

"toolbar = no, menubar = no, status = no, " +

119

"location = no, scrollBars = no");

120
121

}
// -->

122

</script>

123
124

</head>

125
126
127

<body>
<p><a href = "JavaScript:allQuotes()">View all quotes</a></p>

128
129

<p id = "quizSpot">

130

<a href = "JavaScript:openQuiz()">Please take our quiz</a></p>

131
132

final.html
6 of 6

<script type = "text/javascript">

133

// variable that gets the last midification date and time

134

var modDate = new Date( document.lastModified );

135
136

// write the last modified date and time to the page

137

document.write ( "This page was last modified " +

138
139

modDate.toLocaleString() );
</script>

140
141

</body>

142 </html>

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

4
5

<!-- Fig. 12.14: quiz2.html -->

<!-- Online Quiz

-->

7
8

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

10 <title>Online Quiz</title>
11
12 <script type = "text/JavaScript">
13

<!--

14

function checkAnswers()

15

quiz2.html
1 of 3

16

// determine whether the answer is correct

17

if ( myQuiz.radiobutton[ 1 ].checked )

18
19
20
21

window.opener.quizSpot.innerText =
"Congratulations, your answer is correct";
else // if the answer is incorrect
window.opener.quizSpot.innerHTML = "Your answer is incorrect." +

22

" Please try again <br /> <a href= \" JavaScript:openQuiz()" +

23

" \" > Please take our quiz</a>";

24
25

window.opener.focus();

26

window.close();

27

} // end checkAnswers function

28

//-->

29 </script>
30
31 </head>
32
33 <body>
34
35
36
37
38
39

<form id = "myQuiz" action = "JavaScript:checkAnswers()">


<p>Select the name of the tip that goes with the image shown:<br />

quiz2.html
2 of 3

<img src = "EPT.gif" width = "108" height = "100"


alt = "mystery tip"/>
<br />

40

<input type = "radio" name = "radiobutton" value = "CPE" />

41

<label>Common Programming Error</label>

42
43

<input type = "radio" name = "radiobutton" value = "EPT" />

44

<label>Error-Prevention Tip</label>

45
46

<input type = "radio" name = "radiobutton" value = "PERF" />

47

<label>Performance Tip</label>

48
49

<input type = "radio" name = "radiobutton" value = "PORT" />

50

<label>Portability Tip</label><br />

51
52

<input type = "submit" name = "Submit" value = "Submit" />

53

<input type = "reset" name = "reset" value = "Reset" />

54

</p>

55

</form>

56 </body>
57 </html>

quiz2.html
3 of 3

THANK YOU

You might also like