More on the Keyboard for a Web Page Calculator

The second if (else if) block is:

else if (/./.test(keychar))

{

//construct the digit button ID

ID = "BPOINT";

//call the showNum() function with the ID

showNum(ID);

//give the button focus

document.getElementById(ID).focus();

}

The “if else” line uses a regular expression to verify that the character is the decimal point. If it is, it creates the ID of the corresponding calculator button by forming the string "BPOINT." That is, it assigns “BPOINT” to the local ID variable. The block then goes on to call the showNum(ID) function using the ID created. Remember that the main purpose of the showNum(ID) function is to show the digit pressed on the display.

We can press the decimal point on the keyboard. This has to be equivalent to clicking the corresponding button on the calculator. So this corresponding button on the calculator has to receive focus. The last line of the block gives the focus.

The Third if (else if) block

The third if (else if) block is:

else if (/+|-|*|/|=/.test(keychar))

{

//construct the digit button ID

if (keychar == '+')

ID = "BP";

if (keychar == '-')

ID = "BMI";

if (keychar == '*')

ID = "BX";

if (keychar == '/')

ID = "BD";

if (keychar == '=')

ID = "BEQ";

//call the showNum() function with the ID

operator(ID);

//give the button focus

document.getElementById(ID).focus();

}

The “if else” line uses a regular expression to verify that an operator character on the keyboard was pressed. If it was, the block then has five options, each of which is in an “if” statement. 

The first optional “if” statement checks to see if the ‘+’ key on the keyboard was pressed. If it was, it assigns the ID (“BP”) of the corresponding ‘+’ calculator button to the local ID variable.

The second optional “if” statement checks to see if the ‘-’ key on the keyboard was pressed. If it was, it assigns the ID (“BMI”) of the corresponding ‘-’ calculator button to the local ID variable.

The third “if” statement checks to see if the ‘*’ key on the keyboard was pressed. If it was, it assigns the ID (“BX”) of the corresponding ‘*’ calculator button to the local ID variable.

The fourth “if” statement checks to see if the ‘/’ key on the keyboard was pressed. If it was, it assigns the ID (“BD”) of the corresponding ‘/’ calculator button to the local ID variable.

The fifth “if” statement checks to see if the ‘=’ key on the keyboard was pressed. If it was, it assigns the ID (“BEQ”) of the corresponding ‘=’ calculator button to the local ID variable.

We can press an operator key on the keyboard. This has to be equivalent to clicking the corresponding button on the calculator. When you click any button on a web page, that button receives focus. So the corresponding button on the calculator has to receive focus when you press a button on the keyboard. The last line of the block gives the button focus.