Coding a Web Page Calculator

JavaScript has a top level function called the eval() function. This function takes a string as argument. The string can be an expression such as an arithmetic expression, e.g. “2 + 3.” Under this condition, the eval() function evaluates the arithmetic expression. Our standard calculator basically performs arithmetic expressions. We shall use the top level eval() functions to do all of our evaluations.

The evalString global variable is the string to be evaluated. It is the argument for the eval() function. The string is developed as the user is typing information into the calculator.

The store, or what the user calls memory, is simply a variable, the memVar global variable. When the user clicks the M+ button to store the content of the display to the memory, the content of the display simply becomes the value of the memVar variable.

The global variable toClearDisplay is a Boolean variable. Its default and initial value is false. When it is true and you click a digit, the display is first cleared for the new digit to appear on the display. The fourth user’s requirement above states that when you click the +, -, X or / button, the next number typed replaces the number on the display. The toClearDisplay variable is used for that; we shall see the details soon.

To explain the rest of the operator(ID) function, we shall assume that the user wants to evaluate the arithmetic expression 2 + 3. So after the calculator has opened, we assume that the user clicks 2. The digit 2 appears on the display (this is the result of the showNum(ID) function). Next he clicks the + button. The + sign does not appear on the display; this is how physical calculators behave. As soon as he clicks the + button, the operator(ID) function is called for the first time.

When the operator(ID) function is called for the first time, it develops the first part of the evaluation string, which is the left-most part. To do this it simply reads the content of the display. In our example, the evalString global variable would then be “2” instead of “”, which is its initial state. After this, the execution of the operator(ID) function will continue with the switch statement.

The operator(ID) function is called when the user clicks any of the non-digit buttons. The ID of the button is sent as an argument to the operator(ID) function. The ID is used by the switch statement. Continuing with our example, if the ID is BP, it means the + button was clicked. This corresponds to ‘case “BP”:’ in the switch statement. The code for this case adds “ “ to the evaluation string, and then it adds “+” to it, and finally it adds “ “ again. The evalStrnig now becomes “2 + ”.

Continuing with our example, the user now clicks the digit 3. The previous number 2 on the display disappears and the digit 3 appears (this is the result of the showNum(ID) function). Then the user clicks the Equal Sign button. The operator(ID) function is called with the ID of “BEQ” for the clicked button. The first code segment of the operator(ID) function adds the number 3 from the display to the evalString.

The evalString is now “2 + 3” and ready for evaluation. After this, the code for the case statement for the equal sign calls the eval(evalString) top level function. The content of the evalString, which is now “2 + 3,” is evaluated. The code for this case writes the result of the evaluation to the display (namely 5), replacing the previous number (3). This code also resets the evalString to “”. As such, you can use the result on the display as the start number for another evaluation.

The cases for the -, X and / operation can be similarly explained. I will explain the cases for the M+ and C buttons in the next part of series, where I will be treating the details of the two main functions. I will not treat it now to avoid unnecessary repetition.

Let us stop here, for this part. I'll see you for the next part.