Ja­va­Script bringt frischen Wind in eine statische HTML-Datei. Sie können Ja­va­Script direkt oder als externe Datei in HTML einbinden. Wir zeigen Ihnen, welche Vor- und Nachteile die Ein­bin­dung von Ja­va­Script bietet und welche Be­son­der­hei­ten es gibt.

Warum Ja­va­Script in HTML einbinden?

HTML, CSS und Ja­va­Script sind die drei Grund­säu­len des modernen World Wide Web. Wer eine moderne, in­ter­ak­ti­ve Website kreieren will, kommt kaum umhin, HTML-Text­da­tei­en durch die Ein­bin­dung von CSS und Ja­va­Script zu beleben. HTML-Dateien sind reine Text­do­ku­men­te zur Er­stel­lung und Struk­tu­rie­rung von Website-Inhalten. HTML lässt sich leicht lernen, kommt ohne For­ma­tie­run­gen aus und ist dank kos­ten­lo­ser Code-Editoren wie Notepad++ oder Kate be­die­ner­freund­lich. Für Krea­ti­vi­tät wiederum sorgen in HTML ein­ge­bun­de­ne CSS-Text­da­tei­en, die das Layout, die Farb­ge­bung, Ty­po­gra­fien und andere De­sign­ele­men­te einer Website de­fi­nie­ren.

Wirklich in­ter­ak­tiv zeigt sich eine Website erst mit Ja­va­Script Elementen, die den Content um dy­na­mi­sches Verhalten erweitern. In HTML ein­ge­bun­de­ne Ja­va­Script-Dateien er­mög­li­chen zum Beispiel die aktive Ver­än­de­rung von Website-Inhalten wie au­to­ma­ti­sche Da­tumsan­zei­ge, ta­ges­ab­hän­gi­ge Farb­ge­bung oder au­to­ma­tisch an­ge­zeig­te Nach­rich­ten bei Aufruf der Website. Bei ak­ti­vier­tem Ja­va­Script lassen sich Ja­va­Script-Inhalte in den meisten Browser direkt ausführen. Das spart Re­chen­leis­tung und ver­bes­sert die La­de­ge­schwin­dig­keit von in­ter­ak­ti­ven Inhalten und Ani­ma­tio­nen einer Website.

Welche Mög­lich­kei­ten zur Ja­va­Script-Ein­bin­dung gibt es?

Ja­va­Script-Elemente notieren bzw. re­fe­ren­zie­ren 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 Ja­va­Script in HTML einbinden, stehen Ihnen folgende Mög­lich­kei­ten zur Auswahl:

  • Ja­va­Script direkt in HTML-Seite notieren: Die direkte Ein­bin­dung in HTML erfolgt über den Head und sorgt dafür, dass Ja­va­Script-Dateien über eine direkte Notierung schnellst­mög­lich laden. Der Nachteil ist, dass direkte Einträge für jedes HTML-Dokument einer Website erfolgen müssen, um Inhalte zu laden.
  • Ja­va­Script als externe Datei in HTML re­fe­ren­zie­ren: Die Ein­bin­dung als externe Ja­va­Script-Datei re­fe­ren­ziert die Ja­va­Script-Datei im HTML-Text. Die Ein­bin­dung als Referenz er­mög­licht es, extern notierte Ja­va­Script-Dateien auf mehreren Seiten zu laden, ohne diese direkt als aus­führ­li­che Ja­va­Script-Elemente in HTML-Dateien notieren zu müssen.
Tipp

Die Ein­bin­dung von Ja­va­Script-Elementen fällt mit spe­zi­el­len Ja­va­Script-Frame­works besonders leicht. JS-Frame­works fassen vor­de­fi­nier­te Ja­va­Script-Objekte und An­wei­sun­gen zusammen und er­leich­tern das Pro­gram­mie­ren.

Ja­va­Script in HTML einbinden: An­wen­dungs­bei­spie­le

Sie können zwischen zwei ver­schie­de­nen Methoden wählen, um Ja­va­Script ein­zu­bin­den. Wir stellen Ihnen beide vor.

Ja­va­Script in HTML direkt einbinden

Um Ja­va­Script-Elemente möglichst schnell zu laden, plat­zie­ren Sie das script-Element im HTML-Head bzw. im HTML-Body. In neuen Browsern genügt hier bereits ein relativ simpel ge­hal­te­ner JS-Quellcode. Im folgenden Beispiel soll über Ja­va­Script-Ein­bin­dung die Nachricht „Hallo Freund“ auf einer Website ge­schrie­ben 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 Dar­stel­lun­gen, Ani­ma­tio­nen oder in­ter­ak­ti­ve Elemente lassen sich ebenfalls direkt in HTML notieren. Der Vorteil an einer direkten Ein­bin­dung ist, dass Ja­va­Script-Elemente direkt in der HTML-Datei be­ar­bei­tet werden. Der Nachteil ist, dass Sie Ja­va­Script-Funk­tio­nen für jedes HTML-Dokument separat im Quellcode notieren müssen. Das führt zu erhöhtem Aufwand beim Pflegen des Quell­codes.

Ja­va­Script als externe Datei einbinden

Ef­fi­zi­en­ter und ge­bräuch­li­cher ist es, Ja­va­Script als externe Datei zu notieren und im HTML-Dokument zu re­fe­ren­zie­ren. Auf diese Weise lässt sich Ja­va­Script 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 Ja­va­Script-Ein­bin­dung als externe Datei bietet den Vorteil, dass lediglich der Link zur externen Datei re­fe­ren­ziert wird. So können alle ge­wünsch­ten HTML-Seiten mit ent­spre­chen­der 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 Ja­va­Script-Datei handelt.

Tipp

Ja­va­Script-Elemente waren bisher eine Art Non-Plus-Ultra für in­ter­ak­ti­ve Inhalte auf Websites und in Browsern. Da jedoch selbst Ja­va­Script nicht immer schnell genug lädt, kommt in­zwi­schen der offene Standard We­b­As­sem­bly immer häufiger als Ja­va­Script-Ergänzung zum Einsatz.

Be­son­der­hei­ten in ver­schie­de­nen HTML-Versionen

Wenn Sie Ja­va­Script in HTML einbinden, beachten Sie, dass ältere Browser einen aus­führ­li­che­ren Quellcode erfordern. Statt dem ein­fa­che­ren HTML 5-Tag <script>…</script> würde die Ja­va­Script-Ein­bin­dung wie folgt aussehen:

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

Möchten Sie für Besucher mit de­ak­ti­vier­tem Ja­va­Script eine Platz­hal­ter­mel­dung 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>
Zum Hauptmenü