這是全棧數(shù)據(jù)工程師養(yǎng)成攻略系列教程的第二十一期：21 Web基礎 網(wǎng)頁的關節(jié)JS。

我們已經(jīng)了解了Web三件套中的HTML和CSS，現(xiàn)在讓我們來學習下最后的JS。

什么是JS

JS的全稱是JavaScript，但是和Java關系并不大。之所以將JS比如網(wǎng)頁的關節(jié)，是因為JS可以動態(tài)地操作DOM元素，例如插入和刪除DOM元素，或者修改已有元素的樣式和內(nèi)容等。

JS是Web網(wǎng)頁中的腳本編程語言，因此可以用JS來完成一些任務，例如實現(xiàn)一些數(shù)值計算，或者編寫Web網(wǎng)頁中的事件響應函數(shù)。Web網(wǎng)頁中的事件包括鼠標懸浮、鼠標點擊、鼠標滾動、鍵盤輸入等，可以使用JS監(jiān)聽這些事件，并且在事件發(fā)生時進行相應的操作和處理，從而實現(xiàn)動態(tài)的頁面更新和用戶交互。

使用JS

使用JS的方法有兩種：引入外部.js文件；直接在HTML中寫JS。

如同引入外部.css文件一樣，可以新建一個script.js文件，然后在里面編寫JS代碼，例如輸入console.log("Hello World!");，然后在HTML的head中使用script標簽引入，src屬性指定了.js文件的相對路徑。

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

運行寫好的HTML文件，打開Chrome的開發(fā)者工具，在Console標簽頁中即可看到打印出來的Hello World!。console.log()是JS提供的打印函數(shù)，好比Python的print，可以在Web網(wǎng)頁中打印變量并進行調(diào)試。

如果是直接在HTML中寫JS代碼，則如同CSS的style標簽一樣，JS代碼需要寫在script標簽之中，script標簽可以放在HTML網(wǎng)頁的任意位置，每條JS代碼之后應當使用分號;結(jié)束。

<script>
console.log("Hello World!");
</script>

JS基礎

在實際項目中我們一般很少直接寫原生JS代碼，因為已經(jīng)有相當多的JS高級封裝框架。這些框架在原生JS語法的基礎上進一步開發(fā)，能夠提供更方便更豐富的功能，例如后續(xù)章節(jié)中將介紹的JQuery，以及目前十分流行的Angular.js、React.js和Vue.js等前端框架。盡管如此，我們?nèi)孕枰私庖恍㎎S基礎內(nèi)容。

使用document.write()可以向body中寫入DOM元素，以下代碼向body中添加了一個h1標簽。不過這一函數(shù)比較雞肋，因為無法靈活地控制寫入的內(nèi)容和位置。

document.write('<h1>Hello World!</h1>');

和Python一樣，JS也是一種弱變量類型的編程語言。使用關鍵字var聲明一個變量，聲明時無需指定其變量類型。和Python一樣，JS中常用的基礎變量類型包括數(shù)值（整數(shù)、浮點數(shù)）和字符串。//表示JS注釋，如同Python中的#一樣。

var a = 1; // 整數(shù)
var b = 1.1; // 浮點數(shù)
var c = 'Hello'; //字符串
console.log(a, b, c);

Python中用列表和字典分別來存儲序列和鍵值對，在JS中同樣有相應的數(shù)據(jù)結(jié)構(gòu)，只不過是換了個名稱，分別叫做數(shù)組和對象。它們的使用方法，包括聲明、添加元素、訪問元素、修改元素和刪除元素等，和Python中的列表和字典都是大同小異的。

var d = []; // 數(shù)組
// 添加元素
// Python中的列表是append()
d.push(1);
d.push(2);
console.log(d);
// 打印下標為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標簽頁中可以進行調(diào)試并觀察打印信息，可以看到數(shù)組和對象分別是用Array[]和Object{}表示的。

使用document.getElementById()可以根據(jù)給定的ID獲取相應的DOM元素并返回一個DOM對象，假設我們在body里面寫了一個h1標簽：

<h1 id="title">標題內(nèi)容</h1>

然后便可以在JS中通過document.getElementById()函數(shù)搜索并獲取到這個h1。通過操作變量t，我們可以對相應的h1標簽進行一些操作，例如獲取其文本內(nèi)容、修改其文本內(nèi)容、向其中添加DOM元素、將其刪除等。

var t = document.getElementById('title');
console.log(t);

再來看一下onclick，即DOM元素的鼠標點擊響應事件。以下代碼以button標簽為例，當鼠標點擊這一按鈕時，剛才提到的h1標簽文本將發(fā)生變化。HTML部分代碼如下，可以將onclick當作DOM元素的屬性來理解，當鼠標點擊這一按鈕時，將觸發(fā)JS中定義的myFunc()函數(shù)。

<h1 id="title">標題內(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ù)完成更靈活更復雜的功能。在DOM對象之后使用.可以訪問其自帶的一些內(nèi)部屬性和函數(shù)，例如innerHTML屬性即DOM對象的HTML內(nèi)容，可以設置為純文本，也可以在其中包含HTML標簽。編寫代碼并刷新網(wǎng)頁，可以發(fā)現(xiàn)點擊按鈕之后，h1標簽的內(nèi)容將會被替換成兩個p。

function myFunc (argument) {
    var t = document.getElementById('title');
    t.innerHTML = '<p>按鈕被點擊了</p><p>按鈕被點擊了</p>';
}

因此，我們可以大概總結(jié)出JS動態(tài)操作DOM元素的流程。要么一開始直接在script中進行相關操作，要么通過onclick等屬性綁定相應的事件響應函數(shù)，然后在響應函數(shù)里完成一些操作，從而實現(xiàn)動態(tài)交互的網(wǎng)頁效果。

JS中的運算符包括算術運算符、比較運算符、賦值運算符、邏輯運算符等，和Python類似。

JS中也有條件和循環(huán)，分別使用小括號()和大括號{}顯式指定判斷條件和主體部分，而Python則是依靠適當?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)在我們應該能逐漸體會到各種編程語言的一些通性，雖然不同的編程語言都有各自的特點和強項，但核心的編程思想都是相通和類似的，不同的無非只是一些使用上的細節(jié)。因此，熟練掌握一門自己最習慣使用的編程語言，同時了解其他多門輔助的編程語言，對于提高自己的理解能力和編程能力都是有很有幫助的。

除了以上提及的鼠標點擊事件，JS中還支持很多其他類型的事件，例如鼠標懸浮、鼠標滾動、鍵盤輸入等，我們將在后續(xù)介紹JQuery的時候再進行詳細討論。

補充學習

關于JS的更多內(nèi)容可以參考以下鏈接，http://www.runoob.com/js/js-tutorial.html，里面提供了更為詳細和系統(tǒng)的講解，并結(jié)合大量實例代碼加以鞏固，推薦完整地瀏覽和嘗試一遍。

掌握HTML、CSS、JS三件套之后，我們對Web基礎內(nèi)容應當具備了一個大致的了解。后續(xù)的學習內(nèi)容包括一些進階知識，例如基于JS、可以更加方便操作DOM元素的JQuery。Bootstrap是一款輕量的前端封裝，包括CSS和JS兩部分。前者提供了一些寫好的CSS class，這樣我們通過class的名稱便可以快速使用寫好的樣式；后者基于JS提供了一些封裝好的可以直接使用的網(wǎng)頁動態(tài)功能，例如標簽頁、模態(tài)框和輪播等，如果我們自己使用原生的JS代碼去實現(xiàn)這些動態(tài)效果，往往需要耗費更多時間和代碼。

當然，前端所涉及的內(nèi)容非常之多，新的好用的框架也層出不窮、不斷迭代，例如之前提及的Angular.js、React.js和Vue.js等。Web后端可選的框架則更為豐富，基于PHP、Python、NodeJs、Java等都可以搭建Web后端。不斷學習新的知識是好事，但是應當打好Web基礎，并分別熟練掌握至少一種前端框架和后端框架，這樣在后續(xù)通過Web網(wǎng)站實現(xiàn)動態(tài)交互的數(shù)據(jù)可視化時，才能得心應手地實現(xiàn)想要的效果。

視頻鏈接：網(wǎng)頁的關節(jié)JS