<html>
<head>
<title>Taschenrechner</title>
<script language="JavaScript">
<!--
function Ergebnis()
{
var x = 0;
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(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>
<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=" ln " onClick="Sonderfunktion('log')"></td>
<td width=50><input type=reset value=" C "></td>
</tr>
</tr>
</table>
</td></tr></table>
</form>
</body>
</html>
|
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.