HTML5-Tutorium: JavaScript: Hello World 06: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
← zur vorherigen Versionen-Differenzzur nächsten Versionen-Differenz →
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Keine Bearbeitungszusammenfassung
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Keine Bearbeitungszusammenfassung
Zeile 18: Zeile 18:


Erzeugen Sie wie im  [[HTML5-Tutorium:_JavaScript:_Hello_World_04|vierten Teil des Tutoriums]] ein neues Projekt,
Erzeugen Sie wie im  [[HTML5-Tutorium:_JavaScript:_Hello_World_04|vierten Teil des Tutoriums]] ein neues Projekt,
diesmal allerding mit dem schönen Namen <code>HelloWorld05</code>“ und speichern Sie dieses wieder
diesmal allerdings mit dem schönen Namen <code>HelloWorld05</code>“ und speichern Sie dieses wieder
in Ihrem SVN-Repository (Achtung: <code>node_modules</code> muss auf der Ignore-Liste stehen).   
in Ihrem SVN-Repository (Achtung: <code>node_modules</code> muss existieren und auf der Ignore-Liste stehen).   


Kopieren Sie nun aus Ihrer Lösung des vierten Teil des Tutoriums die Ordner <code>src</code> und <code>web</code>
Kopieren Sie nun aus Ihrer Lösung des vierten Teil des Tutoriums die Ordner <code>src</code> und <code>web</code>
(jeweils samt allen darin enthaltenen Ordnern und Dateien> sowie die Datei <code>package.json</code> und
(jeweils samt allen darin enthaltenen Ordnern und Dateien) sowie die Dateien <code>gruntfile.js</code>,
<code>package.json</code>, <code>package-lock.json</code> und <code>webpack.config.js</code>
fügen Sie sie ins Wurzelverzeichnis des fünften Teils ein.  
fügen Sie sie ins Wurzelverzeichnis des fünften Teils ein.  


Weisen Sie WebStorm wiederun an, die Inhalte der Ordner <code>node_modules</code> und <code>web/js</code>
Weisen Sie WebStorm wiederum an, die Inhalte der Ordner <code>node_modules</code> und <code>web/js</code>
nicht auf Syntaxfehler zu überprüfen. Gegebenenfalls müssen Sie auch wieder die Dateien <code>package.json</code>
nicht auf Syntaxfehler zu überprüfen. Gegebenenfalls müssen Sie auch wieder die Dateien <code>gruntfile.js</code>
und <code>package-lock.json</code> unter die Versionsverwaltung von SVN stellen (<code>Add to VCS</code>).
... <code>webpack.config.js</code> unter die Versionsverwaltung von SVN stellen (<code>Add to VCS</code>).


Ändern Sie in den Dateien <code>package.json</code> und <code>web/index.html</code> die Versionsnummern
Ändern Sie in den Dateien <code>package.json</code> und <code>web/index.html</code> die Versionsnummern
Zeile 33: Zeile 34:


Zu guter Letzt öffnen Sie das Web-Storm-Terminal und führen den Befehl <code>npm install</code>aus.
Zu guter Letzt öffnen Sie das Web-Storm-Terminal und führen den Befehl <code>npm install</code>aus.
Damit werden dieselben Node.js-Pakete installiert wie im vierten Teil des Turotiums.
Damit werden dieselben Node.js-Pakete installiert wie im vierten Teil des Tutoriums.


Löschen Sie die Datei <code>web/js/app.bundle.js</code> und
rufen Sie anschließend <code>grunt<code> auf, um diese Datei erneut zu erzeugen.
Wenn Sie jetzt die Datei <code>index.html<code> im Browser öffnen, sollte die
Web-Anwendung so wie in Teil 4 der Aufgabe funktionieren.


==Wiederverwendbarkeit==
<!--
Hinsichtlich der Wiederverwendbarkeit der Module ist die [[HTML5-Tutorium: JavaScript: Hello World 05|Version 4]]
noch relativ schlecht.
Allerdings gibt es noch ein paar Unsauberkeiten, die beseitigt werden sollten:
# In den Initialisierungsdateien  „<code>main3.js</code>“ und  „<code>main3b.js</code>“ sind immer noch konstante Werte enthalten.
# Die Anzahl der Parameter der Konstruktorfunktion ist zu groß.
# In den Initialisierungsdateien ist immer noch zu viel Anwendungscode enthalten.
# Die potentielle Zahl der globalen Größen ist noch zu hoch.
Diese Probleme werden folgendermaßen gelöst:
# Die Konstanten werden in eine [[JSON]]-Datei ausgelagert, die im ersten Schritt von der jeweiligen Initialisierungsdatei eingelesen wird.
# Der Konstruktorfunktion wird das gesamte JSON-Objekt mit allen Initialisierungswerten in einem einzigen Parameter übergeben.
# Es wird eine anwendungsspezifische Initialisierungsdatei „<code>hello.js</code>“ erstellt. Die Initialisierungsfunktion in der Datei „<code>main4.js</code>“ hat nur noch die Aufgabe, die JSON-Datei zu lesen und die darin enthalten Informationen anschließend an die Methode  „<code>hello.init</code>“ weiterzuleiten.
# Es wird '''ein''' globales Objekt namens  „<code>hello</code>“ erstellt, das die gesamte Web-Anwendung enthält.
Erstellen Sie in Ihrem WebStorm-Projekt Kopien Ihrer Anwendungsdateien:
* <code>index3b.html</code> → <code>index4.html</code>
* <code>js/main3b.js</code> → <code>js/main4.js</code>
* <code>js/app3/greet.js</code> → <code>js/app4/greet.js</code>
Im Folgenden wird die HTML-Datei „<code>index4.html</code>“
als HTML-[[Template]] verwendet, {{dh}} als Strukturrahmen. '''Sämtliche''' Texte,
die in diesem Dokument enthalten sind, werden dynamisch mittels JavaScript eingefügt.
In der Datei „<code>index4.html</code>“ 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.
<source lang="javascript">
<!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>
</source>
-->
{{TBD}}
{{TBD}}
==Quellen==
==Quellen==

Version vom 19. Oktober 2017, 08:00 Uhr

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 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

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

Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_JavaScript:_Hello_World_06&oldid=43705“