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

added uebungen 1 - 10

Browse Source
This commit is contained in:
Philippe Torrel
2026-06-30 15:02:55 +02:00
parent 41efb8a5ab
commit f642829cb1
11 changed files with 386 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
02_advanced/uebungen/#u01_transform-name/index.html Normal file
View File

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

29
02_advanced/uebungen/#u02_distance/index.html Normal file
View File

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

27
02_advanced/uebungen/#u03_profile-card/index.html Normal file
View File

@@ -0,0 +1,27 @@
<!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>
</main>
<script>
'use strict';
</script>
</body>
</html>

30
02_advanced/uebungen/#u07_string-rekursiv/index.html Normal file
View File

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

34
02_advanced/uebungen/#u09_level-rekursiv/index.html Normal file
View File

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

77
02_advanced/uebungen/u04_countdown-btn/index.html Normal file
View File

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

39
02_advanced/uebungen/u05_sum-rekursiv/index.html Normal file
View File

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

49
02_advanced/uebungen/u06_binomialkoeffizienten/index.html Normal file
View File

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

32
02_advanced/uebungen/u08_max-rekursiv/index.html Normal file
View File

@@ -0,0 +1,32 @@
<!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</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>

34
02_advanced/uebungen/u10_sum-array-rekursiv/index.html Normal file
View File

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

BIN
02_advanced/uebungen/uebungen_1-10.zip Normal file
View File

Binary file not shown.