🌐 Willkommen im Interaktiven Web!

Du kennst schon HTML (Skelett) und CSS (Kleidung). Deine Seiten sind hübsch, aber sie tun nichts. Sie sind "statisch".

Heute machen wir sie denkend!

                Unsere Reise heute:
                Verständnis: Was ist JavaScript eigentlich?
Mechanik: Wie kommuniziert JS mit HTML?
Interaktion: Wie reagieren wir auf Mausklicks?
Logik: Wie schaffen wir Zähler und Entscheidungen?

            

🏠 HTML

Statik

🎨 CSS

Design

🧠 JS

Intelligenz

1. Wie arbeitet JavaScript?

JavaScript ist eine Skriptsprache, die vom Browser interpretiert (zeilenweise gelesen und ausgeführt) wird.

Der Ablauf einer Interaktion

Laden: Der Browser lädt HTML und CSS. Die Seite wird aufgebaut.
Event (Ereignis): Der Nutzer drückt eine Taste oder klickt.
Ausführung: JavaScript "hört" das Ereignis und führt Befehle aus.
Änderung (DOM): JavaScript ändert das DOM (die Innenstruktur der Seite) im Arbeitsspeicher.
Update: Der Browser malt den veränderten Teil neu.

                💡 Wichtiges Konzept: Das DOM

                DOM steht für Document Object Model. Stell dir vor, der verwandelt dein HTML in einen Baum aus JavaScript-Objekten. JS kann an diesem Baum Äste (Elemente) bewegen oder umfärben.

2. Unser Werkzeug: Die Konsole

Programmierer machen ständig Fehler ("Bugs"). Wir brauchen ein Werkzeug, um zu verstehen, was im Hintergrund passiert.

🖥️ Konsole

Der Röntgenblick des Browsers.

🐛 Debugging

Fehler suchen und beheben.

Wie öffne ich sie?

F12 oder Rechtsklick → Untersuchen → Reiter Console.

Die Brücke zur Außenwelt

In JavaScript gibt es zwei Hauptbefehle, um Ergebnisse sichtbar zu machen:

User sehen

alert("Hallo User!");

Blockiert die Seite. Gut für erste Tests, nervig für echte Anwendungen.

Entwickler sehen

console.log("Geheim");

Unsichtbar für Nutzer. Schreibt in die "Geheimkonsole". Unverzichtbar!

2.5 JS Einbinden: Intern vs. Extern

Bevor wir den Skript-Code schreiben, müssen wir dem Browser zeigen, wo er steht. Es gibt zwei Hauptwege.

Methode A: Intern

Den Code direkt in der HTML-Datei schreiben. Gut für kleine Tests.

<body>
  <h1>Hallo</h1>

  <script>
    console.log("Bin bereit!");
  </script>
</body>

Vorteil: Alles in einer Datei.
Nachteil: Schnell unübersichtlich.

Methode B: Extern ✅

Code in einer eigenen Datei (z.B. script.js). Der Profi-Weg.

<!-- In der HTML -->
<body>
  <h1>Hallo</h1>
  
  <script src="script.js">
  </script>
</body>

Vorteil: Sauber, schnell, wiederverwendbar.
Wir nutzen dies für Projekte.

                💡 Platzierung: Wir setzen das <script>-Tag bei uns meist ganz unten (vor </body>). So ist der HTML-Baum komplett geladen, bevor unser JavaScript anfängt zu arbeiten!
            

3. Variablen & Datentypen

Ein Computer hat ein Gedächtnis. Variablen sind die Speicherplätze darin.

Das Konzept

let name = "Max"; (Schachtel namens "name", Inhalt "Max")

Beispiel: String vs. Number

Wir speichern Text und eine Zahl und geben sie auf der Seite aus.

<!DOCTYPE html>
<html>
<head>
    <title>Variablen Test</title>
</head>
<body>
    <h1 id="anzeige-text">...</h1>
    <p id="anzeige-zahl">...</p>

    <script>
        
        let meinName = "Lisa";
        let alter = 15;

        
        let textElem = document.getElementById("anzeige-text");
        let zahlElem = document.getElementById("anzeige-zahl");

        
        
        textElem.innerHTML = "Hallo, ich bin " + meinName;
        
        
        zahlElem.innerHTML = "Ich bin " + alter + " Jahre alt.";
    </script>
</body>
</html>

Ausgabe im Browser:

Hallo, ich bin Lisa

Ich bin 15 Jahre alt.

4. Das DOM greifen

Wir greifen Elemente über ihre ID (Ausweis). Jede ID darf nur einmal vergeben werden.

Beispiel: Text und Farbe ändern

Wir haben einen grauen Kasten, der beim Laden der Seite bunt wird.

<!DOCTYPE html>
<html>
<head>
    <title>DOM Test</title>
</head>
<body>
    <div id="meine-box">
        Ich bin ein normaler Kasten.
    </div>

    <script>
        
        let box = document.getElementById("meine-box");

        
        box.innerHTML = "Ich wurde per JS verändert!";

        
        box.style.color = "white";
        box.style.backgroundColor = "#e67e22"; // Orange
        box.style.padding = "20px";
    </script>
</body>
</html>

Ausgabe im Browser:

Ich wurde per JS verändert!

5. Events: Auf Klicks reagieren

Wir möchten nicht beim Laden, sondern beim Klicken etwas passieren lassen.

Beispiel: Der Alert-Button

<!DOCTYPE html>
<html>
<head>
    <title>Event Test</title>
</head>
<body>
    <h1>Klick mich an!</h1>
    
    <!-- Der Button, auf den wir klicken wollen -->
    <button id="knopf">Drück mich</button>

    <script>
        
        let knopf = document.getElementById("knopf");

        
        knopf.addEventListener("click", function() {
            
            alert("Danke für den Klick!");
        });
    </script>
</body>
</html>

Ausgabe im Browser (simuliert):

Klick mich an!

6. Logik & Zähler

Zähler sind klassische Anwendungen: Eine Variable merkt sich den Stand. Beim Klick erhöhen wir ihn um 1.

Beispiel: Klick-Zähler

<!DOCTYPE html>
<html>
<head>
    <title>Zähler Test</title>
</head>
<body>
    <h1>Zähler: <span id="anzeige">0</span></h1>
    <button id="hoch-zaehlen">+1</button>

    <script>
        
        let count = 0;

        
        let anzeige = document.getElementById("anzeige");
        let knopf = document.getElementById("hoch-zaehlen");

        
        knopf.addEventListener("click", function() {
            
            count = count + 1;

            
            anzeige.innerHTML = count; 
        });
    </script>
</body>
</html>

Ausgabe im Browser (funktionierend):

Zähler: 0

7. Schleifen (Loops)

Computer lieben Wiederholungen. Wenn wir etwas 5 Mal oder 100 Mal machen wollen, schreiben wir den Code nicht 5 Mal, sondern nutzen eine Schleife.

Die "For-Schleife"

Sie hat drei Teile: for (Startwert; Bedingung; Änderung).

Start: let i = 1; (Starte bei 1)
Bedingung: i <= 5; (Laufe weiter, solange i kleiner oder gleich 5 ist)
Änderung: i++ (Erhöhe i nach jedem Durchlauf um 1)

Beispiel: Einen Katalog erstellen

Wir nutzen die Schleife, um 5 Listeneinträge mit JS zu erzeugen.

<!DOCTYPE html>
<html>
<head>
    <title>Schleifen Test</title>
</head>
<body>
    <h2>Das ist meine Liste:</h2>
    <ul id="liste">
        <!-- Hier kommt JS rein -->
    </ul>

    <script>
        let listenElement = document.getElementById("liste");

        
        for(let i = 1; i <= 5; i++) {
            console.log("Durchlauf Nummer: " + i);
            
            
            listenElement.innerHTML += "<li>Punkt " + i + "</li>";
        }
    </script>
</body>
</html>

Ausgabe im Browser (automatisch erzeugt):

Das ist meine Liste:

Punkt 1
Punkt 2
Punkt 3
Punkt 4
Punkt 5

🚀 Jetzt bist du dran!

Wir setzen alles zusammen. Öffne sofort die Konsole (F12) und probiere es live aus!

Schritt 1: Konsolen-Test

Tippe alert("Test"); ein. Dann lösche die Meldung.

Schritt 2: Variable anlegen

Tippe let x = 10; und drücke Enter.

Tippe console.log(x);. Du siehst nun 10.

Tippe x = x * 2;. Tippe console.log(x);. Ergebnis?

Schritt 3: DOM auf dieser Seite

Diese Präsentation ist auch nur HTML. Wir können sie ändern!

Tippe folgendes in die Konsole:

document.body.style.backgroundColor = "lightgreen";

Was passiert? Ändere die Farbe auf "hotpink"!