JavaScript Basics

JavaScript Grundlagen

Auf dieser Seite findest du die wichtigsten Bausteine von JavaScript - von Variablen über Funktionen bis zu Events. Viel Code, aber keine Panik: Jedes Konzept wird Schritt für Schritt erklärt und du kannst alles direkt ausprobieren.

Wo kommt JavaScript hin?

JavaScript kann an drei Stellen eingebunden werden:

1. Inline JavaScript (direkt im HTML)

html

<button onclick="alert('Hallo!')">Klick mich</button>

Funktioniert, aber nicht empfohlen - mischt Verhalten mit Struktur.

2. Internal JavaScript (im <script>-Tag)

html

<script>
    console.log('Hallo von JavaScript!');
    // Dein JavaScript-Code hier
</script>

Gut für kleine Scripte oder zum Testen.

3. External JavaScript (separate Datei) - BEST PRACTICE

html

<!-- Vor dem schließenden </body>-Tag -->
<script src="js/script.js"></script>

Tipp

Externe Dateien sind am übersichtlichsten und wie ich hier gelernt habe, auch am sichersten! Das Script-Tag kommt meist kurz vor </body>, damit erst das HTML geladen wird, bevor JavaScript darauf zugreift.

→ Hier erfährst du mehr über die Sicherheit bei JavaScript

Variablen und Datentypen

Variablen sind Container für Daten. Es gibt drei Möglichkeiten, sie zu deklarieren:

let, const und var

javascript

// let - kann später geändert werden (empfohlen für veränderliche Werte)
let name = "Anna-Maria";
name = "Anna";  // Funktioniert

// const - konstant, kann nicht geändert werden (empfohlen, wenn möglich)
const maxAge = 99;
// maxAge = 100;  // Würde einen Fehler werfen

// var - alte Methode (besser vermeiden)
var oldStyle = "nicht mehr modern";

Best Practice

Immer const verwenden, außer du weißt, dass sich der Wert ändern wird - dann let.

var einfach vergessen - ich habe es niemals erwähnt.

Datentypen

javascript

// String - Text in Anführungszeichen
let text = "Hallo Welt";
let text2 = 'Auch mit einfachen Anführungszeichen';
let text3 = `Template Literal mit ${text}`;  // Kann Variablen enthalten

// Number - Zahlen (ganze und Dezimalzahlen)
let ganzzahl = 42;
let dezimal = 3.14;

// Boolean - wahr oder falsch
let istWahr = true;
let istFalsch = false;

// Array - Liste von Werten
let farben = ["rot", "grün", "blau"];
let zahlen = [1, 2, 3, 4, 5];

// Object - Sammlung von Eigenschaften
let person = {
    name: "Max",
    alter: 30,
    stadt: "Berlin"
};

// undefined - Variable wurde deklariert, aber hat keinen Wert
let nochNichtsDefiniert;

// null - absichtlich kein Wert
let leer = null;

Datentyp prüfen mit typeof

JavaScript

console.log(typeof "Hallo");     // "string"
console.log(typeof 42);          // "number"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (historischer Bug!)
console.log(typeof [1, 2, 3]);   // "object"
console.log(typeof {a: 1});      // "object"

Interaktives Beispiel: Variablen

Gib einen Text ein, und ich speichere ihn in einer Variable:

javascript

// Variable Demo
let gespeicherterWert;

function speichereVariable() {
    let input = document.getElementById("userInput").value;
    gespeicherterWert = input;
    document.getElementById("variableOutput").innerHTML = 
        `✅ Gespeichert in Variable: <strong>gespeicherterWert = "${gespeicherterWert}"</strong>`;
}

function zeigeVariable() {
    if (gespeicherterWert !== undefined) {
        document.getElementById("variableOutput").innerHTML = 
            `📦 Variable enthält: <strong>"${gespeicherterWert}"</strong>`;
    } else {
        document.getElementById("variableOutput").innerHTML = 
            `⚠️ Variable ist noch <strong>undefined</strong> - erst speichern!`;
    }
}

Strings und Template Literals

Text in JavaScript kann auf drei Arten geschrieben werden:

JavaScript

// Einfache Anführungszeichen
let text1 = 'Hallo Welt';

// Doppelte Anführungszeichen
let text2 = "Hallo Welt";

// Template Literals (Backticks) - können Variablen enthalten
let name = "Max";
let text3 = `Hallo ${name}!`;  // "Hallo Max!"

// Mehrzeilige Strings nur mit Backticks
let mehrzeilig = `
    Zeile 1
    Zeile 2
    Zeile 3
`;

Tipp

Template Literals (Backticks) sind besonders praktisch, wenn du Variablen in Strings einbauen willst - kein umständliches "Hallo " + name + "!" mehr nötig.

Operatoren

Arithmetische Operatoren

javascript

let a = 10;
let b = 3;

console.log(a + b);   // 13 (Addition)
console.log(a - b);   // 7 (Subtraktion)
console.log(a * b);   // 30 (Multiplikation)
console.log(a / b);   // 3.333... (Division)
console.log(a % b);   // 1 (Modulo - Rest der Division)
console.log(a ** b);  // 1000 (Potenz - 10³)

Vergleichsoperatoren

javascript

let x = 5;

console.log(x == 5);    // true (gleicher Wert)
console.log(x == "5");  // true (gleicher Wert, andere Typen erlaubt)
console.log(x === "5"); // false (gleicher Wert UND gleicher Typ)
console.log(x !== "5"); // true (ungleich in Wert oder Typ)
console.log(x > 3);     // true (größer als)
console.log(x >= 5);    // true (größer oder gleich)
console.log(x < 10);    // true (kleiner als)
console.log(x <= 4);    // false (kleiner oder gleich)

Wichtig

Immer === statt == verwenden! Das prüft auch den Datentyp und verhindert unerwartete Bugs.

Logische Operatoren

javascript

let istErwachsen = true;
let hatFuehrerschein = false;

console.log(istErwachsen && hatFuehrerschein);  // false (UND - beide müssen wahr sein)
console.log(istErwachsen || hatFuehrerschein);  // true (ODER - einer muss wahr sein)
console.log(!istErwachsen);                     // false (NICHT - kehrt Wert um)

Funktionen

Funktionen sind wiederverwendbare Code-Blöcke. Es gibt mehrere Möglichkeiten, sie zu schreiben:

Function Declaration (klassisch)

javascript

function gruss(name) {
    return "Hallo " + name + "!";
}

console.log(gruss("Max"));  // "Hallo Max!"

Arrow Function (modern)

javascript

// Kurze Schreibweise
const gruss = (name) => "Hallo " + name + "!";

// Mit mehreren Zeilen
const berechneFlaeche = (breite, hoehe) => {
    let flaeche = breite * hoehe;
    return flaeche;
};

console.log(gruss("Anna"));              // "Hallo Anna!"
console.log(berechneFlaeche(5, 10));     // 50

Parameter und Return

javascript

// Funktion mit mehreren Parametern
function addiere(a, b) {
    return a + b;
}

// Funktion ohne Return (gibt undefined zurück)
function sagHallo() {
    console.log("Hallo!");
}

// Default-Parameter (wenn kein Wert übergeben wird)
function begruessung(name = "Gast") {
    return `Willkommen, ${name}!`;
}

console.log(addiere(5, 3));        // 8
sagHallo();                        // Gibt "Hallo!" in der Konsole aus
console.log(begruessung());        // "Willkommen, Gast!"
console.log(begruessung("Max"));   // "Willkommen, Max!"

Interaktives Beispiel: Funktionen

Teste eine einfache Addition-Funktion:

+

javascript

// Function Demo
function berechneAddition() {
    let num1 = parseFloat(document.getElementById("num1").value);
    let num2 = parseFloat(document.getElementById("num2").value);
    let ergebnis = num1 + num2;
    
    document.getElementById("functionOutput").innerHTML = 
        `<strong>Funktion ausgeführt:</strong><br>
        addiere(${num1}, ${num2}) = <strong>${ergebnis}</strong>`;
}

If/Else - Bedingungen

Mit Bedingungen kann dein Code Entscheidungen treffen:

javascript

let alter = 18;

if (alter >= 18) {
    console.log("Du bist volljährig");
} else {
    console.log("Du bist noch minderjährig");
}

// Mit else if für mehrere Bedingungen
let note = 2;

if (note === 1) {
    console.log("Sehr gut!");
} else if (note === 2) {
    console.log("Gut!");
} else if (note === 3) {
    console.log("Befriedigend");
} else {
    console.log("Da ist noch Luft nach oben");
}

Ternärer Operator (Kurzform)

javascript

// Bedingung ? wennWahr : wennFalsch
let alter = 20;
let status = alter >= 18 ? "erwachsen" : "minderjährig";
console.log(status);  // "erwachsen"

Interaktives Beispiel: Bedingungen

Gib dein Alter ein:

javascript

// Condition Demo
function pruefeAlter() {
    let alter = parseInt(document.getElementById("ageInput").value);
    let output = document.getElementById("conditionOutput");
    
    if (isNaN(alter)) {
        output.innerHTML = "⚠️ Bitte gib eine Zahl ein!";
        return;
    }
    
    if (alter >= 18) {
        output.innerHTML = `✅ Mit ${alter} Jahren bist du <strong>volljährig</strong>!`;
    } else {
        output.innerHTML = `🔒 Mit ${alter} Jahren bist du noch <strong>minderjährig</strong>.`;
    }
}

Schleifen (Loops)

Schleifen wiederholen Code mehrmals:

For-Schleife

javascript

// Zähle von 0 bis 4
for (let i = 0; i < 5; i++) {
    console.log(i);
}
// Ausgabe: 0, 1, 2, 3, 4

// Durchlaufe ein Array
let farben = ["rot", "grün", "blau"];
for (let i = 0; i < farben.length; i++) {
    console.log(farben[i]);
}

While-Schleife

javascript

let zaehler = 0;
while (zaehler < 5) {
    console.log(zaehler);
    zaehler++;
}
// Ausgabe: 0, 1, 2, 3, 4

forEach (für Arrays)

javascript

let fruechte = ["Apfel", "Banane", "Orange"];

fruechte.forEach(function(frucht) {
    console.log(frucht);
});

// Mit Arrow Function (kürzer)
fruechte.forEach(frucht => console.log(frucht));

Interaktives Beispiel: Schleifen

javascript

// Loop Demo
function zeigeSchleife() {
    let output = "<strong>For-Schleife läuft:</strong><br><br>";
    for (let i = 1; i <= 5; i++) {
        output += `Durchlauf ${i}: i = ${i}<br>`;
    }
    document.getElementById("loopOutput").innerHTML = output;
}

DOM-Manipulation

Das DOM (Document Object Model) ist die JavaScript-Repräsentation deiner HTML-Seite. Damit kannst du HTML-Elemente finden, ändern, erstellen oder löschen.

Elemente auswählen

javascript

// Ein Element per ID
let element = document.getElementById("meinElement");

// Ein Element per CSS-Selektor (das erste gefundene)
let element = document.querySelector(".meine-klasse");
let element = document.querySelector("#meine-id");

// Alle Elemente per CSS-Selektor
let elemente = document.querySelectorAll(".meine-klasse");

// Alle Elemente mit einem Tag-Namen
let absaetze = document.getElementsByTagName("p");

Inhalt ändern

javascript

let element = document.getElementById("output");

// Text ändern (nur Text, kein HTML)
element.textContent = "Neuer Text";

// HTML ändern (kann HTML-Tags enthalten)
element.innerHTML = "<strong>Fetter Text</strong>";

// Attribute ändern
element.setAttribute("class", "neue-klasse");
element.style.color = "red";
element.style.fontSize = "20px";

Klassen hinzufügen/entfernen

javascript

let element = document.getElementById("box");

// Klasse hinzufügen
element.classList.add("aktiv");

// Klasse entfernen
element.classList.remove("inaktiv");

// Klasse toggeln (hinzufügen wenn nicht da, entfernen wenn da)
element.classList.toggle("highlight");

// Prüfen ob Klasse existiert
if (element.classList.contains("aktiv")) {
    console.log("Element ist aktiv");
}

Interaktives Beispiel: DOM-Manipulation

Dieser Text kann geändert werden!

javascript

// DOM Manipulation Demo
let farbIndex = 0;
let farben = ["#344149ff", "#635b4eff", "#5e4462ff", "#344e4cff"];
let hatKlasse = false;

function aendereText() {
    let texte = [
        "Text wurde geändert! 🎉",
        "Noch ein neuer Text!",
        "JavaScript macht Spaß! 😊",
        "Dieser Text kann geändert werden!"
    ];
    let randomText = texte[Math.floor(Math.random() * texte.length)];
    document.getElementById("demoText").textContent = randomText;
}

function aendereFarbe() {
    farbIndex = (farbIndex + 1) % farben.length;
    document.getElementById("demoBox").style.backgroundColor = farben[farbIndex];
}

function toggleKlasse() {
    let box = document.getElementById("demoBox");
    if (hatKlasse) {
        box.style.border = "none";
        box.style.transform = "scale(1)";
        hatKlasse = false;
    } else {
        box.style.border = "4px solid var(--heading-primary)";
        box.style.transform = "scale(1.05)";
        hatKlasse = true;
    }
}

Events (Ereignisse)

Events sind Aktionen, die auf der Webseite passieren - z.B. Klicks, Tastatureingaben, Mausbewegungen.

Event Listener hinzufügen

javascript

// Element auswählen
let button = document.getElementById("meinButton");

// Event Listener hinzufügen
button.addEventListener("click", function() {
    console.log("Button wurde geklickt!");
});

// Mit Arrow Function (kürzer)
button.addEventListener("click", () => {
    console.log("Button wurde geklickt!");
});

Wichtige Event-Typen

javascript

// Click - Mausklick
element.addEventListener("click", () => {});

// DblClick - Doppelklick
element.addEventListener("dblclick", () => {});

// MouseOver - Maus bewegt sich über Element
element.addEventListener("mouseover", () => {});

// MouseOut - Maus verlässt Element
element.addEventListener("mouseout", () => {});

// KeyPress, KeyDown, KeyUp - Tastatur-Events
document.addEventListener("keydown", (e) => {
    console.log("Taste gedrückt:", e.key);
});

// Input - Text wird in ein Feld eingegeben
inputField.addEventListener("input", (e) => {
    console.log("Aktueller Wert:", e.target.value);
});

// Submit - Formular wird abgeschickt
form.addEventListener("submit", (e) => {
    e.preventDefault();  // Verhindert Standard-Verhalten
    console.log("Formular würde abgeschickt");
});

Event-Objekt

javascript

button.addEventListener("click", function(event) {
    console.log(event);              // Das komplette Event-Objekt
    console.log(event.target);       // Das Element, das geklickt wurde
    console.log(event.type);         // Der Event-Typ ("click")
    console.log(event.clientX);      // X-Position der Maus
    console.log(event.clientY);      // Y-Position der Maus
});

Interaktives Beispiel: Events

Warte auf Events...

javascript

// Event Listeners initialisieren wenn DOM geladen ist
document.addEventListener("DOMContentLoaded", function() {
    
    // Variable Demo Buttons
    let speichernBtn = document.getElementById("speichernBtn");
    let zeigenBtn = document.getElementById("zeigenBtn");
    if (speichernBtn) speichernBtn.addEventListener("click", speichereVariable);
    if (zeigenBtn) zeigenBtn.addEventListener("click", zeigeVariable);
    
    // Function Demo Button
    let additionBtn = document.getElementById("additionBtn");
    if (additionBtn) additionBtn.addEventListener("click", berechneAddition);
    
    // Condition Demo Button
    let alterBtn = document.getElementById("alterBtn");
    if (alterBtn) alterBtn.addEventListener("click", pruefeAlter);
    
    // Loop Demo Button
    let schleifeBtn = document.getElementById("schleifeBtn");
    if (schleifeBtn) schleifeBtn.addEventListener("click", zeigeSchleife);
    
    // DOM Manipulation Demo Buttons
    let textBtn = document.getElementById("textBtn");
    let farbeBtn = document.getElementById("farbeBtn");
    let klasseBtn = document.getElementById("klasseBtn");
    if (textBtn) textBtn.addEventListener("click", aendereText);
    if (farbeBtn) farbeBtn.addEventListener("click", aendereFarbe);
    if (klasseBtn) klasseBtn.addEventListener("click", toggleKlasse);
    
    // Array Demo Buttons
    let geradeBtn = document.getElementById("geradeBtn");
    let verdoppelBtn = document.getElementById("verdoppelBtn");
    let summeBtn = document.getElementById("summeBtn");
    if (geradeBtn) geradeBtn.addEventListener("click", zeigeGeradeZahlen);
    if (verdoppelBtn) verdoppelBtn.addEventListener("click", verdoppleZahlen);
    if (summeBtn) summeBtn.addEventListener("click", berechneArraySumme);
    
    // Event Demo - Click Counter und Input Tracking
    let eventButton = document.getElementById("eventButton");
    let eventInput = document.getElementById("eventInput");
    let eventOutput = document.getElementById("eventOutput");
    let clickCount = 0;
    
    if (eventButton) {
        eventButton.addEventListener("click", function() {
            clickCount++;
            eventOutput.innerHTML = 
                `🖱️ <strong>Click-Event!</strong><br>Button wurde ${clickCount}x geklickt`;
        });
    }
    
    if (eventInput) {
        eventInput.addEventListener("input", function(e) {
            eventOutput.innerHTML = 
                `⌨️ <strong>Input-Event!</strong><br>Du hast getippt: "${e.target.value}"`;
        });
    }
});

Wichtige Array-Methoden

Arrays haben viele nützliche Methoden:

javascript

let zahlen = [1, 2, 3, 4, 5];

// map() - transformiert jedes Element
let verdoppelt = zahlen.map(zahl => zahl * 2);
console.log(verdoppelt);  // [2, 4, 6, 8, 10]

// filter() - filtert Elemente nach Bedingung
let gerade = zahlen.filter(zahl => zahl % 2 === 0);
console.log(gerade);  // [2, 4]

// find() - findet das erste Element, das die Bedingung erfüllt
let gefunden = zahlen.find(zahl => zahl > 3);
console.log(gefunden);  // 4

// reduce() - reduziert Array auf einen Wert
let summe = zahlen.reduce((acc, zahl) => acc + zahl, 0);
console.log(summe);  // 15

// push() - Element am Ende hinzufügen
zahlen.push(6);
console.log(zahlen);  // [1, 2, 3, 4, 5, 6]

// pop() - letztes Element entfernen
let letztes = zahlen.pop();
console.log(letztes);  // 6

// shift() - erstes Element entfernen
let erstes = zahlen.shift();
console.log(erstes);  // 1

// unshift() - Element am Anfang hinzufügen
zahlen.unshift(0);
console.log(zahlen);  // [0, 2, 3, 4, 5]

Interaktives Beispiel: Array-Methoden

Array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

javascript

// Array Demo
function zeigeGeradeZahlen() {
    let zahlen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    let gerade = zahlen.filter(zahl => zahl % 2 === 0);
    document.getElementById("arrayOutput").innerHTML = 
        `<strong>.filter()</strong> → Nur gerade Zahlen: <strong>[${gerade.join(", ")}]</strong>`;
}

function verdoppleZahlen() {
    let zahlen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    let verdoppelt = zahlen.map(zahl => zahl * 2);
    document.getElementById("arrayOutput").innerHTML = 
        `<strong>.map()</strong> → Alle verdoppelt: <strong>[${verdoppelt.join(", ")}]</strong>`;
}

function berechneArraySumme() {
    let zahlen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    let summe = zahlen.reduce((acc, zahl) => acc + zahl, 0);
    document.getElementById("arrayOutput").innerHTML = 
        `<strong>.reduce()</strong> → Summe aller Zahlen: <strong>${summe}</strong>`;
}

Console und Debugging

Die Browser-Konsole ist dein bester Freund beim Debuggen:

Console-Methoden

javascript

// Normale Ausgabe
console.log("Hallo Welt");
console.log("Wert:", variable);

// Warnung (gelb)
console.warn("Das ist eine Warnung");

// Fehler (rot)
console.error("Das ist ein Fehler");

// Info (blau)
console.info("Das ist eine Info");

// Tabelle für Arrays/Objects
let personen = [
    { name: "Max", alter: 30 },
    { name: "Anna", alter: 25 }
];
console.table(personen);

// Gruppierung
console.group("Meine Gruppe");
console.log("Nachricht 1");
console.log("Nachricht 2");
console.groupEnd();

Konsole öffnen

Chrome/Edge: F12 oder Rechtsklick → "Untersuchen" → Tab "Console"
Firefox: F12 oder Rechtsklick → "Element untersuchen" → Tab "Konsole"
Safari: Cmd+Option+C (Mac) - erst in Einstellungen aktivieren

Best Practices

Was ich beim Lernen von JavaScript als wichtig empfunden habe:

Verwende const und let, nie var - Moderne Variablen-Deklaration ist sicherer
Verwende === statt == - Vergleicht auch den Datentyp, verhindert Bugs
Benenne Variablen aussagekräftig - userName ist besser als x
Kommentiere deinen Code - Dein zukünftiges Ich wird es dir danken
Eine Funktion = eine Aufgabe - Halte Funktionen klein und fokussiert
Nutze die Konsole zum Testen - console.log() ist dein Freund
Externe Scripts am Ende des <body> - Damit das HTML erst geladen ist
Event Listener statt Inline-Events - Trennt JavaScript von HTML
Camel Case für Variablen - meineLangeVariable
Prüfe auf undefined/null - Bevor du mit Werten arbeitest

Häufige Fehler

Dinge, über die ich beim Lernen gestolpert bin:

1. Element existiert noch nicht

javascript

// FALSCH - Script im <head>, Element existiert noch nicht
let button = document.getElementById("button");
button.addEventListener("click", ...);  // Fehler!

// RICHTIG - Script am Ende oder mit DOMContentLoaded
document.addEventListener("DOMContentLoaded", function() {
    let button = document.getElementById("button");
    button.addEventListener("click", ...);
});

2. Const ändern wollen

javascript

// FALSCH
const name = "Max";
name = "Anna";  // Fehler!

// RICHTIG - use let wenn sich der Wert ändern soll
let name = "Max";
name = "Anna";  // OK!

3. `==` statt `===`

javascript

// Unerwartetes Verhalten
console.log(5 == "5");   // true (!)
console.log(5 === "5");  // false (korrekt)

4. Event Listener Syntax

javascript

// FALSCH - Funktion wird sofort ausgeführt
button.addEventListener("click", meineFunktion());

// RICHTIG - Funktion wird als Referenz übergeben
button.addEventListener("click", meineFunktion);

// ODER mit Arrow Function
button.addEventListener("click", () => meineFunktion());

JavaScript Grundlagen

Wo kommt JavaScript hin?

1. Inline JavaScript (direkt im HTML)

2. Internal JavaScript (im <script>-Tag)

3. External JavaScript (separate Datei) - BEST PRACTICE

Variablen und Datentypen

let, const und var

Datentypen

Datentyp prüfen mit typeof

Interaktives Beispiel: Variablen

Strings und Template Literals

Operatoren

Arithmetische Operatoren

Vergleichsoperatoren

Logische Operatoren

Funktionen

Function Declaration (klassisch)

Arrow Function (modern)

Parameter und Return

Interaktives Beispiel: Funktionen

If/Else - Bedingungen

Ternärer Operator (Kurzform)

Interaktives Beispiel: Bedingungen

Schleifen (Loops)

For-Schleife

While-Schleife

forEach (für Arrays)

Interaktives Beispiel: Schleifen

DOM-Manipulation

Elemente auswählen

Inhalt ändern

Klassen hinzufügen/entfernen

Interaktives Beispiel: DOM-Manipulation

Events (Ereignisse)

Event Listener hinzufügen

Wichtige Event-Typen

Event-Objekt

Interaktives Beispiel: Events

Wichtige Array-Methoden

Interaktives Beispiel: Array-Methoden

Console und Debugging

Console-Methoden

Best Practices

Häufige Fehler

1. Element existiert noch nicht

2. Const ändern wollen

3. == statt ===

4. Event Listener Syntax

Mehr aus JavaScript

3. `==` statt `===`