Claude gebruiken als JavaScript-tutor (in de console, niet in een video)

Skill · SKILL.md

De Skill achter deze gids: AI JavaScript Tutor. Verandert Claude, ChatGPT of Gemini in een tutor die je vanaf les één JavaScript laat schrijven in de browserconsole - $19, één betaling, voor altijd van jou.

Bekijk de JavaScript-tutor →

Als JavaScript-tutor is Claude om precies één reden de moeite waard: het leest de code die je hebt geschreven en vertelt je waar je mentale model niet klopt. Het kan je browser niet zien, weet niet wat je console heeft weergegeven en klikt niet namens jou door je pagina. Jij voert de code uit, plakt terug wat eruit kwam en vanaf daar werkt het terug naar wat je niet begreep. Die lus is wat je iets leert. De rest is versiering.

JavaScript straft half begrip harder af dan de meeste eerste programmeertalen, omdat het je kapotte code zonder problemen uitvoert en gewoon niets produceert. Geen fout, geen uitvoer, geen aanwijzing. Een tutor die je aannames kritisch bevraagt, is hier waardevoller dan in vrijwel elke andere taal.

Wat doet een AI JavaScript Tutor dat een cursus niet doet?

Het reageert op jou. Een cursus is een vast traject door materiaal dat is opgenomen voordat jij bestond, en kan dus niet merken dat je arrays prima begrijpt maar volledig vastloopt op waar dit waar het naar verwijst. Een tutorbestand geeft je een opdracht, leest de code die je schrijft en bepaalt wat er daarna komt op basis van de leemte die het zojuist heeft gevonden.

De AI JavaScript Tutor behandelt de lessen in de volgorde waarin JavaScript mensen in de praktijk laat struikelen: waarden en scope, arrays en map, objecten en destructuring, daarna de DOM en events, en pas daarna promises en async await. Die laatste volgorde is belangrijk. Met async beginnen voordat je de DOM begrijpt, is het punt waarop de meeste autodidactische cursisten stilletjes afhaken, omdat ze over tijd moeten nadenken voordat ze over toestand kunnen nadenken.

Waar lopen mensen in JavaScript nu echt op vast?

Op vier plekken steeds opnieuw, en geen enkele daarvan heeft met syntaxis te maken:

  • Undefined dat geen fout is. Cannot read properties of undefined is de foutmelding die iedereen vroeg tegenkomt, en de oorzaak ligt bijna nooit op de regel die wordt genoemd.
  • De DOM die nog niet klaar is. Je script wordt uitgevoerd, maar je element bestaat nog niet: er gebeurt niets en er verschijnt geen foutmelding.
  • Async. Code die in de verkeerde volgorde wordt uitgevoerd, waarden die worden gelezen voordat ze binnen zijn en een Promise { <pending> } die wordt gelogd waar de gegevens zouden moeten staan.
  • Kopiëren zonder model. Een werkend codefragment uit een zoekresultaat lost het probleem van vanavond op, maar je leert er niets van, waardoor dezelfde bug volgende week in een andere vorm terugkomt.

Hoe stel je Claude met één plakactie in als JavaScript-tutor?

Open een nieuw gesprek, open op een willekeurige pagina de browserconsole en begin met een plaatsingsopdracht in plaats van een syllabus. De console is de juiste leeromgeving voor de eerste weken: geen buildstap, geen installatie, direct feedback.

PROMPT - de plaatsingstaak

Jij bent mijn JavaScript-tutor. Leer me nog niets.

Geef me één opdracht die ik in de browserconsole kan uitvoeren. Er moeten een array, een functie en één object voor nodig zijn en de opdracht mag niet meer dan vijftien regels bevatten. Vertel me hoe de correcte uitvoer eruitziet.

Ik schrijf het zelf en plak vervolgens zowel mijn code als precies wat de console heeft afgedrukt terug, inclusief fouten.

Geef me daarna:
1. Wat mijn code bewijst dat ik begrijp.
2. Het ene misverstand dat me later het meeste zal kosten.
3. Mijn volgende zes onderwerpen in volgorde, met één zin over waarom die volgorde.

Schrijf de opdracht nooit voor me. Als ik iets plaks dat niet werkt, heb je daar meer aan dan aan iets dat wel werkt.

Hoe zorg je ervoor dat het me async leert zonder dat ik afhaak?

Async gaat mis wanneer het als syntaxis wordt onderwezen. await is gemakkelijk te typen en moeilijk te geloven, omdat je moet accepteren dat een regel code kan pauzeren terwijl de rest van de pagina doorgaat. De manier om dit te begrijpen is eerst te voorspellen wat er gebeurt voordat je de code uitvoert en daarna te vergelijken. Hardop fouten maken is de les.

PROMPT - voorspel, voer daarna uit

Leer me [async/await, of het onderwerp] met voorspellen, niet eerst met uitleg.

1. Geef me een codefragment van minder dan 15 regels met daarin twee of drie console.log-aanroepen.
2. Vraag me voordat je iets uitlegt om de exacte volgorde op te schrijven waarin de logs verschijnen en wat elke log afdrukt.
3. Wacht op mijn antwoord.
4. Vertel me pas daarna wat de werkelijke volgorde is en leg specifiek uit waarom de regels die ik fout had, fout zijn. Negeer de regels die ik goed had.
5. Geef me een tweede codefragment dat dezelfde aanname vanuit een andere invalshoek onderuit haalt.

Ga pas naar het volgende onderwerp als ik twee codefragmenten achter elkaar correct heb voorspeld.
Skill · Na de tutor, de werkende assistent
Max - AI Skill voor full-stackontwikkeling
Max - AI Skill voor full-stackontwikkeling

Een tutor vertraagt je bewust. Zodra je zonder hulp JavaScript kunt schrijven, wil je het tegenovergestelde: een werkende assistent voor zowel de front-end als de server, voor structuur en voor de onderdelen van een echt project die in geen enkele cursus aan bod komen. Max is dat bestand, $29, één betaling. Leer eerst met de tutor en stap daarna over.

Max bekijken →

Lessen blijven ook niet abstract zodra er iets is dat je wilt laten bestaan. Twee projectbestanden passen goed bij de tutor: Chatbot Builder for Node.js ($14.99) voor de serverkant van een werkende chatbot, inclusief routes, sleutels en streaming, en Chatbot Builder for React ($14.99) voor de interface aan de voorkant van hetzelfde project. Bouw één ervan slecht, en bouw het daarna opnieuw. Dat wordt de snelste leerweek die je zult hebben.

Hoe krijg je een echte diagnose in plaats van een gecorrigeerd bestand?

Vraag om de oplossing en je krijgt de oplossing, en dat is precies de verkeerde ruil in dit vroege stadium. Verbied dat expliciet en hetzelfde model wordt nuttig.

PROMPT - de undefined-doorgang

Mijn code doet niet wat ik verwachtte. Hier is de code, plus wat de console afdrukte.

[PASTE CODE]
[PASTE CONSOLE OUTPUT]

Regels: geen gecorrigeerde code, geen herschreven functie.

1. Vertel me welke regel de browser aanwijst en welke regel daadwerkelijk verantwoordelijk is.
2. Vraag me wat ik denk dat één specifieke variabele op dat moment bevat, en waarom.
3. Wacht op mijn antwoord. Als het fout is, stel dan een specifiekere vraag in plaats van het me te vertellen.
4. Geef me één console.log- of één debugger-regel die ik had kunnen toevoegen en waarmee ik dit zelf had kunnen zien.

Noem aan het eind de algemene gewoonte die deze hele klasse bugs voorkomt.

Welk JavaScript-tutorbestand heb je hierna nodig?

Altijd eerst gewoon JavaScript. Frameworks verhullen wat je probeert te leren. Zodra de taal goed zit, is de AI TypeScript Tutor de kortste volgende stap, omdat het dezelfde taal is, maar met de typen die je al in je hoofd bijhield expliciet gemaakt. Daarna hangt de keuze af van je werk: AI React Tutor voor het componentmodel waar de meeste vacatures om vragen, AI Angular Tutor als je in een bedrijfsmatige en sterk voorgeschreven omgeving werkt, en AI Swift Tutor als je eigenlijke bestemming een iPhone-app was en het web slechts een omweg. De AI Skill for JavaScript is weer een heel ander soort bestand: een werkende assistent voor nadat je dit kent, geen leraar.

Waar werkt het niet goed?

  • Het kan je pagina niet zien. Geen DOM, geen netwerktabblad en geen gerenderde uitvoer. Als het probleem visueel is, beschrijf het dan of plak een screenshot, want raden op basis van alleen de broncode is waar het dingen verzint.
  • Het weet niet welke versie van je framework je gebruikt. JavaScript-tools veranderen snel en herinnerde API-details raken ongemerkt verouderd. Controleer alles wat versieafhankelijk is aan de hand van de officiële documentatie.
  • Het zal je maar al te graag te vroeg een framework aanleren. Vraag in week twee om React en het zal daaraan gehoor geven. Dat is jouw afweging, niet die van de Skill.
  • Het kan niet zien of je de code hebt uitgevoerd. Sla de taak over, zeg dat het werkte, en de lessen gaan door terwijl jij niets doet.
  • Buildtools zijn het zwakste onderdeel. Configuratie van bundlers en modulefouten hangen af van bestanden die het niet kan zien, dus verwacht daar meer te moeten uitleggen.
  • Het zorgt er niet voor dat je oefent. Twintig minuten per dag is beter dan vijf uur op zondag, en niets in het bestand dwingt dat af.
Skill · Je eigen code teruglezen
Yuri - AI Skill voor codebeoordeling
Yuri - AI Skill voor codebeoordeling

De gewoonte die mensen die vooruitgang boeken onderscheidt van mensen die blijven steken, is het opnieuw lezen van code die ze al werkend hebben gekregen. Yuri bekijkt wat je hebt geschreven en vertelt wat kwetsbaar is en waarom, in de toon van een collega in plaats van een leraar. $29, één betaling. Meteen nuttig zodra je bestanden langer worden dan honderd regels.

Yuri bekijken →

Hoe installeer je het bestand?

De tutor is een SKILL.md-bestand in een ZIP-bestand. Open in Claude Aanpassen → Skills, klik op de knop +, kies Skill maken en vervolgens Een Skill uploaden, en selecteer het ZIP-bestand. Schakel de Skill in en hij is actief. Skills zijn beschikbaar bij de abonnementen Free, Pro, Max, Team en Enterprise.

De enige echte vereiste is code-uitvoering. Als het menu Skills grijs wordt weergegeven, schakel je dit in via Instellingen → Mogelijkheden. Daar staat het vermeld als code-uitvoering en bestandscreatie. Bij Team- en Enterprise-abonnementen beheert een eigenaar dit via de organisatie-instellingen. Als het organisatiebreed is uitgeschakeld, moet je dus die persoon benaderen. Anthropic documenteert dit allemaal in het helpartikel over Skills.

Als je code-uitvoering niet kunt inschakelen, of als je in ChatGPT of Gemini werkt, gebruikt de fallback hetzelfde bestand: open de ZIP, kopieer de inhoud van SKILL.md en plak die in een Project, een aangepaste GPT, een Gem of gewone aangepaste instructies. Het gedrag is identiek; je hoeft het alleen opnieuw te plakken wanneer je van tool wisselt.

Samengevat:

Gebruik de AI JavaScript-tutor ($19) om op het juiste niveau te beginnen, in de console te leren en eerst te voorspellen voordat je uitvoert. Ga over op de AI TypeScript-tutor of AI React-tutor ($19 per stuk) zodra je de taal beheerst, en bouw iets echts met de Chatbot Builder voor Node.js ($14,99). Alles werkt in Claude, ChatGPT en Gemini, is in ongeveer twee minuten geïnstalleerd en wordt geleverd met een 30 dagen niet-goed-geld-teruggarantie.

Skill · SKILL.md · Werkt met Claude en ChatGPT

AI JavaScript-tutor

Eén bestand, één keer geplakt. De console vanaf les één, de DOM vóór async en een tutor die vraagt wat je verwachtte dat een variabele zou bevatten in plaats van de oplossing te plakken. Geen abonnement.

$19
Krijg de JavaScript-tutor →

KissMySkills is een marktplaats met 853 AI-Skills, 158 promptpakketten, 55 agents en gratis tools voor Claude, ChatGPT en elke AI-chat.

Gerelateerde Skill-gidsen

~/get-started

Skills die werken. Geen onzin.

Blader door elke skill, prompt pack en agent in de winkel.

Bekijk alle vaardigheden →Of probeer de gratis tools