DePaul University

1
DePaul University

• SNL 262
• Advanced Web Page Design
• Chapt 10 - Document/location/navigator Objects -
  
• Instructor David A. Lash

2
Chapt 10 - Document Object

• The document object represents a web document or
  page.
• It is a child of the window object
• technically you can refer to window.document to
  refer to the current document.
• But just document is shorter.
• If you had frames there might exist gt 1 document
  opbjects each with its own name.

3
Chapt 10 - Window Hierarchy
4
More Document Objects Properties

• Here are more properties
• cookie - a special property enabling trusted web
  servers to read write cookies.
• Links - an array of link objects representing
  the links in the document.
• vlinkColor - the color of the visited links in
  the document.
• alinkColor - the color of a link while activated
  in the document..
• fgColor - the default text color of the
  document.
• bgcolor - background color of the document

5
Web Documents

• The document object represents the web document
  has the following properties
• referrer - the URL of the document that contained
  the link that the user clicked on to get to the
  current document.
• title - the text between the ltTITLEgt lt/TITLEgt
  tags.
• URL - a string representing the URL from where
  the document was loaded.
• images - an array of images objects the
  represent ltIMGgt elements from the document
• forms - an array of objects representing the
  form elements in the document.
• lastmodified - a string set to the last modified
  date of the document
• anchors - array of objects populated by the
  anchors of the document.

6
Documents Properties Example

• ltHTMLgtltHEADgtltTITLEgt Cool backgroundslt/TITLEgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• function colorit()
• document.bgColorcolorsx
• if (x gt 2)
• x0
• timerIDsetTimeout("colorit()",2000)
• lt/scriptgtlt/HEADgt
• ltBODY bgcolor"CCFFFF"gtltcentergt
• lth2gtSetting and Cancelling Timerlt/h2gt
• lt/centergt
• ltSCRIPT LANGUAGE"JavaScript"gt
• var x 0
• var colors new Array("CCFFFF", "ff0000",
  "00ff00")
• document.bgColor"ffff00"
• document.write( "referrer"
  document.referrer "ltBRgt" )
• document.write( "title" document.title
  "ltBRgt" )
• document.write( "URL" document.URL "ltBRgt"
  )

7
A word about refferrer

• Referrer can be used by sites to save where
• the browser was before your site.
• For example, can write this property when user
• hits submit on a form.
• Could track where folks are coming from.

8
LastModified Property

• Displaying the last modified dateltHTMLgt
• ltHTMLgtltHEADgtltTITLEgtTest Documentlt/TITLEgtlt/HEADgt
• ltBODYgt
• This page was last modified on
• ltSCRIPTgt
• document.write(document.lastModified)
• lt/SCRIPTgt
• ltBRgt
• lt/HTMLgt
• See examples/11_list10-1.html

9
Images Array

• images - an array of images objects the
  represent ltIMGgt elements from the document
• the most usful property is the src property.
• document.two.srcsample.gif
• Where two was set in tag earlier as
• ltIMG SRCothersample.gif" name"two"gt
• - See example on next slide

10
Images Object example

• ltHTMLgt
• ltHEADgtltTITLEgt Timed Imageslt/TITLEgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• function change_image()
• tempdocument.two.src
• document.two.srcdocument.one.src
• document.one.srctemp
• timerIDsetTimeout("change_image()",2000)
• lt/scriptgt
• lt/HEADgt
• ltBODY bgcolor"CCFFFF"gtltcentergt
• lth2gtSetting and Cancelling Timerlt/h2gt
• lt/centergt
• ltIMG SRC"ball.gif" name"one"gt
• ltIMG SRC"ball2.gif" name"two"gt
• Keep your eye on the ball.
• ltSCRIPT LANGUAGE"JavaScript"
• timerIDsetTimeout("change_image()",2000)

11
Location Object

• An object that represents URL of the document
  displayed in the window
• location.href - the conplete text of the URL
  being displayed
• location.pathname - complete pathname
• location.protocol - http, ftp, file, etc.
• Can use location on left hand side of equation to
  set a new location URL for document
• locationhttp//www.depaul.edu
• locationfile1.html

12
Location Object Example
ltHTMLgtltHEADgtltTITLEgt Timed Imageslt/TITLEgt ltSCRIPT
LANGUAGE"JavaScript"gt function leaving()
location"http//www.depaul.edu/dlash"
lt/scriptgt lt/HEADgt ltBODY bgcolor"CCFFFF"gtltcente
rgt lth2gtSetting and Cancelling Timerlt/h2gt You are
currently at ltSCRIPT LANGUAGE"JavaScript"gt
document.write( location "ltBRgt" )
document.write( "host" location.host "ltBRgt"
) document.write( "pathname"
location.pathname "ltBRgt" ) document.write(
"protocol" location.protocol "ltBRgt" )
document.write( "Going to my new home page in 5
seconds" "ltBRgt" ) timerIDsetTimeout("leaving()
",5000) lt/SCRIPTgt examples/11_list10-3c.html
13
Navigator Object

• Here are more properties
• appName - a simple name of the browser
• platform - hardware plaform running on
• language - the language supported (e.g., en-
  english or fr - french).
• appVersion - the version of the borwser.

14
Navigator Object

• ltHTMLgtltHEADgtltTITLEgt Navigator Objectlt/TITLEgt
• lt/HEADgt
• ltBODY bgcolor"CCFFFF"gtltcentergt
• lth2gtNavigator Objectlt/h2gt
• lt/centergt
• ltSCRIPT LANGUAGE"JavaScript"gt
• var x 0
• var colors new Array("CCFFFF", "ff0000",
  "00ff00")
• document.bgColor"ffff00"
• document.write( "browser" navigator.appName
  "ltBRgt" )
• document.write( "version"
  navigator.appVersion "ltBRgt" )
• document.write( "platform"
  navigator.platform "ltBRgt" )
• document.write( "language"
  navigator.language "ltBRgt" )
• lt/SCRIPTgt lt/BODYgt lt/HTMLgt
• examples/11_list10-5.html