Dokumentation
JavaScript

JavaScript Best Practices

const bevorzugen, Namen, kleine Funktionen, globale Ordnung, DOM-Struktur und XSS vermeiden.

JavaScript Best Practices

const bevorzugen, Namen, kleine Funktionen, globale Ordnung, DOM-Struktur und XSS vermeiden. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

  • robusten JavaScript-Code schreiben
  • globale Unordnung vermeiden
  • Sicherheitsrisiken wie XSS erkennen

Erklärung

Guter JavaScript-Code ist klein, klar benannt und vorhersehbar. const ist Standard, let ist die Ausnahme für echte Neuzuweisungen. Globale Variablen sollten vermieden werden, weil sie Seiteneffekte und Namenskonflikte erzeugen.

Sicherheit ist auch im Frontend wichtig. Besonders riskant ist das Einfügen ungeprüfter Eingaben mit innerHTML. XSS kann entstehen, wenn Angreifer eigenen Code einschleusen.

Beispiele

function showMessage(text) {
  const message = document.querySelector("#message");
  message.textContent = text;
}

textContent behandelt Eingaben als Text und ist für Meldungen sicher.

output.innerHTML = userInput;

Das ist gefährlich, wenn userInput von Benutzern oder externen APIs stammt.

Typische Fehler

  • Sehr lange Funktionen mit mehreren Aufgaben.
  • DOM-Abfragen an vielen Stellen duplizieren.
  • Benutzerdaten ungeprüft als HTML rendern.

Best Practices

  • Bevorzuge const und sprechende Namen.
  • Kapsle wiederkehrende DOM-Operationen in Funktionen.
  • Nutze textContent, createElement und klare Validierung gegen XSS.
  • Verweise bei sicherheitsrelevanten Fragen auf Web Security und prüfe serverseitig nach.

Kleine Übung

Überarbeite eine Funktion, die Benutzereingaben mit innerHTML ausgibt, zu einer sicheren Variante mit textContent und DOM-Erzeugung.

Zusammenfassung

JavaScript ergänzt Webseiten um Verhalten. Robuster Code arbeitet mit klaren Daten, kleinen Funktionen, sicheren DOM-Operationen, guter Fehlerbehandlung und nachvollziehbarer Struktur.

Weiterführende Seiten

Zuletzt aktualisiert: 7. Juni 2026

Asynchrones JavaScript

Promise, async, await, try catch, setTimeout, setInterval und Bedeutung von Async.

Fehlerbehandlung und Debugging

console.log, console.error, DevTools, Breakpoints, Fehlermeldungen und Stack Traces.