【讀書筆記】JavaScript高級編程（一）

時間 2019-11-12

原文原文鏈接

書中第2章，在HTML中使用JavaScript摘要總結 javascript

2.1 <script>元素 html

包含在<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> less

src屬性能夠指向當前HTML頁面所在域以外的某個域中的URL，例如
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script> spa

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>
htm

2.1.3 在XHTML中的用法 ip

某些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 著李鬆峯曹力譯

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。