Click here to sign up for a FREE Refer-it Webmaster Account
Find a job or the right person
|
|
 |
 |
|
Beginners Guide to JavaScript
(Part 2)
By Richie Lai
Our First Script
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. function AddNumbers() // --> <FORM NAME="AddForm1"> <INPUT TYPE="text" NAME="Value1" SIZE="3"> + </FORM> <HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
{
x = eval(document.AddForm1.Value1.value) + eval(document.AddForm1.Value2.value);
alert(x);
}
</SCRIPT>
</HEAD>
<INPUT TYPE="text" name="Value2" SIZE="3">
<INPUT TYPE="button" onClick="AddNumbers()" VALUE="Answer!">
</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.
^--This document |-- Second tier name.. in this case, |-----| Third tier name... in this | Finally, value is document.AddForm.Value1.value
the name of the form
case, the name of the text input
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.
function AddNumber2(x,y) // --> <FORM NAME="AddForm2"> <INPUT TYPE=TEXT NAME="Value1" SIZE=3> + </FORM> </BODY><HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
{
answer=eval(x)+eval(y);
alert(answer);
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE=TEXT NAME="Value2" SIZE=3>
<INPUT TYPE=BUTTON ONCLICK="AddNumber2(this.form.Value1.value,this.form.Value2.value)" VALUE="Answer!">
</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...
This article first appeared April 11th, 1999.
Copyright © 1999-2000
internet.com Corp.All Rights Reserved. Legal Notices.
Contact the WebDeveloper.com® staff
Last modified: Thu Jun 15 06:12:37 EDT 2000
Refresh Daily
Join Editor-in-Chief David Fiedler
and find truth, justice, and a clue or two.
ActiveX / VBscript Animated GIF Archive Browsers CGI / Perl Database Connectivity Design / Graphics E-Commerce HTML-Advanced: DHTML, CSS HTML / Site Authoring Tools Intranet/Groupware Java JavaScript Multimedia: Audio / Video / Streaming Technologies Opinions Refresh Daily: Editorial Column Security Servers & Server Tools Site Design / Graphics Site Management / Marketing / Log File Analysis Tutorials VRML / 3D XML
