JavaScript基礎(chǔ)

JavaScript是一門(mén)為你的網(wǎng)站添加交互功能的編程語(yǔ)言。（例如：游戲，響應(yīng)按下或者以表單輸入的數(shù)據(jù)，動(dòng)態(tài)樣式，動(dòng)畫(huà)等）。本文可以幫助您開(kāi)始使用這種令人興奮的語(yǔ)言，并給你一個(gè)什么是可能的想法。

什么是JavaScript？

---

JavaScript（縮寫(xiě)：JS）是一門(mén)成熟的動(dòng)態(tài)編程語(yǔ)言，應(yīng)用于HTML文檔時(shí)，可以在網(wǎng)站上提供動(dòng)態(tài)交互性。它是Mozilla項(xiàng)目聯(lián)合創(chuàng)始人，Mozilla基金會(huì)和Mozilla公司的Brendan Eich發(fā)明的。

JavaScript是非常通用的。你可以從簡(jiǎn)單做起，比如輪播、相冊(cè)，浮動(dòng)布局和按鈕點(diǎn)擊事件。隨著你學(xué)習(xí)的深入，你可以創(chuàng)建游戲、2d和3d動(dòng)畫(huà)、數(shù)據(jù)庫(kù)驅(qū)動(dòng)的綜合應(yīng)用程序，以及更多！

JavaScript本身是非常簡(jiǎn)潔卻非常靈活的。開(kāi)發(fā)者們編寫(xiě)了非常多的工具補(bǔ)充JavaScript語(yǔ)言功能。使得花最小的代價(jià)獲得大量額外功能。這些功能包括：

• 應(yīng)用編程接口 (APIs) 。內(nèi)置于瀏覽器中提供像動(dòng)態(tài)編寫(xiě) HTML 和 CSS ，抓取操控用戶(hù)攝像頭的數(shù)據(jù)流和操作3D圖像和音頻樣品。
• 第三方 APIs 允許開(kāi)發(fā)者將其他公司網(wǎng)站如 Twitter 或 Facebook 與自己的網(wǎng)站合并功能。
• 你可以將第三方框架和庫(kù)應(yīng)用于你的 HTML ，以快速構(gòu)建網(wǎng)站和應(yīng)用。

一個(gè) "hello world"示例

---

上面的內(nèi)容聽(tīng)起來(lái)非常激動(dòng)人心，而且也應(yīng)該如此——JavaScript是最讓人激動(dòng)的Web科技之一，而且你對(duì)它掌握的越多，你的網(wǎng)頁(yè)將進(jìn)入一個(gè)更有創(chuàng)造力和更加強(qiáng)大的層次。

然而，JavaScript 比 HTML 和 CSS 學(xué)習(xí)起來(lái)更加復(fù)雜，所以你需要一步一步謹(jǐn)慎地跟隨我們。首先，我們將向你展示怎么添加一些基本的 JavaScript 腳本到你的頁(yè)面中來(lái)創(chuàng)造一個(gè) "hello world"示例（編程世界的標(biāo)準(zhǔn)示例）。

1. 首先，去到你的測(cè)試目錄，創(chuàng)建一個(gè)“scripts”文件夾（沒(méi)有引號(hào)）。然后在新建的scripts文件夾下創(chuàng)建一個(gè)新的main.js文件。
2. 接下來(lái)，打開(kāi)你的index.html文件，在</body> 閉合標(biāo)簽之前輸入這一行代碼：

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

3. 這基本上與引入 CSS 的<link>元素功能相同——它將 JavaScript 引入了頁(yè)面，所以它將影響 HTML（包括 CSS 和其他頁(yè)面上的任何內(nèi)容）。 
4. 現(xiàn)在將下面的代碼添加到main.js文件中：

   var myHeading = document.querySelector('h1');
   myHeading.innerHTML = 'Hello world!';

5. 最后，確保 HTML 和 JavaScript 文件已經(jīng)保存好，然后用瀏覽器打開(kāi)index.html。你應(yīng)該看到如下內(nèi)容：

發(fā)生了什么？

你的標(biāo)題通過(guò)JavaScript被更改為了"Hello world!"。我們首先使用一個(gè)函數(shù)querySelector()來(lái)獲取標(biāo)題這個(gè)對(duì)象，然后將其儲(chǔ)存在一個(gè)叫myHeading的變量中。這與我們 CSS 中的選擇符非常相像。如果你想對(duì)某個(gè)元素進(jìn)行操作，首先你得先選擇它。

在那之后，我們將myHeading的屬性innerHTML（代表這個(gè)標(biāo)題的內(nèi)容）賦予了"Hello world!"這個(gè)值。

語(yǔ)言基礎(chǔ)速覽

---

來(lái)讓我們解釋一下 JavaScript 這門(mén)語(yǔ)言的基本特性，以便讓你們更好地了解它是怎么運(yùn)作的。更棒的是，這些特性對(duì)編程語(yǔ)言來(lái)說(shuō)很常見(jiàn)。如果你能夠了解這些基礎(chǔ)，你應(yīng)該能更好地在編程的世界里徜徉！

變量(Variables)

Variables 是你存儲(chǔ)數(shù)據(jù)的容器。要聲明一個(gè)變量你需要使用關(guān)鍵字var，然后輸入任何你想要的名稱(chēng)：

var myVariable;

定義一個(gè)變量之后，你可以賦予它一個(gè)值：

myVariable = 'Bob';

你可以通過(guò)變量名稱(chēng)讀取變量：

myVariable;

你也可以將這些操作寫(xiě)在一行：

var myVariable = 'Bob';

在給變量賦值之后，你可以改變變量的值：

var myVariable = 'Bob';
myVariable = 'Steve';

注意變量有不同的 數(shù)據(jù)類(lèi)型 ：

那么為什么我們需要變量呢？好吧，在編程時(shí)要做任何有趣的事我們必須用到變量。如果值沒(méi)有改變，那么你將無(wú)法動(dòng)態(tài)地做任何事，就像個(gè)性化一個(gè)祝福短信或是改變?cè)趫D片庫(kù)里展示的圖片。

注釋

你可以在 JavaScript 中添加注釋?zhuān)拖衲阍?CSS 中做過(guò)的一樣。

/*
Everything in between is a comment.
*/

如果你的注釋只有一行，我們經(jīng)常將它們更簡(jiǎn)單地放在兩個(gè)斜杠之后，就像這樣：

// This is a comment

運(yùn)算符

 operator 運(yùn)算符是一個(gè)根據(jù)兩個(gè)值(或變量)做出結(jié)果的代數(shù)符號(hào)。在下面的表里你可以看到一些最簡(jiǎn)單的運(yùn)算符，后面的示例你可以在瀏覽器控制臺(tái)里嘗試一下。

還有很多運(yùn)算符供我們探索，不過(guò)暫時(shí)我們只需要這么多。點(diǎn)擊 表達(dá)式和運(yùn)算符 查看完整列表。

語(yǔ)句

語(yǔ)句是能夠讓你測(cè)試一個(gè)表達(dá)式是否返回 true 然后根據(jù)結(jié)果運(yùn)行不同的代碼的結(jié)構(gòu)。最常用的語(yǔ)句形式是if ... else。下面是一個(gè)例子：

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

if ( ... )里面的表達(dá)式就是測(cè)試 — 這里使用了運(yùn)算符（上面所提到的）來(lái)比較變量iceCream與字符串chocolate是否相等。 如果返回true，運(yùn)行前面一塊的代碼。如果返回 false，跳過(guò)第一段直接運(yùn)行else之后的代碼。

函數(shù)

Functions 是一種封裝你想重復(fù)使用的功能的方法，這樣你就可以在任何時(shí)候想使用其中的功能就通過(guò)函數(shù)名稱(chēng)來(lái)調(diào)用而不用老是重復(fù)寫(xiě)下整段代碼。你在上面已經(jīng)見(jiàn)過(guò)一些函數(shù)了，比如：

1. var myVariable = document.querySelector('h1');

2. alert('hello!');

這些函數(shù)是瀏覽器內(nèi)置的，你可以在任何時(shí)候使用。

如果你看到一些東西長(zhǎng)得像變量名但是有括號(hào) —()— 在后面，這可能就是一個(gè)函數(shù)。函數(shù)通常包括 arguments — 一些必要的參數(shù)。它們?cè)诶ㄌ?hào)內(nèi)部, 如果有一個(gè)以上參數(shù)則使用逗號(hào)分開(kāi)。

比如，alert()函數(shù)在瀏覽器窗口內(nèi)彈出一個(gè)警告框，但是我們需要給參數(shù)傳入一個(gè)字符串以告訴函數(shù)應(yīng)該在警告框里寫(xiě)什么。

好消息是你可以定義你自己的函數(shù) — 在下一個(gè)例子里我們會(huì)寫(xiě)一個(gè)簡(jiǎn)單的需要兩個(gè)參數(shù)來(lái)做乘法運(yùn)算的函數(shù)。

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

嘗試在控制臺(tái)運(yùn)行這個(gè)函數(shù)，然后自己嘗試幾次不同的參數(shù)，比如：

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

事件

在網(wǎng)頁(yè)上創(chuàng)建真正的交互，你需要使用事件 — 事件是能夠捕捉瀏覽器操作并且允許你運(yùn)行代碼進(jìn)行響應(yīng)的代碼結(jié)構(gòu)。最明顯的事件是 點(diǎn)擊事件，在鼠標(biāo)點(diǎn)擊什么的時(shí)候被瀏覽器喚醒。為了演示這個(gè)操作，嘗試將下面的代碼輸入到控制臺(tái)，然后在當(dāng)前頁(yè)面點(diǎn)擊：

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

我們有許多方法來(lái)將一個(gè)事件與元素綁定。在這里我們選擇了 HTML 元素然后將onclick屬性設(shè)置成包含單擊時(shí)我們想要運(yùn)行的代碼的匿名函數(shù)。

注意到

document.querySelector('html').onclick = function() {};

相當(dāng)于

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

只是更加簡(jiǎn)潔。

改善示例網(wǎng)頁(yè)

---

現(xiàn)在我們已經(jīng)講述了一點(diǎn) JavaScript 的基礎(chǔ)了，讓我們添加一些更酷的特性到示例網(wǎng)頁(yè)里來(lái)看看我們能做什么。

添加一個(gè)圖像轉(zhuǎn)換器

這一部分我們將添加另一個(gè)圖片到我們的站點(diǎn)，并且添加簡(jiǎn)單的 JavaScript 使得單擊圖片時(shí)轉(zhuǎn)換圖片。

1. 首先，找到另一個(gè)你想用來(lái)裝飾你的網(wǎng)頁(yè)的圖片。確保它與你第一張圖片尺寸相同，或者盡可能相似。
2. 將圖片保存在images文件夾。
3. 重命名圖片為 firefox2.png

4. 打開(kāi)main.js文件，輸入下面的 JavaScript 代碼（如果你的 hello world JavaScript 仍然在這，刪除它們）：

   var myImage = document.querySelector('img');
   
   myImage.onclick = function() {
       var mySrc = myImage.getAttribute('src');
       if(mySrc === 'images/firefox-icon.png') {
         myImage.setAttribute ('src','images/firefox2.png');
       } else {
         myImage.setAttribute ('src','images/firefox-icon.png');
       }
   }

5. 保存所有文件然后用瀏覽器打開(kāi)index.html。選擇當(dāng)你點(diǎn)擊圖片時(shí)，它應(yīng)該會(huì)轉(zhuǎn)換成另一張圖片！

在這里，我們將 image 元素的引用存放在myImage變量里。接下來(lái)，我們將這個(gè)變量的onclick的事件與一個(gè)匿名函數(shù)綁定。選擇，每次圖片被點(diǎn)擊時(shí)：

1. 我們找到 image 元素的src屬性
2. 我們使用一個(gè)語(yǔ)句來(lái)判斷src的值是否等于原始圖像的路徑：
   1. 如果是，我們將src的值改為第二張圖片的路徑，強(qiáng)制在<image>內(nèi)讀取另一張圖片。
   2. 如果不是（意味著它肯定已經(jīng)被更改過(guò)），我們把src的值重新設(shè)置為原始圖片的路徑，將它返回到原先的樣子。

添加個(gè)性化的歡迎信息

接下來(lái)我們會(huì)添加另一段代碼，在用戶(hù)初次進(jìn)入站點(diǎn)時(shí)將網(wǎng)頁(yè)的標(biāo)題改成一段個(gè)性化的歡迎信息。歡迎信息會(huì)持續(xù)到用戶(hù)離開(kāi)網(wǎng)頁(yè)。我們還會(huì)添加一個(gè)選項(xiàng)來(lái)在必要的時(shí)候改變用戶(hù)并且改變歡迎信息。

1. 在index.html里，在<script>元素前添加下一行代碼：

   <button>Change user</button>

2. 在main.js里，在文件底部添加下面的代碼，必須一字不漏 — 這會(huì)抓取 按鈕 和 標(biāo)題 的引用并將其存放在變量里：

   var myButton = document.querySelector('button');
   var myHeading = document.querySelector('h1');

3. 現(xiàn)在添加下面的函數(shù)來(lái)設(shè)置個(gè)性化內(nèi)容——這暫時(shí)不會(huì)起任何作用，不過(guò)我們后面會(huì)用到：

   function setUserName() {
     var myName = prompt('Please enter your name.');
     localStorage.setItem('name', myName);
     myHeading.innerHTML = 'Mozilla is cool, ' + myName;
   }

   函數(shù)包含了一個(gè)prompt()函數(shù)， 會(huì)彈出一個(gè)對(duì)話(huà)框， 有一點(diǎn)像alert()只不過(guò)prompt()需要用戶(hù)輸入數(shù)據(jù)，而且在用戶(hù)點(diǎn)擊 OK 后將數(shù)據(jù)存儲(chǔ)在變量里。在這里，我們要求用戶(hù)輸入姓名。接下來(lái)，我們調(diào)用一個(gè)叫localStorage的API，它允許我們將數(shù)據(jù)存儲(chǔ)在瀏覽器里以供后續(xù)調(diào)用。我們使用 localStorage 的setItem()函數(shù)來(lái)創(chuàng)建并將數(shù)據(jù)存儲(chǔ)在'name'參數(shù)里，然后將其值設(shè)置為包含用戶(hù)輸入的姓名的myName變量。 最后，我們將標(biāo)題的innerHTML屬性設(shè)置成加上用戶(hù)姓名的字符串。
4. 接下來(lái)，將if ... else塊添加進(jìn)去— 我們將這稱(chēng)作初始化代碼，因?yàn)樗诔醮巫x取時(shí)重置了應(yīng)用程序：

   if(!localStorage.getItem('name')) {
     setUserName();
   } else {
     var storedName = localStorage.getItem('name');
     myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
   }

   這段代碼首先用一個(gè)非運(yùn)算符（邏輯非）來(lái)檢查name數(shù)據(jù)是否存在。如果不存在，setUserName()函數(shù)就會(huì)運(yùn)行來(lái)創(chuàng)建它。如果存在（比如用戶(hù)在之前創(chuàng)建過(guò)）我們通過(guò) getItem()調(diào)用存儲(chǔ)過(guò)的 name 然后將innerHTML設(shè)置為加上用戶(hù)姓名的字符串，就像我們?cè)?code>setUserName()里做的一樣。
5. 最后，將下面的onclick事件處理器綁定到 按鈕 上，這樣當(dāng)我們點(diǎn)擊時(shí)，setUserName()函數(shù)就會(huì)運(yùn)行。這允許用戶(hù)在任何想要的時(shí)候通過(guò)點(diǎn)擊按鈕來(lái)設(shè)置新的 name 。

   myButton.onclick = function() {
     setUserName();
   }
   

現(xiàn)在當(dāng)你第一次訪問(wèn)網(wǎng)頁(yè)時(shí)，它將詢(xún)問(wèn)你的用戶(hù)名然后向你發(fā)出一段有個(gè)性的信息。你可以在任何時(shí)候通過(guò)點(diǎn)擊按鈕來(lái)改變 name 。告訴你一個(gè)額外的福利，因?yàn)?name 是存放在 localStorage 里的，它會(huì)持續(xù)到網(wǎng)頁(yè)關(guān)閉，所以這段個(gè)性化的信息在你重新打開(kāi)瀏覽器時(shí)將仍然在這！

結(jié)論

---

如果你一直跟隨我們的指導(dǎo)，那么到最后你應(yīng)該得到如下的一個(gè)頁(yè)面（你也可以在 這里 查看我們的版本）：

如果你有遇到問(wèn)題，你可以將你的代碼與我們GitHub上的 代碼 做對(duì)比。

在這里，我們只提到了非常有限的 HTML 知識(shí)，要查看更多，請(qǐng)?jiān)L問(wèn)我們的 JavaScript指南。