[main] [misc] [graphics] [page design] [site design] [xhtml] [css] [xml] [xsl] [schema] [javascript] [php] [mysql]

Blackboard HVCC
Blackboard Manual
Faculty Association

javascript main
1. javascript basics
2. core javascript
3. js statements
4. js functions
5. js arrays
6. js objects
7. debugging js
8. js client side
9. the js bom
a. js window object
b. js document object
* c. other js objects
10. js frames and windows
11. js forms
12. js regexp
13. js cookies
14. basic dhtml

print version

Note that all external links will open up in a separate window.

This is a stripped down version of these pages for older browsers. These pages are really meant to be viewed in a standards compliant browser.

Directions for surfing with audio.

Other BOM Objects

These tutorials are about JavaScript and its use for client-side Web programming.

The Lesser (but no less important) Objects

The two most important object we will be dealing with are the window and document objects. But there are some other useful objects worth mentioning. We will touch on them briefly here.

The history Object

The history object tracks what pages the user has visited in the current browser session. It is stored as a data stack that allows the user to use the Back and Forward buttons to move through the stack.

The history object is different from the history list, which is what you get when you click on the down arrow next to the address bar in the browser. The history object only contains the current set of documents visited and can only store one path at a time, so of you back up and go into a different document, any prior documents that would be forward of the current document have been replaced by the new document chosen. In other words, each document can only have one document that is prior to it and one that is next. The history list on the address bar is just an alphabetical listing of places the user has visited recently.

This history object includes back( ); and forward( ); methods, which do the same thing as the navigation buttons on the browser tool bar of the same name. It also has a go( ); method which allows the you to write code that moves back or forward more than one page at a time. It takes an integer as a value that specifies how many pages to move. A positive number moves the user forward, a negative number moves the user back. This means that history.go(-1); is the same thing as history.back( ); and history.go(1) is the same as history.forward( );.

The location Object

The location object stores the URL of the current page. It contains a property called href that contais the URL of the current page as well as properties that contain each individual element of the address.

You can use it to change the current page being displayed by assigning a new value to the href property:

location.href = 'newpage.html';

As with normal addressing, you can use either relative or absolute addressing in the assignment.

The location object also contains a method named replace( );. This method also loads the new page specified except that it replaces the current page with the new page in the history list. This means that as far as the browser is concerned, the initial page was not visited in this session.


Replace is best used when you don't want people returning to a previous page. For instance, have you ever gotten caught on a site where you pressed the back button but it just kept reloading the current page? What happened is the original URL you put in took you to a page that forwarded you to a new page. When you go back a page, you go to the page the sends you forward again. If replace was used to load the new page, then the page the forwarded you would no longer be in the history list and you could move back past it.

The navigator Object

The navigator object stores information about the browser being used to view the document as well the operating system being used to run the browser. It gets its name from the fact that JavaScript was created by Netscape. It's most common use is testing for what browser is being used to view the page so that the code can adapt to the different needs of different browsers.

If you remember this code from a previous tutorial, I test for whether the user is using Netscape Navigator. Since Navigator versions prior to Netscape 6 do not understand some of the CSS style rules I specified, I have to fake them with JavaScript.

if (navigator.appName == "Netscape") {
  widthval = window.innerWidth;
  posit1 = widthval - 300;
  document.corner.left = posit1;

What it does is check to see how wide the window is and aligns a 300 pixel image with the right margin by setting the CSS left position property to 300 less than the width of the window.

Here is a simple example that returns the name of the browser and the type of platform (operating system) being used.

-- using navigator.appName
-- using navigator.platform

<form class="example" method="get"
» action="javascript: return false;"
» id="form2" name="form2">
<input type="button" 
  value="Browser Type" name="btype" 
  onclick="window.alert('You are using ' +
» navigator.appName + '.');" />
-- using navigator.appName:
<input type="button" 
  value="Platform Type" name="ptype" 
  onclick="window.alert('You are using a ' +
» navigator.platform + ' platform.');" />
-- using navigator.platform:

The screen Object

The screen object contains information about the display properties of the computer being used to view the page. It can be used to determine the abilities of the display so that the page can be modified for different displays if necessary.

Here are some examples of it in use:

-- using screen.width
-- using screen.height
-- using screen.color Depth

<form class="example" method="get"
» action="javascript: return false;" 
» id="form3" name="form3">
<input type="button"
  value="Screen Width" name="wtype"
  onclick="window.alert('Your screen is ' +
» screen.width + ' pixels wide.');" />
-- using <code>screen.width</code>
<br />
<input type="button" 
  value="Screen Height" name="htype"
  onclick="window.alert('Your screen is ' +
» screen.height + ' pixels tall.');" />
-- using <code>screen.height</code>
<br />
<input type="button"
  value="Color Depth" name="ctype"
  onclick="window.alert('Your monitor has ' +
» screen.colorDepth + '-bit color.');" />
-- using <code>screen.color Depth</code>