From b81e3b9a87b839010329a32715e46c98b5f36153 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Di, 06 Jun 2023 16:09:15 +0200
Subject: [PATCH] add solutions for promises, add destructuring, try-catch-finally and scope

---
 index.html |  336 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 333 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 88584f9..92d3368 100644
--- a/index.html
+++ b/index.html
@@ -1721,7 +1721,7 @@
 							<code class="js" data-trim data-line-numbers>
 								const fs = require("fs");
 								
-								fs.readFile("./hello.txt", {encoding: "utf8"}, function(data) {
+								fs.readFile("./hello.txt", {encoding: "utf8"}, function(error, data) {
 									console.log(data);
 								});
 							</code>
@@ -1729,7 +1729,6 @@
 						<pre>
 							<code class="bash" data-trim data-line-numbers>
 								Hello World!
-								
 							</code>
 						</pre>
 					</section>
@@ -1743,7 +1742,32 @@
 									// implementieren
 								}
 								
-								readFile.then(function(content) {
+								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>
@@ -1762,6 +1786,39 @@
 								
 								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>
@@ -1795,6 +1852,279 @@
 					<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>
 			</div>
 		</div>

--
Gitblit v1.9.3