web technologies- html

Ohud92

IT230_Modified_Chapter5_Week6.ppt

Home >Computer Science homework help >web technologies- html

Chapter 5
Host Objects:
Browsers and the DOM

WEB TECHNOLOGIES

A COMPUTER SCIENCE PERSPECTIVE
JEFFREY C. JACKSON

Overview

The Document Object Model (DOM) is an API that allows programs to interact with HTML (or XML) documents
In typical browsers, the JavaScript version of the API is provided via the document host object
W3C recommendations define standard DOM
Several other browser host objects are informal, standards
alert, prompt are examples
Many others are covered in this chapter

DOM Introduction

Example: “Rollover” effect

Cursor not over image

Image changes when cursor

moves over

DOM Introduction

Import

JavaScript

code

DOM Introduction

Calls to JavaScript

show() function when

mouse moves over/away

from image

DOM Introduction

Notice that id of image is first argument to show()

DOM Introduction

DOM method returning Object

DOM Introduction

Returns instance

of Element

(DOM-defined

host object)

representing

HTML element

with given id

DOM Introduction

Some properties of

Element instance

correspond

to attributes of

HTML element

DOM Introduction

Method inherited by Element instances

for setting value of an attribute

DOM Introduction

Effect: src attribute of HTML element with

specified eltId is changed to specified URL

DOM Introduction

Image src changed to

CFP22.png when mouse

is over image,

CFP2.png when leaves

Intrinsic Event Handling

An event is an occurrence of something potentially interesting to a script:
Ex: mouseover and mouseout events
An HTML intrinsic event attribute is used to specify a script to be called when an event occurs
Ex: onmouseover
Name of attribute is on followed by event name

Intrinsic Event Handling

Modifying Element Style

Change

background color

of element

containing cursor

Modifying Element Style

Like rollover, style needs to be modified

both when entering and exiting the element.

Modifying Element Style

Reference to Element instance

representing the td element

Modifying Element Style

Reference to Element instance

Modifying Element Style

All Element instances have a style property

with an Object value

Modifying Element Style

Properties of style object

correspond to CSS style properties of

the corresponding HTML element.

Modifying Element Style

Rules for forming style property names from names of CSS style properties:
If the CSS property name contains no hyphens, then the style object’s property name is the same
Ex: color color
Otherwise, all hyphens are removed and the letters that immediately followed hyphens are capitalized
Ex: background-color backgroundColor

Modifying Element Style

Net effect: “silver” becomes the specified value for

CSS background-color property of td element;

browser immediately modifies the window.

Modifying Element Style

Alternate syntax (not supported in IE6):

Every DOM2-compliant style object

has a setProperty() method

Modifying Element Style

Alternate syntax (not supported in IE6):

CSS property

name

(unmodified)

CSS property

value

Empty string

“important”

Modifying Element Style

Obtaining specified CSS property value:

Alternate DOM2 syntax (not supported by IE6):

Document Tree

Recall that HTML document elements form a tree structure, e.g.,

DOM allows scripts to access and modify the document tree

Document Tree: Node

There are many types of nodes in the DOM document tree, representing elements, text, comments, the document type declaration, etc.
Every Object in the DOM document tree has properties and methods defined by the Node host object

Document Tree: Node

Example HTML document

Function we will write that will

use Node methods and properties

to produce string representing

Element tree

Document Tree: Node

String produced by TreeOutline():

Document Tree: HTML Properties

Attribute values can be set two ways:

As with CSS properties, former has some advantages:
Makes clear that setting an HTML attribute, not merely a property of an object
Avoids certain special cases, e.g.
element.setAttribute(“class”, “warning”); //DOM
element.className = “warning”; //req’d in IE6

class is reserved word in JavaScript

DOM Event Handling

Note: IE6 has a different event model
Event instance created for each event
Event instance properties:
type: name of event (click, mouseover, etc.)
target: Node corresponding to document element that generated the event (e.g., button element for click, img for mouseover). This is the event target.

DOM Event Handling

JavaScript event listener: function that is called with Event instance when a certain event occurs
An event listener is associated with a target element by calling addEventListener() on the element

DOM Event Handling

Event

target

DOM Event Handling

Event type

DOM Event Handling

DOM event types:
All HTML intrinsic events except keypress, keydown, keyup, and dblclick
Also has some others that are typically targeted at the window object:

DOM Event Handling

Event handler

Definition

of event

handler

DOM Event Handling

Event instance

DOM Event Handling

Normally false

(more later)

DOM Event Handling

DOM Event Handling:
Mouse Events

DOM2 mouse events
click
mousedown
mouseup
mousemove
mouseover
mouseout
Event instances have additional properties for mouse events

DOM Event Handling:
Mouse Events

Example: mouse “trail”

DOM Event Handling:
Mouse Events

HTML document:

JavaScript init() function:

Create

“blips”

Add event

listener

String uniquely

identifying this div

DOM Event Handling:
Mouse Events

Style sheet for “blips”:

Initially, not displayed

DOM Event Handling:
Mouse Events

Event handler updateDivs():

Convert mouse location

from Number to String

and append units

DOM Event Handling:
Mouse Events

Event handler updateDivs():

Mod (remainder) operator

used to cycle through “blip” divs

(least-recently changed is the

next div moved)

Example: Drop-down Menus

When cursor

moves over

upper menu

…

Example: Drop-down Menus

…

a drop-down

appears

Example: Drop-down Menus

Background color changes
as cursor moves over
drop-down items

Example: Drop-down Menus

Drop-down

disappears

when cursor

leaves both

drop-down

and menu

Example: Drop-down Menus

Document structure:

Example: Drop-down Menus

Document structure:

Event handlers will be added by

JavaScript code

Example: Drop-down Menus

Document structure:

Top menu

is a table

Example: Drop-down Menus

Document structure:

Each top

menu item is

a (positioned)

div

CSS:

Example: Drop-down Menus

Document structure:

Associated

drop-down is

in a div

that is

out of the normal

flow and initially

invisible

CSS:

Example: Drop-down Menus

Document structure:

Associated

drop-down is

a table

Example: Drop-down Menus

Full style rules:

Example: Drop-down Menus

Full style rules:

Top menu item div

is “positioned” but

not moved from normal

flow location

Example: Drop-down Menus

Full style rules:

Upper left corner of

drop-down div overlaps

bottom border of top

Example: Drop-down Menus

Full style rules:

Drop-down drawn over

lower z-index elements

Example: Drop-down Menus

Adding event handlers to top menu:
Document:

JavaScript addEventHandlers():

Target

event

handlers

Example: Drop-down Menus

Adding event handlers to top menu:
Document:

JavaScript addEventListener():

menuBar1 will be target of events; adding reference to the drop-down

div makes it easy for event handler to access the drop-down

Example: Drop-down Menus

Basic

processing:

change

visibility of

drop-down

Example: Drop-down Menus

Ignore

bubbling

mouseover

events from

drop-down

Example: Drop-down Menus

Ignore

mouseout

event if

cursor is

remaining

over menu

item or

drop-down

(self or

descendant)

Example: Drop-down Menus

Adding event handlers to drop-down:
Document:

JavaScript addEventListener():

Example: Drop-down Menus

Don’t

bother

changing

style if

this event

bubbled

from a

descendant.

Example: Drop-down Menus

Don’t bubble up to showDropDown since

the drop-down must be visible

Example: Drop-down Menus

Ignore

mouseout to

a descendant

DOM Event Cancellation

Browser provides default event listener for certain elements and events
Ex: click on hyperlink
Ex: click on submit button
Default listeners are called after all user-specified listeners
stopPropagation() does not affect default listeners
Instead, call preventDefault() on Event instance to cancel default event handling

DOM Form Validation

<p>

<label>Required input:

<input type="text"

name="requiredField" id="requiredField" />

</label>

<input type="submit"

name="submit" value="Click to submit" />

</p>

</form>

</body>

DOM Form Validation

Listen for form to be submitted

DOM Form Validation

Must use value property to access

value entered in text field on form

DOM Form Validation

Regular expression literal representing

“set of strings consisting only of white space”

DOM Form Validation

Cancel browser’s default submit event processing

DOM Event Generation

Several Element’s provide methods for generating events
Ex: causes text in text field to be selected and a select event to occur

Detecting Host Objects

How can a JavaScript program test for the existence of a certain host object?
Does the style element have a setProperty() method?

If we’re also not sure that element is defined or that style exists:

Detecting Host Objects

Is a browser DOM-compliant?
Ex: document.implementation(“Core”, “2.0”) returns true if browser implements all of DOM 2 Core module, false otherwise
Problem: what does false tell you?
Many scripts attempt to directly determine the browser, but…
What about new browsers?
Some browsers can “lie” about what they are

Other Common Host Objects

Browsers also provide many non-DOM host objects as properties of window
While no formal standard defines these objects, many host objects are very similar in IE6 and Mozilla