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
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 install
aus.
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)