it-praxisportal/courses/javascript/04_dom_und_events/index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS 04: DOM-Manipulation &amp; Events</title>
  <link rel="stylesheet" href="../../../assets/style.css">
</head>
<body>
  <div class="app-layout">
    <div class="app-main">
      <header>
        <div class="header-container">
          <div class="header-badge">🌐 JavaScript DOM &amp; Web APIs</div>
          <h1>JS 04: DOM-Manipulation &amp; Events</h1>
          <p>Lerne dynamische Webseiten zu bauen mit dem Document Object Model (DOM), Event-Listenern und UI-Zustandslogik.</p>
        </div>
      </header>

      <main class="container">
        <!-- 1. THEORIE: DOM BAUM & SELEKTOREN -->
        <section class="card">
          <h2>🌳 1. Der DOM-Baum &amp; Selektoren</h2>
          <p>Der Browser übersetzt HTML in eine Baumstruktur von Objekten (den <strong>DOM-Baum</strong>). Mit modernen Selektoren greifst du gezielt auf jedes Element zu:</p>
          
          <div style="background: var(--bg-subtle); padding: 16px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.4; margin-bottom: 16px; border: 1px solid var(--border-color);">
            document<br>
            └── &lt;html&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;├── &lt;head&gt; (title, meta, link)<br>
            &nbsp;&nbsp;&nbsp;&nbsp;└── &lt;body&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── &lt;h1 id="titel"&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── &lt;button class="btn"&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── &lt;ul id="aufgaben"&gt; ── &lt;li class="erledigt"&gt;
          </div>

          <pre><code>// 🎯 Einzelnes Element mit CSS-Selektor ansprechen:
const titel = document.querySelector("#titel");
const button = document.querySelector(".btn-primary");

// 🎯 Alle passenden Elemente als NodeList abfragen:
const alleItems = document.querySelectorAll("ul#aufgaben > li");
alleItems.forEach(item => console.log(item.textContent));</code></pre>
        </section>

        <!-- 2. THEORIE: ELEMENTE MANIPULIEREN -->
        <section class="card">
          <h2>🎨 2. Elemente manipulieren &amp; stylen</h2>
          <p>Über Eigenschaften wie <code>textContent</code> und <code>classList</code> veränderst du Texte und Klassen zur Laufzeit:</p>

          <pre><code>const karte = document.querySelector(".info-karte");

// 🔒 Sicherer Text (verhindert Cross-Site-Scripting / XSS):
karte.textContent = "Aktualisierter Status: Online";

// 🏷️ CSS-Klassen verwalten mit classList:
karte.classList.add("aktiv");       // Klasse hinzufügen
karte.classList.remove("inaktiv");  // Klasse entfernen
karte.classList.toggle("hervorgehoben"); // Ein- oder ausschalten
console.log(karte.classList.contains("aktiv")); // true</code></pre>
        </section>

        <!-- 3. THEORIE: EVENTS -->
        <section class="card">
          <h2>⚡ 3. Event-Driven Architecture (Reaktivität)</h2>
          <p>Mit <code>addEventListener()</code> reagiert deine Website sofort auf Aktionen des Nutzers (Klicks, Tastenanschläge, Formularabsendungen):</p>

          <pre><code>const saveBtn = document.querySelector("#btn-save");

saveBtn.addEventListener("click", (event) => {
  console.log("Button geklickt! Ziel-Element:", event.target);
  saveBtn.textContent = "Gespeichert! ✅";
  saveBtn.classList.add("btn-success");
});</code></pre>

          <div class="box box-analogie">
            <div class="box-title">🎼 Didaktische Analogie: Der Dirigent des Web-Orchesters</div>
            <p>HTML ist die <strong>Partitur</strong>, der Browser das <strong>Orchester</strong> und dein JavaScript-Code der <strong>Dirigent</strong>: Selektoren sind der gezielte Blick zu den Instrumentengruppen, DOM-Manipulation ist die Taktstockbewegung für Lautstärke oder Klang, und Event-Listener sind das aufmerksame Lauschen auf den richtigen Takt und Applaus.</p>
          </div>
        </section>

        <!-- 4. CHEAT-SHEET -->
        <section class="card">
          <h2>📑 4. Cheat-Sheet: DOM-Methoden &amp; Events</h2>
          <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; font-size: 0.9rem; text-align: left;">
              <thead>
                <tr style="border-bottom: 2px solid var(--border-color); background: var(--bg-subtle);">
                  <th style="padding: 10px;">Methode / Eigenschaft</th>
                  <th style="padding: 10px;">Beispiel</th>
                  <th style="padding: 10px;">Wirkung</th>
                </tr>
              </thead>
              <tbody>
                <tr style="border-bottom: 1px solid var(--border-color);">
                  <td style="padding: 10px;"><code>document.querySelector(sel)</code></td>
                  <td style="padding: 10px;"><code>document.querySelector(".btn")</code></td>
                  <td style="padding: 10px;">Findet das erste passende Element</td>
                </tr>
                <tr style="border-bottom: 1px solid var(--border-color);">
                  <td style="padding: 10px;"><code>document.querySelectorAll(sel)</code></td>
                  <td style="padding: 10px;"><code>document.querySelectorAll("li")</code></td>
                  <td style="padding: 10px;">Findet alle passenden Elemente</td>
                </tr>
                <tr style="border-bottom: 1px solid var(--border-color);">
                  <td style="padding: 10px;"><code>document.createElement(tag)</code></td>
                  <td style="padding: 10px;"><code>const btn = document.createElement("button")</code></td>
                  <td style="padding: 10px;">Erstellt ein neues Element im Speicher</td>
                </tr>
                <tr style="border-bottom: 1px solid var(--border-color);">
                  <td style="padding: 10px;"><code>element.textContent</code></td>
                  <td style="padding: 10px;"><code>el.textContent = "Hallo Welt"</code></td>
                  <td style="padding: 10px;">Liest oder setzt reinen Text</td>
                </tr>
                <tr style="border-bottom: 1px solid var(--border-color);">
                  <td style="padding: 10px;"><code>element.classList.add/remove/contains</code></td>
                  <td style="padding: 10px;"><code>el.classList.contains("aktiv")</code></td>
                  <td style="padding: 10px;">Manipuliert und prüft CSS-Klassen</td>
                </tr>
                <tr>
                  <td style="padding: 10px;"><code>element.addEventListener(ev, fn)</code></td>
                  <td style="padding: 10px;"><code>el.addEventListener("click", () => ...)</code></td>
                  <td style="padding: 10px;">Registriert Callback bei Ereignis</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>

        <!-- 5. AUFGABEN CHECKLISTE -->
        <section class="card">
          <h2>🎯 Aufgaben &amp; Checkliste in <code>aufgabe.js</code></h2>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t1">
            <label class="task-label" for="t1"><strong>TODO 1:</strong> <code>erzeugeButtonElement(text, cssKlasse, clickCallback)</code> mit <code>createElement</code> &amp; <code>addEventListener</code> schreiben.</label>
          </div>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t2">
            <label class="task-label" for="t2"><strong>TODO 2:</strong> <code>erstelleListenEintrag(titel, istErledigt = false)</code> mit Klasse <code>"erledigt"</code> erstellen.</label>
          </div>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t3">
            <label class="task-label" for="t3"><strong>TODO 3:</strong> <code>filtereElementeNachKlasse(elementListe, cssKlasse)</code> mit <code>classList.contains</code> filtern.</label>
          </div>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t4">
            <label class="task-label" for="t4"><strong>TODO 4:</strong> <code>aktualisiereZaehlerAnzeige(aktuellerWert, schwellenwert = 10)</code> für testbare State-Logik umsetzen.</label>
          </div>

          <div class="box box-tipp" style="margin-top: 20px;">
            <div class="box-title">💡 Architektur-Tipp: Headless-UI &amp; Unittests</div>
            <p>Indem du DOM-Helfer und Zustandslogik in modulare Funktionen aufteilst, kann dein Code sowohl im Webbrowser als auch in isolierten Testumgebungen (wie Web-Workern und CI-Pipelines) zuverlässig getestet werden.</p>
          </div>

          <div style="margin-top: 25px; display: flex; gap: 12px; flex-wrap: wrap;">
            <a href="../../../workspace.html?course=javascript&track=track_1_grundlagen&chapter=04_dom_und_events" class="btn" style="background: #eab308; color: #000; font-weight: 700;">💻 In Web-IDE öffnen &rarr;</a>
            <a href="../03_objekte_und_destructuring/index.html" class="btn btn-secondary">&larr; Zurück zu JS 03</a>
            <a href="../05_callbacks_und_promises/index.html" class="btn btn-secondary">Weiter zu JS 05 &rarr;</a>
          </div>
        </section>
      </main>
    </div>
  </div>
</body>
</html>