Englisch
Französisch
Arabisch
Deutsch
Español
Português
Italiano
Nederlands
Русский
日本語
中文
한국어
JavaScript in der Praxis
Hochgeladen :
vor 4 Monaten
Aktualisiert :
vor 4 Monaten
beginner
Bauen wir etwas Interaktives
Wenden Sie die Grundlagen an: Sie lassen einen Button die Seite beim Klick aktualisieren — das Wesen von Frontend-JavaScript.
Projekt: ein Klickzähler
- Fügen Sie einen Button und einen Ort für den Zählerstand in Ihrem HTML hinzu.
- Wählen Sie das Element mit
document.querySelector. - Halten Sie eine
count-Variable. - Erhöhen Sie sie bei jedem Klick und aktualisieren Sie den Text.
Das HTML
<button id="btn">0-mal geklickt</button>Das JavaScript
const btn = document.querySelector("#btn");
let count = 0;
btn.addEventListener("click", () => {
count++;
btn.textContent = `${count}-mal geklickt`;
});Template Literals
Backticks `...` erlauben es, Variablen mit ${ } einzubetten — sauberer als das Verketten mit +.
Gute Gewohnheiten vs. häufige Fehler
| Tun ✓ | Lassen ✗ |
|---|---|
addEventListener nutzen | Inline-onclick="..." im HTML |
const / let | Das alte var |
Mit === vergleichen | == (lose Gleichheit) |
| Die Konsole auf Fehler prüfen | Raten, warum es „nicht geht“ |
Skript erst nach dem DOM ausführen
Läuft Ihr <script> vor dem Element, gibt querySelector null zurück. Setzen Sie das Skript ans Ende von <body> oder nutzen Sie defer.
Programme müssen für Menschen geschrieben werden und nur nebenbei für Maschinen zur Ausführung.
Warum ist mein Element null?
Das Skript lief, bevor das DOM bereit war. Verschieben Sie es ans Ende von
<body> oder fügen Sie das Attribut defer hinzu.Was ist das DOM?
Das Document Object Model — die lebendige, bearbeitbare Darstellung Ihres HTML im Browser.
Was kommt nach JavaScript?
Ein Framework wie Vue.js oder eine Backend-Sprache wie PHP/Laravel.
