Beginner's JavaScript

Java without all the tedious programming? Not quite.

1 2 3 Page 3
Page 3 of 3
onBlur          when an text, selection, or textarea field looses focus
onChange        when a selection, text, textarea field is modified or 
looses  
        focus
onClick         when a button, checkbox, link, or radio object is clicked 
or 
        selected
onFocus         when a selection, text, or textarea field is focused
onLoad          when a window or a FRAME is loaded
onMouseOver     when the mouse is moved over a hyperlink
onSelect        when text in a text or textarea field is selected
onSubmit        when a FORM is submitted
onUnload        when a window or FRAMESET is closed or a new page is 
displayed 

An event handler is added as a new parameter to a given tag. For example,

<INPUT TYPE="button" VALUE="Total Amount" 
ONCLICK="doTotalAmount(this)">

This example will attempt to perform a calculation as described by the text. It uses the new Button type input field, which is used only with client-side scripting.

<A HREF="second_page.html" ONMOUSEOVER="window.status='Go on to Page 2'; 
return true;">Next Page</A>

The second example shows a quick way for you to display a text message in the status bar of the browser about the link the user is about to select.

Simple calculation with JavaScript

In this example, we will take two values that have been entered into INPUT fields in a FORM and calculate a new value from them.

<HTML>
<HEAD>
<TITLE>Calculate this, buddy!</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var myAge;
var dadsAge;
function HowOld(form)
{
  var difference;
  difference = dadsAge - myAge;
  form.Fdiff.value = difference;
}
function SetMyAge(age)
{
  myAge = age.value;
}
function SetDadsAge(age)
{
  dadsAge = age.value;
}
// -->
</SCRIPT>
<BODY>
<FORM METHOD="POST">
<TABLE CELLSPACING=15>
<TR>
<TD>Enter your Age:</TD>
<TD><INPUT TYPE=text NAME=Fmyage SIZE=4 
ONCHANGE="SetMyAge(this)"></TD>
</TR>
<TR>
<TD>Enter your Dads Age:</TD>
<TD> <INPUT TYPE=text NAME=Fdadsage SIZE=4 
ONCHANGE="SetDadsAge(this)"></TD>
</TR>
<TR>
<TD COLSPAN=2><INPUT TYPE=BUTTON ONCLICK="HowOld(this.form)" 
VALUE="How much older is Dad?"></TD>
</TR>
<TR>
<TD COLSPAN=2>You are <INPUT TYPE=text NAME="Fdiff" VALUE="" 
SIZE=3> 
years younger than your dad. <P></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

A short calculation Javascript

This HTML file only contains a table with three INPUT fields (one of them is really an output field) and one button to perform the calculation. Without getting too detailed in making a complex spreadsheet, this file shows the very basic of adding two numbers; something you learned back in kindergarten. It employs "safe" means of accessing variables within the document through accessor functions like SetMyAge() and SetDadsAge(). Essentially, you will be dealing with objects that are more complex than a simple integer. You could create an object with several properties, each of which needs to be set, and can do so with similar accessor functions. Note also that this file sets a value of an object within the document; in this case, the INPUT tag named "Fdiff" is set to the value of the calculation. Things we haven't added yet include error-checking methods to make sure that you actually did enter values for your age and your dad's age.

Conclusion

In the next issue of

JavaWorld

, we will take a look at larger and more useful programs that can be written in JavaScript. Primarily we will take care of error checking within HTML forms and then move on to creating Netscape FRAMEs which interact with JavaScript. Needless to say, reading about JavaScript will not simply do the trick; just like playing tennis or football, you have to actually do it to make the most of it. To get a good start, read the documentation for JavaScript found on Netscape's Web site. Also, if you are not part of the Netscape Developer Program, you may wish to join so you can participate in the secured newsgroups that discuss JavaScript avidly.

Rawn Shah is vice president of RTD Systems & Networking Inc., a network consultancy and integrator based in Tucson, AZ.

This story, "Beginner's JavaScript" was originally published by JavaWorld.

Copyright © 1996 IDG Communications, Inc.

1 2 3 Page 3
Page 3 of 3