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