Beginner's Guide to
JavaScript
Our First Script

Richie Lai
Now for our first script! Let's
create something that will cover a few things at once: a calculator
that will add two numbers inputted by a user. Basically, we're going
to take a form with two input fields and add them together, then
show a message box with the answer. Sound simple? It is. Let's look
at the code first, and then we'll go through and figure out what we
did.
<HTML>
<HEAD>
<SCRIPT
LANGUAGE="JavaScript">
<!--
function AddNumbers()
{
x =
eval(document.AddForm1.Value1.value) +
eval(document.AddForm1.Value2.value);
alert(x);
}
// -->
</SCRIPT>
</HEAD>
<FORM NAME="AddForm1">
<INPUT TYPE="text" NAME="Value1" SIZE="3"> +
<INPUT
TYPE="text" name="Value2" SIZE="3">
<INPUT TYPE="button"
onClick="AddNumbers()" VALUE="Answer!">
</FORM>
</HTML>
There are two important things to notice here. The first is the
way we get the values; to reference the first number we have to grab
it from the form.
document.AddForm.Value1.value
^--This document
|-- Second tier name.. in this case,
the name of the form
|-----| Third tier name... in this
case, the name of the text
input
| Finally, value is
the keyword used to get a
value
from the form
Now that we know that we should be able to reference anything in
this form. It's very important to keep the names and cases of your
fields straight, else this will fail.
The next thing you notice here is the eval()
. eval basically evaluates what you
pass to it. In this case, since we don't know what kind of variables
we are getting, we want to evaluate each value--we are getting the
integer value and then adding. If we were to omit the eval()
s, we would get Value1Value2
in the alert box since it
would concanate the values together.
Of course, there is more than one way to do everything. This same
script could have been inside another, only with parameters. Let's
look at another way of doing this.
<HTML>
<HEAD>
<SCRIPT
LANGUAGE="JavaScript">
<!--
function
AddNumber2(x,y)
{
answer=eval(x)+eval(y);
alert(answer);
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="AddForm2">
<INPUT TYPE=TEXT NAME="Value1" SIZE=3> +
<INPUT
TYPE=TEXT NAME="Value2" SIZE=3>
<INPUT TYPE=BUTTON
ONCLICK="AddNumber2(this.form.Value1.value,this.form.Value2.value)"
VALUE="Answer!">
</FORM>
</BODY>
</HTML>
The principle is exactly the same, but as you can see, design is
different. Doing this adds no advantage, but later, as we go into
more complex scripts, you will see that passing parameters is a huge
advantage to hardcoding. Now that we've established the basics,
let's move on.
Next: Forms
Manipulation »
Skip
Ahead

1 Introduction
and the Basics
2 General
Information
3 Our First
Script
4 Forms
Manipulation
5 Frames
Manipulation
6 The
OnMouseOver Event
7 Summary