第2章學(xué)習(xí)了如何編寫靜態(tài)內(nèi)容的網(wǎng)站，并將網(wǎng)站部署到云服務(wù)器，然后通過域名來訪問網(wǎng)站。
雖然能夠編寫出漂亮的靜態(tài)內(nèi)容網(wǎng)頁，但是很多時(shí)候，網(wǎng)頁光有靜態(tài)內(nèi)容還不夠，要實(shí)現(xiàn)一些用戶和瀏覽器頁面的互動(dòng)的時(shí)候，僅僅靠純粹的靜態(tài)內(nèi)容顯示，就無法實(shí)現(xiàn)了。比如，要做一個(gè)網(wǎng)頁游戲“連連看”，光靠顯示靜態(tài)內(nèi)容就無法實(shí)現(xiàn)了。
這時(shí)候，就需要一門語言，來實(shí)現(xiàn)用戶和瀏覽器的交互，第3章就來學(xué)習(xí)實(shí)現(xiàn)這個(gè)功能的一門腳本語言：JavaScript。

JavaScript是什么

學(xué)哥給JavaScript的定義是：JavaScript是一門可以在客戶瀏覽器中編輯HTML內(nèi)容和樣式的解釋執(zhí)行的腳本語言。

因此它有如下特征：
JavaScript代碼要插入到HTML內(nèi)容中才能由瀏覽器解釋執(zhí)行。
它是一種輕量級的編程腳本語言，比較簡單容易學(xué)。
它的常見用途是：對事件作出反應(yīng)、改變HTML內(nèi)容或樣式、驗(yàn)證輸入、提交數(shù)據(jù)和服務(wù)器交互。

JavaScript的Helloworld程序

為了最快的給大家一個(gè)直觀認(rèn)識，按照老規(guī)矩，來做一個(gè)JavaScript的Helloworld程序。
前面說了，Javascript程序是要寫在HTML代碼當(dāng)中的，因此先來編寫一個(gè)HTML文件。
testjs.html代碼如下：

3-1-1.jpg

瀏覽器中打開這個(gè)靜態(tài)網(wǎng)頁，可以看到顯示了內(nèi)容：

3-1-2.jpg

接下來修改testjs.html代碼，增加如下3行代碼：

3-1-3.jpg

關(guān)閉瀏覽器窗口，重新打開頁面：

3-1-4.jpg

可以看到，網(wǎng)頁彈出了一個(gè)消息窗口，顯示了“Hello world，這是一個(gè)JavaScript！”這段文本。
點(diǎn)擊確定按鈕之后，頁面才顯示正常的網(wǎng)頁內(nèi)容。
這里的3行代碼就是JavaScript代碼。

JavaScript代碼可以放head或body中

上面的HTML代碼中，將JavaScript代碼放在了body標(biāo)簽當(dāng)中，其實(shí)，JavaScript代碼還可以放在head標(biāo)簽當(dāng)中。
修改testjs.html代碼，將這3行代碼從body標(biāo)簽移動(dòng)到head標(biāo)簽當(dāng)中。
testjs.html代碼如下：

3-1-5.jpg

關(guān)閉瀏覽器窗口，重新打開頁面：

3-1-6.jpg

可以看到，網(wǎng)頁同樣顯示了消息窗口，和剛才的效果一樣。

總結(jié)一下：
JavaScript代碼可以放置于head或者body之中；
JavaScript代碼必須位于<script>和</script>標(biāo)簽之間；
瀏覽器會解釋執(zhí)行script標(biāo)簽之間的JavaScript代碼。

對事件作出反應(yīng)

JavaScript最常見的用途就是對事件作出反應(yīng)，來響應(yīng)用戶的操作請求。
刪除掉前面的alert代碼。然后在網(wǎng)頁中增加一個(gè)按鈕，點(diǎn)擊按鈕的時(shí)候執(zhí)行一段JavaScript代碼。
testjs.html代碼如下：

3-1-7.jpg

刷新頁面：

3-1-8.jpg

可以看到，網(wǎng)頁上多了一個(gè)按鈕，點(diǎn)擊這個(gè)按鈕：

3-1-9.jpg

可以看到，觸發(fā)了一個(gè)點(diǎn)擊事件，執(zhí)行了這段JavaScript代碼，網(wǎng)頁彈出了一個(gè)提示信息窗口。
這里暫時(shí)不深入講解，后續(xù)會有很多詳細(xì)的例子來深入說明。

改變HTML內(nèi)容和樣式

JavaScript另一個(gè)常見的用途就是改變HTML內(nèi)容或者樣式。
修改網(wǎng)頁內(nèi)容，增加一個(gè)div，里面寫一段文字，文字顏色設(shè)置為紅色。
然后修改按鈕的點(diǎn)擊事件里面的JavaScript代碼如下：
testjs.html代碼如下：

3-1-10.jpg

刷新頁面：

3-1-11.jpg

點(diǎn)擊按鈕后結(jié)果如下：

3-1-12.jpg

可以看到達(dá)到了改變靜態(tài)內(nèi)容網(wǎng)頁的顯示內(nèi)容和樣式的目的，這個(gè)功能比起靜態(tài)內(nèi)容網(wǎng)頁又前進(jìn)了一大步了。

驗(yàn)證輸入

很多網(wǎng)頁是可以和服務(wù)器進(jìn)行數(shù)據(jù)交互的，在網(wǎng)頁上可以輸入一些內(nèi)容，點(diǎn)擊提交按鈕之后，可以將這些數(shù)據(jù)提交到服務(wù)器后臺程序，但是一般在提交之前，需要在客戶端瀏覽器上進(jìn)行一些驗(yàn)證工作，防止提交的數(shù)據(jù)不符合規(guī)范要求。這個(gè)時(shí)候一般就可以用JavaScript代碼來驗(yàn)證輸入內(nèi)容。
例如一個(gè)注冊網(wǎng)頁上對密碼的輸入長度要求至少要有6位，一般就會這樣寫：
testjs.html代碼如下：

3-1-13.jpg

刷新頁面：

3-1-14.jpg

在文本框輸入12345，然后點(diǎn)擊Check按鈕后結(jié)果如下：

3-1-15.jpg

在文本框輸入123456，然后點(diǎn)擊Check按鈕后結(jié)果如下：

3-1-16.jpg

可以看到JavaScript代碼可以進(jìn)行計(jì)算和邏輯判斷，根據(jù)不同的結(jié)果運(yùn)行不同的程序。
這里也不深入講解了，后續(xù)會有更多例子說明。

提交數(shù)據(jù)和服務(wù)器交互

網(wǎng)頁最重要的一個(gè)能力就是能夠和服務(wù)器后臺進(jìn)行交互，能夠?qū)⒂脩粼诰W(wǎng)頁上輸入的數(shù)據(jù)提交給服務(wù)器，能夠根據(jù)用戶輸入的內(nèi)容顯示不同的數(shù)據(jù)或者頁面，這樣的網(wǎng)頁就是動(dòng)態(tài)內(nèi)容網(wǎng)頁，這才能將網(wǎng)頁瀏覽器的功能無限擴(kuò)大，能夠?qū)崿F(xiàn)千變?nèi)f化的網(wǎng)站。
JavaScript就可以用來將網(wǎng)頁提交到服務(wù)器后臺程序。
例如下面這樣的代碼就可以將網(wǎng)頁提交：
<script>
document.forms[0].submit();
</script>
大家暫時(shí)不需要理解如何和服務(wù)器進(jìn)行交互，這個(gè)內(nèi)容將在下一章當(dāng)中進(jìn)行詳細(xì)說明。

下節(jié)課將說明JavaScript的常見語法格式。