From 50178cb58bc68b77ee5f804d0dcc56fea51916d0 Mon Sep 17 00:00:00 2001 From: allo Date: Thu, 4 Aug 2022 17:06:38 +0800 Subject: [PATCH 1/3] prepare markdown convertion for Building_blocks --- .../build_your_own_function/index.html | 17 +- .../building_blocks/conditionals/index.html | 42 ++--- .../building_blocks/events/index.html | 157 ++++++------------ .../building_blocks/functions/index.html | 29 +--- .../javascript/building_blocks/index.html | 4 +- .../building_blocks/looping_code/index.html | 95 ++++------- .../building_blocks/return_values/index.html | 4 +- 7 files changed, 119 insertions(+), 229 deletions(-) diff --git a/files/zh-cn/learn/javascript/building_blocks/build_your_own_function/index.html b/files/zh-cn/learn/javascript/building_blocks/build_your_own_function/index.html index 69dbf88db02e2f..2d38c113c437a7 100644 --- a/files/zh-cn/learn/javascript/building_blocks/build_your_own_function/index.html +++ b/files/zh-cn/learn/javascript/building_blocks/build_your_own_function/index.html @@ -1,6 +1,6 @@ --- title: 创建您自己的函数 -slug: learn/JavaScript/Building_blocks/Build_your_own_function +slug: Learn/JavaScript/Building_blocks/Build_your_own_function tags: - JavaScript - 函数 @@ -39,7 +39,7 @@

先活跃下气氛：构建一

这个alert()函数不是很好的：您可以alert()出这条信息，但是您不能很容易的表达其他内容，例如颜色，图标或者是其他东西。接下来我们将会构建一个更有趣的函数。

-

笔记: 这个例子能够在现代浏览器上很好的工作，但是这个风格在老的浏览器上并没那么有趣。我们建议你实现这个例子时在现代浏览器上，例如 Firefox，Opera 或者 Chrome 浏览器。

+

备注： 这个例子能够在现代浏览器上很好的工作，但是这个风格在老的浏览器上并没那么有趣。我们建议你实现这个例子时在现代浏览器上，例如 Firefox，Opera 或者 Chrome 浏览器。

基本函数

@@ -47,7 +47,7 @@

基本函数

首先，让我们来组织一个基本的函数。

-

注：对于函数命名约定，应遵循与变量命名约定相同的规则。这很好，尽你所能理解它们之间的区别 - 函数名称后带有括号，而变量则没有。

+

备注： 对于函数命名约定，应遵循与变量命名约定相同的规则。这很好，尽你所能理解它们之间的区别 - 函数名称后带有括号，而变量则没有。

    @@ -192,7 +192,7 @@

    一个更加复杂的参数

    1. 第一步，从 Github 上下载我们需要的图标 (警告图标 和 聊天图标) 。把图标保存在一个叫做icons 的文件夹下，和你的 HTML 文件在同一个目录下。 -
      笔记: 警告和聊天图标是在这个网站 iconfinder.com 上找到的，设计者是 Nazarrudin Ansyari. 感谢他！
      +

      备注： 警告和聊天图标是在这个网站 iconfinder.com 上找到的，设计者是 Nazarrudin Ansyari。感谢他！

    2. 下一步，找到页面的 CSS 文件。我们要修改下以便我们使用图标。首先，修改 .msgBox 的宽度： 
      width: 200px;
      @@ -227,10 +227,10 @@

      一个更加复杂的参数

    -

    注意: 如果你写这个例子遇到了困难，在这里查看免费的代码 完整版本的代码 (或者在线运行的完整代码), 也可以向我们寻求帮助。

    +

    备注： 如果你写这个例子遇到了困难，在这里查看免费的代码 完整版本的代码 (或者在线运行的完整代码), 也可以向我们寻求帮助。

    -

    测试你的技能！

    +

    测试你的技能！

    你已经来到了本文章的结尾，但是你还能记得最重要的知识吗？你可以在离开这里找到一些更深度的测试来证实你已经记住了这些知识——查看测试你的技能：函数（英文）。后两章文本包含了这个测试需要的技能，所以你可能先需要阅读再尝试该测试。

    @@ -238,12 +238,9 @@

    结论

    恭喜你，终于到了这里（等你好久了）! 这篇文章介绍了如何写一个自定义函数，要把这个新技能在真实项目中使用上你可能还要花点功夫。 下一篇文章中我们将会介绍函数的另一个相关概念 — 返回值。

    - -

    {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}

    -

    在这个模块中

    +

    在这个模块中

-

Note: 你可以 在 GitHub 上找到这个例子 （也可以在线运行。）

+

备注： 你可以 在 GitHub 上找到这个例子 （也可以在线运行。）

关于比较运算符

@@ -155,7 +155,7 @@

关于比较运算符

-

Note: 如果你想复习这些内容，可以回顾之前链接上的材料。

+

备注： 如果你想复习这些内容，可以回顾之前链接上的材料。

我们想特别提到测试布尔值（true / false），和一个通用模式，你会频繁遇到它，任何不是 false, undefined, null, 0, NaN 的值，或一个空字符串（''）在作为条件语句进行测试时实际返回 true，因此您可以简单地使用变量名称来测试它是否为真，甚至是否存在（即它不是未定义的）。例如:

@@ -282,7 +282,7 @@

switch 语句

-

Note: default 部分不是必须的 - 如果表达式不可能存在未知值，则可以安全地省略它。如果有机会，您需要包括它来处理未知的情况。

+

备注： default 部分不是必须的 - 如果表达式不可能存在未知值，则可以安全地省略它。如果有机会，您需要包括它来处理未知的情况。

switch 语句示例

@@ -330,7 +330,7 @@

switch 语句示例

{{ EmbedLiveSample('A_switch_example', '100%', 100) }}

-

Note: 你可以 在 GitHub 上找到这个例子 （也可以在线运行。）

+

备注： 你可以 在 GitHub 上找到这个例子 （也可以在线运行。）

三元运算符

@@ -378,7 +378,7 @@

三元运算符示例

最后，我们还有一个onchange事件监听器，用于运行一个包含三元运算符的函数。它以测试条件开始select.value === 'black'。如果这返回true，我们运行update()带有黑色和白色参数的函数，这意味着我们最终得到黑色的背景颜色和白色的文字颜色。如果返回false，我们运行update()带有白色和黑色参数的函数，这意味着站点颜色被反转。

-

Note: 你可以 在 GitHub 上找到这个例子 （也可以在线运行。）

+

备注： 你可以 在 GitHub 上找到这个例子 （也可以在线运行。）

主动学习：一个简单的日历

@@ -407,10 +407,7 @@

主动学习：一个简单的日

如果您犯了错误，您可以随时使用“Reset”按钮重置该示例。如果真的卡住了，请按“Show solution”查看解决方案。

- -

{{ EmbedLiveSample('Playable_code', '100%', 1110) }}

+

{{ EmbedLiveSample('主动学习：一个简单的日历', '100%', 1110) }}

主动学习：更多颜色选择！

@@ -526,10 +522,7 @@

主动学习：更多颜色选择

如果您犯了错误，您可以随时使用“Reset”按钮重置该示例。如果真的卡住了，请按“Show solution”查看解决方案。

- -

{{ EmbedLiveSample('Playable_code_2', '100%', 850) }}

+

{{ EmbedLiveSample('主动学习：更多颜色选择！', '100%', 850) }}

结论

diff --git a/files/zh-cn/learn/javascript/building_blocks/events/index.html b/files/zh-cn/learn/javascript/building_blocks/events/index.html index 3ff9cf6dbeb2a9..5419a0c4c0faa5 100644 --- a/files/zh-cn/learn/javascript/building_blocks/events/index.html +++ b/files/zh-cn/learn/javascript/building_blocks/events/index.html @@ -52,7 +52,7 @@

一系列事件

每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候，我们说我们注册了一个事件处理器。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的，尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生，然后处理器就是对事件发生做出的回应。

-

注： 网络事件不是 JavaScript 语言的核心——它们被定义成内置于浏览器的 JavaScript APIs。

+

备注： 网络事件不是 JavaScript 语言的核心——它们被定义成内置于浏览器的 JavaScript APIs。

一个简单的例子

@@ -61,9 +61,7 @@

一个简单的例子

<button>Change color</button>
- +

JavaScript 代码如下所示：

@@ -84,7 +82,7 @@

一个简单的例子

示例输出如下：

-

{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}

+

{{ EmbedLiveSample('一个简单的例子', '100%', 200) }}

这不仅应用在网页上

@@ -150,7 +148,7 @@

行内事件处理器 - 请勿使 }
-

Note: 您可以在GitHub上找到这个示例的完整源代码 (也可以在线运行).

+

备注： 您可以在GitHub上找到这个示例的完整源代码 (也可以在线运行).

在 Web 上注册事件处理程序的最早方法是类似于上面所示的事件处理程序 HTML 属性(也称为内联事件处理程序)—属性值实际上是当事件发生时要运行的 JavaScript 代码。上面的例子中调用一个在{{htmlelement("script")}}元素在同一个页面上，但也可以直接在属性内插入 JavaScript，例如：

@@ -170,7 +168,7 @@

行内事件处理器 - 请勿使 }
-

注释: 将您的编程逻辑与内容分离也会让您的站点对搜索引擎更加友好。

+

备注： 将您的编程逻辑与内容分离也会让您的站点对搜索引擎更加友好。

addEventListener() 和 removeEventListener()

@@ -187,7 +185,7 @@

addEventListener() 和 removeEv btn.addEventListener('click', bgChange);
-

注释: 您可以在Github上找到这个示例的完整源代码 (也可以 在线运行)。

+

备注： 您可以在Github上找到这个示例的完整源代码 (也可以 在线运行)。

在addEventListener() 函数中，我们具体化了两个参数——我们想要将处理器应用上去的事件名称，和包含我们用来回应事件的函数的代码。注意将这些代码全部放到一个匿名函数中是可行的：

@@ -236,7 +234,7 @@

我该使用哪种机制？

etc.
-

注解:如果您在工作中被要求支持比 Internet Explorer 8 更老的浏览器，那么您可能会遇到困难，因为这些古老的浏览器会使用与现代浏览器不同的事件处理模型。但是不要害怕，大多数 JavaScript 库 (例如 jQuery ) 都内置了能够跨浏览器差异的函数。在你学习 JavaScript 旅程里的这个阶段，不要太担心这个问题。

+

备注： 如果您在工作中被要求支持比 Internet Explorer 8 更老的浏览器，那么您可能会遇到困难，因为这些古老的浏览器会使用与现代浏览器不同的事件处理模型。但是不要害怕，大多数 JavaScript 库 (例如 jQuery ) 都内置了能够跨浏览器差异的函数。在你学习 JavaScript 旅程里的这个阶段，不要太担心这个问题。

其他事件概念

@@ -256,13 +254,13 @@

事件对象

btn.addEventListener('click', bgChange);
-

Note: 您可以在 Github 上查看这个示例的 完整代码 ，或者在这里查看 实时演示。

+

备注： 您可以在 Github 上查看这个示例的 完整代码 ，或者在这里查看 实时演示。

在这里，您可以看到我们在函数中包括一个事件对象e，并在函数中设置背景颜色样式在e.target上 - 它指的是按钮本身。事件对象 e 的target属性始终是事件刚刚发生的元素的引用。所以在这个例子中，我们在按钮上设置一个随机的背景颜色，而不是页面。

-

Note: 您可以使用任何您喜欢的名称作为事件对象 - 您只需要选择一个名称，然后可以在事件处理函数中引用它。开发人员最常使用 e / evt / event，因为它们很简单易记。坚持标准总是很好。

+

备注： 您可以使用任何您喜欢的名称作为事件对象 - 您只需要选择一个名称，然后可以在事件处理函数中引用它。开发人员最常使用 e / evt / event，因为它们很简单易记。坚持标准总是很好。

当您要在多个元素上设置相同的事件处理程序时，e.target非常有用，并且在发生事件时对所有元素执行某些操作。 例如，你可能有一组 16 块方格，当它们被点击时就会消失。用 e.target 总是能准确选择当前操作的东西（方格）并执行操作让它消失，而不是必须以更困难的方式选择它。在下面的示例中 (请参见useful-eventtarget.html完整代码;也可以在线运行running live）我们使用 JavaScript 创建了 16 个<div>元素。接着我们使用 document.querySelectorAll()选择全部的元素，然后遍历每一个，为每一个元素都添加一个onclick单击事件，每当它们点击时就会为背景添加一个随机颜色。

@@ -277,10 +275,7 @@

事件对象

输出如下 (试着点击它 - 玩的开心):

- -

{{ EmbedLiveSample('Hidden_example', '100%', 400) }}

+

{{ EmbedLiveSample('事件对象', '100%', 400) }}

你遇到的大多数事件处理器的事件对象都有可用的标准属性和函数（方法）（请参阅完整列表 Event 对象引用）。然而，一些更高级的处理程序会添加一些专业属性，这些属性包含它们需要运行的额外数据。例如，媒体记录器 API 有一个dataavailable事件，它会在录制一些音频或视频时触发，并且可以用来做一些事情 (例如保存它，或者回放)。对应的ondataavailable处理程序的事件对象有一个可用的数据属性。

@@ -349,12 +344,10 @@

阻止默认行为

</form> <p></p> -

这里我们用一个onsubmit事件处理程序（在提交的时候，在一个表单上发起submit事件）来实现一个非常简单的检查，用于测试文本字段是否为空。如果是，我们在事件对象上调用preventDefault()函数，这样就停止了表单提交，然后在我们表单下面的段落中显示一条错误消息，告诉用户什么是错误的：

@@ -373,93 +366,17 @@

阻止默认行为

显然，这是一种非常弱的表单验证——例如，用户输入空格或数字提交表单，表单验证并不会阻止用户提交——这不是我们例子想要达到的目的。输出如下：

-

{{ EmbedLiveSample('Preventing_default_behaviour', '100%', 140) }}

+

{{ EmbedLiveSample('阻止默认行为', '100%', 140) }}

-

Note: 查看完整的源代码 preventdefault-validation.html (也可以 running live )

+

备注： 查看完整的源代码 preventdefault-validation.html (也可以 running live )

事件冒泡及捕获

最后即将介绍的这个主题你常常不会深究，但如果你不理解这个主题，就会十分痛苦。事件冒泡和捕捉是两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。为了容易理解，我们来看一个例子——在新标签页打开这个show-video-box.html 例子（在这里可以查看源码 source code）。也可以在下面查看：

- - -

{{ EmbedLiveSample('Hidden_video_example', '100%', 500) }}

+

{{ EmbedLiveSample('事件冒泡及捕获', '100%', 500) }}

这是一个非常简单的例子，它显示和隐藏一个包含<video>元素的<div>元素：

@@ -467,21 +384,51 @@
Hidden video example
<div class="hidden"> <video> - <source src="rabbit320.mp4" type="video/mp4"> - <source src="rabbit320.webm" type="video/webm"> + <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"> + <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"> <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> </div> -

当‘’button‘’元素按钮被单击时，将显示视频，它是通过将改变<div>的class 属性值从hidden变为showing(这个例子的 CSS 包含两个class，它们分别控制这个<div>盒子在屏幕上显示还是隐藏。)：

+ + +

当“button”元素按钮被单击时，将显示视频，它是通过将改变<div>的class 属性值从hidden变为showing(这个例子的 CSS 包含两个class，它们分别控制这个<div>盒子在屏幕上显示还是隐藏。)：

+ + 
btn.onclick = function() {
-  videoBox.setAttribute('class', 'showing');
+  videoBox.setAttribute('class','showing');
 }

然后我们再添加几个onclick事件处理器，第一个添加在<div>元素上，第二个添加在<video>元素上。这个想法是当视频 (<video>）外 <div>元素内这块区域被单击时，这个视频盒子应该再次隐藏；当单击视频 (<video>）本身，这个视频将开始播放。

-
videoBox.onclick = function() {
+
videoBox.onclick = function() {
   videoBox.setAttribute('class', 'hidden');
 };
 
@@ -530,11 +477,11 @@ 
用 stopPropagation() 修复问题
你可以尝试把 show-video-box.html source code 拷贝到本地，然后自己动手修复它，或者在 show-video-box-fixed.html 页面查看修复结果（也可以在这里 source code 查看源码）。

 
 

-
注解: 为什么我们要弄清楚捕捉和冒泡呢？那是因为，在过去糟糕的日子里，浏览器的兼容性比现在要小得多，Netscape（网景）只使用事件捕获，而 Internet Explorer 只使用事件冒泡。当 W3C 决定尝试规范这些行为并达成共识时，他们最终得到了包括这两种情况（捕捉和冒泡）的系统，最终被应用在现在浏览器里。

+
备注： 为什么我们要弄清楚捕捉和冒泡呢？那是因为，在过去糟糕的日子里，浏览器的兼容性比现在要小得多，Netscape（网景）只使用事件捕获，而 Internet Explorer 只使用事件冒泡。当 W3C 决定尝试规范这些行为并达成共识时，他们最终得到了包括这两种情况（捕捉和冒泡）的系统，最终被应用在现在浏览器里。

 

 
 

-
注解: 如上所述，默认情况下，所有事件处理程序都是在冒泡阶段注册的，这在大多数情况下更有意义。如果您真的想在捕获阶段注册一个事件，那么您可以通过使用addEventListener()注册您的处理程序，并将可选的第三个属性设置为 true。

+
备注： 如上所述，默认情况下，所有事件处理程序都是在冒泡阶段注册的，这在大多数情况下更有意义。如果您真的想在捕获阶段注册一个事件，那么您可以通过使用addEventListener()注册您的处理程序，并将可选的第三个属性设置为 true。

 

 
 
事件委托

diff --git a/files/zh-cn/learn/javascript/building_blocks/functions/index.html b/files/zh-cn/learn/javascript/building_blocks/functions/index.html
index 430b1555fa3f74..3c3ea2c0166791 100644
--- a/files/zh-cn/learn/javascript/building_blocks/functions/index.html
+++ b/files/zh-cn/learn/javascript/building_blocks/functions/index.html
@@ -1,6 +1,6 @@
 ---
 title: 函数 - 可复用代码块
-slug: learn/JavaScript/Building_blocks/Functions
+slug: Learn/JavaScript/Building_blocks/Functions
 tags:
   - API
   - JavaScript
@@ -39,8 +39,6 @@ 
我能在哪找到函数？

 
 
几乎任何时候，只要你使用一个带有一对圆括号（）的 JavaScript 结构，并且你不是在使用一个常见的比如 for for 循环，while 或 do…while 循环，或者 if 语句这样的内置语言结构时，那么您就正在使用函数。

 
-
-
 
浏览器内置函数

 
 
在这套课程中我们已经使用了很多浏览器内置函数，当我们操作一个字符串的时候，例如：

@@ -71,7 +69,7 @@ 
浏览器内置函数

 
...我们已经使用过函数了！

 
 

-
提示：如果需要，你可以随意将这些代码输入浏览器控制台以便于你熟悉其功能。

+
备注： 如果需要，你可以随意将这些代码输入浏览器控制台以便于你熟悉其功能。

 

 
 
JavaScript 有许多内置的函数，可以让您做很多有用的事情，而无需自己编写所有的代码。事实上，许多你调用（运行或者执行的专业词语）浏览器内置函数时调用的代码并不是使用 JavaScript 来编写——大多数调用浏览器后台的函数的代码，是使用像 C++这样更低级的系统语言编写的，而不是像 JavaScript 这样的 web 编程语言。

@@ -88,8 +86,6 @@ 
函数与方法

 
 
二者区别在于方法是在对象内定义的函数。浏览器内置函数（方法）和变量（称为属性）存储在结构化对象内，以使代码更加高效，易于处理。

 
-
-
 
自定义函数

 
 
您在过去的课程中还看到很多定制功能 - 在代码中定义的功能，而不是在浏览器中。每当您看到一个自定义名称后面都带有括号，那么您使用的是自定义函数。在我们的循环文章中的random-canvas-circles.html示例（另见完整的源代码）中，我们包括一个如下所示的自定义函数：draw()

@@ -116,8 +112,6 @@ 
自定义函数

 
 
我们需要这个函数，因为浏览器的内置Math.random（）函数只生成一个 0 到 1 之间的随机十进制数。我们想要一个 0 到一个指定数字之间的随机整数。

 
-
-
 
调用函数

 
 
现在你可能很清楚这一点，但仅仅为了防止……，要在函数定义之后，实际使用它，你必须运行或调用它。这是通过将函数名包含在代码的某个地方，后跟圆括号来完成的。

@@ -189,7 +183,7 @@ 
匿名函数

 }

 
 

-
匿名函数也称为函数表达式。函数表达式与函数声明有一些区别。函数声明会进行声明提升（declaration hoisting），而函数表达式不会。

+
备注： 匿名函数也称为函数表达式。函数表达式与函数声明有一些区别。函数声明会进行声明提升（declaration hoisting），而函数表达式不会。

 

 
 
函数参数

@@ -197,7 +191,7 @@ 
函数参数

 
一些函数需要在调用它们时指定参数 ——这些参数值需要放在函数括号内，才能正确地完成其工作。

 
 

-
Note: 参数有时称为参数（arguments），属性（properties）或甚至属性（attributes）

+
备注： 参数有时称为参数（arguments），属性（properties）或甚至属性（attributes）

 

 
 
例如，浏览器的内置Math.random（）函数不需要任何参数。当被调用时，它总是返回 0 到 1 之间的随机数：

@@ -210,7 +204,7 @@ 
函数参数

 var newString = myText.replace('string', 'sausage');
-

Note:当您需要指定多个参数时，它们以逗号分隔。

+

备注： 当您需要指定多个参数时，它们以逗号分隔。

还应该注意，有时参数不是必须的 —— 您不必指定它们。如果没有，该功能一般会采用某种默认行为。作为示例，数组 join（）函数的参数是可选的：

@@ -223,8 +217,6 @@

函数参数

如果没有包含参数来指定加入/分隔符，默认情况下会使用逗号

- -

函数作用域和冲突

我们来谈一谈 {{glossary("scope")}}即作用域 — 处理函数时一个非常重要的概念。当你创建一个函数时，函数内定义的变量和其他东西都在它们自己的单独的范围内，意味着它们被锁在自己独立的隔间中，不能被函数外的代码访问。

@@ -233,8 +225,6 @@

函数作用域和冲突

JavaScript 由于各种原因而建立，但主要是由于安全性和组织性。有时您不希望变量可以在代码中的任何地方访问 - 您从其他地方调用的外部脚本可能会开始搞乱您的代码并导致问题，因为它们恰好与代码的其他部分使用了相同的变量名称，造成冲突。这可能是恶意的，或者是偶然的。

- -

例如，假设您有一个 HTML 文件，它调用两个外部 JavaScript 文件，并且它们都有一个使用相同名称定义的变量和函数：

<!-- Excerpt from my HTML -->
@@ -259,7 +249,7 @@ 
函数作用域和冲突

 
这两个函数都使用 greeting() 形式调用，但是你只能访问到 first.js 文件的greeting()函数（第二个文件被忽视了）。另外，第二次尝试使用 let 关键字定义 name 变量导致了一个错误。

 
 

-
Note: 您可以参考这个例子 running live on GitHub (查看完整 源代码).

+
备注： 您可以参考这个例子 running live on GitHub (查看完整 源代码).

 

 
 
将代码锁定在函数中的部分避免了这样的问题，并被认为是最佳实践。

@@ -349,16 +339,13 @@ 
主动学习：和 scope 玩耍

 
这次a()和b()调用都会返回那个令人讨厌的 "ReferenceError: z is not defined" error — 这是因为output()函数的调用和输出变量的定义不在同一个函数作用域内 - 变量对这些函数调用是不可见的。

 
 

-
注意:相同的范围规则不适用于循环（for（）{...}）和条件块（if（）{...}） - 它们看起来非常相似，但它们不一样！小心不要让这些困惑。

+
备注： 相同的范围规则不适用于循环（for（）{...}）和条件块（if（）{...}） - 它们看起来非常相似，但它们不一样！小心不要让这些困惑。

 

 
 

-
注意：ReferenceError：“x”未定义错误是您遇到的最常见的错误。如果您收到此错误，并且确定您已经定义了该问题的变量，请检查它的范围。

+
备注： ReferenceError：“x”未定义错误是您遇到的最常见的错误。如果您收到此错误，并且确定您已经定义了该问题的变量，请检查它的范围。

 

 
-
-
 
函数内部的函数

 
 
请记住，您可以从任何地方调用函数，甚至可以在另一个函数中调用函数。这通常被用作保持代码整洁的方式 - 如果您有一个复杂的函数，如果将其分解成几个子函数，它更容易理解：

diff --git a/files/zh-cn/learn/javascript/building_blocks/index.html b/files/zh-cn/learn/javascript/building_blocks/index.html
index a6289376073df3..c69580638e21c2 100644
--- a/files/zh-cn/learn/javascript/building_blocks/index.html
+++ b/files/zh-cn/learn/javascript/building_blocks/index.html
@@ -1,6 +1,6 @@
 ---
 title: 创建 JavaScript 代码块
-slug: learn/JavaScript/Building_blocks
+slug: Learn/JavaScript/Building_blocks
 tags:
   - JavaScript
   - 事件
@@ -25,7 +25,7 @@ 
预备知识

 
在开始这部分模块之前，你应该熟悉基本的 HTML 和 CSS, 并且已经看完我们之前的模块：JavaScript 第一步。

 
 

-
注: 如果你在使用无法创建自己文件的电脑/平板/其他设备,你可以试试在线编辑器，例如 JSBin 或 Glitch.

+
备注： 如果你在使用无法创建自己文件的电脑/平板/其他设备,你可以试试在线编辑器，例如 JSBin 或 Glitch.

 

 
 
指南

diff --git a/files/zh-cn/learn/javascript/building_blocks/looping_code/index.html b/files/zh-cn/learn/javascript/building_blocks/looping_code/index.html
index 18aa704d6d828d..dd2e72d985ffe5 100644
--- a/files/zh-cn/learn/javascript/building_blocks/looping_code/index.html
+++ b/files/zh-cn/learn/javascript/building_blocks/looping_code/index.html
@@ -1,6 +1,6 @@
 ---
 title: 循环吧代码
-slug: learn/JavaScript/Building_blocks/Looping_code
+slug: Learn/JavaScript/Building_blocks/Looping_code
 tags:
   - JavaScript
   - break
@@ -37,8 +37,7 @@ 
来一起循环

 
 
让我们来想一下下图，这位农夫考虑为他的家庭做一周的食物计划，他或许就需要执行一段循环：

 
-


-  

+

 
 
一段循环通常需要一个或多个条件：

 
@@ -50,7 +49,7 @@ 
来一起循环

 
 
在 {{glossary("伪代码")}} 中，这看起来就像下面这样：

 
-
loop(food = 0; foodNeeded = 10) {
+
loop(food = 0; foodNeeded = 10) {
   if (food = foodNeeded) {
     exit loop;
     // 我们有足够的食物了，回家吧。
@@ -70,10 +69,7 @@ 
为何？

 
 
让我们来看一个例子来完美地说明为什么循环是一件好事。假设我们想在{{htmlelement("canvas")}}元素上绘制 100 个随机圆（按更新按钮一次又一次地运行示例以查看不同的随机集）：

 
-
 
-
{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

+
{{ EmbedLiveSample('为何？', '100%', 400) }}

 
 
您现在不需要理解所有代码，但我们来看看实际绘制 100 个圆的那部分代码：

 
@@ -152,15 +147,11 @@ 
Hidden code

 }
 

 
-
 

-
 
    
  
  • random(),在前面的代码中定义过了，返回一个 0 到 x-1 间的整数。
    • 
  
  • WIDTH 和HEIGHT 浏览器内部窗口的宽度和高度。
    • 
 

 
-
 

-
 
您应该有一个基本的想法 - 我们使用一个循环来运行这个代码的 100 次迭代，其中每一个在页面上的随机位置绘制一个圆。无论我们绘制 100 个圆，1000 还是 10,000，所需的代码量将是相同的。只有一个数字必须改变。

 
 
如果我们在这里没有使用循环，我们必须为我们想要绘制的每个圆重复以下代码：

@@ -208,10 +199,7 @@ 
循环的标准

 
 
这给我们以下输出：

 
-
 
-
{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}

+
{{ EmbedLiveSample('循环的标准', '100%', 60, "", "", "hide-codepen-jsfiddle") }}

 
 

-
注: 您可以在 GitHub 上找到这段示例代码。 （也可以在线运行）。

+
备注： 您可以在 GitHub 上找到这段示例代码。 （也可以在线运行）。

 

 
 
这显示了一个循环用于迭代数组中的项目，并与每个项目进行一些操作 - JavaScript 中非常常见的模式。这里：

@@ -264,11 +252,11 @@ 
Hidden code 2

 
 
 

-
注: 我们将退出条件设为< cats.length，而不是<= cats.length是因为计算机从 0 开始，而不是 1 - 开始时i是 0，并且逐步增加到 i = 4（最后一个数组的索引）。 cats.length返回 5，因为数组中有 5 个项目，但是我们不希望达到i = 5，因为这将返回未定义的最后一个项目（没有索引为 5 的数组项目）。所以我们想要比cats.length（i <）少 1，而不是cats.length（i <=）。

+
备注： 我们将退出条件设为< cats.length，而不是<= cats.length是因为计算机从 0 开始，而不是 1 - 开始时i是 0，并且逐步增加到 i = 4（最后一个数组的索引）。 cats.length返回 5，因为数组中有 5 个项目，但是我们不希望达到i = 5，因为这将返回未定义的最后一个项目（没有索引为 5 的数组项目）。所以我们想要比cats.length（i <）少 1，而不是cats.length（i <=）。

 

 
 

-
注:  退出条件的一个常见错误是使它们使用“等于”(===) 而不是说“小于或等于”(<=)。如果我们想要运行我的循环到i = 5，退出条件将需要是i <= cats.length。如果我们设置为i === cats.length，循环将不会运行，因为在第一次循环迭代时 i 不等于 5，所以循环会立即停止。

+
备注： 退出条件的一个常见错误是使它们使用“等于”(===) 而不是说“小于或等于”(<=)。如果我们想要运行我的循环到i = 5，退出条件将需要是i <= cats.length。如果我们设置为i === cats.length，循环将不会运行，因为在第一次循环迭代时 i 不等于 5，所以循环会立即停止。

 

 
 
我们留下的一个小问题是最后的输出句子形式不是很好：

@@ -288,21 +276,20 @@ 
Hidden code 2

 }

 
 

-
注: 您可以在 GitHub 上找到这个例子。（也可以在线运行）

+
备注： 您可以在 GitHub 上找到这个例子。（也可以在线运行）

 

 
 

-
重要： 使用for- 与所有循环一样，您必须确保初始化程序被迭代，以便最终达到退出条件。如果没有，循环将永不停止，浏览器将强制它停止，否则会崩溃。这被称为无限循环。

+
警告： 使用for- 与所有循环一样，您必须确保初始化程序被迭代，以便最终达到退出条件。如果没有，循环将永不停止，浏览器将强制它停止，否则会崩溃。这被称为无限循环。

 

 
-
使用 break 退出循环

+
使用 break 退出循环

 
 
如果要在所有迭代完成之前退出循环，可以使用 break 语句。当我们查看 switch 语句时，我们已经在上一篇文章中遇到过这样的情况 - 当 switch 语句中符合输入表达式的情况满足时，break 语句立即退出 switch 语句并移动到代码之后。

 
 
与循环相同 - break 语句将立即退出循环，并使浏览器移动到跟随它的任何代码。

 
-
说我们想搜索一系列联系人和电话号码，只返回我们想要找的号码？首先，一些简单的 HTML - 一个文本{{htmlelement("input")}}，允许我们输入一个名称来搜索，一个{{htmlelement("button")}}元素来提交搜索，以及一个{{htmlelement ("p")}}元素显示结果：

-  

+
说我们想搜索一系列联系人和电话号码，只返回我们想要找的号码？首先，一些简单的 HTML - 一个文本{{htmlelement("input")}}，允许我们输入一个名称来搜索，一个{{htmlelement("button")}}元素来提交搜索，以及一个{{htmlelement ("p")}}元素显示结果：

 
 
<label for="search">Search by contact name: </label>
 <input id="search" type="text">
@@ -332,10 +319,7 @@ 
使用 break 退出循环

   }
 });

 
-
 
-
{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+
{{ EmbedLiveSample('使用 break 退出循环', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

 
 
    
  
  1. 首先我们有一些变量定义 - 我们有一个联系信息数组，每个项目是一个字符串，包含一个以冒号分隔的名称和电话号码。
    2. 
@@ -396,7 +379,7 @@ 
    Hidden code 3
    
 

 
 

-
注：您可以在 GitHub 上找到这个例子或在线运行。

+
备注： 您可以在 GitHub 上找到这个例子或在线运行。

 

 
 
使用 continue 跳过迭代

@@ -418,10 +401,7 @@ 
使用 continue 跳过迭代

 
 
Here's the output:

 
-
 
-
{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+
{{ EmbedLiveSample('使用 continue 跳过迭代', '100%', 100) }}

 
 
    
  
  1. 在这种情况下，输入应为数字（num）。for 循环给定一个从 1 开始的计数器（在这种情况下，我们对 0 不感兴趣），一个退出条件，当计数器大于输入num时循环将停止，并且迭代器的计数器将每次增加 1。
    2. 
@@ -474,7 +453,7 @@ 
    Hidden code 4
    
 

 
 

-
注：您可以在 GitHub 上查看完整代码，或者在线运行。

+
备注： 您可以在 GitHub 上查看完整代码，或者在线运行。

 

 
 
while 语句和 do ... while 语句

@@ -509,7 +488,7 @@ 
while 语句和 do ... while 语句
 
 

-
Note: This still works just the same as expected — have a look at it running live on GitHub (also view the full source code).

+
备注： This still works just the same as expected — have a look at it running live on GitHub (also view the full source code).

 

 
 
do...while循环非常类似但在 while 后提供了终止条件：

@@ -540,11 +519,11 @@ 
while 语句和 do ... while 语句
 
 

-
Note: 再一次，它正如我们期望的那样工作 — 看一看它在Github 在线运行 (或者查看完整源代码).

+
备注： 再一次，它正如我们期望的那样工作 — 看一看它在Github 在线运行 (或者查看完整源代码).

 

 
 

-
Important: 使用 while 和 do...while — 所有循环都一样 — 你必须保证初始变量是迭代的，那么它才会逐渐地达到退出条件。不然，它将会永远循环下去，要么浏览器会强制终止它，要么它自己会崩溃。这称为无限循环。

+
警告： 使用 while 和 do...while — 所有循环都一样 — 你必须保证初始变量是迭代的，那么它才会逐渐地达到退出条件。不然，它将会永远循环下去，要么浏览器会强制终止它，要么它自己会崩溃。这称为无限循环。

 

 
 
主动学习：启动倒计时！

@@ -572,10 +551,7 @@ 
主动学习：启动倒计时！
如果您犯了错误，您可以随时使用“重置”按钮重置该示例。如果你真的卡住了，请按“显示解决方案”来查看解决方案。

 
-
 
-
{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}

+
{{ EmbedLiveSample('主动学习：启动倒计时！', '100%', 880) }}

 
 
主动学习：填写来宾列表

 
@@ -653,10 +628,7 @@ 
主动学习：填写来宾列表
如果您犯了错误，您可以随时使用“重置”按钮重置该示例。如果你真的卡住了，请按“显示解决方案”来查看解决方案。

 
-
 
-
{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}

+
{{ EmbedLiveSample('主动学习：填写来宾列表', '100%', 680) }}

 
 
应该使用哪种循环类型？

 
@@ -741,7 +712,7 @@ 
应该使用哪种循环类型？
我们建议使用for，因为它可能是最简单地帮你记住一切 - 初始化程序，退出条件和最终表达式都必须整齐地放入括号，所以很容易看到他们在哪里并检查你没有丢失他们。

 
 

-
注：还有其他循环类型/特性，这些特性在 高级/专门 的情况下是有用的，超出了本文的范围。如果您想进一步了解循环学习，请阅读我们的高级循环和迭代指南。

+
备注： 还有其他循环类型/特性，这些特性在 高级/专门 的情况下是有用的，超出了本文的范围。如果您想进一步了解循环学习，请阅读我们的高级循环和迭代指南。

 

 
 
结论

@@ -758,14 +729,12 @@ 
相关链接

  
  • while and do...while references
    • 
  
  • break and continue references
    • 
  
  • 
-  
    What’s the Best Way to Write a JavaScript For Loop? — some advanced loop best practices
    
+  
    What's the Best Way to Write a JavaScript For Loop? — some advanced loop best practices
    
  
    • 
 
 
 
    {{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
    
 
-
     
    
-
 
    在本单元中
    
 
 
-
-
     
    
diff --git a/files/zh-cn/learn/javascript/building_blocks/return_values/index.html b/files/zh-cn/learn/javascript/building_blocks/return_values/index.html
index a3ac76803c01a2..028489f726778a 100644
--- a/files/zh-cn/learn/javascript/building_blocks/return_values/index.html
+++ b/files/zh-cn/learn/javascript/building_blocks/return_values/index.html
@@ -1,6 +1,6 @@
 ---
 title: 函数返回值
-slug: learn/JavaScript/Building_blocks/Return_values
+slug: Learn/JavaScript/Building_blocks/Return_values
 tags:
   - JavaScript
   - 函数
@@ -132,7 +132,7 @@ 
    主动学习：我们自
 
 
 
    
-
    Note:如果你有麻烦让例子工作，对比GitHub 的已完成版检查你的代码（或看它在线运行），或寻求我们的帮助。
    
+
    备注： 如果你有麻烦让例子工作，对比GitHub 的已完成版检查你的代码（或看它在线运行），或寻求我们的帮助。
    
 
    
 
 
    在这一点上，我们希望您编写一个自己的几个函数，并将它们添加到库中。这个数的平方根或立方根，或一个圆的周长和半径是多少？
    

From e9429217517503916913cb75f38321a1f64f32cd Mon Sep 17 00:00:00 2001
From: allo 
Date: Thu, 4 Aug 2022 17:07:08 +0800
Subject: [PATCH 2/3] move to .md for Building_blocks

---
 .../build_your_own_function/{index.html => index.md}              | 0
 .../building_blocks/conditionals/{index.html => index.md}         | 0
 .../javascript/building_blocks/events/{index.html => index.md}    | 0
 .../javascript/building_blocks/functions/{index.html => index.md} | 0
 .../learn/javascript/building_blocks/{index.html => index.md}     | 0
 .../building_blocks/looping_code/{index.html => index.md}         | 0
 .../building_blocks/return_values/{index.html => index.md}        | 0
 7 files changed, 0 insertions(+), 0 deletions(-)
 rename files/zh-cn/learn/javascript/building_blocks/build_your_own_function/{index.html => index.md} (100%)
 rename files/zh-cn/learn/javascript/building_blocks/conditionals/{index.html => index.md} (100%)
 rename files/zh-cn/learn/javascript/building_blocks/events/{index.html => index.md} (100%)
 rename files/zh-cn/learn/javascript/building_blocks/functions/{index.html => index.md} (100%)
 rename files/zh-cn/learn/javascript/building_blocks/{index.html => index.md} (100%)
 rename files/zh-cn/learn/javascript/building_blocks/looping_code/{index.html => index.md} (100%)
 rename files/zh-cn/learn/javascript/building_blocks/return_values/{index.html => index.md} (100%)

diff --git a/files/zh-cn/learn/javascript/building_blocks/build_your_own_function/index.html b/files/zh-cn/learn/javascript/building_blocks/build_your_own_function/index.md
similarity index 100%
rename from files/zh-cn/learn/javascript/building_blocks/build_your_own_function/index.html
rename to files/zh-cn/learn/javascript/building_blocks/build_your_own_function/index.md
diff --git a/files/zh-cn/learn/javascript/building_blocks/conditionals/index.html b/files/zh-cn/learn/javascript/building_blocks/conditionals/index.md
similarity index 100%
rename from files/zh-cn/learn/javascript/building_blocks/conditionals/index.html
rename to files/zh-cn/learn/javascript/building_blocks/conditionals/index.md
diff --git a/files/zh-cn/learn/javascript/building_blocks/events/index.html b/files/zh-cn/learn/javascript/building_blocks/events/index.md
similarity index 100%
rename from files/zh-cn/learn/javascript/building_blocks/events/index.html
rename to files/zh-cn/learn/javascript/building_blocks/events/index.md
diff --git a/files/zh-cn/learn/javascript/building_blocks/functions/index.html b/files/zh-cn/learn/javascript/building_blocks/functions/index.md
similarity index 100%
rename from files/zh-cn/learn/javascript/building_blocks/functions/index.html
rename to files/zh-cn/learn/javascript/building_blocks/functions/index.md
diff --git a/files/zh-cn/learn/javascript/building_blocks/index.html b/files/zh-cn/learn/javascript/building_blocks/index.md
similarity index 100%
rename from files/zh-cn/learn/javascript/building_blocks/index.html
rename to files/zh-cn/learn/javascript/building_blocks/index.md
diff --git a/files/zh-cn/learn/javascript/building_blocks/looping_code/index.html b/files/zh-cn/learn/javascript/building_blocks/looping_code/index.md
similarity index 100%
rename from files/zh-cn/learn/javascript/building_blocks/looping_code/index.html
rename to files/zh-cn/learn/javascript/building_blocks/looping_code/index.md
diff --git a/files/zh-cn/learn/javascript/building_blocks/return_values/index.html b/files/zh-cn/learn/javascript/building_blocks/return_values/index.md
similarity index 100%
rename from files/zh-cn/learn/javascript/building_blocks/return_values/index.html
rename to files/zh-cn/learn/javascript/building_blocks/return_values/index.md

From 69e2b3bcb33e2c5a45c0a8f01b83757049bb3456 Mon Sep 17 00:00:00 2001
From: allo 
Date: Thu, 4 Aug 2022 17:07:21 +0800
Subject: [PATCH 3/3] convert to markdown for Building_blocks

---
 .../build_your_own_function/index.md          | 435 ++++++-----
 .../building_blocks/conditionals/index.md     | 571 +++++++-------
 .../building_blocks/events/index.md           | 540 +++++++-------
 .../building_blocks/functions/index.md        | 413 +++++-----
 .../learn/javascript/building_blocks/index.md |  50 +-
 .../building_blocks/looping_code/index.md     | 706 +++++++++---------
 .../building_blocks/return_values/index.md    | 228 +++---
 7 files changed, 1543 insertions(+), 1400 deletions(-)

diff --git a/files/zh-cn/learn/javascript/building_blocks/build_your_own_function/index.md b/files/zh-cn/learn/javascript/building_blocks/build_your_own_function/index.md
index 2d38c113c437a7..c5c16738db42ea 100644
--- a/files/zh-cn/learn/javascript/building_blocks/build_your_own_function/index.md
+++ b/files/zh-cn/learn/javascript/building_blocks/build_your_own_function/index.md
@@ -9,61 +9,106 @@ tags:
   - 教程
 translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function
 ---
-
    {{LearnSidebar}}
    
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
 
-
    {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
    
-
-
    我们在之前的文章里大多学的是理论，这篇文章将提供一个练习的机会——您将练习构建一些您自己风格的函数。在练习过程中，我们也会解释一些针对函数的更深层的实用细节。
    
+我们在之前的文章里大多学的是理论，这篇文章将提供一个练习的机会——您将练习构建一些您自己风格的函数。在练习过程中，我们也会解释一些针对函数的更深层的实用细节。
 
 
- 
-  
-   
-   
-  
-  
-   
-   
-  
- 
+  
+    
+      
+      
+    
+    
+      
+      
+    
+  
    先修知识：基本的电脑常识，对于 HTML 和 CSS 的基本了解， JavaScript 第一步， 函数 - 可复用代码块。
    目标：提供一些练习来构建一个传统的函数，并解释一些有用的相关细节。
    先修知识：
+        基本的电脑常识，对于 HTML 和 CSS 的基本了解，
+        JavaScript 第一步，
+        函数 - 可复用代码块。
+      
    目标：提供一些练习来构建一个传统的函数，并解释一些有用的相关细节。
    
 
    
 
-
    先活跃下气氛：构建一个函数
    
+## 先活跃下气氛：构建一个函数
 
-
    我们将构建的传统函数将被命名为 displayMessage()，它向用户展示一个传统的消息盒子于 web 页面的顶部。它充当浏览器内建的 alert() 函数更有用的替代品。你已经看过了这个，但是我们回复一下我们的记忆——在你的浏览器的 JavaScript 控制台中，在任意一个页面里尝试以下代码
    
+我们将构建的传统函数将被命名为 `displayMessage()`，它向用户展示一个传统的消息盒子于 web 页面的顶部。它充当浏览器内建的 [alert()](/zh-CN/docs/Web/API/Window/alert) 函数更有用的替代品。你已经看过了这个，但是我们回复一下我们的记忆——在你的浏览器的 JavaScript 控制台中，在任意一个页面里尝试以下代码
 
-
    alert('This is a message');
    
+```js
+alert('This is a message');
+```
 
-
    这个函数只带有一个参数——在 alert box 中展示的字符串。您可以尝试改变字符串来改变消息。
    
+这个函数只带有一个参数——在 alert box 中展示的字符串。您可以尝试改变字符串来改变消息。
 
-
    这个alert()函数不是很好的：您可以alert()出这条信息，但是您不能很容易的表达其他内容，例如颜色，图标或者是其他东西。接下来我们将会构建一个更有趣的函数。
    
+这个`alert()`函数不是很好的：您可以`alert()`出这条信息，但是您不能很容易的表达其他内容，例如颜色，图标或者是其他东西。接下来我们将会构建一个更有趣的函数。
 
-
    
-
    备注： 这个例子能够在现代浏览器上很好的工作，但是这个风格在老的浏览器上并没那么有趣。我们建议你实现这个例子时在现代浏览器上，例如 Firefox，Opera 或者 Chrome 浏览器。
    
-
    
+> **备注：** 这个例子能够在现代浏览器上很好的工作，但是这个风格在老的浏览器上并没那么有趣。我们建议你实现这个例子时在现代浏览器上，例如 Firefox，Opera 或者 Chrome 浏览器。
 
-
    基本函数
    
+## 基本函数
 
-
    首先，让我们来组织一个基本的函数。
    
+首先，让我们来组织一个基本的函数。
 
-
    
-
    备注： 对于函数命名约定，应遵循与变量命名约定相同的规则。这很好，尽你所能理解它们之间的区别 - 函数名称后带有括号，而变量则没有。
    
-
    
+> **备注：** 对于函数命名约定，应遵循与[变量命名约定](/en-US/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules)相同的规则。这很好，尽你所能理解它们之间的区别 - 函数名称后带有括号，而变量则没有。
+
+1.  我们希望您首先访问[function-start.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html)文件并创建一个本地拷贝。您将会看到这个 HTML 很简单 — 我们的 body 块仅包含一个按钮。我们还提供了一些基本的 CSS 来装饰自定义消息框，以及一个用于放置 JavaScript 代码的{{htmlelement("script")}}元素。
+2.  接下来，将下面的代码添加至 `
+  
+
+```
+
+{{ EmbedLiveSample('事件对象', '100%', 400) }}
+
+你遇到的大多数事件处理器的事件对象都有可用的标准属性和函数（方法）（请参阅完整列表 `Event` 对象引用）。然而，一些更高级的处理程序会添加一些专业属性，这些属性包含它们需要运行的额外数据。例如，媒体记录器 API 有一个`dataavailable`事件，它会在录制一些音频或视频时触发，并且可以用来做一些事情 (例如保存它，或者回放)。对应的`ondataavailable`处理程序的事件对象有一个可用的数据属性。
+
+### 阻止默认行为
+
+有时，你会遇到一些情况，你希望事件不执行它的默认行为。最常见的例子是 Web 表单，例如自定义注册表单。当你填写详细信息并按提交按钮时，自然行为是将数据提交到服务器上的指定页面进行处理，并将浏览器重定向到某种“成功消息”页面（或 相同的页面，如果另一个没有指定。）
+
+当用户没有正确提交数据时，麻烦就来了 - 作为开发人员，你希望停止提交信息给服务器，并给他们一个错误提示，告诉他们什么做错了，以及需要做些什么来修正错误。一些浏览器支持自动的表单数据验证功能，但由于许多浏览器不支持，因此建议你不要依赖这些功能，并实现自己的验证检查。我们来看一个简单的例子。
+
+首先，一个简单的 HTML 表单，需要你填入名（first name）和姓（last name）
+
+```html
+
    
+  
    
+    
+    
+  
    
+  
    
+    
+    
+  
    
+  
    
+     
+  
    
+
    
+
    
+```
+
+```css hidden
+div {
   margin-bottom: 10px;
 }
-
    +``` -

    这里我们用一个onsubmit事件处理程序（在提交的时候，在一个表单上发起submit事件）来实现一个非常简单的检查，用于测试文本字段是否为空。如果是，我们在事件对象上调用preventDefault()函数，这样就停止了表单提交，然后在我们表单下面的段落中显示一条错误消息，告诉用户什么是错误的：

    +这里我们用一个`onsubmit`事件处理程序（在提交的时候，在一个表单上发起`submit`事件）来实现一个非常简单的检查，用于测试文本字段是否为空。如果是，我们在事件对象上调用`preventDefault()`函数，这样就停止了表单提交，然后在我们表单下面的段落中显示一条错误消息，告诉用户什么是错误的： -
    const form = document.querySelector('form');
+```js
+const form = document.querySelector('form');
 const fname = document.getElementById('fname');
 const lname = document.getElementById('lname');
 const submit = document.getElementById('submit');
@@ -362,35 +384,37 @@ form.onsubmit = function(e) {
     e.preventDefault();
     para.textContent = 'You need to fill in both names!';
   }
-}
    +} +``` -

    显然，这是一种非常弱的表单验证——例如，用户输入空格或数字提交表单，表单验证并不会阻止用户提交——这不是我们例子想要达到的目的。输出如下：

    +显然，这是一种非常弱的表单验证——例如，用户输入空格或数字提交表单，表单验证并不会阻止用户提交——这不是我们例子想要达到的目的。输出如下： -

    {{ EmbedLiveSample('阻止默认行为', '100%', 140) }}

    +{{ EmbedLiveSample('阻止默认行为', '100%', 140) }} -
    -

    备注： 查看完整的源代码 preventdefault-validation.html (也可以 running live )

    -
    +> **备注：** 查看完整的源代码 [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html) (也可以 [running live](http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html) ) -

    事件冒泡及捕获

    +### 事件冒泡及捕获 -

    最后即将介绍的这个主题你常常不会深究，但如果你不理解这个主题，就会十分痛苦。事件冒泡和捕捉是两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。为了容易理解，我们来看一个例子——在新标签页打开这个show-video-box.html 例子（在这里可以查看源码 source code）。也可以在下面查看：

    +最后即将介绍的这个主题你常常不会深究，但如果你不理解这个主题，就会十分痛苦。事件冒泡和捕捉是两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。为了容易理解，我们来看一个例子——在新标签页打开这个[show-video-box.html](http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html) 例子（在这里可以查看源码 [source code](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)）。也可以在下面查看： -

    {{ EmbedLiveSample('事件冒泡及捕获', '100%', 500) }}

    +{{ EmbedLiveSample('事件冒泡及捕获', '100%', 500) }} -

    这是一个非常简单的例子，它显示和隐藏一个包含<video>元素的<div>元素：

    +这是一个非常简单的例子，它显示和隐藏一个包含`