Auf dieser Seite
- Was macht ein AI-JavaScript-Tutor, was ein Kurs nicht kann?
- Woran bleiben Menschen in JavaScript tatsächlich hängen?
- Wie richtest du Claude mit einem einzigen Paste als JavaScript-Tutor ein?
- Wie bringst du mir Async bei, ohne dass ich den Faden verliere?
- Wie bekommst du eine echte Diagnose statt einer korrigierten Datei?
- Welche JavaScript-Tutor-Datei brauchst du als Nächstes?
- Wo scheitert er?
- Wie installierst du die Datei?
- Verwandte Skill-Leitfäden
Der Skill hinter diesem Leitfaden: AI JavaScript Tutor. Macht aus Claude, ChatGPT oder Gemini einen Tutor, der dich ab der ersten Lektion JavaScript in der Browserkonsole schreiben lässt - $19, eine Zahlung, dauerhaft deiner.
JavaScript-Tutor ansehen →Als JavaScript-Tutor ist Claude aus genau einem Grund sinnvoll: Es liest den von dir geschriebenen Code und sagt dir, wo dein mentales Modell falsch ist. Es kann deinen Browser nicht sehen, weiß nicht, was deine Konsole ausgegeben hat, und klickt nicht für dich durch deine Seite. Du führst den Code aus, fügst die Ausgabe hier ein, und von dort arbeitet es sich rückwärts zu dem vor, was du missverstanden hast. Diese Schleife sorgt für den Lerneffekt. Alles andere ist Dekoration.
JavaScript bestraft Halbwissen stärker als die meisten Programmiersprachen für Einsteiger, weil es deinen fehlerhaften Code bereitwillig ausführt und einfach nichts produziert. Kein Fehler, keine Ausgabe, kein Hinweis. Ein Tutor, der deine Annahmen hinterfragt, ist hier mehr wert als in fast jeder anderen Sprache.
Was macht ein AI-JavaScript-Tutor, was ein Kurs nicht kann?
Sie reagiert auf dich. Ein Kurs ist eine feste Linie durch das Material, das aufgezeichnet wurde, bevor es dich gab, und kann daher nicht bemerken, dass du mit Arrays gut zurechtkommst, aber völlig den Überblick darüber verloren hast, worauf sich dies bezieht. Eine Tutor-Datei stellt dir eine Aufgabe, liest den von dir geschriebenen Code und ordnet das Weitere rund um die Lücke, die sie gerade entdeckt hat.
Der AI JavaScript Tutor führt dich durch die Lektionen in der Reihenfolge, in der JavaScript Menschen tatsächlich Schwierigkeiten bereitet: Werte und Gültigkeitsbereiche, Arrays und map, Objekte und Destructuring, dann der DOM und Events und erst danach Promises und Async await. Diese letzte Reihenfolge ist entscheidend. Async vor dem DOM ist der Punkt, an dem die meisten Autodidakten still aufhören, weil von ihnen verlangt wird, über Zeit nachzudenken, bevor sie über Zustände nachdenken können.
Woran bleiben Menschen in JavaScript tatsächlich hängen?
Durchgehend an vier Stellen, und keine davon betrifft die Syntax:
-
Undefined ist kein Fehler.
Cannot read properties of undefinedbegegnet fast allen früh, und die Ursache liegt fast nie in der genannten Zeile. - Der DOM ist noch nicht bereit. Dein Skript läuft, dein Element existiert noch nicht, nichts passiert, nichts meldet einen Fehler.
-
Async. Code, das in der falschen Reihenfolge fertig wird, Werte, die gelesen werden, bevor sie eintreffen, und ein geloggtes
Promise { <pending> }, wo eigentlich die Daten stehen sollten. - Kopieren ohne Modell. Ein funktionierendes Snippet aus einem Suchergebnis behebt das Problem für heute Abend und vermittelt nichts, sodass derselbe Fehler nächste Woche in einer anderen Form zurückkehrt.
Wie richtest du Claude mit einem einzigen Paste als JavaScript-Tutor ein?
Öffne eine neue Unterhaltung, öffne auf einer beliebigen Seite deine Browserkonsole und beginne mit einer Einstufung statt mit einem Lehrplan. Die Konsole ist in den ersten Wochen der richtige Lernort: kein Build-Schritt, keine Installation, sofortiges Feedback.
Du bist mein JavaScript-Tutor. Unterrichte mich noch nicht.
Gib mir eine Aufgabe, die ich in der Browserkonsole ausführen kann. Sie sollte ein Array, eine Funktion und ein Objekt benötigen und weniger als fünfzehn Zeilen umfassen. Sag mir, wie die korrekte Ausgabe aussieht.
Ich werde es selbst schreiben und anschließend sowohl meinen Code als auch genau das, was die Konsole ausgegeben hat, einschließlich Fehlern, einfügen.
Gib mir dann:
1. Was mein Code zeigt, dass ich verstanden habe.
2. Das eine Missverständnis, das mich später am meisten kosten wird.
3. Meine nächsten sechs Themen in der richtigen Reihenfolge und je ein Satz dazu, warum diese Reihenfolge sinnvoll ist.
Schreibe die Aufgabe niemals für mich. Wenn ich etwas Kaputtes einfüge, ist das für dich nützlicher als etwas, das funktioniert.
Wie bringst du mir Async bei, ohne dass ich den Faden verliere?
Async geht schief, wenn es als Syntax vermittelt wird. await ist leicht zu tippen und schwer zu glauben, weil es dich auffordert, zu akzeptieren, dass eine Codezeile pausieren kann, während der Rest der Seite weiterläuft. Der Weg führt über eine Vorhersage vor der Ausführung und den anschließenden Vergleich. Laut danebenzuliegen ist die Lektion.
Bring mir [async/await oder das Thema] mithilfe von Vorhersagen bei, nicht zuerst durch Erklärungen.
1. Gib mir ein Snippet mit weniger als 15 Zeilen und zwei oder drei console.log-Aufrufen.
2. Bevor du irgendetwas erklärst, fordere mich auf, die genaue Reihenfolge aufzuschreiben, in der die Logs erscheinen werden, und was jedes davon ausgibt.
3. Warte auf meine Antwort.
4. Erst dann nenne mir die tatsächliche Reihenfolge und erkläre konkret, warum die Zeilen, bei denen ich falschlag, falsch sind. Ignoriere die, die ich richtig hatte.
5. Gib mir ein zweites Snippet, das dieselbe Annahme aus einem anderen Blickwinkel widerlegt.
Wechsle nicht zum nächsten Thema, bis du zwei Snippets hintereinander richtig vorhergesagt hast.
Ein Tutor bremst dich absichtlich aus. Sobald du JavaScript ohne Hilfe schreiben kannst, willst du das Gegenteil: einen funktionierenden Assistenten für Frontend und Server, für die Struktur und die Teile eines echten Projekts, die kein Kurs abdeckt. Max ist diese Datei: 19 $, eine Zahlung. Lerne zuerst mit dem Tutor und wechsle dann.
Max anzeigen →Lektionen hören ebenfalls auf, abstrakt zu sein, sobald es etwas gibt, das du zum Leben erwecken willst. Zwei Projektdateien passen gut zum Tutor: Chatbot Builder for Node.js ($14.99) für die Serverseite eines funktionierenden Chatbots, einschließlich Routen, Schlüssel und Streaming, und Chatbot Builder for React ($14.99) für die Benutzeroberfläche desselben Projekts. Baue eines davon schlecht, und baue es dann erneut. Das wird deine schnellste Lernwoche sein.
Wie bekommst du eine echte Diagnose statt einer korrigierten Datei?
Bitte um die Lösung, und du bekommst die Lösung - genau der falsche Tausch zu diesem frühen Zeitpunkt. Verbiete sie ausdrücklich, und dasselbe Modell wird nützlich.
Mein Code tut nicht das, was ich erwartet habe. Hier ist er zusammen mit dem, was die Konsole ausgegeben hat.
[PASTE CODE]
[PASTE CONSOLE OUTPUT]
Regeln: kein korrigierter Code, keine umgeschriebene Funktion.
1. Sag mir, welche Zeile der Browser beanstandet und welche Zeile tatsächlich verantwortlich ist.
2. Frage mich, was meiner Meinung nach eine bestimmte Variable an dieser Stelle enthält und warum.
3. Warte auf meine Antwort. Wenn sie falsch ist, stelle eine engere Frage, anstatt es mir zu sagen.
4. Nenne mir eine console.log- oder debugger-Zeile, die ich hätte hinzufügen können und die mir das selbst gezeigt hätte.
Nenne am Ende die allgemeine Gewohnheit, die diese ganze Fehlerklasse verhindert.
Welche JavaScript-Tutor-Datei brauchst du als Nächstes?
Immer zuerst Plain JavaScript. Frameworks verbergen das, was du eigentlich lernen willst. Sobald die Sprache sitzt, ist der AI TypeScript Tutor der kürzeste nächste Schritt, denn es ist dieselbe Sprache, nur mit explizit gemachten Typen, die du zuvor bereits im Kopf behalten musstest. Danach richtet sich die Aufteilung nach dem Beruf: AI React Tutor für das Komponentenmodell, das in den meisten Stellenausschreibungen verlangt wird, AI Angular Tutor, wenn das Arbeitsumfeld auf Unternehmen ausgerichtet und stark festgelegt ist, und AI Swift Tutor, wenn das eigentliche Ziel eine iPhone-App war und das Web nur ein Umweg ist. Der AI Skill for JavaScript ist eine ganz andere Art von Datei: ein praktischer Assistent für die Zeit, nachdem du das hier beherrschst, kein Lehrer.
Wo scheitert er?
- Er kann deine Seite nicht sehen. Kein DOM, kein Netzwerk-Tab, keine gerenderte Ausgabe. Wenn das Symptom visueller Natur ist, beschreibe es oder füge einen Screenshot ein, denn beim Raten allein anhand des Quelltexts beginnt er, Dinge zu erfinden.
- Er kennt deine Framework-Version nicht. Die JavaScript-Toolchain entwickelt sich schnell, und erinnerte API-Details veralten unbemerkt. Prüfe alles Versionsspezifische anhand der offiziellen Dokumentation.
- Er wird dir bereitwillig zu früh ein Framework beibringen. Bitte in der zweiten Woche um React, und er wird dem nachkommen. Das ist deine Entscheidung, nicht seine.
- Er kann nicht feststellen, ob du den Code ausgeführt hast. Überspringe die Aufgabe, sage, sie habe funktioniert, und die Lektionen gehen weiter, während du es nicht tust.
- Die Erstellung von Tools ist der schwächste Bereich. Bundler-Konfigurationen und Modulfehler hängen von Dateien ab, die er nicht sehen kann. Rechne dort also damit, mehr beschreiben zu müssen.
- Er wird dich nicht zum Üben bringen. Zwanzig Minuten täglich sind besser als fünf Stunden am Sonntag, und nichts in der Datei setzt das durch.
Die Gewohnheit, die Menschen, die sich verbessern, von denen unterscheidet, die stagnieren, ist das erneute Lesen von Code, den sie bereits zum Laufen gebracht haben. Yuri prüft, was du geschrieben hast, und sagt dir, was fragil ist und warum - im Ton eines Kollegen statt eines Lehrers. 19 $, eine Zahlung. Nützlich, sobald deine Dateien mehr als hundert Zeilen haben.
Yuri ansehen →Wie installierst du die Datei?
Der Tutor ist eine SKILL.md-Datei in einer ZIP-Datei. Öffne in Claude Anpassen → Skills, klicke auf die Schaltfläche +, wähle Skill erstellen und anschließend Skill hochladen, und wähle dann die ZIP-Datei aus. Aktiviere den Schalter, und der Skill ist einsatzbereit. Skills sind in den Tarifen Free, Pro, Max, Team und Enterprise verfügbar.
Die einzige wirkliche Voraussetzung ist die Codeausführung. Wenn das Skills-Menü ausgegraut ist, aktiviere sie unter Einstellungen → Funktionen, wo sie als Codeausführung und Dateierstellung aufgeführt ist. In Team- und Enterprise-Tarifen wird dies von einem Inhaber in den Organisationseinstellungen gesteuert. Wenn sie organisationsweit deaktiviert ist, wende dich an diese Person. Anthropic dokumentiert all das in seinem Hilfeartikel zu Skills.
Wenn du die Codeausführung nicht aktivieren kannst oder in ChatGPT oder Gemini arbeitest, nutzt die Fallback-Lösung dieselbe Datei: Öffne die ZIP-Datei, kopiere den Inhalt von SKILL.md und füge ihn in ein Projekt, ein benutzerdefiniertes GPT, ein Gem oder benutzerdefinierte Anweisungen ein. Das Verhalten ist identisch; du musst es nur erneut einfügen, wenn du die Tools wechselst.
Zusammenfassung:
Nutze den AI-JavaScript-Tutor (19 $), um richtig eingestuft zu werden, in der Konsole zu lernen und vor der Ausführung Vorhersagen zu treffen. Wechsle zum AI-TypeScript-Tutor oder AI-React-Tutor (je 19 $), sobald die Sprache sitzt, und entwickle mit dem Chatbot Builder für Node.js (14,99 $) etwas Echtes. Alles funktioniert in Claude, ChatGPT und Gemini, lässt sich in etwa zwei Minuten installieren und bietet eine 30-Tage-Geld-zurück-Garantie.
AI-JavaScript-Tutor
Eine Datei, einmal eingefügt. Die Konsole ab der ersten Lektion, das DOM vor async und ein Tutor, der dich fragt, was du erwartet hast, dass eine Variable enthält, statt einfach die Lösung einzufügen. Kein Abonnement.
KissMySkills ist ein Marktplatz mit 2.000+ AI-Skills, 300+ prompt-Paketen, 55 Agenten und kostenlosen Tools für Claude, ChatGPT und jeden AI-Chat.
Verwandte Skill-Leitfäden
- Claude als Python-Tutor nutzen (Claude schreibt deinen Code nicht)
- Claude als Excel-Tutor nutzen (mit deinen eigenen unübersichtlichen Daten)
- Claude für Backend-Entwicklung nutzen: Der Niko Skill-Leitfaden
- Claude als Cloud Engineer nutzen: Der Tariq Skill-Leitfaden
- Die besten Claude Code Skills 2026: Was du installieren solltest und worauf du verzichten kannst
- Claude Skill-Beispiele: 12 echte SKILL.md-Dateien Zeile für Zeile erklärt