JavaScript Hello World 示例
本教程通过示例向您展示如何将 JavaScript 代码嵌入 HTML 页面来帮助您开始使用 JavaScript。
要将 JavaScript 插入 HTML 页面，您可以使用 <script> 元素。有两种方法可以在 HTML 页面中使用 <script> 元素：
将 JavaScript 代码直接嵌入到 HTML 页面中。
引用外部 JavaScript 代码文件。
在 HTML 页面中嵌入 JavaScript 代码
JavaScipt 开发者通常不建议将 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>在 <script> 元素中，我们使用 alert() 函数来显示 Hello, World! 消息。
引用外部 JavaScript 文件
要引用来自外部 JavaScript 文件：
首先，创建一个扩展名为
.js的文件，例如app.js，并将其放在js子文件夹中。请注意，将 JavaScript 文件放在 js 文件夹不是必需的，但这是一个很好的做法。
然后，在
<script>元素的src属性设置 JavasScript 文件的 URL 。
下面是 app.js 和 helloworld.html 文件的内容，代码非常简单。
alert('Hello, World!');<!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>如果您在 Web 浏览器运行 helloworld.html 文件，您将看到一条alert 函数弹出的消息 `Hello, World!。
您可以从远程服务器加载 JavaScript 文件。这允许您其它域，例如内容分发网络 CDN ，提供 JavaScript 文件加速页面载入。
当页面上有多个 JavaScript 文件时，JavaScript 引擎会按文件出现的顺序解释这些文件。
<script src="js/service.js"></script>
<script src="js/app.js"></script>在此示例中，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>async 与 defer 属性
要更改浏览器加载和执行 JavaScript 文件的方式，您可以使用元素的两个属性之一 async 和 defer 。
这些属性只对 <script> 元素设置 src 属性的 JavaScript 文件有效。async 属性指示 Web 浏览器异步执行 JavaScript 文件。
async属性不保证脚本文件按照它们出现的顺序执行。例如：
<script async src="service.js"></script>
<script async src="app.js"></script>在此示例中 app.js 文件可能在 service.js 文件之前执行。因此，您必须确保它们之间没有依赖关系。
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>即使我们将 <script> 元素放在 <head> 部分中，脚本也会等待浏览器解释完 DOM 元素才开始执行 JavaScript 文件。
结论
使用
<script>元素在 HTML 页面中包含 JavaScript 文件。<script>元素的async属性指示 Web 浏览器并行异步运行 JavaScript 文件，然后在 JavaScript 文件可用时立即解析并执行。<script>元素的defer属性允许 Web 浏览器在解析 HTML 文档后执行 JavaScript 文件。
如果您有任何问题或反馈，请随时发表评论。点击下方阅读原文获取更好排版格式与文章参考引用。