06 – Arrays 📋

🎯 1. Was ist ein Array?

Ein Array ist eine geordnete Liste von Werten. Jeder Wert („Element“) hat eine feste Position (Index) – beginnend bei 0!

📊 2. Übersicht: Array-Grundlagen

🎯 3. Einleitung & W3Schools

Arrays sind der erste Schritt zu strukturierten Daten – ohne sie müsstest du hunderte Einzelvariablen erstellen! Sie bilden die Grundlage für Listen, Tabellen und komplexe Datenstrukturen.

🔗 W3Schools – JavaScript Arrays

🧠 4. KI-Prompt-Training

Aufgabe: Formuliere einen Prompt, mit dem du KI um Hilfe bitten würdest, um zu erklären, warum der Array-Index bei 0 beginnt – und wie man mit push, pop, unshift, shift ein Array verändern kann.

🔖 5. Array erstellen und auf Elemente zugreifen

Arrays speichern mehrere Werte in einer Variable. Der Zugriff erfolgt über den Index (Position).

function demoArrayGrundlagen() {
  const farben = ["rot", "grün", "blau"];
  const ersteFarbe = farben[0];   // Index 0 → erstes Element!
  const letzteFarbe = farben[2];  // Index 2 → drittes Element

  farben[1] = "gelb"; // Ändere das zweite Element

  document.getElementById("ausgabe-array-grund").innerHTML = 
    `<p>Array: [<em>"${farben.join('", "')}"}</em>]</p>
     <p>Erste Farbe (Index 0): <strong>${ersteFarbe}</strong></p>
     <p>Letzte Farbe (Index 2): <strong>${letzteFarbe}</strong></p>
     <p>Nach Änderung: [<em>"${farben.join('", "')}"}</em>]</p>`;
}

🛠️ 6. Häufig genutzte Array-Methoden

JavaScript bietet praktische Methoden, um Arrays zu verändern:

• .push() → Element am Ende hinzufügen
• .pop() → Letztes Element entfernen und zurückgeben
• .unshift() → Element am Anfang hinzufügen
• .shift() → Erstes Element entfernen und zurückgeben

function demoArrayMethoden() {
  let liste = ["Anna", "Ben"];
  
  liste.push("Chloé");     // hinten anhängen
  liste.unshift("David");  // vorne einfügen
  const letzter = liste.pop(); // letztes Element entfernen

  document.getElementById("ausgabe-array-methoden").innerHTML = 
    `<p>Start: ["Anna", "Ben"]</p>
     <p>Nach .push("Chloé"): [<em>"${liste.join('", "')}"}</em>]</p>
     <p>Nach .unshift("David"): [<em>"${liste.join('", "')}"}</em>]</p>
     <p>.pop() → entfernt: <strong>${letzter}</strong></p>
     <p>Endstand: [<em>"${liste.join('", "')}"}</em>]</p>`;
}

🔁 7. Arrays mit Schleifen durchlaufen

Mit einer for-Schleife kannst du jedes Element bearbeiten – besonders nützlich für Berechnungen oder Ausgaben.

function demoArraySchleife() {
  const tiere = ["Hund", "Katze", "Vogel"];
  let ausgabe = "<ul>";
  
  for (let i = 0; i < tiere.length; i++) {
    ausgabe += `<li>Index ${i}: ${tiere[i]}</li>`;
  }
  ausgabe += "</ul>";

  document.getElementById("ausgabe-array-schleife").innerHTML = ausgabe;
}

📊 8. Praxis: Durchschnitt einer Notenliste

Arrays machen statistische Berechnungen einfach – wie den Durchschnitt einer Notenliste.

function demoNotenDurchschnitt() {
  const noten = [2, 3, 1, 4, 2];
  let summe = 0;
  
  for (let i = 0; i < noten.length; i++) {
    summe += noten[i];
  }
  const durchschnitt = (summe / noten.length).toFixed(2);

  document.getElementById("ausgabe-noten").innerHTML = 
    `<p>Noten: [<em>${noten.join(", ")}</em>]</p>
     <p>Summe: ${summe}</p>
     <p>Durchschnitt: <strong>${durchschnitt}</strong></p>`;
}