JavaScript高級程序設計學習筆記二（在HTML中使用JavaScript）

在 HTML 中使用 JavaScript

在html中使用JavaScript腳本有兩種方式一種是嵌入在HTML中的腳本，另外一種是引入外部的腳本。兩種方式都離不開<script>元素。

1. <script>元素介紹
<script>有下面6個元素
1.async；html頁面的渲染是阻塞型的，即從上而下遇到JavaScript腳本會進行解析和執行，腳本所有解析執行完成再接着往下渲染其餘內容，有了async屬性，就能夠解析並執行js腳本的同時渲染其餘內容。兩者並行執行，不會形成阻塞。
2.charset；字符編碼，較少使用。
3.defer；與async相似，區別在於，有defer屬性的js腳本的執行會在文檔徹底渲染以後。即async是js腳本解析執行與文檔渲染是並行的。defer是解析於文檔渲染並行，執行在文檔渲染以後。兩者都只對外部javascipt腳本有效。
4.language(已廢棄)；
5.type；常見的有type='text/javascript' 目的表示腳本的內容類型，不寫默認爲text/javascript ，JavaScript太火，默認腳本類型已成爲JavaScript。
6.src：用來引入外部javascript腳本。須要注意的是，帶有 src 屬性的<script>元素不該該在其<script>和</script>標籤之間再 包含額外的 JavaScript代碼。若是包含了嵌入的代碼，則只會下載並執行外部腳本文件，嵌入的代碼 會被忽略。
在使用<script>嵌入 JavaScript代碼時，記住不要在代碼中的任何地方出現"</script>"字符串。 例如，瀏覽器在加載下面所示的代碼時就會產生一個錯誤：

<script type="text/javascript">     
    function sayScript(){         
        alert("</script>");     
    } 
</script>

由於按照解析嵌入式代碼的規則，當瀏覽器遇到字符串"</script>"時，就會認爲那是結束的 </script>標籤。而經過轉義字符「」能夠解決這個問題，例如：<script type="text/javascript">

function sayScript(){         
        alert("<\/script>");     
    } 
</script>

這樣寫代碼瀏覽器能夠接受，於是也就不會致使錯誤了。

2. javascript放置的位置
將JavaScript腳本放在</body>標籤前是最佳的。緣由JavaScript的加載老是阻塞內容的渲染，若是放在頭部等位置會因爲javascript腳本的阻塞頁面遲遲渲染不出來，致使用戶體驗差，其次當js對dom節點進行操做時，會由於節點沒有渲染而致使操做失敗。

3. <noscript>
用以在不支持 JavaScript 的瀏覽器中顯示替代 的內容。在<noscript>元素中的內容只有在下列狀況下才會顯示出來： （1） 瀏覽器不支持腳本； （2）瀏覽器支持腳本，但腳本被禁用。

4. 小結
把 JavaScript 插入到 HTML 頁面中要使用<script>元素。使用這個元素能夠把 JavaScript 嵌入到 HTML頁面中，讓腳本與標記混合在一塊兒；也能夠包含外部的 JavaScript文件。而咱們須要注意的地方有：
1.在包含外部 JavaScript文件時，必須將 src 屬性設置爲指向相應文件的 URL。而這個文件既可 以是與包含它的頁面位於同一個服務器上的文件，也能夠是其餘任何域中的文件。
2.全部<script>元素都會按照它們在頁面中出現的前後順序依次被解析。在不使用 defer 和 async 屬性的狀況下，只有在解析完前面<script>元素中的代碼以後，纔會開始解析後面 <script>元素中的代碼。
3.因爲瀏覽器會先解析完不使用 defer 屬性的<script>元素中的代碼，而後再解析後面的內容， 因此通常應該把<script>元素放在頁面後，即主要內容後面，</body>標籤前面。
4.使用defer 屬性可讓腳本在文檔徹底呈現以後再執行。延遲腳本老是按照指定它們的順序執行。
5.使用 async 屬性能夠表示當前腳本沒必要等待其餘腳本，也沒必要阻塞文檔呈現。不能保證異步腳 本按照它們在頁面中出現的順序執行。
6.另外，使用<noscript>元素能夠指定在不支持腳本的瀏覽器中顯示的替代內容。但在啓用了腳本 的狀況下，瀏覽器不會顯示<noscript>元素中的任何內容。

--------------------因爲水平有限，若是文章有誤還請指出，以避免誤人。謝謝！?------------------