HTML script元素嵌入或引用可执行脚本

本教程向您展示如何将JavaScript代码嵌入HTML页面，来帮助您开始学习 JavaScript。

要将JavaScript插入HTML页面，请使用<script>元素。在HTML页面中使用 <script>元素有两种方式。

第一种是将JavaScript代码直接嵌入HTML页面。第二种是引用外部JavaScript文件。

通常不建议将JavaScript代码直接放在<script>元素中，这种方式多是应用于概念验证或测试目的。

元素中的JavaScript代码<script>是从上到下解释的。在下面的index.html页面<script>元素中，我们使用alert()函数来显示Hello, World! 消息。

<!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>

index.html

引用 JavaScript文件

要引用来自外部JavaScript文件。首先创建一个扩展名为.js的文件，比如app.js文件并将其放在js子文件夹中。

虽然不需要将JavaScript文件放在单独的文件夹中，但这是一个很好的做法。然后在<script>元素的src属性设置URL，该URL指向JavaScript源代码文件。

如果您在Web浏览器打开helloworld.html文件，您将看到一条警告消息Hello, World!。

alert('Hello, World!');

app.js

<!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

请注意，您可以从远程服务器加载JavaScript文件。这允许您从其它域引用JavaScript 文件，最常见的做法使用内容交付CDN加速页面Javascript文件的载入。

当页面上有多个 JavaScript 文件时，JavaScript引擎会按照文件出现的顺序解释这些文件。

在此示例中，JavaScript引擎将依次解释service.js和app.js文件。换句话说，在解释app.js文件之前，浏览器会先完成 service.js文件的解释。

<script src="js/service.js"></script>
<script src="js/app.js"></script>

对于包含许多外部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文件的方式，您可以使用<script>元素的两个属性async和defer。

这些属性只对外部包含外部脚本文件生效。async属性指示Web浏览器异步执行JavaScript文件。

脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。

async属性能够消除解析阻塞的Javascript。解析阻塞的Javascript会导致浏览器必须加载并且执行脚本，之后才能继续解析。

async属性不保证Javascript文件按照它们出现的顺序执行。例如以下test.html的两个script标签，都添加async属性使用javascript文件异步运行。

app.js文件可能在service.js文件之前执行。也可能会在service.js文件执行之后运行。因此，您必须确保它们之间没有依赖关系。

<script async src="service.js"></script>
<script async src="app.js"></script>

test.html

script元素defer属性表示当浏览器在HTML文档解析完成后再运行javascript文件。

即使我们将<script>元素放在<head>节中，脚本也会等待浏览器解释完HTML文档才开始运行javascript文件。

当一个HTML页面中包含两个script元素并设置defer属性时，将出现的顺序运行两个script元素Javascript文件。

通常设置defer属性script元素将不再需要设置async属性，因为defer也有async类似的能力。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript defer demonstration</title>
    <script defer src="app.js"></script>
    <script defer src="service.js"></script>
</head>
<body>
</body>
</html>

结论

你已经知道如何使用<script>元素在HTML页面包含JavaScript文件。

<script>元素的async属性<script>指示Web浏览器并行获取JavaScript文件，然后在JavaScript文件可用时立即解析和执行。

<script>元素的defer属性允许Web浏览器在HTML文档解析完成运行JavaScript文件。