JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch

: JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Galileo Computing
ISBN 3-89842-859-1

Kapitel 3 JavaScript einbauen
	3.1 Verwendung von <script>
		3.1.1 Das language-Attribut
		3.1.2 Browser ohne JavaScript
		3.1.3 Externe Dateien
	3.2 JavaScript-Links
	3.3 Event-Handler
	3.4 JavaScript-Entities

Take three months to prepare your machines and three months to complete your siege engineering. – Sun Tzu, The Art Of War

Kapitel 3 JavaScript einbauen

Aller Anfang ist schwer – bei JavaScript allerdings ist er recht einfach. Dieses Kapitel zeigt Ihnen einige Grundlagen von JavaScript; am Wichtigsten ist natürlich, wie Sie überhaupt JavaScript-Code in Ihre Seiten einbauen können. Eine komplette Spracheinführung folgt dann im nächsten Kapitel.

3.1 Verwendung von <script>

Nun kommen wir endlich zur Erstellung von JavaScript. Wie ich bereits erwähnt habe, wird JavaScript in HTML integriert; Sie arbeiten also hauptsächlich mit HTML-Dateien, die Sie in einem einfachen Texteditor erstellen können.

JavaScript-Kommandos können an mehreren Stellen einer HTML-Datei untergebracht werden:

zwischen den Tags <script> und </script>

in einer externen Datei

in Form eines HTML-Links

als Parameter von HTML-Tags

In den folgenden Abschnitten werden die einzelnen Möglichkeiten der Reihe nach vorgestellt und erläutert.

Als Beispiel hierzu dient die Anweisung document.write("The weather means the seasons"), die den Text "The weather means the seasons" ausgibt. Warum dieser Befehl so funktioniert, erfahren Sie in den nächsten Kapiteln; fürs Erste müssen Sie mir einfach vertrauen.

Die naheliegendste Methode, JavaScript-Befehle auszuführen, besteht darin, das¹ <script>-Tag zu verwenden. Folgender Code sorgt dafür, dass »The weather means the seasons« ausgegeben wird:

<script>
document.write("The weather means the seasons");
</script>

Befehle werden in JavaScript untereinander – einer pro Zeile – dargestellt. Wenn Sie mehrere Kommandos in einer Zeile unterbringen wollen, müssen Sie die Anweisungen durch ein Semikolon voneinander trennen. Im Gegensatz zu anderen Programmiersprachen (beispielsweise Java) muss aber keineswegs jedes Kommando mit einem Strichpunkt enden. In der ersten Version der JavaScript-Sprachspezifikation war das Semikolon am Ende jeder Anweisung strikt vorgeschrieben. Inzwischen wurde aber davon Abstand genommen, und jeder JavaScript-Programmierer hat seinen eigenen Stil. Prinzipiell haben die Strichpunkte den Sinn, dem JavaScript-Interpreter (also dem Bestandteil des Browsers, der den JavaScript-Code ausführt) mitzuteilen, an welcher Stelle eine Anweisung endet. Es gibt auch Programmiersprachen, bei denen das Zeilenende das Ende einer Anweisung markiert. In JavaScript ist beides möglich. Um den Code sauber zu halten und um bei Programmierfehlern schneller die Fehlerquelle zu finden, verzichte ich nicht auf optionale Strichpunkte. Es ist Ihnen aber natürlich freigestellt, sich einen anderen Stil anzueignen – insbesondere, wenn Sie bereits Erfahrungen in einer Programmiersprache gesammelt haben, in der keine Strichpunkte vorkommen (z. B. Visual Basic/VBScript).

Die beiden folgenden Anweisungen sind also äquivalent. Einmal stehen die beiden Befehle in verschiedenen Zeilen, einmal in einer Zeile.

<script>
document.write("The weather ");
document.write("means the seasons");
</script>

und

<script>
document.write("The weather "); document.write("means the seasons");
</script>

JavaScript-Code wird hierbei vom JavaScript-Interpreter des verwendeten Browsers ausgeführt. Betrachten Sie zum Beispiel folgendes HTML-Dokument:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script>
document.write("The weather means the seasons");
</script>
</body>
</html>

Wenn es vom Browser interpretiert worden ist und dieser Browser JavaScript unterstützt, verhält es sich so wie folgendes HTML-Dokument:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
The weather means the seasons
</body>
</html>

Nehmen Sie es mir bitte nicht übel, wenn die ersten Beispiele in diesem Kapitel nicht unbedingt die breite Funktionspalette von JavaScript demonstrieren.

Wenn Sie dieses oder eines der anderen Beispiele im Buch im Microsoft Internet Explorer 6 unter Windows XP aufrufen (mit allen aktuellen Patches), erhalten Sie die in Abbildung 3.1 gezeigte Fehlermeldung. Sie müssen ein paar Mal klicken, bis der Code ausgeführt wird. Hierfür gibt es zwei Gegenmittel:

Installieren Sie einen lokalen Webserver, und rufen Sie die Beispiele über den Webserver auf.

Aktivieren Sie die Checkbox unter Extras N Internetoptionen Erweitert N Sicherheit N Ausführung aktiver Inhalte in Dateien auf dem lokalen Computer zulassen.

Hier klicken, um das Bild zu Vergrößern

Abbildung 3.1 Der Internet Explorer 6 warnt vor lokalem JavaScript-Code.

3.1.1 Das language-Attribut

Das obige Beispiel ist streng genommen etwas unsauber. Das <script>-Tag eignet sich auch für andere Programmiersprachen, die in HTML-Dokumente eingebettet werden können, beispielsweise für Visual Basic Script (VBScript) oder JScript (keine Sorge, Sie haben nicht aufs falsche Pferd gesetzt: Diese beiden Sprachen funktionieren nur im Internet Explorer). Dazu diente früher das Attribut language des <script>-Tags. Ist es nicht gesetzt – wie im obigen Beispiel –, so wird angenommen, dass die zwischen den Tags stehenden Kommandos in JavaScript verfasst wurden (deswegen funktioniert obiges Beispiel auch). Aber um auf Nummer sicher zu gehen – es könnte ja sein, dass eine neue Version des Microsoft Internet Explorers als Standardsprache VBScript annimmt –, könnte man Folgendes schreiben:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript">
document.write("The weather means the seasons");
</script>
</body>
</html>

XHTML schreibt vor, dass das type-Attribut gesetzt werden muss, in unserem Fall auf "text/javascript". Deswegen verwenden die Listings in den Folgekapiteln in den allermeisten Fällen das type-Attribut, denn nur ältere Browser werten nur das language-Attribut aus.

Wie Sie in Kapitel 1 erfahren haben, gibt es mehrere Versionen von JavaScript. Sie können im language-Attribut auch explizit eine der Versionen angeben. Der folgende Code wird nur von Browsern ausgeführt, die JavaScript Version 1.1 unterstützen (historische Randnotiz: das sind insbesondere der Netscape Navigator ab Version 3 und der Microsoft Internet Explorer ab Version 4):

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript1.1">
document.write("The weather means the seasons");
</script>
</body>
</html>

Noch ältere Browser, beispielsweise der Internet Explorer 3, ignorieren den JavaScript-Befehl und geben nichts aus.

Zur Zeit der Drucklegung (September 2006) sind die in der folgenden Tabelle aufgeführten Parameter gültig.

**Tabelle 3.1** Die Parameter für <script language="…">
Parameter	Bedeutung
JavaScript	Jeder Browser, der JavaScript unterstützt
JavaScript1.1	Alle Browser, die mindestens die JavaScript-Version 1.1 unterstützen (ab NN3, IE4)
JavaScript1.2	Alle Browser, die mindestens die JavaScript-Version 1.2 unterstützen (ab NN4, IE5)
JavaScript1.3	Alle Browser, die mindestens die JavaScript-Version 1.3 unterstützen (ab Netscape Navigator 4.06, IE5)
JavaScript1.4	Ab Netscape 6/Mozilla
JavaScript1.5	Ab Netscape 6/Mozilla
JavaScript1.6	Ab Firefox 1.5
JavaSrcipt1.7	Ab Firefox 2.0

Mit der folgenden HTML-Seite können Sie überprüfen, welche JavaScript-Versionen der jeweilige Browser unterstützt:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript">
document.write("Der Browser unterstützt JavaScript
<hr />");
</script>
<script language="JavaScript1.1">
document.write("Der Browser unterstützt JavaScript v1.1<hr />");
</script>
<script language="JavaScript1.2">
document.write("Der Browser unterstützt JavaScript v1.2<hr />");
</script>
<script language="JavaScript1.3">
document.write("Der Browser unterstützt JavaScript v1.3<hr />");
</script>
<script language="JavaScript1.4">
document.write("Der Browser unterstützt JavaScript v1.4<hr />");
</script>
<script language="JavaScript1.5">
document.write("Der Browser unterstützt JavaScript v1.5<hr />");
</script>
</body>
</html>

In Abbildung 2.1 sehen Sie beispielsweise, was der Internet Explorer 6 ausgibt.

Hier klicken, um das Bild zu Vergrößern

Abbildung 3.2 Die vom Internet Explorer 6 unterstützten JavaScript-Versionen

Beachten Sie bei obigem Beispiel, dass man mit document.write() insbesondere auch HTML-Code, in diesem Fall das <hr>-Tag für eine horizontale Linie, ausgeben kann.

Der folgenden Tabelle entnehmen Sie, welche Parameter ausgewählte Browserversionen erkennen bzw. unterstützen:

**Tabelle 3.2** Die von ausgewählten Browsern unterstützten Parameter <script language="...">
Browser	Unterstützte Parameter
Netscape 4.00 – 4.05	JavaScript1.0 bis JavaScript1.2
Netscape 4.06 – 4.8	JavaScript1.0 bis JavaScript1.3
Netscape 6/7/8, Mozilla, Firefox	JavaScript1.0 bis JavaScript1.5
Internet Explorer 4	JavaScript1.0 bis JavaScript1.2
Internet Explorer 5/5.5/6/7	JavaScript1.0 bis JavaScript1.3
Opera 5.x/6/7/8/9	JavaScript1.0 bis JavaScript1.4
Konqueror/Safari	JavaScript1.0 bis JavaScript1.4

Durch die Verwendung spezieller language-Attribute können Sie Fehlermeldungen vermeiden, die bei der Verwendung von zu modernen JavaScript-Kommandos erscheinen würden. Wenn Sie also Sprachelemente von JavaScript verwenden, die erst ab Version 1.1 unterstützt werden, sollten Sie das language-Attribut auf "JavaScript1.1" setzen; ältere Browser ignorieren dann die Befehle völlig.

Das stimmt leider nicht immer. Besonders »schlimm« ist in diesem Zusammenhang jedoch Konqueror und damit auch Safari. Es scheint zu genügen, dass der Wert des language-Attributs mit "JavaScript" beginnt. Fügt man beispielsweise in obiges Listing noch einen Block mit <script language="JavaScript1.6"> ein, würde auch dieser ausgeführt werden, obwohl das nicht zutrifft (siehe Abbildung 3.3).

Hier klicken, um das Bild zu Vergrößern

Abbildung 3.3 Konqueror kennt (angeblich) schon JavaScript 1.6!

Aus diesem Grund prüft man heutzutage kaum mehr die exakte JavaScript-Version, die ein Browser unterstützt, sondern man prüft, welche JavaScript-Features ein Browser umsetzen kann. Zahlreiche Beispiele dazu finden Sie im weiteren Verlauf dieses Buches.

3.1.2 Browser ohne JavaScript

So schön ein Programm auch auf dem eigenen Rechner laufen mag – es kommt darauf an, dass es beim Kunden und bei allen Besuchern (nun gut, sagen wir, bei den meisten Besuchern) der Website läuft. In vielen Firmennetzwerken ist es beispielsweise so, dass JavaScript aus Sicherheitsgründen nicht aktiviert werden darf. Die Beispiele von oben sehen dann so aus wie in Abbildung 3.4.

Hier klicken, um das Bild zu Vergrößern

Abbildung 3.4 Die Ausgabe bei deaktiviertem JavaScript: Gähnende Leere

Bei ganz alten Browsern ist es noch schlimmer: Zuweilen sieht man sogar den JavaScript-Code. Sie können sich aber hier mit einem kleinen Trick behelfen: Mit <!-- wird ein HTML-Kommentar eingeleitet; alles dahinter wird vom HTML-Interpreter ignoriert, jedoch nicht vom JavaScript-Interpreter!

<script language="JavaScript"><!--

Nun stellt sich die Frage, wie der HTML-Kommentar beendet wird. Probieren Sie einmal die einfachste Variante aus, nämlich einfach ein Kommentar-Ende-Tag (-->) vor dem </script>:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript"><!--
document.write("The weather means the seasons");
--></script>
</body>
</html>

Wenn Sie diese Seite im Browser laden, erhalten Sie unter Umständen eine Fehlermeldung, vor allem in älteren Browsern. Der Grund: Der JavaScript-Interpreter interpretiert --> als JavaScript-Befehl und liefert eine Fehlermeldung.

Aber auch hier gibt es einen kleinen Trick, mit dem Sie dieses Hindernis aus dem Weg räumen können. Mit // leitet man einen Kommentar im JavaScript-Code ein. Die Verwendung von Kommentaren ist bei der Programmierung sehr wichtig, damit man auch Wochen später noch weiß, was man damals eigentlich beabsichtigt hat, und damit auch andere Menschen mit dem Code arbeiten können. Es gibt zwei Arten von Kommentaren:

//: Hiermit wird ein einzeiliger Kommentar eingeleitet; alles hinter den beiden Querstrichen in der jeweiligen Zeile wird vom JavaScript-Interpreter ignoriert.

/* und */: Hie rmit wird ein mehrzeiliger Kommentar eingeleitet; alles nach /* wird vom JavaScript-Interpreter ignoriert, bis die Zeichenfolge */ kommt und den Kommentar abschließt.

Im folgenden Listing sehen Sie Beispiele für Kommentare:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript">
// Hier wird auf generelle JavaScript-Unterstützung geprüft
document.write("Der Browser unterstützt
JavaScript<hr />");
</script>
<script language="JavaScript1.1">
/* Hier geht es um JavaScript 1.1 */
document.write("Der Browser unterstützt JavaScript v1.1<hr />");
</script>
<script language="JavaScript1.2">
// JavaScript 1.2 wird überprüft,
// und zwar gründlich
document.write("Der Browser unterstützt JavaScript v1.2<hr />");
</script>
<script language="JavaScript1.3">

/* JavaScript 1.3 wurde mit Navigator 4.06 eingeführt */
document.write("Der Browser unterstützt JavaScript v1.3<hr />");
</script>
<script language="JavaScript1.4">
document.write("Der Browser unterstützt JavaScript v1.4<hr />");
</script>
<script language="JavaScript1.5">
document.write("Der Browser unterstützt JavaScript v1.5<hr />");
</script>
</body>
</html>

Kommen wir zum ursprünglichen Problem zurück. Der Browser gibt eine Fehlermeldung aus, weil --> als JavaScript-Code interpretiert wird und nicht als HTML-Element. Wenn dem --> jedoch ein // vorangestellt wird, ignoriert der JavaScript-Interpreter diesen Code; der HTML-Interpreter jedoch stellt fest, dass der Kommentar zu Ende ist. Der folgende Code wird von Browsern, die JavaScript unterstützen, ausgeführt. Browser, die kein JavaScript unterstützen oder bei denen JavaScript deaktiviert ist, sehen einen HTML-Kommentar, ignorieren das Innere und geben folglich nichts aus, auch keinen puren JavaScript-Code.

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript"><!--
document.write("The weather means the seasons");
//--></script>
</body>
</html>

Bei modernen (nicht JavaScript-fähigen) Browsern ist es allerdings nicht mehr notwendig, den JavaScript-Code durch ein Kommentarzeichen zu verstecken.

Sie sehen an den obigen Beispielen, dass es relativ einfach ist, bei Browsern, die JavaScript unterstützen, einen Text auszugeben. Der andere Weg ist aber auch möglich. Es gibt hierfür ein besonderes HTML-Element, <noscript>, das so ähnlich wie <noframes> funktioniert. Damit sind folgende Szenarien denkbar:

Der Browser unterstützt kein JavaScript, egal, ob das <noscript>-Tag bekannt ist oder nicht. Es wird notfalls ignoriert, und die darauf folgenden HTML-Elemente werden interpretiert (bzw. der Inhalt wird angezeigt).

Der Browser unterstützt JavaScript, und es ist auch eingeschaltet. Dann wird alles, was zwischen <noscript> und </noscript> steht, nicht dargestellt.

Der Browser unterstützt JavaScript, es ist jedoch ausgeschaltet. Dann wird auch all das dargestellt, was zwischen <noscript> und </noscript> steht.

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript"><!--
document.write("The weather means the seasons");
//--></script>
<noscript>
Ihr Browser kann mit JavaScript nichts anfangen, oder es ist ausgeschaltet!
</noscript>
</body>
</html>

Denken Sie immer auch an diejenigen Besucher, die JavaScript deaktiviert haben oder deren Browser (man denke nur an die eingeschränkten Browser von Handhelds) kein JavaScript unterstützt. Erstellen Sie notfalls eine Version Ihrer Website, die auch ohne JavaScript funktioniert.

Abbildung 3.5 zeigt, dass das tatsächlich funktioniert: Sie sehen obiges Dokument im klassischen Text-Webbrowser Lynx.

Hier klicken, um das Bild zu Vergrößern

Abbildung 3.5 Kein JavaScript beim Text-Browser Lynx

3.1.3 Externe Dateien

Wenn Sie später einmal JavaScript-Programme schreiben, die auf mehre ren unterschiedlichen Seiten benötigt werden, wäre es eigentlich ziemlich töricht, dasselbe Skript in mehrere Seiten zu kopieren – der Aufwand bei Änderungen am Skript wäre beträchtlich, da mehrere Dateien geöffnet und geändert werden müssten.

Es gibt hier auf den ersten Blick einen Ausweg, der aber auf den zweiten Blick auch seine Nachteile hat. Zuerst zur grauen Theorie: Man kann beim <script>-Tag im Attribut src den Namen einer externen Datei mit JavaScript-Kommandos angeben. Als Dateiendung hat sich hierbei .js durchgesetzt. Es empfiehlt sich, für alle externen Dateien ein eigenes Verzeichnis anzulegen, damit diese alle gesammelt an einem zentralen Ort zu finden sind.

Angenommen, folgende Datei ist auf dem Webserver im virtuellen Verzeichnis js unter dem Namen weather.js gespeichert:

//erste externe JavaScript-Datei
document.write("The weather means the seasons");

Sie wird folgendermaßen in ein HTML-Dokument eingebunden, um dieselbe Wirkung zu erzielen wie das Dokument aus dem vorigen Beispiel:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript" src="/js/weather.js">
</script>
</body>
</html>

Natürlich kann auch hier das language-Attribut gesetzt werden (in den nächsten Kapiteln setzen wir aber aus den zuvor genannten Gründen auf type). Bei dem folgenden Dokument wird nur etwas ausgegeben, wenn der Browser JavaScript Version 1.1 unterstützt:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript1.1" src="/js/weather.js">
</script>
</body>
</html>

Dieses Vorgehen birgt aber auch einen kleinen Fallstrick: Probieren Sie doch einmal Folgendes in Ihrem Browser aus:

<html>
<body>
<script language="JavaScript" src="/js/weather.js"><!--
document.write("<br />Invincibility is in oneself,
vulnerability is in the opponent");
//--></script>
</body>
</html>

Hier klicken, um das Bild zu Vergrößern

Abbildung 3.6 Nur ein Zitat wird angezeigt.

Das Ergebnis sehen Sie in Abbildung 3.6: Der Inhalt des <script>-Elements wird ignoriert. Der Grund: Ist das src-Attribut des <script>-Tags gesetzt, wird eingeschlossener JavaScript-Code nicht betrachtet; ist src nicht gesetzt, so wird der eingeschlossene Code ausgeführt. Um also beide Sätze auszugeben, muss das HTML-Dokument folgendermaßen abgeändert werden:

<html>
<body>
<script language="JavaScript" src="/js/weather.js"></script>
<script language="JavaScript"><!--
document.write("<br />Invincibility is in oneself, vulnerability is in the opponent");
//--></script>
</body>
</html>

Obwohl externe Dateien sehr praktisch und auch recht weit verbreitet sind, haben sie einen Nachteil: Sie werden in der Regel erst dann geladen, wenn das komplette HTML-Dokument vorliegt. Es kann also unter Umständen ein wenig dauern, bis der Code vorliegt. Das kann bei komplexeren Beispielen durchaus zu Timing-Problemen führen. Sollten in diesem Buch externe Dateien verwendet werden, so dient das in der Regel der Übersichtlichkeit des Codes. Behalten Sie aber das potenzielle Timing-Problem im Hinterkopf.

<< zurück

<top>

vor >>