Home | Windows | Linux | Hardware | Shopping | Web Building | Downloads | Tech Support
Webpedia
 

 Front Door
 Animations
 Discussion
 Interviews
 Opinions
 Reports
 Tools
 Tutorials

 Downloads »

 Browse by subject.
Free Weekly Newsletter!

A free service rounding up the week's news, articles, tips and reviews.

text html
Internet News
Internet Stocks
Internet Technology
Web Developer
Internet Marketing
ISP
Downloads
Internet Resources
International

Search internet.com
Advertising Info
Corporate Info
Internet Trade Shows
Print this article
Email this article
Related Items

•  JavaScript

•  Download JavaScript Editors


  Webpedia / Tutorials



Free Internet Marketing info!

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

Earn cash for Clicks!

internet.com home | write us | search | help! | about us

 Copyright © 1999 internet.com Corporation. All Rights Reserved.
About internet.com Corp. | Press Releases
Privacy Policy | Career Opportunities