HTML

Using the Keyboard with a Web Page Calculator

In this fourth part of a six-part series on building a web page calculator, we'll delve more deeply into the functions. We start with the operator(ID) function, and then take a closer look at events. We'll wrap up by starting to show how to use the keyboard with the calculator.

Author Info:

By: Chrysanthus Forcha

Poor Best

Rating:

/ 1

March 25, 2009

TABLE OF CONTENTS:

An event is said to occur when some action takes place on your web page. The action may be caused by the user; for example, the user may click a button. We have already handled cases where the user clicks buttons. We have to give the user the chance to use the calculator pad (numbers) on the keyboard to do his calculations.

Event Object

DOM has an event object. The event object represents the state of an event, such as the element in which the event occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse buttons.

Events are normally used in combination with functions, and the function will not be executed before the event occurs!

onkeypress Event

The onkeydown event occurs when a keyboard key is pressed or held down.

The onkeypress attribute, for any element, will cause that element to respond when any key on the keyboard is pressed. Assume that you have the following attribute for an element:

onkeypress = "myFunction()"

When you press any key on the keyboard, myFunction() will be called. Note: the element needs to have focus before the function can be called. Not all elements respond to the onkeypress event. The button element, which we are interested in, does.

Now different browsers have different ways of retrieving the character that was pressed. Internet Explorer uses the expression "event.keyCode" to retrieve the character that was pressed. Netscape, Firefox and Opera use the expression "event.which" to retrieve the character that was pressed. Let us examine the following code:

<html>

<head>

function myFunction(e)

{

var keynum

var keychar

if(window.event) // IE

{

keynum = e.keyCode;

keychar = String.fromCharCode(keynum);

alert(keychar);

}

else if(e.which) // Netscape/Firefox/Opera

{

keynum = e.which;

keychar = String.fromCharCode(keynum);

alert(keychar);

}

</script>

</head>

<body>

<button type="button" onkeypress="myFunction(event)"/>Click Me</button>

</button>

</body>

</html>

This is a web page having one button as the BODY element. The button has the onkeypress attribute. When the button is clicked, the associated function, myFunction(event) is called. The event is its argument. When the function is called successfully, we say the event has occurred.

There are two variables in the function; the first one is keynum, meaning key number. The second one is keychar, meaning key character. We shall see their uses shortly. Next, you have an if-else-if statement. The nature of this statement means that either the "if" part is executed or the "else if" part is executed.

The "if" conditional expression is "window.event." If your browser is a Windows browser, this expression returns true. If it is not a Windows browser it returns false. So, this expression also checks what browser is being used. The "else if" conditional expression is "e.which," meaning "event.which." If the browser is Netscape, Firefox or Opera, then this expression will return true, otherwise it will return false. This expression also checks which browser it is.

Either expression checks to see if an even occurred. If it did, the first line that follows retrieves the code of the key and assigns it to the keynum variable. For this line, Internet Explorer uses "event.keyCode" to retrieve the key code from the DOM's event object.

JavaScript has a string class called String. This class has a method called fromCharCode(key_code). This method takes the key code as an argument. It converts the key code to the corresponding character (e.g. 'c' or '5'). After the "if" or "else if" condition is satisfied, the second line in the block converts the key code to the corresponding character and assigns the character to the keychar variable. The third line in the block displays a message box showing the character.

If you want to try the above code, after opening the web page, click the button to give it focus.

It's time to take a break. In the next part of the series we shall see how to type numbers and carry out operations (+, -, X, /) using the keyboard.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.