Inhaltsverzeichnis

Webmaster Einsteigerguide: JavaScript

HTML ist dein Fundament, CSS dein Design – jetzt kommt JavaScript (JS) ins Spiel, das deine Webseite zum Leben erweckt. Wenn du Interaktivität, Dynamik und clevere Funktionen willst, ist JavaScript das Richtige!

JavaScript ist DIE Programmiersprache des World Wide Web. Sie läuft direkt im Browser deiner Besucher und kann fast alles auf deiner Seite steuern: Inhalte ändern, auf Klicks reagieren, Daten im Hintergrund laden und vieles, vieles mehr.

Wir stürzen uns hier direkt ins moderne JavaScript (ES6/ECMAScript 2015 und neuer). Das bringt viele Verbesserungen, die das Programmieren einfacher, sicherer und mächtiger machen. Bereit? Los geht’s!

Hinweis: ES6 und ECMAScript 2015 sind dasselbe.

ES6 steht für „ECMAScript 6“, die sechste Version der ECMAScript-Spezifikation, die 2015 veröffentlicht wurde.
ECMAScript 2015 ist der offizielle Name, weil man ab 2015 auf Jahreszahlen umgestiegen ist, um jährliche Updates klarer zu machen.
Die aktuellste Version ist ECMAScript 2024 (ES15), die im Juni 2024 finalisiert wurde. ECMAScript 2025 (ES16) befindet sich derzeit in der Entwicklung und wird voraussichtlich im Juni 2025 veröffentlicht.

Was ist JavaScript und wofür brauchst du es?

Stell dir vor, wenn HTML der Rohbau deines Hauses ist (Wände, Türen, Fenster) und CSS der Innenarchitekt, Maler und Dekorateur, der alles schön gestaltet, dann ist JavaScript der Elektriker, Installateur und Smart-Home-Techniker. JavaScript bringt Leben ins Haus: Es schaltet das Licht ein, wenn du einen Raum betrittst, lässt die Rollläden automatisch runterfahren, zeigt dir Benachrichtigungen auf einem Display oder sorgt dafür, dass dein Türschloss nur mit dem richtigen Code aufgeht. Kurz gesagt, JavaScript macht deine Webseite interaktiv und dynamisch.

JavaScript ermöglicht dir:

Dynamische Inhalte: Ändere Texte, Bilder oder ganze HTML-Bereiche, nachdem die Seite geladen ist, ohne Neuladen.
Benutzerinteraktion: Reagiere auf Klicks, Mausbewegungen, Tastatureingaben, Formularabsendungen, etc.
Formularvalidierung: Prüfe direkt im Browser, ob Eingaben gültig sind, bevor sie zum Server geschickt werden (schnelles Feedback!).
Asynchrone Operationen: Lade Daten (z.B. aktuelle Nachrichten, Wetter) vom Server im Hintergrund und zeige sie an, ohne dass die Seite blockiert oder neu lädt.
Animationen & Effekte: Erstelle komplexe Animationen oder visuelle Effekte, die über CSS hinausgehen.
Browser-APIs nutzen: Greife auf umfangreiche Funktionen des Browsers zu wie Geolocation (Standort), Local Storage (Daten speichern), Canvas (zeichnen), Audio/Video, etc.
Single Page Applications (SPAs): Baue Web-Anwendungen, die sich wie Desktop-Software bedienen lassen (z.B. mit Hilfe von Frameworks wie React, Vue, Angular).

Wichtig: JavaScript (JS) hat nichts mit der Programmiersprache Java zu tun, außer dem ähnlichen Namen (ein historisches Marketing-Ding). Völlig unterschiedliche Technologien!

JavaScript einbinden:

Wie kommt dein JS-Code auf die HTML-Seite?

Externes Skript (meistens die beste Methode): Schreibe deinen Code in eine separate Datei (z.B. main.js). Binde diese Datei mit dem <script>-Tag ein, idealerweise ganz am Ende des <body> oder mit dem defer-Attribut im <head>.
```

    ...
    <script src="pfad/zu/deinem/skript.js"></script>
</body>


<head>
    ...
    <script src="pfad/zu/deinem/skript.js" defer></script>
</head>
```
Warum am Ende des <body> oder im <head> mit defer? Dein JS-Code muss oft auf HTML-Elemente zugreifen (z.B. einen Button). Wenn du das Skript normal im <head> lädst, wird es ausgeführt, bevor der Browser das HTML des <body> kennt – das führt zu Fehlern! Das Laden am Ende oder mit defer stellt sicher, dass das HTML fertig „geparst“ ist, wenn dein Skript läuft. defer hat den Vorteil, dass das (asynchrone) Laden des Skripts parallel zum HTML-Parsing beginnen kann, was die Ladezeit potenziell verbessert.
Internes Skript: JS-Code direkt zwischen <script> und </script> Tags in der HTML-Datei. Okay für sehr kleine Skripte oder schnelle Tests/Korrekturen, aber wird schnell unübersichtlich.
```
<script>
  console.log("Hallo von internem JS!");
  // Mehr Code hier...
</script>
```
Inline-Handler: JS direkt in HTML-Attributen wie onclick="...". Wenn es geht vermeiden! Das vermischt Code und Struktur, ist schwer zu debuggen und zu warten. Moderne Event-Listener (siehe unten) sind meist die bessere Lösung.
```
<button onclick="console.log('Geklickt!');">Alter Button</button>
```

Die Browserkonsole: Dein unverzichtbarer Helfer!

Die Browserkonsole/Entwicklerkonsole deines Browsers (Chrome DevTools, Firefox Developer Tools, etc.) ist ein unverzichtbares Werkzeug beim JavaScript-Entwickeln. Du kannst sie mit F12 (oder Rechtsklick auf der Seite -> Untersuchen/Element untersuchen -> Tab „Konsole“) öffnen.

Mit der Browserkonsole kannst du:

Nachrichten ausgeben: Mit console.log("Hallo", variable, objekt); kannst du fast alles zur Kontrolle ausgeben. Das ist die häufigste Methode zum Debuggen!
Fehler sehen: Wenn dein Code nicht funktioniert, findest du hier oft detaillierte Fehlermeldungen und Zeilennummern.
Code testen: Du kannst direkt JS-Code eingeben und live ausführen.
Netzwerkanfragen prüfen, Performance messen, HTML/CSS untersuchen (in anderen Tabs der DevTools).

Öffne die Konsole jetzt und probiere es aus! Gib console.log('Ich lerne JS!'); oder 10 / 2 ein und drücke Enter. Nutze console.log() ständig, um zu prüfen, was dein Code macht!

Kommentare, Variablen, Datentypen

Kommentare

Markiere Code-Teile als Kommentare, damit sie vom Browser ignoriert werden (zur Erklärung oder zum temporären Deaktivieren/Auskommentieren):

// Ein einzeiliger Kommentar

/*
   Ein mehrzeiliger
   Kommentar. Nützlich für
   längere Erklärungen.
*/

Variablen: Speicher für deine Daten

Variablen sind benannte „Behälter“, in denen du Werte (Zahlen, Text, etc.) ablegen kannst.

In modernem JavaScript gibt es drei Keywords zur Variablendeklaration:

const (Konstante): Für Werte, die sich nach der ersten Zuweisung nicht mehr ändern sollen. Sollte dein Standard sein! Macht Code sicherer und besser lesbar, da du weißt, der Wert bleibt gleich.
let: Für Variablen, deren Wert sich später ändern kann. Nutze es nur, wenn du weißt, dass eine Neuzuweisung nötig oder wahrscheinlich ist.
var (Veraltet): Das alte Keyword. Vermeide var in modernem JS-Code! Es hat ein anderes (und oft verwirrendes) Verhalten bezüglich des Gültigkeitsbereichs („Scope“) als let und const.

const pi = 3.14159; // Wert ändert sich nicht -> const
let aktuellerZaehler = 0; // Wert wird sich ändern -> let
const standardGruss = "Hallo!";

console.log(standardGruss); // Gibt "Hallo!" aus
console.log(aktuellerZaehler); // Gibt 0 aus

aktuellerZaehler = aktuellerZaehler + 1; // Neuzuweisung bei let ist ok
console.log(aktuellerZaehler); // Gibt nun 1 aus

// pi = 3.14; // FEHLER! TypeError: Assignment to constant variable.

Beim Benennen von Variablen in JavaScript solltest du ein paar einfache Regeln beachten, um sauberen und fehlerfreien Code zu schreiben:

Erlaubte Zeichen: Verwende Buchstaben (a-z, A-Z), Zahlen (0-9), Unterstriche (_) oder Dollarzeichen ($). Zahlen dürfen nicht am Anfang stehen.
- Erlaubt: name, userAge, total_sum, $price
- Ungültig: 2times, my-name
Keine Sonderzeichen oder Leerzeichen: Bindestriche oder andere Sonderzeichen (außer _ und $) sind verboten.
Keine reservierten Wörter: Vermeide JavaScript-Schlüsselwörter wie if, for, function oder const.
Aussagekräftige Namen: Wähle klare, beschreibende Namen, die den Zweck der Variable erklären. Beispiel: userName statt x
Konventionen: Nutze die camelCase-Schreibweise für Variablen, beginne mit Kleinbuchstaben (z.B. firstName) und vermeide Großschreibung für normale Variablen (Großschreibung ist für Konstanten wie MAX_COUNT üblich).
Case-Sensitive: JavaScript unterscheidet Groß- und Kleinschreibung. user und User sind verschiedene Variablen.

Datentypen:

JavaScript kennt verschiedene Datentypen:

String: Zeichenketten (Text). In einfachen Anführungszeichen (' '), doppelten Anführungszeichen (" ") oder Backticks (` `).
```
const nachricht = "Das ist ein String.";
let benutzer = 'Anna';
console.log(`Hallo!`);
```

Number: Zahlen (ganze Zahlen oder mit Dezimalpunkt).

const alter = 30;
let preis = 19.95;
const temperatur = -5;

Boolean: Wahrheitswerte: true oder false. Entscheidend für Logik.
```
const eingeloggt = true;
let aktiv = false;
```
Object: Eine Sammlung von Schlüssel-Wert-Paaren (Eigenschaften). Zum Strukturieren komplexer Daten.
```
const person = { vorname: "Max", alter: 25 };
```

Array: Eine geordnete Liste von Werten.

const farben = ["rot", "grün", "blau"];

undefined: Der Standardwert einer Variable, die deklariert, aber der noch nichts zugewiesen wurde.
```
let ergebnis; console.log(ergebnis); // undefined
```
null: Bedeutet „absichtlich kein Wert“. Es ist ein zugewiesener Wert, der das Fehlen eines Objekts oder Wertes repräsentiert.
```
let selektiertesElement = null; // Explizit gesetzt: Nichts ist selektiert.
```
null ist etwas, das du setzt, undefined ist etwas, das passiert, wenn du nichts setzt.
(Symbol, BigInt: Seltener gebraucht für den Anfang).

JS ist dynamisch typisiert: Der Typ einer Variable wird automatisch bestimmt und kann sich ändern (bei let). Mit typeof variable kannst du den Typ prüfen.

let wert = 42; // wert ist Number
console.log(typeof wert); // "number"
wert = "Hallo"; // wert ist jetzt String
console.log(typeof wert); // "string"

Operatoren: Rechnen, Vergleichen, Logik verknüpfen

Operatoren sind die Werkzeuge, um mit Werten zu arbeiten.

Arithmetische Operatoren: +, -, *, /, % (Modulo/Rest), ** (Potenz).

let punkte = 10;
punkte = punkte * 2 + 5; // 25 (Punkt vor Strich gilt!)

Das + Zeichen verbindet auch Strings (Konkatenation):

let score = 100;
let message = "Punktestand: " + score; // Ergibt "Punktestand: 100" (score wird zum String)

Zuweisungen: =, +=, -=, *=, /=, ++ (Inkrement), -- (Dekrement).

let anzahl = 5;
anzahl += 3; // Das gleiche wie: anzahl = anzahl + 3; -> anzahl ist 8
anzahl++; // Das gleiche wie: anzahl = anzahl + 1; -> anzahl ist nun 9

Vergleiche: Geben true oder false zurück.

Strikt: === (Wert UND Typ gleich), !== (Wert ODER Typ ungleich) – Diese meist bevorzugen!
Locker: == (nur Wert gleich, mit Typumwandlung!), != (nur Wert ungleich) – Nur wenn nötig, fehleranfällig!
Größenvergleich: > (größer als), < (kleiner als), >= (größer als oder gleich), <= (kleiner als oder gleich).

console.log(7 === 7); // true
console.log(7 === '7'); // false (Number vs String)
console.log(7 == '7'); // true (Typumwandlung!)

console.log(10 > 5); // true
console.log('Apfel' !== 'Orange'); // true

Logische Operatoren: Verknüpfen Booleans. && (Logisches UND: beide Seiten müssen true sein), || (Logisches ODER: mindestens eine Seite muss true sein), ! (Logisches NICHT: kehrt true zu false um und umgekehrt).

let istAdmin = true;
let hatBezahlt = false;

if (istAdmin || hatBezahlt) {
  console.log("Ist Admin ODER hat bezahlt."); // Wird ausgeführt, da istAdmin true ist
}

if (istAdmin && hatBezahlt) {
    console.log("Ist Admin UND hat bezahlt."); // Wird NICHT ausgeführt
} else {
    console.log("Andernfalls dies Ausgeben."); // Wird ausgeführt
}

if (!hatBezahlt) {
    console.log("Hat NICHT bezahlt!"); // Wird ausgeführt, wegen der Umkehrung mit "!"
}

Moderne Strings: Template Literals (Backticks ``)

Template Literals, auch Template Strings genannt, sind eine der besten ES6-Verbesserungen für die Arbeit mit Strings!

Statt ' ' oder " " nutzt du Backticks ` `:

Variablen und Ausdrücke einfach einbetten: Mit ${variableOderAusdruck} direkt im String. Kein Gefummel mit + mehr!
Mehrzeilige Strings: Einfach Enter drücken für Zeilenumbrüche.

const produktName = "Super-Gadget";
const preis = 29.99;
const menge = 2;

// Alt und nervig:
const rechnungAlt = 'Produkt: ' + produktName + '\nMenge: ' + menge + '\nGesamt: ' + (preis * menge) + ' EUR';

// Modern und lesbar mit Backticks:
const rechnungNeu = `Produkt: ${produktName}
Menge: ${menge}
Rabatt: 10%
Gesamt: ${(preis * menge * 0.9).toFixed(2)} EUR`; // .toFixed(2) rundet auf 2 Nachkommastellen --> "53.98 EUR"

console.log(rechnungNeu);

Kontrollstrukturen: Den Ablauf steuern

Abfragen: `if`, `else if`, `else`

Damit dein Programm auf verschiedene Situationen unterschiedlich reagieren kann.

const note = 2; // Schulnote

if (note === 1) {
  console.log("Sehr gut!");
} else if (note === 2) {
  console.log("Gut."); // Trifft zu
} else if (note === 3) {
  console.log("Befriedigend.");
} else if (note === 4) {
  console.log("Ausreichend.");
} else {
  console.log("Nicht bestanden.");
}

Alternative: `switch`

Dasselbe, besonders übersichtlich bei vielen festen Werten.

const note = 2; // Schulnote

switch (note) {
  case 1:
    console.log("Sehr gut!");
    break;
  case 2:
    console.log("Gut."); // Trifft zu
    break;
  case 3:
    console.log("Befriedigend.");
    break;
  case 4:
    console.log("Ausreichend.");
    break;
  default:
    console.log("Nicht bestanden.");
}

Neben if, else if, else gibt es auch switch, um eine Variable gegen mehrere Werte zu prüfen. Jedes case überprüft einen Wert, und break beendet die Ausführung, damit nicht die folgenden Fälle ausgeführt werden. default entspricht dem else und greift, wenn kein case zutrifft. Für unsere Noten-Abfrage ist switch eine gute Alternative, besonders wenn du viele feste Werte hast.

Schleifen: `for`, `while` und die `forEach`-Methode

Schleifen sind in JavaScript da, um Code-Blöcke mehrfach auszuführen (zu wiederholen).

`for`-Schleife

Ideal, wenn du weißt, wie oft du etwas wiederholen willst.

// Zählt von 1 bis 5
for (let i = 1; i <= 5; i++) {
  console.log(`Runde ${i}`);
}
/* Ausgabe:
Runde 1
Runde 2
Runde 3
Runde 4
Runde 5
*/

`while`-Schleife

Läuft, solange eine Bedingung wahr ist. Vorsicht vor Endlosschleifen!

let versuche = 3;
while (versuche > 0) {
  console.log(`Noch ${versuche} Versuche übrig.`);
  versuche--; // Zahl dekrementieren (-1), sonst Endlosschleife, da "3" immer größer als "0" wäre!
}
console.log("Keine Versuche mehr!");
/* Ausgabe:
Noch 3 Versuche übrig.
Noch 2 Versuche übrig.
Noch 1 Versuche übrig.
Keine Versuche mehr!
*/

`forEach`-Methode

Die forEach-Methode ist eine Array-Methode, die eine Funktion für jedes Element eines Arrays ausführt. Sie ist funktionaler und kompakter als eine Schleife, wenn du Arrays durchlaufen willst.

const fruits = ["Apfel", "Banane", "Orange"];
fruits.forEach(fruit => {
  console.log(fruit);
});
// Ausgabe: Apfel, Banane, Orange

// Mit Index:
fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});
// Ausgabe: 0: Apfel, 1: Banane, 2: Orange

Moderne Schleifen in JavaScript, wie for...of oder for...in, machen das Durchlaufen von Daten einfacher und klarer.

Die for...of-Schleife ist eine moderne Art, Arrays oder andere Sammlungen zu durchlaufen. Sie gibt dir direkt jeden Wert – keine Zähler oder Indizes nötig. Das macht deinen Code einfacher und klarer!
```
const fruits = ["Apfel", "Banane", "Orange"];

for (const fruit of fruits) {
  console.log(fruit);
}
// Ausgabe: Apfel, Banane, Orange
```
Die for...in-Schleife läuft über die Schlüssel (Eigenschaften) eines Objekts. Sie ist primär für Objekte gedacht, nicht für Arrays!
```
const person = { name: "Anna", age: 25, city: "Berlin" };
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}
// Ausgabe: name: Anna, age: 25, city: Berlin
```
Vorsicht: Für Arrays ist for...of meist besser, da for...in auch unerwartete Eigenschaften (z.B. von Prototypen) auflisten kann.

Endlosschleifen vermeiden!

Eine Schleife, die nie endet, kann dein Programm zum Absturz bringen oder deinen Browser einfrieren. Das passiert, wenn die Abbruchbedingung fehlt oder nie erreicht wird. Überprüfe immer, ob deine Schleife einen klaren Ausweg hat!

Funktionen:

Funktionen sind das Herzstück für strukturierten, wiederverwendbaren Code. Du packst eine Abfolge von Anweisungen in eine Funktion und gibst ihr einen Namen. Dann kannst du sie immer wieder mit diesem Namen aufrufen.

Klassische Schreibweise mit `function`

Vor ES6 (und auch heute noch) wurden Funktionen mit dem function-Schlüsselwort definiert. Diese Schreibweise funktioniert genauso gut, ist aber etwas ausführlicher. Du wirst sie vor allem in älterem Code oft sehen.

// Funktionsdeklaration
function berechneFlaeche(breite, hoehe) {
  const flaeche = breite * hoehe;
  return flaeche;
}

// Funktionsausdruck (einer Variablen zugewiesen)
const addiere = function(a, b) {
  return a + b;
};

Die älteren Wege – function berechneFlaeche() {} (Deklaration) und const name = function() {} (Ausdruck) – funktionieren also weiterhin. Für modernes JavaScript empfehlen wir aber Arrow Functions wegen ihrer Kürze und Klarheit.

Definition auf moderne Art: Arrow Functions

ES6 führte Arrow Functions ein. Sie sind kürzer und haben ein paar Vorteile. Gewöhn dich am besten gleich daran!

// Arrow Function einer Variablen zuweisen
const berechneFlaeche = (breite, hoehe) => {
  const flaeche = breite * hoehe;
  return flaeche; // 'return' gibt das Ergebnis zurück
};

// Kürzeste Form, wenn nur EIN Ausdruck zurückgegeben wird:
const addiere = (a, b) => a + b;

// Funktion ohne Parameter:
const zeigeMeldung = () => {
  console.log("Eine wichtige Meldung!");
};

// Funktion mit einem Parameter (Klammern optional):
const quadriere = zahl => zahl * zahl;

Wenn du geschweifte Klammern {} in Arrow Functions verwendest, musst du return angeben, wenn du einen Wert zurückgeben willst, sonst gibt die Funktion undefined zurück. Beispiel: const addiere = (a, b) => { a + b; } gibt nichts zurück, während const addiere = (a, b) => { return a + b; } oder const addiere = (a, b) => a + b korrekt die Summe liefert. Für einfache Ausdrücke lass {} einfach weg!

Funktionen aufrufen & Ergebnisse nutzen

Du rufst eine Funktion mit ihrem Namen gefolgt von Klammern () auf. Werte für die Parameter (Argumente) kommen in die Klammern.

const rechteckFlaeche = berechneFlaeche(10, 5); // Funktion aufrufen
console.log(`Die Fläche beträgt: ${rechteckFlaeche}`); // Ausgabe: 50

const summe = addiere(100, 55);
console.log(`Summe: ${summe}`); // Ausgabe: 155

zeigeMeldung(); // Ausgabe: Eine wichtige Meldung!

const zahlQuadriert = quadriere(9);
console.log(`9 im Quadrat ist ${zahlQuadriert}`); // Ausgabe: 81

Parameter: Die Platzhalter in der Funktionsdefinition (z.B. breite, hoehe).
Argumente: Die Werte, die beim Aufruf übergeben werden (z.B. 10, 5).
return: Gibt einen Wert aus der Funktion zurück. Ohne return gibt eine Funktion undefined zurück.

Datenstrukturen: Arrays & Objekte

Um mehr als nur einzelne Werte zu speichern, brauchst du Arrays oder Objekte.

Arrays: Geordnete Listen mit `[]`

Perfekt für Listen, deren Reihenfolge wichtig ist. Zugriff über den Index (beginnt bei 0!).

const freunde = ["Anna", "Ben", "Clara"];

// Zugriff
console.log(freunde[0]); // "Anna"
console.log(`Anzahl Freunde: ${freunde.length}`); // 3

// Hinzufügen/Entfernen
freunde.push("David"); // ["Anna", "Ben", "Clara", "David"]
freunde.pop(); // Entfernt "David" wieder

// Iterieren (modern mit for...of)
console.log("Meine Freunde:");
for (const freund of freunde) {
  console.log(`- ${freund}`);
}
/* Ausgabe:
- Anna
- Ben
- Clara
*/

// Nützliche Methoden (Beispiele)
const enthaeltBen = freunde.includes("Ben"); // true
const indexClara = freunde.indexOf("Clara"); // 2

// Neue Arrays erzeugen (ohne Original zu ändern)
const ersteZwei = freunde.slice(0, 2); // ["Anna", "Ben"]
const grossBuchstaben = freunde.map(name => name.toUpperCase()); // ["ANNA", "BEN", "CLARA"]

Objekte: Eigenschaften mit `{}`

Ideal für Dinge mit verschiedenen Eigenschaften (z.B. ein Benutzer oder ein Produkt). Zugriff über den Eigenschaftsnamen (Schlüssel).

const buch = {
  titel: "Der Herr der Ringe",
  autor: "J.R.R. Tolkien",
  seiten: 1178,
  verfuegbar: true,
  // Methode (Funktion im Objekt)
  infoZeigen() { // Kurzschreibweise für infoZeigen: function() {...}
    console.log(`"${this.titel}" von ${this.autor}, ${this.seiten} Seiten.`);
    // 'this' bezieht sich auf das Objekt selbst (das buch)
  }
};

// Zugriff (Dot Notation ist Standard)
console.log(buch.titel); // "Der Herr der Ringe"
console.log(buch.autor);

// Bracket Notation (wenn Schlüssel als String oder in Variable vorliegt)
console.log(buch["seiten"]); // 1178
let property = "verfuegbar";
console.log(buch[property]); // true

// Ändern & Hinzufügen
buch.verfuegbar = false;
buch.genre = "Fantasy";

// Methode aufrufen
buch.infoZeigen();

DOM: Deine HTML-Seite per Code steuern

Das Document Object Model (DOM) ist die Schnittstelle von JavaScript zu deiner HTML-Seite. Der Browser stellt dein HTML als Baumstruktur dar, und mit JS kannst du diesen Baum durchsuchen und verändern.

Schritt 1: Elemente finden (Selektieren)

Bevor du was ändern kannst, musst du die gewünschten HTML-Elemente "selektieren".

Moderne Methoden wie querySelector nutzen CSS-Selektoren.

document.querySelector('CSS-Selektor'): Findet das erste passende Element. Sehr vielseitig! (z.B. '.klasse', '#id', 'button', 'nav > ul > li')
document.querySelectorAll('CSS-Selektor'): Findet alle passenden Elemente. Gibt eine NodeList (ähnlich einem Array) zurück.
document.getElementById('ID'): Findet das Element mit der spezifischen ID.
document.getElementByClassName('Klasse'): Findet alle Elemente mit der angegebenen Klasse.
document.getElementByTagName('HTML-Tag'): Findet alle Elemente mit dem angegebenen Tag-Namen.

Prüfe immer, ob dein Selektor das Element auch gefunden hat, bevor du versuchst, es zu bearbeiten, sonst gibt es Fehler!

const myButton = document.querySelector('#submitBtn');
if (myButton) { // Nur Code ausführen, wenn myButton wirklich existiert
  myButton.textContent = "Senden";
} else {
  console.error("Button mit ID 'submitBtn' nicht gefunden!");
}

Schritt 2: Elemente verändern

Inhalt ändern:
- element.textContent = "Neuer Text"; (Ändert nur den Text)
- element.innerHTML = "<strong>Neues HTML</strong>"; (Ändert HTML, vorsicht bei fremden Inhalten!)
CSS-Stile per JS ändern:
- element.style.eigenschaftsName = "wert"; (z.B. element.style.color = "red";, element.style.backgroundColor = "lightyellow"; - CSS-Namen werden hier in camelCase angegeben)
- Klassen ändern (besser!):
  - element.classList.add("neue-klasse"); (neue Klasse hinzufügen)
  - element.classList.remove("alte-klasse"); (Klasse entfernen)
  - element.classList.toggle("aktiv-klasse"); (Umschalten zwischen hinzufügen/entfernen)
  - element.classList.contains("check-klasse"); (Prüfen ob Klasse existiert)
  Definiere deine Stile in CSS-Klassen und schalte diese Klassen dann mit JS um. Das ist sauberer als viele Inline-Styles per JS zu setzen.
Attribute ändern: (z.B. src von Bildern, href von Links, disabled von Buttons)
- element.setAttribute("attribut", "neuerWert"); (Neues Attribut hinzufügen)
- element.getAttribute("attribut"); (Wert eines Attributs zurückgeben)
- element.removeAttribute("attribut"); (Attribut entfernen)
- Direkter Zugriff für Standardattribute: z.B. imgElement.src = "new.jpg";, linkElement.href = "...";, buttonElement.disabled = true;

Schritt 3: Auf Events reagieren

Das macht deine Seite lebendig! Lausche auf Benutzeraktionen (oder Browser-Ereignisse).

Die Standardmethode: addEventListener()

const meinButton = document.querySelector('#meinCoolerButton');

if (meinButton) {
  meinButton.addEventListener('click', function(event) {
    // Dieser Code läuft, wenn der Button geklickt wird
    console.log("Button wurde geklickt!");
    console.log("Event-Objekt:", event);
    console.log("Geklicktes Element:", event.target); // Das ist der Button selbst

    // Ändere etwas auf der Seite als Reaktion
    const output = document.querySelector('#feedbackArea');
    if (output) {
      output.textContent = "Danke für den Klick!";
      output.classList.add("success");
    }

    // event.preventDefault(); // Standard-Aktionen verhindern, nützlich z.B. bei Links oder Formular-Submit-Buttons
  });

  // Beispiel für Mouseover
  meinButton.addEventListener('mouseover', () => {
      meinButton.style.backgroundColor = 'lightblue';
  });
  meinButton.addEventListener('mouseout', () => {
      meinButton.style.backgroundColor = '';
  });
}

'click': Mausklick
'mouseover' / 'mouseout': Maus fährt über/verlässt das Element
'keydown' / 'keyup': Taste gedrückt/losgelassen
'submit': Formular wird abgeschickt
'change': Wert eines Formularfelds (input, select, textarea) ändert sich
'load': Seite oder Ressource (z.B. Bild) ist fertig geladen
'scroll': Wenn gescrollt wird
... und viele mehr!

Die Funktion, die bei einem Event ausgeführt wird (der sogenannte Callback), erhält automatisch ein Event-Objekt (oft event oder e genannt) mit Details zum Ereignis (z.B. event.target, event.key, event.preventDefault()).

Interaktives Beispiel: DOM & Events

Klicke auf die Buttons oder gib Text ein!

Hier passiert etwas...

Super! Du sprichst jetzt JavaScript!

Glückwunsch! 🎉 Du hast die fundamentalen Bausteine von modernem JavaScript kennengelernt und verstanden, wie du damit deine Webseiten zum Leben erwecken kannst. Das Zusammenspiel von HTML (Struktur), CSS (Design) und JavaScript (Verhalten) ist der Kern der modernen Webentwicklung.

Du hast nun ein solides Basisverständnis von:

Grundlegender Syntax, Variablen (let/const), Datentypen.
Operatoren für Berechnungen, Vergleiche und Logik.
Kontrollstrukturen (if/else, for/while).
Funktionen für wiederverwendbaren Code (insbesondere Arrow Functions).
Strukturierung von Daten mit Arrays und Objekten.
Grundlagen der DOM-Manipulation (Elemente finden, Inhalt/Stil/Attribute ändern).
Reaktion auf Benutzeraktionen mit addEventListener.

Die Reise mit JavaScript hat gerade erst begonnen! Es gibt noch unglaublich viel zu entdecken:

Vertiefung: Asynchrones JavaScript (async/await, Promises) ist essenziell für Datenladen vom Server (fetch). Schau dir auch Error Handling (try/catch), Scope/Closures und ES6-Module (import/export) genauer an.
Mehr DOM & Web APIs: Erkunde das Erstellen/Entfernen von Elementen, Event Bubbling/Capturing, und andere Browser-APIs wie LocalStorage, Fetch API, Canvas, etc.
Üben, Üben, Üben: Das Wichtigste! Baue kleine Projekte: Eine To-Do-Liste, einen einfachen Rechner, ein Quiz, eine Bildergalerie, eine interaktive Navigation. Versuche, Funktionen von Webseiten nachzubauen.
Frameworks/Bibliotheken (Später!): Wenn die Grundlagen sitzen, schau dir React, Vue oder Angular an. Sie helfen enorm bei größeren Anwendungen, setzen aber ein solides JS-Verständnis voraus.
Node.js (Backend): Entdecke, wie du JS auch serverseitig nutzen kannst.

Die beste Quelle zum Nachschlagen ist das MDN Web Docs (Mozilla Developer Network). Bleib neugierig, sei nicht frustriert von Fehlern (sie gehören dazu!), und hab Spaß daran, interaktive Erlebnisse im Web zu schaffen!

Webmaster Einsteigerguide: JavaScript

Was ist JavaScript und wofür brauchst du es?

JavaScript einbinden:

Die Browserkonsole: Dein unverzichtbarer Helfer!

Kommentare, Variablen, Datentypen

Kommentare

Variablen: Speicher für deine Daten

Datentypen:

🧠 Quiz-Pause 1:

Operatoren: Rechnen, Vergleichen, Logik verknüpfen

Moderne Strings: Template Literals (Backticks ``)

Kontrollstrukturen: Den Ablauf steuern

Abfragen: `if`, `else if`, `else`

Alternative: `switch`

Schleifen: `for`, `while` und die `forEach`-Methode

`for`-Schleife

`while`-Schleife

`forEach`-Methode

🧠 Quiz-Pause 2:

Funktionen:

Klassische Schreibweise mit `function`

Definition auf moderne Art: Arrow Functions

Funktionen aufrufen & Ergebnisse nutzen

Datenstrukturen: Arrays & Objekte

Arrays: Geordnete Listen mit `[]`

Objekte: Eigenschaften mit `{}`

🧠 Quiz-Pause 3:

DOM: Deine HTML-Seite per Code steuern

Schritt 1: Elemente finden (Selektieren)

Schritt 2: Elemente verändern

Schritt 3: Auf Events reagieren

Interaktives Beispiel: DOM & Events

🧠 Quiz-Pause 4:

Super! Du sprichst jetzt JavaScript!

Webmaster Einsteigerguide: JavaScript

Was ist JavaScript und wofür brauchst du es?

JavaScript einbinden:

Die Browserkonsole: Dein unverzichtbarer Helfer!

Kommentare, Variablen, Datentypen

Kommentare

Variablen: Speicher für deine Daten

Datentypen:

🧠 Quiz-Pause 1:

Operatoren: Rechnen, Vergleichen, Logik verknüpfen

Moderne Strings: Template Literals (Backticks ``)

Kontrollstrukturen: Den Ablauf steuern

Abfragen: if, else if, else

Alternative: switch

Schleifen: for, while und die forEach-Methode

for-Schleife

while-Schleife

forEach-Methode

🧠 Quiz-Pause 2:

Funktionen:

Klassische Schreibweise mit function

Definition auf moderne Art: Arrow Functions

Funktionen aufrufen & Ergebnisse nutzen

Datenstrukturen: Arrays & Objekte

Arrays: Geordnete Listen mit []

Objekte: Eigenschaften mit {}

🧠 Quiz-Pause 3:

DOM: Deine HTML-Seite per Code steuern

Schritt 1: Elemente finden (Selektieren)

Schritt 2: Elemente verändern

Schritt 3: Auf Events reagieren

Interaktives Beispiel: DOM & Events

🧠 Quiz-Pause 4:

Super! Du sprichst jetzt JavaScript!

Abfragen: `if`, `else if`, `else`

Alternative: `switch`

Schleifen: `for`, `while` und die `forEach`-Methode

`for`-Schleife

`while`-Schleife

`forEach`-Methode

Klassische Schreibweise mit `function`

Arrays: Geordnete Listen mit `[]`

Objekte: Eigenschaften mit `{}`