【轉】什麼是JavaScript

標籤：套件   pac   dynamic   block   tor   error:   地理資訊   書櫃   testing   

轉自mdn學習網站-什麼是JavaScript

什麼是JavaScript？

歡迎來到 MDN JavaScript 初學者的課程！ 在第一篇文章中，我們將會站在一定的高度來俯看 JavaScript，回答一些像“它是什嗎？”和“它能做什嗎？”的問題 。並確保你熟悉 JavaScript 的用途。

一個高水平的定義

JavaScript 是允許你在網頁中實現複雜事情的一門程式設計語言 —— 每次當你瀏覽網頁時不只是顯示靜態資訊—— 顯示即時更新的內容， 或者互動地圖，或 2D/3D 圖形動畫，又或者自動播放視頻等，你可以確信，JavaScript 參與其中。這是 Web技術的三層蛋糕標準:

• HTML是一種標記語言，用來結構化我們的網頁內容和賦予內容含義，例如定義段落、標題、和資料表,或在頁面中內嵌圖片和視頻。
• CSS 是一種樣式規則語言，我們將樣式應用於我們的 HTML 內容， 例如設定背景顏色和字型，在多個列種布局我們的內容。
• JavaScript 是一種程式設計語言，允許你建立動態更新的內容，控制多媒體，映像動畫，和一些其他的東西。好吧，雖然不是一切，但是它的神奇之處是你能夠用幾行JavaScript代碼就能實現。

這三個層次規矩地建立在彼此之上。讓我們用一個簡單的文字標籤作為例子。我們可以用 HTML 來標記它，以賦予它結構和目的：

<p>Player 1: Chris</p>

然後我們可以加上一點 CSS 來使它看起來更好：

p {  font-family: ‘helvetica neue‘, helvetica, sans-serif;  letter-spacing: 1px;  text-transform: uppercase;  text-align: center;  border: 2px solid rgba(0,0,200,0.6);  background: rgba(0,0,200,0.3);  color: rgba(0,0,200,0.6);  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);  border-radius: 10px;  padding: 3px 10px;  display: inline-block;  cursor:pointer;}

而最後，我們可以加上一些 JavaScript 來實現動態行為：

var para = document.querySelector(‘p‘);para.addEventListener(‘click‘, updateName);function updateName() {  var name = prompt(‘Enter a new name‘);  para.textContent = ‘Player 1: ‘ + name;}

嘗試驗擊文字標籤，觀察會發生什麼（同時注意，你可以在 GitHub 上找到這個示範—— 原始碼，或者 即時運行）！

JavaScript 可以做比這更多的東西——讓我們詳細探索它可以做些什麼。

所以它_實際上_可以做什嗎？

JavaScript 語言的核心包含一些普遍的編程特點，以讓你可以做到如下的事情：

• 在變數中儲存有用的值。以上面的示範做例子，我們請求輸入一個新的名字，然後把那個名字儲存到一個叫 name 的變數.
• 對一段文本（在編程中被稱為“字串”）進行操作。在上面的例子中，我們取出字串 "Player 1: "，然後把它和 name 變數連結起來，創造出完整的文字標籤，例：‘‘Player 1: Chris"。
• 運行代碼以響應在網頁中發生的特定事件。在上述的例子中，我們用了一個 click 事件來檢測按鈕什麼時候被點擊，然後運行更新文字標籤的代碼。
• 以及更多！

然而更令人興奮的是建立在 JavaScript 語言的核心之上的功能。在你的 JavaScript 代碼裡，被稱為API [Application Programming Interfaces (APIs) ] 的功能會提供額外的超能力給你使用。

APIs 是已經建立好的一套程式碼群組件，目的是讓開發人員可以實現除此之外很難甚至不可能實現的程式。它們的作用就像是已經製作好的傢具套件對家居建設的作用一樣——從一堆已經切好的木板開始組裝一個書櫃，顯然比自己設計，尋找合適的木材，裁切至合適的大小和形狀，找到合適大小的螺絲釘，然後組裝成一個書櫃要簡單得多。

它們 (APIs) 通常分成兩個分類。

瀏覽器 APIs (Browser APIs) 已經安裝在你的網頁瀏覽器中，而且能夠從周圍的電腦環境中揭露資料，或者做有用的複雜事情。舉個例子：

• 文件物件模型 API [DOM (Document Object Model) API] 允許你操作 HTML 和 CSS，建立，移除和修改 HTML，動態地應用新的樣式到你的頁面，等等。比如說每次你在一個頁面裡看到一個快顯視窗，或者顯示一些新的內容（像我們在上面的簡單示範中看到那樣），這就是 DOM 在運作。

• 地理定位 API [Geolocation API] 擷取地理資訊。這就是為什麼Google地圖 [Google Maps] 可以找到你的位置，而且標示在地圖上。

• 畫布 [Canvas] 和 WebGL APIs 允許你建立生動的 2D 和 3D 映像。人們正運用這些網頁技術進行一些令人驚歎的事情——比如說 Chrome Experiments 和 webglsamples。

• 音像和影像 APIs [Audio and Video APIs]，像 HTMLMediaElement 和 WebRTC 允許你運用多媒體去做一些非常有趣的事情，比如在網頁中播放音像和影像，或者從你的網頁網路攝影機中擷取擷取錄影，然後在其他人的電腦上展示（嘗試我們的簡單快照示範 [Snapshot demo] 以理解這個概念）。

Note: 上述的很多示範都不能在舊的瀏覽器中運行——當進行實驗時，在現代瀏覽器，像 Firefox, Chrome, Edge 或者 Opera，中運行會是一個好的想法。當你接近交付產品代碼時，你會需要更深入地去考慮跨平台測試 [cross browser testing]（例：現實客戶會使用的實際代碼）。

第三方 APIs (Third party APIs) 預設是沒有安裝到瀏覽器中的，而你通常需要從網路上的某些地方取得它們的代碼和資訊。舉個例子：

• 推特 API [Twitter API] 允許你做一些像是在你的網站上展示你的最新推送之類的事情。

• Google地圖 API [Google Maps API] 允許你去嵌入定製的地圖到你的網站，和其他的功能。

Note: 這些 APIs 是進階的，而我們不會在課程中涉及任何的這些 APIs，但是如果你想瞭解更多，上述的連結提供延展的文檔供參考。

這裡還有更多可用的東西！然而，不要這麼快就感到太過興奮。你不可能只通過 24 小時的 JavaScript 學習，就能夠構建下一個 Facebook, Google Maps 或者 Instagram——這裡有很多的基礎需要優先覆蓋。而這就是為什麼你在這裡——讓我們繼續前進！

JavaScript 在你的頁面上做什嗎？

在這我們會開始確實地查看一些代碼，而在這樣做的同時，探索當你在你的頁面上運行 JavaScript 的時候實際發生了什麼。

讓我們簡單地回顧當你在瀏覽器中讀取一個網頁時發生什麼（在文章 How CSS works 中第一次談及到）。 當你在瀏覽器中讀取一個網頁，你在一個實行環境（瀏覽器標籤）中運行你的代碼（HTML, CSS 和 JavaScript）。這就像是一個工廠，擷取原材料（代碼）然後出產一個產品（網頁）。

在 HTML 和 CSS 已經被集合和組裝成一個網頁後，瀏覽器的 JavaScript 引擎執行 JavaScript。這保證了當 JavaScript 開始運行時，網頁的結構和樣式已經在該出現的地方了。

這是一個好事情，正如 JavaScript 的普遍用處是通過 DOM API（如之前提及的那樣）動態地修改 HTML 和 CSS 來更新使用者交介面。如果 JavaScript 在 HTML 和 CSS 載入完成之前載入運行，那麼會發生錯誤。

瀏覽器安全

每個瀏覽器標籤本身就是一個用來運行代碼的分離的容器（這些容器用專業術語稱為“運行環境”）——這意味著在大多數情況中，每個標籤中的代碼是完全分離地運行，而且在一個標籤中的代碼不能直接影響在另一個標籤中的代碼——或者在另一個網站中的。這是一個好的安全措施——如果不是這樣的話，那麼海盜們就可以開始寫從其他網站偷取資訊的代碼，和其他像這樣的壞事。

Note: 這裡有安全的方式去在不同網站/標籤中傳送代碼和資料，但這些方法是進階的技術，而我們不會在這門課裡覆蓋這些。

JavaScript 運行順序

當瀏覽器遇到一塊 JavaScript 代碼時，它通常會按順序運行這代碼塊，從上往下。這意味著你需要注意你放置代碼的順序。舉個例子，讓我們回到我們在第一個例子中看到的 JavaScript 代碼塊：

var para = document.querySelector(‘p‘);para.addEventListener(‘click‘, updateName);function updateName() {  var name = prompt(‘Enter a new name‘);  para.textContent = ‘Player 1: ‘ + name;}

在這裡我們正選定一個文本段落 (line 1)，然後給它附上一個事件監聽器 (line 3) 使得當這個段落被點擊時，updateName() 代碼塊 (lines 5–8) 會被運行。updateName() 代碼塊（這類可以重複使用的代碼塊被稱為“函數”）向使用者請求一個新的名字，然後把這個名字插入到段落中以更新顯示。

如果你互換了代碼裡最初兩行的順序，它將不會工作——取而代之的是，你會在瀏覽器的開發人員控制台中得到一個錯誤——TypeError: para is undefined [類型錯誤：para沒有被定義]。這意味著 para 對象還不存在，所以我們不能為它增添一個事件監聽器。

Note: 這是一個很常見的錯誤——你需要注意在嘗試對你的代碼中引用的對象進行操作前，它已經存在。

解釋代碼 vs 編譯代碼

在編程環境中，你或許聽說過這兩個術語 解釋 [interpreted] 和 編譯 [compiled]。JavaScript 是一個解釋語言——代碼從上到下運行，而啟動並執行結果會馬上被返回。在瀏覽器運行代碼前，你不必先把它轉化為其他形式。

另一方面來說，編譯語言則需要在運行前轉化為另一種形式。比如說 C/C++ 則要先被編譯成組合語言，然後再由電腦運行。

兩種方式都有不同的優勢，然而就目前而言，我們不會談論這些。

伺服器端代碼 vs 用戶端代碼

你或許也聽說過 伺服器端 [server-side] 和 用戶端 [client-side] 代碼這兩個術語，尤其是在網頁開發的語境中。用戶端代碼是在使用者的電腦上啟動並執行代碼——當瀏覽一個網頁時，這個網頁的用戶端代碼就會被下載，然後由瀏覽器來運行和展示。在這個 JavaScript 模組，我們將會明確地探討 用戶端 JavaScript [client-side JavaScript]。

在另一方面，伺服器端代碼則在伺服器上運行，然後它的結果會由瀏覽器進行下載和展示。流行的伺服器端網頁語言套件含以下幾個例子：PHP, Python, Ruby, ASP.NET 和 JavaScript！JavaScript 同時也能用作伺服器端語言，比如說在流行的 Node.js 環境中——你可以在我們的 動態網頁 - 伺服器端編程 [Dynamic Websites – Server-side programming] 主題中找到更多關於伺服器端 JavaScript 的知識。

動態 [dynamic] 這個詞被用來描述用戶端 JavaScript 和伺服器端語言——它指的是能更新網頁/應用的內容以在不同環境下顯示不同事物，當有需要時產生新內容的能力。伺服器端代碼會動態地在伺服器上產生新的內容，比如說從資料庫中提取資訊。反之，用戶端 JavaScript則在使用者的瀏覽器中動態地產生新的內容，比如說建立一個新的 HTML 表格，從中插入從伺服器請求到的資料，然後在已經向使用者展示了的網頁中顯示這個表格。在這兩個語境中，動態意義有細微的不同，但是有聯絡，而且兩種方法（伺服器端和用戶端）通常是在一起工作的。

一個沒有動態更新內容的網頁被指作 靜態 [static] ——它只會一直顯示一樣的內容。

怎樣向你的頁面添加 JavaScript？

JavaScript 以一種近似於 CSS 的方式應用到你的 HTML 頁面中。儘管 CSS 使用 <link> 元素去應用外部的樣式表 [stylesheet] 和 <style>元素去應用內部的樣式表到 HTML，JavaScript 只需要在 HTML 世界裡的一個元素—— <script> 元素。讓我們學習一下它怎麼工作。

內部的 JavaScript

1. 首先，複製我們的範例檔案 apply-javascript.html 到本地。儲存到一個可以察覺的目錄中。

<!DOCTYPE html><html lang="en-US">  <head>    <meta charset="utf-8">    <title>Apply JavaScript example</title>  </head>  <body>    <button>Click me</button>  </body></html>

1. 在你的瀏覽器和文字編輯器中開啟這個檔案。你會看到這個 HTML 建立了一個包含了一個可點擊按鈕的簡單網頁。

2. 然後，在你的文字編輯器裡，在你的結束 </body> 標籤前接上以下代碼：

   <script>  // JavaScript goes here</script>

3. 現在我們會在我們的 <script>元素中加上一些 JavaScript 來讓這個頁面做一些更有趣的東西——在 "// JavaScript goes here" 這一行下面加上以下代碼：

   function createParagraph() {  var para = document.createElement(‘p‘);  para.textContent = ‘You clicked the button!‘;  document.body.appendChild(para);}var buttons = document.querySelectorAll(‘button‘)for(var i = 0; i < buttons.length ; i++) {  buttons[i].addEventListener(‘click‘, createParagraph);}

4. 儲存你的檔案並重新整理你的瀏覽器——現在當你點擊按鈕時，你應當會看到一個新的段落產生並在下方顯示。

Note: 如果你的例子看上去不能工作，再檢查所有的步驟和保證你都做對了。你有把原始代碼作為 .html 檔案儲存為本地複件嗎？你有剛好在</body>標籤前加上 <script>元素嗎？你有確切地輸入所示的 JavaScript ？

JavaScript 是區分大小寫，而且非常的講究，所以你需要精確地輸入所示的句法，不然它可能會無法工作.

Note: 你可以在 GitHub 上看到這個版本 apply-javascript-internal.html (see it live too).

外部的 JavaScript

這方法很不錯，但要是我們想要把我們的 JavaScript 放置在一個外部檔案中呢？現在讓我們探索這個。

1. 首先，在跟你的簡單 HTML 檔案的同一目錄下建立一個新的檔案。命名為 script.js ——保證它以 .js 為副檔名，因為這是它被認作是 JavaScript 的方式。

2. 然後，把所有在你現在的 <script>元素中的指令碼 [script] 提取出來並粘貼到 .js 檔案。儲存這個檔案。

3. 現在替換你的 <script>元素為如下：

   <script src="script.js"></script>

4. 儲存然後重新整理你的瀏覽器，然後你應該看到同樣的東西！它工作起來是一樣的，但是現在我們把 JavaScript 寫進了一個外部檔案。對於規劃你的代碼來說，這通常是一件好事，而且讓它可以在多個 HTML 檔案中重複使用。再加上 HTML 中沒有一大堆指令碼的話，HTML 會更容易閱讀。

Note: 你可以在 GitHub 上看到這個版本 as apply-javascript-external.html and script.js (see it live too).

內聯 JavaScript 處理器

注意，有時候你會遇到在 HTML 中存在著一絲真實的 JavaScript 代碼。它或許看上去會像這樣：

function createParagraph() {  var para = document.createElement(‘p‘);  para.textContent = ‘You clicked the button!‘;  document.body.appendChild(para);}

<button onclick="createParagraph()">Click me!</button>

這個示範有著跟前兩節的示範一模一樣的功能，除了 <button> 元素中包含了一個內聯的 onclick 處理器以至於函數會在按鈕被按下時運行。

然而請不要這樣做。 這是一個用 JavaScript 來汙染你的 HTML 的壞實踐，而且它還不高效——你會需要在每個想要 JavaScript 應用到的按鈕上包含 onclick="createParagraph()" 屬性。

使用一個純 JavaScript 結構允許你使用一個指令來選取所有的按鈕。我們在上面實現這一目的的代碼看上去是這樣的：

var buttons = document.querySelectorAll(‘button‘);for(var i = 0; i < buttons.length ; i++) {  buttons[i].addEventListener(‘click‘, createParagraph);}

這或許看上去比 onclick 屬性要長一些，但是這會應用於所有的按鈕，無論頁面上有多少個，和有多少個按鈕被添加或者移除。不需要對 JavaScript 進行任何修改。

Note: 嘗試編輯你自己的 apply-javascript.html 版本並在檔案中加上更多的按鈕。當你重新載入時，你應該會發現所有的按鈕被按下時都會建立一個段落。很簡潔，不是嗎？

注釋

正如使用 HTML 和 CSS 一樣，在你的 JavaScript 代碼中書寫會被瀏覽器忽略掉的注釋是可行的，並且注釋只用來為你的開發人員同事提供關於代碼如何工作的指引（包括你，如果你在 6 個月後回到你的代碼並忘記了你做過些什麼）。注釋非常有用，而且你應該經常使用它們，尤其是在更大的應用程式中。這裡有兩類注釋：

• 一個單行注釋書寫在一個雙正斜杠後 (//)，比如：

  // I am a comment

• 一個多行注釋書寫在字串 /* 和 */ 之間， 比如：

  /*  I am also  a comment*/

所以舉例說，我們可以用 “注釋” 來為我們上一個示範的 JavaScript 注釋：

// Function: creates a new paragraph and append it to the bottom of the HTML body.function createParagraph() {  var para = document.createElement(‘p‘);  para.textContent = ‘You clicked the button!‘;  document.body.appendChild(para);}/*  1\. Get references to all the buttons on the page and soter them in an array.  2\. Loop through all the buttons and add a click event listener to each one.  When any button is pressed, the createParagraph() function will be run.*/var buttons = document.querySelectorAll(‘button‘);for(var i = 0; i < buttons.length ; i++) {  buttons[i].addEventListener(‘click‘, createParagraph);}

總結

所以你到這裡了，你在 JavaScript 世界中的第一步。我們僅僅從理論開始，讓你熟悉為什麼你會使用 JavaScript，和你可以用它做什麼事情。在這過程中你看到了一些程式碼範例並且學習到了 JavaScript 是如何與你網站中的其他代碼適配的。

JavaScript 現在或許看上去有一點令人畏懼，但不用擔心——在這門課中我們會逐步地引領你。在下一篇文章我們會全心投入到實踐，讓你專註其中並建立你自己的 JavaScript 例子。

【end】

【轉】什麼是JavaScript