More on Objects and the BOM/DOM

1
More on Objects and the BOM/DOM

• Week 6 - Presentation 1
• Veronica Noone

2
Objectives

• Browser Object Model (BOM)
• Window Object
• Windows history Object
• Windows location Object
• Windows navigator Object
• Windows screen Object
• Document Object Model
• DOM Node Tree
• Document Object Collections
• JavaScript Events
• Old Examples
• Lab Challenge

3
Object Review

• What objects have we discussed?
• The Browser also has objects we can manipulate.

4
Browser Object Model (BOM)

• Means to access the properties and methods of the
  browser objects
• Browser-dependent
• Will cover DOM in more detail later

5
Window Object

• Created automatically with every instance of a
  ltbodygt or ltframesetgt tag.
• Represents the window that contains your page
• Gives us access to some features of the browser
  itself
• Global object?

6
Weve already used it

• window.alert()
• window.prompt()
• window.document.write()
• Document is a property of the window object, but
  it is also an object itself!

7
Windows history Object

• Consists of an array of URLs the user has visited
  within a browser window.
• Can use it to go to a URL in the browsers
  history.
• history.length
• history.go()
• history.back()
• history.forward()

8
Calling JavaScript in an anchor tag

• You can execute single statements on JavaScript
  using the achor tag.
• More then one statement? Define a function in the
  head and call the function with the anchor tag.
• Lets take a look (w06p01ex01.html)

lta href"javascripthistory.back()"gt Go back a
page using backlt/agt lta href"javascriptgoBack()"
gt Calling a function to go back with an anchor
taglt/agt
9
Windows location Object

• Common Properties
• hash - Sets or returns the URL from the hash sign
  ()
• href - Sets or returns the entire URL
• pathname - Sets or returns the path of the
  current URL
• protocol - Sets or returns the protocol of the
  current URL
• search - Sets or returns the URL from the
  question mark (?)
• Methods
• assign() - Loads a new document
• reload() - Reloads the current document
• replace() - Replaces the current document with a
  new one

Lets take a look (w06p01ex02.html)
10
Windows navigator Object

• Automatically created by JavaScript and contains
  information about the client browser.
• Returns info about the users browser and OS.
• Common Properties
• appCodeName - Returns the code name of the
  browser
• appName - Returns the name of the browser
• appVersion - Returns the platform and version of
  the browser
• cookieEnabled - Returns a Boolean value that
  specifies whether cookies are enabled in the
  browser
• platform - Returns the operating system platform

Lets take a look (w06p01ex03.html)
11
Windows screen Object

• Automatically created by JavaScript and contains
  information about the client browser.
• Returns info about the users display
  capabilities.
• Common Properties
• height - The height of the display screen
• width - Returns width of the display screen
• availHeight - Returns the height of the display
  screen (excluding the Windows Taskbar)
• availWidth - Returns the width of the display
  screen (excluding the Windows Taskbar)
• colorDepth - Returns the bit depth of the color
  palette on the destination device or buffer

Lets take a look (w06p01ex04.html)
12
Document Object Model

• defines a standard way for accessing and
  manipulating HTML documents.
• presents an HTML document as a tree-structure
• The W3C published the Level 1 DOM specification
  in 1998.
• All browsers have implemented this recommendation

13
DOM Nodes

• According to the DOM, everything in an HTML
  document is a node.
• The entire document is a document node
• Every HTML tag is an element node
• The texts contained in the HTML elements are text
  nodes
• Every HTML attribute is an attribute node
• Comments are comment nodes

14
DOM Node Tree
http//w3schools.com/htmldom/dom_nodes.asp
15
Document Object Collections

• document.anchors
• returns a reference to all Anchor objects in the
  document.
• document.forms
• document.images
• document.links

16
JavaScript Events

• When have our scripts been running so far?
• Every element on a web page has certain events
  which can trigger JavaScript functions
• A mouse click
• A web page or an image loading
• Mousing over a hot spot on the web page
• Selecting an input box in an HTML form
• Submitting an HTML form
• A keystroke

17
Old Examples

• Lets take a look at some old examples.
• w06p01ex05

18
Lab Challenge

• Write a function that displays information about
  the users system in a nicely formatted way.
• Things you can include
• Screen High and Width
• Color Dept
• Browser Version
• Host Name
• Whether or not they have cookies?
• 25 points