![Java Script从入门到精通(第5版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/758/52842758/b_52842758.jpg)
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】弹出式的输出。(实例位置:资源包\TM\sl\1\02)
在HTML文件中调用外部JavaScript文件,运行时在页面中显示对话框,对话框中输出hello JavaScript。具体步骤如下。
(1)在本章实例文件夹1下创建第二个实例文件夹02。
(2)在文件夹02上右击,在弹出的快捷菜单中选择New→JavaScript File命令,如图1.26所示。
![](https://epubservercos.yuewen.com/F2DC7F/31398433307916706/epubprivate/OEBPS/Images/Figure-P30_54933.jpg?sign=1738856444-cpZXMwZLKDzu1aqHYixbCkFFHuraS8bJ-0-335345ec0d5f627553ba06d43074072e)
图1.26 在文件夹下创建JavaScript文件
(3)弹出新建JavaScript文件对话框,如图1.27所示,在文本框中输入JavaScript文件的名称index,然后按Enter键,完成index.js文件的创建。此时,开发工具会自动打开刚刚创建的文件。
![](https://epubservercos.yuewen.com/F2DC7F/31398433307916706/epubprivate/OEBPS/Images/Figure-P31_54934.jpg?sign=1738856444-5Vzhm8zfpwwusGxS7bvBCCzdWdKsagvz-0-2e0daaa67571e2e668be3ddf7df1e1b5)
图1.27 新建JavaScript文件对话框
(4)在index.js文件中编写JavaScript代码,如图1.28所示。
![](https://epubservercos.yuewen.com/F2DC7F/31398433307916706/epubprivate/OEBPS/Images/Figure-P31_4738.jpg?sign=1738856444-hGWYbu5qeAR93S8CILnUD6J3alt8wh0l-0-73b88d2b69c0dc5a5ed5c071bd6835be)
图1.28 index.js文件中的代码
说明
代码中使用的alert()是JavaScript语句,其功能是在页面中弹出一个对话框,在该对话框中显示括号中的内容。
(5)在02文件夹下创建index.html文件,在该文件中调用外部JavaScript文件index.js,代码如图1.29所示。
![](https://epubservercos.yuewen.com/F2DC7F/31398433307916706/epubprivate/OEBPS/Images/Figure-P31_54935.jpg?sign=1738856444-YXlSecRjMtWtPRzAsozeXPQcQbo8MRPM-0-f0dcd5ec8ccbc3b8769610daa2a4d111)
图1.29 调用外部JavaScript文件
(6)使用谷歌浏览器运行E:\TM\sl\1\02目录下的index.html文件,结果如图1.30所示。
![](https://epubservercos.yuewen.com/F2DC7F/31398433307916706/epubprivate/OEBPS/Images/Figure-P32_4793.jpg?sign=1738856444-0CWqwczs3pNSrZZVohp19n1zjsSv8Bv4-0-8ff2587fdf86c1c8b207cf7bd6cacd93)
图1.30 程序运行结果
注意
(1)在外部JavaScript文件中,不能将脚本代码用<script>…</script>标记括起来。
(2)使用src属性引用外部JavaScript文件时,<script>标记中不能包含其他JavaScript代码。
(3)在<script>标记中使用src属性引用外部JavaScript文件时,不能省略</script>结束标记。