《JavaScript高级程序设计》学习笔记（第二章）
在HTML中使用JavaScript
在前端開發中，HTML是整個頁面的基石，用于控制頁面的結構，如果沒有HTML的話，JavaScript也將無用武之地，所以使用JavaScript的首要問題就是如何將其與HTML頁面結合起來。
向HTML中添加JavaScript的方法就是利用<script>標簽，使用<script>元素的方法有兩種：
在頁面內直接寫JavaScript代碼
<script>function sayHi() {alert("Hi");}</script>引用外部JavaScript文件
<script src="example.js"></script>寫在<script>標簽中的代碼將被從上往下依次解釋。在解釋器對<script>中的所以代碼求值完畢之前，頁面中其余內容都不會被瀏覽器加載或顯示。
<script>標簽的位置
傳統的做法是將<script>標簽放到頁面的<head>元素中，如：
<!DOCTYPE html><html ><head><title>Example HTML Page</title><script src="exmpale1.js"></script><script src="example2.js"></script></head><body><!-- contents go here --></body></html>這種做法與引入CSS文件類似，目的是將引入文件的動作全部集中在一個位置，但是這種做法有一個缺點，那就是在JavaScript代碼全部最下載、解析和執行之前，頁面中的內容都不會顯示。假如我們引用了比較多的js文件，或者是在一個外國的網站，導致下載速度并不快，這就會造成一個的明顯延遲，在這期間頁面將是一片空白，這顯然是非常不好的用戶體驗。所以，現代的web程序一般將<script>標簽放在<body>的結束標簽之前，這樣在解析包含的JavaScript代碼之前，頁面內容就會先全部顯示在瀏覽器中。
<!DOCTYPE html><html><head><title>Example HTML Page</title></head><body><!-- contents go here --><script src="jquery.min.js"></script><script src="example.js"></script></body></html>延遲腳本
在HTML4.01中為<script>定義了defer屬性，這個屬性的用途是表明腳本在執行的時候不會影響頁面的構造。在<script>中指定這個屬性就是告訴瀏覽器可以立即下載腳本，但是要延遲執行。
<!DOCTYPE html><html><head><title>Document</title><script defer="defer" src="example.js"></script></head><body><!-- contents go here --></body></html>上面這段代碼雖然放在<head>中，但是其引用的腳本會在瀏覽器遇到</html>標簽后才執行。
defer屬性只有在引用外部JavaScript文件的時候才會起作用，如果給嵌入腳本使用這個屬性，則瀏覽器會直接忽略這個屬性。而且并非所有的瀏覽器都支持這個屬性，對于不支持此屬性的瀏覽器也會直接忽略該屬性。所以，將會導致延遲的腳本放到頁面的底部仍是最佳的選擇。
異步腳本
HTML5為<script>定義了async屬性，這個屬性的目的是讓頁面不用等待腳本的下載和執行，從而可以異步加載頁面的其它內容。與延遲腳本一樣，async也只適用于外部腳本。
嵌入代碼與外部文件哪家強
一般來講，引用外部文件的做法會比將代碼直接嵌入到HTML文件中更有優勢。
雖然JavaScript中沒有強調使用外部文件的規定，但是使用外部文件會有更多的優點：
- 可維護性
嵌入性的代碼會在遍布在各個HTML文件中，如果項目比較大，并且頁面文件比較多，就會造成一定程度的混亂，所以將所有的JavaScript文件都放到同一個目錄中，維護起來會比較輕松。說得比較專業一點就是可以將結構與行為相分離。 - 可緩存
如果多個文件使用的是同一套代碼，則使用外部文件的時候只需要下載一次代碼就夠了，這能夠加快頁面的加載速度。
<noscript>元素
這個元素的作用跟他的名字一樣，就是在當瀏覽器不支持JavaScript的時候用來顯示替代的內容。這個元素只有在以下情況中才會被顯示出來：
- 瀏覽器不支持腳本
- 瀏覽器支持腳本，但是腳本被禁用
下面是一個簡單的例子：
<!DOCTYPE html><html><head><title>Document</title><script type="text/javascript" defer="defer" src="example1.js"></script><script type="text/javascript" defer="defer" src="example2.js"></script></head><body><noscript><p>This page does not support javascript</p></noscript></body></html>這段代碼會在瀏覽器的JavaScript不可用的時候在頁面上顯示一條消息，而在啟用了JavaScript瀏覽器中，用戶則永遠不會看到這條消息。
轉載于:https://www.cnblogs.com/buginux/p/4092576.html
總結
以上是生活随笔為你收集整理的《JavaScript高级程序设计》学习笔记（第二章）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 民生银行安心存和整存整取的区别
- 下一篇： JavaScript之document.