Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Anwendungsbeispiele
SELFHTML

Taschenrechner
Informationsseite

nach unten Hinweise zu diesem Beispiel
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus
 nach unten 

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 Kapitel Kleine Helferlein. Diese Art Einsatz von JavaScript gehört zu den sinnvollsten Einsatzmöglichkeiten.

 nach obennach unten 

Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.3Safari 1.2 Quelltext mit Erläuterungen

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

Beispiel:

Beispiel-Seite 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 == "log") {
      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=" log " onClick="Sonderfunktion('log')"></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 Seite Funktionen notiert, welche die Funktionalität des Taschenrechners ermöglichen. Die Funktion Ergebnis() errechnet den aktuellen Inhalt des Rechenfeldes. Innerhalb der Funktion wird eine Seite 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 Seite 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 Seite 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 Seite charAt() wird aus der Variablen Eingabe das Zeichen an der Position i extrahiert und an nur_das.indexOf() als Parameter übergeben. Die Methode Seite 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 Seite 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 "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.

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 Seite 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 Seite Formular-Objekt und das Seite 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 Seite 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.

 nach oben
weiter Seite Monatskalender
zurück Seite Seitenanzeige in Frames verhindern
 
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Anwendungsbeispiele

© 2005 Seite Impressum