DHTML:Working with Objects

Creating a Dynamic Web Page

Introduction to DHTML

• Developers began to look for ways to create dynamic pages

• New approach, in which the HTML code itself supported dynamic elements

• Known collectively as dynamic HTML, or DHTML

Introduction to DHTML

• Interaction of three aspects– A page’s HTML/XHTML code– A style sheet that defines the styles used in the

page– A script to control the behavior of elements on the

page

Introduction to DHTML

• Some uses– Animated text– Pop-up menus– Rollovers– Web pages that retrieve their content from

external data sources– Elements that can be dragged and dropped

Understanding JavaScript Objects

• JavaScript is an object-based language• An object is any item associated with a Web

page or Web browser• Each object has

– Properties– Methods

Exploring the Document Object Model

• The organized structure of objects and events is called the document object model, or DOM

• Every object related to documents or to browsers should be part of the document object model

• In practice, browsers differ in the objects that their document object models support

Exploring the Document Object Model

• Development of a Common DOM– Basic model, or DOM Level 0– Supported browser window, Web document, and

the browser itself– Development followed two paths: one adopted by

Netscape and the other adopted by Internet Explorer

– Internet Explorer DOM also provided for capturing events

Exploring the Document Object Model

• Development of a Common DOM– World Wide Web Consortium (W3C) stepped in to

develop specifications for a common document object model

• DOM Level 1• DOM Level 2• DOM Level 3

Exploring the Document Object Model

• Development of a Common DOM– Within each DOM, particular features may not be

supported by every browser– Code should be compatible with

• Netscape 4• Internet Explorer 5• W3C DOM Level 1 and 2

Exploring the Document Object Model

• The document tree

Referencing Objects

• A DOM can be used by any scripting language including JavaScript and Java

Referencing Objects

• Object Names– Each object is identified by an object name

Referencing Objects

• Object Names– General form is object1.object2.object3…– To reference the history you would use the form

window.history– For the body, you would use

document.body

Referencing Objects

• Working with Object Collections– Objects are organized into arrays called object

collectionsdocument.collection

Referencing Objects

• Working with Object Collections

Referencing Objects

• Using document.all and document.getElementById– Not all elements are associated with an object

collection– Can reference these objects using their id values

document.all[“id”]

document.all.id

document.getElementById(“id”)

Referencing Objects

• Referencing Tags– Internet Explorer DOM

document.all.tags(tag)

document.all.tags(tag)

– W3C DOMsdocument.getElementsbyTagName(“tag”)

document.getElementsbyTagName(“p”)[0]

Working with Object Properties

• The syntax for setting the value of an object property isobject.property = expression

• Exampledocument.title = “XHTML update”

Working with Object Properties

Working with Object Properties

• Some properties are read-only

Creating a Cross-Browser Web Site

• You can create this kind of code, known as cross-browser code, using two different approaches: browser detection or object detection

Creating a Cross-Browser Web Site

• Using Browser Detection– Using browser detection, your code determines

which browser (and browser version) a user is runningnavigator.appName

– Most browser detection scripts – commonly known as browser sniffers – use this property to extract information about the version numbernavigator.uerAgent

Creating a Cross-Browser Web Site

• Using Object Detection– With object detection, you determine which

document object model a browser supports

var NS4DOM = document.layers ? true:false;

var IEDOM = document.all ? true:false;

var W3CDOM = document.getElementByID ? true:false;

Creating a Cross-Browser Web Site

• Employing Cross-Browser Strategies– One strategy, called page branching, creates

separate pages for each browser along with an initial page

– A script determines the capabilities of the user’s browser and automatically loads the appropriate page

Creating a Cross-Browser Web Site

• Employing Cross-Browser Strategies

Working with the style Object

• The syntax for applying a style isobject.style.attribute = value