SELFHTML/Navigationshilfen JavaScript/DOM Anwendungsbeispiele| SELFHTML/Navigationshilfen JavaScript/DOM Anwendungsbeispiele |
 |
Taschenrechner |
|
|
 | |
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äuterungenDas Beispiel zeigt die vollständige HTML-Datei mit den Taschenrechner.
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" text="#000000">
<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=" = " onClick="Ergebnis()"></td>
<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="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>
|
Im Beispiel werden im Kopf der HTML-Datei mehrere 
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, 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.
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.
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.
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.
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.
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.
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 Eventhandler 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.
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
|
| SELFHTML/Navigationshilfen JavaScript/DOM Anwendungsbeispiele |
© 2001 
selfhtml@teamone.de