From c13d2d44342f57bcbaff331855515747a4f740b8 Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Thu, 17 Sep 2026 13:34:19 +0200
Subject: [PATCH]

---
 01_grundlagen/linksammlung.md                 |  8 ++
 01_grundlagen/uebungen/u38_alte-listen.html   |  8 +-
 .../unterricht/tag09/01_str-split.html        | 60 ++++++++++++
 .../unterricht/tag09/02_ar-reverse.html       | 50 ++++++++++
 ...3_ar-to-sorted-to-reversed-to-spliced.html | 94 +++++++++++++++++++
 .../tag09/04_ar-sort-compare-fn.html          | 51 ++++++++++
 .../05_ar-sort-compare-fn-bsp-admin.html      | 91 ++++++++++++++++++
 01_grundlagen/unterricht/tag09/06_ar-map.html | 86 +++++++++++++++++
 8 files changed, 445 insertions(+), 3 deletions(-)
 create mode 100644 01_grundlagen/unterricht/tag09/01_str-split.html
 create mode 100644 01_grundlagen/unterricht/tag09/02_ar-reverse.html
 create mode 100644 01_grundlagen/unterricht/tag09/03_ar-to-sorted-to-reversed-to-spliced.html
 create mode 100644 01_grundlagen/unterricht/tag09/04_ar-sort-compare-fn.html
 create mode 100644 01_grundlagen/unterricht/tag09/05_ar-sort-compare-fn-bsp-admin.html
 create mode 100644 01_grundlagen/unterricht/tag09/06_ar-map.html

diff --git a/01_grundlagen/linksammlung.md b/01_grundlagen/linksammlung.md
index babd609..00cf5f9 100644
--- a/01_grundlagen/linksammlung.md
+++ b/01_grundlagen/linksammlung.md
@@ -36,6 +36,14 @@
 
 - [Microsoft PowerToys](https://learn.microsoft.com/de-de/windows/powertoys/)
 
+## Passwordmanager
+
+- [Enpass](https://www.enpass.io/pricing/)
+- [1password](https://1password.com/de/pricing/password-manager)
+- [KeepassXC](https://keepassxc.org/)
+- [Safe in cloud](https://safe-in-cloud.com/)
+- [BitWarden](https://bitwarden.com/de-de/)
+<!-- - [Dashlane](https://www.dashlane.com/) -->
 
 ## Fonts
 
diff --git a/01_grundlagen/uebungen/u38_alte-listen.html b/01_grundlagen/uebungen/u38_alte-listen.html
index 4b2b60e..2f1d06d 100644
--- a/01_grundlagen/uebungen/u38_alte-listen.html
+++ b/01_grundlagen/uebungen/u38_alte-listen.html
@@ -28,10 +28,12 @@
       'use strict';
 
       const productList =
-        '3Doodler 3D Printing Pen, Game of Thrones Wax Seal Coasters, 10th Doctor Sonic Screwdriver Exclusive Programmable TV Remote, 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, 8-Bit Heat-Change Mug';
-
-      const handleCsv = (list) => list.split(', ').sort();
+        '3Doodler 3D Printing Pen,  Game of Thrones Wax Seal Coasters , 10th Doctor Sonic Screwdriver Exclusive Programmable TV Remote, 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, 8-Bit Heat-Change Mug';
 
+      const handleCsv = (list) => {
+        const games = list.split(/\s*,\s*/); // list.split(', ');
+        return games.sort();
+      };
       console.log(handleCsv(productList).join('\n'));
     </script>
   </body>
diff --git a/01_grundlagen/unterricht/tag09/01_str-split.html b/01_grundlagen/unterricht/tag09/01_str-split.html
new file mode 100644
index 0000000..83ef46a
--- /dev/null
+++ b/01_grundlagen/unterricht/tag09/01_str-split.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>String.split()</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>String - str.split()</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/split">
+            str.split()
+          </a>
+          - Die <strong>split()</strong> Methode teilt ein String Objekt in ein Array von Strings auf, indem der String
+          in Teilstrings zerteilt wird, wobei ein angegebenes Trennzeichen verwendet wird, um zu bestimmen, wo die
+          Aufteilung erfolgen soll.
+        </p>
+
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const customersOnline = ['Heribert', 'Max', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus', 'Max'];
+
+      const names = [
+        'Florian', //
+        'Benjamin',
+        'Christian',
+        'Stefan',
+      ];
+
+      const text = 'Ich bin ein Text.';
+
+      // String Methode - str.split('delimiter')
+
+      const words = text.split(' ');
+      console.log(words); // => ['Ich', 'bin', 'ein', 'Text.']
+
+      console.log(names[0].split('')); // => ['F','l','o','r','i','a','n']
+
+      console.log(
+        names[0]
+          .split('') // => ['F','l','o','r','i','a','n']
+          .reverse() // => ['n', 'a', 'i', 'r', 'o', 'l', 'F']
+          .join('') + names[0].length,
+      ); // => nairolF7
+
+      console.log(names[1].split('').reverse().join('') + names[1].length); // => nimajneB8
+      console.log(names[2].split('').reverse().join('') + names[2].length); // => naitsirhC9
+      console.log(names[3].split('').reverse().join('') + names[3].length); // => nafetS6
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag09/02_ar-reverse.html b/01_grundlagen/unterricht/tag09/02_ar-reverse.html
new file mode 100644
index 0000000..e7e50ca
--- /dev/null
+++ b/01_grundlagen/unterricht/tag09/02_ar-reverse.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Array.reverse()</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.reverse()</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse">
+            ar.reverse()
+          </a>
+          - Die Methode von Array Instanzen kehrt ein Array <code>in place</code> um und gibt die Referenz auf dasselbe
+          Array zurück, wobei das erste Array-Element nun zum letzten und das letzte Array-Element zum ersten wird. Mit
+          anderen Worten, die Reihenfolge der Elemente im Array wird in die entgegengesetzte Richtung gedreht.
+        </p>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const customersOnline = ['Heribert', 'Max', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus', 'Max'];
+
+      const names = [
+        'Florian', //
+        'Benjamin',
+        'Christian',
+        'Stefan',
+      ];
+
+      const text = 'Ich bin ein Text.';
+
+      // Array Methode - ar.reverse()
+
+      const namesCopy = [...names];
+
+      const reversedNames = namesCopy.reverse();
+
+      console.log(reversedNames); // =>  ['Stefan', 'Christian', 'Benjamin', 'Florian']
+      console.log(namesCopy); // =>  ['Stefan', 'Christian', 'Benjamin', 'Florian']
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag09/03_ar-to-sorted-to-reversed-to-spliced.html b/01_grundlagen/unterricht/tag09/03_ar-to-sorted-to-reversed-to-spliced.html
new file mode 100644
index 0000000..b3818aa
--- /dev/null
+++ b/01_grundlagen/unterricht/tag09/03_ar-to-sorted-to-reversed-to-spliced.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Array - Neue Methoden seit Juni 2023</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 - Neue Methoden seit Juni 2023</h1>
+        <hr />
+        <h2>Array - ar.toSorted()</h2>
+        <p>
+          Die
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted">
+            toSorted()
+          </a>
+          Methode von Array Instanzen ist die kopierende Version der <code>sort()</code> Methode. Sie gibt ein neues
+          Array mit den Elementen in aufsteigender Reihenfolge zurück.
+        </p>
+        <hr />
+        <h2>Array - ar.toReversed()</h2>
+        <p>
+          Die
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed">
+            toReversed()
+          </a>
+          Methode von Array Instanzen ist das kopierende Gegenstück der <code>reverse()</code> Methode. Sie gibt ein
+          neues Array mit den Elementen in umgekehrter Reihenfolge zurück.
+        </p>
+        <h2>Array - ar.toSpliced()</h2>
+        <p>
+          Die
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced">
+            toSpliced()
+          </a>
+          Methode von Array-Instanzen ist die kopierende Version der <code>splice()</code>-Methode. Sie gibt ein neues
+          Array zurück, bei dem einige Elemente entfernt und/oder an einem bestimmten Index ersetzt wurden.
+        </p>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const customersOnline = ['Heribert', 'Max', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus', 'Max'];
+
+      const names = [
+        'Florian', //
+        'Benjamin',
+        'Christian',
+        'Stefan',
+      ];
+
+      const text = 'Ich bin ein Text.';
+
+      // Array Methode - ar.toSorted()
+
+      console.log(names.toSorted()); // => ['Benjamin', 'Christian', 'Florian', 'Stefan']
+      console.log([...names].sort()); // => ['Benjamin', 'Christian', 'Florian', 'Stefan']
+
+      console.log(names); // => SIDE EFFFECT FREE - angesprochenes Array bleibt unverändert.
+
+      // Array Methode - ar.toReversed()
+
+      console.log(names.toReversed()); // => ['Stefan', 'Christian', 'Benjamin', 'Florian']
+      console.log([...names].reverse());
+
+      console.log(names); // => SIDE EFFFECT FREE - angesprochenes Array bleibt unverändert.
+
+      // Array Methode - ar.toSpliced()
+
+      // [
+      //   'Florian', //
+      //   'Benjamin',
+      //   'Christian',
+      //   'Stefan',
+      // ];
+
+      console.log(names.toSpliced(2, 1, 'Trick')); // Das Array mit seiner Veränderung wird zurückgegeben
+      // => ['Florian', 'Benjamin', 'Trick', 'Stefan']
+
+      const copyNames = [...names];
+      copyNames.splice(2, 1, 'Trick');
+      console.log(copyNames); // => ['Florian', 'Benjamin', 'Trick', 'Stefan']
+
+      console.log(names); // => SIDE EFFFECT FREE - angesprochenes Array bleibt unverändert.
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag09/04_ar-sort-compare-fn.html b/01_grundlagen/unterricht/tag09/04_ar-sort-compare-fn.html
new file mode 100644
index 0000000..001a3d2
--- /dev/null
+++ b/01_grundlagen/unterricht/tag09/04_ar-sort-compare-fn.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Array - ar.sort(compareFn)</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.sort(compareFn)</h1>
+        <hr />
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Bubble-sort-example-300px.gif"
+          alt="Bubble sort"
+          class="img-thumbnail" />
+        <hr />
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">
+            ar.sort(compareFn)
+          </a>
+          - Die <strong>sort()</strong> Methode sortiert die Elemente eines Arrays <code>in-place</code> und gibt das
+          Array zurück. Standardmäßig werden alle Elemente in Strings umgewandelt und dann anhand ihrer UTF-16
+          Codepoints miteinander verglichen.
+        </p>
+        <div class="alert alert-warning">
+          Das angesprochene Array wird durch <code>in-place-mutation</code> ebenfalls sortiert.
+        </div>
+
+        <hr />
+        <h3>Rückgabewerte der Vergleichfunktion:</h3>
+        <ul class="list">
+          <li>Rückgabewert 0: Positionen bleiben stehen</li>
+          <li>Rückgabewert &lt; 0: Positionen bleiben stehen</li>
+          <li>Rückgabewert &gt; 0: Positionen vertauscht</li>
+        </ul>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const lottoNumbers = [16, 10, 2, 12, 1, 33];
+
+      // Array Methode - ar.sort(compareFn)
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag09/05_ar-sort-compare-fn-bsp-admin.html b/01_grundlagen/unterricht/tag09/05_ar-sort-compare-fn-bsp-admin.html
new file mode 100644
index 0000000..02c5415
--- /dev/null
+++ b/01_grundlagen/unterricht/tag09/05_ar-sort-compare-fn-bsp-admin.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>Array - ar.sort(compareFn)</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.sort(compareFn)</h1>
+        <hr />
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Bubble-sort-example-300px.gif"
+          alt="Bubble sort"
+          class="img-thumbnail" />
+        <hr />
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">
+            ar.sort(compareFn)
+          </a>
+          - Die <strong>sort()</strong> Methode sortiert die Elemente eines Arrays <code>in-place</code> und gibt das
+          Array zurück. Standardmäßig werden alle Elemente in Strings umgewandelt und dann anhand ihrer UTF-16
+          Codepoints miteinander verglichen.
+        </p>
+        <div class="alert alert-warning">
+          Das angesprochene Array wird durch <code>in-place-mutation</code> ebenfalls sortiert.
+        </div>
+
+        <hr />
+        <h3>Rückgabewerte der Vergleichfunktion:</h3>
+        <ul class="list">
+          <li>Rückgabewert 0: Positionen bleiben stehen</li>
+          <li>Rückgabewert &lt; 0: Positionen bleiben stehen</li>
+          <li>Rückgabewert &gt; 0: Positionen vertauscht</li>
+        </ul>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const customersOnline = ['Heribert', 'Max', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus', 'Max'];
+
+      const names = [
+        'Florian (Admin)', //
+        'Benjamin',
+        'Christian (Admin)',
+        'Stefan (Admin)',
+        'Philippe',
+        'Kaumon',
+      ];
+
+      const lottoNumbers = [16, 10, 2, 12, 1, 33];
+
+      // Array Methode - ar.sort(compareFn)
+
+      const isAdmin = (name) => name.trim().endsWith('(Admin)');
+
+      console.log(isAdmin(names[0])); //=> true
+      console.log(isAdmin(names[1])); //=> false
+
+      // SESE - Single Entrance Single Exit Principle
+      const sortedNames = [...names].sort((a, b) => {
+        let sortValue = 0;
+
+        // Wenn beide Admins sind, sortieren
+        if (isAdmin(a) && isAdmin(b)) sortValue = a > b ? 1 : -1;
+
+        // Wenn kleinerer Index bereits Admin, Position bleibt bestehen
+        if (isAdmin(a) && sortValue === 0) sortValue = -1;
+
+        // Wenn größerer Index bereits Admin, Position wird vertauscht (rückt vor)
+        if (isAdmin(b) && sortValue === 0) sortValue = 1;
+
+        // Wenn beide keine Admins, dann lexikographische Sortierung
+        if (sortValue === 0) {
+          sortValue = a > b ? 1 : -1;
+        }
+
+        return sortValue;
+      });
+      console.log(sortedNames);
+
+      outputEl.innerHTML = `<ul><li>${sortedNames.join('</li><li>')}</li></ul>`;
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag09/06_ar-map.html b/01_grundlagen/unterricht/tag09/06_ar-map.html
new file mode 100644
index 0000000..4156ed7
--- /dev/null
+++ b/01_grundlagen/unterricht/tag09/06_ar-map.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Array - ar.map()</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.map()</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map">ar.map()</a>
+          - Die <strong>map()</strong> (engl. abbilden) Methode wendet auf jedes Element des Arrays die bereitgestellte
+          Funktion an und gibt das Ergebnis in einem neuen Array zurück. (<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',
+      ];
+
+      // Array Methode - ar.map((currentValue [, index] [, array]) => {...})
+
+      const namesFirstLetter = names.map((name) => {
+        return `${name.charAt(0).toUpperCase()}.`;
+      });
+
+      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;
+        }),
+      ); // => [undefined, undefined,undefined,undefined]
+
+      console.log([1, 2, 3, 4].map(() => 2)); // => [2, 2, 2, 2]
+
+      // ===============================
+      const createPassword = (str = '') => {
+        return `${str.split('').reverse().join('')}${str.length}`;
+      };
+
+      console.log(createPassword('Florian')); // => nairolF7
+      console.log(createPassword('Benjamin')); // => nimajneB8
+
+      const passwords = names.map((name) => {
+        return createPassword(name);
+      });
+
+      const passwords2 = names.map(createPassword); // Funktionsreferenz
+
+      console.log(passwords); // => ['nairolF7', 'nimajneB8', 'naitsirhC9', 'nafetS6', 'eppilihP8', 'nomuaK6']
+      console.log(passwords2); // => ['nairolF7', 'nimajneB8', 'naitsirhC9', 'nafetS6', 'eppilihP8', 'nomuaK6']
+
+      outputEl.textContent = passwords.join(' - ');
+
+      // 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'),
+      );
+    </script>
+  </body>
+</html>