全国咨询/投诉热线:400-618-9090

首页技术文章正文

JavaScript引入方式有哪些?【web前端开发培训】

更新时间:2019-10-07 来源:黑马程序员 浏览量:

JavaScript脚本文件的引入方式和CSS样式文件类似。在HTML文档中引入JavaScript文件主要有三种,即行内式、嵌入式、外链式。接下来对JavaScript的三种引入方式做详细讲解。


1570433745898_javascript-引入方式.jpg

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

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

http://www.itcast.cn/subject/uizly/index.shtml?seozxuids

14天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

8天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

0天免费试学

基础班入门课程限时免费

申请试学名额

12天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

10天免费试学

基础班入门课程限时免费

申请试学名额
在线咨询 我要报名