JavaScript 教學:從入門到了解 JS 用途和核心概念

如果您對網頁開發感興趣,那麼掌握JavaScript(JS)是必要的。JavaScript 是一種多用途的程式語言,幾乎在所有的網頁上都能找到它的蹤跡。在本文中,我們將從基礎入門,進一步了解 JavaScript 的主要用途和核心概念。

什麼是 JavaScript?

JavaScript 是以客戶端(Client-side)為主的語言,他能在瀏覽器上發揮許多功用,可以處理網頁上的所有動作行為,並能同時支援不同的瀏覽器,你可以即時在瀏覽器上看到你所寫入的編譯結果,不需要再重新整理網頁就能看見動態效果,可以增進使用者體驗。
JavaScript 支援的範圍非常廣泛,從網頁瀏覽器、伺服器端、手機、遊戲、VR 等處皆可以看見他的蹤影,但即使是這樣,每一種程式語言都有它獨到之處,目前也還沒有一個程式語言能夠成為所謂的「王者」或「主流」,Javascript 在網頁的表現仍是最好的,而在其他應用上,目前其實還無法超越其他程式語言。目前常見的實務做法上,你可以使用 jQuery 這個強大的函式庫,或者是直接套用許多開發者已經做好的套件來完成,常用的小工具例如 scroll nav-bar ,可以讓使用者按下瀏覽列的同時,產生了滾動的畫面效果。

目前常見的實務做法上,你可以使用 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自學免費學習資源,都可以幫助你窺探 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 旅程的起點。

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

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

網頁設計程式入門,學習用HTML/CSS/JavaScript實際打造網頁

3分鐘小測驗,找到你的 JavaScript 自學入口