Operatoren · Objekte · Arrays · Funktionen

JavaScript Vertiefung

Dozent: Daniel Schlecht
Kurstag 3 – Power of JS Objects

Lernziele 🎯

• Arithmetische, Zuweisungs- & logische Operatoren korrekt einsetzen (K3)
• Mit Objekten in JavaScript arbeiten (K3)
• Werte & Objekte in Arrays verwalten (K3)
• Programme in Funktionen modularisieren (K3)

Operatoren in JavaScript

let x = 10;
let y = 3;

console.log(x + y); // 13
console.log(x - y); // 7
console.log(x * y); // 30
console.log(x / y); // 3.333...
console.log(x % y); // 1
              

let a = 5;
a += 2; // 7
a *= 3; // 21
a -= 1; // 20
console.log(a);
              

Operatoren kombinieren Berechnungen mit logischem Denken.

Logische Operatoren

let userLoggedIn = true;
let hasAccess = false;

console.log(userLoggedIn && hasAccess); // false
console.log(userLoggedIn || hasAccess); // true
console.log(!userLoggedIn);             // false
          

• && → UND
• || → ODER
• ! → NICHT

Übung 1 🧩

Berechne und prüfe verschiedene Werte:

• Erstelle zwei Variablen a und b
• Berechne Summe, Produkt und Modulo
• Gib aus, ob a > b UND a % 2 == 0

let a = 8;
let b = 5;

console.log("Summe:", a + b);
console.log("Produkt:", a * b);
console.log("Ist a größer & gerade?", a > b && a % 2 === 0);
          

JavaScript-Objekte

Objekte speichern Eigenschaften und Werte zusammen – wie reale Dinge mit Merkmalen.

let person = {
  name: "Lena",
  age: 29,
  city: "Zürich"
};

console.log(person.name);
person.age = 30;
console.log(person);
          

Objekte werden mit geschweiften Klammern { } definiert.

Methoden – Funktionen in Objekten

let car = {
  brand: "Tesla",
  model: "Model 3",
  drive: function() {
    console.log("Das Auto fährt...");
  }
};

car.drive();
          

Methoden sind Funktionen innerhalb eines Objekts – sie beschreiben Verhalten.

Übung 2 🧩

Erstelle ein eigenes Objekt:

• Name: deinLieblingstier
• Eigenschaften: art, farbe, alter
• Methode: lautGeben() → gibt ein Geräusch aus

let deinLieblingstier = {
  art: "Hund",
  farbe: "braun",
  alter: 3,
  lautGeben: function() {
    console.log("Wuff!");
  }
};

deinLieblingstier.lautGeben();
          

Arrays (Collections)

Ein Array speichert mehrere Werte in einer Liste.

let fruits = ["Apfel", "Banane", "Kirsche"];

console.log(fruits[0]); // Apfel
fruits.push("Orange");
console.log(fruits.length); // 4
          

Arrays starten bei Index 0 und können Werte oder ganze Objekte enthalten.

Arrays mit Objekten kombinieren

let users = [
  { name: "Lena", age: 30 },
  { name: "Tom", age: 25 }
];

for (let user of users) {
  console.log(user.name + " ist " + user.age + " Jahre alt.");
}
          

So werden Datenkollektionen verwaltet, z. B. in Apps oder Formularen.

Funktionen in JavaScript

Funktionen sind wiederverwendbare Programmteile.

function greet(name) {
  console.log("Hallo, " + name + "!");
}

greet("Sophie");
greet("Max");
          

• Definiert mit function
• Kann Parameter entgegennehmen
• Erhöht Wiederverwendbarkeit und Übersicht

Alternative Syntax: Pfeilfunktionen

const add = (a, b) => a + b;

console.log(add(3, 5)); // 8
          

Besonders nützlich bei kurzen Funktionen.

Übung 3 🧩

Baue kleine, modulare Programme:

• Funktion addiere(a, b) → gibt Summe zurück
• Funktion zeigeNamen(person) → gibt Namen aus
• Funktion durchschnitt(array) → berechnet Durchschnitt

function addiere(a, b) {
  return a + b;
}

function zeigeNamen(p) {
  console.log("Name:", p.name);
}

function durchschnitt(zahlen) {
  let sum = 0;
  for (let z of zahlen) sum += z;
  return sum / zahlen.length;
}

console.log(addiere(5, 7));
zeigeNamen({ name: "Alex" });
console.log(durchschnitt([2, 4, 6]));
          

Zusammenfassung

• Operatoren = Grundlage aller Berechnungen
• Objekte strukturieren Daten mit Eigenschaften & Verhalten
• Arrays speichern mehrere Werte oder Objekte
• Funktionen machen Programme modular & wartbar

Nächste Sitzung

Thema: DOM – JavaScript trifft HTML

Wir lernen, wie JS direkt mit Webseiten-Elementen interagiert (z. B. Klicks, Eingaben, Manipulation).

Fragen?

Was hat heute Klick gemacht? Wer zeigt sein Objekt- oder Array-Beispiel?