JavaScript 101 - Musterlösungen

Hier findest du vollständige Lösungen zu allen Übungen, organisiert nach den gleichen Themen wie die Übungen.

---

Teil 1: Einfacher Programmablauf & console.log

Lösung 1.1: Willkommensnachricht

function willkommensnachricht() {
    console.log("Willkommen bei JavaScript!");
}

Erklärung: Die console.log()-Funktion gibt Text in der Konsole aus.

---

Lösung 1.2: Mehrere Zeilen

function dreiZeilen() {
    console.log("Zeile 1");
    console.log("Zeile 2");
    console.log("Zeile 3");
}

Variante 2 (mit Newline-Zeichen):

function dreiZeilen() {
    console.log("Zeile 1\nZeile 2\nZeile 3");
}

Erklärung: Mit console.log() kannst du entweder mehrmals die Funktion aufrufen oder das Newline-Zeichen \n für Zeilenumbrüche verwenden.

---

Lösung 1.3: Code Reading

Antworten:

1. Wie viele Zeilen werden ausgegeben? 3 Zeilen

2. In welcher Reihenfolge? Von oben nach unten:

   • Erste Zeile: "Hallo"
   • Zweite Zeile: "Welt"
   • Dritte Zeile: "!"

3. Was passiert, wenn du die Reihenfolge änderst? Die Ausgabe ändert sich entsprechend. JavaScript führt den Code von oben nach unten aus.

---

Lösung 1.4: Debugging

Fehler: In Zeile 4 fehlen die Klammern bei console.log. Es steht console.log"Mitte" statt console.log("Mitte").

Korrekte Lösung:

function meineNachricht() {
    console.log("Start");
    console.log("Mitte");  // Hier war der Fehler - Klammern fehlten
    console.log("Ende");
}

---

Teil 2: Variablen

Lösung 2.1: Variable erstellen

function meineZahl() {
    let zahl = 42;
    return zahl;
}

Erklärung: Variable mit let erstellen und mit return zurückgeben.

---

Lösung 2.2: Zwei Werte zurückgeben

function nameUndAlter() {
    let name = "Anna";
    let alter = 16;
    return [name, alter];
}

Erklärung: Ein Array [name, alter] ermöglicht die Rückgabe mehrerer Werte. Beim Aufruf werden sie mit Destructuring empfangen: let [name, alter] = nameUndAlter().

---

Lösung 2.3: Drei Werte zurückgeben

function personenDaten() {
    let name = "Anna";
    let alter = 16;
    let stadt = "Bern";
    return [name, alter, stadt];
}

Erklärung: JavaScript kann mehrere Werte als Array zurückgeben. Beim Aufruf können wir die Werte "entpacken": let [name, alter, stadt] = personenDaten().

---

Lösung 2.4: Variable ändern

function variableAendern() {
    let x = 10;
    x = 20;
    return x;
}

Erklärung: Variablen, die mit let deklariert wurden, können neu zugewiesen werden.

---

Lösung 2.5: Code Reading

Variablen-Tabelle:

Zeile	Code	x	y
1	let x = 5	5	-
2	let y = 10	5	10
3	x = y	10	10
4	y = 20	10	20

Antworten:

1. Wert von x am Ende: 10
2. Wert von y am Ende: 20

---

Lösung 2.6: Debugging

Fehler: Nach a = b haben beide Variablen den Wert 20. b = a setzt b dann ebenfalls auf 20.

Korrekte Lösung (mit Hilfsvariable):

function tauscheWerte() {
    let a = 10;
    let b = 20;
    let temp = a;    // Alten Wert von a zwischenspeichern
    a = b;           // a bekommt Wert von b
    b = temp;        // b bekommt alten Wert von a
    return [a, b];
}

Korrekte Lösung (JavaScript-Trick mit Destructuring):

function tauscheWerte() {
    let a = 10;
    let b = 20;
    [a, b] = [b, a];  // Gleichzeitiger Tausch
    return [a, b];
}

---

Teil 3: Grundlegende Datentypen

Lösung 3.1: Datentypen erkennen

function verschiedeneTypen() {
    let ganzeZahl = 42;
    let text = "Hallo";
    let wahrheit = true;
    return [ganzeZahl, text, wahrheit];
}

Erklärung:

• 42 ist ein Number
• "Hallo" ist ein String
• true ist ein Boolean

---

Lösung 3.2: String zusammensetzen

function stringsVerbinden(teil1, teil2) {
    return teil1 + teil2;
}

Erklärung: Der + Operator verbindet Strings (Konkatenation).

---

Lösung 3.3: Code Reading

Antworten:

1. Welche Datentypen werden verwendet?

   • name: String ("Anna")
   • alter: Number (16)
   • groesse: Number (1.65)
   • istSchueler: Boolean (true)
   • info: String

2. Warum kann alter direkt mit Strings verbunden werden? In JavaScript wird bei der String-Konkatenation mit + automatisch eine Typkonvertierung durchgeführt. Das Number 16 wird automatisch zu "16" konvertiert.

3. Was gibt das Programm aus?

   Anna ist 16 Jahre alt

---

Lösung 3.4: Debugging

Fehler: zahl1 ist ein String ("10"), und + führt String-Konkatenation durch: "10" + 20 = "1020".

Korrekte Lösung:

function berechneSumme() {
    let zahl1 = 10;      // Number statt String
    let zahl2 = 20;
    let summe = zahl1 + zahl2;
    return summe;        // 30
}

Alternative (Typkonvertierung):

function berechneSumme() {
    let zahl1 = "10";
    let zahl2 = 20;
    let summe = Number(zahl1) + zahl2;
    return summe;        // 30
}

---

Teil 4: Arithmetische Operationen

Lösung 4.1: Addition

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

---

Lösung 4.2: Grundrechenarten

function grundrechenarten(a, b) {
    let summe = a + b;
    let differenz = a - b;
    let produkt = a * b;
    let quotient = a / b;
    return [summe, differenz, produkt, quotient];
}

---

Lösung 4.3: Flächenberechnung

function rechteckFlaeche(laenge, breite) {
    return laenge * breite;
}

---

Lösung 4.4: Code Reading

Variablen-Tabelle:

Zeile	Code	a	b	summe	produkt	differenz
1	let a = 10	10	-	-	-	-
2	let b = 5	10	5	-	-	-
3	let summe = a + b	10	5	15	-	-
4	let produkt = a * b	10	5	15	50	-
5	let differenz = a - b	10	5	15	50	5

---

Lösung 4.5: Debugging

Fehler: Die Formel ist falsch. Kreisfläche ist A = π × r², nicht π × r × 2.

Korrekte Lösung:

function kreisFlaeche(radius) {
    const pi = 3.14;
    let flaeche = pi * radius * radius;  // oder: pi * radius ** 2
    return flaeche;
}

---

Teil 5: Basisfunktionen

Lösung 5.1: String zu Number

function stringZuNumber(text) {
    return Number(text);
}

---

Lösung 5.2: Number zu String

function numberZuString(zahl) {
    return String(zahl);
}

---

Lösung 5.3: Formatierte Ausgabe

function formatierteAusgabe(name, alter) {
    return `Ich bin ${name} und ${alter} Jahre alt.`;
}

Erklärung: Template Literals (Backticks ) ermöglichen das Einbetten von Variablen mit ${}`.

---

Lösung 5.4: Code Reading

Variablen-Tabelle (bei Eingabe "16"):

Variable	Typ	Wert
alterEingabe	string	"16"
alter	number	16
naechstesJahr	number	17
ausgabe	string	"Nächstes Jahr bist du 17 Jahre alt."

Typkonvertierungen:

• Number(alterEingabe): String → Number

---

Lösung 5.5: Debugging

Fehler: Die Funktion erwartet einen String, aber "16" * 2 ergibt tatsächlich 32 in JavaScript! JavaScript konvertiert den String automatisch zu einer Zahl bei Multiplikation.

Das Beispiel funktioniert also korrekt! Aber das Verhalten ist inkonsistent:

• "16" + 2 ergibt "162" (String-Konkatenation)
• "16" * 2 ergibt 32 (automatische Konvertierung)

Bessere Lösung (explizite Konvertierung):

function alterVerdoppeln(eingabe) {
    let alter = Number(eingabe);  // Explizite Konvertierung
    let doppelt = alter * 2;
    return `Das Doppelte deines Alters ist ${doppelt}`;
}

---

Teil 6: if/else Bedingungen

Lösung 6.1: Einfache if-Bedingung

function istPositiv(zahl) {
    if (zahl > 0) {
        return true;
    } else {
        return false;
    }
}

Kürzere Variante:

function istPositiv(zahl) {
    return zahl > 0;
}

---

Lösung 6.2: if-else if-else

function zahlKlassifizieren(zahl) {
    if (zahl > 0) {
        return "positiv";
    } else if (zahl < 0) {
        return "negativ";
    } else {
        return "null";
    }
}

---

Lösung 6.3: Vergleich zweier Zahlen

function groessereZahl(a, b) {
    if (a >= b) {
        return a;
    } else {
        return b;
    }
}

Kürzere Variante (mit Math.max):

function groessereZahl(a, b) {
    return Math.max(a, b);
}

---

Lösung 6.4: Code Reading

Antworten:

1. temperatur = 25: "Es ist warm."
2. temperatur = 35: "Es ist heiß!"
3. temperatur = 5: "Es ist kalt!"
4. Bei temperatur = 25:
   • temperatur > 30 → false (wird geprüft)
   • temperatur > 20 → true (Bedingung erfüllt, Code ausgeführt)
   • Restliche Bedingungen werden übersprungen

---

Lösung 6.5: Debugging

Fehler: alter > 18 statt alter >= 18. Bei 18 Jahren ist man bereits volljährig!

Korrekte Lösung:

function pruefeVolljaehrigkeit(alter) {
    if (alter >= 18) {
        return "volljährig";
    } else {
        return "minderjährig";
    }
}

---

Teil 7: Schleifen

Lösung 7.1: Einfache for-Schleife

function zahlenBisFuenf() {
    let ergebnis = [];
    for (let i = 1; i <= 5; i++) {
        ergebnis.push(i);
    }
    return ergebnis;
}

---

Lösung 7.2: Summe mit Schleife

function summeBisN(n) {
    let summe = 0;
    for (let i = 1; i <= n; i++) {
        summe = summe + i;
    }
    return summe;
}

Variante (mit +=):

function summeBisN(n) {
    let summe = 0;
    for (let i = 1; i <= n; i++) {
        summe += i;
    }
    return summe;
}

---

Lösung 7.3: Gerade Zahlen zählen

function geradeZaehlen(zahlen) {
    let anzahl = 0;
    for (let zahl of zahlen) {
        if (zahl % 2 === 0) {
            anzahl++;
        }
    }
    return anzahl;
}

Erklärung: % ist der Modulo-Operator (Rest der Division). Gerade Zahlen haben Rest 0 bei Division durch 2.

---

Lösung 7.4: Code Reading

Antworten:

1. Wie oft wird die Schleife durchlaufen? 3 Mal

2. Tabelle:

Iteration	zahl	summe (vorher)	summe (nachher)
1	10	0	10
2	20	10	30
3	30	30	60

3. Finaler Wert von summe: 60

---

Lösung 7.5: Debugging

Fehler: i < 10 läuft nur bis 9. i <= 10 oder i < 11 würde bis 10 laufen.

Korrekte Lösung:

function ungeradeZahlen() {
    let ungerade = [];
    for (let i = 1; i <= 10; i++) {  // <= statt <
        if (i % 2 === 1) {
            ungerade.push(i);
        }
    }
    return ungerade;
}

---

Teil 8: Funktionen

Lösung 8.1: Funktion mit Parameter

function begruesse(name) {
    return `Hallo, ${name}!`;
}

---

Lösung 8.2: Funktion mit mehreren Parametern

function durchschnittZwei(a, b) {
    return (a + b) / 2;
}

---

Lösung 8.3: Funktion ruft Funktion auf

function verdopple(zahl) {
    return zahl * 2;
}

function verdoppleUndAddiereZehn(zahl) {
    let verdoppelt = verdopple(zahl);
    return verdoppelt + 10;
}

Kürzere Variante:

function verdoppleUndAddiereZehn(zahl) {
    return verdopple(zahl) + 10;
}

---

Lösung 8.4: Code Reading

Antworten:

1. Ausgabe: 25 (3² + 4² = 9 + 16 = 25)

2. Ablauf:

   • berechneSummeQuadrate(3, 4) ruft berechneQuadrat(3) auf → 9
   • berechneSummeQuadrate(3, 4) ruft berechneQuadrat(4) auf → 16
   • Summe: 9 + 16 = 25

3. Variablen-Tabelle:

Variable	Wert
a	3
b	4
quadratA	9
quadratB	16
summe	25

---

Lösung 8.5: Debugging

Fehler: laenge + breite statt laenge * breite. Fläche = Länge × Breite!

Korrekte Lösung:

function berechneFlaeche(laenge, breite) {
    let flaeche = laenge * breite;
    return flaeche;
}

---

Teil 9: Kombination aller Konzepte

Lösung 9.1: Temperaturumrechner

function celsiusZuFahrenheit(celsius) {
    return celsius * 9/5 + 32;
}

---

Lösung 9.2: Notenbewertung

function notePruefen(note) {
    if (note >= 4.0) {
        return "bestanden";
    } else {
        return "nicht bestanden";
    }
}

---

Lösung 9.3: Einkaufspreis berechnen

function einkaufspreis(anzahlHefte, anzahlStifte) {
    const preisHeft = 2.50;
    const preisStift = 1.20;
    return anzahlHefte * preisHeft + anzahlStifte * preisStift;
}

---

Lösung 9.4: Zahlen filtern

function nurPositive(zahlen) {
    let ergebnis = [];
    for (let zahl of zahlen) {
        if (zahl > 0) {
            ergebnis.push(zahl);
        }
    }
    return ergebnis;
}

Mit filter (eleganter):

function nurPositive(zahlen) {
    return zahlen.filter(zahl => zahl > 0);
}

---

Lösung 9.5: Multiplikationstabelle

function multiplikationstabelle(zahl) {
    let ergebnis = [];
    for (let i = 1; i <= 10; i++) {
        ergebnis.push(zahl * i);
    }
    return ergebnis;
}

---

Bonus-Lösungen

Bonus 1: Gerade oder ungerade

function istGerade(zahl) {
    return zahl % 2 === 0;
}

---

Bonus 2: Maximum von drei Zahlen

function maximumVonDrei(a, b, c) {
    return Math.max(a, b, c);
}

Ohne Math.max:

function maximumVonDrei(a, b, c) {
    if (a >= b && a >= c) {
        return a;
    } else if (b >= c) {
        return b;
    } else {
        return c;
    }
}

---

Bonus 3: Fakultät

function fakultaet(n) {
    let ergebnis = 1;
    for (let i = 1; i <= n; i++) {
        ergebnis *= i;
    }
    return ergebnis;
}

---

Bonus 4: Summe eines Arrays

function summeArray(zahlen) {
    let summe = 0;
    for (let zahl of zahlen) {
        summe += zahl;
    }
    return summe;
}

---

Bonus 5: Durchschnitt berechnen

function durchschnitt(zahlen) {
    if (zahlen.length === 0) return 0;
    let summe = 0;
    for (let zahl of zahlen) {
        summe += zahl;
    }
    return summe / zahlen.length;
}

---

Bonus 6: Zahlen filtern

function geradeZahlen(zahlen) {
    return zahlen.filter(zahl => zahl % 2 === 0);
}

---

Bonus 7: String umkehren

function stringUmkehren(text) {
    return text.split("").reverse().join("");
}

---

Bonus 8: Wörter zählen

function woerterZaehlen(text) {
    if (text.trim() === "") return 0;
    return text.trim().split(/\s+/).length;
}

---

Bonus 9: Palindrom-Checker

function istPalindrom(wort) {
    let umgekehrt = wort.split("").reverse().join("");
    return wort === umgekehrt;
}

---

Bonus 10: Array verdoppeln

function arrayVerdoppeln(zahlen) {
    return zahlen.map(zahl => zahl * 2);
}

---

Bonus 11: FizzBuzz

function fizzbuzz(n) {
    if (n % 15 === 0) {
        return "FizzBuzz";
    } else if (n % 3 === 0) {
        return "Fizz";
    } else if (n % 5 === 0) {
        return "Buzz";
    } else {
        return String(n);
    }
}

Wichtig: 15 muss zuerst geprüft werden (durch 3 UND 5 teilbar).

---

Bonus 12: Häufigkeiten zählen

function haeufigkeitZaehlen(array) {
    let haeufigkeiten = {};
    for (let element of array) {
        if (haeufigkeiten[element]) {
            haeufigkeiten[element]++;
        } else {
            haeufigkeiten[element] = 1;
        }
    }
    return haeufigkeiten;
}

Mit nullish coalescing:

function haeufigkeitZaehlen(array) {
    let haeufigkeiten = {};
    for (let element of array) {
        haeufigkeiten[element] = (haeufigkeiten[element] ?? 0) + 1;
    }
    return haeufigkeiten;
}

---

Tipps für besseren Code

1. Aussagekräftige Variablennamen

// Schlecht
function f(x, y) {
    return x * y;
}

// Gut
function berechneFlaeche(laenge, breite) {
    return laenge * breite;
}

2. const für unveränderliche Werte

// Wenn sich ein Wert nicht ändert, verwende const
const PI = 3.14159;
const MAX_VERSUCHE = 3;

// Verwende let nur wenn nötig
let zaehler = 0;
zaehler++;  // Wert ändert sich

3. Strikte Gleichheit

// Schlecht - lose Gleichheit
if (x == "5") { ... }

// Gut - strikte Gleichheit
if (x === 5) { ... }

4. Template Literals statt Konkatenation

// Schlecht
let text = "Hallo " + name + ", du bist " + alter + " Jahre alt.";

// Gut
let text = `Hallo ${name}, du bist ${alter} Jahre alt.`;

5. Array-Methoden nutzen

// Schlecht
let ergebnis = [];
for (let zahl of zahlen) {
    if (zahl > 0) {
        ergebnis.push(zahl * 2);
    }
}

// Gut
let ergebnis = zahlen
    .filter(zahl => zahl > 0)
    .map(zahl => zahl * 2);

---

Viel Erfolg beim Programmieren! 🚀