Skip to content
Deep Thought

Exercise 03-2-4 Guided

Geführte Übung

Section titled “Geführte Übung”

Bei dieser Übung löst du ein Problem mithilfe von verschachtelten Schleifen. Du kannst gerne versuchen, zuerst selbst eine Lösung zu finden. Wenn es dir schwer fällt, kannst du die Anleitung verwenden, die unterhalb der Aufgabenstellung aufgeschrieben ist. Dort erhältst du Schritt für Schritt mehrere Tips, die dir helfen eine Lösung zu finden.

Aufgabe:

Section titled “Aufgabe:”
// ===============================
// Übung 4: Sterne-Muster
// ===============================
// Gib ein "Diamant"-Muster aus Sternen (*) aus.
// Beispiel für n = 3:
//
//   *
//  ***
// *****
//  ***
//   *

Anleitung:

Section titled “Anleitung:”

Nutze diese Tips, wenn du nicht weißt wie du die Aufgabe lösen sollst.

Tip 1

Section titled “Tip 1”

Ein Problem bei dieser Aufgabenstellung ist es, in jeder Zeile zuerst eine bestimmte Anzahl von Leerzeichen auszugeben. Und dann eine bestimmte Anzahl von Sternen. Nach jeder Zeile kommt ein Zeilenumbruch. Wir können also eine einzelne Zeile ausgeben wenn wir in einem String zuerst die Leerzeichen und dann die Sterne hinzufügen.

let zeile = "";


// füge Leerzeichen hinzu:
zeile = zeile + " ";


// füge Sterne hinzu
zeile = zeile + "*";


// Ausgabe einer Zeile:
console.log(zeile);

Tip 2

Section titled “Tip 2”

Wir müssen das Problem lösen, dass die Anzahl der Leerzeichen und Sterne in jeder Zeile anders ist. In der ersten Zeile sind es 2 Leerzeichen und 1 Stern. In der zweiten Zeile sind es 1 Leerzeichen und 3 Sterne. Es ist also eine gute Idee Variablen zu verwenden um zu bestimmen wie viele Leerzeichen und Sterne es pro Zeile geben soll.

let anzahlLeerzeichen = 2;
let anzahlSterne = 1;


// Zeilenausgabe
// ...


// Anzahl für die nächste Zeile anpassen
anzahlLeerzeichen = anzahlLeerzeichen - 1; // jedes Mal ein Leerzeichen weniger
anzahlSterne = anzahlSterne + 2; // jedes Mal zwei Sterne mehr.

Tip 3

Section titled “Tip 3”

Abhängig von der Anzahl der Leerzeichen und Sterne müssen wir in jeder Zeile einen String zusammenbauen, der die richtige Anzahl der Zeichen enthält.

let anzahlLeerzeichen = 2;
let anzahlSterne = 1;


let zeile = ""; // starte mit einem leeren string


// füge die richtige Anzahl an Leerzeichen hinzu
for (let i = 0; i < anzahlLeerzeichen; i++) {
  zeile = zeile + " ";
}


// füge die richtige Anzahl an Sternen hinzu
for (let i = 0; i < anzahlSterne; i++) {
  zeile = zeile + "*";
}


// Ausgabe:
console.log(zeile);

Tip 4

Section titled “Tip 4”

Der Diamant wächst zuerst und schrumpft danach wieder. Teile deine Lösung in zwei Teile. Zuerst gib die Zeilen aus, solange der Diamant größer wird und dann gib die Zeilen aus, wenn der Diamant kleiner wird.

for (let zeilenNummer = 1; zeilenNummer <= 3; zeilenNummer++) {
  // Diamant wächst
}


for (let zeilenNummer = 4; zeilenNummer <= 5; zeilenNummer++) {
  // Diamant schrumpft
}

Tip 5

Section titled “Tip 5”

Setze die bisherigen Tips richtig zusammen. Tip 4 zeigt dir das Grundgerüst des Programms. Tip 3 zeigt dir wie man einzelne Zeilen ausgibt. Tip 2 zeigt wie man die Variablenwerte nach jeder Ausgabe anpasst.

// Initialisierung
let anzahlLeerzeichen = 3;
let anzahlSterne = 1;


for (let zeilenNummer = 1; zeilenNummer <= 3; zeilenNummer++) {
  // Diamant wächst


  let zeile = ""; // starte in jeder Zeile mit einem neuen leeren String


  // füge die richtige Anzahl an Leerzeichen hinzu
  for (let i = 0; i < anzahlLeerzeichen; i++) {
    zeile = zeile + " ";
  }


  // füge die richtige Anzahl an Sternen hinzu
  for (let i = 0; i < anzahlSterne; i++) {
    zeile = zeile + "*";
  }


  // Ausgabe:
  console.log(zeile);


  // Anzahl für die nächste Zeile anpassen
  anzahlLeerzeichen = anzahlLeerzeichen - 1; // jedes Mal ein Leerzeichen weniger
  anzahlSterne = anzahlSterne + 2; // jedes Mal zwei Sterne mehr.
}


for (let zeilenNummer = 4; zeilenNummer <= 5; zeilenNummer++) {
  // Diamant schrumpft


  let zeile = ""; // starte in jeder Zeile mit einem neuen leeren String


  // füge die richtige Anzahl an Leerzeichen hinzu
  for (let i = 0; i < anzahlLeerzeichen; i++) {
    zeile = zeile + " ";
  }


  // füge die richtige Anzahl an Sternen hinzu
  for (let i = 0; i < anzahlSterne; i++) {
    zeile = zeile + "*";
  }


  // Ausgabe:
  console.log(zeile);


  // Anzahl für die nächste Zeile anpassen
  anzahlLeerzeichen = anzahlLeerzeichen + 1; // jedes Mal ein Leerzeichen mehr
  anzahlSterne = anzahlSterne - 2; // jedes Mal zwei Sterne weniger
}

Tip 6

Section titled “Tip 6”

Wenn du den Code aus Tip 5 ausprobierst, wirst du merken, dass wir fast die richtige Lösung haben. Wir sehen diese Ausgabe:

  *
 ***
*****
*******
*****

Uns fällt auf:

  • Wir geben die richtige Anzahl an Zeilen aus (5). Unsere zwei Schleifen für die Zeilennummern scheinen also richtig zu sein.
  • Die ersten drei Zeilen sind korrekt. Wir geben die richtige Anzahl an Leerzeichen und Sternen aus.
  • Die nächsten drei Zeilen für den schrumpfenden Teil sind nicht richtig. Der Diamant schrumpft zwar, aber wir fangen mit zu vielen Sternen and zu wenig Leerzeichen an.

Das Problem liegt an der Anpassung unserer Variablen für die Anzahl der Leerzeichen und Sterne. Nachdem wir die dritte Zeile ausgegeben haben, erhöhen wir noch einmal die Anzahl der Sterne und verringern die Anzahl der Leerzeichen:

// Ausgabe:
console.log(zeile); // in der dritten Zeile: 0 Leerzeichen + 5 Sterne


// Anzahl für die nächste Zeile anpassen
anzahlLeerzeichen = anzahlLeerzeichen - 1; // jedes Mal ein Leerzeichen weniger
anzahlSterne = anzahlSterne + 2; // jedes Mal zwei Sterne mehr.


// anzahlLeerzeichen == -1
// anzahlSterne == 7

Tip 7

Section titled “Tip 7”

Um das Problem aus Tip 6 zu lösen, können wir zwei Strategien anwenden. Entweder wir verhindern die Anpassung der Variablen in der dritten Zeile:

if (zeilenNummer != 3) {
  // Anzahl für die nächste Zeile anpassen
  // wenn wir nicht in der dritten Zeile sind
  anzahlLeerzeichen = anzahlLeerzeichen - 1; // jedes Mal ein Leerzeichen weniger
  anzahlSterne = anzahlSterne + 2; // jedes Mal zwei Sterne mehr.
}

Oder wir drehen die Struktur des Codes um und passen die Anzahl jedes mal vor der Ausgabe an. Dann müssen wir jedoch aufpassen und die Initialisierung richtig wählen, sodass die Initialisierung zusammen mit der ersten Anpassung die richtige Anzahl für die erste Ausgabe ergibt.

let anzahlLeerzeichen = 4;
let anzahlSterne = -1;


for (let zeilenNummer = 1; zeilenNummer <= 3; zeilenNummer++) {
  // Diamant wächst


  // Anzahl für die AKTUELLE Zeile anpassen
  anzahlLeerzeichen = anzahlLeerzeichen - 1; // jedes Mal ein Leerzeichen weniger
  anzahlSterne = anzahlSterne + 2; // jedes Mal zwei Sterne mehr.


  let zeile = ""; // starte in jeder Zeile mit einem neuen leeren String


  // füge die richtige Anzahl an Leerzeichen hinzu
  for (let i = 0; i < anzahlLeerzeichen; i++) {
    zeile = zeile + " ";
  }


  // füge die richtige Anzahl an Sternen hinzu
  for (let i = 0; i < anzahlSterne; i++) {
    zeile = zeile + "*";
  }


  // Ausgabe:
  console.log(zeile);
}

Tip 8

Section titled “Tip 8”

Vervollständige das Programm. Füge alle Hinweise zu der Lösung zusammen.

let anzahlLeerzeichen = 4;
let anzahlSterne = -1;


for (let zeilenNummer = 1; zeilenNummer <= 3; zeilenNummer++) {
  // Diamant wächst


  // Anzahl für die AKTUELLE Zeile anpassen
  anzahlLeerzeichen = anzahlLeerzeichen - 1; // jedes Mal ein Leerzeichen weniger
  anzahlSterne = anzahlSterne + 2; // jedes Mal zwei Sterne mehr.


  let zeile = ""; // starte in jeder Zeile mit einem neuen leeren String


  // füge die richtige Anzahl an Leerzeichen hinzu
  for (let i = 0; i < anzahlLeerzeichen; i++) {
    zeile = zeile + " ";
  }


  // füge die richtige Anzahl an Sternen hinzu
  for (let i = 0; i < anzahlSterne; i++) {
    zeile = zeile + "*";
  }


  // Ausgabe:
  console.log(zeile);
}


for (let zeilenNummer = 4; zeilenNummer <= 5; zeilenNummer++) {
  // Diamant schrumpft


  // Anzahl für die AKTUELLE Zeile anpassen
  anzahlLeerzeichen = anzahlLeerzeichen + 1; // jedes Mal ein Leerzeichen mehr
  anzahlSterne = anzahlSterne - 2; // jedes Mal zwei Sterne weniger


  let zeile = ""; // starte in jeder Zeile mit einem neuen leeren String


  // füge die richtige Anzahl an Leerzeichen hinzu
  for (let i = 0; i < anzahlLeerzeichen; i++) {
    zeile = zeile + " ";
  }


  // füge die richtige Anzahl an Sternen hinzu
  for (let i = 0; i < anzahlSterne; i++) {
    zeile = zeile + "*";
  }


  // Ausgabe:
  console.log(zeile);
}

So erhalten wir die richtige Ausgabe:

   *
  ***
 *****
  ***
   *

Tip 9

Section titled “Tip 9”

Unsere Lösung gibt jetzt den Diamanten korrekt aus. Er ist jedoch immer gleich groß. Überlege was du ändern müsstest, damit dein Diamant abhängig von nur einer Variable (n) unterschiedlich groß wird. n ist dabei die Anzahl der Zeilen in der der Diamant wächst.

n = 3
  *
 ***
*****
 ***
  *


n = 4
   *
  ***
 *****
*******
 *****
  ***
   *


n = 5
    *
   ***
  *****
 *******
*********
 *******
  *****
   ***
    *

Tip 10 (fertige Lösung)

Section titled “Tip 10 (fertige Lösung)”
let n = 5; // Anzahl der Zeilen für Wachstum


// Berechnung der Zeichenanzahl für die erste Zeile
let anzahlLeerzeichen = n - 1; // kann abhängig von n berechnet werden
let anzahlSterne = 1; // erste Zeile: immer ein Stern


// Anpassung der Anzahlen, da Korrektur VOR jeder Zeilenausgabe
anzahlLeerzeichen = anzahlLeerzeichen + 1;
anzahlSterne = anzahlSterne - 2;


// Diamant wächst
// Wird sooft durchlaufen, wie groß n ist (=Anzahl der Zeilen für Wachstum)
for (let zeilenNummer = 1; zeilenNummer <= n; zeilenNummer++) {
  // Anzahl für die AKTUELLE Zeile anpassen
  anzahlLeerzeichen = anzahlLeerzeichen - 1; // jedes Mal ein Leerzeichen weniger
  anzahlSterne = anzahlSterne + 2; // jedes Mal zwei Sterne mehr.


  let zeile = ""; // starte in jeder Zeile mit einem neuen leeren String


  // füge die richtige Anzahl an Leerzeichen hinzu
  for (let i = 0; i < anzahlLeerzeichen; i++) {
    zeile = zeile + " ";
  }


  // füge die richtige Anzahl an Sternen hinzu
  for (let i = 0; i < anzahlSterne; i++) {
    zeile = zeile + "*";
  }


  // Ausgabe:
  console.log(zeile);
}


// Diamant schrumpft
// Wird einmal weniger durchlaufen, als das Wachstum
for (let zeilenNummer = n + 1; zeilenNummer <= n * 2 - 1; zeilenNummer++) {
  // Anzahl für die AKTUELLE Zeile anpassen
  anzahlLeerzeichen = anzahlLeerzeichen + 1; // jedes Mal ein Leerzeichen mehr
  anzahlSterne = anzahlSterne - 2; // jedes Mal zwei Sterne weniger


  let zeile = ""; // starte in jeder Zeile mit einem neuen leeren String


  // füge die richtige Anzahl an Leerzeichen hinzu
  for (let i = 0; i < anzahlLeerzeichen; i++) {
    zeile = zeile + " ";
  }


  // füge die richtige Anzahl an Sternen hinzu
  for (let i = 0; i < anzahlSterne; i++) {
    zeile = zeile + "*";
  }


  // Ausgabe:
  console.log(zeile);
}

Mit dieser Lösung muss man nur vor jeder Ausführung eine einzige Variable (n) ändern und der Diamant wird abhängig davon größer oder kleiner ausgegeben.

Anmerkung:

Section titled “Anmerkung:”

Die for Schleife für das Schrumpfen des Diamanten sieht etwas kompliziert aus.

// Diamant schrumpft
// Wird einmal weniger durchlaufen, als das Wachstum
for (let zeilenNummer = n + 1; zeilenNummer <= n * 2 - 1; zeilenNummer++) {
  // ...
}

Das liegt daran, dass die Zeilennummer auf den richtigen Wert gesetzt wird und wir uns dann ausrechnen müssen, was die letzte Zeilennummer sein wird. Wenn n = 3, dann ist die letzte Zeilennummer 5, oder n*2 - 1. Da wir aber die Variable zeilenNummer in der Schleife gar nicht brauchen und wir nur sicher stellen wollen, dass die Schleife richtig oft durchlaufen wird, könnten wir es auch einfacher schreiben. Wir wissen ja, dass der schrumpfende Teil einmal weniger ausgeführt wird als der wachsende Teil:

for (let j = 1; j < n; j++) {
  // Schleife wird n-1 Mal ausgeführt
}