diff --git a/02_advanced/agenda.md b/02_advanced/agenda.md index 6a83181..fd6671c 100644 --- a/02_advanced/agenda.md +++ b/02_advanced/agenda.md @@ -188,12 +188,10 @@ Abschlussquiz - JS Grundlagen - Destructuring von Objekten und Arrays - Rekursion -- Promises -- Callback-Hell **Übungen:** -Übung 01 - 08 +Übung 01 - 10 --- @@ -201,8 +199,9 @@ Abschlussquiz - JS Grundlagen **Inhalt:** +- Promises +- Callback-Hell - Installation von node (npm) und Windows Terminal (für Node) -- **Exkurs: Switch Case Abfragen** - **Exkurs: Statische Webseite mit Sass und HTML** - **Exkurs: Versionierung mit Github Part I** @@ -234,6 +233,7 @@ Abschlussquiz - JS Grundlagen - commonjs vs esm - async await - Promise.all() +- **Exkurs: Switch Case Abfragen** - **Exkurs: Statische Webseite mit Sass und HTML** - **Exkurs: Versionierung mit Github Part I** - 1:1 Meeting diff --git a/02_advanced/uebungen/#u02_distance/index.html b/02_advanced/uebungen/#u02_distance/index.html index 6d8656b..0e9bad2 100644 --- a/02_advanced/uebungen/#u02_distance/index.html +++ b/02_advanced/uebungen/#u02_distance/index.html @@ -1,4 +1,4 @@ - + @@ -24,6 +24,18 @@ diff --git a/02_advanced/uebungen/#u07_string-rekursiv/index.html b/02_advanced/uebungen/#u07_string-rekursiv/index.html index 18d2ac1..9690a36 100644 --- a/02_advanced/uebungen/#u07_string-rekursiv/index.html +++ b/02_advanced/uebungen/#u07_string-rekursiv/index.html @@ -1,4 +1,4 @@ - + @@ -18,7 +18,16 @@ diff --git a/02_advanced/unterricht/tag12/01_csv-to-obj.html b/02_advanced/unterricht/tag12/01_csv-to-obj.html index 2c20df4..75f5e54 100644 --- a/02_advanced/unterricht/tag12/01_csv-to-obj.html +++ b/02_advanced/unterricht/tag12/01_csv-to-obj.html @@ -26,13 +26,17 @@ // Funktionen const convertCsvToObj = (csv = '') => { - const rows = csv - .split('\n') // => ['name, category, price', 'Klingon Letter...'] - .slice(1) // => [' Klingon Letter Opener, Office Warfare, 19.99', ...] + const rows = csv.split('\n'); // => ['name, category, price', 'Klingon Letter...'] + + const headerRow = rows.shift().split(/\s*,\s*/); // Abgespeichert, falls man es noch benötigt + + console.log(headerRow); // => ['name', 'category', 'price'] + + const productRows = rows .map((row) => row.trim()) // "white spaces" des Strings werden entfernt .filter((row) => row !== ''); // leere Einträge werden rausgefiltert - const ar = rows.map((row) => { + const ar = productRows.map((row) => { const fields = row.split(/\s*,\s*/); // => ['Klingon Letter Opener', 'Office Warfare', '19.99', ...] // const name = fields[0]; diff --git a/02_advanced/unterricht/tag12/02_destructuring.html b/02_advanced/unterricht/tag12/02_destructuring.html index 5f0cd12..cc4e68f 100644 --- a/02_advanced/unterricht/tag12/02_destructuring.html +++ b/02_advanced/unterricht/tag12/02_destructuring.html @@ -73,6 +73,7 @@ // Destructuring eines Objektes mit Defaultparametern und Umbenennung const { controls = true, showDots: dots, mode = 'gallery', container: el } = options; + // logic code wird kürzer durch destructuring const slider = el; // options.container if (controls) { diff --git a/02_advanced/unterricht/tag12/04_destructuring-with-rest-operator.html b/02_advanced/unterricht/tag12/04_destructuring-with-rest-operator.html index 63bd3fa..6a61ac9 100644 --- a/02_advanced/unterricht/tag12/04_destructuring-with-rest-operator.html +++ b/02_advanced/unterricht/tag12/04_destructuring-with-rest-operator.html @@ -49,7 +49,7 @@ console.log(user); - const { password, ...newUser } = user; + const { data, password, ...newUser } = user; console.log(newUser); // User Object ohne sensbile Daten (password) diff --git a/02_advanced/unterricht/tag12/05_destructuring-in-paramerterliste.html b/02_advanced/unterricht/tag12/05_destructuring-in-paramerterliste.html index 2a6c8be..ab6d30a 100644 --- a/02_advanced/unterricht/tag12/05_destructuring-in-paramerterliste.html +++ b/02_advanced/unterricht/tag12/05_destructuring-in-paramerterliste.html @@ -16,6 +16,7 @@ 'use strict'; // Destructuring in der Parameterliste mit Defaultwert (Object) + // { DESTRUCTURING IN PARAMETERLISTE } = { NEUES DEFAULT OBJEKT} const foo = ({ a = 1, b = 2 } = { a: 3, b: 4 }) => `a: ${a}, b: ${b}`; const foo2 = (obj = {}) => { diff --git a/02_advanced/unterricht/tag12/10_rekursion-fibonacci.html b/02_advanced/unterricht/tag12/10_rekursion-fibonacci.html index c64c93f..9b906f0 100644 --- a/02_advanced/unterricht/tag12/10_rekursion-fibonacci.html +++ b/02_advanced/unterricht/tag12/10_rekursion-fibonacci.html @@ -29,12 +29,6 @@ return fibonacci(n - 1) + fibonacci(n - 2); }; - // 0 + 1 = 1 - // 1 + 1 = 2 - // 2 + 1 = 3 - // 3 + 2 = 5 - // 3 + 5 = 8 - // Test cases console.log(fibonacci(0)); // => 0 console.log(fibonacci(1)); // => 1 @@ -59,6 +53,41 @@ console.log(drawLine(5, '🤡')); // => '🤡🤡🤡🤡🤡🤡' console.log(drawLine(20, '🐣')); // => '🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣🐣' + + // ========================= + const fibonacciMitLog = (n, ebene = 0) => { + // Erzeugt Leerzeichen für die visuelle Einrückung in der Konsole + const einrückung = ' '.repeat(ebene); + + console.log(`${einrückung}▶️ Rufe fibonacci(${n}) auf`); + + // Base cases + if (n === 0) { + console.log(`${einrückung}↩️ Base Case: fibonacci(0) gibt 0 zurück`); + return 0; + } + + if (n === 1) { + console.log(`${einrückung}↩️ Base Case: fibonacci(1) gibt 1 zurück`); + return 1; + } + + // Rekursive Aufrufe + console.log(`${einrückung}⏳ Berechne links: fibonacci(${n - 1})`); + const links = fibonacciMitLog(n - 1, ebene + 1); + + console.log(`${einrückung}⏳ Berechne rechts: fibonacci(${n - 2})`); + const rechts = fibonacciMitLog(n - 2, ebene + 1); + + const ergebnis = links + rechts; + console.log(`${einrückung}✅ fibonacci(${n}) fertig! ${links} + ${rechts} = ${ergebnis}`); + + return ergebnis; + }; + + // Testlauf + console.log('--- START DER BERECHNUNG ---'); + fibonacciMitLog(4); diff --git a/02_advanced/unterricht/tag12/10_rekursion-fibonacci.md b/02_advanced/unterricht/tag12/10_rekursion-fibonacci.md new file mode 100644 index 0000000..206826a --- /dev/null +++ b/02_advanced/unterricht/tag12/10_rekursion-fibonacci.md @@ -0,0 +1,126 @@ +# Erklärung `fibonacci`-Funktion + +## Wie funktioniert `fibonacci(4)`? + +Bei der Rekursion verzweigt sich die Funktion wie ein Baum, weil in jedem Schritt _zwei_ neue Aufrufe gestartet werden: `fibonacci(n - 1)` und `fibonacci(n - 2)`. JavaScript arbeitet diesen Baum von **oben nach unten** und von **links nach rechts** ab. + +### Der Ablauf Schritt für Schritt + +Hier ist die exakte Reihenfolge, wie JavaScript die Funktionen aufruft und auflöst: + +1. **`fibonacci(4)`** wird aufgerufen. + +- Da $n > 1$, will die Funktion `fibonacci(3) + fibonacci(2)` rechnen. Sie muss aber **zuerst** den linken Teil (`fibonacci(3)`) komplett berechnen. + +2. **`fibonacci(3)`** wird aufgerufen. + +- Will `fibonacci(2) + fibonacci(1)` rechnen. Wartet auf den linken Teil (`fibonacci(2)`). + +3. **`fibonacci(2)`** wird aufgerufen. + +- Will `fibonacci(1) + fibonacci(0)` rechnen. Wartet auf links (`fibonacci(1)`). + +4. **`fibonacci(1)`** wird aufgerufen. + +- **Base Case greift!** Gibt **`1`** zurück. + +5. Zurück bei `fibonacci(2)`: Der linke Teil ist bereit (`1`). Jetzt wird der rechte Teil (`fibonacci(0)`) aufgerufen. +6. **`fibonacci(0)`** wird aufgerufen. + +- **Base Case greift!** Gibt **`0`** zurück. + +7. **`fibonacci(2)` wird aufgelöst:** Rechnet `1 + 0` und gibt **`1`** zurück an `fibonacci(3)`. +8. Zurück bei `fibonacci(3)`: Der linke Teil ist bereit (`1`). Jetzt wird der rechte Teil (`fibonacci(1)`) aufgerufen. +9. **`fibonacci(1)`** wird aufgerufen. + +- **Base Case greift!** Gibt **`1`** zurück. + +10. **`fibonacci(3)` wird aufgelöst:** Rechnet `1 + 1` (Ergebnis aus Schritt 7 + Schritt 9) und gibt **`2`** zurück an `fibonacci(4)`. +11. Zurück bei `fibonacci(4)`: Der linke Teil (`fibonacci(3)`) ist endlich fertig und hat den Wert `2`. Jetzt wird der komplette rechte Ast (**`fibonacci(2)`**) berechnet. +12. **`fibonacci(2)`** wird aufgerufen (für die rechte Seite von `fibonacci(4)`). + +- Ruft intern wieder `fibonacci(1)` (gibt `1`) und `fibonacci(0)` (gibt `0`) auf. +- Rechnet `1 + 0` und gibt **`1`** zurück. + +13. **`fibonacci(4)` wird final aufgelöst:** \* Rechnet das Ergebnis von links (`2`) + das Ergebnis von rechts (`1`). + +- **Endergebnis: `3**`. + +--- + +## Die Schritte mit `console.log` sichtbar machen + +Ja, das kann man wunderbar mit `console.log` sichtbar machen! Am besten fügt man eine Einrückung (`indent`) hinzu, die sich mit jeder Ebene vertieft. So sieht man direkt die "Baumstruktur" in der Konsole. + +Hier ist der modifizierte Code: + +```javascript +const fibonacciMitLog = (n, ebene = 0) => { + // Erzeugt Leerzeichen für die visuelle Einrückung in der Konsole + const einrückung = ' '.repeat(ebene); + + console.log(`${einrückung}▶️ Rufe fibonacci(${n}) auf`); + + // Base cases + if (n === 0) { + console.log(`${einrückung}↩️ Base Case: fibonacci(0) gibt 0 zurück`); + return 0; + } + + if (n === 1) { + console.log(`${einrückung}↩️ Base Case: fibonacci(1) gibt 1 zurück`); + return 1; + } + + // Rekursive Aufrufe + console.log(`${einrückung}⏳ Berechne links: fibonacci(${n - 1})`); + const links = fibonacciMitLog(n - 1, ebene + 1); + + console.log(`${einrückung}⏳ Berechne rechts: fibonacci(${n - 2})`); + const rechts = fibonacciMitLog(n - 2, ebene + 1); + + const ergebnis = links + rechts; + console.log(`${einrückung}✅ fibonacci(${n}) fertig! ${links} + ${rechts} = ${ergebnis}`); + + return ergebnis; +}; + +// Testlauf +console.log('--- START DER BERECHNUNG ---'); +fibonacciMitLog(4); +``` + +### Das Ergebnis in der Konsole: + +Wenn du diesen Code ausführst, siehst du exakt, wie JavaScript durch die Ebenen wandert: + +```text +--- START DER BERECHNUNG --- +▶️ Rufe fibonacci(4) auf +⏳ Berechne links: fibonacci(3) + ▶️ Rufe fibonacci(3) auf + ⏳ Berechne links: fibonacci(2) + ▶️ Rufe fibonacci(2) auf + ⏳ Berechne links: fibonacci(1) + ▶️ Rufe fibonacci(1) auf + ↩️ Base Case: fibonacci(1) gibt 1 zurück + ⏳ Berechne rechts: fibonacci(0) + ▶️ Rufe fibonacci(0) auf + ↩️ Base Case: fibonacci(0) gibt 0 zurück + ✅ fibonacci(2) fertig! 1 + 0 = 1 + ⏳ Berechne rechts: fibonacci(1) + ▶️ Rufe fibonacci(1) auf + ↩️ Base Case: fibonacci(1) gibt 1 zurück + ✅ fibonacci(3) fertig! 1 + 1 = 2 +⏳ Berechne rechts: fibonacci(2) + ▶️ Rufe fibonacci(2) auf + ⏳ Berechne links: fibonacci(1) + ▶️ Rufe fibonacci(1) auf + ↩️ Base Case: fibonacci(1) gibt 1 zurück + ⏳ Berechne rechts: fibonacci(0) + ▶️ Rufe fibonacci(0) auf + ↩️ Base Case: fibonacci(0) gibt 0 zurück + ✅ fibonacci(2) fertig! 1 + 0 = 1 +✅ fibonacci(4) fertig! 2 + 1 = 3 + +``` diff --git a/02_advanced/unterricht/tag12/11_rekursion-sum-ohne-reduce.html b/02_advanced/unterricht/tag12/11_rekursion-sum-ohne-reduce.html index b45542f..7dae036 100644 --- a/02_advanced/unterricht/tag12/11_rekursion-sum-ohne-reduce.html +++ b/02_advanced/unterricht/tag12/11_rekursion-sum-ohne-reduce.html @@ -29,9 +29,17 @@ }; const sumArrayWhile = (arr) => { - // TODO: while - }; + let i = arr.length; + let sum = 0; + if (i === 0) { + return 0; + } + while (--i > -1) { + sum += arr[i]; + } + return sum; + }; // Test cases console.time('rekursion'); console.log(sumArray([1, 2, 3, 4, 5])); // => 15 @@ -41,6 +49,11 @@ console.time('reduce'); console.log(sumArrayReduce([1, 2, 3, 4, 5])); // => 15 console.timeEnd('reduce'); + + // Test cases + console.time('while'); + console.log(sumArrayWhile([1, 2, 3, 4, 5])); // => 15 + console.timeEnd('while');