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-09-18 10:46:23 +02:00
parent 818f064f2e
commit 9eacccfd84
4 changed files with 197 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
01_grundlagen/agenda.md
+1
View File
@@ -156,6 +156,7 @@ Lektion 10 erarbeiten
- Alle Array Higher Order Funktionen im Überblick
- local scoping
- **Exkurs: Schleifen**
- Git SCM und Windows Terminal einrichten
**Übungen:**
01_grundlagen/unterricht/tag10/01_ar-some.html
+47
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>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 AGE_OF_MAJORITY = 18;
const ageRatings = [6, 6, 6, 0, 12, 16, 0, 18, 6, 0, 6];
// Array Methode - ar.some((currentValue [,index] [,array]) => {})
const isForAdults = (ages = []) => {
return ages.some((age) => age >= AGE_OF_MAJORITY);
};
console.log(isForAdults(ageRatings)); // => true
// 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>
01_grundlagen/unterricht/tag10/02_ar-every.html
+47
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>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 AGE_OF_MAJORITY = 18;
const ageRatings = [6, 6, 6, 0, 12, 16, 0, 18, 6, 0, 6];
// Array Methode - ar.every((currentValue [,index] [,array]) => {})
const isForEveryOne = (ages = []) => {
return ages.length > 0 && ages.every((age) => age < AGE_OF_MAJORITY);
};
console.log(isForEveryOne(ageRatings)); // => false
// Optionale Parameter von Every ===================
// Array Methode - ar.every((currentValue, idx, arr) => {})
names.every((name, idx, ar) => {
console.log(`Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
});
</script>
</body>
</html>
01_grundlagen/unterricht/tag10/03_ar-optionale-parameter.html
+102
View File
@@ -0,0 +1,102 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array Methoden - optionale Parameter</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 Methoden - optionale Parameter</h1>
<!-- table.table.table-striped>(thead.table-dark>tr>th{Name}+th{Parameter der Callback-Funktion})+tbody>tr*3>td*2 -->
<table class="table table-striped my-5">
<thead class="table-dark">
<tr>
<th>Name</th>
<th>Parameter der Callback-Funktion</th>
</tr>
</thead>
<tbody>
<tr>
<td>map, filter, every, some, find, findIndex, forEach</td>
<td>
<ol>
<li><strong>Value:</strong> Der Wert des aktuell betrachteten Elements aus dem Array.</li>
<li><strong>Index:</strong> Ein laufender Index-Wert beginnend bei 0.</li>
<li><strong>Array:</strong> Das komplette Array, auf dem map aufgerufen wird.</li>
</ol>
</td>
</tr>
<tr>
<td>reduce, reduceRight</td>
<td>
<ol>
<li>
<strong>previousValue:</strong> Ergebnis der letzten Ausführung des Callbacks. Beim ersten Aufruf
ist es der Initialwert von reduce. Falls es keinen Initialwert gibt, verwendet reduce stattdessen
den ersten Wert des Arrays.
</li>
<li><strong>Value:</strong> Der Wert des aktuell betrachteten Elements aus dem Array.</li>
<li><strong>Index:</strong> Ein laufender Index-Wert beginnend bei 0.</li>
<li><strong>Array:</strong> Das komplette Array, auf dem reduce aufgerufen wird.</li>
</ol>
</td>
</tr>
<tr>
<td>sort</td>
<td>1. & 2. <strong>element</strong>: Elemente, die miteinander zu vergleichen sind.</td>
</tr>
</tbody>
</table>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const winners = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
const names = [
'Florian', //
'Benjamin',
'Christian',
'Stefan',
'Philippe',
'Kaumon',
];
names.unshift(names.splice(names.length - 2, 1)[0]);
// Array Methode - ar.map((currentValue [,index] [,array]) => {})
const results = names.map((name, idx) => {
// let result = '';
// if (idx < 3) {
// result = `Place ${idx + 1}: ${name}`;
// } else {
// result = name;
// }
// return result;
return idx < 3 ? `Place ${idx + 1} : ${name}` : name;
});
console.log(results.join('\n'));
outputEl.innerHTML = `<ul><li>${results.join('</li><li>')}</li></ul>`;
// Optionale Parameter von Every ===================
// Array Methode - ar.every((currentValue, idx, arr) => {})
names.every((name, idx, ar) => {
console.log(`Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
});
</script>
</body>
</html>