JavaScript 引入方式

在学习 JavaScript 语法之前，我们首先要知道在哪里写 JavaScript 代码才行。这一节不涉及太多编程方面的知识，而是先给大家介绍一下 JavaScript 的引入方式。这样大家至少都知道在哪里编程，然后在后面章节中再给大家详细介绍编程方面的语法。

想要在 HTML 中引入 JavaScript，一般有 3 种方式。

外部 JavaScript
内部 JavaScript
行内 JavaScript

实际上，JavaScript 的引入方式，跟 CSS 引入方式（外部样式表、内部样式表、行内样式表）是非常相似的。小伙伴们对比理解一下，这样更能加深记忆。

外部 JavaScript

外部 JavaScript，指的是把 HTML 代码和 JavaScript 代码单独放在不同文件中，然后在 HTML 文档中使用 “script 标签” 来引入 JavaScript 代码。

外部 JavaScript 是最理想的 JavaScript 引入方式。在实际开发中，为了提升网站的性能和可维护性，一般都是使用外部 JavaScript。

语法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!--1、在head中引入-->
    <script src="index.js"></script>
</head>
<body>
    <!--2、在body中引入-->
    <script src="index.js"></script>
</body>
</html>

说明：

在 HTML 中，我们可以使用 “script 标签” 引入外部 JavaScript 文件。在 script 标签中，我们只需用到 src 这一个属性。src，是 “source（源）” 的意思，指向的是文件路径。

对于 CSS 来说，外部 CSS 文件只能在 head 中引入。不过对于 JavaScript 来说，外部 JavaScript 文件不仅可以在 head 中引入，还可以在 body 中引入。

此外还需要注意一点，引入外部 CSS 文件使用的是 “link 标签”，而引入外部 JavaScript 文件使用的是 “script 标签”。对于这一点，小伙伴们别搞混了。

示例 1：使用 script 标签引入 JavaScript 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!--引入外部CSS-->
    <link rel="stylesheet" href="index.css">
    <!--引入外部JavaScript-->
    <script src="js/index.js"></script>
</head>
<body>
</body>
</html>

分析：

<script src="js/index.js"></script> 表示引入文件名为 “index.js” 的 JavaScript 文件，其中文件的路径是 “js/index.js”。

内部 JavaScript

内部 JavaScript，指的是把 HTML 代码和 JavaScript 代码放在同一个文件中。其中 JavaScript 代码写在 “<script></script>” 标签对内。

语法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!--1、在head中引入（记得加上 defer 属性）-->
    <script defer>
        ……
    </script>
</head>
<body>
    <!--2、在body中引入（在</body>之前）-->
    <script>
        ……
    </script>
</body>
</html>

说明：

同样地，内部 JavaScript 代码不仅可以在 head 中引入，也可以在 body 中引入。一般情况下，我们推荐使用以下 2 种方式来引入内部 JavaScript 代码：

将 “<script></script>” 标签放在 “</body>” 标签的前面。
将 “<script></script>” 标签放在 “<head></head>” 标签的内部，并使用 defer 属性。

实际上，“<script></script>” 是一种简写形式，它其实等价于：

<script type="text/javascript">
    ……
</script>

一般情况下，使用简写形式比较多。对于上面这种写法，我们也需要了解一下，因为不少地方还会采用上面这种旧写法。

示例 2：在 script 标签内编写 JavaScript

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        document.write("绿叶网 - 为好教程，全力以赴。");
    </script>
</head>
<body>
</body>
</html>

页面效果如下图所示。

在script标签内编写JavaScript

分析：

document.write() 用于在页面输出一个内容，这里仅用于教学演示，在实际项目中不推荐使用。

行内 JavaScript

行内 JavaScript，指的是在元素的 “事件属性” 中直接编写 JavaScript 或调用函数。不过这种方式维护性非常差，并不建议在实际项目中使用，这里简单了解一下即可。

示例 3：在元素属性内编写 JavaScript

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <button type="button" onclick="alert('绿叶网 - 为好教程，全力以赴。')">按钮</button>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当点击【按钮】之后，会弹出一个对话框，如下图 2 所示。

在元素属性内编写JavaScript（1）

在元素属性内编写JavaScript（2）

分析：

咱们在这一节中学习了 2 个非常有用的方法，这两个方法在后面章节会经常用到，这里我们先记一下。

document.write()：在页面输出内容。
alert()：弹出一个对话框。