【JavaScript 教程】第一章入门03— Hello World 示例
将 JavaScript 代码直接嵌入 HTML 页面。 引用外部 JavaScript 代码文件。
01、在 HTML 页面中嵌入 JavaScript 代码
<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文件：
<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 引擎会按文件出现的顺序解释这些文件。请参阅以下示例：
<script src="js/service.js"></script><script src="js/app.js"></script>
JavaScript 引擎将依次解释service.js和app.js文件。它先完成对service.js文件的解释，然后再解释app.js文件。
对于包含许多外部 JavaScript 文件的页面，在页面渲染阶段会显示空白页面。为避免这种情况，您可以在</body>标记之前包含 JavaScript 文件，如下例所示：
<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>elementasync和的两个属性之一defer。
这些属性仅对外部脚本文件有效。async如果可能，该属性会指示 Web 浏览器异步执行 JavaScript 文件（如果可见）。该async属性不保证脚本文件按它们出现的顺序执行。例如：
<script async src="service.js"></script><script async src="app.js"></script>
该app.js文件可能根据之前执行service.js的文件，因此，你必须确保它们之间不存在依赖关系。
defer如果该属性可见，则请求 Web 浏览器在解析文档后执行脚本文件。
<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 教程】第一章入门02—JavaScript 代码编辑器及网页开发工具
学习更多技能
请点击下方公众号
