Informatik :: JavaScript :: Arbeit mit Objekten
Objekte verkörpern verschiedene
Elemente einer Webseite und ermöglichen dem Benutzer den Zugriff auf
diese Elemente.
So ermöglicht z.B. das window-Objekt den Zugriff
auf das aktuelle Fenster, welches ein Webdokument anzeigt. Über dieses
Objekt können Sie in dem Fenster Dokumente anzeigen lassen, seine
Größe verändern oder gar das Fenster schließen lassen.
Ein Objekt übernimmt also auf sehr komplexe Art und Weise die
Verwaltung eines bestimmten Elements.
Der Zugriff auf die Eigenschaften und Methoden eines Objekts erfolgt mit der Angabe des Objekts gefolgt von einem Punkt und dem Namen der gewünschten Eigenschaft oder Methode. Also allgemein:
Objekt.Eigenschaft | bzw. | Objekt.Methode |
|---|
Eigenschaften (Properties) stellen passive Schnittstellen dar und verkörpern Merkmale eines Objekts.
Es gibt zwei Arten von Eigenschaften:
Beispiel 1:
alert(location.href);
Die URL der Seite wird gelesen und im Meldungsfenster angezeigt.
Beispiel 2:
location.href = "images/money.gif";
Die URL der Seite wird geändert, d.h. eine neue Seite wird geladen.
Methoden stellen aktive Schnittstellen eines Objekts dar und ermöglichen die Ausführung von Aktionen mit dem verwalteten Element. Hinter einer Methode steckt also letztendlich nichts anderes als eine Funktion.
Warum erfolgt dann der Aufruf der Funktion als Methode
eines Objekts? Eine Funktion könnte ihre Aufgabe doch sicher auch allein erfüllen, oder?
Rein theoretisch stimmt das schon, doch dahinter steckt
die Logik der objektorientierten Programmierung.
Viele dieser Methoden sind in der Lage, ihre Aufgabe in Abhängigkeit von mehreren Objekten unterschiedlich auszuführen und passen sich dabei den Erfordernissen des Objekts an.
Nehmen wir z.B. die Methode close(). Die Aufgabe dieser Methode ist es, ein aktives Objekt zu schließen.
Mit dem Aufruf von close() als Methode des Objekts document, also document.close(); erreicht man das Schließen des aktuellen Dokuments.
Wenn man nun die gleiche Methode in Zusammenhang mit dem window-Objekt aufruft, also window.close();), dann wird das aktuelle Fenster und damit die gesamte Anwendung geschlossen.
Ein Objekt kann eine Teilmenge eines übergeordneten Objekts sein.
Die JavaScript-Objekte sind deshalb in einer Hierarchie geordnet.
Hier ein Ausschnitt der wichtigsten Objekte:
Einen Überblick über die Eigenschaften und Methoden dieser Objekte findest du in der Objektreferenz.
Beispiel 1:
Die 4. Grafik eines Dokumentes soll einen Rahmen von 1 Pixel Stärke erhalten.window.document.images[3].border = 1
Beispiel 2:
Im 1. Formular eines Dokumentes befindet sich an 3. Stelle ein Textfeld. In dieses Textfeld soll die Zahl 5.2 eintragen werden.window.document.forms[0].elements[2].value = 5.2
Man kann gewissermaßen zwei verschiedene Arten von vordefinierten Objekten unterscheiden:
Dazu gehören:
document, forms[#], elements[#], options[#], history, images[#], location, Math, navigator, screen, frames[#]
Alle Eigenschaften und Methoden, die für diese Objekte implementiert sind, findest du in der Objektreferenz
Beispiel 1: history-Objekt
Das history-Objekt ist vergleichbar mit einer Liste, die die bisher besuchten Seiten enthält.
Will man z.B. wissen, wie viele Einträge diese Liste enthält, so liefert dies die Eigenschaft length: history.length
Möchte man zur vorherigen Seite gehen, so notiert man: history.back() und
soll zur nächsten Seite geblättert werden, so benötigt man: history.forward().
Beispiel 2: Formular-Objekte
Auf einer Seite befinde sich folgendes Formular:
document.forms[0].elements[0].focus();
nname = document.forms[0].elements[1].value;
alert(nname);
geschlecht = document.forms[0].elements[3].checked;
alert(geschlecht);
best = document.forms[0].elements[4].options.length;
alert(best);
Dazu gehören: Array, Date, Image, String, window
Um eine neue Instanz (also ein neues Objekt) dieser Objektklassen zu erzeugen, benötigt man (außer bei String und window) das reservierte Wort new. Also:
Objektname = new Objektklasse
Beispiel 1:
Drei Wörter sollen alphabetisch sortiert werden:
woerter = new Array; //heute ist neues Objekt der Klasse Date
woerter[0] = prompt("1. Wort?","") //1. Wort speichern
woerter[1] = prompt("2. Wort?","") //2. Wort speichern
woerter[2] = prompt("3. Wort?","") //3. Wort speichern
//Auf das neue Objekt woerter lassen sich nun alle Eigenschaften und Methoden der Klasse Array anwenden:
woerter.sort(); //alphabetisch sortieren
anz = woerter.length; //liefert die Anzahl der Wörter
document.write("Anzahl der Wörter: " + anz); //Ausgabe
document.write("<br>Sortiert: " + woerter[0] + ", " + woerter[1] + ", " + woerter[2]); //Ausgabe
Beispiel 2:
Das heutige Datum soll ausgegeben werden:
heute = new Date; //heute ist neues Objekt der Klasse Date
//Auf das neue Objekt heute lassen sich nun alle Methoden der Klasse Date anwenden:
tag = heute.getDate(); //liefert den Tag des Datums (1-31)
monat = heute.getMonth()+1; //liefert den Monat des Datums (0-11)
jahr = heute.getFullYear(); //liefert das Jahr des Datums
document.write(tag + "." + monat + "." + jahr) //Ausgabe des kompletten Datums
Um ein neues String-Objekt zu erzeugen, muss man die Zeichenkette nur einer Variablen übergeben. Die Variable stellt das neue Objekt vom Typ der Klasse String dar, auf dem sich wieder alle Eigenschaften und Methoden der Klasse String anwenden lassen.
Beispiel:
Eine E-Mail-Adresse soll auf Vorhandensein des @-Zeichens überprüft werden:
adresse = prompt("E-Mail?","") //adresse ist neues Objekt der Klasse String
//Auf das neue Objekt adresse lassen sich nun alle Eigenschaften und Methoden der Klasse String anwenden:
anz = adresse.length; //liefert die Anzahl der Zeichen
pos = adresse.indexOf("@"); //Gibt die Position des Auftretens der Zeichenkette @ zurück
document.write("Adresse hat " + anz + " Zeichen.<br>") //Ausgabe
if (pos > 0) document.write("@-Zeichen ist vorhanden!") //Ausgabe
else document.write("@-Zeichen ist nicht vorhanden!") //Ausgabe
Um ein neues window-Objekt zu erzeugen, muss man die Methode open() auf das window-Objekt anwenden und das neue Objekt in einer Variablen speichern. Die Variable stellt dann das neue Objekt vom Typ der Klasse window dar, auf dem sich wieder alle Eigenschaften und Methoden der Klasse window anwenden lassen.
Beispiel:
In ein neues Fenster soll Hallo geschrieben und das Fenster nach 5 Sekunden wieder geschlossen werden:
newwin = window.open("","fenster") //newwin ist neues Objekt der Klasse window
//Auf das neue Objekt newwin lassen sich nun alle Eigenschaften und Methoden der Klasse window anwenden:
newwin.document.write("Hallo!"); //schreibt in das neue Fenster
newwin.setTimeout('window.close()',5000) //schließt neues Fenster nach 5 Sekunden
Wie wir bereits wissen, ist JavaScript ist eine objektbasierte Programmiersprache.
Neben der Möglichkeit auf bereits vorhandene Objekte, wie z.B. window, document oder forms[#] zugreifen zu können, ist es auch möglich, eigene Objekte zu erstellen.
Eigene Objekten können über die Punktschreibweise mit Eigenschaften und Methoden verbunden werden.
Beispiel:
if (MeinAuto.farbe == 'giftgrün') MeinAuto.umlackieren('gelb')
JavaScript ist nicht konsequent objektorientiert.
Nicht implementiert ist beispielsweise das Konzept der Vererbung.
Eigenschaften eines Objekts können überdies hinaus auch ohne Methoden verändert werden. Das Ergebnis des obigen Beispiels könnte demnach auch folgendermaßen erreicht werden:
if (MeinAuto.farbe == 'giftgrün') MeinAuto.farbe = 'gelb'
Wie muss nun man vorgehen, um eigene Objekte mit entsprechenden Eigenschaften und Methoden zu implementieren?
Im Folgenden werden die notwendigen Schritte für die Entwicklung einer objektorientierten Adressverwaltung vorgestellt.
Das Objekt adresse soll die Adresse einer Person speichern. Hierfür sind folgende Eigenschaften vorgesehen:
Um in JavaScript ein eigenes Objekt zu erzeugen, muss zunächst ein Konstruktor definiert werden.
Der Konstruktor erzeugt eine Instanz des Objekts. Für das Objekt adresse sieht der Konstruktor folgendermaßen aus:
function adresse(vorname, nachname, strasse, plz, ort) {
this.vorname = vorname;
this.nachname = nachname;
this.strasse = strasse;
this.plz = plz;
this.ort = ort;
}
Ein Konstruktor ist in JavaScript aufgebaut wie eine normale Funktion.
Im obigen Beispiel werden der Funktion Parameter übergeben, die den Angaben entsprechen, die im Objekt als Eigenschaften gespeichert werden sollen.
Der Name der Kontruktorfunktion legt den Namen des Objekts fest. Mit dem Konstruktor adresse() kann somit ein Objekt vom Typ adresse erzeugt werden.
Über das Schlüsselwort this werden dem Objekt die einzelnen übergebenen Parameter zugewiesen und als Eigenschaften gespeichert.
Analog zu den vordefinierten Objekten in JavaScript, verwendet man bei selbstdefinierten Objekten den Operator new, um eine Instanz eines Objekts zu erzeugen.
person1=new adresse("Detlef","Düster","Dunkelstrasse 11","66666","Nachthausen");
Das neue Objekt kann mit dem Namen person1 angesprochen werden.
Um z.B. das Element vorname von person1 auszugeben, schreibt man:
window.alert(person1.vorname);
Nachdem ein Objekt Eigenschaften besitzt, kann man diese weiterverarbeiten, also z.B. in unserer Anwendung die Adressdaten einer Person per document.write() ausgeben.
document.write(person1.vorname + " ");
document.write(person1.nachname + " ");
document.write(person1.strasse + " ");
document.write(person1.plz + " ");
document.write(person1.ort);
Bei mehreren Instanzen des Objekts adresse, würde die Ausgabe sehr viele Codezeilen (mit immer wieder document.write) umfassen.
Es bietet sich deshalb an, dem Objekt adresse eine Methode ausgabe() zuzuweisen, die jede beliebige Adresse in einem bestimmten Format ausgeben kann.
Zunächst ist die geplante Methode als dem Objekt zugehörig im Konstruktor zu registrieren:
function adresse(vorname, nachname, strasse, plz, ort) {
this.vorname = vorname;
this.nachname = nachname;
this.strasse = strasse;
this.plz = plz;
this.ort = ort;
this.ausgabe = ausgabe;
}
Die Zeile this.ausgabe = ausgabe im Konstruktor gibt an, dass ausgabe eine Methode des Objekts adresse sein soll.
Zu beachten ist hierbei, dass an dieser Stelle keine Klammern hinter den Methodennamen geschrieben werden, ansonsten würde dies als direkter Aufruf einer Funktion ausgabe() aufgefasst.
Die Definition der Methode ausgabe() erfolgt als normale JavaScript-Funktion und wird zum Beispiel hinter den Konstruktor geschrieben:
function adresse(...) {
...
this.ausgabe = ausgabe;
}
function ausgabe() {
document.write(this.vorname + ' ');
document.write(this.nachname + ' ');
document.write(this.strasse + ' ');
document.write(this.plz + ' ');
document.write(this.ort + ' ');
}
Das Schlüsseöwort this kann hierbei wie im Kontruktor eingesetzt werden.
Dadurch, dass die Methode ausgabe() für das Objekt adresse registriert wurde, sind der Methode die Eigenschaften von adresse bekannt und können über this angesprochen werden.
Um eine Adresse auszugeben, genügt nun an geeigneter Stelle ein einfacher Methodenaufruf der Form:
person1.ausgabe();
