Du musst kein JavaScript-Experte sein um mit KI Websites zu bauen. Aber du musst die 15 Konzepte kennen die Claude, Cursor und Copilot in ihrem generierten Code verwenden — sonst kannst du Fehler weder erkennen noch fixen. Diese Checkliste ist dein Mindest-Vokabular für Vanilla JS im Vibe-Coding-Kontext.
Frequently Asked Prompts
DOM: Die Sprache des Browsers
- querySelector / querySelectorAll — Elemente finden. Wie CSS-Selektoren, aber in JavaScript. Alles was du per CSS ansprechen kannst, erreichst du per JS. Das ist die Grundlage für jede Interaktion.
- addEventListener — Auf Klicks, Scrollen, Tastendrücke reagieren. Ohne dieses Konzept passiert auf deiner Seite nichts. Claude nutzt es in praktisch jedem generierten Script.
- classList.add / remove / toggle — CSS-Klassen dynamisch ändern. So funktionieren Hamburger-Menüs, Dark-Mode-Toggles, Scroll-Animationen. Kein innerHTML nötig.
- createElement / appendChild — HTML-Elemente per JavaScript erzeugen. Für dynamische Listen, Karten, Benachrichtigungen. Wichtig: innerHTML vermeiden wegen Sicherheit.
- textContent vs. innerHTML — textContent ist sicher (nur Text), innerHTML kann Code ausführen (XSS-Risiko). Faustregel: immer textContent, außer du hast einen sehr guten Grund.
JavaScript-Grundlagen die Claude voraussetzt
- const / let (nie var) — const für Werte die sich nicht ändern, let für Schleifen und Zähler. var ist veraltet und erzeugt Bugs durch Hoisting. Claude nutzt var nie — du solltest es auch nicht.
- Template Literals — Backticks statt Anführungszeichen:
`Hallo ${name}`. Jeder Claude-Output nutzt sie für String-Interpolation und mehrzeilige Strings. - Arrow Functions —
const fn = () => {}stattfunction fn() {}. Kürzere Syntax, anderes this-Binding. Claude generiert fast ausschliesslich Arrow Functions. - Destructuring —
const { x, y } = objextrahiert Werte aus Objekten. Sieht kryptisch aus, ist aber nur eine Abkürzung. Wenn Claude es nutzt und du es nicht kennst, wirkt der Code unlesbar. - Spread-Operator (...) — Kopiert Arrays und Objekte:
[...arr, newItem]. Unverzichtbar für State-Updates ohne Mutation.
Async, Performance, Module
- async / await + fetch — Daten von APIs holen. Jede dynamische Seite braucht es. Claude generiert immer async/await statt .then()-Chains. Verstehen: await pausiert die Funktion bis die Antwort da ist.
- IntersectionObserver — Erkennt ob ein Element im Viewport ist. Basis für Scroll-Animationen, Lazy Loading, Infinite Scroll. Performanter als scroll-Events. Lighthouse liebt es.
- defer und type="module" — Scripts im Head mit defer laden: Browser parst HTML weiter während JS lädt. type="module" aktiviert ES-Module. Ohne beides: render-blocking, schlechter Lighthouse-Score.
- localStorage / sessionStorage — Daten im Browser speichern. Für Dark-Mode-Präferenz, Formular-Zwischenspeicherung, einfache Persistenz. Keine Datenbank nötig.
- CSS Custom Properties via JS —
document.documentElement.style.setProperty('--color', '#1A56DB'). Verbindet JavaScript mit deinem CSS-Farbsystem. Basis für Theme-Switcher und dynamische Designs.
Faustregel
Wenn du 12 von 15 Konzepten erklären kannst, bist du bereit für produktives Vibe Coding mit Vanilla JS. Die restlichen 3 lernst du on the job — indem du Claude fragst was sein generierter Code macht.
Häufige Fragen
Muss ich alle 15 Konzepte perfekt beherrschen?
Nein. Du musst sie erkennen und grob verstehen was sie tun. Perfekte Syntax lernst du durch Wiederholung. Das Ziel ist: Wenn Claude Code generiert, kannst du jeden Block zuordnen und Fehler eingrenzen.
Brauche ich TypeScript?
Für statische Websites: nein. TypeScript braucht einen Build-Step und erhöhte Komplexität. Für den Vanilla-JS-Workflow reicht reines JavaScript völlig aus.
Wie lerne ich diese Konzepte am schnellsten?
Bau eine kleine Seite (Portfolio, Rechner, To-Do-Liste) und lass Claude den Code generieren. Dann geh Zeile für Zeile durch und frag Claude was jede Zeile macht. Aktives Lesen schlägt passive Tutorials.
Zum Thema: Web Dev for Vibe Coders — Der komplette Guide 2026
Quellen
MDN Web Docs — JavaScript Guide (developer.mozilla.org)
javascript.info — The Modern JavaScript Tutorial