Anzeige
Tutorialbeschreibung

Javascript und Ajax - Programmieren mit JavaScript

Javascript und Ajax - Programmieren mit JavaScript

In diesem Kapitel wird mit dem Programmieren angefangen. Variablen, Operatoren, Schleifen und viel mehr wird dir hier nähergbracht.


Das nun folgende Tutorial ist ein Auszug aus der 7. Auflage des Buches: JavaScript und Ajax von Christian Wenz.

Kapitel 4 Programmieren mit JavaScript

In diesem Kapitel lernen Sie die Grundprinzipien der Programmierung an sich und der Programmierung mit JavaScript im Besonderen kennen. 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. Allerdings sind die Erklärungen recht knapp gehalten, und nur das Nötigste wird hierzu erläutert. Schließlich geht es ja darum, möglichst schnell brauchbare Anwendungen zu schreiben.


4.1 Variablen 
topBilder

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

 

4.1.1 Namensgebung  

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 ( _ ). Das erste Zeichen darf jedoch keine Ziffer sein. Außerdem wird zwischen Groß- und Kleinschreibung unterschieden. Die Bezeichner JavaScript, javascript und JAVASCRIPT sind also verschiedene Variablen. Beispiele für Variablennamen sind etwa:

gpBilder
 
 Galileo_Press
gpBilder
 
 GalileoPress
gpBilder
 
 Galileo2006
gpBilder
 
 _Galileo_

Unbrauchbar sind dagegen die folgenden Namen:

gpBilder
 
 1Galileo (beginnt mit einer Ziffer)
gpBilder
 
 Galileo Press (Leerzeichen)
gpBilder
 
 Galileo-Press (Bindestrich)
gpBilder
 
 GalileoPräsenz (Umlaut)

JavaScript-Schlüsselwörter und -begriffe dürfen Sie nicht als Variablennamen verwenden. Ein Beispiel hierfür ist etwa alert, das Sie im vorigen 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).

 

4.1.2 Numerische Variablen  

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

Pi = 3.14159265;
Mauerfall = 1989;
MinusHundert = –100;

 


 

4.1.3 Zeichenketten  

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 oder PHP 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.

Buchthema = "JavaScript";
AnderesBuchthema = 'ActionScript';

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 müssen Sie die andere Sorte von Anführungszeichen verwenden:

RalfMoellerSagt = "Who's next?!";

Wenn man aber beispielsweise beide Arten von Anführungszeichen in einer Zeichenkette verwenden muss, kommt man in Schwierigkeiten. Hier hilft der Backslash () weiter. Das Zeichen, das dem Backslash folgt, 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.

RalfMoellerSagt = 'Who's next?!';

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. Die folgende Tabelle zeigt eine Übersicht:

 

Tabelle 4.1     Sonderzeichen innerhalb von Zeichenketten

Ausdruck Bedeutung
  Wagenrücklauf
  Neue Zeile
  Tabulator
Backspace (Löschtaste)
f Seitenvorschub

 

4.1.4 Boolesche Variablen  

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;
Ist2004einSchaltjahr = true;
Ist3000einSchaltjahr = false;

4.1.5 Variablendeklaration 
topBilder

Wie Sie bereits gesehen haben, 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 AnzahlAuflagen = 7;
// Die Planungen für die nächste Auflage laufen bereits
AnzahlAuflagen = 8;

Nicht so gut ist dagegen:

var AnzahlAuflagen = 7;
// Die Planungen für die nächste Auflage laufen bereits
var
AnzahlAuflagen = 8;

Der Grund: Bei der Verwendung von var wird die Variable neu initialisiert. Das heißt, die alte Variable wird gelöscht und eine neue Variable erstellt. Wenn die Variable aber bereits existiert, ist der Einsatz von var unnötig.

In diesem und auch in einigen anderen Beispielen in diesem Buch sind Programmzeilen, die gegenüber einem vorherigen Listing verändert wurden, durch Fettdruck hervorgehoben.

 

4.2 Operatoren 
topBilder

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.

 

4.2.1 Arithmetische Operatoren  

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 Abschnitt 9.7 finden Sie Techniken, wie man Zahlenvariablen als solche erkennen kann. Die folgende Tabelle zeigt alle arithmetischen Operatoren anhand eines Beispiels.

 

Tabelle 4.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)1 a = 7  % 4 3
- Negation b = 7 a = –b –7

 

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

AnzahlAuflagen = AnzahlAuflagen + 1;

Der Variablen AnzahlAuflagen wird als Wert der alte Wert dieser Variablen plus fünf zugewiesen. Der Wert der Variablen wird also de facto um eins 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:

gpBilder
 
 AnzahlAuflagen++ erhöht den Wert der Variablen um eins.
gpBilder
 
 AnzahlAuflagen-- verringert den Wert der Variablen um eins (etwa, wenn eine Auflage eingestampft werden müsste?!).

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 (des »alleinstehenden« Ausdrucks)

AnzahlAuflagen++;

hat zunächst denselben Effekt (nämlich: Erhöhung um 1) wie

++AnzahlAuflagen;

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

var Auflagen = 7;
var Anzahl = ++AnzahlAuflagen;
var Anzahl2 = AnzahlAuflagen++;

Welchen Wert hat Anzahl, welchen Wert hat Anzahl2?

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

var Anzahl = ++AnzahlAuflagen;

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

Bei der dritten Zeile ist es genau andersherum:

var Anzahl2 = AnzahlAuflagen++;

Zuerst wird der Variablen Anzahl2 der (aktuelle) Wert von AnzahlAuflagen zugewiesen, dann wird der Wert von AnzahlAuflagen 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 4.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: Punktrechnung geht vor Strichrechnung. Multiplikationen und Divisionen werden also vor Additionen und Subtraktionen ausgeführt. Der folgende Ausdruck liefert daher 7 und nicht 9:

var PunktVorStrich = 1 + 2 * 3;


4.2.2 Boolesche Operatoren  

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 hier explizit vorgestellt.

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

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«: Das Ergebnis ist nur dann 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

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

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 – zumindest die existierenden Implementierungen – benutzt hier das Prinzip der so genannten Short Evaluation (wörtlich: kurze Auswertung). 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 nicht weiter ausgewertet.

Hier ein Beispiel:

var f = false;
var bool = f && andereVariable;

Auf andereVariable wird hier gar nicht erst zugegriffen: Die Variable f ist false, damit kann die &&-Verknüpfung (logisches Und) nur false als Ergebnis haben.

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 4.4     Vergleichsoperatoren

Operator Beschreibung Beispiel Ergebnis (Wert für a)
== Gleich a = (3 == 4) a = ("Java" == "JavaScript") false
!= Ungleich a = (3 != 4) a = ("Java" != "JavaScript") 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

 

Eine häufige Fehlerquelle ist die 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.


4.2.3 String-Operatoren  

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

var vorne = "Galileo";
var hinten = "Press";
var Verlag = vorne + " " + hinten;  //liefert "Galileo Press"

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

gpBilder
 
Zeichenkette.length: Liefert die Anzahl der Zeichen in einer Zeichenkette zurück.
gpBilder
 
Zeichenkette.charAt(x): Liefert das Zeichen an der 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).
gpBilder
 
Zeichenkette.substring(start, ende): Liefert eine Teilzeichenkette zurück, und zwar ab dem Zeichen an der Position start (die 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 = "Galileo press";
var a = z.charAt(0);  //a == "G"
var b = z.substring(1, z.length);  //b == "alileo Press"


4.2.4 Umwandlung zwischen den Variablentypen 
topBilder

Die vorgestellten Operatoren können auch dazu verwendet werden, Umwandlungen zwischen den einzelnen Variablentypen durchzuführen. 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, so dass 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 eine 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 AnzahlAuflagen = "7";
AnzahlAuflagen *= 1;  //Zeichenkette in Zahl
var wahrheitswert = true;
wahrheitswert += "";  //Wahrheitswert in Zeichenkette
var Anzahl = 8;
Anzahl += "";  //Zahl in Zeichenkette

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

var siebenundvierzig = "47";
var summe = siebenundvierzig + 11;  // "4711", nicht 58

JavaScript stellt auch ein paar Funktionen zur Verfügung, um Umwandlungen durchzuführen. Durch parseInt() wird eine Zeichenkette in eine (ganzzahlige) Zahl umgewandelt, durch parseFloat() in eine Fließkommazahl. Innerhalb der runden Klammern wird die Zeichenkette angegeben:

var zahl1 = parseInt("47");  //liefert 47 als Zahl
var zahl2 = parseInt("47.11");  //liefert 47,11 dezimal

Hierauf gehen wir an späterer Stelle noch einmal en detail ein.

 

4.3 Kontrollstrukturen: Schleifen 
topBilder

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.


4.3.1 For-Schleifen  

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:

gpBilder
 
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.
gpBilder
 
Bedingung: Die for-Schleife wird so lange ausgeführt, bis diese Bedingung nicht mehr erfüllt ist.
gpBilder
 
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. Generell ist es aber empfehlenswert, immer geschweifte Klammern zu verwenden.

Der folgende Code gibt zehnmal Galileo 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("Galileo<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 angeben sollten, sondern mit dem entsprechenden HTML-Tag, <br/>.

Wie bereits erwähnt wurde, kann man auch mehrere Zählvariablen verwenden, die man dann durch Kommata voneinander trennen muss. Anwendungen dafür 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=0, j=""; j.length<=15; i++, j += i) {
   document.write(i + " – " + j + "<br />");
}

Dieses Programm gibt Folgendes auf dem Bildschirm aus:

0 –
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.


4.3.2 Do-while-Schleife  

Nicht immer weiß man, wie oft ein Anweisungsblock hintereinander ausgeführt werden soll. Stattdessen 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 der Teilstring nicht in der Zeichenkette enthalten, wird –1 zurückgegeben. Das erste Zeichen steht, wie auch schon vorher, an Position 0.

Die Syntax sieht wie folgt aus:

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 wird wieder die Bedingung geprüft); andernfalls wird die Schleife verlassen.

var Zk = "AXAYAZ";  //Zk steht für "Zeichenkette"
do {
   io = Zk.indexOf("A");
   Zk = Zk.substring(0, io) + "B" +
        Zk.substring(io+1, Zk.length);
} while (Zk.indexOf("A")>-1);

Nach dem Durchlauf enthält Zk 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 diesen Fehler zu vermeiden.

Noch ein Wort zu der Zuweisung: Wenn Sie bei einer Zeichenkette z das Zeichen an der Stelle x in das Zeichen X ändern wollen (die 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 bleiben durch die beiden substring()-Anweisungen erhalten.


4.3.3 While-Schleife  

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 hier vor dem Durchlaufen des Anweisungsblocks überprüft. Im Beispiel von oben, bei 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 Zk = "AXAYAZ"  //Zk steht für "Zeichenkette"
while (Zk.indexOf("A")>-1) {
   io = Zk.indexOf("A")
   Zk = Zk.substring(0, io) + "B" + Zk.substring(io+1, Zk.length)
}


4.3.4 For-in-Schleife  

Diese Schleife wird recht selten verwendet, und an dieser Stelle fehlt Ihnen noch das Grundwissen über Objekte, um Ihnen eine ausreichende Erklärung geben zu können. Prinzipiell sei gesagt, dass man mit der Schleife durch alle Eigenschaften eines Objekts und alle Elemente einer Variablensammlung (eines Arrays, dazu später mehr) laufen kann. Die folgende Schleife gibt das name-Attribut aller Elemente eines Formulars wieder. Spätestens in Kapitel 9 werden Sie diesen Code verstehen; vorerst aber müssen Sie mir leider blind vertrauen. Die for-in-Schleifen werden ohnehin sehr selten eingesetzt.

for (e in document.forms[0].elements) {
   document.write(e.name + "<br />")
}


4.3.5 Schleifensteuerung 
topBilder

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 darauf gehen wir an dieser Stelle nicht ein). 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 den Rest der Schleife aus Effizienzgründen nicht ausführen lassen will. Der entsprechende Befehl heißt continue.

Wieder ist es leider so, dass Ihr momentanes Wissen noch nicht ausreicht, um hier ein sinnvolles Beispiel anzugeben. Am Ende des Kapitels werden Sie aber in der Lage sein, die Befehle break und continue einzusetzen.

 

4.4 Kontrollstrukturen: Fallunterscheidung 
topBilder

Eines der Hauptelemente aller JavaScript-Programme ist die Fallunterscheidung. Schon im vorigen Kapitel haben Sie gesehen, dass man mit den bereits vorgestellten Mitteln schnell an seine Grenzen stößt.


4.4.1 If-Anweisung  

Gehen wir zu dem Beispiel zurück, in dem alle As durch Bs ersetzt werden sollen. Mit einer while-Schleife geht das, aber bei einer do-while-Schleife hatten wir das Problem, dass eine Fehlermeldung erscheint, wenn die Zeichenkette von Anfang an kein A enthält. Der Code sah folgendermaßen aus:

var Zk = "AXAYAZ";  //Zk steht für "Zeichenkette"
do {
   io = Zk.indexOf("A");
   Zk = Zk.substring(0, io) + "B" +
        Zk.substring(io+1, Zk.length);
} while (Zk.indexOf("A")>-1);

Wenn man die Möglichkeit hätte, innerhalb der Schleife zu überprüfen, ob die Zeichenkette noch ein A enthält, hätte man kein Problem. Natürlich gibt es eine solche Möglichkeit. Man bedient sich einer if-Anweisung oder einer if-else-Anweisung.

Die Syntax sieht folgendermaßen aus:

if (Bedingung) {
   //Anweisungsblock
} else {
   //Anweisungsblock
}

Ist die Bedingung erfüllt, wird der erste Anweisungsblock ausgeführt; falls nicht, wird der zweite Anweisungsblock ausgeführt. Der else-Teil ist hier optional, und wieder können die geschweiften Klammern weggelassen werden, wenn der Anweisungsblock aus genau einer Anweisung besteht.

Wenn der erste Anweisungsblock keine geschweiften Klammern enthält und das else in derselben Zeile steht, muss die Anweisung mit einem Semikolon beendet werden. Falsch ist also:

if (a==5) b=6 else c=7

Richtig ist dagegen:

if (a==5) b=6; else c=7

Am wenigsten Probleme haben Sie freilich, wenn Sie prinzipiell jede Anweisung durch ein Semikolon abschließen.

Bei einer if-Anweisung ist die Gefahr besonders groß, dass statt des Gleichheitsoperators == die Zuweisung = verwendet wird. Achten Sie hier besonders auf die Syntax!

Aber zurück zum Beispiel. Es gibt hier mehrere Möglichkeiten. Die Überprüfung, ob die Zeichenkette ein A enthält, ist recht einfach darzustellen, und bei den Konsequenzen hat man die Wahl. Nahe liegend ist die folgende Variante:

var Zk = "AXAYAZ";  //Zk steht für "Zeichenkette"
do {
   io = Zk.indexOf("A");
   if (io > –1) {
      Zk = Zk.substring(0, io) + "B" +
           Zk.substring(io+1, Zk.length);
   }
} while (Zk.indexOf("A")>-1);

Man kann auch bei Bedarf die Schleife einfach verlassen:

var Zk = "AXAYAZ";  //Zk steht für "Zeichenkette"
do {
   io = Zk.indexOf("A");
   if (io==-1) {
      break;
   }
   Zk = Zk.substring(0, io) + "B" +
        Zk.substring(io+1, Zk.length);
} while (Zk.indexOf("A")>-1);

Dann braucht man die while-Bedingung aber gar nicht mehr und könnte beispielsweise folgende Variante verwenden:

var Zk = "AXAYAZ";  //Zk steht für "Zeichenkette"
do {
   io = Zk.indexOf("A");
   if (io==-1) {
      break;
   }
   Zk.charAt(io) = "B";
} while (true);

Die Bedingung true ist immer erfüllt, der Anweisungsblock kann also nur durch ein break verlassen werden. Ob der Programmierstil des obigen Beispiels besonders gut ist, steht auf einem völlig anderen Blatt.

Es gibt noch eine besondere, verkürzte Variante der if-else-Anweisung. Sie hat folgende Syntax:

(Bedingung) ? Wert1 : Wert2

Ist die Bedingung erfüllt, ihr Wert also true, so wird Wert1 zurückgegeben, ansonsten Wert2. Meistens wird diese Schreibweise bei einer Variablenzuweisung verwendet, also in der Form:

var Figur = (Essen=="Honig") ? "Pooh" : "Tigger";

Es gibt somit eine weitere Möglichkeit, in einer Zeichenkette alle As durch Bs zu ersetzen, indem alle Zeichen überprüft und gegebenenfalls ersetzt werden. Auch hier gibt es mehrere Möglichkeiten, um das Ganze auszuprogrammieren, aber unter Verwendung der gerade vorgestellten Kurzschreibweise bietet sich die folgende Variante an:

var Zk = "AXAYAZ";  //Zk steht für "Zeichenkette"
for (var i=0; i<Zk.length; i++) {
ca = Zk.charAt(i); ca = (ca=="A") ? "B" : ca; Zk = Zk.substring(0, i) + ca + Zk.substring(i+1, Zk.length);
}

Ausgeschrieben hätte das Beispiel die folgende, etwas längere Form:

var Zk = "AXAYAZ";  //Zk steht für "Zeichenkette"
for (var i=0; i<Zk.length; i++) {
   ca = Zk.charAt(i);
   if (ca=="A") {
      ca = "B";
   }
   Zk = Zk.substring(0, i) + ca +
        Zk.substring(i+1, Zk.length);
}

Die letzte – und einfachste – Möglichkeit, in einer Zeichenkette Zeichen auszutauschen, besteht in der Verwendung des Spezialkommandos replace(). Innerhalb der runden Klammern geben Sie zunächst die Zeichenkette, nach der gesucht werden soll, und dann die Ersatzzeichenkette an. Das sieht dann so aus:

zar Zk = "AXAYAZ";  //Zk steht für "Zeichenkette"
Zk.replace("A", "B");

Mit Fallunterscheidungen hat das freilich wenig zu tun, weswegen wir diesen kleinen Exkurs auch sofort wieder beenden.


4.4.2 Switch-Anweisung  

Die Aufgabenstellung klingt einfach: In einer Variablen steht die Nummer eines Monats. Das Programm soll den Namen des Monats ausgeben. Mit if-Anweisungen kann das Ganze folgendermaßen erledigt werden:

if (monat == 1) {
   document.write("Januar");
}
if (monat == 2) {
   document.write("Februar");
}
if (monat == 3) {
   document.write("März");
}
if (monat == 4) {
   document.write("April");
}
if (monat == 5) {
   document.write("Mai");
}
if (monat == 6) {
   document.write("Juni");
}
if (monat == 7) {
   document.write("Juli");
}
if (monat == 8) {
   document.write("August");
}
if (monat == 9) {
   document.write("September");
}
if (monat == 10) {
   document.write("Oktober");
}
if (monat == 11) {
   document.write("November");
}
if (monat == 12) {
   document.write("Dezember");
}

Dieses Beispiel hat wenigstens den Vorteil, dass man keine else-Zweige verwenden muss, dann würde nämlich der obige Code noch viel unübersichtlicher werden. JavaScript kennt jedoch ein Sprachfeature, mit dem der Code etwas übersichtlicher gestaltet werden kann. Es hat folgende Syntax:

switch (Ausdruck) {
   case Wert1:
      //Programmblock
      break;
   case Wert2:
      //Programmblock
      break;
   //usw.
   default:
      //Programmblock
}

Hierbei dreht sich alles um den Ausdruck, der in der Regel eine Variable ist. Hat dieser Ausdruck den Wert Wert1, wird der erste Programmblock ausgeführt, bei Wert2 der zweite Programmblock und so weiter. Der default-Abschnitt wird ausgeführt, wenn keiner der vorherigen Werte zutrifft. Dieser Abschnitt ist optional. Jeder Programmblock sollte mit dem Kommando break abgeschlossen werden, denn ansonsten führt der JavaScript-Interpreter alle Anweisungen bis zum nächsten break oder dem Ende des switch-Blocks aus – inklusive etwaiger anderer case-Anweisungen, die nicht zutreffen!

Das Beispiel mit den Monaten lässt sich folgendermaßen umformulieren, und der Code ist deutlich kürzer und übersichtlicher:

var monat = (new Date()).getMonth() + 1;

switch (monat) {
   case 1: var m = "Januar"; break;
   case 2: var m = "Februar"; break;
   case 3: var m = "März"; break;
   case 4: var m = "April"; break;
   case 5: var m = "Mai"; break;
   case 6: var m = "Juni"; break;
   case 7: var m = "Juli"; break;
   case 8: var m = "August"; break;
   case 9: var m = "September"; break;
   case 10: var m = "Oktober"; break;
   case 11: var m = "November"; break;
   case 12: var m = "Dezember"; break;
   default: var m = "Unbekannter Monat";
}
document.write(m);

Beachten Sie die erste Zeile, die etwas Unbekanntes enthält; in dieser Anweisung wird die Nummer des aktuellen Monats in der Variablen monat abgelegt. Dies dient hier lediglich dazu, dass Sie das Listing auch testen können. Auf Datumswerte gehen wir im nächsten Kapitel ein.

Bei der Programmiersprache Perl beispielsweise gibt es kein switch, es muss dort mühsam durch andere Sprachkonstrukte »emuliert« werden. Aber die meisten anderen Programmiersprachen kennen switch, nur heißt es unter Umständen anders, beispielsweise in Visual Basic/VBScript/VB.NET/Visual Basic 2005 Select Case.


4.4.3 Try 
topBilder

Eine besondere Form der Kontrollstruktur ist try...catch. Damit können Sie Fehler abfangen. Hier ist der Aufbau:

try {
   // Block 1
} catch (ex) {
   // Block 2
}

Wenn in Block 1 ein Fehler auftritt, bricht JavaScript die Code-Ausführung nicht ab, sondern springt direkt in Block 2. Hier ein Beispiel:

try {
   window.gibtsnicht.gibtsauchnicht = true;
} catch (ex) {
   window.alert("Hoppla!");
}

Die Variable ex (Namensgebung beliebig) enthält die Exception, also Ausnahme (Fehler), die aufgetreten ist. Der folgende Code würde die Fehlermeldung ausgeben:

try {
   window.gibtsnicht.gibtsauchnicht = true;
} catch (ex) {
   window.alert(ex);
}

Im vorliegenden Fall wäre die Meldung übrigens: window.gibtsnicht has no properties.

Der Wert dieser Exception kann auch gesetzt werden. JavaScript unterstützt hier das Spezialkonstrukt throw, das eine selbst kreierte Fehlermeldung ausspuckt. Die Syntax ist etwas gewöhnungsbedürftig: Keine Klammern, lediglich Leerzeichen:

try {
   throw "Meine eigene Fehlermeldung";
} catch (ex) {
   window.alert(ex);
}

Das Konstrukt try...catch wurde in JavaScript 1.5 eingeführt, wird aber von allen modernen Browsern unterstützt.

 

4.5 Datenspeicherung  

Wenn man viele Variablen braucht oder nicht genau weiß, wie viele Variablen man benötigt, ist das Konzept der Standardvariablen nicht flexibel genug. Beispielsweise sollte man sich bei der Benennung der Variablen schon vorher ein Konzept zurechtlegen, um effizient auf die Variablen zuzugreifen. In diesem Abschnitt werden zwei Möglichkeiten vorgestellt, um mehrere Variablen zu speichern.


4.5.1 Die eval()-Funktion  

Wieder einmal sollen die Monatsnamen gespeichert werden. Anhand der Nummer des Monats soll auf den Monatsnamen zugegriffen werden. Der Variablenname setzt sich aus dem Wort »Monat« und der Zahl zusammen. Die Variablendeklaration sieht also folgendermaßen aus:

var monat1 = "Januar";
var monat2 = "Februar";
var monat3 = "März";
var monat4 = "April";
var monat5 = "Mai";
var monat6 = "Juni";
var monat7 = "Juli";
var monat8 = "August";
var monat9 = "September";
var monat10 = "Oktober";
var monat11 = "November";
var monat12 = "Dezember";

Die Frage lautet nun: Wenn (beispielsweise in einer Variablen) die Monatsnummer vorliegt, wie erhält man dann daraus den Monatsnamen? Natürlich kann man eine Reihe von if-Anweisungen oder die switch-Anweisung verwenden. Schön wäre es jedoch, wenn man direkt den Variablennamen verwenden könnte. Folgender Code funktioniert natürlich nicht wie beabsichtigt:

document.write("monat" + m);

In der JavaScript-Variablen m steht die Monatsnummer, aber obige Zeile würde die Zeichenkette "Monat", verkettet mit der Monatsnummer, ausgeben, also den Namen der Variablen (etwa "monat3" im März), nicht die Variable selbst. JavaScript bietet eine besondere Funktion, die es ermöglicht, Code auszuführen, der als Zeichenkette vorliegt. Diese Funktion heißt eval(). Als Parameter wird eine Zeichenkette übergeben, und eval() führt den JavaScript-Code aus, der in der Zeichenkette steht. Der folgende Aufruf gibt den Wert der Variablen zurück, nicht ihren Namen:

eval("monat" + m);

Will man also den Monatsnamen auf dem Bildschirm ausgeben, kann man folgende Zeile verwenden:

document.write(eval("monat" + m));

Alternativ dazu kann der document.write()-Befehl auch innerhalb der eval()-Klammern geschrieben werden:

eval("document.write(monat" + m + ")");

Steht in der Variablen m beispielsweise der Wert 3, so würde der eval()-Befehl nach dem Einsetzen der Variablen folgendermaßen aussehen:

eval("document.write(monat3)");

Und das ist genau das, was wir erreichen wollten: Der Wert der Variablen monat3 soll ausgegeben werden.

Wenn in der Anweisung, die als Parameter an eval() übergeben wird, Anführungszeichen vorkommen, müssen Sie die herkömmlichen Regeln beachten, also entweder andere Anführungszeichen verwenden oder Anführungszeichen mit einem Backslash entwerten. Oft ist es jedoch sinnvoll, den Aufruf von eval() möglichst weit innen zu platzieren.

document.write("Der Monatsname lautet "+eval("monat" + m));


4.5.2 Arrays 
topBilder

Die obige Vorgehensweise funktioniert zwar tadellos, ist aber kompliziert, und auch hier werden die Befehle schnell unübersichtlich. In der Praxis werden zumeist so genannte Arrays verwendet. Das sind Variablencontainer, die mehrere Variablen enthalten können. Auf eine einzelne Variable im Container greift man über den Variablennamen und eine Nummer zu. Die Nummer nennt man auch Index. Standardmäßig wird ein Array in JavaScript folgendermaßen definiert:

var a = new Array();
a[1] = "Januar";
a[2] = "Februar;
//usw.

Mit der ersten Zeile, var a = new Array(), wird eine Array-Variable deklariert. Sie können auch Parameter angeben:

gpBilder
 
Mit einem Parameter geben Sie an, wie viele Array-Elemente zunächst vorgesehen sind. (JavaScript erlaubt es aber, Arrays je nach Bedarf kleiner oder größer zu machen.)
gpBilder
 
Mit mehreren Parametern geben Sie Werte an, die standardmäßig im Array liegen sollen: var a = new Array("Januar", "Februar", "März");

Der Index, über den auf ein Array-Element zugegriffen wird, steht in eckigen Klammern. JavaScript-Arrays beginnen, wie in vielen anderen Programmiersprachen und in Java übrigens auch, mit 0. Mit obigem Aufruf würde also a[2] auf März gesetzt. Sie müssten die Anweisung folgendermaßen modifizieren, damit a[3] den Wert "März" enthält:

var a = new Array("", "Januar", "Februar", "März");

Eine ganz besondere Kurzform für Arrays gibt es auch – eckige Klammern:

var a = ["Januar", "Februar", "März"];

Sie geben also nur die eckigen Klammern und die Werte an – das spart immerhin ein paar Zeichen. In Kapitel 18 werden Sie diese Kurzform wiederfinden, unter dem Namen JSON.

 

4.6 Funktionen 
topBilder
topBilder

In diesem Kapitel wird document.write() ziemlich oft eingesetzt. Oft enthält die auszugebende Zeichenkette noch HTML-Tags. Bei manchen davon (etwa <script>) kommen einige Browser durcheinander. Abhilfe schaffen Sie hier, indem Sie nicht das gesamte Tag verwenden, sondern zumindest die spitzen Klammern als einzelne Zeichenketten behandeln und diese dann mit dem Plus-Operator verketten (hier vereinfacht am Beispiel des <p>-Tags):

document.write("<"+"p"+">" + "Galileo Press" + "<"+"/p"+">")

Bei vielen Anweisungen ist das recht aufwändig; vor allem die Tipparbeit verlangt viel Zeit und Konzentration. Hier (und noch in vielen anderen Situationen) kann man sich mit Funktionen behelfen. Unter einer Funktion versteht man einen Programmblock, der nicht sofort ausgeführt wird, aber explizit auf- bzw. abgerufen werden kann. So eine Funktion führt entweder ein paar Befehle aus (dann nennt man sie mitunter auch eine Prozedur), oder es wird ein Wert zurückgegeben. Eine Prozedur ist mit document.write() vergleichbar, während eine Funktion beispielsweise Zeichenkette.length entspricht.

Eine Funktion hat folgende Syntax:

function Funktionsname(Parameter1, Parameter2) {
   //Programmblock
   return Wert;
}

Die Anzahl der Parameter ist beliebig. Es kann auch kein Parameter verwendet werden (dann ist die Klammer leer). Innerhalb der Funktion können die Parameter dann unter dem Namen angesprochen werden, unter dem sie im Funktionskopf eingeführt wurden.

Die Zeile mit dem return ist optional. Der Befehl return sorgt dafür, dass die Funktion sofort verlassen wird (wie break). Wird hinter dem return ein Wert angegeben, so ist dieser der Rückgabewert der Funktion.

TippAus optischen Gründen sollten Sie sich bemühen, return durchgängig zu verwenden (wenn Sie es denn einsetzen). Tritt also in einem Zweig einer if-Abfrage eine return-Anweisung auf, sollten möglichst auch alle anderen Zweige mit return verlassen werden:

function Funktionsname(Parameter1, Parameter2) {
   if (variable == "irgendetwas") {
      return true;
   } else {
      return false;
   }
}

Im Gegensatz zu manchen anderen Programmiersprachen muss die Funktion nicht vor ihrem ersten Aufruf deklariert werden. Erkennt der JavaScript-Interpreter, dass ein Funktionsaufruf vorliegt, so wird das Dokument nach einer Funktion dieses Namens durchsucht.

Diese theoretische Einleitung soll anhand von praktischen Beispielen verdeutlicht werden. Prinzipiell geht es darum, dass an eine Funktion der Name eines Tags übergeben wird (beispielsweise "p" oder "span") und die Funktion dann entweder das Tag ausgibt (mit den dazugehörigen spitzen Klammern) oder das Tag als Zeichenkette zurückgibt. Somit wird auch das oben genannte Problem mit den spitzen Klammern gelöst.

Die erste Variante gibt das entsprechende Tag direkt mittels document .write() aus:

function tag_ausgeben(s) {
   document.write("<" + s + ">");
}
//Test-Aufruf
tag_ausgeben("p");
document.write("Galileo Press");
tag_ausgeben("/p");

In der zweiten Variante wird der return-Befehl verwendet. Die Funktion gibt also nichts direkt aus, sondern liefert einen Wert zurück, der dann im eigentlichen Programm weiterverwendet werden kann.

function tag(s) {
   return "<" + s + ">";
}
document.write(tag("p") + "Galileo Press" + tag("/p"));

Es sind noch zwei Fälle möglich:

gpBilder
 
Es werden weniger Parameter übergeben, als im Funktionsrumpf angegeben sind.
gpBilder
 
Es werden mehr Parameter übergeben, als im Funktionsrumpf angegeben sind.

Der erste Fall lässt sich recht schnell abhandeln. In diesem Fall hat der entsprechende Parameter den Wert null. Die Funktion tag() kann also erweitert werden, so dass eine leere Zeichenkette zurückgegeben wird, wenn kein Parameter übergeben worden ist:

function tag(s) {
   if (s == null) {
      return "";
   } else {
      return "<" + s + ">";
   }
}

Der zweite Fall ist nicht ganz so einfach. Die gute Nachricht vorweg: Alle Parameter, die an eine Funktion übergeben werden, sind in einem Array gespeichert. Es ist jedoch noch nicht offensichtlich, wie auf dieses Array zugegriffen werden kann. Der entsprechende Bezeichner heißt Funktionsname.arguments – und hier sehen Sie direkt, dass Sie keine reservierten Begriffe (etwa document, write etc.) als JavaScript-Funktionsnamen verwenden dürfen.

Die folgende Funktion gibt gleich eine ganze Liste von Tags aus. In einer for-Schleife wird das Array arguments durchlaufen, und alle Werte werden mit spitzen Klammern ausgegeben. Wie bereits oben angemerkt wurde, kann mit Arrayname.length die Anzahl der Elemente des Arrays bestimmt werden; in obigem Fall also Funktionsname.arguments. length!

function tag() {
   var returnstring = "";
   for (var i=0; i<tag.arguments.length; i++) {
      returnstring += "<" + tag.arguments[i] + ">";
   }
   return returnstring;
}

Der Aufruf

tag("p id='p1'", "span style='color: black;'", "b")

würde also folgende Zeichenkette als Ergebnis erhalten:

"<p id='1'><span style='color: black;'><b>"

Natürlich gibt es sinnvollere Einsatzgebiete für eine Funktion, als Workarounds für Browser-Bugs bereitzustellen. Kommen wir noch einmal zu Schleifen zurück. Es war ja immer etwas umständlich, ein Zeichen durch ein anderes auszutauschen. Mit einer Funktion kann man das Ganze etwas übersichtlicher gestalten:

function ersetzeZeichen(Zeichenkette, Position, Neu) {
   //Zeichenkette ist die betrachtete Zeichenkette.
   //Position ist die Position des Zeichens, das ersetzt
   //wird.
   //Neu ist das neue Zeichen.
   var neueZ = Zeichenkette.substring(0, Position);
   neueZ += Neu;
   neueZ += Zeichenkette.substring(Position+1,
      Zeichenkette.length);
   return neueZ;
}

Bei der Wahl der Variablennamen muss man Vorsicht walten lassen. Existiert die Variable auch außerhalb der Funktion, so wird keine neue Variable erzeugt, sondern auf die alte Variable zugegriffen. Umgekehrt kann man auf Variablen, die nur innerhalb einer Funktion auftreten, nicht von außen zugreifen. Man unterscheidet hier globale (außerhalb und innerhalb einer Funktion gültige) und lokale (nur innerhalb von Funktionen gültige) Variablen. Will man innerhalb einer Funktion eine lokale Variable erzeugen, deren Name schon an eine globale Variable vergeben ist, muss man der ersten Verwendung ein var voranstellen.

Folgendes Beispiel verdeutlicht das eben Gesagte:

var a=0;
var b=0;
function test() {
   a++;  //Zugriff auf globale Variable a
   var b=1;  //Neue lokale Variable. Sie
             //hat mit der globalen Variablen b nichts
             //zu tun
   var c=0;  //Neue lokale Variable
}

Funktionen können auch wie folgt definiert werden:

var ersetzeZeichen = function(Zeichenkette, Position, Neu) {
   var neueZ = Zeichenkette.substring(0, Position);
   neueZ += Neu;
   neueZ += Zeichenkette.substring(Position+1,
      Zeichenkette.length);
   return neueZ;
}

Danach können Sie die Funktion wie gehabt mit ersetzeZeichen() verwenden. Man spricht hier auch von anonymen Funktionen, denn nach function folgt kein Funktionsname. Später in diesem Buch werden Sie anonyme Funktionen das ein oder andere Mal einsetzen. Sie werden aber im weiteren Verlauf dieses Buches viele Anwendungsmöglichkeiten für Funktionen vorfinden; da wir erst am Anfang unserer JavaScript-Künste stehen, sind die Beispiele in diesem Kapitel besonders einfach gehalten.

 

4.7 Objekte 
topBilder
topBilder

JavaScript gehört zu den so genannten objektorientierten Programmiersprachen (oder, um genauer zu sein, zu den objektbasierten Sprachen). Das Konzept der objektorientierten Programmierung (OOP) wird im Folgenden sehr stark vereinfacht erklärt. Der interessierte oder vorgebildete Leser möge diese Vereinfachung verzeihen, aber für das Verständnis von JavaScript ist nur ein gewisser Überblick über das Konzept der Objektorientierung in JavaScript nötig.

In JavaScript ist (mit Ausnahme der Variablen) alles, worauf man zugreift, ein Objekt. Ein Objekt ist der Versuch, die reale Welt in eine Programmiersprachenumgebung abzubilden. Ein Standardbeispiel für Objekte ist etwa ein Auto. Das Auto an sich (als abstrakter Begriff) kann als Objekt angesehen werden, ein einzelnes Auto wird als Instanz des Objekts Auto bezeichnet. Sie haben so etwas in diesem Kapitel schon einmal gesehen – Array ist so ein Objekt, und mit new Array() wird eine Instanz des Array-Objekts, also ein konkretes Array erzeugt.

Ein Auto, oder ein Objekt im Allgemeinen, wird durch gewisse Parameter spezifiziert. Bei diesen unterscheidet man Methoden und Eigenschaften:

gpBilder
 
Eine Eigenschaft kann als Variable angesehen werden, also als ein Wert, der fest mit dem Objekt verbunden ist und gelesen und geschrieben (gesetzt) werden kann. Bei einem Auto ist das beispielsweise die aktuelle Geschwindigkeit oder die aktuelle Menge Benzin im Tank. Eine Eigenschaft kann mit einem Funktionsaufruf verglichen werden, der immer einen Wert zurückgibt.
gpBilder
 
Eine Methode ist eine Funktion, die ebenfalls fest mit dem Objekt verbunden ist. Im Gegensatz zur Eigenschaft wird hier aber nicht immer ein Wert zurückgegeben. Um auf das Auto-Beispiel zurückzukommen: Eine mögliche Methode wäre eine Methode vollbremsung(), die die (Eigenschaft) Geschwindigkeit abrupt auf 0 setzt. Eine andere Möglichkeit wäre eine Methode beschleunigen(); je nach Definition könnte man als Parameter angeben, auf welche Geschwindigkeit oder um wie viel Stundenkilometer die Geschwindigkeit erhöht werden soll. An der Schreibweise sieht man schon eine verwendete Konvention: Methoden werden immer durch nachgestellte Klammern gekennzeichnet. Dies soll verdeutlichen, dass es sich hier nicht um eine Eigenschaft, sondern um einen »echten« Funktionsaufruf handelt.

Wie Sie vielleicht schon bei den vorherigen Beispielen in diesem Kapitel gesehen haben, ruft man eine Eigenschaft oder eine Methode auf, indem man den Namen des entsprechenden Objekts nimmt und den Namen der Methode oder Eigenschaft mit einem Punkt anhängt. Methoden werden dabei immer mit Klammern geschrieben; sollen keine Parameter übergeben werden, so werden leere Klammern verwendet. Bei Eigenschaften werden keine Parameter übergeben. Um auf die vorherigen Beispiele zurückzukommen: document.write() ist eine Methode des document-Objekts, Arrayname.length ist eine Eigenschaft des Array-Objekts (wobei Arrayname dann eine Instanz des Array-Objekts wäre).

In den folgenden Kapiteln werden Sie nach und nach alle JavaScript-Objekte kennen lernen. Einige davon, wie beispielsweise das Array-Objekt, erleichtern die Programmierung, haben aber mit Webseiten nichts zu tun. Man kann von diesen Objekten Instanzen erzeugen und diese dann verwenden. Andere Objekte wiederum, wie beispielsweise die Objekte window, document oder location, haben dagegen direkt etwas mit der entsprechenden Webseite zu tun und enthalten beispielsweise Informationen über die URL der aktuellen Seite oder die Anzahl der Links im HTML-Dokument. In den nächsten Kapiteln werden diese Objekte an praxisnahen Beispielen vorgestellt.

Wenn Sie eigene Objekte erstellen möchten, sollten Sie Kapitel 13 lesen, dort wird dies an einem Beispiel durchexerziert. Im Praxiseinsatz werden Sie – vor allem bei »Standardaufgaben« – eher selten selbst Objekte erstellen, aber bei größeren Projekten ist das mitunter sehr nützlich.

Das Tutorial ist ein Auszug aus der 7. Auflage des Buches von Christian Wenz:

JavaScript und Ajax - Das umfassende Handbuch
Galileo Computing, 853 Seiten, 8. aktualisierte Auflage

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Galileo Press.

Mehr Informationen zum aktualisierten Fachbuch für Webentwickler gibt es hier: JavaScript und Ajax
 
Alle Kapitel des Buches:
1 Grundlagen
2 JavaScript-Praxis
3 Professionelles JavaScript
4 Web 2.0 und Ajax
5 Kommunikation
6 Serverseitige Programmierung
7 Sicherheit
8 Praxis
9 Anhang
Bilder


 

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Sedad
  • 10.01.2018 - 22:32

Danke !

Portrait von silv
  • 05.07.2009 - 13:48

danke für diesen workshop!

Portrait von skyflight1981
  • 31.03.2008 - 01:05

Super Sache mit Deinen Workshops!

x
×
×