【JavaScript 教程】第一章入门03— Hello World 示例

红太狼 2022-09-14 15:17 157阅读 0赞

![0103e50c574ef1323e75bf04a74e9153.png][]

英文教程 | https://www.javascripttutorial.net/

翻译 | web前端开发（ID：web\_qdkf）

通过今天内容的学习，将向你展示如何将 JavaScript 代码嵌入到 HTML 页面中，帮助你开始使用 JavaScript。

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

*  将 JavaScript 代码直接嵌入 HTML 页面。
 *  引用外部 JavaScript 代码文件。

## **01、在 HTML 页面中嵌入 JavaScript 代码** ##

不建议将JavaScript 中的<script>代码直接放置在HTML内，这种情况，仅应用于概念验证或测试目的。

<!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! 消息。

## **02、外部引言JavaScript 文件** ##

要包含来自外部文件的 JavaScript：

*  首先，创建一个扩展名为.jseg的文件，app.js并将其放在js子文件夹中。请注意，js 不需要将 JavaScript 文件放在文件夹中，但这是一个很好的做法。
 *  然后，src在<script>元素的属性中使用指向 JavaScript 源代码文件的 URL 。

下面显示了 app.js 文件的内容：

alert('Hello, World!');

以下显示了该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 浏览器中启动该文件，你将看到一个包含该Hello, World!消息的弹出窗口。

请注意，你可以从远程服务器加载 JavaScript 文件。这允许你提供来自各种域的 JavaScript，例如内容交付网络 (CDN) 以加快页面速度。

当页面上有多个 JavaScript 文件时，JavaScript 引擎会按文件出现的顺序解释这些文件。请参阅以下示例：

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>
     
       
       <script src="js/service.js"></script>
       <script src="js/app.js"></script>
    </body>
    </html>

## **async和defer属性** ##

要更改 JavaScript 代码的加载和执行方式，你可以使用<script>elementasync和的两个属性之一defer。

这些属性仅对外部脚本文件有效。async如果可能，该属性会指示 Web 浏览器异步执行 JavaScript 文件（如果可见）。该async属性不保证脚本文件按它们出现的顺序执行。例如：

该app.js文件可能根据之前执行service.js的文件，因此，你必须确保它们之间不存在依赖关系。

defer如果该属性可见，则请求 Web 浏览器在解析文档后执行脚本文件。

<!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>部分中，脚本也会等待浏览器接收到结束标记<html>开始执行。

## 概括 ##

*  使用<script>element 在 HTML 页面中包含 JavaScript 文件。
 *  该元素的async属性<script>指示 Web 浏览器并行获取 JavaScript 文件，然后在 JavaScript 文件可用时立即解析并执行。
 *  元素的defer属性<script>允许 Web 浏览器在解析文档后执行 JavaScript 文件。

#  #

**推荐阅读**

[【JavaScript 教程】第一章入门01—认识JavaScript][JavaScript _01_JavaScript]

[【JavaScript 教程】第一章入门02—JavaScript 代码编辑器及网页开发工具][JavaScript _02_JavaScript]

**学习更多技能**

**请点击下方公众号**

![7e0fb2d598705bf7af17ef59ba2b9731.gif][]

![0e6b1ca87cea2bf496f05f9c413c43b3.png][]

![94136ee72b51b5e73aa87b32b68d3ed0.png][]

[0103e50c574ef1323e75bf04a74e9153.png]: /images/20220828/6f488cb4cfa04e6782efdb764f2e06c3.png
[JavaScript _01_JavaScript]: http://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649115180&idx=2&sn=b46d35ff628661fb80d17525d070e88f&chksm=be586d81892fe4971da9501e989c4d45055198e42a28c5ec062238485922a7e9932686b2cf84&scene=21#wechat_redirect
[JavaScript _02_JavaScript]: https://blog.csdn.net/qq_28849581/article/details/111604130
[7e0fb2d598705bf7af17ef59ba2b9731.gif]: /images/20220828/626b8c75983f42298b46051a08ea7035.png
[0e6b1ca87cea2bf496f05f9c413c43b3.png]: /images/20220828/53b799aeb5b34437a0b6ec1891a1116c.png
[94136ee72b51b5e73aa87b32b68d3ed0.png]: /images/20220828/1bc6305c7f0e423db4ff608172f5b7e3.png