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) |
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 vierten Teil des Tutoriums ändern sich die die Anwendungsfälle nur geringfügig. Das Begrüßungsformular soll zweimal im Browser angezeigt werden, einmal auf Deutsch und auf Englisch. Beide Begrüungsformulare sollen unabhängig voneinander funktionieren.
Ein Grundprinzip der Programmierung lautet Don't repeat yourself (DRY). Sie könnten nun einfach den vorhandenen Code duplizieren und entsprechend anpassen. Aber genau das würde gegen das Prinzip „Keep your code DRY“ verstoßen. Code-Duplikation kann mit Hilfe von Klassen vermieden werden. Sie stellen eine Art „Blaupause“ dar, um Objekte mit ähnlichen Eigenschaften ganz einfach erstellen zu können.
Erstellen eines neuen Projektes
Erzeugen Sie wie im vierten Teil des Tutoriums ein neues Projekt,
diesmal allerdings mit dem schönen Namen HelloWorld05“ und speichern Sie dieses wieder
in Ihrem SVN-Repository (Achtung: node_modules muss existieren und auf der Ignore-Liste stehen).
Kopieren Sie nun aus Ihrer Lösung des vierten Teil des Tutoriums die Ordner src und web
(jeweils samt allen darin enthaltenen Ordnern und Dateien) sowie die Dateien gruntfile.js,
package.json, package-lock.json und webpack.config.js
fügen Sie sie ins Wurzelverzeichnis des fünften Teils ein.
Weisen Sie WebStorm wiederum an, die Inhalte der Ordner node_modules und web/js
nicht auf Syntaxfehler zu überprüfen. Gegebenenfalls müssen Sie auch wieder die Dateien gruntfile.js
... webpack.config.js unter die Versionsverwaltung von SVN stellen (Add to VCS).
Ändern Sie in den Dateien package.json und web/index.html die Versionsnummern
Ihres Projektes.
Zu guter Letzt öffnen Sie das Web-Storm-Terminal und führen den Befehl npm installaus.
Damit werden dieselben Node.js-Pakete installiert wie im vierten Teil des Tutoriums.
Löschen Sie die Datei web/js/app.bundle.js und
rufen Sie anschließend grunt auf, um diese Datei erneut zu erzeugen.
Wenn Sie jetzt die Datei index.html im Browser öffnen, sollte die
Web-Anwendung so wie in Teil 4 der Aufgabe funktionieren.
Wiederverwendbarkeit
TO BE DONE
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
