01_grundlagen/unterricht/tag08/08_array-object.html

@@ -0,0 +1,82 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Array Object</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 Object</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array">Array Object</a>
+          - Das JavaScript-Array ist ein globales Objekt und Konstruktor für das Erstellen von Arrays, welche
+          listenähnliche Objekte sind.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
+
+      const names = [
+        'Florian', //
+        'Benjamin',
+        'Christian',
+        'Stefan',
+      ];
+
+      //  names = 'Wert'; // Uncaught TypeError: Assignment to constant variable.
+
+      const mixedArray = [
+        'Max', //
+        33,
+        true,
+        ['Tennis', 'Netflix'],
+        'Jane',
+        24,
+        false,
+        ['Schwimmen', 'Boxen'],
+      ];
+
+      // Indexoperator []
+      console.log(mixedArray[0]); // => 'Max'
+      console.log(mixedArray[1]); // => 33
+      console.log(mixedArray[3]); // => ['Tennis', 'Netflix']
+      console.log(mixedArray[3][1]); // => 'Netflix'
+
+      const trainerArray = []; // leeres Array
+      trainerArray[0] = 'Elmar';
+      trainerArray[1] = 'Martin';
+      trainerArray[2] = 'Sonja';
+      trainerArray[3] = 'Philippe';
+
+      trainerArray[7] = 'Kaumon';
+
+      console.log(trainerArray); // =>   ['Elmar', 'Martin', 'Sonja', 'Philippe', empty × 3, 'Kaumon']
+
+      // Sonderfall: Array über Konstruktor-Objekt erstellen
+      const lottoNumbers = new Array(6); // => [empty,empty,empty,empty,empty,empty]
+      lottoNumbers.fill(0); //=> [0,0,0,0,0,0]
+
+      // Array - Eigenschaft length
+
+      console.log(names.length); // => 4
+      console.log(lottoNumbers.length); // => 6
+      console.log(trainerArray.length); // => 8
+
+      console.log(typeof names); // => 'object' vom Typ Array
+      console.log(Object.prototype.toString.call(names)); // => [object Array]
+      console.log(Array.isArray(names)); // => true
+
+      // console.log([1, 2, 3] === [1, 2, 3]); // => false
+      // console.log([] === []); // => false
+
+      console.log([1, 2, 3].toString() === [1, 2, 3].toString()); // => true
+      console.log([1, 2, 3].toString() === [1, '2', 3].toString()); // => true
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag08/09_ar-push.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Array - ar.push()</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.push()</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/push">
+            ar.push()
+          </a>
+          - Die <strong>push()</strong> Methode fügt ein oder mehrere Elemente am Ende eines Arrays hinzu und gibt die
+          neue Länge des Arrays zurück.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
+
+      const names = [
+        'Florian', //
+        'Benjamin',
+        'Christian',
+        'Stefan',
+      ];
+
+      // Array Methode - ar.push(entry [, ...entries])
+
+      names.push('Philippe');
+
+      console.log(names); // => ['Florian', 'Benjamin', 'Christian', 'Stefan', 'Philippe']
+
+      const namesAmount = names.push('Tick', 'Trick', 'Track');
+
+      console.log(namesAmount); // => 8
+      console.log(names.length); // => 8
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag08/10_ar-pop.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Array - ar.pop()</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.pop()</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">
+            ar.pop()
+          </a>
+          - Die <strong>pop()</strong> Methode entfernt das <strong>letzte</strong> Element eines Arrays und gibt dieses
+          zurück. Diese Methode ändert die Länge des Arrays.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
+
+      const names = [
+        'Florian', //
+        'Benjamin',
+        'Christian',
+        'Stefan',
+      ];
+
+      // Array Methode - ar.pop()
+
+      const lastEntry = names.pop();
+
+      console.log(lastEntry); // => 'Stefan'
+      console.log(names); // => ['Florian', 'Benjamin', 'Christian']
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag08/11_ar-unshift.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Array - ar.unshift()</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.unshift()</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift">
+            ar.unshift()
+          </a>
+          - Die <strong>unshift()</strong> Methode fügt ein oder mehrere Elemente am Anfang eines Arrays hinzu und gibt
+          die neue Länge des Arrays zurück.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
+
+      const names = [
+        'Florian', //
+        'Benjamin',
+        'Christian',
+        'Stefan',
+      ];
+
+      // Array Methode - ar.unshift(entry [, ...entries])
+
+      names.unshift('Philippe');
+
+      console.log(names); // => ['Philippe', 'Florian', 'Benjamin', 'Christian', 'Stefan' ]
+
+      const namesAmount = names.unshift('Tick', 'Trick', 'Track');
+
+      console.log(names); // => ['Tick', 'Trick', 'Track', Philippe', 'Florian', 'Benjamin', 'Christian', 'Stefan' ]
+
+      console.log(namesAmount); // => 8
+      console.log(names.length); // => 8
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag08/12_ar-shift.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Array - ar.shift()</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.shift()</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/shift">
+            ar.shift()
+          </a>
+          - Die <strong>shift()</strong> Methode entfernt das <strong>erste</strong> Element eines Arrays und gibt
+          dieses zurück. Diese Methode ändert die Länge des Arrays.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
+
+      const names = [
+        'Florian', //
+        'Benjamin',
+        'Christian',
+        'Stefan',
+      ];
+
+      // Array Methode - ar.shift()
+
+      const firstEntry = names.shift();
+
+      console.log(firstEntry); // => 'Florian'
+      console.log(names); // => ['Benjamin', 'Christian', 'Stefan']
+    </script>
+  </body>
+</html>