Kapitel 2: Entwicklungsumgebung einrichten

In diesem Kapitel richten wir Ihre Entwicklungsumgebung ein. Sie benötigen nur 5 Minuten!

2.1 Browser-Konsole: Das einfachste JS-Ausführungstool

Sie können JavaScript sofort in Ihrem Browser ausführen - ohne Installation!

Schritt 1: Öffnen Sie die Browser-Konsole

Browser	Tastenkombination
Chrome / Edge	`F12` oder `Strg + Umschalt + I`
Firefox	`F12` oder `Strg + Umschalt + K`
Safari	`Cmd + Option + I` (zuerst Entwickler-Menü aktivieren)

Schritt 2: Zum "Konsole"-Tab wechseln

Sie sehen etwas ähnliches wie:

Schritt 3: JavaScript-Code eingeben

Tippen Sie einfach:

javascript

alert('Hallo Welt!')

Drücken Sie Enter - ein Popup erscheint!

Nützliche Befehle zum Ausprobieren

javascript

// Einfache Berechnung
2 + 2

// Text ausgeben
"Hallo " + "Welt"

// Variable definieren
let name = "Max"
name

// Alle Variablen anzeigen
console.log("Das ist eine Nachricht")

Vorteile der Browser-Konsole:

✅ Keine Installation nötig
✅ Sofortige Ergebnisanzeige
✅ Fehlermeldungen werden angezeigt
✅ Perfekt zum Experimentieren

2.2 VS Code Installation + Grundkonfiguration

Für echte Projekte benötigen Sie einen Code-Editor. Visual Studio Code ist die beste Wahl.

Schritt 1: VS Code herunterladen und installieren

Gehen Sie zu code.visualstudio.com
Klicken Sie auf "Download for Windows" (oder Ihr Betriebssystem)
Führen Sie die Installation aus (Standardeinstellungen sind gut)

Schritt 2: VS Code auf Deutsch umstellen (optional)

Drücken Sie Strg + Umschalt + X (oder klicken Sie auf das Erweiterungs-Symbol links)
Suchen Sie nach "Chinese (Simplified) Language Pack"
Klicken Sie auf "Installieren"
Starten Sie VS Code neu

Schritt 3: Erweiterungen für JavaScript-Entwickler installieren

Öffnen Sie den Erweiterungsbereich (Strg + Umschalt + X) und installieren Sie diese:

Erweiterung	Zweck
Live Server	Startet einen lokalen Webserver mit Auto-Reload
Prettier	Formatiert Ihren Code automatisch
ESLint	Findet Fehler und schlechten Code
JavaScript (ES6) Code Snippets	Spart Tipparbeit
Bracket Pair Colorizer	Farbige Klammern für bessere Übersicht

Installation:

Suchen Sie nach dem Namen der Erweiterung
Klicken Sie auf "Installieren"
Warten Sie, bis die Installation abgeschlossen ist

Schritt 4: Einstellungen optimieren

Gehen Sie zu Datei → Einstellungen → Einstellungen (oder Strg + ,):

Empfohlene Einstellungen:

✅ "Editor: Format On Save" aktivieren (speichert und formatiert automatisch)
✅ "Editor: Word Wrap" auf "on" setzen (Zeilenumbruch)
✅ "Files: Auto Save" auf "afterDelay" setzen (automatisches Speichern)

2.3 Erstes HTML + JS Datei (Schritt für Schritt)

Lassen Sie uns Ihre erste JavaScript-Datei erstellen!

Schritt 1: Projektordner erstellen

Erstellen Sie einen Ordner auf Ihrem Computer, z.B. C:\js-tutorial
Öffnen Sie diesen Ordner in VS Code (Datei → Ordner öffnen)

Schritt 2: HTML-Datei erstellen

Klicken Sie auf "Neue Datei" und nennen Sie sie index.html:

html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine erste JS-Seite</title>
</head>
<body>
    <h1>Hallo JavaScript!</h1>
    <button id="meinButton">Klick mich!</button>

    <!-- JavaScript hier einfügen -->
    <script>
        // Ihr JavaScript-Code kommt hier hin
        console.log("Seite geladen!");
    </script>
</body>
</html>

Schritt 3: JavaScript in HTML einbinden (3 Methoden)

Methode 1: Internes Skript (wie oben)

html

<script>
    alert("Hallo!");
</script>

Methode 2: Externes Skript (empfohlen!)

html

<!-- Am Ende des <body> Tags -->
<script src="script.js"></script>

Erstellen Sie eine Datei script.js im selben Ordner:

javascript

console.log("Hallo aus der externen Datei!");

Methode 3: Inline-Skript (nicht empfohlen)

html

<button onclick="alert('Geklickt!')">Klick mich!</button>

Schritt 4: Seite im Browser öffnen

Option A: Manuell

Rechtsklick auf index.html → "Öffnen mit" → Browser wählen

Option B: Live Server (empfohlen)

Klicken Sie unten rechts in VS Code auf "Go Live"
Oder: Rechtsklick auf index.html → "Open with Live Server"
Die Seite öffnet sich automatisch und aktualisiert sich bei Änderungen!

2.4 Code ausführen und debuggen (F12 Entwicklertools nutzen)

Die Browser-Entwicklertools im Detail

Drücken Sie F12, um die Tools zu öffnen. Hier sind die wichtigsten Tabs:

1. Konsole (Console)

Zeigt JavaScript-Ausgaben und Fehler.

javascript

// In Ihrem JS-Code
console.log("Dies ist eine Nachricht");
console.error("Dies ist ein Fehler");
console.warn("Dies ist eine Warnung");

2. Elemente (Elements)

Zeigt den HTML- und CSS-Code der Seite.

Nützlich für:

Überprüfen, ob Elemente korrekt geladen wurden
CSS-Stile live ändern
Elemente auswählen und inspizieren

3. Quellen (Sources)

Zeigt alle geladenen Dateien und erlaubt Debugging.

Debugging-Schritte:

Klicken Sie auf eine JavaScript-Datei im linken Bereich
Klicken Sie auf eine Zeilennummer, um einen Breakpoint zu setzen
Laden Sie die Seite neu
Der Code hält am Breakpoint an - Sie können Variablen inspizieren!

4. Netzwerk (Network)

Zeigt alle Netzwerkanfragen (Bilder, Skripte, API-Aufrufe).

Häufige Fehler und deren Lösung

Fehler	Ursache	Lösung
`Uncaught ReferenceError: x is not defined`	Variable nicht definiert	Variable vorher definieren
`Uncaught SyntaxError: Unexpected token`	Syntaxfehler (z.B. fehlendes Semikolon)	Code auf Syntaxfehler prüfen
Datei lädt nicht	Falscher Pfad in `src=""`	Pfad überprüfen
Funktion wird nicht ausgeführt	Event-Listener falsch	Browser-Konsole prüfen

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ Die Browser-Konsole zu nutzen
✅ VS Code zu installieren und zu konfigurieren
✅ Ihre erste HTML + JS Datei zu erstellen
✅ JavaScript-Code in HTML einzubinden
✅ Die Entwicklertools zum Debuggen zu nutzen

➡️ Nächster Schritt

Im nächsten Kapitel schreiben wir unser erstes echtes JavaScript-Programm mit alert() und console.log()!

Übung:

Richten Sie Ihre Entwicklungsumgebung ein
Erstellen Sie eine HTML-Datei mit einem Button
Schreiben Sie JavaScript-Code, der beim Button-Klick eine Nachricht ausgibt
Öffnen Sie die Browser-Konsole und beobachten Sie die Ausgabe

Kapitel 2: Entwicklungsumgebung einrichten ​

2.1 Browser-Konsole: Das einfachste JS-Ausführungstool ​

Schritt 1: Öffnen Sie die Browser-Konsole ​

Schritt 2: Zum "Konsole"-Tab wechseln ​

Schritt 3: JavaScript-Code eingeben ​

Nützliche Befehle zum Ausprobieren ​

2.2 VS Code Installation + Grundkonfiguration ​

Schritt 1: VS Code herunterladen und installieren ​

Schritt 2: VS Code auf Deutsch umstellen (optional) ​

Schritt 3: Erweiterungen für JavaScript-Entwickler installieren ​

Schritt 4: Einstellungen optimieren ​

2.3 Erstes HTML + JS Datei (Schritt für Schritt) ​

Schritt 1: Projektordner erstellen ​

Schritt 2: HTML-Datei erstellen ​

Schritt 3: JavaScript in HTML einbinden (3 Methoden) ​

Schritt 4: Seite im Browser öffnen ​

2.4 Code ausführen und debuggen (F12 Entwicklertools nutzen) ​

Die Browser-Entwicklertools im Detail ​

1. Konsole (Console) ​

2. Elemente (Elements) ​

3. Quellen (Sources) ​

4. Netzwerk (Network) ​

Häufige Fehler und deren Lösung ​

📝 Zusammenfassung ​

➡️ Nächster Schritt ​

Kapitel 2: Entwicklungsumgebung einrichten

2.1 Browser-Konsole: Das einfachste JS-Ausführungstool

Schritt 1: Öffnen Sie die Browser-Konsole

Schritt 2: Zum "Konsole"-Tab wechseln

Schritt 3: JavaScript-Code eingeben

Nützliche Befehle zum Ausprobieren

2.2 VS Code Installation + Grundkonfiguration

Schritt 1: VS Code herunterladen und installieren

Schritt 2: VS Code auf Deutsch umstellen (optional)

Schritt 3: Erweiterungen für JavaScript-Entwickler installieren

Schritt 4: Einstellungen optimieren

2.3 Erstes HTML + JS Datei (Schritt für Schritt)

Schritt 1: Projektordner erstellen

Schritt 2: HTML-Datei erstellen

Schritt 3: JavaScript in HTML einbinden (3 Methoden)

Schritt 4: Seite im Browser öffnen

2.4 Code ausführen und debuggen (F12 Entwicklertools nutzen)

Die Browser-Entwicklertools im Detail

1. Konsole (Console)

2. Elemente (Elements)

3. Quellen (Sources)

4. Netzwerk (Network)

Häufige Fehler und deren Lösung

📝 Zusammenfassung

➡️ Nächster Schritt