From 7da8e6fdff5e19bdc27ecd7b996dc1eceb5b3c13 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Di, 06 Jun 2023 18:15:15 +0200
Subject: [PATCH] Merge branch 'draft'
---
index.html | 483 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 483 insertions(+), 0 deletions(-)
diff --git a/index.html b/index.html
index 788f36d..92d3368 100644
--- a/index.html
+++ b/index.html
@@ -1642,6 +1642,489 @@
</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>
</div>
</div>
--
Gitblit v1.9.3