So erstellen und verwenden Sie externe JavaScript-Dateien

Das direkte Platzieren von JavaScripts in der Datei, die den HTML-Code für eine Webseite enthält, ist ideal für kurze Skripts, die beim Erlernen von JavaScript verwendet werden. Wenn Sie mit dem Erstellen von Skripten beginnen, um wichtige Funktionen für Ihre Webseite bereitzustellen, kann die Menge an JavaScript jedoch sehr groß werden. Das Einfügen dieser umfangreichen Skripten direkt in die Webseite wirft zwei Probleme auf:

• Dies kann sich auf das Ranking Ihrer Seite bei den verschiedenen Suchmaschinen auswirken, wenn das JavaScript einen Großteil des Seiteninhalts ausmacht. Dies verringert die Häufigkeit der Verwendung von Schlüsselwörtern und Phrasen, die angeben, worum es bei dem Inhalt geht.
• Dadurch wird es schwieriger, dieselbe JavaScript-Funktion auf mehreren Seiten Ihrer Website wiederzuverwenden. Jedes Mal, wenn Sie es auf einer anderen Seite verwenden möchten, müssen Sie es kopieren und in jede weitere Seite einfügen sowie alle Änderungen, die für den neuen Speicherort erforderlich sind. 

Es ist viel besser, wenn wir das JavaScript von der Webseite, auf der es verwendet wird, unabhängig machen.

Auswählen des zu verschiebenden JavaScript-Codes

Glücklicherweise haben die Entwickler von HTML und JavaScript eine Lösung für dieses Problem bereitgestellt. Wir können unsere JavaScripts von der Webseite entfernen und haben trotzdem die gleiche Funktion.

Das erste, was wir tun müssen, um ein JavaScript außerhalb der Seite, die es verwendet, zu erstellen, ist, den tatsächlichen JavaScript-Code selbst (ohne die umgebenden HTML-Skript-Tags) auszuwählen und in eine separate Datei zu kopieren.

Wenn sich zum Beispiel das folgende Skript auf unserer Seite befindet, würden wir das Teil in Fettdruck auswählen und kopieren:

var hello = 'Hallo Welt';
document.write (hallo);

Früher war es üblich, JavaScript in einem HTML-Dokument in Kommentar-Tags zu platzieren, um zu verhindern, dass ältere Browser den Code anzeigen. Neue HTML-Standards schreiben jedoch vor, dass Browser den Code in HTML-Kommentar-Tags automatisch als Kommentar behandeln sollen. Dies führt dazu, dass Browser Ihr Javascript ignorieren. 

Wenn Sie HTML-Seiten von einer anderen Person mit JavaScript in Kommentar-Tags geerbt haben, müssen Sie die Tags nicht in den von Ihnen ausgewählten und kopierten JavaScript-Code einfügen.

Sie kopieren beispielsweise nur den fett gedruckten Code und lassen die HTML-Kommentar-Tags im folgenden Codebeispiel weg:

Speichern von JavaScript-Code als Datei

Nachdem Sie den JavaScript-Code ausgewählt haben, den Sie verschieben möchten, fügen Sie ihn in eine neue Datei ein. Geben Sie der Datei einen Namen, der angibt, was das Skript tut, oder geben Sie die Seite an, zu der das Skript gehört.

Geben Sie die Datei ein .js Suffix, damit Sie wissen, dass die Datei JavaScript enthält. Zum Beispiel könnten wir verwenden hallo.js als Name der Datei zum Speichern des JavaScript aus dem obigen Beispiel.

Verknüpfung mit dem externen Skript

Nachdem wir unser JavaScript kopiert und in einer separaten Datei gespeichert haben, müssen wir nur noch auf die externe Skriptdatei in unserem HTML-Webseitendokument verweisen.

Löschen Sie zunächst alles zwischen den Skript-Tags: