JavaScript: Spickzettel

1. Was ist JavaScript?

• JavaScript läuft in jedem Browser und mit Node.js auf Servern
• HTML liefert Struktur, CSS das Aussehen, JavaScript das Verhalten
• Der Standard heißt ECMAScript und wird jährlich erweitert
• JavaScript und Java sind verschiedene Sprachen

2. Das erste Programm

• console.log() gibt Werte in der Konsole aus
• Anweisungen laufen von oben nach unten und enden meist mit ;
• Kommentare: // für eine Zeile, /* ... */ für mehrere
• JavaScript unterscheidet Groß- und Kleinschreibung

console.log("Hallo, Welt!");
console.log("Ich lerne JavaScript.");

3. Variablen: let, const und var

• const für Werte, die nicht neu zugewiesen werden; let für veränderliche
• var vermeiden
• const schützt nur die Zuweisung, nicht den Inhalt von Arrays und Objekten
• Namen in camelCase, aussagekräftig
• Nicht initialisierte Variablen haben den Wert undefined

let alter = 17;
const name = "Mia";
console.log(name, "ist", alter);
alter = 18;                 // let erlaubt Änderungen
console.log(name, "ist jetzt", alter);

4. Datentypen

• Primitive Typen: number, bigint, string, boolean, undefined, null, symbol
• typeof liefert den Typ; typeof null ist "object"
• Falsy sind: false, 0, "", null, undefined, NaN (und -0, 0n)
• Number(), String(), Boolean() wandeln explizit um
• "5" + 3 ergibt "53", "5" - 3 ergibt 2

console.log(typeof 42);
console.log(typeof 3.14);
console.log(typeof "Text");
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);        // Historischer Fehler: "object"
console.log(typeof [1, 2]);      // Arrays sind Objekte
console.log(typeof {a: 1});
console.log(typeof function () {});
console.log(typeof 10n);

5. Zahlen und das Math-Objekt

• Es gibt nur number für Zahlen (und BigInt für riesige ganze Zahlen)
• % gibt den Rest, ** die Potenz
• 0.1 + 0.2 !== 0.3: Kommazahlen mit Toleranz vergleichen
• Math.round/floor/ceil/trunc runden verschieden; toFixed formatiert
• Math.random() liefert 0 bis unter 1; Number.isNaN prüft auf NaN

console.log(7 / 2, 7 % 2, 2 ** 10);
console.log(10 / 0, -10 / 0, 0 / 0);
console.log(Number.MAX_SAFE_INTEGER);
console.log(Number.EPSILON > 0);

6. Operatoren und Vergleiche

• Immer === und !== verwenden
• &&, || liefern einen der Operanden (Kurzschluss)
• ?? ersetzt nur null/undefined, || jeden falsy Wert
• ?. verhindert Fehler bei fehlenden Zwischenwerten
• bedingung ? a : b ist die Kurzform von if/else

console.log(5 === 5, 5 === "5", 5 == "5");
console.log(0 == false, 0 === false);
console.log(null == undefined, null === undefined);
console.log("a" < "b", "B" < "a", "10" < "9", 10 < 9);

7. Text: Strings

• Template-Strings mit Backticks: ` Hallo ${name} `
• Strings sind unveränderlich; Methoden liefern neue Strings
• slice, split, replaceAll, trim, includes, padStart sind Alltagswerkzeuge
• Mit localeCompare sortierst du sprachrichtig
• Emojis haben length 2: mit [...text] richtig zählen

const name = "Mia", alter = 17;
console.log(`Hallo ${name}, in einem Jahr bist du ${alter + 1}.`);
console.log(`Zeile 1
Zeile 2`);
console.log("Tab:\tText\nNeue Zeile, \"Anführungszeichen\", \\ Backslash");

8. Bedingungen: if, else und switch

• if, else if, else: nur der erste passende Zweig läuft
• Immer geschweifte Klammern setzen
• Bedingungen nutzen truthy/falsy-Werte
• switch vergleicht mit === und braucht break
• Früh zurückgeben statt tief zu verschachteln

const punkte = 73;
if (punkte >= 90) {
  console.log("sehr gut");
} else if (punkte >= 75) {
  console.log("gut");
} else if (punkte >= 50) {
  console.log("bestanden");
} else {
  console.log("nicht bestanden");
}

9. Schleifen

• for für feste Anzahl, while für Bedingungen, do...while läuft mindestens einmal
• for...of für Werte, for...in für Objektschlüssel
• break beendet, continue überspringt, Labels verlassen mehrere Ebenen
• Schleifenvariable ändern, sonst Endlosschleife

for (let i = 1; i <= 5; i++) {
  console.log("Runde", i);
}

10. Funktionen

• function name(parameter) { return wert; }
• Ohne return ist das Ergebnis undefined
• Standardwerte (x = 1), Rest-Parameter (...args), Objekt-Parameter
• Funktionen sind Werte und können übergeben werden
• Rekursion braucht eine Abbruchbedingung

function begruessen(name) {
  return "Hallo " + name + "!";
}
console.log(begruessen("Mia"));
console.log(begruessen("Tom"));

11. Arrow-Funktionen

• (a, b) => a + b ist die Kurzform; bei einem Ausdruck entfallen {} und return
• Objekt zurückgeben: () => ({ ... })
• Arrow-Funktionen übernehmen this von außen
• Sie sind ideal für Callbacks; nicht für Konstruktoren
• Funktionen höherer Ordnung nehmen Funktionen auf oder geben welche zurück

const addiere = (a, b) => a + b;
const quadrat = x => x * x;               // ein Parameter: Klammern optional
const hallo = () => "Hallo";              // keine Parameter
const rechne = (a, b) => {                // Block: return nötig
  const summe = a + b;
  return summe * 2;
};
console.log(addiere(2, 3), quadrat(6), hallo(), rechne(1, 2));

12. Gültigkeitsbereich und Closures

• Scope-Kette: Von innen nach außen wird nach Namen gesucht
• let und const gelten im Block, var in der Funktion
• Eine Closure behält Zugriff auf die Variablen ihrer Entstehung
• Closures erzeugen private Zustände, Caches und Fabriken
• Globale Variablen vermeiden

const global = "überall";
function f() {
  const lokal = "nur hier";
  if (true) {
    const imBlock = "nur im Block";
    console.log(global, lokal, imBlock);
  }
  try { console.log(imBlock); } catch (e) { console.log(e.name); }
}
f();
try { console.log(lokal); } catch (e) { console.log(e.name); }

13. Arrays

• Index beginnt bei 0; length ist die Anzahl; at(-1) ist das letzte Element
• push/pop arbeiten hinten, unshift/shift vorn, splice in der Mitte
• slice, Spread und structuredClone kopieren
• sort() ohne Vergleichsfunktion sortiert Text, für Zahlen (a, b) => a - b
• includes, find, some, every zum Suchen und Prüfen

const farben = ["rot", "grün", "blau"];
console.log(farben[0], farben[2], farben[5]);
console.log(farben.length);
farben[1] = "gelb";
farben[3] = "lila";
console.log(farben);
console.log(farben.at(-1));     // letztes Element

14. map, filter, reduce und Co.

• map wandelt um, filter wählt aus, reduce fasst zusammen
• Sie liefern neue Werte und ändern das Original nicht
• Pipelines aus filter, map, reduce ersetzen viele Schleifen
• flatMap, some, every, find, Object.groupBy ergänzen die Palette
• Vorsicht bei map(parseInt): das zweite Argument ist der Index

["a", "b", "c"].forEach((x, i) => console.log(i, x));

15. Objekte

• Objekte speichern Schlüssel-Wert-Paare; Zugriff mit .name oder ["name"]
• Object.keys/values/entries/fromEntries wandeln zwischen Objekt und Array
• Spread { ...a } kopiert flach, structuredClone tief
• Object.freeze macht ein Objekt unveränderlich
• In Methoden zeigt this auf das Objekt; bind fixiert es

const person = {
  name: "Mia",
  alter: 17,
  hobbys: ["Lesen", "Rad"],
  adresse: { stadt: "Köln", plz: "50667" },
  vorstellen() { return `Ich bin ${this.name}`; },
};
console.log(person.name, person["alter"]);
console.log(person.adresse.stadt, person.hobbys[1]);
console.log(person.vorstellen());

16. Destructuring, Spread und Rest

• const [a, b] = array und const { x, y } = objekt entpacken Werte
• Umbenennen (x: neu), Standardwerte (x = 1), Rest (...rest)
• Spread ... verteilt Arrays/Objekte beim Erzeugen oder Aufrufen
• Rest ... sammelt übrige Werte beim Empfangen
• Mit Spread änderst du Daten, ohne das Original zu verändern

const [a, b, c] = [10, 20, 30];
console.log(a, b, c);
const [erstes, , drittes] = ["x", "y", "z"];     // Lücke überspringt
console.log(erstes, drittes);
const [kopf, ...rest] = [1, 2, 3, 4];
console.log(kopf, rest);
const [p = 5, q = 6] = [1];                      // Standardwerte
console.log(p, q);
let m = 1, n = 2;
[m, n] = [n, m];                                 // Tauschen
console.log(m, n);

17. Map, Set und WeakMap

• Set: Menge ohne Duplikate (add, has, delete, size)
• Map: Schlüssel-Wert mit beliebigen Schlüsseln, behält die Reihenfolge
• Duplikate entfernen: [...new Set(array)]
• WeakMap/WeakSet: schwache Verweise ohne Speicherlecks
• Mit Maps kannst du Zähler und Gruppierungen sauber bauen

const s = new Set([1, 2, 2, 3, 3, 3]);
console.log(s, s.size);
s.add(4); s.add(2);
console.log(s.has(4), s.has(9));
s.delete(1);
console.log([...s]);
console.log([...new Set("mississippi")].join(""));

18. JSON

• JSON.stringify macht aus Daten Text, JSON.parse aus Text Daten
• Funktionen und undefined gehen verloren, Datum wird zu Text
• parse bei fremden Daten in try/catch setzen
• Mit null, 2 formatierst du lesbar
• structuredClone ist die bessere Tiefenkopie

{
  "name": "Mia",
  "alter": 17,
  "hobbys": ["Lesen", "Rad"],
  "aktiv": true,
  "partner": null
}

19. Datum und Zeit

• Date speichert Millisekunden seit 1970 (UTC)
• Monate sind 0-basiert, Tage ab 1
• toISOString() liefert das ISO-Format; toLocaleDateString formatiert regional
• Differenz zweier Daten = Millisekunden
• Speichere Zeitpunkte in UTC und rechne erst zur Anzeige um

const jetzt = new Date();
console.log(jetzt instanceof Date, typeof Date.now());

const d1 = new Date(2025, 11, 24, 18, 30);    // Monat 0-basiert! 11 = Dezember
const d2 = new Date("2025-03-08T14:30:00Z");  // ISO-Format, Z = UTC
const d3 = new Date(0);
console.log(d1.getFullYear(), d1.getMonth(), d1.getDate());
console.log(d2.toISOString());
console.log(d3.toISOString());

20. Reguläre Ausdrücke

• Regex: /muster/flags; g alle, i ohne Groß/Klein, m mehrzeilig
• test, match, matchAll, replace, split sind die Hauptwerkzeuge
• Gruppen ( ) und benannte Gruppen (?<name> ) holen Teile heraus
• ? nach Quantor macht ihn sparsam
• Sonderzeichen mit \ maskieren, Muster lesbar halten

const text = "Meine Nummer ist 12345, deine 67890.";
console.log(/\d+/.test(text));            // gibt es Ziffern?
console.log(text.match(/\d+/)[0]);        // erster Treffer
console.log(text.match(/\d+/g));          // alle Treffer (Flag g)
console.log(text.replace(/\d/g, "#"));

21. Klassen und Objekte

• class mit constructor, Methoden, get/set und static
• Private Felder mit #name
• extends und super für Vererbung
• Hinter den Klassen steckt die Prototypenkette
• Methoden als Callback verlieren this: mit Arrow-Feld oder bind lösen

class Hund {
  constructor(name, alter) {
    this.name = name;
    this.alter = alter;
  }
  bellen() {
    return `${this.name} sagt: Wuff!`;
  }
  get menschenJahre() {
    return this.alter * 7;
  }
}
const rex = new Hund("Rex", 3);
console.log(rex.bellen(), rex.menschenJahre);
console.log(rex instanceof Hund, typeof Hund);

22. Fehlerbehandlung

• try { } catch (e) { } finally { } fängt Fehler ab und räumt auf
• throw new Error("Text") löst Fehler aus
• Fehlertypen: TypeError, ReferenceError, RangeError, SyntaxError
• Eigene Fehler: class X extends Error
• Fehler nicht verschlucken, unbekannte weiterreichen

try {
  console.log("vorher");
  JSON.parse("{kaputt");
  console.log("wird nie erreicht");
} catch (fehler) {
  console.log("Fehler:", fehler.name);
} finally {
  console.log("läuft immer");
}
console.log("Programm läuft weiter");

23. Module: import und export

• export gibt frei, import holt ins Modul
• Pro Datei ein Default-Export, beliebig viele benannte Exporte
• Im Browser <script type="module">
• Node.js: ESM (import) oder CommonJS (require)
• import() lädt dynamisch bei Bedarf

// mathe.js
export const PI = 3.14159;

export function quadrat(x) {
  return x * x;
}

export class Rechner {
  addiere(a, b) { return a + b; }
}

const geheim = 42;            // nicht exportiert: von außen unsichtbar

export default function hauptfunktion() {   // genau ein Default-Export pro Datei
  return "Standard";
}

24. Iteratoren und Generatoren

• Iterierbare Objekte haben [Symbol.iterator](), Iteratoren next()
• function* und yield erzeugen Werte nacheinander und pausieren dazwischen
• Generatoren sind lazy und können unendlich sein
• yield* delegiert an einen anderen Iterierbaren
• async function* und for await...of für Datenströme

const it = [10, 20][Symbol.iterator]();
console.log(it.next());
console.log(it.next());
console.log(it.next());

25. Asynchron: Callbacks und Promises

• Lange Aufgaben blockieren nicht: Ergebnisse kommen später per Callback oder Promise
• Ein Promise ist pending, fulfilled oder rejected
• .then() verkettet, .catch() fängt Fehler, .finally() räumt auf
• Promise.all, allSettled, race, any kombinieren mehrere Promises
• Promise-Callbacks (Microtasks) laufen vor Timern

console.log("1: Start");
setTimeout(() => console.log("3: nach 100 ms"), 100);
setTimeout(() => console.log("2b: nach 0 ms (trotzdem später!)"), 0);
console.log("2: Ende des Skripts");

26. async/await und fetch

• async macht eine Funktion zu einer, die ein Promise liefert
• await wartet auf ein Promise, ohne das Programm zu blockieren
• Fehler mit try/catch abfangen
• Unabhängiges mit Promise.all parallel ausführen
• fetch wirft bei 404/500 nicht: antwort.ok prüfen

const warte = (ms, wert) => new Promise(r => setTimeout(() => r(wert), ms));

async function ablauf() {
  console.log("start");
  const a = await warte(50, "A");
  console.log("erhalten:", a);
  const b = await warte(10, "B");
  return a + b;
}

ablauf().then(erg => console.log("Ergebnis:", erg));
console.log("läuft schon weiter");

27. Timer und die Event Loop

• JavaScript hat einen Ablauf; langsame Dinge laufen im Hintergrund und melden sich per Callback
• Microtasks (Promises) laufen vor Macrotasks (Timer, Events)
• Lange Schleifen blockieren alles: aufteilen oder in einen Worker verlagern
• setTimeout/setInterval mit clear... abbrechen
• Debounce fasst schnelle Ereignisse zusammen

let n = 0;
const id = setInterval(() => {
  n++;
  console.log("Tick", n);
  if (n === 3) {
    clearInterval(id);
    console.log("gestoppt");
  }
}, 20);

const abbruch = setTimeout(() => console.log("wird nie ausgegeben"), 500);
clearTimeout(abbruch);

28. Das DOM: Elemente finden und ändern

• Das DOM ist der Objektbaum der Seite
• querySelector(All) findet Elemente mit CSS-Selektoren
• textContent für Text (sicher), innerHTML nur mit vertrauenswürdigem HTML
• createElement, append, remove bauen die Seite um
• classList und dataset für Klassen und data-*-Attribute

document
 └─ html
     ├─ head
     └─ body
         ├─ h1  "Titel"
         └─ ul
             ├─ li  "Eins"
             └─ li  "Zwei"

29. Ereignisse (Events)

• addEventListener("click", funktion) meldet eine Reaktion an
• Das Event-Objekt liefert target, key, Position usw.
• preventDefault() verhindert das Standardverhalten (Link, Formular)
• Ereignisse steigen auf: Event Delegation spart Listener
• Nutze Buttons und Formularelemente, damit alles per Tastatur geht

<button id="b">Klick mich</button>
<p id="ausgabe">noch nichts</p>
<script>
  const b = document.getElementById("b");
  let zaehler = 0;
  b.addEventListener("click", (event) => {
    zaehler++;
    document.getElementById("ausgabe").textContent =
      `Klick Nr. ${zaehler} auf <${event.target.tagName.toLowerCase()}>`;
  });
</script>

30. Formulare und Eingaben

• FormData und Object.fromEntries holen alle Werte auf einmal
• value ist immer Text, bei Zahlen mit Number() umwandeln
• required, pattern und checkValidity() prüfen im Browser
• Der Server muss trotzdem prüfen
• Labels, passende Typen und Textmeldungen halten Formulare zugänglich

<form id="f">
  <label>Name <input name="name" value="Mia"></label><br>
  <label>Alter <input name="alter" type="number" value="17"></label><br>
  <label><input name="newsletter" type="checkbox" checked> Newsletter</label><br>
  <label>Farbe
    <select name="farbe"><option>rot</option><option selected>blau</option></select>
  </label><br>
  <button>Senden</button>
</form>
<pre id="ausgabe"></pre>
<script>
  document.getElementById("f").addEventListener("submit", (e) => {
    e.preventDefault();
    const daten = new FormData(e.target);
    const objekt = Object.fromEntries(daten);
    objekt.newsletter = e.target.newsletter.checked;
    objekt.alter = Number(objekt.alter);
    document.getElementById("ausgabe").textContent = JSON.stringify(objekt, null, 2);
  });
</script>

31. Daten im Browser speichern

• localStorage speichert dauerhaft nur Text; Objekte über JSON
• sessionStorage gilt nur für den Tab
• Zugriffe in try/catch setzen und Daten beim Lesen prüfen
• Keine Passwörter im Web-Speicher; für Anmeldungen HttpOnly-Cookies
• Tracking-Cookies brauchen Einwilligung

localStorage.setItem("name", "Mia");
console.log(localStorage.getItem("name"));      // "Mia"
console.log(localStorage.getItem("gibtsnicht")); // null
localStorage.removeItem("name");
localStorage.clear();                            // alles löschen
console.log(localStorage.length);

32. Nützliche Browser-APIs

• URL und URLSearchParams zerlegen und bauen Adressen sicher
• Beobachter (IntersectionObserver & Co.) ersetzen Scroll-Abfragen
• Sensible APIs (Standort, Kamera) fragen immer um Erlaubnis
• Web Worker verlagern schwere Arbeit aus dem Hauptthread
• crypto für Zufall mit Sicherheitsanspruch; Feature Detection statt Browser-Raten

const url = new URL("https://beispiel.de/suche?q=java+script&seite=2#ergebnis");
console.log(url.hostname, url.pathname);
console.log(url.searchParams.get("q"), url.searchParams.get("seite"));
console.log(url.hash);

url.searchParams.set("seite", 3);
url.searchParams.append("tag", "neu");
console.log(url.toString());

console.log(new URLSearchParams({ a: 1, b: "x y" }).toString());
console.log(encodeURIComponent("Köln & Bonn"));

33. Zeichnen mit Canvas und Animation

• canvas.getContext("2d") liefert den Zeichenkontext; Ursprung oben links
• Rechtecke, Pfade, Kreise, Text und Bilder lassen sich zeichnen
• Animation: requestAnimationFrame und Bewegung nach vergangener Zeit
• Spielschleife: Eingabe, Zustand ändern, zeichnen
• Kollision zweier Rechtecke durch vier Vergleiche

<canvas id="c" width="300" height="160" style="border:1px solid #888"></canvas>
<script>
  const ctx = document.getElementById("c").getContext("2d");

  ctx.fillStyle = "steelblue";
  ctx.fillRect(20, 20, 100, 60);            // x, y, Breite, Höhe

  ctx.strokeStyle = "crimson";
  ctx.lineWidth = 4;
  ctx.strokeRect(140, 20, 100, 60);

  ctx.beginPath();
  ctx.arc(70, 120, 25, 0, Math.PI * 2);     // Kreis: x, y, Radius, Start, Ende
  ctx.fillStyle = "gold";
  ctx.fill();
  ctx.stroke();

  ctx.font = "20px sans-serif";
  ctx.fillStyle = "black";
  ctx.fillText("Hallo Canvas", 130, 130);
</script>

34. Node.js Grundlagen

• Node.js führt JavaScript ohne Browser aus (kein DOM, dafür fs, http, process)
• fs/promises und path für Dateien und Pfade
• process.argv, process.env für Argumente und Umgebung
• Streams für große Daten, EventEmitter für Ereignisse
• Eingaben nie ungeprüft an Shell-Befehle hängen

node --version
npm --version
node hallo.js
node                # interaktive Konsole (REPL)

35. npm und Pakete

• package.json beschreibt das Projekt, package-lock.json fixiert Versionen
• npm install installiert, npm run <name> führt Skripte aus, npx startet Werkzeuge
• SemVer: MAJOR.MINOR.PATCH; ^ erlaubt Minor- und Patch-Updates
• node_modules nicht ins Repository
• Pakete prüfen, npm audit nutzen

mkdir mein-projekt
cd mein-projekt
npm init -y            # erzeugt package.json mit Standardwerten

36. Code testen

• Tests prüfen Code automatisch (node --test, Vitest, Jest)
• Arrange – Act – Assert; klein, unabhängig, sprechende Namen
• Normalfälle, Grenzfälle und Fehlerfälle testen
• Async-Tests mit async/await und assert.rejects
• Abhängigkeiten über Parameter hereingeben, damit sie sich ersetzen lassen

const test = require("node:test");
const assert = require("node:assert/strict");

function istPalindrom(text) {
  const sauber = text.toLowerCase().replace(/[^a-z0-9]/g, "");
  return sauber === [...sauber].reverse().join("");
}

test("erkennt Palindrome", () => {
  assert.equal(istPalindrom("Anna"), true);
  assert.equal(istPalindrom("Ein Neger mit Gazelle zagt im Regen nie"), true);
});
test("erkennt Nicht-Palindrome", () => {
  assert.equal(istPalindrom("Hallo"), false);
});
test("leerer Text ist ein Palindrom", () => {
  assert.equal(istPalindrom(""), true);
});

37. Werkzeuge: Linter, Formatter, TypeScript

• ESLint findet Fehler, Prettier formatiert einheitlich
• Husky/CI führen Prüfungen automatisch aus
• TypeScript ergänzt Typen und findet Fehler vor der Ausführung
• Vite/esbuild bündeln den Code für den Browser
• Frameworks (React, Vue, Svelte) bauen auf solidem JavaScript auf

npm install -D eslint @eslint/js
npx eslint .
npx eslint . --fix        # behebt, was automatisch geht

38. Sauberer Code und häufige Fallen

• Sprechende Namen, kleine Funktionen, frühe Rückgabe
• const/let, ===, Template-Strings, async/await
• Fallen: Typumwandlung, this, flache Kopien, vergessene await, Objektgleichheit
• Eingaben nie ungeprüft in innerHTML; keine Geheimnisse im Frontend
• Erst messen, dann optimieren

// Schlecht
function f(a) { if (a) { if (a.length > 0) { if (a[0] > 5) { return true; } } } return false; }

// Besser
const MIN_WERT = 5;
function ersterWertIstGross(liste) {
  if (!liste?.length) return false;
  return liste[0] > MIN_WERT;
}
console.log(f([9]), ersterWertIstGross([9]), ersterWertIstGross([]));

39. Projekt: Eine Aufgabenliste

• Ein kleines Projekt verbindet Daten, Darstellung und Ereignisse
• Zustand (Array) ändern, danach neu zeichnen: ein einfaches, robustes Muster
• Event Delegation, textContent, try/catch beim Speichern und ARIA-Attribute gehören zur Grundausstattung
• Trenne reine Logik von DOM-Code, damit du sie testen kannst

<style>
  body { font-family: system-ui, sans-serif; max-width: 420px; margin: 1rem auto; padding: 0 1rem; }
  form { display: flex; gap: .5rem; }
  input[type=text] { flex: 1; padding: .5rem; }
  ul { list-style: none; padding: 0; }
  li { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid #ddd; }
  li.fertig span { text-decoration: line-through; color: #888; }
  li span { flex: 1; }
  .filter button[aria-pressed=true] { font-weight: bold; text-decoration: underline; }
</style>

<h1>Aufgaben</h1>
<form id="neu">
  <label class="visually-hidden" for="text" style="position:absolute;left:-9999px">Neue Aufgabe</label>
  <input type="text" id="text" placeholder="Was ist zu tun?" required maxlength="80">
  <button>Hinzufügen</button>
</form>
<div class="filter" role="group" aria-label="Filter">
  <button data-filter="alle" aria-pressed="true">Alle</button>
  <button data-filter="offen" aria-pressed="false">Offen</button>
  <button data-filter="fertig" aria-pressed="false">Erledigt</button>
</div>
<ul id="liste"></ul>
<p id="zaehler" role="status"></p>

<script>
  const SCHLUESSEL = "todo-demo";
  let aufgaben = lade();
  let filter = "alle";

  function lade() {
    try {
      const daten = JSON.parse(localStorage.getItem(SCHLUESSEL));
      return Array.isArray(daten) ? daten.filter(a => a && typeof a.text === "string") : [];
    } catch { return []; }
  }
  function speichere() {
    try { localStorage.setItem(SCHLUESSEL, JSON.stringify(aufgaben)); } catch {}
  }

  function sichtbar() {
    if (filter === "offen") return aufgaben.filter(a => !a.fertig);
    if (filter === "fertig") return aufgaben.filter(a => a.fertig);
    return aufgaben;
  }

  function zeichne() {
    const liste = document.getElementById("liste");
    liste.replaceChildren();                           // Liste leeren
    for (const a of sichtbar()) {
      const li = document.createElement("li");
      li.classList.toggle("fertig", a.fertig);
      li.dataset.id = a.id;

      const box = document.createElement("input");
      box.type = "checkbox";
      box.checked = a.fertig;
      box.setAttribute("aria-label", "Erledigt: " + a.text);

      const text = document.createElement("span");
      text.textContent = a.text;                        // textContent: sicher gegen XSS

      const weg = document.createElement("button");
      weg.textContent = "×";
      weg.setAttribute("aria-label", "Löschen: " + a.text);

      li.append(box, text, weg);
      liste.append(li);
    }
    const offen = aufgaben.filter(a => !a.fertig).length;
    document.getElementById("zaehler").textContent =
      offen === 1 ? "1 Aufgabe offen" : `${offen} Aufgaben offen`;
  }

  document.getElementById("neu").addEventListener("submit", (e) => {
    e.preventDefault();
    const feld = document.getElementById("text");
    const text = feld.value.trim();
    if (!text) return;
    aufgaben.push({ id: Date.now(), text, fertig: false });
    feld.value = "";
    speichere(); zeichne();
  });

  // Event Delegation: ein Listener für alle Einträge
  document.getElementById("liste").addEventListener("click", (e) => {
    const li = e.target.closest("li");
    if (!li) return;
    const id = Number(li.dataset.id);
    if (e.target.matches("input[type=checkbox]")) {
      const a = aufgaben.find(x => x.id === id);
      a.fertig = e.target.checked;
    } else if (e.target.matches("button")) {
      aufgaben = aufgaben.filter(x => x.id !== id);
    } else return;
    speichere(); zeichne();
  });

  document.querySelector(".filter").addEventListener("click", (e) => {
    const knopf = e.target.closest("button[data-filter]");
    if (!knopf) return;
    filter = knopf.dataset.filter;
    for (const b of document.querySelectorAll(".filter button")) {
      b.setAttribute("aria-pressed", String(b === knopf));
    }
    zeichne();
  });

  zeichne();
</script>

40. Nachschlagen: Spickzettel

• Dieses Kapitel ist zum Nachschlagen gedacht; die Details stehen in den Kapiteln davor
• Im Zweifel: MDN
• Üben mit eigenen kleinen Projekten schlägt Lesen