飞鱼平台账号注册

書名： JavaScript從入門到精通（第3版）
作者名：明日科技
本章字數(shù)： 1572字
更新時間： 2020-03-20 10:37:28

1.3 JavaScript在HTML中的應(yīng)用

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

1.3.1 在頁面中直接嵌入JavaScript

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

表1.1 <script>標記常用的屬性及說明

language屬性

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

    <script language="JavaScript1.8">

說明

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

src屬性

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

    <script src="01.js">

type屬性

type屬性同樣用來指定HTML中使用的腳本語言及其版本。自HTML 4.0標準開始，推薦使用type屬性來代替language屬性。type屬性的使用格式如下：

    <script type="text/javascript">

defer屬性

defer屬性用于設(shè)置文檔加載完畢后再執(zhí)行腳本。當(dāng)腳本語言不需要立即運行時，可以設(shè)置defer屬性，此時瀏覽器將不必等待腳本語言裝載，這樣頁面加載會更快。若腳本需要在頁面加載過程中或加載完成后立即執(zhí)行，則不能使用defer屬性。defer屬性的使用格式如下：

    <script defer>

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

具體步驟如下：

（1）啟動Dreamweaver CC，選擇“文件”/“新建”菜單命令，打開“新建文檔”對話框，在“頁面類型”欄中選擇HTML選項，如圖1.9所示。

圖1.9 選擇新建文檔頁

說明

如果此處選擇JavaScript選項，則會創(chuàng)建一個JavaScript文檔。

（2）單擊“創(chuàng)建”按鈕，即可創(chuàng)建一個HTML文件，如圖1.10所示。

圖1.10 創(chuàng)建新的HTML文件

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

圖1.11 在Dreamweaver CC中編寫的JavaScript代碼

（4）在編寫好JavaScript程序后，選擇“文件”/“保存”命令，彈出“另存為”對話框，將文件保存在“E:/TM/sl/1/01”文件夾下，文件名定義為“index.html”，如圖1.12所示。

圖1.12 “另存為”對話框

（5）單擊“保存”按鈕，保存文件。

（6）雙擊剛剛保存的index.html文件，在瀏覽器中將會看到運行結(jié)果，如圖1.13所示。

圖1.13 程序運行結(jié)果

說明

1.3.2 鏈接外部JavaScript文件

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

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

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

說明

如果外部JavaScript文件保存在本機中，src屬性可以是絕對路徑或是相對路徑；如果外部JavaScript文件保存在其他服務(wù)器中，src屬性必須是絕對路徑。

【例1.2】在HTML文件中調(diào)用外部JavaScript文件，運行時在頁面中顯示對話框，對話框中輸出“我喜歡學(xué)習(xí)JavaScript”。（實例位置：資源包\TM\sl\1\02）

首先編寫外部的JavaScript文件，命名為index.js。index.js文件的代碼如圖1.14所示。然后在index.html頁面中調(diào)用外部JavaScript文件index.js，調(diào)用代碼如圖1.15所示。

圖1.14 index.js文件中的代碼

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

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

圖1.16 程序運行結(jié)果

注意

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

（2）使用src屬性引用外部JavaScript文件時，<script></script>標記中不能包含其他JavaScript代碼。

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

1.3.3 作為特定標記的屬性值使用

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

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

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

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

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

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

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

在上述代碼中，onclick是單擊事件，意思是用戶單擊對象會觸發(fā)JavaScript的方法或函數(shù)。

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