You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/1-getting-started/1-intro/article.md
+20-62Lines changed: 20 additions & 62 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,51 +18,44 @@ When JavaScript was created, it initially had another name: "LiveScript". But Ja
18
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.
19
19
```
20
20
21
-
At present, JavaScript can execute not only in the browser, but also on the server, or actually on any device where a special program called [an interpreter]("http://en.wikipedia.org/wiki/Interpreter_(computing)") is installed. The execution process is called "an interpretation".
21
+
At present, JavaScript can execute not only in the browser, but also on the server, or actually on any device where exists a special program called [the JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine).
22
22
23
-
The browser has an embedded JavaScript interpreter, sometimes it's also called a "JavaScript engine" or a "JavaScript virtual machine".
23
+
The browser has an embedded engine, sometimes it's also called a "JavaScript virtual machine".
24
24
25
25
Different engines have different "codenames", for example:
26
26
27
-
-[V8 engine]("https://en.wikipedia.org/wiki/V8_(JavaScript_engine)") -- in Chrome and Opera.
27
+
-[V8]("https://en.wikipedia.org/wiki/V8_(JavaScript_engine)") -- in Chrome and Opera.
28
28
-[Gecko]("https://en.wikipedia.org/wiki/Gecko_(software)") -- in Firefox.
29
29
- ...There are other codenames like "Trident", "Chakra" for different versions of IE, "Nitro" and "SquirrelFish" for Safari etc.
30
30
31
-
The codenames are good to know. They are used when searching for detailed information in the internet. Also, we'll sometimes reference them further in the tutorial. Instead of the words "Chrome supports feature..." we'd rather say "V8 supports feature...", not just because it's more precise, but because that also implies Opera and Node.JS.
31
+
These terms above are good to remember, because they are used in developer articles in 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
32
33
-
```smart header="Compilation and interpretation"
34
-
There are two general approaches to execute programs: "compilation" and "interpretation".
33
+
```smart header="How the engines work?"
35
34
36
-
- *Compilers* convert the program text (source code) to binary code (or kind-of) without executing it. When a developer wants to publish the program, he runs a compiler with the source code and then distributes the binary files that it produces.
37
-
- *Interpreters*, and in particular the one embedded in the browser -- get the source code and execute it "as is".
38
-
39
-
As we can see, an interpretation is simpler. No intermediate steps involved. But a compilation is more powerful, because the binary code is more "machine-friendly" and runs faster at the end user.
40
-
41
-
Modern javascript engines actually combine these approaches into one:
35
+
Engines are complicated. But the basics are easy.
42
36
43
37
1. The script is written and distributed as a plain text (can be compressed/optimized by so-called "javascript minifiers").
44
-
2. The engine (in-browser for the web) reads the script and converts it to the machine language. And then it runs it. That's why JavaScript executes very fast.
45
-
46
-
Even more than that, the binary code may be adjusted later, through the process of its execution. The engine learns more about the actual data that it works with and then can optimize it better.
38
+
2. The engine (embedded if it's a browser) reads the script ("parses") and converts ("compiles") it to the machine language.
39
+
3. And then it runs, pretty fast.
47
40
48
-
So the term "interpretation" is used mostly for historical reasons. We do know what there's actually a two-stage (at least) process behind it.
41
+
The engine applies optimizations on every stage of the process. It even watches the script as it runs, analyzes the data which flows through it and applies optimizations to the machine-code basing on that knowledge.
49
42
```
50
43
51
44
## What in-browser JavaScript can do?
52
45
53
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.
54
47
55
-
Other capabilities depend on the environment which runs JavaScript. For instance, Node.JS has functionality that allows JavaScript to read/write arbitrary files, perform network requests etc.
48
+
The capabilities greatly depend on the environment which runs JavaScript. For instance, [Node.JS](https://wikipedia.org/wiki/Node.js) supports functions that allows JavaScript to read/write arbitrary files, perform network requests etc.
56
49
57
-
In the browser JavaScript can do everything related to webpage manipulation, interaction with the user and the webserver.
50
+
In-browser JavaScript can do everything related to webpage manipulation, interaction with the user and the webserver.
58
51
59
52
For instance, in-browser JavaScript is able to:
60
53
61
54
- Add new HTML to the page, change the existing content, modify styles.
62
55
- React on user actions, run on mouse clicks, pointer movements, key presses.
63
-
- Send requests over the network to remote servers, download and upload data without reloading the page (a so-called "AJAX" technology).
64
-
- Get and set cookies, prompt user for the data, show messages.
65
-
-Store data in-browser ("localStorage").
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 browser side ("local storage").
66
59
67
60
## What in-browser JavaScript can NOT do?
68
61
@@ -74,7 +67,7 @@ The examples of such restrictions are:
74
67
75
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.
76
69
77
-
There are ways to interact with camera/microphone and other devices, but they require an explicit user's permission. So a JavaScript-enabled page may not sneakily enable a web-camera, observe the surroundings and send the information to the NSA.
70
+
There are ways to interact with camera/microphone and other devices, but they require an explicit user's 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).
78
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. Such action is allowed. But even in this case, JavaScript from one page may not access the other if they compe from different sites (from a different domain, protocol or port).
79
72
80
73
That is called a "Same Origin Policy". To workaround that, *both pages* must contain a special JavaScript code that handles data exchange.
@@ -102,60 +95,25 @@ That's what makes JavaScript unique. That's why it is the most widespread way of
102
95
103
96
While planning to learn a new technology, it's beneficial to check it's perspectives. So let's move on to the modern trends that include new languages and browser abilities.
104
97
105
-
## HTML 5
106
-
107
-
*HTML 5* is an evolution of HTML which adds new tags and what's more important -- new browser abilities, accessable from JavaScript.
108
-
109
-
Few examples:
110
-
111
-
- Write files on disk (in a "sandbox", not to any folder).
112
-
- A database embedded in the browser, to keep data on a user's computer and effeciently operate on it.
113
-
- Multitasking with the usage of many CPU cores in one time.
114
-
- Audio/video playback.
115
-
- 2d and 3d-drawing with hardware acceleration support, just like in modern games.
116
-
117
-
Many new abilities are still in progress, but browsers gradually improve the support for them.
118
-
119
-
```summary
120
-
The trend: browser can do more and more, it is becoming more like an all-purpose desktop application.
121
-
```
122
-
123
-
Still, there is a small gotcha with those "extra-fresh" modern browser abilities. Sometimes browsers try to implement them on very early stages when they are nor fully defined neither agreed upon, but are so interesting that the developers just can't wait.
124
-
125
-
...As the time goes, the specification matures and changes, and browsers must adapt it. That may lead to errors in the older code which was too eager to use the early version. So one should think twice before relying on things that are in draft yet.
126
-
127
-
But what's great -- eventually all browsers tend to follow the standard. There are much less differences between them now than only a couple years ago.
128
-
129
-
```summary
130
-
The trend: browsers, though eager for new features, tend to be compatible with the standard.
131
-
```
132
-
133
-
## New ECMAScript
134
-
135
-
JavaScript evolves. The upcoming ECMAScript-2016 standard adds more language-level features which make the syntax more capable and expressive.
136
-
137
-
Modern browsers improve their engines to raise JavaScript execution script, fix bugs and try to follow the standards.
138
-
139
-
```summary
140
-
The trend: JavaScript is becoming faster, gets new syntax and language features.
141
-
```
142
98
143
99
## Languages "over" JavaScript
144
100
145
-
The syntax of JavaScript does not suit everyone's needs: some people think that it's too flexible, the others consider it too limited, the third ones want to add new features absent in the standard...
101
+
The syntax of JavaScript does not suit everyone's needs. Different people want different features.
146
102
147
103
That's normal, because projects and requirements are different for everyone.
148
104
149
-
So recently a plethora of new languages appeared, which are *transpiled* (converted) to JavaScript before they run.
105
+
So recently a plethora of new languages appeared, which are *transpiled* (converted) to JavaScript before they run in the browser.
150
106
151
-
The transpilation happens automatically, modern tools make the process very fast and transparent, actually allowing developers to code in another language. But they still should know JavaScript, to better understand what they are doing.
107
+
The modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language, autoconverting it "under the hood".
152
108
153
109
Examples of such languages:
154
110
155
111
-[CoffeeScript](http://coffeescript.org/) is a "syntax sugar" for JavaScript, it introduces shorter syntax, allowing to write more precise and clear code. Usually Ruby guys like it.
156
112
-[TypeScript](http://www.typescriptlang.org/) is concentrated on adding "strict data typing", to simplify development and support of complex systems. Developed by Microsoft.
157
113
-[Dart](https://www.dartlang.org/) is a standalone language that has it's 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 browsers require it to be transpiled to JavaScript just like the ones above.
158
114
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.
116
+
159
117
## Summary
160
118
161
119
- JavaScript was initially created as a browser-only language, but now used in many other environments as well.
The [latest standard](http://www.ecma-international.org/publications/standards/Ecma-262.htm) was approved in June 2015.
4
+
The JavaScript language steadily evolves. The new proposals get analyzed and, if they look worthy, are appended to the list at <https://tc39.github.io/ecma262/> and then progress to the [specification](http://www.ecma-international.org/publications/standards/Ecma-262.htm).
5
5
6
-
As it includes a lot of new features, most browsers implement them partially. You can find the current state of the support at<https://kangax.github.io/compat-table/es6/>.
6
+
It's quite common for the engine to implement only the part of the standard. Different engines have their own ideas about what's to implement first. They may implement proposals that are not approved yet and fail to implement things that are in the spec, because they are less interesting or just harder. A good page to see the current state of support is<https://kangax.github.io/compat-table/es6/> (that's for the future when you know the language).
7
7
8
-
## Single-engine app
8
+
We are going to learn the most up-to-date JavaScript.
9
9
10
-
If a project is developed for a single JavaScript engine, like V8 (Node.JS, Chrome), then we can use V8-supported features. That's a lot.
11
-
12
-
Most notably, V8 supports many of the new features only if the code is running in the "strict mode" (modern mode), which should be enabled explicitly using a directive `'use strict';` at the start.
13
-
14
-
You will find most code in this tutorial using this directive and, because of that, runnable in Chrome.
10
+
## Babel.JS
15
11
16
-
But what if we're writing a cross-browser application? Different browsers support different subsets of ES-2015.
12
+
...But when we use all the modern features of the language, some engines may fail to support such code.
17
13
18
14
Here comes Babel.JS.
19
15
20
-
## Babel.JS
21
-
22
16
[Babel.JS](https://babeljs.io) is a [transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler). It rewrites the modern JavaScript code into the previous standard.
23
17
24
18
Actually, there are two parts in Babel:
25
19
26
20
1. The transpiler program, which rewrites the code.
27
21
28
-
The transpiler runs on a developer's computer. It rewrites the code, which is then bundled by a project build system (like [webpack](http://webpack.github.io/) or [brunch](http://brunch.io/)). Most build systems can support Babel easily. One just needs to setup the build system itself.
29
-
2. JavaScript library.
30
-
31
-
An additional JavaScript library with modern JavaScript functions for the browsers that do not have them built-in (yet). The library must be attached to each webpage which relies on these functions.
22
+
The transpiler runs on a developer's computer. It rewrites the code, which is then bundled by a project build system (like [webpack](http://webpack.github.io/) or [brunch](http://brunch.io/)). Most build systems can support Babel easily.
32
23
33
-
There is a special "play" mode of Babel.JS which merges both parts in a single in-browser script.
24
+
2. The polyfill.
34
25
35
-
The usage looks like this:
26
+
For some functions we also need add a special script that should run before our scripts and introduce modern functions that the engine may not support by itself. There's a term "polyfill" for such scripts.
36
27
37
-
```html run
38
-
*!*
39
-
<!-- browser.js is on my server please don't hotlink -->
The two interesting variants are [babel polyfill](https://babeljs.io/docs/usage/polyfill/) that supports a lot, but is big and the [polyfill.io](http://polyfill.io) service that allows to load/construct polyfills on-demand, depending on the features we need.
42
29
43
-
<scripttype="text/babel">
44
-
let arr = ["hello", 2];
30
+
The transpiler and/or polyfill may be not needed if we orient towards more-or-less modern engines and don't use rarely supported features.
45
31
46
-
let [str, times] = arr;
32
+
## Examples in the tutorial
47
33
48
-
alert( str.repeat(times) ); // hellohello
49
-
</script>
34
+
```warn header="Browser support is required"
35
+
Examples that use modern JS will work only if your browser supports it.
50
36
```
51
37
52
-
Script `browser.min.js` is attached to the top of the page. It automatically transpiles and runs the scripts with `type="text/babel"`.
53
-
54
-
The size of `browser.min.js` is above 1 megabyte, because it includes the transpiler. Hence such usage is only for "playing" and not recommended for production.
38
+
````online
39
+
Most examples are runnable at-place, like here:
55
40
56
-
Also:
57
-
58
-
- There is a "try it" page on <https://babeljs.io/repl/> which allows to run snippets of code.
59
-
-[JSBin](http://jsbin.com) allows to use "ES6/Babel" mode for JS, see [this snippet](http://jsbin.com/daxihelolo/edit?js,output) as an example.
60
-
61
-
# Examples on this site
62
-
63
-
```warn header="Browser support is required"
64
-
Examples that use ES-2015 will work only if your browser supports it.
41
+
```js run
42
+
alert('Press the "Play" button in the upper-right corner to run');
65
43
```
66
44
67
-
Sometimes it means that when running an example in a non-supporting browser, an error is shown.
45
+
...But if it uses a feature that your browser does not support, an error is shown.
68
46
69
47
That doesn't mean that the example is wrong! It's just the browser lacking the support for certain features yet.
48
+
````
70
49
71
-
[Chrome Canary](https://www.google.com/chrome/browser/canary.html) is recommended, most examples work in it.
72
-
73
-
[Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/channel/#developer) is fine too, but it has certain glitches. Like: [let](/let-const) variables working only with when the script type contains `version=1.7` or `1.8`: `<script type="application/javascript;version=1.7">`. Most other browsers do not understand such script type. This site uses a special trick to workaround that, so that the scripts work in both Firefox and other browsers.
74
-
75
-
And even if your browser does not support some code, you can run it through Babel.JS, on the page [Babel: try it out](https://babeljs.io/repl/)!
76
-
77
-
That would be fine, because on production everyone's using Babel anyway.
50
+
[Chrome Canary](https://www.google.com/chrome/browser/canary.html) is good for more examples.
78
51
79
-
Once again, let's note that the most up-to-date situation with support is reflected on <https://kangax.github.io/compat-table/es6/>.
52
+
Note that on production we can use Babel to translate the code into suitable for less recent browsers, so there will be no such limitation, the code will run everywhere.
80
53
81
-
Now we can go coding, but we need a good code editor for that. That is discussed in the next session.
54
+
Now we can go coding, so let's choose a good code editor.
0 commit comments