New Perspectives on HTML, XHTML, and DHTML, Comprehensive

1
Working with Objects

• Creating an Animated Web Page

2
Objectives

• Define DHTML and describe its uses
• Understand objects, properties, methods, and the
  document object model
• Distinguish between different object models
• Work with object references and object collections

3
Objectives

• Modify an objects properties
• Apply a method to an object
• Create a cross-browser Web site using object
  detection

4
Objectives

• Work with the style object to change the styles
  associated with an object
• Write functions to apply positioning styles to an
  object

5
Objectives

• Insert event handlers to run a script in response
  to an event
• Place a JavaScript command in a link
• Run timed-delay and timed-interval commands
• Work with the properties of the display window
• Describe the techniques of linear and path
  animation

6
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

7
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

8
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

9
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

10
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

11
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

12
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

13
Exploring the Document Object Model

• Development of a Common DOM

14
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

15
Exploring the Document Object Model

• The document tree

16
Referencing Objects

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

17
Referencing Objects

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

18
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

19
Referencing Objects

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

20
Referencing Objects

• Working with Object Collections

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

22
Referencing Objects

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

23
Working with Object Properties

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

24
Working with Object Properties
25
Working with Object Properties

• Some properties are read-only

26
Working with Object Properties

• Storing a Property in a Variable
• variable object.property
• Using Properties in a Conditional Expressions
• if(document.bgColorblack)
• document.fgColorwhite
• else
• document.fgColorblack

27
Working with Object Methods

• object.method(parameters)

28
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

29
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

30
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

31
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

32
Creating a Cross-Browser Web Site

• Employing Cross-Browser Strategies

33
Creating a Cross-Browser Web Site

• Employing Cross-Browser Strategies
• To automatically load a page into a browser based
  on the type of the browser detected, use the
  command
• location.href url
• A second cross-browser strategy is to use
  internal branching
• Most web developers apply a third cross-browser
  strategy
• Application programming interface or API

34
Creating a Cross-Browser Web Site

• Employing Cross-Browser Strategies

35
Working with the style Object

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

36
Working with the Style Object

• Setting an Elements Position

37
Working with the style Object

• Positioning Properties in the IE DOM

38
Creating the Positioning Functions for Avalon
Books

• Example
• function xCoord(id)
• objectdocument.getElementByID(id)
• xcparseInt(object.style.left)
• return xc

39
Working with Event Handlers

• An event handler is an attribute added to an
  element that specifies a program to be run in
  response to an event

40
Working with Event Handlers
41
Working with Event Handlers
42
Working with Event Handlers

• Running JavaScript Commands as Links
• lta hrefjavascript.scriptgtcontentlt/agt
• Using the onLoad Event Handler

43
Animating an Object

• Working with Time-Delayed Commands
• setTimeout(command, delay)
• timeID setTimeout(command, delay)
• clearTimeout(timeID)
• clearTimeout()

44
Animating an Object

• Running Commands at Specified Intervals
• timeIDsetInterval(command,interval)
• setInterval(command, interval)
• clearInterval(timeID)
• clearInterval()

45
Animating an Object

• Animating the Avalon Books Web page
• Example
• Function moveAvalon()
• var yyCoord(avalon)
• if (y lt 260)
• shiftIt(avalon, 0, 10)
• shiftIt(books, 0, 10)
• setTimeout(moveAvalon(), 30)
• else
• // run moveBooks function

46
Controlling Layout for Different Monitor
Resolutions

• Calculating the Size of the Display Window
• window.outerWidth
• window.outerHeight
• window.innerWidth
• window.innerHeight
• document.body.clientWidth
• document.body.clientHeight

47
Controlling Layout for Different Monitor
Resolutions

• Calculating the Size of the Display Window
• document.documentElement.offsetWidth
• document.documentElement.offsetHeight

48
Using Path Animation

• Linear animation means that the animation takes
  place over a straight line
• Path animation means each set of coordinates in
  the path is entered into an array, and the
  animation moves point to point

49
Using Path Animation
50
Tips for working with JavaScript Objects and DHTML

• If your code reuses the same object reference,
  store the object in a variable
• Place your customized functions in external files
• Use object detection
• Use path animation and create interesting visual
  effects
• Break up your animated effects into separate
  functions