1.3 JavaScript在HTML中的使用
视频讲解
通常情况下，在Web页面中使用JavaScript有3种方法：一种是在页面中直接嵌入JavaScript代码；另一种是链接外部JavaScript文件；一种是作为特定标签的属性值使用。下面分别对这3种方法进行介绍。
1.3.1 在页面中直接嵌入JavaScript代码
在HTML文档中可以使用<script>…</script>标记将JavaScript脚本嵌入其中，在HTML文档中可以使用多个<script>标记，每个<script>标记中可以包含多个JavaScript的代码集合，并且各个<script>标记中的JavaScript代码之间可以相互访问，等同于将所有代码放在一对<script>…</script>标签之中的效果。<script>标记常用的属性及说明如表1.1所示。
表1.1 <script>标记常用的属性及说明
language属性
language属性指定在HTML中使用的哪种脚本语言及其版本。language属性使用的格式如下：
<script language="JavaScript1.5">
说明
如果不定义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.01】编写第一个JavaScript程序，在WebStorm工具中直接嵌入JavaScript代码，在页面中输出“我喜欢学习JavaScript”。（实例位置：资源包\源码\01\1.01）
具体步骤如下：
（1）启动WebStorm，如果还未创建过任何项目，会弹出如图1.9所示的窗口。
图1.9 WebStorm欢迎界面
（2）单击图1.9中的Create New Project选项，弹出创建新项目对话框，如图1.10所示。在该对话框中输入项目名称“Code”，并选择项目存储路径，将项目文件夹存储在计算机中的E盘，然后单击Create按钮创建项目。
图1.10 创建新项目对话框
（3）在项目名称Code上右击，然后在弹出的快捷菜单中选择New→Directory命令，如图1.11所示。
图1.11 在项目中创建目录
（4）弹出新建目录对话框，如图1.12所示，在文本框中输入新建目录的名称“SL”，然后单击OK按钮，完成文件夹SL的创建。
图1.12 输入新建目录名称
（5）按照同样的方法，在文件夹SL下创建本章实例文件夹01，在该文件夹下创建第一个实例文件夹01。
（6）在第一个实例文件夹01上右击，然后在弹出的快捷菜单中选择New→HTML File命令，如图1.13所示。
图1.13 在文件夹下创建HTML文件
（7）弹出新建HTML文件对话框，如图1.14所示，在文本框中输入新建文件的名称“index”，然后单击OK按钮，完成index.html文件的创建。此时，开发工具会自动打开刚刚创建的文件，结果如图1.15所示。
图1.14 新建HTML文件对话框
图1.15 打开新创建的文件
（8）将实例背景图片bg.gif复制到“E:\Code\SL\01\01”目录下，背景图片的存储路径为“光盘\Code\SL\01\01”。
（9）在<title>标记中将标题设置为“第一个JavaScript程序”，在<body>标记中编写JavaScript代码，如图1.16所示。
图1.16 在WebStorm中编写的JavaScript代码
双击“E:\Code\SL\01\01”目录下的index.html文件，在浏览器中将会查看到运行结果，如图1.17所示。
图1.17 程序运行结果
说明
（1）<script>标记可以放在Web页面的<head></head>标记中，也可以放在<body></body>标记中。
（2）脚本中使用的document.write是JavaScript语句，其功能是直接在页面中输出括号中的内容。
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.02】在HTML文件中调用外部JavaScript文件，运行时在页面中显示对话框，对话框中输出“我喜欢学习JavaScript”。（实例位置：资源包\源码\01\1.02）
具体步骤如下：
（1）在本章实例文件夹01下创建第二个实例文件夹02。
（2）在文件夹02上右击，然后在弹出的快捷菜单中选择New→JavaScript File命令，如图1.18所示。
图1.18 在文件夹下创建JavaScript文件
（3）弹出新建JavaScript文件对话框，如图1.19所示，在文本框中输入JavaScript文件的名称“index”，然后单击OK按钮，完成index.js文件的创建。此时，开发工具会自动打开刚刚创建的文件。
图1.19 新建JavaScript文件对话框
（4）在index.js文件中编写JavaScript代码，代码如图1.20所示。
图1.20 index.js文件中的代码
说明
代码中使用的alert是JavaScript语句，其功能是在页面中弹出一个对话框，对话框中显示括号中的内容。
（5）在02文件夹下创建index.html文件，在该文件中调用外部JavaScript文件index.js，代码如图1.21所示。
图1.21 调用外部JavaScript文件
双击index.html文件，运行结果如图1.22所示。
图1.22 程序运行结果
注意
（1）在外部JavaScript文件中，不能将代码用<script>和</script>标记括起来。
（2）在使用src属性引用外部JavaScript文件时，<script></script>标签中不能包含其他JavaScript代码。
（3）在<script>标签中使用src属性引用外部JavaScript文件时，</script>结束标签不能省略。
1.3.3 作为标签的属性值使用
在JavaScript脚本程序中，有些JavaScript代码可能需要立即执行，而有些JavaScript代码可能需要单击某个超链接或者触发了一些事件（如单击按钮）之后才会执行。下面介绍将JavaScript代码作为标签的属性值使用。
1．通过“javascript:”调用
在HTML中，可以通过“javascript:”的方式来调用JavaScript的函数或方法。示例代码如下：
<a href="javascript:alert('您单击了这个超链接')">请单击这里</a>
在上述代码中通过使用“javascript:”来调用alert()方法，但该方法并不是在浏览器解析到“javascript:”时就立刻执行，而是在单击该超链接时才会执行。
2．与事件结合调用
JavaScript可以支持很多事件，事件可以影响用户的操作。例如单击、按下键盘或移动鼠标等。与事件结合，可以调用执行JavaScript的方法或函数。示例代码如下：
<input type="button" value="单击按钮" onclick="alert('您单击了这个按钮')" />
在上述代码中，onclick是单击事件，意思是当单击对象时将会触发JavaScript的方法或函数。