7.2 JavaScript in HTML einbinden

JavaScript-Sourcecode in HTML-Seiten wird vom JavaScript-Interpreter des Browsers ausgeführt. Wie in vielen Programmiersprachen sollte auch in JavaScript ein Befehl pro Zeile verwendet werden. Das Semikolon am Ende der Zeile ist optional, wird aber dringend empfohlen, um den Überblick zu behalten – insbesondere bei der Verwendung von Frameworks.

Möglichkeiten der Einbindung

JavaScript kann auf verschiedene Arten in HTML-Dokumente eingebunden werden:

  1. Zwischen <script>-Tags
  2. In einer externen Datei
  3. Über einen HTML-Link
  4. Durch HTML-Elemente und sogenannte Event-Handler

In den folgenden Beispielen wird der Befehl document.write("Wer reitet so spät durch Nacht und Wind") verwendet. Zunächst genügt es uns, zu wissen dass dieser Befehl nur den Text „Wer reitet so spät durch Nacht und Wind" ausgibt. Mehr über diese Funktion erfahren wir in den nächsten Kapiteln.


1. Einbindung mittels <script>-Element

Die einfachste Methode, um JavaScript einzufügen, ist, den Code zwischen <script>-Tags zu schreiben.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>JavaScript einbinden</title>
</head>
<body>
  <!-- Der Body ist hier leer, nur das Script ist vorhanden -->
  <script>
    document.write("Wer reitet so spät durch Nacht und Wind");
  </script>
</body>
</html>

Hinweis: Es ist üblich, JavaScript-Code vor dem schließenden </body>-Tag einzubinden, damit die Elemente geladen sind, auf die sich das Script bezieht.

So sieht es im Browser aus


2. Einbindung in einer externen Datei

JavaScript-Sourcecode, der auf mehreren Seiten benötigt wird, sollte in eine separate .js-Datei ausgelagert werden.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>JavaScript einbinden</title>
</head>
<body>
  <script src="JS-2-goethe.js"></script>
</body>
</html>

JS-Datei:

// Die JavaScript-Datei
document.write("Wer reitet so spät durch Nacht und Wind");

Die Darstellung im Browser sieht so aus, wie zuvor gezeigt.

Achtung: Das Einbinden einer Script-Datei kann im <head>-Element oder im <body>-Element erfolgen! Im oben gezeigten Fall schreiben wir mit document.write() den Text genau an die Position, an der wir den Text sehen wollen. Normalerweise haben wir umfangreiche JavaSript-Dateien, die im <head>-Element eingebunden werden.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>JavaScript einbinden</title>
  <script src="main.js"></script>
</head>
<body>
  ...
</body>
</html>

Durch das Einbinden der JavaScript-Datei in das <head>-Element können wir sicherstellen, dass die JavaScript-Datei geladen wird, bevor der <body>-Bereich auf dem Browser dargestellt wird.


Ein JavaScript-Befehl kann durch einen Klick auf einen Link ausgeführt werden.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>JavaScript einbinden</title>
</head>
<body>
  <a href="javascript:window.alert('Wer reitet so spät durch Nacht und Wind');">LinkText anzeigen</a>
</body>
</html>

So sieht es im Browser aus


4. Einbindung durch HTML-Tags (Event-Handler)

Ereignisse (z. B. Klicks, Maus auf ein Objekt, Tastendrücke etc.) können mit Event-Handlern in HTML-Elementen direkt verknüpft werden.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>JavaScript einbinden</title>
</head>
<body>
  <a href="#" onMouseOver="window.alert('Wer reitet so spät durch Nacht und Wind');">Linktext anzeigen</a>
</body>
</html>

So sieht es im Browser aus

Event-Handler für <a>-Elemente

Event-Handler Wirkung
onClick Wird ausgelöst, wenn der Link angeklickt wird.
onMouseOver Wird ausgelöst, wenn die Maus über den Link bewegt wird.
onMouseOut Wird ausgelöst, wenn die Maus den Link verlässt.
onFocus Wird ausgelöst, wenn der Link den Fokus erhält (z. B. durch Tabulator-Taste).
onBlur Wird ausgelöst, wenn der Link den Fokus verliert.
onDoubleClick Wird ausgelöst, wenn der Link doppelt angeklickt wird.
onKeyDown Wird ausgelöst, wenn eine Taste gedrückt wird, während der Link fokussiert ist.
onKeyUp Wird ausgelöst, wenn eine gedrückte Taste losgelassen wird, während der Link fokussiert ist.
onContextMenu Wird ausgelöst, wenn das Kontextmenü (z. B. durch Rechtsklick) auf dem Link geöffnet wird.

Fehler finden

Warum funktioniert der folgende Aufruf Fensters nicht? Was passiert stattdessen?

<a href="#" onClick="alert ("Der Erlkoenig")">Link</a>
Lösung

Die doppelten Anführungszeichen innerhalb der alert-Funktion stören den HTML-Interpreter. Der denkt, der Aufruf sei nach der ersten Klammer vorbei.

Korrektur:

<a href="#" onClick="alert('Der Erlkoenig')">Link</a>