new class js -advanced
This commit is contained in:
Philippe Torrel
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
@@ -40,6 +40,24 @@
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const isPalindrom = (toCheckString) => {
|
||||
const reverseString = toCheckString
|
||||
.replace(/[$%!.,]/g, '')
|
||||
.split('')
|
||||
.reverse()
|
||||
.join('');
|
||||
return toCheckString.trim().toLowerCase() === reverseString.trim().toLowerCase() ? true : false;
|
||||
};
|
||||
|
||||
const toTest = ` Lagerregal`;
|
||||
|
||||
const result = isPalindrom(toTest);
|
||||
|
||||
console.log(toTest, result);
|
||||
outputEl.textContent = `${toTest} ist ${result ? 'ein' : 'KEIN'} Palindrom`;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,79 +0,0 @@
|
||||
<!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>
|
||||
100
01_grundlagen/uebungen/u46_richtige-gewinner.html
Normal file
100
01_grundlagen/uebungen/u46_richtige-gewinner.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<!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'];
|
||||
|
||||
// const PlaceWinner = () => {
|
||||
// console.log(winners());
|
||||
// };
|
||||
|
||||
// Beispiel
|
||||
const getWinners = (winners) => {
|
||||
const results = [];
|
||||
const restAr = [];
|
||||
for (let i = 0; i < winners.length; i++) {
|
||||
if (i === 0) {
|
||||
results.push(`1st Place: ${winners[i]}`);
|
||||
} else if (i === 1) {
|
||||
results.push(`2nd Place: ${winners[i]}`);
|
||||
} else if (i === 2) {
|
||||
results.push(`3rd Place: ${winners[i]}`);
|
||||
} else {
|
||||
restAr.push(winners[i]);
|
||||
}
|
||||
}
|
||||
//return [results, restAr];
|
||||
return results.concat(rest);
|
||||
};
|
||||
|
||||
// Beispiel
|
||||
const getWinners2 = (names = []) => {
|
||||
const results = names.map((name, idx) => {
|
||||
if (idx === 0) {
|
||||
return `1st place: ${name}`;
|
||||
}
|
||||
if (idx === 1) {
|
||||
return `2nd place: ${name}`;
|
||||
}
|
||||
if (idx === 2) {
|
||||
return `3rd place: ${name}`;
|
||||
}
|
||||
return name;
|
||||
});
|
||||
return results;
|
||||
};
|
||||
|
||||
const labels = ['1st', '2nd', '3rd'];
|
||||
|
||||
// Beispiel
|
||||
const getWinners3 = (names = []) => {
|
||||
const results = names.map((name, idx) => {
|
||||
// if (idx < 3) {
|
||||
// return `${labels[idx]} place: ${name}`;
|
||||
// } else {
|
||||
// return name;
|
||||
// }
|
||||
|
||||
return idx < labels.length ? `${labels[idx]} place: ${name}` : name;
|
||||
});
|
||||
return results;
|
||||
};
|
||||
|
||||
console.log(getWinners3(winners));
|
||||
outputEl.innerHTML = `<ul><li>${getWinners3(winners).join('</li><li>')}</li></ul>`;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
173
01_grundlagen/uebungen/u47_higher-order-fn-lueckentext.html
Normal file
173
01_grundlagen/uebungen/u47_higher-order-fn-lueckentext.html
Normal file
@@ -0,0 +1,173 @@
|
||||
<!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
|
||||
//let inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
|
||||
results = inputs.filter((n) => n % 2 !== 0);
|
||||
|
||||
const ungeradeZahlen = [];
|
||||
for (let i = 0; i < inputs.length; i++) {
|
||||
if (inputs[i] % 2 !== 0) {
|
||||
ungeradeZahlen.push(inputs[i]);
|
||||
}
|
||||
}
|
||||
console.log(ungeradeZahlen); // => [ 1, 3, 5, 7, 9 ]
|
||||
console.log(results); // => [ 1, 3, 5, 7, 9 ]
|
||||
// ==================================================================
|
||||
|
||||
// sum
|
||||
inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
// a und b wrd addiert (1+2 = 3) speichert in a und ( a + b ( 3 +3 = 6))
|
||||
const sum = inputs.reduce((a, b) => a + b, 0);
|
||||
console.log('sum: ', sum); // => 55
|
||||
|
||||
// ======================================================================
|
||||
//product
|
||||
//result = inputs
|
||||
const gesamtsumme = inputs.reduce((a, b) => a * b, 1);
|
||||
|
||||
console.log(gesamtsumme); // => 3628800
|
||||
// ========================================================================
|
||||
//longest word length
|
||||
// let text = 'Hi this is a short text';
|
||||
const longestWordLength = text.split(' ').reduce((a, b) => {
|
||||
if (a.length > b.length) {
|
||||
return a;
|
||||
} else {
|
||||
return b;
|
||||
}
|
||||
}).length;
|
||||
|
||||
console.log(longestWordLength); //=> 5
|
||||
|
||||
// longest word length
|
||||
results = text.split(' '); //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
|
||||
|
||||
const getWordLength = (word) => {
|
||||
return word.length;
|
||||
};
|
||||
|
||||
const wordLength = results.map(getWordLength); // => [2,4,2,1,5,4]
|
||||
|
||||
result = wordLength.sort((n1, n2) => {
|
||||
return n2 - n1;
|
||||
});
|
||||
|
||||
result = result[0];
|
||||
|
||||
console.log(result); // => 5
|
||||
|
||||
result = text
|
||||
.split(' ') //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
|
||||
.map((a) => a.length) // => [2,4,2,1,5,4]
|
||||
.reduce((a, b) => Math.max(a, b)); // => 5
|
||||
// .reduce((a, b) => (a < b ? b : a)); // => 5
|
||||
|
||||
console.log('Max word length: ', result);
|
||||
|
||||
//longest word length
|
||||
result = text.split(' ').sort((a, b) => b.length - a.length)[0].length;
|
||||
//=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
|
||||
console.log(`Länge des längsten Wortes: ${result}`); // => 5
|
||||
|
||||
// ======================================================
|
||||
//longest word
|
||||
//result = text.split(' '); //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
|
||||
const longestword = text.split(' ').reduce((a, b) => {
|
||||
if (a.length > b.length) return a;
|
||||
else return b;
|
||||
});
|
||||
|
||||
result = text.split(' ').sort((a, b) => b.length - a.length)[0];
|
||||
|
||||
console.log('longestword: ', result); // =>'short'
|
||||
console.log(longestword); // =>'short'
|
||||
// =========================================================
|
||||
//avg word length =========================// => 3
|
||||
|
||||
const avgword = text.split(' ');
|
||||
const AnzahlSum = avgword.length; // 6
|
||||
const AvgSum = AnzahlSum / 2;
|
||||
console.log(AvgSum); // 3
|
||||
|
||||
result =
|
||||
text
|
||||
.split(' ') //=> ['Hi', 'this', 'is', 'a', 'short', 'text'];
|
||||
.map((a) => a.length) // => [2,4,2,1,5,4]
|
||||
.reduce((a, b) => a + b, 0) / text.split(' ').length;
|
||||
|
||||
console.log(`Avg word length: ${result}`); // => 3
|
||||
|
||||
result =
|
||||
text
|
||||
.split(' ')
|
||||
.map((text) => text.length)
|
||||
.reduce((n1, n2) => n1 + n2, 0) / text.split(' ').length;
|
||||
console.log(`Durchschnittliche Wortlänge: ${result}`); // => 3
|
||||
|
||||
result = text.replaceAll(' ', '').length / text.split(' ').length;
|
||||
console.log(`Durchschnittliche Wortlänge: ${result}`); // => 3
|
||||
|
||||
// ============================================================
|
||||
|
||||
//sort by 3rd letter
|
||||
// ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names2 = [...names];
|
||||
const sortedByThirdLetterAr = names2.sort((a, b) => a.charAt(2).localeCompare(b.charAt(2)));
|
||||
|
||||
results = [...names].sort((a, b) => (a.charAt(2) < b.charAt(2) ? -1 : 1));
|
||||
console.log(`sort by 3rd letter: ${results}`); // => [ 'Ladislaus', 'Friedlinde', 'Heribert', 'Tusnelda', 'Oswine' ]
|
||||
|
||||
console.log(sortedByThirdLetterAr); // => [ 'Ladislaus', 'Friedlinde', 'Heribert', 'Tusnelda', 'Oswine' ]
|
||||
// ========================================================================
|
||||
// Are there names with more than 8 letters?
|
||||
// ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
const names3 = [...names];
|
||||
const moreThenEightLetters = names3.filter((name) => name.length > 8);
|
||||
|
||||
result = names.some((name) => name.length > 8);
|
||||
console.log(moreThenEightLetters.length > 0); // => true
|
||||
console.log(result); // => true
|
||||
//===================================================================
|
||||
// Has every name at least 8 letters?
|
||||
result = [...names].every((name) => name.length <= 8);
|
||||
|
||||
console.log('Has every name at least 8 letters?: ', result);
|
||||
//====================================================
|
||||
|
||||
// What is the lowest value from the inputs?
|
||||
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
// result = inputs
|
||||
result = Math.min(...inputs);
|
||||
|
||||
console.log(result);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
@@ -28,7 +28,13 @@
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const honoluluFlip = ['Maracuja Juice', 'Pineapple Juice', 'Lemon Juice', 'Grapefruit Juice', 'Crushed Ice'];
|
||||
const honoluluFlip = [
|
||||
'Maracuja Juice', //
|
||||
'Pineapple Juice',
|
||||
'Lemon Juice',
|
||||
'Grapefruit Juice',
|
||||
'Crushed Ice',
|
||||
];
|
||||
|
||||
const ingredientsFromMyBar = [
|
||||
'Pineapple',
|
||||
@@ -49,14 +55,16 @@
|
||||
|
||||
// 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) => {
|
||||
/* ??? */
|
||||
const hasIngredient = (cocktailAr = [], searchStr) => {
|
||||
return cocktailAr.includes(searchStr);
|
||||
};
|
||||
|
||||
//alert(hasIngredient(honoluluFlip, 'Maracuja Juice'));
|
||||
|
||||
// 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) => {
|
||||
/* ??? */
|
||||
const isMixableWith = (cocktailAr, allAr = []) => {
|
||||
return cocktailAr.every((str) => hasIngredient(allAr, str));
|
||||
};
|
||||
|
||||
//honoluluFlip isMixableWith ingredientsFromMyBar?
|
||||
Reference in New Issue
Block a user