【前端技術(shù)文章】JavaScript腳本文件引入方法講解

更新時間:2020-11-13 來源:黑馬程序員瀏覽量:

　　JavaScript腳本文件的引入方式和CSS樣式文件類似。在HTML文檔中引入JavaScript文件主要有三種，即行內(nèi)式、嵌入式、外鏈?zhǔn)健＝酉聛?，我們將對JavaScript的三種引入方式做詳細(xì)講解。

　　1. 行內(nèi)式

　　行內(nèi)式是將JavaScript代碼作為HTML標(biāo)簽的屬性值使用。例如，單擊“test”時，彈出一個警告框提示“Happy”，具體示例如下：

<a href="javascript:alert('Happy');"> test </a>

　　JavaScript還可以寫在HTML標(biāo)簽的事件屬性中，事件是JavaScript中的一種機制。例如，單擊網(wǎng)頁中的一個按鈕時，就會觸發(fā)按鈕的單擊事件，具體示例如下：

<input type="button" onclick="alert('Happy'); "value="test" >

上述代碼實現(xiàn)了單擊“test”按鈕時，彈出一個警告框提示“Happy”。

　　值得一提的是，網(wǎng)頁開發(fā)提倡結(jié)構(gòu)、樣式、行為的分離，即分離HTML、CSS、JavaScript三部分的代碼。避免直接寫在HTML標(biāo)簽的屬性中，從而有利于維護。因此在實際開發(fā)中并不推薦使用行內(nèi)式。

　　2. 嵌入式

　　在HTML中運用<script>標(biāo)簽及其相關(guān)屬性可以嵌入JavaScript腳本代碼。嵌入JavaScript代碼的基本格式如下：

<script type="text/javascript">

    JavaScript語句;

</script>

<script>

    JavaScript語句;</script>

在上面的語法格式中，省略了type="text/JavaScript"，這是因為新版本的瀏覽器一般將嵌入的腳本語言默認(rèn)為JavaScript，因此在編寫JavaScript代碼時可以省略type屬性。

JavaScript可以放在HTML中的任何位置，但放置的地方會對 JavaScript腳本代碼的執(zhí)行順序會有一定影響。因此在實際工作中一般將JavaScript腳本代碼放置于HTML文檔的 <head></head> 標(biāo)簽之間。由于瀏覽器載入HTML 文檔的順序是從上到下，將JavaScript腳本代碼放置于<head></head> 標(biāo)簽之間，可以確保在使用腳本之前，JavaScript腳本代碼就已經(jīng)被載入，下面展示的就是一段放置了JavaScript的示例代碼。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>嵌入式</title>

<script type=" text/javascript">

  alert("我是JavaScript腳本代碼！")

</script>

</head>

<body>

</body>

</html>

　　在上面的示例代碼中，<script>標(biāo)簽包裹的就是JavaScript腳本代碼。

　　3. 外鏈?zhǔn)?/p>

　　外鏈?zhǔn)绞菍⑺械腏avaScript代碼放在一個或多個以“.js”為擴展名的外部JavaScript文件中，通過<src >標(biāo)簽將這些JavaScript文件鏈接到HTML文檔中，其基本語法格式如下：

<script type="text/Javascript" src="腳本文件路徑" >

</script>

　　上述格式中，src是script標(biāo)簽的屬性，用于指定外部腳本文件的路徑。同樣的，在外鏈?zhǔn)降恼Z法格式中，我們也可以省略type屬性，將外鏈?zhǔn)降恼Z法簡寫為：

<script src="腳本文件路徑 " >

</script>

　　需要注意的是，調(diào)用外部JavaScript文件時，外部的JavaScript文件中可以直接書寫JavaScript腳本代碼，不需要寫<script>引入標(biāo)簽。

　　在實際開發(fā)中，當(dāng)需要編寫大量、邏輯復(fù)雜的JavaScript代碼時，推薦使用外鏈?zhǔn)?。相比嵌入式，外鏈?zhǔn)降膬?yōu)勢可以總結(jié)為以下兩點：

　　1) 利于后期修改和維護

　　嵌入式會導(dǎo)致HTML與JavaScript代碼混合在一起，不利用代碼的修改和維護，外鏈?zhǔn)綍TML、CSS、JavaScript三部分代碼分離開來，利于后期的修改和維護。

　　2) 減輕文件體積、加快頁面加載速度

　　嵌入式會將使用的JavaScript代碼全部嵌入到HTML頁面中，這就會增加HTML文件的體積，影響網(wǎng)頁本身的加載速度，而外鏈?zhǔn)娇梢岳脼g覽器緩存，將需要多次用到的JavaScript腳本代碼重復(fù)利用，既減輕了文件的體積，也加快了頁面的加載速度。例如，在多個頁面中引入了相同的JavaScript文件時，打開第1個頁面后，瀏覽器就將JavaScript文件緩存下來，下次打開其他引用該JavaScript文件的頁面時，瀏覽器就不用重新加載JavaScript文件了。

　　在上面的示例代碼中，直接省略掉var，通過賦值的方式聲明變量。需要注意的是。由于JavaScript采用的是動態(tài)編譯，程序運行時不容易發(fā)現(xiàn)代碼中的錯誤，所以本書仍然推薦讀者使用顯式聲明變量的方法。

上一篇：表單的構(gòu)成是什么？如何創(chuàng)建表單 下一篇：頁面布局的排列規(guī)則是什么？怎樣清除浮動標(biāo)簽？