Merge branch 'master' of https://github.com/iliakan/javascript-tutorial-en
This commit is contained in:
commit
733b0c66b5
19 changed files with 34 additions and 29 deletions
|
@ -89,7 +89,7 @@ There are at least *three* great things about JavaScript:
|
|||
+ 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.
|
||||
|
||||
|
|
|
@ -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".
|
||||
|
||||
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:
|
||||
|
||||
- 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.
|
||||
- [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/).
|
||||
|
||||
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.
|
||||
|
||||
|
|
|
@ -37,7 +37,7 @@ For instance:
|
|||
```
|
||||
|
||||
```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.
|
||||
|
@ -49,7 +49,7 @@ The `<script>` tag has a few attributes that are rarely used nowadays, but we ca
|
|||
|
||||
The `type` attribute: <code><script <u>type</u>=...></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><script <u>language</u>=...></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.
|
||||
|
@ -95,7 +95,7 @@ To attach several scripts, use multiple tags:
|
|||
```
|
||||
|
||||
```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).
|
||||
|
||||
|
|
|
@ -114,7 +114,7 @@ alert('Hello');
|
|||
alert('World'); // This comment follows the statement
|
||||
```
|
||||
|
||||
**Multiline comments start with a forward slash and an asterisk <code>"/*"</code> and end with an asterisk and a forward slash <code>"*/"</code>.**
|
||||
**Multiline comments start with a forward slash and an asterisk <code>/*</code> and end with an asterisk and a forward slash <code>*/</code>.**
|
||||
|
||||
Like this:
|
||||
|
||||
|
|
|
@ -231,7 +231,7 @@ The last three lines may need additional explanations:
|
|||
There are 7 basic types in JavaScript.
|
||||
|
||||
- `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`.
|
||||
- `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`.
|
||||
|
|
|
@ -93,7 +93,7 @@ alert( 1 + '2' ); // '12' (string to the right)
|
|||
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
|
||||
|
|
|
@ -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.
|
||||
|
||||
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.
|
||||
|
||||
|
|
|
@ -87,7 +87,7 @@ For example:
|
|||
```js run
|
||||
let isBoss = confirm("Are you the boss?");
|
||||
|
||||
alert( isBoss ); // true is OK is pressed
|
||||
alert( isBoss ); // true if OK is pressed
|
||||
```
|
||||
|
||||
## Summary
|
||||
|
|
|
@ -385,7 +385,7 @@ These are exceptions. Generally functions names should be concise, but descripti
|
|||
|
||||
## 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!
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
||||
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):
|
||||
|
||||
|
@ -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.
|
||||
|
||||
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:
|
||||
- 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:
|
|||
|
||||

|
||||
|
||||
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.**
|
||||
|
||||
|
|
|
@ -119,7 +119,7 @@ There are two types of indents:
|
|||
|
||||
### 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.
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
# 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()`.
|
||||
|
||||
|
@ -63,8 +63,9 @@ for(let value of Object.values(user)) {
|
|||
}
|
||||
```
|
||||
|
||||
```smart header="`Object.keys/values/entries` ignore symbolic properties"
|
||||
Just like `for..in` loop, these methods ignore properties that use `Symbol(...)` as keys.
|
||||
## Object.keys/values/entries ignore symbolic properties
|
||||
|
||||
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.
|
||||
```
|
||||
|
|
|
@ -83,7 +83,7 @@ class User {
|
|||
Object.assign(User.prototype, sayHiMixin);
|
||||
|
||||
// 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.
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue