JavaScript ( **JS **) 是一種輕量級(jí)解釋型的，或是JIT編譯型的程序設(shè)計(jì)語(yǔ)言，有著 函數(shù)優(yōu)先 (First-class Function) 的編程語(yǔ)言。雖然它是作為開發(fā)web頁(yè)面的腳本語(yǔ)言而出名的，但是在很多非瀏覽器環(huán)境中也使用JavaScript，例如 node.js 和 Apache CouchDB。JS是一種基于原型、多范式的動(dòng)態(tài)腳本語(yǔ)言，并且支持面向?qū)ο?、命令式和聲明式（如：函?shù)式編程）編程風(fēng)格。了解更多 關(guān)于JavaScript。

1.什么是JavaScript？
JavaScript（縮寫：JS）是一門成熟的動(dòng)態(tài)編程語(yǔ)言，應(yīng)用于HTML文檔是能夠在網(wǎng)站上提供動(dòng)態(tài)交互能力。

提示：我們將<script>元素放在 HTML 文件底部的原因是，瀏覽器解析 HTML 似乎按照代碼出現(xiàn)的順序來(lái)的。如果 JavaScript被首先讀取，它也應(yīng)該影響下面的 HTML，但有時(shí)會(huì)出現(xiàn)問題，因?yàn)?JavaScript 會(huì)在 HTML 之前被加載，如果 JavaScript 代碼出現(xiàn)問題則 HTML 不會(huì)被加載。所以將 JavaScript 代碼放在底部是最好的選擇。

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

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

var myVariable;

提示：行末的分號(hào)表示語(yǔ)句結(jié)束，不過這個(gè)分號(hào)不是必須的。只有在下一行語(yǔ)句以 (、[、/、+、-、` 開頭時(shí)，你才需要加這個(gè)分號(hào)。

提示：你幾乎可以以任何名稱來(lái)命名一個(gè)變量，不過我們有一些限制（點(diǎn)擊這里查看 變量命名規(guī)則 。） 如果你不確定,你可以 驗(yàn)證你的變量名查看是否有效.

提示：JavaScript 是對(duì)大小寫敏感的——myVariable 與 myvariable 是不同的。如果你的代碼出現(xiàn)問題了，查看一下大小寫有沒有錯(cuò)誤！

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

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

注釋

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

/*
Everything in between is a comment.
*/

// This is a comment

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

提示：計(jì)算時(shí)如果混合幾種數(shù)據(jù)類型可能導(dǎo)致奇怪的結(jié)果，所以請(qǐng)謹(jǐn)慎地正確地引用你的變量，然后得出你期望的結(jié)果。比如輸入 "35" + "25" 到控制臺(tái)。為什么結(jié)果與你想象的不同？因?yàn)橐?hào)將數(shù)字轉(zhuǎn)換成了字符串，所以最終會(huì)連接兩個(gè)字符串而不是相加數(shù)字。如果你輸入 35 + 25，你會(huì)得到正確的結(jié)果。

語(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...');    
}

函數(shù)

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

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

alert('hello!');

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

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

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

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

提示：
return 語(yǔ)句告訴瀏覽器返回 result 變量以便使用。這是很有必要的，因?yàn)楹瘮?shù)內(nèi)定義的變量只能在函數(shù)內(nèi)使用。這叫做作用域 scoping (詳見 變量作用域)

事件

在網(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ù)。

3.改善示例網(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)換圖片。

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');
    }
}

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

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

<button>Change user</button>

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

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

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

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

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

5.JavaScript 在你的頁(yè)面上做什么？

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

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

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

這是一個(gè)好事情，正如 JavaScript 的普遍用處是通過 DOM API（如之前提及的那樣）動(dòng)態(tài)地修改 HTML 和 CSS 來(lái)更新用戶交界面。如果 JavaScript 在 HTML 和 CSS 組裝成一個(gè)瀏覽器之前加載運(yùn)行，那么會(huì)發(fā)生錯(cuò)誤。

6.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)聽器。

7.Playing with browser objects

Let's play with some browser objects a bit.

First of all open your program up in a browser.

Next, open your browser developer tools, and make sure the JavaScript console tab is open.

Type in a Objectname and the console will show you that the variable contains an element. You'll also notice that the console autocompletes object names that exist inside the execution environment, including your variables!

Now type in the following: Objectname.value = 'Hello';

The value property represents the current value entered into the text field. You'll see that by entering this command, we've changed what that is!

Now try typing in another Objectname and pressing return. The console will show you that the variable contains element.

Now try entering the following line: anotherObjectname.value

The browser will return undefined, because value doesn't exist on paragraphs.

To change the text inside a paragraph, you need the [textContent
](https://developer.mozilla.org/zh CN/docs/Web/API/Node/textContent) property instead. Try this:anotherObjectname.textContent = 'Where is my paragraph?';

Now for some fun stuff. Try entering the below lines, one by one: Objectname.style.backgroundColor = 'yellow';Objectname.style.fontSize = '200%';Objectname.style.padding = '10px';Objectname.style.boxShadow = '3px 3px 6px black';

頁(yè)面上的每個(gè)元素都有一個(gè)style屬性，它本身包含一個(gè)對(duì)象，其屬性包含應(yīng)用于該元素的所有內(nèi)聯(lián)CSS樣式。 這允許我們使用JavaScript在元素上動(dòng)態(tài)設(shè)置新的CSS樣式。