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

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Array - ar.sort())</title>
+    <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>
@@ -38,8 +38,20 @@
         'Stefan',
       ];
 
+      const numbers = [1, 28, 44, 3, 8, 38];
+
       // Array - Methode ar.sort()
       // IN-PLACE-MUTATION
+
+      const namesCopy = [...names];
+
+      const namesSorted = namesCopy.sort();
+
+      console.log(namesSorted); // => ['Benjamin', 'Christian', 'Florian', 'Stefan']
+      console.log(namesCopy); // => ['Benjamin', 'Christian', 'Florian', 'Stefan']
+
+      // Lexikographische Sortierung
+      console.log(numbers.sort()); // => [1, 28, 3, 38, 44, 8]
     </script>
   </body>
 </html>

01_grundlagen/unterricht/tag08/16_ar-index-of-last-index-of.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Array - ar.indexOf() - ar.lastIndexOf()</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.indexOf() - ar.lastIndexOf()</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf">
+            ar.indexOf()
+          </a>
+          - Die Methode <strong>indexOf()</strong> gibt den Index zurück, an dem ein bestimmtes Element im Array zum
+          ersten Mal auftritt oder <code>-1</code> wenn es nicht vorhanden ist.
+        </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 numbers = [1, 28, 44, 3, 8, 38];
+
+      // Array - Methode ar.indexOf()
+
+      console.log(names.indexOf('Benjamin')); //=> 1
+      console.log(names.indexOf('Stefan')); //=> 3
+
+      console.log(names.lastIndexOf('Stefan')); //=> 3
+
+      console.log(customersOnline.indexOf('Max')); //=> 1
+      console.log(customersOnline.lastIndexOf('Max')); //=> 6
+
+      console.log(names.indexOf('Philippe')); //=> -1
+      console.log(names.indexOf('X')); //=> -1
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag08/17_ar-join.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.join()</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.join()</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/join">
+            ar.join()
+          </a>
+          - Die <code>join()</code> Methode von Array Instanzen erstellt und gibt einen neuen String zurück, indem alle
+          Elemente in diesem Array verkettet werden, getrennt durch Kommas oder einem angegebenen Trennzeichen-String.
+          Wenn das Array nur ein Element hat, wird dieses Element ohne Verwendung des Trennzeichens zurückgegeben.
+        </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 numbers = [1, 28, 44, 3, 8, 38];
+
+      // Array - Methode ar.join(delimiter)
+
+      console.log(names.join(', ')); // => Florian, Benjamin, Christian, Stefan
+      console.log(names.join(' - ')); // => Florian - Benjamin - Christian - Stefan
+
+      console.log(names.join()); // => Florian,Benjamin,Christian,Stefan
+      console.log(names.toString()); // => Florian,Benjamin,Christian,Stefan
+
+      outputEl.innerHTML = `<ol type="a"><li>${names.join('</li><li>')}</li></ol>`;
+    </script>
+  </body>
+</html>