JavaScript (sCal-05m) Calculator : Calculator « Page Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Event
7. Event onMethod
8. Form Control
9. GUI Components
10. HTML
11. Javascript Collections
12. Javascript Objects
13. Language Basics
14. Node Operation
15. Object Oriented
16. Page Components
17. Security
18. Style Layout
19. Table
20. Utilities
21. Window Browser
Microsoft Office Word 2007 Tutorial
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
C# / C Sharp
C# / CSharp Tutorial
ASP.Net
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
PHP
Python
SQL Server / T-SQL
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
JavaScript DHTML » Page Components » Calculator 
JavaScript (sCal-05m) Calculator


<HEAD>
<!-- META, CSS, Title, etc. if necessary -->
 
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

// JavaScript (sCal-05m) Calculator in HEAD:'JavaScript' area. Tested IE5/6, Netscape6 OK
// This is free, public domain, user-modifiable code.  R.Mohaupt-Feb,2003. NO WARRANTEE.

var x = "";  // by Javascript loose typing, 'x' mostly a string, sometimes a number
var m = "";  // stores Memory.  Note: x & m are GLOBAL--of concern if sCal embedded.

function Ix() {x = document.sCal.IOx.value;// Input synch to x-string.
             // Required since TextArea can (must, in cases) be changed from keyboard
function Ox() {document.sCal.IOx.value = x;// Output x-string change to display

var a=0; var b=0; var d=0; var f=0;          // GLOBAL (or LOCAL to xEval fcn if moved).
var g=32.15; var h=0; var I=0; var i=0;      // Note: g=gravity.  Variables & Mr fcn used 
var l=0; var M=0; var N=0; var P=0; var R=0// in *}programs. User may add more if needed,
var s=0; var S=0; var v=0; var y=0; var w=0// with attention to CASE Sensitivity.
function Mr(val,place) {var d=Math.pow(10,place)// --- set output decimal places
 return Math.round(d*val)/d;}

function xEval() {Ix();    // JavaScript eval allows multi-statements, see examples.
 var n = x.indexOf('^');
 if (n > 0) {
  if (x.indexOf('^',n+10) {alert("WARNING! Only 1 [^] allowed in expression!");}
  else {  // all to left of '^' is taken as base, and all right as exponent
  document.sCal.IOx.value = Math.pow(eval(x.substring(0,n)),eval(x.substring(n+1)));}
  }       // likewise, entire x-value is used as function argument, not just last term
 else {document.sCal.IOx.value = eval(x);}
 Ix();  }

function xPlusEq(s) {Ix(); x += s; Ox();// --- DISPLAY-x functions ---
function xMultEq(s) {xEval(); x *= s; Ox();}
function Clear() {x = ""; Ox();}
function BkSpace() {Ix(); x = x.substring(0,x.length-1; Ox();}
function recip() {xEval(); x = 1/(x); Ox();}

function Xwork(s)  // --- determines what to do with incoming MENU (s)-values ---
 {if (isNaN(s))
  {if (s.indexOf('x')>-1)       //-if expression is f(x), i.e.Method,
   {xEval(); x = eval(s); Ox();}// figure x, & substiture in function 
  else {x += eval(s); Ox();} }  //-if a Property (eg. Math.PI), add value
 else {xPlusEq(s);}  }          //-if numeric constant, append like Jwork

function Im() {m = document.sCal.IOm.value;// --- MEMORY fcns: see Ix() & Ox() ---
function Om() {document.sCal.IOm.value = m;}
function XtoM()  {Ix(); Im(); m += x; Om(); x=""; Ox();}
function MtoX()  {Ix(); Im(); x += m; Ox();}
function Mplus() {xEval()if (m=="")
 {m=0;m = parseFloat(m+ parseFloat(x); Om(); x=""; Ox();}
function Mclear() {m = ""; Om();}

//  End of JavaScript Calculator in HEAD -->
</script>
</HEAD>


<BODY>
<!-- ************ JavaScript (sCalCalculator in BODY of html documant: ************* -->
<!-- This is free, public domain, user-modifiable code.  R.Mohaupt-Feb,2003 - NO WARRANTEE. -->

<form name="sCal">
<!-- set: ,-BGCOLOR below for example, coordinate TextArea COLS with ,-WIDTH change -->
<table BGCOLOR="yellow" border=cellspacing=cellpadding=WIDTH=238>
 <tr>
  <td colspan=6><b><large><u> JavaScript Calculator </u> . sCal-1ce</large></b></td>
 </tr>
 <tr align="center">
  <td colspan=1><small><small>Place</small></small></td>
  <td colspan=4><small><small>Constants, Functions</small></small></td>
  <td colspan=1><small><small>Apply</small></small></td>
 </tr>
<!-- Top(FSET1drop-down SELECT menus: can change or add functions -->
 <tr align="center">
  <td><input type="button" value="JS" onClick="xPlusEq(document.sCal.FSET1.value)"></td>
  <td colspan=4><SELECT name="FSET1"> <!--onChange to 'document.sCal.FSET1.value' (and FSET2, FSET3)
   could call fcn. like [JS]) or [Dofor speed, expectation vs. control loss. PROGRAMER OPTION! -->
  <option selected value="Math.PI">[convert, constant. Pi .</option>
  <option value="x/25.4">x}[length. . mm -&gt; inch</option>
  <option value="25.4*x">x}[length. . inch -&gt; mm</option>
  <option value="x/0.3048">x}[lengthmeter -&gt; feet</option>
  <option value="0.3048*x">x}[lengthfeet -&gt; meter</option>
  <option value="x/5280">x}[length. . feet -&gt; mile</option>
  <option value="0.62137*x">x}[len.kilometer-&gt;mile</option>
  <option value="1.609344*x">x}[len.mile-&gt;kilometer</option>
  <option value="10.76391*x">x}[areameter&sup2; -&gt; feet&sup2;</option>
  <option value="0.092903*x">x}[areafeet&sup2; -&gt; meter&sup2;</option>
  <option value="x/43560">x}[area. . feet&sup2; -&gt;acre</option>
  <option value="43560*x">x}[area. . acre -&gt;feet&sup2;</option>
  <option value="2.471054*x">x}[areahectare-&gt;acre</option>
  <option value="0.404686*x">x}[areaacre-&gt;hectare</option>
  <option value="x/640">x}[area. . acre-&gt; mile&sup2;</option>
  <option value="35.314725*x">x}[volumemeter&sup3; -&gt; ft&sup3;</option>
  <option value="0.0283168*x">x}[volumeft&sup3; -&gt; meter&sup3;</option>
  <option value="7.4805*x">x}[volumeft&sup3; -&gt; gallon</option>
  <option value="0.764555*x">x}[vol.. . yd&sup3; -&gt;meter&sup3;</option>
  <option value="4.44822*x">x}[forcelb(f)-&gt;Newton</option>
  <option value="0.45359*x">x}[mass. lb.US -&gt; kg</option>
  <option value="9*x/5+32">x}[temperatureC&deg;-&gt;F&deg;</option>
  <option value="5*(x-32)/9">x}[temperatureF&deg;-&gt;C&deg;</option>
  <option value="x-273.15">x}[temperatureC&deg;-&gt;K&deg;</option></select></td>
  <td><input type="button" Value="Do" onClick="Xwork(document.sCal.FSET1.value)"></td>
 </tr>
<!-- Middle(FSET2SELECT menu: -->
 <tr align="center">
  <td><input type="button" value="JS" onClick="xPlusEq(document.sCal.FSET2.value)"></td>
  <td colspan=4><SELECT name="FSET2">
  <option selected value="Math.pow(x,2)">[power, trig, log. . . (x)&sup2;</option>
  <option value="for(j=x;j>2;j--){x*=j-1;} //x<2 undefined">x}pgm.eg.factorial . x!</option>
  <option value="Math.round(x*10000)/10000">x4-dec.places: round</option>
  <option value="Math.sin(x*Math.PI/180)">x}opp/hyp, degsin(x&deg;)</option>
  <option value="Math.cos(x*Math.PI/180)">x}adj/hyp, degcos(x&deg;)</option>
  <option value="Math.tan(x*Math.PI/180)">x}opp/adj, degtan(x&deg;)</option>
  <option value="Math.PI/180 *x">x. degrees to radians</option>
  <option value="180/Math.PI *x">x. radians to degrees</option>
  <option value="Math.asin(x)*180/Math.PI">x}for deg.)  .  . arc sin(x)</option>
  <option value="Math.acos(x)*180/Math.PI">x}for deg.)  .  . arc cos(x)</option>
  <option value="Math.atan(x)*180/Math.PI">x}for deg.)  .  . arc tan(x)</option>
  <option value="Math.log(x)">xnatural log (base e)</option>
  <option value="Math.exp(x)">x}exponentiation: e^x</option>
  <option value="Math.log(x)*Math.LOG10E">x}common log(bse10)</option>
  <option value="Math.pow(10,x)">x}anti-log(com'n)10^x</option>
  <option value="Math.E">base of natural logs,e</option>
  <option value="Math.LOG10E">common log (10of e</option>
  <option value="Math.random()">Random Num. (to 1)</option></select></td>
  <td><input type="button" Value="Do" onClick="Xwork(document.sCal.FSET2.value)"></td>
 </tr>
<!-- Bottom(FSET3SELECT menu: Much PROGRAMMABLE AREA available -->
 <tr align="center">
  <td><input type="button" value="JS" onClick="xPlusEq(document.sCal.FSET3.value)"></td>
  <td colspan=4><SELECT name="FSET3">
  <option selected value="Math.sqrt(x)">- other - . sq.root (x)&frac12;</option>
  <option value="Actual bank values can vary on pay date vs. interest posting, etc.">
 s. . . . FINANCE</option>
  <option value="I=(/*int.rate%/per.*/ ); N=(/*no. of periods*/ ); P=(/*Principal $*/ ); /*CLICK[ = ]*/ var i=I/100; var y=Math.pow(1+i,N); /*eg: 9%APR (=0.75%/mo.) for 36mo, repay $10000 @ $318/mo.*/ x='REPAY/PERIOD $'+ Mr(P*i*y/(y-1),2)">
   *}Cap.Recov: loan pay</option> 
  <option value="I=(/*int.rate%/per.*/ ); N=(/*no. of periods*/ ); P=(/*$ banked*/ ); /*CLICK[ = ]*/ var i=I/100; var y=Math.pow(1+i,N); /*eg: $1000 invested @9%APR for 10 yrs. becomes $2367*/ x='TOTAL AFTER '+N+ ' PERIODS $'+ Mr(P*y,2)">
   *sgl.pay: Comp.Amt.</option>
  <option value="I=(/*int.rate%/per.*/ ); N=(/*no. of periods*/ ); R=(/*bank $/per*/ ); /*CLICK[ = ]*/ var i=I/100; var y=Math.pow(1+i,N); /*eg: @9%APR, $1000 invested/year for 10yrs, yields $15193*/ x='TOTAL AFTER '+N+ ' PERIODS $'+ Mr(R*(y-1)/i,2)">
   *unif.pay: Comp.Amt.</option>
  <option value="I=(/*int.rate%/per.*/ ); N=(/*no. of periods*/ ); S=(/*Needed $ in n-periods*/ ); /*CLICK[ = ]*/ var i=I/100; var y=Math.pow(1+i,N); /*eg: @9%APR, $1000 needed in 10yrs; bank $422 now.*/ x='BANK NOW $'+ Mr(S/y,2)">
   *sgl.pay: Pres.Worth</option>
  <option value="I=(/*int.rate%/per.*/ ); N=(/*no. of periods*/ ); R=(/*Needed $/period*/ ); /*CLICK[ = ]*/ var i=I/100; var y=Math.pow(1+i,N); /*eg: @9%APR, $1000 needed annually for 10yrs; bank $6418 now*/ x='BANK NOW $'+ Mr(R*(y-1)/(y*i),2)">
   *}unif.pay: Pres.Worth</option>
  <option value="I=(/*int.rate%/per.*/ ); N=(/*no. of periods*/ ); S=(/*Needed $ in n-periods*/ ); /*CLICK[ = ]*/ var i=I/100; var y=Math.pow(1+i,N); /*eg: @9%APR, $1000 needed in 10yrs; bank $66 annually*/ x='BANK/PERIOD $'+ Mr(S*i/(y-1),2)">
   *unif.pay: Sink.Fund</option>
  <option value="Only for simplest cases with knowledge of assumptions, coefficients, etc.">
 s. . OPEN CHAN. Q</option>
  <option value="3.1*(/*weirLength,ft*/ )*Math.pow((/*head,ft*/ ),1.5)">
   *}BrdCrest Weir, Q,cfs</option>  <!-- This is about as simple as it gets -->
  <option value="h=(/*Orifice height,ft*/ ); 0.6*(/*width, ft*/ )*h*Math.sqrt(((/*total Head, ft*/ )-h/2)*2*g)">
   *}Rectang.Orifice Q,cfs</option>
  <option value="d=(/*Orif.Dia,ft*/ ); Math.sqrt(((/*total Head,ft*/ )-d/2)*2*g)*0.6*3.1416*d*d/4">
   *Circular Orifice Q,cfs</option>
  <option value="d=(/*Pipe Dia. ft*/ ); s=(/*long.slope,%*/ ); N=(/*Manning n*/ ); /*CLICK[ = ]*/ a=3.1416*d*d/4; m='A, s.f='+a; Om(); 1.486*Math.sqrt(s/100)*Math.pow(d/4,0.667)*a/N">
   *Pipe normal flo Q,cfs</option>  <!-- FULL PIPE ONLY! Note that Area is output to Memory m by Om(). The velocity can be obtained by Q/A -->
  <option value="l=(/*left.side.sl:1*/ ); b=(/*bottom width,ft*/ ); r=(/*rt.side.sl:1*/ ); y=(/*flow depth,ft*/ ); s=(/*long.slope,%*/ ); N=(/*Manning n*/ ); /*CLICK[ = ]*/ var tw=l*y+b+r*y; a=y*(tw+b)/2; var wp=Math.sqrt(l*y*l*y+y*y)+b+Math.sqrt(r*y*r*y+y*y); v=1.486*Math.sqrt(s/100)*Math.pow(a/wp,0.667)/N; f=v/Math.sqrt(g*a/tw); x='top wid.ft=' +Mr(tw,1) +' area s.f.=' +Mr(a,1) +' Froude#=' +Mr(f,2) +' Vel.f/s=' + Mr(v,1) +' Q, cfs=' +Mr(a*v,1); // Note: if side.slope=0, vertical wall; if bottom width=0, V-ditch; velocity shown in memory box">
   *\_/ Channel norm. Q</option>  <!-- This is about as complex a as it gets, listing characteristics in the x-display -->
  <option value="">
s. . . MISC. </option>
  <option value="d=(/*BEAM depth,in*/ ); b=(/*width,in*/ ); l=(/*length,ft*/ ); w=(/*unif.load,lb/ft*/ ); h=(/*max.deflect,in*/ ); /*CLICK[ = ]*/ a=b*d; S=a*d/6; I=S*d/2; M=w*l*l*12/8; x='A,sq.in='+Mr(a,3)+' I,in4='+Mr(I,2)+' M.max,in.lb='+Mr(M,-1)+' f.b.min,psi='+Mr(M/S,-1)+' E.min,psi='+Mr(5*M*l*l*144/(48*h*I),-3); //etc. eg. shear f.v=V/A esp. short beams">
   *Simple Rect. Beam</option>
  <option value="">*}</option>
  <option value="">*}</option>
  <option value="186300">light speed c, mile/sec</option></select></td>
 <td><input type="button" Value="Do" onClick="Xwork(document.sCal.FSET3.value)"></td>
 </tr>
 <tr>
  <td colspan=6><small><small>Display - x</small></small></td>
 </tr>
<!-- Browser Note: TextArea dimensions work well in IExplorer5/6, with vert. scroll. -->
<!-- Netscape6/Mozilla/others? with horiz. scroll, both rows & cols may be excessive.-->
 <tr>
  <td colspan=6><TextArea name="IOx" rows=COLS=26></TextArea></td>
 </tr>
 <tr>
  <td colspan=6><small><small>Memory - m</small></small></td>
 </tr>
<!-- buttons & small MEMORY text box: -->
 <tr align="center">
  <td><input type="button" Value="x&rsaquo;m" onClick="XtoM()"></td>
  <td><input type="button" Value="m&rsaquo;x" onClick="MtoX()"></td>
  <td colspan=2><input type="text" name="IOm" size=8></td>
  <td><input type="button" Value=" m+" onClick="Mplus()"></td>
  <td><input type="button" Value="mc" onClick="Mclear()"></td>
 </tr>
 <tr>
  <td colspan=6><small><small>.</small></small></td>
 </tr>
<!-- main layout of CALCULATOR buttons: -->
 <tr align="center">
  <td><input type="button" Value="  7  " onClick="xPlusEq(7)"></td>  
  <td><input type="button" Value="  8  " onClick="xPlusEq(8)"></td>  
  <td><input type="button" Value="  9  " onClick="xPlusEq(9)"></td>
  <td><input type="button" Value=" (    " onClick="xPlusEq('(')"></td>
  <td><input type="button" Value="    ) " onClick="xPlusEq(')')"></td>
  <td><input type="button" Value=" C  " onClick="Clear()"></td>
 </tr>
 <tr align="center">
  <td><input type="button" Value="  4  " onClick="xPlusEq(4)"></td>
  <td><input type="button" Value="  5  " onClick="xPlusEq(5)"></td>
  <td><input type="button" Value="  6  " onClick="xPlusEq(6)"></td>
  <td><input type="button" Value="  *  " onClick="xPlusEq('*')"></td>
  <td><input type="button" Value="  /   " onClick="xPlusEq('/')"></td>
  <td><input type="button" Value=" &lt;  " onClick="BkSpace()"></td>
 </tr>
 <tr align="center">
  <td><input type="button" Value="  1  " onClick="xPlusEq(1)"></td>
  <td><input type="button" Value="  2  " onClick="xPlusEq(2)"></td>
  <td><input type="button" Value="  3  " onClick="xPlusEq(3)"></td>
  <td><input type="button" Value="  +  " onClick="xPlusEq('+')"></td>
  <td><input type="button" Value="  -   " onClick="xPlusEq('-')"></td>
  <td><input type="button" Value="  ^  " onClick="xPlusEq('^')"></td>
 </tr>
 <tr align="center">
  <td><input type="button" Value="  0  " onClick="xPlusEq('0')"></td>
  <td><input type="button" Value="  &bull;  " onClick="xPlusEq('.')"></td>
  <td><input type="button" Value=" +/- " onClick="xMultEq('-1')"></td>
  <td><input type="button" Value="1/x "  onClick="recip()">
  <td colspan=2><input type="button" Value=".  .  =  .  ." onClick="xEval()"></td>
 </tr>
 <tr>
  <td colspan=align="right"><small><small>Civil Engr. vers. r.m.03</small></small></td>
 </tr>
</table>
</form>
<!-- End of Main Calculator. Start DOCUMENTATION for sCal: -->

<table border=width=238>
<tr><td><small><b>Notes on JavaScript Calculator - sCal</b></small></td></tr>
<tr><td><small>
 <b>&nbsp;&nbsp; Operation</b> on lowest level = a simple calculator: click on-screen buttons 
 <b>or</b> use keyboard <i>-- best for inserting values or programming.</i> On a higher level, 
 some functions are available as buttons or from drop-down select menus: designated by 
 <b>x}</b>. These operate directly on entire value in x-display, not just last 
 term, when the <b>[Do]</b> clicked. <i>(The </i><b>[^]</b><i> takes all values left of it as 
 base, all to the right as exponent.)</i> Trade values in and out of <b>Memory</b> to control.
 -Experiment-. Test on known data.<br>
 <b>&nbsp;&nbsp; *Programs</b> invoked with the <b>[JS]</B> button, gives much more control:
 replace alpha-characters with numeric, or insert after /*com'nt-prompt*/ before closing 
 ')'. Write legitimate Java Script expressions --evaluated according to interpreter's
 parser. NaN is Not a Number, can often correct.<br>
 <b>&nbsp;&nbsp; Programming</b> is on the highest level. Definitely <b>view source code</b>. 
 Programming experience is desireable, but with minimal effort, one's most-used functions
 can be inserted in the source (well commented for the purpose). Copy - Paste from any TEXT
 file. <b>s}</b> comments can be set to display.<br>
 <b>&nbsp;&nbsp; Public Domain.</b> All code user modifiable, responsible. Original: R. Mohaupt,
 P.E. Feb, 2003. -<a href="http://scal-2.sourceforge.net">http://scal-2.sourceforge.net</a>-<br>
 * More documentation may be created. <br>* Compact display and file size are goals.
 </small></td>
</tr>
</table>
<!-- End of JavaScript Calculator in BODY -->

</body>
</html>

           
       
Related examples in the same category
1. JavaScript Calculator - sCal
2. A JavaScript Calculator
3. Reverse Polish Notation Calculator
w_w___w__.__j___av__a2___s___.___c__o___m | Contact Us
Copyright 2003 - 08 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.