02_advanced/unterricht/tag13/01_pyramid-of-doom.html

@@ -0,0 +1,92 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>The Pyramid Of The Doom - callback hell - Beispiel</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
+    <style>
+      .box {
+        border-radius: 1rem;
+        background-color: tomato;
+        border: 5px solid #333;
+        width: 60px;
+        height: 60px;
+        color: white;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>The Pyramid Of The Doom - callback hell - Beispiel</h1>
+
+        <!-- .boxes>.box.box-$*4>span{$} -->
+        <div class="boxes">
+          <div class="box box-1"><span>1</span></div>
+          <div class="box box-2"><span>2</span></div>
+          <div class="box box-3"><span>3</span></div>
+          <div class="box box-4"><span>4</span></div>
+        </div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // $('.box-1').animate({ marginLeft: '300px', width: '120px' }, 800, () => {
+      //   $('.box-2').animate({ marginLeft: '300px', width: '120px' }, 800, () => {
+      //     $('.box-3').animate({ marginLeft: '300px', width: '120px' }, 800, () => {
+      //       $('.box-4').animate({ marginLeft: '300px', width: '120px' }, 800, () => {
+      //         $('.boxes').fadeOut(1000, () => {
+      //           console.log('animation finish');
+      //         });
+      //       });
+      //     });
+      //   });
+      // });
+
+      $('.box-1').animate({ marginLeft: '300px', width: '120px' }, 800);
+      $('.box-2').delay(800).animate({ marginLeft: '300px', width: '120px' }, 800);
+      $('.box-3').delay(1600).animate({ marginLeft: '300px', width: '120px' }, 800);
+      $('.box-4').delay(2400).animate({ marginLeft: '300px', width: '120px' }, 800);
+      $('.boxes')
+        .delay(3200)
+        .fadeOut(1000, () => {
+          //console.log('animation finish');
+        });
+
+      // print a phrase, a word at a time:
+      // the pyramid of doom appears
+
+      setTimeout(() => {
+        console.log('The');
+
+        setTimeout(() => {
+          console.log('pyramid');
+
+          setTimeout(() => {
+            console.log('of');
+
+            setTimeout(() => {
+              console.log('doom');
+
+              setTimeout(() => {
+                console.log('keeps');
+
+                setTimeout(() => {
+                  console.log('growing.');
+                }, 1000);
+              }, 1000);
+            }, 1000);
+          }, 1000);
+        }, 1000);
+      }, 1000);
+    </script>
+  </body>
+</html>

02_advanced/unterricht/tag13/02_promise-aufbau.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Promise Object - Syntax</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Promise Object - Syntax</h1>
+        <p>
+          Das
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>
+          Objekt stellt eine Repräsentation einer eventuellen Ausführung (oder eines Fehlschlags) einer
+          <strong>asynchronen</strong>
+          Operation und den daraus resultierenden Ergebnissen dar.
+        </p>
+        <img
+          src="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/promises.png"
+          alt=""
+          class="img-thumbnail" />
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const promise = new Promise((resolve, reject) => {
+        // async operation (hier simuliert)
+        const ergebnis = 21 * 2;
+        if (ergebnis !== 42) {
+          // console.log(`Error: ${ergebnis} is NOT correct` );
+          reject(`Error: ${ergebnis} is NOT correct`);
+        }
+
+        // console.log(`${ergebnis} is correct`);
+        resolve(`${ergebnis} is correct`);
+      });
+
+      promise.then(
+        (result) => console.log(result),
+        (error) => {
+          console.log(error);
+        },
+      );
+
+      // Empfohlene Schreibweise - then nur für "Erfolg" (resolve) - catch für "Fehler" (reject)
+      promise
+        .then((result) => console.log('OK:', result))
+        .catch((error) => {
+          console.log('KO:', error);
+        })
+        .finally(() => {
+          console.log('finished');
+        });
+    </script>
+  </body>
+</html>

02_advanced/unterricht/tag13/03_node-hello.js

@@ -0,0 +1 @@
+console.log('Hello World!');

02_advanced/unterricht/tag13/04_node-fs-promise.js

@@ -0,0 +1,25 @@
+const fs = require('fs'); // Modul au der Standardlibrary von Node
+// require - commonjs Schreibweise
+
+const getFile = (path = '') => {
+  return new Promise((resolve, reject) => {
+    // asynchrones auslesen einer Datei
+    fs.readFile(path, 'utf-8', (error, data) => {
+      if (error) {
+        // console.error(error);
+        reject(error);
+      }
+
+      // console.log(data);
+      resolve(data);
+    });
+  });
+};
+
+console.log('weiter im code....');
+// more logic...
+
+// Funktionsaufruf einer Funktion, die asynchrone Prozesse beinhaltet
+getFile('02_promise-aufbau.html')
+  .then((data) => console.log(data))
+  .catch((err) => console.error(err));