EventsJavaScrip
advertisement
Execution Environment for JavaScript
"
"
Java Script Window object represents the window
in which the browser displays documents.
The Window object provides largest enclosing
referencing environment for scripts.
–
All javaScript variables are properties of some object
–
The Window properties are visible to all scripts in the
document --they are the globals.
–
Variables created by client-side script become (new)
property of Window
Window properties
"
"
"
Property document is a reference to the
JavaScript Document object that the window
displays
Property frames is an array of references to the
(may be multiple) frames of the document
Property forms is an array of references to the
forms in the document.
–
Each Form object has an elements array of references
to form's elements.
DOM Document Object Model
"
Provides specifications for portability for users to
write code in programming languages to create
documents, work on their structures, change, add,
or delete elements and their context
"
W3c development since early 90's
"
DOM 0 supported by JavaScript capableborwsers
"
DOM 1, Oct 98; focused on HTML and XML
"
DOM 2, Nov 00; support CSS, event, tree
manipulation events NS6 but not IE6
DOM
"
"
"
"
DOM documents have a treelike structure
DOM is abstract model defines interface between
HTML documents and application programs
DOM is an OO model -document elements are
objects with both data (properties) and operations
(methods)
Language supporting DOM must have binding to
the constructs
DOM
"
In JavaScript binding,
–
HTML elements -->objects
–
HTML element attributes --> properties
<input type = "text" name = " address>
would be represented as one object with two properties, type
and name, with the values "text" and "address"
"
For a description of tree traversal, adding and
deleting nodes go to in http://www.w3c.org
Element Access in JavaScript
"
DOM 0 uses forms and element arrays
<form action ="">
<input type = "button" name = "pushMe">
</form>
– DOM 0 address: documents.forms[0].element[0]
– Element names -- element and all ancestors to have name
attributes (but body)
<form name ="myForm" action= "">
<input type = "button" name = "pushMe">
</form>
– Element name address: documents.myForm.pushMe
Element Access in JavaScript
"
DOM 1 adrressing via JavaScript method:
getElementId
<form action ="">
<input type = "button" name = "pushMe">
</form>
– DOM address:
document.getElementId("pushme")
Events/Event Handling
"
HTML 4.0 provided standard --DOM 0
–
"
Supported by all browsers that include JavaScript
DOM 2 comprehensive event model
–
Supported by Mozilla and NS6 browsers
–
Not supported by IE6!!
Events/Event Handling
"
"
"
"
Event-driven: code executed resulting to user or
browser action
Event: a notification that soemthing specific
occurred -- by browser or user
Event handler: a script implicitly executed in
response to event occurrence
Registration: the process of connecting event
handler to event
Events/Event Handling JavaScript
"
Events are JavaScript objects --> names are case
sensitive, all use lowercase only.
(Method write should never be used in event handler.
May cause document to be written over.)
"
"
JavaScript events associated with HTML tag
attributes which can be used to connect to eventhandlers
Table 5.1 (pg 182)
Events/Event Handling JavaScript
"
One attribute can appear in several different tags:
–
"
"
e.g. onClick can be in <a> and <input>
HTML element get focus:
–
When user puts mouse cursor over it and presses the
left button
–
When user tabs to the element
–
By executing the focus method
–
Element get blurred when another element gets focus
Table 5.2 pg. 184-184
Event Handling JavaScript
"
Event handlers can be specified two ways
–
Assigning the event handler script to an event tag
attribute
onClick = "alert('Mouse click!');"
onClick = "myHandler();
–
Assigning them to properties of JavaScript object
associated with HTML elements
Event Handling JavaScript
"
"
The load event: the completion of loading of a
document by browser
The onload attribute of <body> used to specify
event handler:
http://www.ens.utulsa.edu/~class_diaz/cs2043/load.htmlT
"
he unload event: used to clean up things before a
document is unloaded.
Radio Buttons
<input type ="radio" name ="button_group" value = "blue"
onClick ="handler">
"
"
The checked property of radio button object is
true if the button is pressed
All button in the group have the same name, must
use DOM address element
var radioElement = document.myForm.elements;
Radio Buttons
for ( var inder = 0 ;
index < radioElement.length; index++){
if (radioElement[index].checked) {
element = radioElement[index].value;
break;
}
}
http://www.ens.utulsa.edu/~class_diaz/radio_click.html
Radio Buttons
"
Event handlers can be specified by assigning
them to properties of JavaScript object associated
with HTML elements
–
Property names are lowercase versions of attribute
names
–
For functions, assign its name to the property:
document.myForm.elemnts[0].onClick = myHandler;
"
"
Sets handler for first element of array
For radio button group, each element of array must be
assigned
Event Handling
"
Specifying handlers by assigning them to event
properties:
–
Disadvantage --can not use parameters
–
Advantages:
"
"
It is good to keep HTML and JavaScripts
separate
Handler could be changed during use
Checking Form Input
"
JavaScript commonly used to check form input
before it is sent to server for processing.
–
"
Check for: Format and Completeness
Approach:
–
Detect error and produce alert messge
–
Put elemnt in focus (focus function)
–
Select the element (select function)
Checking Form Input
"
The focus function puts the element in focus --the
cursor in the element
document.getElementById("phone").focus();
"
"
The select function highlights the text in the
element
After event handler is finished have it return false
to keep the form active
Neither slect nor focus are supported by NS 6.2
Checking Form Input/Examples
"
Comparing passwords:
–
The user is asked to type it twice
–
Program to very they are the same
–
The form has two password input boxes to get the
passwords, Reset, and Submit buttons
–
Event handler triggered by Submit
–
No passwd typed --> focus on box, return false
–
Two passwds typed-> not same focus and select first
box, rerurn false, else return true
http://www.ens.utulsa.edu/~class_diaz/cs2043/passwd_chk.html
Checking Form Input/Examples
"
Format check for name & tel. Num.
–
Event handler triggered by change event of text boxes
for name and phone number
–
When error is found, an alert message is produced
and both focus and select are called on the textbox
element in error
–
Another event handler will produce a thank you alert
when the input is ok.
http://www.ens.utulsa.edu/~class_diaz/cs2043/validator.html
DOM 2 Model
DOM 2 Event Model
"
Does not include DOM 0 features, but they are
still supported
"
Much more powerful than DOM 0
"
Events propagates
–
Node of document tree where event is created is the
target node
–
First phase is the capturing phase
–
Events begin at the root and move toward target node
DOM 2 Event Model
"
"
In the capturing phase, if there are any registered
handlers at nodes along the way, if one is enabled,
then it is run.
The second phase is at the target node.
–
"
If there are registered event handlers there for the
event, they are run
The third phase is bubbling phase
–
Event traverses back to the root. All encountered
registered handlers are run
DOM 2 Event Model
"
"
"
"
Not all events bubble
Any handler can stop propagation by calling
Event object method stopPropagation
To stop default operations call Event object
method preventDefault
Event handler with addEventListerner method
–
Name of event as literal string, handler function,
and boolean value to specify if event is enabled
during capturing
DOM 2 Event Model
"
"
"
A temporary handler can be created by registering
it and then unregistering it with remove
EventListener
The currentTarget property of Events always
references the object on which the handler is
being executed.
The MouseEvent object (subobject of Event) has
two properties: clientX, clientY, the (x,y)
coordinates of mouse cursor relative to upper left
corner
validator2.html
The navigator Object
"
Indicates which browser is being used.
"
Two useful properties:
–
The appName property has the bowser's name
–
The appVersion has the version number
navigator.html
