JavaScript routines

by Alan Wrigley


The routines supplied on this disc accompany the article on JavaScript in this month's RISC User magazine, and are intended to provide a couple of examples of ways in which JavaScript can be used.

Running the item from the RISC User menu opens an archive containing a selection of files. To use these you will need a browser that is capable of interpreting JavaScript. At the time of writing no Acorn browser can do this fully, although WebsterXL from R-Comp, which has limited JavaScript capability, can display one of the included samples correctly and Acorn's Browse will be able to handle JavaScript in a later version (which may possibly be available by the time you read this). Otherwise you will need to use a recent version of Netscape Navigator or Microsoft Internet Explorer on a PC, or on a PC card in a Risc PC.

The HTML file slab/html is a simple page that displays a 3D button with the legend Click me. As you move the pointer over the button you will see that the 3D image automatically 'slabs in', i.e. it becomes depressed. When you move the pointer away it reverts to its normal slabbed-out state. This is done by using two JavaScript handlers on the image, onMouseOver and onMouseOut. These are activated as the pointer moves on and off the image respectively, and call a script function with the name of an image file as the parameter. This function changes the image source (which is a property of the image) to the name specified, by calling a method associated with the image object.

The image also has a third handler, onClick. This is activated when the mouse is clicked over the image, and in this instance it simply calls the window.alert() method - this is a standard feature of JavaScript which puts up a simple dialogue box containing the text passed to alert().

The features in slab/html will work with version 1.64 of WebsterXL.

The second HTML file is a little more complex. It contains a form which has been taken from an existing Web site enabling visitors to order photographic prints. There are a number of fields that have to be filled in, and if any information is missing the form can't be processed properly. Normally this requires a CGI script on the server to examine the form and send back an HTML page asking the user to complete the missing information. However, this often means that what you did type into the form is lost and you must start again and enter the whole thing.

Using a JavaScript function to examine the form before it is submitted to the server can avoid this problem. What happens on this page is that the usual Submit button for the form (i.e. the one that sends the form to the server) has been changed into a standard button with an onClick handler. The handler calls a JavaScript function that examines each field of the form to see that it contains valid information. If everything is correct, it calls the form's submit() method (a standard built-in JavaScript function). If not, it displays an alert box detailing the fields that need to be re-entered.

The next article in the JavaScript series in RISC User will give a more detailed explanation of the JavaScript functions used in these examples.


Copyright  RISC User magazine 1998