Einführung
JavaScript bedarf keiner Vorstellung. Es ist eine der beliebtesten Programmiersprachen für die Webentwicklung. Es funktioniert ähnlich wie HTML und CSS. Alle diese Sprachen helfen beim Entwerfen und Entwickeln von webbasierten Anwendungen und Programmen.
Wie genau ist JavaScript also nützlich? Mit Hilfe von JavaScript können Sie Ihre Webanwendungen und Webseiten sehr interaktiv gestalten. Im modernen Bereich gibt es keinen Platz für Selbstzufriedenheit. Sie müssen die Aufmerksamkeit Ihrer Zuschauer in den ersten Sekunden gewinnen und sie fesseln. Es besteht kein Zweifel, dass ein interessantes und responsives Webdesign eine der besten Möglichkeiten ist, dies zu tun. Erfreulicherweise unterstützen die meisten Browser JavaScript. Es kann mit Hilfe einiger integrierter Engines in Ihrem Browser ausgeführt werden.
JavaScript zu HTML hinzufügen
Wenn Sie JavaScript-Dateien für Ihre Web-App verwenden möchten, müssen Sie diese parallel zum HTML-Markup ausführen. Es gibt zwei Möglichkeiten, wie Sie JavaScript zu HTML hinzufügen können. Ein Ansatz besteht darin, dies inline innerhalb eines HTML-Dokuments zu tun. Der andere Weg besteht darin, es als separate Datei hinzuzufügen. Diese Datei wird zusammen mit dem HTML-Dokument heruntergeladen.
In diesem Tutorial werden wir im Detail untersuchen, wie Sie JavaScript zu HTML hinzufügen können unter Verwendung dieser beiden Methoden.
Wie man JavaScript inline zu HTML-Dokumenten hinzufügt
Zuerst werden wir sehen, wie Sie JavaScript inline zu einem HTML-Dokument hinzufügen können. Dazu müssen Sie das dedizierte HTML-Tag verwenden. Es lautet <script>. Dieses Tag umschließt den JavaScript-Code. Sie können das Tag an einer beliebigen Stelle in Ihrem gesamten HTML-Markup platzieren. Wo Sie es platzieren, hängt davon ab, wann das JavaScript geladen werden soll.
Sie können es beispielsweise im <head>-Bereich, im <body>-Bereich oder sogar nach dem schließenden </body>-Tag platzieren. Wenn Sie das JavaScript vom Hauptinhalt des HTML-Codes fernhalten möchten, ist es besser, das Tag im <head>-Bereich zu platzieren. Dieser wird den JavaScript-Code enthalten. Andererseits möchten Sie vielleicht, dass Ihr JavaScript-Code innerhalb des Layouts Ihrer Webseite ausgeführt wird. In diesem Fall sollten Sie das Tag im <body>-Bereich platzieren. Dies tun Sie beispielsweise, wenn Sie document.write verwenden, um Inhalte zu generieren.
Ein besseres Verständnis hierfür liefert ein Beispiel mit Code. Betrachten Sie das folgende leere HTML-Dokument. Der Browsertitel dieses Dokuments lautet Today’s Date:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> </head> <body> </body> </html> |
Wie Sie sehen können, gibt es hier keine Spur von JavaScript. Das Dokument enthält bisher nur das HTML-Markup. Nun möchten wir etwas JavaScript-Code inline hinzufügen, damit er gleichzeitig geladen und ausgeführt wird. Betrachten Sie das folgende Stück JavaScript-Code:
|
1 2 |
let d = new Date(); alert("Today's date is " + d); |
Gemäß dem obigen Code ermöglichen wir es unserer Webseite, einen Alert mit dem heutigen Datum anzuzeigen. Unabhängig davon, wann der Besucher die Website aufruft, zeigt die Seite also das aktuelle Datum an.
Um dieses Stück JavaScript-Code nun zum HTML-Dokument hinzuzufügen, verwenden wir das <script>-Tag. Zunächst müssen Sie den JavaScript-Code zwischen den <head>-Tags einfügen. Dies teilt der Webseite mit, dass dieser bestimmte Code vor dem anderen Inhalt der Seite geladen werden muss. Sie können den Code unter den <title>-Tags einfügen. So gehen Sie dabei vor:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Heutiges Datum</title> <script> let d = new Date(); alert("Das heutige Datum ist " + d); </script> </head> <body> </body> </html> |
Ihr JavaScript-Code ist nun hinzugefügt. Ihre Webseite wird ausgeführt und lädt dieses Skript vor dem Rest der Seite. Wenn Sie Ihre Website starten, erhalten Sie eine Benachrichtigung mit dem aktuellen Datum, etwa so:
So würden Sie den Code in den <head>-Bereich des HTML-Dokuments einfügen. Die Alternative wäre, das Skript entweder innerhalb oder außerhalb der <body>-Tags einzufügen. Wie Sie im folgenden Beispiel sehen werden, fügen wir das kleine Stück Code nach dem <head>-Bereich ein:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Heutiges Datum</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>Das heutige Datum ist " + d + "</h1>" </script> </body> </html> |
Als Ergebnis dieser Änderung sehen Sie beim Neuladen der Seite etwa Folgendes:
So fügen Sie JavaScript zu HTML mit einer separaten JavaScript-Datei hinzu
Kleine JavaScript-Skripte funktionieren gut mit HTML-Dateien. Das liegt daran, dass sie in ihrer Gesamtheit auf einer Seite oder weniger ausgeführt werden. Wenn Sie mit größeren Skripten arbeiten, die sich über mehrere Seiten erstrecken, kann die Datei sehr unübersichtlich werden. Aus diesem Grund müssen Sie sie möglicherweise als separate JavaScript-Datei hinzufügen. Die Datei wird dann gleichzeitig mit dem HTML-Dokument geladen.
In diesem Abschnitt besprechen wir, wie Sie JavaScript mithilfe einer separaten Datei zu HTML hinzufügen können. Der Code ist normalerweise in einer oder mehreren .js-Dateien untergebracht. Das HTML-Dokument verweist auf diese Dateien wie auf jede andere externe Ressource. Es gibt viele Gründe, warum Sie eine separate JavaScript-Datei verwenden sollten. Vor allem macht es den Code viel einfacher zu lesen und zu verstehen. Ganz zu schweigen davon, dass separate Dateien ein schnelles Laden der zwischengespeicherten Seiten ermöglichen und zudem relativ einfacher zu warten sind.
Um von diesen Vorteilen zu profitieren, müssen Sie wissen, wie Sie die beiden miteinander verbinden – die JavaScript-Datei und das HTML-Dokument. Zum besseren Verständnis nehmen wir das Beispiel eines kleinen Webprojekts. Dieses vermeintliche Projekt enthält eine Hauptdatei index.html im Stammverzeichnis, style.css im Verzeichnis css/ und script.js im Verzeichnis js/. Hier ist unser kleines Projekt:
|
1 2 3 4 5 6 7 8 9 10 11 |
project/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
Für unser HTML-Markup verwenden wir das Dokument, das wir zuvor verwendet haben:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Heutiges Datum</title> </head> <body> </body> </html> |
Da wir nun unsere beiden Dokumente haben, können wir damit beginnen, sie zu verbinden. Wir müssen den JavaScript-Code bezüglich des Datums zur Datei script.js hinzufügen. Sie fügen ihn wie folgt als <h1>-Überschrift hinzu:
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>Das heutige Datum ist " + d + "</h1>" |
Um den Code mit dem HTML-Dokument zu verbinden, fügen Sie einen Verweis auf das Skript hinzu. Der Verweis sollte sich entweder innerhalb oder unterhalb des <body>-Bereichs der HTML-Vorlage befinden. Hier ist der Code, den Sie hier verwenden werden:
|
1 |
<script src="js/script.js"></script> |
Wie Sie sehen können, verwenden wir das <script>-Tag. Das Tag verweist auf die Datei script.js, die sich im Verzeichnis js/ des Projekts befindet. So wird der Code im HTML-Dokument dargestellt:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Heutiges Datum</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
Wenn Sie möchten, können Sie einige stilistische Änderungen vornehmen, um Ihre Seite aufzupeppen. Fügen wir zum Beispiel dem <h1>-Header etwas Hintergrundfarbe hinzu. Diese Bearbeitung nehmen wir in der Datei style.css vor:
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
Da die Änderung im Header angezeigt werden soll, verweisen wir im <head>-Bereich des HTML-Dokuments darauf. So verweisen Sie auf diese CSS-Datei:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Heutiges Datum</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
Nachdem wir nun die erforderlichen Verweise erstellt haben, können Sie die Änderungen visualisieren. Laden Sie die index.html in Ihrem Browser und Sie sehen eine Seite wie diese:
Wenn Sie den Code aktualisieren möchten, können Sie alle Ihre Seiten von einem einzigen Ort aus bearbeiten. Dies macht die Wartung der Webseiten sehr einfach. Das ist der Vorteil der Verwendung einer separaten Datei für Ihre JavaScript-Skripte.
Fazit
Hoffentlich hat Ihnen dieses Tutorial geholfen, mehr über den Prozess des Hinzufügens von JavaScript zu HTML zu erfahren. Wir haben behandelt, wie man dies inline in ein HTML-Dokument einfügt und wie man es als .js-Datei hinzufügt. Da Sie nun die Grundlagen kennen, können Sie mit JavaScript in HTML noch viel mehr tun.
Hier sind einige Ressourcen aus unserem Blog, die Ihnen helfen werden, JavaScript weiter zu nutzen:
- Wenn Sie Ihre eigene Webanwendung erstellen, werfen Sie einen Blick auf unseren Leitfaden zur Auswahl des besten Server-Setups.
- Wenn Sie lernen möchten, wie Sie einen Blog mit Ghost einrichten, werfen Sie einen Blick auf dieses Tutorial.
- Werfen Sie einen Blick auf dieses Tutorial, um zu erfahren, wie Sie Node.js auf Ubuntu 18.04 installieren.
Viel Spaß beim Programmieren!
Kommentare
Noch keine Kommentare. Schreiben Sie den ersten.