JavaScript Übungen Lösungen (Erklärung)

1. Hello World Funktion

function sayHello() {
  console.log("Hello, World!");
}
sayHello();

  • function sayHello() definiert eine Funktion ohne Parameter.

  • console.log gibt den Text in der Browser-Konsole aus.

  • sayHello(); ruft die Funktion auf und zeigt den Text an.
    Also: Einfachste Funktion, die eine Nachricht ausgibt.

2. Begrüßung mit Namen

function greet(name) {
  return `Hallo ${name}!`;
}
console.log(greet("Anna"));

  • Funktion greet erwartet einen Parameter name.

  • Der Rückgabewert ist ein Text mit dem Namen darin (Template Literal).

  • console.log zeigt das Ergebnis an.
    Also: Funktion, die eine personalisierte Nachricht zurückgibt.

3. Addition zweier Zahlen

function add(a, b) {
  return a + b;
}
console.log(add(3, 7));

  • Funktion nimmt zwei Parameter a und b.

  • Sie addiert die beiden Zahlen und gibt das Ergebnis zurück.

  • console.log zeigt das Ergebnis (hier 10).
    Also: Rechenfunktion mit zwei Eingabewerten.

4. Gerade oder ungerade?

function isEven(number) {
  return number % 2 === 0;
}
console.log(isEven(4)); // true
console.log(isEven(7)); // false

  • Der Modulo-Operator % gibt den Rest bei Division durch 2.

  • Wenn der Rest 0 ist, ist die Zahl gerade, sonst ungerade.

  • Funktion gibt true oder false zurück.
    Also: Prüft, ob eine Zahl gerade ist.

5. Fakultät berechnen

function factorial(n) {
  let result = 1;
  for(let i = 1; i <= n; i++) {
    result *= i;
  }
  return result;
}
console.log(factorial(5)); // 120

  • result startet bei 1 (da Fakultät von 0 = 1).

  • Schleife multipliziert result mit allen Zahlen von 1 bis n.

  • Am Ende wird das Produkt zurückgegeben.
    Also: Berechnet die Fakultät (z. B. 5! = 5×4×3×2×1 = 120).

6. Array durchsuchen

function contains(arr, value) {
  for(let i = 0; i < arr.length; i++) {
    if(arr[i] === value) return true;
  }
  return false;
}
console.log(contains([1, 2, 3], 2)); // true
console.log(contains([1, 2, 3], 5)); // false

  • Die Funktion durchläuft alle Elemente im Array arr.

  • Wenn ein Element gleich value ist, gibt sie sofort true zurück.

  • Wenn sie das Ende erreicht ohne Treffer, gibt sie false.
    Also: Prüft, ob ein Wert im Array vorkommt.

7. Objekt Eigenschaften ausgeben

function printPerson(person) {
  console.log(`Name: ${person.name}, Alter: ${person.age}`);
}
const person = { name: "Max", age: 30 };
printPerson(person);

  • Funktion nimmt ein Objekt person mit Eigenschaften name und age.

  • Gibt einen Text mit diesen Werten in der Konsole aus.

  • Beispielobjekt wird übergeben und angezeigt.
    Also: Zeigt, wie man auf Objekt-Eigenschaften zugreift.

8. Button klick zählt

<button id="clickBtn">Klick mich</button>
<p id="count">0</p>

<script>
  let count = 0;
  document.getElementById("clickBtn").addEventListener("click", function() {
    count++;
    document.getElementById("count").textContent = count;
  });
</script>

  • count ist eine Variable, die Klicks zählt.

  • getElementById holt den Button und den Textabschnitt.

  • addEventListener registriert eine Funktion, die bei Klick ausgeführt wird.

  • Bei Klick wird count erhöht und der Text aktualisiert.
    Also: Interaktive Webseite, die Klicks live zählt.