SELFHTML: JavaScript / Sprachelemente / Objekte, Eigenschaften und Methoden
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche Aufgabe Objekte in JavaScript haben, was es mit Methoden und Eigenschaften auf sich hat, und wie Sie eigene Objekte definieren.
Keywords: SELFHTML, JavaScript, Objekte, Eigenschaften, Mehtoden, Objektfunktionen, with, this
Date: 2005-08-22T21:21:39+02:00

| # Objekte, Eigenschaften und Methoden
| Vordefinierte JavaScript-Objekte Vordefinierte JavaScript-Objekte verwenden Eigene Objekte definieren Eigenschaften von Objekten Objektmethoden Abfragen ob ein Objekt existiert Mehrere Anweisungen mit einem Objekt ausführen (with) Auf aktuelles Objekt Bezug nehmen (this)

## Vordefinierte JavaScript-Objekte

Objekte sind fest umgrenzte Datenelemente mit Eigenschaften und oft auch mit objektgebundenen Funktionen (Methoden).

Dass 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 Fensterobjekt (`window`). Fenster haben Eigenschaften wie einen Namen, 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-Objektreferenz. Dort werden zu jedem Objekt die verfügbaren Eigenschaften und Methoden vorgestellt.

## Vordefinierte JavaScript-Objekte verwenden

JavaScript-Objekte können Sie jederzeit verwenden.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    </head>
    <body>
    <script type="text/javascript">
    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" : ":");
    if (Jahr < 2000)
      Jahr = Jahr + 1900;
    document.write("<h2>Guten Tag!<\/h2><b>Heute ist der " +
                   Tag + "." + Monat + "." + Jahr + ". Es ist jetzt " +
                   Stunden + NachVoll + Minuten + " Uhr<\/b>");
    </script>
    </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 und HTML-formatiert ausgegeben.

Zuerst muss dazu eine neue Variable angelegt werden. Im Beispiel ist das die Variable `Jetzt`. Diese Variable soll auf Daten des `Date`-Objekts zugreifen können. Dies geschieht durch ein Ist-Gleich-Zeichen hinter dem Variablennamen. Dahinter folgt das reservierte Wort `new`, und dahinter, durch ein Leerzeichen getrennt, der Aufruf 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 Objektinstanz können Sie dann Programmprozeduren durchführen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript">
    function Farbe (R, G, B) {
      this.R = R;
      this.G = G;
      this.B = B;
      this.hex = "#";
    }

    function HintergrundWechseln () {
      var Hintergrund = new Farbe("E0", "FF", "E0");
      document.bgColor = Hintergrund.hex + Hintergrund.R + Hintergrund.G + Hintergrund.B;
    }
    </script>
    </head><body bgcolor="#FFFFFF">
    <h1>Das eigene Farb-Objekt mit JavaScript</h1>
    <a href="javascript:HintergrundWechseln()">Hintergrundfarbe wechseln</a>
    </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 aussehen kann 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 `R`, `G` und `B`, denn es soll ein Objekt angelegt werden, das Rot-, Grün- und Blauwert einer Farbe speichern kann. `R`, `G` und `B` sind dabei übrigens selbstvergebene Namen! Innerhalb der Funktion notieren Sie alle Anweisungen so wie im Beispiel gezeigt: 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 Gleichheitszeichen, und hinter dem Gleichheitszeichen nochmals den Parameternamen. Am Ende jeder Anweisung muss ein Strichpunkt stehen.
Natürlich können Sie für jedes Objekt auch feste (nicht durch Parameter beeinflusste) Eigenschaften definieren. Im Beispiel ist die Eigenschaft `hex` eine feste Eigenschaft, die für jede Instanz des Objektes existiert. Notieren Sie dazu hinter dem Eigenschaftsnamen den jeweiligen Wert der Eigenschaft.

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 reservierten JavaScript Wort `new`. Im Beispiel wird eine zweite Funktion `HintergrundWechseln()` definiert. Darin wird zunächst eine Variable `Hintergrund` angelegt. Diese Variable soll Daten des angelegten Objekts `Farbe` enthalten. Dies geschieht durch ein Gleichheitszeichen hinter dem Variablennamen. Dahinter folgt das 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).

Anschließend ist die Variable `Hintergrund` an das Farbobjekt gebunden, und über sie lassen sich die Eigenschaften des Objekts setzen oder abfragen. Im Beispiel steht die Anweisung:
`document.bgColor = Hintergrund.hex + Hintergrund.R + Hintergrund.G + Hintergrund.B;`
Damit wird die Hintergrundfarbe der aktuell angezeigten Seite verändert. Normalerweise könnte man `document.bgColor` so etwas zuweisen wie `"#C0C0EE"`. Auch im Beispiel wird ein Farbwert dieser Art zugewiesen, jedoch zusammengesetzt aus den Einzeleigenschaften des Farbobjekts, das in der Instanz `Hintergrund` gespeichert ist. Die Funktion `HintergrundWechseln()` wird aufgerufen, wenn der Anwender auf den Verweis klickt, der in der HTML-Datei enthalten ist.

### Beachten Sie:

Bereits Opera 5 erlaubt das Definieren von eigenen Objekten. Das obige Beispiel wird allerdings erst im Opera 7 korrekt ausgeführt. Dies liegt daran, dass Opera erst ab Version 7 die Eigenschaft `document.bgColor` unterstützt.

## Eigenschaften von Objekten

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ässt 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 einen neuen, gültigen URI zuweisen. Dadurch erreichen Sie, dass der WWW-Browser einen Sprung zu der zugewiesenen Adresse so ausführt, als ob der Anwender auf einen entsprechenden Verweis klicken würde.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title></head><body>
    <h1>Die Seite, die Sie genau erkennt</h1>
    <script type="text/javascript">
    var BrowserName = navigator.appName;
    var BrowserVersion = navigator.appVersion;
    document.write("<p>Ah ja, Sie verwenden also den <b>" + BrowserName +
                   "<\/b>, und zwar in der Version <b>" + BrowserVersion +
                   "<\/b><\/p>");
    </script>
    </body></html>

### Erläuterung:

Im Beispiel werden innerhalb eines JavaScript-Bereichs zwei Eigenschaften des vordefinierten JavaScript-Objekts navigator in zwei entsprechenden Variablen namens `BrowserName` und `BrowserVersion` 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 mit `document.write()` dynamisch ins Browser-Fenster geschrieben.

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!

## Objektmethoden

Objekte können Methoden haben. 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 history, in dem die bereits besuchten URIs eines Browser-Fensters gespeichert sind. Dazu gibt es eine Methode `history.back()`, mit der Sie in JavaScript einen Rücksprung zu einer bereits besuchten Adresse erzwingen können.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Geh wo hin</title></head><body>
    <p><a href="javascript:history.back();">Geh hin wo Du herkommst</a></p>
    </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.

## Abfragen ob ein Objekt existiert

Es gibt viele JavaScript-Objekte, und es ist oft schwer durchschaubar, welcher Browser in welcher Version welches Objekt interpretiert. Objekte, die nicht interpretierbar sind, führen in den Browsern zu Fehlermeldungen. So kann es vorkommen, dass ein Script, das mit Netscape 4.7 oder Internet Explorer 5.0 wunderbar funktioniert, bei Netscape 4.0 oder Internet Explorer 4.0 zu Fehlermeldungen führt, weil ein Objekt nicht bekannt ist. Deshalb gibt es eine Möglichkeit, den Aufruf von Eigenschaften und Methoden eines Objekts von einer Abfrage abhängig zu machen, ob das Objekt dem Browser überhaupt bekannt ist.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html>
    <head><title>Test</title>
    </head>
    <body>
    <h1>Objekt-Abfrage</h1>
    <script type="text/javascript">
    if (!document.images) {
      document.write("<p>Schade, Ihr Browser kennt das image-Objekt nicht - Sie verpassen was!<br>");
    } else {
      document.write("<p>Gut, Ihr Browser kennt das image-Objekt!<br>");
    }

    if (document.all) {
      document.write("Ihr Browser kennt Microsofts all-Objekt!<\/p>");
    } else {
      document.write("Ihr Browser kennt nicht Microsofts all-Objekt.<\/p>");
    }
    </script>
    </body>
    </html>

### Erläuterung:

Mit einer bedingten Anweisung `if (...)` können Sie überprüfen, ob ein Objekt verfügbar ist. Als Ausdruck für die Bedingung notieren Sie innerhalb der Klammern hinter `if` einfach das Objekt, nach dem Sie fragen. Wenn das Objekt verfügbar ist, wird intern der Wert `true` (wahr) zurückgegeben. In dem Zweig der if-else-Abfrage, die diesen Fall verarbeitet, können Sie dann loslegen und zum Beispiel Befehle verwenden, die dieses Objekt verwenden. In dem anderen Zweig der if-else-Abfrage können Sie dann beispielsweise eine eigene Meldung ausgeben, dass dieses JavaScript leider Befehle verwendet, die der Browser des Anwenders nicht interpretiert.

Im obigen Beispiel werden mit `document.write` unterschiedliche Sätze ins Browser-Fenster geschrieben. Dazu wird zunächst gefragt, ob das Unterobjekt document.images nicht verfügbar ist (die verneinte Abfrage ergibt sich durch das Ausrufezeichen vor dem Objekt). Ist das Objekt also nicht verfügbar, dann wird im Beispiel ausgegeben, dass dies sehr schade sei usw. Im anderen Fall, also wenn das Objekt verfügbar ist, wird eine erfreutere Reaktion ausgegeben.

Im zweiten Teil des Beispiels wird die Verfügbarkeit des Unterobjekts document.all abgefragt, das nur einigen Browsern bekannt ist, unter anderem dem Internet Explorer. Auch dabei werden im Beispiel wieder je nach Verfügbarkeit zwei unterschiedliche Sätze ausgegeben. An diesem Beispiel ist auch ersichtlich, dass die Abfrage der Verfügbarkeit von Objekten auch zur Browser-Groberkennung dienen kann - vorausgesetzt, man kennt sich bei den vordefinierten JavaScript-Objekten aus und weiß, welche Objekte nur von bestimmten Browsern interpretiert werden.

## Mehrere Anweisungen mit einem Objekt ausführen (with)

Hin und wieder kommt es vor, dass Sie mehrere Anweisungen in Folge notieren, die alle mit dem gleichen Objekt arbeiten. Für diesen Zweck können Sie, wenn Sie wollen, eine spezielle verkürzte Schreibweise verwenden.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    </head><body>
    <script type="text/javascript">
    with (document) {
      open();
      write("<p>Diese Seite hat den Titel " + title + "<\/p>");
      close();
    }
    </script>
    </body></html>

### Erläuterung:

Mit `with (Objektname)` leiten Sie eine solche Schreibweise ein (with = mit). Da normalerweise mehrere Anweisungen folgen, die dieses Objekt verwenden, müssen Sie alle diese Anweisungen in geschweifte Klammern einschließen.

Im obigen Beispiel wird mit dem document-Objekt gearbeitet. Innerhalb der geschweiften Klammern werden die Methoden `open()`, `write()` und `close()` sowie die Eigenschaft `title` verwendet. Sie alle gehören zum `document`-Objekt. Normalerweise müssten Sie notieren: `document.open()` oder `document.title`. Durch die spezielle Syntax mit `with(document)` entfällt dies.

### Beachten Sie:

Es ist auch möglich, untergeordnete Objekte auf diese Weise anzusprechen, z.B.:

    with (document.MeinFormular.Feld_1)
      value = "Stefan";

Achten Sie darauf, dass die aufgerufene Eigenschaft auch tatsächlich existiert. Wenn diese fehlt, erhalten Sie eine JavaScript-Fehlermeldung.

## Auf aktuelles Objekt Bezug nehmen (this)

Es gibt Fälle, in denen es eindeutig ist, auf welches Objekt sich ein Befehl bezieht. In solchen Fällen können Sie eine verkürzte Schreibweise benutzen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    </head><body>
    <form name="Eingabe">
    <input type="text" name="Feld">
    <input type="button" value="OK" onclick="alert(this.form.Feld.value)">
    </form>
    </body></html>

### Erläuterung:

Mit dem Schlüsselwort `this` können Sie auf ein aktuelles Objekt Bezug nehmen. Im Beispiel wird ein Formular mit einem Eingabefeld und einem Button definiert. Wenn der Anwender auf den Button klickt, tritt der Event-Handler `onclick` in Aktion, der als Attribut in dem HTML-Tag für den Button notiert ist. Im Beispiel wird in einem Meldungsfenster der Wert ausgegeben, den der Anwender in dem Eingabefeld eingegeben hat. Normalerweise würde der Befehl so notiert:
`alert(document.Eingabe.Feld.value)`
Da der Befehl jedoch innerhalb des Formulars steht, auf das er sich bezieht, dürfen Sie auch schreiben:
`alert(this.form.Feld.value)`
Das Wort `form` ist dabei vom forms-Objekt abgeleitet.

| Funktionen
| Variablen und Werte

© 2007 Impressum