Vordefinierte JavaScript-Objekte
Objekte sind fest umgrenzte Datenelemente mit Eigenschaften und oft auch mit objektgebundenen Funktionen (Methoden).
Daß JavaScript eine Erweiterung von HTML darstellt, liegt vor allem an den vordefinierten Objekten, die Ihnen in JavaScript zur Verfügung stehen. Über diese vordefinierten Objekte können Sie beispielsweise einzelne Elemente eines HTML-Formulars abfragen oder ändern.
Ein Objekt kann eine Teilmenge eines übergeordneten Objekts sein. Die JavaScript-Objekte sind deshalb in einer Hierarchie geordnet. Das hierarchiehöchste Objekt ist in JavaScript das Fenster-Objekt (window). Fenster haben Eigenschaften wie einen Titel, eine Größe usw. Der Inhalt eines Fensters ist das nächstniedrigere Objekt, nämlich das im Fenster angezeigte Dokument (in JavaScript das Objekt document). In der Regel ist der Fensterinhalt eine HTML-Datei. Eine solche Datei kann bestimmte, durch HTML-Tags definierte Elemente enthalten, wie zum Beispiel Formulare, Verweise, Grafikreferenzen usw. Für solche untergeordneten Elemente gibt es wieder eigene JavaScript-Objekte, zum Beispiel das Objekt forms für Formulare. Ein Formular besteht seinerseits aus verschiedenen Elementen, zum Beispiel aus Eingabefeldern, Auswahllisten oder Buttons zum Absenden bzw. Abbrechen. In JavaScript gibt es dafür ein Objekt elements, mit dem Sie einzelne Felder und andere Elemente innerhalb eines Formulars ansprechen können.
Neben den hierarchisch geordneten JavaScript-Objekten gibt es auch solche, die nicht direkt in die Hierarchie passen. Das sind zum Beispiel Objekte für Datums- und Zeitrechnung, für mathematische Aufgaben oder für Zeichenkettenverarbeitung.
Eine Übersicht der vordefinierten JavaScript-Objekte finden Sie in der 
JavaScript Objekt-Referenz. Dort werden zu jedem Objekt die verfügbaren 
Eigenschaften und
Methoden vorgestellt. Im folgenden wird ein Beispiel vorgestellt, wie Sie ein vordefiniertes JavaScript-Objekt typischerweise verwenden können.
Vordefinierte JavaScript-Objekte verwenden
Anzeigebeispiel: So sieht's aus
JavaScript-Objekte können Sie jederzeit verwenden.
Beispiel:
<html>
<head>
<title>Datum und Zeit</title>
<script language="JavaScript">
<!--
function SagDatumUndZeit()
{
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
var Jahr = Jetzt.getYear();
var Stunden = Jetzt.getHours();
var Minuten = Jetzt.getMinutes();
var NachVoll = ((Minuten < 10) ? ":0" : ":");
alert("Guten Tag!\nHeute ist der "
+ Tag + "." + Monat + "." + Jahr + "\nEs ist jetzt "
+ Stunden + NachVoll + Minuten + " Uhr");
}
// -->
</script>
</head>
<body onload="SagDatumUndZeit()">
</body>
</html>
|
Erläuterung:
Im Beispiel wird innerhalb eines 
JavaScript-Bereichs mit Hilfe des vordefinierten JavaScript-Objekts Date das aktuelle Datum und die aktuelle Uhrzeit ermittelt. Beim Einlesen der Datei wird das Ergebnis zusammen mit einem Begrüßungstext sauber formatiert in einem Meldungsfenster ausgegeben.
Zuerst muß eine dazu neue Variable angelegt werden. Im Beispiel ist dies die Variable Jetzt. Diese Variable soll auf Daten des Date-Objekts zugreifen können. Dies geschieht durch ein Istgleichzeichen hinter dem Variablennamen. Dahinter folgt das reservierte JavaScript Wort new und dahinter, durch ein Leerzeichen getrennt, der Aufruf der von Date() zum Erzeugen einer neuen Instanz des Objekts Date.
Um die einzelnen Daten der Objektinstanz von Date, also Tag, Monat, Jahr usw. anzusprechen, stehen entsprechende Methoden zur Verfügung. Diese Methoden, z.B. getDate() oder getHours(), haben als Rückgabewert jeweils einen Datums/Uhrzeit-Bestandteil. So liefert getDate() beispielsweise den aktuellen Tag des Monats und getHours() die aktuelle Stundenzahl des Tages. Im Beispiel wird für jeden der benötigten Bestandteile eine Variable definiert. In der Variablen Tag wird beispielsweise durch Aufruf von Jetzt.getDate() der aktuelle Tag des Monats gespeichert.
Die Anweisung im Beispiel, die mit NachVoll ... beginnt, kann an dieser Stelle nicht näher erläutert werden. Die Anweisung ist eine Vorbereitung zur sauberen Formatierung der Uhrzeit.
Beachten Sie:
Die einzelnen Methoden des im Beispiel verwendeten Objekts Date, wie zum Beispiel getDate(), werden bei der Referenz des Objekts Date beschrieben.
Eigene Objekte definieren
Sie können eigene Objekte definieren, wenn Sie streng objektorientiert in JavaScript programmieren wollen.
Um ein eigenes Objekt anzulegen, sind zwei Schritte nötig. Zuerst müssen Sie das Objekt selbst und seine Eigenschaften "deklarieren". Im zweiten Schritt können Sie anschließend eine Instanz dieses Objekts definieren. Mit dieser Objekt-Instanz können Sie dann Programmprozeduren durchführen.
Beispiel:
<html>
<head>
<title>Beispiel mit JavaScript</title>
<script language="JavaScript">
<!--
function Farbe(Farbwert_R, Farbwert_G, Farbwert_B)
{
this.Farbwert_R = Farbwert_R;
this.Farbwert_G = Farbwert_G;
this.Farbwert_B = Farbwert_B;
}
function TestObjekt()
{
Test = new Farbe("33","99","C0");
alert("Der Rotwert meiner Farbe ist Hexadezimal " + Test.Farbwert_R);
}
// -->
</script>
</head>
<body onload="TestObjekt()">
</body>
</html>
|
Erläuterung:
Um ein neues Objekt und seine Eigenschaften anzulegen, müssen Sie innerhalb eines JavaScript-Bereichs oder innerhalb einer separaten JavaScript-Datei eine eigene Funktion definieren, die so aussieht wie im Beispiel die Funktion Farbe(...). Der Name, den Sie der Funktion geben (im Beispiel der Name Farbe) ist zugleich der Name des Objekts, das Sie mit dieser Funktion anlegen. Als Parameter, die die Funktion erwartet, notieren Sie die Eigenschaften, die Ihr Objekt haben soll. Die Parameternamen sind zugleich die Namen der Objekteigenschaften. Im Beispiel sind das die Eigenschaften Farbwert_R, Farbwert_G und Farbwert_B, denn es soll ein Objekt angelegt werden, das Rot-, Grün- und Blauwert einer Farbe speichern kann. Innerhalb der Funktion notieren Sie alle Anweisungen so wie im Beispiel: für jede Eigenschaft, die bei den Funktionsparametern festgelegt wurde, notieren Sie eine Anweisung, beginnend mit dem reservierte JavaScript Wort this, gefolgt von einem Punkt und dem Parameternamen. Dahinter notieren Sie ein Istgleichzeichen, und hinter dem Istgleichzeichen nochmals den Parameternamen. Am Ende jeder Anweisung muß ein Strichpunkt stehen.
Nachdem das Objekt angelegt ist, können Sie an anderen Stellen innerhalb Ihres JavaScripts Instanzen dieses Objekt definieren. Dies geschieht mit Hilfe einer Variablen und dem reservierte JavaScript Wort new. Im Beispiel wird zu Testzwecken eine zweite Funktion TestObjekt() definiert. Darin wird zunächst eine Variable Test angelegt. Diese Variable soll Daten des angelegten Objekts Farbe enthalten. Dies geschieht durch ein Istgleichzeichen hinter dem Variablennamen. Dahinter folgt das reservierte JavaScript Wort new und dahinter, durch ein Leerzeichen getrennt, der Name der Funktion, mit der das gleichnamige Objekt angelegt wurde, im Beispiel Farbe. Als Parameter werden dieser Funktion irgendwelche brauchbaren Werte übergeben, im Beispiel "33", "99" und "C0" (typische hexadezimale Farbwerte, wie sie in HTML zum Einsatz kommen). Der Rot-Wert der Farbe wird beim Einlesen der HTML-Datei in einem Meldungsfenster ausgegeben.
Eigenschaften von Objekten
Anzeigebeispiel: So sieht's aus
Objekte können Eigenschaften haben. Ein selbst definiertes Objekt "Mensch" könnte zum Beispiel die Eigenschaften Name, Alter, Geschlecht und Muttersprache haben. Vordefinierte JavaScript-Objekte haben ebenfalls Eigenschaften. So hat das Objekt Math zum Beispiel eine Eigenschaft "PI" (Math.PI). Auf diese Weise läßt sich mit der mathematischen Konstante PI rechnen, ohne deren genauen Wert zu kennen.
Eigenschaften von Objekten können Sie innerhalb Ihres JavaScript-Codes jederzeit auslesen, und in vielen Fällen können Sie die Werte von Eigenschaften auch ändern. So können Sie beispielsweise dem im Browser-Fenster angezeigten Dokument eine neue, gültige URL-Adresse zuweisen. Dadurch bewirken Sie, daß der WWW-Browser einen Sprung zu der zugewiesenen URL-Adresse ausführt, genau so, wie wenn der Anwender auf einen entsprechenden Verweis klicken würde.
Beispiel:
<html>
<head>
<title>Browser des Anwenders auslesen</title>
<script language="JavaScript">
<!--
var BrowserName = navigator.appName;
var BrowserVersion = navigator.appVersion;
alert("Ah ja, Sie verwenden also den " + BrowserName +
", und zwar in der Version " + BrowserVersion);
// -->
</script>
</head>
<body>
</body>
</html>
|
Erläuterung:
Im Beispiel werden innerhalb eines JavaScript-Bereichs zwei Eigenschaften des vordefinierten JavaScript-Objekts navigator in zwei entsprechenden Variablen gespeichert. Das navigator-Objekt stellt Ihnen über seine Eigenschaften verschiedene Informationen über den verwendeten WWW-Browser des Anwenders zur Verfügung. Im obigen Beispiel werden die Eigenschaften des Browser-Namens (gespeichert in der Objekteigenschaft navigator.appName) und der Browser-Version (gespeichert in der Objekteigenschaft navigator.appVersion) ermittelt. Anschließend werden die ermittelten Daten in einem Meldungsfenster am Bildschirm ausgegeben.
Objekteigenschaften sprechen Sie an, indem Sie zuerst den Namen des Objekts notieren, dahinter einen Punkt, und dahinter den Namen der Eigenschaft. Dabei sind keine Leerzeichen erlaubt!
Beachten Sie:
Da im obigen Beispiel keine Funktion definiert worden ist, wird der JavaScript-Code beim Einlesen der Datei einfach ausgeführt.
Objekt-Methoden
Objekten können Methoden zugeordnet sein. Das sind Funktionen, die Aktionen ausführen, aber im Gegensatz zu alleinstehenden Funktionen an ein bestimmtes Objekt gebunden sind. Viele vordefinierte JavaScript-Objekte haben Methoden. So gibt es zum Beispiel das vordefinierte JavaScript-Objekt [window].history, in dem die bereits besuchten URL-Adressen eines Browser-Fensters gespeichert sind. Dazu gibt es eine Methode history.back(), mit der Sie in JavaScript einen Rücksprung zu einer bereits besuchten URL-Adresse erzwingen können.
Beispiel:
<html>
<head>
<title>Geh hin wo Du herkommst</title>
</head>
<body>
<a href="javascript:history.back();">Geh hin wo Du herkommst</a>
</body>
</html>
|
Erläuterung:
Das Beispiel enthält einen Verweis mit einer speziellen Syntax. Diese Syntax erlaubt Ihnen, beim Anklicken des Verweises JavaScript-Code aufzurufen. Im Beispiel ist das ein Aufruf der Methode back() des Objekts history.
Objektmethoden sprechen Sie an, indem Sie zuerst den Namen des Objekts notieren, dahinter einen Punkt, dahinter den Namen der Methode, und dahinter eine öffnende und eine schließende Klammer. Dabei sind keine Leerzeichen erlaubt! Einige Methoden können auch Parameter beim Aufruf erwarten. Diese Parameter müssen Sie dann zwischen der öffnenden und der schließenden Klammer übergeben.
Beachten Sie:
Mehr zu der Aufrufsyntax bei Verweisen erfahren Sie im Abschnitt über Event-Handler.
© 1997 
Stefan Münz, s.muenz@euromail.com
