【JavaScript 教程】第一章入门03— Hello World 示例
通过今天内容的学习，将向你展示如何将 JavaScript 代码嵌入到 HTML 页面中，帮助你开始使用 JavaScript。
要将 JavaScript 插入 HTML 页面，请使用<script>元素。有两种方法可以在 HTML 页面中使用 <script> 元素：
将 JavaScript 代码直接嵌入 HTML 页面。
引用外部 JavaScript 代码文件。
01、在 HTML 页面中嵌入 JavaScript 代码
不建议将JavaScript 中的<script>代码直接放置在HTML内，这种情况，仅应用于概念验证或测试目的。
<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! 消息。
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 引擎会按文件出现的顺序解释这些文件。请参阅以下示例：
<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 代码的加载和执行方式，你可以使用<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 浏览器在解析文档后执行脚本文件。
<!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 文件。
相关文章
