Skip to content

Commit 132d494

Browse files
chenyinkaichenyinkai
authored
Merge pull request javascript-tutorial#4 from javascript-tutorial/master
docs: sync
2 parents 8766ed6 + ba6152c commit 132d494

62 files changed

Lines changed: 957 additions & 1415 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/PULL_REQUEST_TEMPLATE.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
你所看到的是一个 Pull Request 模板。（请删除此行，并请按实际情况修改下面内容，然后提交~）
2+
3+
#### 目标章节：1-js/01-getting-started/1-intro
4+
5+
#### 所做更改如下：
6+
7+
文件名 | 参考上游 commit | 更改（理由）
8+
-|-|-
9+
article.md | a23882d | 修改部分错误
10+
limitations.png | 8f13d61 | 新增图片

‎1-js/02-first-steps/01-hello-world/1-hello-alert/task.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ importance: 5
66

77
创建一个页面，然后显示一个消息 “I'm JavaScript!”。
88

9-
在沙箱中或者在你的硬盘上做这件事都无所谓，只要确保它有效。
9+
在沙箱中或者在你的硬盘上做这件事都无所谓，只要确保它能运行起来。
1010

1111
[demo src="solution"]
1212

‎1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ importance: 5
44

55
# 使用外部的脚本显示一个提示语
66

7-
打开前一个任务 <info:task/hello-alert> 的解决方案。将脚本的内容提取到一个外部的 `alert.js` 文件中，放置在相同的文件夹中。
7+
打开前一个任务 <info:task/hello-alert> 的答案。将脚本的内容提取到一个外部的 `alert.js` 文件中，放置在相同的文件夹中。
88

99
打开页面，确保它能够工作。

‎1-js/02-first-steps/01-hello-world/article.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
# Hello, world!
22

3-
你现在所阅读的这个教程是 JavaScript 的核心内容，这部分内容是平台无关的。接下来，你将会学习 Node.js 以及使用 Node.js 的其他平台。
3+
你现在所阅读的这个教程是 JavaScript 的核心内容，这部分内容是平台无关的。接下来，你将会学习 Node.js 以及使用 JavaScript 的其他平台。
44

55
但是，我们需要一个工作环境来运行代码，由于本书是在线的，所以浏览器是一个不错的选择。我们会尽可能少地使用浏览器特定的命令（比如 `alert`），所以如果你打算使用如 Node.js 的其他环境，你不必多花时间来关心这些特定指令。另一方面，浏览器的具体细节我们会在教程的[下一部分](/ui)介绍。
66

7-
首先，让我们看看如何将脚本添加到网页上。对于服务器端环境，你只需要使用诸如 `"node my.js"` 的 Node.js 的命令行来执行它。
7+
首先，让我们看看如何将脚本添加到网页上。对于服务器端环境（如 Node.js），你只需要使用诸如 `"node my.js"` 的命令行来执行它。
88

99
## "script" 标签
1010

@@ -46,10 +46,10 @@ JavaScript 程序可以使用 `<script>` 标签插入到 HTML 的任何地方。
4646

4747
`type` 属性：<code>&lt;script <u>type</u>=...&gt;</code>
4848

49-
: 在老的 HTML4 标准中，`<script>` 标签有 type 属性。通常是 `type="text/javascript"`。现在的 HTML 标准已经默认存在该 `type` 属性。该属性不是必须的。
49+
: 在老的 HTML4 标准中，`<script>` 标签有 type 属性。通常是 `type="text/javascript"`。这样的属性声明以及不再需要。而且，现代 HTML 标准 —— HTML5 已经完全改变了此属性的实际含义。现在，该属性可以被用于 JavaScript 模块。但那是一个高级一点的话题，我们将会在此教程的另外章节中叙述模块。
5050

5151
`language` 属性：<code>&lt;script <u>language</u>=...&gt;</code>
52-
: 这个属性是为了显示脚本使用的语言。就目前而言，这个属性没有任何意义，语言默认为 JavaScript。不再需要使用它了。
52+
: 这个属性是为了显示脚本使用的语言。这个属性已没有任何意义，因为语言默认就是 JavaScript。不再需要使用它了。
5353

5454
脚本前后的注释。
5555
: 在非常古老的书籍和指南中，可能会在 `<script>` 标签里面找到注释，就像这样：
@@ -60,7 +60,7 @@ JavaScript 程序可以使用 `<script>` 标签插入到 HTML 的任何地方。
6060
//--></script>
6161
```
6262

63-
这些注释是给不支持 `<script>` 标签的古老浏览器用来隐藏代码的。但是所有在过去的 15+ 年中诞生的浏览器都没有任何问题。只是因为它作为一个标志，所以我们在这里提到。如果你在某个地方看到了它，那么这些代码可能非常古老，也不值得我们去研究。
63+
此用法不能再现代 JavaScript 中使用。这些注释是给不支持 `<script>` 标签的古老浏览器用来隐藏代码的。由于所有在过去15年中发布的浏览器都没有这样的问题，这种注释能帮你辨认出一些老掉牙的代码。
6464

6565

6666
## 外部脚本
@@ -98,17 +98,17 @@ JavaScript 程序可以使用 `<script>` 标签插入到 HTML 的任何地方。
9898
9999
之后，其他页面想要相同的脚本就会从缓存中获取，而不是下载它。所以文件实际上只会下载一次。
100100
101-
这可以节省流量，并使得页面更快。
101+
这可以节省流量，并使得页面（加载）更快。
102102
```
103103

104-
````warn header="如果设置了 `src`属性，`script` 标签内容将会忽略。"
104+
````warn header="如果设置了 `src` 属性，`script` 标签内容将会忽略。"
105105
单独的一个 `<script>` 标签不能同时有 src 属性以及内部包裹代码。
106106

107107
这将不会工作：
108108

109109
```html
110110
<script *!*src*/!*="file.js">
111-
alert(1); // the content is ignored, because src is set
111+
alert(1); // 此内容会被忽略，因为 src 被设定了
112112
</script>
113113
```
114114

@@ -131,4 +131,4 @@ JavaScript 程序可以使用 `<script>` 标签插入到 HTML 的任何地方。
131131
- 外部的脚本可以通过 `<script src="path/to/script.js"></script>` 这种方式插入。
132132
133133
134-
有关浏览器脚本以及它们和网页的关系，还有很多可学的。但是请记住，这部分教程主要是针对 JavaScript 语言的，所以我们不该分散自己的注意力。我们使用浏览器作为运行 JavaScript 的一种方式，非常便于我们在线阅读。
134+
有关浏览器脚本以及它们和网页的关系，还有很多可学的。但是请记住，这部分教程主要是针对 JavaScript 语言的，所以我们不该被浏览器特定的实现分散自己的注意力。我们将使用浏览器作为运行 JavaScript 的一种方式，这种方式非常便于我们在线阅读，但只是很多种方式中的其中一种。

‎1-js/02-first-steps/02-structure/article.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ alert(3 +
6161
6262
不需要考虑方括号 `[]` 和 `forEach` 的含义，我们接下来会学习它们，现在它们并不重要。让我们记住最终结果：先显示 `1`，然后显示 `2`。
6363
64-
现在我们在代码前面加入一个 `alert`，并且不用分号结束它。
64+
现在我们在代码前面加入一个 `alert`，并且不用分号结束它：
6565
6666
```js run no-beautify
6767
alert("There will be an error")
@@ -83,7 +83,7 @@ alert("All fine now");
8383
8484
出现无分号变量的错误，是因为 JavaScript 并不在方括号 `[...]` 前添加一个隐式的分号。
8585
86-
所以，因为分号并不会自动插入，第一个例子被视为一条简单的语句，我们从引擎看到的是这样子的：
86+
所以，因为分号并不会自动插入，第一个例子中的代码被视为一条简单的语句，我们从引擎看到的是这样子的：
8787
8888
```js run no-beautify
8989
alert("There will be an error")[1, 2].forEach(alert)
@@ -92,13 +92,13 @@ alert("There will be an error")[1, 2].forEach(alert)
9292
但它应该是两条语句，而不是一条。这种情况下的合并是不对的，所以才会造成错误。诸如此类，还有很多。
9393
````
9494

95-
如果语句被换行分割，非常建议在语句之间添加分号。这个规则被社区广泛采纳。让我们再次强调 —— 大部分时候可以省略分号，但是最好是，尤其对于新手，加上它。
95+
即使语句被换行符分隔了，我们依然建议在它们之间加分号。这个规则被社区广泛采纳。让我们再次强调 —— 大部分时候可以省略分号，但是最好是，尤其对于新手，加上它。
9696

9797
## 注释
9898

99-
随着时间推移，程序变得越来越复杂。为代码添加**注释**来描述发生了什么（What happens）和为什么（Why），变得非常有必要了。
99+
随着时间推移，程序变得越来越复杂。为代码添加**注释**来描述它做什么和为什么（要这样做），变得非常有必要了。
100100

101-
注释可以在脚本的任何地方添加，它们并不会影响代码的执行，因为引擎会简单地忽略它们。
101+
注释可以在脚本的任何地方添加，它们并不会影响代码的执行，因为引擎会直接忽略它们。
102102

103103
**单行注释以两个正斜杠字符 `//` 开始。**
104104

@@ -156,4 +156,4 @@ alert( 'World' );
156156

157157
注释会增加代码总量，但这一点也不是问题。有很多工具可以在你部署到服务器之前缩减代码。这些工具会移除注释，所以注释不会出现在发布的脚本中。所以，注释对我们的生产没有任何负面影响。
158158

159-
在进一步的教程中，会有一章 <info:coding-style> 的内容解释如何书写更好的注释。
159+
在进一步的教程中，会有一章 <info:code-quality> 的内容解释如何书写更好的注释。

‎1-js/02-first-steps/03-strict-mode/article.md‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# 新模式，"use strict"
1+
# 现代模式，"use strict"
22

33
长久以来，JavaScript 不断发展且并未带来任何兼容性问题。新特性被加入该语言，旧的功能也没有改变。
44

55
这么做有利于兼容旧代码，但缺点是 JavaScript 创造者的任何错误和不完美的考虑也永远地保留在了语言中。
66

7-
直到 2009 年 ECMAScript 5 (ES5) 的出现。ES5 规范增加了新的语言特性并且修改了一些已经存在的特性。为了保证旧的功能能够使用，大部分的修改是默认不生效的。你需要一个特殊的指令 —— `"use strict"` 来明确地使用这些特性。
7+
这样的情况持续到 2009 年 ECMAScript 5 (ES5) 的出现。ES5 规范增加了新的语言特性并且修改了一些已经存在的特性。为了保证旧的功能能够使用，大部分的修改是默认不生效的。你需要一个特殊的指令 —— `"use strict"` 来明确地使用这些特性。
88

99
## "use strict"
1010

@@ -15,7 +15,7 @@
1515
```js
1616
"use strict";
1717

18-
// 代码以新模式工作
18+
// 代码以现代模式工作
1919
...
2020
```
2121

@@ -47,15 +47,41 @@ alert("some code");
4747
一旦进入了严格模式，就没有退路了。
4848
```
4949
50+
## 浏览器控制台
51+
52+
以后，当你使用浏览器控制台去测试功能时，请注意 `use strict` 默认不会被启动。
53+
54+
有时，使用 `use strict` 产生影响的时候，你会得到错误的结果。
55+
56+
你可以试试按下 `key:Shift+Enter` 去输入多行代码，然后将 `use strict` 置顶，就像这样：
57+
58+
```js
59+
'use strict'; <Shift+Enter 换行>
60+
// ...你的代码
61+
<Enter 运行>
62+
```
63+
64+
它在大部分浏览器中都有效，即 Firefox 和 Chrome。
65+
66+
如果依然不行，那确保 `use strict` （有效）的最可靠方法是像这样将代码输入到控制台：
67+
68+
```js
69+
(function() {
70+
'use strict';
71+
72+
// ...你的代码...
73+
})()
74+
```
75+
5076
## 总是使用 "use strict"
5177

52-
使用 `"use strict"` 与“默认”模式的区别仍然有待完善。
78+
我们还没说到使用 `"use strict"` 与“默认”模式的区别。
5379

54-
在接下来的章节中，当我们学习语言功能时，我们会记录严格模式的差异。幸运的是，没有那么多。实际上，它们为我们编写代码提供了极大的便利。
80+
在接下来的章节中，当我们学习语言功能时，我们会标注严格模式与默认模式的差异。幸运的是，没有那么多。实际上，它们为我们编写代码提供了极大的便利。
5581

5682
当前，一般来说了解这些就够了：
5783

5884
1. `"use strict"` 指令将浏览器引擎转换为“现代”模式，改变一些内建特性的行为。我们会在之后的学习中了解这些细节。
59-
2. 严格模式通过顶部的 `"use strict"` 启用。一些新语言特性诸如 "classes" 和 "modules" 也会自动开启严格模式。
85+
2. 严格模式通过将 `"use strict"` 放置在整个脚本或函数的顶部来启用。一些新语言特性诸如 "classes" 和 "modules" 也会自动开启严格模式。
6086
3. 所有的现代浏览器都支持严格模式。
6187
4. 建议始终使用 `"use strict"` 启动脚本。本教程的所有例子都默认采用严格模式，除非特别指定（非常少）。

‎1-js/02-first-steps/04-variables/article.md‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# 变量
22

3-
大多数情况下，脚本需要处理信息。这有两个例子：
3+
大多数情况下，JavaScript 应用需要处理信息。这有两个例子：
44
1. 一个网上商店 —— 这里的信息可能包含正在售卖的商品和购物车
55
2. 一个聊天应用 —— 这里的信息可能包括用户、消息等等。
66

@@ -12,7 +12,7 @@
1212

1313
在 JavaScript 中创建一个变量，我们需要用到 `let` 关键字。
1414

15-
下面的语句创建（换句话说，**声明**或者**定义**）了一个名称为 "message" 的变量：
15+
下面的语句创建（换句话说，**声明**或者**定义**）了一个名称为“message”的变量：
1616

1717
```js
1818
let message;
@@ -70,7 +70,7 @@ let user = 'John',
7070
message = 'Hello';
7171
```
7272

73-
...甚至使用“逗号优先”的形式：
73+
……甚至使用“逗号优先”的形式：
7474

7575
```js no-beautify
7676
let user = 'John'
@@ -97,14 +97,13 @@ let user = 'John'
9797
9898
如果将变量想象成一个“数据”的盒子，盒子上有一个唯一的标注盒子名字的贴纸。这样我们能更轻松地掌握“变量”的概念。
9999
100-
例如，变量 `message` 可以被想象成一个标有 `"message"` 的盒子，在盒子里面，有一个值为 `"Hello!"`。
100+
例如，变量 `message` 可以被想象成一个标有 `"message"` 的盒子，在盒子里面，有一个值为 `"Hello!"`：
101101
102102
![](variable.png)
103103
104104
我们可以在盒子内放入任何值。
105105
106-
同样，我们也可以改变它。值可以根据需要多次改变。
107-
106+
同样，我们也可以改变它。值可以根据需要多次改变：
108107
```js run
109108
let message;
110109
@@ -141,14 +140,14 @@ alert(message); // Hello world!
141140
142141
在这种类型的语言中，一旦值保存在盒子中，就永远存在。如果你试图保存其他值，它会强制创建一个新盒子（声明一个新变量），无法重用先前的变量。
143142
144-
虽然看上去有点奇怪，但是这些语言有很大的发展潜力。不仅如此，在某些领域，比如并行计算，这个限制有一定的好处。研究这样的一门语言（即使不打算很快就用上它）有助于开阔视野。
143+
虽然第一次看上去有点奇怪，但是这些语言有很大的发展潜力。不仅如此，在某些领域，比如并行计算，这个限制有一定的好处。研究这样的一门语言（即使不打算很快就用上它）有助于开阔视野。
145144
```
146145
147146
## 变量命名 [#variable-naming]
148147
149148
JavaScript 的变量命名有两个限制：
150149
151-
1. 变量名称必须仅包含字母，数字，符号 `$` and `_`。
150+
1. 变量名称必须仅包含字母，数字，符号 `$` 和 `_`。
152151
2. 首字符必须非数字。
153152
154153
有效的命名，例如：
@@ -179,7 +178,7 @@ let 1a; // 不能以数字开始
179178
let my-name; // 连字符 '-' 不允许在命名中出现
180179
```
181180
182-
```smart header="大小写的影响"
181+
```smart header="区分大小写"
183182
命名为 `apple` 和 `AppLE` 的变量是不同的两个变量。
184183
```
185184
@@ -195,7 +194,7 @@ let 我 = '...';
195194
````
196195

197196
````warn header="保留字"
198-
有一长串的保留字无法用作变量命名，因为它们被语言本身采用了。
197+
有一张[保留字列表](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords)无法用作变量命名，因为它们被语言本身采用了。
199198
200199
比如，单词 `let`、`class`、`return`、`function` 被保留。
201200
@@ -228,7 +227,6 @@ alert(num); // 5
228227
num = 5; // error: num is not defined
229228
*/!*
230229
```
231-
232230
````
233231
234232
## 常量
@@ -256,7 +254,7 @@ myBirthday = '01.01.2001'; // 错误，不能对常量重新赋值
256254
257255
这些常量使用大写和下划线命名。
258256
259-
就像这样：
257+
例如，让我们以所谓“web”（十六进制）的格式为颜色声明常量：
260258
261259
```js run
262260
const COLOR_RED = "#F00";
@@ -275,9 +273,9 @@ alert(color); // #FF7F00
275273
- 比起 `COLOR_ORANGE` 而言，`"#FF7F00"` 更容易输错。
276274
- 阅读代码时，`COLOR_ORANGE` 比 `#FF7F00` 更有含义。
277275
278-
什么时候该为常量使用大写命名，什么时候常规命名。让我们弄清楚一点：
276+
什么时候该为常量使用大写命名，什么时候常规命名？让我们弄清楚一点：
279277
280-
作为一个常数，意味着值永远不变。但是有些常量在执行之前就已知了（比如红色的十六进制值），还有些在执行期间实时“计算”，赋值之后才不会改变。
278+
作为一个“常数”，意味着值永远不变。但是有些常量在执行之前就已知了（比如红色的十六进制值），还有些在执行期间被“计算”出来，但初始赋值之后就不会改变。
281279
282280
例如：
283281
```js
@@ -292,7 +290,7 @@ const pageLoadTime = /* time taken by a webpage to load */;
292290
293291
谈到变量，还有一件非常重要的事。
294292
295-
请合理地命名变量。如果有需要，花时间思考一下。
293+
一个变量名应该有一个清晰、明显的含义，描述了它存储的数据。
296294
297295
变量命名是编程过程中最重要和最复杂的技能之一。快速地浏览变量的命名就知道代码是一个初学者还是有经验的开发者书写的。
298296
@@ -314,7 +312,7 @@ const pageLoadTime = /* time taken by a webpage to load */;
314312
315313
结果是，这个变量就像是被扔进不同东西盒子，而没有改变它的贴纸。现在里面是什么？谁知道呢。我们需要靠近一点，然后检查它。
316314
317-
这样的程序员节省了一点变量声明的时间，但却在调试代码的时候损失数十倍。
315+
这样的程序员节省了一点变量声明的时间，但却在调试代码的时候损失数十倍时间。
318316
319317
额外声明一个变量绝对是利大于弊的。
320318

‎1-js/05-data-types/05-array-methods/9-shuffle/solution.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ JavaScript 引擎的代码结果可能会有所不同，但我们已经可以看
6262

6363
为什么它不起作用？一般来说，`sort` 是一个“黑匣子”：我们向其中抛出一个数组和一个比较函数，并期望数组被排序。由于比较的完全随机性，黑盒子变得复杂，它究竟发生了什么取决于引擎之间的具体实现。
6464

65-
还有其他很好的方法来完成这项任务。例如，有一个很好的算法叫做 [Fisher-Yates shuffle](https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle). The idea is to walk the array in the reverse order and swap each element with a random one before it:
65+
还有其他很好的方法来完成这项任务。例如，有一个很好的算法叫做 [Fisher-Yates shuffle](https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle)。其思路是：逆向遍历数组，并将每个子项与前面随机的一个子项互相交换：
6666

6767
```js
6868
function shuffle(array) {

‎1-js/11-async/03-promise-chaining/01-then-vs-catch/task.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
这两段代码片段是否相等？换句话说，对于任何处理函数在任何情况下，它们的行为方式是否相同？
44

55
```js
6-
promise.then(f1, f2);
6+
promise.then(f1).catch(f2);
77
```
88

99
对比：
1010
```js
11-
promise.then(f1).catch(f2);
11+
promise.then(f1, f2);
1212
```

‎1-js/11-async/03-promise-chaining/02-error-async/solution.md‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)