SELFHTML: JavaScript / Anwendungsbeispiele / Taschenrechner
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Wie Sie mit Hilfe von JavaScript einen Taschenrechner simulieren können.
Keywords: SELFHTML, JavaScript, Taschenrechner
Date: 2005-08-22T21:21:39+02:00

| # Taschenrechner
| Hinweise zu diesem Beispiel Quelltext mit Erläuterungen Anzeigebeispiel: So sieht's aus

## Hinweise zu diesem Beispiel

Das Beispiel baut mit Hilfe eines HTML-Formulars einen halbwegs "echt" aussehenden Taschenrechner auf. Der Anwender kann diesen Taschenrechner wie üblich bedienen. Allerdings bietet dieser Taschenrechner im Gegensatz zu normalen Taschenrechnern auch die Möglichkeit an, direkt ins Display Daten einzugeben. Außerdem berechnet dieser Taschenrechner auch Serienrechnungen wie `1+2+3+4+5+6+7+8+9` und Klammerausdrücke wie `3*(2+4)`.

Anhand dieses Beispiels können Sie studieren, wie man Formulareingaben mit JavaScript zur direkten Interaktion verwenden kann. Das Taschenrechner-Beispiel ist ein JavaScript-Einsatz vom Typus Kleine Helferlein. Diese Art Einsatz von JavaScript gehört zu den sinnvollsten Einsatzmöglichkeiten.

## Quelltext mit Erläuterungen

Das Beispiel zeigt die vollständige HTML-Datei mit dem Taschenrechner.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html>
    <head>
    <title>Taschenrechner</title>
    <script type="text/javascript">
    function Check (Eingabe) {
      var nur_das = "0123456789[]()-+*%/.";
      for (var i = 0; i < Eingabe.length; i++)
        if (nur_das.indexOf(Eingabe.charAt(i)) < 0)
          return false;
      return true;
    }

    function Ergebnis () {
      var x = 0;
      if (Check(window.document.Rechner.Display.value))
        x = eval(window.document.Rechner.Display.value);
      window.document.Rechner.Display.value = x;
    }

    function Hinzufuegen (Zeichen) {
      window.document.Rechner.Display.value = window.document.Rechner.Display.value + Zeichen;
    }

    function Sonderfunktion (Funktion) {
      if (Check(window.document.Rechner.Display.value)) {
        if (Funktion == "sqrt") {
          var x = 0;
          x = eval(window.document.Rechner.Display.value);
          window.document.Rechner.Display.value = Math.sqrt(x);
        }
        if (Funktion == "pow") {
          var x = 0;
          x = eval(window.document.Rechner.Display.value);
          window.document.Rechner.Display.value = x * x;
        }
        if (Funktion == "ln") {
          var x = 0;
          x = eval(window.document.Rechner.Display.value);
          window.document.Rechner.Display.value = Math.log(x);
        }
      } else
        window.document.Rechner.Display.value = 0}
    </script>
    <style type="text/css">
    .button {  width:60px; text-align:center;
               font-family:System,sans-serif;
               font-size:100%; }
    .display { width:100%; text-align:right;
               font-family:System,sans-serif;
               font-size:100%; }
    </style>
    </head>
    <body bgcolor="#FFFFE0">

    <form name="Rechner" action="" onsubmit="Ergebnis();return false;">
    <table border="5" cellpadding="10" cellspacing="0">
    <tr>
    <td bgcolor="#C0C0C0">
    <input type="text" name="Display" align="right" class="display"></td>
    </tr><tr>
    <td  bgcolor="#E0E0E0">
    <table border="0" cellpadding="0" cellspacing="2">
    <tr>
    <td><input type="button" width="60" class="button" value="  7   " onclick="Hinzufuegen('7')"></td>
    <td><input type="button" width="60" class="button" value="  8   " onclick="Hinzufuegen('8')"></td>
    <td><input type="button" width="60" class="button" value="  9   " onclick="Hinzufuegen('9')"></td>
    <td><input type="button" width="60" class="button" value="  +   " onclick="Hinzufuegen('+')"></td>
    </tr>
    <tr>
    <td><input type="button" width="60" class="button" value="  4   " onclick="Hinzufuegen('4')"></td>
    <td><input type="button" width="60" class="button" value="  5   " onclick="Hinzufuegen('5')"></td>
    <td><input type="button" width="60" class="button" value="  6   " onclick="Hinzufuegen('6')"></td>
    <td><input type="button" width="60" class="button" value="  -   " onclick="Hinzufuegen('-')"></td>
    </tr>
    <tr>
    <td><input type="button" width="60" class="button" value="  1   " onclick="Hinzufuegen('1')"></td>
    <td><input type="button" width="60" class="button" value="  2   " onclick="Hinzufuegen('2')"></td>
    <td><input type="button" width="60" class="button" value="  3   " onclick="Hinzufuegen('3')"></td>
    <td><input type="button" width="60" class="button" value="  *   " onclick="Hinzufuegen('*')"></td>
    </tr>
    <tr>
    <td><input type="button" width="60" class="button" value="  0   " onclick="Hinzufuegen('0')"></td>
    <td><input type="button" width="60" class="button" value="  .   " onclick="Hinzufuegen('.')"></td>
    <td><input type="button" width="60" class="button" value="  =   " onclick="Ergebnis()"></td>
    <td><input type="button" width="60" class="button" value="  /   " onclick="Hinzufuegen('/')"></td>
    </tr>
    <tr>
    <td><input type="button" width="60" class="button" value="sqrt " onclick="Sonderfunktion('sqrt')"></td>
    <td><input type="button" width="60" class="button" value=" pow " onclick="Sonderfunktion('pow')"></td>
    <td><input type="button" width="60" class="button" value=" ln " onclick="Sonderfunktion('ln')"></td>
    <td><input type="reset"  width="60" class="button" value="  C  "></td>
    </tr>
    </table>
    </td></tr></table>
    </form>

    </body>
    </html>

### Erläuterung:

#### Funktion zur Berechnung des Inhalts des Rechenfelds:

Im Beispiel werden im Kopf der HTML-Datei mehrere Funktionen notiert, welche die Funktionalität des Taschenrechners ermöglichen. Die Funktion `Ergebnis()` errechnet den aktuellen Inhalt des Rechenfeldes. Innerhalb der Funktion wird eine Variable `x` definiert, in der das Ergebnis der Berechnung gespeichert wird. Um das Ergebnis zu erhalten, wird die Rechenoperation, die in dem übergebenen Formularfeld (dem Rechenfeld des Taschenrechners) steht, an die mächtige objektunabhängige JavaScript-Funktion `eval()` übergeben. Diese Funktion übernimmt automatisch die gesamte Berechnung der Rechenoperation. Voraussetzung ist natürlich, dass die Rechenoperation keine ungültigen Zeichen enthält. Ansonsten erzeugt JavaScript eine Fehlermeldung.
Aus diesem Grund wird vor jeder Verwendung von `eval()` die Funktion `check()` aufgerufen, welche die Gültigkeit der Eingaben prüft. Nur wenn diese Funktion `true` zurück gibt, wird die Methode `eval()` angewendet. Ansonsten wird im Display der Wert `0` angezeigt.
Um das errechnete Ergebnis, das in der Variablen `x` gespeichert wird, im Rechenfeld des Taschenrechners anzuzeigen, wird dem entsprechenden Formularfeld einfach der Wert von `x` zugewiesen.

#### Funktion zur Prüfung der Gültigkeit der Eingabe

Die Funktion Check(Eingabe) überprüft, ob die Werte von `Eingabe` nur die vorgegebenen Zeichen enthält. Diese sind in der Variablen `nur_das` abgelegt. Mit einer for-Schleife wird die übergebene Zeichenkette Zeichen für Zeichen daraufhin überprüft, ob dieses Zeichen in dem Bereich von `nur_das` vorkommt. Mit der Methode charAt() wird aus der Variablen `Eingabe` das Zeichen an der Position `i` extrahiert und an `nur_das.indexOf()` als Parameter übergeben. Die Methode indexOf() prüft daraufhin, ob das Zeichen in `nur_das` enthalten ist. Tritt ein ungültiges Zeichen auf, so wird die Funktion abgebrochen und der Wert `false` zurückgegeben. Andernfalls gibt die Funktion `true` zurück.

#### Funktion zum Hinzufügen eines Zeichens in das Rechenfeld:

Die Funktion `Hinzufuegen()` im Beispiel wird aufgerufen, wenn der Anwender auf einen der Buttons im Taschenrechner-Formular klickt. Das können Ziffern (`0` bis `9`) oder Rechenoperatoren (`+` `-` `*` `/`) oder ein Dezimalpunkt sein. Um das Zeichen hinzuzufügen, wird dem aktuellen Wert des Rechenfeldes einfach der bisherige Wert plus das neue Zeichen zugewiesen. Dabei kommt der Operator zur Zeichenkettenverknüpfung (`+`) zum Einsatz. Das neue Zeichen wird der Funktion als Parameter übergeben.

#### Funktion zur Berechnung von Sonderfunktionen:

Die Funktion `Sonderfunktion()` im Beispiel ist für die Berechnung von drei mathematischen Funktionen zuständig, für die es im Taschenrechner entsprechende Buttons gibt: die Funktionen "sqrt" (Quadratwurzel), "pow" (Quadrat) und "ln" (natürlicher Logarithmus über 10). Die Funktion erwartet drei Parameter: den Index des Formulars, in dem sich das Rechenfeld befindet, den Index des Feldes innerhalb dieses Formulars, und eine Zeichenkette, die die auszuführende mathematische Funktion kennzeichnet. Innerhalb der Funktion wird der dritte Parameter abgefragt. Erlaubt sind die Übergabewerte "sqrt", "pow" und "ln". Falls einer dieser Werte übergeben wurde, berechnet die Funktion innerhalb des entsprechenden If-Zweigs den gewünschten Wert. Dazu wird die Rechenoperation oder die Zahl, die in dem übergebenen Formularfeld (dem Rechenfeld des Taschenrechners) steht, an die JavaScript-Standardfunktion `eval()` übergeben. Diese Funktion übernimmt automatisch die gesamte Berechnung der Rechenoperation. Das Ergebnis wird in `x` gespeichert. Falls es sich nur um eine einfache Zahl handelt, wird diese Zahl in `x` gespeichert. Mit einer entsprechenden JavaScript-Methode, z.B. der Methode `sqrt()` zur Errechnung der Quadratwurzel, wird das Ergebnis der mathematischen Sonderfunktion berechnet und zugleich dem Rechen-/Ergebnisfeld des Taschenrechner-Formulars zugewiesen.

#### Button-Klick als Zeichen in Rechenfeld eintragen:

Innerhalb des Taschenrechner-Formulars im Beispiel werden die Buttons für Ziffern, Operatoren usw. definiert. Beim Klicken auf einen solchen Button soll natürlich eine entsprechende Reaktion erfolgen. Dies geschieht mit Hilfe des Event-Handlers `onclick`. Der Event-Handler wird aktiv, wenn der entsprechende Button angeklickt wird, und ruft dann eine der im Dateikopf definierten Funktionen auf. Bei einer Ziffer wird beispielsweise die Funktion `Hinzufuegen()` aufgerufen. Dazu wird der Funktion der erwartete Parameter übergeben, also das hinzuzufügende Zeichen. Das Taschenrechner-Formular erhält bei der Definition einen Namen, im Beispiel den Namen "Rechner". Auch das Rechen-/Ergebnisfeld, das im JavaScript-Code sehr oft angesprochen wird, erhält einen Namen - den Namen "Display". Das Formular-Objekt und das Formularelement-Objekt des Rechen-/Ergebnisfeldes kann deshalb mit `window.document.Rechner.Display` adressiert werden.

#### Inhalt des Rechenfelds löschen:

Der Button mit der Aufschrift "C" im Beispiel dient zum Löschen der bisherigen Eingaben. Dazu braucht man kein JavaScript. Stattdessen genügt es, einen Button vom Typ `reset` zu definieren.

#### Absenden des Formulares verhindern

Da der Taschenrechner ein einzeiliges Formularfeld enthält, kann dieses Formular jederzeit mit Betätigung der Eingabetaste abgesendet werden. Ein Absenden ist im Zusammenhang mit dem Taschenrechner jedoch unerwünscht. Deshalb wird im einleitenden `<form>`-Tag der Event-Handler `onsubmit` notiert. Dahinter folgt der Aufruf der Funktion `Ergebnis()` und anschließend `return false`. Diese Notation bewirkt, dass wenn der Anwender die Eingabetaste drückt, die Berechnung des Ergebnisse erfolgt und gleichzeitig ein Abschicken des Formulares verhindert wird.

### Beachten Sie:

Im HTML-Standard ist die Verwendung des Attributes `width` für `input`-Felder nicht erlaubt. Der Netscape 4.x interpretiert jedoch keine CSS-Eigenschaften für solche Formularfelder. Im Interesse des Layouts wurden daher trotz der Verletzung des HTML-Standards die `width`-Attribute verwendet.

| Monatskalender
| Seitenanzeige in Frames verhindern

© 2007 Impressum