在頁(yè)面中引入js的兩種方法(推薦)
在頁(yè)面中引入js有兩種基本方式：在頁(yè)面中嵌入js、引用外部js文件。
一、在頁(yè)面中嵌入js
這是在頁(yè)面使用js最簡(jiǎn)單的方式了，一般我在寫個(gè)小測(cè)試的情況下會(huì)用這種方式。
把script元素寫在</body>前面，script元素的內(nèi)容就是js代碼。像這樣：
<script>
// 在這里寫js
function test(){
alert('說(shuō)點(diǎn)什么呢');
}
test();
</script>
二、引用外部js文件
引用外部js文件，可以使js文件和HTML文件相分離、一個(gè)js文件可被多個(gè)HTML文件使用、維護(hù)起來(lái)也更方便等等。
用法是把script元素的src屬性，設(shè)置為js文件的URL即可，如：
<script src="js/test.js"></script>
三、script元素在HTML文件中的位置
如果把script元素放在head元素里，就像這樣：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="xxx.js"></script> </head> <body> <!--頁(yè)面內(nèi)容--> </body> </html>
這樣做的話，待瀏覽器經(jīng)過(guò)下載、解析、執(zhí)行完js文件之后，才會(huì)呈現(xiàn)頁(yè)面內(nèi)容。如果一個(gè)頁(yè)面需要很多個(gè)js文件，那么瀏覽器可能會(huì)出現(xiàn)短暫的“白板”，用戶體驗(yàn)不好。
所以，我們應(yīng)該把js文件放在</body>的前面，這樣瀏覽器會(huì)先展現(xiàn)頁(yè)面給用戶。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--<script src="xxx.js"></script>--> </head> <body> <!--頁(yè)面內(nèi)容--> <script src="xxx.js"></script> </body> </html>
以上這篇就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
2008-02-02
微信小程序最新獲取頭像信息之前是使用open-dada獲取微信頭像和昵稱,但是后面由于官網(wǎng)更新,此方法被收回了,所以不能使用此方法了,下面這篇文章主要給大家介紹了關(guān)于微信小程序獲取頭像和昵稱的最新方法,本文介紹的方法可以直接拿來(lái)用,需要的朋友可以參考下2023-05-05
Javascript中匿名函數(shù)的調(diào)用與寫法實(shí)例詳解(多種)
js中定義函數(shù)的方式有很多種，函數(shù)直接量就是其中一種，下面通過(guò)本文給大家介紹匿名函數(shù)是如何調(diào)用的及匿名函數(shù)的n中寫法，對(duì)js匿名函數(shù)調(diào)用，js匿名函數(shù)寫法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
JavaScript報(bào)錯(cuò)：Uncaught ReferenceError: XYZ is&
在 JavaScript 編程中,“Uncaught ReferenceError: XYZ is not defined” 是一種常見(jiàn)的錯(cuò)誤,這種錯(cuò)誤通常發(fā)生在試圖使用一個(gè)未聲明的變量或標(biāo)識(shí)符時(shí),故本文給大家介紹了JavaScript報(bào)錯(cuò)：Uncaught ReferenceError: XYZ is not defined的解決方法,需要的朋友可以參考下2024-07-07
JavaScript中將秒轉(zhuǎn)換為分鐘和秒,通過(guò)將秒數(shù)除以 60 得到整分鐘數(shù),獲取剩余的秒數(shù),本文通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-09-09
Bootstrap導(dǎo)航條學(xué)習(xí)使用(二)
這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航條的使用方法第二篇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
詳解JavaScript如何實(shí)現(xiàn)四種常用排序
這篇文章主要為大家介紹了如何利用JavaScript實(shí)現(xiàn)四個(gè)常用的排序：插入排序、交換排序、選擇排序和歸并排序，文中利用動(dòng)圖詳細(xì)介紹了實(shí)現(xiàn)過(guò)程，需要的可以參考一下2022-02-02
JS實(shí)現(xiàn)FLASH幻燈片圖片切換效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)FLASH幻燈片圖片切換效果的方法,實(shí)例分析了javascript操作圖片實(shí)現(xiàn)Flash幻燈效果的技巧,需要的朋友可以參考下2015-03-03
JS+ACTIVEX實(shí)現(xiàn)網(wǎng)頁(yè)選擇本地目錄路徑對(duì)話框
使用ACTIVEX對(duì)象遍歷本地磁盤和目錄,只需網(wǎng)頁(yè)啟用相關(guān)ACTIVEX的INTERNET選項(xiàng)即可實(shí)現(xiàn)路徑選擇對(duì)話框，感興趣的你可以參考下哈希望可以幫助到你2013-03-03
這篇文章主要介紹了TypeScript 泛型，對(duì)泛型感興趣的同學(xué)，可以參考下2021-05-05