什麼是 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 不僅能夠作用在前端,隨著 Node.js 的問世, JavaScript 這個為了網頁而生的語言也可以撰寫後端伺服器上的應用程式。
另外,JavaScript 不止用於開發網頁,框架如 React Native 就允許開發者用 JavaScript 開發 Android 和 iOS 的 mobile app;而 electron js 則可以用來開發 window 和 macOS 的應用程式。
(也來看看:如何在下班後投資自己,學會 JavaScript 最新網站開發技能?)
如何規劃你的 Javascript 學習之路
打好基礎是很重要的,在我們正式進入開發之前,請多利用各種學習資源學習 JavaScript 的基本語法。
其實 JavaScript 的語言結構和其他語言落差不大,他是單一執行緒、事件基礎的非同步程式語言,你所需要知道的不外乎就是變數、作用域、運算子、函數、流程控制、類別、物件等等這些概念,而以上這些已經在許多教學資源上都有提及,因此這裡就不再加以解釋了,相信以下這些Javascript自學免費學習資源,都可以幫助你窺探 JavaScript 這個有趣的語言。
- Codecademy:免費又方便的基礎線上教材,非常推薦新手入門
- MDN Javascript Guide:定期有專業開發者維護的開發指南,對於 JS 中的許多概念都有非常清楚的解釋
-
Eloquent JavaScript: Eloquent JavaScript是一本介紹JavaScript和程式設計的書,這個網站是線上的完整版本。還有提供練習的 CODE SANDBOX
- AC JavaScript入門指南:這篇入門指南帶你從認識 JavaScript 開始,了解 JavaScript 能做到什麼,學習入門的核心概念。
JavaScript 入門核心概念
- Variable & Value 變數與值
- Data Type 資料型別
- Operator 運算子
- Array 陣列
- Object 物件
- 流程控制 if else 條件判斷
- Loop 迴圈
- Function 函式
- JavaScript 物件導向
真的不行的話,找個你有興趣的主題直接進行實作,並愛用Google大神,也會讓你功力瞬間大增!
本次的系列文將會以 JavaScript 這個語言為主軸,簡單介紹進行網路應用程式開發所需要具備的基礎知識,包含 JavaScript 簡介、語法特性以及框架(Framework)的選擇。我們將會在下一篇更深入的討論 JavaScript 的語法特性,以及在學習時你可能會踩到什麼坑,又該如何避開。