Erik Østergaard - JavaScript Mathematical Expression Calculator / JavaScript matematisk udtryk regnemaskine

Here's the programming example every programming student hates -- creating a calculator. This simple example lets you type in and evaluate an expression. For example, you could type 25*34 using the numbers, or by clicking on the number buttons with your mouse. To see the result of the math, click the = sign button, just like a regular calculator.

When doing calculations, this calculator follows the standard order of precedence. For example 10+5*3 results in 25 (after you press the = button.) Whereas (10+5)*3 results in 45 because the parentheses force the addition to take place first.

Use only the period (.) as a valid decimal separator.

The C button clears the current entry, the Bk button backspaces one character.

## Mathematical Expression Calculator

The JavaScript code for this example, originally written by Alan Simpson in 1996, isn't quite as complex as you might think. Most of the code consists of JavaScript functions that go between the `<head>` and `</head>` tags in your web page. Here's that code:

``````<script language="JavaScript"><!--
//-- JavaScript code written by Alan Simpson - www.coolnerds.com
document.calc.shownum.value += anystr
}

function calcit() {
document.calc.shownum.value = eval(document.calc.shownum.value)
}

function clearit() {
document.calc.shownum.value = ""
}

function backspace() {
curvalue = document.calc.shownum.value
curlength = curvalue.length
curvalue = curvalue.substring(0,curlength-1)
document.calc.shownum.value = curvalue
}
//--></script>
``````

The eval function is a built-in function in JScript itself, which is not a method, and is never applied to an instance using the dot operator (.). It is on the same plane as a function that you create using the function keyword. The eval function attempts to evaluate its string argument as a JScript expression and return its value. All the normal rules for evaluating expressions, including variable substitution, are performed by the eval function. This function is extremely powerful simply because it evaluates any JScript expression, no matter what that expression does. This means, that you can pass the contents of an HTML (HyperText Markup Language) text field or textarea to the eval function, which promptly tries to execute the contents of that text field or textarea as JScript code. Try to type alert('Hello World!') using the keyboard and then click the = sign button. You can also try typing true or false and after each press the = button.

That's about it for JavaScript code. The rest of the calculator is done in HTML (HyperText Markup Language). The calculator itself is a form field and a graphic image. They're both in table cells to line up well:

``````<center>
<table border="1" bgcolor="#C0C0C0">
<form name="calc">
<tr>
<td width="213"><center><p>
<!-- The field below is where users type numbers and see results. -->
<input name="shownum" size="25"></p></center>
</td>
</tr>
<tr>
<td width="213">
<center><p>
<!-- Here's the graphic image of calculator buttons. -->
<!-- Each button is a hot spot defined in an image map named calcmap. -->
<img src="calcbttn.gif" alt="" width="206" height="153" hspace="0" vspace="0" border="0" align="middle" usemap="#calcmap">
</p></center>
</td>
</tr>
</form>
</table>
</center>
``````

Alan Simpson used LiveImage (previously named Map This!) to create the image map for the calculator. Below is the HTML (HyperText Markup Language) that LiveImage created. Each area shape relates to a button on the calculator, and calls one of the JavaScript functions defined in the head of this page when clicked on.

``````<map NAME="calcmap">
<!-- #\$-:Image Map file created by Map This! -->
<!-- #\$-:Map THIS! free image map editor by Todd C. Wilson -->
<!-- #\$-:Please do not edit lines starting with "#\$" -->
<!-- #\$VERSION:1.20 -->
<!-- #\$AUTHOR:Alan Simpson -->
<!-- #\$DATE:Sat Mar 16 10:56:04 1996 -->
<!-- #\$PATH:C:\JavaScript\ -->
<!-- #\$GIF:calcbttn.gif -->
<area SHAPE="RECT" COORDS="89,116,119,141" HREF="javascript:calcit()">
<area SHAPE="RECT" COORDS="165,43,196,70" HREF="javascript:backspace()">