HTML5-Tutorium: JavaScript: Hello World 07 - Versionsgeschichte

Kowa am 11. Mai 2024 um 14:17 Uhr

2024-05-11T14:17:40Z

← Nächstältere Version		Version vom 11. Mai 2024, 14:17 Uhr
Zeile 8:		Zeile 8:
	Als nächstes gehen wir das nächste Problem an: Ihr Code enthält ebenfalls Konstanten und verstößt damit gegen das		Als nächstes gehen wir das nächste Problem an: Ihr Code enthält ebenfalls Konstanten und verstößt damit gegen das
	[[Programmierprinzipien\|Programmierprinzip]] „Konstante Werte gehören nicht in den Code, sondern in Konfigurationsdateien.“		[[Programmierprinzipien\|Programmierprinzip]] „Konstante Werte gehören nicht in den Code, sondern in Konfigurationsdateien.“
			say
	Eine Ausnahme bilden triviale Konstanten wie <code>0</code>, <code>1</code>, <code>null</code>, <code>true</code> oder <code>false</code>, sofern sie mit großer Sicherheit nie im Code geändert werden müssen. Aber schon eine Konstante wie		Eine Ausnahme bilden triviale Konstanten wie <code>0</code>, <code>1</code>, <code>null</code>, <code>true</code> oder <code>false</code>, sofern sie mit großer Sicherheit nie im Code geändert werden müssen. Aber schon eine Konstante wie
	<code>3.1415926</code> gehört nicht in den Code. Man verwendet stattdessen besser <code>Math.PI</code> und erhält damit		<code>3.1415926</code> gehört nicht in den Code. Man verwendet stattdessen besser <code>Math.PI</code> und erhält damit
Zeile 145:		Zeile 145:
	Das heißt, Sie müssen auch noch die Datei <code>src/js/app/greet.js</code> erweitern.		Das heißt, Sie müssen auch noch die Datei <code>src/js/app/greet.js</code> erweitern.

	Ersetzen Sie in dieser Datei im Rumpf der Funktion <code>~~goToHello~~</code>		Ersetzen Sie in dieser Datei im Rumpf der Funktion <code>sayHello</code>
	den darin enthalten Code durch folgenden Code:		den darin enthalten Code durch folgenden Code:

Zeile 163:		Zeile 163:
	</source>		</source>

	Die Funktion <code>~~goToHelloOnEnter~~</code> ändert sich dagegen nicht.		Die Funktion <code>sayHelloOnEnter</code> ändert sich dagegen nicht.

	Nun sollte (nach einen <code>grunt</code>-Lauf) die Web-App wie gewünscht funktionieren.		Nun sollte (nach einen <code>grunt</code>-Lauf) die Web-App wie gewünscht funktionieren.

Kowa am 10. Mai 2024 um 14:00 Uhr

2024-05-10T14:00:26Z

← Nächstältere Version		Version vom 10. Mai 2024, 14:00 Uhr
Zeile 145:		Zeile 145:
	Das heißt, Sie müssen auch noch die Datei <code>src/js/app/greet.js</code> erweitern.		Das heißt, Sie müssen auch noch die Datei <code>src/js/app/greet.js</code> erweitern.

	Ersetzen Sie in dieser Datei im Rumpf der Funktion <code>~~sayHello~~</code>		Ersetzen Sie in dieser Datei im Rumpf der Funktion <code>goToHello</code>
	den darin enthalten Code durch folgenden Code:		den darin enthalten Code durch folgenden Code:

Zeile 163:		Zeile 163:
	</source>		</source>

	Die Funktion <code>~~sayHelloOnEnter~~</code> ändert sich dagegen nicht.		Die Funktion <code>goToHelloOnEnter</code> ändert sich dagegen nicht.

	Nun sollte (nach einen <code>grunt</code>-Lauf) die Web-App wie gewünscht funktionieren.		Nun sollte (nach einen <code>grunt</code>-Lauf) die Web-App wie gewünscht funktionieren.

Kowa: /* JSON */

2021-04-12T15:53:07Z

JSON

← Nächstältere Version		Version vom 12. April 2021, 15:53 Uhr
Zeile 44:		Zeile 44:
	'''src/json/config_de.json'''		'''src/json/config_de.json'''
	<source lang="javascript">		<source lang="javascript">
	{ "text":		{ "html":
			{ "reset": "Reset",
			"submit": "Begrüßung"
			},

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

	~~"css":~~
	~~{ "hidden": "hidden"~~
	}		}
	}		}
Zeile 61:		Zeile 60:
	'''src/json/config_en.json'''		'''src/json/config_en.json'''
	<source lang="javascript">		<source lang="javascript">
	{ "text":		{ "html":
			{ "reset": "Reset",
			"submit": "Say hello"
			},

			"text":
	{ "title": "Hello, Stranger!",		{ "title": "Hello, Stranger!",
	"question": "What's your name?",		"question": "What's your name?",
	~~"reset": "Reset",~~
	~~"submit": "Say hello",~~
	"hello": "Hello, $1!",		"hello": "Hello, $1!",
	"welcome": "Welcome to Multimedia Programming!"		"welcome": "Welcome to Multimedia Programming!"
	},

	~~"css":~~
	~~{ "hidden": "hidden"~~
	}		}
	}		}

Kowa am 12. April 2021 um 15:32 Uhr

2021-04-12T15:32:17Z

← Nächstältere Version		Version vom 12. April 2021, 15:32 Uhr
Zeile 44:		Zeile 44:
	'''src/json/config_de.json'''		'''src/json/config_de.json'''
	<source lang="javascript">		<source lang="javascript">
	{		{ "text":
	"text":		{ "title": "Hallo, Fremder!",
	{
	"title": "Hallo, Fremder!",
	"question": "Wie heißen Sie?",		"question": "Wie heißen Sie?",
	"reset": "Reset",		"reset": "Reset",
Zeile 56:		Zeile 54:

	"css":		"css":
	{		{ "hidden": "hidden"
	"hidden": "hidden"
	}		}
	}		}
Zeile 64:		Zeile 61:
	'''src/json/config_en.json'''		'''src/json/config_en.json'''
	<source lang="javascript">		<source lang="javascript">
	{		{ "text":
	"text":		{ "title": "Hello, Stranger!",
	{
	"title": "Hello, Stranger!",
	"question": "What's your name?",		"question": "What's your name?",
	"reset": "Reset",		"reset": "Reset",
Zeile 76:		Zeile 71:

	"css":		"css":
	{		{ "hidden": "hidden"
	"hidden": "hidden"
	}		}
	}		}

Kowa am 12. April 2021 um 15:29 Uhr

2021-04-12T15:29:25Z

Änderungen zeigen

Kowa am 12. April 2021 um 13:43 Uhr

2021-04-12T13:43:36Z

Änderungen zeigen

Kowa: Kowa verschob die Seite HTML5-Tutorium: JavaScript: Hello World 06 nach HTML5-Tutorium: JavaScript: Hello World 07

2021-04-07T11:51:15Z

Kowa verschob die Seite HTML5-Tutorium: JavaScript: Hello World 06 nach HTML5-Tutorium: JavaScript: Hello World 07

← Nächstältere Version	Version vom 7. April 2021, 11:51 Uhr
(kein Unterschied)

Kowa: Die Seite wurde neu angelegt: „{{In Bearbeitung}} {{HTML5-Tutorium:JavaScript:HelloWorld:Menü}} '''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_He…“

2017-10-19T15:09:07Z

Die Seite wurde neu angelegt: „{{In Bearbeitung}} {{HTML5-Tutorium:JavaScript:HelloWorld:Menü}} '''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_He…“

Neue Seite

{{In Bearbeitung}}
{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld06/web/index.html <code>index.html</code>],
([https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld06/ SVN-Repository])
==Anwendungsfälle (Use Cases)==
Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_04|vierten Teil des Tutoriums]]
ändern sich die die Anwendungsfälle nur geringfügig. Das Begrüßungsformular soll ''zweimal''
im Browser angezeigt werden, einmal auf Deutsch und auf Englisch. Beide Begrüßungsformulare sollen
unabhängig voneinander funktionieren.

Ein Grundprinzip der Programmierung lautet [[Don't repeat yourself]] (DRY). Sie könnten nun einfach den vorhandenen
Code duplizieren und entsprechend anpassen. Aber genau das würde gegen das Prinzip „Keep your code DRY“ verstoßen.
Code-Duplikation kann mit Hilfe von [[Klasse (objektorientiert)|Klassen]] vermieden werden. Sie stellen eine Art
„Blaupause“ dar, um Objekte mit ähnlichen Eigenschaften ganz einfach erstellen zu können.

==Erstellen eines neuen Projektes==

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

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

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

Ändern Sie in den Dateien <code>package.json</code> und <code>web/index.html</code> die Versionsnummern,
die Beschreibung und gegebenenfalls den Pfad zum Repository Ihres Projektes.

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

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

==Verfeinerung der Webpack-Umgebung==
Zunächst benötigen Sie ein paar weitere Node.js-Module
<source lang="bash">
npm install --save-dev es6-autobind
npm install --save-dev node-sass sass-loader extract-text-webpack-plugin
</source>

Das Modul <code>es6-autobind</code> wird im Zusammenhang mit der Definition der Klasse <code>Greet</code>
benötigt . Daher wird es erst später besprochen.

Im vierten Teil des Tutoriums wurde die Datei <code>initial.css</code> nicht von Webpack verwaltet,
sondern direkt in das Verzeichnis <code>web/css</code> eingefügt. Damit liegt auch die
Verantwortung für die Komprimierung dieser Datei beim Programmierer. Das soll sich ändern.
Sie erweitern die Webpack-Konfiguration so, dass künftig auch diese Datei unter der Kontrolle
von Webpack steht.

===SCSS===

Anstelle von CSS-Dateien verwenden Sie künftig SCSS-Dateien. Das ist zunächst einmal nicht weiter schwer,
das jede CSS-Datei automatisch auch eine SCSS-Datei ist. Bei der Verwendung von CSS können Sie
allerdings das Prinzip „[[Don't repeat yourself]]“ (DRY) nicht beachten. Sie müssen für verschiedene Elemente
ständig Informationen wiederholen (gewünschter Font, Hintergrundfarbe, Größenangaben etc.). Deshalb
gibt es mehrere Projekte wie {{zB}} [[LESS]] und [[Sass]] , die den CSS-Standard erweitern, um dieses Problem
zu vermeiden. Sass verwendet allerdings eine ganz andere Syntax als CSS. Allerdings
unterstützt das Sass-Projekt auch die Sprache SCSS, die CSS einfach um weitere syntaktische Elemente ergänzt.
Zum Beispiel kann man in SCSS Konstanten definieren:

<source lang="CSS">
$background-color: #C5EFFC;
</source>

Und nun kann man in der CSS-Datei anstelle von <code>#C5EFFC</code> stets <code>$background-color</code>
schreiben, um die Hintergrundfarbe von bestimmten Elementen zu definieren. Wenn man nun dieses Farbe ändern will,
muss das nicht mehr bei allen Elementen einzeln passieren. Es reicht, die Farbe in der Konstantendefinition abzuändern.
Der CSS-Code ist nun DRY.

Leider unterstützt kein Browser SCSS direkt. Aber für was gibt es Transpiler wie Webpack, die eine SCSS-Datei
automatisch in eine CSS-Datei übersetzen können.

Ersetzen Sie in Ihrem Projekt die Datei <code>src/css/main.css</code> durch
drei SCSS-Dateien: <code>_config,scss</code>, <code>initial.scss</code> und </code>app.scss</code>.

In der Datei <code>_config,scss</code> werden alle von den anderen SCSS-Dateien benötigten Konstanten definiert.
Wenn man künftig am Layout einen Zeichensatz, eine Farbe, einen Hintergrund oder Ähnliches ändern will,
reicht es die entsprechenden Konstanten anzupassen und schon erzeugt Webpack automatisch aktualisiere
CSS-Dateien.

Die Datei <code>initial.scss</code> enthält möglichst wenig Code. Das ist Vorlage für die Datei <code>initial.bundle.css</code>,
die im HTML-Head-Bereich geladen vor dem Body-Inhalt werden soll.
Die eigentlichen CSS-Informationen der Web-Anwendung werden in <code>app.scss</code> gespeichert. Die zugehörigen
CSS-Anweisungen werden von Webpack wie gehabt in <code>app.bundle.js</code> integriert.

'''<code>src/css/_config,scss</code>'''
<source lang="CSS">
$font-family-sans: Verdana, Helvetica, sans-serif;
$font-family-serif: "Times New Roman", Times, serif;
$background-color: #C5EFFC;
</source>

Diese Datei kann nun mit Hilfe des SCSS-Befehls <code>@import</code>
in die anderen beiden SCSS-Dateien eingefügt werden. Webpack (genauer gesagt das SASS-Modul von Webpack)
kennt diesen Befehl und führt im beim Erstellen der zugehörigen CSS-Dateien auch aus.

Der Import-Befehl ist hier notwendig, da in der Datei <code>initial.scss</code> die Konstante <code>$background-color</code>
verwendet wird. Ansonsten enthält dies Datei nur den schon bekannten CSS-Code.

'''<code>src/css/initial.scss</code>'''
<source lang="CSS">
@import 'config';

body
{ background-color: $background-color;
}

.hidden
{ display: none;
}
</source>

Die Datei <code>app.scss</code> ist deutlich umfangreicher. Daher soll der zugehörige CSS-Code
ja auch erst gemeinsam mit der Datei <code>app.bundle.js</code> geladen werden. Das meiste ist üblicher
CSS-Code, den Sie schon im vierten Teil des Tutoriums kennengelernt haben. Es gibt ein paar neue
Elemente, wie die CSS-Klassen-Elemente <code>.left</code> und <code>.right</code>, die in der HTML-Datei dieses
Tutoriums zusätzlich verwendet werden. Außerdem sehen Sie in der Datei noch ein paar weitere SCSS-Elemente. Diese werden
im Anschluss an den folgenden code beschrieben.

'''<code>src/css/app.scss</code>'''
<source lang="CSS">
@import 'config';

html, body
{ height: 100%;
font-size: 2vw !important;
font-family: $font-family-sans;
background-color: $background-color;
}

html
{ display: table;
width: 100%;
}

body
{ display: table-cell;
text-align: center;
vertical-align: middle;
}

h1
{ padding-bottom: 0;
margin-bottom: 0;
}

#section_form
{ text-align: center;
width: 21em;
margin-left: auto;
margin-right: auto;

h1
{ font-size: 200%;
margin-bottom: 0.5ex;
}
}

#section_hello
{ h1
{ font-size: 270%;
}
}

p, label
{ font-family: $font-family-serif;
font-size: 100%;
}

label, input, button
{ width: 10em;
font-size: 100%;
display: inline-block;
box-sizing: border-box;
margin-bottom: 0.5ex;
}

label
{ text-align: right;
}

@mixin panel()
{ padding: 0;
width: 50%;
}

.left
{ float: left;
@include panel();
}
.right
{ float: right;
@include panel();
}
</source>

In diese SCSS-Datei werden folgende SCSS-Erweiterungen verwendet:

* Import-Befehl: <code>@import 'config';</code>
* Konstanten: <code>$font-family-sans</code>, <code>$font-family-serif</code>, <code>$background-color</code>
* Verschachtelte Anweisungen: {{zB}} <code>h1</code> innerhalb von <code>#section_form</code>
* Mixins, um eine Liste von Attributen nur einmal zu definieren und und mehreren Elemente wieder verwenden zu können.

Die verschachtelten Anweisungen strukturieren den CSS-Code deutlich besser. Es ist nicht mehr
notwendig einen Selektor wie <code>#section_form</code> mehrfach zu verwenden.

Sehen Sie sich den Unterschied an. In der Datei <code>main.css</code> vom vierten Teil des Tutoriums hatten Sie
folgendes geschrieben:

<source lang="CSS">
#section_form
{
text-align: center;
width: 21em;
margin-left: auto;
margin-right: auto;
}

#section_form > h1
{
font-size: 200%;
margin-bottom: 0.5ex;
}
</source>

Die SCSS-Variante ist deutlich strukturierter und prägnanter.

<source lang="CSS">
#section_form
{ text-align: center;
width: 21em;
margin-left: auto;
margin-right: auto;

h1
{ font-size: 200%;
margin-bottom: 0.5ex;
}
}
</source>

Insbesondere bei großen CSS-Dateien erweist sich diese kompaktere Schreibweise als vorteilhaft.

Ein weiteres Element, das nur SCSS bietet sind die Mixins. Sie definieren zunächst ein Mixin,
das eine Folge von CSS-Attributen zusammenfasst. (Auch hier könnten wieder Verschachtelungen und
andere SCSS-Erweiterungen verwendet werden!)

<source lang="CSS">
@mixin panel()
{ padding: 0;
width: 50%;
}
</source>

Und nun können Sie dieses Mixin in diversen andere Elemente einbinden:

<source lang="CSS">
.left
{ float: left;
@include panel();

.right
{ float: right;
@include panel();
}
</source>

In normalen CSS-Code, müssten Sie denselben Code Non-DRY formulieren:

<source lang="CSS">
.left
{ float: left;
padding: 0;
width: 50%;
}

.right
{ float: right;
padding: 0;
width: 50%;
}
</source>

Wenn Sie hier das Layout der Panels ändern wollten (andere Breite, andere Ränder etc.), müssen
Sie den CSS-Code von jedem Panel einzeln ändern. In der SCSS-Datei erfolgt die Änderung dagegen DRY: Sie ändern einfach den Mixin-Code ab.

Wenn die aktuellen Browser SCSS verstehen würden, könnte sie <code>initial.scss</code> und <code>app.scss</code> direkt
vom HTML-Code aus laden. Allerdings geht das derzeit leider nicht. Somit muss Webpack angewiesen werden, CSS-Code aus den
SCSS-Dateien zu erzeugen. Dies ist mit den beiden Node.js-Modulen <code>node-sass</code> und <code>sass-loader</code>,
die Sie bereits installiert haben, ganz einfach möglich.

Ersetzen Sie in der Datei <code>webpack.config.js</code> folgenden Code

<source lang="javascript">
{ test: /\.css$/,
use: [ 'style-loader',
{ loader: 'css-loader', options: { minimize: true } }
]
},
</source>

durch folgenden:

<source lang="javascript">
{ test: /\.(css|scss|sass)$/,
use: [ 'style-loader',
{ loader: 'css-loader', options: { minimize: true } },
'sass-loader'
]
}
</source>

Der Test wird so erweitert, dass diese Regel jetzt nicht nur für die Verarbeitung von Dateien mit der
Endung <code>.css</code> zuständig ist, sondern auch für Dateien mit den Endungen
<code>.sass</code> und <code>.scss</code>.

Die Liste der zugehörigen Loader wird einfach um einen Loader erweitert: <code>sass-loader</code>.
Diese Liste wird von hinten nach vorne abgearbeitet. Das heißt, eine Datei wie beispielsweise <code>app.scss</code>
wird erst mit Hilfe des Sass-Loaders in eine CSS-Datei umgewandelt, diese wird mit Hilfe des CSS-Loaders komprimiert
und das Ergebnis dieser Datei wird mit Hilfe des Style-Loaders in die zugehörige JavaScript-Ausgabedatei integriert.

Jetzt müssen nur noch die zugehörigen JavaScript-Dateien erstellt werden.

Im <code>entry</code>-Objekt der Datei <code>webpack.config.js</code> ist bereits die Datei <code>src/js/app.js</code>
eingetragen. Für Sie wird von Webpack die Datei <code>web/js/app.bundle.js</code> erzeugt.

Der Name der Zieldatei wurde im <code>output</code>-Objekt von <code>webpack.config.js</code> spezifiziert.
'''Achtung:''' Überprüfen Sie, ob das <code>output</code>-Objekt folgendermaßen definiert wurde.

<source lang="javascript">
output:
{ filename: '[name].bundle.js',
path: absolutePath('web/js')
}
</source>

Im vierten Teil des Tutoriums stand der Unterpfad <code>js</code> noch im Dateinamen, was problematisch ist.
Verbessern Sie gegebenenfalls das Output-Element.

Damit diese Zieldatei insbesondere den komprimierten Code der Datei <code>src/css/app.scss</code> enthält,
muss <code>src/js/app.js</code> leicht modifiziert werden.

Ersetzen Sie in dieser Datei den Import-Befehl

<source lang="javascript">
import '../css/main.css';
</source>
durch den Import-Befehl

<source lang="javascript">
import '../css/app.scss';
</source>

Die Datei <code>web/css/main.css</code> gibt es ja nicht mehr; sie wurde durch
<code>web/css/app.scss</code> ersetzt.

Damit auch <code>web/css/initial.scss</code> durch webpack verwaltet wird, benötigen wir eine zweite
JavaScript-Datei.

'''src/js/initial.js'''
<source lang="javascript">
import '../css/initial.scss';
</source>

Sie sehen das richtig, die Datei <code>src/js/initial.js</code> enthält eine einzige Code-Zeile.
Sie erinnern sich? Webpack dient eigentlich nur dazu JavaScript-Dateien zu packen. Also geben wir diesen
Tool eine JavaScript-Datei, die die gewünschte CSS-Datei einfach mittels eine ES6-Import-Befehls importiert (ES6 = EcmaScript 6).
Fügen Sie nun in das <code>entry</code>-Objekt der Datei <code>webpack.config.js</code> vor der Zeile
folgende zweite Zeile ein:

<source lang="javascript">
initial: absolutePath('src/js/initial.js')
</source>

Beachten Sie, dass in einem JavaScript-Objekt die Attribute durch Kommas voneinander getrennt werden. Fügen Sie also
an passender Stelle auch noch ein Komma ein.

Wenn Sie jetzt Grunt aufrufen, sollten zwei Dateien generiert werden: <code>web/js/app.bundle.js</code> und <code>web/js/initial.bundle.js</code>.

Löschen Sie nun den Ordner <code>web/css</code> (die darin befindliche Datei <code>initial.css</code> wird nicht mehr benötigt)
und ersetzen Sie in der Datei <code>index.html</code> die Zeile

<source lang="html">
<link rel = "stylesheet" type = "text/css" href = "css/initial.css"/>
</source>

durch folgende Zeile:

<source lang="html">
<script type = "text/javascript" src = "js/initial.bundle.js"></script>
</source>

Wenn Sie jetzt die Datei <code>index.html</code> im Browser öffnen, sollte sie wieder genauso funktionieren wie zuvor.

'''Anmerkung''': Die Datei <code>src/js/initial.js</code> könnte natürlich noch mehr machen, als einfach nur eine CSS-Datei zu laden.
Sie könnte beispielsweise eine kleine Animation einblenden (die berühmte Sanduhr, nur etwas moderner), die solange läuft, bis
die eigentliche Web-Anwendung, {{dh}} <code>app.bundle.js</code> vollständig geladen wurde und die Animation wieder beendet.

===Erzeugen einer CSS-Datei===

Zurzeit enthält die JavaScript-Datei <code>web/js/initial.bundle.js</code> nur eine komprimierte CSS-Datei und etwas Code,
um diesen in das HTML-Dokument einzufügen. Die Google-Suche bewertet HTML-Dateien, die sauberen CSS-Code {{iAllg}} enthalten,
höher, als HTML-Datei, die nur JavaScript-Code enthalten. Daher wäre es in diesem Fall sinnvoll, die komprimierte
CSS-Datei direkt in den HTML-Code einzubinden. Das ist aber gar nicht so einfach, da Webpack keine CSS-Dateien erstellt,
sondern nur JavaScript-Dateien. Aber mit einem kleine Hack funktioniert das trotzdem.

Sie haben vor auch noch die Node.js-Module <code>extract-text-webpack-plugin</code>
installiert. Mit diesem Sie eine CSS-Datei aus einer JavaScript-Datei extrahieren.

Ersetzen Sie zunächst in der Datei <code>webpack.config.js</code> den Test
<source lang="javascript">
test: /\.(css|scss|sass)$/,
</source>
durch
<source lang="javascript">
test: /app\.(css|scss|sass)$/,
</source>

Damit erreichen Sie dass diese Regel jetzt nur noch für Dateien funktioniert, die auf <code>app.css</code> oder
<code>app.scss</code> oder <code>app.sass</code> enden. Die Datei <code>src/css/app.scss</code> in die
Datei <code>src/js/app.bundle.js</code> integriert werden.

Laden Sie zunächst die ExtractTextPlugin-Erweiterung, indem Sie in die Datei <code>webpack.config.js</code>
folgende zweite Zeile einfügen:
<source lang="javascript">
const ExtractTextPlugin = require('extract-text-webpack-plugin');
</source>

Für die Datei <code>src/css/initial.scss</code> fügen Sie nun in die Liste mit den Regeln eine weitere Regel ein (Komma nicht vergessen):
<source lang="javascript">
{ test: /initial\.(css|scss|sass)$/,
use: ExtractTextPlugin.extract
({fallback: "style-loader",
use: [{ loader: 'css-loader', options: { minimize: true } },
'sass-loader'
]
})
}
</source>

Diese benutzt das zuvor erwähnte Plugin, um die komprimierte CSS-Datei aus der Datei <code>src/js/initial.bundle.js</code>
zu extrahieren. Das erledigt sie aber nur fast. Man muss dem Plugin noch mitteilen wohin Sie die CSS-Datei speichern soll.

Dazu müssen Sie die bislang leere Plugin-Liste am Ende der Datei

<source lang="javascript">
plugins:
[]
</source>

mit Inhalt füllen:

<source lang="javascript">
plugins:
[ new ExtractTextPlugin("../css/[name].bundle.css") ]
</source>

Führen Sie nun <code>grunt</code> aus. Es sollte die Datei <code>web/css/initial.bundle.css</code>
erzeugt worden sein.

Nun müssen sie in der Datei <code>index.html</code> die Zeile

<source lang="html">
<script type = "text/javascript" src = "js/initial.bundle.js"></script>

</source>

wieder durch eine CSS-Link-Zeile ersetzen (da ja in der Datei <code>initial.bundle.js</code> kein sinnvoller Inhalt mehr enthalten ist;
sie wurde durch das Extract-Text-Plugin „ausgelutscht“).

<source lang="html">
<link rel = "stylesheet" type = "text/css" href = "css/initial.bundle.css"/>
</source>

Sie könnten nun noch die überflüssige Datei <code>web/js/initial.bundle.js</code> von webpack wieder entfernen lassen.
Wie das geht entnehmen Sie bitte der Seite https://stackoverflow.com/questions/37408873/delete-or-not-create-a-file-for-each-entry-in-webpack
sowie der [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld05/ Musterlösung]. Wichtig ist das nicht.
Wenn Sie später mal eine kleine Warteanimation erstellen sollten, bräuchten Sie dieses Datei sowieso wieder.

==JSON==

Bislang haben sie den CSS-Code unter Webpack-Kontrolle gestellt und damit DRY gemacht.
Als nächstes gehen wir das nächste Problem an: Ihr Code enthält Konstanten.damit verstoßene Sie gegen ein
weiteres fundamentales [[Programmierprinzipien|Programmierprinzip]]:

''Konstante Werte sollten im Allgemeinen nicht direkt in den Code eingefügt werden, sondern als konstante Werte separat definiert werden (Ausnahme: triviale Konstanten, die sich sicher nie ändern werden, wie z.B. Vergleiche mit dem Wert 0). Konstanten, die das Programmverhalten beeinflussen, sollten im Allgemeinen beim Programmstart aus einer Konfigurationsdatei ausgelesen werden.''

{{TBD}}
==Wiederverwendbarkeit==

{{TBD}}
==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>