Javascript is pretty good at math.
Copy this and run it...
<html>
<head>
<title></title>
<script type="text/javascript">
function MathThing()
{
firstnumber = prompt("Give me a number.", "");
secondnumber = prompt("Give me another number.", "");
total = firstnumber * secondnumber;
alert(firstnumber + " x " + secondnumber + " = " + total);
}
</script>
</head>
<body>
<a href="javascript:MathThing()">Click me</a>
</body>
</html>
It simply requests two numbers and multiplies them together. Note that in most programming languages, * means multiply. If we used x we would continually confuse it with the letter x. xxx (x times x) would raise a few eyebrows.
Also, for the sake of simplicity, we haven't done any error checking. We do nothing to make sure that the user actually enters a number. He could very well enter Joe and 0%. This would result in...
Joe x 0% = NaN (Not a Number)
As you go on to develop scripts for various purposes, you'll find that a big part of your task is dealing with errors. In other words, how can things go wrong and how do we handle it. Fortunately, we'll worry about that later. We'll keep things simple for now.
Now try adding the numbers instead...
<html>
<head>
<title></title>
<script type="text/javascript">
function MathThing()
{
firstnumber = prompt("Give me a number.", "");
secondnumber = prompt("Give me another number.", "");
total = firstnumber + secondnumber;
alert(firstnumber + " + " + secondnumber + " = " + total);
}
</script>
</head>
<body>
<a href="javascript:MathThing()">Click me</a>
</body>
</html>
Hmmm. Something's wrong... 3 + 6 = 36? Ok, we can see what's happening here but, what do we do about it? Well, if we suspect that a number might be regarded as a string instead of a number we could multiply each variable by 1. This would kinda force it into being a number.
Some programming languages are very finicky about declaring at the outset whether a variable is a number, or a string, or whatever. Javascript is not so picky. If necessary, the browser will make an assumption. This makes it simpler for the programmer, but sometimes the browser assumes wrong and we have these little glitches to worry about. No biggie. You'll find it's a predictable glich. Or rather, it's not a glitch... it's a "feature". 
Try this instead...
<html>
<head>
<title></title>
<script type="text/javascript">
function MathThing()
{
firstnumber = prompt("Give me a number.", "");
secondnumber = prompt("Give me another number.", "");
total = (firstnumber * 1) + (secondnumber * 1);
alert(firstnumber + " + " + secondnumber + " = " + total);
}
</script>
</head>
<body>
<a href="javascript:MathThing()">Click me</a>
</body>
</html>
That, ladies and gents, is a workaround. A workaround is a creative solution to a built-in shortcoming. You'll run into these little snags now and again, and you may have to come up with a workaround.
Now think about something... doesn't it make sense that the majority of little snags you are likely to encounter have already been encountered (and subsequently solved) by others? Wouldn't it be nice to see how someone else may have solved your exact problem? Well, there are two resources that I want to introduce you to. The first is...
For the beginning or even the experienced javascript programmer, this is one of the most valuable resources you'll find. It started out as Martin Webb's javascript FAQ and has evolved into a really incredible pile of useful information. Here you'll find answers to hundreds of scripting questions, all divided by category.
The second resource is...
Google Groups (Advanced Search)
Google Groups is the latest and greatest archiver of all newsgroup discussions. Anything anyone has ever posted on any one of 30,000+ newsgroups is stored there and the search facilities are plenty strong. There happens to be a newsgroup called comp.lang.javascript where javascript related issues are discussed on a daily basis. Past discussions are searchable and are an incredible wealth of information.
As a javascript programmer, it is in your very best interest to make full use of these two resources. Any problem you are likely to ever have has probably been had by others and the solution can almost certainly be found within these resources.
Alrighty, back to math. Arithmetic operations are fairly consistent across most computer languages...
12 + 2 12 plus 2 12 - 2 12 minus 2 12 * 2 12 times 2 12 / 2 12 divided by 2
Javascript uses the standard order of operations...
6 + 3 * 4 = 18
It's not 36 because multiplication and division operations are done before addition and subtraction operations. If we wanted to add 6 + 3, then multiply the result by 4, we would use parentheses...
(6 + 3) * 4 = 36
Exercise: Write a page whereby when you click on a link, it asks you for a number. Then I want you to multiply that number by three and display it in an alert box like so: 5 * 3 = 15
Exercise: Expand that page so that AFTER it alerts you to the answer, it asks you for ANOTHER number and adds THAT to the previous answer, and then pops up ANOTHER alert box with something like: (5 * 3) + 2 = 17
Whew! That one was tough. I never said it was easy, but hey... this is how you learn. You'll pull out a lot of hair before you're through. As I've said before though, the more you practice, the easier it gets... I promise.
| Javascript Tutor |
| Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
| Javascript Authoring Guide JavaScript FAQ |
| HTML 4.0 Reference Google Groups (Advanced Search) |
|
|
|
|
