JavaScript引入方式有哪些？【web前端開發(fā)培訓(xùn)】

更新時間:2019-10-07 來源:黑馬程序員瀏覽量:

JavaScript腳本文件的引入方式和CSS樣式文件類似。在HTML文檔中引入JavaScript文件主要有三種，即行內(nèi)式、嵌入式、外鏈式。接下來對JavaScript的三種引入方式做詳細講解。

1570433745898_javascript-引入方式.jpg

1. 行內(nèi)式

行內(nèi)式是將JavaScript代碼作為HTML標記的屬性值使用。例如，單擊“學前端”按鈕時，彈出一個警告框提示“就到傳智播客”，具體示例如下:

<a href="javascript: alert('就到傳智播客');">學前端</a>

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

<input type="button" onclick="alert('就到傳智播客！'); " value="想學web前端" >

上述代碼實現(xiàn)了單擊“想學web前端”按鈕時，彈出一個警告框提示“就到傳智播客”。

值得一提的是，網(wǎng)頁開發(fā)提倡結(jié)構(gòu)、樣式、行為的分離，即分離HTML、CSS、JavaScript代碼的基本格式如下：

<input type="button" onclick="alert('就到傳智播客！'); " value="想學web前端" >

JavaScript三部分的代碼。避免直接寫在HTML標記的屬性中，從而有利于維護。因此在實際開發(fā)中并不推薦使用行內(nèi)式。

2.嵌入式

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

<script type="text/javascript">
    JavaScript語句;
</script>

上述語法格式中，type是<script>標記的常用屬性，用來指定HTML中使用的腳本語言類型。type="text/JavaScript"就是為了告訴瀏覽器，里面的文本為JavaScript腳本代碼。但是，隨著Web技術(shù)的發(fā)展(HTML5的普及、瀏覽器性能的提升)，嵌人JavaScript腳本代碼基本格式又有了新的寫法，具體如下

<script>
    JavaScript語句;
</script>

在上面的語法格式中，省略了type="text/JavaScript"，這是因為新版本的瀏覽器一般將嵌入的腳本語言默認為JavaScript，因此在編寫JavaScript代碼時可以省略type屬性。JavaScript可以放在HTML中的任何位置，但放置的地方會對JavaScript腳本代碼的執(zhí)行順序有一定影響。在實際工作中，一般將JavaScript腳本代碼放置于HTML文檔的<head<head標記之間。瀏覽器載入HTML文檔的順序是從上到下，將JavaScript本代碼放置于<head<head標記之間，可以確保在使用腳本之前，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>標簽包裹的就是JavaScript腳本代碼。

3.外鏈式

外鏈式是將所有的 JavaScript代碼放一個或多個以j為擴展名的外部 JavaScript文件中，通過<src>標記將這些JavaScript文件鏈接到HML文檔中，其基本語法格式如下:

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

上述格式中，src是JavaScript標記的屬性，用于指定外部腳本文件的路徑。同樣的，在外鏈式的語法格式中，也可以省略type屬性，將外鏈式的語法簡寫為如下格式：

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

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

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

1) 利于后期修改和維護

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

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

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

以上我們介紹了"JavaScript引入方式”希望對您有所幫助，如果想系統(tǒng)學習web前端知識，請點擊頁面咨詢按鈕了解黑馬程序員web前端課程信息。

推薦了解：
JavaScript特點

上一篇：JavaScript語言特點介紹[web前端培訓(xùn)] 下一篇：HTML的拖拽接口介紹【web前端培訓(xùn)】