Javascript-simple calculator implementation step decomposition (with diagram) _ javascript skills

The judgment of input content, the judgment of the source of the event object and the use of the mathematical operations "+,-, *," can be learned by interested friends. Knowledge point:
1. Use of mathematical operations "+ ,-, *,/"
2. input content judgment and event object Source Judgment
Effect:

Code:

The Code is as follows:

Script
// Computing object
Var operateExp = {
'+': Function (num1, num2) {return num1 + num2 ;},
'-': Function (num1, num2) {return num1-num2 ;},
'*': Function (num1, num2) {return num1 * num2 ;},
'/': Function (num1, num2) {return num2 = 0? 0: num1/num2 ;}
}
// Computing functions
Var operateNum = function (num1, num2, op ){
If (! (Num1 & num2) return;
// Ensure that num1 and num2 are all numbers
Num1 = Number (num1 );
Num2 = Number (num2 );
// Returns num1 if the operator does not exist;
If (! Op) return num1;
// Matching Calculation Formula
If (! OperateExp [op]) return 0;
Return operateExp [op] (num1, num2 );
}
// Display panel
Var calculate_outPut = document. getElementById ("calculate_outPut ");
// Operation Panel
Var calculate_num = document. getElementById ("calculate_num ");
Var result = 0; // Calculation result
Var isReset = false; // whether to reset
Var operation; // Operator
// Set the display value
Function setScreen (num ){
Calculate_outPut.value = num;
}
// Obtain the display value
Function getScreen (){
Return calculate_outPut.value;
}
// Add a click event
Calculate_num.onclick = function (e ){
Var ev = e | window. event;
Var target = ev.tar get | ev. srcElement;
If (target. type = "button "){
Var mark = target. getAttribute ("_ type"); // obtain the custom attribute of the currently clicked button.
Var value = target. value; // obtain the current value.
Var num = getScreen (); // get the value of the current box
If (mark = 'bs ') {// return key
If (num = 0) return;
Var snum = Math. abs (num). toString ();
If (snum. length <2)
SetScreen (0 );
Else
SetScreen (num. toString (). slice (0,-1 ));
}
If (mark = 'num') {// number key
If (num = '0' | isReset) {// There are operators or the display is 0
SetScreen (value );
IsReset = false;
Return;
}
SetScreen (num. toString (). concat (value ));
}
If (mark = ".") {// decimal point
Var hasPoint = num. toString (). indexOf (".")>-1;
If (hasPoint ){
If (isReset ){
SetScreen ("0" + value );
IsReset = false;
Return;
}
Return;
}
SetScreen (num. toString (). concat (value ));
}
If (mark = "+/-") {// positive and negative signs
SetScreen (-num );
}
If (mark = "op") {// if you click an operator, design the first operand.
If (isReset) return;
IsReset = true;
If (! Operation ){
Result = + num;
Operation = value;
Return;
}
Result = operateNum (result, num, operation );
SetScreen (result );
Operation = value;
}
If (mark = "cls") {// clear
Result = 0;
SetScreen (result );
IsReset = false;
}
If (mark = "eval") {// calculate
If (! Operation) return;
Result = operateNum (result, num, operation );
SetScreen (result );
Operation = null;
IsReset = false;
}
}
}
Script
View Code

Detailed breakdown:
First:The switch statement is not used for Branch computing, and the name-value pair is used.

The Code is as follows:

// Computing object
Var operateExp = {
'+': Function (num1, num2) {return num1 + num2 ;},
'-': Function (num1, num2) {return num1-num2 ;},
'*': Function (num1, num2) {return num1 * num2 ;},
'/': Function (num1, num2) {return num2 = 0? 0: num1/num2 ;}
}

Second:Use the properties of the object event to obtain the type of the clicked object. Event bubbles are used to capture events and classify events.

The Code is as follows:

Calculate_num.onclick = function (e ){
Var ev = e | window. event;
Var target = ev.tar get | ev. srcElement;
If (target. type = "button "){
Var mark = target. getAttribute ("_ type"); // obtain the custom attribute of the currently clicked button.
Var value = target. value; // obtain the current value.
Var num = getScreen (); // get the value of the current box
If (mark = 'bs ') {// return key
If (num = 0) return;
Var snum = Math. abs (num). toString ();
If (snum. length <2)
SetScreen (0 );
Else
SetScreen (num. toString (). slice (0,-1 ));
}
If (mark = 'num') {// number key
If (num = '0' | isReset) {// There are operators or the display is 0
SetScreen (value );
IsReset = false;
Return;
}
SetScreen (num. toString (). concat (value ));
}
If (mark = ".") {// decimal point
Var hasPoint = num. toString (). indexOf (".")>-1;
If (hasPoint ){
If (isReset ){
SetScreen ("0" + value );
IsReset = false;
Return;
}
Return;
}
SetScreen (num. toString (). concat (value ));
}
If (mark = "+/-") {// positive and negative signs
SetScreen (-num );
}
If (mark = "op") {// if you click an operator, design the first operand.
If (isReset) return;
IsReset = true;
If (! Operation ){
Result = + num;
Operation = value;
Return;
}
Result = operateNum (result, num, operation );
SetScreen (result );
Operation = value;
}
If (mark = "cls") {// clear
Result = 0;
SetScreen (result );
IsReset = false;
}
If (mark = "eval") {// calculate
If (! Operation) return;
Result = operateNum (result, num, operation );
SetScreen (result );
Operation = null;
IsReset = false;
}
}
}

Third:Global variables are used to control the local operation progress. (Status Control)

The Code is as follows:

Var result = 0; // Calculation result
Var isReset = false; // whether to reset
Var operation; // Operator

Fourth:Separate page operations and perform decoupling.

The Code is as follows:

// Set the display value
Function setScreen (num ){
Calculate_outPut.value = num;
}
// Obtain the display value
Function getScreen (){
Return calculate_outPut.value;
}

Fifth:Filter the operands to complete calculation.

The Code is as follows:

// Computing functions
Var operateNum = function (num1, num2, op ){
If (! (Num1 & num2) return;
// Ensure that num1 and num2 are all numbers
Num1 = Number (num1 );
Num2 = Number (num2 );
// Returns num1 if the operator does not exist;
If (! Op) return num1;
// Matching Calculation Formula
If (! OperateExp [op]) return 0;
Return operateExp [op] (num1, num2 );
}