JavaScript Grundlagen für Anfänger

1. Variablen und Datentypen

Variablen deklarieren

// Moderne Variablen mit let und const
let alter = 18;           // kann geändert werden
const name = "Anna";      // kann NICHT geändert werden
var stadt = "Zürich";     // alte Art (vermeiden)

// Verschiedene Datentypen
let preis = 19.99;         // Number
let istStudent = true;    // Boolean
let hobby = "Programmieren"; // String
let freunde = null;       // null
let telefon;              // undefined

console.log(typeof alter);    // "number"
console.log(typeof name);     // "string"
console.log(typeof istStudent); // "boolean"

let und const sind modern, var ist veraltet. const für unveränderliche Werte verwenden.

2. Ausgabe und Eingabe

Console.log für Entwickler

// Verschiedene Ausgabe-Methoden
console.log("Hallo JavaScript!");
console.log("Ich bin", 18, "Jahre alt");

let x = 5, y = 3;
console.log(`Die Summe von ${x} und ${y} ist ${x + y}`);

// Weitere Console-Methoden
console.warn("Das ist eine Warnung");
console.error("Das ist ein Fehler");
console.table(["Anna", "Max", "Lisa"]);

Ausgabe in der Browser-Konsole (F12):
Hallo JavaScript!
Ich bin 18 Jahre alt
Die Summe von 5 und 3 ist 8

Alert und Prompt

// Benutzer-Interaktion
alert("Willkommen auf meiner Webseite!");

let benutzername = prompt("Wie heisst du?");
let alter = prompt("Wie alt bist du?");

// String zu Number umwandeln
alter = Number(alter);

alert(`Hallo ${benutzername}, du bist ${alter} Jahre alt!`);

Klicke auf den Button für eine Demo

prompt() gibt immer einen String zurück - für Zahlen Number() verwenden.

3. Bedingungen (if/else)

Einfache Bedingungen

let punkte = 85;

if (punkte >= 90) {
    console.log("Sehr gut!");
} else if (punkte >= 70) {
    console.log("Gut!");
} else if (punkte >= 50) {
    console.log("Bestanden!");
} else {
    console.log("Nicht bestanden!");
}

// Vergleichsoperatoren
let a = 5, b = "5";
console.log(a == b);  // true (nur Wert)
console.log(a === b); // false (Wert UND Typ)

Verwende === für genaue Vergleiche (Wert UND Typ). == vergleicht nur den Wert.

4. Schleifen

For-Schleife

// Klassische for-Schleife
for (let i = 1; i <= 5; i++) {
    console.log(`Durchlauf ${i}`);
}

// For-of für Arrays
let früchte = ["Apfel", "Banane", "Orange"];
for (let frucht of früchte) {
    console.log(`Ich esse eine ${frucht}`);
}

// For-in für Objekte
let person = {name: "Anna", alter: 20, stadt: "Zürich"};
for (let eigenschaft in person) {
    console.log(`${eigenschaft}: ${person[eigenschaft]}`);
}

While-Schleife

let countdown = 5;
let result = "";

while (countdown > 0) {
    result += countdown + "... ";
    countdown--;
}
result += "Start!";
console.log(result);

// Do-While (läuft mindestens einmal)
let zahl;
do {
    zahl = prompt("Gib eine Zahl zwischen 1 und 10 ein:");
} while (zahl < 1 || zahl > 10);

While-Schleifen laufen solange die Bedingung wahr ist. Vorsicht vor Endlosschleifen!

5. Funktionen

Normale Funktionen

// Funktion ohne Parameter
function begrüssung() {
    console.log("Hallo! Willkommen!");
}

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

// Funktion mit Default-Parameter
function vorstellung(name = "Unbekannt", alter = 0) {
    return `Ich bin ${name} und ${alter} Jahre alt`;
}

// Funktionen aufrufen
begrüssung();
let summe = addieren(5, 3);
console.log(vorstellung("Max", 19));

Arrow Functions (Pfeilfunktionen)

// Moderne Art: Arrow Functions
const quadrat = (x) => {
    return x * x;
};

// Kurze Form bei einem Parameter
const verdoppeln = x => x * 2;

// Ohne Parameter
const zufallszahl = () => Math.random();

// Mit mehreren Parametern
const multiplizieren = (a, b) => a * b;

console.log(quadrat(4));         // 16
console.log(verdoppeln(7));      // 14
console.log(multiplizieren(3, 4)); // 12

Arrow Functions sind kürzer zu schreiben und haben eine andere "this"-Bindung.

6. Arrays (Listen)

Array-Grundlagen

// Array erstellen
let zahlen = [1, 2, 3, 4, 5];
let namen = ["Anna", "Max", "Lisa"];
let gemischt = [42, "Hallo", true]; // verschiedene Typen möglich

// Zugriff auf Elemente (Index startet bei 0)
console.log(namen[0]);     // "Anna"
console.log(namen[2]);     // "Lisa"
console.log(namen.length); // 3

// Elemente ändern
namen[1] = "Maximilian";
console.log(namen); // ["Anna", "Maximilian", "Lisa"]

Array-Methoden

let früchte = ["Apfel", "Banane"];

// Elemente hinzufügen
früchte.push("Orange");        // Am Ende hinzufügen
früchte.unshift("Erdbeere");   // Am Anfang hinzufügen

// Elemente entfernen
let letztes = früchte.pop();    // Letztes entfernen
let erstes = früchte.shift();   // Erstes entfernen

console.log(früchte);     // ["Apfel", "Banane"]
console.log(letztes);     // "Orange"
console.log(erstes);      // "Erdbeere"

// Nützliche Array-Methoden
console.log(früchte.includes("Apfel")); // true
console.log(früchte.indexOf("Banane")); // 1

Array: []

7. Objekte

Objekt-Grundlagen

// Objekt erstellen
let person = {
    name: "Anna",
    alter: 20,
    stadt: "Zürich",
    istStudent: true
};

// Zugriff auf Eigenschaften
console.log(person.name);        // "Anna"
console.log(person["alter"]);    // 20

// Eigenschaften ändern
person.alter = 21;
person.beruf = "Programmiererin"; // Neue Eigenschaft

// Eigenschaft löschen
delete person.stadt;

console.log(person);

Objekte mit Methoden

// Objekt mit Funktionen (Methoden)
let auto = {
    marke: "BMW",
    farbe: "rot",
    geschwindigkeit: 0,
    
    // Methoden
    beschleunigen() {
        this.geschwindigkeit += 10;
        console.log(`Geschwindigkeit: ${this.geschwindigkeit} km/h`);
    },
    
    bremsen() {
        this.geschwindigkeit = Math.max(0, this.geschwindigkeit - 10);
        console.log(`Geschwindigkeit: ${this.geschwindigkeit} km/h`);
    },
    
    info() {
        return `${this.farbe}er ${this.marke}`;
    }
};

auto.beschleunigen(); // Geschwindigkeit: 10 km/h
console.log(auto.info()); // "roter BMW"

Auto: rotes BMW (0 km/h)

8. Strings (Text)

String-Grundlagen

// Verschiedene String-Arten
let einfach = 'Einfache Anführungszeichen';
let doppelt = "Doppelte Anführungszeichen";
let template = `Template Literals mit ${einfach}`;

// String-Eigenschaften und Methoden
let text = "JavaScript ist toll!";
console.log(text.length);              // 18
console.log(text.toUpperCase());      // "JAVASCRIPT IST TOLL!"
console.log(text.toLowerCase());      // "javascript ist toll!"

// String-Suche
console.log(text.includes("Script"));    // true
console.log(text.indexOf("ist"));       // 11
console.log(text.startsWith("Java"));   // true

Template Literals

let name = "Anna";
let alter = 20;
let stadt = "Zürich";

// Alte Art (schlecht lesbar)
let nachricht1 = "Hallo, ich bin " + name + " und " + alter + " Jahre alt.";

// Moderne Art: Template Literals (mit Backticks)
let nachricht2 = `Hallo, ich bin ${name} und ${alter} Jahre alt.`;

// Mehrzeilige Strings
let mehrzeilig = `
Hallo ${name}!
Du wohnst in ${stadt}.
Du bist ${alter} Jahre alt.
`;

// Berechnungen in Template Literals
let rechnung = `Du bist ${2025 - alter} geboren.`;

console.log(mehrzeilig);

Template Literals (Backticks) sind moderner und lesbarer für String-Interpolation.

9. DOM-Manipulation

Elemente finden und ändern

// HTML-Elemente finden
let titel = document.getElementById("meinTitel");
let button = document.querySelector(".mein-button");
let alleParagraphen = document.querySelectorAll("p");

// Element-Inhalte ändern
titel.textContent = "Neuer Titel";
titel.innerHTML = "<em>Betonter</em> Titel";

// Styling ändern
titel.style.color = "blue";
titel.style.fontSize = "24px";

// Klassen hinzufügen/entfernen
titel.classList.add("wichtig");
titel.classList.remove("alt");
titel.classList.toggle("aktiv");

Event-Handling

// Verschiedene Event-Listener
let meinButton = document.querySelector("#meinButton");

// Click-Event
meinButton.addEventListener("click", function() {
    alert("Button wurde geklickt!");
});

// Modern mit Arrow Function
meinButton.addEventListener("click", () => {
    console.log("Moderner Click-Handler");
});

// Input-Event
let eingabe = document.querySelector("#textInput");
eingabe.addEventListener("input", (event) => {
    console.log("Eingabe:", event.target.value);
});

// Mouseover-Event
meinButton.addEventListener("mouseover", () => {
    meinButton.style.backgroundColor = "lightblue";
});

Interagiere mit den Elementen oben

10. Mathematische Operationen

Math-Objekt

// Math-Objekt Methoden
console.log(Math.PI);                    // 3.141592653589793
console.log(Math.round(4.7));           // 5
console.log(Math.floor(4.7));           // 4
console.log(Math.ceil(4.1));            // 5
console.log(Math.abs(-42));            // 42

// Minimum und Maximum
console.log(Math.max(1, 5, 3, 9, 2));    // 9
console.log(Math.min(1, 5, 3, 9, 2));    // 1

// Potenzen und Wurzeln
console.log(Math.pow(2, 3));           // 8 (2³)
console.log(Math.sqrt(16));           // 4

Zufallszahlen

// Zufallszahl zwischen 0 und 1
let zufall = Math.random();
console.log(zufall); // z.B. 0.7834521847

// Zufallszahl zwischen 1 und 10
let würfel = Math.floor(Math.random() * 10) + 1;
console.log(würfel);

// Funktion für Zufallszahl in Bereich
function zufallsZahl(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Verwendung
console.log(zufallsZahl(1, 6));  // Würfel
console.log(zufallsZahl(10, 20)); // Zahl zwischen 10-20

Klicke auf einen Button für Zufallszahlen

11. Fehlerbehandlung (try/catch)

Fehler abfangen mit try/catch

// Fehler verursachen
let zahl = "abc";
try {
    let ergebnis = Number(zahl);
    if (isNaN(ergebnis)) {
        throw "Keine Zahl!";
    }
    console.log(`Die Zahl ist ${ergebnis}`);
} catch (fehler) {
    console.error("Fehler:", fehler);
}
            

Mit try/catch kann dein Code Fehler abfangen und darauf reagieren, ohne dass das Programm abstürzt.

12. Asynchrone Programmierung (Promises & async/await)

setTimeout & setInterval

// Timeout: Code nach 2 Sekunden ausführen
setTimeout(() => {
    console.log("2 Sekunden sind vorbei!");
}, 2000);

// Interval: Code alle 1 Sekunde ausführen
let zähler = 0;
let intervalId = setInterval(() => {
    zähler++;
    console.log(`Zähler: ${zähler}`);
    if (zähler === 5) {
        clearInterval(intervalId);
    }
}, 1000);
            

Promise & fetch

// Daten von einer API laden (Internet nötig)
fetch("https://api.agify.io?name=anna")
    .then(antwort => antwort.json())
    .then(daten => console.log(daten))
    .catch(fehler => console.error(fehler));
            

async/await

async function datenLaden() {
    try {
        let antwort = await fetch("https://api.agify.io?name=max");
        let daten = await antwort.json();
        console.log(daten);
    } catch (fehler) {
        console.error(fehler);
    }
}
// Funktion aufrufen:
datenLaden();
            

Mit async/await kannst du asynchronen Code wie "normalen" Code schreiben – einfacher und übersichtlicher!

13. Daten im Browser speichern (Local Storage)

Einfaches Speichern und Lesen

// Wert speichern
localStorage.setItem("benutzername", "Anna");

// Wert lesen
let name = localStorage.getItem("benutzername");
console.log(name); // "Anna"

// Wert löschen
localStorage.removeItem("benutzername");
            

Mit localStorage kannst du Daten dauerhaft im Browser speichern – z.B. für Einstellungen oder Login-Namen.