對沒有程式背景的學生,學習 JavaScript 可能是跨入前端的第一道關卡。但若妥善運用 AI 工具,就能有效的提高學習效率,避免不斷地卡關而最後選擇放棄。
以下介紹三個實用情境,能幫助我們在學習中事半功倍。
這邊使用 ChatGPT 的 Canvas 功能,免費用戶也可以直接使用。
同樣的作法也可用在 Claude、Gemini 等其他的生成式 AI 工具。
讓 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;
}
}
```
遇到不會做的功能時,可以請 AI 幫忙生成程式範例,然後再進一步研究程式碼的運作邏輯。
Prompt 範例:
請使用 canvas 生成一個 JavaScript 函式,能將數值同步到 URL query-string 中
*提醒:不要只是複製貼上 AI 生成的代碼,如果當中有不熟悉的語法,查閱文件了解其使用方式,未來才能應用到更多不同的情境中。
當程式無法正確執行時,請 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 工具,而忽略了理解程式碼的重要性。