赏金船长试玩

書名： JavaScript從入門到精通（微視頻精編版）
作者名：明日科技
本章字?jǐn)?shù)： 2184字
更新時(shí)間： 2020-09-01 15:02:19

1.3　JavaScript在HTML中的使用

視頻講解

通常情況下，在Web頁面中使用JavaScript有3種方法：一種是在頁面中直接嵌入JavaScript代碼；另一種是鏈接外部JavaScript文件；一種是作為特定標(biāo)簽的屬性值使用。下面分別對(duì)這3種方法進(jìn)行介紹。

1.3.1　在頁面中直接嵌入JavaScript代碼

在HTML文檔中可以使用<script>…</script>標(biāo)記將JavaScript腳本嵌入其中，在HTML文檔中可以使用多個(gè)<script>標(biāo)記，每個(gè)<script>標(biāo)記中可以包含多個(gè)JavaScript的代碼集合，并且各個(gè)<script>標(biāo)記中的JavaScript代碼之間可以相互訪問，等同于將所有代碼放在一對(duì)<script>…</script>標(biāo)簽之中的效果。<script>標(biāo)記常用的屬性及說明如表1.1所示。

表1.1　<script>標(biāo)記常用的屬性及說明

　language屬性

language屬性指定在HTML中使用的哪種腳本語言及其版本。language屬性使用的格式如下：

    <script language="JavaScript1.5">

說明

如果不定義language屬性，瀏覽器默認(rèn)腳本語言為JavaScript 1.0版本。

　src屬性

src屬性用來指定外部腳本文件的路徑，外部腳本文件通常使用JavaScript腳本，其擴(kuò)展名為.js。src屬性使用的格式如下：

    <script src="01.js">

　type屬性

type屬性用來指定HTML中使用的是哪種腳本語言及其版本，自HTML 4.0標(biāo)準(zhǔn)開始，推薦使用type屬性來代替language屬性。type屬性使用的格式如下：

    <script type="text/javascript">

　defer屬性

defer屬性的作用是當(dāng)文檔加載完畢后再執(zhí)行腳本，當(dāng)腳本語言不需要立即運(yùn)行時(shí)，設(shè)置defer屬性后，瀏覽器將不必等待腳本語言裝載，這樣頁面加載會(huì)更快。但當(dāng)有一些腳本需要在頁面加載過程中或加載完成后立即執(zhí)行時(shí)，就不需要使用defer屬性。defer屬性使用的格式如下：

    <script defer>

【例1.01】編寫第一個(gè)JavaScript程序，在WebStorm工具中直接嵌入JavaScript代碼，在頁面中輸出“我喜歡學(xué)習(xí)JavaScript”。（實(shí)例位置：資源包\源碼\01\1.01）

具體步驟如下：

（1）啟動(dòng)WebStorm，如果還未創(chuàng)建過任何項(xiàng)目，會(huì)彈出如圖1.9所示的窗口。

圖1.9　WebStorm歡迎界面

（2）單擊圖1.9中的Create New Project選項(xiàng)，彈出創(chuàng)建新項(xiàng)目對(duì)話框，如圖1.10所示。在該對(duì)話框中輸入項(xiàng)目名稱“Code”，并選擇項(xiàng)目存儲(chǔ)路徑，將項(xiàng)目文件夾存儲(chǔ)在計(jì)算機(jī)中的E盤，然后單擊Create按鈕創(chuàng)建項(xiàng)目。

圖1.10　創(chuàng)建新項(xiàng)目對(duì)話框

（3）在項(xiàng)目名稱Code上右擊，然后在彈出的快捷菜單中選擇New→Directory命令，如圖1.11所示。

圖1.11　在項(xiàng)目中創(chuàng)建目錄

（4）彈出新建目錄對(duì)話框，如圖1.12所示，在文本框中輸入新建目錄的名稱“SL”，然后單擊OK按鈕，完成文件夾SL的創(chuàng)建。

圖1.12　輸入新建目錄名稱

（5）按照同樣的方法，在文件夾SL下創(chuàng)建本章實(shí)例文件夾01，在該文件夾下創(chuàng)建第一個(gè)實(shí)例文件夾01。

（6）在第一個(gè)實(shí)例文件夾01上右擊，然后在彈出的快捷菜單中選擇New→HTML File命令，如圖1.13所示。

圖1.13　在文件夾下創(chuàng)建HTML文件

（7）彈出新建HTML文件對(duì)話框，如圖1.14所示，在文本框中輸入新建文件的名稱“index”，然后單擊OK按鈕，完成index.html文件的創(chuàng)建。此時(shí)，開發(fā)工具會(huì)自動(dòng)打開剛剛創(chuàng)建的文件，結(jié)果如圖1.15所示。

圖1.14　新建HTML文件對(duì)話框

圖1.15　打開新創(chuàng)建的文件

（8）將實(shí)例背景圖片bg.gif復(fù)制到“E:\Code\SL\01\01”目錄下，背景圖片的存儲(chǔ)路徑為“光盤\Code\SL\01\01”。

（9）在<title>標(biāo)記中將標(biāo)題設(shè)置為“第一個(gè)JavaScript程序”，在<body>標(biāo)記中編寫JavaScript代碼，如圖1.16所示。

圖1.16　在WebStorm中編寫的JavaScript代碼

雙擊“E:\Code\SL\01\01”目錄下的index.html文件，在瀏覽器中將會(huì)查看到運(yùn)行結(jié)果，如圖1.17所示。

圖1.17　程序運(yùn)行結(jié)果

說明

（1）<script>標(biāo)記可以放在Web頁面的<head></head>標(biāo)記中，也可以放在<body></body>標(biāo)記中。

（2）腳本中使用的document.write是JavaScript語句，其功能是直接在頁面中輸出括號(hào)中的內(nèi)容。

1.3.2　鏈接外部JavaScript文件

在Web頁面中引入JavaScript的另一種方法是采用鏈接外部JavaScript文件的形式。如果代碼比較復(fù)雜或是同一段代碼可以被多個(gè)頁面所使用，則可以將這些代碼放置在一個(gè)單獨(dú)的文件中（保存文件的擴(kuò)展名為.js），然后在需要使用該代碼的Web頁面中鏈接該JavaScript文件即可。

在Web頁面中鏈接外部JavaScript文件的語法格式如下：

    <script type="text/javascript" src="javascript.js"></script>

說明

如果外部JavaScript文件保存在本機(jī)中，src屬性可以是絕對(duì)路徑或是相對(duì)路徑；如果外部JavaScript文件保存在其他服務(wù)器中，src屬性需要指定絕對(duì)路徑。

【例1.02】在HTML文件中調(diào)用外部JavaScript文件，運(yùn)行時(shí)在頁面中顯示對(duì)話框，對(duì)話框中輸出“我喜歡學(xué)習(xí)JavaScript”。（實(shí)例位置：資源包\源碼\01\1.02）

具體步驟如下：

（1）在本章實(shí)例文件夾01下創(chuàng)建第二個(gè)實(shí)例文件夾02。

（2）在文件夾02上右擊，然后在彈出的快捷菜單中選擇New→JavaScript File命令，如圖1.18所示。

圖1.18　在文件夾下創(chuàng)建JavaScript文件

（3）彈出新建JavaScript文件對(duì)話框，如圖1.19所示，在文本框中輸入JavaScript文件的名稱“index”，然后單擊OK按鈕，完成index.js文件的創(chuàng)建。此時(shí)，開發(fā)工具會(huì)自動(dòng)打開剛剛創(chuàng)建的文件。

圖1.19　新建JavaScript文件對(duì)話框

（4）在index.js文件中編寫JavaScript代碼，代碼如圖1.20所示。

圖1.20　index.js文件中的代碼

說明

代碼中使用的alert是JavaScript語句，其功能是在頁面中彈出一個(gè)對(duì)話框，對(duì)話框中顯示括號(hào)中的內(nèi)容。

（5）在02文件夾下創(chuàng)建index.html文件，在該文件中調(diào)用外部JavaScript文件index.js，代碼如圖1.21所示。

圖1.21　調(diào)用外部JavaScript文件

雙擊index.html文件，運(yùn)行結(jié)果如圖1.22所示。

圖1.22　程序運(yùn)行結(jié)果

注意

（1）在外部JavaScript文件中，不能將代碼用<script>和</script>標(biāo)記括起來。

（2）在使用src屬性引用外部JavaScript文件時(shí)，<script></script>標(biāo)簽中不能包含其他JavaScript代碼。

（3）在<script>標(biāo)簽中使用src屬性引用外部JavaScript文件時(shí)，</script>結(jié)束標(biāo)簽不能省略。

1.3.3　作為標(biāo)簽的屬性值使用

在JavaScript腳本程序中，有些JavaScript代碼可能需要立即執(zhí)行，而有些JavaScript代碼可能需要單擊某個(gè)超鏈接或者觸發(fā)了一些事件（如單擊按鈕）之后才會(huì)執(zhí)行。下面介紹將JavaScript代碼作為標(biāo)簽的屬性值使用。

1．通過“javascript:”調(diào)用

在HTML中，可以通過“javascript:”的方式來調(diào)用JavaScript的函數(shù)或方法。示例代碼如下：

    <a href="javascript:alert('您單擊了這個(gè)超鏈接')">請(qǐng)單擊這里</a>

在上述代碼中通過使用“javascript:”來調(diào)用alert()方法，但該方法并不是在瀏覽器解析到“javascript:”時(shí)就立刻執(zhí)行，而是在單擊該超鏈接時(shí)才會(huì)執(zhí)行。

2．與事件結(jié)合調(diào)用

JavaScript可以支持很多事件，事件可以影響用戶的操作。例如單擊、按下鍵盤或移動(dòng)鼠標(biāo)等。與事件結(jié)合，可以調(diào)用執(zhí)行JavaScript的方法或函數(shù)。示例代碼如下：

    <input type="button" value="單擊按鈕" onclick="alert('您單擊了這個(gè)按鈕')" />

在上述代碼中，onclick是單擊事件，意思是當(dāng)單擊對(duì)象時(shí)將會(huì)觸發(fā)JavaScript的方法或函數(shù)。

官术网_书友最值得收藏!

JavaScript從入門到精通（微視頻精編版）

1.3 JavaScript在HTML中的使用

1.3.1 在頁面中直接嵌入JavaScript代碼

1.3.2 鏈接外部JavaScript文件