Sie wollen Ihre Website interaktiver gestalten? In diesem Fall empfiehlt es sich, JavaScript in HTML einzubetten. So können Sie JavaScript in Ihre statische Website integrieren. Im folgenden Beitrag zeigen wir Ihnen die verschiedenen Möglichkeiten, JavaScript in Ihre Website zu integrieren und erklären, worauf Sie dabei achten sollten.
![→ Webentwicklung lernen [Kostenloser Download]](https://no-cache.hubspot.com/cta/default/53/782165ec-3791-4cb1-896f-d86fcbc0c44f.png)
Welche Rolle spielt JavaScript für das World Wide Web?
JavaScript ist neben HTML und CSS zentral für das heutige Web – und ist damit aus fast keiner Website mehr wegzudenken. Schließlich sind Sie mit JavaScript in der Lage, Funktionen zu vereinfachen und benutzerfreundlicher zu machen. Es ermöglicht Ihnen auch die Implementierung neuer Funktionen.
Zwingend notwendig ist der JavaScript-Einsatz nicht. Ein übermäßiger Einsatz ist sogar kontraproduktiv, weil er Ladezeiten verlängern und Seiten unübersichtlich machen kann. Wenn Sie JavaScript allerdings gezielt einsetzen, kann es durch erhöhte Interaktivität zu einer besseren User Experience beitragen.
Warum ist die Einbindung von JavaScript in HTML sinnvoll?
Zunächst die Grundlagen: JavaScript ermöglicht es Ihnen, den Inhalt und das Erscheinungsbild von HTML-Dokumenten zu verändern, um ihnen beispielsweise mehr Interaktion und Dynamik zu verleihen. Durch das Hinzufügen von Ereignissen, wie beispielsweise das Klicken auf bestimmte HTML-Elemente, können zusätzliche Informationen angezeigt werden, ohne dass ein neues HTML-Dokument vom Webserver geladen werden muss.
JavaScript erlaubt Ihnen den Zugriff auf ein Browserfenster und auf das HTML-Dokument, das dort angezeigt wird. Eine wichtige Funktion von JavaScript besteht darin, auf die Eingaben eines Benutzers oder einer Benutzerin innerhalb eines HTML-Dokuments zu reagieren. Dies kann zum Beispiel der Fall sein, wenn die Nutzenden auf ein Element klicken oder Text in ein Formular eingeben. Durch diese Formen der Interaktion kann JavaScript Änderungen am aktuellen HTML-Dokument vornehmen, die jedoch nur auf dem jeweiligen Computer und nicht auf dem Webserver stattfinden.
Der Zugriff auf und die Veränderung von HTML-Dokumenten durch JavaScript wird durch das Document Object Model (DOM) gesteuert. Das Arbeiten mit dem DOM, auch DOM Scripting genannt, ist ein wesentlicher Bestandteil der JavaScript-Programmierung. Früher war dies auch unter Dynamic HTML oder DHTML bekannt.
JavaScript in HTML einbinden: So geht‘s
Sie haben verschiedene Möglichkeiten, wie Sie JavaScript in Ihr HTML-Dokument einbinden können:
Die erste Möglichkeit ist, das JavaScript direkt in den HTML-Code einzufügen, indem Sie es im Header-Bereich der Seite platzieren. Dadurch stellen Sie sicher, dass die JavaScript-Dateien so schnell wie möglich geladen werden. Allerdings müssen Sie in diesem Fall für jedes HTML-Dokument Ihrer Website einen direkten Eintrag vornehmen, um den Inhalt zu laden.
Alternativ können Sie das JavaScript als externe Datei in das HTML-Dokument einbinden. Hier wird für die JavaScript-Datei eine Referenz im HTML-Text erstellt. Durch das Laden von externen JavaScript-Dateien wird vermieden, dass diese jedes Mal direkt in den HTML-Code geschrieben werden müssen. Stattdessen können sie auf mehreren Seiten geladen werden.
Daneben gibt es weitere Optionen, wie Sie JavaScript in HTML einbauen können. Im Folgenden zeigen wir Ihnen, wie das genau funktioniert.
JavaScript direkt in HTML einfügen per Script Tag
Für eine schnelle Ladegeschwindigkeit von JavaScript-Elementen sollten Sie den Script-Tag idealerweise im HTML-Head oder im HTML-Body platzieren. In modernen Browsern reicht es bereits aus, einen relativ einfachen JavaScript-Code zu nutzen.
Um „Frischer Kaffee wird gebrüht” auf einer Website anzuzeigen, braucht es folgenden Codeschnipsel:
<html>
<head>
<title>JavaScript: Frischer Kaffee wird gebrüht</title>
<script> alert(“Frischer Kaffee wird gebrüht!“); </script>
</head>
<body>
<p>Diese Website zeigt einen Hinweis an.</p>
</body>
</html>
Sie wollen komplexe Animationen, Darstellung oder interaktive Elemente erstellen? Dann binden Sie diese direkt in das HTML-Dokument ein. Ein Vorteil dieser Methode ist, dass JavaScript-Elemente direkt im Dokument bearbeitet werden können. Der Nachteil besteht darin, dass die JavaScript-Funktionen für jedes HTML-Dokument einzeln im Quellcode notiert werden müssen. Das führt zu einem erhöhten Pflegeaufwand.
Externes JavaScript in HTML per Datei einbinden
Die andere beliebte Methode ist die Einbindung von JavaScript als externe Datei, auf die im HTML-Dokument verwiesen wird. Auf diese Weise kann JavaScript so inkludiert werden, als wäre es direkt im Quellcode notiert, was die Pflege des Codes erleichtert und das JavaScript und den HTML-Code übersichtlicher macht.
Ihre externe JavaScript-Datei binden Sie wie folgt in das HTML-Dokument ein:
<html lang="de">
<head>
<title>Hier binden Sie Ihre externe JavaScript-Datei ein</title>
<script src="Der Datei Name.js"></script>
</head>
Durch die Einbindung von JavaScript als externe Datei wird in Ihrem HTML-Dokument nur der Link auf die entsprechende Datei referenziert. Dies hat den Vorteil, dass alle Ihre HTML-Seiten, die einen Verweis auf die Datei enthalten, auf diese Datei zugreifen können, was die Ladezeit verkürzt. Außerdem wird der Quellcode vereinfacht, da nur eine JavaScript-Datei gepflegt werden muss und nicht mehrere HTML-Dokumente, für die jeweils eine eigene Notation erforderlich wäre.
Weitere Möglichkeiten, um JavaScript in HTML einzubinden
Neben der direkten Einbindung von JavaScript oder dem Einsetzen per externer Datei gibt es auch noch andere Wege – hier die beliebtesten:
Ordnen Sie jedem Element einen Event Handler zu, der JavaScript enthält. JavaScript Event Handler sind Anweisungen oder Funktionen, die Aktionen als Reaktion auf ein Ereignis wie Absenden eines Formulars, einen Klick oder eine Berührung ausführen. Der dazugehörige Code könnte so aussehen:
<body onload="trinkKaffee();"></body>
<div onclick="trinkKaffee();"></div>
<input onchange="trinkKaffee();" />
<form onsubmit="trinkKaffee();"></form>
Sie wollen einen Link und ein JavaScript miteinander verknüpfen? Dies geschieht JavaScript-Protokoll innerhalb des Linkziels:
<a href="javascript:trinkKaffeemach();">
Der Nachteil, wenn Sie JavaScript direkt im href-Attribut eines Links platzieren, ist, dass der Link nur dann funktioniert, wenn JavaScript aktiviert ist. Der Link kann auch nicht mehr mit der mittleren Maustaste geöffnet werden.
Besser ist es, wenn Sie ein gültiges href-Attribut angeben und den Onclick Handler verwenden, um JavaScript auszuführen, wenn der Link geklickt wird. Die normale Aktion des Links – das Öffnen einer neuen Seite – kann durch Verwendung von „return false” von Ihnen verhindert werden:
<a href="Das Ziel des Links.html" onclick="trinkKaffee(); return false;">
Besonderheiten unterschiedlicher HTML-Versionen
Bei der Einbindung von JavaScript in HTML sollten Sie berücksichtigen, dass ältere Browser einen umfangreichen Quellcode erfordern. Für diese Browser müsste die JavaScript-Einbindung nicht mit dem einfacheren HTML5-Tag „<script>...</script>” erfolgen, sondern in einer anderen Form dargestellt werden, nämlich so:
<script type="text/javascript">
Ihr JavaScript-Element
</script>
Wenn Sie sicherstellen möchten, dass auch Besucher, die JavaScript in ihrem Browser deaktiviert haben, eine bestimmte Meldung angezeigt bekommen, können Sie den Noscript-Tag verwenden. Dieser Tag bietet die Möglichkeit, alternative Inhalte zu definieren, die angezeigt werden sollen, wenn JavaScript im Browser deaktiviert ist.
Um eine Platzhalternachricht zu erstellen, platzieren Sie einfach den gewünschten Text innerhalb des Noscript-Tags. Wenn der Browser der Nutzenden kein JavaScript unterstützt oder JavaScript deaktiviert hat, wird der Text im Noscript-Tag anstelle des JavaScript-Inhalts angezeigt. Beachten Sie jedoch, dass dies nur für statische Inhalte funktioniert und nicht für dynamische. Der Code könnte folgendermaßen aussehen:
<head>
<script>
Ihr JavaScript-Element
</script>
<noscript>
Bitte aktivieren Sie JavaScript. Dann können Sie das JavaScript-Element sehen.
</noscript>
</head>
Fazit: JavaScript in HTML einbinden und Websiten interaktiver machen
Um JavaScript in HTML einbinden zu können, haben Developerinnen und Developer die Qual der Wahl: Direkte Einbettung oder externe Datei? Beide Wege haben Vor- und Nachteile. Einzige Voraussetzung ist, dass Nutzerinnen und Nutzer in ihrem Browser JavaScript aktivieren. Es ist jedoch trotzdem wichtig, auf ältere Browser Rücksicht zu nehmen und die Webseite auch ohne JavaScript-Funktionalität nutzbar zu halten – damit Ihre Inhalte für alle sichtbar sind.
Titelbild: Nubelson Fernandes / Unsplash
