CIS 89C Client-Side Programming with JavaScript

Unit 21 - Top level objects (week 10)

References:

McDuffie - Chapter 2 Writing Scripts with JavaScript -

Section The Document Object Model

Quigley - Chapter 10 The Browser Objects:

Navigator, Windows, and Frames

Topics:

Opening statement

The Document Object Model - McDuffie page 20

Summary

References:

JavaScript by Example, by Ellie Quigley,

2003, Prentice Hall ISBN 0-13-140162-9

JavaScript , The Definitive Guide, Fifth Edition by David Flanagan,

2006, O'Reilly ISBN-13: 978-0-596-10199-2

***********************************************************

Opening statement

We have been using the Document Object Model.

The Document Object is one of the important objects in the overall model.

The overall model is called the Browser Object Model.

***********************************************************

Browser Object Model

At the top of the Browser Object Model (BOM) is a Window object.

The other most important Objects can be accessed from properties of a Window object. These properties contain references to the other important Objects.

These are:

Object type property description

Other Window objects self Refers to the current window (itself) - read-only

window Same as self

parent The window or frame containing this window - read-only

top The top window containing this window - read-only

parent and top are used with framesets.

If the current window is the top window in a frameset,

parent and top refer to the current window.

Navigator navigator Refers to the navigation (browser) - read only

Frame frames[] An array of references to the frames in the window

Document document The Document object, which is our XHTML document

read-only.

The Document object is the top level object in the

Document Object Model (DOM).

History history Refers to the History Object for the browser - read-only

Location location Refers to the location

The location is the URL requested when this page was loaded. It may not be this page, in cases where the page load was redirected. Changing this value will load a new page.

Screen screen Refers to the Screen object - read-only

Opening Window opener Refers to the window that opened this window -

read-only.

read-only reference means that the reference cannot be changed. The object it refers to can be changed.

navigator object

There is only one navigator object.

It has properties that describe the browser and its characteristics.

Some of these properties are:

navigator.appName a read-only reference

the value is "Netscape" for browsers based on Netscape Navigator

several browsers use this

the value is "Microsoft Internet Explorer" for IE

navigator.platform a read-only reference

some values are "Win32", "MacPPC", and "Linux i586".

et cetera.

Each window object contains a reference to the one navigator object.

window object

There is a window object for each browser window.

There is also a window object for each tab, if tabs are used by the browser.

There is also a window for each frame and each iframe, if frames or iframes are used.

The current window is the default, so window. is usually not coded.

window properties include:

window.document a read-only reference

the value refers to the document ( page ) loaded in the window.

window.name

the optional name, which can be given to a window when it is created.

read-only references:

window.document

window.history

window.location

the values refer to the other three main objects,

which are the children of the window object

et cetera

frames object array

The frames parameter is a reference to an array of window objects.

Each window object is the model for one frame or iframe contained directly in this window. Each of these frame objects may contain additional frames and iframes.

document object

We have been working with the document object.

It contains

document.defaultView a read-only reference

refers to the window containing the document

( View means window in DOM terminology )

document.CSSStyleSheet[] an array

references to all the style sheets,

in style elements and referred to in link elements

document.documentElement a read-only reference

refers to the root element of the document

( this is the element that contains all other elements in the page )

( for an html document this is the html element )

All the other elements in the page are descendents of the root element

et cetera

There are many useful methods for the document element including:

document.getElementByID()

document.createElement()

et cetera

history object

The history object has methods to go forward or back in the history of visited pages:

document.history.back()

document.history.forward()

document.history.go()

location object

The location object has properties describing the current URL and other things about the current page's source.

location properties:

document.location.href can be changed to load a new page

et cetera

other properties are read only.

location methods:

document.location.reload() reload current page

document.location.replace() replace with a new page

screen object

Properties describing the screen:

availHeight availWidth pixel size of a full screen browser

height width total size including task bar and other stuff

colorDepth bits per pixel, to contain color information.

***********************************************************

Summary

We have seen some of the Document Object Model.

We have seen the top level objects:

- navigator (browser)

- window

- document

- history

- location

This is just a start at understanding the Document Object Model.

The Document Object Model can be used to change the content of the current page.

Change the model, and the browser will change the page to match.

This allows dynamic changes in web pages;

but that is another course.

In this course we have learned most of the JavaScript language, and a little of the Document Object Model. The primary useful activity that is done with this skill set is to validate forms. It is widely used for this.

Our knowledge of JavaScript and a little of the Document Object Model provides a basis to learn two additional sets of skills, with their related capabilities.

1) JavaScript and a little DOM - validate forms

2) JavaScript and DOM - dynamic web pages

3) JavaScript, some of the DOM, and the httpXMLRequest object

- this is called Ajax

- this allows asynchronous updating of the material in a web page,

without reloading the web page

- Ajax is a powerful new technology.

I think Ajax will change the fundamental way that applications operate in a personal computer or hand-held data device. This revolution is just beginning.