Building a Calculator : Calendar : GUI Components : JavaScript DHTML examples (example source code) Organized by topic

JavaScript DHTML
C++
PHP
JavaScript DHTML Home »  GUI Components   » [  Calendar  ]   
 



Building a Calculator

Please note that some example is only working under IE or Firefox.


/*
Mastering JavaScript, Premium Edition
by James Jaworski 

ISBN:078212819X
Publisher Sybex CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Calculator</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
r = new Array(2)
function setStartState(){
 state="start"
 r[0"0"
 r[1"0"
 operand=""
 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 calc(){
 if(state=="gettingInteger" || state=="gettingFloat" ||
  state=="haveOperand"){
  if(ix==1){
   r[0]=calculateOperation(operand,r[0],r[1])
   ix=0
  }
 }else if(state=="getOperand2"){
  r[0]=calculateOperation(operand,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
  operand=op
 }else if(state=="gettingInteger" || state=="gettingFloat" ||
  state=="haveOperand"){
  if(ix==0){
   ++ix
   operand=op
  }else{
   r[0]=calculateOperation(operand,r[0],r[1])
   display(r[0])
   operator=op
  }
 }
 state="getOperand2"
 decimal=false
}
// --></SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript"><!--
setStartState()
// --></SCRIPT>
<FORM NAME="calculator">
<TABLE BORDER="BORDER" ALIGN="CENTER">
<TR>
<TD COLSPAN="3"><INPUT TYPE="TEXT" NAME="total" VALUE="0"
 SIZE="15"></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>
</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>
</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>
</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>
</TR>
<TR>
<TD><INPUT TYPE="BUTTON" NAME="minus" VALUE="   -    "
 ONCLICK="performOp('-')"></TD>
<TD><INPUT TYPE="BUTTON" NAME="multiply" VALUE="   *   "
 ONCLICK="performOp('*')"></TD>
<TD><INPUT TYPE="BUTTON" NAME="divide" VALUE="    /   "
 ONCLICK="performOp('/')"></TD>
</TR>
<TR>
<TD><INPUT TYPE="BUTTON" NAME="equals" VALUE="   =   "
 ONCLICK="calc()"></TD>
<TD COLSPAN="1" ROWSPAN="1"><INPUT TYPE="BUTTON"
 NAME="sign" VALUE=" +/-  " ONCLICK="changeSign()"></TD>
<TD><INPUT TYPE="BUTTON" NAME="clearField" VALUE="   C  "
 ONCLICK="clearDisplay()"></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

           
       
Related examples in the same category
1.  Date Picker in new windowHas Download File
2.  All browser CalendarHas Download File
3.  DHTML Calendar for the impatientHas Download File
4.  Calendar: special dayHas Download File
5.  Calendar: day infoHas Download File
6.  Calendar: Multiple day selectionHas Download File
7.  Calendar with different themeHas Download File
8.  Calendar with image for each monthHas Download File
9.  Fancy Calendar Has Download File
10.  Another Calendar Has Download File
11.  Date Time PickerHas Download File
12.  Month Calendar
13.  A Dynamic Calendar Table
14.  Dynamic HTML Calendar
15.   A Static Calendar by JavaScript
16.  Displaying the Calendar
17.  Calendar (IE only)
18.  Calendar in slide tab
19.  Another DHTML Calendar
20.  Event CalendarHas Download File








Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.