首页课程问答小课知识库

JavaScript 之 Web前端开发

一个小时学会JavaScript
收录于

一个小时学会JavaScript

2023-05-23 19:39 · 阅读时长5分钟
小课
一、开发者工具

在 Web 前端开发中，JavaScript代码运行于浏览器之中，所以只要有浏览器就可以运行JavaScript代码。在Chrome浏览器中右键，在弹出菜单中点击检查，即可打开Chrome浏览器的开发者工具。

JavaScript 之 Web前端开发

打开之后在顶部菜单栏中选择Console，这是一个交互式的JavaScript解释器，我们可以在这里编写JavaScript代码，运行并且得到结果。

JavaScript 之 Web前端开发

推荐使用Chrome浏览器

注释
二、VS Code 和 Live Server

这里通常用于调试代码和排查问题，一般开发还是需要在 VS Code 上完成。我们创建一个项目文件夹，然后将文件夹拖入到 VS Code 编辑区域，这样就算新建了一个 VS Code 项目，后期都在这个项目中进行开发。

JavaScript 之 Web前端开发

在浏览器中，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。

JavaScript 之 Web前端开发

这个网页就是 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中的内容刷新了。

JavaScript 之 Web前端开发

如果将 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>
JavaScriptWeb前端