Skip to content

Commit d9bc5e2

Browse files
TMatrixTMatrix
authored
Merge pull request #1 from iliakan/master
Bringing fork up to date
2 parents ba0e4df + 7bfdc06 commit d9bc5e2

File tree

85 files changed

+513
-349
lines changed

Some content is hidden

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

85 files changed

+513
-349
lines changed

‎1-js/01-getting-started/1-intro/article.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ The browser has an embedded engine, sometimes it's also called a "JavaScript vir
2525
Different engines have different "codenames", for example:
2626

2727
- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- in Chrome and Opera.
28-
- [Gecko](https://en.wikipedia.org/wiki/Gecko_(software)) -- in Firefox.
28+
- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- in Firefox.
2929
- ...There are other codenames like "Trident", "Chakra" for different versions of IE, "ChakraCore" for Microsoft Edge, "Nitro" and "SquirrelFish" for Safari etc.
3030

3131
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.
@@ -108,7 +108,7 @@ Modern tools make the transpilation very fast and transparent, actually allowing
108108

109109
Examples of such languages:
110110

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.
111+
- [CoffeeScript](http://coffeescript.org/) is a "syntactic sugar" for JavaScript, it introduces shorter syntax, allowing to write more precise and clear code. Usually Ruby devs like it.
112112
- [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.
113113
- [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.
114114

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

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
# Hello, world!
2+
3+
The tutorial that you're reading is about core JavaScript, which is platform-independent. Further on, you will learn Node.JS and other platforms that use it.
4+
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+
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+
9+
10+
[cut]
11+
12+
## The "script" tag
13+
14+
JavaScript programs can be inserted in any part of an HTML document with the help of the `<script>` tag.
15+
16+
For instance:
17+
18+
```html run height=100
19+
<!DOCTYPE HTML>
20+
<html>
21+
22+
<body>
23+
24+
<p>Before the script...</p>
25+
26+
*!*
27+
<script>
28+
alert( 'Hello, world!' );
29+
</script>
30+
*/!*
31+
32+
<p>...After the script.</p>
33+
34+
</body>
35+
36+
</html>
37+
```
38+
39+
```online
40+
You can run the example by clicking on the "Play" button in its right-top corner.
41+
```
42+
43+
The `<script>` tag contains JavaScript code which is automatically executed when the browser meets the tag.
44+
45+
46+
## The modern markup
47+
48+
The `<script>` tag has a few attributes that are rarely used nowadays, but we can find them in old code:
49+
50+
The `type` attribute: <code>&lt;script <u>type</u>=...&gt;</code>
51+
52+
: 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.
53+
54+
The `language` attribute: <code>&lt;script <u>language</u>=...&gt;</code>
55+
: 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.
56+
57+
Comments before and after scripts.
58+
: In really ancient books and guides, one may find comments inside `<script>`, like this:
59+
60+
```html no-beautify
61+
<script type="text/javascript"><!--
62+
...
63+
//--></script>
64+
```
65+
66+
These comments were supposed to hide the code from an old browser that didn't know about a `<script>` tag. But all browsers born in the past 15+ years don't have any issues. We mention it here, because such comments serve as a sign. If you see that somewhere -- that code is probably really old and not worth looking into.
67+
68+
69+
## External scripts
70+
71+
If we have a lot of JavaScript code, we can put it into a separate file.
72+
73+
The script file is attached to HTML with the `src` attribute:
74+
75+
```html
76+
<script src="/path/to/script.js"></script>
77+
```
78+
79+
Here `/path/to/script.js` is an absolute path to the file with the script (from the site root).
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"` in the current folder.
82+
83+
We can give a full URL as well, for instance:
84+
85+
```html
86+
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
87+
```
88+
89+
To attach several scripts, use multiple tags:
90+
91+
```html
92+
<script src="/js/script1.js"></script>
93+
<script src="/js/script2.js"></script>
94+
…
95+
```
96+
97+
```smart
98+
As a rule, only the simplest scripts are put into HTML. More complex ones reside in separate files.
99+
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+
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+
104+
That saves traffic and makes pages faster.
105+
```
106+
107+
````warn header="If `src` is set, the script content is ignored."
108+
A single `<script>` tag can't have both the `src` attribute and the code inside.
109+
110+
This won't work:
111+
112+
```html
113+
<script *!*src*/!*="file.js">
114+
alert(1); // the content is ignored, because src is set
115+
</script>
116+
```
117+
118+
We must choose: either it's an external `<script src="…">` or a regular `<script>` with code.
119+
120+
The example above can be split into two scripts to work:
121+
122+
```html
123+
<script src="file.js"></script>
124+
<script>
125+
alert(1);
126+
</script>
127+
```
128+
````
129+
130+
## Summary
131+
132+
- We can use a `<script>` tag to add JavaScript code to the page.
133+
- The `type` and `language` attributes are not required.
134+
- A script in an external file can be inserted with `<script src="path/to/script.js"></script>`.
135+
136+
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.

‎1-js/02-first-steps/04-variables/article.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
# Variables
22

3-
Most of the time, a script needs to work with information. 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.
3+
Most of the time, a JavaScript application needs to work with information. Here are 2 examples:
4+
1. An online-shop -- the information might include goods being sold and a shopping cart.
5+
2. A chat application -- the information might include users, messages, and much more.
46

5-
Variables are used to store the information.
7+
Variables are used to store this information.
68

79
[cut]
810

@@ -296,7 +298,7 @@ Please name the variables sensibly. Take time to think if needed.
296298
297299
Variable naming is one of the most important and complex skills in programming. A quick glance at variable names can reveal which code is written by a beginner and which by an experienced developer.
298300
299-
In a real project, most of the time is spent on modifying and extending the existing code base, rather than writing something completely separate from the scratch. And when we return to the code after some time of doing something else, it's much easier to find information that is well-labelled. Or, in other words, when the variables have good names.
301+
In a real project, most of the time is spent on modifying and extending the existing code base, rather than writing something completely separate from scratch. And when we return to the code after some time of doing something else, it's much easier to find information that is well-labelled. Or, in other words, when the variables have good names.
300302
301303
Please spend some time thinking about the right name for a variable before declaring it. That will repay you a lot.
302304
@@ -305,14 +307,14 @@ Some good-to-follow rules are:
305307
- Use human-readable names like `userName` or `shoppingCart`.
306308
- Stay away from abbreviations or short names like `a`, `b`, `c`, unless you really know what you're doing.
307309
- Make the name maximally descriptive and concise. Examples of bad names are `data` and `value`. Such a name says nothing. It is only ok to use them if it's exceptionally obvious from the context which data or value is meant.
308-
- Agree on terms within the team and in your own mind. If a site visitor is called a "user" then we should name related variables like `currentUser` or `newUser`, but not `currentVisitor` or a `newManInTown`.
310+
- Agree on terms within your team and in your own mind. If a site visitor is called a "user" then we should name related variables like `currentUser` or `newUser`, but not `currentVisitor` or a `newManInTown`.
309311
310312
Sounds simple? Indeed it is, but creating good descriptive-and-concise names in practice is not. Go for it.
311313
312314
```smart header="Reuse or create?"
313315
And the last note. There are some lazy programmers who, instead of declaring a new variable, tend to reuse the existing ones.
314316
315-
As the result, the variable is like a box where people throw different things without changing the sticker. What is inside it now? Who knows... We need to come closer and check.
317+
As a result, the variable is like a box where people throw different things without changing the sticker. What is inside it now? Who knows... We need to come closer and check.
316318
317319
Such a programmer saves a little bit on variable declaration, but loses ten times more on debugging the code.
318320

‎1-js/02-first-steps/05-types/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ It supports two forms of syntax:
191191
1. As an operator: `typeof x`.
192192
2. Function style: `typeof(x)`.
193193

194-
In other words, it works both with the brackets or without them. The result is the same.
194+
In other words, it works both with parentheses or without them. The result is the same.
195195

196196
The call to `typeof x` returns a string with the type name:
197197

‎1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/solution.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,6 @@ undefined + 1 = NaN // (4)
1717
```
1818

1919
1. The addition with a string `"" + 1` converts `1` to a string: `"" + 1 = "1"`, and then we have `"1" + 0`, the same rule is applied.
20-
2. The substruction `"-"` (like most math operations) only works with numbers, it converts an empty string `""` to `0`.
20+
2. The subtraction `"-"` (like most math operations) only works with numbers, it converts an empty string `""` to `0`.
2121
3. `null` becomes `0` after the numeric conversion.
2222
4. `undefined` becomes `NaN` after the numeric conversion.

‎1-js/02-first-steps/07-operators/article.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ alert( b ); // 4
173173
alert( c ); // 4
174174
```
175175
176-
Chained assignments evaluate from right to left. First the rightmost expression `2+2` is evaluated then assigned to the variables on the left: `c`, `b` and `a`. At the end, all variables share a single value.
176+
Chained assignments evaluate from right to left. First the rightmost expression `2 + 2` is evaluated then assigned to the variables on the left: `c`, `b` and `a`. At the end, all variables share a single value.
177177
178178
````smart header="The assignment operator `\"=\"` returns a value"
179179
An operator always returns a value. That's obvious for most of them like an addition `+` or a multiplication `*`. But the assignment operator follows that rule too.
@@ -281,7 +281,7 @@ let a = ++counter; // (*)
281281
alert(a); // *!*2*/!*
282282
```
283283
284-
Here in the line `(*)` the prefix call `++counter` increments `i` and returns the new value that is `2`. So the `alert` shows `2`.
284+
Here in the line `(*)` the prefix call `++counter` increments `counter` and returns the new value that is `2`. So the `alert` shows `2`.
285285
286286
Now let's use the postfix form:
287287

@@ -292,7 +292,7 @@ let a = counter++; // (*) changed ++counter to counter++
292292
alert(a); // *!*1*/!*
293293
```
294294

295-
In the line `(*)` the *postfix* form `counter++` also increments `i`, but returns the *old* value (prior to increment). So the `alert` shows `1`.
295+
In the line `(*)` the *postfix* form `counter++` also increments `counter`, but returns the *old* value (prior to increment). So the `alert` shows `1`.
296296

297297
To summarize:
298298

@@ -381,8 +381,8 @@ This notation can be shortened using operators `+=` and `*=`:
381381
382382
```js run
383383
let n = 2;
384-
n += 5; // now n=7 (same as n = n + 5)
385-
n *= 2; // now n=14 (same as n = n * 2)
384+
n += 5; // now n = 7 (same as n = n + 5)
385+
n *= 2; // now n = 14 (same as n = n * 2)
386386
387387
alert( n ); // 14
388388
```
@@ -409,18 +409,18 @@ For example:
409409
410410
```js run
411411
*!*
412-
let a = (1+2, 3+4);
412+
let a = (1 + 2, 3 + 4);
413413
*/!*
414414
415-
alert( a ); // 7 (the result of 3+4)
415+
alert( a ); // 7 (the result of 3 + 4)
416416
```
417417
418-
Here, the first expression `1+2` is evaluated, and its result is thrown away, then `3+4` is evaluated and returned as the result.
418+
Here, the first expression `1 + 2` is evaluated, and its result is thrown away, then `3 + 4` is evaluated and returned as the result.
419419
420420
```smart header="Comma has a very low precedence"
421421
Please note that the comma operator has very low precedence, lower than `=`, so parentheses are important in the example above.
422422
423-
Without them: `a=1+2,3+4` evaluates `+` first, summing the numbers into `a=3,7`, then the assignment operator `=` assigns `a=3`, and then the number after the comma `7` is not processed anyhow, so it's ignored.
423+
Without them: `a = 1 + 2, 3 + 4` evaluates `+` first, summing the numbers into `a = 3, 7`, then the assignment operator `=` assigns `a = 3`, and then the number after the comma `7` is not processed anyhow, so it's ignored.
424424
```
425425
426426
Why do we need such an operator which throws away everything except the last part?

‎1-js/02-first-steps/11-logical-operators/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ if (hour < 10 || hour > 18 || isWeekend) {
6868

6969
## OR seeks the first truthy value
7070

71-
The logic described above is somewhat classical. Now let's bring in the "extra" features of JavaScipt.
71+
The logic described above is somewhat classical. Now let's bring in the "extra" features of JavaScript.
7272

7373
The extended algorithm works as follows.
7474

‎1-js/02-first-steps/12-while-for/3-which-value-for/solution.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ for (let i = 0; i < 5; i++) alert( i );
88

99
That can be easily deducted from the algorithm of `for`:
1010

11-
1. Execute once `i=0` before everything (begin).
12-
2. Check the condition `i<5`
11+
1. Execute once `i = 0` before everything (begin).
12+
2. Check the condition `i < 5`
1313
3. If `true` -- execute the loop body `alert(i)`, and then `i++`
1414

1515
The increment `i++` is separated from the condition check (2). That's just another statement.

‎1-js/02-first-steps/12-while-for/7-list-primes/task.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ importance: 3
66

77
An integer number greater than `1` is called a [prime](https://en.wikipedia.org/wiki/Prime_number) if it cannot be divided without a remainder by anything except `1` and itself.
88

9-
In other words, `n>1` is a prime if it can't be evenly divided by anything except `1` and `n`.
9+
In other words, `n > 1` is a prime if it can't be evenly divided by anything except `1` and `n`.
1010

1111
For example, `5` is a prime, because it cannot be divided without a remainder by `2`, `3` and `4`.
1212

1313
**Write the code which outputs prime numbers in the interval from `2` to `n`.**
1414

15-
For `n=10` the result will be `2,3,5,7`.
15+
For `n = 10` the result will be `2,3,5,7`.
1616

1717
P.S. The code should work for any `n`, not be hard-tuned for any fixed value.

‎1-js/02-first-steps/12-while-for/article.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ while (condition) {
2121

2222
While the `condition` is `true`, the `code` from the loop body is executed.
2323

24-
For instance, the loop below outputs `i` while `i<3`:
24+
For instance, the loop below outputs `i` while `i < 3`:
2525

2626
```js run
2727
let i = 0;
@@ -37,7 +37,7 @@ If there were no `i++` in the example above, the loop would repeat (in theory) f
3737

3838
Any expression or a variable can be a loop condition, not just a comparison. They are evaluated and converted to boolean by `while`.
3939

40-
For instance, the shorter way to write `while (i!=0)` could be `while (i)`:
40+
For instance, the shorter way to write `while (i != 0)` could be `while (i)`:
4141

4242
```js run
4343
let i = 3;
@@ -108,8 +108,8 @@ Let's examine the `for` statement part by part:
108108

109109
| part | | |
110110
|-------|----------|----------------------------------------------------------------------------|
111-
| begin | `i=0` | Executes once upon entering the loop. |
112-
| condition | `i<3`| Checked before every loop iteration, if fails the loop stops. |
111+
| begin | `i = 0` | Executes once upon entering the loop. |
112+
| condition | `i < 3`| Checked before every loop iteration, if fails the loop stops. |
113113
| step| `i++` | Executes after the body on each iteration, but before the condition check. |
114114
| body | `alert(i)`| Runs again and again while the condition is truthy |
115115

@@ -188,11 +188,11 @@ We can also remove the `step` part:
188188
let i = 0;
189189

190190
for (; i < 3;) {
191-
alert( i );
191+
alert( i++ );
192192
}
193193
```
194194

195-
The loop became identical to `while (i<3)`.
195+
The loop became identical to `while (i < 3)`.
196196

197197
We can actually remove everything, thus creating an infinite loop:
198198

@@ -239,7 +239,7 @@ The `continue` directive is a "lighter version" of `break`. It doesn't stop the
239239

240240
We can use it if we're done on the current iteration and would like to move on to the next.
241241

242-
The loop above uses `continue` to output only odd values:
242+
The loop below uses `continue` to output only odd values:
243243

244244
```js run no-beautify
245245
for (let i = 0; i < 10; i++) {
@@ -324,7 +324,7 @@ The ordinary `break` after `input` would only break the inner loop. That's not s
324324

325325
A *label* is an identifier with a colon before a loop:
326326
```js
327-
labelName: for(...) {
327+
labelName: for (...) {
328328
...
329329
}
330330
```
@@ -369,7 +369,7 @@ For example, it is impossible to do this:
369369
```js
370370
break label; // jumps to label? No.
371371
372-
label: for(...)
372+
label: for (...)
373373
```
374374
375375
The call to a `break/continue` is only possible from inside the loop, and the label must be somewhere upwards from the directive.
@@ -381,7 +381,7 @@ We covered 3 types of loops:
381381

382382
- `while` -- The condition is checked before each iteration.
383383
- `do..while` -- The condition is checked after each iteration.
384-
- `for(;;)` -- The condition is checked before each iteration, additional settings available.
384+
- `for (;;)` -- The condition is checked before each iteration, additional settings available.
385385

386386
To make an "infinite" loop, usually the `while(true)` construct is used. Such a loop, just like any other, can be stopped with the `break` directive.
387387

‎1-js/02-first-steps/14-function-basics/1-if-else-required/task.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,4 @@ function checkAge(age) {
3535
}
3636
```
3737

38-
Is there any difference in the bahavior of these two variants?
38+
Is there any difference in the behavior of these two variants?

0 commit comments

Comments
 (0)