Working with Objects

Creating a Dynamic Web Page

Introduction

• 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 (DHTML), or now incorporated in HTML5

Introduction cont.

• 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 cont.

• 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

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

– Within each DOM, particular features may not be supported by every browser

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

• Using W3C DOMs

– Can reference objects using their id or name values,

document.getElementsbyId(“id”)

document.getElementsbyTagName(“tag”)

Working with Object Properties

• The syntax for setting the value of an object content,property, and attribute is– document.getElementsByID(“id”).innerHTML= “value”– document.getElementsByID(“id”).style.property= “value”– document.getElementById(id).attribute= “new value”

• Example– document.getElementsByID(“p”).innerHTML= “new text”– document.getElementsByID(“p”).color= “blue”– document.getElementById(“image”).src= “test.jpg”

Working with the style Object

• The syntax for applying a style isobject.style.attribute = valuemore examples:

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 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