Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
14 views

Java Scriptobject Event 2

The document discusses events in JavaScript and how they allow handling interactions between the user and web pages. It defines an event as a mechanism to handle an action, lists some common events like click, change, and keypress, and notes that event objects in JavaScript contain properties with information about the event. Tables are provided showing examples of events and their associated properties.

Uploaded by

Namrita Kanoujiya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Java Scriptobject Event 2

The document discusses events in JavaScript and how they allow handling interactions between the user and web pages. It defines an event as a mechanism to handle an action, lists some common events like click, change, and keypress, and notes that event objects in JavaScript contain properties with information about the event. Tables are provided showing examples of events and their associated properties.

Uploaded by

Namrita Kanoujiya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

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
Objects and Events 103
<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»

The output is shown in Figure 5.20.

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
Web Technology book by Dr. C. Xavier

This is a sample page to illustrate Keypress.


Press a key in the document
Microsoft Internet Explorer
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>
The output is shown in Figure 5.21.
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

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


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
Web Technology book by Dr. C. Xavier
This is a sage page to ilustrate Key Down.
Press axy key in the document
Microsoft Internet Explorer

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>
Objects and Events 107
DHONE NUMBER <input type=
textt name-=
<br><br><hr><br><br> PhoneNumber>cbr>
</torm>

</body>
</html>

The output is shown in Figure 5.23.

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>

The output is shown in


Figure 5.24.
Objects and Events 109

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.
The output is shown in

\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>
The output is shown in Figure 5.26.

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>
Objects and Events 113
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

You might also like