JavaScript zu HTML hinzufügen: Eine einfache Anleitung für Ihre Webprojekte
Einführung
JavaScript, oft als JS abgekürzt, ist eine Programmiersprache, die man in der Webentwicklung verwendet. Zusammen mit HTML und CSS gehört JavaScript zu den Kerntechnologien des Webs und wird eingesetzt, um Webseiten interaktiv zu machen und Webanwendungen zu entwickeln. Moderne Webbrowser, die gängigen Anzeigestandards folgen, unterstützen JavaScript über integrierte Engines, ohne dass zusätzliche Plugins erforderlich sind.
Bei der Arbeit mit Dateien für das Web lädt JavaScript zusammen mit HTML-Markup. Dies kann entweder inline innerhalb eines HTML-Dokuments oder in einer separaten Datei erfolgen, die der Browser zusammen mit dem HTML-Dokument herunterlädt.
In diesem Tutorial erfahren Sie, wie Sie JavaScript in Ihre Webdateien integrieren können, sowohl inline in ein HTML-Dokument als auch als separate Datei.
JavaScript zu HTML hinzufügen
Sie können JavaScript-Code in ein HTML-Dokument einfügen, indem Sie das spezielle HTML-Tag <script> verwenden, das den JavaScript-Code umschließt.
Das <script>-Tag kann im <head>-Bereich Ihres HTML-Dokuments oder im <body>-Bereich platziert werden, je nachdem, wann der JavaScript-Code geladen werden soll.
In der Regel kann der JavaScript-Code im <head>-Bereich des Dokuments untergebracht werden, um ihn übersichtlich und vom Hauptinhalt des HTML-Dokuments getrennt zu halten.
Wenn Ihr Script jedoch an einem bestimmten Punkt im Layout einer Seite ausgeführt werden muss, z. B. wenn document.write() verwendet wird, um Inhalte zu generieren, sollte es an dieser Stelle im <body>-Bereich platziert werden.
Beispiel für Inline-JavaScript
Betrachten wir das folgende leere HTML-Dokument mit dem Seitentitel „Heutiges Datum“:
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Heutiges Datum</title>
</head>
<body>
</body>
</html>
Nun fügen wir den folgenden JavaScript-Code in das Dokument ein:
let d = new Date();
alert("Das heutige Datum ist " + d);
Fügen Sie den Code in den <head>-Bereich ein:
<script>
let d = new Date();
alert("Das heutige Datum ist " + d);
</script>
JavaScript zu HTML hinzufügen: Arbeiten mit einer separaten JavaScript-Datei
Für größere Skripte oder solche, die auf mehreren Seiten verwendet werden, wird JavaScript-Code normalerweise in separaten Dateien gespeichert. So verwenden Sie eine externe JavaScript-Datei:
Erstellen Sie eine neue JavaScript-Datei namens script.js und fügen Sie folgenden Code ein:
let d = new Date();
document.body.innerHTML = "<h1>Das heutige Datum ist " + d + "</h1>";
Verweisen Sie in Ihrem HTML-Dokument auf diese Datei:
<script src="js/script.js"></script>
Komplettes HTML-Beispiel
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Heutiges Datum</title>
</head>
<body>
<script src="js/script.js"></script>
</body>
</html>
Fazit zu JavaScript zu HTML hinzufügen
In diesem Tutorial haben Sie gelernt, wie Sie JavaScript sowohl inline als auch als separate Datei in HTML integrieren können. Mit diesen Methoden können Sie JavaScript effektiv in Ihre Webprojekte einbinden.
