7.3.2 Level 2- Anleitung: Grundlagen der JavaScript-Syntax
7.3.2.1: Einstieg in die JS-Syntax
Wie Sie aus unseren JS-Beispielen in Level 1 gesehen haben, können wir mit JavaScript verschiedenste Bereiche unserer Webseiten animieren, interagieren lassen, die Navigation erleichtern oder Angaben darstellen lassen, die wir mit html alleine nicht darstellen können. Derartige Bereiche sind unter anderem:
- das ganze Fenster: mit JavaScript können wir es schließen, in einer bestimmten Größe oder Art öffnen, es schütteln, es auf dem Bildschirm bewegen usw.;
- das html-Dokument im Fenster: wir ändern mit JavaScript dessen Hintergrundfarbe, geben Zusatzinformationen wie z.B. den Browsertyp aus uvm.;
- spezielle Inhalte im Dokument: wir können mit JavaScript Links ein besonderes Aussehen geben, können mit einem Link zwei html-Seiten aufrufen, können anklickbare Bilder als Rollover-Buttons definieren, können Formulareingaben auf ihre Korrektheit testen (näheres dazu im Modul 9) usw.
- Sonstige, nicht direkt ersichtliche, durch JavaScript, definierbare ausgebbare bzw. weiterverwendbare Charakteristika, wie z.B. ein Zeitzähler, Datum und Uhrzeit, der Browsertyp usw.
Dies alles nennt JavaScript nicht "Bereiche", sondern "Objekte". JavaScript ist wie fast alle modernen Programmiersprachen eine objektorientierte Programmiersprache (wie z.B. auch Java oder C++). Programmieren und auch Anweisungen beziehen sich daher immer auf solche Objekte.
Einer Anregung von M.Seeboergers Buch folgend und diese ausbauend, möchte ich Ihnen Objekte und damit verbundene Eigenschaften im JavaScript'schen Sinne mit einigen plakativen Beispielen näherbringen.
Nehmen wir ein Auto als Objekt. Es ist ein Objekt mit verschiedenen Eigenschaften. Manche Eigenschaften sind objektspezifisch und müssen nicht extra angegeben werden, andere sind änderbar.
Micra.color=="red"
Hier beziehen wir uns auf die Eigenschaft Farbe des Objekts Micra und definieren diese als rot. Wir könnten sie später z.B. auf "gruen" ändern, das ist ja ohne weiteres durch Umspritzen zu bewerkstelligen.
Micra.wheels=="4" wäre eine überflüssige Definition einer Eigenschaft des Objekts Micra, da wir davon ausgehen können, dass alle Autos vier Räder haben. Dies sollte also im Objekt Micra impliziert sein, d.h. wir müssen die Eigenschaften nicht extra definieren (und können sie auch nicht ändern), die einem Objekt automatisch zugeordnet sind.
Andere Eigenschaften sind ebenfalls objektspezifisch und können Sie nicht geändert werden, interessieren Sie aber. Sie sind deshalb auch abrufbar (auslesbar). Z.B.:
Micra.maxspeed=="160km"
(Hinweis: micra wäre übrigens in JavaScript ein anderes Objekt als Micra, da es klein geschrieben ist und JavaScript kontextsensitiv ist).
Sie wollen unbedingt einen Micra kaufen, aber nur wenn er grün ist. Dieses ist also ein konditioniertes Vorhaben (d.h. ein Programm bzw. eine function), welches nur unter bestimmten Bedingungen aufgerufen wird:
if (Micra.color=="green")
{
buy();
}Vielleicht haben Sie auch mehrerere Bedingungen für den Kauf; schließlich gibt es unterschiedliche Modellvarianten, auch bei den Motoren. Sie wollen den Micra nur, wenn er grün ist und als Höchstgeschwindigkeit 160 km hat, nicht etwa nur 120 km.
if (Micra.color=="green" && Micra.maxspeed=="160km")
{
buy();
}Vielleicht können Sie sich ja auch nicht entscheiden, ob Sie einen grünen Micra oder einen grünen Corsa wollen. Da der Corsa schneller ist, wollen Sie den Micra nur, wenn er wirklich 160 fährt. Ansonsten lieber einen blauen Corsa. Wenn es den Corsa aber nicht in Blau gibt und den grünen Micra, der 160 fährt auch nicht, lassen Sie es ganz bleiben. Dieses Mal ein bisschen anders programmiert:
<head>
<title>ich will ein Auto</title>
<script language="FahrzeugScript">
<!--
function kaufabsicht()
{
if (Micra.color=="green" && Micra.maxspeed=="160km")
{
buy();
break;
}
else
{
if (Corsa.color=="blue")
{
buy();
break;
}
else
{
alert ("leider nix gewüschtes da!")
}
}
-->
</script>
</head>
Das obige sieht sehr JavaScript-mäßig aus, wir haben natürlich unsere fiktive Programmiersprache FahrzeugScript ganz an die JavaScript-Syntax angelehnt. Aber natürlich würde nichts passieren, wenn Sie dies wirklich als JavaScript schreiben und in eine Webseite kompieren (machen Sie das lieber nicht, es ergibt bestenfalls einen Browserabsturz). Dazu gleich mehr.
Schauen wir uns aber den Code einmal an.
- Ein Skript wurde als FahrzeugScript definiert (für Webseiten müsste dies JavaScript sein),
- dann für alte Browser der Code mit dem <!-- Kommentaranfangszeichen versteckt,
- danach wurde die function kaufabsicht definiert.
- Diese besteht aus verschiedenen Anweisungen, verbunden mit einer Bedingung (if-Abfrage). Wenn also ein Objekt Micra mit den entsprechenden Eigenschaften vorhanden ist wird gekauft, ansonsten wird geguckt, ob ein blauer Micra da ist, der würde auch gekauft. Ist auch der nicht da, gibt es einen Hinweis, dass das gewünschte leider nicht da ist.
- break; ist ein Schlüsselwort und veranlasst, dass bei Eintreten der Bedingung das restliche Skript nicht weiter abgearbeitet wird.
- danach kommt der schließende Kommentartag --> und das Skriptende-Tag
Nun, warum funktioniert das Skript nicht. Dafür gibt es eine ganze Reihe von Gründen:
- es fehlt ein Aufruf der Skript-Funktion kaufabsicht durch einen Event-Handler (den hätten wir natürlich in den Body einbauen können, etwa in der Art: <a href="#" onclick="kaufabsicht()">bestimmt gibt es hier was für Sie!</a>
- Es gibt in JavaScript keine durchführbare Anweisung buy();. Durchführbare Anweisungen (unter bestimmten Voraussetzungen auch Methoden genannt) in JavaScript wären z.B. document.write();, window.open();, alert(); usw.
- Es gibt in JavaScript auch kein Objekt Micra oder Corsa. JavaScript kann nur mit bestimmten, definierten, webspezifischen Objekttypen arbeiten, die entweder vom html-Dokument bzw. Browser vorgeben sind (z.B. Objekte window, navigator, document), neu generiert werden können (z.B. date-Objekte, neue window-Objekte etc.) oder ansonsten für die Skriptausführung von JavaScript vordefiniert sind (z.B. Objekte Math, Array usw.)
Wir bleiben dennoch noch ein bisschen bei unserem Beispiel.
Nehmen wir an, Sie haben Ihren grünen Micra in der Garage und wollen damit fahren (d.h. eine weitere Aktion bzw. Programm bzw. Funktion ausführen). Nehmen wir an, es gäbe in JavaScript die definierte Anweisung bzw. Methode drive, die auf Ihr Objekt Micra anwendbar ist. Nennen wir sie drive();
Also wäre ein entsprechendes Skript einfach nur:
<head>
<title>Mein Auto fährt</title>
<script language="FahrzeugScript">
<!--
function ausflug()
{
Micra.drive();}
}
-->
</script>
</head>
Bemerkungen:
- Hätten wir die Zeile function ausflug() weggelassen würde das Auto beim Laden der Seite gleich losfahren (ha, ha), wir haben die Methode drive, die wir auf das Objekt Micra anwenden, in eine von uns definierte function, der wir den Namen ausflug() gegeben haben, verpackt. Damit steht beim Laden der Seite der Micra abfahrbereit zur Verfügung (der Motor ist bereits angelassen, d.h. das Skript ist bereits geladen), das Losfahren geschieht aber erst, beim Aufruf eines eventhandlers (vergleichbar mit dem Einlegen eines Ganges und Loslassen der Kupplung). Ein möglicher Eventhandler könnte wiederum folgendermaßen aussehen (im body-Teil): <a href="#" onclick="ausflug()">jetzt geht's aber los</a>
- Die Methode drive(); ist nicht nur auf unser Objekt Micra anwendbar. Auch den Corsa können wir so fahren lassen, z.B. Corsa.drive();. Falls in unserer FahrzeugScript-Sprache ein Objekt Cycle vorgesehen ist, könnten wir dies sicher ebenfalls mit Cycle.drive(); losfahren lassen. Bei einem Objekt Walker wäre diese Methode aber nicht sinnvoll, und ist deswegen in unserer FahrzeugScript-Sprache nicht vorgesehen.
Wichtig: in obigen Beispielen habe ich von der (fiktiven) Sprache FahrzeugScript alles in Englisch geschrieben, was durch die Skript-Sprache als fest definiert vorgegeben ist (sog. Schlüsselwörter, die für Anweisungen, wie z.B. if-Abfragen, Methoden, wie z.B. buy(); drive(); oder Eventhandler (z.B. onclick) reserviert sind). Alles, was Sie innerhalb des Skriptes verändern können (bislang nur die Funktionsnamen) habe ich deutsch geschrieben. In den nachfolgenden Sytax-Beispielen zu JavaScript werde ich genauso verfahren, damit Sie rasch zuordnen können, was veränderbar (deutsch) und was fix (englisch) ist.
Objekthierarchien als Beispiel:
In JavaScript gibt es viele Objekte auf unterschiedlichen Ebenen, wir kommen dazu nachstehend. Dies ist mit unserem Beispiel FahrzeugScript ebenfalls leicht veranschaulichbar. Es ist sicherlich sinnvoll, dass es in FahrzeugScript ein Objekt Car gibt, dem Objekte wie Corsa, Micra oder Golf untergeordnet sind. Parallel zum Object car könnte es noch die Objekte Truck und Cycle geben. Diese könnten noch zu einem Objekt Vehicles zusammengefasst sein. Auf gleicher Ebene damit könnte unser Objekt Walker stehen. Auch das Objekt Micra (und anderer ) könnte Unterobjekte wie z.B. Seat haben, welche wiederum bestimmte Eigenschaften (color, size, number) haben könnten (s. Abb. rechts).
Auch in JavaScript gibt es derartige Objekthierarchien, aber ganz so verschachtelt ist es nicht. Das JS-Objekt window hat z.B. als Unterhierarchie das Objekt document, welches wiederum als Unterhierarchie z.B. Objekte des Typs Image oder Form haben kann. Ein Formularobjekt (Form) hat wiederum Unterobjekte (sog. elements, darunter zu beispiel Button-Objekte).
In untenstehender Abbildung sind einige Beispiele für JavaScript-Objekte aufgeführt. Die erste Zeile ist die oberste Ebene, die darunterstehenden Objekte sind untergeordnet. Viele Objekte stehen in der obersten Ebene und haben keine untergeordneten Objekte. Das Window-Objekt hat mehrere untergeordnete Objekte, davon hat das document Object seinerseits viele weitere untergeordnete Objekte.
