下载掌阅APP，畅读海量书库
立即打开
|
1.2 网页中的JavaScript脚本语言 |
本节介绍HTML网页中的JavaScript脚本语言，具体就是如何在网页中使用JavaScript脚本语言的方法。
如果想在HTML网页中使用JavaScript脚本语言，那么就一定要用到<script>标签，无论是嵌入式脚本还是外部脚本。当然，<script>既然是一种标签元素，就需要有开始和结束标记，具体见下面的代码：
<script> // TODO // 脚本代码 … </script>
这里需要说明的一点是，上面的写法适用于最新的HTML5版本网页的，而对于早期的网页（如HTML 4.01版本）则必须使用以下的写法：
<script type="text/javascript"> … </script>
必须要在<script>标签中加入“type="text/javascript"”的描述，这样写才能让浏览器正确识别HTML网页。
在网页中使用JavaScript脚本语言比较直接的方法就是将JavaScript脚本嵌入到网页代码中。设计人员可以在HTML网页中的任何位置使用<script>标签定义嵌入式JavaScript脚本代码。
下面，介绍如何在HTML网页中使用嵌入式JavaScript脚本代码（详见源代码ch01目录中ch01-js-embedding.html文件）。
【代码1-1】
01 <!doctype html>
02 <html lang="en">
03 <head>
04 <!-- 添加文档头部内容 -->
05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
06 <meta http-equiv="Content-Language" content="zh-cn" />
07 <link rel="stylesheet" type="text/css" href="css/style.css">
08 <script>
09 alert("JavaScript 基础 - 嵌入js脚本代码");
10 </script>
11 <title>JavaScript in 15-days</title>
12 </head>
13 <body>
14 <!-- 添加文档主体内容 -->
15 </body>
16 </html>
关于【代码1-1】的分析如下：
第08～10行代码通过<script>标签定义一段嵌入式JavaScript脚本语言，第09行的JS代码通过“alert()”函数定义一个弹出式警告提示框。
下面通过FireFox浏览器测试一下【代码1-1】所定义的HTML页面，查看一下页面中嵌入式JavaScript脚本代码的执行效果，如图1.2所示。
图1.2 嵌入式JavaScript脚本代码
由图1.2可知【代码1-1】中第09行JS代码定义的弹出式警告提示框在页面加载过程中成功显示出来了，注意到此时页面应该还没有加载完成，关于这一点我们在后文中会给出原因分析。
在HTML网页中引入外部JavaScript脚本文件是另一种使用JavaScript脚本语言的方法。这种方法非常适用于需要使用大量JavaScript脚本代码的情况，尤其是在应用JavaScript框架的场景，一般称该方法为外链式（Linking）JavaScript脚本。
外链式（Linking）JavaScript脚本的基本使用方法如下：
<script src="xxx.js"></script>
“src”属性用于定义外部JavaScript文件的路径地址。其中，路径可以为绝对路径或相对路径，这要看具体项目的情况。
下面就将【代码1-1】稍加修改，按照外链式JavaScript脚本进行设计，具体代码如下（详见源代码ch01目录中ch01-js-linking.html文件）。
【代码1-2】
01 <!doctype html> 02 <html lang="en"> 03 <head> 04 <!-- 添加文档头部内容 --> 05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 06 <meta http-equiv="Content-Language" content="zh-cn" /> 07 <link rel="stylesheet" type="text/css" href="css/style.css"> 08 <script type="text/javascript" src="js/ch01-js-linking.js"></script> 09 <title>JavaScript in 15-days</title> 10 </head> 11 <body> 12 <!-- 添加文档主体内容 --> 13 </body> 14 </html>
关于【代码1-2】的分析如下：
第08行代码通过<script>标签定义了外链式JavaScript脚本，其中“src”属性定义外部脚本的相对路径地址（"js/ch01-js-linking.js"）。
关于上面引入的外部脚本文件的具体代码如下（详见源代码ch01目录中js/ch01-js-linking.js文件）。
【代码1-3】
01 alert("JavaScript 基础 - 外链式js脚本");
关于【代码1-3】的分析如下：
第01行JS代码通过“alert()”函数定义了一个弹出式警告提示框，这与【代码1-1】中第09行代码的功能类似。
下面运行测试【代码1-2】使用外链式JavaScript脚本定义的HTML页面，页面打开后的效果如图1.3所示。
图1.3 外链式JavaScript脚本
如图1.3所示，外链式JavaScript脚本与嵌入式JavaScript脚本实现的功能是完全相同的，只不过是定义手法不同而已。