Inhalt dieses Kapitels:
Erhältlich u.a. bei Amazon.de
1
Von Stefan Mintert
Im Jahre 1995 hat die Firma Netscape begonnen, für ihren Web-Browser Navigator eine Programmiersprache zu entwickeln, die den bis dahin unveränderlichen Web-Seiten Leben einhauchen sollte. Auf die Frage, weshalb denn eine neue Sprache entwickelt werden sollte und weshalb nicht etwa Perl verwendet werden könne, antwortete der maßgebliche Entwickler Brendan Eich in einer Newsgruppe: "Ich mag Perl sehr. Ich hatte aus Marketing-Gründen nicht die Möglichkeit, sie in den Navigator einzubetten, als ich JavaScript erschuf. Die Netscape-HTML-Skriptsprache sollte oberflächlich Java-ähnlich sein [...]. Mein erster Gedanke war übrigens, Scheme einzubauen, aber das wurde ebenfalls aus Marketing-Gründen abgelehnt sowie aus unbewiesenen, aber intuitiven Ängsten hinsichtlich der einfachen Handhabbarkeit, die auch für Perl gelten."
JavaScript ist nicht Java "light"
Ebenso wie die Entscheidung für die Sprache selbst mehr vom Marketingstandpunkt aus getroffen wurde, so wurde auch der Name gewählt. Ursprünglich war der Name LiveScript, was in die Linie mehrerer "Live"-Produkte von Netscape passte (LiveWire, LivePayment, LiveConnect usw.). Der Erfolg von Java und ein entsprechendes Abkommen mit der Firma Sun sorgte dann für den endgültigen Namen JavaScript. Ein wirklicher Bezug zu Java ist damit nicht gegeben, von gewissen syntaktischen Ähnlichkeiten abgesehen.
Jscript
ECMAScript
Der erste Web-Browser, der JavaScript-Programme ausführen konnte, war der Navigator 2. Ab der Version 3 hat auch Microsoft mit dem Internet Explorer die Sprache unterstützt, allerdings aus rechtlichen Gründen unter dem Namen JScript. Eine dritte Bezeichnung kam dann 1996 ins Spiel, als Netscape zusammen mit dem europäischen Konsortium ECMA eine standardisierte Form schaffen wollte. Das Ergebnis dieser Arbeit heißt heute ECMAScript. Mittlerweile ist die Sprache unter dem einen oder anderen Namen weit verbreitet. Neben den Web-Seiten können z.B. auch PDF-Dokumente JavaScript (bzw. ECMAScript) enthalten. Eine ausführliche Auflistung der wichtigen Stationen der Entwicklung ist im Netz unter der Adresse http://www.mintert.com/javascript/ zu finden.
In diesem Buch geht es um JavaScript als Programmiersprache für das Web-Publishing. Viele Anwendungsmöglichkeiten und Einsatzgebiete lassen wir außen vor, um uns auf die Verwendung der Sprache zusammen mit HTML zu konzentrieren. HTML betrachten wir hier als die Dokumentensprache für das World Wide Web; dass es verschiedene Versionen und Dialekte gibt, spielt hier keine Rolle. Ebensowenig die zukünftigen Möglichkeiten, die sich durch XML ergeben 1. Als zu Grunde liegende HTML-Version verwenden wir hier XHTML 1.0, also eine Version, die funktionsgleich zu HTML 4 ist. Da es aber in diesem Buch nicht um HTML geht, werden wir im folgenden keine exakte Unterscheidung der Versionen machen und in den Beispielen einen pragmatischen Ansatz wählen. Im Einzelfall kann das bedeuten, dass wir vielleicht nicht ganz standardkonform sind, einfach deshalb, weil sich die Web-Browser nicht an Standards halten. Unsere Beispiele laufen dafür auch in der Praxis, nicht nur in der Theorie 2. Für weitere Informationen zu HTML verweisen wir zum Beispiel auf [RAGG98] und natürlich auf http://www.w3.org/MarkUp/.
Genug der Vorrede, kommen wir zur Sache. JavaScript-Programme werden in HTML-Dokumente eingebettet. Dazu muss es natürlich irgendein Element geben, damit der Text in einer Seite von dem Programm unterschieden werden kann. Das zuständige Element in HTML trägt den Namen script. Im einfachsten Fall sieht es so aus:
<script> ... hier steht das JavaScript-Programm ... </script>
Das Element darf (fast) überall in einer Webseite enthalten sein, wobei es für viele Zwecke sinnvoll ist, script im Element head unterzubringen. Außerdem sagt der Name des Elements noch gar nichts darüber aus, um welche Programmiersprache es sich bei dem Inhalt handelt. Zwar geht es hier nur um JavaScript, es könnte aber auch eine andere Sprache sein. Der Internet Explorer kann beispielsweise auch VBScript ausführen 3. Wir müssen dem Browser also noch einen Hinweis geben, welche Art von Inhalt er in script vorfindet. Dazu gibt es zwei Attribute, language und type. Das erste wurde von Netscape eingeführt, das zweite ist eine Vorgabe des HTML-Standards, die in der Praxis noch nicht relevant ist, die man aber schon jetzt einhalten kann. Damit ergibt sich als Muster für eine HTML-Datei mit einem JavaScript-Programm die folgende Darstellung:
<html> <head><title>... der Titel des Dokuments ...</title> <script language="JavaScript" type="text/javascript"> ... hier steht das JavaScript-Programm ... </script> </head> <body> ... hier steht die HTML-Seite ... </body> </html>
Diese Position von script - im Kopf der Seite - bietet sich an, um dort Funktionen, Variablen und weitere Datenstrukturen zu definieren, die zu einem späteren Zeitpunkt verwendet werden. Beispiele dafür werden die nachfolgenden Kapitel liefern.
Ereignisse
Eine wichtige Aufgabe von JavaScript-Programmen besteht darin, auf Ereignisse zu reagieren. Ereignisse können zum Beispiel Aktionen des Benutzers sein, wie etwa das Anklicken eines Buttons oder das Ändern eines Formularfeldes. Um darauf reagieren zu können, wurden mit JavaScript besondere Attribute für einige HTML-Elemente definiert, die so genannten Event-Handler. Auch in diesen Attributen können JavaScript-Anweisungen stehen, die bei Eintreten des Ereignisses ausgeführt werden. In Kapitel 6 erfahren Sie mehr darüber. An dieser Stelle nur ein kleines Beispiel:
<input type="button" onClick="...JavaScript-Anweisungen...">
Noch einmal zusammengefasst: JavaScript-Anweisungen dürfen in HTML
Mit diesen wenigen Informationen haben wir nun schon genug zusammen, um endlich einmal ein erstes lauffähiges Beispiel zu zeigen. Zwar haben wir noch nicht alles erklärt, was in Listing 1.1 zu sehen ist. Aber zusammen mit der Abbildung ist zu erkennen, dass das Programm nach dem Laden ein kleines Fenster öffnet und den Leser begrüßt.
<html>
<head><title>JavaScript-Hello-World</title>
<script language="JavaScript" type="text/javascript">
function begruessung()
{
alert("Willkommen bei JavaScript!");
}
</script>
</head>
<body onLoad="begruessung()"> <h1>Das erste JavaScript-Beispiel</h1> </body> </html>
Listing 1.1: Ein Hello-World-Beispiel in JavaScript - beispiel0101.html -
Abbildung 1.1: Das Hello-World-Beispiel nach dem Laden der Seite
JavaScript-Bibliotheken
Möglicherweise möchten Sie die oben definierte Funktion begruessung() auch in anderen Webseiten verwenden. In so einem Fall bietet es sich an, die Funktion(en) nicht in die Seite einzubetten, sondern sie in einer externen Datei zu speichern und diese Datei einzuladen. Genauso, wie Bilder auch nicht in der HTML-Datei stehen, kann man auch JavaScript-Programme extern speichern. Angenommen, eine solche Datei (mit unserer begruessung()-Funktion) trägt den Namen kernfunktionen.js, die im gleichen Verzeichnis wie die HTML-Datei steht, dann lässt sich obiges Beispiel folgendermaßen umschreiben:
<html>
<head><title>JavaScript-Hello-World</title>
<script language="JavaScript"
type="text/javascript"
src="kernfunktionen.js">
</script>
</head>
<body onLoad="begruessung()"> <h1>Das erste JavaScript-Beispiel</h1> </body> </html>
Listing 1.2: Das Hello-World-Beispiel mit externer JavaScript-Datei
Auf eine Abbildung können wir hier verzichten, da sich das gleiche Ergebnis einstellt wie bei dem Listing zuvor.
Sie wissen sicherlich schon, dass nicht alle Browser JavaScript beherrschen. Es stellt sich daher die Frage, was machen diese Browser mit unserem JavaScript-Programm? Mit etwas Glück lautet die Antwort: Ignorieren! Wenn der Web-Browser neueren Datums ist, wird er das Element script kennen und den Inhalt einfach übergehen. Eventuell kommt das Programm aber auf die Idee, den Inhalt anzuzeigen. Dann würde der Leser unserer Web-Seite also die JavaScript-Anweisungen zu sehen bekommen. Das ist zweifellos nicht das, was wir wollen. Um das zu verhindern, muss der Inhalt von script in HTML-Kommentare eingebettet werden:
<script language="JavaScript" type="text/javascript"> <!-- Inhalt vor alten Browsern verstecken
... hier steht das JavaScript-Programm ...
// Ende: Inhalt verstecken --> </script>
Kommentare
In dieser Form ist nun alles zwischen <!-- und --> für alte Browser unsichtbar (HTML-Kommentar). Zu beachten ist hierbei noch, dass das Ende durch // eingeleitet wird. Dabei handelt es sich um einen JavaScript-Kommentar, der verhindert, dass die Zeichen "Ende: Inhalt verstecken -->" als Teil des Programms angesehen werden. Wir müssen hier also zwei verschiedene Kommentare einsetzen, HTML-Kommentare und JavaScript-Kommentare. Wem das zu kompliziert ist, kann schlicht und einfach das obige Muster kopieren und als Startpunkt für eigene Seiten benutzen. Eine weitere Form des JavaScript-Kommentars soll an dieser Stelle aber auch noch erwähnt werden. Um mehrere Zeilen in einem Programm (nicht in HTML!) auszukommentieren, schließt man diese in die Zeilen /* und */ ein.
Es ist zwar schön, dass wir nun in der Lage sind, unser Programm vor nicht JavaScript-fähigen Browsern zu verstecken, noch schöner wäre es aber, wenn wir dem Benutzer noch eine Information darüber mitgeben könnten. Auch das ist möglich, und zwar mit dem Element noscript 4. Der Inhalt wird nur dann angezeigt, wenn JavaScript ausgeschaltet oder nicht vorhanden ist. Probieren Sie es mit der auf der beiliegenden CD enthaltenen HTML-Datei aus.
<html>
<head><title>JavaScript-Hello-World</title>
<script language="JavaScript" type="text/javascript">
<!-- Inhalt vor alten Browsern verstecken
function begruessung()
{
alert("Willkommen bei JavaScript!");
}
// Ende: Inhalt verstecken -->
</script>
</head>
<body onLoad="begruessung()">
<h1>Das erste JavaScript-Beispiel</h1>
<noscript>
Ich hätte Sie gerne mit JavaScript begrüßt,
aber Ihr Browser kann JavaScript-Programme nicht
ausführen. :-(
</noscript>
</body>
</html>
Listing 1.3: Das Hello-World-Beispiel mit alternativem Text für JavaScript-unfähige Browser - beispiel0103.html -
Wie bei HTML, so gibt es mittlerweile auch von JavaScript mehrere Versionen. Da es natürlich Unterschiede zwischen den Versionen gibt, muss der Browser irgendwie erkennen können, um welche Version es sich handelt. Die bisher gezeigten Beispiele beziehen sich alle auf Version 1.0. Soll eine andere Version eingesetzt werden, so sollte dies mit dem Attribut language angezeigt werden. Folgende Beispiele zeigen, wie das geht 5.
<script language="JavaScript"> <!-- JavaScript 1.0 -->
<script language="JavaScript1.1"> <!-- JavaScript 1.1 -->
<script language="JavaScript1.2"> <!-- JavaScript 1.2 -->
Da es sich bei JavaScript, im Gegensatz zu HTML, um eine Programmiersprache handelt, ist ein Punkt wichtig: Was passiert bei Fehlern im Programm? Das genaue Verhalten hängt vom Web-Browser 6 ab, der das Programm ausführt. Normalerweise wird der Fehler angezeigt und die Programmverarbeitung wird beendet. Bei den neueren Versionen des Navigators erscheint jedoch nicht automatisch eine Fehlermeldung, um den arglosen Web-Surfer nicht gleich zu erschrecken. Stattdessen sieht man den Fehler nur noch in der JavaScript-Konsole, einem eigenen Fenster.
JavaScript-Konsole
Die JavaScript-Konsole (im Navigator) wird über die manuelle Eingabe des Pseudo-URLs javascript: aufgerufen. Der Navigator kann so konfiguriert werden, dass die JavaScript-Konsole im Fehlerfall automatisch angezeigt wird. Dazu schließen Sie zunächst alle Anwendungsfenster des Navigators. Danach fügen Sie in der Konfigurationsdatei pref.js folgende Zeile ein:
user_pref("javascript.console.open_on_error", true);
Diese Konfigurationsdatei finden Sie auf Windows-Systemen in der Regel unter
C:\Programme\Netscape\Users\<Ihr Name>\pref.js
und unter UNIX-Systemen in Ihrem Home-Verzeichnis unter
~/.netscape/preferences.js
Um die Änderungen bei Bedarf wieder rückgängig zu machen, löschen Sie einfach die zuvor eingefügte Zeile wieder. Für die Entwicklung eigener JavaScript-Programme bietet es sich jedoch an, die automatische Fehleranzeige eingeschaltet zu lassen.
Beim Internet Explorer 5 werden Fehler in jeweils einem eigenen Fenster angezeigt. Die Anzeige kann wahlweise ein- oder ausgeschaltet werden.
leicht
An welchen Stellen dürfen in einem HTML-Dokument JavaScript-Anweisungen stehen?
leicht
Wie heißt das Attribut des script-Elements, mit dem externe JavaScript-Dateien eingeladen werden?
leicht
Über welches Attribut des script-Elements wird die JavaScript-Version angegeben?
Wie beurteilen Sie die Zuverlässigkeit der Versionsangabe?
leicht
Warum sollte der Inhalt des script-Elements in HTML-Kommentare gefasst werden?
leicht
Wie lassen sich Texte in einem JavaScript-Programm auskommentieren?
leicht
Wie schreibt man die HTML-Kommentare im script-Element?
leicht
In welches Element schreibt man alternativen Text, der angezeigt werden soll, falls der Browser nicht JavaScript-fähig ist?
JavaScript-Anweisungen dürfen im Element script stehen, in externen Dateien (gelegentlich JavaScript-Bibliotheken genannt) sowie in besonderen Attributen von HTML-Elementen.
Das Attribut des script-Elements, mit dem externe JavaScript-Dateien eingeladen werden können, heißt src. Beispiel:
<script language="JavaScript"
type="text/javascript"
src="meine-datei.js">
</script>
Die JavaScript-Version wird über das Attribut language des script-Elements angegeben. Beispiel:
<script language="JavaScript"> <!-- JavaScript 1.0 -->
<script language="JavaScript1.1"> <!-- JavaScript 1.1 -->
<script language="JavaScript1.2"> <!-- JavaScript 1.2 -->
Auf Grund zahlreicher praktischer Probleme sollte man sich nicht darauf verlassen, dass einzig durch die Angabe der Versionsnummer ein einwandfreier Programmablauf gewährleistet ist. Einige Browser(versionen) behaupten, eine gewisse JavaScript-Version zu beherrschen, tun es aber letzlich doch nicht.
Der Inhalt des script-Elements sollte immer in HTML-Kommentare gefasst werden, weil Browser, die JavaScript nicht beherrschen und das script-Element nicht kennen, dessen Inhalt anzeigen könnten. In diesem Fall würde der Leser also die Programmzeilen Ihres JavaScript-Programms zu sehen bekommen.
Innerhalb eines JavaScript-Programms lassen sich Texte auf zweierlei Weise auskommentieren:
Beispiel:
document.write('Hallo Welt!'); // dies ist ein Kommentar :-)
/* Dies ist ein Kommentar,
der sich über
mehrere Zeilen erstreckt... */
Die HTML-Kommentare im script-Element zum Ausblenden des Inhaltes schreibt man wie folgt.
<script language="JavaScript" type="text/javascript"> <!-- Anfang: Inhalt verstecken
Hier steht das JavaScript-Programm
// Ende: Inhalt verstecken --> </script>
Der Anfang des HTML-Kommentares ist <!-- und das Ende ist -->. Dies ist die bei HTML übliche Vorgehensweise. Das Besondere ist in diesem Fall noch, dass das Ende noch durch einen JavaScript-Kommentar // geschützt werden muss, weil die Zeichen --> andernfalls als Teil des Programms angesehen werden. Verwenden Sie am besten immer die oben gezeigte Form.
Alternativen Text, der angezeigt werden soll, falls der Browser nicht JavaScript-fähig ist, schreibt man in das Element <noscript>...</noscript>.
1 Dies gilt umso mehr, als dass momentan (Mitte 2000) und auf absehbare Zeit XML-Dokumente im Browser (auch) in HTML gewandelt werden. Eine Kombination von XML mit einer Scriptingsprache wie JavaScript ist noch nicht implementiert. [zurück]
2 Von Tipp- und weiteren Fehlern abgesehen. [zurück]
3 Beim Navigator kann an Stelle von "JavaScript" auch heute noch "LiveScript" stehen. Von der Verwendung ist jedoch abzuraten. [zurück]
4 noscript gibt es erst ab Navigator 3. Das heißt, dass die frühen Navigatoren und Explorer den Inhalt doch anzeigen. Da diese Versionen aber hoffentlich nicht mehr so verbreitet sind, sollte das kein Problem darstellen. [zurück]
5 Leider muss auch hier gesagt werden, dass die Praxisrelevanz fraglich ist. In der Praxis ist es in der Regel angeraten, ein gewünschtes Feature ganz direkt abzufragen, um sicherzugehen, dass es vorhanden ist. Wie das geht, zeigen spätere Kapitel. Wer sich auf die Versionsnummern verlässt, ist oft verlassen. [zurück]
6 Oder allgemeiner: es hängt vom Interpreter ab. [zurück]
Optimiert für HTML- & CSS-Browser.
Bestes Ergebnis mit Mozilla und Opera.JavaScript basiert auf W3C-DOM.
Wir unterstützen Standards!
Copyright 2000-2004 Christine Kühnel & Stefan Mintert. Alle Rechte vorbehalten. Online-Fassung: Christine Kühnel http://screenexa.net/
