Wo sollte ich das script-Tag platzieren?

Oft am Ende des , damit das HTML vollständig geladen ist, bevor das Skript darauf zugreift. Alternativ nutzt du im die Attribute async oder defer , um das Laden der Seite nicht zu blockieren.

JavaScript-Grundlagen: Die Sprache des interaktiven Webs

Q: Was ist der Unterschied zwischen let und const?

Mit let deklarierte Variablen können ihren Wert ändern. Mit const deklarierte Konstanten behalten ihren einmal zugewiesenen Wert. Für Werte, die sich nicht ändern sollen, ist const die richtige Wahl.

JavaScript bringt Interaktivität und Dynamik ins Web. Hier lernst du die Einbindung, die zentralen Sprachkonzepte und die Interaktion mit dem DOM kennen.

Intermediate5 min readLast updated: July 13, 2026

What you will learn

Was JavaScript ist und wofür es im Web eingesetzt wird
Wie du JavaScript in eine Webseite einbindest
Welche grundlegenden Konzepte (Variablen, Funktionen, Ereignisse) es gibt
Wie JavaScript über das DOM mit HTML interagiert
Wo JavaScript jenseits des Browsers zum Einsatz kommt

Was ist JavaScript?

JavaScript ist neben HTML und CSS eine der grundlegenden Web-Technologien. HTML liefert die Struktur, CSS das Aussehen – und JavaScript bringt Interaktivität und dynamische Inhalte. Von Animationen über komplexe Webanwendungen bis zur serverseitigen Programmierung ist die Sprache extrem vielseitig.

JavaScript ist eine dynamische, interpretierte Programmiersprache. „Interpretiert" heißt: Der Code wird Zeile für Zeile direkt in der Ausführungsumgebung – meist dem Browser – ausgeführt, ohne vorherigen Kompilierungsschritt. Ursprünglich sollte JavaScript Webseiten im Browser „lebendig" machen. Seine Kernaufgaben im Web:

Zugriff: auf HTML-Elemente einer Seite zugreifen und sie referenzieren.
Manipulation: Elemente, ihre Inhalte oder Eigenschaften verändern.
Reaktion: auf Ereignisse wie Klicks, Tastatureingaben oder Mausbewegungen reagieren.
Kommunikation: Daten mit Servern austauschen, ohne die Seite neu zu laden (AJAX).

JavaScript in Webseiten einbinden

Es gibt zwei Hauptwege, JavaScript einzubinden. Internes JavaScript steht direkt im HTML innerhalb von <script>-Tags:

Externes JavaScript liegt in einer separaten .js-Datei und wird über das src-Attribut verlinkt – für größere Projekte die bevorzugte Wahl:

Die Platzierung beeinflusst Ladezeit und Verhalten. Oft stehen Skripte am Ende des <body>, damit das HTML vollständig geladen ist, bevor das Skript darauf zugreift. Alternativ nutzt du im <head> die Attribute async oder defer, um das Laden des HTML nicht zu blockieren.

Grundlegende Konzepte

Variablen

Variablen speichern Datenwerte. Sie werden mit let oder const deklariert: const für Konstanten, deren Wert unveränderlich ist, let für veränderbare Werte.

Datentypen und Operatoren

JavaScript kennt unter anderem Strings (Zeichenketten), Numbers (Zahlen), Booleans (true/false), Objects, Arrays (geordnete Listen) sowie null und undefined. Operatoren verarbeiten diese Werte: arithmetische (+, -, *, /), Zuweisungen (=, +=), Vergleiche (=== strikt gleich, !==, <, >) und logische (&&, ||, !).

Bedingungen und Funktionen

Mit if...else führst du Code abhängig von einer Bedingung aus. Funktionen sind wiederverwendbare Codeblöcke, die du einmal definierst und beliebig oft aufrufst:

Ereignisse

Ereignisse sind Aktionen im Browser – ein Klick, das Laden einer Seite, eine Tastatureingabe. JavaScript kann darauf „lauschen" und reagieren, meist über addEventListener().

Interaktion mit dem DOM

Das Document Object Model (DOM) ist eine Programmierschnittstelle für HTML-Dokumente. Es stellt die Seite als Baum von Objekten dar, wobei jedes Objekt einen Teil des Dokuments repräsentiert. JavaScript nutzt das DOM, um auf Elemente zuzugreifen und sie zu verändern.

Zum Auswählen eines Elements dient häufig document.querySelector(). Es gibt das erste Element zurück, das zum angegebenen CSS-Selektor passt:

Ist ein Element ausgewählt, änderst du seine Eigenschaften: textContent ändert den Textinhalt, setAttribute() setzt ein Attribut, getAttribute() liest es aus. Ein kleines Beispiel, das die Überschrift dynamisch ändert:

Kombiniert mit einem Event-Listener wird die Seite interaktiv – etwa ein Bild, das beim Klick wechselt:

JavaScript greift über das DOM auf einzelne HTML-Elemente zu und verändert sie dynamisch.

JavaScript jenseits des Browsers

Obwohl JavaScript im Browser entstand, reicht sein Einsatz heute weit darüber hinaus. Dank Umgebungen wie Node.js läuft JavaScript auch serverseitig – zum Erstellen von Webservern, Kommandozeilen-Tools oder für den Zugriff auf Dateisysteme. Damit ist JavaScript zu einer Full-Stack-Technologie geworden. Für die Entwicklung helfen die Browser-Entwicklertools (besonders die Konsole für Fehler und console.log()-Ausgaben), zahlreiche Web-APIs wie die DOM- oder Web-Storage-API sowie Frameworks und Bibliotheken wie React, Vue.js oder Angular, die komplexe Anwendungen vereinfachen.

JavaScript und SEO

Weil viele moderne Seiten Inhalte per JavaScript nachladen, ist das Zusammenspiel mit Suchmaschinen ein eigenes Thema. Damit Google JavaScript-generierte Inhalte erfassen kann, muss die Seite renderbar und crawlbar sein. Wie das im Detail funktioniert und worauf du achten musst, behandelt der eigenständige Artikel JavaScript SEO. Dieser Artikel legt dafür die sprachlichen Grundlagen.

Fazit

JavaScript ist das Rückgrat für interaktive und dynamische Webseiten. Vom Ändern von Textinhalten über die Reaktion auf Nutzeraktionen bis zur Kommunikation mit Servern reichen die Möglichkeiten. Mit den Grundlagen – Variablen, Funktionen, Ereignissen und der Interaktion mit dem DOM – lassen sich bereits eindrucksvolle Effekte umsetzen. Wer tiefer einsteigen will, erweitert das Wissen mit asynchroner Programmierung, einem Framework oder serverseitigem JavaScript über Node.js.

FAQ

Häufige Fragen

Nein. Dieser Artikel behandelt die Programmiersprache JavaScript und ihre Grundlagen. „JavaScript SEO" beschäftigt sich damit, wie Suchmaschinen JavaScript-generierte Inhalte crawlen und rendern – ein eigenes Themenfeld, das auf diesen Grundlagen aufbaut.

Mit let deklarierte Variablen können ihren Wert ändern. Mit const deklarierte Konstanten behalten ihren einmal zugewiesenen Wert. Für Werte, die sich nicht ändern sollen, ist const die richtige Wahl.

Das Document Object Model ist eine Schnittstelle, die ein HTML-Dokument als Baum von Objekten darstellt. JavaScript nutzt das DOM, um auf Elemente zuzugreifen und sie zu verändern – etwa mit document.querySelector().

Oft am Ende des <body>, damit das HTML vollständig geladen ist, bevor das Skript darauf zugreift. Alternativ nutzt du im <head> die Attribute async oder defer, um das Laden der Seite nicht zu blockieren.

Quiz

Teste dein Wissen

Fünf Fragen zu den JavaScript-Grundlagen.

Question 1 of 5

Welche Rolle übernimmt JavaScript im Web?