From 283b5527aa80c5048e57fb70257701b9ce80bfea Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Fri, 18 Sep 2026 12:00:55 +0200
Subject: [PATCH]

---
 .../tag10/06_local-scoping-mit-let-const.html | 72 +++++++++++++++
 .../tag10/07_local-scoping-mit-var.html       | 77 ++++++++++++++++
 .../tag10/08_local-scoping-code-bloecken.html | 89 ++++++++++++++++++
 .../tag10/09_local-scoping-iife.html          | 91 +++++++++++++++++++
 4 files changed, 329 insertions(+)
 create mode 100644 01_grundlagen/unterricht/tag10/06_local-scoping-mit-let-const.html
 create mode 100644 01_grundlagen/unterricht/tag10/07_local-scoping-mit-var.html
 create mode 100644 01_grundlagen/unterricht/tag10/08_local-scoping-code-bloecken.html
 create mode 100644 01_grundlagen/unterricht/tag10/09_local-scoping-iife.html

diff --git a/01_grundlagen/unterricht/tag10/06_local-scoping-mit-let-const.html b/01_grundlagen/unterricht/tag10/06_local-scoping-mit-let-const.html
new file mode 100644
index 0000000..fc86e8b
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/06_local-scoping-mit-let-const.html
@@ -0,0 +1,72 @@
+<!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;
+
+      // "{...}" - wird als Code-Block bezeichnet
+      if (true) {
+        let a = 1; // Variablendefinition
+        const c = 4; // Variablendefinition
+
+        console.log('b:', b); // => 2
+
+        b = 3;
+        if (true) {
+          console.log('b:', 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/07_local-scoping-mit-var.html b/01_grundlagen/unterricht/tag10/07_local-scoping-mit-var.html
new file mode 100644
index 0000000..b656b5a
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/07_local-scoping-mit-var.html
@@ -0,0 +1,77 @@
+<!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 ({}) - "function scope"
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // Variablendefinition
+      var b = 1;
+
+      // "{...}" - 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;
+        if (true) {
+          console.log('b:', 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)
+
+        console.log('a:', a); // => 2
+        b = 4; // globale Variable wird angesprochen und auf 4 gesetzt
+        d = d + b;
+
+        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/08_local-scoping-code-bloecken.html b/01_grundlagen/unterricht/tag10/08_local-scoping-code-bloecken.html
new file mode 100644
index 0000000..9070293
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/08_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 | .env)
+      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(slides); // => Uncaught ReferenceError: slides 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/09_local-scoping-iife.html b/01_grundlagen/unterricht/tag10/09_local-scoping-iife.html
new file mode 100644
index 0000000..ab964d8
--- /dev/null
+++ b/01_grundlagen/unterricht/tag10/09_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); //=> ReferenceError: numbers is not defined
+      console.log(slider); //=> ReferenceError: slider is not defined
+    </script>
+  </body>
+</html>