JavaScript lernen klingt nach Berg – ist aber ein Hügel, den du heute besteigst. In den nächsten 30 Minuten verstehst du, wie JavaScript Webseiten lebendig macht: von Variablen über Funktionen bis zum ersten klickbaren Button, der wirklich reagiert.
Kein trockenes Vorgeplänkel, keine 200-Seiten-Theorie. Du bekommst genau die Bausteine, die du für echte, interaktive Webseiten brauchst – mit Code, den du sofort ausprobieren kannst.
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:
constfür Werte, die bleiben,letfür Werte, die sich ändern. - Funktionen: wiederverwendbare Code-Blöcke, die du mit Namen aufrufst.
- Logik:
if/elsetrifft Entscheidungen, Schleifen wiederholen Dinge. - DOM: mit
querySelectorgreifst du HTML-Elemente, mitaddEventListenerlauschst du auf Klicks. - Üben schlägt Lesen: tippe jedes Beispiel selbst ab, statt nur zu scrollen.
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 10const 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
| Typ | Wofür | Beispiel |
|---|---|---|
| String | Text, immer in Anführungszeichen | "Hallo" |
| Number | Zahlen, ganz oder mit Komma (Punkt!) | 42, 3.14 |
| Boolean | wahr oder falsch | true, false |
| Array | Liste mehrerer Werte | ["a", "b", "c"] |
| Object | Sammlung benannter Werte | { name: "Lena", alter: 28 } |
| null / undefined | „bewusst leer" bzw. „noch kein Wert" | null |
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 + "!";