Board logo

標題: [轉貼] 【Will保哥】我要成為前端工程師！給 JavaScript 新手的建議與學習資源整理 [打印本頁]
作者: nolookyou    時間: 2018-5-17 18:46     標題: 【Will保哥】我要成為前端工程師！給 JavaScript 新手的建議與學習資源整理

由於論壇貼文有字數限制，以下只能擷取文章部分內容，完整內容請至以下保哥原網址連結：
https://blog.miniasp.com/post/2016/02/02/JavaScript-novice-advice-and-learning-resources.aspx

今年有越來越多企業開始跟我們接洽企業內訓的事，想請我幫他們培訓前端工程師，但你知道一個好的前端工程師絕對不是兩三個月可以養成的，需要多年的努力與磨練才會有點成績。而這幾年可謂前端正夯，有為數不少的人開始大規模的往前端開發移動，而我被問到最多的問題就是「請問 JavaScript 要怎麼學？」或「請問 JavaScript 該怎樣入門？」諸如此類的問題。大家都知道，對於一門程式技術來說，「會寫」與「會教」是兩個截然不同的領域，會寫 JavaScript 的人到處都是，但是會教的人就相對少很多了。我這幾年教授 JavaScript 開發實戰課程已經超過 15 梯次，在將近 500 位學員裡面，我所看到的大部分學員都是對 JavaScript 不勝理解，普遍處於一種一知半解、模糊不清的狀態。另一方面，我在公司內部也帶過不少工程師，總是有人會想學習 JavaScript 但不知道如何入門的情況，這讓我陷入深思，該如何幫助一個人學習 JavaScript 從入門到精通呢？本篇文章將說說我個人的一些想法與建議。

渴望學習

悲劇的開始

大家都好忙

做中學 ( Learning by Doing )

培養自信

會寫的多、看懂的少  
JavaScript 幾乎成為 Web 世界的標準程式語言，無論在你再怎樣不喜歡它，它就是在那裡，就是 Number One，所有瀏覽器唯一支持的程式語言。而這個世界，幾乎所有的軟體都在 Web 化，除了網站之外，像是 Mobile App (Titanium, NativeScript, React Native)、網路遊戲 (Web Game)、穿戴式裝置 (Apple Watch)、… 幾乎都朝著 Web 化的方向前進，你說花點力氣投資在 JavaScript 不對嗎？

偏偏我所看到的是，大部分人都會寫、也能寫 JavaScript，但真正理解 JavaScript 的人卻很少，非常的少。當你開始採用一個完全依賴 JavaScript 的執行環境或框架時 (例如 Node.js、AngularJS、React、... etc.)，如果你還是用一知半解的觀念去開發，你會花上大把大把的時間在除��、鬼打牆、生悶氣、捶心肝、... 等諸如此類的事情上。因為沒有好的觀念支持，你寫不出有品質的程式碼。沒有好的觀念支持，你也無法有效率的團隊合作，整個開發團隊如果有觀念懸殊的成員存在，影響的是全隊的品質與效率，因為一個人的程式出錯，很有可能會影響另一個人的開發效率，因為他所遇到的問題，可能來自於你寫的程式碼。  

學習資源整理
我個人覺得自學成材是非常有可能的，因為我確實親眼目睹短時間內學會 JavaScript 的人，並且完全依賴網路上優質的、免費的學習資源就可以學到非常紮實的觀念，以下我列出一些學習資源給大家參考：

免費線上資源
Eloquent JavaScript
一本開放、免費且非常優質的 JavaScript 線上電子書，曾榮獲 Mozilla 與多人贊助，章節結構清楚明瞭，內容不拖泥帶水，各種格式的電子書、範例程式通通可以線上取得。
Speaking JavaScript: An In-Depth Guide for Programmers
一本寫給已經有其他程式語言基礎的人看的書，從入門到進階可以在短時間內學會許多重要的觀念。
You Don't Know JS (book series)
一系列可免費線上閱讀的 You Don't Know JS 系列電子書，鞭辟入裡的細部觀念解析，是一份非常值得推薦的學習資源。
Programming JavaScript Applications
一本寫給有點 JavaScript 開發經驗的人看的書，內容精簡扼要，也是有網路上知名人物 Eric Elliott 撰寫的書籍，品質有保證！
Train with Programming Challenges/Kata | Codewars
透過闖關的方式練成 JavaScript 達人，這網站在註冊的時候，會先讓你選擇程式語言，如果你選擇 JavaScript 的話，他會問你兩個 JavaScript 的問題，要你在線上改 Code，你必須回答正確才能讓你註冊帳號，所以你適合給已經入門的人練功。註冊成功後，可以點擊 Kata 開始練等級 (kyu)，他有八個困難等級，共有 1,158 關，每一關通過後還可以看到全世界其他人有哪些不同的解法，非常有趣。
Exploring ES6: Upgrade to the next version of JavaScript
一本針對 ECMAScript 6 進行詳細闡述的書，可免費線上觀看，本書的主要對象是已經擁有 ECMAScript 5 開發經驗的 JavaScript 開發人員，完整補充 ECMAScript 6 的重要觀念與特性。
ECMAScript 6 入門
一本開源的 JavaScript 語言教學，主要針對 ECMAScript 6 引入的語法與特性進行解說，內容也相當完整。此書為簡體中文。
JavaScript Promise 迷你書（中文版）
一本由日文版翻譯過來的電子書，專注在 ES6 的 Promise 這個主題上，有非常完整的圖文範例與解說。
中文書籍推薦
JavaScript 大全, 6/e (JavaScript: The Definitive Guide: Activate Your Web Pages, 6/e)
從最基礎的 JavaScript 語言特性講起，非常適合初學者閱讀，只怕你覺得他太厚而中途放棄而已！
Speaking JavaScript｜簡明完整的 JS 精要指南 (Speaking JavaScript)
專為初學 JavaScript 的程式設計師而寫的書，其厚度是 JavaScript 大全的一半而已，本書英文版寫得很好，中譯版當然可以參考，也可以多買英文版中英對照著看！
JavaScript 應用程式開發實務 (Programming JavaScript Applications: Robust Web Architecture with Node, HTML5, and Modern JS Libraries)
用簡單明瞭的方式解說 JavaScript 的重要細節，其厚度是 Speaking JavaScript 的再一半厚度而已，非常適合已入門的 JavaScript 開發人員閱讀。
JavaScript－優良部份 (JavaScript: The Good Parts)
我最喜歡的一本書，僅 164 頁，闡述所有 JavaScript 的優良部分，適合進階的 JavaScript 開發人員閱讀。
你所不知道的 JS｜導讀，型別與文法 (You Don't Know JS: Up & Going)
你所不知道的 JS｜範疇與 Closures，this 與物件原型
知名 You Don't Know JS 系列電子書的中譯版，非常值得入手的好書。
影音互動教學
JavaScript - Code School ( 每月 29 美金 )
Code School 是國內外備受好評的互動式線上學習網站之一，只要不排斥英文，他有文章、影片、互動練習 (真的讓你輸入程式碼練習) 等方式逐步教學，也非常適合初學者自學之用，透過這個網站所設計的學習路徑來學習 JavaScript 可以在短時間學會如何開發！
JavaScript Lessons - Screencast Video Tutorials @eggheadio ( 每月 19.99 美金 )
eggheadio 網站提供高品質的預錄影片，透過專業的講師講解 JavaScript 的各個面向與觀念，只要英文聽力還不錯，也是強烈建議可以花點小錢線上學習，他們每個影片都有完整的文字稿 (Transcript)，也可以順便練英文喔！
JavaScript - Pluralsight ( 每月 29 美金 )
Plualsight 儼然成為全美最大的線上教學平台，擁有 4,500 門課程，其中優質的 JavaScript 教學課程也非常多，從入門到進階通通都有，部分課程有中英文字幕。
學習方法
前陣子我才聽到一句很有哲理的話：「努力不一定會成功，但不努力一定很輕鬆」 XD

學習沒有捷徑，只能靠自身努力，別無他法！

這是一場腦內革命，過程並不輕鬆，但即便不輕鬆，這過程卻可以很有趣，記得要不斷找樂子、獲取成就感，如果可以，找個一起學習的夥伴，否則真你會撐不下去。

以下我來分享一些學習 JavaScript 的方法供新手參考：

找樂子
不要每天都寫 Code，你會彈性疲乏，適度的平衡工作、學習與生活也是很重要的，但是請記得還很菜的時候，要把學習放重一點。
很多人會適時地玩些線上遊戲來轉移彈性疲乏的注意力，有時候解 Bug 解不出來的時候，也可以嘗試一些完全不同的事情，擴展你的思考領域。
請參考這篇文章：為什麼你睡了11個小時還會累? 原來我們的休息方式都錯了
找成就感
培養自信是學習過程中非常重要的一環，不斷接受挑戰，並且一一突破，過程中就會有源源不絕的成就感出現。
站在巨人的肩膀上開發真的很棒，學一些現成的函式庫來用 ( 例如 jQuery, jQuery UI )，會有助於累積成就感，開發起來也會比較有趣！
多找一些跟學習主題相關的資料來看，看懂一個自己原本不懂的資料，本身也是很有成就感的一件事，不過記得要學著分享，分享才能產生快樂。
光是學習 JavaScript 語言特性是很枯燥無味的，如果也能學習一些知名的開發框架，如 AngularJS 或 React/Redux 都不錯，不但有助於解決工作上的難題，更能獲得許多解決問題的成就感。
如果有主題相關的闖關遊戲也可以試試看，例如 Codewars, Code Hunt 之類的。
找學習夥伴
如果有同事、夥伴、朋友也對寫程式有興趣，建議可以組織讀書會、分享會之類的活動。
多參加一些知名的 Facebook 線上社團，可以在上面發問，也可以分享一些自己的所見所得，如果心有餘力，還可以回答別人的問題，過程中你就可以交到不少志同道合的朋友。
JavaScript.tw
Front-End Developers Taiwan
台中前端社群
高雄前端社群
node.js台灣
AngularJS.tw
ReactJS.tw
找機會參加一些實體的社群聚會，畢竟在網路上交流技術還是有點虛，如果可以跟大家見見面，彼此見面交流一些技術心得，會有比較踏實的感覺。
分享學習心得
我強烈建議新手上路可以嘗試撰寫部落格，將所知、所見、所聞都寫下來，不僅僅是留下紀錄而已，更重要的是學習組織自己的思緒，將抽象的概念透過具象的文字表達出來，這對一些觀念的理解來說非常重要。
如果一開始不容易組織大量文字，也可以試著從手稿或筆記開始寫起，累積一些學習心得與想法，但若能公開發表出來，更能促使你將心得與想法整理得更清晰。
你也可以嘗試做些簡報 (Slides)，將一些你學到的重要概念與技巧，透過簡要的版面配置整理出來，並且分享到 SlideShare 或 Speaker Deck 都可以。
手刻作品集
無論你學了多少東西，你如何證明你真的學會了呢？是的，你要留下你的學習紀錄，你要整理你的作品集，一個兩個是不夠的。
你可以參考 Jennifer Dewalt 的作品網站，他從第一天開始學習網頁技術開始，就決定每天寫出一個作品 (網站)，你可以從他的作品集中看出一個人的熱情與努力，相較於第一天與最後一天的作品，你會很驚訝一個人可以在 180 天內學到這麼多東西！
很多人也會透過建立自己的個人網站，放上自己的作品集，用以證明自己會寫網頁，你能做多炫就做多炫，沒有美感的人，到 WrapBootstrap 買個現成的版型也不錯，通常都不貴！
結論
其實無論你想學甚麼程式語言都一樣，這些學習方法與經驗都可以參考，但是我總認為，一個開發人員不可以只學一種程式語言，因為你的思路會受到侷限。但你其實不用刻意去學兩三個語言，你總不能為了學兩三種語言，結果每個都會一點、每個都不太熟，這樣就本末倒置了。無論如何，請先精通某個程式語言再說，從中學習到精隨，當有機會接觸下一個程式語言時，相對的會比較順利，也比較能比較不同語言之間的差異。不過我所看到的許多 JavaScript 新手，很多都是先學過其他程式語言然後才學 JavaScript 的，而這個轉換的過程，他們把其他程式語言的特性與概念，原封不動的套用在 JavaScript 開發上，結果當然是慘不忍睹，開發從頭到尾都是自行腦補的劇情，Bug 滿天飛啊！

最後，我個人還是認為，書要認真讀、Code 要努力寫，這才是學習程式設計的不二法則，祝大家都能維持熱情，開心的成為專業的前端工程師！ ^_^

本文已獲作者保哥於2018/05/17授權轉載，原始連結如下方網址，更多技術資訊可見保哥個人網站及保哥粉絲團
https://blog.miniasp.com/post/2016/02/02/JavaScript-novice-advice-and-learning-resources.aspx
作者: jack661215    時間: 2018-11-21 05:38

感謝您的分享
對我有很大的幫助
謝謝喔



歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)