1.3 JavaScript在HTML中的应用
通常情况下，在Web页面中使用JavaScript有以下3种方法，一种是在页面中直接嵌入JavaScript代码，另一种是链接外部JavaScript文件，还有一种是作为特定标签的属性值使用。下面分别对这3种方法进行介绍。
1.3.1 在页面中直接嵌入JavaScript
在HTML文档中，可以使用<script>…</script>标记将JavaScript脚本嵌入其中。可以使用多个<script>标记，每个<script>标记中可以包含多个JavaScript代码集合，并且不同<script>标记中的JavaScript代码之间可以相互访问，如同将所有代码放在一对<script>…</script>标记之中的效果。<script>标记常用的属性及说明如表1.1所示。
表1.1 <script>标记常用的属性及说明
language属性
language属性用来指定HTML中使用的脚本语言及其版本。language属性的使用格式如下：
<script language="JavaScript1.8">
说明
如果不定义language属性，浏览器默认脚本语言为JavaScript 1.0版本。
src属性
src属性用来指定外部脚本文件的路径。外部脚本文件通常使用JavaScript脚本，其扩展名为.js。src属性的使用格式如下：
<script src="01.js">
type属性
type属性同样用来指定HTML中使用的脚本语言及其版本。自HTML 4.0标准开始，推荐使用type属性来代替language属性。type属性的使用格式如下：
<script type="text/javascript">
defer属性
defer属性用于设置文档加载完毕后再执行脚本。当脚本语言不需要立即运行时，可以设置defer属性，此时浏览器将不必等待脚本语言装载，这样页面加载会更快。若脚本需要在页面加载过程中或加载完成后立即执行，则不能使用defer属性。defer属性的使用格式如下：
<script defer>
【例1.1】 编写第一个JavaScript程序，在Dreamweaver工具中直接嵌入JavaScript代码，在页面中输出“我喜欢学习JavaScript”。（实例位置：资源包\TM\sl\1\01）
具体步骤如下：
（1）启动Dreamweaver CC，选择“文件”/“新建”菜单命令，打开“新建文档”对话框，在“页面类型”栏中选择HTML选项，如图1.9所示。
图1.9 选择新建文档页
说明
如果此处选择JavaScript选项，则会创建一个JavaScript文档。
（2）单击“创建”按钮，即可创建一个HTML文件，如图1.10所示。
图1.10 创建新的HTML文件
（3）在<title>标记中将标题设置为“第一个JavaScript程序”，在<body>标记中编写JavaScript代码，如图1.11所示。
图1.11 在Dreamweaver CC中编写的JavaScript代码
（4）在编写好JavaScript程序后，选择“文件”/“保存”命令，弹出“另存为”对话框，将文件保存在“E:/TM/sl/1/01”文件夹下，文件名定义为“index.html”，如图1.12所示。
图1.12 “另存为”对话框
（5）单击“保存”按钮，保存文件。
（6）双击刚刚保存的index.html文件，在浏览器中将会看到运行结果，如图1.13所示。
图1.13 程序运行结果
说明
<script>标记可以放在Web页面的<head> </head>标记中，也可以放在<body> </body>标记中。
1.3.2 链接外部JavaScript文件
在Web页面中引入JavaScript的另一种方法是采用链接外部JavaScript文件的形式。如果脚本代码比较复杂，或是同一段代码可以被多个页面所使用，则可以将这些脚本代码放置在一个单独的文件中（保存文件的扩展名为.js），然后在需要使用该代码的Web页面中链接该JavaScript文件即可。
在Web页面中链接外部JavaScript文件的语法格式如下：
<script type="text/javascript" src="javascript.js"></script>
说明
如果外部JavaScript文件保存在本机中，src属性可以是绝对路径或是相对路径；如果外部JavaScript文件保存在其他服务器中，src属性必须是绝对路径。
【例1.2】 在HTML文件中调用外部JavaScript文件，运行时在页面中显示对话框，对话框中输出“我喜欢学习JavaScript”。（实例位置：资源包\TM\sl\1\02）
首先编写外部的JavaScript文件，命名为index.js。index.js文件的代码如图1.14所示。然后在index.html页面中调用外部JavaScript文件index.js，调用代码如图1.15所示。
图1.14 index.js文件中的代码
图1.15 调用外部JavaScript文件
双击index.html文件，运行结果如图1.16所示。
图1.16 程序运行结果
注意
（1）在外部JavaScript文件中，不能将脚本代码用<script>和</script>标记括起来。
（2）使用src属性引用外部JavaScript文件时，<script></script>标记中不能包含其他JavaScript代码。
（3）在<script>标记中使用src属性引用外部JavaScript文件时，</script>结束标记不能省略。
1.3.3 作为特定标记的属性值使用
1．通过“javascript:”调用
在HTML中，可以通过“javascript:”的方式来调用JavaScript的函数或方法。示例代码如下：
<a href="javascript:alert('您单击了这个超链接')">请单击这里</a>
在上述代码中，使用“javascript:”调用了alert()方法，但该方法并不是浏览器解析到“javascript:”时就立刻执行，而是在用户单击该超链接时执行。
2．与事件结合调用
JavaScript可以支持很多事件，事件可以影响用户的操作。例如，单击鼠标左键、按下键盘或移动鼠标等。与事件结合，可以调用执行JavaScript的方法或函数。示例代码如下：
<input type="button" value="单击按钮" onclick="alert('您单击了这个按钮')" />
在上述代码中，onclick是单击事件，意思是用户单击对象会触发JavaScript的方法或函数。