2026-09-16 13:52:12 +02:00
parent 2a00da2551
commit 194ef2861f
5 changed files with 260 additions and 0 deletions
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>