用 AI 工具輕鬆學 JavaScript:ChatGPT Canvas

更新於 發佈於 閱讀時間約 4 分鐘

對沒有程式背景的學生,學習 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;
}
}
```
raw-image




2. 生成範例

遇到不會做的功能時,可以請 AI 幫忙生成程式範例,然後再進一步研究程式碼的運作邏輯。

Prompt 範例:

請使用 canvas 生成一個 JavaScript 函式,能將數值同步到 URL query-string 中
raw-image

*提醒:不要只是複製貼上 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) {
...
}
```
raw-image

*提醒:不要只把答案死背下來,而是要參考 AI 的說明去理解原因。有不懂的地方,也可以讓 AI 做更詳細的解釋。




小結

當前的 AI 工具雖然還無法產出 100% 正確的答案,但在學習基礎知識上已經非常實用。建議善用工具來提高學習效率。然而,也不要過度仰賴 AI 工具,而忽略了理解程式碼的重要性。

avatar-img
4會員
40內容數
零基礎到成功轉職,一路上會遇到哪些挑戰、應該如何解決? - 猶豫階段:「這適合我嗎?薪水如何?...」 - 起步階段:「怎麼開始學?要不要做 side project?...」 - 成長階段:「如何優化開發效率?選擇框架?...」 - 面試階段:「怎麼準備技術和行為面試?...」
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
前端轉職經驗談 的其他內容
當要顯示的文字過長時,一般會使用 CSS 隱藏超出的部分,並在文字尾端顯示 ... 來表示內容並未完全顯示。 Demo:https://codepen.io/lwxidmpx-the-scripter/pen/MYgVmjm 單行文字截斷 overflow: hidden; whi
文章介紹如何使用 Next.js 和 Vercel ,透過串接 OpenAI API 來建立具備 AI 功能的網站。
滿足個人的必要條件後,優先選擇能持續成長的環境
當要顯示的文字過長時,一般會使用 CSS 隱藏超出的部分,並在文字尾端顯示 ... 來表示內容並未完全顯示。 Demo:https://codepen.io/lwxidmpx-the-scripter/pen/MYgVmjm 單行文字截斷 overflow: hidden; whi
文章介紹如何使用 Next.js 和 Vercel ,透過串接 OpenAI API 來建立具備 AI 功能的網站。
滿足個人的必要條件後,優先選擇能持續成長的環境
你可能也想看
Google News 追蹤
我們人類和ChatGPT的對話技巧也是需要學習的,有鑑於此,我想要一天分享一點「和ChatGPT對話的技術」,並且每篇文章長度控制在三分鐘以內,讓大家不會壓力太大,但是又能夠每天成長一點。 對於需要精確度、背景和創造力的複雜融合的任務,The Ultimate Template 是無與倫比的,
我們人類和ChatGPT的對話技巧也是需要學習的,有鑑於此,我想要一天分享一點「和ChatGPT對話的技術」,並且每篇文章長度控制在三分鐘以內,讓大家不會壓力太大,但是又能夠每天成長一點。 TOCD 範本體現了簡單性和有效性,此範本以四個基本元素 ( Task、Output、Context
Thumbnail
在現今以及未來的工作中,AI 技能將扮演關鍵角色。為了滿足這一需求,許多頂尖科技公司和大學提供了免費的線上 AI 課程,讓有興趣進修、提升能力的讀者可以選擇適合自己的課程。
我們人類和ChatGPT的對話技巧也是需要學習的,有鑑於此,我想要一天分享一點「和ChatGPT對話的技術」,並且每篇文章長度控制在三分鐘以內,讓大家不會壓力太大,但是又能夠每天成長一點。 每個工匠都珍惜他們的工具,軟體工程師擁有從整合開發環境 (IDE) 到各種工具、除錯器、版本控制系統等等
Thumbnail
最新的AI趨勢讓人眼花撩亂,不知要如何開始學習?本文介紹了作者對AI的使用和體驗,以及各類AI工具以及推薦的選擇。最後強調了AI是一個很好用的工具,可以幫助人們節省時間並提高效率。鼓勵人們保持好奇心,不停止學習,並提出了對健康生活和開心生活的祝福。
Thumbnail
我們人類和ChatGPT的對話技巧也是需要學習的,有鑑於此,我想要一天分享一點「和ChatGPT對話的技術」,並且每篇文章長度控制在三分鐘以內,讓大家不會壓力太大,但是又能夠每天成長一點。 針對Generative AI、Foundation Model、Large Language Mode
Thumbnail
為了充分發揮AI的潛力,我們必須深入瞭解其運作模式和思考邏輯,並學會與AI對話的技巧。《ChatGPT提問課,做個懂AI的高效工作者》這本書提供了豐富的實例,讓讀者更容易學會如何提出精準的問題,並享有提問課程的閱讀回饋。這對於想成為懂AI的高效工作者的人來說,是一本值得一看的書。
Thumbnail
AI 相關的內容每天都非常多,有聽過很多人因此感覺到焦慮,怕錯過了最新資訊就會趕不上,這篇內容會跟大家詳細的分享我自己的學習方法和經驗,並且會在最後分享一些我的學習資訊來源。
Thumbnail
儘管ChatGPT討論的熱度逐漸退卻,但GAI的應用卻雨後春筍般持續且迅速崛起。如果你已經試著把AI融入工作流,就會發現不斷一直有新的工具登場,或許解決你一直困擾的步驟又或許用一種你沒想過的方式越過障礙! 身為一名線上課程的教學設計師,我深刻體會到AI技術在教育領域的強大潛力。從課程設計、課程腳本
我們人類和ChatGPT的對話技巧也是需要學習的,有鑑於此,我想要一天分享一點「和ChatGPT對話的技術」,並且每篇文章長度控制在三分鐘以內,讓大家不會壓力太大,但是又能夠每天成長一點。 對於需要精確度、背景和創造力的複雜融合的任務,The Ultimate Template 是無與倫比的,
我們人類和ChatGPT的對話技巧也是需要學習的,有鑑於此,我想要一天分享一點「和ChatGPT對話的技術」,並且每篇文章長度控制在三分鐘以內,讓大家不會壓力太大,但是又能夠每天成長一點。 TOCD 範本體現了簡單性和有效性,此範本以四個基本元素 ( Task、Output、Context
Thumbnail
在現今以及未來的工作中,AI 技能將扮演關鍵角色。為了滿足這一需求,許多頂尖科技公司和大學提供了免費的線上 AI 課程,讓有興趣進修、提升能力的讀者可以選擇適合自己的課程。
我們人類和ChatGPT的對話技巧也是需要學習的,有鑑於此,我想要一天分享一點「和ChatGPT對話的技術」,並且每篇文章長度控制在三分鐘以內,讓大家不會壓力太大,但是又能夠每天成長一點。 每個工匠都珍惜他們的工具,軟體工程師擁有從整合開發環境 (IDE) 到各種工具、除錯器、版本控制系統等等
Thumbnail
最新的AI趨勢讓人眼花撩亂,不知要如何開始學習?本文介紹了作者對AI的使用和體驗,以及各類AI工具以及推薦的選擇。最後強調了AI是一個很好用的工具,可以幫助人們節省時間並提高效率。鼓勵人們保持好奇心,不停止學習,並提出了對健康生活和開心生活的祝福。
Thumbnail
我們人類和ChatGPT的對話技巧也是需要學習的,有鑑於此,我想要一天分享一點「和ChatGPT對話的技術」,並且每篇文章長度控制在三分鐘以內,讓大家不會壓力太大,但是又能夠每天成長一點。 針對Generative AI、Foundation Model、Large Language Mode
Thumbnail
為了充分發揮AI的潛力,我們必須深入瞭解其運作模式和思考邏輯,並學會與AI對話的技巧。《ChatGPT提問課,做個懂AI的高效工作者》這本書提供了豐富的實例,讓讀者更容易學會如何提出精準的問題,並享有提問課程的閱讀回饋。這對於想成為懂AI的高效工作者的人來說,是一本值得一看的書。
Thumbnail
AI 相關的內容每天都非常多,有聽過很多人因此感覺到焦慮,怕錯過了最新資訊就會趕不上,這篇內容會跟大家詳細的分享我自己的學習方法和經驗,並且會在最後分享一些我的學習資訊來源。
Thumbnail
儘管ChatGPT討論的熱度逐漸退卻,但GAI的應用卻雨後春筍般持續且迅速崛起。如果你已經試著把AI融入工作流,就會發現不斷一直有新的工具登場,或許解決你一直困擾的步驟又或許用一種你沒想過的方式越過障礙! 身為一名線上課程的教學設計師,我深刻體會到AI技術在教育領域的強大潛力。從課程設計、課程腳本