Rheinwerk Computing <openbook>
Rheinwerk Computing - Programming the Net


JavaScript von Christian Wenz
Browserübergreifende Lösungen
JavaScript - Zum Katalog
gp Kapitel 13 Arrays
  gp 13.1 Array-Erweiterungen
  gp 13.2 Eigene Objekte
  gp 13.3 Fragen & Aufgaben

Kapitel 13 Arrays

Floyd: Doyle, I know I gave him four threes. He had to make a switch. We can’t let him get away with that!
Doyle: What was I supposed to do – call him for cheating better than me, in front of the others?
– aus: Der Clou (The Sting)

Bisher wurde bei Arrays immer tunlichst darauf geachtet, dass diese auch stets JavaScript-1.0-kompatibel sind. In diesem Kapitel wählen wir zunächst einen anderen Ansatz und stellen die erweiterten Array-Möglichkeiten der JavaScript-Versionen 1.0 und 1.1 vor. Um einige der Methoden kennen zu lernen, werden wir Spielkarten mischen.

Am Ende des Kapitels wird die Browser-Unabhängigkeit wieder hergestellt, und einige der neuen Array-Methoden werden für ältere Browser nachgebildet. Hierzu ist es nötig, ein eigenes Array-Objekt zu erstellen. Grundlage dafür wird die Funktion MakeArray() aus dem Kapitel »Programmierung II« sein.


Rheinwerk Computing

13.1 Array-Erweiterungen  downtop

Wie bereits erwähnt, 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")
gp  Beim Netscape Navigator 3 und dem recht bald danach erschienenen Internet Explorer 4 gibt es jedoch einen Bug in der Implementierung. Der folgende Befehl sollte ein Array erstellen, das (am Anfang) genau ein Element enthält; er wird jedoch als Generierung eines Arrays interpretiert, das (anfangs) die Länge 5 hat:
var a = new Array(5)

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

Rheinwerk Computing

13.1.1 Einfügen, nicht anfügen  downtop

gp  In der JavaScript-Version 1.0 waren die Arrays eher unflexibel. Der Programmierer konnte hinten 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ügestelle 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
}

Rheinwerk Computing

13.1.2 Anfügen und löschen  downtop

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 befindet sich wie gewohnt in der Referenz. Exemplarisch werden hier nur die Funktionen vorgestellt, die für das Beispiel von Bedeutung sein werden. Die folgenden Methoden sind alle ab JavaScript 1.2 möglich und sind (im Gegensatz zur Funktion einfuegen() oben) alle Methoden des Array-Objekts.

Microsoft hat an dieser Stelle übrigens 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 diese Funktionalität 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() angelehnt ist die Methode pop(), die das letzte Element aus einem Array entfernt. Viel flexibler ist jedoch die Methode splice(), die Elemente aus einem Array entfernt (die gibt es übrigens nur im Netscape Navigator, und auch im Internet Explorer 5.5 noch nicht). Dieser Methode werden mindestens zwei Parameter übergeben:

gp  Der erste Parameter gibt an, ab welcher Position Elemente entfernt werden sollen (wie immer beginnt die Zählung bei Null).
gp  Der zweite Parameter enthält die Anzahl der Array-Elemente, die aus dem Array entfernt werden sollen.
gp  Alle folgenden Parameter werden an das Array hinten angefügt, so wie bei push(). 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")

Rheinwerk Computing

13.1.3 Karten mischen  downtop

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 die Karte im neuen Array nicht etwa doppelt vorkommt. Der folgende Code ist somit ziemlich selbsterklärend. Im Kapitel »Java« 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)
}

Rheinwerk Computing

13.1.4 Sortieren  downtop

gp  Schon seit der JavaScript-Version 1.1 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:

gp  Alle Zeichen vor dem Leerzeichen stellen die eigentliche Karte dar (also ohne Farbwert).
gp  In einem Array sind die Kartenwerte abgespeichert.
gp  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.
gp  Haben beide Karten denselben Wert, so wird (alphabetisch) nach der Farbe sortiert.

Die folgende Funktion erledigt das. Da jetzt JavaScript 1.1 verwendet werden darf, wird eine neue Funktion verwendet: 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. Bitte 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 werden ab der JavaScript-Version 1.3 die einzelnen Elemente durch Kommata getrennt ausgegeben; bei älteren Versionen wird der Quellcode des Arrays ausgegeben (siehe Abbildung 13.1).

Abbildung 13.1  Das gemischte und dann wieder sortierte Array
Abbildung

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).

Abbildung 13.2  Das unsortierte Array
Abbildung


Rheinwerk Computing

13.2 Eigene Objekte  downtop

In diesem Abschnitt sollen einige Array-Funktionalitäten der JavaScript-Version 1.2 für ältere Browser (und die meisten Versionen des Internet Explorer) nachgebildet werden. Dazu ist es nötig, eigene Objekte zu erstellen.

In der Praxis wird diese Technik nur bei größeren Projekten verwendet, und wenn der Funktionsumfang der üblichen Variablen und Arrays nicht mehr ausreicht.


Rheinwerk Computing

13.2.1 Allgemeines  downtop

Betrachten Sie noch einmal die berühmte Funktion MakeArray() aus dem Kapitel »Programmierung II«:

function MakeArray(n){
   for (var i=0; i<n; i++)
      this[i] = 0
   this.length = n
}

Hier die kurze, aber um so länger versprochene Erklärung für den obigen Code: Mit dem Schlüsselwort this wird ja normalerweise auf das aktuelle Objekt zugegriffen, im Allgemeinen auf das aktuelle Fenster oder Formularelement. Wird diese Funktion jedoch als sogenannte Konstruktorfunktion für ein Objekt verwendet, also mit new MakeArray() aufgerufen, so bezeichnet this die aktuelle Instanz des Objekts. Somit wird durch die wiederholte Ausführung des Befehls this[i]=0 die Instanz als Array deklariert, und jedes Array-Element mit Null vorbelegt. Von besonderer Bedeutung ist die Zeile this.length = n. Hierdurch wird die Eigenschaft length des Objekts auf n gesetzt, und nicht etwa die Länge eines Arrays (Anzahl der Elemente) festgelegt. Standardmäßig hat ja ein Array unbegrenzt viele Elemente, und das ist auch hier so. Da es sich hierbei aber um kein »echtes« Array handelt, sondern um ein eigenes Objekt, hat die Eigenschaft length nichts mit der Anzahl der Elemente des Objekts zu tun. Wird also ein Element an das Array angefügt, so wird length nicht automatisch angepasst; das muss man also selbst übernehmen. Aus diesem Grund sollten Sie bei der Verwendung von MakeArray() sehr vorsichtig sein.


Rheinwerk Computing

13.2.2 Methoden definieren  downtop

Fast genauso einfach wie die Definition von Objekteigenschaften ist die Definition von Objektmethoden. Auch hier ist der this-Operator wieder von Bedeutung. Beim Setzen einer Methode verwendet man folgende Syntax im Konstruktor:

this.methode = funktion

Bei jedem Aufruf der Methode wird funktion() ausgeführt, und innerhalb von funktion() kann man mit this auf die verwendete Instanz des Objekts zugreifen. Beachten Sie, dass auch hier die Klammern fehlen.

Als Beispiel soll die Methode toString() implementiert werden. Dazu muss zunächst MakeArray() folgendermaßen geändert werden:

function MakeArray(n){
   for (var i=0; i<n; i++)
      this[i] = 0
   this.length = n
   this.toString = arraytoString
}

Die Funktion arraytoString() gibt die Elemente des Arrays, durch Kommata voneinander getrennt, aus. Dazu werden einfach alle Elemente in this abgefragt und miteinander verkettet.

function arraytoString(){
   var returnstring = ""
   for (var i=0; i<this.length-1; i++)
      returnstring += this[i] + ","
   returnstring += this[this.length-1]
   return returnstring
}

Analog kann man auch die Funktion push() nachbilden: Alle übergebenen Parameter werden an das Array angehängt. Abschließend muss die Eigenschaft length noch angepasst werden.

function MakeArray(n){
   for (var i=0; i<n; i++)
      this[i] = 0
   this.length = n
   this.toString = arraytoString
   this.push = arraypush
}
function arraypush(){
   for (var i=0; i<arraypush.arguments.length; i++)
      this[this.length+i] = arraypush.arguments[i]
   this.length += arraypush.arguments.length
}

Rheinwerk Computing

13.2.3 Eigene Sortiermethode  downtop

gp  Das Sortieren war bei JavaScript Version 1.0 noch nicht möglich. Erstellt man jedoch ein eigenes Objekt, kann man diese Funktionalität auch nachbilden. Die Einrichtung einer Methode fällt nicht schwer, Sie müssen nur eine Zeile in die Konstruktorfunktion einfügen:
function MakeArray(n){
   for (var i=0; i<n; i++)
      this[i] = 0
   this.length = n
   this.toString = arraytoString
   this.push = arraypush
   this.sort = arraysort
}

Bei der Implementierung der Funktion arraysort() muss man sich zunächst für einen geeigneten Sortieralgorithmus entscheiden. Am leichtesten tut man sich – zumindest nach meiner Meinung – mit dem Bubblesort-Algorithmus. Der benötigt zwar eine quadratische Laufzeit (unter diesem Aspekt gibt es bessere Algorithmen), aber ist dafür besonders einfach zu implementieren. Das Verfahren funktioniert wie im Folgenden beschrieben: Zwei nebeneinander liegende Elemente des Arrays werden miteinander verglichen. Haben diese Elemente schon die richtige Reihenfolge (ist das »linke« also kleiner als das »rechte«), passiert nichts, ansonsten tauschen die beiden Elemente ihren Platz. Sodann wird das jetzt rechts liegende Element und das Element rechts daneben betrachtet. Auf diese Weise wird das gesamte Array durchlaufen, und das geschieht so oft, bis das Array korrekt sortiert ist.

Das folgende Ablaufschema zeigt exemplarisch die Sortierung. Elemente, die vertauscht werden, sind jeweils unterstrichen:

3142®1342®1324®1234

Zunächst muss man sich überlegen, wie man zwei Elemente – oder vereinfacht gesagt, zwei Variablen – vertauscht. Der folgende Code funktioniert leider nicht:

var a, b
function tausche(){
   a=b
   b=a
}

Nachdem die Zuweisung a=b ausgeführt wurde, enthalten a und b denselben Wert; der ursprüngliche Wert von a ist verloren. Um nun wirklich vertauschen zu können, verwendet man eine Hilfsvariable, in der man den ursprünglichen Wert von a abspeichert. Sodann wird a der Wert von b zugewiesen, und b enthält den ursprünglichen Wert von a – aus der Hilfsvariablen:

var a, b
function tausche(){
   var hilfsvariable = a
   a = b
   b = hilfsvariable
}

Die Implementierung des Bubblesort-Algorithmus ist dann nicht weiter schwierig. Man darf sich nur beim Vertauschen der Array-Elemente nicht vertun und muss immer fleißig this verwenden!

function arraysort(){
   var sortiert = false  //Überprüfung, ob sortiert
   while (!sortiert){
      sortiert = true
      for (var i=0; i<this.length-1; i++)
         if (this[i]>this[i+1]){
            sortiert = false
            hilfsvariable = this[i]
            this[i]=this[i+1]
            this[i+1] = hilfsvariable
         }
   }
}

Beachten Sie, dass die Laufvariable i von 0 bis this.length-2 läuft, da das Array-Element an Position i mit dem nachfolgenden Element verglichen wird – und das Element an der Position this.length-1 hat keinen Nachfolger.


Rheinwerk Computing

13.2.4 Eigene Sortiermethode, Teil 2  downtop

In Hinblick auf das Beispiel mit dem Kartenspiel wäre es natürlich noch schön, wenn man wieder die Sortiermethode selbst angeben könnte. Auch dies kann man mit JavaScript erreichen, zunächst muss man die Funktion arraysort() leicht modifizieren:

function arraysort(){
   var sortiert = false  //Überprüfung, ob sortiert
   while (!sortiert){
      sortiert = true
      for (var i=0; i<this.length-1; i++)
         if (groesser(this[i], this[i+1], arraysort.arguments[0])){
            sortiert = false
            hilfsvariable = this[i]
            this[i]=this[i+1]
            this[i+1] = hilfsvariable
         }
   }
}

Die Funktion groesser(a, b, arg) gibt zurück, ob a größer als b ist; arg enthält einen an die Funktion arraysort übergebenen Parameter (wozu der nützlich ist, wird gleich erläutert). Im Beispiel aus dem vorherigen Abschnitt würde diese Funktion folgendermaßen aussehen:

function groesser(a, b, arg){
   return (a>b)
}

Unser Ziel soll es jedoch sein, eine beliebige Funktion an arraysort() bzw. an die Methode sort() des MakeArray-Objekts zu übergeben. Aufgrund der Einschränkungen von JavaScript muss der Name der Sortierfunktion als Zeichenkette übergeben werden. Der Rest ist dann gar nicht mehr so schwierig. Mittels eval() wird die Sortierfunktion mit zwei Array-Elementen als Parametern aufgerufen und das Ergebnis ausgewertet. Zur Erinnerung: Ist das Ergebnis größer als 0, so ist der erste Parameter größer als der zweite, und nur dann. Zusätzlich muss natürlich noch überprüft werden, ob überhaupt ein Parameter an arraysort() übergeben worden ist. Sollte das nicht der Fall sein, wird ein alphanumerischer Vergleich mit dem >-Operator durchgeführt.

function groesser(a, b, arg){
   if (arg==null)
      return (a>b)
   else{
      var erg = eval(arg + "(\"" + a + "\", \"" + b + "\")")
      return (erg>0)
   }
}

Rheinwerk Computing

13.2.5 Zusammenfassung  downtop

gp  Im folgenden finden Sie eine Anwendung für das MakeArray-Objekt. Das Kartenblatt wird initialisiert, in vier Teile aufgeteilt (beispielsweise für eine Partie Schafkopf zu viert) und (sortiert) ausgegeben. Obwohl der Code natürlich länger ist, als wenn man sich auf JavaScript 1.2 beschränkt, ist das potentielle Publikum dafür gleich viel größer.

Die Funktion MakeArray() wurde für dieses Beispiel leicht angepasst, so dass man als Parameter nicht die Größe des Arrays übergibt, sondern die ersten Array-Elemente selbst.

<HTML>
<HEAD>
<TITLE>Karten spielen mit JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
//Funktionen des MakeArray-Objekts
function MakeArray(){
   for (var i=0; i<MakeArray.arguments.length; i++)
      this[i] = MakeArray.arguments[i]
   this.length = MakeArray.arguments.length
   this.toString = arraytoString
   this.push = arraypush
   this.sort = arraysort
}
//Methoden
function arraytoString(){
   var returnstring = ""
   for (var i=0; i<this.length-1; i++)
      returnstring += this[i] + ","
   returnstring += this[this.length-1]
   return returnstring
}
function arraypush(){
   for (var i=0; i<arraypush.arguments.length; i++)
      this[this.length+i] = arraypush.arguments[i]
   this.length += arraypush.arguments.length
}
function arraysort(){
   var sortiert = false  //Überprüfung, ob sortiert
   while (!sortiert){
      sortiert = true
      for (var i=0; i<this.length-1; i++)
         if (groesser(this[i], this[i+1], arraysort.arguments[0])){
            sortiert = false
            hilfsvariable = this[i]
            this[i]=this[i+1]
            this[i+1] = hilfsvariable
         }
   }
}
function groesser(a, b, arg){
   if (!arg)
      return (a>b)
   else{
      var erg = eval(arg + "(\"" + a + "\", \"" + b + "\")")
      return (erg>0)
   }
}
// *** Das eigentliche Programm ***
//Hilfsvariablen für die Kartenbezeichnungen
var kartenname = new MakeArray("Zwei", "Drei", "Vier", "Fünf",
  "Sechs", "Sieben", "Acht", "Neun", "Zehn", "Bube", "Dame",
    "König", "As")
var farben = new MakeArray("Herz", "Karo", "Pik", "Kreuz");
//Initialisierung des Kartenarrays
var cards = new MakeArray()
for (var i=0; i<13; i++)
   for (var j=0; j<4; j++){
      karte = kartenname[i]+" "+farben[j]
      cards.push(karte)
   }
//Karten mischen

//Karten auf vier Personen verteilen
var hand1 = new MakeArray()
var hand2 = new MakeArray()
var hand3 = new MakeArray()
var hand4 = new MakeArray()
for (i=0; i<=12; i++)
   hand1.push(cards[i])
for (i=13; i<=25; i++)
   hand2.push(cards[i])
for (i=26; i<=38; i++)
   hand3.push(cards[i])
for (i=39; i<=51; i++)
   hand4.push(cards[i])
//Karten sortieren
hand1.sort("cardsort")
hand2.sort("cardsort")
hand3.sort("cardsort")
hand4.sort("cardsort")

//Sortierfunktion
function cardsort(a, b){
   var wert_a = a.substring(0, a.indexOf(" "))
   var wert_b = b.substring(0, b.indexOf(" "))
   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.substring(a.indexOf(" ")+1, a.length)
   var farbe_b = b.substring(b.indexOf(" ")+1, b.length)
   return (farbe_a>farbe_b) ? 1 : 0
}
//--></SCRIPT>
</HEAD>
<BODY>
<H3>Karten spielen mit JavaScript</H3>
<SCRIPT LANGUAGE="JavaScript"><!--
function br() { return "<" + "BR" + ">" }
document.write("Hand 1: " + hand1.toString() + br())
document.write("Hand 2: " + hand2.toString() + br())
document.write("Hand 3: " + hand3.toString() + br())
document.write("Hand 4: " + hand4.toString() + br())
//--></SCRIPT>
</BODY>
</HTML>
Abbildung 13.3  Die an vier Leute verteilten Karten, sortiert
Abbildung


Rheinwerk Computing

13.3 Fragen & Aufgaben  toptop

1. Geben Sie eine möglichst einfache nummerische Sortierfunktion an, die als Parameter an Array.sort() übergeben werden kann.
2. Die Array-Methode pop() entfernt das letzte Element eines Arrays. Ergänzen Sie das MakeArray-Objekt um diese Methode. Es geht hier nur um das Entfernen des Elements, nicht um den Rückgabewert dieser Methode (beim Array-Objekt: das entfernte Element).
3. Ergänzen Sie das MakeArray-Objekt um die Methode swap(i, j), die die Elemente mit den Indizes i und j miteinander vertauscht.
4. Ergänzen Sie das MakeArray-Objekt um die (bereits bekannte) Methode splice(). Dabei brauchen nur die ersten beiden Parameter berücksichtigt werden, Sie brauchen also nichts anfügen.
5. Ergänzen Sie das letzte Beispiel in diesem Kapitel um die Mischfunktion.





1    Denken Sie daran, dass Array-Indizes mit Null beginnen.

  

JavaScript

jQuery

Einstieg in JavaScript

Responsive Webdesign

Suchmaschi-
nen-Optimie-
rung




Copyright © Rheinwerk Verlag GmbH 2001 - 2002
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken und speichern. 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.
Die Veröffentlichung der Inhalte oder Teilen davon bedarf der ausdrücklichen schriftlichen Genehmigung der Rheinwerk Verlag GmbH. Falls Sie Interesse daran haben sollten, die Inhalte auf Ihrer Website oder einer CD anzubieten, melden Sie sich bitte bei: >> Zum Feedback-Formular


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, fon: 0228.42150.0, fax 0228.42150.77, service@rheinwerk-verlag.de