From d24e33bfd270e788f8f0782bf09e08c1a8e0161a Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Fri, 26 Jun 2026 15:01:56 +0200
Subject: [PATCH]

---
 .../tag10/01_ar-optionale-parameter.html      |  93 ++++++++++++++++
 .../unterricht/tag10/02_ar-find.html          |  97 ++++++++++++++++
 .../unterricht/tag10/03_ar-find-index.html    | 105 ++++++++++++++++++
 .../tag10/04_local-scoping-mit-let-const.html |  71 ++++++++++++
 .../tag10/05_local-scoping-mit-var.html       |  76 +++++++++++++
 .../tag10/06_local-scoping-code-bloecken.html |  89 +++++++++++++++
 .../tag10/07_local-scoping-iife.html          |  91 +++++++++++++++
 .../unterricht/tag10/08_prefer-const.html     |  34 ++++++
 .../tag10/09_schleifen/01_for-statement.html  |  73 ++++++++++++
 .../09_schleifen/02_for-of-statement.html     |  59 ++++++++++
 .../09_schleifen/03_for-in-statement.html     |  60 ++++++++++
 .../09_schleifen/04_while-statement.html      |  87 +++++++++++++++
 .../09_schleifen/05_do-while-statement.html   |  89 +++++++++++++++
 13 files changed, 1024 insertions(+)
 create mode 100644 01_grundlagen/unterricht/tag10/01_ar-optionale-parameter.html
 create mode 100644 01_grundlagen/unterricht/tag10/02_ar-find.html
 create mode 100644 01_grundlagen/unterricht/tag10/03_ar-find-index.html
 create mode 100644 01_grundlagen/unterricht/tag10/04_local-scoping-mit-let-const.html
 create mode 100644 01_grundlagen/unterricht/tag10/05_local-scoping-mit-var.html
 create mode 100644 01_grundlagen/unterricht/tag10/06_local-scoping-code-bloecken.html
 create mode 100644 01_grundlagen/unterricht/tag10/07_local-scoping-iife.html
 create mode 100644 01_grundlagen/unterricht/tag10/08_prefer-const.html
 create mode 100644 01_grundlagen/unterricht/tag10/09_schleifen/01_for-statement.html
 create mode 100644 01_grundlagen/unterricht/tag10/09_schleifen/02_for-of-statement.html
 create mode 100644 01_grundlagen/unterricht/tag10/09_schleifen/03_for-in-statement.html
 create mode 100644 01_grundlagen/unterricht/tag10/09_schleifen/04_while-statement.html
 create mode 100644 01_grundlagen/unterricht/tag10/09_schleifen/05_do-while-statement.html
diff --git a/01_grundlagen/unterricht/tag10/01_ar-optionale-parameter.html b/01_grundlagen/unterricht/tag10/01_ar-optionale-parameter.html
new file mode 100644
index 0000000..f5a0cdb
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/01_ar-optionale-parameter.html
@@ -0,0 +1,93 @@
+<!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 = [
+        'Ersin', //
+        'Andreas',
+        'Adel',
+        'Kahleel',
+        'Philippe',
+      ];
+
+      names.unshift(names.pop()); // WICHTIG
+
+      // Array Methode - ar.map((currentValue, index, array) => {})
+
+      const results = names.map((name, idx) => {
+        // let result = '';
+
+        // if (idx < 3) {
+        //   result = `${idx + 1} Place: ${name}`;
+        // } else {
+        //   result = name;
+        // }
+        // return result;
+
+        return idx < 3 ? `${idx + 1} Place: ${name}` : name;
+      });
+
+      console.log(results);
+
+      outputEl.innerHTML = `<ul><li>${results.join('</li><li>')}</li></ul>`;
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag10/02_ar-find.html b/01_grundlagen/unterricht/tag10/02_ar-find.html
new file mode 100644
index 0000000..e1b9446
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/02_ar-find.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Array - ar.find()</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.find()</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/find"
+            >ar.find()
+          </a>
+          - Die Methode <strong>find()</strong> gibt den Wert des Elements eines Arrays zurück, welches
+          <strong>als erstes</strong> die Bedingung einer bereitgestellten Testfunktion erfüllt. Andernfalls wird
+          <strong>undefined</strong> zurückgegeben.
+        </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.find((currentValue, idx, arr) => {})
+
+      console.log(
+        names.find((name) => {
+          return name.length > 6;
+        }),
+      ); // => Andreas
+
+      console.log(names.includes('Andreas')); // => true
+      console.log(names.includes(' andreas ')); // => false
+
+      console.log(
+        names.find((name) => {
+          return name.trim().toLowerCase() === 'andreas';
+        })
+          ? true
+          : false,
+      ); // => true
+
+      console.log(
+        names.find((name) => {
+          return name.trim().toLowerCase() === 'boris';
+        }),
+      ); // => undefined <- bei keinem Treffer
+
+      // Optionale Parameter von Find ===================
+
+      // Array Methode - ar.find((currentValue, idx, arr) => {})
+      names.find((name, idx, ar) => {
+        console.log(`Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
+      });
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag10/03_ar-find-index.html b/01_grundlagen/unterricht/tag10/03_ar-find-index.html
new file mode 100644
index 0000000..a4ee237
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/03_ar-find-index.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Array - ar.findIndex()</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.findIndex()</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/findindex">
+            ar.findIndex()
+          </a>
+        </p>
+
+        <p>
+          - Die Methode <strong>findIndex()</strong> gibt den Index des Elements eines Arrays zurück, welches
+          <strong>als erstes</strong> die Bedingung einer bereitgestellten Testfunktion erfüllt. Andernfalls wird
+          <strong>-1</strong> zurückgegeben.
+        </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.find((currentValue, idx, arr) => {})
+
+      console.log(
+        names.find((name) => {
+          return name.length > 6;
+        }),
+      ); // => Andreas
+
+      console.log(names.includes('Andreas')); // => true
+      console.log(names.includes(' andreas ')); // => false
+
+      console.log(
+        names.findIndex((name) => {
+          return name.trim().toLowerCase() === 'andreas';
+        }) !== -1,
+      ); // => true
+
+      console.log(
+        names.findIndex((name) => {
+          return name.trim().toLowerCase() === 'adel';
+        }),
+      ); // => 2 <- index vom Treffer
+
+      console.log(
+        names.findIndex((name) => {
+          return name.trim().toLowerCase() === 'boris';
+        }),
+      ); // => -1 <- bei keinem Treffer
+
+      // Optionale Parameter von FindIndex ===================
+
+      // Array Methode - ar.findIndex((currentValue, idx, arr) => {})
+      names.find((name, idx, ar) => {
+        console.log(`Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
+      });
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag10/04_local-scoping-mit-let-const.html b/01_grundlagen/unterricht/tag10/04_local-scoping-mit-let-const.html
new file mode 100644
index 0000000..9d82c03
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/04_local-scoping-mit-let-const.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>"Local Scoping" (Gültigkeitsbereiche) von let & const</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>"Local Scoping" (Gültigkeitsbereiche) von let & const</h1>
+        <p>
+          Variablen deklariert mit <strong>let</strong> & <strong>const</strong> haben ihren eingegrenzten
+          Gültigkeitsbereich innerhalb von Codeblöcken ({})
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // Variablendefinition
+      let b = 1;
+
+      b = 2;
+      // "{...}" - wird als Code-Block bezeichnet
+
+      if (true) {
+        let a = 1; // Variablendefinition
+        const c = 4; // Variablendefinition
+
+        console.log('b:', b); // => 2
+
+        b = 3;
+
+        console.log('a:', a); // => 1
+        console.log('b:', b); // => 3
+        console.log('c:', c); // => 4
+      }
+
+      // console.log('a:', a); // => Uncaught ReferenceError: a is not defined
+      console.log('b:', b); // => 3
+      // console.log('c:', c); // => Uncaught ReferenceError: c is not defined
+
+      const fnName = () => {
+        let d = 'text';
+        let a = 2;
+
+        b = 4; // globale Variable wird angesprochen und auf 4 gesetzt
+        d = d + b;
+
+        console.log('a:', a); // => 2
+        console.log('b:', b); // => 4
+        console.log('d:', d); // => 'text4'
+
+        return d;
+      };
+
+      console.log('b:', b); // => 3
+
+      const e = fnName();
+
+      console.log('b:', b); // => 4
+
+      // console.log('d:', d); // => // => Uncaught ReferenceError: d is not defined
+
+      console.log('e:', e); // => 'text4'
+      // console.log('a:', a); // => Uncaught ReferenceError: a is not defined
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag10/05_local-scoping-mit-var.html b/01_grundlagen/unterricht/tag10/05_local-scoping-mit-var.html
new file mode 100644
index 0000000..84ff283
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/05_local-scoping-mit-var.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>"Local Scoping" (Gültigkeitsbereiche) von var</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>"Local Scoping" (Gültigkeitsbereiche) von var</h1>
+        <p>
+          Variablen deklariert mit <strong>var</strong> haben ihren eingegrenzten Gültigkeitsbereich nur innerhalb von
+          Funktionsblöcken ({}) - "functio scope"
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // Variablendefinition
+      var b = 1;
+
+      b = 2;
+      // "{...}" - wird als Code-Block bezeichnet
+
+      if (true) {
+        var a = 1; // Variablendefinition mit "var" haben KEINEN eingeschränkten Gültigkeitsbereich in Code-Blöcken ({...})
+        const c = 4; // Variablendefinition
+
+        console.log('b:', b); // => 2
+
+        b = 3;
+
+        console.log('a:', a); // => 1
+        console.log('b:', b); // => 3
+        console.log('c:', c); // => 4
+      }
+
+      console.log('a:', a); // => 1
+      console.log('b:', b); // => 3
+      // console.log('c:', c); // => Uncaught ReferenceError: c is not defined
+
+      const fnName = () => {
+        var d = 'text'; // eigener Gültigkeitsbereich innerhalb von Funktion (Function-Scope)
+        var a = 2; // eigener Gültigkeitsbereich innerhalb von Funktion (Function-Scope)
+
+        b = 4; // globale Variable wird angesprochen und auf 4 gesetzt
+        d = d + b;
+
+        console.log('a:', a); // => 2
+        console.log('b:', b); // => 4
+        console.log('d:', d); // => 'text4'
+
+        return d;
+      };
+
+      for (var i = 0; i < 10; i++) {
+        // console.log(i);
+      }
+      console.log('i:', i); //=> 10
+
+      console.log('b:', b); // => 3
+
+      const e = fnName();
+
+      console.log('b:', b); // => 4
+
+      // console.log('d:', d); // => // => Uncaught ReferenceError: d is not defined
+
+      console.log('e:', e); // => 'text4'
+      // console.log('a:', a); // => 1
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag10/06_local-scoping-code-bloecken.html b/01_grundlagen/unterricht/tag10/06_local-scoping-code-bloecken.html
new file mode 100644
index 0000000..0397f9c
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/06_local-scoping-code-bloecken.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>"local scoping" von Codeblöcken</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
+    <!-- NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> -->
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>"local scoping" von Codeblöcken</h1>
+        <div class="my-slider">
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+        <!-- or ul.my-slider > li -->
+      </div>
+    </main>
+    <!-- Globale Settings (für alle Entwickler)-->
+    <script>
+      'use strict';
+
+      // Konfigurationsvariablen (config.js)
+      const DEFAULT_LANG = 'en-EN';
+      const TAX_RATE = 1.19;
+      const BASE_URL = 'http://localhost:8080';
+      const DB_NAME = 'todos_db';
+      const DEBUG_MODE = false;
+    </script>
+
+    <!-- Entwickler 01 (counterStats) -->
+    <script>
+      'use strict';
+
+      // Einschränkung vom Gültigkeitsbereich über Codeblöcke ({...})
+      {
+        let numbers = [1, 2, 3, 4, 5];
+        let name = 'Counter Stat Module';
+        const lang = DEFAULT_LANG || 'de-DE';
+        const greeting = lang === 'de-DE' ? 'Hallo' : 'Hello';
+
+        // code logic....
+      }
+
+      // console.log(numbers); // => Uncaught ReferenceError: numbers is not defined
+    </script>
+    <!-- Entwickler 02 (slider | carousel)-->
+    <script>
+      'use strict';
+      // Einschränkung vom Gültigkeitsbereich über Codeblöcke ({...})
+      {
+        const numbers = [1, 2, 3, 4, 5];
+        let slides = ['slide01', 'slide02'];
+        let name = 'Slider';
+        const lang = DEFAULT_LANG || 'de-DE';
+
+        // code logic....
+      }
+
+      // console.log(numbers); // => Uncaught ReferenceError: numbers is not defined
+    </script>
+    <!-- Entwickler 03 (userbereich)-->
+    <script>
+      'use strict';
+      // Einschränkung vom Gültigkeitsbereich über Codeblöcke ({...})
+      {
+        var numbers = [1, 2, 3, 4, 5];
+        let userRoles = ['admin', 'guest', 'editor'];
+        let name = 'User Dashboard';
+        const lang = DEFAULT_LANG || 'de-DE';
+
+        var slider = tns({
+          container: '.my-slider',
+          items: 3,
+          slideBy: 'page',
+          autoplay: true,
+        });
+        // code logic....
+      }
+
+      console.log(numbers); //=> [1, 2, 3, 4, 5]
+      console.log(slider); //=> ZUGRIFF MÖGLICH
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag10/07_local-scoping-iife.html b/01_grundlagen/unterricht/tag10/07_local-scoping-iife.html
new file mode 100644
index 0000000..7d64024
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/07_local-scoping-iife.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>"local scoping" mit IIFE (Immediately invoked function expression)</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <!-- NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> -->
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>"local scoping" mit IIFE (Immediately invoked function expression)</h1>
+        <div class="my-slider">
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+        <!-- or ul.my-slider > li -->
+      </div>
+    </main>
+    <!-- Globale Settings (für alle Entwickler)-->
+    <script>
+      'use strict';
+
+      // Konfigurationsvariablen (config.js)
+      const DEFAULT_LANG = 'en-EN';
+      const TAX_RATE = 1.19;
+      const BASE_URL = 'http://localhost:8080';
+      const DB_NAME = 'todos_db';
+      const DEBUG_MODE = false;
+    </script>
+
+    <!-- Entwickler 01 (counterStats) -->
+    <script>
+      'use strict';
+
+      // Einschränkung vom Gültigkeitsbereich mit IIFE (() => {})()
+      (() => {
+        let numbers = [1, 2, 3, 4, 5];
+        let name = 'Counter Stat Module';
+        const lang = DEFAULT_LANG || 'de-DE';
+        const greeting = lang === 'de-DE' ? 'Hallo' : 'Hello';
+
+        // code logic....
+      })();
+      // console.log(numbers); // => Uncaught ReferenceError: numbers is not defined
+    </script>
+    <!-- Entwickler 02 (slider | carousel)-->
+    <script>
+      'use strict';
+      // Einschränkung vom Gültigkeitsbereich mit IIFE (() => {})()
+      (() => {
+        const numbers = [1, 2, 3, 4, 5];
+        let slides = ['slide01', 'slide02'];
+        let name = 'Slider';
+        const lang = DEFAULT_LANG || 'de-DE';
+
+        // code logic....
+      })();
+
+      // console.log(numbers); // => Uncaught ReferenceError: numbers is not defined
+    </script>
+    <!-- Entwickler 03 (userbereich)-->
+    <script>
+      'use strict';
+      // Einschränkung vom Gültigkeitsbereich mit IIFE (() => {})()
+      (() => {
+        var numbers = [1, 2, 3, 4, 5];
+        let userRoles = ['admin', 'guest', 'editor'];
+        let name = 'User Dashboard';
+        const lang = DEFAULT_LANG || 'de-DE';
+
+        var slider = tns({
+          container: '.my-slider',
+          items: 3,
+          slideBy: 'page',
+          autoplay: true,
+        });
+        // code logic....
+
+        $('.container').css({ backgroundColor: '#eee' });
+      })();
+
+      console.log(numbers); //=> ZUGRIFF NICHT MÖGLICH
+      console.log(slider); //=> ZUGRIFF NICHT  MÖGLICH
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag10/08_prefer-const.html b/01_grundlagen/unterricht/tag10/08_prefer-const.html
new file mode 100644
index 0000000..f972e00
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/08_prefer-const.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>"Prefer-const" Programmierrichtlinie (AirBnb | Google)</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>"Prefer-const" Programmierrichtlinie (AirBnb | Google)</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // prefer-const
+      const transform = (fullName) => {
+        const nameParts = fullName.split(' '); // =>  ['Ladislaus', 'Coolio', 'Barry', 'Crazy', 'Jones'];
+        const lastName = nameParts.slice(nameParts.length - 1); // => 'Jones'
+        const firstNames = nameParts.slice(0, nameParts.length - 1); // =>  ['Ladislaus', 'Coolio', 'Barry', 'Crazy']
+
+        return firstNames.map((firstName) => firstName.charAt(0) + '.').join(' ') + ' ' + lastName;
+      };
+
+      console.log(transform(aLongName));
+      // transform = 'text'; // Uncaught TypeError: Assignment to constant variable
+
+      const aLongName = 'Ladislaus Coolio Barry Crazy Jones';
+      console.log(transform(aLongName));
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag10/09_schleifen/01_for-statement.html b/01_grundlagen/unterricht/tag10/09_schleifen/01_for-statement.html
new file mode 100644
index 0000000..750e8e1
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/09_schleifen/01_for-statement.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS for-statement (for...Schleife)</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>JS for-statement (for...Schleife)</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for">for-statement</a> -
+          Die <strong>for Anweisung</strong> beschreibt eine Schleife mit drei optionalen Ausdrücken und einer oder
+          mehreren Anweisungen.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const names = [
+        'Ersin', //
+        'Andreas',
+        'Adel',
+        'Kahleel',
+        'Philippe',
+      ];
+
+      // deklarativen Stil (was...)
+      names.forEach((name, idx) => {
+        console.log(`Index: ${idx}, Name: ${name}`);
+      });
+
+      console.log('=============');
+
+      // imperativen Stil (wie...)
+
+      // Schleife - for ([Initializiation]; [Condition]; [Final-Expression]) {...}
+
+      for (let i = 0; i < names.length; i++) {
+        console.log(`Index: ${i}, Name: ${names[i]}`);
+      }
+
+      console.log('weiter im code...');
+
+      console.log('=============');
+
+      let nums = [];
+
+      for (let i = 0; i <= 20; i += 2) {
+        i += 3;
+        nums.push(i++);
+        i += 2;
+      }
+
+      console.log(nums); //=> [3,11,19]
+
+      console.log('==============');
+      nums = [];
+
+      for (let i = 8; i <= 29; i += 3) {
+        i += 3;
+        nums.push(i++);
+        i += 4;
+        nums.push(++i);
+      }
+
+      console.log(nums); //=> [11, 17, 23, 29 ]
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag10/09_schleifen/02_for-of-statement.html b/01_grundlagen/unterricht/tag10/09_schleifen/02_for-of-statement.html
new file mode 100644
index 0000000..b346bdb
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/09_schleifen/02_for-of-statement.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS for- of statement (for... of Schleife)</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>JS - For of Statement (for ... of Schleife)</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for...of"
+            >for...of statement</a
+          >
+          - Mit dem <strong>for...of</strong> statement können sogenannte iterable objects durchlaufen werden (Array,
+          Map, Set, das "arguments" Objekt und weitere eingeschlossen), wobei auf jeden gefundenen Wert eigene
+          Statements ausgeführt werden können.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const names = [
+        'Ersin', //
+        'Andreas',
+        'Adel',
+        'Kahleel',
+        'Philippe',
+      ];
+
+      // deklarativen Stil (was...)
+      names.forEach((name, idx) => {
+        console.log(`Index: ${idx}, Name: ${name}`);
+      });
+
+      console.log('=============');
+
+      // imperativen Stil (wie...)
+
+      // Schleife - for (entry of array) {...}
+
+      for (const name of names) {
+        console.log(`Index: ${names.indexOf(name)}, Name: ${name}`);
+      }
+
+      const nodes = document.querySelectorAll('strong');
+      const classes = document.querySelector('div').classList;
+
+      // Arrrayähnliche Objekte
+      console.log(nodes, Array.from(nodes)); // => NodeList;
+      console.log(classes, Array.from(classes)); // => DOMTokenList;
+
+      console.log('weiter im code...');
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag10/09_schleifen/03_for-in-statement.html b/01_grundlagen/unterricht/tag10/09_schleifen/03_for-in-statement.html
new file mode 100644
index 0000000..69d0fe9
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/09_schleifen/03_for-in-statement.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS for- of statement (for... in Schleife)</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>JS - For in Statement (for ... in Schleife)</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for...in">
+            for...in statement
+          </a>
+          - iteriert über alle zählbaren String-Eigenschaften eines Objekts (ignoriert Eigenschaften, die durch Symbole
+          gekennzeichnet sind), einschließlich geerbter zählbarer Eigenschaften.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const personObj = {
+        firstName: 'John',
+        lastName: 'Wick',
+        age: 38,
+        hobbies: ['Gassi gehen', 'Ballern'],
+      };
+
+      personObj.weight = 90;
+
+      const prop = 'age';
+
+      console.table(personObj);
+
+      console.log(personObj.firstName); // => 'John'
+      console.log(personObj.age); // => 38
+
+      console.log(personObj['age']); // => 38
+      console.log(personObj[prop]); // => 38
+
+      console.log(personObj.hobbies[0]); // => 'Gassi gehen'
+      console.log(personObj['hobbies'][0]); // => 'Gassi gehen'
+
+      console.log('=============');
+
+      // imperativen Stil (wie...)
+
+      // Schleife - for (property in object) {...}
+
+      for (const prop in personObj) {
+        console.log(`Eigenschaft: ${prop}, Wert: ${personObj[prop]}`);
+      }
+
+      console.log('weiter im code...');
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag10/09_schleifen/04_while-statement.html b/01_grundlagen/unterricht/tag10/09_schleifen/04_while-statement.html
new file mode 100644
index 0000000..9a04a27
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/09_schleifen/04_while-statement.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS while-statement (while...Schleife)</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>JS while - (while - Schleife)</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/while">while - Schleife</a>
+          - Die <strong>while-Anweisung</strong> (Engl. statement) beschreibt eine Schleife, die solange durchlaufen
+          wird wie die Schleifenbedingung wahr (Engl. true) ergibt. Die Schleifenbedingung (Engl. condition) wird am
+          Anfang der Schleife ausgewertet.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const names = [
+        'Ersin', //
+        'Andreas',
+        'Adel',
+        'Kahleel',
+        'Philippe',
+      ];
+
+      // deklarativen Stil (was...)
+      names.forEach((name, idx) => {
+        console.log(`Index: ${idx}, Name: ${name}`);
+      });
+
+      console.log('=============');
+
+      // imperativen Stil (wie...)
+
+      // Schleife - while (condition) {...}
+
+      let i = 0;
+
+      while (i < names.length) {
+        console.log(`Index: ${i}, Name: ${names[i]}`);
+        i++;
+      }
+
+      console.log('weiter im code...');
+
+      i = -1;
+
+      while (++i < names.length) {
+        console.log(`Index: ${i}, Name: ${names[i]}`);
+      }
+
+      console.log('weiter im code...');
+
+      console.log('=============');
+
+      let nums = [];
+      i = 0;
+      while (i <= 20) {
+        i += 3;
+        nums.push(i++);
+        i += 2;
+        i += 2;
+      }
+
+      console.log(nums); //=> [3,11,19]
+
+      console.log('==============');
+      nums = [];
+      i = 8;
+      while (i <= 29) {
+        i += 3;
+        nums.push(i++);
+        i += 4;
+        nums.push(++i);
+        i += 3;
+      }
+
+      console.log(nums); //=> [11, 17, 23, 29 ]
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag10/09_schleifen/05_do-while-statement.html b/01_grundlagen/unterricht/tag10/09_schleifen/05_do-while-statement.html
new file mode 100644
index 0000000..55adc44
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/09_schleifen/05_do-while-statement.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS while-statement (while...Schleife)</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>JS do...while - (do...while - Schleife)</h1>
+
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/do...while"
+            >do...while - Schleife
+          </a>
+          - Die <strong>do...while-Anweisung</strong> (Engl. statement) beschreibt eine Schleife, die solange
+          durchlaufen wird wie die Schleifenbedingung wahr (Engl. true) ergibt. Die Schleifenbedingung (Engl. condition)
+          wird am Ende der Schleife ausgewertet.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const names = [
+        'Ersin', //
+        'Andreas',
+        'Adel',
+        'Kahleel',
+        'Philippe',
+      ];
+
+      // deklarativen Stil (was...)
+      names.forEach((name, idx) => {
+        console.log(`Index: ${idx}, Name: ${name}`);
+      });
+
+      console.log('=============');
+
+      // imperativen Stil (wie...)
+
+      // Schleife - while (condition) {...}
+
+      let i = 0;
+
+      do {
+        console.log(`Index: ${i}, Name: ${names[i]}`);
+        i++;
+      } while (i < names.length);
+
+      console.log('weiter im code...');
+
+      i = 0;
+      do {
+        console.log(`Index: ${i}, Name: ${names[i]}`);
+      } while (++i < names.length);
+
+      console.log('weiter im code...');
+
+      console.log('=============');
+
+      let nums = [];
+      i = 0;
+      do {
+        i += 3;
+        nums.push(i++);
+        i += 2;
+        i += 2;
+      } while (i <= 20);
+
+      console.log(nums); //=> [3,11,19]
+
+      console.log('==============');
+      nums = [];
+      i = 8;
+      while (i <= 29) {
+        i += 3;
+        nums.push(i++);
+        i += 4;
+        nums.push(++i);
+        i += 3;
+      }
+
+      console.log(nums); //=> [11, 17, 23, 29 ]
+    </script>
+  </body>
+</html>

Name	Parameter der Callback-Funktion
map, filter, every, some, find, findIndex, forEach	+ + Value: Der Wert des aktuell betrachteten Elements aus dem Array. + Index: Ein laufender Index-Wert beginnend bei 0. + Array: Das komplette Array, auf dem map aufgerufen wird. + +
reduce, reduceRight	+ + + previousValue: 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. + + Value: Der Wert des aktuell betrachteten Elements aus dem Array. + Index: Ein laufender Index-Wert beginnend bei 0. + Array: Das komplette Array, auf dem reduce aufgerufen wird. + +
sort	1. & 2. element: Elemente, die miteinander zu vergleichen sind.