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

JavaScript (sCal-05m) Calculator

<!-- META, CSS, Title, etc. if necessary -->
<!-- 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+1) > 0) {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 -->

<!-- ************ JavaScript (sCal) Calculator 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=1 cellspacing=0 cellpadding=0 WIDTH=238>
  <td colspan=6><b><large><u> JavaScript Calculator </u> . sCal-1ce</large></b></td>
 <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>
<!-- Top(FSET1) drop-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 [Do] for 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}[length] meter -&gt; feet</option>
  <option value="0.3048*x">x}[length] feet -&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}[area] meter&sup2; -&gt; feet&sup2;</option>
  <option value="0.092903*x">x}[area] feet&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}[area] hectare-&gt;acre</option>
  <option value="0.404686*x">x}[area] acre-&gt;hectare</option>
  <option value="x/640">x}[area] . . acre-&gt; mile&sup2;</option>
  <option value="35.314725*x">x}[volume] meter&sup3; -&gt; ft&sup3;</option>
  <option value="0.0283168*x">x}[volume] ft&sup3; -&gt; meter&sup3;</option>
  <option value="7.4805*x">x}[volume] ft&sup3; -&gt; gallon</option>
  <option value="0.764555*x">x}[vol.] . . yd&sup3; -&gt;meter&sup3;</option>
  <option value="4.44822*x">x}[force] lb(f)-&gt;Newton</option>
  <option value="0.45359*x">x}[mass] . lb.US -&gt; kg</option>
  <option value="9*x/5+32">x}[temperature] C&deg;-&gt;F&deg;</option>
  <option value="5*(x-32)/9">x}[temperature] F&deg;-&gt;C&deg;</option>
  <option value="x-273.15">x}[temperature] C&deg;-&gt;K&deg;</option></select></td>
  <td><input type="button" Value="Do" onClick="Xwork(document.sCal.FSET1.value)"></td>
<!-- Middle(FSET2) SELECT 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}} factorial . x!</option>
  <option value="Math.round(x*10000)/10000">x} 4-dec.places: round</option>
  <option value="Math.sin(x*Math.PI/180)">x}opp/hyp, deg) sin(x&deg;)</option>
  <option value="Math.cos(x*Math.PI/180)">x}adj/hyp, deg) cos(x&deg;)</option>
  <option value="Math.tan(x*Math.PI/180)">x}opp/adj, deg) tan(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)">x} natural 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 (10) of e</option>
  <option value="Math.random()">Random Num. (0 to 1)</option></select></td>
  <td><input type="button" Value="Do" onClick="Xwork(document.sCal.FSET2.value)"></td>
<!-- Bottom(FSET3) SELECT 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)">
   *} 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)">
   *} 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)">
   *} 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)">
   *} 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)">
   *} 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=(/**/ ); b=(/*bottom width,ft*/ ); r=(/**/ ); 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,'+Mr(a,3)+' I,in4='+Mr(I,2)+' M.max,'+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>
  <td colspan=6><small><small>Display - x</small></small></td>
<!-- Browser Note: TextArea dimensions work well in IExplorer5/6, with vert. scroll. -->
<!-- Netscape6/Mozilla/others? with horiz. scroll, both rows & cols may be excessive.-->
  <td colspan=6><TextArea name="IOx" rows=4 COLS=26></TextArea></td>
  <td colspan=6><small><small>Memory - m</small></small></td>
<!-- 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>
  <td colspan=6><small><small>.</small></small></td>
<!-- 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 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 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 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>
  <td colspan=6 align="right"><small><small>Civil Engr. vers. r.m.03</small></small></td>
<!-- End of Main Calculator. Start DOCUMENTATION for sCal: -->

<table border=1 width=238>
<tr><td><small><b>Notes on JavaScript Calculator - sCal</b></small></td></tr>
 <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=""></a>-<br>
 * More documentation may be created. <br>* Compact display and file size are goals.
<!-- End of JavaScript Calculator in BODY -->



Related examples in the same category

1.JavaScript Calculator - sCal
2.A JavaScript Calculator
3.Reverse Polish Notation Calculator