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 文件的内容：

alert('Hello, World!');

app.js

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>

helloworld.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 文件。