Arrays
Komode mit Schubladen
Ein Array ist eine Schublade voller Variablen. Eine Komode mit mehreren Schubladen voller Variablen nennt man einen mehrdimensionalen Array. Jede Variable hat eine Nummer oder einen Namen [index]. Die Nummerierung beginnt immer mit Null, die erste Variable heisst also [0]. Arrays mit Variablennamen nennt man assoziative Arrays. Der Array selbst hat natürlich auch einen Namen.
Einfacher Array
new Array()
<script type="text/javascript">
var buch = new Array(); // Array wird angelegt
buch[0] = "Heidi"; // und gefüllt
buch[1] = "Duden";
buch[2] = "Also sprach Zarathustra";
buch[3] = "Guliver";
function zeigsmir() {
alert("Es sind " +buch.length+ " Bücher im Array.\nDas 3. Buch heisst:\n"+buch[2]);
}
</script>
Aufruf der Funktion: <a href="#" onmouseover="zeigsmir()">Zeige das Buch</a>
Mehrdimensionaler Array
Dieses JavaScript zeigt den Aufbau eines mehrdimensionalen Arrays am Beispiel einer kleinen Personenkartei.
Die Komode heisst kartei, die Schubladen sind durchnummeriert und jede Variable darin auch, jeweils bei 0 beginnend.
<script type="text/javascript">
var kartei = new Array(4) // Array mit 4 Variablen wird angelegt
for (var i=0; i < kartei.length; ++i) { // in jede der vorhandenen Variablen wird ...
kartei[i] = new Array(3); // ... ein Array mit 3 Variablen angelegt
// jetzt müssen die Arrays noch mit Werten gefüllt werden
// (durch eine Schleiffe liessen sich hier Angaben z.B. zeilenweise aus einem Dokument einfüllen)
kartei[0][0] = "Marcel"; // im 1. Array wird die 1. Array-Variable mit einem Wert belegt
kartei[0][1] = "Biefer";
kartei[0][2] = "Mäse";
kartei[1][0] = "Hans"; // 2. Array
kartei[1][1] = "Mustermann";
kartei[1][2] = "Mosi";
kartei[2][0] = "Testina"; // 3. Array
kartei[2][1] = "Testosterosa";
kartei[2][2] = "Tessy";
kartei[3][0] = "Heiri"; // 4. Array
kartei[3][1] = "Endlich";
kartei[3][2] = "Highend";
}
/* Funktionen zum ausgeben der Werte */
function pers_0() {
alert("Person 0:\n"+kartei[0][0]+" "+kartei[0][1]+" - "+kartei[0][2]+" "); // die Anführungszeichen stellen die Leerschläge als Strings dar
}
function vorNa() {
alert("Alle Vornamen:\n"+kartei[0][0]+", "+kartei[1][0]+", "+kartei[2][0]+", "+kartei[3][0]+" ");
}
function rufNa() {
alert("Alle Rufnamen:\n"+kartei[0][2]+", "+kartei[1][2]+", "+kartei[2][2]+", "+kartei[3][2]+" ");
}
</script>
Aufruf einer Funktion: <a href="#" onmouseover="pers_0()">Zeige die Person 0</a>
Assoziativer Array
Dieses JavaScript zeigt den Aufbau eines assoziativen, mehrdimensionalen Arrays am Beispiel eines Bildarchivs.
Die kommode heisst Bild, die Schubladen sind durchnummeriert, die Variablen heissen Titel, Stil und Künstler.
Assoziative Arrays ermöglichen es unabhängig von der Position, den Wert eines Elements zu ermitteln.
Nachteil ist, dass die Methoden des Array-Objekts nicht anwendbar sind. Auch kennen assoziative Arrays keine Eigenschaft length.
Elemente eines assoziativen Arrays können stets nur mit dem Namen oder über eine for-in-Schleife angesprochen werden.
<script type="text/javascript"> var Bild=new Array(); // Bild 1 Bild[0] = new Array(); Bild[0]["Titel"] = "Ohne Titel"; Bild[0]["Stil"] = "Monochrom"; Bild[0]["Künstler"]= "Anonym"; // Bild 2 Bild[1]=new Array();
Bild[1]["Titel"] = "Akt nr. 25"; Bild[1]["Stil"] = "Figurativ"; Bild[1]["Künstler"]= "Biefer"; // erste Schleife schreibt Bild und Array Index for (var i=0;i<Bild.length;i++) { document.write("<dl><dt>Bild "+(i+1)+"<\/dt>"); // zweite, innere Schleife schreibt assoziativen Namen und dessen Wert for (var Eigenschaft in Bild[i]) { document.write("<dd>"+ Eigenschaft + ": "+Bild[i][Eigenschaft]+"<\/dd>"); document.write("<\/dl>"); } } </script>
Check den Code.