mg电子不朽情缘大奖图片

書名： JavaScript從入門到精通（微視頻精編版）
作者名：明日科技
本章字數： 2184字
更新時間： 2020-09-01 15:02:19

1.3　JavaScript在HTML中的使用

視頻講解

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

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

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

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

　language屬性

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

    <script language="JavaScript1.5">

說明

如果不定義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屬性的作用是當文檔加載完畢后再執行腳本，當腳本語言不需要立即運行時，設置defer屬性后，瀏覽器將不必等待腳本語言裝載，這樣頁面加載會更快。但當有一些腳本需要在頁面加載過程中或加載完成后立即執行時，就不需要使用defer屬性。defer屬性使用的格式如下：

    <script defer>

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

具體步驟如下：

（1）啟動WebStorm，如果還未創建過任何項目，會彈出如圖1.9所示的窗口。

圖1.9　WebStorm歡迎界面

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

圖1.10　創建新項目對話框

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

圖1.11　在項目中創建目錄

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

圖1.12　輸入新建目錄名稱

（5）按照同樣的方法，在文件夾SL下創建本章實例文件夾01，在該文件夾下創建第一個實例文件夾01。

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

圖1.13　在文件夾下創建HTML文件

（7）彈出新建HTML文件對話框，如圖1.14所示，在文本框中輸入新建文件的名稱“index”，然后單擊OK按鈕，完成index.html文件的創建。此時，開發工具會自動打開剛剛創建的文件，結果如圖1.15所示。

圖1.14　新建HTML文件對話框

圖1.15　打開新創建的文件

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

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

圖1.16　在WebStorm中編寫的JavaScript代碼

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

圖1.17　程序運行結果

說明

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

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

1.3.2　鏈接外部JavaScript文件

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

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

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

說明

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

【例1.02】在HTML文件中調用外部JavaScript文件，運行時在頁面中顯示對話框，對話框中輸出“我喜歡學習JavaScript”。（實例位置：資源包\源碼\01\1.02）

具體步驟如下：

（1）在本章實例文件夾01下創建第二個實例文件夾02。

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

圖1.18　在文件夾下創建JavaScript文件

（3）彈出新建JavaScript文件對話框，如圖1.19所示，在文本框中輸入JavaScript文件的名稱“index”，然后單擊OK按鈕，完成index.js文件的創建。此時，開發工具會自動打開剛剛創建的文件。

圖1.19　新建JavaScript文件對話框

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

圖1.20　index.js文件中的代碼

說明

代碼中使用的alert是JavaScript語句，其功能是在頁面中彈出一個對話框，對話框中顯示括號中的內容。

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

圖1.21　調用外部JavaScript文件

雙擊index.html文件，運行結果如圖1.22所示。

圖1.22　程序運行結果

注意

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

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

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

1.3.3　作為標簽的屬性值使用

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

1．通過“javascript:”調用

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

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

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

2．與事件結合調用

JavaScript可以支持很多事件，事件可以影響用戶的操作。例如單擊、按下鍵盤或移動鼠標等。與事件結合，可以調用執行JavaScript的方法或函數。示例代碼如下：

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

在上述代碼中，onclick是單擊事件，意思是當單擊對象時將會觸發JavaScript的方法或函數。

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

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

1.3 JavaScript在HTML中的使用

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

1.3.2 鏈接外部JavaScript文件