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. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 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
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.