第二章将JavaScript写到HTML编码中

2-1 直接在 HTML 文件中编写 JavaScript 代码
 2-2 在单独的文件中编写 JavaScript 代码
 2-3 禁用浏览器的 JavaScript 时显示不同的内容
 2-4 JavaScript 代码应该写在 HTML 文件的什么地方？
2-5 异步读取外部 JavaScript 文件（async 属性、defer 属性）

2-1 直接在 HTML 文件中编写 JavaScript 代码

我将解释如何直接在 HTML 文件中编写 JavaScript 代码。

编写脚本元素

使用脚本元素编写 JavaScript 代码。具体来说，在和之间编写JavaScript代码。

<script>
// 编写代码
</script>

例如，要使用 JavaScript 将字符串写入文档，如下所示。

<script>
document.write("<p>JavaScript TEST</p>");
</script>

在 HTML 文件中的何处编写脚本元素

script 元素写在 HTML 文件的 head 元素内或 body 元素内。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">

<script>
// 编写代码
</script>

</head>
<body>

<script>
// 编写代码
</script>

</body>
</html>

你也不必写进去。但是根据代码的内容，可能需要写在head元素中，反之也可能需要写在body元素中。

此外，可以描述多个脚本元素。下面是在 body 元素中描述两个脚本元素的情况。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>

<p>...</p>

<script>
// 编写代码
</script>

<p>...</p>

<script>
// 编写代码
</script>

<p>...</p>

</body>
</html>

在 script 元素中省略 type 属性并在 meta 元素中省略脚本语言

在 HTML 4.01 中，您必须在编写脚本元素时在 type 属性中指定脚本的 MIME 类型。比如写JavaScript代码的时候，是这样写的。

<script type="text/javascript">
// 编写代码
</script>

从 HTML 5 开始，type 属性的默认值为 text/javascript ，因此在编写 JavaScript 代码时，您可以省略 type 属性并编写：

<script>
// 编写代码
</script>

同样，在 HTML 4.01 中，在事件处理程序中编写代码时，需要在 meta 元素中指定默认脚本语言。具体来说，下面的描述写在head元素中。

<meta http-equiv="Content-Script-Type" content="text/javascript">

从 HTML 5 开始，不再需要指定默认脚本语言，并且不再可能将“Content-Script-Type”指定为 http-equiv 属性的值。因此，这个元元素不需要写。

示例代码

现在创建一个包含一些简单 JavaScript 代码的 HTML 页面并将其保存为 sample2-1.html。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JavaScript sample2-1</title>
</head>
<body>

<p>
使用 JavaScript 输出以下字符串。
</p>

<script>
document.write("<p>JavaScript TEST</p>");
</script>

</body>
</html>

打开您刚刚从浏览器保存的 HTML 页面。

在 HTML 页面中编写的 JavaScript 代码被执行，一个字符串被打印到屏幕上。

2-2 在单独的文件中编写 JavaScript 代码

您可以在单独的文件中编写 JavaScript 代码，然后从 HTML 文件加载该文件，而不是直接在 HTML 文件中编写 JavaScript 代码。当在多个 HTML 文件中使用相同的代码时，这很有用。本节介绍如何在单独的文件中编写 JavaScript 代码。

使用 JavaScript 代码创建文件

作为示例，让我们将代码分成一个单独的文件，而不是直接在 HTML 文件中编写 JavaScript，如下所示。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JavaScript TEST</title>
</head>
<body>

<script>
document.write("<p>JavaScript TEST</p>");
</script>

</body>
</html>

JavaScript 代码写在一个文本文件中。创建一个文件并编写要运行的 JavaScript 代码。（无需编写脚本元素）。

document.write("<p>JavaScript TEST</p>");

保存文件。包含 JavaScript 代码的文件的扩展名一般为 .js。这一次，我们称它为 sample.js。

接下来，从 HTML 文件加载包含 JavaScript 代码的文件。请在HTML文件中您要加载代码的位置进行如下描述。

<script src="包含代码的文件路径">
</script>

假设 HTML 文件和 JavaScitp 代码在同一目录中：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JavaScript TEST</title>
</head>
<body>

<script src="./sample.js">
</script>

</body>
</html>

这里的所有都是它的。如果包含 JavaScript 代码的文件发布在与 HTML 文件不同的域，请使用文件的绝对路径 ( https://www.example.com/sample.js ) 作为 src 属性的值。请指定

指定JavaScript文件的字符编码并读取

如果包含JavaScript 代码的文件和读取该文件的HTML 文件中使用的字符代码不同，您可以在HTML 文件端指定JavaScript 文件的字符代码并读取它。

<script src="包含代码的文件路径" charset="文字コード">
</script>

在编写 script 元素时，将 JavaScript 文件中使用的字符代码指定为 charset 属性的值。例如JavaScript文件的字符编码为UTF-8，则说明如下。

<script src="./sample.js" charset="UTF-8">
</script>

示例代码

创建一个如下所示的 HTML 页面并将其保存为 sample2-2.html。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JavaScript TEST</title>
</head>
<body>

<p>
使用 JavaScript 输出以下字符串。
</p>

<script src="./js/sample2-2.js">
</script>

</body>
</html>

然后使用如下 JavaScript 代码创建一个文件：在保存HTML文件的目录下创建一个名为js的目录，并将其保存为sample2-2.js。

document.write("<p>测试读取 JavaScript 文件</p>");

这两个文件都以 UTF-8 格式保存为字符代码。

打开您刚刚从浏览器保存的 HTML 页面。

从 HTML 页面读取外部创建的 JavaScript 文件，执行 JavaScript 代码，然后将字符串输出到屏幕。

※ 此页面使用了 document.write 是因为它可以写得简洁，但目前不推荐使用 document.write。

2-3 禁用浏览器的 JavaScript 时显示不同的内容

如果您的浏览器禁用了 JavaScript，则在 HTML 文件中编写的 JavaScript 代码将无法运行。但是，由于用户不知道为什么什么都不显示，所以只有当 JavaScript 被禁用时，您才可以使用 noscript 元素来显示不同的内容。在这里，我们将解释如何在禁用浏览器的 JavaScript 时显示不同的内容。

写一个 noscript 元素

例如，让我们从启用了 JavaScript 的浏览器中显示一个 HTML 文件，其中写入了 JavaScript。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JavaScript TEST</title>
</head>
<body>

<script>
document.write("<p>你好</p>");
</script>

</body>
</html>

JavaScript 代码将被执行，浏览器将显示如下内容：

现在尝试在浏览器中禁用 JavaScript 的情况下打开同一个文件。

如果浏览器的 JavaScript 被禁用，代码将不会运行，导致浏览器中不显示任何内容。

如果您只想向浏览器像这样禁用 JavaScript 的用户显示消息，请使用 noscript 元素。像这样写：

<noscript>
关闭JavaScript时要显示的内容
</noscript>

仅当您正在查看的浏览器禁用了 JavaScript 时，才会输出 noscript 元素。请注意，noscript 元素中写入的内容是用 HTML 编写的。

至于如何使用，可以和描述JavaScript代码的script元素一起写，也可以单独写在页面顶部。

<script>
document.write("<p>Hello</p>");
</script>
<noscript>
<p>
本网站使用 JavaScript 
</p>
</noscript>

示例代码

创建一个如下所示的 HTML 页面并将其保存为 sample2-3.html。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JavaScript TEST</title>
</head>
<body>

<script>
document.write("<p>你好</p>");
</script>
<noscript>
<p>
本网站使用JavaScript 
</p>
</noscript>

</body>
</html>

首先，打开您刚刚从启用了 JavaScript 的浏览器保存的 HTML 页面。

接下来，打开您刚刚从禁用了 JavaScript 的浏览器中保存的 HTML 页面。

当启用 JavaScript 时，脚本元素内的代码被执行并打印到屏幕上，而当 JavaScript 被禁用时，noscript 元素内的 HTML 语句被打印到屏幕上。

※ 此处使用 document.write 是因为它可以描述简洁，但现在不推荐使用 document.write。

2-4 JavaScript 代码应该写在 HTML 文件的什么地方？

考虑到执行 JavaScript 的目的和处理它所花费的时间，JavaScript 代码在 HTML 文件中的写入位置可能会让用户舒适地浏览 HTML 页面。例如，处理时间长的代码尽量写在页面的后面，必须在屏幕显示前执行的处理写在<head>标签中。在这里，我们将根据编写位置说明JavaScript代码的编写位置和注意事项。

从 HTML 文件下载到屏幕显示的流程

让我们简单地检查一下当第一次从浏览器访问网页时，网页在浏览器屏幕上是如何显示的。

首先，从网络服务器下载一个 HTML 文件。下载后，它会解析 HTML 页面中写入的内容并构建所谓的 DOM 树。DOM 树是 HTML 页面中标签和文本的分层表示。（JavaScript 允许您对 DOM 的每个节点执行各种操作）。

CSSOM 是从样式表数据构建的，与 DOM 的构建是分开的。渲染树是通过合并 DOM 和 CSSOM 构建的。最后，执行诸如在屏幕上显示什么的计算并显示在浏览器屏幕上。

细节省略，简单的流程是这样的。

并且不是依次完成解析、构建渲染树、显示屏幕这些步骤，而是在解析完成一定量后，与样式合并显示在屏幕上，而不等待其余的解析。而其余的解析继续进行。如果它是一个可以放在一个屏幕上的网页，它会出现在屏幕上一次显示。

在 HTML 页面中编写 JavaScript 代码时如何处理？

如果 HTML 页面中有标签，解析将停止并执行 <script> 标签内的 JavaScript 代码。</p>

<p>你好</p>

<script>
document.write("<p>你好吗？</p>");
</script>

<p>再见</p>

对于简单的 JavaScript 代码，你不必太担心，但如果代码执行需要几秒钟，这段时间解析会停止，导致在 <script> 标签后显示屏幕。它会迟到。

另外，如果从 HTML 页面读取包含 JavaScript 代码的外部文件，解析将停止一次，读取外部文件，并继续解析，直到外部文件中写入的 JavaScript 代码执行完毕。所以解析和屏幕显示可能会比内联写代码延迟更多的时间（缓存等也有涉及，所以不能说是无条件的）。

<p>你好</p>

<script src="./sample.js"></script>

<p>再见</p>

就用户满意度而言，浏览器中缓慢的页面呈现不是很理想。因此，据说JavaScript代码尽可能写在HTML页面的末尾是可取的，例如在</body>标签之前，如果对代码的位置没有限制的话书面。

<body>
・・・
・・・
・・・
<script src="./sample.js"></script>
</body>

即使写在最后，在加载JavaScript文件和执行<script>标签处代码的过程中，解析也会停止，但是由于<script>标签后面没有其他标签，所以有不会影响屏幕显示。不是。

关于什么时候执行代码，在哪里写代码

所以并不是所有的 <script> 标签都应该在最后描述。例如，如果在屏幕上显示 HTML 页面之前要执行一些处理，则需要将代码写在 </body> 标签的开头或 <head> 标签内。

<head>
<script src="./sample.js"></script>
</head>
<body>
・・・
・・・
・・・
</body>

此外，JavaScript 代码无法对尚未解析的标签执行操作。例如，如果您尝试为代码写入位置之后写入的标签设置值，则会发生错误。

请看下面的示例。

<p>你好</p>

<script>
let element = document.getElementById('target');
element.innerHTML = 'Good bye';
</script>

<p id="target">再见</p>

>> TypeError: Cannot set property 'innerHTML' of null

到JavaScript代码执行时，后面的标签还没有被解析，无法被代码引用。因此，将发生错误。

在这种情况下，它应该写在引用 JavaScript 代码的标记之后，如下所示：

<p>你好</p>

<p id="target">再见</p>

<script>
let element = document.getElementById('target');
element.innerHTML = 'Good bye';
</script>

如果像这样在代码执行的时机上有一些条件，那么在决定在 HTML 页面中的什么地方编写 JavaScript 代码时就需要考虑它。

2-5 异步读取外部 JavaScript 文件（async 属性、defer 属性）

当从 HTML 文件中加载包含 JavaScript 的外部文件时，您可以通过将 async 属性或 defer 属性设置为脚本标签来异步加载它。本节介绍如何设置 async 或 defer 属性以异步加载外部 JavaScript 文件，以及 async 和 defer 属性之间的区别。

设置延迟属性

在script标签中设置defer属性时，说明如下。

<script defer src="./jscode.js"></script>

通常，HTML 解析是在 HTML 文件下载完成后进行的，但是如果中间有一个 script 标签，并且正在读取一个包含 JavaScript 的外部文件，解析就会停止一次，并立即开始读取文件。之后，执行文件中写入的代码，然后恢复解析。

另一方面，如果在 script 标签上设置了 defer 属性，外部 JavaScript 文件将立即开始加载，但 HTML 解析将在加载期间继续而不停止。这消除了加载 JavaScript 文件所花费的时间所导致的 HTML 解析和屏幕显示延迟。

此外，如果设置了 defer 属性，外部 JavaScript 文件中的代码将在构建 DOM 树并触发 DOMContentLoaded 事件之前执行。如果在同一个 HTML 文件中描述了多个设置了 defer 属性的 script 标签，它们将按照 HTML 页面中描述的顺序执行，而不管文件加载的顺序如何。

通过这种方式设置 defer 属性，可以在不影响 HTML 解析或屏幕显示的情况下加载包含 JavaScript 的文件，并且可以预测执行的时机和顺序。。

设置异步属性

在script标签中设置async属性，写法如下。

<script async src="./jscode.js"></script>

如果在 script 标签上设置了 async 属性，则外部 JavaScript 文件将立即开始加载，但 HTML 解析将在加载期间继续而不停止。这消除了加载 JavaScript 文件所花费的时间所导致的 HTML 解析和屏幕显示延迟。这里与 defer 属性相同。

在具有异步属性的脚本标签中加载的代码在完成加载后立即执行。如果 HTML 仍在解析中，则解析将停止一次并执行代码。如果在加载完成之前已经解析完 HTML 并构建了 DOM，则不会等待文件加载完成再进行下一步。然后在加载完成后立即执行代码。

如果在同一个 HTML 文件中有多个设置了 async 属性的 script 标签，它们将在文件加载完成后执行，而不管它们在 HTML 页面中的写入顺序。因此，不知道先执行哪段代码。

defer 和 async 属性的区别

defer 属性和 async 属性都在 HTML 解析的同时加载外部编写的 JavaScript 文件，因此可以避免因加载而导致的解析和屏幕显示的延迟。

如果有多个设置了 defer 属性的 script 标签，代码将按照 HTML 中写入的顺序执行，因此这在编写必须按顺序执行的代码时很有用。另外，DOM树构建完成后，执行时机就固定了，所以可以假定这样来编写代码。

由于具有 async 属性的 script 标签是按照加载完成的顺序执行的，因此在加载之前不知道先执行哪段代码。另外，由于是在加载完成后立即执行的，所以无法知道是在构建DOM树之前还是之后。但是，由于加载完成后立即执行，因此在访问分析的代码等希望尽快执行时会很方便。

异步读取外部文件时，请考虑以上几点来决定应该设置哪个属性。请注意，当编写内联代码而不是读取外部文件时，这两个属性都不可用。