HTML-Skripte
Ein Skript ist ein kleines Code-Stück, das in Webseiten eingebettet wird, um sie dynamisch und interaktiv zu machen. Mit Skripten können Sie beispielsweise Pop-up-Nachrichten, Dropdown-Menüs usw. erstellen. JavaScript ist die am häufigsten auf Websites verwendete Skriptsprache. Sie können das <script>-Element auch mit anderen Sprachen oder Typen verwenden (z. B. module-Typ oder text/javascript-MIME-Typ).
Skripte hinzufügen
Das <script>-Element wird verwendet, um Skripte oder Verweise auf ausführbare Skripte in einem HTML-Dokument einzubetten. Skripte werden häufig im <head> oder am Ende des <body>-Elements platziert. Um zu verhindern, dass das Rendern der Seite blockiert wird, verwenden Sie beim Einfügen von Skripten im Head das Attribut defer oder async. Das Attribut defer lädt das Skript parallel zur HTML-Parsing herunter und führt es nach Abschluss des Parsings aus, während async das Skript parallel herunterlädt und das HTML-Parsing nur pausiert, wenn das Skript bereit zur Ausführung ist. Es gibt jedoch keine Einschränkungen, und das Skript kann überall im Dokument platziert werden.
Wenn Sie dasselbe Skript auf vielen Webseiten verfügbar machen möchten, sollten Sie es in eine separate Datei auslagern und es anschließend aus dem HTML-Dokument aufrufen.
Sie können den folgenden Code-Schnipsel mit dem <script>-Tag in Ihren HTML-Code einfügen:
HTML-Skripte
<script src="scripts.js"></script>Hinweis: In HTML5 ist das type-Attribut optional (Standardwert ist text/javascript) und gilt für JavaScript-Skripte als veraltet.
Skripte auslösen
Sie können festlegen, ob ein Skript automatisch ausgeführt werden soll (sofort beim Laden der Seite) oder erst nach einer Aktion des Benutzers (z. B. beim Überfahren oder Klicken auf einen Link). Wenn das Skript bei einer Benutzeraktion ausgeführt werden soll (ein sogenanntes Ereignis), sollten Sie Event-Handler verwenden, um dem Browser mitzuteilen, welches Ereignis für das Auslösen des Skripts verantwortlich ist.
Event-Handler können als Attribute innerhalb von HTML-Tags angegeben oder über JavaScript mit Methoden wie addEventListener hinzugefügt werden.
Beispiel für das HTML-Tag <script> mit einem Event-Handler:
Beispiel für einen Event-Handler — 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 JavaScript-Code nicht ausführen, und Benutzer haben JavaScript möglicherweise auch in ihren Browsern deaktiviert. Um nicht-JavaScript-Browsern oder Browsern mit deaktiviertem JavaScript alternative Informationen bereitzustellen, verwenden Sie das <noscript>-Tag. Der Inhalt dieses Tags wird dem Benutzer nur angezeigt, wenn JavaScript deaktiviert ist oder der Browser JavaScript nicht unterstützt.
Beispiel für das HTML-Tag <noscript>:
Mein erstes JavaScript-Beispiel! — HTML-Skripte — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<script>
document.getElementById('output').textContent = "My first JavaScript example!";
</script>
<p id="output"></p>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>In case JavaScript is disabled or the browser doesn't support it, the code will display the content inside the noscript element.</p>
</body>
</html>Ergebnis
Practice
Wo kann das <script>-Tag in HTML platziert werden?