首頁 > 開發者 > JavaScript
標籤：html 指令碼語言 vbscript ade rom nbsp 進階 控制 空白
引言：在學習JavaScript之前，我們要先學習如何在HTML中引用JavaScript，此篇總結將會詳細介紹<script>元素的用法及其屬性，並分析幾種引用方式的優劣，以及延遲指令碼和非同步指令碼的區別。
<script>的介紹及其屬性：
向HTML中插入JavaScript的只要方法使用<script>元素，這個元素由Netscape （網景公司）創造，並在Netscape Navigator 2中首先實現，後來這個元素被加入到正式的HTML規範中。HTML4.01
為<script>定義了六個屬性：
1、async [?‘z??k]（非同步） :可選，表示應該立即下載指令碼，當時不妨礙頁面中的其他動作，比如下載其他資源或者等待其他指令碼，只對外部指令檔有效
2、charset (字元集): 可選，表示通過src 屬性指定的代碼的字元集，由於太多瀏覽器會忽略它的值，所以平時很少有用到。
3、defer(延遲) ：可選。表示指令碼可以延遲到文檔完全被解析和顯示之後再執行。只對外部檔案有效，IE7以及更早的版本對嵌入指令碼也支援這個屬性。
4、langage :已廢棄的屬性，原先用於表示編寫代碼使用的指令碼語言，比如：JavaScript、JavaScript1.2 或者VBScript ，大多數瀏覽器忽略這個屬性。就不用了。
5、src :可選，表示包含要執行的檔案。
6、type :可選，可以看成是 langage 的替代，表示編寫代碼使用的指令碼語言的內容的類型（也稱為MIME類型），這個屬性不是必要的，如果沒有指定這個屬性，那麼其預設為：text/javascript.。
<script>的使用:
最簡單的方式直接內嵌程式碼：在使用<script>嵌入JavaScript時 ，只需要指定type 即可 ：<script type="text/javascript"> ...程式碼片段...</script> , 這裡注意的是代碼是從上到下執行，在碰到"</script>"
的時候就停止，所以代碼中謹慎不要隨意出現這個程式碼片段，比如 “alert （“</script>”）”這樣會造成代碼停止，但是如果非得使用的話，可以這樣：“alert （“< \/script>”）”。
外部參考方式：使用 src 屬性標出URL，從外部參考：<script type="text/javascript" src="指令檔的URL"></script> 這種方式平時我們用的比較多，平時我們不指定 defer 與async 屬性的話，
那麼指令檔會按照它在頁面中的出現順序來執行。
內嵌程式碼與外部檔案的兩種方式的優劣：雖然兩種方式都可以讓頁面使用到JavaScript ，但是一般認為最好的方式是採用外部檔案引用的方式（雖然這不是硬性要求），但是相對於直接在頁面中
內嵌程式碼讓頁面看起來更 “臃腫”，不得不說外部參考其優點也是和明顯的，而且不僅如此，外部參考的好處還有：
1、可維護性：遍及不同HTML 頁面的JavaScript 會造成維護問題（如果採用嵌入式，碰到每個頁面都用一個JavaScript代碼，那麼如果這個JavaScript代碼需要修改就得每個頁面都改一次，會增加維護難度）。
而如果採用外部參考，直接修改一次玩不檔案就行了。
2、可緩衝：瀏覽器能夠根據具體的設定緩衝連結的所有外部JavaScript檔案，也就是說如果兩個頁面都採用一個檔案，那麼這個檔案只需要下載一次就可以了。
3、適應未來：HTML與XHTML包含外部檔案的文法是相同的。（XHTML真的是很嚴格）
頁面中<script>的位置：
按照慣例我們可能會把 <script>放到<head>標籤裡面，這種方式就是希望把外部參考的檔案放到一起，讓頁面看起來更規範，但是不好的地方是頁面載入到<head>時會停止然後等待
JavaScript載入結束才繼續執行，這樣一來頁面的載入速度效能會大打折扣（因為網頁載入到body 時才開始呈現頁面內容，所以如果在head載入JavaScript造成頁面延遲的話，那麼在延遲期間
頁面將是以一片空白）。為了避免這樣的情況，一般我們會將JavaScript檔案的引用放到body 元素中頁面的內容後面：
<body>
頁面內容》》》》》》》》》》》》》》》》》》
頁面內容》》》》》》》》》》》》》》》》》》
頁面內容》》》》》》》》》》》》》》》》》》
<script src="demo.js" type="text/javascript"></script>
</body>
延遲指令碼 defer：
這個屬性的用途是表明指令碼在執行時不會影響頁面構造，也就是說，指令碼會延遲到整個頁面都解析完後在再運行，因此使用這個元素就是告訴
瀏覽器“ 立即下載，但是請順延強制”，（一般來說就是延遲到瀏覽器碰到 </html>標籤後再執行，就算我們將<script>放到<head>中也是如此）。
HTML5規範要求指令碼按照它們出現的先後順序執行，因此第一個延遲指令碼會先於第二個延遲指令碼執行，而這兩個指令碼會先於DOMContentLoaded事件。在現實當中，延遲指令碼並不一定會按照順序執行，
也不一定會在DOMContentLoaded事件觸發前執行，因此最好只包含一個延遲指令碼。
IE4~IE7還支援對嵌入指令碼的defer屬性，但IE8以及之後的版本則完全支援HTML5規定的行為。
IE4，Firefox 3.5，Safari 5和Chrome是最早支援defer屬性的瀏覽器。其他瀏覽器胡忽略這個屬性，像平常一樣處理指令碼，為此，把延遲指令碼放在頁面底部仍然是最佳選擇。
defer屬性的指令碼是在頁面解析完成後，按照順序執行，同時會在document的DOMContentLoaded之前執行。
非同步指令碼 async:
這個屬性的作用不讓頁面等待指令碼下載和執行，從非同步載入頁面和其他內容。為此，建議非同步指令碼不要在載入期間修改DOM .
async屬性的指令碼會在下載結束後立刻執行，同時會在window的load事件之前執行，所以就會出現順序被打亂的情況；
沒有defer 與async:
瀏覽器會立即載入並執行指定的指令碼，“立即”指的是在渲染該 script 標籤之下的文件項目之前，也就是說不等待後續載入的文件項目，讀到就載入並執行。
<noscript>:
早期的瀏覽器面臨一個問題，即當瀏覽器不支援javascript 的時候，如何考慮 “平穩退化” ，此時就有了<noscript>的作用了。這個標籤的作用是：當瀏覽器不支援javascript，或者是支援但是被
停止使用JavaScript 的時候用來替代內容所用。
例如：
<body>
<noscript> <p>本頁面需要啟用javascript功能</p> </noscript>
</body>
---------------------------------------------------------------------------
本章完，下一章"預告“：JavaScript的文法，資料類型，控制語句。
《JavaScript進階程式設計》的學習總結 二
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
