Home arrow HTML arrow Page 2 - Using the Keyboard with a Web Page Calculator
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
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
March 25, 2009
TABLE OF CONTENTS:
  1. · Using the Keyboard with a Web Page Calculator
  2. · The First Code Segment
  3. · The second Code Segment
  4. · Events and the Keyboard

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Using the Keyboard with a Web Page Calculator - The First Code Segment
(Page 2 of 4 )

The first code segment is:


//first construct the first part of the eval argument

evalString+= document.getElementById('CI1').value;


When you click any of the operator buttons (+, -, X, or /) or the M+, C or equal sign buttons, the operator() function is called. When the function is called, the above segment reads the number that is on the display. This number forms the first part of the string for the evaluation. It assigns the number to the evaluation string.

Remember that the arithmetic expression is composed into a string assigned to the evalString variable. This variable will be the argument for the top level JavaScript eval() function which will give us the result of the arithmetic expression. The initial value of evalString is "".

You may be wondering why I have used the shorthand assignment operator +=. Assume that you want to compute "2 + 3" and you have typed "2+". When you type 3 and press the equal sign, the above segment will append the character 3 to "2+", giving you "2+3".


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 3 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials