01_grundlagen/unterricht/tag09/06_ar-map.html

@@ -20,7 +20,7 @@
     </main>
     <script>
       'use strict';
-
+      (() => {
         const outputEl = document.querySelector('.output');
 
         const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
@@ -81,6 +81,7 @@
             })
             .join('\n'),
         );
+      })();
     </script>
   </body>
 </html>

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>

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>