Javascript系列之在HTML中使用JavaScript

時間 2019-11-26

標籤 javascript 系列之在 html 使用欄目 JavaScript 简体版

原文原文鏈接

本文主要包括如下幾方面內容:javascript

1)使用<script>元素html

2)嵌入腳本和外部腳本java

3)文檔模式對JavaScript的影響web

4)考慮禁用JavaScript的場景瀏覽器

只要一提到把Javascript放到網頁中,就不得不涉及Web的核心語言----HTML.在開發JavaScript的時候,Netscape要解決的一個重要問題就是如何作到讓JavaScript既能與HTML頁面共存,又不影響那些頁面在其餘瀏覽器中的程序效果.最終決定就是爲Web增長統一的腳本支持.所以web早期的不少語法都保留了下來,餅被證明歸入HTML規範中.less

一、使用<script>元素異步

向HTML中插入JavaScript的主要方法是使用<script>元素。HTML4.01爲<script>定義了下列6個屬性:async

async:可選.表示當即下載腳本,但不妨礙頁面中的其餘操做,只對外部腳本文件有用.
charset:可選.表示經過src屬性指定的代碼的字符集.不多用.
defer:可選.表示腳本能夠延遲到文檔徹底解析和顯示以後再決定執行.指定外部文件有用.
language:已廢棄.原來用於表示編寫代碼是用的腳本語言(如JavaScript，JavaScript1.2或VBScript）。
src:可選.表示包含執行代碼的外部文件.
type:可選.能夠看出是language屬性的替代屬性；表示編寫代碼使用的腳本語言的內容類型（也成MIME類型）默認值text/javascript。

使用<script>元素有兩種方式:直接在頁面嵌入JavaScript代碼和包含外部文件.ide

1)在頁面中直接嵌入JavaScript代碼是,只需制定<script>的type屬性.如:spa

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

包含在<script>中的代碼將從上至下依次解釋.在對<script>元素內部的全部代碼求值完畢前,頁面中的其他內容都不會被瀏覽器加載顯示.

在使用<script>嵌入JavaScript代碼時，不要在代碼中的任何地方出現</script>字符串，不然會產生錯誤。能夠經過轉義字符解決這個問題。

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

View Code

經過<script>元素來包含外部文件時,src屬性是必須的.這個屬性值指向一個外部的JavaScript文件的連接.如:

其中外部文件example.js中只需包含一般放在開始<script>和結束</script>中的代碼，與解釋處理嵌入式文件同樣，在解釋外部文件時，頁面的處理也會暫時中止。在帶有src屬性的<script>元素裏不該該再包含額外的javascript代碼，即便包含了，這些代碼也會被忽略。

二、標籤的位置

傳統的作法是將<script>元素放在<head>元素中。如:

<!DOCTYPE html>
<html>
    <head>
       <title>Example HTML Page</title>
       <script type="text/javascript" src="example.js"></script>
    </head>
</html。

View Code

可是全部的JavaScript文件和代碼時，意味着在全部的JavaScript文件和代碼下載、解釋和執行完以後，才能開始呈現頁面的內容，當JavaScript的代碼不少時，會致使瀏覽頁面有明顯的延遲，爲了不這個問題，現代的Web應用程序通常都把所有JavaScript引用放在<body>元素中頁面內容後面。

三、延遲腳本（defer屬性）

HTML4.01爲<script>標籤訂義了defer屬性（只用於外部文件），這個屬性用語代表腳本在執行時不會影響頁面的構造，即腳本會被延遲到整個頁面都解釋執行完後再執行，所以<script>中設置了defer屬性就是告訴瀏覽器當即下載但延遲執行。在XHTML文檔中，要把defer屬性設置爲：defer=「defer」。

四、異步腳本

HTML5爲<script>元素定義了async屬性，用於改變處理腳本的行爲。只用於外部腳本。如：

<!DOCTYPE html>
<html>
   <head>
       <title>Example HTML Page</title>
       <script type="text/javascript" async src="example.js">               </script>
    </head>
</html>

View Code

指定async的目的是不讓頁面等待腳本下載和執行，從而異步的加載頁面其餘內容，所以建議在異步腳本中不要包含修改DOM的代碼。異步腳本必定會在頁面的load事件錢執行，單可能會在DOMContentLoaded事件觸發以前或以後執行。

五、在XHTML中的語法

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

在HTML中有特殊的規則肯定<script>元素中的哪些內容能夠被拆解，但這些特殊的規則在XHTML中不適用，如比較：a<b中的小於號（<）在XHTML中將被當作開始一個新的標籤，但做爲標籤來說<後不能跟空格，所以會致使語法錯誤，避免在XHTML中出現相似的語法錯誤有兩個方法：一是用相應的HTML實體（&lt；）替代代碼中的全部小於號（<）；二是用一個CData片斷來包含JavaScript代碼。下XHTML中，CDa他片斷是文檔中的一個特殊區域，這個區域中能夠包含不須要解釋的任意格式的文本內容，如：

<script type="text/javascript><![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>

View Code

六、<noscript>元素

早期的瀏覽器都面臨一個特殊的問題，即當瀏覽器不支持JavaScript時如何讓頁面平穩的退化，這就是<noscript>元素的做用，用以在不支持JavaScript的瀏覽器中顯示替代的內容，這個元素能夠包含可以出如今文檔<body>中的任何HTML元素（<script>元素除外）。包含<noscript>元素中的內容只有在下列狀況下才會顯示出來：

瀏覽器不支持腳本
瀏覽器支持腳本，但腳本被禁用

代碼示例：

<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer ="defer" src="example.js"></script>
<script type="text/javascript" defer ="defer" src="example1.js"></script>
</head>
<body>
<noscript>
<p>本頁面須要瀏覽器支持（啓用）JavaScript</p>
</noscript>
</body>
</html>

View Code