Das HTML-script-Tag im Überblick
Mithilfe von HTML <script>
kennzeichnen Sie in Ihren HTML-Dokumenten den Einsatz von Skripten. Neben der direkten Einbindung von JavaScript-Code ist auch die Referenz auf externe Skripte möglich. Zudem gibt es verschiedene optionale Attribute wie async
oder defer
, die den Umgang mit den verwendeten Skripten regeln.
Was ist HTML <script>
und wofür verwendet man es?
Das HTML-Tag <script>
dient dem Zweck, clientseitige Skripte in Webseiten bzw. HTML-Dokumente einzubinden. Innerhalb des einleitenden und schließenden <script>
-Tags können Sie wahlweise direkte Skriptanweisungen geben oder mithilfe des src
-Attributs auf eine externe Skriptdatei verweisen. Seit HTML5 ist JavaScript als mögliche Skriptsprache für das Element festgelegt – in älteren HTML-Versionen war eine zusätzliche Angabe der Skriptsprache erforderlich.
Typische Verwendungszwecke für HTML <script>
bzw. für JavaScript im Allgemeinen sind die Validierung von Formulareingaben, die Bildmanipulation und dynamische Änderungen der Website-Inhalte.
- Flexibel: Hosting, das jedem Website-Traffic standhält
- Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
- Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups
HTML-<script>
-Tag: Syntax inklusive Code-Beispiel
Die Syntax von <script>
-Elementen ist relativ unkompliziert: Ein einleitendes <script>
-Tag markiert den Start, ein schließendes </script>
-Tag das Ende des Skripts. Das Syntax-Grundgerüst sieht folglich so aus:
<script>JavaScript-Code bzw. Verweis auf externes Skript</script>
htmlWenn Sie den JavaScript-Code direkt in das Element schreiben, benötigen Sie keine weiteren Parameter. Bei einer Referenz auf ein externes Skript benötigen Sie zusätzlich das HTML-Attribut src
(für engl. source „Quelle“). Die erweiterte Syntax für HTML <script>
hat dann folgende Form:
<script src="skript.js"></script>
htmlBeispiel für die direkte Einbindung von JavaScript
Wir verdeutlichen die Syntax und Funktionsweise der direkten JavaScript-Einbindung per HTML-<script>
-Tag an einem einfachen Beispiel. Innerhalb des <body>
-Bereichs platzieren wir zu diesem Zweck einen Button mit der <button id>
„meinButton“. Direkt im Anschluss wird der JavaScript-Code eingebunden, der dafür sorgt, dass eine Hinweis-Box mit der Nachricht „Button wurde angeklickt!“ angezeigt wird, sobald ein User auf die Schaltfläche drückt:
<body>
<h1>JavaScript Beispiel-Button: Direkte Einbindung</h1>
<button id="meinButton">Klick mich!</button>
<script>
document.getElementById('meinButton').addEventListener('click', function() {
alert('Button wurde angeklickt!');
});
</script>
</body>
htmlEs ist empfehlenswert, einen Alternativtext einzubinden, der anstelle des Skripts präsentiert wird, wenn dieses nicht ausgeführt werden kann – zum Beispiel, weil ein User JavaScript deaktiviert hat. Hierfür können Sie ganz einfach das Element <noscript>
(einleitendes und schließendes Tag) verwenden.
Beispiel für die Einbindung eines externen Skripts
Wir übertragen das Beispiel auf die alternative Möglichkeit, das JavaScript-Codes als externes Skript einzubinden. Den Code für den anklickbaren Button, der nach einem Klick die Nachricht „Button wurde angeklickt!“ ausspielt, speichern wir zu diesem Zweck im ersten Schritt in einer neuen Datei mit dem beispielhaften Namen script.js
:
// script.js
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('meinButton').addEventListener('click', function() {
alert('Button wurde angeklickt!');
});
});
javascriptIm zweiten Schritt binden wir das Skript in ein HTML-Dokument ein, das sich im gleichen Verzeichnis wie das Skript befindet:
<body>
<h1>JavaScript Beispiel-Button: Einbindung via Verweis</h1>
<button id="meinButton">Klick mich!</button>
<script src="script.js"></script>
</body>
</html>
htmlIn einem separaten Artikel gehen wir genauer darauf ein, wie Sie JavaScript in HTML einbinden.
Welche Attribute für HTML <script>
gibt es?
Das HTML-<script>
-Tag lässt sich mit einer Reihe von Attributen kombinieren. Zu den wichtigsten zählen die folgenden:
-
async
: Mit diesem Attribut sorgen Sie dafür, dass ein externes Skript parallel zur Interpretation des Seiten-Codes heruntergeladen und ausgeführt wird, sobald es verfügbar ist (auch wenn die Seite noch nicht vollständig geladen ist). -
crossorigin
: Wenn Sie den Request-Modus für das Skript auf HTTP-CORS-Requests setzen möchten, verwenden Sie das Attributcrossorigin
. -
defer
: Ist dasdefer
-Attribut gesetzt, wird ein externes Skript ebenfalls parallel zur Interpretation des Seiten-Codes heruntergeladen. Es wird allerdings erst ausgeführt, sobald die Seite vollständig interpretiert wurde. -
integrity
: Um die Sicherheit zu erhöhen, können Sie HTML<script>
um das Attributintegrity
erweitern. Es sorgt dafür, dass Browser das abgerufene Skript überprüfen können. So wird sichergestellt, dass der Code niemals geladen wird, wenn der Quellcode manipuliert wurde. -
nomodule
: Mitnomodule
sorgen Sie dafür, dass Ihre Skripte nicht in Browsern ausgeführt werden, die ES2015-Module unterstützen. -
referrerpolicy
: Wollen Sie angeben, welche Referrer-Informationen beim Abrufen eines Skripts gesendet werden sollen, nutzen Sie das Attributreferrerpolicy
. Mögliche Werte sind unter anderemno-referrer
(keine Verweisseite) undstrict-origin
(Refferer immer Ursprungs-Domain). -
src
: Dassrc
-Attribut spezifiziert die URL eines externen Skripts. -
type
: Mit diesem (mittlerweile optionalen) Attribut können Sie angeben, welchen Inhalt das HTML-<script>
-Element enthält. Neben dem klassischen Skript sind zum Beispiel auch ECMAScript-Module (module
) und Import Maps (importmap
) mit Regeln für ECMAScript-Modul-Importe möglich.
- Inklusive Wildcard-SSL-Zertifikat
- Inklusive Domain Lock
- Inklusive 2 GB E-Mail-Postfach