用 AI 工具輕鬆學 JavaScript：ChatGPT Canvas

對沒有程式背景的學生，學習 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 工具，而忽略了理解程式碼的重要性。