| <- Vorlesung 9 | Übungen | Vorlesung 11 -> |
Wir wollen eine Liste von Personen mit Namen und Vornamen anzeigen. Auf Knopfdruck soll diese Liste unterschiedlich sortiert werden können. Die Liste speichern wir beim Laden der Seite in einem array, jedes array-Element ist ein eigenes Objekt, bestehend aus Namen und Vornamen.
Ein Objekt kann man sich als Variable vorstellen, die aus mehreren Daten zusammengesetzt ist. Ein Beispiel für ein Objekt in JavaScript wäre das document-Objekt: Die Daten, aus denen das document-Objekt zusammengesetzt ist, sind die Eigenschaften wie etwa bgColor, fgColor und title oder auch Unterobjekte wie forms und images.
Objekte können auch eigene Funktionen (wir sagen Methoden) besitzen, mit deren Hilfe die Eigenschaften des Objekts bearbeitet werden können. Beim document-Objekt wären dies zum Beispiel die Methoden write(), open() und close().
Neben den eingebauten Objekten - wie das document-Objekt - können wir uns auch selbst Objekte zusammenstellen. In unserem Beispiel erstellen wir ein Objekt mit dem Namen person. Unser person-Objekt soll lediglich die zwei Eigenschaften name und vorname und die Methode toString() besitzen. Die Definition unseres Objekts erfolgt so, wie man eine Funktion definiert:
function person(name, vorname) {
this.name = name;
this.vorname = vorname;
this.toString=tos;
}
Dies unterscheidet JavaScript von anderen objekt-orientierten
Sprachen wie C++ oder Java.
Die dritte Zeile in unserer Definition sieht etwas ungewöhnlich aus:
this.toString=tos;Hier definieren wir uns für unser Objekt person eine neue Methode mit dem Namen toString. Die Zeile hat folgende Bedeutung: Bei Aufruf der Methode toString() wird die Funktion tos() gestartet, die wir uns noch definieren müssen. Zum Beispiel mit
order="":
function tos() {
if(order == "vorname") {
return this.vorname + " " + this.name;
} else {
return this.name + ", " + this.vorname;
}
}
Zweck der Methode toString() ist es, aus den beiden
Strings name und vorname, je nach
angegebener Reihenfolge, einen einzigen String zu erzeugen:
entweder
"Gerhard Schröder"oder
"Schröder, Gerhard"Falls die globale Variable order auf den Wert vorname eingestellt ist, wird die erste Variante gewählt, andernfalls die zweite.
Die Objekte vom Typ person legen wir nun in ein eigenes array mit dem Namen liste. Dies geschieht in der Funktion init(), die nach dem Laden der Seite mit onLoad="init()" gestartet wird.
function init() {
liste = new Array();
liste[0]=new person("Schröder","Gerhard");
liste[1]=new person("Kohl","Helmut");
...
}
array-Objekte enthalten standardmäßig eine Sortierfunktion.
Wir können also angeben:
liste.sort();Diese Funktion sortiert die Objekte, die im Array liste enthalten sind. sort sortiert die Objekte lexikographisch nach dem String, der von der Methode toString erzeugt wird.
Wollen wir die Reihenfolge des sortierten Arrays umkehren, so verwenden wir die Array-Methode reverse(). Ist das Array dann sortiert, wird es durch die Funktion show() in einem neuen Fenster angezeigt:
function person(name, vorname) {
this.name = name;
this.vorname = vorname;
this.toString=tos;
}
order="";
function tos() {
if(order == "vorname") {
return this.vorname + " " + this.name;
} else {
return this.name + ", " + this.vorname;
}
}
function init() {
liste = new Array();
liste[0]=new person("Schröder","Gerhard");
liste[1]=new person("Kohl","Helmut");
liste[2]=new person("Fischer","Joschka");
}
function show() {
var win=window.open("","Namensliste",
"width=300,height=300,scrollbars=yes");
win.focus();
win.document.open();
for(i=0; i<liste.length; i++) {
win.document.write(liste[i].toString()+"<BR>");
}
win.document.write("<p>");
win.document.write("<form><input type=button value='OK' "+
"onClick='self.close()'></form>");
win.document.close();
}
function vorwaerts() {
liste.sort();
show();
}
function rueckwaerts() {
liste.sort();
liste.reverse();
show();
}
</script>
</head>
<body onLoad="init();">
<FORM NAME="sort">
<INPUT TYPE="BUTTON" VALUE="Sortiere nach Name" onClick="order='name';vorwaerts();">
<INPUT TYPE="BUTTON" VALUE="Sortiere nach Vorname" onClick="order='vorname';vorwaerts();">
<INPUT TYPE="BUTTON" VALUE="Rückwärts" onClick="rueckwaerts();">
</FORM>