JavaScript/JavaScript within HTML

JavaScript 语言最初是为了在浏览器中运行并处理用户界面的动态方面而引入的，例如用户输入的验证、页面内容 (DOM) 的修改或用户界面 (CSS) 的外观或任何事件处理。这意味着必须存在从 HTML 到 JS 的互连点。 HTML 元素 <script> 扮演这个角色。它是一个普通的 HTML 元素，它的内容是 JS。

<script> 元素几乎可以出现在 HTML 文件中的任何位置，<head> 以及 <body> 中。选择最佳地点只有几个标准；参见下文。

内部与外部JavaScript

<script>元素要么直接包含JS代码，要么指向一个外部文件。通过src属性包含JS代码的 URL。第一个变体称为“内部JavaScript”或“内联JavaScript”，第二个变体称为“外部JavaScript”。

对于“内部 JavaScript”，<script> 元素如下所示：

<script>
  // write your JS code directly here. (This line is a comment in JS syntax)
  alert("Hello World!");
</script>

内部脚本的好处是你的HTML和你的JS都在一个文件里，方便快速开发。这通常用于临时测试一些想法，以及脚本代码很小或特定于该一页的情况。

对于“外部 JavaScript”，<script> 元素如下所示：

<!--  point to a file or to an URL where the code is located. (This line is a comment in HTML syntax) -->
<script src="myScript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>

<!-- although there is nothing within the script element, you should consider that the HTML5 spec  -->
<!-- doesn't allow the abbreviation of the script element to: <script src="myScript.js" />         -->

对于较大的程序，尤其是在多个页面上使用的程序，建议将您的JS放在单独的文件中。此外，这种拆分支持关注点分离的模式：一位专家负责HTML，另一位专家负责JS。此外，它还支持将页面内容(HTML)与其行为(JS)分开。

总的来说，使用“外部脚本”被认为是软件开发的最佳实践。

外部JavaScript

更多详细信息可以参考MDN ^[1]。

`src` 属性

将src="myScript.js"添加到开始 script 标记意味着JS代码将位于同一目录中名为 myScript.js 的文件中作为HTML文件。如果JS文件位于其他位置，则必须将src属性更改为该路径。例如，如果它位于名为 js 的子目录中，则读取为 src="js/myScript.js"。

`type` 属性

JS不是Web开发的唯一脚本语言，但JS是客户端最常见的一种（PHP运行在服务器端）。因此它被认为是HTML5的默认脚本类型。该类型的正式表示法是：type="text/javascript"。较旧的HTML版本知道许多其他脚本类型。如今，所有这些都被评为“遗产”。一些示例是：application/javascript、text/javascript1.5、text/jscript或text/livescript .

在HTML5中，规范说 - 如果你使用JS - type属性应该从脚本元素中省略^[2]，这适用于“内部脚本”和“外部脚本”。

<!-- Nowadays the type attribute is unnecessary -->
<script type="text/javascript">...</script>

<!-- HTML5 code -->
<script>...</script>

`async`和`defer`特性

旧的浏览器只使用一两个线程来读取和解析HTML、JS、CSS...。这可能会导致糟糕的用户体验，因为在加载HTML、JS、CSS、图像等时会出现延迟。当页面第一次加载时，用户可能会有系统慢的印象。

当前的浏览器可以并行执行许多任务。为了启动与JS加载和执行相关的并行执行，可以使用async和defer两个属性扩展<script>元素。

async属性导致异步脚本加载（与其他任务并行），并在可用时立即执行。

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

defer有类似行为。它与async的不同之处在于执行被推迟到页面被完全解析。

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

`<script>`元素的位置

script 元素几乎可以出现在 HTML 文件中的任何位置。但是，有一些加快网站速度的最佳实践 ^[3]。有些人建议将它定位在结束 </body> 标记之前。这加快了下载速度，并且还允许在呈现文档对象模型 (DOM) 时对其进行直接操作。但是类似的行为是由上述 async 和 defer 属性发起的。

<!DOCTYPE html>
<html>
<head>
  <title>Example page</title>
</head>
<body>
  <!-- HTML code goes here -->
  <script src="myScript.js"></script>
</body>
</html>

`<noscript>`元素

出于安全或其他原因，人们可能会在浏览器中停用JS。或者，他们使用非常旧的浏览器，根本无法运行JS。为了在这种情况下通知用户有关情况，有<noscript>元素。它包含将在浏览器中显示的文本。正文应说明不会执行任何JS代码。

<!DOCTYPE html>
<html>
<head>
  <title>Example page</title>
  <script>
    alert("Hello World!");
  </script>
  <noscript>
    alert("Sorry, the JavaScript part of this page will not be executed because JavaScript is not running in your browser. Is JavaScript intentionally deactivated?");
  </noscript>
</head>
<body>
  <!-- HTML code goes here -->
</body>
</html>

XHTML文件中的JavaScript

XHTML使用比HTML更严格的语法。这会导致小的差异。

首先，对于“内部 JavaScript”，有必要引入脚本并使用以下示例中显示的另外两行来完成。

<script>
  // <![CDATA[
  alert("Hello World!");
  // ]]>
</script>

其次，对于“外部 JavaScript”，type 属性是必需的。

参考文献

↑ MDN：脚本元素
↑ WHATWG: The type attribute
↑ Yahoo: Best practices for speeding up your website

[1] MDN：脚本元素

[2] WHATWG: The type attribute

[3] Yahoo: Best practices for speeding up your website

[1]

[2]

[3]

内部与外部JavaScript

外部JavaScript

src 属性

type 属性

async和defer特性

<script>元素的位置

<noscript>元素