Einleitung: Geschichte, Besonderheiten, Anwendungsbereiche – JavaScript

Was ist das und wozu dient es?

Stell dir vor, du bist der Regisseur deines eigenen Films und dein Computer ist das Filmstudio. HTML ist wie das Drehbuch und die Kulissen (Text, Bilder, Schaltflächen, Tabellen). CSS ist der Kostümbildner und Beleuchter (Farben, Schriftarten, schöne Anordnung). Und JavaScript sind die Schauspieler und Spezialeffekte! Genau JS bringt alles in Bewegung, reagiert auf Tastendrücke, rechnet, zeigt Pop-up-Fenster an, ändert Bilder und erstellt sogar Spiele.

Wenn eine Website ein Mensch wäre, dann:

• HTML — Skelett und Haut (Struktur).
• CSS — Kleidung und Make-up (Aussehen).
• JavaScript — Gehirn und Muskeln (Logik und Aktionen).

Ohne JavaScript wäre eine Website nur ein langweiliges Buch, das man nur lesen, aber nicht blättern, auf Links klicken, spielen oder Formulare ausfüllen kann. JS macht Webseiten "lebendig".

Wo wird JavaScript eingesetzt?

• Überall im Internet: VKontakte, YouTube, Browserspiele (z.B. Agar.io), Online-Rechner, Karten (Yandex.Maps), Code-Editoren (wie der, in dem du gerade diesen Artikel liest).
• Sogar auf Servern (mit Node.js) — zum Beispiel, um Nachrichten in Chats zu verarbeiten oder Daten zu speichern.
• In mobilen Apps (React Native) und auf dem Desktop (Electron — darauf basieren Discord und VS Code).

JavaScript ist die beliebteste Programmiersprache der Welt! Warum? Weil sie direkt in den Browser integriert ist. Du musst nichts installieren (im Gegensatz zu Python, das heruntergeladen werden muss). Öffne einen Texteditor, schreibe Code, speichere ihn als .html — und fertig! Du kannst ihn per Doppelklick ausführen.

Ein wichtiger Unterschied zu Python: In Python wird der Code eigenständig in der Konsole ausgeführt, während JavaScript immer an eine Webseite gebunden ist. JS kann keine eigenen grafischen Fenster erstellen (wie pygame), aber es kann das steuern, was bereits auf dem Bildschirm ist — Schaltflächen, Text, Bilder.

Codebeispiele mit Erklärung

Der einfachste Weg, loszulegen, ist, Code direkt im Browser zu schreiben. Drücke F12 (oder Rechtsklick → "Untersuchen") und gehe zum Tab "Console" (Konsole). Dort kannst du Befehle eingeben. Aber wir werden vollständige Seiten schreiben.

Erstelle auf deinem Computer eine Datei test.html, öffne sie mit einem Texteditor und füge den Code aus den Beispielen ein. Speichere sie dann und öffne sie im Browser.

Beispiel 1: Hallo, Welt! (das allererste Programm)

// Dies ist ein einzeiliger Kommentar. Er wird nicht ausgeführt.
/* Und das ist ein mehrzeiliger Kommentar.
   Er wird benötigt, um den Code zu erklären. */

// Der Befehl alert() zeigt ein Pop-up-Fenster mit einer Nachricht an.
alert("Hallo, Welt! JavaScript funktioniert!");

// Der Befehl console.log() gibt Text in der Entwicklerkonsole aus.
// Um das Ergebnis zu sehen, drücke F12 und öffne den Tab Console.
console.log("Dies ist eine Nachricht in der Konsole. Gut gemacht!");

// Der Befehl document.write() schreibt Text direkt auf die Seite.
document.write("<h1>Dies ist eine Überschrift, erstellt von JavaScript!</h1>");

Was wird passieren?

• Zuerst erscheint ein Fenster mit Text.
• Dann erscheint in der Konsole (F12) eine zweite Nachricht.
• Ganz am Ende erscheint eine große Überschrift auf der Seite.

In Python ist das erste Programm einfach print("Hallo"). In JS verwenden wir alert() oder console.log(). Der Unterschied besteht darin, dass JS im Browser lebt und daher Zugriff auf Fenster und die Seite selbst hat.

Beispiel 2: Variablen — Kisten für Daten

// Eine Variable ist wie eine Kiste mit einem Etikett.
// In Python schreibst du: name = "Vasya"
// In JS verwenden wir das Schlüsselwort let (moderne Methode).

let name = "Masha";           // Zeichenkette (Text)
let alter = 12;               // Zahl
let magPizza = true;          // Wahrheitswert (ja/nein)
let leereKiste = null;        // Leer (nichts)

// Geben wir alles in der Konsole aus:
console.log("Name:", name);
console.log("Alter:", alter);
console.log("Mag Pizza?", magPizza);

// Man kann Zeichenketten verketten (Konkatenation):
let begruessung = "Hallo, " + name + "! Du bist " + alter + " Jahre alt.";
console.log(begruessung);

// Oder man kann Template-Strings verwenden (wie f-Strings in Python, nur mit ${}):
let bessereBegruessung = `Hallo, ${name}! Du bist ${alter} Jahre alt.`;
console.log(bessereBegruessung);

// Ändern wir den Wert der Variable:
alter = 13;  // Masha hatte Geburtstag!
console.log("Jetzt ist das Alter:", alter);

Erklärung: Variablen werden benötigt, um Informationen zu speichern. let ist wie var in Python, nur dass man in JS unbedingt let (oder const für Konstanten) schreiben muss. Beachte das Semikolon ; am Ende jeder Zeile — in Python gibt es das nicht, in JS wird es gesetzt (obwohl es manchmal auch ohne funktioniert, aber es ist besser, es immer zu setzen).

Template-Strings (mit Backticks `` ` ``) sind sehr praktisch — man fügt Variablen direkt in den Text ein mit ${}.

Beispiel 3: Die bedingte Anweisung if (wie im Leben: "Wenn... dann...")

let benutzerAlter = 15;

// Wenn das Alter größer oder gleich 18 ist:
if (benutzerAlter >= 18) {
    console.log("Du bist erwachsen! Du darfst Horrorfilme sehen.");
} else if (benutzerAlter >= 12) {
    console.log("Du bist ein Teenager! Du darfst die meisten Spiele spielen.");
} else {
    console.log("Du bist ein Kind. Lies lieber ein Buch.");
}

// Noch ein Beispiel: Prüfung auf gerade Zahl
let zahl = 7;
if (zahl % 2 === 0) {  // % ist der Rest einer Division
    console.log("Die Zahl ist gerade.");
} else {
    console.log("Die Zahl ist ungerade.");
}

// Beachte: In JS wird für den Vergleich === (drei Gleichheitszeichen) verwendet,
// nicht == (zwei Gleichheitszeichen). Zwei Gleichheitszeichen bedeuten einen
// "nicht-strengen" Vergleich, der seltsame Ergebnisse liefern kann (z.B. 5 == "5"
// ist wahr, obwohl Zahl und Zeichenkette unterschiedliche Typen sind).
// Verwende immer ===.

Ü