javascriptの循序漸進系列為《javascript高級程序設計》的讀書筆記，記錄了看書過程中覺得重點的地方和一些總結，為學習javascript打好基礎。
------------------------------------------------分割線----------------------------------------------------------------
javascript in html
>使用<script>標簽
>內聯和外部引用的區別
>文檔模型是怎樣影響js的
>瀏覽器不支持js時怎么辦
以上圍繞這四個方面展開。
一、<script>標簽
要在html頁面中使用JS，主要方式是通過<script>標簽。<script>標簽有6個屬性：
1)、async—可選。表明腳本立即下載但是不阻止頁面的其他行為，比如下載資源或者等待其他腳本的加載。這個屬性只對引用外部js文件有效。
2)、charset—可選。用來指定代碼的字符集，現在已經很少使用這個屬性了。
3)、defer—可選。表明腳本的執行可以安全地延遲直到文檔的內容完全解釋和展現。僅對引用外部js文件有效。IE7及以下的文檔內部的JS也支持。
4)、language—棄用。表明被代碼塊使用的腳本語言（比如 “JavaScript”, “JavaScript1.2”, or “VBScript”）。大多數瀏覽器會忽略這個屬性，不建議使用。
5)、src—可選。引用外部js文件的地址。
6)、type—可選。取代了language屬性；表明被代碼塊使用的腳本語言的內容類型（也叫MIME類型），一般來說是 “text/javascript”，當被省略時默認為 “text/javascript”。
<script>有兩種用法：一種是內嵌腳本，另一種是引用外部的腳本。
內嵌寫法：
<script type=”text/javascript”>
function sayHi(){
alert(“Hi!”);
}
</script>
JS是由上到下依次執行。注意在使用內嵌JS時不能在代碼中隨意使用"</script>"，下面代碼將會報錯：
<script type=”text/javascript”>
function sayScript(){
alert(“</script>”);
}
</script>
代碼里"</script>"會被解釋為script標簽的結束，避免這個錯誤需要用轉義符：
<script type=”text/javascript”>
function sayScript(){
alert(“<\/script>”);
}
</script>
引用外部JS：
<script type=”text/javascript” src=”example.js”></script>
注意標簽內部不能寫代碼，如果寫了會被瀏覽器忽略而直接加載外部文件。
引用外部文件時不僅可以引用本地文件，也可以引用其他域下的文件，例如：
<script type=”text/javascript” src=”http://www.somewhere.com/afile.js”></script>
注意：引用其他域下的文件時注意安全，避免引用惡意文件或不安全的域下文件被篡改。
引用JS文件時應該放在頁面結束的下面，避免加載JS時頁面要等待JS加載完成才執行渲染，如果引用的JS很多，頁面加載速度就會很慢。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- content here -->
<script type=”text/javascript” src=”example1.js”></script>
<script type=”text/javascript” src=”example2.js”></script>
</body>
</html>
用這種方法，在加載JS時頁面就已經渲染完成了，減少了頁面的等待時間從而加強了用戶體驗。
Deferred Scripts
延遲腳本：HTML4.01定義了defer屬性，腳本執行時不改變頁面的結構。設置了defer的腳本告訴瀏覽器：馬上下載可以延遲執行。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type=”text/javascript” defer src=”example1.js”></script>
<script type=”text/javascript” defer src=”example2.js”></script>
</head>
<body>
<!-- content here -->
</body>
</html>
盡管上面的JS寫在了head標簽里，但是在瀏覽器接收到</html>之前都不會執行。
Asynchronous Scripts
異步腳本：HTML5引進了async屬性。async和defer類似都是改變了處理腳本的方式，async也只能在外部引用JS時可用并且告訴瀏覽器馬上下載。不同的是，異步的腳本并不保證按照它們指定的順序執行，例如：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type=”text/javascript” async src=”example1.js”></script>
<script type=”text/javascript” async src=”example2.js”></script>
</head>
<body>
<!-- content here -->
</body>
</html>
上面代碼中，example2可能會比example1先執行，所以這兩個腳本不應該有依賴。指定異步腳本的目的是為了頁面在加載之前不需要等待腳本加載和執行，也不需要等待其他腳本的加載和執行。
內嵌腳本和外部腳本的區別
雖然可以直接在頁面上寫JS腳本，但最好是使用外部腳本。
>---維護性：外部腳本更好維護，只需要改相應文件下的腳本，更好地做到了結構和行為的分離。
>---緩存：如果兩個頁面用到了同一個JS文件，那么這個文件只需要下載一次，而不需要在頁面上寫相同的代碼，加快了頁面加載的時間。
文檔類型
IE5.5通過對文檔類型的轉換引入了文檔模型的概念。最先的兩種模式是IE5表現的怪異模式（一些不標準的特征）和IE表現得更加標準化的標準模式。兩種模式最主要的區別就是對CSS內容的渲染，也對JS的渲染有副作用。由于IE最先提出文檔類型這個概念，其他瀏覽器也相繼跟隨，于是乎就有了第三種模式—近乎于標準的模式，這個模式有很多標準模式的特征但是不是嚴格的，標準模式和近乎于標準的模式最主要的不同在于對待圖片周圍的間距上（圖片運用表格布局時更加明顯）。
當在頁面的最開始省略文檔類型時就會出發文檔的怪異模式。以下會運用標準模式：
<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!-- HTML5 -->
<!DOCTYPE html>
近乎于標準的模式會由傳統和框架文檔類型出發，如下：
<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>
<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
因為大多數近乎于標準的模式和標準模式非常相近，幾乎有很小的區別。人們常說的標準模式可能涵蓋了這兩種，所以大體上會分為怪異模式和標準模式。
THE <NOSCRIPT> ELEMENT
<noscript>標簽：當早期的瀏覽器不支持javascript時就要為頁面實現優雅降級。<noscript>就為不支持JS的瀏覽器提供了可選的內容。當瀏覽器不支持腳本或者腳本被禁用時，<noscript>里的內容就會顯示，否則的話，這里面的內容就不會顯示。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</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 requires a JavaScript-enabled browser.</p>
</noscript>
</body>
</html>
上例中當腳本禁用或者瀏覽器不支持腳本，p里面的文字就會顯示，否則的話p里面的文字永遠不會出現。
文章列表
留言列表
