Semester_4
01_Introduction
02_DeployAzure
03_JSBasic
04_OOP
05_GET
06_POST
07_PUT
08_PATCH
09_DELETE
10_FrontendTable
11_FrontendAdd
12_FrontendDelete
13_FrontendEdit
14_Database

content

Funktionen

Eine Funktion ist ein Block von Code, der eine bestimmte Aufgabe ausführt und mehrmals wiederverwendet werden kann.

function greet() {
  console.log("Hallo Welt!");
}

greet();

function greet(name) {
  console.log(`Hallo, ${name}!`);
}

greet("Anna");   // → Hallo, Anna!
greet("Max");    // → Hallo, Max!

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

const summe = add(3, 4);
console.log(summe); // → 7

function checkAge(age) {
  if (age >= 18) {
    return "Volljährig";
  } else {
    return "Minderjährig";
  }
}

console.log(checkAge(20)); // → Volljährig
console.log(checkAge(15)); // → Minderjährig

function listNumbers(limit) {
  for (let i = 1; i <= limit; i++) {
    console.log(i);
  }
}

listNumbers(5);
// → 1
// → 2
// → 3
// → 4
// → 5

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(2, 3)); // → 6

Anonyme Funktionen

Eine anonyme Funktion ist eine Funktion ohne Namen.

Der Unterschied zu normalen Funktionsdeklarationen ist also, dass kein Funktionsname angegeben wird.

function() {
  console.log("Hallo Welt");
}

Diese Funktion existiert, hat aber keinen Namen, unter dem man sie direkt aufrufen könnte.

Darum verwendet man anonyme Funktionen meistens innerhalb anderer Anweisungen oder Zuweisungen.

Variable

let greet = function() {
  console.log("Hallo Welt!");
};
greet();  // → Hallo Welt!


greet = function() {
  console.log("Hallo Thomas!");
};
greet();  // → Hallo Thomas!

Hier ist die Funktion anonym, aber über die Variable greet aufrufbar.

Parameter

Die setTimeout()-Funktion in JavaScript wird verwendet, um eine Funktion einmalig nach einer bestimmten Wartezeit in Millisekunden auszuführen.

Sie ist eine asynchrone Funktion, die die Ausführung des restlichen Codes nicht blockiert.

Um den Timer abzubrechen, kann die zurückgegebene Timeout-ID an die Funktion clearTimeout() übergeben werden.

setTimeout(callback, delay)

Parameter	Beschreibung
`callback`	die Funktion, die ausgeführt werden soll.
`delay`	die Verzögerung in Millisekunden, nach der die Funktion ausgeführt werden soll (z.B. 3000 für 3 Sekunden).

setTimeout(function() {
  console.log("Nach 2 Sekunden");
}, 2000);
console.log("Bitte warten!");

Arrow Function

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

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

Beide tun exakt dasselbe

Aufbau

(parameter) => Ausdruck

(parameter) => { // Anweisungen return Ergebnis; }

Klammern sind optional, wenn es nur einen Parameter gibt.

const square = x => x * x;

console.log(square(5)); // 25

Ohne Parameter

const greet = () => console.log("Hallo Welt!");
greet(); // Hallo Welt!

Wenn die Funktion mehrzeilig ist, braucht man {} und ein return

let add = (a, b) => console.log(a+b);
add(1,2);

add = (a, b) => {
  const sum = a + b;
  console.log(sum);
};
add(3,4);

add = (a, b) => {
  const sum = a + b;
  return sum;
};
console.log(add(3,4));

forEach ist eine JavaScript-Methode, die eine Funktion für jedes Element in einem Array ausführt. Sie ist eine Alternative zu klassischen for-Schleifen und dient der Iteration über Arrays, wobei für jedes Element eine bestimmte Aktion ausgeführt wird. Die Methode selbst gibt keinen neuen Wert zurück.

let fruits = [{name: "Apfel", anzahl: 5},
              {name: "Banane", anzahl: 0},
              {name: "Kirsche", anzahl: 5}];

fruits.forEach(fruit => console.log(fruit.name + " " + fruit.anzahl + " Stück"));

Arrow Functions haben kein eigenes this.

Sie übernehmen (this) vom äußeren Kontext.

Klassen

class Person {
  constructor(name, age) {
    this.name = name;  // Eigenschaft
    this.age = age;    // Eigenschaft
  }

  greet() {
    console.log(`Hallo, mein Name ist ${this.name}.`);
  }
}

const person1 = new Person("Anna", 25);
const person2 = new Person("Max", 30);

person1.greet(); // → Hallo, mein Name ist Anna.
person2.greet(); // → Hallo, mein Name ist Max.

get set

class Person {
  constructor(name) {
    this._name = name; // das Unterstrich-Attribut ist eine Konvention für "intern"
  }

  // Getter: wird aufgerufen, wenn man person.name schreibt
  get name() {
    return this._name;
  }

  // Setter: wird aufgerufen, wenn man person.name = "..." schreibt
  set name(newName) {
    if (newName.length < 2) {
      console.log("Name ist zu kurz!");
    } else {
      this._name = newName;
    }
  }
}

const person = new Person("Anna");

console.log(person.name);  // → Anna   (ruft Getter auf)
person.name = "Li";        // → Name ist zu kurz!
person.name = "Maria";     // Setter erlaubt Änderung
console.log(person.name);  // → Maria

Vererbung

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} macht ein Geräusch.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} bellt.`);
  }
}

const dog = new Dog("Bello");
dog.speak();  // → Bello bellt.

Encapsulation

Kapselung bedeutet: interne Daten schützen und nur über Methoden oder Getter/Setter zugänglich machen.

class Konto {
  #saldo = 0; // private Eigenschaft (seit ES2022)

  einzahlen(betrag) {
    this.#saldo += betrag;
  }

  get saldo() {
    return this.#saldo;
  }
}

const konto = new Konto();
konto.einzahlen(100);
console.log(konto.saldo); // → 100
// konto.#saldo = 1000; ❌ Fehler: privat!

Polymorphismus

Bedeutet: unterschiedliche Klassen können die gleiche Methode auf ihre eigene Art implementieren.

class Tier {
  sprich() {
    console.log("Ein Tier macht ein Geräusch.");
  }
}

class Katze extends Tier {
  sprich() {
    console.log("Miau!");
  }
}

class Hund extends Tier {
  sprich() {
    console.log("Wuff!");
  }
}

const tiere = [new Hund(), new Katze(), new Tier()];
tiere.forEach(tier => tier.sprich());

Abstraktion

JavaScript hat keine echten abstract classes, aber man kann den Effekt mit Konzepten nachbilden:

class Fahrzeug {
  fahre() {
    throw new Error("Die Methode 'fahre()' muss überschrieben werden!");
  }
}

class Auto extends Fahrzeug {
  fahre() {
    console.log("Das Auto fährt los!");
  }
}

const a = new Auto();
a.fahre(); // → Das Auto fährt los!

Statische Eigenschaften und Methoden

Manchmal braucht man Funktionen, die zur Klasse selbst gehören – nicht zu einem bestimmten Objekt.

class Mathe {
  static add(a, b) {
    return a + b;
  }
}

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

Mit static kennzeichnet man Methoden, die ohne Objekt aufgerufen werden können.