Grundlagen

Wenn Baumeister Gebäude bauten, so wie Programmierer Programme machen, dann würde der erste Specht, der vorbeikommt, die Zivilisation zerstören.
– Murphy’s Law

JavaScript ist die erste wirkliche Programmiersprache, die Sie in diesem Buch kennen lernen werden. Viel wichtiger ist aber: JavaScript ist eine clientseitige Scriptsprache, d. h. Scripts, die in JavaScript programmiert wurden, werden vom Browser des Benutzers interpretiert und ausgeführt.

Ende 1995 wurde JavaScript von Netscape mit dem Netscape Navigator 2.0 veröffentlicht, der JavaScript in der Version 1.0 in vollem Umfang unterstützt. Da Netscape JavaScript aber nicht zu einer beliebigen Sprache erklären wollte, bemühte man sich frühzeitig, JavaScript durch die ECMA (European Computer Manufacturers Association) zu standardisieren. In der Spezifikation »ECMA-262« wurde JavaScript dann als ECMAScript zum Industriestandard erklärt.

plattformunabhängig

Das Besondere an JavaScript war – und ist es immer noch – die Plattformunabhängigkeit. Unter jeder Betriebssystemumgebung kann ein JavaScript ausgeführt werden, solange ein Browser installiert ist, der ein solches Script interpretieren kann. Jedoch ist dies auch ein Nachteil, denn ein JavaScript ist immer an einen Browser gebunden und kann ohne einen solchen nicht ausgeführt werden. Daher ist JavaScript auf den Einsatz für das Internet beschränkt.

Seit 1995 wurde JavaScript, das ursprünglich LiveScript heißen sollte, beständig weiterentwickelt, was zur heutigen Version 1.5 führte. Dementsprechend ist auch die Unterstützung der einzelnen Versionen von Browser zu Browser unterschiedlich. In der Tabelle 21.1 finden Sie eine kleine Übersicht, welcher Browser seit welcher Version JavaScript unterstützt.

Browser	JS 1.0	JS 1.1	JS 1.2	JS 1.3	JS 1.4	JS 1.5
NN 2.x	X
NN 3.x	X	X
NC 4.x	X	X	X
NC 4.06, 4.5	X	X	X	X
NC 6.x	X	X	X	X	X	X
OP 3.x	X	X
OP 4.x
OP 5.x	X	X	X	X
IE 2.x
IE 3.x	X
IE 4.x	X	X	X
IE 5.x	X	X	X	X	X
IE 6.x	X	X	X	X	X	X

Tabelle 1.1: Unterstützung von JavaScript durch die verschiedenen Browser

• NN – Netscape Navigator
• NC – Netscape Communicator
• OP – Opera
• IE – Internet Explorer
• JS – JavaScript

Unter der Internetadresse http://www.webreview.com/browsers/browsers.shtml finden Sie eine erweiterte Übersicht, auch mit Bezug auf die unterschiedlichen Betriebssysteme und die darunter verwendeten Browser.

Java und JavaScript

An dieser Stelle soll festgehalten werden, dass Java und JavaScript sich gar nicht so ähnlich sind, wie viele behaupten oder man es annehmen könnte. Sie haben zwar einen ähnlich klingenden Namen, es gibt aber viele und teilweise gravierende Unterschiede.

• Java ist eine vollkommen eigenständige Programmiersprache. Um ein Programm ausführen zu können, das in Java geschrieben wurde, muss dieses erst in einen Bytecode umgewandelt werden (diesen Vorgang nennt man auch Kompilieren). JavaScripts hingegen werden im Klartext vom Browser interpretiert und dann ausgeführt.
• JavaScripts laufen nur in einem Browser, nicht unter einer normalen Betriebssystemumgebung. Java-Programme benötigen auf der Plattform mindestens die JRE (Java Runtime Environment), da der Bytecode in einen für das Betriebssystem verständlichen nativen Code umgewandelt werden muss.
• JavaScript ist sehr viel kompakter und einfacher als Java. Es gibt keine Klassen, zum Programmieren werden keine zusätzlichen Programme benötigt, und Variablen definieren sich durch ihren Wert. Java hingegen ist weitaus mächtiger und besitzt auch die Möglichkeit, auf den Rechner des Benutzers zuzugreifen.
• JavaScript basiert auf dem ECMA-Standard (ähnlich wie ActionScript von Macromedia Flash). Java ist eine eigenständige Programmiersprache.

NodeJS

Damals war nicht absehbar, dass Javascript mal den Sprung aus dem Webbrowser heraus schaffen würde. Mit NodeJS (opens new window) und Deno (opens new window) stehen mittlerweile zwei Laufzeitumgebungen zur Verfügung, die aber eben jenes ermöglichen. Die zweite Aussage zu Javascript ist also mittlerweile obsolet.

Es gibt noch weitaus mehr Unterschiede, und sie ließen sich auch sehr detailliert und akribisch aufzeigen, aber die eben genannten Beispiele sollten ja nur eines klarmachen: JavaScript ist nicht Java.

JavaScript in HTML

Wie bereits erwähnt wurde, wird ein JavaScript direkt in den HTML-Quelltext geschrieben. Dies ermöglicht Einsteigern in diese Sprache, sich ein paar Kniffe von versierteren Programmierern abzuschauen (sehen Sie sich ruhig einmal die Quelltexte von Webseiten an, auf denen JavaScript eingesetzt wird). Um ein JavaScript im HTML-Quelltext notieren zu können, benötigen Sie ein neues HTML-Element: script.

Das script-Element

Dieses Element dürfen Sie sowohl im Gültigkeitsbereich des head- als auch des body-Elements notieren. Ich werde Ihnen erst einmal die zweite Variante zeigen. Ähnlich wie bei CSS steht das eigentliche JavaScript zwischen dem script-Tag-Paar:

<script>  
  // JavaScript  
</script>

Da es jedoch Browser gibt, die neben JavaScript auch andere Scriptsprachen (z. B. JScript oder VBScript, beide von Microsoft) unterstützen, müssen Sie mit dem type-Attribut noch die Sprache angeben, in der das Script geschrieben wurde:

<script type="text/javascript">  
  // JavaScript  
</script>

Browser, die kein JavaScript können

Zum Schluss sollten Sie auf die Browser achten, die kein JavaScript beherrschen. Diese würden im Normalfall den Code, der im Gültigkeitsbereich des script-Elements notiert wurde, einfach im Browser ausgeben. Der Browser kennt das Element nicht, nimmt an, dass die Tags des Elements einen Text auszeichnen sollen, und gibt den Text prompt aus. Um dies zu verhindern, müssen Sie den Code auskommentieren; ähnlich wie bei CSS:

<script type="text/javascript">  
  <!--  
    // JavaScript  
  //-->  
</script>

Kommentieren in JavaScript

Zu Beginn dieses Buchs haben Sie in HTML gelernt, wie ein Text auskommentiert wird, und zwar mit den Zeichenfolgen <!-- und //-->. Dies war an dieser Stelle nicht ganz korrekt. Denn diese Art zu kommentieren ist eigentlich JavaScript-Syntax. Normalerweise würden auch die Angaben <!-- und --> ausreichen. Dies würde im Zusammenhang mit JavaScript aber einen Fehler bei den Browsern verursachen, die JavaScript interpretieren. Sie würden die Zeichenfolge --> nämlich fälschlicherweise als JavaScript-Code interpretieren, versuchen, den Code auszuführen, und dann aufgrund einer Fehlermeldung des Compilers scheitern. Deshalb muss die Zeichenfolge --> mit JavaScript-Syntax auskommentiert werden, und die lautet nun einmal //. Alles, was nach den beiden Schrägstrichen bis zum Zeilenende folgt, wird vom Browser in Bezug auf JavaScripts ignoriert.

Das erste JavaScript

Der folgende HTML-Quellcode enthält das erste JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Das erste Javascript //-->
<html>
  <head>
    <title>Listing 1.1</title>
  </head>
  <body>
    <script type="text/javascript">
      <!--
        document.write("<h1>Hallo WorldWideWeb!</h1>");
      //-->
    </script>
  </body>
</html>

Listing 1.1: Das erste JavaScript

Legen Sie in Ihrem Editor eine neue Datei an, und übertragen Sie das Listing 1.1. Speichern Sie die Datei als list1.1.htm ab, und öffnen Sie diese in Ihrem Browser. Das Ergebnis sollte wie folgt aussehen:

Abbildung 1.1: Darstellung des Listing 1.1 im Internet Explorer 6.0

Die Anweisung document.write in Listing 1.1 weist den Browser (bzw. den JavaScript-Compiler) an, den nachfolgenden Text, der in den runden Klammern und den doppelten Anführungszeichen steht, 1 zu 1 in das HTML-Dokument zu schreiben. In diesem Fall ist das ein Element h1, das den Text »Hallo WorldWideWeb!« auszeichnet. Herzlichen Glückwunsch, dies ist Ihr erstes JavaScript! Warum gerade die Anweisung document.write einen Text im Browser bzw. HTML-Dokument ausgibt, werden Sie an späterer Stelle noch genauer erfahren. Fürs Erste soll es reichen, dass document ins Deutsche übersetzt »Dokument« und write »schreiben« heißt.

Anführungszeichen

Warum aber steht <h1>Hallo WorldWideWeb!</h1> in Anführungszeichen? Sowohl in JavaScript als auch in allen anderen Programmiersprachen werden Zeichenketten (auch Strings genannt) von Anführungszeichen eingeschlossen, um sie als zusammenhängend zu markieren. In JavaScript ist es dabei egal, ob Sie einfache oder doppelte Anführungszeichen verwenden. Es ist also möglich, sowohl

document.write('<h1>Hallo WorldWideWeb!</h1>');

als auch

document.write("<h1>Hallo WorldWideWeb!</h1>");

zu schreiben. Nur die Kombination von beiden Arten von Anführungszeichen ist nicht erlaubt. Sie dürfen eine Zeichenkette also nicht mit einem doppelten Anführungszeichen einleiten und mit einem einfachen beenden und umgekehrt. Die beiden folgenden Angaben sind demnach falsch:

document.write("<h1>Hallo WorldWideWeb!</h1>');  
document.write('<h1>Hallo WorldWideWeb!</h1>");

Warum Sie beide Typen von Anführungsstrichen verwenden dürfen, können Sie anhand des folgenden Beispiels verstehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Anführungszeichen //-->
<html>
  <head>
    <title>Listing 1.2</title>
  </head>
  <body>
    <script type="text/javascript">
      <!--
        document.write("Wie geht's Dir denn heute?<br>");
        document.write('Hallo "WWW".');
      //-->
    </script>
  </body>
</html>

Listing 1.2: Die unterschiedlichen Formen von Anführungszeichen und ihr Zweck

Abbildung 1.2: Darstellung des Listing 1.2 im Internet Explorer 6.0

Der Grund: Wenn Sie nämlich ein einfaches oder doppeltes Anführungszeichen für die Ausgabe im Browser verwenden möchten, müssen Sie das jeweils andere verwenden, um die Zeichenkette zu begrenzen. Eine andere Möglichkeit wäre, die Anführungsstriche zu entwerten, und zwar mit dem rückwärts geneigten Schrägstrich (engl. backslash).

document.write('Wie geht\'s Dir denn heute?');

Ausgabe:

Wie geht’s Dir denn heute?

document.write("Hallo \"WWW\".");

Ausgabe:

Hallo "WWW".

Durch den Backslash wird das nachfolgende Zeichen vom Browser bzw. Compiler als ein normales Zeichen in der Zeichenkette interpretiert und somit entwertet.

Das Semikolon am Ende der Anweisung weist den Browser darauf hin, dass die Anweisung nun beendet ist. Dieses Zeichen ist optional. Sie müssen es nicht – sollten es aber – nach jeder Anweisung notieren, da es die Lesbarkeit des Quellcodes erhöht.

JavaScript in Dateien

Anstatt den JavaScript-Quellcode direkt in ein HTML-Dokument zu schreiben, können Sie den Code auch in eine externe Datei auslagern. Gerade bei längeren Codes oder bei Code, den Sie wiederverwenden möchten, macht dies Sinn.

Für Dateien, die JavaScript-Quelltexte enthalten, wird in der Regel die Dateiendung .js verwendet. Dies ist zwar nirgends so festgelegt, wird aber von eigentlich allen so praktiziert.

Erstellen Sie mit Ihrem Editor ein neues Dokument, notieren Sie darin

document.write("Hallo WorldWideWeb");

und speichern Sie die Datei unter hallowww.js ab. Den Code aus Listing 1.3 kopieren Sie ebenfalls in eine neue Textdatei und speichern diese unter dem Namen list1.3.htm ab. Öffnen Sie list1.3.htm nun in Ihrem Browser.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- JavaScript in Dateien //-->
<html>
  <head>
    <title>Listing 1.3</title>
  </head>
  <body>
    <script src="hallowww.js" type="text/javascript">
    </script>
  </body>
</html>

Listing 1.3: Kopieren Sie diesen Quellcode in eine neue Datei mit dem Namen list1.3.htm

Eine JavaScript-Datei wird also mit dem Attribut src im script-Element in ein HTML-Dokument implementiert. Dabei gelten die gleichen Regeln wie beim Referenzieren von Grafiken hinsichtlich der Verzeichnisstruktur. Sie dürfen also absolute oder relative Pfadangaben machen.

In einer .js-Datei dürfen Sie lediglich den reinen JavaScript-Code notieren. Natürlich sind auch JavaScript-Kommentare erlaubt. HTML-Elemente wie script oder HTML-Kommentare dürfen darin jedoch nicht vorkommen.

Kommentare

Wie Sie bereits wissen, können Sie in JavaScript-Code mit der Zeichenfolge // einen Kommentar bis zum Zeilenende einfügen. Diese Art zu kommentieren nennt man auch einzeiligen Kommentar. Er darf sogar mit einer Anweisung zusammen in einer Zeile stehen.

document.write("Hallo WorldWideWeb");  // Kommentar

Dieser JavaScript-Code würde im Browser »Hallo WorldWideWeb« ausgeben, wohingegen

// document.write("Hallo WorldWideWeb");

keine Ausgabe erzeugt, da alles, was nach den beiden // bis zum Zeilenende folgt, als Kommentar verstanden wird.

Mehrzeilige Kommentare

Sie können aber auch mehrzeilige Kommentare verwenden. Diese werden über die Zeichenfolge /* eingeleitet und mit */ abgeschlossen.

document.write("Hallo Leute!");  
/* Dies ist ein mehrzeiliger  
   Kommentar, der vom Browser  
   ignoriert wird.  
document.write("Wie geht es Euch?"); */

Im Browser würde nur der Text »Hallo Leute!« erscheinen, da die zweite document.write-Anweisung noch innerhalb des mehrzeiligen Kommentar-Blocks steht.

Zusammenfassung

• JavaScript ist eine clientseitige Scriptsprache.
• JavaScript ist nicht gleich Java, auch wenn die Namensgebung dies nahe legt.
• Mit JavaScripts können Sie Ausgaben im HTML-Dokument erzeugen.
• JavaScript-Code darf im HTML-Dokument notiert, aber auch in externen Dateien gespeichert werden.
• Es gibt zwei Arten in JavaScript zu kommentieren: einzeilig oder mehrzeilig.

Fragen und Übungen

1. Mit welchem Element wird in einem HTML-Dokument ein JavaScript definiert?
2. Was bewirkt die Anweisung document.write("Hallo")?
3. Worin bestehen die Unterschiede zwischen den beiden Arten der Kommentierung?
4. Welches Attribut wird benötigt, um ein externes JavaScript zu referenzieren?
5. Welches Zeichen muss nach einer fertigen Anweisung folgen?
6. Was ist an der Anweisung document.write("Hallo "WorldWideWeb".") falsch, und welche Möglichkeiten bestehen, diesen Fehler zu korrigieren?