在 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>元素中的任何內容。

--------------------由于水平有限，如果文章有誤還請指出，以免誤人。謝謝！?------------------

總結

以上是生活随笔為你收集整理的JavaScript高级程序设计学习笔记二（在HTML中使用JavaScript）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。