# JavaScript教程 - 3 HelloWorld

在学习任何编程语言，一般写的第一个程序就是打印一句 “Hello World！”，所以第一个程序也经常被称为 Hello World! 。

下面使用 JavaScript 编写第一个 Hello World 程序。

JavaScript 后面都简称 JS。

# 3.1 HelloWorld

JS 是在网页中运行的，所以将代码写在网页中即可。

在上一个章节，已经准备好了环境，现在在 index.html 中编写即可。

# 1 弹出框

先使用弹出框在网页上弹出显示。

如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>For技术栈</title>
    
    <!-- JS代码 -->
    <script type="text/javascript">
        alert('Hello World')
    </script>
</head>
<body>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在网页的 <head> 标签中，添加 <script> 标签，并在其中编写 JS 代码；
<script> 标签的 type 属性可以省略，默认就是值就是 text/javascript ；
alert() 是一个方法，表示在网页上弹出一个警告框，括号中的 'Hello World' 是弹出框的内容。

然后右键 index.html 文件，使用 Live Server 运行，显示如下：

# 2 控制台打印

我们还可以在浏览器的开发者工具的控制台，打印内容，打印出 Hello World! 。

实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>For技术栈</title>
    
    <!-- JS代码 -->
    <script type="text/javascript">
        console.log('Hello World')
    </script>
</head>
<body>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在 JS 代码中，通过 console.log() 方法，可以在浏览器的控制台打印内容，括号中就是要打印的内容。

首先打开浏览器的开发者工具，F12 快捷键可以直接打开，或在网页上 右键-> 检查 ，然后刷新页面就可以看到：

# 3 网页中显示

也可以直接输出到网页中。

如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>For技术栈</title>
    
    <!-- JS代码 -->
    <script type="text/javascript">
        document.write('Hello World!');
    </script>
</head>
<body>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

document.write() 就是输出到网页中的 body 中，document 就是指网页。

运行如下：

上面的 alert() 、console.log() 、document.write() 都是输出语句，只是输出的位置不同而已，在实际的开发中，使用console.log() 多一些，因为不会对网页产生任何影响，只是输出在控制台，不打开开发者工具不会被用户发现。

# 3.2 JS代码的编写位置

上面 JS 代码是在网页的 <script> 标签中编写的，除了这种方式，还有一些地方也可以编写 JS 代码。

# 1 在script标签中

就像上面的那样。

# 2 在JS文件中编写

可以像 CSS 一样，将 JS 的代码单独写在 .js 结尾的文件中。

举个栗子：

创建一个 script 文件夹，在其中新建 .js 结尾的文件，名称自定义，例如 index.js，将代码编写在 JS 文件中即可。

然后在网页中使用 <script> 标签引入 JS 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>For技术栈</title>
    
    <!-- 引入JS -->
    <script src="script/index.js"></script>
    
    <script>
        
    </script>
</head>
<body>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

使用 <scripts> 标签引入，使用 src 属性执行 JS 文件的路径；
注意：用来引入 JS 文件的 <scripts> 标签，不能在该标签中直接写 JS 代码了。
一个网页可以引入多个 JS 文件，也可以编写多个 <scripts> 标签。

在实际的开发中， JS 代码可能很多，都写在 HTML 网页中，会很臃肿，且不易维护，写在单独的 JS 文件中，在不同的网页中都可以引入并使用，JS 文件可以被浏览器缓存，页面结构清晰，代码复用性高，利于维护。

# 3 事件属性中

HTML 标签有很多的事件属性，可以在触发事件的时候，执行 JS 代码。例如在鼠标点击的时候、在鼠标移入的时候、在获取焦点的时候等等。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>For技术栈</title>
</head>
<body>
    <button onclick="alert('Hello World!')">点击</button>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11

在上面的代码中，在页面添加了一个按钮，给按钮添加了一个 onclick 事件属性，这个属性表示在鼠标点击的时候会触发该事件，当鼠标点击的时候，会执行属性中的 JS 代码。
关于事件，后面再学习。

显示如下：

# 4 超链接href属性中

还可以将 JS 代码写在超链接的 href 属性中。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>For技术栈</title>
</head>
<body>
    <a href="javascript:alert('Hello World!');">超链接</a>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11

在上面的代码中，当点击超链接的时候，会执行 <a> 标签中 href 属性中 javascript: 后面的代码。

显示如下：

上面那么多方式，应该使用哪一种呢？

JS 具体书写的位置还是要看具体的场景，每个场景都可能用到，如果是大量的 JS 代码，还是要写在单独的 .js 文件中。

下面我们的学习为了方便，就直接写在 <script></script> 标签中了。

← 02-开发环境 04-基础语法 →