public/web-development/presentation.git

			@@ -1317,6 +1317,9 @@
			</pre>
			</section>
			<section>
			<img data-src="/assets/images/constructor-and-its-prototype.svg">
			</section>
			<section>
			<div>Dynamische Änderung des Prototypen</div>
			<pre>
			<code class="js" data-trim data-line-numbers>
			@@ -1360,9 +1363,26 @@
			</pre>
			</section>
			<section>
			<h3>Vererbung</h3>
			<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() {
			}

			@@ -1370,18 +1390,22 @@
			return "Shape";
			}

			// Unterklasse
			function Rectangle(a, b) {
			this.a = a;
			this.b = 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";
			}
			@@ -1399,6 +1423,969 @@
			<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(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(error, 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("./hello.txt").then(function(content) {
			console.log(content);
			});
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			Hello World!
			</code>
			</pre>
			</section>
			<section>
			Lösung:
			<pre>
			<code class="js" data-trim data-line-numbers>
			const fs = require("fs");

			function readFile(path) {
			return new Promise(function (resolve, reject) {
			fs.readFile(path, {encoding: "utf8"}, function(error, data) {
			resolve(data);
			});
			});
			}

			readFile("./hello.txt").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>
			Lösung:
			<pre>
			<code class="js" data-trim data-line-numbers>
			const fs = require("fs");

			function readFile(path) {
			return new Promise(function (resolve, reject) {
			fs.readFile(path, {encoding: "utf8"}, function(error, data) {
			resolve(data);
			});
			});
			}

			readFile("./hello.txt")
			.then(function(content) {
			console.log(content);

			return readFile("./hallo.txt");
			})
			.then(function(content) {
			console.log(content);
			});
			</code>
			</pre>
			<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>
			Lösung:
			<pre>
			<code class="js" data-trim data-line-numbers>
			const fs = require("fs");

			function readFile(path) {
			return new Promise(function (resolve, reject) {
			fs.readFile(path, {encoding: "utf8"}, function(error, data) {
			resolve(data);
			});
			});
			}

			async function wrapper() {
			const content1 = await readFile("./hello.txt");
			const content2 = await readFile("./hallo.txt");

			console.log(content1);
			console.log(content2);
			}

			wrapper();
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			Hello World!

			Hallo Welt!
			</code>
			</pre>
			</section>
			<section>
			<h3>Destructuring</h3>
			<p>Auflösen von komplexen Strukturen</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			// Objekt destrukturieren (per Attribut-Namen)
			const { a, b } = { a: 1, b: 2 };

			console.log(a);
			console.log(b);

			// Array destrukturieren (per Position)
			const [ c, d ] = [3, 4];

			console.log(c);
			console.log(d);
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			1
			2
			3
			4
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			// Bei Objekten Elemente umbenennen oder auch auslassen
			const { a: x, b: y } = { a: 1, b: 2, c: 3 };

			console.log(x);
			console.log(y);

			// Bei Arrays Elemente auslassen
			const [ , a, b, , c] = [3, 4, 5, 6, 7, 8];

			console.log(a);
			console.log(b);
			console.log(c);
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			1
			2
			4
			5
			7
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			// Verschachteltes Destructuring
			const {a: [, x, ] } = { a: [0, 1, 2]};

			console.log(x);
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			1
			</code>
			</pre>
			</section>
			<section>
			Aufgabe: x soll die 5 enthalten
			<pre>
			<code class="js" data-trim data-line-numbers>
			const o = { a: [0, {b: [0, 5]}, 2]};

			const { /* Destructuring-Ausdruck */ } = o;

			console.log(x);
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			5
			</code>
			</pre>
			</section>
			<section>
			Lösung:
			<pre>
			<code class="js" data-trim data-line-numbers>
			const o = { a: [0, { b: [0, 5] }, 2]};

			const { a: [, { b: [, x] }]} = o;

			console.log(x);
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			5
			</code>
			</pre>
			</section>
			<section>
			Aufgabe: x soll die 3 enthalten
			<pre>
			<code class="js" data-trim data-line-numbers>
			const o = { a: [0, {b: [0, { c: [{ x: 5 }, { d: 3}] }]}, 2]};

			const { /* Destructuring-Ausdruck */ } = o;

			console.log(x);
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			3
			</code>
			</pre>
			</section>
			<section>
			Lösung:
			<pre>
			<code class="js" data-trim data-line-numbers>
			const o = { a: [0, {b: [0, { c: [{ x: 5 }, { d: 3}] }]}, 2]};

			const { a: [, {b: [, { c: [, { d: x}] }] }] } = o;

			console.log(x);
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			3
			</code>
			</pre>
			</section>
			<section>
			<p>Destructuring zum parallelen Ausführen von mehreren Promises</p>
			<pre>
			<code class="js" data-trim data-line-numbers="1-10\|11-21">
			const fs = require("fs");

			function readFile(path) {
			return new Promise(function (resolve, reject) {
			fs.readFile(path, {encoding: "utf8"}, function(error, data) {
			resolve(data);
			});
			});
			}

			async function wrapper() {
			const [ content1, content2 ] = await Promise.all([
			readFile("./hello.txt"),
			readFile("./hallo.txt")
			]);

			console.log(content1);
			console.log(content2);
			}

			wrapper();
			</code>
			</pre>
			</section>
			<section>
			<h3>Try-Catch-Finally</h3>
			<pre>
			<code class="js" data-trim data-line-numbers>
			function throwError() {
			try {
			throw new Error("Fehler!");
			return "Hello World!";
			}
			catch (e) {
			return e.message;
			}
			finally {
			console.log("Finally wird immer ausgeführt");
			return "Finally!";
			}
			}

			const result = throwError();
			console.log(result);
			</code>
			</pre>
			<pre class="fragment">
			<code class="bash" data-trim data-line-numbers>
			Finally wird immer ausgeführt
			Finally!
			</code>
			</pre>
			</section>
			<section>
			<p>Anwendungsbeispiel für Try-Catch-Finally</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			function readFromDatabase() {
			try {
			db.connect();
			return db.read();
			}
			catch (e) {
			console.log(e.stack);
			return "";
			}
			finally {
			if (db.open) {
			db.close();
			}
			}
			}
			</code>
			</pre>
			</section>
			<section>
			<h3>Scope</h3>
			<pre>
			<code class="js" data-trim data-line-numbers>
			function a() {
			const x = 5;

			return function() {
			return x * x;
			};
			}

			const squareX = a();
			const result = squareX();

			console.log(result);
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			25
			</code>
			</pre>
			</section>
			<section>
			<h3>this</h3>
			<pre>
			<code class="js" data-trim data-line-numbers>
			class MyClass {
			constructor(a) {
			this.a = a;
			}

			getA() {
			return this.a;
			}
			}

			const x = new MyClass(5);
			const y = new MyClass(10);

			console.log(x.getA());
			console.log(y.getA());
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			5
			10
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			global.a = 5;

			function foo() {
			this.a += 10;
			}

			foo();

			console.log(a);
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			15
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			class MyClass {
			/* ... */
			setA() {
			function f() {
			this.a += 100;
			}
			f();
			}
			}

			const x = new MyClass(5);

			x.setA();

			console.log(x.getA());
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			TypeError: Cannot read property 'a' of undefined
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			class MyClass {
			/* ... */
			setA() {
			const me = this;
			function f() {
			me.a += 100;
			}
			f();
			}
			}

			const x = new MyClass(5);

			x.setA();

			console.log(x.getA());
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			105
			</code>
			</pre>
			</section>
			<section>
			<h3>Arrow-Funktionen</h3>
			<ul>
			<li>Kompakte Schreibweise einer normalen Funktion</li>
			<li>Bei Einzeilern ist das <code>return</code> nicht notwendig</li>
			<li>this-Pointer des aktuellen Kontextes wird beibehalten</li>
			</ul>
			<pre>
			<code class="js" data-trim data-line-numbers>
			// Einzeiler
			const f1 = _ => 1;
			const f2 = () => 1;
			const f3 = (x) => x * x;
			const f4 = (x, y) => x + y;

			// Mehrzeiler
			const f5 = (x, y) => {
			return x * y;
			};
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			class MyClass {
			/* ... */
			setA() {
			const f = () => {
			this.a += 100;
			}
			f();
			}
			}

			const x = new MyClass(5);

			x.setA();

			console.log(x.getA());
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			105
			</code>
			</pre>
			</section>
			<section>
			<h3>Generator-Funktionen</h3>
			<pre>
			<code class="js" data-trim data-line-numbers>
			function* generator() {
			let i = 0;

			while(true) {
			yield i;
			i++;
			}
			}

			const g = generator();

			console.log(g.next().value);
			console.log(g.next().value);
			console.log(g.next().value);
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			1
			2
			3
			</code>
			</pre>
			</section>
			<section>
			<h3>Generator-Funktionen</h3>
			<pre>
			<code class="js" data-trim data-line-numbers>
			function* generator() {
			yield 1;
			yield 2;
			yield 3;
			}

			const g = generator();

			for (const i of g) {
			console.log(i);
			}
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			1
			2
			3
			</code>
			</pre>
			</section>
			<section>
			<h3>Nützliche Array-Funktionen</h3>
			</section>
			<section>
			Aufgabe: Schreibe ein Programm, das den Gesamtumsatz aus dem ersten Halbjahr berechnet
			<pre>
			<code class="js" data-trim data-line-numbers>
			const revenues = [
			{month: 0, revenue: 1000},
			{month: 1, revenue: 2000},
			{month: 2, revenue: 3000},
			{month: 3, revenue: 4000},
			{month: 4, revenue: 5000},
			{month: 5, revenue: 6000},
			{month: 6, revenue: 6000},
			{month: 7, revenue: 5000},
			{month: 8, revenue: 4000},
			{month: 9, revenue: 3000},
			{month: 10, revenue: 2000},
			{month: 11, revenue: 1000}
			];

			let totalRevenue = 0;

			/* ... */

			console.log(totalRevenue);
			</code>
			</pre>
			</section>
			<section>
			Lösung
			<pre>
			<code class="js" data-trim data-line-numbers>
			totalRevenue = revenues
			.filter((revenue) => revenue.month < 6)
			.map((revenue) => revenue.amount)
			.reduce((sum, amount) => sum + amount, 0);
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			21000
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

			a.filter((e) => e > 2); // Filterung
			a.map((e) => e * 2); // Umformung
			a.reduce((p, e) => p + e, 0); // Zusammenrechnung / Reduzierung
			a.some((e) => e > 5); // true wenn min. ein Element die Bedingung erfüllt
			a.every((e) => e > 5); // true wenn alle Elemente die Bedingung erfüllen
			</code>
			</pre>
			</section>
			</section>
			</div>
			</div>