Hoch Inhalt dieses Kapitels:

Linkwerk
screeneXa

Erhältlich u.a. bei  Amazon.de

1

JavaScript und HTML

Von Stefan Mintert

1.1 Herkunft von JavaScript

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.

1.2 Grundlagen

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:

Beispiel

<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:

Beispiel

<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...">

Hinweis

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.

Beispiel

<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

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:

Tipp

<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.

Beispiel

<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:

Tipp

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.

1.3 Übungen

Uebung

leicht

1. Übung

An welchen Stellen dürfen in einem HTML-Dokument JavaScript-Anweisungen stehen?

Uebung

leicht

2. Übung

Wie heißt das Attribut des script-Elements, mit dem externe JavaScript-Dateien eingeladen werden?

  1. Das Attribut heißt import.
  2. Das Attribut heißt include.
  3. Das Attribut heißt src.
  4. Das Attribut heißt onLoad.

Uebung

leicht

3. Übung

Über welches Attribut des script-Elements wird die JavaScript-Version angegeben?

  1. Über das Attribut language.
  2. Über das Attribut lang.
  3. Über das Attribut version.
  4. Über das Attribut type.

Wie beurteilen Sie die Zuverlässigkeit der Versionsangabe?

Uebung

leicht

4. Übung

Warum sollte der Inhalt des script-Elements in HTML-Kommentare gefasst werden?

Uebung

leicht

5. Übung

Wie lassen sich Texte in einem JavaScript-Programm auskommentieren?

Uebung

leicht

6. Übung

Wie schreibt man die HTML-Kommentare im script-Element?

Uebung

leicht

7. Übung

In welches Element schreibt man alternativen Text, der angezeigt werden soll, falls der Browser nicht JavaScript-fähig ist?

1.4 Lösungen

Lösung zu 1

JavaScript-Anweisungen dürfen im Element script stehen, in externen Dateien (gelegentlich JavaScript-Bibliotheken genannt) sowie in besonderen Attributen von HTML-Elementen.

Lösung zu 2

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>

Lösung zu 3

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.

Lösung zu 4

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.

Lösung zu 5

Innerhalb eines JavaScript-Programms lassen sich Texte auf zweierlei Weise auskommentieren:

  1. Die Zeichen // kommentieren den nachfolgenden Text bis zum Ende der Zeile aus.
  2. Der zwischen /* und */ stehende Text wird auch auskommentiert.

Beispiel:

document.write('Hallo Welt!');   // dies ist ein Kommentar :-)

/* Dies ist ein Kommentar,
   der sich über
   mehrere Zeilen erstreckt... */

Lösung zu 6

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.

Lösung zu 7

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]

Linkwerk
screeneXa