Scribd
Upload
41 views

Tutorial 6 JS

Here are the answers to the practice questions: 1. The output would be undefined. When delete is used to remove a property from an object, it removes the property but does not redefine it as undefined. So lorem.ipsum would return undefined after being deleted. 2. Here is a JavaScript program to count and display the items of a dropdown list in an alert window: ```js function countDropdown() { var dropdown = document.getElementById("dropdown"); var length = dropdown.length; alert("Dropdown has " + length + " items"); } ``` 3. Here is a JavaScript program using nested for loops to print the elements of the given 2D array:

Uploaded by

victor
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
41 views

Tutorial 6 JS

Here are the answers to the practice questions: 1. The output would be undefined. When delete is used to remove a property from an object, it removes the property but does not redefine it as undefined. So lorem.ipsum would return undefined after being deleted. 2. Here is a JavaScript program to count and display the items of a dropdown list in an alert window: ```js function countDropdown() { var dropdown = document.getElementById("dropdown"); var length = dropdown.length; alert("Dropdown has " + length + " items"); } ``` 3. Here is a JavaScript program using nested for loops to print the elements of the given 2D array:

Uploaded by

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

Javascript Tutorial

• DOM/Event
Handlers.
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“.
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 event-
handlers.
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.
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;
}
}
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 select 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
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.
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
Practice Question
Ques 1. Determine the output of the code below. Explain your answer.
A
var lorem = { ipsum : 1};
var output = (function()
{
delete lorem.ipsum;
return lorem.ipsum;
})();
console.log(output);

Ques 2. Write a JavaScript program to count and display the items of a dropdown list,
in an alert window.

Ques 3. Write a JavaScript program which prints the elements of the following array.
Note : Use nested for loops.
Sample array : var a = [[1, 2, 1, 24], [8, 11, 9, 4], [7, 0, 7, 27], [7, 4, 28, 14], [3, 10, 26, 7]];
Sample Output :
"row 0"
" 1"
" 2"
" 1"
" 24"
"row 1"

You might also like