This is a very nice JavaScript calculator program to demonstrate simple operations such as addition, multiplication and division. Although the source code can get quite confusing, it works.

<!-- ONE STEP TO INSTALL ADVANCED CALCULATOR:
 
   1.  Paste the coding into the BODY of your HTML document  -->
 
<!-- STEP ONE: Copy this code into the BODY of your HTML document  -->
 
<form name="Keypad" action="">
 
<!--  Original:  http://www.dummyproof.com/javascripts -->
 
<!--Total Java Scripts 99 - Next Step Software-->
 
<table>
<b>
<table border=2 width=50 height=60 cellpadding=1 cellspacing=5>
<tr>
<td colspan=4 align=middle>
<input name="ReadOut" type="Text" size=24 value="0" width=100%>
</td>
<td>
<input name="btnClear" type="Button" value="  C  " onclick="Clear()">
</td>
<td><input name="btnClearEntry" type="Button" value="  CE " onclick="ClearEntry()">
</td>
</tr>
<tr>
<td>
<input name="btnSeven" type="Button" value="  7  " onclick="NumPressed(7)">
</td>
<td>
<input name="btnEight" type="Button" value="  8  " onclick="NumPressed(8)">
</td>
<td colspan="2">
<input name="btnNine" type="Button" value="  9  " onclick="NumPressed(9)">
</td>

<td>
<input name="btnNeg" type="Button" value=" +/- " onclick="Neg()">
</td>
<td>
<input name="btnPercent" type="Button" value="  % " onclick="Percent()">
</td>
</tr>
<tr>
<td>
<input name="btnFour" type="Button" value="  4  " onclick="NumPressed(4)">
</td>
<td>
<input name="btnFive" type="Button" value="  5  " onclick="NumPressed(5)">
</td>
<td colspan="2">
<input name="btnSix" type="Button" value="  6  " onclick="NumPressed(6)">
</td>
<td align=middle><input name="btnPlus" type="Button" value="  +  " onclick="Operation('+')">
</td>
<td align=middle><input name="btnMinus" type="Button" value="   -   " onclick="Operation('-')">
</td>
</tr>
<tr>
<td>
<input name="btnOne" type="Button" value="  1  " onclick="NumPressed(1)">
</td>
<td>
<input name="btnTwo" type="Button" value="  2  " onclick="NumPressed(2)">
</td>
<td colspan="2">
<input name="btnThree" type="Button" value="  3  " onclick="NumPressed(3)">
</td>

<td align=middle><input name="btnMultiply" type="Button" value="  *  " onclick="Operation('*')">
</td>
<td align=middle><input name="btnDivide" type="Button" value="   /   " onclick="Operation('/')">
</td>
</tr>
<tr>
<td>
<input name="btnZero" type="Button" value="  0  " onclick="NumPressed(0)">
</td>
<td>
<input name="btnDecimal" type="Button" value="   .  " onclick="Decimal()">
</td>
<td colspan=3>
</td>
<td>
<input name="btnEquals" type="Button" value="  =  " onclick="Operation('=')">
</td>
</tr>
</table>
</table>
</b>
</form>

<script language="JavaScript">
<!-- Begin
var FKeyPad = document.Keypad;
var Accum = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value  = Num;
FlagNewNum = false;
   }
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
   }
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accum += parseFloat(Readout);
else if ( '-' == PendingOp )
Accum -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accum /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accum *= parseFloat(Readout);
else
Accum = parseFloat(Readout);
FKeyPad.ReadOut.value = Accum;
PendingOp = Op;
   }
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
   }
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
   }
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accum = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);
}
// End -->
</script>
 
<!-- Script Size:  4.05 KB  -->

Here is the screenshot of the calculator program and how it looks like in the web browser. You can further strengthen this script and format it as per the browser by using this JavaScript code to find browser information. It is difficult to understand the difference between JavaScript array [] and JavaScript object {}, so this tutorial explains this difference in between JavaScript object{} and array[] and gives practical examples to demonstrate both array and object concepts.

JavaScript Calculator