這個頁面
本指南背後的 Skill：AI JavaScript Tutor。將 Claude、ChatGPT 或 Gemini 變成 tutor，從第一課開始讓你在瀏覽器主控台中撰寫 JavaScript - $19，一次付款，永久擁有。
查看 JavaScript tutor →作為 JavaScript tutor，Claude 值得使用的原因只有一個：它會讀取你寫的程式碼，告訴你哪裡的心智模型出了問題。它看不到你的瀏覽器，也不知道你的主控台印出了什麼，更不會替你點擊頁面。你執行程式碼，把回傳結果貼上來，然後它從那裡反向追查你誤解的地方。正是這個循環帶來學習效果。其他一切都是裝飾。
JavaScript 比大多數入門語言更懲罰一知半解，因為它會很樂意執行有問題的程式碼，然後什麼也不產生。沒有錯誤、沒有輸出，也沒有線索。在這裡，會追問你假設的 tutor 幾乎比在任何其他語言中都更有價值。
AI JavaScript tutor 做了哪些課程做不到的事？
它會對你的情況做出反應。課程是一條在你出現之前就錄製好的固定學習路線，因此它無法察覺你已經熟悉陣列，卻完全不理解 這個 所指的內容。一個 tutor 檔案會讓你透過任務開始學習，讀取你寫的程式碼，並根據剛找出的不足重新安排接下來的內容。
AI JavaScript Tutor 按照 JavaScript 實際讓人出錯的順序安排課程：值與作用域、陣列與 map、物件與解構，接著是 DOM 與事件，最後才是 promise 與 async await。最後這個順序很重要。在尚未理解狀態前就學習非同步，是多數自學者悄悄停下來的地方，因為他們被要求在還無法理解狀態前，先推理時間。
人們實際上會在哪些地方卡在 JavaScript？
一貫地出現在四個地方，而且沒有一個是語法問題：
-
未定義不代表錯誤。
Cannot read properties of undefined是每個人早期都會遇到的錯誤，而原因幾乎從來不在它指出的那一行。 - DOM 尚未準備就緒。你的指令碼執行了，但元素尚不存在，因此什麼也沒發生，也沒有任何錯誤提示。
-
非同步。程式碼以錯誤的順序完成、在值抵達前就讀取它們，以及在應該顯示資料的地方記錄了
Promise { <pending> }。 - 沒有模型地複製。搜尋結果中的可運作程式碼片段只能解決今晚的問題，卻什麼也教不會，所以同一個錯誤下週會以不同形式再次出現。
如何只貼上一段內容，就設定 Claude 成為 JavaScript 導師？
開啟新的對話，在任意頁面上開啟瀏覽器主控台，從程度評估開始，而不是從課綱開始。主控台是前幾週最適合的教室：不需要建置步驟、不需要安裝，還能立即得到回饋。
你是我的 JavaScript 導師。現在先不要教任何東西。
給我一個可以在瀏覽器主控台執行的任務。它應該需要一個陣列、一個函式和一個物件，並且少於十五行。告訴我正確的輸出應該是什麼。
我會自己撰寫，然後貼回我的程式碼，以及主控台實際輸出的完整內容，包括錯誤訊息。
接著告訴我：
1. 我的程式碼證明我理解了什麼。
2. 之後最可能讓我付出最大代價的單一誤解。
3. 依序列出我接下來的六個主題，並用一句話說明為什麼是這個順序。
永遠不要替我寫作業。如果我貼上一段出錯的程式碼，那比貼上一段能運作的程式碼對你更有用。
你要如何教它 async，卻不讓我跟不上？
當 async 被當成語法來教時，就容易學不好。 await 它很容易輸入，卻很難讓人相信，因為它要求你接受一行程式碼可以暫停，而頁面的其餘部分繼續運作。突破方法是在執行前先預測，然後進行比較。公開說出錯誤，就是學習。
使用預測而非先解釋的方式教我 [async/await，或該主題]。
1. 給我一段少於 15 行、包含兩或三個 console.log 呼叫的程式碼。
2. 在你解釋任何事情之前，要求我寫下日誌會出現的確切順序，以及每一則會輸出什麼。
3. 等待我的回答。
4. 只有在那之後，才告訴我實際的順序，並具體解釋我答錯的行為什麼錯。忽略我答對的部分。
5. 給我第二段從不同角度打破相同假設的程式碼。
在我連續正確預測兩段程式碼之前，不要進入下一個主題。
導師會刻意放慢你的步調。當你已經能夠獨立撰寫 JavaScript 時，你想要的正好相反：一位能在前端與伺服器之間協助你處理結構，以及真實專案中沒有任何課程涵蓋的部分的實用助理。Max 就是這個檔案，19 美元，一次付款。先跟導師學習，然後切換過來。
查看 Max →當你有一個想實現的東西時，課程也不再抽象。兩個專案檔案很適合搭配教學工具使用：Chatbot Builder for Node.js（$14.99）用於建置可運作聊天機器人的伺服器端，包含路由、金鑰與串流功能；以及 Chatbot Builder for React（$14.99）用於同一個專案前端的介面。先把其中一個做得很糟，再重新建置。那會是你能擁有的最快速學習週。
如何才能取得真正的診斷，而不是一份修正後的檔案？
要求修正方案，你就會得到修正方案，而這正是學習初期最錯誤的取捨。明確禁止修正後，同一個模型就會變得有用。
我的程式碼沒有按照預期運作。這是程式碼，以及主控台輸出的內容。
[PASTE CODE]
[PASTE CONSOLE OUTPUT]
規則：不要提供修正後的程式碼，不要重寫函式。
1. 告訴我瀏覽器指責的是哪一行，以及實際負責造成問題的是哪一行。
2. 問我在那個時間點認為某個特定變數存放什麼，以及原因。
3. 等我回答。如果答案錯了，請提出更精確的問題，而不是直接告訴我。
4. 給我一行 console.log 或一行 debugger，我加上後就能自己看出問題。
最後，說出能避免整類錯誤的一般習慣。
你接下來需要哪個 JavaScript 教學檔案？
先從純 JavaScript 開始，永遠如此。框架會把你想學的東西藏起來。等語言基礎穩固後，AI TypeScript Tutor 是最短的下一步，因為它是同一種語言，只是把你原本已經在腦中維持的型別明確寫出來。之後則依工作內容分流：AI React Tutor 適合大多數徵才文章要求的元件模型；如果工作環境是企業導向且框架偏好明確，選 AI Angular Tutor；如果真正的目標是 iPhone 應用程式，而網頁只是繞道，則選 AI Swift Tutor。AI Skill for JavaScript 則完全是另一種檔案：它是你學會這些之後使用的工作助手，不是老師。
它在哪些地方會失效？
- 它看不到你的頁面。沒有 DOM、沒有網路分頁，也沒有渲染後的輸出。如果症狀是視覺上的，請描述它或貼上螢幕截圖，因為只根據原始碼猜測，正是它開始憑空捏造的地方。
- 它不知道你使用的框架版本。JavaScript 工具更新很快，回想出的 API 細節可能會在不知不覺中過時。凡是涉及版本的內容，都應對照官方文件確認。
- 它很樂意過早教你某個框架。在第二週要求學習 React，它就會照辦。那是你的判斷，而不是它的。
- 它無法判斷你是否執行了程式碼。跳過任務，說自己已經完成，課程仍會繼續，而你其實沒有進展。
- 建置工具是最弱的一環。打包工具設定和模組錯誤取決於它看不到的檔案，因此你應該預期需要在這方面多加描述。
- 它不會讓你練習。每天二十分鐘勝過週日一次練習五小時，而檔案中的任何內容都不會強制你這麼做。
區分會進步的人和停滯不前的人的習慣，是重新閱讀自己已經成功執行的程式碼。Yuri 會檢視你寫的內容，告訴你哪些地方脆弱以及原因，語氣更像同事，而不是老師。19 美元，單次付款。當你的檔案超過一百行時，立即就能派上用場。
查看 Yuri →如何安裝這個檔案？
這位導師是 ZIP 檔案中的 SKILL.md 檔案。在 Claude 中，開啟「自訂」→「Skills」，按下 + 按鈕，選擇「建立 Skill」，接著選擇「上傳 Skill」，然後選取 ZIP 檔案。將它切換為開啟後，就能使用了。Skills 適用於 Free、Pro、Max、Team 和 Enterprise 方案。
唯一真正的要求是執行程式碼。如果 Skills 選單呈灰色，請前往「設定」→「功能」將其開啟；它在那裡列為程式碼執行和檔案建立功能。在 Team 和 Enterprise 方案中，這項功能由擁有者在組織設定中控制，因此如果整個組織都已關閉，請向該擁有者詢問。Anthropic 在其 Skills 說明文章中完整說明了這些內容。
如果你無法啟用程式碼執行功能，或正在使用 ChatGPT 或 Gemini，替代方法使用的是同一個檔案：開啟 ZIP，複製 SKILL.md 的內容，然後貼到 Project、自訂 GPT、Gem 或一般的自訂指示中。行為完全相同，只是在切換工具時需要重新貼上。
總結：
使用 AI JavaScript 家教（19 美元）獲得適當的程度定位，在主控台中學習，並在執行前先做出預測。當你熟悉這門語言後，升級使用 AI TypeScript 家教 或 AI React 家教（每個 19 美元），再使用 Node.js 聊天機器人建構器（14.99 美元）打造真正的作品。全部都能在 Claude、ChatGPT 和 Gemini 中運作，約兩分鐘即可安裝，並提供 30 天退款保證。
AI JavaScript 家教
一個檔案，只需貼上一次。從第一課開始使用主控台，在非同步之前先學 DOM，還有一位會詢問你原本預期變數應該儲存什麼、而不是直接貼上修正內容的家教。無需訂閱。
KissMySkills 是一個提供 2,000+ 個 AI Skills、300+ 個 prompt 套件、55 個 代理及 免費工具的市集，適用於 Claude、ChatGPT 及任何 AI 聊天工具。
相關 Skill 指南
- 如何將 Claude 用作 Python 家教（它不會替你寫程式碼）
- 如何將 Claude 用作 Excel 家教（使用你自己雜亂的資料）
- 如何使用 Claude 進行後端開發：Niko Skill 指南
- 如何將 Claude 用作雲端工程師：Tariq Skill 指南
- 2026 年最佳 Claude Code Skills：該安裝什麼、該跳過什麼
- Claude Skill 範例：逐行解析 12 個真實的 SKILL.md 檔案