Javas cript 必需嵌入到 HTML 文檔,才能被瀏覽器解釋和執行。
將 Javas cript 腳本嵌入到 HTML 文檔中有3種標準方法:
1.
通過 <s cript> 標簽嵌入;
2.
3.
引入外部腳本;
4.
5.
在 HTML 屬性中直接嵌入。
6.
一. 通過<s cript>標簽嵌入通過 <s cript> 標簽嵌入Javas cript代碼時,必需將代碼放在 <s cript type="text/javas cript"> 和 </s cript> 標記對之間。
【例1-2】通過<s cript>標簽嵌入Javas cript代碼:
<html>
<head>
<title>通過<s
cript>標簽嵌入</title>
</head>
<bdoy>
<!-- 開始嵌入Javas cript代碼 -->
<s
cript type="text/javas cript">
document.write("這是通過<s
cript>標簽嵌入的代碼"); // 輸出語句
</s
cript>
<!-- 結束 -->
</body>
</html>
瀏覽器載入HTML文檔時,會識別 <s cript> 標簽,執行其中的 Javas cript 代碼,然后將結果返回并在瀏覽器窗口顯示。
二. 引入外部腳本當網頁功能比較復雜,或通用代碼(每個頁面都是用)較多時,直接在 <s cript> 標簽中嵌入 Javas cript 代碼會導致網頁雜亂,不易管理。這時候,我們希望能將Javas cript代碼保存在單獨的文件中,使用時再嵌入到 HTML 文檔。
可以通過 <s cript> 標簽的 src 屬性引入外部文件。
例如,引入網站根目錄下的 demo.js 文件:
1
<s
cript type="text/javas cript"
src="/demo.js"></s
cript>
引入上級目錄中 s cript 目錄下的 demo.js 文件:
1
<s
cript type="text/javas cript"
src="../s cript/demo.js"></s
cript>
引入百度的 Javas cript 文件:
1
<s
cript type="text/javas cript"
src="http://www.baidu.com/s cript/demo.js"></s
cript>
【例1-3】引入外部腳本:
<html>
<head>
<title>引入外部腳本</title>
</head>
<bdoy>
<s
cript type="text/javas cript"
src="1-3.js"></s
cript>
</body>
</html>
將上面代碼保存為 1-3.html ,并在同一目錄下創建一個 Javas cript 腳本文件,命名為1-3.js,輸入如下代碼:
1
document.write("引入外部腳本");
在瀏覽器中打開 1-3.html ,顯示 ”引入外部腳本“,外部腳本成功引入并執行。
引入外部腳本,能夠很輕松的讓多個頁面使用相同的 Javas cript 代碼。外部腳本一般會被瀏覽器保存在緩存文件中,用戶再次訪問網頁時,無需重新載入,加快了網頁打開速度。
注意:外部腳本一般保存為 .js 的文件。
三. 在 HTML 屬性中直接嵌入在 HTML 屬性中嵌入 Javas cript 代碼主要是針對 Javas cript 事件。Javas cript 事件是指用戶對網頁進行操作時,網頁做出相應的響應。
【例1-4】鼠標單擊事件:
<html>
<head>
<title>鼠標單擊事件</title>
</head>
<bdoy>
<p
onclick="alert('你已經點擊了我!');">請點擊這里</p>
</body>
</html>
【例1-4】鼠標雙擊事件:
<html>
<head>
<title>鼠標雙擊事件</title>
</head>
<bdoy>
<p
ondblclick="alert('你已經雙擊了我!');">請雙擊這里</p>
</body>
</html>
【例1-5】鼠標移入事件:
<html>
<head>
<title>鼠標雙擊事件</title>
</head>
<bdoy>
<p
onmouseover="alert('你的鼠標已移動!');">請將鼠標移動到這里</p>
</body>
</html>
說明:alert() 函數彈出一個警告框。
嵌入腳本的位置<s cript> 標簽嵌入的腳本和外部引入的腳本可以放在 <head> 標簽和 <body> 標簽的任意位置。
上面的幾個例子,都是將 Javas cript 代碼嵌入到 <body> 標簽,下面演示在 <head> 標簽中嵌入腳本。
【例1-6】在 <head> 標簽中引入外部腳本
<html>
<head>
<title>引入外部腳本</title>
<s cript type="text/javas cript"
src="1-3.js"></s cript>
</head>
<bdoy>
<p> 在<head>標簽中引入外部腳本 </p>
</body>
</html>
【例1-6】通過 <s cript> 標簽嵌入腳本
<html>
<head>
<title>引入外部腳本</title>
</head>
<bdoy>
<p
id="demo">請點擊這里</p>
<s
cript type="text/javas cript">
document.getElementById("demo").onclick=function(){
alert("你已經點擊了我");
}
</s
cript>
</body>
</html>
如有問題請聯系我們,我們7*24小時竭誠為您服務