全棧 – 21 Web基礎 網頁的關節JS

張巨集倫發表於2019-02-25
全棧Web網頁JS

這是全棧資料工程師養成攻略系列教程的第二十一期：21 Web基礎 網頁的關節JS。

我們已經瞭解了Web三件套中的HTML和CSS，現在讓我們來學習下最後的JS。

什麼是JS

JS的全稱是JavaScript，但是和Java關係並不大。之所以將JS比如網頁的關節，是因為JS可以動態地操作DOM元素，例如插入和刪除DOM元素，或者修改已有元素的樣式和內容等。

JS是Web網頁中的指令碼程式語言，因此可以用JS來完成一些任務，例如實現一些數值計算，或者編寫Web網頁中的事件響應函式。Web網頁中的事件包括滑鼠懸浮、滑鼠點選、滑鼠滾動、鍵盤輸入等，可以使用JS監聽這些事件，並且在事件發生時進行相應的操作和處理，從而實現動態的頁面更新和使用者互動。

使用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的開發者工具，在Console標籤頁中即可看到列印出來的Hello World!。console.log()是JS提供的列印函式，好比Python的print，可以在Web網頁中列印變數並進行除錯。

如果是直接在HTML中寫JS程式碼，則如同CSS的style標籤一樣，JS程式碼需要寫在script標籤之中，script標籤可以放在HTML網頁的任意位置，每條JS程式碼之後應當使用分號;結束。

<script>
console.log("Hello World!");
</script>複製程式碼

JS基礎

在實際專案中我們一般很少直接寫原生JS程式碼，因為已經有相當多的JS高階封裝框架。這些框架在原生JS語法的基礎上進一步開發，能夠提供更方便更豐富的功能，例如後續章節中將介紹的JQuery，以及目前十分流行的Angular.js、React.js和Vue.js等前端框架。儘管如此，我們仍需要了解一些JS基礎內容。

使用document.write()可以向body中寫入DOM元素，以下程式碼向body中新增了一個h1標籤。不過這一函式比較雞肋，因為無法靈活地控制寫入的內容和位置。

document.write(`<h1>Hello World!</h1>`);複製程式碼

和Python一樣，JS也是一種弱變數型別的程式語言。使用關鍵字var宣告一個變數，宣告時無需指定其變數型別。和Python一樣，JS中常用的基礎變數型別包括數值（整數、浮點數）和字串。//表示JS註釋，如同Python中的#一樣。

var a = 1; // 整數
var b = 1.1; // 浮點數
var c = `Hello`; //字串
console.log(a, b, c);複製程式碼

Python中用列表和字典分別來儲存序列和鍵值對，在JS中同樣有相應的資料結構，只不過是換了個名稱，分別叫做陣列和物件。它們的使用方法，包括宣告、新增元素、訪問元素、修改元素和刪除元素等，和Python中的列表和字典都是大同小異的。

var d = []; // 陣列
// 新增元素
// Python中的列表是append()
d.push(1);
d.push(2);
console.log(d);
// 列印下標為1，即第二個元素
console.log(d[1]);
// 陣列長度，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開發者工具的Console標籤頁中可以進行除錯並觀察列印資訊，可以看到陣列和物件分別是用Array[]和Object{}表示的。

全棧 – 21 Web基礎 網頁的關節JS

使用document.getElementById()可以根據給定的ID獲取相應的DOM元素並返回一個DOM物件，假設我們在body裡面寫了一個h1標籤：

<h1 id="title">標題內容</h1>複製程式碼

然後便可以在JS中通過document.getElementById()函式搜尋並獲取到這個h1。通過操作變數t，我們可以對相應的h1標籤進行一些操作，例如獲取其文字內容、修改其文字內容、向其中新增DOM元素、將其刪除等。

var t = document.getElementById(`title`);
console.log(t);複製程式碼

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

<h1 id="title">標題內容</h1>
<button type="button" onclick="myFunc()">點我</button>複製程式碼

JS部分程式碼如下，首先我們需要定義myFunc()函式。JS使用function定義函式，和Python中的函式一樣，也是將一些可重用的程式碼定義成函式，從而通過呼叫函式即可方便地執行一系列程式碼。JS函式也支援提供引數，從而根據提供的引數完成更靈活更復雜的功能。在DOM物件之後使用.可以訪問其自帶的一些內部屬性和函式，例如innerHTML屬性即DOM物件的HTML內容，可以設定為純文字，也可以在其中包含HTML標籤。編寫程式碼並重新整理網頁，可以發現點選按鈕之後，h1標籤的內容將會被替換成兩個p。

function myFunc (argument) {
    var t = document.getElementById(`title`);
    t.innerHTML = `<p>按鈕被點選了</p><p>按鈕被點選了</p>`;
}複製程式碼

因此，我們可以大概總結出JS動態操作DOM元素的流程。要麼一開始直接在script中進行相關操作，要麼通過onclick等屬性繫結相應的事件響應函式，然後在響應函式裡完成一些操作，從而實現動態互動的網頁效果。

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

JS中也有條件和迴圈，分別使用小括號()和大括號{}顯式指定判斷條件和主體部分，而Python則是依靠適當的縮排來隱式指定。對於條件，需要注意，但凡出現if的地方都必須加上判斷條件。JS迴圈以for迴圈為主，可以用來遍歷陣列和物件。

// 條件
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`);
}

// 迴圈遍歷陣列
for (var i = 0; i < d.length; i++) {
    console.log(i, d[i]);
}
// 迴圈遍歷物件
for (var key in e) {
    console.log(key, e[key]);
}複製程式碼

現在我們應該能逐漸體會到各種程式語言的一些通性，雖然不同的程式語言都有各自的特點和強項，但核心的程式設計思想都是相通和類似的，不同的無非只是一些使用上的細節。因此，熟練掌握一門自己最習慣使用的程式語言，同時瞭解其他多門輔助的程式語言，對於提高自己的理解能力和程式設計能力都是有很有幫助的。

除了以上提及的滑鼠點選事件，JS中還支援很多其他型別的事件，例如滑鼠懸浮、滑鼠滾動、鍵盤輸入等，我們將在後續介紹JQuery的時候再進行詳細討論。

補充學習

關於JS的更多內容可以參考以下連結，www.runoob.com/js/js-tutor…，裡面提供了更為詳細和系統的講解，並結合大量例項程式碼加以鞏固，推薦完整地瀏覽和嘗試一遍。

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

當然，前端所涉及的內容非常之多，新的好用的框架也層出不窮、不斷迭代，例如之前提及的Angular.js、React.js和Vue.js等。Web後端可選的框架則更為豐富，基於PHP、Python、NodeJs、Java等都可以搭建Web後端。不斷學習新的知識是好事，但是應當打好Web基礎，並分別熟練掌握至少一種前端框架和後端框架，這樣在後續通過Web網站實現動態互動的資料視覺化時，才能得心應手地實現想要的效果。

視訊連結：網頁的關節JS

如果覺得文章不錯，不妨點一下左下方的喜歡～

相關文章