JavaScript 之 Web前端开发
一、开发者工具
在 Web 前端开发中，JavaScript代码运行于浏览器之中，所以只要有浏览器就可以运行JavaScript代码。在Chrome浏览器中右键，在弹出菜单中点击检查，即可打开Chrome浏览器的开发者工具。
打开之后在顶部菜单栏中选择Console，这是一个交互式的JavaScript解释器，我们可以在这里编写JavaScript代码，运行并且得到结果。
推荐使用Chrome浏览器
注释二、VS Code 和 Live Server
这里通常用于调试代码和排查问题，一般开发还是需要在 VS Code 上完成。我们创建一个项目文件夹，然后将文件夹拖入到 VS Code 编辑区域，这样就算新建了一个 VS Code 项目，后期都在这个项目中进行开发。
在浏览器中，JavaScript 代码通常会随着 html 网页的加载而执行。我们在项目根目录下新建一个 index.html 文件，使用 script 标签嵌入一段 JavaScript代 码，内容如下
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Hello JavaScript</title>
8 <script>
9 console.log('Hello JavaScript');
10 </script>
11 </head>
12 <body>
13 <h1>Hello JavaScript</h1>
14 </body>
15</html>然后在index.html文件上右键，点击菜单中的 Open with Live Server，Live Server 会在本地启动一个 Web 服务，启动成功后会使用默认浏览器打开一个网页 http://127.0.0.1:5500/index.html。
这个网页就是 index.html 渲染之后的效果，并且执行了其中的 JavaScript 代码，在 Console 中打印了"Hello JavaScript"。
相比在script标签中直接写JavaScript代码，更常用的是通过它引入一个JavaScript文件，首先我们新建一个 index.js 文件，内容如下
console.log('Hello index.js');然后将 index.html 中的 scirpt 标签改成
<script src="index.js"></script>当保存之后再去查看之前的网页，发现Console中的内容刷新了。
如果将 script 标签放在内容之前，浏览器会先下载这些 js 文件，然后再继续后面的解析，如果文件较大就可能影响页面渲染出来的时间，所以一般我们会将script标签放在body标签最后面，优化后 index.html 内容如下
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Hello JavaScript</title>
8 </head>
9 <body>
10 <h1>Hello JavaScript</h1>
11 <script src="index.js"></script>
12 </body>
13</html>三、async和defer属性
除了将 script 标签移动到末尾以外，我们还可以使用 async 和 defer 来控制外部 js 文件的加载和执行逻辑。它们都可以让浏览器异步加载外部 js 文件，这样就不会影响后续页面的解析，async 和 defer 不同的是，async 会在 js 文件加载完成后立即执行，无论页面或者其它脚本是否解析完成，而 defer 即使提前加载完成也会等待页面解析完成后之后再执行。
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Hello JavaScript</title>
8 <script defer src="index.js"></script>
9 </head>
10 <body>
11 <h1>Hello JavaScript</h1>
12 </body>
13</html>