02 – Variablen & Datentypen 🧮

🎯 1. Was ist eine Variable?

Eine Variable ist ein Behälter für einen Wert. In JavaScript deklariert man sie mit let oder const.

📊 2. Übersicht: Deklarationsarten & Datentypen

Variablen-Deklaration

Häufige Datentypen

🎯 3. Einleitung & W3Schools

In diesem Kapitel lernst du, wie man Variablen deklariert, welche Datentypen JavaScript kennt und warum const oft besser ist als let.

🔗 W3Schools – JavaScript Variables
🔗 W3Schools – JavaScript Data Types

🧠 4. KI-Prompt-Training

Aufgabe: Formuliere einen Prompt, mit dem du KI um Hilfe bitten würdest, um den Unterschied zwischen let und const zu erklären – und warum man var vermeiden sollte. Außerdem: Zeig mir, wie ich mit Template-Literalen dynamische Texte erstelle.

🔖 5. const vs. let

const ist die Standardwahl – nur wenn du den Wert ändern musst, verwende let.

function demoConstLet() {
  const name = "Anna";  // const = unveränderlich
  let alter = 16;       // let = veränderlich

  // name = "Ben";      // ❌ Fehler! const kann nicht geändert werden.
  alter = 17;           // ✅ Erlaubt bei let.

  document.getElementById("ausgabe-const-let").innerHTML =
    `<p>Name: <strong>${name}</strong> (const – unveränderlich)</p>` +
    `<p>Alter: <strong>${alter}</strong> (let – veränderlich)</p>`;
}

🧮 6. Datentypen und typeof

JavaScript ist dynamisch getypt – der Typ wird automatisch erkannt.

function demoDatentypen() {
  const text = "Hallo Welt";        // string
  const zahl = 42;                  // number
  const punktzahl = 3.14;           // number
  const istSchueler = true;         // boolean
  const nichts = null;              // null
  let undefiniert;                  // undefined

  document.getElementById("ausgabe-daten").innerHTML = 
    `<ul>
      <li><code>text</code>: "${text}" → <em>${typeof text}</em></li>
      <li><code>zahl</code>: ${zahl} → <em>${typeof zahl}</em></li>
      <li><code>punktzahl</code>: ${punktzahl} → <em>${typeof punktzahl}</em></li>
      <li><code>istSchueler</code>: ${istSchueler} → <em>${typeof istSchueler}</em></li>
      <li><code>nichts</code>: ${nichts} → <em>${typeof nichts}</em> (⚠️ Sonderfall!)</li>
      <li><code>undefiniert</code>: ${undefiniert} → <em>${typeof undefiniert}</em></li>
    </ul>`;
}

🔤 7. Template-Literale

Mit Backticks (`) kannst du dynamische Texte erstellen.

function demoTemplate() {
  const schueler = ["Anna", "Ben", "Chloé"];
  const html = `<ul>
  ${schueler.map(name => `<li>Hallo, ${name}!</li>`).join('')}
</ul>`;
  document.getElementById("ausgabe-template").innerHTML = html;
}