Was ist JavaScript?
JavaScript ist eine Programmiersprache, die direkt im Browser ausgeführt wird. Sie ergänzt HTML und CSS, indem sie Webseiten interaktiv macht.
Während HTML die Struktur und CSS das Design festlegt, kümmert sich JavaScript um Logik und Verhalten, z. B.:
- Reaktion auf Klicks
- Dynamisches Ändern von Inhalten
- Speichern von Einstellungen
- Ein und Ausblenden von Elementen
Beispiel: Light und Dark Mode
- HTML: Ein Button, der angeklickt werden kann
- CSS: Zwei Design Varianten (Light und Dark)
- JavaScript: Logik, die zwischen beiden Modi umschaltet
1. Der Button im HTML
Zuerst braucht man ein klickbares Element. In diesem Projekt ist das ein Button
mit einer eindeutigen id.
<button id="themeToggle">Dark Mode aktivieren</button>
Die id ist wichtig, damit JavaScript dieses Element gezielt ansprechen kann.
2. Das Design in CSS
Das Design wird über CSS Variablen gesteuert. Für den Dark Mode werden diese Variablen überschrieben, sobald der body die Klasse dark besitzt.
body.dark {
--bg: #0b1220;
--text: #e5e7eb;
}Vorteil: Man muss nicht jedes einzelne Element neu stylen es reicht, die Variablen zu ändern.
3. Die Logik in JavaScript
JavaScript übernimmt die eigentliche Arbeit: Beim Klick auf den Button wird die Klasse dark am body ein oder ausgeschaltet.
document.body.classList.toggle("dark");Zusätzlich wird die Auswahl im localStorage gespeichert, damit der Modus auch nach dem Neuladen der Seite erhalten bleibt.
localStorage.setItem("theme", "dark");Live Test
Mit dem folgenden Button kannst du den Light und Dark Mode aktivieren:
Aktueller Modus: Light