1 / 18

More on Objects and the BOM/DOM

More on Objects and the BOM/DOM. Week 6 - Presentation 1 Veronica Noone. 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

heather-sweet
Télécharger la présentation

More on Objects and the BOM/DOM

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related