javascript-tutorial · ghost · Dec 4, 2021 · Dec 5, 2021 · Dec 15, 2021 · Dec 16, 2021
diff --git a/.gitattributes b/.gitattributes
@@ -1 +1,2 @@
 * text=auto eol=lf
+*.svg       binary
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,4 @@ sftp-config.json
 Thumbs.db


+/svgs
diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md
diff --git a/1-js/01-getting-started/1-intro/limitations.svg b/1-js/01-getting-started/1-intro/limitations.svg
diff --git a/1-js/01-getting-started/2-manuals-specifications/article.md b/1-js/01-getting-started/2-manuals-specifications/article.md
@@ -1,41 +1,37 @@

 # 手册与规范

-这本书是一个**教程**。它旨在帮助你逐渐掌握 JavaScript 这门语言。但是一旦你已经熟悉了这门语言的基础知识，你就会需要其他资料。
+这本书是一个 **教程**。它旨在帮助你由浅入深掌握 JavaScript 这门语言。但是，当你已经熟悉了这门语言的基础知识，你就会需要其他资料。

 ## 规范

-**ECMA-262 规范**包含了大部分深入的、详细的、规范化的关于 JavaScript 的信息。这份规范明确地定义了这门语言。
+**ECMA-262 规范** 包含了大部分深入的、详细的、规范化的关于 JavaScript 的信息。这份规范明确地定义了这门语言。

-但正因其规范化，对于新手来说难以理解。所以如果你需要知道关于这门语言细节最权威的信息来源，这份规范就很适合你（去阅读）。但是它并不适合日常使用。
+但正因其规范化，对于新手来说难以理解。所以，如果你需要关于这门语言细节最权威的信息来源，这份规范就很适合你（去阅读）。但它并不适合日常使用。

-最新的规范草案在此 <https://tc39.es/ecma262/>。
+每年都会发布一个新版本的规范。最新的规范草案请见 <https://tc39.es/ecma262/>。

-想要知道最新最前沿且将要“标准化”的功能，请看这里的提案 <https://github.com/tc39/proposals>。
+想了解最新最前沿的功能，包括“即将纳入规范的”（所谓的 "stage 3"），请看这里的提案 <https://github.com/tc39/proposals>。

-当然，如果你正在做浏览器相关的开发工作，那么本教程的 [第二节](info:browser-environment) 涵盖了其他规范。
+当然，如果你正在做浏览器相关的开发工作，那么本教程的 [第二部分](info:browser-environment) 涵盖了其他规范。

 ## 手册

- **MDN（Mozilla）JavaScript 索引**是一本带有用例和其他信息的手册。它是一个获取关于个别语言函数、方法等深入信息的很好的来源。
+- **MDN（Mozilla）JavaScript 索引** 是一个带有用例和其他信息的主要的手册。它是一个获取关于个别语言函数、方法等深入信息的很好的信息来源。

-    你可以在 <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference> 找到这本手册。
+    你可以在 <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference> 阅读它。

-    虽然，利用互联网搜索通常是最好的选择。只需在查询时输入“MDN [关键字]”，例如 <https://google.com/search?q=MDN+parseInt> 搜索 `parseInt` 函数。
-
- **MSDN** —— 一本微软的手册，它包含大量的信息，包括 JavaScript（在里面经常被写成 JScript）。如果有人需要关于 Internet Explorer 的规范细节，最好去看：<http://msdn.microsoft.com/>。
-
-    我们还可以在使用互联网搜索时使用如 “RegExp MSDN” 或 “RegExp MSDN jscript” 这样的词条。
+虽然，利用互联网搜索通常是最好的选择。只需在查询时输入“MDN [关键字]”，例如 <https://google.com/search?q=MDN+parseInt> 搜索 `parseInt` 函数。

 ## 兼容性表

-JavaScript 还是一门还在发展中的语言，经常会添加一些新的功能。
+JavaScript 是一门还在发展中的语言，定期会添加一些新的功能。

-如果想要获得一些关于浏览器和其他引擎的兼容性信息，请看：
+要查看它们在基于浏览器的引擎及其他引擎中的支持情况，请看：

- <http://caniuse.com> —— 每个功能都列有一个支持信息表格，例如想看哪个引擎支持现代加密（cryptography）函数：<http://caniuse.com/#feat=cryptography>。
+- <https://caniuse.com> —— 每个功能的支持表，例如，查看哪个引擎支持现代加密（cryptography）函数：<https://caniuse.com/#feat=cryptography>。
 - <https://kangax.github.io/compat-table> —— 一份列有语言功能以及引擎是否支持这些功能的表格。

-所有这些资源在实际开发中都有用武之地，因为他们包含了语言细节以及它们被支持的程度等非常有价值的信息。
+所有这些资源在实际开发中都有用武之地，因为它们包含了有关语言细节，以及它们被支持的程度等非常有价值的信息。

-为了不要让你在真正需要深入了解特定功能的时候捉襟见肘，请记住它们（或者这一页）。
+为了让你在真正需要深入了解特定功能的时候不会捉襟见肘，请记住它们（或者这一页）。
diff --git a/1-js/01-getting-started/3-code-editors/article.md b/1-js/01-getting-started/3-code-editors/article.md
@@ -6,41 +6,39 @@

 ## IDE

-[IDE](https://en.wikipedia.org/wiki/Integrated_development_environment)（集成开发环境）是用于管理整个项目具有强大功能的编辑器。顾名思义，它不仅仅是一个编辑器，而且还是个完整的开发环境。
+[IDE](https://en.wikipedia.org/wiki/Integrated_development_environment)（集成开发环境）是指用于管理整个项目的，具有强大功能的编辑器。顾名思义，它不仅仅是一个编辑器，而且还是个完整的“开发环境”。

-IDE 加载项目（通常包含很多文件），并且允许在不同文件之间切换。IDE 还提供基于整个项目（不仅仅是打开的文件）的自动补全功能，集成版本控制（如 [git](https://git-scm.com/)）、集成测试环境等一些其他“项目层面”的东西。
+IDE 加载项目（通常包含很多文件），并且允许在不同文件之间导航（navigation）。IDE 还提供基于整个项目（不仅仅是打开的文件）的自动补全功能，集成版本控制（如 [git](https://git-scm.com/)）、集成测试环境等一些其他“项目层面”的东西。

 如果你还没考虑好选哪一款 IDE，可以考虑下面两个：

- [Visual Studio Code](https://code.visualstudio.com/)（跨平台，免费）
- [WebStorm](http://www.jetbrains.com/webstorm/)（跨平台，收费）
+- [Visual Studio Code](https://code.visualstudio.com/)（跨平台，免费）。
+- [WebStorm](https://www.jetbrains.com/webstorm/)（跨平台，收费）。

-对于 Windows 系统来说，也有个叫 “Visual Studio” 的 IDE，请不要跟 “Visual Studio Code” 混淆。“Visual Studio” 是一个收费的、强大的 Windows 专用编辑器，它十分适合于 .NET 开发。用它进行 JavaScript 开发也不错。“Visual Studio” 有个免费的版本 [Visual Studio Community](https://www.visualstudio.com/vs/community/)。
+对于 Windows 系统来说，也有个叫 "Visual Studio" 的 IDE，请不要跟 "Visual Studio Code" 混淆。"Visual Studio" 是一个收费的、强大的 Windows 专用编辑器，它十分适合于 .NET 开发。用它进行 JavaScript 开发也不错。"Visual Studio" 有个免费的版本 [Visual Studio Community](https://www.visualstudio.com/vs/community/)。

-大多数 IDE 是收费的，但是他们都可以试用。购买 IDE 的费用对于一名合格的程序员的薪水来说，肯定算不了什么，所以去选一个对你来说最好的吧。
+很多 IDE 是收费的，但是它们都可以试用。购买 IDE 的费用对于一名合格的程序员的薪水来说，肯定算不了什么，所以去选一个对你来说最好的吧。

 ## 轻量编辑器

-“轻量编辑器”没有 IDE 功能那么强大，但是他们一般很快、优雅而且简单。
+“轻量编辑器”没有 IDE 功能那么强大，但是它们一般很快、优雅而且简单。

-“轻量编辑器”主要用于立即打开编辑一个文件。
+“轻量编辑器”主要用于快速打开和编辑文件。

-“轻量编辑器”和 IDE 最大的区别是，IDE 一般在项目中使用，这也就意味着在开启的时候要加载很多数据，如果需要的话，在使用的过程中还会分析项目的结构等。如果我们只需要编辑一个文件，那么“轻量编辑器”会更快。
+“轻量编辑器”和 "IDE" 最大的区别是，IDE 一般在项目中使用，这也就意味着在开启的时候要加载很多数据，如果需要的话还会分析项目的结构等。如果我们只需要编辑一个文件，那么“轻量编辑器”会更快。

-实际上，“轻量编辑器”一般都有各种各样的插件，这些插件可以做目录级（directory-level）的语法分析和补全代码。所以“轻量编辑器”和 IDE 也没有严格的界限。
+实际上，“轻量编辑器”一般都有各种各样的插件，这些插件可以做目录级（directory-level）的语法分析和代码补全。所以“轻量编辑器”和 IDE 也没有严格的界限。

 下面是一些值得你关注的“轻量编辑器”：

- [Atom](https://atom.io/)（跨平台，免费）。
- [Visual Studio Code](https://code.visualstudio.com/)（跨平台，免费）。
 - [Sublime Text](http://www.sublimetext.com)（跨平台，共享软件）。
 - [Notepad++](https://notepad-plus-plus.org/)（Windows，免费）。
- [Vim](http://www.vim.org/) 和 [Emacs](https://www.gnu.org/software/emacs/) 很棒，前提是你知道怎么用。
+- [Vim](http://www.vim.org/) 和 [Emacs](https://www.gnu.org/software/emacs/) 也很棒，如果你知道怎么使用它们的话。

 ## 不要争吵

-上面列表中的编辑器都是我和我的朋友（他们都是我认为很优秀的开发人员）已经使用了很长时间并且很满意的。
+上面列表中的编辑器都是我和我的朋友（他们都是我认为很优秀的开发者）已经使用了很长时间并且很满意的。

-世上还有很多其他很好的编辑器，你可以选择一个你最喜欢的。
+当然还有很多其他很好的编辑器，你可以选择一个你最喜欢的。

-选择编辑器就像选择其他工具一样。要看你的项目，以及个人的习惯和喜好。
+选择编辑器就像选择其他工具一样，是很个人化的。具体取决于你的项目，习惯以及个人喜好。
diff --git a/1-js/01-getting-started/4-devtools/article.md b/1-js/01-getting-started/4-devtools/article.md
@@ -1,63 +1,63 @@
 # 开发者控制台

-代码是很容易出现错误的。你也很可能犯错误...... 哦，我在说什么？只要你是人，你一定会犯错误（在写代码的时候），除非你是[机器人](https://en.wikipedia.org/wiki/Bender_(Futurama))。
+代码是很容易出现错误的。你也很可能犯错误……哦，我在说什么？只要你是人，你 **一定** 会犯错误（在写代码的时候），除非你是 [机器人](https://en.wikipedia.org/wiki/Bender_(Futurama))。

 但在浏览器中，默认情况下用户是看不到错误的。所以，如果脚本中有错误，我们看不到是什么错误，更不能够修复它。

 为了发现错误并获得一些与脚本相关且有用的信息，浏览器内置了“开发者工具”。

-通常，开发者倾向于使用 Chrome 或 Firefox 进行开发，因为它们有最好的开发者工具。一些其他的浏览器也提供开发者工具，有时还具有一些特殊的功能，通常它们都是在追赶 Chrome 或 Firefox。所以大多数人都有“最喜欢”的浏览器，当遇到某个浏览器独有的问题的时候，人们就会切换到其他的浏览器。
+通常，开发者倾向于使用 Chrome 或 Firefox 进行开发，因为它们有最好的开发者工具。一些其它的浏览器也提供开发者工具，有时还具有一些特殊的功能，通常它们都是在“追赶” Chrome 或 Firefox。所以大多数人都有“最喜欢”的浏览器，当遇到某个浏览器独有的问题的时候，人们就会切换到其它的浏览器。

 开发者工具很强大，功能丰富。首先，我们将学习如何打开它们，查找错误和运行 JavaScript 命令。

 ## Google Chrome

 打开网页 [bug.html](bug.html)。

-在 JavaScript 代码中有一个错误。一般的访问者看不到这个错误，所以让我们打开开发者工具看看吧。
+在这个页面的 JavaScript 代码中有一个错误。一般的访问者看不到这个错误，所以让我们打开开发者工具看看吧。

 按下 `key:F12` 键，如果你使用 Mac，试试 `key:Cmd+Opt+J`。

-开发者工具会被打开，Console 标签页是默认的标签页。
+默认情况下，开发者工具会被在 Console 标签页中打开。

 就像这样：

 ![chrome](chrome.png)

 具体什么样，要看你的 Chrome 版本。它随着时间一直在变，但是都很类似。

- 在这我们能看到红色的错误提示信息。这个场景中，脚本里有一个未知的 “lalala” 命令。
+- 在这我们能看到红色的错误提示信息。这个场景中，脚本里有一个未知的 "lalala" 命令。
 - 在右边，有个可点击的链接 `bug.html:12`。这个链接会链接到错误发生的行号。

 在错误信息的下方，有个 `>` 标志。它代表“命令行”，在“命令行”中，我们可以输入 JavaScript 命令，按下 `key:Enter` 来执行。

-现在，我们能看到错误就够了。稍后，在 <info:debugging-chrome> 章节中，我们会重新更加深入地讨论开发者工具。
+现在，我们能看到错误就够了。稍后，在 <info:debugging-chrome> 一节中，我们会重新更加深入地学习开发者工具。

 ```smart header="多行输入"
 通常，当我们向控制台输入一行代码后，按 `key:Enter`，这行代码就会立即执行。

 如果想要插入多行代码，请按 `key:Shift+Enter` 来进行换行。这样就可以输入长片段的 JavaScript 代码了。
 ```

-## Firefox、Edge 和其他浏览器
+## Firefox、Edge 和其它浏览器

-大多数其他的浏览器都是通过 `key:F12` 来打开开发者工具。
+大多数其它的浏览器都是通过 `key:F12` 来打开开发者工具。

-他们的外观和感觉都非常相似，一旦你学会了他们中的一个（可以先尝试 Chrome），其他的也就很快了。
+它们的外观和感觉都非常相似，一旦你学会了它们中的一个（可以先尝试 Chrome），其它的也就很快就可以熟悉了。

 ## Safari

 Safari（Mac 系统中的浏览器，Windows 和 Linux 系统不支持）有一点点不同。我们需要先开启“开发菜单”。

-打开“偏好设置”，选择“高级”选项。选中最下方的那个选择框。
+打开“偏好设置”，选择“高级”选项。选中最下方的那个选择框：

 ![safari](safari.png)

 现在，我们通过 `key:Cmd+Opt+C` 就能打开或关闭控制台了。另外注意，有一个名字为“开发”的顶部菜单出现了。它有很多命令和选项。

 ## 总结

-* 开发者工具允许我们查看错误、执行命令、检查变量等等。
+* 开发者工具允许我们查看错误、执行命令、检查变量等。
 * 在 Windows 系统中，可以通过 `key:F12` 开启开发者工具。Mac 系统下，Chrome 需要使用 `key:Cmd+Opt+J`，Safari 使用 `key:Cmd+Opt+C`（需要提前开启）。

 现在我们的环境准备好了。下一章，我们将正式开始学习 JavaScript。
diff --git a/1-js/01-getting-started/4-devtools/bug.html b/1-js/01-getting-started/4-devtools/bug.html
@@ -7,7 +7,7 @@

 <body>

-  There is an error in the script on this page.
+  本页面的脚本中有一个错误。
  <script>
    lalala
  </script>

diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html b/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+
+  <script>
+    alert( "I'm JavaScript!" );
+  </script>
+
+</body>
+
+</html>
diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md
@@ -0,0 +1,2 @@
+
+[html src="index.html"]
diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md
@@ -1,4 +1,4 @@
-HTML 代码:
+HTML 代码：

 [html src="index.html"]