Rechner - Beispiel für JavaScript-Programmierung

7 8 9 E+ E+
4 5 6 E- E-
1 2 3 +-
0 .
+ yx
- logxy
* =
/ C AC
sin cos tan
arcsin arccos arctan
ex x2 x3
logex x1/2 x1/3
round ceil floor
1/x π e
--> M1 M1 -->
--> M2 M2 -->
--> M3 M3 -->
--> M4 M4 -->
--> M5 M5 -->
--> M6 M6 -->
Quelltext für das Auswahlformular
hoch runter

<form name="rechner">
<table cellpadding="5" cellspacing="2" border="0">
<tr><th style="background:#E0D0C0" colspan="4">
hoch runter

<table cellpadding="5" cellspacing="2" border="0"><tr><th style="background:#FFFFFF">
<span style="white-space:nowrap;">
<img src="plusminus.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
<img src="emptys.gif">
</span>
</td></tr></table>
hoch runter

</th></tr>
<tr><th style="background:#F0F0D0">
hoch runter

<table cellpadding="2" cellspacing="2" border="0">
<tr><th style="background:#E0E0A0">
<a href="javascript:AddChar(&quot;7&quot;)"><img src="7.gif" border="0" alt="7"></a>
</th><th style="background:#E0E0A0">
<a href="javascript:AddChar(&quot;8&quot;)"><img src="8.gif" border="0" alt="8"></a>
</th><th style="background:#E0E0A0">
<a href="javascript:AddChar(&quot;9&quot;)"><img src="9.gif" border="0" alt="9"></a>
</th><th style="background:#E0E0A0">
<a href="javascript:AddChar(&quot;E+&quot;)">
<img src="es.gif" border="0" alt="E+">
<img src="pluss.gif" border="0" alt="E+">
</th></tr>
<tr><th style="background:#E0E0A0">
<a href="javascript:AddChar(&quot;4&quot;)"><img src="4.gif" border="0" alt="4"></a>
</th><th style="background:#E0E0A0">
<a href="javascript:AddChar(&quot;5&quot;)"><img src="5.gif" border="0" alt="5"></a>
</th><th style="background:#E0E0A0">
<a href="javascript:AddChar(&quot;6&quot;)"><img src="6.gif" border="0" alt="6"></a>
</th><th style="background:#E0E0A0">
<a href="javascript:AddChar(&quot;E-&quot;)">
<img src="es.gif" border="0" alt="E-">
<img src="minuss.gif" border="0" alt="E-">
</a>
</th></tr>
<tr><th style="background:#E0E0A0">
<a href="javascript:AddChar(&quot;1&quot;)"><img src="1.gif" border="0" alt="1"></a>
</th><th style="background:#E0E0A0">
<a href="javascript:AddChar(&quot;2&quot;)"><img src="2.gif" border="0" alt="2"></a>
</th><th style="background:#E0E0A0">
<a href="javascript:AddChar(&quot;3&quot;)"><img src="3.gif" border="0" alt="3"></a>
</th><th style="background:#E0E0A0" rowspan="2">
<a href="javascript:AddChar(&quot;+-&quot;)"><img src="plusminus.gif" border="0" alt="+-"></a>
</th></tr>
<tr><th style="background:#E0E0A0" colspan="2">
<a href="javascript:AddChar(&quot;0&quot;)"><img src="0.gif" border="0" alt="0"></a>
</th><th style="background:#E0E0A0">
<a href="javascript:AddChar(&quot;.&quot;)"><img src="point.gif" border="0" alt="."></a>
</th></tr>
</table>
hoch runter

</th><th style="background:#E0F0D0">
hoch runter

<table cellpadding="2" cellspacing="2" border="0">
<tr><th style="background:#C0E0A0">
<a href="javascript:Berechne(&quot;+&quot;)"><img src="plus.gif" border="0" alt="+"></a>
</th><th style="background:#C0E0A0" colspan="2">
<a href="javascript:Berechne(&quot;^&quot;)">y<sup>x</sup></a>
</th></tr>
<tr><th style="background:#C0E0A0">
<a href="javascript:Berechne(&quot;-&quot;)"><img src="minus.gif" border="0" alt="-"></a>
</th><th style="background:#C0E0A0" colspan="2">
<a href="javascript:Berechne(&quot;log&quot;)">log<sub>x</sub>y</a>
</th></tr>
<tr><th style="background:#C0E0A0">
<a href="javascript:Berechne(&quot;*&quot;)"><img src="mult.gif" border="0" alt="*"></a>
</th><th style="background:#D0D0F0" colspan="2">
<a href="javascript:Berechne(&quot;=&quot;)"><img src="equals.gif" border="0" alt="="></a>
</th></tr>
<tr><th style="background:#C0E0A0">
<a href="javascript:Berechne(&quot;/&quot;)"><img src="div.gif" border="0" alt="/"></a>
</th><th style="background:#F0D0A0">
<a href="javascript:ClearVal()">C</a>
</th><th style="background:#F0D0A0">
<a href="javascript:ClearAll()">AC</a>
</th></tr>
</table>
hoch runter

</th><th style="background:#E8E8FF">
hoch runter

<table cellpadding="4" cellspacing="2" border="0">
<tr><th style="background:#D0D0F0">
<a href="javascript:Funktion(1)">sin</a>
</th><th style="background:#D0D0F0">
<a href="javascript:Funktion(2)">cos</a>
</th><th style="background:#D0D0F0">
<a href="javascript:Funktion(3)">tan</a>
</th></tr>
<tr><th style="background:#D0D0F0">
<a href="javascript:Funktion(4)">arcsin</a>
</th><th style="background:#D0D0F0">
<a href="javascript:Funktion(5)">arccos</a>
</th><th style="background:#D0D0F0">
<a href="javascript:Funktion(6)">arctan</a>
</th></tr>
<tr><th style="background:#D0D0F0">
<a href="javascript:Funktion(7)">e<sup>x</sup></a>
</th><th style="background:#D0D0F0">
<a href="javascript:Funktion(16)">x<sup>2</sup></a>
</th><th style="background:#D0D0F0">
<a href="javascript:Funktion(17)">x<sup>3</sup></a>
</th></tr>
<tr><th style="background:#D0D0F0">
<a href="javascript:Funktion(8)">log<sub>e</sub>x</a>
</th><th style="background:#D0D0F0">
<a href="javascript:Funktion(9)">x<sup>1/2</sup></a>
</th><th style="background:#D0D0F0">
<a href="javascript:Funktion(18)">x<sup>1/3</sup></a>
</th></tr>
<tr><th style="background:#D0D0F0">
<a href="javascript:Funktion(10)">round</a>
</th><th style="background:#D0D0F0">
<a href="javascript:Funktion(11)">ceil</a>
</th><th style="background:#D0D0F0">
<a href="javascript:Funktion(12)">floor</a>
</th></tr>
<tr><th style="background:#D0D0F0">
<a href="javascript:Funktion(13)">1/x</a>
</th><th style="background:#D0D0F0">
<a href="javascript:Funktion(14)">&pi;</a>
</th><th style="background:#D0D0F0">
<a href="javascript:Funktion(15)">e</a>
</th></tr>
</table>
hoch runter

</th><th style="background:#F0F0D0">
hoch runter

<table cellpadding="4" cellspacing="2" border="0">
<tr><th style="background:#E0E0A0">
<a href="javascript:MemIn(0)">--&gt; M1</a>
</th><th style="background:#E0E0A0">
<a href="javascript:MemOut(0)">M1 --&gt;</a>
</th></tr>
<tr><th style="background:#E0E0A0">
<a href="javascript:MemIn(1)">--&gt; M2</a>
</th><th style="background:#E0E0A0">
<a href="javascript:MemOut(1)">M2 --&gt;</a>
</th></tr>
<tr><th style="background:#E0E0A0">
<a href="javascript:MemIn(2)">--&gt; M3</a>
</th><th style="background:#E0E0A0">
<a href="javascript:MemOut(2)">M3 --&gt;</a>
</th></tr>
<tr><th style="background:#E0E0A0">
<a href="javascript:MemIn(3)">--&gt; M4</a>
</th><th style="background:#E0E0A0">
<a href="javascript:MemOut(3)">M4 --&gt;</a>
</th></tr>
<tr><th style="background:#E0E0A0">
<a href="javascript:MemIn(4)">--&gt; M5</a>
</th><th style="background:#E0E0A0">
<a href="javascript:MemOut(4)">M5 --&gt;</a>
</th></tr>
</table>
<tr><th style="background:#E0E0A0">
<a href="javascript:MemIn(5)">--&gt; M6</a>
</th><th style="background:#E0E0A0">
<a href="javascript:MemOut(5)">M6 --&gt;</a>
</th></tr>
</table>
hoch runter

</th></tr>
</table>
</form>


JavaScript-Quelltext in der Datei rechner.js
hoch runter

/* interne Maschinerie eines Rechners mit Vorrangautomatik,
   der Addition, Subtraktion, Multiplikation, Division,
   Potenzieren und Logarithmieren beherrscht
   (c) 2001 Ulrich Kritzner */
hoch runter

var operands=new Array(0.0,0.0,0.0,0.0,0.0);
var operators=new Array(" "," "," "," ");
var operatorlist=new Array("+","-","*","/","^","log"," ","=");
var operatorlayer=new Array(1,1,2,2,3,3,4,0);
var oplayer=0;
hoch runter

function ClearOP()
/* re-initialisiert den Rechner komplett */
{
  var i;
  for (i=0;i<4;i++)
    operands[i]=0.0;
  for (i=0;i<3;i++)
    operators[i]=" ";
}
hoch runter

function OperatorIndex(operator)
/* Index eines Operators im operatorlist-Array */
{
  var i,ret=-1;
  for (i=0;i<operatorlist.length;i++)
    if (operatorlist[i]==operator)
      ret=i;
  return ret;
}
hoch runter

function OperatorLayer(operator)
/* Priorität eines Operators */
{
  var i,ret=-1;
  for (i=0;i<operatorlist.length;i++)
    if (operatorlist[i]==operator)
      ret=operatorlayer[i];
  return ret;
}
hoch runter

function Operate(val1,val2,operator)
/* verknüpft zwei Operanden mit dem Operator */
{
  var i=OperatorIndex(operator),ret;
  if (i>=0)
    switch (i)
    {
      case 0: ret=val1+val2; break;
      case 1: ret=val1-val2; break;
      case 2: ret=val1*val2; break;
      case 3: ret=val1/val2; break;
      case 4: ret=Math.exp(Math.log(val1)*val2); break;
      case 5: ret=Math.log(val1)/Math.log(val2); break;
      case 6: ret=val2; break;
      case 7: ret=val2; break;
    }
  return ret;
}
hoch runter

function SetOperand(operand)
/* setzt einen Operanden in die aktuelle Prioritätsebene */
{
  operands[oplayer]=operand;
}
hoch runter

function SetOperator(operator)
/* setzt einen neuen Operator und führt alle nötigen Operationen aus */
{
  var i,newlayer=OperatorLayer(operator);
  if (newlayer<0)
    return;
  while (newlayer<oplayer)
  {
    oplayer--;
    operands[oplayer]=Operate(operands[oplayer],operands[oplayer+1],operators[oplayer]);
    operands[oplayer+1]=0.0;
    operators[oplayer]=" ";
  }
  while (newlayer>oplayer)
  {
    operators[oplayer]=" ";
    operands[oplayer+1]=operands[oplayer];
    oplayer++;
  }
  operators[newlayer]=operator;
  oplayer=newlayer+1;
  return operands[newlayer];
}


JavaScript-Quelltext in rechner.html
hoch runter

<script type="text/javascript" src="rechner.js"></script>
<script type="text/javascript">
<!--
hoch runter

var valstring="";
var pointenabled=1;
var expenabled=1;
var negation=0;
var memories=new Array(0.0,0.0,0.0,0.0,0.0,0.0);
hoch runter

/* Bilder -------- */
var img_vz=new Array(new Image(),new Image());
var img_nr=new Array(new Image(),new Image(),new Image(),new Image(),new Image(),
                     new Image(),new Image(),new Image(),new Image(),new Image());
img_vz[0].src="plus.gif";
img_vz[1].src="minus.gif";
img_point=new Image();
img_point.src="points.gif";
img_empty=new Image();
img_empty.src="emptys.gif";
img_minus=new Image();
img_minus.src="minuss.gif";
img_pluss=new Image();
img_pluss.src="pluss.gif";
img_e=new Image();
img_e.src="es.gif";
img_X=new Image();
img_X.src="Xs.gif";
{
  var i;
  for (i=0;i<10;i++)
  {
    img_nr[i].src=""+i+"s.gif";
  }
}
/* -------- Bilder */
hoch runter

function Darstellen()
/* schreibt die Zahl in Bilder um */
{
  var i;
  var value=parseFloat(valstring);
  document.images[3].src=img_vz[negation].src;
  if (isNaN(value))
  {
    for (i=0;i<24;i++)
    {
      document.images[i+4].src=img_empty.src;
    }
  }
  else
  {
    for (i=0;i<24;i++)
    {
      if (i<valstring.length)
      {
        if ((valstring.charAt(i)>="0")&&(valstring.charAt(i)<="9"))
          document.images[i+4].src=img_nr[parseInt(valstring.charAt(i))].src;
        else
        {
          document.images[i+4].src=img_X.src;
          if (valstring.charAt(i)==".")
            document.images[i+4].src=img_point.src;
          if (valstring.charAt(i)=="-")
            document.images[i+4].src=img_minus.src;
          if (valstring.charAt(i)=="+")
            document.images[i+4].src=img_pluss.src;
          if ((valstring.charAt(i)=="e")||(valstring.charAt(i)=="E"))
            document.images[i+4].src=img_e.src;
        }
      }
      else
        document.images[i+4].src=img_empty.src;
    }
  }
}
hoch runter

function Berechne(operator)
/* reagiert auf Verknüpfungsaufforderung (+ - * / ^ log) */
{
  if ((valstring=="")||(valstring=="."))
    valstring="0";
  var value=parseFloat(valstring);
  if (negation)
    value=-value;
  SetOperand(value);
  pointenabled=2;
  value=SetOperator(operator);
  if (value<0)
  {
    negation=1;
    value=-value;
  }
  else
    negation=0;
  valstring=String(value);
  Darstellen();
}
hoch runter

function MemIn(number)
/* setzt eine Speicherzelle */
{
  if ((valstring=="")||(valstring=="."))
    valstring="0";
  var value=parseFloat(valstring);
  if (!isNaN(value))
    memories[number]=value;
  pointenabled=2;
  valstring=String(value);
  Darstellen();
}
hoch runter

function MemOut(number)
/* fragt eine Speicherzelle ab */
{
  if (!isNaN(memories[number]))
  {
    var value;
    value=memories[number];
    pointenabled=2;
    valstring=String(value);
    Darstellen();
  }
}
hoch runter

function Funktion(number)
/* reagiert auf Funktionsanforderung */
{
  if ((valstring=="")||(valstring=="."))
    valstring="0";
  var value=parseFloat(valstring);
  switch (number)
  {
    case 1: value=Math.sin(value); break;
    case 2: value=Math.cos(value); break;
    case 3: value=Math.tan(value); break;
    case 4: value=Math.asin(value); break;
    case 5: value=Math.acos(value); break;
    case 6: value=Math.atan(value); break;
    case 7: value=Math.exp(value); break;
    case 8: value=Math.log(value); break;
    case 9: value=Math.sqrt(value); break;
    case 10: value=Math.round(value); break;
    case 11: value=Math.ceil(value); break;
    case 12: value=Math.floor(value); break;
    case 13: value=1/value; break;
    case 14: value=Math.PI; break;
    case 15: value=Math.E; break;
    case 16: value=value*value; break;
    case 17: value=value*value*value; break;
    case 18: value=Math.exp(Math.log(value)*1/3); break;
  }
  pointenabled=2;
  valstring=String(value);
  Darstellen();
}
hoch runter

function AddChar(s)
/* fügt ein Zeichen an die aktuelle Zahl an */
{
  var normal=1;
  if (pointenabled==2)
  {
    valstring="";
    negation=0;
    pointenabled=1;
    expenabled=1;
  }
  if (s!="+-")
  {
    if (valstring.length<23)
    {
      if (s==".")
      {
        normal=0;
        if (pointenabled==1)
        {
          valstring=valstring+s;
          pointenabled=0;
        }
      }
      if (s.charAt(0)=="E")
      {
        normal=0;
	pointenabled=0;
        if (expenabled==1)
        {
          valstring=valstring+s;
          expenabled=0;
        }
      }
      if (normal)
        valstring=valstring+s;
    }
  }
  else
  {
    if (negation==1)
      negation=0;
    else
      negation=1;
  }
  Darstellen();
}
hoch runter

function ClearVal()
/* löscht die aktuelle Zahl */
{
  valstring="";
  negation=0;
  pointenabled=1;
  expenabled=1;
  Darstellen();
}
hoch runter

function ClearAll()
/* reinitialisiert den Rechner */
{
  ClearOP();
  valstring="";
  negation=0;
  pointenabled=1;
  expenabled=1;
  Darstellen();
}
hoch runter

//-->
</script>


Autor: Ulrich Kritzner