Mehrdimensionale Arrays
- Javascript-Arrays im Griff
- Arbeiten mit Arrays
- Mehrdimensionale Arrays
Der Zugriff erfolgt entweder direkt über einen expliziten Namen oder über eine for-in- Schleife. Dabei wählen Sie als ersten Parameter den Zähler und als zweiten das Array. Mithilfe des Zählers durchlaufen Sie dann alle Elemente des Arrays - bei dieser Methode wird der Name des Arrayelements im...
Der Zugriff erfolgt entweder direkt über einen expliziten Namen oder über eine for-in- Schleife. Dabei wählen Sie als ersten Parameter den Zähler und als zweiten das Array. Mithilfe des Zählers durchlaufen Sie dann alle Elemente des Arrays - bei dieser Methode wird der Name des Arrayelements im jeweiligen Schleifendurchlauf in dieser Variable hinterlegt und kann ebenfalls ausgewertet werden.
Mehrdimensionale Arrays
Benötigen Sie eine Möglichkeit, mehrere Werte zu einem Element zu speichern, bietet Ihnen Javascript die Option, diese als mehrdimensionale Arrays zu speichern. Dabei haben Sie nicht nur einen Zähler, sondern zusätzlich innerhalb eines jeden Elements noch einen zweiten. Bilden Sie dies rein über einen numerischen Schlüssel ab, sieht der Aufbau des ersten Elements wie folgt aus:
arrayname[0][0]
arrayname[0][1]
arrayname[0][2]
arrayname[0][3]
...Die bessere Übersicht behalten Sie hier auch wieder mit einer Kombination aus numerischem und sprechendem Schlüssel. Planen Sie beispielsweise die Speicherung von mehreren Informationen zu einer Person, dann wählen Sie den ersten Schlüssel als numerischen Wert und den Schlüssel für die zweite Dimension sprechend.Bei diesem Aufbau lässt sich beispielsweise zu einem Formel-1-Fahrer neben dem Namen und den aktuellen Punkten auch noch der Rennstall mit dazu ablegen. Beim Anlegen eines mehrdimensionalen Arrays müssen Sie für jede Dimension ein eigenes Array anlegen. Im folgenden Beispiel benötigen Sie für alle Formel-1-Fahrer ein Array und für die Wertesammlung eines jeden einzelnen Fahrers jeweils ein zweites.
var f1_fahrer;
f1_fahrer = new Array();
f1_fahrer[0] = new Array();
f1_fahrer[0]["Name"] = "Webber";
f1_fahrer[0]["Punkte"] = 93;
f1_fahrer[0]["Rennstall"] = "Red
Bull-Renault";
f1_fahrer[1] = new Array();
f1_fahrer[1]["Name"] = "Button";
f1_fahrer[1]["Punkte"] = 88;
f1_fahrer[1]["Rennstall"] =
"McLaren-Mercedes";
f1_fahrer[2] = new Array();
f1_fahrer[2]["Name"] = "Hamilton";
f1_fahrer[2]["Punkte"] = 84;
f1_fahrer[2]["Rennstall"] =
"McLaren-Mercedes";Der Zugriff auf die Daten erfolgt in einer Kombination aus for- und for-in-Schleife. Für den numerischen Teil der Schleife nutzen Sie eine for-Schleife und die Elemente der zweiten Dimension das for-in-Gegenstück.
for (var i=0, i_tmp=f1_fahrer.length;
i<i_tmp; i++) {
for (info in f1_fahrer[i]) {
document.write(info + " " + f1_
fahrer[i][info] + "<br>");
}
}Arrays spielen bei Javascript nicht nur bei Ihren eigenen Wertesammlungen eine Rolle, auch die Elemente einer HTML-Seite sind entsprechend abgelegt. Für diese speziellen Arrays wird auch der Begriff Collection verwendet. In einem solchen Array sind beispielsweise alle Bilder einer HTML-Seite oder alle Frames abgelegt. Für das folgende Beispiel nutzen wir eine HTML-Seite, auf der mehrere Bilder abgelegt sind und greifen auf die Collection document.images mithilfe der bekannten Techniken zu.
<head><title>Internet Magazin - Javascript
Array - Beispiel 11</title><script type="text/Javascript">
function array_abarbeiten() {
alert("Es gibt insgesamt " + document.
images.length + " Bilder auf der Web
site");
}</script></head><body onload = "array_abarbeiten()"><img src="rot.jpg" name="Rot"><img src="blau.jpg" name = "Blau"><img src="gruen.jpg" name = "Gruen"></body>Planen Sie, auf Elemente einer HTML-Seite zuzugreifen, ist dies erst möglich, wenn alle geladen sind. Dazu dient das Ereignis body onload, das nach der vollständigen Darstellung aller HTML-Inhalte ausgelöst wird. Versuchen Sie ohne dieses Ereignis zu arbeiten und direkt auf die Elemente aus dem <head>-Teil heraus zuzugreifen, erhalten Sie eine Fehlermeldung, da diese noch nicht erzeugt sind.Auf die einzelnen Bilder greifen Sie über den fortlaufenden Index zu, etwa um den Namen auszugeben. Dazu erweitern Sie das Beispiel um eine for-Schleife:
for (var i=0, i1 = document.images.
length; i<i1; i++) {
alert(document.images[i].name);
}In dieser werden nacheinander die einzelnen Bildelemente aufgerufen, anschließend wird der jeweilige Namen in einem Popup- Fenster ausgegeben.
