JavaScript ( **JS **) 是一種輕量級解釋型的循榆，或是JIT編譯型的程序設計語言，有著 函數(shù)優(yōu)先 (First-class Function) 的編程語言查刻。雖然它是作為開發(fā)web頁面的腳本語言而出名的键兜，但是在很多非瀏覽器環(huán)境中也使用JavaScript，例如 node.js 和 Apache CouchDB赖阻。JS是一種基于原型蝶押、多范式的動態(tài)腳本語言，并且支持面向?qū)ο蠡鹋贰⒚钍胶吐暶魇剑ㄈ纾汉瘮?shù)式編程）編程風格棋电。了解更多 關于JavaScript茎截。
1.什么是JavaScript？
JavaScript（縮寫：JS）是一門成熟的動態(tài)編程語言赶盔，應用于HTML文檔是能夠在網(wǎng)站上提供動態(tài)交互能力企锌。
提示：我們將<script>元素放在 HTML 文件底部的原因是，瀏覽器解析 HTML 似乎按照代碼出現(xiàn)的順序來的于未。如果 JavaScript被首先讀取撕攒，它也應該影響下面的 HTML，但有時會出現(xiàn)問題烘浦，因為 JavaScript 會在 HTML 之前被加載抖坪，如果 JavaScript 代碼出現(xiàn)問題則 HTML 不會被加載。所以將 JavaScript 代碼放在底部是最好的選擇闷叉。
2.語言基礎速覽
變量（Variables）
Variables 是你存儲數(shù)據(jù)的容器擦俐。要聲明一個變量你需要使用關鍵字 var
，然后輸入任何你想要的名稱：
var myVariable;
提示：行末的分號表示語句結(jié)束握侧，不過這個分號不是必須的蚯瞧。只有在下一行語句以 (、[品擎、/埋合、+、-萄传、` 開頭時甚颂，你才需要加這個分號。
提示：你幾乎可以以任何名稱來命名一個變量盲再，不過我們有一些限制（點擊這里查看 變量命名規(guī)則 西设。） 如果你不確定,你可以 驗證你的變量名查看是否有效.
提示：JavaScript 是對大小寫敏感的——myVariable 與 myvariable 是不同的。如果你的代碼出現(xiàn)問題了答朋，查看一下大小寫有沒有錯誤贷揽！
注意變量有不同的 數(shù)據(jù)類型 ：
那么為什么我們需要變量呢？好吧梦碗，在編程時要做任何有趣的事我們必須用到變量禽绪。如果值沒有改變，那么你將無法動態(tài)地做任何事洪规，就像個性化一個祝福短信或是改變在圖片庫里展示的圖片印屁。
注釋
你可以在 JavaScript 中添加注釋，就像你在 CSS 中做過的一樣斩例。
/*
Everything in between is a comment.
*/
// This is a comment
運算符
Operator 運算符是一個根據(jù)兩個值（或變量）做出結(jié)果的代數(shù)符號雄人。在下面的表里你可以看到一些最簡單的運算符，后面的示例你可以在瀏覽器控制臺里嘗試一下。
提示：計算時如果混合幾種數(shù)據(jù)類型可能導致奇怪的結(jié)果础钠，所以請謹慎地正確地引用你的變量恰力，然后得出你期望的結(jié)果。比如輸入 "35" + "25" 到控制臺旗吁。為什么結(jié)果與你想象的不同踩萎？因為引號將數(shù)字轉(zhuǎn)換成了字符串，所以最終會連接兩個字符串而不是相加數(shù)字很钓。如果你輸入 35 + 25香府，你會得到正確的結(jié)果。
語句
語句是能夠讓你測試一個表達式是否返回 true 然后根據(jù)結(jié)果運行不同的代碼的結(jié)構码倦。最常用的語句形式是 if ... else. 下面是一個例子：
var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
alert('Yay, I love chocolate ice cream!');
} else {
alert('Awwww, but chocolate is my favorite...');
}
函數(shù)
Functions 是一種封裝你想重復使用的功能的方法企孩，這樣你就可以在任何時候想使用其中的功能就通過函數(shù)名稱來調(diào)用而不用老是重復寫下整段代碼。你在上面已經(jīng)見過一些函數(shù)了叹洲，比如：
var myVariable = document.querySelector('h1');
alert('hello!');
這些函數(shù)是瀏覽器內(nèi)置的柠硕，你可以在任何時候使用。
如果你看到一些東西長得像變量名但是有括號 — () — 在后面运提，這可能就是一個函數(shù)。函數(shù)通常包括 arguments — 一些必要的參數(shù)闻葵。它們在括號內(nèi)部, 如果有一個以上參數(shù)則使用逗號分開民泵。
好消息是你可以定義你自己的函數(shù) — 在下一個例子里我們會寫一個簡單的需要兩個參數(shù)來做乘法運算的函數(shù)。
function multiply(num1,num2) {
var result = num1 * num2;
return result;
}
提示：
return 語句告訴瀏覽器返回 result 變量以便使用槽畔。這是很有必要的栈妆，因為函數(shù)內(nèi)定義的變量只能在函數(shù)內(nèi)使用。這叫做作用域 scoping (詳見 變量作用域)
事件
在網(wǎng)頁上創(chuàng)建真正的交互厢钧，你需要使用事件 — 事件是能夠捕捉瀏覽器操作并且允許你運行代碼進行響應的代碼結(jié)構. 最明顯的事件是 點擊事件鳞尔，在鼠標點擊什么的時候被瀏覽器喚醒。 為了演示這個操作早直，嘗試將下面的代碼輸入到控制臺寥假，然后在當前頁面點擊：
document.querySelector('html').onclick = function() {
alert('Ouch! Stop poking me!');
}
我們有許多方法來將一個事件與元素綁定。在這里我們選擇了 HTML 元素然后將 onclick 屬性設置成包含單擊時我們想要運行的代碼的匿名函數(shù)霞扬。
3.改善示例網(wǎng)頁
現(xiàn)在我們已經(jīng)講述了一點 JavaScript 的基礎了糕韧，讓我們添加一些更酷的特性到示例網(wǎng)頁里來看看我們能做什么。
添加一個圖像轉(zhuǎn)換器
這一部分我們將添加另一個圖片到我們的站點喻圃，并且添加簡單的 JavaScript 使得單擊圖片時轉(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.添加個性化的歡迎信息
接下來我們會添加另一段代碼，在用戶初次進入站點時將網(wǎng)頁的標題改成一段個性化的歡迎信息斧拍。歡迎信息會持續(xù)到用戶離開網(wǎng)頁雀扶。我們還會添加一個選項來在必要的時候改變用戶并且改變歡迎信息。
<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)在當你第一次訪問網(wǎng)頁是肆汹，它將詢問你的用戶名然后向你發(fā)出一段有個性的信息愚墓。你可以在任何時候通過點擊按鈕來改變 name 予权。告訴你一個額外的福利，因為 name 是存放在 localStorage 里的转绷，它會持續(xù)到網(wǎng)站關閉伟件，所以這段個性化的信息在你重新打開瀏覽器時將仍然在這！
5.JavaScript 在你的頁面上做什么议经？
在這我們會開始確實地查看一些代碼斧账，而在這樣做的同時，探索當你在你的頁面上運行 JavaScript 的時候?qū)嶋H發(fā)生了什么煞肾。
讓我們簡單地回顧當你在瀏覽器中讀取一個網(wǎng)頁時發(fā)生什么（在文章 How CSS works 中第一次談及到）咧织。 當你在瀏覽器中讀取一個網(wǎng)頁，你在一個實行環(huán)境（瀏覽器標簽）中運行你的代碼（HTML, CSS 和 JavaScript）籍救。這就像是一個工廠习绢，獲取原材料（代碼）然后出產(chǎn)一個產(chǎn)品（網(wǎng)頁）。
在 HTML 和 CSS 已經(jīng)被集合和組裝成一個網(wǎng)頁后蝙昙，瀏覽器的 JavaScript 引擎執(zhí)行 JavaScript闪萄。這保證了當 JavaScript 開始運行時，網(wǎng)頁的結(jié)構和樣式已經(jīng)在該出現(xiàn)的地方了奇颠。
這是一個好事情败去，正如 JavaScript 的普遍用處是通過 DOM API（如之前提及的那樣）動態(tài)地修改 HTML 和 CSS 來更新用戶交界面。如果 JavaScript 在 HTML 和 CSS 組裝成一個瀏覽器之前加載運行烈拒，那么會發(fā)生錯誤圆裕。
6.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)行拢，然后給它附上一個事件監(jiān)聽器 (line 3) 使得當這個段落被點擊時，updateName() 代碼塊 (lines 5–8) 會被運行焊傅。updateName() 代碼塊（這類可以重復使用的代碼塊被稱為“函數(shù)”）向用戶請求一個新的名字剂陡，然后把這個名字插入到段落中以更新顯示。
如果你互換了代碼里最初兩行的順序狐胎，它將不會工作——取而代之的是鸭栖，你會在瀏覽器的開發(fā)者控制臺中得到一個錯誤——TypeError: para is undefined [類型錯誤：para沒有被定義]。這意味著 para 對象還不存在握巢，所以我們不能為它增添一個事件監(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';
頁面上的每個元素都有一個style屬性，它本身包含一個對象，其屬性包含應用于該元素的所有內(nèi)聯(lián)CSS樣式溅话。 這允許我們使用JavaScript在元素上動態(tài)設置新的CSS樣式晓锻。
