Javascript Tutor - Lesson 5

Javascript is pretty good at math.

Copy this and run it...

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="javascript"></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:MathThing()">Click me</A>

</BODY>
</HTML>

Try it.

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.

Now try adding the numbers instead...

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="javascript"></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:MathThing()">Click me</A>

</BODY>
</HTML>

Try it.

Hmm. 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 computer 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. It will make an assumption. This makes it simpler for the programmer, but then he has these little glitches to worry about. No biggie. Try this instead...

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="javascript"></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:MathThing()">Click me</A>

</BODY>
</HTML>

Try it.

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...
irt.org

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...

DejaNews (Power Search)

They've recently be reborn as "Deja.com", but their core resource is still invaluable... they are an 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 an absolute wealth of information.

As a javascript programmer, it is in your very best interest to make full use of these two 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

It 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"

Here is a solution.

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"

Here is a solution.

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.

Next>>

Lesson

Intro