本文详细介绍了如何在HTML中内联JavaScript代码以及将其作为单独文件链接到网页，包括在文档头部和主体中的使用方法，以及使用单独文件管理大型脚本的益处
介绍
JavaScript，简称 JS，是一种用于网页开发的编程语言。作为 Web 的核心技术之一，JavaScript 与 HTML 和 CSS 一起用于使网页具有交互性并构建 Web 应用程序。现代 Web 浏览器遵循通用的显示标准，通过内置引擎支持 JavaScript，无需额外的插件。
在处理 Web 文件时，JavaScript 需要与 HTML 标记一起加载和运行。这可以通过两种方式实现：要么内联在 HTML 文档中，要么作为浏览器将与 HTML 文档一起下载的单独文件运行。
本教程将介绍如何将 JavaScript 整合到您的 Web 文件中，包括内联到 HTML 文档和作为单独文件。
将 JavaScript 添加到 HTML 文档中
您可以通过使用专用的 HTML 标记 </code> 将 JavaScript 代码添加到 HTML 文档中。</div><div><code><script></code> 标记可以放置在 HTML 的 <code><head></code> 部分或 <code><body></code> 部分，具体取决于您希望 JavaScript 何时加载。</div><div>通常，JavaScript 代码可以放在文档的 <code><head></code> 部分中，以便将其包含在 HTML 文档的主要内容之外。</div><div>但是，如果您的脚本需要在页面布局的某个特定点运行（例如在使用 <code>document.write</code> 生成内容时），则应将其放在应调用它的位置，通常在 <code><body></code> 部分内。</div><div>让我们考虑以下带有浏览器标题为“今天的日期”的空白 HTML 文档：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en-US%5C%22%3E%5Cn%20%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3EToday's%20Date%3C%2Ftitle%3E%5Cn%3C%2Fhead%3E%5Cn%20%5Cn%3Cbody%3E%5Cn%20%5Cn%3C%2Fbody%3E%5Cn%20%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%223hCJt%22%7D"></div><div>目前，此文件仅包含 HTML 标记。假设我们想要将以下 JavaScript 代码添加到文档中：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22let%20d%20%3D%20new%20Date()%3B%5Cnalert(%5C%22Today's%20date%20is%20%5C%22%20%2B%20d)%3B%22%2C%22id%22%3A%22Cemyw%22%7D"></div><div>这将使网页显示一个警报，其中包含当前日期，无论用户何时加载该站点。</div><div>为了实现这一点，我们将在 HTML 文件中添加一个 <code><script></code> 标记以及一些 JavaScript 代码。</div><div>首先，我们将在 <code><head></code> 标记之间添加 JavaScript 代码，以通知浏览器在加载页面的其余部分之前运行 JavaScript 脚本。我们可以在 <code><title></code> 标记下方添加 JavaScript，如下所示：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en-US%5C%22%3E%5Cn%20%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3EToday's%20Date%3C%2Ftitle%3E%5Cn%20%20%20%20%3Cscript%3E%5Cn%20%20%20%20%20%20%20%20let%20d%20%3D%20new%20Date()%3B%5Cn%20%20%20%20%20%20%20%20alert(%5C%22Today's%20date%20is%20%5C%22%20%2B%20d)%3B%5Cn%20%20%20%20%3C%2Fscript%3E%5Cn%3C%2Fhead%3E%5Cn%20%5Cn%3Cbody%3E%5Cn%20%5Cn%3C%2Fbody%3E%5Cn%20%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%22eCzHu%22%7D"></div><div>加载页面后，您将收到类似于以下内容的警报：</div><div>!JavaScript Alert Example</div><div>如果我们要修改 HTML 主体中显示的内容，我们需要在 <code><head></code> 部分之后实现，以便它显示在页面上，如下例所示：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en-US%5C%22%3E%5Cn%20%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3EToday's%20Date%3C%2Ftitle%3E%5Cn%3C%2Fhead%3E%5Cn%20%5Cn%3Cbody%3E%5Cn%20%20%5Cn%20%20%3Cscript%3E%5Cn%20%20%20%20%20%20let%20d%20%3D%20new%20Date()%3B%5Cn%20%20%20%20%20%20document.body.innerHTML%20%3D%20%5C%22%3Ch1%3EToday's%20date%20is%20%5C%22%20%2B%20d%20%2B%20%5C%22%3C%2Fh1%3E%5C%22%5Cn%20%20%3C%2Fscript%3E%5Cn%20%5Cn%3C%2Fbody%3E%5Cn%20%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%22uK0rC%22%7D"></div><div>通过 Web 浏览器加载上述 HTML 文档的输出将类似于以下内容：</div><div>!JavaScript Date Example</div><div>小型或仅在一个页面上运行的脚本可以在 HTML 文件中正常工作，但对于较大的脚本或将在许多页面上使用的脚本来说，这不是一个非常有效的解决方案，因为包含它可能变得笨拙或难以阅读和理解。在下一节中，我们将介绍如何在 HTML 文档中处理单独的 JavaScript 文件。</div><h3 id="ZiflA"><a name="t2"></a><a></a>使用单独的 JavaScript 文件</h3><div>为了容纳较大的脚本或将在多个页面上使用的脚本，JavaScript 代码通常存储在一个或多个 <code>js</code> 文件中，并在 HTML 文档中引用，类似于引用外部资源（如 CSS）。</div><div>使用单独的 JavaScript 文件的好处包括：</div><ul><li>将 HTML 标记和 JavaScript 代码分开，使两者更加简单</li><li>单独的文件使维护更容易</li><li>当 JavaScript 文件被缓存时，页面加载更快</li></ul><div>为了演示如何将 JavaScript 文档连接到 HTML 文档，让我们创建一个小型 Web 项目。它将包括 <code>js/</code> 目录中的 <code>script.js</code>，<code>css/</code> 目录中的 <code>style.css</code>，以及项目根目录中的主 <code>index.html</code>。</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22project%2F%5Cn%E2%94%9C%E2%94%80%E2%94%80%20css%2F%5Cn%7C%20%20%20%E2%94%94%E2%94%80%E2%94%80%20style.css%5Cn%E2%94%9C%E2%94%80%E2%94%80%20js%2F%5Cn%7C%20%20%20%E2%94%94%E2%94%80%E2%94%80%20script.js%5Cn%E2%94%94%E2%94%80%E2%94%80%20index.html%22%2C%22id%22%3A%22mldkF%22%7D"></div><div>我们可以从上面的部分中开始使用我们之前的 HTML 模板：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en-US%5C%22%3E%5Cn%20%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3EToday's%20Date%3C%2Ftitle%3E%5Cn%3C%2Fhead%3E%5Cn%20%5Cn%3Cbody%3E%5Cn%20%5Cn%3C%2Fbody%3E%5Cn%20%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%220DVK7%22%7D"></div><div>现在，让我们将显示日期的 JavaScript 代码移动到 <code>script.js</code> 文件中，作为一个 <code><h1></code> 标题：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22let%20d%20%3D%20new%20Date()%3B%5Cndocument.body.innerHTML%20%3D%20%5C%22%3Ch1%3EToday's%20date%20is%20%5C%22%20%2B%20d%20%2B%20%5C%22%3C%2Fh1%3E%5C%22%22%2C%22id%22%3A%22SRCJe%22%7D"></div><div>我们可以在 <code><body></code> 部分添加对此脚本的引用，代码如下：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cscript%20src%3D%5C%22js%2Fscript.js%5C%22%3E%3C%2Fscript%3E%22%2C%22id%22%3A%22eXCdy%22%7D"></div><div><code><script></code> 标记指向我们 Web 项目中 <code>js/</code> 目录中的 <code>script.js</code> 文件。</div><div>让我们在我们的 HTML 文件的上下文中考虑这行代码，即在 <code><body></code> 部分中：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en-US%5C%22%3E%5Cn%20%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3EToday's%20Date%3C%2Ftitle%3E%5Cn%3C%2Fhead%3E%5Cn%20%5Cn%3Cbody%3E%5Cn%20%5Cn%3Cscript%20src%3D%5C%22js%2Fscript.js%5C%22%3E%3C%2Fscript%3E%5Cn%3C%2Fbody%3E%20%5Cn%20%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%22CYaLd%22%7D"></div><div>最后，让我们还编辑 <code>style.css</code> 文件，为 <code><h1></code> 标题添加背景颜色和样式：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22body%20%7B%5Cn%20%20%20%20background-color%3A%20%230080ff%3B%5Cn%7D%5Cn%20%5Cnh1%20%7B%5Cn%20%20%20%20color%3A%20%23fff%3B%5Cn%20%20%20%20font-family%3A%20Arial%2C%20Helvetica%2C%20sans-serif%3B%5Cn%7D%22%2C%22id%22%3A%22dd1BW%22%7D"></div><div>我们可以在 HTML 文档的 <code><head></code> 部分引用该 CSS 文件：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en-US%5C%22%3E%5Cn%20%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3EToday's%20Date%3C%2Ftitle%3E%5Cn%20%20%20%20%3Clink%20rel%3D%5C%22stylesheet%5C%22%20href%3D%5C%22css%2Fstyle.css%5C%22%3E%5Cn%3C%2Fhead%3E%5Cn%20%5Cn%3Cbody%3E%5Cn%20%5Cn%3Cscript%20src%3D%5C%22js%2Fscript.js%5C%22%3E%3C%2Fscript%3E%5Cn%3C%2Fbody%3E%5Cn%20%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%22oBZQa%22%7D"></div><div>现在，有了 JavaScript 和 CSS，我们可以将 <code>index.html</code> 页面加载到我们选择的 Web 浏览器中。我们应该看到一个类似于以下内容的页面：</div><div>!JavaScript Date with CSS Example</div><div>现在，我们已经将 JavaScript 放在一个文件中，可以以相同的方式从其他网页调用它，并在单个位置更新它们。</div><h3 id="tgTGP"><a name="t3"></a><a></a>结论</h3><div>本教程介绍了如何将 JavaScript 集成到您的 Web 文件中，包括内联到 HTML 文档中以及作为单独的 <code>.js</code> 文件。</div><div>从这里，您可以学习如何使用 JavaScript 开发者控制台以及如何在 JavaScript 中编写注释。</div><div id="__reading__mode__content_end_mark_container_id" style="background-color: #FCFCFC;"><br /></div>
