7.4.1Einführung, Wiederholung und Präzisierung von Objekt-, Methoden- und Eigenschaftensyntax
7.4.2.Übersicht über Objektmethoden und Eigenschaften, mit kommentierten Kurzbeispielen
7.4.3 Weitere Syntaxmöglichkeiten, mit Scriptbeispielen
7.4.4 Zusammenfassung
7.4.5 Weitere kommentierte JS-Beispiele "Level 3"

3. Unterschied zwischen Eigenschaften und Methoden

Hier verweise ich auf die entsprechenden Ausführungen in Level 2. Objekte haben Eigenschaften, die teils unveränderlich sind (d.h. nur adressiert und ausgelesen werden können), oft aber auch geändert werden können. Theoretisch sollten für objektorientierte Programmiersprachen Objekteigenschaften nur über Methoden änderbar sein, dies ist aber in JavaScript nicht konsequent durchgeführt.

Beispiel einer nichtveränderbaren Eigenschaft

navigator.userAgent ist eine nur lesbare Eigenschaft des navigator-Objektes. Hier einige Möglichkeiten, wie Sie dieses Objekt auslesen und weiterverwenden können:

window.document.write(navigator.userAgent);
window.document.write("Sie verwenden folgenden Browser: " + navigator.userAgent);
window.document.formular1.inputfeld3.write("Ihr Browser: " + navigator.userAgent);
window.alert(navigator.userAgent);

Oft wird die auszulesende Eigenschaft als Variablenwert gespeichert, um sie später leichter weiterverarbeiten zu können, z.B.

var browser;
browser=navigator.userAgent;

window.document.write("Sie verwenden folgenden Browser: " + browser):
oder
window.alert(browser);

Beispiel: durch Methode veränderbare Eigenschaft

Ein Fenster hat eine bestimmte Position auf dem Bildschirm. Wird ein neues Fenster, kann die Eigenschaft der Position beim Öffnen auch angegeben werden (s.u. Parameter). Unter Netscape sind diese Positions-Eigenschaften auch auslesbar.

window.alert(window.screenX); würde z.B. die x-Koordinate der linken oberen Ecke des Browserfensters in einem Hinweisfenster ausgeben (funktioniert leider nicht unter IE). Es gibt verschiedene Methoden, um die Position des Fensters (und damit auch die Eigenschaft screenX) zu ändern, z.B.

window.moveBy(100,100);
bewegt das Fenster um 100 Pixel nach rechts bzw. unten in der Horizontalen und Vertikalen oder
window.moveTo (100,200);

bewegt die linke obere Ecke des Fensters an die Bildschirmposition 100 Pixel rechts und 200 Pixel unten, gemessen von links oben. Danach ist natürlich die Eigenschaft window.screenX geändert.

Beispiele: durch neue Wertzuordnung änderbare Eigenschaft

Sehr viele Eigenschaften werden aber anders geändert, nämlich durch die direkte Zuordnung eines Wertes über den Operator =

Beispiele:

Der Inhalt (d.h. die Eigenschaft) der Statusleiste des Browsers wird über = zugeordnet und auch geändert, also

window.status="hallo";
window.status="selber hallo";

Die Farbeigenschaften eines document-Objekts werden ebenfalls so geändert, z.B. für ein über JavaScript unter dem Variablennamen NeuesFenster geöffnetes Zusatzfenster:

NeuesFenster.document.bgColor="maroon";
oder
NeuesFenster.document.bgColor="#00ffbb";

Das Objekt NeuesFenster.document hatte eine Eigenschaft Background-Color, die im html-Dokument oder durch Voreinstellung des Browsers definiert war. Wir hätten sie auch auslesen können. Wir haben im obigen Beispiel durch Zuordnung eines neuen Wertes diese Eigenschaft geändert (durch Angabe eines definierten Farbnamens bzw. durch einen hexadezimalen Farbwert).

Diese Wertzuordnung kann auch über Variablen geschehen, z.B.

var neuHintergrund;
neuHintergrund="#ff0000";
NeuesFenster.document.bgColor=neuHintergrund

4. Objekte einer unteren Objekthierarchie sind Eigenschaften der übergeordneten Elemente

Beispiel:

window.document.forms.elements

Das window-Objekt hat hier u.a. die Eigenschaft document, die gleichzeitig ein Unterobjekt mit eigenen Eigenschaften und Methoden darstellt.
Das document-Objekt hat hier die Eigenschaft forms (d.h. es beinhaltet wenigstens ein Formular). Forms ist gleichzeitig ein Unterobjekt von document mit eigenen Eigenschaften und Methoden.
Das forms-Objekt hat die Eigenschaft elements. Elements ist gleichzeitig ein Unterobjekt von forms mit eigenen Eigenschaften und Methoden.

Veranschaulichung: Denken Sie zurück an unser FahrzeugScript zu Beginn von Level 1. Nehmen wir unser Objekt Micra Es hat z.B. die Eigenschaften Farbe, Sitze, Raeder. Nehmen wir an Raeder stellt eine unveränderbare Eigenschaft dar (sind immer vier, müssen immer gleich groß sein). Farbe sei eine veränderbare Eigenschaft (verschiedene Farben sind möglich), Sitze könnten aber gleichzeitig eine Eigenschaft und ein Unterobjekt darstellen, denn Sitze haben viele weitere Eigenschaften (Lehnenhöhe, Bezugsart, Bezugsfarbe, Sitztyp, Sitzzahl usw), die geändert werden können und können auch sonst Methoden ausführen (z.B. höherstellen, vorstellen). Das Objekt Micra hatte z.B. die Methode fahren(); oder stoppen(); , das Objekt Sitze könnte auch die Methoden horizontalverstellen(); , hoeheverstellen(); oder ausbauen() haben.

5. Objekte können gleichzeitig Array-Objekte darstellen

Beispiel:

Auf einer html-Seite können sich mehrere Bilder, Links, Anker oder Formulare befinden. Diese bilden dann zwar jeweils ein Objekt (z.B forms-Objekt, image-Objekt), aber das sind dann automatisch Array-Objekte (und zwar durch die html-Seite generierte Arrays, nicht neue, von uns generierte Arrays). Die einzelnen, Bilder, Anker oder Formulare können über die Array-Zahlenindizierung (beginnend mit 0) oder über Namenindizierung angesprochen werden (Lesen Sie ggf. nochmals im entsprechenden Level 2-Abschnitt nach).

Veranschaulichung: Die Sitze unseres Micra-Objektes bilden ein Array-Objekt. Jeder Sitz, d.h. jedes Array-Element kann eigene Eigenschaftenwerte haben. Die Sitze könnten wir z.B. folgendermaßen als Array adressieren:

Micra.Sitze[0].Farbe="rot";
Micra.Sitze[1].Farbe="rot";
Micra.Sitze[2].Farbe="blau";
Micra.Sitze[3].Farbe="gruen";
Micra.Sitze[4].Farbe="blau";

oder auch:

Micra.Sitze["vornlinks"].Farbe="rot";
Micra.Sitze["vornrechts"].Farbe="rot";
Micra.Sitze["hintenlinks"].Farbe="blau";
Micra.Sitze["hintenmitte"].Farbe="gruen";
Micra.Sitze["hintenrechts"].Farbe="blau";

Ganz schön poppig!

Wenn nun ein kleinerer Fahrer einsteigt, müssen wir den Fahrrersitz vorschieben, dies könnte z.B. mit folgender Methode geschehen.

Micra.Sitze[0].horizontalverstellen(-200);
oder auch
Micra.Sitze["vornlinks"].horizontalverstellen(-200);

-200 ist ein Parameter der Methode horizontalverstellen(), die den angesprochenen Sitz um 200 Pixel (oder mm?) nach vorne schiebt.

6. Objekte und Methoden verwenden häufig Parameter

Parameter haben wir schon häufig verwendet, ohne dass wir bislang explizit darauf eingegangen sind. Häufig sind sie zwingend, manchmal auch nur fakultativ. Wir werden in unserer vereinfachten Referenz angeben, welche wesentlichen Parameter zur Verfügung stehen. Parameter werden häufig (aber nicht ausschließlich) dazu benutzt, Objekteigenschaften zu definieren oder zu ändern.

Beispiele:

Beispiel: Window-Objekt und Eigenschaften

var neuFenster;
neuFenster=window.open();

Dies öffnet ein neues Fenster. Das neue Window-Objekt heißt für JavaScript-Adressierung neuFenster. Wir haben keine Parameter definiert; das Fenster wird ohne Inhalt in der Standardeinstellung (also mit Standardparametern, d.h. Menuleiste, Statusleiste usw) geöffnet.

Dasselbe Fenster können wir unter der Angabe von Parametern öffnen, z.B.

neuFenster=("inhaltsverzeichnis.html", "inhaltsfenster", "width=300, height=400, resizeable=no");

Die gewünschten Parameter kommen zwischen die runden Klammern. Das window-Objekt kann v.a. drei Parameter verwenden, jeder steht zwischen Gänsefüßchen, die Parameter werden durch Kommata getrennt.

• Der erste Parameter gibt eine zu ladende URL an (kann auch leer bleiben mit "", dann kann man etwa via der neuFenster.document.write(); - Methode) "ferngesteuert" reinschreiben, siehe Level 2);

• Der zweite Parameter gibt einen weiteren Namen für das Fenster an. Dies ist der Name, der verwendet werden muss, wenn man z.B. mit dem target-Attribut URLs von anderen Fenstern aus in dieses Fenster laden möchte. Ich nenne diesen Parameter mal "Target-Namen". Den Fensterobjektnamen nenne ich mal "JS-Adressnamen". Er ist unterschiedlich zum JavaScript-Fenster-Namen (der z.B. verwendet werden muss, wenn man von einem anderen Fenster aus dieses Fester wieder schließen möchte:
  neuFenster.close(); schließt dieses Fenster von jedem beliebigen anderen Fenster aus wieder.
  inhaltsfenster.close(); funktioniert hingegen nicht.
  Aber:
  Links im Body eines anderen Fensters, welche die aufgerufenen URLs in das NeuFenster laden wollen müssen so aussehen:
  <a href="seite2.html" target="inhaltsfenster">hier klicken</a>
  Folgendes würde nicht funktionieren: <a href="seite2.html" target="neuFenster">hier klicken</a>.

• Der dritte Parameter besteht aus einer Fülle von weiteren Eigenschaftendefinitionen für Aussehen, Größe und ggf. Position des Fensters. Wir werden in unserer vereinfachten Referenz noch weitere Beispiele dafür bringen.

Beispiel: Prompt-Methode und Alert-Methode mit Parametern

Auch diese Beispiele kennen Sie schon.

window.prompt("dies wird angegeben", "dies wird vorausgefüllt");

prompt hat zwei Parameter, häufig wird der zweite leergelassen: window.prompt("dies wird angegeben", "");
Auch das Weglassen (nicht Leerlassen) des zweiten Parameters führt hier zu keiner Fehlermeldung: window.prompt("dies wird angegeben"); Siehe hierzu unsere Diskussion zu unserem Farbkonverter-Utility auf der JavaScript-Beispielseite für Level 2.

Alert hat nur einen Parameter, nämlich den auszugebenden Textstring, also z.B.

window.alert("Hallo Kursteilnehmer");

Parameterwerte können z.T. auch als Variablen definiert sein, dann bleiben die entsprechenden Gänsefüßchen weg, z.B.

var begruessung;
begruessung="Hallo Kursteilnehmer";
window.alert(begruessung);

In unserer nachfolgenden JavaScript-Kurzreferenz werde ich Parameter oft mit in kursiv gesetzen Arbeitsnamen belegen, z.B.

prompt(eingabe, vorgabe);

Sie wissen dann, dass eingabe bzw. vorgabe jeweils für einen in Gänsefüßchen zu setzenden Textstring steht oder aber für eine entsprechend vordefinierte und mit Wert belegte Variable.

7. Sind Methoden auch Funktionen?

In etlichen JavaScript-Büchern oder auch in den Originalreferenzen von Netscape werden Methoden auch als Funktionen bezeichnet. Ich halte dies für etwas verwirrend und wir haben bislang strikt zwischen selbstdefinierten functions und Methoden unterschieden, aber man kann tatsächlich folgendermaßen sagen:

JavaScript gibt uns sog. Methoden vor, die idR. objektbezogen sind (Ausnahmen siehe unsere vereinfachte Referenz, Modul 7.4.2). Diese können auch als built-in-functions (oder "eingebaute Grundfunktionen") bezeichnet werden. Sie werden mit nur einem vordefinierten englischen Namen (z.B. alert), ggf. unter Berücksichtigung der Objekthierarchie und notwendiger bzw. fakultativer Parameter, z.B. window.alert("hallo"); aufgerufen. Was dann umgesetzt wird, ist häufig komplex, braucht uns aber nicht näher zu interessieren, da es vorgegeben ist (bei der alert-Methode wird ein kleines Fenster in bestimmter Form, Größe und Position geöffnet, welches auch noch einen ok-Button hat, ein evtl. Aufbau einer html-Seite wird unterbrochen, und unser Parameter-Text wird ausgegeben). Unter function verstehen wir (und JavaScript) aber die Zusammenfassung verschiedener Anweisungen, welche aus variablen-Definition, Schleifen, Eigenschaftsänderungen und unsterschiedlichsten Methoden bestehen können. Dies alles wird sozusagen abgekapselt, vorgeladen und ausgeführt, wenn es von einem event-Handler aufgerufen wird.

Wie Sie bereits wissen, unterscheiden wir functions und Methoden (="built-in functions") u.a. daran, dass die Anweisung zu ersteren ohne, zu letzeren mit Semikolon abgeschlossen werden (wie auch bei Variablendefinition, Änderung von Eigenschaften etc.). Außerdem geben wir in diesem Kurs function-Namen (und variablennamen) zur besseren Unterscheidung immer deutsche Namen, während die Methoden und Eigenschaften ja vordefinierte englische Namen haben.

Oops: Von uns definierte functions können aber auch als Methode ("benutzerdefinierte Methode") verwendet werden, wenn sie von anderen functions aus aufgerufen werden, dazu aber mehr in 7.4.3.. Neben einer benutzerdefinierten function gibt es zu allem Überfluss aber auch noch die Methode Function(); Dazu aber mehr in 7.4.2.

Fazit: Ich hoffe, die Verwirrung ist nun nicht komplett. Wie so oft, steckt auch bei JavaScript der Teufel im Detail und immerhin sind wir ja bereits bei JavaScript-Level 3. Falls es Sie aber beruhigt: Auch der Kursleiter hatte (und hat z.T. noch heute) die größten Schwierigkeiten bei JavaScript-Programmierung durch die verwaschene Form von Eigenschaftenänderungen sowie die teilweise inkonsequente Objektpfad-Verwendung. Ob Sie eine Objekteigenschaft über ein = Zeichen durch neue Wertzuweisung oder durch eine Methode ändern müssen, können Sie oft nur durch Ausprobieren bzw. durch Nachschlagen in einer Referenz herausfinden. Nie werde ich verstehen, warum es z.B. window.alert("Hallo"); heißen muss, aber window.status="hallo"; (und nicht etwa window.status("hallo"); Da gibt es scheinbar nichts zu verstehen, es ist leider einfach so.

(Da ich aber doch immer irgendwas zum Verstehen brauche, hier meine Eselsbrücke: ein Alertfenster oder ein prompt-Fenster sind nur sehr temporär vorhanden (bis man eben einen ok-Button drückt), deshalb ist dies als Methode zu sehen (die die Eigenschaft des window-Objekts nur sehr kurzfristig ändert). Eine Statusleiste oder auch eine Hintergrundfarbe sind aber dauerhaft vorhanden, nämlich so lange, bis man sie wieder ändert. Vielleicht deshalb muss es heißen window.status="hallo"; bzw. window.document.bgColor="red"; Wie gesagt ist nur ne Eselsbrücke, die längst nicht in allen Fällen funktioniert, aber vielleicht hilft es ein bisschen).

Lassen Sie sich aber nun nicht entmutigen, vieles wird hoffentlich klarer, wenn wir nachfolgend nun etliche Objekteigenschaften, Methoden und Parameter systematisch aufführen und dazu bzw. danach etliche Beispiele dazu angeben. Learning by Doing ist auch bei JavaScript unabdingbar.

>> Modul 7.4.2: Vereinfachte JS-Kursrefererenz

<< Modul 7.3.4: JavaScript-Level 2: Kommentierte Beispiele