01_grundlagen/unterricht/tag08/13_ar-splice.html

@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Array - ar.splice()</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.splice()</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">
+            ar.splice()
+          </a>
+          - Die <strong>splice()</strong> Methode ändert den Inhalt eines Arrays durch das Entfernen vorhandener
+          Elemente und/oder Hinzufügen neuer Elemente.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
+
+      const names = [
+        'Florian', //
+        'Benjamin',
+        'Christian',
+        'Stefan',
+      ];
+
+      // Array Methode - ar.splice(startIndex [, deleteCount] [, toAddValue, ...toAddValue])
+
+      let cuttedNames;
+      let namesCopy;
+
+      // Mehrere Werte gezielt löschen ==========================
+      console.log('Mehrere Werte gezielt löschen =============');
+
+      // Kopie eines Arrays
+      namesCopy = [...names]; // alternativ names.slice();
+
+      // ar.splice(startIndex, deleteCount)
+      cuttedNames = namesCopy.splice(2, 2);
+
+      console.log(cuttedNames); // => ['Christian', 'Stefan']
+
+      console.log(namesCopy); // => ['Florian', 'Benjamin']
+
+      // Mehrere Werte gezielt ersetzen =====================
+      console.log('Mehrere Werte gezielt ersetzen ===========');
+
+      // Kopie eines Arrays
+      namesCopy = [...names]; // alternativ names.slice();
+
+      cuttedNames = namesCopy.splice(1, 2, 'Jane', 'John');
+
+      console.log(cuttedNames); // => ['Benjamin', 'Christian']
+      console.log(namesCopy); // => ['Florian', 'Jane', 'John', 'Stefan']
+
+      // Mehrere Werte gezielt am Ende hinzufügen =====================
+      console.log('Mehrere Werte am Ende hinzufügen ===========');
+
+      // Kopie eines Arrays
+      namesCopy = [...names]; // alternativ names.slice();
+
+      cuttedNames = namesCopy.splice(namesCopy.length, 0, 'Tick', 'Trick', 'Track');
+
+      console.log(cuttedNames); // => []
+      console.log(namesCopy); // => ['Florian', 'Benjamin', 'Christian', 'Stefan', 'Tick', 'Trick', 'Track']
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag08/14_ar-slice.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Array - ar.slice()</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.slice()</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/slice">
+            ar.slice()
+          </a>
+          - Die <strong>slice()</strong> Methode schreibt eine flache Kopie von einem Teil des Arrays in ein neues
+          Array-Objekt von <code>begin</code> bis <code>end</code> (end nicht enthalten). Das originale Array wird nicht
+          verändert. (<strong>side-effect-free</strong>)
+        </p>
+        <div class="alert alert-danger">side-effect-free</div>
+        <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',
+      ];
+
+      // Array - Methode ar.slice(startIndex [, endIndex])
+      // SIDE-EFFECT-FREE
+
+      const cuttedNames = names.slice(2, 3);
+      const namesCopy = names.slice();
+      console.log(cuttedNames); // => ['Christian']
+
+      console.log(names); // => ['Florian', 'Benjamin', 'Christian', 'Stefan']
+      console.log(namesCopy); // => ['Florian', 'Benjamin', 'Christian', 'Stefan']
+
+      outputEl.textContent = names.join(', ');
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag08/15_ar-sort.html

@@ -0,0 +1,45 @@
+<!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())</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()</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">
+            ar.sort()
+          </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>
+        <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',
+      ];
+
+      // Array - Methode ar.sort()
+      // IN-PLACE-MUTATION
+    </script>
+  </body>
+</html>