Skip to main content

Was ist JavaScript?

JavaScript macht Webseiten lebendig

JavaScript ist eine Programmiersprache, mit der Webseiten auf Eingaben reagieren und Inhalte verändern können. Sie läuft meist direkt im Browser der Besucherin oder des Besuchers.

HTML beschreibt die Struktur einer Seite, CSS gestaltet ihr Aussehen und JavaScript sorgt für Verhalten und Interaktion.

Stell dir eine Webseite wie ein kleines Geschäft vor:

  • HTML ist das Gebäude mit Türen, Regalen und Schildern.
  • CSS bestimmt Farben, Größen und das Erscheinungsbild.
  • JavaScript reagiert darauf, wenn jemand eine Tür öffnet, einen Knopf drückt oder etwas in ein Formular schreibt.

Ohne JavaScript ist eine Webseite oft hauptsächlich statisch: Texte und Bilder werden angezeigt, aber die Seite reagiert kaum auf Aktionen.

Typische Aufgaben von JavaScript

JavaScript kann sehr unterschiedliche Aufgaben übernehmen. Zum Beispiel kann es:

  • auf Klicks auf Schaltflächen reagieren,
  • Formulare prüfen, bevor sie abgeschickt werden,
  • Texte auf einer Seite ändern,
  • Menüs ein- und ausblenden,
  • Bildergalerien steuern,
  • Berechnungen durchführen,
  • Daten von einem Server nachladen,
  • kleine Spiele oder interaktive Lernaufgaben umsetzen.

Ein Beispiel: Eine Schaltfläche soll nach einem Klick eine Begrüßung anzeigen.

<button id="grussButton">Begrüßung anzeigen</button>
<p id="ausgabe"></p>

Mit JavaScript kann später festgelegt werden: Wenn jemand auf die Schaltfläche klickt, erscheint ein Text im Absatz. Wie das genau funktioniert, lernst du im Kapitel über interaktive Webseiten.

JavaScript im Zusammenspiel mit HTML und CSS

Moderne Webseiten bestehen häufig aus drei wichtigen Bausteinen:

Technik Aufgabe Beispiel
HTML Inhalt und Struktur Überschriften, Absätze, Schaltflächen
CSS Gestaltung Farben, Abstände, Schriftgrößen
JavaScript Verhalten und Interaktion Klicks verarbeiten, Inhalte ändern

Ein einfaches Beispiel:

<h1>Willkommen</h1>
<button>Mehr erfahren</button>

button {
  background-color: steelblue;
  color: white;
}

console.log("Die Seite wurde geöffnet.");

HTML erzeugt die Überschrift und die Schaltfläche. CSS gestaltet die Schaltfläche. JavaScript kann im Hintergrund eine Nachricht ausgeben oder auf einen Klick reagieren.

Merke: JavaScript ersetzt HTML und CSS nicht. Die drei Technologien ergänzen sich.

JavaScript läuft im Browser

Die meisten Browser können JavaScript direkt ausführen. Dazu gehören beispielsweise:

  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge
  • Safari

Im Browser befindet sich eine sogenannte JavaScript-Engine. Sie liest deinen JavaScript-Code und führt die Anweisungen aus.

Wenn eine Webseite JavaScript enthält, lädt der Browser normalerweise zuerst die Seite. Anschließend führt er den JavaScript-Code aus. Dadurch kann sich die Seite verändern, ohne dass sie vollständig neu geladen werden muss.

Ein Beispiel aus dem Alltag: Du klickst bei einem Online-Shop auf „In den Warenkorb“. Die Zahl am Warenkorb-Symbol erhöht sich sofort. Häufig passiert das mit JavaScript.

JavaScript ist nicht Java

Die Namen sind ähnlich, aber JavaScript und Java sind unterschiedliche Programmiersprachen.

JavaScript Java
Wird sehr häufig für Webseiten verwendet Wird unter anderem für große Anwendungen und Android-Apps eingesetzt
Läuft direkt im Browser Wird meist in einer eigenen Laufzeitumgebung ausgeführt
Einstieg oft direkt mit HTML und einem Browser möglich Benötigt üblicherweise zusätzliche Werkzeuge
Ist eine eigene Sprache mit eigener Syntax Ist keine „größere Version“ von JavaScript

Die Namensähnlichkeit ist historisch entstanden. Für dieses Buch gilt: Wenn von JavaScript die Rede ist, ist nicht Java gemeint.

JavaScript außerhalb des Browsers

JavaScript wurde zunächst vor allem für Webseiten entwickelt. Heute kann die Sprache aber auch außerhalb des Browsers eingesetzt werden.

Mit einer Laufzeitumgebung wie Node.js kann JavaScript zum Beispiel auf einem Server laufen. Damit lassen sich unter anderem:

  • Webserver erstellen,
  • Daten verarbeiten,
  • Dateien lesen und schreiben,
  • Programmierskripte ausführen.

Für den Einstieg konzentrierst du dich jedoch auf JavaScript im Browser. Das ist besonders praktisch, weil du nur einen Texteditor und einen Browser brauchst.

Was JavaScript nicht automatisch kann

JavaScript im Browser arbeitet aus Sicherheitsgründen nicht uneingeschränkt. Ein Skript auf einer Webseite darf zum Beispiel nicht einfach alle Dateien auf deinem Computer lesen oder verändern.

Der Browser schützt Besucherinnen und Besucher davor, dass Webseiten zu viel Zugriff erhalten. Wenn eine Webseite etwa auf Kamera, Mikrofon oder Standort zugreifen möchte, muss sie normalerweise zuerst um Erlaubnis fragen.

Das ist ein wichtiger Grundsatz:

JavaScript kann viel, aber der Browser setzt Sicherheitsgrenzen.

Ein erstes JavaScript-Beispiel

JavaScript besteht aus Anweisungen. Eine sehr einfache Anweisung sieht so aus:

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

Diese Zeile gibt den Text Hallo, JavaScript! in der Browser-Konsole aus. Die Konsole ist ein Bereich in den Entwicklerwerkzeugen des Browsers. Sie ist besonders nützlich, um Code zu testen und Fehler zu finden.

Die Bestandteile der Anweisung:

Bestandteil Bedeutung
console Ein Bereich des Browsers für Entwicklerausgaben
log Gibt eine Nachricht aus
"Hallo, JavaScript!" Der auszugebende Text
; Beendet die Anweisung; in JavaScript oft optional, aber erlaubt

Die Anführungszeichen zeigen: Hier handelt es sich um einen Text. Solche Textwerte werden später Strings genannt.

Warum JavaScript lernen?

JavaScript ist eine gute erste Programmiersprache für Webseiten, weil du Ergebnisse schnell sehen kannst. Du schreibst eine kleine Änderung, lädst die Seite neu und beobachtest direkt, was passiert.

Beim Lernen von JavaScript übst du außerdem allgemeine Programmierideen:

  • Informationen speichern,
  • Entscheidungen treffen,
  • Aufgaben wiederholen,
  • Code in Funktionen ordnen,
  • auf Ereignisse wie Klicks reagieren.

Diese Grundlagen helfen dir später auch bei anderen Programmiersprachen.

Zusammenfassung

  • JavaScript ist eine Programmiersprache für interaktive Webseiten.
  • HTML liefert die Struktur, CSS das Aussehen und JavaScript das Verhalten.
  • JavaScript wird häufig direkt im Browser ausgeführt.
  • JavaScript und Java sind verschiedene Programmiersprachen.
  • Mit console.log() kannst du erste Ausgaben erzeugen.
  • Der Browser begrenzt JavaScript aus Sicherheitsgründen.

Kleine Selbstkontrolle

  1. Welche Aufgabe übernimmt JavaScript auf einer Webseite?
  2. Worin unterscheiden sich HTML, CSS und JavaScript?
  3. Ist JavaScript dasselbe wie Java?
  4. Wo wird die Ausgabe von console.log() angezeigt?

Musterantworten

  1. JavaScript sorgt unter anderem dafür, dass eine Webseite auf Aktionen reagieren und Inhalte verändern kann.
  2. HTML strukturiert Inhalte, CSS gestaltet sie und JavaScript steuert Verhalten und Interaktion.
  3. Nein. JavaScript und Java sind unterschiedliche Programmiersprachen.
  4. Die Ausgabe erscheint in der Browser-Konsole.
Back to top