1. More on Objects and the BOM/DOM Week 6 - Presentation 1 Veronica Noone

2. Browser Object Model (BOM) Window Object Window’s history Object Window’s location Object Window’s navigator Object Window’s screen Object Document Object Model DOM Node Tree Document Object Collections JavaScript Events Old Examples Lab Challenge Objectives

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

4. location history links window document DOM forms navigator images screen 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 <body> or <frameset> tag. • Represents the window that contains your page • Gives us access to some features of the browser itself • Global object? …

6. We’ve 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. Window’s 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. • Let’s take a look (w06p01ex01.html)… <a href="javascript:history.back()"> Go back a page using back</a> <a href="javascript:goBack()"> Calling a function to go back with an anchor tag</a>

9. Window’s 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 Let’s take a look… (w06p01ex02.html)

10. Window’s 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 Let’s take a look… (w06p01ex03.html)

11. Window’s 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 Let’s 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 • Let’s take a look at some old examples. • w06p01ex05

18. Lab Challenge • Write a function that displays information about the user’s 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