01_grundlagen/agenda.md

@@ -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

@@ -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

@@ -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

@@ -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>