HTML-Skripte
In HTML ist ein Skript ein kleines eingebettetes Programm, das Interaktivität zu Ihrer Website hinzufügt. Lernen Sie mit W3Docs, wie Sie Skripte einbinden.
Ein Skript ist ein kleines Stück Code, das in Webseiten eingebettet wird, um sie dynamisch und interaktiv zu gestalten. Mit Skripten können Sie beispielsweise ein Pop-up-Fenster, ein Dropdown-Menü erstellen oder ein Formular vor dem Absenden validieren. JavaScript ist die am häufigsten verwendete Skriptsprache auf Websites.
Diese Seite erklärt, wie Sie JavaScript zu einem HTML-Dokument hinzufügen, wo Sie das <script>-Element platzieren, wie Sie mit defer und async den Ausführungszeitpunkt steuern und wie Sie einen Fallback für Nutzer ohne JavaScript bereitstellen. Die vollständige Liste der <script>-Attribute finden Sie in der dedizierten Referenz zum <script>-Tag.
Skripte einbinden
Das <script>-Element enthält entweder eingebetteten Code oder verweist auf eine externe Datei. Es gibt zwei Möglichkeiten, es zu verwenden:
1. Inline-Skript — schreiben Sie den Code direkt zwischen das öffnende und schließende Tag:
<script>
document.body.style.backgroundColor = "lightyellow";
</script>2. Externes Skript — verweisen Sie mit dem src-Attribut auf eine .js-Datei. Das Element muss leer sein (kein Code zwischen den Tags):
<script src="scripts.js"></script>Wenn Sie denselben Code auf vielen Webseiten benötigen, legen Sie ihn in einer separaten .js-Datei ab und referenzieren Sie diese mit src. Externe Dateien werden vom Browser gecacht, halten Ihr HTML übersichtlich und ermöglichen die Wiederverwendung eines Skripts auf der gesamten Website.
Skripte werden oft im <head> oder kurz vor dem schließenden </body>-Tag platziert, aber ein <script> kann an jeder Stelle im Dokument stehen. Die Platzierung ist wichtig, weil der Browser die Seite sequenziell verarbeitet — siehe Wo ein Skript platziert werden sollte weiter unten.
Beispiel für DOM-Manipulation mit einem Inline-Skript
Ein Inline-Skript kann die Seite mithilfe des DOM lesen und verändern. Das folgende Beispiel findet einen Absatz anhand seiner id und überschreibt dessen Text, wenn das Skript ausgeführt wird:
Inline-Skript — HTML-Skripte — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Inline script example</title>
</head>
<body>
<p id="message">Original text.</p>
<script>
document.getElementById("message").textContent = "Changed by JavaScript!";
</script>
</body>
</html>Da das <script> nach dem <p> steht, existiert das Element bereits im DOM, wenn das Skript ausgeführt wird, sodass getElementById es findet. Würde das Skript vor dem Element ausgeführt, würde es null zurückgeben.
Hinweis: In HTML5 ist das type-Attribut optional (standardmäßig text/javascript) und gilt für JavaScript-Skripte als veraltet.
defer vs async
Befindet sich ein Skript im <head>, hält der Browser normalerweise das Parsen des HTML an, lädt das Skript herunter, führt es aus und fährt erst dann fort. Bei großen Skripten blockiert dies das Rendering und lässt die Seite langsam erscheinen. Die Attribute defer und async (die nur für externe Skripte mit einem src gelten) beheben dies, indem sie das Skript parallel zum HTML-Parsing herunterladen — sie unterscheiden sich darin, wann das Skript ausgeführt wird.
| Attribut | Download | Ausführungszeitpunkt | Quellenreihenfolge beibehalten? |
|---|---|---|---|
| (keines) | Blockiert das Parsing während des Downloads | Sofort, blockiert das Parsing | Ja |
defer | Parallel zum Parsing | Nach vollständigem Parsing des HTML, kurz vor DOMContentLoaded | Ja |
async | Parallel zum Parsing | Sobald der Download abgeschlossen ist, unterbricht das Parsing in diesem Moment | Nein — welches zuerst geladen wird, wird zuerst ausgeführt |
<head>
<!-- Runs in order, after the whole page is parsed -->
<script src="library.js" defer></script>
<script src="app.js" defer></script>
<!-- Runs as soon as it loads, order not guaranteed -->
<script src="analytics.js" async></script>
</head>Verwenden Sie defer für Skripte, die vom DOM oder voneinander abhängen (der größte Teil des App-Codes). Verwenden Sie async für unabhängige Skripte, die auf nichts anderes angewiesen sind, wie etwa Analytics oder Werbetags.
Wo ein Skript platziert werden sollte
Der Ort, an dem Sie ein <script> einfügen, bestimmt, ob die Seitenelemente bereits existieren, wenn es ausgeführt wird.
Ein Skript, das direkt vor dem schließenden </body>-Tag platziert wird, wird ausgeführt, nachdem das gesamte HTML darüber geparst wurde, sodass es sicher auf jedes Element der Seite zugreifen kann:
<body>
<h1 id="title">Loading…</h1>
<!-- The <h1> already exists, so this works -->
<script>
document.getElementById("title").textContent = "Ready!";
</script>
</body>Denselben Effekt erreicht man, indem man das Skript mit defer im <head> platziert, da verzögerte Skripte warten, bis das Parsing abgeschlossen ist:
<head>
<script src="app.js" defer></script>
</head>
<body>
<h1 id="title">Loading…</h1>
</body>Ein einfaches <script> im <head> (ohne defer) wird ausgeführt, bevor der Body geparst ist, weshalb document.getElementById("title") null zurückgeben würde.
type="module"
Setzen Sie type="module", um das Skript als JavaScript-Modul zu laden. Module können import und export verwenden, um Code zwischen Dateien zu teilen, werden automatisch im Strict-Modus ausgeführt und sind standardmäßig verzögert (sie werden nach dem Parsen des HTML ausgeführt, auch ohne das defer-Attribut):
<script type="module">
import { greet } from "./utils.js";
greet("World");
</script>Skripte auslösen
Sie können festlegen, ob ein Skript automatisch ausgeführt werden soll (sobald die Seite geladen wird) oder nachdem der Nutzer etwas getan hat (z. B. über einen Link gehovert oder geklickt hat). Wenn das Skript bei einer Benutzeraktion (einem sogenannten Ereignis) ausgeführt werden soll, verwenden Sie Ereignis-Handler, um dem Browser mitzuteilen, welches Ereignis das Skript auslöst.
Ereignis-Handler können als Attribute innerhalb von HTML-Tags angegeben oder über JavaScript mit Methoden wie addEventListener angehängt werden.
Beispiel des HTML-<script>-Tags mit einem Ereignis-Handler:
Ereignis-Handler-Beispiel — HTML-Skripte — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Event Handler Example</title>
</head>
<body>
<span id="trigger">
Bring your mouse here to see an alert
</span>
<script>
function myAlert() {
alert("I am an event handler....");
}
document.getElementById('trigger').addEventListener('mouseover', myAlert);
</script>
</body>
</html>Das <noscript>-Element
Obwohl viele moderne Browser JavaScript unterstützen, können einige ältere Browser keinen JavaScript-Code ausführen, und Nutzer können JavaScript in ihren Browsern deaktiviert haben. Um alternative Inhalte für Browser ohne JavaScript oder mit deaktiviertem JavaScript bereitzustellen, verwenden Sie das <noscript>-Tag. Der Inhalt dieses Tags wird dem Nutzer nur angezeigt, wenn JavaScript deaktiviert ist oder der Browser JavaScript nicht unterstützt.
Beispiel des HTML-<noscript>-Tags:
Mein erstes JavaScript-Beispiel! — HTML-Skripte — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p id="output"></p>
<script>
document.getElementById('output').textContent = "My first JavaScript example!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>If JavaScript is disabled or the browser doesn't support it, the content inside the noscript element is shown instead.</p>
</body>
</html>Hier wird <p id="output"> vor dem <script> deklariert, sodass der Absatz bereits im DOM vorhanden ist, wenn das Skript ausgeführt wird, und getElementById ihn finden kann. Wenn JavaScript aktiviert ist, sieht der Nutzer „My first JavaScript example!"; wenn es deaktiviert ist, ignoriert der Browser das Skript und zeigt die <noscript>-Meldung an.
Verwandtes
- HTML-
<script>-Tag — vollständige Attributreferenz (src,type,defer,asyncund mehr). - HTML-
<noscript>-Tag — Fallback-Inhalt für Nutzer ohne JavaScript. - JavaScript-Ereignisse — auf Klicks, Hover-Aktionen und andere Benutzeraktionen reagieren.