Skip to content

Commit cea888e

Browse files
committed
Transfer the existing translation, ready for review
Co-authored-by: eric yang <[email protected]> resolve #1
1 parent ee5930f commit cea888e

File tree

3 files changed

+157
-126
lines changed

3 files changed

+157
-126
lines changed

Diff for: 1-js/01-getting-started/1-intro/article.md

+78-67
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,132 @@
1-
# An Introduction to JavaScript
1+
# JavaScript 简介
22

3-
Let's see what's so special about JavaScript, what we can achieve with it and which other technologies play well with it.
3+
我们一起来聊一下 JavaScript,用它能做什么,它有哪些特性,以及一些跟它配合使用的技术。
44

5-
## What is JavaScript?
5+
## 什么是 JavaScript
66

7-
*JavaScript* was initially created to *"make webpages alive"*.
7+
**JavaScript** 最初的目的是为了 **“ 让网页动起来 ”**
88

9-
The programs in this language are called *scripts*. They can be written right in the HTML and execute automatically as the page loads.
9+
这种编程语言我们称之为**脚本**。把它嵌入到 HTML 当中,在页面加载的时候会自动执行。
1010

11-
Scripts are provided and executed as a plain text. They don't need a special preparation or a compilation to run.
11+
脚本作为纯文本存在和执行,并不需要编译执行。
1212

13-
In this aspect, JavaScript is very different from another language called [Java](http://en.wikipedia.org/wiki/Java).
13+
这方面, JavaScript [Java](http://en.wikipedia.org/wiki/Java) 有很大的区别。
1414

1515
```smart header="Why <u>Java</u>Script?"
16-
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.
16+
JavaScript 在创建的时候,它的名字叫 “LiveScript”。因为当时 Java 很流行,所以就取了个名字叫 JavaScript。这样就可以让大家认为, JavaScript 是 Java 的弟弟。
1717
18-
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.
18+
随着 JavaScript 的发展,它已经变成了一门独立的语言,同时也有了自己的语言规范 [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript)。现在,Java 和 JavaScript 已经是两门不同的语言,彼此之前也没有任何关系。
1919
```
2020

21-
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).
21+
现在,JavaScript 不仅仅是在浏览器内执行,也可以在服务端执行。甚至在存在任意 [JavaScript 引擎](https://en.wikipedia.org/wiki/JavaScript_engine)的环境中都可以执行。
2222

23-
The browser has an embedded engine, sometimes it's also called a "JavaScript virtual machine".
23+
浏览器中嵌入了 JavaScript 引擎,有时也称作 JavaScript 虚拟机。
2424

25-
Different engines have different "codenames", for example:
25+
不同的引擎有不同的名字,例如:
2626

27-
- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- in Chrome and Opera.
28-
- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- in Firefox.
29-
- ...There are other codenames like "Trident", "Chakra" for different versions of IE, "ChakraCore" for Microsoft Edge, "Nitro" and "SquirrelFish" for Safari etc.
27+
* [V8](<https://en.wikipedia.org/wiki/V8_(JavaScript_engine)>) --Chrome 和 Opera 中的 JavaScript 引擎 。
28+
* [Gecko](<https://en.wikipedia.org/wiki/Gecko_(software)>) --Firefox 中的 JavaScript 引擎。
29+
* ... 也有一些其他的 JavaScript 引擎,“Trident” 和 “Chakra” 是不同版本 IE 的 JavaScript 引擎,“ChakraCore” 是 Microsoft
30+
Edge 的 JavaScript 引擎 , “Nitro” 和 “SquirrelFish” 是 Safari 的 JavaScript 引擎,等等。
3031

31-
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.
32+
上面这些很容易记忆,因为经常出现在网上关于开发的文章中。我们也会这样用。例如:某个新的功能,JavaScript 引擎 V8 是支持的
33+
;那么我们可以认为这个功能在 Chrome 和 Opera 中可以正常运行。
3234

33-
```smart header="How engines work?"
35+
```smart header="How the engines work?"
36+
引擎很复杂,但是基本原理很简单。
3437
35-
Engines are complicated. But the basics are easy.
38+
1. 脚本是纯文本(可以被压缩)。
39+
2. 引擎(通常嵌入在浏览器中)读取(理解)这些文本并转化(编译)成机器语言。
40+
3. 然后就可以在机器上飞速的运行。
3641
37-
1. The engine (embedded if it's a browser) reads ("parses") the script.
38-
2. Then it converts ("compiles") the script to the machine language.
39-
3. And then the machine code runs, pretty fast.
40-
41-
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.
42+
在每一个阶段,引擎都会做一些优化。引擎甚至会监视脚本的执行,分析数据流,从而采取相应的优化措施。
4243
```
4344

44-
## What can in-browser JavaScript do?
45+
## 浏览器中的 JavaScript 能干什么 ?
46+
47+
现在的 JavaScript 是一种安全语言。它不会去操作计算机的内存和 CPU。因为 JavaScript 最开始就是为浏览器准备的,浏览器也不需
48+
要操作这些。
4549

46-
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.
50+
JavaScript 的能力依赖于它执行的环境。例如:[Node.JS](https://wikipedia.org/wiki/Node.js) 就可以读写文件,可以发送响应网
51+
络请求。
4752

48-
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.
53+
浏览器中的 JavaScript 只处理和网页相关的操作,处理网页和用户的交互以及网页和服务端的网络请求。
4954

50-
In-browser JavaScript can do everything related to webpage manipulation, interaction with the user and the webserver.
55+
浏览器中的 JavaScript,可以干下面这些事:
5156

52-
For instance, in-browser JavaScript is able to:
57+
* 在网页中插入新的 HTML,修改现有的网页内容和网页的样式。
58+
* 响应用户的行为,响应鼠标的点击或移动,键盘的敲击。
59+
* 向远程服务器发送请求,下载或上传文件([AJAX](<https://en.wikipedia.org/wiki/Ajax_(programming)>)
60+
[COMET](<https://en.wikipedia.org/wiki/Comet_(programming)>)技术)。
61+
* 获取或修改 cookie,向用访问者发送消息,提问题。
62+
* 存储浏览器端的一些本地数据(本地存储)。
5363

54-
- Add new HTML to the page, change the existing content, modify styles.
55-
- React to user actions, run on mouse clicks, pointer movements, key presses.
56-
- 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).
57-
- Get and set cookies, ask questions to the visitor, show messages.
58-
- Remember the data on the client-side ("local storage").
64+
## 浏览器中的 JavaScript ****能干什么?
5965

60-
## What CAN'T in-browser JavaScript do?
66+
为了用户的(信息)安全,在浏览器中的 JavaScript 的能力是有限的。这样主要是为了阻止邪恶的网站获得或修改用户的私人数据。
6167

62-
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.
68+
例如:
6369

64-
The examples of such restrictions are:
70+
* 网页中的 JavaScript 不能读、写、复制及执行用户磁盘上的文件或程序。也不能直接控制操作系统。
6571

66-
- 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.
72+
现代浏览器允许 JavaScript 做一些文件相关的操作,但是这个操作是受到限制的。仅当用户使用某个特定的动作,JavaScript 才能
73+
操作这个文件。例如,把文件 “ 拖 ” 到浏览器中,或者通过 `<input>` 标签选择文件。
6774

68-
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 `<input>` tag.
75+
JavaScript 有很多方式和设备的照相机 / 麦克风交互,这些都需要提前获得用户的允许。所以,JavaScript 并不会偷偷的通过你的
76+
摄像头观察你,更不会把你的信息发送到 [NSA](https://en.wikipedia.org/wiki/National_Security_Agency)
6977

70-
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).
71-
- 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).
78+
- 不同的浏览器标签页基本彼此不相关。有时候,也会有一些关系。例如,通过 JavaScript 打开另外一个新的标签页。如果两个标签页
79+
打开的不是同一个网站,他们不能够相互通信(域名、协议或者端口任一不相同的网站,都认为是不同的网站)。
7280

73-
This is called the "Same Origin Policy". To work around that, *both pages* must contain a special JavaScript code that handles data exchange.
81+
这就是 “ 同源策略 ”。为了解决不同标签页交互的问题,两个同源的网站必须****包含特殊的 JavaScript 代码,才能够实现数据
82+
交换。
7483

75-
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.
76-
- 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.
84+
这个限制也是为了用户的信息安全。例如,来自 `http://anysite.com` 的网页的 JavaScript 不能够获取任何
85+
`http://gmail.com`(另外一个标签页打开的网页)页面的数据。
86+
87+
- JavaScript 通过互联网可以很容易的和服务器通讯(当前网页域名的服务器)通讯。但是从其他的服务器中获取数据的功能是受限的
88+
,需要(在 HTTP 头中)添加某些参数。这也是为了用户的数据安全。
7789

7890
![](limitations.png)
7991

80-
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.
92+
非浏览器中的 JavaScript ,一般没有这些限制。例如服务端的 JavaScript 就没有这些限制。现代浏览器还允许通过 JavaScript 来安装浏览器插件或扩展,当然这也是在用户授权的前提下。
8193

82-
## What makes JavaScript unique?
94+
## JavaScript 为什么与众不同?
8395

84-
There are at least *three* great things about JavaScript:
96+
至少有 **3** 件事值得一提:
8597

8698
```compare
87-
+ Full integration with HTML/CSS.
88-
+ Simple things done simply.
89-
+ Supported by all major browsers and enabled by default.
99+
+ HTML/CSS 完全的集成。
100+
+ 使用简单的工具(语言)完成简单的任务。
101+
+ 被所有的主流浏览器支持,并且默认开启。
90102
```
91103

92-
Combined, these three things exist only in JavaScript and no other browser technology.
93-
94-
That's what makes JavaScript unique. That's why it's the most widespread tool to create browser interfaces.
104+
满足这三条的浏览器技术也只有 JavaScript 了。
95105

96-
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.
106+
这就是为什么 JavaScript 与众不同!这也是为什么大家都通过 JavaScript 来跟浏览器交互。
97107

108+
当然,学习一项新技术的时候,最好先看一下他的前景。所以,接下来,我们来看看新的趋势(包含一些新的语言)。
98109

99-
## Languages "over" JavaScript
110+
## JavaScript “ 好 ” 的语言
100111

101-
The syntax of JavaScript does not suit everyone's needs. Different people want different features.
112+
不同的人喜欢不同的功能,JavaScript 的语法也不能够满足所有人。
102113

103-
That's to be expected, because projects and requirements are different for everyone.
114+
这是正常的,因为每个人的项目和需求都不一样。
104115

105-
So recently a plethora of new languages appeared, which are *transpiled* (converted) to JavaScript before they run in the browser.
116+
所以,最近出现了很多不同的语言,这些语言在浏览器中执行之前,都会被**编译**(转化)成 JavaScript
106117

107-
Modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language and autoconverting it "under the hood".
118+
现代的工具编译得很快,并且让用户不可感知。这就允许开发中使用一种新的语言,就和使用 JavaScript 一样。
108119

109-
Examples of such languages:
120+
例如:
110121

111-
- [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.
112-
- [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.
113-
- [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.
122+
* [CoffeeScript](http://coffeescript.org/) JavaScript 的语法糖,他语法简短,精确简捷。通常使用 Ruby 的人喜欢用。
123+
* [TypeScript](http://www.typescriptlang.org/) 主要是是添加了严格类型系统。这样就能简化开发,也能用于开发复杂的系统。TypeScript 是微软开发的。
124+
* [Dart](https://www.dartlang.org/) 是一门独立的语言。他拥有自己的引擎,在非浏览器环境中运行(如:在手机应用中运行)。最开始是 Google 提供的用于替代 JavaScript 的,但是现在,浏览器也需要它和上面的语言一样需要被编译成 JavaScript
114125

115-
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.
126+
当然,还有更多其他的语言。即使我们在使用这些语言,我们也需要知道 JavaScript。因为学习 JavaScript 可以让我们真正明白我们自己在做什么。
116127

117-
## Summary
128+
## 总结
118129

119-
- JavaScript was initially created as a browser-only language, but now it is used in many other environments as well.
120-
- At this moment, JavaScript has a unique position as the most widely-adopted browser language with full integration with HTML/CSS.
121-
- 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.
130+
* JavaScript 最开始是为浏览器设计的一门语言,但是现在也可以在其它的环境中运行。
131+
* 现在,JavaScript 是一门在浏览中使用最广、并且能够很好集成 HTML/CSS 的语言。
132+
* 有很多其他的语言可以编译成 JavaScript,这些语言还提供更多的功能。最好要了解一下这些语言,至少在掌握 JavaScript 之后,需要简单的看一下。

0 commit comments

Comments
 (0)