Lernziele

• Sie können in JavaScript Variablen mit let und const deklarieren.
• Sie können if, else if und else für Fallunterscheidungen verwenden.
• Sie können prompt() und alert() für einfache Ein- und Ausgabe nutzen.
• Sie können Math.random() einsetzen, um Zufallszahlen zu erzeugen.
• Sie kennen Template Literals und können Variablen elegant in Strings einbauen.

In der letzten Lektion haben wir gelernt, wie man HTML-Elemente findet und verändert. Jetzt geben wir der Webseite richtige Logik — sie soll Entscheidungen treffen können.

Variablen mit let und const

In JavaScript deklariert man Variablen mit let (für veränderbare Werte) oder const (für konstante Werte, die nie überschrieben werden).

Was ist mit var?

In altem JavaScript-Code sehen Sie oft var statt let. var funktioniert ähnlich, hat aber einige Eigenheiten, die zu schwer auffindbaren Bugs führen können. Heute gilt: let und const verwenden, var nicht mehr neu schreiben. Wenn Sie altes Beispiele sehen, können Sie var mental durch let ersetzen.

Fallunterscheidungen mit if ... else

Die Syntax in JavaScript ist fast identisch zu Python — aber mit geschweiften Klammern statt Einzügen, und mit runden Klammern um die Bedingung.

Die Vergleichsoperatoren sind wie in Python:

Immer === und !== verwenden

Der Unterschied zwischen == und === ist subtil aber wichtig. == versucht, Werte zu konvertieren, bevor es vergleicht — z.B. ist "5" == 5 true. === vergleicht ohne Konvertierung — "5" === 5 ist false. Gewöhnen Sie sich === an, das vermeidet überraschende Bugs.

Eingabe und Ausgabe mit prompt() und alert()

Für einfache Spielereien kann man Nutzereingaben direkt mit prompt() abfragen — ein kleines Fensterchen springt auf:

prompt() gibt immer einen String zurück, auch wenn die Person eine Zahl eingibt. Das ist wichtig, sobald Sie rechnen wollen — dann müssen Sie mit Number() oder parseInt() umwandeln.

Template Literals — eleganter als String-Konkatenation

Strings mit + zusammenzufügen wird schnell unübersichtlich. JavaScript hat dafür Template Literals mit Backticks `:

Backticks ` finden Sie auf der Schweizer Tastatur über Shift + ´ (rechts neben dem ß auf deutschen Tastaturen, bzw. rechts neben dem ' auf Schweizer Tastaturen — manchmal muss man danach noch Leertaste drücken).

Zufallszahlen mit Math.random()

Math.random() gibt eine Zufallszahl zwischen 0 (inklusiv) und 1 (exklusiv).

Um eine Zufallszahl zwischen 1 und 100 zu bekommen:

let zahl = Math.round(Math.random() * 100);

• Math.random() * 100 ergibt eine Kommazahl zwischen 0 und 99.999...
• Math.round(...) rundet auf eine ganze Zahl.

Wenn Sie Zahlen zwischen 1 und 6 brauchen (Würfelwurf):

let wurf = Math.floor(Math.random() * 6) + 1;

Übung: Zahlenrate-Spiel mit dem Piratenkapitän 🏴‍☠️

Sie sind eines Abends in einer schönen Bucht vor Anker, als plötzlich eine Horde Piraten den Strand stürmt. Der einäugige Piratenkapitän Rotbart ist allerdings ein Spieler. Geistesgegenwärtig schlagen Sie ihm einen Deal vor: Wenn er sich eine Zahl zwischen 1 und 100 ausdenkt und Sie sie erraten können, dürfen Sie Ihr Geld behalten.

Hier eine erste, einfache Version:

Sie sind dran!

Erweitern Sie das Spiel:

1. Geben Sie dem Piratenkapitän mehrere verschiedene Beleidigungen, die zufällig ausgewählt werden — je nach dem, ob die geratene Zahl zu hoch oder zu tief ist.
2. Nach 5 Versuchen verliert der Spieler. Zeigen Sie eine entsprechende Nachricht.
3. Nach einem Sieg oder einer Niederlage soll das Spiel von vorne beginnen können.

Mögliche Lösung mit zufälligen Beleidigungen

<h2>Harhar, errate die Zahl oder ich klau dir all dein Geld!</h2>

<input type="number" id="versuch" placeholder="1 bis 100">
<button onclick="rate()">Rate</button>
<button onclick="neustart()">Neues Spiel</button>

<p id="antwort"></p>
<p id="versuche">Versuche: 0 / 5</p>

<script>
  const insultsLow = [
    "Ha! Zu niedrig! Versuchs nochmal, du Landei!",
    "So tief wie du ratest, sinken nicht mal die Schiffe, die ich gekapert habe!",
    "Hahaha! Viel zu tief! Du würdest nicht mal einen Schatz auf einer einsamen Insel finden!",
    "So tief wie du schätzt, da tut mir ja der Holzfuss weh!"
  ];
  const insultsHigh = [
    "So hoch? Du könntest genauso gut nach fliegenden Delfinen Ausschau halten!",
    "Wow! Da fällt mir fast der Bart ab. Viel zu hoch!",
    "Sag mal, willst du dein Geld gar nicht mehr? So hoch schätzt nicht mal mein Papagei!",
    "Du würdest doch nicht einmal den Treffpunkt am HB finden, du Möchtegern!"
  ];

  let geheimzahl, versuche;

  function neustart() {
    geheimzahl = Math.round(Math.random() * 100);
    versuche = 0;
    document.getElementById("antwort").textContent = "";
    document.getElementById("versuche").textContent = "Versuche: 0 / 5";
  }
  neustart();

  function zufaelligeBeleidigung(liste) {
    const index = Math.floor(Math.random() * liste.length);
    return liste[index];
  }

  function rate() {
    const eingabe = Number(document.getElementById("versuch").value);
    versuche = versuche + 1;

    let nachricht;
    if (eingabe === geheimzahl) {
      nachricht = `Verflucht! Du hast es in ${versuche} Versuchen geschafft.`;
    } else if (versuche >= 5) {
      nachricht = `Aus! Die Zahl war ${geheimzahl}. Her mit deinem Gold!`;
    } else if (eingabe < geheimzahl) {
      nachricht = zufaelligeBeleidigung(insultsLow);
    } else {
      nachricht = zufaelligeBeleidigung(insultsHigh);
    }

    document.getElementById("antwort").textContent = nachricht;
    document.getElementById("versuche").textContent = `Versuche: ${versuche} / 5`;
  }
</script>

Pfeil-Funktionen — eine kürzere Schreibweise

In modernem JavaScript-Code sehen Sie häufig Arrow Functions (Pfeil-Funktionen). Sie sind eine kompaktere Schreibweise für Funktionen.

// Klassische Funktion
function verdoppeln(x) {
  return x * 2;
}

// Arrow Function — gleichbedeutend
const verdoppeln = (x) => x * 2;

Sie müssen das nicht selbst schreiben können. Aber wenn Sie online Beispiele lesen, hilft es zu erkennen: () => ist einfach eine Funktion.

Zusammenfassung

Zusammenfassung

Variablen

let alter = 16;        // veränderbar
const pi = 3.14159;    // konstant

Fallunterscheidungen

if (bedingung) {
  // Code
} else if (andere) {
  // Code
} else {
  // Code
}

Template Literals

const text = `Hallo ${name}!`;

Zufallszahlen

Math.round(Math.random() * 100);     // 0 bis 100
Math.floor(Math.random() * 6) + 1;   // 1 bis 6 (Würfelwurf)

Ein-/Ausgabe

let name = prompt("Wie heisst du?");
alert("Hallo " + name);