Dynamic HTML: Object Model and Collections

1
Dynamic HTML Object Model and Collections
2
Introduction

• Dynamic HTML object model
• Great control over presentation of pages
• Access to all elements on the page
• Whole web page (elements, forms, frames, tables,
  etc.) represented in an object hierarchy
• HTML elements treated as objects
• Attributes of these elements treated as
  properties of those objects
• Objects identified with an ID attribute can be
  scripted with languages like JavaScript, JScript
  and VBScript

3
Object Referencing

• Simplest way to reference an element is by its ID
  attribute
• Changing the text displayed on screen
• Example of a Dynamic HTML ability called dynamic
  content

4
Object Referencing Example

• ltHTMLgtHEADgtltTITLEgtObject Modellt/TITLEgt
• ltSCRIPT LANGUAGE "JavaScript"gt
• function start()
• alert( pText.innerText )
• pText.innerText "Thanks for coming."
• lt! text contained in element --gt
• lt/SCRIPTgtlt/HEADgtltBODY ONLOAD "start()"gt
• ltP ID "pText"gtWelcome to our Web page!lt/Pgt
• lt! P element whose ID is pText --gt
• lt/BODYgtlt/HTMLgt

5
Object Referencing Example
6
Collections all and children

• Collections are basically arrays of related
  objects on a page
• all
• Collection of all the HTML elements in a document
  in the order in which they appear
• length property
• Specifies the number of elements in the
  collection
• tagName property of an element
• Determines the name of the element
• Every element has its own all collection,
  consisting of all the elements contained within
  that element

7
Collection Example

• ltHTMLgtltHEADgtltTITLEgtObject Modellt/TITLEgt
• ltSCRIPT LANGUAGE "JavaScript"gt
• var elements ""
• function start()
• for ( var loop 0 loop lt
  document.all.length loop )
• elements "ltBRgt" document.all loop
  .tagName
• pText.innerHTML elements
• lt/SCRIPTgtlt/HEADgt
• ltBODY ONLOAD "start()"gt
• ltP ID "pText"gtElements on this Web pagelt/Pgt
• lt/BODYgtlt/HTMLgt

8
Looping through the all collection
9
Collections all and children

• The children collection
• Contains only those elements that are direct
  child elements of that element
• An HTML element has only two children the HEAD
  element and the BODY element

10
all and children Example

• ltSCRIPT LANGUAGE "JavaScript"gt
• var elements "ltULgt"
• function child( object )
• var loop 0
• elements "ltLIgt" object.tagName
  "ltULgt"
• for( loop 0 loop lt object.children.length
  loop )
• if ( object.childrenloop.children.length )
  
• child( object.children loop )
• else
• elements "ltLIgt"
  object.children loop .tagName
• "lt/LIgt"
• elements " lt/ULgt "
• lt/SCRIPTgt

11
all and children Example

• ltBODY ONLOAD "child( document.all 1 )
• myDisplay.outerHTML
  elements"gt
• ltPgtWelcome to our ltSTRONGgtWeblt/STRONGgt page!lt/Pgt
• ltP ID "myDisplay"gt
• Elements on this Web page
• lt/Pgt
• lt/BODYgt
• outerHTML property includes enclosing HTML tags
  as well as the content inside

12
all and children Example
13
Dynamic Styles

• Refer to the background color of a page as
  document.body.style.backgroundColor
• Dynamic HTML object model allows you to change
  the CLASS attribute of an element

14
Dynamic Style Example

• ltHEADgtltTITLEgtObject Modellt/TITLEgt
• ltSCRIPT LANGUAGE "JavaScript" gt
• function start()
• var inputColor prompt( "Enter a color
  name for the "
• "background of
  this page", "" )
• document.body.style.backgroundColor
  inputColor
• lt/SCRIPTgtlt/HEADgt
• ltBODY ONLOAD "start()"gt
• ltPgtWelcome to our Web site!lt/Pgt
• lt/BODYgt

15
Dynamic Style Example
16
Dynamic Style Example-2

• ltHEADgtltTITLEgtObject Modellt/TITLEgtltSTYLEgt
• .bigText font-size 3em font-weight
  bold
• .smallText font-size .75em
• lt/STYLEgt
• ltSCRIPT LANGUAGE "JavaScript"gt
• function start()
• var inputClass prompt( "Enter a className
  for the text "
• "(bigText or
  smallText)", "" )
• pText.className inputClass
• lt/SCRIPTgtlt/HEADgtltBODY ONLOAD "start()"gt
• ltP ID "pText"gtWelcome to our Web
  site!lt/Pgtlt/BODYgt

17
Dynamic Style Example-2
18
Dynamic Positioning

• Dynamic positioning
• An element can be positioned with scripting
• setInterval function takes two parameters
• A function name
• How often to run that function
• clearInterval function stops the timer
• setTimeout function similar, but only calls the
  function once
• clearTimeout function stops the timer

19
Dynamic Positioning Example

• ltSCRIPT LANGUAGE "JavaScript"gt
• var speed 5
• var count 10
• var direction 1
• var firstLine "Text growing"
• var fontStyle "serif", "sans-serif",
  "monospace"
• var fontStylecount 0
• function start()
• window.setInterval( "run()", 100 )

20
Dynamic Positioning Example

• function run()
• count speed
• if ( ( count 200 ) 0 )
• speed -1
• direction !direction
• pText.style.color ( speed lt 0 ) ? "red"
  "blue"
• firstLine ( speed lt 0 ) ? "Text
  shrinking" "Text growing"
• pText.style.fontFamily fontStyle
  fontStylecount 3
• pText.style.fontSize count / 3
• pText.style.left count
• pText.innerHTML firstLine "ltBRgt Font
  size " count "px"

21
Dynamic Positioning Example
22
Using the frames Collection

• frames collection
• To reference a frame, use frames(name) where
  name is the ID or NAME of the desired frame
• Ex. frames(lower) refers to the element in the
  frames collection with an ID or NAME of lower

23
Frames Example

• ltHTMLgt
• ltHEADgt
• ltTITLEgtFrames collectionlt/TITLEgt
• lt/HEADgt
• ltFRAMESET ROWS "100, "gt
• ltFRAME SRC "top.html" NAME "upper"gt
• ltFRAME SRC "" NAME "lower"gt
• lt/FRAMESETgt
• lt/HTMLgt

24
Frames Example

• ltHTMLgtltHEADgtltTITLEgtThe frames collectionlt/TITLEgt
• ltSCRIPT LANGUAGE "JavaScript"gt
• function start()
• var text prompt( "What is your name?", ""
  )
• parent.frames( "lower" ).document.write(
  "ltH1gtHello, "
• 
  text "lt/H1gt" )
• lt/SCRIPTgtlt/HEADgt
• ltBODY ONLOAD "start()"gt
• ltH1gtCross-frame scripting!lt/H1gt
• lt/BODYgtlt/HTMLgt

25
Frames Example
26
Navigator Object

• navigator object
• Supported by Netscape Navigator and Internet
  Explorer
• navigator object contains info about the Web
  browser viewing the page
• navigator.appName contains the name of the
  application
• Microsoft Internet Explorer
• Netscape
• Value of navigator.appVersion not a simple
  integer
• Contains other info, such as OS
• When using a browser-specific technology
• Make provisions for other browsers

27
Navigator Example

• ltSCRIPT LANGUAGE "JavaScript"gt
• function start()
• if ( navigator.appName "Microsoft
  Internet Explorer" )
• if ( navigator.appVersion.substring(1,0)
  gt "4" )
• document.location "newIEversion.html"
  
• else
• document.location "oldIEversion.html"
  
• else
• document.location "NSversion.html"
• lt/SCRIPTgt

28
Navigator Example

• ltBODY ONLOAD "start()"gt
• ltPgtRedirecting your browser to the appropriate
  page,
• please wait...lt/Pgt
• lt/BODYgt
• lt/HTMLgt

29
DHTML Object Model

• DHTML object model
• Allows script programmer to access every element
  in an HTML document
• Every element a separate object

30
The DHTML Object Model

31
Dynamic HTMLEvent Model
32
Introduction

• Event model
• Scripts respond to user actions and change page
  accordingly
• Moving mouse
• Scrolling screen
• Entering keystrokes
• Content more dynamic
• Interfaces more intuitive

33
Event ONLOAD

• ONLOAD event
• Fires when element finishes loading successfully
• Often used in BODY tag
• Initiate scripts as soon as page loads

34
OnLoad Example

• ltSCRIPT LANGUAGE "JavaScript"gt
• var seconds 0
• function startTimer()
• // 1000 milliseconds 1 second
• window.setInterval( "updateTime()", 1000 )
• function updateTime()
• seconds
• soFar.innerText seconds
• lt/SCRIPTgtltBODY ONLOAD "startTimer()"gt
• ltPgtSeconds you have spent viewing this page so
  far
• ltA ID "soFar" STYLE "font-weight
  bold"gt0lt/Agtlt/Pgtlt/BODYgt

35
OnLoad Example
36
Tracking the Mouse with Event ONMOUSEMOVE

• ONMOUSEMOVE event
• Fires constantly whenever mouse in motion
• event object
• Contains info about triggered event
• srcElement
• Pointer to element object that triggered event
• offsetX and offsetY
• Give location of mouse cursor relative to
  top-left corner of object in which event triggered

37
OnMouseMove Example

• ltSCRIPT LANGUAGE "JavaScript"gt
• function updateMouseCoordinates()
• coordinates.innerText event.srcElement.tag
  Name
• " (" event.offsetX ", "
  event.offsetY ")"
• lt/SCRIPTgt
• ltBODY ONMOUSEMOVE "updateMouseCoordinates()"gt
• ltSPAN ID "coordinates"gt(0, 0)lt/SPANgtltBRgt
• ltIMG SRC "deitel.gif" STYLE "position
  absolute top 100
• left 100"gt
• lt/BODYgt

38
OnMouseMove Example
Updated text (keeps changing as you move the
mouse)
39
Rollovers with ONMOUSEOVER and ONMOUSEOUT

• ONMOUSEOVER event
• Fires when mouse cursor moves over an element
• ONMOUSEOUT event
• Fires when mouse cursor leaves the element
• Combine events for rollover effect
• Pre-load images

40
OnMouseOver and Out Example

• ltSCRIPT LANGUAGE "JavaScript"gt
• captionImage1 new Image()
• captionImage1.src "caption1.gif"
• captionImage2 new Image()
• captionImage2.src "caption2.gif"

41
OnMouseOver and Out Example

• function mOver()
• if ( event.srcElement.id "tableCaption"
  )
• event.srcElement.src
  captionImage2.src
• return
• // If the element which triggered
  ONMOUSEOVER has an ID,
• // Change its color to its ID.
• if ( event.srcElement.id )
• event.srcElement.style.color
  event.srcElement.id

42
OnMouseOver and Out Example

• function mOut()
• if ( event.srcElement.id "tableCaption"
  )
• event.srcElement.src
  captionImage1.src
• return
• // If it has an ID, change the text inside
  to the text of
• // the ID.
• if ( event.srcElement.id )
• event.srcElement.innerText
  event.srcElement.id
• document.onmouseover mOver
• document.onmouseout mOut

43
OnMouseOver and Out Example

• lt/SCRIPTgt
• ltBODY STYLE "background-color wheat"gt
• ltH1gtGuess the Hex Code's Actual Colorlt/H1gt
• ltPgtCan you tell a color from its hexadecimal RGB
  code value?
• Look at the hex code, guess the color. To see
  what color it
• corresponds to, move the mouse over the hex code.
  Moving the
• mouse out will display the color name.lt/Pgt
• ltTABLE STYLE "width 50 border-style groove
  
• text-align center font-family monospace
• font-weight bold"gt
• ltCAPTIONgt
• ltIMG SRC "caption1.gif" ID
  "tableCaption"gt
• lt/CAPTIONgt

44
OnMouseOver and Out Example

• ltTRgt
• ltTDgtltA ID "Black"gt000000lt/Agt
• ltTDgtltA ID "Blue"gt0000FFlt/Agt
• ltTDgtltA ID "Magenta"gtFF00FFlt/Agt
• ltTDgtltA ID "Gray"gt808080lt/Agt
• lt/TRgt
• ltTRgt
• ltTDgtltA ID "Green"gt008000lt/Agt
• ltTDgtltA ID "Lime"gt00FF00lt/Agt
• ltTDgtltA ID "Maroon"gt800000lt/Agt
• ltTDgtltA ID "Navy"gt000080lt/Agt
• lt/TRgt

45
OnMouseOver and Out Example

• ltTRgt
• ltTDgtltA ID "Olive"gt808000lt/Agt
• ltTDgtltA ID "Purple"gt800080lt/Agt
• ltTDgtltA ID "Red"gtFF0000lt/Agt
• ltTDgtltA ID "Silver"gtC0C0C0lt/Agt
• lt/TRgt
• ltTRgt
• ltTDgtltA ID "Cyan"gt00FFFFlt/Agt
• ltTDgtltA ID "Teal"gt008080lt/Agt
• ltTDgtltA ID "Yellow"gtFFFF00lt/Agt
• ltTDgtltA ID "White"gtFFFFFFlt/Agt
• ltTRgt
• lt/TABLEgtlt/BODYgt

46
OnMouseOver and Out Example
47
Form Processing with ONFOCUS and ONBLUR

• ONFOCUS event
• Fires when an element gains focus
• User clicks on form field
• User uses Tab key to highlight element
• ONBLUR event
• Fires when an element loses focus

48
OnFocus and OnBlur Example

• ltSCRIPT LANGUAGE "JavaScript"gt
• var helpArray
• "Enter your name in this input box.",
• "Enter your email address in this input
  box, "
• "in the format user_at_domain.",
• "Check this box if you liked our site.",
• "In this box, enter any comments you
  would "
• "like us to read.",
• "This button submits the form to the "
• "server-side script",
• "This button clears the form",
• "This TEXTAREA provides context-sensitive
  "
• "help. Click on any input field or use
  the TAB "
• "key to get more information about the
  input field."

49
OnFocus and OnBlur Example

• function helpText( messageNum )
• myForm.helpBox.value helpArray
  messageNum
• lt/SCRIPTgtlt/HEADgtltBODYgt
• ltFORM ID "myForm"gt
• Name ltINPUT TYPE "text" NAME "name"
• ONFOCUS "helpText(0)" ONBLUR
  "helpText(6)"gtltBRgt
• Email ltINPUT TYPE "text" NAME "email"
• ONFOCUS "helpText(1)" ONBLUR
  "helpText(6)"gtltBRgt

50
OnFocus and OnBlur Example

• Click here if you like this site
• ltINPUT TYPE "checkbox" NAME "like"
• ONFOCUS "helpText(2)" ONBLUR
  "helpText(6)"gt
• ltBRgtltHRgt
• Any comments?ltBRgt
• ltTEXTAREA NAME "comments" ROWS 5 COLS 45
  ONFOCUS "helpText(3)" ONBLUR "helpText(6)"gt
• lt/TEXTAREAgtltBRgt

51
OnFocus and OnBlur Example

• ltINPUT TYPE "submit" VALUE "Submit" ONFOCUS
  "helpText(4)" ONBLUR "helpText(6)"gt
• ltINPUT TYPE "reset" VALUE "Reset" ONFOCUS
  "helpText(5)"
• ONBLUR "helpText(6)"gt
• ltTEXTAREA NAME "helpBox" STYLE "position
  absolute
• right 0 top 0" ROWS 4 COLS 45gt
• This TEXTAREA provides context-sensitive help.
  Click on any
• input field or use the TAB key to get more
  information about the
• input field.lt/TEXTAREAgt
• lt/FORMgt
• lt/BODYgt
• lt/HTMLgt

52
OnFocus and OnBlur Example
53
More Form Processing with ONSUBMIT and ONRESET

• ONSUBMIT event
• Fires when a form is submitted
• ONRESET event
• Fires when a form is reset

54
OnSubmit and OnReset Example

• function formSubmit()
• window.event.returnValue false
• if ( confirm ( "Are you sure you want to
  submit?" ) )
• window.event.returnValue true
• function formReset()
• window.event.returnValue false
• if ( confirm ( "Are you sure you want to
  reset?" ) )
• window.event.returnValue true
• ltFORM ID "myForm" ONSUBMIT "formSubmit()"
• ONRESET "formReset()"gt
• lt/FORMgt

55
OnSubmit and OnReset Example