Rheinwerk Computing <openbook>
Rheinwerk Computing - Programming the Net


JavaScript von Christian Wenz
Browserübergreifende Lösungen
JavaScript - Zum Katalog
gp Kapitel 3 Programmierung I
  gp 3.1 Variablen
  gp 3.2 Operatoren
  gp 3.3 Kontrollstrukturen: Schleifen
  gp 3.4 Fragen & Aufgaben

Kapitel 3 Programmierung I

There was Winnie the Pooh,
and Tigger, too.
– frei nach: A. A. Milne, Pooh’s Bedtime Book



Gut gerüstet

In diesem und dem folgenden Kapitel werden die Grundprinzipien der Programmierung an sich und der Programmierung mit JavaScript im Besonderen erläutert. An Praxisbeispielen ist dieses Kapitel recht arm, aber Sie werden die hier vorgestellten Techniken in den weiteren Kapiteln noch des Öfteren benötigen. Sie erhalten hier das Rüstzeug, das die Grundlage für alle kommenden Kapitel ist.

Grundbegriffe der Programmierung werden hier ebenfalls erläutert. Leser, die bereits Erfahrungen mit der einen oder anderen Programmiersprache haben, mögen diesen kleinen Exkurs verzeihen, aber so soll auch Neulingen die Chance geboten werden, in die Materie einzusteigen. Auf der anderen Seite wiederum sind die Erklärungen recht knapp gehalten, und nur das Nötigste wird hierzu erklärt. Schließlich geht es ja darum, möglichst schnell brauchbare Anwendungen zu schreiben.


Rheinwerk Computing

3.1 Variablen  downtop

Bei der Programmierung müssen immer wieder Daten zwischengespeichert werden. Hierzu bedient man sich so genannter Variablen (in manchen Büchern – aber sehr wenigen – auch als »Veränderliche« bezeichnet).


Rheinwerk Computing

3.1.1 Namensgebung  downtop

Jede Variable wird anhand ihres Namens angesprochen. Bei der Namensgebung haben Sie größtenteils freie Hand. Ein Variablenname besteht aus einer Folge von Buchstaben, Ziffern und dem Unterstrich ( _ ). Einzige Bedingung: Das erste Zeichen darf keine Ziffer sein. Außerdem wird zwischen Groß- und Kleinschreibung unterschieden. Die Bezeichner Pooh, pooh und POOH sind also verschiedene Variablen. Beispiele für Variablennamen sind etwa:

gp  Winnie_The_Pooh
gp  WinnieThePooh
gp  Winnie2000
gp  _Winnie_

JavaScript-Schlüsselworte und -begriffe dürfen Sie nicht als Variablennamen verwenden. Ein Beispiel hierfür ist etwa alert, das Sie im vorherigen Kapitel schon einmal in Aktion gesehen haben.

Um einer Variablen einen Wert zuzuweisen, wird das Gleichheitszeichen verwendet. Links vom Gleichheitszeichen steht der Variablenname, rechts davon der neue Wert (oder eine andere Variable, deren Wert dann zugewiesen wird).


Rheinwerk Computing

3.1.2 Numerische Variablen  downtop

Es gibt verschiedene Typen von Variablen. Zahlenwerte werden wie im amerikanischen Zahlensystem mit einem Dezimalpunkt statt einem Dezimalkomma angegeben:

Pi = 3.1415926
Mauerfall = 1989
MinusHundert = -100

Rheinwerk Computing

3.1.3 Zeichenketten  downtop

Sehr oft werden Zeichenketten, auch Strings genannt, verwendet. Die zweite Bezeichnung kommt daher, dass es ein so benanntes Objekt in JavaScript gibt, aber dazu später mehr. In diesem Buch werden beide Begriffe äquivalent verwendet.

Ein String wird von Anführungszeichen eingeschlossen, entweder von einfachen (Apostrophen) oder doppelten. Hierbei ist zu beachten, dass unbedingt gerade Anführungszeichen ((ª)+(2)) und Apostrophe ((ª)+(#)) verwendet werden. Im Gegensatz zu beispielsweise Perl ist es hier egal, ob einfache oder doppelte Anführungszeichen verwendet werden, Hauptsache, die Zeichenkette wird mit derselben Art von Anführungszeichen beendet, wie sie eingeleitet worden ist.

WinniesFreund = "Piglet"
WinniesAndererFreund = 'Tigger'

Die verschiedenen Anführungszeichen haben unter anderem den folgenden Sinn: Wenn Sie beispielsweise ein Apostroph in einer Zeichenkette verwenden wollen, können Sie diese Zeichenkette ja schlecht mit Apostrophen eingrenzen, da der JavaScript-Interpreter dann nicht weiß, wo die Zeichenkette aufhört. In diesem Fall muss man die andere Sorte von Anführungszeichen verwenden:

WinnieSays = "It's me, Winnie the Pooh"

Wenn man aber in der Verlegenheit ist, beispielsweise beide Arten von Anführungszeichen in einer Zeichenkette verwenden zu müssen, kommt man in Schwierigkeiten. Hier hilft der Backslash (\) weiter. Das dem Backslash folgende Zeichen wird »entwertet«, d. h. es nimmt in der Zeichenkette keine besondere Bedeutung ein. Beim Anführungszeichen oder Apostroph bedeutet das: Die Zeichenkette wird hiermit nicht beendet.

WinnieSays = 'It\'s me, Winnie the Pooh'

Wenn man nun den Backslash selbst in der Zeichenkette verwenden will, muss man auch ihn entwerten:

WindowsVerzeichnis = "C:\\WINDOWS"

Mit dem Backslash können auch einige besondere Zeichen dargestellt werden. Tabelle 3.1 zeigt eine Übersicht:

Tabelle 3.1  Sonderzeichen innerhalb von Zeichenketten
Ausdruck Bedeutung
\r Wagenrücklauf
\n Neue Zeile
\t Tabulator
\b Backspace (Löschtaste)
\f Seitenvorschub


Rheinwerk Computing

3.1.4 Boolesche Variablen  downtop

Oft ist man nicht an einem Zahlenwert oder einem String interessiert, sondern an einem Wahrheitswert, also wahr oder falsch. Man spricht hier auch von Booleschen Variablen. Solche Variablen können als Wert nur true (wahr) oder false (falsch) annehmen. Später werden Sie sehen, dass Boolesche Werte indirekt auch bei einigen anderen JavaScript-Konstrukten vorkommen.

Ist2000einSchaltjahr = true
Ist3000einSchaltjahr = false

Rheinwerk Computing

3.1.5 Variablendeklaration  downtop

Wie bereits gesehen, kann mit dem Gleichheitszeichen einer Variablen ein Wert zugewiesen werden. Ein Variablenname kann auch öfter verwendet werden, und ihm kann auch mehrmals ein Wert zugewiesen werden, es handelt sich dann jedoch immer um dieselbe Variable. Sehr oft findet man in der Praxis das Schlüsselwort var vor der ersten Verwendung einer Variablen. Dies dient zur Initialisierung der Variablen und wird ab hier der Übersichtlichkeit halber in diesem Buch konsistent verwendet. So sieht man auf den ersten Blick, welche Variable schon einmal deklariert worden ist und welche nicht. Später, bei der Einführung von Funktionen, wird das Schlüsselwort noch eine besondere Bedeutung erhalten.

Beachten Sie, dass Sie das Schlüsselwort var nur einmal pro Variable verwenden sollten. Richtig ist also Folgendes:

var AnzahlHonigtoepfe = 5
// Befehle zum Einkaufen von mehr Vorräten
AnzahlHonigtoepfe = 6

Nicht so gut ist dagegen:

var AnzahlHonigtoepfe = 5
// Befehle zum Einkaufen von mehr Vorräten
var AnzahlHonigtoepfe = 6

In diesem und auch in einigen der anderen Beispiele in diesem Buch sind gegenüber einem vorherigen Listing veränderte Programmzeilen durch Fettdruck hervorgehoben.


Rheinwerk Computing

3.2 Operatoren  downtop

Durch Operatoren wird eine gewisse Anzahl von Variablen miteinander kombiniert. Beispiele für Operatoren sind die Grundrechenarten. Durch den Plus-Operator werden zwei Zahlen miteinander kombiniert, und als Ergebnis erhält man die Summe dieser beiden Zahlen. Man unterscheidet – auch je nach Typ der beteiligten Variablen – verschiedene Arten von Operatoren.


Rheinwerk Computing

3.2.1 Arithmetische Operatoren  downtop

Diese Art von Operatoren arbeitet mit numerischen Variablen. Sie sollten also sicherstellen, dass auch wirklich Zahlenvariablen vorliegen, sonst könnten Sie eine Fehlermeldung erhalten. In Kapitel »Formulare II« finden Sie im übrigen Techniken, wie man Zahlenvariablen als solche erkennen kann. Tabelle 3.2 zeigt alle arithmetischen Operatoren anhand eines Beispiels.

Tabelle 3.2  Arithmetische Operatoren
Operator Beschreibung Beispiel Ergebnis (Wert von a)
+ Addition a = 7 + 4 11
- Substraktion a = 7 – 4 3
* Multiplikation a = 7 * 4 28
/ Division a = 7 / 4 1.75
% Modulo (Restrechnung) a = 7 % 4 3
- Negation b = 7
a = -b
-7

Willman eine Variable um einen bestimmten Wert erhöhen, kann man sich des folgenden Konstrukts bedienen:

AnzahlHonigtoepfe = AnzahlHonigtoepfe + 5

Der Variablen AnzahlHonigtoepfe wird als Wert der alte Wert dieser Variablen plus fünf zugewiesen, der Wert der Variablen wird also de facto um fünf erhöht. In der Praxis kommt es sehr häufig vor, dass der Wert einer Variablen um genau eins erhöht oder verringert werden soll; für diesen Fall sieht JavaScript eine Abkürzung vor:

gp  AnzahlHonigtoepfe++ erhöht den Wert der Variablen um eins.
gp  AnzahlHonigtoepfe-- verringert den Wert der Variablen um eins.

Die Operatoren ++ und -- können auch direkt vor dem Variablennamen stehen. Der Unterschied liegt in der Reihenfolge, in der diese Operation im Vergleich mit anderen Operationen ausgeführt werden soll. Am Beispiel des Operators ++ soll das einmal durchexerziert werden; -- verhält sich analog.

Das Endergebnis des Standalone-Ausdrucks

AnzahlHonigtoepfe++

ist äquivalent mit dem von

++AnzahlHonigtoepfe

Einen Unterschied stellt man jedoch fest, wenn der Ausdruck bei einer Zuweisung verwendet wird:

AnzahlHonigtoepfe = 5
var Anzahl = ++AnzahlHonigtoepfe
var Anzahl2 = AnzahlHonigtoepfe++

Welchen Wert hat Anzahl, welchen Wert hat Anzahl2?

Die (vielleicht etwas überraschende) Antwort lautet: Anzahl hat den Wert 6, Anzahl2 hat auch den Wert 6. Betrachten Sie zunächst die zweite Zeile:

var Anzahl = ++AnzahlHonigtoepfe

Der ++-Operator steht vor dem Variablennamen, das bedeutet hier, es wird zunächst diese Operation ausgeführt (AnzahlHonigtoepfe um eins erhöhen), und dann wird der neue Wert (6) der Variablen Anzahl zugewiesen.

Bei der dritten Zeile ist es genau andersherum:

var Anzahl2 = AnzahlHonigtoepfe++

Zuerst wird der Variablen Anzahl2 der (aktuelle) Wert von AnzahlHonigtoepfe zugewiesen, dann wird der Wert von AnzahlHonigtoepfe um eins vergrößert.

Wenn man den Wert einer Variablen nicht um exakt eins erhöhen oder verringern will, kann man sich einer anderen Abkürzung bedienen. Diese Abkürzung existiert für jede der vier Grundrechenarten sowie für den Modulo-Operator:

Tabelle 3.3  Abkürzungen für arithmetische Operationen
Operator Bedeutung Langform Kurzform
+= Addition a = a + b a += b
-= Subtraktion a = a – b a -= b
*= Multiplikation a = a * b a *= b
/= Division a = a / b a /= b
%= Modulo a = a % b a %= b

Auch in JavaScript gilt, dass Punktrechnung vor Strichrechnung geht, d. h. Multiplikationen und Divisionen werden vor Additionen und Subtraktionen ausgeführt. Der folgende Ausdruck liefert also 7 und nicht 9:

var PunktVorStrich = 1+2*3

Rheinwerk Computing

3.2.2 Boolesche Operatoren  downtop

Mit Logikoperatoren (oder Booleschen Operatoren) kann man Wahrheitswerte miteinander verknüpfen. Die Bedeutung der Operatoren ist die mathematische Bedeutung, nicht unbedingt die umgangssprachliche Bedeutung. Aus diesem Grund werden die einzelnen Operatoren explizit behandelt.

UND (&&)

Nur, wenn beide (bzw. alle) beteiligten Variablen den Wert true haben, liefert die Operation true zurück, ansonsten false.

var t = true
var f = false
var bool1 = t && f  //liefert false
var bool2 = t && t  //liefert true

ODER (||)

Ist eine der beteiligten Variablen true, so liefert die Operation true zurück. Das Ergebnis ist nur dann false, wenn alle Variablen den Wert false haben. Hier liegt ein Unterschied zum Deutschen vor, denn dort bedeutet »oder« eher »Entweder-oder«: Nur dann ist das Ergebnis true, wenn genau eine der beteiligten Variablen den Wert true hat.

var t = true
var f1 = false
var f2 = false
var bool1 = t || f1 || f2  //liefert true
var bool2 = f1 || f2  //liefert false

NEGATION (!)

Der Negationsoperator macht true zu false und false zu true.

var t = true
var f = false
var bool1 = !t  //liefert false
var bool2 = !f  //liefert true

Short Evaluation

Wie Sie bereits gesehen haben, genügt genau eine Variable mit dem Wert true, damit das Ergebnis einer Oder-Verknüpfung ganz sicher den Wert true hat. Analog liefert eine Und-Verknüpfung auf jeden Fall den Wert false, wenn eine Variable den Wert false hat.

JavaScript benutzt hier das Prinzip der so genannten Short Evaluation (wörtlich: kurze Auswertung), zumindest die existierenden Implementierungen. Bei einer Und- bzw. Oder-Verknüpfung werden die beteiligten Variablen von links nach rechts durchgegangen. Sollte bei einer dieser Variablen aufgrund ihres Werts das Ergebnis der gesamten Operation schon feststehen, wird der Rest gar nicht ausgewertet.

Vergleichsoperatoren

Vergleichsoperatoren werden meistens bei Zahlenwerten verwendet. Auch bei Zeichenketten sind diese Vergleiche möglich, hier richtet sich die Rangfolge der einzelnen Zeichen (welches Zeichen ist »größer« als ein anderes?) nach dem ASCII-Code des Zeichens.

Tabelle 3.4  Vergleichsoperatoren
 Operator Beschreibung Beispiel Ergebnis (Wert für a)
== Gleich a = (3 == 4)
a = ("Pooh" == "Piglet")
false
!= Ungleich a = (3 != 4)
a = ("Pooh" != "Piglet")
true
> Größer als a = ( 3 > 4) false
< Kleiner als a = (3 < 4 ) true
>= Größer oder gleich a = ( 3 >= 4) false
<= Kleiner oder gleich a = (3 <= 4 ) true

gp  Eine der häufigsten Fehlerquellen besteht in der Verwechslung der Zuweisung = mit dem Vergleichsoperator ==. Ab JavaScript Version 1.3 gibt der Interpreter eine Fehlermeldung aus, wenn offensichtlich ein Vergleich durchgeführt werden soll, aber der Zuweisungsoperator verwendet wird.

Rheinwerk Computing

3.2.3 String-Operatoren  downtop

Auch mit Zeichenketten kann man »rechnen«; man kann zwei Zeichenketten aneinander hängen. Hierzu wird auch der Plus-Operator (+) verwendet:

var Vorname = "Winnie"
var Nachname = "Pooh"
var Baer = Vorname + " " + Nachname  //liefert "Winnie Pooh"

Ansonsten kann man mit Zeichenketten nicht rechnen. Dennoch sollen an dieser Stelle noch drei Möglichkeiten vorgestellt werden, um mit Zeichenketten etwas anzufangen:

gp  Zeichenkette.length: Liefert die Anzahl der Zeichen in einer Zeichenkette zurück.
gp  Zeichenkette.charAt(x): Liefert das Zeichen an Position x in der Zeichenkette zurück. Dabei beginnt die Zählung bei 0, das vierte Zeichen erhält man also mit Zeichenkette.charAt(3).
gp  Zeichenkette.substring(start, ende): Liefert eine Teilzeichenkette zurück, und zwar ab dem Zeichen an Position start (Zählung beginnt wieder bei 0) und bis zu dem Zeichen vor dem Zeichen an der Position ende.

Hierzu ein kleines Beispiel. In den Variablen a und b stehen das erste Zeichen der Zeichenkette und die folgenden Zeichen:

var z = "Winnie The Pooh"
var a = z.charAt(0)
var b = z.substring(1, z.length)

Rheinwerk Computing

3.2.4 Umwandlung zwischen den Variablentypen  downtop

Die vorgestellten Operatoren können auch dazu verwendet werden, zwischen den einzelnen Variablentypen umzuwandeln. JavaScript ist in Sachen Variablentypus nicht so strikt wie andere Programmiersprachen. Eine Variable kann auch ihren Typ während des Programmablaufs ändern. Beispielsweise werden Sie in einem späteren Kapitel feststellen, dass Formulareingaben stets als Zeichenketten vorliegen. Wenn Sie sich aber sicher sind, dass die Zeichenkette eine korrekt formatierte Zahl enthält, können Sie JavaScript dazu zwingen, die Variable als Zahlenwert zu betrachten. Der Trick besteht darin, die Variable mit eins zu multiplizieren (oder 0 zu addieren). Eine Multiplikation kann nur mit Zahlenwerten durchgeführt werden, sodass JavaScript die Variable in eine Zahl umwandelt – und eine Multiplikation mit eins ändert am Wert der Zahl auch nichts.

Außerdem ist es manchmal notwendig, eine Boolesche oder numerische Variable in eine Zeichenkette umzuwandeln. Diesmal muss der Konkatenationsoperator (Verkettungsoperator), das Plus, verwendet werden. Indem eine Variable mit einer leeren Zeichenkette konkateniert (verkettet) wird, erhält man als Ergebnis eine Zeichenkette, ändert aber ansonsten den Wert der Variablen nicht.

var AnzahlHonigtoepfe = "5"
AnzahlHonigtoepfe *= 1  //Zeichenkette in Zahl
var wahrheitswert = true
wahrheitswert += ""  //Wahrheitswert in Zeichenkette
var Anzahl = 6
Anzahl += ""  //Zahl in Zeichenkette

JavaScript führt zwar eine automatische Typenkonvertierung durch, aber nicht immer in die gewünschte Richtung:

var summe = "47" + 11  //liefert "4711" und nicht etwa 58

Rheinwerk Computing

3.3 Kontrollstrukturen: Schleifen  downtop

Hin und wieder kommt es vor, dass eine Anweisung mehrmals ausgeführt werden muss, beispielsweise bei einer Aufzählung. Hierzu bietet JavaScript mehrere Kontrollstrukturen an. Mit JavaScript Version 1.2 (sowie beim Internet Explorer 4) wurden neue Kontrollstrukturen eingeführt, die aber mit dem Befehlssatz von JavaScript 1.0 vollständig nachgebildet werden können.


Rheinwerk Computing

3.3.1 For-Schleifen  downtop

Diese Art der Schleife führt eine Anweisung eine (in der Regel) bestimmte Anzahl von Malen aus. Die Syntax sieht dabei folgendermaßen aus:

for (Initialisierung; Bedingung; Befehlsfolge){
   //Anweisungen
}

Die for-Schleife hat drei Parameter:

gp  Initialisierung: Oft läuft bei einer Schleife eine Zählvariable mit, die die Anzahl der Wiederholungen zählt. Diese Variable kann hier initialisiert werden. Sollen mehrere Variablen initialisiert werden, so werden die einzelnen Anweisungen durch Kommata voneinander getrennt.
gp  Bedingung: Die for-Schleife wird so lange ausgeführt, bis diese Bedingung nicht mehr erfüllt ist.
gp  Befehlsfolge: Nach jedem Durchlauf der Anweisungen wird diese Befehlsfolge (in der Regel ein Befehl; mehrere Befehle werden durch Kommata voneinander getrennt) ausgeführt. Wenn die Schleife irgendwann enden soll, sollten hier in der Regel Befehle ausgeführt werden, die nach einer bestimmten Anzahl von Durchläufen die Bedingung (den zweiten Parameter) nicht mehr erfüllbar machen.

Die geschweiften Klammern um den Anweisungsblock sind dann zwingend, wenn der Block aus mehr als einem Befehl besteht. Handelt es sich um nur einen Befehl, so kann man die geschweiften Klammern weglassen. Man sollte aber zumindest den Code einrücken, damit das ganze übersichtlich und lesbar bleibt.

Der folgende Code gibt zehnmal Winnie aus. Dabei wird eine Zählvariable mit 0 initialisiert und in jedem Schleifendurchlauf um eins erhöht. Die Abbruchbedingung prüft, ob die Zählvariable kleiner als zehn ist. Vor dem elften Durchlauf wird die Variable auf zehn erhöht, und die Schleife wird verlassen.

for (var i=0; i<10; i++)
   document.write("Winnie<BR>")

Sehr oft wird die Zählvariable auch direkt in der Schleife verwendet. Der folgende Code gibt alle Quadratzahlen von 0  =  0 bis 10  =  100 aus:

for (var i=0; i<=10; i++){
   document.write("Das Quadrat von " + i + " ist: ")
   document.write(i*i + "<BR>")
}

Sie sehen hierbei die Verwendung des Plus-Operators: Hier werden eine Zeichenkette und eine Zahl zusammengefügt. Das Ergebnis ist eine Zeichenkette, die Zahl wird also in eine Zeichenkette umgewandelt.

Beachten Sie ebenso, dass Sie einen Zeilenumbruch nicht mit \r\n angeben sollten, sondern mit dem entsprechenden HTML-Tag, <BR>. Bei Tags gibt es noch eine Besonderheit zu beobachten, aber hierzu kommen wir erst im nächsten Kapitel.

Wie bereits erwähnt, kann man auch mehrere Zählvariablen verwenden, die man dann durch Kommata voneinander trennen muss. Anwendungen gibt es ziemlich selten, hier folgt ein sehr praxisfremdes Beispiel. Es werden zwei Zählvariablen verwendet, i und j. Die erste enthält eine Zahl, die zweite eine Zeichenkette. Der Zahlenwert wird in eine Zeichenkette umgewandelt und an j angehängt. Sobald j mehr als 15 Zeichen enthält, wird die Schleife verlassen.

for (var i=1, j=""; j.length<=15; i++, j += i)
   document.write(i + " – " + j + "<BR>")

Dieses Programm gibt Folgendes auf dem Bildschirm aus:

1 – 1
2 – 12
3 – 123
4 – 1234
5 – 12345
6 – 123456
7 – 1234567
8 – 12345678
9 – 123456789
10 – 12345678910
11 – 1234567891011
12 – 123456789101112

Vor dem nächsten Schleifendurchlauf würde an die Zeichenkette 13 angehängt, die Länge würde dadurch auf 17 Zeichen anwachsen, also wird die Schleife hier verlassen.


Rheinwerk Computing

3.3.2 Do-While-Schleife  downtop

gp  Nicht immer weiß man, wie oft ein Anweisungsblock hintereinander ausgeführt werden soll. Statt dessen will man den Block so lange ausführen, bis eine Bedingung nicht mehr erfüllt ist. Im folgenden Beispiel sollen in einer Zeichenkette alle As durch Bs ersetzt werden. Hierbei ist die Methode Zeichenkette.indexOf(Teilstring) nützlich; diese gibt nämlich zurück, an welcher Position in der Zeichenkette der Teilstring das erste Mal vorkommt. Ist dieser nicht in der Zeichenkette enthalten, wird -1 zurückgegeben. Das erste Zeichen steht, wie auch schon vorher, an Position 0. Diese Art von Schleife gibt es jedoch erst seit Netscape Navigator 4 und Internet Explorer 4.

Die Syntax ist die Folgende:

do {
   //Anweisungsblock
} while (Bedingung)

Der Anweisungsblock wird ausgeführt, und dann wird die Bedingung überprüft. Ist sie erfüllt, wird der Block erneut ausgeführt (und dann wieder die Bedingung geprüft); andernfalls wird die Schleife verlassen.

var Zeichenkette = "AXAYAZ"
do{
   io = Zeichenkette.indexOf("A")
   Zeichenkette = Zeichenkette.substring(0, io) + "B" +
      Zeichenkette.substring(io+1, Zeichenkette.length)
} while (Zeichenkette.indexOf("A")>-1)

Nach dem Durchlauf enthält Zeichenkette den Wert BXBYBZ.

Beachten Sie insbesondere, dass die Schleife auf jeden Fall einmal ausgeführt wird! Im Beispiel führt das zu einem Fehler, wenn die Zeichenkette zu Anfang überhaupt kein A enthält. Im Folgenden lernen Sie Methoden kennen, um dies zu vermeiden.

Noch ein Wort zu der Zuweisung. Wenn Sie bei einer Zeichenkette z das Zeichen an Stelle x in das Zeichen X ändern wollen (Zählung beginnt wie immer bei 0), kommen Sie mit folgender Anweisung weiter:

z = z.substring(0, x) + "X" + z.substring(x+1, z.length)

Alle Zeichen vor und hinter dem zu ändernden Zeichen werden durch die beiden substring()-Anweisungen erhalten.


Rheinwerk Computing

3.3.3 While-Schleife  downtop

Schon seit JavaScript Version 1.0 gibt es eine weitere Form der Schleifen, und zwar while-Schleifen (ohne do). Die Syntax ist der von do-while-Schleifen sehr ähnlich, der Unterschied steckt im Detail:

while (Bedingung){
   //Anweisungsblock
}

Die Bedingung wird also hier vor dem Durchlaufen des Anweisungsblocks überprüft. Im Beispiel von oben, der Ersetzung aller As durch Bs, ist das sehr nützlich, da hier der Anweisungsblock nicht ausgeführt wird, wenn die Zeichenkette von Anfang an keine As enthält:

var Zeichenkette = "AXAYAZ"
while (Zeichenkette.indexOf("A")>-1){
   io = Zeichenkette.indexOf("A")
   Zeichenkette = Zeichenkette.substring(0, io) + "B" +
     Zeichenkette.substring(io+1, Zeichenkette.length)
}

Rheinwerk Computing

3.3.4 For-In-Schleife  downtop

Diese Schleife wird recht selten verwendet, und an dieser Stelle fehlt noch das Grundwissen über Objekte, um eine ausreichende Erklärung geben zu können. Prinzipiell sei gesagt, dass man hier mit der Schleife durch alle Eigenschaften eines Objekts laufen kann. Die folgende Schleife gibt das NAME-Attribut aller Elemente eines Formulars wieder. Spätestens im Kapitel »Formulare I« werden Sie diesen Code verstehen, vorerst aber müssen Sie mir einfach glauben.

for (e in document.forms[0].elements)
   document.write(e.name+"<BR>")

Rheinwerk Computing

3.3.5 Schleifensteuerung  downtop

Eine Schleife muss nicht unbedingt so oft durchlaufen werden, wie vorgesehen ist. Angenommen, in einer Schleife wird eine Zeichenkette auf das Vorhandensein eines bestimmten Zeichens überprüft (das geht mit indexOf() sehr schnell, aber das soll an dieser Stelle nicht interessieren). Sobald das Zeichen gefunden worden ist, muss die Schleife nicht unbedingt weiter ausgeführt werden, denn das Ergebnis (»Das Zeichen ist in der Zeichenkette enthalten«) steht ja jetzt schon fest. Aus diesem Grund gibt es den Befehl break, der das sofortige Verlassen der aktuellen Schleife veranlasst. Der Interpreter fährt also hinter dem aktuellen Anweisungsblock fort.

Ebenso kann es bei Schleifen, insbesondere bei for-Schleifen, immer wieder vorkommen, dass man zum nächsten Schleifendurchlauf springen möchte, beispielsweise, wenn man genau weiß, dass dieser Durchlauf nicht das gewünschte Ergebnis bringt, und man den Rest der Schleife aus Effizienzgründen nicht ausführen lassen möchte. Der entsprechende Befehl heißt continue.

Auch hier ist es leider so, dass das momentane Wissen noch nicht ausreicht, um ein sinnvolles Beispiel anzugeben. Am Ende des nächsten Kapitels werden Sie aber in der Lage sein, die Befehle break und continue einzusetzen.

Allgemein wird die Verwendung von break und continue als eher schlechter Programmierstil angesehen; zu sehr ähneln diese Befehle dem Spaghetti-Code aus alten BASIC-Zeiten.

In der Praxis werden die beiden Befehle jedoch durchaus angewandt, und zumindest im JavaScript-Bereich ist nach Meinung des Autors nichts dagegen einzuwenden.


Rheinwerk Computing

3.4 Fragen & Aufgaben  toptop

1. Welche der folgenden Variablennamen sind gültig?
    gp  Winnie-The-Pooh
    gp  Winnie1
    gp  1Winnie
    gp  Winnie Pooh
    gp  _1a
2. Woran scheitert dieser Aufruf?

<A HREF="#" onClick="alert(\"I love Tigger\")">

3. Was sind die prinzipiellen Unterschiede zwischen einer while- und einer do-while-Schleife?
4. Erzeugen Sie einen JavaScript-Code, der in einer Zeichenkette alle Leerzeichen durch %20 ersetzt.





1    Siehe Beispiel: 7 Modulo 4 liefert 3, weil 7 bei der Division durch 4 den Rest 3 lässt. Analog ist beispielsweise 11 Modulo 4 auch 3.

2    Bei den Ur-Versionen von BASIC wurde jede Programmzeile anhand ihrer Nummer identifiziert. Schleifen gab es nur in sehr eingeschränkter Form, sodass einer der häufigsten Befehle GOTO hieß, mit dem eine Zeilennummer direkt angesprungen werden konnte. Dadurch wurde der Quellcode sehr unübersichtlich und auch unsauber.

  

JavaScript

jQuery

Einstieg in JavaScript

Responsive Webdesign

Suchmaschi-
nen-Optimie-
rung




Copyright © Rheinwerk Verlag GmbH 2001 - 2002
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken und speichern. Ansonsten unterliegt das <openbook> denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
Die Veröffentlichung der Inhalte oder Teilen davon bedarf der ausdrücklichen schriftlichen Genehmigung der Rheinwerk Verlag GmbH. Falls Sie Interesse daran haben sollten, die Inhalte auf Ihrer Website oder einer CD anzubieten, melden Sie sich bitte bei: >> Zum Feedback-Formular


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, fon: 0228.42150.0, fax 0228.42150.77, service@rheinwerk-verlag.de