如果您對網頁開發感興趣,那麼掌握JavaScript(JS)是必要的。JavaScript 是一種多用途的程式語言,幾乎在所有的網頁上都能找到它的蹤跡。在本文中,我們將從基礎入門,進一步了解 JavaScript 的主要用途和核心概念。
什麼是 JavaScript?
目前常見的實務做法上,你可以使用 jQuery 這個強大的函式庫,或者是直接套用許多開發者已經做好的套件來完成,常用的小工具例如 scroll nav-bar ,可以讓使用者按下瀏覽列的同時,產生了滾動的畫面效果。
JavaScript 是一種開放的網路標準語言,用於建立互動的網頁。其功能不僅僅是建立動態網頁,現在 JavaScript 更被廣泛的應用於網頁外的環境,如伺服器端(Node.js)、行動應用(React Native)等。
為什麼要學 JavaScript?
在上一個段落,我們已經知道了 JavaScript 能為你的網頁增添動態感,除此之外,JavaScript 還能做些什麼?
其實,現在數位行銷人必學的 Google Analytics、SEO、Google Tag Manager 等工具,都大量仰賴 JavaScript 作為主要的程式語言媒介,因此不管你未來是否要成為前端工程師,對於 JavaScript 有一定的了解,在這個數位時代可能都是必要的技能。
但如果我們想要再往下挖掘網站開發的世界,只停留在網頁的動態、行銷工具追蹤碼的埋設是不夠的,我們還會需要前端工程師與後端工程師之間的配合,才能把整個網站的架構建立起來。
在這裡簡單提及一下前後端的工作分配,簡略來說,前端工程師處理客戶端所發出的需求,後端工程師則透過伺服器的資料庫回應相對的資訊。(關於客戶端與伺服器端的關係,你可以參考 Benson 的這篇文章)
而實際上在進行網站開發時,若進到處理使用者操作介面、處理客戶請求的層次時,基本上就是必須透過 JavaScript 作為溝通的主要語言,這也是為什麼,在前後端分工愈加鮮明的今日,JavaScript 的技能越顯重要的原因之一;而近年來發展的後端框架 Node.js,則將 JavaScript 的發展推向新的層次,它不再只是專屬前端的語言,也就是說,你將可以只用同一種語言就完成前後端的網站工程。
JavaScript 的用途
JavaScript 的主要用途是增強網頁互動性。以下是 JavaScript 在網頁開發中的一些主要應用:
- 動態改變網頁內容
- 表單驗證
- 用戶互動(例如滑動效果、彈出窗口)
- 網頁遊戲
- 網路應用程序,如 Google 地圖
除此之外,JavaScript 的用途已經遠遠超出了網頁開發的範疇。比如 Node.js 讓我們可以在服務器上使用 JavaScript,React Native 則允許我們使用 JavaScript 來開發原生手機應用。
如何規劃你的 Javascript 學習之路
打好基礎是很重要的,在我們正式進入開發之前,請多利用各種學習資源學習 JavaScript 的基本語法。
其實 JavaScript 的語言結構和其他語言落差不大,他是單一執行緒、事件基礎的非同步程式語言,你所需要知道的不外乎就是變數、作用域、運算子、函數、流程控制、類別、物件等等這些概念,而以上這些已經在許多教學資源上都有提及,因此這裡就不再加以解釋了,相信以下這些Javascript自學免費學習資源,都可以幫助你窺探 JavaScript 這個有趣的語言。
- Codecademy:免費又方便的基礎線上教材,非常推薦新手入門
- MDN Javascript Guide:定期有專業開發者維護的開發指南,對於 JS 中的許多概念都有非常清楚的解釋
-
Eloquent JavaScript: Eloquent JavaScript是一本介紹JavaScript和程式設計的書,這個網站是線上的完整版本。還有提供練習的 CODE SANDBOX
- AC JavaScript入門指南:這篇入門指南帶你從認識 JavaScript 開始,了解 JavaScript 能做到什麼,學習入門的核心概念。
JavaScript 入門核心概念
JavaScript 有一些核心概念,進一步理解這些概念對於深入學習 JavaScript 非常重要:
- 原型和原型鏈:在 JavaScript 中,每個物件都有一個與之關聯的原型(prototype),物件可以繼承原型上的屬性和方法。
- 異步處理和回調:JavaScript 是一種單線程語言,異步處理能夠使我們在執行耗時操作(如網路請求)時,不阻塞主線程。
- 閉包(Closure):閉包是一種函數與其相關的參照環境綁定在一起形成的特殊物件。閉包使得函數可以訪問其定義時所在的作用域中的變數,即使那個作用域已經消失。
- Promises 和 async/await:Promise 是一種讓我們更容易處理異步操作(如網路請求)的模式。Async/await 是建立在 Promise 之上的,使得我們的異步代碼看起來更像同步代碼。
JavaScript 是一種功能強大且靈活的語言,學習 JavaScript 不僅可以讓您建立出互動豐富的網頁,還能開發服務器端應用、桌面應用、甚至是手機應用。希望本文可以作為您學習 JavaScript 旅程的起點。
- Variable & Value 變數與值
- Data Type 資料型別
- Operator 運算子
- Array 陣列
- Object 物件
- 流程控制 if else 條件判斷
- Loop 迴圈
- Function 函式
- JavaScript 物件導向
真的不行的話,找個你有興趣的主題直接進行實作,並愛用Google大神,也會讓你功力瞬間大增!
本次的系列文將會以 JavaScript 這個語言為主軸,簡單介紹進行網路應用程式開發所需要具備的基礎知識,包含 JavaScript 簡介、語法特性以及框架(Framework)的選擇。我們將會在下一篇更深入的討論 JavaScript 的語法特性,以及在學習時你可能會踩到什麼坑,又該如何避開。