2 JavaScript-Grundlagen
JavaScript ist eines der mächtigsten Werkzeuge für jeden Web-Entwickler und kann mit wenigen Handgriffen und einfachem Code für neues Leben in nahezu jeder Website sorgen. Darüber hinaus bildet es die Basis für alle Techniken, die im Folgenden beschrieben werden, und ist daher elementarer Bestandteil einer jeden DHTML- oder Ajax-Anwendung. In diesem Kapitel wollen wir Ihnen einen umfassenden Einblick in die JavaScript-Programmierung bieten und Ihnen die Werkzeuge an die Hand geben, die Sie für spätere Entwicklungsaufgaben benötigen.
2.1 Einführung
Was ist JavaScript eigentlich? Grob gesagt, ist JavaScript eine Programmiersprache, mit deren Hilfe zum Beispiel innerhalb des Browsers bestimmte Aktionen durchgeführt werden können. Zu diesen Aktionen gehören etwa das Auswerten von Formularen, das Auslesen und Schreiben von Cookies oder einfach das Öffnen eines neuen Browser-Fensters (das sogenannte Popup).
Was ist JavaScript?
Genau genommen, ist JavaScript eine Technologie, um relativ einfache Programmabläufe erstellen zu können. Die Syntax der Sprache ist, wie der Name vermuten lässt, stark an die Programmiersprache Java angelehnt – wer Java schon kennt, wird demnach mit JavaScript keine Probleme haben. In den häufigsten Fällen wird JavaScript innerhalb des Browsers zur Steuerung des Browser-Inhalts beziehungsweise zur Interaktion mit dem Benutzer eingesetzt. Darüber hinaus gibt es jedoch auch Software-Umgebungen, in denen JavaScript direkt auf dem Server eingesetzt wird. Da diese Varianten jedoch kaum Verbreitung gefunden haben, ist in der Regel clientseitiges JavaScript gemeint, wenn von JavaScript die Rede ist.
Entstehung
JavaScript kann auf eine für IT-Verhältnisse schon recht lange Geschichte zurückblicken. Ursprünglich entwickelt wurde es um 1996 von der Firma Netscape, von der damals auch der beliebteste Browser stammte (inzwischen ist Netscape in AOL aufgegangen, der Browser-Code ist in das Mozilla-Projekt und den Firefox-Browser eingeflossen). Der Name sollte ursprünglich LiveScript heißen, wurde jedoch aufgrund der damaligen enormen Bekanntheit und der angelehnten Syntax nach der Programmiersprache Java benannt. Im Zuge der Rivalität zwischen Microsofts Internet Explorer und Netscapes Navigator wurde auch die Entwicklung von JavaScript vorangetrieben, die jedoch mit dem Ende des sogenannten »ersten Browser-Kriegs« (zwischen Microsoft und Netscape) und dem Rückzug Netscapes aus der Browser-Welt ins Stocken geriet. Bislang sind sechs Versionen (1.0 bis 1.5) entstanden, die sich jeweils durch Neuerungen in Sachen Syntax und verfügbarer Code-Objekte (Bibliotheken) unterscheiden[1]. Aktuell wurde außerdem eine neue Version von ECMAScript (die standardisierte Form von JavaScript) herausgegeben, die jedoch in den aktuellen Browsern noch nicht implementiert wurde. In diesem Zusammenhang ist auch die Version 2.0 von JavaScript bereits seit Langem in Vorbereitung.
Client- und serverseitig
JavaScript ist weitestgehend eine clientseitige Sprache, das heißt, sie wird vorwiegend im Browser ausgeführt und kommt nur selten direkt auf dem Webserver zum Einsatz. Der Browser lädt dazu vom Server die Website (das HTML-Dokument) herunter und durchsucht es nach Vorkommen von JavaScript-Code. Wird solcher Code gefunden, wird er ausgeführt und je nach Inhalt und Ergebnis angezeigt beziehungweise ausgegeben.
Effektiv auf einem Server zum Einsatz gekommen sind lediglich SSJS (Serverside JavaScript) – ein Feature von Netscapes damaliger Webserver-Software – sowie die Möglichkeit, bei Microsofts ASP-Implementation statt der Sprache VBScript auch JScript (Microsofts JavaScript-Variante) einzusetzen. In der Praxis sind allerdings weder Netscapes Webserver noch ASP mit JScript von Bedeutung.
Versionen und Browser
Je nach Browser-Hersteller und -Version werden jeweils nur eine bestimmte JavaScript-Version oder teilweise sogar nur Teile einer bestimmten Version unterstützt. Darüber hinaus war es lange Zeit der Fall, dass die beiden meistverwendeten Browser Microsoft Internet Explorer und Netscape Navigator (jetzt Mozilla Firefox) teils gegenläufige Methoden, Objekte und Technologien unterstützten und damit jedem Programmierer die Arbeit schwer machten, wenn dieser versuchte, die Website für möglichst alle Browser zugänglich zu machen. Dies ist zum Glück mittlerweile nicht mehr von so tragender Bedeutung. Zwar existieren immer noch diverse Browser, die JavaScript teils sehr unterschiedlich beherrschen – aufgrund der sehr weiten Verbreitung des Internet Explorer 6, 7 beziehungsweise 8 sowie des Mozilla Firefox 1.5, 2 beziehungsweise 3 und der damit einhergehenden Vereinheitlichung sind wir mittlerweile jedoch an einem Punkt, an dem das Thema der Browser-Version für JavaScript allein eine eher untergeordnete Rolle spielt. Einzig bei neueren Technologien wie Ajax bestehen leider immer noch Probleme, wenn es um Browser-Kompatibilität geht – dazu aber an der jeweiligen Stelle dann mehr.
2.2 Erste Schritte
Nun ist es an der Zeit, dass wir uns konkret mit der Programmierung von JavaScript beschäftigen. Um Ihnen den Einstieg zu erleichtern, werden wir mit sehr einfachen Beispielen beginnen und uns im Verlauf dann komplexeren und umfangreicheren Themen widmen.
Wie fange ich an?
Für alle Schritte in diesem Kapitel benötigen Sie zunächst einmal einen Editor beziehungsweise eine Möglichkeit, den hier gezeigten Beispiel-Code in eine Datei einzugeben. Im vorhergehenden Kapitel haben wir Ihnen dazu einige Programme vorgestellt – nun ist es an der Zeit, eines davon einzusetzen: Öffnen Sie das Programm Ihrer Wahl, und legen Sie eine neue, leere HTML-Datei an, in die Sie den Code einfügen können. In Eclipse geschieht dies über den Button »New« und die Auswahl »Web > HTML«.
JavaScript und HTML
Wie eingangs erwähnt, wird JavaScript-Code direkt in das HTML-Dokument hineingeschrieben. Damit der Browser JavaScript-Code von normalem Text unterscheiden kann, wird dieser innerhalb eines <script>
-Elements notiert. Ein einfaches Beispiel hierzu:
<html> <head> ... </head> <body> <script type="text/javascript" language="JavaScript"> <!-- alert('Ich bin internes JavaScript!'); //--> </script> </body> </html>
Im obigen Beispiel findet sich ein <script>
-Abschnitt, welcher den Code direkt in ein HTML-Dokument einbettet. Dieser wird hier innerhalb der Tags <script ... >
und </script>
in einen HTML-Kommentar gesetzt (damit ältere Browser keine Probleme haben). In diesem Beispiel besteht der JavaScript-Code also aus der einen Zeile …
alert('Ich bin JavaScript!')
… welche die Ausgabe des Textes innerhalb eines kleinen Meldungsfensters hervorruft. Speichern Sie die Datei zum Beispiel als test.html
und öffnen Sie sie in einem Browser. Anschließend wird etwa folgendes Fenster angezeigt:
Bild 2.1 Der alert-Aufruf zeigt eine Meldung an.
Glückwunsch, Ihr erstes kleines Skript ist fertig!
JavaScript in einer externen Datei
Wenn die Skripte einmal umfangreicher werden oder etwa innerhalb mehrerer Seiten genutzt werden sollen, kann JavaScript-Code ganz einfach in eine externe Datei ausgelagert und von allen anderen Dateien darauf zugegriffen werden. Um dies zu tun, wird der Code aus dem <script>-
Abschnitt ausgeschnitten und in eine neue Datei kopiert. Gehen Sie hier wie folgt vor:
- Öffnen Sie eine neue, völlig leere (JavaScript-)Datei, und geben Sie dieser den Dateinamen
extern.js
. - Schneiden Sie den JavaScript-Code aus dem obigen Beispiel aus der Datei aus (ohne den Kommentar-Code, also nur die Zeile
alert('Ich bin internes JavaScript!');
). - Fügen Sie den ausgeschnittenen Code in die Datei
extern.js
ein, und speichern Sie diese im gleichen Verzeichnis, in dem sich auch die HTML-Datei befindet. - Ändern Sie den
<script>
-Abschnitt in der HTML-Datei in:<script type="text/javascript" language="JavaScript" src="extern.js"></script>
Wie im Beispiel zu sehen, wird innerhalb des src
-Attributs die Datei benannt, in der sich der JavaScript-Code befindet. Findet der Browser in einem HTML-Dokument einen <script>
-Abschnitt, in dem dieses Attribut enthalten ist, wird die benannte Datei nachgeladen und...