Home arrow HTML arrow Page 3 - Function Details for a Web Page Calculator
HTML

Function Details for a Web Page Calculator


Welcome to the third part of a six-part series on building a web page calculator. In the previous part I gave you the skeletons of our two standard calculator functions. But there are fine details to these functions that we have to examine and appreciate. We start with the showNum() function.

Author Info:
By: Chrysanthus Forcha
Rating: 4 stars4 stars4 stars4 stars4 stars / 2
March 18, 2009
TABLE OF CONTENTS:
  1. · Function Details for a Web Page Calculator
  2. · First Segment continued
  3. · The Second Code Segment
  4. · Second Code Segment continued
  5. · The Third Code Segment

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Function Details for a Web Page Calculator - The Second Code Segment
(Page 3 of 5 )

The second code segment is a switch statement. Each case in the switch statement corresponds to a digit button, the +/- button, the decimal point button or the RM button. The first case is:


case "B0":

valueAlreadyThere = document.getElementById('CI1').value;

valueAlreadyThere+="0";

if (!(/^00/.test(valueAlreadyThere)))

document.getElementById('CI1').value = valueAlreadyThere;

break;


Clicking the zero digit button corresponds to this case. When any digit button is clicked, the digit joins any number that was already on the display, to the right. So the first line here gets any number that was on the display into the local variable string, named valueAlreadyThere. The second line adds the character zero to the variable.

Next, we have an “if” statement. We do not want any number beginning with more than one zero. So the “if” statement verifies, using the regular expression technique, whether the content of the variable which is to go to the display is “00.” If it is, it allows only one zero on the display. If it is not, it means zero will be added to the digit or number that was on the display. The “if” statement does this by writing the content of the valueAlreadyThere string variable back to the display.


The second case is:


case "B1":

valueAlreadyThere = document.getElementById('CI1').value;

valueAlreadyThere+="1";

document.getElementById('CI1').value = valueAlreadyThere;

break;

case "B2":


This case corresponds to the digit button of 1. The first line reads the content of the display and assigns it to the valueAlreadyThere string local variable. The character 1 is appended to the string content of valueAlreadyThere in the second line. The last line writes the content of valueAlreadyThere to the display. In this way, one is added to the right of any number that was on the display. If there was no number on the display, 1 becomes the only number on the display.

The next case in our second code segment is:


case "B2":

valueAlreadyThere = document.getElementById('CI1').value;

valueAlreadyThere+="2";

document.getElementById('CI1').value = valueAlreadyThere;

break;


This case corresponds to the digit button of 2. The explanation is similar to the previous case.


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 10 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials