Javascript mit Javascript-Datei einbinden

Externe Programmierung hinzufügen

Im vorherigen Artikel wurde präsentiert, wie man Javascript als Code direkt in HTML-Dateien integrieren kann, nun gehen wir noch einen Schritt weiter. Nehmen wir an, es gibt sehr viele Javascript-Befehle, dann macht es wenig Sinn, diese im HTML-Code zu belassen, denn dieser wird lange und unlesbar.

Die bessere Variante ist daher, den Javascript-Code in eine eigene Datei auszulagern und diese per Befehl im Kopfteil zu definieren. Es muss aber nicht immer im Kopfteil sein, weil es gibt viele Aufrufe externer Skripten am Ende der Seite.

Javascript-Datei in die Webseite einbauen

Das Beispiel zeigt den simplen Aufbau einer HTML-Seite, bei der allerdings im Kopfteil die Javascript-Datei benannt wurde. Da dieser Aufruf im Kopfteil der Seite erfolgt ist, wird die Javascript-Datei mitgeladen, wenn diese Seite geladen wird. Etwaige Aufrufe an das Javascript-Skript gehen daher nicht ins Leere, sondern werden verarbeitet, als ob der Code im eigentlichen HTML-Dokument enthalten wäre.

Mit der gleichen Technik werden CSS-Dateien für die Formatierung nachgeladen und mit der gleichen Überlegung operieren auch dynamische Sprachen wie PHP & Co., wenn sie externe Dokumente für die Navigation oder andere Funktionen nachladen.

Der große Vorteil dieser Technik besteht darin, dass man lange Javascript-Abfolgen nicht im HTML-Dokument abbilden muss und damit viel Platz im Quellcode spart. Die Übersichtlichkeit ist auch gegeben und man kann sich beim HTML-Dokument auf die Webseite und beim Javascript-Dokument auf die Programmierung der Funktionen konzentrieren.

Nicht nur der Kopfteil ist möglich

Viele Anwendungen werden von externer Seite betrieben und in die Webseite eingebunden. Ein oft gewähltes Beispiel ist das Statistikangebot von Google Analytics oder von anderen alternativen Anbietern. Diese Aufrufe, oft ein Einzeiler mit der Adresse der Datei, wird am Ende der Seite eingetragen. Das hat den Grund, dass zuerst die Seite selbst geladen wird, bevor externe Funktionen aufgerufen werden. Da die Server immer schneller arbeiten, fällt das gar nicht groß auf.

Lesen Sie auch

Javascript ist eine optimale Ergänzung zu HTML, allerdings gibt es für gewisse Bereiche schon bessere Lösungen wie etwa Formularabfragen per PHP und so manche grafische Lösung per CSS. Der Einstieg in Javascript gelingt recht rasch, kleine Lösungen sind auch bald realisiert, man muss Javascript aber richtig einbinden, um dann mit den Variablen arbeiten zu können.

Hat man die Variablen erst einmal verstanden und auch mit alert die ersten Meldungen zustande gebracht, gilt es, komplexer zu denken. Mit den Schleifen, Abfragen und Funktionen stehen viele Möglichkeiten zur Verfügung.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel