HTML JavaScript

HTML JavaScript

JavaScript 为 HTML 页面添加交互性和动态行为，使您能够操作内容、响应用户操作等。

HTML <script> 标签

<script> 标签用于嵌入或引用可执行的客户端脚本，主要是 JavaScript。

它可以直接包含脚本代码（内联脚本），或使用 src 属性指向外部脚本文件。

内联脚本：

<button onclick="alert('Button clicked!')">Click Me</button>

<p id="demo"></p>

<script>
  // JavaScript 代码直接放在 script 标签内
  function updateContent() {
    document.getElementById('demo').innerHTML = 'Content updated by inline JavaScript!';
  }
  // 调用函数（或者可以通过事件触发）
  updateContent();
</script>

外部脚本：（推荐）

使用外部脚本文件（.js）是首选方法。它提倡：

• **关注点分离：**保持 HTML 结构和 JavaScript 行为的分离。
• **可维护性：**更易于管理和更新代码。
• **缓存：**外部文件可以由浏览器缓存，从而提高后续页面加载的性能。

<!-- In your HTML file -->
<p id="externalDemo"></p>

<!-- Link to an external script file -->
<script src="myscript.js"></script>

// myscript.js 的内容
document.getElementById('externalDemo').innerHTML = 'Content updated from external myscript.js!';

	要深入学习 JavaScript，请探索专门的 JavaScript 教程和资源，如 MDN Web Docs。

脚本放置位置和执行 (async, defer)

您放置 <script> 标签的位置以及如何加载它们会显著影响页面加载性能。

传统放置位置（在 <head> 中不带属性）：

<head>
  <script src="myscript.js"></script> <!-- 阻塞 HTML 解析 -->
</head>

当浏览器遇到这种情况时，它会停止解析 HTML，获取脚本，执行脚本，然后才恢复解析。这会减慢页面的初始渲染速度。

放置在 </body> 前：

<body>
  <!-- 页面内容 -->
  <script src="myscript.js"></script> <!-- HTML 解析后获取/执行 -->
</body>

将脚本放在 <body> 的末尾可以使 HTML 先行解析和渲染。这提高了感知性能，但如果脚本较大或执行缓慢，可能会延迟交互性。

现代属性（async 和 defer）：（推荐用于 <head> 中的外部脚本）

• **defer：**异步下载脚本（与 HTML 解析并行），但保证在 HTML 解析完成后按照脚本在文档中出现的顺序执行。非常适合需要完整 DOM 的脚本。
• **async：**异步下载脚本，一旦下载完成就立即执行，可能在 HTML 解析完成之前。不保证相对于其他异步脚本的执行顺序。适用于不依赖完整 DOM 或执行顺序的独立脚本（如分析脚本）。

<head>
  <title>My Page</title>
  <!-- Defer: 在 HTML 解析后执行，按顺序 -->
  <script src="library.js" defer></script>
  <script src="main.js" defer></script>

  <!-- Async: 准备好后立即执行，顺序不保证 -->
  <script src="analytics.js" async></script>
</head>

对于放置在 <head> 中的应用程序脚本，使用 defer 通常是最佳选择，它提供了非阻塞下载和可预测的执行。

HTML <noscript> 标签

<noscript> 标签为浏览器不支持 JavaScript 或已禁用它的用户提供了备用内容。

<noscript> 内的内容仅在脚本未由浏览器执行时显示。

<!DOCTYPE html>
<html>
<head>
  <title>Script Example</title>
</head>
<body>

  <p id="content">Loading content with JavaScript...</p>

  <script>
    // 这个脚本将更新上面的段落
    document.getElementById('content').innerHTML = 'JavaScript is enabled and running!';
  </script>

  <noscript>
    <!-- 如果 JavaScript 被禁用，则显示此内容 -->
    <p style="color: red;">
      JavaScript is required for this page to function correctly.
      Please enable JavaScript in your browser settings.
    </p>
    <!-- 您可以在此处提供替代的、非 JS 的功能 -->
  </noscript>

</body>
</html>

虽然大多数用户都启用了 JavaScript，但提供 <noscript> 内容是确保可访问性和鲁棒性的良好实践，可以帮助用户理解为什么内容可能缺失或无法交互。

HTML 脚本标签

Tag	Description
	定义客户端脚本（通常是 JavaScript）。
	为脚本不受支持或未启用的用户定义备用内容。