|
1 | | -# TODO: Всё вместе: особенности JavaScript |
| 1 | +# JavaScript specials: all together |
2 | 2 |
|
3 | | -В этой главе приводятся основные особенности JavaScript, на уровне базовых конструкций, типов, синтаксиса. |
| 3 | +This chapter aims to list features of JavaScript that we've learned, paying special attention to unobvious moments. |
4 | 4 |
|
5 | | -Она будет особенно полезна, если ранее вы программировали на другом языке, ну или как повторение важных моментов раздела. |
6 | | - |
7 | | -Всё очень компактно, со ссылками на развёрнутые описания. |
| 5 | +That's especially useful if you came from another language or, just as a recap. |
8 | 6 |
|
9 | 7 | [cut] |
10 | 8 |
|
11 | | -## Структура кода |
12 | | - |
13 | | -Операторы разделяются точкой с запятой: |
14 | | - |
15 | | -```js run no-beautify |
16 | | -alert('Привет'); alert('Мир'); |
17 | | -``` |
| 9 | +## Code structure |
18 | 10 |
|
19 | | -Как правило, перевод строки тоже подразумевает точку с запятой. Так тоже будет работать: |
| 11 | +Statements are delimited with a semicolon: |
20 | 12 |
|
21 | 13 | ```js run no-beautify |
22 | | -alert('Привет') |
23 | | -alert('Мир') |
| 14 | +alert('Hello'); alert('World'); |
24 | 15 | ``` |
25 | 16 |
|
26 | | -...Однако, иногда JavaScript не вставляет точку с запятой. Например: |
| 17 | +Usually, a line-break is also treated as a delimiter, so that would also work: |
27 | 18 |
|
28 | 19 | ```js run no-beautify |
29 | | -let a = 2 |
30 | | -+3 |
31 | | - |
32 | | -alert(a); // 5 |
| 20 | +alert('Hello') |
| 21 | +alert('World') |
33 | 22 | ``` |
34 | 23 |
|
35 | | -Бывают случаи, когда это ведёт к ошибкам, которые достаточно трудно найти и исправить, например: |
| 24 | +That's called "automatic semicolon insertion". Sometimes it doesn't work, for instance: |
36 | 25 |
|
37 | 26 | ```js run |
38 | | -alert("После этого сообщения будет ошибка") |
| 27 | +alert("There will be an error after this message") |
39 | 28 |
|
40 | 29 | [1, 2].forEach(alert) |
41 | 30 | ``` |
42 | 31 |
|
43 | | -Детали того, как работает код выше (массивы `[...]` и `forEach`) мы скоро изучим, здесь важно то, что при установке точки с запятой после `alert` он будет работать корректно. |
| 32 | +Most codestyle guides agree that we should put a semicolon after each statement. |
44 | 33 |
|
45 | | -**Поэтому в JavaScript рекомендуется точки с запятой ставить. Сейчас это, фактически, общепринятый стандарт.** |
| 34 | +Semicolons are not required after code blocks `{...}` and syntax constructs with them: |
46 | 35 |
|
47 | | -Поддерживаются однострочные комментарии `// ...` и многострочные `/* ... */`: |
| 36 | +```js |
| 37 | +function f() { |
| 38 | + // no semicolon after function declaration |
| 39 | +} |
48 | 40 |
|
49 | | -Подробнее: <info:structure>. |
| 41 | +for(;;) { /* no semicolon */ } |
| 42 | +``` |
50 | 43 |
|
51 | | -## Переменные и типы |
| 44 | +...But even if we can put a semicolon there, that's not an error, extra semicolons do nothing. |
52 | 45 |
|
53 | | -- Объявляются директивой `let`. Могут хранить любое значение: |
| 46 | +More in: <info:structure>. |
54 | 47 |
|
55 | | - ```js |
56 | | - let x = 5; |
57 | | - x = "Петя"; |
58 | | - ``` |
59 | | -- Есть 5 "примитивных" типов и объекты: |
60 | | - |
61 | | - ```js no-beautify |
62 | | - x = 1; // число |
63 | | - x = "Тест"; // строка, кавычки могут быть одинарные или двойные |
64 | | - x = true; // булево значение true/false |
65 | | - x = null; // спец. значение (само себе тип) |
66 | | - x = undefined; // спец. значение (само себе тип) |
67 | | - ``` |
| 48 | +## Strict mode |
68 | 49 |
|
69 | | - Также есть специальные числовые значения `Infinity` (бесконечность) и `NaN`. |
| 50 | +To fully enable all features of modern JavaScript, we should start scripts with `"use strict"`. |
70 | 51 |
|
71 | | - Значение `NaN` обозначает ошибку и является результатом числовой операции, если она некорректна. |
72 | | -- **Значение `null` не является "ссылкой на нулевой адрес/объект" или чем-то подобным. Это просто специальное значение.** |
| 52 | +```js |
| 53 | +'use strict'; |
73 | 54 |
|
74 | | - Оно присваивается, если мы хотим указать, что значение переменной неизвестно. |
| 55 | +... |
| 56 | +``` |
75 | 57 |
|
76 | | - Например: |
| 58 | +The directive must be at the top of a script or at the beginning of a function. |
77 | 59 |
|
78 | | - ```js |
79 | | - let age = null; // возраст неизвестен |
80 | | - ``` |
81 | | -- **Значение `undefined` означает "переменная не присвоена".** |
| 60 | +Without `"use strict"`, everything still works, but some features behave in old-fasion, "compatible" way. We'd generally prefer the modern behavior. |
82 | 61 |
|
83 | | - Например: |
| 62 | +Later we'll get acquanted with advanced features of the language that enable strict mode implicitly. |
84 | 63 |
|
85 | | - ```js |
86 | | - let x; |
87 | | - alert( x ); // undefined |
88 | | - ``` |
| 64 | +More in: <info:strict-mode>. |
89 | 65 |
|
90 | | - Можно присвоить его и явным образом: `x = undefined`, но так делать не рекомендуется. |
| 66 | +## Variables |
91 | 67 |
|
92 | | - Про объекты мы поговорим в главе <info:object>, они в JavaScript сильно отличаются от большинства других языков. |
93 | | -- В имени переменной могут быть использованы любые буквы или цифры, но цифра не может быть первой. Символы доллар `$` и подчёркивание `_` допускаются наравне с буквами. |
| 68 | +Can be declared using: |
94 | 69 |
|
95 | | -Подробнее: <info:variables>, <info:types-intro>. |
| 70 | +- `let` (block-level visibility) |
| 71 | +- `const` (can't be changed) |
| 72 | +- `var` (old-style, will see later) |
96 | 73 |
|
97 | | -## Строгий режим |
| 74 | +A variable name can include: |
| 75 | +- Letters and digits, but the first character may not be a digit. |
| 76 | +- Characters `$` and `_` are normal, on par with letters. |
| 77 | +- Non-latin alphabets and hieroglyphs are also allowed, but commonly not used. |
98 | 78 |
|
99 | | -Для того, чтобы интерпретатор работал в режиме максимального соответствия современному стандарту, нужно начинать скрипт директивой `'use strict';` |
| 79 | +Variables are dynamically typed -- they can store any value: |
100 | 80 |
|
101 | 81 | ```js |
102 | | -'use strict'; |
103 | | -
|
104 | | -... |
| 82 | +let x = 5; |
| 83 | +x = "John"; |
105 | 84 | ``` |
106 | 85 |
|
107 | | -Эта директива может также указываться в начале функций. При этом функция будет выполняться в режиме соответствия, а на внешний код такая директива не повлияет. |
| 86 | +There are 7 data types: |
108 | 87 |
|
109 | | -Одно из важных изменений в современном стандарте -- все переменные нужно объявлять через `let`. Есть и другие, которые мы изучим позже, вместе с соответствующими возможностями языка. |
| 88 | +- `number` for both floating-point and integer numbers, |
| 89 | +- `string` for strings, |
| 90 | +- `boolean` for logical values: `true/false`, |
| 91 | +- `null` -- a type with a single value `null`, meaning "empty" or "does not exist", |
| 92 | +- `undefined` -- a type with a single value `undefined`, meaning "not assigned", |
| 93 | +- `object` and `symbol` -- for complex data structures and unique identifiers, we didn't learn them yet. |
110 | 94 |
|
111 | | -## Взаимодействие с посетителем |
| 95 | +More in: <info:variables>, <info:types>. |
112 | 96 |
|
113 | | -Простейшие функции для взаимодействия с посетителем в браузере: |
| 97 | +## Interaction |
114 | 98 |
|
115 | | -["prompt(вопрос[, по_умолчанию])"](https://developer.mozilla.org/en/DOM/window.prompt) |
116 | | -: Задать `вопрос` и возвратить введённую строку, либо `null`, если посетитель нажал "Отмена". |
| 99 | +We're using a browser as a working environment, so basic UI functions will be: |
117 | 100 |
|
118 | | -["confirm(вопрос)"](https://developer.mozilla.org/en/DOM/window.confirm) |
119 | | -: Задать `вопрос` и предложить кнопки "Ок", "Отмена". Возвращает, соответственно, `true/false`. |
| 101 | +[`prompt(question[, default])`](mdn:api/Window/prompt) |
| 102 | +: Ask a `question`, and return either what the visitor entered or `null` if he pressed "cancel". |
120 | 103 |
|
121 | | -["alert(сообщение)"](https://developer.mozilla.org/en/DOM/window.alert) |
122 | | -: Вывести сообщение на экран. |
| 104 | +[`confirm(question)`](mdn:api/Window/confirm) |
| 105 | +: Ask a `question` and suggest to choose between Ok and Cancel. The choice is returned as `true/false`. |
123 | 106 |
|
124 | | -Все эти функции являются *модальными*, т.е. не позволяют посетителю взаимодействовать со страницей до ответа. |
| 107 | +[`alert(message)`](mdn:api/Window/alert) |
| 108 | +: Output a `message`. |
125 | 109 |
|
126 | | -Например: |
| 110 | +All these functions are *modal*, they pause the code execution and prevent the visitor from interaction with the page until he answers. |
| 111 | + |
| 112 | +For instance: |
127 | 113 |
|
128 | 114 | ```js run |
129 | | -let userName = prompt("Введите имя?", "Василий"); |
130 | | -let isTeaWanted = confirm("Вы хотите чаю?"); |
| 115 | +let userName = prompt("Your name?", "Alice"); |
| 116 | +let isTeaWanted = confirm("Do you want some tea?"); |
131 | 117 |
|
132 | | -alert( "Посетитель: " + userName ); |
133 | | -alert( "Чай: " + isTeaWanted ); |
| 118 | +alert( "Visitor: " + userName ); |
| 119 | +alert( "Tea wanted: " + isTeaWanted ); |
134 | 120 | ``` |
135 | 121 |
|
136 | | -Подробнее: <info:uibasic>. |
| 122 | +More in: <info:uibasic>. |
137 | 123 |
|
138 | | -## Особенности операторов |
| 124 | +## Operators |
139 | 125 |
|
140 | | -- **Для сложения строк используется оператор `+`.** |
| 126 | +JavaScript supports following operators: |
141 | 127 |
|
142 | | - Если хоть один аргумент -- строка, то другой тоже приводится к строке: |
| 128 | +Arithmetical |
| 129 | +: Regular: `* + - /`, also `%` for the remainder and `**` for power of a number. |
143 | 130 |
|
144 | | - ```js run |
145 | | - alert( 1 + 2 ); // 3, число |
146 | | - alert( '1' + 2 ); // '12', строка |
147 | | - alert( 1 + '2' ); // '12', строка |
148 | | - ``` |
149 | | -- **Сравнение `===` проверяет точное равенство, включая одинаковый тип.** Это самый очевидный и надёжный способ сравнения. |
| 131 | + Binary plus `+` contatenates strings. |
150 | 132 |
|
151 | | - **Остальные сравнения `== < <= > >=` осуществляют числовое приведение типа:** |
| 133 | + If any of the operands is a string -- the other one is converted to string too: |
152 | 134 |
|
153 | 135 | ```js run |
154 | | - alert( 0 == false ); // true |
155 | | - alert( true > 0 ); // true |
| 136 | + alert( '1' + 2 ); // '12', string |
| 137 | + alert( 1 + '2' ); // '12', string |
156 | 138 | ``` |
157 | 139 |
|
158 | | - Исключение -- сравнение двух строк (см. далее). |
| 140 | +Assignments |
| 141 | +: There is a simple assignment: `a = b` and combined ones like `a *= 2`. |
159 | 142 |
|
160 | | - **Исключение: значения `null` и `undefined` ведут себя в сравнениях не как ноль.** |
161 | | -<ul> |
162 | | -<li>Они равны `null == undefined` друг другу и не равны ничему ещё. В частности, не равны нулю. |
163 | | -- В других сравнениях (кроме `===`) значение `null` преобразуется к нулю, а `undefined` -- становится `NaN` ("ошибка"). |
| 143 | +Bitwise |
| 144 | +: Bitwise operators work with integers on bit-level: see the [docs](mdn:JavaScript/Reference/Operators/Bitwise_Operators) when they are needed. |
164 | 145 |
|
165 | | -Такое поведение может привести к неочевидным результатам, поэтому лучше всего использовать для сравнения с ними `===`. Оператор `==` тоже можно, если не хотите отличать `null` от `undefined`. |
| 146 | +Ternary |
| 147 | +: The only operator with three parameters: `cond ? resultA : result B` |
166 | 148 |
|
167 | | -Например, забавное следствие этих правил для `null`: |
| 149 | +Logical operators |
| 150 | +: Logical AND `&&` and OR `||` perform short-circuit evaluation and then return the value where it stopped. |
168 | 151 |
|
169 | | -```js run no-beautify |
170 | | -alert( null > 0 ); // false, т.к. null преобразовано к 0 |
171 | | -alert( null >= 0 ); // true, т.к. null преобразовано к 0 |
172 | | -alert( null == 0 ); // false, в стандарте явно указано, что null равен лишь undefined |
173 | | -``` |
| 152 | +Comparisons |
| 153 | +: Equality check `===` immediately fails if types are different. |
174 | 154 |
|
175 | | -С точки зрения здравого смысла такое невозможно. Значение `null` не равно нулю и не больше, но при этом `null >= 0` возвращает `true`! |
176 | | -</li> |
177 | | -</ol> |
| 155 | + Other comparisons perform type conversions, usually to a number: |
178 | 156 |
|
179 | | -<li>**Сравнение строк -- лексикографическое, символы сравниваются по своим unicode-кодам.** |
| 157 | + ```js run |
| 158 | + alert( 0 == false ); // true |
| 159 | + alert( true > 0 ); // true |
| 160 | + ``` |
180 | 161 |
|
181 | | -Поэтому получается, что строчные буквы всегда больше, чем прописные: |
| 162 | + Values `null` and `undefined` are special: they equal `==` each other and don't equal anything else. |
182 | 163 |
|
183 | | -```js run |
184 | | -alert( 'а' > 'Я' ); // true |
185 | | -``` |
| 164 | + Greater/less comparisons compare strings character-by-character, other types are converted to a number. |
186 | 165 |
|
187 | | -</li> |
188 | | -</ul> |
| 166 | +Others |
| 167 | +: There are few others, like a comma operator. |
189 | 168 |
|
190 | | -Подробнее: <info:operators>, <info:comparison>. |
| 169 | +More in: <info:operators>, <info:comparison>. |
191 | 170 |
|
192 | 171 | ## Логические операторы |
193 | 172 |
|
|
0 commit comments