More on Objects and the BOMDOM

1
More on Objects and the BOM/DOM

• Jim Doran

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
Browser Object Model (BOM)

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

4
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?

5
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!

6
The Window Object
7
The Window Object (continued)
JavaScript, Fourth Edition
8
Windows and Events

• The click and dblclick Events
• The click event is often used for anchor element
• Web browser handles execution of the onclick
  event handler automatically
• You can override an anchor elements automatic
  onclick event handler
• Add to the ltagt element an onclick event handler
  that executes custom code
• The dblclick event works like the click event

JavaScript, Fourth Edition
8
9
Opening and Closing Windows

• Opening a Window (continued)
• Syntax
• window.open(url, name, options, replace)
• You can customize its appearance using the
  options argument

JavaScript, Fourth Edition
9
10
Opening and Closing Windows (continued)
JavaScript, Fourth Edition
10
11
Opening and Closing Windows (continued)

• Opening a Window (continued)
• Example Pine Knoll Properties Web page
• Links use the window.open() method instead of the
  target attribute to open the URLs in a separate
  page
• A Window objects name property can be used only
  to specify a target window with a link
• And cannot be used in JavaScript code
• Assign created window to a variable
• If you want to control it
• focus() method
• Makes a window the active window

JavaScript, Fourth Edition
11
12
Opening and Closing Windows (continued)

• Opening a Window (continued)
• Example Pine Knoll Properties Web page
• Add a focus() method to showProperty()
• Closing a Window
• close() method
• Closes a Web browser window
• window.close() or self.close()
• Closes the current window
• Example Pine Knoll Properties Web page
• Add links to each of the property Web pages that
  call the close() method

JavaScript, Fourth Edition
12
13
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()

14
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 (history.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
15
The History Object

• Security features
• Object will not actually display the URLs
  contained in the history list
• In Internet Explorer this is only possible if the
  currently displayed Web page exists
• In same domain as Web page containing JavaScript
  code

16
The History Object (continued)
JavaScript, Fourth Edition
16
17
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 (location.html)
18
The Location Object
JavaScript, Fourth Edition
19
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 (navigator.html)
20
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 (screen.html)
21
The Screen Object (continued)
JavaScript, Fourth Edition
22
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

23
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

24
DOM Node Tree
http//w3schools.com/htmldom/dom_nodes.asp
25
Document Object Collections

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

26
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