JavaScript的引入
JavaScript脚本文件的引入方式和CSS样式文件类似。在HTML文档中引入JavaScript文件主要有三种,即行内式、嵌入式、外链式。接下来,我们将对JavaScript的三种引入方式做详细讲解。
1. 行内式
行内式是将JavaScript代码作为HTML标签的属性值使用。例如,单击“test”时,弹出一个警告框提示“Happy”,具体示例如下:
<a href="javascript:alert('Happy');"> test </a>
JavaScript还可以写在HTML标签的事件属性中,事件是JavaScript中的一种机制。例如,单击网页中的一个按钮时,就会触发按钮的单击事件,具体示例如下:
<input type="button" onclick="alert('Happy'); "value="test" >
上述代码实现了单击“test”按钮时,弹出一个警告框提示“Happy”。
值得一提的是,网页开发提倡结构、样式、行为的分离,即分离HTML、CSS、JavaScript三部分的代码。避免直接写在HTML标签的属性中,从而有利于维护。因此在实际开发中并不推荐使用行内式。
2. 嵌入式
在HTML中运用<script>标签及其相关属性可以嵌入JavaScript脚本代码。嵌入JavaScript代码的基本格式如下:
<script type="text/javascript">
JavaScript语句;
</script>
上述语法格式中,type是<script>标签的常用属性,用来指定HTML中使用的脚本语言类型。type="text/JavaScript"就是为了告诉浏览器,里面的文本为JavaScript脚本代码。但是随着Web技术的发展(HTML5的普及、浏览器性能的提升),嵌入JavaScript脚本代码基本格式又有了新的写法,具体如下:
<script>
JavaScript语句;
</script>
在上面的语法格式中,省略了type="text/JavaScript",这是因为新版本的浏览器一般将嵌入的脚本语言默认为JavaScript,因此在编写JavaScript代码时可以省略type属性。
JavaScript可以放在HTML中的任何位置,但放置的地方会对 JavaScript脚本代码的执行顺序会有一定影响。因此在实际工作中一般将JavaScript脚本代码放置于HTML文档的 <head></head> 标签之间。由于浏览器载入HTML 文档的顺序是从上到下,将JavaScript脚本代码放置于<head></head> 标签之间,可以确保在使用脚本之前,JavaScript脚本代码就已经被载入,下面展示的就是一段放置了JavaScript的示例代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入式</title>
<script type=" text/javascript">
alert("我是JavaScript脚本代码!")
</script>
</head>
<body>
</body>
</html>
在上面的示例代码中,<script>标签包裹的就是JavaScript脚本代码。
3. 外链式
外链式是将所有的JavaScript代码放在一个或多个以“.js”为扩展名的外部JavaScript文件中,通过<src >标签将这些JavaScript文件链接到HTML文档中,其基本语法格式如下:
<script type="text/Javascript" src="脚本文件路径" >
</script>
上述格式中,src是script标签的属性,用于指定外部脚本文件的路径。同样的,在外链式的语法格式中,我们也可以省略type属性,将外链式的语法简写为:
<script src="脚本文件路径 " >
</script>
需要注意的是,调用外部JavaScript文件时,外部的JavaScript文件中可以直接书写JavaScript脚本代码,不需要写<script>引入标签。
在实际开发中,当需要编写大量、逻辑复杂的JavaScript代码时,推荐使用外链式。相比嵌入式,外链式的优势可以总结为以下两点:
1) 利于后期修改和维护
嵌入式会导致HTML与JavaScript代码混合在一起,不利用代码的修改和维护,外链式会将HTML、CSS、JavaScript三部分代码分离开来,利于后期的修改和维护。
2) 减轻文件体积、加快页面加载速度
嵌入式会将使用的JavaScript代码全部嵌入到HTML页面中,这就会增加HTML文件的体积,影响网页本身的加载速度,而外链式可以利用浏览器缓存,将需要多次用到的JavaScript脚本代码重复利用,既减轻了文件的体积,也加快了页面的加载速度。例如,在多个页面中引入了相同的JavaScript文件时,打开第1个页面后,浏览器就将JavaScript文件缓存下来,下次打开其他引用该JavaScript文件的页面时,浏览器就不用重新加载JavaScript文件了。
在上面的示例代码中,直接省略掉var,通过赋值的方式声明变量。需要注意的是。由于JavaScript采用的是动态编译,程序运行时不容易发现代码中的错误,所以本书仍然推荐读者使用显式声明变量的方法。