JavaScript 脚本已经成为Web 应用程序开发的一门炙手可热的语言，成为客户端脚本的
首选。网络上充斥着形态各异的JavaScript 脚本实现不同的功能，但用户也许并不了解
JavaScript 脚本是如何被浏览器中解释执行，更不知如何开始编写自己的JavaScript 脚本来
实现自己想要实现的效果。本节将一步步带领读者踏入JavaScript 脚本语言编程的大门。
“Hello World！”程序
像学习C、Java 等其他语言一样，先来看看使用JavaScript 脚本语言编写的“Hello
World!”程序：
//源程序1.1
<! 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>
<script language="javascript 1.2" type="text/javascript">
document.write("Hello World!");
</script>
</center>
</body>
</html>
将上述代码保存为.html(或.html)文件并双击打开，系统调用默认浏览器解释执行，结果
如图1.6 所示。
图 1.6 JavaScript 编写的“Hello World！”程序
JavaScript 脚本编程一般分为如下步骤：
选择 JavaScript 语言编辑器编辑脚本代码；
嵌入该 JavaScript 脚本代码到HTML 文档中；
选择支持 JavaScript 的浏览器浏览该HTML 文档；
如果错误则检查并修正源代码，重新浏览，此过程重复直至代码正确为止；
处理不支持 JavaScript 脚本的情况。
由于 JavaScript 脚本代码是嵌入到HTML文档中被浏览器解释执行，所以开发JavaScript
脚本代码并不需要特殊的编程环境，只需要普通的文本编辑器和支持JavaScript 脚本的浏览
器即可。那么如何选择JavaScript 脚本编辑器呢？
选择JavaScript 脚本编辑器
编写JavaScript 脚本代码可以选择普通的文本编辑器，如Windows Notepad、UltraEdit
等，只要所选编辑器能将所编辑的代码最终保存为HTML 文档类型(.htm、.html 等)即可。
虽然 Dreamweaver、Microsoft FrontPage 等专业网页开发工具套件内部集成了JavaScript
脚本的开发环境，但笔者依然建议JavaScript 脚本程序开发者在起步阶段使用最基本的文本
编辑器如NotePad、UltraEdit 等进行开发，以便把注意力放在JavaScript 脚本语言而不是开
发环境上。
同时，如果脚本代码出现错误，可用该编辑器打开源文件（.html、.html 或.js）修改后
保存，并重新使用浏览器浏览，重复此过程直到没有错误出现为止。
引入JavaScript 脚本代码到HTML 文档中
将JavaScript 脚本嵌入到HTML 文档中有4 种标准方法：
代码包含于<script>和</script>标记对，然后嵌入到HTML 文档中；
通过<script>标记的src 属性链接外部的JavaScript 脚本文件；
通过 JavaScript 伪URL 地址引入；
通过 HTML 文档事件处理程序引入。
下面分别介绍 JavaScript 脚本的几种标准引入方法：
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>
下面讨论<script>标记的src 属性如何引入JavaScript 脚本代码。
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 文档中还是通过引用外部脚本文件的方式来实现
相同的功能。
下面介绍一种短小高效的脚本代码嵌入方式：伪 URL 引入。
3．通过JavaScript 伪URL 引入
在多数支持 JavaScript 脚本的浏览器中，可以通过JavaScript 伪URL 地址调用语句来引
入JavaScript 脚本代码。伪URL 地址的一般格式如下：
JavaScript:alert("Hello World!")
一般以“javascript:”开始，后面紧跟要执行的操作。下面的代码演示如何使用伪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 函数或对象固有的
方法。由于这种方式代码短小精悍，同时效果颇佳，在表单数据合法性验证譬如某个字段是
否符合日期格式等方面应用非常广泛。
4．通过HTML 文档事件处理程序引入
在开发 Web 应用程序的过程中，开发者可以给HTML 文档中设定不同的事件处理器，
通常是设置某HTML 元素的属性来引用一个脚本（可以是一个简单的动作或者函数），属性
一般以on 开头，如鼠标移动onmousemove( )等。
下面的程序演示如何使用 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 脚本代码的
位置。
