6. Unterrichtsblock: Objekte und Events

JavaScript Logo

Kursinhalte

Heute lernst du, Daten zu Dingen zusammenzufassen (Objekte) und deine Seite auf Klicks und Eingaben reagieren zu lassen (Events). Am Ende baust du ein kleines Widget, das anzeigt, ob ein Geschäft gerade geöffnet hat. Arbeite weiter in deinem js-projekt.

Objekte: Werte, die zusammengehören

Ein Objekt fasst mehrere Werte zu einer Sache zusammen. Jeder Wert hat einen Namen, die Eigenschaft. Ein Objekt schreibst du in geschweiften Klammern mit Paaren aus name: wert.

const person = {
  vorname: "Lina",
  nachname: "Müller",
  alter: 17
};

console.log(person.vorname);        // Punkt-Schreibweise
console.log(person["alter"]);       // Klammer-Schreibweise

person.alter = 18;                  // Eigenschaft ändern
person.stadt = "Rosenheim";         // Eigenschaft hinzufügen
console.log(person);
Ausgabe in der Konsole
Lina
17
{vorname: ‚Lina‘, nachname: ‚Müller‘, alter: 18, stadt: ‚Rosenheim‘}
Merke: Wie bei Arrays gilt: Ein Objekt mit const darfst du verändern (Eigenschaften ändern oder hinzufügen), aber nicht komplett durch ein neues Objekt ersetzen.
Ergebnis im Browser
Lina, 17 Jahre  

Methoden: Funktionen im Objekt

Ein Objekt kann auch Funktionen enthalten. Man nennt sie Methoden. Mit this greift die Methode auf das eigene Objekt zu: this.vorname heißt „der Vorname dieses Objekts“.

const person = {
  vorname: "Lina",
  nachname: "Müller",
  vollerName: function () {
    return this.vorname + " " + this.nachname;
  }
};

console.log(person.vollerName());     // Lina Müller
Ausgabe in der Konsole
Lina Müller

Objekte und Arrays kannst du kombinieren. So entsteht eine Liste von Dingen mit jeweils eigenen Eigenschaften:

const personen = [
  { vorname: "Lina", alter: 17 },
  { vorname: "Max", alter: 19 }
];

console.log(personen[1].vorname);     // Max

Aufgabe 1 – Lebensmittel

Zeit: ca. 5 Minuten

  1. Lege ein Objekt lebensmittel mit den Eigenschaften name, preis, herkunft und kategorie an und denke dir Werte aus.
  2. Gib Preis und Name mit der Punkt-Schreibweise aus und die Herkunft mit der Klammer-Schreibweise.
  3. Ändere den Preis und füge eine neue Eigenschaft bio mit true hinzu.

Aufgabe 2 – Methode

Zeit: ca. 10 Minuten

  1. Ergänze dein Objekt um die Methode beschreibung(), die mit this einen Satz zurückgibt, zum Beispiel „Apfel aus Bayern, 0.5 Euro“.
  2. Rufe die Methode auf und gib das Ergebnis auf der Seite aus.

Events: Die Seite reagiert

Ein Event (Ereignis) ist etwas, das auf der Seite passiert: ein Klick, eine Eingabe, ein Tastendruck. Du sagst dem Browser, welche Funktion dann laufen soll. Den Weg mit onclick im HTML-Tag kennst du schon. Sauberer ist es, JavaScript und HTML zu trennen und die Funktion in app.js mit addEventListener zu verbinden.

<button id="knopf">Klick mich</button>
<p id="ausgabe"></p>
const knopf = document.getElementById("knopf");

function gruessen() {
  document.getElementById("ausgabe").innerHTML = "Hallo!";
}

knopf.addEventListener("click", gruessen);   // gruessen ohne Klammern!
Ergebnis im Browser
Merke: Bei addEventListener schreibst du den Ereignisnamen ohne „on“: "click" statt onclick. Die Funktion übergibst du ohne Klammern. Mit Klammern würde sie sofort ausgeführt, nicht erst beim Klick.

Die Funktion darf auch direkt dabeistehen (namenlos):

knopf.addEventListener("click", function () {
  document.getElementById("ausgabe").innerHTML = "Noch einmal hallo!";
});
EventWann es passiert
"click"Klick auf das Element
"mouseover"Maus fährt über das Element
"mouseout"Maus verlässt das Element
"input"Jede Änderung in einem Eingabefeld, während man tippt
"change"Ein Feld wurde geändert und verlassen
"keydown"Eine Taste wird gedrückt
"load"Die Seite ist fertig geladen

Bewege die Maus über das Feld und klicke darauf:

Ergebnis im Browser
Fahre mit der Maus über mich

Aufgabe 3 – Farbwechsel

Zeit: ca. 10 Minuten

  1. Baue eine rote Fläche (div) mit weißer Schrift und einen Button.
  2. Verbinde mit addEventListener den Button mit einer Funktion, die die Fläche blau färbt (style.backgroundColor) und den Text in der Fläche ändert.

Aufgabe 4 – Live-Vorschau

Zeit: ca. 5 Minuten

  1. Baue ein Eingabefeld und einen leeren Absatz.
  2. Verwende das Event "input", damit der Absatz bei jedem Tastendruck den eingegebenen Text anzeigt.
  3. Tipp: Den Text eines Feldes liest du mit feld.value.

Datum und Uhrzeit

Mit dem Objekt Date fragst du die aktuelle Zeit vom Gerät ab.

const jetzt = new Date();

console.log(jetzt.getHours());     // Stunde, 0 bis 23
console.log(jetzt.getMinutes());   // Minute, 0 bis 59
console.log(jetzt.getDay());       // Wochentag: 0 = Sonntag, 1 = Montag ... 6 = Samstag
Ergebnis im Browser

Merke: getDay() beginnt bei Sonntag = 0. Der Montag ist also 1, der Samstag 6.

Abschlussaufgaben

Jetzt wird es anspruchsvoller. Nimm dir Zeit, es müssen nicht alle Aufgaben geschafft werden.

Aufgabe 5 – Öffnungszeiten-Widget

Zeit: ca. 20 Minuten

Baue ein Widget, das anzeigt, ob ein Geschäft gerade geöffnet hat.

  1. Lege ein Objekt oeffnung mit den Eigenschaften von (9) und bis (18) an.
  2. Schreibe eine Funktion istGeoeffnet(), die mit new Date().getHours() prüft, ob die aktuelle Stunde zwischen von und bis liegt, und true oder false zurückgibt.
  3. Verbinde mit addEventListener einen Button „Jetzt prüfen“, der „Geöffnet“ (grüne Schrift) oder „Geschlossen“ (rote Schrift) anzeigt.
  4. Gestalte das Widget mit CSS: grüner Hintergrund bei „Geöffnet“, gelber bei „Geschlossen“.

Zusatz: Am Wochenende (getDay() ist 0 oder 6) ist immer geschlossen. Lege außerdem ein Array feiertage mit Datumsangaben an.

Aufgabe 6 – Warenkorb-Objekt

Zeit: ca. 15 Minuten

Baue einen Warenkorb als ein Objekt, das seine Daten und sein Verhalten enthält.

  1. Lege ein Objekt warenkorb mit der Eigenschaft summe (0) und der Eigenschaft artikel (leeres Array) an.
  2. Schreibe eine Methode hinzufuegen(name, preis), die den Artikel ins Array legt und den Preis zur summe addiert. Verwende this.
  3. Schreibe eine Methode zeige(), die Artikelliste (join) und Summe als Text zurückgibt.
  4. Baue zwei Eingabefelder und einen Button „Hinzufügen“, der die Methode aufruft und die Anzeige aktualisiert.

Denkaufgabe: Warum funktioniert es nicht, wenn du in hinzufuegen statt this.summe nur summe schreibst?

Kurz zusammengefasst

Objekte bündeln Eigenschaften und Methoden, this meint das eigene Objekt. Events lassen die Seite auf Klicks und Eingaben reagieren, sauber verbunden mit addEventListener. Mit Date fragst du Uhrzeit und Wochentag ab.