春宵棋牌正式版

書名：從零開始學(xué)JavaScript
作者名：周瑞等編著
本章字?jǐn)?shù)： 2004字
更新時(shí)間： 2018-12-27 12:55:29

1.4 如何引入JavaScript腳本代碼

可以通過多種方式將JavaScript腳本代碼嵌入到目標(biāo)HTML文檔中，總的來說，有如下4種標(biāo)準(zhǔn)方法。

? 代碼包含于<script>和</script>標(biāo)記對，然后嵌入到HTML文檔中。

? 通過<script>標(biāo)記的src屬性鏈接外部的JavaScript腳本文件。

? 通過JavaScript偽URL地址引入。

? 通過HTML文檔事件處理程序引入。

下面分別介紹JavaScript腳本的幾種標(biāo)準(zhǔn)引入方法。

1.4.1 通過<script>與</script>標(biāo)記對引入

在源程序1.1 中除<script>與</script>標(biāo)記對之間的內(nèi)容外，均為最基本的HTML代碼。<script>和</script>標(biāo)記對將JavaScript腳本代碼進(jìn)行了封裝，并嵌入到HTML文檔中：

        document.write("Hello World!");

瀏覽器載入嵌有JavaScript腳本的HTML文檔時(shí)，能自動(dòng)識(shí)別JavaScript腳本代碼起始標(biāo)記<script>和結(jié)束標(biāo)記</script>，并將其間的代碼按照解釋JavaScript腳本代碼的方法加以解釋，然后將解釋結(jié)果返回HTML文檔并在瀏覽器窗口顯示。

Tips

所謂標(biāo)記對，就是必須成對出現(xiàn)的標(biāo)記，否則其間的腳本代碼不能被瀏覽器解釋執(zhí)行。

考查如下代碼：

        <script language="javascript 1.2" type="text/javascript">
          document.write("Hello World!");
        </script>

首先，<script>和</script>標(biāo)記對將JavaScript腳本代碼進(jìn)行封裝，同時(shí)告訴瀏覽器其間的代碼為JavaScript腳本代碼，然后調(diào)用document文檔對象的write( )方法寫字符串到HTML文檔中。

下面重點(diǎn)介紹<script>標(biāo)記的幾個(gè)屬性：

? language屬性：用于指定封裝代碼的腳本語言及版本，有的瀏覽器還支持perl、VBScript等，所有腳本瀏覽器都支持JavaScript（當(dāng)然，非常老的版本除外），同時(shí)language屬性默認(rèn)值也為JavaScript。

? type屬性：指定<script>和</script>標(biāo)記對之間插入的腳本代碼類型。

? src屬性：用于將外部的腳本文件內(nèi)容嵌入到當(dāng)前文檔中，一般在較新版本的瀏覽器中使用，使用JavaScript腳本編寫的外部腳本文件必須使用.js為擴(kuò)展名，同時(shí)在<script>和</script>標(biāo)記對中不包含任何內(nèi)容，如下所示。

        <script language="JavaScript 1.2" type="text/javascript" src="Sample.js">
        </script>

Tips

W3C HTML標(biāo)準(zhǔn)中不推薦使用language語法，要標(biāo)記所使用的腳本類型，應(yīng)設(shè)置<script>的type屬性為對應(yīng)腳本的MIME類型（JavaScript的MIME類型為“text/javascript”）。但在該屬性中可設(shè)定所使用腳本的版本，有利于根據(jù)瀏覽器支持的腳本版本來編寫有針對性的腳本代碼。

下面討論如何通過<script>標(biāo)記的scr屬性來引入JavaScript腳本代碼。

1.4.2 通過<script>標(biāo)記的src屬性引入

改寫源程序1.1的代碼并保存為test.html：

        //源程序1.2
        <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/REC-html140/strict.dtd">
        <html>
        <head>
        <meta http-equiv=content-type content="text/html; charset=gb2312">
        <title>
          Sample Page!
        </title>
        </head>
        <body>
        <script language="javascript 1.2" type="text/javascript" src="1.js">
        </script>
        </body>
        </html>

同時(shí)在文本編輯器中編輯如下代碼并將其保存為1.js：

        document.write("Hello World!");

將test.html和1.js文件放置于同一目錄（當(dāng)然，也可以是不同目錄，但需指定腳本文件的地址），使用瀏覽器載入文檔test.html，結(jié)果如圖1.6所示。

可見通過外部引入JavaScript腳本文件的方式，能實(shí)現(xiàn)同樣的功能，并具有如下優(yōu)點(diǎn)。

? 將腳本程序同現(xiàn)有頁面的邏輯結(jié)構(gòu)及瀏覽器結(jié)果分離。通過外部腳本，可以輕易實(shí)現(xiàn)多個(gè)頁面共同完成同一功能的腳本文件，以便通過更新一個(gè)腳本文件的內(nèi)容達(dá)到批量更新的目的。

? 瀏覽器可以實(shí)現(xiàn)對目標(biāo)腳本文件的高速緩存，避免額外的由于引用同樣功能的腳本代碼而導(dǎo)致下載時(shí)間的增加。

與C語言使用外部頭文件（.h文件等）相似，引入JavaScript腳本代碼時(shí)使用外部腳本文件的方式符合結(jié)構(gòu)化編程思想，但也有不利的一面，主要表現(xiàn)在如下幾點(diǎn)。

? 不是所有支持JavaScript腳本的瀏覽器都支持外部腳本，如Netscape 2和Internet Explorer 3及以下版本都不支持外部腳本。

? 外部腳本文件功能過于復(fù)雜，或其他原因?qū)е碌募虞d時(shí)間過長，則有可能導(dǎo)致頁面事件得不到處理或者得不到正確的處理，程序員必須謹(jǐn)慎使用并確保腳本加載完成后，其中定義的函數(shù)才被頁面事件調(diào)用，否則瀏覽器會(huì)報(bào)錯(cuò)。

綜上所述，引入外部JavaScript腳本文件的方法是效果與風(fēng)險(xiǎn)并存，開發(fā)者應(yīng)權(quán)衡優(yōu)缺點(diǎn)，以決定是將腳本代碼嵌入到目標(biāo)HTML文檔中，還是通過引用外部腳本文件的方式來實(shí)現(xiàn)相同的功能。

Tips

一般來講，將實(shí)現(xiàn)通用功能的JavaScript腳本代碼作為外部腳本文件引用，而實(shí)現(xiàn)特有功能的JavaScript代碼則直接嵌入到HTML文檔中的<head>與</head>標(biāo)記對之間，提前載入以及時(shí)、正確響應(yīng)頁面事件。

下面介紹一種短小高效的腳本代碼嵌入方式：偽URL引入。

1.4.3 通過JavaScript偽URL引入

在多數(shù)支持JavaScript腳本的瀏覽器中，可以通過JavaScript偽URL地址調(diào)用語句來引入JavaScript腳本代碼。偽URL地址的一般格式如下：

        JavaScript:alert("Hello World!")

一般以“JavaScript:”開始，后面緊跟要執(zhí)行的操作。下面的代碼演示的是如何使用偽URL地址來引入JavaScript代碼：

        //源程序1.3
        <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/REC-html140/strict.dtd">
        <html>
        <head>
        <meta http-equiv=content-type content="text/html; charset=gb2312">
        <title>
          Sample Page!
        </title>
        </head>
        <body>
        <br>
        <center>
        <p>
          偽URL地址引入JavaScript腳本代碼實(shí)例：
        </p>
        <form name="MyForm">
          <input type="text" name="MyText" value="鼠標(biāo)單擊"
                onclick="javascript:alert('鼠標(biāo)已單擊文本框!')">
        </form>
        </center>
        </body>
        </html>

程序運(yùn)行后，在原始頁面中單擊文本框，將彈出警示框，如圖1.7所示。

圖1.7 偽URL地址引入JavaScript腳本代碼

偽URL地址可用于文檔中的任何地方，并觸發(fā)任意數(shù)量的JavaScript函數(shù)或?qū)ο蠊逃械姆椒āＳ捎谶@種方式的代碼短而精，同時(shí)效果頗佳，在表單數(shù)據(jù)合法性驗(yàn)證，譬如某個(gè)字段是否符合日期格式等方面應(yīng)用非常廣泛。

1.4.4 通過HTML文檔事件處理程序引入

在開發(fā)Web應(yīng)用程序的過程中，開發(fā)者可以給HTML文檔中設(shè)定不同的事件處理器，通常是設(shè)置某HTML元素的屬性來引用一個(gè)腳本（可以是一個(gè)簡單的動(dòng)作或者函數(shù)），屬性一般以on開頭，如鼠標(biāo)移動(dòng)onmousemove( )等。

下面的程序演示的是如何使用JavaScript腳本對按鈕單擊事件進(jìn)行響應(yīng)：

        //源程序1.4
        <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/REC-html140/strict.dtd">
        <html>
        <head>
        <meta http-equiv=content-type content="text/html; charset=gb2312">
        <title>Sample Page!</title>
        <script language="javascript" type="text/javascript">
        function ClickMe()
        {
          alert("鼠標(biāo)已單擊按鈕");
        }
        </script>
        </head>
        <body>
        <br>
        <center>
        <p>通過文檔事件處理程序引入JavaScript腳本代碼實(shí)例：</p>
        <form name="MyForm">
          <input type="button" name="MyButton" value="鼠標(biāo)單擊" onclick="ClickMe()">
        </form>
        </center>
        </body>
        </html>

程序運(yùn)行后，在原始頁面中單擊“鼠標(biāo)單擊”按鈕，出現(xiàn)如圖1.8所示的警示框。

圖1.8 通過文檔事件處理程序引入JavaScript腳本

遺憾的是，許多版本較低的瀏覽器不能夠從眾多HTML標(biāo)記中識(shí)別出事件處理器，即使支持，支持的程度也不同，對事件的處理方法差別也很大。但是大部分瀏覽器都能理解HTML標(biāo)記的核心事件，如onclick、ondbclick、onkeydown、onkeypress、onkeyup、onmousedown、onmousemove、onmouseover、onmouseout等鼠標(biāo)和鍵盤觸發(fā)事件。

知道了如何引入JavaScript腳本代碼，下面介紹在HTML中嵌入JavaScript腳本代碼的位置。

官术网_书友最值得收藏!

從零開始學(xué)JavaScript

1.4 如何引入JavaScript腳本代碼

1.4.1 通過<script>與</script>標(biāo)記對引入

1.4.2 通過<script>標(biāo)記的src屬性引入

1.4.3 通過JavaScript偽URL引入

1.4.4 通過HTML文檔事件處理程序引入