Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
1 Einleitung
2 Webbrowser
3 JavaScript einbauen
4 Programmieren mit JavaScript
5 Datum
6 Zufall
7 Browserinformationen
8 Fenster
9 Formulare
10 Frames und Iframes
11 Grafiken
12 Cookies
13 Objekte und Arrays
14 Ereignisbehandlung
15 Fehlerbehandlung
16 DOM
17 DHTML und CSS
18 AJAX
19 XML
20 Web Services
21 AJAX-Frameworks
22 Plugins
23 Multimedia
24 Java
25 Serverseitige Technologien
26 JavaScript goes .NET
27 Code schützen
28 Top Secret: Passwortschutz
29 Signierte Skripte
30 JavaScript und Sicherheit
31 Navigation
32 Warenkorb
33 JavaScript-Bibliotheken
34 Referenz
35 Quellen im Web
36 Die Zukunft von JavaScript
Index
Download: - ZIP, ca. 9,2 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Computing / <openbook> / JavaScript und AJAX | vor >>
JavaScript und AJAX von Christian Wenz Das umfassende Handbuch
JavaScript und AJAX 839 S., mit DVD, 39,90 Euro Galileo Computing ISBN 3-89842-859-1 |
| Kapitel 13 Objekte und Arrays
|  | 13.1 Array-Erweiterungen
|  |  | 13.1.1 Einfügen, nicht anfügen
|  |  | 13.1.2 Anfügen und löschen
|  |  | 13.1.3 Array-Elemente mischen
|  |  | 13.1.4 Sortieren
|  | 13.2 Eigene Objekte
|  |  | 13.2.1 Allgemeines
|  |  | 13.2.2 Methoden definieren
|  |  | 13.2.3 Eigene Sortiermethode
|  |  | 13.2.4 Eigene Sortiermethode, Teil 2
|  |  | 13.2.5 Zusammenfassung
|  |  | 13.2.6 Platzsparende Notation
|  | 13.3 JavaScript-Objekte erweitern
Niemals wird die Satire ihr Examen bestehen. In der Jury sitzen ihre Objekte. – Stanislaw Jerzy Lec # Kapitel 13 Objekte und Arrays Bei OOP (Objektorientierte Programmierung) scheiden sich die Geister – die herrschenden Meinungen schwanken zwischen »die Zukunft der professionellen Webentwicklung« bis hin zu »völlig unnötig«. Wir mischen uns in diese Diskussion nicht ein, denn beide Auffassungen haben etwas für sich. Ja, im professionellen Bereich geht es mittlerweile kaum ohne die OOP, mit der sich Funktionalität wunderbar strukturieren lässt. Aber: Ein Großteil der heutigen JavaScript-Programmierung ist nicht so umfangreich, dass man wirklich OOP bräuchte. Insofern: Wägen Sie Aufwand und Nutzen genau ab. Doch zurück zum Thema, beziehungsweise zum durchgängigen Anwendungsbeispiel in diesem Kapitel. Historisch gesehen hat die Unterstützung von Arrays in JavaScript eine bewegte Geschichte hinter sich. In ganz alten Versionen waren Arrays nur über Umwege möglich, dann gab es eine Zeit lang herbe Unterschiede zwischen den einzelnen Browsern. Mittlerweile ist die Situation schon besser geworden, doch gerade bei Arrays gibt es so viel praktische Funktionalität, die in JavaScript selbst eigentlich keinen Platz mehr hatte. Damit sind Arrays ein wunderbares Beispiel, um zu demonstrieren, wie Sie eigene Objekte erstellen können. Wir bauen uns unser eigenes Array-Objekt, das viel zusätzliche Funktionalität aufweist. Ganz nebenbei sehen Sie anhand eines praktischen Beispiels diverse OOP-Features von JavaScript. Zunächst lernen Sie auch einige der fortgeschritteneren Array-Funktionen kennen. ## 13.1 Array-Erweiterungen Wie bereits erwähnt wurde, kann man folgendermaßen eine Instanz eines Arrays erstellen:
    var a = new Array();
Werden Parameter übergeben, so wird das Array vorausgefüllt:
    var a = new Array(1, 2, 3, "abc");
In neueren JavaScript-Versionen kann ein Array auch so initialisiert werden:
    var a = [1, 2, 3, "abc"];
In der Eigenschaft length des Arrays wird die Anzahl der Elemente festgesetzt. Verringert man beispielsweise diese Eigenschaft, so werden die letzten Elemente des Arrays dementsprechend gelöscht. An sich hat ein Array aber beliebig viele Elemente. Wird ein zu großer Index für ein Element verwendet, so wird length dementsprechend angepasst. Nach den folgenden beiden Zeilen ist a.length gleich fünf:
    var a = new Array(1, 2, 3);
    a[4] = 42;
### 13.1.1 Einfügen, nicht anfügen In der JavaScript-Version 1.0 waren die Arrays eher unflexibel. Der Programmierer konnte am Ende Daten anfügen und (durch Setzen der length-Eigenschaft) hinten Daten löschen, aber ein Einfügen von Daten in der Mitte beispielsweise gestaltete sich zunächst etwas schwierig. Man musste hier einen etwas umständlichen Weg gehen: Das Array musste zuerst vergrößert werden (am besten, indem die length-Eigenschaft um eins erhöht wird), dann mussten alle Daten ab der Einfügestelle um eins nach hinten kopiert werden. Abschließend wurden die neuen Daten an die entsprechende Stelle im Array gesetzt. Die folgende Funktion bietet diese Funktionalität; als Parameter müssen das Array, die Einfügestelle1 und die Daten übergeben werden. Die Funktion gibt das modifizierte Array zurück:
    function einfuegen(_array, _position, _datum) {
       _array.length ++;
       for (var i = _array.length – 1; i >= position; i--) {
          _array[i+1] = _array[i];
       }
       _array[_position] = _datum;
       return _array;
    }
### 13.1.2 Anfügen und löschen Auch mit den neueren JavaScript-Versionen ist es nicht möglich, direkt mitten in einem Array Elemente einzufügen. Jedoch gibt es neue Methoden, mit denen Elemente bequem an ein Array angehängt oder aus ihm gelöscht werden können. Wenn wir Karten mischen, werden diese Methoden noch einmal interessant werden. Eine komplette Auflistung der Methoden finden Sie in der Referenz. Exemplarisch werden hier nur die Funktionen vorgestellt, die für das Beispiel von Bedeutung sein werden. Die folgenden Methoden sind alle seit JavaScript 1.2 möglich und sind (im Gegensatz zur Funktion einfuegen() oben) alle Methoden des Array-Objekts. Microsoft hat an dieser Stelle übrigens eine Zeit lang geschlafen: Die neuen Funktionen sind – sofern nicht anders vermerkt – erst ab Internet Explorer 5.5 in der JScript-Implementierung enthalten. Wenn Sie also auf diese Funktionalitäten Wert legen, sollten Sie das Kapitel bis zum Ende durchlesen, um zu erfahren, wie Sie sie auch auf älteren Browsern implementieren können. Mit der Methode push() werden Elemente hinten an ein Array angehängt. Die Methode ist dabei in Bezug auf die Anzahl der übergebenen Parameter flexibel. Das heißt, es muss zwar mindestens ein Element angegeben werden, es können aber auch zwölf sein. Das folgende Beispiel erzeugt wieder ein Array mit den Monatsnamen, aber in mehreren Schritten:
    var monate = new Array("Januar", "Februar", "März");
    monate.push("April", "Mai", "Juni", "Juli", "August");
    monate.push("September", "Oktober", "November",
       "Dezember");
Natürlich ist es auch möglich, Elemente aus einem Array zu entfernen. An die Methode push() ist die Methode pop() angelehnt, die das letzte Element aus einem Array entfernt. Viel flexibler ist jedoch die Methode splice(), die Elemente aus einem Array entfernt (diese Methode fehlt übrigens im Internet Explorer). Dieser Methode werden mindestens zwei Parameter übergeben:
| Der erste Parameter gibt an, ab welcher Position Elemente entfernt werden sollen (wie immer beginnt die Zählung bei null).
| Der zweite Parameter enthält die Anzahl der Array-Elemente, die aus dem Array entfernt werden sollen.
| Alle folgenden Parameter werden wie bei push() hinten an das Array angefügt. Diese Parameter sind jedoch optional, es ist also auch möglich, aus einem Array nur Elemente zu entfernen.
Im folgenden Beispiel enthält die Monatsliste einige Fehler, die mit einem einzigen Aufruf von splice() behoben werden:
    var a = new Array("Januar", "Februar", "März", "April", "Mai",
    "JavaScript", "JScript", "Juni", "Juli", "August", "September");
    //Aufgabe: die Einträge an Position 5 und 6 entfernen
    //und die fehlenden Einträge/Monate anhängen
    a.splice(5, 2, "Oktober", "November", "Dezember");
### 13.1.3 Array-Elemente mischen Als Anwendungsbeispiel für Arrays wird ein Kartenblatt verwaltet; jedes Array-Element ist eine Karte, die allerdings selbst wieder ein Array ist (mit Kartenname und Kartenfarbe). Zum Mischen der Karten wird ein neues Array erstellt. Ein Element aus dem Array mit den Karten wird zufällig ausgewählt und an ein neues Array angehängt. Abschließend muss die Karte noch aus dem alten Array entfernt werden, damit sie im neuen Array nicht etwa doppelt vorkommt. Der folgende Code ist somit ziemlich selbsterklärend. In Kapitel 24 finden Sie einen ähnlichen Code noch einmal.
    //Hilfsvariablen für die Kartenbezeichnungen
    var kartenname = new Array();
    kartenname[0]="Zwei"; kartenname[1]="Drei";
    kartenname[2]="Vier"; kartenname[3]="Fünf";
    kartenname[4]="Sechs"; kartenname[5]="Sieben";
    kartenname[6]="Acht"; kartenname[7]="Neun";
    kartenname[8]="Zehn"; kartenname[9]="Bube";
    kartenname[10]="Dame"; kartenname[11]="König";
    kartenname[12]="As";
    var farben = new Array();
    farben[0] = "Herz"; farben[1] = "Karo";
    farben[2] = "Pik"; farben[3] = "Kreuz";
    //Initialisierung des Karten-Arrays
    var cards = new Array();
    for (var i=0; i<13; i++)
       for (var j=0; j<4; j++){
          karte = kartenname[j] + " " + farben[i];
          cards.push(karte);
       }
    //Mischen
    var neu = new Array();
    while (cards.length > 0){
       var zufall = Math.floor(Math.random() * cards.length);
       karte = cards[zufall];
       cards.splice(zufall, 1);
       neu.push(karte);
    }
### 13.1.4 Sortieren In JavaScript gibt es die Methode sort() für Arrays, die die Elemente eines Arrays alphanumerisch sortiert. Zuvor werden die Array-Elemente alle in Zeichenketten umgewandelt, was zu Problemen führt:
    var a = new Array(1, 3, 5, 7, 11).sort();
Nach diesem Aufruf hat a den Wert [1, 11, 3, 5, 7], denn sowohl eins als auch elf beginnen mit einer "1" – und das kommt im ASCII-Alphabet vor der "3". Man kann sich hier jedoch behelfen, indem man eine Sortierfunktion schreibt. Das muss eine Funktion sein, der zwei Parameter übergeben werden können. Diese Funktion gibt dann eine positive Zahl zurück, wenn der erste Parameter gemäß den Sortierkriterien »größer« als der zweite Parameter ist; ist der zweite Parameter der »größere«, wird eine negative Zahl zurückgegeben. Im dritten Fall, wenn die beiden Parameter »gleich groß« sind, muss der Rückgabewert der Funktion 0 betragen. In unserem Beispiel soll das Kartenblatt sortiert werden, und zwar nach dem Wert der Karten. Hierbei wird folgendermaßen vorgegangen:
| Alle Zeichen vor dem Leerzeichen stellen die eigentliche Karte dar (also ohne Farbwert).
| In einem Array sind die Kartenwerte abgespeichert.
| Von den beiden übergebenen Parametern wird der Array-Index im Kartenwert-Array ermittelt. So kann angegeben werden, welche Karte »größer« ist und welche »kleiner«. Dementsprechend kann der korrekte Wert zurückgegeben werden.
| Haben beide Karten denselben Wert, so wird (alphabetisch) nach der Farbe sortiert.
Die folgende Funktion erledigt das und verwendet eine praktische JavaScript-Methode: Zeichenkette.split(Trennzeichen). Die Zeichenkette wird anhand der Trennzeichen aufgeteilt, und die einzelnen Teilstrings werden in einem Array zurückgegeben. Der Aufruf
    "1;2;3".split(";");
liefert folgendes Array zurück:
    [1, 2, 3]
Nun aber zur Sortierfunktion:
    function cardsort(a, b) {
       var kartenname = new Array();
       kartenname[0]="Zwei"; kartenname[1]="Drei";
       kartenname[2]="Vier"; kartenname[3]="Fünf";
       kartenname[4]="Sechs"; kartenname[5]="Sieben";
       kartenname[6]="Acht"; kartenname[7]="Neun";
       kartenname[8]="Zehn"; kartenname[9]="Bube";
       kartenname[10]="Dame"; kartenname[11]="König";
       kartenname[12]="As";
       var wert_a = (a.split(" "))[0];
       var wert_b = (b.split(" "))[0];
       var index_a = –1; var index_b = –1;
       for (var i=0; i<kartenname.length; i++) {
          if (kartenname[i] == wert_a) {
             index_a = i;
          }
          if (kartenname[i] == wert_b) {
             index_b = i;
          }
       }
       if (index_a > index_b) {
          return 1;
       } else if (index_a < index_b) {
          return –1;
       }
       var farbe_a = (a.split(" "))[1];
       var farbe_b = (b.split(" "))[1];
       return (farbe_a > farbe_b) ? 1 : 0;
    }
Der Name der Funktion wird dann als Parameter an die sort()-Methode des Arrays übergeben. Beachten Sie, dass hierbei dem Funktionsnamen keine Klammern folgen.
    //Hilfsvariablen für die Kartenbezeichnungen
    var kartenname = new Array();
    kartenname[0]="Zwei"; kartenname[1]="Drei";
    kartenname[2]="Vier"; kartenname[3]="Fünf";
    kartenname[4]="Sechs"; kartenname[5]="Sieben";
    kartenname[6]="Acht"; kartenname[7]="Neun";
    kartenname[8]="Zehn"; kartenname[9]="Bube";
    kartenname[10]="Dame"; kartenname[11]="König";
    kartenname[12]="As";
    var farben = new Array();
    farben[0] = "Herz"; farben[1] = "Karo";
    farben[2] = "Pik"; farben[3] = "Kreuz";
    //Initialisierung des Karten-Arrays
    var cards = new Array();
    for (var i=0; i<13; i++) {
       for (var j=0; j<4; j++){
          karte = kartenname[i] + " " + farben[j];
          cards.push(karte);
       }
    }
    //Mischen
    var neu = new Array();

    while (cards.length>0) {
       var zufall = Math.floor(Math.random()*cards.length);
       karte = cards[zufall];
       cards.splice(zufall, 1);
       neu.push(karte);
    }
    //Sortieren
    neu.sort(cardsort);
    //Hand ausgeben
    document.write(neu.toString());
Mit der Methode toString() wird jedes Objekt, sofern möglich, in eine Zeichenkette umgewandelt. Bei einem Array in JavaScript werden die einzelnen Elemente durch Kommata getrennt ausgegeben. Beachten Sie, dass in Abbildung 13.1 das Kartenblatt sortiert ist. Wenn Sie im Listing die Zeile neu.sort(cardsort) auskommentieren, erhalten Sie ein vermischtes Blatt (siehe Abbildung 13.2). Hier klicken, um das Bild zu Vergrößern Abbildung 13.1 Das gemischte und dann wieder sortierte Array Hier klicken, um das Bild zu Vergrößern Abbildung 13.2 Das unsortierte Array
<< zurück | <top> | vor >>
Zum Katalog
JavaScript und AJAX bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| JavaScript und AJAX - Das Video-Training
| Webseiten programmieren und gestalten
| XHTML, HTML und CSS
| CSS-Praxis
| AJAX
| PHP 5 und MySQL 5
| TYPO3 4.0
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

[Galileo Computing]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de