1. Einführung in die Sprache ECMASCRIPT 6

Das PDF dieses Artikels ist verfügbar |HIER|.

Die Beispiele dieses Artikels sind unter |HIER| verfügbar.

Dieses Dokument ist Teil einer vierteiligen Artikelserie:

[Einführung in die Sprache PHP7 anhand von Beispielen (2019)];
[Einführung in die Sprache ECMAScript 6 anhand von Beispielen (2019)]. Dies ist das vorliegende Dokument;
[Einführung in das VUE.JS-Framework anhand von Beispielen (2019)];
[Einführung in das NUXT.JS-Framework anhand von Beispielen (2019)];

Es handelt sich dabei ausschließlich um Dokumente für Anfänger. Die Artikel bauen logisch aufeinander auf, sind jedoch nur lose miteinander verbunden:

Das Dokument [1] stellt die Sprache PHP 7 vor. Leser, die sich nur für die Sprache PHP interessieren und nicht für die JavaScript-Sprache der folgenden Artikel, können an dieser Stelle aufhören;
die Dokumente [2-4] zielen darauf ab, einen JavaScript-Client für den im Dokument [1] entwickelten Steuerberechnungsserver zu erstellen;
die JavaScript-Frameworks [vue.js] und [nuxt.js] aus den Artikeln 3 und 4 setzen Kenntnisse des JavaScripts der neuesten Versionen von ECMASCRIPT voraus, nämlich der Version 6. Das Dokument [2] richtet sich daher an diejenigen, die diese JavaScript-Version nicht kennen. Es bezieht sich auf den Steuerberechnungsserver, der im Dokument [1] erstellt wurde. Leser von [2] müssen daher gelegentlich auf das Dokument [1] zurückgreifen;
sobald man ECMASCRIPT 6 beherrscht, kann man sich mit dem Framework VUE.JS befassen, das es ermöglicht, JavaScript-Clients zu erstellen, die in einem Browser im SPA-Modus (Single Page Application) ausgeführt werden. Es handelt sich um das Dokument [3]. Es bezieht sich sowohl auf den im Dokument [1] erstellten Steuerberechnungsserver als auch auf den Code des eigenständigen JavaScript-Clients, der in [2] erstellt wurde. Wer sich mit [3] beschäftigt, muss daher gelegentlich auf die Dokumente [1] und [2] zurückgreifen;
Sobald man VUE.JS beherrscht, kann man sich mit dem Framework NUXT.JS befassen, das die Erstellung von JavaScript-Clients ermöglicht, die in einem Browser im Modus SSR (Server Side Rendered) ausgeführt werden. Es bezieht sich sowohl auf den im Dokument [1] erstellten Steuerberechnungsserver auf den eigenständigen JavaScript-Client-Code, der in [2] erstellt wurde, sowie auf die Anwendung [vue.js], die im Dokument [3] entwickelt wurde. Der Leser von [4] muss daher gelegentlich auf die Dokumente [1], [2] und [3] zurückgreifen;

Die neueste Version des Steuerberechnungsservers, die im Dokument [1] entwickelt wurde, lässt sich auf verschiedene Weise verbessern:

Die beschriebene Version ist serverzentriert. Der aktuelle Trend (Stand: Juli 2019) geht jedoch in Richtung Client-Server:
- Der Server läuft als Dienst jSON;
- Eine statische oder dynamische Seite bildet den Einstiegspunkt der Webanwendung. Diese Seite enthält HTML /CSS, aber auch JavaScript;
- die anderen Seiten der Webanwendung werden dynamisch durch das JavaScript generiert:
  - Die Seite HTML kann durch Zusammensetzen statischer Fragmente erstellt werden, die von demselben Server bereitgestellt werden, der auch die Startseite bereitgestellt hat, oder vollständig durch JavaScript generiert werden;
  - diese verschiedenen Seiten zeigen Daten an, die vom Dienst jSON angefordert werden;

Somit wird die Arbeit zwischen Client und Server aufgeteilt. Der dadurch entlastete Server kann mehr Nutzer bedienen.

Die diesem Modell entsprechende Architektur sieht wie folgt aus:

JS: JavaScript

Der JavaScript-Code läuft auf dem Client:

eines Dienstes für statische oder nicht-statische Seiten oder Fragmente;
eines Dienstes jSON;

Der JavaScript-Code ist somit ein jSON-Client und kann als solcher in Schichten [UI, métier, dao] (UI: Benutzeroberfläche), so wie es auch bei unseren in PHP geschriebenen Clients jSON der Fall war. Letztendlich lädt der Browser nur eine einzige Seite, nämlich die Startseite. Alle anderen Seiten werden durch JavaScript abgerufen und aufgebaut. Diese Art von Anwendung wird als SPA: Single Page Application oder auch als APU: Anwendung mit einer einzigen Seite bezeichnet.

Diese Art von Anwendung gehört auch zu den sogenannten AJAX: Asynchronous JavaScript und XML

Asynchron: weil die Aufrufe des JavaScript-Clients an den jSON-Server asynchron erfolgen;
XML: weil XML die Technologie war, die vor dem Aufkommen von jSON verwendet wurde. Das Akronym AJAX wurde jedoch beibehalten;

Wir werden eine solche Architektur in den folgenden Kapiteln untersuchen. Auf der Client-Seite werden wir das JavaScript-Framework [Vue.js] [https://vuejs.org/] verwenden, um den JavaScript-Client für den Server jSON PHP zu schreiben, den wir im Dokument [1] beschrieben haben.

[Vue.js] ist ein JavaScript-Framework. Um es zu verstehen, muss man diese Sprache beherrschen. In diesem Dokument stellen wir den Standard ECMAScript 6 vor, der die aktuellste (Stand 2019) Standardisierung dieser Sprache darstellt. Die Geschichte und die Rolle von ECMAScript finden Sie auf Wikipedia unter [https://fr.wikipedia.org/wiki/ECMAScript].

Dieses Dokument enthält eine Liste von JavaScript-Konsolenskripten aus verschiedenen Bereichen (Sprachstrukturen, Zugriff auf Datenbanken und das Internet, schichtweise Programmierung, Programmierung über Schnittstellen). Das Dokument schließt mit zwei Anwendungen:

Eine Konsolenanwendung, die als Client für den im Dokument [1] erstellten Steuerberechnungsserver fungiert. Dieser Client wird dieselbe Architektur aufweisen wie der im Dokument [1] erstellte Konsolen-Client PHP:

Die Schichten [7-9] entsprechen denen des JavaScript-Clients, der in einer Konsole ausgeführt wird;
die Schichten [1-4] entsprechen denen des Servers PHP 7, der im Dokument [1] erstellt wurde;
Im Gegensatz zum Client PHP, der in das Dokument [1] eingebettet ist, findet keine Interaktion mit dem lokalen Dateisystem [6] statt;

Hier handelt es sich um eine Client-Server-Anwendung, bei der der Client eine Konsolenanwendung ist. Es wird eine zweite Anwendung geschrieben, bei der der Code der Schichten [7-9] in einen Browser portiert wird. Dann sind wir bereit, uns in den Dokumenten [3] und [4] mit den JavaScript-Frameworks der Browser zu befassen.

Die Skripte in diesem Dokument sind kommentiert und ihre Ausführung in der Konsole wird wiedergegeben. Manchmal werden zusätzliche Erläuterungen gegeben. Das Dokument erfordert aktives Lesen: Um ein Skript zu verstehen, muss man sowohl den Code als auch die Kommentare und die Ausführungsergebnisse lesen.

Die Beispiele des Dokuments sind |HIER| verfügbar.

Die Serveranwendung PHP 7 kann |hier| getestet werden.

Serge Tahé, Oktober 2019