🧩 Arbeitsblatt: JavaScript Grundlagen

Name: ____________________ Datum: ____________________

1. JS Einbinden: Intern oder Extern?

Bevor wir coden, müssen wir dem Browser sagen, wo unser Code steht.

Intern: Code direkt in HTML (<script>...</script>). Gut für kleine Tests.
Extern: Code in eigener Datei (script.js) und Verknüpfung via src. Der Profi-Weg für große Projekte.

🚀 Aufgabe 0: Setup

Öffne deine uebung.html in VS Code.

Ordne deinen Code sauber. Du kannst das Script direkt in die HTML-Datei (ganz unten im Body) schreiben.

<body>
    <h1>Meine JS-Seite</h1>
    
    <script>
        
    </script>
</body>

2. Variablen & Datentypen

Ein Computer hat ein Gedächtnis. Variablen sind die Speicherplätze. In JS nutzen wir meist let oder const.

Wichtige Typen: String (Text in Anführungszeichen) und Number (Zahlen ohne Anführungszeichen).

Ausgabe-Tippe alert() für Popups oder console.log() für die Konsole (F12).

🚀 Aufgabe 1: Speichern & Ausgeben

Schreibe in den Script-Bereich:

let meinName = "Alex";
console.log(meinName);

Öffne die Seite im Browser, drücke F12 und öffne den Reiter "Console". Was siehst du?

🚀 Aufgabe 2: Rechnen & Texte verbinden

Erstelle folgende Variablen:

let num1 = 10;
let num2 = 5;
let summe = num1 + num2;

Gib die summe per alert() aus.

Versuche jetzt, einen TextSatz zu bauen:

let begruessung = "Hallo " + meinName + "!";

Gib begruessung in ein Element mit id="status" auf deiner Seite aus.

3. HTML-Elemente ändern (DOM)

Um HTML-Teile zu verändern, finden wir sie über ihre ID.

HTML: <h1 id="headline">Alles</h1>

JS: document.getElementById("headline").innerHTML = "Neu";

🚀 Aufgabe 3: Farbwechsel

Gib deiner Seite (dem Body) eine ID, z.B. <body id="seite">.
Schreibe JS, das beim Laden die Hintergrundfarbe der Seite auf "lightblue" stellt.
Tipp: Nutze document.getElementById("seite").style.backgroundColor = ....

4. Auf Events reagieren

Bisher lief alles automatisch. jetzt reagieren wir auf Klicks.

HTML: <button id="knopf">Drück mich</button>

JS Event Listener:

let knopf = document.getElementById("knopf");
knopf.addEventListener("click", function() {
    alert("Klick erkannt!");
});

🚀 Aufgabe 4: Der Style-Changer

Erstelle den Button aus dem Beispiel oben.

Schreibe JS, das beim Klick nicht mehr den Text (alert) anzeigt, sondern:

die Farbe der Überschrift (h1) rot macht.
Plus: Ändere die Schriftgröße auf 50px.

5. Logik: Zähler & If/Else

Mit Zählern können wir Dinge zählen. Mit if/else können wir entscheiden.

🚀 Aufgabe 5: Der Klick-Zähler

Baue einen Zähler, der bei jedem Klick auf den Button hochzählt:

Lege eine Variable let count = 0; an (außerhalb des Events!).
Im Event (Function) zähle hoch: count = count + 1;.
Gib den Stand in einem Element <span id="anzeige">0</span> aus.

🚀 Aufgabe 6: Die Nacktarsch-Show

Erweitere den Zähler aus Aufgabe 5. Füge eine if-Abfrage im Event ein:

WENN der Zähler exakt bei 5 ist:
Zeige ein alert("Halt! Du hast genau 5 Mal geklickt!") an.
SONST mach nichts weiter mit dem Alert.
Tipp: Verwende if (count === 5). Beachte die drei Gleichheitszeichen!

6. Schleifen (Loops)

Schleifen wiederholen Code automatisch, damit wir ihn nicht x-Mal schreiben müssen.

Syntax: for (let i = 1; i <= 5; i++) { ... } (Starte bei 1, solange i <=5, hebe i um 1 an).

🚀 Aufgabe 7: Die Sommer-Liste

Erstelle eine leere Liste in HTML: <ul id="liste"></ul>.

Schreibe JS, das mit einer Schleife genau 3 Listeneinträge erstellt:

"Punkt 1" (<li>Punkt 1</li>)
"Punkt 2"
"Punkt 3"

Tipp: Nutze document.getElementById("liste").innerHTML += ... um Elemente an die Liste anzuhängen. Denke daran, den Zahlenwert der Variable i an das Wort "Punkt " zu hängen.

🌟 Profi-Challenge

Versuche, alles in einer externen Datei script.js zu speichern, die du über die HTML-Datei einbindest.

Erstelle ein kleines "Spiel":

Der Spieler hat 3 Versuche.
Bei jedem Klick wird eine Variable erhöht.
Wenn der Spieler 3 Mal geklickt hat, verändert sich die Hintergrundfarbe der Seite in Grün (Gewonnen) und das Spiel ist vorbei.