對沒有程式背景的學生，學習 JavaScript 可能是跨入前端的第一道關卡。但若妥善運用 AI 工具，就能有效的提高學習效率，避免不斷地卡關而最後選擇放棄。
以下介紹三個實用情境，能幫助我們在學習中事半功倍。這邊使用 ChatGPT 的 Canvas 功能，免費用戶也可以直接使用。
同樣的作法也可用在 Claude、Gemini 等其他的生成式 AI 工具。
1. 解釋程式碼
讓 AI 工具加入註解，協助理解程式碼的運作邏輯。
Prompt 範例:
請使用 canvas，將此程式碼加入註解，解釋運作邏輯。
```
function setUserName() {
let myName = prompt('Please enter your name.');
if(!myName || myName === null) {
setUserName();
} else {
localStorage.setItem('name', myName);
myHeading.innerHTML = 'Mozilla is cool, ' + myName;
}
}
```
2. 生成範例
遇到不會做的功能時，可以請 AI 幫忙生成程式範例，然後再進一步研究程式碼的運作邏輯。
Prompt 範例:
請使用 canvas 生成一個 JavaScript 函式，能將數值同步到 URL query-string 中
＊提醒：不要只是複製貼上 AI 生成的代碼，如果當中有不熟悉的語法，查閱文件了解其使用方式，未來才能應用到更多不同的情境中。
3. 找出 bug
當程式無法正確執行時，請 AI 排查問題並提供修正建議。
Prompt 範例:
此程式碼在 API 回覆內容為空時，未觸發 "no response" 錯誤。
請解釋原因，並使用 canvas 回覆修正後的版本。
```
try {
const res = await fetch("https://www.api.com/get-data")
const data = await res.json()
if (data === undefined) {
throw new Error("no response")
}
return data
} catch(error) {
...
}
```
＊提醒：不要只把答案死背下來，而是要參考 AI 的說明去理解原因。有不懂的地方，也可以讓 AI 做更詳細的解釋。
小結
當前的 AI 工具雖然還無法產出 100% 正確的答案，但在學習基礎知識上已經非常實用。建議善用工具來提高學習效率。然而，也不要過度仰賴 AI 工具，而忽略了理解程式碼的重要性。