A JavaScript Calculator : Calculator : Page Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Page Components » Calculator »

 

A JavaScript Calculator




/*
Mastering JavaScript, Premium Edition
by James Jaworski 

ISBN:078212819X
Publisher Sybex CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Doing Math</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
r = new Array(2)
function setStartState(){
 state="start"
 r[0"0"
 r[1"0"
 operator=""
 ix=0
}
function addDigit(n){
 if(state=="gettingInteger" || state=="gettingFloat")
  r[ix]=appendDigit(r[ix],n)
 else{
  r[ix]=""+n
  state="gettingInteger"
 }
 display(r[ix])
}
function appendDigit(n1,n2){
 if(n1=="0"return ""+n2
 var s=""
 s+=n1
 s+=n2
 return s
}
function display(s){
 document.calculator.total.value=s
}
function addDecimalPoint(){
 if(state!="gettingFloat"){
  decimal=true
  r[ix]+="."
  if(state=="haveOperand" || state=="getOperand2"r[ix]="0."
  state="gettingFloat"
  display(r[ix])
 }
}
function clearDisplay(){
 setStartState()
 display(r[0])
}
function changeSign(){
 if(r[ix].charAt(0)=="-"r[ix]=r[ix].substring(1,r[ix].length)
 else if(parseFloat(r[ix])!=0r[ix]="-"+r[ix]
 display(r[ix])
}
function setTo(n){
 r[ix]=""+n
 state="haveOperand"
 decimal=false
 display(r[ix])
}
function calc(){
 if(state=="gettingInteger" || state=="gettingFloat" ||
  state=="haveOperand"){
  if(ix==1){
   r[0]=calculateOperation(operator,r[0],r[1])
   ix=0
  }
 }else if(state=="getOperand2"){
  r[0]=calculateOperation(operator,r[0],r[0])
  ix=0
 }
 state="haveOperand"
 decimal=false
 display(r[ix])
}
function calculateOperation(op,x,y){
 var result=""
 if(op=="+"){
  result=""+(parseFloat(x)+parseFloat(y))
 }else if(op=="-"){
  result=""+(parseFloat(x)-parseFloat(y))
 }else if(op=="*"){
  result=""+(parseFloat(x)*parseFloat(y))
 }else if(op=="/"){
  if(parseFloat(y)==0){
   alert("Division by 0 not allowed.")
   result=0
  }else result=""+(parseFloat(x)/parseFloat(y))
 }
 return result
}
function performOp(op){
 if(state=="start"){
  ++ix
  operator=op
 }else if(state=="gettingInteger" || state=="gettingFloat" ||
  state=="haveOperand"){
  if(ix==0){
   ++ix
   operator=op
  }else{
   r[0]=calculateOperation(operator,r[0],r[1])
   display(r[0])
   operator=op
  }
 }
 state="getOperand2"
 decimal=false
}
function applyFunction(){
 var selectionList=document.calculator.functions
 var selIX=selectionList.selectedIndex
 var sel=selectionList.options[selIX].value
 if(sel=="abs"r[ix]=Math.abs(r[ix])
 else if(sel=="acos"r[ix]=Math.acos(r[ix])
 else if(sel=="asin"r[ix]=Math.asin(r[ix])
 else if(sel=="atan"r[ix]=Math.atan(r[ix])
 else if(sel=="ceil"r[ix]=Math.ceil(r[ix])
 else if(sel=="cos"r[ix]=Math.cos(r[ix])
 else if(sel=="exp"r[ix]=Math.exp(r[ix])
 else if(sel=="floor"r[ix]=Math.floor(r[ix])
 else if(sel=="log"r[ix]=Math.log(r[ix])
 else if(sel=="sin"r[ix]=Math.sin(r[ix])
 else if(sel=="sqrt"r[ix]=Math.sqrt(r[ix])
 else r[ix]=Math.tan(r[ix])
 decimal=false
 display(r[ix])
}
// --></SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript"><!--
setStartState()
// --></SCRIPT>
<H1>Doing Math</H1>
<FORM NAME="calculator">
<TABLE BORDER="BORDER" ALIGN="CENTER">
<TR>
<TD COLSPAN="6"><INPUT TYPE="TEXT" NAME="total" VALUE="0"
 SIZE="44"></TD></TR>
<TR>
<TD><INPUT TYPE="BUTTON" NAME="n0" VALUE="   0   " ONCLICK="addDigit(0)"></TD>
<TD><INPUT TYPE="BUTTON" NAME="n1" VALUE="   1   " ONCLICK="addDigit(1)"></TD>
<TD><INPUT TYPE="BUTTON" NAME="n2" VALUE="   2   " ONCLICK="addDigit(2)"></TD>
<TD><INPUT TYPE="BUTTON" NAME="equals" VALUE="  =   " ONCLICK="calc()"></TD>
<TD ROWSPAN="1"><INPUT TYPE="BUTTON" NAME="clearField" VALUE="    Clear   " ONCLICK="clearDisplay()"></TD>
<TD COLSPAN="1"><INPUT TYPE="BUTTON" NAME="ln2" VALUE="      ln2       " ONCLICK="setTo(Math.LN2)"></TD></TR>
<TR><TD><INPUT TYPE="BUTTON" NAME="n3" VALUE="   3   " ONCLICK="addDigit(3)"></TD>
<TD><INPUT TYPE="BUTTON" NAME="n4" VALUE="   4   " ONCLICK="addDigit(4)"></TD>
<TD><INPUT TYPE="BUTTON" NAME="n5" VALUE="   5   " ONCLICK="addDigit(5)"></TD>
<TD COLSPAN="1" ROWSPAN="1"><INPUT TYPE="BUTTON" NAME="sign" VALUE=" +/- " ONCLICK="changeSign()"></TD>
<TD ROWSPAN="1">
<INPUT TYPE="BUTTON" NAME="sqrt2" VALUE="  sqrt(2)   " ONCLICK="setTo(Math.SQRT2)"></TD>
<TD COLSPAN="1" ROWSPAN="1">
<INPUT TYPE="BUTTON" NAME="ln10" VALUE="     ln10     " ONCLICK="setTo(Math.LN10)"></TD></TR>
<TR>
<TD><INPUT TYPE="BUTTON" NAME="n6" VALUE="   6   " ONCLICK="addDigit(6)"></TD>
<TD><INPUT TYPE="BUTTON" NAME="n7" VALUE="   7   " ONCLICK="addDigit(7)"></TD>
<TD><INPUT TYPE="BUTTON" NAME="n8" VALUE="   8   " ONCLICK="addDigit(8)"></TD>
<TD COLSPAN="1" ROWSPAN="1">
<INPUT TYPE="BUTTON" NAME="pi" VALUE=" pi  " ONCLICK="setTo(Math.PI)"></TD>
<TD COLSPAN="1" ROWSPAN="1">
<INPUT TYPE="BUTTON" NAME="sqrt12" VALUE="sqrt(1/2) " ONCLICK="setTo(Math.SQRT1_2)"></TD>
<TD COLSPAN="1" ROWSPAN="1">
<INPUT TYPE="BUTTON" NAME="log2e" VALUE="  log2(e)  " ONCLICK="setTo(Math.LOG2E)"></TD></TR>
<TR>
<TD><INPUT TYPE="BUTTON" NAME="n9" VALUE="   9   " ONCLICK="addDigit(9)"></TD>
<TD><INPUT TYPE="BUTTON" NAME="decimal" VALUE="   .    " ONCLICK="addDecimalPoint()"></TD>
<TD><INPUT TYPE="BUTTON" NAME="plus" VALUE="   +   " ONCLICK="performOp('+')"></TD>
<TD COLSPAN="1" ROWSPAN="1"><INPUT TYPE="BUTTON" NAME="e" VALUE=" e   " ONCLICK="setTo(Math.E)"></TD>
<TD COLSPAN="1" ROWSPAN="1"><INPUT TYPE="BUTTON" NAME="random" VALUE="Random"
 ONCLICK="setTo(Math.random())"></TD>
<TD COLSPAN="1" ROWSPAN="1"><INPUT TYPE="BUTTON" NAME="log10e" VALUE="log10(e)  " ONCLICK="setTo(Math.LOG10E)"></TD></TR>
<TR>
<TD><INPUT TYPE="BUTTON" NAME="minus" VALUE="   -    " ONCLICK="performOp('-')"></TD>
<TD><INPUT TYPE="BUTTON" NAME="multiply" VALUE="    X  " ONCLICK="performOp('*')"></TD>
<TD><INPUT TYPE="BUTTON" NAME="divide" VALUE="    /   " ONCLICK="performOp('/')"></TD>
<TD COLSPAN="3" ROWSPAN="1"><B>Functions: </B>
<SELECT NAME="functions" SIZE="1">
<OPTION VALUE="abs" SELECTED="SELECTED">abs(x)</OPTION>
<OPTION VALUE="acos">acos(x)</OPTION>
<OPTION VALUE="asin">asin(x)</OPTION>
<OPTION VALUE="atan">atan(x)</OPTION>
<OPTION VALUE="ceil">ceil(x)</OPTION>
<OPTION VALUE="cos">cos(x)</OPTION>
<OPTION VALUE="exp">exp(x)</OPTION>
<OPTION VALUE="floor">floor(x)</OPTION>
<OPTION VALUE="log">log(x)</OPTION>
<OPTION VALUE="sin">sin(x)</OPTION>
<OPTION VALUE="sqrt">sqrt(x)</OPTION>
<OPTION VALUE="tan">tan(x)</OPTION>
</SELECT>
<INPUT TYPE="BUTTON" NAME="apply" VALUE="Apply"
 onClick="applyFunction()"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Page Components
» Calculator