摘要：本教程将帮助您通过展示如何将 JavaScript 代码嵌入 HTML 页面来开始使用 JavaScript。
要将 JavaScript 插入 HTML 页面，请使用<script> 元素。在 HTML 页面中使用<script> 元素有两种方法
- 直接将 JavaScript 代码嵌入 HTML 页面。
- 引用外部 JavaScript 代码文件。
在 HTML 页面上嵌入 JavaScript 代码
不建议将 JavaScript 代码直接放在<script> 元素中，应仅用于概念验证或测试目的。
<script> 元素中的 JavaScript 代码从上到下解释。例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Example</title>
<script>
alert('Hello, World!');
</script>
</head>
<body>
</body>
</html>Code language: HTML, XML (xml)在<script> 元素中，我们使用alert() 函数来显示Hello, World! 消息。
包含外部 JavaScript 文件
要从外部文件包含 JavaScript，
- 首先，创建一个扩展名为
.js的文件，例如app.js，并将其放在js目录中。请注意，虽然将 JavaScript 文件放在js目录中不是必需的，但它被认为是最佳实践。 - 然后，在
<script>元素的src属性中使用 JavaScript 源代码文件的 URL。
以下是 app.js 文件的内容
alert('Hello, World!');Code language: JavaScript (javascript)以下是helloworld.html 文件的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Example</title>
<script src="js/app.js"></script>
</head>
<body>
</body>
</html>Code language: HTML, XML (xml)如果您在 Web 浏览器中启动helloworld.html 文件，您将看到一个显示Hello, World! 消息的警报。
请注意，您可以从远程服务器加载 JavaScript 文件。这使您能够从不同的域（例如，内容交付网络 (CDN)）提供 JavaScript，以提高页面加载速度。
当您在一个页面上有多个 JavaScript 文件时，JavaScript 引擎会按它们出现的顺序解释这些文件。例如
<script src="js/service.js"></script>
<script src="js/app.js"></script>Code language: HTML, XML (xml)在此示例中，JavaScript 引擎将按顺序解释service.js 和app.js 文件。它首先完成解释service.js 文件，然后继续解释app.js 文件。
对于包含许多外部 JavaScript 文件的页面，空白页面可能会在渲染阶段显示。
为了防止这种情况，您可以在</body> 标记之前包含 JavaScript 文件，如本例所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Example</title>
</head>
<body>
<!-- end of page content here-->
<script src="js/service.js"></script>
<script src="js/app.js"></script>
</body>
</html>Code language: HTML, XML (xml)async 和 defer 属性
要修改浏览器加载和执行 JavaScript 文件的方式，请使用<script> 元素的两个属性之一：async 和defer。这些属性仅对外部脚本文件有效。
async 属性
async 属性指示 Web 浏览器异步执行 JavaScript 文件。但是，它不能保证脚本文件将按它们出现的顺序执行。例如
<script async src="service.js"></script>
<script async src="app.js"></script>Code language: HTML, XML (xml)app.js 文件可能会在service.js 文件之前执行。因此，您必须确保它们之间没有依赖关系。
defer 属性
defer 属性请求 Web 浏览器在解析 HTML 文档后执行脚本文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript defer demonstration</title>
<script defer src="defer-script.js"></script>
</head>
<body>
</body>
</html>Code language: HTML, XML (xml)即使我们将<script> 元素放在<head> 部分，脚本也会等到浏览器接收到结束</html> 标记后才会开始执行。
摘要
- 使用
<script>元素在 HTML 页面中包含 JavaScript 文件。 <script>元素的async属性指示 Web 浏览器并行获取 JavaScript 文件，然后在 JavaScript 文件可用后立即解析和执行它。<script>元素的defer属性允许 Web 浏览器在解析完文档后执行 JavaScript 文件。
