diff --git a/1-js/1-getting-started/4-devtools/chrome.png b/1-js/1-getting-started/4-devtools/chrome.png deleted file mode 100755 index ed2e8928..00000000 Binary files a/1-js/1-getting-started/4-devtools/chrome.png and /dev/null differ diff --git a/1-js/1-getting-started/4-devtools/firefox.png b/1-js/1-getting-started/4-devtools/firefox.png deleted file mode 100755 index 5bf06dda..00000000 Binary files a/1-js/1-getting-started/4-devtools/firefox.png and /dev/null differ diff --git a/1-js/1-getting-started/4-devtools/firefox_console_down.png b/1-js/1-getting-started/4-devtools/firefox_console_down.png deleted file mode 100755 index d17cea7b..00000000 Binary files a/1-js/1-getting-started/4-devtools/firefox_console_down.png and /dev/null differ diff --git a/1-js/1-getting-started/4-devtools/firefox_console_enable.png b/1-js/1-getting-started/4-devtools/firefox_console_enable.png deleted file mode 100755 index aa9300d9..00000000 Binary files a/1-js/1-getting-started/4-devtools/firefox_console_enable.png and /dev/null differ diff --git a/1-js/2-first-steps/1-hello-world/article.md b/1-js/2-first-steps/1-hello-world/article.md index 0eed1c60..4a1fa717 100644 --- a/1-js/2-first-steps/1-hello-world/article.md +++ b/1-js/2-first-steps/1-hello-world/article.md @@ -46,10 +46,10 @@
  1. Начинает отображать страницу, показывает часть документа до `script`
  2. Встретив тег `script`, переключается в JavaScript-режим и не показывает, а исполняет его содержимое.
    3. -
  3. Закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.
    4. +
  4. Закончив выполнение, возвращается обратно в HTML-режим и *только тогда* отображает оставшуюся часть документа.
-Попробуйте этот пример в действии. +Попробуйте этот пример в действии, и вы сами всё увидите.
`alert(сообщение)`
Отображает окно с сообщением и ждёт, пока посетитель не нажмёт "Ок".
@@ -83,7 +83,7 @@
Атрибут <script language=...>
Этот атрибут предназначен для указания языка, на котором написан скрипт. По умолчанию, язык -- JavaScript, так что и этот атрибут ставить не обязательно.
Комментарии до и после скриптов
-
В старых руководствах и книгах иногда рекомендуют использовать HTML-комментарии внутри `SCRIPT`, чтобы спрятать Javascript от браузеров, которые не поддерживают его. +
В совсем старых руководствах и книгах иногда рекомендуют использовать HTML-комментарии внутри `SCRIPT`, чтобы спрятать Javascript от браузеров, которые не поддерживают его. Выглядит это примерно так: @@ -118,7 +118,7 @@ ``` -Вы также можете использовать путь относительно текущей страницы, в частности `src="jquery.js"` обозначает файл из текущей директории. +Вы также можете использовать путь относительно текущей страницы, например `src="jquery.js"` обозначает файл из текущей директории. Чтобы подключить несколько скриптов, используйте несколько тегов: @@ -133,7 +133,7 @@ Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего [кеша](http://ru.wikipedia.org/wiki/%D0%9A%D1%8D%D1%88). -Благодаря этому один и тот же большой скрипт, например, меню или библиотека функций, может использоваться на разных страницах без полной перезагрузки с сервера. +Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера. [/smart] @@ -163,7 +163,7 @@ ## Асинхронные скрипты: defer/async -Обычно тег ` - - - -``` - -Выполнятся строго в порядке `1.js` -> `3.js` -> `2.js` -> `4.js`. - -А вот такие: - -```html - - - - -``` - -Выполнятся в неопределённом порядке, смотря какой загрузится первым. Единственно, атрибут `defer` гарантирует, что `4.js` запустится после `2.js`. +При запуске вы увидите, что вся страница отобразилась тут же, а `alert` из внешнего скрипта появится позже, когда загрузится скрипт. **Большинство современных системы рекламы и счётчиков знают про эти атрибуты и используют их.** -Конечно, система рекламы должна корректно обрабатывать асинхронную загрузку скрипта, но никаких принципиальных проблем с этим нет, в частности, системы от Google и Яндекс используют такой подход по умолчанию. +## Итого -## Задачи + Очень важно не только читать учебник, но делать что-то самостоятельно. diff --git a/1-js/2-first-steps/2-structure/article.md b/1-js/2-first-steps/2-structure/article.md index 6c61893d..2998d281 100644 --- a/1-js/2-first-steps/2-structure/article.md +++ b/1-js/2-first-steps/2-structure/article.md @@ -4,14 +4,18 @@ [cut] ## Команды -Например, можно вместо одного вызова `alert` сделать два: +Раньше мы уже видели пример команды: `alert('Привет, мир!')` выводит сообщение. + +Для того, чтобы добавить в код ещё одну команду -- можно поставить её после точки с запятой. + +Например, вместо одного вызова `alert` сделаем два: ```js //+ run alert('Привет'); alert('Мир'); ``` -Как правило, новая команда занимает отдельную строку -- так код лучше читается: +Как правило, каждая команда пишется на отдельной строке -- так код лучше читается: ```js //+ run @@ -48,10 +52,36 @@ alert(3 + **Но в некоторых важных ситуациях 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. \ No newline at end of file +На следующих занятиях мы поговорим о переменных, блоках и других структурных элементах программы на JavaScript. + diff --git a/1-js/2-first-steps/3-strict-mode/article.md b/1-js/2-first-steps/3-strict-mode/article.md new file mode 100644 index 00000000..c828aa28 --- /dev/null +++ b/1-js/2-first-steps/3-strict-mode/article.md @@ -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"? + +Если говорить абстрактно, то -- да, нужен. В строгом режиме исправлены некоторые ошибки в дизайне языка, и вообще, современный стандарт -- это хорошо. + +Однако, есть и две проблемы. + +
+
Поддержка браузеров IE9-, которые игнорируют `"use strict"`.
+
Предположим, что мы, используя `"use strict"`, разработали код и протестировали его в браузере Chrome. Всё работает... Однако, вероятность ошибок при этом в IE9- выросла! Он-то всегда работает по старому стандарту, а значит, иногда по-другому. Возникающие ошибки придётся отлаживать уже в IE9-, и это намного менее приятно, нежели в Chrome. + +Впрочем, проблема не так страшна. Несовместимостей мало. И, если их знать (а в учебнике мы будем останавливаться на них) и писать правильный код, то всё будет в порядке и `"use strict"` станет нашим верным помощником. +
+
Библиотеки, написанные без учёта `"use strict"`.
+
Некоторые библиотеки, который написаны без `"use strict"`, не всегда корректно работают, если вызывающий код содержит `"use strict"`. + +В первую очередь имеются в виду сторонние библиотеки, которые писали не мы, и которые не хотелось бы переписывать или править. + +Таких библиотек мало, но при переводе давно существующих проектов на `"use strict"` эта проблема возникает с завидной регулярностью. +
+
+ +Вывод? + +**Писать код с `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 во всех браузерах. + +Очень скоро, буквально в следующей главе, мы увидим особенности строгого режима на конкретных примерах. + diff --git a/1-js/2-first-steps/3-variables/1.svg b/1-js/2-first-steps/3-variables/1.svg deleted file mode 100644 index 81324490..00000000 --- a/1-js/2-first-steps/3-variables/1.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - Diagrams - Created with Sketch. - - - - - - - - - - - - - - - - "Hello!" - - - - - - - - message - - - - \ No newline at end of file diff --git a/1-js/2-first-steps/3-variables/box-message-hello.png b/1-js/2-first-steps/3-variables/box-message-hello.png deleted file mode 100755 index 1a0a7efa..00000000 Binary files a/1-js/2-first-steps/3-variables/box-message-hello.png and /dev/null differ diff --git a/1-js/2-first-steps/3-variables/box-trans1.png b/1-js/2-first-steps/3-variables/box-trans1.png deleted file mode 100755 index 84335a33..00000000 Binary files a/1-js/2-first-steps/3-variables/box-trans1.png and /dev/null differ diff --git a/1-js/2-first-steps/3-variables/box-trans2.png b/1-js/2-first-steps/3-variables/box-trans2.png deleted file mode 100755 index 48dd70ac..00000000 Binary files a/1-js/2-first-steps/3-variables/box-trans2.png and /dev/null differ diff --git a/1-js/2-first-steps/3-variables/1-hello-variables/solution.md b/1-js/2-first-steps/4-variables/1-hello-variables/solution.md similarity index 100% rename from 1-js/2-first-steps/3-variables/1-hello-variables/solution.md rename to 1-js/2-first-steps/4-variables/1-hello-variables/solution.md diff --git a/1-js/2-first-steps/3-variables/1-hello-variables/task.md b/1-js/2-first-steps/4-variables/1-hello-variables/task.md similarity index 100% rename from 1-js/2-first-steps/3-variables/1-hello-variables/task.md rename to 1-js/2-first-steps/4-variables/1-hello-variables/task.md diff --git a/1-js/2-first-steps/3-variables/article.md b/1-js/2-first-steps/4-variables/article.md similarity index 79% rename from 1-js/2-first-steps/3-variables/article.md rename to 1-js/2-first-steps/4-variables/article.md index 166e88a7..e6047977 100644 --- a/1-js/2-first-steps/3-variables/article.md +++ b/1-js/2-first-steps/4-variables/article.md @@ -28,7 +28,7 @@ message = 'Hello'; // сохраним в переменной строку ```js //+ run var message; -message = 'Hello'; +message = 'Hello!'; alert(message); // выведет содержимое переменной ``` @@ -36,7 +36,7 @@ alert(message); // выведет содержимое переменной Для краткости можно совместить объявление переменной и запись данных: ```js -var message = 'Привет'; +var message = 'Hello!'; ``` Можно даже объявить несколько переменных сразу: @@ -51,7 +51,8 @@ var user = 'John', age = 25, message = 'Hello'; Например, переменная `message` -- это коробка, в которой хранится значение `"Hello!"`: - + + В коробку можно положить любое значение, а позже - поменять его. Значение в переменной можно изменять сколько угодно раз: @@ -59,26 +60,43 @@ var user = 'John', age = 25, message = 'Hello'; //+ run var message; -message = 'Привет'; +message = 'Hello!'; -message = 'Мир'; // заменили значение +message = 'World!'; // заменили значение alert(message); ``` - - При изменении значения старое содержимое переменной удаляется. + + +Можно объявить две переменные и копировать данные из одной в другую: + +```js +//+ run +var hello = 'Hello world!'; + +var message; + +*!* +// скопировали значение +message = hello; +*/!* + +alert(hello); // Hello world! +alert(message); // Hello world! +``` + [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/). -В таких языках положил один раз значение в коробку - и оно хранится там вечно, ни удалить ни изменить. А нужно что-то другое сохранить - изволь создать новую коробку (объявить новую переменную), повторное использование невозможно. +В таких языках положил один раз значение в коробку -- и оно хранится там вечно, ни удалить ни изменить. А нужно что-то другое сохранить -- изволь создать новую коробку (объявить новую переменную), повторное использование невозможно. С виду -- не очень удобно, но, как ни странно, и на таких языках вполне можно успешно программировать. Более того, оказывается, что в ряде областей, например в распараллеливании вычислений, они имеют преимущества. Изучение какого-нибудь функционального языка рекомендуется для расширения кругозора. [/smart] -### Имена переменных [#variable-naming] +## Имена переменных [#variable-naming] На имя переменной в JavaScript наложены всего два ограничения.
    @@ -132,63 +150,51 @@ alert(имя); // "Вася" Существует список зарезервированных слов, которые нельзя использовать для переменных, так как они используются самим языком, например: `var, class, return, export` и др. -Некоторые такие слова, например, `export`, не используются в современном JavaScript, но они зарезервированы на будущее. - Например, такой пример выдаст синтаксическую ошибку: ```js //+ run -var class = 5; // ошибка, слово зарезервировано -alert(class); +var return = 5; // ошибка +alert(return); ``` [/warn] -### Копирование значений +## Важность директивы var -Переменные в JavaScript могут хранить не только строки, но и другие данные, например, числа. - -Объявим две переменные, положим в одну -- строку, а в другую -- число: +В старом стандарте JavaScript разрешалось создавать переменную и без `var`, просто присвоив ей значение: ```js -var num = 100500; -var message = 'Привет'; +num = 5; // переменная num будет создана, если ее не было ``` -При этом в любой момент значение можно скопировать из одной переменной в другую: +В режиме `"use strict"` так делать уже нельзя. + +Следующий код выдаст ошибку: ```js -var num = 100500; -var message = 'Привет'; +//+ run +"use strict"; *!* -message = num; +num = 5; // error: num is not defined */!* ``` -При копировании значение из `num` перезаписывает текущее в `message`. - -**В "коробке" `message` изменится значение**: - - - -После этого присваивания в обеих коробках `num` и `message` находится одно и то же значение `100500`. - -## Важность директивы var - -В JavaScript вы можете создать переменную и без `var`, достаточно просто присвоить ей значение: +Обратим внимание, директиву `use strict` нужно ставить до кода, иначе она не сработает: ```js -x = "value"; // переменная создана, если ее не было +//+ run +var something; + +"use strict"; // слишком поздно + +*!* +num = 5; // ошибки не будет, так как строгий режим не активирован +*/!* ``` -Технически, это не вызовет ошибки, но делать так все-таки не стоит. - -**Всегда определяйте переменные через `var`**. - -Это хороший тон в программировании и помогает избежать ошибок. - [warn header="Ошибка в IE8- без `var`"] Если же вы собираетесь поддерживать IE8-, то у меня для вас ещё одна причина всегда использовать `var`. diff --git a/1-js/2-first-steps/4-variables/variable-change.svg b/1-js/2-first-steps/4-variables/variable-change.svg new file mode 100644 index 00000000..ce1b9b43 --- /dev/null +++ b/1-js/2-first-steps/4-variables/variable-change.svg @@ -0,0 +1,47 @@ + + + + Diagrams 2 + Created with Sketch. + + + + + "Hello!" + + + + + + + + + + + + + + + + + + + + + + + + + "World!" + + + + + + + + message + + + + \ No newline at end of file diff --git a/1-js/2-first-steps/4-variables/variable.svg b/1-js/2-first-steps/4-variables/variable.svg new file mode 100644 index 00000000..041ceea9 --- /dev/null +++ b/1-js/2-first-steps/4-variables/variable.svg @@ -0,0 +1,29 @@ + + + + Diagrams + Created with Sketch. + + + + + + + + + + + + "Hello!" + + + + + + + + message + + + + \ No newline at end of file diff --git a/1-js/2-first-steps/5-strict-mode/article.md b/1-js/2-first-steps/5-strict-mode/article.md deleted file mode 100644 index 4acc70e8..00000000 --- a/1-js/2-first-steps/5-strict-mode/article.md +++ /dev/null @@ -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 во всех браузерах. diff --git a/1-js/2-first-steps/4-variable-names/1-declare-variables/solution.md b/1-js/2-first-steps/5-variable-names/1-declare-variables/solution.md similarity index 100% rename from 1-js/2-first-steps/4-variable-names/1-declare-variables/solution.md rename to 1-js/2-first-steps/5-variable-names/1-declare-variables/solution.md diff --git a/1-js/2-first-steps/4-variable-names/1-declare-variables/task.md b/1-js/2-first-steps/5-variable-names/1-declare-variables/task.md similarity index 100% rename from 1-js/2-first-steps/4-variable-names/1-declare-variables/task.md rename to 1-js/2-first-steps/5-variable-names/1-declare-variables/task.md diff --git a/1-js/2-first-steps/4-variable-names/article.md b/1-js/2-first-steps/5-variable-names/article.md similarity index 98% rename from 1-js/2-first-steps/4-variable-names/article.md rename to 1-js/2-first-steps/5-variable-names/article.md index db6a7899..751ea9dd 100644 --- a/1-js/2-first-steps/4-variable-names/article.md +++ b/1-js/2-first-steps/5-variable-names/article.md @@ -95,19 +95,19 @@ var border_left_width; Кроме того, поскольку именно это имя переменной пришло вам в голову -- скорее всего, оно больше соответствует хранимым там данным, чем то, которое вы придумали изначально. Исключения бывают, но в любом случае -- такое несовпадение -- это повод задуматься. -[summary] +[smart header="Если коротко..."] Смысл имени переменной -- это "имя на коробке", по которому мы сможем максимально быстро находить нужные нам данные. **Не нужно бояться переименовывать переменные, если вы придумали имя получше.** Современные редакторы позволяют делать это очень удобно и быстро. Это в конечном счете сэкономит вам время. -[/summary] +[/smart] [warn header="Храните в переменной то, что следует"] Бывают ленивые программисты, которые, вместо того чтобы объявить новую переменную, используют существующую. -В результате получается, что такая переменная -- как коробка, в которую кидают то одно, то другое, то третье, при этом не меняя название. Что в ней лежит сейчас? А кто его знает.. Нужно подойти, проверить. +В результате получается, что такая переменная -- как коробка, в которую кидают то одно, то другое, то третье, при этом не меняя название. Что в ней лежит сейчас? А кто его знает... Нужно подойти, проверить. Сэкономит такой программист время на объявлении переменной -- потеряет в два раза больше на отладке кода. diff --git a/1-js/2-first-steps/6-types-intro/article.md b/1-js/2-first-steps/6-types-intro/article.md index 71a7da0d..fcead2b2 100644 --- a/1-js/2-first-steps/6-types-intro/article.md +++ b/1-js/2-first-steps/6-types-intro/article.md @@ -1,6 +1,9 @@ # Шесть типов данных В JavaScript существует несколько основных типов данных. + +В этой главе мы получим о них общее представление, а позже, в соответствующих главах подробно познакомимся с использованием каждого типа в отдельности. + [cut] ## Число "number" @@ -96,7 +99,9 @@ alert(x); // "undefined" Первые 5 типов называют *"примитивными"*. -Особняком стоит шестой тип: *"объекты"*. К нему относятся, например, даты, он используется для коллекций данных и для объявления более сложных сущностей. Позже мы вернёмся к этому типу и рассмотрим его принципиальные отличия от примитивов. +Особняком стоит шестой тип: *"объекты"*. К нему относятся, например, даты, функции, он используется для коллекций данных и для объявления более сложных сущностей. + +Позже мы вернёмся к этому типу и рассмотрим его принципиальные отличия от примитивов. ## Итого diff --git a/1-js/2-first-steps/7-properties-and-methods/article.md b/1-js/2-first-steps/7-properties-and-methods/article.md index d878c3f9..7dae7e5a 100644 --- a/1-js/2-first-steps/7-properties-and-methods/article.md +++ b/1-js/2-first-steps/7-properties-and-methods/article.md @@ -51,7 +51,9 @@ alert( hello.toUpperCase ); // function... */!* ``` -Метод -- это встроенная команда ("функция", мы поговорим о них позже), которую нужно вызвать для получения значения. Если обратиться к ней без скобок, то результатом будет сама эта функция. Как правило браузер выведет её как-то так: `"function toUpperCase() { ... }"`, а чтобы получить результат -- нужно добавить скобки: +Метод -- это встроенная команда ("функция", мы поговорим о них позже), которую нужно вызвать для получения значения. При обращении без скобок мы получим саму эту функцию. Как правило браузер выведет её как-то так: `"function toUpperCase() { ... }"`. + +А чтобы получить результат -- нужно произвести её вызов, добавив скобки: ```js //+ run diff --git a/1-js/2-first-steps/8-operators/article.md b/1-js/2-first-steps/8-operators/article.md index faebc399..7aecc255 100644 --- a/1-js/2-first-steps/8-operators/article.md +++ b/1-js/2-first-steps/8-operators/article.md @@ -84,9 +84,15 @@ alert( '1' + 2 ); // "12" alert( 2 + '1' ); // "21" ``` -Это приведение к строке -- особенность бинарного оператора `"+"`. +[smart] +Для сложения строк в программировании используется специальный термин "конкатенация" (от англ. concat). -**Остальные арифметические операторы работают только с числами и всегда приводят аргументы к числу.** +В примерах выше оператор `'+'` производил конкатенацию строк. +[/smart] + +**Это приведение к строке -- особенность исключительно бинарного оператора `"+"`.** + +Остальные арифметические операторы работают только с числами и всегда приводят аргументы к числу. Например: @@ -110,7 +116,9 @@ alert( +(1-2) ); // -1 Тем не менее, он широко применяется, так как его "побочный эффект" -- преобразование значения в число. -Например, у нас есть два числа, в форме строк, и нужно их сложить. Бинарный плюс сложит их как строки, поэтому используем унарный плюс, чтобы преобразовать к числу: +Например, когда мы получаем значения из HTML-полей или от пользователя, то они обычно в форме строк. + +А что, если их нужно сложить? Бинарный плюс сложит их как строки: ```js //+ run @@ -118,9 +126,16 @@ var a = "2"; var b = "3"; 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*/!* ``` -В строке `(*)` вызов `++i` увеличит переменную, а *затем* вернёт ее значение в `a`. **То есть, в `a` попадёт значение `i` *после* увеличения**. +В строке `(*)` вызов `++i` увеличит переменную, а *затем* вернёт ее значение в `a`. Так что в `a` попадёт значение `i` *после* увеличения. **Постфиксная форма `i++` отличается от префиксной `++i` тем, что возвращает старое значение, бывшее до увеличения.** @@ -327,7 +342,9 @@ var i = 1; alert( 2 * i++ ); // 2, выполнился раньше но значение вернул старое ``` -При этом, нужно с осторожностью использовать такую запись, потому что при чтении кода зачастую неочевидно, что переменая увеличивается. Три строки -- длиннее, зато нагляднее: +При этом, нужно с осторожностью использовать такую запись, потому что в более длинной строке при быстром "вертикальном" чтении кода легко пропустить такой `i++`, и будет неочевидно, что переменая увеличивается. + +Три строки, по одному действию в каждой -- длиннее, зато нагляднее: ```js //+ run