JavaScript动态网页开发详解
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

1.4 如何引入JavaScript脚本代码

可以通过多种方式将JavaScript脚本代码嵌入到目标HTML文档中，总的来说，有如下4种标准方法：

· 代码包含于<script>和</script>标记对内，并嵌入到HTML文档中；

· 通过<script>标记的src属性链接外部的JavaScript脚本文件；

· 通过JavaScript伪URL地址引入；

· 通过HTML文档事件处理程序引入。

下面分别介绍JavaScript脚本的几种标准引入方法。

1.4.1 通过<script>与</script>标记对引入

在源程序1.1中除<script>与</script>标记对之间的内容外，均为最基本的HTML代码。<script>和</script>标记对将JavaScript脚本代码进行了封装，并嵌入到HTML文档中：

        document.write("Hello World!");

浏览器载入嵌有JavaScript脚本的HTML文档时，能自动识别JavaScript脚本代码起始标记<script>和结束标记</script>，并将其间的代码按照解释JavaScript脚本代码的方法加以解释，然后将解释结果返回HTML文档并在浏览器窗口显示。

注意：所谓标记对，就是必须成对出现的标记，否则其间的脚本代码不能被浏览器解释执行。

考察如下代码：

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

首先，<script>和</script>标记对将JavaScript脚本代码进行封装，同时告诉浏览器其间的代码为JavaScript脚本代码，然后调用document文档对象的write(　)方法将字符串写到HTML文档中。

下面重点介绍<script>标记的几个属性。

· language属性：用于指定封装代码的脚本语言及版本，有的浏览器还支持perl、VBScript等，所有脚本浏览器都支持JavaScript（当然，非常老的版本除外），同时language属性默认值也为JavaScript。

· type属性：指定<script>和</script>标记对之间插入的脚本代码类型；

· src属性：用于将外部的脚本文件内容嵌入到当前文档中，一般在较新版本的浏览器中使用，使用JavaScript脚本编写的外部脚本文件必须使用.js为扩展名，同时在<script>和</script>标记对中不包含任何内容，如下所示。

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

注意：W3C HTML标准中不推荐使用language语法，要标记所使用的脚本类型，应设置<script>的type属性为对应脚本的MIME类型（JavaScript的MIME类型为“text/javascript”）。但在该属性中可设定所使用脚本的版本，有利于根据浏览器支持的脚本版本来编写有针对性的脚本代码。

下面讨论如何通过<script>标记的src属性来引入JavaScript脚本代码。

1.4.2 通过<script>标记的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>

同时在文本编辑器中编辑如下代码并将其保存为1.js：

        document.write("Hello World!");

将test.html和1.js文件放置于同一目录（当然，也可以不是同一目录，但需要指定脚本文件的地址），使用浏览器载入文档test.html，结果如图1.6所示。

可见通过外部引入JavaScript脚本文件的方式，能实现同样的功能，并具有如下优点。

· 将脚本程序同现有页面的逻辑结构及浏览器结果分离。通过外部脚本，可以轻易实现多个页面共用完成同一功能的脚本文件，以便通过更新一个脚本文件内容达到批量更新的目的。

· 浏览器可以实现对目标脚本文件的高速缓存，避免由于引用同样功能的脚本代码而导致下载时间的增加。

与C语言使用外部头文件（.h文件等）相似，引入JavaScript脚本代码时使用外部脚本文件的方式符合结构化编程思想，但也有不利的一面，主要表现为以下两点。

· 不是所有支持JavaScript脚本的浏览器都支持外部脚本，如Netscape 2和Internet Explorer 3及以下版本都不支持外部脚本。

· 外部脚本文件功能过于复杂，或其他原因导致的加载时间过长，则有可能导致页面事件得不到处理或者得不到正确的处理，程序员必须谨慎使用并确保脚本加载完成后，其中定义的函数才被页面事件调用，否则浏览器会报错。

综上所述，引入外部JavaScript脚本文件的方法是效果与风险并存，开发者应权衡优缺点，以决定是将脚本代码嵌入到目标HTML文档中，还是通过引用外部脚本文件的方式来实现相同的功能。

注意：一般来讲，将实现通用功能的JavaScript脚本代码作为外部脚本文件引用，而实现特有功能的JavaScript代码则直接嵌入到HTML文档中的<head>与</head>标记对之间提前载入以及时、正确响应页面事件。

下面介绍一种短小高效的脚本代码嵌入方式：伪URL引入。

1.4.3 通过JavaScript伪URL引入

在多数支持JavaScript脚本的浏览器中，可以通过JavaScript伪URL地址调用语句来引入JavaScript脚本代码。伪URL地址的一般格式如下所示：

        JavaScript:alert("Hello World!")

一般以“JavaScript:”开始，后面紧跟要执行的操作。源程序1.3演示如何使用伪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脚本代码实例：
        </p>
        <form name="MyForm">
          <input type="text" name="MyText" value="鼠标单击"
                onclick="javascript:alert(鼠'标已单击文本框!')">
        </form>
        </center>
        </body>
        </html>

程序运行后，在原始页面中单击文本框，将弹出警示框如图1.7所示。

图1.7 伪URL地址引入JavaScript脚本代码

伪URL地址可用于文档中任何地方，并触发任意数量的JavaScript函数或对象固有的方法。由于这种方式代码短而精，同时效果颇佳，在表单数据合法性验证譬如某个字段是否符合日期格式等方面应用非常广泛。

1.4.4 通过HTML文档事件处理程序引入

在开发Web应用程序的过程中，开发者可以给HTML文档中设定不同的事件处理器，通常是设置某HTML元素的属性来引用一个脚本（可以是一个简单的动作或者函数），属性一般以on开头，如鼠标移动onmousemove(　)等。

源程序1.4演示如何使用JavaScript脚本对按钮单击事件进行响应。

        //源程序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("鼠标已单击按钮");
        }
        </script>
        </head>
        <body>
        <br>
        <center>
        <p>通过文档事件处理程序引入JavaScript脚本代码实例：</p>
        <form name="MyForm">
          <input type="button" name="MyButton" value="鼠标单击" onclick="ClickMe(　)">
        </form>
        </center>
        </body>
        </html>

程序运行后，在原始页面单击“鼠标单击”按钮，结果界面如图1.8所示。

图1.8 通过文档事件处理程序引入JavaScript脚本

遗憾的是，许多版本较低的浏览器不能够从众多HTML标记中识别出事件处理器，即使支持，其支持的程度也不同，对事件的处理方法差别也很大。但是大部分浏览器都能理解HTML标记的核心事件，如onclick、ondbclick、onkeydown、onkeypress、onkeyup、onmousedown、onmousemove、onmouseover、onmouseout等鼠标和键盘触发事件。

知道了如何引入JavaScript脚本代码，下面介绍在HTML中嵌入JavaScript脚本代码的位置。

本周热推：
片上系统设计思想与源代码分析程序员必会的40种算法Visual Basic从入门到精通（第5版）高可用可伸缩微服务架构：基于Dubbo、Spring Cloud和Service MeshJavaScript动态网页编程
上一章目录下一章