更新時間:2020年11月13日17時19分 來源:傳智播客 瀏覽次數(shù):
JavaScript腳本文件的引入方式和CSS樣式文件類似。在HTML文檔中引入JavaScript文件主要有三種,即行內(nèi)式、嵌入式、外鏈式。接下來,我們將對JavaScript的三種引入方式做詳細講解。
1. 行內(nèi)式
行內(nèi)式是將JavaScript代碼作為HTML標簽的屬性值使用。例如,單擊“test”時,彈出一個警告框提示“Happy”,具體示例如下:
JavaScript還可以寫在HTML標簽的事件屬性中,事件是JavaScript中的一種機制。例如,單擊網(wǎng)頁中的一個按鈕時,就會觸發(fā)按鈕的單擊事件,具體示例如下:
上述代碼實現(xiàn)了單擊“test”按鈕時,彈出一個警告框提示“Happy”。
值得一提的是,網(wǎng)頁開發(fā)提倡結構、樣式、行為的分離,即分離HTML、CSS、JavaScript三部分的代碼。避免直接寫在HTML標簽的屬性中,從而有利于維護。因此在實際開發(fā)中并不推薦使用行內(nèi)式。
2. 嵌入式
在HTML中運用標簽及其相關屬性可以嵌入JavaScript腳本代碼。嵌入JavaScript代碼的基本格式如下:
在上面的語法格式中,省略了type="text/JavaScript",這是因為新版本的瀏覽器一般將嵌入的腳本語言默認為JavaScript,因此在編寫JavaScript代碼時可以省略type屬性。
JavaScript可以放在HTML中的任何位置,但放置的地方會對 JavaScript腳本代碼的執(zhí)行順序會有一定影響。因此在實際工作中一般將JavaScript腳本代碼放置于HTML文檔的 標簽之間。由于瀏覽器載入HTML 文檔的順序是從上到下,將JavaScript腳本代碼放置于標簽之間,可以確保在使用腳本之前,JavaScript腳本代碼就已經(jīng)被載入,下面展示的就是一段放置了JavaScript的示例代碼。
在上面的示例代碼中,標簽包裹的就是JavaScript腳本代碼。
3. 外鏈式
外鏈式是將所有的JavaScript代碼放在一個或多個以“.js”為擴展名的外部JavaScript文件中,通過
上述格式中,src是script標簽的屬性,用于指定外部腳本文件的路徑。同樣的,在外鏈式的語法格式中,我們也可以省略type屬性,將外鏈式的語法簡寫為:
需要注意的是,調(diào)用外部JavaScript文件時,外部的JavaScript文件中可以直接書寫JavaScript腳本代碼,不需要寫引入標簽。
在實際開發(fā)中,當需要編寫大量、邏輯復雜的JavaScript代碼時,推薦使用外鏈式。相比嵌入式,外鏈式的優(yōu)勢可以總結為以下兩點:
1) 利于后期修改和維護
嵌入式會導致HTML與JavaScript代碼混合在一起,不利用代碼的修改和維護,外鏈式會將HTML、CSS、JavaScript三部分代碼分離開來,利于后期的修改和維護。
2) 減輕文件體積、加快頁面加載速度
嵌入式會將使用的JavaScript代碼全部嵌入到HTML頁面中,這就會增加HTML文件的體積,影響網(wǎng)頁本身的加載速度,而外鏈式可以利用瀏覽器緩存,將需要多次用到的JavaScript腳本代碼重復利用,既減輕了文件的體積,也加快了頁面的加載速度。例如,在多個頁面中引入了相同的JavaScript文件時,打開第1個頁面后,瀏覽器就將JavaScript文件緩存下來,下次打開其他引用該JavaScript文件的頁面時,瀏覽器就不用重新加載JavaScript文件了。
在上面的示例代碼中,直接省略掉var,通過賦值的方式聲明變量。需要注意的是。由于JavaScript采用的是動態(tài)編譯,程序運行時不容易發(fā)現(xiàn)代碼中的錯誤,所以本書仍然推薦讀者使用顯式聲明變量的方法。