1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>SELFHTML: JavaScript / Anwendungsbeispiele / Taschenrechner</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie mit Hilfe von JavaScript einen Taschenrechner simulieren knnen.">
<meta name="keywords" content="SELFHTML, JavaScript, Taschenrechner">
<meta name="author" content="Redaktion SELFHTML, selfhtml81@selfhtml.org">
<meta name="robots" content="noindex, nofollow">
<meta name="DC.Publisher" content="SELFHTML e. V.">
<meta name="DC.Date" content="2005-08-22T21:21:39+02:00">
<meta name="DC.Identifier" content="http://de.selfhtml.org/javascript/beispiele/taschenrechner.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.created" content="2001-10-27T08:00+01:00">
<meta name="SELF.Pagetype" content="page">
<link rel="alternate" type="application/atom+xml" title="SELFHTML-Weblog (Atom, gesamt)" href="http://aktuell.de.selfhtml.org/weblog/atom-feed">
<link rel="alternate" type="application/rss+xml" title="SELFHTML-Weblog (RSS, Auszge)" href="http://aktuell.de.selfhtml.org/weblog/rss-feed">
<link rel="shortcut icon" type="image/x-icon" href="../../src/favicon.ico">
<link rel="author" title="Impressum" href="../../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../../index.htm">
<link rel="up" title="Anwendungsbeispiele" href="index.htm">
<link rel="next" title="Monatskalender" href="monatskalender.htm">
<link rel="prev" title="Seitenanzeige in Frames verhindern" href="seitenanzeige.htm">
<link rel="first" title="Zwei Frames gleichzeitig ndern" href="zweiframes.htm">
<link rel="last" title="nderungen der Fenstergre berwachen" href="fensterueberwachen.htm">
</head>
<body>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Anwendungsbeispiele</a></td>
</tr>
<tr>
<td class="doc" width="110"><a href="../../index.htm"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></a></td>
<td class="docbot" width="100%"><h1 class="ph1">Taschenrechner</h1></td>
</tr>
<tr>
<td class="doctop">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" alt="Informationsseite">
</td>
<td valign="top" nowrap="nowrap">
<p>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#hinweise">Hinweise zu diesem Beispiel</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#quelltext">Quelltext mit Erluterungen</a><br>
</p>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/taschenrechner.htm">Anzeigebeispiel: So sieht's aus</a></p>
</td>
</tr><tr><td colspan="2" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2><a class="an" name="hinweise">Hinweise zu diesem Beispiel</a></h2>
<p>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 Mglichkeit an, direkt ins Display Daten einzugeben. Auerdem berechnet dieser Taschenrechner auch Serienrechnungen wie <kbd>1+2+3+4+5+6+7+8+9</kbd> und Klammerausdrcke wie <kbd>3*(2+4)</kbd>.</p>
<p>Anhand dieses Beispiels knnen Sie studieren, wie man Formulareingaben mit JavaScript zur direkten Interaktion verwenden kann. Das Taschenrechner-Beispiel ist ein JavaScript-Einsatz vom Typus <img src="../../src/kap.gif" width="15" height="13" alt="Kapitel"> <a href="../../helferlein/index.htm">Kleine Helferlein</a>. Diese Art Einsatz von JavaScript gehrt zu den sinnvollsten Einsatzmglichkeiten.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="quelltext">Quelltext mit Erluterungen</a></h2>
<p>Das Beispiel zeigt die vollstndige HTML-Datei mit dem Taschenrechner.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/taschenrechner.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<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>
</pre>
<h3 class="xpl">Erluterung:</h3>
<h4>Funktion zur Berechnung des Inhalts des Rechenfelds:</h4>
<p>Im Beispiel werden im Kopf der HTML-Datei mehrere <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../sprache/funktionen.htm">Funktionen</a> notiert, welche die Funktionalitt des Taschenrechners ermglichen. Die Funktion <code>Ergebnis()</code> errechnet den aktuellen Inhalt des Rechenfeldes. Innerhalb der Funktion wird eine <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../sprache/variablen.htm">Variable</a> <code>x</code> 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 mchtige <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/unabhaengig.htm">objektunabhngige JavaScript-Funktion</a> <code>eval()</code> bergeben. Diese Funktion bernimmt automatisch die gesamte Berechnung der Rechenoperation. Voraussetzung ist natrlich, dass die Rechenoperation keine ungltigen Zeichen enthlt. Ansonsten erzeugt JavaScript eine Fehlermeldung.<br>
Aus diesem Grund wird vor jeder Verwendung von <code>eval()</code> die Funktion <code>check()</code> aufgerufen, welche die Gltigkeit der Eingaben prft. Nur wenn diese Funktion <code>true</code> zurck gibt, wird die Methode <code>eval()</code> angewendet. Ansonsten wird im Display der Wert <code>0</code> angezeigt.<br>
Um das errechnete Ergebnis, das in der Variablen <code>x</code> gespeichert wird, im Rechenfeld des Taschenrechners anzuzeigen, wird dem entsprechenden Formularfeld einfach der Wert von <code>x</code> zugewiesen.</p>
<h4>Funktion zur Prfung der Gltigkeit der Eingabe</h4>
<p>Die Funktion Check(Eingabe) berprft, ob die Werte von <code>Eingabe</code> nur die vorgegebenen Zeichen enthlt. Diese sind in der Variablen <code>nur_das</code> abgelegt. Mit einer <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../sprache/schleifen.htm#for">for</a>-Schleife wird die bergebene Zeichenkette Zeichen fr Zeichen daraufhin berprft, ob dieses Zeichen in dem Bereich von <code>nur_das</code> vorkommt. Mit der Methode <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/string.htm#char_at">charAt()</a> wird aus der Variablen <code>Eingabe</code> das Zeichen an der Position <code>i</code> extrahiert und an <code>nur_das.indexOf()</code> als Parameter bergeben. Die Methode <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/string.htm#index_of">indexOf()</a> prft daraufhin, ob das Zeichen in <code>nur_das</code> enthalten ist. Tritt ein ungltiges Zeichen auf, so wird die Funktion abgebrochen und der Wert <code>false</code> zurckgegeben. Andernfalls gibt die Funktion <code>true</code> zurck.</p>
<h4>Funktion zum Hinzufgen eines Zeichens in das Rechenfeld:</h4>
<p>Die Funktion <code>Hinzufuegen()</code> im Beispiel wird aufgerufen, wenn der Anwender auf einen der Buttons im Taschenrechner-Formular klickt. Das knnen Ziffern (<kbd>0</kbd> bis <kbd>9</kbd>) oder Rechenoperatoren (<kbd>+</kbd> <kbd>-</kbd> <kbd>*</kbd> <kbd>/</kbd>) oder ein Dezimalpunkt sein. Um das Zeichen hinzuzufgen, wird dem aktuellen Wert des Rechenfeldes einfach der bisherige Wert plus das neue Zeichen zugewiesen. Dabei kommt der <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../sprache/operatoren.htm#zeichenkettenverknuepfung">Operator zur Zeichenkettenverknpfung</a> (<code>+</code>) zum Einsatz. Das neue Zeichen wird der Funktion als Parameter bergeben.</p>
<h4>Funktion zur Berechnung von Sonderfunktionen:</h4>
<p>Die Funktion <code>Sonderfunktion()</code> im Beispiel ist fr die Berechnung von drei mathematischen Funktionen zustndig, fr die es im Taschenrechner entsprechende Buttons gibt: die Funktionen "sqrt" (Quadratwurzel), "pow" (Quadrat) und "ln" (natrlicher 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 auszufhrende 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 gewnschten Wert. Dazu wird die Rechenoperation oder die Zahl, die in dem bergebenen Formularfeld (dem Rechenfeld des Taschenrechners) steht, an die JavaScript-Standardfunktion <code>eval()</code> bergeben. Diese Funktion bernimmt automatisch die gesamte Berechnung der Rechenoperation. Das Ergebnis wird in <code>x</code> gespeichert. Falls es sich nur um eine einfache Zahl handelt, wird diese Zahl in <code>x</code> gespeichert. Mit einer entsprechenden JavaScript-Methode, z.B. der Methode <code>sqrt()</code> zur Errechnung der Quadratwurzel, wird das Ergebnis der mathematischen Sonderfunktion berechnet und zugleich dem Rechen-/Ergebnisfeld des Taschenrechner-Formulars zugewiesen.</p>
<h4>Button-Klick als Zeichen in Rechenfeld eintragen:</h4>
<p>Innerhalb des Taschenrechner-Formulars im Beispiel werden die Buttons fr Ziffern, Operatoren usw. definiert. Beim Klicken auf einen solchen Button soll natrlich eine entsprechende Reaktion erfolgen. Dies geschieht mit Hilfe des <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../sprache/eventhandler.htm">Event-Handlers</a> <code>onclick</code>. 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 <code>Hinzufuegen()</code> aufgerufen. Dazu wird der Funktion der erwartete Parameter bergeben, also das hinzuzufgende Zeichen. Das Taschenrechner-Formular erhlt bei der Definition einen Namen, im Beispiel den Namen "Rechner". Auch das Rechen-/Ergebnisfeld, das im JavaScript-Code sehr oft angesprochen wird, erhlt einen Namen - den Namen "Display". Das <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/forms.htm">Formular-Objekt</a> und das <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/elements.htm">Formularelement-Objekt</a> des Rechen-/Ergebnisfeldes kann deshalb mit <code>window.document.Rechner.Display</code> adressiert werden.</p>
<h4>Inhalt des Rechenfelds lschen:</h4>
<p>Der Button mit der Aufschrift "C" im Beispiel dient zum Lschen der bisherigen Eingaben. Dazu braucht man kein JavaScript. Stattdessen gengt es, einen Button vom Typ <code>reset</code> zu definieren.</p>
<h4>Absenden des Formulares verhindern</h4>
<p>Da der Taschenrechner ein einzeiliges Formularfeld enthlt, kann dieses Formular jederzeit mit Bettigung der Eingabetaste abgesendet werden. Ein Absenden ist im Zusammenhang mit dem Taschenrechner jedoch unerwnscht. Deshalb wird im einleitenden <code><form></code>-Tag der <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../sprache/eventhandler.htm">Event-Handler</a> <code>onsubmit</code> notiert. Dahinter folgt der Aufruf der Funktion <code>Ergebnis()</code> und anschlieend <code>return false</code>. Diese Notation bewirkt, dass wenn der Anwender die Eingabetaste drckt, die Berechnung des Ergebnisse erfolgt und gleichzeitig ein Abschicken des Formulares verhindert wird.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Im HTML-Standard ist die Verwendung des Attributes <code>width</code> fr <code>input</code>-Felder nicht erlaubt. Der Netscape 4.x interpretiert jedoch keine CSS-Eigenschaften fr solche Formularfelder. Im Interesse des Layouts wurden daher trotz der Verletzung des HTML-Standards die <code>width</code>-Attribute verwendet.</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" class="doc">
<a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td class="doc"><a href="monatskalender.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td width="100%"><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="monatskalender.htm">Monatskalender</a>
</td></tr>
<tr>
<td class="doc"><a href="seitenanzeige.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurck"></a></td>
<td><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="seitenanzeige.htm">Seitenanzeige in Frames verhindern</a>
</td>
</tr>
<tr><td colspan="2" class="doc"> </td>
</tr>
<tr>
<td colspan="2" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Anwendungsbeispiele</a></td>
</tr>
</table>
<p>© 2007 <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../editorial/impressum.htm">Impressum</a></p>
</body>
</html>
|
