首頁 > 開發者 > JavaScript
標籤：
書中第2章，在HTML中使用JavaScript摘要總結
2.1 <script>元素
<script>中的5個屬性：
charset：可選。表示通過src屬性指定的代碼的字元集。多數瀏覽器會忽略它的值，很少人使用。
defer：可選。表示指令碼可以延遲到文檔完全被解析和顯示之後再執行。IE和Firefox3.1是目前唯一支援defer屬性的主流瀏覽器。其他瀏覽器則會忽略，不延遲指令碼的執行。
language：已廢棄。原來用於表示編寫代碼使用的指令碼語言（如JavaScript、JavaScript1.2或VBScript）。
src：可選。表示包含要執行代碼的外部檔案。
type：必需。表示編寫代碼使用的指令碼語言的內容類型（也稱為MIME類型）。通常為text/javascript。
包含在<script>元素內的JavaScript代碼將被從上至下依次解釋。在解譯器對<script>元素內部的所有代碼求值完成以前，頁面中的其餘內容都不會被瀏覽器載入或顯示。
在使用<script>嵌入JavaScript代碼時，任何地方不能出現"<script>"字串。
<script type="text/javascript">
function sayScript(){
alert("</script>"); //此處會報錯
}
</script>
可將"</script>"分開寫，避免錯誤。
<script type="text/javascript">
function sayScript(){
alert("</scr" + "ipt>");
}
</script>
src屬性可以指向當前HTML頁面所在域之外的某個域中的URL，例如
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>
2.1.1 標籤的位置
按照慣例，所有的<script>元素都應該放在頁面的<head>元素中，可是，這將意味著必須等到全部JavaScript代碼都被下載、解析和執行完成以後，才能呈現頁面內容（瀏覽器在遇到<body>標籤時才開始呈現內容）。對於需要很多JavaScript代碼的頁面來說，會導致呈現頁面時出現的延遲現象。為了避免這種現象發生，可以把全部JavaScript引用發在頁面的內容後面或增加defer屬性，如下例所示：
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 這裡放內容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
2.1.3 在XHTML中的用法
某些JavaScript代碼在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 equal to B");
}
}
</script>
代碼中的比較語句a < b 中的小於符號（<）在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 equal to B");
}
}
</script>
這樣雖然可以運行，但不便於理解。因此可用第二種方法，用一個CData片段來包含JavaScript代碼。在XHTML（XML）中，CData片段是文檔中的一個特殊地區，這個地區中可以包含不需要解析的任意格式的常值內容。
<script type="text/javascript">
//某些瀏覽器不相容XHTML，因而不支援CData片段，可以使用JavaScript注釋將CData標記注釋掉
//<![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 equal to B");
}
}
//]]>
</script>
2.3 <noscript>元素
這個元素可以包含能夠出現在文檔<body>中的任何HTML元素——<script>元素除外，包含在<nosript>元素中的內容只有在下列情況下才會顯示出來：
1.瀏覽器不支援指令碼
2.瀏覽器支援指令碼，但指令碼被禁用。
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<noscript>
<p>本頁面需要瀏覽器支援（啟用）JavaScript</p>
</noscript>
</body>
</html>
以上所有內容均摘自圖書《JavaScript 進階程式設計（第2版）》[美] Nicholas C.Zakas 著 李松峰 曹力 譯
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
