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

JavaScript教程10个月前更新 admin
1,214 0

通过今天内容的学习,将向你展示如何将 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 文件。
© 版权声明

相关文章

暂无评论

暂无评论...