Java Scriptobject Event 2

Tebmndegr amiDesig web document.
Javascni
document
98 Wed
the user
and the
between
relationship that
event is a
to
handle
an m e c h a n i s m
In general events
and a
s e t of
tines the
properties. The nro
propenie
5.5.1 Event Object hence with
some
and
e v e n t as
an object the event.
every about
considers (details)
information
Javascript the
contains
the event object properties.
events and the
illustrates s o m e
Table 5.5.I
and Their Properties
Some Events
Table 5.5.1
Property
Enen X Y co-ordinate
of the point ofclick with reference
left buton of the
mouse.
The user cicks the to the screen
ASCII value of the key pressed.
The wser presses a keg
recognized by Javascript. Notice that the events spe are

Table 55.2 shows a list of events
the symbol NS and IE to denote if they are recognized by Nete
to the browser So. we use
and Internet Expiorer.
Table 5.5.2 Events Supported by Javascript
Propernie
Evem IE Targe
NS
Abort NS image The user aborts the loading of the
IE image by clicking another link or
the stop button
Blur IE windo User removes input focus fromn
NS frame Window frame or form Type
all form elements
Click NS button The user cicks with the left Target
E radio button button of the mouse Type
check box Clhent
submit buttoe Chent

reset button S r c E k n
li
Change t n field
User changes value of ficid Targe
Typ
select list Chenc
Cient
DbiClick SrcE
documen
The user double clicks with Targ
eft butnon of mouse Typ
Objects and Even1s 99
Table 5.5.2 (Contd.

IE Target
Event
NS
Cause Properties
link
ClientX
ClientY
SrcElement
NS window The user drags and drops a file on
DragDrop
to the browser
NS image Attempt to load a document or Returm value
Error
IE Window image causes an erTor SrcElement
link Type
object
script
style ClientX
The user brings input focus to the
NS window
Focus ClientY
IE frame target Return value
all form elements ScreenX
ScreenY
SrcElement
Type
The user hits F1
NS window
Help Key Return value
IE The user initiates a key press
document X.Y
IE
KeyDown ClientX
NS image ClientY
link ScreenX
textarea ScreenY
Returm value
continues pressing a key
The user X.Y
document ClientX
KeyPress IE
image ClientY
NS
ScreenX
link
ScreenY
textarea
Return value
key press
user
releases X.Y
The
ClientX
document
KeyUp IE ClientY
NS image ScreenX
link ScreenY
textarea Returm value
into the browser X.Y

completes
The pages ClientX
document ClientY
Load IE ScreenX
applet
NS Contd.)
embed
frame set
img
100 Web Technology and
Desig
Table 5.5.2 (Contd.)
5
Event IE Target Cause Properties
NS A
ScreenY lo
link
me
SCrnpt
style
window
User initially depresses mouse Return value
MouseDow IE button
button(left or right) X,Y
NS document
link Clientx
ClientY
ScreenX
ScreenY
MouseMove IE window The mouse is moved Return value
NS document X,Y
ClientX
ClientY
ScreenX
SereenY
MouseOut IE area Mouse is moved out of focus Return value
NS layer X.Y
link ClientX
ClientY
ScreenX
ScreenY
MouseOver IE area User moves mouse pointer over Return value
NS layer a target element X,Y
link ClientX
ClientY
ScreenX
ScreenY
MouseUp IE User releases the
NS
mouse
key(either)
after press
Reset NS form User resets a form
IE
Resize NS window The frame or window is
IE frame
Select resized
NS text
User selects/
IE textarea
highlights the text
htmlarea
Submit NS form
IE
User submits a form
Unload NS document The
IE user exits to a different page
frameset
image
window
Objects and Events 101
Double Click (dblclick Event
5.5.2
A blclick event occurs when the user

event
AdD mple. an alert message is throwndouble clicks the left button of the
lowing example,.
when the user mouse. In the fol
double clicks
ment.
anywhere in the docu-
<html>
ah Technology book by Dr.

C.
Th is is a sampie page to Xavier<br>
Doinble click in the
1llustrate Double click
document </h5> event.<br><br»
</body>
Ondblclick="alert('Hi. .You have done
a Double Click') ">
</html>
The output is shown in Figure 5.18.
Cwe chnologydblclick.htmi-Microsoft Internet Expilorer Lwosking Hfinel

File Ed View Favortes Tools Help
Seerch FevoritesHstory W 7
Addressejc:webtechnologyldblclick.html DAP
Web Technology book by Dr. C. Kavier
This is a sample page to ilhustrate Deuble click ef mouse.
Double click in the document

Microsoft Internet Explorer
H..You have done a Double Click
MyComputer
Done Click Event
Double
5.18
Figure
5.5.3 OnHelp Event us see

an example to
illustrate
Let
the Fl key.
A Onhelp presses
when the
user
occurs
this. C
<html>
</h4>
X a v i e r < b r >
C.
h4 >Web Technology book by Dr.
O l o g y
Design k e
Technolog)y
and press
Press Fl
F1 key for
.
Web
102 onHelp.
te
page
to 1 I Iu s t r a
is a sampl e
This
<h5
<br<br> </h5
</h5»
i -MB n
<body> code
the city " C i t y c o d e "
\n Mumba )">
<h5 Type type-"text
" name=
-CH \n
D e l h i - D L
Chennai
input "Citycode
"alert (
onHelp-
body>
html>
5.19.
shown in Figure
The output is
[WorkingOffinel
help.html-
Microsoft InternetExplorer
Cwebtechnology
Mew Favorites Tools Help
Fle Edt
Search Favorites
History w
Back
0 DAP
Address C:webtechnology\help.html
Web Technology book by Dr. C. Xavier
This is a sample page to illustrate OnHelp... Press Fl key for help
Type the city code

Microsoft Internet Explorer X
Citycode Chennal-CH
A Delhi-DL
Mumbal-MMB
5.5
Done AK
My Computer this
Figure 5.19 On
HelpEvent
5.5.4 Key Press Event
A keypress event
lustrate this event. occurs when the user continues pressing a key. ple t
Let us see
<html>
a
<h4>web
Technology book by Dr.
C.
Xavier<br> T
<h5: This is a
sample page to
illustrate
Press a key 1n the document </h5> Keypress.<br><br>
ndy onkeypress= " alert("Hi. .you have
</body> pressed a
Key') "
/html»
ewebtechnology key.htmi-Microso Tnternet Explorer IWorking

Fle Edt e Favorites Touis Help
OTline
Back
Search Favorites Hstory W
Address C:webtechnologylkey.htm
o 0AP
This is a sample page to illustrate Keypress.

Press a key in the document
Hi.you have pressed a Key
OK
e Done My
Computer
Figure 5.20 Key Press Event
5.5.5 KeyUp Event

The example shown below illustrates
A
KeyUp event occurs when the user releases a keypress.
this event.
<html> Xavier<br>
Dr. C.
4>Web Technology book by Up.<br><br>
illustrate Key
page to
is a sample </h5>
nis in the document
release it
*ess any key and
have done KeyUp event') "
.You
onKeyUp="alert ( 'Hi..
</body>
</html>
104 Web Technology and Design
[wko Ofmine
Explorer
webtechnology keyup ht MiKrovoft Indevet
Ple Ede Vie Favorites ools Help
Back Search Favortes Hstory W

Address e)cwebtechnologylkeyup Mm
This is a sample page to illustrate Key Up.
Press any key and rele ase it in the document
Microsolt Internet Explorer

H...You have done KeyUp event
OKOK
e] Done
My Computer
Figure 5.21 Key Up Event
5.5.6 Key Down Event
A KeyDown event occurs when the user initiates a key press. An example is shown e
<html>
<h4 Web Technology book by Dr. C. Xavier<br>
<h5> This is a
sample page to illustrate Key Down. <br><br>
Press any key in the
document </h5>
<body onKeyDown=
"alert('Hi. . .You have done Key Down Event >
</body
</html>
The output is shown in

Figure 5.22.
Ohjects and Events 105
Cwebtechnole keydow Microsof Internet
Fle Edit Viee Favotices Tools Hep Explorer-(Working (ffline]
Back
Search Favortes
Address C:webtechnologytkeydown.htm History W
DAP
This is a sage page to ilustrate Key Down.
Press axy key in the document
A HYou heve done Key Down Event
3D y Computer
Figure 5.22 Key Down Event
5.5.7 Change Event
occurs. So, we can call the
he user selects item from a Select Box, a change event
an
even handler in the select box definition.

The definition of select box will appear as
ange
illustrated below:
select name onChange **
rewrite the HTML document given in telephone

directory example in section 5.4.4 to il-
"
lustrate the change event.
Number" and the phone number was
n a button "Get
dioe HTML page in section 5.4.4 we had onClick event handler. How.
button. So, we used the
when the user clicks the
d can only the button. When the
user selects a name,
ever we functionality
without
al
accomplish the same
T06 Web Technology and Design
event h a n d l e r in the selecs
call the
onChange
box xf
So, we can
occurs,
4 Change event
as follows:
definition of select box will appear form)
onChange getNumber (this,
nameBox
select name
document is shown below:

The revised HTML
<html>
<head»
<title>Telephone Directory</title
</head»
<body»
<sCript»
var i, f,phone;
function getnumber (f)
phone=new Array (6184723,7284131,4214852, 4718912,5151082,

6272852,2343842,6262719,8432233,8187235)
i=f.nameBox.selectedIndex;
f.PhoneNumber. value=phone [ il
</SCript»
<form name=telephone form>
pre>
<center>
<hr>
<h2> TELEPHONE DIRECTORY </h2>
pre>
<center><hr>
<br>
select the name to get the Telephone number
<br>
NAME: <select name=nameBox
<option>Aparna</opti on» onChange=getnumber ( this.form)>
<option>Nithya</option»
<option>Priya</option»
<option>Sandhya</option>
<option>Shruthi</option>
<option>Sumathi</option>
<option»Gowri</option»
option>Kr ithika</options
option>Rekha</option>
<Option>Reena</option>
seleCt>
DHONE NUMBER <input type=
textt name-=
<br><br><hr><br><br> PhoneNumber>cbr>
</torm>
</body>
</html>
telephone chanMictosoft tnterhet Etlore

EleEd e Favortes Iools Help
Back Foward Stop Refresh Home Search Favorites History Mail Primt
Addressl Prof2\cwebtechnology\telephone chan.htm
MCGo Links
TELEPHONE DIRECTORY
select the name to get the Telephone number
NAME :Aparna
PHONE NUMBER :6184723
Local intranet
Figure 5.23 Change Event
5.5.8 Focus Method

desired object in the form. In the
fol-
The Cthod focus() focus to the
used to set the
cursor
is or city text field depend-
Account text field
on the
lowing
in example the method is used to focus
ing on the selection. field

the focus is set to Name
Name search button
In the user clicks the
document once
,s searcn.
d r l y it is done for Account search and City
108 Web Technology and Dess
below:
The HTML document is given
<html>
<head ">
text/javascript
S C r i p t type= "
function setnamefocus ()
.namefield. focus ()
document.forms [0]
function setaccountfocus ()
. a c c o u n t f i e l d . f o c u s ()
document.forms [0]
function setcityfocus ()
document.forms [01.cityfield. focus ()
</script»
</head>
<body»
<h2>This form illustrates the focus on an object</h2>
<form>
Name .
<input type= "
text" name= "namefield" size="30">
<br»
Account Number. .<input type= " text" name=
<br>
"accountfield" size="10">
City 1nput type= "text" name=
<br» "cityfield" size="10
<input type="button" value= "Name Search"
<input type="button" value= onclick=" setnamefocus
" Account Search"
<input type="button" onclick= setaccourL "
</ form>>
value= "City Search" onclick=" () *>
setcityfOCus
</body>
</html>

Figure 5.24.
avier
File Edit
vascript'FocusFocus.html-Microsoft
View Favorites Tools
Help
Internet Explorer
O
Search FavortesHistory
Address] D:\Xavier\JavaScript\Focus\Focus.htmi
soLinks
This form illustrates the focus on an object
Name
Account Number.|
City
Neme Search Account Search City Search
Done My Computer
Figure 5.24 Focus Method
5.5.9 The Select() Method
eselect() method is used to select the text in a text field. This example illustrates the select
box and a submit button. The text box is
Cus on an object.In this document we have a text button the setfocus () function
edto St.Xavier's College .On clicking the 'Enter College' focus to it.
also sets
.Ihis function selects the value of text box and
The HTML document is given below:
head
<Cript type-" ext/javascript ">
r.ction setfocus )
ment.form [0] .college.select ()

t.forms [0] .college.focus ()
lscript>
</'head
of the college</h2
h2>Please
name
the
then type
button and
**CR Ehe
I10 Wed TeckmologY ani Iksig
o-s0 st.Xavier's Colleg
Xaviere
V a l u e -" S t .
nput type: Nt
nama"°o)lege
oncli ck-"set tocus () "
Oiege
*button"
value *Ent o
YDe-
orm>
body
htmi
Figure 5.25.
\JavaScript\Focus\Select.html-Microsoft Internet
Explorer O
D:Xavier
View Favorites Tools Help
a Search Favorites History L 4
dress E) D:}Wavier\Javaacript\Focus\Select.html GoUnks
Please click the button and then type the
name of the college
StXavier's Collegee Enter College
e Done
My Computer
Figure 5.25 Select Method
5.6 Browser Object
Javascript has the

capability to identify the properties of the browser e ill
trates theretrieval of browser details like object. This exan
Browser name, Browser version,
The HTML document is Platror
given below:
<html>
<boûy>
<Script type= "
text/javascript">
document.write("<h3 >Hi
h3><br>")
Dear user, Here are your
Drowser detalls
document.write("BROWSER: " )
document.wrlte (navigator.appName +"<br»")
document.write ( "BROWSERVERSION: ")
Ohjects and Events 111
document.
t.write
navigator.appVersion +
"<br»")
document.write( "CODE: "
cument. write (navigator.appCodeName
document.write("PLATFORM:
"<br>")
ament.write (navigator. platform " <br>") +
document.write( "REFERRER: "

document.write(document.referer +"<br>" )
document.write("SCREEN RESOLUTION: "
document.write ( screen.width + « *")
document.write (screen.height + "<br>")
document.write("AVAILABLE VIEW AREA: ")
document.write (window.screen.availwidth + "*")
document.write (window.screen.availHeight +"<br>")
document.write ("COLOR DEPTH: ")
document.write (window.screen.colorDepth * "<br>")
</Script»
</body>
</html>
JavaScript\0bjects\BrowserObject.html- Microsoft
Internet Explorer
D:Xavier\
File Edit View Favorites Tools Help
Back Search Favorites History

Links
ddress D:Xavier\JavaScript\Objects\BrowserObject.
= html
details
Dear user, Here are your browser
BROWSER: MicrosoftInternet Explorer MSTE 5.01; Windows NT 5.0; NET CLR

illus wSERVERSION: 4.0 (compatible;
1.0.2914)
CODE Mozilla
PLATFORM Win32
REFERRER: undefined g00*600
SCREEN RESOLUTION 800*600
AVAILABLE VIEW AREA: 800*572
COLOR DEPTH: 24 MyComputer
Done
Browser Object
Figure 5.26
and Design
Web Technology
112
Validation
and Data
5.7 Submit Event
button is pressed. In this
illustrates Data
validation when
the submit
The three Text

boxes Email-id,
are Age and e
ail-id, Age and Name
cumenm
This example Submit button.
and a should be greater than and l
an one and
have 3 Text boxes les
box has to contain
symbol, Age
Email-iddoes not
does contthan
email-id Text
shouldn't exceed 10
Characters. If the not
contain @
150 and Name and Name the corresponding alert
equal
bol an
to
alert messageis fired .Similarly for Age message

fired.
given below:
The HTML document is
<html>»
<head
<Script type="text/javascript">
function validate ()
indexin=document.resume.email.value.indexof ( "e")
agein=document. resume.age.value
namein=document.resume.namel0.value
if (indexin==-1)
alert(*The Email id entered is invalid")

return false
if (agein«1 1I agein>150)
alert("The age is not entered correctly. Please reenter. ")

return false
if (namein. length>10)
alert( "The maximum length allowed for Name is

10. Please reen
er.
return false
return true
</script>
</head
cbody>
<h4»
This form is designed to illustrate data in
Javascript by C.Xavier
validation practices
</h4>
farm name= "esume onsubmit-" ret:
validate()*s
<h5>
Enter your e-mail:
<input type="text" name= "emai1">

<br»
Enter your Age:
<input type="text" name="age">
<br>
Enter your first name, max 10 letters:
<input type=" text" name="name10">
<br>
<input type="submit" value="Proceed..":

form>
</body>
</html>
The output is shown in Figure 5.27
D:Xavier\JavaScript StringNamevalidation.htd Microsoft nte..

File Edit View Favorites ToolsHelp
PBack Search Favorites History
Address D:1Xavier\JavaScriptiStringNamevalidation.html G o |Links
This form is designed to illustrate data validation practices in

Javascript by C.Xavier
Enter youre-mail: Cxavier
Enter your Age: Microsoft Internet Explorer
Enter your first nam max 10 letters:|

Proceed A TheEmail id enteredisinvalid
3Done on
My Computer
Submit
Data Validation
Figure 5.27
114 web Technology and Design
Exercises
in exercise 3.1, include the Javascript to validat idate the data
5.1 In the form mentioned
follows:
Name should have 25 characters and it doesn t have any numbers or specialchet
ters
Address should have 200 characters.

Credit card number is a 16-digit integer.
5.2 In the form mentioned in exercise 3.2, include a Java script to validate the date -
month for example, September 31 is invalid?
5.3 In the form mentioned in exercise 3.3, include suitable data validation
5.4 In the form mentioned in exercise 3.4, to reserve the railway ticket add the following da
validations using Javascript
From city and To city are two different cities
Age of passengers should not be greater than 100
Name of the passenger should be
String (no numeric digits) of maximum length
5.5 In the form
explained in exercise 3.5, include the
following data
Javascript. validations
The register number should be a 9-digit number.
in
an

Java Scriptobject Event 2

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Java Scriptobject Event 2

Uploaded by

Copyright:

Available Formats

Tebmndegr amiDesig web document.

properties. The nro

recognized by Javascript. Notice that the events spe are

and Internet Expiorer.

Table 5.5.2 Events Supported by Javascript

submit buttoe Chent

Table 5.5.2 (Contd.

textarea Returm value

into the browser X.Y

A blclick event occurs when the user

ah Technology book by Dr.

The output is shown in Figure 5.18.

Cwe chnologydblclick.htmi-Microsoft Internet Expilorer Lwosking Hfinel

This is a sample page to ilhustrate Deuble click ef mouse.

Double click in the document

H..You have done a Double Click

5.5.3 OnHelp Event us see

Web Technology book by Dr. C. Xavier

This is a sample page to illustrate OnHelp... Press Fl key for help

Type the city code

The output is shown in Figure 5.20.

ewebtechnology key.htmi-Microso Tnternet Explorer IWorking

This is a sample page to illustrate Keypress.

5.5.5 KeyUp Event

Back Search Favortes Hstory W

Web Technology book by Dr. C. Xavier

This is a sample page to illustrate Key Up.

Press any key and rele ase it in the document

Microsolt Internet Explorer

The output is shown in

A HYou heve done Key Down Event

even handler in the select box definition.

rewrite the HTML document given in telephone

document is shown below:

phone=new Array (6184723,7284131,4214852, 4718912,5151082,

The output is shown in Figure 5.23.

telephone chanMictosoft tnterhet Etlore

select the name to get the Telephone number

Figure 5.23 Change Event

5.5.8 Focus Method

ing on the selection. field

document.forms [01.cityfield. focus ()

The output is shown in

5.5.9 The Select() Method

ment.form [0] .college.select ()

Javascript has the

ament.write (navigator. platform " <br>") +

document.write( "REFERRER: "

Back Search Favorites History

BROWSER: MicrosoftInternet Explorer MSTE 5.01; Windows NT 5.0; NET CLR

The three Text

alert messageis fired .Similarly for Age message

alert(*The Email id entered is invalid")

alert("The age is not entered correctly. Please reenter. ")

alert( "The maximum length allowed for Name is

<input type="text" name= "emai1">

<input type="submit" value="Proceed..":

The output is shown in Figure 5.27

D:Xavier\JavaScript StringNamevalidation.htd Microsoft nte..

This form is designed to illustrate data validation practices in

Enter your first nam max 10 letters:|

Address should have 200 characters.