This commit is contained in:
Philippe Torrel
2026-09-22 14:45:24 +02:00
parent 1f2db53534
commit 04831eb9c1
14 changed files with 568 additions and 0 deletions
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 1: Vorname vor Nachname oder Nachname vor Vorname?</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">
<div class="alert alert-primary">
<h2>Übung 1: Vorname vor Nachname oder Nachname vor Vorname?</h2>
<p>
Wenn dich der Name der Übung beim Lesen genauso verwirrt wie uns beim Schreiben, dann liegt das daran, dass
die Reihenfolge von Vor- und Nachnamen nicht immer eindeutig ist. Manchmal heißt es
<strong>Max Mustermann</strong> und manchmal auch <strong>Mustermann, Max</strong>. Damit Benutzer der
Funktion logTransformedName (aus der Übung Der transformierte Ladislaus, Teil 2 der letzten Class) nicht
auch so verwirrt sind, stelle sie besser auf <code>named parameters</code> um.
</p>
</div>
</div>
</main>
<script>
'use strict';
let logTransformedName = (firstName, lastName) => {
console.log(`${lastName}, ${firstName.charAt(0)}.`);
};
logTransformedName('Ladislaus', 'Jones');
// TODO: Übergabe von einem Objekt
</script>
</body>
</html>
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 2: Ist es noch weit? Sind wir schon da?</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">
<div class="alert alert-primary">
<h2>Übung 2: Ist es noch weit? Sind wir schon da?</h2>
<p>Die Formel zur Berechnung von Entfernungen lautet:</p>
<code>
<pre>Math.sqrt((yDestination - yOrigin) ** 2 + (xDestination - xOrigin) ** 2);</pre>
</code>
<p>Schreibe eine Funktion distance, die du z. B. folgendermaßen aufrufen kannst:</p>
<code>
<pre>distance({ x: 1, y: 1 }, { x: 5, y: 1 }); // => 4</pre>
</code>
</div>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>
@@ -0,0 +1,49 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 3: Profilcard mit destructuring</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">
<div class="alert alert-primary">
<h2>Übung 3: Profilcard mit destructuring</h2>
<p>
Erstelle eine Funktion namens <code>createProfileCard</code>, die die Informationen einer Person
entgegennimmt und daraus eine Bootstrap Card im HTML-Format generiert. Nutze dabei die generatePersonData
Funktion, um die Personendaten zu formatieren. Die Funktion soll so angepasst werden, dass sie Destructuring
für die übergebenen Parameter verwendet.
</p>
</div>
<div class="alert alert-secondary my-3">
<!-- template: Beispiel card -->
<div class="card" style="width: 18rem">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, obcaecati.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Hobby 1</li>
<li class="list-group-item">Hobby 2</li>
<li class="list-group-item">Hobby 3</li>
</ul>
</div>
<!-- ▲ /card ▲ -->
</div>
</div>
</main>
<script>
'use strict';
const person1 = { firstName: 'John', lastName: 'Wick', age: 51, hobbies: ['guns', 'dogs', 'cars'] };
const person2 = { firstName: 'Jane', lastName: 'Doe', age: 23 };
const person3 = { firstName: 'Joe', lastName: 'Doe' };
// your code
</script>
</body>
</html>
@@ -0,0 +1,77 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 4: Button Countdown mit Settings</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">
<div class="alert alert-primary">
<h2>Übung 4: Button Countdown mit Settings <span class="badge text-bg-warning">Optional</span></h2>
<p>
Entwickle einen funktionalen Button, der nach einem Klick einen Countdown in der Schaltfläche anzeigt und
nach Ablauf des Countdowns automatisch wieder aktiviert wird.
</p>
<h4>Szenario</h4>
<p>
Du arbeitest als Frontend-Entwickler für ein Unternehmen, das Online-Formulare für Messeaufträge anbietet.
Um sicherzustellen, dass Benutzer die Formulare nicht versehentlich oder mehrfach absenden, soll ein Button
implementiert werden, der nach dem Absenden für eine bestimmte Zeit (z.B. 5 Sekunden) deaktiviert wird.
Während dieser Zeit soll ein Countdown in der Schaltfläche angezeigt werden, der die verbleibende Zeit bis
zur Reaktivierung des Buttons anzeigt.
</p>
<h4>Aufgaben</h4>
<ol>
<li>
<strong>HTML-Struktur</strong>: Erstelle einen einfachen HTML-Button mit einer Klasse (z.B. button-send).
</li>
<li>
<strong>JavaScript-Funktionalität</strong>:
<ul>
<li>Implementiere einen Event-Listener für den Klick auf den Button.</li>
<li>Erstelle eine Countdown-Funktion, die beim Klicken auf den Button gestartet wird.</li>
<li>
Während des Countdowns soll der Button deaktiviert und der aktuelle Countdown-Wert in der Schaltfläche
angezeigt werden.
</li>
<li>
Nach Ablauf des Countdowns soll der Button wieder aktiviert und der ursprüngliche Text in der
Schaltfläche wiederhergestellt werden.
</li>
</ul>
</li>
<li>
<strong>Countdown-Anzeige</strong>: Der Countdown soll in der Schaltfläche des Buttons angezeigt werden.
Das Format der Anzeige (z.B. "5...", "4...", "3...") kannst du selbst wählen.
</li>
<li>
<strong>Deaktivierung</strong>: Stelle sicher, dass der Button während des Countdowns deaktiviert ist, um
Mehrfachklicks zu verhindern.
</li>
<li>
<strong>Reaktivierung</strong>: Sobald der Countdown abgelaufen ist, soll der Button automatisch wieder
aktiviert werden.
</li>
<li>
<strong>Countdown-Wert konfigurierbar machen</strong>: Ermögliche es, den Countdown-Wert (z.B. 5 Sekunden)
über ein Settings-Objekt einzustellen. aktiviert werden.
</li>
</ol>
<p><strong>Viel Erfolg bei der Umsetzung!</strong></p>
</div>
<button class="btn btn-dark button-send">Click</button>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 5: Summe einer Zahlenreihe rekursiv berechnen</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">
<div class="alert alert-primary">
<h2>Übung 5: Summe einer Zahlenreihe rekursiv berechnen</h2>
<p>
Schreibe eine rekursive Funktion in JavaScript, die die Summe aller Zahlen von <code>n</code> bis
<code>1</code> berechnet.
</p>
<h4>Hinweise</h4>
<ul>
<li>Definiere einen Basisfall, der die Rekursion beendet.</li>
<li>Der rekursive Fall sollte das Problem in ein kleineres Teilproblem zerlegen.</li>
</ul>
<p><strong>Viel Erfolg bei der Umsetzung!</strong></p>
</div>
</div>
</main>
<script>
'use strict';
const sumRecursive = (n) => {};
// Test Cases
console.log(sumRecursive(5)); // => 15 (5 + 4 + 3 + 2 + 1)
console.log(sumRecursive(10)); // => 55 (10 + 9 + 8 + 7 + 6 + 5 + 4 + 3 + 2 + 1)
console.log(sumRecursive(0)); // => 0
</script>
</body>
</html>
@@ -0,0 +1,55 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Optionale Übung 6: Berechnung von Kombinationen mit Rekursion</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">
<div class="alert alert-warning">
<h2>
Optionale Übung 6: Berechnung von Kombinationen mit Rekursion
<span class="badge text-bg-warning">Optional</span>
</h2>
<p>
Implementiere eine rekursive Funktion in JavaScript, die die Anzahl der Kombinationen berechnet, in denen
man <code>k</code> Elemente aus einer Menge von <code>n</code> Elementen auswählen kann (also den
Binomialkoeffizienten).
</p>
<h4>Hinweise</h4>
<ul>
<li>
Die Formel für Kombinationen lautet:<br /><img
src="https://trainers.atp.wpicert.org/system/wpi_curriculum/file/images/files/000/016/028/302-59/79ca8a079d2c6c737780cd08584c343e.png?1755753490"
class="img-thumbnail"
alt="" />
</li>
<li>
Definiere geeignete Basisfälle, zum Beispiel wenn <code>k</code> gleich <code>0</code> oder
<code>n</code> ist.
</li>
</ul>
</div>
</div>
</main>
<script>
'use strict';
const combinations = (n, k) => {
// combinations(n - 1, k - 1) + combinations(n - 1, k);
};
// Test Cases
console.log(combinations(5, 2)); // => 10
console.log(combinations(6, 3)); // => 20
console.log(combinations(4, 0)); // => 1
console.log(combinations(4, 4)); // => 1
console.log(combinations(5, 6)); // => 0
</script>
</body>
</html>
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 7: Rekursive Umkehrung eines Strings</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">
<div class="alert alert-primary">
<h2>Übung 7: Rekursive Umkehrung eines Strings</h2>
<p>Schreibe eine rekursive Funktion in JavaScript, die einen gegebenen String umkehrt.</p>
</div>
</div>
</main>
<script>
'use strict';
const reverseString = (str) => {};
// Test cases
console.log(reverseString('hello')); // => "olleh"
console.log(reverseString('Recursion')); // => "noisruceR"
console.log(reverseString('')); // => ""
console.log(reverseString('A')); // => "A"
</script>
</body>
</html>
@@ -0,0 +1,34 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 8: Rekursive Suche des Maximums in einem Array</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">
<div class="alert alert-primary">
<h2>
Übung 8: Rekursive Suche des Maximums in einem Array <span class="badge text-bg-warning">Optional</span>
</h2>
<p>
Schreibe eine rekursive Funktion in JavaScript, die das größte Element in einem Array von Zahlen findet.
</p>
</div>
</div>
</main>
<script>
'use strict';
const findMax = (arr) => {};
// Test cases
console.log(findMax([1, 5, 3, 9, 2])); // => 9
console.log(findMax([-10, -20, -3, -4])); // => -3
console.log(findMax([42])); // => 42
console.log(findMax([])); // => null
</script>
</body>
</html>
@@ -0,0 +1,40 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 9: Tiefste Ebene eines verschachtelten Arrays finden</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">
<div class="alert alert-warning">
<h2>Übung 9 (advanced): Tiefste Ebene eines verschachtelten Arrays finden</h2>
<p>
Schreibe eine rekursive Funktion in JavaScript, die die tiefste Ebene eines verschachtelten Arrays bestimmt.
Die Funktion soll die maximale Verschachtelungstiefe des Arrays zurückgeben.
</p>
</div>
</div>
</main>
<script>
'use strict';
const findDeepestLevel = (arr, currentLevel = 1) => {};
// Test cases
console.log(findDeepestLevel([1, [2, [3, [4]], 5]])); // => 4
console.log(findDeepestLevel([1, 2, 3, 4, 5])); // => 1
console.log(findDeepestLevel([])); // => 1
console.log(findDeepestLevel([1, [2], [3, [4, [5]]]])); // => 4
console.log(
findDeepestLevel([
1, //
[2, [3]],
[4, [5, [6]]],
]),
); // => 4
</script>
</body>
</html>
@@ -0,0 +1,37 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 10: Summe aller Zahlen in einem verschachtelten Array</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">
<div class="alert alert-primary">
<h2>
Übung 10: Summe aller Zahlen in einem verschachtelten Array
<span class="badge text-bg-warning">Optional</span>
</h2>
<p>
Schreibe eine rekursive Funktion in JavaScript, die die Summe aller Zahlen in einem verschachtelten Array
berechnet. Das Array kann beliebig tief verschachtelt sein und enthält nur Zahlen oder weitere Arrays.
</p>
</div>
</div>
</main>
<script>
'use strict';
const sumNestedArray = (arr) => {};
// Test cases
console.log(sumNestedArray([1, [2, [3, 4], 5], 6])); // => 21
console.log(sumNestedArray([[[[1]]], 2, [3, [4, [5]]]])); // => 15
console.log(sumNestedArray([])); // => 0
console.log(sumNestedArray([10, [20, [30, [40]]]])); // => 100
console.log(sumNestedArray([1, 'a', [2, 'b', [3, 4]], 5])); // => 15 (ignoriert Nicht-Zahlen)
</script>
</body>
</html>
Binary file not shown.
@@ -0,0 +1,40 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rekursion Beispiel: Fakultät errechnen</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>Rekursion Beispiel: Fakultät errechnen</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const calcFactorial = (n) => {
// Base case: if n is 0, return 1
if (n === 0) {
return 1;
}
// Recursive case: n * factorial of (n - 1)
return n * calcFactorial(n - 1); // 5 * (calcFactorial(4)) -> 4 * (calcFactorial(4 - 1)) -> 3 * (calcFactorial(3 - 1)) -> 2 * (calcFactorial(2 - 1)) -> 1 * (calcFactorial(1 - 1)) -> 1
};
// TODO: Fakultät mit while Schleife
const calcFactorialWithWhile = () => {};
// Test cases
console.log(calcFactorial(5)); // => 120
console.log(calcFactorial(3)); // => 6
console.log(calcFactorial(0)); // => 1
outputEl.textContent = `${calcFactorial(5)}, ${calcFactorial(3)}, ${calcFactorial(0)} `;
</script>
</body>
</html>
@@ -0,0 +1,43 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rekursion Beispiel: Fibonacci-Reihenfolge errechnen</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>Rekursion Beispiel: Fibonacci-Reihenfolge errechnen</h1>
</div>
</main>
<script>
'use strict';
const calcFibonacci = (n) => {
// Base cases
if (n === 0) {
return 0;
}
if (n === 1) {
return 1;
}
// Recursive case
return calcFibonacci(n - 1) + calcFibonacci(n - 2);
};
// Test cases
console.log(calcFibonacci(0)); // => 0
console.log(calcFibonacci(1)); // => 1
console.log(calcFibonacci(2)); // => 1
console.log(calcFibonacci(3)); // => 2
console.log(calcFibonacci(4)); // => 3
console.log(calcFibonacci(5)); // => 5
console.log(calcFibonacci(6)); // => 8
console.log(calcFibonacci(100)); // => 55
</script>
</body>
</html>
@@ -0,0 +1,60 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rekursion Beispiel: Summe eines Array errechnen</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>Rekursion Beispiel: Summe eines Array errechnen</h1>
</div>
</main>
<script>
'use strict';
const sumArray = (ar = []) => {
// Base case: wenn Array leer ist, return 0
if (ar.length === 0) {
return 0;
}
return ar[0] + sumArray(ar.slice(1));
// => 1 + (fn([2,3,4,5])) -> 2 + (fn([3,4,5])) -> 3 + (fn([4,5])) -> 4 + (fn([5])) + 5 (fn([])) + 0
};
const sumArrayReduce = (ar = []) => {
return ar.reduce((a, b) => a + b, 0);
};
const sumArrayWhile = (ar = []) => {
let i = ar.length;
let sum = 0;
if (i === 0) {
return 0;
}
while (--i >= 0) {
sum += ar[i];
}
return sum;
};
// Test Cases:
// https://jsben.ch/
console.time('rekursion');
console.log(sumArray([1, 2, 3, 4, 5])); // => 15
console.timeEnd('rekursion');
console.time('reduce');
console.log(sumArrayReduce([1, 2, 3, 4, 5])); // => 15
console.timeEnd('reduce');
console.time('while');
console.log(sumArrayWhile([1, 2, 3, 4, 5])); // => 15
console.timeEnd('while');
</script>
</body>
</html>