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/01-hello-javascript/article.md
+24-14Lines changed: 24 additions & 14 deletions
Original file line number
Diff line number
Diff line change
@@ -1,33 +1,43 @@
1
1
# Hello, JavaScript!
2
2
3
-
The programs in JavaScript are called *scripts*. They can be embedded right into HTML using `<script>` tag and run automatically as the page loads.
3
+
JavaScript has a rich history.
4
4
5
-
For example, this HTML-page shows the "Hello" message:
5
+
It was created in 1995 as a simple language exclusively for web browsers, to “make web pages alive”. Since then it has greatly evolved.
6
6
7
-
```html run
7
+
Today we can use JavaScript on many platforms:
8
+
9
+
- In a web-browser, by embedding it into a web page.
10
+
- On a general purpose computer or a server, using [Node.js](https://nodejs.org) and other means.
11
+
- ...Or actually on any device that has a special piece of software, called "JavaScript engine".
12
+
13
+
Technically, even a coffee machine can include its own JavaScript engine to allow programming of coffee recipes.
14
+
15
+

16
+
17
+
There's a formal language description called [ECMAScript Language Specification](https://tc39.es/ecma262/), it describes how a JavaScript engine works. Sometimes we'll give references to it, but, though technically strict, it's hard to read for humans. At least at first.
18
+
19
+
Programs in JavaScript are called *scripts*.
20
+
21
+
Browsers have built-in JavaScript engines, so they can run scripts. They can be embedded right into HTML using the `<script>` tag and run automatically as the page loads.
22
+
23
+
For example, this HTML-page shows the "Hello, world!" message:
24
+
25
+
```html run height=0
8
26
<!doctype html>
9
27
<script>
10
28
alert("Hello, world!");
11
29
</script>
12
30
```
13
31
14
-
JavaScript can execute not only in a browser, but also on a server, or actually on any device that has a special program called [the JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine).
15
-
16
-
Browsers have built-in JavaScript engines, so they can run scripts.
17
-
18
-
We can also run scripts using [Node.js](https://nodejs.org), it's commonly used to build server-side applications.
32
+
To see it in action, you can click the "run" button in the upper-right corner. Also you can create a new file, e.g. `my.html` with this text and open it locally in a browser.
19
33
20
34
Depending on the environment, JavaScript may provide platform-specific functionality.
21
35
22
-
- In a web browser, JavaScript can manipulate the web-page, send network requests, show messages and so on.
36
+
- In a browser, JavaScript can manipulate the web-page, send network requests, show messages and so on.
23
37
- In node.js we can use JavaScript to run a web-server, read and write arbitrary files.
24
38
- ...And so on.
25
39
26
-
Technically, even a coffee machine can include its own JavaScript engine, to allow programming of coffee recipes.
27
-
28
-

29
-
30
-
**In this tutorial we concentrate on the "core JavaScript", that's the same everywhere.**
40
+
**In this course we concentrate on the core JavaScript, that's the same everywhere.**
31
41
32
42
We'll try to keep browser-specific notes at minimum. After you learn the core, you can go in any direction: browsers, frameworks, servers and so on.
Copy file name to clipboardExpand all lines: 1-js/01-getting-started/02-basics/article.md
+33-23Lines changed: 33 additions & 23 deletions
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,9 @@
3
3
4
4
## Statements
5
5
6
-
Statements are syntax constructs and commands that perform actions, make JavaScript "do" something.
6
+
Just like a human speech consists of sentences, JavaScript code consists of *statements*.
7
+
8
+
Statements are commands and syntax constructs that perform actions, "do" something.
7
9
8
10
Here's an example of a statement:
9
11
@@ -17,7 +19,7 @@ We can have as many statements in our code as we want.
17
19
18
20
Statements can be separated with a semicolon.
19
21
20
-
For example, here we split "Hello World" into two alerts:
22
+
For example, we can split "Hello World" into two messages, one after the other:
21
23
22
24
```js run no-beautify
23
25
alert("Hello"); alert("World");
@@ -30,33 +32,35 @@ alert("Hello");
30
32
alert("World");
31
33
```
32
34
33
-
## Semicolons..or not?
35
+
###Semicolons..or not?
34
36
35
-
A semicolon may be omitted in most cases when a line break exists.
37
+
A semicolon may be omitted in most cases when a line break exists beween statements.
36
38
37
-
This would also work:
39
+
This code is the same as above, just without semicolons:
38
40
39
41
```js run no-beautify
40
42
alert("Hello")
41
43
alert("World")
42
44
```
43
45
44
-
Usually, JavaScript interprets the line break as an "implicit" semicolon. This is called an [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion).
46
+
It also works, because usually JavaScript interprets a line break as an "implicit" semicolon. This is called an "automatic semicolon insertion".
45
47
46
-
But there are exceptions, like this:
48
+
There are exceptions for that rule, for example:
47
49
48
50
```js run no-beautify
49
51
alert(1+
50
52
2);
51
53
```
52
54
53
-
The code outputs `3` because JavaScript does not insert semicolons after the plus `+`. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an incomplete expression, that's continued on the next line. And in this case that works as intended.
55
+
This code outputs `3`, same as a single-line `alert(1 + 2)`. Here JavaScript does not treat the line-break after `+` as the end of the statement.
56
+
57
+
Why so? It's intuitively obvious that if the line ends with a plus `+`, then the expression is incomplete and will be continued on the next line. JavaScript "understands" that too. And in this case that works as intended.
54
58
55
59
**But there are situations where our intuition differs from JavaScript auto-insertion rules.**
56
60
57
61
That may lead to subtle errors.
58
62
59
-
````spoiler header="Read more about it"
63
+
````spoiler header="See an example of such error"
60
64
61
65
If you're curious to see a concrete example of such an error, check this code out:
62
66
@@ -96,19 +100,19 @@ alert("There will be an error")[1, 2].forEach(alert)
96
100
But such a merge in this case is just wrong, hence the error. This can happen in other situations as well.
97
101
````
98
102
99
-
To prevent such errors, we recommend putting semicolons between statements even if they are separated by newlines. This rule is widely adopted by the community.
103
+
To prevent such errors, we recommend putting semicolons between statements, even if they are separated by newlines.
100
104
101
-
Let's note once again -- *it is possible* to leave out semicolons most of the time. But it's safer -- especially for a beginner -- to use them.
105
+
Let's note once again -- *it is possible* to leave out semicolons most of the time. But it's safer, especially for a beginner, to use them.
102
106
103
107
## Comments
104
108
105
109
As time goes on, programs become more and more complex. It becomes necessary to add *comments* which describe what the code does and why.
106
110
107
111
Comments can be put into any place of a script. They don't affect its execution because the engine simply ignores them.
108
112
109
-
**One-line comments start with two forward slash characters `//`.**
113
+
**One-line comments start with two forward slash characters `//`. The rest of the line is a comment.**
110
114
111
-
The rest of the line is a comment. It may occupy a full line of its own or follow a statement.
115
+
Such comment may occupy a full line of its own or follow a statement.
112
116
113
117
Like here:
114
118
```js run
@@ -118,6 +122,8 @@ alert("Hello");
118
122
alert("World"); // This comment follows the statement
119
123
```
120
124
125
+
For longer, descriptive comments that span multiple lines, we can use the `/* ... */` syntax.
126
+
121
127
**Multiline comments start with a forward slash and an asterisk <code>/*</code> and end with an asterisk and a forward slash <code>*/</code>.**
122
128
123
129
Like this:
@@ -130,9 +136,9 @@ alert("Hello");
130
136
alert("World");
131
137
```
132
138
133
-
The content of comments is ignored, so if we put code inside <code>/* ... */</code>, it won't execute.
139
+
The content of comments is ignored, so if we wrap a piece of code into `/* ... */`, it won't execute.
134
140
135
-
Sometimes it can be handy to temporarily disable a part of code:
141
+
It can be handy to temporarily disable a part of code:
136
142
137
143
```js run
138
144
/* Commenting out the code
@@ -142,7 +148,9 @@ alert("World");
142
148
```
143
149
144
150
```smart header="Use hotkeys!"
145
-
In most editors, a line of code can be commented out by pressing the `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey). For Mac, try `key:Cmd` instead of `key:Ctrl` and `key:Option` instead of `key:Shift`.
151
+
In most editors, a line of code can be commented out by pressing the `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey).
152
+
153
+
For Mac, try `key:Cmd` instead of `key:Ctrl` and `key:Option` instead of `key:Shift`.
146
154
```
147
155
148
156
````warn header="Nested comments are not supported!"
@@ -152,7 +160,7 @@ Such code will die with an error:
152
160
153
161
```js run no-beautify
154
162
/*
155
-
/* nested comment ?!? */
163
+
/* nested comment leads to an error! */
156
164
*/
157
165
alert( "World" );
158
166
```
@@ -164,24 +172,26 @@ Comments increase the overall code footprint, but that's not a problem at all. T
164
172
165
173
## Strict mode
166
174
167
-
JavaScript appeared many years ago, in 1995. Then ,for a long time, it evolved without compatibility issues. New features were added to the language while old functionality didn't change.
175
+
JavaScript appeared in 1995 as a simple, browser-only language. Then, for a long time, it evolved without compatibility issues. New features were added to the language while old functionality didn't change.
168
176
169
-
That had the benefit of never breaking existing code. But the downside was that any mistake or an imperfect decision made by JavaScript's creators got stuck in the language forever.
177
+
That had the benefit of never breaking existing code. But the downside was that any mistake or an imperfect decision made by JavaScript creators got stuck in the language forever.
170
178
171
179
This was the case until 2009, when the 5th version of the standard appeared. It added new features to the language and modified some of the existing ones.
172
180
173
-
Now the important part.
181
+
Now the important part about it.
182
+
183
+
**To keep the old code working, the newer 2009+ modifications are off by default.**
174
184
175
-
**To keep the old code working, these newer modifications are off by default.**
185
+
Yes, a lot of time has passed, but still it's so.
176
186
177
187
We need to explicitly enable them with a special directive: `"use strict"`
178
188
179
-
With that directive on top the script runs in so-called "strict mode". Or, we'd better say "modern mode", because that's what it essentially is.
189
+
A script with the `"use strict"`directive on top runs in so-called "strict mode". Or we'd better say "modern mode", because that's what it essentially is.
180
190
181
191

182
192
183
193
Some JavaScript features enable strict mode automatically, e.g. classes and modules, so that we don't need to write `"use strict"` for them. We'll cover these features later.
184
194
185
195
**Here, in the tutorial, we'll always use strict mode, unless explicitly stated otherwise.**
186
196
187
-
We're studying modern JavaScript after all. But you'll also see notes about how things work without `use strict`, just in case you come across an old script.
197
+
We're studying modern JavaScript after all. But you'll also see notes about how things work without `use strict`, just in case you forget to put that directive or meet a script without it.
Copy file name to clipboardExpand all lines: 1-js/01-getting-started/03-variables/article.md
+16-10Lines changed: 16 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -1,30 +1,35 @@
1
1
# Variables
2
2
3
-
Most of the time, a JavaScript application needs to work with information. Here are two 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.
3
+
To do its job, our code needs needs to store and process information.
4
+
5
+
The exact kind of information depends on the application.
6
+
7
+
For example:
8
+
9
+
- An online shop -- the information includes goods being sold and a shopping cart.
10
+
- A chat application -- the information includes users, messages, etc.
6
11
7
12
Variables are used to store this information.
8
13
9
14
## A variable
10
15
11
-
A [variable](https://en.wikipedia.org/wiki/Variable_(computer_science)) is a "named storage" for data. We can use variables to store goodies, visitors, and other data.
16
+
A [variable](https://en.wikipedia.org/wiki/Variable_(computer_science)) is a "named storage" for data. We can use variables to store goods, visitors and so on.
12
17
13
18
To create a variable in JavaScript, use the `let` keyword.
14
19
15
-
The statement below creates (in other words: *declares*) a variable with the name "message":
20
+
The statement below creates (in formal terms: *declares*) a variable with the name "message":
16
21
17
22
```js
18
23
let message;
19
24
```
20
25
21
-
Now, we can put some data into it by using the assignment `=`:
26
+
Now we can put some data into it by using the assignment `=`:
22
27
23
28
```js
24
29
let message;
25
30
26
31
*!*
27
-
message ="Hello"; // store the string
32
+
message ="Hello"; // store the string "Hello"
28
33
*/!*
29
34
```
30
35
@@ -42,7 +47,7 @@ alert(message); // shows the variable content
42
47
To be concise, we can combine the variable declaration and assignment into a single line:
43
48
44
49
```js run
45
-
let message ="Hello!"; // define the variable and assign the value
50
+
let message ="Hello!"; // define the variable and assign the value to it
46
51
47
52
alert(message); // Hello!
48
53
```
@@ -153,7 +158,7 @@ let message = "Two"; // SyntaxError: 'message' has already been declared
153
158
So, we should declare a variable once and then refer to it without `let`.
154
159
````
155
160
156
-
````warn header="Without `use strict` it's possible to assign to an undeclared variable"
161
+
````warn header="Without `use strict`: it's possible to assign to an undeclared variable"
157
162
Normally, we need to define a variable before using it. But in the old times, it was technically possible to create a variable by a mere assignment of the value without using `let`.
158
163
159
164
This still works now, without strict mode:
@@ -175,8 +180,9 @@ This is a bad practice and would cause an error in strict mode:
175
180
num =5; // error: num is not defined
176
181
*/!*
177
182
```
178
-
````
179
183
184
+
We provide details about how things work without `use strict` just to make sure you won't be surprised by such scripts. Luckily, there aren't many differences. As said before, we should always be in the strict mode.
0 commit comments