JavaScript-Datei mit HTML-Datei verknüpfen

Um JavaScript mit HTML zu verknüpfen, fügen Sie der Seite ein <script>-Element hinzu. Mit dem Attribut src laden Sie eine separate .js-Datei; alternativ schreiben Sie ein kurzes Skript zwischen das öffnende und das schließende Tag. Bei den meisten Seitenskripten, die das DOM benötigen, ist ein externes Skript im <head> mit defer eine gute Wahl. Verwenden Sie async für unabhängige Skripte, bei denen die Ausführungsreihenfolge keine Rolle spielt.

Eine externe JavaScript-Datei mit src verknüpfen

Erstellen Sie eine JavaScript-Datei und binden Sie sie im HTML-Dokument ein. Wenn sich index.html und app.js beispielsweise im selben Verzeichnis befinden, lädt diese Seite app.js:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External script example</title>
  <script src="./app.js" defer></script>
</head>
<body>
  <h1 id="message">Waiting for JavaScript</h1>
</body>
</html>

Der Wert ./app.js ist ein URL-Pfad, der relativ zur URL des HTML-Dokuments aufgelöst wird – nicht relativ zum Speicherort der JavaScript-Datei auf Ihrem Computer oder zum Arbeitsverzeichnis des Servers. Liegt die Datei in einem Unterverzeichnis js neben der Seite, verwenden Sie ./js/app.js. Achten Sie auf Groß- und Kleinschreibung sowie die genaue Schreibweise: Ein Pfad, der auf einem Entwicklungsrechner ohne Beachtung der Groß- und Kleinschreibung funktioniert, kann auf einem Server mit Beachtung der Groß- und Kleinschreibung fehlschlagen. Ein führender Schrägstrich, etwa bei /js/app.js, beginnt stattdessen am URL-Stammverzeichnis der Website.

Mit dem Attribut defer lädt der Browser die Datei während des HTML-Parsens herunter und führt sie aus, sobald das Parsing abgeschlossen ist. Dadurch ist die Überschrift verfügbar, wenn das Skript danach sucht. Lassen Sie die referenzierte Datei separat, wenn mehrere Seiten sie gemeinsam verwenden oder Sie HTML und JavaScript unabhängig voneinander pflegen möchten.

Führen Sie dieses Beispiel aus:

console.log("JavaScript loaded");

Dieses kleine JavaScript-Beispiel veranschaulicht eigenständig zur Laufzeit, wie ein Skript eine Meldung in der Browserkonsole ausgibt. Im Seitenbeispiel kann app.js document.querySelector("#message") verwenden und, falls das Element vorhanden ist, dessen textContent auf "JavaScript is connected" setzen. Diese abgesicherte DOM-Aktualisierung ist eine Anpassung für die Seite und kein behauptetes Laufzeitergebnis.

JavaScript direkt in eine HTML-Seite einfügen

Für eine kurze Funktion, die nur auf einer Seite verwendet wird, können Sie JavaScript direkt in ein <script>-Element schreiben. Platzieren Sie das Element nach dem Markup, das es benötigt, häufig direkt vor </body>:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

<body>
  <h1 id="message">Waiting for JavaScript</h1>
  <script>
    const message = document.querySelector("#message");
    if (message) {
      message.textContent = "Inline JavaScript is connected";
    }
  </script>
</body>

Der Browser erreicht das Skript, nachdem er die Überschrift geparst hat, sodass die Suche das Element finden kann. Eingebetteter Code eignet sich für eine kleine, seitenspezifische Aktion; eine externe Datei lässt sich leichter wiederverwenden, zwischenspeichern und mit wachsendem Codebestand pflegen. Verwenden Sie document.write nicht für gewöhnliche Aktualisierungen der Seite: Nach dem Parsing kann die Methode das Dokument ersetzen. Ändern Sie ein Element stattdessen sicher mit DOM-Methoden wie textContent.

Festlegen, wann externe Skripte ausgeführt werden

Ein normales externes Skript im <head> hält das HTML-Parsing an, während es heruntergeladen und ausgeführt wird. Sucht es sofort nach einem Element im Body, wurde dieses Element noch nicht geparst. Ein Skript nahe dem Ende von <body> läuft, nachdem das vorhergehende Markup geparst wurde. Das kann für eine kleine Seite passen, doch der Browser hält das Parsing weiterhin an, während das Skript geladen und ausgeführt wird.

Für typische Dateien, die auf das DOM angewiesen sind, ist <script src="./app.js" defer></script> im <head> eine klare Standardeinstellung. Externe Skripte mit defer werden parallel zum Parsing heruntergeladen und danach in der Reihenfolge ausgeführt, in der sie im Dokument stehen. Wenn eine solche Datei von einer anderen abhängt, führen Sie die Abhängigkeit zuerst auf. defer gilt für externe Skripte; bei einem Inline-Skript verzögert das Attribut die Ausführung nicht.

Verwenden Sie <script src="./analytics.js" async></script>, wenn die Datei unabhängig ist, etwa für ein eigenständiges Analyseskript. Sie wird parallel heruntergeladen und ausgeführt, sobald sie bereit ist – möglicherweise noch vor Abschluss des Parsings. Für asynchrone Skripte ist die Reihenfolge nicht garantiert; außerdem können sie laufen, bevor Seitenelemente vorhanden sind. Verwenden Sie diese Methode daher nicht für Skripte, die voneinander oder vom geparsten DOM abhängen. async und defer sind beide für externe Skripte vorgesehen. Sind beide Attribute vorhanden, hat das asynchrone Verhalten in modernen Browsern Vorrang.

Skriptpfad und Seitenverhalten überprüfen

Wenn nichts passiert, prüfen Sie zuerst den genauen Wert von src und wo die HTML-Seite bereitgestellt wird. Öffnen Sie die Entwicklertools des Browsers und suchen Sie im Netzwerk-Tab nach der Skriptanfrage: Eine Antwort, dass die Ressource nicht gefunden wurde, deutet meist auf einen falschen Pfad, Dateinamen oder eine abweichende Groß- und Kleinschreibung hin. Im Konsolen-Tab werden JavaScript-Syntax- und Laufzeitfehler angezeigt. Laden Sie die Seite nach einer Korrektur neu, damit Sie die aktuelle Anfrage und die neuesten Meldungen sehen.

Ist die Anfrage erfolgreich, aber die Seite ändert sich nicht, prüfen Sie, ob das Skript die richtige Element-ID abfragt und erst ausgeführt wird, nachdem das betreffende Markup vorhanden ist. Fügen Sie einem externen, DOM-abhängigen Skript im Head defer hinzu oder verschieben Sie ein kleines Inline-Skript unter das Element. Wenn mehrere Skripte zusammenarbeiten, verwenden Sie vorzugsweise Skripte mit defer in der Reihenfolge ihrer Abhängigkeiten statt des asynchronen Ladens. Ein erfolgreicher Download bestätigt nur, dass der Browser die Datei gefunden hat; er bestätigt nicht, dass das Skript fehlerfrei ausgeführt wurde.

Häufig gestellte Fragen

Wo sollte ich einen Verweis auf eine JavaScript-Datei einfügen? Bei einem typischen externen Skript, das das DOM der Seite verwendet, setzen Sie es mit defer in den <head>. Ein Skript am Ende des Bodys kann ebenfalls auf vorhergehendes Markup zugreifen; ein gewöhnliches Skript im Head wird dagegen ausgeführt, bevor der Body geparst wurde.

Was bewirkt defer? Das Attribut lädt ein externes Skript herunter, ohne das HTML-Parsing anzuhalten. Anschließend wird es nach dem Parsing in der Reihenfolge ausgeführt, in der die Skripte mit defer im Dokument stehen.

Kann eine Seite mehrere JavaScript-Dateien einbinden? Ja. Fügen Sie für jede Datei ein eigenes <script src="..." defer></script>-Element hinzu. Dateien mit defer werden in Dokumentreihenfolge ausgeführt. Führen Sie daher gemeinsam genutzte Abhängigkeiten vor den Dateien auf, die sie verwenden.

Was ist der Unterschied zwischen async und defer? Beide ermöglichen parallele Downloads. defer wartet, bis das Parsing abgeschlossen ist, und erhält die Dokumentreihenfolge. async führt jede Datei aus, sobald sie bereit ist, und erhält die Reihenfolge nicht.

Benötige ich type="text/javascript"? Nein. In HTML5 ist JavaScript der Standard für ein Script-Element. Für gewöhnliches JavaScript ist type daher nicht erforderlich.