Einführung in JavaScript

Dieses Kapitel führt in JavaScript ein. Ziel ist es zu verstehen, warum JavaScript existiert, welches Problem es löst, wie es mit HTML und CSS zusammenspielt und wie du JavaScript sauber in ein Projekt einbindest. Am Ende kannst du ein minimales Setup erstellen, Debugging über die Konsole betreiben und weißt, wann dein Code ausgeführt wird.

1. Was ist JavaScript?

Definition.
JavaScript ist eine Programmiersprache, die in Webanwendungen verwendet wird, um Interaktivität und Logik in Webseiten zu bringen.

Während HTML die Struktur (Inhalt, Elemente) und CSS die Darstellung (Layout, Design) definiert, kümmert sich JavaScript um:

Trennung der Aufgaben:

2. Warum braucht man JavaScript?

JavaScript wird benötigt, wenn eine Webseite nicht nur statische Informationen anzeigen, sondern auf Benutzer reagieren und sich dynamisch verändern soll.

Ohne JavaScript sind Webseiten in vielen Fällen „stumm“: Inhalte werden angezeigt, aber es gibt keine echte Interaktion (außer reinen Links).

CSS kann Layout und Animationen steuern, aber keine Logik ausführen und keine Entscheidungen treffen. Für „Wenn … dann …“-Verhalten benötigt man JavaScript.

JavaScript ermöglicht:

3. Wo läuft JavaScript?

JavaScript kann in verschiedenen Umgebungen laufen: im Browser (Frontend) und außerhalb des Browsers (z. B. Node.js).

In diesem Kurs starten wir im Browser. Dort wird JavaScript durch eine Engine ausgeführt:

Browser-JavaScript läuft in einer Sicherheitsumgebung („Sandbox“). Es kann nicht einfach auf deine Dateien zugreifen oder Programme starten.

4. JavaScript und das DOM

Das DOM (Document Object Model) ist die interne Repräsentation einer HTML-Seite als Baumstruktur. JavaScript kann diesen Baum lesen und verändern.

Wichtig: JavaScript „ändert“ nicht die HTML-Datei auf der Festplatte, sondern die live geladene Seite im Browser.

Beispiel (konzeptionell): 
// Element suchen
const title = document.querySelector("h1");

// Inhalt ändern
title.textContent = "Hallo von JavaScript";
Später lernst du präzise Selektoren, Events und saubere DOM-Updates. Hier geht es um das Grundprinzip: JavaScript steuert Verhalten und Dynamik.

5. JavaScript einbinden: drei Methoden

Es gibt drei grundlegende Arten, JavaScript in ein HTML-Dokument einzubinden.

5.1 Inline-JavaScript (nicht empfohlen)

Inline-JS wirkt am Anfang praktisch, führt aber schnell zu unübersichtlichem Code und ist schlecht wartbar. 
<button onclick="alert('Hallo!')">Klick</button>

5.2 Internes JavaScript (für kleine Beispiele ok)

<script>
  console.log("Hallo aus dem Script-Tag");
</script>

5.3 Externes JavaScript (Standard)

Externes JavaScript wird als separate Datei gespeichert und per Script-Tag eingebunden: 
<script src="app.js"></script>
Externes JS ist in professionellen Projekten Standard: sauber, wiederverwendbar, leichter zu debuggen.

6. Der wichtigste Punkt: Wann wird JavaScript ausgeführt?

Der Browser lädt HTML von oben nach unten. Wenn ein Script ausgeführt wird, bevor ein Element existiert, kann JavaScript dieses Element nicht finden.

Typische Fehlermeldung: 

Cannot read properties of null (reading 'addEventListener')

Das passiert, wenn du z. B. auf einen Button zugreifen willst, der im HTML erst später kommt.

6.1 Lösung A: Script ans Ende des Bodys

<body>
  ...
  <script src="app.js"></script>
</body>

6.2 Lösung B: defer (empfohlen)

Mit defer wird das Script geladen, aber erst ausgeführt, nachdem das HTML komplett geparst wurde. 
<script defer src="app.js"></script>

6.3 Lösung C: DOMContentLoaded

document.addEventListener("DOMContentLoaded", () => {
  // DOM ist jetzt verfügbar
});
In vielen Projekten sieht man defer plus DOMContentLoaded. Meist reicht eines von beiden.

7. Minimalprojekt: Dein erstes funktionierendes Setup

Erstelle einen Ordner mit dieser Struktur: 

js01/
  index.html
  app.js

7.1 index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JS01 Test</title>

  <!-- defer: Script läuft erst nach dem HTML -->
  <script defer src="app.js"></script>
</head>

<body>
  <h1>Hallo JavaScript</h1>

  <button id="btn">Klick</button>
  <p id="msg">—</p>
</body>
</html>

7.2 app.js

document.addEventListener("DOMContentLoaded", () => {
  const btn = document.getElementById("btn");
  const msg = document.getElementById("msg");

  btn.addEventListener("click", () => {
    msg.textContent = "Button wurde geklickt ✅";
  });
});
Wenn das nicht funktioniert: Öffne DevTools → Console und prüfe, ob Fehler angezeigt werden.

8. Debugging: Die Entwicklerkonsole (Pflichtwerkzeug)

Die Console ist das wichtigste Debugging-Werkzeug in JavaScript. Du verwendest sie zum Testen, Analysieren und Finden von Fehlern.

Wichtige Methoden: 

console.log("Start");
console.warn("Warnung: Das ist nur ein Hinweis");
console.error("Fehler: Etwas ist schiefgelaufen");
Wenn „nichts passiert“: In 90% der Fälle ist die Console der Ort, an dem du den Grund findest.

9. Häufige Anfängerfehler (und wie man sie sofort erkennt)

Die meisten Probleme am Anfang entstehen nicht durch „schwierige Logik“, sondern durch Setup-Fehler.
Wenn du eine Fehlermeldung siehst: Lies sie vollständig. Sie sagt dir oft exakt, was falsch ist.

10. Übungen

Übung 1 — Console-Grundlagen.
Schreibe in app.js drei Ausgaben:
Übung 2 — Toggle-Text.
Beim Klick auf den Button soll der Text in <p id="msg"> zwischen „AN“ und „AUS“ wechseln. (Verwende eine Variable, die den Zustand speichert.)
Übung 3 — Debugging.
Ändere die Button-ID im HTML, aber nicht im JS. Beobachte die Fehlermeldung und erkläre:

11. Zusammenfassung

Wer JavaScript beherrscht, kontrolliert das Verhalten des Webs.