This commit is contained in:
Ilya Kantor 2017-06-11 16:24:08 +03:00
commit 733b0c66b5
19 changed files with 34 additions and 29 deletions

View file

@ -89,7 +89,7 @@ There are at least *three* great things about JavaScript:
+ Supported by all major browsers and enabled by default. + Supported by all major browsers and enabled by default.
``` ```
Combined, these 3 things only exist in JavaScript and no other browser technology. Combined, these 3 things exist only in JavaScript and no other browser technology.
That's what makes JavaScript unique. That's why it's the most widespread tool to create browser interfaces. That's what makes JavaScript unique. That's why it's the most widespread tool to create browser interfaces.

View file

@ -10,17 +10,17 @@ There are two archetypes: IDE and lightweight editors. Many people feel comforta
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". 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".
An IDE loads the project (can be many files), and then allows to navigate 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. 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.
If you haven't considered selecting an IDE, look at the following variants: If you haven't considered selecting an IDE, look at the following variants:
- 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. - 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.
- Visual Studio is fine if you're a .NET developer. - 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/))
- Eclipse-based products, like [Aptana](http://www.aptana.com/) and Zend Studio. - Eclipse-based products, like [Aptana](http://www.aptana.com/) and Zend Studio.
- [Komodo IDE](http://www.activestate.com/komodo-ide) and it's lightweight free version [Komodo Edit](http://www.activestate.com/komodo-edit). - [Komodo IDE](http://www.activestate.com/komodo-ide) and its lightweight free version [Komodo Edit](http://www.activestate.com/komodo-edit).
- [Netbeans](http://netbeans.org/). - [Netbeans](http://netbeans.org/).
All of them with the exception of Visual Studio are cross-platform. Visual Studio is now available for Mac and for Windows (https://www.visualstudio.com/vs/visual-studio-mac/) All of the IDEs listed above are available on both Windows and Mac, and the IDEs other than Visual Studio are also available on 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. 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.

View file

@ -37,7 +37,7 @@ For instance:
``` ```
```online ```online
You can run the example clicking on a "Play" button in it's right-top corner. You can run the example by clicking on the "Play" button in its right-top corner.
``` ```
The `<script>` tag contains JavaScript code which is automatically executed when the browser meets the tag. The `<script>` tag contains JavaScript code which is automatically executed when the browser meets the tag.
@ -49,7 +49,7 @@ The `<script>` tag has a few attributes that are rarely used nowadays, but we ca
The `type` attribute: <code>&lt;script <u>type</u>=...&gt;</code> The `type` attribute: <code>&lt;script <u>type</u>=...&gt;</code>
: The old standard HTML4 required a script to have the type. Usually it was `type="text/javascript"`. The modern HTML standard assumes this `type` by default, no attribute is required. : The old standard HTML4 required a script to have a type. Usually it was `type="text/javascript"`. The modern HTML standard assumes this `type` by default, no attribute is required.
The `language` attribute: <code>&lt;script <u>language</u>=...&gt;</code> The `language` attribute: <code>&lt;script <u>language</u>=...&gt;</code>
: This attribute was meant to show the language of the script. As of now, this attribute makes no sense, the language is JavaScript by default. No need to use it. : This attribute was meant to show the language of the script. As of now, this attribute makes no sense, the language is JavaScript by default. No need to use it.
@ -95,7 +95,7 @@ To attach several scripts, use multiple tags:
``` ```
```smart ```smart
As a rule, only simplest scripts are put into HTML. More complex ones reside in separate files. As a rule, only the simplest scripts are put into HTML. More complex ones reside in separate files.
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). 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).

View file

@ -114,7 +114,7 @@ alert('Hello');
alert('World'); // This comment follows the statement alert('World'); // This comment follows the statement
``` ```
**Multiline comments start with a forward slash and an asterisk <code>"/&#42;"</code> and end with an asterisk and a forward slash <code>"&#42;/"</code>.** **Multiline comments start with a forward slash and an asterisk <code>/&#42;</code> and end with an asterisk and a forward slash <code>&#42;/</code>.**
Like this: Like this:

View file

@ -231,7 +231,7 @@ The last three lines may need additional explanations:
There are 7 basic types in JavaScript. There are 7 basic types in JavaScript.
- `number` for numbers of any kind: integer or floating-point. - `number` for numbers of any kind: integer or floating-point.
- `string` for strings. A string may have one more more characters, there's no separate single-character type. - `string` for strings. A string may have one or more characters, there's no separate single-character type.
- `boolean` for `true`/`false`. - `boolean` for `true`/`false`.
- `null` for unknown values -- a standalone type that has a single value `null`. - `null` for unknown values -- a standalone type that has a single value `null`.
- `undefined` for unassigned values -- a standalone type that has a single value `undefined`. - `undefined` for unassigned values -- a standalone type that has a single value `undefined`.

View file

@ -93,7 +93,7 @@ alert( 1 + '2' ); // '12' (string to the right)
alert( '1' + 2 ); // '12' (string to the left) alert( '1' + 2 ); // '12' (string to the left)
``` ```
That only happens when one of arguments is a string. Otherwise values are converted to numbers. That only happens when one of the arguments is a string. Otherwise, values are converted to numbers.
```` ````
## ToBoolean ## ToBoolean

View file

@ -176,7 +176,7 @@ alert( null >= 0 ); // (3) *!*true*/!*
Yeah, mathematically that's strange. The last result states that "`null` is equal or greater than zero". Then one of the comparisons above must be correct, but they are both falsy. Yeah, mathematically that's strange. The last result states that "`null` is equal or greater than zero". Then one of the comparisons above must be correct, but they are both falsy.
The reason is that an equality check `==` and comparisons `> < >= <=` work differently. Comparisons convert `null` to a number, hence treat it as `0`. That's why (1) `null >= 0` is true and (3) `null > 0` is false. The reason is that an equality check `==` and comparisons `> < >= <=` work differently. Comparisons convert `null` to a number, hence treat it as `0`. That's why (3) `null >= 0` is true and (1) `null > 0` is false.
From the other hand, the equality check `==` for `undefined` and `null` works by the rule, without any conversions. They equal each other and don't equal anything else. That's why (2) `null == 0` is false. From the other hand, the equality check `==` for `undefined` and `null` works by the rule, without any conversions. They equal each other and don't equal anything else. That's why (2) `null == 0` is false.

View file

@ -87,7 +87,7 @@ For example:
```js run ```js run
let isBoss = confirm("Are you the boss?"); let isBoss = confirm("Are you the boss?");
alert( isBoss ); // true is OK is pressed alert( isBoss ); // true if OK is pressed
``` ```
## Summary ## Summary

View file

@ -385,7 +385,7 @@ These are exceptions. Generally functions names should be concise, but descripti
## Functions == Comments ## Functions == Comments
Functions should be short and do exactly one thing. If that thing is big, maybe it's worth to split the function into few smaller functions. Sometimes following this rule may be not easy, but it's a definitely good thing. Functions should be short and do exactly one thing. If that thing is big, maybe it's worth to split the function into few smaller functions. Sometimes following this rule may not be that easy, but it's a definitely good thing.
A separate function is not only easier to test and debug -- its very existence is a great comment! A separate function is not only easier to test and debug -- its very existence is a great comment!

View file

@ -48,7 +48,7 @@ For example, here `1+2` results in `3`, and `hello("debugger")` returns nothing,
Let's examine what's going on within the code of the [example page](debugging/index.html). In `hello.js`, click at the line number `4`. Yes, right on the `"4"` digit, not on the code. Let's examine what's going on within the code of the [example page](debugging/index.html). In `hello.js`, click at the line number `4`. Yes, right on the `"4"` digit, not on the code.
Contratulations! You've set a breakpoint. Please also click on the number for line `8`. Congratulations! You've set a breakpoint. Please also click on the number for line `8`.
Should look like this (blue is where you should click): Should look like this (blue is where you should click):
@ -56,7 +56,7 @@ Should look like this (blue is where you should click):
A *breakpoint* is a point of code where the debugger will automatically pause the JavaScript execution. A *breakpoint* is a point of code where the debugger will automatically pause the JavaScript execution.
While the code is paused, we can examine current variables, execute commands in the console etc. In other words, to debug it. While the code is paused, we can examine current variables, execute commands in the console etc. In other words, we can debug it.
We can always find a list of breakpoints in the right pane. That's useful when we have many breakpoints in various files. It allows to: We can always find a list of breakpoints in the right pane. That's useful when we have many breakpoints in various files. It allows to:
- Quickly jump to the breakpoint in the code (by clicking on it in the right pane). - Quickly jump to the breakpoint in the code (by clicking on it in the right pane).
@ -97,7 +97,7 @@ As the breakpoint is set, the execution pauses at the 4th line:
![](chrome-sources-debugger-pause.png) ![](chrome-sources-debugger-pause.png)
Please open the informational dropdowns to the right (labelled with arrows). They allow to examine the current code state: Please open the informational dropdowns to the right (labelled with arrows). They allow you to examine the current code state:
1. **`Watch` -- shows current values for any expressions.** 1. **`Watch` -- shows current values for any expressions.**

View file

@ -119,7 +119,7 @@ There are two types of indents:
### A semicolon ### A semicolon
A semicolons should be after each statement. Even if could possibly be skipped. A semicolon should be present after each statement. Even if it could be possibly be skipped.
There are languages where a semicolon is truly optional. It's rarely used there. There are languages where a semicolon is truly optional. It's rarely used there.

View file

@ -1,7 +1,7 @@
# Object.keys, values, entries # Object.keys, values, entries
Let's step away from the indivitual data structures and talk about the iterations over them. Let's step away from the individual data structures and talk about the iterations over them.
In the previous chapter we saw methods `map.keys()`, `map.values()`, `map.entries()`. In the previous chapter we saw methods `map.keys()`, `map.values()`, `map.entries()`.
@ -63,8 +63,9 @@ for(let value of Object.values(user)) {
} }
``` ```
```smart header="`Object.keys/values/entries` ignore symbolic properties" ## Object.keys/values/entries ignore symbolic properties
Just like `for..in` loop, these methods ignore properties that use `Symbol(...)` as keys.
Just like a `for..in` loop, these methods ignore properties that use `Symbol(...)` as keys.
Usually that's convenient. But if we want symbolic keys too, then there's a separate method [Object.getOwnPropertySymbols](mdn:js/Object/getOwnPropertySymbols) that returns an array of only symbolic keys. Also, the method [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) returns *all* keys. Usually that's convenient. But if we want symbolic keys too, then there's a separate method [Object.getOwnPropertySymbols](mdn:js/Object/getOwnPropertySymbols) that returns an array of only symbolic keys. Also, the method [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) returns *all* keys.
``` ```

View file

@ -83,7 +83,7 @@ class User {
Object.assign(User.prototype, sayHiMixin); Object.assign(User.prototype, sayHiMixin);
// now User can say hi // now User can say hi
new User("Dude").sayHi(); // Hi Dude! new User("Dude").sayHi(); // Hello Dude!
``` ```
Please note that the call to the parent method `super.say()` from `sayHiMixin` looks for the method in the prototype of that mixin, not the class. Please note that the call to the parent method `super.say()` from `sayHiMixin` looks for the method in the prototype of that mixin, not the class.

View file

@ -25,7 +25,7 @@ function sayHi() {
} }
// global functions are accessible as properties of window // global functions are accessible as properties of window
alert(window.sayHi); window.sayHi();
``` ```
And here we use it as a browser window, to see the window height: And here we use it as a browser window, to see the window height:

View file

@ -238,7 +238,7 @@ Page lifecycle events:
- All scripts are executed except those that are external with `async` or `defer` - All scripts are executed except those that are external with `async` or `defer`
- Images and other resources may still continue loading. - Images and other resources may still continue loading.
- `load` event on `window` triggers when the page and all resources are loaded. We rarely use it, because there's usually no need to wait for so long. - `load` event on `window` triggers when the page and all resources are loaded. We rarely use it, because there's usually no need to wait for so long.
- `beforeload` event on `window` triggers when the user wants to leave the page. If it returns a string, the browser shows a question whether the user really wants to leave or not. - `beforeunload` event on `window` triggers when the user wants to leave the page. If it returns a string, the browser shows a question whether the user really wants to leave or not.
- `unload` event on `window` triggers when the user is finally leaving, in the handler we can only do simple things that do not involve delays or asking a user. Because of that limitation, it's rarely used. - `unload` event on `window` triggers when the user is finally leaving, in the handler we can only do simple things that do not involve delays or asking a user. Because of that limitation, it's rarely used.
- `document.readyState` is the current state of the document, changes can be tracked in the `readystatechange` event: - `document.readyState` is the current state of the document, changes can be tracked in the `readystatechange` event:
- `loading` -- the document is loading. - `loading` -- the document is loading.

View file

@ -53,7 +53,7 @@ The array may have more than one element.
For instance: For instance:
```js run ```js run
lar str = "JavaScript is a programming language"; let str = "JavaScript is a programming language";
let result = str.match( *!*/JAVA(SCRIPT)/i*/!* ); let result = str.match( *!*/JAVA(SCRIPT)/i*/!* );

View file

@ -223,7 +223,7 @@ That's sometimes called "callback hell" or "pyramid of doom".
![](callback-hell.png) ![](callback-hell.png)
The "pyramid" of nested calls grows to the right with every asynchronous action. Soon it spirales out of control. The "pyramid" of nested calls grows to the right with every asynchronous action. Soon it spirals out of control.
So this way of coding isn't very good. So this way of coding isn't very good.

View file

@ -41,8 +41,8 @@ The idea is that the result is passed through the chain of `.then` handlers.
Here the flow is: Here the flow is:
1. The initial promise resolves in 1 second `(*)`, 1. The initial promise resolves in 1 second `(*)`,
2. Then the `.this` handler is called `(**)`. 2. Then the `.then` handler is called `(**)`.
3. The value that it returns is passed to the next `.this` handler `(***)` 3. The value that it returns is passed to the next `.then` handler `(***)`
4. ...and so on. 4. ...and so on.
As the result is passed along the chain of handlers, we can see a sequence of `alert` calls: `1` -> `2` -> `4`. As the result is passed along the chain of handlers, we can see a sequence of `alert` calls: `1` -> `2` -> `4`.

View file

@ -1,7 +1,11 @@
# The JavaScript Tutorial # The JavaScript Tutorial
This repository hosts the content of the JavaScript Tutorial, published at [https://javascript.info](https://javascript.info). This repository hosts the content of the Modern JavaScript Tutorial, published at [https://javascript.info](https://javascript.info).
Other languages:
- Russian: [https://github.com/iliakan/javascript-tutorial-ru](https://github.com/iliakan/javascript-tutorial-ru).
- Chinese: the ongoing translation at [https://github.com/iliakan/javascript-tutorial-cn](https://github.com/iliakan/javascript-tutorial-cn), go ahead to join.
Please use this repository to file issues and suggest PRs for the text. Please use this repository to file issues and suggest PRs for the text.