jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-01-08 02:06:13 +03:00
parent da4c5f87f1
commit 87a3588057
23 changed files with 287 additions and 230 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
1-js/1-getting-started/4-devtools/chrome.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
1-js/1-getting-started/4-devtools/firefox.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 47 KiB

BIN
1-js/1-getting-started/4-devtools/firefox_console_down.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 468 B

BIN
1-js/1-getting-started/4-devtools/firefox_console_enable.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 53 KiB

61
1-js/2-first-steps/1-hello-world/article.md
View file

@ -46,10 +46,10 @@
<ol> <ol>
<li>Начинает отображать страницу, показывает часть документа до `script`</li> <li>Начинает отображать страницу, показывает часть документа до `script`</li>
<li>Встретив тег `script`, переключается в JavaScript-режим и не показывает, а исполняет его содержимое.</li> <li>Встретив тег `script`, переключается в JavaScript-режим и не показывает, а исполняет его содержимое.</li>
<li>Закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.</li> <li>Закончив выполнение, возвращается обратно в HTML-режим и *только тогда* отображает оставшуюся часть документа.</li>
</ol> </ol>
Попробуйте этот пример в действии. Попробуйте этот пример в действии, и вы сами всё увидите.
</dd> </dd>
<dt>`alert(сообщение)`</dt> <dt>`alert(сообщение)`</dt>
<dd>Отображает окно с сообщением и ждёт, пока посетитель не нажмёт "Ок".</dd> <dd>Отображает окно с сообщением и ждёт, пока посетитель не нажмёт "Ок".</dd>
@ -83,7 +83,7 @@
<dt>Атрибут <code>&lt;script <u>language</u>=...&gt;</code></dt> <dt>Атрибут <code>&lt;script <u>language</u>=...&gt;</code></dt>
<dd>Этот атрибут предназначен для указания языка, на котором написан скрипт. По умолчанию, язык -- JavaScript, так что и этот атрибут ставить не обязательно.</dd> <dd>Этот атрибут предназначен для указания языка, на котором написан скрипт. По умолчанию, язык -- JavaScript, так что и этот атрибут ставить не обязательно.</dd>
<dt>Комментарии до и после скриптов</dt> <dt>Комментарии до и после скриптов</dt>
<dd>В старых руководствах и книгах иногда рекомендуют использовать HTML-комментарии внутри `SCRIPT`, чтобы спрятать Javascript от браузеров, которые не поддерживают его. <dd>В совсем старых руководствах и книгах иногда рекомендуют использовать HTML-комментарии внутри `SCRIPT`, чтобы спрятать Javascript от браузеров, которые не поддерживают его.
Выглядит это примерно так: Выглядит это примерно так:
@ -118,7 +118,7 @@
<script src="http://code.jquery.com/jquery.js"></script> <script src="http://code.jquery.com/jquery.js"></script>
``` ```
Вы также можете использовать путь относительно текущей страницы, в частности `src="jquery.js"` обозначает файл из текущей директории. Вы также можете использовать путь относительно текущей страницы, например `src="jquery.js"` обозначает файл из текущей директории.
Чтобы подключить несколько скриптов, используйте несколько тегов: Чтобы подключить несколько скриптов, используйте несколько тегов:
@ -133,7 +133,7 @@
Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего [кеша](http://ru.wikipedia.org/wiki/%D0%9A%D1%8D%D1%88). Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего [кеша](http://ru.wikipedia.org/wiki/%D0%9A%D1%8D%D1%88).
Благодаря этому один и тот же большой скрипт, например, меню или библиотека функций, может использоваться на разных страницах без полной перезагрузки с сервера. Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера.
[/smart] [/smart]
@ -163,7 +163,7 @@
## Асинхронные скрипты: defer/async ## Асинхронные скрипты: defer/async
Обычно тег `<script>` блокирует отображение страницы. Обычно тег `<script>` блокирует отображение страницы.
Например, в примере ниже -- пока все кролики не будут посчитаны -- нижний `<p>` не будет показан: Например, в примере ниже -- пока все кролики не будут посчитаны -- нижний `<p>` не будет показан:
@ -242,9 +242,7 @@
</dl> </dl>
[warn header="Либо `async` либо `defer`"] [warn header="Либо `async` либо `defer`"]
Одновременно указывать `async` и `defer` не имеет смысла. Одновременно указывать `async` и `defer` не имеет смысла, в этом случае браузер использует только `async`.
В этом случае браузер использует только `async`.
[/warn] [/warn]
[warn header="Атрибуты `async/defer` -- только для внешних скриптов"] [warn header="Атрибуты `async/defer` -- только для внешних скриптов"]
@ -264,50 +262,15 @@
<p>...Важная информация!</p> <p>...Важная информация!</p>
``` ```
При запуске вы увидите, что вся страница отобразилась тут же, а реклама будет показана позже, когда загрузится скрипт. При запуске вы увидите, что вся страница отобразилась тут же, а `alert` из внешнего скрипта появится позже, когда загрузится скрипт.
### Разные типы скриптов
На странице могут одновременно быть:
<ul>
<li>обычные скрипты</li>
<li>скрипты с `async`</li>
<li>скрипты с `defer`</li>
</ul>
Если на странице используются разные виды подключения скриптов, то:
<ul>
<li>Сначала выполнятся обычные скрипты (без `async/defer`), по очереди.</li>
<li>Затем будут выполнены скрипты с `async` и `defer`, при этом относительный порядок между `defer` сохранится, а для `async` -- нет.</li>
</ul>
То есть, такие скрипты:
```html
<script src="1.js"></script>
<script src="2.js" defer></script>
<script src="3.js"></script>
<script src="4.js" defer></script>
```
Выполнятся строго в порядке `1.js` -> `3.js` -> `2.js` -> `4.js`.
А вот такие:
```html
<script src="1.js" async></script>
<script src="2.js" defer></script>
<script src="3.js" async></script>
<script src="4.js" defer></script>
```
Выполнятся в неопределённом порядке, смотря какой загрузится первым. Единственно, атрибут `defer` гарантирует, что `4.js` запустится после `2.js`.
**Большинство современных системы рекламы и счётчиков знают про эти атрибуты и используют их.** **Большинство современных системы рекламы и счётчиков знают про эти атрибуты и используют их.**
Конечно, система рекламы должна корректно обрабатывать асинхронную загрузку скрипта, но никаких принципиальных проблем с этим нет, в частности, системы от Google и Яндекс используют такой подход по умолчанию. ## Итого
## Задачи <ul>
<li>Скрипты вставляются на страницу как текст в теге `<script>`, либо как внешний файл через `<script src="путь"></script>`</li>
</ul>
Очень важно не только читать учебник, но делать что-то самостоятельно. Очень важно не только читать учебник, но делать что-то самостоятельно.

41
1-js/2-first-steps/2-structure/article.md
View file

@ -4,14 +4,18 @@
[cut] [cut]
## Команды ## Команды
Например, можно вместо одного вызова `alert` сделать два: Раньше мы уже видели пример команды: `alert('Привет, мир!')` выводит сообщение.
Для того, чтобы добавить в код ещё одну команду -- можно поставить её после точки с запятой.
Например, вместо одного вызова `alert` сделаем два:
```js ```js
//+ run //+ run
alert('Привет'); alert('Мир'); alert('Привет'); alert('Мир');
``` ```
Как правило, новая команда занимает отдельную строку -- так код лучше читается: Как правило, каждая команда пишется на отдельной строке -- так код лучше читается:
```js ```js
//+ run //+ run
@ -48,10 +52,36 @@ alert(3 +
**Но в некоторых важных ситуациях JavaScript "забывает" вставить точку с запятой там, где она нужна.** **Но в некоторых важных ситуациях JavaScript "забывает" вставить точку с запятой там, где она нужна.**
Таких ситуаций не так много, но они всё же есть, и ошибки, которые при этом появляются, достаточно сложно обнаруживать и исправлять. Таких ситуаций не так много, но ошибки, которые при этом появляются, достаточно сложно обнаруживать и исправлять.
**Поэтому рекомендуется точки с запятой ставить. Сейчас это, фактически, стандарт, которому следуют все большие проекты.** Чтобы не быть голословным, вот небольшой пример.
Такой код работает:
```js
//+ run
[1, 2].forEach(alert)
```
Он выводит по очереди `1`, `2`. Почему он работает -- сейчас не важно, позже разберёмся.
Важно, что вот такой код уже работать не будет:
```js
//+ run
alert("Сейчас будет ошибка")
[1, 2].forEach(alert)
```
Выведется только первый `alert`, а дальше -- ошибка. Потому что перед квадратной скобкой JavaScript точку с запятой не ставит, а как раз здесь она нужна (упс!).
Если её поставить, то всё будет в порядке:
```js
//+ run
alert("Сейчас будет ошибка");
[1, 2].forEach(alert)
```
**Поэтому в JavaScript рекомендуется точки с запятой ставить. Сейчас это, фактически, стандарт, которому следуют все большие проекты.**
## Комментарии ## Комментарии
@ -110,4 +140,5 @@ alert('Мир');
Не бойтесь комментариев. Чем больше кода в проекте -- тем они важнее. Что же касается увеличения размера кода -- это не страшно, т.к. существуют инструменты сжатия JavaScript, которые при публикации кода легко их удалят. Не бойтесь комментариев. Чем больше кода в проекте -- тем они важнее. Что же касается увеличения размера кода -- это не страшно, т.к. существуют инструменты сжатия JavaScript, которые при публикации кода легко их удалят.
На следующих занятиях мы поговорим о переменных, блоках и других структурных элементах программы на JavaScript. На следующих занятиях мы поговорим о переменных, блоках и других структурных элементах программы на JavaScript.

80
1-js/2-first-steps/3-strict-mode/article.md Normal file
View file

@ -0,0 +1,80 @@
# Современный стандарт, "use strict"
Очень долго язык JavaScript развивался без потери совместимости. Новые возможности добавлялись в язык, но старые -- никогда не менялись, чтобы не "сломать" уже существующие HTML/JS-страницы с их использованием.
Однако, это привело к тому, что любая ошибка в дизайне языка становилась "вмороженной" в него навсегда.
Так было до появления стандарта EcmaScript 5 (ES5), который одновременно добавил новые возможности и внёс в язык ряд исправлений, которые могут привести к тому, что старый код, который был написан до его появления, перестанет работать.
Чтобы этого не случилось, решили, что по умолчанию эти опасные изменения будут выключены, и код будет работать по-старому. А для того, чтобы перевести код в режим полного соответствия современному стандарту, нужно указать специальную директиву `use strict`.
Эта директива не поддерживается IE9-.
[cut]
## Директива use strict
Директива выглядит как строка `"use strict";` или `'use strict';` и ставится в начале скрипта.
Например:
```js
"use strict";
// этот код будет работать по современному стандарту ES5
...
```
[warn header="Отменить действие `use strict` никак нельзя"]
Не существует директивы `no use strict` или подобной, которая возвращает в старый режим.
Если уж вошли в современный режим, то это дорога в один конец.
[/warn]
[smart header="`use strict` для функций"]
Через некоторое время мы будем проходить [функции](/function-basics). На будущее заметим, что `use strict` также можно указывать в начале функций, тогда строгий режим будет действовать только внутри функции.
[/smart]
В следующих главах мы будем подробно останавливаться на отличиях в работе языка при `use strict` и без него.
## Нужен ли мне "use strict"?
Если говорить абстрактно, то -- да, нужен. В строгом режиме исправлены некоторые ошибки в дизайне языка, и вообще, современный стандарт -- это хорошо.
Однако, есть и две проблемы.
<dl>
<dt>Поддержка браузеров IE9-, которые игнорируют `"use strict"`.</dt>
<dd>Предположим, что мы, используя `"use strict"`, разработали код и протестировали его в браузере Chrome. Всё работает... Однако, вероятность ошибок при этом в IE9- выросла! Он-то всегда работает по старому стандарту, а значит, иногда по-другому. Возникающие ошибки придётся отлаживать уже в IE9-, и это намного менее приятно, нежели в Chrome.
Впрочем, проблема не так страшна. Несовместимостей мало. И, если их знать (а в учебнике мы будем останавливаться на них) и писать правильный код, то всё будет в порядке и `"use strict"` станет нашим верным помощником.
</dd>
<dt>Библиотеки, написанные без учёта `"use strict"`.</dt>
<dd>Некоторые библиотеки, который написаны без `"use strict"`, не всегда корректно работают, если вызывающий код содержит `"use strict"`.
В первую очередь имеются в виду сторонние библиотеки, которые писали не мы, и которые не хотелось бы переписывать или править.
Таких библиотек мало, но при переводе давно существующих проектов на `"use strict"` эта проблема возникает с завидной регулярностью.
</dd>
</dl>
Вывод?
**Писать код с `use strict` следует лишь в том случае, если вы уверены, что описанных выше проблем не будет.**
Конечно же, весь код, который находится в этом учебнике, корректно работает в режиме `"use strict"`.
## ES5-shim [#es5-shim]
Браузер IE8 поддерживает только совсем старую версию стандарта JavaScript, а именно ES3.
К счастью, многие возможности современного стандарта можно добавить в этот браузер, подключив библиотеку [ES5 shim](https://github.com/es-shims/es5-shim), а именно -- скрипты `es5-shim.js` и `es5-sham.js` из неё.
## Итого
В этой главе мы познакомились с понятием "строгий режим".
Далее мы будем предполагать, что разработка ведётся либо в современном браузере, либо в IE8- с подключённым [ES5 shim](https://github.com/es-shims/es5-shim). Это позволит нам использовать большинство возможностей современного JavaScript во всех браузерах.
Очень скоро, буквально в следующей главе, мы увидим особенности строгого режима на конкретных примерах.

33
1-js/2-first-steps/3-variables/1.svg
View file

@ -1,33 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="179px" height="114px" viewBox="0 0 179 114" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>Diagrams</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M2.5,111.5 L134.5,111.5" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M44.5,55.5 L146.5,55.5" id="Line-2" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M2.5,111.5 L44.5,55.5" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M134.5,111.5 L176.5,55.5" id="Line-3" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M2.5,71.5 L134.5,71.5" id="Line-10" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M44.5,15.5 L176.5,15.5" id="Line-7" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M2.5,71.5 L44.5,15.5" id="Line-8" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M134.5,71.5 L176.5,15.5" id="Line-9" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M2.5,111.5 L2.5,71.5" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M44.5,55.5 L44.5,15.5" id="Line-4" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M134.5,111.5 L134.5,71.5" id="Line-6" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-2" stroke="#979797" fill="#E8E8E8" sketch:type="MSShapeGroup" transform="translate(82.959003, 46.776161) rotate(47.000000) translate(-82.959003, -46.776161) " x="43" y="34.247795" width="79.918006" height="25.0567324"></rect>
<text id="&quot;Hello!&quot;" sketch:type="MSTextLayer" transform="translate(86.193270, 48.500000) rotate(47.000000) translate(-86.193270, -48.500000) " font-family="Open Sans" font-size="14" font-weight="normal" fill="#373535">
<tspan x="61.6932699" y="54">"Hello!"</tspan>
</text>
<path d="M176.5,55.5 L176.5,15.5" id="Line-5" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-1" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="2" y="71" width="133" height="41"></rect>
<g id="Rectangle-3-+-Oval-1-+-message" sketch:type="MSLayerGroup" transform="translate(38.000000, 85.000000)">
<rect id="Rectangle-3" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="63" height="16"></rect>
<circle id="Oval-1" stroke="#979797" sketch:type="MSShapeGroup" cx="3.5" cy="3.5" r="1.5"></circle>
<text id="message" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#373535">
<tspan x="7" y="12">message</tspan>
</text>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
1-js/2-first-steps/3-variables/box-message-hello.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 34 KiB

BIN
1-js/2-first-steps/3-variables/box-trans1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 41 KiB

BIN
1-js/2-first-steps/3-variables/box-trans2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 44 KiB

0
1-js/2-first-steps/3-variables/1-hello-variables/solution.md → 1-js/2-first-steps/4-variables/1-hello-variables/solution.md
View file

0
1-js/2-first-steps/3-variables/1-hello-variables/task.md → 1-js/2-first-steps/4-variables/1-hello-variables/task.md
View file

88
1-js/2-first-steps/3-variables/article.md → 1-js/2-first-steps/4-variables/article.md
View file

@ -28,7 +28,7 @@ message = 'Hello'; // сохраним в переменной строку
```js ```js
//+ run //+ run
var message; var message;
message = 'Hello'; message = 'Hello!';
alert(message); // выведет содержимое переменной alert(message); // выведет содержимое переменной
``` ```
@ -36,7 +36,7 @@ alert(message); // выведет содержимое переменной
Для краткости можно совместить объявление переменной и запись данных: Для краткости можно совместить объявление переменной и запись данных:
```js ```js
var message = 'Привет'; var message = 'Hello!';
``` ```
Можно даже объявить несколько переменных сразу: Можно даже объявить несколько переменных сразу:
@ -51,7 +51,8 @@ var user = 'John', age = 25, message = 'Hello';
Например, переменная `message` -- это коробка, в которой хранится значение `"Hello!"`: Например, переменная `message` -- это коробка, в которой хранится значение `"Hello!"`:
<img src="1.svg"> <img src="variable.svg">
В коробку можно положить любое значение, а позже - поменять его. Значение в переменной можно изменять сколько угодно раз: В коробку можно положить любое значение, а позже - поменять его. Значение в переменной можно изменять сколько угодно раз:
@ -59,26 +60,43 @@ var user = 'John', age = 25, message = 'Hello';
//+ run //+ run
var message; var message;
message = 'Привет'; message = 'Hello!';
message = 'Мир'; // заменили значение message = 'World!'; // заменили значение
alert(message); alert(message);
``` ```
<img src="box-trans1.png">
При изменении значения старое содержимое переменной удаляется. При изменении значения старое содержимое переменной удаляется.
<img src="variable-change.svg">
Можно объявить две переменные и копировать данные из одной в другую:
```js
//+ run
var hello = 'Hello world!';
var message;
*!*
// скопировали значение
message = hello;
*/!*
alert(hello); // Hello world!
alert(message); // Hello world!
```
[smart] [smart]
Существуют [функциональные](http://ru.wikipedia.org/wiki/%D0%AF%D0%B7%D1%8B%D0%BA_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F) языки программирования, в которых значение переменной менять нельзя. Например, [Scala](http://www.scala-lang.org/) или [Erlang](http://www.erlang.org/). Существуют [функциональные](http://ru.wikipedia.org/wiki/%D0%AF%D0%B7%D1%8B%D0%BA_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F) языки программирования, в которых значение переменной менять нельзя. Например, [Scala](http://www.scala-lang.org/) или [Erlang](http://www.erlang.org/).
В таких языках положил один раз значение в коробку - и оно хранится там вечно, ни удалить ни изменить. А нужно что-то другое сохранить - изволь создать новую коробку (объявить новую переменную), повторное использование невозможно. В таких языках положил один раз значение в коробку -- и оно хранится там вечно, ни удалить ни изменить. А нужно что-то другое сохранить -- изволь создать новую коробку (объявить новую переменную), повторное использование невозможно.
С виду -- не очень удобно, но, как ни странно, и на таких языках вполне можно успешно программировать. Более того, оказывается, что в ряде областей, например в распараллеливании вычислений, они имеют преимущества. Изучение какого-нибудь функционального языка рекомендуется для расширения кругозора. С виду -- не очень удобно, но, как ни странно, и на таких языках вполне можно успешно программировать. Более того, оказывается, что в ряде областей, например в распараллеливании вычислений, они имеют преимущества. Изучение какого-нибудь функционального языка рекомендуется для расширения кругозора.
[/smart] [/smart]
### Имена переменных [#variable-naming] ## Имена переменных [#variable-naming]
На имя переменной в JavaScript наложены всего два ограничения. На имя переменной в JavaScript наложены всего два ограничения.
<ol> <ol>
@ -132,63 +150,51 @@ alert(имя); // "Вася"
Существует список зарезервированных слов, которые нельзя использовать для переменных, так как они используются самим языком, например: `var, class, return, export` и др. Существует список зарезервированных слов, которые нельзя использовать для переменных, так как они используются самим языком, например: `var, class, return, export` и др.
Некоторые такие слова, например, `export`, не используются в современном JavaScript, но они зарезервированы на будущее.
Например, такой пример выдаст синтаксическую ошибку: Например, такой пример выдаст синтаксическую ошибку:
```js ```js
//+ run //+ run
var class = 5; // ошибка, слово зарезервировано var return = 5; // ошибка
alert(class); alert(return);
``` ```
[/warn] [/warn]
### Копирование значений ## Важность директивы var
Переменные в JavaScript могут хранить не только строки, но и другие данные, например, числа. В старом стандарте JavaScript разрешалось создавать переменную и без `var`, просто присвоив ей значение:
Объявим две переменные, положим в одну -- строку, а в другую -- число:
```js ```js
var num = 100500; num = 5; // переменная num будет создана, если ее не было
var message = 'Привет';
``` ```
При этом в любой момент значение можно скопировать из одной переменной в другую: В режиме `"use strict"` так делать уже нельзя.
Следующий код выдаст ошибку:
```js ```js
var num = 100500; //+ run
var message = 'Привет'; "use strict";
*!* *!*
message = num; num = 5; // error: num is not defined
*/!* */!*
``` ```
При копировании значение из `num` перезаписывает текущее в `message`. Обратим внимание, директиву `use strict` нужно ставить до кода, иначе она не сработает:
**В "коробке" `message` изменится значение**:
<img src="box-trans2.png">
После этого присваивания в обеих коробках `num` и `message` находится одно и то же значение `100500`.
## Важность директивы var
В JavaScript вы можете создать переменную и без `var`, достаточно просто присвоить ей значение:
```js ```js
x = "value"; // переменная создана, если ее не было //+ run
var something;
"use strict"; // слишком поздно
*!*
num = 5; // ошибки не будет, так как строгий режим не активирован
*/!*
``` ```
Технически, это не вызовет ошибки, но делать так все-таки не стоит.
**Всегда определяйте переменные через `var`**.
Это хороший тон в программировании и помогает избежать ошибок.
[warn header="Ошибка в IE8- без `var`"] [warn header="Ошибка в IE8- без `var`"]
Если же вы собираетесь поддерживать IE8-, то у меня для вас ещё одна причина всегда использовать `var`. Если же вы собираетесь поддерживать IE8-, то у меня для вас ещё одна причина всегда использовать `var`.

47
1-js/2-first-steps/4-variables/variable-change.svg Normal file
View file

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="253px" height="176px" viewBox="0 0 253 176" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>Diagrams 2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="variable-change" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<rect id="Rectangle-2" stroke="#979797" fill="#E8E8E8" sketch:type="MSShapeGroup" transform="translate(142.959003, 41.528366) rotate(47.000000) translate(-142.959003, -41.528366) " x="103" y="29" width="79.918006" height="25.0567324"></rect>
<text id="&quot;Hello!&quot;" opacity="0.7" sketch:type="MSTextLayer" transform="translate(146.500000, 43.500000) rotate(47.000000) translate(-146.500000, -43.500000) " font-family="Open Sans" font-size="14" font-weight="normal" fill="#373535">
<tspan x="122" y="49">"Hello!"</tspan>
</text>
<g id="trash62" sketch:type="MSLayerGroup" transform="translate(222.000000, 0.000000)" fill="#979797">
<g id="Group" sketch:type="MSShapeGroup">
<rect id="Rectangle-path" x="20.6666667" y="10.6296296" width="1.47619048" height="25.8148148"></rect>
<rect id="Rectangle-path" x="14.7619048" y="10.6296296" width="1.47619048" height="25.8148148"></rect>
<rect id="Rectangle-path" x="8.85714286" y="10.6296296" width="1.47619048" height="25.8148148"></rect>
<path d="M25.0952381,6.07407407 L22.1428571,6.07407407 L22.1428571,3.03703704 C22.1428571,1.36666667 20.8142857,0 19.1904762,0 L11.8095238,0 C10.1857143,0 8.85714286,1.36666667 8.85714286,3.03703704 L8.85714286,6.07407407 L5.9047619,6.07407407 L0,6.07407407 L0,7.59259259 L2.95238095,7.59259259 L2.95238095,36.4444444 C2.95238095,39.0259259 4.87142857,41 7.38095238,41 L23.6190476,41 C26.1285714,41 28.047619,39.0259259 28.047619,36.4444444 L28.047619,7.59259259 L31,7.59259259 L31,6.07407407 L25.0952381,6.07407407 L25.0952381,6.07407407 Z M10.3333333,3.03703704 C10.3333333,2.12592593 10.9238095,1.51851852 11.8095238,1.51851852 L19.1904762,1.51851852 C20.0761905,1.51851852 20.6666667,2.12592593 20.6666667,3.03703704 L20.6666667,6.07407407 L10.3333333,6.07407407 L10.3333333,3.03703704 L10.3333333,3.03703704 Z M26.5714286,36.4444444 C26.5714286,38.1148148 25.2428571,39.4814815 23.6190476,39.4814815 L7.38095238,39.4814815 C5.75714286,39.4814815 4.42857143,38.1148148 4.42857143,36.4444444 L4.42857143,7.59259259 L26.5714286,7.59259259 L26.5714286,36.4444444 L26.5714286,36.4444444 Z" id="Shape"></path>
</g>
</g>
<g id="left221-2" sketch:type="MSLayerGroup" transform="translate(192.401869, 23.588287) scale(-1, 1) rotate(-2.000000) translate(-192.401869, -23.588287) translate(155.931845, 9.197409)" fill="#979797">
<path d="M30.2888412,8.13169869 L30.2888412,2.04595641 C30.2888412,1.48343299 29.9074863,0.974528918 29.3182523,0.751950009 C28.7290183,0.529371101 28.0453269,0.634584407 27.57924,1.02100612 L12.6611767,13.3658208 C12.339511,13.6321053 12.1566747,14.0030702 12.1566747,14.3907711 C12.1566747,14.7785786 12.339511,15.1495434 12.6611767,15.415828 L27.57924,27.7607493 C27.8829137,28.0125363 28.2799507,28.145039 28.6825798,28.145039 C28.8967804,28.145039 29.1132907,28.1071963 29.3182523,28.0296988 C29.9076079,27.8071199 30.2888412,27.2983224 30.2888412,26.7356924 L30.2888412,21.1354024 C31.6175657,21.1165343 33.6451775,21.0938287 35.802501,21.0938287 C37.792427,21.0938287 39.5378824,21.1126968 40.9895109,21.1497933 C48.9349919,21.3531843 58.2021466,26.6269613 58.2947804,26.6802609 C58.800255,26.970317 59.4474763,26.9888652 59.9717937,26.7260985 C60.4959895,26.4638647 60.809267,25.9663667 60.7816714,25.4375286 C60.0729372,11.8362304 36.5833242,8.72204447 30.2888412,8.13169869 L30.2888412,8.13169869 Z M41.0831173,18.3328056 C39.6006108,18.2946431 37.8240344,18.2753487 35.802501,18.2753487 C32.0474257,18.2753487 28.6784465,18.3428259 28.6447725,18.3434655 C27.7721664,18.3610544 27.0746164,18.9868976 27.0746164,19.7524923 L27.0746164,23.4683235 L16.1054057,14.3908777 L27.0746164,5.31353844 L27.0746164,9.41749696 C27.0746164,10.1579343 27.7290102,10.7723714 28.5718325,10.8233258 C28.83235,10.8392091 52.6405895,12.4104797 56.9260604,22.7161603 C53.2740738,20.9912804 46.9922337,18.4838565 41.0831173,18.3328056 L41.0831173,18.3328056 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
<g id="left221-3" sketch:type="MSLayerGroup" transform="translate(26.401869, 52.588287) scale(-1, 1) rotate(-44.000000) translate(-26.401869, -52.588287) translate(-10.068155, 38.197409)" fill="#979797">
<path d="M30.2888412,8.13169869 L30.2888412,2.04595641 C30.2888412,1.48343299 29.9074863,0.974528918 29.3182523,0.751950009 C28.7290183,0.529371101 28.0453269,0.634584407 27.57924,1.02100612 L12.6611767,13.3658208 C12.339511,13.6321053 12.1566747,14.0030702 12.1566747,14.3907711 C12.1566747,14.7785786 12.339511,15.1495434 12.6611767,15.415828 L27.57924,27.7607493 C27.8829137,28.0125363 28.2799507,28.145039 28.6825798,28.145039 C28.8967804,28.145039 29.1132907,28.1071963 29.3182523,28.0296988 C29.9076079,27.8071199 30.2888412,27.2983224 30.2888412,26.7356924 L30.2888412,21.1354024 C31.6175657,21.1165343 33.6451775,21.0938287 35.802501,21.0938287 C37.792427,21.0938287 39.5378824,21.1126968 40.9895109,21.1497933 C48.9349919,21.3531843 58.2021466,26.6269613 58.2947804,26.6802609 C58.800255,26.970317 59.4474763,26.9888652 59.9717937,26.7260985 C60.4959895,26.4638647 60.809267,25.9663667 60.7816714,25.4375286 C60.0729372,11.8362304 36.5833242,8.72204447 30.2888412,8.13169869 L30.2888412,8.13169869 Z M41.0831173,18.3328056 C39.6006108,18.2946431 37.8240344,18.2753487 35.802501,18.2753487 C32.0474257,18.2753487 28.6784465,18.3428259 28.6447725,18.3434655 C27.7721664,18.3610544 27.0746164,18.9868976 27.0746164,19.7524923 L27.0746164,23.4683235 L16.1054057,14.3908777 L27.0746164,5.31353844 L27.0746164,9.41749696 C27.0746164,10.1579343 27.7290102,10.7723714 28.5718325,10.8233258 C28.83235,10.8392091 52.6405895,12.4104797 56.9260604,22.7161603 C53.2740738,20.9912804 46.9922337,18.4838565 41.0831173,18.3328056 L41.0831173,18.3328056 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
<path d="M44.5,117 L146.5,117" id="Line-2" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M2.5,173.5 L44.5,117.5" id="Line" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M133.5,172.5 L175.5,116.5" id="Line-3" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M44.5,77 L176.5,77" id="Line-7" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M2.5,133.5 L44.5,77.5" id="Line-8" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M133.5,133.5 L175.5,77.5" id="Line-9" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M44,117.5 L44,77.5" id="Line-4" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-5" stroke="#979797" stroke-width="2" fill="#E8E8E8" sketch:type="MSShapeGroup" transform="translate(82.959003, 108.528366) rotate(47.000000) translate(-82.959003, -108.528366) " x="43" y="96" width="79.918006" height="25.0567324"></rect>
<text id="&quot;World!&quot;" sketch:type="MSTextLayer" transform="translate(86.500000, 110.500000) rotate(47.000000) translate(-86.500000, -110.500000) " font-family="Open Sans" font-size="14" font-weight="normal" fill="#373535">
<tspan x="59" y="116">"World!"</tspan>
</text>
<path d="M176,116 L176,77.5" id="Line-5" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-4" stroke="#979797" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="1" y="134" width="133" height="40"></rect>
<g id="Rectangle-3-+-Oval-1-+-message" sketch:type="MSLayerGroup" transform="translate(38.000000, 147.000000)">
<rect id="Rectangle-3" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="63" height="16"></rect>
<circle id="Oval-1" stroke="#979797" sketch:type="MSShapeGroup" cx="3.5" cy="3.5" r="1.5"></circle>
<text id="message" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#373535">
<tspan x="7" y="12">message</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 8.7 KiB

29
1-js/2-first-steps/4-variables/variable.svg Normal file
View file

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="179px" height="105px" viewBox="0 0 179 105" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>Diagrams</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Variable-box" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M44.5,46 L146.5,46" id="Line-2" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M2.5,102.5 L44.5,46.5" id="Line" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M133.5,101.5 L175.5,45.5" id="Line-3" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M44.5,6 L176.5,6" id="Line-7" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M2.5,62.5 L44.5,6.5" id="Line-8" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M133.5,62.5 L175.5,6.5" id="Line-9" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M44,46.5 L44,6.5" id="Line-4" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-2" stroke="#979797" stroke-width="2" fill="#E8E8E8" sketch:type="MSShapeGroup" transform="translate(82.959003, 37.776161) rotate(47.000000) translate(-82.959003, -37.776161) " x="43" y="25.247795" width="79.918006" height="25.0567324"></rect>
<text id="&quot;Hello!&quot;" sketch:type="MSTextLayer" transform="translate(86.193270, 39.500000) rotate(47.000000) translate(-86.193270, -39.500000) " font-family="Open Sans" font-size="14" font-weight="normal" fill="#373535">
<tspan x="61.6932699" y="45">"Hello!"</tspan>
</text>
<path d="M176,45 L176,6.5" id="Line-5" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-4" stroke="#979797" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="1" y="63" width="133" height="40"></rect>
<g id="Rectangle-3-+-Oval-1-+-message" sketch:type="MSLayerGroup" transform="translate(38.000000, 76.000000)">
<rect id="Rectangle-3" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="63" height="16"></rect>
<circle id="Oval-1" stroke="#979797" sketch:type="MSShapeGroup" cx="3.5" cy="3.5" r="1.5"></circle>
<text id="message" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#373535">
<tspan x="7" y="12">message</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

90
1-js/2-first-steps/5-strict-mode/article.md
View file

@ -1,90 +0,0 @@
# Современный стандарт, "use strict"
Очень долго язык JavaScript развивался без потери совместимости. Новые возможности добавлялись в язык, но старые -- никогда не менялись, чтобы не "сломать" уже существующие HTML/JS-страницы с их использованием.
Однако, это привело к тому, что любая ошибка в дизайне языка становилась "вмороженной" в него навсегда.
Так было до появления стандарта EcmaScript 5 (ES5), который одновременно добавил новые возможности и внёс в язык ряд исправлений, которые могут привести к тому, что старый код, который был написан до его появления, перестанет работать.
Чтобы этого не случилось, решили, что по умолчанию эти опасные изменения будут выключены, и код будет работать по-старому. А для того, чтобы перевести код в режим полного соответствия современному стандарту, нужно указать специальную директиву `use strict`.
Эта директива не поддерживается IE9-.
[cut]
## Директива use strict
Директива выглядит как строка `"use strict";` или `'use strict';` и ставится в начале скрипта.
Например:
```js
"use strict";
// этот код будет работать по современному стандарту ES5
...
```
**Важный пример отличия современного стандарта от старого -- присвоение переменной без объявления, оно в [старом стандарте](http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf) было допустимо, а в современном -- нет.**
Поэтому следующий код выдаст ошибку:
```js
//+ run
"use strict";
*!*
x = 5; // error: x is not defined
*/!*
```
Обратим внимание, директиву `use strict` нужно ставить до кода, иначе она не сработает:
```js
//+ run
var a;
"use strict"; // слишком поздно
*!*
x = 5; // ошибки не будет, так как строгий режим не активирован
*/!*
```
[warn header="Отменить действие `use strict` никак нельзя"]
Не существует директивы `no use strict` или подобной, которая возвращает в старый режим.
Если уж вошли в современный режим, то это дорога в один конец.
[/warn]
[smart header="`use strict` для функций"]
Через некоторое время мы будем проходить [функции](/function-basics). На будущее заметим, что `use strict` также можно указывать в начале функций, тогда строгий режим будет действовать только внутри функции.
[/smart]
## Нужен ли мне use strict?
В строгом режиме исправлены некоторые ошибки в дизайне языка. Если старый код их эксплуатировал -- будет сюрприз и, возможно, ошибка.
**Основная проблема при использовании `use strict` -- поддержка браузеров IE9-, которые игнорируют `use strict`.**
Предположим, что мы, используя `use strict`, разработали код и протестировали его в браузере Chrome. Всё работает... Однако, вероятность ошибок при этом в IE9- выросла! Он-то всегда работает по старому стандарту, а значит, иногда по-другому. Возникающие ошибки придётся отлаживать уже в IE9-, и это намного менее приятно, нежели в Chrome.
Поэтому строгий режим используют пока ещё не повсеместно.
Впрочем, проблема не так страшна. Несовместимостей мало. И, если их знать (а в учебнике мы будем останавливаться на них) и писать правильный код, то всё будет в порядке и `use strict` станет нашим верным помощником.
[smart header="ES5-shim"]
Директива `use strict` влияет только на "опасные" возможности языка. Большинство приятных новых возможностей, которые мы изучим далее, будут работать в любом случае, поскольку ни с чем не конфликтуют.
Браузер IE8 был создан до появления ES5, поэтому не знает о них. Так что же, неужели они для нас закрыты, если мы решаем поддерживать IE8? К счастью, нет.
Сообществом создана библиотека [ES5 shim](https://github.com/es-shims/es5-shim), которая при подключении файлов `es5-shim.js` и `es5-sham.js` добавляет в IE8- многие возможности из современного стандарта JavaScript.
[/smart]
## Итого
В этой главе мы познакомились с понятием "строгий режим" и посмотрели одно из важнейших его отличий -- обязательность объявления переменных. Ранее уже упоминалось, что объявлять переменные через `var` полезно с целью избежания конфликтов в IE8-. Теперь есть ещё довод -- соответствие современному стандарту JavaScript.
Есть и другие отличия работы в строгом режиме, которые мы будем рассматривать далее, по мере погружения в JavaScript.
Далее мы будем предполагать, что разработка ведётся либо в современном браузере, либо в IE8- с подключённым [ES5 shim](https://github.com/es-shims/es5-shim). Это позволит нам использовать большинство возможностей современного JavaScript во всех браузерах.

0
1-js/2-first-steps/4-variable-names/1-declare-variables/solution.md → 1-js/2-first-steps/5-variable-names/1-declare-variables/solution.md
View file

0
1-js/2-first-steps/4-variable-names/1-declare-variables/task.md → 1-js/2-first-steps/5-variable-names/1-declare-variables/task.md
View file

6
1-js/2-first-steps/4-variable-names/article.md → 1-js/2-first-steps/5-variable-names/article.md
View file

@ -95,19 +95,19 @@ var border_left_width;
Кроме того, поскольку именно это имя переменной пришло вам в голову -- скорее всего, оно больше соответствует хранимым там данным, чем то, которое вы придумали изначально. Исключения бывают, но в любом случае -- такое несовпадение -- это повод задуматься. Кроме того, поскольку именно это имя переменной пришло вам в голову -- скорее всего, оно больше соответствует хранимым там данным, чем то, которое вы придумали изначально. Исключения бывают, но в любом случае -- такое несовпадение -- это повод задуматься.
[summary] [smart header="Если коротко..."]
Смысл имени переменной -- это "имя на коробке", по которому мы сможем максимально быстро находить нужные нам данные. Смысл имени переменной -- это "имя на коробке", по которому мы сможем максимально быстро находить нужные нам данные.
**Не нужно бояться переименовывать переменные, если вы придумали имя получше.** **Не нужно бояться переименовывать переменные, если вы придумали имя получше.**
Современные редакторы позволяют делать это очень удобно и быстро. Это в конечном счете сэкономит вам время. Современные редакторы позволяют делать это очень удобно и быстро. Это в конечном счете сэкономит вам время.
[/summary] [/smart]
[warn header="Храните в переменной то, что следует"] [warn header="Храните в переменной то, что следует"]
Бывают ленивые программисты, которые, вместо того чтобы объявить новую переменную, используют существующую. Бывают ленивые программисты, которые, вместо того чтобы объявить новую переменную, используют существующую.
В результате получается, что такая переменная -- как коробка, в которую кидают то одно, то другое, то третье, при этом не меняя название. Что в ней лежит сейчас? А кто его знает.. Нужно подойти, проверить. В результате получается, что такая переменная -- как коробка, в которую кидают то одно, то другое, то третье, при этом не меняя название. Что в ней лежит сейчас? А кто его знает... Нужно подойти, проверить.
Сэкономит такой программист время на объявлении переменной -- потеряет в два раза больше на отладке кода. Сэкономит такой программист время на объявлении переменной -- потеряет в два раза больше на отладке кода.

7
1-js/2-first-steps/6-types-intro/article.md
View file

@ -1,6 +1,9 @@
# Шесть типов данных # Шесть типов данных
В JavaScript существует несколько основных типов данных. В JavaScript существует несколько основных типов данных.
В этой главе мы получим о них общее представление, а позже, в соответствующих главах подробно познакомимся с использованием каждого типа в отдельности.
[cut] [cut]
## Число "number" ## Число "number"
@ -96,7 +99,9 @@ alert(x); // "undefined"
Первые 5 типов называют *"примитивными"*. Первые 5 типов называют *"примитивными"*.
Особняком стоит шестой тип: *"объекты"*. К нему относятся, например, даты, он используется для коллекций данных и для объявления более сложных сущностей. Позже мы вернёмся к этому типу и рассмотрим его принципиальные отличия от примитивов. Особняком стоит шестой тип: *"объекты"*. К нему относятся, например, даты, функции, он используется для коллекций данных и для объявления более сложных сущностей.
Позже мы вернёмся к этому типу и рассмотрим его принципиальные отличия от примитивов.
## Итого ## Итого

4
1-js/2-first-steps/7-properties-and-methods/article.md
View file

@ -51,7 +51,9 @@ alert( hello.toUpperCase ); // function...
*/!* */!*
``` ```
Метод -- это встроенная команда ("функция", мы поговорим о них позже), которую нужно вызвать для получения значения. Если обратиться к ней без скобок, то результатом будет сама эта функция. Как правило браузер выведет её как-то так: `"function toUpperCase() { ... }"`, а чтобы получить результат -- нужно добавить скобки: Метод -- это встроенная команда ("функция", мы поговорим о них позже), которую нужно вызвать для получения значения. При обращении без скобок мы получим саму эту функцию. Как правило браузер выведет её как-то так: `"function toUpperCase() { ... }"`.
А чтобы получить результат -- нужно произвести её вызов, добавив скобки:
```js ```js
//+ run //+ run

31
1-js/2-first-steps/8-operators/article.md
View file

@ -84,9 +84,15 @@ alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21" alert( 2 + '1' ); // "21"
``` ```
Это приведение к строке -- особенность бинарного оператора `"+"`. [smart]
Для сложения строк в программировании используется специальный термин "конкатенация" (от англ. concat).
**Остальные арифметические операторы работают только с числами и всегда приводят аргументы к числу.** В примерах выше оператор `'+'` производил конкатенацию строк.
[/smart]
**Это приведение к строке -- особенность исключительно бинарного оператора `"+"`.**
Остальные арифметические операторы работают только с числами и всегда приводят аргументы к числу.
Например: Например:
@ -110,7 +116,9 @@ alert( +(1-2) ); // -1
Тем не менее, он широко применяется, так как его "побочный эффект" -- преобразование значения в число. Тем не менее, он широко применяется, так как его "побочный эффект" -- преобразование значения в число.
Например, у нас есть два числа, в форме строк, и нужно их сложить. Бинарный плюс сложит их как строки, поэтому используем унарный плюс, чтобы преобразовать к числу: Например, когда мы получаем значения из HTML-полей или от пользователя, то они обычно в форме строк.
А что, если их нужно сложить? Бинарный плюс сложит их как строки:
```js ```js
//+ run //+ run
@ -118,9 +126,16 @@ var a = "2";
var b = "3"; var b = "3";
alert( a + b ); // "23", так как бинарный плюс складывает строки alert( a + b ); // "23", так как бинарный плюс складывает строки
alert( +a + b ); // "23", второй операнд - всё ещё строка ```
alert( +a + +b); // 5, число, так как оба операнда предварительно преобразованы в числа Поэтому используем унарный плюс, чтобы преобразовать к числу:
```js
//+ run
var a = "2";
var b = "3";
alert( +a + +b); // 5, число, оба операнда предварительно преобразованы в числа
``` ```
## Присваивание ## Присваивание
@ -263,7 +278,7 @@ var a = ++i; // (*)
alert(a); // *!*2*/!* alert(a); // *!*2*/!*
``` ```
В строке `(*)` вызов `++i` увеличит переменную, а *затем* вернёт ее значение в `a`. **То есть, в `a` попадёт значение `i` *после* увеличения**. В строке `(*)` вызов `++i` увеличит переменную, а *затем* вернёт ее значение в `a`. Так что в `a` попадёт значение `i` *после* увеличения.
**Постфиксная форма `i++` отличается от префиксной `++i` тем, что возвращает старое значение, бывшее до увеличения.** **Постфиксная форма `i++` отличается от префиксной `++i` тем, что возвращает старое значение, бывшее до увеличения.**
@ -327,7 +342,9 @@ var i = 1;
alert( 2 * i++ ); // 2, выполнился раньше но значение вернул старое alert( 2 * i++ ); // 2, выполнился раньше но значение вернул старое
``` ```
При этом, нужно с осторожностью использовать такую запись, потому что при чтении кода зачастую неочевидно, что переменая увеличивается. Три строки -- длиннее, зато нагляднее: При этом, нужно с осторожностью использовать такую запись, потому что в более длинной строке при быстром "вертикальном" чтении кода легко пропустить такой `i++`, и будет неочевидно, что переменая увеличивается.
Три строки, по одному действию в каждой -- длиннее, зато нагляднее:
```js ```js
//+ run //+ run