Arithmetic in JavaScript
An earlier
program
example asked the user for their name and said hello. To
do this it added together three strings, "Hello", the user's name
and a full stop ".":
alert("Hello " + userName + ".");
Let's try to do the same with numbers:
<html>
<!-- Calculations -->
<head>
<title> Calculations </title>
</head>
<body>
<!-- There's no need for a body at all -->
<script>
// Ask for two numbers and add them together.
first = prompt("Enter a number:", "")
second = prompt("Enter another number:", "")
result = first + second
document.write (first + " + " + second + " = " + result)
</script>
</body>
</html>
If you entered 1 and 2 as the two numbers then you'll see that you get a
page saying:
1 + 2 = 12
Obviously wrong. It seems that the browser can't add up. Let's see if it knows
how to multiply. Change your code to read:
result = first * second
document.write (first + " * " + second + " = " + result)
Run it and you should get a page with the right answer:
1 * 2 = 2
So it looks as though the browser can multiply but it can't add up. This seems
odd to say the least.
Text and numbers
The problem here is being caused by the prompt method. The earlier
example
showed that this will display a message on the screen and give us the text that
the user types into the box and the clue lies in the word "text". Whatever the
user types into the box is going to be treated as though it's text. It doesn't
matter whether the characters look like a name, a number or a date, the
prompt will return it as text.
The browser knows what to do when it sees a "+" sign between two pieces of
text - it has to put the two pieces together into a longer string of text and
that's exactly what it does with "1" and "2". It concatenates the two strings to
give "12" as the result.
That explains why the first program failed but not why the second program
worked. The process runs much the same as before until the point where the
program is deciding what to do with the two pieces of text it's had back from
the prompts. Instead of a "+" it sees a "*" and it knows that this means that
the two items have to be multiplied together. It also knows that this isn't
possible so, rather than just giving up and displaying an error, the browser
converts the two strings into their numeric equivalents and carries on with the
calculation.
This is fine for multiplication but how do we cope with the original problem of
addition? The answer is JavaScript's
parseInt()
function.
|
