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/01-getting-started/1-intro/article.md
+13-13Lines changed: 13 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -28,7 +28,7 @@ Different engines have different "codenames", for example:
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, "ChakraCore" for Microsoft Edge, "Nitro" and "SquirrelFish" for Safari etc.
30
30
31
-
The 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.
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
32
33
33
```smart header="How engines work?"
34
34
@@ -38,41 +38,41 @@ Engines are complicated. But the basics are easy.
38
38
2. The engine (embedded if it's a browser) reads the script ("parses") and converts ("compiles") it to the machine language.
39
39
3. And then it runs, pretty fast.
40
40
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. That's why the code runs fast.
41
+
The engine applies optimizations on every stage of the process. It even watches the script as it runs, analyzes the data that flows through it and applies optimizations to the machine-code basing on that knowledge. That's why the code runs fast.
42
42
```
43
43
44
44
## What can in-browser JavaScript do?
45
45
46
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.
47
47
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.
48
+
The capabilities greatly depend on the environment that 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.
49
49
50
50
In-browser JavaScript can do everything related to webpage manipulation, interaction with the user and the webserver.
51
51
52
52
For instance, in-browser JavaScript is able to:
53
53
54
54
- Add new HTML to the page, change the existing content, modify styles.
55
-
- React on user actions, run on mouse clicks, pointer movements, key presses.
55
+
- React to user actions, run on mouse clicks, pointer movements, key presses.
56
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
57
- Get and set cookies, ask questions to the visitor, show messages.
58
-
- Remember the data on the browser side ("local storage").
58
+
- Remember the data on the client-side ("local storage").
59
59
60
60
## What in-browser JavaScript can NOT do?
61
61
62
-
JavaScript 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.
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.
63
63
64
64
The examples of such restrictions are:
65
65
66
-
- JavaScript on the 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.
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.
67
67
68
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.
69
69
70
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
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).
72
72
73
-
That is called a "Same Origin Policy". To workaround that, *both pages* must contain a special JavaScript code that handles data exchange.
73
+
This is called the "Same Origin Policy". To work around that, *both pages* must contain a special JavaScript code that handles data exchange.
74
74
75
-
The limitation is again for user's safety. A page from `http://anysite.com` which a user has opened occasionally must not be able to open or access another browser tab with the URL `http://gmail.com` and steal information from there.
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 open or access another browser tab with the URL `http://gmail.com` and steal information from there.
76
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 the explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's safety limitations.
77
77
78
78

@@ -100,15 +100,15 @@ While planning to learn a new technology, it's beneficial to check its perspecti
100
100
101
101
The syntax of JavaScript does not suit everyone's needs. Different people want different features.
102
102
103
-
That's normal, because projects and requirements are different for everyone.
103
+
That's to be expected, because projects and requirements are different for everyone.
104
104
105
105
So recently a plethora of new languages appeared, which are *transpiled* (converted) to JavaScript before they run in the browser.
106
106
107
-
The modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language, autoconverting it "under the hood".
107
+
Modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language and autoconverting it "under the hood".
108
108
109
109
Examples of such languages:
110
110
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.
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 devs like it.
112
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
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.
114
114
@@ -117,5 +117,5 @@ There are more. Of course even if we use one of those languages, we should also
117
117
## Summary
118
118
119
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 a most widely adopted browser language with full integration with HTML/CSS.
120
+
- At this moment, JavaScript has a unique position as the most widely adopted browser language with full integration with HTML/CSS.
121
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.
Copy file name to clipboardExpand all lines: 1-js/01-getting-started/2-code-editors/article.md
+5-5Lines changed: 5 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -10,9 +10,9 @@ There are two archetypes: IDE and lightweight editors. Many people feel comforta
10
10
11
11
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 said, that's not just an editor, but a full-scale "development environment".
12
12
13
-
An IDE loads the project (can be many files), and then allows navigation between files, provides autocompletion based on the whole project, integrates with version management system (like [git](https://git-scm.com/)), with testing environment and other "project-level" stuff.
13
+
An IDE loads the project (can be many files), and then allows navigation between files, provides autocompletion based on the whole project, integrates with a version management system (like [git](https://git-scm.com/)), a testing environment and other "project-level" stuff.
14
14
15
-
If you haven't considered selecting an IDE, look at the following variants:
15
+
If you haven't considered selecting an IDE yet, look at the following variants:
16
16
17
17
- IntelliJ editors: [WebStorm](http://www.jetbrains.com/webstorm/) for frontend development and [PHPStorm (PHP)](http://www.jetbrains.com/phpstorm/), [IDEA (Java)](http://www.jetbrains.com/idea/), [RubyMine (Ruby)](http://www.jetbrains.com/ruby/) and other if you need additional languages.
18
18
- 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/))
@@ -40,22 +40,22 @@ The following options deserve your attention:
- Vim, Emacs are cool, if you know how to use them.
43
+
- Vim and Emacs are also cool, if you know how to use them.
44
44
45
45
## My favorites
46
46
47
47
The personal preference of the author is to have both an IDE for projects and a lightweight editor for quick and easy file editing.
48
48
49
49
I'm using:
50
50
51
-
-[WebStorm](http://www.jetbrains.com/webstorm/) for JS, and if there is one more language in the project, then I switch to other Jetbrains editors like [PHPStorm](http://www.jetbrains.com/phpstorm/) (PHP), [IDEA](http://www.jetbrains.com/idea/) (Java), [RubyMine](http://www.jetbrains.com/ruby/) (Ruby). There are editors for other languages too, but I didn't use them.
51
+
-[WebStorm](http://www.jetbrains.com/webstorm/) for JS, and if there is one more language in the project, then I switch to other Jetbrains editors like [PHPStorm](http://www.jetbrains.com/phpstorm/) (PHP), [IDEA](http://www.jetbrains.com/idea/) (Java), [RubyMine](http://www.jetbrains.com/ruby/) (Ruby). There are editors for other languages too, but I haven't used them.
52
52
- As a lightweight editor -- [Sublime Text](http://www.sublimetext.com) or [Atom](https://atom.io/).
53
53
54
54
If you don't know what to choose -- you can consider these ones.
55
55
56
56
## Let's not argue
57
57
58
-
The editors in the lists above are those that me or my friends -- good developers are using for a long time and are happy with.
58
+
The editors in the lists above are those that me or my friends -- good developers have been using for a long time and are happy with.
59
59
60
60
There are other great editors in our big world, please choose the one you like the most.
Copy file name to clipboardExpand all lines: 1-js/01-getting-started/3-devtools/article.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
1
# Developer console
2
2
3
-
A code is prone to errors. You are quite likely to have 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)).
3
+
Code is prone to errors. You are quite likely to have 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)).
4
4
5
5
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.
6
6
7
7
To see errors and get a lot of other useful information about scripts, browsers have embedded "developer tools".
8
8
9
-
Most often developers lean towards Chrome or Firefox for the development, because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catching-up" to Chrome or Firefox. So most people have a "favorite" browser and switch to others if a problem is browser-specific.
9
+
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 "catching-up" to Chrome or Firefox. So most people have a "favorite" browser and switch to others if a problem is browser-specific.
10
10
11
11
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.
12
12
@@ -18,7 +18,7 @@ Open the page [bug.html](bug.html).
18
18
19
19
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.
20
20
21
-
Press the key `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`.
21
+
Press `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`.
22
22
23
23
The developer tools will open on the Console tab by default.
24
24
@@ -40,13 +40,13 @@ Now we can see errors and that's enough for the start. We'll be back to develope
40
40
41
41
Most other browsers use `key:F12` to open developer tools.
42
42
43
-
The look & feel of them is quite similar. Once you know how to use one of them (can start with Chrome), you can easily switch to another.
43
+
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.
44
44
45
45
## Safari
46
46
47
-
Safari (Mac browser, not supported for Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
47
+
Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
48
48
49
-
Open Preferences and go to "Advanced" pane. There's a checkbox at the bottom of it:
49
+
Open Preferences and go to "Advanced" pane. There's a checkbox at the bottom:
Copy file name to clipboardExpand all lines: 1-js/02-first-steps/01-hello-world/article.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ The tutorial that you're reading is about core JavaScript, which is platform-ind
4
4
5
5
But, we need a working environment to run our scripts, and, just because this book is online, the browser is a good choice. We'll keep the amount of browser-specific commands (like `alert`) to a minimum, so that you don't spend time on them if you plan to concentrate on another environment like Node.JS. On the other hand, browser details are explained in detail in the [next part](/ui) of the tutorial.
6
6
7
-
So first, let's see how to attach a script to the webpage. For server-side environments, you can just execute it with a command like `"node my.js"` for Node.JS.
7
+
So first, let's see how to attach a script to a webpage. For server-side environments, you can just execute it with a command like `"node my.js"` for Node.JS.
8
8
9
9
10
10
[cut]
@@ -45,7 +45,7 @@ The `<script>` tag contains JavaScript code which is automatically executed when
45
45
46
46
## The modern markup
47
47
48
-
The `<script>` tag has a few attributes that are rarely used nowadays, but we can find them in the old code:
48
+
The `<script>` tag has a few attributes that are rarely used nowadays, but we can find them in old code:
49
49
50
50
The `type` attribute: <code><script <u>type</u>=...></code>
51
51
@@ -70,15 +70,15 @@ Comments before and after scripts.
70
70
71
71
If we have a lot of JavaScript code, we can put it into a separate file.
72
72
73
-
The script file is attached to HTML with `src` attribute:
73
+
The script file is attached to HTML with the `src` attribute:
74
74
75
75
```html
76
76
<scriptsrc="/path/to/script.js"></script>
77
77
```
78
78
79
79
Here `/path/to/script.js` is an absolute path to the file with the script (from the site root).
80
80
81
-
It is also possible to provide a path relative to the current page. For instance, `src="script.js"` would mean a file `"script.js"`from the current folder.
81
+
It is also possible to provide a path relative to the current page. For instance, `src="script.js"` would mean a file `"script.js"`in the current folder.
82
82
83
83
We can give a full URL as well, for instance:
84
84
@@ -99,7 +99,7 @@ As a rule, only the simplest scripts are put into HTML. More complex ones reside
99
99
100
100
The benefit of a separate file is that the browser will download it and then store in its [cache](https://en.wikipedia.org/wiki/Web_cache).
101
101
102
-
After this, other pages which want the same script will take it from the cache instead of downloading it. So the file is actually downloaded only once.
102
+
After this, other pages that want the same script will take it from the cache instead of downloading it. So the file is actually downloaded only once.
103
103
104
104
That saves traffic and makes pages faster.
105
105
```
@@ -134,4 +134,4 @@ The example above can be split into two scripts to work:
134
134
- A script in an external file can be inserted with `<script src="path/to/script.js"></script>`.
135
135
136
136
137
-
There is much more about browser scripts and their interaction with the web-page. But let's keep in mind that this part of the tutorial is devoted to JavaScript language, so we shouldn't distract ourselves from it. We'll be using a browser as a way to run JavaScript, which is very convenient for online reading, but yet one of many.
137
+
There is much more to learn about browser scripts and their interaction with the web-page. But let's keep in mind that this part of the tutorial is devoted to the JavaScript language, so we shouldn't distract ourselves from it. We'll be using a browser as a way to run JavaScript, which is very convenient for online reading, but yet one of many.
0 commit comments