Webprogrammierung

Javascript-Arrays im Griff

Die lokale Speicherung von Daten ist unter Javascript am besten mithilfe von Arrays zu realisieren. Wir zeigen Ihnen, was Sie dabei beachten sollten.

  1. Javascript-Arrays im Griff
  2. Arbeiten mit Arrays
  3. Mehrdimensionale Arrays
Internet, webdesign, arrays, javascript, programmierung

© Internet Magazin

Internet, webdesign, arrays, javascript, programmierung

Arrays dienen dazu, mehrere Werte in einer Liste unter einer Variable zu speichern, beispielsweise die Anzahl der Punkte eines jeden Fahrers in der laufenden Formel-1-Saison. Für den Zugriff auf die Daten verwenden Sie entweder den Index des Elements - dieser wird automatisch vergeben - oder alternativ einen beliebigen Namen. Zu jedem Array können Sie beliebig viele zusätzliche Elemente hinzufügen oder bestehende Daten aktualisieren.

Deklaration eines Arrays

Im Gegensatz zur Deklaration einer Variablen benötigen Sie bei der Definition eines Arrays einen Konstruktor. Das Erzeugen eines Arrays ist also ein zweistufiger Vorgang.

var f1_fahrer;
f1_fahrer = new Array();

So erzeugen Sie ein neues leeres Array - alternativ können Sie auch ein Array mit einer vordefinierten Anzahl von Elementen anlegen. Dafür geben Sie dem Array als Parameter die Anzahl der Elemente mit.

f1_fahrer = new Array(24);

Das Array hat somit Platz für alle 24 Fahrer der aktuellen Formel-1-Saison. Als dritte Variante geben Sie dem Array bei der Erzeugung bereits alle Werte mit.

f1_fahrer = new Array("Button",
"Hamilton", "Schumacher", "Rosberg",
"Vettel", "Webber",..., "Glock");

Zugriff auf die Elemente

Nachdem Sie ein Array erzeugt haben, greifen Sie am besten über den Index auf die einzelnen Elemente zu. Die Nummerierung beginnt dabei mit dem Zählerstand 0.

var f1_fahrer;
f1_fahrer = new Array("Button",
"Hamilton", "Schumacher", "Rosberg",
"Vettel", "Webber", "Glock");
alert(f1_fahrer[0]);
alert(f1_fahrer[1]);
...
alert(f1_fahrer[6]);

Weitere Array-Konstruktoren

Internet, webdesign, arrays, javascript, programmierung

© Internet Magazin

In einem zweistufigen Array speichern Sie zu einem Element mehrere Details, etwa den Punktestand und den Rennstall.

Daneben können Sie einem Array auch während des Programmablaufs Werte zuweisen. Dabei haben Sie die Auswahl zwischen einem Array mit einer vordefinierten Anzahl an Feldern und einem Array mit einer freien Anzahl. Im Array f1_motorleistung sollen die PS-Werte der Formel-1-Rennwagen gespeichert werden. Im Beispiel gibt es vier Motoren mit den PS-Stärken 760, 780, 805 und 810.

var f1_motorleistung = new Array(4);
f1_motorleistung[0] = 810;
f1_motorleistung[1] = 780;
f1_motorleistung[2] = 805;
f1_motorleistung[3] = 760;

In der dritten Variante sind weder die Anzahl der Elemente noch deren Werte bekannt. Sie legen ein undefiniertes Array an und speichern darin Ihre Daten.

var f1_rennstall = new Array();
f1_rennstall[0] = "Vodafone McLaren
Mercedes"
f1_rennstall[1] = "Mercedes GP
Petronas Formula One Team"
f1_rennstall[2] = "Red Bull Racing"
f1_rennstall[3] = "Scuderia Ferrari
Marlboro"

Das Array wird somit dynamisch erweitert und passt sich entsprechend an.

Zugriff auf die Array-Inhalte

Internet, webdesign, arrays, javascript, programmierung

© Internet Magazin

Beim Einsatz einer for-in-Schleife lassen Sie leere Array-Elemente aus.

Auf den Wert eines Elements innerhalb des Arrays greifen Sie, wie im obigen Beispiel gesehen, über den Namen des Arrays sowie dem entsprechenden Index zu. Mit diesem Wert können Sie direkt weiterarbeiten - beispielsweise weisen Sie diesen einer neuen Variable zu oder Sie geben den zugewiesenen Inhalt auf einer HTML-Seite aus.

document.write(f1_rennstall[3]);
var fuehrende = f1_rennstall[2];

Beim Zugriff auf ein Array-Element müssen Sie nicht zwingend eine Zahl mitgeben, eine Variable, der Sie zuvor den entsprechenden Index mitgegeben haben, ist ebenfalls ausreichend. Damit können Sie auf definierte äußere Faktoren reagieren.

var liste = new Array("Element1",
"Element2", "Element3");
var index;
var eingabe = "D";
switch (eingabe) {
case "A":
index = 0;
break;
case "B": case "D":
index = 1;
break;
case "C":
index = 2;
break;
}
document.write("Das Ergebnis lautet "
+ liste[index]);

Im Beispiel haben Sie ein Array mit drei Elementen. Basierend auf dem Wert von eingabe weisen Sie der Variablen index 0, 1 oder 2 zu. Dabei verweisen mehrere unterschiedliche Werte von eingabe auf das gleiche Array-Element. Mit diesem Ansatz können Sie die Ausgabe des Array-Werts mit nur einer Programmierzeile realisieren.

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…