Was ist JavaScript und dein erstes Skript

Lerne die dritte Websprache kennen und schreibe dein erstes Skript, das mit der Browser-Konsole spricht.

Die drei Sprachen des Webs

Aus Level 1 kennst du schon zwei Sprachen:

HTML – das Gerüst der Seite (was drauf ist),
CSS – das Aussehen (wie es aussieht).

Die dritte und letzte Sprache ist JavaScript – Verhalten (was passiert, wenn…). Wenn du bei YouTube auf ▶ klickst und das Video startet, wenn ein Online-Shop einen Preis berechnet, wenn ein Spiel den Punktestand zählt – das ist alles JavaScript.

Wo JavaScript lebt

JavaScript lebt in einer eigenen Datei, genau wie CSS. Du sagst der Seite mit einem <script>-Tag Bescheid – setz ihn ganz ans Ende von <body>, direkt vor </body>:

  ...page content...

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

💡

Warum am Ende? Der Browser liest die Seite von oben nach unten. Wenn das Skript am Ende steht, existiert die ganze Seite schon, und das Skript kann sofort damit arbeiten.

Zeig mir das: dein erstes Skript

Erstelle im Ordner my-web eine Datei namens script.js und schreib hinein:
```
console.log("Hi, this is your website!");
```
Füge in index.html die Zeile <script src="script.js"></script> direkt vor </body> ein und speichere beide Dateien.
Öffne die Seite in deinem Browser und drücke F12 (auf dem Mac Cmd+Alt+I). Ein Entwickler-Panel öffnet sich – klick auf den Tab Console.

Siehst du „Hi, this is your website!”? Dein erstes JavaScript läuft! 🎉

Die Konsole ist ein geheimer Raum im Browser, in dem Programmierer mit der Seite chatten. Besucher sehen sie nie – die ist nur für dich. console.log(...) bedeutet „gib das in der Konsole aus.” Du wirst es ständig benutzen: Es ist der beste Weg herauszufinden, was in deinem Skript passiert.

Die Konsole kann auch rechnen

Probier, das direkt in der Konsole einzutippen (drücke nach jeder Zeile Enter):

5 + 3
"Jake" + " is " + "awesome"
10 * 365

JavaScript ist auch ein Taschenrechner – es addiert Zahlen und klebt Texte (sie heißen Strings, du erkennst sie an den Anführungszeichen) aneinander.

Jetzt du 💪

Füge script.js auf jeder Seite deiner Website hinzu (genau wie du damals style.css hinzugefügt hast).
Lass das Skript den Namen deiner Website in der Konsole ausgeben und berechnen, wie viele Stunden noch bis zu den Sommerferien sind – zum Beispiel console.log("Hours left until vacation:", 48 * 24);.
Mach absichtlich einen Fehler – lösch ein Anführungszeichen und speichere. Schau dir an, wie der Fehler in der Konsole aussieht (roter Text mit einer Zeilennummer). Dann reparier ihn. Das ist eine wichtige Gewohnheit: Die Konsole sagt dir immer, wo das Problem ist.

✅

Kontrolliere dich selbst: Wenn du eine beliebige Seite deiner Website öffnest, erscheint deine Nachricht in der Konsole. Du weißt, wie man die Konsole öffnet und wie ein Fehler aussieht. Das ist das ganze Fundament – ab der nächsten Lektion fangen wir an, auf der Seite Magie zu wirken.

Das nimmst du aus dieser Lektion mit

JavaScript = die dritte Websprache: Verhalten. Es wird in einer script.js-Datei geschrieben und mit einem <script src="...">-Tag vor </body> eingebunden.
Die Konsole (F12) ist dein Fenster ins Skript: console.log() gibt Dinge aus, Fehler erscheinen rot mit einer Zeilennummer.
Text in Anführungszeichen ist ein String, und Strings kann man mit + zusammenkleben. Mit Zahlen kann man rechnen.