This commit is contained in:
Philippe Torrel
@@ -67,6 +67,30 @@
|
||||
const createPassword = (str = '') => {
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
99
01_grundlagen/unterricht/tag09/07_ar-filter.html
Normal file
99
01_grundlagen/unterricht/tag09/07_ar-filter.html
Normal 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
111
01_grundlagen/unterricht/tag09/08_ar-for-each.html
Normal 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
127
01_grundlagen/unterricht/tag09/09_ar-reduce.html
Normal 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
86
01_grundlagen/unterricht/tag09/10_ar-some.html
Normal 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
85
01_grundlagen/unterricht/tag09/11_ar-every.html
Normal 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>
|
||||
Reference in New Issue
Block a user