Das Erstellen von Webseiten erfordert die kompetente Verwendung von Programmiersprachen wie HTML, CSS und JavaScript. Manchmal können Skripte jedoch die Ursache für überladenen Code sein, der es schwierig macht, ihn zu lesen und weiter zu warten. Das Einfügen von JavaScript in eine externe Datei ist eine Möglichkeit, die Webentwicklung zu vereinfachen und die Projekteffizienz zu verbessern.

Wenn Sie den Code in einer separaten Datei ausgeben, können Sie einen separaten Speicher für alle Skripts erstellen, um die Wiederverwendung und die Wartung zu gewährleisten. Außerdem können Sie das Haupt-HTML-Dokument von der Last befreien, die Serverlast ausgleichen und die Seitenlast für die Benutzer verbessern.

Um die Skripte in eine externe Datei auszugeben, müssen Sie eine separate Datei mit der Erweiterung erstellen.js und migrieren Sie alle erforderlichen Skripte hinein. Diese Datei wird dann mit einem Tag mit dem src-Attribut an die HTML-Seite angehängt, das den Pfad zur externen JavaScript-Datei angibt. Vergessen Sie nicht, auch ein schließendes Tag hinzuzufügen. Zum Beispiel:

Es ist wichtig zu beachten, dass das schließende Tag nur in XHTML benötigt wird, es wird jedoch empfohlen, es immer für HTML 5 zu verwenden. Sobald eine externe Datei angeschlossen ist, funktionieren die Skripte genauso wie beim Schreiben innerhalb einer HTML-Seite, aber die Skripte selbst sind nicht mehr im HTML-Code vorhanden, was das Verständnis und die Wartung erheblich erleichtert.

• Erstellen Sie eine Datei mit der Erweiterung .js und speichere den gesamten JavaScript-Code darin. Verbinden Sie diese Datei dann mithilfe eines Tags mit der HTML-Seite
• Verwenden Sie einen Paketmanager wie npm oder yarn, um Abhängigkeiten zu verwalten und alle Skriptdateien zu einem zu kombinieren. Dann wird nur diese zusammengeführte Datei an die HTML-Seite angehängt.

1. Geben Sie den Pfad zur Skriptdatei relativ zum aktuellen Verzeichnis an. Wenn sich das Skript beispielsweise im Unterordner scripts befindet, sieht der Pfad folgendermaßen aus: .
2. Vergessen Sie nicht, die Attribute type und charset im Tag anzugeben .

Auf diese Weise können Sie Skripte in separaten Dateien speichern und verwenden, wodurch sie leichter bearbeitet und auf verschiedenen Seiten Ihrer Website wiederverwendet werden können.

Verbinden einer externen Datei mit einer HTML-Seite

Um eine externe JavaScript-Datei mit einer HTML-Seite zu verknüpfen, müssen Sie ein Tag verwenden mit Attribut src den Dateipfad angeben:

Es ist wichtig zu beachten, dass die Verbindung einer externen Datei mit JavaScript-Code vor dem schließenden Tag empfohlen wird um die Seite optimal zu laden.

Derselbe Ansatz kann auch verwendet werden, um externe CSS-Dateien mit einer HTML-Seite zu verbinden. Dazu muss ein Tag verwendet werden mit Attribut href den Dateipfad angeben:

Hier Dateipfad.css ist ein relativer oder absoluter Pfad zu einer externen CSS-Datei auf dem Server.

Dadurch können Sie den Code in mehrere separate Dateien aufteilen, indem Sie externe Dateien mit einer HTML-Seite verbinden, um die Verwaltung und Aktualisierung des Codes zu vereinfachen und die Leistung zu verbessern und das Laden der Seite zu optimieren.

Verwenden des Attributs "src" für ein externes Skript

Dabei muss die externe Datei eine Erweiterung haben. "js" und enthält nur JavaScript-Code. Der gesamte Code, der zwischen dem öffnenden und dem schließenden Tag liegt, wird ignoriert. Stattdessen wird der Browser den Code aus einer externen Datei herunterladen und ausführen.

Die Verwendung des Attributs "src" für ein externes Skript hat mehrere Vorteile:

• Verbesserung der Lesbarkeit und Verwaltbarkeit von Code. Indem Sie ein Skript in eine externe Datei einfügen, können Sie den Code in logische Blöcke aufteilen, was das Verständnis und die Wartung des Skripts erleichtert.
• Caching. Wenn Sie das Attribut "src" verwenden, lädt der Browser eine externe Datei herunter und speichert sie zwischen, wodurch das Laden der Seite bei wiederholten Besuchen von Benutzern beschleunigt wird.
• Einfache Aktualisierung. Wenn Sie das Skript aktualisieren müssen, genügt es, nur die externe Datei zu ändern, und der Rest des Codes bleibt unverändert.

Es ist wichtig zu beachten, dass die Reihenfolge, in der Skripts geladen und ausgeführt werden, ein wichtiger Parameter sein kann. Wenn Sie ein externes Skript mit dem Attribut "src" verwenden, lädt der Browser die Skripte nacheinander in der Reihenfolge, in der sie im Code angegeben sind, herunter. Wenn Sie also Abhängigkeiten zwischen den Skripten haben, stellen Sie sicher, dass sie in der richtigen Reihenfolge verbunden sind.

Platzieren des Skripts vor dem schließenden Tag

Der Hauptvorteil des Platzierens des Skripts vor dem schließenden Tag es ermöglicht dem Browser, die Webseite vollständig zu laden, bevor das Skript ausgeführt wird. Dies ist besonders nützlich, wenn ein Skript Zugriff auf bestimmte DOM-Elemente erfordert oder davon abhängt, andere Ressourcen wie Bilder oder Stile zu laden.

Das folgende Beispiel zeigt, wie das Skript vor dem schließenden Tag platziert wird :

Привет, мир!
Ваш контент здесь.

Es ist offensichtlich, dass das Skript vor dem schließenden Tag platziert wird verbessert die Leistung und optimiert das Laden einer Webseite. Wenn das Skript Zugriff auf DOM-Elemente erfordert oder von anderen Ressourcen abhängig ist, wird empfohlen, diesen Ansatz zu verwenden.