首页技术文章正文

JavaScript代码的三种引入方式【操作演示】

更新时间:2023年01月30日17时46分来源:传智教育浏览次数:

在网页中编写JavaScript代码时，需要先引入JavaScript代码。JavaScript代码有3种引入方式，分别是行内式、嵌入式和外链式，下面分别进行讲解。

1.行内式

行内式是将JavaScript代码作为HTML标签的属性值使用。例如，在单击超链接“test”时，弹出一个警告框提示“Hello”，示例代码如下：

<a href="javascript:alert('Hello');">test</a>

需要说明的是，行内式只有在临时测试或者特殊情况下使用，一般情况下不推荐使用行内式，因为行内式有如下缺点。

(1)行内式可读性较差，尤其是在HTML文件中编写大量JavaScript代码时，不方便阅读。

(2)行内式在遇到多层引号嵌套的情况时，引号非常容易混淆，导致代码出错。

2.嵌入式

嵌入式(或称内嵌式)使用<scrip>标签包裹JavaScript代码，直接编写到HTML文件中，通常将其放到<head>标签<body>或标签中。<scrip>标签的type属性用于告知浏览器脚本类型，HTML.5中该属性的默认值为“text/javascript”，因此在使用HTML5时可以省略ype属性。嵌入式的示例代码如下：

<script>
    JavaScript代码
</script>

3.外链式

外链式(或称外部式)是将JavaScript 代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML页面中使用<script>标签的src属性引人“js”文件。外链式适合javascript代码量较多的情况。在html页面中引入“js”文件，示例代码如下：

<script src="test.js"></script>

上述代码表示引入当前目录下的tesL.js文件。需要注意的是，外链式的标签内不可以编写JavaScript 代码。

为了帮助初学者更好地理解外链式，下面利用外链式实现浏览网页时在页面中自动弹出警告框。创建Example02.html文件，引入Example02.js文件，具体代码如例1-2所示。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="Example02.js"></script>
</body>
</html>

标签的src属性设置了要引入的文件为Example02.js。

创建Example02.js文件，在该文件中编写如下代码：