JavaScript 是允許你在網頁中實現複雜事情的一門編程語言 —— 每次當你瀏覽網頁時不只是顯示靜態信息—— 顯示即時更新的內容，或者互動式的地圖，或 2D/3D 圖形動畫，又或者自動播放視頻等，你可以確信，JavaScript 參與其中。 ...

轉自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 代碼里，被稱為應用程式編程介面 [Application Programming Interfaces (APIs) ] 的功能會提供額外的超能力給你使用。

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

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

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

文檔對象模型 API [DOM (Document Object Model) API] 允許你操作 HTML 和 CSS，創建，移除和修改 HTML，動態地應用新的樣式到你的頁面，等等。比如說每次你在一個頁面里看到一個彈出視窗，或者顯示一些新的內容（像我們在上面的簡單演示中看到那樣），這就是 DOM 在運作。
地理定位 API [Geolocation API] 獲取地理信息。這就是為什麼谷歌地圖 [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] 允許你做一些像是在你的網站上展示你的最新推送之類的事情。
谷歌地圖 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

首先，複製我們的範例文件 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>

在你的瀏覽器和文本編輯器中打開這個文件。你會看到這個 HTML 創建了一個包含了一個可點擊按鈕的簡單網頁。
然後，在你的文本編輯器里，在你的結束 </body> 標簽前接上以下代碼：
```
<script>
  // JavaScript goes here
</script>
```

現在我們會在我們的 <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);
}

保存你的文件並刷新你的瀏覽器——現在當你點擊按鈕時，你應當會看到一個新的段落產生併在下方顯示。

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

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

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

外部的 JavaScript

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

首先，在跟你的簡單 HTML 文件的同一目錄下創建一個新的文件。命名為 script.js ——保證它以 .js 為文件擴展名，因為這是它被認作是 JavaScript 的方式。
然後，把所有在你現在的 <script>元素中的腳本 [script] 提取出來並粘貼到 .js 文件。保存這個文件。
現在替換你的 <script>元素為如下：
```
<script src="script.js"></script>
```
保存然後刷新你的瀏覽器，然後你應該看到同樣的東西！它工作起來是一樣的，但是現在我們把 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