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

Lösung: Übung 1 🧩

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);
          

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 2 🧩

Baue kleine, modulare Programme:

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

Lösung: Übung 2 🧩

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

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

console.log(addiere(5, 7));
zeigeNamen({ name: "Alex" });
          

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 3 🧩

Erstelle ein eigenes Objekt:

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

Lösung: Übung 3 🧩

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.

Übung 4 🧩

Baue kleine, modulare Programme:

• Funktion durchschnitt(array) → berechnet Durchschnitt

Lösung: Übung 4 🧩

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

console.log(durchschnitt([2, 4, 6]));
          

DOM - Das Document Object Model

Das DOM ist die Schnittstelle zwischen JavaScript und HTML. Es macht den Seiteninhalt als Objektstruktur zugreifbar.

• Jedes HTML-Element wird zu einem Objekt
• JavaScript kann Elemente finden, ändern, löschen
• Wir können auf Events reagieren (Klicks, Eingaben, ...)

Das DOM verbindet deine Programme direkt mit der Benutzeroberfläche.

Mit dem DOM arbeiten

document.getElementById("btn");
document.querySelector(".item");
document.querySelectorAll("li");
      

elem.textContent = "Neuer Text";
elem.style.backgroundColor = "yellow";
elem.classList.add("active");
      

Der DOM-Zugriff ist die Grundlage für interaktive Webseiten.

Mit dem DOM arbeiten

document.getElementById("btn").addEventListener("click", () => {
    const p = document.getElementById("msg");
    p.textContent = "Der Text wurde geändert!";
    p.style.color = "blue";
  });
      

Übung 5 🧩

Baue ein kleines interaktives Element:

• Erstelle ein HTML-Element: <p id="msg">Hallo!</p>
• Erstelle einen Button: Ändern
• Wenn der Button geklickt wird:
• Text des p-Elements ändern
• Farbe ändern
• Optional: weitere Styles hinzufügen

Lösung: Übung 5 🧩

Hallo!
Ändern


  

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: JavaScript wird sicherer

Code verstehen, schreiben & dokumentieren. JavaScript verstehen · TypeScript nutze

Fragen?

Was hat heute Klick gemacht?