SELFHTML: JavaScript / Anwendungsbeispiele / Taschenrechner

SELFHTML/Quickbar JavaScript Anwendungsbeispiele

	Taschenrechner
	Taschenrechner - das Beispiel

Taschenrechner

Anzeigebeispiel: So sieht's aus

Das Beispiel baut mit Hilfe eines HTML-Formulars einen einigermaßen "echt" aussehenden Taschenrechner auf. Der Anwender kann diesen Taschenrechner wie üblich bedienen. Dazu kommen noch einige besonders bequeme Eingabemethoden.

Anhand dieses Beispiels können Sie studieren, wie man Formulareingaben mit JavaScript zur direkten Interaktion verwenden kann.

Hinweis: Zur besseren Orientierung enthält das Beispiel Verweise zu den entsprechenden Erläuterungen, z.B. 1*. Diese Verweise gehören nicht zum Quellcode. Falls Sie das Beispiel in einen Editor kopieren, müssen Sie diese Verweise löschen. Andernfalls erhalten Sie JavaScript-Fehlermeldungen.

Beispiel:

  <html>
  <head>
  <title>Taschenrechner</title>
  <script language="JavaScript">
  <!--
  1* function Ergebnis()
 {
   var x = 0;
   x = eval(window.document.Rechner.Display.value);
   window.document.Rechner.Display.value = x;   
 }

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

 3* function Sonderfunktion(Funktion)
 {
   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 == "log")
    {
     var x = 0;
     x = eval(window.document.Rechner.Display.value);
     window.document.Rechner.Display.value = Math.log(x);   
	}
 }
  //-->
  </script>
  </head>
  
  <body bgcolor=#CCCCCC text=#000000 link=#0000CC vlink=#000099 alink=#0000FF>
  <h1>Taschenrechner</h1>
  <form name="Rechner">
  <table border=10 cellpadding=10>
  <tr>
  <td bgcolor=#C0C0C0><input name="Display" size=30 maxlength=30></td> 
  </tr>
  <tr><td><table>
  <tr>
  4* <td width=50><input type=button value="   7   " onClick="Hinzufuegen('7')"></td>   
  <td width=50><input type=button value="   8   " onClick="Hinzufuegen('8')"></td>
  <td width=70><input type=button value="   9   " onClick="Hinzufuegen('9')"></td>
  <td width=50><input type=button value="   +    " onClick="Hinzufuegen('+')"></td>
  </tr>
  <tr>
  <td width=50><input type=button value="   4   " onClick="Hinzufuegen('4')"></td>
  <td width=50><input type=button value="   5   " onClick="Hinzufuegen('5')"></td>
  <td width=70><input type=button value="   6   " onClick="Hinzufuegen('6')"></td>
  <td width=50><input type=button value="    -    " onClick="Hinzufuegen('-')"></td>
  </tr>
  <tr>
  <td width=50><input type=button value="   1   " onClick="Hinzufuegen('1')"></td>
  <td width=50><input type=button value="   2   " onClick="Hinzufuegen('2')"></td>
  <td width=70><input type=button value="   3   " onClick="Hinzufuegen('3')"></td>
  <td width=50><input type=button value="    *    " onClick="Hinzufuegen('*')"></td>
  </tr>
  <tr>
  <td width=50><input type=button value="    =    " onClick="Ergebnis()"></td>
  <td width=50><input type=button value="   0   " onClick="Hinzufuegen('0')"></td>
  <td width=70><input type=button value="   .    " onClick="Hinzufuegen('.')"></td>
  <td width=50><input type=button value="    /    " onClick="Hinzufuegen('/')"></td>
  </tr>
  <tr>
  <tr>
  <td width=50><input type=button value="sqrt " onClick="Sonderfunktion('sqrt')"></td>
  <td width=50><input type=button value=" pow " onClick="Sonderfunktion('pow')"></td>
  <td width=70><input type=button value=" log " onClick="Sonderfunktion('log')"></td>
  5* <td width=50><input type=reset value="   C   "></td>
  </tr>
  </tr>
  </table>
  </td></tr></table>
  </form>
  </body>
  </html>

Erläuterung:

Der HTML-Aufbau des Taschenrechners erscheint etwas kompliziert, da er sich einer Tabelle innerhalb einer Tabelle bedient. Dadurch wird jedoch eine halbwegs saubere Ausrichtung der einzelnen Buttons erreicht, und das Rechen- bzw. Ergebnisfeld erscheint in einem eigenen, andersfarbigen Bereich (die farbliche Abstufung ist jedoch nur bei moderneren WWW-Browsern sichtbar).
Der Taschenrechner funktioniert absichtlich so, daß Sie sowohl die Buttons als auch direkt das Rechenfeld zur Eingabe benutzen können. Das heißt, Sie können beispielsweise in dem Rechenfeld eine Rechenoperation mit Grundrechenarten direkt eingeben, z.B. 5 * 6 + 7 - 4. Wenn Sie dann auf den Button "=" klicken, wird im selben Feld das Ergebnis angezeigt.
Mit dem Button "C" können Sie den aktuellen Inhalt des Rechenfeldes jederzeit löschen.

Funktion zur Berechnung des Inhalts des Rechenfelds
Im Beispiel werden im Kopf der HTML-Datei alle Funktionen notiert, die 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, daß die Rechenoperation keine ungültigen Zeichen enthält. Ansonsten erzeugt JavaScript eine Fehlermeldung.
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 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. 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 "log" (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 "log". 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.

Buttoncklick 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.


weiter:	Monatskalender
zurück:	Seitenanzeige in Frames verhindern

SELFHTML/Quickbar JavaScript Anwendungsbeispiele