JavaScript in HTML einbinden

Unsere bisherigen JavaScript-Beispiele funktionierten zwar alle in einem Browser, waren jedoch formal nicht korrekt. JavaScript muss in gültiges HTML eingebunden werden. Das möchte ich hier nachholen. Es gibt zwei Möglichkeiten, JavaScript in HTML einzubinden: direkt im HTML-Dokument oder als Referenz auf eine externe Datei. Beides funktioniert mit dem script-Element:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JavaScript direkt in HTML</title>
    <script>
      alert("Hallo JavaScript!");
    </script>
  </head>
  <body>
    Hallo HTML!
  </body>
</html>

Hier steht der JavaScript-Code direkt zwischen dem öffnenden und schließenden script-Tag.
Für die externe Referenz benötigen wir zwei Dateien: eine HTML-Datei und JavaScript-Datei. Die HTML-Datei kennen wir schon. Es ist einen Datei mit der Endung ‚html‘. Eine JavaScript trägt die Endung ‚js‘. Das folgende HTML schreiben wir wie gewohnt in die Datei index.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JavaScript direkt in HTML</title>
    <script src="index.js"></script>
  </head>
  <body>
    Hallo HTML!
  </body>
</html>

In index.js schreiben wir folgenden Code:

alert("Hallo JavaScript!");

Beide Dateien müssen im selben Ordner liegen. Mit dem src-Attribute des script-Elements wird die JavaScript-Datei referenziert. src steht dabei für source (engl. Quelle).
Von der Funktionalität her sind beide Arten JavaScript einzubinden identisch. Die externe Referenz ist jedoch deutlich übersichtlicher. Aus diesem Grund schreiben wir JavaScript immer in gesonderte Dateien und binden diese per Referenz in HTML-Dokumente ein.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.


 *