Home arrow HTML arrow Page 3 - Adding Scientific Functions to a Web Page Calculator
HTML

Adding Scientific Functions to a Web Page Calculator


In this last part of our six-part series, we shall talk about adding scientific functions to our web page calculator, and then conclude. Scientific functions refer to functions like sin(?), cos(?), tan(?), and log(x). The process is not as difficult as you think. The JavaScript interpreter incorporated into many browsers has some built-in scientific functions. It has most of the functions we shall use. However, it does not have some of the functions we shall use. We shall have to code the pair of functions that JavaScript does not have.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
April 08, 2009
TABLE OF CONTENTS:
  1. · Adding Scientific Functions to a Web Page Calculator
  2. · Coding Summary
  3. · Details of the Scientific Function
  4. · The Global Variables

print this article
SEARCH DEVARTICLES

Adding Scientific Functions to a Web Page Calculator - Details of the Scientific Function
(Page 3 of 4 )

The scienceFn(ID) function is our main scientific function, and takes the ID of the scientific button as argument. Inside is a switch statement, as we have seen above. In this section I explain the details of the cases.

sin

The case for the sine function is:


case "BSI":

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

//convert to radians

angleR = (angleD/180) * Math.PI;

document.getElementById('CI1').value = Math.sin(angleR);

toClearDisplay = true;

break;


The ID for the ‘sin’ button is "BSI." For simplicity, the case looks for the sine in degrees. However, the Math.sin() accepts the angle in radians and not degrees. I assume that the number you type, whose sine you are looking for, is in degrees. The first line of the case reads this number. The second line converts the number to radians. The third line looks for the sine and copies the result to the display. The last line sets the toClearDisplay variable to true so that the display will be erased the next time you start typing a number.

cos and tan

The explanation of these two cases is similar to the above.

ln

The case for the natural log is:


case "BLN":

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

document.getElementById('CI1').value = Math.log(x);

toClearDisplay = true;

break;

The ID for the ‘ln’ button is “BLN.” The first line reads the value from the display into the x variable. The second line determines the natural log. Note: JavaScript’s Math specification abbreviates the natural log as ‘log’ and not ‘ln,’ as is done in mathematics. The last line sets the toClearDisplay variable to true.

log

The case for log to base 10 is:


case "BLO":

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

document.getElementById('CI1').value = Math.log(C)/Math.log(10);

toClearDisplay = true;

break;

The ID for the ‘log’ button is “BLO.” The first line reads the number from the display into the C variable.

Now, the Math object does not have any method for log to base 10. Luckily mathematicians have offered us a formula, which is the Change of Base Log formula. This formula converts one base to another. We are dealing with base 10 and the base of the natural logarithms, which is 2.718, denoted by ‘e’. The formula is


log10(C) = (logeC)/(loge10)


The second line in the case above uses this formula to determine log to base 10 and copies the result to the display. The third line sets the toClearDisplay variable to true.

sqrt

The case to obtain the square root is:


case "BSQ":

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

document.getElementById('CI1').value = Math.sqrt(x);

toClearDisplay = true;

break;


The ID of the ‘sqrt’ button is "BSQ." The first line reads the number from the display. The second line uses the ‘sqrt’ method to obtain the square root. The result is copied to the display. The third line sets the toClearDisplay variable to true.

x2

The case to square a number is:


case "BX2":

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

document.getElementById('CI1').value = x * x;

toClearDisplay = true;

break;

The ID of the x2 button is “BX2.” The Math object does not have a method to square a number. So we shall do the squaring ourselves. The first line reads the number from the display and assigns it to the x variable. The second line squares the number and copies the result to the display. The third line sets the toClearDisplay variable to true.

ex

The case for the return value of ex is:


case "BEX":

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

document.getElementById('CI1').value = Math.exp(x);

toClearDisplay = true;

break;


The ID for the ‘ex’ button is “BEX.” The first line reads the value from the display and assigns it to the x variable. The second line determines the result and copies it to the display. The third line sets the toClearDisplay variable to true.

Rnd

The case that rounds a number to the nearest integer is:


case "BRO":

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

document.getElementById('CI1').value = Math.round(x);

toClearDisplay = true;

break;


The ID for the ‘Rnd’ button is “BRO.” The first line reads the number from the display and assigns it to the x variable. The second line rounds the number and copies the result to the display. The third line sets the toClearDisplay variable to true.

yx

This means return y to the x power. The operation needs two values. The Math object method to handle this is:

pow(y,x)


As you can see, this method is better handled by the operator(ID) function and not the scienceFn(). The case in the operator(ID) function for Math.pow(y,x) is:

case "BYX":

temp = evalString;

evalString = "Math.pow(" + temp + ",";

baseExp = true;

toClearDisplay = true;

break;


The ID for the yx button is “BYX.” For the standard calculator, this case was not in the operator(ID) function. You have to add it to the switch statement in the operator(ID) function.

Whenever the operator(ID) function is called, its first code segment copies the number on the display and makes it the first part of the evaluation string (evalString). Actually, this is the first part, if the evalString string was “”.

The first line in the case above copies that first part content to the variable temp. The second line gives the following content to the evalString:

“Math.pow(num,”

where ‘num’ is the number on the display; y in yx is this ‘num.’ The next line sets a new global variable, baseExp, to true. This variable was not in the code for standard calculator. You have to include it now. I will explain the use of this variable shortly. The last line sets the toClearDisplay variable to true for the usual reason.

The method for execution of yx is “Math.pow(y,x).” As deduced above, pressing the yx key produces the  “Math.pow(y,” part. We still have to append the “x)” part. This is why we need the baseExp global variable. The initial value of this variable is false. When the case is executed, this variable is set to true.

After the yx button has been pressed, any number you type replaces the previous number. This new number is the x value in the expression yx. After typing this new number, you have to press the Enter key. Add the following code to the case for the Enter key of the operator(ID).

if (baseExp == true) //are you raising a base to an exponent?

{

evalString = evalString + ")";

baseExp = false;

}

Add the code at the beginning of the case, so that the case becomes:


case "BEQ":

if (baseExp == true) //are you raising a base to an exponent?

{

evalString = evalString + ")";

baseExp = false;

}

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

//clear the evalString so that operation can continue using Input Text Control value

evalString = "";

toClearDisplay = true;

break;

When the case is executed, our added code is seen first, before the code that was there. The added code first checks to see if the yx button has been clicked (if (baseExp == true)). If it has, it completes the evalString with “x)”. It then sets the global baseExp variable to false, so that the same process can be repeated. The rest of the lines in the case simply handle evaluation as before.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




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