2.8 实践练习:使用一个单独的JavaScript文件
虽然如本章所示的简单脚本可以包含在HTML文件中,但将HTML和JavaScript分开是很好的习惯,这样做的好处是:
Ø 禁用JavaScript的浏览器或者不支持它的老版本浏览器,可以忽略此脚本。
Ø 当站点中多个页面都使用同一脚本的时候,浏览器只需要载入一次该JavaScript文件,其他页面只需使用缓冲区的JavaScript文件。
Ø 这样做更加容易维护HTML和JavaScript代码,特别是设计和编写脚本是由不同的工程师来完成的情况。
本书中的多数例子也将使用单独的JavaScript文件,因此你应该熟悉此技术。
在日期和时间这个例子中如果使用一个单独的JavaScript文件,就需要有两个文件。一个快速的方法是将程序清单2.3中的HTML和JavaScript组合文件分别存成两个文件,然后再编辑它们。
第一个文件为datetime.html,是一个HTML文件,将<script>标签之间的所有内容清除,并在开始的<script>中加入src=“datetime.js”。最终文件如程序清单2.4所示。
程序清单2.4 日期和时间脚本的HTML文件(datetime.html)
<html>
<head><title>Displaying Times and Dates</title></head>
<body>
<h1>Current Date and Time</h1>
<p>
<script language="JavaScript" type="text/javascript"
src = "datetime.js">
</script>
</p>
</body>
</html>
第二个文件为datetime.js,只包含JavaScript命令,就是从上面HTML文件中清除的内容。这个文件不要使用<script>标签或其他HTML标签。JavaScript文件见程序清单2.5。
程序清单2.5 日期和时间脚本(datetime.js)
now = new Date();
localtime = now.toString();
utctime = now.toGMTString();
document.write("<b>Local time:</b> " + localtime + "<BR>");
document.write("<b>UTC time:</b> " + utctime);
hours = now.getHours();
mins = now.getMinutes();
secs = now.getSeconds();
document.write("<h1>");
document.write(hours + ":" + mins + ":" + secs);
document.write("</h1>");
|
注意:如果Internet Explorer没有执行脚本,而是在浏览器窗口的上方黄色条中显示一个警告信息,只需简单的点击一下这个信息条,选择“允许被阻止的内容”。 |
|
随着创建的脚本越来越复杂,就会发现将HTML和JavaScript文件分开可以减少很多麻烦。在下一章中将讨论这个问题以及一些更好的JavaScript实践经验。
![]()







