JavaScript-Datei mit HTML-Datei verknüpfen
-
Verwenden Sie das Tag
<script>und das Attributsrc, um ein externes JavaScript mit HTML zu verknüpfen -
Verwenden Sie das Tag
<script>, um ein internes JavaScript mit HTML zu verknüpfen
In diesem Artikel werden zwei Methoden zum Verknüpfen einer JavaScript-Datei mit einer HTML-Datei erläutert. Im ersten Prozess erstellen wir eine JavaScript-Datei und verlinken die Dateien extern. Im zweiten Prozess fügen wir JavaScript-Code in ein HTML-Dokument ein.
Verwenden Sie das Tag <script> und das Attribut src, um ein externes JavaScript mit HTML zu verknüpfen
Wir verwenden das src-Attribut im <script>-Tag, um in dieser Methode die JavaScript-Datei mit der HTML-Datei zu verknüpfen. Das Attribut src wird verwendet, um die URL oder den Dateispeicherort der externen Datei anzugeben. Wenn wir dasselbe JavaScript auf mehreren Seiten einer Website verwenden möchten, müssen wir eine externe JavaScript-Datei erstellen, anstatt immer wieder dasselbe zu schreiben. Wir schreiben das <script> in das <head>-Tag in HTML. Nachdem wir die Skriptdatei mit der Erweiterung .js gespeichert haben, verweisen wir darauf, indem wir das Attribut src im Tag <script> verwenden.
Erstellen Sie beispielsweise zwei Dateien, eine HTML- und eine JavaScript-Datei. Schreiben Sie etwas JavaScript in die JS-Datei und etwas HTML in die HTML-Datei. Vergessen Sie nicht, die Erweiterungen .html und .js zu verwenden, nachdem Sie die beiden Dateien jeweils beim Speichern benannt haben. Legen Sie diese beiden Dateien in denselben Ordner. Schreiben Sie den JavaScript-Dateinamen in das src-Attribut des <script>-Tags in der HTML-Datei. Wenn Ihr Dateiname beispielsweise hello.js lautet, schreiben Sie <script src="hello.js"> </script>.
Das folgende Beispiel veranschaulicht eine Methode zum Verknüpfen einer JavaScript-Datei mit einer HTML-Datei. Wir schrieben This is HTML in die HTML-Datei und This is written from JavaScript in die JavaScript-Datei. Wie wir in beiden Texten im Ausgabeabschnitt unten sehen können, beweist es, dass JavaScript mit dem HTML verknüpft ist.
Beispielcode:
<html>
<head>
<script src="hello.js"> </script>
</head>
<body>
<p> This is HTML</p>
</body>
</html>
document.write('This is written from JavaScript');
Ausgabe:
Verwenden Sie das Tag <script>, um ein internes JavaScript mit HTML zu verknüpfen
Im Gegensatz zur ersten Methode fügen wir den Code von JavaScript in die HTML-Datei mit dem Tag <script> ein. Das Tag <script> wird verwendet, um ein clientseitiges Skript hinzuzufügen. Wir können das JavaScript intern in das <script>-Tag in eine HTML-Datei schreiben. Wenn wir die HTML-Datei ausführen, sehen wir, dass das JavaScript geladen ist.
Schreiben Sie zum Beispiel den Text This is HTML in das <p>-Tag in HTML. Öffnen Sie dann das Tag <script> und geben Sie mit document.write die Meldung This is written from JavaScript ein. Schließen Sie dann das script-Tag.
Wir können sehen, dass sowohl in HTML als auch in JavaScript geschriebene Texte in der Ausgabe unten angezeigt werden. Es beweist, dass HTML und JavaScript verlinkt wurden.
Beispiel:
<html>
<head>
</head>
<body>
<p> This is HTML </p>
</body>
<script>
document.write("This is written from JavaScript");
</script>
</html>
Ausgabe:
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn