Kapitel 22: Werkzeuge (Empfehlungen)

In diesem Kapitel lernen Sie die wichtigsten Werkzeuge für JavaScript-Entwickler.

22.1 Editor: VS Code

Visual Studio Code ist der ** Standard-Editor** für JavaScript-Entwicklung.

Warum VS Code?

Vorteil	Erklärung
✅ Kostenlos	Open Source, komplett kostenlos
✅ IntelliSense	Autovervollständigung für JavaScript
✅ Erweiterungen	Tausende kostenlose Extensions
✅ Integriertes Terminal	Kein Wechsel zwischen Fenstern
✅ Git-Integration	Versionskontrolle direkt im Editor
✅ Debugger	Breakpoints setzen, Variablen inspizieren

Download & Installation

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

Empfohlene Erweiterungen (Extensions)

Erweiterung	Zweck	Installation
Live Server	Startet einen lokalen Webserver mit Auto-Reload	Strg+Umschalt+X → "Live Server" suchen
Prettier	Formatiert Ihren Code automatisch	Strg+Umschalt+X → "Prettier" suchen
ESLint	Findet Fehler und schlechten Code	Strg+Umschalt+X → "ESLint" suchen
JavaScript (ES6) Code Snippets	Spart Tipparbeit	Strg+Umschalt+X → "JavaScript (ES6)" suchen
Bracket Pair Colorizer	Farbige Klammern für bessere Übersicht	Strg+Umschalt+X → "Bracket Pair" suchen
GitLens	Verbessert Git-Integration	Strg+Umschalt+X → "GitLens" suchen

Einstellungen optimieren

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

Empfohlene Einstellungen:

{
    "editor.formatOnSave": true,          // Speichert und formtiert automatisch
    "editor.wordWrap": "on",             // Zeilenumbrush
    "files.autoSave": "afterDelay",      // Automatisches Speichern
    "editor.tabSize": 2,                 // 2 Leerzeichen für Einrückung
    "editor.insertSpaces": true,         // Leerzeichen statt Tabs
    "javascript.suggest.autoImports": true // Automatische Importe
}

22.2 Online-Ausführungs-Tools: CodePen / JSBin

Wenn Sie kein Editor installieren wollen oder Code schnell testen wollen:

1. CodePen

URL: codepen.io

Vorteile:

• ✅ Keine Installation nötig
• ✅ Code in Echtzeit ausführen
• ✅ Projekte teilen (Andere können Ihren Code sehen)
• ✅ Bibliotheken (jQuery, React, etc.) mit einem Klick hinzufügen

Verwendung:

1. Gehen Sie zu codepen.io
2. Klicken Sie auf "Create" → "Pen"
3. Schreiben Sie HTML, CSS, JavaScript in die entsprechenden Bereiche
4. Code wird automatisch ausgeführt!

Beispiel:

<!-- HTML -->
<button id="btn">Klick mich!</button>
<p id="ausgabe"></p>

<!-- JavaScript (in JS-Bereich) -->
document.getElementById("btn").addEventListener("click", function() {
    document.getElementById("ausgabe").textContent = "Geklickt!";
});

2. JSBin

URL: jsbin.com

Vorteile:

• ✅ Einfacher als CodePen
• ✅ Konsolen-Ausgabe direkt sichtbar
• ✅ Gut für schnelles Debugging

Verwendung:

1. Gehen Sie zu jsbin.com
2. Schreiben Sie Code in die Bereiche (HTML, CSS, JavaScript)
3. Konsolen-Ausgabe wird unten angezeigt

3. Weitere Online-Tools

Tool	URL	Besonderheit
JSFiddle	jsfiddle.net	Ähnlich wie CodePen
CodeSandbox	codesandbox.io	Für komplexe Projekte (React, Vue, etc.)
StackBlitz	stackblitz.com	Ähnlich wie CodeSandbox

22.3 Lern-Dokumentation: MDN Web Docs (Offiziell & Autoritativ)

MDN Web Docs ist die wichtigste Ressource für Webentwickler.

Warum MDN?

Vorteil	Erklärung
✅ Offiziell	Von Mozilla (Firefox-Entwickler) gepflegt
✅ Vollständig	Alle JavaScript-Methoden dokumentiert
✅ Beispiele	Jede Methode hat Code-Beispiele
✅ Browser-Kompatibilität	Zeigt, welche Browser die Methode unterstützen
✅ Auf Deutsch	Viele Artikel auf Deutsch verfügbar

Wichtige MDN-Bereiche

1. JavaScript-Referenz

URL: developer.mozilla.org/de/docs/Web/JavaScript

Enthält:

• ✅ Alle JavaScript-Objekte (Array, String, Object, etc.)
• ✅ Alle Methoden (push(), slice(), addEventListener(), etc.)
• ✅ Alle Eigenschaften (length, innerHTML, etc.)

2. DOM-Referenz

URL: developer.mozilla.org/de/docs/Web/API/Document_Object_Model

Enthält:

• ✅ DOM-Methoden (getElementById(), querySelector(), etc.)
• ✅ DOM-Ereignisse (click, mouseover, etc.)

3. CSS-Referenz

URL: developer.mozilla.org/de/docs/Web/CSS

Wie man MDN effektiv nutzt

Beispiel: Array.push() Methode nachschlagen

1. Google-Suche: "Array.push() mdn" (immer "mdn" hinzufügen!)
2. Erstes Ergebnis: MDN-Artikel
3. Lesen: Beschreibung, Syntax, Beispiele, Browser-Kompatibilität

Direkt-URL (Beispiel):

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/push

MDN vs. W3Schools

Kriterium	MDN (Empfohlen!)	W3Schools (Vermeiden!)
Qualität	⭐⭐⭐⭐⭐ (Exzellent)	⭐⭐ (Mangelhaft)
Aktualität	Immer aktuell	Oft veraltet
Genauigkeit	100% korrekt	Enthält Fehler
Beispiele	Praxisnah	Oft unpraktisch
Autorität	Offiziell (Mozilla)	Private Website

Empfehlung:

• ✅ Immer MDN verwenden!
• ❌ W3Schools vermeiden! (Viele Fehler, veraltete Informationen)

22.4 Weitere nützliche Werkzeuge

1. Browser-Entwicklertools (Unverzichtbar!)

Jeder moderne Browser hat integrierte Entwicklertools:

Browser	Tastenkombination	Besonderheit
Chrome / Edge	F12 oder Strg + Umschalt + I	Bester Debugger
Firefox	F12 oder Strg + Umschalt + K	Bester CSS-Editor
Safari	Cmd + Option + I	Muss erst aktiviert werden

Wichtigste Funktionen:

• ✅ Konsole (Console): console.log()-Ausgaben sehen
• ✅ Quellen (Sources): Breakpoints setzen, Code debuggen
• ✅ Elemente (Elements): HTML/CSS live ändern
• ✅ Netzwerk (Network): API-Aufrufe überwachen

2. Node.js (Für Backend-JavaScript)

URL: nodejs.org

Warum Node.js?

• ✅ Erlaubt JavaScript außerhalb des Browsers (Backend, CLI-Tools)
• ✅ npm (Node Package Manager) → Millionen kostenlose Bibliotheken

Installation:

1. Laden Sie Node.js von nodejs.org herunter
2. Installation ausführen
3. Prüfen: node -v im Terminal eingeben

3. Git (Versionskontrolle)

URL: git-scm.com

Warum Git?

• ✅ Speichert alle Versionen Ihres Codes
• ✅ Sie können zu alten Versionen zurückspringen
• ✅ Mit GitHub können Sie Ihren Code teilen

Grundlegende Befehle:

# Repository initialisieren
git init

# Änderungen hinzufügen
git add .

# Änderungen committen
git commit -m "Mein erster Commit"

# Zu GitHub hochladen
git push origin main

4. GitHub (Code-Plattform)

URL: github.com

Vorteile:

• ✅ Code online speichern (Backup)
• ✅ Mit anderen zusammenarbeiten
• ✅ Zeigen Sie Ihre Projekte potenziellen Arbeitgebern

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ VS Code ist der beste Editor für JavaScript
• ✅ Wichtige Erweiterungen: Live Server, Prettier, ESLint
• ✅ CodePen / JSBin für schnelles Testen
• ✅ MDN Web Docs ist die wichtigste Lern-Ressource
• ✅ Immer MDN statt W3Schools verwenden!
• ✅ Weitere Werkzeuge: Browser-Entwicklertools, Node.js, Git, GitHub

➡️ Nächster Schritt

Im nächsten (und letzten) Kapitel lernen wir häufige Fragen (FAQ) - Antworten auf Anfänger-Fragen!

---

Übung:

1. Installieren Sie VS Code und die empfohlenen Erweiterungen
2. Erstellen Sie ein Konto auf CodePen und testen Sie ein kleines JavaScript-Programm
3. Suchen Sie auf MDN nach Array.forEach() und lesen Sie die Dokumentation
4. Installieren Sie Git und erstellen Sie ein GitHub-Konto