More on objects and the bom dom
This presentation is the property of its rightful owner.
Sponsored Links
1 / 18

More on Objects and the BOM/DOM PowerPoint PPT Presentation


  • 70 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


More on objects and the bom dom

More on Objects and the BOM/DOM

Week 6 - Presentation 1

Veronica Noone


Objectives

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


Object review

Object Review

  • What objects have we discussed?

  • The Browser also has objects we can manipulate.


Browser object model bom

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


Window object

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


We ve already used it

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!


Window s history object

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():


Calling javascript in an anchor tag

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>


Window s location object

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)


Window s navigator object

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)


Window s screen object

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)


Document object model

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


Dom nodes

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


Dom node tree

DOM Node Tree

http://w3schools.com/htmldom/dom_nodes.asp


Document object collections

Document Object Collections

  • document.anchors[]

    • returns a reference to all Anchor objects in the document.

  • document.forms[]

  • document.images[]

  • document.links[]


Javascript events

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


Old examples

Old Examples

  • Let’s take a look at some old examples.

  • w06p01ex05


Lab challenge

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


  • Login