JavaScript-Referenzleitfaden mit Beispielen

1. const, let, var — was ist der Unterschied

Alle drei Schlüsselwörter erzeugen eine Variable, verhalten sich aber unterschiedlich.

var — die veraltete Option

var ist die älteste Form. Sie hat einen „leckenden" Funktionsscope (function scope), sodass eine Variable versehentlich aus einem Block { } „entkommen" kann. Heute wird davon abgeraten.

let — eine änderbare Variable

let zaehler = 0;
zaehler = zaehler + 1; // der Wert kann geändert werden
console.log(zaehler); // 1

let lebt strikt innerhalb des Blocks { }, in dem sie deklariert wurde — das nennt man Block Scope.

const — eine nicht neu zuweisbare Variable

const name = "Max";
name = "Paul"; // ❌ Fehler: Assignment to constant variable

const nutzer = { name: "Max" };
nutzer.name = "Paul"; // ✅ das geht

Standardregel: nutze const für alles, was nicht neu zugewiesen wird. Wenn sich der Wert ändern wird, nutze let. var wird heute kaum noch verwendet.

2. Wie man ein Element auf der Seite auswählt

Um etwas im HTML per JavaScript zu ändern, muss man dieses Element zuerst „finden".

querySelector — findet das erste passende Element

const btn = document.querySelector(".mein-button");
const titel = document.querySelector("#haupttitel");

Funktioniert wie ein CSS-Selektor: .klasse — per Klasse, #id — per id, tag — per Tag.

querySelectorAll — findet alle passenden Elemente

const items = document.querySelectorAll(".list-item");
items.forEach(function (item) {
    console.log(item.textContent);
});

getElementById — schnelle Suche per id

const box = document.getElementById("box");

querySelector ist universeller und reicht in 99% der Fälle — wir empfehlen, damit zu beginnen.

3. onclick, onchange, addEventListener

Events sind Reaktionen auf Nutzeraktionen: einen Klick, Texteingabe, ein Formular absenden.

onclick — das Klick-Event

const btn = document.querySelector(".btn");
btn.onclick = function () {
    console.log("Button geklickt!");
};

onchange — das Wertänderungs-Event

Feuert, wenn der Nutzer den Wert eines Inputs, Selects oder Checkbox ändert und den Fokus verlässt.

const select = document.querySelector("select");
select.onchange = function () {
    console.log("Ausgewählt:", select.value);
};

addEventListener — eine flexiblere Möglichkeit

btn.addEventListener("click", function () {
    console.log("Klick via addEventListener");
});

4. Template Literals

Sie erlauben es, Variablen direkt in einen String einzufügen, mit Backticks ` statt normaler Anführungszeichen.

const name = "Maria";
const alter = 20;

// alte Art
console.log("Hallo, " + name + "! Du bist " + alter + " Jahre alt.");

// template literal
console.log(`Hallo, ${name}! Du bist ${alter} Jahre alt.`);

Innerhalb von ${ } kann jeder Ausdruck stehen, nicht nur eine Variable: `Nächstes Jahr: ${alter + 1}`.

5. Arrow-Funktionen vs. normale

// normale Funktion
function summe(a, b) {
    return a + b;
}

// arrow-funktion
const summe2 = (a, b) => a + b;

Arrow-Funktionen sind kürzer — wenn der Körper ein einzelner Ausdruck ist, können return und geschweifte Klammern weggelassen werden.

Der Hauptunterschied ist, dass Arrow-Funktionen kein eigenes this haben, sie übernehmen es vom umgebenden Code. Am Anfang ist das nicht kritisch, aber wichtig zu wissen, dass dieser Unterschied existiert.

6. Arrays durchlaufen: forEach, map, filter

forEach — einfach ein Array „durchlaufen"

const fruechte = ["Apfel", "Banane", "Birne"];
fruechte.forEach(function (frucht) {
    console.log(frucht);
});

map — ein neues Array aus einem bestehenden erstellen

const zahlen = [1, 2, 3];
const verdoppelt = zahlen.map(n => n * 2);
console.log(verdoppelt); // [2, 4, 6]

filter — nur die benötigten Elemente behalten

const zahlen = [1, 2, 3, 4, 5];
const gerade = zahlen.filter(n => n % 2 === 0);
console.log(gerade); // [2, 4]

Eine einfache Regel: forEach, wenn du nur etwas mit jedem Element tun musst; map, wenn du ein neues transformiertes Array brauchst; filter, wenn du einen Teil der Elemente auswählen musst.

7. Mit Objekten arbeiten

const nutzer = {
    name: "Anna",
    alter: 22,
    istStudentin: true
};

console.log(nutzer.name);        // mit Punkt
console.log(nutzer["alter"]);    // mit eckigen Klammern

nutzer.stadt = "Berlin";         // neue Eigenschaft hinzufügen
delete nutzer.istStudentin;      // Eigenschaft löschen

Eckige Klammern sind nützlich, wenn der Eigenschaftsname in einer Variable gespeichert ist: nutzer[key].

8. JSON: stringify und parse

JSON ist ein Datenaustauschformat. In JavaScript sind ein Objekt und ein JSON-String nicht dasselbe — man muss zwischen ihnen umwandeln.

const nutzer = { name: "Oskar", alter: 30 };

// objekt → json string
const json = JSON.stringify(nutzer);
console.log(json); // '{"name":"Oskar","alter":30}'

// json string → objekt
const geparst = JSON.parse(json);
console.log(geparst.name); // "Oskar"

JSON.stringify braucht man vor allem, um Daten an einen Server zu senden oder in localStorage zu speichern, und JSON.parse für den umgekehrten Prozess.

Was als Nächstes kommt