EIS - JavaScript & DOM

Mit JavaScript Webseiten verändern (DOM)

In dieser Lektion lernen Sie, wie eine Webseite durch JavaScript-Code verändert werden kann. Zielsetzung ist es, dass Ergebnisse von Berechnungen direkt auf einer Webseite dargestellt werden können. Darüber hinaus sind auch weitere Dinge möglich:

Auslesen von Eingaben aus Formularen
Veränderung von Darstellungsattributen von HTML-Elementen (z. B. Farbe) für ein Highlighting
Ein- und Ausblenden von Inhaltsbereichen (z. B. Ein- und Ausklappen)
Austausch von Inhaltsbereichen (z. B. Bilder), etwa für automatische Bildwechsel

Ändern von HTML-Elementen mittels des Document Object Model (DOM)

HTML-Seiten werden in einer hierarchischen Baumstruktur beschrieben:

HTML

<html>
    <head>
        <meta charset="UTF-8">
        <title>...</title>
    </head>
    <body>
        <h1>...</h1>
        <p>...</p>
    </body>
</html>

Jedes HTML-Element wird durch einen Knoten im Baum repräsentiert. Von JavaScript aus kann auf diesen Baum direkt zugegriffen werden – Knoteninhalte können ausgelesen und verändert, Knoten hinzugefügt oder gelöscht werden. Dafür stellt der Browser das document-Objekt bereit, das das aktuelle HTML-Dokument als Baumstruktur repräsentiert. Eine detaillierte Beschreibung finden Sie bei MDN.

Eine häufig verwendete Vorgehensweise ist die Vergabe einer eindeutigen ID an ein HTML-Element und der Zugriff darauf über getElementById:

HTML

<html>
    <head>
        <meta charset="UTF-8">
        <title>Dynamic HTML Elements with JavaScript</title>
        <script src="scripts/ex-p-changer.js"></script>
    </head>
    <body>
        <h1>Dynamic HTML Elements with JavaScript</h1>
        <p>The static part of the HTML page.</p>
        <p id="output"></p>
    </body>
</html>

Die zugehörige JavaScript-Datei:

JavaScript

const element = document.getElementById('output');
element.textContent = "Dieser Absatz wurde von JavaScript eingefuegt.";

Berechnungen per Knopfdruck initiieren

Ein wichtiges Element auf dem Weg zu interaktiven Webseiten ist die Verarbeitung von Nutzereingaben und -aktionen:

Ein Mausklick (auf einem Button)
Die Texteingabe in einem Eingabefeld
Das Eintreten und Verlassen eines Webseitenbereichs mit dem Mauszeiger

In JavaScript werden solche Aktionen als Events bezeichnet. JavaScript bietet Mechanismen zum Erkennen und zur Behandlung solcher Events (Event Handling). Eine vollständige Liste finden Sie bei selfhtml oder MDN.

Das folgende Beispiel zeigt einen Button mit Event Handler:

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Button with JavaScript</title>
        <script src="scripts/example-button.js"></script>
    </head>
    <body>
        <h1>Dynamic HTML contents with JavaScript</h1>
        <p>Press the button to add dynamic content:</p>
        <button type="button" id="button1"
                onclick="handleButtonClickAndAddContent();">Go!</button>
        <p id="output"></p>
    </body>
</html>

Die zugehörige JavaScript-Datei (scripts/example-button.js):

JavaScript

function handleButtonClickAndAddContent() {
    const element = document.getElementById('output');
    element.textContent = "Dieser Text wurde per Knopfdruck eingefuegt!";
}

Formulare und Eingabefelder nutzen

HTML stellt neben Buttons weitere Eingabeelemente zur Verfügung. Innerhalb von Formularen (<form>) können mit dem <input>-Element z. B. Texteingabefelder, Slider und Checkboxen umgesetzt werden. Eine Übersicht finden Sie bei selfhtml.

Das folgende Beispiel zeigt ein Formular mit JavaScript-Verarbeitung. Der Zugriff auf den eingegebenen Wert erfolgt über .value:

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Using Forms with JavaScript</title>
        <script src="scripts/example-simple-form.js"></script>
    </head>
    <body>
        <h1>A Simple Form with JavaScript</h1>
        <form>
            <label for="firstname">Please enter your firstname:</label>
            <input id="firstname" name="firstname">
        </form>
        <button type="button" id="submit"
                onclick="handleForm()">Submit</button>
        <p id="output"></p>
    </body>
</html>

Die JavaScript-Datei:

JavaScript

function handleForm() {
    const inputElement = document.getElementById("firstname");
    const outputElement = document.getElementById("output");
    outputElement.textContent = `Hallo ${inputElement.value}!`;
}

Moderne Event-Behandlung mit addEventListener

In der Praxis sollte onclick="..." im HTML vermieden werden – es vermischt Struktur und Verhalten. Der moderne Weg ist addEventListener in der JavaScript-Datei:

JavaScript

// Warten, bis die Seite geladen ist
document.addEventListener("DOMContentLoaded", () => {
    const button = document.getElementById("button1");
    const output = document.getElementById("output");

    button.addEventListener("click", () => {
        output.textContent = "Button wurde geklickt!";
    });
});

Das HTML bleibt dadurch sauber – kein JavaScript mehr in HTML-Attributen:

HTML

<button type="button" id="button1">Go!</button>
<p id="output"></p>

Faustregel: Kein JavaScript in HTML-Attributen. Event Handler gehören in die .js-Datei.

querySelector – Elemente flexibel finden

Neben getElementById gibt es querySelector, das CSS-Selektoren verwendet – die gleiche Syntax wie in eurer style.css:

JavaScript

// Ein Element per ID
const output = document.querySelector("#output");

// Das erste Element mit einer Klasse
const card = document.querySelector(".card");

// Alle Elemente mit einer Klasse
const allCards = document.querySelectorAll(".card");
allCards.forEach(card => {
    card.style.border = "1px solid #e2e8f0";
});

Event Handler mit Parametern nutzen

Die bisherigen Event-Handler-Funktionen sind auf ein bestimmtes HTML-Element zugeschnitten. Um Event Handler wiederverwenden zu können, kann der Funktion ein event-Parameter übergeben werden, der Kontextinformationen zum ausgelösten Ereignis enthält:

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Button with JavaScript</title>
        <script src="scripts/example-2-button.js"></script>
    </head>
    <body>
        <h1>Dynamic HTML contents with JavaScript</h1>
        <p>Press a button to add dynamic content:</p>
        <button type="button" id="button1"
                onclick="handleButtonClickAndAddContent(event);">Button 1</button>
        <button type="button" id="button2"
                onclick="handleButtonClickAndAddContent(event);">Button 2</button>
        <p id="output"></p>
    </body>
</html>

Die JavaScript-Datei:

JavaScript

function handleButtonClickAndAddContent(event) {
    const element = document.getElementById('output');
    const buttonText = event.currentTarget.textContent;
    element.textContent = `Geklickt: ${buttonText}`;
}

Übungsaufgaben

Aufgabe 1: Notenrechner (DOM-Version)

Überarbeiten Sie den Notenrechner aus U6, sodass alles direkt auf der Webseite passiert – ohne prompt() und alert().

Erstellen Sie ein Formular mit einem Eingabefeld für die Punktzahl und einem Button „Berechnen“. Das Ergebnis soll in einem <p id="ergebnis">-Element erscheinen.
Registrieren Sie den Event Handler mit addEventListener in einer externen .js-Datei (kein onclick im HTML).
Ergänzen Sie eine Eingabeprüfung: Bei ungültiger Eingabe (leer, keine Zahl, >100) soll das Eingabefeld rot hinterlegt und eine Fehlermeldung angezeigt werden:
JavaScript
```
input.style.borderColor = isValid ? "" : "red";
```
Erweitern Sie die Ausgabe: Zeigen Sie zusätzlich einen farbigen Balken an, der den Prozentsatz visualisiert (grün bei „gut“, rot bei „nicht bestanden“).

Aufgabe 2: Dark Mode für eure Website

Baut einen Dark-Mode-Schalter in eure Website ein – ein Feature, das fast jede moderne Website hat.

Fügt einen Button in eure Navigation ein:
HTML
```
<button id="dark-mode-toggle">Dark Mode</button>
```

Erstellt in css/style.css eine Klasse .dark, die auf <body> angewendet wird:

CSS

body.dark {
  background-color: #1e293b;
  color: #e2e8f0;
}

body.dark nav {
  background-color: #0f172a;
  border-color: #334155;
}

body.dark a {
  color: #60a5fa;
}

Schreibt das JavaScript in js/script.js:

JavaScript

document.addEventListener("DOMContentLoaded", () => {
    const toggle = document.getElementById("dark-mode-toggle");

    toggle.addEventListener("click", () => {
        document.body.classList.toggle("dark");
    });
});

Erweitert das Skript, sodass die Einstellung im localStorage gespeichert wird und beim nächsten Laden der Seite erhalten bleibt:

JavaScript

// Beim Laden: gespeicherten Zustand wiederherstellen
if (localStorage.getItem("darkMode") === "true") {
    document.body.classList.add("dark");
}

// Beim Klick: Zustand umschalten und speichern
toggle.addEventListener("click", () => {
    document.body.classList.toggle("dark");
    const isDark = document.body.classList.contains("dark");
    localStorage.setItem("darkMode", isDark);
});

Passt die Dark-Mode-Farben für eure gesamte Website an (Footer, Karten, Bilder etc.). Der Button-Text soll sich je nach Modus ändern („Dark Mode“ / „Light Mode“).

Git-Tipp: Committet eure Änderungen regelmäßig – z. B. nach jeder abgeschlossenen Aufgabe:
git add . → git commit -m "Notenrechner DOM-Version" → git push

Entwicklung interaktiver Softwareanwendungen

Mit JavaScript Webseiten verändern (DOM)

Ändern von HTML-Elementen mittels des Document Object Model (DOM)

Berechnungen per Knopfdruck initiieren

Formulare und Eingabefelder nutzen

Moderne Event-Behandlung mit addEventListener

querySelector – Elemente flexibel finden

Event Handler mit Parametern nutzen

Übungsaufgaben

Aufgabe 1: Notenrechner (DOM-Version)

Aufgabe 2: Dark Mode für eure Website