教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

JavaScript代碼的三種引入方式【操作演示】

更新時(shí)間:2023年01月30日17時(shí)46分 來(lái)源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

在網(wǎng)頁(yè)中編寫(xiě)JavaScript代碼時(shí)，需要先引入JavaScript代碼。JavaScript代碼有3種引入方式，分別是行內(nèi)式、嵌入式和外鏈?zhǔn)?，下面分別進(jìn)行講解。

1.行內(nèi)式

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

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

需要說(shuō)明的是，行內(nèi)式只有在臨時(shí)測(cè)試或者特殊情況下使用，一般情況下不推薦使用行內(nèi)式，因?yàn)樾袃?nèi)式有如下缺點(diǎn)。

(1)行內(nèi)式可讀性較差，尤其是在HTML文件中編寫(xiě)大量JavaScript代碼時(shí)，不方便閱讀。

(2)行內(nèi)式在遇到多層引號(hào)嵌套的情況時(shí)，引號(hào)非常容易混淆，導(dǎo)致代碼出錯(cuò)。

2.嵌入式

嵌入式(或稱內(nèi)嵌式)使用<scrip>標(biāo)簽包裹JavaScript代碼，直接編寫(xiě)到HTML文件中，通常將其放到<head>標(biāo)簽<body>或標(biāo)簽中。<scrip>標(biāo)簽的type屬性用于告知瀏覽器腳本類型，HTML.5中該屬性的默認(rèn)值為“text/javascript”，因此在使用HTML5時(shí)可以省略ype屬性。嵌入式的示例代碼如下：

<script>
    JavaScript代碼
</script>

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

外鏈?zhǔn)?或稱外部式)是將JavaScript 代碼寫(xiě)在一個(gè)單獨(dú)的文件中，一般使用“js”作為文件的擴(kuò)展名，在HTML頁(yè)面中使用<script>標(biāo)簽的src屬性引人“js”文件。外鏈?zhǔn)竭m合javascript代碼量較多的情況。在html頁(yè)面中引入“js”文件，示例代碼如下：

<script src="test.js"></script>

上述代碼表示引入當(dāng)前目錄下的tesL.js文件。需要注意的是，外鏈?zhǔn)降臉?biāo)簽內(nèi)不可以編寫(xiě)JavaScript 代碼。

為了幫助初學(xué)者更好地理解外鏈?zhǔn)?，下面利用外鏈?zhǔn)綄?shí)現(xiàn)瀏覽網(wǎng)頁(yè)時(shí)在頁(yè)面中自動(dòng)彈出警告框。創(chuàng)建Example02.html文件，引入Example02.js文件，具體代碼如例1-2所示。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="Example02.js"></script>
</body>
</html>

標(biāo)簽的src屬性設(shè)置了要引入的文件為Example02.js。

創(chuàng)建Example02.js文件，在該文件中編寫(xiě)如下代碼：

alert ('Hello JavaScript');

保存代碼，在瀏覽器中訪問(wèn)Example02.html文件，頁(yè)面效果與例1-1相同。

以上講解了JavaScript的3種引入方式。現(xiàn)代網(wǎng)頁(yè)開(kāi)發(fā)中提倡結(jié)構(gòu)、樣式、行為的分離，即分離HTML、CSS、JavaScrixt這3部分代碼，這樣更有利于文件的維護(hù)。當(dāng)需要編寫(xiě)大量的、邏輯復(fù)雜的、具有特定功能的JavaScrigt代碼時(shí)，推薦使用外鏈?zhǔn)健Ｍ怄準(zhǔn)较啾惹度胧剑哂幸韵?點(diǎn)優(yōu)勢(shì)：

(1)外鏈?zhǔn)酱嬖谟讵?dú)立文件中，有利于修改和維護(hù)，而嵌人式會(huì)導(dǎo)致HTML代碼與JavaScript代碼混合在一起。

(2)外鏈?zhǔn)娇梢岳脼g覽器緩存提高速度。例如，在多個(gè)頁(yè)面中引入相同的JavaScript文件時(shí)，打開(kāi)第1個(gè)頁(yè)面后，瀏覽器將JavaScript文件緩存下來(lái)，下次打開(kāi)其他頁(yè)面時(shí)就不用重新下載該文件了。

(3)外鏈?zhǔn)接欣贖TML頁(yè)h代碼結(jié)構(gòu)化，把大段的JavaScript代碼分離到HTML頁(yè)面之外，既美觀，也方便文件級(jí)別的代碼復(fù)用。

0 分享到：
和我們?cè)诰€交談！