將JavaScript插入HTML的主要方法是使用<script>元素。
1 <script> 的基本使用方式
使用<script>的方式有兩種，第一種就是通過(guò) <script> 直接在網(wǎng)頁(yè)中嵌入JavaScript代碼：
<script>function sayHi() {console.log("Hi! ");}</script>
包含在<script>內的代碼會(huì )被從上到下解釋。在上面的例子中，被解釋的是一個(gè)函數定義，并且該函數會(huì )被保存在解釋器環(huán)境中。在<script>元素中的代碼被計算完成之前，頁(yè)面的其余內容不會(huì )被加載，也不會(huì )被顯示。在使用行內JavaScript代碼時(shí)，要注意代碼中不能出現字符串</script>。比如，下面的代碼會(huì )導致瀏覽器報錯：
<script>function sayScript() {console.log("</script>");}</script>
如何正確的寫(xiě)：（只需要轉義字符“\”）
<script>function sayScript() {console.log("<\/script>");}</script>
使用<script>的方式有兩種，第二種就是使用包含外部文件中的JavaScript，必須使用src屬性。這個(gè)屬性的值是一個(gè)URL，指向包含JavaScript代碼的文件，比如：
<script src="example.js"></script>這個(gè)例子在頁(yè)面中加載了一個(gè)名為example.js的外部文件。文件本身只需包含要放在<script>的起始及結束標簽中間的JavaScript代碼。與解釋行內JavaScript一樣，在解釋外部JavaScript文件時(shí)，頁(yè)面也會(huì )阻塞。
瀏覽器在解析這個(gè)資源時(shí)，會(huì )向src屬性指定的路徑發(fā)送一個(gè)GET請求，以取得相應資源。
2 <script> 標簽的位置
過(guò)去，所有<script>元素都被放在頁(yè)面的<head>標簽內，如下面的例子所示：
<! DOCTYPE html><html><head><title>Example HTML Page</title><script src="example1.js"></script><script src="example2.js"></script></head><body><! -- 這里是頁(yè)面內容 --></body></html>
這種做法的主要目的是把外部的CSS和JavaScript文件都集中放到一起。不過(guò)，把所有JavaScript文件都放在<head>里，也就意味著(zhù)必須把所有JavaScript代碼都下載、解析和解釋完成后，才能開(kāi)始渲染頁(yè)面（頁(yè)面在瀏覽器解析到<body>的起始標簽時(shí)開(kāi)始渲染）。對于需要很多JavaScript的頁(yè)面，這會(huì )導致頁(yè)面渲染的明顯延遲，在此期間瀏覽器窗口完全空白。為解決這個(gè)問(wèn)題，現代Web應用程序通常將所有JavaScript引用放在<body>元素中的頁(yè)面內容后面，如下面的例子所示：
<! DOCTYPE html><html><head><title>Example HTML Page</title></head><body><! -- 這里是頁(yè)面內容 --><scriptsrc="example1.js"></script><scriptsrc="example2.js"></script></body></html>
這樣一來(lái)，頁(yè)面會(huì )在處理JavaScript代碼之前完全渲染頁(yè)面。用戶(hù)會(huì )感覺(jué)頁(yè)面加載更快了，因為瀏覽器顯示空白頁(yè)面的時(shí)間短了。
3 推遲執行腳本
HTML 4.01為<script>元素定義了一個(gè)叫defer的屬性。這個(gè)屬性表示腳本在執行的時(shí)候不會(huì )改變頁(yè)面的結構。也就是說(shuō)，腳本會(huì )被延遲到整個(gè)頁(yè)面都解析完畢后再運行。因此，在<script>元素上設置defer屬性，相當于告訴瀏覽器立即下載，但延遲執行。
<! DOCTYPE html><html><head><title>Example HTML Page</title><script defer src="example1.js"></script><script defer src="example2.js"></script></head><body><! -- 這里是頁(yè)面內容 --></body></html>
雖然這個(gè)例子中的<script>元素包含在頁(yè)面的<head>中，但它們會(huì )在瀏覽器解析到結束的</html>標簽后才會(huì )執行。
HTML5規范要求腳本應該按照它們出現的順序執行，因此第一個(gè)推遲的腳本會(huì )在第二個(gè)推遲的腳本之前執行，而且兩者都會(huì )在DOMContentLoaded事件之前執行。
defer屬性只對外部腳本文件才有效。這是HTML5中明確規定的，因此支持HTML5的瀏覽器會(huì )忽略行內腳本的defer屬性。
4 異步執行腳本
HTML5為<script>元素定義了async屬性，async屬性與defer類(lèi)似，它們兩者也都只適用于外部腳本，都會(huì )告訴瀏覽器立即開(kāi)始下載，但延遲執行，與defer不同的是，標記為async的腳本并不保證能按照它們出現的次序執行，比如：
<! DOCTYPE html><html><head><title>Example HTML Page</title><script async src="example1.js"></script><script async src="example2.js"></script></head><body><! -- 這里是頁(yè)面內容 --></body></html>
在這里，第二個(gè)腳本可能先于第一個(gè)腳本執行。
5 動(dòng)態(tài)加載腳本
JavaScript可以使用DOMAPI，所以通過(guò)向DOM中動(dòng)態(tài)添加script元素同樣可以加載指定的腳本。只要創(chuàng )建一個(gè)script元素并將其添加到DOM即可。
let script = document.createElement('script');script.src = 'gibberish.js';document.head.appendChild(script);
完畢
聯(lián)系客服
