在HTML中嵌入JavaScript腳本

敘子軒 2016-02-26

展開全文

JavaScript 必需嵌入到 HTML 文檔,，才能被瀏覽器解釋和執(zhí)行。

將 JavaScript 腳本嵌入到 HTML 文檔中有3種標(biāo)準(zhǔn)方法：

通過 <script> 標(biāo)簽嵌入,；
引入外部腳本,；
在 HTML 屬性中直接嵌入。

一. 通過<script>標(biāo)簽嵌入

通過 <script> 標(biāo)簽嵌入JavaScript代碼時(shí),，必需將代碼放在 <script type="text/javascript"> 和 </script> 標(biāo)記對(duì)之間,。

【例1-2】通過<script>標(biāo)簽嵌入JavaScript代碼：

<html>
<head>
    <title>通過<script>標(biāo)簽嵌入</title>
</head>
<bdoy>
<!-- 開始嵌入JavaScript代碼 -->
<script type="text/javascript">
    document.write("這是通過<script>標(biāo)簽嵌入的代碼");  // 輸出語句
</script>
<!-- 結(jié)束 -->
</body>
</html>

瀏覽器載入HTML文檔時(shí)，會(huì)識(shí)別 <script> 標(biāo)簽,，執(zhí)行其中的 JavaScript 代碼,，然后將結(jié)果返回并在瀏覽器窗口顯示。

二. 引入外部腳本

當(dāng)網(wǎng)頁功能比較復(fù)雜,，或通用代碼（每個(gè)頁面都是用）較多時(shí),，直接在 <script> 標(biāo)簽中嵌入 JavaScript 代碼會(huì)導(dǎo)致網(wǎng)頁雜亂,，不易管理。這時(shí)候,，我們希望能將JavaScript代碼保存在單獨(dú)的文件中,，使用時(shí)再嵌入到 HTML 文檔。

可以通過 <script> 標(biāo)簽的 src 屬性引入外部文件,。

例如,，引入網(wǎng)站根目錄下的 demo.js 文件：

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

引入上級(jí)目錄中 script 目錄下的 demo.js 文件：

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

引入百度的 JavaScript 文件：

<script type="text/javascript" src="http://www.baidu.com/script/demo.js"></script>

【例1-3】引入外部腳本：

<html>
<head>
    <title>引入外部腳本</title>
</head>
<bdoy>
    <script type="text/javascript" src="1-3.js"></script>
</body>
</html>

將上面代碼保存為 1-3.html ，并在同一目錄下創(chuàng)建一個(gè) JavaScript 腳本文件,，命名為1-3.js,，輸入如下代碼：

document.write("引入外部腳本");

在瀏覽器中打開 1-3.html ，顯示 ”引入外部腳本“,，外部腳本成功引入并執(zhí)行,。

引入外部腳本，能夠很輕松的讓多個(gè)頁面使用相同的 JavaScript 代碼,。外部腳本一般會(huì)被瀏覽器保存在緩存文件中,，用戶再次訪問網(wǎng)頁時(shí)，無需重新載入,，加快了網(wǎng)頁打開速度,。

注意：外部腳本一般保存為 .js 的文件。

三. 在 HTML 屬性中直接嵌入

在 HTML 屬性中嵌入 JavaScript 代碼主要是針對(duì) JavaScript 事件,。JavaScript 事件是指用戶對(duì)網(wǎng)頁進(jìn)行操作時(shí)，網(wǎng)頁做出相應(yīng)的響應(yīng),。

【例1-4】鼠標(biāo)單擊事件：

<html>
<head>
    <title>鼠標(biāo)單擊事件</title>
</head>
<bdoy>
    <p onclick="alert('你已經(jīng)點(diǎn)擊了我,！');">請(qǐng)點(diǎn)擊這里</p>
</body>
</html>

實(shí)例演示：

請(qǐng)點(diǎn)擊這里

【例1-4】鼠標(biāo)雙擊事件：

<html>
<head>
    <title>鼠標(biāo)雙擊事件</title>
</head>
<bdoy>
    <p ondblclick="alert('你已經(jīng)雙擊了我！');">請(qǐng)雙擊這里</p>
</body>
</html>

實(shí)例演示：

請(qǐng)雙擊這里

【例1-5】鼠標(biāo)移入事件：

<html>
<head>
    <title>鼠標(biāo)雙擊事件</title>
</head>
<bdoy>
    <p onmouseover="alert('你的鼠標(biāo)已移動(dòng),！');">請(qǐng)將鼠標(biāo)移動(dòng)到這里</p>
</body>
</html>

實(shí)例演示：

請(qǐng)將鼠標(biāo)移動(dòng)到這里

說明：alert() 函數(shù)彈出一個(gè)警告框,。

嵌入腳本的位置

<html>
<head>
    <title>引入外部腳本</title>
    <script type="text/javascript" src="1-3.js"></script>
</head>
<bdoy>
    <p> 在<head>標(biāo)簽中引入外部腳本 </p>
</body>
</html>

【例1-6】通過 <script> 標(biāo)簽嵌入腳本

<html>
<head>
    <title>引入外部腳本</title>
</head>
<bdoy>
    <p id="demo">請(qǐng)點(diǎn)擊這里</p>
    <script type="text/javascript">
        document.getElementById("demo").onclick=function(){
            alert("你已經(jīng)點(diǎn)擊了我");
        }
    </script>
</body>
</html>

實(shí)例演示：

請(qǐng)點(diǎn)擊這里

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn),。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：敘子軒 > 《電腦網(wǎng)絡(luò)》

舉報(bào)/認(rèn)領(lǐng)