4. Unterrichtsblock

Objekte

• Objekt
• Objekt-Eigenschaften
• Objekt-Methoden

Objekte, Eigenschaften und Methoden im Alltag

In unserem Alltag bezeichnen wir z.B. ein Auto als ein Objekt. Ein Auto hat Eigenschaften wie Gewicht und Farbe und Methoden wie Start und Stopp:

Objekt	Eigenschaften (Properties)	Methoden
	auto.name = BMW auto.modell = 3er auto.gewicht = 1600 kg auto.farbe = schwarz	auto.start() auto.beschleunigen() auto.bremsen() auto.stopp()

Alle Autos haben die gleichen Eigenschaften, aber die Eigenschaftswerte unterscheiden sich von Auto zu Auto. Alle Autos haben auch die gleichen Methoden, aber die Methoden werden zu unterschiedlichen Zeiten durchgeführt.

JavaScript Objekte

Sie haben bereits gelernt, dass JavaScript-Variablen Speicherorte für Daten bzw. "Werte" sind. Dieser Code weist einer Variablen namens "auto" einen einfachen Wert (BMW) zu:

let auto = "BMW";

Auch Objekte sind Variablen. Aber Objekte können viele Werte enthalten. Man könnte auch sagen, dass Objekte erweiterte Variablen sind. Dieser Code weist einer Variablen namens "auto" mehrere Werte (BMW, 3er, schwarz) zu:

const auto = {marke:"BMW", modell:"3er", farbe:"weiss"};

/*
  Die Werte in Objekten werden als name:"wert"-Paare geschrieben (Name und Wert werden dabei durch einen Doppelpunkt getrennt).
  Es ist üblich, Objekte mit dem Schlüsselwort "const" zu deklarieren.
*/ 


// DEKLARATION
const testPerson = {vorName:"Thomas", familienName:"Müller", alter:50, augenFarbe:"blau"};


const testPerson = {
  vorName:"Thomas",
  familienName:"Müller",  // Eigenschaft: familienName  // Wert: Müller
  alter:50,               // Eigenschaft: alter         // Wert: 50
  augenFarbe:"blau"
};

Objekteigenschaften (Properties)

Die name:wert Paare in JavaScript Objekten werden Eigenschaften (Properties) genannt:

Eigenschaft (Propertie)	Wert
vorName	Thomas
familienName	Müller
alter	50
augenFarbe	blau

Zugriff auf Objekteigenschaften

Sie können auf zwei Arten auf Objekteigenschaften zugreifen:

// Zugriff über einen Punkt
objektName.eigenschaftName;

testPerson.vorName;


// Zugriff über Eckige Klammern
objektName["eigenschaftName"];

testPerson["vorName"];

Name: Wie heißt die Testperson?

Alter: Wie alt ist die Testperson?

Gib den Namen aus Gib das Alter aus

Arrays

Ein Array ist eine spezielle Variable, die mehr als einen Wert enthalten kann.

Warum werden Arrays verwendet?

Wenn Sie eine Liste von Elementen haben (z. B. eine Liste mit Autonamen), könnte das Speichern der Autos in einzelnen Variablen wie folgt aussehen:

let auto1 = "Saab";
let auto2 = "Volvo";
let auto3 = "BMW";

Was aber, wenn Sie die Liste an Autos filtern wollen und ein bestimmtes Auto finden möchten? Und was wäre, wenn Sie nicht 3 Autos, sondern 300 hätten? Die Lösung ist ein Array! Ein Array kann viele Werte unter einem einzigen Namen enthalten, und Sie können auf die Werte zugreifen, indem Sie auf eine Indexnummer verweisen.

const autos = ["Saab", "Volvo", "BMW"];

Erstellung eines Arrays

// Die Verwendung eines Array-Literals ist die einfachste Möglichkeit, ein JavaScript-Array zu erstellen.
const array_name = [inhalt1, inhalt2, ...]; 

// Leerzeichen und Zeilenumbrüche sind nicht wichtig. Eine Deklaration kann mehrere Zeilen umfassen:
const autos = [
  "Saab",
  "Volvo",
  "BMW"
];


// Sie können auch ein Array erstellen und dann die Elemente bereitstellen:
const autos = [];
autos[0]= "Saab";
autos[1]= "Volvo";
autos[2]= "BMW";


// Das folgende Beispiel erstellt ebenfalls ein Array und weist ihm Werte zu:
const autos = new Array("Saab", "Volvo", "BMW"); 


// FEHLERQUELLE bei lediglich einem Wert
const punkte = [40];            // Erstellt ein Array mit dem Wert "40"
const punkte = new Array(40);   // Erstellt ein Array mit 40 undefinierten Werten 

Zugriff auf Array-Elemente

Sie greifen auf ein Array-Element zu, indem Sie sich auf die Indexnummer beziehen.

• Ein Array-Index beginnt bei 0.
• [0] ist das erste Element.
• [1] ist das zweite Element usw.

// Zugriff auf das erste Array-Element
const autos = ["Saab", "Volvo", "BMW"];
let auto = autos[0];

Mit JavaScript kann auf das vollständige Array zugegriffen werden, indem auf den Array-Namen verwiesen wird:

const autos = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = autos;

Ändern von Array-Elementen

Diese Anweisung ändert den Wert des ersten Elements in Autos:

const autos = ["Saab", "Volvo", "BMW"];
autos[0] = "Opel";

Unterschied zwischen Arrays und Objekten

Arrays sind "eigentlich" Objekte bzw. eine spezielle Art von Objekten. Der typeof-Operator in JavaScript gibt "object" für Arrays zurück.
JavaScript-Arrays lassen sich jedoch am besten als "Arrays" beschreiben.

// Arrays verwenden Zahlen, um auf ihre "Elemente" zuzugreifen. In diesem Beispiel gibt person[0] Thomas zurück:
const person = ["Thomas", "Müller", 46];

// Objekte verwenden Namen, um auf ihre "Elemente" zuzugreifen. 
const person = {vorName:"Thomas", nachName:"Müller", alter:46};

Wann verwendet man Arrays und wann verwendet man Objekte?

• Sie sollten Objekte verwenden, wenn die Elementnamen Zeichenfolgen (Text) sein sollen.
• Sie sollten Arrays verwenden, wenn die Elementnamen Zahlen sein sollen.

Erkennung von Arrays

Woher weiß man, ob eine Variable ein Array ist? Das Problem ist, dass der JavaScript-Operator typeof "object" zurückgibt:

// Gibt "objekt" zurück
const obst = ["Banane", "Orange", "Apfel"];
let type = typeof obst;


// 1. Lösung: Die Methode Array.isArray() 
Array.isArray(obst);        // Gibt "true" aus

// 2. Lösung: der instanceof Operator
const obst = ["Banane", "Orange", "Apfel"];
obst instanceof Array;      // Gibt "true" aus

Hinzufügen von Array-Elementen

/* push() Methode
   Der einfachste Weg, ein neues Element zu einem Array hinzuzufügen, 
   ist die Verwendung der Methode push():
*/
const obst = ["Banane", "Orange", "Apfel"];
obst.push("Zitrone");  // Fügt das Element (Zitrone) zu Obst hinzu 


/*
Ein neues Element kann auch mit der Eigenschaft "length" zu einem Array hinzugefügt werden:
*/
const obst = ["Banane", "Orange", "Apfel"];
obst[obst.length] = "Zitrone";  // Fügt "Zitrone" zu Früchten hinzu


// Die Zuweisung kann auch durch eine absolute Deklaration erfolgen
const obst = ["Banane", "Orange", "Apfel"];
obst[6] = "Zitrone";  // Generiert "undefined-Löcher" in obst

Assioziative Arrays

Viele Programmiersprachen unterstützen Arrays mit benannten Indizes. Arrays mit benannten Indizes werden als "assoziative Arrays" (oder Hashes) bezeichnet. JavaScript unterstützt keine Arrays mit benannten Indizes. In JavaScript verwenden Arrays immer nummerierte Indizes.

// Korrekte Benennung eines Array-Indexes
const person = [];
person[0] = "Thomas";
person[1] = "Müller";
person[2] = 46;
person.length;    // Gibt 3 aus
person[0];        // Gibt "Thomas" aus 


/*
Wenn Sie benannte Indizes verwenden, definiert JavaScript das ARRAY in ein OBJEKT um.
Danach führen einige Array-Methoden und -Eigenschaften zu falschen Ergebnissen.
*/

// Fehlerhafte Benennung eines Array-Indexes
const person = [];
person["vorName"] = "Thomas";
person["nachName"] = "Müller";
person["alter"] = 46;
person.length;     // Gibt 0 aus
person[0];         // Gibt undefined aus

Arrays können Funktionen, Objekte und weitere Arrays beinhalten

JavaScript-Variablen können Objekte sein. Arrays sind spezielle Arten von Objekten. Aus diesem Grund können Sie Variablen unterschiedlichen Typs im selben Array speichern.

• Man kann Objekte in einem Array haben
• Man kann Funktionen in einem Array haben.
• Man kann Arrays in einem Array haben.

// Beispiel eines Arrays mit einer Funktion, einem Objekt und einem weiteren Array

const beispielArray = [
  "Kartoffel",
  "Kürbis",
 
  // FUNKTION
  rechnung(),

  // OBJEKT
  beispielObjekt = {
    vorName: "Thomas",
    nachName: "Müller",
    alter: 46
    },

   // ARRAY
   weiteresArray = [
     "Äpfel",
     "Birnen",
     "Pflaumen"
   ]

];
  

// Externe Funktion
function rechnung() {
  return 5 + 4;
}

Übungsaufgaben

• Erstelle eine Funktion, die auf Knopfdruck einem Array "europaeischeLaender" die Werte "Deutschland", "Spanien" und "Frankreich" hinzufügt
• Baue in das o.g. Array ein Objekt "staedte" ein und füge diesem Objekt die Eigenschaften "name", "einwohnerzahl" und "land" sowie passende Werte hinzu
• Gib auf Knopfdruck einen der Werte aus dem Array und einen der Werte aus dem Objekt aus.

Lösungen

4-unterricht.html