Scribd
Upload
58 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
58 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
We take content rights seriously. If you suspect this is your content, claim it here.
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