Willkommen zu JavaScript — die Basics

JavaScript macht Webseiten interaktiv. Hier lernst du kompakt: Variablen, Datentypen, Funktionen, Schleifen, wie du das DOM veränderst und Events nutzt. Kurze Texte, verständliche Beispiele und kleine Live-Demos helfen dir, das Prinzip zu verstehen.

Variablen & Datentypen

Variablen speichern Werte. Es gibt z. B. Strings (Text), Numbers (Zahlen), Booleans (wahr/falsch), Arrays und Objekte.

// Variablen: let, const, var
// Verwende  für unveränderliche Werte,  für veränderliche.
const name = "Alex";     // String
let alter = 25;          // Number
let istStudent = true;   // Boolean

// Arrays und Objekte
const fruechte = ["Apfel", "Banane", "Kirsche"]; // Array
const person = { name: "Mia", alter: 30 };       // Objekt

// Kurze Erklärung:
console.log(typeof name);      // "string"
console.log(typeof alter);     // "number"
console.log(Array.isArray(fruechte)); // true

Funktionen

Funktionen bündeln wiederverwendbaren Code. Du gibst ihnen Eingaben (Parameter) und erhältst oft einen Rückgabewert.

// Funktion deklarieren
function begruessung(name) {
  return `Hallo, ${name}!`;
}

// Arrow-Funktion (modern)
const quadrat = (n) => n * n;

// Nutzung:
console.log(begruessung("Alex")); // "Hallo, Alex!"
console.log(quadrat(5));          // 25

// Tipp: Schreibe kurze, aussagekräftige Funktionsnamen.

Schleifen

Schleifen wiederholen Code. Häufig: for, for...of, while.

// for-Schleife
for (let i = 0; i < 3; i++) {
  console.log("Durchlauf", i);
}

// for...of (ideal für Arrays)
const zahlen = [2, 4, 6];
for (const z of zahlen) {
  console.log(z); // 2, 4, 6
}

// while-Schleife
let j = 0;
while (j < 2) {
  console.log("while", j);
  j++;
}

DOM-Manipulation

Das DOM (Document Object Model) ist die Struktur deiner Seite. Mit JS findest und veränderst du Elemente: querySelector, createElement, append, ...

// DOM-Beispiel (die Datei bindet dieses Script am Ende):
// 1) Element auswählen: document.querySelector / getElementById
// 2) Neues Element erstellen: document.createElement
// 3) Element anhängen: parent.appendChild / parent.append
// 4) Event-Listener hinzufügen (siehe Events-Sektion)

const input = document.getElementById('inputItem');
const btnAdd = document.getElementById('btnAdd');
const list = document.getElementById('itemList');

btnAdd.addEventListener('click', () => {
  const text = input.value.trim();
  if (!text) return; // nichts tun, wenn leer
  const li = document.createElement('li'); // neues Listenelement
  li.textContent = text;
  list.appendChild(li); // das neue Element in die Liste einfügen
  input.value = '';     // Feld leeren
});

Events

Events sind Aktionen (z. B. Klicks, Tastatur, Laden). Mit Listener reagierst du auf diese Aktionen: addEventListener.

// Event-Beispiel:
// addEventListener akzeptiert ein Event (z. B. 'click') und eine Funktion (Callback).
const btn = document.getElementById('counterBtn');
const disp = document.getElementById('counterDisplay');
let clicks = 0;

btn.addEventListener('click', () => {
  clicks++;
  disp.textContent = `${clicks} Klick${clicks === 1 ? '' : 's'}`;
});

// Wichtiger Tipp: Entferne Listener, wenn sie nicht mehr gebraucht werden:
// btn.removeEventListener('click', handlerFunction);