引入JavaScript脚本代码到 HTML文档中
...
 要让html能运行JS, 就要先导入JS,  将JavaScript脚本嵌入到 HTML文档中, 有4种标准方法：
1. 代码包含于<script>和</script>标记对，然后嵌入到 HTML文档中；
2 .通过<script>标记的 src属性链接外部的 JavaScript脚本文件；
3. 通过 JavaScript伪 URL地址引入；
4. 通过 HTML文档事件处理程序引入。
下面分别介绍引入JavaScript脚本的几种标准引入方法：
1．通过<script>与</script>标记对引入在源程序
1.1的代码中除了<script>与</script>标记对之间的内容外，都是最基本的HTML代码，可 见<
script>和</script>标记对将 JavaScript脚本代码封装并嵌入到 HTML文档中：
1. document.write("Hello World!"); 
浏览器载入嵌有 JavaScript脚本的 HTML文档时，能自动识别 JavaScript脚本代码起始标记<script>和结束标记</script>，并将其间的代码按照解释 JavaScript脚本代码的方法加以解释，然后将解释结果返回 HTML文档并在浏览器窗口显示。
注意：所谓标记对，就是必须成对出现 的标记，否则其间的脚本代码不能被浏览器解释执行。
来看看下面的代码：
 
1. <script language="javascript 1.2" type="text/javascript"> document.write("Hello World!"); 
2. </script> 
  首先，js脚本编程入门<script>和</script>标记对将 JavaScript脚本代码封装，同时告诉浏览器其间的代码为 JavaScript脚本代码，然后调用 document文档对象的 write( )方法写字符串到 HTML文档中。下面重点介绍<script>标记的几个属性： z language属性：用于指定封装代码的脚本语言及版本，有的浏览器还支持 perl、 VBScript等，所有脚本浏览器都支持 JavaScript(当然，非常老的版本除外)，同时 language属性默认值也为 JavaScript； z type属性：指定 <script>和</script>标记对之间插入的脚本代码类型； z src属性：用于将外部的脚本文件内容嵌入到当前文档中，一般在较新版本的浏览器中使用，使用 JavaScript脚本编写的外部脚本文件必须使用 .js为扩展名，同时在 <script>和</script>标记对中不包含任何内容，如下：
1. <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脚本代码。
2．通过<script> 标记的 src属性引入改写源程序
1.1的代码并保存为 test.html：
 
1. <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "/TR/REC-html140/strict.dtd"> 
2.  
3. <html> <head> 
4.  
5. <meta http-equiv=content-type content="text/html; charset=gb2312"> 
6.  
7. <title>Sample Page!</title> </head> 
8.  
9. <body> <script language="javascript 1.2" type="text/javascript" src="1.js"> </script> 
10.  
11. </body> </html> 
同时在文本编辑器中编辑如下代码并将其保存为 1.js：
document.write("Hello World!");
将 test.html和 1.js文件放置于同一目录，双击运行 test.html，可见通过外部引入 JavaScript脚本文件的方式，能实现同样的功能。同时具有如下优点：
1
将脚本程序同现有页面的逻辑结构及浏览器结果分离。通过外部脚本，可以轻易实
 
现多个页面共用完成同一功能的脚本文件，以便通过更新一个脚本文件 内容达到批
 
量更新的目的；
2
浏览器可以实现对目标脚本文件的高速缓 存，避免额外的由于引用同样功能的脚本
 
代码而导致下载时间的增加。
    与 C语言使用外部头文件（ .h文件等）相似，引入 JavaScript脚本代码时使用外部脚本文件的方式符合结构化编程思想，但也有不利的一面，主要表现在如下几点： z不是所有支持 JavaScript脚本的浏览器都支持外部脚本，如 Netscape 2和 Internet Explorer 3及以下版本都不支持外部脚本。
   外部脚本文件功能过于复杂或其他原因导致的加载时间过长有可能导致页面事件得不到处理或者得不到正确的处理，程序员必须谨慎使用并确保脚本加载完成后其中 的函数才被页面事件调用，否则浏览器报错。
  综上所述，引入外部 JavaScript脚本文件的方法是效果与风险并存，开发者应权衡优缺点以决定是将脚本代码嵌入到目标 HTML文档中还是通过引用外部脚本文件的方式来实现相同的功能。
注意：一般来讲，将实现通用功能的 JavaScript脚本代码作为外部脚本文件引用，而实现特有功能的 JavaScript代码则直接嵌入到 HTML文档中的 <head>与</head>标记对之间提前载入以及时、正确响应页面事件。
下面介绍一种短小高效的脚本代码嵌入 方式：伪 URL引入。
3．通过 JavaScript伪 URL引入
在多数支持 JavaScript脚本的浏览器中，可以通过 JavaScript伪 URL地址调用语句来引入 JavaScript脚本代码。伪 URL地址的一般格式如下：
JavaScript:alert("Hello World!")
一般以 “javascript:”开始，后面紧跟要执行的操作。下面的代码演示如何使用伪 URL地址来引入 JavaScript代码：
 
1. // 源程序 1.3 
2.  
3. <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "/TR/REC-html140/strict.dtd"> <html> <head> 
4.  
5. <meta http-equiv=content-type content="text/html; charset=gb2312"> 
6.  
7. <title>Sample Page!</title> </head> <body> <br> <center> 
8.  
9. <p>伪 URL地址引入 JavaScript脚本代码实例： </p> 
10.  
11. <form name="MyForm"> 
12.  
13. <input type=text name="MyText" value="鼠标点击" 
14.  
15. onclick="javascript:alert('鼠标已点击文本框!')"> </form> </center> 
16.  
17. </body> </html> 
鼠标点击文本框，弹出警示框如图 1.7所示。
图 1.7伪 URL地址引入 JavaScript脚本代码实例
    伪 URL地址可用于文档中任何地方，并触发任意数量的 JavaScript函数或对象固有的方法。由于这种方式代码短小精悍，同时效果颇佳，在表单数据合法性验证譬如某个字段是否符合日期格式等方面应用非常 广泛。
4．通过 HTML文档事件处理程序引入在开发 Web应用程序的过程中
  开发者可以给 HTML文档中设定不同的事件处理器，通常是设置某 HTML元素的属性来引用一个脚本（可以是一个简单的动作或者函数），属性
一般以 on开头，如鼠标移动 onmousemove( )等。下面的程序演示如何使用 JavaScript脚本对按钮单击事件进行响应：
 
1. // 源程序 1.4 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "/TR/REC-html140/strict.dtd"> 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。