将 JavaScript 添加到你的网页

关于 JavaScript

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

如何从 HTML 触发 JavaScript

在浏览器中，JavaScript 本身不会做任何事情。你需要在 HTML 网页中运行 JavaScript。要从 HTML 中调用 JavaScript 代码，你需要使用 <script> 元素。使用 script 有两种方式，具体取决于你是链接到外部脚本还是直接在网页中嵌入脚本。

链接外部脚本

通常，你会将脚本写入自己的 .js 文件中。如果你想从网页执行 .js 脚本，只需使用带有 src 属性的 <script> 元素，该属性指向脚本文件，并使用其 URL

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

在 HTML 中编写 JavaScript

你也可以将 JavaScript 代码添加到 <script> 标签之间，而不是提供 src 属性。

<script>
  console.log("Some code");
</script>

当您只需要少量 JavaScript 代码时，这种方法很方便，但如果将 JavaScript 放在单独的文件中，您会发现更容易

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

以可访问的方式使用脚本

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

• 使所有内容都可作为（结构化）文本提供。 尽可能地依靠 HTML 来承载你的内容。例如，如果你实现了一个漂亮的 JavaScript 进度条，请务必在 HTML 中补充匹配的文本百分比。同样，你的下拉菜单应结构化为无序列表的链接。

• 使所有功能都可以通过键盘访问。

  • 让用户以逻辑顺序通过 Tab 键遍历所有控件（例如链接和表单输入）。
  • 如果你使用指针事件（如鼠标事件或触摸事件），请使用键盘事件复制功能。
  • 仅使用键盘测试你的网站。

• 不要设置甚至猜测时间限制。 使用键盘导航或听取内容朗读需要额外的时间。你几乎无法预测用户或浏览器完成一个过程（尤其是加载资源等异步操作）需要多长时间。

• 动画应保持微妙、简短且无闪烁。 闪烁令人烦恼，并可能导致癫痫发作。此外，如果动画持续时间超过几秒钟，请为用户提供取消它的方法。

• 让用户启动交互。 这意味着，不要自动更新内容、重定向或刷新。不要在没有警告的情况下使用轮播或显示弹出窗口。

• 为没有 JavaScript 的用户提供备选方案。 人们可能会关闭 JavaScript 以提高速度和安全性，而且用户经常遇到网络问题，导致脚本无法加载。此外，第三方脚本（广告、跟踪脚本、浏览器扩展）可能会破坏你的脚本。

  • 至少，使用 <noscript> 留下一个简短的消息，例如：<noscript>要使用此站点，请启用 JavaScript。</noscript>
  • 理想情况下，在可能的情况下，使用 HTML 和服务器端脚本复制 JavaScript 功能。
  • 如果你只是寻求简单的视觉效果，CSS 通常可以更直观地完成工作。
  • 由于几乎每个人都确实启用了 JavaScript，因此 <noscript> 不能作为编写不可访问脚本的借口。

了解更多

• <script>
• <noscript>
• 编写 JavaScript 时考虑可访问性，作者 Manuel Matuzovic (2017)
• W3C 的可访问性指南