《引入JavaScript脚本代码到 HTML文档中》由会员分享，可在线阅读，更多相关《引入JavaScript脚本代码到 HTML文档中（6页珍藏版）》请在金锄头文库上搜索。
1、引入 JavaScript 脚本代码到 HTML 文档中要让 html 能运行 JS, 就要先导入 JS, 将 JavaScript 脚本嵌入到 HTML 文档 中, 有 4 种标准方法：1. 代码包含于script和/script标记对，然后嵌入到HTML文档中；2 .通过script标记的src属性链接外部的JavaScript脚本文件；3. 通过 JavaScript 伪 URL 地址引入；4. 通过 HTML 文档事件处理程序引入。下面分别介绍引入 JavaScript 脚本的几种标准引入方法：1 通过scrip t与/scrip t标记对引入在源程序1.1的代码中除了scrip t与
2、/scrip t标记对之间的内容外，都是最基本的 HTML代码，可见script和/script标记对将JavaScript脚本代码封装并嵌 入到 HTML 文档中：1. document.write(Hello World!);浏览器载入嵌有JavaScript脚本的HTML文档时，能自动识别JavaScript脚 本代码起始标记script和结束标记/script，并将其间的代码按照解释 JavaScript脚本代码的方法加以解释，然后将解释结果返回HTML文档并在浏览 器窗口显示。注意：所谓标记对，就是必须成对出现 的标记，否则其间的脚本代码不能被浏 览器解释执行。来看看下面的代码：1.
3、 script language=javascript 1.2 type=text/javascript doc ument.write(Hello World!);2. /script首先，script和/script标记对将JavaScript脚本代码圭寸装，同时告诉 浏览器其间的代码为 JavaScript 脚本代码，然后调用 document 文档对象的 write（）方法写字符串到HTML文档中。下面重点介绍script标记的几个属性: z language 属性：用于指定封装代码的脚本语言及版本，有的浏览器还支持 perl、VBScript等，所有脚本浏览器都支持JavaScrip
4、t （当然，非常老的版本 除外） ，同时 language 属性默认值也为 JavaScript； z type 属性:指定 script和/script标记对之间插入的脚本代码类型；z src属性：用于将外 部的脚本文件内容嵌入到当前文档中，一般在较新版本的浏览器中使用，使用 JavaScript 脚本编写的外部脚本文件必须使用 .js 为扩展名，同时在 script 和/scrip t标记对中不包含任何内容，如下：1. script language=JavaScript 1.2 type=text/javascript src= Sample.js /script注意： W3C HTML
5、 标准中不推荐使用 language 语法，要标记所使用的脚本类型， 应设置scrip t的t ype属性为对应脚本的MIME类型（JavaScript的MIME类型为“text/javascrip t”）。但在该属性中可设定所使用脚本的版本，有利于根据 浏览器支持的脚本版本来编写有针对性的脚本代码。下面讨论script标记的src属性如何引入JavaScript脚本代码。2通过script标记的src属性引入改写源程序1.1 的代码并保存为 test.html：1. ! DOCTYPE HTML PUBLIC -/W3C/DTD HTML 4.0/EN http:/www .w3.org/T
6、R/REC-html140/strict.dtd2.2. html head4.3. meta http-equiv=content-type content=text/html; charset=gb2 3126.4. titleSample Page!/title /head8.5. body script language=javascript 1.2 type=text/javascrip t src=1.js /script10.11. /body /html同时在文本编辑器中编辑如下代码并将其保存为 1.js： document.write(Hello World!); 将 tes
7、t.html 和 1.js 文件放置于同一目录，双击运行 test.html ，可见通过外 部引入 JavaScript 脚本文件的方式，能实现同样的功能。同时具有如下优点：1将脚本程序同现有页面的逻辑结构及浏览器结果分离。通过外部脚本，可 以轻易实 现多个页面共用完成同一功能的脚本文件，以便通过更新一个脚本文件 内容达到批量更新的目的；2 浏览器可以实现对目标脚本文件的高速缓 存，避免额外的由于引用同样2 功能的脚本代码而导致下载时间的增加。与 C 语言使用外部头文件( .h 文件等)相似，引入 JavaScript 脚本代码 时使用外部脚本文件的方式符合结构化编程思想，但也有不利的一面，主
8、要表现 在如下几点： z 不是所有支持 JavaScript 脚本的浏览器都支持外部脚本，如 Netscape 2 和 Internet Explorer 3 及以下版本都不支持外部脚本。外部脚本文件功能过于复杂或其他原因导致的加载时间过长有可能导致页 面事件得不到处理或者得不到正确的处理，程序员必须谨慎使用并确保脚本加载 完成后其中 的函数才被页面事件调用，否则浏览器报错。综上所述，引入外部 JavaScript 脚本文件的方法是效果与风险并存，开发 者应权衡优缺点以决定是将脚本代码嵌入到目标 HTML 文档中还是通过引用外 部脚本文件的方式来实现相同的功能。注意：一般来讲，将实现通用功能的
9、 JavaScript 脚本代码作为外部脚本文件引 用，而实现特有功能的 JavaScript 代码则直接嵌入到 HTML 文档中的 与标记对之间提前载入以及时、正确响应页面事件。下面介绍一种短小高效的脚本代码嵌入 方式：伪 URL 引入。3通过 JavaScript 伪 URL 引入在多数支持 JavaScript 脚本的浏览器中，可以通过 JavaScript 伪 URL 地址调 用语句来引入 JavaScript 脚本代码。伪 URL 地址的一般格式如下：JavaScript:alert(Hello World!)一般以“javascript:”开始，后面紧跟要执行的操作。下面的代码演示
10、如何使 用伪URL地址来引入JavaScript代码：1. / 源程序 1.32.3. 4.5. 6.7. Sample Page! 8.9. 伪URL地址引入JavaScript脚本代码实例：10.10. 12.11. 16.17. 鼠标点击文本框，弹出警示框如图 1.7 所示。图1.7伪URL地址引入JavaScript脚本代码实例伪 URL 地址可用于文档中任何地方，并触发任意数量的 JavaScript 函数或 对象固有的方法。由于这种方式代码短小精悍，同时效果颇佳，在表单数据合法 性验证譬如某个字段是否符合日期格式等方面应用非常 广泛。4通过 HTML 文档事件处理程序引入在开发 W
11、eb 应用程序的过程中开发者可以给 HTML 文档中设定不同的事件处理器，通常是设置某 HTML 元素 的属性来引用一个脚本（可以是一个简单的动作或者函数），属性一般以 on 开头，如鼠标移动 onmousemove( )等。下面的程序演示如何使用 JavaScript 脚本对按钮单击事件进行响应：1. / 源程序 1.4 2.3. 4.5. 6.7. 8.9. Sample Page!10.11. 12.13. function ClickMe()14.15. aler t(“鼠标已单击按钮)；16.17. 18.19. 20.20. 22.23. 24.25. 26.26. 28.27.
12、通过文档事件处理程序引入JavaScript脚本代码实例： 30.31. 程序运行后，在 原始页面单击“鼠标单击”按钮，出现如图 1 . 8所示的警告框。图 1.8 通过文档事件处理程序引入 JavaScript 脚本实例遗憾的是，许多版本较低的浏览器，不能够从众多 HTML 标记中识别出事件 处理器，即使支持，支持的程度也不同，对事件的处理方法差别也很大。但是大 部分浏览器都能理解 HTML 标记的核心事件，如 onclick、ondbclick、 onkeydown、 onkeypress、 onkeyup、 onmousedown、onmousemove、onmouseover、 onmouseout 等鼠标和键盘触发事件。现在应该知道了如何引入 JavaScript 脚本代码。
