摘要：在本次课程中，我们讨论 JavaScript 中的数学 — 我们如何使用 运算符 (en-US) 和其他功能来成功地操作数字以完成我们的请求。 人人都爱数学 好吧，可能不是。有些人喜欢数学，有些人可能从在学校必须学习乘法表和长除法时就讨厌数学，还有人介于两者之间。但我们都不能否认，数学是生活的基本组 阅读全文

摘要：在读完之前的一些文章之后，你现在应该大概知道了 JavaScript 是什么，你能用它干什么，它是怎么跟其他 web 技术（HTML，CSS）协同工作的，以及它有哪些主要特性。在本章节，我们将开始学习 JavaScript 的基础，了解如何使用 -- 变量。 需要的工具 在本章中，你将要输入一些代码 阅读全文

摘要：上一节中你创建了“猜数字”游戏，但它可能没有正常工作。别担心，本节将为你提供一些简单的提示，来帮助你查找并修复 JavaScript 程序中的错误，从而让你远离困扰。 错误类型 一般来说，代码错误主要分为两种： 语法错误：代码中存在拼写错误，将导致程序完全或部分不能运行，通常你会收到一些出错信息。只 阅读全文

摘要：现在，你已经学到了一些 JavaScript 的理论知识，以及用 JavaScript 能够做些什么。下面我们会提供一个创建简单的 Javascript 程序的实践的教程——循序渐进地构建一个简易版“猜数字”游戏。 我们并不要求你立刻完整理解所有代码：你不需要借此学会 JavaScript，甚至不需 阅读全文

摘要：欢迎来到 MDN 的 JavaScript 初学者课程！本节将在一定高度俯瞰 JavaScript，回答一些诸如“它是什么？”和“它能做什么？”的问题。并使你熟悉 JavaScript 的用途。 广义的定义 JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的 阅读全文

摘要：Shadow tree 背后的思想是封装组件的内部实现细节。 假设，在 <user-card> 组件的 shadow DOM 内触发一个点击事件。但是主文档内部的脚本并不了解 shadow DOM 内部，尤其是当组件来自于第三方库。 所以，为了保持细节简单，浏览器会重新定位（retarget）事件。 阅读全文

摘要：shadow DOM 可以包含 <style> 和 <link rel="stylesheet" href="…"> 标签。在后一种情况下，样式表是 HTTP 缓存的，因此不会为使用同一模板的多个组件重新下载样式表。 一般来说，局部样式只在 shadow 树内起作用，文档样式在 shadow 树外起 阅读全文

摘要：许多类型的组件，例如标签、菜单、照片库等等，需要内容去渲染。 就像浏览器内建的 <select> 需要 <option> 子项，我们的 <custom-tabs> 可能需要实际的标签内容来起作用。并且一个 <custom-menu> 可能需要菜单子项。 使用了 <custom-menu> 的代码如下 阅读全文

摘要：内建的 <template> 元素用来存储 HTML 模板。浏览器将忽略它的内容，仅检查语法的有效性，但是我们可以在 JavaScript 中访问和使用它来创建其他元素。 从理论上讲，我们可以在 HTML 中的任何位置创建不可见元素来储存 HTML 模板。那 <template> 元素有什么优势？ 阅读全文

摘要：Shadow DOM 为封装而生。它可以让一个组件拥有自己的「影子」DOM 树，这个 DOM 树不能在主文档中被任意访问，可能拥有局部样式规则，还有其他特性。 内建 shadow DOM 你是否曾经思考过复杂的浏览器控件是如何被创建和添加样式的？ 比如 <input type="range">： 浏 阅读全文

摘要：我们可以通过描述带有自己的方法、属性和事件等的类来创建自定义 HTML 元素。 在 custom elements （自定义标签）定义完成之后，我们可以将其和 HTML 的内建标签一同使用。 这是一件好事，因为虽然 HTML 有非常多的标签，但仍然是有穷尽的。如果我们需要像 <easy-tabs>、 阅读全文

摘要：这一部分我们将会讲述关于「Web Components」的一系列现代标准。 到目前为止，这些标准仍然在制定中。其中一些特性已经被很好地支持并集成到了现代 HTML/DOM 标准中，但是还有部分特性仍然处在草案阶段。你可以在任何浏览器中尝试一些例子，Google Chrome 可能是对这些新特性支持得 阅读全文

摘要：JavaScript 动画可以处理 CSS 无法处理的事情。 例如，沿着具有与 Bezier 曲线不同的时序函数的复杂路径移动，或者实现画布上的动画。 使用 setInterval 从 HTML/CSS 的角度来看，动画是 style 属性的逐渐变化。例如，将 style.left 从 0px 变化 阅读全文

摘要：CSS 动画可以在不借助 Javascript 的情况下做出一些简单的动画效果。 你也可以通过 Javascript 控制 CSS 动画，使用少量的代码，就能让动画表现更加出色。 CSS 过渡（transition）[#css-transition] CSS 过渡的理念非常简单，我们只需要定义某一个 阅读全文

摘要：贝塞尔曲线用于计算机图形绘制形状，CSS 动画和许多其他地方。 它们其实非常简单，值得学习一次并且在矢量图形和高级动画的世界里非常受用。 控制点 贝塞尔曲线由控制点定义。 这些点可能有 2、3、4 或更多。 例如，两点曲线： 三点曲线： 四点曲线： 如果仔细观察这些曲线，你会立即注意到： 控制点不总 阅读全文

摘要：IndexedDB 是一个浏览器内建的数据库，它比 localStorage 强大得多。 通过支持多种类型的键，来存储几乎可以是任何类型的值。 支撑事务的可靠性。 支持键值范围查询、索引。 和 localStorage 相比，它可以存储更大的数据量。 对于传统的 客户端-服务器 应用，这些功能通常是 阅读全文

摘要：Web 存储对象 localStorage 和 sessionStorage 允许我们在浏览器上保存键/值对。 它们有趣的是，在页面刷新后（对于 sessionStorage）甚至浏览器完全重启（对于 localStorage）后，数据仍然保留在浏览器中。我们很快就会看到。 我们已经有了 cooki 阅读全文

摘要：Cookie 是直接存储在浏览器中的一小串数据。它们是 HTTP 协议的一部分，由 RFC 6265 规范定义。 Cookie 通常是由 Web 服务器使用响应 Set-Cookie HTTP-header 设置的。然后浏览器使用 Cookie HTTP-header 将它们自动添加到（几乎）每个对 阅读全文

摘要：Server-Sent Events 规范描述了一个内建的类 EventSource，它能保持与服务器的连接，并允许从中接收事件。 与 WebSocket 类似，其连接是持久的。 但是两者之间有几个重要的区别： 与 WebSocket 相比，EventSource 是与服务器通信的一种不那么强大的方 阅读全文

摘要：在 RFC 6455 规范中描述的 WebSocket 协议，提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法。数据可以作为“数据包”在两个方向上传递，而无需中断连接也无需额外的 HTTP 请求。 对于需要连续数据交换的服务，例如网络游戏，实时交易系统等，WebSocket 尤其有用。 一 阅读全文