Was JavaScript eigentlich macht

HTML ist das Skelett deiner Seite, CSS ist die Kleidung – und JavaScript ist die Muskulatur. JavaScript ist die Sprache, die im Browser läuft und auf Aktionen reagiert: Ein Klick, eine Eingabe, ein Scrollen. Damit baust du Dinge wie ausklappbare Menüs, Bildergalerien, Formular-Prüfungen, Suchfilter oder ganze Web-Apps.

Das Beste: Du brauchst keine Installation. Jeder Browser bringt eine JavaScript-Engine mit. Öffne irgendeine Seite, drücke F12, klick auf den Tab „Konsole" (Console) und tippe:

console.log("Hallo, ich lerne JavaScript!");

Enter drücken – und dein erster Code läuft. Genau so fängst du an: ausprobieren, sehen, was passiert, weitermachen.

Variablen und Datentypen

Eine Variable ist ein beschrifteter Behälter für einen Wert. In modernem JavaScript nutzt du dafür let und const – die alte Form var lässt du als Anfänger besser links liegen.

const name = "Lena";      // bleibt konstant
let punkte = 0;          // darf sich ändern
punkte = punkte + 10;     // jetzt 10

const oder let – wann was?

Die Faustregel ist erfreulich simpel: Nimm immer const. Nur wenn du den Wert später wirklich neu zuweisen musst (ein Zähler, eine Summe), nimmst du let. Das macht deinen Code sicherer, weil const versehentliches Überschreiben verhindert.

Die wichtigsten Datentypen

Praktisch: Mit typeof punkte fragst du jederzeit nach, welcher Typ in einer Variablen steckt. Das hilft enorm beim Suchen von Fehlern.

Funktionen: Code, den du wiederverwendest

Eine Funktion ist ein Stück Code mit Namen, das du beliebig oft aufrufen kannst. Du steckst etwas hinein (Parameter) und bekommst meist etwas zurück (return).

// Funktion definieren
function begruesse(name) {
  return "Hallo, " + name + "!";
}

// Funktion aufrufen
const gruss = begruesse("Lena");
console.log(gruss); // "Hallo, Lena!"

Sehr verbreitet ist heute auch die kürzere Pfeil-Schreibweise (Arrow Function). Sie tut dasselbe:

const begruesse = (name) => "Hallo, " + name + "!";

Funktionen sind das Herzstück sauberen Codes: Statt dieselbe Logik fünfmal zu kopieren, schreibst du sie einmal und rufst sie fünfmal auf.

Entscheidungen und Wiederholungen

if / else – Entscheidungen treffen

Mit if prüfst du eine Bedingung. Ist sie wahr, läuft der Block; sonst springt JavaScript optional in else.

const alter = 17;

if (alter >= 18) {
  console.log("Zutritt erlaubt");
} else {
  console.log("Noch zu jung");
}

Wichtig für Vergleiche: Nimm immer === (drei Gleichheitszeichen) statt ==. Das prüft Wert und Typ und erspart dir tückische Überraschungen.

Schleifen – Dinge wiederholen

Eine Schleife wiederholt einen Block, bis eine Bedingung nicht mehr stimmt. Die klassische for-Schleife zählt:

for (let i = 1; i <= 3; i++) {
  console.log("Durchlauf " + i);
}
// Durchlauf 1, Durchlauf 2, Durchlauf 3

Über Listen gehst du am elegantesten mit for...of:

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

for (const farbe of farben) {
  console.log(farbe);
}

Der DOM: JavaScript trifft auf HTML

Bis hierhin lief alles in der Konsole. Jetzt wird es spannend: Mit dem DOM (Document Object Model) erreichst du die echten HTML-Elemente deiner Seite und veränderst sie live.

Zwei Werkzeuge brauchst du fast immer:

• document.querySelector("…") – schnappt sich ein Element per CSS-Selektor, z. B. "#zaehler" (ID) oder ".button" (Klasse).
• element.addEventListener("click", …) – lässt JavaScript auf ein Ereignis lauschen, etwa einen Klick.

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

button.addEventListener("click", () => {
  alert("Du hast geklickt!");
});

Die Reihenfolge ist immer gleich: Element greifen → auf Ereignis lauschen → reagieren. Hast du dieses Muster verstanden, kannst du fast jede Interaktion auf einer Seite bauen.

Live-Beispiel: dein erster Klick-Zähler

Genug Theorie – hier läuft echtes JavaScript direkt auf dieser Seite. Klick den Button und beobachte, wie die Zahl steigt:

Der Code dahinter ist erstaunlich kurz und nutzt genau das, was du gerade gelernt hast:

// 1. Elemente greifen
const anzeige = document.querySelector("#js-demo-count");
const knopf   = document.querySelector("#js-demo-btn");

// 2. Variable für den Zählerstand (let, weil sie sich ändert)
let stand = 0;

// 3. Auf Klick lauschen und reagieren
knopf.addEventListener("click", () => {
  stand = stand + 1;
  anzeige.textContent = stand;
});

Das ist die ganze Magie: eine Variable, ein Event-Listener, eine Aktualisierung des Textes. Genau dieses Muster steckt hinter unzähligen Funktionen echter Websites.

Typische Anfängerfehler – und wie du sie vermeidest

1. Variable noch nicht da – Dein Script läuft, bevor das HTML geladen ist, und querySelector findet nichts (null). Lade dein Script am Ende des <body> oder nutze das Attribut defer.
2. == statt === – "5" == 5 ist true, weil JavaScript heimlich umwandelt. Nimm immer ===, dann gibt es keine bösen Überraschungen.
3. Tippfehler in Namen – getElementbyId existiert nicht, korrekt ist getElementById. JavaScript ist groß-/kleinschreibungsempfindlich.
4. Anführungszeichen vergessen – Text braucht immer Anführungszeichen. name = Lena sucht eine Variable namens Lena; richtig ist name = "Lena".
5. Komma statt Punkt – Zahlen schreibst du mit Punkt: 3.14, nicht 3,14. Ein Komma macht daraus zwei Werte.
6. Konsole ignorieren – Die Browser-Konsole (F12) zeigt dir Fehler mit Zeilennummer. Lies sie, statt zu raten – sie ist dein bester Lehrer.

Dein Fahrplan für die nächsten Schritte

Du hast jetzt das Fundament. So baust du sinnvoll darauf auf:

1. Baue den Klick-Zähler von oben in einer eigenen HTML-Datei nach – ohne Vorlage.
2. Lerne Arrays richtig kennen: push, map, filter, forEach.
3. Verstehe Objekte und wie du Daten strukturierst.
4. Tauche in asynchrones JavaScript ein: fetch, Promises und async/await, um Daten aus dem Netz zu laden.

Jeder dieser Schritte fühlt sich anfangs neu an – und nach ein paar Versuchen selbstverständlich. Genau so lernt man programmieren: in kleinen, machbaren Häppchen.

Häufige Fragen