Fortsetzung 2: Bausteine und Regeln der JavaScript-Syntax

Teil 3 von 3: Arrays, sonstige Syntaxmerkmale, häufige Fehler

Arrays

Arrays sind für komplexere JavaScript-Programmierungen unabdingbar. Daher ist es wichtig, Arrays zu verstehen. Ein Array ist einerseits vergleichbar mit einer Variablen und wird auch sehr ähnlich definiert, andererseits bestehen große Ähnlichkeiten zu einer (unsichtbaren)Tabelle. Ähnlich wie bei einer Variablen können Sie einem Array bestimmte Werte zuordnen. Um Unterschied zu einer Variablen wird in einem Array jedoch nicht nur ein Wert, sondern beliebig viele Werte gespeichert, die in einer Art Tabelle angeordnet sind, etwa folgendermaßen:

Indexnummer	0	1	2
Werte des Arrayfeldes	Feuer	Wasser	Erde

In obigem Beispiel sind Werte in einem sog. eindimensionalen Array (d.h. bestehend aus zwei "Tabellenreihen") gespeichert.

• In der ersten Reihe werden die sog. Indexnummern gespeichert. Die Zählung von Indexnummern beginnt in JavaScript mit 0. 0 bedeutet 1.Zelle, 1 bedeutet 2. Zelle, 2 bedeutet 3.Zelle. Etwas gewöhnungsbedürftig, zugegeben.
• In der zweiten Reihe werden die entsprechenden Werte der indizierten Felder gespeichert (bzw. Platz für deren Speicherung reserviert, sofern die Werte erst später zugeordnet werden, dies ist wie bei einer Variablen)

Ein Array ist ein unabhängiges JavaScript-Objekt (welches zu keinem anderen Objekt gehört). Es ist aber in der Regel nicht, wie z.B. das window-Objekt, das document-Objekt, oder das navigator-Objekt automatisch vorhanden, sobald eine html-Seite geladen ist, sondern muss meist neu geschaffen werden, damit man damit arbeiten kann. Klingt komplizierter als es ist, funktioniert aber ganz einfach:

var grundelemente=new Array("Feuer", "Erde", "Wasser");

Das Schlüsselwort new (ein sog. Constructor) definiert ein neues Array mit dem Namen elemente (dies ist gleichzeitig eine Art Variable). Unser Beispiel ist ein eindimensionales Array mit drei Spalten. Wir könnten beliebig viele Spalten durch Definition der Arrayfeldwerte anlegen, diese müssen durch Kommata getrennt sein.

Die Indexnummern für die Wertefelder des obigen Beispiels sind 0 (="Feuer"), 1 (="Erde"), 2 (="Wasser").

Wenn wir z.B. den Inhalt des Arrays in einer Hinweisbox ausgeben wollen, ergäben sich z.B. folgende Möglichkeiten:

alert (grundelemente[1]); ergäbe die Ausgabe des Textstrings: Erde

alert (grundelemente[0] + " und" + grundelemente[1]); ergäbe die Ausgabe des Textstrings: Feuer und Erde

Nun, das hätten wir natürlich auch mit einfachen Variablen erreichen können, aber es erläutert das Prinzip einfacher Arrays.

Statt der Indexnummern kann man den Array-Feldern auch Namen geben. Dann muss die Definition des Arrays aber ein bisschen anders aussehen. Obiges Array müsste folgendermaßen definiert werden:

var grundelemente= new Array();
grundelemente["heiss"]="Feuer";
grundelemente["fest"]="Erde";
grundelemente["fluessig"]="Wasser";

Die obigen beiden Ausgaben müssten dann folgendermaßen gestaltet werden:

alert (grundelemente["fest"]); ergäbe die Ausgabe des Textstrings: Erde

alert (grundelemente["heiss"] + " und" + grundelemente["fest"]); ergäbe die Ausgabe des Textstrings: Feuer und Erde

Automatisch vorhandene Arrays: Besonders wichtig zu wissen ist, dass viele html-Objekte auf einer html-Seite automatisch Arrays darstellen. So gibt es zum Beispiel ein Image-Objekt (welches dem document-Objekt untergeordnet ist, welches wiederum dem Window-Objekt untergeordnet ist). Dieses Image-Objekt wird angelegt, sofern nur wenigstens ein Bild auf einer html-Seite eingebettet ist (d.h. sobald JavaScript einem <img attribute>- Tag begegnet. Das Image-Objekt ist selbst ein Array, in dem alle Bilder gespeichert werden, die auf der Webseite eingebunden sind. Diese Bilder werden im Array mit Indexnummern durchnummeriert (von oben nach unten, mit 0 beginnend). Nehmen wir an, wir hätten drei Bilder. Diese drei Bilder könnten für JavaScript-Programmierung folgendermaßen angesprochen werden.

window.document.image[0]

window.document.image[1]

window.document.image[2]

Die Werte dieser Arrayfelder sind z.B. die jeweiligen Bildpfade (also das was unter src im <img>-Tag angegeben wird, z.B. bild1.jpg. src ist hier eine Eigenschaft des Image-Objektes, eben mit dem jeweilgen Wert)

Bilder können jedoch auch einen Namen haben (z.B. <img src="bild1.jpg" name="lieblingsbild">

Damit könnte obige Auflistung von Image-Array-Elementen auch folgendermaßen heißen:

window.document.image["lieblingsbild"]

window.document.image["mama"]

window.document.image["papa"]

Dies ist also ein Fall, in dem ein Array nicht über den Constructor new neu geschaffen wurde, sondern automatisch aufgrund des Inhalts der html-Seite angelegt wurde.

Hinweis: Über JavaScript kann auch ein sog. neues Image-Objekt geschaffen werden, auch hierzu verwendet man wiederum den Constructor new

z.B. var bilder=new Image();

Damit können z.B. zusätzliche, noch nicht in der html-Seite eingebettete Bilder vorgeladen werden und später auf der html-Seite via JavaScript ausgetauscht werden.

Hierzu ein Beispiel (beachten Sie meine Kommentare in rot).

<script language="JavaScript">
<!--
//jetzt wird ein neuer Array gebildet
var fotos=new Array("bild1.gif", "bild2.gif", "bild3.gif", "bild4.gif");
/*wir brauchen auch ein neues Image-Objekt, da nur ein Bild auf der
html-Seite eingebettet wird, die anderen des Arrays aber vorgeladen werden*/
var bilder=new Image();
/*wir benötigen eine Variable, die wir hochzählen können. Wir beginnen
bei -1, damit beim ersten Hochzählen diese Variable auf 0 steht, da die Arrayindexnummer unseres ersten Bildes ja auch 0 ist*/
var zahl=-1;
//hier definieren wir eine function bilderschau
function bilderschau()
{
/*zu Beginn der Funktionsabarbeitung wird unsere Variable Zahl
um 1 hochgezählt. Beim ersten Aufruf der Funktion steht sie damit auf
dem Zahlenwert 0, bei weiteren Funktionsaufrufen eben bei 1, 2, 3*/
zahl++;
/*nun wird das Bild aufgerufen mit dem src-Wert, der im Array fotos
an der durch die Variable zahl ausgedrückten Indexstelle steht.
Im Falle des ersten Funktionsaufrufes heisst dies für src: bild1.gif
da an Array-indexposition 0 dieser Pfad gespeichert ist*/
window.document.images[0].src=fotos[zahl];
/*wenn die variable Zahl auf 3 hochgezählt ist, d.h. foto-Array-
Indexposition 3 (enspricht bild4.gif) erreicht ist, definieren
wir die variable Zahl neu um und geben ihr wieder den Wert -1*/
if (zahl==3)
    {
    zahl=-1;
    }
/* hier verwenden wir eine neue Methode des window-Objektes,
nämlich setTimeout. Nach 3000 Millisekunden wird die funktion
bilderschau() erneut aufgerufen.*/
window.setTimeout ('bilderschau()', 3000);
}
-->
</script>
</head>
<!-- die function bilderschau wird über den onload-Handler gestartet -->
<body onload="bilderschau()">
....

Und hier nun das Ergebnis

Formular-Arrays: Hinweis: Arrays sind insbesondere auch für die Ansprache sog. Formulare und Formularelemente wichtig. Wir werden Formulare in Modul 9 behandeln. Sie bestehen im Prinzip aus einem <form> Tag, der Attribute, darunter auch das Attribut name haben kann (also z.B. <form name="formular1"> , Eingabeelementen (z.B. <input>, <select> und <textarea>-Tag, wiederum mit Attributen, darunter name) sowie Absende- und Cancel-Buttons mit entsprechenden Tags.
Alle Formulare einer html-Seite bilden automatisch ein Form-Array-Objekt, welches wie oben mit Indexnummern durchnummeriert werden kann oder über die Form-Namen angesprochen werden kann.
Innerhalb eines Formulars bilden alle sonstigen Elemente automatisch ein sog. elements-Array-Objekt, wobei alle Elemente mit Indexnummern durchnummeriert bzw. über die Elemente-Namen angesprochen werden können, z.B. window.document.form[2].elements[5]. Dies ist also ganz analog zu den Image-Arrays. In einigen nachfolgenden JS-Beispielen werden wir bereits teilweise Formulare bzw. deren entsprechene Arrays verwenden.

Mehrdimensionale Arrays: Arrays können nicht nur eindimensional sein, d.h. nur aus zwei Feldreihen bestehen (1. Indexnummern bzw. Namen, 2. Werte), sondern auch aus mehreren, also wie bei einer "richtigen" Tabelle. Man nennt sie dann zweidimensional. Sie können sogar mehrdimensional sein, dann werden z.B. einer Indexnummer nicht nur mehrere Zeileneinträge auf einer Tabelle sondern sogar auf mehreren Tabellen zugeordnet. Damit kann man bereits kleine relationale Datenbanken in JavaScript erstellen. Allerdings ist JavaScript für "echte" Datenbankanbindung nicht geeignet, wir werden hier bessere Möglichkeiten in Modul 9 kennenlernen. In JS-Level 3 werden wir aber noch kurz auf mehrdimensionale Arrays eingehen.

---

Wichtige sonstige Syntaxmerkmale:

Hinter Schleifenbedingungen (if, for, while,switch case) sowie hinter function-Definitionen steht kein Semikolon	Richtig: if (Bedingung) { Ausführung } function hallo()	Falsch: if (Bedingung); { Ausführung } function hallo();
Doppelklammern hinter functions, methoden oder Schleifenschlüsselwörtern können ein Leerzeichen vorangestellt haben oder nicht.	Beides möglich: function hallo() function hallo () alert("text"); alert ("text");
Geschweifte Klammern müssen für Funktionsabarbeitung geöffnet und wieder geschlossen werden. Für Schleifenabfragen müssen die einzelnen Schleifenbestandteile jeweils von geschweiften Klammern umschlossen sein. Prinzipiell kann der Skriptcode fortlaufend geschrieben werden, es ist aber sinnvoll Klammern, Methoden und Variablendefinitionen der Übersichtlichkeit halber jeweils in eine eigene Zeile zu schreiben. Am besten wird der Übersichtlichkeit halber auch noch hierarchisch ein- bzw. ausgerückt.	Beides möglich: if(Bedingung){Ausführung} if(Bedingung) { Ausführung }

---

Häufige Fehler

Wenn Sie nun beginnen, Ihre JavaScripte selbst zu schreiben bzw. vorhandene anzupassen, wird es möglicherweise passieren, dass die Skripte nicht laufen oder gar Ihr Testbrowser abstürzt, obwohl Sie sich sicher sind, dass Ihre Syntax stimmt. Nun, das mag vom Prinzip her richtig sein, aber noch ausgeprägter als bei html machen bei JavaScript nur kleinste Schreibfehler die größte Wirkung. Auchten Sie insbesondere auf Folgendes:

Verwenden Sie keine Umlaute, Sonderzeichen, Klammern, Leerzeichen, Satzzeichen oder ähnliches in Variablen-, Funktions- und Array-Namen. Underscore _ ist erlaubt, Ziffern können verwendet werden, sie dürfen jedoch nicht am Anfang stehen.


Beachten Sie die korrekte Groß- und Kleinschreibung. Eine Funktion definieren sie mit function, nicht mit Function (Function ist ein spezielles Objekt, wir meinen aber das Statement function). Auch wenn Sie Variablen-, Array- und Funktionsnamen definiert haben, müssen Sie die Groß-/Kleinschreibung beachten. Eine von Ihnen definierte function hallo() kann nur über hallo(), nicht über Hallo() aufgerufen werden.


Sonstige Schreibfehler: Schreiben Sie script, function etc., nicht etwa skript, funktion etc.


Semikolons: Achten Sie auf korrektes Setzen der Semikolons ; Sie stehen fast nach an jedem Zeilenende bzw. nach jeder Variablen- und Arraydefinition sowie nach jedem Methodenaufruf. Sie stehen aber nicht hinter Schleifenbedingungen und function-Definitionen (s.o.)


Geschweifte Klammern: Geöffnete Klammern müssen geschlossen werden (siehe oben). Die Klammern dienen insbesondere auch zur hierarchischen Verschachtelung von Skriptmethoden, insb. bei Schleifenabfragen.


Gänsefüßchen müssen ggf. hierarchisch verschachtelt werden. Verwenden Sie für eine Methode z.B. einen Textstring, muss dieser in normalen Gänsefüßchen stehen. Enthält dieser Textstring html-Code, der wiederum in Gänsefüßchen stehen muss, verwenden Sie dort einfache Gänsefüßchen.
Beispiel: window.document.write("Gleich kommt ein <a href='seite2.html'>link</a>");

---

weitere JavaScript-Beispiele zum Nachvollziehen finden sie unter 7.3.4