Einführung
JavaScript, auch mit JS abgekürzt, ist eine Programmiersprache, die in der Webentwicklung verwendet wird. JavaScript ist neben HTML und CSS eine der Kerntechnologien des Webs und wird verwendet, um Webseiten interaktiv zu gestalten und Web-Apps zu erstellen. Moderne Webbrowser, die den gängigen Anzeigestandards entsprechen, unterstützen JavaScript über integrierte Engines, ohne dass zusätzliche Plug-ins erforderlich sind.
Wenn Sie mit Dateien für das Web arbeiten, muss JavaScript geladen und zusammen mit HTML-Markup ausgeführt werden. Dies kann entweder in einem HTML-Dokument 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 einbinden, sowohl inline in ein HTML-Dokument als auch als separate Datei.
Hinzufügen von JavaScript zu einem HTML-Dokument
Sie können einem HTML-Dokument JavaScript-Code hinzufügen, indem Sie das dedizierte HTML-Tag<script> verwenden, das den JavaScript-Code umschließt.
Das Tag<script> kann im Abschnitt<head> Ihres HTML-Codes, im Abschnitt<body> oder nach dem Tag</body> platziert werden, je nachdem, wann Sie das JavaScript verwenden möchten Belastung.
Im Allgemeinen kann JavaScript-Code in den Abschnitt des Dokuments<head>eingefügt werden, um ihn im Hauptinhalt Ihres HTML-Dokuments zu halten.
Wenn Ihr Skript jedoch an einem bestimmten Punkt im Layout einer Seite ausgeführt werden muss - beispielsweise wenn Siedocument.write zum Generieren von Inhalten verwenden - sollten Sie es an der Stelle platzieren, an der es aufgerufen werden soll, normalerweise innerhalb von<body> Sektion.
Betrachten wir das folgende leere HTML-Dokument mit einem Browsertitel vonToday's Date:
index.html
Today's Date
Derzeit enthält diese Datei nur HTML-Markup. Angenommen, wir möchten dem Dokument den folgenden JavaScript-Code hinzufügen:
let d = new Date();
alert("Today's date is " + d);Auf diese Weise kann die Webseite eine Warnung mit dem aktuellen Datum anzeigen, unabhängig davon, wann der Benutzer die Site lädt.
Um dies zu erreichen, fügen wir der HTML-Datei ein<script>-Tag zusammen mit etwas JavaScript-Code hinzu.
Zunächst fügen wir den JavaScript-Code zwischen die<head>-Tags ein und signalisieren dem Browser, das JavaScript-Skript auszuführen, bevor er auf dem Rest der Seite geladen wird. Wir können das JavaScript beispielsweise unter den Tags<title>hinzufügen, wie unten gezeigt:
index.html
Today's Date
Sobald Sie die Seite geladen haben, erhalten Sie eine Warnung, die ungefähr so aussieht:
Sie können auch experimentieren, indem Sie das Skript entweder innerhalb oder außerhalb der<body>-Tags platzieren und die Seite neu laden. Da es sich nicht um ein robustes HTML-Dokument handelt, werden Sie wahrscheinlich keinen Unterschied beim Laden der Seite bemerken.
Wenn wir ändern würden, was im HTML-Text angezeigt wird, müssten wir dies nach dem Abschnitt<head> implementieren, damit es auf der Seite angezeigt wird, wie im folgenden Beispiel:
index.html
Today's Date
Die Ausgabe für das obige HTML-Dokument, das über einen Webbrowser geladen wird, sieht folgendermaßen aus:
Kleine Skripte oder Skripte, die nur auf einer Seite ausgeführt werden, können in einer HTML-Datei problemlos funktionieren. Bei größeren Skripten oder Skripten, die auf vielen Seiten verwendet werden, ist dies jedoch keine besonders effektive Lösung, da das Einfügen unhandlich oder schwer lesbar werden kann und zu verstehen. Im nächsten Abschnitt wird erläutert, wie eine separate JavaScript-Datei in Ihrem HTML-Dokument behandelt wird.
Arbeiten mit einer separaten JavaScript-Datei
Um größere Skripte oder Skripte aufzunehmen, die auf mehreren Seiten verwendet werden, befindet sich JavaScript-Code im Allgemeinen in einer oder mehrerenjs-Dateien, auf die in HTML-Dokumenten verwiesen wird, ähnlich wie auf externe Assets wie CSS verwiesen wird.
Die Verwendung einer separaten JavaScript-Datei bietet folgende Vorteile:
-
Trennen Sie das HTML-Markup und den JavaScript-Code, um beide einfacher zu gestalten
-
Separate Dateien erleichtern die Wartung
-
Wenn JavaScript-Dateien zwischengespeichert werden, werden die Seiten schneller geladen
Erstellen Sie ein kleines Webprojekt, um zu veranschaulichen, wie Sie ein JavaScript-Dokument mit einem HTML-Dokument verbinden. Es besteht ausscript.js im Verzeichnisjs/,style.css im Verzeichniscss/ und einem Hauptteilindex.html im Stammverzeichnis des Projekts.
project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.htmlWir können mit unserer vorherigen HTML-Vorlage aus dem obigen Abschnitt beginnen:
index.html
Today's Date
Verschieben wir nun unseren JavaScript-Code, der das Datum als<h1>-Header anzeigt, in diescript.js-Datei:
script.js
let d = new Date();
document.body.innerHTML = "Today's date is " + d + "
"Wir können dem Abschnitt<body> mit der folgenden Codezeile einen Verweis auf dieses Skript hinzufügen oder darunter:
Das<script>-Tag zeigt auf diescript.js-Datei imjs/-Verzeichnis unseres Webprojekts.
Schauen wir uns diese Zeile im Kontext unserer HTML-Datei an, in diesem Fall unterhalb des Abschnitts<body>:
index.html
Today's Date
Zuletzt bearbeiten wir auch diestyle.css-Datei, indem wir dem<h1>-Header eine Hintergrundfarbe und einen Hintergrundstil hinzufügen:
style.css
body {
background-color: #0080ff;
}
h1 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}Wir können auf diese CSS-Datei im Abschnitt<head> unseres HTML-Dokuments verweisen:
index.html
Today's Date
Mit JavaScript und CSS können wir jetzt die Seiteindex.htmlin den Webbrowser unserer Wahl laden. Es sollte eine Seite angezeigt werden, die der folgenden ähnelt:
Nachdem wir das JavaScript in eine Datei eingefügt haben, können wir es auf die gleiche Weise von zusätzlichen Webseiten aus aufrufen und alle an einem einzigen Ort aktualisieren
Fazit
In diesem Tutorial wurde erläutert, wie Sie JavaScript in Ihre Webdateien integrieren, sowohl inline in ein HTML-Dokument als auch als separate.js-Datei.
Von hier aus können Sie lernen, wie Sie mitJavaScript Developer Console undhow to write comments in JavaScript arbeiten.