2-0

JavaScript與前端程式設計入門自學參考

想要自學JavaScript與前端程式設計,網路上有很多資源,應該先學哪些,也是見人見智。要做好前端程式設計的工作,我認為至少應該瞭解JavaScript、資料結構與演算法、網路協定、HTML、CSS、DOM API和RWD這幾個領域。以下介紹內容與所列資源僅代表個人看法,歡迎大家補充。


Photo credit Hernán Piñera@flickr

1. JavaScript基礎

JavaScript的語法,風格與Java、C/C++類似,若是你有學過這些程式語言,上手JavaScript應該很快。如果JavaScript是你的第一門程式語言,那麼可能要花多一點時間學習。基礎的JavaScript學習,至少應包括這些:

  • Data types, control flow, loops
  • Functions, operators, error handling
  • String, Date, Math
  • Arrays, objects
  • Regular expressions

對初學者而言,regular expression(正規表示式)是我認為比較難的部份。其實regular expression本身就是個小型語言,專門用來處理字串的比對、替換。熟悉regular expression的人,可以用一行正規表示式完成幾十行程式才能做到的事情,功能強大。而且不同程式語言的regular expression語法大同小異,將來不用重覆再學。

前幾天陳鍾誠老師剛完成一本「專為中學生寫的JavaScript程式書」,如果JavaScript是你的第一門程式語言,這本電子書可能會對你有幫助。不過請記得,它是以Node.js為學習範例,所以有些東西在前端瀏覽器是沒有的(例如檔案存取、資料庫、http模組……等等)。

2. 資料結構與演算法

資料結構與演算法是資訊相關科系的必修課,自學程式設計的人,最好也可以學一下,因為我認為這是軟體開發的基礎之一。基本的資料結構與演算法學習,至少包括這些:

  • 資料結構
    • 陣列(array)、串列(list)、堆疊(stack)、佇列(queue)
    • 樹(tree)、二元樹(binary tree)、雜湊表(hash table)
  • 演算法
    • 對以上資料結構的各項操作
    • 排序(sort):至少搞懂3、4種基本的排序演算法,例如bubble sort、quick sort、merge sort等
    • 搜尋(search):depth-first-search、breadth-first-search、binary search等
    • 其它:迭代(iteration)、遞迴(recursive)、分治法(divide and conquer)、時間/空間複雜度的基本概念(big O)等

關於資料結構與演算法入門,陳鐘誠老師有一份整理得很好的材料:「用十分鐘學會《資料結構、演算法和計算理論》」。十分鐘學會可能有點難,不過這份材料可以減少你不少摸索的時間。觀念學會之後,再運用剛上手的JavaScript語言,演練這些演算法及資料結構,一舉兩得。

3. 網路協定

在我的另一篇文章「程式員求生指南:關於寫程式的二三事」中,我提到網路協定也是程式員基本功之一,理由就不在這裡重覆。基礎的網路協定,包括OSI 7-layer model、TCP/IP、DNS、HTTP等等:

  • OSI 7層模型:這屬於知識性的內容,大致看一下,了解每一層的作用就行了。
  • TCP/IP:TCP架在IP協定之上,兩者都是網路日常運作的重要協定。UDP也是架在IP協定上,可以順便了解一下。
  • DNS:大概知道DNS裡的幾種常見record(A、CNAME、NS、MX等),primary/secondary DNS的角色,以及從domain name解析到IP的過程,就可以了。
  • HTTP:HTTP與軟體開發人員的關係很密切,在以上這些網路協定裡,值得花比較多的時間去學習。例如:
    • HTTP methods(GET、POST……)
    • HTTP status code(2xx、3xx、4xx……)
    • HTTP headers(Content-Length、User-Agent、Cache-Control、Cookie/Set-Cookie……)

(我之前寫的一篇文章「簡明RESTful API設計要點」,講的雖然是RESTful API設計,但也列了許多HTTP的要點,可以參考一下。)

如果你在自學這些網路協定的過程中,感到一個頭兩個大,不用擔心,這是正常現象。看不懂可以先擱一邊,以後回頭再找時間看就行了。入門初學也不需要掌握得很深入,大致瞭解即可。(例如HTTP status code知道一個大概就行了,不需要每個status code都瞭如指掌。)

4. HTML

HTML在前端的技術學習裡,算是相對容易的部份。隨便打開一個網頁(例如Mozilla Developer Network「給開發者的網頁技術文件」),用瀏覽器看看裡面的HTML原始碼長甚麼樣子,就會有點感覺了。基礎的HTML學習,大致上包括這些:

  • Text, formatting, lists, tables
  • Forms, frames, header elements
  • HTML5

HTML學習的資源很多,像前面提到的MDN(Mozilla Developer Network)網站,也是其中一個。

5. CSS基礎

CSS在前端開發裡,佔有非常重要的角色。一般的看法是:HTML-內容,CSS-外觀,JavaScript-動作。比起HTML,CSS本身帶有程式碼的特性,是我認為前端專案中最容易搞壞、最難維護的一塊。基礎的CSS學習包括:

  • Text styles, colors, lists, boxes
  • CSS selectors
  • CSS specificity
  • Psuedo-classes, psuedo-elements
  • Floats, positioning

對初學者而言,CSS positioning可能有點複雜,這個網站「Learn CSS Positioning in Ten Steps」寫得很好,大家可以參考看看。(補充說明:我發現這個網站在Chrome瀏覽器有些小bug,每個步驟的連結要點第2次才會顯示正確的positioning效果。)

6. DOM API

網頁的互動性,離不開DOM的操作。DOM(Document Object Model)是一種表示網頁內容的模型,而JavaScript可以透過DOM API新增、修改、刪除網頁上的元件。DOM API的學習,大致上包括:

  • DOM selector
  • DOM manipulation
  • DOM event

最簡單的例子,就是用像document.getElementById(id)getElementsByName(name)這類DOM selector,取得網頁上的某個元件,然後修改它的內容、或為它加上event handler等等。

除了用瀏覽器本身的HTML DOM,jQuery也是一個被普遍用來操作DOM的工具。早期的瀏覽器由於DOM API不統一,採用jQuery這類工具有其必要性,但現在已經沒有這個問題了。是否採用jQuery,取決於專案需求。對初學者而言,我個人建議先學會HTML DOM,畢竟這是W3C標準。如果專案有用到jQuery,再學jQuery即可。

順便提一下,另一個很多人用jQuery的理由,是$.ajax很好用。如果你不用jQuery而需要做Ajax呼叫(也就是在背景向伺服器發出API請求),可以考慮用fetchfetch是取代XMLHttpRequest的新標準,很多瀏覽器都已經支援了,而且可以用fetch polyfill解決瀏覽器支援性的問題。

7. RWD

由於行動裝置的普及,RWD(Responsive Web Design,響應式網頁設計)已成為前端工程師的必備技能了。如果懂CSS,RWD其實並不複雜。除了在HTML header加上類似<meta name="viewport" content="width=device-width, initial-scale=1">的一行宣告,其它RWD的實現都與CSS有關,包括:

  • Fluid grid
  • Flexible image
  • Media queries

最原始的RWD文章,是Ethan Marcotte的「Responsive Web Design」,但現在介紹RWD的文章非常多。另外,很多前端專案採用Bootstrap框架,Bootstrap本身也支援RWD,不過RWD的原理還是要會,畢竟總有自己來的時候。

其它資源

希望以上的說明,對大家自學JavaScript與前端程式設計有些幫助!如有其它好的初學者資源,也請各路高手幫忙補充。

2筆討論 回應文章
Michael_LI3年(更新)

我發現 簡明RESTful API設計要點 的 超鏈接 失效了

https://tw.beta.twincl.com/~acw/*g663

之前的網址打錯了,已修正。謝謝!