开始写第一行 JavaScript：hello world

JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引入 JS 代码，有哪几种方式？有三种方式：（和 CSS 的引入方式类似）

  1. 行内式：写在标签内部。
  2. 内嵌式（内联式）：写在 head 标签中。
  3. 外链式：引入外部 JS 文件。

方式 1：行内式

代码举例：

1
<input type="button" value="点我点我" onclick="alert('Hoveco Hello 方式1')" />

1

完整的可执行代码如下：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <input type="button" value="点我点我" onclick="alert('Hoveco Hello 方式1')" />
    </body>
</html>

分析：

  • 可以将单行或少量 JS 代码写在 HTML 标签的事件属性中（以 on 开头的属性），比如放在上面的 onclick点击事件中。
  • 这种书写方式，不推荐使用，原因是：可读性差，尤其是需要编写大量 JS 代码时，很难维护；引号多层嵌套时，也容易出错。
  • 关于代码中的「引号」，在 HTML 标签中，我们推荐使用双引号，JS 中我们推荐使用单引号。

方式 2、内嵌式（内联式）

我们可以在 HTML 页面的 <body> 标签里放入<script type=”text/javascript”></script>标签对，并在<script>里书写 JavaScript 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <script type="text/javascript">
            // 在这里写 js 代码
            alert('千古壹号 hello 方式2');
            console.log('qianguyihao hello 方式2');
        </script>
    </body>
</html>

分析：

  • text 表示纯文本，因为 JavaScript 代码本身就是纯文本。
  • 可以将多行 JS 代码写到 <script> 标签中。
  • 内嵌式 JS 是学习时常用的方式。

方式 3：外链式

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <!-- 外链式：引入外部的 js 文件：这个 utils.js 文件与当前的 html 文件，处于同一级目录 -->
        <script src="utils.js"></script>
    </body>
</html>

分析：

  • 上面这段代码，依然是放到 body 标签里，可以和内嵌的 JS 代码并列。
  • 上方代码的 script 标签已经引入了外部 JS 文件，所以这个标签里面，不可以再写 JS 代码。

总结：

我们在实战开发中，基本都是采用方式 3，因为将 html 文件和 js 文件分开的方式，有利于代码的结构化和复用，符合高内聚、低耦合的思想。很少会有人把一大堆 JS 代码塞到 html 文件里。