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-25 15:15:51 +02:00
parent 70794eab31
commit 878c0f7c6b
14 changed files with 896 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
01_grundlagen/uebungen/#u39_sort-stadt-land-fluss.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 39: Stadt, Land, Fluss</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 39: Stadt, Land, Fluss</h1>
<p>
Bei dem bekannten deutschen Quiz-Spiel »Stadt, Land, Fluss« müssen die Spieler zu bestimmten Kategorien Wörter
finden, die mit einem bestimmten Buchstaben beginnen. Jeder schreibt die Wörter für sich alleine auf. Sobald
einer der Spieler für jede Kategorie ein Wort gefunden hat, ruft er »Stop« und alle müssen das Aufschreiben
einstellen. Dann wird verglichen. Mehrfach gefundene Wörter werden gestrichen, alle anderen erhalten je nach
Spielregel und Variante Punkte.
</p>
<p>
Bei einer Variante des Spiels ist zusätzlich die Wortlänge ausschlaggebend. Das längste Wort bringt dabei die
meisten Punkte. Natürlich möchte niemand tatsächlich die Buchstaben der Wörter zählen. Dafür gibt es
schließlich JS.
</p>
<p>
Schreiben Sie eine Funktion, die Wörter einer Kategorie nach Länge sortiert. Das längste Wort soll dabei vorne
stehen.
</p>
<div class="outputA alert alert-secondary"></div>
<div class="outputB alert alert-secondary"></div>
<div class="outputC alert alert-secondary"></div>
</div>
</main>
<script>
'use strict';
// Variablen Ausgabe
const outputElA = document.querySelector('.outputA');
const outputElB = document.querySelector('.outputB');
const outputElC = document.querySelector('.outputC');
// Variablen
const cities = ['Barcelona', 'Basel', 'Belgrade', 'Berlin', 'Budapest'];
const countries = ['Belgium', 'Bulgaria', 'Brazil', 'Bolivia', 'Bosnia and Herzegovina'];
const rivers = ['Bode', 'Brahmaputra', 'Beuvron', 'Black River', 'Belaja'];
// Sortieren nach Länge
// TODO: do it
</script>
</body>
</html>

37
01_grundlagen/uebungen/#u40_map-lueckentext.html Normal file
View File

@@ -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 40: Lückentext zu map</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 40: Lückentext zu map</h1>
<p>
Wir wollen Sie bei der ersten Übung zu <strong>map</strong> nicht gleich ins kalte Wasser werfen. Stattdessen
haben wir einen kleinen Lückentext vorbereitet, bei dem Sie nur wenig ergänzen müssen. Ersetzen Sie die
Kommentare <code>/* ??? */</code> durch den richtigen Code, um das angegebene Ergebnis zu erzielen.
</p>
</div>
</main>
<script>
'use strict';
let results;
let inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
//double
results = inputs.map();
console.log(results); // => [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
//squares
results = inputs.map();
console.log(results); // => [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]
//
</script>
</body>
</html>

95
01_grundlagen/uebungen/#u41_tranformierte-ladislaus.html Normal file
View File

@@ -0,0 +1,95 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 41: Der transformierte Ladislaus, Teil 4</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 41: Der transformierte Ladislaus, Teil 4</h1>
<p>
Passen Sie die Funktion transformName aus Übung 34 so an, dass sie beliebig viele Vornamen (als Array)
verwerten kann.
</p>
<p>Zum Beispiel: <code>'L. C. B. Jones'</code></p>
</div>
<h3 class="mt-3">Formular</h3>
<form class="form-transform">
<div class="row">
<div class="col-12 col-sm-6">
<div class="mb-3">
<label class="form-label" for="input-firstname">Vornamen</label>
<div class="input-group">
<input
type="text"
class="form-control"
name="firstname"
id="input-firstname"
placeholder="Bitte mehrere Vornamen getrennt hinzufügen" />
</div>
<div class="tags mt-2"></div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="mb-3">
<label class="form-label" for="input-lastname">Nachname</label>
<input
type="text"
class="form-control"
name="lastname"
id="input-lastname"
placeholder="Nachname eingeben..." />
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="my-3">
<!-- <input type="submit" value="Transform name" class="btn btn-dark input-transform" /> -->
<button type="submit" class="btn btn-dark button-transform">Transform name</button>
</div>
</div>
</div>
</form>
<div class="alert alert-secondary">
<h3 class="mt-2">Transformierter Name:</h3>
<div class="output"></div>
</div>
</div>
</main>
<script>
'use strict';
const formTransformEl = document.querySelector('.form-transform');
const intputFirstname = formTransformEl.querySelector('input[name="firstname"]');
const inputLastname = formTransformEl.querySelector('input[name="lastname"]');
const outputEl = document.querySelector('.output');
// Übung 03
const transformName = (firstNames = [], lastName) => {
/* TODO: do it */
};
formTransformEl.addEventListener('submit', (e) => {
e.preventDefault();
const firstNames = intputFirstname.value.trim().split(' ');
const lastName = inputLastname.value.trim();
outputEl.textContent = transformName(firstNames, lastName);
});
outputEl.textContent = transformName(['Ladislaus', 'Coolio', 'Barry'], 'Jones');
</script>
</body>
</html>

52
01_grundlagen/uebungen/#u42_filter-boardgames.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 42: Friedemann Friese</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 42: Friedemann Friese</h1>
<p>
Ferdinand Füller mag Brettspiele von Friedemann Friese. Filtern Sie nur die Spiele aus der angegebenen Liste
der Brettspiele heraus, die mit dem Buchstaben F beginnen.
</p>
<p>Ersetzen Sie dazu die Kommentare <code>/* ??? */</code> durch den richtigen Code.</p>
</div>
<div class="output alert alert-secondary"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const videogames = ['Far Cry', 'Among Us'];
const boardgames = [
'Caverna',
'Puerto Rico', //
'Agricola',
'Black Friday',
'Funny Friends',
'Fauna',
'Eclipse',
'Codenames',
'Dominion',
'Fairy Tale',
'few time',
'Fast Flowing Forest Fellers',
'Fearsome Floors',
];
const boardgamesStartingWithF = boardgames.filter((name) => {
/* TODO: do it */
});
console.log(boardgamesStartingWithF); //=> ['Funny Friends', 'Fauna', 'Fairy Tale', 'Fast Flowing Forest Fellers', 'Fearsome Floors']
</script>
</body>
</html>

54
01_grundlagen/uebungen/#u43_filter-results.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 43: Lückentext zu filter</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 43: Lückentext zu filter</h1>
<p>
Auch zu <code>filter</code> haben wir einen kleinen Lückentext vorbereitet. Ersetzen Sie wieder die
Kommentare <code>/* ??? */</code> durch den richtigen Code, um das angegebene Ergebnis zu erzielen.
</p>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const names = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
const text = 'Hi this is a short text';
let results;
let result;
//1. even numbers
results = inputs.filter();
console.log(results); // => [2, 4, 6, 8, 10]
//2. names ending with letter 'e' or 'a'
results = names.filter();
console.log(results); // => [ 'Friedlinde', 'Tusnelda',
//3. words with at least three letters
const wordAr = text.split(' ');
result = wordAr.filter();
console.log(result); // => 'this short text'
</script>
</body>
</html>

35
01_grundlagen/uebungen/#u44_quersumme.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 44: Quersumme 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">
<h1>Übung 44: Quersumme berechnen</h1>
<p>
Schreibe eine Funktion digitSum, die die Quersumme einer übergebenen Zahl zurückgibt.
<strong>Hinweis:</strong> Die Quersumme ist die Summe aller Ziffern einer Zahl. <br /><strong>Tipp:</strong>
Verwenden Sie split('').
</p>
</div>
</div>
</main>
<script>
'use strict';
const number = 4566;
const getDigitSum = (n) => {};
console.log(getDigitSum(4242)); //=> 12
console.log(getDigitSum('13')); //=> 4
//========
</script>
</body>
</html>

38
01_grundlagen/uebungen/#u45_quersummen-sortiert.html Normal file
View File

@@ -0,0 +1,38 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 45: Quersumme berechnen und Ergebnisse sortieren</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 45: Quersumme berechnen und Ergebnisse sortieren</h1>
<p>
Na, haben wir den Mathematiker in dir geweckt? Verwende die Funktion <code>digitSum</code> aus der letzten
Übung. Nutze die Funktion dieses Mal, um gleich ein ganzes Array von Zahlen nach ihrer Quersumme zu
sortieren.
</p>
</div>
</div>
</main>
<script>
'use strict';
const numbers = [99, 5, 8, 12, 111, 123];
const getDigitSum = (n) => {};
const getSortedArrayByDigitSum = (numbers) => {};
console.log(getSortedArrayByDigitSum([4, 12])); //=> [12, 4]
console.log(getSortedArrayByDigitSum(numbers)); //=> [12, 111, 5, 123, 8, 99]
console.log(numbers);
</script>
</body>
</html>

BIN
01_grundlagen/uebungen/uebungen-39-45.zip Normal file
View File

Binary file not shown.

24
01_grundlagen/unterricht/tag09/06_ar-map.html
View File

@@ -67,6 +67,30 @@
const createPassword = (str = '') => { const createPassword = (str = '') => {
return str.split('').reverse().join('') + str.length; return str.split('').reverse().join('') + str.length;
}; };
console.log(createPassword('Ersin')); //=> 'nisre5'
console.log(createPassword('Andreas')); //=> 'saerdnA7'
console.log(createPassword('Adel')); //=> 'ledA4'
console.log(createPassword('Kahleel')); //=> 'leelhaK7'
const passwords = names.map((name) => {
return createPassword(name);
});
const passwords2 = names.map(createPassword); // Funktionsreferenz
console.log(passwords);
// Optionale Parameter von Map ===================
// Array Methode - ar.map((currentValue [, index [, array] ]) => {})
console.log(
names
.map((name, idx, ar) => {
return `Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`;
})
.join('\n'),
);
</script> </script>
</body> </body>
</html> </html>

99
01_grundlagen/unterricht/tag09/07_ar-filter.html Normal file
View File

@@ -0,0 +1,99 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array - ar.filter()</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>Array - ar.filter()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">
ar.filter()
</a>
- <strong>filter()</strong> erstellt ein neues Array mit allen Elementen, die den von der bereitgestellten
Funktion implementierten Test bestehen. (<code>side-effect-free</code>)
</p>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const lottoNumbers = [16, 10, 2, 12, 1, 33];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
const products = [
'Game of Thrones Wax Seal Coasters',
'Electronic Butterfly in a Jar',
'Aquafarm: Aquaponics Fish Garden',
'Cassette Adapter Bluetooth',
'Marvel Comics Lightweight Infinity Scarf',
'Ollie - The App Controlled Robot',
'Sound Splash Bluetooth Waterproof Shower Speaker',
'PowerCube',
'Backpack of Holding',
'Retro Duo Portable NES/SNES Game System',
'Universal Gadget Wrist Charger',
'USB Squirming Tentacle',
'USB Fishquarium',
'Space Bar Keyboard Organizer & USB Hub Pop',
'USB Pet Rock',
'Powerstation 5- E. Maximus Chargus',
'Dual Heated Travel Mug',
'Crosley Collegiate Portable USB Turntable',
'Meh Hoodie',
'Magnetic Accelerator Cannon',
];
// Array Methode - ar.filter((currentValue [, index [, array] ]) => {})
const namesWithFirstLetterA = names.filter((name) => {
return name.toLowerCase().startsWith('a');
});
console.log(namesWithFirstLetterA); // => ['Andreas', 'Adel']
const productsWithFirstLetter = products.filter((product) => {
return product.toLowerCase().startsWith('a');
});
const getItemsByLetter = (letter, ar = []) => {
const results = ar.filter((str) => {
return str.toLowerCase().startsWith(letter.toLowerCase());
});
return results;
};
console.log(getItemsByLetter('a', products));
console.log(getItemsByLetter('b', products));
console.log(getItemsByLetter('c', products));
console.log(getItemsByLetter('a', names)); //=>  ['Andreas', 'Adel']
console.log(productsWithFirstLetter); // => ['Aquafarm: Aquaponics Fish Garden']
// Optionale Parameter von Filter ===================
// Array Methode - ar.filter((currentValue [, index [, array] ]) => {})
names
.filter((name, idx, ar) => {
console.log(`Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
return true;
})
.join('\n');
</script>
</body>
</html>

111
01_grundlagen/unterricht/tag09/08_ar-for-each.html Normal file
View File

@@ -0,0 +1,111 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array - ar.forEach()</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>Array - ar.forEach()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">
ar.forEach()
</a>
- Die <strong>forEach()</strong> Methode führt eine übergebene Funktion für jedes Element eines Arrays aus.
</p>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const lottoNumbers = [16, 10, 2, 12, 1, 33];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
const products = [
'Game of Thrones Wax Seal Coasters',
'Electronic Butterfly in a Jar',
'Aquafarm: Aquaponics Fish Garden',
'Cassette Adapter Bluetooth',
'Marvel Comics Lightweight Infinity Scarf',
'Ollie - The App Controlled Robot',
'Sound Splash Bluetooth Waterproof Shower Speaker',
'PowerCube',
'Backpack of Holding',
'Retro Duo Portable NES/SNES Game System',
'Universal Gadget Wrist Charger',
'USB Squirming Tentacle',
'USB Fishquarium',
'Space Bar Keyboard Organizer & USB Hub Pop',
'USB Pet Rock',
'Powerstation 5- E. Maximus Chargus',
'Dual Heated Travel Mug',
'Crosley Collegiate Portable USB Turntable',
'Meh Hoodie',
'Magnetic Accelerator Cannon',
];
// Array Methode - ar.forEach((currentValue [, index [, array] ]) => {})
const namesWithFirstLetterA = names.filter((name) => {
return name.toLowerCase().startsWith('a');
});
console.log(namesWithFirstLetterA); // => ['Andreas', 'Adel']
const productsWithFirstLetter = products.filter((product) => {
return product.toLowerCase().startsWith('a');
});
const getItemsByLetter = (letter, ar = []) => {
const results = ar.filter((str) => {
return str.toLowerCase().startsWith(letter.toLowerCase());
});
return results;
};
console.log(getItemsByLetter('a', products));
// console.log(getItemsByLetter('b', products));
// console.log(getItemsByLetter('c', products));
// console.log(getItemsByLetter('d', products));
// console.log(getItemsByLetter('e', products));
const letters = 'abcdefghijklmnopqrstuvwxyz'.toUpperCase().split('');
outputEl.innerHTML = ''; // output Element leeren
letters.forEach((letter) => {
// Guard
if (getItemsByLetter(letter, products).length === 0) return;
console.log(`======= ${letter} ========`);
console.log(getItemsByLetter(letter, products).join('\n'));
console.log('==========================');
outputEl.innerHTML += `<h3 class="text-center">${letter}</h3>`;
outputEl.innerHTML += `<ul class="list-group"><li class="list-group-item">${getItemsByLetter(letter, products).join('</li><li class="list-group-item">')}</li></ul>`;
outputEl.innerHTML += '<hr />';
});
// Optionale Parameter von ForEach ===================
// Array Methode - ar.forEach((currentValue [, index [, array] ]) => {})
names.forEach((name, idx, ar) => {
console.log(`Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
});
</script>
</body>
</html>

127
01_grundlagen/unterricht/tag09/09_ar-reduce.html Normal file
View File

@@ -0,0 +1,127 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array - ar.reduce()</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>Array - ar.reduce()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce">
ar.reduce()
</a>
- Die <strong>reduce()</strong>-Methode reduziert ein Array auf einen einzigen Wert, indem es jeweils zwei
Elemente (von links nach rechts) durch eine gegebene Funktion reduziert.
</p>
<div class="alert alert-warning">side-effect-free</div>
<div class="alert alert-secondary output"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const lottoNumbers = [16, 10, 2, 12, 1, 33];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
const products = [
'Game of Thrones Wax Seal Coasters',
'Electronic Butterfly in a Jar',
'Aquafarm: Aquaponics Fish Garden',
'Cassette Adapter Bluetooth',
'Marvel Comics Lightweight Infinity Scarf',
'Ollie - The App Controlled Robot',
'Sound Splash Bluetooth Waterproof Shower Speaker',
'PowerCube',
'Backpack of Holding',
'Retro Duo Portable NES/SNES Game System',
'Universal Gadget Wrist Charger',
'USB Squirming Tentacle',
'USB Fishquarium',
'Space Bar Keyboard Organizer & USB Hub Pop',
'USB Pet Rock',
'Powerstation 5- E. Maximus Chargus',
'Dual Heated Travel Mug',
'Crosley Collegiate Portable USB Turntable',
'Meh Hoodie',
'Magnetic Accelerator Cannon',
];
const cartItemPrices = [9.99, 19.99, 5.99];
// Array Methode - ar.reduce((value1, value2) => {}, initialValue)
console.log(
cartItemPrices.reduce((n1, n2) => {
return n1 + n2;
}),
); // => 35.97
// =============
console.log(
[1, 2, 3, 4, 5].reduce((n1, n2) => {
return n1 + n2;
}),
); // => 15
// =============
console.log(
[5].reduce((n1, n2) => {
return n1 + n2;
}),
); // => 5
// =============
// console.log(
// [].reduce((n1, n2) => {
// return n1 + n2;
// }),
// ); // => Uncaught TypeError: Reduce of empty array with no initial
// =============
console.log(
[].reduce((n1, n2) => {
return n1 + n2;
}, 0),
); // => 0
// =============
console.log(
[1, 5, 10].reduce((n1, n2) => {
return n1 + n2;
}, 0),
); // => 16
// =============
console.log([1, 5, 10].reduce((n1, n2) => n1 + n2, 10)); // => 26
console.log([1, 5, 10].reduce((sum, n) => sum + n, 0)); // => 16
// Optionale Parameter von Reduce ===================
// Array Methode - ar.reduce((value1, value2, idx, ar) => {}, initialValue)
names.reduce((str, name, idx, ar) => {
console.log(`String: ${str}, Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
return str + ' - ' + name;
}, '');
</script>
</body>
</html>

86
01_grundlagen/unterricht/tag09/10_ar-some.html Normal file
View File

@@ -0,0 +1,86 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array - ar.some()</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>Array - ar.some()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/some">
ar.some()
</a>
- Die Methode <strong>some()</strong> überprüft ob mindestens ein Element des Arrays den als Funktion
übergebenen Kriterien entspricht.
</p>
<div class="alert alert-warning">side-effect-free</div>
<div class="alert alert-secondary output"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const lottoNumbers = [16, 10, 2, 12, 1, 33];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
const products = [
'Game of Thrones Wax Seal Coasters',
'Electronic Butterfly in a Jar',
'Aquafarm: Aquaponics Fish Garden',
'Cassette Adapter Bluetooth',
'Marvel Comics Lightweight Infinity Scarf',
'Ollie - The App Controlled Robot',
'Sound Splash Bluetooth Waterproof Shower Speaker',
'PowerCube',
'Backpack of Holding',
'Retro Duo Portable NES/SNES Game System',
'Universal Gadget Wrist Charger',
'USB Squirming Tentacle',
'USB Fishquarium',
'Space Bar Keyboard Organizer & USB Hub Pop',
'USB Pet Rock',
'Powerstation 5- E. Maximus Chargus',
'Dual Heated Travel Mug',
'Crosley Collegiate Portable USB Turntable',
'Meh Hoodie',
'Magnetic Accelerator Cannon',
];
const cartItemPrices = [9.99, 19.99, 5.99];
// Array Methode - ar.some((currentValue, idx, arr) => {})
const AGE_OF_MAJORITY = 18;
const ageRatings = [6, 6, 6, 0, 12, 16, 0, 18, 6, 0, 6];
const isForAdults = (ages = []) => {
// if (typeof ages === 'undefined') {
// console.error('Passed to few arguments, idiot!');
// return false;
// }
return ages.some((age) => age >= AGE_OF_MAJORITY);
};
console.log(isForAdults(ageRatings)); // => true
console.log(isForAdults()); // => false
// Optionale Parameter von Some ===================
// Array Methode - ar.some((currentValue, idx, arr) => {})
names.some((name, idx, ar) => {
console.log(`Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
});
</script>
</body>
</html>

85
01_grundlagen/unterricht/tag09/11_ar-every.html Normal file
View File

@@ -0,0 +1,85 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array - ar.every()</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>Array - ar.every()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/every">
ar.every()
</a>
- Die <strong>every()</strong> Methode testet ob alle Elemente in einem Array einen Test bestehen, welcher
mittels einer implementierten Funktion bereitgestellt wird.
</p>
<div class="alert alert-warning">side-effect-free</div>
<div class="alert alert-secondary output"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const lottoNumbers = [16, 10, 2, 12, 1, 33];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
const products = [
'Game of Thrones Wax Seal Coasters',
'Electronic Butterfly in a Jar',
'Aquafarm: Aquaponics Fish Garden',
'Cassette Adapter Bluetooth',
'Marvel Comics Lightweight Infinity Scarf',
'Ollie - The App Controlled Robot',
'Sound Splash Bluetooth Waterproof Shower Speaker',
'PowerCube',
'Backpack of Holding',
'Retro Duo Portable NES/SNES Game System',
'Universal Gadget Wrist Charger',
'USB Squirming Tentacle',
'USB Fishquarium',
'Space Bar Keyboard Organizer & USB Hub Pop',
'USB Pet Rock',
'Powerstation 5- E. Maximus Chargus',
'Dual Heated Travel Mug',
'Crosley Collegiate Portable USB Turntable',
'Meh Hoodie',
'Magnetic Accelerator Cannon',
];
const cartItemPrices = [9.99, 19.99, 5.99];
// Array Methode - ar.some((currentValue, idx, arr) => {})
const AGE_OF_MAJORITY = 18;
const ageRatings = [6, 6, 6, 0, 12, 16, 0, 18, 6, 0, 6];
const isForEveryone = (ages = []) => {
return ages.length > 0 && ages.every((age) => age < AGE_OF_MAJORITY);
};
console.log(isForEveryone(ageRatings)); // => false
console.log(isForEveryone()); // => false
console.log([].every(() => false)); //=> true;
// Optionale Parameter von Some ===================
// Array Methode - ar.every((currentValue, idx, arr) => {})
names.every((name, idx, ar) => {
console.log(`Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
});
</script>
</body>
</html>