Das AJAX Kompendium - *ISBN 978-3-8272-4418-5 ...

Inhalt
3 Programmieren
1
Spricht ein Experte lapidar vom Programmieren, bleibt immer die Frage,
worum es dabei eigentlich geht. Eine Webanwendung stellt andere Anforderungen
als eine Windows-Applikation oder ein VBA-Makro. Trotz der unterschiedlichsten
Einsatzgebiete sind in vielen Programmiersprachen die
Grundstrukturen gleich. In C#, Visual Basic, PHP und auch in JavaScript
wird mit Variablen gearbeitet. Diese Variablen müssen mittels Operatoren
miteinander verknüpft, Bedingungen müssen überprüft und Anweisungen
ausgeführt werden. 1
Sollten Sie bereits mit anderen Programmiersprachen vertraut sein, kommt
Ihnen also vieles vertraut vor. Es ist ausreichend, wenn Sie einen Blick auf
die Syntax werfen. Haben Sie dagegen noch keine Programmiererfahrung,
lohnt sich eine ausführlichere Beschäftigung mit den Grundlagen in diesem
Kapitel. Sie können später immer wieder darauf zurückgreifen.
3.1 Operatoren
Operatoren verbinden in Variablen gespeicherte Daten. Die verschiedenen
mathematischen Rechenarten wie Addition, Subtraktion usw. haben jeweils
eigene Operatoren. Für die Addition steht beispielsweise das Pluszeichen
(+). Darüber hinaus gibt es noch weitere Operatoren, beispielsweise um
zwei Werte miteinander zu vergleichen.
Einen Operator haben Sie bereits kennen gelernt: den Zuweisungsoperator
(das Ist-Gleich). Er weist einer Variablen einen Wert zu:
var x = 5;
3.1.1 Arithmetische Operatoren
Die arithmetischen Operatoren sind für die mathematischen Grundrechenarten,
beispielsweise Addition und Multiplikation, zuständig. Die Syntax ist
sehr einfach. Folgende Zeile addiert 5 und 3 und weist das Ergebnis 8 der
Variablen x zu.
var x = 5 + 3;
2
3
4
5
6
7
8
9
10
11
12
13
1 Zugegeben, das ist nur ein kleiner Teil des Programmierens im weiteren Sinne. Für dieses Kapitel wird
der Begriff sehr eng gefasst.
75
ndex

Programmieren
Der Operator ist in diesem Fall das Plussymbol für die Addition. Die zwei
Werte 5 und 3 werden als Operanden 2 bezeichnet.
INFO
In den Beispielskripten dieses Buches sind Operanden und Operatoren
jeweils durch ein Leerzeichen getrennt. JavaScript erfordert dies nicht, allerdings
werden die Skripten dadurch übersichtlicher.
Das folgende Beispiel ist ein komplett lauffähiges Skript. Es rechnet einen in
der Variablen dollar gespeicherten Geldwert von Dollar in Euro um und
gibt ihn aus. Dazu wird die Variable dollar durch den Umrechnungskurs
(Variable kurs) geteilt.
Listing 3.1: Einfache Umrechnung von Dollar in Euro (euro.html)
Euro in DM
HALT
Beachten Sie, dass der arithmetische Operator für die Division kein Doppelpunkt,
sondern ein Schrägstrich (/) ist.
Natürlich können auch mehrere arithmetische Operatoren hintereinander
eingesetzt werden. Dabei gilt – wie in der »echten« Mathematik – die Regel
»Punkt vor Strich«. Das heißt, Division und Multiplikation rangieren in der
Präferenz vor Addition und Subtraktion. Ein einfaches Beispiel illustriert dies:
Listing 3.2: Bei den arithmetischen Operatoren gilt Punkt vor Strich (punkt_vor_strich.html)
Punkt vor Strich
2 Frei übersetzt hieße das wohl: »Diejenigen, mit denen der Operator arbeitet«.
76

Operatoren
Das Beispiel besteht aus zwei Teilen:
1. Im oberen Teil des Skripts wird die Variable x definiert. Sie erhält als
Wert das Ergebnis einer Berechnung. Zuerst wird 200 durch 2 geteilt.
Das Ergebnis (100) wird mit 100 addiert. Die Variable x erhält also den
Wert 200, der anschließend ausgegeben wird.
2. Der untere Teil des Skripts umgeht das Punkt-vor-Strich-Prinzip mit
Klammern. Klammern sind im Prinzip auch Operatoren, die außerdem
eine höhere Präferenz als arithmetische Operatoren besitzen. Im Beispiel
rechnet der JavaScript-Interpreter zuerst 100 plus 200 und teilt das
Ergebnis (300) anschließend durch 2. Ausgegeben wird dann 150 als
Wert von y.
Bisher kamen in den Beispielen nur Addition und Division vor. In der folgenden
Tabelle finden Sie alle arithmetischen Operatoren im Überblick.
Operator Beispiel Beschreibung
+ x = 5 + 3; // Ergebnis: 8 Addition; Addieren zweier Zahlen.
- x = 5 - 3; // Ergebnis: 2 Subtraktion; eine Zahl wird von der anderen
subtrahiert.
Tabelle 3.1:
Die arithmetischen
Operatoren
1
2
3
4
5
- x = 5;
y = -x; //Ergebnis y: -5
Negation mit vorangestelltem Minussymbol.
Vorzeichenwechsel.
6
* x = 5 * 3; // Ergebnis: 15 Multiplikation; zwei Zahlen werden miteinander
multipliziert.
7
/ x = 5 / 3; // Ergebnis: 1.6666 Division; eine Zahl wird mit der zweiten Zahl dividiert.
% x = 5 % 3; // Ergebnis: 2 Modulo; ganzzahligen Rest einer Division errechnen;
im Beispiel: 3 passt in 5 einmal, als Rest bleibt 2.
Inkrement und Dekrement
JavaScript hat einen eigenen Operator, das so genannte Inkrement, um
einen Wert genau um 1 zu erhöhen. Er wird durch ein doppeltes Pluszeichen
(++) symbolisiert und insbesondere bei Schleifen recht häufig zum
Erhöhen des Zählers eingesetzt (siehe Abschnitt 3.3 »Schleifen«).
var x = 2;
x++;
Diese zwei Zeilen definieren x zuerst mit dem Wert 2 und erhöhen x dann
um 1 auf 3.
Das Gegenstück zum Inkrement ist das Dekrement zum Verringern eines
Werts um 1. Die Funktionsweise ist analog:
var x = 2;
x--;
ergibt also den Wert 1 für x.
8
9
10
11
12
13
77

Programmieren
Reihenfolge
Bei Inkrement und Dekrement ist entscheidend, ob sie vor oder hinter der
Variablen oder dem zu ändernden Wert stehen.
++x;
Stehen Sie wie in dieser Zeile vor der Variablen, wird zuerst der Variablenwert
erhöht, bevor die Variable verwendet wird.
var x = 5;
var a = 3 + ++x;
Bei diesen Zeilen hat also a den Wert 9 ( 3 + 5 + 1). x hat nach den zwei
Zeilen den Wert 6.
Steht das Inkrement oder Dekrement hingegen hinter der Variablen, wird
deren Wert erst um eins erhöht oder gesenkt, wenn die Variable verwendet
wurde:
var x = 5;
var a = 3 + x++;
a hat hier also den Wert 8, x wie im vorhergehenden Beispiel den Wert 6.
Kurzformen
Inkrement und Dekrement sind zwar sehr praktisch, häufig soll der Wert
einer Variablen allerdings nicht nur um 1 verändert werden. In der
umständlicheren Variante sieht dies wie folgt aus:
var x = 5;
x = x - 3; //Ergebnis: 2
Für die zweite Zeile gibt es allerdings auch eine elegantere Kurzform:
x -= 3; //Ergebnis: 2
Was geschieht hier? Der Operator wird vor das Pluszeichen geschrieben.
Das signalisiert dem Interpreter, dass er den Variablenwert verändern soll.
Um welchen Wert er verändert werden soll, steht nach dem Ist-Gleich.
Diese Kurzform gibt es für alle arithmetischen Operatoren (siehe Tabelle 3.2).
Tabelle 3.2:
Kurzformen für
arithmetische
Operatoren
Operator Beispiel (var x = 5) Längere Alternative
+= X += 3; // Erg: 8 x = x + 3;
-= X -= 3; // Erg: 2 x = x - 3;
*= X *= 3; // Erg: 15 x = x * 3;
/= X /= 3; // Erg: 1.6666 x = x / 3;
%= X %= 3; // Erg: 2 x = x % 3;
78

Operatoren
3.1.2 String-Operator
Natürlich lassen sich mit Zeichenketten keine Berechnungen anstellen.
Dennoch gibt es einen Operator: das Plussymbol (+). Es verbindet mehrere
Strings miteinander. Listing 3.2 macht davon bereits Gebrauch.
Die Verknüpfung von Strings wird auch Konkatenation genannt.
var titel = "Yesterday";
var text = "all my trouble ...";
document.write(titel + text);
Die oberen Zeilen fügen den Anfang des Beatles-Klassikers »Yesterday«
aneinander und geben ihn aus. Allerdings gibt es dabei ein Problem. Da
keine Leerzeichen als Zwischenräume vorgesehen sind, wird der Text direkt
aneinandergehängt (siehe Abbildung 3.1).
INFO
Abbildung 3.1:
Der Browser hängt
den Text direkt
aneinander.
1
2
3
4
5
6
Dieses Problem ist in der Praxis ein sehr häufiger Flüchtigkeitsfehler. Im
Prinzip ist es unerheblich, ob Sie das Leerzeichen in den ersten oder zweiten
String einfügen. Im Allgemeinen wirkt es allerdings im ersten übersichtlicher.
Listing 3.3:
Der String-Operator verknüpft zwei Zeichenketten (string_operator.html).
String-Operator
7
8
9
10
11
12
13
79

Programmieren
Abbildung 3.2:
Jetzt ist der
Abstand korrekt.
Kurzform
Für den String-Operator gibt es wie bei der normalen Addition die Kurzform
+=. Das Beispiel sieht in der Kurzform mit nur noch einer Variablen wie folgt
aus:
var text = "Yesterday, ";
text += "all my trouble…"
document.write(text);
3.1.3 Vergleichsoperatoren
Vergleichen ist in der Programmierung gang und gäbe. Es werden keine
»Äpfel mit Birnen«, sondern meistens Zahlen miteinander verglichen, um
Bedingungen zu überprüfen. Bedingungen kommen insbesondere in Kontrollstrukturen
und Schleifen zum Einsatz (siehe Abschnitt 3.2 »Kontrollstrukturen«
und Abschnitt 3.3 »Schleifen«).
Die Vergleichsoperatoren sind größtenteils ebenfalls bereits im Mathematikunterricht
zum Einsatz gekommen. Folgende Zeile stellt beispielsweise fest,
ob 4 größer als 3 ist.
var v = (4 > 3);
Das Ergebnis eines Vergleichs ist immer ein Wahrheitswert (Boolean), also
true (wahr) oder false (falsch). In unserem Beispiel lautet das Ergebnis
natürlich … true. Sie können das feststellen, indem Sie die Variable einfach
ausgeben (siehe Abbildung 3.3).
Abbildung 3.3:
Die Ausgabe
von 4 > 3
(vergleich.html)
80

Operatoren
Eine vollständige Auflistung der Vergleichsoperatoren in JavaScript finden
Sie in Tabelle 3.3.
Operator Beispiel Beschreibung
== var a = (4 == 3); //Erg: false Gleichheit
Tabelle 3.3:
Die Vergleichsoperatoren
!= var a = (4 != 3); //Erg: true Ungleichheit
1
< var a = (4 < 3); //Erg: false Kleiner als
3); //Erg: true Größer als
>= var a = (4 >= 3); //Erg: true Größer als oder gleich
2
3
Sind zwei Zahlen gleich groß, ergibt ein Vergleich mit < oder > immer false.
Soll bei Gleichheit true zurückgegeben werden, müssen Sie = verwenden.
Beachten Sie außerdem, dass der Vergleich auch Nachkommastellen
berücksichtigt.
Der Gleichheitsoperator == wird in der Praxis häufig mit dem Zuweisungsoperator
= vertauscht. Das Problem ist, dass JavaScript-Interpreter in diesem Fall
manchmal keine Fehlermeldung liefern. Die Schwierigkeit liegt also darin,
das Problem zu lokalisieren (zur Fehlerkorrektur siehe Kapitel 29 »Debugging«).
Datentypen
Ist einer der Operanden keine Zahl, sondern ein anderer Datentyp, führt der
JavaScript-Interpreter eine automatische Typkonvertierung durch:
■ Ist einer der Operanden ein String und der andere eine Zahl, wird die
Zahl in einen String umgewandelt.
■ Ist einer der Operanden ein Wahrheitswert, wird true in 1 und false in
0 umgewandelt.
■ Ist einer der Operanden ein Objekt, testet der Interpreter, ob das Objekt
die Methode toString() (zur Umwandlung in eine Zeichenkette) oder
valueOf() (zur Umwandlung in eine Zahl) besitzt. Wenn dies der Fall
ist, wird umgewandelt, ansonsten gibt der Browser eine Fehlermeldung
aus.
Genau gleich (===) und ungleich (!==)
Seit JavaScript 1.3 gibt es die Operatoren genau gleich (===) 3 und ungleich
(!==). Sie überprüfen nicht nur, ob die Werte der zwei Operanden gleich
bzw. ungleich sind, sondern auch, ob die Datentypen identisch sind.
HALT
4
5
6
7
8
9
10
11
12
13
3 Der Operator genau gleich (===) wird auch Identitätsoperator genannt.
81

Programmieren
Mit der Version 3 wurden die beiden Operatoren in den ECMAScript-Standard
übernommen. Die Browserkompatibilität entnehmen Sie Tabelle 3.4.
Ältere Browser unterstützen diese Operatoren nicht.
Tabelle 3.4:
Genau gleich und
genau ungleich
===
!==
NS4.x M/FF IE4 IE5 IE5.5 IE6 IE7 Op SF/KQ
()
HALT
Wenn Sie im Netscape Navigator 4.x als Sprachversion JavaScript 1.2 angeben
(language="JavaScript1.2"), werden die Operatoren genau gleich und
genau ungleich wie der normale Gleichheits- bzw. Ungleichheitsoperator
behandelt. Das vermeiden Sie, indem Sie bei der Sprachangabe die Versionsnummer
weglassen.
Ein einfaches Beispiel zeigt dies. Das folgende Skript vergleicht eine Zahl
mit einer Zeichenkette:
■ Bei der Verwendung des normalen Gleichheitsoperators == wird die Zeichenkette
automatisch in eine Zahl konvertiert. Der Vergleich bei der
Variablen x ergibt also true.
var a = 4;
var b = "4";
var x = (a == b);
■ Mit dem Operator genau gleich === wird zusätzlich zum Wert auch der
Typ verglichen. Da es sich hier um einen String und eine Zahl handelt,
ist das Ergebnis false.
var y = (a === b);
Hier der vollständige Code:
Listing 3.4:
Der Einsatz von genau gleich (genau_gleich.html)
Vergleichsoperatoren
82

Operatoren
Abbildung 3.4:
Der Vergleich mit
== liefert true,
=== ergibt false
1
2
Der Genau-ungleich-Operator ist das Gegenstück zu genau gleich. Er liefert
true, wenn zwei Werte ungleich sind und/oder unterschiedliche Datentypen
haben.
var a = 4;
var b = "4";
var x = (a !== b);
ergibt also true, obwohl nicht die Werte, sondern nur der Datentyp ungleich
ist.
3
4
5
Bei einigen Vergleichen von Spezialwerten unterscheiden sich die genauen
und die normalen Vergleichsoperatoren ebenfalls:
■
■
Die Werte null und undefined sind beim Vergleich mit == immer gleich,
beim Vergleich mit === dagegen ungleich.
Beim Vergleich mit == sind 1 und true bzw. 0 und false gleich, beim
Vergleich mit === dagegen nicht.
Vergleich von Strings
Der Vergleich zweier Zeichenketten miteinander ist ein Fall, der bisher noch
nicht aufgetreten ist. Zuerst die gute Nachricht: Der Vergleich ist möglich.
Und nun die schlechte: Da der ASCII-Code des jeweiligen Zeichens die
Grundlage bildet, ist der Vergleich häufig nicht praxistauglich.
Ein einfaches Beispiel macht den Anfang:
var a = "Yesterday";
var b = "Yesterday";
var x = (a == b);
Die Variable x hat nun den Wert true, da die beiden Zeichenketten genau
identisch sind. Beim Vergleich überprüft der JavaScript-Interpreter jedes
Zeichen von links nach rechts. Wenn auch nur ein Zeichen unterschiedlich
ist, ergibt der Vergleich sofort false.
INFO
6
7
8
9
10
11
12
13
83

Programmieren
Bis jetzt war es noch einfach; bei einem Kleiner-als-Vergleich wird es bereits
schwieriger:
var a = "a";
var b = "b";
var x = (a < b);
Hier wird der ASCII-Code des kleinen a (95) mit dem des kleinen b (96) verglichen.
Da 95 kleiner als 96 ist, ergibt der Vergleich true.
Ein weiteres Beispiel, das die Grenzen dieses Vergleichsverfahrens zeigt:
var a = "a";
var b = "B";
var x = (a < b);
Das große B befindet sich wie alle Großbuchstaben in der ASCII-Tabelle vor
den Kleinbuchstaben. Es hat den ASCII-Code 66. Daraus folgt, dass in diesem
Fall der Vergleich false ergibt. Das kleine a ist also größer als das große
B.
INFO
Sind zwei Zeichenketten unterschiedlich lang, vergleicht der Interpreter dennoch
von links nach rechts.
var a = "abe";
var b = "Yesterday";
var x = (a < b);
ergibt also false.
Sind die Zeichenketten allerdings bei allen vorhandenen Zeichen identisch,
ist immer die längere Zeichenkette größer.
var a = "Yes";
var b = "Yesterday";
var x = (a < b);
ergibt also true.
Unter http://www.asciitable.com/ finden Sie eine übersichtliche ASCII-
Code-Tabelle.
Eine Alternative zu den Vergleichsoperatoren bietet die Methode
String.localeCompare(). Sie ist neu in JavaScript 1.5 und deswegen nur in
aktuellen Browsern implementiert (siehe Tabelle 3.5).
84

Operatoren
Abbildung 3.5:
Eine übersichtliche
ASCII-Code-Tabelle
1
2
3
4
5
6
7
8
String.
locale-
Compare()
NS4.x M/FF IE4 IE5 IE5.5 IE6 IE7 Op SF/KQ
Tabelle 3.5:
String.locale-
Compare()
9
10
Die Funktion hat folgende Syntax:
String1.localeCompare(String2)
Als Ergebnis wird 0 ausgegeben, wenn beide Strings gleich sind, 1, wenn
String1 größer ist und –1, wenn String 2 größer ist. 4 Für den Vergleich wird
der (eingestellte) Zeichensatz des lokalen Betriebssystems verwendet, auf
dem der Browser läuft.
Folgender Beispielcode zeigt die Anwendung von localeCompare() und
ergibt die Bildschirmausgabe x: 1.
11
12
13
4 Der Opera liefert bei Ungleichheit nicht 1 und –1, sondern einen größeren positiven oder negativen
Wert.
85

Programmieren
Listing 3.5:
String-Vergleich mit localeCompare() (string_compare.html)
String.localeCompare()
Abbildung 3.6:
Beachten Sie, dass
die Ausgabe von
localeCompare()
kein
Wahrheitswert ist .
3.1.4 Logische Operatoren
Mehrere Vergleiche mit Vergleichsoperatoren müssen in irgendeiner Form
miteinander kombiniert werden. Dafür sorgen die logischen Operatoren.
Negation (!)
Die Negation mit dem Ausrufezeichen kehrt einen Wahrheitswert (Boolean)
um. Aus true wird also false und umgekehrt:
var x = !true;
x ergibt also den Wert false.
In der Praxis wird dies häufig bei Bedingungsüberprüfungen eingesetzt. Ein
einfaches Beispiel: Wenn Sie die Funktion isNaN(Wert) einsetzen, erhalten
Sie false, wenn es sich bei dem überprüften Variablenwert (Wert) um eine
Zahl handelt. Soll Ihre Bedingung allerdings true liefern, wenn es sich um
eine Zahl handelt, müssen Sie den Wahrheitswert mit der Negation umdrehen:
var a = "test";
var x = !isNaN(a);
Dieser Code liefert also false.
86

Operatoren
Logisches UND (&&)
Das logische UND verknüpft zwei Vergleiche und ergibt nur dann true,
wenn beide Vergleiche true liefern. Das zugehörige Symbol wird aus zwei
Et-Zeichen (&, auch Ampersand) gebildet.
Im folgenden Beispiel verknüpft das logische UND die beiden Vergleiche, ob
eine Variable größer 4 und kleiner 6 ist. Der Variablenwert muss also zwischen
4 und 6 liegen, damit die Variable x den Wert true erhält.
Listing 3.6:
Der Einsatz des logischen UND (logisch.html)
Logische Operatoren
Die Bildschirmausgabe ist
x: true
da die Variable a = 5 zwischen 4 und 6 liegt.
Logisches ODER (||)
Das logische ODER liefert im Gegensatz zum logischen UND bereits true,
wenn nur einer der beiden Vergleiche den Wert true, der andere aber den
Wert false hat.
Ein einfaches Beispiel illustriert dies. Die Variable x erhält den Wert true,
obwohl nur der zweite Vergleich true ergibt, der erste dagegen false:
Listing 3.7:
Das logische ODER (logisch_oder.html)
Logisches ODER
1
2
3
4
5
6
7
8
9
10
11
12
13
87

Programmieren
HALT
Beim Einsatz des logischen ODER kann sich der deutsche Sprachgebrauch als
gefährlich erweisen: Das logische ODER liefert auch dann true, wenn beide
Vergleiche true liefern. Das »Oder« im Deutschen bezeichnet dagegen normalerweise
ein »Entweder … oder ...«.
Short-circuit
Mit dem Begriff Short-circuit wird ein besonderes Verhalten des JavaScript-
Interpreters beschrieben. Wenn der erste Operand beim logischen UND
false ist, ergibt die logische Operation zwangsweise false. In diesem Fall
überprüft der Interpreter den zweiten Operanden – und damit den zweiten
Vergleich – nicht mehr. Dadurch wird Rechenzeit und -performance gespart.
var x = (3 > 4 && 5 > 2);
In diesem Beispiel prüft der Interpreter nicht mehr, ob 5 größer 2 ist, sondern
bricht vorher ab.
Beim logischen ODER steht das Ergebnis true bereits fest, wenn der erste
Operand true ergibt. Auch hier wird der zweite Operand nicht geprüft:
var x = (3 < 4 || 5 < 2);
Dieses Verhalten ist eigentlich sehr sinnvoll, Sie sollten allerdings bedenken,
dass beispielsweise eine Funktion im zweiten Operanden unter
Umständen gar nicht mehr aufgerufen wird.
Das Short-circuit-Verhalten des Interpreters ist eine leichte Abweichung von
der normalen booleschen Algebra. Das logische UND sowie das logische
ODER entsprechen also nicht ganz der grundlegenden Definition der booleschen
Algebra. In der Praxis ist dieser Unterschied allerdings vernachlässigbar.
HALT
Enthält der erste Operand keinen Vergleich und auch keinen Wahrheitswert,
wird er standardmäßig als true angesehen.
var x = (5 && true);
ergibt also true.
Ist der zweite oder sind beide Operanden keine Wahrheitswerte, wird der
zweite Operand ausgegeben.
Dieses Verhalten ist allerdings nicht – obwohl beobachtbar – festgeschrieben.
Daher sollten Sie sich in der Programmierung nicht darauf verlassen.
Logische Operatoren mischen
Natürlich lassen sich logische Operatoren beliebig miteinander kombinieren.
Zusätzlich mit den Vergleichsoperatoren ergeben sich damit alle Möglichkeiten,
auch für komplexe Überprüfungen.
Eine kleine Quizfrage: Welches Ergebnis liefert der folgende Code?
88

Operatoren
Listing 3.8:
Logische Operatoren mischen (logisch_mischen.html)
Logische Operatoren mischen
Die lange Zeile mit den logischen Operatoren lässt sich einfach notieren,
wenn wir die Ergebnisse der Vergleiche hineinschreiben:
(!true) || (true && true)
Jetzt wird es klarer: Der erste Vergleich liefert true. Dies wird mit der Negation
umgekehrt. Der eine Operand des logischen ODER-Vergleichs liefert
also false. Der andere muss vom Interpreter noch überprüft werden. Er enthält
ein logisches UND, dessen Operanden beide den Wert true haben. Daraus
folgt, dass das logische UND true zurückgibt; der zweite Operand des
logischen ODER ist also true und damit bleibt auch das Ergebnis, der Wert
der Variablen x, true.
Abbildung 3.7:
Ein Test im Browser
bestätigt das
Ergebnis true.
1
2
3
4
5
6
7
8
9
10
3.1.5 Bitweise Operatoren
Die bitweisen Operatoren (auch Bit-Operatoren) dienen dazu, Daten auf Bit-
Ebene zu vergleichen und zu verschieben. Ein Computer speichert alle
Daten in Bits. Ein Bit kann nur zwei Werte, 0 und 1, annehmen. 5
In der Praxis werden die bitweisen Operatoren relativ selten eingesetzt. Sollten
Sie also wenig Zeit oder Interesse an diesem Thema haben, können Sie
den Abschnitt überspringen. Alle Interessierten finden hier zuerst ein klei-
11
12
13
5 Da es sich um zwei mögliche Werte handelt, spricht man auch von Binärwert. Die zugehörige Schreibweise
für Daten ist die Binärschreibweise.
89

Programmieren
nes Beispiel, anschließend eine Tabelle mit allen verfügbaren Operatoren
und zum Schluss eine Umrechnung aus der dezimalen in die binäre Schreibweise.
Die binäre Schreibweise besteht aus einem so genannten Muster. Das Muster
hat so viele Stellen, wie die Zahl Bits hat. Eine 4-Bit-Zahl hat also vier
Stellen und kann 2 4 Zahlen darstellen. Die bitweisen Operatoren behandeln
intern alle Zahlen wie 32 Bit-Werte.
0010
Das obige Bit-Muster steht für die ganze Zahl 2. Ein Bit-Muster liest sich am
besten von rechts nach links. Die rechte Zahl steht für die 1, die zweite von
rechts für die 2, die dritte für die 4, die vierte für die 8, die fünfte für … raten
Sie! Es geht immer in Zweierpotenzen, also ist die nächste 2 4 = 16. Um die
binäre Schreibweise in die dezimale umzurechnen, müssen Sie also immer
an der Stelle, an der eine 1 steht, die jeweilige Zahl der Stelle addieren:
1010
ergibt also 8 + 0 + 2 + 0 = 10.
Die bitweisen Operatoren wandeln Zahlen intern automatisch in dieses
binäre Muster um und bearbeiten es. Das bitweise ODER (|) beispielsweise
erstellt ein neues Muster und schreibt an alle Stellen eine 1, an denen in beiden
Operanden ebenfalls eine 1 vorkommt:
1010 | 0011
ergibt also 1011. Aus den dezimalen Zahlen 10 (1010) und 3 (0011) wird
also 11 (1011). Die übrigen bitweisen Operatoren finden Sie in Tabelle 3.6.
TIPP
Mit parseInt(Binärmuster, 2) können Sie ein Binärmuster sehr einfach in
eine Zahl umwandeln. Um eine Zahl in ein Binärmuster zu verwandeln,
verwenden Sie toString(2):
var a = 15;
alert(a.toString(2));
gibt 1111 aus.
Beachten Sie, dass die direkte Eingabe von Bit-Mustern in JavaScript nicht
möglich ist. Bit-Muster mit beginnender 0 werden vom Interpreter als oktale
Schreibweise interpretiert (siehe Abschnitt 2.1.1 im Abschnitt »Oktale
Schreibweise«). Bit-Muster mit beginnender 1 dagegen liest er als normale
Zahlen. Sie müssen also normale Zahlen nehmen. Der Interpreter wandelt
sie dann intern in die binäre Schreibweise um, führt die Operationen durch
und gibt eine normale Zahl zurück. Tabelle 3.6 verwendet bei den Beispielen
daher nur die Bit-Muster, um die Funktionsweise der Operatoren zu verdeutlichen.
90

Operatoren
Operator Beispiel Beschreibung
&
1010 & 0011 //Erg:
0010 = 2
Bitweises UND; schreibt an die Bits eine 1, an denen in beiden Operanden
eine 1 vorkommt.
Tabelle 3.6:
Die bitweisen
Operatoren
| 1010 | 0011 //Erg:
1011 = 11
^
1010 ^ 0011 //Erg:
1001 = 9
~ ~1010 //Erg: 0101
= 5
1010 >> 2 //Erg:
0010 = 2
>>> 1010 >>> 2 //Erg:
0010 = 2
Bitweises ODER; schreibt an die Stellen eine 1, an denen in einem
oder beiden der Operanden 1 vorkommt.
Bitweises ENTWEDER ODER; stellt an die Bits eine 1, an denen nur in
einem der beiden Operanden 1 vorkommt.
Bitweise Negation; ändert alle Bits des Operanden. Aus 0 wird 1 und
umgekehrt. Das Tastenkürzel für das Symbol ist (Alt_Gr)+(+).
Bitweise Verschiebung nach links. Verschiebt das Binärmuster des linken
Operanden um die im rechten Operanden angegebenen Stellen
nach links. Die rechte Seite wird durch Nullen aufgefüllt. Der rechte
Operand sollte maximal 31 betragen, da in JavaScript mit 32 Bit und
damit 32 Stellen gearbeitet wird. Die Verschiebung um eine Stelle entspricht
einer Multiplikation der Zahl mit 2. Zwei Stellen sind dementsprechend
eine Multiplikation mit 4, drei Stellen eine mit 8 usw.
Bitweise Verschiebung nach rechts um die vom rechten Operanden
angegebenen Positionen (maximal 31). Die Bits, die rechts überstehen,
werden gelöscht. Hat der linke Operand ein negatives Vorzeichen,
wird links mit Einsen aufgefüllt, ansonsten mit Nullen. Das
Verschieben um ein Bit nach rechts entspricht der Division durch 2
(ohne Rest), das um zwei der Division durch 4 usw.
Bitweise Verschiebung nach rechts. Dabei gehen die Bits, die rechts
herausfallen, verloren. Die Bits links werden mit Nullen aufgefüllt.
1
2
3
4
5
6
7
Für alle bitweisen Operatoren gibt es wie bei arithmetischen Operatoren die
Kurzform mit integrierter Zuweisung:
x

Programmieren
INFO
Einige Elemente in diesem Beispiel waren noch kein Bestandteil der vorangegangenen
Kapitel, sondern werden später behandelt. Beispielsweise wird der
Umgang mit Formularen detaillierter in Kapitel 20 »Formulare« behandelt.
■ In der Funktion wird zuerst auf die vom Nutzer in das Formularfeld mit
dem Dezimalwert eingegebene Zahl zugegriffen. Sie wird der Variablen
zahl als Wert zugewiesen.
var zahl = formular.dec.value;
■ Anschließend definieren wir 8 Variable für die 8 Bit der binären Zahl.
Sollten Sie mehr als 255 Dezimalwerte umrechnen möchten, müssen Sie
entsprechend mehr Bits verwenden.
var bit8 = 0, bit7 = 0, bit6 = 0, bit5 = 0;
var bit4 = 0, bit3 = 0, bit2 = 0, bit1 = 0;
■ Nun wird für jedes Bit überprüft, ob an dieser Stelle eine 1 im Bit-Muster
vorhanden ist. Dazu dient ein Binärvergleich mit & für jede einzelne
Stelle. Erläutern wir dies beispielhaft für 128: 128 wird in der Binärschreibweise
10000000 geschrieben. Vergleichen wir es mit der vom
Nutzer eingegebenen Zahl, wird beim logischen UND entweder
10000000 zurückgegeben, wenn die eingegebene Zahl im achten Bit eine
1 besitzt, oder der Vergleich liefert 00000000. Das letzte Ergebnis entspricht
0 (false) und erfüllt damit die Bedingung der if-Anweisung 7
nicht. Die Variable bit8 wird dann nicht auf 1 gesetzt, sondern bleibt 0.
if (zahl & 128) {
bit8 = 1;
}
■ Sobald der Vergleich für alle Bits durchgeführt ist, schreibt das Skript
das Ergebnis in das Formularfeld für den Binärwert.
formular.bin.value = ("" + bit8 + bit7 + bit6 + bit5 + bit4 + bit3 + bit2
+ bit1);
Im Folgenden finden Sie den vollständigen Code:
Listing 3.9:
Die Umrechnung von dezimaler in binäre Schreibweise (bitweise.html)
Bitweise Operatoren

Operatoren
if (zahl & 32) {
bit6 = 1;
}
if (zahl & 16) {
bit5 = 1;
}
if (zahl & 8) {
bit4 = 1;
}
if (zahl & 4) {
bit3 = 1;
}
if (zahl & 2) {
bit2 = 1;
}
if (zahl & 1) {
bit1 = 1;
}
formular.bin.value = ("" + bit8 + bit7 + bit6 + bit5 + bit4 + bit3 +
bit2 + bit1);
}
//-->
dezimal (bis
255)
entspricht bin&auml;r
In Abbildung 3.8 sehen Sie das Ergebnis: eine automatische Umwandlung
von dezimalen in binäre Werte.
Abbildung 3.8:
Der Dezimalwert
wird »live« in
die binäre
Schreibweise
umgewandelt.
1
2
3
4
5
6
7
8
9
10
11
3.1.6 Operator-Präferenz
Bei den arithmetischen Operatoren ist es bereits angeklungen: Operatoren
werden vom JavaScript-Interpreter immer in einer festgesetzten Reihenfolge,
der Operator-Präferenz, abgearbeitet. Für die arithmetischen Operato-
12
13
93

Programmieren
ren entspricht die Reihenfolge der bekannten Punkt-vor-Strich-Regel,
Multiplikation und Division haben also eine höhere Präferenz als Addition
und Subtraktion.
Die Präferenz gibt es allerdings nicht nur für die arithmetischen Operatoren,
sondern für alle Operatoren. In Tabelle 3.1 finden Sie die Operatoren in der
Präferenz-Reihenfolge von hoch (15) bis niedrig (1) aufgeführt.
INFO
Tabelle 3.7:
Präferenz-
Reihenfolge der
Operatoren
(beginnend bei
der höchsten
Präferenz 15)
Einige der Operatoren sind Ihnen noch nicht bekannt. Wir stellen sie in den
folgenden Kapiteln vor.
Präferenz
15 .
[]
()
new
Operator
14 ++
--
- (Vorzeichen)
~
!
delete
typeof
void
13 *
/
%
12 +
-
+ (Konkatenation)
11 >
>>>
10 <
>=
instanceof
9 ==
!=
===
!==
8 &
7 ^
94

Kontrollstrukturen
Präferenz
6 |
5 &&
4 ||
3 ?:
2 =
Kurzformen mit Zuweisung
1 ,
Operator
3.2 Kontrollstrukturen
Tabelle 3.7:
Präferenz-
Reihenfolge der
Operatoren
(beginnend bei
der höchsten
Präferenz 15)
(Forts.)
1
2
3
In der Programmierung ist es essenziell, verschiedene Wahlmöglichkeiten zu
haben. Wie soll das Programm wann handeln? Dies steuern die Kontrollstrukturen,
allen voran die if-Anweisung, die – weil grundlegend – bereits in einigen
Beispielen vorkam.
3.2.1 if-Anweisung
Die if-Anweisung leitet sich direkt aus dem Sprachgebrauch ab. Ein Blick
auf die Syntax verdeutlicht dies:
if (Bedingung) {
Anweisung1;
Anweisung2;
}
Sie lässt sich einfach vorlesen: »Wenn Bedingung eintritt, führe Anweisungen
aus.« Die runden Klammern um die Bedingung und die geschweiften
Klammern um die Anweisungen signalisieren dem Interpreter, wann welcher
Teil beginnt.
Im Sprachgebrauch hat es sich eingebürgert, von der if-Anweisung zu sprechen,
wenn das komplette Konstrukt mit Bedingung und darin enthaltener
Anweisung gemeint ist. Ist dagegen nur von der Anweisung die Rede, bezieht
sich das auf die Anweisungen, die ausgeführt werden, wenn die Bedingung
erfüllt ist.
Die Bedingung enthält meist einen Vergleich mit Vergleichsoperatoren,
eventuell auch in Verbindung mit logischen Operatoren. Die Anweisung
wird nur ausgeführt, wenn die Bedingung true ist. Ansonsten ignoriert der
Interpreter die Anweisung und springt an die Stelle hinter der schließenden
geschweiften Klammer.
INFO
4
5
6
7
8
9
10
11
12
13
95

Programmieren
TIPP
Soll die if-Anweisung ausgeführt werden, wenn die Bedingung false ergibt,
drehen Sie das Ergebnis der Überprüfung einfach mit der logischen Negation
(!) um.
Wie ist das Ergebnis des folgenden Beispiels? Was wird ausgegeben?
var groesse = 180;
if (groesse > 175) {
document.write("Zu gro&szlig;!");
}
Richtig, der Text »Zu groß!« wird ausgegeben, da die Bedingung der if-
Anweisung erfüllt ist.
Abbildung 3.9:
Der Nutzer ist
bereits zu groß für
die Sandkiste!
Das vorhergehende Beispiel lässt sich durchaus weiter ausbauen. Was
geschieht beispielsweise, wenn die Variable groesse einen geringeren Wert
als 175 hat? Um diesen Fall hinzuzufügen, könnten Sie einfach eine weitere
if-Anweisung verwenden:
if (groesse > 175) {
document.write("Zu gro&szlig;!");
}
if (groesse 175 && groesse < 240) {
document.write("Zu gro&szlig;!");
}
if (groesse 45) {
document.write("Du passt noch ins Auto.");
}
96

Kontrollstrukturen
Jetzt gibt es allerdings Fälle, die nicht mehr in die Überprüfungen passen,
beispielsweise eine Größe unter 45 oder über 240. Die deckt die else-Anweisung
ab.
else {
document.write("Unrealistisch!");
}
Die else-Anweisung wird immer dann ausgeführt, wenn die vorherigen if-
Anweisungen nicht zutreffen. Sie ist gewissermaßen das Auffangbecken für
alle Fälle, die vorher nicht berücksichtigt werden. Die Syntax sieht wie folgt
aus:
if (Bedingung) {
Anweisung;
} else {
Anweisung;
}
else if
Mehrere if-Anweisungen hintereinander werden immer komplett durchgeprüft.
Trifft die Bedingung jeweils zu, wird die Anweisung ausgeführt. Dieses
Verhalten ist häufig erwünscht, manchmal aber auch unpraktisch.
Ein Beispiel: Sie betreiben eine Website mit Mitgliedern, die unterschiedliche
Berechtigungsstufen von 1 bis 6 haben. Die 6 Berechtigungsstufen
sollen in drei Nutzerklassen eingeteilt werden: Luxusnutzer (5 und 6), Mittelklasse
(3 und 4) sowie Einsteigerpakete (1 und 2), die in der Praxis beispielsweise
auf drei verschiedene Seiten verlinken könnten.
Betrachten Sie die folgende Fallunterscheidung. Erreicht sie das gewünschte
Ziel und trennt die drei Klassen?
var z = 5;
if (z >= 5) {
document.write("Luxusnutzer");
}
if (z >= 3) {
document.write("Mittelklasse");
}
if (z >= 1) {
document.write("Einsteigerpaket");
}
Ein Blick in den Browser zeigt das Problem (siehe Abbildung 3.10). Wenn
die Variable z gleich 5 oder 6 ist, treffen alle drei if-Bedingungen zu und der
Nutzer wird in jede Klasse eingeordnet.
1
2
3
4
5
6
7
8
9
10
11
12
13
97

Programmieren
Abbildung 3.10:
Der Nutzer wird
allen drei Kategorien
gleichzeitig
zugeordnet.
Um dieses Problem zu umgehen, verwenden Sie das else if-Konstrukt. Es
hat folgende Syntax:
if (Bedingung) {
Anweisung;
} else if (Bedingung) {
Anweisung;
}
Die else if-Bedingung wird nur geprüft, wenn die if-Bedingung nicht zutrifft.
Im Beispiel ist es ausreichend, die zwei letzten if-Anweisungen durch else
if zu ersetzen:
Listing 3.10: Die else if-Anweisung (else_if.html)
else if-Anweisung
Abbildung 3.11:
Nun funktioniert
die Unterscheidung
98

Kontrollstrukturen
Das hier beschriebene Problem ist natürlich auch auf anderem Wege lösbar.
Beispielsweise ließen sich die Bedingungen der if-Anweisungen so anpassen,
dass es nicht mehr zu Überschneidungen kommt:
if (z == 3 || z == 4) {
else if ist allerdings ein schneller und einfacher Weg.
Ursprünge von else if
In vielen JavaScript-Büchern und Referenzen taucht else if nicht auf. Dies
ist – zumindest unter Gesichtspunkten der vollständigen Sprachabdeckung
– kein Versäumnis, da else if ein Konstrukt ist, das aus if- und else-Anweisungen
gebildet wird.
Die else if-Anweisung besteht aus einer else-Anweisung, bei der einfach die
geschweiften Klammern weggelassen wurden (siehe nächster Abschnitt
»Kurzformen«). Die else-Anweisung erhält als Anweisung ein if. Verständlich
wird dies, wenn man sich die Langform zur else if-Syntax anschaut:
if (Bedingung) {
Anweisung;
} else {
if (Bedingung) {
Anweisung;
}
}
Mehrere else if-Anweisungen hintereinander sind also lediglich ineinander
verschachtelte else- und if-Anweisungen. Unser Beispiel sieht in der Langform
wie folgt aus:
Listing 3.11: Die lange Version von else if (else_if_lang.html)
else if-Anweisung

Programmieren
//-->
Achten Sie insbesondere auf die Einrückungen. Funktional gibt es keine
Unterschiede, die else if-Konstruktion ist allerdings wesentlich übersichtlicher
als die Langform.
Kurzformen
Die else if-Konstruktion zeigt bereits eine Kurzform der if-Anweisung. Sie
können die geschweiften Klammern weglassen. Normalerweise allerdings
nur, wenn die Anweisung lediglich aus einer Zeile besteht. Hat sie mehrere
Zeilen, nennt man das auch Anweisungsblock. Ein solcher Block muss in
geschweiften Klammern stehen.
if (a < 3)
document.write(a);
ist also erlaubt.
if (a < 3)
document.write(a);
document.write(++a);
dagegen wirkt sich anders aus. Hier gibt der JavaScript-Interpreter ++a auf
jeden Fall aus, auch wenn a größer 3 ist, da die zweite Anweisung nicht
mehr zur if-Anweisung gehört, obwohl die Einrückung das hier anzudeuten
scheint.
TIPP
Für übersichtlichen Code sollten Sie immer geschweifte Klammern verwenden.
Eine Ausnahme ist natürlich die else if-Konstruktion.
Eine komplette if-Anweisung kann außerdem in nur einer Zeile stehen.
if (a

Kontrollstrukturen
Konditionaler Operator (?)
Der konditionale Operator ist, wie der Name bereits sagt, eigentlich ein Operator.
Er ist sogar noch mehr: der einzige Operator in JavaScript, der drei Operanden
haben kann.
Bedingung ? Wert 1 : Wert 2
Zuerst wird die Bedingung überprüft. Ist sie erfüllt, liefert der Interpreter
den ersten Wert. Ist sie nicht erfüllt, wird der zweite Wert zurückgegeben.
In der Praxis bildet der konditionale Operator oft eine Kurzschreibweise für
eine einfache if-else-Fallunterscheidung. Statt eines Werts wird dann eine
Anweisung eingetragen, die natürlich auch einen Wert zurückliefert.
Im folgenden Beispiel wird überprüft, ob a kleiner 3 ist:
(a < 3) ? document.write("a kleiner 3") : document.write("a größer-gleich
3");
Oder
document.write( (a < 3) ? "a kleiner 3" : "a größer-gleich 3");
Dies entspräche der folgenden if-else-Anweisung:
if (a < 3) {
document.write("a kleiner 3");
} else {
document.write("a größer-gleich 3");
}
3.2.2 switch case
Die Fallunterscheidung mit switch verwendet einen Ausdruck und prüft mit
verschiedenen Fällen, welchen Wert dieser Ausdruck annimmt.
switch (Ausdruck) {
case Wert1:
Anweisung1;
break;
case Wert2:
Anweisung2;
break;
}
Der Ausdruck wird hinter das Schlüsselwort switch in runde Klammern
geschrieben. Meist handelt es sich dabei um eine Variable. Anschließend folgen
die einzelnen Fälle. Jeder Fall beginnt mit dem Schlüsselwort case. Dann
folgt der Wert, den der Ausdruck annehmen muss, damit der Fall eintritt.
Stimmt der Wert mit dem Wert des Ausdrucks überein, wird die Anweisung
ausgeführt. break verlässt die switch-Fallunterscheidung, da nach dem Eintreten
eines Falls nicht weiter geprüft werden muss.
1
2
3
4
5
6
7
8
9
10
11
12
13
101

Programmieren
Tritt ein Fall nicht ein, wandert der JavaScript-Interpreter weiter zum nächsten
Fall und überprüft dessen Wert.
TIPP
Die switch-Anweisung gibt es auch in anderen Programmiersprachen wie
Java und C#. Allerdings unterscheidet sich dort häufig die genaue Behandlung.
In Visual Basic heißt die entsprechende Anweisung select case. In PHP
sind in den Fällen auch noch logische Operatoren erlaubt. Dies geht in Java-
Script nicht.
Das folgende Beispiel kommt in der Praxis häufiger vor: In JavaScript werden
per Funktion gewonnene Wochentage von 0 (Montag) bis 6 (Sonntag)
zurückgeliefert. Möchten Sie daraus deutsche Begriffe machen, bietet sich
die switch-Anweisung an.
Im folgenden Beispiel verwenden wir nicht das Datumsobjekt von Java-
Script, sondern definieren der Einfachheit halber den Wochentag in einer
Variablen. Wie Sie mit dem Datumsobjekt arbeiten, erfahren Sie in Kapitel 4
»Funktionen«.
Das Beispiel besteht aus mehreren Teilen:
■ Zuerst wird der Wochentag in der Variablen tag gespeichert.
■ Diese Variable ist der Ausdruck, der in der switch-Anweisung ausgewertet
wird.
■ Jeder Tag von 0 bis 6 ist ein einzelner Fall. Ihm wird entsprechend die
richtige Ausgabe des deutschen Wochentags zugeordnet.
Hier das vollständige Skript:
Listing 3.12: Die switch-Anweisung (switch.html)
switch

Kontrollstrukturen
document.write("Freitag");
break;
case 5:
document.write("Samstag");
break;
case 6:
document.write("Sonntag");
break;
}
//-->
Wenn Sie das Skript testen, wird der richtige Wochentag angezeigt (siehe
Abbildung 3.12).
1
2
3
Abbildung 3.12:
Der richtige
Wochentag wird
ausgegeben.
4
5
6
Wenn Sie break aus Versehen weglassen, werden alle Anweisungen ab dem
zutreffenden Fall ausgeführt. In Abbildung 3.13 ist tag gleich 3, also »Donnerstag«.
Da break fehlt, werden allerdings auch »Freitag« bis »Sonntag«
ausgegeben.
HALT
Abbildung 3.13:
Ohne break
werden alle
Anweisungen ab
der erfüllten
Bedingung
ausgeführt.
7
8
9
10
11
Typkonvertierung
Im Gegensatz zum Einsatz von Vergleichsoperatoren wird in der switchcase-Anweisung
keine automatische Typkonvertierung durchgeführt. Folgender
Code ergibt also keine Ausgabe, da der Wert der Variablen ein String
ist, der zugehörige Fall aber eine Zahl:
12
13
103

Programmieren
var tag = "3";
switch (tag) {
case 0:
document.write("Montag");
break;
case 1:
document.write("Dienstag");
break;
case 2:
document.write("Mittwoch");
break;
case 3:
document.write("Donnerstag");
break;
case 4:
document.write("Freitag");
break;
case 5:
document.write("Samstag");
break;
case 6:
document.write("Sonntag");
break;
}
default
Wenn wie bei der Verwendung eines falschen Datentyps aus dem vorigen
Abschnitt keiner der Fälle eintrifft, ist es oft ärgerlich, dass der Nutzer keine
Rückmeldung erhält. Um dieses Problem zu beheben, fügen Sie einfach am
Ende eine default-Anweisung an. Sie tritt ein, wenn vorher keiner der Fälle
denselben Wert wie der Ausdruck hat.
Die Syntax der switch-Anweisung wird um die default-Anweisung erweitert
und damit ein wenig länger:
switch (Ausdruck) {
case Wert1:
Anweisung1;
break;
case Wert2:
Anweisung2;
break;
default:
Anweisung;
}
Wird das Beispiel mit den Wochentagen um eine default-Anweisung erweitert,
kann damit auch eine Falscheingabe, beispielsweise der Wert 7 für den
Wochentag, abgefangen werden:
104

Kontrollstrukturen
Listing 3.13: Der Einsatz von default (switch_default.html, nicht vollständig abgedruckt)
.
.
.
var tag = 7;
switch (tag) {
case 0:
document.write("Montag");
break;
case 1:
document.write("Dienstag");
break;
case 2:
document.write("Mittwoch");
break;
}
default:
document.write("Keiner der Fälle ist eingetreten");
1
2
3
4
Abbildung 3.14:
Keiner der sieben
Wochentage
konnte identifiziert
werden.
5
6
7
switch und if im Vergleich
Wenn nur mögliche Werte eines Ausdrucks nacheinander ausgewertet werden
sollen, wird eine if-Anweisung unnötig kompliziert. Dies zeigt der
direkte Vergleich zwischen switch und if:
Listing 3.14: Das switch-Beispiel, mit if realisiert (if_switch.html)
if oder switch

Programmieren
document.write("Freitag");
} else if (tag == 5) {
document.write("Samstag");
} else if (tag == 6) {
document.write("Sonntag");
} else {
document.write("Kein gültiger Wochentag!");
}
//-->
Zwar ist die if-else if-Variante um einige Zeilen 8 kürzer, dafür besteht sie aus
einigen Zeichen weniger und fordert damit auch mehr fehlerträchtige Tipparbeit.
Außerdem wirkt die switch-Variante optisch aufgeräumter. Schließlich
muss jeder selbst abwägen, was ihm besser gefällt. Viele Programmierer greifen
automatisch zu if-else if, da sie dieses Konstrukt besser kennen. Behalten
Sie aber die Alternative switch im Hinterkopf, wenn es an neue Aufgaben
geht.
3.3 Schleifen
Schleifen enthalten stetig sich wiederholende Anweisungen. Sie werden so
lange ausgeführt, bis eine vorher festgelegte Bedingung nicht mehr erfüllt
ist. Fehlt diese Bedingung oder ist sie immer erfüllt, läuft die Schleife ewig.
Man spricht dann von einer Endlosschleife. Endlosschleifen gehören zu den
Fehlern, die es unbedingt zu vermeiden gilt, denn häufig stürzt dem Nutzer
sonst der Browser ab.
TIPP
Haben Sie beim Programmieren eine Endlosschleife erzeugt, klicken Sie im
Browser auf das Stoppsymbol oder betätigen Sie (Esc), um den JavaScript-
Interpreter anzuhalten. Manche Browser fragen im Falle einer Endlosschleife
auch nach, ob sie das Skript abbrechen sollen (siehe Abbildung 3.15).
Abbildung 3.15:
Der Browser
erkundigt sich, ob
das Skript weiter
ausgeführt
werden soll.
3.3.1 for
Die for-Schleife ist die komfortabelste und daher auch meistverbreitete
Schleifenart. Wie oft die Schleife durchlaufen wird, steuern drei Parameter:
8 Um genau zu sein: sieben Zeilen. Natürlich könnten Sie weitere Zeilen einsparen, indem Sie else if-
Anweisungen auf eine Zeile komprimieren. Ähnlich lassen sich auch switch-Fälle in eine Zeile schreiben.
Der Nachteil bei beiden Methoden ist, dass die Übersichtlichkeit sehr stark leidet.
106

Schleifen
for (Initialisierung; Bedingung; Änderung) {
Anweisungen;
}
Die drei Parameter dienen alle zur Steuerung des Schleifenzählers:
■
■
■
Bei der Initialisierung wird typischerweise einer Zählervariablen ein erster
Wert vergeben. Diese Anweisung wird nur einmal, zu Beginn, ausgeführt.
Die Bedingung wird vor jedem Schleifendurchlauf überprüft. Ist sie
erfüllt (true), werden die Anweisungen in der Schleife ausgeführt.
Nach jedem Schleifendurchlauf wird in der Änderung die Zählervariable
angepasst. Dies geschieht so lange, bis die Zählervariable die
Bedingung nicht mehr erfüllt und die Schleife abgebrochen wird. Natürlich
kann die Zählervariable auch in der Schleife geändert werden und
in der Änderung folgen andere Anpassungen.
Jeder der drei Schleifenparameter kann weggelassen werden, nicht aber die
abtrennenden Strichpunkte. Fehlt die Bedingung, ist sie automatisch immer
true. In diesem Fall wird aus der for-Schleife eine Endlosschleife, wenn sie
nicht in den Anweisungen mit break abgebrochen wird.
INFO
1
2
3
4
5
Ein einfaches Beispiel gibt die Quadrate der Zahlen von 1 bis 10 aus:
■
Dazu wird der Zähler auf 1 initialisiert.
for (var i=1;
Die Zählervariable muss nicht unbedingt erst in der for-Schleife deklariert
werden. Meist wird allerdings diese Technik verwendet, da die Zählervariable
nur in der Schleife eingesetzt wird. Hier ist allerdings Vorsicht geboten:
Selbst wenn die Zählervariable erst in der for-Schleife deklariert wird, steht
sie auch nach der Schleife noch zur Verfügung. Sie ist also keine lokale Variable,
wie es sie bei Funktionen gibt (siehe Kapitel 4 »Funktionen«).
■ In der Bedingung überprüft die for-Schleife, ob der Zähler kleiner oder
gleich 10 ist.
for (var i=1; i

Programmieren
Abbildung 3.16:
Die for-Schleife
gibt die Quadrate
der Zahlen von 1
bis 10 aus.
Komma-Operator (,)
Der Komma-Operator ist der Operator mit der niedrigsten Präferenz (siehe
Abschnitt 3.1.6 »Operator-Präferenz«). Er dient dazu, gleichwertige Anweisungen
voneinander zu trennen.
In einer for-Schleife lassen sich für jeden der drei Parameter mehrere, durch
Kommata getrennte, Anweisungen vergeben.
Im folgenden Beispiel nutzen wir dies, um eine zweite Zählervariable t einzusetzen,
die gegenläufig zur ersten von 10 nach unten gezählt wird. Die
beiden Variablen werden in der Anweisung als Produkt i * t ausgegeben:
Listing 3.16: Eine for-Schleife mit mehreren Anweisungen für jeden Parameter (for_komma.html)
for-Schleife
108

Schleifen
Mit dieser Schleife erzeugen Sie eine symmetrische Zahlenfolge (1*10, 2*9,
3*8 …, siehe Abbildung 3.17).
Abbildung 3.17:
Die Schleife ergibt
eine symmetrische
Zahlenfolge.
1
2
3
4
break
Die break-Anweisung kennen Sie schon von der switch-Fallunterscheidung
(siehe Abschnitt 3.2.2 »switch case«). Sie lässt sich auch dazu verwenden, for-
Schleifen abzubrechen.
Der folgende Code würde die Zahlen von 1 bis 100 untereinander ausgeben.
Im Schleifenkörper ist allerdings eine if-Überprüfung eingebaut. Sie wird
aktiv, wenn die Zählervariable gleich 12 ist, und bricht dann die komplette
Schleife mit break ab:
Listing 3.17: Eine for-Schleife mit break abbrechen (for_break.html)
for und break
break können Sie auch bei den anderen Schleifentypen wie while- und do
while-Schleifen einsetzen.
TIPP
5
6
7
8
9
10
11
12
13
109

Programmieren
Abbildung 3.18:
Bei 12 ist dank
break Schluss,
obwohl der Schleifenzähler
bis 100
reicht.
continue
Der Befehl continue ist das Gegenstück zu break. Er springt zum nächsten
Schleifendurchlauf. Allerdings werden für den aktuellen Durchlauf alle
Anweisungen ignoriert, die nach continue folgen.
Das folgende Beispiel nutzt continue, um bei den Zahlen von 1 bis 10 den
Bereich von 4 bis 6 wegzulassen. Mit einer if-Anweisung wird überprüft, ob
die Zählervariable in diesem Durchlauf zwischen 4 und 6 liegt. Ist dies der
Fall, wird der Schleifendurchgang mit continue abgebrochen und gleich der
nächste Durchgang gestartet. Dadurch wird die Ausgabeanweisung für die
Zählervariable übersprungen.
Listing 3.18: continue in einer for-Schleife (for_continue.html)
for und continue
TIPP
continue funktioniert bei allen Schleifentypen, auch while- und do while-
Schleifen.
110

Schleifen
Abbildung 3.19:
Die Zahlen 4 bis 6
werden ausgespart.
1
2
Verschachtelte Schleifen
Natürlich können Sie Schleifen beliebig ineinander verschachteln. Folgende
Schleifenkombination gibt beispielsweise fünfmal hintereinander die Quadrate
der Zahlen von 1 bis 10 aus:
Listing 3.19: Ausschnitt von verschachtelten for-Schleifen (for_verschachtelt.html)
for (var i=1; i

Programmieren
HALT
Tabelle 3.8:
Schleifen
beschriften
Achten Sie bei einer verschachtelten Schleife darauf, dass die Zählervariable
der inneren Schleife nicht dieselbe sein sollte wie die der äußeren Variablen.
break und continue in verschachtelten Schleifen
Wenn Sie break oder continue in ineinander verschachtelten Schleifen einsetzen,
bezieht sich der Befehl immer auf die Schleife, in der er steht. Häufig
ist es aber gewünscht, die äußere Schleife aus einer inneren Schleife zu
beenden. Für diesen Fall können Sie Schleifen einen Namen geben und den
Namen hinter die break- oder continue-Anweisung schreiben. So erkennt
der Interpreter, welche Schleife er beenden muss:
Name1:
for (Initialisierung; Bedingung; Änderung) {
Anweisungen;
Name2:
for (Initialisierung; Bedingung; Änderung) {
Anweisungen;
break Name1;
}
}
Die Möglichkeit, Schleifen zu beschriften, gibt es in den älteren Browsern
Netscape 2 und 3 und Internet Explorer 3 in den verschiedenen Varianten
nicht. Die aktuellen Browser dagegen unterstützen Schleifen mit Namen.
NS4.x M/FF IE4 IE5 IE5.5 IE6 IE7 Op SF/KQ
In der Praxis sind beschriftete Schleifen allerdings relativ selten zu finden,
da es nicht so viele Einsatzgebiete für verschachtelte Schleifen gibt bzw.
verschachtelte Schleifen häufig für unübersichtlichen Code sorgen.
Ein kleines Beispiel illustriert die Funktionsweise der Schleifennamen. Wir
beschriften die äußere Schleife mit »schleife1« und die innere mit
»schleife2«. In der if-Anweisung in »schleife2« beenden wir die äußere
Schleife mit break schleife1, sobald die Zählervariable i der äußeren
Schleife den Wert 2 hat. Da dies nach einem Durchlauf der Fall ist, wird
nach der Ausgabe der ersten 100 Zahlen gestoppt:
Listing 3.20: Verschachtelte und beschriftete Schleifen (verschachtelt_beschriften.html)
Verschachtelte und beschriftete for-Schleifen

Schleifen
schleife2:
for (var j=1; j
1
2
Abbildung 3.21:
Die Schleife wird
nur einmal
ausgeführt.
3
4
5
6
7
In JavaScript lassen sich nicht nur Schleifen, sondern auch beliebige andere
Anweisungen beschriften. Bei Schleifen ist der Einsatz von Namen allerdings
am üblichsten und in der Praxis sinnvoll.
for-in
Die for-in-Schleife ist eine Unterart der for-Schleife mit einem ganz
bestimmten Zweck. Sie soll Elemente aus Objekten und Arrays auslesen.
Da sowohl Objekte als auch Arrays in den Kapiteln 6 und 7 ausführlich
behandelt werden, finden Sie hier nur die Syntax und ein kurzes Beispiel zur
for-in-Schleife.
Die Besonderheit der for-in-Schleife ist der in-Operator. 9 Ein Blick auf die
Syntax verdeutlicht die Funktionsweise:
for (Variable in Objekt) {
Anweisung
}
REF
8
9
10
11
12
13
9 Es handelt sich hier tatsächlich um einen Operator. Allerdings ist dies keine für die Praxis wichtige
Unterscheidung.
113

Programmieren
Die Variable nimmt bei jedem Schleifendurchlauf eine Eigenschaft des
Objekts auf. Beendet wird die Schleife, wenn alle Eigenschaften eines
Objekts durchlaufen sind.
Anhand eines Arrays wird das verständlicher. Ein Array besteht aus beliebig
vielen Daten, die standardmäßig mit einem ganzzahligen Index versehen
werden, der bei 0 beginnt:
■ Im folgenden Array hat »München« den Index 0, »Frankfurt« den Index 1
und »Berlin« den Index 2.
var a = new Array("München", "Frankfurt", "Berlin");
■ Eine for-in-Schleife liest das Array aus:
for (var index in a) {
In der Variablen index wird die Indexnummer der verschiedenen
Array-Elemente gespeichert. Im ersten Schleifendurchlauf ist das 0, im
zweiten 1, im dritten 2. Ein vierter Durchlauf erfolgt nicht, da das
Array nur drei Elemente hat. Die Schleife wird beendet.
■ Im Schleifenkörper können Sie jetzt mit dem Index arbeiten. Die folgende
Zeile gibt zuerst den Index aus und anschließend das zugehörige
Element (mit dem Array-Namen und dem Index in eckigen Klammern).
document.write(index + ": " + a[index] + "");
Hier das vollständige Skript:
Listing 3.21: for-in (for_in.html)
for in
Abbildung 3.22:
Der Inhalt des
Arrays wird
ausgegeben.
114

Schleifen
3.3.2 while
Die while-Schleife ist wesentlich einfacher aufgebaut als die for-Schleife.
Einziger Parameter ist die Bedingung, die vor jedem Schleifendurchlauf
überprüft wird. Tritt sie ein, werden die Anweisungen im Schleifenkörper
ausgeführt:
while (Bedingung) {
Anweisungen;
}
Dennoch können Sie, wie der folgende Code beweist, mit while dieselben
Aufgaben wie mit einer for-Schleife bewältigen:
Listing 3.22: Die while-Schleife kann genauso viel wie for (while.html).
while
1
2
3
4
5
6
7
Abbildung 3.23:
Mit der while-
Schleife lassen sich
dieselben Aufgaben
erledigen wie
mit for.
8
9
10
11
12
13
115

Programmieren
Dieser Code gibt die Quadrate der Zahlen von 1 bis 10 aus (siehe analog
Listing 3.15). Gegenüber der for-Schleife muss die Zählervariable allerdings
bereits außerhalb der Schleife definiert und im Schleifenkörper bei jedem
Durchlauf hochgezählt werden. Die Syntax für eine while-Schleife mit Zähler
sieht also wie folgt aus:
Zählerinitialisierung
while (Bedingung) {
Anweisungen;
Zähleränderung
}
Wann ist while sinnvoller?
Welche Schleife Sie zu welchem Zweck einsetzen, ist im Prinzip
Geschmacksache. Erfolgt die Überprüfung der Bedingung nicht direkt in den
Parametern der Schleife, sondern in einer if-Anweisung, wird oft die while-
Schleife bevorzugt.
Folgendes Beispiel arbeitet mit einer while-Schleife, die erst abgebrochen
wird, wenn die if-Bedingung erfüllt und eine durch 21 teilbare Zahl unter
100 gefunden wurde:
Listing 3.23: Ist while manchmal besser als for? (while_besser.html)
while besser als for?
INFO
Auch dieses Beispiel lässt sich natürlich mit einer for-Schleife realisieren.
Hier ist die while-Schleife ohne die zwei zusätzlichen Parameter jedoch
praktischer, da in einer for-Schleife die Bedingung nicht mit den Zählervariablen
übereinstimmen würde:
for (var zahl = 100; weiter == true; zahl--) {
ist für das Verständnis nicht sehr sinnvoll.
116

Schleifen
Die while-Schleife im letzten Beispiel ließe sich auch noch einfacher gestalten,
indem die Bedingung auf true gesetzt und in der if-Anweisung break
verwendet würde:
while (true) {
if (zahl % 21 == 0) {
document.write(zahl + " ist durch 21 teilbar");
break;
}
zahl--;
}
Dies funktioniert zwar identisch, balanciert allerdings noch näher an der
Endlosschleife, da die Bedingung nie false werden kann.
Abbildung 3.24:
Die erste durch 21
teilbare Zahl
wurde gefunden
und ausgegeben.
1
2
3
4
5
6
3.3.3 do while
Die do while-Schleife überprüft die Bedingung erst am Ende:
do {
Anweisungen;
} while (Bedingung)
Das heißt auch, dass die Anweisungen im Schleifenkörper mindestens einmal
ausgeführt werden, unabhängig davon, ob die Bedingung am Anfang
erfüllt oder nicht erfüllt ist.
do while gehört noch nicht seit den Anfängen zu JavaScript wie die anderen
Schleifen. Netscape 2 und 3 und Internet Explorer 3 in beiden Varianten
unterstützen sie nicht. Aus heutiger Sicht werden allerdings alle aktuellen
und wichtigen Browser unterstützt.
NS4.x NS6 NS7 IE4 IE5 IE5.5 IE6 O7 M1 K3
Tabelle 3.9:
do while-Schleife
7
8
9
10
11
12
13
117

Programmieren
Ein Beispiel verdeutlicht die Besonderheit der do while-Schleife:
Listing 3.24: Die do while-Schleife (do_while.html)
do while-Schleife
Die Bedingung i