第二章在HTML中使用JavaScript

時間 2019-12-04

原文原文鏈接

《JavaScript高級程序設計》（第3版）學習筆記及心得。寫於入門JS第9個月。

2.1 <script>元素

屬性：javascript

async: 可選。是否當即下載腳本，僅對外部腳本文件有效。html

charset: 可選。經過src屬性指定代碼的字符集。（不多用）java

defer: 可選。是否延遲到DOM徹底被解析和顯示以後再執行。僅對外部腳本文件有效。瀏覽器

language: 已廢棄。緩存

src: 可選。包含要執行代碼的外部文件。帶有此屬性的<script>元素，瀏覽器不會再解析其<script>之間的代碼。能夠是外部域的地址，但要當心使用。app

type: 可選。編寫代碼使用的腳本語言的內容類型（MIME類型），默認text/javascript.less

不少地方將async描述爲「是否異步執行」，但畢竟還得看defer，因此我感受仍是《高程》裏的描述準確些。異步

截取runoob.com中關於async屬性的解釋（http://www.runoob.com/tags/att-script-async.html）:async

使用<script>元素方式學習

直接在頁面中嵌入JavaScript代碼
注意不要在代碼中的任何位置出現</script>, 若是必定須要，能夠用轉義字符"\", 如"<\/script>".

包含外部JavaScript文件
XHTML文檔中能夠省略關閉標籤</script>, 但不符合HTML規範（得不到某些瀏覽器尤爲是IE的正確解析）.

2.1.1 標籤的位置

傳統的作法是把全部<script>元素放在<head>內，這樣作意味着，必須等到所有JavaScript代碼都被下載、解析和執行完成以後，纔開始加載頁面內容。因此對於JavaScript比較多的頁面來講，會致使瀏覽器在呈現頁面時出現明顯延時。

因此現代Web應用程序通常把JavaScript所有放在<body>最後。或者經過defer設置什麼時候加載。

2.1.2 延遲腳本

設置defer="defer"後，當前腳本會優先於DOMContentLoaded事件【詳見第十三章】執行）。注意：在現實中，延時腳本並不必定會按照順序執行，也不必定會在DOMContentLoaded事件出發前執行，所以最好只包含一個延遲腳本。

2.1.3 異步腳本

async屬性。是否當即下載文件。亦不保證按照指定他們的前後順序執行。

指定async屬性的目的通常是：不讓頁面等待兩個腳本下載和執行，從而異步加載頁面其餘內容。爲此，建議異步腳本不要在其加載期間修改DOM.

異步腳本必定會在頁面的load事件前執行，但可能會在DOMContentLoaded事件觸發以前或以後執行。

支持的瀏覽器： Firefox 3.6+, Safari 5+ 和 Chrome.

2.1.4 在XHTML中的用法

可擴展超文本標記語言(XHTML), 是將HTML做爲XML的應用而從新定義的餓一個標準。編寫XHTML要比HTML嚴格得多，並且直接影響可否在嵌入JavaScript代碼是使用<script/>標籤。

<script>
    function compare(a, b){
        if(a < b){ //此處在XHTML中，"<"會被解析爲下一個標籤的開始
            alert("A is less than B");
        }else if(a > b){ 
            alert("A is greater than B");
        }elss{
            alert("A is equal to B");
        }
    }
</script>

解決方案：

1.用相應的HTML實體(<)替換代碼中全部小於號(<), 如:

if(a &lt; b){}

2.用一個CData片斷來包含JavaScript代碼。在XHTML(XML)中，CData片斷是文檔中的一個特殊區域，這個區域能夠包含不須要解析的任意格式的文本內容。如：

<script type="text/javascript">
<![CDATA[
function compare(a, b){
    if(a < b){ //此處在XHTML中，"<"會被解析爲下一個標籤的開始
        alert("A is less than B");
    }else if(a > b){ 
        alert("A is greater than B");
    }elss{
        alert("A is equal to B");
    }
}
]]>
//若須要解決有些瀏覽器不兼容XHTML、不支持CData片斷，可使用註釋將CData標記註釋掉。
</script>