首页技术文章正文

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特点

分享到:
在线咨询 我要报名
和我们在线交谈!