Skip to content

Commit 4bdc4cd

Browse files
iliakaniliakan
committed
work
1 parent 75cdcb4 commit 4bdc4cd

43 files changed

Lines changed: 1743 additions & 168 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎1-js/1-getting-started/3-devtools/article.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ But in the browser, a user doesn't see the errors by default. So, if something g
88

99
To see errors and get a lot of other useful information about scripts, browsers have embedded "developer tools".
1010

11-
**It is recommended to use Chrome or Firefox for the development.**
11+
**Most often developers lean towards Chrome or Firefox for the development.**
1212

1313
Other browsers also provide developer tools, but are usually in a "catching-up" position, compared to Chrome/Firefox which are the best.
1414

15-
If there is an error in the certain browser only, then we can use it's developer tools, but usually -- Chrome/Firefox.
15+
If there is an error in the certain browser only, then we can always switch to it's developer tools for the concrete problem.
1616

1717
Developer tools are really powerful, there are many features. On this stage let's just look how to open them, look at errors and run JavaScript commands.
1818

‎1-js/2-first-steps/01-hello-world/article.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
# Hello, world!
22

3-
In this chapter we'll create a simple script and see it working.
3+
About 98% of the tutorial is core Javascript, that is platform-independant. So you'll be able to learn how to use Node.JS and other things based on that knowledge.
4+
5+
But we need something like a "base environment" to run our scripts, and browser is probably a good choice.
6+
7+
So we'll start with attaching a script to the webpage. For other environments like Node.JS there are other ways to run it.
48

59
[cut]
610

11+
[todo remove defer/async from here and move to 2nd part?]
12+
713
## The "script" tag
814

15+
[todo need this? and special (need it too?)]
916
```smart header="What if I want to move faster?"
1017
In the case if you've developed with JavaScript already or have a lot of experience in another language, you can skip detailed explanatins and jump to <info:javascript-specials>. There you can find an essense of important features.
1118

‎1-js/2-first-steps/03-structure/article.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ The first overall thing to know is the code structure.
66

77
## Statements
88

9-
The code consists of [statements](https://en.wikipedia.org/wiki/Statement_(computer_science)) -- syntax constructs and commands to perform actions.
9+
[Statements](https://en.wikipedia.org/wiki/Statement_(computer_science)) are syntax constructs and commands to perform actions.
1010

1111
We've already seen a statement `alert('Hello, world!')`, which shows the message.
1212

@@ -36,9 +36,9 @@ alert( 'Hello' )
3636
alert( 'World' )
3737
```
3838

39-
In this case JavaScript interprets the line break as a splitter. Just as if there were a semicolon between the lines.
39+
Here JavaScript interprets the line break as an "implicit" semicolon. That's also called an [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion).
4040

41-
**But it's important that "in most cases" does not mean "always"!**
41+
**In most cases a newline implies a simicolon. But "in most cases" does not mean "always"!**
4242

4343
There are cases when a newline does not mean a semicolon, for example:
4444

@@ -50,22 +50,22 @@ alert(3 +
5050

5151
The code outputs `6`, because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an "incomplete expression". And in this case that's actually fine and comfortable.
5252

53-
**But there are situations where JavaScript "fails" to assume a semicolon break where it is really needed.**
53+
**But there are situations where JavaScript "fails" to assume a semicolon where it is really needed.**
5454

5555
Errors which come appear in such cases are quite hard to find and fix.
5656

5757
````smart header="An example of the error"
58-
For a curious reader who might be interested in a concrete example, check this code out:
58+
If you're curious to see a concrete example, check this code out:
5959
6060
```js run
6161
[1, 2].forEach(alert)
6262
```
6363
6464
It shows `1` then `2`.
6565
66-
No need to think about the meaning of the brackets `[]` and `forEach` just for now -- it does not matter here. Let's just remember the result.
66+
No need to think about the meaning of the brackets `[]` and `forEach`, for now -- it does not matter. Let's just remember the result.
6767
68-
Now we prepend an `alert` statement *not followed by a semicolon*:
68+
Now we prepend the code with an `alert` statement *not followed by a semicolon*:
6969
7070
```js run no-beautify
7171
alert( "There will be an error" ) // shown
@@ -77,16 +77,16 @@ Now if we run it, only the first `alert` is shown, and then an error.
7777
But everything's fine if we add a semicolon:
7878
```js run
7979
alert( "All fine now" ); // shown
80-
[1, 2].forEach(alert) // then this too
80+
[1, 2].forEach(alert) // this works too
8181
```
8282
83-
The error in the former variant occurs because JavaScript engine does not assume a semicolon before square brackets `[...]`, so the code is actually treated as a one-line statement:
83+
The error in the no-semicolon variant occurs because JavaScript engine does not assume a semicolon before square brackets `[...]`, so the code is actually treated as a one-line statement:
8484
8585
```js run no-beautify
8686
alert( "There will be an error" )[1, 2].forEach(alert)
8787
```
8888
89-
And in this particular case, that's just wrong. Hence the error.
89+
And in this particular case, that's just wrong. There must be two independent statements. Hence the error.
9090
9191
````
9292

@@ -154,5 +154,5 @@ Please, don't hesitate to comment your code.
154154

155155
Comments increase the overall code footprint, but that's not a problem at all. There are many tools which minify the code before publishing to production server. They remove comments, so they do not appear in the working scripts. So, the comments do not have any negative effects on production at all.
156156

157-
Further in the tutorial we'll make more notes about how to write the code better, easier to read and maintain. We'll also talk more about comments.
157+
Further in the tutorial we'll devote a special chapter to code style, also explaining how to write better comments.
158158

‎1-js/2-first-steps/04-strict-mode/article.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,10 @@ Looking ahead let's just note that `"use strict"` can be put at the start of a f
5858
5959
It is recommended to always start a script with `"use strict"`, for the following reasons:
6060
61-
1. First, because all modern browsers support it, except Internet Explorer 9 and lower.
61+
1. First, all modern browsers support it. Only outdated ones like Internet Explorer 9 and below do not.
6262
2. Second, the modern JavaScript actually forces us into the strict mode. There are several modern language features like "classes" and "modules" that enable strict mode automatically. So, it's hard to evade it.
6363
64-
Here in the tutorial all code (except where said otherwise) works in `"use strict"`. but we'll still note the subtle differences of what happens if you forget it or if the visitor has an outdated browser. So you will also be able to write a code for IE8 and below if you'd like that.
64+
Here in the tutorial all code (except where said otherwise) works in `"use strict"`. but we'll still note the subtle differences of what happens if you forget it or if the visitor has an outdated browser. So you will also be able to write a code that also works for old IE if you'd like that.
6565
6666
## Summary
6767

‎1-js/2-first-steps/05-variables/3-uppercast-constant/solution.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
We generally use upper case for constants that are "hard-coded" or, in other words, when the value is directly written into the code.
1+
We generally use upper case for constants that are "hard-coded". Or, in other words, when the value is known prior to execution and directly written into the code.
22

3-
In this code, `birthday` is just like that. So we could use the upper case for it.
3+
In this code, `birthday` is exactly like that. So we could use the upper case for it.
44

5-
In contrast, `age` is evaluated in run-time. Today we have one age, a year after we'll have another one. It is constant in a sense that it does not change through the code execution. But it is a bit "less of a constant" than `birthday`, so we should keep the lower case for it.
5+
In contrast, `age` is evaluated in run-time. Today we have one age, a year after we'll have another one. It is constant in a sense that it does not change through the code execution. But it is a bit "less of a constant" than `birthday`, it is calculated, so we should keep the lower case for it.

‎1-js/2-first-steps/05-variables/3-uppercast-constant/task.md‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,16 @@ Examine the following code:
99
```js
1010
const birthday = '18.04.1982';
1111

12-
const age = calculateAgeBasedOn(birthday);
12+
const age = someCode(birthday);
1313
```
1414

15-
Here we have a constant `birthday` date and the `age` is calculated with the help of a function (its code is not provided cause it doesn't matter here).
15+
Here we have a constant `birthday` date and the `age` is calculated from `birthday` with the help of some code (it is not provided for shortness, and because details don't matter here).
1616

17-
Would it be right to name both constants using the upper case? Like this:
17+
Would it be right to use upper case for `birthday`? For `age`? Or even for both?
1818

1919
```js
20-
const BIRTHDAY = '18.04.1982';
20+
const BIRTHDAY = '18.04.1982'; // make uppercase?
2121

22-
const AGE = calculateAgeBasedOn(BIRTHDAY);
22+
const AGE = someCode(BIRTHDAY); // make uppercase?
2323
```
2424

25-
...Or we should use the upper case for only one of them? Or just use lower case everywhere?
26-

‎1-js/2-first-steps/05-variables/article.md‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
# Variables
22

3-
Most of the time, script needs to work with the information.
3+
Most of the time, a script needs to work with the information.
44

5-
If it's an online-shop -- that's going to be the goods and a shopping cart. If it's a chat -- visitors, messages and so on.
5+
If it's an online-shop -- that's going to be the goods and a shopping cart. If it's a chat -- users, messages and so on.
66

77
Variables are used to store the information.
88

99
[cut]
1010

1111
## A variable
1212

13-
A [variable]("https://en.wikipedia.org/wiki/Variable_(computer_science)") is defined as a "named storage" for the information. We can use variables to store the goods, visitors etc.
13+
A [variable]("https://en.wikipedia.org/wiki/Variable_(computer_science)") is a basic "named storage" for the information. We can use variables to store the goods, visitors etc.
1414

1515
To create a variable in JavaScript, we need to use the `let` keyword.
1616

@@ -30,7 +30,7 @@ message = 'Hello'; // store the string
3030
*/!*
3131
```
3232

33-
The string is now saved into the memory area assosiated with that variable. We can access it using the variable name:
33+
The string is now saved into the memory area assosiated with the variable. We can access it using the variable name:
3434

3535
```js run
3636
let message;
@@ -44,8 +44,9 @@ alert( message ); // shows the variable content
4444
To be concise we can merge the variable declaration and assignment into a single line:
4545

4646
```js run
47-
let message = 'Hello!';
48-
alert( message ); // same as above
47+
let message = 'Hello!'; // define the variable and assign the value
48+
49+
alert( message ); // Hello!
4950
```
5051

5152
We can also declare multiple variables in one line:
@@ -54,7 +55,7 @@ We can also declare multiple variables in one line:
5455
let user = 'John', age = 25, message = 'Hello';
5556
```
5657

57-
That might seem shorter, but it's recommended, for the sake of beter readability, to use a single line per variable.
58+
That might seem shorter, but it's not recommended. For the sake of beter readability, please use a single line per variable.
5859

5960
The rewritten code is a bit longer, but easier to read:
6061

@@ -64,6 +65,24 @@ let age = 25;
6465
let message = 'Hello';
6566
```
6667

68+
Some people also write many variables like that:
69+
```js no-beautify
70+
let user = 'John',
71+
age = 25,
72+
message = 'Hello';
73+
```
74+
75+
...Or even in comma-first style:
76+
77+
```js no-beautify
78+
let user = 'John'
79+
,age = 25
80+
,message = 'Hello';
81+
```
82+
83+
Technically, all these variants do the same. So, it's a matter of personal taste and aestetics.
84+
85+
6786
````smart header="`var` instead of `let`"
6887
In older scripts you may also find another keyword: `var` instead of `let`:
6988

@@ -231,9 +250,9 @@ myBirthday = '01.01.2001'; // error, can't reassign the constant!
231250
When a programmer is sure that the variable should never change, he can use `const` to guarantee it, and also to clearly show that fact to everyone.
232251
233252
234-
### Uppercases constants
253+
### Uppercase constants
235254
236-
There is a widespread practice to use constants as aliases for difficult-to-remember and hard-coded prior to execution values.
255+
There is a widespread practice to use constants as aliases for difficult-to-remember values that are known prior to execution.
237256
238257
Such constants are named using capitals and underscores.
239258
@@ -250,10 +269,7 @@ let color = COLOR_ORANGE;
250269
alert( color ); // #FF7F00
251270
```
252271
253-
`COLOR_ORANGE` is much easier to understand and remember than `"#FF7F00"`. Also it is much easier to make a typo in `"#FF7F00"` than in `COLOR_ORANGE`.
254-
255-
The upper case is only used for constants that are "hard-coded" (written in the code before its execution).
256-
272+
`COLOR_ORANGE` is much easier to remember than `"#FF7F00"`. Also it is much easier to mistype in `"#FF7F00"` than in `COLOR_ORANGE`. And when reading the code -- `COLOR_ORANGE` is much more meaningful.
257273
258274
## Name things right
259275

0 commit comments

Comments
 (0)