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-06-26 15:33:18 +02:00
parent 8b439649b5
commit ee8a87bf2a
4 changed files with 192 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
01_grundlagen/uebungen/#u46_richtige-gewinner.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 46: Richtige Gewinner</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">
<h1>Übung 46: Richtige Gewinner</h1>
<p>
Die Ausgabe der Gewinner aus dem letzten Beispiel (Codebeispiel 324) ist immer noch nicht ideal. Am Besten
wäre das folgende Ergebnis-Array:
</p>
<pre>
<code>
[
'1st place: Heribert',
'2nd place: Friedlinde',
'3rd place: Tusnelda',
'Oswine',
'Ladislaus',
]
</code>
</pre>
</div>
<div class="output alert alert-secondary"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const winners = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
// Beispiel
const getWinners = (winners) => {};
console.log(getWinners(winners));
outputEl.innerHTML = `<ul><li>${getWinners(winners).join('</li><li>')}</li></ul>`;
</script>
</body>
</html>

79
01_grundlagen/uebungen/#u47_higher-order-fn-lueckentext.html Normal file
View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 47: Lückentext zu Higher-Order-Funktionen</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>Übung 47: Lückentext zu Higher-Order-Funktionen</h1>
<p>
Das ist garantiert der letzte Lückentext für diese Lektion. Ersetzen Sie wieder die Kommentare
<strong>/* ??? */</strong> durch den richtigen Code, um das angegebene Ergebnis zu erzielen.
</p>
</div>
</main>
<script>
'use strict';
let result;
let results;
let inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let text = 'Hi this is a short text';
let names = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
//odd numbers
//results = inputs
console.log(results); // => [ 1, 3, 5, 7, 9 ]
//sum
//result = inputs
console.log(result); // => 55
//product
//result = inputs
console.log(result); // => 3628800
//longest word length
result = text.split(' '); //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
//
console.log(result); // => 5
//longest word
result = text.split(' '); //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
//
console.log(result); // =>'short'
//avg word length =========================
// result =
console.log(result); // => 3
//sort by 3rd letter
// ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
const names2 = [...names];
// results =
console.log(results); // => [ 'Ladislaus', 'Friedlinde', 'Heribert', 'Tusnelda', 'Oswine' ]
// Are there names with more than 8 letters?
// ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
// result = names
// Has every name at least 8 letters?
// result = names
console.log(result); // false
// What is the lowest value from the inputs?
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// result = inputs
console.log(result);
</script>
</body>
</html>

66
01_grundlagen/uebungen/#u48_froehliches-mixen.html Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 48: Fröhliches Mixen mit Arrays</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>Übung 48: Fröhliches Mixen mit Arrays</h1>
<img
src="https://de.webmasters-europe.org/system/course_management/file/images/files/000/020/558/800-533/241aa384e6005cdebbd01c4ba4e4fa69.jpg?1644493807"
class="img-thumbnail my-3"
width="400"
alt="Cocktail Party" />
<p>
Nach so viel trockener Theorie hast du Durst. Du öffnest deinen Kühlschrank und siehst eine angebrochene
Packung Maracujasaft, die dringend verbraucht werden muss. Mit Maracujasaft lassen sich tatsächlich tolle
Cocktails zaubern, und gerade letztens hat dir ein Freund den Honolulu Flip empfohlen. Jetzt wäre es perfekt,
wenn in dem besagten Cocktail Maracujasaft enthalten wäre …
</p>
</div>
</main>
<script>
'use strict';
const honoluluFlip = ['Maracuja Juice', 'Pineapple Juice', 'Lemon Juice', 'Grapefruit Juice', 'Crushed Ice'];
const ingredientsFromMyBar = [
'Pineapple',
'Maracuja Juice',
'Cream',
'Lemon Juice',
'Grapefruit Juice',
'Crushed Ice',
'Milk',
'Apple Juice',
'Aperol',
'Pineapple Juice',
'Limes',
'Lemons',
];
// Funktionen
// 1. Schreibe eine Funktion, `hasIngredient`, die `true` zurückgibt, wenn eine angegebene Zutat in einer Rezeptliste vorhanden ist. Rufe deine Funktion mit Maracujsasaft und Honolulu Flip auf.
const hasIngredient = (listOfIngredients, searchedIngredient) => {
/* ??? */
};
// 2. So richtig sinnvoll ist unsere Funktion noch nicht. Viel hilfreicher wäre es, wenn wir eine Funktion hätten, die anhand unserer vorhandenen Zutaten herausfindet, ob wir den Cocktail auch tatsächlich machen können. Dafür benötigst du die komplette Liste aller bei dir vorhandenen Zutaten (ingredientsFromMyBar). Du möchtest wissen, ob du alle Zutaten vorrätig hast, die du zum Mixen des Cocktails benötigst.
const isMixableWith = (cocktailRecipe, availableIngredients) => {
/* ??? */
};
//honoluluFlip isMixableWith ingredientsFromMyBar?
console.log(isMixableWith(honoluluFlip, ingredientsFromMyBar)); // => true
</script>
</body>
</html>

BIN
01_grundlagen/uebungen/uebungen-46-48.zip Normal file
View File

Binary file not shown.