HTML5-Tutorium: JavaScript: Hello World 06

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3
(zu größeren Teilen überprüft) 		Umfang: 4
(unwichtige Fakten fehlen) 		Quellenangaben: 3
(wichtige Quellen vorhanden) 		Quellenarten: 5
(ausgezeichnet) 		Konformität: 3
(gut)

Vorlesung WebProg

Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6

Musterlösung: index.html, [(SVN-Repository)

Anwendungsfälle (Use Cases)

Gegenüber dem vierten Teil des Tutoriums ändern sich die die Anwendungsfälle nur geringfügig. Das Begrüßungsformular soll zweimal im Browser angezeigt werden, einmal auf Deutsch und auf Englisch. Beide Begrüungsformulare sollen unabhängig voneinander funktionieren.

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

Erstellen eines neuen Projektes

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

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

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

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

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

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

Verfeinerung der Webpack-Umgebung

Zunächst benötigen Sie ein paar weitere Node.js-Module 

npm install --save-dev es6-autobind
npm install --save-dev node-sass sass-loader
npm install --save-dev extract-text-webpack-plugin optimize-css-assets-webpack-plugin

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

Im vierten Teil des Tutoriums wurde die Datei initial.css nicht von webpack verwaltet, sondern direkt in das Verzeichnis web/css 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 z. B. 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: 

$background-color:  #C5EFFC;

Und nun kann man in der CSS-Datei anstelle von #C5EFFC stets $background-color 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 src/css/main.css durch drei SCSS-Dateien: _config,scss, initial.scss und app.scss.

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

src/css/_config,scss 

$font-family-sans:  Verdana, Helvetica, sans-serif;
$font-family-serif: "Times New Roman", Times, serif;
$background-color:  #C5EFFC;

Diese Datei kann nun mit Hilfe des SCSS-Befehls @import 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 initial.scss die Konstante $background-color verwendet wird. Ansonsten enthält dies Datei nur den schon bekannten CSS-Code.

src/css/initial.scss 

@import 'config';

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

.hidden
{ display: none;
}

Die Datei app.scss ist deutlich umfangreicher. Daher soll der zugehörige CSS-Code ja auch erst gemeinsam mit der Datei app.bundle.js 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 .left und .right, 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.

src/css/app.scss 

@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();
}

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

  • Import-Befehl: @import 'config';
  • Konstanten: $font-family-sans, $font-family-serif, $background-color
  • Verschachtelte Anweisungen: z. B. h1 innerhalb von #section_form
  • 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 #section_form mehrfach zu verwenden.

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

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

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

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

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

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

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

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

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

.left
{ float: left;
  @include panel();}

.right
{ float: right;
  @include panel();
}

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

.left
{ float:   left;
  padding: 0;
  width:   50%;
}

.right
{ float:   right;
  padding: 0;
  width:   50%;
}

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.

Wiederverwendbarkeit

TO BE DONE

Quellen

  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_JavaScript:_Hello_World_06&oldid=43710“