7 Bisher haben Sie in diesem JavaScript-Kurs Elemente der klassischen Programmierung wie Bedingungen, Schleifen etc. kennen gelernt. JavaScript bietet aber außerdem einen modernen objektorientierten Ansatz, dessen wichtigste Eigenschaften in diesem Kapitel vorgestellt werden. Was erfahren Sie in diesem Kapitel? Was Objekte, Eigenschaften und Methoden sind Wie man vordefinierte Objekte verwendet Wie man benutzerdefinierte Objekte erstellt Welche hilfreichen Objektanweisungen Sie verwenden können 7.1 Vordefinierte JavaScript-Objekte Objekte sind generell gesprochen 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 und ändern oder auf die Systemzeit und das Systemdatum Ihres Rechners zugreifen. Ein Objekt kann eine Teilmenge eines übergeordneten Objekts sein. Die JavaScript- Objekte sind deshalb in einer Hierarchie geordnet. Abbildung 14: Objekthierarchie von JavaScript 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 bit media e-learning solution Seite 57
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. Abbildung 15: JavaScript-Objekte in einem HTML-Formular 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 empfehlenswerte Übersicht der vordefinierten JavaScript-Objekte finden Sie in der JavaScript Objekt-Referenz von Selfhtml. Dort werden zu jedem Objekt die verfügbareng:\programmeselfhtml" l Eigenschaften und Methoden vorgestellt. JavaScript-Objekte können Sie an allen Positionen im Code verwenden. <title>objekt-test</title> <!-- function Datum() { var HDatum = new Date(); var Tag = HDatum.getDate(); var Monat = HDatum.getMonth()+1; var Jahr = HDatum.getYear(); bit media e-learning solution Seite 58
alert("hallo!\nheute ist der " + Tag + "." + Monat + "." + Jahr); } // --> <body onload="datum()"> Im Beispiel wird innerhalb eines JavaScript-Bereichs mit Hilfe des vordefinierten JavaScript-Objekts Date das aktuelle Datum ermittelt. Beim Einlesen der Datei wird das Ergebnis zusammen mit einem Begrüßungstext sauber formatiert in einem Meldungsfenster ausgegeben. Abbildung 16: Meldungsfenster, das mit dem JavaScript-Befehl 'alert()' geöffnet wurde. Zuerst muss dazu eine neue Variable angelegt werden. Im Beispiel ist dies die Variable HDatum. 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 von Date() zum Erzeugen einer neuen Instanz des Objekts Date. Um die einzelnen Daten der Objektinstanz von Date, also Tag, Monat und Jahr anzusprechen, stehen entsprechende Methoden (siehe weiter unten) zur Verfügung. Diese Methoden, z.b. getdate() oder getyear(), haben als Rückgabewert jeweils einen Datums/Uhrzeit-Bestandteil. So liefert getdate() beispielsweise den aktuellen Tag des Monats und getyear() das aktuelle Jahr. Achtung: Die Methode getmonth() liefert für Jänner den Wert 0, für Dezember den Wert 11. Um auf das aktuelle Monat zugreifen zu können, müssen Sie (wie im Beispiel gezeigt) 1 dazuaddieren! Im Beispiel wird für jeden der benötigten Bestandteile eine Variable definiert. In der Variablen Tag wird beispielsweise durch Aufruf von HDatum.getDate() der aktuelle Tag des Monats gespeichert. 7.2 Benutzerdefinierte Objekte Sie können in JavaScript auch eigene Objekte definieren. Dabei können Sie die objektorientierte Auslegung von JavaScript verwenden. bit media e-learning solution Seite 59
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. <title>beispiel mit einem eigenen Objekt</title> <!-- function Person(vname, nname, gjahr) { this.vorname = vname; this.nachname = nname; this.geburtsjahr = gjahr; } function ErzeugePerson() { Test = new Person("Wolfgang Amadeus","Mozart",1756); alert("die Person heißt" + Test.Nachname); } // --> <body onload="erzeugeperson()"> 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 Person(...). Der Name, den Sie der Funktion geben (im Beispiel der Name Person) 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. Im Beispiel sind das die Eigenschaften Vorname, Nachname und Geburtsjahr, die die Person genauer spezifizieren. 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 reservierten JavaScript-Wort this, gefolgt von einem Punkt und der Objekteigenschaft. Dahinter notieren Sie ein Istgleichzeichen und hinter dem Istgleichzeichen den Parameternamen. Am Ende jeder Anweisung muss 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 reservierten JavaScript Wort new. Im Beispiel wird zu Testzwecken eine zweite Funktion ErzeugePerson() definiert. Darin wird zunächst eine Variable Test angelegt. Diese Variable soll Daten des angelegten Objekts Person 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 bit media e-learning solution Seite 60
das gleichnamige Objekt angelegt wurde, im Beispiel Person. Als Parameter werden dieser Funktion irgendwelche brauchbaren Werte übergeben, im Beispiel "Wolfgang Amadeus", "Mozart" und 1756. Der Nachname der Person wird beim Einlesen der HTML-Datei in einem Meldungsfenster ausgegeben. Abbildung 17: Meldungsfenster, das mit dem JavaScript-Befehl 'alert()' geöffnet wurde. 7.3 Eigenschaften von Objekten Objekte können Eigenschaften besitzen. Ein selbst definiertes Objekt "Person" könnte zum Beispiel die Eigenschaften Vorname, Nachname und Geburtsdatum 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 eine neue, gültige URL-Adresse zuweisen. Dadurch bewirken Sie, dass 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. <title>eigenschaften zuweisen</title> <!-- document.url = "http://www.indot.at" // --> <body> Im nächsten Beispiel werden Eigenschaften ausgelesen und nicht geändert: <title>browser des Benutzers auslesen</title> <!-- var BrowserName = navigator.appname; bit media e-learning solution Seite 61
var BrowserVersion = navigator.appversion; alert("sie verwenden den " + BrowserName + ", in der Version " + BrowserVersion); // --> <body> 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. Abbildung 18: Meldungsfenster zum obigen Beispiel 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! Da im obigen Beispiel keine Funktion definiert worden ist, wird der JavaScript- Code beim Einlesen der Datei einfach ausgeführt. 7.4 Objekt-Methoden Objekte können neben Eigenschaften auch sogenannte Methoden besitzen. Methoden 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 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. <title>gehe einen Schritt zurueck!</title> bit media e-learning solution Seite 62
<body> <a href="javascript:history.back();">zurueck</a> 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. 7.5 Spezielle Objektanweisungen Bisher haben Sie erfahren, was Objekte sind, welche Eigenschaften sie besitzen und wie man Methoden nutzt. In diesem Abschnitt werden Ihnen einige nützliche Tipps im Umgang mit Objekten gegeben. 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 verkürzte, spezielle Schreibweise verwenden. <title>test mit with</title> <body> with(document) { open(); write("diese Seite hat die Hintergrundfarbe " + bgcolor); close(); } Mit with(objektname) leiten Sie eine solche Schreibweise ein (with = mit). Da normalerweise mehrere Anweisungen folgen, die dieses Objekt verwenden, müssen Sie all diese Anweisungen in geschwungene Klammern einschließen. Im obigen Beispiel wird mit dem DOCUMENT-Objekt gearbeitet. Innerhalb der geschwungenen Klammern werden die Methoden open(), write() und close() sowie die Eigenschaft bgcolor verwendet. Sie alle gehören zum document-objekt. Normalerweise müssten Sie notieren: document.open() oder document.bgcolor. Durch die spezielle Syntax mit with(document) entfällt dies. bit media e-learning solution Seite 63
Abbildung 19: Browseransicht des obigen Beispiels 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. <title>test mit this</title> <body> <form name="eingabeformular"> <input type=text name="eingabefeld"> <input type=button value="ok" onclick="alert(this.form.eingabefeld.value)"> </form> 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. bit media e-learning solution Seite 64
Abbildung 20: Browseransicht des obigen Beispiels Normalerweise würde der Befehl so notiert: alert(document.eingabeformular.eingabefeld.value) Da der Befehl jedoch innerhalb des Formulars steht, auf das er sich bezieht, dürfen Sie auch schreiben: alert(this.form.eingabefeld.value) Das Wort form ist dabei vom FORMS-Objekt abgeleitet. Abfragen, ob ein Objekt existiert Es gibt mittlerweile ziemlich 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.x wunderbar funktioniert, bei Netscape 3.x 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. <title>javascript-objekte abfragen</title> <!-- if(! document.images) alert("ihr Browser kennt das image-objekt nicht."); else alert("ihr Browser kennt das image-objekt."); if(document.all) alert("microsoft!"); bit media e-learning solution Seite 65
else alert("nicht Microsoft!"); // --> <body> Mit einer bedingten Anweisung if(...) können Sie überprüfen, ob ein Objekt oder eine Eigenschaft/Methode des Objekts verfügbar ist. Als Ausdruck für die Bedingung notieren Sie innerhalb der Klammern hinter if einfach das Objekt, nach dem Sie fragen, bzw. das Objekt plus die Eigenschaft/Methode, nach der Sie fragen wollen. 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 wird zunächst gefragt, ob das images-objekt nicht verfügbar ist (die verneinte Abfrage ergibt sich durch das Ausrufezeichen vor dem Objekt). Ist das Objekt also nicht verfügbar, wird im Beispiel die Meldung ausgegeben, dass das Image-Objekt nicht angezeigt werden kann. Im anderen Fall, also wenn das Objekt verfügbar ist, wird eine positive Meldung ausgegeben. Im zweiten Teil des Beispiels wird eine Eigenschaft des document-objekts abgefragt, nämlich die Eigenschaft all (die selbst wieder ein Objekt ist, aber nur vom MS Internet Explorer interpretiert wird). Auch dabei werden im Beispiel wieder je nach Verfügbarkeit zwei unterschiedliche Meldungen ausgegeben. Abbildung 21: Erstes Meldungsfenster Abbildung 22: Zweites Meldungsfenster bit media e-learning solution Seite 66