HTML/CSS/Code

JavaScript

JavaScript ist die Programmiersprache, die Websites lebendig macht. Alles, was sich nach dem Laden bewegt, reagiert oder verändert — ein Klick, ein Slider, ein Formular, ein Pop-up — läuft über JavaScript.

Lesezeit 4 Min Kategorie HTML/CSS/Code

Was ist JavaScript?

JavaScript ist die einzige Programmiersprache, die Browser direkt verstehen. Während HTML den Inhalt liefert und CSS das Aussehen, ist JavaScript der Teil, der Logik, Interaktion und Dynamik bringt. Klickt ein Besucher auf einen Button und ein Menü klappt aus? JavaScript. Tippt jemand in ein Suchfeld und es erscheinen sofort Vorschläge? JavaScript. Wird das Bildkarussell automatisch weitergeschoben? JavaScript.

Trotz des Namens hat JavaScript nichts mit Java zu tun — der Name war Marketing aus den 90ern. Heute ist JavaScript die meistgenutzte Programmiersprache der Welt und läuft nicht nur im Browser, sondern auch auf Servern (über Node.js), in Apps und sogar auf Smart-TVs.

Moderner JavaScript-Code sieht deutlich anders aus als der aus den 2000er-Jahren. Seit ES6 (offiziell ECMAScript 2015) gibt es let und const statt dem alten var, Arrow-Functions (() => {}), Template-Strings, Destructuring und Module. const steht für Werte, die sich nicht mehr ändern, let für veränderbare Variablen — var sollte man heute schlicht nicht mehr anfassen. Ebenfalls neu und überall im Einsatz sind Promises und async/await, mit denen asynchrone Vorgänge (Server-Anfragen, Datei-Zugriffe, Zeitgeber) lesbar und ohne verschachtelte Callbacks geschrieben werden. Statt einer Pyramide aus then()-Ketten schreibst du const daten = await fetch(url) — Zeile für Zeile wie synchronen Code, aber ohne den Browser zu blockieren.

Beispiel: Du betreibst einen kleinen Online-Shop für selbstgemachte Seifen. Wenn ein Kunde auf "In den Warenkorb" klickt, soll oben rechts der Warenkorb-Counter von 0 auf 1 springen, ohne dass die ganze Seite neu lädt. Genau dafür ist JavaScript da.

Wie funktioniert JavaScript?

JavaScript-Code wird im Browser ausgeführt, sobald die HTML-Seite geladen ist. Der Browser hat einen eingebauten Interpreter (die "JavaScript Engine"), der den Code Zeile für Zeile abarbeitet. JavaScript spricht über den DOM mit der Seite — der DOM ist die Baum-Darstellung deines HTMLs, und JavaScript kann jeden Knoten in diesem Baum lesen, ändern, hinzufügen oder löschen.

Ein einfaches Beispiel: Du willst, dass beim Klick auf einen Button ein Text erscheint.

<button id="meinButton">Klick mich</button>
<p id="ausgabe"></p>
const button = document.getElementById("meinButton");
const ausgabe = document.getElementById("ausgabe");

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

Was hier passiert: JavaScript holt sich den Button und das Absatz-Element aus dem DOM, hängt einen "Event Listener" an den Button und sagt: "Wenn jemand klickt, schreib in den Absatz den Text 'Du hast geklickt!'." Das ist die Grundlogik — Element holen, Ereignis abfangen, etwas verändern.

Client-side vs Server-side

JavaScript läuft heute an zwei Orten:

Client-side heißt: Der Code läuft im Browser des Besuchers. Alles, was sichtbar passiert — Animationen, Hover-Effekte, Formvalidierung, klickbare Menüs — ist Client-side. Vorteil: super schnell, keine Server-Anfragen nötig. Nachteil: Jeder kann den Code im Browser einsehen, also nichts Geheimes darin verstecken.

Server-side heißt: JavaScript läuft auf einem Server (meistens über Node.js) und macht dort Dinge wie Datenbankabfragen, E-Mail-Versand, Bezahlprozesse oder das Generieren von HTML. Server-side JavaScript ist das, was eine API antwortet, wenn dein Frontend etwas anfragt.

Moderne Websites mischen beides: Der Server liefert die Grundseite, das Frontend macht den Rest dynamisch.

Warum ist JavaScript für deine Website wichtig?

Ohne JavaScript wäre eine Website ein statisches Dokument. Mit JavaScript wird sie eine Anwendung. Praktisch heißt das: Cookie-Banner, Live-Chat-Widgets, Bildergalerien mit Lightbox, Filter im Shop, animierte Zähler, validierte Kontaktformulare, automatisches Nachladen von Inhalten beim Scrollen — alles JavaScript.

Beispiel aus dem Alltag: Eine Physiotherapie-Praxis hat ein Online-Terminbuchungstool auf der Website. Der Besucher wählt Datum und Uhrzeit, sieht sofort, welche Slots noch frei sind, bekommt eine Bestätigung — ohne dass die Seite neu lädt. Dahinter steckt JavaScript, das mit dem Buchungssystem über eine API spricht und das Ergebnis live ins Frontend schreibt.

Aber: JavaScript hat einen Preis. Zu viel JavaScript bedeutet langsame Ladezeiten, schlechte Core Web Vitals und schlechtere Google-Rankings. Wer große Bundles ausliefert, sollte sie mindestens durch Minification schieben und kritisch prüfen, was wirklich gebraucht wird. Die Kunst ist, JavaScript gezielt einzusetzen, nicht inflationär.

Häufige Fehler beim Einsatz von JavaScript

Tracking-Skripte ohne Cookie-Consent. Wer Google Analytics oder Facebook Pixel per JavaScript lädt, ohne vorher die DSGVO-Einwilligung abzuholen und den entsprechenden Cookie zu setzen, kassiert Abmahnungen.

Riesige Frameworks für Mini-Aufgaben. Wer für ein einfaches Akkordeon-Menü ein 200 KB schweres React-Bundle lädt, opfert PageSpeed für nichts. Manchmal reichen 10 Zeilen Vanilla-JavaScript.

Kein Fallback ohne JavaScript. Wenn deine Hauptnavigation nur mit JavaScript funktioniert und der Browser es blockiert (selten, aber möglich), sieht der Besucher gar nichts. Wichtige Dinge sollten auch ohne JS gehen.

Endlose Render-Schleifen. Schlecht geschriebene Effekte können den Browser zum Stillstand bringen. Tab friert ein, Lüfter dreht hoch, Besucher weg.

Ähnliche Begriffe

Recht

Impressum

Das Impressum ist die gesetzlich vorgeschriebene Anbieterkennzeichnung einer Website. Jede geschäftsmäßig betriebene Sei…

Weiterlesen →
Web-Technik

API

Eine API ist eine technische Schnittstelle, über die zwei Software-Systeme miteinander reden. Ein Online-Shop fragt per …

Weiterlesen →
Design

Footer

Der Footer ist der unterste Bereich deiner Website — der Abschluss jeder Seite. Er sieht aus wie ein Anhängsel, ist aber…

Weiterlesen →
Cookie Consent mit Real Cookie Banner