JavaScript: Die Programmiersprache des Webs

JavaScript: Die Programmiersprache des Webs

JavaScript ist eine der drei Grundsäulen moderner Webentwicklung - neben HTML und CSS. Die Skriptsprache wurde ursprünglich entwickelt, um Webseiten interaktiv zu machen. Heute ist sie aus keiner professionellen Website mehr wegzudenken. Ob Klickverhalten, Animationen oder dynamische Inhalte: Ohne JavaScript wären moderne Online-Erlebnisse nicht denkbar.

Was ist JavaScript?

JavaScript ist eine clientseitige Programmiersprache, die in nahezu jedem modernen Webbrowser ausgeführt werden kann. Sie wird direkt in HTML-Dokumente eingebunden und ermöglicht es, auf Nutzeraktionen zu reagieren, Inhalte zu verändern und Schnittstellen (APIs) zu nutzen.

Typische Anwendungsbereiche von JavaScript

• Interaktive Formulare mit Validierung
• Slider, Menüs oder Akkordeons
• Asynchrone Datenübertragung mit fetch() oder XMLHttpRequest
• Einbindung externer APIs (z.​B. Wetter, Karten, Social Media)
• Browser-Events wie Klick, Mausbewegung oder Tastatureingabe
• Responsives Verhalten in Kombination mit CSS-Klassen

Beispiel: Einfache Interaktion mit JavaScript

<button onclick="zeigeNachricht()">Klicke mich</button>

<script>
function zeigeNachricht() {
    alert("Hallo! Du hast auf den Button geklickt.");
}
</script>

JavaScript im Aufbau einer Website

JavaScript wird entweder inline (direkt im HTML), im <script>-Block im Dokument oder als separate Datei (z.​B. main.js) eingebunden. Gängige Praxis ist die Auslagerung von Skripten in externe Dateien, um Ladezeit und Wartbarkeit zu optimieren.

In 4 Schritten JavaScript effektiv einsetzen

Unterschied zu anderen Web-Sprachen

SEO-Hinweis: Wird JavaScript von Google gelesen?

Früher galt: Inhalte, die über JavaScript nachgeladen werden, sind für Suchmaschinen wie Google schwer lesbar. Heute ist Google deutlich besser darin geworden, auch JavaScript-basierten Content zu verstehen. Dennoch bleibt Vorsicht geboten:

• Inhalte, die asynchron per JavaScript geladen werden, sollten auch ohne JavaScript sichtbar sein - oder ein <noscript>-Fallback enthalten.
• Google rendert JavaScript mit einem separaten Crawlprozess ("Rendering Queue"). Das kann zu Verzögerungen bei der Indexierung führen.
• Vermeide komplexe Client-Only-Lösungen (z.​B. Single Page Applications) ohne serverseitige Rendering-Ergänzung.
• Nutze die Google Mobile Friendly Test oder die Rich-Result-Tools, um darstellungsbezogene Probleme zu entdecken.

Kurz gesagt: JavaScript ist SEO-technisch kein Tabu - aber eine Herausforderung. Halte wichtige Inhalte & Verlinkungen möglichst im HTML, um Sichtbarkeit und Indexierung zu sichern.

Beispiel: Sichtbarkeit mit JavaScript steuern

Mit JavaScript kannst du Elemente gezielt ein- und ausblenden. Klicke auf den Button, um einen Textblock sichtbar zu machen:

Wie kann ich das Beispiel in meine eigene Seite einbauen?

Du kannst dieses Beispiel ganz einfach in deine eigene HTML-Seite einfügen. Dazu kopierst du den kompletten Codeblock (bestehend aus <style>, <button>, dem <div>-Element sowie dem <script>-Teil) und fügst ihn an der gewünschten Stelle in dein HTML-Dokument ein - zum Beispiel im <body>-Bereich deiner Seite.

Achte darauf, dass:

• Der Button und der unsichtbare Bereich denselben id-Wert im JavaScript verwenden (in diesem Fall "versteckterText").
• Der <script>-Teil entweder am Ende deiner Seite oder mit dem Attribut defer eingebunden wird, damit der HTML-Inhalt vorher geladen ist.
• Du keine doppelten IDs im selben Dokument verwendest - sonst kann es zu Konflikten kommen.

Wenn du mehrere Elemente ein- oder ausblenden willst, kannst du einfach weitere <div>-Blöcke mit eigenen IDs anlegen und die JavaScript-Funktion entsprechend erweitern.