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+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 -->
</script>
</HEAD>
<BODY>
<!-- ************ 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>
<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(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 -> inch</option>
<option value="25.4*x">x}[length] . . inch -> mm</option>
<option value="x/0.3048">x}[length] meter -> feet</option>
<option value="0.3048*x">x}[length] feet -> meter</option>
<option value="x/5280">x}[length] . . feet -> mile</option>
<option value="0.62137*x">x}[len.] kilometer->mile</option>
<option value="1.609344*x">x}[len.] mile->kilometer</option>
<option value="10.76391*x">x}[area] meter² -> feet²</option>
<option value="0.092903*x">x}[area] feet² -> meter²</option>
<option value="x/43560">x}[area] . . feet² ->acre</option>
<option value="43560*x">x}[area] . . acre ->feet²</option>
<option value="2.471054*x">x}[area] hectare->acre</option>
<option value="0.404686*x">x}[area] acre->hectare</option>
<option value="x/640">x}[area] . . acre-> mile²</option>
<option value="35.314725*x">x}[volume] meter³ -> ft³</option>
<option value="0.0283168*x">x}[volume] ft³ -> meter³</option>
<option value="7.4805*x">x}[volume] ft³ -> gallon</option>
<option value="0.764555*x">x}[vol.] . . yd³ ->meter³</option>
<option value="4.44822*x">x}[force] lb(f)->Newton</option>
<option value="0.45359*x">x}[mass] . lb.US -> kg</option>
<option value="9*x/5+32">x}[temperature] C°->F°</option>
<option value="5*(x-32)/9">x}[temperature] F°->C°</option>
<option value="x-273.15">x}[temperature] C°->K°</option></select></td>
<td><input type="button" Value="Do" onClick="Xwork(document.sCal.FSET1.value)"></td>
</tr>
<!-- 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)²</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">x} 4-dec.places: round</option>
<option value="Math.sin(x*Math.PI/180)">x}opp/hyp, deg) sin(x°)</option>
<option value="Math.cos(x*Math.PI/180)">x}adj/hyp, deg) cos(x°)</option>
<option value="Math.tan(x*Math.PI/180)">x}opp/adj, deg) tan(x°)</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>
</tr>
<!-- 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)½</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=4 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›m" onClick="XtoM()"></td>
<td><input type="button" Value="m›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=" < " 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=" • " 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=6 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=1 width=238>
<tr><td><small><b>Notes on JavaScript Calculator - sCal</b></small></td></tr>
<tr><td><small>
<b> 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> *} 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> 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> 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