在頁(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)過下載、解析、執(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)文章
JavaScript SHA1加密算法實(shí)現(xiàn)詳細(xì)代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript SHA1加密算法實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2016-10-10
這篇文章主要是對(duì)Javascript對(duì)象屬性方法進(jìn)行了詳細(xì)的匯總介紹。需要的朋友可以過來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
offsetHeight在OnLoad中獲取為0的現(xiàn)象
需要獲取div的高度時(shí)，往往需要用到offsetHeight，有時(shí)會(huì)碰到offsetHeight獲取到為0的現(xiàn)象，感興趣的朋友可以參考下面的代碼片段2013-07-07
JS 中forEach，for in、for of用法實(shí)例總結(jié)
這篇文章主要介紹了JS 中forEach，for in、for of用法,結(jié)合實(shí)例形式總結(jié)分析了JS 中forEach，for in、for of的基本功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-05-05
echarts餅圖指示器文字顏色設(shè)置不同實(shí)例詳解
在默認(rèn)的餅狀圖里面,圖例legend顏色是黑色的,有時(shí)候根據(jù)ui需要,根據(jù)不同的背景色,需要將圖例文字調(diào)成白色或者其他顏色,下面這篇文章主要給大家介紹了關(guān)于echarts餅圖指示器文字顏色設(shè)置不同的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了ES6 Promise對(duì)象概念與用法,簡(jiǎn)單分析了Promise對(duì)象的基本狀態(tài)與三種重要方法,并結(jié)合實(shí)例形式給出相關(guān)使用技巧,需要的朋友可以參考下2017-04-04
淺析Echarts圖表渲染導(dǎo)致內(nèi)存泄漏的原因及解決方案
在今年某個(gè)可視化大屏項(xiàng)目中,出現(xiàn)了一個(gè)問題,項(xiàng)目在運(yùn)行一段時(shí)間后,頁(yè)面出現(xiàn)了崩潰,而且是大概運(yùn)行幾天之后,因?yàn)榇笃另?xiàng)目是部署到客戶現(xiàn)場(chǎng)大屏,長(zhǎng)時(shí)間運(yùn)行不關(guān)閉,小編認(rèn)為 Echarts 圖表渲染導(dǎo)致了內(nèi)存泄漏,本文將深入分析這一問題,并提供解決方案2023-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)文字無(wú)限輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章通過代碼給大家介紹了JS判斷是否是微信掃碼的方法，非常不錯(cuò)，需要的朋友參考下吧2017-08-08
showModalDialog在谷歌瀏覽器下會(huì)返回Null的解決方法
showModalDialog的返回值在IE、火狐下面都能夠獲取返回值，但是在谷歌瀏覽器下面會(huì)返回Null，下面有個(gè)不錯(cuò)的解決方法，感興趣的朋友可以參考下2013-11-11