HTML5-Tutorium: JavaScript: Hello World 06

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3 (zu größeren Teilen überprüft)

Umfang: 4 (unwichtige Fakten fehlen)

Quellenangaben: 3 (wichtige Quellen vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 3 (gut)

Vorlesung WebProg

Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6

Musterlösung: index.html, [(SVN-Repository)

Anwendungsfälle (Use Cases)

Gegenüber dem dritten Teil des Tutoriums ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.

In diesem Teil des Tutoriums geht es darum, die Anwendung besser zu strukturieren, d. h. zu modularisieren.

Modularisierung

Eine Anwendung, wie z. B. ein HTML5-Spiel, besteht aus diversen unterschiedlichen Komponenten mit ganz unterschiedlichen Aufgaben. Bei einem HTML5-Spiel müssen die Spielfiguren, die Spielszenen, die Spiellogik, die Benutzereingaben, die Darstellung das Spiels im Browser etc. erstellt und verwaltet werden, wobei das Erstellen und Verwalten teilweise während der Spiel-Entwicklung und teilweise während der Spiel-Ausführung (Runtime) erfolgt. An der Entwicklung eines Spiels sind üblicherweise mehrere oder gar viele Entwickler gleichzeitig beteiligt. Oft müssen einzelnen Komponenten an neue Endgeräte oder Betriebssysteme angepasst werden. Beispielsweise muss eine Tastatursteuerung durch eine Touch- oder Gestensteuerung ersetzt werden, wenn das Spiel auf einem Smartphone oder Tablet laufen soll.

Das alles ist nur machbar, wenn man die Anwendung modularisiert, d. h. in kleine, möglichst unabhängige Komponenten unterteilt. Ein großer Feind der Modularisierung sind globale Variablen und Funktionen. Je mehr Dateien von unterschiedlichen Autoren erstellt werden, desto größer ist die Gefahr, dass es zu Namenskollisionen kommt. Daher gilt der Grundsatz: Verwende so wenig globale Größen wie möglich.

Erstellen eines neuen Projektes

Erstellen Sie ein neues Projekt „HelloWorld04“ und legen Sie dieses in Ihrem Repository ab. Kopieren Sie anschließend alle Dateien aus dem dritten Teil des Tutoriums, passen Sie den Titel in der HTML-Datei an und committen Sie abermals.

Erstellen einer Ordnerstruktur

Grundsätzlich gilt auch bei der Programmierung: Ordnung ist das halbe Leben.

Web-Anwendungen werden sehr schnell sehr groß. Also sollte man sich eine geeignete Ordnerstruktur überlegen. Üblicherweise legt man CSS-Dateien in einen Ordner namens „css“ und JavaScript-Dateien in einen Ordner namens „js“ oder „lib“. Sollten es viele CSS- und/oder JavaScript-Dateien werden, legt man im entsprechenden Ordner geeignete Unterordner an.

Legen Sie im Root-Verzeichnis Ihres Projektes folgende Ordner an:

• web: Der Inhalt dieses Ordners kommt später auf einen echten Web-Server.
• web/css: Hier werden die CSS-Dateien der Web-Anwendung gespeichert. In diesem Ordner können zur weiteren Strukturierung Unterordner angelegt werden.
• web/js: Hierher kommt die Datei „main.js“, die für den Start der Web-Anwendung zuständig ist. Üblicherweise liest sie eine JSON-Datei mit Initialwerten ein, die sie der Anwendung übergeben kann.
• web/js/app: Hier speichern Sie die von Ihnen geschriebenen JavaScript-Dateien Ihrer Web-Anwendung. In diesem Ordner werden üblicherweise Unterordner zur weiteren Strukturierung der Anwendung angelegt.
• web/js/lib: Hier speichern Sie die JavaScript-Bibliotheken, die andere JavaScript-Entwickler erstellt haben und die Sie in Ihrer Anwendung einsetzen. Für jede externe Bibliothek gibt es einen Unterordner.

Fremde Bibliotheken sind nicht unbedingt fehlerfrei und können durchaus auch unsauberen Code enthalten. Damit Ihnen bei einem Commit diese Fehler nicht angezeigt werden, schließen Sie den Ordner „web/js/lib“ von der WebStorm-Fehlerüberwachung aus:

• Rechtklick auf den Ordner „web/js/lib“ → Mar Directory as → Excluded

Da in diesem Teil des Tutoriums fünf Web-Anwendungen mit jeweils unterschiedlichem Modularisierungsgrad erstellt werden, werden hier anstelle des Ordners „web/js/app“ fünf App-Ordner angelegt:

• web/js/app1: Aufteilung der App in mehrere Objekte und Dateien.
• web/js/app2: Definition einer Klasse Greet.
• web/js/app3: Reduktion der Konstanten in Greet.
• web/js/app4: Weitere Modularisierung der Web-App mit JavaScript-Bordmitteln.
• web/js/app5: Alternative Modularisierung der Web-App mit der JavaScript-Bibliothek RequireJS.

Öffnen Sie im Editorbereich die Datei „index.html“ und verschieben sie in den Ordner „web“, wobei Sie darauf achten sollten, dass im Verschiebe-Dialogfenster die Option „Search for references“ aktiviert ist. . Verschieben sie anschließend die Dateien „main.css“ und „main.js“ in die passenden Ordner „web/css“ bzw. „web/js“. Sie werden feststellen, dass die Verweise in den Link- und Script-Elementen der Datei „index.html“ automatisch angepasst werden. Verschieben Sie nun die Datei „index.html“ in den Ordner „web“.

Das Ergebnis dieser Aktion ist, dass Ihre Web-Anwendung nicht mehr im Root-Verzeichnis des Projektes liegt, sondern (sauber strukturiert) in unterschiedlichen Unterordnern. Daher ist es möglich, im Root-Verzeichnis des Projektes weitere projektspezifische Ordner und Dateien anzulegen wie „conf“ und „doc“, die später nicht auf den Web-Server, auf dem die Anwendung schließlich laufen soll, kopiert werden.

App1

Benennen Sie die Dateien „index.html“ und „main.js“ in „index1.html“ und „main1.js“ um. (Im Laufe des Tutoriums kommen weitere Versionen dieser beiden Dateien dazu.)

Laden der CSS- und der JavaScript-Dateien

Eine Web-Anwendung funktioniert nur – wie Sie bereits erfahren haben –, wenn nicht nur die HTML-Datei, sondern auch die zugehörigen CSS- und JavaScript-Dateien geladen werden. Allerdings gibt es dabei ein Problem: Die CSS- und JavaScript-Dateien werden im Laufe der Zeit immer zahlreicher und/oder größer. Diese Dateien zu laden, dauert seine Zeit.

In der aktuellen Version der Web-Anwendung stehen die Verweise auf diese Dateien im head-Bereich des Dokuments. Dieser wird vollständig geladen, bevor der body-Bereich eingelesen wird. Das heißt aber, dass der Browser keine Inhalte des HTML-Dokuments darstellen kann, solange er die JavaScript- und CSS-Dateien lädt. Wenn dies zu lange dauert, verliert der Besucher die Geduld und verlässt die Seite vorzeitig.

Besser wäre es daher andersherum vorzugehen: Es wird zuerst der body-Bereich geladen und dann die JavaScript- und die CSS-Dateien. Im Falle von JavaScript ist das durchaus sinnvoll, aber im Falle von CSS hat das den Effekt, dass der Browser noch keine Layout-Vorgaben erhalten hat, wenn er mit dem Rendern der Seite beginnt. Also verwendet er die browserspezifischen Defaultwerte. Das heißt, die Seite sieht zunächst ganz anders aus, als vom Designer geplant. Wenn dann die CSS-Dateien geladen wurden, wird die Seite erneut gerendert und verändert ihr Aussehen. Auch das ist verwirrend und wirkt unprofessionell.

Was also machen?

CSS-Dateien

Für CSS-Dateien empfiehlt Google ernsthaft, die Link-Element ganz ans Ende der HTML-Datei zu stellen, also nach dem schließenden html-Tag. Damit das Problem mit dem falschen Layout nicht auftritt, sollen wichtige CSS-Befehle direkt – d. h. als CSS-Befehle innerhalb eines style-Elements – in die HTML-Datei eingefügt werden.

Von beiden Vorschlägen rate ich dringend ab. Der erste Vorschlag ist nicht HTML-konform, ja noch nicht einmal SGML-konform. Es mag sein, dass diverse Browser diese Syntax verstehen, korrekt ist sie trotzdem nicht. Der zweite Vorschlag hat zur Folge, dass Struktur (HTML) und Layout (CSS) vermischt werden. Dies war einer der Kardinalfehler von frühen HTML-Versionen aus der Zeit, bevor es das CSS-Format gab. Tun Sie das nicht.

Gehen Sie so vor, wie es unter Multimedia-Programmierung: Best Practices beschrieben ist.

In unserer Anwendung haben wir bislang alles richtig gemacht, bis auf die fehlende automatische Komprimierung. Diese wird im fünften Teil des Tutoriums beschrieben.

JavaScript-Dateien

Für JavaScript-Dateien empfiehlt Google ebenfalls, diese nicht schon zu Beginn zu laden. Dieser Vorschlag ist sehr sinnvoll.

Entfernen Sie das script-Element aus dem HTML-Header-Bereich und fügen Sie es vor dem schließenden body-Tag ein:

   ...
   <script type="text/javascript" src="js/main1.js"></script>
</body>

Globale Funktionen als Methoden

Grundsätzlich sollten so wenige globale Funktionen wie möglich in einen JavaScript-Programm definiert werden, um Namenskonflikte mit JavaScript-Modulen und -Bibliotheken anderer Autoren zu vermeiden. In der Hello-World-Anwendung gibt es drei globale Funktionen: „sayHello“, „sayHelloOnEnter“ und „init“. Die ersten beiden werden in Methoden umgewandelt. Das heißt, es wird ein Objekt „greet“ erstellt, das diese beiden Methoden enthält. Die dritte Funktion „init“ wird durch eine anonyme Funktion ersetzt, die sofort ausgeführt wird.

Erstellen sie die Datei „js/app1/greet.js“ und fügen Sie ein weiteres Script-Element in die Datei „index1.html“ ein (vor dem Skript-Element, das „main1.js“ lädt):

   ...
  <script type = "text/javascript" src = "js/app1/greet.js"></script>
  <script type = "text/javascript" src = "js/main1.js"     ></script>
</body>

Fügen Sie in die Datei „greet.js“ ein Objekt ein, dass die beiden Methoden „sayHello“ und „sayHelloOnEnter“ enthält.

/**
 * @namespace greet
 * Contains methods to say hello to the user of the web app.
 */
var
  greet =
  {
    /**
     * Welcomes the user of the web app1 by displaying a welcome message
     * that includes his name. The name is fetched from a text input field.
     */
    sayHello:
      function()
      {
        document.getElementById('heading_hello').innerHTML =
          'Hello, ' + document.getElementById('input_name').value + '!';
        document.getElementById('section_form').classList.add('hidden');
        document.getElementById('section_hello').classList.remove('hidden');
      },

    /**
     * An keyboard event observer. It tests whether the enter key has been pressed.
     * If so, the greet method is activated. Default reactions of the browser are
     * disabled.
     * @param {KeyboardEvent} p_event - A standard JavaScript keyboard event object
     *   (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
     */
    sayHelloOnEnter:
      function(p_event)
      {
        if ((p_event.code === 'Enter' || p_event.keyCode === 13) &&
            document.activeElement === document.getElementById('input_name')
           )
        {
          p_event.preventDefault();
          p_event.stopPropagation();
          greet.sayHello();
        }
      }
  };

In der Datei „main1.js“ werden dagegen alle globalen Funktionen entfernt. Dies gilt auch für die Definition des Eventlisteners am Ende der Datei, der dafür sorgt, dass die Funktion „init“ ausgeführt wird, sobald die HTML-Seite sowie alle Unterseiten vollständig geladen wurden.

Die Funktion „init“ wird durch eine anonyme Funktion ersetzt, die sofort nach ihrer Definition auch ausgeführt wird. Da die Datei „main1.js“ als Letztes geladen wird, sind alle Objekte, auf die während der Initialisierung zugegriffen werden muss, bereits vorhanden.

// Initialize the app.
(function()
{
  document.getElementById('button_submit')
          .addEventListener('click', greet.sayHello);

  window.addEventListener('keydown', greet.sayHelloOnEnter);
}());

Testen Sie Ihre Anwendung und speichern Sie sie zu guter Letzt im Repository.

App2

Ein wesentliches Programmierprinzip ist das Prinzip der „Wiederverwendbarkeit“. Man sollte Code so schreiben, dass man ihn möglichst häufig wiederverwenden kann. Jede Wiederverwendung bereits bestehenden Codes bedeutet Arbeitsersparnis. Man kann mit einem einfachen Test überprüfen, ob man Code erstellt hat, der sogar innerhalb desselben Projektes wiederverwendbar ist. Man baut die neu erstellte Anwendung einfach zweimal in ein HTML-Dokument ein. Wenn beide „Instanzen“ der Anwendung unabhängig voneinander funktionieren, hat man alles richtig gemacht.

Zurzeit geht das bei unserer Anwendung noch nicht. Es gibt nämlich nur ein Objekt „greet“, das nicht für mehrere Anwendungen parallel eingesetzt werden kann. Wir müssen also bei Bedarf neue greet-Objekte erzeugen können. Das geschieht in JavaScript mit Hilfe von sogenannten Konstruktorfunktionen.

Erstellen Sie in Ihrem WebStorm-Projekt Kopien Ihre Anwendungsdateien:

• index1.html → index2.html
• js/main1.js → js/main2.js
• js/app1/greet.js → js/app2/greet.js

In der Datei „index2.html“ müssen Sie dafür sorgen, dass die neuen JavaScript-Dateien anstelle der alten geladen werden. Und passen Sie den Titel im HTML-Header an.

Das Objekt „greet“ der Datei „js/app2/greet.js“ wird durch der folgende Konstruktorfunktion „Greet“ ersetzt:

/**
 * @class
 * @classdesc Contains methods to say hello to the user of the web app.
 */
function Greet()
{
  var l_this = this; // this-hack: l_this contains the new object

  /**
   * Welcomes the user of the web app1 by displaying a welcome message
   * that includes his name. The name is fetched from a text input field.
   */
  l_this.sayHello =  // this.sayHello = ...
  function()
  {
    document.getElementById('heading_hello').innerHTML =
      'Hello, ' + document.getElementById("input_name").value + '!';

    document.getElementById('section_form').classList.add('hidden');
    document.getElementById('section_hello').classList.remove('hidden');
  };

  /**
   * An keyboard event observer. It tests whether the enter key has been pressed.
   * If so, the greet method is activated. Default reactions of the browser are
   * disabled.
   * @param {KeyboardEvent} p_event - A standard JavaScript keyboard event object
   *   (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
   */
  l_this.sayHelloOnEnter = // this.sayHelloOnEnter = ...
  function(p_event)
  {
    if ((p_event.code === 'Enter' || p_event.keyCode === 13) &&
         document.activeElement === document.getElementById('input_name')
       )
    {
      p_event.preventDefault();
      p_event.stopPropagation();
      l_this.sayHello();  // NOT this.sayHello();
    }
  }
}

In JavaScript kann jede Funktion auch als Konstruktor, d. h. zum Erzeugen von neuen Objekte verwendet werden, indem man das Schlüsselwort „new“ voranstellt:

var l_greet = new Greet();

In einer Konstruktorfunktion wird üblicherweise kein return-Befehl eingefügt, da sie sich wie eine Prozedur und nicht wie eine Funktion verhält. Sie erstellt – als Seiteneffekt – ein neues Objekt und initialisiert es. Allerdings wird dieses Objekt nirgendwo gespeichert, sondern – automatisch – als Ergebnis des Befehls new Greet() zurückgeliefert. Der Programmierer muss anschließend selbst dafür sorgen, dass das neu erzeugte Objekt direkt im Anschluss an dessen Erzeugung irgendwo gespeichert wird, in einer Variablen, in einem Array, in einem Objekt oder in einem Funktionsparameter. Im obigen Beispiel wird es in der Variablen „l_greet“ abgelegt.

Im Funktionsrumpf selbst kann über die Spezialvariable „this“ auf das neu erstellte Objekt zugegriffen werden. Dem neu erstellten Objekt werden mittels „this.sayHello = ...“ und „this.sayHelloOnEnter = ...“ etc. Attribute zugewiesen, die Funktionen (welche Methoden genannt werden) als Werte enthalten. Dem neu erstellten Objekt werden dieselben Methoden zugewiesen, wie dem Objekt „greet“ der Anwendung „App1“. Daher kann das mittels Konstruktorfunktion erstellte Objekt „l_greet“ auch genauso verwendet werden, wie das globale Objekt „greet“ der Anwendung „App1“.

Beachten Sie bitte, dass in der Definition der Konstruktorfunktion der so genannte This-Hack zum Einsatz kommt. Das Objekt this wird in einer lokalen Variablen l_this gespeichert. Und anschließend wird diese lokale Variable anstelle von this benutzt. Für die Definition der Attribute „sayHello“ und „sayHelloOnEnter“ macht es keinen Unterschied, ob man „this.sayHello = ...“ oder „l_this.sayHello = ...“ schreibt.

Allerdings wird auch innerhalb des Methodenrumpfes von „sayHelloOnEnter“ auf das neu erstellt Objekt zugegriffen: l_this.sayHello();. Und hier könnte nun nicht this.sayHello(); verwendet werden. Der Grund ist, dass der Methodenrumpf erst ausgeführt wird, wen die Methode „sayHelloOnEnter“ zu irgendeinem anderen Zeitpunkt von irgendeinem anderen Objekt aufgerufen wird. Und this bezeichnet bei „normalen“ Funktionsaufrufen (d. h. bei Aufrufen ohne das Schlüsselwort „new“) immer den Aufrufer der Methode, und nicht das Objekt, das die Methode beinhaltet. Aber im Aufrufer der Methode „sayHelloOnEnter“ ist die Methode „sayHello“ i. Allg. gar nicht definiert oder falls doch, dann meist mit einer vollkommen anderen Funktionalität. Die Spezialvariable „this“ verhält sich hier vollkommen anders als sämtliche andere Variablen und Parameter. (Fachsprachlich: In JavaScript ist die Variable „this“ dynamisch gebunden, alle übrigen Variablen sind statisch gebunden.) Daher kopiert man den Wert von „this“ in eine lokale Variable „l_this“, auf die die Methode „sayHelloOnEnter“ immer Zugriff hat, unabhängig davon, wer sie aufruft.

In der Anwendung „App1“ wurde der This-Hack nicht benötigt, da die Methode „sayHelloOnEnter“ einfach die globale Variable Methode „greet“ verwendet hat, um auf die Methode „sayHello“ zuzugreifen (greet.sayHello();). Aber ein globales Greet-Objekt gibt es nun nicht mehr. Es gibt nur noch einen globale Konstruktorfunktion „Greet“, mit der beliebig viele Greet-Objekte erzeugt werden können.

Tipp: Definieren Sie innerhalb einer Konstruktorfunktion immer eine lokale Variable „var l_this = this“ und verwenden Sie innerhalb des Konstruktors nur „l_this“ und nie „this“. (Sie können natürlich auch einen anderen Alternativnamen für „this“ verwenden. Übliche Bezeichnungen sind „that“, „self“ oder „me“.)

Anmerkung: Eigentlich ist der This-Hack unsauber. Besser wäre es, die Methode „bind“ zu verwenden (siehe MDN oder Stackoverflow):

this.sayHelloOnEnter =
  function(p_event)
  {
    ...
      this.sayHello();
    ...
  }.bind(this);

Aber für JavaScript-Anfänger ist die Verwendung des This-Hacks deutlich einfacher.

Fügen Sie als nächstes die zuvor erwähnte Zeile

var l_greet = new Greet();

als erste Zeile in Ihre Initialisierungsfunktion (Datei „main2.js“) ein und ersetzen Sie in derselben Funktion die beiden Zugriffe auf das globale Objekt „greet“ durch Zugriffe auf das lokale Objekt „l_greet“.

Danach sollte Ihre Anwendung (Datei „index2.html“) wieder wie gewohnt laufen.

App3

Leider bringt uns hinsichtlich der Wiederverwendbarkeit die „Verbesserung“, die wir in App2 gegenüber App1 vorgenommen haben, gar nichts. Wir können jetzt zwar beliebig viele greet-Objekte mit Hilfe von „new Greet()“ erstellen. Aber wir haben nichts davon, da alle diese Objekte dieselben HTML-Elemente im HTML-Dokument lesen und ändern. Das heißt, wir müssen die Konstanten und am Besten auch gleich noch die Zugriffe auf globale Variablen aus der Konstruktorfunktion „greet“ verbannen.

Erstellen Sie in Ihrem WebStorm-Projekt folgende Kopien Ihre Anwendungsdateien:

• index2.html → index3.html
• js/main2.js → js/main3.js
• js/app2/greet.js → js/app3/greet.js

In der Datei „index3.html“ müssen Sie wiederum dafür sorgen, dass die neuen JavaScript-Dateien anstelle der alten geladen werden. Und passen Sie auch wieder den Titel im HTML-Header an.

Ersetzen Sie nun die Konstruktorfunktion der Datei „js/app3/greet.js“ durch folgende Konstruktorfunktion:

/**
 * @class
 * @classdesc Contains methods to say hello to the user of the web app.
 *
 * @param p_document {object} 
 *        A DOM object (usually the global object <code>document</code>)
 * @param p_section_form {string} 
 *        The ID of the HTML element that contains the form section.
 * @param p_input_name string} 
 *        The ID of the text field via which the user passes her/his name.
 * @param p_section_hello {string} 
 *        The ID of the HTML element that contains the welcome section.
 * @param p_output_hello {string} 
 *        The ID of the HTML element into which the greeting is to be put.
 * @param p_hello {string} 
 *        The hello test to be displayed.
 */
function Greet(p_document,
               p_section_form, p_input_name,
               p_section_hello, p_output_hello,
               p_hello
              )
{
  var l_this = this; // this-hack

  /**
   * Welcomes the user of the web app1 by displaying a welcome message
   * that includes his name. The name is fetched from a text input field.
   */
  l_this.sayHello =
  function()
  {
    p_document.getElementById(p_output_hello).innerHTML =
      p_hello + ', ' + p_document.getElementById(p_input_name).value + '!';

    p_document.getElementById(p_section_form).classList.add('hidden');
    p_document.getElementById(p_section_hello).classList.remove('hidden');
  };

  /**
   * An keyboard event observer. It tests whether the enter key has been pressed.
   * If so, the greet method is activated. Default reactions of the browser are
   * disabled.
   * @param {KeyboardEvent} p_event - A standard JavaScript keyboard event object
   *   (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
   */
  l_this.sayHelloOnEnter =
  function(p_event)
  {
    if ((p_event.code === 'Enter' || p_event.keyCode === 13) &&
         p_document.activeElement === p_document.getElementById(p_input_name)
       )
    {
      p_event.preventDefault();
      p_event.stopPropagation();
      l_this.sayHello();  // NOT this.sayHello();
    }
  }
}

Dieser Konstruktor enthält diverse Konstanten nicht mehr, wie z. B. 'input_name'. Anstelle dessen gibt es diverse Parameter, in denen diese Werte dem Konstruktor übergeben werden können, wie z. B. p_input_name. Der Zugriff auf das globale Objekt „document“ wurde auch gleich noch durch einen Zugriff auf einen lokalen Parameter „p_document“ ersetzt.

Damit ist es jetzt möglich, greet-Objekte für ganz unterschiedliche HTML-Elemente zu definieren.

Ersetzen Sie zunächst die Initialisierungsmethode in der Datei „main3.js“ durch folgenden Code:

(function(p_window, Greet)
{
  var l_document = p_window.document, // The window object contains the document object.
      l_greet    = new Greet(l_document,
                             'section_form', 'input_name',
                             'section_hello', 'heading_hello',
                             'Hello'
                            );

  l_document.getElementById('button_submit')
            .addEventListener('click', l_greet.sayHello);

  p_window.addEventListener('keydown', l_greet.sayHelloOnEnter);
}(window, Greet));

In dieser Datei werden noch gibt es noch zwei globale Variablen, die Browser-Variable „window“ sowie die von uns definierte Konstruktorfunktion „Greet“. Diese beiden globalen Größen werden der anonymen Funktion als Argumente übergeben. Innerhalb des Rumpfes der Initialisierungsfunktion wird dann nicht mehr auf globale Größen zugegriffen, sondern nur noch auch Funktionsparameter. Dies ist ein übliches Vorgehen, um explizit klar zu machen, auf welche globalen Größen zugegriffen wird.

Dem Konstruktor „Greet“ werden jetzt alle Information, die er benötigt, explizit übergeben. Dies ist zum einen das HTML-Dokument, das mit Hilfe der von ihm erstellten Methoden manipuliert werden soll, dann eine Reihe von ID-Attribut-Namen, die diejenigen HTML-Elemente bezeichnen, die die Greet-Methoden lesen oder ändern sollen, sowie der String „'Hello'“ der zur Begrüßung des Benutzers verwendet werden soll. Alternativ könnte er auch mit „Hallo“ oder „Howdy“ begrüßt werden.

Nun müsste Ihre Anwendung „index3.html“ wieder laufen. Wenn Sie es denn tut, vergessen Sie nicht, sie im Repository zu speichern.

Anschließend sollten Sie in Ihrem WebStorm-Projekt folgende Kopien erstellen:

• index3.html → index3b.html
• js/main3.js → js/main3b.js

Die Datei „index3b.html“ soll abermals die JavaScript-Datei „js/app3/greet.js“ verwenden, dafür aber „js/main3b.js“ an Stelle von „js/main3.js“ laden.

Fügen Sie in der Datei „index3b.html“ in alle ID-Attribut-Bezeichner eine 1 ein: section_form → section1_form etc.

Schließen Sie dann die beiden Sections „section1_form“ und „section1_hello“ in ein div-Element ein und duplizieren Sie diese div-Elemente (natürlich samt Inhalt) anschließend. Sie werden feststellen, dass WebStorm eine Reihe von Fehlern der Art „Duplicate id reference“ meldet. Das ist nicht weiter verwunderlich, da Sie ja insbesondere alle ID-Attribut-Bezeichner dupliziert haben. Sie müssen daher im zweiten div-Element alle Einser in den ID-Attribut-Bezeichnern durch Zweier ersetzen.

Nun können Sie noch versuchen, die beiden div-Elemente mittels CSS nebeneinander zu legen. Für den angestrebten Test, ob Sie die Hello-World-App in einem HTML-Dokument zweimal starten können, ist das allerdings irrelevant.

Passen Sie nun Ihre Datei „main3b.js“ an die neuen Gegebenheiten an: Erzeugen Sie zwei Greet-Objekte „greet1“ und „greet2“ (für jedes der beiden neuen div-Elemente eines), fügen Sie passende click-Event-Listener für die beiden Buttons „button1_submit“ sowie „button2_submit“ hinzu und sorgen Sie zu guter Letzt dafür, dass beide Methoden „l_greet1.sayHelloOnEnter“ und „l_greet2.sayHelloOnEnter“ bei jedem Tastendruck aufgerufen werden.

Wenn Sie alles richtig gemacht haben, sollten jetzt in Ihrer Web-Anwendung „index3b.html“ zwei Hello-World-Anwendungen parallel laufen: index3b.html

App4

Hinsichtlich der Wiederverwendbarkeit der Module ist die Version 3 der Web-Anwendung schon ganz gut. Allerdings gibt es noch ein paar Unsauberkeiten, die beseitigt werden sollten:

1. In den Initialisierungsdateien „main3.js“ und „main3b.js“ sind immer noch konstante Werte enthalten.
2. Die Anzahl der Parameter der Konstruktorfunktion ist zu groß.
3. In den Initialisierungsdateien ist immer noch zu viel Anwendungscode enthalten.
4. Die potentielle Zahl der globalen Größen ist noch zu hoch.

Diese Probleme werden folgendermaßen gelöst:

1. Die Konstanten werden in eine JSON-Datei ausgelagert, die im ersten Schritt von der jeweiligen Initialisierungsdatei eingelesen wird.
2. Der Konstruktorfunktion wird das gesamte JSON-Objekt mit allen Initialisierungswerten in einem einzigen Parameter übergeben.
3. Es wird eine anwendungsspezifische Initialisierungsdatei „hello.js“ erstellt. Die Initialisierungsfunktion in der Datei „main4.js“ hat nur noch die Aufgabe, die JSON-Datei zu lesen und die darin enthalten Informationen anschließend an die Methode „hello.init“ weiterzuleiten.
4. Es wird ein globales Objekt namens „hello“ erstellt, das die gesamte Web-Anwendung enthält.

Erstellen Sie in Ihrem WebStorm-Projekt Kopien Ihrer Anwendungsdateien:

• index3b.html → index4.html
• js/main3b.js → js/main4.js
• js/app3/greet.js → js/app4/greet.js

Im Folgenden wird die HTML-Datei „index4.html“ als HTML-Template verwendet, d. h. als Strukturrahmen. Sämtliche Texte, die in diesem Dokument enthalten sind, werden dynamisch mittels JavaScript eingefügt.

In der Datei „index4.html“ müssen Sie also nicht nur dafür sorgen, dass die neuen JavaScript-Dateien anstelle der alten geladen werden und dass der Titel angepasst wird. Sie müssen auch sämtliche Text-Elemente mit eindeutigen ID-Attributen versehen.

Die HTML-Datei der Musterlösung sieht folgendermaßen aus. Sie können auch Ihre eigene Datei verwenden, müssen dann aber die JSON-Datei, die anschließend erstellt wird, entsprechend anpassen.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset = "UTF-8">
  <meta name    = "viewport"
        content = "width=device-width, initial-scale=1.0, user-scalable=yes"
  >

  <title>WK_HelloWorld04 (4)</title>

  <link rel = "stylesheet" type = "text/css" href = "css/main.css"/>
</head>

<body>
  <div class="left">
    <section id="section1_form">
      <h1 id="heading1_form"></h1>
      <form>
        <div>
          <label id="label1_name" for="input1_name"></label>
          <input id="input1_name" type="text" autofocus="autofocus"/>
        </div>
        <div>
          <button id="button1_reset"  type="reset"></button>
          <button id="button1_submit" type="button"></button>
        </div>
      </form>
    </section>
    <section id="section1_hello" class="hidden">
      <h1 id="heading1_hello"></h1>
      <p id="paragraph1_hello"></p>
    </section>
  </div>

  <div class="right">
    <section id="section2_form">
      <h1 id="heading2_form"></h1>
      <form>
        <div>
          <label id="label2_name" for="input2_name"></label>
          <input id="input2_name" type="text" autofocus="autofocus"/>
        </div>
        <div>
          <button id="button2_reset"  type="reset"></button>
          <button id="button2_submit" type="button"></button>
        </div>
      </form>
    </section>
    <section id="section2_hello" class="hidden">
      <h1 id="heading2_hello"></h1>
      <p id="paragraph2_hello"></p>
    </section>
  </div>

  <script type = "text/javascript" src = "js/lib/wk/ajax.js"></script>
  <script type = "text/javascript" src = "js/app4/greet.js"></script>
  <script type = "text/javascript" src = "js/app4/hello.js"></script>
  <script type = "text/javascript" src = "js/main4.js"></script>
</body>

</html>

Modularisierung

Um möglichst wenige globale Größen definieren zu müssen, legt man für eine Anwendung oder eine Bibliothek typischerweise eine einzige globale Variable an – Namensraum-Variable genannt –, die ein Objekt enthält. In diesem Objekt wird die gesamte Anwendung (Daten, Klassen, Funktionen etc.) gespeichert.

Für die Hello-World-Anwendung wird die globale Namensraum-Variable „hello“ verwendet. In jeder Datei, in der ein Teilaspekt der Anwendung definiert wird, kommt folgender Rahmencode zum Einsatz:

/** @namespace hello */
var hello =
(function(p_hello)
{ "use strict";

  // anwendungsspezifischer Code

  return p_hello;
}(hello ? hello : {}));

In der Variablen „hello“ wird das Ergebnis eines Aufrufs einer anonymen Funktion gespeichert. Dieser Funktion wird als Argument der Inhalt der Variablen „hello“ oder, falls dieses noch nicht existiert, ein leeres Objekt als Argument übergeben (hello ? hello : {}). Die anonyme Funktion fügt irgendwelche Daten, Klassen oder Funktionen in dieses Objekt ein und gibt es dann als Ergebnis zurück.

Dies hat den Effekt, dass beim ersten Aufruf einer derartigen Funktion eine neues Objekt erstellt und in „hello“ gespeichert wird, bei jedem weiteren Aufruf eines derartigen Codes wird das bestehende hello-Objekt einfach um weitere Inhalte ergänzt. Wenn man die Definition eines Namensraums über mehrere Dateien verteilt – die Forderung „Jedes Modul erledigt nach Möglichkeit nur eine einzige Aufgabe.“ erzwingt diese Vorgehensweise geradezu –, ist es egal in welcher Reihenfolge diese Dateien geladen werden. Sie können daher auch asynchron, d. h. parallel geladen werden. Wichtig ist nur, dass eine Datei nicht die Inhalte einer anderen Datei überschreiben darf.

Die Datei „js/app4/greet.js“ sieht nun folgendermaßen aus:

/** @namespace hello */
var hello =
(function(p_hello)
{ "use strict";

  /**
   * @class     hello.Greet
   * @classdesc Contains methods to say hello to the user of the web app.
   *
   * @param p_document A DOM object (usually the global object <code>document</code>)
   * @param p_init     A JSON object containing all init data.
   */
  p_hello.Greet =
  function(p_document, p_init)
  {
    var l_this = this; // this-hack

    /**
     * Welcomes the user of the web app1 by displaying a welcome message
     * that includes his name. The name is fetched from a text input field.
     */
    l_this.sayHello =
    function()
    {
      var l_init_elements = p_init.HTMLElements,
          l_init_text     = p_init.text,
          l_init_hidden   = p_init.css.hidden,
          l_name          = p_document.getElementById(l_init_elements.inputName).value;

      p_document.getElementById(l_init_elements.welcome).innerHTML 
        = l_init_text.welcome;
      p_document.getElementById(l_init_elements.hello).innerHTML
        = l_init_text.hello.replace('$1', l_name);

      p_document.getElementById(l_init_elements.sectionHello)
        .classList.remove(l_init_hidden);
      p_document.getElementById(l_init_elements.sectionForm)
        .classList.add(l_init_hidden);
    };


    /**
     * An keyboard event observer. It tests whether the enter key has been pressed.
     * If so, the greet method is activated. Default reactions of the browser are
     * disabled.
     *
     * @param {KeyboardEvent} p_event - A standard JavaScript keyboard event object
     *   (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
     */
    l_this.sayHelloOnEnter =
    function(p_event)
    {
      if ((p_event.code === 'Enter' || p_event.keyCode === 13) &&
           p_document.activeElement ===
           p_document.getElementById(p_init.HTMLElements.inputName)
         )
      {
        p_event.preventDefault();
        p_event.stopPropagation();
        l_this.sayHello();  // NOT this.sayHello();
      }
    };
  };

  return p_hello;
}(hello ? hello : {}));

Gegenüber der Version 3 dieser Datei hat sich Folgendes geändert:

• Es wird keine globale Konstruktorfunktion „Greet“ mehr definiert. Diese Konstruktorfunktion wird vielmehr in der Namensraum-Variablen „hello“ gespeichert: „hello.Greet“
• Die Konstruktorfunktion hat nur noch zwei Parameter: „p_window“ und „p_init“. Der erste Parameter enthält wie in Version 3 das globale Window-Objekt, der zweite ein JSON-Objekt, in dem alle Initialisierungsinformationen enthalten sind.
• Im Rumpf der Konstruktorfunktion werden alle notwendigen Informationen aus p_init extrahiert: Der Name der Formular-Section, der Name des Text-Eingabefelds, der Text der Hello-Nachricht etc.

Legen Sie gleich noch die Datei „js/app4/hello.js“ für die Web-App an:

/** @namespace hello */
var hello =
(function(p_hello)
{ "use strict";

  /**
   * Initializes the HTML sections of the app that are
   * stated in <code>p_init</code>.
   *
   * @param p_window The browser window that contains the HTML document to be initialized.
   * @param p_init   The initialization info for the form section and welcome section.
   */
  p_hello.init =
  function(p_window, p_init)
  {
    var l_document      = p_window.document,
        l_init_elements = p_init.HTMLElements,
        l_init_text     = p_init.text,
        l_greet         = new p_hello.Greet(l_document, p_init);

    l_document.getElementById(l_init_elements.headingForm)
              .innerHTML = l_init_text.title;
    l_document.getElementById(l_init_elements.inputNameLabel)
              .innerHTML = l_init_text.query;
    l_document.getElementById(l_init_elements.buttonReset)
              .innerHTML = l_init_text.reset;
    l_document.getElementById(l_init_elements.buttonSubmit)
              .innerHTML = l_init_text.submit;
    l_document.getElementById(l_init_elements.buttonSubmit)
              .addEventListener('click', l_greet.sayHello);
    p_window.addEventListener('keydown', l_greet.sayHelloOnEnter);
  };

  return p_hello;
}(hello ? hello : {}));

Sie ist wieder aufgebaut wie zuvor beschrieben: Sie definiert, falls notwendig, das globale Objekt „hello“ und fügt anschließend eine Funktion „init“ in dieses Objekt ein. Die Methode „hello.init“ hat dieselben Parameter, wie die zuvor definierte Konstruktorfunktion und erwartet denselben Input. Ihre Aufgabe ist es, die derzeit noch leeren Text-Elemente des HTML-Templates mit Inhalt zu füllen soweit der Inhalt schon bekannt ist (der Name des Benutzers ist noch unbekannt). Außerdem erstellt sie ein passendes Greet-Objekt „ l_greet“ mit Hilfe der Konstruktorfunktion „hello.Greet“ und weist dem Submit-Button die darin enthaltene Methode „sayHello“ zu. Außerdem definiert sie eine Eventlistener, der im Falle eines Key-Down-Ereignisses die Methode „ l_greet.sayHelloOnEnter“ ausführt.

Die JSON-Datei

Zur Initialisierung der Web-Anwendung werden JSON-Dateien benötigt.

Eine JSON-Datei enthält genau ein JavaScript-Objekt in textueller Darstellung. Allerdings werden nur folgende Datentypen unterstützt:

• Nullwert: null
• Boolesche Werte: true, false
• Zahlen
• Strings
• Arrays
• Objekte

Insbesondere Funktionen können in einer JSON-Datei nicht enthalten sein. Außerdem müssen Strings immer in doppelte Anführungszeichen eingeschlossen sein, einfache Anführungszeichen sind nicht erlaubt. Attributnamen werden ebenfalls durch Strings dargestellt. Auch diese müssen gemäß ECMA-Standard in doppelte Anführungszeichen eingeschlossen werden. Außerdem können in JSON-Dateien (leider) keine Kommentare enthalten sein.

Folgendes Objekt ist zwar ein korrektes Javascript-Objekt, aber kein gültiges JSON-Objekt:

{ a: 55, 'b': 'Wolfgang' }

In JSON muss dieses Objekt folgendermaßen geschrieben werden:

{ "a": 55, "b": "Wolfgang" }

Diese Objekt ist auch ein korrektes JavaScript-Objekt. Da die Syntaxregeln von JSON strenger sind als von JavaScript, gilt folgende Regel: Jedes JSON-Objekt ist auch ein JavaScript-Objekt, aber nicht jedes JavaScript-Objekt ist auch ein JSON-Objekt.

Ein Problem bereitet die Verwendung von JSON. Da ein JSON-Objekt beliebige Attribute enthalten kann, kann eine IDE nicht überprüfen, ob ein bestimmtes Attribut oder Element in einem JSON-Objekt mit Sicherheit enthalten ist oder nicht. Das hat z. B. zur Folge, das WebStorm bei einem Zugriff auf eine Attribut in einem JSON-Objekt den Attributnamen unterringelt und mit der Warnung „Unresolved variable ...“ versieht.

Ein Lösung für dieses Problem wäre die Verwendung von JSON Schema. Aber darauf wird zunächst verzichtet.

Legen Sie für die zuvor definierte HTML-Datei „index4.html“ folgende JSON-Initialisierungsdatei unter dem Namen „web/json/hello_de.json“ an:

{
  "HTMLElements":
  {
    "sectionForm":    "section1_form",
    "headingForm":    "heading1_form",
    "inputNameLabel": "label1_name",
    "inputName":      "input1_name",
    "buttonReset":    "button1_reset",
    "buttonSubmit":   "button1_submit",
    "sectionHello":   "section1_hello",
    "hello":          "heading1_hello",
    "welcome":        "paragraph1_hello"
  },

  "text":
  {
    "title":   "Hallo, Fremder!",
    "query":   "Wie heißen Sie?",
    "reset":   "Reset",
    "submit":  "Begrüßung",
    "hello":   "Hallo, $1!",
    "welcome": "Willkommen bei Multimedia-Programmierung!"
  },

  "css":
  {
    "hidden": "hidden"
  }
}

Diese Datei besteht aus einem anonymen Objekt. Es enthält seinerseits drei Objekte „HTMLElements“, „text“ und „css“, die für die Initialisierung der Web-Anwendung gedacht sind. Das Objekt „HTMLElements“ enthält sämtliche ID-Attribut-Bezeichner der Web-Anwendung. Wenn das JSON-Objekt im beispielsweise im Parameter „p_init“ der Web-Anwendung übergeben wird, kann diese den Namen des Formularabschnitts mittels „p_init.HTMLElements.sectionForm“ ermitteln. Wenn Sie in Ihrer index4.html andere ID-Attibute-Bezeichner verwenden, müssen Sie die JSON-Datei entsprechend anpassen, d. h., Sie müssen beispielsweise den Attributwert "section1_form" durch den von Ihnen verwendeten Bezeichner ersetzen. Die Attributnamen ("sectionForm" etc.) dürfen Sie dagegen nicht ändern, da sonst die Methoden (init, sayHello und sayHelloOnEnter) Ihrer Web-Anwendung nicht mehr funktionieren würden.

Im Objekt „text“ sind alle Texte enthalten, die zu gegebener Zeit in das HTML-Dokument an die geeignete Stelle geschrieben werden sollen. Der Text „hello“ enthält „$1“ als Platzhalter. Dieser Platzhalter soll von der Anwendung durch den Namen des Benutzers ersetzt werden, nachdem er ihn eingegeben hat.

In Objekt „css“ sind alle Namen von CSS-Klassen enthalten, die von der Web-Anwendung zur Laufzeit zu HTML-Elementen hinzugefügt oder aus HTML-Elementen entfernt werden. Der Bezeichner, der der Anwendung bekannt ist („hidden“), stimmt in diesem Fall mit dem Namen der zugehörigen CSS-Klasse überein. Das ist nicht verboten.

Erstellen Sie analog die Datei „web/json/hello_en.json“. Diese Datei soll für die zweite Web-Anwendung definiert werden, die allerdings englischsprachige Texte enthält (Sie erinnern sich? In index4.html laufen zwei unabhängige Web-Anwendungen parallel).

Das Laden der JSON-Dateien

Für das asynchrone Laden von beliebigen Dateien von einem Web-Server gibt es in JavaScript den Befehl „XMLHttpRequest“. Wie man am Namen sieht, war er ursprünglich für das Laden XML-Dateien vorgesehen. Heute kann dieser Befehl allerdings für jede Art von Datei verwendet werden. Sie könnten jetzt natürlich die Dokumentation (https://wiki.selfhtml.org/wiki/JavaScript/XMLHttpRequest) lesen und den Befehl dann verwenden. Einfacher ist es jedoch, wenn Sie von mir erstellte die Datei „ajax.js “ aus dem Glossar-Repository herunterladen und in Ihrem Projekt unter dem Namen „web/js/lib/wk/ajax.js“ speichern.

Dieses Module stellt unter der globalen Variablen „wk“ – diese globale Variable ist für meine Module reserviert :-) – im Modul „wk.ajax“ mehrere Methoden zum Laden von Dateien bereit. Zum Laden von JSON-Dateien sollten Sie „wk.ajax.getJSON“ verwenden (obwohl es mit „wk.ajax.getFile“ auch ginge; Sie müssten dann allerdings den Inhalt der Datei, der als String geliefert wird, noch in ein JavaScript-Objekt umwandeln).

Die Methode „getJSON“ erwartet drei Argumente, einen URI, der den Speicherort der JSON-Datei beschreibt und zwei Callback-Funktionen. Die erste Funktion wird aufgerufen, sobald die JSON-Datei erfolgreich geladen wurde. Ihr wird das geladen JSON-Objekt als Argument übergeben. Die zweite Callback-Funktion wird aufgerufen, falls beim Laden etwas schief gehen sollte. Die Angabe dieser Funktion ist optional. In der Musterlösung wurde Sie definiert, hier wird darauf verzichtet.

Die Initialisierungsfunktion (Datei „main4.js“) sieht nun folgendermaßen aus:

// Initialize the app.
(function(p_window, p_wk, p_hello)
{ "use strict";

  // The list of all json files to be loaded
  var l_json_files = ['json/hello_de.json', 'json/hello_en.json'];  

  // For each element in the JSON file list:
  for (var i = 0, n = l_json_files.length; i < n; i++)
  p_wk.ajax.
     getJSON
     ( l_json_files[i],                    // Load the JSON file.
       function(p_init)                    // If ready, perform the callback function.
       { p_hello.init(p_window, p_init); } // Initialize the corresponding hello section.
     );
}(window, wk, hello));

Die Initialisierungsfunktion liest die beiden zuvor erstellten JSON-Dateien ein und reicht jeweils das daraus erzeugte JSON-Objekt „main4.js“ an die Initialisierungsfunktion der Web-Anwendung weiter. Beachten Sie, dass die Reihenfolge, in der die beiden JSON-Dateien geladen wird, nicht feststeht. Sie werden parallel geladen. Sobald eine Datei vollständig geladen wurde, wird die zugehörige Callback-Funktion

function(p_init) { p_hello.init(p_window, p_init); }

ausgeführt. Dieser wird im Parameter „p_init“ das zugehörige JSON-Objekt überreicht. Sie reicht es (zusammen mit die Window-Objekt) an die Methode „p_hello.init“ weiter.

Anmerkung: Man könnte die beiden JSON-Dateien natürlich auch mittels zweier Aufrufe von „getJSON“ laden:

// Initialize the app.
(function(p_window, p_wk, p_hello)
{ "use strict";

  p_wk.ajax.
    getJSON
    ( 'json/hello_de.json',               // Load the JSON file 'json/hello_de.json'.
      function(p_init)                    // If ready, perform the callback function.
      { p_hello.init(p_window, p_init); } // Initialize the corresponding hello section.
    );

  p_wk.ajax.
    getJSON
    ( 'json/hello_en.json',               // Load the JSON file 'json/hello_en.json'.
      function(p_init)                    // If ready, perform the callback function.
      { p_hello.init(p_window, p_init); } // Initialize the corresponding hello section.
    );
}(window, wk, hello));

Diese Verdopplung von Code würde allerdings gegen das Programmierprinzip „Don't repeat yourself“ (DRY) verstoßen.

App5

Im Prinzip kann die in App4 vorgestellte Lösung zur Modularisierung einer Web-Anwendung gut eingesetzt werden. Allerdings hat sie immer noch zwei Schwächen:

• Der Rahmencode, der in jeder Datei der Anwendung verwendet werden muss, ist lästig. (Das ist ein kleineres Problem.)
• Es gibt immer noch die globale Variable „hello“. Wenn man viele Bibliotheken verwendet, die auf diese Weise realisiert werden, gibt es wieder viele globale Variable. Und damit steigt das Risiko von Namenskollisionen.

Schöner wäre es, wenn JavaScript die Modularisierung von sich aus unterstützen würde. Das ist tatsächlich geplant. In EcmaScript 6 gibt es zu diesem Zweck die Befehle „import“ und „export“. Leider unterstützen die meisten Browser diese Befehle noch nicht.

Solange dies der Fall ist, kann man auf JavaScript-Bibliotheken zurückgreifen, die dieselbe Aufgabe (wenn auch weniger elegant) erfüllen. Hier könnte die Bibliothek „RequireJS“ zum Einsatz (http://requirejs.org/). An der Struktur der Anwendung ändert sich nichts. Nur die Art, wie Module definiert und geladen werden, wird angepasst.

Erstellen Sie in Ihrem WebStorm-Projekt letztmalig Kopien Ihre Anwendungsdateien:

• index4.html → index5.html
• js/main4.js → js/main5.js
• js/app4/greet.js → js/app5/greet.js
• js/app4/hello.js → js/app5/init.js

In der Datei „index5.html“ müssen Sie wiederum dafür sorgen, dass die neuen JavaScript-Dateien anstelle der alten geladen werden. Und passen Sie auch wieder den Titel im HTML-Header an.

Als nächstes müssen Sie, um RequireJS nutzen zu können, den Ordner „web/js/lib/require“ erstellen und folgende drei Dateien (einschließlich des Inhalts, der sich hinter den drei Links verbirgt) dort speichern:

• require.js
• text.js
• json.js

Modularisierung mit RequireJS

Wenn man konsequent RequireJS zur Modularisierung seine Anwendung einsetzt, gibt es neben den globalen Objekten des Browsers (window, document etc.) nur noch das globales Objekt „require“ sowie die globale Funktion „define“ zum Erstellen neuer Module.

Es wird auch nur noch eine einzige JavaScript-Datei statisch geladen: „require.js“. Alle anderen Dateien werden dynamisch geladen. Die in diesen Dateien enthaltenen Module werden mittels Callback-Funktionen an andere Module übergeben. Auf diese Weise ist sicher gestellt, dass man keine anderen globalen Variablen und Funktionen mehr benötigt.

RequireJS-Moduldefinitionen sollten gemäß der AMD-Spezifikation (AMD = Asynchronous Module Definition) erfolgen. RequireJS kann allerdings auch Bibliotheken wie z. B. „jQuery“ laden, die nicht gemäß dieser Spezifikation erstellt wurden.

Für RequireJS gibt es einige Plugins. Eines davon ermöglicht das Lesen von JSON-Dateien („json.js“). Dieses Plugin wird verwendet, um die Dateien „json/hello_xx.json“ einzulesen.

Wenn man mit Hilfe von „define“ ein neues (AMD-)Modul definiert, gibt man i. Allg. eine ganze Liste von Modulen an, auf denen das neue Modul basiert. Beispielsweise benötigt das Modul „hello“ (welches in der Datei „js/app5/hello.js“ definiert wird) das Modul „greet“ (welches in der Datei „js/app5/greet.js“ definiert wird).

Die Moduldefinition von „hello“ sieht in diesem Fall folgendermaßen aus:

define
( ['app/greet'],
  function (Greet) 
  {
     return ... 
  }
);

Die Funktion „define“ lädt zunächst alle Module, die in der Modulliste aufgeführt werden, asynchron (und damit meist auch parallel). Allerdings wird jedes Modul nur einmal geladen. Das heißt, wenn zwei Module dasselbe Modul benötigen, wird dieses Modul trotzdem nur einmal geladen. Sobald alle Module geladen sind, wird die im define-Aufruf definierte Callback-Funktion ausgeführt. Die Funktion muss für jedes Modul, das in der Modulliste enthalten ist, einen Parameter zur Verfügung stellen, in der das jeweilige Modul-Objekt an die Callback-Funktion übergeben wird.

Mann könnte im define-Aufruf auch noch einen Modulnamen angeben. Das ist aber i. Allg. nicht notwendig, da RequireJS defaultmäßig den Dateinamen (ohne Pfad und ohne Endung „js“) als Modulnamen verwendet.

Wenn man in der Definition eines Moduls auf keine anderen Module zurückgreifen will, kann man auf die Callback-Funktion verzichten. Um ein Modul zu schreiben, das lediglich ein Objekt enthält, schreibt man einfach:

define 
({
    // Inhalt des Objekts, den das Modul definiert. 
});

Wenn das Modul lediglich eine Funktion, wie z. B. eine Konstruktorfunktion „C“ zur Verfügung stellen soll, schreibt man

define
( function ()
  {  
     function C(...) {...}

     return C;
  }
);

Hier gibt es zwar eine Callback-Funktion. Diese wird jedoch sofort ausgeführt, da nicht auf das Laden anderer Module gewartet werden muss.

Laden von RequireJS

Damit Module auch gefunden werden, muss man RequireJS zunächst konfigurieren. Das erfolgt üblicherweise in der Datei „main.js“ (hier: „main5.js“). Diese Datei ist auch dafür verantwortlich, das erste Modul zu laden und damit den Ladevorgang für alle benötigten Module in Gang zu setzten. Bei uns ist das das Modul „hello“.

Allerdings kann man main.js nicht direkt laden, sondern man muss den Browser anweisen, zuvor require.js zu laden. Sobald diese Datei vollständig geladen (und übersetzt) wurde, lädt require.js von sich aus main.js (bzw main5.js). Um dies zu erreichen, fügen Sie folgendes Script-Element als letztes und einziges Script-Element in die Datei „index5.html“ ein:

<script data-main="js/main5" src="js/lib/require/require.js"></script>

Weitere Script-Elemente werden nicht mehr benötigt, das RequireJS Module jeweils dynamisch nachlädt, sobald sie benötigt werden.

Landen von main.js

Nachdem require.js geladen wurde, liest das Programm das Script-Attribut „data-main“ und erfährt so, dass die Datei „js/main5.js“ für die Initialisierung und den Start der Web-Anwendung zuständig ist (die fehlende Dateiendung „.js“ ergänzt RequireJS automatisch).

Die Datei „js/main5.js“ konfiguriert zunächst RequireJS:

requirejs.config
({
  baseUrl: 'js', // By default load any modules from directory js
  paths :
  {
    app:      'app5',
    loadjson: 'lib/require/json',
    text:     'lib/require/text',
    json:     '../json'
  }
});

Hier wird festgelegt, dass sich die JavaScript-Dateien im Ordner „js“ befinden. Das Attribut „path“ legt ein paar spezielle Unterordner fest. Modulnamen, die mit „app/“ beginnen (wie z. B. „app/greet“), werden im Ordner „js/app5/“ gesucht. Für die Module „json“ (ein RequireJS-Plugin zum Laden von JSON-Dateien) und „text“ (welches von „json“ benötigt wird) wurde der Pfad direkt angegeben. Die JSON-Dateien finden sich im Ordner „js/../json“, d. h. im Ordner „init“.

Nun kann die eigentliche Anwendung gestartet werden:

requirejs
( ['loadjson!json/hello_de.json', 'loadjson!json/hello_en.json', 'app/init'],
  function(helloDeJSON, helloEnJSON, init)
  {
    init(window, helloDeJSON);
    init(window, helloEnJSON);
  }
);

Die Anwendung benötigt zwei JSON-Dateien (das dafür notwendige JSON-Plugin wird automatisch geladen) und das Modul „app/hello“ (welches sich gemäß Konfiguration in der Datei „js/app5/hello.js“ befindet).

Sobald die drei Dateien vollständig geladen wurden, wird die Callback-Funktion aufgerufen. Dieser werden die beiden JSON-Objekte sowie das Hello-Initialisierungs-Modul-Objekt übergeben. Die Callback-Funktion kann somit problemlos die beiden Hello-World-Anwendungen mittels „p_hello.init“ initialisieren und starten.

Das Modul „hello“

Der Code des Moduls „init“ unterscheidet sich nicht nur hinsichtlich des Modulrahmens, sondern auch noch in eine zweiten in einem wesentlichen Aspekt vom Code des Moduls „hello“ der App4: In der App4 gibt es ein globales Objekt namens „hello“, das die gesamte Web-Anwendung enthält. Insbesondere gibt es die Methode „hello.init“ zum Initialisieren der App. Im Gegensatz dazu gibt es in der App5 überhaupt keine anwendungsspezifischen globalen Objekte. Daher ist es nicht notwendig die Funktion „init“ als Methode in irgendein Objekt einzufügen. Dementsprechend wurde auch der Modulname von „hello“ in „init“ geändert.

define
( ['app/greet'],
  function (Greet) // The module 'app/greet' contains the constructor 'Greet'.
  {
    /**
     * Initializes the HTML sections of the app that are
     * stated in <code>p_init</code>.
     *
     * @param p_window The browser window that contains the HTML document to be initialized.
     * @param p_init   The initialization info for the form section and welcome section.
     */
    function init(p_window, p_init)
    {
      var l_document      = p_window.document,
          l_init_elements = p_init.HTMLElements,
          l_init_text     = p_init.text,
          l_greet         = new Greet(l_document, p_init);

      l_document.getElementById(l_init_elements.headingForm)
                .innerHTML = l_init_text.title;
      l_document.getElementById(l_init_elements.inputNameLabel)
                .innerHTML = l_init_text.query;
      l_document.getElementById(l_init_elements.buttonReset)
                .innerHTML = l_init_text.reset;
      l_document.getElementById(l_init_elements.buttonSubmit)
                .innerHTML = l_init_text.submit;
      l_document.getElementById(l_init_elements.buttonSubmit)
                .addEventListener('click', l_greet.sayHello);
      p_window.addEventListener('keydown', l_greet.sayHelloOnEnter);
    }

    return init;
  }
);

Sobald das Modul „app/greet“ (d. h. die Datei „js/app5/greet.js“) vollständig geladen wurde, wird die von diesem Modul bereitgestellte Konstruktorfunktion „Greet“ der Callback-Funktion im Parameter „Greet“ übergeben. Die Callback-Funktion erstellt daraufhin ein Objekt, welches eine einzige Methode enthält: „init“. Die Aufgabe dieser Methode ist es, die Web-Anwendung zu initialiseren, sobald sie (von „main5.js“) aufgerufen wird. Sie erstellt insbesondere mit Hilfe der Konstruktorfunktion „Greet“ ein Objekt „l_greet“, welche speziell angepasste Methoden „sayHello“ und „sayHelloOnEnter“ zur Verfügung stellt.

Das Modul „greet“

Das Modul „greet“ benötigt überhaupt keine anderen Module. Daher ist die Moduldefinition noch etwas einfacher (die Liste mit benötigten Modulen entfällt ganz). Es ändert sich gegenüber App4 ebenfalls nur der Modulrahmen.

define
(function ()
 {"use strict";

  /**
   * @class
   * @classdesc Contains methods to say hello to the user of the web app.
   *
   * @param p_document A DOM object (usually the global object <code>document</code>)
   * @param p_init A JSON object containing all init data.
   */
  function Greet(p_document, p_init)
  {
    var l_this = this; // this-hack

    /**
     * Welcomes the user of the web app1 by displaying a welcome message
     * that includes his name. The name is fetched from a text input field.
     */
    l_this.sayHello =
      function ()
      {
        var l_init_elements = p_init.HTMLElements,
            l_init_text     = p_init.text,
            l_init_hidden   = p_init.css.hidden,
            l_name          = p_document.getElementById(l_init_elements.inputName).value;

        p_document.getElementById(l_init_elements.welcome)
                  .innerHTML = l_init_text.welcome;
        p_document.getElementById(l_init_elements.hello)
                  .innerHTML = l_init_text.hello.replace('$1', l_name);

        p_document.getElementById(l_init_elements.sectionHello)
                  .classList.remove(l_init_hidden);
        p_document.getElementById(l_init_elements.sectionForm)
                  .classList.add(l_init_hidden);
      };

    /**
     * An keyboard event observer. It tests whether the enter key has been pressed.
     * If so, the greet method is activated. Default reactions of the browser are
     * disabled.
     *
     * @param {KeyboardEvent} p_event - A standard JavaScript keyboard event object
     *   (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
     */
    l_this.sayHelloOnEnter =
      function (p_event)
      {
        if ((p_event.code === 'Enter' || p_event.keyCode === 13) &&
             p_document.activeElement ===
             p_document.getElementById(p_init.HTMLElements.inputName)
        )
        {
          p_event.preventDefault();
          p_event.stopPropagation();
          l_this.sayHello();  // NOT this.sayHello();
        }
      };
  }

  return Greet; // Return the constructor defined above.
});

Quellen

4. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)