在网页中使用 JavaScript

¥About JavaScript

JavaScript 是一种主要用于客户端的编程语言，用于使网页具有交互性。你可以在没有 JavaScript 的情况下创建令人惊叹的网页，但 JavaScript 开启了全新的可能性。

¥JavaScript is a programming language mostly used client-side to make webpages interactive. You can create amazing webpages without JavaScript, but JavaScript opens up a whole new level of possibilities.

注意：在本文中，我们将介绍使 JavaScript 生效所需的 HTML 代码。如果你想学习 JavaScript 本身，你可以从我们的 JavaScript 基础知识 文章开始。如果你已经了解 JavaScript 或者有其他编程语言的背景，我们建议你直接跳入我们的 JavaScript 指南。

¥Note: In this article we're going over the HTML code you need to make JavaScript take effect. If you want to learn JavaScript itself, you can start with our JavaScript basics article. If you already know something about JavaScript or if you have a background with other programming languages, we suggest you jump directly into our JavaScript Guide.

¥How to trigger JavaScript from HTML

在浏览器中，JavaScript 本身不执行任何操作。你可以从 HTML 网页内部运行 JavaScript。要从 HTML 中调用 JavaScript 代码，你需要 <script> 元素。有两种使用 script 的方法，具体取决于你是链接到外部脚本还是将脚本嵌入到网页中。

¥Within a browser, JavaScript doesn't do anything by itself. You run JavaScript from inside your HTML webpages. To call JavaScript code from within HTML, you need the <script> element. There are two ways to use script, depending on whether you're linking to an external script or embedding a script right in your webpage.

¥Linking an external script

通常，你将在自己的 .js 文件中编写脚本。如果你想从网页执行 .js 脚本，只需使用 <script> 和指向脚本文件的 src 属性，使用其 URL：

¥Usually, you'll be writing scripts in their own .js files. If you want to execute a .js script from your webpage, just use <script> with an src attribute pointing to the script file, using its URL:

<script src="path/to/my/script.js"></script>

¥Writing JavaScript within HTML

你还可以在 <script> 标记之间添加 JavaScript 代码，而不是提供 src 属性。

¥You may also add JavaScript code between <script> tags rather than providing an src attribute.

<script>
  window.addEventListener("load", () => {
    console.log("This function is executed once the page is fully loaded");
  });
</script>

当你只需要少量 JavaScript 时，这很方便，但是如果你将 JavaScript 保存在单独的文件中，你会发现更容易

¥That's convenient when you just need a small bit of JavaScript, but if you keep JavaScript in separate files you'll find it easier to

• 专注于你的工作
• 编写自给自足的 HTML
• 编写结构化 JavaScript 应用

¥Use scripting accessibly

可访问性是任何软件开发中的一个主要问题。如果你明智地使用 JavaScript，JavaScript 可以让你的网站更容易访问，但如果你不小心使用脚本，它可能会变成一场灾难。为了让 JavaScript 对你有利，有必要了解添加 JavaScript 的某些最佳实践：

¥Accessibility is a major issue in any software development. JavaScript can make your website more accessible if you use it wisely, or it can become a disaster if you use scripting without care. To make JavaScript work in your favor, it's worth knowing about certain best practices for adding JavaScript:

• 使所有内容都以（结构化）文本形式提供。你的内容尽可能依赖 HTML。例如，如果你已经实现了一个不错的 JavaScript 进度条，请确保在 HTML 中使用匹配的文本百分比对其进行补充。同样，你的下拉菜单的结构应为 无序列表 或 links。
• 使所有功能都可以通过键盘访问。
  • 让用户按逻辑顺序按 Tab 键浏览所有控件（例如链接和表单输入）。
  • 如果你使用指针事件（例如鼠标事件或触摸事件），请使用键盘事件复制该功能。
  • 仅使用键盘测试你的网站。
• 不要设置甚至猜测时间限制。使用键盘导航或听到内容读出需要额外的时间。你几乎无法预测用户或浏览器完成一个过程（尤其是加载资源等异步操作）需要多长时间。
• 保持动画微妙而简短，没有闪烁。闪烁很烦人并且可以 引起癫痫发作。此外，如果动画持续超过几秒，请为用户提供取消它的方法。
• 让用户发起交互。这意味着，不要自动更新内容、重定向或刷新。不要在没有警告的情况下使用轮播或显示弹出窗口。
• 为没有 JavaScript 的用户制定 B 计划。人们可能会关闭 JavaScript 以提高速度和安全性，并且用户经常面临阻止加载脚本的网络问题。此外，第三方脚本（广告、跟踪脚本、浏览器扩展）可能会破坏你的脚本。
  • 至少，给 <noscript> 留言如下：<noscript>To use this site, please enable JavaScript.</noscript>
  • 理想情况下，尽可能使用 HTML 和服务器端脚本复制 JavaScript 功能。
  • 如果你只寻求简单的视觉效果，CSS 通常可以更直观地完成工作。
  • 由于几乎每个人都启用了 JavaScript，因此 <noscript> 不能成为编写无法访问的脚本的借口。

¥Learn more

• <script>
• <noscript>
• James Edwards 对无障碍使用 JavaScript 的介绍
• W3C 的辅助功能指南