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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 | <!-- 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.
