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.  HTML Calendar based on DynAPIHas Download File
2.  JavaScript Date Picker based on ComboBoxHas Download File
3.  Calendar Control - Single-Select ImplementationHas Download File
4.  Calendar Control - 2-Up ImplementationHas Download File
5.  Calendar Control - Handling onSelect / onDeselectHas Download File
6.  Calendar Control - Mix/Max ImplementationHas Download File
7.  Calendar Control - Multi-Select ImplementationHas Download File
8.  Calendar Control - Multi-Select 2-up ImplementationHas Download File
9.  Calendar Control - Custom Renderer Example (Holiday Renderer Implementation)Has Download File
10.  Calendar Control - Date Restriction Example (Date Restriction Implementation)Has Download File
11.  Calendar Control - Row Highlight Example (Row Highlight Implementation)Has Download File
12.  Popup calendarHas Download File
13.  Month Calendar
14.  Popup Calendar for a textfield
15.  Multiselection Calendar
16.  Free Date Picker : An easy plugin to add a date picker (calendar) in your web site
17.  HTML Date Picker
18.  Date Picker in new windowHas Download File
19.  All browser CalendarHas Download File
20.  DHTML Calendar for the impatientHas Download File
21.  Calendar: special dayHas Download File
22.  Calendar: day infoHas Download File
23.  Calendar: Multiple day selectionHas Download File
24.  Calendar with different themeHas Download File
25.  Calendar with image for each monthHas Download File
26.  Fancy Calendar Has Download File
27.  Another Calendar Has Download File
28.  Date Time PickerHas Download File
29.  Month Calendar
30.  A Dynamic Calendar Table
31.  Dynamic HTML Calendar
32.   A Static Calendar by JavaScript
33.  Displaying the Calendar
34.  Calendar (IE only)
35.  Calendar in slide tab
36.  Another DHTML Calendar
37.  Event CalendarHas Download File
38.  Open 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.