每天 10 分鐘,你也能學會寫程式!JavaScript 入門教學與學習地圖

更新 發佈閱讀 4 分鐘

常常看到新聞這樣說:「8歲小孩,使用Cousor 也可以寫出小遊戲!」。 AI已經可以寫程式了,軟體工程師要失業了...之類的新聞。

如果是現階段,我覺得還有點遠。但未來的有一天我覺得應該會喔!但在那一天的來臨之前,我們可以善用AI讓你學習寫程式,甚至開發過程更快更沒有摩擦力。要懂著運用工具。

既然AI都會寫程式,那我們為什麼要學呢?

雖然AI真的會寫,但寫的都比較簡單一點,如果需求和系統比較龐大,AI其實做不太出來,而且會一直和你鬼打牆。但如果你好好的指引他,拆分指令任務或給他關鍵字誘導他,他給你的結果會讓你滿意。不過這一切的基礎還是要你先會寫程式才有辦法指引AI。

每天十分鐘,你也會寫程式

我自己學習寫程式的過程是先會做,先可以動之後再去理解。以實作為優先,至於原理和理解為什麼,以後有需要再去研究吧。畢竟學習一個新事物的時候,先做出來東西有成就感比較重要。學習基本 Javascript 常用的語法與概念並不難,在這裡我會拆分在每個單元控制在十分鐘左右的閱讀和實作。不會講太難的理論或複雜的寫法部分,盡量使用有趣的例子與實作讓大家一起動手做。在不知不覺中學會寫程式。

學習地圖

為了避免大家不知道自己學了也不知道這些東西可以用在哪最後可以幹嘛,我把整個基本Javascript 教學課程畫成了一個 Road Map。大家可以大概看一下目前的課程是在哪個階段,後面還有哪些。

除了圖片以外,我把這個Road map做成網頁,可以快速點擊搜尋單元。會跟著文章更新一起更新這個map。

大綱

  1. 環境基礎設定:使用Codspace 環境使用設定與程式碼撰寫
    - Hello Word 
    - Html 執行與 Copilot 使用
  2. 網頁基礎概念:
    - Html,CSS,Javascript 關係說明
    - CSS 實作練習
    - JavaScript 實作
  3. 基礎語法
    - 變數介紹與 let/const 差異
    - 資料型別概觀
    - 運算子應用(加減乘除、比較、邏輯)
    - 函式
    - 作用域
    - 運算子應用
    - 箭頭函式與簡寫技巧
  4. 資料與操作
    - 陣列
    - 物件
    - Json 檔案
    - if / else 條件控制
    - switch
    - 迴圈與陣列操作
  5. 瀏覽器互動
    - DOM 操作
    - 搜尋DOM
    - localStorage
    - 事件監聽與互動
    - 表單與驗證
  6. 畫布
    - Canvas
    - SVG
    - 動畫
  7. 取得資料
    - Fetch 資料
    - Promise 與 async/await
    - 模組化思維與檔案拆分
  8. 實作
    - 實作專案一
    - 實作專案二
  9. 遊戲實作
    - 小恐龍遊戲
    - 飛機射擊遊戲
    - 貪食蛇

學習之後呢

如果你有什麼想做的專案或東西,可以用程式解決的話。那是最好的,你可以試著做做看。如果你是想轉職,可能還需要在學更多...。實作更多的專案。

之後會再看看要不要再寫 和後端相關的,或是 React框架。

總之,先開始吧!跟著走才知道你可以走多遠。

每天十分鐘,你也可以學會寫程式!

留言
avatar-img
湯編驛-湯姆實驗室
39會員
82內容數
這邊會放一些我自己的分享內容,實驗測試還有做的MVP介紹
你可能也想看
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
此章節旨在介紹Java的基本語法、註解和變數的使用。透過學習,讀者將了解Java程式的基本結構、程式進入點的定義、如何撰寫單行和多行註解,以及如何宣告和初始化變數。
Thumbnail
此章節旨在介紹Java的基本語法、註解和變數的使用。透過學習,讀者將了解Java程式的基本結構、程式進入點的定義、如何撰寫單行和多行註解,以及如何宣告和初始化變數。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
如果你也是從事軟體相關工作的人,一定會遭遇突然需要你去學習一套你不熟悉的程式語言狀況吧,此時你會怎麼做呢? 是趕快去買書來看嗎? 還是趕快找一門程式課來上? 又或者乾脆去找會的同事來教學?
Thumbnail
如果你也是從事軟體相關工作的人,一定會遭遇突然需要你去學習一套你不熟悉的程式語言狀況吧,此時你會怎麼做呢? 是趕快去買書來看嗎? 還是趕快找一門程式課來上? 又或者乾脆去找會的同事來教學?
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
學習程式語言是一個不容易的過程,但有效的學習方法可以幫助你克服挫折,這篇文章分享了一個程式設計師的學習心得以及一些建議,包括課後實作、短期學習、跟別人比較等注意事項,同時提供了一些相關的教學資源。
Thumbnail
學習程式語言是一個不容易的過程,但有效的學習方法可以幫助你克服挫折,這篇文章分享了一個程式設計師的學習心得以及一些建議,包括課後實作、短期學習、跟別人比較等注意事項,同時提供了一些相關的教學資源。
Thumbnail
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News