vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Woche 3

Tag 15

Objekte in JavaScript - Grundlagen

Bisher haben wir JavaScript hauptsächlich unter dem Aspekt der Sprachsyntax gesehen. Aber bereits viele Vorgänge ließen sich nur dann anschaulich demonstrieren, wenn auf Objekte wie document oder window zurückgegriffen wurde. Objekte sind im Grunde die zentralen Elemente in der JavaScript-Programmierung, worüber erst JavaScripte ihre volle Bedeutung entfalten können. Einige besonders wichtige Standardobjekte haben wir ja wie gesagt bereits kennen gelernt (ohne deren Hintergründe gründlicher »aufzudröseln«). In der dritten Woche stehen Objekte und der potentielle Nutzen für JavaScripte auf dem Stundenplan. Sie werden dabei den Grundaufbau der JavaScript-Objektstruktur kennen lernen und natürlich Anwendungen der wichtigsten Objekte.

Der Umgang mit Objekten setzt etwas mehr Theorie voraus, als es in vielen anderen Schritten in unserem Lehrgang bisher der Fall war. Deshalb werden die Beispiele an diesem Tag auch hauptsächlich im hinteren Teil des Kapitels zu finden sein.

Was sind Objekte?

Wir wissen schon einiges über Objekte und wollen dies Know-how noch mal zusammentragen und ergänzen.

Objekte sind grundsätzlich zusammengehörende Anweisungen und Daten, die eine in sich abgeschlossene und eigenständige Einheit bilden. Unter einem Objekt in der EDV stellt man sich ein Softwaremodell vor, das ein Ding aus der realen Welt mit all seinen Eigenschaften und Verhaltensweise beschreiben soll. Etwa das Objekt Webseite, einen Teil dieser Seite (z.B. eine Überschrift, einen Absatz, eine Grafik, eine Schaltfläche, ein Eingabefeld usw.), einen Bildschirm oder einen Browser. Aber auch Teile von einer Software selbst können ein Objekt sein. Etwa der gesamte Anzeigebereich des Browsers, der unter dem Objekt window für JavaScript bereitsteht. Eigentlich ist in dem objektorientierten Denkansatz alles als Objekt zu verstehen, was sich eigenständig erfassen und ansprechen lässt.

Objekte bestehen im Allgemeinen aus zwei Bestandteilen, den Objektdaten, d.h. den Attributen beziehungsweise Eigenschaften, und den Objektmethoden.

Eigenschaften sind die Details, die ein Objekt charakterisieren und durch welche sich ein Objekt von einem anderen unterscheidet. Etwa die Größe, die Beschriftung oder die Farbe.

Methoden sind die aktiven Algorithmen, die von einem Objekt bereitgestellt werden, damit bei einem Aufruf bestimmte Dinge getan werden. Methoden sind so etwas wie einem Objekt fest zugeordnete Funktionen, die auch nur über das Objekt verwendet werden können.

In streng objektorientierten Sprachen wie Java gibt es keinerlei Elemente außerhalb von Objekten. Weder globale Variablen noch Funktionen oder Prozeduren. JavaScript, wie auch nahezu alle anderen Scriptsprachen, und weitere hybride Sprachen wie C/C++ stellen hingegen neben den OO- Elementen solche zusätzlichen Elemente bereit.

Damit Objekte aktiv werden können, tauschen sie so genannte Botschaften aus, welche die Kommunikation von Objekten regeln. Das sendende Objekt schickt dem Zielobjekt eine Aufforderung, eine bestimmte Aktion auszuführen. Das Zielobjekt reagiert entsprechend. Die genaue formale Schreibweise folgt in der Regel dem Schema »Empfänger Methodenname Argument«. Punkt und Klammer trennen dabei in den meisten Sprachen (insbesondere JavaScript) die drei Bestandteile der Botschaft (die so genannte Punkt-Notation oder DOT-Notation) in der Form

  Empfänger.Methodenname(Argument)

Nach außen ist ein Objekt nur durch seine Schnittstellen zu den Methoden definiert; es ist gekapselt, versteckt seine innere Struktur vollständig vor anderen Objekten und erst recht vor objektfreien Elementen wie globalen Variablen, Funktionen oder Prozeduren (Information Hiding). Dies bietet einige Vorteile:

Die Standardobjekte von JavaScript

Über JavaScript kann man auf zahlreiche vordefinierte Objekte zugreifen, die in Form einer Objekt-Bibliothek bereitgestellt werden. Dabei wollen wir uns das Konzept in der Tat wie eine Bibliothek mit Büchern vorstellen. JavaScript kann man sich als einen dort registrierten Leser vorstellen, der sich bei Bedarf ein Buch ausleiht.

Der Denkansatz beinhaltet die nahe liegende Vermutung, dass es noch weitere Leser geben könnte, die in der Kundenkartei der Bibliothek registriert sind. Das ist in der Tat richtig. Die für JavaScript zur Verfügung stehenden und von uns nachfolgend behandelten Objekte sind nicht für JavaScript reserviert, sondern eine offene Welt, auf die auch mittels anderer Techniken zugegriffen werden kann.

Die Objekt-Bibliothek sollte man sich auch nicht als eine Selbstbedienungsbibliothek vorstellen, sondern es gibt Bibliothekare, bei denen man nach einem bestimmten Buch fragen muss und die es dann herausgeben (oder auch nicht).

Wie konkret nach einem bestimmten Buch gefragt wird, wissen Sie schon. Über den Namen des Objekts. Aber der Denkansatz führt weiter. Die Vorstellung einer Bibliothek erlaubt auch die Erklärung einer so genannten Objekthierarchie.

Wenn Sie sich eine Sammlung von Büchern vorstellen - etwa ein Lexikon mit zwölf Bänden -, langt die Angabe der Sammlung nicht, wenn Sie ein einzelnes Exemplar benötigen. Sie müssen beim Bibliothekar auch exakt angeben, welches Buch der Sammlung Sie wollen. Wie geht das in der OO- Theorie? Na, über die Punktnotation. Angenommen, das Lexikon mit den gesammelten Werken heißt document und ist auch nur so als eigenständiges Werk im Hauptverzeichnis der Bibliothek registriert. Sie wollen nun das dritte Buch daraus (die einzelnen Bücher sollen über einen Bezeichner, forms, und einen Index beschriftet sein), dann sagen Sie dem Bibliothekar, er möge das Lexikon document aufsuchen (das findet er über das Hauptverzeichnis der Bibliothek) und dort das dritte Buch von forms heraussuchen. Wenn man das knapp in der DOT-Notation hinschreibt (und den Index bei 0 anfangen lässt), sieht das so aus:

document.forms[2]

Das kennen Sie schon, oder?! Wenn nicht, schauen Sie sich beispielsweise nochmals an Tag 14 das Beispiel 8 an.

Wenn nun auch jedes Buch forms aus einzelnen Abschnitten (sie sollen mal mit - sagen wir - elements1 beschriftet sein) besteht und Sie nur einen der Abschnitte ausleihen können oder wollen, würde der zweite Abschnitt in der DOT-Notation so hingeschrieben:

document.forms[2].elements[1]

Stellen wir uns nun einmal den umgekehrten Weg vor. Wenn Sie dem Bibliothekar einfach nur sagen, Sie wollen Buchabschnitt elements[1] ausleihen, wird er wohl rückfragen, in welchem Buch er bitte suchen solle. Sagen Sie dann forms[2], wird er immer noch nicht zufrieden sein, denn er wird kein eigenständiges Exemplar dieses Namens im Hauptverzeichnis der Bibliothek finden. Nur, wenn Sie ihm auch sagen, dass dieses Buch forms[2] zu dem Lexikon document gehört, wird er es finden und Ihnen geben.

Eine Sondersituation sollte noch besprochen werden: Wenn Sie bereits nach einem Buchabschnitt wie gerade beschrieben nachgefragt haben und Sie einen weiteren aus dem gleichen Buch benötigen, können Sie dem Bibliothekar unter Umständen sagen, dass er noch ein weiteres Buch mitbringen soll. Wenn Sie das dem Bibliothekar zurufen, während er vor dem Lexikon mit den zwölf Bänden steht, langt es, wenn Sie dann nur das Buch angeben und den sonst notwendigen Namen des Lexikons selbst weglassen. Nach dem Motto: »Bitte bringen Sie mir noch das Buch forms[5] mit«. Wenn Sie nicht gerade wegen Ruhestörung aus der Bibliothek geworfen werden, wird er damit was anfangen können und das Buch mitbringen. Das soll nur schon verdeutlichen, dass unter gewissen Umständen die DOT-Notation um die Angabe der Objekte verkürzt werden kann, die ohnehin klar sind. Wo man also schon unweigerlich drin ist (wie im Fall einer Webseite in window) oder es sonst irgendwie eindeutig ist, dass ein bestimmtes Objekt im Prinzip vorangestellt werden müsste.

Für JavaScript sind verschiedene Bibliothekare zuständig. Die Bibliothekare, an deren Schalter sich JavaScript anstellen muss, heißen alle mit zweitem Namen Browser. Die jeweiligen Vornamen sind Netscape Navigator, Internet Explorer, Opera usw. Und jeder Bibliothekar hat so einige Bücher, die er seinem Kunden JavaScript nicht herausgibt. Und wenn es um eine bestimmte Fragestellung geht, gibt es unter Umständen mehr als ein Buch, in dem die Lösung enthalten ist. Nicht jeder Bibliothekar entscheidet sich dann für das gleiche Buch.

Verlassen wir nun den Denkansatz einer Bibliothek für Bücher und kommen zu den EDV-Objekten zurück.

Unter JavaScript stehen u.a. die folgenden Objekte für eine Verwendung in einer Webseite zur Verfügung.

Objekt

Beschreibung

all

Das Objekt ermöglicht den direkten Zugriff auf alle Elemente einer HTML-Datei. Es gehört aber nicht zum offiziellen JavaScript-Standard, sondern ist eine Implementation für den Internet Explorer ab der Version 4.0.

anchor

Das Objekt beinhaltet alle Verweisanker in einer HTML-Datei.

applet

Das Objekt beinhaltet alle Java-Applets in einer HTML-Datei.

Array

Über dieses Objekt werden Arrays erzeugt. Dessen Elemente können über einen gemeinsamen Bezeichner und einen Index angesprochen werden.

Boolean

Ein Objekt mit Wahrheitswerten.

Date

Das Objekt enthält Informationen zu Datum und Uhrzeit.

document

Dieses Objekt repräsentiert die Webseite selbst.

event

Ein Objekt, das bei Anwenderereignissen erzeugt wird und für die (zentrale) Ereignisbehandlung genutzt werden kann.

form

Objekt, das die Formulare einer HTML-Seite repräsentiert.

frame

Objekt, das die Framesets und Frames einer HTML-Seite repräsentiert.

Function

Ein Objekt mit JavaScript-Funktionen.

history

Dieses Objekt enthält Informationen über die URLs, die ein Anwender besucht hat.

image

Ein Objekt, über das auf die Grafiken in einer HTML-Datei zugegriffen werden kann.

layer

Die Layer in einer HTML-Datei (Netscape-spezifisch).

link

Das Objekt, das die Verweise in der aktuellen HTML-Datei repräsentiert.

location

In diesem Objekt werden Informationen über URL-Adressen geführt.

Math

Ein Objekt mit zahlreichen mathematischen Konstanten und Methoden.

mimeType

Ein Objekt mit MimeType-Informationen.

navigator

Die Objektrepräsentation mit Informationen über den verwendeten WWW-Browser.

Number

Ein Objekt mit nummerischen Werten.

plugin

Ein Objekt, das die vorhandene Plugins in einem Browser repräsentiert.

RegExp

Ein Objekt mit regulären Ausdrücken.

screen

Ein Objekt mit Informationen über den verwendeten Bildschirm.

String

Ein Objekt für die Manipulation von Zeichen und Zeichenketten.

Style

Die Objektrepräsentation der Stilattribute eines Elements.

window

Dieses Objekt enthält Statusinformationen über das gesamte Browser-Fenster. Jedes Fenster hat sein eigenes window-Objekt. Das window-Objekt ist das höchste Objekt in der Objekthierarchie der Objekte, welche den Browser direkt betreffen.

Tabelle 15.1: Objekte unter JavaScript.

Mehr zu diesen Objekten und zahlreiche konkrete Anwendungen werden wir in dieser Woche noch sehen.

Objektfelder und Arrays allgemein

Es gibt neben den hier aufgeführten Objekten weitere Objekte, die sich in der Notation ein wenig von den anderen Objekten unterscheiden, aber sonst ganz »normale« Objekte sind. Dies sind so genannte Objektfelder. Charakteristisch dafür ist, dass diese über einen Feldnamen sowie eine Indexnummer identifiziert werden. Ansonsten ist die Anwendung von Eigenschaften und Methoden vollkommen identisch und wir werden im Folgenden meist von Objekten sprechen. Beispiele für solche Objektfelder sind forms[] oder elements[]. Es handelt sich dabei um Arrays, einen Begriff, dem wir uns gleich ausführlich widmen wollen. Vorerst klären wir die Frage, wie Objektfelder mit den obigen Objekten in Beziehung stehen?

Einige Objektfelder entstehen automatisch, wenn eine Webseite geladen wird und Objekte eines bestimmten Typs darin enthalten sind. Wenn beispielsweise eine Webseite ein Formular enthält, bedeutet dies, ein Objekt des Typs form ist darin enthalten. Wenn nun mehr als ein Formular in einer Webseite vorhanden ist, muss der Browser diese Formulare irgendwie identifizieren und speichern. Jedes Formular wird in einem Feld eines Objektfeldes gespeichert, das automatisch generiert wird und das vom Bezeichner meist dem erzeugenden Objekt sehr ähnlich ist (im Fall von Formularen ist das beispielsweise forms - beachten Sie das s). Die Indexnummern entstehen automatisch, wenn der Browser das Objekt beim Abarbeiten der HTML-Seite erzeugt und in einen Schlitz des Arrays einordnet. Das erste im Dokument auftretende Objekt jeden vorkommenden Typs erhält den Index 0, das zweite den Index 1 und so fort.

Für den Fall von Formularen wird das erste Objekt vom Typ form im Array- Eintrag forms[0] gespeichert, das zweite in forms[1] usw.

Die nachfolgende Tabelle gibt die wichtigsten Objektfelder an, deren potentiellen Inhalt sowie eine kleine Beschreibung.

Objektfeld

Typ der enthaltenen Objekte

Beschreibung

anchors

anchor

Die im Objektfeld enthaltenen Objekte repräsentieren eine Liste aller Hypertext-Anker in einer Webseite.

applets

applet

Die enthaltenen Objekte repräsentieren eine Liste aller Applets in einer Webseite.

elements

[Eingabelemente eines HTML-Formulars]

Die enthaltenen Objekte repräsentieren eine Liste aller Eingabeelemente, welche sich in einem als übergeordnetes Objekt angegebenen Formular befinden. Diese werden in JavaScript durch die folgenden Objekte repräsentiert: Button, Checkbox, FileUpload, Hidden, Password, Radio, Reset, Select, Submit, Text und Textarea (das bekommen wir bei der Behandlung von Formularen umfassend).

forms

form

Die enthaltenen Objekte repräsentieren eine Liste aller Formulare in einer Webseite.

frames

frame

Die enthaltenen Objekte repräsentieren eine Liste aller Frames in einer Webseite.

images

image

Die enthaltenen Objekte repräsentieren eine Liste aller Bilder in einer Webseite.

links

link

Die enthaltenen Objekte repräsentieren eine Liste aller Hyperlinks in einer Webseite.

mimeTypes

mimeType

Die enthaltenen Objekte repräsentieren eine Liste aller MIME-Typen in einer Webseite.

options

[Liste der Optionen eines Eingabefeldes vom Typ select]

Die enthaltenen Objekte repräsentieren eine Liste aller erlaubte Optionen, die bei dem als übergeordnetes Objekt angegebenen Objekt vom Typ select vorkommen.

plugins

plugin

Die enthaltenen Objekte repräsentieren eine Liste aller in dem Browser installierten Plugin-Module.

Tabelle 15.2: Objektfelder

Arrays

Wir wollen jetzt auf ein Thema zu sprechen kommen, das viele Quellen bei der Behandlung von Variablen einordnen. Das ist auch durchaus sinnvoll - ein Array oder Datenfeld ist eine Sammlung von Variablen, die alle über einen Namen und einen nummerischen Index angesprochen werden können. Wir führen die Details zu Arrays aber erst hier bei der Behandlung von Objekten bzw. Objektfeldern ein. Warum gerade hier? Warum nicht später, warum nicht früher? Dies hat natürlich seine Gründe:

  1. Objektfelder sind Arrays mit Objekten. Zwar haben wir bereits Objektfelder verwendet, aber es ist spätestens jetzt höchste Zeit, die Hintergründe zu dem Thema zu klären.
  2. Arrays sind in JavaScript Objekte! Das ist der Grund, warum wir bisher noch nicht intensiver darauf eingegangen sind. Die Erzeugung von Arrays lässt sich nur in Verbindung mit der Erzeugung von Objekten einleuchtend behandeln.

Es ist also in unserem Aufbau des JavaScript-Lehrgangs der ideale Zeitpunkt zum Einführen von Arrays.

Array sind immer dann von großem Nutzen, wenn eine Reihe von gleichartigen oder logisch zusammenfassbaren Informationen gespeichert werden soll. Das könnten beispielsweise die Monate des Jahres, die Applets in einer Webseite oder die zu einer Person gehörenden Daten sein.

Wenn Sie für jede einzelne Information eine eigene Variable definieren, müssen sie viele sinnvolle Namen vergeben und man hat viel Schreibarbeit. Ein Name und ein Index sind viel effektiver. Der Hauptvorteil ist aber, dass der Zugriff auf die einzelnen Einträge im Array über den nummerischen Index erfolgen kann. Das kann man in Programmkontrolfluss-Anweisungen und sonstigen automatisierten Vorgängen nutzen. Erst damit werden Dinge möglich, die man bei der Nutzung von Objektfeldern in einer Webseite einsetzt. Etwa der Fall, dass in einer Webseite fünf Applets vorkommen. Mit den Vorschriften, wie sie im unter JavaScript verwendeten Objektmodell realisiert sind, ist klar, dass diese in einem Array mit definierten, vorgegebenen Bezeichnern (applets) gespeichert werden und in der Reihenfolge ihres Vorkommens in der Webseite im Array einsortiert und durchnummeriert werden.

Ein Array wird anders erzeugt als eine normale Variable. Einmal beinhaltet ein Array eine gewisse Anzahl von Feldern, die man angeben kann (was aber keine verbindliche Festlegung ist - in JavaScript können dynamisch neue Felder hinzukommen). Was aber noch ein erheblicher Unterschied zu »normalen« Variablen ist, ist die Tatsache, dass Arrays eben Objekte sind. Sie werden mit Hilfe eines JavaScript-Schlüsselworts erzeugt: new (die Hintergründe werden unmittelbar nach diesem Abschnitt geklärt). Und zwar mit folgender Syntax:

var [Arraybezeichner] = new Array([Anzahl Einträge]);

Das erzeugt ein Array mit der vorgegebenen Anzahl von Einträgen.

Alternativ kann man die Arrayeinträge bereits vorbelegen (mit identischen Werten):

var [Arraybezeichner] = 
new Array([Anzahl Einträge],"[Vorbelegungswert]");

Eine Erzeugung mit gleichzeitiger Vorbelegung und damit auch festgelegter Anzahl von Elementen geht auch so:

var [Arraybezeichner] = 
new Array([Element0], [Element1], ..., [ElementN]);

Auf diese Weise wird ein Datenfeld mit N + 1 Elementen erstellt.

Die Größe eines Arrays lässt sich mit der Eigenschaft (es sind ja Objekte) length überprüfen.

Da sich aber Arrays in JavaScript zur Laufzeit noch vergrößern lassen, legt man oft nur den Array-Bezeichner fest und fügt dann bei Bedarf die Felder hinzu. Ein Array ohne Einträge wird einfach so erzeugt:

var [Arraybezeichner] = new Array();

Dies entspricht

var [Arraybezeichner] = new Array(0);

Einem Element eines Arrays weisen Sie einfach einen Wert zu, indem Sie den Namen des Arrays, eine eckige Klammer (auf), den Index und eine eckige Klammer (zu) angeben und dann wie gewöhnlich einen Wert zuweisen. Syntax:

[Arraybezeichner][[Index]] = [Wert];

Beispiel:

test = new Array();
test[0] = 1;
test[1] = 10;
test[2] = 100;
test[3] = 42;

Ein Array kann Variablen verschiedener Datentypen aufnehmen (das können die meisten Programmiersprachen nicht). Sie können beispielsweise in einem Array die Daten von einer Person aufnehmen, die teilweise aus Zahlen bestehen, teilweise aus boolschen Werten und aus Text.

Beispiel 1:

Erstellen Sie die folgende Datei (Array1.htm):

<HTML>
<SCRIPT language="JavaScript">
function meinArray()
{
var adresse = new Array();
adresse[0] = "Hauptstrasse";
adresse[1] = 42;
adresse[2] = 12345;
adresse[3] = "Hinterdemond";
adresse[4] = "00612345678";
adresse[5] = true;
adresse[6] = "Wüst";
adresse[7] = "Willi";
document.write("Mein Name ist " + adresse[7] +
" " + adresse[6] + ".");
document.write("<BR>");
document.write("Ich wohne in der ",adresse[0],
" ", adresse[1]);
document.write("<BR>");
document.write(adresse[2]," ", adresse[3]);
document.write("<BR>");
document.write("Meine Telefonnummer: ", adresse[4]);
document.write("<BR>");
document.write("Fax vorhanden? ", adresse[5]);
document.write("<BR>");
}
</SCRIPT>
<BODY onLoad="meinArray()">
</BODY>
</HTML>

Abbildung 15.1:  Es lassen sich mit Arrays verschiedene Typen von Werten speichern

Bei der Deklaration des Arrays wird in dem Beispiel und auch bei der Einführung der Syntax var vorangestellt. JavaScript ist da bei Variablendeklarationen normalerweise sehr lässig. Das soll bedeuten, die Deklaration könnte normalerweise auch so funktionieren:

adresse = new Array();

oder allgemein:

[Arraybezeichner] = new Array();

Der Internet Explorer wird auch damit zurechtkommen, aber der Netscape Navigator erkennt dann beim Zugriff auf die Array-Elemente unter Umständen den Array-Bezeichner nicht richtig. Nutzen Sie zur Sicherheit auf jeden Fall die vollständige Syntax.

Ein ziemlich wichtiger Grund für den Einsatz von Arrays ist der Zugriff mit Schleifen. Testen wir die Verwendung von Arrays in Verbindung mit der for-Schleife.

Beispiel 2:

Zuerst wird ein leeres Array erzeugt (Test der Größe mit der Eigenschaft length), das dann mit 20 Elementen über die for-Schleife gefüllt wird (beachten Sie den Indexbeginn 0). Die zweite for-Schleife zählt die Elemente rückwärts durch und gibt deren Werte aus (Name der Datei Array2.htm):

<HTML>
<SCRIPT language="JavaScript">
function meinArray()
{
var meinArray = new Array();
var zaehler;
// Kontrolle der Arraygroesse
document.write("Die Groesse des Arrays: " +
meinArray.length);
document.write("<BR>");
for (zaehler = 0; zaehler<20;zaehler++)
{
meinArray[zaehler] = zaehler + 1;
}
// Kontrolle der Arraygroesse
document.write(
"Groesse des Arrays nach der Zuweisung: " +
meinArray.length);
document.write("<BR>");
// Ausgabe der Werte
for (zaehler = 19; zaehler>=0;zaehler--)
{
document.write(meinArray[zaehler]);
}
document.write("<BR>");
}
</SCRIPT>
<BODY onLoad="meinArray()">
</BODY>
</HTML>

Abbildung 15.2:  Nutzen des Arrays bei der Verwendung von Schleifen


Beispiel 3:

Wir wollen in diesem Zusammenhang eine interessante Variante der for- Schleife demonstrieren. Wenn man bei dem Beispiel die 2. for-Schleife durch die for...in-Schleife ersetzt, kann man ohne explizite Rücksicht auf die Größe des Arrays dies vollständig verwenden (diese Schleifenform durchläuft automatisch alle Einträge eines Arrays). Das ist dann sinnvoll, wenn ein Array während der Laufzeit dynamisch auf Grund nicht vorhersehbarer Einflüsse (etwa Benutzereingaben) erzeugt werden muss (dieses Mal aber von vorn nach hinten die Elemente durchlaufen). Der Name der Datei soll Array3.htm sein:

<HTML>
<SCRIPT language="JavaScript">
function meinArray()
{
var meinArray = new Array();
var zaehler;
document.write("Die Groesse des Arrays: " +
meinArray.length);
document.write("<BR>");
for (zaehler = 0; zaehler<30;zaehler++)
{
meinArray[zaehler] = zaehler + 1;
}
document.write(
"Groesse des Arrays nach der Zuweisung: " +
meinArray.length);
document.write("<BR>");
// Ausgabe der Werte
for (zaehler in meinArray)
{
document.write(meinArray[zaehler]);
}
document.write("<BR>");
}
</SCRIPT>
<BODY onLoad="meinArray()">
</BODY>
</HTML>

Abbildung 15.3:  Verwendung von for...in

Die Objekthierarchie

Kommen wir nach dem Objektspezialfall Arrays wieder zu den Objekten allgemein zurück. Viele (aber nicht alle) der in JavaScript nutzbaren Objekte stehen in einer Objekthierarchiebeziehung zueinander. Dies bedeutet, ein Objekt ist in einem anderen Objekt als Eigenschaft enthalten. Dies ist eine ziemlich logische Abbildung der Realität. So wie eine Webseite im Browserfenster enthalten ist, müssen die die Realität beschreibenden Objekte dieser Tatsache Rechnung tragen. Oder das schon mehrfach behandelte Thema Formular - in einem Formular sind die einzelnen Elemente des Formulars enthalten. In der Objektabbildung heißt dies, dass das document in window enthalten ist und elements in einem Objekt in forms enthalten sein muss.

Ein Unterobjekt erbt immer dessen nach außen bekannten Eigenschaften und Methoden und erweitert diese sinnvollerweise um irgendwelche zusätzlichen Funktionalitäten. Wenn ein solches in der Objekthierarchie tiefer angesiedeltes Objekt angesprochen werden soll, muss einfach dessen Elternobjekt über die Punktnotation vorangestellt werden (wie in unserem Bibliothek-Denkansatz).

Beispiel:

window.document

Das Objekt window ist in diesem Beispiel das Elternobjekt von document.

Allerdings sind nicht sämtliche der Objekte in einer einzigen Hierarchiebeziehung miteinander verbunden. Das wäre auch nicht sinnvoll, denn auch in der Realität gibt es unzählige unabhängige Situationen. Die beiden nachfolgenden Grafiken zeigen zwei wesentliche (aber nicht vollständige) Objekthierarchiebeziehungen der Objekte, die in JavaScript verwendet werden können.

Abbildung 15.4:  Die Objekthierarchie des navigator-Objekts

Abbildung 15.5:  Ein Ausschnitt der Objekthierarchie des window-Objekts

Ein Unterobjekt wird in Bezug auf das Elternobjekt als Eigenschaft dieses Objekts betrachtet.

Alle diejenigen Objekte, welche Sie nicht in den beiden Grafiken finden, sind hierarchisch unabhängig.

Wenn Sie ein Unterobjekt von window ansprechen wollen, müssen Sie streng genommen mit window beginnen. Wenn Sie also das Objekt document ansprechen wollen, müssten Sie demnach

window.document

schreiben und entsprechend für eine Methode darin beispielsweise

window.document.write().

Da greift aber auch der Vergleich mit der Bücherbibliothek: Es kann darauf verzichtet werden, wenn es ohnehin klar ist, dass man ein spezifisches Objekt notieren müsste. Das ist ja auch die Regel, der wir uns bisher immer bedient haben. Ob es alert() oder prompt() als Methoden von window oder document.write() ohne vorangestelltes window war.

Zugriff auf Objekt-Eigenschaften und - Methoden

Wie wir wissen, besitzt jedes Objekt seine spezifischen Eigenschaften und objektgebundenen Methoden, auf die Sie innerhalb des JavaScript-Codes zugreifen können.

Eigenschaften

Zugreifen bedeutet im Fall von Eigenschaften entweder Lesen der Werte, aber in vielen Fällen ist auch eine Veränderung der Eigenschaftswerte möglich. In jedem Fall wird die Objekteigenschaft über ihren Namen, den Namen des Objekts und die Punktnotation angesprochen.

Wenn man Werte von Eigenschaften auslesen möchte, kann man die Objektnotation direkt an die Stelle im Script notieren, wo sonst ein Literal oder eine Variable steht. Das hatten wir schon in einigen Beispielen verwendet. Etwa an Tag 11 in Beispiel 9 die Zeile

window.status =
document.forms[0].elements[0].value *
document.forms[0].elements[1].value;

In diesem Fall haben wir die Werte der beiden Objekte direkt miteinander multipliziert. Oft wird aber der Wert einer Objekteigenschaft oder die Eigenschaft selbst einer Variablen zugewiesen. Dies erfolgt wie sonst auch über die Syntax

var [Variable] = [Objekt].[Eigenschaft];

Die Veränderung von Eigenschaften ist - falls das Objekt es zulässt - genauso möglich, wie Sie den Wert einer normalen Variablen ändern:

[Objekt].[Eigenschaft] = [Wert];

Methoden

Wie wir bereits wissen, zeichnet ein Objekt neben den spezifischen Eigenschaften aus, was seine zugeordneten Objektmethoden sind. Zwar muss nicht jedes Objekt Methoden besitzen, aber die meisten Objekte stellen welche zur Verfügung. Objektmethoden werden vollkommen analog den Eigenschaften über die Punktnotation angesprochen. Dabei geben Sie wieder zuerst den Namen des Objekts an und dahinter durch einen Punkt getrennt den Namen der Methode. Zusätzlich - und das ist wichtig - gehören immer eine öffnende und eine schließende Klammer zu einem Methodenaufruf. Dabei sind keine Leerzeichen zwischen den einzelnen Bestandteilen erlaubt!

Beispiel:

window.close()

Es ist nun auch so, dass man an Methoden Werte übergeben kann, die dann die Arbeit der Methode beeinflussen. Dies erfolgt wie bei normalen Funktionen über Parameter, die innerhalb des Klammernpaars stehen. Falls eine Methoden einen Rückgabewert liefert, kann er direkt verwendet werden, oder man speichert ihn in einer Variablen. Die direkte Verwendung erfolgt, indem die Methode dort notiert wird, wo sonst auch ein Ausdruck, ein Literal oder eine Variable stehen kann.

Die with()-Anweisung

In vielen Fälle ist es notwendig, mit ein und demselben Objekt mehrere Anweisungen in Folge auszuführen. Mit der Anweisung with() kann man sich dann Schreibarbeit sparen. Über die Syntax

with([Objektname])
{
... [mehrere Objektmethoden oder Eigenschaften] ...
}

sparen Sie die mehrfache Notation des Objekts, denn im Inneren kann man dann auf die jeweils vorangestellte Notation des Objekts verzichten.

Beispiel:

with(document)
{
write("Hallo");
write("<BR>");
write("Welt");
write("<BR>");
}

Das Entstehen von Objekten

Wenn wir bisher von Objekten und deren Eigenschaften und Methoden gesprochen haben, haben wir uns noch gar keine genauen Gedanken darum gemacht, wie Objekte eigentlich entstehen. Damit Objekte entstehen, werden zwei Dinge benötigt:

  1. Einen Bauplan für das Objekt und seine Eigenschaften. Das nennt man die Objektdeklaration bzw. Klasse.
  2. Irgendetwas, das mit Hilfe dieses Bauplans ein konkretes Objekt erstellt. Dies »irgendetwas« bezeichnet man als Konstruktor oder Konstruktormethode. Dieser Konstruktor erzeugt aus der Objektdeklaration die konkrete Objektinstanz, die dann auch erst verwendet werden kann.

Alle JavaScript-Methoden eines spezifischen Objektes sind erst dann anwendbar, wenn Sie zuvor eine Objektinstanz von dem zugehörigen Objekt erzeugt haben oder - was der Regelfall ist - irgendwie im Hintergrund automatisch eine Instanz erzeugt wurde. Der letzte Fall passiert fast immer, wenn Sie eine dieser oben besprochenen vordefinierten Objekte mit ganz gewöhnlichen HTML-Tags innerhalb der Datei definieren. In wenigen Fällen (wenige Standardobjekte und selbstdefinierte Objekte) müssen Sie eine Objektinstanz mit Hilfe von JavaScript erzeugen.

Eine Objektinstanz explizit erstellen

Um aus einer Objektdeklaration explizit eine neue Objektinstanz und seine Eigenschaften anzulegen, verwendet man in der Regel das reservierte JavaScript-Schlüsselwort new, gefolgt von dem Bezeichner der Objektedeklaration und anschließend einem Klammerpaar (eventuell mit Parametern darin). Dies sieht von der Syntax her so aus:

new [Objektdeklaration]([optionale Parameter]);

Der Bezeichner der Objektdeklaration samt Klammernpaar und Inhalt ist das, was als Kontruktormethode bezeichnet wird. Eine besondere Methode, welche vom Bezeichner her immer identisch mit der Objektdeklaration ist und deren einzige Aufgabe die Erzeugung des Objekts ist. Dabei werden bei Bedarf Initialisierungen vorgenommen und sonstige notwendige Schritte ausgeführt und vor allen Dingen wird Speicherplatz für das Objekt reserviert.

Sofern ein Objekt seine Arbeit nicht dadurch vollständig erledigt hat, dass es erzeugt wurde und einige Arbeitsschritte durchgeführt hat, weist man es in der Regel einer Variablen zu. Über den Namen der Variablen kann dann bei Bedarf auf das Objekt zugegriffen werden. Die Zuweisung erfolgt meist in einem Schritt mit der Erzeugung. Das sieht dann meist so aus:

var [ObjektInstanz] = 
new [Objektdeklaration]([optionale Parameter]);

Spielen wir den Vorgang einmal an Hand konkreter Beispiele durch. Dabei werden wir die Objektdeklaration Date verwenden, welche mit der Konstruktormethode Date() das aktuelle Tagesdatum samt sekundengenauer Uhrzeit zurückgibt.

Beispiel 4:

Geben Sie nachfolgenden Quelltext ein (Name der Datei Objekt1.htm):

<HTML>
<SCRIPT language="JavaScript">
function obErzeug()
{
alert(new Date());
}
</SCRIPT>
<BODY onLoad="obErzeug()">
</BODY>
</HTML>

Abbildung 15.6:  Direkte Verwendung eines Datumobjekts

In dem Beispiel haben wir das erzeugte Objekt direkt in der alert()- Methode verwendet und den Rückgabewert einfach ausgegeben. Sofern wir nicht nochmals auf irgendwelche Dinge aus dem Objekt zugreifen müssen, ist so eine Notation ausreichend.

Was ist aber, wenn wir erneut Informationen des Objekts benötigen? Etwa wenn das Objekt den genauen Zeitpunkt des Ladens der Webseite kennzeichnet und man an späterer Stelle berechnen möchte, wie lange die Seite angezeigt wurde. Eine erneute Erzeugung über Verwendung von new und dem Konstruktor ist keine Lösung, denn dann wird ja ein neuer Zeitpunkt abgefragt. Die Lösung kennen Sie aber schon - bei der Erzeugung wird das Objekt einer Variablen zugewiesen.

Das nachfolgende Beispiel macht genau dies unter Verwendung einiger Methoden von Date, die wir noch genauer bekommen. Im Wesentlichen werden zum Ladezeitpunkt der Seite und beim Verlassen der Seite die Stunden, Minuten und Sekunden jeweils aus dem Datumsobjekt extrahiert. Beim Verlassen werden die jeweiligen Werte voneinander abgezogen. Dass wir diese Werte hier einfach anzeigen, ist natürlich nicht die typische Anwendung von dieser Technik. Sie kann aber vielfach sinnvoll verwendet werden. Denken Sie nur an die Auswertung, wie lange welche Webseiten in einem Webprojekt angesehen werden. Wenn man das via Cookies z.B. bei einem Anwender speichert oder gar in einer Datenbank auf Serverseite, kann man recht einfach genaue Benutzerprofile erstellen oder einfach nur interessante, gut gemachte Seiten von Ladenhütern trennen.

Beispiel 5:

Geben Sie nachfolgenden Quelltext ein (Name der Datei Objekt2.htm):

<HTML>
<SCRIPT language="JavaScript">
var Stunden, Minuten, Sekunden;
function ladeZeitPunkt()
{
aktuelleZeit = new Date();
Stunden = aktuelleZeit.getHours();
Minuten = aktuelleZeit.getMinutes();
Sekunden = aktuelleZeit.getSeconds();
alert("Ladezeitpunkt der Seite: " +
  Stunden + ":" + Minuten + ":" + Sekunden);
}

function verlassZeitpunkt()
{
verlassZeit = new Date();
var anzeigStd = verlassZeit.getHours() - Stunden;
var anzeigMin = verlassZeit.getMinutes() - Minuten;
var anzeigSek = verlassZeit.getSeconds() - Sekunden;
alert("Zeit, die Sie sich die Seite angesehen haben: "
  + anzeigStd + " Stunden, " + anzeigMin +
  " Minuten und " + anzeigSek + " Sekunden.");
}
</SCRIPT>
<BODY onLoad="ladeZeitPunkt()"
onUnLoad="verlassZeitpunkt()">
</BODY>
</HTML>

Abbildung 15.7:  Die Dauer der Betrachtung der Webseite

Abbildung 15.8:  Die Uhrzeit des Ladens der Webseite

Das abschließende Beispiel zu diesem Thema soll zeigen, dass es zu einer Objektdeklaration durchaus mehr als eine Konstruktormethode geben kann. Date hat nämlich noch weitere Konstruktormethoden mit anderen Aufgaben, als das aktuelle Tagesdatum samt Uhrzeit aus dem Rechner des Webseitenbetrachters auszulesen. Man kann darüber auch ein Datumsobjekt mit vorgegebenem Datum erzeugen, wie wir es in dem nächsten Beispiel tun.

Beispiel 6:

Geben Sie nachfolgenden Quelltext ein (Name der Datei Objekt3.htm):

<HTML>
<SCRIPT language="JavaScript">
function obErzeug()
{
alert(new Date(2001,11,31));
}
</SCRIPT>
<BODY onLoad="obErzeug()">
</BODY>
</HTML>

Abbildung 15.9:  Das vorgegebene Datum

Beachten Sie die Zeile

alert(new Date(2001,11,31));

Dort wird das Datum auf das Jahr 2001, Dezember, 31. gesetzt. Der Monat beginnt mit 0 für Januar.

Eigene Objekte und das Schlüsselwort this

Neben der Verwendung von den vordefinierten Standardobjekten für JavaScript steht es Ihnen frei, eigene Objekte zu definieren. Dies ist von grundsätzlicher Bedeutung, wenn Sie objektorientiert in JavaScript programmieren wollen.

Es stellt sich nun aber vielleicht die Frage, warum Sie das überhaupt tun sollen? Die Antwort ist nicht ganz einfach. Viele Argumente, die für die objektorientierte Programmierung im Allgemeinen sprechen, werden bei JavaScript nicht greifen. JavaScript ist nicht streng objektorientiert2, sondern nur objektbasierend. Statt Objekte zu erzwingen, gibt es so gut wie immer einen Weg herum. Das soll bedeuten, die Erstellung von eigenen Objekten ist in JavaScript so gut wie nie zwingend und oftmals mühsamer als konventionelle Wege, die ohne Objekte auskommen. Damit das nicht so in der Luft stehen bleibt, wollen wir die Angelegenheit etwas umfangreicher erklären.

Was ist der Sinn eines Objekts? Ein Objekt fasst Eigenschaften und Funktionalitäten zusammen, die gemeinsam zur Beschreibung einer Situation sinnvoll oder notwendig sind. Nun, das kann man mit Funktionen auch, wenn man mit lokalen Variablen für die inneren Abläufe und globalen Variablen als Analogon der Eigenschaften von Objekten arbeitet. Wenn eine Sprache keine globalen Variablen bereitstellt, kann man dies nicht so einfach simulieren, aber die Zusammenfassung von bestimmten Eigenschaften und Funktionalitäten als Argument für die zwingende Erstellung von eigenen Objekten ist bei hybriden Sprachen wie JavaScript ziemlich schwach.

Stärkstes Argument für die Verwendung von Objekten ist normalerweise die Vererbung. So etwas gibt es ohne Objekte3 nicht. Das bedeutet, wenn man ein Unterobjekt eines Objektes anlegt, besitzt dieses bereits dessen Methoden und Eigenschaften. Man muss das Unterobjekt nur noch um die Methoden und Eigenschaften spezialisieren, die es dann von dem Elternobjekt unterscheidet. Bevor Ihnen jetzt jedoch der Mund wässerig gemacht wird - JavaScript ist in Bezug auf Vererbung abgemagert worden. Sowohl Vererbung als auch viele andere wesentliche Charakteristika der objektorientierten Programmierung fehlen. JavaScript ist ja auch explizit nur objektbasierend und nicht objektorientiert.

Es gibt aber andere Argumente, die das Verwenden selbstdefinierter Objekte auch in JavaScript sinnvoll machen.

Um in JavaScript nun ein eigenes Objekt anzulegen, sind effektiv zwei Schritte nötig:

  1. Eine Objektdeklaration als Bauplan für das Objekt und seine Eigenschaften muss erstellt werden (deklarieren), denn es gibt noch keine vordefinierte Schablone.
  2. Mit Hilfe dieses Bauplans wird dann wie bei vordefinierten Objektdeklarationen eine konkrete Objektinstanz erstellt.

Um ein eigenes Objekt und seine Eigenschaften anzulegen, müssen Sie innerhalb JavaScript einfach eine spezielle Funktion definieren, die als Deklaration des Objekts, als seine Konstruktormethode, fungiert. Nachdem die Objektdeklaration angelegt ist, können Sie an anderen Stellen innerhalb Ihres JavaScripts Instanzen dieses Objekts definieren. Dies geschieht wieder mit Hilfe einer Variablen, aus der über Zuweisung des Objektes mit dem reservierten JavaScript-Schlüsselwort new eine Objektinstanz wird. Dies sieht also von der Syntax her schematisch so aus:

function [Funktionsname]()
{
... [Beschreibungen von Eigenschaften] ...
}
...
var [ObjektInstanz] = new [Funktionsname]();

In der Konstruktormethode ist ein JavaScript-Schlüsselwort von zentraler Bedeutung - das this-Schlüsselwort. Es ist ein wesentliches Element jeder objektorientierten Programmiersprache, denn darüber hat man Zugriff auf das Objekt, welches eine Funktionalität aufruft. Das nachfolgende Beispiel erzeugt eine Objektdeklartion tier, die als Objekt dann ein reales Tier soweit beschreiben soll, wie es notwendig ist (wir beschränken uns erst einmal auf drei Eigenschaften). Dabei charakterisieren diese gewissen Eigenschaften das konkrete Tier, aber in der Objektdeklaration ist ja noch nicht bekannt, wie das später daraus erzeugte Objekt heißen soll. Eine Objektdeklaration ist ja eine Bauvorschrift, aus der jeder, der darauf zugreifen kann, ein Objekt erzeugen kann. Wie soll man in der Bauvorschrift schon wissen, welchen Variablenbezeichner derjenige später nimmt? Er wird in der Deklaration durch einen Platzhalter für diesen Namen ersetzt. Dieser heißt ins Englische übersetzt this.

Beispiel 7:

Geben Sie nachfolgenden Quelltext ein (Name der Datei string.htm):

<HTML>
<SCRIPT language="JavaScript">
// Konstruktor
function tier(typ, fell, schwanz)
{
this.typ = typ;
this.fell = fell;
this.schwanz = schwanz;
}
//Objekterzeugung
var tier1 = new tier("Hund",true,true);
var tier2 = new tier("Vogel",false,true);
var tier3 = new tier("Fisch",false,true);

document.write("Das erste Tier ist ein ");
document.write(tier1.typ.toString());
document.write("<br>");
document.write("Hat das Tier ein Fell? ");
document.write(tier1.fell);
document.write("<br>");
document.write("Hat das Tier einen Schwanz? ");
document.write(tier1.schwanz);
document.write("<P>");
document.write("Das zweite Tier ist ein ");
document.write(tier2.typ.toString());
document.write("<br>");
document.write("Hat das Tier ein Fell? ");
document.write(tier2.fell);
document.write("<br>");
document.write("Hat das Tier einen Schwanz? ");
document.write(tier2.schwanz);
document.write("<P>");
document.write("Das dritte Tier ist ein ");
document.write(tier3.typ.toString());
document.write("<br>");
document.write("Hat das Tier ein Fell? ");
document.write(tier3.fell);
document.write("<br>");
document.write("Hat das Tier einen Schwanz? ");
document.write(tier3.schwanz);
document.write("<P>");
</SCRIPT>
<BODY>
</BODY>
</HTML>

Abbildung 15.10:  Drei Objekte aus einer Objektdeklaration

Die drei in dem Beispiel erzeugten Objekte haben alle andere Eigenschaften. Über den this-Stellvertreter der Objektdeklaration wurden bei der Erzeugung jedem konkreten Objekt die jeweiligen Eigenschaften zugewiesen.

Beachten Sie, dass wir an einer Stelle eine Methode toString() verwenden. Diese wandelt Objektinhalt in Strings um. Da aber die Ausgabemethode das in unserer Situation auch automatisch macht, kann man auch darauf verzichten.

Ein Objekt kann nun neben Eigenschaften auch Methoden besitzen. Diese werden in JavaScript wie normale Funktionen definiert, nur verwenden auch sie in der Regel das Schlüsselwort this, um bei einem Zugriff auf Werte des aufrufenden Objektes auch auf das konkrete Objekt zu verweisen. Die Deklaration einer Methode erfolgt außerhalb der Konstruktormethode wie eine gewöhnliche Funktion. Sie muss allerdings danach noch mit der Konstruktormethode verbunden werden. Verankert wird sie innerhalb der Objektdeklaration über die Syntax

this.[Methodenname] = [Methodenname];

Beachten Sie, dass hinter dem Methodennamen keine Klammern stehen!

Schreiben wir das letzte Beispiel so um, dass unser Objekt ebenfalls eine Methode bereitstellt. Je nachdem, wie eine - noch neu hingenommene - Eigenschaft gesetzt ist, soll beim Aufruf der Methode über ein konkretes Objekt ein Mitteilungsfenster angezeigt werden oder nicht.

Beispiel 8:

Geben Sie nachfolgenden Quelltext ein (Name der Datei eigOb2.htm):

<HTML>
<SCRIPT language="JavaScript">
// Die Methodendeklaration
function lautgeben()
{
if(this.laut==true) alert("Wuff Chipp Miau");
}
function tier(typ, fell, schwanz,laut)
{
this.typ = typ;
this.fell = fell;
this.schwanz = schwanz;
this.laut=laut;
// Die Implementierung der Methode im Objekt
this.lautgeben = lautgeben;
}

var tier1 = new tier("Hund",true,true,true);
var tier2 = new tier("Vogel",false,true,true);
var tier3 = new tier("Fisch",false,true,false);
tier1.lautgeben();
document.write("Das erste Tier ist ein ");
document.write(tier1.typ.toString());
document.write("<br>");
document.write("Hat das Tier ein Fell? ");
document.write(tier1.fell);
document.write("<br>");
document.write("Hat das Tier einen Schwanz? ");
document.write(tier1.schwanz);
document.write("<P>");
tier2.lautgeben();
document.write("Das zweite Tier ist ein ");
document.write(tier2.typ.toString());
document.write("<br>");
document.write("Hat das Tier ein Fell? ");
document.write(tier2.fell);
document.write("<br>");
document.write("Hat das Tier einen Schwanz? ");
document.write(tier2.schwanz);
document.write("<P>");
tier3.lautgeben();
document.write("Das dritte Tier ist ein ");
document.write(tier3.typ.toString());
document.write("<br>");
document.write("Hat das Tier ein Fell? ");
document.write(tier3.fell);
document.write("<br>");
document.write("Hat das Tier einen Schwanz? ");
document.write(tier3.schwanz);
document.write("<P>");
</SCRIPT>
<BODY></BODY>
</HTML>

Wir erweitern das Exempel noch ein wenig. Zum einen schreiben wir unsere Methode um, aber vor allem kommt in der neuen Erweiterung eine weitere Konstruktormethode besitzer(name,alter) ins Spiel. Diese erzeugt bei Anwendung ein neues Objekt, das den Besitzer des jeweiligen Tiers repräsentiert (eigentlich nur eine Person, aber wir wenden es als Besitzer eines Tiers an). Wir erweitern in dem folgenden Beispiel in einem weiteren Schritt die Konstruktormethode zum Erzeugen des Tierobjekts um den Besitzer. Beachten Sie dabei, dass der Besitzer als Objekt an die Konstruktormethode übergeben wird (als eine Variable, welche das Objekt mit zwei Eigenschaften enthält)! Entsprechend erhält man dann die Eigenschaften des Besitzers über das Tierobjekt und den Bezeichner des übergebenen Objekts. Also über eine doppelte Punktnotation. Wir haben hier den Fall der Verwendung eines Unterobjekts.

Abbildung 15.11:  Aufruf der selbstdefinierten Objektmethode

Beispiel 9:

Geben Sie nachfolgenden Quelltext ein (Name der Datei eigOb3.htm):

<HTML>
<SCRIPT language="JavaScript">
// Die Methodendeklarationen
function besitzer(name,alter)
{
this.name=name;
this.alter=alter;
}
function lautgeben()
{
document.write("<br><i>Methodenaufruf</i><br>");
if(this.laut==true) document.write("Wuff Chipp Miau")
else document.write("Das Schweigen der Lärmer.");
}
function tier(typ, fell, schwanz,laut,eigentumVon)
{
this.typ = typ;
this.fell = fell;
this.schwanz = schwanz;
this.laut=laut;
this.eigentumVon=eigentumVon;
// Die Implementierung der Methode im Objekt
this.lautgeben = lautgeben;
}
// Die neuen Besitzerobjekte
var hans = new besitzer("Hans Dampf",86);
var willi = new besitzer("Willi Wüst",12);
// Die Tierobjekte mit den Besitzerobjekten als letzten Übergabewert
var tier1 = new tier("Hund",true,true,true,hans);
var tier2 = new tier("Vogel",false,true,true,willi);
var tier3 = new tier("Fisch",false,true,false,hans);
document.write("Das erste Tier ist ein ");
document.write(tier1.typ.toString());
document.write("<br>");
document.write("Hat das Tier ein Fell? ");
document.write(tier1.fell);
document.write("<br>");
document.write("Hat das Tier einen Schwanz? ");
document.write(tier1.schwanz);
document.write("<br>");
// Zugriff auf die Unterobjekte
document.write("Das Tier gehört ");
document.write(tier1.eigentumVon.name);
document.write(". Alter: ");
document.write(tier1.eigentumVon.alter);
tier1.lautgeben();
document.write("<P>");
document.write("Das zweite Tier ist ein ");
document.write(tier2.typ.toString());
document.write("<br>");
document.write("Hat das Tier ein Fell? ");
document.write(tier2.fell);
document.write("<br>");
document.write("Hat das Tier einen Schwanz? ");
document.write(tier2.schwanz);
document.write("<br>");
document.write("Das Tier gehört ");
document.write(tier2.eigentumVon.name);
document.write(". Alter: ");
document.write(tier2.eigentumVon.alter);
tier2.lautgeben();
document.write("<P>");
document.write("Das dritte Tier ist ein ");
document.write(tier3.typ.toString());
document.write("<br>");
document.write("Hat das Tier ein Fell? ");
document.write(tier3.fell);
document.write("<br>");
document.write("Hat das Tier einen Schwanz? ");
document.write(tier3.schwanz);
document.write("<br>");
document.write("Das Tier gehört ");
document.write(tier3.eigentumVon.name);
document.write(". Alter: ");
document.write(tier3.eigentumVon.alter);
tier3.lautgeben();
document.write("<P>");
</SCRIPT>
<BODY></BODY>
</HTML>

Abbildung 15.12:  Zwei Objekte und eine Methode

Prototype

JavaScript bietet in neuen Versionen die Möglichkeit, nachdem ein Objekt bereits mit new definiert wurde, es nachträglich um neue Eigenschaften und Methoden zu erweitern. Das JavaScript-Schlüsselwort für diesen Zweck heisst prototype. Allgemeine Syntax dazu ist die folgende:

[Objekttyp].prototype.[Eigenschaft] = [Wert];

bzw.

[Objekttyp].prototype.[Methode] = [Methode];

Sobald diese Aktion durchgeführt wurde, besitzen alle zukünftigen, aber auch alle vorherigen Objekte die neue Eigenschaft bzw. Methode. Insbesondere ist zu beachten, dass nach der prototype-Anweisung erzeugte Objekte für die zugefügte Eigenschaft immer den über prototype angegebenen Wert besitzen. Ein Erweitern der Konstruktormethode um die Eigenschaft wird zwar keinen Laufzeitfehler erzeugen, und auch die Eigenschaft wird bereitgestellt (allerdings wegen prototype), aber der Wert ist der, der bei der prototype-Zuweisung vergeben wurde. Er muss explizit mit einer Zuweisung verändert werden. Das nachfolgende Beispiel zeigt dies.

Beispiel 10:

Erstellen wir ein Beispiel, das mit der prototype-Technik arbeitet. Geben Sie nachfolgenden Quelltext ein (Name der Datei eigOb4.htm):

<HTML>
<SCRIPT language="JavaScript">
function tier(typ, fell, schwanz)
{
this.typ = typ;
this.fell = fell;
this.schwanz = schwanz;
}
var tier1 = new tier("Hund",true,true);
document.write("Eigenschaften von dem Objekt: ");
document.write(tier1.typ.toString());
document.write("<br>");
document.write(tier1.fell);
document.write("<br>");
document.write(tier1.schwanz);
document.write("<P>");
tier.prototype.besitzer = "Hans Dampf";
document.write("Besitzer ist ");
document.write(tier1.besitzer);
document.write("<P>");
var tier2 = new tier("Katze",true,true,"Willi Wüst");
document.write("Besitzer Tier 2 ? ");
document.write(tier2.besitzer);
document.write("<P>");
document.write("Besitzer Tier 2 ? ");
tier2.besitzer = "Willi Wüst";
document.write(tier2.besitzer);
document.write("<P>");
document.write("Besitzer Tier 1 ? ");
document.write(tier1.besitzer);
</SCRIPT>
<BODY>
</BODY>
</HTML>

Abbildung 15.13:  Veränderung mit prototype

Zusammenfassung

Heute haben wir uns das erste Mal bewusst JavaScript unter dem Aspekt von Objekten gewidmet. Da JavaScript keine streng objektorientierte Sprache ist (sondern nur objektbasierend), gibt es dort nicht nur Objekte wie beispielsweise in Java, sondern globale Variablen, Funktionen und all die prozeduralen Elemente, die wir die letzten zwei Wochen kennengelernt haben. Objekte sind aber die zentralen Elemente in der JavaScript- Programmierung, worüber erst JavaScripte ihre volle Bedeutung und Leistung entfalten können.

Ein wichtiger Spezialfall von Objekten sind Arrays - eine Sammlung von logisch zusammengehörenden Variablen und Objekten. Allgemein sind Objekte grundsätzlich zusammengehörende Anweisungen und Daten, die eine in sich abgeschlossene und eigenständige Einheit bilden und als Softwaremodelle Dinge aus der realen Welt mit all ihren für die Behandlung eines Problems notwendigen Eigenschaften und Verhaltensweise beschreiben sollen.

Die Eigenschaften eines Objekts sind die Details, die es charakterisieren und von anderen Objekten unterscheidet. Sie können aus einem Script heraus gelesen und manchmal auch gesetzt werden. Methoden sind die aktiven Algorithmen, die von einem Objekt bereitgestellt werden, damit bei einem Aufruf bestimmte Dinge getan werden. Methoden sind so etwas wie einem Objekt fest zugeordnete Funktionen, die auch nur über das Objekt verwendet werden können.

Die Verwendung von Objektmethoden und Eigenschaften erfolgt grundsätzlich über die DOT-Notation, wo links das Objekt, dann ein Punkt und dann die Eigenschaft oder Methode notiert wird. Über JavaScript kann man auf zahlreiche vordefinierte Objekte zugreifen, die in Form einer Objekt-Bibliothek bereitgestellt werden (wir werden sie intensiv die nächsten Tage behandeln). Viele (aber nicht alle) der in JavaScript nutzbaren Objekte stehen in einer Objekthierarchiebeziehung zueinander. Dies bedeutet, ein Objekt ist in einem anderen Objekt als Eigenschaft enthalten.

Objekte werden durch eine Objektdeklaration beschrieben und durch die Anwendung eines Konstruktors daraus explizit erzeugt. Dies kann automatisch erfolgen, aber auch explizit durch den Programmierer. Um aus einer Objektdeklaration explizit eine neue Objektinstanz und seine Eigenschaften anzulegen, verwendet man das reservierte JavaScript- Schlüsselwort new, gefolgt von dem Bezeichner der Objektdeklaration und anschließend einem Klammerpaar (eventuell mit Parametern darin). In der Regel weist man das erzeugte Objekt einer Variablen zu, über deren Namen man dann bei Bedarf auf das Objekt zugreifen kann. Die Zuweisung erfolgt meist in einem Schritt mit der Erzeugung. Das sieht dann meist so aus:

var [ObjektInstanz] = 
new [Objektdeklaration]([optionale Parameter]);

Neben der Verwendung von den vordefinierten Standardobjekten für JavaScript kann man auch eigene Objekte definieren. Um in JavaScript nun ein eigenes Objekt anzulegen, sind effektiv zwei Schritte nötig.

  1. Eine Objektdeklaration als Bauplan für das Objekt und seine Eigenschaften muss erstellt werden (deklarieren), denn es gibt noch keine vordefinierte Schablone. Schlüssel zu diesem Konstruktor ist das Schlüsselwort this, um darüber den Zugriff auf das später daraus erzeugte Objekt zu ermöglichen.
  2. Mit Hilfe dieses Bauplans wird dann wie bei vordefinierten Objektdeklarationen eine konkrete Objektinstanz erstellt. Dies geschieht wieder mit Hilfe einer Variablen, aus der über Zuweisung des Objektes mit dem reservierte JavaScript-Schlüsselwort new eine Objektinstanz wird. Dies sieht also von der Syntax her schematisch so aus:
    function [Funktionsname]()
    {
    ... [Beschreibungen von Eigenschaften] ...
    }
    ...
    var [ObjektInstanz] = new [Funktionsname]();

Fragen und Antworten

Frage:
Sind die in JavaScript bereitgestellten Objekte wie window oder document mit JavaScript erstellt worden?

Antwort:
Nein. Diese Objekte liegen nicht in JavaScript-Quelltext vor. Sie würden sie ja sonst auch als Scriptcode auf Ihrem Rechner finden. Außerdem ist dort der Mechanismus der Vererbung aktiv. Das kann mit JavaScript nicht geleistet werden.

Frage:
Verwenden viele JavaScripte selbstdefinierte Objekte?

Antwort:
Nein. Die meisten Scripte in Webseiten sind so einfacher Natur, dass man ohne selbstdefinierte Objekte auskommt. Man sollte immer im Hinterkopf behalten, wo der Einsatzzweck von Webscripten liegt. Selbstdefinierte Objekte fangen an, in Revieren zu wildern, die mächtigeren Sprachen wie Java vorbehalten sein sollten.

Frage:
JavaScript reserviert Schlüsselworte wie class oder super. Haben die nicht etwas mit Objektorientierung zu tun?

Antwort:
In der Tat. Sie sind aber, wie einigen weitere, nur reserviert und werden in JavaScript (noch) nicht eingesetzt.

Workshop

Betrachten Sie die Beispiele der vergangenen Tage in Hinsicht auf Objektnotationen. Kontrollieren Sie, welche Objekte und welche zugehörigen Methoden und Eigenschaften wir bereits verwendet haben.

Erstellen Sie eigene Objekte mit Eigenschaften und Methoden.

Kontrollfragen

Im Anhang »Antworten zu den Kontrollfragen« finden Sie die Antworten zu den jeweils am Ende einer Lektion notierten Fragen.

  1. Was macht this?
  2. Ist das korrekt?
    var test = New Date();
  3. Stimmt das?
    window.status =
    document.forms[0].elements.value *
    document.forms[0].elements.value;
  4. Stimmt der Methodenaufruf?
    window.close;
  5. Stimmt das?
    with(document)
    {
    write("Mircoweich");
    write("<BR>");
    }
  6. Was ist ein Objekt?
  7. Was ist ein Konstruktor?



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


123

© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH