Bausteine und Regeln der JavaScript-Syntax - Objekte, Methoden und Co.
(Teil 1 von 3: Objekte, Eigenschaften, Methoden, Funktionen)
Wir wollen nun etwas systematischer vorgehen. Nachfolgend behandeln wir die wichtigsten Bausteine und Regeln der JavaScript-Syntax, teilweise kennen wir sie bereits aus oben stehenden Beispielen:
Wir kennen schon aus den vorhergehenden Erläuterungen einige der oben stehenden Objekte von JavaScript, z.B. das Window-Objekt, das document-Objekt, oder das navigator-Objekt (diese Erläuterungen sowie JS-Level 1 sollten Sie gelesen haben, bevor Sie hier weiterlesen).
Objekte sind für JavaScript meist automatisch vorhanden, sobald eine html-Seite geladen ist. JavaScript erkennt dann das Vorhandensein z.B. eines Window-, document-, navigator- oder screen-Objects. Manche Objekte sind auch vorhanden, ohne dass direkte Entsprechungen in den html-Seiten zu finden sind (z.B. das Math-Object)
Objekte können teilweise auch neu angelegt werden (z.B. Image-Objekt), wenn Sie nicht oder nicht in der gewünschten Weise in der html-Seite verankert sind. Andere Objekte wie z.B. das Date-Objekt müssen in JavaScript immer neu angelegt werden, um es verwenden zu können.
Objekte können Unterobjekte anderer sein. Das document-Objekt ist z.B. ein Unterobjekt des Window-Objekts. Die Ansprache innerhalb von JavaScript erfolgt häufig pfadartig, z.B. als window.document. Das document-Objekt kann weitere Unterobjekte haben, z.B. Image, Form, Link, etc., diese haben z.T. wieder Unterobjekte (z.B. window.document.form.elements).
Hier nochmals das Objekthierarchiebeispiel aus dem vorhergehenden Teilmodul.
Erläuterungen zu oben gesagtem (z.B. wie lege ich ein Objekt an?) finden Sie im weiteren Verlauf dieses Kapitels, in den Beispielen zu Level 2 sowie in Level 3.
Objekte in JavaScript haben vielfältige Eigenschaften. Diese können z.T. ausgelesen werden (und dann anderweitig verwendet werden, z.B. um durch ein JavaScript-Programm ausgegeben zu werden), z.T. auch an Hand von Benutzereingaben oder anderen Vorgaben durch ein JavaScript-Programm verändert werden (dazu unten). das document-Objekt hat z.B. u.a. die Eigenschaften bgColor oder fgColor (letzteres bedeutet foreground color, gemeint ist damit die Textfarbe. Um die Textfarbe anzusprechen, müssen wir den "Objektpfad" berücksichtigen. Wir müssten somit folgendermaßen im JS-Programm schreiben, um die Eigenschaft fgColor des document-Objectes, welches wiederum ein Unterobjekt des Window-Objektes ist, anzusprechen:
window.document.fgColor
Der Wert der Eigenschaft ist nun eben eine bestimmte Farbe. Diese kann ggf. ein oder ausgegeben werden (s.u.). Ist unsere normale Textschrift in Schwarz gehalten, hätte diese Eigenschaft folgenden Wert:
window.document.fgColor="#000000"das ist die Ihnen bereits vielfältig begegnete hexadezimale RGB-Darstellung.
Sie könnte aber alternativ auch mit dem Namen für webreservierte Standardfarben belegt sein, was dem gleichen Wert entspricht:
window.document.fgColor="black"
In dieser Form ist es uns die Egenschaft aber noch zu nichts Nutze (wir haben die Eigenschaft nur adressiert), wir müssen Sie mit einer Methode oder function noch weiterverwenden. Dazu gleich mehr.
Methoden sind im Prinzip in JavaScript vordefinierte Ausführungsanweisungen, die sich auf Objekte bzw. deren Eigenschaften beziehen. In unserer fiktiven FahrzeugScript-Sprache waren dies z.B. buy(); oder drive(); Wichtig ist hierbei nicht nur die Doppelklammer(), sondern auch der nachfolgende Semikolon ; Dies weist den Code als Methode aus. Wichtig: diese Methoden sind vordefiniert und beziehen sich auf bestimmte Objekte, können aber häufig auch auf verschiedene Objekte angewendet werden, wobei dann die jeweilige Ausführung ans Objekt automatisch angepasst wird. In der runden Klammer können bestimmte Parameter angegeben werden, die die Eigenschaften des angesprochenen Objektes gleich neu einstellen.
Beispiele:
Hier das Ergebnis. Sehen Sie auch den Quellcode durch.
Beispiel 2: window.document.open() öffnet ein neues Dokument (in diesem Fall leer, da nichts weiter angeben ist)
Hier das Ergebnis. Sehen Sie auch den Quellcode durch.
Beispiel 3: Nun das Window.open-Beispiel mit vielen möglichen Eigenschaften und deren Werten. Die Werte sind in Rot angegeben und können von Ihnen eingestellt werden (no-Werte können durch yes-Werte vertreten werden und umgekehrt. Bei scrollbars kann als Wert auch auto angegeben werden. Die jeweiligen Eigenschaften sind jeweils in normalen "..." oder einfachen '...' eingeschlossen und von einem Komma getrennt. Zuerst wird ein zu ladendes html-Dokument angegeben, danach ein beliebiger Fenstername, den Rest erkennen Sie selbst.
window.open('testseite.html','fenstername',
'toolbar=no,location=no,directories=no,
status=no,menubar=no,scrollbars=yes,
resizable=yes,width=400,height=500');
(Hinweis: die Properties müssen ohne Umbruch in eine Zeile geschrieben werden).
Hinweis zu Beispiel 3:
Werden Eigenschaften ausgelassen, muss ein leerer ' ' als Platzhalter stehen. Wenn aus bestimmten Gründen das Fenster erst einmal leer bleiben soll, müssten Sie schreiben:window.open('','fenstername','toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=400,height=500');
Beispiel 4: Nun Beispiel 2 mit einer Ausgabe für das neue Dokument. Wir schreiben einen Begrüßungstext via JavaScript, müssen also gar kein neues html-Dokument anlegen.
Mit JavaScript können wir einzelne Zeilen mit der Methode document.writeln(); schreiben, mit der Methode document.write(); wird ohne Umbruch weitergeschrieben.Wir schreiben:
window.document.writeln(<h2>mein ferngesteuertes Dokument</h2);
window.document.writeln(<p>na, das klappt ja wieder toll</p>);in der Methode window.document.open() geben wir als Property in der () Klammer an, dass es sich um ein html-Dokument handeln soll (wir könnten auch blos ein Bild oder einen Film aufrufen), deshalb heißt dies nun:
window.document.open("text/html");
danach lassen wir den obigen Text via JavaScript in das Dokument schreiben.
Beispiel: Hier das Ergebnis.
Der Quellcode dieses Dokumentes zum Nachvollziehen:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Neues Dokument 2</title>
<script language="JavaScript">
<!--
function neuesDok()
{
window.document.open("text/html");
window.document.writeln("<h2>mein ferngesteuertes Dokument</h2>");
window.document.writeln("<p>na, das klappt ja wieder toll</p>");
}
// -->
</script>
</head>
<body bgcolor="#ffffff">
<p>Hallo</p>
<p></p>
<p>neues <a href="#" onClick="neuesDok()">Dokument mit durch JavaScript geschriebenem Text</a></p>
</body>
</html>
In diesem Dokument stecken also gleichsam zwei html-Dokumente. Die Ausgabe des ersten ist im Body mit html definiert, die Ausgabe des zweiten im JavaScript, welches als function neuesDok() definiert ist und durch den Eventhandler onlick aufgerufen wird. Das zweite Dokument ist bereits innerhalb des ersten Dokumentes "vorgeladen" und kann bei Eintreten des Events (klicken auf Link) sofort umgesetzt werden, ohne dass der Server neu abgefragt werden müsste.
In der Funktion neuesDok() werden also mehrere Methoden von Objekten ausgeführt, wobei die angegebenen Eigenschaftenwerte umgesetzt werden.Der Aufruf vieler Methoden ist nur sinnvoll, wenn gleich Eigenschaften-Werte mit angegeben werden. Der einzige sinnvolle Wert für die alert-Methode des Objekts window ist die Ausgabe eines Hinweistextes in einem sog. Textstring, der sich innerhalb von ".." befindet.
window.alert("dies ist ein Alertfenster");
Manche Methoden, wie die alert-Methode sind eindeutig auf ein Objekt bezogen. In diesen Fällen kann die Objektangabe bzw. der Objektpfad auch weggelassen werden. Statt obigen Codes können Sie also auch schreiben:
alert("dies ist ein Alertfenster");
Es gibt auch einige Methoden, die keinem Objekt zugeordnet sind, hier geht es v.a. um Umwandlungen von Text in Zahlen und umgekehrt (z.B. parseFloat();), dazu aber erst später.
Mit obigem Beispiel 4 haben wir gleich erklärt, was Funktionen sind. Im unterschied zu von Ihnen nur via Eingabe von Eigenschaftswerten beeinflussbaren Methoden können Sie in Funktionen verschiedenste Objektmethoden, z.T. auch sonstige Angaben wie Variablen u.a. (siehe unten) zusammenfassen und nacheinander abarbeiten lassen. In gewisser Weise sind also Methoden vorgefertigte Funktionen, während die "echten" JavaScript-Funktionen äußerst komplex sein können und sich aus vielfältigsten Methoden, die unterschiedlichste Objekte betreffen, zusammensetzen können. Allerdings sind Funktionen mmer nur via Eventhandler (oder durch andere Funktionen) aufrufbar, während Methoden, wenn Sie außerhalb von Funktionen stehen, direkt beim Laden der Seite abgearbeitet werden (z.B. die windows.document.writeln(); -Methode. Funktionsnamen sind beliebig (in unseren Beispielen immer deutsch), sofern sie die JavaScript-Regeln, die annähernd analog der html-Regeln sind, befolgen (keine Umlaute und Sonderzeichen, aber auch keine Klammern, Rechenzeichen, Slashes, Punkte sowie keine Zahl am Beginn). Außerdem dürfen keine reservierten Wörter verwendet werden (siehe unten). Methoden haben definierte Namen. Funktionen haben keinen Semikolon nach dem Funktionsnamen (), Methoden schon. Innerhalb der Funktionsklammer können auch Variablennamen angegeben werden (s.u.). Funktionen beginnen nach Namen und Doppelklammer mit der geschweiften Klammer { , welche der Übersichtlichkeit halber am besten in eine neue Zeile gesetzt wird; sie enden mit der Schließung dieser Klammer, also }