From 1e045985bef4e6d1728674d3eabe9da08d7efa9d Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Thu, 17 Sep 2026 14:14:38 +0200
Subject: [PATCH]

---
 01_grundlagen/unterricht/tag09/06_ar-map.html |  91 ++++++++--------
 .../unterricht/tag09/07_ar-filter.html        | 102 ++++++++++++++++++
 .../unterricht/tag09/08_ar-for-each.html      | 100 +++++++++++++++++
 3 files changed, 248 insertions(+), 45 deletions(-)
 create mode 100644 01_grundlagen/unterricht/tag09/07_ar-filter.html
 create mode 100644 01_grundlagen/unterricht/tag09/08_ar-for-each.html

diff --git a/01_grundlagen/unterricht/tag09/06_ar-map.html b/01_grundlagen/unterricht/tag09/06_ar-map.html
index 4156ed7..e428a78 100644
--- a/01_grundlagen/unterricht/tag09/06_ar-map.html
+++ b/01_grundlagen/unterricht/tag09/06_ar-map.html
@@ -20,67 +20,68 @@
     </main>
     <script>
       'use strict';
+      (() => {
+        const outputEl = document.querySelector('.output');
 
-      const outputEl = document.querySelector('.output');
+        const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
 
-      const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
+        const names = [
+          'Florian', //
+          'Benjamin',
+          'Christian',
+          'Stefan',
+          'Philippe',
+          'Kaumon',
+        ];
 
-      const names = [
-        'Florian', //
-        'Benjamin',
-        'Christian',
-        'Stefan',
-        'Philippe',
-        'Kaumon',
-      ];
+        // Array Methode - ar.map((currentValue [, index] [, array]) => {...})
 
-      // Array Methode - ar.map((currentValue [, index] [, array]) => {...})
+        const namesFirstLetter = names.map((name) => {
+          return `${name.charAt(0).toUpperCase()}.`;
+        });
 
-      const namesFirstLetter = names.map((name) => {
-        return `${name.charAt(0).toUpperCase()}.`;
-      });
+        console.log(namesFirstLetter); // => ['F.', 'B.', 'C.', 'S.', 'P.', 'K.']
 
-      console.log(namesFirstLetter); // => ['F.', 'B.', 'C.', 'S.', 'P.', 'K.']
+        console.log([1, 2, 3, 4].map((n) => n * n)); // => [1, 4, 9, 16]
 
-      console.log([1, 2, 3, 4].map((n) => n * n)); // => [1, 4, 9, 16]
+        console.log(
+          [1, 2, 3, 4].map((n) => {
+            n * n;
+          }),
+        ); // => [undefined, undefined,undefined,undefined]
 
-      console.log(
-        [1, 2, 3, 4].map((n) => {
-          n * n;
-        }),
-      ); // => [undefined, undefined,undefined,undefined]
+        console.log([1, 2, 3, 4].map(() => 2)); // => [2, 2, 2, 2]
 
-      console.log([1, 2, 3, 4].map(() => 2)); // => [2, 2, 2, 2]
+        // ===============================
+        const createPassword = (str = '') => {
+          return `${str.split('').reverse().join('')}${str.length}`;
+        };
 
-      // ===============================
-      const createPassword = (str = '') => {
-        return `${str.split('').reverse().join('')}${str.length}`;
-      };
+        console.log(createPassword('Florian')); // => nairolF7
+        console.log(createPassword('Benjamin')); // => nimajneB8
 
-      console.log(createPassword('Florian')); // => nairolF7
-      console.log(createPassword('Benjamin')); // => nimajneB8
+        const passwords = names.map((name) => {
+          return createPassword(name);
+        });
 
-      const passwords = names.map((name) => {
-        return createPassword(name);
-      });
+        const passwords2 = names.map(createPassword); // Funktionsreferenz
 
-      const passwords2 = names.map(createPassword); // Funktionsreferenz
+        console.log(passwords); // => ['nairolF7', 'nimajneB8', 'naitsirhC9', 'nafetS6', 'eppilihP8', 'nomuaK6']
+        console.log(passwords2); // => ['nairolF7', 'nimajneB8', 'naitsirhC9', 'nafetS6', 'eppilihP8', 'nomuaK6']
 
-      console.log(passwords); // => ['nairolF7', 'nimajneB8', 'naitsirhC9', 'nafetS6', 'eppilihP8', 'nomuaK6']
-      console.log(passwords2); // => ['nairolF7', 'nimajneB8', 'naitsirhC9', 'nafetS6', 'eppilihP8', 'nomuaK6']
+        outputEl.textContent = passwords.join(' - ');
 
-      outputEl.textContent = passwords.join(' - ');
+        // Optionale Parameter von Map ========================
 
-      // 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'),
-      );
+        // 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>
diff --git a/01_grundlagen/unterricht/tag09/07_ar-filter.html b/01_grundlagen/unterricht/tag09/07_ar-filter.html
new file mode 100644
index 0000000..7ae5573
--- /dev/null
+++ b/01_grundlagen/unterricht/tag09/07_ar-filter.html
@@ -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 - 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 customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
+
+        const names = [
+          'Florian', //
+          'Benjamin',
+          'Christian',
+          'Stefan',
+          'Philippe',
+          'Kaumon',
+        ];
+
+        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 namesWithFirstLetterB = names.filter((name) => {
+          return name.toUpperCase().startsWith('B');
+          // return name.toUpperCase().charAt(0) === 'B'
+        });
+
+        console.log(namesWithFirstLetterB); // => ['Benjamin']
+
+        const productsWithFirstLetterU = products.filter((str) => {
+          return str.toLowerCase().charAt(0) === 'u';
+        });
+
+        console.log(productsWithFirstLetterU);
+
+        const getItemsByLetter = (letter, ar = []) => {
+          const results = ar.filter((str) => {
+            return str.toLowerCase().charAt(0) === letter.toLowerCase();
+          });
+          return results;
+        };
+
+        console.log('==== A ====');
+        console.log(getItemsByLetter('a', products));
+        console.log('==== B ====');
+        console.log(getItemsByLetter('b', products));
+        console.log('==== C ====');
+        console.log(getItemsByLetter('c', products));
+
+        // 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;
+        });
+      })();
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag09/08_ar-for-each.html b/01_grundlagen/unterricht/tag09/08_ar-for-each.html
new file mode 100644
index 0000000..adce247
--- /dev/null
+++ b/01_grundlagen/unterricht/tag09/08_ar-for-each.html
@@ -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>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 customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
+
+        const names = [
+          'Florian', //
+          'Benjamin',
+          'Christian',
+          'Stefan',
+          'Philippe',
+          'Kaumon',
+        ];
+
+        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 getItemsByLetter = (letter, ar = []) => {
+          const results = ar.filter((str) => {
+            return str.toLowerCase().charAt(0) === letter.toLowerCase();
+          });
+          return results;
+        };
+
+        // console.log('==== A ====');
+        // console.log(getItemsByLetter('a', products));
+        // console.log('==== B ====');
+        // console.log(getItemsByLetter('b', products));
+        // console.log('==== C ====');
+        // console.log(getItemsByLetter('c', products));
+        // console.log('==== D ====');
+        // console.log(getItemsByLetter('d', products));
+
+        const letters = 'abcdefghijklmnopqrstuvwxyz'.toUpperCase().split('');
+
+        letters.forEach((letter) => {
+          if (getItemsByLetter(letter, products).length === 0) return;
+
+          console.log(`== ${letter} ==`);
+          console.log(getItemsByLetter(letter, products).join(', '));
+        });
+
+        console.log('-------');
+        // 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>