Mega Code Archive

 
Categories / JavaScript DHTML / Page Components
 

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])!=0) r[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>