JavaScript基礎(chǔ)

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

什么是JavaScript？

---

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

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

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

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

一個 "hello world"示例

---

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

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

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

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

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

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

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

發(fā)生了什么？

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

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

語言基礎(chǔ)速覽

---

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

變量(Variables)

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

var myVariable;

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

myVariable = 'Bob';

你可以通過變量名稱讀取變量：

myVariable;

你也可以將這些操作寫在一行：

var myVariable = 'Bob';

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

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

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

那么為什么我們需要變量呢？好吧，在編程時要做任何有趣的事我們必須用到變量。如果值沒有改變，那么你將無法動態(tài)地做任何事，就像個性化一個祝福短信或是改變在圖片庫里展示的圖片。

注釋

你可以在 JavaScript 中添加注釋，就像你在 CSS 中做過的一樣。

/*
Everything in between is a comment.
*/

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

// This is a comment

運算符

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

還有很多運算符供我們探索，不過暫時我們只需要這么多。點擊 表達式和運算符 查看完整列表。

語句

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

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

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

函數(shù)

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

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

2. alert('hello!');

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

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

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

好消息是你可以定義你自己的函數(shù) — 在下一個例子里我們會寫一個簡單的需要兩個參數(shù)來做乘法運算的函數(shù)。

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

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

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

事件

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

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

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

注意到

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

相當于

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

只是更加簡潔。

改善示例網(wǎng)頁

---

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

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

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

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

4. 打開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. 保存所有文件然后用瀏覽器打開index.html。選擇當你點擊圖片時，它應(yīng)該會轉(zhuǎn)換成另一張圖片！

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

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

添加個性化的歡迎信息

接下來我們會添加另一段代碼，在用戶初次進入站點時將網(wǎng)頁的標題改成一段個性化的歡迎信息。歡迎信息會持續(xù)到用戶離開網(wǎng)頁。我們還會添加一個選項來在必要的時候改變用戶并且改變歡迎信息。

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

   <button>Change user</button>

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

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

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

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

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

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

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

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

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

結(jié)論

---

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

如果你有遇到問題，你可以將你的代碼與我們GitHub上的 代碼 做對比。

在這里，我們只提到了非常有限的 HTML 知識，要查看更多，請訪問我們的 JavaScript指南。