GlossarWiki - Benutzerbeiträge [de-formal]

HTML5-Tutorium: JavaScript: Hello World 04

2016-10-21T08:10:52Z

Yoshi: /* Erstellen einer Ordnerstruktur */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}
'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld04/web/index1.html <code>index1.html</code>],
[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld04/web/index2.html <code>index2.html</code>],
[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld04/web/index3.html <code>index3.html</code>],
[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld04/web/index3b.html <code>index3b.html</code>],
[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld04/web/index4.html <code>index4.html</code>],
[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld04/web/index5.html <code>index5.html</code>]
([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld04/ SVN-Repository])
==Anwendungsfälle (Use Cases)==
Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_03|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 besser zu strukturieren, {{dh}} zu [[Modul|modularisieren]].

<strong>Bitte beachten Sie, dass ich einige HTML-Elemente und Funktionen des dritten Tutoriums umbenannt habe.
Das heißt, Ihre Lösungen des [[HTML5-Tutorium: JavaScript: Hello World 03|dritten Teil des Tutoriums]] sind vermutlich nicht mehr ganz konsistent mit
der [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld03/Mussterlösung]. Daher ist es evtl. sinnvoll,
wenn Sie den vierten Teil aus Basis der Musterlösung des dritten Teils bearbeiten.
</strong>

===Modularisierung===

Eine Anwendung, wie {{zB}} ein HTML5-Spiel, besteht aus diversen unterschiedlichen Komponenten mit ganz unterschiedlichen Aufgabe.
Bei einem HTML5-Spiel müssen die Spielfiguren, die Spielszenen, die Spiellogik, die Benutzereingaben, die Darstellung das Spiels im Browser
etc. erstellt und verwaltet werden, wobei das Erstellen und Verwalten teilweise während der Spiel-Entwicklung und teilweise
während der Spiel-Ausführung (Runtime) erfolgt. An der Entwicklung eines Spiels sind üblicherweise mehrere oder gar viele
Entwickler gleichzeitig beteiligt. Oft müssen einzelnen Komponenten an neue Endgeräte oder Betriebssysteme angepasst werden.
Beispielsweise muss eine Tastatursteuerung für eine Mobilversion des Spiels durch eine Touch- oder Gestensteuerung ersetzt werden.

Das alles ist nur machbar, wenn man die Anwendung modularisiert, {{dh}} in kleine, möglichst unabhängige
Komponenten unterteilt. Ein großer Feind der Modularisierung sind globale Variablen und Funktionen.
Je mehr Dateien von unterschiedlichen Autoren erstellt werden, desto größer ist die Gefahr, dass es zu Namenskollisionen kommt.
Daher gilt der [[Multimedia-Programmierung: Best Practices#Modularisierung|Grundsatz]]: Verwende so wenig globale Größen wie möglich.

==Erstellen eines neuen Projektes==

Erstellen Sie ein neues Projekt „<code>HelloWorld04</code>“ 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 „<code>css</code>“ und JavaScript-Dateien in einen Ordner namens
„<code>js</code>“ oder „<code>lib</code>“. Sollten es viele CSS- und/oder JavaScript-Dateien werden,
legt man im entsprechenden Ordner geeignete Unterordner an.

Legen Sie im Root-Verzeichnis Ihres Projektes folgende Ordner an:
* <code>web</code>: Der Inhalt dieses Ordners kommt später auf einen echten Web-Server.
* <code>web/css</code>: Hier speichern Sie die CSS-Dateien Ihrer Web-Anwendung.
* <code>web/js</code>
* <code>web/js/app</code>: Hier speichern Sie die von Ihnen geschriebenen JavaScript-Dateien Ihrer Web-Anwendung.
* <code>web/js/lib</code>: Hier speichern Sie die JavaScript-Bibliotheken, die andere JavaScript-Entwickler erstellt haben und die Sie in Ihrer Anwendung einsetzen..

Da in diesem Teil des Tutoriums fünf Web-Anwendungen mit jeweils unterschiedlichem Modularisierungsgrad
erstellt werden, werden hier fünf App-Ordner angelegt:
* <code>web/js/app1</code>: Aufteilung der App in mehrere Objekte und Dateien.
* <code>web/js/app2</code>: Definition einer Klasse <code>Greet</code>.
* <code>web/js/app3</code>: Reduktion der Konstanten in <code>Greet</code>.
* <code>web/js/app4</code>: Weitere Modularisierung der Web-App mit JavaScript-Bordmitteln.
* <code>web/js/app5</code>: Alternative Modularisierung der Web-App mit der JavaScript-Bibliothek <code>RequireJS</code>.

Öffnen Sie im Editorbereich die Datei „<code>index.html</code>“ und verschieben sie in den Ordner „<code>web</code>“, wobei Sie darauf achten sollten,
dass im Verschiebe-Dialogfenster die Option „<code>Search for references</code>“ aktiviert ist.
.
Verschieben sie anschließend die Dateien „<code>main.css</code>“ und „<code>main.js</code>“
in die passenden Ordner „<code>web/css</code>“ bzw. „<code>web/js</code>“. Sie werden feststellen, dass die Verweise in den Link- und Script-Elementen der
Datei „<code>index.html</code>“ automatisch angepasst werden. Verschieben Sie nun die Datei „<code>index.html</code>“ in den Ordner „<code>web</code>“.

Das Ergebnis dieser Aktion ist, dass Ihre Web-Anwendung nicht mehr im Root-Verzeichnis des Projektes liegt, sondern (sauber strukturiert) in unterschiedlichen Unterordnern.
Daher ist es möglich, im Root-Verzeichnis des Projektes weitere projektspezifische Ordner und Dateien anzulegen wie „<code>conf</code>“ und „<code>doc</code>“,
die später nicht auf den Web-Server, auf dem die Anwendung schließlich laufen soll, kopiert werden.

==App1==

Benennen Sie die Dateien „<code>index.html</code>“ und „<code>main.js</code>“ in
„<code>index1.html</code>“ und „<code>main1.js</code>“ um. (Im Laufe des Tutoriums kommen weitere Versionen dieser beiden Dateien dazu.)

===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 <code>head</code>-Bereich des Dokuments.
Dieser wird vollständig geladen, bevor der <code>body</code>-Bereich eingelesen wird. Das heißt aber, dass der Browser keine Inhalte des HTML-Dokuments
darstellen kann, solange er die JavaScript- und CSS-Dateien lädt. Wenn dies zu lange dauert, verliert der Besucher die Geduld und verlässt die Seite
vorzeitig.

Besser wäre es daher andersherum vorzugehen: Es wird zuerst der <code>body</code>-Bereich geladen und dann 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 gerendert 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 <code>html</code>-Tag.
Damit das Problem mit dem falschen Layout nicht auftritt, sollen wichtige CSS-Befehle direkt – {{dh}} als CSS-Befehle innerhalb eines
<code>style</code>-Elements – in die HTML-Datei eingefügt
werden.<ref>{{Quelle|Google (Web)}}, Kapitel „CSS-Bereitstellung optimieren“, https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery</ref>

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 HTML-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#CSS|Multimedia-Programmierung: Best Practices]] beschrieben ist.

In unserer Anwendung haben wir bislang alles richtig gemacht, bis auf die fehlende automatische Komprimierung.
Diese wird im [[HTML5-Tutorium: JavaScript: Hello World 05|fünften Teil des Tutoriums]] beschrieben.

===JavaScript-Dateien===

Für JavaScript-Dateien empfiehlt Google ebenfalls, diese nicht schon zu Beginn zu laden.<ref>{{Quelle|Google (Web)}}, Kapitel „CSS-Bereitstellung optimieren“, https://developers.google.com/speed/docs/insights/BlockingJS</ref> Dieser Vorschlag ist sehr sinnvoll.

Entfernen Sie das <code>script</code>-Element aus dem HTML-Header-Bereich und fügen Sie es vor dem schließenden <code>body</code>-Tag ein:

<source lang="html5">
...
<script type="text/javascript" src="js/main1.js"></script>
</body>
</source>

===Globale Funktionen als Methoden===

Erstellen sie die Datei „<code>js/app1/greet.js</code>“ und fügen Sie ein weiteres Script-Element in die Datei „<code>index1.html</code>“
ein (dem dem Skript „<code>main1.js</code>“):

<source lang="html5">
...
<script type = "text/javascript" src = "js/app1/greet.js"></script>
<script type="text/javascript" src="js/main1.js"></script>
</body>
</source>

Fügen Sie in die Datei „<code>greet.js</code>“ ein Objekt ein, dass die beiden Methoden
„<code>sayHello</code>“ und „<code<sayHelloOnEnter</code>“ enthält.

<source lang="javascript">
/**
* @namespace greet
* Contains methods to say hello to the user of the web app.
*/
var
greet =
{
/**
* Welcomes the user of the web app1 by displaying a welcome message
* that includes his name. The name is fetched from a text input field.
*/
sayHello:
function()
{
document.getElementById('heading_hello').innerHTML =
'Hello, ' + document.getElementById('input_name').value + '!';
document.getElementById('section_form').classList.add('hidden');
document.getElementById('section_hello').classList.remove('hidden');
},

/**
* An keyboard event observer. It tests whether the enter key has been pressed.
* If so, the greet method is activated. Default reactions of the browser are
* disabled.
* @param {KeyboardEvent} p_event - A standard JavaScript keyboard event object
* (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
*/
sayHelloOnEnter:
function(p_event)
{
if ((p_event.code === 'Enter' || p_event.keyCode === 13) &&
document.activeElement === document.getElementById('input_name')
)
{
p_event.preventDefault();
p_event.stopPropagation();
greet.sayHello();
}
}
};
</source>

In der Datei „<code>main1.js</code>“ werden dagegen alle globalen Funktionen entfernt. Die Funktion „<code>init</code>“
wird durch eine anonyme Funktion ersetzt, die sofort nach ihrer Definition auch ausgeführt wird.
Da die Datei „<code>main1.js</code>“ als Letztes geladen wird, sind alle Objekte, auf die
während der Initialisierung zugegriffen werden muss, bereits vorhanden.

<source lang="javascript">
// Initialize the app.
(function()
{
document.getElementById('button_submit')
.addEventListener('click', greet.sayHello);

window.addEventListener('keydown', greet.sayHelloOnEnter);
}());
</source>

Testen Sie Ihre Anwendung und speichern Sie sie zu guter Letzt im Repository.

==App2==

Ein wesentliches [[Programmierprinzip]] ist das Prinzip der „Wiederverwendbarkeit“.
Man solle Code so schreiben, dass man ihn möglichst häufig wiederverwenden kann.
Jede Wiederverwendung bereits bestehende Codes bedeutet Arbeitsersparnis.
Man kann mit einem einfachen Test überprüfen, ob man Code erstellt hat, der
sogar innerhalb desselben Projektes wiederverwendbar ist. Man baut die neu
erstellte Anwendung einfach zweimal in ein HTML-Dokument ein. Wenn beide
„Instanzen“ der Anwendung unabhängig voneinander funktionieren, hat man
alles richtig gemacht.

Zurzeit geht das bei unserer Anwendung noch nicht. Es gibt nämlich nur
ein Objekt „<code>greet</code>“, das nicht für mehrere Anwendungen parallel eingesetzt werden kann.
Wir müssen also bei Bedarf neue <code>greet</code>-Objekte erzeugen können.
Das geschieht in JavaScript mit Hilfe von sogenannten [[Konstruktor]]funktionen.

Erstellen Sie in Ihrem WebStorm-Projekt Kopien Ihre Anwendungsdateien:

* <code>index1.html</code> → <code>index2.html</code>
* <code>js/main1.js</code> → <code>js/main2.js</code>
* <code>js/app1/greet.js</code> → <code>js/app2/greet.js</code>

In der Datei „<code>index2.html</code>“ müssen Sie dafür sorgen, dass
die neuen JavaScript-Dateien anstelle der alten geladen werden.
Und passen Sie den Titel im HTML-Header an.

Das Objekt „<code>greet</code>“ der Datei „<code>js/app2/greet.js</code>“
wird durch der folgende [[Konstruktor]]funktion „<code>Greet</code>“ ersetzt:

<source lang="javascript">
/**
* @class
* @classdesc Contains methods to say hello to the user of the web app.
*/
function Greet()
{
var l_this = this; // this-hack: l_this contains the new object

/**
* Welcomes the user of the web app1 by displaying a welcome message
* that includes his name. The name is fetched from a text input field.
*/
l_this.sayHello = // this.sayHello = ...
function()
{
document.getElementById('heading_hello').innerHTML =
'Hello, ' + document.getElementById("input_name").value + '!';
document.getElementById('section_form').classList.add('hidden');
document.getElementById('section_hello').classList.remove('hidden');
};

/**
* An keyboard event observer. It tests whether the enter key has been pressed.
* If so, the greet method is activated. Default reactions of the browser are
* disabled.
* @param {KeyboardEvent} p_event - A standard JavaScript keyboard event object
* (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
*/
l_this.sayHelloOnEnter = // this.sayHelloOnEnter = ...
function(p_event)
{
if ((p_event.code === 'Enter' || p_event.keyCode === 13) &&
document.activeElement === document.getElementById('input_name')
)
{
p_event.preventDefault();
p_event.stopPropagation();
l_this.sayHello(); // NOT this.sayHello();
}
}
}
</source>

In JavaScript kann jede Funktion auch als [[Konstruktor]], {{dh}}
zum Erzeugen von neuen Objekte verwendet werden, indem man das Schlüsselwort
„<code>new</code>“ voranstellt:

<source lang="javascript">
var l_greet = new Greet();
</source>

In einer Konstruktorfunktion wird üblicherweise kein <code>return</code>-Befehl eingefügt.
Ein Konstruktor verhält sich wie eine [[Prozedur (Informatik)|Prozedur]] und nicht wie
eine [[Funktion (Informatik)|Funktion]]. Sie erstellt – als [[Seiteneffekt]] – ein neues Objekt und initialisiert es.
Allerdings wird diese Objekt nirgendwo gespeichert, sondern – automatisch – als Ergebnis
des Befehls <code>new Greet()</code> zurückgeliefert. Anschließend wird es üblicherweise irgendwo gespeichert,
in einer [[Variable]]n, in einem [[Array]], in einem [[Objekt]] oder in einem [[Funktionsparameter]].

Im Funktionsrumpf selbst kann über die Spezialvariable „<code>this</code>“ auf das neu erstellte Objekt
zugegriffen werden. Dem Objekt können mittels „<code>this.sayHello = ...</code>“, „<code>this.sayHelloOnEnter = ...</code>“
etc. [[Attribut (Objekt)|Attribute]] zugewiesen werden. Sie speichern in dem neu erstellten Objekt wieder dieselben Methoden,
wie im Objekt „<code>greet</code>“ der Anwendung „app1“.

Beachten Sie, dass in der Definition der so genannte <code>this</code>-Hack zum Einsatz kommt.
Das Objekt <code>this</code> wird in einer lokalen Variablen <code>l_this</code> gespeichert.
Und anschließend wird diese lokale Variable anstelle von <code>this</code> benutzt.
Für die Definition der Attribute „<code>sayHello</code>“ und „<code>sayHelloOnEnter</code>“ macht es keinen Unterschied,
ob man „<code>this.sayHello...</code>“ oder „<code>l_this.sayHello</code>“ schreibt.

Allerdings wird auch innerhalb des Methodenrumpfes von „<code>sayHelloOnEnter</code>“ auf das neu erstellt
Objekt zugegriffen: <code>l_this.sayHello();</code>. Und hier könnte nun nicht <code>this.sayHello();</code>
verwendet werden. Der Grund ist, dass der Methodenrumpf erst ausgeführt wird, wen die Methode „<code>sayHelloOnEnter</code>“
zu irgendeinem anderen Zeitpunkt von irgendeinem anderen Objekt aufgerufen wird. Und <code>this</code> bezeichnet
'''immer''' den Aufrufer eine Methode, und nicht das Objekt, das die Methode beinhaltet. Aber im Aufrufer der
Methode ist „<code>sayHello</code>“ {{iAllg}} gar nicht definiert oder falls doch, dann meist mit einer vollkommen anderen
Funktionalität. Die Spezialvariable „<code>this</code>“ verhält sich hier vollkommen anders als sämtliche andere Variablen und Parameter.
(Fachsprachlich: In JavaScript ist die Variable „<code>this</code>“ [[Variable#Bindung|dynamisch gebunden]], alle übrigen Variablen sind
[[Variable#Bindung|statisch gebunden]].) Daher kopiert man den Wert von „<code>this</code>“ in eine lokale Variable,
auf die die Methode „<code>sayHelloOnEnter</code>“ auch dann Zugriff hat, wenn Sie von einem anderen Objekt aufgerufen wird.

'''Tipp''': Definieren Sie innerhalb einer Konstruktorfunktion immer eine lokale Variable „<code>var l_this = this</code>“ und verwenden Sie innerhalb
des Konstruktors nur „<code>l_this</code>“ und nie „<code>this</code>“. (Sie können natürlich auch einen anderen Alternativnamen für
„<code>this</code>“ verwenden. Übliche Bezeichnungen sind „<code>that</code>“, „<code>self</code>“ oder „<code>me</code>“.)

'''Anmerkung''': Eigentlich ist der <code>this</code>-Hack unsauber. Besser wäre es, die Methode „<code>bind</code>“ zu verwenden
(siehe [https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Function/bind MDN] oder [http://stackoverflow.com/questions/2236747/use-of-the-javascript-bind-method Stackoverflow]).

<source lang="javascript">
this.sayHelloOnEnter =
function(p_event)
{
...
this.sayHello();
...
}.bind(this)
</source>

Aber für JavaScript-Anfänger ist die Verwendung des <code>this</code>-Hacks deutlich einfacher.

Fügen Sie die zuvor erwähnte Zeile

<source lang="javascript">
var l_greet = new Greet();
</source>
als erste Zeile '''in''' Ihre Initialisierungsfunktion (Datei „<code>main2.js</code>“)
ein und ersetzen Sie in derselben Funktion die beiden Zugriffe auf das globale Objekt
„<code>greet</code>“ durch Zugriffe auf das lokale Objekt „<code>l_greet</code>“.

Danach sollte Ihre Anwendung (Datei „<code>index2.html</code>“) wieder wie gewohnt laufen.

==App3==

Leider bringt uns hinsichtlich der Wiederverwendbarkeit die „Verbesserung“, die wir in App2 gegenüber App1
vorgenommen haben, gar nichts. Wir können jetzt zwar beliebig viele <code>greet</code>-Objekte
mit Hilfe von „<code>new Greet()</code>“ erstellen.
Aber wir haben nichts davon, da alle diese Objekte dieselben HTML-Elemente
im HTML-Dokument lesen und ändern. Das heißt, wir müssen die Konstanten und
am Besten auch gleich noch die Zugriffe auf globale Variablen aus de rKonstruktorfunktion
„<code>greet</code>“ verbannen.

Erstellen Sie in Ihrem WebStorm-Projekt Kopien Ihre Anwendungsdateien:

* <code>index2.html</code> → <code>index3.html</code>
* <code>js/main2.js</code> → <code>js/main3.js</code>
* <code>js/app2/greet.js</code> → <code>js/app3/greet.js</code>

In der Datei „<code>index3.html</code>“ müssen Sie wiederum dafür sorgen, dass
die neuen JavaScript-Dateien anstelle der alten geladen werden.
Und passen Sie auch wieder den Titel im HTML-Header an.

Ersetzen Sie nun die Konstruktorfunktion der Datei „<code>js/app3/greet.js</code>“
durch folgenden Konstruktor:

<source lang="javascript">
/**
* @class
* @classdesc Contains methods to say hello to the user of the web app.
*
* @param p_document {object} A DOM object (usually the global object <code>document</code>)
* @param p_section_form {string} The ID of the HTML element that contains the form section.
* @param p_input_name string} The ID of the text field via which the user passes her/his name.
* @param p_section_hello {string} The ID of the HTML element that contains the welcome section.
* @param p_output_hello {string} The ID of the HTML element into which the greeting is to be put.
* @param p_hello {string} The hello test to be displayed.
*/
function Greet(p_document,
p_section_form, p_input_name,
p_section_hello, p_output_hello,
p_hello
)
{
var l_this = this; // this-hack

/**
* Welcomes the user of the web app1 by displaying a welcome message
* that includes his name. The name is fetched from a text input field.
*/
l_this.sayHello =
function()
{
p_document.getElementById(p_output_hello).innerHTML =
p_hello + ', ' + p_document.getElementById(p_input_name).value + '!';
p_document.getElementById(p_section_form).classList.add('hidden');
p_document.getElementById(p_section_hello).classList.remove('hidden');
};

/**
* An keyboard event observer. It tests whether the enter key has been pressed.
* If so, the greet method is activated. Default reactions of the browser are
* disabled.
* @param {KeyboardEvent} p_event - A standard JavaScript keyboard event object
* (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
*/
l_this.sayHelloOnEnter =
function(p_event)
{
if ((p_event.code === 'Enter' || p_event.keyCode === 13) &&
p_document.activeElement === p_document.getElementById(p_input_name)
)
{
p_event.preventDefault();
p_event.stopPropagation();
l_this.sayHello(); // NOT this.sayHello();
}
}
}
</source>

Dieser Konstruktor enthält diverse Konstanten nicht mehr, wie {{zB}} <code>'input_name'</code>. Anstelle dessen gibt es diverse Parameter,
in denen diese Werte dem Konstruktor übergeben werden können: <code>p_input_name</code>. Der Zugriff auf das globale Objekt
„<code>document</code>“ wurde auch gleich noch durch eine Zugriff auf einen lokalen Parameter „<code>p_document</code>“ ersetzt.

Damit ist es jetzt möglich, <code>greet</code>-Objekte für ganz unterschiedliche HTML-Elemente zu definieren.

Ersetzen Sie zunächst die Initialisierungsmethode in der Datei „<code>main3.js</code>“
durch folgenden Code:

<source lang="javascript">
(function(p_window, Greet)
{
var l_document = p_window.document, // The window object contains the document object.
l_greet = new Greet(l_document,
'section_form', 'input_name',
'section_hello', 'heading_hello',
'Hello'
);

l_document.getElementById('button_submit')
.addEventListener('click', l_greet.sayHello);

p_window.addEventListener('keydown', l_greet.sayHelloOnEnter);
}(window, Greet));
</source>

In dieser Datei werden noch gibt es noch zwei globale Variablen, die Browser-Variable „<code>window</code>“
sowie die von uns definierte Konstruktorfunktion „<code>Greet</code>“. Diese beiden globalen Größen werden der
anonymen Funktion als Argumente übergeben. Innerhalb des Rumpfes der Initialisierungsfunktion wird dann nicht
mehr auf globale Größen zugegriffen, sondern nur noch auch Funktionsparameter. Dies ist ein übliches
Vorgehen, um explizit klar zu machen, auf welche globalen Größen zugegriffen wird.

Dem Konstruktor „<code>Greet</code>“ werden jetzt alle Information, die er benötigt,
explizit übergeben. Dies ist zum einen das HTML-Dokument, das mit Hilfe der von ihm erstellten
Methoden manipuliert werden soll, dann eine Reihe von ID-Attribut-Namen, die diejenigen
HTML-Elemente bezeichnen, die die Greet-Methoden lesen oder ändern sollen, sowie
der String „<code>'Hello'</code>“ der zur Begrüßung des Benutzers verwendet werden soll.
Alternativ könnte er auch mit „<code>Hallo</code>“ oder „<code>Howdy</code>“ begrüßt werden.

Nun müsste Ihre Anwendung „<code>index3.html</code>“ wieder laufen. Wenn Sie es denn tut, vergessen Sie nicht, sie
im Repository zu speichern.

Anschließend sollten Sie in Ihrem WebStorm-Projekt folgende Kopien erstellen:

* <code>index3.html</code> → <code>index3b.html</code>
* <code>js/main3.js</code> → <code>js/main3b.js</code>

Die Datei „<code>index3b.html</code>“ soll abermals die JavaScript-Datei „<code>js/app3/greet.js</code>“
verwenden, dafür aber „<code>js/main3b.js</code>“ an Stelle von „<code>js/main3.js</code>“ laden.

Fügen Sie in der Datei „<code>index3b.html</code>“ in alle ID-Attribut-Bezeichner eine <code>1</code> ein:
<code>section_form</code> → <code>section1_form</code> etc.

Schließen Sie dann die beiden Sections „<code>section1_form</code>“ und „<code>section1_hello</code>“
in ein <code>div</code>-Element ein und duplizieren Sie diese <code>div</code>-Element (natürlich samt Inhalt) anschließend.
Sie werden feststellen, dass WebStorm eine Reihe von Fehlern der Art „<code>Duplicate id reference</code>“ meldet.
Das ist nicht weiter verwunderlich, da Sie ja insbesondere alle ID-Attribut-Bezeichner dupliziert haben.
Sie müssen daher im zweiten <code>div</code>-Element alle Einser in den ID-Attribut-Bezeichnern durch Zweier ersetzen.

Nun können Sie noch versuchen, die beiden <code>div</code>-Elemente mittels CSS nebeneinander zu legen. Für den
angestrebten Test, ob Sie die Hello-World-App in einem HTML-Dokument zweimal starten können, ist das allerdings irrelevant.

Passen Sie nun Ihre Datei „<code>main3b.js</code>“ an die neuen Gegebenheiten an:
Erzeugen Sie zwei Greet-Objekte „<code>greet1</code>“ und „<code>greet2</code>“ (für jedes der beiden neuen <code>div</code>-Elemente eines),
fügen Sie passende <code>click</code>-Event-Listener für die beiden Buttons „<code>button1_submit</code>“ sowie
„<code>button2_submit</code>“ hinzu und sorgen Sie zu guter Letzt dafür, dass beide Methoden „<code>l_greet1.sayHelloOnEnter</code>“
und „<code>l_greet2.sayHelloOnEnter</code>“ bei jedem Tastendruck aufgerufen werden.

Wenn Sie alles richtig gemacht haben, sollten jetzt in Ihrer Web-Anwendung „<code>index3b.html</code>“
zwei Hello-World-Anwendungen parallel laufen: [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld04/web/index3b.html <code>index3b.html</code>]

==App4==
Hinsichtlich der Wiederverwendbarkeit der Module ist die Version 3 der Web-Anwendung schon ganz gut.
Allerdings gibt es noch ein paar Unsauberkeiten, die beseitigt werden sollten:

# In den Initialisierungsdateien „<code>main3.js</code>“ und „<code>main4.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/main3.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/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>

===Modularisierung===

Um möglichst wenige globale Größen definieren zu müssen, legt man für eine
Anwendung oder eine Bibliothek typischerweise eine einzige globale Variable an, die ein Objekt enthält.
In diesem Objekt wird die gesamte Anwendung (Daten, Klassen, Funktionen etc.) gespeichert.

Für die Hello-World-Anwendung wird eine globale „Namensraum-Variable“ namens „<code>hello</code>“ verwendet.
In jeder Datei, in der ein Teilaspekt der Anwendung definiert wird, kommt folgender Rahmencode zum Einsatz:

<source lang="javascript">
/** @namespace hello */
var hello =
(function(p_hello)
{ "use strict";

// anwendungsspezifischer Code

return p_hello;
}(hello ? hello : {}));
</source>

In der Variablen „<code>hello</code>“ wird das Ergebnis eines Aufrufs einer anonymen Funktion gespeichert.
Dieser Funktion wird als Argument der Inhalt der Variablen „<code>hello</code>“ oder, falls dieses noch nicht
existiert, ein leeres Objekt als Argument übergeben (<code>hello ? hello : {}</code>). Die anonyme Funktion
fügt irgendwelche Daten, Klassen oder Funktionen in dieses Objekt ein gibt es dann als Ergebnis zurück.

Das hat den Effekt, dass beim ersten Aufruf einer derartigen Funktion eine neues Objekt erstellt und
in „<code>hello</code>“ gespeichert wird, bei jedem weiteren Aufruf einer derartigen Funktion wird
das bestehende <code>hello</code>-Objekt einfach um weitere Inhalte ergänzt. Wenn die Definition
eines Namensraums über mehrere Dateien verteilt ist – wie dies üblicherweise der Fall ist –,
ist es egal in welcher Reihenfolge diese Dateien geladen werden. Sie können daher auch [[asynchron]]
geladen werden. Wichtig ist nur, dass eine Datei nicht die Inhalte einer anderen Datei überschreiben darf.

Die Datei „<code>js/app4/greet.js</code>“ sieht nun folgendermaßen aus:

<source lang="javascript">
/** @namespace hello */
var hello =
(function(p_hello)
{ "use strict";

/**
* @class hello.Greet
* @classdesc Contains methods to say hello to the user of the web app.
*
* @param p_document A DOM object (usually the global object <code>document</code>)
* @param p_init A JSON object containing all init data.
*/
p_hello.Greet =
function(p_document, p_init)
{
var l_this = this; // this-hack

/**
* Welcomes the user of the web app1 by displaying a welcome message
* that includes his name. The name is fetched from a text input field.
*/
l_this.sayHello =
function()
{
var l_elements = p_init.HTMLElements,
l_text = p_init.text,
l_hidden = p_init.css.hidden,
l_name = p_document.getElementById(l_elements.inputName).value;

p_document.getElementById(l_elements.welcome) .innerHTML = l_text.welcome;
p_document.getElementById(l_elements.hello) .innerHTML = l_text.hello.replace('$1', l_name);
p_document.getElementById(l_elements.sectionHello).classList.remove(l_hidden);
p_document.getElementById(l_elements.sectionForm) .classList.add(l_hidden);
};

/**
* An keyboard event observer. It tests whether the enter key has been pressed.
* If so, the greet method is activated. Default reactions of the browser are
* disabled.
*
* @param {KeyboardEvent} p_event - A standard JavaScript keyboard event object
* (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
*/
l_this.sayHelloOnEnter =
function(p_event)
{
if ((p_event.code === 'Enter' || p_event.keyCode === 13) &&
p_document.activeElement ===
p_document.getElementById(p_init.HTMLElements.inputName)
)
{
p_event.preventDefault();
p_event.stopPropagation();
l_this.sayHello(); // NOT this.sayHello();
}
};
};

return p_hello;
}(hello ? hello : {}));
</source>

Gegenüber der Version 3 dieser Datei hat sich folgendes geändert:

* Es wird keine globale Konstruktorfunktion „<code>Greet</code>“ mehr definiert. Diese Konstruktorfunktion wird vielmehr in der Namensraum-Variablen „<code>hello</code>“ gespeichert: „<code>hello.Greet</code>“
* Die Konstruktorfunktion hat nur noch zwei Parameter: „<code>p_window</code>“ und „<code>p_init</code>“. Der erste Parameter enthält wie in Version 3 das globale Window-Objekt, der zweite ein JSON-Objekt, in dem alle Initialisierungsinformationen enthalten sind.
* Im Rumpf der Konstruktorfunktion werden alle notwendigen Informationen aus <code>p_init</code> extrahiert: Der Name der Formular-Section, der Name des Text-Eingabefelds, der Text der Hello-Nachricht etc.

Legen Sie gleich noch die Datei „<code>js/app4/hello.js</code>“ für die Web-App an:
<source lang="javascript">
/** @namespace hello */
var hello =
(function(p_hello)
{ "use strict";

/**
* Initializes the HTML sections of the app that are
* stated in <code>p_init</code>.
*
* @param p_window The browser window that contains the HTML document to be initialized.
* @param p_init The initialization info for the form section and welcome section.
*/
p_hello.init =
function(p_window, p_init)
{
var l_document = p_window.document,
l_elements = p_init.HTMLElements,
l_text = p_init.text,
l_greet = new p_hello.Greet(l_document, p_init);

l_document.getElementById(l_elements.headingForm) .innerHTML = l_text.title;
l_document.getElementById(l_elements.inputNameLabel).innerHTML = l_text.query;
l_document.getElementById(l_elements.buttonReset) .innerHTML = l_text.reset;
l_document.getElementById(l_elements.buttonSubmit) .innerHTML = l_text.submit;
l_document.getElementById(l_elements.buttonSubmit)
.addEventListener('click', l_greet.sayHello);
p_window.addEventListener('keydown', l_greet.sayHelloOnEnter);
};

return p_hello;
}(hello ? hello : {}));
</source>

Sie ist wieder aufgebaut, wie zuvor beschrieben: Sie definiert, falls notwendig, das globale Objekt „<code>hello</code>“
und fügt anschließend eine Funktion „<code>init</code>“ in dieses Objekt ein. Die Methode „<code>hello.init</code>“
hat dieselben Parameter, wie die zuvor definierte Konstruktorfunktion und erwartet denselben Input.
Ihre Aufgabe ist es, die derzeit noch leeren Text-Elemente des HTML-Templates mit Inhalt zu füllen
soweit der Inhalt schon bekannt ist (der Name des Benutzers ist noch unbekannt). Außerdem erstellt Sie
ein passendes Greet-Objekt mit Hilfe der Konstruktorfunktion „<code>hello.Greet</code>“ und weist dem
Submit-Button die darin enthaltene Methode „<code>sayHello</code>“ zu. Außerdem definiert sie
eine Eventlistener, der im Falle eines Key-Down-Ereignisses die Methode „<code>sayHelloOnEnter</code>“
ausführt.

===Die JSON-Datei===
Zur Initialisierung der Web-Anwendung werden JSON-Dateien benötigt.

Eine JSON-Datei enthält genau ein JavaScript-Objekt in textueller Darstellung.
Allerdings werden nur folgende Datentypen unterstützt<ref>[http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf ECMA International, The JSON Data Interchange Format, 2013]</ref>:
* Nullwert: <code>null</code>
* Boolesche Werte: <code>true</code>, <code>false</code>
* Zahlen
* Strings
* Arrays
* Objekte

Insbesondere Funktionen können in einer JSON-Datei nicht enthalten sein. Außerdem müssen
Strings immer in doppelte Anführungszeichen eingeschlossen sein, einfache Anführungszeichen sind nicht erlaubt.
Attributnamen werden ebenfalls durch Strings dargestellt. Auch diese müssen gemäß ECMA-Standard in doppelte
Anführungszeichen eingeschlossen werden. Außerdem können in JSON-Dateien (leider) keine Kommentare
enthalten sein.

Folgendes Objekt ist zwar ein korrektes Javascript-Objekt, aber kein gültiges JSON-Objekt:

<source lang="javascript">
{ a: 55, 'b': 'Wolfgang' }
</source>

In JSON muss dieses Objekt folgendermaßen geschrieben werden:

<source lang="javascript">
{ "a": 55, "b": "Wolfgang" }
</source>

Diese Objekt ist auch ein korrektes JavaScript-Objekt. Da die Syntaxregeln von JSON strenger sind
als von JavaScript, gilt folgende Regel: Jedes JSON-Objekt ist auch ein JavaScript-Objekt, aber nicht
jedes JavaScript-Objekt ist auch ein JSON-Objekt.

Ein Problem bereitet die Verwendung von JSON. Da ein JSON-Objekt beliebig aufgebaut sein kann,
kann eine IDE nicht überprüfen, ob ein bestimmtes Attribut oder Element in einem JSON-Objekt
mit Sicherheit enthalten ist oder nicht. Das hat {{zB}} zur Folge, das WebStorm bei einem Zugriff
auf eine Attribut in einem JSON-Objekt den Attributnamen unterringelt und mit der Warnung
„<code>Unresolved variable ...</code>“ versieht.

Ein Lösung für dieses Problem ist die Verwendung von [http://json-schema.org/ JSON Schema].
Aber darauf wird zunächst verzichtet.

Legen Sie für die zuvor definierte HTML-Datei „<code>index4.html</code>“ folgende JSON-Initialisierungsdatei
unter dem Namen „<code>web/init/hello_de.json</code>“ an:

<source lang="javascript">
{
"HTMLElements":
{
"sectionForm": "section1_form",
"headingForm": "heading1_form",
"inputNameLabel": "label1_name",
"inputName": "input1_name",
"buttonReset": "button1_reset",
"buttonSubmit": "button1_submit",
"sectionHello": "section1_hello",
"hello": "heading1_hello",
"welcome": "paragraph1_hello"
},

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

"css":
{
"hidden": "hidden"
}
}
</source>

Diese Datei besteht aus einem anonymen Objekt. Es enthält seinerseits drei Objekte „<code>HTMLElements</code>“,
„<code>text</code>“ und „<code>css</code>“, die für die Initialisierung der Web-Anwendung gedacht sind.
Das Objekt „<code>HTMLElements</code>“ enthält sämtliche ID-Attribut-Bezeichner der Web-Anwendung.
Wenn das JSON-Objekt im beispielsweise im Parameter „<code>p_init</code>“ der Web-Anwendung übergeben wird,
kann diese den Namen des Formularabschnitts mittels „<code>p_init.HTMLElements.sectionForm</code>“ ermitteln.

Im Objekt „<code>text</code>“ sind alle Texte enthalten, die zu gegebener Zeit in das HTML-Dokument an die geeignete
Stelle geschrieben werden sollen. Der Text „<code>text</code>“ enthält „<code>$1</code>“ als Platzhalter.
Dieser Platzhalter soll von der Anwendung durch den Namen des Benutzers ersetzt werden, nachdem er ihn eingegeben hat.

In Objekt „<code>css</code>“ sind alle Namen von CSS-Klassen enthalten, die von der Web-Anwendung zur Laufzeit
zu HTML-Elementen hinzugefügt oder aus HTML-Elementen entfernt werden. Der Bezeichner, der der Anwendung bekannt ist
(„<code>hidden</code>“), stimmt in diesem Fall mit dem Namen der zugehörigen CSS-Klasse überein. Das ist nicht verboten.

Erstellen Sie analog die Datei „<code>web/init/hello_en.json</code>“. Diese Datei soll für die zweite Web-Anwendung
definiert werden, die allerdings englischsprachige Texte enthält (Sie erinnern sich? In <code>index4.html</code>
laufen zwei unabhängige Web-Anwendungen parallel).

===Das Laden der JSON-Dateien===

Für das [[asynchron]]e Laden von beliebigen Dateien von einem Web-Server gibt es in JavaScript den Befehl „<code>XMLHttpRequest</code>“.
Wie man am Namen sieht, war er ursprünglich für das Laden XML-Dateien vorgesehen. Heute kann dieser Befehl allerdings für
jede Art von Datei verwendet werden. Sie könnten jetzt natürlich die Dokumentation (https://wiki.selfhtml.org/wiki/JavaScript/XMLHttpRequest)
lesen und den Befehl dann verwenden. Einfacher ist es jedoch, wenn Sie von mir erstellte die Datei
„<code>[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld04/web/js/lib/wk/wk_ajax.js wk_ajax.js] </code>“
aus dem Glossar-Repository herunterladen und in Ihrem Projekt unter dem Namen „<code>web/js/lib/wk/wk_ajax.js</code>“ speichern.

Dieses Module stellt unter der globalen Variablen „<code>wk</code>“ – diese globale Variable ist für meine Module reserviert. :-) –
im Modul „<code>wk.ajax</code>“ mehrere Methoden zum Laden von Dateien bereit. Zum Laden von JSON-Dateien
sollten Sie „<code>wk.ajax.getJSON</code>“ verwenden (obwohl es mit „<code>wk.ajax.getFile</code>“ auch ginge; Sie müssten
dann allerdings den Inhalt der Datei, der als String geliefert wird, noch in ein JavaScript-Objekt umwandeln).

Diese Methode erwartet drei Argumente, einen URI, der den Speicherort der JSON-Datei beschreibt und zwei Callback-Funktionen.
Die erste Funktion wird aufgerufen, sobald die JSON-Datei erfolgreich geladen wurde. Ihr wird das geladen JSON-Objekt als Argument
übergeben. Die zweite Callback-Funktion wird aufgerufen, falls beim Laden etwas schief gehen sollte. Die Angabe dieser Funktion ist
optional. In der Musterlösung wurde Sie definiert, hier wird darauf verzichtet.

Die Initialisierungsfunktion (Datei „<code>main4.js</code>“) sieht nun folgendermaßen aus:

<source lang="javascript">
// Initialize the app.
(function(p_window, p_wk, p_hello)
{ "use strict";

var l_json_files = ['init/hello_de.json', 'init/hello_en.json'];

for (var i in l_json_files)
p_wk.ajax.
getJSON
( l_json_files[i], // Load the JSON file.
function(p_init) // If ready, perform the callback function.
{ p_hello.init(p_window, p_init); } // Initialize the corresponding hello section.
);
}(window, wk, hello));
</source>

Die Initialisierungsfunktion liest die beiden zuvor erstellten JSON-Dateien ein
und reicht jeweils das daraus erzeugte JSON-Objekt „<code>main4.js</code>“ an die Initialisierungsfunktion der Web-Anwendung weiter.
Beachten Sie, dass die Reihen folge, in der die beiden JSON-Dateien geladen wird, nicht feststeht. Sie werden parallel geladen. Sobald eine
Datei vollständig geladen wurde, wird die zugehörige Callback-Funktion

<source lang="javascript">
function(p_init) { p_hello.init(p_window, p_init); }
</source>

ausgeführt. Dieser wird im Parameter „<code>p_init</code>“ das zugehörige JSON-Objekt überreicht.
Sie reicht es (zusammen mit die Window-Objekt) an die Methode „<code>p_hello.init</code>“ weiter.

==App5==

Im Prinzip kann die in App4 vorgestellte Lösung zur Modularisierung einer Web-Anwendung
gut eingesetzt werden. Allerdings hat sie immer noch zwei Schwächen:

* Der Rahmencode, der in jeder Datei der Anwendung verwendet werden muss, ist lästig. (Das ist ein kleineres Problem.)
* Es gibt immer noch die globale Variable „<code>hello</code>“. Wenn man viele Bibliotheken verwendet, die auf diese Weise realisiert werden, gibt es wieder viele globale Variable. Und damit steigt das Risiko von Namenskollisionen.

Schöner wäre es, wenn JavaScript die Modularisierung von sich aus unterstützen würde. Das ist tatsächlich geplant. In EcmaScript 6
gibt es zu diesem Zweck die Befehle „<code>[https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/import import]</code>“
und „<code>[https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/export export]</code>“.
Leider unterstützen die meisten Browser dies Befehle noch nicht.

Solange dies der Fall ist, kann man auf JavaScript-Bibliotheken zurückgreifen, die dieselbe Aufgabe (wenn auch weniger elegant) erfüllen.
Hier könnte die Bibliothek „<code>RequireJS</code>“ zum Einsatz (http://requirejs.org/). An der Prinzipiellen Struktur der Anwendung ändert sich nichts.
Nur die Art, wie Module definiert und geladen werden, wird angepasst.

Erstellen Sie in Ihrem WebStorm-Projekt letztmalig Kopien Ihre Anwendungsdateien:

* <code>index4.html</code> → <code>index5.html</code>
* <code>js/main4.js</code> → <code>js/main5.js</code>
* <code>js/app4/greet.js</code> → <code>js/app5/greet.js</code>
* <code>js/app4/hello.js</code> → <code>js/app5/hello.js</code>

In der Datei „<code>index5.html</code>“ müssen Sie wiederum dafür sorgen, dass
die neuen JavaScript-Dateien anstelle der alten geladen werden.
Und passen Sie auch wieder den Titel im HTML-Header an.

Als nächstes müssen Sie, um <code>RequireJS</code> nutzen zu können, den Ordner „<code>web/js/lib/require</code>“
erstellen und drei Dateien dort speichern:
* <code>[http://requirejs.org/docs/release/2.3.2/comments/require.js require.js]</code>
* <code>[https://raw.githubusercontent.com/millermedeiros/requirejs-plugins/master/lib/text.js text.js]</code>
* <code>[https://raw.githubusercontent.com/millermedeiros/requirejs-plugins/master/src/json.js json.js]</code>

===Modularisierung mit RequireJS===

Wenn man konsequent RequireJS zur Modularisierung seine Anwendung
einsetzt, gibt es neben den globalen Objekten des Browsers (<code>window</code>,
<code>document</code> etc.) nur noch das globales Objekt „<code>require</code>“ sowie die globale
Funktion „<code>define</code>“ zum Erstellen neuer Module.

Es wird auch nur noch eine einzige JavaScript-Datei statisch geladen:
„<code>require.js</code>“. Alle anderen Dateien werden dynamisch geladen.
Die in diesen Dateien enthaltenen Module werden mittels
Callback-Funktionen an andere Module übergeben. Auf diese
Weise ist sicher gestellt, dass man keine anderen globalen
Variablen und Funktionen mehr benötigt.

RequireJS-Moduldefinitionen sollten gemäß der AMD-Spezifikation
(AMD = [[WikipediaEN:Asynchronous_module_definition|Asynchronous Module Definition]]) erfolgen. RequireJS
kann allerdings auch Biliotheken wie {{zB]] „<code>[https://jquery.com/ jQuery]</code>“ laden, die nicht
gemäß dieser Spezifikation erstellt wurden.

Für RequireJS gibt es einige Plugins. Eines davon ermöglicht
das Lesen von JSON-Dateien („<code>json.js</code>“). Dieses Plugin wird verwendet,
um die Dateien „<code>init/hello_xx.json</code>“ einzulesen.

Wenn man mit Hilde von „<code>define</code>“ ein neues (AMD-)Modul definiert,
gibt man {{iAllg}} eine ganze Liste von Modulen an, auf denen das neue Modul basiert.
Beispielsweise benötig das Modul „<code>hello</code>“ (welches in der Datei „<code>js/app5/hello.js</code>“ definiert wird)
das Modul „<code>greet</code>“ (welches in der Datei „<code>js/app5/greet.js</code>“ definiert wird).

Die Moduldefinition von „<code>hello</code>“ sieht in diesem Fall folgendermaßen aus:

<source lang="javascript">
define
( ['app/greet'],
function (Greet)
{
return ...
}
);
</source>

Die Funktion „<code>define</code>“ lädt zunächst alle Module, die in der Modulliste aufgeführt werden, asynchron (und damit meist auch parallel).
Allerdings wird jedes Modul nur einmal geladen. Das heißt, wenn zwei Module dasselbe Modul benötigen, wird dieses Modul trotzdem
nur einmal geladen. Sobald alle Module geladen sind, wird die im <code>define</code>-Aufruf definierte Callback-Funktion ausgeführt.
Die Funktion muss für jedes Modul, das in der Modulliste enthalten ist, einen Parameter zur Verfügung stellen,
in der das jeweilige Modul-Objekt an die Callback-Funktion übergeben wird.

Mann könnte im <code>define</code>-Aufruf auch noch einen Modulnamen angeben. Das ist aber {{iAllg}}
nicht notwendig, da RequireJS defaultmäßig den Dateinamen (ohen Pfad und ohne Endung „<code>js</code>“)
als Modulnamen verwendet.

Wenn man in der Definition eines Moduls auf keine anderen Module zurückgreifen will, kann man auf die Callback-Funktion verzichten.
Um ein Modul zu schreiben, das ein Objekt enthält, schreibt man in diesem Fall einfach:

<source lang="javascript">
define
({
// Inhalt des Objekts, den das Modul definiert.
});
</source>

Wenn das Modul lediglich eine Funktion, wie {{zB}} eine Konstruktorfunktion „<code>C</code>“ zur Verfügung stellen soll, schreibt man

<source lang="javascript">
define
( function ()
{
function C(...) {...}

return C;
}
);
</source>

Hier gibt es zwar eine Callback-Funktion. Diese wird jedoch sofort ausgeführt, da nicht auf das LAden anderer Module gewartet werden muss.

====Landen von RequireJS====

Damit Module auch geefunden werden, muss man RequireJS zunächst konfigurieren.
Das erfolgt üblicherweise in der Datei „<code>main.js</code>“ (hier: „<code>main5.js</code>“).
Diese Datei ist auch dafür verantwortlich, das erste Modul zu laden und damit den Ladevorgang für
alle benötigten Module in Gang zu setzten. Bei uns ist das das Modul „<code>hello</code>“.

Allerdings kann man <code>main.js</code> nicht direkt laden, sondern man muss den
Browser anweisen, <code>require.js</code> zu laden. Sobald diese Datei vollständig geladen (und übersetzt) wurde,
lädt <code>require.js</code> von sich aus <code>main.js</code> (bzw <code>main5.js</code>).
Um dies zu erreichen, fügen Sie folgendes Script-Element als letztes und einziges Script-Element
in die Datei „<code>index4.html</code>“ ein:

<source lang="html5">
<script data-main="js/main5" src="js/lib/require/require.js"></script>
</source>

Weitere Script-Elemente werden nicht benötigt, das RequireJS Module jeweils dynamisch
nachlädt, sobald sie benötigt werden.

====Landen von <code>main.js</code>====

Nachdem <code>require.js</code> geladen wurde, liest das Programm das Script-Attribut „<code>data-main</code>“
und erfährt so, dass die Datei „<code>js/main5.js</code>“ als nächstes geladen werden soll (die fehlende Dateiendung
„<code>.js</code>“ ergänzt RequireJS automatisch).

Die Datei „<code>js/main5.js</code>“ konfiguriert zunächst RequireJS:

<source lang="javascript">
requirejs.config
({
baseUrl: 'js', // By default load any modules from directory js
paths :
{
app: 'app5',
json: 'lib/require/json',
text: 'lib/require/text',
init: '../init'
}
});
</source>

Hier wird festgelegt, dass sich die JAvaScript-Dateien im Ordner „<code>js</code>“ befinden. Das Attribut „<code>path</code>“
legt ein paar spezielle Unterordner fest. Modulnamen, die mit „<code>app/</code>“ beginnen (wie {{zB}} „<code>app/greet</code>“),
werden im Ordner „<code>js/app5/</code>“ gesucht. Für die Module „<code>json</code>“ (ein RequireJS-Plugin zum Laden von
JSON-Dateien) und „<code>text</code>“ (welches von
„<code>json</code>“ benötigt wird) wurde der Pfad direkt angegeben. Die JSON-Dateien finden sich im Ordner
„<code>js/../init</code>“, {{dh}} im Ordner „<code>init</code>“.

Nun kann die eigentliche Anwendung gestartet werden:

<source lang="javascript">
requirejs
( ['json!init/hello_de.json', 'json!init/hello_en.json', 'app/hello'],
function(p_init_de, p_init_en, p_hello)
{
p_hello.init(window, p_init_de);
p_hello.init(window, p_init_en);
}
);
</source>

Die Anwendung benötigt zwei JSON-Dateien (das dafür notwendige JSON-Plugin wird automatisch geladen)
und das Modul „<code>app/init</code>“ (welches sich gemäß Konfiguration in der Datei „<code>js/app5/init</code>“ befindet).

Sobald die drei Dateien vollständig geladen wurden, wird die Callback-Funktion aufgerufen.
Dieser werden die beiden JSON-Objekte sowie das Hello-Initialisierungs-Modul-Objekt übergeben.
Die Callback-Funktion kann somit problemlos die beiden Hello-World-Anwendungen mittels „<code>p_hello.init</code>“ initialisieren und starten.

====Das Modul „<code>hello</code>“====

Der Code des Moduls „<code>hello</code>“ unterscheidet sich einglich nur hinsichtlich des Modulrahmens vom
Code dieses Moduls in der <code>app4</code>:

<source lang="javascript">
define
( ['app/greet'],
function (Greet) // The module 'app/greet' contains the constructor 'Greet'.
{
return {
/**
* Initializes the HTML sections of the app that are
* stated in <code>p_init</code>.
*
* @param p_window The browser window that contains the HTML document to be initialized.
* @param p_init The initialization info for the form section and welcome section.
*/
init:
function (p_window, p_init)
{
var l_document = p_window.document,
l_elements = p_init.HTMLElements,
l_text = p_init.text,
l_greet = new Greet(l_document, p_init);

l_document.getElementById(l_elements.headingForm).innerHTML = l_text.title;
l_document.getElementById(l_elements.inputNameLabel).innerHTML = l_text.query;
l_document.getElementById(l_elements.buttonReset).innerHTML = l_text.reset;
l_document.getElementById(l_elements.buttonSubmit).innerHTML = l_text.submit;
l_document.getElementById(l_elements.buttonSubmit)
.addEventListener('click', l_greet.sayHello);
p_window.addEventListener('keydown', l_greet.sayHelloOnEnter);
}
};
}
);
</source>

Sobald das Modul „<code>app/greet</code>“ ({{dh}} die Datei „<code>js/app5/greet.js</code>“) vollständig geladen wurde,
wird ein Greet-Objekt erstellt und die Anwendung mit Hilfe des JSON-Objekts „<code>p_init</code>“ initialisiert.

====Das Modul „<code>greet</code>“====

Das Modul „<code>greet</code>“ benötigt überhaupt keine anderen Module.
Daher ist die Moduldefinition noch etwas einfacher (die Liste mit benötigten Modulen entfällt ganz):

<source lang="javascript">
/** @module greet */
define
(function ()
{ "use strict";

/**
* @class
* @classdesc Contains methods to say hello to the user of the web app.
*
* @param p_document A DOM object (usually the global object <code>document</code>)
* @param p_init A JSON object containing all init data.
*/
function Greet(p_document, p_init)
{
var l_this = this; // this-hack

/**
* Welcomes the user of the web app1 by displaying a welcome message
* that includes his name. The name is fetched from a text input field.
*/
l_this.sayHello =
function ()
{
var l_elements = p_init.HTMLElements,
l_text = p_init.text,
l_hidden = p_init.css.hidden,
l_name = p_document.getElementById(l_elements.inputName).value;

p_document.getElementById(l_elements.welcome).innerHTML = l_text.welcome;
p_document.getElementById(l_elements.hello).innerHTML = l_text.hello.replace('$1', l_name);
p_document.getElementById(l_elements.sectionHello).classList.remove(l_hidden);
p_document.getElementById(l_elements.sectionForm).classList.add(l_hidden);
};

/**
* An keyboard event observer. It tests whether the enter key has been pressed.
* If so, the greet method is activated. Default reactions of the browser are
* disabled.
*
* @param {KeyboardEvent} p_event - A standard JavaScript keyboard event object
* (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
*/
l_this.sayHelloOnEnter =
function (p_event)
{
if ((p_event.code === 'Enter' || p_event.keyCode === 13) &&
p_document.activeElement ===
p_document.getElementById(p_init.HTMLElements.inputName)
)
{
p_event.preventDefault();
p_event.stopPropagation();
l_this.sayHello(); // NOT this.sayHello();
}
};
}

return Greet; // Return the constructor defined above.
});
</source>

==Quellen==
<references/>
<ol>
<li value="4"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World 01

2016-10-07T10:27:40Z

Yoshi: /* Speichern der Web-Anwendung in einem Subversion-Repository */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}
'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld01/index.html <code>index.html</code>]
([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld01/ SVN-Repository])
==Anwendungsfälle (Use Cases)==
Im ersten Teil dieses Tutoriums wird zunächst mit Hilfe der [[IDE]] (integrated development environment, Integrierte Entwicklungsumgebung)
[[WebStorm]] eine Web-Anwendung bestehend aus einem [[HTML]]-Dokument
erstellt.

Das HTML-Dokument enthält als einzigen Inhalt eine Begrüßung der gesamten Welt.

==WebStorm vorbereiten==

Zur Erstellung der Anwendung wird [[Installation von WebStorm|WebStorm]] eingesetzt.
Zunächst müssen Sie diese IDE [[Installation von WebStorm|installieren und konfigurieren]]. Es handelt sich um eine kommerzielle
Software, aber als Student erhalten Sie eine kostenlose Lizenz.

==WebStorm starten==

Nach dem Starten der IDE sehen Sie ein Menü mit drei Alternativen, ein Projekt zu bearbeiten: Sie können
eine neues Projekt erstellen, ein bestehendes Projekt öffnen oder ein bestehendes Projekt aus einem
Versionsverwaltungstool laden (<code>check out</code>) und öffnen.

Sie werden zunächst die erste Möglichkeit nutzen und ein neues Projekt erstellen.
Anschließend werden Sie die Musterlösung für dieses Projekt aus einem [[Subversion|SVN-Repository]] herunterladen.

==Ein neues Projekt erstellen==

Starten Sie WebStorm und klicken Sie auf „<code>Create New Project</code>“.
Wählen Sie im linken Frame der Seite, die sich geöffnet hat, „<code>Empty Project</code>“,
wählen Sie im Feld „<code>Location</code>“ einen sinnvollen Pfad aus, wo auf Ihrem
Rechner Sie das Projekt speichern wollen ({{zB}} „<code>.../mmprog/hello_world/HelloWorld01</code>“)
und klicken Sie anschließend auf „<code>Create</code>“.

Links sehen Sie nun ein senkrechtes Menü mit zwei Menüpunkten, „<code>Structure</code>“
und „<code>Project</code>“. (Wenn Sie dieses Menü nicht sehen, müssen Sie
auf das Icon unten links in der Leiste klicken. Damit wird das Menü eingeblendet.)

Klicken Sie auf „<code>Project</code>“. Es erscheint ein Dateibaum,
der alle Dateien Ihres Projektes enthält. Bislang gibt es nur das Wurzelverzeichnis mit dem Projektnamen
„<code>HelloWorld01</code>“ sowie eine Systemdatei „<code>External Libraries</code>“, die uns
derzeit nicht weiter interessiert.

Klicken Sie mit der rechten Maus auf das Wurzelverzeichnis des Baumes und anschließend auf <code>New</code>.
Es öffnet sich ein Drop-Down-Menü mit einer Auswahl an Dateien, die Sie erstellen können.

Erstellen Sie eine HTML-Datei „<code>index.html</code>“ vom Typ „<code>HTML 5 file</code>“.
In die HTML-Datei wurde von WebStorm folgender Code automatisch eingefügt:

<source lang="html5">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

</body>
</html>
</source>

Die erste Zeile legt den Typ der Datei fest. Diese Information benötigen dies Browser, damit
sie den nachfolgenden HTML-Code richtig interpretieren und [[Renderer|rendern]] können.
Mit „<code><!DOCTYPE html></code>“ wird festgelegt, dass es sich um eine HTML5-Datei handelt.
Eine HTML-4.01-Datei, die die sich an die strengen HTML-4-Vorgaben hält („<code>strict</code>“)
würde eine wesentlich komplexere Doctype-Angabe erfordern:

<source lang="html4strict">
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
</source>

Es gibt noch diverse weitere HTML-Varianten. Wir werden uns allerdings auf HTML5 konzentrieren.

Die zweite und die letzte Zeile des Dokuments („<code><html lang="en"></code>“ und „<code></html></code>“)
begrenzen den eigentlichen HTML-Code. Das [[Attribut]] „<code>lang</code>“ zeigt dem Browser an,
in welcher Sprache das Dokument verfasst ist. Wenn ein deutsches HTML-Dokument erstellt werden
soll, müssen Sie den Wert „<code>en</code>“ (Englisch) in „<code>de</code>“ (Deutsch) ändern.
Da es sich bei „Hello World“ jedoch um einen englischen Text handelt, ändern wir den Attributwert nicht.

Innerhalb des öffnenden und des schließenden HTML-[[Tag]]s müssen die beiden wesentlichen Bereiche
eines HTML-Dokuments mit Inhalt gefüllt werden.

Im Body-Bereich stehen die eigentlichen Inhalte, die dem Leser im Contentbereich
des Browsers angezeigt werden sollen. Da WebStorm keine Ahnung hat, was für Inhalte
präsentiert werden sollen, ist dieser Bereich noch leer.

Im Head-Bereich stehen dagegen Informationen, die für den Browser zwar interessant sind, die
aber nicht gerendert und daher im Content-Bereich des Browsers nicht dargestellt werden müssen. Typische
Vertreter sind der Titel des Dokuments, der im Browser-Tab angezeigt wird, sowie die Zeichenkodierung
(UTF-8, ISO-8859-1, ASCII, ...). In HTML5 werden Zeichen standardmäßig in [[UTF-8]] kodiert.
In HTML 4 war noch [[ISO 8859-1]] Standard. In ISO 8859-1 (ISO Latin 1) gibt es maximal 256 Zeichen.
Davon sind 191 spezifiziert.<ref>[http://www.iso.org/iso/catalogue_detail?csnumber=28245 ISO/IEC 8859-1:1998]</ref>
Mit UTF-8 können dagegen theoretisch über 4 Billionen Zeichen kodiert werden, praktisch werden aber (derzeit)
nur etwas mehr als eine Million Kodierungen als korrekt angesehen.<ref>[https://tools.ietf.org/html/rfc3629 Request for Comments 3629, UTF-8,
a transformation format of ISO 10646]</ref>.

==Die HTML-Datei mit Inhalten füllen==

Im nächsten Schritt wird die von WebStorm erzeugte HTML-Datei mit Inhalten gefüllt.
Es wird ein Titel in Head-Bereich eingetragen. Im Body-Bereich fügen Sie bitte
eine Hauptüberschrift (heading, „<code><h1></code>...<code></h1></code>“) sowie
anschließend einen Absatz (paragraph, „<code><p></code>...<code></p></code>“)
mit sinnvollem Text ein.

<source lang="html5">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld01</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to Multimedia Programming!</p>
</body>
</html>
</source>

'''Gewöhnen Sie sich an, ineinander verschachtelte Elemente der HTML-Datei ganz akribisch einzurücken.'''
Ein schließendes Tag steht entweder in derselben Zeile wie das öffnende Tag oder beide sind exakt gleich weit eingerückt.
Tag-Blöcke, die '''innerhalb von anderen Tags''' platziert werden, werden um '''zwei Leerzeichen''' weiter '''eingerückt''', als ihre
Elterntags. Vier Leerzeichen, wie oft von der IDE vorgegeben, sind für größere, tief verschachtelte Dateien zu viel. (Eventuell ist
aber auch die Datei zu groß und daher zu tief verschachtelt. So etwas vermeiden Sie, wenn Sie strukturiert arbeiten.)
Eine Datei mit Programmcode sollte in der Regel nicht mehr als
80 Zeichen breit sein. Sonst leidet die Lesbarkeit zu sehr.

'''Verwenden Sie im Programmcode niemals Tabulatorzeichen, sondern immer Leerzeichen.''' Für wie viele Leerzeichen ein
Tabulatorzeichen steht, ist nicht genormt. Das heißt, wenn eine Programmcode-Datei mit Tabulatorzeichen in einem
Text-Editor korrekt strukturiert wird, kann die Struktur derselben Datei in einem anderen Editor oder im Browser ({{zB}} bei einem Web-Zugriff
auf ein Repository eines Versionsverwaltungssystems) fehlerhaft sein.

'''Fügen Sie nicht willkürlich Leerzeilen in den Code ein.''' Leerzeilen dienen ebenso wie Leerzeichen der Strukturierung
und können – geschickt eingesetzt – die [[Lesbarkeit]] des Codes verbessern oder – unstrukturiert eingestreut – verschlechtern.

Alle drei der obigen Tipps sind für den Compiler oder den Interpreter eines Programmcodes vollkommen unerheblich.
Diese Werkzeuge kommen mit jedem syntaktisch korrektem Code zurecht. Die Tipps sind ausschließlich für Personen
wichtig, die den Code lesen müssen (Programmierer, Mitarbeiter der Qualitätssicherung, Studenten, '''Prüfer''' etc.).
Menschen können schlecht strukturierten Code viel schlechter lesen, als gut strukturierten Code.

Folgende Variante des obigen Codes ist ebenfalls syntaktisch korrekt und wird vom Browser
in derselben Weise interpretiert und dargestellt. Aber lesbar ist diese Variante nur noch sehr eingeschränkt.

<source lang="html5">
<!DOCTYPE html> <html lang
="en">
<head

>
<meta

charset= "UTF-8"><title
>HelloWorld01</title>
</head

><body>

<h1 >Hello,

World!</h1> <p>Welcome to Multimedia Programming!
</p>
</body>
</html>
</source>

BTW (By the way): Auch die Einrückungen des HTML5-Templates von WebStorm sind
nicht ganz korrekt. Eigentlich sollte der Code folgendermaßen aussehen:

<source lang="html5">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld01</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to Multimedia Programming!</p>
</body>
</html>
</source>

Allerdings ist es durchaus sinnvoll, nicht nur das <code>html</code>-Element sondern auch das <code>head</code>-Element und das <code>body</code>-Element
am Zeilenanfang beginnen zu lassen, da diese Elemente in jeder HTML-Datei mit Sicherheit jeweils genau einmal und
jedes mal auch an derselben Stellen (am Datei-Anfang, am Datei-Ende sowie einmal in der Datei-„Mitte“) vorkommen.
Dadurch wird die Datei um zwei Zeichen schmäler, was ebenfalls der Lesbarkeit zugute kommt.

Fazit: Keine Regel ohne Ausnahme, aber Ausnahmen sollten begründet sein.

==Start der Web-Anwendung==

Um die zuvor erzeugte HTML-Datei in einem [[Browser]] ansehen zu können,
muss sie in das Dokument-Verzeichnis eines [[Web-Server]]s gelegt werden.
Dies ist normalerweise etwas umständlich, wenn der Web-Server nicht auf dem
Entwicklungsrechner läuft. Eine Möglichkeit wäre nun, auf dem Entwicklungsrechner,
also auf Ihrem Laptop oder PC, einen Server wie [[Apache]] oder [[Tomcat]] zu installieren.
Das ist aber für einfache HTML-Seiten nicht notwendig, {{dh}} für HTML-Seiten, die keinen [[Python]]-, [[PHP]]-, [[Java]]-, [[JavaScript]]- oder sonstigen Code
enthalten, der ausgeführt werden muss, '''bevor''' die Seite an den [[Client]] (Browser)
ausgeliefert wird.

In diesem Tutorium werden nur HTML-Seiten erstellt, die [[JavaScript]]-Code enthalten.
Dieser Code soll nicht vom Server sondern vom Client ausgeführt werden,
'''nachdem''' die HTML-Seite (samt JavaScript-Code) an den Client übermittelt wurde.
Daher reicht uns ein ganz einfacher Server, der nichts weiter macht, als HTML-Seiten auszuliefern.
Ein derartiger Server ist in WebStorm bereits enthalten. Daher ist das Testen der Web-Anwendung ganz einfach.

Klicken Sie im Dateibaum von WebStorm mit der rechten Maustaste auf „<code>index.html</code>“
und klicken Sie dann auf „<code>Run 'index.html'</code>“. Wenn man diesen Befehl erstmals ausgeführt hat,
erscheint in der Hauptmenüleiste von WebStorm ein Drop-Down-Menü mit ausführbaren Dateien sowie rechts
daneben ein grünes Dreieck als Icon, mit dem die im Menü selektierte Datei direkt gestartet werden kann.

Der Startbefehl hat zur Folge, dass ein lokaler Web-Server gestartet und die selektierte HTML-Datei in einem Browser
geöffnet wird. Welcher Browser dies ist, kann in WebStorm folgendermaßen festgelegt werden.

# Im Dateibaum „<code>index.html</code>“ selektieren.
# „<code>Run</code>“ → „<code>Edit Configurations...</code>“ → Klick auf „<code>...</code>“ hinter dem Label „<code>Browser</code>“ → Defaultbrowser festlegen
#Menü mit Klick auf „<code>OK</code>“ verlassen.

Wenn man anschließend in WebStorm Änderungen an der im Browser geöffneten Datei vornimmt, muss man nicht jedes mal die
Datei neu starten. Es reicht, im Browser den Reloadbutton zu drücken.

Der von WebStorm gestartete Web-Server bedient diverse Browser, die sich auf dem Entwicklungsrechner befinden.
Wenn man dieselbe HTML-Datei in einem anderen Browser testen will, kann man dazu den URI im ersten Browser kopieren und in die URI-Leiste
des zweiten Browsers einfügen. WebStorm bemerkt, dass der URI in einem anderen Browser geöffnet werden soll und stellt dazu eine Sicherheitsanfrage:

<div class="formula"><code>Copy authorization URL to clipboard</code></div>

Wenn man dies bestätigt enthält das Clipboard anschließend einen
URI, die man mit „<code>Strg-v</code>“ als Ersatz für den zuerst eingefügte URI in den neuen Browser kopieren kann.
Dieser URI wird dann angezeigt und kann ebenfalls per Reload aktualisiert werden.

Man könnte die Seite sogar von einem anderen Device, wie {{zB}} einen Smartphone aus aufrufen.
Dies ist jedoch im WebStorm-Server standardmäßig aus Sicherheitsgründen
unterbunden.

Schneller geht der Test mit einem anderen Browser, indem man die zu testende Datei im WebStorm-Editor-Fenster öffnet und mit der Maus in die
rechte obere Ecke dieses Fensters fährt. Irgendwann poppt in dieser Ecke in Menü mit fünf Browser-Icons auf. Durch einen Klick auf ein
Icon kann man die geöffnete Datei im gewünschten Browser testen.

==Speichern der Web-Anwendung in einem Subversion-Repository==

Nun ist es an der Zeit, die erste Version unserer Web-Anwendung in einem [[Repository]] (= digitales Archiv) eines
[[Versionsverwaltungssystem]]s (''version control system'', VCS) zu speichern. Hier wird
[[Subversion]] verwendet.

'''Anmerkung''': <i>Ich weiß, dass [[Git]] viel „cooler“ und „mächtiger“ ist als [[Subversion]]. Wenn Sie nicht
an der Lehrveranstaltung [[Lehrveranstaltung:IAM_2006:Multimedia-Anwendungen/Programmierung|Multimedia-Programmierung]] (MMProg)
teilnehmen, können Sie an Stelle von Subversion selbstverständlich auch [https://github.com/ GitHub] oder ein anderes Versionsverwaltungssystem verwenden,
um Ihre Projekte zu verwalten. Sie können aber auch Ihren eigenen Subversion-Server installieren, um die Tutorien „in voller Schönheit“ bearbeiten zu können: https://subversion.apache.org/packages.html. (Sie könnten sogar ganz darauf verzichten und Ihre Tutoriumslösungen nicht in einem
Versionsverwaltungssystem sichern. Davon rate ich aber ab.)</i>

<i>Im Praktikum zur Lehrveranstaltung wird jedoch Subversion verwendet, da die Administration von Dutzenden
von Subversion-Accounts für den Dozenten wesentlich einfacher ist als die Verwaltung von entsprechenden Git-Accounts.
</i>

Um Ihr Projekt in einem Subversion-Repository zu speichern, müssen Sie folgende Schritte ausführen:

# „<code>Subversion</code>“ auswählen
# Klick auf „<code>VCS</code>“ → „<code>Import into Version Control</code>“ → „<code>Share Project (Subversion)</code>“
# Klick auf das Plus-Zeichen neben „<code>Point to repository location</code>“
# Tragen Sie den URI Ihres Subversion-Repositories ein. Für MMProg-Teilnehmer lautet der URI „<code>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT/</code>“, wobei die Zeichenkette „<code>ACCOUNT</code>“ durch den eigenen RZ-Account ersetzt werden muss.
# Im darunterliegenden Fester erscheint ein neuer Eintrag mit dem URI des Repositories. Öffnen Sie diesen (Klick auf das Dreieckssymbol).
# Wenn Sie nach einer Kennung und einem Passwort gefragt werden, geben Sie die Daten Ihres Rechzentrumsaccounts an. Aktivieren Sie „<code>Save credentials</code>“, ansonsten werden Sei bei jedem Zugriff auf das Repository erneut nach den Zugangsdaten gefragt. → „<code>OK</code>“
#*Falls es bei MAC OS Probleme gibt, befolgen Sie folgende Schritte:
#**Klicken Sie links oben auf "Webstorm" dann "Preferences" dann "Version Control" dann "Subversion"
#**unter Reiter "Network" wählen Sie "TLSv1"
#**unter Reiter "General" klicken Sie auf Button "Clear Auth Cache"
#**danach starten Sie Webstorm neu
#*Falls es bei Windows Probleme gibt, befolgen Sie folgende Schritte:
#** Laden Sie Apache Subversion command line tools herunter: https://www.visualsvn.com/downloads/
#** Entpacken Sie den heruntergeladenen Ordner
#** In Webstorm gehen Sie dann auf "File" -> "Settings" -> "Version Control" -> "Subversion"
#** Wählen Sie unter "use command line client" im heruntergeladenen Ordner unter "bin" die "svn.exe" als neuen command line client aus.
# Fügen Sie ins Repository einen neuen Ordner namens „<code>mmprog</code>“ ein:
## Rechtsklick auf den URI
## Klick auf „<code>New</code>“ → „<code>Remote Folder...</code>“
## Geben Sie „<code>mmprog</code>“ als Namen ein („<code>Remote folder name</code>“)
## Klicken Sie auf „<code>OK</code>“.
# Fügen sie auf dieselbe Weise den Unterordner „<code>praktikum</code>“ in den Ordner „<code>mmprog</code>“ ein.
# Selektieren Sie im Dateibaum des Repositories den neu angelegten Ordner „<code>praktikum</code>“ durch Linksklick.
# Wählen Sie unter „<code>Define share target</code>“ den zweiten Eintrag ({{dh}} denjenigen URI, der auf „<code>HelloWorld01</code>“ endet (sofern Sie Ihr Projekt wie vorgeschlagen benannt haben).
# Klicken Sie auf „<code>Share</code>“, um Ihr neu erstelltes Projekt im Repository anzulegen.
# Sie werden evtl. gefragt, welches Subversion-Working-Copy-Format verwendet werden soll. Wählen Sie 1.8 (außer, Sie haben einen Uralt-Subversion-Server am Laufen).
# Klicken Sie auf „<code>OK</code>“.

Wenn daraufhin die Frage aufpoppt, ob Sie die Datei „<code>vcs.xml</code>“ ebenfalls unter Versionskontrolle stellen wollen,
markieren Sie „<code>Remember, don't ask again</code>“ und beantworten die Frage mit „<code>Yes</code>“.

Das Projekt ist nun im gewählten Ordner des Subversion-Repositories angelegt worden, aber es wurden noch keine Daten auf den Server übertragen.
Die WebStorm-Ansicht hat sich ebenfalls geändert: Im Dateibaum des WebStorm-Projektes wurde die Datei „<code>index.html</code>“ grün eingefärbt
und in die Hauptmenü-Leiste von WebStorm sind zwei neue VCS-Icons eingetragen worden. Die beiden Icons ermöglichen eine schnellen Zugriff
auf die beiden wichtigsten Subversion-Befehle:

* VCS, grüner Pfeil nach unten: ''Update Project''
* VCS, grüner Pfeil nach oben: ''Commit Project''

Mittels ''Commit Project'' werden Änderungen, die auf dem Entwicklungsrechner lokal vorgenommen wurden, ins Subversion-Repository übertragen.
Mittels ''Update Project'' werden Änderungen, die im Repository ({{iAllg}} auf einem anderen Rechner und/oder von einem anderen Entwickler) vorgenommen wurden, ins lokale Verzeichnis des Entwicklungsrechners übernommen. Es gibt noch diverse weitere Subversion-Befehle. Diese sind über den Dateibaum zugänglich:

* Rechtsklick auf den Projektnamen im Dateibaum → Klick auf „<code>Subversion</code>“

Alle Dateien, die noch nicht im Repository enthalten sind (zurzeit sind noch überhaupt keine Daten darin enthalten), werden aufgelistet.
Neben der von Ihnen erstellten Datei „<code>index.html</code>“ gibt es noch einen Ordner namens „<code>.idea</code>“, der WebStrom-spezifische Projekt-Dateien enthält.
Sie könnten theoretisch bestimmte Dateien deselektieren, um sie nicht ins Repository zu übertragen. Das wäre hier aber kontraproduktiv.

Tragen Sie in das Feld „<code>Commit Message</code>“ einen sinnvollen Änderungstext ein, wie
{{zB}} „<code>HelloWorld01 created.</code>“ ein.
Klicken Sie dann auf „<code>Commit</code>“ (dt.: ''übergeben'').

Üblicherweise werden in Projekten englische Dateinamen, Variablenbezeichner, Kommentare (einschließlich Subversion-Kommentaren)
verwendet, um internationale Programmierer um Rat fragen (Diskussionsforen) oder sogar als Teammitglieder einstellen zu können.

Die Farbe der Datei „<code>index.html</code>“ ändert sich bei einem erfolgreichen Commit abermals. Sie wird wieder schwarz.
Das bedeutet: Der Inhalt dieser Datei stimmt mit dem Inhalt der im Repository gespeicherten Version überein.
Sobald der Inhalt der lokalen Version der Datei geändert wird, wird der Dateiname blau eingefärbt.
Neue Dateien werden – wie bereits gesehen – grün eingefärbt.
Bei einem erneuten Commit werden alle geänderten Dateien abermals ins Subversion-Repository eingetragen.
Allerdings werden die Vorgängerversionen nicht gelöscht. Das heißt, im Repository sind alle Versionen
einer jeden Datei dauerhaft zugänglich. Auf diese können Sie {{zB}} mittels

* Rechtsklick auf eine Datei im Dateibaum → Klick auf „<code>Subversion</code>“ → Klick auf „<code>Show History</code>“

zugreifen. Das heißt, es ist unnötig und sogar kontraproduktiv, lokale Versionen einer Datei anzulegen: „<code>index.html</code>“, „<code>index.html.v01</code>“, „<code>index.html.v02</code>“, ...

Um verschiedene Versionen im Versionskontrollsystem unterscheiden zu können, sind die Kommentare, die Sie beim
Commit angeben, von fundamentaler Bedeutung. Vergessen Sie diese daher nicht und versuchen Sie jeweils die wesentlichen
Änderungen, die Sie an einer Datei vorgenommen haben, möglichst kurz und prägnant zu beschreiben (mittels eines Einzeilers).

==Projekte aus einem Subversion-Repository laden==

Projekte, die in einem Subversion-Repository gespeichert sind, können mit einem beliebigen [[Subversion/HowTo|Subversion-Client]] auf Ihren Rechner laden.
Sofern Sie Schreibrechte für das Repository haben, können Sie danach Ihre Änderungen auch wieder per Commit ins Repository einspielen.

Damit ist Subversion (wie die meisten anderen Versionsverwaltungssysteme auch) sehr gut für Teamprojekte geeignet:
Zunächst muss ein Versionsverwaltungssysteme ({{dh}} Subversion-Repository) verfügbar sein,
auf das alle Teammitglieder lesend und schreibend zugreifen können. Ein Teammitglied fügt ein neues Projekt in dieses System ein.
Alle anderen Teammitglieder laden dieses Projekt auf ihren jeweiligen Entwicklungsrechner. Jedes Mal, wenn ein Teammitglied eine
signifikante Änderung am Projekt vorgenommen hat, testet er diese ausgiebig, bereinigt evtl. noch vorhandene Fehler
und committet diese Änderungen dann (nicht früher). Wenn sich jeder Entwickler mit seiner eigenen Kennung mit dem Versionsverwaltungssystem
verbindet, kann in der Änderungshistorie jederzeit nachgesehen werden, wer für welche Änderung verantwortlich ist.
Das ist insbesondere dann wichtig, wenn zwei Entwickler ohne Absprache denselben Code gleichzeitig ändern und committen
wollen. Dann kann es nämlich zu einem sogenannten Mergekonflikt kommen: Der Entwickler, der seine Änderungen
als Zweiter committen will, würde damit die Änderungen, die der erste Entwickler bereits committet hat, einfach überschreiben.
Das wird vom Versionsverwaltungssystem verhindert. Der zweite Entwickler muss den Mergekonflikt von Hand – aber mit Unterstützung des
Versionsverwaltungssystems – beheben.

Um Mergekonflikte nach Möglichkeit zu vermeiden, ist die Modularisierung von Softwareprojekten, die im Teamarbeit erstellt werden,
von zentraler Bedeutung. Aber auch für Einzelentwickler ist der Einsatz eines Versionsverwaltungssystems vorteilhaft,
da er für alle wesentlichen Projektversionen stets einen Backup zur Verfügung hat. Da ein Versionsverwaltungstool
üblicherweise auf einem externen Server läuft, ist dieses Backup sogar räumlich vom Entwicklungsrechner getrennt.
'''Allerdings nützt das beste Versionsverwaltungstool nichts, wenn Sie nicht regelmäßig (getestete) Zwischenstände committen und damit dauerhaft abspeichern.'''

<strong>In der Lehrveranstaltung [[Lehrveranstaltung:IAM_2006:Multimedia-Anwendungen/Programmierung|MMProg]],
für die dieses Tutorium entwickelt wurde, müssen sowohl Einzel- als auch Teamprojekte auf die zuvor beschriebene Weise realisiert werden.</strong>
Daher soll das Laden eines bereits vorhandenen Projektes geübt werden.

Für jedes Tutorium in diesem Wiki gibt es eine Musterlösung im Subversion-Repository „<code>https://glossar.hs-augsburg.de/beispiel</code>“ des Wikis.
Die Musterlösung für das aktuelle Tutorium kopieren Sie folgendermaßen auf Ihren Rechner.
(Beachten Sie, dass Sie nur lesend auf das GlossWiki-Subversion-Repository zugreifen können. Das heißt, Sie können die Musterlösungen
nur lokal, aber nicht im GlossarWiki-Repository ändern.)

Starten Sie WebStorm. Wenn der Startbildschirm mit den drei Möglichkeiten ein Projekt zu öffnen erschient, klicken Sie auf „<code>Check out from Version Control</code>“.
Es öffnet sich ein Drop-Down-Menü mit diversen Versionsverwaltungssystemen ([[GitHub]], [[CVS]], [[Git]], [[Mercurial]] und [[Subversion]]) .
Sie wählen „<code>Subversion</code>“ aus.

Anderenfalls klicken Sie auf „<code>VCS</code>“ → „<code>Check out from Version Control</code>“ → „<code>Subversion</code>“.

In beiden Fällen öffnet sich das schon bekannte Fenster mit einer Liste von verfügbaren Repositories.
Tragen Sie – sofern es nicht bereits vorhanden ist – mittels eines Klicks auf das Plus-Symbol
das Repository „<code>https://glossar.hs-augsburg.de/beispiel/</code>“ in diese Liste ein.

Öffnen Sie durch Klicks auf die Dreiecke vor dem jeweiligen Verzeichnis den Dateipfad
<div class="formula">
<code>https://glossar.hs-augsburg.de/beispiel</code> → <code>tutorium</code> → <code>es5</code> → <code>hello_world</code> → <code>WK_HelloWorld01</code>
</div>

Zum Schluss sollte der Ordner „<code>WK_HelloWorld01</code>“ selektiert sein.
Klicken Sie auf „<code>Checkout</code>“, wählen Sie in dem Dateibrowser, der sich daraufhin öffnet,
einen geeignet Speicherort ({{zB}} neben aber nicht in(!) Ihrem eigenen Projekt „<code>HelloWorld01</code>“)
und klicken Sie auf „<code>OK</code>“.

Daraufhin öffnet sich ein Fenster, in dem Sie festlegen sollen, in welchem Unterverzeichnis des zuvor gewählten Verzeichnisses
das Projekt lokal gespeichert soll („<code>Destination</code>“). Wenn Sie zuvor das Elternverzeichnis gewählt haben, in dem auch Ihr Projekt
„<code>HelloWorld01</code>“ liegt, sollten Sie den zweiten der angebotenen Pfade selektieren.
Anschließend klicken Sie abermals auf „<code>OK</code>“, wählen das Format 1.8 und klicken zum dritten Mal „<code>OK</code>“.
Danach stellt Ihnen WebStorm noch zwei Fragen. Sie sollten das Projekt öffnen (erste Frage). Ob Sie im Gegenzug das zuvor geöffnete
Projekt schließen wollen oder nicht (zweite Frage), müssen Sie selbst entscheiden.

Nun ist die Musterlösung lokal verfügbar. Sie können sie auf dieselbe Art wie ihr eigenes Projekt ansehen, ausführen und '''lokal''' ändern.
Ein Commit ist allerdings – wie bereits gesagt – nicht möglich. Versuchen Sie es ruhig.

==Fortsetzung des Tutoriums==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World 02|Teil 2 des Tutoriums]] bearbeiten.

==Quellen==
<references/>
<ol>
<li value="3"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World 01

2016-10-07T10:26:55Z

Yoshi: /* Speichern der Web-Anwendung in einem Subversion-Repository */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}
'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld01/index.html <code>index.html</code>]
([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld01/ SVN-Repository])
==Anwendungsfälle (Use Cases)==
Im ersten Teil dieses Tutoriums wird zunächst mit Hilfe der [[IDE]] (integrated development environment, Integrierte Entwicklungsumgebung)
[[WebStorm]] eine Web-Anwendung bestehend aus einem [[HTML]]-Dokument
erstellt.

Das HTML-Dokument enthält als einzigen Inhalt eine Begrüßung der gesamten Welt.

==WebStorm vorbereiten==

Zur Erstellung der Anwendung wird [[Installation von WebStorm|WebStorm]] eingesetzt.
Zunächst müssen Sie diese IDE [[Installation von WebStorm|installieren und konfigurieren]]. Es handelt sich um eine kommerzielle
Software, aber als Student erhalten Sie eine kostenlose Lizenz.

==WebStorm starten==

Nach dem Starten der IDE sehen Sie ein Menü mit drei Alternativen, ein Projekt zu bearbeiten: Sie können
eine neues Projekt erstellen, ein bestehendes Projekt öffnen oder ein bestehendes Projekt aus einem
Versionsverwaltungstool laden (<code>check out</code>) und öffnen.

Sie werden zunächst die erste Möglichkeit nutzen und ein neues Projekt erstellen.
Anschließend werden Sie die Musterlösung für dieses Projekt aus einem [[Subversion|SVN-Repository]] herunterladen.

==Ein neues Projekt erstellen==

Starten Sie WebStorm und klicken Sie auf „<code>Create New Project</code>“.
Wählen Sie im linken Frame der Seite, die sich geöffnet hat, „<code>Empty Project</code>“,
wählen Sie im Feld „<code>Location</code>“ einen sinnvollen Pfad aus, wo auf Ihrem
Rechner Sie das Projekt speichern wollen ({{zB}} „<code>.../mmprog/hello_world/HelloWorld01</code>“)
und klicken Sie anschließend auf „<code>Create</code>“.

Links sehen Sie nun ein senkrechtes Menü mit zwei Menüpunkten, „<code>Structure</code>“
und „<code>Project</code>“. (Wenn Sie dieses Menü nicht sehen, müssen Sie
auf das Icon unten links in der Leiste klicken. Damit wird das Menü eingeblendet.)

Klicken Sie auf „<code>Project</code>“. Es erscheint ein Dateibaum,
der alle Dateien Ihres Projektes enthält. Bislang gibt es nur das Wurzelverzeichnis mit dem Projektnamen
„<code>HelloWorld01</code>“ sowie eine Systemdatei „<code>External Libraries</code>“, die uns
derzeit nicht weiter interessiert.

Klicken Sie mit der rechten Maus auf das Wurzelverzeichnis des Baumes und anschließend auf <code>New</code>.
Es öffnet sich ein Drop-Down-Menü mit einer Auswahl an Dateien, die Sie erstellen können.

Erstellen Sie eine HTML-Datei „<code>index.html</code>“ vom Typ „<code>HTML 5 file</code>“.
In die HTML-Datei wurde von WebStorm folgender Code automatisch eingefügt:

<source lang="html5">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

</body>
</html>
</source>

Die erste Zeile legt den Typ der Datei fest. Diese Information benötigen dies Browser, damit
sie den nachfolgenden HTML-Code richtig interpretieren und [[Renderer|rendern]] können.
Mit „<code><!DOCTYPE html></code>“ wird festgelegt, dass es sich um eine HTML5-Datei handelt.
Eine HTML-4.01-Datei, die die sich an die strengen HTML-4-Vorgaben hält („<code>strict</code>“)
würde eine wesentlich komplexere Doctype-Angabe erfordern:

<source lang="html4strict">
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
</source>

Es gibt noch diverse weitere HTML-Varianten. Wir werden uns allerdings auf HTML5 konzentrieren.

Die zweite und die letzte Zeile des Dokuments („<code><html lang="en"></code>“ und „<code></html></code>“)
begrenzen den eigentlichen HTML-Code. Das [[Attribut]] „<code>lang</code>“ zeigt dem Browser an,
in welcher Sprache das Dokument verfasst ist. Wenn ein deutsches HTML-Dokument erstellt werden
soll, müssen Sie den Wert „<code>en</code>“ (Englisch) in „<code>de</code>“ (Deutsch) ändern.
Da es sich bei „Hello World“ jedoch um einen englischen Text handelt, ändern wir den Attributwert nicht.

Innerhalb des öffnenden und des schließenden HTML-[[Tag]]s müssen die beiden wesentlichen Bereiche
eines HTML-Dokuments mit Inhalt gefüllt werden.

Im Body-Bereich stehen die eigentlichen Inhalte, die dem Leser im Contentbereich
des Browsers angezeigt werden sollen. Da WebStorm keine Ahnung hat, was für Inhalte
präsentiert werden sollen, ist dieser Bereich noch leer.

Im Head-Bereich stehen dagegen Informationen, die für den Browser zwar interessant sind, die
aber nicht gerendert und daher im Content-Bereich des Browsers nicht dargestellt werden müssen. Typische
Vertreter sind der Titel des Dokuments, der im Browser-Tab angezeigt wird, sowie die Zeichenkodierung
(UTF-8, ISO-8859-1, ASCII, ...). In HTML5 werden Zeichen standardmäßig in [[UTF-8]] kodiert.
In HTML 4 war noch [[ISO 8859-1]] Standard. In ISO 8859-1 (ISO Latin 1) gibt es maximal 256 Zeichen.
Davon sind 191 spezifiziert.<ref>[http://www.iso.org/iso/catalogue_detail?csnumber=28245 ISO/IEC 8859-1:1998]</ref>
Mit UTF-8 können dagegen theoretisch über 4 Billionen Zeichen kodiert werden, praktisch werden aber (derzeit)
nur etwas mehr als eine Million Kodierungen als korrekt angesehen.<ref>[https://tools.ietf.org/html/rfc3629 Request for Comments 3629, UTF-8,
a transformation format of ISO 10646]</ref>.

==Die HTML-Datei mit Inhalten füllen==

Im nächsten Schritt wird die von WebStorm erzeugte HTML-Datei mit Inhalten gefüllt.
Es wird ein Titel in Head-Bereich eingetragen. Im Body-Bereich fügen Sie bitte
eine Hauptüberschrift (heading, „<code><h1></code>...<code></h1></code>“) sowie
anschließend einen Absatz (paragraph, „<code><p></code>...<code></p></code>“)
mit sinnvollem Text ein.

<source lang="html5">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld01</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to Multimedia Programming!</p>
</body>
</html>
</source>

'''Gewöhnen Sie sich an, ineinander verschachtelte Elemente der HTML-Datei ganz akribisch einzurücken.'''
Ein schließendes Tag steht entweder in derselben Zeile wie das öffnende Tag oder beide sind exakt gleich weit eingerückt.
Tag-Blöcke, die '''innerhalb von anderen Tags''' platziert werden, werden um '''zwei Leerzeichen''' weiter '''eingerückt''', als ihre
Elterntags. Vier Leerzeichen, wie oft von der IDE vorgegeben, sind für größere, tief verschachtelte Dateien zu viel. (Eventuell ist
aber auch die Datei zu groß und daher zu tief verschachtelt. So etwas vermeiden Sie, wenn Sie strukturiert arbeiten.)
Eine Datei mit Programmcode sollte in der Regel nicht mehr als
80 Zeichen breit sein. Sonst leidet die Lesbarkeit zu sehr.

'''Verwenden Sie im Programmcode niemals Tabulatorzeichen, sondern immer Leerzeichen.''' Für wie viele Leerzeichen ein
Tabulatorzeichen steht, ist nicht genormt. Das heißt, wenn eine Programmcode-Datei mit Tabulatorzeichen in einem
Text-Editor korrekt strukturiert wird, kann die Struktur derselben Datei in einem anderen Editor oder im Browser ({{zB}} bei einem Web-Zugriff
auf ein Repository eines Versionsverwaltungssystems) fehlerhaft sein.

'''Fügen Sie nicht willkürlich Leerzeilen in den Code ein.''' Leerzeilen dienen ebenso wie Leerzeichen der Strukturierung
und können – geschickt eingesetzt – die [[Lesbarkeit]] des Codes verbessern oder – unstrukturiert eingestreut – verschlechtern.

Alle drei der obigen Tipps sind für den Compiler oder den Interpreter eines Programmcodes vollkommen unerheblich.
Diese Werkzeuge kommen mit jedem syntaktisch korrektem Code zurecht. Die Tipps sind ausschließlich für Personen
wichtig, die den Code lesen müssen (Programmierer, Mitarbeiter der Qualitätssicherung, Studenten, '''Prüfer''' etc.).
Menschen können schlecht strukturierten Code viel schlechter lesen, als gut strukturierten Code.

Folgende Variante des obigen Codes ist ebenfalls syntaktisch korrekt und wird vom Browser
in derselben Weise interpretiert und dargestellt. Aber lesbar ist diese Variante nur noch sehr eingeschränkt.

<source lang="html5">
<!DOCTYPE html> <html lang
="en">
<head

>
<meta

charset= "UTF-8"><title
>HelloWorld01</title>
</head

><body>

<h1 >Hello,

World!</h1> <p>Welcome to Multimedia Programming!
</p>
</body>
</html>
</source>

BTW (By the way): Auch die Einrückungen des HTML5-Templates von WebStorm sind
nicht ganz korrekt. Eigentlich sollte der Code folgendermaßen aussehen:

<source lang="html5">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld01</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to Multimedia Programming!</p>
</body>
</html>
</source>

Allerdings ist es durchaus sinnvoll, nicht nur das <code>html</code>-Element sondern auch das <code>head</code>-Element und das <code>body</code>-Element
am Zeilenanfang beginnen zu lassen, da diese Elemente in jeder HTML-Datei mit Sicherheit jeweils genau einmal und
jedes mal auch an derselben Stellen (am Datei-Anfang, am Datei-Ende sowie einmal in der Datei-„Mitte“) vorkommen.
Dadurch wird die Datei um zwei Zeichen schmäler, was ebenfalls der Lesbarkeit zugute kommt.

Fazit: Keine Regel ohne Ausnahme, aber Ausnahmen sollten begründet sein.

==Start der Web-Anwendung==

Um die zuvor erzeugte HTML-Datei in einem [[Browser]] ansehen zu können,
muss sie in das Dokument-Verzeichnis eines [[Web-Server]]s gelegt werden.
Dies ist normalerweise etwas umständlich, wenn der Web-Server nicht auf dem
Entwicklungsrechner läuft. Eine Möglichkeit wäre nun, auf dem Entwicklungsrechner,
also auf Ihrem Laptop oder PC, einen Server wie [[Apache]] oder [[Tomcat]] zu installieren.
Das ist aber für einfache HTML-Seiten nicht notwendig, {{dh}} für HTML-Seiten, die keinen [[Python]]-, [[PHP]]-, [[Java]]-, [[JavaScript]]- oder sonstigen Code
enthalten, der ausgeführt werden muss, '''bevor''' die Seite an den [[Client]] (Browser)
ausgeliefert wird.

In diesem Tutorium werden nur HTML-Seiten erstellt, die [[JavaScript]]-Code enthalten.
Dieser Code soll nicht vom Server sondern vom Client ausgeführt werden,
'''nachdem''' die HTML-Seite (samt JavaScript-Code) an den Client übermittelt wurde.
Daher reicht uns ein ganz einfacher Server, der nichts weiter macht, als HTML-Seiten auszuliefern.
Ein derartiger Server ist in WebStorm bereits enthalten. Daher ist das Testen der Web-Anwendung ganz einfach.

Klicken Sie im Dateibaum von WebStorm mit der rechten Maustaste auf „<code>index.html</code>“
und klicken Sie dann auf „<code>Run 'index.html'</code>“. Wenn man diesen Befehl erstmals ausgeführt hat,
erscheint in der Hauptmenüleiste von WebStorm ein Drop-Down-Menü mit ausführbaren Dateien sowie rechts
daneben ein grünes Dreieck als Icon, mit dem die im Menü selektierte Datei direkt gestartet werden kann.

Der Startbefehl hat zur Folge, dass ein lokaler Web-Server gestartet und die selektierte HTML-Datei in einem Browser
geöffnet wird. Welcher Browser dies ist, kann in WebStorm folgendermaßen festgelegt werden.

# Im Dateibaum „<code>index.html</code>“ selektieren.
# „<code>Run</code>“ → „<code>Edit Configurations...</code>“ → Klick auf „<code>...</code>“ hinter dem Label „<code>Browser</code>“ → Defaultbrowser festlegen
#Menü mit Klick auf „<code>OK</code>“ verlassen.

Wenn man anschließend in WebStorm Änderungen an der im Browser geöffneten Datei vornimmt, muss man nicht jedes mal die
Datei neu starten. Es reicht, im Browser den Reloadbutton zu drücken.

Der von WebStorm gestartete Web-Server bedient diverse Browser, die sich auf dem Entwicklungsrechner befinden.
Wenn man dieselbe HTML-Datei in einem anderen Browser testen will, kann man dazu den URI im ersten Browser kopieren und in die URI-Leiste
des zweiten Browsers einfügen. WebStorm bemerkt, dass der URI in einem anderen Browser geöffnet werden soll und stellt dazu eine Sicherheitsanfrage:

<div class="formula"><code>Copy authorization URL to clipboard</code></div>

Wenn man dies bestätigt enthält das Clipboard anschließend einen
URI, die man mit „<code>Strg-v</code>“ als Ersatz für den zuerst eingefügte URI in den neuen Browser kopieren kann.
Dieser URI wird dann angezeigt und kann ebenfalls per Reload aktualisiert werden.

Man könnte die Seite sogar von einem anderen Device, wie {{zB}} einen Smartphone aus aufrufen.
Dies ist jedoch im WebStorm-Server standardmäßig aus Sicherheitsgründen
unterbunden.

Schneller geht der Test mit einem anderen Browser, indem man die zu testende Datei im WebStorm-Editor-Fenster öffnet und mit der Maus in die
rechte obere Ecke dieses Fensters fährt. Irgendwann poppt in dieser Ecke in Menü mit fünf Browser-Icons auf. Durch einen Klick auf ein
Icon kann man die geöffnete Datei im gewünschten Browser testen.

==Speichern der Web-Anwendung in einem Subversion-Repository==

Nun ist es an der Zeit, die erste Version unserer Web-Anwendung in einem [[Repository]] (= digitales Archiv) eines
[[Versionsverwaltungssystem]]s (''version control system'', VCS) zu speichern. Hier wird
[[Subversion]] verwendet.

'''Anmerkung''': <i>Ich weiß, dass [[Git]] viel „cooler“ und „mächtiger“ ist als [[Subversion]]. Wenn Sie nicht
an der Lehrveranstaltung [[Lehrveranstaltung:IAM_2006:Multimedia-Anwendungen/Programmierung|Multimedia-Programmierung]] (MMProg)
teilnehmen, können Sie an Stelle von Subversion selbstverständlich auch [https://github.com/ GitHub] oder ein anderes Versionsverwaltungssystem verwenden,
um Ihre Projekte zu verwalten. Sie können aber auch Ihren eigenen Subversion-Server installieren, um die Tutorien „in voller Schönheit“ bearbeiten zu können: https://subversion.apache.org/packages.html. (Sie könnten sogar ganz darauf verzichten und Ihre Tutoriumslösungen nicht in einem
Versionsverwaltungssystem sichern. Davon rate ich aber ab.)</i>

<i>Im Praktikum zur Lehrveranstaltung wird jedoch Subversion verwendet, da die Administration von Dutzenden
von Subversion-Accounts für den Dozenten wesentlich einfacher ist als die Verwaltung von entsprechenden Git-Accounts.
</i>

Um Ihr Projekt in einem Subversion-Repository zu speichern, müssen Sie folgende Schritte ausführen:

# „<code>Subversion</code>“ auswählen
# Klick auf „<code>VCS</code>“ → „<code>Import into Version Control</code>“ → „<code>Share Project (Subversion)</code>“
# Klick auf das Plus-Zeichen neben „<code>Point to repository location</code>“
# Tragen Sie den URI Ihres Subversion-Repositories ein. Für MMProg-Teilnehmer lautet der URI „<code>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT/</code>“, wobei die Zeichenkette „<code>ACCOUNT</code>“ durch den eigenen RZ-Account ersetzt werden muss.
# Im darunterliegenden Fester erscheint ein neuer Eintrag mit dem URI des Repositories. Öffnen Sie diesen (Klick auf das Dreieckssymbol).
# Wenn Sie nach einer Kennung und einem Passwort gefragt werden, geben Sie die Daten Ihres Rechzentrumsaccounts an. Aktivieren Sie „<code>Save credentials</code>“, ansonsten werden Sei bei jedem Zugriff auf das Repository erneut nach den Zugangsdaten gefragt. → „<code>OK</code>“
#*Falls es bei MAC OS Probleme gibt, befolgen Sie folgende Schritte:
#**Klicken Sie links oben auf "Webstorm" dann "Preferences" dann "Version Control" dann "Subversion"
#**unter Reiter "Network" wählen Sie "TLSv1"
#**unter Reiter "General" klicken Sie auf Button "Clear Auth Cache"
#**danach starten Sie Webstorm neu
#*Falls es bei Windoes Probleme gibt, befolgen Sie folgende Schritte:
#** Laden Sie Apache Subversion command line tools herunter: https://www.visualsvn.com/downloads/
#** Entpacken Sie den heruntergeladenen Ordner
#** In Webstorm gehen Sie dann auf "File" -> "Settings" -> "Version Control" -> "Subversion"
#** Wählen Sie unter "use command line client" im heruntergeladenen Ordner unter "bin" die "svn.exe" als neuen command line client aus.
# Fügen Sie ins Repository einen neuen Ordner namens „<code>mmprog</code>“ ein:
## Rechtsklick auf den URI
## Klick auf „<code>New</code>“ → „<code>Remote Folder...</code>“
## Geben Sie „<code>mmprog</code>“ als Namen ein („<code>Remote folder name</code>“)
## Klicken Sie auf „<code>OK</code>“.
# Fügen sie auf dieselbe Weise den Unterordner „<code>praktikum</code>“ in den Ordner „<code>mmprog</code>“ ein.
# Selektieren Sie im Dateibaum des Repositories den neu angelegten Ordner „<code>praktikum</code>“ durch Linksklick.
# Wählen Sie unter „<code>Define share target</code>“ den zweiten Eintrag ({{dh}} denjenigen URI, der auf „<code>HelloWorld01</code>“ endet (sofern Sie Ihr Projekt wie vorgeschlagen benannt haben).
# Klicken Sie auf „<code>Share</code>“, um Ihr neu erstelltes Projekt im Repository anzulegen.
# Sie werden evtl. gefragt, welches Subversion-Working-Copy-Format verwendet werden soll. Wählen Sie 1.8 (außer, Sie haben einen Uralt-Subversion-Server am Laufen).
# Klicken Sie auf „<code>OK</code>“.

Wenn daraufhin die Frage aufpoppt, ob Sie die Datei „<code>vcs.xml</code>“ ebenfalls unter Versionskontrolle stellen wollen,
markieren Sie „<code>Remember, don't ask again</code>“ und beantworten die Frage mit „<code>Yes</code>“.

Das Projekt ist nun im gewählten Ordner des Subversion-Repositories angelegt worden, aber es wurden noch keine Daten auf den Server übertragen.
Die WebStorm-Ansicht hat sich ebenfalls geändert: Im Dateibaum des WebStorm-Projektes wurde die Datei „<code>index.html</code>“ grün eingefärbt
und in die Hauptmenü-Leiste von WebStorm sind zwei neue VCS-Icons eingetragen worden. Die beiden Icons ermöglichen eine schnellen Zugriff
auf die beiden wichtigsten Subversion-Befehle:

* VCS, grüner Pfeil nach unten: ''Update Project''
* VCS, grüner Pfeil nach oben: ''Commit Project''

Mittels ''Commit Project'' werden Änderungen, die auf dem Entwicklungsrechner lokal vorgenommen wurden, ins Subversion-Repository übertragen.
Mittels ''Update Project'' werden Änderungen, die im Repository ({{iAllg}} auf einem anderen Rechner und/oder von einem anderen Entwickler) vorgenommen wurden, ins lokale Verzeichnis des Entwicklungsrechners übernommen. Es gibt noch diverse weitere Subversion-Befehle. Diese sind über den Dateibaum zugänglich:

* Rechtsklick auf den Projektnamen im Dateibaum → Klick auf „<code>Subversion</code>“

Alle Dateien, die noch nicht im Repository enthalten sind (zurzeit sind noch überhaupt keine Daten darin enthalten), werden aufgelistet.
Neben der von Ihnen erstellten Datei „<code>index.html</code>“ gibt es noch einen Ordner namens „<code>.idea</code>“, der WebStrom-spezifische Projekt-Dateien enthält.
Sie könnten theoretisch bestimmte Dateien deselektieren, um sie nicht ins Repository zu übertragen. Das wäre hier aber kontraproduktiv.

Tragen Sie in das Feld „<code>Commit Message</code>“ einen sinnvollen Änderungstext ein, wie
{{zB}} „<code>HelloWorld01 created.</code>“ ein.
Klicken Sie dann auf „<code>Commit</code>“ (dt.: ''übergeben'').

Üblicherweise werden in Projekten englische Dateinamen, Variablenbezeichner, Kommentare (einschließlich Subversion-Kommentaren)
verwendet, um internationale Programmierer um Rat fragen (Diskussionsforen) oder sogar als Teammitglieder einstellen zu können.

Die Farbe der Datei „<code>index.html</code>“ ändert sich bei einem erfolgreichen Commit abermals. Sie wird wieder schwarz.
Das bedeutet: Der Inhalt dieser Datei stimmt mit dem Inhalt der im Repository gespeicherten Version überein.
Sobald der Inhalt der lokalen Version der Datei geändert wird, wird der Dateiname blau eingefärbt.
Neue Dateien werden – wie bereits gesehen – grün eingefärbt.
Bei einem erneuten Commit werden alle geänderten Dateien abermals ins Subversion-Repository eingetragen.
Allerdings werden die Vorgängerversionen nicht gelöscht. Das heißt, im Repository sind alle Versionen
einer jeden Datei dauerhaft zugänglich. Auf diese können Sie {{zB}} mittels

* Rechtsklick auf eine Datei im Dateibaum → Klick auf „<code>Subversion</code>“ → Klick auf „<code>Show History</code>“

zugreifen. Das heißt, es ist unnötig und sogar kontraproduktiv, lokale Versionen einer Datei anzulegen: „<code>index.html</code>“, „<code>index.html.v01</code>“, „<code>index.html.v02</code>“, ...

Um verschiedene Versionen im Versionskontrollsystem unterscheiden zu können, sind die Kommentare, die Sie beim
Commit angeben, von fundamentaler Bedeutung. Vergessen Sie diese daher nicht und versuchen Sie jeweils die wesentlichen
Änderungen, die Sie an einer Datei vorgenommen haben, möglichst kurz und prägnant zu beschreiben (mittels eines Einzeilers).

==Projekte aus einem Subversion-Repository laden==

Projekte, die in einem Subversion-Repository gespeichert sind, können mit einem beliebigen [[Subversion/HowTo|Subversion-Client]] auf Ihren Rechner laden.
Sofern Sie Schreibrechte für das Repository haben, können Sie danach Ihre Änderungen auch wieder per Commit ins Repository einspielen.

Damit ist Subversion (wie die meisten anderen Versionsverwaltungssysteme auch) sehr gut für Teamprojekte geeignet:
Zunächst muss ein Versionsverwaltungssysteme ({{dh}} Subversion-Repository) verfügbar sein,
auf das alle Teammitglieder lesend und schreibend zugreifen können. Ein Teammitglied fügt ein neues Projekt in dieses System ein.
Alle anderen Teammitglieder laden dieses Projekt auf ihren jeweiligen Entwicklungsrechner. Jedes Mal, wenn ein Teammitglied eine
signifikante Änderung am Projekt vorgenommen hat, testet er diese ausgiebig, bereinigt evtl. noch vorhandene Fehler
und committet diese Änderungen dann (nicht früher). Wenn sich jeder Entwickler mit seiner eigenen Kennung mit dem Versionsverwaltungssystem
verbindet, kann in der Änderungshistorie jederzeit nachgesehen werden, wer für welche Änderung verantwortlich ist.
Das ist insbesondere dann wichtig, wenn zwei Entwickler ohne Absprache denselben Code gleichzeitig ändern und committen
wollen. Dann kann es nämlich zu einem sogenannten Mergekonflikt kommen: Der Entwickler, der seine Änderungen
als Zweiter committen will, würde damit die Änderungen, die der erste Entwickler bereits committet hat, einfach überschreiben.
Das wird vom Versionsverwaltungssystem verhindert. Der zweite Entwickler muss den Mergekonflikt von Hand – aber mit Unterstützung des
Versionsverwaltungssystems – beheben.

Um Mergekonflikte nach Möglichkeit zu vermeiden, ist die Modularisierung von Softwareprojekten, die im Teamarbeit erstellt werden,
von zentraler Bedeutung. Aber auch für Einzelentwickler ist der Einsatz eines Versionsverwaltungssystems vorteilhaft,
da er für alle wesentlichen Projektversionen stets einen Backup zur Verfügung hat. Da ein Versionsverwaltungstool
üblicherweise auf einem externen Server läuft, ist dieses Backup sogar räumlich vom Entwicklungsrechner getrennt.
'''Allerdings nützt das beste Versionsverwaltungstool nichts, wenn Sie nicht regelmäßig (getestete) Zwischenstände committen und damit dauerhaft abspeichern.'''

<strong>In der Lehrveranstaltung [[Lehrveranstaltung:IAM_2006:Multimedia-Anwendungen/Programmierung|MMProg]],
für die dieses Tutorium entwickelt wurde, müssen sowohl Einzel- als auch Teamprojekte auf die zuvor beschriebene Weise realisiert werden.</strong>
Daher soll das Laden eines bereits vorhandenen Projektes geübt werden.

Für jedes Tutorium in diesem Wiki gibt es eine Musterlösung im Subversion-Repository „<code>https://glossar.hs-augsburg.de/beispiel</code>“ des Wikis.
Die Musterlösung für das aktuelle Tutorium kopieren Sie folgendermaßen auf Ihren Rechner.
(Beachten Sie, dass Sie nur lesend auf das GlossWiki-Subversion-Repository zugreifen können. Das heißt, Sie können die Musterlösungen
nur lokal, aber nicht im GlossarWiki-Repository ändern.)

Starten Sie WebStorm. Wenn der Startbildschirm mit den drei Möglichkeiten ein Projekt zu öffnen erschient, klicken Sie auf „<code>Check out from Version Control</code>“.
Es öffnet sich ein Drop-Down-Menü mit diversen Versionsverwaltungssystemen ([[GitHub]], [[CVS]], [[Git]], [[Mercurial]] und [[Subversion]]) .
Sie wählen „<code>Subversion</code>“ aus.

Anderenfalls klicken Sie auf „<code>VCS</code>“ → „<code>Check out from Version Control</code>“ → „<code>Subversion</code>“.

In beiden Fällen öffnet sich das schon bekannte Fenster mit einer Liste von verfügbaren Repositories.
Tragen Sie – sofern es nicht bereits vorhanden ist – mittels eines Klicks auf das Plus-Symbol
das Repository „<code>https://glossar.hs-augsburg.de/beispiel/</code>“ in diese Liste ein.

Öffnen Sie durch Klicks auf die Dreiecke vor dem jeweiligen Verzeichnis den Dateipfad
<div class="formula">
<code>https://glossar.hs-augsburg.de/beispiel</code> → <code>tutorium</code> → <code>es5</code> → <code>hello_world</code> → <code>WK_HelloWorld01</code>
</div>

Zum Schluss sollte der Ordner „<code>WK_HelloWorld01</code>“ selektiert sein.
Klicken Sie auf „<code>Checkout</code>“, wählen Sie in dem Dateibrowser, der sich daraufhin öffnet,
einen geeignet Speicherort ({{zB}} neben aber nicht in(!) Ihrem eigenen Projekt „<code>HelloWorld01</code>“)
und klicken Sie auf „<code>OK</code>“.

Daraufhin öffnet sich ein Fenster, in dem Sie festlegen sollen, in welchem Unterverzeichnis des zuvor gewählten Verzeichnisses
das Projekt lokal gespeichert soll („<code>Destination</code>“). Wenn Sie zuvor das Elternverzeichnis gewählt haben, in dem auch Ihr Projekt
„<code>HelloWorld01</code>“ liegt, sollten Sie den zweiten der angebotenen Pfade selektieren.
Anschließend klicken Sie abermals auf „<code>OK</code>“, wählen das Format 1.8 und klicken zum dritten Mal „<code>OK</code>“.
Danach stellt Ihnen WebStorm noch zwei Fragen. Sie sollten das Projekt öffnen (erste Frage). Ob Sie im Gegenzug das zuvor geöffnete
Projekt schließen wollen oder nicht (zweite Frage), müssen Sie selbst entscheiden.

Nun ist die Musterlösung lokal verfügbar. Sie können sie auf dieselbe Art wie ihr eigenes Projekt ansehen, ausführen und '''lokal''' ändern.
Ein Commit ist allerdings – wie bereits gesagt – nicht möglich. Versuchen Sie es ruhig.

==Fortsetzung des Tutoriums==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World 02|Teil 2 des Tutoriums]] bearbeiten.

==Quellen==
<references/>
<ol>
<li value="3"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>