JavaScript Grundlagen: Interaktive Webseiten erstellen

JavaScript ist die Programmiersprache des Webs. Mit JavaScript kannst du Webseiten interaktiv machen, Animationen erstellen und sogar vollständige Anwendungen bauen.

Was ist JavaScript?

JavaScript (kurz: JS) läuft direkt im Browser. Du brauchst keine spezielle Software - nur einen Browser und einen Texteditor.

Dein erstes Script

Erstelle eine HTML-Datei:

<!DOCTYPE html>
<html>
<head>
    <title>Mein erstes JavaScript</title>
</head>
<body>
    <h1>JavaScript Test</h1>
    <button onclick="gruss()">Klick mich!</button>

    <script>
        function gruss() {
            alert("Hallo! JavaScript funktioniert!");
        }
    </script>
</body>
</html>

Öffne die Datei im Browser und klicke den Button!

Variablen

In modernem JavaScript nutzen wir let und const:

// const für Werte, die sich nicht ändern
const pi = 3.14159;
const name = "Anna";

// let für Werte, die sich ändern können
let punkte = 0;
punkte = 100;

// ❌ Vermeide "var" - veraltet!

Datentypen

// String (Text)
const text = "Hallo Welt";

// Number (Zahlen)
const zahl = 42;
const dezimal = 3.14;

// Boolean (Wahr/Falsch)
const istAktiv = true;

// Array (Liste)
const farben = ["rot", "grün", "blau"];
console.log(farben[0]); // "rot"

// Object (Objekt)
const person = {
    name: "Max",
    alter: 25,
    stadt: "Berlin"
};
console.log(person.name); // "Max"

Funktionen

// Klassische Funktion
function addiere(a, b) {
    return a + b;
}

// Arrow Function (modern)
const multipliziere = (a, b) => a * b;

// Verwendung
console.log(addiere(5, 3));      // 8
console.log(multipliziere(4, 2)); // 8

DOM-Manipulation

Mit JavaScript kannst du HTML-Elemente verändern:

// Element finden
const titel = document.querySelector("h1");

// Text ändern
titel.textContent = "Neuer Titel!";

// Style ändern
titel.style.color = "blue";

// Element erstellen und hinzufügen
const neuerParagraph = document.createElement("p");
neuerParagraph.textContent = "Ich wurde mit JS erstellt!";
document.body.appendChild(neuerParagraph);

Event Listener

Reagiere auf Benutzeraktionen:

const button = document.querySelector("button");

button.addEventListener("click", () => {
    console.log("Button wurde geklickt!");
});

// Weitere Events: mouseover, keydown, submit, etc.

Praktisches Beispiel: Zähler

<p>Zähler: <span id="zaehler">0</span></p>
<button id="plus">+1</button>
<button id="minus">-1</button>

<script>
    let wert = 0;
    const anzeige = document.getElementById("zaehler");

    document.getElementById("plus").addEventListener("click", () => {
        wert++;
        anzeige.textContent = wert;
    });

    document.getElementById("minus").addEventListener("click", () => {
        wert--;
        anzeige.textContent = wert;
    });
</script>

Nächste Schritte

Du kennst jetzt die Grundlagen! Weiter geht’s mit:

Async/Await - Daten von APIs laden
Frameworks - React, Vue oder Svelte lernen
Node.js - JavaScript auf dem Server

Happy Coding!