This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user