ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-01 09:40:35 +02:00
parent f642829cb1
commit 2dbadb9c4f
11 changed files with 222 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
02_advanced/agenda.md
View File

@@ -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

14
02_advanced/uebungen/#u02_distance/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -24,6 +24,18 @@
</main>
<script>
'use strict';
const distance = ({ x: xOrigin, y: yOrigin }, { x: xDest, y: yDest }) => {
return Math.sqrt((yDest - yOrigin) ** 2 + (xDest - xOrigin) ** 2);
};
// RECOMMENDED without destructuring
const getDistance = (origin, dest) => {
return Math.sqrt((dest.y - origin.y) ** 2 + (dest.x - origin.x) ** 2);
};
console.log('Die Distanz beträgt: ', distance({ x: 1, y: 1 }, { x: 5, y: 1 }));
console.log('Die Distanz beträgt: ', getDistance({ x: 1, y: 1 }, { x: 5, y: 1 }));
</script>
</body>
</html>

13
02_advanced/uebungen/#u07_string-rekursiv/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -18,7 +18,16 @@
<script>
'use strict';
const reverseString = (str) => {};
const reverseString = (str) => {
if (str.length <= 1) {
return '';
}
// console.log('str.slice(1): ', str.slice(1));
// iwie kapier ich das mit den rückgabewarten von rekursiven funktionen noch net wirklich
return reverseString(str.slice(1)) + str[0];
// return ... <-- ("lo") + "l" <--- ("llo") + "e" <-- ("ello") + "h"
};
// Test cases
console.log(reverseString('hello')); // => "olleh"

11
02_advanced/uebungen/#u01_transform-name/index.html → 02_advanced/uebungen/u01_transform-name/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -24,12 +24,15 @@
<script>
'use strict';
let logTransformedName = (firstName, lastName) => {
let logTransformedName = ({ firstName, lastName }) => {
console.log(`${lastName}, ${firstName.charAt(0)}.`);
};
logTransformedName('Ladislaus', 'Jones');
// TODO: Übergabe von einem Objekt
const trainer = { lastName: 'Torrel', firstName: 'Philippe' };
logTransformedName({ firstName: 'Ladislaus', lastName: 'Jones' });
logTransformedName(trainer);
logTransformedName({ lastName: 'Rohleder', firstName: 'Andreas', isSmoker: true });
</script>
</body>
</html>

12
02_advanced/unterricht/tag12/01_csv-to-obj.html
View File

@@ -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];

1
02_advanced/unterricht/tag12/02_destructuring.html
View File

@@ -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) {

2
02_advanced/unterricht/tag12/04_destructuring-with-rest-operator.html
View File

@@ -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)

1
02_advanced/unterricht/tag12/05_destructuring-in-paramerterliste.html
View File

@@ -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 = {}) => {

41
02_advanced/unterricht/tag12/10_rekursion-fibonacci.html
View File

@@ -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);
</script>
</body>
</html>

126
02_advanced/unterricht/tag12/10_rekursion-fibonacci.md Normal file
View File

@@ -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
```

17
02_advanced/unterricht/tag12/11_rekursion-sum-ohne-reduce.html
View File

@@ -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');
</script>
</body>
</html>