HTML5-Tutorium: JavaScript: Hello World 07

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

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

JSON

Bislang haben sie den CSS-Code unter Webpack-Kontrolle gestellt und damit DRY gemacht. Als nächstes gehen wir das nächste Problem an: Ihr Code enthält ebenfalls Konstanten und verstößt damit gegen das Programmierprinzip „Konstante Werte gehören nicht in den Code, sondern in Konfigurationsdateien.“

Eine Ausnahme bilden triviale Konstanten wie 0, 1, null, true oder false, sofern sie mit großer Sicherheit nie im Code geändert werden müssen. Aber schon eine Konstante wie 3.1415926 gehört nicht in den Code. Man verwendet stattdessen besser Math.PI und erhält damit die maximal mögliche Stellenzahl. (Eventuell hängt diese von der Rechnerplattform ab.)

In JavaScript-Anwendungen verwendet man JSON zur Speicherung von (konstanten) Daten und zur Initialisierung der Anwendung. Wenn ein Spiel mehrere Level hat, wir jedes Level üblicherweise in einer eigenen JSON-Datei beschrieben. Eine Level-Designerin muss im Optimalfall nicht mehr machen, als die Assets (Grafiken, Töne, 3D-Modell etc.) zu erstellen und mit Hilfe einer JSON-Datei die Zusammenhänge zwischen den einzelnen Elementen herstellen. Es sollte nicht notwendig sein, dass sie den Programmcode modifizieren muss, da das Level-Design schon aufwändig genug ist.

JSON (JavaScript Object Notation) ist ein einfaches Datenformat, mit dessen Hilfe sich komplexe Objekte sehr einfach beschreiben lassen. Eine Alternative wäre XML, allerdings ist diese Auszeichnungsprache deutlich komplexer. (Ein Beispiel für XML ist XHMLT 1.0, eine HTML-Variante.)

Eine JSON-Datei ist im Prinzip eine JavaScript-Datei, die einen der folgenden Datentypen enthält:

• Nullwert (null)
• Boolescher Wert (true oder false)
• Zahl (Ziffernfolge mit optionalem Vorzeichen und optionalen Exponenten)
• Zeichenkette (beliebige UTF-8-Zeichen, die in doppelten geraden Anführungszeichen (") eingeschlossen sind)
• Array (eine durch Kommata getrennte Listen von null oder mehr JSON-Elementen; die Liste beginnt mit [ und endet mit ])
• Objekt/Hasharray/Paarliste (eine durch Kommata getrennte Listen von null oder mehr Paaren; die Liste beginnt mit { und endet mit }; jedes Paar besteht aus einer Zeichenketten, die als Schlüssel fungiert, gefolgt von einem Doppelpunkt (:) gefolgt von einem beliebigen JSON-Element; in einem Objekt darf derselbe Schlüsselwert nicht zweimal vorkommen)

Beachten Sie, dass die eine rekursive Definition ist: Arrays dürfen andere Arrays und Objekte enthalten, Objekte dürfen andere Objekte und Arrays enthalten. JSON-Elemente können also beliebig tief geschachtelt sein.

Andere Werte dürfen in einer JSON-Datei nicht enthalten sein. Das heißt, es gibt keine einfachen geraden Anführungszeichen (außer innerhalb von Zeichenketten), keine Kommentare, keine Funktionen etc. Insbesondere überflüssige Kommas sind nicht erlaubt!

Beachten Sie bitte, dass jeden JSON-Datei auch eine JavaScript-Datei ist (die Umkehrung dieser aussage gilt nicht.). Wenn man eine JSON-Datei auswerten würde, erhielte man jedoch kein anderes Ergebnis als den Wert oder das Objekt, das in der Datei gespeichert ist.

Erstellen Sie in Ihrem Projekt folgende zwei JSON-Dateien:

src/json/config_de.json

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

src/json/config_en.json

{ "html":
  { "reset":    "Reset",
    "submit":   "Say hello"
  },
    
  "text":
  { "title":    "Hello, Stranger!",
    "question": "What's your name?",
    "hello":    "Hello, $1!",
    "welcome":  "Welcome to Multimedia Programming!"
  }
}

Importieren Sie die erste der beiden JSON-Dateien in Ihre Datei src/js/app,js, indem Sie folgenden Import-Befehl einfügen:

import * as config from '../json/config_de.json';

In src/js/app/greet,js fügen Sie folgenden Import-Befehl ein:

import * as config from '../../json/config_de.json';

Beachten Sie, dass hier eine Zugriff auf das „Großvater“-Verzeichnis src mittel ../../ erfolgen muss. Grundsätzlich sollten Sie in Import-Befehlen immer relative Pfadnamen angeben, da sonst eine Änderung der globalen Ordnerstruktur zu massiven Problemen führen kann. Achten Sie bei Pfad-Angaben insbesondere auf Groß- und Kleinschreibung. Gemeinerweise macht es auf Windows-Rechnern keinen Unterschied, ob sie in einem Pfadnamen Groß- oder Kleinbuchstaben verwenden. Wenn Sie die Anwendung später auf einen Linux-Server kopieren, kommt es dann allerdings zu Problemen, weil der Server die Pfade mit den falschen Groß- oder Kleinbuchstaben nicht mehr findet. Sie sollten in Dateinamen am Besten überhaupt keine Großbuchstaben verwenden.

Wenn Sie jetzt grunt aufrufen und anschließend index.html im Browser öffnen, hat sich noch nicht viel getan.

Ändern Sie nun den Inhalt der index.html. Löschen Sie alle englischen Text-Elemente. sie sollten sie durch die angegebenen Dummy-Texte ersetzen, notwendig wäre das aber nicht:

• Hello, Stranger! → TITLE
• What's your name? → QUESTION
• Reset → RESET
• Say hello → SUBMIT
• Hello, ... → HELLO
• Welcome to Multimedia Programming! → WELCOME

Sie müssen außerdem noch einigen HTML-Tags zusätzlich ein id-Attribut zuordnen:

• H1-Element: <h1 id="heading_form">
• Label-Element: <label id="input_label" ..>
• Reset-Button: <input id="button_reset" type="reset" ...>
• Welcome-Paragraph: <p id="paragraph_hello">WELCOME</p>

Wenn Sie jetzt die index.html nochmals im Browser öffnen, sehen Sie nur noch die DUMMY-Texte.

Das ändert sich allerdings, wenn Sie folgende JavaScript-Befehle in die Datei src/js/app.js nach den Import-Befehlen einfügen:

const c_config_text = config.text;

// Initialize the app.
document.getElementById('button_reset').value
  = c_config_text.reset;
document.getElementById('button_submit').value
  = c_config_text.submit;

document.getElementById('heading_form').innerHTML
  = c_config_text.title;
document.getElementById('input_label').innerHTML
  = c_config_text.question;

(Die restlichen Zeilen bleiben erhalten.) Mit diesen fünf Befehlen speichern Sie den Inhalt des Attributs text aus der eingelesenen JSON-Datei in der Konstanten c_config_text. Anschließend ersetzen Sie mit Hilfe von vier weiteren Befehle die Dummy-Texte im der Form-Section durch sinnvolle Texte.

Rufen Sie grunt auf und öffnen Sie anschließend index.html im Browser. Jetzt sollten Sie deutsche Text an Stelle von Dummy-Texten sehen. Wenn Sie jetzt allerdings einen Namen eingeben und auf den Begrüßungs-Button klicken, werden Sie englisch begrüßt und sehen einen weiteren Dummy-Text.

Das heißt, Sie müssen auch noch die Datei src/js/app/greet.js erweitern.

Ersetzen Sie in dieser Datei im Rumpf der Funktion sayHello den darin enthalten Code durch folgenden Code:

const l_config_text = config.text,
      l_name      = document.getElementById("input_name").value;

document.getElementById('paragraph_hello').innerHTML
  = l_config_text.welcome;
document.getElementById('heading_hello').innerHTML
  = l_config_text.hello.replace('$1', l_name);

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

Die Funktion sayHelloOnEnter ändert sich dagegen nicht.

Nun sollte (nach einen grunt-Lauf) die Web-App wie gewünscht funktionieren.

Sie können jetzt testweise mal in beiden Dateien app.js und greet.js die englischsprachige JSON-Datei landen, grunt laufen lassen und index.html öffnen. Dann sollten Sie auf Englisch begrüßt werden. Das ist schon nicht schlecht, aber richtig DRY ist das noch nicht. Sie müssen den Namen der JSON-Datei in zwei Dateien ändern. Also braucht es noch eine sechstes und letztes Hello-World-Tutorium ...

Wiederverwendbarkeit

TO BE DONE

Quellen

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