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

全國咨詢/投訴熱線：400-618-4000

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

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

好口碑IT培訓(xùn)

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

1.行內(nèi)式

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

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

需要說明的是，行內(nèi)式只有在臨時測試或者特殊情況下使用，一般情況下不推薦使用行內(nèi)式，因為行內(nèi)式有如下缺點。

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

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

2.嵌入式

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

<script>
    JavaScript代碼
</script>

3.外鏈式

外鏈式(或稱外部式)是將JavaScript 代碼寫在一個單獨的文件中，一般使用“js”作為文件的擴展名，在HTML頁面中使用<script>標簽的src屬性引人“js”文件。外鏈式適合javascript代碼量較多的情況。在html頁面中引入“js”文件，示例代碼如下：

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

上述代碼表示引入當前目錄下的tesL.js文件。需要注意的是，外鏈式的標簽內(nèi)不可以編寫JavaScript 代碼。

為了幫助初學(xué)者更好地理解外鏈式，下面利用外鏈式實現(xiàn)瀏覽網(wǎ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>

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

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

alert ('Hello JavaScript');

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

以上講解了JavaScript的3種引入方式。現(xiàn)代網(wǎng)頁開發(fā)中提倡結(jié)構(gòu)、樣式、行為的分離，即分離HTML、CSS、JavaScrixt這3部分代碼，這樣更有利于文件的維護。當需要編寫大量的、邏輯復(fù)雜的、具有特定功能的JavaScrigt代碼時，推薦使用外鏈式。外鏈式相比嵌入式，具有以下3點優(yōu)勢：

(1)外鏈式存在于獨立文件中，有利于修改和維護，而嵌人式會導(dǎo)致HTML代碼與JavaScript代碼混合在一起。

(2)外鏈式可以利用瀏覽器緩存提高速度。例如，在多個頁面中引入相同的JavaScript文件時，打開第1個頁面后，瀏覽器將JavaScript文件緩存下來，下次打開其他頁面時就不用重新下載該文件了。

(3)外鏈式有利于HTML頁h代碼結(jié)構(gòu)化，把大段的JavaScript代碼分離到HTML頁面之外，既美觀，也方便文件級別的代碼復(fù)用。

0 分享到：
和我們在線交談！