JavaScript 學習指南(一)--- 從網頁初心者到開發者的必經之路

你現在所在的網站是 ALPHA Camp Blog,而你現在正在閱讀的這篇文章是其中的一個網頁,在這個頁面中你可以單純地看文章,而若是這個網頁只有單純顯示圖文的功能,我們稱它為靜態網頁;而倘若你可以在這個頁面的上方進行搜尋、也可以在右側的區塊留下資料並訂閱電子報,你就開始與這個網站有了互動,你所輸入的資料將會傳遞給伺服器(Server),伺服器將會根據你輸入的內容查找資料庫(Database)並給你相對應的回應,這種需要與伺服器進行溝通的網頁,我們稱之為動態網頁。

而在進行網站開發的層次中,最基礎的就是製作一個靜態網頁,相對應使用的語言為 HTML ;而由於純以 HTML 寫出來的網頁過於簡化,我們通常還會使用 CSS 這個樣式表(Stylesheet)語言來美化我們的靜態網頁。

靜態網頁的下一步

或許,你可能早已經學會了如何利用 HTML/CSS 打造自己的靜態網頁(如果你曾經尋找過學寫程式的線上資源,你會發現 HTML/CSS 幾乎是所有課程共通的入門語言),但是如果我們想要更進一步優化網頁使用者體驗,或者想要在這個靜態網頁上多加一些簡單的功能,放諸四海,有這麼多程式工具可以使用,我們該怎麼開始進行下一步呢?

讓我們來看看以下這個簡單的網頁,很明顯,它是由 HTML/CSS 做成的一個超級粗淺的簡單介紹頁,不過,如果我們希望在這個網頁上多加上一點互動,可以有兩種做法。

一種是,我們透過 CSS 的內建元素,例如 :hover、webkit 對各個元件進行調整設定,從而產生出顏色漸變、陰影或者是一點簡單的動畫特效,例如這樣:當滑鼠移動到連結時,會產生灰色的背景。(請按 result 看示範效果)

但是 CSS 畢竟不是萬靈丹,他能做的東西也有限,而且 CSS 的作用在一次網頁的頁面中只能產生一次,因此,如果我們希望在網頁中產生動態效果,而且讓這個事件可以「反覆產生」的話,在進行大專案的時候,幫助我們有效追蹤和管理每一次的事件時,我們就可以考慮另一種做法:引入 JavaScript。(關於 CSS 和 JavaScript的效能比較,你還可以參考 Google 開發者論壇的這篇文章,內有更詳細的說明)

什麼是 JavaScript?

JavaScript 是以客戶端(Client-side)為主的語言,他能在瀏覽器上發揮許多功用,可以處理網頁上的所有動作行為,並能同時支援不同的瀏覽器,你可以即時在瀏覽器上看到你所寫入的編譯結果,不需要再重新整理網頁就能看見動態效果,可以增進使用者體驗。

JavaScript 支援的範圍非常廣泛,從網頁瀏覽器、伺服器端、手機、遊戲、VR 等處皆可以看見他的蹤影,但即使是這樣,每一種程式語言都有它獨到之處,目前也還沒有一個程式語言能夠成為所謂的「王者」或「主流」,Javascript 在網頁的表現仍是最好的,而在其他應用上,目前其實還無法超越其他程式語言。

目前常見的實務做法上,你可以使用 jQuery 這個強大的函式庫,或者是直接套用許多開發者已經做好的套件來完成,常用的小工具例如 scroll nav-bar ,可以讓使用者按下瀏覽列的同時,產生了滾動的畫面效果。

讓我們來看看加上 scroll nav-bar 的網頁效果如何:(請按 result 看示範效果)

是不是讓整個使用者經驗更為流暢呢?

為什麼要學 JavaScript?為什麼大家都在瘋 JavaScript?

在上一個段落,我們已經知道了 JavaScript 能為你的網頁增添動態感,除此之外,JavaScript 還能做些什麼?

其實,現在數位行銷人必學的 Google Analytics、SEO、Google Tag Manager 等工具,都大量仰賴 JavaScript 作為主要的程式語言媒介,因此不管你未來是否要成為前端工程師,對於 JavaScript 有一定的了解,在這個數位時代可能都是必要的技能。

但如果我們想要再往下挖掘網站開發的世界,只停留在網頁的動態、行銷工具追蹤碼的埋設是不夠的,我們還會需要前端工程師與後端工程師之間的配合,才能把整個網站的架構建立起來。

在這裡簡單提及一下前後端的工作分配,簡略來說,前端工程師處理客戶端所發出的需求,後端工程師則透過伺服器的資料庫回應相對的資訊。(關於客戶端與伺服器端的關係,你可以參考 Benson 的這篇文章)

而實際上在進行網站開發時,若進到處理使用者操作介面、處理客戶請求的層次時,基本上就是必須透過 JavaScript 作為溝通的主要語言,這也是為什麼,在前後端分工愈加鮮明的今日,JavaScript 的技能越顯重要的原因之一;而近年來發展的後端框架 Node.js,則將 JavaScript 的發展推向新的層次,它不再只是專屬前端的語言,也就是說,你將可以只用同一種語言就完成前後端的網站工程,這個部分我們後幾篇會再詳談。

如何規劃你的 Javascript 學習之路

打好基礎是很重要的,在我們正式進入開發之前,請多利用各種學習資源學習 JavaScript 的基本語法。

其實 JavaScript 的語言結構和其他語言落差不大,他是單一執行緒、事件基礎的非同步程式語言,你所需要知道的不外乎就是變數、作用域、運算子、函數、流程控制、類別、物件等等這些概念,而以上這些已經在許多教學資源上都有提及,因此這裡就不再加以解釋了,相信以下這些學習資源,都可以幫助你窺探 JavaScript 這個有趣的語言。

  • Codecademy:免費又方便的基礎線上教材,非常推薦新手入門
  • MDN Javascript Guide:定期有專業開發者維護的開發指南,對於 JS 中的許多概念都有非常清楚的解釋
  • jQuery:目前最常用的 JavaScript 函式庫,可以幫助你更簡單的實現網頁上的資料互動及事件處理方法,同時也簡化了許多 AJAX 的操作方法(關於 AJAX 的方法,你可以參考這裡
  • JS Fiddle / CodePen :可以自由且即時地練習小程式,同時也可以觀摩上面大大們的作品(很多的學習一開始都是從模仿開始的!)

真的不行的話,找個你有興趣的主題直接進行實作,並愛用估狗大神,也會讓你功力瞬間大增!

本次的系列文將會以 JavaScript 這個語言為主軸,簡單介紹進行網路應用程式開發所需要具備的基礎知識,包含 JavaScript 簡介、語法特性以及框架(Framework)的選擇。我們將會在下一篇更深入的討論 JavaScript 的語法特性,以及在學習時你可能會踩到什麼坑,又該如何避開。如果有特別想了解的主題或有任何問題,也歡迎在下面留言!