DHTML: Working with Objects

1
DHTMLWorking with Objects

• Creating a Dynamic Web Page

2
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

3
Introduction to DHTML

• Interaction of three aspects
• A pages 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

4
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

5
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

6
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

7
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

8
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

9
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

10
Exploring the Document Object Model

• The document tree

11
Referencing Objects

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

12
Referencing Objects

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

13
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

14
Referencing Objects

• Working with Object Collections
• Objects are organized into arrays called object
  collections
• document.collection

15
Referencing Objects

• Working with Object Collections

16
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.allid
• document.all.id
• document.getElementById(id)

17
Referencing Objects

• Referencing Tags
• Internet Explorer DOM
• document.all.tags(tag)
• document.all.tags(tag)
• W3C DOMs
• document.getElementsbyTagName(tag)
• document.getElementsbyTagName(p)0

18
Working with Object Properties

• The syntax for setting the value of an object
  property is
• object.property expression
• Example
• document.title XHTML update

19
Working with Object Properties
20
Working with Object Properties

• Some properties are read-only

21
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

22
Creating a Cross-Browser Web Site

• Using Browser Detection
• Using browser detection, your code determines
  which browser (and browser version) a user is
  running
• navigator.appName
• Most browser detection scripts commonly known
  as browser sniffers use this property to
  extract information about the version number
• navigator.uerAgent

23
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 ? truefalse
• var IEDOM document.all ? truefalse
• var W3CDOM document.getElementByID ? truefalse

24
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
  users browser and automatically loads the
  appropriate page

25
Creating a Cross-Browser Web Site

• Employing Cross-Browser Strategies

26
Working with the style Object

• The syntax for applying a style is
• object.style.attribute value