Lädt...

JavaScript-Einführung

HTML gibt der Seite ein Gerüst, CSS ein Aussehen. Ein fertiges Schaufenster bleibt still, bis etwas passiert: ein Klick, ein eingegebener Wert, eine Meldung nach dem Laden. JavaScript ist die Sprache, die das im Browser erledigt.

Was ist JavaScript?

JavaScript ist eine Programmiersprache. Sie schreiben Anweisungen, die der Browser nacheinander ausführt. Das ist keine Auszeichnungssprache (das ist HTML) und kein Stylesheet (das ist CSS). Im Web geht es alltäglich um Verhalten: Text ändern, auf Nutzer reagieren, einen Wert berechnen und später in diesem Kurs Daten laden.

Eine Programmiersprache, kein Dokument

HTML-Tags benennen Inhaltsstücke. CSS-Regeln beschreiben, wie sie aussehen. JavaScript-Anweisungen sagen dem Rechner, etwas zu tun: eine Meldung schreiben, einen Knoten auf der Seite ändern oder zwei Zahlen addieren. HTML reicht, um ein Skript an die Seite zu hängen. Dieser Kurs lehrt die Sprache in diesem Skript.

📊 Statische Seite vs. Seite mit JavaScript

Situation Ohne JavaScript Mit einem kurzen Skript
Die Seite wurde gerade geladen Die Überschrift bleibt genau wie in HTML Ein Skript kann sie nach dem Laden umschreiben
Ein Besucher klickt einen Button Der Button reagiert allein nicht sinnvoll Später: Code läuft beim Klick
Sie brauchen eine Summe oder Prüfung HTML rechnet nicht; CSS entscheidet nicht JavaScript rechnet und zeigt das Ergebnis

Halten Sie die drei Schichten getrennt. Struktur bleibt HTML. Aussehen bleibt CSS. Dieser Kurs ist die dritte Schicht: was die Seite tut.

Erster Blick auf eine Anweisung

Eine Anweisung ist ein Befehl. Das Beispiel schreibt eine Zeile in die Entwicklerkonsole — ein Werkzeug für Programmierer, nicht die sichtbare Seite. Sie werden die Konsole oft nutzen.

Eine erste Anweisung

javascript 
console.log("Hello, JavaScript");

Was diese Anweisung macht

  • console.log ist eine eingebaute Funktion und schreibt in die Konsole
  • Der Text in Anführungszeichen ist ein String — also Textdaten
  • Das Semikolon beendet die Anweisung (in diesem Kurs eine sichere Gewohnheit)
  • Auf der Seite ändert sich noch nichts; das ist nur ein Log
    Öffnen Sie die Entwicklertools (oft F12) und schauen Sie nach dem Skript in den Tab Console.

JavaScript auf einer Seite sehen

Damit Besucher etwas anderes sehen, spricht das Skript mit der Seite. Unten startet ein HTML-Absatz mit einem Satz. Ein eingebettetes <script> findet den Absatz per id und ersetzt den Text. Wo Skripte genau stehen, kommt in der nächsten Sitzung; hier reicht eine Datei.

HTML mit eingebettetem Skript

html 
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo</title>
</head>
<body>
<h1>Welcome</h1>
<p id="msg">This line is from HTML only.</p>
<script>
document.getElementById("msg").textContent =
"JavaScript rewrote this sentence.";
</script>
</body>
</html>

Was sich geändert hat

Ohne Skript bleibt der Originalabsatz. Mit Skript liest der Browser zuerst HTML, führt dann die Anweisungen aus und zeigt den neuen Satz. Dasselbe Gerüst — anderes Verhalten nach dem Laden.

JavaScript kann auch rechnen

Als Programmiersprache arbeitet JavaScript mit Zahlen und Namen, nicht nur mit Tags. Dieses Mini-Beispiel hat nichts mit Farbe oder Überschriften zu tun. Es berechnet eine Summe und protokolliert sie. Variablen und Typen kommen später; hier reicht: Code kann rechnen.

Eine kleine Rechnung

javascript 
const price = 120000;
const taxRate = 0.09;
console.log(price + price * taxRate);

Was dieser Kurs ist (und nicht ist)

Wir bleiben im Browser: Sprachgrundlagen, DOM, Events, Formulare und fetch. Kein Einstieg über ein Framework, Node.js oder TypeScript. Ohne diese Werkzeuge schreiben Sie trotzdem nützliche Seitenskripte. Optionale Sitzungen sind Extra, nicht Pflicht für den Kernweg.

Selbst ausprobieren

  1. Legen Sie eine Datei intro.html an.
  2. Fügen Sie das HTML-mit-Skript-Beispiel ein, speichern Sie und öffnen Sie die Datei im Browser.
  3. Der Absatz soll den umgeschriebenen Satz zeigen, nicht den ursprünglichen HTML-Text.
  4. Ändern Sie den String in textContent in einen eigenen Satz, speichern Sie und aktualisieren Sie.
  5. Optional: Fügen Sie console.log("Hello, JavaScript"); im selben <script> ein, speichern, aktualisieren und finden Sie die Zeile im Tab Console.

Typische Fehler

  • JavaScript als zweite Schreibweise für Überschriften und Absätze behandeln — Struktur in HTML lassen; JS nur bei Bedarf ändern oder ergänzen
  • Von CSS Klicklogik oder Berechnungen erwarten — CSS gestaltet; es führt keine Programlogik aus
  • Den einzigen Wortlaut wichtigen Texts nur im Skript ablegen, sodass die Seite ohne JS leer bleibt
  • Konsole und sichtbare Seite verwechseln: console.log ersetzt keine Überschrift auf dem Bildschirm

Zusammenfassung

  • JavaScript ist eine Programmiersprache, die Webseiten im Browser Verhalten gibt
  • HTML strukturiert Inhalt; CSS steuert das Aussehen; JavaScript entscheidet, was die Seite tut
  • Eine Anweisung ist ein Befehl, etwa console.log("Hello, JavaScript");
  • Ein eingebettetes Skript kann ein Element finden und nach dem Laden textContent ändern
  • JavaScript berechnet Werte, es berührt nicht nur Markup
  • Der Kurs bleibt im Browser und braucht kein Framework
  • Üben Sie, indem Sie ein kleines Skript ändern und den Browser aktualisieren

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
7
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 3
Javascript Tutorial