JavaScript in HTML einbinden: Einfache Anleitung und Beispiele

JavaScript bringt frischen Wind in eine statische HTML-Datei. Sie können JavaScript direkt oder als externe Datei in HTML einbinden. Wir zeigen Ihnen, welche Vor- und Nachteile die Einbindung von JavaScript bietet und welche Besonderheiten es gibt.

Warum JavaScript in HTML einbinden?

HTML, CSS und JavaScript sind die drei Grundsäulen des modernen World Wide Web. Wer eine moderne, interaktive Website kreieren will, kommt kaum umhin, HTML-Textdateien durch die Einbindung von CSS und JavaScript zu beleben. HTML-Dateien sind reine Textdokumente zur Erstellung und Strukturierung von Website-Inhalten. HTML lässt sich leicht lernen, kommt ohne Formatierungen aus und ist dank kostenloser Code-Editoren wie Notepad++ oder Kate bedienerfreundlich. Für Kreativität wiederum sorgen in HTML eingebundene CSS-Textdateien, die das Layout, die Farbgebung, Typografien und andere Designelemente einer Website definieren.

Wirklich interaktiv zeigt sich eine Website erst mit JavaScript Elementen, die den Content um dynamisches Verhalten erweitern. In HTML eingebundene JavaScript-Dateien ermöglichen zum Beispiel die aktive Veränderung von Website-Inhalten wie automatische Datumsanzeige, tagesabhängige Farbgebung oder automatisch angezeigte Nachrichten bei Aufruf der Website. Bei aktiviertem JavaScript lassen sich JavaScript-Inhalte in den meisten Browser direkt ausführen. Das spart Rechenleistung und verbessert die Ladegeschwindigkeit von interaktiven Inhalten und Animationen einer Website.

Welche Möglichkeiten zur JavaScript-Einbindung gibt es?

JavaScript-Elemente notieren bzw. referenzieren Sie in HTML-Quellcode als script-Elemente wie folgt:

<script> </codesnippet></script>
JavaScript-Element

Script-Elemente binden Sie in der Regel im Body- oder im Head-Bereich eines HTML-Dokuments ein.

Je nachdem, wie Sie JavaScript in HTML einbinden, stehen Ihnen folgende Möglichkeiten zur Auswahl:

  • JavaScript direkt in HTML-Seite notieren: Die direkte Einbindung in HTML erfolgt über den Head und sorgt dafür, dass JavaScript-Dateien über eine direkte Notierung schnellstmöglich laden. Der Nachteil ist, dass direkte Einträge für jedes HTML-Dokument einer Website erfolgen müssen, um Inhalte zu laden.
  • JavaScript als externe Datei in HTML referenzieren: Die Einbindung als externe JavaScript-Datei referenziert die JavaScript-Datei im HTML-Text. Die Einbindung als Referenz ermöglicht es, extern notierte JavaScript-Dateien auf mehreren Seiten zu laden, ohne diese direkt als ausführliche JavaScript-Elemente in HTML-Dateien notieren zu müssen.
Tipp

Die Einbindung von JavaScript-Elementen fällt mit speziellen JavaScript-Frameworks besonders leicht. JS-Frameworks fassen vordefinierte JavaScript-Objekte und Anweisungen zusammen und erleichtern das Programmieren.

JavaScript in HTML einbinden: Anwendungsbeispiele

Sie können zwischen zwei verschiedenen Methoden wählen, um JavaScript einzubinden. Wir stellen Ihnen beide vor.

JavaScript in HTML direkt einbinden

Um JavaScript-Elemente möglichst schnell zu laden, platzieren Sie das script-Element im HTML-Head bzw. im HTML-Body. In neuen Browsern genügt hier bereits ein relativ simpel gehaltener JS-Quellcode. Im folgenden Beispiel soll über JavaScript-Einbindung die Nachricht „Hallo Freund“ auf einer Website geschrieben werden:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript: Hallo Freund</title>
    <script>
        alert(“Hallo Freund!“);
    </script>
</head>
<body>
    <p>Diese Website zeigt nur eine Hinweisbox an.</p>
</body>
</html>

Komplexe Darstellungen, Animationen oder interaktive Elemente lassen sich ebenfalls direkt in HTML notieren. Der Vorteil an einer direkten Einbindung ist, dass JavaScript-Elemente direkt in der HTML-Datei bearbeitet werden. Der Nachteil ist, dass Sie JavaScript-Funktionen für jedes HTML-Dokument separat im Quellcode notieren müssen. Das führt zu erhöhtem Aufwand beim Pflegen des Quellcodes.

JavaScript als externe Datei einbinden

Effizienter und gebräuchlicher ist es, JavaScript als externe Datei zu notieren und im HTML-Dokument zu referenzieren. Auf diese Weise lässt sich JavaScript in HTML einbinden als wäre die Datei direkt im Quellcode notiert.

Im HTML-Dokument sieht es wie folgt aus:

<!DOCTYPE html> 
<html lang="de">
<head> 
    <title>Externe JavaScript-Datei einbinden</title>
    <script src="dateiname.js"></script>
</head>
</body>

Die JavaScript-Einbindung als externe Datei bietet den Vorteil, dass lediglich der Link zur externen Datei referenziert wird. So können alle gewünschten HTML-Seiten mit entsprechender Referenz auf die Datei zugreifen und diese schneller laden. Zudem lässt sich der Quellcode einfacher pflegen, da es sich nicht um mehrere HTML-Dokumente, sondern nur um eine JavaScript-Datei handelt.

Tipp

JavaScript-Elemente waren bisher eine Art Non-Plus-Ultra für interaktive Inhalte auf Websites und in Browsern. Da jedoch selbst JavaScript nicht immer schnell genug lädt, kommt inzwischen der offene Standard WebAssembly immer häufiger als JavaScript-Ergänzung zum Einsatz.

Besonderheiten in verschiedenen HTML-Versionen

Wenn Sie JavaScript in HTML einbinden, beachten Sie, dass ältere Browser einen ausführlicheren Quellcode erfordern. Statt dem einfacheren HTML 5-Tag <script>…</script> würde die JavaScript-Einbindung wie folgt aussehen:

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

Möchten Sie für Besucher mit deaktiviertem JavaScript eine Platzhaltermeldung anzeigen, so nutzen Sie folgenden noscript-Tag:

<head>
    <script>
        JavaScript-Element
    </script>
    <noscript>
        Bitte aktivieren Sie JavaScript, um das JavaScript-Element zu sehen.
    </noscript>
</head>
War dieser Artikel hilfreich?