In diesem Tutorial lernen Sie, wie man JavaScript in ein HTML-Dokument einbindet.
Arbeiten mit Client-seitigem Script
Client-seitiges Scripting bezieht sich auf die Art von Computerprogrammen, die vom Webbrowser des Benutzers ausgeführt werden. JavaScript (JS) ist die beliebteste Client-seitige Skriptsprache im Web.
Das <script>-Element wird verwendet, um JavaScript in ein HTML-Dokument einzubetten oder zu referenzieren, um Webseiten Interaktivität hinzuzufügen und eine deutlich bessere Benutzererfahrung zu bieten.
Zu den häufigsten Anwendungen von JavaScript gehören Formularvalidierung, Generierung von Warnmeldungen, Erstellen von Bildergalerien, Einblenden von Inhalten, DOM-Manipulationen und vieles mehr.
JavaScript zu HTML-Seiten hinzufügen
JavaScript kann entweder direkt in die HTML-Seite eingebettet oder in einer externen Skriptdatei platziert und innerhalb der HTML-Seite referenziert werden. Beide Methoden verwenden das <script>-Element.
JavaScript einbetten
Um JavaScript in eine HTML-Datei einzubetten, fügen Sie den Code einfach als Inhalt eines <script>-Elements ein.
Das JavaScript im folgenden Beispiel schreibt einen Textstring in eine Web-Seite.
Beispiel
Probieren Sie diesen Code aus “
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Embedding JavaScript</title></head><body> <div></div> <script> document.getElementById("greet").innerHTML = "Hello World!"; </script></body></html>Tipp: Idealerweise sollten Skript-Elemente am Ende der Seite platziert werden, vor dem schließenden Body-Tag, d.h. </body>, denn wenn der Browser auf ein Skript stößt, hält er das Rendern der restlichen Seite an, bis er das Skript geparst hat, was die Performance Ihrer Seite erheblich beeinträchtigen kann.
Aufruf einer externen JavaScript-Datei
Sie können Ihren JavaScript-Code auch in einer separaten Datei (mit einer .js-Erweiterung) ablegen und diese Datei in Ihrem HTML-Dokument über das Attribut src des <script>-Tags aufrufen.
Dies ist nützlich, wenn Sie dasselbe Skript für mehrere Dokumente zur Verfügung haben möchten. Es erspart Ihnen, die gleiche Aufgabe immer wieder zu wiederholen und macht Ihre Website viel einfacher zu pflegen.
Das folgende Beispiel zeigt, wie Sie eine externe JS-Datei in HTML verlinken.
Beispiel
Versuchen Sie diesen Code “
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Linking External JavaScript</title></head><body> <div></div> <script src="hello.js"></script></body></html>Hinweis: Wenn das Attribut src angegeben wird, muss das Element <script> leer sein. Dies bedeutet lediglich, dass Sie nicht dasselbe <script>-Element verwenden können, um sowohl das JavaScript einzubetten als auch auf eine externe JavaScript-Datei in einem HTML-Dokument zu verlinken.
Tipp: JavaScript-Dateien sind normale Textdateien mit .js-Erweiterung, wie z. B. „hello.js“. Außerdem enthält die externe JavaScript-Datei nur JavaScript-Anweisungen; sie enthält nicht das <script>...</script>-Element wie eingebettetes JavaScript.
Das HTML-noscript-Element
Das <noscript>-Element wird verwendet, um einen alternativen Inhalt für Benutzer bereitzustellen, die entweder JavaScript in ihrem Browser deaktiviert haben oder einen Browser haben, der Client-seitiges Scripting nicht unterstützt.
Dieses Element kann neben <script> alle HTML-Elemente enthalten, die auch im <body>-Element einer normalen HTML-Seite enthalten sein können. Schauen wir uns ein Beispiel an:
Beispiel
Probieren Sie diesen Code aus “
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Noscript Demo</title> </head><body> <div></div> <script> document.getElementById("greet").innerHTML = "Hello World!"; </script> <noscript> <p>Oops! This website requires a JavaScript-enabled browser.</p> </noscript></body></html>Hinweis: Der Inhalt innerhalb des noscript-Elements wird nur angezeigt, wenn der Browser des Benutzers kein Scripting unterstützt oder Scripting im Browser deaktiviert ist.