Gedanken: Lightyears entfernt!

Javascript Module Einbinden

Erstellt:20.07.2020 10:00:00 Update:20.07.2020 14:00:00

Da unser Javascript Quellcode größer wird ist es sinnvoll, einzelne Problemlösungen in externe Module aufzuteilen. Per Standard kann man den Javascript Quellcode im Header der HTML-Datei oder aber an jedem beliebigen Ort innerhalb des Body’s plazieren. Wir entschließen uns für das Auslagern des Quellcodes. Dazu werden im Header der HTML-Datei einige Quellcodezeilen benötigt. Dazu gehört im wesentlichen eine Funktion incude(„Path to Source Code“). Schauen wir und den Quellcode einmal an.

  • In Zeile 4 sehen wir ein auskommentiertes HTML Script-Tag. Aktiviert man dieses Tag, dann kann man das Framework für jQuery laden und auch verwenden. Wenn jemand seine Seiten mit WordPress hostet, kann man dies entfallen lassen, da WordPress jQuery selbst lädt.
  • In Zeile 14-34 wird eine Windows Eventlistener Funktion installiert, die auf den Event „Load“ reagiert. In dem Fall wird mit der Ausführung des Javascript Quellcodes, innerhalb der Funktion, so lange gewartet, bis alle Elemente der HTML Seite geladen sind.
  • In Zeile 17-26 ist die Funktion include() notiert. Sie hat einen Übergabeparameter „file“. Dies ist die URL der Javascript Quelldatei, die man hier Einfügen möchte.
  • In Zeile 19 wird der Objekt Variablen „script“ der Wert eines neu erstellten HTML Script-Tags zugewiesen.
  • In Zeile 20 wird dem Attribut „src“ des Script-Tags der Wert von „file“ übergeben, also der Pfad zur Quelldatei.
  • In Zeile 21 wird dem Attribut „type“ der MIME-Typ des Quellcodes zugewiesen.
  • In Zeile 22 wird dem Attribut „defer“ der Wert „true“ zugewiesen. Damit wird noch einmal definiert, dass erst alles auf der Seite geladen sein muss um den Quellcode auszuführen.
  • In Zeile 24 wird über das Objekt des HTML-Tag Namen „head“ und dem ersten Vorkommen des head-Tags in der HTML-Seite ein neues HTML Script Tag als Child angehängt.
  • In Zeile 29 + 32 wird jeweils über die Funktion „include()“, ein Javascript Quellcode Modul, aus dem aktuellen Verzeichnis „./“ und mit den Namen „init.js“ und „JulianDate.js“ angehängt.

Der Quelltext-Snippet als Download: Javascript-Quelltext zum Hinzufügen von Javascript Modulen

Ausblick:

Als Nächstes befassen wir uns mit der Initialisierung der für die Datumsberechnung notwendigen Objekte, Variablen und Einstellungen. Dazu gehört auch die automatische- Ermittlung und Voreinstellung der Timezone und Sommer/Winterzeit, Berechnungsstart bei einem Klick auf den Button „Berechnen“, löschen von Ausgabefeldern und Behandlung der Radio Buttons für die Manuelle- und Automatische Berechnung.

Zurück
 Drucke diesen Beitrag Drucke diesen Beitrag