JavaScript高级程序设计(二)：在HTML中使用JavaScript
一、使用<script>元素
1、<script>元素定義了6個屬性：
async:可選。表示應該立即下載腳本，但不應該妨礙頁面中的其他操作，比如下載其他資源或等待加載其他腳本。只對外部腳本文件有效。
charset:可選。表示通過src屬性指定的代碼的字符集。很少人用。
defer:可選。表示腳本可以延遲到文檔完全被解析和顯示之后再執行。只對外部文件有效。
language：已廢棄。
src:可選。表示包含要執行代碼的外部文件。
type:可選。表示編寫代碼使用的腳本語言的內容類型【MIME類型】。例如：text/javascript、text/ecmascript。實際上服務器在傳送JavaScript文件時使用的MIME類型通常是application/x-javascript。但是為了兼容性和約定俗稱，目前type屬性的值依舊還是text/javascript。
2、<script>元素的使用
使用<script>元素的方式有兩種：直接在頁面引入和外部js的引入。
? ? ? ? ? ?1）頁面直接引入js時，只須為<script>指定type屬性。例如：
<scritpt type="text/javascript">function sayhi(){alert('hi,world!');} </script>注意：A、直接引入的js的解析是從上到下的。
B、在使用<script>嵌入JavaScript代碼時，記住不要在代碼中的任何地方出現“</script>”字符串。例如：瀏覽器在加載下面代碼時就會產生一個錯誤：
<script type="text/javascript">function sayScript(){alert('</script>'); } </script>因為按照解析嵌入式代碼的規則，當瀏覽器遇到字符串“</script>”時，就會認為那是結束的</script>標簽。但是通過把這個字符串分割為兩部分可以解決這個問題，例如：
<script type="text/javascript">function sayScript(){alert('<\/script>'); } </script>2）外部引入js，src屬性是必需的，這個屬性的值是一個指向外部JavaScript文件的鏈接，例如：
<script type='text/javascript' src='example.js'></script>特別提示：
1)、? 通過<script>元素的src屬性還可以包含來自外部域的JavaScript。這一點即使<script>元素倍顯強大，又讓它備受爭議。在這一點上，<script>與<img>元素非常相似，即它的src屬性可以是指向當前HTML頁面所在域之外的某個域中的URL，例如：
<script type='text/javascript' src="http://www.joyplus.com/example.js"></script>不過，在訪問自己不能控制的服務器上的JavaScript文件時則要多加小心。
2)、? 無論如何包含代碼，只要不存在defer和ansync屬性，瀏覽器都會按照<script>元素在頁面中出現的先后順序對它們依次進行解析。
3、<script>元素標簽的位置
按照慣例，所有<script>元素都應該放在頁面<head>元素中。例如：
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>Demo</title><script type='text/javascript' src='example1.js'></script><script type='text/javascript' src='example2.js'></script></head><body><!--主題內容--></body> </html>這種做法的目的就是把所有外部文件（包括CSS文件和JavaScript文件）的引用都放在相同的地方。可是，在文檔的<head>元素中包含所有JavaScript文件，意味著必須等到全部JavaScript代碼都被下載、解析和執行完成以后，才能開始呈現頁面的內容。這無疑導致瀏覽器在呈現頁面時出現明顯的延遲，而延遲期間的瀏覽器窗口中將是一片空白。為了避免這個問題，現代web應用程序一般都把全部JavaScript引用到<body>元素內容后面，例如：
?
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>Demo</title></head><body><!--主題內容--></body><script type='text/javascript' src='example1.js'></script><script type='text/javascript' src='example2.js'></script> </html>這樣就加快了用戶看到頁面的時間。
4、<script>延遲腳本【屬性defer】
defer屬性和async屬性都可以起到頁面不受<head>元素中外部引入的js文件的下載而現實緩慢。例如：
defer屬性：
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>Demo</title><script type='text/javascript' defer='defer' src='example1.js'></script><script type='text/javascript' defer='defer' src='example2.js'></script></head><body><!--主題內容--></body> </html>外部腳本文件延遲到瀏覽器遇到</html>標簽后再執行。HTML5規范要求腳本按照它們出現的先后順序執行，因此第一個延遲腳本會先于第二個延遲腳本執行。但在實際中，延遲腳本并不一定會按照順序執行。因此最好只包含一個延遲腳本。
由于并非所有瀏覽器都支持defer屬性，所以，把延遲腳本放在頁面底部仍然是最佳選擇。
5、異步腳本【屬性async】
async屬性：只適用于外部腳本，并告訴瀏覽器立即下載文件。但是js腳本的執行的先后順序就不能保證了。因此，使用async屬性的腳本之間確保不能相互依賴。
async屬性:目的是不讓頁面等待兩個腳本下載和執行，從而異步加載頁面其他內容。為此，建議異步腳本不要在加載期間修改DOM。
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>Demo</title><script type='text/javascript' async='async' src='example1.js'></script><script type='text/javascript' async='async' src='example2.js'></script></head><body><!--主題內容--></body> </html>
6、<script>元素在XHTML中的使用
XHTML，是將HTML作為XML的應用而重新定義的一個標準。即可擴展超文本標記語言。
編寫XHTML代碼的規則要比編寫HTML嚴格得多，而且直接影響能否在嵌入JavaScript代碼時使用<script>標簽。如下代碼：在HTML中有效，但在XHTML中無效。
<script type='text/javascript'>function compare(a,b){if(a<b){alert("a is less than b!");}else if(a>b){alert("a is greater than b!");}else{alert("a is equals to b!");}} </script>在XHTML中無效的原因是：?
比較語句a<b中的小于號（<）在XHTML中被當做開始一個新標簽來解析。但是作為標簽來講，小于號后面不能跟空格，因此就會導致語法錯誤。
避免在XHTML中出現類似語法錯誤的方法有兩個：
一是用相應的HTML實體替換（<）代碼中的所有小于號；如：
<script type='text/javascript'>function compare(a,b){if(a < b){alert("a is less than b!");}else if(a>b){alert("a is greater than b!");}else{alert("a is equals to b!");}} </script>這種方法，是代碼不好理解。因此，我們可以使用另一種方法。
二是使用CDATA片段來包含js代碼。在CDATA片段中可以使用任意字符，且不會導致語法錯誤。具體代碼如下：
<script type='text/javascript'>//<![CDATA[ function compare(a,b){if(a<b){alert("a is less than b!");}else if(a>b){alert("a is greater than b!");}else{alert("a is equals to b!");}}//]]> </script>但是由于不是所有瀏覽器都兼容XHTML的CDATA片段的語法，因此，在使用js注釋將CDATA標記注釋掉就可以了。
二、嵌入腳本與外部腳本
Js嵌入代碼與外部文件，最好的做法還是盡可能使用外部文件包含js代碼。優點是：
可維護性強：單獨將js放到一個文件中，維護方便，且變成也方便。
可緩存：多個HTML都是用一個js文件時，那么js文件只需下載一次。加快了頁面加載的速度。
適應未來：外部文件無須使用XHTML或注釋hack。Html和XHTML包含外部文件的語法相同。【注釋hack：CDATA片段】
三、考慮禁用JavaScript的場景【<noscript>元素】
<noscript>元素只有在下列情況下才會顯示出來：
1） 瀏覽器不支持腳本；
2） 瀏覽器支持腳本，但腳本被禁用。
符合上述任何一個條件，瀏覽器都會顯示<noscript>中的內容。而除此之外的請他情況下，瀏覽器不會呈現<noscript>中的內容。
這個頁面會在腳本無效的情況下向用戶顯示一條消息。而在啟用了腳本的瀏覽器中，用戶永遠也不會看到它。
?
轉載于:https://www.cnblogs.com/renxiaoren/p/5780801.html
總結
以上是生活随笔為你收集整理的JavaScript高级程序设计(二)：在HTML中使用JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hihocoder 1260
- 下一篇： JSP中base href=%=base