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

Tom-avatar-img
發佈於JS教學
更新於 發佈於 閱讀時間約 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
留言分享你的想法!
avatar-img
Tom的沙龍
5會員
21內容數
我是一個從科技業轉職的軟體工程師
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
如果你也是從事軟體相關工作的人,一定會遭遇突然需要你去學習一套你不熟悉的程式語言狀況吧,此時你會怎麼做呢? 是趕快去買書來看嗎? 還是趕快找一門程式課來上? 又或者乾脆去找會的同事來教學?
Thumbnail
如果你也是從事軟體相關工作的人,一定會遭遇突然需要你去學習一套你不熟悉的程式語言狀況吧,此時你會怎麼做呢? 是趕快去買書來看嗎? 還是趕快找一門程式課來上? 又或者乾脆去找會的同事來教學?
Thumbnail
此章節旨在介紹Java的基本語法、註解和變數的使用。透過學習,讀者將了解Java程式的基本結構、程式進入點的定義、如何撰寫單行和多行註解,以及如何宣告和初始化變數。
Thumbnail
此章節旨在介紹Java的基本語法、註解和變數的使用。透過學習,讀者將了解Java程式的基本結構、程式進入點的定義、如何撰寫單行和多行註解,以及如何宣告和初始化變數。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News