Was ist JavaScript und wofür wird es genutzt?

01Was ist JavaScript?

Die praktischste Antwort auf die Frage Was ist JavaScript lautet: die Sprache hinter allem, was auf einer Webseite reagiert, wenn Sie klicken, tippen oder scrollen. Das aufklappende Menü, der Button »In den Warenkorb«, der Suchvorschlag in Echtzeit oder der Zoom auf der Karte funktionieren mit JavaScript.

Die Sprache entstand Mitte der 1990er-Jahre für Browser und wird durch einen Standard namens ECMAScript definiert. Trotz der ähnlichen Namen hat sie mit Java nichts direkt zu tun; Syntax und Arbeitsweise unterscheiden sich deutlich.

Heute ist JavaScript nicht mehr auf den Browser beschränkt. Es läuft auf Servern, in mobilen Apps, in Desktop-Programmen und sogar auf kleinen Geräten. Diese Verbreitung macht es zu einer der produktivsten Sprachen für Einsteiger in die Softwareentwicklung.

JavaScript ist eine interpretierte und dynamisch typisierte Sprache: Vor der Ausführung ist kein eigener Kompilierungsschritt nötig, und der Typ von Variablen wird erst zur Laufzeit bestimmt. Das erleichtert schnelles Ausprobieren, kann in großen Projekten aber dazu führen, dass Typfehler erst spät auffallen.

02Wie arbeiten HTML, CSS und JavaScript zusammen?

Stellen Sie sich eine Webseite wie ein Haus vor. HTML sind die Wände und Räume, CSS sind Farbe und Möbel, JavaScript ist die Elektroinstallation: Sie schaltet das Licht ein, öffnet die Tür und löst den Alarm aus.

Die drei ersetzen einander nicht. Der Inhalt gehört in HTML, das Aussehen in CSS; JavaScript sollte nur für das Verhalten genutzt werden. Diese Trennung erleichtert die Wartung und sorgt dafür, dass der Inhalt auch dann sichtbar bleibt, wenn JavaScript nicht geladen wird.

Wenn die Seite im Browser geöffnet wird, verwandelt sich das HTML in eine Baumstruktur namens DOM. JavaScript greift auf diesen Baum zu: Es findet ein Element, ändert seinen Text, fügt neue Elemente hinzu oder wartet auf ein Ereignis.

<p id="mesaj">Merhaba!</p>
<button id="dugme">Ändern</button>

<script>
  const mesaj = document.getElementById("mesaj");
  document.getElementById("dugme").addEventListener("click", () => {
    mesaj.textContent = "JavaScript wurde ausgeführt.";
  });
</script>

03Wofür wird JavaScript verwendet?

Die Antwort auf die Frage Wofür wird JavaScript verwendet hängt von der Umgebung ab. Im Browser gestaltet es das Nutzererlebnis, auf dem Server die Geschäftslogik, auf Mobil- und Desktop-Geräten die Anwendung selbst.

JavaScript im Browser

JavaScript im Browser kommt vor allem hierfür zum Einsatz: Formularvalidierung, Aufklappmenüs und Tabs, Bildergalerien, Datenabruf ohne Neuladen der Seite, Karten und Diagramme sowie Warenkorb und Bezahlschritte. In einer gut konzipierten Oberfläche führen diese Abläufe die Nutzer, ohne sie zu ermüden; ihre Planung ist Gegenstand des UI/UX-Designs.

JavaScript auf dem Server

Node.js ist eine Umgebung, die JavaScript außerhalb des Browsers ausführt. Damit schreibt man APIs, Echtzeit-Messaging-Dienste, Skripte zur Dateiverarbeitung und Kommandozeilen-Tools. Dass dieselbe Sprache im Frontend und im Backend verwendet wird, erleichtert kleinen Teams die Arbeit.

Mobil und Desktop

Mit Werkzeugen wie React Native lassen sich mobile Apps, mit Werkzeugen wie Electron Desktop-Programme in JavaScript entwickeln. Einige Code-Editoren und Messenger-Apps, die Sie täglich nutzen, sind auf diese Weise entstanden.

04Grundbegriffe und Beispiele

Wer mit JavaScript beginnt, sollte zuerst diese Bausteine verinnerlichen. Die folgenden JavaScript-Beispiele lassen sich direkt in der Entwicklerkonsole des Browsers (F12) ausprobieren.

• Variablen: Mit let und const werden Werte gespeichert; für Werte, die sich nicht ändern, bevorzugt man const.
• Datentypen: Text (string), Zahl (number), Wahrheitswert (boolean), Liste (array), Objekt (object).
• Funktionen: Sie fassen wiederkehrende Arbeit unter einem Namen zusammen; Pfeilfunktionen ermöglichen eine kurze Schreibweise.
• Array-Methoden: Mit map, filter, find und reduce werden Listen übersichtlich verarbeitet.
• Ereignisse: Auf Nutzeraktionen wie click, input oder submit wird reagiert.
• Asynchroner Code: Mit fetch, Promise und async/await friert die Seite beim Warten auf Daten nicht ein.

const urunler = [
  { ad: "Olivenöl", fiyat: 320 },
  { ad: "Sabun", fiyat: 90 },
  { ad: "Bal", fiyat: 410 }
];

const pahalilar = urunler.filter(u => u.fiyat > 300).map(u => u.ad);
console.log(pahalilar); // ["Olivenöl", "Honig"]

async function kullaniciGetir() {
  const yanit = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const veri = await yanit.json();
  console.log(veri.name);
}
kullaniciGetir();

05JavaScript und Site-Performance

JavaScript ist mächtig, aber nicht kostenlos. Der Browser muss jedes Skript herunterladen, parsen und ausführen. Zu viel oder unnötiges JavaScript lässt die Seite vor allem auf Mittelklasse-Smartphones verzögert reagieren.

Googles Interaktionsmetrik INP misst, wie lange die Seite braucht, um auf einen Klick zu antworten; Werte unter 200 ms gelten als gut. Schwere Skripte, ungenutzte Bibliotheken und viele Drittanbieter-Tags sind die Hauptursachen für einen schlechten Wert.

Die Faustregeln sind einfach: Laden Sie nur den Code, der gebraucht wird, verschieben Sie unkritische Skripte und verwenden Sie nicht mehrere Bibliotheken für dieselbe Aufgabe. Diese Messung und Verbesserung sollte regelmäßig im Rahmen der Speed- und Performance-Optimierung erfolgen. Für ein flüssiges Erlebnis auf dem Smartphone muss sie zusammen mit Responsive Webdesign gedacht werden.

06Häufige Anfängerfehler

JavaScript ist eine flexible Sprache; diese Flexibilität macht es anfangs auch leicht, Fehler zu machen. Wer die folgenden Stolperfallen kennt, erspart sich stundenlange Fehlersuche.

• Statt === das lockere == verwenden: Der lockere Vergleich wandelt Typen automatisch um und liefert unerwartete Ergebnisse; der strikte Vergleich ist sicherer.
• Variablen mit var definieren: Das führt zu Problemen mit dem Gültigkeitsbereich; im modernen Code werden let und const verwendet.
• Nicht auf asynchronen Code warten: Wer Daten verwendet, bevor das Ergebnis von fetch da ist, löst am häufigsten Fehler durch undefinierte Werte aus.
• Fehler in der Konsole ignorieren: Die Browserkonsole nennt Zeile und Ursache des Fehlers meist ganz deutlich.
• Nutzereingaben vertrauen: Die Validierung im Browser dient dem Komfort; für die Sicherheit muss dieselbe Prüfung unbedingt auch auf dem Server erfolgen.
• Für jede Aufgabe ein neues Paket einbinden: Eine Bibliothek für etwas, das sich mit wenigen Zeilen lösen lässt, macht die Seite schwerer und erhöht den Wartungsaufwand.

07Das JavaScript-Ökosystem: React, TypeScript, Node.js

Rund um JavaScript gibt es ein sehr breites Ökosystem an Werkzeugen. Genau das verwirrt Einsteiger am meisten: welches Werkzeug wofür gedacht ist.

Bibliotheken wie React teilen die Oberfläche in Komponenten auf und machen große Projekte beherrschbar; Details finden Sie in unserem Beitrag Was ist React. TypeScript ergänzt JavaScript um ein Typsystem und fängt Fehler ab, bevor der Code läuft; die Unterschiede haben wir im Beitrag Was ist TypeScript erklärt.

npm wiederum ist der Paketmanager; er ermöglicht es, von anderen geschriebene fertige Codebausteine in ein Projekt einzubinden. Um die Grenze zwischen Frontend und Backend zu klären, hilft außerdem unser Beitrag zum Unterschied zwischen Frontend und Backend.

08Lernplan für JavaScript

Um JavaScript zu lernen, brauchen Sie keine teure Ausstattung; ein Browser und ein Code-Editor genügen. Wichtig ist, die Reihenfolge richtig zu wählen und jedes Konzept mit einem kleinen Projekt zu festigen.

1. Erstellen Sie mit HTML und CSS eine einfache Seite.
2. Probieren Sie Variablen, Bedingungen, Schleifen und Funktionen in der Konsole aus.
3. Lernen Sie, mit dem DOM Elemente der Seite auszuwählen und zu verändern.
4. Schließen Sie ein kleines Projekt ab, etwa eine To-do-Liste oder einen Taschenrechner.
5. Rufen Sie mit fetch und async/await Daten von einer offenen API ab.
6. Lernen Sie Module, npm und ein Build-Tool kennen; wechseln Sie danach zu einer Bibliothek.

Verlässliche Quellen

Als Nachschlagewerk zur Sprache sind die MDN Web Docs eine der zuverlässigsten Adressen. Videos und Kurse sind nützlich, doch das eigentliche Lernen findet in Ihren eigenen Projekten statt, in denen Sie Fehler machen und beheben.