HTML5-Tutorium: JavaScript: Hello World 04

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 zu verbessern, so dass sie schneller ausgeliefert werden kann.

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“. Sollten es viele CSS- und/oder JavaScript-Datein werden, leget man im entsprechenden Ordner geeignete Unterordner an.

Legen Sie im Root-Verzeichnis Ihres Projektes einen Ordner namens „dist“ an (dist = distribution). Legen Sie innerhalb dieses Ordners zwei weitere Ordner an: „css“ sowie „js“ .

Öffnen Sie im Editorbereich die Datei „index.html“ und verschieben Sie anschließend die Dateien „main.css“ und „main.js“ in die passenden Ordner „dist/css“ bzw. „dist/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 „dist“.

Das Ergebnis dieser Aktion ist, dass Ihre Web-Anwendung nicht mehr im Root-Verzeichnis des Projektes liegt, sondern (sauber strukturiert) in einem Unterordner. Daher ist es jetzt möglich, im Root-Verzeichnis des Projektes weitere projektspezifische Ordner und Dateien anzulegen, die später nicht auf den Web-Server, auf dem die Anwendung schließlich laufen soll, kopiert werden. Typischerweise werden hier Konfigurations- und Dokumentationsdateien abgelegt. Legen Sie zu diesem Zweck im Root-Verzeichnis Ihres Projektes zwei weitere Ordner an: „conf“ (für Konfigurationsdateien) und „doc“ (für Dokumentationsdateien).

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 diese 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 JavaScrip- und CSS-Dateien lädt. Wenn dies zu lange dauert, verliert der Besucher die Geduld und verläßt die Seite vorzeitig.

Besser wäre es daher andersherum vorzugehen: Es wird zuerst der body-Bereich geladen und dan 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 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 reendert 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 einzufügen. Damit das Problem mit dem falschen Layout nicht auftritt, sollen wichtige CSS-Style-Befehle direkt 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 HTM-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 später 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="css/main.js"></script>
</body>

Node.js

Dieses Tutorium befasst sich zwar nicht mit der Erstellung von Node.js-Anwendungen, aber trotzdem benötigen wir Node, da für die Komprimierung von Dateien und das automatische Erstellen von JavaScript-Dokumentationen derartiege Anwendungen zum Einsatz kommen.

Installieren Sie zunächst Node.js: https://nodejs.org/en/, Version 6.x. Dieverse Versionen finden Sie unter https://nodejs.org/en/download/. Achten Sie darauf, dass die Option „Add to PATH“ ausgewählt wurde.

Starten Sie WebStorm neu und öffnen Sie das Terminal, um zu testen, ob node funktioniert:

• Klick auf Icon in der linken unteren Ecke → Terminal
• Geben Sie Folgendes ins Terminal ein: node --version

Wenn Node.js korrekt installiert und der Pfad mit den node-Binaries in die Systemvariable PATH eingetragen wurde, sollte die Versionsnummer von node ausgegeben werden.

Sie werden feststellen, das Node.js zum Großteil über Konsolbefehle gesteuert wird. Zu Beginn mag das für eingefleischte Klickibunti ungewohnt sein, aber Sie werden sich schnell daran gewöhnen.

Tipp
Profis verwenden unter Windows lieber ein Terminal, dass eine Unix-Shell simuliert. (Unter Linux und Mac OS X ist das nicht notwendig. Dort läuft sowieso schon eine UNIX-Shell.)

Installieren Sie „Git for Windows“ (https://git-for-windows.github.io/). In diesem Paket ist die „Git BASH“ enthalten. Das ist eine Terminal-Anwendung, die eine Linux-Bash emuliert und zahlreiche nützliche Befehle wie „which“, „vi“ ( :-) ) etc. zur Verfügung stellt.

Automatische Komprimierung von CSS- und Javascript-Dateien

TO BE DONE

Automatische Generierung der Schnittstellenbeschreibung

Installieren Sie zunächst JSDoc:

• Öffnen Sie das WebStorm-Terminal.
• npm install -g jsdoc (installiert JSDoc als Node.js-Anwendung)
• npm install ink-docstrap (installiert ein JSDoc-Theme namens „inc-docstrap“; es gibt weitere Themes für JSDoc)

Sie werden feststellen, dass sich in Ihrem Projekt anschließend ein neuer Ordner namens „node_modules“ angelegt wurde, in denen sich diverse Node.js-Pakete befinden: „inc-docstrap“ sowie weitere Module, die für das Funktionieren dieses Moduls notwendig sind.

Erstellen Sie im Projektordner „conf“ eine JSON-Datei namens „jsdoc.conf“. Fügen Sie in diese Datei folgenden Code ein:

{
  "tags":
  {
    "allowUnknownTags": true
  },

  "source":
  {
    "include":        ["./dist/js"],
    "includePattern": ".+\\.js$",
    "excludePattern": "doc"
  },

  "plugins":
  [],
  "templates":
  {
    "systemName":      "WK_HelloWorld04",
    "footer":          "Created by Wolfgang Kowarschick",
    "copyright":       "2016",
    "navType":         "vertical",
    "theme":           "spacelab",
    "linenums":        true,
    "cleverLinks":     false,
    "monospaceLinks":  true,
    "collapseSymbols": true,
    "inverseNav":      false
  },

  "opts":
  {
    "template":    "node_modules/ink-docstrap/template",
    "encoding":    "utf8",
    "destination": "doc/jsdoc",
    "recurse":     true,
    "private":     true
  }
}

Ersetzen Sie im Attrbut „footer“ meinen Namen durch Ihren, es ist Ihr Projekt, nicht meines. :-)

In dieser Datei wird festgelegt, wie die HTML-Dokumentation des Codes, die JSDoc erstellt, aussehen soll. Insbesondere ist das Template angegeben, das zur Erstellung dieser HTML-Dokuemnte verwendet werden soll. Es handelt sich um „inc-docstrap“, welches wir zuvor heruntergeladen haben. Von der Projektroot aus gesehen, befinden sich die Template-Dateien im Ordner „node_modules/ink-docstrap/template“.

Weitere Konfigurationsparameter werden unter http://usejsdoc.org/about-configuring-jsdoc.html beschrieben.

Sie können nun eine Dokumentation für Ihr Projekt erstellen:

• Öffnen Sie das WebStorm-Terminal.
• jsdoc -c conf/jsdoc.json

Nach kurzer Zeit sollte der Ordner „doc/jsdoc“ erstellt und mit Inhalten gefüllt worden sein.

Globale Speicherung der JSDoc-Templates

Wenn Sie „ink-docstrap“ nicht mittels

npm install ink-docstrap

sondern mittels

npm install -g ink-docstrap

installieren, werden die Template-Dateien nicht im Projektordner, sondern im globalen npm-Ordner abgelegt. Das hat den Vorteil, dass Sie dieses Template für viele Projekte einsetzen können und es nicht bei jedem Projekt separat speichern müssen. Der Nachteil ist, dass in der Datei „conf/jsdoc.json“ den absoluten Pfad des globalen Ordners angeben müssen. Dieser Pfad sieht auf jedem Rechner anders aus. Bei mir lautet er beispielsweise

c:/Users/kowa/AppData/Roaming/npm/node_modules/ink-docstrap/template

TO BE DONE

Quellen

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