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
|
<!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 / Sprachelemente / Bedingte Anweisungen (if-else/switch)</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Welche Aufgaben bedingte Anweisungen haben und wie Sie solche Anweisungen in JavaScript notieren.">
<meta name="keywords" content="SELFHTML, JavaScript, if, else, switch, case, bedingte Anweisungen">
<meta name="author" content="Redaktion SELFHTML, selfhtml81@selfhtml.org">
<meta name="DC.Publisher" content="Stefan Mnz">
<meta name="DC.Date" content="2005-09-20T06:02:21+02:00">
<meta name="DC.Identifier" content="http://de.selfhtml.org/javascript/sprache/bedingt.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="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="Sprachelemente" href="index.htm">
<link rel="next" title="Schleifen (while/for/do-while)" href="schleifen.htm">
<link rel="prev" title="Operatoren" href="operatoren.htm">
<link rel="first" title="Allgemeine Regeln fr JavaScript" href="regeln.htm">
<link rel="last" title="Event-Handler" href="eventhandler.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">Sprachelemente</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">Bedingte Anweisungen (if-else/switch)</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="#if_else">Wenn-Dann-Bedingungen mit "if"</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#entweder_oder">Einfache Entweder-Oder-Abfrage</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#switch">Fallunterscheidung mit "switch"</a><br>
</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><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><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="if_else">Wenn-Dann-Bedingungen mit "if"</a></h2>
<p>Sie knnen die Ausfhrung von Anweisungen von Bedingungen abhngig machen.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/passwort.htm">Anzeigebeispiel: So sieht's aus</a> (Passwort = <i>Traumtaenzer</i>)</p>
<pre>
<html><head><title>Test</title>
<script type="text/javascript">
function Geheim () {
var Passwort = "Traumtaenzer";
var Eingabe = window.prompt("Bitte geben Sie das Passwort ein", "");
if (Eingabe != Passwort) {
alert("Falsches Passwort!");
} else {
location.href = "geheim.htm";
}
}
</script>
</head><body onload="Geheim()">
<h1>Hier kommen Sie nur mit Passwort rein ;-)</h1>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel stellt eine einfache Passwortabfrage dar. Das Script ist in einer <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="funktionen.htm">Funktion</a> namens <code>Geheim()</code> notiert, die aufgerufen wird, sobald die HTML-Datei vollstndig geladen ist. Dazu ist im einleitenden <code><body></code>-Tag der <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="eventhandler.htm">Event-Handler</a> <code>onload</code> notiert. Innerhalb der Funktion fordert ein Dialogfenster (<code>window.prompt()</code>) den Anwender auf, das Passwort einzugeben. Der Rckgabewert von <code>window.prompt()</code>, das eingegebene Passwort, wird in der Variablen <code>Eingabe</code> gespeichert.<br>
Mit <code>if (Eingabe != Passwort)</code> fragt das Script ab, ob die Eingabe anders lautet als der der Variablen <code>Passwort</code> zuvor zugewiesene Wert <code>Traumtaenzer</code>. Ist dies der Fall, sind also beide Werte nicht gleich, dann war die Eingabe falsch. In diesem Fall wird mit <code>alert()</code> eine entsprechende Meldung ausgegeben. Im anderen Fall (<code>else</code>), wenn <code>Eingabe</code> und <code>Passwort</code> den gleichen Wert haben, wird mit <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/location.htm#href">location.href</a> eine andere Seite aufgerufen, nmlich die "geschtzte" Seite.</p>
<p>Mit <code>if</code> leiten Sie eine Wenn-Dann-Bedingung ein (<i>if = wenn</i>). Dahinter folgt, in Klammern stehend, die Formulierung der Bedingung. Um solche Bedingungen zu formulieren, brauchen Sie <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="operatoren.htm#vergleich">Vergleichsoperatoren</a> und in den meisten Fllen auch <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="variablen.htm">Variablen</a>. Fr Flle, in denen die Bedingung nicht erfllt ist, knnen Sie einen "andernfalls"-Zweig definieren. Dies geschieht durch <code>else</code> (<i>else = sonst</i>).</p>
<p>Der Else-Zweig ist nicht zwingend erforderlich. Wenn Sie mehr als eine Anweisung unterhalb und abhngig von <code>if</code> oder <code>else</code> notieren wollen, mssen Sie die Anweisungen in <b>geschweifte</b> Klammern einschlieen (siehe auch den Abschnitt ber <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="regeln.htm#anweisungsbloecke">Anweisungsblcke</a>).</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Eine Passwortabfrage wie im Beispiel stellt keine zuverlssige Mglichkeit dar, um Zugriffe auf eine Webseite zu kontrollieren. Denn das Passwort steht fr jeden lesbar im Quelltext und die "geschtzte" Seite kann unter Umgehung der Passwortabfrage aufgerufen werden. Verwenden Sie deshalb in der Praxis "richtige" Schutzmechanismen wie beispielsweise eine <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../servercgi/server/htaccess.htm#verzeichnisschutz">Zugriffskontrolle mit .htaccess</a>.</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/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><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="entweder_oder">Einfache Entweder-Oder-Abfrage</a></h2>
<p>Fr einfache Entweder-Oder-Bedingungen gibt es eine spezielle Syntax, die Sie alternativ zur if/else-Anweisung verwenden knnen.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/sinndeslebens.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
<script type="text/javascript">
function Antwort () {
var Ergebnis = (document.Formular.Eingabe.value == "42") ? "RICHTIG!" : "FALSCH!";
document.Formular.Eingabe.value = "Die Antwort ist " + Ergebnis;
}
</script>
</head><body>
<h1>Der Sinn des Lebens</h1>
<form name="Formular">
<p>Was ist der Sinn des Lebens?</p>
<input type="text" name="Eingabe" size="40">
<input type="button" value="OK" onclick="Antwort()">
</form>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt eine JavaScript-<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="funktionen.htm">Funktion</a> namens <code>Antwort()</code>. Aufgerufen wird diese Funktion, wenn der Anwender in dem weiter unten notierten HTML-Formular auf den Klick-Button mit der Aufschrift <code>OK</code> klickt, und zwar mit dem <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="eventhandler.htm">Event-Handler</a> <code>onclick</code>. Die Funktion prft, ob der Wert des Eingabefeldes im Formular (<code>document.Formular.Eingabe.value</code>) den Wert <code>42</code> hat. Abhngig davon wird der Variablen <code>Ergebnis</code> entweder der Wert <code>RICHTIG!</code> oder <code>FALSCH!</code> zugewiesen. Anschlieend wird in dem Textfeld des Formulars, das zur Eingabe diente, ein entsprechender Satz zusammengesetzt (siehe dazu auch <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="operatoren.htm#zeichenkettenverknuepfung">Operator fr Zeichenkettenverknpfung</a>).</p>
<p>Eine einfache Entweder-Oder-Abfrage wird mit einer Bedingung eingeleitet. Die Bedingung muss in Klammern stehen, im Beispiel <code>(document.Formular.Eingabe.value == "42")</code>. Dahinter wird ein Fragezeichen notiert. Hinter dem Fragezeichen wird ein Wert angegeben, der aktuell ist, wenn die Bedingung erfllt ist. Dahinter folgt ein Doppelpunkt, und dahinter ein Wert fr den Fall, dass die Bedingung nicht erfllt ist. Da es sich um Werte handelt, die fr die Weiterverarbeitung nur sinnvoll sind, wenn sie in einer Variablen gespeichert werden, wird einer solchen Entweder-Oder-Abfrage in der Regel eine <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="variablen.htm">Variable</a> vorangestellt, im Beispiel die Variable <code>Ergebnis</code>. Der Variablen wird durch diese Art von Anweisung das Ergebnis der Entweder-Oder-Abfrage zugewiesen.</p>
<p>Um Bedingungen zu formulieren, brauchen Sie <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="operatoren.htm#vergleich">Vergleichsoperatoren</a>.</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/js12.gif" width="30" height="30" alt="JavaScript 1.2" title="JavaScript 1.2"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.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="switch">Fallunterscheidung mit "switch"</a></h2>
<p>Mit <code>if</code> und <code>else</code> knnen Sie genau zwei Flle unterscheiden. Wenn Sie feiner differenzieren, also zwischen mehreren Fllen unterscheiden wollen, knnen Sie zwar mehrere if-Abfragen hintereinander notieren, aber es gibt noch eine elegantere Mglichkeit: die Fallunterscheidung mit "switch". Diese Syntax, die der Programmiersprache C entlehnt ist, gibt es in JavaScript aber erst seit der Sprachversion 1.2 - ltere Browser quittieren solche Anweisungen mit einer Fehlermeldung.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/einsbisvier.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Eingabe = window.prompt("Geben Sie eine Zahl zwischen 1 und 4 ein:", "");
switch (Eingabe) {
case "1":
alert("Sie sind sehr bescheiden");
break;
case "2":
alert("Sie sind ein aufrichtiger Zweibeiner");
break;
case "3":
alert("Sie haben ein Dreirad gewonnen");
break;
case "4":
alert("Gehen Sie auf allen Vieren und werden Sie bescheidener");
break;
default:
alert("Sie bleiben leider dumm");
break;
}
</script>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Mit <code>switch</code> leiten Sie eine Fallunterscheidung ein (<i>switch = Schalter</i>). Dahinter folgt, in runde Klammern eingeschlossen, eine Variable oder ein Ausdruck, fr dessen aktuellen Wert Sie die Fallunterscheidung durchfhren. Im Beispiel ist das die Variable mit dem Namen <code>Eingabe</code>. Diese Variable wird vor der Fallunterscheidung mit einem Wert versorgt, denn ein Dialogfenster (<code>window.prompt()</code>) mit einem Eingabefeld fordert den Anwender auf, eine Zahl zwischen 1 und 4 einzugeben. Der eingegebene Wert wird in <code>Eingabe</code> gespeichert.</p>
<p>Die einzelnen Flle, die Sie abfragen mchten, werden innerhalb geschweifter Klammern notiert. Jeden einzelnen Fall leiten Sie mit <code>case</code> ein (<i>case = Fall</i>). Dahinter folgt die Angabe des Wertes, auf den Sie prfen wollen. Die Anweisung <code>case "1":</code> im obigen Beispiel bedeutet dann so viel wie: 'wenn die Variable Eingabe den Wert "1" hat'. Im Beispiel wird fr jeden Fall eine individuelle Meldung ausgegeben.</p>
<p>Wichtig ist dabei auch das Wort <code>break</code> am Ende jedes Falls (<i>break = abbrechen</i>). Wenn Sie das Wort weglassen, werden nmlich alle nachfolgenden Flle auch ausgefhrt, aber das wollen Sie ja in der Regel nicht.</p>
<p>Fr den Fall, dass keiner der definierten Flle zutrifft, knnen Sie am Ende der Fallunterscheidung den Fall <code>default:</code> definieren. Die darunter stehenden Anweisungen werden ausgefhrt, wenn keiner der anderen Flle zutrifft.</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="schleifen.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="schleifen.htm">Schleifen (while/for/do-while)</a>
</td></tr>
<tr>
<td class="doc"><a href="operatoren.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="operatoren.htm">Operatoren</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">Sprachelemente</a></td>
</tr>
</table>
<p>© 2005 <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../editorial/impressum.htm">Impressum</a></p>
</body>
</html>
|
