="ch25.htm">

Chapter 25 -- JavaScript Task Reference

Chapter 25

JavaScript Task Reference

CONTENTS

JavaScript provides tools to perform a variety of tasks in an HTML document without the need to interact with the server.

New Browser

One of the powerful features of JavaScript that makes it useful for implementing demonstrations and tours is its ability to spawn new versions of the client browser with controllable levels of functionality.

The basic command to create a new browser is:

windowVar = window.open("URL", "windowName" [, "windowFeatures"])

To open a plain window with hotlink-only navigation:

//Note: Setting one feature automatically sets all non-mentioned features to false.
window.open("URL", "windowName", "toolbar=no")

To open a window without the directories or menubar:

window.open("URL", "windowName",
"toolbar=yes,location=yes,directories=no,status=yes,menubar=no,scrollbars=yes,
resizable=yes")

For more information, see:

window object
open method

Creating a Custom Navigation Web Site

One of the powerful capabilities of JavaScript is its ability to control the functionality of the browser (see the previous section "New Browser"). This is useful for creating guided-tour or demonstration programs. To create a site requires a front door that generates the rest of the application:

<FORM>
<INPUT TYPE="button" NAME="tour" VALUE="Start Tour"
onClick="window.open('tourframes.html','tourWindow','toolbar=no')">
</FORM>

The tourframes.html file creates the frames containing a starting page and navigation bar:

<FRAMESET COLS="%10,%90">
<FRAME SRC="navbar.html">
<FRAME SRC="tourstart.html" NAME="contentWin">
</FRAMESET>

The navBar file is a simple set of buttons with custom onClick event handlers to direct the browser:

<FORM NAME = "navBar">
<INPUT TYPE="button" NAME="back" VALUE=" <-- Back "
onClick="contentWin.document.history.back()">
<INPUT TYPE="button" NAME="forw" VALUE="Forward -->"
onClick="contentWin.document.history.forward()">
<INPUT TYPE="button" NAME="home" VALUE="Home"
onClick="contentWin.document.history.go(0)">
<INPUT TYPE="button" NAME="quit" VALUE="Quit the Tour"
onClick="parent.close()">
</FORM>

To prevent premature escapes, the quit button could also call a function that confirms the user's choice before closing the window.

For more information, see:

button, document, form, history, and window objects
back, close, forward, and go methods
top and parent properties
onClick event handler

Self-Resetting Status Messages

A sometimes annoying side effect of the window.status property is its persistence. Once set, it doesn't change unless another window.status assignment is encountered.

You can overcome this attribute using the setTimeout method:

timeDelay = 1500 //1.5 seconds
function eraseStatus () {
     window.status = "" //This can also be set to a
'default' message.
};

function setStatus (statusText) {
     window.status = statusText;
     setTimeout("eraseStatus()",timeDelay)
}

Using these two functions is a simple matter of including the setStatus function in the onMouseOver event:

<A HREF=URL onMouseOver="setStatus('Your message here.'); return true">linkText</A>

For more information, see:

window object
status property
setTimeout method
onMouseOver event handler

Platform-Specific Newline Characters

Which version of the newline character to use depends on the platform used by the client. Windows needs an /r in addition to the /n needed for all other platforms. Since it's impossible to control which platforms access your page, a simple function can ensure that the proper form of the newline character is used:

function brk() {
  if (navigator.appVersion.lastIndexOf('Win') != -1)
     return "\r\n"
  else
     return "\n"
}

For more information, see:

navigator object
appVersion property
lastIndexOf method

Validating Form Information

Validating information through CGI scripts is a time-consuming process. Not only is there the added communication between the client and server, but time and expertise are also needed to develop the actual CGI script.

Including form validation with JavaScript directly on the HTML page increases the speed and localizes the process to the end user. This makes it much harder for end users to send incompatible data that could cause damage to the server.

There are several ways to do form validation but a basic tenet is adding a JavaScript function to a true submit button. The HTML definition of the submit button could look like this:

<INPUT TYPE="BUTTON" NAME="SUBMIT" VALUE="SUBMIT"
onClick="checkInformation(this.form)">

checkInformation provides for verifying that the information meets CGI script expectations. If not, it should at least return to the document without submitting or return focus to the offending items. If everything passes muster, then the function can also submit the form:

function checkInformation(form) {
  ...validation statements ...;
  if (validationPassed) {
     form.submit(); }
  return;
}

For more information, see:

form and button objects
focus methods
onClick event handlers

Creating Arrays

Although JavaScript uses arrays for several of its objects (forms, elements, etc.), it doesn't provide a straightforward method to create user-defined arrays-one of the staples of data processing.

Here is a function to create a new array by initializing the elements. This is useful for small arrays but is unwieldy for larger implementations:

function arrayCreator() {
  this.length = initArray.arguments.length;
        //counts the number of arguments included when the function is called
  for (var I=0; I<this.length; I==) {
     this[I+1] = userArray.arguments[I] //load the new values into the                                          a rray
  }
}

To initialize a new array, use the function with this syntax:

var arrayName = new userArray(argument1[,argument2][,argument3][etc.])