什麼是 JavaScript?

JavaScript 是一種開發人員用來建立互動式網頁的程式設計語言。從重新整理社交媒體饋送到顯示動畫與互動式地圖,JavaScript 的功能可以提升使用者體驗。JavaScript 作為用戶端指令碼語言,是全球資訊網的核心技術之一。舉例來說,當瀏覽網際網路時,您只要在網頁上看見浮動切換項目影像,一按即顯示的下拉式功能表,或是動態變更的元件色彩,那些都是由 JavaScript 呈現的效果。

JavaScript 有什麼作用?

從歷史觀點來看,網頁是靜態的,類似於書中的頁面。靜態頁面主要以固定配置顯示資訊,並未滿足我們現在對現代網站的期望。JavaScript 作為一種瀏覽器端技術出現,讓 Web 應用程式更具動態性。使用 JavaScript,瀏覽器可以回應使用者互動,以及變更網頁上的內容配置。

隨著語言的成熟,JavaScript 開發人員建立了程式庫、架構和程式設計實務,並開始在 Web 瀏覽器之外使用。如今,您可以將 JavaScript 用於用戶端和伺服器端開發。我們在以下小節中提供了一些常見案例:

從歷史觀點來看,網頁是靜態的,類似於書中的頁面。靜態頁面主要以固定配置顯示資訊,並未滿足我們現在對現代網站的期望。JavaScript 作為一種瀏覽器端技術出現,讓 Web 應用程式更具動態性。使用 JavaScript,瀏覽器可以回應使用者互動,以及變更網頁上的內容配置。

隨著語言的成熟,JavaScript 開發人員建立了程式庫、架構和程式設計實務,並開始在 Web 瀏覽器之外使用。如今,您可以將 JavaScript 用於用戶端和伺服器端開發。我們在以下小節中提供了一些常見案例:

 

JavaScript 如何運作?

所有程式設計語言的運作方式都是將類似英文的語法翻譯成機器程式碼,作業系統將隨即執行。JavaScript 被廣泛地歸類為指令碼語言或解譯語言。JavaScript 程式碼經過解譯,即由 JavaScript 引擎直接翻譯成基礎機器語言程式碼。對於其他程式設計語言,編譯器在單獨的步驟中將整個程式碼編譯為機器程式碼。因此,所有指令碼語言都是程式設計語言,但並非所有程式設計語言都是指令碼語言。

JavaScript 引擎

JavaScript 引擎是執行 JavaScript 程式碼的電腦程式。最初的 JavaScript 引擎只是解譯器,但所有現代引擎都使用即時或執行時間編譯來提高效能。

用戶端 JavaScript

用戶端 JavaScript 是指 JavaScript 在您的瀏覽器中的運作方式。在這種情況下,JavaScript 引擎位於瀏覽器程式碼中。所有主要的 Web 瀏覽器都帶有自己的內建 JavaScript 引擎。

Web 應用程式開發人員撰寫的 JavaScript 程式碼具有與各種事件關聯的不同功能,例如滑鼠點選或滑鼠懸停。這些函數會變更為 HTML 和 CSS。

以下是用戶端 JavaScript 運作方式的概述:

1.   瀏覽器會在您存取網頁時載入。

2.   在載入期間,瀏覽器會將頁面及其所有元素 (如按鈕、標籤和下拉式選框) 轉換為稱為文件物件模型 (DOM) 的資料結構。

3.   瀏覽器的 JavaScript 引擎會將 JavaScript 程式碼轉換為位元組程式碼。此程式碼是 JavaScript 語法與機器之間的中介。

4.   不同的事件 (如滑鼠點選按鈕) 會觸發關聯 JavaScript 程式碼區塊的執行。引擎隨後會解譯位元組程式碼並對 DOM 做出變更。

5.   瀏覽器會顯示新的 DOM。

伺服器端 JavaScript

伺服器端 JavaScript 是指在後端伺服器邏輯中使用編碼語言。在這種情況下,JavaScript 引擎直接位於伺服器上。伺服器端 JavaScript 函數可以存取資料庫,執行不同的邏輯作業,並回應伺服器作業系統觸發的各種事件。伺服器端指令碼的主要優勢是,您可以根據您的要求、存取權限和來自網站的資訊請求來高度自訂網站回應。

用戶端與伺服器端

動態一詞既描述了用戶端 JavaScript,也描述了伺服器端 JavaScript。動態行為是視需更新網頁顯示以產生新內容的能力。用戶端和伺服器端 JavaScript 的區別在於其產生新內容的方式。伺服器端程式碼透過使用應用程式邏輯和修改資料庫中的資料,來動態產生新內容。另一方面,用戶端 JavaScript 透過利用使用者介面邏輯,並修改用戶端上已有的網頁內容,在瀏覽器內部動態產生新內容。這兩種情況下的含義略有不同,但相互關聯,兩種方法共同作用可增強使用者體驗。

除了動態功能的實現之外,兩種 JavaScript 用途的另一個區別在於程式碼可存取的資源。在用戶端,瀏覽器控制 JavaScript 的執行時間環境。程式碼只能存取瀏覽器允許其存取的資源。例如,除非您在下載按鈕上按一下,否則無法將內容寫入您的硬碟。另一方面,伺服器端函數可視需存取伺服器電腦的所有資源。

什麼是 JavaScript 程式庫?

JavaScript 程式庫是 Web 開發人員可重複使用,以執行標準 JavaScript 函數之預先撰寫的程式碼片段集合。JavaScript 程式庫程式碼會視需插入到專案的其餘程式碼中。如果您將 JavaScript 應用程式的程式碼視為一所房子,則 JavaScript 程式庫就像是現成的家具,開發人員可以將其用於改善房子的功能。

以下是 JavaScript 程式庫的一些常見用途:

資料視覺化

資料視覺化對於使用者檢視統計資訊至關重要,例如在管理面板、儀表板和效能指標中。

Chart.js、ApexCharts 和 Algolia Places 等程式庫具有內建函數,您可以用於建立可在圖表和地圖中顯示資料的 Web 應用程式。

DOM 操作

您可以使用 jQuery 和 Umbrella JS 等程式庫,讓 Web 應用程式開發變得輕鬆簡單,因為這些程式庫提供了標準網站功能 (如選單動畫、圖庫、按鈕、燈箱等) 的程式碼。

表單

所有 Web 開發均利用表單讓網站訪客可聯絡某人、訂購產品和註冊活動。某些 JavaScript 程式庫 (如 wForms、LiveValidation、Validanguage 和 qForms) 簡化了表單功能,包括表單驗證、配置、條件和轉換。

數學和文字函數

許多 Web 應用程式必須求解數學方程式,並處理日期、時間和文字。相較於將所有此類請求傳送至伺服器,在用戶端上處理一些請求更有效。Web 開發人員使用 JavaScript 程式庫 (如 Date.js、Sylvester 和 JavaScript URL 程式庫) 來執行此操作

什麼是 JavaScript 架構?

與 JavaScript 程式庫一樣,JavaScript 架構是預先撰寫的程式碼片段集合,其執行不同的函數並且可以重複使用。然而,JavaScript 程式庫是隨需使用的專用工具,而 JavaScript 架構則是協助塑造和整理任何 Web 應用程式的完整工具集。如果您將 JavaScript 應用程式的程式碼視為一座房子,則 JavaScript 架構是用於建造房子的藍圖。

以下是 JavaScript 架構的一些範例使用案例:

Web 與行動應用程式開發

AngularJS 是一種架構,可簡化 Web 應用程式 (如電子商務應用程式、即時應用程式和影片應用程式) 的開發和測試。React Native 則是另一種架構,可支援原生呈現的 iOS 和 Android 行動應用程式開發。

回應式 Web 開發

回應式網站可在任何裝置上提供一致的使用者體驗。例如,行動裝置和平板電腦的螢幕比桌上型電腦和筆記型電腦的螢幕小。您希望網站即使在較小的螢幕上,也能準確地顯示和呈現資料,而無需切斷網站的末端。使用 Bootstrap 和 Ember.js 等架構,開發人員可從回應式設計中獲益,並在不同平台上輕鬆自訂網站的外觀。

伺服器端應用程式開發

Node.js 是一種伺服器端開放原始碼 JavaScript 架構,可在瀏覽器外執行 JavaScript 程式碼。開發人員使用此架構來建置可擴展、快速且可靠的網路型伺服器端應用程式。這種架構可以處理 HTTP 請求和資料串流、支援檔案系統,並同時管理多個後端程序。

什麼是 HTML 和 CSS?

超文字標記語言 (HTML) 和階層式樣式表 (CSS) 是開發人員在前端開發中使用的另外兩種程式設計語言。HTML 是大多數網頁的基本建置區塊。所有的段落、區段、影像、標題和文字都使用 HTML 撰寫。內容按照 HTML 撰寫的順序出現在網站上。

CSS 是一種樣式規則語言,用於將樣式套用至我們的 HTML 內容。您可以將其用於設計網站元素,如背景顏色、字型、欄和邊框。

HTML、CSS 與AWS 開發套件

這三種語言協同作業,可在任何網站上打造良好的使用者體驗。雖然 HTML 和 CSS 主要處理靜態內容,但其也可與用戶端 JavaScript 程式碼整合,以動態更新內容。

例如,HTML 頁面上的指令碼程式碼區塊中可以包含 JavaScript。當 HTML 頁面在瀏覽器中載入時,瀏覽器可以同時處理 HTML 和內部 JavaScript 程式碼。
 

JavaScript 具有哪些優勢?

易於學習和使用

JavaScript 的語法受 Java 程式設計語言的啟發,易於學習和編碼。開發人員幾乎在每個網站和行動應用程式中都使用 JavaScript 來撰寫用戶端指令碼。在過去十年間,Node.js 在後端編碼方面也獲得了極大的普及。許多主要的串流媒體和影片平台都使用 Node.js 進行編碼。

取得平台獨立性

與其他程式設計語言不同,您可以將 JavaScript 插入任何網頁,並將其與許多其他 Web 開發架構和語言搭配使用。撰寫完成後,可在任何機器上執行 JavaScript 程式碼。因此,JavaScript 讓應用程式開發平台具有獨立性。

減少伺服器負載

您可以使用 JavaScript 來減少伺服器負載和網路擁塞,因為它可以執行邏輯作業,並在用戶端本身完成大量伺服器工作。例如,填寫註冊表單的程序。JavaScript 會快速檢查您是否在手機欄位輸入了 10 位數字。如果將這些請求傳送至伺服器,您的頁面會針對每個錯誤重新載入,從而讓註冊程序變得非常緩慢和乏味。

改善使用者介面

JavaScript 可建立簡明的網站,便於尋找和處理複雜的資訊。開發人員運用 JavaScript 來擴展功能和可讀性,並使網站使用者互動更加高效。

支援並行

JavaScript 可並行執行多個不同的指令集。在後端,Node.js 可操作和處理高度擴展的伺服器回應,而不會取用相同數量的頻寬。

JavaScript 有哪些限制?

程式設計語言使用變數,作為實際資料值的預留位置。例如,在一個程式碼區塊中,開發人員可以撰寫 x=5 和 y=x+1。當程式碼執行時,電腦會自動將 x 和 y 分別變更為 5 和 6,以對其執行函數。資料可以是各種類型,如文字串、數字或日期。因此,大多數程式設計語言都允許您定義變數類型。定義變數類型後,不會發生變更;您無法將數字存放在字串變數中。

例如,如果您告訴程式 x 和 y 是數字,然後執行 x+y 運算,電腦會知道需要兩個數字並將其相加。另一方面,如果您將 x 和 y 定義為字串,則 + 運算符會將這兩個字串附加在一起,以建立更長的字詞。

弱型別語言

JavaScript 是一種弱型別語言,這意味著不允許程式設計人員定義變數類型。變數可在執行時間存放任何資料類型,並且操作會假設變數類型。結果也可以轉換為另一種資料類型,例如,一項操作可能將結果作為字串 "5" 而不是數字 5 傳回。由於類型錯誤,這可能會導致意外的編碼錯誤和程式碼錯誤。

什麼是 TypeScript?

TypeScript 是一種程式設計語言,透過在語法中新增類型來改善 JavaScript。TypeScript 為 JavaScript 新增了額外的語法,以便程式碼編輯器工具可及早發現編碼錯誤。同時,TypeScript 程式碼轉換為 JavaScript,並提供與 JavaScript 相媲美的所有優勢。此外還可在應用程式及 JavaScript 架構和程式庫中執行。

什麼是適用於 JavaScript 的 AWS SDK?

適用於 JavaScript 的 AWS SDK 是一組與 AWS 服務整合的開放原始碼、免費使用的 JavaScript 程式庫。其支援 API 開發、更高階的抽象和三種類型的應用程式:

  • 用於瀏覽器的 JavaScript
  • 用於伺服器的 Node.js
  • 用於行動裝置開發的 React Native

適用於 JavaScript 的 AWS SDK 完全採用 TypeScript 撰寫,然後編譯成 JavaScript。因此,您可以享有 TypeScript 的所有優勢,而不必擔心向後相容性。

您可以閱讀 程式碼範例 遷移指南 ,或 直接從 GitHub 安裝 ,開始使用適用於 Java 的 AWS 開發套件。

什麼是適用於 JavaScript 的 AWS Amplify?

AWS Amplify 是一組專門建置的工具和功能,可讓前端 Web 與行動開發人員在 AWS 上快速輕鬆地建置全堆疊應用程式。Amplify 開放原始碼用戶端程式庫可跨不同類別之雲端驅動的操作,提供以使用案例為中心且易於使用的介面。放大 JavaScript 庫 支持不同的網絡和移動框架,包括作出反應,反應本地,角,離子和 Vue.js。您可以通過完成放大 JavaScript 的 入門指南 來開始使用。

AWS 的 JavaScript 後續步驟