什么是JavaScript？

一個(gè)高水平的定義

JavaScript 是允許你在網(wǎng)頁中實(shí)現(xiàn)復(fù)雜事情的一門編程語言?—— 每次當(dāng)你瀏覽網(wǎng)頁時(shí)不只是顯示靜態(tài)信息—— 顯示即時(shí)更新的內(nèi)容， 或者交互式的地圖，或 2D/3D 圖形動(dòng)畫，又或者自動(dòng)播放視頻等，你可以確信，JavaScript 參與其中。這是 Web技術(shù)的三層蛋糕標(biāo)準(zhǔn)，其中的兩個(gè)( HTML 和 CSS )我們?cè)?學(xué)習(xí)中心(Learning Area)的其他部分有更多的細(xì)節(jié)。?

• HTML是一種標(biāo)記語言，用來結(jié)構(gòu)化我們的網(wǎng)頁內(nèi)容和賦予內(nèi)容含義，例如定義段落、標(biāo)題、和數(shù)據(jù)表,或在頁面中嵌入圖片和視頻。
• CSS 是一種樣式規(guī)則語言，我們將樣式應(yīng)用于我們的 HTML 內(nèi)容，?例如設(shè)置背景顏色和字體，在多個(gè)列種布局我們的內(nèi)容。
• JavaScript 是一種編程語言，允許你創(chuàng)建動(dòng)態(tài)更新的內(nèi)容，控制多媒體，圖像動(dòng)畫，和一些其他的東西。好吧，雖然不是一切，但是它的神奇之處是你能夠用幾行JavaScript代碼就能實(shí)現(xiàn)。

這三個(gè)層次規(guī)矩地建立在彼此之上。讓我們用一個(gè)簡(jiǎn)單的文本標(biāo)簽作為例子。我們可以用 HTML 來標(biāo)記它，以賦予它結(jié)構(gòu)和目的:

<p>Player 1: Chris</p>

然后我們可以加上一點(diǎn) 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 來實(shí)現(xiàn)動(dòng)態(tài)行為:

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

嘗試點(diǎn)擊文本標(biāo)簽，觀察會(huì)發(fā)生什么(同時(shí)注意，你可以在 GitHub 上找到這個(gè)演示——?源代碼，或者?實(shí)時(shí)運(yùn)行)！

JavaScript 可以做比這更多的東西——讓我們?cè)敿?xì)探索它可以做些什么。

所以它實(shí)際上可以做什么？

JavaScript 語言的核心包含一些普遍的編程特點(diǎn)，以讓你可以做到如下的事情:

• 在變量中儲(chǔ)存有用的值。以上面的演示做例子，我們請(qǐng)求輸入一個(gè)新的名字，然后把那個(gè)名字儲(chǔ)存到一個(gè)叫?name?的變量.
• 對(duì)一段文本(在編程中被稱為"字符串")進(jìn)行操作。在上面的例子中，我們?nèi)〕鲎址?"Player 1: "，然后把它和 name 變量連結(jié)起來，創(chuàng)造出完整的文本標(biāo)簽，例:''Player 1: Chris"。
• 運(yùn)行代碼以響應(yīng)在網(wǎng)頁中發(fā)生的特定事件。在上述的例子中，我們用了一個(gè) click 事件來檢測(cè)按鈕什么時(shí)候被點(diǎn)擊，然后運(yùn)行更新文本標(biāo)簽的代碼。
• 以及更多！

然而更令人興奮的是建立在 JavaScript 語言的核心之上的功能。在你的 JavaScript 代碼里，被稱為應(yīng)用程序編程接口 [Application Programming Interfaces?(APIs)] 的功能會(huì)提供額外的超能力給你使用。

APIs 是已經(jīng)建立好的一套代碼組件，目的是讓開發(fā)者可以實(shí)現(xiàn)除此之外很難甚至不可能實(shí)現(xiàn)的程序。它們的作用就像是已經(jīng)制作好的家具套件對(duì)家居建設(shè)的作用一樣——從一堆已經(jīng)切好的木板開始組裝一個(gè)書柜，顯然比自己設(shè)計(jì)，尋找合適的木材，裁切至合適的大小和形狀，找到合適大小的螺絲釘，然后組裝成一個(gè)書柜要簡(jiǎn)單得多。

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

瀏覽器 APIs (Browser APIs)?已經(jīng)安裝在你的網(wǎng)頁瀏覽器中，而且能夠從周圍的計(jì)算機(jī)環(huán)境中揭露數(shù)據(jù)，或者做有用的復(fù)雜事情。舉個(gè)例子:

• 文檔對(duì)象模型 API [DOM (Document Object Model) API]?允許你操作 HTML 和 CSS，創(chuàng)建，移除和修改 HTML，動(dòng)態(tài)地應(yīng)用新的樣式到你的頁面，等等。比如說每次你在一個(gè)頁面里看到一個(gè)彈出窗口，或者顯示一些新的內(nèi)容(像我們?cè)谏厦娴暮?jiǎn)單演示中看到那樣)，這就是 DOM 在運(yùn)作。
• 地理定位 API [Geolocation API]?獲取地理信息。這就是為什么谷歌地圖?[Google Maps]?可以找到你的位置，而且標(biāo)示在地圖上。
• 畫布 [Canvas]?和?WebGL APIs 允許你創(chuàng)建生動(dòng)的 2D 和 3D 圖像。人們正運(yùn)用這些網(wǎng)頁技術(shù)進(jìn)行一些令人驚嘆的事情——比如說?Chrome Experiments?和?webglsamples。
• 音像和影像 APIs [Audio and Video APIs]，像?HTMLMediaElement 和?WebRTC?允許你運(yùn)用多媒體去做一些非常有趣的事情，比如在網(wǎng)頁中播放音像和影像，或者從你的網(wǎng)頁攝像頭中獲取獲取錄像，然后在其他人的電腦上展示(嘗試我們的簡(jiǎn)單快照演示 [Snapshot demo]?以理解這個(gè)概念)。

第三方 APIs (Third party APIs)?默認(rèn)是沒有安裝到瀏覽器中的，而你通常需要從網(wǎng)絡(luò)上的某些地方取得它們的代碼和信息。舉個(gè)例子:

• 推特 API [Twitter API]?允許你做一些像是在你的網(wǎng)站上展示你的最新推送之類的事情。
• 谷歌地圖 API [Google Maps API]?允許你去嵌入定制的地圖到你的網(wǎng)站，和其他的功能。

這里還有更多可用的東西！然而，不要這么快就感到太過興奮。你不可能只通過 24 小時(shí)的 JavaScript 學(xué)習(xí)，就能夠構(gòu)建下一個(gè) Facebook, Google Maps 或者 Instagram——這里有很多的基礎(chǔ)需要優(yōu)先覆蓋。而這就是為什么你在這里——讓我們繼續(xù)前進(jìn)！

JavaScript 在你的頁面上做什么？

在這我們會(huì)開始確實(shí)地查看一些代碼，而在這樣做的同時(shí)，探索當(dāng)你在你的頁面上運(yùn)行 JavaScript 的時(shí)候?qū)嶋H發(fā)生了什么。

讓我們簡(jiǎn)單地回顧當(dāng)你在瀏覽器中讀取一個(gè)網(wǎng)頁時(shí)發(fā)生什么(在文章?How CSS works?中第一次談及到)。?當(dāng)你在瀏覽器中讀取一個(gè)網(wǎng)頁，你在一個(gè)實(shí)行環(huán)境(瀏覽器標(biāo)簽)中運(yùn)行你的代碼(HTML, CSS 和 JavaScript)。這就像是一個(gè)工廠，獲取原材料(代碼)然后出產(chǎn)一個(gè)產(chǎn)品(網(wǎng)頁)。

在 HTML 和 CSS 已經(jīng)被集合和組裝成一個(gè)網(wǎng)頁后，瀏覽器的 JavaScript 引擎執(zhí)行?JavaScript。這保證了當(dāng) JavaScript 開始運(yùn)行時(shí)，網(wǎng)頁的結(jié)構(gòu)和樣式已經(jīng)在該出現(xiàn)的地方了。

這是一個(gè)好事情，正如 JavaScript 的普遍用處是通過 DOM API(如之前提及的那樣)動(dòng)態(tài)地修改 HTML 和 CSS 來更新用戶交界面。如果?JavaScript 讀取了并嘗試在 HTML 和 CSS 可以被修改前運(yùn)行，那么錯(cuò)誤會(huì)發(fā)生。

瀏覽器安全

每個(gè)瀏覽器標(biāo)簽本身就是一個(gè)用來運(yùn)行代碼的分離的容器(這些容器用專業(yè)術(shù)語稱為"運(yùn)行環(huán)境")——這意味著在大多數(shù)情況中，每個(gè)標(biāo)簽中的代碼是完全分離地運(yùn)行，而且在一個(gè)標(biāo)簽中的代碼不能直接影響在另一個(gè)標(biāo)簽中的代碼——或者在另一個(gè)網(wǎng)站中的。這是一個(gè)好的安全措施——如果不是這樣的話，那么海盜們就可以開始寫從其他網(wǎng)站偷取信息的代碼，和其他像這樣的壞事。

JavaScript 運(yùn)行順序

當(dāng)瀏覽器遇到一塊 JavaScript 代碼時(shí)，它通常會(huì)按順序運(yùn)行這代碼塊，從上往下。這意味著你需要注意你放置代碼的順序。舉個(gè)例子，讓我們回到我們?cè)诘谝粋€(gè)例子中看到的 JavaScript 代碼塊:

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

在這里我們正選定一個(gè)文本段落 (line 1)，然后給它附上一個(gè)事件監(jiān)聽器?(line 3) 使得當(dāng)這個(gè)段落被點(diǎn)擊時(shí)，updateName()?代碼塊?(lines 5–8) 會(huì)被運(yùn)行。updateName()?代碼塊(這類可以重復(fù)使用的代碼塊被稱為"函數(shù)")向用戶請(qǐng)求一個(gè)新的名字，然后把這個(gè)名字插入到段落中以更新顯示。

如果你互換了代碼里最初兩行的順序，它將不會(huì)工作——取而代之的是，你會(huì)在瀏覽器的開發(fā)者控制臺(tái)中得到一個(gè)錯(cuò)誤——TypeError: para is undefined [類型錯(cuò)誤:para沒有被定義]。這意味著 para 對(duì)象還不存在，所以我們不能為它增添一個(gè)事件監(jiān)聽器。

解釋代碼 vs?編譯代碼

在編程環(huán)境中，你或許聽說過這兩個(gè)術(shù)語?解釋 [interpreted]?和?編譯 [compiled]。JavaScript 是一個(gè)解釋語言——代碼從上到下運(yùn)行，而運(yùn)行的結(jié)果會(huì)馬上被返回。在瀏覽器運(yùn)行代碼前，你不必先把它轉(zhuǎn)化為其他形式。

另一方面來說，編譯語言則需要在運(yùn)行前轉(zhuǎn)化為另一種形式。比如說 C/C++ 則要先被編譯成匯編語言，然后再由電腦運(yùn)行。

兩種方式都有不同的優(yōu)勢(shì)，然而就目前而言，我們不會(huì)談?wù)撨@些。

服務(wù)器端代碼 vs 客戶端代碼

你或許也聽說過?服務(wù)器端 [server-side]?和?客戶端 [client-side]?代碼這兩個(gè)術(shù)語，尤其是在網(wǎng)頁開發(fā)的語境中?？蛻舳舜a是在用戶的電腦上運(yùn)行的代碼——當(dāng)瀏覽一個(gè)網(wǎng)頁時(shí)，這個(gè)網(wǎng)頁的客戶端代碼就會(huì)被下載，然后由瀏覽器來運(yùn)行和展示。在這個(gè) JavaScript 模塊，我們將會(huì)明確地探討?客戶端 JavaScript [client-side JavaScript]。

在另一方面，服務(wù)器端代碼則在服務(wù)器上運(yùn)行，然后它的結(jié)果會(huì)由瀏覽器進(jìn)行下載和展示。流行的服務(wù)器端網(wǎng)頁語言包含以下幾個(gè)例子:PHP, Python, Ruby, ASP.NET 和 JavaScript！JavaScript 同時(shí)也能用作服務(wù)器端語言，比如說在流行的 Node.js 環(huán)境中——你可以在我們的?動(dòng)態(tài)網(wǎng)頁 - 服務(wù)器端編程 [Dynamic Websites – Server-side programming] 主題中找到更多關(guān)于服務(wù)器端 JavaScript 的知識(shí)。

動(dòng)態(tài) [dynamic]?這個(gè)詞被用來描述客戶端 JavaScript 和服務(wù)器端語言——它指的是能更新網(wǎng)頁/應(yīng)用的內(nèi)容以在不同環(huán)境下顯示不同事物，當(dāng)有需要時(shí)產(chǎn)生新內(nèi)容的能力。服務(wù)器端代碼會(huì)動(dòng)態(tài)地在服務(wù)器上產(chǎn)生新的內(nèi)容，比如說從數(shù)據(jù)庫(kù)中提取信息。反之，客戶端 JavaScript則在用戶的瀏覽器中動(dòng)態(tài)地生成新的內(nèi)容，比如說創(chuàng)建一個(gè)新的 HTML 表格，從中插入從服務(wù)器請(qǐng)求到的數(shù)據(jù)，然后在已經(jīng)向用戶展示了的網(wǎng)頁中顯示這個(gè)表格。在這兩個(gè)語境中，動(dòng)態(tài)的意義有細(xì)微的不同，但是有聯(lián)系，而且兩種方法(服務(wù)器端和客戶端)通常是在一起工作的。

一個(gè)沒有動(dòng)態(tài)更新內(nèi)容的網(wǎng)頁被指作?靜態(tài) [static] ——它只會(huì)一直顯示一樣的內(nèi)容。

怎樣向你的頁面添加 JavaScript？

JavaScript 以一種近似于?CSS 的方式應(yīng)用到你的 HTML 頁面中。盡管?CSS 使用?<link> 元素去應(yīng)用外部的樣式表 [stylesheet] 和?<style> 元素去應(yīng)用內(nèi)部的樣式表到 HTML，JavaScript 只需要在?HTML 世界里的一個(gè)元素——?<script> 元素。讓我們學(xué)習(xí)一下它怎么工作。

內(nèi)部的 JavaScript

1. 首先，復(fù)制我們的范例文件?apply-javascript.html?到本地。儲(chǔ)存到一個(gè)可以察覺的目錄中。
2. 在你的瀏覽器和文本編輯器中打開這個(gè)文件。你會(huì)看到這個(gè) HTML 創(chuàng)建了一個(gè)包含了一個(gè)可點(diǎn)擊按鈕的簡(jiǎn)單網(wǎng)頁。
3. 然后，在你的文本編輯器里，在你的結(jié)束?</body>?標(biāo)簽后接上以下代碼:

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

4. 現(xiàn)在我們會(huì)在我們的 <script> 元素中加上一些 JavaScript 來讓這個(gè)頁面做一些更有趣的東西——在 "http:// 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);
   }

5. 保存你的文件并刷新你的瀏覽器——現(xiàn)在當(dāng)你點(diǎn)擊按鈕時(shí)，你應(yīng)當(dāng)會(huì)看到一個(gè)新的段落產(chǎn)生并在下方顯示。

外部的 JavaScript

這方法很不錯(cuò)，但要是我們想要把我們的?JavaScript 放置再一個(gè)外部文件中呢？現(xiàn)在讓我們探索這個(gè)。

1. 首先，在跟你的簡(jiǎn)單 HTML 文件的同一目錄下創(chuàng)建一個(gè)新的文件。命名為?script.js?——保證它以?.js 為文件擴(kuò)展名，因?yàn)檫@是它被認(rèn)作是 JavaScript 的方式。
2. 然后，把所有在你現(xiàn)在的?<script> 元素中的腳本 [script] 提取出來并粘貼到?.js 文件。保存這個(gè)文件。
3. 現(xiàn)在替換你的?<script> 元素為如下:

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

4. 保存然后刷新你的瀏覽器，然后你應(yīng)該看到同樣的東西！它工作起來是一樣的，但是現(xiàn)在我們把 JavaScript 寫進(jìn)了一個(gè)外部文件。對(duì)于規(guī)劃你的代碼來說，這通常是一件好事，而且讓它可以在多個(gè) HTML 文件中重復(fù)使用。再加上 HTML 中沒有一大堆腳本的話，HTML 會(huì)更容易閱讀。

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

內(nèi)聯(lián) JavaScript 處理器

注意，有時(shí)候你會(huì)遇到在 HTML 中存在著一絲真實(shí)的?JavaScript 代碼。它或許看上去會(huì)像這樣:

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

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

你可以在下面嘗試這個(gè)版本的演示。

這個(gè)演示有著跟前兩節(jié)的演示一模一樣的功能，除了?<button> 元素中包含了一個(gè)內(nèi)聯(lián)的?onclick?處理器以至于函數(shù)會(huì)在按鈕被按下時(shí)運(yùn)行。

然而請(qǐng)不要這樣做。?這是一個(gè)用 JavaScript 來污染你的 HTML 的壞實(shí)踐，而且它還不高效——你會(huì)需要在每個(gè)想要 JavaScript 應(yīng)用到的按鈕上包含?onclick="createParagraph()" 屬性。

使用一個(gè)純?JavaScript 結(jié)構(gòu)允許你使用一個(gè)指令來選取所有的按鈕。我們?cè)谏厦鎸?shí)現(xiàn)這一目的的代碼看上去是這樣的:

var buttons = document.querySelectorAll('button');

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

這或許看上去比?onclick?屬性要長(zhǎng)一些，但是這會(huì)應(yīng)用于所有的按鈕，無論頁面上有多少個(gè)，和有多少個(gè)按鈕被添加或者移除。不需要對(duì) JavaScript 進(jìn)行任何修改。

注釋

正如使用 HTML 和?CSS 一樣，在你的 JavaScript 代碼中書寫會(huì)被瀏覽器忽略掉的注釋是可行的，并且注釋只用來為你的開發(fā)者同事提供關(guān)于代碼如何工作的指引(包括你，如果你在 6 個(gè)月后回到你的代碼并忘記了你做過些什么)。注釋非常有用，而且你應(yīng)該經(jīng)常使用它們，尤其是在更大的應(yīng)用程序中。這里有兩類注釋:

• 一個(gè)單行注釋書寫在一個(gè)雙正斜杠后?(//)，比如:

  // I am a comment

• 一個(gè)多行注釋書寫在字符串?/* 和?*/ 之間，?比如:

  /*
    I am also
    a comment
  */

所以舉例說，我們可以用 "注釋" 來為我們上一個(gè)演示的 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);
}

總結(jié)

所以你到這里了，你在?JavaScript 世界中的第一步。我們僅僅從理論開始，讓你熟悉為什么你會(huì)使用?JavaScript，和你可以用它做什么事情。在這過程中你看到了一些代碼示例并且學(xué)習(xí)到了 JavaScript 是如何與你網(wǎng)站中的其他代碼適配的。

JavaScript 現(xiàn)在或許看上去有一點(diǎn)令人畏懼，但不用擔(dān)心——在這門課中我們會(huì)逐步地引領(lǐng)你。在下一篇文章我們會(huì)全心投入到實(shí)踐，讓你專注其中并建立你自己的?JavaScript 例子。