這是全棧數(shù)據(jù)工程師養(yǎng)成攻略系列教程的第二十一期：21 Web基礎(chǔ) 網(wǎng)頁的關(guān)節(jié)JS歌焦。
我們已經(jīng)了解了Web三件套中的HTML和CSS飞几，現(xiàn)在讓我們來學(xué)習(xí)下最后的JS。
什么是JS
JS的全稱是JavaScript独撇，但是和Java關(guān)系并不大屑墨。之所以將JS比如網(wǎng)頁的關(guān)節(jié)，是因為JS可以動態(tài)地操作DOM元素纷铣，例如插入和刪除DOM元素卵史，或者修改已有元素的樣式和內(nèi)容等。
JS是Web網(wǎng)頁中的腳本編程語言搜立，因此可以用JS來完成一些任務(wù)以躯，例如實現(xiàn)一些數(shù)值計算，或者編寫Web網(wǎng)頁中的事件響應(yīng)函數(shù)啄踊。Web網(wǎng)頁中的事件包括鼠標(biāo)懸浮忧设、鼠標(biāo)點擊、鼠標(biāo)滾動颠通、鍵盤輸入等址晕，可以使用JS監(jiān)聽這些事件，并且在事件發(fā)生時進行相應(yīng)的操作和處理顿锰，從而實現(xiàn)動態(tài)的頁面更新和用戶交互谨垃。
使用JS
使用JS的方法有兩種：引入外部.js文件；直接在HTML中寫JS撵儿。
如同引入外部.css文件一樣乘客，可以新建一個script.js文件，然后在里面編寫JS代碼淀歇，例如輸入console.log("Hello World!");易核，然后在HTML的head中使用script標(biāo)簽引入，src屬性指定了.js文件的相對路徑浪默。
<script src="script.js"></script>
運行寫好的HTML文件牡直，打開Chrome的開發(fā)者工具，在Console標(biāo)簽頁中即可看到打印出來的Hello World!纳决。console.log()是JS提供的打印函數(shù)碰逸，好比Python的print，可以在Web網(wǎng)頁中打印變量并進行調(diào)試阔加。
如果是直接在HTML中寫JS代碼饵史，則如同CSS的style標(biāo)簽一樣，JS代碼需要寫在script標(biāo)簽之中，script標(biāo)簽可以放在HTML網(wǎng)頁的任意位置胳喷，每條JS代碼之后應(yīng)當(dāng)使用分號;結(jié)束湃番。
<script>
console.log("Hello World!");
</script>
JS基礎(chǔ)
在實際項目中我們一般很少直接寫原生JS代碼，因為已經(jīng)有相當(dāng)多的JS高級封裝框架吭露。這些框架在原生JS語法的基礎(chǔ)上進一步開發(fā)吠撮，能夠提供更方便更豐富的功能，例如后續(xù)章節(jié)中將介紹的JQuery讲竿，以及目前十分流行的Angular.js泥兰、React.js和Vue.js等前端框架。盡管如此题禀，我們?nèi)孕枰私庖恍㎎S基礎(chǔ)內(nèi)容鞋诗。
使用document.write()可以向body中寫入DOM元素，以下代碼向body中添加了一個h1標(biāo)簽投剥。不過這一函數(shù)比較雞肋师脂，因為無法靈活地控制寫入的內(nèi)容和位置。
document.write('<h1>Hello World!</h1>');
和Python一樣江锨，JS也是一種弱變量類型的編程語言。使用關(guān)鍵字var聲明一個變量糕篇，聲明時無需指定其變量類型啄育。和Python一樣，JS中常用的基礎(chǔ)變量類型包括數(shù)值（整數(shù)拌消、浮點數(shù)）和字符串挑豌。//表示JS注釋，如同Python中的#一樣墩崩。
var a = 1; // 整數(shù)
var b = 1.1; // 浮點數(shù)
var c = 'Hello'; //字符串
console.log(a, b, c);
Python中用列表和字典分別來存儲序列和鍵值對氓英，在JS中同樣有相應(yīng)的數(shù)據(jù)結(jié)構(gòu)，只不過是換了個名稱鹦筹，分別叫做數(shù)組和對象铝阐。它們的使用方法，包括聲明铐拐、添加元素徘键、訪問元素、修改元素和刪除元素等遍蟋，和Python中的列表和字典都是大同小異的吹害。
var d = []; // 數(shù)組
// 添加元素
// Python中的列表是append()
d.push(1);
d.push(2);
console.log(d);
// 打印下標(biāo)為1，即第二個元素
console.log(d[1]);
// 數(shù)組長度虚青，Python中是用len()
console.log(d.length);
var e = {}; // 對象
// 添加key和value
e['k1'] = 1;
e['k2'] = 2;
e['k3'] = 'Hello';
console.log(e);
console.log(e['k1']);
在Chrome開發(fā)者工具的Console標(biāo)簽頁中可以進行調(diào)試并觀察打印信息它呀，可以看到數(shù)組和對象分別是用Array[]和Object{}表示的。
使用document.getElementById()可以根據(jù)給定的ID獲取相應(yīng)的DOM元素并返回一個DOM對象，假設(shè)我們在body里面寫了一個h1標(biāo)簽：
<h1 id="title">標(biāo)題內(nèi)容</h1>
然后便可以在JS中通過document.getElementById()函數(shù)搜索并獲取到這個h1纵穿。通過操作變量t烟号，我們可以對相應(yīng)的h1標(biāo)簽進行一些操作，例如獲取其文本內(nèi)容政恍、修改其文本內(nèi)容汪拥、向其中添加DOM元素、將其刪除等篙耗。
var t = document.getElementById('title');
console.log(t);
再來看一下onclick迫筑，即DOM元素的鼠標(biāo)點擊響應(yīng)事件。以下代碼以button標(biāo)簽為例宗弯，當(dāng)鼠標(biāo)點擊這一按鈕時脯燃，剛才提到的h1標(biāo)簽文本將發(fā)生變化。HTML部分代碼如下蒙保，可以將onclick當(dāng)作DOM元素的屬性來理解辕棚，當(dāng)鼠標(biāo)點擊這一按鈕時，將觸發(fā)JS中定義的myFunc()函數(shù)邓厕。
<h1 id="title">標(biāo)題內(nèi)容</h1>
<button type="button" onclick="myFunc()">點我</button>
JS部分代碼如下逝嚎，首先我們需要定義myFunc()函數(shù)。JS使用function定義函數(shù)详恼，和Python中的函數(shù)一樣补君，也是將一些可重用的代碼定義成函數(shù)，從而通過調(diào)用函數(shù)即可方便地執(zhí)行一系列代碼昧互。JS函數(shù)也支持提供參數(shù)挽铁，從而根據(jù)提供的參數(shù)完成更靈活更復(fù)雜的功能。在DOM對象之后使用.可以訪問其自帶的一些內(nèi)部屬性和函數(shù)敞掘，例如innerHTML屬性即DOM對象的HTML內(nèi)容叽掘，可以設(shè)置為純文本，也可以在其中包含HTML標(biāo)簽玖雁。編寫代碼并刷新網(wǎng)頁更扁，可以發(fā)現(xiàn)點擊按鈕之后，h1標(biāo)簽的內(nèi)容將會被替換成兩個p茄菊。
function myFunc (argument) {
var t = document.getElementById('title');
t.innerHTML = '<p>按鈕被點擊了</p><p>按鈕被點擊了</p>';
}
因此疯潭，我們可以大概總結(jié)出JS動態(tài)操作DOM元素的流程。要么一開始直接在script中進行相關(guān)操作面殖，要么通過onclick等屬性綁定相應(yīng)的事件響應(yīng)函數(shù)竖哩，然后在響應(yīng)函數(shù)里完成一些操作，從而實現(xiàn)動態(tài)交互的網(wǎng)頁效果脊僚。
JS中的運算符包括算術(shù)運算符相叁、比較運算符遵绰、賦值運算符、邏輯運算符等增淹，和Python類似椿访。
JS中也有條件和循環(huán)，分別使用小括號()和大括號{}顯式指定判斷條件和主體部分虑润，而Python則是依靠適當(dāng)?shù)目s進來隱式指定成玫。對于條件，需要注意拳喻，但凡出現(xiàn)if的地方都必須加上判斷條件哭当。JS循環(huán)以for循環(huán)為主，可以用來遍歷數(shù)組和對象冗澈。
// 條件
if (a == 1) {
console.log('a equal 1');
}
else {
console.log('a not equal 1');
}
if (a == 1) {
console.log('a equal 1');
}
else if (a == 2) {
console.log('a equal 2');
}
else {
console.log('a not equal 1, 2');
}
// 循環(huán)遍歷數(shù)組
for (var i = 0; i < d.length; i++) {
console.log(i, d[i]);
}
// 循環(huán)遍歷對象
for (var key in e) {
console.log(key, e[key]);
}
現(xiàn)在我們應(yīng)該能逐漸體會到各種編程語言的一些通性钦勘，雖然不同的編程語言都有各自的特點和強項，但核心的編程思想都是相通和類似的亚亲，不同的無非只是一些使用上的細(xì)節(jié)彻采。因此，熟練掌握一門自己最習(xí)慣使用的編程語言捌归，同時了解其他多門輔助的編程語言肛响，對于提高自己的理解能力和編程能力都是有很有幫助的。
除了以上提及的鼠標(biāo)點擊事件陨溅，JS中還支持很多其他類型的事件终惑，例如鼠標(biāo)懸浮、鼠標(biāo)滾動门扇、鍵盤輸入等，我們將在后續(xù)介紹JQuery的時候再進行詳細(xì)討論偿渡。
補充學(xué)習(xí)
關(guān)于JS的更多內(nèi)容可以參考以下鏈接臼寄，http://www.runoob.com/js/js-tutorial.html，里面提供了更為詳細(xì)和系統(tǒng)的講解溜宽，并結(jié)合大量實例代碼加以鞏固吉拳，推薦完整地瀏覽和嘗試一遍。
掌握HTML适揉、CSS留攒、JS三件套之后，我們對Web基礎(chǔ)內(nèi)容應(yīng)當(dāng)具備了一個大致的了解嫉嘀。后續(xù)的學(xué)習(xí)內(nèi)容包括一些進階知識炼邀，例如基于JS、可以更加方便操作DOM元素的JQuery剪侮。Bootstrap是一款輕量的前端封裝拭宁，包括CSS和JS兩部分。前者提供了一些寫好的CSS class，這樣我們通過class的名稱便可以快速使用寫好的樣式杰标；后者基于JS提供了一些封裝好的可以直接使用的網(wǎng)頁動態(tài)功能兵怯，例如標(biāo)簽頁、模態(tài)框和輪播等腔剂，如果我們自己使用原生的JS代碼去實現(xiàn)這些動態(tài)效果媒区，往往需要耗費更多時間和代碼。
當(dāng)然掸犬，前端所涉及的內(nèi)容非常之多袜漩，新的好用的框架也層出不窮、不斷迭代登渣，例如之前提及的Angular.js噪服、React.js和Vue.js等。Web后端可選的框架則更為豐富胜茧，基于PHP粘优、Python、NodeJs呻顽、Java等都可以搭建Web后端雹顺。不斷學(xué)習(xí)新的知識是好事，但是應(yīng)當(dāng)打好Web基礎(chǔ)廊遍，并分別熟練掌握至少一種前端框架和后端框架嬉愧，這樣在后續(xù)通過Web網(wǎng)站實現(xiàn)動態(tài)交互的數(shù)據(jù)可視化時，才能得心應(yīng)手地實現(xiàn)想要的效果喉前。
