更新时间:2019-10-07 来源:黑马程序员 浏览量:
JavaScript脚本文件的引入方式和CSS样式文件类似。在HTML文档中引入JavaScript文件主要有三种，即行内式、嵌入式、外链式。接下来对JavaScript的三种引入方式做详细讲解。
1. 行内式
行内式是将JavaScript代码作为HTML标记的属性值使用。例如，单击“学前端”按钮时，弹出一个警告框提示“就到传智播客”，具体示例如下:
<a href="javascript: alert('就到传智播客');">学前端</a>
JavaScript还可以写在HTML标记的事件属性中，事件是JavaScript中的一种机制。例如，单击网页中的一个按钮时，就会触发按钮的单击事件，具体示例如下：
<input type="button" onclick="alert('就到传智播客！'); " value="想学web前端" >
上述代码实现了单击“想学web前端”按钮时，弹出一个警告框提示“就到传智播客”。
值得一提的是，网页开发提倡结构、样式、行为的分离，即分离HTML、CSS、JavaScript代码的基本格式如下：
<input type="button" onclick="alert('就到传智播客！'); " value="想学web前端" >
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代码放一个或多个以j为扩展名的外部 JavaScript文件中，通过<src>标记将这些JavaScript文件链接到HML文档中，其基本语法格式如下:
<script type="text/javascript" src="脚本文件路径"></script>
上述格式中，src是JavaScript标记的属性，用于指定外部脚本文件的路径。同样的，在外链式的语法格式中，也可以省略type属性，将外链式的语法简写为如下格式：
< script src="脚本文件路径"></script>
需要注意的是，调用外部JavaScript文件时，外部的Javascript件中可以直接书写JavaScript 脚本代码，不需要写<script>引入标记。
在实际开发中，当需要编写大量、逻辑复杂的JavaScript代码时，推荐使用外链式。相比嵌入式，外链式的优势可以总结为以下两点。
1) 利于后期修改和维护
嵌入式会导致HTML与JavaScript代码混合在一起，不利用代码的修改和维护;外链式会将HML、CSS、JavaScript三部分代码分离开来，利于后期的修改和维护。
2) 减轻文件体积、加快页面加载速度
嵌入式会将使用的JavaScript代码全部嵌入HTML页面中，这就会增加HTML文件的体积，影响网页本身的加载速度;而外链式可以利用浏览器缓存，将需要多次用到的JavaScript脚本代码重复利用，既减轻了文件的体积，也加快了页面的加载速度。例如在多个页面中引入了相同的js文件时，打开第一个页面后，浏览器就将js文件缓存下来，下次打开其他引用该js文件的页面时，浏览器就不用重新加载js文件了。
以上我们介绍了"JavaScript引入方式”希望对您有所帮助，如果想系统学习web前端知识，请点击页面咨询按钮了解黑马程序员web前端课程信息。
推荐了解：
JavaScript特点
JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
AI+设计
软件测试
新媒体+短视频
集成电路应用开发
AI+Linux云计算运维
.jpg)