0

JavaScript Hello World 示例

 1 year ago
source link: https://www.myfreax.com/javascript-hello-world/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
JavaScript Hello World 示例

JavaScript Hello World 示例

本教程通过示例向您展示如何将 JavaScript 代码嵌入 HTML 页面来帮助您开始使用 JavaScript。

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

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

在 HTML 页面嵌入 JavaScript 代码

JavaScipt 开发者通常不建议将 JavaScript 代码直接放置在 <script> 元素，但在用于概念验证或测试目的时则可以这样做。

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

引用外部 JavaScript 文件

要引用来自外部 JavaScript 文件：

  • 首先，创建一个扩展名为 .js 的文件，例如 app.js ，并将其放在 js 子文件夹中。请注意，将 JavaScript 文件放在 js 文件夹不是必需的，但这是一个很好的做法。
  • 然后，在 <script> 元素的 src 属性设置 JavasScript 文件的 URL 。

app.js 文件的内容：

alert('Hello, World!');

app.js

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 浏览器运行 helloworld.html 文件，您将看到一条alert 函数弹出的消息 `Hello, World!。

您可以从远程服务器加载 JavaScript 文件。这允许您其它域，例如内容分发网络  CDN ，提供 JavaScript 文件加速页面载入。

当页面上有多个 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 文件的方式，您可以使用元素的两个属性之一 async 和 defer 。

这些属性只对 <script> 元素设置 src 属性的 JavaScript 文件有效。async 属性指示 Web 浏览器异步执行 JavaScript 文件。

async属性不保证脚本文件按照它们出现的顺序执行。例如：

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

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

defer 属性请求 Web 浏览器在解析 HTML 文档后执行脚本文件。

<!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> 部分中，脚本也会等待浏览器解释完 DOM 元素才开始执行 JavaScript 文件。

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

微信公众号

支付宝打赏

myfreax 淘宝打赏

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK