public/web-development/presentation.git

			@@ -959,9 +959,19 @@
			<div><span class="fragment">Operator, </span><span class="fragment">Aufruf (Call), </span><span class="fragment">Ausdruck (Expression), </span><span class="fragment">Parameter, </span><span class="fragment">Argument, </span><span class="fragment">Literal, </span></div><div><span class="fragment">Zuweisung (Assignment), </span><span class="fragment">Linke Hand (Left hand), Rechte Hand (Right hand)</span></div>
			</section>
			<section>
			<h3>Vorbereiten der Beispiele (bei Bedarf)</h3>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			# im Ordner 'examples/'
			. hooks/post-checkout
			</code>
			</pre>
			</section>
			<section>
			<h3>Ausführung</h3>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			# node [Script-Datei], z.B.
			node index.js
			</code>
			</pre>
			@@ -974,14 +984,7 @@
			</code>
			</pre>
			</section>
			<section>
			<h3>Vorbereiten der Beispiele (bei Bedarf)</h3>
			<pre>
			<code class="js" data-trim data-line-numbers>
			. hooks/post-checkout
			</code>
			</pre>
			</section>

			<section>
			<h3>Variablen</h3>
			<pre>
			@@ -1098,6 +1101,55 @@
			</pre>
			</section>
			<section>
			<h3>Alternation</h3>
			<pre>
			<code class="js" data-trim data-line-numbers>
			if (x == 1) {
			// Code
			}
			else if (x == 2) {
			// alternativer Code
			}
			else {
			// Fallback
			}
			</code>
			</pre>
			</section>
			<section>
			<h3>Schleifen</h3>
			<pre>
			<code class="js" data-trim data-line-numbers>
			for (let i = 0; i < 5; i++) {
			// Code
			}
			</code>
			</pre>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const a = [1, 2, 3];

			for (const element of a) {
			// Code
			}
			</code>
			</pre>
			<pre>
			<code class="js" data-trim data-line-numbers>
			while (i == 1) {
			// Code
			}
			</code>
			</pre>
			<pre>
			<code class="js" data-trim data-line-numbers>
			do {
			// Code
			} while (i == 1)
			</code>
			</pre>
			</section>
			<section>
			<h3>Arrays</h3>
			<pre>
			<code class="js" data-trim data-line-numbers>
			@@ -1147,15 +1199,21 @@
			let o = {};

			o.a = 1;
			o["a"] = 1; // alternativ

			o["$ !"] = 2;
			o["$ !"] = 2; // so sind auch komplexe Schlüssel möglich

			// o."$ !" = 2; => Syntaxfehler
			// o.$ ! = 2; => Syntaxfehler

			o[true] = 3;

			console.log(Object.keys(o));
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			['a', '$ !']
			[ 'a', '$ !', 'true' ]
			</code>
			</pre>
			</section>
			@@ -1202,6 +1260,13 @@
			console.log(subtract(1, 2));
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			3
			[Arguments] { '0': 1, '1': 2 }
			-1
			</code>
			</pre>
			</section>
			<section>
			<h3>Funktionen als Konstruktor</h3>
			@@ -1232,6 +1297,7 @@
			this.b = b;
			}

			// jede Funktion besitzt einen Prototypen
			Rectangle.prototype.getArea = function() {
			return this.a * this.b;
			}
			@@ -1243,6 +1309,15 @@
			console.log(r2.getArea());
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			6
			20
			</code>
			</pre>
			</section>
			<section>
			<img data-src="/assets/images/constructor-and-its-prototype.svg">
			</section>
			<section>
			<div>Dynamische Änderung des Prototypen</div>
			@@ -1264,27 +1339,461 @@
			console.log(r.getArea);
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			undefined
			[Function (anonymous)]
			</code>
			</pre>
			</section>
			<section>
			<h3>Aufgabe</h3>
			Bringe dem Array eine Methode bei, welche die Summe aller enthaltenen Zahlen zurückgibt
			<pre>
			<code class="js" data-trim data-line-numbers>
			const a = [1, 2, 3];

			console.log(a.sum());
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			6
			</code>
			</pre>
			</section>
			<section>
			<h3>Lösung</h3>
			<pre>
			<code class="js" data-trim data-line-numbers>
			Array.prototype.sum = function() {
			let sum = 0;

			for (let number of this) {
			sum += number;
			}

			return sum;
			}
			</code>
			</pre>
			</section>
			<section>
			<h3>Vererbung</h3>
			<pre>
			<code class="js" data-trim data-line-numbers="1-13\|15-18\|20-29">
			// Oberklasse
			function Shape() {
			}

			Shape.prototype.getType = function() {
			return "Shape";
			}

			// Unterklasse
			function Rectangle(a, b) {
			this.a = a;
			this.b = b;
			this.getCircumference = function() {
			return 2 * a + 2 * b;
			};
			}

			Rectangle.prototype.getArea = function() {
			return this.a * this.b;
			// Prototype der Oberklasse in die Unterklasse kopieren
			Rectangle.prototype = Object.create(Shape.prototype);
			// Konstruktor der Oberklasse am Prototypen durch den eigenen ersetzen
			Rectangle.prototype.constructor = Rectangle;

			const r = new Rectangle(2, 3);

			console.log(r.getType());

			// .getType() selber implementieren
			Rectangle.prototype.getType = function() {
			return "Rectangle";
			}

			console.log(r.getType());
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			Shape
			Rectangle
			</code>
			</pre>
			</section>
			<section>
			<img data-src="/assets/images/inheritance-es5.svg">
			</section>
			<section>
			<div>
			<img width="800" height="500" data-src="/assets/images/mdn-prototype.jpg">
			</div>
			<p>
			<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" style="font-size: 16px">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push</a>
			</p>
			</section>
			<section>
			<h3>Objektorientierung in es6</h3>
			<pre>
			<code class="js" data-trim data-line-numbers>
			class Rectangle {
			constructor(a, b) {
			this.a = a;
			this.b = b;
			}

			getArea() {
			return this.a * this.b;
			}
			}

			const r = new Rectangle(2, 3);

			console.log(Object.keys(r));
			console.log(r.getArea());
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			6
			</code>
			</pre>
			</section>
			<section>
			<h3>Vererbung in es6</h3>
			<pre>
			<code class="js" data-trim data-line-numbers="1-6\|8-16\|18-27">
			// Oberklasse
			class Shape {
			getType() {
			return "Shape";
			}
			}

			// Unterklasse erbt von Oberklasse
			class Rectangle extends Shape {
			constructor(a, b) {
			super();

			this.a = a;
			this.b = b;
			}
			}

			const r = new Rectangle(2, 3);

			console.log(r.getType());

			// Implementierung per Prototype weiterhin möglich, falls man so will
			Rectangle.prototype.getType = function() {
			return "Rectangle";
			}

			console.log(r.getType());
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			Shape
			Rectangle
			</code>
			</pre>
			</section>
			<section>
			<h3>Asynchronität</h3>
			<p>Asynchron: Es wird nicht auf die Beendigung des Befehls gewartet, sondern mit dem Programm fortgefahren. Die Vollendung des asynchronen Befehls tritt <i style="font-style: italic">irgendwann</i> in der Zukunft ein.</p>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			setTimeout(callback, time); // Ausführung nach [time] Millisekunden
			setInterval(callback, interval); // Ausführung alle [interval] Millisekunden
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			setTimeout(function() {
			// Code, der nach 2 Sekunden ausgeführt wird
			console.log("zweiter");
			}, 2000);

			console.log("erster");
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			erster
			zweiter
			</code>
			</pre>
			</section>
			<section>
			<p>Aufgabe: Schreibe ein Programm, das zwei weitere beliebige Texte mit jeweils 2 Sekunden Verzögerung von einander ausgibt, d.h.</p>
			<p>"erster" -> 2s -> "zweiter" -> 2s -> "Text A" -> 2s -> "Text B"</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			setTimeout(function() {
			console.log("zweiter");

			// weiterer Code
			}, 2000);

			console.log("erster");
			</code>
			</pre>
			</section>
			<section>
			Lösung: Callback-Hell oder Pyramide des Todes
			<pre>
			<code class="js" data-trim data-line-numbers>
			setTimeout(function() {
			console.log("zweiter");

			setTimeout(function() {
			console.log("Text A");

			setTimeout(function() {
			console.log("Text B");


			}, 2000);
			}, 2000);
			}, 2000);

			console.log("erster");
			</code>
			</pre>
			</section>
			<section>
			Hilfsmittel: Promises
			<pre>
			<code class="js" data-trim data-line-numbers>
			new Promise(function (resolve, reject) {
			// ich bin fertig
			resolve();

			// es ist ein Fehler aufgetreten
			reject();
			});
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const p = new Promise(function (resolve, reject) {...});
			const p2 = new Promise(function (resolve, reject) {...});
			const p3 = new Promise(function (resolve, reject) {...});
			const p4 = new Promise(function (resolve, reject) {...});

			p
			.then(function() { return p2; })
			.then(function() { return p3; })
			.then(function() { return p4; });
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			console.log("erster");

			delay(2000)
			.then(function () {
			console.log("zweiter");

			return delay(2000);
			})
			.then(function() {
			console.log("Text A");

			return delay(2000);
			})
			.then(function() {
			console.log("Text B");
			})
			</code>
			</pre>
			</section>
			<section>
			Aufgabe: Implementiere die Funktion "delay"
			<pre>
			<code class="js" data-trim data-line-numbers>
			const delay = function() {
			// implementieren
			}

			console.log("erster");

			delay(2000)
			.then(function () {
			console.log("zweiter");

			return delay(2000);
			})
			.then(function() {
			console.log("Text A");

			return delay(2000);
			})
			.then(function() {
			console.log("Text B");
			})
			</code>
			</pre>
			</section>
			<section>
			Lösung:
			<pre>
			<code class="js" data-trim data-line-numbers>
			const delay = function(ms) {
			return new Promise(function(resolve, reject) {
			setTimeout(function() {
			resolve();
			}, ms);
			});
			}

			console.log("erster");

			delay(2000)
			.then(function () {
			console.log("zweiter");

			return delay(2000);
			})
			.then(function() {
			console.log("Text A");

			return delay(2000);
			})
			.then(function() {
			console.log("Text B");
			})
			</code>
			</pre>
			</section>
			<section>
			Rückgabewerte mit Promises
			<pre>
			<code class="js" data-trim data-line-numbers>
			const p = new Promise(function(resolve, reject) {
			resolve("ok");
			});

			p.then(function(value) {
			console.log(value);
			});
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			ok
			</code>
			</pre>
			</section>
			<section>
			Fehlerbehandlung mit Promises
			<pre>
			<code class="js" data-trim data-line-numbers>
			const p = new Promise(function(resolve, reject) {
			reject(new Error("Fehler"));
			});

			p
			.then(function() {
			console.log("Ich werde nicht aufgerufen")
			})
			.catch(function(e) {
			console.log(e.message);
			});
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			Fehler
			</code>
			</pre>
			</section>
			<section>
			Datei lesen mit NodeJS
			<pre>
			<code class="js" data-trim data-line-numbers>
			const fs = require("fs");

			fs.readFile("./hello.txt", {encoding: "utf8"}, function(data) {
			console.log(data);
			});
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			Hello World!

			</code>
			</pre>
			</section>
			<section>
			Aufgabe: "Promisifiziere" analog zu "delay" in der letzten Aufgabe den Aufruf von fs.readFile()
			<pre>
			<code class="js" data-trim data-line-numbers>
			const fs = require("fs");

			function readFile() {
			// implementieren
			}

			readFile.then(function(content) {
			console.log(content);
			});
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			Hello World!
			</code>
			</pre>
			</section>
			<section>
			Aufgabe: Nutze die vorherige Lösung nun für eine Promise-Kette, sodass die Inhalte der zwei Dateien "hello.txt" und "hallo.txt" nacheinander ausgegeben werden:
			<pre>
			<code class="bash" data-trim data-line-numbers>
			Hello World!

			Hallo Welt!

			</code>
			</pre>
			</section>
			<section>
			<h3>Async - Await</h3>
			<ul>
			<li>Syntaktischer Zucker für Promises</li>
			<li>Nutzung von <code>await</code> nur im Kontext einer <code>async</code>-Funktion möglich</li>
			</ul>
			<pre>
			<code class="js" data-trim data-line-numbers>
			async function wrapper() {
			const p = new Promise(function(resolve, reject) {
			resolve("Hello from Promise!");
			});

			const result = await p;

			console.log(result);
			}

			wrapper();
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			Hello from Promise!
			</code>
			</pre>
			</section>
			<section>
			Aufgabe: Schreibe die Lösung der vorherigen Aufgabe nach Async - Await um
			</section>
			</section>
			</div>