Mathematical Expression Calculator

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.

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
function pad(anystr) {
   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="10,80,40,106" HREF="javascript:pad('1')">
<area SHAPE="RECT" COORDS="49,80,78,106" HREF="javascript:pad('2')">
<area SHAPE="RECT" COORDS="88,79,117,106" HREF="javascript:pad('3')">
<area SHAPE="RECT" COORDS="128,81,158,105" HREF="javascript:pad('+')">
<area SHAPE="RECT" COORDS="11,115,39,141" HREF="javascript:pad('0')">
<area SHAPE="RECT" COORDS="49,115,78,142" HREF="javascript:pad('.')">
<area SHAPE="RECT" COORDS="89,116,119,141" HREF="javascript:calcit()">
<area SHAPE="RECT" COORDS="128,116,158,142" HREF="javascript:pad('-')">
<area SHAPE="RECT" COORDS="167,80,194,105" HREF="javascript:pad('*')">
<area SHAPE="RECT" COORDS="167,116,196,141" HREF="javascript:pad('/')">
<area SHAPE="RECT" COORDS="11,43,39,71" HREF="javascript:pad('4')">
<area SHAPE="RECT" COORDS="50,45,77,69" HREF="javascript:pad('5')">
<area SHAPE="RECT" COORDS="88,44,117,71" HREF="javascript:pad('6')">
<area SHAPE="RECT" COORDS="127,44,158,71" HREF="javascript:pad(')')">
<area SHAPE="RECT" COORDS="165,43,196,70" HREF="javascript:backspace()">
<area SHAPE="RECT" COORDS="10,7,40,33" HREF="javascript:pad('7')">
<area SHAPE="RECT" COORDS="48,7,81,35" HREF="javascript:pad('8')">
<area SHAPE="RECT" COORDS="87,7,117,34" HREF="javascript:pad('9')">
<area SHAPE="RECT" COORDS="127,7,156,34" HREF="javascript:pad('(')">
<area SHAPE="RECT" COORDS="166,7,195,35" HREF="javascript:clearit()">
</map>

And that's all the stuff for that example. Though to use it in your page, you'll need to also swipe that calcbttn.gif image that displays the calculator buttons!

This is a demonstration mathematical expression calculator implemented in JavaScript. You must have a JavaScript-capable browser for this to work. Note that keyboard entry is possible in this demo.

Mathematical Expression Calculator is a Javascript Program -- adapted from a sample calculator Javascript app "Coolnerds JavaScript Calculator Example" from Alan Simpson. You can see the JavaScript by using View Source.