08 – Objekte 🧱

Daten und Verhalten kombinieren – der Weg zur objektorientierten Programmierung

🎯 1. Was ist ein Objekt?

Ein Objekt fasst verschiedene Informationen über ein „Ding“ zusammen – wie eine digitale Visitenkarte. Es besteht aus Eigenschaften (Daten) und Methoden (Funktionen).

📊 2. Übersicht: Objekt-Grundlagen

Konzept	Beispiel	Beschreibung
Erstellen	`const auto = { marke: "Tesla" };`	Geschweifte Klammern `{}` – Schlüssel-Wert-Paare
Zugriff	`auto.marke` → `"Tesla"`	Punktnotation – klar und lesbar
Ändern	`auto.farbe = "blau";`	Neue Eigenschaft hinzufügen oder bestehende ändern
Methode	`auto.fahren = function() { ... };`	Funktion als Eigenschaft – „Verhalten“ des Objekts

🎯 3. Einleitung & W3Schools

Objekte sind der Schlüssel zu strukturierten, wartbaren Programmen. Sie bilden die Grundlage der objektorientierten Programmierung (OOP).

🔗 W3Schools – JavaScript Objects

🧠 4. KI-Prompt-Training

Aufgabe: Formuliere einen Prompt, mit dem du KI um Hilfe bitten würdest, um zu erklären, wann man ein Array und wann ein Objekt verwendet – und wie man eine Methode in einem Objekt definiert, die auf andere Eigenschaften zugreift.

🔖 5. Objekt erstellen – mit Eigenschaften

Ein Objekt besteht aus Schlüssel-Wert-Paaren – der Schlüssel ist der Name der Eigenschaft, der Wert ihr Inhalt.

const schueler = {
  name: "Anna",
  alter: 16,
  klasse: "2AIT",
  noten: [2, 3, 1]
};

document.getElementById("ausgabe-objekt").innerHTML = 
  `<p>Name: <strong>${schueler.name}</strong></p>
   <p>Alter: ${schueler.alter}</p>
   <p>Klasse: ${schueler.klasse}</p>
   <p>Noten: [${schueler.noten.join(", ")}]</p>`;

🔄 6. Eigenschaften lesen, ändern und hinzufügen

Objekte sind dynamisch – du kannst Eigenschaften jederzeit ändern oder neue hinzufügen.

function demoEigenschaften() {
  const auto = { marke: "Tesla", farbe: "rot" };
  
  auto.farbe = "blau";           // existierende Eigenschaft ändern
  auto.baujahr = 2023;           // neue Eigenschaft hinzufügen
  auto.fahren = function() {     // Methode hinzufügen
    return "Brummm! 🚗";
  };

  document.getElementById("ausgabe-eigenschaften").innerHTML = 
    `<p>Marke: ${auto.marke}</p>
     <p>Farbe: <strong>${auto.farbe}</strong> (geändert)</p>
     <p>Baujahr: ${auto.baujahr} (neu hinzugefügt)</p>
     <p>${auto.fahren()}</p>`;
}

⚙️ 7. Methoden – das „Verhalten“ eines Objekts

Eine Methode ist eine Funktion, die zu einem Objekt gehört. Mit this greifst du auf andere Eigenschaften desselben Objekts zu.

const rechteck = {
  breite: 5,
  hoehe: 3,
  flaeche: function() {
    return this.breite * this.hoehe; // „this“ = dieses Objekt
  },
  info: function() {
    return `Rechteck ${this.breite}×${this.hoehe} = ${this.flaeche()} cm²`;
  }
};

function demoMethoden() {
  document.getElementById("ausgabe-methoden").innerHTML = 
    `<p>${rechteck.info()}</p>`;
}

💡 8. Wann Array – wann Objekt?

Array	Objekt
Geordnete Liste gleichartiger Elemente	Sammlung unterschiedlicher Eigenschaften
`["rot", "grün", "blau"]`	`{ name: "Anna", alter: 16 }`
Zugriff per Index (0, 1, 2…)	Zugriff per Name (`.name`)

✅ Oft: Arrays von Objekten! Beispiel: [ {name:"Anna"}, {name:"Ben"} ]

🎓 9. Praxis: Schüler-Objekt mit Durchschnittsmethode

Kombiniere Arrays und Objekte – um komplexe Daten zu verwalten.

const schueler = {
  name: "Ben",
  noten: [2, 3, 1, 4],
  berechneDurchschnitt: function() {
    let summe = 0;
    for (let i = 0; i < this.noten.length; i++) {
      summe += this.noten[i];
    }
    return (summe / this.noten.length).toFixed(2);
  },
  info: function() {
    return `${this.name} hat einen Notendurchschnitt von ${this.berechneDurchschnitt()}.`;
  }
};

function demoSchuelerObjekt() {
  document.getElementById("ausgabe-schueler").innerHTML = 
    `<p>${schueler.info()}</p>`;
}