More on the Keyboard for a Web Page Calculator

The first Code Segment for Internet Explorer

The first code segment is:

keynum = e.keyCode;

keychar = String.fromCharCode(keynum)

The processKey(e) function has the event object as an argument. With Internet Explorer the expression

e.keyCode

where e represents the event object, returns the key code of the key pressed on the keyboard. The second line in this segment is entirely JavaScript; it is the same for many browsers. This line converts the key code into the corresponding character, such as ‘p’, ‘f’, ‘3’, ‘5’, etc.

The first Code Segment for Netscape, Firefox, and Opera

The first code segment for these browsers is:

keynum = e.which;

keychar = String.fromCharCode(keynum);

As I said, the processKey(e) function has the event object as an argument. With Netscape, Firefox and Opera, the expression

e.which

where e represents the event object, returns the key code of the key pressed on the keyboard. The second line in this segment is entirely JavaScript; it is the same for the many browsers.

The processKey(e) if-else-if blocks

Each of these blocks creates the ID of the calculator button corresponding to the key that was pressed on the keyboard. It uses this ID to call the relevant function. It then gives focus to the button on the calculator that corresponds to the key that was pressed on the keyboard.

Recall that when you have if-else-if blocks, only one block is executed when the function is called.

The First if-block

The first if-block is:

if (/d/.test(keychar))

{

//construct the digit button ID

ID = "B" + keychar;

//call the showNum() function with the ID

showNum(ID);

//give the button focus

document.getElementById(ID).focus();

}

The “if” line uses a regular expression to verify that the character is a digit. If it is, it creates the ID of the corresponding calculator button by forming a string with "B" in front of the digit. The ID of each digit button begins with "B" followed by the digit; the ID is made up of those two characters. 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 a digit key 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 on the block gives the focus.