🧠 KI als Kooperationspartner

Wie du KI auf hohem Niveau nutzt – zum Denken, nicht zum Kopieren

🪞 1. Die zentrale Erkenntnis: KI als Denkspiegel

Künstliche Intelligenz ist kein Magier, sondern ein Denkspiegel: – Gibst du ihr **unklare Fragen**, reflektiert sie **Dschungel-Code**. – Gibst du ihr **präzise, fachlich fundierte Prompts**, reflektiert sie **professionelle Lösungen**.

💡 Für Fortgeschrittene: Dein Prompt ist dein erster Code – je besser du ihn schreibst, desto besser wird die Antwort.

❌ 2. Warum „Copy & Paste“ jetzt besonders gefährlich ist

In der 2. Klasse geht es nicht mehr nur um Syntax – sondern um **Zustandsmanagement**, **Seiteneffekte**, **Closures**, **asynchrone Abläufe**. KI-Code, den du nicht verstehst, führt zu **subtilen, schwer findbaren Fehlern** – die du nicht debuggen kannst.

⚠️ Achtung: In diesem Tutorial sind alle Aufgaben so gestaltet, dass du Erklärungen liefern, Design-Entscheidungen treffen und Risiken analysieren musst – nicht nur Code ablieferst.

✅ 3. Die 5 Säulen fortgeschrittener KI-Nutzung

1. Fachbegriffe verwenden – nicht umschreiben

❌ „Mach eine Funktion, die Sachen zählt, wenn man draufklickt.“
✅ „Erstelle eine Event-Listener-Funktion mit Closure für einen Click-Zähler – ohne globale Variablen und mit Möglichkeit zum Entfernen des Listeners.“

2. Kontext und Constraints nennen

❌ „Wie macht man eine Uhr?“
✅ „Ich brauche eine Uhr mit setInterval, die start/stop-fähig ist und die Intervall-ID sicher speichert, um Speicherlecks zu vermeiden. Nur Vanilla JS.“

3. Nach dem „Warum“ und „Wie“ fragen – nicht nur nach dem „Was“

Wenn die KI Code liefert, frage:
– „Warum verwendest du hier textContent statt innerHTML?“
– „Wie vermeidest du hier eine Endlosschleife?“
– „Was passiert bei leerem Array in dieser Funktion?“

4. KI als Code-Reviewer nutzen

Schreibe deinen eigenen Code – dann frage:
– „Analysiere diesen DOM-Manipulations-Code auf Sicherheitslücken.“
– „Ist diese Event-Delegation robust?“

5. Kritisch prüfen – besonders bei fortgeschrittenen Konzepten

KI verwechselt oft:
– == vs ===
– Referenz vs. Wert
– var vs let
– this-Bindung
→ **Immer testen! Immer verstehen!**

🎯 4. Gute Prompts – Beispiele aus der Praxis (JavaScript)

Closure verstehen:
„Erkläre mir Closures wie einem erfahrenen JS-Lerner. Zeig ein Beispiel mit Zähler-Fabrik – und warum jede Instanz ihren eigenen Zustand hat.“

Sicherheit im DOM:
„Wie verhindere ich XSS bei innerHTML? Zeig eine sichere Alternative für Benutzereingaben – mit Code-Beispiel und Erklärung.“

Vermeide dies:
„Schreib mir ein Todo-Liste-Programm.“ → zu vage, kein Fokus, Copy-Paste-Gefahr.

🔍 5. Übung: Analysiere diesen Prompt

Lies den folgenden Prompt – ist er gut oder schlecht? Warum?

„Ich baue eine Funktion, die Arrays sortiert. Aber bei gemischten Typen (Zahlen und Strings) stürzt sie ab. Kannst du mir eine robuste Version zeigen, die Typen prüft und sicher sortiert – mit Fehlerbehandlung für ungültige Eingaben?“

✅ Gut! Warum?
– Klare Problemstellung
– Kontext (eigene Funktion)
– Anforderungen (Typ-Prüfung, Fehlerbehandlung)
– Keine Komplettlösung, sondern Unterstützung