diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 10bd54fedb..d835f361e5 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -1,121 +1,121 @@ -# An Introduction to JavaScript +# JavaScript 简介 -Let's see what's so special about JavaScript, what we can achieve with it and which other technologies play well with it. +我们一起来聊一下 JavaScript，用它能做什么，它有哪些特性，以及一些跟它配合使用的技术。 -## What is JavaScript? +## 什么是 JavaScript？ -*JavaScript* was initially created to *"make webpages alive"*. +**JavaScript** 最初的目的是为了**“让网页动起来”**。 -The programs in this language are called *scripts*. They can be written right in the HTML and execute automatically as the page loads. +这种编程语言我们称之为**脚本**。它们可以写在 HTML 中，在页面加载的时候会自动执行。 -Scripts are provided and executed as a plain text. They don't need a special preparation or a compilation to run. +脚本作为纯文本存在和执行。它们不需要特殊的准备或编译即可运行。 -In this aspect, JavaScript is very different from another language called [Java](http://en.wikipedia.org/wiki/Java). +这方面，JavaScript 和 [Java](http://en.wikipedia.org/wiki/Java) 有很大的区别。 ```smart header="Why JavaScript?" -When JavaScript was created, it initially had another name: "LiveScript". But Java language was very popular at that time, so it was decided that positioning a new language as a "younger brother" of Java would help. +JavaScript 在刚诞生的时候，它的名字叫 “LiveScript”。但是因为当时 Java 很流行，所以决定将一种新语言定位为 Java 的“弟弟”会有所帮助。 -But as it evolved, JavaScript became a fully independent language, with its own specification called [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript), and now it has no relation to Java at all. +随着 JavaScript 的发展，它已经变成了一门独立的语言，同时也有了自己的语言规范 [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript)。现在，它和 Java 之间没有任何关系。 ``` -At present, JavaScript can execute not only in the browser, but also on the server, or actually on any device where there exists a special program called [the JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine). +现在，JavaScript 不仅仅是在浏览器内执行，也可以在服务端执行。甚至在任意搭载了 [JavaScript 引擎](https://en.wikipedia.org/wiki/JavaScript_engine) 的环境中都可以执行。 -The browser has an embedded engine, sometimes it's also called a "JavaScript virtual machine". +浏览器中嵌入了 JavaScript 引擎，有时也称作 JavaScript 虚拟机。 -Different engines have different "codenames", for example: +不同的引擎有不同的名字，例如： -- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- in Chrome and Opera. -- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- in Firefox. -- ...There are other codenames like "Trident", "Chakra" for different versions of IE, "ChakraCore" for Microsoft Edge, "Nitro" and "SquirrelFish" for Safari etc. +- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- Chrome 和 Opera 中的 JavaScript 引擎。 +- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- Firefox 中的 JavaScript 引擎。 +- ... 也有一些其他的 JavaScript 引擎，例如，“Trident” 和 “Chakra” 是不同版本 IE 的 JavaScript 引擎，“ChakraCore” 是 Microsoft Edge 的 JavaScript 引擎，“Nitro” 和 “SquirrelFish” 是 Safari 的 JavaScript 引擎，等等。 -The terms above are good to remember, because they are used in developer articles on the internet. We'll use them too. For instance, if "a feature X is supported by V8", then it probably works in Chrome and Opera. +上面这些很容易记忆，因为经常出现在网上关于开发的文章中。我们也会这样用。例如：某个新的功能，如果 JavaScript 引擎 V8 是支持的，那么我们可以认为这个功能在 Chrome 和 Opera 中可以正常运行。 -```smart header="How engines work?" +```smart header="引擎是如何工作的？" -Engines are complicated. But the basics are easy. +引擎很复杂，但是基本原理很简单。 -1. The engine (embedded if it's a browser) reads ("parses") the script. -2. Then it converts ("compiles") the script to the machine language. -3. And then the machine code runs, pretty fast. +1. 引擎（通常嵌入在浏览器中）读取（“解析”）脚本。 +2. 然后将脚本转化（“编译”）为机器语言。 +3. 然后就可以在机器上飞速的运行。 -The engine applies optimizations on every stage of the process. It even watches the compiled script as it runs, analyzes the data that flows through it and applies optimizations to the machine code based on that knowledge. At the end, scripts are quite fast. +引擎会对流程中的每个阶段都进行优化。它甚至可以在运行时监视编译的脚本，分析数据流并根据这些对机器代码应用优化。最后，脚本会执行地非常快。 ``` -## What can in-browser JavaScript do? +## 浏览器中的 JavaScript 能做什么 ? -The modern JavaScript is a "safe" programming language. It does not provide low-level access to memory or CPU, because it was initially created for browsers which do not require it. +现代的 JavaScript 是一种“安全”语言。它不提供对内存或 CPU 的底层访问，因为它最初是为浏览器创建的，不需要这些功能。 -The capabilities greatly depend on the environment that runs JavaScript. For instance, [Node.JS](https://wikipedia.org/wiki/Node.js) supports functions that allow JavaScript to read/write arbitrary files, perform network requests etc. +JavaScript 的能力依赖于它执行的环境。例如：[Node.js](https://wikipedia.org/wiki/Node.js) 允许 JavaScript 读写任意文件、执行网络请求等。 -In-browser JavaScript can do everything related to webpage manipulation, interaction with the user and the webserver. +浏览器中的 JavaScript 可以完成所有和网页相关的操作、处理用户和 Web 服务器之间的交互。 -For instance, in-browser JavaScript is able to: +例如，浏览器中的 JavaScript 可以完成下面这些事： -- Add new HTML to the page, change the existing content, modify styles. -- React to user actions, run on mouse clicks, pointer movements, key presses. -- Send requests over the network to remote servers, download and upload files (so-called [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming)) and [COMET](https://en.wikipedia.org/wiki/Comet_(programming)) technologies). -- Get and set cookies, ask questions to the visitor, show messages. -- Remember the data on the client-side ("local storage"). +- 在网页中插入新的 HTML，修改现有的网页内容和网页的样式。 +- 响应用户的行为，响应鼠标的点击或移动、键盘的敲击。 +- 向远程服务器发送请求，使用 [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming)) 和 [COMET](https://en.wikipedia.org/wiki/Comet_(programming)) 技术下载或上传文件。 +- 获取或修改 cookie，向用访问者提出问题、发送消息。 +- 记住客户端的数据（本地存储）。 -## What CAN'T in-browser JavaScript do? +## 浏览器中的 JavaScript 不能做什么？ -JavaScript's abilities in the browser are limited for the sake of the user's safety. The aim is to prevent an evil webpage from accessing private information or harming the user's data. +为了用户的（信息）安全，在浏览器中的 JavaScript 的能力是有限的。这样主要是为了阻止邪恶的网站获得或修改用户的私人数据。 -The examples of such restrictions are: +这些限制的例子有： -- JavaScript on a webpage may not read/write arbitrary files on the hard disk, copy them or execute programs. It has no direct access to OS system functions. +* 网页中的 JavaScript 不能读、写、复制及执行用户磁盘上的文件或程序。它没有直接访问操作系统的功能。 - Modern browsers allow it to work with files, but the access is limited and only provided if the user does certain actions, like "dropping" a file into a browser window or selecting it via an `` tag. + 现代浏览器允许 JavaScript 做一些文件相关的操作，但是这个操作是受到限制的。仅当用户使用某个特定的动作，JavaScript 才能操作这个文件。例如，把文件 “拖” 到浏览器中，或者通过 `` 标签选择文件。 - There are ways to interact with camera/microphone and other devices, but they require a user's explicit permission. So a JavaScript-enabled page may not sneakily enable a web-camera, observe the surroundings and send the information to the [NSA](https://en.wikipedia.org/wiki/National_Security_Agency). -- Different tabs/windows generally do not know about each other. Sometimes they do, for example when one window uses JavaScript to open the other one. But even in this case, JavaScript from one page may not access the other if they come from different sites (from a different domain, protocol or port). + JavaScript 有很多方式和设备的照相机/麦克风交互，但是这些都需要提前获得用户的授权许可。所以，JavaScript 并不会偷偷的通过你的摄像头观察你，更不会把你的信息发送到[美国国家安全局](https://en.wikipedia.org/wiki/National_Security_Agency)。 +- 不同的浏览器标签页之间基本彼此不相关。有时候，也会有一些关系。例如，通过 JavaScript 打开另外一个新的标签页。但即使在这种情况下，如果两个标签页打开的不是同一个网站（域名、协议或者端口任一不相同的网站），他们都不能够相互通信。 - This is called the "Same Origin Policy". To work around that, *both pages* must contain a special JavaScript code that handles data exchange. + 这就是 “同源策略”。为了解决不同标签页交互的问题，两个同源的网站必须**都**包含一些特殊的 JavaScript 代码，才能够实现数据交换。 - The limitation is again for user's safety. A page from `http://anysite.com` which a user has opened must not be able to access another browser tab with the URL `http://gmail.com` and steal information from there. -- JavaScript can easily communicate over the net to the server where the current page came from. But its ability to receive data from other sites/domains is crippled. Though possible, it requires explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's safety limitations. + 这个限制也是为了用户的信息安全。例如，用户打开的 `http://anysite.com` 网页的 JavaScript 不能访问 `http://gmail.com`（另外一个标签页打开的网页）也不能从那里窃取信息。 +- JavaScript 通过互联网可以很容易的和服务器（当前网页域名的服务器）通讯。但是从其他的服务器中获取数据的功能是受限的，需要服务器（在 HTTP 头中）添加某些参数。这也是为了用户的数据安全。 ![](limitations.png) -Such limits do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers also allow installing plugin/extensions which may get extended permissions. +浏览器环境外的 JavaScript 一般没有这些限制。例如服务端的 JavaScript 就没有这些限制。现代浏览器还允许通过 JavaScript 来安装浏览器插件或扩展，当然这也是在用户授权的前提下。 -## What makes JavaScript unique? +## JavaScript 为什么与众不同？ -There are at least *three* great things about JavaScript: +至少有 **3** 件事值得一提： ```compare -+ Full integration with HTML/CSS. -+ Simple things done simply. -+ Supported by all major browsers and enabled by default. ++ 和 HTML/CSS 完全的集成。 ++ 使用简单的工具完成简单的任务。 ++ 被所有的主流浏览器支持，并且默认开启。 ``` -Combined, these three things exist only in JavaScript and no other browser technology. +满足这三条的浏览器技术也只有 JavaScript 了。 -That's what makes JavaScript unique. That's why it's the most widespread tool to create browser interfaces. +这就是为什么 JavaScript 与众不同！这也是为什么它是创建浏览器界面的最普遍的工具。 -While planning to learn a new technology, it's beneficial to check its perspectives. So let's move on to the modern trends that include new languages and browser abilities. +当然，学习一项新技术的时候，最好先看一下它的前景。所以，接下来我们继续讨论包括新语言和浏览器功能在内的现代趋势。 -## Languages "over" JavaScript +## 比 JavaScript “好” 的语言 -The syntax of JavaScript does not suit everyone's needs. Different people want different features. +不同的人喜欢不同的功能，JavaScript 的语法也不能够满足所有人。 -That's to be expected, because projects and requirements are different for everyone. +这是正常的，因为每个人的项目和需求都不一样。 -So recently a plethora of new languages appeared, which are *transpiled* (converted) to JavaScript before they run in the browser. +所以，最近出现了很多不同的语言，这些语言在浏览器中执行之前，都会被**编译**（转化）成 JavaScript。 -Modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language and autoconverting it "under the hood". +现代化的工具使得编译速度非常快速和透明，实际上允许开发人员使用另一种语言编写代码并将其自动转换为 JavaScript。 -Examples of such languages: +这些语言的例子有： -- [CoffeeScript](http://coffeescript.org/) is a "syntactic sugar" for JavaScript, it introduces shorter syntax, allowing to write more precise and clear code. Usually Ruby devs like it. -- [TypeScript](http://www.typescriptlang.org/) is concentrated on adding "strict data typing", to simplify development and support of complex systems. It is developed by Microsoft. -- [Dart](https://www.dartlang.org/) is a standalone language that has its own engine that runs in non-browser environments (like mobile apps). It was initially offered by Google as a replacement for JavaScript, but as of now, browsers require it to be transpiled to JavaScript just like the ones above. +- [CoffeeScript](http://coffeescript.org/) 是 JavaScript 的语法糖，它语法简短，明确简洁。通常使用 Ruby 的人喜欢用。 +- [TypeScript](http://www.typescriptlang.org/) 将注意力集中在增加严格的数据类型。这样就能简化开发，也能用于开发复杂的系统。TypeScript 是微软开发的。 +- [Dart](https://www.dartlang.org/) 是一门独立的语言。它拥有自己的引擎用于在非浏览器环境中运行（如：在手机应用中运行）。最开始是 Google 提供的用于替代 JavaScript 的，但是现在，它和其他上述的语言一样，浏览器也要求它被编译成 JavaScript 。 -There are more. Of course even if we use one of those languages, we should also know JavaScript, to really understand what we're doing. +当然，还有更多其他的语言。即使我们在使用这些语言，我们也需要知道 JavaScript。因为学习 JavaScript 可以让我们真正明白我们自己在做什么。 -## Summary +## 总结 -- JavaScript was initially created as a browser-only language, but now it is used in many other environments as well. -- At this moment, JavaScript has a unique position as the most widely-adopted browser language with full integration with HTML/CSS. -- There are many languages that get "transpiled" to JavaScript and provide certain features. It is recommended to take a look at them, at least briefly, after mastering JavaScript. +- JavaScript 最开始是为浏览器设计的一门语言，但是现在也可以在其它的环境中运行。 +- 现在，JavaScript 是一门在浏览中使用最广、并且能够很好集成 HTML/CSS 的语言。 +- 有很多其他的语言可以编译成 JavaScript，这些语言还提供更多的功能。最好要了解一下这些语言，至少在掌握 JavaScript 之后，需要简单的看一下。 diff --git a/1-js/01-getting-started/2-code-editors/article.md b/1-js/01-getting-started/2-code-editors/article.md index 0d714cdb27..fcca83291f 100644 --- a/1-js/01-getting-started/2-code-editors/article.md +++ b/1-js/01-getting-started/2-code-editors/article.md @@ -1,56 +1,56 @@ -# Code editors +# 编辑器 -A code editor is the place where programmers spend most of their time. +程序员接触时间最长的就是代码编辑器（后面简称编辑器）。 -There are two archetypes: IDE and lightweight editors. Many people feel comfortable choosing one tool of each type. +编辑器主要分两种：IDE（集成开发环境）和轻量编辑器。很多人喜欢这两种各选一个。 ## IDE -The term [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) means a powerful editor with many features that usually operates on a "whole project". As the name suggests, that's not just an editor, but a full-scale "development environment". +[IDE](https://en.wikipedia.org/wiki/Integrated_development_environment)（集成开发环境）是用于管理整个项目具有强大功能的编辑器。顾名思义，它不仅仅是一个编辑器，而且还是开发环境。 -An IDE loads the project (can be many files), allows navigation between files, provides autocompletion based on the whole project (not just the open file), integrates with a version management system (like [git](https://git-scm.com/)), a testing environment and other "project-level" stuff. +IDE 加载项目（通常包含多个文件），并且允许在不同文件之间切换。IDE 还提供基于项目的自动补全功能，集成版本控制、集成测试环境等一些其他“项目层面”的东西。 -If you haven't considered selecting an IDE yet, look at the following variants: +如果你还没考虑好选哪一款 IDE，看看下面： -- [WebStorm](http://www.jetbrains.com/webstorm/) for frontend development and other editors of the same company if you need additional languages. -- Visual Studio is fine if you're a .NET developer, and a free version is available ([Visual Studio Community](https://www.visualstudio.com/vs/community/)) +- 专为前端开发而生的 [WebStorm](http://www.jetbrains.com/webstorm/)，如果你需要额外的语言支持也可以选择这家公司的其他编辑器。 +- 如果你是一个 .NET 开发者，Visual Studio 也是一个好的选择，还有一个免费版 —— ([Visual Studio Community](https://www.visualstudio.com/vs/community/)) - [Netbeans](http://netbeans.org/). -All of the IDEs except Visual Studio are available on Windows, MacOs and Linux. Visual Studio doesn't work on Linux. +除了 Visual Studio，以上这些 IDE 都是跨平台的。Visual Studio 无法在 Linux 上使用。 -Most IDEs are paid, but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose the best one for you. +大多数 IDE 是收费的，但是他们都可以试用。这些费用对于一个合格的程序员的薪水来说，肯定算不了什么，所有去选一个对你来说最好的吧。 -## Lightweight editors +## 轻量编辑器 -"Lightweight editors" are not as powerful as IDEs, but they're fast, elegant and simple. +“轻量编辑器” 没有 IDE 那么功能强大，但是他们一般很快、优雅而且简单。 -They are mainly used to instantly open and edit a file. +“轻量编辑器” 主要用于立即打开编辑一个文件。 -The main difference between a "lightweight editor" and an "IDE" is that an IDE works on a project-level, so it loads much more data on start, analyzes the project structure if needed and so on. A lightweight editor is much faster if we need only one file. +“轻量编辑器” 和 IDE 有很大的区别。IDE 一般是项目中使用，就意味着一开始要加载很多数据，并且在使用的过程中会分析项目的结构和内容。如果我们只需要编辑一个文件，那么 “轻量编辑器” 会更快的帮我们打开文件。 -In practice, lightweight editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict border between a lightweight editor and an IDE. +实际上，“轻量编辑器”一般都有各种各样的插件，这些插件可以做语法分析和补全代码。所以 “轻量编辑器” 和 IDE 也没有严格的界限。 -The following options deserve your attention: +下面是一些流行的 “轻量编辑器”: -- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free). -- [Atom](https://atom.io/) (cross-platform, free). -- [Sublime Text](http://www.sublimetext.com) (cross-platform, shareware). -- [Notepad++](https://notepad-plus-plus.org/) (Windows, free). -- [Vim](http://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool, if you know how to use them. +- [Visual Studio Code](https://code.visualstudio.com/)（跨平台、免费）。 +- [Atom](https://atom.io/)（跨平台、免费）。 +- [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/) 很棒，前提是如果你知道怎么用。 -## My favorites +## 我的最爱 -The personal preference of the author is to have both an IDE for projects and a lightweight editor for quick and easy file editing. +我个人喜好是同时拥有项目级别的 IDE 和轻量级的编辑器，以便快速轻松地进行文件编辑。 -I'm using: +我使用的编辑器： -- [WebStorm](http://www.jetbrains.com/webstorm/) for JS, and if there is one more language in the project, then I switch to one of the other Jetbrains offerings listed above. -- As a lightweight editor -- [Sublime Text](http://www.sublimetext.com) or [Atom](https://atom.io/). +- 使用 [WebStorm](http://www.jetbrains.com/webstorm/) 写 JavaScript，如果项目涉及其他语言我切换到上面列出的其他 Jetbrains 产品之一。 +- 轻量编辑器 -- [Sublime Text](http://www.sublimetext.com) 或 [Atom](https://atom.io/)。 -## Let's not argue +## 不要争吵 -The editors in the lists above are those that either I or my friends who I consider good developers have been using for a long time and are happy with. +上面列表中的编辑都是那些我或我的朋友（他们都是我认为很优秀的开发人员）已经使用了很长时间并且很满意的。 -There are other great editors in our big world. Please choose the one you like the most. +世上还有很多其他的很好的编辑器，你们可以选择一个自己最喜欢的。 -The choice of an editor, like any other tool, is individual and depends on your projects, habits, personal preferences. +选择编辑器就像选择其他工具一样。要看你的项目，以及个人的习惯、喜好。 diff --git a/1-js/01-getting-started/3-devtools/article.md b/1-js/01-getting-started/3-devtools/article.md index f250502df0..d73c3478fe 100644 --- a/1-js/01-getting-started/3-devtools/article.md +++ b/1-js/01-getting-started/3-devtools/article.md @@ -1,58 +1,58 @@ -# Developer console +# 开发者控制台 -Code is prone to errors. You are quite likely to make errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)). +代码是很容易出现错误的。你也很可能犯错误...... 哦，我在说什么？只要你是人，你一定会犯错误（在写代码的时候），除非你是[机器人](https://en.wikipedia.org/wiki/Bender_(Futurama))。 -But in the browser, a user doesn't see the errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it. +但在浏览器中，默认情况下用户是看不到错误的。所以，如果脚本中有错误，我们看不到是什么错误，更不能够修复。 -To see errors and get a lot of other useful information about scripts, browsers have embedded "developer tools". +为了发现错误并获得一些与脚本相关且有用的信息，浏览器内置了 “开发者工具”。 -Most often developers lean towards Chrome or Firefox for development, because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catch-up" to Chrome or Firefox. So most people have a "favorite" browser and switch to others if a problem is browser-specific. +通常，开发者倾向于使用 Chrome 或 Firefox 来开发，因为它们有最好的开发者工具。一些其他的浏览器也提供开发者工具，有时还具有一些特殊的功能，通常他们都是在追赶 Chrome 或 Firefox。所以大多数人都有 “最喜欢” 的浏览器，当遇到某个浏览器独有的问题的时候，人们就会切换到其他的浏览器。 -Developer tools are really powerful, there are many features. To start, we'll learn how to open them, look at errors and run JavaScript commands. +开发者工具很强大，功能丰富。首先，我们要学习如何打开他们，查找错误和运行 JavaScript 命令。 ## Google Chrome -Open the page [bug.html](bug.html). +打开网页 [bug.html](bug.html)。 -There's an error in the JavaScript code on it. It's hidden from a regular visitor's eyes, so let's open developer tools to see it. +在 JavaScript 代码中有一个错误。一般的访问者看不到这个错误，所以让我们打开开发者工具看看吧。 -Press `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`. +按下 `key:F12` 键， 如果你使用 Mac, 试试 `key:Cmd+Opt+J`。 -The developer tools will open on the Console tab by default. +开发者工具会被打开，Console 标签页是默认的标签页。 -It looks somewhat like this: +就像这样： ![chrome](chrome.png) -The exact look of developer tools depends on your version of Chrome. It changes from time to time, but should be similar. +具体什么样，要看你的 Chrome 版本。它随着时间一直在变，但是都很类似。 -- Here we can see the red-colored error message. In this case the script contains an unknown "lalala" command. -- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occurred. +- 这个上面，我们能看到红色的错误信息。这个场景中，脚本里有一个未知的 “lalala” 命令。 +- 在右边，有个可点击的链接 `bug.html:12`。这个链接会链接到错误发生的行号。 -Below the error message there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands and press `key:Enter` to run them (`key:Shift+Enter` to input multi-line commands). +在错误信息的下方，有个 `>` 标志。它代表 “命令行 ”，在 “命令行” 中，我们可以输入 JavaScript 命令，按下 `key:Enter` 来 +执行（`key:Shift+Enter` 用来输入多行命令）。 -Now we can see errors and that's enough for the start. We'll be back to developer tools later and cover debugging more in-depth in the chapter . +现在，我们能看到错误就够了。稍后，在 章节中，我们会重新更加深入的讨论开发者工具。 +## Firefox、Edge 和其他 -## Firefox, Edge and others +大多数其他的浏览器都是通过 `key:F12` 来打开开发者工具。 -Most other browsers use `key:F12` to open developer tools. - -The look & feel of them is quite similar. Once you know how to use one of them (you can start with Chrome), you can easily switch to another. +他们的外观和感觉都非常相似，一旦你学会了他们中的一个（可以先尝试 Chrome），其他的也就很快了。 ## Safari -Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first. +Safari（Mac 系统中浏览器，不支持 Windows 和 Linux 系统）有一点点不同。我们需要先开启 “开发菜单”。 -Open Preferences and go to "Advanced" pane. There's a checkbox at the bottom: +打开 “偏好设置”，选择“高级”选项。选中最下方的那个选择框。 ![safari](safari.png) -Now `key:Cmd+Opt+C` can toggle the console. Also note that the new top menu item named "Develop" has appeared. It has many commands and options. +现在，我们通过 `key:Cmd+Opt+C` 就能打开或关闭控制台了。另外注意，有一个名字为 “开发” 的顶部菜单出现了。它有很多命令和选项。 -## Summary +## 总结 -- Developer tools allow us to see errors, run commands, examine variables and much more. -- They can be opened with `key:F12` for most browsers under Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first). +* 开发者工具允许我们查看错误、执行命令、检查变量等等。 +* 在 Windows 系统中，可以通过 `key:F12` 开启开发者工具。Mac 系统下，Chrome 需要使用 `key:Cmd+Opt+J`，Safari 使用 `key:Cmd+Opt+C`（需要提前开启）。 -Now we have the environment ready. In the next section we'll get down to JavaScript. +现在我们的环境准备好了，下一章，我们将开始讨论 JavaScript。 diff --git a/1-js/01-getting-started/index.md b/1-js/01-getting-started/index.md index b327c78603..76f3379b3c 100644 --- a/1-js/01-getting-started/index.md +++ b/1-js/01-getting-started/index.md @@ -1,3 +1,3 @@ -# An introduction +# 一个简介 -About the JavaScript language and the environment to develop with it. +介绍 JavaScript 语言及其开发环境。