JavaScript Primers #14

http://www.htmlgoodies.com/primers/jsp/article.php/3478261/JavaScript-Primers-14.htm (Back to article)

Use these to jump around or read it all

The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment

The Concept

This page will not only show you how to use numeric values to perform computations with JavaScript, but it will also test your basic math skills. There may be a test later.... Its purpose is to introduce you to variables, something you'll use often. If you've done any programming, you should be experiencing deja vu! If not, don't panic. This is an easy introduction!

The Script

<BODY>
   <SCRIPT type="text/javascript">
       var numsums = 10 + 2
            alert("10 + 2 is " + numsums)
       var x = 10
            alert("ten is " + x)
       var y = x * 2
            alert("10 X 2 = " + y)
       var z = "Hello " + "Good Bye"
      alert(z)
   </SCRIPT>
</BODY>

The Script's Effect

Try to figure out the value of each of the variables before running this script.

Deconstructing the Script

<BODY>
   <SCRIPT type="text/javascript">
       var numsums = 10 + 2
            alert("10 + 2 is " + numsums)
       var x = 10
            alert("ten is " + x)
       var y = x * 2
            alert("10 X 2 = " + y)
       var z = "Hello " + "Good Bye"
      alert(z)
   </SCRIPT>
</BODY>

Here's the quick rundown. The script sets a variable for "numsums." Can you see that it is equal to 12 (10+2)? It then transfers that variable to an alert method and displays that 10 + 2 = the variable or 12. With me?

Another variable, "x", is set to equal 10. The alert method then displays that value.

Another variable, "y", is set to equal the "x" variable multiplied by 2. That should be twenty, right? That answer then displays in the alert method.

Finally, the variable "z" is created showing you can connect text using the computation symbols. That variable is then displayed using the alert methods.

Did you see all that working? Run the script again and you'll see each alert pop up using the variables created through computational symbols.

Here's the Deal:

Variables begin with VAR (for variable) followed by a name, an equal sign, and a value. You can leave off the VAR if you choose to, but I suggest keeping it so you can keep it all straight in your own head.
A variable name can be one or many letters. We recommend that you use meaningful names, even if we don't always do that.
Variable names are case-sensitive! This means that 'Myvar' and 'myvar' are two entirely different names.
The number of characters allowed in a variable name varies greatly. Keep names 10 characters or fewer to be safe. Do not use spaces in names.
The value assigned to text variables must be surrounded by quotes. No quotes are allowed for numeric variables. If you do put quotes around a number, it becomes text with a numeric value of 0. YIKES!
On a computer, addition, subtraction, multiplication, and division use +, -, *, and /, respectively.
The plus sign (+) will perform two tasks: Addition with numbers or pasting together two strings of text (for example, Joe + Burns would be Joe Burns).
All programming languages have Reserved Words and so does JavaScript. Any JavaScript book will list them. Using Reserved Words as variable names will cause errors. For example, using onMouseOver as a variable name is not a good idea.
If you use spaces in your variable names, include an underscore where the space should be.

What You Have Learned

Your Assignment

Rewrite the JavaScript above as a function. You may change some of the math to experiment with division, if you wish. Include a Welcome message in the body of your HTML document. Use the OnLoad event to run your function.

Here's a possible answer
(this will open a new window)

The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment

On To JavaScript Primer #15