diff --git a/1-js/1-getting-started/1-intro/article.md b/1-js/1-getting-started/1-intro/article.md
new file mode 100644
index 00000000..0d4171a8
--- /dev/null
+++ b/1-js/1-getting-started/1-intro/article.md
@@ -0,0 +1,143 @@
+# Введение в JavaScript
+
+Давайте посмотрим, что такого особенного в JavaScript, почему именно он, и какие еще технологии существуют, кроме JavaScript.
+[cut]
+## Что такое JavaScript?   
+
+*JavaScript* изначально создавался для того, чтобы сделать web-странички "живыми".  
+Программы на этом языке называются *скриптами*. Они подключаются напрямую к HTML и, как только загружается страничка -- тут же выполняются.
+
+**Программы на JavaScript -- обычный текст**. Они не требуют какой-то специальной подготовки.
+
+В этом плане JavaScript сильно отличается от другого языка, который называется Java.
+
+[smart header="Почему <u>Java</u>Script?"]
+Когда создавался язык JavaScript, у него изначально было другое название: "LiveScript". Но тогда был очень популярен язык Java, и маркетологи решили, что схожее название сделает новый язык более популярным.
+
+Планировалось, что JavaScript будет эдаким "младшим братом" Java. Однако, история распорядилась по-своему, JavaScript сильно вырос, и сейчас это совершенно независимый язык, со своей спецификацией, которая называется <a href="http://en.wikipedia.org/wiki/ECMAScript">ECMAScript</a>, и к Java не имеет никакого отношения.
+
+У него много особенностей, которые усложняют освоение, но по ходу учебника мы с ними разберемся.
+[/smart]
+
+Чтобы читать и выполнять текст на JavaScript, нужна специальная программа -- [интерпретатор](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D1%80%D0%B5%D1%82%D0%B0%D1%82%D0%BE%D1%80). Процесс выполнения скрипта называют *"интерпретацией"*.
+
+[smart header="Компиляция и интерпретация, для программистов"]
+Строго говоря, для выполнения программ существуют "компиляторы" и "интерпретаторы". 
+
+Компиляторы преобразуют программу в машинный код. Этот машинный код затем распространяется и запускается. 
+
+А интерпретаторы, в частности, встроенный JS-интерпретатор браузера -- получают программу в виде исходного кода. При этом распространяется именно сам исходный код (скрипт).
+
+Современные интерпретаторы перед выполнением преобразуют JavaScript в машинный код или близко к нему, а уже затем выполняют. 
+[/smart]
+
+Во все основные браузеры встроен интерпретатор JavaScript, именно поэтому они могут выполнять скрипты на странице.
+
+Но, разумеется, этим возможности JavaScript не ограничены. Это полноценный язык, программы на котором можно запускать и на сервере, и даже в стиральной машинке, если в ней установлен соответствующий интерпретатор.
+
+## Что умеет JavaScript?   
+
+Современный JavaScript -- это "безопасный" язык программирования общего назначения. Он не предоставляет низкоуровневых средств работы с памятью, процессором, так как изначально был ориентирован на браузеры, в которых это не требуется.
+
+Что же касается остальных возможностей -- они зависят от окружения, в котором запущен JavaScript. 
+
+В браузере JavaScript умеет делать все, что относится к манипуляции со страницей, взаимодействию с посетителем и, в какой-то мере, с сервером: 
+
+<ul>
+<li>Создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и т.п.</li>
+<li>Реагировать на действия посетителя, обрабатывать клики мыши, перемещение курсора, нажатие на клавиатуру и т.п. </li>
+<li>Посылать запросы на сервер и загружать данные без перезагрузки страницы(эта технология называется &quot;AJAX&quot;).</li>
+<li>Получать и устанавливать cookie, запрашивать данные, выводить сообщения...</li>
+<li>...и многое, многое другое!</li> 
+</ul>
+
+## Что НЕ умеет JavaScript?   
+
+JavaScript -- быстрый и мощный язык, но браузер накладывает на его исполнение некоторые ограничения.. 
+
+Это сделано для безопасности пользователей, чтобы злоумышленник не мог с помощью JavaScript получить личные данные или как-то навредить компьютеру пользователя. 
+
+Этих ограничений нет там, где JavaScript используется вне браузера, например на сервере. Кроме того, различные браузеры предоставляют свои механизмы по установке плагинов и расширений, которые обладают расширенными возможностями, но требуют специальных действий по установке от пользователя
+
+**Большинство возможностей JavaScript в браузере ограничено текущим окном и страницей.**
+
+<img src="jslimit.jpg">
+
+<ul>
+<li>JavaScript не может читать/записывать произвольные файлы на жесткий диск, копировать их или вызывать программы. Он не имеет прямого доступа к операционной системе.
+
+Современные браузеры могут работать с файлами, но эта возможность ограничена специально выделенной директорией -- *"песочницей"*. Возможности по доступу к устройствам также прорабатываются в современных стандартах и частично доступны в некоторых браузерах.
+</li>
+<li>JavaScript, работающий в одной вкладке, не может общаться с другими вкладками и окнами, за исключением случая, когда он сам открыл это окно или несколько вкладок из одного источника (одинаковый домен, порт, протокол).
+
+Есть способы это обойти, и они раскрыты в учебнике, но они требуют внедрения специального кода на оба документа, которые находятся в разных вкладках или окнах. Без него, из соображений безопасности, залезть из одной вкладки в другую при помощи JavaScript нельзя. 
+</li>
+<li>Из JavaScript можно легко посылать запросы на сервер, с которого пришла страница. Запрос на другой домен тоже возможен, но менее удобен, т.к. и здесь есть ограничения безопасности. 
+</li>
+</ul>
+
+## В чем уникальность JavaScript?   
+
+Есть как минимум *три* замечательных особенности JavaScript:
+
+[compare]
++Полная интеграция с HTML/CSS.
++Простые вещи делаются просто.
++Поддерживается всеми распространенными браузерами и включен по умолчанию.
+[/compare]
+
+**Этих трёх вещей одновременно нет больше ни в одной браузерной технологии.** Поэтому JavaScript и является самым распространенным средством создания браузерных интерфейсов.
+
+## Тенденции развития.   
+
+Перед тем, как вы планируете изучить новую технологию, полезно ознакомиться с ее развитием и перспективами. Здесь в JavaScript всё более чем хорошо.
+
+### HTML 5
+
+*HTML 5* -- эволюция стандарта HTML, добавляющая новые теги и, что более важно, ряд новых возможностей браузерам.
+
+Вот несколько примеров:
+<ul>
+<li>Чтение/запись файлов на диск (в специальной "песочнице", то есть не любые).</li>
+<li>Встроенная в браузер база данных, которая позволяет хранить данные на компьютере пользователя.</li>
+<li>Многозадачность с одновременным использованием нескольких ядер процессора.</li>
+<li>Проигрывание видео/аудио, без Flash.</li>
+<li>2d и 3d-рисование с аппаратной поддержкой, как в современных играх.</li>
+</ul>
+
+Многие возможности HTML5 всё ещё в разработке, но браузеры постепенно начинают их поддерживать.
+
+[summary]Тенденция: JavaScript становится всё более и более мощным и возможности браузера растут в сторону десктопных приложений.[/summary]
+
+### EcmaScript 6
+
+Сам язык JavaScript улучшается. Современный стандарт EcmaScript 5 включает в себя новые возможности для разработки, EcmaScript 6 будет шагом вперёд в улучшении синтаксиса языка.
+
+Современные браузеры улучшают свои движки, чтобы увеличить скорость исполнения JavaScript, исправляют баги и стараются следовать стандартам.
+
+[summary]Тенденция: JavaScript становится всё быстрее и стабильнее.[/summary]
+
+Очень важно то, что новые стандарты HTML5 и ECMAScript сохраняют максимальную совместимость с предыдущими версиями. Это позволяет избежать неприятностей с уже существующими приложениями.
+
+Впрочем, небольшая проблема с HTML5 всё же есть. Иногда браузеры стараются включить новые возможности, которые еще не полностью описаны в стандарте, но настолько интересны, что разработчики просто не могут ждать.  
+
+...Однако, со временем стандарт меняется и браузерам приходится подстраиваться к нему, что может привести к ошибкам в уже написанном (старом) коде. Поэтому следует дважды подумать перед тем, как применять на практике такие "супер-новые" решения.
+
+При этом все браузеры сходятся к стандарту, и различий между ними уже гораздо меньше, чем всего лишь несколько лет назад.
+
+[summary]Тенденция: всё идет к полной совместимости со стандартом.[/summary]
+
+## Недостатки JavaScript
+
+Зачастую, недостатки подходов и технологий -- это обратная сторона их полезности. Стоит ли упрекать молоток в том, что он -- тяжелый? Да, неудобно, зато гвозди забиваются лучше.
+
+В JavaScript, однако, есть вполне объективные недоработки, связанные с тем, что язык, по выражению его автора (Brendan Eich) делался "за 10 бессонных дней и ночей". Поэтому некоторые моменты продуманы плохо, есть и откровенные ошибки (которые признает тот же Brendan). 
+
+Конкретные примеры мы увидим в дальнейшем, т.к. их удобнее обсуждать в процессе освоения языка.
+
+Пока что нам важно знать, что некоторые "странности" языка не являются чем-то очень умным, а просто не были достаточно хорошо продуманы в своё время. В этом учебнике мы будем обращать особое внимание на основные недоработки и "грабли". Ничего критичного в них нет, если знаешь -- не наступишь.
+
+**В новых версиях JavaScript (ECMAScript) эти недостатки постепенно убирают.** 
+
+Процесс внедрения небыстрый, в первую очередь из-за старых версий IE, но они постепенно вымирают. Современный IE в этом отношении несравнимо лучше.
+
diff --git a/1-js/1-getting-started/1-intro/jslimit.jpg b/1-js/1-getting-started/1-intro/jslimit.jpg
new file mode 100755
index 00000000..12753ea9
Binary files /dev/null and b/1-js/1-getting-started/1-intro/jslimit.jpg differ
diff --git a/1-js/1-getting-started/2-alternatives/allow.png b/1-js/1-getting-started/2-alternatives/allow.png
new file mode 100755
index 00000000..42f874de
Binary files /dev/null and b/1-js/1-getting-started/2-alternatives/allow.png differ
diff --git a/1-js/1-getting-started/2-alternatives/article.md b/1-js/1-getting-started/2-alternatives/article.md
new file mode 100644
index 00000000..8d8368d0
--- /dev/null
+++ b/1-js/1-getting-started/2-alternatives/article.md
@@ -0,0 +1,101 @@
+# Альтернативные браузерные технологии
+
+Современный JavaScript используется во многих областях. Если говорить о браузерах, то вместе с JavaScript на страницах используются и другие технологии.
+
+Самые извеcтные -- это Flash, Java, ActiveX/NPAPI. Связка с ними может помочь достигнуть более интересных результатов в тех местах, где браузерный JavaScript пока не столь хорош, как хотелось бы. 
+
+[cut]
+
+## Java   
+
+Java -- язык общего назначения, на нем можно писать самые разные программы. Для интернет-страниц есть особая возможность - написание *апплетов*.
+
+*Апплет* -- это программа на языке Java, которую можно подключить к HTML при помощи тега `applet`:
+
+```html
+<!--+ run -->
+<applet code="BTApplet.class" codebase="/files/tutorial/intro/alt/">
+  <param name="nodes" value="50,30,70,20,40,60,80,35,65,75,85,90">
+  <param name="root" value="50">
+</applet>
+```
+
+Такой тег загружает Java-программу из файла `BTApplet.class` и выполняет ее с параметрами `param`. Апплет выполняется в отдельной части страницы, в прямоугольном "контейнере". Все действия пользователя внутри него обрабатывает апплет. Контейнер, впрочем, может быть и спрятан, если апплету нечего показывать.
+
+Конечно, для этого на компьютере должна быть установлена и включена среда выполнения Java, включая браузерный плагин. Статистика показывает, что это около 80% компьютеров. Кроме того, апплет должен быть подписан сертификатом издателя (в примере выше апплет без подписи), иначе Java заблокирует его.
+
+**Чем нам, JavaScript-разработчикам, может быть интересен Java?**
+
+В первую очередь тем, что подписанный Java-апплет может всё то же, что и обычная программа, установлена на компьютере посетителя.
+
+При попытке сделать потенциально опасное действие -- пользователь получает вопрос, который выглядит примерно так:
+
+<img src="allow.png">
+
+Обойти это подтверждение или поменять его внешний вид нельзя. То есть, согласие посетителя действительно необходимо. 
+
+И если оно есть -- то Java-апплет может выполнять любые действия, в отличие от JavaScript.
+
+[compare]
++Java может делать *всё* от имени посетителя, совсем как установленная программа. В целях безопасности, потенциально опасные действия требуют подписанного апплета и доверия пользователя.
+-Java требует больше времени для загрузки.
+-Среда выполнения Java, включая браузерный плагин, должна быть установлена на компьютере посетителя и включена. Таких посетителей в интернет -- около 80%.
+-Java-апплет не интегрирован с HTML-страницей, а выполняется отдельно. Но он может вызывать функции JavaScript.
+[/compare]
+
+Подписанный Java-апплет -- это возможность делать все, что угодно, на компьютере посетителя, если он вам доверяет. 
+
+Java и JavaScript могут взаимодействовать, так что можно вынести в Java те вызовы, которым нужно обойти контекст безопасности, а для самой страницы использовать JavaScript.
+
+
+## ActiveX/NPAPI, плагины и расширения для браузера
+
+ActiveX для IE и NPAPI для остальных браузеров позволяют писать плагины для браузера, в том числе на языке C. Как и в ситуации с Java-апплетом, посетитель поставит их в том случае, если вам доверяет.
+
+Эти плагины могут как отображать содержимое специального формата (плагин для проигрывания музыки, для показа PDF), так и взаимодействовать со страницей.
+
+ActiveX при этом еще и очень удобен в установке. Лично я - не фанат Microsoft, но видел отличные приложения, написанные на ActiveX и я могу понять, почему люди используют его и привязываются к IE.
+
+## Adobe Flash   
+
+Adobe Flash -- кросс-браузерная платформа для мультимедиа-приложений, анимаций, аудио и видео. 
+
+*Flash-ролик* -- это скомпилированная программа, написанная на языке ActionScript. Ее можно подключить к HTML-странице и запустить в прямоугольном контейнере.
+
+В первую очередь Flash полезен тем, что позволяет **кросс-браузерно** работать с микрофоном, камерой, с буфером обмена, а также поддерживает продвинутые возможности по работе с сетевыми соединениями. 
+
+[compare]
++Сокеты, UDP для P2P и другие продвинутые возможности по работе с сетевыми соединениями
++Поддержка мультмедиа: изображения, аудио, видео. Работа с веб-камерой и микрофоном.
+-Flash должен быть установлен и включен. А на некоторых устройствах он вообще не поддерживается.
+-Flash не интегрирован с HTML-страницей, а выполняется отдельно.
+-Существуют ограничения безопасности, однако они немного другие, чем в JavaScript.
+[/compare]
+
+**JavaScript и ActionScript могут вызывать функции друг друга**, поэтому обычно сайты используют JavaScript, а там, где он не справляется -- можно подумать о Flash.
+
+## Dart
+
+Язык Dart предложен компанией Google как замена JavaScript, у которого, по выражению создателей Dart, есть [фатальные недостатки](http://lurkmore.to/%D0%A4%D0%B0%D1%82%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D0%BD%D0%B5%D0%B4%D0%BE%D1%81%D1%82%D0%B0%D1%82%D0%BE%D0%BA). 
+
+Сейчас этот язык, хотя и доступен, находится в стадии разработки. Многие из возможностей еще ожидают своей реализации, есть ряд проблем. Другие ведущие интернет-компании объявляли о своей незаинтересованности в Dart. Но в будущем он может составить конкуренцию JS, если его доведут до ума.
+
+Программы на языке Dart специальным инструментом могут быть преобразованы в JavaScript. Конечно, при этом часть важных возможностей Dart теряется.
+
+## CoffeeScript
+
+Язык [CoffeeScript](http://coffeescript.org) -- это "синтаксический сахар" для JavaScript, который короче и, местами, проще. 
+
+Этот язык напрямую в браузере не работает, но предлагается специальная программа для преобразования CoffeeScript в JavaScript, и при этом, так как CoffeeScript изначально задумывался как преобразуемый в JavaScript, результирующий код выглядит вполне хорошо и работает тоже.
+
+Есть и другие языки, которые написаны "поверх" JavaScript, например [TypeScript](http://www.typescriptlang.org/). 
+
+Строго говоря, это не альтернативные технологии, для их использования необходимо, как базу, хорошо знать и понимать JavaScript.
+
+Возможно, вы захотите изучить этот язык после того, как освоите JavaScript, многим он нравится. 
+
+## Итого
+
+Язык JavaScript уникален благодаря своей полной интеграции с HTML/CSS. Он работает почти у всех посетителей.
+
+**...Но хороший JavaScript-программист не должен забывать и о других технологиях.** Ведь наша цель -- создание хороших приложений, и здесь Flash, Java, ActiveX/NPAPI имеют свои уникальные возможности, которые можно использовать вместе с JavaScript.
diff --git a/1-js/1-getting-started/3-pre-coding/article.md b/1-js/1-getting-started/3-pre-coding/article.md
new file mode 100644
index 00000000..ab3cf454
--- /dev/null
+++ b/1-js/1-getting-started/3-pre-coding/article.md
@@ -0,0 +1,111 @@
+# Справочники и спецификации
+
+В этом разделе мы познакомимся со справочниками и спецификациями.
+
+Если вы только начинаете изучение, то вряд ли они будут нужны прямо сейчас. Тем не менее, эта глава находится в начале, так как предсказать точный момент, когда вы захотите заглянуть в справочник -- невозможно, но точно известно, что этот момент настанет. 
+
+Поэтому рекомендуется кратко взглянуть на эту страницу и взять её на заметку, чтобы при необходимости вернуться к ней в будущем.
+
+[cut]
+
+## Справочники, и как в них искать
+
+Самая полная и подробная информация по JavaScript и браузерам есть в справочниках.
+
+Её объём таков, что перевести все с английского невозможно. Даже сделать "единый полный справочник" не получается, так как изменений много и они постоянно происходят.
+
+Тем не менее, жить вполне можно если знать, куда смотреть.
+
+**Есть три основных справочника по JavaScript на английском языке**: 
+
+<ol>
+<li>[Mozilla Developer Network](https://developer.mozilla.org/) -- содержит информацию, верную для основных браузеров. Также там присутствуют расширения только для Firefox, они помечены.
+
+Когда мне нужно быстро найти "стандартную" информацию по `RegExp` - ввожу в Google **"RegExp MDN"**, и ключевое слово "MDN" (Mozilla Developer Network) приводит к информации из этого справочника.
+</li>
+<li>[MSDN](http://msdn.microsoft.com) -- справочник от Microsoft. Там много информации, в том числе и по JavaScript (они называют его "JScript"). Если нужно что-то, специфичное для IE -- лучше лезть сразу туда. 
+
+Например, для информации об особенностях `RegExp` в IE -- полезное сочетание: **"RegExp msdn"**. Иногда к поисковой фразе лучше добавить термин "JScript": **"RegExp msdn jscript"**. </li>
+<li>[Safari Developer Library](https://developer.apple.com/library/safari/navigation/index.html) -- менее известен и используется реже, но в нём тоже можно найти ценную информацию.</li> 
+</ol>
+
+Есть ещё справочники, не от разработчиков браузеров, но тоже хорошие:
+
+<ol>
+<li>[http://help.dottoro.com]() -- содержит подробную информацию по HTML/CSS/JavaScript.</li>
+<li>[http://javascript.ru/manual]() -- справочник по JavaScript на русском языке, он содержит основную информацию по языку, без функций для работы с документом. К нему можно обращаться и по адресу, если знаете, что искать. Например, так: [http://javascript.ru/RegExp]().
+</li>
+<li>[http://www.quirksmode.org]() -- информация о поддержке тех или иных возможностей и несовместимостях. 
+Для поиска можно пользоваться комбинацией **"quirksmode onkeypress"** в Google.
+</li>
+</ol>
+
+## Спецификации
+
+Спецификация -- это самый главный, определяющий документ, в котором написано, как себя ведёт JavaScript, браузер, CSS и т.п.
+
+Если что-то непонятно, и справочник не даёт ответ, то спецификация, как правило, раскрывает тему гораздо глубже и позволяет расставить точки над i.
+
+### Спецификация ECMAScript
+
+Спецификация (формальное описание синтаксиса, базовых объектов и алгоритмов) языка Javascript называется <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript</a>. 
+
+Ее перевод есть на сайте в разделе [стандарт языка](http://javascript.ru/ecma).
+
+[smart header="Почему не просто &quot;JavaScript&quot; ?"]
+Вы можете спросить: "Почему спецификация для JavaScript не называется просто *"JavaScript"*, зачем существует какое-то отдельное название?"
+
+Всё потому, что JavaScript&trade; -- зарегистрированная торговая марка, принадлежащая корпорации Oracle. 
+
+Название "ECMAScript" было выбрано, чтобы сохранить спецификацию независимой от владельцев торговой марки.
+[/smart]
+
+Спецификация может рассказать многое о том, как работает язык, и является самым фундаментальным, доверенным источником информации.
+
+Мы живем во время, когда все быстро изменяется. Современный стандарт -- это <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262 5.1</a> (или просто ES5), поддерживается всеми современными браузерами.
+
+Не за горами -- новая спецификация ES6, в которой предусмотрены еще много полезных возможностей, делающих разработку быстрее и веселее :)
+
+### Спецификации HTML/CSS 
+
+JavaScript -- язык общего назначения, поэтому в спецификации ECMAScript нет ни слова о браузерах. 
+
+Соответствующую информацию вы можете найти на сайте [w3.org](http://w3.org). Там расположены стандарты HTML, CSS и многие другие. 
+
+К сожалению, найти в этой куче то, что нужно, может быть нелегко, особенно когда неизвестно в каком именно стандарте искать. Самый лучший способ -- попросить Google с указанием сайта. 
+
+Например, для поиска `document.cookie` набрать [document.cookie site:w3.org](https://www.google.com/search?q=document.cookie+site%3Aw3.org). 
+
+Последние версии стандартов расположены на домене [dev.w3.org](http://dev.w3.org).
+
+## Итого
+
+Итак, посмотрим какие у нас есть источники информации.
+
+Справочники:
+<ul>
+<li><a href="https://developer.mozilla.org/">Mozilla Developer Network</a> -- информация для Firefox и большинства браузеров. 
+Google-комбо: `"RegExp MDN"`, ключевое слово "MDN".</li>
+<li><a href="http://msdn.microsoft.com/">MSDN</a> -- информация по IE. 
+Google-комбо: `"RegExp msdn"`. Иногда лучше добавить термин "JScript": `"RegExp msdn jscript"`.</li>
+<li>[Safari Developer Library](https://developer.apple.com/library/safari/navigation/index.html) -- информация по Safari.</li>
+<li><a href="http://help.dottoro.com">http://help.dottoro.com</a> -- подробная информация по HTML/CSS/JavaScript с учетом браузерной совместимости.
+Google-комбо: `"RegExp dottoro"`.</li>
+<li>[](http://javascript.ru/manual) -- справочник по JavaScript на русском языке. К нему можно обращаться и по адресу, если знаете, что искать. Например, так: [](http://javascript.ru/RegExp).
+Google-комбо: `"RegExp site:javascript.ru"`.
+</li>
+</ul>
+
+Спецификации содержат важнейшую информацию о том, как оно "должно работать":
+
+<ul>
+<li>JavaScript, современный стандарт [ES5 (англ)](http://www.ecma-international.org/publications/standards/Ecma-262.htm), и предыдущий [ES3 (рус)](http://javascript.ru/ecma).</li>
+<li>HTML/DOM/CSS -- на сайте [w3.org](http://www.w3.org).
+Google-комбо: `"document.cookie site:w3.org"`.</li>
+</ul>
+
+То, как оно на самом деле работает и несовместимости:
+
+<ul>
+<li>Смотрите <a href="http://www.quirksmode.org/">http://www.quirksmode.org/</a>. Google-комбо: `"innerHeight quirksmode"`.</li>
+</ul>
\ No newline at end of file
diff --git a/1-js/1-getting-started/4-editor/article.md b/1-js/1-getting-started/4-editor/article.md
new file mode 100644
index 00000000..2fafff7d
--- /dev/null
+++ b/1-js/1-getting-started/4-editor/article.md
@@ -0,0 +1,70 @@
+# Редакторы для кода
+
+Для разработки обязательно нужен хороший редактор. 
+
+Тот, который вы выберете должен иметь в своем арсенале:
+
+<ol>
+<li>Подсветку синтаксиса.</li>
+<li>Автодополнение.</li>
+<li>"Фолдинг" (от англ. folding) -- возможность скрыть-раскрыть блок кода.</li>
+</ol>
+
+[cut]
+## IDE
+
+Термин IDE (Integrated Development Environment) -- "интегрированная среда разработки", означает редактор, который расширен большим количеством "наворотов", умеет работать со вспомогательными системами, такими как багтрекер, контроль версий, и много чего ещё.
+
+Как правило, IDE загружает весь проект целиком, поэтому может предоставлять автодополнение по функциям всего проекта, удобную навигацию по его файлам и т.п.
+
+Если вы еще не задумывались над выбором IDE, присмотритесь к следующим вариантам. 
+
+<ul>
+<li>Продукты IntelliJ: [WebStorm](http://www.jetbrains.com/webstorm/), а также в зависимости от дополнительного языка программирования [PHPStorm (PHP)](http://www.jetbrains.com/phpstorm/), [IDEA (Java)](http://www.jetbrains.com/idea/), [RubyMine (Ruby)](http://www.jetbrains.com/ruby/) и другие.</li>
+<li>Visual Studio, в сочетании с разработкой под .NET (Win)</li>
+<li>Продукты на основе Eclipse, в частности [Aptana](http://www.aptana.com/) и Zend Studio</li>
+<li>[Komodo IDE](http://www.activestate.com/komodo-ide) и его облегчённая версия [Komodo Edit](http://www.activestate.com/komodo-edit).</li>
+<li>[Netbeans](http://netbeans.org/)</li>
+</ul>
+
+Почти все они, за исключением Visual Studio, кросс-платформенные.
+
+Сортировка в этом списке ничего не означает. Выбор осуществляется по вкусу и по другим технологиям, которые нужно использовать вместе с JavaScript.
+
+Большинство IDE -- платные, с возможностью скачать и бесплатно использовать некоторое время. Но их стоимость, по сравнению с зарплатой веб-разработчика, невелика, поэтому ориентироваться можно на удобство.
+
+## Лёгкие редакторы
+
+Лёгкие редакторы -- не такие мощные, как IDE, но они быстрые и простые, мгновенно стартуют. 
+
+Основная сфера применения лёгкого редактора -- мгновенно открыть нужный файл, чтобы что-то в нём поправить.
+
+На практике "лёгкие" редакторы могут обладать большим количеством плагинов, так что граница между IDE и "лёгким" редактором размыта, спорить что именно редактор, а что IDE -- не имеет смысла. 
+
+Достойны внимания:
+
+<ul>
+<li><a href="http://www.sublimetext.com">Sublime Text</a> (кросс-платформенный, shareware).</li>
+<li>TextMate (Mac, платный)</li>
+<li><a href="http://www.scintilla.org/">SciTe</a> простой, легкий и очень быстрый (Windows, бесплатный).</li>
+<li><a href="http://sourceforge.net/projects/notepad-plus/">Notepad++</a> (Windows, бесплатный).</li>
+<li>Vim, Emacs. Если умеете их готовить.</li>
+</ul>
+
+## Мои редакторы
+
+Лично мои любимые редакторы:
+
+<ul>
+<li>Как IDE -- редакторы от Jetbrains: для чистого JavaScript [WebStorm](http://www.jetbrains.com/webstorm/), если ещё какой-то язык, то в зависимости от языка: [PHPStorm (PHP)](http://www.jetbrains.com/phpstorm/), [IDEA (Java)](http://www.jetbrains.com/idea/), [RubyMine (Ruby)](http://www.jetbrains.com/ruby/). У них есть и другие редакторы под разные языки, но я ими не пользовался.</li>
+<li>Как быстрый редактор -- <a href="http://www.sublimetext.com">Sublime Text</a>.</li>
+<li>Иногда Visual Studio, если разработка идёт под платформу .NET (Win).</li>
+</ul>
+
+Если не знаете, что выбрать -- можно посмотреть на них ;)
+
+## Не будем ссориться
+
+В списках выше перечислены редакторы, которые использую я или мои знакомые -- хорошие разработчики. Конечно, существуют и другие отличные редакторы, если вам что-то нравится -- пользуйтесь.
+
+Выбор редактора, как и любого инструмента, во многом индивидуален и зависит от ваших проектов, привычек, личных предпочтений.
\ No newline at end of file
diff --git a/1-js/1-getting-started/5-devtools/article.md b/1-js/1-getting-started/5-devtools/article.md
new file mode 100644
index 00000000..a4a187bb
--- /dev/null
+++ b/1-js/1-getting-started/5-devtools/article.md
@@ -0,0 +1,112 @@
+# Консоль разработчика
+
+При разработке скриптов всегда возможны ошибки... Впрочем, что я говорю? У вас абсолютно точно будут ошибки, если конечно вы -- человек, а не <a href="http://ru.wikipedia.org/wiki/%D0%91%D0%B5%D0%BD%D0%B4%D0%B5%D1%80_(%D0%A4%D1%83%D1%82%D1%83%D1%80%D0%B0%D0%BC%D0%B0)">робот инопланетный</a>.
+
+Чтобы читать их в удобном виде, а также получать массу полезной информации о выполнении скриптов, в браузерах есть *инструменты разработки*.  
+
+**Для разработки рекомендуется использовать Chrome или Firefox.**
+
+Другие браузеры, как правило, находятся в положении "догоняющих" по возможностям встроенных инструментов разработки. Если ошибка, к примеру, именно в Internet Explorer, тогда уже смотрим конкретно в нём, но обычно -- Chrome/Firefox.
+
+В инструментах разработчика предусмотрена масса возможностей, но на текущем этапе мы просто посмотрим, как их открывать, смотреть в консоли ошибки и запускать команды JavaScript.
+
+[cut]
+
+## Google Chrome   
+
+Откройте страницу [bug.html](/devtools/bug.html). 
+
+В её JavaScript-коде есть ошибка. Конечно, обычному посетителю она не видна, нужно открыть инструменты разработчика.
+
+Для этого используйте сочетание клавиш [key Ctrl+Shift+J], а если у вас Mac, то [key Cmd+Shift+J].
+
+При этом откроются инструменты разработчика и вкладка Console, в которой будет ошибка.
+
+Выглядеть будет примерно так:
+
+<img src="chrome.png">
+
+
+<ul>
+<li>При клике на `bug.html` вы перейдёте во вкладку с кодом к месту ошибки, там будет и краткое описание ошибки. 
+В данном случае ошибка вызвана строкой `lalala`, которая интерпретатору непонятна. </li>
+<li>Здесь же вы можете набирать команды на JavaScript, например наберите `alert("Hello")` -- команду вывода сообщения. Мы познакомимся с этой и другими командами далее.</li>
+<li>Для запуска команды в консоли, нажмите [key Enter], для перевода курсора на следующую строку (если команда состоит из нескольких строк) --  [key Shift+Enter].</li> 
+</ul>
+
+Далее в учебнике мы подробнее рассмотрим отладку в Chrome в главе [](/debugging-chrome).
+
+## Firefox   
+
+Для разработки в Firefox используется расширение Firebug. 
+
+<ol>
+<li>Первым делом его надо установить.
+
+Это можно сделать со страницы <a href="https://addons.mozilla.org/ru/firefox/addon/firebug/">https://addons.mozilla.org/ru/firefox/addon/firebug/</a>.
+
+Перезапустите браузер. Firebug появится в правом-нижнем углу окна:
+
+<img src="firebug-gray.png">
+
+Если иконки не видно -- возможно, у вас выключена панель расширений. Нажмите [key Ctrl+\] для ее показа. 
+
+Ну а если ее нет и там, то нажмите [key F12] -- это горячая клавиша для запуска Firebug, расширение появится, если установлено.
+</li>
+<li>Далее, для того чтобы консоль заработала, её надо включить.
+
+Если консоль уже была включена ранее, то этот шаг не нужен, но если она серая -- выберите в меню `Консоль` и включите её:
+
+<img src="firefox_console_enable.png">
+</li>
+<li>Для того, чтобы Firebug работал без глюков, желательно сначала открыть Firebug, а уже потом -- зайти на страницу.
+
+С открытым Firebug зайдите на страницу с ошибкой: [bug.html](/devtools/bug.html).
+
+Консоль покажет ошибку:
+
+<img src="firefox.png">
+
+Кликните на строчке с ошибкой и браузер покажет исходный код. При необходимости включайте дополнительные панели.
+</li>
+</ol>
+
+Как и в Chrome, можно набирать и запускать команды, область для команд на рисунке находится справа, запуск команд осуществляется нажатием [key Ctrl+Enter] (для Mac -- [key Cmd]).
+
+Можно перенести её вниз. нажав на кнопочку <img src="firefox_console_down.png"> --  на рисунке она не видна, но есть справа-снизу панели разработки.
+
+Об основных возможностях можно прочитать на сайте <a href="http://firebug.ru">firebug.ru</a>.
+
+## Internet Explorer   
+
+Панель разработчика запускается нажатием [key F12].
+
+Откройте её и зайдите на страницу с ошибкой: [bug.html](/devtools/bug.html). Если вы разобрались с Chrome/Firefox, то дальнейшее будет вам более-менее понятно, так как инструменты IE построены позже и по аналогии с Chrome/Firefox.
+
+## Safari   
+
+Горячие клавиши: [key Ctrl+Shift+I], [key Ctrl+Alt+C] для Mac -- [key Cmd] вместо [key Ctrl].
+
+Для доступа к функционалу разработки через меню:
+
+<ol>
+<li>
+В Safari первым делом нужно активировать меню разработки.
+
+Откройте меню, нажав на колесико справа-сверху и выберите `Настройки`.
+
+Затем вкладка `Дополнительно`:
+<img src="safari.png">
+
+Отметьте `Показывать меню "Разработка" в строке меню`. Закройте настройки.
+</li>
+<li>Нажмите на колесико и выберите `Показать строку меню`.
+
+Инструменты будут доступны в появившейся строке меню, в пункте `Разработка`.</li>
+</ol>
+
+## Итого
+
+Мы разобрали, как открывать инструменты разработчика и смотреть ошибки, а также запускать простые команды, не отходя от браузера.
+
+Далее мы приступим к изучению JavaScript.
diff --git a/1-js/1-getting-started/5-devtools/chrome.png b/1-js/1-getting-started/5-devtools/chrome.png
new file mode 100755
index 00000000..ed2e8928
Binary files /dev/null and b/1-js/1-getting-started/5-devtools/chrome.png differ
diff --git a/1-js/1-getting-started/5-devtools/chrome@2x.png b/1-js/1-getting-started/5-devtools/chrome@2x.png
new file mode 100755
index 00000000..ed7909e1
Binary files /dev/null and b/1-js/1-getting-started/5-devtools/chrome@2x.png differ
diff --git a/1-js/1-getting-started/5-devtools/firebug-gray.png b/1-js/1-getting-started/5-devtools/firebug-gray.png
new file mode 100755
index 00000000..1fd5f8fa
Binary files /dev/null and b/1-js/1-getting-started/5-devtools/firebug-gray.png differ
diff --git a/1-js/1-getting-started/5-devtools/firefox.png b/1-js/1-getting-started/5-devtools/firefox.png
new file mode 100755
index 00000000..5bf06dda
Binary files /dev/null and b/1-js/1-getting-started/5-devtools/firefox.png differ
diff --git a/1-js/1-getting-started/5-devtools/firefox@2x.png b/1-js/1-getting-started/5-devtools/firefox@2x.png
new file mode 100755
index 00000000..bf602cd9
Binary files /dev/null and b/1-js/1-getting-started/5-devtools/firefox@2x.png differ
diff --git a/1-js/1-getting-started/5-devtools/firefox_console_down.png b/1-js/1-getting-started/5-devtools/firefox_console_down.png
new file mode 100755
index 00000000..d17cea7b
Binary files /dev/null and b/1-js/1-getting-started/5-devtools/firefox_console_down.png differ
diff --git a/1-js/1-getting-started/5-devtools/firefox_console_down@2x.png b/1-js/1-getting-started/5-devtools/firefox_console_down@2x.png
new file mode 100755
index 00000000..2e5dd021
Binary files /dev/null and b/1-js/1-getting-started/5-devtools/firefox_console_down@2x.png differ
diff --git a/1-js/1-getting-started/5-devtools/firefox_console_enable.png b/1-js/1-getting-started/5-devtools/firefox_console_enable.png
new file mode 100755
index 00000000..aa9300d9
Binary files /dev/null and b/1-js/1-getting-started/5-devtools/firefox_console_enable.png differ
diff --git a/1-js/1-getting-started/5-devtools/firefox_console_enable@2x.png b/1-js/1-getting-started/5-devtools/firefox_console_enable@2x.png
new file mode 100755
index 00000000..a9eb7f26
Binary files /dev/null and b/1-js/1-getting-started/5-devtools/firefox_console_enable@2x.png differ
diff --git a/1-js/1-getting-started/5-devtools/safari.png b/1-js/1-getting-started/5-devtools/safari.png
new file mode 100755
index 00000000..7fda7429
Binary files /dev/null and b/1-js/1-getting-started/5-devtools/safari.png differ
diff --git a/1-js/1-getting-started/index.md b/1-js/1-getting-started/index.md
new file mode 100644
index 00000000..b3e8e77d
--- /dev/null
+++ b/1-js/1-getting-started/index.md
@@ -0,0 +1,3 @@
+# Введение
+
+Про язык JavaScript и окружение для разработки на нём.
\ No newline at end of file
diff --git a/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.md b/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.md
new file mode 100644
index 00000000..95104042
--- /dev/null
+++ b/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.md
@@ -0,0 +1,19 @@
+Код страницы:
+
+```html
+<!--+ run -->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<script>
+  alert('Я - JavaScript!');
+</script>
+
+</body>
+</html>
+```
+
diff --git a/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.view/index.html b/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.view/index.html
new file mode 100644
index 00000000..a3b0b7b1
--- /dev/null
+++ b/1-js/2-first-steps/1-hello-world/1-hello-alert/solution.view/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<script>
+  alert('Я - JavaScript!');
+</script>
+
+</body>
+</html>
diff --git a/1-js/2-first-steps/1-hello-world/1-hello-alert/task.md b/1-js/2-first-steps/1-hello-world/1-hello-alert/task.md
new file mode 100644
index 00000000..22890483
--- /dev/null
+++ b/1-js/2-first-steps/1-hello-world/1-hello-alert/task.md
@@ -0,0 +1,9 @@
+# Выведите alert
+
+[importance 5]
+
+Сделайте страницу, которая выводит "Я - JavaScript!".
+
+Создайте ее на диске, откройте в браузере, убедитесь, что все работает.
+
+[demo src="solution"]
diff --git a/1-js/2-first-steps/1-hello-world/2-hello-alert-ext/alert.js b/1-js/2-first-steps/1-hello-world/2-hello-alert-ext/alert.js
new file mode 100755
index 00000000..5dbc7e7b
--- /dev/null
+++ b/1-js/2-first-steps/1-hello-world/2-hello-alert-ext/alert.js
@@ -0,0 +1 @@
+alert('Я - JavaScript!');
diff --git a/1-js/2-first-steps/1-hello-world/2-hello-alert-ext/index.html b/1-js/2-first-steps/1-hello-world/2-hello-alert-ext/index.html
new file mode 100755
index 00000000..7b1dac29
--- /dev/null
+++ b/1-js/2-first-steps/1-hello-world/2-hello-alert-ext/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<script src="alert.js"></script>
+
+</body>
+</html>
diff --git a/1-js/2-first-steps/1-hello-world/2-hello-alert-ext/solution.md b/1-js/2-first-steps/1-hello-world/2-hello-alert-ext/solution.md
new file mode 100644
index 00000000..bef2fc5b
--- /dev/null
+++ b/1-js/2-first-steps/1-hello-world/2-hello-alert-ext/solution.md
@@ -0,0 +1,12 @@
+Код для HTML-файла:
+
+```html
+<!--+ src="index.html" -->
+```
+
+Для файла `alert.js` из той же директории:
+
+```js
+//+ src="alert.js"
+```
+
diff --git a/1-js/2-first-steps/1-hello-world/2-hello-alert-ext/task.md b/1-js/2-first-steps/1-hello-world/2-hello-alert-ext/task.md
new file mode 100644
index 00000000..93cf1b4e
--- /dev/null
+++ b/1-js/2-first-steps/1-hello-world/2-hello-alert-ext/task.md
@@ -0,0 +1,7 @@
+# Вывести alert внешним скриптом
+
+[importance 5]
+
+Возьмите решение предыдущей задачи [](/task/hello-alert) и вынесите скрипт во внешний файл `alert.js`, который расположите в той же директории.
+
+Откройте страницу и проверьте, что вывод сообщения всё ещё работает.
\ No newline at end of file
diff --git a/1-js/2-first-steps/1-hello-world/3-async-defer-first/solution.md b/1-js/2-first-steps/1-hello-world/3-async-defer-first/solution.md
new file mode 100644
index 00000000..089a87e0
--- /dev/null
+++ b/1-js/2-first-steps/1-hello-world/3-async-defer-first/solution.md
@@ -0,0 +1,6 @@
+Ответы:
+<ol>
+<li>Первым выполнится `big.js`, это нормальная последовательность выполнения подряд идущих скриптов.</li>
+<li>Первым выполнится `small.js`, так как скрипты из-за `async` ведут себя совершенно независимо друг от друга, страница тоже от них не зависит.</li>
+<li>Первым выполнится `big.js`, так как скрипты, подключённые через `defer`, сохраняют порядок выполнения относительно друг друга.</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/2-first-steps/1-hello-world/3-async-defer-first/task.md b/1-js/2-first-steps/1-hello-world/3-async-defer-first/task.md
new file mode 100644
index 00000000..72405f9a
--- /dev/null
+++ b/1-js/2-first-steps/1-hello-world/3-async-defer-first/task.md
@@ -0,0 +1,27 @@
+# Какой скрипт выполнится первым?
+
+[importance 4]
+
+В примере ниже подключены два скрипта `small.js` и `big.js`.
+
+Если предположить, что `small.js` загружается гораздо быстрее, чем `big.js` --  какой выполнится первым?
+
+```html
+<script src="big.js"></script>
+<script src="small.js"></script>
+```
+
+А вот так?
+
+```html
+<script async src="big.js"></script>
+<script async src="small.js"></script>
+```
+
+А так?
+
+```html
+<script defer src="big.js"></script>
+<script defer src="small.js"></script>
+```
+
diff --git a/1-js/2-first-steps/1-hello-world/4-async-defer-inline-first/solution.md b/1-js/2-first-steps/1-hello-world/4-async-defer-inline-first/solution.md
new file mode 100644
index 00000000..288b3b6f
--- /dev/null
+++ b/1-js/2-first-steps/1-hello-world/4-async-defer-inline-first/solution.md
@@ -0,0 +1,17 @@
+**Первым выполнится обычный скрипт.**
+
+Заметим, что атрибуты `defer` и `async` на обычном скрипте будут проигнорированы. То есть, он работает так же, как и без них:
+
+```html
+<script>
+  alert("обычный скрипт");
+</script>
+```
+
+Далее, обычно скрипты с `async/defer` не тормозят обработку страницы. То есть, браузер начнёт их загружать, а сам пойдёт дальше показывать страницу и выполнять скрипты.
+
+То есть, обычный скрипт в этом случае, очевидно, выполнится первым.
+
+...Но более того, даже если скрипты `small.js` и `big.js` не нужно загружать, а браузер берёт их из кеша, то он всё равно устроен так, что выполнит их после основных скриптов страницы.
+
+Таким образом, первым всегда будет обычный скрипт, а вот относительный порядок `small.js` и `big.js` здесь не регламентирован.
diff --git a/1-js/2-first-steps/1-hello-world/4-async-defer-inline-first/task.md b/1-js/2-first-steps/1-hello-world/4-async-defer-inline-first/task.md
new file mode 100644
index 00000000..e4013123
--- /dev/null
+++ b/1-js/2-first-steps/1-hello-world/4-async-defer-inline-first/task.md
@@ -0,0 +1,17 @@
+# Что выполнится первым из скриптов?
+
+[importance 4]
+
+В этой странице есть три скрипта. 
+
+Какой выполнится первым?
+
+```html
+<script defer src="small.js"></script>
+<script async src="big.js"></script>
+
+<script defer async>
+  alert("обычный скрипт");
+</script>
+```
+
diff --git a/1-js/2-first-steps/1-hello-world/article.md b/1-js/2-first-steps/1-hello-world/article.md
new file mode 100644
index 00000000..0eed1c60
--- /dev/null
+++ b/1-js/2-first-steps/1-hello-world/article.md
@@ -0,0 +1,315 @@
+# Привет, мир!
+
+В этой статье мы создадим простой скрипт и посмотрим, как он работает.
+[cut]
+## Тег SCRIPT
+
+[smart header="А побыстрее?"]
+В том (и только в том!) случае, если читатель нетерпелив и уже разрабатывал на JavaScript или имеет достаточно опыта в другом программировании, он может не читать каждую статью этого раздела, а прыгнуть сразу на главу [](/javascript-specials). Там будет кратко самое основное.
+
+Если же у вас есть достаточно времени и желание начать с азов, то читайте дальше :)
+[/smart]
+
+Программы на языке JavaScript можно вставить в любое место HTML при помощи тега `SCRIPT`. Например:
+
+```html
+<!--+ run height=100 -->
+<!DOCTYPE HTML>
+<html>
+<head>
+  <!-- Тег meta для указания кодировки -->
+  <meta charset="utf-8">
+</head>
+<body>
+
+  <p>Начало документа...</p>
+
+*!*
+  <script>
+    alert('Привет, Мир!');
+  </script>
+*/!*
+
+  <p>...Конец документа</p>
+
+</body>
+</html>
+```
+
+Этот пример использует следующие элементы:
+ 
+<dl>
+<dt><code>&lt;script&gt; ... &lt;/script&gt;</code></dt>
+<dd>Тег `script` содержит исполняемый код. Предыдущие стандарты HTML требовали обязательного указания атрибута `type`, но сейчас он уже не нужен. Достаточно просто `<script>`.
+
+Браузер, когда видит `<script>`:
+<ol>
+<li>Начинает отображать страницу, показывает часть документа до `script`</li>
+<li>Встретив тег `script`, переключается в JavaScript-режим и не показывает, а исполняет его содержимое.</li>
+<li>Закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.</li>
+</ol>
+
+Попробуйте этот пример в действии.
+</dd>
+<dt>`alert(сообщение)`</dt>
+<dd>Отображает окно с сообщением и ждёт, пока посетитель не нажмёт "Ок".</dd>
+</dl>
+
+[smart header="Кодировка и тег `META`"]
+При попытке сделать такой же файл у себя на диске и запустить, вы можете столкнуться с проблемой -- выводятся "кракозяблы", "квадратики" и "вопросики" вместо русского текста.
+
+Чтобы всё было хорошо, нужно:
+<ol>
+<li>Убедиться, что в `HEAD` есть строка `<meta charset="utf-8">`. Если вы будете открывать файл с диска, то именно он укажет браузеру кодировку.</li>
+<li>Убедиться, что редактор сохранил файл именно в кодировке UTF-8, а не, скажем, в `windows-1251`.</li>
+</ol>
+
+Указание кодировки -- часть обычного HTML, я упоминаю об этом "на всякий случай", чтобы не было сюрпризов при запуске примеров локально.
+[/smart]
+
+
+## Современная разметка для SCRIPT
+
+В старых скриптах оформление тега `SCRIPT` было немного сложнее. В устаревших руководствах можно встретить следующие элементы: 
+
+<dl>
+ <dt>Атрибут <code>&lt;script <u>type</u>=...&gt;</code></dt>
+
+ <dd>В отличие от HTML5, стандарт HTML 4 требовал обязательного указания этого атрибута. Выглядел он так: `type="text/javascript"`. Если указать другое значение `type`, то скрипт выполнен не будет.
+
+ В современной разработке атрибут `type` не обязателен.
+</dd>
+
+ <dt>Атрибут <code>&lt;script <u>language</u>=...&gt;</code></dt>
+  <dd>Этот атрибут предназначен для указания языка, на котором написан скрипт. По умолчанию, язык -- JavaScript, так что и этот атрибут ставить не обязательно.</dd>
+<dt>Комментарии до и после скриптов</dt>
+<dd>В старых руководствах и книгах иногда рекомендуют использовать HTML-комментарии внутри `SCRIPT`, чтобы спрятать Javascript от браузеров, которые не поддерживают его. 
+
+Выглядит это примерно так:
+
+```html
+<script type="text/javascript"><!--
+    ...
+//--></script>
+```
+
+Браузер, для которого предназначались такие трюки, очень старый Netscape, давно умер. Поэтому в этих комментариях нет нужды.
+</dd>
+</dl>
+
+Итак, для вставки скрипта мы просто пишем `<script>`, без дополнительных атрибутов и комментариев.
+
+
+## Внешние скрипты
+
+Если JavaScript-кода много -- его выносят в отдельный файл, который подключается в HTML:
+
+```html
+<script src="/path/to/script.js"></script>
+```
+
+Здесь `/path/to/script.js` -- это абсолютный путь к файлу, содержащему скрипт (из корня сайта). 
+
+Браузер сам скачает скрипт и выполнит.
+
+Можно указать и полный URL, например:
+
+```html
+<script src="http://code.jquery.com/jquery.js"></script>
+```
+
+Вы также можете использовать путь относительно текущей страницы, в частности `src="jquery.js"` обозначает файл из текущей директории.
+
+Чтобы подключить несколько скриптов, используйте несколько тегов:
+
+```html
+<script src="/js/script1.js"></script>
+<script src="/js/script2.js"></script>
+...
+```
+
+[smart]
+Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл.
+
+Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего [кеша](http://ru.wikipedia.org/wiki/%D0%9A%D1%8D%D1%88).
+
+Благодаря этому один и тот же большой скрипт, например, меню или библиотека функций, может использоваться на разных страницах без полной перезагрузки с сервера.  
+
+[/smart]
+
+
+[warn header="Если указан атрибут `src`, то содержимое тега игнорируется."]
+
+В одном теге `SCRIPT` нельзя одновременно подключить внешний скрипт и указать код. 
+
+Вот так не cработает:
+
+```html
+<script *!*src*/!*="file.js">
+  alert(1); // так как указан src, то внутренняя часть тега игнорируется
+</script>
+```
+
+Нужно выбрать: либо `SCRIPT` идёт с `src`, либо содержит код. Тег выше следует разбить на два: один -- с `src`, другой -- с кодом, вот так:
+
+```html
+<script src="file.js"></script>
+<script>
+  alert(1); 
+</script>
+```
+
+[/warn]
+
+## Асинхронные скрипты: defer/async
+
+Обычно тег `<script>` блокирует отображение страницы.
+
+Например, в примере ниже -- пока все кролики не будут посчитаны -- нижний `<p>` не будет показан:
+
+```html
+<!--+ run height=100 -->
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+  <p>Начинаем считать:</p>
+
+*!*
+  <script>
+    alert('Первый кролик!');
+    alert('Второй кролик!');
+    alert('Третий кролик!');
+  </script>
+*/!*
+
+  <p>Кролики посчитаны!</p>
+
+</body>
+</html>
+```
+
+Такое поведение называют "синхронным". Как правило, оно вполне нормально, но бывает беда.
+
+Внешние скрипты `<script src="...">` блокируют отображение страницы не только на время выполнения, которое обычно небольшое, но и на время загрузки тоже!
+
+В ряде случаев это совсем неуместно. Например, мы подключаем внешний скрипт, который показывает рекламу. По-хорошему, он не должен никак задерживать отображение страницы сайта. Реклама -- это дополнение к странице, она не должна как-то тормозить сайт и нарушать его функционал.
+
+А представим на минуту, что сервер, с которого загружается внешний скрипт, перегружен и долго не отвечает? Тогда вся страница "подвиснет", пока он не загрузится. 
+
+Вот пример, с подобным скриптом (стоит искусственная задержка загрузки):
+
+```html
+<!--+ run height=100 -->
+<p>Начало страницы...</p>
+
+<script src="http://js.cx/hello/ads.js?speed=0"></script>
+
+<p>...Важная информация!</p>
+```
+
+В примере выше важная информация не покажется, пока не загрузится внешний скрипт. Но действительно ли он так важен, что мы хотим заставить посетителя ждать? Если это реклама или счётчик посещаемости, то вряд ли.
+
+Можно поставить все подобные скрипты в конец страницы -- это уменьшит проблему, но не избавит от неё полностью, поскольку если какой-то один скрипт тормозит или завис, то последующие будут его ждать.
+
+Чтобы это обойти, можно использовать для скриптов атрибуты `async` или `defer`:
+<dl>
+<dt>Атрибут `async`</dt>
+<dd>Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении `<script async src="...">` браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен -- он выполнится.</dd>
+<dt>Атрибут `defer`</dt>
+<dd>Поддерживается всеми браузерами, включая самые старые IE. Скрипт выполняется асинхронно, не заставляет ждать страницу, но, в отличие от `async`, браузер гарантирует, что относительный порядок скриптов с `defer` будет сохранён. 
+
+То есть, в таком коде (с `async`) первым сработает тот скрипт, который раньше загрузится:
+
+```html
+<script src="1.js" async></script>
+<script src="2.js" async></script>
+```
+
+А в таком коде (с `defer`) первым сработает всегда `1.js`, а скрипт `2.js`, даже если загрузился раньше, будет его ждать.
+
+```html
+<script src="1.js" defer></script>
+<script src="2.js" defer></script>
+```
+
+Атрибут `defer` используют в тех случаях, когда второй скрипт `2.js` зависит от первого `1.js`, к примеру -- использует что-то, описанное первым скриптом.
+
+</dd>
+</dl>
+
+[warn header="Либо `async` либо `defer`"]
+Одновременно указывать `async` и `defer` не имеет смысла. 
+
+В этом случае браузер использует только `async`.
+[/warn]
+
+[warn header="Атрибуты `async/defer` -- только для внешних скриптов"]
+Атрибуты `async/defer` работают только в том случае, если назначены на внешние скрипты, т.е. имеющие `src`. 
+
+При попытке назначить их на обычные скрипты <code>&lt;script&gt;...&lt;/script&gt;</code>, они будут проигнороированы.
+[/warn]
+
+Тот же пример с `async`:
+
+```html
+<!--+ run height=100 -->
+<p>Начало страницы...</p>
+
+<script *!*async*/!* src="http://js.cx/hello/ads.js?speed=0"></script>
+
+<p>...Важная информация!</p>
+```
+
+При запуске вы увидите, что вся страница отобразилась тут же, а реклама будет показана позже, когда загрузится скрипт. 
+
+### Разные типы скриптов
+
+На странице могут одновременно быть:
+<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 и Яндекс используют такой подход по умолчанию.
+
+## Задачи
+
+Очень важно не только читать учебник, но делать что-то самостоятельно.
+
+Решите задачки, чтобы удостовериться, что вы все правильно поняли.
+
diff --git a/1-js/2-first-steps/10-bitwise-operators/1-bitwise-operator-value/solution.md b/1-js/2-first-steps/10-bitwise-operators/1-bitwise-operator-value/solution.md
new file mode 100644
index 00000000..bf0e32fd
--- /dev/null
+++ b/1-js/2-first-steps/10-bitwise-operators/1-bitwise-operator-value/solution.md
@@ -0,0 +1,6 @@
+<ol>
+<li>Операция `a^b` ставит бит результата в `1`, если на соответствующей битовой позиции в `a` или `b` (но не одновременно) стоит `1`.
+
+Так как в `0` везде стоят нули, то биты берутся в точности как во втором аргументе.</li>
+<li>Первое побитовое НЕ `~` превращает `0` в `1`, а `1` в `0`. А второе НЕ превращает ещё раз, в итоге получается как было.</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/2-first-steps/10-bitwise-operators/1-bitwise-operator-value/task.md b/1-js/2-first-steps/10-bitwise-operators/1-bitwise-operator-value/task.md
new file mode 100644
index 00000000..ea53eeab
--- /dev/null
+++ b/1-js/2-first-steps/10-bitwise-operators/1-bitwise-operator-value/task.md
@@ -0,0 +1,13 @@
+# Побитовый оператор и значение
+
+[importance 5]
+
+Почему побитовые операции в примерах ниже не меняют число? Что они делают внутри?
+
+```js
+//+ run
+alert( 123 ^ 0 ); // 123
+alert( 0 ^ 123 ); // 123
+alert( ~~123 ); // 123
+```
+
diff --git a/1-js/2-first-steps/10-bitwise-operators/2-check-integer/solution.md b/1-js/2-first-steps/10-bitwise-operators/2-check-integer/solution.md
new file mode 100644
index 00000000..2a53ef36
--- /dev/null
+++ b/1-js/2-first-steps/10-bitwise-operators/2-check-integer/solution.md
@@ -0,0 +1,14 @@
+Один из вариантов такой функции:
+
+```js
+//+ run
+function isInteger(num) {
+  return (num ^ 0) === num;
+}
+
+alert( isInteger(1) ); // true
+alert( isInteger(1.5) ); // false
+alert( isInteger(-0.5) ); // false
+```
+
+Обратите внимание: `num^0` -- в скобках! Это потому, что приоритет операции `^` очень низкий. Если не поставить скобку, то `===` сработает раньше. Получится `num ^ (0 === num)`, а это уже совсем другое дело.
\ No newline at end of file
diff --git a/1-js/2-first-steps/10-bitwise-operators/2-check-integer/task.md b/1-js/2-first-steps/10-bitwise-operators/2-check-integer/task.md
new file mode 100644
index 00000000..03e8505e
--- /dev/null
+++ b/1-js/2-first-steps/10-bitwise-operators/2-check-integer/task.md
@@ -0,0 +1,14 @@
+# Проверка, целое ли число
+
+[importance 3]
+
+Напишите функцию `isInteger(num)`, которая возвращает `true`, если `num` -- целое число, иначе `false`.
+
+Например:
+
+```js
+alert( isInteger(1) ); // true
+alert( isInteger(1.5) ); // false
+alert( isInteger(-0.5) ); // false
+```
+
diff --git a/1-js/2-first-steps/10-bitwise-operators/3-bitwise-symmetry/solution.md b/1-js/2-first-steps/10-bitwise-operators/3-bitwise-symmetry/solution.md
new file mode 100644
index 00000000..abc0d296
--- /dev/null
+++ b/1-js/2-first-steps/10-bitwise-operators/3-bitwise-symmetry/solution.md
@@ -0,0 +1,23 @@
+Операция над числами, в конечном итоге, сводится к битам. 
+
+Посмотрим, можно ли поменять местами биты слева и справа.
+
+Например, таблица истинности для `^`:
+<table class="bordered">
+<tr>
+<th>`a`</th>
+<th>`b`</th>
+<th>результат</th>
+</tr>
+<tr><td>`0`</td><td>`0`</td><td>`0`</td></tr>
+<tr><td>`0`</td><td>`1`</td><td>`1`</td></tr>
+<tr><td>`1`</td><td>`0`</td><td>`1`</td></tr>
+<tr><td>`1`</td><td>`1`</td><td>`0`</td></tr>
+</table>
+
+Случаи `0^0` и `1^1` заведомо не изменятся при перемене мест, поэтому нас не интересуют. А вот `0^1` и `1^0` эквивалентны и равны `1`.
+
+Аналогично можно увидеть, что и другие операторы симметричны.
+
+Ответ: **да**.
+
diff --git a/1-js/2-first-steps/10-bitwise-operators/3-bitwise-symmetry/task.md b/1-js/2-first-steps/10-bitwise-operators/3-bitwise-symmetry/task.md
new file mode 100644
index 00000000..96b7ef88
--- /dev/null
+++ b/1-js/2-first-steps/10-bitwise-operators/3-bitwise-symmetry/task.md
@@ -0,0 +1,12 @@
+# Симметричны ли операции ^, |, &?
+
+[importance 5]
+
+Верно ли, что для любых `a` и `b` выполняются равенства ниже?
+<ul>
+<li>`a ^ b == b ^ a`</li>
+<li>`a & b == b & a`</li>
+<li>`a | b == b | a`</li>
+</ul>
+
+Иными словами, при перемене мест -- всегда ли результат остаётся тем же?
\ No newline at end of file
diff --git a/1-js/2-first-steps/10-bitwise-operators/4-bit-rounding/solution.md b/1-js/2-first-steps/10-bitwise-operators/4-bit-rounding/solution.md
new file mode 100644
index 00000000..0b6f6443
--- /dev/null
+++ b/1-js/2-first-steps/10-bitwise-operators/4-bit-rounding/solution.md
@@ -0,0 +1,29 @@
+Всё дело в том, что побитовые операции преобразуют число в 32-битное целое.
+
+Обычно число в JavaScript имеет 64-битный формат с плавающей точкой. При этом часть битов (`52`) отведены под цифры, часть (`11`) отведены под хранение номера позиции, на которой стоит десятичная точка, и один бит -- знак числа.
+
+Это означает, что максимальное целое число, которое можно хранить, занимает `52` бита.
+
+Число `12345678912345` в двоичном виде: `10110011101001110011110011100101101101011001` (44 цифры). 
+
+Побитовый оператор `^` преобразует его в 32-битное путём отбрасывания десятичной точки и "лишних" старших цифр.  При этом, так как число большое и старшие биты здесь ненулевые, то, естественно, оно изменится.
+
+Вот ещё пример:
+
+```js
+//+ run
+// в двоичном виде 1000000000000000000000000000000 (31 цифры)
+alert( Math.pow(2, 30) ); // 1073741824
+alert( Math.pow(2, 30) ^ 0 ); // 1073741824, всё ок, длины хватает
+
+// в двоичном виде 100000000000000000000000000000000 (33 цифры)
+alert( Math.pow(2, 32) ); // 4294967296
+alert( Math.pow(2, 32) ^ 0 ); // 0, отброшены старшие цифры, остались нули
+
+// пограничный случай
+// в двоичном виде 10000000000000000000000000000000 (32 цифры)
+alert( Math.pow(2, 31) ); // 2147483648
+alert( Math.pow(2, 31) ^ 0 ); // -2147483648, ничего не отброшено, 
+// но первый бит 1 теперь стоит в начале числа и является знаковым
+```
+
diff --git a/1-js/2-first-steps/10-bitwise-operators/4-bit-rounding/task.md b/1-js/2-first-steps/10-bitwise-operators/4-bit-rounding/task.md
new file mode 100644
index 00000000..a0a19eac
--- /dev/null
+++ b/1-js/2-first-steps/10-bitwise-operators/4-bit-rounding/task.md
@@ -0,0 +1,12 @@
+# Почему результат разный?
+
+[importance 5]
+
+Почему результат второго `alert'а` такой странный?
+
+```js
+//+ run
+alert( 123456789 ^ 0 );  // 123456789
+alert( 12345678912345 ^ 0 ); // 1942903641
+```
+
diff --git a/1-js/2-first-steps/10-bitwise-operators/article.md b/1-js/2-first-steps/10-bitwise-operators/article.md
new file mode 100644
index 00000000..f7e1e4d9
--- /dev/null
+++ b/1-js/2-first-steps/10-bitwise-operators/article.md
@@ -0,0 +1,752 @@
+# Побитовые операторы
+
+Побитовые операторы интерпретируют операнды как последовательность из 32 битов (нулей и единиц).  Они производят операции, используя двоичное представление числа, и возвращают новую последовательность из 32 бит (число) в качестве результата.
+
+**Эта глава сложная, требует дополнительных знаний в программировании и не очень важная, вы можете пропустить её.**
+[cut]
+
+## Формат 32-битного целого числа со знаком [#signed-format]
+
+Побитовые операторы в JavaScript работают с 32-битными целыми числами в их двоичном представлении. 
+
+Это представление называется "32-битное целое со знаком, старшим битом слева и дополнением до двойки". 
+
+Разберём, как устроены числа внутри подробнее, это необходимо знать для битовых операций с ними.
+
+<ul>
+<li>Что такое [двоичная система счисления](http://ru.wikipedia.org/wiki/%C4%E2%EE%E8%F7%ED%E0%FF_%F1%E8%F1%F2%E5%EC%E0_%F1%F7%E8%F1%EB%E5%ED%E8%FF), вам, надеюсь, уже известно. При разборе побитовых операций мы будем обсуждать именно двоичное представление чисел, из 32 бит. 
+
+</li>
+<li>*Старший бит слева* -- это научное название для самого обычного порядка записи цифр (от большего разряда к меньшему). При этом, если больший разряд отсутствует, то соответствующий бит равен нулю.
+
+Примеры представления чисел в двоичной системе:
+
+```js
+a = 0;  // 00000000000000000000000000000000
+a = 1;  // 00000000000000000000000000000001
+a = 2;  // 00000000000000000000000000000010
+a = 3;  // 00000000000000000000000000000011
+a = 255;// 00000000000000000000000011111111
+```
+
+Обратите внимание, каждое число состоит ровно из 32-битов.
+
+[smart header="Младший бит слева"]
+Несмотря на то, что нам такой способ записи чисел кажется не совсем обычным, бывают языки и технологии, использующие способ записи "младший бит слева", когда биты пишутся наоборот, от меньшего разряда к большему. 
+
+Именно поэтому спецификация EcmaScript явно говорит "старший бит слева".
+[/smart]
+
+</li>
+<li>*Дополнение до двойки* -- это название способа поддержки отрицательных чисел.
+
+**Двоичный вид числа, обратного данному (например, `5` и `-5`) получается путём обращения всех битов с прибавлением 1.**
+
+То есть, нули заменяются на единицы, единицы -- на нули и к числу прибавляется `1`. Получается внутреннее представление того же числа, но со знаком минус.
+
+Например, вот число `314`:
+
+```js
+00000000000000000000000100111010
+```
+
+Чтобы получить `-314`, первый шаг -- обратить биты числа: заменить `0` на `1`, а `1` на `0`:
+
+```js
+11111111111111111111111011000101
+```
+
+Второй шаг -- к полученному двоичному числу приплюсовать единицу, обычным двоичным сложением: `11111111111111111111111011000101 + 1 = 11111111111111111111111011000110`.
+
+Итак, мы получили:
+
+```js
+-314 = 11111111111111111111111011000110
+```
+
+Принцип дополнения до двойки делит все двоичные представления на два множества: если крайний-левый бит равен `0` -- число положительное, если `1` -- число отрицательное. Поэтому этот бит называется <i>знаковым битом</i>.
+</li>
+</ul>
+
+## Список операторов
+
+В следующей таблице перечислены все побитовые операторы.
+Далее операторы разобраны более подробно.
+
+<table class="fullwidth-table">
+<tr>
+<th>Оператор</th>
+<th>Использование</th>
+<th>Описание</th>
+
+</tr>
+<tr>
+<td>Побитовое И (AND)</td>
+<td style="white-space: nowrap"><code>a &amp; b</code></td>
+<td>Ставит 1 на бит результата, для которого соответствующие биты операндов равны 1.</td>
+</tr>
+<tr>
+<td>Побитовое ИЛИ (OR)</td>
+<td style="white-space: nowrap"><code>a | b</code></td>
+<td>Ставит 1 на бит результата, для которого хотя бы один из соответствующих битов операндов равен 1.</td>
+</tr>
+<tr>
+<td>Побитовое исключающее ИЛИ (XOR)</td>
+<td style="white-space: nowrap"><code>a ^ b</code></td>
+<td>Ставит 1 на бит результата, для которого только один из соответствующих битов операндов равен 1 (но не оба).</td>
+</tr>
+<tr>
+<td>Побитовое НЕ (NOT)</td>
+<td style="white-space: nowrap"><code>~a</code></td>
+<td>Заменяет каждый бит операнда на противоположный.</td>
+</tr>
+<tr>
+<td>Левый сдвиг</td>
+<td style="white-space: nowrap">`a << b`</td>
+<td>Сдвигает двоичное представление <code>a</code> на <code>b</code> битов влево, добавляя справа нули.</td>
+</tr>
+<tr>
+<td>Правый сдвиг, переносящий знак</td>
+<td style="white-space: nowrap">`a >> b`</td>
+<td>Сдвигает двоичное представление <code>a</code> на <code>b</code> битов вправо, отбрасывая сдвигаемые биты.</td>
+</tr>
+<tr>
+<td>Правый сдвиг с заполнением нулями</td>
+<td style="white-space: nowrap">`a >>> b`</td>
+<td>Сдвигает двоичное представление <code>a</code> на <code>b</code> битов вправо, отбрасывая сдвигаемые биты и добавляя нули слева.</td>
+</tr>
+</table>
+ 
+## Описание работы операторов
+
+Побитовые операторы работают следующим образом:
+
+<ol> 
+<li>Операнды преобразуются в 32-битные целые числа, представленные последовательностью битов. Дробная часть, если она есть, отбрасывается.</li>
+<li>Для бинарных операторов --  каждый бит в первом операнде рассматривается вместе с соответствующим битом второго операнда: первый бит с первым, второй со вторым и т.п. Оператор применяется к каждой паре бит, давая соответствующий бит результата.</li>
+<li>Получившаяся в результате последовательность бит интерпретируется как обычное число.</li>
+</ol>
+
+Посмотрим, как работают операторы, на примерах.
+
+### & (Побитовое И)
+
+Выполняет операцию И над каждой парой бит. 
+
+Результат `a & b` равен единице только когда оба бита `a` и `b` равны единице.
+
+Таблица истинности для `&`:
+
+<table class="standard-table"> 
+<tr><th>`a`</th><th>`b`</th><th>`a & b`</th></tr> 
+<tr><td>`0`</td><td>`0`</td><td>`0`</td></tr>
+<tr><td>`0`</td><td>`1`</td><td>`0`</td></tr> 
+<tr><td>`1`</td><td>`0`</td><td>`0`</td></tr> 
+<tr><td>`1`</td><td>`1`</td><td>`1`</td></tr>
+</table>
+
+Пример:
+
+```js
+9 (по осн. 10) 
+  = 00000000000000000000000000001001 (по осн. 2)
+14 (по осн. 10) 
+  = 00000000000000000000000000001110 (по осн. 2)
+                   --------------------------------
+14 & 9 (по осн. 10) 
+  = 00000000000000000000000000001000 (по осн. 2) 
+  = 8 (по осн. 10)
+```
+
+### | (Побитовое ИЛИ)
+
+Выполняет операцию ИЛИ над каждой парой бит. Результат `a | b` равен 1, если хотя бы один бит из <code>a,b</code> равен 1.
+
+Таблица истинности для `|`:
+
+<table class="standard-table"> 
+<tr><th>`a`</th><th>`b`</th><th>`a | b`</th></tr> 
+<tr><td>`0`</td><td>`0`</td><td>`0`</td></tr>
+<tr><td>`0`</td><td>`1`</td><td>`1`</td></tr> 
+<tr><td>`1`</td><td>`0`</td><td>`1`</td></tr> 
+<tr><td>`1`</td><td>`1`</td><td>`1`</td></tr>
+</table>
+
+Пример:
+
+```js
+9 (по осн. 10) 
+  = 00000000000000000000000000001001 (по осн. 2)
+14 (по осн. 10)
+  = 00000000000000000000000000001110 (по осн. 2)
+                   --------------------------------
+14 | 9 (по осн. 10) 
+  = 00000000000000000000000000001111 (по осн. 2) 
+  = 15 (по осн. 10)
+```
+
+### ^ (Исключающее ИЛИ)
+
+Выполняет операцию "Исключающее ИЛИ" над каждой парой бит.
+
+ <code>a</code> Исключающее ИЛИ <code>b</code> равно 1, если только <code>a=1</code> или только <code>b=1</code>, но не оба одновременно <code>a=b=1</code>.
+
+Таблица истинности для исключающего ИЛИ:
+
+<table class="standard-table"> 
+<tr><th>`a`</th><th>`b`</th><th>`a ^ b`</th></tr> 
+<tr><td>`0`</td><td>`0`</td><td>`0`</td></tr>
+<tr><td>`0`</td><td>`1`</td><td>`1`</td></tr> 
+<tr><td>`1`</td><td>`0`</td><td>`1`</td></tr> 
+<tr><td>`1`</td><td>`1`</td><td>`0`</td></tr>
+</table>
+
+Как видно, оно даёт 1, если ЛИБО слева `1`, ЛИБО справа `1`, но не одновременно. Поэтому его и называют "исключающее ИЛИ".
+
+Пример:
+
+```js
+9 (по осн. 10) 
+  = 00000000000000000000000000001001 (по осн. 2)
+14 (по осн. 10) 
+  = 00000000000000000000000000001110 (по осн. 2)
+                   --------------------------------
+14 ^ 9 (по осн. 10) 
+  = 00000000000000000000000000000111 (по осн. 2) 
+  = 7 (по осн. 10)
+```
+
+[smart header="Исключающее ИЛИ в шифровании"]
+Исключающее или можно использовать для шифрования, так как эта операция полностью обратима. Двойное применение исключающего ИЛИ с тем же аргументом даёт исходное число.
+
+Иначе говоря, верна формула: `a ^ b ^ b == a`.
+
+Пускай Вася хочет передать Пете секретную информацию `data`. Эта информация заранее превращена в число, например строка интерпретируется как последовательность кодов символов.
+
+Вася и Петя заранее договариваются о числовом ключе шифрования `key`.
+
+Алгоритм:
+<ul>
+<li>Вася берёт двоичное представление `data` и делает операцию `data ^ key`. При необходимости `data` бьётся на части, равные по длине `key`, чтобы можно было провести побитовое ИЛИ `^` для каждой части. В JavaScript оператор `^` работает с 32-битными целыми числами, так что `data` нужно разбить на последовательность таких чисел.</li>
+<li>Результат `data ^ key` отправляется Пете, это шифровка.</li>
+</ul>
+
+Например, пусть в `data` очередное число равно `9`, а ключ `key` равен `1220461917`.
+
+```js
+Данные: 9 в двоичном виде        
+00000000000000000000000000001001
+
+Ключ: 1220461917 в двоичном виде
+01001000101111101100010101011101
+
+Результат операции 9 ^ key:             
+01001000101111101100010101010100
+Результат в 10-ной системе (шифровка):
+1220461908
+```
+
+<ul>
+<li>Петя, получив очередное число шифровки `1220461908`, применяет к нему такую же операцию `^ key`.</li>
+<li>Результатом будет исходное число `data`.</li>
+</ul>
+
+В нашем случае:
+
+```js
+Полученная шифровка в двоичной системе:
+9 ^ key = 1220461908             
+01001000101111101100010101010100
+
+Ключ: 1220461917 в двоичном виде:
+01001000101111101100010101011101
+
+Результат операции 1220461917 ^ key:
+00000000000000000000000000001001
+Результат в 10-ной системе (исходное сообщение):
+9
+```
+
+Конечно, такое шифрование поддаётся частотному анализу и другим методам дешифровки, поэтому современные алгоритмы используют операцию XOR `^` как одну из важных частей более сложной многоступенчатой схемы.
+[/smart]
+
+
+
+
+### ~ (Побитовое НЕ)
+
+Производит операцию НЕ над каждым битом, заменяя его на обратный ему.
+
+Таблица истинности для НЕ:
+
+<table class="standard-table">
+<tr><th>`a`</th><th>`~a`</th></tr> 
+<tr><td>`0`</td><td>`1`</td></tr>
+<tr><td>`1`</td><td>`0`</td></tr>
+</table>
+
+Пример:
+
+```js
+ 9 (по осн. 10) 
+  = 00000000000000000000000000001001 (по осн. 2)
+               --------------------------------
+~9 (по осн. 10) 
+  = 11111111111111111111111111110110 (по осн. 2) 
+  = -10 (по осн. 10)
+```
+
+Из-за внутреннего представления отрицательных чисел получается так, что `~n == -(n+1)`. 
+
+Например:
+
+```js
+//+ run
+alert(~3); // -4
+alert(~-1); // 0
+```
+
+### << (Битовый сдвиг влево) 
+
+Операторы битового сдвига принимают два операнда. Первый -- это число для сдвига, а второй -- количество битов, которые нужно сдвинуть в первом операнде.
+
+Оператор `<<` сдвигает первый операнд на указанное число битов влево. Лишние биты отбрасываются, справа добавляются нулевые биты.
+
+Например, `9 << 2` даст `36`:
+
+```js
+ 
+9 (по осн.10)
+  = 00000000000000000000000000001001 (по осн.2)
+                  --------------------------------
+9 << 2 (по осн.10)
+  = 00000000000000000000000000100100 (по осн.2) 
+  = 36 (по осн.10)
+```
+
+Операция `<< 2` сдвинула и отбросила два левых нулевых бита и добавила справа два новых нулевых.
+
+[smart header="Левый сдвиг почти равен умножению на 2"]
+Битовый сдвиг `<< N` обычно имеет тот же эффект, что и умножение на два `N` раз, например:
+
+```js
+//+ run
+alert( 3 << 1 ); // 6, умножение на 2
+alert( 3 << 2 ); // 12, умножение на 2 два раза
+alert( 3 << 3 ); // 24, умножение на 2 три раза
+```
+
+Конечно, следует иметь в виду, что побитовые операторы работают только с 32-битными числами, поэтому верхний порог такого "умножения" ограничен:
+
+```js
+//+ run
+*!*
+alert(10000000000 << 1); // -1474836480, отброшен крайний-левый бит
+*/!*
+alert(10000000000 * 2); // 20000000000, обычное умножение
+```
+
+[/smart]
+
+### >> (Правый битовый сдвиг, переносящий знак) 
+
+Этот оператор сдвигает биты вправо, отбрасывая лишние. При этом слева добавляется *копия* крайнего-левого бита.
+
+Знак числа (представленный крайним-левым битом) при этом не меняется, так как новый крайний-левый бит имеет то же значение, что и исходном числе.
+
+Поэтому он назван "переносящим знак".
+
+Например, `9 >> 2` даст <code>2</code>:
+
+```js
+9 (по осн.10)
+  = 00000000000000000000000000001001 (по осн.2)
+                  --------------------------------
+9 >> 2 (по осн.10)
+  = 00000000000000000000000000000010 (по осн.2) 
+  = 2 (по осн.10)
+```
+
+Операция `>> 2` сдвинула вправо и отбросила два правых бита `01` и добавила слева две копии первого бита `00`.
+
+Аналогично, `-9 >> 2` даст `-3`:
+
+```js
+-9 (по осн.10)
+  = 11111111111111111111111111110111 (по осн.2)
+                   --------------------------------
+-9 >> 2 (по осн.10)
+  = 11111111111111111111111111111101 (по осн.2) = -3 (по осн.10)
+```
+
+Здесь операция `>> 2` сдвинула вправо и отбросила два правых бита `11` и добавила слева две копии первого бита `11`. , Знак числа сохранён, так как крайний-левый (знаковый) бит сохранил значение `1`.
+
+[smart header="Правый сдвиг почти равен целочисленному делению на 2"]
+Битовый сдвиг `>> N` обычно имеет тот же, что и целочисленное деление на два `N` раз:
+
+```js
+//+ run
+alert( 100 >> 1 ); // 50, деление на 2
+alert( 100 >> 2 ); // 25, деление на 2 два раза
+alert( 100 >> 3 ); // 12, деление на 2 три раза, целая часть от результата
+```
+
+[/smart]
+
+
+### >>> (Правый сдвиг с заполнением нулями)
+
+Этот оператор сдвигает биты первого операнда вправо. Лишние биты справа отбрасываются. Слева добавляются нулевые биты.
+
+Знаковый бит становится равным 0, поэтому результат всегда положителен.
+
+**Для неотрицательных чисел правый сдвиг с заполнением нулями `>>>` и правый сдвиг с переносом знака `>>` дадут одинаковый результат, т.к в обоих случаях слева добавятся нули.**
+
+Для отрицательных чисел -- результат работы разный. Например, `-9 >>> 2` даст  `1073741821`, в отличие от `-9 >> 2` (дает `-3`):
+
+```js
+-9 (по осн.10)
+  = 11111111111111111111111111110111 (по осн.2)
+                    --------------------------------
+-9 >>> 2 (по осн.10)
+  = 00111111111111111111111111111101 (по осн.2) 
+  = 1073741821 (по осн.10)
+```
+
+## Применение побитовых операторов
+
+Побитовые операторы используются редко, но всё же используются.
+
+Случаи применения побитовых операторов, которые мы здесь разберём, составляют большинство всех использований в JavaScript.
+
+[warn header="Осторожно, приоритеты!"]
+В JavaScript побитовые операторы `^`, `&`, `|` выполняются после сравнений `==`.
+
+Например, в сравнении `a == b^0` будет сначала выполнено сравнение `a == b`, а потом уже операция `^0`, как будто стоят скобки `(a == b)^0`.
+
+Обычно это не то, чего мы хотим. Чтобы гарантировать желаемый порядок, нужно ставить скобки: `a == (b^0)`.
+[/warn]
+
+### Маска
+
+Для этого примера представим, что наш скрипт работает с пользователями:
+<ul>
+<li>`Гость`</li>
+<li>`Редактор`</li>
+<li>`Админ`</li>
+</ul>
+
+У каждого из них есть ряд доступов, которые можно свести в таблицу: 
+
+<table>
+<tr>
+<th>Пользователь</th>
+<th>Просмотр статей</th>
+<th>Изменение статей</th>
+<th>Просмотр товаров</th>
+<th>Изменение товаров</th>
+<th>Управление правами</th>
+</tr>
+<tr>
+<td>Гость</td>
+<td>Да</td>
+<td>Нет</td>
+<td>Да</td>
+<td>Нет</td>
+<td>Нет</td>
+</tr>
+<tr>
+<td>Редактор</td>
+<td>Да</td>
+<td>Да</td>
+<td>Да</td>
+<td>Да</td>
+<td>Нет</td>
+</tr>
+<tr>
+<td>Админ</td>
+<td>Да</td>
+<td>Да</td>
+<td>Да</td>
+<td>Да</td>
+<td>Да</td>
+</tr>
+</table>
+
+Если вместо "Да" поставить `1`, а вместо "Нет" -- `0`, то каждый набор доступов описывается числом:
+
+<table>
+<tr>
+<th>Пользователь</th>
+<th>Просмотр статей</th>
+<th>Изменение статей</th>
+<th>Просмотр товаров</th>
+<th>Изменение товаров</th>
+<th>Управление правами</th>
+<th>В 10-ной системе</th>
+</tr>
+<tr>
+<td>Гость</td>
+<td>1</td>
+<td>0</td>
+<td>1</td>
+<td>0</td>
+<td>0</td>
+<td> = 20</td>
+</tr>
+<tr>
+<td>Редактор</td>
+<td>1</td>
+<td>1</td>
+<td>1</td>
+<td>1</td>
+<td>0</td>
+<td> = 30</td>
+</tr>
+<tr>
+<td>Админ</td>
+<td>1</td>
+<td>1</td>
+<td>1</td>
+<td>1</td>
+<td>1</td>
+<td> = 31</td>
+</tr>
+</table>
+
+**Мы "упаковали" много информации в одно число. Это экономит память. Но, кроме этого, по нему очень легко проверить, имеет ли посетитель заданную *комбинацию доступов*!**
+
+Для этого посмотрим, как в 2-ной системе представляется каждый доступ в отдельности.
+
+<ul>
+<li>Доступ, соответствующий только управлению правами: `00001 (=1)` (все нули кроме `1` на позиции, соответствующей этому доступу).</li>
+<li>Доступ, соответствующий только изменению товаров: `00010 (=2)`.</li>
+<li>Доступ, соответствующий только просмотру товаров: `00100 (=4)`.</li>
+<li>Доступ, соответствующий только изменению статей: `01000 (=8)`.</li>
+<li>Доступ, соответствующий только просмотру статей: `10000 (=16)`.</li>
+</ul>
+
+Например, просматривать и изменять статьи позволит доступ `access = 11000`.
+
+Как правило, доступы задаются в виде констант:
+
+```js
+var ACCESS_ADMIN = 1;          // 00001
+var ACCESS_GOODS_CHANGE = 2;   // 00010
+var ACCESS_GOODS_VIEW = 4;     // 00100
+var ACCESS_ARTICLE_CHANGE = 8; // 01000
+var ACCESS_ARTICLE_VIEW = 16;  // 10000
+```
+
+Из этих констант получить нужную комбинацию доступов можно при помощи операции `|`.
+
+```js
+var access = ACCESS_ARTICLE_VIEW | ACCESS_ARTICLE_CHANGE; // 11000
+```
+
+### Двоичные числа в JavaScript
+
+Для удобной работы с примерами в этой статье пригодятся две функции.
+
+<ul>
+<li>`parseInt("11000",  2)` -- переводит строку с двоичной записью числа в число.</li>
+<li>`n.toString(2)` -- получает для числа `n` запись в 2-ной системе в виде строки.</li>
+</ul>
+
+Например:
+
+```js
+//+ run
+var access = parseInt("11000", 2);  // получаем число из строки
+
+alert(access); // 24, число с таким 2-ным представлением
+
+var access2 = access.toString(2); // обратно двоичную строку из числа
+
+alert(access2); // 11000
+```
+
+### Проверка доступов
+
+Для того, чтобы понять, есть ли в доступе `access` нужный доступ, например управление правами -- достаточно применить к нему побитовый оператор И (`&`) с соответствующей маской.
+
+Создадим для примера ряд доступов и проверим их:
+
+```js
+//+ run
+var access = parseInt("11111", 2); // 31, все 1 означает, что доступ полный
+
+alert(access & ACCESS_ADMIN); // если результат не 0, то есть доступ ACCESS_ADMIN
+```
+
+А теперь та же проверка для посетителя с другими правами:
+
+```js
+//+ run
+var access = parseInt("10100"); // 20, нет 1 в конце
+
+alert(access & ACCESS_ADMIN); // 0, нет доступа к управлению правами
+```
+
+Такая проверка работает, потому что оператор И ставит `1` на те позиции результата, на которых в обоих операндах стоит `1`. 
+
+Так что `access & 1` для любого числа `access` поставит все биты в ноль, кроме самого правого. А самый правый станет `1` только если он равен `1` в `access`.
+
+Для полноты картины также проверим, даёт ли доступ `11111` право на изменение товаров. Для этого нужно применить к доступу оператор И (`&`) с `00010` (=`2` в 10-ной системе).
+
+```js
+//+ run
+var adminAccess = 31; // 111*!*1*/!*1
+
+alert(adminAccess & ACCESS_GOODS_CHANGE); // не 0, есть доступ к изменению товаров
+```
+
+**Можно проверить один из нескольких доступов.**
+
+Например, проверим, есть ли права на просмотр ИЛИ изменение товаров. Соответствующие права задаются битом `1` на втором и третьем месте с конца, что даёт число `00110` (=`6` в 10-ной системе).
+
+```js
+//+ run
+var check = ACCESS_GOODS_VIEW | ACCESS_GOODS_CHANGE; // 6, 00110
+
+var access = 30; // 11*!*11*/!*0;
+
+alert(access & check); // не 0, значит есть доступ к просмотру ИЛИ изменению
+
+access = parseInt("11100", 2);
+
+alert(access & check); // не 0, есть доступ к просмотру ИЛИ изменению
+```
+
+Как видно из примера выше, если в аргументе `check` стоит ИЛИ из нескольких доступов `ACCESS_*`, то и результат проверки скажет, есть ли хотя бы один из них. А какой -- нужно смотреть отдельной проверкой, если это важно.
+
+**Итак, маска даёт возможность удобно "паковать" много битовых значений в одно число при помощи ИЛИ `|`, а также, при помощи оператора И (`&`), проверять маску на комбинацию установленных битов.**
+
+### Маски в функциях
+
+Зачастую маски используют в функциях, чтобы одним параметром передать несколько "флагов", т.е. однобитных значений.
+
+Например:
+
+```js
+// найти пользователей с правами на изменение товаров или администраторов
+findUsers(ACCESS_GOODS_CHANGE | ACCESS_ADMIN);
+```
+
+### Округление
+
+Так как битовые операции отбрасывают десятичную часть, то их можно использовать для округления. Достаточно взять любую операцию, которая не меняет значение числа.
+
+Например, двойное НЕ (`~`):
+
+```js
+//+ run
+alert( ~~12.345 ); // 12
+```
+
+Подойдёт и Исключающее ИЛИ (`^`) с нулём:
+
+```js
+//+ run
+alert( 12.345^0 ); // 12
+```
+
+Последнее даже более удобно, поскольку отлично читается:
+
+```js
+//+ run
+alert( 12.3 * 14.5 ^ 0); // (=178) "12.3 умножить на 14.5 *!*и округлить*/!*"
+```
+
+У побитовых операторов достаточно низкий приоритет, он меньше чем у остальной арифметики:
+
+```js
+//+ run
+alert( 1.1 + 1.2 ^ 0 ); // 2, сложение выполнится раньше округления
+```
+
+### Проверка на -1
+
+[Внутренний формат](#signed-format) чисел устроен так, что для смены знака нужно все биты заменить на противоположные ("обратить") и прибавить `1`. 
+
+Обращение битов -- это побитовое НЕ (`~`). То есть, при таком формате представления числа `-n = ~n + 1`. Или, если перенести единицу: `~n = -(n+1)`.
+
+Как видно из последнего равенства, `~n == 0` только если `n == -1`. Поэтому можно легко проверить равенство `n == -1`:
+
+```js
+//+ run
+var n = 5;
+
+if (~n) {  // сработает, т.к. ~n = -(5+1) = -6
+  alert("n не -1"); // выведет!
+}
+```
+
+
+
+```js
+//+ run
+var n = -1;
+
+if (~n) {  // не сработает, т.к. ~n = -(-1+1) = 0
+  alert("...ничего не выведет..."); 
+}
+```
+
+Проверка на `-1` пригождается, например, при поиске символа в строке. Вызов `str.indexOf("подстрока")` возвращает позицию подстроки в `str`, или `-1` если не нашёл.
+
+```js
+//+ run
+var str = "Проверка";
+
+if (~str.indexOf("верка")) { // Сочетание "if (~...indexOf)" читается как "если найдено"
+  alert('найдено!');
+}
+```
+
+### Умножение и деление на степени 2
+
+Оператор `a << b`, сдвигая биты, по сути умножает `a` на <code>2<sup>b</sup></code>.
+
+Например:
+
+```js
+//+ run
+alert( 1 << 2 ); // 1*(2*2) = 4
+alert( 1 << 3 ); // 1*(2*2*2) = 8
+alert( 3 << 3 ); // 3*(2*2*2) = 24
+```
+
+При этом следует иметь в виду, что максимальный верхний порог такого умножения меньше, чем обычно, так как побитовый оператор оперирует 32-битными целыми, в то время как обычные операторы оперируют числами длиной 64 бита.
+
+**Оператор `a >> b`, сдвигая биты, производит целочисленное деление `a` на <code>2<sup>b</sup></code>.**
+
+```js
+//+ run
+alert( 8 >> 2 ); // 2 = 8/4, убрали 2 нуля в двоичном представлении
+alert( 11 >> 2 ); // 2, целочисленное деление (менее значимые биты просто отброшены)
+```
+
+## Итого
+
+<ul>
+<li>Бинарные побитовые операторы: `& | ^ << >> >>>`.</li>
+<li>Унарный побитовый оператор один: `~`.</li>
+</ul>
+
+Как правило, битовое представление числа используется для:
+<ul>
+<li>Упаковки нескольких битововых значений ("флагов") в одно значение. Это экономит память и позволяет проверять наличие комбинации флагов одним оператором `&`. Кроме того, такое упакованное значение будет для функции всего одним параметром, это тоже удобно.</li>
+<li>Округления числа: `(12.34^0) = 12`.</li>
+<li>Проверки на равенство `-1`: `if (~n) { n не -1 }`.</li>
+</ul>
+[head]
+<script>
+
+var ACCESS_ADMIN = 1;          // 00001
+var ACCESS_GOODS_CHANGE = 2;   // 00010
+var ACCESS_GOODS_VIEW = 4;     // 00100
+var ACCESS_ARTICLE_CHANGE = 8; // 01000
+var ACCESS_ARTICLE_VIEW = 16;  // 10000
+</script>
+[/head]
\ No newline at end of file
diff --git a/1-js/2-first-steps/11-uibasic/1-simple-page/solution.md b/1-js/2-first-steps/11-uibasic/1-simple-page/solution.md
new file mode 100644
index 00000000..53bc8af2
--- /dev/null
+++ b/1-js/2-first-steps/11-uibasic/1-simple-page/solution.md
@@ -0,0 +1,27 @@
+JS-код:
+
+```js
+//+ demo run
+var name = prompt("Ваше имя?", "");
+alert(name);
+```
+
+Полная страница:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<script>
+  var name = prompt("Ваше имя?", "");
+  alert(name);
+</script>
+
+</body>
+</html>
+```
+
diff --git a/1-js/2-first-steps/11-uibasic/1-simple-page/task.md b/1-js/2-first-steps/11-uibasic/1-simple-page/task.md
new file mode 100644
index 00000000..6d2ca2e1
--- /dev/null
+++ b/1-js/2-first-steps/11-uibasic/1-simple-page/task.md
@@ -0,0 +1,8 @@
+# Простая страница
+
+[importance 4]
+
+Создайте страницу, которая спрашивает имя и выводит его.
+
+[demo /]
+
diff --git a/1-js/2-first-steps/11-uibasic/article.md b/1-js/2-first-steps/11-uibasic/article.md
new file mode 100644
index 00000000..e1b00705
--- /dev/null
+++ b/1-js/2-first-steps/11-uibasic/article.md
@@ -0,0 +1,110 @@
+# Взаимодействие с пользователем: alert, prompt, confirm
+
+
+В этом разделе мы рассмотрим базовые UI операции: `alert`, `prompt` и `confirm`, которые позволяют работать с данными, полученными от пользователя.
+[cut]
+## alert   
+
+Синтаксис:
+
+```js
+alert(сообщение)
+```
+
+`alert` выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмет "ОК".
+
+```js
+//+ run
+alert("Привет");
+```
+
+Окно сообщения, которое выводится, является *модальным окном*. Слово "модальное" означает, что посетитель не может взаимодействовать со страницей, нажимать другие кнопки и т.п., пока не разберется с окном. В данном случае - пока не нажмет на "OK".
+
+## prompt   
+
+Функция prompt принимает два аргумента:
+
+```js
+result = prompt(title, default);
+```
+
+Она выводит модальное окно с заголовком `title`, полем для ввода текста, заполненным строкой по умолчанию `default` и кнопками OK/CANCEL. 
+
+Пользователь должен либо что-то ввести и нажать OK, либо отменить ввод кликом на CANCEL или нажатием [key Esc] на клавиатуре.
+
+**Вызов `prompt` возвращает то, что ввел посетитель -- строку или специальное значение `null`, если ввод отменен.**
+
+[warn header="Safari 5.1+ не возвращает `null`"]
+Единственный браузер, который не возвращает `null` при отмене ввода -- это Safari. При отсутствии ввода он возвращает пустую строку. Предположительно, это ошибка в браузере.
+
+Если нам важен этот браузер, то пустую строку нужно обрабатывать точно так же, как и `null`, т.е. считать отменой ввода.
+[/warn]
+
+Как и в случае с `alert`, окно `prompt` модальное.
+
+```js
+//+ run
+var years = prompt('Сколько вам лет?', 100);
+
+alert('Вам ' + years + ' лет!')
+```
+
+[warn header="Всегда указывайте `default`"]
+Вообще, второй `default` может отсутствовать. Однако при этом IE вставит в диалог значение по умолчанию `"undefined"`.
+
+Запустите этот код <u>в IE</u>, чтобы понять о чем речь:
+
+```js
+//+ run
+var test = prompt("Тест");
+```
+
+Поэтому рекомендуется *всегда* указывать второй аргумент:
+
+```js
+//+ run
+var test = prompt("Тест", ''); // <-- так лучше
+```
+
+[/warn]
+
+
+## confirm   
+
+Синтаксис:
+
+```js
+result = confirm(question);
+```
+
+`confirm` выводит окно с вопросом `question` с двумя кнопками: OK и CANCEL. 
+
+**Результатом будет `true` при нажатии OK и `false` - при CANCEL([key Esc]).**
+
+Например:
+
+```js
+//+ run
+var isAdmin = confirm("Вы - администратор?");
+
+alert(isAdmin);
+```
+
+## Особенности встроенных функций
+
+Место, где выводится модальное окно с вопросом, и внешний вид окна выбирает браузер. Разработчик не может на это влиять.
+
+С одной стороны -- это недостаток, т.к. нельзя вывести окно в своем дизайне. 
+
+С другой стороны, преимущество этих функций по сравнению с другими, более сложными методами взаимодействия, которые мы изучим в дальнейшем -- как раз в том, что они очень просты.
+
+Это самый простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда простота важна, а всякие "красивости" особой роли не играют.
+
+
+## Резюме
+
+<ul>
+<li>`alert` выводит сообщение.</li>
+<li>`prompt` выводит сообщение и ждет, пока пользователь введет текст, а затем возвращает введенное значение или `null`, если ввод отменен (CANCEL/[key Esc]).</li>
+<li>`confirm` выводит сообщение и ждет, пока пользователь нажмет "OK" или "CANCEL" и возвращает `true/false`.</li>
+</ul>
\ No newline at end of file
diff --git a/1-js/2-first-steps/12-ifelse/1-if-zero-string/solution.md b/1-js/2-first-steps/12-ifelse/1-if-zero-string/solution.md
new file mode 100644
index 00000000..0e71c2b9
--- /dev/null
+++ b/1-js/2-first-steps/12-ifelse/1-if-zero-string/solution.md
@@ -0,0 +1,13 @@
+**Да, выведется,** т.к. внутри `if` стоит строка `"0"`. 
+
+Любая строка, кроме пустой (а здесь она не пустая), в логическом контексте является `true`.
+
+Можно запустить и проверить:
+
+```js
+//+ run
+if ("0") {
+  alert('Привет');
+}
+```
+
diff --git a/1-js/2-first-steps/12-ifelse/1-if-zero-string/task.md b/1-js/2-first-steps/12-ifelse/1-if-zero-string/task.md
new file mode 100644
index 00000000..2b1bd3a7
--- /dev/null
+++ b/1-js/2-first-steps/12-ifelse/1-if-zero-string/task.md
@@ -0,0 +1,12 @@
+# if (строка с нулём)
+
+[importance 5]
+
+Выведется ли `alert`?
+
+```js
+if ("0") {
+  alert('Привет');
+}
+```
+
diff --git a/1-js/2-first-steps/12-ifelse/2-check-standard/ifelse_task2.png b/1-js/2-first-steps/12-ifelse/2-check-standard/ifelse_task2.png
new file mode 100755
index 00000000..77e0fd12
Binary files /dev/null and b/1-js/2-first-steps/12-ifelse/2-check-standard/ifelse_task2.png differ
diff --git a/1-js/2-first-steps/12-ifelse/2-check-standard/ifelse_task2/index.html b/1-js/2-first-steps/12-ifelse/2-check-standard/ifelse_task2/index.html
new file mode 100755
index 00000000..588be43f
--- /dev/null
+++ b/1-js/2-first-steps/12-ifelse/2-check-standard/ifelse_task2/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<body>
+<script>
+
+  var value = prompt('Каково "официальное" название JavaScript?', '');
+
+  if ( value == 'EcmaScript' ) {
+    alert('Верно!');
+  } else {
+    alert('Не знаете? "EcmaScript"!');
+  }
+
+</script>
+
+
+</body>
+</html>
diff --git a/1-js/2-first-steps/12-ifelse/2-check-standard/solution.md b/1-js/2-first-steps/12-ifelse/2-check-standard/solution.md
new file mode 100644
index 00000000..aacb5966
--- /dev/null
+++ b/1-js/2-first-steps/12-ifelse/2-check-standard/solution.md
@@ -0,0 +1,6 @@
+
+
+```html
+<!--+ run src="ifelse_task2/index.html" -->
+```
+
diff --git a/1-js/2-first-steps/12-ifelse/2-check-standard/task.md b/1-js/2-first-steps/12-ifelse/2-check-standard/task.md
new file mode 100644
index 00000000..f5aa5eb6
--- /dev/null
+++ b/1-js/2-first-steps/12-ifelse/2-check-standard/task.md
@@ -0,0 +1,13 @@
+# Проверка стандарта
+
+[importance 2]
+
+Используя конструкцию `if..else`, напишите код, который будет спрашивать: "Каково "официальное" название JavaScript?".
+
+Если посетитель вводит "EcmaScript", то выводить "Верно!", если что-то другое -- выводить "Не знаете? "EcmaScript"!".
+
+Блок-схема:
+
+<img src="ifelse_task2.png">
+
+[demo src="ifelse_task2"]
\ No newline at end of file
diff --git a/1-js/2-first-steps/12-ifelse/2-check-standardifelse_task2/index.html b/1-js/2-first-steps/12-ifelse/2-check-standardifelse_task2/index.html
new file mode 100755
index 00000000..588be43f
--- /dev/null
+++ b/1-js/2-first-steps/12-ifelse/2-check-standardifelse_task2/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<body>
+<script>
+
+  var value = prompt('Каково "официальное" название JavaScript?', '');
+
+  if ( value == 'EcmaScript' ) {
+    alert('Верно!');
+  } else {
+    alert('Не знаете? "EcmaScript"!');
+  }
+
+</script>
+
+
+</body>
+</html>
diff --git a/1-js/2-first-steps/12-ifelse/3-sign/if_sign/index.html b/1-js/2-first-steps/12-ifelse/3-sign/if_sign/index.html
new file mode 100755
index 00000000..cff65b6c
--- /dev/null
+++ b/1-js/2-first-steps/12-ifelse/3-sign/if_sign/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<script>
+
+  var value = prompt('Введите число',  0);
+    
+  if (value > 0) {
+    alert(1);
+  } else if (value < 0) {
+    alert(-1);
+  } else {
+    alert(0);
+  }
+
+</script>
+
+</body>
+</html>
diff --git a/1-js/2-first-steps/12-ifelse/3-sign/solution.md b/1-js/2-first-steps/12-ifelse/3-sign/solution.md
new file mode 100644
index 00000000..61af24e2
--- /dev/null
+++ b/1-js/2-first-steps/12-ifelse/3-sign/solution.md
@@ -0,0 +1,15 @@
+
+
+```js
+//+ run
+var value = prompt('Введите число',  0);
+
+if (value > 0) {
+  alert(1);
+} else if (value < 0) {
+  alert(-1);
+} else {
+  alert(0);
+}
+```
+
diff --git a/1-js/2-first-steps/12-ifelse/3-sign/task.md b/1-js/2-first-steps/12-ifelse/3-sign/task.md
new file mode 100644
index 00000000..9d24ede9
--- /dev/null
+++ b/1-js/2-first-steps/12-ifelse/3-sign/task.md
@@ -0,0 +1,12 @@
+# Получить знак числа
+
+[importance 2]
+
+Используя конструкцию `if..else`, напишите код, который получает значение `prompt`, а затем выводит `alert`:
+<ul>
+<li>`1`, если значение больше нуля,</li>
+<li>`-1`, если значение меньше нуля,</li>
+<li>`0`, если значение равно нулю.</li>
+</ul>
+
+[demo src="if_sign"]
\ No newline at end of file
diff --git a/1-js/2-first-steps/12-ifelse/4-check-login/ifelse_task.png b/1-js/2-first-steps/12-ifelse/4-check-login/ifelse_task.png
new file mode 100755
index 00000000..e9a9270d
Binary files /dev/null and b/1-js/2-first-steps/12-ifelse/4-check-login/ifelse_task.png differ
diff --git a/1-js/2-first-steps/12-ifelse/4-check-login/solution.md b/1-js/2-first-steps/12-ifelse/4-check-login/solution.md
new file mode 100644
index 00000000..edafff62
--- /dev/null
+++ b/1-js/2-first-steps/12-ifelse/4-check-login/solution.md
@@ -0,0 +1,33 @@
+
+
+```js
+//+ run demo
+var userName = prompt('Кто пришёл?', '');
+
+if ( userName == 'Админ' ) {
+
+  var pass = prompt('Пароль?', '');
+
+  if ( pass == 'Чёрный Властелин' ) {
+    alert('Добро пожаловать!');
+  } else if ( pass == null ) { // (*)
+    alert('Вход отменён');
+  } else {
+    alert('Пароль неверен');
+  }
+
+} else if ( userName == null ) { // (**)
+  alert('Вход отменён');
+
+} else {
+
+  alert('Я вас не знаю');
+
+}
+```
+
+Обратите внимание на проверку `if` в строках `(*)` и `(**)`. Везде, кроме Safari, нажатие "Отмена" возвращает `null`, а вот Safari возвращает при отмене пустую строку, поэтому в браузере Safari можно было бы добавить дополнительную проверку на неё.
+
+Впрочем, такое поведение Safari является некорректным, надеемся, что скоро его исправят.
+
+Кроме того, обратите внимание на дополнительные вертикальные отступы внутри `if`. Они не обязательны, но полезны для лучшей читаемости кода.
\ No newline at end of file
diff --git a/1-js/2-first-steps/12-ifelse/4-check-login/task.md b/1-js/2-first-steps/12-ifelse/4-check-login/task.md
new file mode 100644
index 00000000..a158cb4b
--- /dev/null
+++ b/1-js/2-first-steps/12-ifelse/4-check-login/task.md
@@ -0,0 +1,17 @@
+# Проверка логина
+
+[importance 3]
+
+Напишите код, который будет спрашивать логин (`prompt`).
+
+Если посетитель вводит "Админ", то спрашивать пароль, если нажал отмена (escape) -- выводить "Вход отменён", если вводит что-то другое -- "Я вас не знаю".
+
+Пароль проверять так. Если введён пароль "Чёрный Властелин", то выводить "Добро пожаловать!", иначе -- "Пароль неверен", при отмене -- "Вход отменён".
+
+Блок-схема:
+
+<img src="ifelse_task.png">
+
+Для решения используйте вложенные блоки `if`. Обращайте внимание на стиль и читаемость кода.
+
+[demo /]
\ No newline at end of file
diff --git a/1-js/2-first-steps/12-ifelse/5-rewrite-if-question/solution.md b/1-js/2-first-steps/12-ifelse/5-rewrite-if-question/solution.md
new file mode 100644
index 00000000..1799c70b
--- /dev/null
+++ b/1-js/2-first-steps/12-ifelse/5-rewrite-if-question/solution.md
@@ -0,0 +1,6 @@
+
+
+```js
+result = (a + b < 4) ? 'Мало' : 'Много';
+```
+
diff --git a/1-js/2-first-steps/12-ifelse/5-rewrite-if-question/task.md b/1-js/2-first-steps/12-ifelse/5-rewrite-if-question/task.md
new file mode 100644
index 00000000..dc75b1fb
--- /dev/null
+++ b/1-js/2-first-steps/12-ifelse/5-rewrite-if-question/task.md
@@ -0,0 +1,14 @@
+# Перепишите 'if' в '?'
+
+[importance 5]
+
+Перепишите `if` с использованием оператора `'?'`:
+
+```js
+if (a + b < 4) {
+  result = 'Мало';
+} else {
+  result = 'Много';
+}
+```
+
diff --git a/1-js/2-first-steps/12-ifelse/6-rewrite-if-else-question/solution.md b/1-js/2-first-steps/12-ifelse/6-rewrite-if-else-question/solution.md
new file mode 100644
index 00000000..42b7b628
--- /dev/null
+++ b/1-js/2-first-steps/12-ifelse/6-rewrite-if-else-question/solution.md
@@ -0,0 +1,9 @@
+
+
+```js
+var message = (login == 'Вася') ? 'Привет' :
+  (login == 'Директор') ? 'Здравствуйте' :
+  (login == '') ? 'Нет логина' :
+  '';
+```
+
diff --git a/1-js/2-first-steps/12-ifelse/6-rewrite-if-else-question/task.md b/1-js/2-first-steps/12-ifelse/6-rewrite-if-else-question/task.md
new file mode 100644
index 00000000..b3babf08
--- /dev/null
+++ b/1-js/2-first-steps/12-ifelse/6-rewrite-if-else-question/task.md
@@ -0,0 +1,22 @@
+# Перепишите 'if..else' в '?'
+
+[importance 5]
+
+Перепишите `if..else` с использованием нескольких операторов `'?'`. 
+
+Для читаемости -- оформляйте код в несколько строк.
+
+```js
+var message;
+
+if (login == 'Вася') {
+  message = 'Привет';
+} else if (login == 'Директор') {
+  message = 'Здравствуйте';
+} else if (login == '') {
+  message = 'Нет логина';
+} else {
+  message = '';
+}
+```
+
diff --git a/1-js/2-first-steps/12-ifelse/article.md b/1-js/2-first-steps/12-ifelse/article.md
new file mode 100644
index 00000000..9547b6d1
--- /dev/null
+++ b/1-js/2-first-steps/12-ifelse/article.md
@@ -0,0 +1,227 @@
+# Условные операторы: if, '?'
+
+Иногда, в зависимости от условия, нужно выполнить различные действия. Для этого используется оператор `if`.
+[cut]
+Например:
+
+```js
+//+ run
+var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', '');
+
+if (year != 2011) alert('А вот и неправильно!');
+```
+
+## Оператор if
+
+Оператор `if` ("если") получает условие, в примере выше это `year != 2011`. Он вычисляет его, и если результат -- `true`, то выполняет команду.
+
+Если нужно выполнить более одной команды -- они оформляются блоком кода в фигурных скобках:
+
+```js
+if (year != 2011) {
+  alert('А вот..');
+  alert('..и неправильно!');
+}
+```
+
+**Рекомендуется использовать фигурные скобки всегда, даже когда команда одна.** Это улучшает читаемость кода.
+
+
+## Преобразование к логическому типу
+
+Оператор `if (...)` вычисляет и преобразует выражение в скобках к логическому типу. 
+
+**В логическом контексте число `0`, пустая строка `""`, `null` и `undefined`, а также `NaN` являются `false`, остальные значения -- `true`.**
+
+Например, такое условие никогда не выполнится:
+
+```js
+if (0) { // 0 преобразуется к false
+  ...
+}
+```
+
+... А такое -- выполнится всегда:
+
+```js
+if (1) { // 1 преобразуется к true
+  ...
+}
+```
+
+Вычисление условия в проверке `if (year != 2011)` может быть вынесено в отдельную переменную:
+
+```js
+var cond = (year != 2011);  // true/false
+
+if (cond) {
+  ...
+}
+```
+
+## Неверное условие, else
+
+Необязательный блок `else` ("иначе") выполняется, если условие неверно:
+
+```js
+//+ run
+var year = prompt('Введите год ECMA-262 5.1', '');
+
+if (year == 2011) {
+  alert('Да вы знаток!');
+} else {
+  alert('А вот и неправильно!'); // любое значение, кроме 2011
+}
+```
+
+## Несколько условий, else if
+
+Бывает нужно проверить несколько вариантов условия. Для этого используется блок `else if ...`. Например:
+
+```js
+//+ run
+var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', '');
+
+if (year < 2011) {
+  alert('Это слишком рано..');
+} else if (year > 2011) {
+  alert('Это поздновато..');
+} else {
+  alert('Да, точно в этом году!');
+}
+```
+
+В примере выше JavaScript сначала проверит первое условие, если оно ложно -- перейдет ко второму -- и так далее, до последнего `else`.
+
+
+## Оператор вопросительный знак '?'
+Иногда нужно в зависимости от условия присвоить переменную. Например:
+
+```js
+//+ run
+var access;
+var age = prompt('Сколько вам лет?', '');
+
+*!*
+if (age > 14) {
+  access = true;
+} else {
+  access = false;
+}
+*/!*
+
+alert(access);
+```
+
+Оператор вопросительный знак `'?'` позволяет делать это короче и проще.
+
+Он состоит из трех частей:
+
+```js
+условие ? значение1 : значение2
+```
+
+Проверяется условие, затем если оно верно -- возвращается `значение1 `, если неверно -- `значение2`, например:
+
+```js
+access = (age > 14) ? true : false;
+```
+
+Оператор `'?'` выполняется позже большинства других, в частности -- позже сравнений, поэтому скобки можно не ставить:
+
+```js
+access = age > 14 ? true : false;
+```
+
+...Но когда скобки есть -- код лучше читается. Так что рекомендуется их писать.
+
+[smart]
+В данном случае можно было бы обойтись и без оператора `'?'`, т.к. сравнение само по себе уже возвращает `true/false`:
+
+```js
+access = age > 14;
+```
+
+[/smart]
+
+[smart header="\"Тернарный оператор\""]
+Вопросительный знак -- единственный оператор, у которого есть аж три аргумента, в то время как у обычных операторов их один-два. 
+Поэтому его называют *"тернарный оператор"*.
+[/smart]
+
+
+## Несколько операторов '?'
+
+Несколько операторов `if..else` можно заменить последовательностью операторов  `'?'`. Например:
+
+```js
+//+ run
+var a = prompt('a?', 1);
+
+*!*
+var res = (a == 1) ? 'значение1' : 
+  (a == 2) ? 'значение2' : 
+  (a > 2) ? 'значение3' : 
+  'значение4';
+*/!*
+
+alert(res);
+```
+
+Поначалу может быть сложно понять, что происходит. Однако, внимательно приглядевшись, мы замечаем, что это *обычный `if..else`*!
+
+Вопросительный знак проверяет сначала `a == 1`, если верно -- возвращает `значение1`, если нет -- идет проверять `a == 2`. Если это верно -- возвращает `значение2`, иначе проверка `a > 2` и `значение3`... Наконец, если ничего не верно, то `значение4`.
+
+Альтернативный вариант с `if..else`:
+
+```js
+var res;
+
+if (a == 1) {
+  res = 'значение1';
+} else if (a == 2) {
+  res = 'значение2';
+} else if (a > 2) {
+  res = 'значение3';
+} else {
+  res = 'значение4';
+}
+```
+
+## Нетрадиционное использование '?'
+
+Иногда оператор вопросительный знак `'?'` используют как замену `if`:
+
+```js
+//+ run
+var company = prompt('Какая компания создала JavaScript?', '');
+
+*!*
+(company == 'Netscape') ?
+   alert('Да, верно') : alert('Неправильно');
+*/!*
+```
+
+Работает это так: в зависимости от условия, будет выполнена либо первая, либо вторая часть после `'?'`. 
+
+Результат выполнения не присваивается в переменную, так что пропадёт (впрочем, `alert` ничего не возвращает).
+
+**Рекомендуется не использовать вопросительный знак таким образом.**
+
+Несмотря на то, что с виду такая запись короче `if`, она является существенно менее читаемой. 
+
+Вот, для сравнения, то же самое с `if`:
+
+```js
+//+ run
+var company = prompt('Какая компания создала JavaScript?', '');
+
+*!*
+if (company == 'Netscape') {
+  alert('Да, верно');
+} else {
+  alert('Неправильно');
+}
+*/!*
+```
+
diff --git a/1-js/2-first-steps/13-logical-ops/1-alert-null-2-undefined/solution.md b/1-js/2-first-steps/13-logical-ops/1-alert-null-2-undefined/solution.md
new file mode 100644
index 00000000..4756a6ce
--- /dev/null
+++ b/1-js/2-first-steps/13-logical-ops/1-alert-null-2-undefined/solution.md
@@ -0,0 +1,7 @@
+Ответ: `2`, это первое значение, которое в логическом контексте даст `true`.
+
+```js
+//+ run
+alert( null || 2 || undefined );
+```
+
diff --git a/1-js/2-first-steps/13-logical-ops/1-alert-null-2-undefined/task.md b/1-js/2-first-steps/13-logical-ops/1-alert-null-2-undefined/task.md
new file mode 100644
index 00000000..f6e93650
--- /dev/null
+++ b/1-js/2-first-steps/13-logical-ops/1-alert-null-2-undefined/task.md
@@ -0,0 +1,10 @@
+# Что выведет alert (ИЛИ)?
+
+[importance 5]
+
+Что выведет код ниже?
+
+```js
+alert( null || 2 || undefined );
+```
+
diff --git a/1-js/2-first-steps/13-logical-ops/2-alert-or/solution.md b/1-js/2-first-steps/13-logical-ops/2-alert-or/solution.md
new file mode 100644
index 00000000..30fce045
--- /dev/null
+++ b/1-js/2-first-steps/13-logical-ops/2-alert-or/solution.md
@@ -0,0 +1,15 @@
+Ответ: сначала `1`, затем `2`.
+
+```js
+//+ run
+alert( alert(1) || 2 || alert(3) );
+```
+
+Вызов `alert` не возвращает значения, или, иначе говоря, возвращает `undefined`.
+
+<ol>
+<li>Первый оператор ИЛИ `||` выполнит первый `alert(1)`, получит `undefined` и пойдёт дальше, ко второму операнду.</li>
+<li>Так как второй операнд `2` является истинным, то вычисления завершатся, результатом `undefined || 2` будет `2`, которое будет выведено внешним `alert( .... )`.</li>
+</ol>
+
+Второй оператор `||` не будет выполнен, выполнение до `alert(3)` не дойдёт, поэтому `3` выведено не будет.
\ No newline at end of file
diff --git a/1-js/2-first-steps/13-logical-ops/2-alert-or/task.md b/1-js/2-first-steps/13-logical-ops/2-alert-or/task.md
new file mode 100644
index 00000000..1d4ed593
--- /dev/null
+++ b/1-js/2-first-steps/13-logical-ops/2-alert-or/task.md
@@ -0,0 +1,10 @@
+# Что выведет alert (ИЛИ)?
+
+[importance 3]
+
+Что выведет код ниже?
+
+```js
+alert( alert(1) || 2 || alert(3) );
+```
+
diff --git a/1-js/2-first-steps/13-logical-ops/3-alert-1-null-2/solution.md b/1-js/2-first-steps/13-logical-ops/3-alert-1-null-2/solution.md
new file mode 100644
index 00000000..c91e674a
--- /dev/null
+++ b/1-js/2-first-steps/13-logical-ops/3-alert-1-null-2/solution.md
@@ -0,0 +1,7 @@
+Ответ: `null`, это первое ложное значение из списка.
+
+```js
+//+ run
+alert( 1 && null && 2 );
+```
+
diff --git a/1-js/2-first-steps/13-logical-ops/3-alert-1-null-2/task.md b/1-js/2-first-steps/13-logical-ops/3-alert-1-null-2/task.md
new file mode 100644
index 00000000..38fee457
--- /dev/null
+++ b/1-js/2-first-steps/13-logical-ops/3-alert-1-null-2/task.md
@@ -0,0 +1,10 @@
+# Что выведет alert (И)?
+
+[importance 5]
+
+Что выведет код ниже?
+
+```js
+alert( 1 && null && 2 );
+```
+
diff --git a/1-js/2-first-steps/13-logical-ops/4-alert-and/solution.md b/1-js/2-first-steps/13-logical-ops/4-alert-and/solution.md
new file mode 100644
index 00000000..83a88c73
--- /dev/null
+++ b/1-js/2-first-steps/13-logical-ops/4-alert-and/solution.md
@@ -0,0 +1,10 @@
+Ответ: `1`, а затем `undefined`.
+
+```js
+//+ run
+alert( alert(1) && alert(2) );
+```
+
+Вызов `alert` не возвращает значения, или, иначе говоря, возвращает `undefined`.
+
+Поэтому до правого `alert` дело не дойдёт, вычисления закончатся на левом.
\ No newline at end of file
diff --git a/1-js/2-first-steps/13-logical-ops/4-alert-and/task.md b/1-js/2-first-steps/13-logical-ops/4-alert-and/task.md
new file mode 100644
index 00000000..2d1594d9
--- /dev/null
+++ b/1-js/2-first-steps/13-logical-ops/4-alert-and/task.md
@@ -0,0 +1,10 @@
+# Что выведет alert (И)?
+
+[importance 3]
+
+Что выведет код ниже?
+
+```js
+alert( alert(1) && alert(2) );
+```
+
diff --git a/1-js/2-first-steps/13-logical-ops/5-check-if-in-range/solution.md b/1-js/2-first-steps/13-logical-ops/5-check-if-in-range/solution.md
new file mode 100644
index 00000000..87c733b2
--- /dev/null
+++ b/1-js/2-first-steps/13-logical-ops/5-check-if-in-range/solution.md
@@ -0,0 +1,6 @@
+
+
+```js
+if (age >= 14 && age <= 90)
+```
+
diff --git a/1-js/2-first-steps/13-logical-ops/5-check-if-in-range/task.md b/1-js/2-first-steps/13-logical-ops/5-check-if-in-range/task.md
new file mode 100644
index 00000000..df16ad99
--- /dev/null
+++ b/1-js/2-first-steps/13-logical-ops/5-check-if-in-range/task.md
@@ -0,0 +1,7 @@
+# Проверка if внутри диапазона
+
+[importance 3]
+
+Напишите условие `if` для проверки того факта, что переменная `age` находится между `14` и `90` включительно.
+
+"Включительно" означает, что концы промежутка включены, то есть `age` может быть равна `14` или `90`. 
\ No newline at end of file
diff --git a/1-js/2-first-steps/13-logical-ops/6-check-if-out-range/solution.md b/1-js/2-first-steps/13-logical-ops/6-check-if-out-range/solution.md
new file mode 100644
index 00000000..a901721c
--- /dev/null
+++ b/1-js/2-first-steps/13-logical-ops/6-check-if-out-range/solution.md
@@ -0,0 +1,12 @@
+Первый вариант:
+
+```js
+if ( !(age >= 14 && age <= 90) )
+```
+
+Второй вариант:
+
+```js
+if (age < 14 || age > 90)
+```
+
diff --git a/1-js/2-first-steps/13-logical-ops/6-check-if-out-range/task.md b/1-js/2-first-steps/13-logical-ops/6-check-if-out-range/task.md
new file mode 100644
index 00000000..1d833664
--- /dev/null
+++ b/1-js/2-first-steps/13-logical-ops/6-check-if-out-range/task.md
@@ -0,0 +1,7 @@
+# Проверка if вне диапазона
+
+[importance 3]
+
+Напишите условие `if` для проверки того факта, что `age` НЕ находится между 14 и 90 включительно.
+
+Сделайте два варианта условия: первый с использованием оператора НЕ `!`, второй - без этого оператора.
\ No newline at end of file
diff --git a/1-js/2-first-steps/13-logical-ops/7-if-question/solution.md b/1-js/2-first-steps/13-logical-ops/7-if-question/solution.md
new file mode 100644
index 00000000..90f7a877
--- /dev/null
+++ b/1-js/2-first-steps/13-logical-ops/7-if-question/solution.md
@@ -0,0 +1,21 @@
+Ответ: первое и третье выполнятся. 
+
+Детали:
+
+```js
+//+ run
+// Выполнится
+// Результат -1 || 0 = -1, в логическом контексте true
+if (-1 || 0) alert('первое'); 
+
+// Не выполнится
+// -1 && 0 = 0,  в логическом контексте false
+if (-1 && 0) alert('второе'); 
+
+// Выполнится
+// оператор && имеет больший приоритет, чем ||
+// так что -1 && 1 выполнится раньше
+// вычисления: null || -1 && 1 -> null || 1 -> 1
+if (null || -1 && 1) alert('третье');
+```
+
diff --git a/1-js/2-first-steps/13-logical-ops/7-if-question/task.md b/1-js/2-first-steps/13-logical-ops/7-if-question/task.md
new file mode 100644
index 00000000..bbf094d8
--- /dev/null
+++ b/1-js/2-first-steps/13-logical-ops/7-if-question/task.md
@@ -0,0 +1,14 @@
+# Вопрос про "if"
+
+[importance 5]
+
+Какие из этих `if` верны, т.е. выполнятся? 
+
+Какие конкретно значения будут результатами выражений в условиях `if(...)`?
+
+```js
+if (-1 || 0) alert('первое');
+if (-1 && 0) alert('второе');
+if (null || -1 && 1) alert('третье');
+```
+
diff --git a/1-js/2-first-steps/13-logical-ops/article.md b/1-js/2-first-steps/13-logical-ops/article.md
new file mode 100644
index 00000000..27742817
--- /dev/null
+++ b/1-js/2-first-steps/13-logical-ops/article.md
@@ -0,0 +1,249 @@
+# Логические операторы
+
+В JavaScript поддерживаются операторы `||` (ИЛИ), `&&` (И) и `!` (НЕ). 
+
+Они называются *"логическими"*, но в JavaScript могут применяться к значениям любого типа и возвращают также значения любого типа.
+[cut]
+
+## || (ИЛИ)
+
+Оператор ИЛИ выглядит как двойной символ вертикальной черты:
+
+```js
+result = a || b;
+```
+
+**Логическое ИЛИ в классическом программировании работает следующим образом: "если *хотя бы один* из аргументов `true`, то возвращает `true`, иначе -- `false`".**
+
+Получается следующая таблица результатов:
+
+```js
+//+ run
+alert( true  || true ); // true
+alert( false || true ); // true
+alert( true  || false); // true
+alert( false || false); // false
+```
+
+При вычислении ИЛИ в JavaScript можно использовать любые значения. В этом случае они будут интерпретироваться как логические.
+
+Например, число `1` будет воспринято как `true`, а `0` -- как `false`:
+
+```js
+//+ run
+if ( 1 || 0 ) { // сработает как if( true || false )
+  alert('верно');
+}
+```
+
+Обычно оператор ИЛИ используется в `if`, чтобы проверить, выполняется ли хотя бы одно из условий, например:
+
+```js
+//+ run
+var hour = 9;
+
+*!*
+if (hour < 10 || hour > 18) { 
+*/!*
+  alert('Офис до 10 или после 18 закрыт');
+}
+```
+
+Можно передать и больше условий:
+
+```js
+//+ run
+var hour = 12, isWeekend = true;
+
+if (hour < 10 || hour > 18 || isWeekend) {
+  alert('Офис до 10 или после 18 или в выходной закрыт');
+}
+```
+
+## Короткий цикл вычислений
+
+JavaScript вычисляет несколько ИЛИ слева направо. При этом, чтобы экономить ресурсы, используется так называемый *"короткий цикл вычисления"*. 
+
+Допустим, вычисляются несколько ИЛИ подряд: `a || b || c || ...`. Если первый аргумент -- `true`, то результат заведомо будет `true` (хотя бы одно из значений -- `true`), и остальные значения игнорируются.
+
+Это особенно заметно, когда выражение, переданное в качестве второго аргумента, имеет *сторонний эффект* -- например, присваивает переменную. 
+
+При запуске примера ниже присвоение `x` не произойдёт:
+
+```js
+//+ run
+var x;
+
+*!*true*/!* || (x = 1);  // просто вычислим ИЛИ, без if
+
+alert(x); // undefined, x не присвоен
+```
+
+...А в примере ниже первый аргумент -- `false`, так что ИЛИ попытается вычислить второй, запустив тем самым присваивание:
+
+```js
+//+ run
+var x;
+
+*!*false*/!* || (x = 1);
+alert(x); // 1
+```
+
+## Значение ИЛИ
+
+Итак, как мы видим, оператор ИЛИ вычисляет ровно столько значений, сколько необходимо -- до первого `true`.
+
+**Оператор ИЛИ возвращает то значение, на котором остановились вычисления.**
+
+Примеры:
+
+```js
+//+ run
+alert( 1 || 0 ); // 1 
+alert( true || 'неважно что'); // true
+
+alert( null || 1 ); // 1
+alert( undefined || 0 ); // 0
+```
+
+Это используют, в частности, чтобы выбрать первое "истинное" значение из списка:
+
+```js
+//+ run
+var undef; // переменная не присвоена, т.е. равна undefined
+var zero = 0; 
+var emptyStr = "";
+var msg = "Привет!";
+
+*!*
+var result = undef || zero || emptyStr || msg || 0;
+*/!*
+
+alert(result); // выведет "Привет!" - первое значение, которое является true
+```
+
+## && (И)
+
+
+Оператор И пишется как два амперсанда `&&`:
+
+```js
+result = a && b;
+```
+
+**В классическом программировании И возвращает `true`, если оба аргумента истинны, а иначе -- `false`**
+
+```js
+//+ run
+alert( true  && true ); // true
+alert( false && true ); // false
+alert( true  && false); // false
+alert( false && false); // false
+```
+
+Пример:
+
+```js
+//+ run
+var hour = 12, minute = 30;
+
+if (hour == 12 && minute == 30) {
+  alert('Время 12:30');
+}
+```
+
+Как и в ИЛИ, допустимы любые значения:
+
+```js
+//+ run
+if ( 1 && 0 ) { // вычислится как true && false
+  alert('не сработает, т.к. условие ложно');
+}
+```
+
+К И применим тот же принцип "короткого цикла вычислений", но немного по-другому, чем к ИЛИ.
+
+**Если левый аргумент -- `false`, оператор И возвращает его и заканчивает вычисления, а иначе -- вычисляет и возвращает правый аргумент.**
+
+Например:
+
+```js
+//+ run
+// Первый аргумент - true, 
+// Поэтому возвращается второй аргумент
+alert(1 && 0);  // 0
+alert(1 && 5);  // 5
+
+// Первый аргумент - false,
+// Он и возвращается, а второй аргумент игнорируется
+alert(null && 5);  // null
+alert(0 && "не важно"); // 0
+```
+
+**Приоритет оператора И `&&` больше, чем ИЛИ `||`, т.е. он выполняется раньше.**
+
+Поэтому в следующем коде сначала будет вычислено правое И: `1 && 0 = 0`, а уже потом -- ИЛИ.
+
+```js
+//+ run
+alert(5 || 1 && 0); // 5
+```
+
+[warn header="Не используйте `&&` вместо `if`"]
+
+Оператор `&&` в простых случаях можно использовать вместо `if`, например:
+
+```js
+//+ run
+var x = 1;
+
+(x > 0) && alert('Больше');
+```
+
+Действие в правой части `&&` выполнится только в том случае, если до него дойдут вычисления. То есть, если в левой части будет `true`.
+
+Получился аналог:
+
+```js
+//+ run
+var x = 1;
+
+if (x > 0) {
+  alert('Больше');
+}
+```
+
+Однако, как правило, `if` лучше читается и воспринимается. Он более очевиден, поэтому лучше использовать его. Это, впрочем, относится и к другим неочевидным применениям возможностей языка.
+[/warn]
+
+## ! (НЕ)
+
+Оператор НЕ -- самый простой. Он получает один аргумент. Синтаксис:
+
+```js
+var result = !value;
+```
+
+Действия `!`:
+
+<ol>
+<li>Сначала приводит аргумент к логическому типу `true/false`.</li>
+<li>Затем возвращает противоположное значение.</li>
+</ol>
+
+Например:
+
+```js
+//+ run
+alert( !true ) // false
+alert( !0 )  // true
+```
+
+**В частности, двойное НЕ используются для преобразования значений к логическому типу:**
+
+```js
+//+ run
+alert( !!"строка" )  // true
+alert( !!null ) // false
+```
+
diff --git a/1-js/2-first-steps/14-types-conversion/1-primitive-conversions-questions/solution.md b/1-js/2-first-steps/14-types-conversion/1-primitive-conversions-questions/solution.md
new file mode 100644
index 00000000..553696ef
--- /dev/null
+++ b/1-js/2-first-steps/14-types-conversion/1-primitive-conversions-questions/solution.md
@@ -0,0 +1,31 @@
+
+
+```js
+"" + 1 + 0 = "10"   // (1)
+"" - 1 + 0 = -1   // (2)
+true + false = 1
+6 / "3" = 2
+"2" * "3" = 6
+4 + 5 + "px" = "9px"
+"$" + 4 + 5
 = "$45"
+"4" - 2
 = 2
+"4px" - 2
 = NaN
+7 / 0
 = Infinity
+parseInt("09")
 = "0" или "9" // (3)
+" -9\n" + 5 = " -9\n5"
+" -9\n" - 5 = -14
+5 && 2
 = 2
+2 && 5
 = 5
+5 || 0
 = 5
+0 || 5 = 5
+null + 1 = 1 // (4)
+undefined + 1 = NaN // (5)
+```
+
+<ol>
+<li>Оператор `"+"` в данном случае прибавляет `1` как строку, и затем `0`.</li>
+<li>Оператор `"-"` работает только с числами, так что он сразу приводит `""` к `0`.</li>
+<li>В некоторых браузерах `parseInt` без второго аргумента интерпретирует `09` как восьмиричное число.</li>
+<li>`null` при численном преобразовании становится `0`</li>
+<li>`undefined` при численном преобразовании становится `NaN`</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/2-first-steps/14-types-conversion/1-primitive-conversions-questions/task.md b/1-js/2-first-steps/14-types-conversion/1-primitive-conversions-questions/task.md
new file mode 100644
index 00000000..b5519c80
--- /dev/null
+++ b/1-js/2-first-steps/14-types-conversion/1-primitive-conversions-questions/task.md
@@ -0,0 +1,28 @@
+# Вопросник по преобразованиям, для примитивов
+
+[importance 5]
+
+Подумайте, какой результат будет у выражений ниже. Тут не только преобразования типов. Когда закончите -- сверьтесь с решением.
+
+```js
+"" + 1 + 0
+"" - 1 + 0
+true + false
+6 / "3"
+"2" * "3"
+4 + 5 + "px"
+"$" + 4 + 5

+"4" - 2

+"4px" - 2

+7 / 0

+parseInt("09")

+"  -9\n" + 5
+"  -9\n" - 5
+5 && 2

+2 && 5

+5 || 0

+0 || 5
+null + 1
+undefined + 1
+```
+
diff --git a/1-js/2-first-steps/14-types-conversion/article.md b/1-js/2-first-steps/14-types-conversion/article.md
new file mode 100644
index 00000000..076e54fb
--- /dev/null
+++ b/1-js/2-first-steps/14-types-conversion/article.md
@@ -0,0 +1,210 @@
+# Преобразование типов для примитивов
+
+Система преобразования типов в JavaScript очень проста, но отличается от других языков. Поэтому она часто служит "камнем преткновения" для приходящих из других языков программистов.
+[cut]
+Всего есть три преобразования:
+<ol>
+<li>Cтроковое преобразование.</li>
+<li>Числовое преобразование.</li>
+<li>Преобразование к логическому значению.</li>
+</ol>
+
+**Эта глава описывает преобразование только примитивных значений, объекты разбираются далее в учебнике.**
+
+
+## Строковое преобразование   
+
+Строковое преобразование происходит, когда требуется представление чего-либо в виде строки. Например, его производит функция `alert`.
+
+```js
+//+ run
+var a = true;
+
+alert(a); // "true"
+```
+
+Можно также осуществить преобразование явным вызовом `String(val)`:
+
+```js
+//+ run
+alert( String(null) === "null" ); // true
+```
+
+Также для явного преобразования применяется оператор `"+"`, у которого один из аргументов строка. В этом случае он приводит к строке и другой аргумент, например:
+
+```js
+//+ run
+alert( true + "test" ); // "truetest"
+alert( "123" + undefined); // "123undefined"
+```
+
+## Численное преобразование   
+
+Численное преобразование происходит в математических функциях и выражениях, а также при сравнении данных различных типов (кроме сравнений `===`, `!==`).
+
+Для преобразования к числу в явном виде можно вызвать `Number(val)`, либо, что короче, поставить перед выражением оператор унарный плюс `"+"`:
+
+```js
+var a = +"123"; // 123
+var a = Number("123"); // 123, тот же эффект
+```
+
+<table class="bordered">
+<tr><th>Значение</th><th>Преобразуется в...</th></tr>
+<tr><td>`undefined`</td><td>`NaN`</td></tr>
+<tr><td>`null`</td><td>`0`</td></tr>
+<tr><td>`true / false`</td><td>`1 / 0`</td></tr>
+<tr><td>Строка</td><td>Пробельные символы по краям обрезаются.<br>Далее, если остаётся пустая строка, то `0`.<br>Из непустой строки "считывается" число, при ошибке результат: `NaN`.</td></tr>
+</table>
+
+Например:
+
+```js
+//+ run
+alert( +"   \n  123   \n  \n"); // 123
+```
+
+Ещё примеры:
+<ul>
+<li>Логические значения:
+
+```js
+//+ run
+alert( +true ); // 1
+alert( +false); // 0
+```
+
+</li>
+<li>Сравнение разных типов -- значит численное преобразование:
+
+```js
+//+ run
+alert( "\n0\n" == 0 ); // true
+```
+
+При этом строка `"\n0\n"` преобразуется к числу -- начальные и конечные пробелы игнорируются, получается `0`.</li>
+</li>
+<li>
+Ещё пример сравнения разных типов:
+
+```js
+//+ run
+alert( "\n" == false );
+alert( "1" == true );
+```
+
+Здесь сравнение `"=="` снова приводит обе части к числу. В первой строке слева и справа получается `0`, во второй `1`.
+</li>
+</ul>
+
+### Специальные значения
+
+Посмотрим на поведение специальных значений более внимательно.
+
+**Интуитивно, значения `null/undefined` ассоциируются с нулём, но при преобразованиях ведут себя иначе.**
+
+Специальные значения преобразуются к числу так:
+<table class="bordered">
+<tr><th>Значение</th><th>Преобразуется в...</th></tr>
+<tr><td>`undefined`</td><td>`NaN`</td></tr>
+<tr><td>`null`</td><td>`0`</td></tr>
+</table>
+
+Это преобразование осуществляется при арифметических операциях и сравнениях `> >= < <=`, но не при проверке равенства `==`. Алгоритм проверки равенства для этих значений в спецификации прописан отдельно (пункт [11.9.3](http://es5.github.com/x11.html#x11.9.3)). В нём считается, что `null` и `undefined` равны `"=="` между собой, но эти значения не равны никакому другому значению.
+
+Это ведёт к забавным последствиям. 
+
+Например, `null` не подчиняется законам математики -- он "больше либо равен нулю": `null>=0`, но не больше и не равен:
+
+```js
+//+ run
+alert(null >= 0); // true, т.к. null преобразуется к 0
+alert(null > 0); // false (не больше), т.к. null преобразуется к 0
+alert(null == 0 ); // false (и не равен!), т.к. == рассматривает null особо.
+```
+
+Значение `undefined` вообще вне сравнений:
+
+```js
+//+ run
+alert(undefined > 0); // false, т.к. undefined -> NaN
+alert(undefined == 0); // false, т.к. это undefined (без преобразования)
+alert(undefined < 0); // false, т.к. undefined -> NaN
+```
+
+**Для более очевидной работы кода и во избежание ошибок лучше не давать специальным значениям участвовать в сравнениях `> >= < <=`.** 
+
+Используйте в таких случаях переменные-числа или приводите к числу явно.
+ 
+## Логическое преобразование
+
+Преобразование к `true/false` происходит в логическом контексте, таком как `if(obj)`, `while(obj)` и при применении логических операторов.
+
+Все значения, которые интуитивно "пусты", становятся `false`. Их несколько: `0`, пустая строка, `null`, `undefined` и `NaN`. 
+
+Остальное, в том числе и любые объекты -- `true`.
+
+Полная таблица преобразований:
+
+<table class="bordered">
+<tr><th>Значение</th><th>Преобразуется в...</th></tr>
+<tr><td>`undefined`, `null`</td><td>`false`</td></tr>
+<tr><td>Числа</td><td>Все `true`, кроме `0`, `NaN` -- `false`.</td></tr>
+<tr><td>Строки</td><td>Все `true`, кроме пустой строки `""` -- `false`</td></tr>
+<tr><td>Объекты</td><td>Всегда `true`</td></tr>
+</table>
+
+**Для явного преобразования используется двойное логическое отрицание `!!value` или вызов `Boolean(value)`.**
+
+[warn header="Обратите внимание: строка `\"0\"` становится `true`"]
+В отличие от многих языков программирования (например PHP), `"0"` в JavaScript является `true`, как и строка из пробелов:
+
+```js
+//+ run
+alert( !!"0" ); // true
+alert( !!" " ); // любые непустые строки, даже из пробелов - true!
+```
+
+[/warn]
+
+
+Логическое преобразование интересно тем, как оно сочетается с численным.
+
+**Два значения могут быть равны, но одно из них в логическом контексте `true`, другое -- `false`**.
+
+Например, равенства в следующем примере верны, так как происходит численное преобразование:
+
+```js
+//+ run
+alert( 0 == "\n0\n" );  // true
+alert( false == " " ); // true
+```
+
+...А в логическом контексте левая часть даст `false`, правая -- `true`:
+
+```js
+//+ run
+if ("\n0\n") { 
+  alert("true, совсем не как 0!");
+}
+```
+
+С точки зрения преобразования типов в JavaScript это совершенно нормально. При равенстве -- численное преобразование, а в `if` -- логическое, только и всего.
+
+## Итого
+
+В JavaScript есть три преобразования:
+
+<ol>
+<li>Строковое: `String(value)` -- в строковом контексте или при сложении со строкой</li>
+<li>Численное: `Number(value)` -- в численном контексте, включая унарный плюс `+value`.</li>
+<li>Логическое: `Boolean(value)` -- в логическом контексте, можно также сделать двойным НЕ: `!!value`.</li>
+</ol>
+
+**Сравнение не осуществляет преобразование типов в следующих случаях:**
+<ul>
+<li>При сравнении объектов. Две переменные, которые являются объектами равны только, когда ссылаются на один и тот же объект.</li>
+<li>При сравнении двух строк. Там отдельный алгоритм сравнения. А вот если хоть один операнд -- не строка, то значения будут приведены: `true > "000"` станет `1 > 0`.</li>
+<li>При проверке равенства с `null` и `undefined`. Они равны друг другу, но не равны чему бы то ни было ещё, этот случай прописан особо в спецификации.</li>
+</ul>
+
diff --git a/1-js/2-first-steps/15-while-for/1-loop-last-value/solution.md b/1-js/2-first-steps/15-while-for/1-loop-last-value/solution.md
new file mode 100644
index 00000000..6bdf4691
--- /dev/null
+++ b/1-js/2-first-steps/15-while-for/1-loop-last-value/solution.md
@@ -0,0 +1,26 @@
+Ответ: `1`.
+
+```js
+//+ run
+var i = 3;
+
+while(i) {
+  alert(i--);
+}
+```
+
+Каждое выполнение цикла уменьшает `i`. Проверка `while(i)` даст сигнал "стоп" при `i = 0`. 
+
+Соответственно, шаги цикла:
+
+```js
+var i = 3
+alert(i--); // выведет 3, затем уменьшит i до 2
+
+alert(i--) // выведет 2, затем уменьшит i до 1
+
+alert(i--) // выведет 1, затем уменьшит i до 0
+
+// все, проверка while(i) не даст выполняться циклу дальше
+```
+
diff --git a/1-js/2-first-steps/15-while-for/1-loop-last-value/task.md b/1-js/2-first-steps/15-while-for/1-loop-last-value/task.md
new file mode 100644
index 00000000..46b79f7e
--- /dev/null
+++ b/1-js/2-first-steps/15-while-for/1-loop-last-value/task.md
@@ -0,0 +1,14 @@
+# Последнее значение цикла
+
+[importance 3]
+
+Какое последнее значение выведет этот код? Почему?
+
+```js
+var i = 3;
+
+while(i) {
+  alert(i--);
+}
+```
+
diff --git a/1-js/2-first-steps/15-while-for/2-which-value-while/solution.md b/1-js/2-first-steps/15-while-for/2-which-value-while/solution.md
new file mode 100644
index 00000000..5d0afef5
--- /dev/null
+++ b/1-js/2-first-steps/15-while-for/2-which-value-while/solution.md
@@ -0,0 +1,31 @@
+<ol>
+<li>**От 1 до 4**
+
+```js
+//+ run
+var i = 0;
+while (++i < 5) alert(i);
+```
+
+Первое значение: `i=1`, так как операция `++i` сначала увеличит `i`, а потом уже произойдёт сравнение и выполнение `alert`.
+
+Далее `2,3,4..` Значения выводятся одно за другим. Для каждого значения сначала происходит увеличение, а потом -- сравнение, так как `++` стоит перед переменной. 
+
+При `i=4` произойдет увеличение `i` до `5`, а потом сравнение `while(5 < 5)` -- это неверно. Поэтому на этом цикл остановится, и значение `5` выведено не будет.
+</li>
+<li>**От 1 до 5**
+
+```js
+//+ run
+var i = 0;
+while (i++ < 5) alert(i);
+```
+
+Первое значение: `i=1`. Остановимся на нём подробнее. Оператор `i++` увеличивает `i`, возвращая старое значение, так что в сравнении `i++ < 5` будет участвовать старое `i=0`.
+
+Но последующий вызов `alert` уже не относится к этому выражению, так что получит новый `i=1`.
+
+Далее `2,3,4..` Для каждого значения сначала происходит сравнение, а потом -- увеличение, и затем срабатывание `alert`.
+
+Окончание цикла: при `i=4` произойдет сравнение `while(4 < 5)` -- верно, после этого сработает `i++`, увеличив  `i` до `5`, так что значение `5` будет выведено. Оно станет последним.</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/2-first-steps/15-while-for/2-which-value-while/task.md b/1-js/2-first-steps/15-while-for/2-which-value-while/task.md
new file mode 100644
index 00000000..8d477177
--- /dev/null
+++ b/1-js/2-first-steps/15-while-for/2-which-value-while/task.md
@@ -0,0 +1,23 @@
+# Какие значения i выведет цикл while?
+
+[importance 4]
+
+Для каждого цикла запишите, какие значения он выведет. Потом сравните с ответом.
+<ol>
+<li>Префиксный вариант
+
+```js
+var i = 0;
+while (++i < 5) alert(i);
+```
+
+</li>
+<li>Постфиксный вариант
+
+```js
+var i = 0;
+while (i++ < 5) alert(i);
+```
+
+</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/2-first-steps/15-while-for/3-which-value-for/solution.md b/1-js/2-first-steps/15-while-for/3-which-value-for/solution.md
new file mode 100644
index 00000000..734224cf
--- /dev/null
+++ b/1-js/2-first-steps/15-while-for/3-which-value-for/solution.md
@@ -0,0 +1,17 @@
+**Ответ: от 0 до 4 в обоих случаях.**
+
+```js
+//+ run
+for(var i=0; i<5; ++i) alert(i);
+
+for(var i=0; i<5; i++) alert(i);
+```
+
+Такой результат обусловлен алгоритмом работы `for`:
+<ol>
+<li>Выполнить присвоение `i=0`</li>
+<li>Проверить `i<5`</li>
+<li>Если верно - выполнить тело цикла `alert(i)`, затем выполнить `i++`</li>
+</ol>
+
+Увеличение `i++` выполняется отдельно от проверки условия (2), значение `i` при этом не используется, поэтому нет никакой разницы между `i++` и `++i`.
\ No newline at end of file
diff --git a/1-js/2-first-steps/15-while-for/3-which-value-for/task.md b/1-js/2-first-steps/15-while-for/3-which-value-for/task.md
new file mode 100644
index 00000000..a08c4743
--- /dev/null
+++ b/1-js/2-first-steps/15-while-for/3-which-value-for/task.md
@@ -0,0 +1,21 @@
+# Какие значения i выведет цикл for?
+
+[importance 4]
+
+Для каждого цикла запишите, какие значения он выведет. Потом сравните с ответом.
+<ol>
+<li>Постфиксная форма:
+
+```js
+for(var i=0; i<5; i++) alert(i);
+```
+
+</li>
+<li>Префиксная форма:
+
+```js
+for(var i=0; i<5; ++i) alert(i);
+```
+
+</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/2-first-steps/15-while-for/4-for-even/solution.md b/1-js/2-first-steps/15-while-for/4-for-even/solution.md
new file mode 100644
index 00000000..993f351d
--- /dev/null
+++ b/1-js/2-first-steps/15-while-for/4-for-even/solution.md
@@ -0,0 +1,12 @@
+
+
+```js
+//+ run demo
+for (var i = 2; i <= 10; i++) {
+  if ( i % 2 == 0) {
+    alert(i);
+  }
+}
+```
+
+Чётность проверяется по остатку при делении на `2`, используя оператор "деление с остатком" `%`: `i % 2`.
\ No newline at end of file
diff --git a/1-js/2-first-steps/15-while-for/4-for-even/task.md b/1-js/2-first-steps/15-while-for/4-for-even/task.md
new file mode 100644
index 00000000..d20029d0
--- /dev/null
+++ b/1-js/2-first-steps/15-while-for/4-for-even/task.md
@@ -0,0 +1,7 @@
+# Выведите чётные числа
+
+[importance 5]
+
+При помощи цикла `for` выведите чётные числа от `2` до `10`.
+
+[demo /]
\ No newline at end of file
diff --git a/1-js/2-first-steps/15-while-for/5-replace-for-while/solution.md b/1-js/2-first-steps/15-while-for/5-replace-for-while/solution.md
new file mode 100644
index 00000000..d0c6d428
--- /dev/null
+++ b/1-js/2-first-steps/15-while-for/5-replace-for-while/solution.md
@@ -0,0 +1,11 @@
+
+
+```js
+//+ run
+var i = 0;
+while (i < 3) {
+  alert("номер " + i + "!");
+  i++;
+}
+```
+
diff --git a/1-js/2-first-steps/15-while-for/5-replace-for-while/task.md b/1-js/2-first-steps/15-while-for/5-replace-for-while/task.md
new file mode 100644
index 00000000..4898d8b9
--- /dev/null
+++ b/1-js/2-first-steps/15-while-for/5-replace-for-while/task.md
@@ -0,0 +1,13 @@
+# Замените for на while
+
+[importance 5]
+
+Перепишите код, заменив цикл `for` на `while`, без изменения поведения цикла.
+
+```js
+//+ run
+for (var i = 0; i < 3; i++) {
+  alert("номер " + i + "!");
+}
+```
+
diff --git a/1-js/2-first-steps/15-while-for/6-repeat-until-correct/solution.md b/1-js/2-first-steps/15-while-for/6-repeat-until-correct/solution.md
new file mode 100644
index 00000000..311bb68b
--- /dev/null
+++ b/1-js/2-first-steps/15-while-for/6-repeat-until-correct/solution.md
@@ -0,0 +1,18 @@
+
+
+```js
+//+ run demo
+var num;
+
+do {
+  num = prompt("Введите число больше 100?", 0);
+} while(num <= 100 && num != null);
+```
+
+Цикл `do..while` повторяется, пока верны две проверки:
+<ol>
+<li>Проверка `num <= 100` -- то есть, введённое число всё еще меньше `100`.</li>
+<li>Проверка `num != null` -- значение `null` означает, что посетитель нажал "Отмена", в этом случае цикл тоже нужно прекратить.</li>
+</ol>
+
+Кстати, сравнение `num <= 100` при вводе `null` даст `true`, так что вторая проверка необходима.
\ No newline at end of file
diff --git a/1-js/2-first-steps/15-while-for/6-repeat-until-correct/task.md b/1-js/2-first-steps/15-while-for/6-repeat-until-correct/task.md
new file mode 100644
index 00000000..6fa1a462
--- /dev/null
+++ b/1-js/2-first-steps/15-while-for/6-repeat-until-correct/task.md
@@ -0,0 +1,11 @@
+# Повторять цикл, пока ввод неверен
+
+[importance 5]
+
+Напишите цикл, который предлагает `prompt` ввести число, большее `100`. Если посетитель ввел другое число -- попросить ввести еще раз, и так далее. 
+
+Цикл должен спрашивать число пока либо посетитель не введет число, большее `100`, либо не нажмет кнопку Cancel (ESC).
+
+Предполагается, что посетитель вводит только числа.
+
+[demo /]
diff --git a/1-js/2-first-steps/15-while-for/article.md b/1-js/2-first-steps/15-while-for/article.md
new file mode 100644
index 00000000..e1a60635
--- /dev/null
+++ b/1-js/2-first-steps/15-while-for/article.md
@@ -0,0 +1,179 @@
+# Циклы while, for
+
+При написании скриптов зачастую встает задача сделать однотипное действие много раз.
+
+Например, вывести товары из списка один за другим. Или просто перебрать все числа от 1 до 10 и для каждого выполнить одинаковый код. 
+
+Для многократного повторения одного участка кода - предусмотрены *циклы*.
+[cut]
+## Цикл while
+
+Цикл `while` имеет вид:
+
+```js
+while (условие) {
+  // код, тело цикла
+}
+```
+
+Пока `условие` верно -- выполняется код из тела цикла.
+
+Например, цикл ниже выводит `i` пока `i < 3`:
+
+```js
+//+ run
+var i = 0;
+while (i < 3) {
+  alert(i);
+  i++;
+}
+```
+
+**Повторение цикла по-научному называется *"итерация"*. Цикл в примере выше совершает три итерации.**
+
+Если бы `i++` в коде выше не было, то цикл выполнялся бы (в теории) вечно. На практике, браузер выведет сообщение о "зависшем" скрипте и посетитель его остановит.
+
+**Бесконечный цикл** можно сделать и проще:
+
+```js
+while (true) {
+  // ...
+}
+```
+
+**Условие в скобках интерпретируется как логическое значение, поэтому вместо `while (i!=0)` обычно пишут `while (i)`**:
+
+```js
+//+ run
+var i = 3;
+*!*
+while (i) { // при i=0 значение в скобках будет false и цикл остановится
+*/!*
+  alert(i);
+  i--;
+}
+```
+
+## Цикл do..while 
+
+Проверку условия можно поставить *под* телом цикла, используя специальный синтаксис `do..while`:
+
+```js
+do {
+  // тело цикла
+} while (условие);
+```
+
+Цикл, описанный, таким образом, сначала выполняет тело, а затем проверяет условие.
+
+Например:
+
+```js
+//+ run
+var i = 0;
+do {
+  alert(i);
+  i++;
+} while (i < 3);
+```
+
+Синтаксис `do..while` редко используется, т.к. обычный `while` нагляднее -- в нём не приходится искать глазами условие и ломать голову, почему оно проверяется именно в конце.
+
+
+## Цикл for 
+
+Чаще всего применяется цикл `for`. Выглядит он так:
+
+```js
+for (начало; условие; шаг) {
+ // ... тело цикла ...
+}
+```
+
+Пример цикла, который выполняет `alert(i)` для `i` от `0` до `2` включительно (до `3`):
+
+```js
+//+ run
+var i;
+
+for (i=0; i<3; i++) {
+  alert(i);
+}
+```
+
+Здесь:
+<ul>
+<li>**Начало:** `i=0`.</li>
+<li>**Условие:** `i<3`.</li>
+<li>**Шаг:** `i++`.</li>
+<li>**Тело:** `alert(i)`, т.е. код внутри фигурных скобок (они не обязательны, если только одна операция)</li>
+</ul>
+
+Цикл выполняется так:
+
+<ol>
+<li>Начало: `i=0` выполняется один-единственный раз, при заходе в цикл.</li>
+<li>Условие: `i<3` проверяется перед каждой итерацией и при входе в цикл, если оно нарушено, то происходит выход.</li>
+<li>Тело: `alert(i)`.</li>
+<li>Шаг: `i++` выполняется после *тела* на каждой итерации, но перед проверкой условия.</li>
+<li>Идти на шаг 2.</li>
+</ol>
+
+Иными, словами, поток выполнения: `начало` -> (если `условие` -> `тело` -> `шаг`) -> (если `условие` -> `тело` -> `шаг`) -> ... и так далее, пока верно `условие`.
+
+[smart]
+В цикле также можно определить переменную:
+
+```js
+//+ run
+for (*!*var*/!* i=0; i<3; i++) {
+  alert(i); // 0, 1, 2
+}
+```
+
+Эта переменная будет видна и за границами цикла, в частности, после окончания цикла `i` станет равно `3`.
+[/smart]
+
+## Пропуск частей for
+
+Любая часть `for` может быть пропущена.
+
+Например, можно убрать `начало`. Цикл в примере ниже полностью идентичен приведённому выше:
+
+```js
+//+ run
+var i = 0;
+
+for (; i<3; i++) {
+  alert(i);  // 0, 1, 2
+}
+```
+
+Можно убрать и `шаг`:
+
+```js
+//+ run
+var i = 0;
+
+for (; i<3;) {
+ alert(i);
+ // цикл превратился в аналог while (i<3)
+}
+```
+
+А можно и вообще убрать все, получив бесконечный цикл:
+
+```js
+for (;;) { 
+  // будет выполняться вечно 
+}
+```
+
+При этом сами точки с запятой `;` обязательно должны присутствовать, иначе будет ошибка синтаксиса.
+
+[smart header="`for..in`"]
+Существует также специальная конструкция `for..in` для перебора свойств объекта. 
+
+Мы познакомимся с ней позже, когда будем [говорить об объектах](#for..in).
+[/smart]
+
diff --git a/1-js/2-first-steps/16-break-continue/1-list-primes/solution.md b/1-js/2-first-steps/16-break-continue/1-list-primes/solution.md
new file mode 100644
index 00000000..7a566562
--- /dev/null
+++ b/1-js/2-first-steps/16-break-continue/1-list-primes/solution.md
@@ -0,0 +1,28 @@
+# Схема решения
+
+```js
+Для всех i от 1 до 10 {
+ проверить, делится ли число i на какое-либо из чисел до него
+   если делится, то это i не подходит, берем следующее
+   если не делится, то i - простое число
+}
+```
+
+# Решение
+
+Решение с использованием метки:
+
+```js
+//+ run
+nextPrime: 
+for(var i=2; i<10; i++) {
+
+  for(var j=2; j<i; j++) {
+    if ( i % j == 0) continue nextPrime;
+  }
+  
+  alert(i);  // простое
+}
+```
+
+Конечно же, его можно оптимизировать с точки зрения производительности. Например, проверять все `j` не от `2` до `i`, а от `2` до квадратного корня из `i`. А для очень больших чисел -- существуют более эффективные специализированные алгоритмы проверки простоты числа, например [квадратичное решето](http://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D1%82%D0%BE%D0%B4_%D0%BA%D0%B2%D0%B0%D0%B4%D1%80%D0%B0%D1%82%D0%B8%D1%87%D0%BD%D0%BE%D0%B3%D0%BE_%D1%80%D0%B5%D1%88%D0%B5%D1%82%D0%B0) и [решето числового поля](http://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D1%89%D0%B8%D0%B9_%D0%BC%D0%B5%D1%82%D0%BE%D0%B4_%D1%80%D0%B5%D1%88%D0%B5%D1%82%D0%B0_%D1%87%D0%B8%D1%81%D0%BB%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D0%BE%D0%BB%D1%8F).
\ No newline at end of file
diff --git a/1-js/2-first-steps/16-break-continue/1-list-primes/task.md b/1-js/2-first-steps/16-break-continue/1-list-primes/task.md
new file mode 100644
index 00000000..60d28830
--- /dev/null
+++ b/1-js/2-first-steps/16-break-continue/1-list-primes/task.md
@@ -0,0 +1,12 @@
+# Вывести простые числа
+
+[importance 4]
+
+Натуральное число, большее 1, называется *простым*, если оно ни на что не делится, кроме себя и `1`.
+
+Другими словами, <code>n&gt;1</code> - простое, если при делении на любое число от `2` до `n-1` есть остаток.
+
+**Создайте код, который выводит все простые числа из интервала от `2` до `10`.** Результат должен быть: `2,3,5,7`.
+
+P.S. Код также должен легко модифицироваться для любых других интервалов.
+
diff --git a/1-js/2-first-steps/16-break-continue/article.md b/1-js/2-first-steps/16-break-continue/article.md
new file mode 100644
index 00000000..7a4b2adc
--- /dev/null
+++ b/1-js/2-first-steps/16-break-continue/article.md
@@ -0,0 +1,198 @@
+# Директивы break и continue
+
+Для более гибкого управления циклом используются директивы `break` и `continue`.
+[cut]
+## Выход: break   
+
+Выйти из цикла можно не только при проверке условия но и, вообще, в любой момент. Эту возможность обеспечивает директива `break`.
+
+Например, бесконечный цикл в примере прекратит выполнение при `i==5`:
+
+```js
+var i=0;
+
+while(1) {
+  i++;   
+
+  *!*if (i==5) break;*/!*
+
+  alert(i);
+}
+
+alert('Последняя i = '+ i ); // 5 (*)
+```
+
+Выполнение продолжится со строки `(*)`, следующей за циклом.
+
+## Следующая итерация: continue [#continue]
+
+Директива `continue` прекращает выполнение *текущей итерации* цикла. Например, цикл ниже не выводит четные значения:
+
+```js
+//+ run
+for (var i = 0; i < 10; i++) {
+  
+  *!*if (i % 2 == 0) continue;*/!*
+
+  alert(i);
+}
+```
+
+Для четных `i` срабатывает `continue`, выполнение блока прекращается и управление передается на `for`.
+
+[smart header="Совет по стилю"]
+
+Как правило, `continue` и используют, чтобы не обрабатывать определенные значения в цикле. 
+
+Цикл, который обрабатывает только часть значений, мог бы выглядеть так:
+
+```js
+for (var i = 0; i < 10; i++) {
+  
+  if ( checkValue(i) ) { 
+    // функция checkValue проверяет, подходит ли i
+
+    // ...
+    // ... обработка
+    // ... этого
+    // ... значения
+    // ... цикла
+    // ...
+
+  }
+}
+```
+
+Все хорошо, но мы получили *дополнительный уровень вложенности фигурных скобок, без которого можно и нужно обойтись*. 
+
+Гораздо лучше здесь использовать `continue`:
+
+```js
+for (var i = 0; i < 10; i++) {
+  
+  *!*if ( !checkValue(i) ) continue;*/!*
+ 
+  // здесь мы точно знаем, что i подходит
+
+  // ...
+  // ... обработка
+  // ... этого
+  // ... значения
+  // ... цикла
+  // ...
+
+}
+```
+
+[/smart]
+
+[warn header="Нельзя использовать break/continue справа от оператора '?'"]
+Обычно мы можем заменить `if` на оператор вопросительный знак `'?'`.
+
+То есть, запись:
+
+```js
+if (условие) {
+  a();
+} else {
+  b();
+}
+```
+
+..Аналогична записи:
+
+```js
+условие ? a() : b();
+```
+
+В обоих случаях в зависимости от условия выполняется либо `a()` либо `b()`.
+
+Но разница состоит в том, что оператор вопросительный знак `'?'`, использованный во второй записи, возвращает значение. 
+
+**Синтаксические конструкции, которые не возвращают значений, нельзя использовать в операторе `'?'`.** К таким относятся большинство конструкций и, в частности, `break/continue`.
+
+Поэтому такой код приведёт к ошибке:
+
+```js
+(i > 5) ? alert(i) : *!*continue*/!*;
+```
+
+[/warn]
+
+## Метки
+
+Бывает нужно выйти одновременно из нескольких уровней цикла.
+
+Представим, что нужно ввести значения точек. У каждой точки есть две координаты `(i, j)`. Цикл для ввода значений `i,j = 0..2` может выглядеть так:
+
+```js
+//+ run
+for (var i = 0; i < 3; i++) {
+
+  for (var j = 0; j < 3; j++) {
+    
+    var input = prompt("Значение в координатах " + i + "," + j, "");
+
+    if (input == null) *!*break*/!*; // (*)
+
+  }
+}
+alert('Готово!');
+```
+
+Здесь `break` используется, чтобы прервать ввод, если посетитель нажал на `Отмена`. Но обычный вызов `break` в строке `(*)` не может прервать два цикла сразу. Как же прервать ввод полностью? Один из способов -- поставить *метку*.
+
+Метка имеет вид `"имя:"`, имя должно быть уникальным. Она ставится перед циклом, вот так:
+
+```js
+outer: for (var i = 0; i < 3; i++) { ... }
+```
+
+Можно также выносить ее на отдельную строку. Вызов `break outer` прерывает управление цикла с такой меткой, вот так:
+
+```js
+//+ run
+outer:
+for (var i = 0; i < 3; i++) {
+
+  for (var j = 0; j < 3; j++) {
+    
+    var input = prompt('Значение в координатах '+i+','+j, '');
+
+    if (input == null) *!*break outer*/!*; // (*)
+
+  }
+}
+alert('Готово!');
+```
+
+Директива `continue` также может быть использована с меткой. Управление перепрыгнет на следующую итерацию цикла с меткой.
+
+**Метки можно ставить в том числе на блок, без цикла:**
+
+```js
+//+ run
+my: {
+
+  for (;;) {
+    for (i=0; i<10; i++) {
+      if (i>4) break my;
+    }
+  }
+  
+  some_code; // произвольный участок кода
+
+}
+alert("После my"); // (*)
+```
+
+В примере выше, `break` перепрыгнет через `some_code`, выполнение продолжится сразу после блока `my`, со строки `(*)`. Возможность ставить метку на блоке используется редко. Обычно метки ставятся перед циклом. 
+
+[smart header="Goto?"]
+В некоторых языках программирования есть оператор `goto`, который может передавать управление на любой участок программы. 
+
+Операторы `break/continue` более ограниченны. Они работают только внутри циклов, и метка должна быть не где угодно, а выше по уровню вложенности.
+
+В JavaScript нет `goto`.
+[/smart]
+
diff --git a/1-js/2-first-steps/17-switch/1-rewrite-switch-if-else/solution.md b/1-js/2-first-steps/17-switch/1-rewrite-switch-if-else/solution.md
new file mode 100644
index 00000000..98ca59a1
--- /dev/null
+++ b/1-js/2-first-steps/17-switch/1-rewrite-switch-if-else/solution.md
@@ -0,0 +1,20 @@
+Если совсем точно следовать условию, то сравнение должно быть строгим `'==='`. 
+
+В реальном случае, скорее всего, подойдёт обычное сравнение `'=='`.
+
+```js
+if(browser == 'IE') {
+  alert('О, да у вас IE!');
+} else if (browser == 'Chrome'
+ || browser == 'Firefox'
+ || browser == 'Safari' 
+ || browser == 'Opera') {
+  alert('Да, и эти браузеры мы поддерживаем');
+} else {
+  alert('Мы надеемся, что и в вашем браузере все ок!');
+}
+```
+
+Обратите внимание: конструкция `browser == 'Chrome' || browser == 'Firefox' ...` разбита на несколько строк для лучшей читаемости.
+
+Но всё равно запись через `switch` нагляднее.
\ No newline at end of file
diff --git a/1-js/2-first-steps/17-switch/1-rewrite-switch-if-else/task.md b/1-js/2-first-steps/17-switch/1-rewrite-switch-if-else/task.md
new file mode 100644
index 00000000..f9d936ea
--- /dev/null
+++ b/1-js/2-first-steps/17-switch/1-rewrite-switch-if-else/task.md
@@ -0,0 +1,24 @@
+# Напишите "if", аналогичный "switch"
+
+[importance 5]
+
+Напишите `if..else`, соответствующий следующему `switch`:
+
+```js
+switch(browser) {
+  case 'IE':
+    alert('О, да у вас IE!');
+    break;
+
+  case 'Chrome':
+  case 'Firefox':
+  case 'Safari':
+  case 'Opera':
+    alert('Да, и эти браузеры мы поддерживаем');
+    break;
+
+  default:
+    alert('Мы надеемся, что и в вашем браузере все ок!');
+}
+```
+
diff --git a/1-js/2-first-steps/17-switch/2-rewrite-if-switch/solution.md b/1-js/2-first-steps/17-switch/2-rewrite-if-switch/solution.md
new file mode 100644
index 00000000..149bcfa1
--- /dev/null
+++ b/1-js/2-first-steps/17-switch/2-rewrite-if-switch/solution.md
@@ -0,0 +1,27 @@
+Первые две проверки -- обычный `case`, третья разделена на два `case`:
+
+```js
+//+ run
+var a = +prompt('a?', '');
+
+switch(a) {
+  case 0:
+    alert(0);
+    break;
+
+  case 1:
+    alert(1);
+    break;
+
+  case 2:
+  case 3:
+    alert('2,3');
+*!*
+    break;
+*/!*
+}
+```
+
+Обратите внимание: `break` внизу не обязателен, но ставится по "правилам хорошего тона".
+
+Допустим, он не стоит. Есть шанс, что в будущем нам понадобится добавить в конец ещё один `case`, например `case 4`, и мы, вполне вероятно, забудем этот `break` поставить. В результате выполнение `case 2`/`case 3` продолжится на `case 4` и будет ошибка.
diff --git a/1-js/2-first-steps/17-switch/2-rewrite-if-switch/task.md b/1-js/2-first-steps/17-switch/2-rewrite-if-switch/task.md
new file mode 100644
index 00000000..a967428e
--- /dev/null
+++ b/1-js/2-first-steps/17-switch/2-rewrite-if-switch/task.md
@@ -0,0 +1,22 @@
+# Переписать if'ы в switch
+
+[importance 4]
+
+Перепишите код с использованием одной конструкции `switch`:
+
+```js
+//+ run
+var a = +prompt('a?', '');
+
+if (a == 0) {
+  alert(0);
+}
+if (a == 1) {
+  alert(1);
+}
+
+if (a == 2 ||  a == 3) {
+  alert('2,3');
+}
+```
+
diff --git a/1-js/2-first-steps/17-switch/article.md b/1-js/2-first-steps/17-switch/article.md
new file mode 100644
index 00000000..b94a6f9e
--- /dev/null
+++ b/1-js/2-first-steps/17-switch/article.md
@@ -0,0 +1,185 @@
+# Конструкция switch
+
+Конструкция `switch` заменяет собой сразу несколько `if`.
+
+Это -- более наглядный способ сравнить выражение сразу с несколькими вариантами.
+[cut]
+## Синтаксис
+
+Выглядит она так:
+
+```js
+switch(x) {
+  case 'value1':  // if (x === 'value1')
+    ...
+    [break]
+
+  case 'value2':  // if (x === 'value2')
+    ...
+    [break]
+
+  default:
+    ...
+    [break]
+}
+```
+
+<ul>
+<li>
+Переменная `x` проверяется на строгое равенство первому значению `value1`, затем второму `value2` и так далее. 
+</li>
+<li>
+Если соответствие установлено -- switch начинает выполняться от соответствующей директивы `case` и далее, *до ближайшего `break`* (или до конца `switch`).
+</li>
+<li>
+Если ни один `case` не совпал -- выполняетcя (если есть) вариант `default`.
+</li>
+</ul>
+
+При этом `case` называют *вариантами `switch`*. 
+
+## Пример работы   
+
+Пример использования `switch` (сработавший код выделен):
+
+```js
+//+ run
+var a = 2+2;
+
+switch (a) {
+  case 3:
+    alert('Маловато');
+    break;
+*!*
+  case 4:
+    alert('В точку!');
+    break;
+*/!*
+  case 5:
+    alert('Перебор');
+    break;
+  default:
+    alert('Я таких значений не знаю');
+}
+```
+
+Будет выведено только одно значение, соответствующее `4`. После чего `break` прервёт выполнение.
+
+**Если его не прервать -- оно пойдёт далее, при этом остальные проверки игнорируются.**
+
+Например:
+
+```js
+//+ run
+var a = 2+2;
+
+switch (a) {
+  case 3:
+    alert('Маловато');
+*!*
+  case 4:
+    alert('В точку!');
+  case 5:
+    alert('Перебор');
+  default:
+    alert('Я таких значений не знаю');
+*/!*
+}
+```
+
+В примере выше  последовательно выполнятся три `alert`.
+
+```js
+alert('В точку!');
+alert('Перебор');
+alert('Я таких значений не знаю');
+```
+
+**В `case` могут быть любые выражения**, в том числе включающие в себя переменные и функции.
+
+Например:
+
+```js
+//+ run
+var a = 1;
+var b = 0;
+
+switch(a) {
+*!*
+  case b+1:
+    alert(1);
+    break;
+*/!*
+
+  default:
+    alert('нет-нет, выполнится вариант выше')
+}
+```
+
+## Группировка case
+
+Несколько значений case можно группировать.
+
+В примере ниже `case 3` и `case 5`  выполняют один и тот же код:
+
+```js
+//+ run
+var a = 2+2;
+
+switch (a) {
+  case 4:
+    alert('Верно!');
+    break;
+
+*!*
+  case 3:                    // (*)
+  case 5:                    // (**)
+    alert('Неверно!');
+    alert('Немного ошиблись, бывает.');
+    break;
+*/!*
+
+  default:
+    alert('Странный результат, очень странный');
+}
+```
+
+При `case 3` выполнение идёт со строки `(*)`, при `case 5` -- со строки `(**)`.
+
+## Тип имеет значение   
+
+Следующий пример принимает значение от посетителя.
+
+```js
+//+ run
+var arg = prompt("Введите arg?")
+switch(arg) {
+  case '0':
+  case '1':
+    alert('Один или ноль');
+
+  case '2':
+    alert('Два');
+    break;
+
+  case 3:
+    alert('Никогда не выполнится');
+
+  case null: 
+    alert('Отмена');
+    break;
+
+  default:
+    alert('Неизвестное значение: ' + arg)
+}
+```
+
+Что оно выведет при вводе чисел 0, 1, 2, 3? Подумайте и *потом* читайте дальше...
+
+<ul>
+<li>При вводе `0` или `1` выполнится первый `alert`, далее выполнение продолжится вниз до первого `break` и выведет второй `alert('Два')`.</li>
+<li>При вводе `2`, `switch` перейдет к `case '2'` и выведет `Два`.</li>
+<li>**При вводе `3`, `switch` перейдет на `default`.** Это потому, что `prompt` возвращает строку `'3'`, а не число. Типы разные. `Switch` использует строгое равенство `===`, так что совпадения не будет.</li>
+<li>При отмене сработает `case null`.</li>
+</ul>
+
diff --git a/1-js/2-first-steps/18-function-basics/1-if-else-required/solution.md b/1-js/2-first-steps/18-function-basics/1-if-else-required/solution.md
new file mode 100644
index 00000000..be1daacc
--- /dev/null
+++ b/1-js/2-first-steps/18-function-basics/1-if-else-required/solution.md
@@ -0,0 +1 @@
+Оба варианта функции работают одинаково, отличий нет.
\ No newline at end of file
diff --git a/1-js/2-first-steps/18-function-basics/1-if-else-required/task.md b/1-js/2-first-steps/18-function-basics/1-if-else-required/task.md
new file mode 100644
index 00000000..217ea049
--- /dev/null
+++ b/1-js/2-first-steps/18-function-basics/1-if-else-required/task.md
@@ -0,0 +1,35 @@
+# Обязателен ли "else"?
+
+[importance 4]
+
+Следующая функция возвращает `true`, если параметр `age` больше `18`.
+В ином случае она задает вопрос посредством вызова `confirm` и возвращает его результат.
+
+```js
+function checkAge(age) {
+  if (age > 18) {
+    return true;
+*!*
+  } else {
+    // ...
+    return confirm('Родители разрешили?');
+  }
+*/!*
+}
+```
+
+Будет ли эта функция работать как-то иначе, если убрать `else`?
+
+```js
+function checkAge(age) {
+  if (age > 18) {
+    return true;
+  }
+*!*
+  // ...
+  return confirm('Родители разрешили?');
+*/!*
+}
+```
+
+Есть ли хоть одно отличие в поведении этого варианта?
\ No newline at end of file
diff --git a/1-js/2-first-steps/18-function-basics/2-rewrite-function-question-or/solution.md b/1-js/2-first-steps/18-function-basics/2-rewrite-function-question-or/solution.md
new file mode 100644
index 00000000..f021c7e4
--- /dev/null
+++ b/1-js/2-first-steps/18-function-basics/2-rewrite-function-question-or/solution.md
@@ -0,0 +1,16 @@
+Используя оператор `'?'`:
+
+```js
+function checkAge(age) {
+  return (age > 18) ? true : confirm('Родители разрешили?');
+}
+```
+
+Используя оператор `||` (самый короткий вариант):
+
+```js
+function checkAge(age) {
+  return (age > 18) || confirm('Родители разрешили?');
+}
+```
+
diff --git a/1-js/2-first-steps/18-function-basics/2-rewrite-function-question-or/task.md b/1-js/2-first-steps/18-function-basics/2-rewrite-function-question-or/task.md
new file mode 100644
index 00000000..a2523c4f
--- /dev/null
+++ b/1-js/2-first-steps/18-function-basics/2-rewrite-function-question-or/task.md
@@ -0,0 +1,23 @@
+# Перепишите функцию, используя оператор '?' или '||'
+
+[importance 4]
+
+Следующая функция возвращает `true`, если параметр `age` больше `18`.
+В ином случае она задает вопрос `confirm` и возвращает его результат.
+
+```js
+function checkAge(age) {
+  if (age > 18) {
+    return true;
+  } else {
+    return confirm('Родители разрешили?');
+  }
+}
+```
+
+Перепишите функцию, чтобы она делала то же самое, но без `if`, в одну строку. 
+Сделайте два варианта функции `checkAge`:
+<ol>
+<li>Используя оператор `'?'`</li>
+<li>Используя оператор `||`</li>
+</ol>
diff --git a/1-js/2-first-steps/18-function-basics/3-min/solution.md b/1-js/2-first-steps/18-function-basics/3-min/solution.md
new file mode 100644
index 00000000..91809daa
--- /dev/null
+++ b/1-js/2-first-steps/18-function-basics/3-min/solution.md
@@ -0,0 +1,21 @@
+Вариант решения с использованием `if`:
+
+```js
+function min(a, b) {
+  if (a < b) {
+    return a;
+  } else {
+    return b;
+  }
+}
+```
+
+Вариант решения с оператором `'?'`:
+
+```js
+function min(a, b) {
+  return a < b ? a : b;
+}
+```
+
+P.S. Случай равенства `a == b` здесь отдельно не рассматривается, так как при этом неважно, что возвращать.
\ No newline at end of file
diff --git a/1-js/2-first-steps/18-function-basics/3-min/task.md b/1-js/2-first-steps/18-function-basics/3-min/task.md
new file mode 100644
index 00000000..8d042382
--- /dev/null
+++ b/1-js/2-first-steps/18-function-basics/3-min/task.md
@@ -0,0 +1,16 @@
+# Функция min
+
+[importance 1]
+
+Задача "Hello World" для функций :)
+
+Напишите функцию `min(a,b)`, которая возвращает меньшее из чисел `a,b`.
+
+Пример вызовов:
+
+```js
+min(2, 5) == 2
+min(3, -1) == -1
+min(1, 1) == 1
+```
+
diff --git a/1-js/2-first-steps/18-function-basics/4-pow/solution.md b/1-js/2-first-steps/18-function-basics/4-pow/solution.md
new file mode 100644
index 00000000..7d818e30
--- /dev/null
+++ b/1-js/2-first-steps/18-function-basics/4-pow/solution.md
@@ -0,0 +1,34 @@
+
+
+```js
+//+ run demo
+/**
+ * Возводит x в степень n (комментарий JSDoc)
+ *
+ * @param {number} x число, которое возводится в степень
+ * @param {number} n степень, должна быть целым числом больше 1
+ *
+ * @return {number} x в степени n
+ */
+function pow(x, n) {
+  var result = x;
+
+  for(var i = 1; i < n; i++) {
+    result *= x;
+  }
+
+  return result;
+}
+
+var x = prompt("x?", '');
+var n = prompt("n?", '');
+
+if (n <= 1) {
+  alert('Степень ' + n +
+    'не поддерживается, введите целую степень, большую 1'
+  );
+} else {
+  alert( pow(x, n) );
+}
+```
+
diff --git a/1-js/2-first-steps/18-function-basics/4-pow/task.md b/1-js/2-first-steps/18-function-basics/4-pow/task.md
new file mode 100644
index 00000000..522badc3
--- /dev/null
+++ b/1-js/2-first-steps/18-function-basics/4-pow/task.md
@@ -0,0 +1,17 @@
+# Функция pow(x,n)
+
+[importance 4]
+
+Напишите функцию `pow(x,n)`, которая возвращает `x` в степени `n`. Иначе говоря, умножает `x` на себя `n` раз и возвращает результат.
+
+```js
+pow(3, 2) = 3*3 = 9
+pow(3, 3) = 3*3*3 = 27
+pow(1, 100) = 1*1*...*1 = 1
+```
+
+Создайте страницу, которая запрашивает `x` и `n`, а затем выводит результат  `pow(x,n)`.
+
+[demo /]
+
+P.S. В этой задаче функция обязана поддерживать только натуральные значения `n`, т.е. целые от `1` и выше.
\ No newline at end of file
diff --git a/1-js/2-first-steps/18-function-basics/article.md b/1-js/2-first-steps/18-function-basics/article.md
new file mode 100644
index 00000000..c1322276
--- /dev/null
+++ b/1-js/2-first-steps/18-function-basics/article.md
@@ -0,0 +1,457 @@
+# Функции
+
+Зачастую нам надо повторять одно и то же действие во многих частях программы. 
+
+Например, красиво вывести сообщение необходимо при приветствии посетителя, при выходе посетителя с сайта, еще где-нибудь.
+
+Чтобы не повторять один и тот же код во многих местах, придуманы функции. Функции являются основными "строительными блоками" программы.
+[cut]
+Примеры встроенных функций вы уже видели -- это `alert(message)`, `prompt(message, default)` и `confirm(question)`. Но можно создавать и свои.
+
+## Объявление
+
+Пример объявления функции:
+
+```js
+function showMessage() {  
+  alert('Привет всем присутствующим!');
+}
+```
+
+Вначале идет ключевое слово `function`, после него *имя функции*, затем *список параметров* в скобках (в примере выше он пустой) и *тело функции* -- код, который выполняется при её вызове. 
+
+Объявленная функция доступна по имени, например:
+
+```js
+//+ run
+function showMessage() {  
+  alert('Привет всем присутствующим!');
+}
+
+*!*
+showMessage();
+showMessage();
+*/!*
+```
+
+Этот код выведет сообщение два раза. Уже здесь видна **главная цель создания функций: избавление от дублирования кода**. 
+
+Если понадобится поменять сообщение или способ его вывода -- достаточно изменить его в одном месте: в функции, которая его выводит. 
+
+## Локальные переменные   
+
+Функция может содержать *локальные* переменные, объявленные через `var`. Такие переменные видны только внутри функции:
+
+```js
+//+ run
+function showMessage() {
+*!*
+  var message = 'Привет, я - Вася!'; // локальная переменная
+*/!*
+
+  alert(message);
+}
+
+showMessage(); // 'Привет, я - Вася!'
+
+alert(message); // <-- будет ошибка, т.к. переменная видна только внутри
+```
+
+**Блоки `if/else`, `switch`, `for`, `while`, `do..while` не влияют на область видимости переменных.**
+
+При объявлении переменной в таких блоках, она всё равно будет видна во всей функции.
+
+Например:
+
+```js
+function count() {
+  for (*!*var*/!* i=0; i<3; i++) {
+    *!*var*/!* j = i * 2;
+  }
+
+*!*
+  alert(i); // i=3, на этом значении цикл остановился
+  alert(j); // j=4, последнее значение, на котором цикл сработал, было i=2
+*/!*
+}
+```
+
+**Неважно, где именно в функции и сколько раз объявляется переменная. Любое объявление срабатывает один раз и распространяется на всю функцию.**
+
+Объявления переменных в примере выше можно передвинуть вверх, это ни на что не повлияет:
+
+```js
+function count() {
+*!*
+  var i, j; // передвинули объявления var в начало
+*/!*
+  for (i=0; i<3; i++) {
+    j = i * 2;
+  }
+
+  alert(i); // i=3
+  alert(j); // j=4
+}
+```
+
+## Внешние переменные 
+
+Функция может обратиться ко внешней переменной, например:
+
+```js
+//+ run
+var *!*userName*/!* = 'Вася';
+
+function showMessage() {
+  var message = 'Привет, я ' + *!*userName*/!*;
+  alert(message);
+}
+
+showMessage(); // Привет, я Вася
+```
+
+Доступ возможен не только на чтение, но и на запись. При этом, так как переменная внешняя, то изменения будут видны и снаружи функции:
+
+```js
+//+ run
+var *!*userName*/!* = 'Вася';
+
+function showMessage() {
+*!*
+  userName = 'Петя'; // (1) присвоение во внешнюю переменную
+*/!*
+  var message = 'Привет, я ' + *!*userName*/!*;
+  alert(message);
+}
+
+showMessage();
+
+*!*
+alert(userName); // Петя, значение внешней переменной изменено функцией
+*/!*
+```
+
+Конечно, если бы внутри функции, в строке `(1)`, была бы объявлена своя локальная переменная `var userName`, то все обращения использовали бы её, и внешняя переменная осталась бы неизменной.
+
+[summary]
+**Переменные, объявленные на уровне всего скрипта, называют *"глобальными переменными"*.**
+
+Делайте глобальными только те переменные, которые действительно имеют общее значение для вашего проекта.
+
+Пусть каждая функция работает "в своей песочнице".
+[/summary]
+
+
+[warn header="Внимание: неявное объявление глобальных переменных!"]
+
+В старом стандарте JavaScript существовала возможность неявного объявления переменных присвоением значения.
+
+Например:
+
+```js
+//+ run
+function showMessage() {
+  message = 'Привет'; // без var!
+}
+
+showMessage();
+
+alert(message); // Привет
+```
+
+В коде выше переменная `message` нигде не объявлена, а сразу присваивается. Скорее всего, программист просто забыл поставить `var`.
+
+При `use strict` такой код привёл бы к ошибке, но без него переменная будет создана автоматически, причём в примере выше она создаётся не в функции, а на уровне всего скрипта.
+
+Избегайте этого.
+
+Здесь опасность даже не в автоматическом создании переменной, а в том, что глобальные переменные должны использоваться тогда, когда действительно нужны "общескриптовые" параметры.
+
+Забыли `var` в одном месте, потом в другом -- в результате одна функция неожиданно поменяла глобальную переменную, которую использует другая. Возможна ошибка и потеря времени на поиск проблемы.
+[/warn]
+
+В будущем, когда мы лучше познакомимся с основами JavaScript, в главе [](/closures), мы более детально рассмотрим внутренние механизмы работы переменных и функций.
+
+## Параметры 
+
+При вызове функции ей можно передать данные, которые та использует по своему усмотрению.
+
+Например, этот код выводит два сообщения:
+
+```js
+//+ run
+function showMessage(*!*from, text*/!*) { // параметры from, text
+  
+  from = "** " + from + " **"; // здесь может быть сложный код оформления
+
+  alert(from + ': ' + text);
+}
+
+*!*
+showMessage('Маша', 'Привет!');
+showMessage('Маша', 'Как дела?');
+*/!*
+```
+
+**Параметры копируются в локальные переменные функции**.
+
+Например, в коде ниже есть внешняя переменная `from`, значение которой при запуске функции копируется в параметр функции с тем же именем. Далее функция работает уже с параметром:
+
+```js
+//+ run
+function showMessage(from, text) { 
+*!*
+  from = '**' + from + '**';  // меняем локальную переменную (1)
+*/!*
+  alert(from + ': ' + text);
+}
+
+var from = "Маша";
+
+showMessage(from, "Привет"); 
+
+alert(from); // "Маша", без изменений, так как в строке (1) была изменена копия значения
+```
+
+Здесь есть небольшая тонкость при работе с объектами. Как мы помним, в переменной хранится ссылка на объект. Поэтому функция, получив параметр-объект, работает с самим этим объектом:
+
+Например, в коде ниже функция по ссылке меняет содержимое объекта `user`:
+
+```js
+//+ run
+function makeAdmin(user) {
+  user.isAdmin = true;
+}
+
+var user = { name: "Вася" };
+
+makeAdmin(user);
+alert(user.isAdmin); // true
+```
+
+## Стиль объявления функций
+
+В объявлении функции есть правила для расстановки пробелов. Они отмечены стрелочками:
+
+<img src="style.png">
+
+Конечно, вы можете ставить пробелы и по-другому, но эти правила используются в большинстве JavaScript-фреймворков.
+## Аргументы по умолчанию
+
+Функцию можно вызвать с любым количеством аргументов.
+
+Если параметр не передан при вызове -- он считается равным `undefined`.
+
+Например, функцию показа сообщения `showMessage(from, text)` можно вызвать с одним аргументом:
+
+```js
+showMessage("Маша");
+```
+
+При этом можно проверить, и если параметр не передан -- присвоить ему значение "по умолчанию":
+
+```js
+//+ run
+function showMessage(from, text) {
+*!*
+  if (text === undefined) {
+    text = 'текст не передан';
+  }
+*/!*
+
+  alert(from + ": " + text); 
+}
+
+showMessage("Маша", "Привет!"); // Маша: Привет!
+*!*
+showMessage("Маша"); // Маша: текст не передан
+*/!*
+```
+
+**При объявлении функции необязательные аргументы, как правило, располагают в конце списка.**
+
+Для указания значения "по умолчанию", то есть, такого, которое используется, если аргумент не указан, используется два способа:
+
+<ol>
+<li>Можно проверить, равен ли аргумент `undefined`, и если да -- то записать в него значение по умолчанию. Этот способ продемонстрирован в примере выше.</li>
+<li>Использовать оператор `||`:
+
+```js
+//+ run
+function showMessage(from, text) {
+  text = text || 'текст не передан'; 
+
+  ... 
+}
+```
+
+Второй способ считает, что аргумент отсутствует, если передана пустая строка, `0`, или вообще любое значение, которое в булевом виде является `false`. 
+</li>
+</ol>
+
+Если аргументов передано больше, чем надо, например `showMessage("Маша", "привет", 1, 2, 3)`, то ошибки не будет. Но, чтобы получить такие "лишние" аргументы, нужно будет прочитать их из специального объекта `arguments`, который мы рассмотрим в главе [](/arguments-pseudoarray).
+
+## Возврат значения 
+
+Функция может возвратить результат, который будет передан в вызвавший её код.
+
+Например, создадим функцию `calcD`, которая будет возвращать дискриминант квадратного уравнения по формуле <code>b<sup>2</sup> - 4ac</code>:
+
+```js
+//+ run
+function calcD(a, b, c) {
+   *!*return*/!* b*b - 4*a*c;
+}
+
+var test = calcD(-4, 2, 1);
+alert(test); // 20
+```
+
+**Для возврата значения используется директива `return`.** 
+
+Она может находиться в любом месте функции. Как только до нее доходит управление -- функция  завершается и значение передается обратно.
+
+Вызовов `return` может быть и несколько, например:
+
+```js
+//+ run
+function checkAge(age) {
+  if (age > 18) { 
+    return true;
+  } else {
+    return confirm('Родители разрешили?');
+  }
+}
+
+var age = prompt('Ваш возраст?');
+
+if (checkAge(age)) {
+  alert('Доступ разрешен'); 
+} else {
+  alert('В доступе отказано');
+}
+```
+
+Директива `return` может также использоваться без значения, чтобы прекратить выполнение и выйти из функции.
+
+Например:
+
+```js
+function showMovie(age) {
+  if (!checkAge(age)) {
+*!*
+    return;
+*/!*
+  }
+  
+  alert("Фильм не для всех"); // (*)  
+  // ...
+}
+```
+
+В коде выше, если сработал `if`, то строка `(*)` и весь код под ней никогда не выполнится, так как `return` завершает выполнение функции. 
+
+[smart header="Значение функции без `return` и с пустым `return`"]
+В случае, когда функция не вернула значение или `return` был без аргументов, считается что она вернула `undefined`:
+
+```js
+//+ run
+function doNothing() { /* пусто */ }
+
+alert( doNothing() ); // undefined
+```
+
+Обратите внимание, никакой ошибки нет. Просто возвращается `undefined`.
+
+Ещё пример, на этот раз с `return` без аргумента:
+
+```js
+//+ run
+function doNothing() { 
+  return;
+}
+
+alert( doNothing() === undefined ); // true
+```
+
+[/smart]
+
+## Выбор имени функции [#function-naming]
+
+Имя функции следует тем же правилам, что и имя переменной. Основное отличие -- оно должно быть глаголом, т.к. функция -- это действие.
+
+Как правило, используются глагольные префиксы, обозначающие общий характер действия, после которых следует уточнение.
+
+Функции, которые начинаются с `"show"` -- что-то показывают:
+
+```js
+showMessage(..)     // префикс show, "показать" сообщение
+```
+
+Функции, начинающиеся с `"get"` -- получают, и т.п.:
+
+```js
+getAge(..)          // get, "получает" возраст
+calcD(..)           // calc, "вычисляет" дискриминант
+createForm(..)      // create, "создает" форму
+checkPermission(..) // check, "проверяет" разрешение, возвращает true/false
+```
+
+Это очень удобно, поскольку взглянув на функцию -- мы уже примерно представляем, что она делает, даже если функцию написал совсем другой человек, а в отдельных случаях -- и какого вида значение она возвращает. 
+
+[smart header="Одна функция -- одно действие"]
+
+Функция должна делать только то, что явно подразумевается её названием. И это должно быть одно действие. 
+
+Если оно сложное и подразумевает поддействия -- может быть имеет смысл выделить их в отдельные функции? Зачастую это имеет смысл, чтобы лучше структурировать код.
+
+**...Но самое главное -- в функции не должно быть ничего, кроме самого действия и поддействий, неразрывно связанных с ним.**
+
+Например, функция проверки данных (скажем, `"validate"`) не должна показывать сообщение об ошибке. Её действие -- проверить.
+[/smart]
+
+
+[smart header="Сверхкороткие имена функций"]
+Имена функций, которые используются *очень часто*, иногда делают сверхкороткими. 
+
+Например, во фреймворке [jQuery](http://jquery.com) есть функция `$`, во фреймворке [Prototype](http://prototypejs.com) -- функция `$$`, а в библиотеке [LoDash](http://lodash.com/) очень активно используется функция с названием из одного символа подчеркивания `_`.
+[/smart]
+
+## Итого
+
+Объявление функции имеет вид:
+
+```js
+function имя(параметры, через, запятую) {
+  код функции
+}
+```
+
+<ul>
+<li>Передаваемые значения копируются в параметры функции и становятся локальными переменными.</li>
+<li>Параметры функции копируются в её локальные переменные.</li>
+<li>Можно объявить новые локальные переменые при помощи `var`.</li>
+<li>Значение возвращается оператором `return ...`.</li>
+<li>Вызов `return` тут же прекращает функцию.</li>
+<li>Если `return;` вызван без значения, или функция завершилась без `return`, то её результат равен `undefined`.</li>
+</ul>
+
+При обращении к необъявленной переменной функция будет искать внешнюю переменную с таким именем, но лучше, если функция использует только локальные переменные:
+
+<ul>
+<li>Это делает очевидным общий поток выполнения -- что передаётся в функцию и какой получаем результат.</li>
+<li>Это предотвращает возможные конфликты доступа, когда две функции, возможно написанные в разное время или разными людьми, неожиданно друг для друга меняют одну и ту же внешнюю переменную.</li> 
+</ul>
+</li>
+</ul>
+
+Именование функций:
+
+<ul>
+<li>Имя функции должно понятно и чётко отражать, что она делает. Увидев её вызов в коде, вы должны тут же понимать, что она делает.</li>
+<li>Функция -- это действие, поэтому для имён функций, как правило, используются глаголы.</li>
+</ul>
+
+Функции являются основными строительными блоками скриптов. Мы будем неоднократно возвращаться к ним и изучать все более и более глубоко.
+
+
diff --git a/1-js/2-first-steps/18-function-basics/style.png b/1-js/2-first-steps/18-function-basics/style.png
new file mode 100755
index 00000000..d0a49dcc
Binary files /dev/null and b/1-js/2-first-steps/18-function-basics/style.png differ
diff --git a/1-js/2-first-steps/19-recursion/1-sum-to/solution.md b/1-js/2-first-steps/19-recursion/1-sum-to/solution.md
new file mode 100644
index 00000000..4fba66fe
--- /dev/null
+++ b/1-js/2-first-steps/19-recursion/1-sum-to/solution.md
@@ -0,0 +1,45 @@
+Решение **с использованием цикла**:
+
+```js
+//+ run
+function sumTo(n) {
+  var sum = 0;
+  for(var i=1; i<=n; i++) {
+    sum += i;
+  }
+  return sum;
+}
+
+alert( sumTo(100) );
+```
+
+Решение через **рекурсию**:
+
+```js
+//+ run
+function sumTo(n) {
+  if (n == 1) return 1;
+  return n + sumTo(n-1);
+}
+
+alert( sumTo(100) );
+```
+
+Решение **по формуле**: `sumTo(n) = n*(n+1)/2`:
+
+```js
+//+ run
+function sumTo(n) {
+  return n*(n+1)/2;
+}
+
+alert( sumTo(100) );
+```
+
+P.S. Надо ли говорить, что решение по формуле работает быстрее всех? Это очевидно. Оно использует всего три операции для любого `n`, а цикл и рекурсия требуют как минимум `n` операций сложения.
+
+Вариант с циклом -- второй по скорости. Он быстрее рекурсии, так как операций сложения столько же, но нет дополнительных вычислительных затрат на организацию вложенных вызовов.
+
+Рекурсия в данном случае работает медленнее всех.
+
+P.P.S. Существует ограничение глубины вложенных вызовов, поэтому рекурсивный вызов `sumTo(100000)` выдаст ошибку.
\ No newline at end of file
diff --git a/1-js/2-first-steps/19-recursion/1-sum-to/task.md b/1-js/2-first-steps/19-recursion/1-sum-to/task.md
new file mode 100644
index 00000000..0d122262
--- /dev/null
+++ b/1-js/2-first-steps/19-recursion/1-sum-to/task.md
@@ -0,0 +1,33 @@
+# Вычислить сумму чисел до данного
+
+[importance 5]
+
+Напишите функцию `sumTo(n)`, которая для данного `n` вычисляет сумму чисел от 1 до `n`, например:
+
+```js
+sumTo(1) = 1
+sumTo(2) = 2 + 1 = 3
+sumTo(3) = 3 + 2 + 1 = 6
+sumTo(4) = 4 + 3 + 2 + 1 = 10
+...
+sumTo(100) = 100 + 99 + ... + 2 + 1 = 5050
+```
+
+Сделайте три варианта решения:
+<ol>
+<li>С использованием цикла.</li>
+<li>Через рекурсию, т.к. `sumTo(n) = n + sumTo(n-1)` для `n > 1`.</li>
+<li>С использованием формулы для суммы [арифметической прогрессии](http://ru.wikipedia.org/wiki/%D0%90%D1%80%D0%B8%D1%84%D0%BC%D0%B5%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B5%D1%81%D1%81%D0%B8%D1%8F).</li>
+</ol>
+
+Пример работы вашей функции:
+
+```js
+function sumTo(n) { /*... ваш код ... */ }
+
+alert( sumTo(100) ); // 5050
+```
+
+**Какой вариант решения самый быстрый? Самый медленный? Почему?**
+
+**Можно ли при помощи рекурсии посчитать `sumTo(100000)`? Если нет, то почему?**
diff --git a/1-js/2-first-steps/19-recursion/2-factorial/solution.md b/1-js/2-first-steps/19-recursion/2-factorial/solution.md
new file mode 100644
index 00000000..dcc08cc3
--- /dev/null
+++ b/1-js/2-first-steps/19-recursion/2-factorial/solution.md
@@ -0,0 +1,25 @@
+По свойствам факториала, как описано в условии, `n!` можно записать как `n * (n-1)!`.
+
+То есть, результат функции для `n` можно получить как `n`, умноженное на результат функции для `n-1`, и так далее до `1!`:
+
+```js
+//+ run
+function factorial(n) {
+  return (n!=1) ? n*factorial(n-1) : 1;
+}
+
+alert( factorial(5) ); // 120
+```
+
+Базисом рекурсии является значение `1`. А можно было бы сделать базисом и `0`. Тогда код станет чуть короче:
+
+```js
+//+ run
+function factorial(n) {
+  return n ? n*factorial(n-1) : 1;
+}
+
+alert( factorial(5) ); // 120
+```
+
+В этом случае вызов `factorial(1)` сведется к `1*factorial(0)`, будет дополнительный шаг рекурсии.
diff --git a/1-js/2-first-steps/19-recursion/2-factorial/task.md b/1-js/2-first-steps/19-recursion/2-factorial/task.md
new file mode 100644
index 00000000..47ef048a
--- /dev/null
+++ b/1-js/2-first-steps/19-recursion/2-factorial/task.md
@@ -0,0 +1,29 @@
+# Вычислить факториал
+
+[importance 4]
+
+*Факториа́л числа* -- это число, умноженное на "себя минус один", затем на "себя минус два" и так далее, до единицы. Обозначается `n!`
+
+Определение факториала можно записать как:
+
+```js
+n! = n*(n-1)*(n-2)*...*1
+```
+
+Примеры значений для разных `n`:
+
+```js
+1! = 1
+2! = 2*1 = 2
+3! = 3*2*1 = 6
+4! = 4*3*2*1 = 24
+5! = 5*4*3*2*1 = 120
+```
+
+Задача -- написать функцию `factorial(n)`, которая возвращает факториал числа `n!`, используя рекурсивный вызов.
+
+```js
+alert( factorial(5) ); // 120
+```
+
+Подсказка: обратите внимание, что `n!` можно записать как `n * (n-1)!`, например `3! = 3*2! = 3*2*1! = 6`
\ No newline at end of file
diff --git a/1-js/2-first-steps/19-recursion/3-fibonacci-numbers/solution.md b/1-js/2-first-steps/19-recursion/3-fibonacci-numbers/solution.md
new file mode 100644
index 00000000..4e6b2301
--- /dev/null
+++ b/1-js/2-first-steps/19-recursion/3-fibonacci-numbers/solution.md
@@ -0,0 +1,94 @@
+# Вычисление рекурсией (медленное)
+
+Решение по формуле, используя рекурсию:
+
+```js
+//+ run
+function fib(n) {
+   return n <= 1 ? n : fib(n-1) + fib(n-2); 
+}
+
+alert( fib(3) ); // 2
+alert( fib(7) ); // 13
+// fib(77); // не запускаем, подвесит браузер
+```
+
+При больших значениях `n` оно будет работать очень медленно. Например, `fib(77)` уже будет вычисляться очень долго.
+
+Это потому, что функция порождает обширное дерево вложенных вызовов. При этом ряд значений вычисляются много раз. Например, посмотрим на отрывок вычислений:
+
+```js
+...
+fib(5) = fib(4) + fib(3)
+fib(4) = fib(3) + fib(2)
+...
+```
+
+Здесь видно, что значение `fib(3)` нужно одновременно и для `fib(5)` и для `fib(4)`. В коде оно будет вычислено два раза, совершенно независимо.
+
+Можно это оптимизировать, запоминая уже вычисленные значения, получится гораздо быстрее. Альтернативный вариант -- вообще отказаться от рекурсии, а вместо этого в цикле начать с первых значений `1`, `2`, затем из них получить `fib(3)`, далее `fib(4)`, затем `fib(5)` и так далее, до нужного значения.
+
+Это решение будет наиболее эффективным. Попробуйте его написать.
+
+# Алгоритм вычисления в цикле
+
+Будем идти по формуле слева-направо:
+
+```js
+var a = 1, b = 1; // начальные значения
+var c = a + b; // 2
+
+/* переменные на начальном шаге:
+a  b  c
+1, 1, 2
+*/
+```
+
+Теперь следующий шаг, присвоим `a` и `b` текущие 2 числа и получим новое следующее в `c`:
+
+```js
+a = b, b = c; 
+c = a + b;
+
+/* стало так (еще число):
+   a  b  c
+1, 1, 2, 3
+*/
+```
+
+Следующий шаг даст нам еще одно число последовательности:
+
+```js
+a = b, b = c; 
+c = a + b;
+
+/* стало так (еще число):
+      a  b  c
+1, 1, 2, 3, 5
+*/
+```
+
+Повторять в цикле до тех пор, пока не получим нужное значение. Это гораздо быстрее, чем рекурсия, хотя бы потому что ни одно из чисел не вычисляется дважды.
+
+P.S. Этот подход к вычислению называется [динамическое программирование снизу-вверх](http://ru.wikipedia.org/wiki/%D0%94%D0%B8%D0%BD%D0%B0%D0%BC%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5_%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%D0%B5).
+
+# Код для вычисления в цикле
+
+```js
+//+ run
+function fib(n) {
+  var a = 1, b = 1;
+  for (var i = 3; i <= n; i++) {
+    var c = a + b;
+    a = b;
+    b = c;
+  }          
+  return b;
+}
+
+alert( fib(3) ); // 2
+alert( fib(7) ); // 13
+alert( fib(77)); // 5527939700884757
+```
+
+Цикл здесь начинается с `i=3`, так как первое и второе числа Фибоначчи заранее записаны в переменные `a=1`, `b=1`.
\ No newline at end of file
diff --git a/1-js/2-first-steps/19-recursion/3-fibonacci-numbers/task.md b/1-js/2-first-steps/19-recursion/3-fibonacci-numbers/task.md
new file mode 100644
index 00000000..a174a148
--- /dev/null
+++ b/1-js/2-first-steps/19-recursion/3-fibonacci-numbers/task.md
@@ -0,0 +1,23 @@
+# Числа Фибоначчи
+
+[importance 5]
+
+Последовательность [чисел Фибоначчи](http://ru.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%B0_%D0%A4%D0%B8%D0%B1%D0%BE%D0%BD%D0%B0%D1%87%D1%87%D0%B8) имеет формулу <code>F<sub>n</sub> = F<sub>n-1</sub> + F<sub>n-2</sub></code>. То есть, следующее число получается как сумма двух предыдущих.
+
+Первые два числа равны `1`, затем `2(1+1)`, затем `3(1+2)`, `5(2+3)` и так далее: `1, 1, 2, 3, 5, 8, 13, 21...`.
+
+Числа Фибоначчи тесно связаны с [золотым сечением](http://ru.wikipedia.org/wiki/%D0%97%D0%BE%D0%BB%D0%BE%D1%82%D0%BE%D0%B5_%D1%81%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D0%B5) и множеством природных явлений вокруг нас.
+
+Напишите функцию `fib(n)`, которая возвращает `n-е` число Фибоначчи. Пример работы:
+
+```js
+function fib(n) { /* ваш код */ }
+
+alert( fib(3) ); // 2
+alert( fib(7) ); // 13
+alert( fib(77)); // 5527939700884757
+```
+
+**Все запуски функций из примера выше должны срабатывать быстро.**
+
+ 
\ No newline at end of file
diff --git a/1-js/2-first-steps/19-recursion/article.md b/1-js/2-first-steps/19-recursion/article.md
new file mode 100644
index 00000000..7225e526
--- /dev/null
+++ b/1-js/2-first-steps/19-recursion/article.md
@@ -0,0 +1,273 @@
+# Рекурсия, стек
+
+В коде функции могут вызывать другие функции для выполнения подзадач. Частный случай подвызова -- когда функция вызывает сама себя. Это называется *рекурсией*.
+
+В этой главе мы рассмотрим, как рекурсия устроена изнутри, и как её можно использовать.
+[cut]
+
+
+## Реализация pow(x, n) через рекурсию
+
+Чтобы возвести `x` в натуральную степень `n` -- можно умножить его на себя `n` раз в цикле:
+
+```js
+function pow(x, n) {
+  var result = x;
+  for(var i=1; i<n; i++) {
+    result *= x;
+  }
+
+  return result;
+}
+```
+
+А можно поступить проще. 
+
+Ведь <code>x<sup>n</sup> = x * x<sup>n-1</sup></code>, т.е. можно вынести один `x` из-под степени. Иначе говоря, значение функции `pow(x,n)` получается из `pow(x, n-1)` умножением на `x`. 
+
+Этот процесс можно продолжить. Например, вычислим `pow(2, 4)`:
+
+```js
+pow(2, 4) = 2 * pow(2, 3) = 2 * 2 * pow(2, 2) = 2 * 2 * 2 * pow(2, 1) = 2 * 2 * 2 * 2;
+```
+
+Процесс перехода от `n` к `n-1` останавливается на `n==1`, так как очевидно, что `pow(x,1) == x`.
+
+Код для такого вычисления:
+
+```js
+//+ run
+function pow(x, n) {
+  if (n != 1) { // пока n!=1 сводить вычисление pow(..n) к pow(..n-1)
+    return x * pow(x, n-1); 
+  } else { 
+    return x; 
+  }
+}
+
+alert( pow(2, 3) ); // 8
+```
+
+Говорят, что "функция `pow` *рекурсивно вызывает сама себя*" при `n != 1`. 
+
+Значение, на котором рекурсия заканчивается называют *базисом рекурсии*. В примере выше базисом является `1`.
+
+Общее количество вложенных вызовов называют *глубиной рекурсии*. В случае со степенью, всего будет `n` вызовов. Максимальная глубина рекурсии ограничена и составляет около `10000`, но это число зависит от конкретного интерпретатора JavaScript и может быть в 10 раз меньше.
+
+**Рекурсию используют, когда вычисление функции можно свести к её более простому вызову, а его -- еще к более простому, и так далее, пока значение не станет очевидно.**
+
+## Контекст выполнения, стек
+
+Теперь мы посмотрим, как работают рекурсивные вызовы. Для этого мы рассмотрим, как вообще работают функции, что происходит при вызове.
+
+**У каждого вызова функции есть свой "контекст выполнения" (execution context).** 
+
+Контекст выполнения -- это служебная информация, которая соответствует текущему запуску функции. Она включает в себя локальные переменные функции.
+
+Например, для вызова:
+
+```js
+//+ run
+function pow(x, n) {
+  if (n != 1) { // пока n!=1 сводить вычисление pow(..n) к pow(..n-1)
+    return x * pow(x, n-1); 
+  } else { 
+    return x; 
+  }
+}
+
+*!*
+alert( pow(2, 3) );  // (*)
+*/!*
+```
+
+При запуске функции `pow` в строке `(*)` будет создан контекст выполнения, который будет хранить переменные `x = 2, n = 3`. Мы схематично обозначим его так:
+
+<ul class="function-execution-context">
+  <li>Контекст: { x: 2, n: 3 }</li>
+</ul>
+
+Далее функция `pow` начинает выполняться. Вычисляется выражение `n != 1` -- оно равно `true`, ведь в текущем контексте `n=3`. Поэтому задействуется первая ветвь `if` :
+
+```js
+  if (n != 1) { // пока n!=1 сводить вычисление pow(..n) к pow(..n-1)
+*!*
+    return x * pow(x, n-1); 
+*/!*
+  } else { 
+    return x; 
+  }
+```
+
+Чтобы вычислить выражение `x * pow(x, n-1)`, требуется произвести запуск `pow` с новыми аргументами.
+
+**При любом вложенном вызове JavaScript запоминает место, где он остановился в текущей функции в специальной внутренней структуре данных -- "стеке контекстов".**
+
+Это как если бы мы куда-то ехали, но очень захотелось поесть. Можно остановиться у кафе, оставить машину, отойти, а потом, через некоторое время, вернуться к ней и продолжить дорогу.
+
+Так и здесь -- мы запомним, где остановились в этой функции, пойдём выполним вложенный вызов, затем вернёмся и продолжим дорогу.
+
+**После того, как текущий контекст выполнения сохранён в стеке контекстов, JavaScript приступает к выполнению вложенного вызова.**
+
+В данном случае вызывается та же `pow`, однако, это абсолютно неважно. Для любых функций процесс одинаков.
+
+**Создаётся новый контекст выполнения, и управление переходит в подвызов, а когда он завершён -- старый контекст достаётся из стека и выполнение внешней функции возобновляется.**
+
+## Разбор примера
+
+Разберём происходящее более подробно, начиная с вызова `(*)`:
+
+```js
+//+ run
+function pow(x, n) {
+  if (n != 1) { // пока n!=1 сводить вычисление pow(..n) к pow(..n-1)
+    return x * pow(x, n-1); 
+  } else { 
+    return x; 
+  }
+}
+
+*!*
+alert( pow(2, 3) );  // (*)
+*/!*
+```
+
+<dl>
+<dt>`pow(2, 3)`</dt>
+<dd>Запускается функция `pow`, с аргументами `x=2`, `n=3`. Эти переменные хранятся в контексте выполнения, схематично изображённом ниже:
+
+<ul class="function-execution-context">
+  <li>Контекст: { x: 2, n: 3 }</li>
+</ul>
+Выполнение в этом контексте продолжается, пока не встретит вложенный вызов в строке 3.
+</dd>
+<dt>`pow(2, 2)`</dt>
+<dd>В строке `3` происходит вложенный вызов `pow` с аргументами `x=2`, `n=2`. Для этой функции создаётся новый текущий контекст (выделен красным), а предыдущий сохраняется в "стеке":
+
+<ul class="function-execution-context">
+  <li>Контекст: { x: 2, n: 3 }</li>
+  <li>Контекст: { x: 2, n: 2 }</li>
+</ul>
+
+</dd>
+<dt>`pow(2, 1)`</dt>
+<dd>Опять вложенный вызов в строке `3`, на этот раз -- с аргументами `x=2`, `n=1`. Создаётся новый текущий контекст, предыдущий добавляется в стек:
+<ul class="function-execution-context">
+  <li>Контекст: { x: 2, n: 3 }</li>
+  <li>Контекст: { x: 2, n: 2 }</li>
+  <li>Контекст: { x: 2, n: 1 }</li>
+</ul>
+</dd>
+<dt>Выход из `pow(2, 1)`.</dt>
+<dd>При выполнении `pow(2, 1)`, в отличие от предыдущих запусков, выражение `n != 1` будет равно `false`, поэтому  сработает вторая ветка `if..else`:
+
+```js
+function pow(x, n) {
+  if (n != 1) { 
+    return x * pow(x, n-1); 
+  } else { 
+*!*
+    return x;  // первая степень числа равна самому числу
+*/!*
+  }
+}
+```
+
+Здесь вложенных вызовов нет, так что функция заканчивает свою работу, возвращая `2`. Текущий контекст больше не нужен и удаляется из памяти, из стека восстанавливается предыдущий:
+
+<ul class="function-execution-context">
+  <li>Контекст: { x: 2, n: 3 }</li>
+  <li>Контекст: { x: 2, n: 2 }</li>
+</ul>
+Возобновляется обработка внешнего вызова `pow(2, 2)`.
+</dd>
+<dt>Выход из `pow(2, 2)`.</dt>
+<dd>...И теперь уже `pow(2, 2)` может закончить свою работу, вернув `4`. Восстанавливается контекст предыдущего вызова:
+<ul class="function-execution-context">
+  <li>Контекст: { x: 2, n: 3 }</li>
+</ul>
+Возобновляется обработка внешнего вызова `pow(2, 3)`.
+</dd>
+
+<dt>Выход из `pow(2, 3)`.</dt>
+<dd>Самый внешний вызов заканчивает свою работу, его результат: `pow(2, 3) = 8`.</dd>
+</dl>
+
+Глубина рекурсии в данном случае составила: **3**. 
+
+Как видно из иллюстраций выше, глубина рекурсии равна максимальному числу контекстов, одновременно хранимых в стеке.
+
+[smart]
+В самом конце, как и в самом начале, выполнение попадает во внешний код, который находится вне любых функций. 
+
+Контекст, который соответствует самому внешнему коду, называют *"глобальный контекст"*. Естественно, он является начальной и конечной точкой любых вложенных подвызовов. 
+[/smart]
+
+Обратим внимание на требования к памяти. Рекурсия приводит к хранению всех данных для неоконченных внешних вызовов в стеке, в данном случае это приводит к тому, что возведение в степень `n` хранит в памяти `n` различных контекстов.
+
+Реализация степени через цикл гораздо более экономна:
+
+```js
+function pow(x, n) {
+  var result = x;
+  for(var i=1; i<n; i++) {
+    result *= x;
+  }
+  return result;
+}
+```
+
+У такой функции `pow` будет один контекст, в котором будут последовательно меняться значения `i` и `result`.
+
+**Любая рекурсия может быть переделана в цикл. Как правило, вариант с циклом будет эффективнее.**
+
+...Но зачем тогда нужна рекурсия? Да просто затем, что рекурсивный код может быть гораздо проще и понятнее! 
+
+Переделка в цикл может быть нетривиальной, особенно когда в функции, в зависимости от условий, используются разные рекурсивные подвызовы.
+
+В программировании мы в первую очередь стремимся сделать сложное простым, а повышенная производительность нужна... Лишь там, где она действительно нужна. Поэтому красивое рекурсивное решение во многих случаях лучше.
+
+Недостатки и преимущества рекурсии:
+
+[compare]
+-Требования к памяти.
+-Ограничена максимальная глубина стека.
++Краткость и простота кода.
+[/compare]
+
+
+## Итого
+
+Рекурсия -- это когда функция вызывает сама себя, с другими аргументами.
+
+Существуют много областей применения рекурсивных вызовов. Здесь мы посмотрели на один из них -- решение задачи путём сведения её к более простой (с меньшими аргументами), но также рекурсия используется для работы с "естественно рекурсивными" структурами данных, такими как HTML-документы, для "глубокого" копирования сложных объектов. 
+
+Есть и другие применения, с которыми мы встретимся по мере изучения JavaScript.
+
+Здесь мы постарались рассмотреть происходящее достаточно подробно, однако, если пожелаете, допустимо временно забежать вперёд и открыть главу [](/debugging-chrome), с тем чтобы при помощи отладчика построчно пробежаться по коду и посмотреть стек.
+
+
+
+
+[head]
+<style>
+.function-execution-context {
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+}
+
+.function-execution-context li {
+  float: left;
+  clear: both;
+  border: 1px solid black;
+  font-family: "PT Mono", monospace;
+  padding: 3px 5px;
+}
+
+
+.function-execution-context li:last-child {
+  color: red;
+}
+</style>
+[/head]
\ No newline at end of file
diff --git a/1-js/2-first-steps/2-structure/article.md b/1-js/2-first-steps/2-structure/article.md
new file mode 100644
index 00000000..2dc6d34e
--- /dev/null
+++ b/1-js/2-first-steps/2-structure/article.md
@@ -0,0 +1,113 @@
+# Структура кода
+
+В этой главе мы рассмотрим общую структуру кода, команды и их разделение.
+[cut]
+## Команды
+
+Например, можно вместо одного вызова `alert` сделать два:
+
+```js
+//+ run
+alert('Привет'); alert('Мир');
+```
+
+Как правило, новая команда занимает отдельную строку -- так код лучше читается:
+
+```js
+//+ run
+alert('Привет'); 
+alert('Мир');
+```
+
+Точку с запятой *во многих случаях* можно не ставить, если есть переход на новую строку. 
+
+Так тоже будет работать:
+
+```js
+//+ run
+alert('Привет') 
+alert('Мир')
+```
+
+В этом случае JavaScript интерпретирует переход на новую строчку как разделитель команд и автоматически вставляет "виртуальную" точку с запятой между ними. 
+
+**Однако, важно то, что "во многих случаях" не означает "всегда"!**
+
+Например, запустите этот код:
+
+```js
+//+ run
+alert(3 +
+1
++ 2);
+```
+
+Выведет 6.
+
+То есть, точка с запятой не ставится. Почему? Интуитивно понятно, что здесь дело в "незавершённом выражении", конца которого JavaScript ждёт с первой строки и поэтому не ставит точку с запятой. И здесь это, пожалуй, хорошо и приятно.
+
+**Но в некоторых важных ситуациях JavaScript "забывает" вставить точку с запятой там, где она нужна.**
+
+Таких ситуаций не так много, но они всё же есть, и ошибки, которые при этом появляются, достаточно сложно обнаруживать и исправлять. 
+
+**Поэтому рекомендуется точки с запятой ставить. Сейчас это, фактически, стандарт, которому следуют все большие проекты.**
+
+
+## Комментарии
+
+Со временем программа становится большой и сложной. Появляется необходимость добавить *комментарии*, которые объясняют, что происходит и почему.
+
+Комментарии могут находиться в любом месте программы и никак не влияют на ее выполнение. Интерпретатор JavaScript попросту игнорирует их.
+
+*Однострочные комментарии* начинаются с двойного слэша `//`. Текст считается комментарием до конца строки:
+
+```js
+//+ run
+// Команда ниже говорит "Привет" 
+alert('Привет');
+
+alert('Мир'); // Второе сообщение выводим отдельно
+```
+
+*Многострочные комментарии* начинаются слешем-звездочкой <code>"/&#42;"</code> и заканчиваются звездочкой-слэшем <code>"&#42;/"</code>, вот так:
+
+```js
+//+ run
+/* Пример с двумя сообщениями.
+Это - многострочный комментарий.
+*/
+alert('Привет');
+alert('Мир');
+```
+
+Все содержимое комментария игнорируется. Если поместить код внутрь <code>/&#42; ... &#42;/</code> или после `//` -- он не выполнится.
+
+```js
+//+ run
+/* Закомментировали код
+alert('Привет');
+*/
+alert('Мир');
+```
+
+[smart header="Используйте горячие клавиши!"]
+В большинстве редакторов комментарий можно поставить горячей клавишей, обычно это <code class="key">Ctrl</code> + <code class="key">/</code> для однострочных и что-то вроде <code class="key">Ctrl</code> + <code class="key">Shift</code> + <code class="key">/</code> -- для многострочных комментариев (нужно выделить блок и нажать сочетание клавиш). Детали смотрите в руководстве по редактору.
+[/smart]
+ 
+[warn header="Вложенные комментарии не поддерживаются!"]
+В этом коде будет ошибка:
+
+```js
+//+ run
+/* 
+  /* вложенный комментарий ?!? */
+*/
+alert('Мир');
+```
+
+[/warn]
+
+
+Не бойтесь комментариев. Чем больше кода в проекте -- тем они важнее. Что же касается увеличения размера кода -- это не страшно, т.к. существуют инструменты сжатия JavaScript, которые при публикации кода легко их удалят.
+
+На следующих занятиях мы поговорим о переменных, блоках и других структурных элементах программы на JavaScript.
\ No newline at end of file
diff --git a/1-js/2-first-steps/20-function-declaration-expression/article.md b/1-js/2-first-steps/20-function-declaration-expression/article.md
new file mode 100644
index 00000000..29c50197
--- /dev/null
+++ b/1-js/2-first-steps/20-function-declaration-expression/article.md
@@ -0,0 +1,364 @@
+# Функциональные выражения
+
+В JavaScript функция является значением, таким же как строка или число. 
+
+## Функция -- это значение
+
+Как и любое значение, объявленную функцию можно вывести, вот так:
+
+```js
+//+ run
+function sayHi() { 
+  alert( "Привет" ); 
+}
+
+*!*
+alert( sayHi ); // выведет код функции
+*/!*
+```
+
+Обратим внимание на то, что в последней строке после `sayHi` нет скобок. То есть, функция не вызывается, а просто выводится на экран.
+
+**Функцию можно скопировать в другую переменную:**
+
+```js
+//+ run
+function sayHi() {   // (1)
+  alert( "Привет" ); 
+}
+
+var func = sayHi;    // (2)
+func(); // Привет    // (3)
+
+sayHi = null;
+sayHi();             // ошибка (4)
+```
+
+<ol>
+<li>Объявление `(1)` как бы говорит интерпретатору "создай функцию и помести её в переменную `sayHi`</li>
+<li>В строке `(2)` мы копируем функцию в новую переменную `func`. Ещё раз обратите внимание: после `sayHi` нет скобок. Если бы они были, то вызов `var func = sayHi()` записал бы в `func` *результат* работы `sayHi()` (кстати, чему он равен? правильно, `undefined`, ведь внутри `sayHi` нет `return`).</li>
+<li>На момент `(3)` функцию можно вызывать и как `sayHi()` и как `func()`</li>
+<li>...Однако, в любой момент значение переменной можно поменять. При этом, если оно не функция, то вызов `(4)` выдаст ошибку.</li>
+</ol>
+
+Обычные значения, такие как числа или строки, представляют собой *данные*. А функцию можно воспринимать как *действие*. Это действие, как правило, хранится в переменной, но его можно скопировать или переместить из неё. 
+
+
+## Объявление Function Expression [#function-expression]
+
+Функцию можно создать и присвоить переменной в любом месте кода.
+
+Для этого используется объявление "Function Expression" (функциональное выражение), которое выглядит так:
+
+```js
+//+ run
+var f = function(параметры) {
+   // тело функции
+};
+```
+
+Например:
+
+```js
+//+ run
+var sayHi = function(person) {
+    alert("Привет, " + person);
+};
+
+sayHi('Вася');
+```
+
+## Сравнение с Function Declaration
+
+"Классическое" объявление функции, о котором мы говорили до этого, вида `function имя(параметры) {...}`, называется в спецификации языка "Function Declaration". 
+
+<ul>
+<li>**Function Declaration** -- функция, объявленная в основном потоке кода.</li>
+<li>**Function Expression** -- объявление функции в контексте какого-либо выражения, например присваивания.</li>
+</ul>
+
+Несмотря на немного разный вид, по сути две эти записи делают одно и то же:
+
+```js
+// Function Declaration
+function sum(a, b) {
+  return a + b;
+}
+ 
+// Function Expression
+var sum = function(a, b) {
+  return a + b;
+}
+```
+
+Оба этих объявления говорят интерпретатору: "объяви переменную `sum`, создай функцию с указанными параметрами и кодом и сохрани её в `sum`".
+
+**При этом название переменной, в которую записана функция, обычно называют "именем функции". Говорят: "функция sum". Но при этом имя к функции никак не привязано.**
+
+Это всего лишь имя переменной, в которой *в данный момент* находится функция. 
+
+Функция может быть в процессе работы скрипта скопирована в другую переменную, а из этой удалена, передана в другое место кода, и так далее, как мы видели выше.
+
+**Основное отличие между ними: функции, объявленные как Function Declaration, создаются интерпретатором *до выполнения кода*.**
+
+Поэтому их можно вызвать *до* объявления, например:
+
+```js
+//+ run
+*!*
+sayHi("Вася"); // Привет, Вася
+*/!*
+
+function sayHi(name) {
+  alert("Привет, " + name);
+}
+```
+
+А если бы это было объявление Function Expression, то такой вызов бы не сработал:
+
+```js
+//+ run
+*!*
+sayHi("Вася");  // ошибка!
+*/!*
+
+var sayHi = function(name) {
+  alert("Привет, " + name);
+}
+```
+
+Это из-за того, что JavaScript перед запуском кода ищет в нём Function Declaration (они начинаются в основном потоке с `function`) и обрабатывает их. 
+
+А Function Expression создаются при выполнении выражения, в котором созданы, в данном случае -- функция будет создана при операции присваивания `sayHi = ...`.
+
+**Как правило, возможность Function Declaration вызвать функцию до объявления -- это удобно, так как даёт больше свободы в том, как  организовать свой код.** 
+
+
+### Условное объявление функции [#bad-conditional-declaration]
+
+В некоторых случаях "дополнительное удобство" Function Declaration может сослужить плохую службу.
+
+Например, попробуем, в зависимости от условия, объявить функцию `sayHi` по-разному:
+
+```js
+//+ run
+var age = 20;
+
+if (age >= 18) {
+  function sayHi() { alert('Прошу вас!');  } 
+} else {
+  function sayHi() { alert('До 18 нельзя'); } 
+}
+
+sayHi();
+```
+
+[smart header="Зачем условное объявление?"]
+Конечно, можно произвести проверку условия внутри функцию.
+
+Но вынос проверки вовне даёт очевидный выигрыш в производительности в том случае, когда проверку достаточно произвести только один раз, и её результат никогда не изменится.
+
+Например, мы можем проверить, поддерживает ли браузер определённые современные возможности, и если да -- функция будет использовать их, а если нет -- реализовать её другим способом. При этом проверка будет осуществляться один раз, на этапе объявления функции, а не при каждом запуске функции. 
+[/smart]
+
+При запуске примера выше в любом браузере, кроме Firefox, мы увидим, что условное объявление не работает.  Срабатывает `"До 18 нельзя"`, несмотря на то, что `age = 20`. 
+
+В чём дело? Чтобы ответить на этот вопрос -- вспомним, как работают функции. 
+
+<ol>
+<li>Function Declaration обрабатываются перед запуском кода. Интерпретатор сканирует код и создает из таких объявлений функции. При этом второе объявление перезапишет первое. 
+</li> 
+<li>Дальше, во время выполнения, объявления Function Declaration игнорируются (они уже были обработаны). Это как если бы код был таким:
+
+```js
+function sayHi() {  alert('Прошу вас!');  } 
+function sayHi() {  alert('До 18 нельзя'); } 
+
+var age = 20;
+
+if (age >= 18) {
+   /* объявление было обработано ранее */
+} else {
+  /* объявление было обработано ранее */
+}
+
+*!*
+sayHi();  // "До 18 нельзя", сработает всегда вторая функция
+*/!*
+```
+
+...То есть, от `if` здесь уже ничего не зависит. По-разному объявить функцию, в зависимости от условия, не получилось.
+</li>
+</ol>
+
+Такое поведение соответствует современному стандарту. На момент написания этого раздела ему следуют все браузеры, кроме, как ни странно, Firefox. 
+
+**Вывод: для условного объявления функций Function Declaration не годится.**
+
+А что, если использовать Function Expression?
+
+```js
+//+ run
+var age = prompt('Сколько вам лет?');
+
+var sayHi;
+
+if (age >= 18) {
+  sayHi = function() { alert('Прошу Вас!'); }
+} else {
+  sayHi = function() { alert('До 18 нельзя'); }
+}
+
+sayHi();
+```
+
+Или даже так:
+
+```js
+//+ run
+var age = prompt('Сколько вам лет?');
+
+var sayHi = (age >= 18) ?
+  function() { alert('Прошу Вас!');  } : 
+  function() { alert('До 18 нельзя'); };
+
+sayHi();
+```
+
+Оба этих варианта работают правильно, поскольку, в зависимости от условия, создаётся именно та функция, которая нужна.
+
+### Анонимные функции
+
+Взглянем ещё на один пример.
+
+Функция `test(f, yes, no)` получает три функции, вызывает первую и, в зависимости от её результата, вызывает вторую или третью:
+
+```js
+//+ run
+*!*
+function test(f, yes, no) {
+  if (f()) yes()
+  else no();
+}
+*/!*
+
+// вспомогательные функции
+function f1() {
+  return confirm("OK?");
+}
+
+function f2() {
+  alert("Вы согласились.");
+}
+
+function f3() {
+  alert("Вы отменили выполнение.");
+}
+
+// использование
+test(f1, f2, f3);
+```
+
+В этом примере для нас, наверно, нет ничего нового. Подумаешь, объявили функции `f1`, `f2`, `f3`, передали их в качестве параметров другой функции (ведь функция -- обычное значение), вызвали те, которые нужны...
+
+А вот то же самое, но более коротко:
+
+```js
+//+ run
+function test(f, yes, no) {
+  if (f()) yes()
+  else no();
+}
+
+*!*
+test(
+  function() { return confirm("OK?"); }, 
+  function() { alert("Вы согласились."); },
+  function() { alert("Вы отменили выполнение."); }
+);
+*/!*
+```
+
+Здесь функции объявлены прямо внутри вызова `test(...)`, даже без присвоения им имени. 
+
+**Функциональное выражение, которое не записывается в переменную, называют [анонимной функцией](http://ru.wikipedia.org/wiki/%D0%90%D0%BD%D0%BE%D0%BD%D0%B8%D0%BC%D0%BD%D0%B0%D1%8F_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8F).**
+
+Действительно, зачем нам записывать функцию в переменную, если мы не собираемся вызывать её ещё раз? Можно просто объявить непосредственно там, где функция нужна.
+
+Такого рода код возникает естественно, он соответствует "духу" JavaScript.
+
+## new Function
+
+Существует ещё один способ создания функции, который используется очень редко. 
+
+Он выглядит так:
+
+```js
+//+ run
+var sum = new Function('a,b', ' return a+b; ');
+
+var result = sum(1,2);
+alert(result); // 3
+```
+
+То есть, функция создаётся вызовом `new Function(params, code)`:
+<dl>
+<dt>`params`</dt>
+<dd>Параметры функции через запятую в виде строки.</dd>
+<dt>`code`</dt>
+<dd>Код функции в виде строки.</dd>
+</dl>
+
+Этот способ позволяет конструировать строку с кодом функции динамически, во время выполнения программы. Это, скорее, исключение, чем правило, но также бывает востребовано. Пример использования -- динамическая компиляция шаблонов на JavaScript, мы встретимся с ней позже, при работе с интерфейсами.
+
+## Итого
+
+Функции в JavaScript являются значениями. Их можно присваивать, передавать, создавать в любом месте кода.
+
+<ul>
+<li>Если функция объявлена в *основном потоке кода*, то это Function Declaration.</li>
+<li>Если функция создана как *часть выражения*, то это Function Expression.</li>
+</ul>
+
+Между этими двумя основными способами создания функций есть следующие различия:
+
+<table class="table-bordered">
+<tr>
+<th></th>
+<th>Function Declaration</th>
+<th>Function Expression</th>
+</tr>
+<tr>
+<td>Время создания</td>
+<td>До выполнения первой строчки кода.</td>
+<td>Когда управление достигает строки с функцией.</td>
+</tr>
+<tr>
+<td>Можно вызвать до объявления </td>
+<td>`Да` (т.к. создаётся заранее)</td>
+<td>`Нет`</td>
+</tr>
+<tr>
+<td>Условное объявление в `if`</td>
+<td>`Не работает`</td>
+<td>`Работает`</td>
+</tr>
+</table>
+
+Иногда в коде начинающих разработчиков можно увидеть много Function Expression. Почему-то, видимо, не очень понимая происходящее, функции решают создавать как `var func = function()`, но в большинстве случаев обычное объявление функции -- лучше.
+
+**Если нет явной причины использовать Function Expression -- предпочитайте Function Declaration.**
+
+Сравните по читаемости:
+
+```js
+// Function Expression 
+var f = function() { ... }
+
+// Function Declaration 
+function f() { ... }
+```
+
+Function Declaration короче и лучше читается. Дополнительный бонус -- такие функции можно вызывать до того, как они объявлены.
+
+Используйте Function Expression только там, где это действительно нужно и удобно. 
diff --git a/1-js/2-first-steps/21-named-function-expression/1-nfe-check/solution.md b/1-js/2-first-steps/21-named-function-expression/1-nfe-check/solution.md
new file mode 100644
index 00000000..f8cb2fb5
--- /dev/null
+++ b/1-js/2-first-steps/21-named-function-expression/1-nfe-check/solution.md
@@ -0,0 +1,21 @@
+**Первый код выведет `function ...`, второй -- ошибку во всех браузерах, кроме IE8-.**
+
+```js
+//+ run untrusted
+// обычное объявление функции (Function Declaration)
+function g() { return 1; }; 
+
+alert(g); // функция
+```
+
+Во втором коде скобки есть, значит функция внутри является не `Function Declaration`, а частью выражения, то есть `Named Function Expression`. Его имя видно только внутри, снаружи переменная `g` не определена.
+
+```js
+//+ run untrusted
+// Named Function Expression!
+(function g() { return 1; }); 
+
+alert(g);  // Ошибка!
+```
+
+Все браузеры, кроме IE8-, поддерживают это ограничение видимости и выведут ошибку, `"undefined variable"`.
\ No newline at end of file
diff --git a/1-js/2-first-steps/21-named-function-expression/1-nfe-check/task.md b/1-js/2-first-steps/21-named-function-expression/1-nfe-check/task.md
new file mode 100644
index 00000000..1e7deaa8
--- /dev/null
+++ b/1-js/2-first-steps/21-named-function-expression/1-nfe-check/task.md
@@ -0,0 +1,20 @@
+# Проверка на NFE
+
+[importance 5]
+
+Каков будет результат выполнения кода?
+
+```js
+function g() { return 1; }
+
+alert(g);
+```
+
+А такого? Будет ли разница, если да -- почему?
+
+```js
+(function g() { return 1; });
+
+alert(g);
+```
+
diff --git a/1-js/2-first-steps/21-named-function-expression/article.md b/1-js/2-first-steps/21-named-function-expression/article.md
new file mode 100644
index 00000000..241c5bef
--- /dev/null
+++ b/1-js/2-first-steps/21-named-function-expression/article.md
@@ -0,0 +1,136 @@
+# Именованные функциональные выражения
+
+Обычно то, что называют "именем функции", на самом деле -- всего лишь имя переменной, в которую присвоена функция. К самой функции это "имя" никак не привязано. 
+    
+Однако, есть в JavaScript способ указать имя, действительно привязанное к функции. Оно называется "Named Function Expression" (сокращённо NFE) или, по-русски, *"именованное функциональное выражение"*.
+[cut]
+
+
+## Named Function Expression [#functions-nfe]
+
+Простейший пример NFE выглядит так:
+
+```js
+var f = function *!*sayHi*/!*(...) { /* тело функции */ };
+```
+
+Проще говоря, NFE -- это `Function Expression` с дополнительным именем (в примере выше `sayHi`).
+
+Что же это за имя, которое идёт в дополнение к переменной `f`, и зачем оно?
+
+**Имя функционального выражения (`sayHi`) имеет особый смысл. Оно доступно только изнутри самой функции.** 
+
+**Это ограничение видимости входит в стандарт JavaScript и поддерживается всеми браузерами, кроме IE8-.**
+
+Например:
+
+```js
+//+ run
+var f = function sayHi(name) {
+  alert(sayHi); // изнутри функции - видно (выведет код функции) 
+};
+
+alert(sayHi); // снаружи - не видно (ошибка: undefined variable 'sayHi')
+```
+
+**Кроме того, имя NFE нельзя перезаписать:**
+
+```js
+//+ run
+var test = function sayHi(name) {
+*!*
+  sayHi = "тест"; // перезапись
+*/!*
+  alert(sayHi); // function... (перезапись не удалась)
+};
+
+test();
+```
+
+В режиме `use strict` код выше выдал бы ошибку.
+
+**Как правило, имя NFE используется для единственной цели -- позволить изнутри функции вызвать саму себя.**
+
+[smart header="Устаревшее специальное значение `arguments.callee`"]
+Если вы работали с JavaScript, то, возможно, знаете, что для этой цели также служило специальное значение `arguments.callee`. 
+
+Если это название вам ни о чём не говорит -- всё в порядке, читайте дальше, мы обязательно обсудим его [в отдельной главе](#arguments-callee).
+
+Если же вы в курсе, то стоит иметь в виду, что оно официально исключено из современного стандарта. А NFE -- это наше настоящее. 
+[/smart]
+
+## Пример использования 
+
+NFE используется в первую очередь в тех ситуациях, когда функцию нужно передавать в другое место кода или перемещать из одной переменной в другую. 
+
+**Внутреннее имя позволяет функции надёжно обращаться к самой себе, где бы она ни находилась.**
+
+Вспомним, к примеру, функцию-факториал из задачи [](/task/factorial):
+
+```js
+//+ run
+function f(n) { 
+  return n ? n*f(n-1) : 1;
+};
+
+alert( f(5) ); // 120
+```
+
+Попробуем перенести её в другую переменную `g`:
+
+```js
+//+ run
+function f(n) { 
+  return n ? n*f(n-1) : 1;
+};
+
+*!*
+var g = f;
+f = null;
+*/!*
+
+alert( g(5) ); // запуск функции с новым именем - ошибка при выполнении!
+```
+
+Ошибка возникла потому что функция из своего кода обращается к своему старому имени `f`. А этой функции уже нет, `f = null`.
+
+Для того, чтобы функция всегда надёжно работала, объявим её как Named Function Expression:
+
+```js
+//+ run
+var f = function *!*factorial*/!*(n) { 
+  return n ? n**!*factorial*/!*(n-1) : 1;
+};
+ 
+var g = f;  // скопировали ссылку на функцию-факториал в g
+f = null;
+
+*!*
+alert( g(5) ); // 120, работает!
+*/!*
+```
+
+[warn header="В браузере IE8- создаются две функции"]
+
+Как мы говорили выше, в браузере IE до 9 версии имя NFE видно везде, что является ошибкой с точки зрения стандарта.
+
+...Но на самом деле ситуация еще забавнее. Старый IE создаёт в таких случаях целых две функции: одна записывается в переменную `f`, а вторая -- в переменную `factorial`.
+
+Например:
+
+```js
+//+ run
+var f = function factorial(n) { /*...*/ };
+
+// в IE8- false
+// в остальных браузерах ошибка, т.к. имя factorial не видно
+alert(f === factorial);
+```
+
+Все остальные браузеры полностью поддерживают именованные функциональные выражения.
+[/warn]
+
+## Итого
+
+Если функция задана как Function Expression, её можно дать имя. Оно будет доступно только внутри функции (кроме IE8-) и предназначено для надёжного рекурсивного вызова функции, даже если она записана в другую переменную.
+
diff --git a/1-js/2-first-steps/22-javascript-specials/article.md b/1-js/2-first-steps/22-javascript-specials/article.md
new file mode 100644
index 00000000..859e24da
--- /dev/null
+++ b/1-js/2-first-steps/22-javascript-specials/article.md
@@ -0,0 +1,418 @@
+# Всё вместе: особенности JavaScript
+
+В этой главе приводятся основные особенности JavaScript, на уровне базовых конструкций, типов, синтаксиса.
+
+Она будет особенно полезна, если ранее вы программировали на другом языке, ну или как повторение важных моментов раздела.
+
+Все очень компактно, со ссылками на развёрнутые описания.
+
+[cut]
+
+## Структура кода
+
+Операторы разделяются точкой с запятой:
+
+```js
+//+ run
+alert('Привет'); alert('Мир');
+```
+
+Как правило, перевод строки тоже подразумевает точку с запятой. Так тоже будет работать:
+
+```js
+//+ run
+alert('Привет') 
+alert('Мир')
+```
+
+..Однако, иногда JavaScript не вставляет точку с запятой. Например:
+
+```js
+//+ run
+var a = 2
++3
+
+alert(a); // 5
+```
+
+Бывают случаи, когда это ведёт к ошибкам, которые достаточно трудно найти и исправить. Правила, когда точка с запятой ставится, а когда нет -- конечно, есть в спецификации языка, но запомнить их поначалу сложно, так как они неочевидны, придуманы "не для людей".
+
+**Поэтому в JavaScript рекомендуется точки с запятой ставить. Сейчас это, фактически, общепринятый стандарт.**
+
+Поддерживаются однострочные комментарии `// ...` и многострочные `/* ... */`:
+
+Подробнее: [](/structure).
+
+## Переменные и типы
+
+<ul>
+<li>Объявляются директивой `var`. Могут хранить любое значение:
+
+```js
+var x = 5;
+x = "Петя";
+```
+
+</li>
+<li>Есть 5 "примитивных" типов и объекты:
+
+```js
+x = 1;             // число
+x = "Тест";        // строка, кавычки могут быть одинарные или двойные
+x = true;          // булево значение true/false
+x = null;          // спец. значение (само себе тип)
+x = undefined;     // спец. значение (само себе тип)
+```
+
+Также есть специальные числовые значения `Infinity` (бесконечность) и `NaN`.
+
+Значение `NaN` обозначает ошибку и является результатом числовой операции, если она некорректна.
+</li>
+<li>**Значение `null` не является "ссылкой на нулевой адрес/объект" или чем-то подобным. Это просто специальное значение.** 
+
+Оно присваивается, если мы хотим указать, что значение переменной неизвестно. 
+
+Например:
+
+```js
+var age = null; // возраст неизвестен
+```
+
+</li>
+<li>**Значение `undefined` означает "переменная не присвоена".**
+
+Например:
+
+```js
+var x;
+alert( x ); // undefined
+```
+
+Можно присвоить его и явным образом: `x = undefined`, но так делать не рекомендуется.
+
+Про объекты мы поговорим в главе [](/object), они в JavaScript сильно отличаются от большинства других языков.
+</li>
+<li>В имени переменной могут быть использованы любые буквы или цифры, но цифра не может быть первой. Символы доллар `$` и подчёркивание `_` допускаются наравне с буквами.</li>
+</ul>
+
+Подробнее: [](/variables), [](/types-intro).
+
+
+## Методы и свойства
+
+Все значения в JavaScript, за исключением `null` и `undefined`, содержат набор вспомогательных функций и значений, доступных "через точку".
+
+Такие функции называют "методами", а значения -- "свойствами". 
+
+Например:
+
+```js
+//+ run
+alert( "Привет, мир!".length ); // 12
+```
+
+Еще у строк есть *метод* `toUpperCase()`, который возвращает строку в верхнем регистре:
+
+```js
+//+ run
+var hello = "Привет, мир!";
+
+*!*
+alert( hello.toUpperCase() ); // "ПРИВЕТ, МИР!"
+*/!*
+```
+
+Подробнее: [](/properties-and-methods).
+
+
+## Строгий режим
+
+Для того, чтобы интерпретатор работал в режиме максимального соответствия современному стандарту, нужно начинать скрипт директивой `'use strict';`
+
+```js
+'use strict';
+
+...
+```
+
+Эта директива может также указываться в начале функций. При этом функция будет выполняться в режиме соответствия, а на внешний код такая директива не повлияет.
+
+Одно из важных изменений в современном стандарте -- все переменные нужно объявлять через `var`. Есть и другие, которые мы изучим позже, вместе с соответствующими возможностями языка.
+
+
+
+## Взаимодействие с посетителем
+
+Простейшие функции для взаимодействия с посетителем в браузере:
+
+<dl>
+<dt>["prompt(вопрос[, по_умолчанию])"](https://developer.mozilla.org/en/DOM/window.prompt)</dt>
+<dd>Задать `вопрос` и возвратить введённую строку, либо `null`, если посетитель нажал "Отмена".</dd>
+<dt>["confirm(вопрос)"](https://developer.mozilla.org/en/DOM/window.confirm)</dt>
+<dd>Задать `вопрос` и предложить кнопки "Ок", "Отмена". Возвращает, соответственно,  `true/false`.</dd>
+<dt>["alert(сообщение)"](https://developer.mozilla.org/en/DOM/window.alert)</dt>
+<dd>Вывести сообщение на экран.</dd>
+</dl>
+
+Все эти функции являются *модальными*, т.е. не позволяют посетителю взаимодействовать со страницей до ответа.
+
+Например:
+
+```js
+//+ run
+var userName = prompt("Введите имя?", "Василий");
+var isTeaWanted = confirm("Вы хотите чаю?");
+
+alert( "Посетитель: " + userName);
+alert( "Чай: " + isTeaWanted);
+```
+
+Подробнее: [](/uibasic).
+
+## Особенности операторов
+
+<ul>
+<li>**Для сложения строк используется оператор `+`.**
+
+Если хоть один аргумент -- строка, то другой тоже приводится к строке:
+
+```js
+//+ run
+alert( 1 + 2 );   // 3, число
+alert( '1' + 2 ); // '12', строка
+alert( 1 + '2' ); // '12', строка
+```
+
+</li>
+<li>**Сравнение `===` проверяет точное равенство, включая одинаковый тип.** Это самый очевидный и надёжный способ сравнения.
+
+**Остальные сравнения `== < <= > >=` осуществляют числовое приведение типа:**
+
+```js
+//+ run
+alert( 0 == false ); // true
+alert( true > 0 );   // true
+```
+
+Исключение -- сравнение двух строк (см. далее).
+
+**Исключение: значения `null` и `undefined` ведут себя в сравнениях не как ноль.** 
+<ul>
+<li>Они равны `null == undefined` друг другу и не равны ничему ещё. В частности, не равны нулю.</li>
+<li>В других сравнениях (кроме `===`) значение `null` преобразуется к нулю, а `undefined` -- становится `NaN` ("ошибка").</li>
+</ul>
+
+Такое поведение может привести к неочевидным результатам, поэтому лучше всего использовать для сравнения с ними `===`. Оператор `==` тоже можно, если не хотите отличать `null` от `undefined`.
+
+Например, забавное следствие этих правил для `null`:
+
+```js
+//+ run
+alert( null > 0 );  // false, т.к. null преобразовано к 0
+alert( null >= 0 ); // true, т.к. null преобразовано к 0
+alert( null == 0 ); // false, в стандарте явно указано, что null равен лишь undefined
+```
+
+С точки зрения здравого смысла такое невозможно. Значение `null` не равно нулю и не больше, но при этом `null >= 0` возвращает `true`!
+</li>
+</ol>
+
+
+<li>**Сравнение строк -- лексикографическое, символы сравниваются по своим unicode-кодам.** 
+
+Поэтому получается, что строчные буквы всегда больше, чем прописные:
+
+```js
+//+ run
+alert('а' > 'Я'); // true
+```
+
+</li>
+</ul>
+
+Подробнее: [](/operators), [](/comparison).
+
+## Логические операторы
+
+В JavaScript есть логические операторы: И (обозначается `&&`), ИЛИ (обозначается `||`) и НЕ (обозначается `!`). Они интерпретируют любое значение как логическое.
+
+Не стоит путать их с [побитовыми операторами](/bitwise-operators) И, ИЛИ, НЕ, которые тоже есть в JavaScript и работают с числами на уровне битов.
+
+Как и в большинстве других языков, в логических операторах используется "короткий цикл" вычислений. Например, вычисление выражения `1 && 0 && 2` остановится после первого И `&&`, т.к. понятно что результат будет ложным (ноль интерпретируется как `false`).
+
+**Результатом логического оператора служит последнее значение в коротком цикле вычислений.**
+
+Можно сказать и по-другому: значения хоть и интерпретируются как логические, но то, которое в итоге определяет результат, возвращается без преобразования.
+
+Например:
+
+```js
+//+ run
+alert( 0 && 1 ); // 0
+alert( 1 && 2 && 3 ); // 3
+alert( null || 1 || 2 ); // 1
+```
+
+Подробнее: [](/logical-ops).
+
+## Циклы 
+
+<ul>
+<li>Поддерживаются три вида циклов:
+
+```js
+// 1
+while (условие) {  
+  ...
+}
+
+// 2
+do {  
+  ...
+} while(условие);
+
+// 3
+for (var i = 0; i < 10; i++) {
+  ...
+}
+```
+
+</li>
+<li>Переменную можно объявлять прямо в цикле, но видна она будет и за его пределами.</li>
+<li>Поддерживаются директивы `break/continue` для выхода из цикла/перехода на следующую итерацию.
+
+Для выхода одновременно из нескольких уровней цикла можно задать метку.
+
+Синтаксис: "`имя_метки:`", ставится она только перед циклами и блоками, например:
+
+```js
+*!*outer:*/!*
+for(;;) {
+    ...
+  for(;;) {
+    ...
+    *!*break outer;*/!*
+  }
+}
+```
+
+Переход на метку возможен только изнутри цикла, и только на внешний блок по отношению к данному циклу. В произвольное место программы перейти нельзя.
+</li>
+</ul>
+
+Подробнее: [](/break-continue).
+
+## Конструкция switch
+
+При сравнениях в конструкции `switch` используется оператор `===`.
+
+Например:
+
+```js
+//+ run
+var age = prompt('Ваш возраст', 18);
+
+switch (age) {
+  case 18: 
+    alert('Никогда не сработает'); // результат prompt - строка, а не число
+
+  case "18":  // вот так - сработает!
+    alert('Вам 18 лет!');
+    break;
+
+  default:
+    alert('Любое значение, не совпавшее с case');
+}
+```
+
+Подробнее: [](/switch).
+
+## Функции
+
+Синтаксис функций в JavaScript:
+
+```js
+//+ run
+// function имя(список параметров) { тело }
+function sum(a, b) {
+  var result = a + b;
+
+  return result;
+}
+
+// использование:
+alert( sum(1, 2) ); // 3
+```
+
+<ul>
+<li>`sum` -- имя функции, ограничения на имя функции -- те же, что и на имя переменной.</li>
+<li>Переменные, объявленные через `var` внутри функции, видны везде внутри этой функции, блоки `if`, `for` и т.п. на видимость не влияют.</li>
+<li>Параметры передаются "по значению", т.е. копируются в локальные переменные `a`, `b`, за исключением объектов, которые передаются "по ссылке", их мы подробно обсудим в главе [](/object).
+</li>
+<li>Функция без `return` считается возвращающей `undefined`. Вызов  `return` без значения также возвращает `undefined`:
+
+```js
+//+ run
+function f() { } 
+alert( f() ); // undefined
+```
+
+</li>
+</ul>
+
+Подробнее: [](/function-basics).
+
+## Function Declaration и Expression
+
+Функция в JavaScript является обычным значением. 
+
+Её можно создать в любом месте кода и присвоить в переменную, вот так:
+
+```js
+//+ run
+var sum = function(a, b) {
+  var result = a + b;
+
+  return result;
+}
+
+alert( sum(1, 2) ); // 3
+```
+
+Такой синтаксис, при котором функция объявляется в контексте выражения (в данном случае, выражения присваивания), называется Function Expression, а обычный синтаксис, при котором функция объявляется в основном потоке кода -- Function Declaration.
+
+Функции, объявленные через Function Declaration, отличаются от Function Expression тем, что интерпретатор создаёт их при входе в область видимости (в начале выполнения скрипта), так что они работают до объявления.
+
+Обычно это удобно, но может быть проблемой, если нужно объявить функцию в зависимости от условия. В этом случае, а также в других ситуациях, когда хочется создать функцию "здесь и сейчас", используют Function Expression.
+
+Детали: [](/function-declaration-expression).
+
+## Named Function Expression
+
+Если объявление функции является частью какого-либо выражения, например `var = function...` или любого другого, то это Function Expression.
+
+В этом случае имя, которое можно (но не обязательно) указать после `function`, будет видно только внутри этой функции и позволяет обратиться к функции изнутри себя. Обычно оно используется для рекурсивных вызовов.
+
+Например, создадим функцию для вычисления факториала как Function Expression и дадим ей имя `me`:
+
+```js
+//+ run
+var factorial = function me(n) {
+  return (n == 1) ? n : n * me(n-1);
+}
+
+alert( factorial(5) ); // 120
+*!*
+alert( me ); // ошибка, нет такой переменной
+*/!*
+```
+
+Ограничение видимости для имени не работает в IE8-, но вызов с его помощью работает во всех браузерах.
+ 
+Более развёрнуто: [](/named-function-expression).
+
+## Итого
+
+В этой главе мы повторили основные особенности JavaScript, знание которых необходимо для обхода большинства "граблей", да и просто для написания хорошего кода.
+
+Это, конечно, лишь основы. Дальше вы узнаете много других особенностей и приёмов программирования на этом языке.
diff --git a/1-js/2-first-steps/3-variables/1-hello-variables/solution.md b/1-js/2-first-steps/3-variables/1-hello-variables/solution.md
new file mode 100644
index 00000000..1eab8bc7
--- /dev/null
+++ b/1-js/2-first-steps/3-variables/1-hello-variables/solution.md
@@ -0,0 +1,13 @@
+Каждая строчка решения соответствует одному шагу задачи:
+
+```js
+//+ run
+var admin, name; // две переменных через запятую
+
+name = "Василий"; 
+
+admin = name;
+
+alert(admin); // "Василий"
+```
+
diff --git a/1-js/2-first-steps/3-variables/1-hello-variables/task.md b/1-js/2-first-steps/3-variables/1-hello-variables/task.md
new file mode 100644
index 00000000..42438a4b
--- /dev/null
+++ b/1-js/2-first-steps/3-variables/1-hello-variables/task.md
@@ -0,0 +1,10 @@
+# Работа с переменными
+
+[importance 2]
+
+<ol>
+<li>Объявите две переменные: `admin` и `name`. </li>
+<li>Запишите в `name` строку `"Василий"`. </li>
+<li>Скопируйте значение из `name` в `admin`.</li>
+<li>Выведите `admin` (должно вывести "Василий").</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/2-first-steps/3-variables/article.md b/1-js/2-first-steps/3-variables/article.md
new file mode 100644
index 00000000..6dcad365
--- /dev/null
+++ b/1-js/2-first-steps/3-variables/article.md
@@ -0,0 +1,252 @@
+# Переменные
+
+В зависимости от того, для чего вы делаете скрипт, понадобится работать с информацией.
+
+Если это электронный магазин - то это товары, корзина. Если чат - посетители, сообщения и так далее.
+
+Чтобы хранить информацию, используются *переменные*.
+[cut]
+## Переменная
+
+*Переменная* состоит из имени и выделенной области памяти, которая ему соответствует.. 
+
+Для *объявления* или, другими словами, *создания переменной* используется ключевое слово `var`:
+
+```js
+var message;
+```
+
+После объявления, можно записать в переменную данные:
+
+```js
+var message;
+message = 'Привет'; // сохраним в переменной строку
+```
+
+Эти данные будут сохранены в соответствующей области памяти и в дальнейшем доступны при обращении по имени:
+
+```js
+//+ run
+var message;
+message = 'Привет'; 
+
+alert(message); // выведет содержимое переменной
+```
+
+Для краткости можно совместить объявление переменной и запись данных:
+
+```js
+var message = 'Привет';
+```
+
+Можно даже объявить несколько переменных сразу:
+
+```js
+var user = 'Вася', age = 25, message = 'Привет';
+```
+
+### Аналогия из жизни
+
+Проще всего понять переменную, если представить ее как "коробку" для данных, с уникальным именем. 
+
+Например, переменная `message` - это коробка, в которой хранится значение `"Привет"`:
+
+<img src="box-message-hello.png">
+
+В коробку можно положить любое значение, а позже - поменять его. Значение в переменной можно изменять сколько угодно раз:
+
+```js
+//+ run
+var message;
+
+message = 'Привет'; 
+
+message = 'Мир';    // заменили значение
+
+alert(message);
+```
+
+<img src="box-trans1.png">
+
+При изменении значения старое содержимое переменной удаляется.
+
+[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]
+
+На имя переменной в JavaScript наложены всего два ограничения. 
+<ol>
+<li>Имя может состоять из: букв, цифр, символов `$` и `_`</li>
+<li>Первый символ не должен быть цифрой.</li>
+</ol>
+
+Например:
+
+```js
+var myName;
+var test123;
+```
+
+**Что особенно интересно -- доллар `'$'` и знак подчеркивания `'_'` являются такими же обычными символами, как буквы:**
+
+```js
+//+ run untrusted
+var $ = 1;  // объявили переменную с именем '$'
+var _ = 2; // переменная с именем '_'
+
+alert($ + _); // 3
+```
+
+А такие переменные были бы неправильными:
+
+```js
+var 1a; // начало не может быть цифрой
+
+var my-name; // дефис '-' не является разрешенным символом
+```
+
+[smart header="Регистр букв имеет значение"]
+Переменные `apple` и `AppLE` - две разные переменные. 
+[/smart]
+
+[smart header="Русские буквы допустимы, но не рекомендуются"]
+
+В названии переменных можно использовать и русские буквы, например:
+
+```js
+//+ run
+var имя = "Вася";
+alert(имя); // "Вася"
+```
+
+Технически, ошибки здесь нет, но на практике сложилась традиция использовать в именах только английские буквы.
+[/smart]
+
+[warn header="Зарезервированные имена"]
+
+Существует список зарезервированных слов, которые нельзя использовать для переменных, так как они используются самим языком, например: `var, class, return, export` и др.
+
+Некоторые такие слова, например, `export`, не используются в современном JavaScript, но они зарезервированы на будущее. 
+
+Например, такой пример выдаст синтаксическую ошибку:
+
+```js
+//+ run
+var class = 5; // ошибка, слово зарезервировано
+alert(class);
+```
+
+[/warn]
+
+
+### Копирование значений
+
+Переменные в JavaScript могут хранить не только строки, но и другие данные, например, числа. 
+
+Объявим две переменные, положим в одну -- строку, а в другую -- число:
+
+```js
+var num = 100500;
+var message = 'Привет';
+```
+
+При этом в любой момент значение можно скопировать из одной переменной в другую:
+
+```js
+var num = 100500;
+var message = 'Привет';
+
+*!*
+message = num;
+*/!*
+```
+
+При копировании значение  из `num` перезаписывает текущее в `message`. 
+
+**В "коробке" `message` изменится значение**:
+
+<img src="box-trans2.png">
+
+После этого присваивания в обеих коробках `num` и `message` находится одно и то же значение `100500`.
+
+## Важность директивы var
+
+В JavaScript вы можете создать переменную и без `var`, достаточно просто присвоить ей значение:
+
+```js
+x = "value"; // переменная создана, если ее не было
+```
+
+Технически, это не вызовет ошибки, но делать так все-таки не стоит. 
+
+**Всегда определяйте переменные через `var`**. 
+
+Это хороший тон в программировании и помогает избежать ошибок.
+
+[warn header="Ошибка в IE8- без `var`"]
+Если же вы собираетесь поддерживать IE8-, то у меня для вас ещё одна причина всегда использовать `var`. 
+
+Следущий документ в IE8- ничего не выведет, будет ошибка:
+
+```html
+<div id="test"></div>
+<script>
+*!*
+  test = 5; // здесь будет ошибка!
+*/!*
+  alert(test); // не сработает
+</script>
+```
+
+Это потому, что переменная `test` не объявлена через `var` и совпадает с `id` элемента `<div>`. Даже не спрашивайте почему -- это ошибка в браузере IE до версии 9.
+
+Самое "забавное" -- то, что такая ошибка присвоения значений будет только в IE8- и только если на странице присутствует элемент с совпадающим с именем `id`. 
+
+Такие ошибки особенно "весело" исправлять и отлаживать.
+
+Вывод простой -- всегда объявляем переменные через `var`, и сюрпризов не будет. Даже в старых IE.
+[/warn]
+
+## Константы
+
+*Константа* -- это переменная, которая никогда не меняется. Как правило, их называют большими буквами, через подчёркивание. Например:
+
+```js
+//+ run
+var COLOR_RED = "#F00";
+var COLOR_GREEN = "#0F0";
+var COLOR_BLUE = "#00F";
+var COLOR_ORANGE = "#FF7F00";
+
+var color = COLOR_ORANGE;
+alert(color); // #FF7F00
+```
+
+Технически, константа является обычной переменной, то есть её *можно* изменить. Но мы *договариваемся* этого не делать.
+
+Зачем нужны константы? Почему бы просто не писать `var color = "#FF7F00"`?
+
+<ol>
+<li>Во-первых, константа `COLOR_ORANGE` -- это понятное имя. По присвоению `var color="#FF7F00"` непонятно, что цвет -- оранжевый. Иными словами, константа `COLOR_ORANGE` является "понятным псевдонимом" для значения `#FF7F00`.</li>
+<li>Во-вторых, опечатка в строке, особенно такой сложной как `#FF7F00`, может быть не замечена, а в имени константы её допустить куда сложнее.</li>
+</ol>
+
+**Константы используют вместо строк и цифр, чтобы сделать программу понятнее и избежать ошибок.**
+
+## Итого
+
+<ul>
+<li>В JavaScript можно объявлять переменные для хранения данных. Это делается при помощи `var`.</li>
+<li>Технически, можно просто записать значение и без объявления переменной, однако по ряду причин это не рекомендуется.</li>
+<li>Вместе с объявлением можно сразу присвоить значение: `var x = 10`.</li>
+<li>Переменные, которые названы `БОЛЬШИМИ_БУКВАМИ`, являются константами, то есть никогда не меняются. Как правило, они используются для удобства, чтобы было меньше ошибок.</li>
+</ul>
+
+
+
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
new file mode 100755
index 00000000..1a0a7efa
Binary files /dev/null and b/1-js/2-first-steps/3-variables/box-message-hello.png 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
new file mode 100755
index 00000000..84335a33
Binary files /dev/null and b/1-js/2-first-steps/3-variables/box-trans1.png 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
new file mode 100755
index 00000000..48dd70ac
Binary files /dev/null and b/1-js/2-first-steps/3-variables/box-trans2.png differ
diff --git a/1-js/2-first-steps/4-variable-names/1-declare-variables/solution.md b/1-js/2-first-steps/4-variable-names/1-declare-variables/solution.md
new file mode 100644
index 00000000..692a5bc7
--- /dev/null
+++ b/1-js/2-first-steps/4-variable-names/1-declare-variables/solution.md
@@ -0,0 +1,13 @@
+Каждая строчка решения соответствует одному шагу задачи:
+
+```js
+//+ run
+var ourPlanetName = "Земля"; // буквально "название нашей планеты"
+
+var userName = "Петя"; // "имя посетителя"
+```
+
+Названия переменных можно бы сократить, например, до `planet` и `name`, но тогда станет менее понятно, о чем речь. 
+
+Насколько допустимы такие сокращения -- зависит от скрипта, его размера и сложности, от того, есть ли другие планеты и пользователи. В общем, лучше не жалеть букв и называть переменные так, чтобы по имени можно было легко понять, что в ней находится, и нельзя было перепутать переменные.
+ 
\ No newline at end of file
diff --git a/1-js/2-first-steps/4-variable-names/1-declare-variables/task.md b/1-js/2-first-steps/4-variable-names/1-declare-variables/task.md
new file mode 100644
index 00000000..1f0ef92f
--- /dev/null
+++ b/1-js/2-first-steps/4-variable-names/1-declare-variables/task.md
@@ -0,0 +1,8 @@
+# Объявление переменных
+
+[importance 3]
+
+<ol>
+<li>Создайте переменную для названия нашей планеты и присвойте ей значение `"Земля"`. *Правильное* имя выберите сами.</li>
+<li>Создайте переменную для имени посетителя со значением `"Петя"`. Имя также на ваш вкус.</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/2-first-steps/4-variable-names/article.md b/1-js/2-first-steps/4-variable-names/article.md
new file mode 100644
index 00000000..db6a7899
--- /dev/null
+++ b/1-js/2-first-steps/4-variable-names/article.md
@@ -0,0 +1,118 @@
+# Правильный выбор имени переменной
+
+Правильный выбор имени переменной -- одна из самых важных и сложных вещей в программировании, которая отличает начинающего от гуру. 
+
+[cut]
+
+Дело в том, что большинство времени мы тратим не на изначальное написание кода, а на его развитие.
+
+Возможно, эти слова не очевидны, если вы пока что ничего большого не писали или пишете код "только для чтения" (написал 5 строк, отдал заказчику и забыл). Но чем более серьёзные проекты вы будете делать, тем более актуальны они будут для вас.
+
+Что такое это "развитие"? Это когда я вчера написал код, а сегодня (или спустя неделю) прихожу и хочу его поменять. Например, вывести сообщение не так, а эдак... Обработать товары по-другому, добавить функционал.. А где у меня там сообщение хранится? А где товар?...
+
+**Гораздо проще найти нужные данные, если они правильно помечены, то есть когда переменная названа *правильно*.**
+
+<ul>
+<li>**Правило 1.** 
+
+**Никакого транслита. Только английский.**
+
+Неприемлемы:
+
+```js
+var moiTovari;
+var cena;
+var ssilka;
+```
+
+Подойдут:
+
+```js
+var myGoods; 
+var price;
+var link;
+```
+
+Чем плох транслит? 
+
+Во-первых, среди разработчиков всего мира принято использовать английский язык для имён переменных. И если ваш код потом попадёт к кому-то другому, например вы будете в команде больше чем из одного человека, то велик шанс, что транслит ему не понравится. 
+
+Во-вторых, русский транслит хуже читается и длиннее, чем названия на английском.
+
+В-третьих, в проектах вы наверняка будете применять библиотеки, написанные другими людьми. Многое уже готово, в распоряжении современного разработчика есть масса инструментов, все они используют названия переменных и функций на английском языке, и вы, конечно, будете их использовать. А от кода, где транслит перемешан с английским -- могут волосы смогут встать дыбом, и не только на голове.
+
+Если вы вдруг не знаете английский -- самое время выучить. 
+</li>
+<li>**Правило 2.** 
+
+**Использовать короткие имена только для переменных "местного значения".**
+
+Называть переменные именами, не несущими смысловой нагрузки, например  `a`, `e`, `p`, `mg` -- можно только в том случае, если они используются в небольшом фрагменте кода и их применение очевидно.
+
+Вообще же, название переменной должно быть понятным. Иногда для этого нужно использовать несколько слов.
+</li>
+<li>**Правило 3.** 
+
+**Переменные из нескольких слов пишутся `вместеВотТак`.**
+
+Например:
+
+```js
+var borderLeftWidth;
+```
+
+Этот способ записи называется "верблюжьей нотацией" или, по-английски, "camelCase".
+
+Существует альтернативный стандарт, когда несколько слов пишутся через знак подчеркивания `'_'`:
+
+```js
+var border_left_width;
+```
+
+Преимущественно в JavaScript используется вариант `borderLeftWidth`, в частности во встроенных языковых и браузерных функциях. Поэтому целесообразно остановиться на нём.
+
+Ещё одна причина выбрать "верблюжью нотацию" -- запись в ней немного короче, чем c подчеркиванием, т.к. не нужно вставлять `'_'`. 
+</li>
+<li>**Правило последнее, главное.** 
+
+**Имя переменной должно максимально чётко соответствовать хранимым в ней данным.**
+
+Придумывание таких имен -- одновременно коротких и точных, при которых всегда понятно, что где лежит, приходит с опытом, но только если сознательно стремиться к этому.
+</li>
+</ul>
+
+Позвольте поделиться одним небольшим секретом, который позволит улучшить ваши названия переменных и сэкономит вам время.
+
+Бывает так, что вы написали код, через некоторое время к нему возвращаетесь, и вам надо что-то поправить. Например, изменить какую-то рамку `border`...
+
+...И вы помните, что переменная, в которой хранится нужное вам значение, называется примерно так: `borderLeftWidth`. Вы ищете ее в коде, не находите, разбираетесь, и обнаруживаете, что на самом деле переменная называлась вот так: `leftBorderWidth`. После чего вносите нужные правки.
+
+**Если вы искали переменную с одним именем, а нашли -- с другим, то самый лучший ход -- это *переименовать* переменную, чтобы имя было тем, которое вы искали.**
+
+То есть, у вас в коде `leftBorderWidth`, а вы ее переименовываете на `borderLeftWidth`.
+
+Зачем? Дело в том, что в следующий раз, когда вы захотите что-то поправить, то вы будете искать по тому же самому имени. Соответственно, это сэкономит вам время. 
+
+Кроме того, поскольку именно это имя переменной пришло вам в голову -- скорее всего, оно больше соответствует хранимым там данным, чем то, которое вы придумали изначально. Исключения бывают, но в любом случае -- такое несовпадение -- это повод задуматься.
+
+[summary]
+Смысл имени переменной -- это "имя на коробке", по которому мы сможем максимально быстро находить нужные нам данные. 
+
+**Не нужно бояться переименовывать переменные, если вы придумали имя получше.** 
+
+Современные редакторы позволяют делать это очень удобно и быстро. Это в конечном счете сэкономит вам время.
+[/summary]
+
+
+[warn header="Храните в переменной то, что следует"]
+Бывают ленивые программисты, которые, вместо того чтобы объявить новую переменную, используют существующую. 
+
+В результате получается, что такая переменная -- как коробка, в которую кидают то одно, то другое, то третье, при этом не меняя название. Что в ней лежит сейчас? А кто его знает.. Нужно подойти, проверить. 
+
+Сэкономит такой программист время на объявлении переменной -- потеряет в два раза больше на отладке кода. 
+
+**"Лишняя" переменная -- добро, а не зло.**
+[/warn]
+
+
+
diff --git a/1-js/2-first-steps/5-strict-mode/article.md b/1-js/2-first-steps/5-strict-mode/article.md
new file mode 100644
index 00000000..4acc70e8
--- /dev/null
+++ b/1-js/2-first-steps/5-strict-mode/article.md
@@ -0,0 +1,90 @@
+# Современный стандарт, "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/6-types-intro/article.md b/1-js/2-first-steps/6-types-intro/article.md
new file mode 100644
index 00000000..71a7da0d
--- /dev/null
+++ b/1-js/2-first-steps/6-types-intro/article.md
@@ -0,0 +1,105 @@
+# Шесть типов данных
+
+В JavaScript существует несколько основных типов данных.
+[cut]
+
+## Число "number"
+
+```js
+var n = 123;
+n = 12.345;
+```
+
+Единый тип *число* используется как для целых, так и для дробных чисел.
+
+Существуют специальные числовые значения `Infinity` (бесконечность) и `NaN` (ошибка вычислений).
+
+Например, бесконечность `Infinity` получается при делении на ноль:
+
+```js
+//+ run
+alert( 1 / 0 ); // Infinity
+```
+
+Ошибка вычислений `NaN` будет результатом некорректной математической операции, например:
+
+```js
+//+ run
+alert( "нечисло" * 2 ); // NaN, ошибка
+```
+
+Эти значения формально принадлежат типу "число", хотя, конечно, числами в их обычном понимании не являются.
+
+## Строка "string"
+
+```js
+var str = "Мама мыла раму";
+str = 'Одинарные кавычки тоже подойдут';
+```
+
+**В JavaScript одинарные и двойные кавычки равноправны.** Можно использовать или те или другие. 
+
+[smart header="Тип *символ* не существует, есть только *строка*."]
+В некоторых языках программирования есть специальный тип данных для одного символа. Например, в языке С это `char`. В JavaScript есть только тип "строка" `string`. Что, надо сказать, вполне удобно.
+[/smart]
+
+## Булевый (логический) тип "boolean" 
+
+У него всего два значения: `true` (истина) и `false` (ложь). 
+
+Как правило, такой тип используется для хранения значения типа да/нет, например:
+
+```js
+var checked = true; // поле формы помечено галочкой
+checked = false;    // поле формы не содержит галочки
+```
+
+О нём мы поговорим более подробно, когда будем обсуждать логические вычисления и условные операторы.
+
+## Специальное значение "null"
+
+Значение `null` не относится ни к одному из типов выше, а образует свой отдельный тип, состоящий из единственного значения `null`:
+
+```js
+var age = null;
+```
+
+В JavaScript `null` не является "ссылкой на несуществующий объект" или "нулевым указателем", как в некоторых других языках. Это просто специальное значение, которое имеет смысл "ничего" или "значение неизвестно".
+
+В частности, код выше говорит о том, что возраст `age` неизвестен.
+
+## Специальное значение "undefined"
+
+Значение `undefined`, как и `null`, образует свой собственный тип, состоящий из одного этого значения. Оно имеет смысл "значение не присвоено".
+
+Если переменная объявлена, но в неё ничего не записано, то ее значение как раз и есть `undefined`:
+
+```js
+//+ run
+var x;
+alert(x); // выведет "undefined"
+```
+
+Можно присвоить `undefined` и в явном виде, хотя это делается редко:
+
+```js
+//+ run
+var x = 123;
+x = undefined;
+
+alert(x); // "undefined"
+```
+
+В явном виде `undefined` обычно не присваивают, так как это противоречит его смыслу. Для записи в переменную "пустого" или "неизвестного" значения используется `null`. 
+
+## Объекты "object"
+
+Первые 5 типов называют *"примитивными"*. 
+
+Особняком стоит шестой тип: *"объекты"*. К нему относятся, например, даты, он используется для коллекций данных и для объявления более сложных сущностей. Позже мы вернёмся к этому типу и рассмотрим его принципиальные отличия от примитивов.
+
+## Итого
+
+Есть 5 "примитивных" типов: `number`, `string`, `boolean`, `null`, `undefined` и 6-й тип -- объекты `object`.
+
+Очень скоро мы изучим их во всех деталях.
\ No newline at end of file
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
new file mode 100644
index 00000000..d878c3f9
--- /dev/null
+++ b/1-js/2-first-steps/7-properties-and-methods/article.md
@@ -0,0 +1,112 @@
+# Методы и свойства
+
+Все значения в JavaScript, за исключением `null` и `undefined`, содержат набор вспомогательных функций и значений, доступных "через точку".
+
+Такие функции называют "методами", а значения -- "свойствами". Здесь мы рассмотрим основы использования свойств и методов.
+
+[cut]
+
+## Свойство str.length
+
+У строки есть *свойство* `length`, содержащее длину:
+
+```js
+//+ run
+alert( "Привет, мир!".length ); // 12
+```
+
+Можно и записать строку в переменную, а потом запросить её свойство:
+
+```js
+//+ run
+var str =  "Привет, мир!";
+alert( str.length ); // 12
+```
+
+## Метод str.toUpperCase()
+
+Также у строк есть *метод* `toUpperCase()`, который возвращает строку в верхнем регистре:
+
+```js
+//+ run
+var hello = "Привет, мир!";
+
+*!*
+alert( hello.toUpperCase() ); // "ПРИВЕТ, МИР!"
+*/!*
+```
+
+[warn header="Вызов метода -- через круглые скобки!"]
+
+Обратите внимание, для вызова метода обязательно нужны круглые скобки.
+
+Посмотрите, например, результат обращения к `toUpperCase` без скобок:
+
+```js
+//+ run
+var hello = "Привет";
+
+*!*
+alert( hello.toUpperCase ); // function...
+*/!*
+```
+
+Метод -- это встроенная команда ("функция", мы поговорим о них позже), которую нужно вызвать для получения значения. Если обратиться к ней без скобок, то результатом будет сама эта функция. Как правило браузер выведет её как-то так: `"function toUpperCase() { ... }"`, а чтобы получить результат -- нужно добавить скобки:
+
+```js
+//+ run
+var hello = "Привет";
+
+*!*
+alert( hello.toUpperCase() ); // ПРИВЕТ
+*/!*
+```
+
+[/warn]
+
+Более подробно с различными свойствами и методами строк мы познакомимся в главе [](/string).
+
+## Метод num.toFixed(n)
+
+Есть методы и у чисел, например `num.toFixed(n)`. Он округляет число `num` до `n` знаков после запятой, при необходимости добивает нулями до данной длины и возвращает в виде строки (удобно для форматированного вывода):
+
+```js
+//+ run
+var n = 12.345;
+
+alert( n.toFixed(2) ); // "12.35"
+alert( n.toFixed(0) ); // "12"
+alert( n.toFixed(5) ); // "12.34500"
+```
+
+Детали работы `toFixed` разобраны в главе [](/number).
+
+[warn header="Обращение к методам чисел"]
+К методу числа можно обратиться и напрямую:
+
+```js
+//+ run
+alert( 12.34.toFixed(1) ); // 12.3
+```
+
+...Но если число целое, то будет проблема:
+
+```js
+//+ run
+alert( 12.toFixed(1) ); // ошибка!
+```
+
+Ошибка произойдёт потому, что JavaScript ожидает десятичную дробь после точки.
+
+Это -- особенность синтаксиса JavaScript. Вот так -- будет работать:
+
+```js
+//+ run
+alert( 12..toFixed(1) ); // 12.0
+```
+
+[/warn]
+
+
+
+Мы еще встретимся со [строками](/string) и [числами](/number) в последующих главах и глубже познакомимся с их свойствами и методами.
\ No newline at end of file
diff --git a/1-js/2-first-steps/8-operators/1-increment-order/solution.md b/1-js/2-first-steps/8-operators/1-increment-order/solution.md
new file mode 100644
index 00000000..de103276
--- /dev/null
+++ b/1-js/2-first-steps/8-operators/1-increment-order/solution.md
@@ -0,0 +1,23 @@
+# Разъяснения
+
+```js
+//+ run
+var a = 1, b = 1, c, d; 
+
+// префиксная форма сначала увеличивает a до 2, а потом возвращает 
+c = ++a; alert(c); // 2
+
+// постфиксная форма увеличивает, но возвращает старое значение
+d = b++; alert(d); // 1
+
+// сначала увеличили a до 3, потом использовали в арифметике
+c = (2+ ++a); alert(c); // 5
+
+// увеличили b до 3, но в этом выражении оставили старое значение
+d = (2+ b++); alert(d); // 4
+
+// каждую переменную увеличили по 2 раза
+alert(a); // 3
+alert(b); // 3
+```
+
diff --git a/1-js/2-first-steps/8-operators/1-increment-order/task.md b/1-js/2-first-steps/8-operators/1-increment-order/task.md
new file mode 100644
index 00000000..6489a2af
--- /dev/null
+++ b/1-js/2-first-steps/8-operators/1-increment-order/task.md
@@ -0,0 +1,20 @@
+# Инкремент, порядок срабатывания
+
+[importance 5]
+
+Посмотрите, понятно ли вам, почему код ниже работает именно так?
+
+```js
+//+ run
+var a = 1, b = 1, c, d; 
+
+c = ++a; alert(c); // 2
+d = b++; alert(d); // 1
+
+c = (2+ ++a); alert(c); // 5
+d = (2+ b++); alert(d); // 4
+
+alert(a); // 3
+alert(b); // 3
+```
+
diff --git a/1-js/2-first-steps/8-operators/2-assignment-result/solution.md b/1-js/2-first-steps/8-operators/2-assignment-result/solution.md
new file mode 100644
index 00000000..c0e69ce4
--- /dev/null
+++ b/1-js/2-first-steps/8-operators/2-assignment-result/solution.md
@@ -0,0 +1,11 @@
+Ответ: `x = 5`.
+
+Оператор присваивания возвращает значение, которое будет записано в переменную, например:
+
+```js
+//+ run
+var a = 2;
+alert( a *= 2 ); // 4
+```
+
+Отсюда `x = 1 + 4 = 5`.
\ No newline at end of file
diff --git a/1-js/2-first-steps/8-operators/2-assignment-result/task.md b/1-js/2-first-steps/8-operators/2-assignment-result/task.md
new file mode 100644
index 00000000..a3c166af
--- /dev/null
+++ b/1-js/2-first-steps/8-operators/2-assignment-result/task.md
@@ -0,0 +1,12 @@
+# Результат присваивания
+
+[importance 3]
+
+Чему будет равен `x` в примере ниже?
+
+```js
+var a = 2;
+
+var x = 1 + (a *= 2);
+```
+
diff --git a/1-js/2-first-steps/8-operators/article.md b/1-js/2-first-steps/8-operators/article.md
new file mode 100644
index 00000000..faebc399
--- /dev/null
+++ b/1-js/2-first-steps/8-operators/article.md
@@ -0,0 +1,415 @@
+# Основные операторы
+
+Для работы с переменными, со значениями, JavaScript поддерживает все стандартные операторы, большинство которых есть и в других языках программирования.
+[cut]
+
+## Термины: "унарный", "бинарный", "операнд"
+
+У операторов есть своя терминология, которая используется во всех языках программирования.
+<ul>
+<li>*Операнд* -- то, к чему применяется оператор. Например: `5 * 2` -- оператор умножения с левым и правым операндами. Другое название: "аргумент оператора".</li>
+<li>*Унарным* называется оператор, который применяется к одному выражению. Например, оператор унарный минус `"-"` меняет знак числа на противоположный:
+
+```js
+//+ run
+var x = 1;
+alert( -x );     // -1, унарный минус
+alert( -(x+2) ); // -3, унарный минус применён к результату сложения x+2
+alert( -(-3) );  // 3
+```
+
+</li>
+<li>*Бинарным* называется оператор, который применяется к двум операндам. Тот же минус существует и в бинарной форме:
+
+```js
+//+ run
+var x = 1, y = 3;
+alert( y - x ); // 2, бинарный минус
+```
+
+</li>
+</ul>
+
+Некоторые операторы, например, вычитание `"-"` и сложение `"+"`, бывают в двух вариантах: унарный -- при применении к одному операнду, и бинарный -- к двум. 
+
+## Арифметические операторы  
+
+Базовые арифметические операторы знакомы нам с детства: это плюс `+`, минус `-`, умножить `*`, поделить `/`.
+
+Например:
+
+```js
+//+ run
+alert(2 + 2); // 4
+```
+
+Или чуть сложнее:
+
+```js
+//+ run
+var i = 2;
+
+i = (2 + i) * 3 / i; 
+
+alert(i); // 6
+```
+
+**Более редкий арифметический оператор `%` интересен тем, что никакого отношения к процентам не имеет. Его результат `a % b` -- это остаток от деления `a` на `b`.** 
+
+Например:
+
+```js
+//+ run
+alert(5 % 2); // 1, остаток от деления 5 на 2 
+alert(8 % 3); // 2, остаток от деления 8 на 3
+alert(6 % 3); // 0, остаток от деления 6 на 3
+```
+
+### Сложение строк, бинарный +
+
+Если бинарный оператор `+` применить к строкам, то он их объединяет в одну:
+
+```js
+var a = "моя" + "строка";
+alert(a); // моястрока
+```
+
+**Если хотя бы один аргумент является строкой, то второй будет также преобразован к строке!**
+
+Причем не важно, справа или слева находится операнд-строка, в любом случае нестроковый аргумент будет преобразован. Например:
+
+```js
+//+ run
+alert( '1' + 2 ); // "12"
+alert( 2 + '1' ); // "21"
+```
+
+Это приведение к строке -- особенность бинарного оператора `"+"`. 
+
+**Остальные арифметические операторы работают только с числами и всегда приводят аргументы к числу.**
+
+Например:
+
+```js
+//+ run
+alert( '1' - 2 ); // -1
+alert( 6 / '2'); // 3
+```
+
+### Унарный плюс +
+
+Унарный, то есть применённый к одному значению, плюс как арифметический оператор ничего не делает:
+
+```js
+//+ run
+alert( +1 ); // 1
+alert( +(1-2) ); // -1
+```
+
+Как видно, плюс ничего не изменил в выражениях. Результат -- такой же, как и без него. 
+
+Тем не менее, он широко применяется, так как его "побочный эффект" -- преобразование значения в число.
+
+Например, у нас есть два числа, в форме строк, и нужно их сложить. Бинарный плюс сложит их как строки, поэтому используем унарный плюс, чтобы преобразовать к числу:
+
+```js
+//+ run
+var a = "2";
+var b = "3";
+
+alert( a + b ); // "23", так как бинарный плюс складывает строки
+alert( +a + b ); // "23", второй операнд - всё ещё строка
+
+alert( +a + +b); // 5, число, так как оба операнда предварительно преобразованы в числа
+```
+
+## Присваивание
+
+Оператор присваивания выглядит как знак равенства `=`:
+
+```js
+var i = 1 + 2;
+
+alert(i); // 3
+```
+
+Он вычисляет выражение, которое находится справа, и присваивает результат переменной. Это выражение может быть достаточно сложным и включать в себя любые другие переменные:
+
+```js
+//+ run
+var a = 1;
+var b = 2;
+
+*!*
+a = b + a + 3;  // (*)
+*/!*
+
+alert(a); // 6
+```
+
+В строке `(*)` сначала произойдет вычисление, использующее текущее значение `a` (т.е. `1`), после чего результат перезапишет старое значение `a`.
+
+**Возможно присваивание по цепочке:**
+
+```js
+//+ run
+var a, b, c;
+
+*!*
+a = b = c = 2 + 2;
+*/!*
+
+alert(a); // 4
+alert(b); // 4
+alert(c); // 4
+```
+
+Такое присваивание работает справа-налево, то есть сначала вычислятся самое правое выражение `2+2`, присвоится в `c`, затем выполнится `b = c` и, наконец, `a = b`.
+
+[smart header="Оператор `\"=\"` возвращает значение"]
+Все операторы возвращают значение. Вызов `x = выражение` записывает выражение в `x`, а затем возвращает его. Благодаря этому присваивание можно использовать как часть более сложного выражения:
+
+```js
+//+ run
+var a = 1;
+var b = 2;
+
+*!*
+var c = 3 - (a = b + 1);
+*/!*
+
+alert(a); // 3
+alert(c); // 0
+```
+
+В примере выше результатом `(a = b + 1)` является значение, которое записывается в `a` (т.е. `3`). Оно используется для вычисления `c`.
+
+Забавное применение присваивания, не так ли? 
+
+Знать, как это работает -- стоит обязательно, а вот писать самому -- только если вы уверены, что это сделает код более читаемым и понятным.
+[/smart]
+
+
+## Приоритет
+
+В том случае, если в выражении есть несколько операторов - порядок их выполнения определяется *приоритетом*.
+
+Из школы мы знаем, что умножение в выражении `2 * 2 + 1` выполнится раньше сложения, т.к. его *приоритет* выше, а скобки явно задают порядок выполнения. Но в JavaScript -- гораздо больше операторов, поэтому существует целая [таблица приоритетов](https://developer.mozilla.org/en/JavaScript/Reference/operators/operator_precedence). 
+
+Она содержит как уже пройденные операторы, так и те, которые мы еще не проходили. В ней каждому оператору задан числовой приоритет. Тот, у кого число меньше -- выполнится раньше. Если приоритет одинаковый, то порядок выполнения -- слева направо.
+
+Отрывок из таблицы:
+
+<table>
+<tr><td>...</td><td>...</td><td>...</td></tr>
+<tr><td>5</td><td>умножение</td><td>`*`</td></tr>
+<tr><td>5</td><td>деление</td><td>`/`</td></tr>
+<tr><td>6</td><td>сложение</td><td>`+`</td></tr>
+<tr><td>6</td><td>вычитание</td><td>`-`</td></tr>
+<tr><td>17</td><td>присвоение</td><td>`=`</td></tr>
+<tr><td>...</td><td>...</td><td>...</td></tr>
+</table>
+
+Посмотрим на таблицу в действии.
+
+В выражении `x = 2 * 2 + 1` есть три оператора: присвоение `=`, умножение `*` и сложение `+`. Приоритет умножения `*` равен `5`, оно выполнится первым, затем произойдёт сложение `+`, у которого приоритет `6`, и после них -- присвоение `=`, с приоритетом 17. 
+
+## Инкремент/декремент: ++, --   
+
+Одной из наиболее частых операций в JavaScript, как и во многих других языках программирования, является увеличение или уменьшение переменной на единицу.
+
+Для этого существуют даже специальные операторы:
+<ul>
+<li>**Инкремент** `++` увеличивает на 1:
+
+```js
+//+ run
+var i = 2;
+i++;      // более короткая запись для i = i + 1.
+alert(i); // 3
+```
+
+</li>
+<li>**Декремент** `--` уменьшает на 1:
+
+```js
+//+ run
+var i = 2;
+i--;      // более короткая запись для i = i - 1.
+alert(i); // 1
+```
+
+</li>
+</ul>
+
+[warn]
+Инкремент/декремент можно применить только к переменной. 
+Код `5++` даст ошибку.
+[/warn]
+
+Вызывать эти операторы можно не только после, но и перед переменной: `i++` (называется "постфиксная форма") или `++i` ("префиксная форма"). 
+
+Обе эти формы записи делают одно и то же: увеличивают на `1`. 
+
+Тем не менее, между ними существует разница. Она видна только в том случае, когда мы хотим не только увеличить/уменьшить переменную, но и использовать результат в том же выражении.
+
+Например:
+
+```js
+//+ run
+var i = 1;
+var a = ++i; // (*)
+
+alert(a); // *!*2*/!*
+```
+
+В строке `(*)` вызов `++i` увеличит переменную, а *затем* вернёт ее значение в `a`. **То есть, в `a` попадёт значение `i` *после* увеличения**.
+
+**Постфиксная форма `i++` отличается от префиксной `++i` тем, что возвращает старое значение, бывшее до увеличения.** 
+
+В примере ниже в `a` попадёт старое значение `i`, равное `1`:
+
+```js
+//+ run
+var i = 1;
+var a = i++; // (*)
+
+alert(a); // *!*1*/!*
+```
+
+<ul>
+<li>Если результат оператора не используется, а нужно только увеличить/уменьшить переменную -- без разницы, какую форму использовать:
+
+```js
+//+ run
+var i = 0;
+i++; 
+++i; 
+alert(i); // 2
+```
+
+</li>
+<li>Если хочется тут же использовать результат, то нужна префиксная форма:
+
+```js
+//+ run
+var i = 0;
+alert( ++i ); // 1
+```
+
+</li>
+<li>Если нужно увеличить, но нужно значение переменной *до увеличения* -- постфиксная форма:
+
+```js
+//+ run
+var i = 0;
+alert( i++ ); // 0
+```
+
+</li>
+</ul>
+
+**Инкремент/декремент можно использовать в любых выражениях.** 
+
+При этом он имеет более высокий приоритет и выполняется раньше, чем арифметические операции:
+
+```js
+//+ run
+var i = 1;
+alert( 2 * ++i ); // 4
+```
+
+
+
+```js
+//+ run
+var i = 1;
+alert( 2 * i++ ); // 2, выполнился раньше но значение вернул старое
+```
+
+При этом, нужно с осторожностью использовать такую запись, потому что при чтении кода зачастую неочевидно, что переменая увеличивается. Три строки -- длиннее, зато нагляднее:
+
+```js
+//+ run
+var i = 1;
+alert( 2 * i );
+i++;
+```
+
+## Побитовые операторы
+
+Побитовые операторы рассматривают аргументы как 32-разрядные целые числа и работают на уровне их внутреннего двоичного представления.
+
+Эти операторы не являются чем-то специфичным для JavaScript, они поддерживаются в большинстве языков программирования. 
+
+Поддерживаются следующие побитовые операторы:
+<ul>
+<li>AND(и) ( `&` )</li>
+<li>OR(или) ( `|` )</li>
+<li>XOR(побитовое исключающее или) ( `^` )</li>
+<li>NOT(не) ( `~` )</li>
+<li>LEFT SHIFT(левый сдвиг) ( `<<` )</li>
+<li>RIGHT SHIFT(правый сдвиг) ( `>>` )</li>
+<li>ZERO-FILL RIGHT SHIFT(правый сдвиг с заполнением нулями) ( `>>>` )</li>
+</ul>
+
+Вы можете более подробно почитать о них в отдельной статье [](/bitwise-operators).
+
+
+
+## Вызов операторов с присваиванием
+
+Часто нужно применить оператор к переменной и сохранить результат в ней же, например:
+
+```js
+var n = 2;
+n = n + 5;  
+n = n * 2;
+```
+
+Эту запись можно укоротить при помощи совмещённых операторов: <code>+=, -=, *=, /=, &gt;&gt;=, &lt;&lt;=, &gt;&gt;&gt;=, &=, |=, ^=</code>.
+
+Вот так:
+
+```js
+//+ run
+var n = 2;
+n += 5; // теперь n=7 (работает как n = n + 5)
+n *= 2; // теперь n=14 (работает как n = n * 2)
+
+alert(n); // 14
+```
+
+Все эти операторы имеют в точности такой же приоритет, как обычное присваивание, то есть выполняются после большинства других операций.
+
+
+
+## Оператор запятая
+
+Запятая тоже является оператором. Ее можно вызвать явным образом, например:
+
+```js
+//+ run
+*!*
+a = (5, 6);
+*/!*
+
+alert(a);
+```
+
+Запятая позволяет перечислять выражения, разделяя их запятой `','`. Каждое из них -- вычисляется и отбрасывается, за исключением последнего, которое возвращается. 
+
+Запятая -- единственный оператор, приоритет которого ниже присваивания. В выражении `a = (5,6)` для явного задания приоритета использованы скобки, иначе оператор `'='` выполнился бы до запятой `','`, получилось бы `(a=5), 6`.
+
+Зачем же нужен такой странный оператор, который отбрасывает значения всех перечисленных выражений, кроме последнего?
+
+Обычно он используется в составе более сложных конструкций, чтобы сделать несколько действий в одной строке. Например:
+
+```js
+// три операции в одной строке
+for (*!*a = 1, b = 3, c = a*b*/!*; a < 10; a++) {
+ ...
+}
+```
+
+Такие трюки используются во многих JavaScript-фреймворках для укорачивания кода.
\ No newline at end of file
diff --git a/1-js/2-first-steps/9-comparison/article.md b/1-js/2-first-steps/9-comparison/article.md
new file mode 100644
index 00000000..29832001
--- /dev/null
+++ b/1-js/2-first-steps/9-comparison/article.md
@@ -0,0 +1,232 @@
+# Операторы сравнения и логические значения
+
+В этом разделе мы познакомимся с операторами сравнения и с логическими значениями, которые такие операторы возвращают.
+[cut]
+Многие операторы сравнения знакомы нам со школы:
+
+<ul>
+<li>Больше/меньше: <code>a &gt; b</code>, <code>a &lt; b</code>.</li>
+<li>Больше/меньше или равно: <code>a &gt;= b</code>, <code>a &lt;= b</code>.</li>
+<li>Равно `a == b`. 
+Для сравнения используется два символа равенства `'='`. Один символ `a = b` означал бы присваивание.</li>
+<li>"Не равно". В школе он пишется как <code>&ne;</code>, в JavaScript -- знак равенства с восклицательным знаком перед ним <code>!=</code>.</li>
+</ul>
+
+## Логические значения
+
+Как и другие операторы, сравнение возвращает значение. Это значение имеет специальный *логический* тип. 
+
+Существует всего два логических значения:
+<ul>
+<li>`true` -- имеет смысл "да", "верно", "истина".</li>
+<li>`false` -- означает "нет", "неверно", "ложь".</li>
+</ul>
+
+Например:
+
+```js
+//+ run
+alert( 2 > 1 ); // true, верно
+alert( 2 == 1 ); // false, неверно
+alert( 2 != 1 ); // true
+```
+
+Логические значения можно использовать и напрямую, присваивать переменным, работать с ними как с любыми другими:
+
+```js
+//+ run
+var a = true; // присвоили явно
+var b = 3 > 4; // false
+
+alert( b ); // false
+
+alert( a == b ); // (true == false) неверно, результат false
+```
+
+## Сравнение строк
+
+Строки сравниваются побуквенно:
+
+```js
+//+ run
+alert( 'Б' > 'А' ); // true
+```
+
+[warn header="Осторожно, Unicode!"]
+Аналогом "алфавита" во внутреннем представлении строк служит кодировка, у каждого символа -- свой номер (код). JavaScript использует кодировку [Unicode](http://ru.wikipedia.org/wiki/%D0%AE%D0%BD%D0%B8%D0%BA%D0%BE%D0%B4). 
+
+При этом сравниваются *численные коды символов*. В частности, код у символа `Б` больше, чем у `А`, поэтому и результат сравнения такой.
+
+**В кодировке Unicode обычно код у строчной буквы больше, чем у прописной.**
+
+Поэтому регистр имеет значение:
+
+```js
+//+ run
+alert('а' > 'Я'); // true, строчные буквы больше прописных
+```
+
+Для корректного сравнения символы должны быть в одинаковом регистре. 
+[/warn]
+
+Если строка состоит из нескольких букв, то сравнение осуществляется как в телефонной книжке или в словаре. Сначала сравниваются первые буквы, потом вторые, и так далее, пока одна не будет больше другой.
+
+Иными словами, больше -- та строка, которая в телефонной книге была бы на большей странице. 
+
+Например:
+<ul>
+<li>Если первая буква первой строки больше -- значит первая строка больше, независимо от остальных символов:
+
+```js
+//+ run
+alert( 'Банан' > 'Аят' );
+```
+
+</li>
+<li>Если одинаковы -- сравнение идёт дальше. Здесь оно дойдёт до третьей буквы:
+
+```js
+//+ run
+alert( 'Вася' > 'Ваня' ); // true, т.к. 'с' > 'н'
+```
+
+</li>
+<li>При этом любая буква больше отсутствия буквы:
+
+```js
+//+ run
+alert( 'Привет' > 'Прив' ); // true, так как 'е' больше чем "ничего".
+```
+
+</li>
+</ul>
+Такое сравнение называется *лексикографическим*. 
+
+
+[warn]
+Обычно мы получаем значения от посетителя в виде строк. Например, `prompt` возвращает *строку*, которую ввел посетитель. 
+
+Числа, полученные таким образом, в виде строк сравнивать нельзя, результат будет неверен. Например:
+
+```js
+//+ run
+alert( "2" > "14" ); // true, неверно, ведь 2 не больше 14
+```
+
+В примере выше `2` оказалось больше `14`, потому что строки сравниваются посимвольно, а первый символ `'2'` больше `'1'`. 
+
+Правильно было бы преобразовать их к числу явным образом. Например, поставив перед ними `+`:
+
+```js
+//+ run
+alert( +"2" > +"14" ); // false, теперь правильно
+```
+
+[/warn]
+
+## Сравнение разных типов
+
+При сравнении значения преобразуются к числам. Исключение: когда оба значения -- строки, тогда не преобразуются.
+
+Например:
+
+```js
+//+ run
+alert( '2' > 1 ); // true
+alert( '01' == 1 ); //true
+alert( false == 0 ); // true, false становится 0, а true 1.
+```
+
+Тема преобразований типов будет продолжена далее, в главе [](/types-conversion). 
+
+## Строгое равенство
+
+Обычное равенство не может отличить `0` от `false`:
+
+```js
+//+ run
+alert(0 == false); // true, так как false преобразуется к 0
+```
+
+Что же делать, если всё же нужно отличить `0` от `false`? 
+
+**Для проверки равенства без преобразования типов используются операторы строгого равенства `===` (тройное равно) и `!==`.**
+
+Они сравнивают без приведения типов. Если тип разный, то такие значения всегда неравны (строго):
+
+```js
+//+ run
+alert(0 === false); // false, т.к. типы различны
+```
+
+Строгое сравнение предпочтительно, если мы хотим быть уверены, что "сюрпризов" не будет.
+
+## Сравнение с null и undefined
+
+Проблемы со специальными значениями возможны, когда к переменной применяется операция сравнения `> < <= >=`, а у неё может быть как численное значение, так и `null/undefined`. 
+
+**Интуитивно кажется, что `null/undefined` эквивалентны нулю, но это не так! Они ведут себя по-другому.**
+ 
+<ol>
+<li>**Значения `null` и `undefined` равны `==` друг другу и не равны чему бы то ни было ещё.** 
+Это жёсткое правило буквально прописано в спецификации языка.</li>
+<li>**При преобразовании в число `null` становится `0`, а `undefined` становится `NaN`.**</li>
+</ol>
+
+Посмотрим забавные следствия.
+
+[smart header="Некорректный результат сравнения `null` с `0`"]
+Сравним `null` с нулём:
+
+```js
+//+ run
+alert(null > 0); // false
+alert(null == 0); // false
+```
+
+Итак, мы получили, что `null` не больше и не равен нулю. А теперь...
+
+```js
+//+ run
+alert(null >= 0); // *!*true*/!*
+```
+
+Как такое возможно? Если нечто *"больше или равно нулю"*, то резонно полагать, что оно либо *больше*, либо *равно*. Но здесь это не так.
+
+Дело в том, что алгоритмы проверки равенства `==` и сравнения `>= > < <=` работают по-разному.
+
+Сравнение честно приводит к числу, получается ноль. А при проверке равенства значения `null` и `undefined` обрабатываются особым образом: они равны друг другу, но не равны чему-то ещё. 
+
+В результате получается странная с точки зрения здравого смысла ситуация, которую мы видели в примере выше. 
+
+[/smart]
+
+[smart header="Несравнимый `undefined`"]
+Значение `undefined` вообще нельзя сравнивать:
+
+```js
+//+ run
+alert(undefined > 0); // false (1)
+alert(undefined < 0); // false (2)
+alert(undefined == 0); // false (3)
+```
+
+<ul>
+<li>Сравнения `(1)` и `(2)` дают `false` потому, что `undefined` при преобразовании к числу даёт `NaN`. А значение `NaN` по стандарту устроено так, что сравнения `==`, `<`, `>`, `<=`, `>=` и даже `===` с ним возвращают `false`.</li>
+<li>Проверка равенства `(3)` даёт `false`, потому что в стандарте явно прописано, что `undefined` равно лишь `null` и ничему другому.</li>
+</ul>
+[/smart]
+
+**Вывод: любые сравнения с `undefined/null`, кроме точного `===`, следует делать с осторожностью.**
+
+Желательно не использовать сравнения `>= > < <=` с ними, во избежание ошибок в коде.
+
+
+## Итого
+
+<ul>
+<li>В JavaScript есть логические значения `true` (истина) и `false` (ложь). Операторы сравнения возвращают их.</li>
+<li>Строки сравниваются побуквенно.</li>
+<li>Значения разных типов приводятся к числу при сравнении, за исключением строгого равенства `===` (`!==`).</li>
+<li>Значения `null` и `undefined` равны `==` друг другу и не равны ничему другому. В других сравнениях (с участием `>`,`<`) их лучше не использовать, так как они ведут себя не как `0`.</li>
+</ul>
\ No newline at end of file
diff --git a/1-js/2-first-steps/index.md b/1-js/2-first-steps/index.md
new file mode 100644
index 00000000..eee61f1c
--- /dev/null
+++ b/1-js/2-first-steps/index.md
@@ -0,0 +1,3 @@
+# Основы JavaScript
+
+Основные кирпичики из которых состоят скрипты.
\ No newline at end of file
diff --git a/1-js/3-writing-js/1-debugging-chrome/article.md b/1-js/3-writing-js/1-debugging-chrome/article.md
new file mode 100644
index 00000000..0d497bc7
--- /dev/null
+++ b/1-js/3-writing-js/1-debugging-chrome/article.md
@@ -0,0 +1,254 @@
+# Отладка в браузере Chrome
+
+Перед тем, как двигаться дальше, поговорим об отладке скриптов. 
+
+Все современные браузеры поддерживают для этого "инструменты разработчика". Исправление ошибок с их помощью намного проще и быстрее.
+
+На текущий момент самые многофункциональные инструменты -- в браузере Chrome. Также очень хорош Firebug (для Firefox).
+
+[cut]
+
+## Общий вид панели Sources
+
+В вашей версии Chrome панель может выглядеть несколько по-иному, но что где находится, должно быть понятно.
+
+Зайдите на страницу [debugging/pow/index.html](/debugging/pow/index.html) браузером Chrome.
+
+Откройте инструменты разработчика: [key F12] или в меню `Инструменты > Инструменты Разработчика`.
+
+Выберите сверху `Sources` (вместо иконок у вас могут быть просто надписи "Elements", "Resources", "Network", "Sources"...)
+
+<img src="chrome_sources.png">
+
+Вы видите три зоны:
+
+<ol>
+<li>**Зона исходных файлов.** В ней находятся все подключённые к странице файлы, включая JS/CSS. Выберите `pow.js`, если он не выбран.</li>
+<li>**Зона текста.** В ней находится текст файлов.</li>
+<li>**Зона информации и контроля.** Мы поговорим о ней позже.</li>
+</ol>
+
+Обычно зона исходных файлов при отладке не нужна. Скройте её кнопкой <span class="devtools" style="background-position:-200px -76px"></span>.
+
+## Общие кнопки управления
+
+<img src="chrome_sources_buttons.png">
+
+Три полезные кнопки управления:
+<dl>
+<dt>Формат <span class="devtools" style="background-position:-264px 94px"></span></dt>
+<dd>Нажатие форматирует текст текущего файла, расставляет отступы. Нужна, если вы хотите разобраться в чужом коде, плохо отформатированном или сжатом.</dd>
+<dt>Консоль <span class="devtools" style="background-position:-70px 94px"></span></dt>
+<dd>Очень полезная кнопка, открывает тут же консоль для запуска команд. Можно смотреть код и тут же запускайть функции. Её нажатие можно заменить на клавишу <code class="key">Esc</code>.</dd>
+<dt>Окно <span class="devtools" style="background-position:-6px 70px"></span></dt>
+<dd>Если код очень большой, то можно вынести инструменты разработки вбок или в отдельное окно, зажав эту кнопку и выбрав соответствующий вариант из списка.</dd>
+</dl>
+
+## Точки остановки
+
+Открыли `pow.js` в зоне текста? Кликните на 6й строке файла `pow.js`, прямо на цифре 6.
+
+Поздравляю! Вы поставили "точку остановки" или, как чаще говорят, "брейкпойнт".
+
+<img src="chrome_sources_breakpoint.png">
+
+Слово *Брейкпойнт* (breakpoint) -- часто используемый английский жаргонизм. Это то место в коде, где отладчик будет *автоматически* останавливать выполнение JavaScript, как только оно до него дойдёт.
+
+
+**В остановленном коде можно посмотреть текущие значения переменных, выполнять команды и т.п., в общем -- отлаживать его.**
+
+Вы можете видеть, что информация о точке остановки появилась справа, в подвкладке Breakpoints. 
+
+Вкладка Breakpoints очень удобна, когда код большой, она позволяет:
+
+<ul>
+<li>Быстро перейти на место кода, где стоит брейкпойнт -- кликом на текст.</li>
+<li>Временно выключить брейкпойнт -- кликом на чекбокс.</li>
+<li>Быстро удалить брейкпойнт -- правым кликом на текст и выбором Remove...</li>
+</ul>
+
+[smart header="Дополнительные возможности"]
+<ul>
+<li>Остановку можно инициировать и напрямую из кода скрипта, командой `debugger`:
+
+```js
+function pow(x, n) {
+  ...
+  debugger; // <-- отладчик остановится тут
+  ...
+}
+```
+
+</li>
+<li>*Правый клик* на номер строки `pow.js` позволит создать условную точку остановки (conditional breakpoint), т.е. задать условие, при котором точка остановки сработает.
+
+Это удобно, если остановка нужна только при определённом значении переменной или параметра функции.
+</li>
+</ul>
+[/smart]
+
+## Остановиться и осмотреться
+
+Наша функция выполняется сразу при загрузке страницы, так что самый простой способ активировать JavaScript -- перезагрузить её. Итак, нажимаем [key F5] (Windows, Linux) или [key Cmd+R] (Mac).
+
+Если вы сделали всё, как описано выше, то выполнение прервётся как раз на 6й строке.
+
+<img src="chrome_sources_break.png">
+
+Обратите внимание на информационные вкладки справа (отмечены стрелками). 
+
+В них мы можем посмотреть текущее состояние:
+<ol>
+<li>**`Watch Expressions` -- показывает текущие значения любых выражений.**
+
+Можно раскрыть эту вкладку, нажать мышью `+` на ней и ввести любое выражение. Отладчик будет отображать его значение на текущий момент, автоматически перевычисляя его при проходе по коду.</li>
+<li>**`Call Stack` -- стек вызовов, все вложенные вызовы, которые привели к текущему месту кода.** 
+
+На текущий момент видно, отладчик находится в функции `pow` (pow.js, строка 6), вызванной из анонимного кода (index.html, строка 13).</li>
+<li>**`Scope Variables` -- переменные.**
+
+На текущий момент строка 6 ещё не выполнилась, поэтому `result` равен `undefined`.
+
+В `Local` показываются переменные функции: объявленные через `var` и параметры. Вы также можете там видеть ключевое слово `this`, если вы не знаете, что это такое -- ничего страшного, мы это обсудим позже, в следующих главах учебника.
+
+В `Global` -- глобальные переменные и функции.
+</li>
+</ol>
+
+## Управление выполнением
+
+Пришло время "погонять" скрипт и "оттрейсить" (от англ. trace, отслеживать) его работу.
+
+Обратим внимание на панель управления справа-сверху, в ней есть 6 кнопок:
+
+<dl>
+<dt><img style="vertical-align:middle" src="manage1.png"> -- продолжить выполнение, горячая клавиша [key F8].</dt>
+<dd> Если скрипт не встретит новых точек остановки, то на этом работа в отладчике закончится.
+
+Нажмите на эту кнопку. 
+
+Вы увидите, что отладчик остался на той же строке, но в `Call Stack` появился новый вызов. Это произошло потому, что в 6й строке находится рекурсивный вызов функции `pow`, т.е. управление перешло в неё опять, но с другими аргументами.
+
+Походите по стеку вверх-вниз -- вы увидите, что действительно аргументы разные.
+</dd>
+<dt><img style="vertical-align:middle" src="manage2.png"> -- сделать шаг, не заходя внутрь функции, горячая клавиша [key F10].</dt>
+<dd>Выполняет одну команду скрипта. Если в ней есть вызов функции -- то отладчик обходит его стороной, т.е. не переходит на код внутри.
+
+Эта кнопка очень удобна, если в текущей строке вызывается функция JS-фреймворка или какая-то другая, которая нас ну совсем не интересует. Тогда выполнение продолжится дальше, без захода в эту функцию, что нам и нужно.
+
+Обратим внимание, в данном случае эта кнопка при нажатии всё-таки перейдёт внутрь вложенного вызова `pow`, так как внутри `pow` находится брейкпойнт, а на включённых брейкпойнтах отладчик останавливается всегда. 
+</dd>
+<dt><img style="vertical-align:middle" src="manage3.png"> -- сделать шаг, горячая клавиша [key F11].</dt>
+<dd>Выполняет одну команду скрипта и переходит к следующей. Если есть вложенный вызов, то заходит внутрь функции.
+
+Эта кнопка позволяет подробнейшим образом пройтись по очереди по командам скрипта.
+</dd>
+<dt><img style="vertical-align:middle" src="manage4.png"> -- выполнять до выхода из текущей функции, горячая клавиша [key Shift+F11].</dt>
+<dd>Выполняет команды до завершения текущей функции.
+
+Эта кнопка очень удобна в случае, если мы нечаянно вошли во вложенный вызов, который нам не интересен -- чтобы быстро из него выйти.
+</dd>
+<dt><img style="vertical-align:middle" src="manage5.png"> -- отключить/включить все точки остановки.</dt>
+<dd>Эта кнопка никак не двигает нас по коду, она позволяет временно отключить все точки остановки в файле.
+</dd>
+<dt><img style="vertical-align:middle" src="manage6.png"> -- включить/отключить автоматическую остановку при ошибке.</dt>
+<dd>Эта кнопка -- одна из самых важных. 
+
+Нажмите её несколько раз. В старых версиях Chrome у неё три режима  -- нужен фиолетовый, в новых -- два, тогда достаточно синего.
+
+Когда она включена, то при ошибке в коде он автоматически остановится и мы сможем посмотреть в отладчике текущие значения переменных, при желании выполнить команды и выяснить, как так получилось.
+</dd>
+</dl>
+
+**Процесс отладки заключается в том, что мы останавливаем скрипт, смотрим, что с переменными, переходим дальше и ищем, где поведение отклоняется от правильного.**
+
+[smart header="Дополнительные возможности"]
+Правый клик на номер строки открывает контекстное меню, в котором можно запустить выполнение кода до неё (Continue to here). 
+
+Это очень удобно, если промежуточные строки нас не интересуют.
+[/smart]
+
+
+
+## Консоль
+
+При отладке, кроме просмотра переменных, бывает полезно запускать команды JavaScript. Для этого нужна консоль.
+
+В неё можно перейти, нажав кнопку "Console" вверху-справа, а можно и открыть в дополнение к отладчику, нажав на кнопку <span class="devtools" style="background-position:-72px -28px"></span> или клавишей [key ESC].
+
+**Самая любимая команда разработчиков: `console.log(...)`.**
+
+Она пишет переданные ей аргументы в консоль, например:
+
+```js
+//+ run
+// результат будет виден в консоли
+for(var i=0; i<5; i++) {
+  console.log("значение", i);
+}
+```
+
+Полную информацию по специальным командам консоли вы можете получить на странице [](https://developers.google.com/chrome-developer-tools/docs/commandline-api?hl=ru). Эти команды также действуют в Firebug (отладчик для браузера Firefox).
+
+Консоль поддерживают все браузеры, и, хотя IE10- поддерживает далеко не все функции, `console.log` работает везде, пользуйтесь им вместо `alert`.
+
+## Ошибки
+
+Ошибки JavaScript выводятся в консоли.
+
+Например, прервите отладку -- для этого достаточно закрыть инструменты разрабтчика -- и откройте страницу [debugging/pow-error/index.html](/debugging/pow-error/index.html). 
+
+Перейдите во вкладку Console инструментов разработчика ([key Ctrl+Shift+J] / [key Cmd+Shift+J]).
+
+В консоли вы увидите что-то подобное:
+<img src="console_error.png">
+
+Красная строка -- это сообщение об ошибке.
+
+В чём дело? Если мы хотим понять, что случилось -- перейдём в отладчик. 
+
+Для этого:
+<ol>
+<li>Перейдите на вкладку Sources.</li>
+<li>Включите останов при ошибке, используя кнопку <img style="vertical-align:middle" src="manage6.png">.</li>
+<li>Перезагрузите страницу.</li>
+</ol>
+
+После перезагрузки страницы JavaScript-код запустится снова и отладчик остановит выполнение на строке с ошибкой:
+
+<img src="chrome_break_error.png">
+
+Можно посмотреть значения переменных. Открыть консоль и попробовать запустить что-то в ней. Поставить брейкпойнты раньше по коду и посмотреть, что привело к такой печальной картине, и так далее.
+
+В данном случае-то всё просто: опечатка в имени переменной `y` вместо `x`. Этот тип ошибки называется `ReferenceError`.
+
+## Итого
+
+Отладчик позволяет:
+<ul>
+<li>Останавливаться на отмеченном месте (breakpoint) или по команде `debugger`.</li>
+<li>Выполнять код -- по одной строке или до определённого места.</li>
+<li>Смотреть переменные, выполнять команды в консоли и т.п.</li>
+</ul>
+
+В этой главе кратко описаны возможности отладчика Google Chrome, относящиеся именно к работе с кодом. 
+
+Пока что это всё, что нам надо, но, конечно, инструменты разработчика умеют много чего ещё. В частности, вкладка Elements -- позволяет работать со страницей (понадобится позже), Timeline -- смотреть, что именно делает браузер и сколько это у него занимает и т.п. 
+
+Осваивать можно двумя путями:
+<ol>
+<li>[Официальная документация](https://developers.google.com/chrome-developer-tools/docs/overview) (на англ.)</li>
+<li>Кликать в разных местах и смотреть, что получается. Не забывать о клике правой кнопкой мыши.</li>
+</ol>
+
+Мы ещё вернёмся к отладчику позже, когда будем работать с HTML.
+[head]
+<style>
+span.devtools {
+  display: inline-block;
+  background-image: url(/article/debugging-chrome/statusbarButtonGlyphs.svg);
+  height:16px;
+  width:16px;
+}
+</style>
+[/head]
\ No newline at end of file
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_break_error.png b/1-js/3-writing-js/1-debugging-chrome/chrome_break_error.png
new file mode 100755
index 00000000..e55e7e02
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/chrome_break_error.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_break_error@2x.png b/1-js/3-writing-js/1-debugging-chrome/chrome_break_error@2x.png
new file mode 100755
index 00000000..96341920
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/chrome_break_error@2x.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_sources.png b/1-js/3-writing-js/1-debugging-chrome/chrome_sources.png
new file mode 100755
index 00000000..be7df489
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/chrome_sources.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_sources@2x.png b/1-js/3-writing-js/1-debugging-chrome/chrome_sources@2x.png
new file mode 100755
index 00000000..effa8673
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/chrome_sources@2x.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_sources_break.png b/1-js/3-writing-js/1-debugging-chrome/chrome_sources_break.png
new file mode 100755
index 00000000..a6b806ac
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/chrome_sources_break.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_sources_break@2x.png b/1-js/3-writing-js/1-debugging-chrome/chrome_sources_break@2x.png
new file mode 100755
index 00000000..35593906
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/chrome_sources_break@2x.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_sources_breakpoint.png b/1-js/3-writing-js/1-debugging-chrome/chrome_sources_breakpoint.png
new file mode 100755
index 00000000..17ddbab4
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/chrome_sources_breakpoint.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_sources_breakpoint@2x.png b/1-js/3-writing-js/1-debugging-chrome/chrome_sources_breakpoint@2x.png
new file mode 100755
index 00000000..e1cce1b2
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/chrome_sources_breakpoint@2x.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_sources_buttons.png b/1-js/3-writing-js/1-debugging-chrome/chrome_sources_buttons.png
new file mode 100755
index 00000000..ecfe6d8f
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/chrome_sources_buttons.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/chrome_sources_buttons@2x.png b/1-js/3-writing-js/1-debugging-chrome/chrome_sources_buttons@2x.png
new file mode 100755
index 00000000..8a927d30
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/chrome_sources_buttons@2x.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/console_error.png b/1-js/3-writing-js/1-debugging-chrome/console_error.png
new file mode 100755
index 00000000..18346ea6
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/console_error.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/console_error@2x.png b/1-js/3-writing-js/1-debugging-chrome/console_error@2x.png
new file mode 100755
index 00000000..1e470740
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/console_error@2x.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage1.png b/1-js/3-writing-js/1-debugging-chrome/manage1.png
new file mode 100755
index 00000000..bbc2a6c7
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/manage1.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage1@2x.png b/1-js/3-writing-js/1-debugging-chrome/manage1@2x.png
new file mode 100755
index 00000000..61ffb88f
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/manage1@2x.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage2.png b/1-js/3-writing-js/1-debugging-chrome/manage2.png
new file mode 100755
index 00000000..40abcd45
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/manage2.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage2@2x.png b/1-js/3-writing-js/1-debugging-chrome/manage2@2x.png
new file mode 100755
index 00000000..90977218
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/manage2@2x.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage3.png b/1-js/3-writing-js/1-debugging-chrome/manage3.png
new file mode 100755
index 00000000..5f82f393
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/manage3.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage3@2x.png b/1-js/3-writing-js/1-debugging-chrome/manage3@2x.png
new file mode 100755
index 00000000..1c4b1ac8
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/manage3@2x.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage4.png b/1-js/3-writing-js/1-debugging-chrome/manage4.png
new file mode 100755
index 00000000..6c851d68
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/manage4.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage4@2x.png b/1-js/3-writing-js/1-debugging-chrome/manage4@2x.png
new file mode 100755
index 00000000..24e18a5e
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/manage4@2x.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage5.png b/1-js/3-writing-js/1-debugging-chrome/manage5.png
new file mode 100755
index 00000000..9f30eb2d
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/manage5.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage5@2x.png b/1-js/3-writing-js/1-debugging-chrome/manage5@2x.png
new file mode 100755
index 00000000..ad386c3e
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/manage5@2x.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage6.png b/1-js/3-writing-js/1-debugging-chrome/manage6.png
new file mode 100755
index 00000000..30409411
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/manage6.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/manage6@2x.png b/1-js/3-writing-js/1-debugging-chrome/manage6@2x.png
new file mode 100755
index 00000000..d84cd790
Binary files /dev/null and b/1-js/3-writing-js/1-debugging-chrome/manage6@2x.png differ
diff --git a/1-js/3-writing-js/1-debugging-chrome/statusbarButtonGlyphs.svg b/1-js/3-writing-js/1-debugging-chrome/statusbarButtonGlyphs.svg
new file mode 100755
index 00000000..6e10e153
--- /dev/null
+++ b/1-js/3-writing-js/1-debugging-chrome/statusbarButtonGlyphs.svg
@@ -0,0 +1,1735 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="120"
+   id="svg2"
+   version="1.1"
+   width="320"
+   xml:space="preserve"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="statusbarButtonGlyphs.svg"
+   inkscape:export-filename="/Users/pfeldman/code/chromium/src/third_party/WebKit/Source/devtools/front_end/Images/statusbarButtonGlyphs2x.png"
+   inkscape:export-xdpi="180"
+   inkscape:export-ydpi="180"><metadata
+   id="metadata3317"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="2"
+   gridtolerance="2"
+   guidetolerance="2"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1436"
+   inkscape:window-height="856"
+   id="namedview3315"
+   showgrid="true"
+   width="640px"
+   inkscape:zoom="16"
+   inkscape:cx="114.60154"
+   inkscape:cy="15.701835"
+   inkscape:window-x="109"
+   inkscape:window-y="93"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="svg2"><inkscape:grid
+     empspacing="2"
+     visible="true"
+     enabled="true"
+     snapvisiblegridlinesonly="true"
+     spacingx="32px"
+     spacingy="24px"
+     type="xygrid"
+     id="grid3327"
+     dotted="false" /></sodipodi:namedview>
+  <defs
+   id="defs6"><linearGradient
+   id="linearGradient5337"><stop
+     style="stop-color:#e59290;stop-opacity:1;"
+     offset="0"
+     id="stop5339" /><stop
+     style="stop-color:#e99890;stop-opacity:1;"
+     offset="1"
+     id="stop5341" /></linearGradient><linearGradient
+   id="linearGradient5329"><stop
+     id="stop5331"
+     offset="0"
+     style="stop-color:#c0544f;stop-opacity:1;" /><stop
+     id="stop5333"
+     offset="1"
+     style="stop-color:#d08481;stop-opacity:1;" /></linearGradient><linearGradient
+   id="linearGradient5667"><stop
+     style="stop-color:#ffa801;stop-opacity:0;"
+     offset="0"
+     id="stop5669" /><stop
+     style="stop-color:#f0fb3d;stop-opacity:1;"
+     offset="1"
+     id="stop5671" /></linearGradient><linearGradient
+   id="linearGradient5655"><stop
+     id="stop5657"
+     offset="0"
+     style="stop-color:#ffbd00;stop-opacity:0.64957267;" /><stop
+     id="stop5659"
+     offset="1"
+     style="stop-color:#ffffff;stop-opacity:0.90598291;" /></linearGradient><linearGradient
+   id="linearGradient5647"><stop
+     style="stop-color:#a16a00;stop-opacity:1;"
+     offset="0"
+     id="stop5649" /><stop
+     style="stop-color:#c68200;stop-opacity:1;"
+     offset="1"
+     id="stop5651" /></linearGradient><linearGradient
+   id="linearGradient5505"><stop
+     style="stop-color:#00d600;stop-opacity:0;"
+     offset="0"
+     id="stop5507" /><stop
+     style="stop-color:#d8fc7b;stop-opacity:0.81196582;"
+     offset="1"
+     id="stop5509" /></linearGradient><linearGradient
+   id="linearGradient5497"><stop
+     id="stop5499"
+     offset="0"
+     style="stop-color:#00ba00;stop-opacity:1;" /><stop
+     id="stop5501"
+     offset="1"
+     style="stop-color:#ffffff;stop-opacity:0.90598291;" /></linearGradient><linearGradient
+   id="linearGradient5489"><stop
+     style="stop-color:#00a104;stop-opacity:1;"
+     offset="0"
+     id="stop5491" /><stop
+     style="stop-color:#00c605;stop-opacity:1;"
+     offset="1"
+     id="stop5493" /></linearGradient><linearGradient
+   id="linearGradient5441"><stop
+     id="stop5443"
+     offset="0"
+     style="stop-color:#ff0000;stop-opacity:0;" /><stop
+     id="stop5445"
+     offset="1"
+     style="stop-color:#f0cb68;stop-opacity:0.70940173;" /></linearGradient><linearGradient
+   id="linearGradient5429"><stop
+     style="stop-color:#e60000;stop-opacity:0.64957267;"
+     offset="0"
+     id="stop5431" /><stop
+     style="stop-color:#ffffff;stop-opacity:0.90598291;"
+     offset="1"
+     id="stop5433" /></linearGradient><linearGradient
+   id="linearGradient5421"><stop
+     style="stop-color:#ff0000;stop-opacity:1;"
+     offset="0"
+     id="stop5423" /><stop
+     style="stop-color:#9f0000;stop-opacity:1;"
+     offset="1"
+     id="stop5425" /></linearGradient><linearGradient
+   id="linearGradient5409"><stop
+     id="stop5411"
+     offset="0"
+     style="stop-color:#a10000;stop-opacity:1;" /><stop
+     id="stop5413"
+     offset="1"
+     style="stop-color:#c60000;stop-opacity:1;" /></linearGradient><linearGradient
+   id="linearGradient5401"><stop
+     style="stop-color:#000000;stop-opacity:1;"
+     offset="0"
+     id="stop5403" /><stop
+     style="stop-color:#000000;stop-opacity:0;"
+     offset="1"
+     id="stop5405" /></linearGradient><linearGradient
+   id="linearGradient5093"><stop
+     style="stop-color:#000000;stop-opacity:1;"
+     offset="0"
+     id="stop5095" /><stop
+     style="stop-color:#5c5c5c;stop-opacity:1;"
+     offset="1"
+     id="stop5097" /></linearGradient><linearGradient
+   id="linearGradient5083"><stop
+     style="stop-color:#000000;stop-opacity:1;"
+     offset="0"
+     id="stop5085" /><stop
+     style="stop-color:#929292;stop-opacity:1;"
+     offset="1"
+     id="stop5087" /></linearGradient><linearGradient
+   id="linearGradient4925"><stop
+     style="stop-color:#ac1f10;stop-opacity:1;"
+     offset="0"
+     id="stop4927" /><stop
+     style="stop-color:#f48f84;stop-opacity:1;"
+     offset="1"
+     id="stop4929" /></linearGradient><linearGradient
+   id="linearGradient4827"><stop
+     id="stop4829"
+     offset="0"
+     style="stop-color:#d7687d;stop-opacity:1;" /><stop
+     id="stop4831"
+     offset="1"
+     style="stop-color:#b21402;stop-opacity:1;" /></linearGradient><linearGradient
+   id="linearGradient4643"><stop
+     style="stop-color:#d76f7d;stop-opacity:1;"
+     offset="0"
+     id="stop4645" /><stop
+     style="stop-color:#b21402;stop-opacity:1;"
+     offset="1"
+     id="stop4647" /></linearGradient>
+    <mask
+   id="mask16" />
+    <clipPath
+   id="clipPath26">
+      <path
+   d="M 0,560 960,560 960,0 0,0 0,560 z"
+   id="path28"
+   inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+   id="clipPath34">
+      <path
+   d="m 160,296 16.125,0 0,-14 -16.125,0 0,14 z"
+   id="path36"
+   inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+   id="clipPath50">
+      <path
+   d="m 358,303 22,0 0,-4 -22,0 0,4 z"
+   id="path52"
+   inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+   id="clipPath64">
+      <path
+   d="m 484.867,399.559 22.705,0 0,-19.118 -22.705,0 0,19.118 z"
+   id="path66"
+   inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+   id="clipPath96">
+      <path
+   d="M 0,560 960,560 960,0 0,0 0,560 z"
+   id="path98"
+   inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+   id="clipPath200">
+      <path
+   d="m 662,341 c 0,-9.941 8.059,-18 18,-18 l 0,0 c 9.942,0 18,8.059 18,18 l 0,0 c 0,9.941 -8.058,18 -18,18 l 0,0 c -9.941,0 -18,-8.059 -18,-18"
+   id="path202"
+   inkscape:connector-curvature="0" />
+    </clipPath>
+    <radialGradient
+   cx="0"
+   cy="0"
+   fx="0"
+   fy="0"
+   gradientTransform="matrix(17.999599,0,0,-17.999599,680,340.99951)"
+   gradientUnits="userSpaceOnUse"
+   id="radialGradient208"
+   r="1"
+   spreadMethod="pad">
+      <stop
+   id="stop210"
+   offset="0"
+   style="stop-color:#000000;stop-opacity:1" />
+      <stop
+   id="stop212"
+   offset="1"
+   style="stop-color:#000000;stop-opacity:0" />
+    </radialGradient>
+    <clipPath
+   id="clipPath220">
+      <path
+   d="M 0,560 960,560 960,0 0,0 0,560 z"
+   id="path222"
+   inkscape:connector-curvature="0" />
+    </clipPath>
+  
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+      
+    
+      
+    
+      
+    
+      
+    
+      
+    
+      
+    
+      
+    
+      
+    
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+      
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+      
+        
+        
+        
+      <radialGradient
+   inkscape:collect="always"
+   xlink:href="#radialGradient208"
+   id="radialGradient3862"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(17.999599,0,0,-17.999599,680,340.99951)"
+   spreadMethod="pad"
+   cx="0"
+   cy="0"
+   fx="0"
+   fy="0"
+   r="1" /><radialGradient
+   inkscape:collect="always"
+   xlink:href="#radialGradient208"
+   id="radialGradient6632"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(17.999599,0,0,-17.999599,680,340.99951)"
+   spreadMethod="pad"
+   cx="0"
+   cy="0"
+   fx="0"
+   fy="0"
+   r="1" /><radialGradient
+   inkscape:collect="always"
+   xlink:href="#radialGradient208"
+   id="radialGradient6811"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(17.999599,0,0,-17.999599,680,340.99951)"
+   spreadMethod="pad"
+   cx="0"
+   cy="0"
+   fx="0"
+   fy="0"
+   r="1" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient4643"
+   id="linearGradient4671"
+   x1="0"
+   y1="0"
+   x2="24"
+   y2="0"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(-1,0,0,-1,24,0)" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient4643"
+   id="linearGradient4759"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(-1,0,0,-1,24,0)"
+   x1="0"
+   y1="0"
+   x2="24"
+   y2="0" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient4643"
+   id="linearGradient4769"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(-1,0,0,-1,24,0)"
+   x1="0"
+   y1="0"
+   x2="24"
+   y2="0" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient4643"
+   id="linearGradient4785"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(-1,0,0,-1,24,0)"
+   x1="0"
+   y1="0"
+   x2="24"
+   y2="0" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient4643"
+   id="linearGradient4807"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(-1,0,0,-1,24,0)"
+   x1="0"
+   y1="0"
+   x2="24"
+   y2="0" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient4827"
+   id="linearGradient4825"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(-1,0,0,-1,24,0)"
+   x1="0"
+   y1="0"
+   x2="24"
+   y2="0" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient4643"
+   id="linearGradient4833"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(-1,0,0,-1,24,0)"
+   x1="0"
+   y1="0"
+   x2="24"
+   y2="0" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient4827"
+   id="linearGradient4857"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(-1,0,0,-1,24,0)"
+   x1="0"
+   y1="0"
+   x2="24"
+   y2="0" />
+          
+        <linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient4827"
+   id="linearGradient4890"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(-1,0,0,-1,24,0)"
+   x1="0"
+   y1="0"
+   x2="24"
+   y2="0" />
+          
+        <linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient4643"
+   id="linearGradient4915"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(-1,0,0,-1,24,0)"
+   x1="0"
+   y1="0"
+   x2="24"
+   y2="0" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient4925"
+   id="linearGradient4931"
+   x1="0"
+   y1="0"
+   x2="24"
+   y2="0"
+   gradientUnits="userSpaceOnUse" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient4827"
+   id="linearGradient4965"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(0,-0.58333333,-0.58333333,0,120,111)"
+   x1="0"
+   y1="0"
+   x2="24"
+   y2="0" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5083"
+   id="linearGradient5089"
+   x1="113"
+   y1="104"
+   x2="127"
+   y2="104"
+   gradientUnits="userSpaceOnUse" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5093"
+   id="linearGradient5099"
+   x1="113"
+   y1="104"
+   x2="127"
+   y2="104"
+   gradientUnits="userSpaceOnUse" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient4827"
+   id="linearGradient5103"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(0,-0.58333333,-0.58333333,0,120,111)"
+   x1="0"
+   y1="0"
+   x2="24"
+   y2="0" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient4827"
+   id="linearGradient5281"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(0,-0.58333333,-0.58333333,0,120,111)"
+   x1="0"
+   y1="0"
+   x2="24"
+   y2="0" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5409"
+   id="linearGradient5737"
+   gradientUnits="userSpaceOnUse"
+   x1="227.875"
+   y1="103.15625"
+   x2="235.125"
+   y2="103.15625" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5489"
+   id="linearGradient5743"
+   gradientUnits="userSpaceOnUse"
+   x1="227.875"
+   y1="103.15625"
+   x2="235.125"
+   y2="103.15625" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5497"
+   id="linearGradient5753"
+   gradientUnits="userSpaceOnUse"
+   x1="227.875"
+   y1="103.15625"
+   x2="235.125"
+   y2="103.15625" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5505"
+   id="linearGradient5755"
+   gradientUnits="userSpaceOnUse"
+   x1="227.875"
+   y1="103.15625"
+   x2="235.125"
+   y2="103.15625" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5429"
+   id="linearGradient5767"
+   gradientUnits="userSpaceOnUse"
+   x1="227.875"
+   y1="103.15625"
+   x2="235.125"
+   y2="103.15625" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5441"
+   id="linearGradient5769"
+   gradientUnits="userSpaceOnUse"
+   x1="227.875"
+   y1="103.15625"
+   x2="235.125"
+   y2="103.15625" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5655"
+   id="linearGradient5835"
+   gradientUnits="userSpaceOnUse"
+   x1="227.875"
+   y1="103.15625"
+   x2="235.125"
+   y2="103.15625" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5667"
+   id="linearGradient5837"
+   gradientUnits="userSpaceOnUse"
+   x1="227.875"
+   y1="103.15625"
+   x2="235.125"
+   y2="103.15625" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5329"
+   id="linearGradient5327"
+   x1="113"
+   y1="104"
+   x2="127"
+   y2="104"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(0,-1,1,0,16,224)" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5329"
+   id="linearGradient5335"
+   gradientUnits="userSpaceOnUse"
+   x1="113"
+   y1="104"
+   x2="127"
+   y2="104"
+   gradientTransform="matrix(0,-1,1,0,16,224)" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5337"
+   id="linearGradient5343"
+   x1="96.5"
+   y1="103"
+   x2="109.5"
+   y2="103"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(0,1,-1,0,206,0)" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5329"
+   id="linearGradient5354"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(0,-1,1,0,16,224)"
+   x1="113"
+   y1="104"
+   x2="127"
+   y2="104" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5329"
+   id="linearGradient5356"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(0,-1,1,0,16,224)"
+   x1="113"
+   y1="104"
+   x2="127"
+   y2="104" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5337"
+   id="linearGradient5358"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(0,1,-1,0,206,0)"
+   x1="96.5"
+   y1="103"
+   x2="109.5"
+   y2="103" /><linearGradient
+   inkscape:collect="always"
+   xlink:href="#linearGradient5337"
+   id="linearGradient5365"
+   gradientUnits="userSpaceOnUse"
+   gradientTransform="matrix(0,1,-1,0,206,0)"
+   x1="96.5"
+   y1="103"
+   x2="109.5"
+   y2="103" /></defs>
+  
+<g
+   inkscape:groupmode="layer"
+   id="layer1"
+   inkscape:label="grid"
+   style="display:inline"
+   transform="translate(0,-580)" /><g
+   id="g12"
+   transform="matrix(0.50028185,0,0,-0.5104134,-36.680797,258.16231)">
+      <g
+   transform="matrix(639.91985,0,0,143.98197,72.039148,269.00968)"
+   id="g14" />
+    </g><g
+   id="g30"
+   transform="matrix(0.50028185,0,0,-0.5104134,-36.013832,209.91231)">
+          <g
+   id="g32" />
+          <g
+   id="g38">
+            <g
+   style="opacity:0.5"
+   id="g40"
+   clip-path="url(#clipPath34)">
+              <g
+   transform="translate(160,296)"
+   id="g42">
+                <path
+   inkscape:connector-curvature="0"
+   style="fill:#424242;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path44"
+   d="m 0,0 4,-5 0,-9 8,0 0,9 4.125,5 L 0,0 z" />
+              </g>
+            </g>
+          </g>
+        </g><g
+   id="g60"
+   transform="matrix(0.50650085,0,0,-0.52309465,-41.085547,214.0068)">
+          <g
+   id="g62" />
+          <g
+   id="g68">
+            <g
+   style="opacity:0.39999402"
+   id="g70"
+   clip-path="url(#clipPath64)">
+              <g
+   transform="translate(491.5488,386.3623)"
+   id="g72">
+                <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path74"
+   d="M 0,0 -3.618,4.311 -6.682,1.739 -0.254,-5.921 2.58,-3.076 16.023,10.367 13.195,13.196 0,0 z" />
+              </g>
+            </g>
+          </g>
+        </g><path
+   d="M 57,12 53.58829,8 39,8 l 0,8 14.58829,0"
+   id="path78"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" /><path
+   d="M 25,36 21.362197,32 19.570257,32 14,40 21.362197,40 25,36 z"
+   id="path82"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" /><path
+   d="M 7,32 7,40 9.0527005,40 14,32 7,32 z"
+   id="path86"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" /><path
+   d="M 9.668154,44.54737 8.07369,43.22813 18.831348,27.45264 20.42631,28.77187 9.668154,44.54737 z"
+   id="path90"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" /><g
+   transform="matrix(0.5063291,0,0,-0.5063291,16,15.10127)"
+   id="g100">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path102"
+   d="m 0,0 c -3.452,0 -6.25,2.798 -6.25,6.25 0,3.452 2.798,6.25 6.25,6.25 L 0,16 c -5.454,0 -9.875,-4.421 -9.875,-9.875 0,-5.454 4.421,-9.875 9.875,-9.875 5.454,0 9.875,4.421 9.875,9.875 l -3.631,0 C 6.176,2.731 3.41,0 0,0" />
+        </g><g
+   transform="matrix(0.49315069,0,0,-0.5303633,16,5)"
+   id="g104">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path106"
+   d="M 0,0 9.125,-5.657 0,-11.313" />
+        </g><path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path108"
+   d="m 53,37 -10,0 0,-5 10,0 0,5 z m -12,5 14,0 0,-12 -14,0 0,12 z" /><g
+   transform="matrix(0.5,0,0,-0.5,10,57)"
+   id="g110">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path112"
+   d="m 0,0 -4,0 0,-14 0,-4 4,0 18,0 0,4 -18,0 0,14 z" />
+        </g><path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path114"
+   d="m 13,56 7,0 0,5 -7,0 0,-5 z m 7,-2 -7,0 -2,0 0,2 0,5 0,2 2,0 7,0 2,0 0,-2 0,-5 0,-2 -2,0 z" /><g
+   id="g5185"><path
+     d="m 86,33 -8,0 0,-2 8,0 0,2 z"
+     id="path116"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><g
+     id="g118"
+     transform="matrix(0.49494449,0,0,-0.50824235,71.5,31.43731)">
+          <path
+   d="M 0,0 8.485,-8.485 0,-16.971 l 2.829,-2.828 8.485,8.485 2.829,2.829 -2.829,2.828 L 2.829,2.828 0,0 z"
+   id="path120"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+        </g><path
+     d="m 86,37 -6,0 0,-2 6,0 0,2 z"
+     id="path122"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 86,41 -8,0 0,-2 8,0 0,2 z"
+     id="path124"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /></g><g
+   transform="matrix(0.5,0,0,-0.5,80.4375,16.9375)"
+   id="g126">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path128"
+   d="m 0,0 c -4.97,0 -9,4.03 -9,9 0,1.76 0.513,3.397 1.387,4.785 L 4.785,1.387 C 3.397,0.513 1.76,0 0,0 M 9,9 C 9,7.24 8.487,5.603 7.613,4.215 L -4.785,16.613 C -3.397,17.487 -1.76,18 0,18 4.97,18 9,13.97 9,9 M 0.125,21.875 c -7.18,0 -13,-5.82 -13,-13 0,-7.18 5.82,-13 13,-13 7.18,0 13,5.82 13,13 0,7.18 -5.82,13 -13,13" />
+        </g><path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path130"
+   d="m 117,65 -10,0 0,-10 10,0 0,10 z" /><g
+   transform="matrix(0.5,0,0,-0.5,116,37)"
+   id="g132">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path134"
+   d="m 0,0 0,-8 -16,0 0,6 -2,0 0,-6 0,-2 2,0 18,0 0,2 0,8 -2,0 z" />
+        </g><g
+   transform="matrix(0.50647405,0,0,-0.52309465,111.88426,35.90276)"
+   id="g136">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path138"
+   d="m 0,0 -3.618,4.311 -3.064,-2.572 6.428,-7.66 2.835,2.845 13.443,13.443 -2.828,2.829 L 0,0 z" />
+        </g><g
+   transform="matrix(0.47140904,0,0,-0.47140904,149,8.33314)"
+   id="g140">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path142"
+   d="M 0,0 -2.828,2.828 -10.606,-4.95 -18.385,2.828 -21.213,0 l 7.778,-7.778 -7.778,-7.779 2.828,-2.828 7.779,7.779 7.778,-7.779 L 0,-15.557 -7.778,-7.778 0,0 z" />
+        </g><g
+   transform="matrix(0.5,0,0,-0.50757125,46.5,65.23466)"
+   id="g144">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path146"
+   d="m 0,0 c 0.639,-0.265 1.688,-0.478 2.933,-0.478 1.183,0 2.288,0.192 3.067,0.519 l 0,7.744 8,9 0,0.379 -22,0 0,-0.43 8,-9 L 0,0 z m 2.933,-3.478 c -2.31,0 -4.336,0.565 -5.42,1.512 L -3,-1.518 l 0,8.111 -8,9 0,4.571 28,0 0,-4.622 -8,-9 L 9,-1.601 8.381,-2.05 C 7.132,-2.958 5.146,-3.478 2.933,-3.478" />
+        </g><g
+   transform="matrix(0.5263158,0,0,-0.5058169,86,60)"
+   id="g148">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path150"
+   d="m 0,0 -19,9.885 0,-19.77" />
+        </g><g
+   id="g4283"
+   transform="matrix(0.5,0,0,0.5,0,-1)"><g
+     transform="matrix(1.0000001,0,0,-1,-74.000026,414.99999)"
+     id="g46">
+          <g
+   id="g48" />
+          <g
+   id="g54">
+            <g
+   clip-path="url(#clipPath50)"
+   id="g56"
+   style="opacity:0.19999701">
+              <path
+   d="m 380,299 -22,0 0,4 22,0 0,-4 z"
+   id="path58"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+            </g>
+          </g>
+        </g><g
+     id="g152"
+     transform="matrix(1.0000001,0,0,-1,270,110)">
+          <path
+   d="m 0,0 0,2 -2,0 -2,0 0,-2 0,-24 0,-2 2,0 2,0 0,2 -2,0 0,24 2,0 z"
+   id="path154"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+        </g><path
+     d="M 283.99999,116 272,116 l 0,-4.00001 11.99999,0 0,4.00001 z"
+     id="path156"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="M 289.99999,122 278,122 l 0,-4.00001 11.99999,0 0,4.00001 z"
+     id="path158"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 300,127.99999 -12.00001,0 0,-4 12.00001,0 0,4 z"
+     id="path160"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 303.99999,133.99999 -11.99999,0 0,-4 11.99999,0 0,4 z"
+     id="path162"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /></g><g
+   id="g4275"
+   transform="scale(0.5,0.5)"><path
+     d="M 339.99999,134 336,134 l 0,-18 3.99999,0 0,18 z"
+     id="path164"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 346,134 -4,0 0,-22 4,0 0,22 z"
+     id="path166"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 352,134 -4.00001,0 0,-26 4.00001,0 0,26 z"
+     id="path168"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 358,134 -4,0 0,-8 4,0 0,8 z"
+     id="path170"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="M 363.99999,134 360,134 l 0,-18 3.99999,0 0,18 z"
+     id="path172"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 370,134 -4,0 0,-22 4,0 0,22 z"
+     id="path174"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /></g><g
+   id="g4266"
+   transform="scale(0.5,0.5)"><path
+     d="m 416,114 -20,0 0,-4 20,0 0,4 z"
+     id="path176"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 434,114 -10,0 0,-4 10,0 0,4 z"
+     id="path178"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 400,122 -4,0 0,-4.00001 4,0 0,4.00001 z"
+     id="path180"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 426,122 -20.00001,0 0,-4.00001 20.00001,0 0,4.00001 z"
+     id="path182"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 434,122 -4.00001,0 0,-4.00001 4.00001,0 0,4.00001 z"
+     id="path184"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 410,130 -14,0 0,-4 14,0 0,4 z"
+     id="path186"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 434,130 -16,0 0,-4 16,0 0,4 z"
+     id="path188"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /></g><path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path190"
+   d="m 274,64 -7,0 0,-8 7,0 0,8 z m -9,2 14,0 0,-12 -14,0 0,12 z" /><g
+   transform="matrix(0.5,0,0,-0.5,298,12)"
+   id="g192">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path194"
+   d="m 0,0 c 0,-6.627 5.372,-12 12,-12 6.628,0 12,5.373 12,12 C 24,6.627 18.628,12 12,12 5.372,12 0,6.627 0,0" />
+        </g><g
+   clip-path="url(#clipPath200)"
+   id="g198"
+   transform="matrix(0.5,0,0,-0.5,-36,206.5)"
+   style="fill-rule:nonzero">
+        <g
+   id="g204"
+   style="fill-rule:nonzero">
+          <g
+   id="g206"
+   style="fill-rule:nonzero">
+            <path
+   d="m 662,341 c 0,-9.941 8.059,-18 18,-18 l 0,0 c 9.942,0 18,8.059 18,18 l 0,0 c 0,9.941 -8.058,18 -18,18 l 0,0 c -9.941,0 -18,-8.059 -18,-18"
+   id="path214"
+   style="fill:url(#radialGradient6811);fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+          </g>
+        </g>
+      </g><g
+   transform="matrix(0.5,0,0,-0.5,298,36)"
+   id="g224">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path226"
+   d="m 0,0 c 0,-6.627 5.372,-12 12,-12 6.628,0 12,5.373 12,12 C 24,6.627 18.628,12 12,12 5.372,12 0,6.627 0,0" />
+        </g><g
+   transform="matrix(0.50695545,0,0,-0.50695545,239.06259,38.10433)"
+   id="g228">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path230"
+   d="m 0,0 c -3.313,0 -6,2.686 -6,6 0,3.314 2.687,6 6,6 C 3.313,12 6,9.314 6,6 6,2.686 3.313,0 0,0 M 15.657,-6.829 7.613,1.215 C 8.487,2.603 9,4.24 9,6 c 0,4.971 -4.029,9 -9,9 -4.971,0 -9,-4.029 -9,-9 0,-4.971 4.029,-9 9,-9 1.761,0 3.397,0.513 4.785,1.387 l 8.043,-8.044 2.829,2.828 z" />
+        </g><g
+   transform="matrix(0.48874711,0,0,-0.49652038,233.7329,63.76329)"
+   id="g232">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none"
+   id="path234"
+   d="M 0,0 10.75,6.5 21.625,2 31.75,10.125" />
+        </g><g
+   transform="matrix(0.50028185,0,0,-0.5,231.00056,67)"
+   id="g236">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path238"
+   d="m 0,0 0,26 -2,0 0,-28 1,0 1,0 40,0 0,2 -40,0 z" />
+        </g><g
+   id="g4258"
+   transform="scale(0.5,0.5)"><path
+     d="m 474,22 -8,0 0,-8 8,0 0,8 z"
+     id="path240"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 494,18 -18.00001,0 0,-4 18.00001,0 0,4 z"
+     id="path242"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 494,22 -18.00001,0 0,-2 18.00001,0 0,2 z"
+     id="path244"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 494,30 -18.00001,0 0,-4.000001 18.00001,0 L 494,30 z"
+     id="path246"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 474,34 -8,0 0,-8.000001 8,0 L 474,34 z"
+     id="path248"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     d="m 494,34 -18.00001,0 0,-2 18.00001,0 0,2 z"
+     id="path250"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /></g><g
+   transform="matrix(0.53333335,0,0,-0.53333335,176,38.13333)"
+   id="g252">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path254"
+   d="M 0,0 C -2.209,0 -4,1.791 -4,4 -4,6.209 -2.209,8 0,8 2.209,8 4,6.209 4,4 4,1.791 2.209,0 0,0 M 15,7 9.5,8 12.728,12.485 8.485,16.728 3.875,13.375 3,19 -3,19 -3.75,13.125 -8.485,16.728 -12.728,12.485 -9,7.625 -15,7 l 0,-6 6.25,-0.625 -3.978,-4.86 4.243,-4.243 4.735,3.978 0.75,-6.25 6,0 0.75,6 4.735,-3.728 4.243,4.243 L 9.375,0.125 15,1 15,7 z" />
+        </g><g
+   transform="matrix(0.49058085,0,0,-0.5028495,174.9687,18.62521)"
+   id="g256">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path258"
+   d="M 0,0 C 0,1.788 0.87,2.682 2.61,2.682 3.462,2.682 4.114,2.448 4.563,1.979 5.013,1.513 5.238,0.853 5.238,0 5.238,-0.84 5.009,-1.506 4.555,-1.998 4.099,-2.488 3.45,-2.734 2.61,-2.734 1.77,-2.734 1.124,-2.495 0.674,-2.015 0.225,-1.536 0,-0.863 0,0 m 0.728,5.665 0,1.135 c 0,1.303 0.237,2.386 0.71,3.25 0.474,0.865 1.303,1.758 2.486,2.681 1.409,1.113 2.317,1.977 2.726,2.593 0.408,0.615 0.611,1.349 0.611,2.202 0,0.993 -0.331,1.757 -0.994,2.289 -0.662,0.535 -1.615,0.8 -2.858,0.8 -1.125,0 -2.166,-0.16 -3.125,-0.48 -0.958,-0.32 -1.894,-0.704 -2.806,-1.154 l -1.491,3.125 c 2.403,1.338 4.978,2.007 7.724,2.007 2.32,0 4.16,-0.569 5.521,-1.705 1.362,-1.136 2.043,-2.704 2.043,-4.705 0,-0.888 -0.13,-1.678 -0.39,-2.37 C 10.624,14.64 10.229,13.979 9.703,13.353 9.177,12.725 8.268,11.909 6.978,10.902 5.876,10.038 5.14,9.322 4.767,8.754 4.394,8.186 4.207,7.422 4.207,6.464 l 0,-0.799 -3.479,0 z" />
+        </g><g
+   transform="matrix(0.4940336,0,0,-0.48455482,210.33624,38.32707)"
+   id="g260">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path262"
+   d="m 0,0 c 0,-1.637 0.163,-2.862 0.487,-3.674 0.324,-0.813 0.848,-1.22 1.574,-1.22 1.438,0 2.157,1.631 2.157,4.894 0,3.218 -0.719,4.828 -2.157,4.828 C 1.335,4.828 0.811,4.432 0.487,3.642 0.163,2.851 0,1.637 0,0 m 7.416,0 c 0,-2.526 -0.457,-4.421 -1.369,-5.685 -0.911,-1.263 -2.24,-1.895 -3.986,-1.895 -1.67,0 -2.966,0.651 -3.889,1.953 -0.923,1.301 -1.385,3.177 -1.385,5.627 0,5.02 1.758,7.53 5.274,7.53 1.691,0 3.006,-0.648 3.946,-1.945 C 6.946,4.29 7.416,2.427 7.416,0 M 2.521,16.839 -10.84,-7.25 l -3.198,0 13.364,24.089 3.195,0 z M -15.686,9.622 c 0,-1.637 0.16,-2.855 0.478,-3.658 0.319,-0.801 0.841,-1.202 1.566,-1.202 1.451,0 2.174,1.619 2.174,4.86 0,3.241 -0.723,4.861 -2.174,4.861 -0.725,0 -1.247,-0.4 -1.566,-1.203 -0.318,-0.801 -0.478,-2.021 -0.478,-3.658 m 7.416,0.033 c 0,-2.526 -0.454,-4.424 -1.36,-5.692 -0.906,-1.27 -2.243,-1.904 -4.012,-1.904 -1.67,0 -2.964,0.656 -3.881,1.969 -0.917,1.313 -1.375,3.189 -1.375,5.627 0,5.02 1.752,7.53 5.256,7.53 1.725,0 3.05,-0.651 3.979,-1.952 0.928,-1.302 1.393,-3.161 1.393,-5.578" />
+        </g><g
+   transform="matrix(0.59916115,0,0,-0.5,268.00899,35.993)"
+   id="g264">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path266"
+   d="m 0,0 c 0.7,-0.458 1.185,-0.989 1.452,-1.596 0.268,-0.607 0.4,-1.653 0.4,-3.136 l 0,-2.039 c 0,-0.937 0.077,-1.526 0.231,-1.768 0.153,-0.24 0.443,-0.404 0.871,-0.489 0.104,-0.027 0.256,-0.055 0.461,-0.082 1.051,-0.154 1.577,-0.659 1.577,-1.514 0,-0.418 -0.153,-0.753 -0.459,-1.008 -0.305,-0.255 -0.713,-0.382 -1.221,-0.382 -0.65,0 -1.277,0.106 -1.883,0.317 -0.607,0.212 -1.109,0.502 -1.507,0.871 -0.435,0.395 -0.743,0.907 -0.923,1.533 -0.182,0.626 -0.271,1.698 -0.271,3.218 l 0,1.644 c 0,1.667 -0.768,2.625 -2.306,2.875 -0.066,0.019 -0.111,0.028 -0.139,0.028 -0.444,0.074 -0.772,0.234 -0.986,0.477 -0.214,0.242 -0.319,0.593 -0.319,1.051 0,0.402 0.089,0.719 0.271,0.953 0.18,0.234 0.47,0.402 0.868,0.505 0.176,0.056 0.43,0.116 0.764,0.18 1.23,0.23 1.847,1.144 1.847,2.74 l 0,1.647 c 0,1.413 0.068,2.405 0.209,2.973 0.137,0.569 0.374,1.065 0.708,1.49 0.388,0.472 0.909,0.84 1.561,1.103 0.654,0.263 1.373,0.395 2.16,0.395 0.49,0 0.885,-0.128 1.182,-0.382 0.295,-0.255 0.444,-0.59 0.444,-1.007 0,-0.87 -0.563,-1.394 -1.688,-1.57 C 3.2,9.019 3.127,9.009 3.08,9 2.615,8.926 2.295,8.757 2.118,8.495 1.941,8.231 1.852,7.634 1.852,6.703 l 0,-2.035 C 1.852,3.279 1.714,2.26 1.437,1.611 1.161,0.963 0.682,0.426 0,0" />
+        </g><g
+   transform="matrix(0.59904155,0,0,-0.5,276.98263,35.986)"
+   id="g268">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path270"
+   d="m 0,0 c -0.674,0.425 -1.147,0.961 -1.425,1.608 -0.276,0.647 -0.414,1.664 -0.414,3.051 l 0,2.018 0,0.88 c 0,0.43 -0.112,0.757 -0.336,0.982 -0.222,0.224 -0.595,0.374 -1.115,0.446 -0.679,0.094 -1.13,0.253 -1.353,0.477 -0.224,0.225 -0.336,0.566 -0.336,1.023 0,0.468 0.142,0.832 0.424,1.094 0.283,0.262 0.683,0.393 1.202,0.393 0.685,0 1.325,-0.102 1.916,-0.306 0.593,-0.204 1.088,-0.49 1.487,-0.86 C 0.504,10.39 0.822,9.874 1.008,9.259 1.193,8.644 1.285,7.559 1.285,6.005 l 0,-1.635 C 1.285,2.777 1.921,1.856 3.188,1.609 3.494,1.563 3.729,1.517 3.896,1.472 4.285,1.368 4.572,1.196 4.759,0.956 4.943,0.715 5.037,0.396 5.037,0 5.037,-0.415 4.938,-0.748 4.744,-0.999 4.55,-1.248 4.259,-1.42 3.869,-1.515 3.721,-1.542 3.512,-1.579 3.244,-1.626 1.938,-1.875 1.285,-2.815 1.285,-4.445 l 0,-1.611 c 0,-1.463 -0.068,-2.48 -0.207,-3.048 -0.14,-0.57 -0.375,-1.054 -0.709,-1.452 -0.362,-0.435 -0.882,-0.789 -1.562,-1.063 -0.681,-0.273 -1.392,-0.409 -2.133,-0.409 -0.518,0 -0.923,0.131 -1.215,0.396 -0.292,0.263 -0.438,0.631 -0.438,1.104 0,0.435 0.11,0.763 0.329,0.986 0.218,0.222 0.671,0.389 1.36,0.5 0.566,0.083 0.95,0.236 1.15,0.458 0.201,0.223 0.301,0.579 0.301,1.069 l 0,0.737 0,2.055 c 0,1.481 0.133,2.525 0.401,3.13 C -1.171,-0.988 -0.691,-0.457 0,0" />
+        </g><path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path272"
+   d="m 275.23077,14.69231 -2.15384,0 0,-5.38462 2.15384,0 0,5.38462 z m -4.3077,0 -2.15384,0 0,-5.38462 2.15384,0 0,5.38462 z M 274.92277,5 269.07722,5 265,9.03792 265,14.88238 269.07722,19 274.92277,19 279,14.88238 279,9.03792 274.92277,5 z" /><g
+   transform="matrix(0.5000139,0,0,-0.5,112.03125,15.5)"
+   id="g274">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path276"
+   d="m 0,0 c -3.866,0 -7,3.134 -7,7 0,3.866 3.134,7 7,7 C 3.866,14 7,10.866 7,7 7,3.134 3.866,0 0,0 m -0.062,17 c -4.875,0 -9.251,-1.667 -18,-10 8.624,-8.333 13.125,-10 18,-10 4.874,0 9.25,1.667 17.999,10 C 9.313,15.333 4.812,17 -0.062,17" />
+        </g><g
+   transform="matrix(0.5,0,0,-0.5,110.5,12)"
+   id="g278">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path280"
+   d="M 0,0 C 0,-1.657 1.343,-3 3,-3 4.657,-3 6,-1.657 6,0 6,1.657 4.657,3 3,3 1.343,3 0,1.657 0,0" />
+        </g><g
+   transform="matrix(0.5,0,0,-0.5,139.5,33)"
+   id="g282">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path284"
+   d="M 0,0 18,0 15,-20 3,-20" />
+        </g><g
+   transform="matrix(0.5,0,0,-0.5,147.5,30)"
+   id="g286">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path288"
+   d="m 0,0 -4,0 0,2 -6,0 0,-2 -4,0 c -1.104,0 -2,-0.964 -2,-2 l 0,-2 2,0 14,0 2,0 0,2 C 2,-0.964 1.104,0 0,0" />
+        </g><g
+   transform="matrix(0.5,0,0,-0.5,317,69)"
+   id="g290">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path292"
+   d="M 0,0 0,10 -10,0 0,0 z" />
+        </g><g
+   transform="matrix(0.5,0,0,-0.5,212,13)"
+   id="g294">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path296"
+   d="m 0,0 0,-8 -16,0 0,6 -2,0 0,-6 0,-2 2.428,0 L 2,-10 2,-8 2,0 0,0 z" />
+        </g><g
+   id="g3120"
+   transform="matrix(0.5,0,0,0.5,2,0)"><g
+     transform="matrix(0.84210526,0,0,-1.0116338,42,168)"
+     id="g3114">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path3116"
+   d="m 0,0 -19,9.885 0,-19.77" />
+        </g><path
+     inkscape:connector-curvature="0"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     id="path3118"
+     d="m 22,178 -6,0 0,-20 6,0 0,20 z" /></g><g
+   id="g4303"
+   transform="matrix(0.5,0,0,0.5,1,-1)"><path
+     d="m 92,178 -6,0 0,-16 6,0 0,16 z"
+     id="path3127"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     inkscape:connector-curvature="0"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     id="path3129"
+     d="m 104,178 -6,0 0,-16 6,0 0,16 z" /></g><g
+   id="g4323"
+   transform="scale(0.5,0.5)"><g
+     transform="matrix(0.33333333,0,0,-0.33333333,157,178)"
+     id="g3310">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path3312"
+   d="m 0,0 c 0,-6.627 5.372,-12 12,-12 6.628,0 12,5.373 12,12 C 24,6.627 18.628,12 12,12 5.372,12 0,6.627 0,0" />
+        </g><g
+     id="g4318"><g
+       id="g3314"
+       transform="matrix(0,0.42105263,0.91047041,0,161,172)">
+          <path
+   d="m 0,0 -19,9.885 0,-19.77"
+   id="path3316"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+        </g><path
+       d="m 164,164 -6,0 0,-8 6,0 0,8 z"
+       id="path3318"
+       style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       inkscape:connector-curvature="0" /></g></g><g
+   id="g4363"
+   transform="scale(0.5,0.5)"><g
+     id="g4333"
+     transform="matrix(0.33333333,0,0,-0.33333333,221,178)">
+          <path
+   d="m 0,0 c 0,-6.627 5.372,-12 12,-12 6.628,0 12,5.373 12,12 C 24,6.627 18.628,12 12,12 5.372,12 0,6.627 0,0"
+   id="path4335"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+        </g><g
+     id="g4339"
+     transform="matrix(0,-0.42105263,0.91047041,0,225,156)">
+          <path
+   d="m 0,0 -19,9.885 0,-19.77"
+   id="path4341"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+        <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path4351"
+   d="m 0,0 -19,9.885 0,-19.77" /></g><path
+     d="m 228,164 -6,0 0,8 6,0 0,-8 z"
+     id="path4343"
+     style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /></g><g
+   id="g4371"
+   transform="matrix(0.5,0,0,0.5,-0.371325,0.98892)"><g
+     transform="matrix(0.33333333,0,0,-0.33333333,285.10972,172.09028)"
+     id="g3386">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path3388"
+   d="m -9.6000008e-8,3.5999999 c 0,-6.627 5.371999996000008,-12 12.000000096000007,-12 6.628,0 12,5.373 12,12 C 24,10.227 18.628,15.6 12,15.6 5.3719999,15.6 -9.6000008e-8,10.227 -9.6000008e-8,3.5999999" />
+        </g><path
+     sodipodi:nodetypes="cc"
+     inkscape:connector-curvature="0"
+     id="path3400"
+     d="m 275.24265,172.08579 c 5.10629,-16.86347 22.80573,-17.45673 27.87622,0"
+     style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /><g
+     inkscape:transform-center-y="4.8667427"
+     inkscape:transform-center-x="31.812074"
+     transform="matrix(0.12650103,0.40160031,-0.67542793,0.21275463,304.09531,176.02216)"
+     id="g4357">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path4359"
+   d="m 0,0 -19,9.885 0,-19.77" />
+        <path
+   d="m 0,0 -19,9.885 0,-19.77"
+   id="path4361"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" /></g></g><g
+   id="g4389"
+   transform="matrix(0.36842106,0,0,-0.40465352,12,102)">
+          <path
+   d="m 0,0 -19,9.885 0,-19.77"
+   id="path4391"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+        </g><g
+   transform="matrix(0,0.36842106,0.40465352,0,24,106)"
+   id="g4393">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path4395"
+   d="m 0,0 -19,9.885 0,-19.77" />
+        </g><g
+   id="g4397"
+   transform="matrix(0,-0.36842106,0.40465352,0,8,111)">
+          <path
+   d="m 0,0 -19,9.885 0,-19.77"
+   id="path4399"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+        </g><path
+   d="m 54,105 0,7 -10.000005,0 0,-7 z m 1,8 0,-11 -12,0 0,11 z"
+   id="path4987"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0"
+   sodipodi:nodetypes="cccccccccc" /><rect
+   style="opacity:0.81893005;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="rect4991"
+   width="12"
+   height="3"
+   x="73"
+   y="110"
+   ry="0" /><g
+   id="g6865"
+   transform="matrix(1,0,0,1.0833067,0,-7.5809332)"><g
+     transform="matrix(0.9994799,0,0,0.99934297,0.09079898,0.05570112)"
+     id="g6857"><g
+       id="g6850"><g
+         transform="matrix(0.49680733,0,0,0.49594275,1.1210985,0.73973011)"
+         id="g6083"><rect
+           y="158.80269"
+           x="336.90268"
+           height="22.194668"
+           width="28.194668"
+           id="rect4212"
+           style="fill:none;stroke:#000000;stroke-width:1.93673468;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /><g
+           transform="matrix(-0.52631579,0,0,-0.60698027,349.99999,169.90003)"
+           id="g4216">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path4218"
+   d="M -19.118894,9.0253678e-4 0.01315753,9.9733228 l 0,-19.9448405" />
+        </g></g><rect
+         y="78.996201"
+         x="171.99866"
+         height="12.00789"
+         width="1.0005203"
+         id="rect6836"
+         style="fill:#000000;fill-opacity:1;stroke:none" /></g></g></g><g
+   id="g6963"
+   transform="matrix(1,0,0,1.0833067,0,-7.5809087)"><g
+     transform="translate(32.000017,-2.9395427e-4)"
+     id="g6874"><g
+       transform="matrix(0.9994799,0,0,0.99934297,0.09079898,0.05570112)"
+       id="g6876"><g
+         id="g6878"><g
+           transform="matrix(0.49680733,0,0,0.49594275,1.1210985,0.73973011)"
+           id="g6880"><rect
+             y="158.80269"
+             x="336.90268"
+             height="22.194668"
+             width="28.194668"
+             id="rect6882"
+             style="fill:none;stroke:#000000;stroke-width:1.93673468;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /><g
+             transform="matrix(-0.52631579,0,0,-0.60698027,349.99999,169.90003)"
+             id="g6884">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path6886"
+   d="M 0.01315753,9.0253678e-4 -19.118894,9.9733228 l 0,-19.9448405" />
+        </g></g><rect
+           y="78.996201"
+           x="171.99866"
+           height="12.00789"
+           width="1.0005203"
+           id="rect6888"
+           style="fill:#000000;fill-opacity:1;stroke:none" /></g></g></g></g><g
+   id="g6954"
+   transform="matrix(1,0,0,1.0833067,0,-7.5809087)"><g
+     id="g6890"
+     transform="translate(64.000017,-2.9395427e-4)"><g
+       id="g6892"
+       transform="matrix(0.9994799,0,0,0.99934297,0.09079898,0.05570112)"><g
+         id="g6894"><g
+           id="g6896"
+           transform="matrix(0.49680733,0,0,0.49594275,1.1210985,0.73973011)"><rect
+             style="fill:none;stroke:#000000;stroke-width:1.93673468;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+             id="rect6898"
+             width="28.194668"
+             height="22.194668"
+             x="336.90268"
+             y="158.80269" /><g
+             id="g6900"
+             transform="matrix(-0.52631579,0,0,-0.60698027,349.99999,169.90003)">
+          
+        </g></g><rect
+           style="fill:#000000;fill-opacity:1;stroke:none"
+           id="rect6904"
+           width="1.0005203"
+           height="12.00789"
+           x="171.99866"
+           y="78.996201" /></g></g></g></g><g
+   transform="matrix(-1,0,0,1.0833067,448.00002,-7.5812271)"
+   id="g6906"><g
+     transform="matrix(0.9994799,0,0,0.99934297,0.09079898,0.05570112)"
+     id="g6908"><g
+       id="g6910"><g
+         transform="matrix(0.49680733,0,0,0.49594275,1.1210985,0.73973011)"
+         id="g6912"><rect
+           y="158.80269"
+           x="336.90268"
+           height="22.194668"
+           width="28.194668"
+           id="rect6914"
+           style="fill:none;stroke:#000000;stroke-width:1.93673468;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /><g
+           transform="matrix(-0.52631579,0,0,-0.60698027,349.99999,169.90003)"
+           id="g6916">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path6918"
+   d="M 0.01315753,9.0253678e-4 -19.118894,9.9733228 l 0,-19.9448405" />
+        </g></g><rect
+         y="78.996201"
+         x="171.99866"
+         height="12.00789"
+         width="1.0005203"
+         id="rect6920"
+         style="fill:#000000;fill-opacity:1;stroke:none" /></g></g></g><g
+   id="g6938"
+   transform="matrix(-1,0,0,1.0833067,479.00002,-7.5812271)"><g
+     id="g6940"
+     transform="matrix(0.9994799,0,0,0.99934297,0.09079898,0.05570112)"><g
+       id="g6942"><g
+         id="g6944"
+         transform="matrix(0.49680733,0,0,0.49594275,1.1210985,0.73973011)"><rect
+           style="fill:none;stroke:#000000;stroke-width:1.93673468;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+           id="rect6946"
+           width="28.194668"
+           height="22.194668"
+           x="336.90268"
+           y="158.80269" /><g
+           id="g6948"
+           transform="matrix(-0.52631579,0,0,-0.60698027,349.99999,169.90003)">
+          <path
+   d="M -19.118894,9.0253678e-4 0.01315753,9.9733228 l 0,-19.9448405"
+   id="path6950"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+        </g></g><rect
+         style="fill:#000000;fill-opacity:1;stroke:none"
+         id="rect6952"
+         width="1.0005203"
+         height="12.00789"
+         x="171.99866"
+         y="78.996201" /></g></g></g><g
+   id="g5024"
+   transform="translate(-2,-1)"><g
+     id="g4933"><path
+       inkscape:connector-curvature="0"
+       style="fill:url(#linearGradient5103);fill-opacity:1;fill-rule:nonzero;stroke:none"
+       id="path4791"
+       d="m 120,97 c -3.86575,0 -7,3.13367 -7,7 0,3.86633 3.13425,7 7,7 3.86575,0 7,-3.13367 7,-7 0,-3.86633 -3.13425,-7 -7,-7" /></g><path
+     inkscape:connector-curvature="0"
+     style="fill:#f27d82;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     id="path4795"
+     d="m 113.5,104 c 0,3.58963 2.90983,6.5 6.5,6.5 3.59017,0 6.5,-2.91037 6.5,-6.5 0,-3.58963 -2.90983,-6.5 -6.5,-6.5 -3.59017,0 -6.5,2.91037 -6.5,6.5" /><g
+     style="fill:#000000;fill-opacity:0.36444451;stroke:none"
+     transform="matrix(0.32998633,0,0,-0.32998633,123.5,101.9332)"
+     id="g4797">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:0.36444451;fill-rule:nonzero;stroke:none"
+   id="path4799"
+   d="M 0,0 -2.828,2.828 -10.606,-4.95 -18.385,2.828 -21.213,0 l 7.778,-7.778 -7.778,-7.779 2.828,-2.828 7.779,7.779 7.778,-7.779 L 0,-15.557 -7.778,-7.778 0,0 z" />
+        </g><g
+     id="g4801"
+     transform="matrix(0.32998633,0,0,-0.32998633,123.5,101.4332)"
+     style="fill:#ffffff;fill-opacity:1;stroke:none">
+          <path
+   d="M 0,0 -2.828,2.828 -10.606,-4.95 -18.385,2.828 -21.213,0 l 7.778,-7.778 -7.778,-7.779 2.828,-2.828 7.779,7.779 7.778,-7.779 L 0,-15.557 -7.778,-7.778 0,0 z"
+   id="path4803"
+   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+        </g></g><g
+   id="g5105"
+   transform="translate(-0.99999998,-0.99999868)"><g
+     id="g4875"
+     transform="matrix(0.32998633,0,0,-0.32998633,139.5,101.9332)"
+     style="fill:#000000;fill-opacity:0.24444442;stroke:none">
+          <path
+   d="M 0,0 -2.828,2.828 -10.606,-4.95 -18.385,2.828 -21.213,0 l 7.778,-7.778 -7.778,-7.779 2.828,-2.828 7.779,7.779 7.778,-7.779 L 0,-15.557 -7.778,-7.778 0,0 z"
+   id="path4877"
+   style="fill:#000000;fill-opacity:0.24444442;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+        </g><g
+     style="fill:#676767;fill-opacity:1;stroke:none"
+     transform="matrix(0.32998633,0,0,-0.32998633,139.5,101.4332)"
+     id="g4879">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#676767;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path4881"
+   d="M 0,0 -2.828,2.828 -10.606,-4.95 -18.385,2.828 -21.213,0 l 7.778,-7.778 -7.778,-7.779 2.828,-2.828 7.779,7.779 7.778,-7.779 L 0,-15.557 -7.778,-7.778 0,0 z" />
+        </g></g><g
+   id="g4951"
+   transform="matrix(-1,0,0,-1,223,207)"
+   style="fill:url(#linearGradient5356);fill-opacity:1;fill-rule:nonzero"><path
+     inkscape:connector-curvature="0"
+     style="fill:url(#linearGradient5354);fill-opacity:1;fill-rule:nonzero;stroke:none"
+     id="path4953"
+     d="m 120,97 c -3.86575,0 -7,3.13367 -7,7 0,3.86633 3.13425,7 7,7 3.86575,0 7,-3.13367 7,-7 0,-3.86633 -3.13425,-7 -7,-7" /></g><path
+   inkscape:connector-curvature="0"
+   style="fill:url(#linearGradient5365);fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path4955"
+   d="m 103,96.5 c -3.58963,0 -6.5,2.90983 -6.5,6.5 0,3.59017 2.91037,6.5 6.5,6.5 3.58963,0 6.5,-2.90983 6.5,-6.5 0,-3.59017 -2.91037,-6.5 -6.5,-6.5" /><g
+   style="fill:#993c35;fill-opacity:1;stroke:none"
+   transform="matrix(0.32998633,0,0,-0.32998633,106.5,100.9332)"
+   id="g4957">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#993c35;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path4959"
+   d="M 0,0 -2.828,2.828 -10.606,-4.95 -18.385,2.828 -21.213,0 l 7.778,-7.778 -7.778,-7.779 2.828,-2.828 7.779,7.779 7.778,-7.779 L 0,-15.557 -7.778,-7.778 0,0 z" />
+        </g><g
+   id="g4961"
+   transform="matrix(0.32998633,0,0,-0.32998633,106.5,100.4332)"
+   style="fill:#ffffff;fill-opacity:1;stroke:none">
+          <path
+   d="M 0,0 -2.828,2.828 -10.606,-4.95 -18.385,2.828 -21.213,0 l 7.778,-7.778 -7.778,-7.779 2.828,-2.828 7.779,7.779 7.778,-7.779 L 0,-15.557 -7.778,-7.778 0,0 z"
+   id="path4963"
+   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+        </g><g
+   id="g5129"
+   transform="translate(-2.5,-1.5)"><path
+     inkscape:connector-curvature="0"
+     style="fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     id="path4998"
+     d="m 145.5,104 c 0,3.58963 2.90983,6.5 6.5,6.5 3.59017,0 6.5,-2.91037 6.5,-6.5 0,-3.58963 -2.90983,-6.5 -6.5,-6.5 -3.59017,0 -6.5,2.91037 -6.5,6.5" /><g
+     style="fill:#000000;fill-opacity:0.37333332;stroke:none"
+     transform="matrix(0.32998633,0,0,-0.32998633,155.5,101.9332)"
+     id="g5000">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:0.37333332;fill-rule:nonzero;stroke:none"
+   id="path5002"
+   d="M 0,0 -2.828,2.828 -10.606,-4.95 -18.385,2.828 -21.213,0 l 7.778,-7.778 -7.778,-7.779 2.828,-2.828 7.779,7.779 7.778,-7.779 L 0,-15.557 -7.778,-7.778 0,0 z" />
+        </g><g
+     id="g5004"
+     transform="matrix(0.32998633,0,0,-0.32998633,155.5,101.4332)"
+     style="fill:#ffffff;fill-opacity:1;stroke:none">
+          <path
+   d="M 0,0 -2.828,2.828 -10.606,-4.95 -18.385,2.828 -21.213,0 l 7.778,-7.778 -7.778,-7.779 2.828,-2.828 7.779,7.779 7.778,-7.779 L 0,-15.557 -7.778,-7.778 0,0 z"
+   id="path5006"
+   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+        </g></g><g
+   id="g5136"
+   transform="translate(-1.5,-1.5)"><path
+     d="m 161.5,104 c 0,3.58963 2.90983,6.5 6.5,6.5 3.59017,0 6.5,-2.91037 6.5,-6.5 0,-3.58963 -2.90983,-6.5 -6.5,-6.5 -3.59017,0 -6.5,2.91037 -6.5,6.5"
+     id="path5039"
+     style="fill:#9f9f9f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><g
+     id="g5041"
+     transform="matrix(0.32998633,0,0,-0.32998633,171.5,101.9332)"
+     style="fill:#000000;fill-opacity:0.36444475;stroke:none">
+          <path
+   d="M 0,0 -2.828,2.828 -10.606,-4.95 -18.385,2.828 -21.213,0 l 7.778,-7.778 -7.778,-7.779 2.828,-2.828 7.779,7.779 7.778,-7.779 L 0,-15.557 -7.778,-7.778 0,0 z"
+   id="path5043"
+   style="fill:#000000;fill-opacity:0.36444475;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+        </g><g
+     style="fill:#ffffff;fill-opacity:1;stroke:none"
+     transform="matrix(0.32998633,0,0,-0.32998633,171.5,101.4332)"
+     id="g5045">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path5047"
+   d="M 0,0 -2.828,2.828 -10.606,-4.95 -18.385,2.828 -21.213,0 l 7.778,-7.778 -7.778,-7.779 2.828,-2.828 7.779,7.779 7.778,-7.779 L 0,-15.557 -7.778,-7.778 0,0 z" />
+        </g></g><g
+   transform="translate(45,-1.4999987)"
+   id="g5143"><g
+     style="fill:#000000;fill-opacity:0.24444442;stroke:none"
+     transform="matrix(0.32998633,0,0,-0.32998633,139.5,101.9332)"
+     id="g5145">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#000000;fill-opacity:0.24444442;fill-rule:nonzero;stroke:none"
+   id="path5147"
+   d="M 0,0 -2.828,2.828 -10.606,-4.95 -18.385,2.828 -21.213,0 l 7.778,-7.778 -7.778,-7.779 2.828,-2.828 7.779,7.779 7.778,-7.779 L 0,-15.557 -7.778,-7.778 0,0 z" />
+        </g><g
+     id="g5149"
+     transform="matrix(0.32998633,0,0,-0.32998633,139.5,101.4332)"
+     style="fill:#676767;fill-opacity:1;stroke:none">
+          <path
+   d="M 0,0 -2.828,2.828 -10.606,-4.95 -18.385,2.828 -21.213,0 l 7.778,-7.778 -7.778,-7.779 2.828,-2.828 7.779,7.779 7.778,-7.779 L 0,-15.557 -7.778,-7.778 0,0 z"
+   id="path5151"
+   style="fill:#676767;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+        </g></g><g
+   id="g5165"
+   transform="matrix(0.396371,0,0,-0.47078517,131.64855,116.21248)">
+          <path
+   d="m 0,0 -3.618,4.311 -3.064,-2.572 6.428,-7.66 2.835,2.845 13.443,13.443 -2.828,2.829 L 0,0 z"
+   id="path5167"
+   style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   inkscape:connector-curvature="0" />
+        </g><path
+   style="fill:none;stroke:#367cf1;stroke-width:1.50000000000000000;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+   d="m 195.75,97.750005 3.5,3.249985 -3.5,3.25001"
+   id="path5212"
+   inkscape:connector-curvature="0"
+   sodipodi:nodetypes="ccc" /><path
+   sodipodi:nodetypes="ccc"
+   inkscape:connector-curvature="0"
+   id="path5214"
+   d="m 195.75,108.75001 3.5,3.24998 -3.5,3.25001"
+   style="fill:none;stroke:#939393;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /><g
+   id="g5222"
+   transform="translate(-2,0)"><g
+     style="fill:#bababa;fill-opacity:1"
+     transform="matrix(0.08333333,0,0,-0.08333333,211,101)"
+     id="g5202">
+          <path
+   inkscape:connector-curvature="0"
+   style="fill:#bababa;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path5204"
+   d="m 0,0 c 0,-6.627 5.372,-12 12,-12 6.628,0 12,5.373 12,12 C 24,6.627 18.628,12 12,12 5.372,12 0,6.627 0,0" />
+        </g><path
+     sodipodi:nodetypes="ccc"
+     inkscape:connector-curvature="0"
+     id="path5216"
+     d="m 210.25,97.750006 -3.5,3.249984 3.5,3.25001"
+     style="fill:none;stroke:#bababa;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /></g><g
+   id="g5272"
+   transform="translate(11.000005,-9.9999998)"><g
+     transform="matrix(0.71428571,0,0,0.71428571,121.28571,36.714286)"
+     id="g5241"><path
+       d="m 120,97 c -3.86575,0 -7,3.13367 -7,7 0,3.86633 3.13425,7 7,7 3.86575,0 7,-3.13367 7,-7 0,-3.86633 -3.13425,-7 -7,-7"
+       id="path5243"
+       style="fill:url(#linearGradient5281);fill-opacity:1;fill-rule:nonzero;stroke:none"
+       inkscape:connector-curvature="0" /></g><path
+     d="m 202.35714,111 c 0,2.56402 2.07845,4.64286 4.64286,4.64286 2.5644,0 4.64285,-2.07884 4.64285,-4.64286 0,-2.56402 -2.07845,-4.64286 -4.64285,-4.64286 -2.56441,0 -4.64286,2.07884 -4.64286,4.64286"
+     id="path5245"
+     style="fill:#eb3941;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     inkscape:connector-curvature="0" /><path
+     inkscape:connector-curvature="0"
+     id="path5264"
+     d="m 205,109 c 4,4 4,4 4,4"
+     style="fill:none;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /><path
+     style="fill:none;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 209,109 c -4,4 -4,4 -4,4"
+     id="path5266"
+     inkscape:connector-curvature="0" /><path
+     style="fill:none;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 205,109 c 4,4 4,4 4,4"
+     id="path5268"
+     inkscape:connector-curvature="0" /><path
+     inkscape:connector-curvature="0"
+     id="path5270"
+     d="m 209,109 c -4,4 -4,4 -4,4"
+     style="fill:none;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /></g><path
+   sodipodi:nodetypes="cccc"
+   inkscape:connector-curvature="0"
+   id="path5289"
+   d="m 203,116 4,-7.77778 4,7.77778 z"
+   style="fill:none;stroke:#c19600;stroke-width:2;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /><path
+   style="fill:#f4bd00;fill-opacity:1;stroke:#f5be00;stroke-width:1.49999988;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+   d="m 203.01662,116 4,-7.77778 4,7.77778 z"
+   id="path5283"
+   inkscape:connector-curvature="0"
+   sodipodi:nodetypes="cccc" /><text
+   sodipodi:linespacing="125%"
+   id="text5301"
+   y="146.8199"
+   x="161.33199"
+   style="font-size:11.26096152999999944px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ad8601;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Times Bold"
+   xml:space="preserve"
+   transform="scale(1.2629669,0.79178638)"><tspan
+     y="146.8199"
+     x="161.33199"
+     id="tspan5303"
+     sodipodi:role="line">!</tspan></text>
+
+<path
+   style="font-size:9.67697048px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Times Bold"
+   sodipodi:nodetypes="cccccccccccc"
+   inkscape:connector-curvature="0"
+   id="path5364"
+   d="m 206,110 2,0 0,2.30275 -0.28334,1.67983 -1.43333,0 L 206,112.30275 206,110 m 0,4.56933 2,0 0,1.43067 -2,0 0,-1" /><text
+   xml:space="preserve"
+   style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+   x="217.42622"
+   y="110.74906"
+   id="text5307"
+   sodipodi:linespacing="125%"><tspan
+     sodipodi:role="line"
+     id="tspan5309"
+     x="217.42622"
+     y="110.74906" /></text>
+
+<g
+   id="g5771"><path
+     sodipodi:type="arc"
+     style="fill:url(#linearGradient5737);fill-opacity:1;fill-rule:nonzero;stroke:none"
+     id="path5449"
+     sodipodi:cx="231.5"
+     sodipodi:cy="103.15625"
+     sodipodi:rx="3.625"
+     sodipodi:ry="3.84375"
+     d="m 235.125,103.15625 a 3.625,3.84375 0 1 1 -7.25,0 3.625,3.84375 0 1 1 7.25,0 z"
+     transform="matrix(4.4216629e-4,1.3793103,-1.3008129,4.1702167e-4,363.08462,-218.35335)" /><path
+     transform="matrix(1.2413792,-3.9796805e-4,3.7530216e-4,1.1707316,-58.418,-19.676152)"
+     d="m 235.125,103.15625 a 3.625,3.84375 0 1 1 -7.25,0 3.625,3.84375 0 1 1 7.25,0 z"
+     sodipodi:ry="3.84375"
+     sodipodi:rx="3.625"
+     sodipodi:cy="103.15625"
+     sodipodi:cx="231.5"
+     id="path5451"
+     style="fill:#dd0000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     sodipodi:type="arc" /><path
+     sodipodi:type="arc"
+     style="fill:url(#linearGradient5767);fill-opacity:1;fill-rule:nonzero;stroke:none"
+     id="path5453"
+     sodipodi:cx="231.5"
+     sodipodi:cy="103.15625"
+     sodipodi:rx="3.625"
+     sodipodi:ry="3.84375"
+     d="m 235.125,103.15625 a 3.625,3.84375 0 1 1 -7.25,0 3.625,3.84375 0 1 1 7.25,0 z"
+     transform="matrix(-2.0173838e-4,-0.62931035,0.92682926,-2.9712795e-4,133.46895,244.52849)" /><path
+     transform="matrix(1.4094051e-4,0.43965518,0.78048781,-2.5021302e-4,148.48744,2.1206306)"
+     d="m 235.125,103.15625 a 3.625,3.84375 0 1 1 -7.25,0 3.625,3.84375 0 1 1 7.25,0 z"
+     sodipodi:ry="3.84375"
+     sodipodi:rx="3.625"
+     sodipodi:cy="103.15625"
+     sodipodi:cx="231.5"
+     id="path5455"
+     style="fill:url(#linearGradient5769);fill-opacity:1;fill-rule:nonzero;stroke:none"
+     sodipodi:type="arc" /></g><g
+   id="g5757"><path
+     sodipodi:type="arc"
+     style="fill:url(#linearGradient5743);fill-opacity:1;fill-rule:nonzero;stroke:none"
+     id="path5513"
+     sodipodi:cx="231.5"
+     sodipodi:cy="103.15625"
+     sodipodi:rx="3.625"
+     sodipodi:ry="3.84375"
+     d="m 235.125,103.15625 a 3.625,3.84375 0 1 1 -7.25,0 3.625,3.84375 0 1 1 7.25,0 z"
+     transform="matrix(-0.01506784,1.3792098,-1.3007182,-0.01421029,377.66542,-216.8212)" /><path
+     transform="matrix(1.2413037,0.01356118,-0.01278943,1.1706604,-46.042497,-22.900348)"
+     d="m 235.125,103.15625 a 3.625,3.84375 0 1 1 -7.25,0 3.625,3.84375 0 1 1 7.25,0 z"
+     sodipodi:ry="3.84375"
+     sodipodi:rx="3.625"
+     sodipodi:cy="103.15625"
+     sodipodi:cx="231.5"
+     id="path5515"
+     style="fill:#00be00;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     sodipodi:type="arc" /><path
+     sodipodi:type="arc"
+     style="fill:url(#linearGradient5753);fill-opacity:1;fill-rule:nonzero;stroke:none"
+     id="path5517"
+     sodipodi:cx="231.5"
+     sodipodi:cy="103.15625"
+     sodipodi:rx="3.625"
+     sodipodi:ry="3.84375"
+     d="m 235.125,103.15625 a 3.625,3.84375 0 1 1 -7.25,0 3.625,3.84375 0 1 1 7.25,0 z"
+     transform="matrix(0.00687469,-0.62926454,0.92676181,0.01012483,142.86511,243.44332)" /><path
+     transform="matrix(-0.00480288,0.43962318,0.780431,0.00852617,160.60265,1.1603243)"
+     d="m 235.125,103.15625 a 3.625,3.84375 0 1 1 -7.25,0 3.625,3.84375 0 1 1 7.25,0 z"
+     sodipodi:ry="3.84375"
+     sodipodi:rx="3.625"
+     sodipodi:cy="103.15625"
+     sodipodi:cx="231.5"
+     id="path5519"
+     style="fill:url(#linearGradient5755);fill-opacity:1;fill-rule:nonzero;stroke:none"
+     sodipodi:type="arc" /></g><path
+   sodipodi:type="arc"
+   style="fill:#e5a600;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path5588"
+   sodipodi:cx="231.5"
+   sodipodi:cy="103.15625"
+   sodipodi:rx="3.625"
+   sodipodi:ry="3.84375"
+   d="m 235.125,103.15625 a 3.625,3.84375 0 1 1 -7.25,0 3.625,3.84375 0 1 1 7.25,0 z"
+   transform="matrix(4.4216629e-4,1.3793103,-1.3008129,4.1702167e-4,385.08462,-218.35335)" /><path
+   transform="matrix(1.2413792,-3.9796805e-4,3.7530216e-4,1.1707316,-36.418,-19.676152)"
+   d="m 235.125,103.15625 a 3.625,3.84375 0 1 1 -7.25,0 3.625,3.84375 0 1 1 7.25,0 z"
+   sodipodi:ry="3.84375"
+   sodipodi:rx="3.625"
+   sodipodi:cy="103.15625"
+   sodipodi:cx="231.5"
+   id="path5590"
+   style="fill:#ffbd00;fill-opacity:1;fill-rule:nonzero;stroke:none"
+   sodipodi:type="arc" /><path
+   sodipodi:type="arc"
+   style="fill:url(#linearGradient5835);fill-opacity:1;fill-rule:nonzero;stroke:none"
+   id="path5592"
+   sodipodi:cx="231.5"
+   sodipodi:cy="103.15625"
+   sodipodi:rx="3.625"
+   sodipodi:ry="3.84375"
+   d="m 235.125,103.15625 a 3.625,3.84375 0 1 1 -7.25,0 3.625,3.84375 0 1 1 7.25,0 z"
+   transform="matrix(-2.0173838e-4,-0.62931035,0.92682926,-2.9712795e-4,155.46895,244.52849)" /><path
+   transform="matrix(1.4094051e-4,0.43965518,0.78048781,-2.5021302e-4,170.44325,2.0764364)"
+   d="m 235.125,103.15625 a 3.625,3.84375 0 1 1 -7.25,0 3.625,3.84375 0 1 1 7.25,0 z"
+   sodipodi:ry="3.84375"
+   sodipodi:rx="3.625"
+   sodipodi:cy="103.15625"
+   sodipodi:cx="231.5"
+   id="path5594"
+   style="fill:url(#linearGradient5837);fill-opacity:1;fill-rule:nonzero;stroke:none"
+   sodipodi:type="arc" /></svg>
\ No newline at end of file
diff --git a/1-js/3-writing-js/2-coding-style/1-style-errors/solution.md b/1-js/3-writing-js/2-coding-style/1-style-errors/solution.md
new file mode 100644
index 00000000..f23811eb
--- /dev/null
+++ b/1-js/3-writing-js/2-coding-style/1-style-errors/solution.md
@@ -0,0 +1,48 @@
+# Ответ
+
+Вы могли заметить следующие недостатки, сверху-вниз:
+
+```js
+function pow(x,n)  // <- отсутствует пробел между аргументами
+{  // <- фигурная скобка на отдельной строке
+  var result=1;   // <- нет пробелов вокруг знака =
+  for(var i=0;i<n;i++) {result*=x;}   // <- нет пробелов
+  // содержимое скобок { ... } лучше вынести на отдельную строку
+  return result;
+}
+
+x=prompt("x?",'')  // <- не объявлена переменная, нет пробелов, ;
+n=prompt("n?",'')
+if (n<0)  // <- нет пробелов, стоит добавить вертикальную отбивку
+{   // <- фигурная скобка на отдельной строке
+  // ниже - слишком длинная строка, нет пробелов
+  alert('Степень '+n+'не поддерживается, введите целую степень, большую 0');
+} 
+else // <- можно на одной строке } else { 
+{
+  alert(pow(x,n))  // нет точки с запятой
+}
+```
+
+Исправленный вариант:
+
+```js
+function pow(x,n)  {
+  var result = 1;  
+  for(var i = 0; i < n; i++) {
+    result *=x;
+  }       
+  return result;
+}
+
+var x = prompt("x?", "");
+var n = prompt("n?", "");
+
+if (n < 0) {
+  alert('Степень ' + n + 
+    'не поддерживается, введите целую степень, большую 0');
+} else {
+  alert( pow(x, n) );
+}
+```
+
diff --git a/1-js/3-writing-js/2-coding-style/1-style-errors/task.md b/1-js/3-writing-js/2-coding-style/1-style-errors/task.md
new file mode 100644
index 00000000..e63e4b90
--- /dev/null
+++ b/1-js/3-writing-js/2-coding-style/1-style-errors/task.md
@@ -0,0 +1,26 @@
+# Ошибки в стиле
+
+[importance 4]
+
+Какие недостатки вы видите в стиле этого примера?
+
+```js
+function pow(x,n) 
+{
+  var result=1;  
+  for(var i=0;i<n;i++) {result*=x;}       
+  return result;
+}
+
+x=prompt("x?",'')
+n=prompt("n?",'')
+if (n<=0) 
+{
+  alert('Степень '+n+'не поддерживается, введите целую степень, большую 0');
+} 
+else 
+{
+  alert(pow(x,n))
+}
+```
+
diff --git a/1-js/3-writing-js/2-coding-style/article.md b/1-js/3-writing-js/2-coding-style/article.md
new file mode 100644
index 00000000..72dbda94
--- /dev/null
+++ b/1-js/3-writing-js/2-coding-style/article.md
@@ -0,0 +1,406 @@
+# Советы по стилю кода 
+
+Код должен быть максимально читаемым и понятным. Для этого нужен *хороший стиль* написания кода. В этой главе мы рассмотрим компоненты такого стиля.
+
+[cut]
+## Синтаксис
+
+Шпаргалка с правилами синтаксиса:
+
+<img src="cheatsheet.png">
+
+Разберём основные моменты.
+
+### Фигурные скобки
+
+Пишутся на той же строке, так называемый "египетский" стиль. Перед скобкой -- пробел.
+
+<img src="figure.png">
+
+Если у вас уже есть опыт в разработке и вы привыкли делать скобку на отдельной строке -- это тоже вариант. В конце концов, решать вам. Но в основных JavaScript-фреймворках (jQuery, Dojo, Google Closure Library, Mootools, Ext.JS, YUI...) стиль именно такой.
+
+Если условие и код достаточно короткие, например `if (cond) return null;`, то запись в одну строку вполне читаема... Но, как правило, отдельная строка всё равно воспринимается лучше.
+
+### Длина строки
+
+Максимальную длину строки согласовывают в команде. Как правило, это либо `80`, либо `120` символов, в зависимости от того, какие мониторы у разработчиков. 
+
+Более длинные строки необходимо разбивать. Если этого не сделать, то перевод очень длинной строки сделает редактор, и это может быть менее красиво и читаемо.
+
+### Отступы 
+
+Отступы нужны двух типов:
+
+<ul>
+<li>**Горизонтальный отступ, при вложенности -- два(или четыре) пробела.** 
+
+Как правило, используются именно пробелы, т.к. они позволяют сделать более гибкие "конфигурации отступов", чем символ "Tab".
+
+Например:
+
+```js
+function fib(n) {
+*!*
+  var a = 1;
+  var b = 1;
+*/!*
+  for (var i = 3; i <= n; i++) {
+    var c = a + b;
+    a = b;
+    b = c;
+  }          
+  return b;
+}
+```
+
+Кстати, обратите внимание, переменные в выделенном фрагменте объявлены по вертикали, а не в строку `var a=1, b=1`. Так более наглядно, человеческий глаз лучше воспринимает ("сканирует") вертикально выравненную информацию, нежели по горизонтали. Это известный факт среди дизайнеров и нам, программистам, он тоже будет полезен для лучшей организации кода.
+
+</li>
+<li>**Вертикальный отступ, для лучшей разбивки кода -- перевод строки.** 
+
+Используется, чтобы разделить логические блоки внутри одной функции. В примере ниже разделены функция `pow`, получение данных `x,n` и их обработка `if`.
+
+```js
+function pow(x, n) {
+  return (n != 1) ? pow(x, n-1) : x;
+}
+           // <--
+x = prompt(...);
+n = prompt(...);
+           // <--
+if (n >= 1) {
+  var result = pow(x, n);
+  alert(result);
+}
+```
+
+Вставляйте дополнительный перевод строки туда, где это сделает код более читаемым. Не должно быть более 9 строк кода подряд без вертикального отступа.
+</li>
+</ul>
+
+### Точка с запятой
+
+Точки с запятой нужно ставить, даже если их, казалось бы, можно пропустить. 
+
+Есть языки, в которых точка с запятой не обязательна, и её там никто не ставит. В JavaScript она тоже не обязательна, но ставить нужно. В чём же разница?
+
+Она в том, что **в JavaScript без точки с запятой возможны трудноуловимые ошибки.** С некоторыми примерами вы встретитесь дальше в учебнике. Такая вот особенность синтаксиса. И поэтому рекомендуется её всегда ставить. 
+
+## Именование
+
+Общее правило:
+<ul>
+<li>Имя переменной -- существительное.</li>
+<li>Имя функции -- глагол или начинается с глагола. Бывает, что имена для краткости делают существительными, но глаголы понятнее.</li>
+</ul>
+
+Для имён используется английский язык (не транслит) и верблюжья нотация.
+
+Более подробно -- читайте про [имена функций](#function-naming) и [имена переменных](#variable-naming).
+
+## Уровни вложенности
+
+Уровней вложенности должно быть немного.
+
+Например, [проверки в циклах лучше делать через "continue"](#continue), чтобы не было дополнительного уровня `if(..) { ... }`:
+
+Вместо:
+
+```js
+for (var i=0; i<10; i++) {
+  if (i подходит) {
+    ... // <- уровень вложенности 2
+  }
+}
+```
+
+Используйте:
+
+```js
+for (var i=0; i<10; i++) {
+  if (i *!*не*/!* подходит) *!*continue*/!*;
+  ...  // <- уровень вложенности 1
+}
+```
+
+Аналогичная ситуация -- с `if/else` и `return`. Следующие две конструкции идентичны.
+
+Первая:
+
+```js
+function isEven(n) { // проверка чётности
+  if (n % 2 == 0) {
+    return true;
+*!*
+  } else { 
+    return false;
+  }
+*/!*
+}
+```
+
+Вторая:
+
+```js
+function isEven(n) { // проверка чётности
+  if (n % 2 == 0) {
+    return true;
+  }
+ 
+*!*
+  return false; 
+*/!*
+}
+```
+
+Если в блоке `if` идёт `return`, то `else` за ним не нужен. 
+
+**Лучше быстро обработать простые случаи, вернуть результат, а дальше разбираться со сложным, без дополнительного уровня вложенности.**
+
+В случае с функцией `isEven` можно было бы поступить и проще:
+
+```js
+function isEven(n) { // проверка чётности
+  return n % 2 == 0; 
+}
+```
+
+..Казалось бы, можно пойти дальше, есть ещё более короткий вариант:
+
+```js
+function isEven(n) { // проверка чётности
+  return !(n % 2); 
+}
+```
+
+...Однако, код `!(n % 2)` менее очевиден чем `n % 2 == 0`. Поэтому, на самом деле, последний вариант хуже. **Главное для нас -- не краткость кода, а его простота и читаемость.**
+
+## Функции = Комментарии
+
+Функции должны быть небольшими. Если функция большая -- желательно разбить её на несколько.
+
+Этому правилу бывает сложно следовать, но оно стоит того. При чем же здесь комментарии? 
+
+Вызов отдельной небольшой функции не только легче отлаживать и тестировать -- сам факт его наличия является *отличным комментарием*.
+
+Сравните, например, две функции `showPrimes(n)` для вывода простых чисел до `n`.
+
+Первый вариант:
+
+```js
+function showPrimes(n) {
+  nextPrime: 
+  for (var i=2; i<n; i++) {
+
+    for (var j=2; j<i; j++) {
+      if ( i % j == 0) continue nextPrime;
+    }
+    
+    alert(i);  // простое
+  }
+}
+```
+
+Второй вариант, вынесена подфункция `isPrime(n)` для проверки на простоту:
+
+```js
+function showPrimes(n) {
+  
+  for (var i=2; i<n; i++) {
+    *!*if (!isPrime(i)) continue;*/!*
+     
+    alert(i);  // простое         
+  }
+}
+
+function isPrime(n) {
+  for (var i=2; i<n; i++) {
+    if ( n % i == 0) return false;
+  }
+  return true;
+}
+```
+
+Второй вариант проще и понятнее, не правда ли? Вместо участка кода мы видим описание действия, которое там совершается (проверка `isPrime`).
+ 
+## Функции -- под кодом
+
+Есть два способа расположить функции, необходимые для выполнения кода.
+
+<ol>
+<li>Функции над кодом, который их использует:
+
+```js
+// *!*объявить функции*/!*
+function createElement() {
+  ...
+}
+
+function setHandler(elem) {
+  ...
+}
+
+function walkAround() {
+  ...
+}
+
+// *!*код, использующий функции*/!*
+var elem = createElement();
+setHandler(elem);
+walkAround();
+```
+
+</li>
+<li>Сначала код, а функции внизу:
+
+```js
+// *!*код, использующий функции*/!*
+var elem = createElement();
+setHandler(elem);
+walkAround();
+
+// --- *!*функции*/!* ---
+
+function createElement() {
+  ...
+}
+
+function setHandler(elem) {
+  ...
+}
+
+function walkAround() {
+  ...
+}
+```
+
+</li>
+</ol>
+
+...На самом деле существует еще третий "стиль", при котором функции хаотично разбросаны по коду ;), но это ведь не наш метод, да? 
+
+**Как правило, лучше располагать функции под кодом, который их использует.** То есть, это 2й способ. 
+
+Дело в том, что при чтении такого кода мы хотим знать в первую очередь, *что он делает*, а уже затем *какие функции ему помогают.* Если первым идёт код, то это как раз дает необходимую информацию. Что же касается функций, то вполне возможно нам и не понадобится их читать, особенно если они названы адекватно и то, что они делают, понятно.
+
+У первого способа, впрочем, есть то преимущество, что на момент чтения мы уже знаем, какие функции существуют. 
+
+Таким образом, если над названиями функций никто не думает -- может быть, это будет лучшим выбором :). Попробуйте оба варианта, но по моей практике предпочтителен всё же второй.
+
+
+## Комментарии
+
+В коде нужны комментарии. 
+
+**Как правило, комментарии отвечают на вопрос "что происходит в коде?"**
+
+Например:
+<ul>
+<li>**Архитектурный комментарий -- "как оно, вообще, устроено".** 
+
+Какие компоненты есть, какие технологии использованы, поток взаимодействия. О чём и зачем этот скрипт. Эти комментарии особенно нужны, если вы не один.
+
+Для описания архитектуры, кстати, создан специальный язык [UML](http://ru.wikipedia.org/wiki/Unified_Modeling_Language), красивые диаграммы, но можно и без этого. Главное -- чтобы понятно.
+</li>
+<li>**Справочный комментарий перед функцией -- о том, что именно она делает, какие параметры принимает и что возвращает.** 
+
+Для таких комментариев существует синтаксис [JSDoc](http://en.wikipedia.org/wiki/JSDoc).
+
+```js
+/**
+ * Возвращает x в степени n, только для натуральных n
+ *
+ * @param {number} x Число для возведения в степень.
+ * @param {number} n Показатель степени, натуральное число.
+ * @return {number} x в степени n.
+ */
+function pow(x, n) {
+  ...
+}
+```
+
+Такие комментарии позволяют сразу понять, что принимает и что делает функция, не вникая в код. 
+
+Кстати, они автоматически обрабатываются многими редакторами, например [Aptana](http://aptana.com) и редакторами от [JetBrains](http://www.jetbrains.com/), которые  учитывают их при автодополнении.
+</li>
+<li>**Краткий комментарий, что именно происходит в данном блоке кода.**
+
+Что интересно, в коде начинающих разработчиков обычно комментариев либо нет, либо они как раз такого типа: "что делается в этих строках кода". 
+
+На самом деле именно эти комментарии, как правило, являются самыми ненужными. Хороший код и так самоочевиден, если не используются особо сложные алгоритмы. 
+
+Об этом замечательно выразился Р. Мартин в книге ["Чистый код"](http://www.ozon.ru/context/detail/id/21916535/): "Если вам кажется, что нужно добавить комментарий для улучшения понимания, это значит, что ваш код не достаточно прост, и, может, стоит переписать его".
+
+</li>
+</ul>
+
+**...Но куда более важными могут быть комментарии, которые объясняют не *что*, а *почему* в коде происходит именно это!**
+
+Как правило, из кода можно понять, что он делает. Бывает, конечно, всякое, но, в конце концов, вы этот код *видите*. Однако гораздо важнее может быть то, чего вы *не видите*!
+
+*Почему* это сделано именно так? На это сам код ответа не даёт.
+
+Например:
+
+<ul>
+<li>**Есть несколько способов решения задачи. Почему выбран именно этот?**
+
+Например, пробовали решить задачу по-другому, но не получилось -- напишите об этом. Почему вы выбрали именно этот способ решения? Особенно это важно в тех случаях, когда используется не первый приходящий в голову способ, а какой-то другой.
+
+Без этого возможна, например, такая ситуация:
+<ul>
+<li>Вы открываете код, который был написан какое-то время назад, и видите, что он "неоптимален".</li>
+<li>Думаете: "Какой я был дурак", и переписываете под "более очевидный и правильный" вариант.</li>
+<li>...Порыв, конечно, хороший, да только этот вариант вы уже обдумали раньше. И отказались, а почему -- забыли. В процессе переписывания вспомнили, конечно (к счастью), но результат - потеря времени на повторное обдумывание.</li>
+</ul>
+
+Комментарии, которые объясняют поведение кода, очень важны. Они помогают понять происходящее и принять правильное решение о развитии кода.
+
+</li>
+<li>**Какие неочевидные возможности обеспечивает этот код?** Где в другом месте кода они используются?
+
+В хорошем коде должно быть минимум неочевидного. Но там, где это есть -- пожалуйста, комментируйте.
+</li>
+
+</ul>
+
+Один из показателей хорошего разработчика -- качество комментариев, которые позволяют эффективно поддерживать код, возвращаться к нему после любой паузы и легко вносить изменения.
+
+
+## Руководства по стилю
+
+Когда написанием проекта занимается целая команда, то должен существовать один стандарт кода, описывающий где и когда ставить пробелы, запятые, переносы строк и т.п. 
+
+Сейчас, когда есть столько готовых проектов, нет смысла придумывать целиком своё руководство по стилю. Можно взять уже готовое, и которому, по желанию, всегда можно что-то добавить.
+
+Большинство есть на английском, сообщите мне, если найдёте хороший перевод:
+
+<ul>
+<li>[Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml)</li>
+<li>[JQuery Core Style Guidelines](http://docs.jquery.com/JQuery_Core_Style_Guidelines)</li>
+<li>[Idiomatic.JS](https://github.com/rwldrn/idiomatic.js) (есть [перевод](https://github.com/rwldrn/idiomatic.js/tree/master/translations/ru_RU))</li>
+<li>[Dojo Style Guide](http://dojotoolkit.org/community/styleGuide)</li>
+</ul>
+
+Для того, чтобы начать разработку, вполне хватит элементов стилей, обозначенных в этой главе. В дальнейшем, посмотрите на эти руководства, найдите "свой" стиль ;) 
+
+### Автоматизированные средства проверки
+
+Существуют онлайн-сервисы, проверяющие стиль кода.
+
+Самые известные -- это:
+
+<ul>
+<li>[JSLint](http://www.jslint.com/) -- проверяет код на соответствие [стилю JSLint](http://www.jslint.com/lint.html), в онлайн-интерфейсе вверху можно ввести код, а внизу различные настройки проверки, чтобы сделать её более мягкой. </li>
+<li>[JSHint](http://www.jshint.com/) -- ещё один вариант JSLint, ослабляющий требования в ряде мест.</li>
+<li>[Closure Linter](https://developers.google.com/closure/utilities/) -- проверка на соответствие [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml).</li>
+</ul>
+
+Все они также доступны в виде программ, которые можно скачать.
+
+## Итого
+
+Описанные принципы оформления кода уместны в большинстве проектов. Есть и другие полезные соглашения.
+
+Следуя (или не следуя) им, необходимо помнить, что любые советы по стилю хороши лишь тогда, когда делают код читаемее, понятнее, проще в поддержке.
+
diff --git a/1-js/3-writing-js/2-coding-style/cheatsheet.png b/1-js/3-writing-js/2-coding-style/cheatsheet.png
new file mode 100755
index 00000000..ea150473
Binary files /dev/null and b/1-js/3-writing-js/2-coding-style/cheatsheet.png differ
diff --git a/1-js/3-writing-js/2-coding-style/figure.png b/1-js/3-writing-js/2-coding-style/figure.png
new file mode 100755
index 00000000..5d2f1167
Binary files /dev/null and b/1-js/3-writing-js/2-coding-style/figure.png differ
diff --git a/1-js/3-writing-js/3-write-unmain-code/article.md b/1-js/3-writing-js/3-write-unmain-code/article.md
new file mode 100644
index 00000000..9bee2b50
--- /dev/null
+++ b/1-js/3-writing-js/3-write-unmain-code/article.md
@@ -0,0 +1,332 @@
+# Как писать неподдерживаемый код?
+
+Предлагаю вашему вниманию советы мастеров древности, следование которым создаст дополнительные рабочие места для JavaScript-разработчиков.
+	
+Если вы будете им следовать, то ваш код будет так сложен в поддержке, что у JavaScript'еров, которые придут после вас, даже простейшее изменение займет годы *оплачиваемого* труда! А сложные задачи оплачиваются хорошо, так что они, определённо, скажут вам "Спасибо".
+	
+Более того, *внимательно* следуя этим правилам, вы сохраните и своё рабочее место, так как все будут бояться вашего кода и бежать от него...
+	
+...Впрочем, всему своя мера. При написании такого кода он не должен *выглядеть* сложным в поддержке, код должен *быть* таковым. Явно кривой код может написать любой дурак. Это заметят, и вас уволят, а код будет переписан с нуля. Вы не можете такого допустить.  Эти советы учитывают такую возможность. Да здравствует дзен.
+ 	 	
+Статья представляет собой мой вольный перевод [How To Write Unmaintainable Code](http://mindprod.com/jgloss/unmain.html) с дополнениями, актуальными для JavaScript.
+ 	 	
+[cut]
+
+## Соглашения
+
+[quote author="Сериал \"Симпсоны\", серия Helter Shelter"]
+Рабочий-чистильщик осматривает дом:<br>
+"...Вот только жук у вас необычный...<br>
+И чтобы с ним справиться, я должен жить как жук, стать жуком, думать как жук."<br>
+(грызёт стол Симпсонов)
+[/quote]
+
+Чтобы помешать другому программисту исправить ваш код, вы должны понять путь его мыслей. 
+
+Представьте, перед ним -- ваш большой скрипт. И ему нужно поправить его. У него нет ни времени ни желания, чтобы читать его целиком, а тем более -- досконально разбирать. Он хотел бы по-быстрому найти нужное место, сделать изменение и убраться восвояси без появления побочных эффектов.
+
+Он рассматривает ваш код как бы через трубочку из туалетной бумаги. Это не даёт ему общей картины, он ищет тот небольшой фрагмент, который ему необходимо изменить. По крайней мере, он надеется, что этот фрагмент будет небольшим.
+
+**На что он попытается опереться в этом поиске -- так это на соглашения, принятые в программировании, об именах переменных, названиях функций и методов...**
+
+Как затруднить задачу? Можно везде нарушать соглашения -- это помешает ему, но такое могут заметить, и код будет переписан. Как поступил бы ниндзя на вашем месте?
+
+**...Правильно! Следуйте соглашениям "в общем", но иногда -- нарушайте их.** Тщательно разбросанные по коду нарушения соглашений с одной стороны не делают код явно плохим при первом взгляде, а с другой -- имеют в точности тот же, и даже лучший эффект, чем явное неследование им! 
+
+Если пример, который я приведу ниже, пока сложноват -- пропустите его, но обязательно вернитесь к нему позже. Поверьте, это стоит того.
+
+Во фреймворке jQuery есть метод [wrap](http://api.jquery.com/wrap/), который обёртывает один элемент вокруг другого:
+
+```js
+var img = $('<img/>'); // создали новые элементы (jQuery-синтаксис)
+var div = $('<div/>'); // и поместили в переменную
+
+*!*
+img.wrap(div); // обернуть img в div
+*/!*
+```
+
+Результат кода выше -- два элемента, один вложен в другой:
+
+```html
+<div>
+  <img/>  
+</div>
+```
+
+(`div` обернулся вокруг `img`)
+
+А теперь, когда все расслабились и насладились этим замечательным методом...
+
+...Самое время ниндзя нанести свой удар!
+
+**Как вы думаете, что будет, если добавить к коду выше строку:**
+
+```js
+//+ lines first-line=5
+div.append('<span/>');
+```
+
+[smart header="jQuery-справка"]
+Вызов `elemA.append(elemB)` добавляет `elemB` в конец содержимого элемента `elemA`. 
+[/smart]
+
+**Возможно, вы полагаете, что `<span/>` добавится в конец `div`, сразу после `img`?**
+
+А вот и нет! А вот и нет!..
+
+Оказывается, внутри вызова `img.wrap(div)` происходит *клонирование* `div`. И вокруг `img` оборачивается не сам `div`, а его <strike>злой</strike> клон. 
+
+При этом исходная переменная `div` не меняется, в ней как был пустой `div`, так и остался. В итоге, после применения к нему `append` получается два `div'а`: один обёрнут вокруг `span`, а в другом -- только `img`. 
+
+<table>
+<tr>
+
+<th>Переменная `div`</th>
+<th>Клон `div`, созданный `wrap`
+ (не присвоен никакой переменной)</th>
+</tr>
+
+<tr>
+<td>
+
+```html
+<div>
+  <span/>
+</div>
+```
+
+</td>
+<td>
+
+```html
+<div>
+  <img/>
+</div>
+```
+
+</td>
+</tr>
+</table>
+
+Странно? Неочевидно? Да, и не только вам :)
+
+Соглашение в данном случае -- в том, что большинство методов jQuery не клонируют элементы. А вызов `wrap` -- клонирует. 
+
+Код его истинный ниндзя писал!
+
+## Краткость -- сестра таланта!
+
+Пишите "как короче", а не как понятнее. "Меньше букв" -- уважительная причина для нарушения любых соглашений.
+
+Ваш верный помощник -- возможности языка, использованные неочевидным образом.
+
+Обратите внимание на оператор вопросительный знак `'?'`, например:
+
+```js
+// код из jQuery
+i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
+```
+
+Разработчик, встретивший эту строку и попытавшийся понять, чему же всё-таки равно `i`, скорее всего придёт к вам за разъяснениями. Смело скажите ему, что короче -- это всегда лучше. Посвятите и его в пути ниндзя. Не забудьте вручить [Дао дэ цзин](http://lib.ru/POECHIN/lao1.txt).
+
+## Именование
+
+Существенную часть науки о создании неподдерживаемого кода занимает искусство выбора имён. 
+
+### Однобуквенные переменные
+
+Называйте переменные коротко: `a`, `b` или `c`.
+
+В этом случае никто не сможет найти её, используя фунцию "Поиск" текстового редактора. 
+
+Более того, даже найдя -- никто не сможет "расшифровать" её и догадаться, что она означает.
+
+### Не используйте i для цикла
+
+В тех местах, где однобуквенные переменные общеприняты, например, в счетчике цикла -- ни в коем случае не используйте стандартные названия `i`, `j`, `k`. Где угодно, только не здесь!
+
+Остановите свой взыскательный взгляд на чём-нибудь более экзотическом. Например, `x` или `y`. 
+
+Эффективность этого подхода особенно заметна, если тело цикла занимает одну-две страницы. 
+
+В этом случае заметить, что переменная -- счетчик цикла, без пролистывания вверх, невозможно. 
+
+### Русские слова и сокращения
+
+Если вам *приходится* использовать длинные, понятные имена переменных -- что поделать.. Но и здесь есть простор для творчества!
+
+**Назовите переменные "калькой" с русского языка или как-то "улучшите" английское слово.** 
+
+В одном месте напишите `var ssilka`, в другом `var ssylka`, в третьем `var link`, в четвёртом -- `var lnk`... Это действительно великолепно работает и очень креативно! 
+
+Количество ошибок при поддержке такого кода увеличивается во много раз.
+
+### Будьте абстрактны при выборе имени
+
+[quote author="Лао-цзы"]Лучший кувшин лепят всю жизнь.<br>
+Высокая музыка неподвластна слуху.<br>
+Великий образ не имеет формы.[/quote]
+
+При выборе имени старайтесь применить максимально абстрактное слово, например `obj`, `data`, `value`, `item`, `elem` и т.п. 
+
+<ul>
+<li>**Идеальное имя для переменной: `data`.** Используйте это имя везде, где можно. В конце концов, каждая переменная содержит *данные*, не правда ли?
+
+Но что делать, если имя `data` уже занято? Попробуйте `value`, оно не менее универсально. Ведь каждая переменная содержит *значение*.
+
+Занято и это? Есть и другой вариант.
+</li>
+<li>**Называйте переменную по типу данных, которые она хранит: `obj`, `num`, `arr`...**
+
+Насколько это усложнит разработку? Как ни странно, намного!
+
+Казалось бы, название переменной содержит информацию, говорит о том, что в переменной -- число, объект или массив... С другой стороны, **когда непосвящённый будет разбирать этот код -- он с удивлением обнаружит, что информации нет!**
+
+Ведь как раз тип легко понять, запустив отладчик и посмотрев, что внутри. Но в чём смысл этой переменной? Что за массив/объект/число в ней хранится? Без долгой медитации над кодом тут не обойтись!
+</li>
+<li>**Что делать, если и эти имена кончились? Просто добавьте цифру:** `item1, item2, elem5, data1`...</li>
+</ul>
+
+### Похожие имена
+
+Только истинно внимательный программист достоин понять ваш код. Но как проверить, достоин ли читающий? 
+
+**Один из способов -- использовать похожие имена переменных, например `data` и `date`.** Бегло прочитать такой код почти невозможно. А уж заметить опечатку и поправить её... Ммммм... Мы здесь надолго, время попить чайку.
+
+### А.К.Р.О.Н.И.М
+
+Используйте сокращения, чтобы сделать код короче. 
+
+Например `ie` (Inner Element), `mc` (Money Counter) и другие. Если вы обнаружите, что путаетесь в них сами -- героически страдайте, но не переписывайте код. Вы знали, на что шли.
+
+### Хитрые синонимы
+
+[quote author="Конфуций"]Очень трудно найти чёрную кошку в тёмной комнате, особенно когда её там нет.[/quote]
+
+**Чтобы было не скучно -- используйте *похожие названия* для обозначения *одинаковых действий*.** 
+
+Например, если метод показывает что-то на экране -- начните его название с `display..` (скажем, `displayElement`), а в другом месте объявите аналогичный метод как `show..` (`showFrame`). 
+
+**Как бы намекните этим, что существует тонкое различие между способами показа в этих методах, хотя на самом деле его нет.** 
+
+По возможности, договоритесь с членами своей команды. Если Вася в своих классах использует `display..`, то Валера -- обязательно `render..`, а Петя -- `paint..`. 
+
+**...И напротив, если есть две функции с важными отличиями -- используйте одно и то же слово для их описания!** Например, с `print...` можно начать метод печати на принтере `printPage`, а также -- метод добавления текста на страницу `printText`. 
+
+А теперь, пусть читающий код думает: "Куда же выводит сообщение `printMessage`?". Особый шик -- добавить элемент неожиданности. Пусть `printMessage` выводит не туда, куда все, а в новое окно!
+
+### Словарь терминов -- это еда!
+
+Ни в коем случае не поддавайтесь требованиям написать словарь терминов для проекта. Если же он уже есть -- не следуйте ему, а лучше проглотите и скажите, что так и былО!
+
+Пусть читающий ваш код программист напрасно ищет различия в `helloUser` и `welcomeVisitor` и пытается понять, когда что использовать. Вы-то знаете, что на самом деле различий нет, но искать их можно о-очень долго. 
+
+**Для обозначения посетителя в одном месте используйте `user`, а в другом `visitor`, в третьем -- просто `u`. Выбирайте одно имя или другое, в зависимости от функции и настроения.**
+
+Это воплотит сразу два ключевых принципа ниндзя-дизайна -- *сокрытие информации* и *подмена понятий*! 
+
+### Повторно используйте имена
+
+По возможности, повторно используйте имена переменных, функций и свойств. Просто записывайте в них новые значения. 
+
+Добавляйте новое имя только если это абсолютно необходимо.
+
+В функции старайтесь обойтись только теми переменными, которые были переданы как параметры.
+
+Это не только затруднит идентификацию того, что *сейчас* находится в переменной, но и сделает почти невозможным поиск места, в котором конкретное значение было присвоено.
+
+Цель -- максимально усложнить отладку и заставить читающего код программиста построчно анализировать код и конспектировать изменения переменных для каждой ветки исполнения.
+
+**Продвинутый вариант этого подхода -- незаметно (!) подменить переменную на нечто похожее, например:**
+
+```js
+function ninjaFunction(elem) {
+  // 20 строк кода, работающего с elem
+
+  elem = elem.cloneNode(true);
+
+  // еще 20 строк кода, работающего с elem
+}
+```
+
+Программист, пожелавший добавить действия с `elem` во вторую часть функции, будет удивлён. Лишь во время отладки, посмотрев весь код, он с удивлением обнаружит, что оказывается имел дело с клоном! 
+
+Регулярные встречи с этим приемом на практике говорят: защититься невозможно. Эффективно даже против опытного ниндзи.
+
+### Добавляйте подчеркивания
+
+Добавляйте подчеркивания `_` и `__` к именам переменных. Желательно, чтобы их смысл был известен только вам, а лучше -- вообще без явной причины.
+
+Этим вы достигните двух целей. Во-первых, код станет длиннее и менее читаемым, а во-вторых, другой программист будет долго искать смысл в подчёркиваниях. Особенно хорошо сработает и внесет сумятицу в его мысли, если в некоторых частях проекта подчеркивания будут, а в некоторых -- нет.
+
+В процессе развития кода вы, скорее всего, будете путаться и смешивать стили: добавлять имена с подчеркиваниями там, где обычно подчеркиваний нет, и наоборот. Это нормально и полностью соответствует третьей цели -- увеличить количество ошибок при внесении исправлений.
+
+### Покажите вашу любовь к разработке
+
+Пусть все видят, какими замечательными сущностями вы оперируете! Имена `superElement`, `megaFrame` и `niceItem` при благоприятном положении звёзд могут привести к просветлению читающего. 
+
+Действительно, с одной стороны, кое-что написано: `super..`, `mega..`, `nice..` С другой -- это не несёт никакой конкретики. Читающий может решить поискать в этом глубинный смысл и замедитировать на часок-другой оплаченного рабочего времени.
+
+### Перекрывайте внешние переменные
+
+[quote author="Гуань Инь-цзы"]
+Находясь на свету, нельзя ничего увидеть в темноте.<br>
+Пребывая же в темноте, увидишь все, что находится на свету.
+[/quote]
+
+Почему бы не использовать одинаковые переменные внутри и снаружи функции? Это просто и не требует придумывать новых имён.
+
+```js
+var *!*user*/!* = authenticateUser();
+
+function render() {
+  var *!*user*/!* = ...
+  ...
+  ...многобукв...
+  ...
+  ... // <-- программист захочет внести исправления сюда, и..
+  ...
+}
+```
+
+Зашедший в середину метода `render` программист, скорее всего, не заметит, что переменная `user` "уже не та" и использует её... Ловушка захлопнулась! Здравствуй, отладчик.
+
+## Мощные функции!
+
+Не ограничивайте действия функции тем, что написано в её названии. Будьте шире. 
+
+Например, функция `validateEmail(email)` может, кроме проверки e-mail на правильность, выводить сообщение об ошибке и просить заново ввести e-mail.
+
+**Выберите хотя бы пару дополнительных действий, кроме основного назначения функции.** Главное -- они должны быть неочевидны из названия функции. Истинный ниндзя-девелопер сделает так, что они будут неочевидны и из кода тоже.</li>
+
+**Объединение нескольких смежных действий в одну функцию защитит ваш код от повторного использования.**
+
+Представьте, что другому разработчику нужно только проверить адрес, а сообщение -- не выводить. Ваша функция `validateEmail(email)`, которая делает и то и другое, ему не подойдёт. Работодатель будет вынужден оплатить создание новой.
+
+
+## Внимание.. Сюр-при-из!
+
+Есть функции, название которых говорит о том, что они ничего не меняют. Например, `isReady`, `checkPermission`, `findTags`... Предполагается, что при вызове они произведут некие вычисления, или найдут и возвратят полезные данные, но при этом их не изменят. В трактатах это называется "отсутствие сторонних эффектов".  
+
+**По-настоящему красивый приём -- делать в таких функциях что-нибудь полезное, заодно с процессом проверки. Что именно -- совершенно неважно.** 
+
+Удивление и ошеломление, которое возникнет у вашего коллеги, когда он увидит, что функция с названием на `is..`, `check..` или `find...` что-то меняет -- несомненно, расширит его границы разумного!
+
+**Ещё одна вариация такого подхода -- возвращать нестандартное значение.**
+
+Ведь общеизвестно, что `is..` и `check..` обычно возвращают `true/false`. Продемонстрируйте оригинальное мышление. Пусть вызов `checkPermission` возвращает не результат `true/false`, а объект -- с результатами проверки! А что, полезно.
+
+Те разработчики, кто попытается написать проверку `if (checkPermission(..))`, будут весьма удивлены результатом. Ответьте им: "надо читать документацию!". И перешлите эту статью.
+
+## Заключение
+
+Все советы выше пришли из реального кода... И в том числе от разработчиков с большим опытом. 
+
+Возможно, даже больше вашего, так что не судите опрометчиво ;)
+
+<ul>
+<li>Следуйте нескольким из них -- и ваш код станет полон сюрпризов.</li>
+<li>Следуйте многим -- и ваш код станет истинно вашим, никто не захочет изменять его.</li>
+<li>Следуйте всем -- и ваш код станет ценным уроком для молодых разработчиков, ищущих просветления.</li>
+</ul>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/solution.js b/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/solution.js
new file mode 100644
index 00000000..ba86c0d8
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/solution.js
@@ -0,0 +1,10 @@
+function pow(x, n) {
+  if (n < 0) return NaN;
+  if (Math.round(n) != n) return NaN;
+ 
+  var result = 1;
+  for(var i=0; i<n; i++) {
+    result *= x;
+  }
+  return result;
+}
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/source.js b/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/source.js
new file mode 100644
index 00000000..b031e9c4
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/source.js
@@ -0,0 +1,8 @@
+/* исправьте этот код */
+function pow(x, n) {
+  var result = 1;
+  for(var i=0; i<n; i++) {
+    result *= x;
+  }
+  return result;
+}
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/test.js b/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/test.js
new file mode 100644
index 00000000..b5cbe3da
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/1-pow-nan-spec/_js.view/test.js
@@ -0,0 +1,26 @@
+describe("pow", function() {
+
+  describe("возводит x в степень n", function() {
+
+    function makeTest(x) {
+      var expected = x*x*x;
+      it("при возведении "+x+" в степень 3 результат: " + expected, function() { 
+        assert.equal( pow(x, 3), expected);
+      });
+    }
+
+    for(var x = 1; x <= 5; x++) {
+      makeTest(x);
+    }
+
+  });
+
+  it("при возведении в отрицательную степень результат NaN", function() {
+    assert( isNaN( pow(2, -1) ), "pow(2, -1) не NaN" );
+  });
+
+  it("при возведении в дробную степень результат NaN", function() {
+    assert( isNaN( pow(2, 1.5) ), "pow(2, -1.5) не NaN" );
+  });
+
+});
diff --git a/1-js/3-writing-js/4-testing/1-pow-nan-spec/solution.md b/1-js/3-writing-js/4-testing/1-pow-nan-spec/solution.md
new file mode 100644
index 00000000..bc1770ce
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/1-pow-nan-spec/solution.md
@@ -0,0 +1,17 @@
+
+
+```js
+function pow(x, n) {
+*!*
+  if (n < 0) return NaN;
+  if (Math.round(n) != n) return NaN;
+*/!*
+ 
+  var result = 1;
+  for(var i=0; i<n; i++) {
+    result *= x;
+  }
+  return result;
+}
+```
+
diff --git a/1-js/3-writing-js/4-testing/1-pow-nan-spec/task.md b/1-js/3-writing-js/4-testing/1-pow-nan-spec/task.md
new file mode 100644
index 00000000..ce3b498b
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/1-pow-nan-spec/task.md
@@ -0,0 +1,17 @@
+# Сделать pow по спецификации
+
+[importance 5]
+
+Исправьте код функции `pow`, чтобы тесты проходили.
+
+Для этого ниже в задаче вы найдёте ссылку на песочницу.
+
+Она содержит HTML с тестами. Обратите внимание, что HTML-страница в ней короче той, что обсуждалась в статье [](/testing). Это потому что библиотеки Chai, Mocha и Sinon объединены в один файл:
+
+```html
+<script src="http://js.cx/test/libs.js"></script>
+```
+
+Этот файл содержит код библиотек, стили, настройки для них и запуск `mocha.run` по окончании загрузки страницы. Если нет элемента с `id="mocha"`, то результаты выводятся в `<body>`.
+
+Сборка сделана исключительно для более компактного представления задач, без рекомендаций использовать именно её в проектах.
diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/solution.js b/1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/solution.js
new file mode 100644
index 00000000..dbc8d388
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/solution.js
@@ -0,0 +1,11 @@
+function pow(x, n) {
+  if (n < 0) return NaN;
+  if (Math.round(n) != n) return NaN;
+  if (n == 0 && x ==0) return NaN;
+ 
+  var result = 1;
+  for(var i=0; i<n; i++) {
+    result *= x;
+  }
+  return result;
+}
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/source.js b/1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/source.js
new file mode 100644
index 00000000..ba86c0d8
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/source.js
@@ -0,0 +1,10 @@
+function pow(x, n) {
+  if (n < 0) return NaN;
+  if (Math.round(n) != n) return NaN;
+ 
+  var result = 1;
+  for(var i=0; i<n; i++) {
+    result *= x;
+  }
+  return result;
+}
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/test.js b/1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/test.js
new file mode 100644
index 00000000..158ddfe3
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/test.js
@@ -0,0 +1,44 @@
+describe("pow", function() {
+
+  describe("возводит x в степень n", function() {
+
+    function makeTest(x) {
+      var expected = x*x*x;
+      it("при возведении "+x+" в степень 3 результат: " + expected, function() { 
+        assert.equal( pow(x, 3), expected);
+      });
+    }
+
+    for(var x = 1; x <= 5; x++) {
+      makeTest(x);
+    }
+
+  });
+
+  it("при возведении в отрицательную степень результат NaN", function() {
+    assert( isNaN( pow(2, -1) ), "pow(2, -1) не NaN" );
+  });
+
+  it("при возведении в дробную степень результат NaN", function() {
+    assert( isNaN( pow(2, 1.5) ), "pow(2, -1.5) не NaN" );
+  });
+
+  describe("любое число, кроме нуля, в степени 0 равно 1", function() {
+
+    function makeTest(x) {
+      it("при возведении " + x + " в степень 0 результат: 1", function() { 
+        assert.equal( pow(x, 0), 1);
+      });
+    }
+
+    for(var x = -5; x <= 5; x+=2) {
+      makeTest(x);
+    }
+
+  });
+ 
+  it("ноль в нулевой степени даёт NaN", function() {
+    assert( isNaN( pow(0,0) ), "0 в степени 0 не NaN");
+  });
+
+});
diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/solution.md b/1-js/3-writing-js/4-testing/2-pow-test-0/solution.md
new file mode 100644
index 00000000..97bc3859
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/2-pow-test-0/solution.md
@@ -0,0 +1,38 @@
+Новый тест может быть, к примеру, таким:
+
+```js
+it("любое число в степени 0 равно 1", function() {
+  assert.equal( pow(123, 0), 1);
+});
+```
+
+Конечно, желательно проверить на нескольких числах. 
+
+Поэтому лучше будет создать блок `describe`, аналогичный тому, что мы делали для произвольных чисел:
+
+```js
+describe("любое число, кроме нуля, в степени 0 равно 1", function() {
+
+  function makeTest(x) {
+    it("при возведении " + x + " в степень 0 результат: 1", function() { 
+      assert.equal( pow(x, 0), 1);
+    });
+  }
+
+  for(var x = -5; x <= 5; x+=2) {
+    makeTest(x);
+  }
+
+});
+```
+
+И не забудем добавить отдельный тест для нуля:
+
+```js
+...
+it("ноль в нулевой степени даёт NaN", function() {
+  assert( isNaN(pow(0,0), "0 в степени 0 не NaN");
+});
+...
+```
+
diff --git a/1-js/3-writing-js/4-testing/2-pow-test-0/task.md b/1-js/3-writing-js/4-testing/2-pow-test-0/task.md
new file mode 100644
index 00000000..44063c17
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/2-pow-test-0/task.md
@@ -0,0 +1,7 @@
+# Добавьте тест к задаче
+
+[importance 5]
+
+Добавьте к [предыдущей задаче](/task/pow-nan-spec) тесты, которые будет проверять, что любое число, кроме нуля, в нулевой степени равно `1`, а ноль в нулевой степени даёт `NaN` (это математически корректно, результат 0<sup>0</sup> не определён).
+
+При необходимости, исправьте реализацию, чтобы тесты проходили без ошибок.
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/3-pow-test-wrong/solution.md b/1-js/3-writing-js/4-testing/3-pow-test-wrong/solution.md
new file mode 100644
index 00000000..46b37ff6
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/3-pow-test-wrong/solution.md
@@ -0,0 +1,27 @@
+Этот тест демонстрирует один из соблазнов, которые ожидают начинающего автора тестов.
+
+Вместо того, чтобы написать три различных теста, он изложил их в виде одного потока вычислений, с несколькими `assert`. 
+
+Иногда так написать легче и проще, однако при ошибке в тесте гораздо менее очевидно, что же пошло не так.
+
+Если в сложном тесте произошла ошибка где-то посередине потока вычислений, то придётся выяснять, какие конкретно были входные и выходные данные на этот момент, то есть по сути -- отлаживать код самого теста.
+
+Гораздо лучше будет разбить тест на несколько блоков `it`, с чётко прописанными входными и выходными данными.
+
+```js
+describe("Возводит x в степень n", function() {
+  it("5 в степени 1 равно 5", function() {
+    assert.equal( pow(5, 1), 5 );
+  });
+
+  it("5 в степени 2 равно 25", function() {
+    assert.equal( pow(5, 2), 25 );
+  });
+
+  it("5 в степени 3 равно 125", function() {
+    assert.equal( pow(5, 3), 25 );
+  });
+});
+```
+
+Можно использовать цикл для генерации блоков `it`, в этом случае важно, чтобы сам код такого цикла был достаточно простым. Иногда проще записать несколько блоков `it` вручную, как сделано выше, чем "городить огород" из синтаксических конструкций.
diff --git a/1-js/3-writing-js/4-testing/3-pow-test-wrong/task.md b/1-js/3-writing-js/4-testing/3-pow-test-wrong/task.md
new file mode 100644
index 00000000..febf59f2
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/3-pow-test-wrong/task.md
@@ -0,0 +1,22 @@
+# Что не так в тесте? 
+
+[importance 5]
+
+Что не так в этом тесте функции `pow`?
+
+```js
+it("Возводит x в степень n", function() {
+  var x = 5;
+
+  var result = x;
+  assert.equal( pow(x, 1), result );
+
+  var result *= x;
+  assert.equal( pow(x, 2), result );
+
+  var result *= x;
+  assert.equal( pow(x, 3), result );
+});
+```
+
+P.S. Синтаксически он верен и работает, но спроектирован неправильно.
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/article.md b/1-js/3-writing-js/4-testing/article.md
new file mode 100644
index 00000000..164607ab
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/article.md
@@ -0,0 +1,447 @@
+# Автоматические тесты при помощи chai и mocha
+
+В этой главе мы разберём основы автоматического тестирования. Оно будет применяться далее в задачах, и вообще, входит в "образовательный минимум" программиста.
+
+[cut]
+
+## Зачем нужны тесты?
+
+При написании функции мы обычно представляем, что она должна делать, какое значение -- на каких аргументах выдавать.
+
+В процессе разработки мы, время от времени, проверяем функцию. Самый простой способ проверки -- это запустить функцию и посмотреть результат. 
+
+Потом написать ещё код, попробовать запустить -- опять посмотреть результат.
+
+И так -- "до победного конца". 
+
+К сожалению, такие ручные запуски -- очень несовершенное средство проверки.
+
+**Когда проверяешь работу кода вручную -- легко его "недотестировать".**
+
+Например, пишем функцию `f`. Написали, тестируем с разными аргументами. Вызов функции `f(a)` -- работает, а вот `f(b)` -- не работает. Поправили код -- стало работать `f(b)`, вроде закончили. Но при этом забыли заново протестировать `f(a)` -- упс, вот и возможная ошибка в коде.
+
+**Автоматизированное тестирование -- это когда тесты написаны отдельно от кода, и можно в любой момент запустить их и проверить все важные случаи использования.**
+
+## BDD -- поведенческие тесты кода
+
+Мы рассмотрим методику тестирования, которая входит в [BDD](http://en.wikipedia.org/wiki/Behavior-driven_development) -- Behavior Driven Development. Подход BDD давно и с успехом используется во многих проектах. 
+
+BDD -- это не просто тесты. Это гораздо больше. 
+
+**Тесты BDD -- это три в одном: это И тесты И документация И примеры использования одновременно.**
+
+Впрочем, хватит слов. Рассмотрим примеры.
+
+## Разработка pow
+
+Допустим, мы хотим разработать функцию `pow(x, n)`, которая возводит `x` в целую степень `n`, для простоты `n≥0`.
+
+### Спецификация 
+
+Ещё до разработки мы можем представить себе, что эта функция будет делать и описать это по методике BDD.
+
+Это описание называется *спецификация* (или, как говорят в обиходе, "спека") и выглядит так:
+
+```js
+describe("pow", function() {
+
+  it("возводит в n-ю степень", function() { 
+    assert.equal( pow(2, 3), 8);
+  });
+
+});
+```
+
+У спецификации есть три основных строительных блока, которые вы видите в примере выше:
+<dl>
+<dt>`describe(название, function() { ... })`</dt>
+<dd>Задаёт, что именно мы описываем, используется для группировки "рабочих лошадок" -- блоков `it`. В данном случае мы описываем функцию `pow`.</dd>
+<dt>`it(название, function() { ... })`</dt>
+<dd>В названии блока `it` *человеческим языком* описывается, что должна делать функция, далее следует *тест*, который проверяет это.</dd>
+<dt>`assert.equal(value1, value2)`</dt>
+<dd>Код внутри `it`, если реализация верна, должен выполняться без ошибок. 
+
+Для того, чтобы проверить, делает ли `pow` то, что задумано, используются функции вида `assert.*`. Пока что нас интересует только одна из них -- `assert.equal`, она сравнивает свой первый аргумент со вторым и выдаёт ошибку в случае, когда они не равны. Есть и другие виды сравнений и проверок, которые мы увидим далее.</dd>
+</dl>
+
+Как правило, поток разработки таков:
+<ol>
+<li>Пишется спецификация, которая описывает самый базовый функционал.</li>
+<li>Делается начальная реализация.</li>
+<li>Для проверки соответствия спецификации мы задействуем одновременно фреймворк, в нашем случае [Mocha](http://visionmedia.github.io/mocha/) вместе со спецификацией и реализацией. Фреймворк запускает все тесты `it` и выводит ошибки, если они возникнут. При ошибках вносятся исправления.</li>
+<li>Спецификация расширяется, в неё добавляются возможности, которые пока, возможно, не поддерживаются реализацией.</li>
+<li>Идём на пункт 3, делаем реализацию, и так далее, до победного конца.</li>
+</ol>
+
+Разработка ведётся *итеративно*, один проход за другим, пока спецификация и реализация не будут завершены.
+
+В нашем случае первый шаг уже завершён, начальная спецификация готова, хорошо бы приступить к реализации. Но перед этим проведём "нулевой" запуск спецификации, просто чтобы увидеть, что уже в таком виде, даже без реализации -- тесты работают.
+
+### Проверка спецификации
+
+Для запуска тестов нужны соответствующие JavaScript-библиотеки. 
+
+Мы будем использовать:
+<ul>
+<li>[Mocha](http://visionmedia.github.io/mocha/) -- эта библиотека содержит общие функции для тестирования, включая `describe` и `it`.</li>
+<li>[Chai](http://chaijs.com) -- библиотека поддерживает разнообразные функции для проверок. Есть разные "стили" проверки результатов, с которыми мы познакомимся позже, на текущий момент мы будем использовать лишь `assert.equal`.</li>
+<li>[Sinon](http://sinonjs.org/) -- для эмуляции и хитрой подмены функций "заглушками", понадобится позднее.</li>
+</ul>
+
+Эти библиотеки позволяют тестировать JS не только в браузере, но и на сервере Node.JS. Здесь мы рассмотрим браузерный вариант, серверный использует те же функции.
+
+Пример HTML-страницы для тестов:
+
+```html
+<!--+ src="index.html" -->
+```
+
+Эту страницу можно условно разделить на три части:
+<ol>
+<li>В `<head>` подключаем библиотеки и стили.</li>
+<li>Подключаем `<script>` с реализацией, в нашем случае -- с кодом для `pow`. Пока что функции нет, мы лишь готовимся её написать.</li>
+<li>Далее подключаются тесты, файл `test.js` содержит `describe("pow", ...)`, который был описан выше. Методы `describe` и `it` принадлежат библиотеке Mocha, так что важно, что она была подключена выше. Их вызов добавляет тесты, для запуска которых используется команда `mocha.run()`. Она выведет результат тестов в элемент с `id="mocha"`.</li>
+</ol>
+
+Результат срабатывания:
+
+[iframe height=250 src="pow-1" border=1 edit] 
+
+Пока что у нас одна функция и одна спецификация, но на будущее заметим, что если различных функций и тестов много --  это не проблема, можно их все подключить на одной странице. Конфликта не будет, так как каждый функционал имеет свой блок `describe("что тестируем"...)`. Сами же тесты обычно пишутся так, чтобы не влиять друг на друга, не делать лишних глобальных переменных.
+
+Посмотрели, попробовали запустить у себя что-то подобное? Если да -- идём дальше.
+
+### Начальная реализация
+
+Пока что, как видно, тесты не проходят, ошибка сразу же. Давайте сделаем минимальную реализацию `pow`, которая бы работала нормально:
+
+```js
+function pow() {
+  return 8;   // :) мы - мошенники!
+}
+```
+
+О, вот теперь работает:
+
+[iframe height=250 src="pow-min" border=1 edit] 
+
+### Расширение спецификации
+
+Функция, конечно, ещё не готова, но тесты проходят. Это ненадолго :) 
+
+Здесь мы видим ситуацию, которая (и не обязательно при ленивом программисте!)  бывает на практике -- да, есть тесты, они проходят, но увы, функция работает неправильно.
+
+**С точки зрения BDD, ошибка при проходящих тестах --  вина спецификации.**
+
+В первую очередь не реализация исправляется, а уточняется спецификация, пишется (падающий) тест.
+
+Сейчас мы расширим спецификацию, добавив проверку на `pow(3, 4) = 81`. 
+
+Здесь есть два варианта организации кода:
+
+<ol>
+<li>Первый вариант -- добавить `assert` в тот же `it`:
+
+```js
+describe("pow", function() {
+
+  it("возводит в n-ю степень", function() { 
+    assert.equal( pow(2, 3), 8);
+*!*
+    assert.equal( pow(3, 4), 81);
+*/!*
+  });
+
+});
+```
+
+</li>
+<li>Второй вариант -- сделать два теста:
+
+```js
+describe("pow", function() {
+
+  it("при возведении 2 в 3ю степень результат 8", function() { 
+    assert.equal( pow(2, 3), 8);
+  });
+
+  it("при возведении 3 в 4ю степень равен 81", function() {
+    assert.equal( pow(3, 4), 81);
+  });
+
+});
+```
+
+</li>
+</ol>
+
+Их принципиальное различие в том, что если `assert` обнаруживает ошибку, то он тут же прекращает выполнение блоки `it`. Поэтому в первом варианте, если вдруг первый `assert` "провалился", то про результат второго мы никогда не узнаем.
+
+**Таким образом, разделить эти тесты может быть полезно, чтобы мы получили больше информации о происходящем.**
+
+Кроме того, есть ещё одно правило, которое желательно соблюдать.
+
+**Один тест тестирует ровно одну вещь.**
+
+Если мы явно видим, что тест включает в себя совершенно независимые проверки -- лучше разбить его на два более простых и наглядных. 
+
+По этим причинам второй вариант здесь предпочтительнее. 
+
+Результат:
+[iframe height=250 src="pow-2" edit border="1"]
+
+Как и следовало ожидать, второй тест не проходит. Ещё бы, ведь функция всё время возвращает `8`.
+
+### Уточнение реализации
+
+Придётся написать нечто более реальное:
+
+```js
+function pow(x, n) {
+  var result = 1;
+
+  for(var i = 0; i < n; i++) {
+    result *= x;
+  }
+  
+  return result;
+}
+```
+
+Чтобы быть уверенными, что функция работает верно, желательно протестировать её на большем количестве значений. Вместо того, чтобы писать блоки `it` вручную, мы можем сгенерировать тесты в цикле `for`:
+
+```js
+describe("pow", function() {
+
+  function makeTest(x) {
+    var expected = x*x*x;
+    it("при возведении " + x + " в степень 3 результат: " + expected, function() { 
+      assert.equal( pow(x, 3), expected);
+    });
+  }
+
+  for(var x = 1; x <= 5; x++) {
+    makeTest(x);
+  }
+
+});
+```
+
+Результат:
+[iframe height=250 src="pow-3" edit border="1"]
+
+
+### Вложенный describe
+
+Функция `makeTest` и цикл `for`, очевидно, нужны друг другу, но не нужны для других тестов, которые мы добавим в дальнейшем. Они образуют единую группу, задача которой -- проверить возведение в `n`-ю степень.
+
+Будет правильно выделить их, при помощи вложенного блока `describe`:
+
+```js
+describe("pow", function() {
+
+*!*
+  describe("возводит x в степень n", function() {
+*/!*
+
+    function makeTest(x) {
+      var expected = x*x*x;
+      it("при возведении " + x + " в степень 3 результат: " + expected, function() { 
+        assert.equal( pow(x, 3), expected);
+      });
+    }
+
+    for(var x = 1; x <= 5; x++) {
+      makeTest(x);
+    }
+
+*!*
+  });
+*/!*
+  
+  // ... дальнейшие тесты it и подблоки describe ...
+});
+```
+
+Вложенный `describe` объявит новую "подгруппу" тестов, блоки `it` которой запускаются так же, как и обычно, но выводятся с подзаголовком, вот так:
+
+[iframe height=300 src="pow-4" edit border="1"]
+
+В будущем мы сможем в добавить другие тесты `it` и блоки `describe` со своими вспомогательными функциями.
+
+[smart header="before/after и beforeEach/afterEach"]
+В каждом блоке `describe` можно также задать функции `before/after`, которые будут выполнены до/после запуска тестов, а также `beforeEach/afterEach`, которые выполняются до/после каждого `it`. 
+
+Например:
+
+```js
+describe("Тест", function() {
+
+  before(function() { alert("Начало тестов"); });
+  after(function() { alert("Конец тестов"); });
+
+  beforeEach(function() { alert("Вход в тест"); });
+  afterEach(function() { alert("Выход из теста"); });
+
+  it('тест 1', function() { alert('1'); });
+  it('тест 2', function() { alert('2'); });
+  
+});
+```
+
+Последовательность будет такой:
+
+```
+Начало тестов
+Вход в тест
+1
+Выход из теста 
+Вход в тест
+2 
+Выход из теста
+Конец тестов
+```
+
+[edit src="beforeafter"]Открыть пример с тестами в песочнице[/edit]
+
+Как правило, `beforeEach/afterEach` (`before/each`) используют, если необходимо произвести инициализацию, обнулить счётчики или сделать что-то ещё в таком духе между тестами (или их группами). 
+[/smart]
+
+### Расширение спецификации
+
+Базовый функционал описан и реализован, первая итерация разработки завершена. Теперь расширим и уточним его.
+
+Как говорилось ранее, функция `pow(x, n)` предназначена для работы с целыми неотрицательными `n`.
+
+В JavaScript для ошибки вычислений служит специальное значение `NaN`, которое функция будет возвращать при некорректных `n`.
+
+Добавим это поведение в спецификацию:
+
+```js
+describe("pow", function() {
+
+  // ...
+
+  it("при возведении в отрицательную степень результат NaN", function() {
+*!*
+    assert( isNaN( pow(2, -1) ) );
+*/!*
+  });
+
+  it("при возведении в дробную степень результат NaN", function() {
+*!*
+    assert( isNaN( pow(2, 1.5) ) );
+*/!*
+  });
+
+});
+```
+
+Результат с новыми тестами:
+[iframe height=450 src="pow-nan" edit border="1"]
+
+Конечно, новые тесты не проходят, так как наша реализация ещё не поддерживает их. Так и задумано: сначала написали заведомо не работающие тесты, а затем пишем реализацию под них.
+
+### Другие assert
+
+Обратим внимание, в спецификации выше использована проверка не `assert.equal`, как раньше, а `assert(выражение)`. Такая проверка выдаёт ошибку, если значение выражения при приведении к логическому типу не `true`.
+
+Она потребовалась, потому что сравнивать с `NaN` обычным способом нельзя: `NaN` не равно никакому значению, даже самому себе, поэтому `assert.equal(NaN, x)` не подойдёт.
+
+Кстати, мы и ранее могли бы использовать `assert(value1 == value2)` вместо `assert.equal(value1, value2)`. Оба этих `assert` проверяют одно и тоже. 
+
+Однако, между этими вызовами есть отличие в деталях сообщения об ошибке. 
+
+При `assert` мы видим `Unspecified AssertionError`, то есть просто "что-то пошло не так", а при `assert.equal(value1, value2)` -- будут дополнительные подробности: `expected 8 to equal 81`.
+
+**Поэтому рекомендуется использовать именно ту проверку, которая максимально соответствует задаче.**
+
+Вот самые востребованные `assert`-проверки, встроенные в Chai:
+
+<ul>
+<li>`assert(value)` -- проверяет что `value` является `true` в логическом контексте.</li>
+<li>`assert.equal(value1, value2)` -- проверяет равенство  `value1 == value2`.</li>
+<li>`assert.strictEqual(value1, value2)` -- проверяет строгое равенство `value1 === value2`.</li>
+<li>`assert.notEqual`, `assert.notStrictEqual` -- проверки, обратные двум предыдущим.</li>
+<li>`assert.isTrue(value)` -- проверяет, что `value === true`</li>
+<li>`assert.isFalse(value)` -- проверяет, что `value === false`</li>
+<li>...более полный список -- в [документации](http://chaijs.com/api/assert/)</li>
+</ul>
+
+В нашем случае хорошо бы иметь проверку `assert.isNaN`, но, увы, такого метода нет, поэтому приходится использовать самый общий `assert(...)`. В этом случае для того, чтобы сделать сообщение об ошибке понятнее, желательно добавить к `assert` описание.
+
+**Все вызовы `assert` позволяют дополнительным последним аргументом указать строку с описанием ошибки, которое выводится, если `assert` не проходит.**
+
+Добавим описание ошибки в конец наших `assert'ов`:
+
+```js
+describe("pow", function() {
+
+  // ...
+
+  it("при возведении в отрицательную степень результат NaN", function() {
+*!*
+    assert( isNaN( pow(2, -1) ), "pow(2, -1) не NaN" );
+*/!*
+  });
+
+  it("при возведении в дробную степень результат NaN", function() {
+*!*
+    assert( isNaN( pow(2, 1.5) ), "pow(2, 1.5) не NaN" );
+*/!*
+  });
+
+});
+```
+
+Теперь результат теста гораздо яснее говорит о том, что не так:
+
+[iframe height=450 src="pow-nan-assert" edit border="1"]
+
+В коде тестов выше можно было бы добавить описание и к `assert.equal`, указав в конце: `assert.equal(value1, value2, "описание")`, но с равенством обычно и так всё понятно, поэтому мы так делать не будем.
+
+
+## Итого
+
+Итак, разработка завершена, мы получили полноценную спецификацию и код, который её реализует.
+
+Задачи выше позволяют дополнить её, и в результате может получиться что-то в таком духе:
+
+```js
+//+ src="pow-full/test.js"
+```
+
+[edit src="pow-full"]Открыть полный пример с реализацией в песочнице[/edit]
+
+Эту спецификацию можно использовать как:
+<ol>
+<li>**Тесты**, которые гарантируют правильность работы кода.</li>
+<li>**Документацию** по функции, что она конкретно делает.</li>
+<li>**Примеры** использования функции, которые демонстрируют её работу внутри `it`.</li>
+</ol>
+
+Имея спецификацию, мы можем улучшать, менять, переписывать функцию и легко контролировать её работу, просматривая тесты.
+
+Особенно важно это в больших проектах. 
+
+Бывает так, что изменение в одной части кода может повлечь за собой "падение" другой части, которая её использует. Так как всё-всё в большом проекте руками не перепроверишь, то такие ошибки имеют большой шанс остаться в продукте и вылезти позже, когда проект увидит посетитель или заказчик.
+
+Чтобы избежать таких проблем, бывает, что вообще стараются не трогать код, от которого много что зависит, даже если его ну очень нужно переписать. Жизнь пробивается тонкими росточками там, где должен цвести и пахнуть новый функционал.
+
+**Код, покрытый автотестами, являет собой полную противоположность этому!**
+
+Даже если какое-то изменение потенциально может порушить всё -- его совершенно не страшно сделать. Ведь есть масса тестов, которые быстро и в автоматическом режиме проверят работу кода и, если что-то падает -- это можно будет легко локализовать и поправить.
+
+**Кроме того, код, покрытый тестами, имеет лучшую архитектуру.**
+
+Конечно, это естественное следствие того, что его легче менять и улучшать. Но не только.
+
+Чтобы написать тесты, нужно разбить код на функции так, чтобы для каждой функции было чётко понятно, что она получает на вход, что делает с этим и что возвращает. Это означает ясную и понятную структуру с самого начала.
+
+Конечно, в реальной жизни всё не так просто. Зачастую написать тест сложно. Или сложно поддерживать тесты, поскольку код активно меняется. Сами тесты тоже пишутся по-разному, при помощи разных инструментов.
+
+## Что дальше?
+
+В дальнейшем условия ряда задач будут уже содержать в себе тесты. На них вы познакомитесь с дополнительными примерами. 
+
+Как правило, они будут вполне понятны, даже если немного выходят за пределы этой главы.
diff --git a/1-js/3-writing-js/4-testing/beforeafter.view/index.html b/1-js/3-writing-js/4-testing/beforeafter.view/index.html
new file mode 100755
index 00000000..ff99e3f7
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/beforeafter.view/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.css">
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.js"></script>
+  <script> mocha.setup('bdd'); </script>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/chai/1.9.0/chai.js"></script>
+  <script> var assert = chai.assert; </script>
+</head>
+
+<body>
+
+  <!-- в этом скрипте находятся спеки -->  
+  <script src="test.js"></script>
+
+  <!-- в элементе с id="mocha" будут результаты тестов -->
+  <div id="mocha"></div>
+  
+  <!-- запустить тесты! -->
+  <script> mocha.run(); </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/beforeafter.view/test.js b/1-js/3-writing-js/4-testing/beforeafter.view/test.js
new file mode 100755
index 00000000..f55c0781
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/beforeafter.view/test.js
@@ -0,0 +1,12 @@
+describe("Тест", function() {
+
+  before(function() { alert("Начало тестов"); });
+  after(function() { alert("Конец тестов"); });
+
+  beforeEach(function() { alert("Вход в тест"); });
+  afterEach(function() { alert("Выход из теста"); });
+
+  it('тест 1', function() { alert('1'); });
+  it('тест 2', function() { alert('2'); });
+
+});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/index.html b/1-js/3-writing-js/4-testing/index.html
new file mode 100755
index 00000000..b53b160a
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  
+  <!-- подключаем стили Mocha, для отображения результатов -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.css">
+  <!-- подключаем библиотеку Mocha -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.js"></script>
+  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
+  <script> mocha.setup('bdd'); </script>
+
+  <!-- подключаем chai -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/chai/1.9.0/chai.js"></script>
+  <!-- в chai есть много всего, выносим assert в глобальную область -->
+  <script> var assert = chai.assert; </script>
+</head>
+
+<body>
+
+  <script>
+    function pow(x, n) {
+      /* код функции, пока что пусто */
+    }
+  </script>
+
+  <!-- в этом скрипте находятся спеки -->  
+  <script src="test.js"></script>
+
+  <!-- в элементе с id="mocha" будут результаты тестов -->
+  <div id="mocha"></div>
+  
+  <!-- запустить тесты! -->
+  <script> mocha.run(); </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-1.view/index.html b/1-js/3-writing-js/4-testing/pow-1.view/index.html
new file mode 100755
index 00000000..b53b160a
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/pow-1.view/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  
+  <!-- подключаем стили Mocha, для отображения результатов -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.css">
+  <!-- подключаем библиотеку Mocha -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.js"></script>
+  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
+  <script> mocha.setup('bdd'); </script>
+
+  <!-- подключаем chai -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/chai/1.9.0/chai.js"></script>
+  <!-- в chai есть много всего, выносим assert в глобальную область -->
+  <script> var assert = chai.assert; </script>
+</head>
+
+<body>
+
+  <script>
+    function pow(x, n) {
+      /* код функции, пока что пусто */
+    }
+  </script>
+
+  <!-- в этом скрипте находятся спеки -->  
+  <script src="test.js"></script>
+
+  <!-- в элементе с id="mocha" будут результаты тестов -->
+  <div id="mocha"></div>
+  
+  <!-- запустить тесты! -->
+  <script> mocha.run(); </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-1.view/test.js b/1-js/3-writing-js/4-testing/pow-1.view/test.js
new file mode 100755
index 00000000..1513b594
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/pow-1.view/test.js
@@ -0,0 +1,7 @@
+describe("pow", function() {
+
+  it("возводит в n-ю степень", function() { 
+    assert.equal( pow(2, 3), 8);
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-2.view/index.html b/1-js/3-writing-js/4-testing/pow-2.view/index.html
new file mode 100755
index 00000000..1bd90a55
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/pow-2.view/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  
+  <!-- подключаем стили Mocha, для отображения результатов -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.css">
+  <!-- подключаем библиотеку Mocha -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.js"></script>
+  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
+  <script> mocha.setup('bdd'); </script>
+
+  <!-- подключаем chai -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/chai/1.9.0/chai.js"></script>
+  <!-- в chai есть много всего, выносим assert в глобальную область -->
+  <script> var assert = chai.assert; </script>
+</head>
+
+<body>
+
+  <script>
+    function pow(x, n) {
+      return 8;
+    }
+  </script>
+
+  <!-- в этом скрипте находятся спеки -->  
+  <script src="test.js"></script>
+
+  <!-- в элементе с id="mocha" будут результаты тестов -->
+  <div id="mocha"></div>
+  
+  <!-- запустить тесты! -->
+  <script> mocha.run(); </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-2.view/test.js b/1-js/3-writing-js/4-testing/pow-2.view/test.js
new file mode 100755
index 00000000..3323af1f
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/pow-2.view/test.js
@@ -0,0 +1,11 @@
+describe("pow", function() {
+
+  it("при возведении 2 в 3ю степень результат 8", function() { 
+    assert.equal( pow(2, 3), 8);
+  });
+
+  it("при возведении 3 в 4ю степень равен 81", function() {
+    assert.equal( pow(3, 4), 81);
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-3.view/index.html b/1-js/3-writing-js/4-testing/pow-3.view/index.html
new file mode 100755
index 00000000..6bca4917
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/pow-3.view/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  
+  <!-- подключаем стили Mocha, для отображения результатов -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.css">
+  <!-- подключаем библиотеку Mocha -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.js"></script>
+  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
+  <script> mocha.setup('bdd'); </script>
+
+  <!-- подключаем chai -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/chai/1.9.0/chai.js"></script>
+  <!-- в chai есть много всего, выносим assert в глобальную область -->
+  <script> var assert = chai.assert; </script>
+</head>
+
+<body>
+
+  <script>
+    function pow(x, n) {
+      var result = 1;
+
+      for(var i = 0; i < n; i++) {
+        result *= x;
+      }
+      
+      return result;
+    }
+
+  </script>
+
+  <!-- в этом скрипте находятся спеки -->  
+  <script src="test.js"></script>
+
+  <!-- в элементе с id="mocha" будут результаты тестов -->
+  <div id="mocha"></div>
+  
+  <!-- запустить тесты! -->
+  <script> mocha.run(); </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-3.view/test.js b/1-js/3-writing-js/4-testing/pow-3.view/test.js
new file mode 100755
index 00000000..b1aca005
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/pow-3.view/test.js
@@ -0,0 +1,14 @@
+describe("pow", function() {
+
+  function makeTest(x) {
+    var expected = x*x*x;
+    it("при возведении "+x+" в степень 3 результат: " + expected, function() { 
+      assert.equal( pow(x, 3), expected);
+    });
+  }
+
+  for(var x = 1; x <= 5; x++) {
+    makeTest(x);
+  }
+
+});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-4.view/index.html b/1-js/3-writing-js/4-testing/pow-4.view/index.html
new file mode 100755
index 00000000..6bca4917
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/pow-4.view/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  
+  <!-- подключаем стили Mocha, для отображения результатов -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.css">
+  <!-- подключаем библиотеку Mocha -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.js"></script>
+  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
+  <script> mocha.setup('bdd'); </script>
+
+  <!-- подключаем chai -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/chai/1.9.0/chai.js"></script>
+  <!-- в chai есть много всего, выносим assert в глобальную область -->
+  <script> var assert = chai.assert; </script>
+</head>
+
+<body>
+
+  <script>
+    function pow(x, n) {
+      var result = 1;
+
+      for(var i = 0; i < n; i++) {
+        result *= x;
+      }
+      
+      return result;
+    }
+
+  </script>
+
+  <!-- в этом скрипте находятся спеки -->  
+  <script src="test.js"></script>
+
+  <!-- в элементе с id="mocha" будут результаты тестов -->
+  <div id="mocha"></div>
+  
+  <!-- запустить тесты! -->
+  <script> mocha.run(); </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-4.view/test.js b/1-js/3-writing-js/4-testing/pow-4.view/test.js
new file mode 100755
index 00000000..06e6997b
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/pow-4.view/test.js
@@ -0,0 +1,20 @@
+describe("pow", function() {
+
+  describe("возводит x в степень n", function() {
+
+    function makeTest(x) {
+      var expected = x*x*x;
+      it("при возведении "+x+" в степень 3 результат: " + expected, function() { 
+        assert.equal( pow(x, 3), expected);
+      });
+    }
+
+    for(var x = 1; x <= 5; x++) {
+      makeTest(x);
+    }
+
+  });
+  
+  // ...
+  
+});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-min.view/index.html b/1-js/3-writing-js/4-testing/pow-min.view/index.html
new file mode 100755
index 00000000..1bd90a55
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/pow-min.view/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  
+  <!-- подключаем стили Mocha, для отображения результатов -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.css">
+  <!-- подключаем библиотеку Mocha -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.js"></script>
+  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
+  <script> mocha.setup('bdd'); </script>
+
+  <!-- подключаем chai -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/chai/1.9.0/chai.js"></script>
+  <!-- в chai есть много всего, выносим assert в глобальную область -->
+  <script> var assert = chai.assert; </script>
+</head>
+
+<body>
+
+  <script>
+    function pow(x, n) {
+      return 8;
+    }
+  </script>
+
+  <!-- в этом скрипте находятся спеки -->  
+  <script src="test.js"></script>
+
+  <!-- в элементе с id="mocha" будут результаты тестов -->
+  <div id="mocha"></div>
+  
+  <!-- запустить тесты! -->
+  <script> mocha.run(); </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-min.view/test.js b/1-js/3-writing-js/4-testing/pow-min.view/test.js
new file mode 100755
index 00000000..1513b594
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/pow-min.view/test.js
@@ -0,0 +1,7 @@
+describe("pow", function() {
+
+  it("возводит в n-ю степень", function() { 
+    assert.equal( pow(2, 3), 8);
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-nan-assert.view/index.html b/1-js/3-writing-js/4-testing/pow-nan-assert.view/index.html
new file mode 100755
index 00000000..e35012d5
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/pow-nan-assert.view/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  
+  <!-- подключаем стили Mocha, для отображения результатов -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.css">
+  <!-- подключаем библиотеку Mocha -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.js"></script>
+  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
+  <script> mocha.setup('bdd'); </script>
+
+  <!-- подключаем chai -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/chai/1.9.0/chai.js"></script>
+  <!-- в chai есть много всего, выносим assert в глобальную область -->
+  <script> var assert = chai.assert; </script>
+</head>
+
+<body>
+
+  <script>
+    function pow(x, n) {
+      var result = 1;
+      for(var i=0; i<n; i++) {
+        result *= x;
+      }
+      return result;
+    }
+  </script>
+
+  <!-- в этом скрипте находятся спеки -->  
+  <script src="test.js"></script>
+
+  <!-- в элементе с id="mocha" будут результаты тестов -->
+  <div id="mocha"></div>
+  
+  <!-- запустить тесты! -->
+  <script> mocha.run(); </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-nan-assert.view/test.js b/1-js/3-writing-js/4-testing/pow-nan-assert.view/test.js
new file mode 100755
index 00000000..d65b4e6e
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/pow-nan-assert.view/test.js
@@ -0,0 +1,26 @@
+describe("pow", function() {
+
+  describe("возводит x в степень n", function() {
+
+    function makeTest(x) {
+      var expected = x*x*x;
+      it("при возведении "+x+" в степень 3 результат: " + expected, function() { 
+        assert.equal( pow(x, 3), expected);
+      });
+    }
+
+    for(var x = 1; x <= 5; x++) {
+      makeTest(x);
+    }
+
+  });
+  
+  it("при возведении в отрицательную степень результат NaN", function() {
+    assert( isNaN( pow(2, -1) ), "pow(2, -1) не NaN" );
+  });
+
+  it("при возведении в дробную степень результат NaN", function() {
+    assert( isNaN( pow(2, 1.5) ), "pow(2, -1.5) не NaN" );
+  });
+
+});
diff --git a/1-js/3-writing-js/4-testing/pow-nan.view/index.html b/1-js/3-writing-js/4-testing/pow-nan.view/index.html
new file mode 100755
index 00000000..e35012d5
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/pow-nan.view/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  
+  <!-- подключаем стили Mocha, для отображения результатов -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.css">
+  <!-- подключаем библиотеку Mocha -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.js"></script>
+  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
+  <script> mocha.setup('bdd'); </script>
+
+  <!-- подключаем chai -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/chai/1.9.0/chai.js"></script>
+  <!-- в chai есть много всего, выносим assert в глобальную область -->
+  <script> var assert = chai.assert; </script>
+</head>
+
+<body>
+
+  <script>
+    function pow(x, n) {
+      var result = 1;
+      for(var i=0; i<n; i++) {
+        result *= x;
+      }
+      return result;
+    }
+  </script>
+
+  <!-- в этом скрипте находятся спеки -->  
+  <script src="test.js"></script>
+
+  <!-- в элементе с id="mocha" будут результаты тестов -->
+  <div id="mocha"></div>
+  
+  <!-- запустить тесты! -->
+  <script> mocha.run(); </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testing/pow-nan.view/test.js b/1-js/3-writing-js/4-testing/pow-nan.view/test.js
new file mode 100755
index 00000000..ce885be6
--- /dev/null
+++ b/1-js/3-writing-js/4-testing/pow-nan.view/test.js
@@ -0,0 +1,26 @@
+describe("pow", function() {
+
+  describe("возводит x в степень n", function() {
+
+    function makeTest(x) {
+      var expected = x*x*x;
+      it("при возведении "+x+" в степень 3 результат: " + expected, function() { 
+        assert.equal( pow(x, 3), expected);
+      });
+    }
+
+    for(var x = 1; x <= 5; x++) {
+      makeTest(x);
+    }
+
+  });
+  
+  it("при возведении в отрицательную степень результат NaN", function() {
+    assert( isNaN( pow(2, -1) ) );
+  });
+
+  it("при возведении в дробную степень результат NaN", function() {
+    assert( isNaN( pow(2, 1.5) ) );
+  });
+
+});
diff --git a/1-js/3-writing-js/4-testingpow-full/pow-full.view/index.html b/1-js/3-writing-js/4-testingpow-full/pow-full.view/index.html
new file mode 100755
index 00000000..f42a4ec7
--- /dev/null
+++ b/1-js/3-writing-js/4-testingpow-full/pow-full.view/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  
+  <!-- подключаем стили Mocha, для отображения результатов -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.css">
+  <!-- подключаем библиотеку Mocha -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.js"></script>
+  <!-- настраиваем Mocha: предстоит BDD-тестирование -->
+  <script> mocha.setup('bdd'); </script>
+
+  <!-- подключаем chai -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/chai/1.9.0/chai.js"></script>
+  <!-- в chai есть много всего, выносим assert в глобальную область -->
+  <script> var assert = chai.assert; </script>
+</head>
+
+<body>
+
+  <script>
+    function pow(x, n) {
+      if (n < 0) return NaN;
+      if (Math.round(n) != n) return NaN;
+      if (n == 0 && x ==0) return NaN;
+     
+      var result = 1;
+      for(var i=0; i<n; i++) {
+        result *= x;
+      }
+      return result;
+    }
+  </script>
+
+  <!-- в этом скрипте находятся спеки -->  
+  <script src="test.js"></script>
+
+  <!-- в элементе с id="mocha" будут результаты тестов -->
+  <div id="mocha"></div>
+  
+  <!-- запустить тесты! -->
+  <script> mocha.run(); </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/1-js/3-writing-js/4-testingpow-full/pow-full.view/test.js b/1-js/3-writing-js/4-testingpow-full/pow-full.view/test.js
new file mode 100755
index 00000000..158ddfe3
--- /dev/null
+++ b/1-js/3-writing-js/4-testingpow-full/pow-full.view/test.js
@@ -0,0 +1,44 @@
+describe("pow", function() {
+
+  describe("возводит x в степень n", function() {
+
+    function makeTest(x) {
+      var expected = x*x*x;
+      it("при возведении "+x+" в степень 3 результат: " + expected, function() { 
+        assert.equal( pow(x, 3), expected);
+      });
+    }
+
+    for(var x = 1; x <= 5; x++) {
+      makeTest(x);
+    }
+
+  });
+
+  it("при возведении в отрицательную степень результат NaN", function() {
+    assert( isNaN( pow(2, -1) ), "pow(2, -1) не NaN" );
+  });
+
+  it("при возведении в дробную степень результат NaN", function() {
+    assert( isNaN( pow(2, 1.5) ), "pow(2, -1.5) не NaN" );
+  });
+
+  describe("любое число, кроме нуля, в степени 0 равно 1", function() {
+
+    function makeTest(x) {
+      it("при возведении " + x + " в степень 0 результат: 1", function() { 
+        assert.equal( pow(x, 0), 1);
+      });
+    }
+
+    for(var x = -5; x <= 5; x+=2) {
+      makeTest(x);
+    }
+
+  });
+ 
+  it("ноль в нулевой степени даёт NaN", function() {
+    assert( isNaN( pow(0,0) ), "0 в степени 0 не NaN");
+  });
+
+});
diff --git a/1-js/3-writing-js/4-testingpow-full/test.js b/1-js/3-writing-js/4-testingpow-full/test.js
new file mode 100755
index 00000000..158ddfe3
--- /dev/null
+++ b/1-js/3-writing-js/4-testingpow-full/test.js
@@ -0,0 +1,44 @@
+describe("pow", function() {
+
+  describe("возводит x в степень n", function() {
+
+    function makeTest(x) {
+      var expected = x*x*x;
+      it("при возведении "+x+" в степень 3 результат: " + expected, function() { 
+        assert.equal( pow(x, 3), expected);
+      });
+    }
+
+    for(var x = 1; x <= 5; x++) {
+      makeTest(x);
+    }
+
+  });
+
+  it("при возведении в отрицательную степень результат NaN", function() {
+    assert( isNaN( pow(2, -1) ), "pow(2, -1) не NaN" );
+  });
+
+  it("при возведении в дробную степень результат NaN", function() {
+    assert( isNaN( pow(2, 1.5) ), "pow(2, -1.5) не NaN" );
+  });
+
+  describe("любое число, кроме нуля, в степени 0 равно 1", function() {
+
+    function makeTest(x) {
+      it("при возведении " + x + " в степень 0 результат: 1", function() { 
+        assert.equal( pow(x, 0), 1);
+      });
+    }
+
+    for(var x = -5; x <= 5; x+=2) {
+      makeTest(x);
+    }
+
+  });
+ 
+  it("ноль в нулевой степени даёт NaN", function() {
+    assert( isNaN( pow(0,0) ), "0 в степени 0 не NaN");
+  });
+
+});
diff --git a/1-js/3-writing-js/index.md b/1-js/3-writing-js/index.md
new file mode 100644
index 00000000..96320c44
--- /dev/null
+++ b/1-js/3-writing-js/index.md
@@ -0,0 +1,8 @@
+# Качество кода
+
+Для того, чтобы код был качественным, необходимы как минимум:
+<ol>
+<li>Умение отладить код и поправить ошибки.</li>
+<li>Хороший стиль кода.</li>
+<li>Тестировать код, желательно -- в автоматическом режиме.</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/4-data-structures/1-string/1-ucfirst/_js.view/solution.js b/1-js/4-data-structures/1-string/1-ucfirst/_js.view/solution.js
new file mode 100644
index 00000000..5f8c8226
--- /dev/null
+++ b/1-js/4-data-structures/1-string/1-ucfirst/_js.view/solution.js
@@ -0,0 +1,9 @@
+function ucFirst(str) {
+  var newStr = str.charAt(0).toUpperCase();
+
+  for(var i=1; i<str.length; i++) {
+    newStr += str.charAt(i);
+  }
+
+  return newStr;
+}
diff --git a/1-js/4-data-structures/1-string/1-ucfirst/_js.view/test.js b/1-js/4-data-structures/1-string/1-ucfirst/_js.view/test.js
new file mode 100644
index 00000000..e5c5923d
--- /dev/null
+++ b/1-js/4-data-structures/1-string/1-ucfirst/_js.view/test.js
@@ -0,0 +1,9 @@
+describe("ucFirst", function() {
+  it('делает первый символ заглавным', function() {
+    assert.strictEqual( ucFirst("вася"), "Вася" );
+  });
+ 
+  it('для пустой строки возвращает пустую строку', function() {
+    assert.strictEqual( ucFirst(""), "" );
+  });
+});
diff --git a/1-js/4-data-structures/1-string/1-ucfirst/solution.md b/1-js/4-data-structures/1-string/1-ucfirst/solution.md
new file mode 100644
index 00000000..65d597aa
--- /dev/null
+++ b/1-js/4-data-structures/1-string/1-ucfirst/solution.md
@@ -0,0 +1,20 @@
+Мы не можем просто заменить первый символ, т.к. строки в JavaScript неизменяемы.
+
+Но можно пересоздать строку на основе существующей, с заглавным первым символом:
+
+```js
+//+ run
+function ucFirst(str) {
+  var newStr = str.charAt(0).toUpperCase();
+
+  for(var i=1; i<str.length; i++) {
+    newStr += str.charAt(i);
+  }
+
+  return newStr;
+}
+
+alert( ucFirst("вася") );
+```
+
+P.S. Возможны и более короткие решения, использующие методы для работы со строками, которые мы пройдём далее.
\ No newline at end of file
diff --git a/1-js/4-data-structures/1-string/1-ucfirst/task.md b/1-js/4-data-structures/1-string/1-ucfirst/task.md
new file mode 100644
index 00000000..d81e3f76
--- /dev/null
+++ b/1-js/4-data-structures/1-string/1-ucfirst/task.md
@@ -0,0 +1,12 @@
+# Сделать первый символ заглавным
+
+[importance 5]
+
+Напишите функцию `ucFirst(str)`, которая возвращает строку `str` с заглавным первым символом, например:
+
+```js
+ucFirst("вася") == "Вася"; 
+ucFirst("") == ""; // нет ошибок при пустой строке
+```
+
+P.S. В JavaScript нет встроенного метода для этого. Создайте функцию, используя  `toUpperCase()` и `charAt()`.
diff --git a/1-js/4-data-structures/1-string/2-check-spam/_js.view/solution.js b/1-js/4-data-structures/1-string/2-check-spam/_js.view/solution.js
new file mode 100644
index 00000000..1473403a
--- /dev/null
+++ b/1-js/4-data-structures/1-string/2-check-spam/_js.view/solution.js
@@ -0,0 +1,5 @@
+function checkSpam(str) {
+  var lowerStr = str.toLowerCase();
+
+  return !!(~lowerStr.indexOf('viagra') || ~lowerStr.indexOf('xxx'));
+}
diff --git a/1-js/4-data-structures/1-string/2-check-spam/_js.view/test.js b/1-js/4-data-structures/1-string/2-check-spam/_js.view/test.js
new file mode 100644
index 00000000..f7c12281
--- /dev/null
+++ b/1-js/4-data-structures/1-string/2-check-spam/_js.view/test.js
@@ -0,0 +1,13 @@
+describe("checkSpam", function() {
+  it('считает спамом "buy ViAgRA now"', function() {
+    assert.isTrue( checkSpam('buy ViAgRA now') );
+  });
+
+  it('считает спамом "free xxxxx"', function() {
+    assert.isTrue( checkSpam('free xxxxx') );
+  });
+
+  it('не считает спамом "innocent rabbit"', function() {
+    assert.isFalse( checkSpam('innocent rabbit') );
+  });
+});
\ No newline at end of file
diff --git a/1-js/4-data-structures/1-string/2-check-spam/solution.md b/1-js/4-data-structures/1-string/2-check-spam/solution.md
new file mode 100644
index 00000000..9eecade3
--- /dev/null
+++ b/1-js/4-data-structures/1-string/2-check-spam/solution.md
@@ -0,0 +1,17 @@
+Метод `indexOf` ищет совпадение с учетом регистра. То есть, в строке `'xXx'` он не найдет `'XXX'`.
+
+Для проверки приведем к нижнему регистру и строку `str` а затем уже будем искать.
+
+```js
+//+ run
+function checkSpam(str) {
+  var lowerStr = str.toLowerCase();
+
+  return !!(~lowerStr.indexOf('viagra') || ~lowerStr.indexOf('xxx'));
+}
+
+alert( checkSpam('buy ViAgRA now') );
+alert( checkSpam('free xxxxx') );
+alert( checkSpam("innocent rabbit") );
+```
+
diff --git a/1-js/4-data-structures/1-string/2-check-spam/task.md b/1-js/4-data-structures/1-string/2-check-spam/task.md
new file mode 100644
index 00000000..566a2d1e
--- /dev/null
+++ b/1-js/4-data-structures/1-string/2-check-spam/task.md
@@ -0,0 +1,14 @@
+# Проверьте спам
+
+[importance 5]
+
+Напишите функцию `checkSpam(str)`, которая возвращает `true`, если строка `str` содержит 'viagra' or 'XXX', а иначе `false`.
+
+Функция должна быть нечувствительна к регистру:
+
+```js
+checkSpam('buy ViAgRA now') == true
+checkSpam('free xxxxx') == true
+checkSpam("innocent rabbit") == false
+```
+
diff --git a/1-js/4-data-structures/1-string/3-truncate/_js.view/solution.js b/1-js/4-data-structures/1-string/3-truncate/_js.view/solution.js
new file mode 100644
index 00000000..e0cf3488
--- /dev/null
+++ b/1-js/4-data-structures/1-string/3-truncate/_js.view/solution.js
@@ -0,0 +1,4 @@
+function truncate(str, maxlength) {
+  return (str.length > maxlength) ? 
+    str.slice(0, maxlength - 3) + '...' : str;
+}
\ No newline at end of file
diff --git a/1-js/4-data-structures/1-string/3-truncate/_js.view/test.js b/1-js/4-data-structures/1-string/3-truncate/_js.view/test.js
new file mode 100644
index 00000000..8c173a49
--- /dev/null
+++ b/1-js/4-data-structures/1-string/3-truncate/_js.view/test.js
@@ -0,0 +1,16 @@
+describe("truncate", function() {
+  it("обрезает строку до указанной длины (включая троеточие)", function() {
+    assert.equal( 
+      truncate("Вот, что мне хотелось бы сказать на эту тему:", 20),
+      "Вот, что мне хоте..."
+    );
+  });
+
+  it("не меняет короткие строки", function() {
+    assert.equal( 
+      truncate("Всем привет!", 20), 
+      "Всем привет!"
+    );
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/4-data-structures/1-string/3-truncate/solution.md b/1-js/4-data-structures/1-string/3-truncate/solution.md
new file mode 100644
index 00000000..06e56ada
--- /dev/null
+++ b/1-js/4-data-structures/1-string/3-truncate/solution.md
@@ -0,0 +1,28 @@
+Так как окончательная длина строки должна быть `maxlength`, то нужно её обрезать немного короче, чтобы дать место для троеточия.
+
+```js
+//+ run
+function truncate(str, maxlength) {
+  if (str.length > maxlength) {
+    return str.slice(0, maxlength - 3) + '...';
+    // итоговая длина равна maxlength
+  }
+
+  return str;
+}
+
+alert(truncate("Вот, что мне хотелось бы сказать на эту тему:", 20));
+alert(truncate("Всем привет!", 20));
+```
+
+Можно было бы написать этот код ещё короче:
+
+```js
+//+ run
+function truncate(str, maxlength) {
+  return (str.length > maxlength) ? 
+    str.slice(0, maxlength - 3) + '...' : str;
+}
+```
+
+P.S. Кстати, в кодироке Unicode существует специальный символ "троеточие": `…` (HTML: `&hellip;`), который можно использовать вместо трёх точек. Если его использовать, то можно отрезать только один символ.
diff --git a/1-js/4-data-structures/1-string/3-truncate/task.md b/1-js/4-data-structures/1-string/3-truncate/task.md
new file mode 100644
index 00000000..099b9e3f
--- /dev/null
+++ b/1-js/4-data-structures/1-string/3-truncate/task.md
@@ -0,0 +1,17 @@
+# Усечение строки
+
+[importance 5]
+
+Создайте функцию `truncate(str, maxlength)`, которая проверяет длину строки  `str`, и если она превосходит `maxlength` -- заменяет конец `str` на `"..."`, так чтобы ее длина стала равна `maxlength`.
+
+Результатом функции должна быть (при необходимости) усечённая строка.
+
+Например:
+
+```js
+truncate("Вот, что мне хотелось бы сказать на эту тему:", 20) = "Вот, что мне хотело..."
+
+truncate("Всем привет!", 20) = "Всем привет!"
+```
+
+Эта функция имеет применение в жизни. Она используется, чтобы усекать слишком длинные темы сообщений.
diff --git a/1-js/4-data-structures/1-string/article.md b/1-js/4-data-structures/1-string/article.md
new file mode 100644
index 00000000..2309ba44
--- /dev/null
+++ b/1-js/4-data-structures/1-string/article.md
@@ -0,0 +1,538 @@
+# Строки
+
+В JavaScript любые текстовые данные являются строками. Не существует отдельного типа "символ", который есть в ряде других языков.
+
+Внутренним форматом строк, вне зависимости от кодировки страницы, является [Юникод (Unicode)](http://ru.wikipedia.org/wiki/%D0%AE%D0%BD%D0%B8%D0%BA%D0%BE%D0%B4).
+[cut]
+## Создание строк 
+
+Строки создаются при помощи двойных или одинарных кавычек:
+
+```js
+var text = "моя строка";
+
+var anotherText = 'еще строка';
+
+var str = "012345";
+```
+
+В JavaScript **нет разницы между двойными и одинарными кавычками**. 
+
+### Специальные символы
+
+Строки могут содержать специальные символы. Самый часто используемый из таких символов -- это *перевод строки*.
+
+Он обозначается как `\n`, например:
+
+```js
+//+ run
+alert('Привет\nМир'); // выведет "Мир" на новой строке
+```
+
+Есть и более редкие символы, вот их список:
+
+<table>
+<CAPTION>Специальные символы</CAPTION>
+<tr><th>Символ</th><th>Описание</th>
+<tr><td>\b</td><td>Backspace</td></tr>
+<tr><td>\f</td><td>Form feed</td></tr>
+<tr><td>\n</td><td>New line</td></tr>
+<tr><td>\r</td><td>Carriage return</td></tr>
+<tr><td>\t</td><td>Tab</td></tr>
+<tr><td>\uNNNN</td><td>Символ в кодировке Юникод с шестнадцатеричным кодом `NNNN`. Например, `\u00A9` -- юникодное представление символа копирайт &#xA9;
+</td></tr>
+</table>
+
+### Экранирование специальных символов
+
+Если строка в одинарных кавычках, то внутренние одинарные кавычки внутри должны быть *экранированы*, то есть снабжены обратным слешем `\'`, вот так:
+
+```js
+var str = '*!*I\'m*/!* a JavaScript programmer';
+```
+
+В двойных кавычках -- экранируются внутренние двойные:
+
+```js
+//+ run
+var str = "I'm a JavaScript \"programmer\" ";
+alert(str);
+```
+
+Экранирование служит исключительно для правильного восприятия строки JavaScript. **В памяти строка будет содержать сам символ без `'\'`**. Вы можете увидеть это, запустив пример выше.
+
+Сам символ обратного слэша `'\'` является служебным, поэтому всегда экранируется, т.е пишется как `\\`:
+
+```js
+//+ run
+var str = ' символ \\ ';
+
+alert(str); // символ \
+```
+
+Заэкранировать можно любой символ. Если он не специальный, то ничего не произойдёт:
+
+```js
+//+ run
+alert( "\a" ); // a
+// идентично alert( "a" );
+```
+
+## Методы и свойства 
+
+Здесь мы рассмотрим методы и свойства строк, с некоторыми из которых мы знакомились ранее, в главе [](/properties-and-methods).
+
+
+### Длина length
+
+Одно из самых частых действий со строкой -- это получение ее длины:
+
+```js
+//+ run
+var str = "My\n"; // 3 символа. Третий - перевод строки
+
+alert(str.length);  // 3
+```
+
+### Доступ к символам   
+
+Чтобы получить символ, используйте вызов `charAt(позиция)`. Первый символ имеет позицию `0`:
+
+```js
+//+ run
+var str = "jQuery";
+alert( str.charAt(0) );  // "j"
+```
+
+В JavaScript **нет отдельного типа "символ"**, так что `charAt` возвращает строку, состоящую из выбранного символа.
+
+[smart]
+В современных браузерах (не  IE7-) для доступа к символу можно также использовать квадратные скобки:
+
+```js
+//+ run
+var str = "Я - современный браузер!";
+alert(str[0]);  // "Я", IE8+
+```
+
+Разница между этим способом и `charAt` заключается в том, что если символа нет -- `charAt` выдает пустую строку, а скобки -- `undefined`:
+
+```js
+//+ run
+alert( "".charAt(0) ); // пустая строка
+alert( ""[0] ); // undefined, IE8+
+```
+
+[/smart]
+
+[warn header="Вызов метода -- всегда со скобками"]
+
+Обратите внимание, `str.length` -- это *свойство* строки, а `str.charAt(pos)` -- *метод*, т.е. функция.
+
+Обращение к методу всегда идет со скобками, а к свойству -- без скобок. 
+
+[/warn]
+
+
+### Изменения строк   
+
+Строки в JavaScript нельзя изменять. Можно прочитать символ, но нельзя заменить его. Как только строка создана -- она такая навсегда.
+
+Чтобы это обойти, создаётся новая строка и присваивается в переменную вместо старой:
+
+```js
+//+ run
+var str = "строка";
+
+str =  str.charAt(3) + str.charAt(4) + str.charAt(5);
+
+alert(str); // ока
+```
+
+### Смена регистра   
+
+Методы `toLowerCase()` и `toUpperCase()` меняют регистр строки на нижний/верхний:
+
+```js
+//+ run
+alert( "Интерфейс".toUpperCase() ); // ИНТЕРФЕЙС
+```
+
+Пример ниже получает первый символ и приводит его к нижнему регистру:
+
+```js
+alert( "Интерфейс".charAt(0).toLowerCase() ); // 'и'
+```
+
+### Поиск подстроки
+
+Для поиска подстроки есть метод <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/indexOf">indexOf(подстрока[, начальная_позиция])</a>. 
+
+Он возвращает позицию, на которой находится `подстрока` или `-1`, если ничего не найдено. Например:
+
+```js
+//+ run
+var str = "Widget with id";
+
+alert( str.indexOf("Widget") ); // 0, т.к. "Widget" найден прямо в начале str
+alert( str.indexOf("id") ); // 1, т.к. "id" найден, начиная с позиции 1
+alert( str.indexOf("Lalala") ); // -1, подстрока не найдена
+```
+
+Необязательный второй аргумент позволяет искать, начиная с указанной позиции. Например, первый раз `"id"` появляется на позиции `1`. Чтобы найти его следующее появление -- запустим поиск с позиции `2`:
+
+```js
+//+ run
+var str = "Widget with id";
+
+alert( str.indexOf("id", 2) ) // 12, поиск начат с позиции 2
+```
+
+Также существует аналогичный метод <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/lastIndexOf">lastIndexOf</a>, который ищет не с начала, а с конца строки.
+
+[smart]
+Для красивого вызова `indexOf` применяется побитовый оператор НЕ `'~'`. 
+
+Дело в том, что вызов `~n` эквивалентен выражению `-(n+1)`, например:
+
+```js
+//+ run
+alert( ~2 ); // -(2+1) = -3
+alert( ~1 ); // -(1+1) = -2
+alert( ~0 ); // -(0+1) = -1
+*!*
+alert( ~-1 ); // -(-1+1) = 0
+*/!*
+```
+
+Как видно, `~n` -- ноль только в случае, когда `n == -1`. 
+ 
+То есть, проверка `if ( ~str.indexOf(...) )` означает, что результат `indexOf` отличен от `-1, т.е. совпадение есть.
+
+Вот так:
+
+```js
+//+ run
+var str = "Widget";
+
+if( ~str.indexOf("get") ) {
+  alert('совпадение есть!');
+}
+```
+
+Вообще, использовать возможности языка неочевидным образом не рекомендуется, поскольку ухудшает читаемость кода. 
+
+Однако, в данном случае, все в порядке. Просто запомните: `'~'` читается как "не минус один", а `"if ~str.indexOf"` читается как `"если найдено"`.
+
+[/smart]
+
+
+### Поиск всех вхождений
+
+Чтобы найти все вхождения подстроки, нужно запустить `indexOf` в цикле. Как только получаем очередную позицию -- начинаем следующий поиск со следующей.
+
+Пример такого цикла:
+
+```js
+//+ run
+var str = "Ослик Иа-Иа посмотрел на виадук"; // ищем в этой строке 
+var target = "Иа";         // цель поиска
+
+var pos = 0;
+while(true) {
+  var foundPos = str.indexOf(target, pos);
+  if (foundPos == -1) break; 
+
+  alert(foundPos); // нашли на этой позиции
+  pos = foundPos + 1; // продолжить поиск со следующей
+}
+```
+
+Такой цикл начинает поиск с позиции `0`, затем найдя подстроку на позиции `foundPos`, следующий поиск продолжит с позиции `pos = foundPos+1`, и так далее, пока что-то находит.
+
+Впрочем, тот же алгоритм можно записать и короче:
+
+```js
+//+ run
+var str = "Ослик Иа-Иа посмотрел на виадук"; // ищем в этой строке 
+var target = "Иа";         // цель поиска
+
+*!*
+var pos = -1;
+while ( (pos = str.indexOf(target, pos+1)) != -1) {
+  alert(pos);
+}
+*/!*
+```
+
+### Взятие подстроки: substr, substring, slice.   
+
+В JavaScript существуют целых 3 (!) метода для взятия подстроки, с небольшими отличиями между ними.
+
+<dl>
+<dt>`substring(start [, end])`
+<dd>
+Метод `substring(start, end)` возвращает подстроку с позиции `start` до, но не включая `end`.
+
+```js
+//+ run
+var str = "*!*s*/!*tringify";
+alert(str.substring(0,1)); // "s", символы с позиции 0 по 1 не включая 1.
+```
+
+Если аргумент `end` отсутствует, то идет до конца строки:
+
+```js
+//+ run
+var str = "st*!*ringify*/!*";
+alert(str.substring(2)); // ringify, символы с позиции 2 до конца
+```
+
+</dd>
+<dt>`substr(start [, length])`</dt>
+<dd>Первый аргумент имеет такой же смысл, как и в `substring`, а второй содержит не конечную позицию, а количество символов.
+
+```js
+//+ run
+var str = "st*!*ring*/!*ify";
+str = str.substr(2,4); // ring, со 2й позиции 4 символа 
+alert(str)
+```
+
+Если второго аргумента нет -- подразумевается "до конца строки".</dd>
+<dt>`slice(start [, end])`</dt>
+<dd>Возвращает часть строки от позиции `start` до, но не включая, позиции `end`. Смысл параметров -- такой же как в `substring`.</dd>
+</dl>
+
+### Отрицательные аргументы
+
+Различие между `substring` и `slice` -- в том, как они работают с отрицательными и выходящими за границу строки аргументами:
+
+<dl>
+<dt>`substring(start, end)`</dt>
+<dd>Отрицательные аргументы интерпретируются как равные нулю. Слишком большие значения усекаются до длины строки:
+
+```js
+//+ run
+alert( "testme".substring(-2) );  // "testme", -2 становится 0
+```
+
+Кроме того, если <code>start &gt; end</code>, то аргументы меняются местами, т.е. возвращается участок строки *между* `start` и `end`:
+
+```js
+//+ run
+alert( "testme".substring(4, -1) );  // "test"
+// -1 становится 0 -> получили substring(4, 0) 
+// 4 > 0, так что аргументы меняются местами -> substring(0, 4) = "test"
+```
+
+</dd>
+<dt>`slice`</dt>
+<dd>Отрицательные значения отсчитываются от конца строки:
+
+```js
+//+ run
+alert( "testme".slice(-2) );  // "me", от 2 позиции с конца
+```
+
+
+
+```js
+//+ run
+alert( "testme".slice(1, -1) ); // "estm", от 1 позиции до первой с конца.
+```
+
+Это гораздо более удобно, чем странная логика `substring`.
+</dd>
+</dl>
+
+Отрицательное значение первого параметра поддерживается в `substr` во всех браузерах, кроме IE8-.
+
+[summary]
+Самый удобный метод из списка -- это `slice(start, end)`. Очень забавно, что не `substr`,  не `substring`, а именно метод `slice`, название которого наименее очевидно.
+
+Впрочем, `substr(start, length)` тоже можно использовать, но с оглядкой на IE8-, который не поддерживает отрицательный `start`.
+[/summary]
+
+
+
+
+## Кодировка Юникод
+
+Как мы знаем, символы сравниваются в алфавитном порядке `'А' < 'Б' < 'В' < ... < 'Я'`. 
+
+Но есть несколько странностей..
+
+<ol>
+<li>Почему буква `'а'` маленькая больше буквы `'Я'` большой?
+
+```js
+//+ run
+alert( 'а' > 'Я' ); // true
+```
+
+</li><li>
+Буква `'ё'` находится в алфавите между `е` и `ж`: <code>абвгде**ё**жз..</code>. Но почему тогда `'ё'` больше `'я'`?
+
+```js
+//+ run
+alert( 'ё' > 'я' ); // true
+```
+
+</li>
+</ol>
+
+Чтобы разобраться с этим, обратимся к внутреннему представлению строк в JavaScript.
+
+**Все строки имеют внутреннюю кодировку [Юникод](http://ru.wikipedia.org/wiki/%D0%AE%D0%BD%D0%B8%D0%BA%D0%BE%D0%B4).**
+
+Неважно, на каком языке написана страница, находится ли она в windows-1251 или utf-8. Внутри JavaScript-интерпретатора все строки приводятся к единому "юникодному" виду. Каждому символу соответствует свой код.
+
+Есть метод для получения символа по его коду:
+<dl>
+<dt>String.fromCharCode(code)</dt>
+<dd>Возвращает символ по коду `code`:
+
+```js
+//+ run
+alert( String.fromCharCode(1072) ); // 'а'
+```
+
+</dd>
+</dl>
+
+...И метод для получения цифрового кода из символа:
+
+<dl>
+<dt>str.charCodeAt(pos)</dt>
+<dd>Возвращает код символа на позиции `pos`. Отсчет позиции начинается с нуля.
+
+```js
+//+ run
+alert( "абрикос".charCodeAt(0) ); // 1072, код 'а'
+```
+
+</dd>
+</dl>
+
+Теперь вернемся к примерам выше. Почему сравнения `'ё' > 'я'` и `'а' > 'Я'` дают такой странный результат?
+
+Дело в том, что **символы сравниваются не по алфавиту, а по коду**. У кого код больше -- тот и больше. В юникоде есть много разных символов. Кириллическим буквам соответствует только небольшая часть из них, подробнее -- [Кириллица в Юникоде](http://ru.wikipedia.org/wiki/%D0%9A%D0%B8%D1%80%D0%B8%D0%BB%D0%BB%D0%B8%D1%86%D0%B0_%D0%B2_%D0%AE%D0%BD%D0%B8%D0%BA%D0%BE%D0%B4%D0%B5).
+
+Выведем отрезок символов юникода с кодами от `1034` до `1113`:
+
+```js
+//+ run
+var str = '';
+for (var i=1034; i<=1113; i++) {
+  str += String.fromCharCode(i);
+}
+alert(str);
+```
+
+Результат:
+<div style="overflow: auto">
+<code>ЊЋЌЍЎЏАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюяѐёђѓєѕіїјљ</code>
+</div>
+
+Мы можем увидеть из этого отрезка две важных вещи:
+
+<ol>
+<li>**Строчные буквы идут после заглавных, поэтому они всегда больше.**
+
+В частности, `'а'(код 1072) > 'Я'(код 1071)`.
+
+То же самое происходит и в английском алфавите, там `'a' > 'Z'`.
+</li>
+<li>**Ряд букв, например `ё`, находятся вне основного алфавита.**
+
+В частности, маленькая буква `ё` имеет код, больший чем `я`, поэтому **`'ё'(код 1105) > 'я'(код 1103)`**. 
+
+Кстати, большая буква `Ё` располагается в Unicode до `А`, поэтому **`'Ё'`(код 1025) < `'А'`(код 1040)**. Удивительно: есть буква меньше чем `А` :)
+</li>
+</ol>
+
+**Буква `ё` не уникальна, точки над буквой используются и в других языках, приводя к тому же результату.**
+
+Например, при работе с немецкими названиями:
+
+```js
+//+ run
+alert( "ö" > "z" ); // true
+```
+
+[smart header="Юникод в HTML"]
+Кстати, если мы знаем код символа в кодировке юникод, то можем добавить его в HTML, используя "числовую ссылку" (numeric character reference). 
+
+Для этого нужно написать сначала `&#`, затем код, и завершить точкой с запятой `';'`. Например, символ `'а'` в виде числовой ссылки: `&#1072;`.
+
+Если код хотят дать в 16-ричной системе счисления, то начинают с `&#x`.
+
+В юникоде есть много забавных и полезных символов, например, символ ножниц: &#x2702; (`&#x2702;`), дроби: &#xBD; (`&#xBD;`) &#xBE; (`&#xBE;`) и другие. Их можно использовать вместо картинок в дизайне.
+[/smart]
+
+
+## Посимвольное сравнение
+
+Сравнение строк работает *лексикографически*, иначе говоря, посимвольно. 
+
+Сравнение строк `s1` и `s2` обрабатывается по следующему алгоритму:
+
+<ol><li>Сравниваются первые символы: `a = s1.charAt(0)` и `b = s2.charAt(0)`. Если они разные, то сравниваем их и, в зависимости от результата их сравнения, возвратить `true` или `false`. Если же они одинаковые, то...</li>
+<li>Сравниваются вторые символы `a = s1.charAt(1)` и `b = s2.charAt(1)`</li>
+<li>Затем третьи `a = s1.charAt(2)` и `b = s2.charAt(2)` и так далее, пока символы не будут наконец разными, и тогда какой символ больше -- та строка и больше. Если же в какой-либо строке закончились символы, то считаем, что она меньше, а если закончились в обеих -- они равны.</li>
+</ol>
+
+Спецификация языка определяет этот алгоритм более детально. Если же говорить простыми словами, смысл алгоритма в точности соответствует порядку, по которому имена заносятся в орфографический словарь.
+
+```js
+"Вася" > "Ваня" // true, т.к. начальные символы совпадают, а потом 'с' > 'н'
+"Дома" > "До"  // true, т.к. начало совпадает, но в 1й строке больше символов
+```
+
+[warn header="Числа в виде строк сравниваются как строки"]  
+
+Бывает, что числа приходят в скрипт в виде строк, например как результат `prompt`. В этом случае результат их сравнения будет неверным:
+
+```js
+//+ run
+alert("2" > "14"); // true, так как это строки, и для первых символов верно "2" > "1"
+```
+
+Если хотя бы один аргумент -- не строка, то другой будет преобразован к числу:
+
+```js
+//+ run
+alert(2 > "14"); // false
+```
+
+[/warn]
+
+## Правильное сравнение
+
+Все современные браузеры, кроме IE10- (для которых нужно подключить библиотеку [Intl.JS](https://github.com/andyearnshaw/Intl.js/)) поддерживают стандарт [ECMA 402](http://www.ecma-international.org/ecma-402/1.0/ECMA-402.pdf), поддерживающий сравнение строк на разных языках, с учётом их правил.
+
+Способ использования:
+
+```js
+//+ run
+var str = "Ёлки";
+
+alert( str.localeCompare("Яблони") ); // -1
+```
+
+Метод `str1.localeCompare(str2)` возвращает `-1`, если `str1 < str2`, `1`, если `str1 > str2` и `0`, если они равны.
+
+Более подробно про устройство этого метода можно будет узнать в статье [](/intl), когда это вам понадобится.
+
+## Итого
+
+<ul>
+<li>Строки в JavaScript имеют внутреннюю кодировку Юникод. При написании строки можно использовать специальные символы, например `\n` и вставлять юникодные символы по коду.</li>
+<li>Мы познакомились со свойством `length` и методами `charAt`, `toLowerCase/toUpperCase`, `substring/substr/slice` (предпочтителен `slice`)</li>
+<li>Строки сравниваются побуквенно. Поэтому если число получено в виде строки, то такие числа могут сравниваться некорректно, нужно преобразовать его к типу *number*.</li>
+<li>При сравнении строк следует иметь в виду, что буквы сравниваются по их кодам. Поэтому большая буква меньше маленькой, а буква `ё` вообще вне основного алфавита.</li>
+<li>Для правильного сравнения существует целый стандарт ECMA 402. Это не такое простое дело, много языков и много правил. Он поддерживается во всех современных браузерах, кроме IE10-, в которых нужна библиотека [](https://github.com/andyearnshaw/Intl.js/). Такое сравнение работает через вызов `str1.localeCompare(str2)`.</li>
+</ul>
+
+Больше информации о методах для строк можно получить в справочнике: [http://javascript.ru/String]().
\ No newline at end of file
diff --git a/1-js/4-data-structures/10-datetime/1-new-date/solution.md b/1-js/4-data-structures/10-datetime/1-new-date/solution.md
new file mode 100644
index 00000000..d20950e8
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/1-new-date/solution.md
@@ -0,0 +1,10 @@
+Дата в местной временной зоне создается при помощи `new Date`.
+
+Месяцы начинаются с нуля, так что февраль имеет номер 1. Параметры можно указывать с точностью до минут:
+
+```js
+//+ run
+var d = new Date(2012, 1, 20, 3, 12);
+alert(d);
+```
+
diff --git a/1-js/4-data-structures/10-datetime/1-new-date/task.md b/1-js/4-data-structures/10-datetime/1-new-date/task.md
new file mode 100644
index 00000000..c96882ac
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/1-new-date/task.md
@@ -0,0 +1,7 @@
+# Создайте дату
+
+[importance 5]
+
+Создайте объект `Date` для даты: 20 февраля 2012 года, 3 часа 12 минут. 
+
+Временная зона -- местная. Выведите его на экран.
\ No newline at end of file
diff --git a/1-js/4-data-structures/10-datetime/2-get-week-day/_js.view/solution.js b/1-js/4-data-structures/10-datetime/2-get-week-day/_js.view/solution.js
new file mode 100644
index 00000000..9b543d37
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/2-get-week-day/_js.view/solution.js
@@ -0,0 +1,5 @@
+function getWeekDay(date) {
+  var days = ['вс','пн','вт','ср','чт','пт','сб'] ;
+
+  return days[ date.getDay() ];
+}
\ No newline at end of file
diff --git a/1-js/4-data-structures/10-datetime/2-get-week-day/_js.view/test.js b/1-js/4-data-structures/10-datetime/2-get-week-day/_js.view/test.js
new file mode 100644
index 00000000..33f5a79a
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/2-get-week-day/_js.view/test.js
@@ -0,0 +1,29 @@
+describe("getWeekDay", function() {
+  it("3 января 2014 - пятница", function() {
+    assert.equal( getWeekDay(new Date(2014, 0, 3)), 'пт');
+  });
+
+  it("4 января 2014 - суббота", function() {
+    assert.equal( getWeekDay(new Date(2014, 0, 4)), 'сб');
+  });
+
+  it("5 января 2014 - воскресенье", function() {
+    assert.equal( getWeekDay(new Date(2014, 0, 5)), 'вс');
+  });
+
+  it("6 января 2014 - понедельник", function() {
+    assert.equal( getWeekDay(new Date(2014, 0, 6)), 'пн');
+  });
+
+  it("7 января 2014 - вторник", function() {
+    assert.equal( getWeekDay(new Date(2014, 0, 7)), 'вт');
+  });
+
+  it("8 января 2014 - среда", function() {
+    assert.equal( getWeekDay(new Date(2014, 0, 8)), 'ср');
+  });
+
+  it("9 января 2014 - четверг", function() {
+    assert.equal( getWeekDay(new Date(2014, 0, 9)), 'чт');
+  });
+});
\ No newline at end of file
diff --git a/1-js/4-data-structures/10-datetime/2-get-week-day/solution.md b/1-js/4-data-structures/10-datetime/2-get-week-day/solution.md
new file mode 100644
index 00000000..6f65f4e9
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/2-get-week-day/solution.md
@@ -0,0 +1,16 @@
+Метод `getDay()` позволяет получить номер дня недели, начиная с воскресенья. 
+
+Запишем имена дней недели в массив, чтобы можно было их достать по номеру:
+
+```js
+//+ run
+function getWeekDay(date) {
+  var days = ['вс','пн','вт','ср','чт','пт','сб'] ;
+
+  return days[ date.getDay() ];
+}
+
+var date = new Date(2014,0,3);  // 3 января 2014
+alert( getWeekDay(date) );      // 'пт'
+```
+
diff --git a/1-js/4-data-structures/10-datetime/2-get-week-day/task.md b/1-js/4-data-structures/10-datetime/2-get-week-day/task.md
new file mode 100644
index 00000000..b66aa2c1
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/2-get-week-day/task.md
@@ -0,0 +1,13 @@
+# Имя дня недели
+
+[importance 5]
+
+Создайте функцию `getWeekDay(date)`, которая выводит текущий день недели в коротком формате 'пн', 'вт',  ... 'вс'.
+
+Например:
+
+```js
+var date = new Date(2012,0,3);  // 3 января 2012 
+alert( getWeekDay(date) );      // Должно вывести 'вт'
+```
+
diff --git a/1-js/4-data-structures/10-datetime/3-weekday/_js.view/solution.js b/1-js/4-data-structures/10-datetime/3-weekday/_js.view/solution.js
new file mode 100644
index 00000000..3c3266ce
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/3-weekday/_js.view/solution.js
@@ -0,0 +1,10 @@
+function getLocalDay(date) {
+
+  var day = date.getDay();
+
+  if ( day == 0 ) { // день 0 становится 7
+    day = 7; 
+  }
+  
+  return day;
+}
diff --git a/1-js/4-data-structures/10-datetime/3-weekday/_js.view/test.js b/1-js/4-data-structures/10-datetime/3-weekday/_js.view/test.js
new file mode 100644
index 00000000..7b7e2e81
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/3-weekday/_js.view/test.js
@@ -0,0 +1,29 @@
+describe("getLocalDay возвращает день недели", function() {
+  it("3 января 2014 - пятница", function() {
+    assert.equal( getLocalDay(new Date(2014, 0, 3)), 5);
+  });
+
+  it("4 января 2014 - суббота", function() {
+    assert.equal( getLocalDay(new Date(2014, 0, 4)), 6);
+  });
+
+  it("5 января 2014 - воскресенье", function() {
+    assert.equal( getLocalDay(new Date(2014, 0, 5)), 7);
+  });
+
+  it("6 января 2014 - понедельник", function() {
+    assert.equal( getLocalDay(new Date(2014, 0, 6)), 1);
+  });
+
+  it("7 января 2014 - вторник", function() {
+    assert.equal( getLocalDay(new Date(2014, 0, 7)), 2);
+  });
+
+  it("8 января 2014 - среда", function() {
+    assert.equal( getLocalDay(new Date(2014, 0, 8)), 3);
+  });
+
+  it("9 января 2014 - четверг", function() {
+    assert.equal( getLocalDay(new Date(2014, 0, 9)), 4);
+  });
+});
diff --git a/1-js/4-data-structures/10-datetime/3-weekday/solution.md b/1-js/4-data-structures/10-datetime/3-weekday/solution.md
new file mode 100644
index 00000000..62f951c5
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/3-weekday/solution.md
@@ -0,0 +1,19 @@
+Решение - в использовании встроенной функции `getDay`. Она полностью подходит нашим целям, но для воскресенья возвращает 0 вместо 7:
+
+```js
+//+ run
+function getLocalDay(date) {
+
+  var day = date.getDay();
+
+  if ( day == 0 ) { // день 0 становится 7
+    day = 7; 
+  }
+  
+  return day;
+}
+
+alert( getLocalDay(new Date(2012,0,3)) );  // 2
+```
+
+Если удобнее, чтобы день недели начинался с нуля, то можно возвращать в функции `day - 1`, тогда дни будут от 0 (пн) до 6(вс).
\ No newline at end of file
diff --git a/1-js/4-data-structures/10-datetime/3-weekday/task.md b/1-js/4-data-structures/10-datetime/3-weekday/task.md
new file mode 100644
index 00000000..b0398e39
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/3-weekday/task.md
@@ -0,0 +1,13 @@
+# День недели в европейской нумерации
+
+[importance 5]
+
+Напишите функцию, `getLocalDay(date)` которая возвращает день недели для даты `date`.
+
+День нужно возвратить в европейской нумерации, т.е. понедельник имеет номер 1, вторник номер 2, ..., воскресенье - номер 7.
+
+```js
+var date = new Date(2012, 0, 3);  // 3 янв 2012 
+alert( getLocalDay(date) );       // вторник, выведет 2
+```
+
diff --git a/1-js/4-data-structures/10-datetime/4-get-date-ago/_js.view/solution.js b/1-js/4-data-structures/10-datetime/4-get-date-ago/_js.view/solution.js
new file mode 100644
index 00000000..6389ebfc
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/4-get-date-ago/_js.view/solution.js
@@ -0,0 +1,6 @@
+function getDateAgo(date, days) {
+  var dateCopy = new Date(date);
+  
+  dateCopy.setDate( date.getDate() - days );
+  return dateCopy.getDate(); 
+}
\ No newline at end of file
diff --git a/1-js/4-data-structures/10-datetime/4-get-date-ago/_js.view/test.js b/1-js/4-data-structures/10-datetime/4-get-date-ago/_js.view/test.js
new file mode 100644
index 00000000..138ddbd7
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/4-get-date-ago/_js.view/test.js
@@ -0,0 +1,27 @@
+describe("getDateAgo", function() {
+
+  it("1 день до 02.01.2015 -> число 1", function() {
+    assert.equal( getDateAgo(new Date(2015, 0, 2), 1), 1 );
+  });
+
+
+  it("2 день до 02.01.2015 -> число 31", function() {
+    assert.equal( getDateAgo(new Date(2015, 0, 2), 2), 31 );
+  });
+
+  it("100 дней от 02.01.2015 -> число 24", function() {
+    assert.equal( getDateAgo(new Date(2015, 0, 2), 100), 24 );
+  });
+
+  it("365 дней от 02.01.2015 -> число 2", function() {
+    assert.equal( getDateAgo(new Date(2015, 0, 2), 365), 2 );
+  });
+
+  it("не меняет переданный объект Date", function() {
+    var date = new Date(2015, 0, 2);
+    var dateCopy = new Date(date);
+    getDateAgo(dateCopy, 100);
+    assert.equal(date.getTime(), dateCopy.getTime());
+  });
+    
+});
diff --git a/1-js/4-data-structures/10-datetime/4-get-date-ago/solution.md b/1-js/4-data-structures/10-datetime/4-get-date-ago/solution.md
new file mode 100644
index 00000000..d9f8f553
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/4-get-date-ago/solution.md
@@ -0,0 +1,29 @@
+Из даты `date` нужно вычесть указанное количество дней.  Это просто:
+
+```js
+function getDateAgo(date, days) {
+  date.setDate( date.getDate() - days );
+  return date.getDate(); 
+}
+```
+
+Ситуацию осложняет то, что исходный объект даты не должен меняться. Это разумное требование, оно позволит избежать сюрпризов.
+
+Для того чтобы ему соответствовать, создадим копию объекта даты:
+
+```js
+//+ run
+function getDateAgo(date, days) {
+  var dateCopy = new Date(date);
+  
+  dateCopy.setDate( date.getDate() - days );
+  return dateCopy.getDate(); 
+}
+
+var date = new Date(2015, 0, 2);
+
+alert( getDateAgo(date, 1) ); // 1, (1 января 2015)
+alert( getDateAgo(date, 2) ); // 31, (31 декабря 2014)
+alert( getDateAgo(date, 365) ); // 2, (2 января 2014)
+```
+
diff --git a/1-js/4-data-structures/10-datetime/4-get-date-ago/task.md b/1-js/4-data-structures/10-datetime/4-get-date-ago/task.md
new file mode 100644
index 00000000..0db7847b
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/4-get-date-ago/task.md
@@ -0,0 +1,17 @@
+# День указанное количество дней назад
+
+[importance 4]
+
+Создайте функцию `getDateAgo(date, days)`, которая возвращает число, которое было `days` дней назад от даты `date`.
+
+Например, для 2 января 2015:
+
+```js
+var date = new Date(2015, 0, 2);
+
+alert( getDateAgo(date, 1) ); // 1, (1 января 2015)
+alert( getDateAgo(date, 2) ); // 31, (31 декабря 2014)
+alert( getDateAgo(date, 365) ); // 2, (2 января 2014)
+```
+
+P.S. Важная деталь: в процессе вычислений функция не должна менять переданный ей объект `date`. 
diff --git a/1-js/4-data-structures/10-datetime/5-last-day-of-month/_js.view/solution.js b/1-js/4-data-structures/10-datetime/5-last-day-of-month/_js.view/solution.js
new file mode 100644
index 00000000..ed998043
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/5-last-day-of-month/_js.view/solution.js
@@ -0,0 +1,4 @@
+function getLastDayOfMonth(year, month) {
+  var date = new Date(year, month+1, 0);
+  return date.getDate();
+}
diff --git a/1-js/4-data-structures/10-datetime/5-last-day-of-month/_js.view/test.js b/1-js/4-data-structures/10-datetime/5-last-day-of-month/_js.view/test.js
new file mode 100644
index 00000000..c1d174e0
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/5-last-day-of-month/_js.view/test.js
@@ -0,0 +1,13 @@
+describe("getLastDayOfMonth", function() {
+  it("последний день 01.01.2012 - 31", function() {
+    assert.equal( getLastDayOfMonth(2012, 0), 31);
+  });
+
+  it("последний день 01.02.2012 - 29 (високосный год)", function() {
+    assert.equal( getLastDayOfMonth(2012, 1), 29);
+  });
+
+  it("последний день 01.02.2013 - 28", function() {
+    assert.equal( getLastDayOfMonth(2013, 1), 28);
+  });
+});
\ No newline at end of file
diff --git a/1-js/4-data-structures/10-datetime/5-last-day-of-month/solution.md b/1-js/4-data-structures/10-datetime/5-last-day-of-month/solution.md
new file mode 100644
index 00000000..5dd517e9
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/5-last-day-of-month/solution.md
@@ -0,0 +1,14 @@
+Создадим дату из следующего месяца, но день не первый, а "нулевой" (т.е. предыдущий):
+
+```js
+//+ run
+function getLastDayOfMonth(year, month) {
+  var date = new Date(year, month+1, 0);
+  return date.getDate();
+}
+
+alert( getLastDayOfMonth(2012, 0) ); // 31
+alert( getLastDayOfMonth(2012, 1) ); // 29
+alert( getLastDayOfMonth(2013, 1) ); // 28
+```
+
diff --git a/1-js/4-data-structures/10-datetime/5-last-day-of-month/task.md b/1-js/4-data-structures/10-datetime/5-last-day-of-month/task.md
new file mode 100644
index 00000000..8f88e971
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/5-last-day-of-month/task.md
@@ -0,0 +1,13 @@
+# Последний день месяца?
+
+[importance 5]
+
+Напишите функцию `getLastDayOfMonth(year, month)`, которая возвращает последний день месяца.
+
+Параметры:
+<ul>
+<li>`year` -- 4-значный год, например 2012.</li>
+<li>`month` -- месяц от 0 до 11.</li>
+</ul>
+
+Например, `getLastDayOfMonth(2012, 1) = 29` (високосный год, февраль).
diff --git a/1-js/4-data-structures/10-datetime/6-get-seconds-today/solution.md b/1-js/4-data-structures/10-datetime/6-get-seconds-today/solution.md
new file mode 100644
index 00000000..00cbc9ee
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/6-get-seconds-today/solution.md
@@ -0,0 +1,19 @@
+Для вывода достаточно сгенерировать объект `Date`, соответствующий началу дня, т.е. "сегодня" 00 часов 00 минут 00 секунд, и вычесть его из текущей даты.
+
+Полученная разница -- это как раз количество миллисекунд от начала дня, которое достаточно поделить на `1000`, чтобы получить секунды:
+
+```js
+//+ run
+function getSecondsToday() {
+  var now = new Date();
+
+  // создать объект из текущей даты, без часов-минут-секунд
+  var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+
+  var diff = now - today; // разница в миллисекундах
+  return Math.round(diff / 1000); // перевести в секунды
+}
+
+alert( getSecondsToday() );
+```
+
diff --git a/1-js/4-data-structures/10-datetime/6-get-seconds-today/task.md b/1-js/4-data-structures/10-datetime/6-get-seconds-today/task.md
new file mode 100644
index 00000000..0b8cde4a
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/6-get-seconds-today/task.md
@@ -0,0 +1,13 @@
+# Сколько секунд уже прошло сегодня?
+
+[importance 5]
+
+Напишите функцию `getSecondsToday()` которая возвращает, сколько секунд прошло с начала сегодняшнего дня.
+
+Например, если сейчас `10:00` и не было перехода на зимнее/летнее время, то:
+
+```js
+getSecondsToday() == 36000 // (3600 * 10)
+```
+
+Функция должна работать в любой день, т.е. в ней не должно быть конкретного значения сегодняшней даты.
\ No newline at end of file
diff --git a/1-js/4-data-structures/10-datetime/7-get-seconds-to-tomorrow/solution.md b/1-js/4-data-structures/10-datetime/7-get-seconds-to-tomorrow/solution.md
new file mode 100644
index 00000000..a00492fc
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/7-get-seconds-to-tomorrow/solution.md
@@ -0,0 +1,17 @@
+Для получения оставшихся до конца дня миллисекунд нужно из "завтра 00ч 00мин 00сек" вычесть текущее время. 
+
+Чтобы сгенерировать "завтра" -- увеличим текущую дату на 1 день:
+
+```js
+//+ run
+function getSecondsToTomorrow() {
+  var now = new Date();
+
+  // создать объект из завтрашней даты, без часов-минут-секунд
+  var tomorrow = new Date(now.getFullYear(), now.getMonth(), *!*now.getDate()+1*/!*);
+
+  var diff = tomorrow - now; // разница в миллисекундах
+  return Math.round(diff / 1000); // перевести в секунды
+}
+```
+
diff --git a/1-js/4-data-structures/10-datetime/7-get-seconds-to-tomorrow/task.md b/1-js/4-data-structures/10-datetime/7-get-seconds-to-tomorrow/task.md
new file mode 100644
index 00000000..93980a4f
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/7-get-seconds-to-tomorrow/task.md
@@ -0,0 +1,13 @@
+# Сколько секунд - до завтра?
+
+[importance 5]
+
+Напишите функцию `getSecondsToTomorrow()` которая возвращает, сколько секунд осталось до завтра.
+
+Например, если сейчас `23:00`, то:
+
+```js
+getSecondsToTomorrow() == 3600
+```
+
+P.S. Функция должна работать в любой день, т.е. в ней не должно быть конкретного значения сегодняшней даты.
\ No newline at end of file
diff --git a/1-js/4-data-structures/10-datetime/8-format-date-ddmmyy/_js.view/solution.js b/1-js/4-data-structures/10-datetime/8-format-date-ddmmyy/_js.view/solution.js
new file mode 100644
index 00000000..df675b10
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/8-format-date-ddmmyy/_js.view/solution.js
@@ -0,0 +1,13 @@
+function formatDate(date) {
+
+  var dd = date.getDate();
+  if ( dd < 10 ) dd = '0' + dd;
+
+  var mm = date.getMonth()+1;
+  if ( mm < 10 ) mm = '0' + mm;
+
+  var yy = date.getFullYear() % 100;
+  if ( yy < 10 ) yy = '0' + yy;
+
+  return dd+'.'+mm+'.'+yy;
+}
diff --git a/1-js/4-data-structures/10-datetime/8-format-date-ddmmyy/_js.view/test.js b/1-js/4-data-structures/10-datetime/8-format-date-ddmmyy/_js.view/test.js
new file mode 100644
index 00000000..2980944a
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/8-format-date-ddmmyy/_js.view/test.js
@@ -0,0 +1,13 @@
+describe("formatDate", function() {
+  it("правильно форматирует дату 30.01.14", function() {
+    assert.equal( formatDate(new Date(2014, 0, 30)), '30.01.14');
+  });
+
+  it("правильно форматирует дату 01.01.01", function() {
+    assert.equal( formatDate(new Date(2001, 0, 1)), '01.01.01');
+  });
+
+  it("правильно форматирует дату 01.01.00", function() {
+    assert.equal( formatDate(new Date(2000, 0, 1)), '01.01.00');
+  });
+});
diff --git a/1-js/4-data-structures/10-datetime/8-format-date-ddmmyy/solution.md b/1-js/4-data-structures/10-datetime/8-format-date-ddmmyy/solution.md
new file mode 100644
index 00000000..71125af8
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/8-format-date-ddmmyy/solution.md
@@ -0,0 +1,51 @@
+Получим компоненты один за другим.
+<ol>
+<li>День можно получить как `date.getDate()`. При необходимости добавим ведущий ноль:
+
+```js
+var dd = date.getDate();
+if (dd<10) dd= '0'+dd;
+```
+
+</li>
+<li>`date.getMonth()` возвратит месяц, начиная с нуля. Увеличим его на 1:
+
+```js
+var mm = date.getMonth() + 1;  // месяц 1-12
+if (mm<10) mm= '0'+mm;
+```
+
+</li>
+<li>`date.getFullYear()` вернет год в 4-значном формате. Чтобы сделать его двузначным - воспользуемся оператором взятия остатка `'%'`:
+
+```js
+var yy = date.getFullYear() % 100;
+if (yy<10) yy= '0'+yy;
+```
+
+Заметим, что год, как и другие компоненты, может понадобиться дополнить нулем слева, причем возможно что `yy == 0` (например, 2000 год). При сложении со строкой `0+'0' == '00'`, так что будет все в порядке.
+</li>
+</ol>
+
+Полный код:
+
+```js
+//+ run
+function formatDate(date) {
+
+  var dd = date.getDate();
+  if ( dd < 10 ) dd = '0' + dd;
+
+  var mm = date.getMonth()+1;
+  if ( mm < 10 ) mm = '0' + mm;
+
+  var yy = date.getFullYear() % 100;
+  if ( yy < 10 ) yy = '0' + yy;
+
+  return dd+'.'+mm+'.'+yy;
+}
+
+var d = new Date(2014, 0, 30);  // 30 Янв 2014
+alert( formatDate(d) );  // '30.01.14'
+```
+
diff --git a/1-js/4-data-structures/10-datetime/8-format-date-ddmmyy/task.md b/1-js/4-data-structures/10-datetime/8-format-date-ddmmyy/task.md
new file mode 100644
index 00000000..820b0a4b
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/8-format-date-ddmmyy/task.md
@@ -0,0 +1,14 @@
+# Вывести дату в формате дд.мм.гг
+
+[importance 3]
+
+Напишите функцию `formatDate(date)`, которая выводит дату `date` в формате `дд.мм.гг`:
+
+Например:
+
+```js
+var d = new Date(2014, 0, 30); // 30 января 2014
+alert( formatDate(d) ); // '30.01.14'
+```
+
+P.S. Обратите внимание, ведущие нули должны присутствовать, то есть 1 января 2001 должно быть 01.01.01, а не 1.1.1.
\ No newline at end of file
diff --git a/1-js/4-data-structures/10-datetime/9-format-date-relative/_js.view/solution.js b/1-js/4-data-structures/10-datetime/9-format-date-relative/_js.view/solution.js
new file mode 100644
index 00000000..e332defe
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/9-format-date-relative/_js.view/solution.js
@@ -0,0 +1,34 @@
+function formatDate(date) {
+  var diff = new Date() - date; // разница в миллисекундах
+  
+  if (diff < 1000) { // прошло менее 1 секунды
+    return 'только что';
+  }
+
+  var sec = Math.floor( diff / 1000 ); // округлить diff до секунд
+	
+  if (sec < 60) {
+    return sec + ' сек. назад';
+  }
+	
+  var min = Math.floor( diff / 60000 ); // округлить diff до минут
+  if (min < 60) {
+    return min + ' мин. назад';		
+  }
+
+  // форматировать дату, с учетом того, что месяцы начинаются с 0
+  var d = date;
+  d = [
+    '0'+d.getDate(),
+    '0'+(d.getMonth()+1),
+    ''+d.getFullYear(),
+     '0'+d.getHours(),
+    '0'+d.getMinutes()
+  ];
+
+  for(var i=0; i<d.length; i++) {
+    d[i] = d[i].slice(-2); 
+  }
+
+  return d.slice(0,3).join('.')+' '+d.slice(3).join(':');
+}
diff --git a/1-js/4-data-structures/10-datetime/9-format-date-relative/_js.view/test.js b/1-js/4-data-structures/10-datetime/9-format-date-relative/_js.view/test.js
new file mode 100644
index 00000000..be4ee088
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/9-format-date-relative/_js.view/test.js
@@ -0,0 +1,18 @@
+describe("formatDate", function() {
+  it("выводит дату 1мс назад как \"только что\"", function() {
+    assert.equal( formatDate( new Date(new Date - 1) ), 'только что' );
+  });
+
+  it('выводит дату "30 сек назад"', function() {
+    assert.equal( formatDate( new Date( new Date - 30*1000) ), "30 сек. назад" );
+  });
+
+  it('выводит дату "5 мин назад"', function() {
+    assert.equal( formatDate( new Date( new Date- 5*60*1000) ), "5 мин. назад");
+  });
+
+  it("выводит старую дату в формате дд.мм.гг чч:мм", function() {
+    assert.equal( formatDate( new Date(2014, 2, 1, 11, 22, 33) ), "01.03.14 11:22" ); 
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/4-data-structures/10-datetime/9-format-date-relative/solution.md b/1-js/4-data-structures/10-datetime/9-format-date-relative/solution.md
new file mode 100644
index 00000000..ce90c097
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/9-format-date-relative/solution.md
@@ -0,0 +1,48 @@
+Для того, чтобы узнать время от `date` до текущего момента - используем вычитание дат.
+
+```js
+//+ run
+function formatDate(date) {
+  var diff = new Date() - date; // разница в миллисекундах
+  
+  if (diff < 1000) { // прошло менее 1 секунды
+    return 'только что';
+  }
+
+  var sec = Math.floor( diff / 1000 ); // округлить diff до секунд
+	
+  if (sec < 60) {
+    return sec + ' сек. назад';
+  }
+	
+  var min = Math.floor( diff / 60000 ); // округлить diff до минут
+  if (min < 60) {
+    return min + ' мин. назад';		
+  }
+
+  // форматировать дату, с учетом того, что месяцы начинаются с 0
+  var d = date;
+  d = [
+    '0'+d.getDate(),
+    '0'+(d.getMonth()+1),
+    ''+d.getFullYear(),
+     '0'+d.getHours(),
+    '0'+d.getMinutes()
+  ];
+
+  for(var i=0; i<d.length; i++) {
+    d[i] = d[i].slice(-2); 
+  }
+
+  return d.slice(0,3).join('.')+' '+d.slice(3).join(':');
+}
+
+alert( formatDate( new Date( new Date - 1) ) ); // только что 
+
+alert( formatDate( new Date( new Date - 30*1000) ) ); // 30 сек. назад
+
+alert( formatDate( new Date( new Date- 5*60*1000) ) ); // 5 мин. назад
+
+alert( formatDate( new Date( new Date - 86400*1000) ) ); // вчерашняя дата в формате "дд.мм.гг чч:мм"
+```
+
diff --git a/1-js/4-data-structures/10-datetime/9-format-date-relative/task.md b/1-js/4-data-structures/10-datetime/9-format-date-relative/task.md
new file mode 100644
index 00000000..01874317
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/9-format-date-relative/task.md
@@ -0,0 +1,26 @@
+# Относительное форматирование даты
+
+[importance 4]
+
+Напишите функцию `formatDate(date)`, которая форматирует дату `date` так:
+<ul>
+<li>Если со времени `date` прошло менее секунды, то возвращает `"только что"`.</li>
+<li>Иначе если со времени `date` прошло менее минуты, то `"n сек. назад"`.</li>
+<li>Иначе если прошло меньше часа, то `"m мин. назад"`.</li>
+<li>Иначе полная дата в формате `"дд.мм.гг чч:мм"`.</li>
+</ul>
+
+Например:
+
+```js
+function formatDate(date) { /* ваш код */ }
+
+alert( formatDate( new Date(new Date - 1) ) ); // "только что"
+
+alert( formatDate( new Date(new Date - 30*1000) ) ); // "30 сек. назад"
+
+alert( formatDate( new Date(new Date- 5*60*1000) ) ); // "5 мин. назад"
+
+alert( formatDate( new Date(new Date - 86400*1000) ) ); // вчерашняя дата в формате "дд.мм.гг чч:мм"
+```
+
diff --git a/1-js/4-data-structures/10-datetime/article.md b/1-js/4-data-structures/10-datetime/article.md
new file mode 100644
index 00000000..13f9c5b8
--- /dev/null
+++ b/1-js/4-data-structures/10-datetime/article.md
@@ -0,0 +1,492 @@
+# Дата и Время
+
+Для работы с датой и временем в JavaScript используются объекты [Date](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/).
+
+[cut]
+## Создание
+
+Для создания нового объекта типа `Date` используется один из синтаксисов:
+<dl>
+<dt>`new Date()`</dt>
+<dd>Создает объект `Date` с текущей датой и временем:
+
+```js
+//+ run
+var now = new Date();
+alert(now);
+```
+
+</dd>
+<dt>`new Date(milliseconds)`</dt>
+<dd>Создает объект `Date`, значение которого равно количеству миллисекунд (1/1000 секунды), прошедших с 1 января 1970 года GMT+0.
+
+```js
+//+ run
+// 24 часа после 01.01.1970 GMT+0
+var Jan02_1970 = new Date(3600*24*1000);
+alert( Jan02_1970 );
+```
+
+</dd>
+<dt>`new Date(datestring)`</dt>
+<dd>Если единственный аргумент - строка, используется вызов `Date.parse` для ее разбора.</dd>
+<dt>`new Date(year, month, date, hours, minutes, seconds, ms)`</dt>
+<dd>Дату можно создать, используя компоненты в местной временной зоне. Для этого формата обязательны только первые два аргумента. Отсутствующие параметры, начиная с `hours` считаются равными нулю, а `date` -- единице.
+
+**Заметим, что год `year` должен быть из 4 цифр, а отсчет месяцев `month` начинается с нуля 0.** Например:
+
+```js
+new Date(2011, 0, 1) // 1 января 2011, 00:00:00 в местной временной зоне
+new Date(2011, 0) // то же самое, date по умолчанию равно 1
+new Date(2011, 0, 1, 0, 0, 0, 0); // то же самое
+```
+
+Дата задана с точностью до миллисекунд:
+
+```js
+//+ run
+var d = new Date(2011, 0, 1, 2, 3, 4, 567); 
+alert(d); // 1.01.2011, 02:03:04.567
+```
+
+</dd>
+</dl>
+
+
+## Получение компонентов даты 
+
+Для доступа к компонентам даты-времени объекта `Date` используются следующие методы:
+<dl>
+<dt>`getFullYear()`</dt>
+<dd>Получить год(из 4 цифр)</dd>
+<dt>`getMonth()`</dt>
+<dd>Получить месяц, **от 0 до 11**.</dd>
+<dt>`getDate()`</dt>
+<dd>Получить число месяца, от 1 до 31.</dd>
+<dt>`getHours(), getMinutes(), getSeconds(), getMilliseconds()`</dt>
+<dd>Получить соответствующие компоненты.</dd>
+</dl>
+
+[warn header="Устаревший `getYear()`"]
+Некоторые браузеры реализуют нестандартный метод `getYear()`. Где-то он возвращает только две цифры из года, где-то четыре. Так или иначе, этот метод отсутствует в стандарте JavaScript. Не используйте его. Для получения года есть `getFullYear()`.
+[/warn]
+
+Дополнительно можно получить день недели:
+<dl>
+<dt>`getDay()`</dt>
+<dd>Получить номер дня в неделе. Неделя в JavaScript начинается с воскресенья, так что результат будет числом **от 0(воскресенье) до 6(суббота)**.</dd>
+</dl>
+
+**Все методы, указанные выше, возвращают результат для местной временной зоны.**
+
+Существуют также UTC-варианты этих методов, возвращающие день, месяц, год и т.п. для зоны GMT+0 (UTC): `getUTCFullYear()`, `getUTCMonth()`, `getUTCDay()`. То есть, сразу после `"get"` вставляется `"UTC"`.
+
+Если ваше локальное время сдвинуто относительно UTC, то следующий код покажет разные часы:
+
+```js
+//+ run
+var date = new Date();
+
+alert( date.getHours() ); // час в вашей зоне для даты date
+alert( date.getUTCHours() ); // час в зоне GMT+0 для даты date
+```
+
+Кроме описанных выше, существуют два специальных метода без UTC-варианта:
+
+<dl>
+<dt>`getTime()`</dt>
+<dd>Возвращает число миллисекунд, прошедших с 01.01.1970 00:00:00 UTC. Это то же число, которое используется в конструкторе `new Date(milliseconds)`.</dd>
+<dt>`getTimezoneOffset()`</dt>
+<dd>Возвращает разницу между местным и UTC-временем, в минутах.
+
+```js
+//+ run
+alert( new Date().getTimezoneOffset() );  // Для GMT-1 выведет 60
+```
+
+</dd>
+</dl>
+
+
+
+## Установка компонентов даты   
+
+Следующие методы позволяют устанавливать компоненты даты и времени:
+<ul>
+<li>`setFullYear(year [, month, date])`</li>
+<li>`setMonth(month [, date])`</li>
+<li>`setDate(date)`</li>
+<li>`setHours(hour [, min, sec, ms])`</li>
+<li>`setMinutes(min [, sec, ms])`</li>
+<li>`setSeconds(sec [, ms])`</li>
+<li>`setMilliseconds(ms)`</li>
+<li>`setTime(milliseconds)` (устанавливает всю дату по миллисекундам с 01.01.1970 UTC)</li>
+</ul>
+
+Все они, кроме `setTime()`, обладают также UTC-вариантом, например: `setUTCHours()`.
+
+Как видно, некоторые методы могут устанавливать несколько компонентов даты одновременно, в частности, `setHours`. При этом если какая-то компонента не указана, она не меняется. Например:
+
+```js
+//+ run
+var today = new Date;
+
+today.setHours(0); 
+alert( today ); // сегодня, но час изменён на 0
+
+today.setHours(0, 0, 0, 0); 
+alert (today ); // сегодня, ровно 00:00:00.
+```
+
+### Автоисправление даты   
+
+*Автоисправление* -- очень удобное свойство объектов `Date`. Оно заключается в том, что можно устанавливать заведомо некорректные компоненты (например 32 января), а объект сам себя поправит.
+
+```js
+//+ run
+var d = new Date(2013, 0, *!*32*/!*); // 32 января 2013 ?!?
+alert(d); // ... это 1 февраля 2013!
+```
+
+**Неправильные компоненты даты автоматически распределяются по остальным.** 
+
+Например, нужно увеличить на 2 дня дату "28 февраля 2011". Может быть так, что это будет 2 марта, а может быть и 1 марта, если год високосный. Но нам обо всем этом думать не нужно. Просто прибавляем два дня. Остальное сделает `Date`:
+
+```js
+//+ run
+var d = new Date(2011, 1, 28);
+*!*
+d.setDate( d.getDate() + 2 );
+*/!*
+
+alert(d); // 2 марта, 2011
+```
+
+Также это используют для получения даты, отдаленной от имеющейся на нужный промежуток времени. Например, получим дату на 70 секунд большую текущей:
+
+```js
+//+ run
+var d = new Date();
+d.setSeconds( d.getSeconds()+70);
+
+alert(d); // выведет корректную дату
+```
+
+Можно установить и нулевые, и даже отрицательные компоненты. Например:
+
+```js
+//+ run
+var d = new Date;
+
+d.setDate(1); // поставить первое число месяца
+alert(d);
+
+d.setDate(0); // нулевого числа нет, будет последнее число предыдущего месяца
+alert(d);
+```
+
+
+
+```js
+//+ run
+var d = new Date;
+
+d.setDate(-1); // предпоследнее число предыдущего месяца
+alert(d);
+```
+
+### Преобразование к числу, разность дат   
+
+Когда объект `Date` используется в числовом контексте, он преобразуется в количество миллисекунд:
+
+```js
+//+ run
+alert( +new Date ) // +date то же самое, что: +date.valueOf()
+```
+
+**Важный побочный эффект: даты можно вычитать, результат вычитания объектов `Date` -- их временная разница, в миллисекундах**.
+
+Это используют для измерения времени:
+
+```js
+//+ run
+var start = new Date; // засекли время
+
+// что-то сделать
+for (var i=0; i<100000; i++) {
+  var doSomething = i*i*i; 
+}
+
+var end = new Date; // конец измерения
+
+alert("Цикл занял " + (end-start) + " ms");
+```
+
+### Бенчмаркинг
+
+Допустим, у нас есть несколько вариантов решения задачи, каждый описан функцией. 
+
+Как узнать, какой быстрее?
+
+Для примера возьмем две функции, которые бегают по массиву:
+
+```js
+function walkIn(arr) {
+  for(var key in arr) arr[i]++
+}
+
+function walkLength(arr) {
+  for(var i=0; i<arr.length; i++) arr[i]++;
+}
+```
+
+Чтобы померять, какая из них быстрее, нельзя запустить один раз `walkIn`, один раз `walkLength` и замерить разницу. Одноразовый запуск ненадежен, любая мини-помеха исказит результат.
+
+Для правильного бенчмаркинга функция запускается много раз, чтобы сам тест занял существенное время. Это сведет влияние помех к минимуму. Сложную функцию можно запускать 100 раз, простую -- 1000 раз... 
+
+Померяем, какая из функций округления быстрее:
+
+```js
+//+ run
+var arr = [];
+for(var i=0; i<1000; i++) arr[i] = 0;
+
+function walkIn(arr) {  for(var key in arr) arr[i]++; }
+function walkLength(arr) { for(var i=0; i<arr.length; i++) arr[i]++; }
+
+function bench(f) {
+  var date = new Date();
+  for (var i=0; i<10000; i++) f(arr);
+  return new Date() - date;
+}
+
+alert('Время walkIn: ' + bench(walkIn) + 'мс');
+alert('Время walkLength: ' + bench(walkLength) + 'мс');
+```
+
+Теперь представим себе, что во время первого бенчмаркинга `bench(walkIn)` компьютер что-то делал параллельно важное (вдруг) и это занимало ресурсы, а во время второго -- перестал. Реальная ситуация? Конечно реальна, особенно на современных ОС, где много процессов одновременно.
+
+**Гораздо более надёжные результаты можно получить, весь пакет тестов прогнать много раз.**
+
+```js
+//+ run
+var arr = [];
+for(var i=0; i<1000; i++) arr[i] = 0;
+
+function walkIn(arr) {  for(var key in arr) arr[i]++; }
+function walkLength(arr) { for(var i=0; i<arr.length; i++) arr[i]++; }
+
+function bench(f) {
+  var date = new Date();
+  for (var i=0; i<1000; i++) f(arr);
+  return new Date() - date;
+}
+
+*!*
+// bench для каждого теста запустим много раз, чередуя
+var timeIn = 0, timeLength = 0;
+for(var i=0; i<100; i++) {
+  timeIn += bench(walkIn);
+  timeLength += bench(walkLength);
+}
+*/!*
+
+alert('Время walkIn: ' + timeIn + 'мс');
+alert('Время walkLength: ' +timeLength + 'мс');
+```
+
+[smart header="Более точное время с `performance.now()`"]
+В современных браузерах (кроме IE9-) вызов [performance.now()](https://developer.mozilla.org/en-US/docs/Web/API/performance.now) возвращает количество миллисекунд, прошедшее с начала загрузки страницы, а если точнее -- с момента выгрузки предыдущей страницы из памяти. 
+
+Его можно посмотреть в любом месте страницы, даже в `<head>`, чтобы узнать, сколько времени потребовалось браузеру, чтобы до него добраться, включая загрузку HTML. 
+
+Возвращаемое значение измеряется в миллисекундах, но дополнительно имеет точность 3 знака после запятой (до миллионных долей секунды!), поэтому можно использовать его и для более точного бенчмаркинга в том числе.
+[/smart]
+
+[smart header="`console.time(метка)` и `console.timeEnd(метка)`"]
+Для измерения с одновременным выводом результатов в консоли есть методы:
+<ul>
+<li>`console.time(метка)` -- включить внутренний хронометр браузера с меткой.</li>
+<li>`console.timeEnd(метка)` -- выключить внутренний хронометр браузера с меткой и вывести результат.</li>
+</ul>
+Параметр `"метка"` используется для идентификации таймера, чтобы можно было делать много замеров одновременно и даже вкладывать измерения друг в друга. 
+
+В коде ниже таймеры `walkIn`, `walkLength` -- конкретные тесты, а таймер "All Benchmarks" -- время "на всё про всё":
+
+```js
+//+ run
+var arr = [];
+for(var i=0; i<1000; i++) arr[i] = 0;
+
+function walkIn(arr) {  for(var key in arr) arr[i]++; }
+function walkLength(arr) { for(var i=0; i<arr.length; i++) arr[i]++; }
+
+function bench(f) {
+  for (var i=0; i<10000; i++) f(arr);
+}
+
+console.time("All Benchmarks");
+
+console.time("walkIn");
+bench(walkIn);
+console.timeEnd("walkIn");
+
+
+console.time("walkLength");
+bench(walkLength);
+console.timeEnd("walkLength");
+
+console.timeEnd("All Benchmarks");
+```
+
+**При запуске этого примера нужно открыть консоль, иначе вы ничего не увидите.**
+[/smart]
+
+[warn header="Внимание, оптимизатор!"]
+Современные интерпретаторы JavaScript делают массу оптимизаций, например:
+<ol>
+<li>Автоматически выносят инвариант, то есть постоянное в цикле значение типа `arr.length`, за пределы цикла.</li>
+<li>Стараются понять, значения какого типа хранит данная переменная или массив, какую структуру имеет объект и, исходя из этого, оптимизировать внутренние алгоритмы.</li>
+<li>Выполняют простейшие операции, например сложение явно заданных чисел и строк, на этапе компиляции.</li>
+<li>В теории, могут выкинуть код, который ни на что не влияет, например присваивание к неиспользуемой локальной переменной, хотя делают это редко.</li>
+</ol>
+Они могут влиять на результаты тестов. 
+[/warn]
+
+
+## Форматирование
+
+Во всех браузерах, кроме IE10-, поддерживается новый стандарт [Ecma 402](http://www.ecma-international.org/publications/standards/Ecma-402.htm), который добавляет специальные методы для форматирования дат.
+
+Это делается взыовом `date.toLocaleString(локаль, опции)`, у которого много настроек. Он позволяет указать, какие параметры даты нужно вывести, и ряд настроек вывода, после чего интерпретатор сам сформирует строку.
+
+Пример с почти всеми параметрами даты и русским, затем английским (США) форматированием:
+
+```js
+//+ run
+var date = new Date(2014, 11, 31, 12, 30, 0);
+
+var options = {
+  era: 'long',
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+  weekday: 'long',
+  timezone: 'UTC',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric'
+};
+
+alert( date.toLocaleString("ru", options) ); // среда, 31 декабря 2014 г. н.э. 12:30:00
+alert( date.toLocaleString("en-US", options) ); // Wednesday, December 31, 2014 Anno Domini 12:30:00 PM
+```
+
+Вы сможете подробно узнать о них в статье [](/intl), которая посвящена этому стандарту. 
+
+
+**Методы вывода без локализации:**
+
+<dl>
+<dt>`toString()`, `toDateString()`, `toTimeString()`</dt>
+<dd>Возвращают стандартное строчное представление, не указанное в стандарте, а зависящее от браузера. Единственное требование - читаемость человеком. Метод `toString` возвращает дату целиком, `toDateString()` и `toTimeString()` - только дату и время соответственно.
+
+```js
+//+ run
+var d = new Date();
+
+alert( d.toString() ); // вывод, похожий на 'Wed Jan 26 2011 16:40:50 GMT+0300'
+```
+
+<dt>`toUTCString()`</dt>
+<dd>То же самое, что `toString()`, но дата в зоне UTC.</dd>
+</dl>
+<dt>`toISOString()`</dt>
+<dd>Возвращает дату в формате ISO Детали формата будут далее. Поддерживается современными браузерами, не поддерживается IE&lt;9.
+
+```js
+//+ run
+var d = new Date();
+
+alert( d.toISOString() ); // вывод, похожий на '2011-01-26T13:51:50.417Z'
+```
+
+</dd></dl>
+
+**Если хочется иметь большую гибкость и кросс-браузерность, то также можно воспользоваться специальной библиотекой, например [Moment.JS](http://momentjs.com/) или написать свою функцию.**
+
+
+
+## Разбор строки, Date.parse   
+
+Все современные браузеры, включая IE9+, понимают даты в упрощённом формате ISO 8601 Extended.
+
+Этот формат выглядит так: `YYYY-MM-DDTHH:mm:ss.sssZ`. Для разделения даты и времени в нем используется символ `'T'`. Часть `'Z'` обозначает (необязательную) временную зону -- она может отсутствовать, тогда зона UTC, либо может быть символ `z` -- тоже  UTC, или зона в формате `+-hh:mm`.
+
+Также возможны упрощенные варианты, к примеру:
+
+```js
+YYYY 
+YYYY-MM 
+YYYY-MM-DD
+```
+
+Метод `Date.parse(str)` разбирает строку `str` в таком формате и возвращает соответствующее ей количество миллисекунд. Если это невозможно, `Date.parse` возвращает `NaN`.
+
+На момент написания некоторые браузеры (Safari) воспринимали формат без `'Z'` как дату в локальной таймзоне (по стандарту UTC), поэтому пример ниже в них работает некорректно:
+
+```js
+//+ run
+var msNoZone = Date.parse('2012-01-26T13:51:50.417'); // без зоны, значит UTC
+
+alert(msNoZone); // 1327571510417 (число миллисекунд)
+
+var msZ = Date.parse('2012-01-26T13:51:50.417z'); // зона z означает UTC
+alert(msZ == msNoZone); // true, если браузер правильный
+```
+
+С таймзоной `-07:00 GMT` в конце все современные браузеры работают правильно:
+
+```js
+//+ run
+var ms = Date.parse('2012-01-26T13:51:50.417-07:00');
+
+alert(ms); // 1327611110417 (число миллисекунд)
+```
+
+[smart header="Формат дат для IE8-"]
+До появления спецификации EcmaScript 5 формат не был стандартизован, и браузеры, включая IE8-, имели свои собственные форматы дат. Частично, эти форматы пересекаются.
+
+Например, код ниже работает везде, включая старые IE:
+
+```js
+//+ run
+var ms = Date.parse("January 26, 2011 13:51:50");
+
+alert(ms);
+```
+
+Вы также можете почитать о старых форматах IE в документации к методу  <a href="http://msdn.microsoft.com/en-us/library/k4w173wk%28v=vs.85%29.aspx">MSDN Date.parse</a>. 
+
+Конечно же, сейчас лучше использовать современный формат. Если же нужна поддержка IE8-, то метод `Date.parse`, как и ряд других современных методов, добавляется библиотекой [es5-shim](https://github.com/kriskowal/es5-shim).
+[/smart]
+
+## Метод Date.now()
+
+Метод `Date.now()` возвращает дату сразу в виде миллисекунд.
+
+Технически, он аналогичен вызову `+new Date()`, но в отличие от него не создаёт промежуточный объект даты, а поэтому -- во много раз быстрее. 
+
+Его использование особенно рекомендуется там, где производительность при работе с датами критична. Обычно это не на веб-страницах, а, к примеру, в разработке игр на JavaScript.
+
+## Итого
+
+<ul>
+<li>Дата и время представлены в JavaScript одним объектом: [Date](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/). Создать "только время" при этом нельзя, оно должно быть с датой. Список методов `Date` вы можете найти в справочнике [Date](http://javascript.ru/Date) или выше.</li>
+<li>Отсчёт месяцев начинается с нуля.</li>
+<li>Отсчёт дней недели (для `getDay()`) тоже начинается с нуля (и это воскресенье).</li>
+<li>Объект `Date` удобен тем, что автокорректируется. Благодаря этому легко сдвигать даты.</li>
+<li>При преобразовании к числу объект `Date` даёт количество миллисекунд, прошедших с 1 января 1970 UTC. Побочное следствие -- даты можно вычитать, результатом будет разница в миллисекундах.</li>
+<li>Для получения текущей даты в миллисекундах лучше использовать `Date.now()`, чтобы не создавать лишний объект `Date` (кроме IE8-)</li>
+<li>Для бенчмаркинга лучше использовать `performance.now()` (кроме IE9-), он в 1000 раз точнее.</li>
+</ul>
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-typeof-duck-typing/1-format-date-polymorphic/_js.view/solution.js b/1-js/4-data-structures/11-typeof-duck-typing/1-format-date-polymorphic/_js.view/solution.js
new file mode 100644
index 00000000..12a379c5
--- /dev/null
+++ b/1-js/4-data-structures/11-typeof-duck-typing/1-format-date-polymorphic/_js.view/solution.js
@@ -0,0 +1,28 @@
+function formatDate(date) {
+  if (typeof date == 'number') {
+    // перевести секунды в миллисекунды и преобразовать к Date
+    date = new Date(date*1000);
+  } else if(typeof date == 'string') {
+    // разобрать строку и преобразовать к Date
+    date = date.split('-');
+    date = new Date(date[0], date[1]-1, date[2]);
+  } else if ( date.length ) { // есть длина, но не строка - значит массив
+    date = new Date(date[0], date[1], date[2]);
+  }
+  // преобразования для поддержки полиморфизма завершены, 
+  // теперь мы работаем с датой (форматируем её)
+
+  var day = date.getDate();
+  if (day < 10) day = '0' + day;
+
+  var month = date.getMonth()+1;
+  if (month < 10) month = '0' + month;
+
+  // взять 2 последние цифры года
+  var year = date.getFullYear() % 100; 
+  if (year < 10) year = '0' + year;
+  
+  var formattedDate = day + '.' + month + '.' + year;
+
+  return formattedDate;
+}
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-typeof-duck-typing/1-format-date-polymorphic/_js.view/test.js b/1-js/4-data-structures/11-typeof-duck-typing/1-format-date-polymorphic/_js.view/test.js
new file mode 100644
index 00000000..adb572fc
--- /dev/null
+++ b/1-js/4-data-structures/11-typeof-duck-typing/1-format-date-polymorphic/_js.view/test.js
@@ -0,0 +1,18 @@
+describe("formatDate", function() {
+  it("читает дату вида гггг-мм-дд из строки", function() {
+    assert.equal( formatDate( '2011-10-02' ), "02.10.11" );
+  });
+
+  it("читает дату из числа 1234567890 (миллисекунды)", function() {
+    assert.equal( formatDate( 1234567890 ), "14.02.09" );
+  });
+
+  it("читает дату из массива вида [гггг, м, д]", function() {
+    assert.equal( formatDate( [2014,0,1] ), "01.01.14" );
+  });
+
+  it("читает дату из объекта Date", function() {
+    assert.equal( formatDate( new Date(2014,0,1) ), "01.01.14" );
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/4-data-structures/11-typeof-duck-typing/1-format-date-polymorphic/solution.md b/1-js/4-data-structures/11-typeof-duck-typing/1-format-date-polymorphic/solution.md
new file mode 100644
index 00000000..c1d24900
--- /dev/null
+++ b/1-js/4-data-structures/11-typeof-duck-typing/1-format-date-polymorphic/solution.md
@@ -0,0 +1,55 @@
+Для определения примитивного типа строка/число подойдет оператор [typeof](#type-typeof).
+
+Примеры его работы:
+
+```js
+//+ run
+alert(typeof 123); // "number"
+alert(typeof "строка"); // "string"
+alert(typeof new Date()); // "object"
+alert(typeof []); // "object"
+```
+
+Оператор `typeof` не умеет различать разные типы объектов, они для него все на одно лицо: `"object"`. Поэтому он не сможет отличить `Date` от `Array`.
+
+Используем для них утиную типизацию:
+
+Функция:
+
+```js
+//+ run
+function formatDate(date) {
+  if (typeof date == 'number') {
+    // перевести секунды в миллисекунды и преобразовать к Date
+    date = new Date(date*1000);
+  } else if(typeof date == 'string') {
+    // разобрать строку и преобразовать к Date
+    date = date.split('-');
+    date = new Date(date[0], date[1]-1, date[2]);
+  } else if ( date.length ) { // есть длина, но не строка - значит массив
+    date = new Date(date[0], date[1], date[2]);
+  }
+  // преобразования для поддержки полиморфизма завершены, 
+  // теперь мы работаем с датой (форматируем её)
+
+  var day = date.getDate();
+  if (day < 10) day = '0' + day;
+
+  var month = date.getMonth()+1;
+  if (month < 10) month = '0' + month;
+
+  // взять 2 последние цифры года
+  var year = date.getFullYear() % 100; 
+  if (year < 10) year = '0' + year;
+  
+  var formattedDate = day + '.' + month + '.' + year;
+
+  return formattedDate;
+}
+
+alert( formatDate( '2011-10-02' ) );  // 02.10.11
+alert( formatDate( 1234567890 ) );  // 14.02.09
+alert( formatDate( [2014,0,1] ) ); // 01.01.14
+alert( formatDate( new Date(2014,0,1) ) ); // 01.01.14
+```
+
diff --git a/1-js/4-data-structures/11-typeof-duck-typing/1-format-date-polymorphic/task.md b/1-js/4-data-structures/11-typeof-duck-typing/1-format-date-polymorphic/task.md
new file mode 100644
index 00000000..d12a3af9
--- /dev/null
+++ b/1-js/4-data-structures/11-typeof-duck-typing/1-format-date-polymorphic/task.md
@@ -0,0 +1,26 @@
+# Полиморфная функция formatDate
+
+[importance 5]
+
+Напишите функцию `formatDate(date)`, которая возвращает дату в формате `dd.mm.yy`. 
+
+Ее первый аргумент должен содержать дату в одном из видов:
+<ol>
+<li>Как объект `Date`.</li>
+<li>Как строку в формате `yyyy-mm-dd`.</li>
+<li>Как число *секунд* с `01.01.1970`.</li>
+<li>Как массив `[гггг, мм, дд]`, месяц начинается с нуля</li>
+</ol>
+Для этого вам понадобится определить тип данных аргумента и, при необходимости, преобразовать входные данные в нужный формат.
+
+Пример работы:
+
+```js
+function formatDate(date) { /* ваш код */ }
+
+alert( formatDate( '2011-10-02' ) );  // 02.10.11
+alert( formatDate( 1234567890 ) );  // 14.02.09
+alert( formatDate( [2014,0,1] ) ); // 01.01.14
+alert( formatDate( new Date(2014,0,1) ) ); // 01.01.14
+```
+
diff --git a/1-js/4-data-structures/11-typeof-duck-typing/article.md b/1-js/4-data-structures/11-typeof-duck-typing/article.md
new file mode 100644
index 00000000..cfcfe2d4
--- /dev/null
+++ b/1-js/4-data-structures/11-typeof-duck-typing/article.md
@@ -0,0 +1,162 @@
+# Оператор typeof и утиная типизация
+
+В этой главе мы рассмотрим, как создавать *полиморфные* функции, то есть такие, которые по-разному обрабатывают аргументы, в зависимости от их типа. Например, функция вывода может по-разному форматировать числа и даты.
+
+Для реализации такой возможности нужен способ определить тип переменной. 
+
+[cut]
+Как мы знаем, существует несколько *примитивных типов*:
+<dl>
+<dt>`null`</dt>
+<dd>Специальный тип, содержит только значение `null`.</dd>
+<dt>`undefined`</dt>
+<dd>Специальный тип, содержит только значение `undefined`.</dd>
+<dt>`number`</dt>
+<dd>Числа: `0`, `3.14`, а также значения `NaN` и `Infinity`</dd>
+<dt>`boolean`</dt>
+<dd>`true`, `false`.</dd>
+<dt>`string`</dt>
+<dd>Строки, такие как `"Мяу"` или пустая строка `""`.</dd>
+</dl>
+
+Все остальные значения являются **объектами**, включая функции и массивы.
+
+## Оператор typeof [#type-typeof]
+
+Оператор `typeof` возвращает тип аргумента. У него есть два синтаксиса:
+<ol>
+<li>Синтаксис оператора: `typeof x`.</li>
+<li>Синтаксис функции: `typeof(x)`.</li>
+</ol>
+
+Работают они одинаково, но первый синтаксис короче.
+
+**Результатом `typeof` является строка, содержащая тип:**
+
+```js
+typeof undefined // "undefined" 
+
+typeof 0    // "number" 
+ 
+typeof true // "boolean" 
+
+typeof "foo" // "string" 
+
+typeof {} // "object" 
+
+*!*
+typeof null  // "object" 
+*/!*
+
+function f() { /* ... */ }
+typeof f // "function" 
+*/!*
+```
+
+Последние две строки помечены, потому что `typeof` ведет себя в них по-особому.
+
+<ol>
+<li>Результат `typeof null == "object"` -- это официально признанная ошибка в языке, которая сохраняется для совместимости.
+
+На самом деле `null` -- это не объект, а примитив. Это сразу видно, если попытаться присвоить ему свойство:
+
+```js
+//+ run
+var x = null;
+x.prop = 1;  // ошибка, т.к. нельзя присвоить свойство примитиву
+```
+
+</li>
+<li>Для функции `f` значением `typeof f` является `"function"`. На самом деле функция не является отдельным базовым типом в JavaScript, все функции являются объектами, но такое выделение функций на практике удобно, так как позволяет легко определить функцию.</li>
+</ol>
+
+**Оператор `typeof` надежно работает с примитивными типами, кроме `null`, а также с функциями. Но обычные объекты, массивы и даты для `typeof` все на одно лицо, они имеют тип `'object'`:**
+
+```js
+//+ run
+alert( typeof {} ); // 'object'
+alert( typeof [] ); // 'object'
+alert( typeof new Date ); // 'object'
+```
+
+Поэтому различить их при помощи `typeof` нельзя.
+
+## Утиная типизация
+
+Основная проблема `typeof` -- неумение различать объекты, кроме функций. Но есть и другой способ проверки типа.
+
+Так называемая "утиная типизация" основана на одной известной пословице: *"If it looks like a duck, swims like a duck and quacks like a duck, then it probably is a duck (who cares what it really is)"*.
+
+В переводе: *"Если это выглядит как утка, плавает как утка и крякает как утка, то, вероятно, это утка (какая разница, что это на самом деле)"*. 
+
+Смысл утиной типизации -- в проверке необходимых методов и свойств.
+
+Например, у нас функция работает с массивами. Мы можем проверить, что объект -- массив, уточнив наличие метода `splice`:
+
+```js
+//+ run
+var something = [1,2,3];
+
+if (something.splice) {
+  alert('Массив!');
+}
+```
+
+Обратите внимание -- в `if` мы не вызываем метод `something.splice()`, а пробуем получить само свойство `something.splice`. Для массивов оно всегда есть и является функцией, т.е. даст в логическом контексте `true`.
+
+Проверить на дату можно, определив наличие метода `getTime`:
+
+```js
+//+ run
+var x = new Date();
+
+if (x.getTime) {
+  alert('Дата!');
+}
+```
+
+С виду такая проверка хрупка, ее можно "сломать", передав похожий объект с тем же методом. 
+
+Но как раз в этом и есть смысл утиной типизации: если объект похож на массив, у него есть методы массива, то будем работать с ним как с массивом (какая разница, что это на самом деле). 
+
+## Полиморфизм
+
+Используем проверку типов для того, чтобы создать полиморфную функцию `sayHi(who)`, которая говорит "Привет" своему аргументу. 
+
+При этом, если передали массив, она должна вызвать себя для каждого подэлемента.
+
+```js
+//+ run
+function sayHi(who) {
+
+  if (who.splice) { // проверка на массив (или что-то похожее)
+    for(var i=0; i<who.length; i++) sayHi(who[i]);
+  } else {
+    alert('Привет, ' + who);
+  }
+}
+
+// Вызов с примитивным аргументом
+sayHi("Вася"); // Привет, Вася
+
+// Вызов с массивом
+sayHi( ["Саша", "Петя"] ); // Привет, Саша... Петя
+sayHi( ["Саша", "Петя", ["Маша", "Юля"] ] ); // Привет Саша..Петя..Маша..Юля
+```
+
+Обратите внимание, получилась даже поддержка вложенных массивов :). Да здравствует рекурсия! 
+
+## Итого
+
+Для написания полиморфных (это удобно!) функций нам нужна проверка типов.
+
+Для примитивов с ней отлично справляется оператор `typeof`. 
+
+У него две особенности:
+<ol>
+<li>Он считает `null` объектом, это внутренняя ошибка в языке.</li>
+<li>Для функций он возвращает `function`, по стандарту функция не считается базовым типом, но на практике это удобно и полезно.</li>
+</ol>
+
+Там, где нужно различать объекты, обычно используется утиная типизация, то есть мы смотрим, есть ли в объекте нужный метод, желательно -- тот, который мы собираемся исползовать, но это не обязательно.
+
diff --git a/1-js/4-data-structures/2-number/1-sum-interface/solution.md b/1-js/4-data-structures/2-number/1-sum-interface/solution.md
new file mode 100644
index 00000000..d42523ce
--- /dev/null
+++ b/1-js/4-data-structures/2-number/1-sum-interface/solution.md
@@ -0,0 +1,11 @@
+
+
+```js
+//+ run demo
+var a = +prompt("Введите первое число", "");
+var b = +prompt("Введите второе число", "");
+
+alert( a + b );
+```
+
+Обратите внимание на оператор `+` перед `prompt`, он сразу приводит вводимое значение к числу. Если бы его не было, то `a` и `b` были бы строками и складывались бы как строки, то есть `"1" + "2" = "12"`.
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/1-sum-interface/task.md b/1-js/4-data-structures/2-number/1-sum-interface/task.md
new file mode 100644
index 00000000..2aac44a6
--- /dev/null
+++ b/1-js/4-data-structures/2-number/1-sum-interface/task.md
@@ -0,0 +1,9 @@
+# Интерфейс суммы 
+
+[importance 5]
+
+Создайте страницу, которая предлагает ввести два числа и выводит их сумму.
+
+[demo /]
+
+P.S. Есть "подводный камень" при работе с типами.
diff --git a/1-js/4-data-structures/2-number/2-why-rounded-down/solution.md b/1-js/4-data-structures/2-number/2-why-rounded-down/solution.md
new file mode 100644
index 00000000..574bf957
--- /dev/null
+++ b/1-js/4-data-structures/2-number/2-why-rounded-down/solution.md
@@ -0,0 +1,8 @@
+Во внутреннем двоичном представлении `6.35` является бесконечной двоичной дробью. Хранится она с потерей точности.. А впрочем, посмотрим сами:
+
+```js
+//+ run
+alert( 6.35.toFixed(20) ); // 6.34999999999999964473
+```
+
+Интерпретатор видит число как `6.34...`, поэтому и округляет вниз.
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/2-why-rounded-down/task.md b/1-js/4-data-structures/2-number/2-why-rounded-down/task.md
new file mode 100644
index 00000000..203280c6
--- /dev/null
+++ b/1-js/4-data-structures/2-number/2-why-rounded-down/task.md
@@ -0,0 +1,19 @@
+# Почему 6.35.toFixed(1) == 6.3?
+
+[importance 4]
+
+В математике принято, что `5` округляется вверх, например:
+
+```js
+//+ run
+alert( 1.5.toFixed(0) ); // 2
+alert( 1.35.toFixed(1) ); // 1.4
+```
+
+Но почему в примере ниже `6.35` округляется до `6.3`?
+
+```js
+//+ run
+alert( 6.35.toFixed(1) ); // 6.3
+```
+
diff --git a/1-js/4-data-structures/2-number/3-sum-prices/solution.md b/1-js/4-data-structures/2-number/3-sum-prices/solution.md
new file mode 100644
index 00000000..e01779c0
--- /dev/null
+++ b/1-js/4-data-structures/2-number/3-sum-prices/solution.md
@@ -0,0 +1,13 @@
+Есть два основных подхода.
+<ol>
+<li>Можно хранить сами цены в "копейках" (центах и т.п.). Тогда они всегда будут целые и проблема исчезнет. Но при показе и при обмене данными нужно будет это учитывать и не забывать делить на 100.</li>
+<li>При операциях, когда необходимо получить окончательный результат -- округлять до 2го знака после запятой. Все, что дальше -- ошибка округления:
+
+```js
+//+ run
+var price1 = 0.1, price2 = 0.2;
+alert( +(price1 + price2).toFixed(2) );
+```
+
+</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/3-sum-prices/task.md b/1-js/4-data-structures/2-number/3-sum-prices/task.md
new file mode 100644
index 00000000..02118152
--- /dev/null
+++ b/1-js/4-data-structures/2-number/3-sum-prices/task.md
@@ -0,0 +1,16 @@
+# Сложение цен
+
+[importance 5]
+
+Представьте себе электронный магазин. Цены даны с точностью до копейки(цента, евроцента и т.п.). 
+
+Вы пишете интерфейс для него. Основная работа происходит на сервере, но и на клиенте все должно быть хорошо. Сложение цен на купленные товары и умножение их на количество является обычной операцией.
+
+Получится глупо, если при заказе двух товаров с ценами `0.10$` и `0.20$` человек получит общую стоимость `0.30000000000000004$`:
+
+```js
+//+ run
+alert( 0.1 + 0.2 + '$' );
+```
+
+Что можно сделать, чтобы избежать проблем с ошибками округления? 
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/4-endless-loop-error/solution.md b/1-js/4-data-structures/2-number/4-endless-loop-error/solution.md
new file mode 100644
index 00000000..ef44f68b
--- /dev/null
+++ b/1-js/4-data-structures/2-number/4-endless-loop-error/solution.md
@@ -0,0 +1,14 @@
+Потому что `i` никогда не станет равным `10`.
+
+Запустите, чтобы увидеть *реальные* значения `i`:
+
+```js
+//+ run
+var i = 0;
+while(i < 11) { 
+  i += 0.2;
+  if (i>9.8 && i<10.2) alert(i);
+}
+```
+
+Ни одно из них в точности не равно `10`. 
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/4-endless-loop-error/task.md b/1-js/4-data-structures/2-number/4-endless-loop-error/task.md
new file mode 100644
index 00000000..e0b500a5
--- /dev/null
+++ b/1-js/4-data-structures/2-number/4-endless-loop-error/task.md
@@ -0,0 +1,13 @@
+# Бесконечный цикл по ошибке
+
+[importance 4]
+
+Этот цикл - бесконечный. Почему?
+
+```js
+var i = 0;
+while(i != 10) { 
+  i += 0.2;
+}
+```
+
diff --git a/1-js/4-data-structures/2-number/5-get-decimal/_js.view/solution.js b/1-js/4-data-structures/2-number/5-get-decimal/_js.view/solution.js
new file mode 100644
index 00000000..3b1a71d2
--- /dev/null
+++ b/1-js/4-data-structures/2-number/5-get-decimal/_js.view/solution.js
@@ -0,0 +1,7 @@
+function getDecimal(num) {
+  var str = "" + num;
+  var zeroPos = str.indexOf(".");
+  if (zeroPos == -1) return 0;
+  str = str.slice( zeroPos );
+  return +str;
+}
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/5-get-decimal/_js.view/test.js b/1-js/4-data-structures/2-number/5-get-decimal/_js.view/test.js
new file mode 100644
index 00000000..2a759a5c
--- /dev/null
+++ b/1-js/4-data-structures/2-number/5-get-decimal/_js.view/test.js
@@ -0,0 +1,21 @@
+describe("getDecimal", function() {
+  it("возвращает дробную часть 1.2 как 0.2", function() {
+    assert.equal( getDecimal(1.2), 0.2 );
+  });
+
+  it("возвращает дробную часть 1.3 как 0.3", function() {
+    assert.equal( getDecimal(1.3), 0.3 );
+  });
+
+  it("возвращает дробную часть 12.345 как 0.345", function() {
+    assert.equal( getDecimal(12.345), 0.345 );
+  });
+
+  it("возвращает дробную часть -1.2 как 0.2", function() {
+    assert.equal( getDecimal(-1.2), 0.2 );
+  });
+
+  it("возвращает дробную часть 5 как 0", function() {
+    assert.equal( getDecimal(5), 0 );
+  });
+});
diff --git a/1-js/4-data-structures/2-number/5-get-decimal/solution.md b/1-js/4-data-structures/2-number/5-get-decimal/solution.md
new file mode 100644
index 00000000..65cd4bc8
--- /dev/null
+++ b/1-js/4-data-structures/2-number/5-get-decimal/solution.md
@@ -0,0 +1,82 @@
+# Функция
+
+Первая идея может быть такой:
+
+```js
+//+ run
+function getDecimal(num) {
+  return num - Math.floor(num);
+}
+
+alert( getDecimal(12.5) ); // 0.5
+*!*
+alert( getDecimal(-1.2) ); // 0.8, неверно!
+*/!*
+```
+
+Как видно из примера выше, для отрицательных чисел она не работает. 
+
+Это потому, что округление `Math.floor` происходит всегда к ближайшему меньшему целому, то есть `Math.floor(-1.2) = -2`, а нам бы хотелось убрать целую часть, т.е. получить `-1`.
+
+Можно попытаться решить проблему так:
+
+```js
+//+ run
+function getDecimal(num) {
+  return num > 0 ? num - Math.floor(num) : Math.ceil(num) - num;
+}
+
+alert( getDecimal(12.5) ); // 0.5
+*!*
+alert( getDecimal(-1.2) ); // 0.19999999999999996, неверно!
+alert( getDecimal(1.2) ); // 0.19999999999999996
+*/!*
+```
+
+Проблема с отрицательными числами решена, но результат, увы, не совсем тот.
+
+Внутреннее неточное представление чисел приводит к ошибке в вычислениях, которая проявляется при работе и с положительными и с отрицательными числами.
+
+Давайте попробуем ещё вариант -- получим остаток при делении на `1`. При таком делении от любого числа в остатке окажется именно дробная часть:
+
+```js
+//+ run
+function getDecimal(num) {
+  return num > 0 ? (num % 1) : (-num % 1);
+}
+
+alert( getDecimal(12.5) ); // 0.5
+*!*
+alert( getDecimal(1.2) ); // 0.19999999999999996, неверно!
+*/!*
+```
+
+В общем-то, работает, функция стала короче, но, увы, ошибка сохранилась.
+
+Что делать?
+
+Увы, операции с десятичными дробями подразумевают некоторую потерю точности. 
+
+Зависит от ситуации. 
+<ul>
+<li>Если внешний вид числа неважен и ошибка в вычислениях допустима -- она ведь очень мала, то можно оставить как есть.</li>
+<li>Перейти на промежуточные целочисленные вычисления там, где это возможно.</li>
+<li>Если мы знаем, что десятичная часть жёстко ограничена, к примеру, может содержать не более 2 знаков то можно округлить число, то есть вернуть `+num.toFixed(2)`.</li>
+</ul>
+
+Если эти варианты не подходят, то можно работать с числом как со строкой:
+
+```js
+//+ run
+function getDecimal(num) {
+  var str = "" + num;
+  var zeroPos = str.indexOf(".");
+  if (zeroPos == -1) return 0;
+  str = str.slice( zeroPos );
+  return +str;
+}
+
+alert( getDecimal(12.5) ); // 0.5
+alert( getDecimal(1.2) ); // 0.2
+```
+
diff --git a/1-js/4-data-structures/2-number/5-get-decimal/task.md b/1-js/4-data-structures/2-number/5-get-decimal/task.md
new file mode 100644
index 00000000..ec77059b
--- /dev/null
+++ b/1-js/4-data-structures/2-number/5-get-decimal/task.md
@@ -0,0 +1,12 @@
+# Как получить дробную часть числа? 
+
+[importance 4]
+
+Напишите функцию `getDecimal(num)`, которая возвращает десятичную часть числа:
+
+```js
+alert( getDecimal(12.345) ); // 0.345
+alert( getDecimal(1.2) ); // 0.2
+alert( getDecimal(-1.2) ); // 0.2
+```
+
diff --git a/1-js/4-data-structures/2-number/6-formula-binet/solution.md b/1-js/4-data-structures/2-number/6-formula-binet/solution.md
new file mode 100644
index 00000000..d6628450
--- /dev/null
+++ b/1-js/4-data-structures/2-number/6-formula-binet/solution.md
@@ -0,0 +1,33 @@
+
+
+```js
+//+ run
+function fibBinet(n) {
+  var phi = (1 + Math.sqrt(5)) / 2;
+  // используем Math.round для округления до ближайшего целого
+  return Math.round( Math.pow(phi, n) / Math.sqrt(5) );
+}
+
+function fib(n){
+  var a=1, b=0, x;
+  for(i=0; i<n; i++) {
+    x = a+b;
+    a = b
+    b = x;
+  }
+  return b;
+}
+
+alert( fibBinet(2) ); // 1, равно fib(2) 
+alert( fibBinet(8) ); // 21, равно fib(8)
+*!*
+alert( fibBinet(77)); // 5527939700884755
+alert( fib(77) ); // 5527939700884757, не совпадает!
+*/!*
+```
+
+**Результат вычисления <code>F<sub>77</sub></code> получился неверным!** 
+
+Причина -- в ошибках округления, ведь √5 -- бесконечная дробь. 
+
+Ошибки округления при вычислениях множатся и, в итоге, дают расхождение.
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/6-formula-binet/task.md b/1-js/4-data-structures/2-number/6-formula-binet/task.md
new file mode 100644
index 00000000..80d4b9ad
--- /dev/null
+++ b/1-js/4-data-structures/2-number/6-formula-binet/task.md
@@ -0,0 +1,27 @@
+# Формула Бине
+
+[importance 4]
+
+Последовательность [чисел Фибоначчи](http://ru.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%B0_%D0%A4%D0%B8%D0%B1%D0%BE%D0%BD%D0%B0%D1%87%D1%87%D0%B8) имеет формулу <code>F<sub>n</sub> = F<sub>n-1</sub> + F<sub>n-2</sub></code>. То есть, следующее число получается как сумма двух предыдущих.
+
+Первые два числа равны `1`, затем `2(1+1)`, затем `3(1+2)`, `5(2+3)` и так далее: `1, 1, 2, 3, 5, 8, 13, 21...`.
+
+Код для их вычисления (из задачи [](/task/fibonacci-numbers)):
+
+```js
+function fib(n){
+  var a=1, b=0, x;
+  for(i=0; i<n; i++) {
+    x = a+b;
+    a = b
+    b = x;
+  }
+  return b;
+}
+```
+
+Существует [формула Бине](http://ru.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%B0_%D0%A4%D0%B8%D0%B1%D0%BE%D0%BD%D0%B0%D1%87%D1%87%D0%B8#.D0.A4.D0.BE.D1.80.D0.BC.D1.83.D0.BB.D0.B0_.D0.91.D0.B8.D0.BD.D0.B5), согласно которой <code>F<sub>n</sub></code> равно ближайшему целому для  <code>ϕ<sup>n</sup>/√5</code>, где <code>ϕ=(1+√5)/2</code> -- золотое сечение.
+
+Напишите функцию `fibBinet(n)`, которая будет вычислять <code>F<sub>n</sub></code>, используя эту формулу. Проверьте её для значения <code>F<sub>77</sub></code> (должно получиться  `fibBinet(77) = 5527939700884757`).
+
+**Одинаковы ли результаты, полученные при помощи кода `fib(n)` выше и по формуле Бине? Если нет, то почему и какой из них верный?**
\ No newline at end of file
diff --git a/1-js/4-data-structures/2-number/7-random-0-max/solution.md b/1-js/4-data-structures/2-number/7-random-0-max/solution.md
new file mode 100644
index 00000000..fef2bf9c
--- /dev/null
+++ b/1-js/4-data-structures/2-number/7-random-0-max/solution.md
@@ -0,0 +1,9 @@
+Сгенерируем значение в диапазоне `0..1` и умножим на `max`:
+
+```js
+//+ run
+var max = 10;
+
+alert( Math.random()*max );
+```
+
diff --git a/1-js/4-data-structures/2-number/7-random-0-max/task.md b/1-js/4-data-structures/2-number/7-random-0-max/task.md
new file mode 100644
index 00000000..a7175b55
--- /dev/null
+++ b/1-js/4-data-structures/2-number/7-random-0-max/task.md
@@ -0,0 +1,5 @@
+# Случайное из интервала (0, max)
+
+[importance 2]
+
+Напишите код для генерации случайного значения в диапазоне от `0` до `max`, не включая `max`.
diff --git a/1-js/4-data-structures/2-number/8-random-min-max/solution.md b/1-js/4-data-structures/2-number/8-random-min-max/solution.md
new file mode 100644
index 00000000..896d6ff6
--- /dev/null
+++ b/1-js/4-data-structures/2-number/8-random-min-max/solution.md
@@ -0,0 +1,9 @@
+Сгенерируем значение из интервала `0..max-min`, а затем сдвинем на `min`:
+
+```js
+//+ run
+var min=5, max = 10;
+
+alert( min + Math.random()*(max-min) );
+```
+
diff --git a/1-js/4-data-structures/2-number/8-random-min-max/task.md b/1-js/4-data-structures/2-number/8-random-min-max/task.md
new file mode 100644
index 00000000..e5e8bf18
--- /dev/null
+++ b/1-js/4-data-structures/2-number/8-random-min-max/task.md
@@ -0,0 +1,5 @@
+# Случайное из интервала (min, max)
+
+[importance 2]
+
+Напишите код для генерации случайного числа от  `min` до `max`, не включая `max`.
diff --git a/1-js/4-data-structures/2-number/9-random-int-min-max/solution.md b/1-js/4-data-structures/2-number/9-random-int-min-max/solution.md
new file mode 100644
index 00000000..09584440
--- /dev/null
+++ b/1-js/4-data-structures/2-number/9-random-int-min-max/solution.md
@@ -0,0 +1,78 @@
+# Очевидное неверное решение (round)
+
+Самый простой, но неверный способ -- это сгенерировать значение в интервале `min..max` и округлить его `Math.round`, вот так:
+
+```js
+//+ run
+function randomInteger(min, max) {
+  var rand = min + Math.random()*(max-min)
+  rand = Math.round(rand);
+  return rand;
+}
+
+alert( randomInteger(1, 3) );
+```
+
+Эта функция работает. Но при этом она некорректна: вероятность получить крайние значения `min` и `max` будет в два раза меньше, чем любые другие. 
+
+При многократном запуске этого кода вы легко заметите, что `2` выпадает чаще всех.
+
+Это происходит из-за того, что `Math.round()`  получает разнообразные случайные числа из интервала от `1` до `3`, но при округлении до ближайшего целого получится, что:
+
+```js
+значения из диапазона 1   ... 1.49999..  станут 1
+значения из диапазона 1.5 ... 2.49999..  станут 2 
+значения из диапазона 2.5 ... 2.99999..  станут 3
+```
+
+Отсюда явно видно, что в `1` (как и `3`) попадает диапазон значений в два раза меньший, чем в `2`. Из-за этого такой перекос.
+
+# Верное решение с round
+
+Правильный способ: `Math.round(случайное от min-0.5 до max+0.5)`
+
+```js
+//+ run
+*!*
+function randomInteger(min, max) {
+  var rand = min - 0.5 + Math.random()*(max-min+1)
+  rand = Math.round(rand);
+  return rand;
+}
+*/!*
+
+alert( randomInteger(5, 10) );
+```
+
+В этом случае диапазон будет тот же (`max-min+1`), но учтена механика округления `round`.
+
+# Решение с floor
+
+Альтернативный путь - применить округление `Math.floor()` к случайному числу от `min` до `max+1`. 
+
+Например, для генерации целого числа от `1` до `3`, создадим вспомогательное случайное значение от `1` до `4` (не включая `4`).
+
+Тогда `Math.floor()` округлит их так:
+
+```js
+1 ... 1.999+ станет 1
+2 ... 2.999+ станет 2
+3 ... 3.999+ станет 3
+```
+
+Все диапазоны одинаковы.
+Итак, код:
+
+```js
+//+ run
+*!*
+function randomInteger(min, max) {
+  var rand = min + Math.random() * (max+1-min); 
+  rand = Math.floor(rand); 
+  return rand;
+}
+*/!*
+
+alert( randomInteger(5, 10) );
+```
+
diff --git a/1-js/4-data-structures/2-number/9-random-int-min-max/task.md b/1-js/4-data-structures/2-number/9-random-int-min-max/task.md
new file mode 100644
index 00000000..7f747a25
--- /dev/null
+++ b/1-js/4-data-structures/2-number/9-random-int-min-max/task.md
@@ -0,0 +1,7 @@
+# Случайное целое от min до max
+
+[importance 2]
+
+Напишите функцию `randomInteger(min, max)` для генерации случайного **целого** числа между `min` и `max`, включая `min,max` как возможные значения.
+
+Любое число из интервала `min..max` должно иметь одинаковую вероятность. 
diff --git a/1-js/4-data-structures/2-number/article.md b/1-js/4-data-structures/2-number/article.md
new file mode 100644
index 00000000..2787ce9d
--- /dev/null
+++ b/1-js/4-data-structures/2-number/article.md
@@ -0,0 +1,615 @@
+# Числа
+
+Все числа в JavaScript, как целые так и дробные, имеют тип `Number` и хранятся в 64-битном формате [IEEE-754](http://en.wikipedia.org/wiki/IEEE_754-1985), также известном как  "double precision". 
+
+Здесь мы рассмотрим различные тонкости, связанные с работой с числами в JavaScript.
+
+## Способы записи
+
+В JavaScript можно записывать числа не только в десятичной, но и в шестнадцатеричной (начинается с `0x`), а также восьмеричной (начинается с `0`) системах счисления:
+
+```js
+//+ run
+alert( 0xFF ); // 255 в шестнадцатиричной системе
+alert( 010 ); // 8 в восьмеричной системе
+```
+
+Также доступна запись в *"научном формате"* (ещё говорят "запись с плавающей точкой"), который выглядит как `<число>e<кол-во нулей>`.
+
+Например, `1e3` -- это `1` с `3` нулями, то есть `1000`.
+
+```js
+//+ run
+// еще пример научной формы: 3 с 5 нулями
+alert( 3e5 );  // 300000
+```
+
+Если количество нулей отрицательно, то число сдвигается вправо за десятичную точку, так что получается десятичная дробь:
+
+```js
+//+ run
+// здесь 3 сдвинуто 5 раз вправо, за десятичную точку.
+alert( 3e-5 ); // 0.00003  <-- 5 нулей, включая начальный ноль
+```
+
+## Деление на ноль, Infinity   
+
+Представьте, что вы собираетесь создать новый язык... Люди будут называть его "JavaScript" (или LiveScript... неважно).
+
+Что должно происходить при попытке деления на ноль?
+
+Как правило, ошибка в программе... Во всяком случае, в большинстве языков программирования это именно так.
+
+Но создатель JavaScript решил пойти математически правильным путем. Ведь чем меньше делитель, тем больше результат. При делении на очень-очень маленькое число должно получиться очень большое. В математическом анализе это описывается через [пределы](http://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%B5%D0%B4%D0%B5%D0%BB_(%D0%BC%D0%B0%D1%82%D0%B5%D0%BC%D0%B0%D1%82%D0%B8%D0%BA%D0%B0&#041;), и если подразумевать предел, то в качестве результата деления на `0` мы получаем "бесконечность", которая обозначается символом `∞` или, в JavaScript: `"Infinity"`.
+
+```js
+//+ run
+alert(1/0);  // Infinity
+alert(12345/0); // Infinity
+```
+
+**`Infinity` -- особенное численное значение, которое ведет себя в точности как математическая бесконечность `∞`.**
+<ul>
+<li>`Infinity` больше любого числа.</li>
+<li>Добавление к бесконечности не меняет её.</li>
+</ul>
+
+```js
+//+ run
+alert(Infinity > 1234567890); // true
+alert(Infinity + 5 == Infinity);  // true
+```
+
+**Бесконечность можно присвоить и в явном виде: `var x = Infinity`.**
+
+Бывает и минус бесконечность `-Infinity`:
+
+```js
+//+ run
+alert( -1 / 0 ); // -Infinity
+```
+
+Бесконечность можно получить также, если сделать ну очень большое число, для которого количество разрядов в двоичном представлении не помещается в соответствующую часть стандартного 64-битного формата, например:
+
+```js
+//+ run
+alert( 1e500 ); // Infinity
+```
+
+## NaN   
+
+Если математическая операция не может быть совершена, то возвращается специальное значение `NaN` (Not-A-Number).
+
+Например, деление `0/0` в математическом смысле неопределено, поэтому возвращает `NaN`:
+
+```js
+//+ run
+alert( 0 / 0 );  // NaN
+```
+
+Значение `NaN` используется для обозначения математической ошибки и обладает следующими свойствами:
+
+<ul>
+<li>Значение `NaN` -- единственное, в своем роде, которое *не равно ничему, включая себя*.
+
+Следующий код ничего не выведет:
+
+```js
+//+ run
+if (NaN == NaN) alert("=="); // Ни один вызов
+if (NaN === NaN) alert("==="); // не сработает
+```
+
+</li>
+<li>Значение `NaN` можно проверить специальной функцией `isNaN(n)`, которая возвращает `true` если аргумент -- `NaN` и `false` для любого другого значения.
+
+```js
+//+ run
+var n = 0/0;
+
+alert( isNaN(n) ); // true
+```
+
+[smart]
+Отсюда вытекает забавный способ проверки значения на `NaN`: можно проверить его на равенство самому себе, вот так:
+
+```js
+//+ run
+var n = 0/0;
+
+if (n !== n) alert('n = NaN!');
+```
+
+Это работает, но для наглядности лучше использовать `isNaN(n)`. 
+[/smart]
+</li>
+<li>Значение `NaN` "прилипчиво". Любая операция с `NaN` возвращает `NaN`.
+
+```js
+//+ run
+alert( NaN + 1 ); // NaN
+```
+
+</li>
+</ul>
+
+Если аргумент `isNaN` -- не число, то он автоматически преобразуется к числу.
+
+
+[summary]Никакие математические операции в JavaScript не могут привести к ошибке или "обрушить" программу. 
+
+В худшем случае, результат будет `NaN`.
+[/summary]
+
+## isFinite(n)
+
+Итак, в JavaScript есть обычные числа и три специальных числовых значения: `NaN`, `Infinity` и `-Infinity`.
+
+**Функция `isFinite(n)` возвращает `true` только тогда, когда `n` -- обычное число, а не одно из этих значений:**
+
+```js
+//+ run
+alert( isFinite(1) ); // true
+alert( isFinite(Infinity) ); // false
+alert( isFinite(NaN) ); // false
+```
+
+Если аргумент `isFinite` -- не число, то он автоматически преобразуется к числу.
+
+
+## Преобразование к числу 
+
+Строгое преобразование можно осуществить унарным плюсом `'+'`:
+
+```js
+//+ run
+var s = "12.34"; 
+alert( +s );  // 12.34
+```
+
+*Строгое* -- означает, что если строка не является в точности числом, то результат будет `NaN`:
+
+```js
+//+ run
+alert( +"12test" );  // NaN
+```
+
+Единственное исключение -- пробельные символы в начале и в конце строки, которые игнорируются:
+
+```js
+//+ run
+alert( +"  -12");  // -12
+alert( +" \n34  \n"); // 34, перевод строки \n является пробельным символом
+alert( +"" ); // 0, пустая строка становится нулем
+alert( +"1 2" ); // NaN, пробел посередине числа - ошибка
+```
+
+Аналогичным образом происходит преобразование и в других математических операторах и функциях:
+
+```js
+//+ run
+alert( '12.34' / "-2" );  // -6.17
+```
+
+### isNaN -- проверка на число для строк
+
+Функция `isNaN` является математической, она преобразует аргумент в число, а затем проверяет, `NaN` это или нет. 
+
+Поэтому можно использовать ее для проверки:
+
+```js
+//+ run
+var x = "-11.5";
+if (isNaN(x)) {
+  alert("Строка преобразовалась в NaN. Не число");  
+} else {
+  alert("Число"); 
+}
+```
+
+Единственный тонкий момент -- в том, что пустая строка и строка из пробельных символов преобразуются к `0`:
+
+```js
+//+ run
+alert(isNaN(" \n\n  ")) // false, т.к. строка из пробелов преобразуется к 0
+```
+
+В случае, если применить такую проверку не к строке, то могут быть сюрпризы, в частности `isNaN` посчитает числами значения `false, true, null`, так как они хотя и не числа, но преобразуются к ним:
+
+```js
++false = 0 // isNaN(false) преобразует false в число, получится 0 - ок
++true = 1  // тоже ок
++null = 0  // тоже ок
++undefined = NaN;  // а вот это точно не число
+```
+
+## Мягкое преобразование: parseInt и parseFloat   
+
+В мире HTML/CSS многие значения не являются в точности числами. Например, метрики CSS: `10pt` или `-12px`.
+
+Оператор `'+'` для таких значений возвратит `NaN`:
+
+```js
+//+ run
+alert( +"12px" ) // NaN
+```
+
+Для удобного чтения таких значений существует функция `parseInt`:
+
+```js
+//+ run
+alert( parseInt('12px') ); // 12
+```
+
+**`parseInt` и ее аналог `parseFloat` преобразуют строку символ за символом, пока это возможно.** 
+
+При возникновении ошибки возвращается число, которое получилось. `parseInt` читает из строки целое число, а `parseFloat` -- дробное.
+
+```js
+//+ run
+alert( parseInt('12px') ) // 12, ошибка на символе 'p' 
+alert( parseFloat('12.3.4') ) // 12.3, ошибка на второй точке
+```
+
+Конечно, существуют ситуации, когда `parseInt/parseFloat` возвращают `NaN`. Это происходит при ошибке на первом же символе:
+
+```js
+//+ run
+alert( parseInt('a123') ); // NaN
+```
+
+[warn header="Ошибка `parseInt('0..')`"]
+
+`parseInt` (но не `parseFloat`) понимает 16-ричную систему счисления:
+
+```js
+//+ run
+alert( parseInt('0xFF') ) // 255
+```
+
+В старом стандарте JavaScript он умел понимать и восьмеричную:
+
+```js
+//+ run
+alert( parseInt('010') )  // в некоторых браузерах 8
+```
+
+Если вы хотите быть уверенным, что число, начинающееся с нуля, будет интерпретировано верно -- используйте второй необязательный аргумент `parseInt` -- основание системы счисления:
+
+```js
+//+ run
+alert( parseInt('010', 10) ); // во всех браузерах 10
+```
+
+[/warn]
+
+## Проверка на число для всех типов
+
+Если вам нужна действительно точная проверка на число, которая не считает числом строку из пробелов, логические и специальные значения -- используйте следующую функцию `isNumeric`:
+
+```js
+function isNumeric(n) {
+  return !isNaN(parseFloat(n)) && isFinite(n);
+}
+```
+
+Разберёмся, как она работает. Начнём справа.
+
+<ul>
+<li>Функция `isFinite(n)` преобразует аргумент к числу и возвращает `true`, если это не `Infinity/-Infinity/NaN`. 
+
+Таким образом, правая часть отсеет заведомо не-числа, но оставит такие значения как `true/false/null` и пустую строку `''`, т.к. они корректно преобразуются в числа.
+</li>
+<li>Для их проверки нужна левая часть. Вызов `parseFloat(true/false/null/'')` вернёт `NaN` для этих значений.
+
+Так устроена функция `parseFloat`: она преобразует аргумент к строке, т.е. `true/false/null` становятся `"true"/"false"/"null"`, а затем считывает из неё число, при этом пустая строка даёт `NaN`.</li>
+</ul>
+
+В результате отсеивается всё, кроме строк-чисел и обычных чисел.
+
+## toString(система счисления)
+
+Как показано выше, числа можно записывать не только в 10-чной, но и в 16-ричной системе. Но бывает и противоположная задача: получить 16-ричное представление числа. Для этого используется метод `toString(основание системы)`, например:
+
+```js
+//+ run
+var n = 255;
+
+alert( n.toString(16) ); // ff
+```
+
+Основание может быть любым от `2` до `36`. 
+
+<ul>
+<li>Основание `2` бывает полезно для отладки битовых операций, которые мы пройдём чуть позже:
+
+```js
+//+ run
+var n = 4;
+alert( n.toString(2) ); // 100
+```
+
+</li>
+<li>Основание `36` (по количеству букв в английском алфавите -- 26, вместе с цифрами, которых 10) используется для того, чтобы "кодировать" число в виде буквенно-цифровой строки. В этой системе счисления сначала используются цифры, а затем буквы от `a` до `z`:
+
+```js
+//+ run
+var n = 1234567890;
+alert( n.toString(36) ); // kf12oi
+```
+
+При помощи такого кодирования можно сделать длинный цифровой идентификатор короче, чтобы затем использовать его в URL.
+</li>
+</ul>
+
+
+
+
+## Округление
+
+Одна из самых частых операций с числом -- округление. В JavaScript существуют целых 3 функции для этого.
+
+<dl>
+<dt>`Math.floor`</dt>
+<dd>Округляет вниз</dd>
+<dt>`Math.ceil`</dt>
+<dd>Округляет вверх</dd>
+<dt>`Math.round`</dt>
+<dd>Округляет до ближайшего целого</dd>
+</dl>
+
+```js
+//+ run
+alert( Math.floor(3.1) );  // 3
+alert( Math.ceil(3.1) );   // 4
+alert( Math.round(3.1) );  // 3
+```
+
+[smart header="Округление битовыми операторами"]
+[Битовые операторы](/bitwise-operators) делают любое число 32-битным целым, обрезая десятичную часть.
+
+В результате побитовая операция, которая не изменяет число, например, двойное битовое НЕ -- округляет его:
+
+```js
+//+ run
+alert( ~~12.3 );  // 12
+```
+
+Любая побитовая операция такого рода подойдет, например XOR (исключающее ИЛИ, `"^"`) с нулем:
+
+```js
+//+ run
+alert( 12.3 ^ 0 );  // 12
+alert( 1.2 + 1.3 ^ 0); // 2, приоритет ^ меньше, чем +
+```
+
+Это удобно в первую очередь тем, что легко читается и не заставляет ставить дополнительные скобки как `Math.floor(...)`:
+
+```js
+var x = a * b / c ^ 0; // читается так: "a*b/c *!*и округлить*/!*"
+```
+
+[/smart]
+
+### Округление до заданной точности
+   
+Обычный трюк -- это умножить и поделить на 10 с нужным количеством нулей. Например, округлим `3.456` до 2го знака после запятой:
+
+```js
+//+ run
+var n = 3.456;
+alert( Math.round( n * 100 ) / 100 );  // 3.456 -> 345.6 -> 346 -> 3.46
+```
+
+Таким образом можно округлять число и вверх и вниз.
+
+### num.toFixed(precision)   
+
+Существует специальный метод `num.toFixed(precision)`, который округляет число `num` до точности `precision` и возвращает результат *в виде строки*:
+
+```js
+//+ run
+var n = 12.34;
+alert( n.toFixed(1) ); // "12.3"
+```
+
+Округление идёт до ближайшего значения, аналогично `Math.round`:
+
+```js
+//+ run
+var n = 12.36;
+alert( n.toFixed(1) ); // "12.4"
+```
+
+Итоговая строка, при необходимости, дополняется нулями до нужной точности:
+
+```js
+//+ run
+var n = 12.34;
+alert( n.toFixed(5) ); // "12.34000", добавлены нули до 5 знаков после запятой
+```
+
+Если нам нужно именно число, то мы можем получить его, применив `'+'` к результату `n.toFixed(..)`:
+
+```js
+//+ run
+var n = 12.34;
+alert( +n.toFixed(5) ); // 12.34
+```
+
+[warn header="Метод `toFixed` не эквивалентен `Math.round`!"]
+Например, произведём округление до одного знака после запятой с использованием двух способов:
+
+```js
+//+ run
+var price = 6.35;
+
+alert( price.toFixed(1) ); // 6.3
+alert( Math.round(price*10)/10 ); // 6.4
+```
+
+Как видно, результат разный! Вариант округления через `Math.round` получился более корректным, так как по общепринятым правилам `5` округляется вверх. А `toFixed` может округлить его как вверх, так и вниз. Почему? Скоро узнаем!
+[/warn]
+
+
+## Неточные вычисления 
+
+Запустите этот пример:
+
+```js
+//+ run
+alert(0.1 + 0.2 == 0.3);
+```
+
+Запустили? Если нет -- все же сделайте это.
+
+Ок, вы запустили его. Результат несколько странный, не так ли? Возможно, ошибка в браузере? Поменяйте браузер, запустите еще раз.
+
+Хорошо, теперь мы можем быть уверены: `0.1 + 0.2` это не `0.3`. Но тогда что же это?
+
+```js
+//+ run
+alert(0.1 + 0.2); // 0.30000000000000004
+```
+
+Как видите, произошла небольшая вычислительная ошибка.
+
+Дело в том, что в стандарте IEEE 754 на число выделяется ровно 8 байт(=64 бита), не больше и не меньше. 
+
+Число `0.1 (=1/10)` короткое в десятичном формате, а в двоичной системе счисления это бесконечная дробь ([перевод десятичной дроби в двоичную систему](http://www.klgtu.ru/students/literature/inf_asu/1760.html)). Также бесконечной дробью является `0.2 (=2/10)`.
+
+Двоичное значение бесконечных дробей хранится только до определенного знака, поэтому возникает неточность. Это даже можно увидеть:
+
+```js
+//+ run
+alert( 0.1.toFixed(20) );  // 0.10000000000000000555
+```
+
+Когда мы складываем `0.1` и `0.2`, то две неточности складываются, получаем третью.
+
+Конечно, это не означает, что точные вычисления для таких чисел невозможны. Они возможны. И даже необходимы.
+
+Например, есть два способа сложить `0.1` и `0.2`:
+<ol>
+<li>Сделать их целыми, сложить, а потом поделить:
+
+```js
+//+ run
+alert( (0.1*10 + 0.2*10) / 10 ); // 0.3
+```
+
+Это работает, т.к. числа `0.1*10 = 1` и `0.2*10 = 2` могут быть точно представлены в двоичной системе.
+</li>
+<li>Сложить, а затем округлить до разумного знака после запятой. Округления до 10-го знака обычно бывает достаточно, чтобы отсечь ошибку вычислений:
+
+```js
+//+ run
+var result = 0.1 + 0.2;
+alert( +result.toFixed(10) ); // 0.3
+```
+
+</li>
+</ol>
+
+
+
+[smart header="Забавный пример"]
+Привет! Я -- число, растущее само по себе!
+
+```js
+//+ run
+alert(9999999999999999);
+```
+
+Причина та же -- потеря точности. 
+
+Из `64` бит, отведённых на число, сами цифры числа занимают до `52` бит, остальные `11` бит хранят позицию десятичной точки и один бит -- знак. Так что если `52` бит не хватает на цифры, то при записи пропадут младшие разряды.
+
+Интерпретатор не выдаст ошибку, но в результате получится "не совсем то число", что мы и видим в примере выше. Как говорится: "как смог, так записал".
+
+[/smart]
+
+Ради справедливости заметим, что в точности то же самое происходит в любом другом языке, где используется формат IEEE 754, включая Java, C, PHP, Ruby, Perl. 
+
+## Другие математические методы 
+
+JavaScript предоставляет базовые тригонометрические и некоторые другие функции для работы с числами.
+
+### Тригонометрия 
+
+Встроенные функции для тригонометрических вычислений:
+
+<dl>
+<dt>`Math.acos(x)`</dt>
+<dd>Возвращает арккосинус `x` (в радианах)</dd>
+<dt>`Math.asin(x)`</dt>
+<dd>Возвращает арксинус `x` (в радианах)</dd>
+<dt>`Math.atan`</dt>
+<dd>Возвращает арктангенс `x` (в радианах)</dd>
+<dt>`Math.atan2(y, x)`</dt>
+<dd>Возвращает угол до точки `(y, x)`. Описание функции: [Atan2](http://en.wikipedia.org/wiki/Atan2).</dd>
+<dt>`Math.sin(x)`</dt>
+<dd>Вычисляет синус `x` (в радианах)</dd>
+<dt>`Math.cos(x)`</dt>
+<dd>Вычисляет косинус `x` (в радианах)</dd>
+<dt>`Math.tan(x)`</dt>
+<dd>Возвращает тангенс `x` (в радианах)</dd>
+</dl>
+
+### Функции общего назначения
+
+Разные полезные функции:
+<dl>
+<dt>`Math.sqrt(x)`</dt>
+<dd>Возвращает квадратный корень из `x`.</dd>
+<dt>`Math.log(x)`</dt>
+<dd>Возвращает натуральный (по основанию <code>e</code>) логарифм `x`.</dd>
+<dt>`Math.pow(x, exp)`</dt>
+<dd>Возводит число в степень, возвращает <code>x<sup>exp</sup></code>, например `Math.pow(2,3) = 8`. Работает в том числе с дробными и отрицательными степенями, например: `Math.pow(4, -1/2) = 0.5`.</dd>
+<dt>`Math.abs(x)`</dt>
+<dd>Возвращает абсолютное значение числа</dd>
+<dt>`Math.exp(x)`</dt>
+<dd>Возвращает <code>e<sup>x</sup></code>, где <code>e</code> -- основание натуральных логарифмов.</dd>
+<dt>`Math.max(a, b, c...)`</dt>
+<dd>Возвращает наибольший из списка аргументов</dd>
+<dt>`Math.min(a, b, c...)`</dt>
+<dd>Возвращает наименьший из списка аргументов</dd>
+<dt>`Math.random()`</dt>
+<dd>Возвращает псевдо-случайное число в интервале [0,1) - то есть между 0(включительно) и 1(не включая). Генератор случайных чисел инициализуется текущим временем.</dd>
+</dl>
+
+### Форматирование
+
+Для красивого вывода чисел в стандарте [ECMA 402](http://www.ecma-international.org/ecma-402/1.0/ECMA-402.pdf) есть метод `toLocaleString()`:
+
+```js
+//+ run
+var number = 123456789;
+
+alert( number.toLocaleString() );  // 123 456 789
+```
+
+Его поддерживают все современные браузеры, кроме IE10- (для которых нужно подключить библиотеку [Intl.JS](https://github.com/andyearnshaw/Intl.js/)). Он также умеет форматировать валюту и проценты. Более подробно про устройство этого метода можно будет узнать в статье [](/intl), когда это вам понадобится.
+
+## Итого
+
+<ul>
+<li>Числа могут быть записаны в шестнадцатиричной, восьмеричной системе, а также "научным" способом.</li>
+<li>В JavaScript существует числовое значение бесконечность `Infinity`.</li>
+<li>Ошибка вычислений дает `NaN`.</li>
+<li>Арифметические и математические функции преобразуют строку в точности в число, игнорируя начальные и конечные пробелы.</li>
+<li>Функции `parseInt/parseFloat` делают числа из строк, которые начинаются с числа.</li>
+<li>Есть четыре способа округления: `Math.floor`, `Math.round`, `Math.ceil` и битовый оператор. Для округления до нужного знака используйте `+n.toFixed(p)` или трюк с умножением и делением на <code>10<sup>p</sup></code>.</li>
+<li>Дробные числа дают ошибку вычислений. При необходимости ее можно отсечь округлением до нужного знака.</li>
+<li>Случайные числа от `0` до `1` генерируются с помощью `Math.random()`, остальные -- преобразованием из них.</li>
+</ul>
+
+Существуют и другие математические функции. Вы можете ознакомиться с ними в справочнике в разделах <a href="http://javascript.ru/Number">Number</a> и <a href="http://javascript.ru/Math">Math</a>.
+
+
+
+
+
+
+
+
diff --git a/1-js/4-data-structures/3-object/1-hello-object/solution.md b/1-js/4-data-structures/3-object/1-hello-object/solution.md
new file mode 100644
index 00000000..465bf1ad
--- /dev/null
+++ b/1-js/4-data-structures/3-object/1-hello-object/solution.md
@@ -0,0 +1,10 @@
+
+
+```js
+var user = {};
+user.name = "Вася";
+user.surname = "Петров";
+user.name = "Сергей";
+delete user.name;
+```
+
diff --git a/1-js/4-data-structures/3-object/1-hello-object/task.md b/1-js/4-data-structures/3-object/1-hello-object/task.md
new file mode 100644
index 00000000..b0dfdaa3
--- /dev/null
+++ b/1-js/4-data-structures/3-object/1-hello-object/task.md
@@ -0,0 +1,13 @@
+# Первый объект
+
+[importance 3]
+
+Мини-задача на синтаксис объектов. Напишите код, по строке на каждое действие.
+<ol>
+<li>Создайте пустой объект `user`.</li>
+<li>Добавьте свойство `name` со значением `Вася`.</li>
+<li>Добавьте свойство `surname` со значением `Петров`.</li>
+<li>Поменяйте значение `name` на `Сергей`.</li>
+<li>Удалите свойство `name` из объекта.</li>
+</ol>
+
diff --git a/1-js/4-data-structures/3-object/article.md b/1-js/4-data-structures/3-object/article.md
new file mode 100644
index 00000000..568ecdf4
--- /dev/null
+++ b/1-js/4-data-structures/3-object/article.md
@@ -0,0 +1,328 @@
+# Объекты как ассоциативные массивы
+
+Объекты в JavaScript являются "двуличными". Они сочетают в себе два важных функционала.
+
+Первый -- это  ассоциативный массив: структура, пригодная для хранения любых данных. В этой главе мы рассмотрим использование объектов именно как массивов. 
+
+Второй -- языковые возможности для объектно-ориентированного программирования. Эти возможности мы изучим в последующих разделах учебника.
+
+[cut]
+## Ассоциативные массивы
+
+[Ассоциативный массив](http://ru.wikipedia.org/wiki/%D0%90%D1%81%D1%81%D0%BE%D1%86%D0%B8%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2) -- структура данных, в которой можно хранить любые данные в формате ключ-значение. 
+
+Её можно легко представить как шкаф с подписанными ящиками. Все данные хранятся в ящичках. По имени можно легко найти ящик и взять то значение, которое в нём лежит.
+
+В отличие от реальных шкафов, в ассоциативный массив можно в любой момент добавить новые именованные "ящики" или удалить существующие. Далее мы увидим примеры, как это делается.
+
+Кстати, в других языках программирования такую структуру данных также называют *"словарь"* и *"хэш"*.  
+
+## Создание объектов
+
+Пустой объект (*"пустой шкаф"*) может быть создан одним из двух синтаксисов:
+
+```js
+1. o = new Object();
+2. o = {};   // пустые фигурные скобки
+```
+
+Обычно все пользуются синтаксисом `(2)`, т.к. он короче.
+
+## Операции с объектом
+
+Объект может содержать в себе любые значения, которые называются *свойствами объекта*.  Доступ к свойствам осуществляется по *имени свойства* (иногда говорят *"по ключу"*).
+
+Например, создадим объект `person` для хранения информации о человеке:
+
+```js
+var person = {}; // пока пустой
+```
+
+Основные операции с объектами -- это:
+<ol>
+<li>**Присвоение свойства по ключу.**</li>
+<li>**Чтение свойства по ключу.**</li>
+<li>**Удаление свойства по ключу.**</li>
+</ol>
+
+Для обращения к свойствам используется запись "через точку", вида `объект.свойство`:
+
+```js
+//+ run
+var person = {};
+
+// *!*1. присвоение*/!*
+// при присвоении свойства в объекте автоматически создаётся "ящик" 
+// с именем "name" и в него записывается содержимое 'Вася'
+person.name = 'Вася'; 
+
+person.age = 25;  // запишем ещё одно свойство: с именем 'age' и значением 25
+
+// *!*2. чтение*/!*
+alert(person.name + ': ' + person.age); // вывести значения 
+
+// *!*3. удаление*/!*
+delete person.name; // удалить "ящик" с именем "name" вместе со значением в нём
+```
+
+Следующая операция:
+<ol start="4">
+<li>**Проверка существования свойства с определенным ключом.**</li>
+</ol>
+
+Например, есть объект `person`, и нужно проверить, существует ли в нем свойство `age`.
+
+Для проверки существования есть оператор `in`. Его синтаксис: `"prop" in obj`, причем имя свойства -- в виде строки, например:
+
+```js
+var person = { };
+
+if (*!*"age" in person*/!*) { 
+  alert("Свойство age существует!");
+}
+```
+
+Впрочем, чаще используется другой способ -- сравнение значения с `undefined`.
+
+Дело в том, что **в JavaScript можно обратиться к любому свойству объекта, даже если его нет**. Ошибки не будет.
+
+Но если свойство не существует, то вернется специальное значение `undefined`:
+
+```js
+//+ run
+var person = {};
+
+alert(person.lalala); // undefined, нет свойства с ключом lalala
+```
+
+Таким образом **мы можем легко проверить существование свойства -- получив его и сравнив с `undefined`**:
+
+```js
+//+ run
+var person = { name: "Василий" };
+
+alert(person.lalala === undefined); // true, свойства нет
+alert(person.name === undefined); // false, свойство есть.
+```
+
+[smart header="Разница между проверками `in` и `=== undefined`"]
+
+Есть два средства для проверки наличия свойства в объекте: первое -- оператор `in`, второе -- получить его и сравнить его с `undefined`.
+
+Они почти идентичны, но есть одна небольшая разница.
+
+Дело в том, что технически возможно, что *свойство есть и равно `undefined`*:
+
+```js
+//+ untrusted refresh run
+var obj = {};
+obj.test = undefined; // добавили свойство со значением undefined
+
+*!*
+// проверим наличие свойств test и заведомо отсутствующего blabla
+alert(obj.test === undefined); // true
+alert(obj.blabla === undefined); // true
+*/!*
+```
+
+...При этом, как видно из кода, при простом сравнении наличие такого свойства будет неотличимо от его отсутствия.
+
+Но оператор `in` гарантирует правильный результат:
+
+```js
+//+ untrusted refresh run
+var obj = {};
+obj.test = undefined;
+
+*!*
+alert( "test" in obj ); // true 
+alert( "blabla" in obj ); // false
+*/!*
+```
+
+Как правило, в коде мы не будем присваивать `undefined`, чтобы корректно работали обе проверки. А в качестве значения, обозначающего неизвестность и неопределенность, будем использовать `null`.
+[/smart]
+ 
+### Доступ через квадратные скобки
+
+Существует альтернативный синтаксис работы со свойствами, использующий квадратные скобки `объект['свойство']`:
+
+```js
+//+ run
+var person = {};
+
+person['name'] = 'Вася'; // то же что и person.name = 'Вася'
+```
+
+Записи `person['name']` и `person.name` идентичны, но квадратные скобки позволяют использовать в качестве имени свойства любую строку:
+
+```js
+//+ run
+var person = {};
+
+person['любимый стиль музыки'] = 'Джаз'; // то же что и person.name = 'Вася'
+```
+
+Такое присвоение было бы невозможно "через точку", так интерпретатор после первого пробела подумает, что свойство закончилось, и далее выдаст ошибку:
+
+```js
+//+ run
+person.любимый стиль музыки = 'Джаз'; // ??? ошибка
+```
+
+В обоих случаях, **имя свойства обязано быть строкой**. Если использовано значение другого типа -- JavaScript приведет его к строке автоматически.
+
+### Доступ к свойству через переменную
+
+Квадратные скобки также позволяют обратиться к свойству, имя которого хранится в переменной:
+
+```js
+//+ run
+var person = { age: 25 };
+var key = 'age';
+
+alert( person[key] );  // выведет person['age']
+```
+
+Вообще, если имя свойства хранится в переменной (`var key = "age"`), то единственный способ к нему обратиться -- это квадратные скобки `person[key]`.
+
+Доступ через точку используется, если мы на этапе написания программы уже знаем название свойства. А если оно будет определено по ходу выполнения, например, введено посетителем и записано в переменную, то единственный выбор -- квадратные скобки.
+
+### Объявление со свойствами  
+
+Объект можно заполнить значениями при создании, указав их в фигурных скобках: `{ ключ1: значение1, ключ2: значение2, ... }`.
+
+Такой синтаксис называется *литеральным* (оригинал - *literal*), например:
+
+<img src="objectLiteral.png">
+
+Следующие два фрагмента кода создают одинаковый объект:
+
+```js
+var menuSetup = {
+    width:  300,
+    height: 200,
+    title: "Menu"
+};
+
+// то же самое, что:
+
+var menuSetup = {};
+menuSetup.width = 300;
+menuSetup.height = 200;
+menuSetup.title = 'Menu';
+```
+
+**Названия свойств можно перечислять в кавычках или без, если они удовлетворяют ограничениям для имён переменных.**
+
+Например:
+
+```js
+var menuSetup = {
+    width:  300,
+    'height': 200,
+    "мама мыла раму": true
+};
+```
+
+**Значение у свойства может быть любое, в том числе и другой объект, который можно указать тут же:**
+
+```js
+var user = {
+  name:  "Таня",
+  age: 25,
+*!*
+  size: {
+    top: 90,
+    middle: 60,
+    bottom: 90
+  }
+*/!*
+}
+
+alert( user.name ) // "Таня"
+
+alert( user.size.top ) // 90
+```
+
+Здесь значением свойства `size` является объект `{top: 90, middle: 60, bottom: 90 }`. 
+## Компактное представление объектов
+
+[warn header="Hardcore coders only"]
+Эта секция относится ко внутреннему устройству структуры данных. Она не обязательна к прочтению.
+[/warn]
+
+Браузер использует специальное "компактное" представление объектов, чтобы сэкономить память в том случае, когда однотипных объектов много.
+
+Например, посмотрим на такой объект:
+
+```js
+var user = {
+  name: "Vasya",
+  age: 25
+};
+```
+
+Здесь содержится информация о свойстве `name` и его строковом значении, а также о свойстве `age` и его численном значении. Представим, что таких объектов много. 
+
+Получится, что информация об именах свойств `name` и `age` дублируется в каждом объекте. Чтобы этого избежать, браузер применяет оптимизацию.
+
+**При создании множества объектов одного и того же вида (с одинаковыми полями) интерпретатор выносит описание полей в отдельную структуру. А сам объект остаётся в виде непрерывной области памяти с данными.**
+
+Например, есть много объектов с полями `name` и `age`:
+
+```js
+{name: "Вася", age: 25}
+{name: "Петя", age: 22}
+{name: "Маша", age: 19}
+...
+```
+
+Для их эффективного хранения будет создана структура, которая описывает данный вид объектов. Выглядеть она будет примерно так: `<string name, number age>`. А сами объекты будут представлены в памяти только данными:
+
+```js
+<структура: string name, number age>
+Вася 25
+Петя 22
+Маша 19
+```
+
+При добавлении нового объекта такой структуры достаточно хранить значения полей, но не их имена. Экономия памяти -- налицо.
+
+А что происходит, если к объекту добавляется новое свойство? Например, к одному из них добавили свойство `isAdmin`:
+
+```js
+user.isAdmin = true;
+```
+
+В этом случае браузер смотрит, есть ли уже структура, под которую подходит такой объект. Если нет -- она создаётся и объект привязывается к ней. 
+ 
+**Эта оптимизация является примером того, что далеко не всё то, что мы пишем, один-в-один переносится в память.**
+
+Современные интерпретаторы очень стараются оптимизировать как код, так и структуры данных. Детали применения и реализации этого способа хранения варьируются от браузера к браузеру. О том, как это сделано в Chrome можно узнать, например, из презентации [Know Your Engines](http://www.slideshare.net/newmovie/know-yourengines-velocity2011). Она была некоторое время назад, но с тех пор мало что изменилось.
+
+
+## Итого
+
+Объекты -- это ассоциативные массивы с дополнительными возможностями:
+
+<ul>
+<li>Доступ к элементам осуществляется:
+<ul>
+<li>Напрямую по ключу `obj.prop = 5`</li>
+<li>Через переменную, в которой хранится ключ:
+
+```js
+var key = "prop"; 
+obj[key] = 5
+```
+
+</li>
+</ul>
+<li>Удаление ключей: `delete obj.name`.</li>
+<li>Существование свойства может проверять оператор `in`: `if ("prop" in obj)`, как правило, работает и просто сравнение `if (obj.prop !== undefined)`.</li>
+</ul>
+
+
+
+
diff --git a/1-js/4-data-structures/3-object/objectLiteral.png b/1-js/4-data-structures/3-object/objectLiteral.png
new file mode 100755
index 00000000..fac01eb8
Binary files /dev/null and b/1-js/4-data-structures/3-object/objectLiteral.png differ
diff --git a/1-js/4-data-structures/4-object-for-in/1-is-empty/_js.view/solution.js b/1-js/4-data-structures/4-object-for-in/1-is-empty/_js.view/solution.js
new file mode 100644
index 00000000..ffd029a2
--- /dev/null
+++ b/1-js/4-data-structures/4-object-for-in/1-is-empty/_js.view/solution.js
@@ -0,0 +1,6 @@
+function isEmpty(obj) { 
+  for(var key in obj) {
+    return false;
+  }
+  return true;
+}
diff --git a/1-js/4-data-structures/4-object-for-in/1-is-empty/_js.view/test.js b/1-js/4-data-structures/4-object-for-in/1-is-empty/_js.view/test.js
new file mode 100644
index 00000000..8a1e2796
--- /dev/null
+++ b/1-js/4-data-structures/4-object-for-in/1-is-empty/_js.view/test.js
@@ -0,0 +1,9 @@
+describe("isEmpty", function() {
+  it("если объект пустой - возвращает true", function() {
+    assert.isTrue( isEmpty({}) );
+  });
+
+  it("если у объекта есть любое свойство, не важно какое - возвращает false", function() {
+    assert.isFalse( isEmpty({ anything: false }) );
+  });
+});
\ No newline at end of file
diff --git a/1-js/4-data-structures/4-object-for-in/1-is-empty/solution.md b/1-js/4-data-structures/4-object-for-in/1-is-empty/solution.md
new file mode 100644
index 00000000..8ecef652
--- /dev/null
+++ b/1-js/4-data-structures/4-object-for-in/1-is-empty/solution.md
@@ -0,0 +1,20 @@
+
+
+```js
+//+ run
+function isEmpty(obj) { 
+  for(var key in obj) {
+    return false;
+  }
+  return true;
+}
+
+var schedule = {};
+
+alert( isEmpty( schedule ) ); // true
+
+schedule["8:30"] = "подъём";
+
+alert( isEmpty( schedule ) ); // false
+```
+
diff --git a/1-js/4-data-structures/4-object-for-in/1-is-empty/task.md b/1-js/4-data-structures/4-object-for-in/1-is-empty/task.md
new file mode 100644
index 00000000..b3cae17d
--- /dev/null
+++ b/1-js/4-data-structures/4-object-for-in/1-is-empty/task.md
@@ -0,0 +1,22 @@
+# Определите, пуст ли объект
+
+[importance 5]
+
+Создайте функцию `isEmpty(obj)`, которая возвращает `true`, если в объекте нет свойств и `false` -- если хоть одно свойство есть.
+
+Работать должно так:
+
+```js
+function isEmpty(obj) { 
+  /* ваш код */
+}
+
+var schedule = {};
+
+alert( isEmpty( schedule ) ); // true
+
+schedule["8:30"] = "подъём";
+
+alert( isEmpty( schedule ) ); // false
+```
+
diff --git a/1-js/4-data-structures/4-object-for-in/2-sum-salaries/solution.md b/1-js/4-data-structures/4-object-for-in/2-sum-salaries/solution.md
new file mode 100644
index 00000000..6584b1e6
--- /dev/null
+++ b/1-js/4-data-structures/4-object-for-in/2-sum-salaries/solution.md
@@ -0,0 +1,20 @@
+
+
+```js
+//+ run
+"use strict";
+
+var salaries = {
+    "Вася": 100,  
+    "Петя": 300,
+    "Даша": 250
+};
+
+var sum = 0;
+for(var name in salaries) {
+  sum += salaries[name];
+}
+
+alert(sum);
+```
+
diff --git a/1-js/4-data-structures/4-object-for-in/2-sum-salaries/task.md b/1-js/4-data-structures/4-object-for-in/2-sum-salaries/task.md
new file mode 100644
index 00000000..2cf0015a
--- /dev/null
+++ b/1-js/4-data-structures/4-object-for-in/2-sum-salaries/task.md
@@ -0,0 +1,23 @@
+# Сумма свойств
+
+[importance 5]
+
+Есть объект `salaries` с зарплатами. Напишите код, который выведет сумму всех зарплат.
+
+Если объект пустой, то результат должен быть `0`.
+
+Например:
+
+```js
+"use strict";
+
+var salaries = {
+    "Вася": 100,  
+    "Петя": 300,
+    "Даша": 250
+};
+
+//... ваш код выведет 650
+```
+
+P.S. Сверху стоит `use strict`, чтобы не забыть объявить переменные.
\ No newline at end of file
diff --git a/1-js/4-data-structures/4-object-for-in/3-max-salary/solution.md b/1-js/4-data-structures/4-object-for-in/3-max-salary/solution.md
new file mode 100644
index 00000000..f3ec028e
--- /dev/null
+++ b/1-js/4-data-structures/4-object-for-in/3-max-salary/solution.md
@@ -0,0 +1,24 @@
+
+
+```js
+//+ run
+"use strict";
+
+var salaries = {
+    "Вася": 100,  
+    "Петя": 300,
+    "Даша": 250
+};
+
+var max = 0;
+var maxName = "";
+for(var name in salaries) {
+  if (max < salaries[name]) {
+    max = salaries[name];
+    maxName = name;
+  }
+}
+
+alert(maxName || "нет сотрудников");
+```
+
diff --git a/1-js/4-data-structures/4-object-for-in/3-max-salary/task.md b/1-js/4-data-structures/4-object-for-in/3-max-salary/task.md
new file mode 100644
index 00000000..6b95d9d7
--- /dev/null
+++ b/1-js/4-data-structures/4-object-for-in/3-max-salary/task.md
@@ -0,0 +1,22 @@
+# Свойство с наибольшим значением
+
+[importance 5]
+
+Есть объект `salaries` с зарплатами. Напишите код, который выведет имя сотрудника, у которого самая большая зарплата.
+
+Если объект пустой, то пусть он выводит "нет сотрудников".
+
+Например:
+
+```js
+"use strict";
+
+var salaries = {
+    "Вася": 100,  
+    "Петя": 300,
+    "Даша": 250
+};
+
+// ... ваш код выведет "Петя"
+```
+
diff --git a/1-js/4-data-structures/4-object-for-in/4-multiply-numeric/_js.view/solution.js b/1-js/4-data-structures/4-object-for-in/4-multiply-numeric/_js.view/solution.js
new file mode 100644
index 00000000..fec115e0
--- /dev/null
+++ b/1-js/4-data-structures/4-object-for-in/4-multiply-numeric/_js.view/solution.js
@@ -0,0 +1,11 @@
+function isNumeric(n) { 
+  return !isNaN(parseFloat(n)) && isFinite(n)
+}
+
+function multiplyNumeric(obj) {
+  for(var key in obj) {
+    if (isNumeric( obj[key] )) {
+      obj[key] *= 2;
+    }
+  }
+}
diff --git a/1-js/4-data-structures/4-object-for-in/4-multiply-numeric/_js.view/source.js b/1-js/4-data-structures/4-object-for-in/4-multiply-numeric/_js.view/source.js
new file mode 100644
index 00000000..558ef93e
--- /dev/null
+++ b/1-js/4-data-structures/4-object-for-in/4-multiply-numeric/_js.view/source.js
@@ -0,0 +1,5 @@
+function isNumeric(n) { 
+  return !isNaN(parseFloat(n)) && isFinite(n)
+}
+
+// ... ваш код ...
\ No newline at end of file
diff --git a/1-js/4-data-structures/4-object-for-in/4-multiply-numeric/_js.view/test.js b/1-js/4-data-structures/4-object-for-in/4-multiply-numeric/_js.view/test.js
new file mode 100644
index 00000000..8bddc36d
--- /dev/null
+++ b/1-js/4-data-structures/4-object-for-in/4-multiply-numeric/_js.view/test.js
@@ -0,0 +1,13 @@
+describe("multiplyNumeric", function() {
+  it("умножает численные свойства на 2", function() {
+    var menu = {
+      width: 200,
+      height: "300",
+      title: "Моё меню"
+    };
+    multiplyNumeric(menu);
+    assert.equal( menu.width, 400 );
+    assert.equal( menu.height, 600 );
+    assert.equal( menu.title, "Моё меню" );
+  });
+});
\ No newline at end of file
diff --git a/1-js/4-data-structures/4-object-for-in/4-multiply-numeric/solution.md b/1-js/4-data-structures/4-object-for-in/4-multiply-numeric/solution.md
new file mode 100644
index 00000000..226af069
--- /dev/null
+++ b/1-js/4-data-structures/4-object-for-in/4-multiply-numeric/solution.md
@@ -0,0 +1,27 @@
+
+
+```js
+//+ run
+var menu = {
+  width: 200,
+  height: 300,
+  title: "My menu"
+};
+
+function isNumeric(n) { 
+  return !isNaN(parseFloat(n)) && isFinite(n);
+}
+
+function multiplyNumeric(obj) {
+  for(var key in obj) {
+    if (isNumeric( obj[key] )) {
+      obj[key] *= 2;
+    }
+  }
+}
+
+multiplyNumeric(menu);
+
+alert("menu width="+menu.width+" height="+menu.height+" title="+menu.title);
+```
+
diff --git a/1-js/4-data-structures/4-object-for-in/4-multiply-numeric/task.md b/1-js/4-data-structures/4-object-for-in/4-multiply-numeric/task.md
new file mode 100644
index 00000000..15cd1fce
--- /dev/null
+++ b/1-js/4-data-structures/4-object-for-in/4-multiply-numeric/task.md
@@ -0,0 +1,32 @@
+# Умножьте численные свойства на 2
+
+[importance 3]
+
+Создайте функцию `multiplyNumeric`, которая получает объект и умножает все численные свойства на 2. Например:
+
+```js
+// до вызова
+var menu = {
+    width: 200,  
+    height: 300,
+    title: "My menu"
+};
+
+multiplyNumeric(menu);
+
+// после вызова
+menu = {
+    width: 400,
+    height: 600,
+    title: "My menu"
+};
+```
+
+P.S. Для проверки на число используйте функцию:
+
+```js
+function isNumeric(n) { 
+  return !isNaN(parseFloat(n)) && isFinite(n)
+}
+```
+
diff --git a/1-js/4-data-structures/4-object-for-in/article.md b/1-js/4-data-structures/4-object-for-in/article.md
new file mode 100644
index 00000000..75940780
--- /dev/null
+++ b/1-js/4-data-structures/4-object-for-in/article.md
@@ -0,0 +1,173 @@
+# Объекты: перебор свойств 
+
+Для перебора всех свойств из объекта используется цикл по свойствам `for..in`. Это специальная синтаксическая конструкция, которая работает не так, как обычный цикл.
+
+[cut]
+
+## for..in [#for..in]
+
+Синтаксис:
+
+```js
+for (key in obj) { 
+  /* ... делать что-то с obj[key] ... */
+}
+```
+
+При этом в `key` будут последовательно записаны имена свойств. Конечно, вместо `key` может быть любое другое имя переменной. 
+
+
+[smart header="Объявление переменной в цикле `for (var key in obj)`"]
+Переменную можно объявить прямо в цикле:
+
+```js
+for (*!*var key*/!* in menu) { 
+  // ...
+}
+```
+
+Так иногда пишут для краткости кода.
+[/smart]
+
+
+Например:
+
+```js
+//+ run
+var menu = {
+    width:  300,
+    height: 200,
+    title: "Menu"
+};
+
+for (var key in menu) { 
+    // этот код будет вызван для каждого свойства объекта    
+    // ..и выведет имя свойства и его значение
+
+*!*
+    alert("Ключ: " + key + " значение:" + menu[key]);
+*/!*
+}
+```
+
+Обратите внимание, мы использовали квадратные скобки `menu[key]`. Как уже говорилось, если имя свойства хранится в переменной, то обратиться к нему можно только так, не через точку.
+
+## Количество свойств в объекте
+
+Как узнать, сколько свойств хранит объект?
+
+Готового метода для этого нет. 
+
+Самый кросс-браузерный способ -- это сделать цикл по свойствам и посчитать, вот так:
+
+```js
+//+ run
+var menu = {
+    width:  300,
+    height: 200,
+    title: "Menu"
+};
+
+*!*
+var counter = 0;
+
+for (var key in menu) {
+  counter++;
+}
+*/!*
+
+alert("Всего свойств: " + counter);
+```
+
+В следующих главах мы пройдём массивы и познакомимся с другим, более коротким, вызовом: `Object.keys(menu).length`.
+
+## В каком порядке перебираются свойства?
+
+Для примера, рассмотрим объект, который задаёт список опций для выбора страны:
+
+```js
+var codes = {
+  // телефонные коды в формате "код страны": "название"
+  "7": "Россия",
+  "38": "Украина",
+  // ..,
+  "1": "США"
+};
+```
+
+Здесь мы предполагаем, что большинство посетителей из России, и поэтому начинаем с `7`, это зависит от проекта.
+
+При выборе телефонного кода мы хотели бы предлагать варианты, начиная с первого. Обычно на основе списка генерируется `select`, но здесь нам важно не это, а важно другое.
+
+**Правда ли, что при переборе `for(key in codes)` ключи `key` будут перечислены именно в том порядке, в котором заданы?**
+
+**По стандарту -- нет. Но некоторое соглашение об этом, всё же, есть.**
+
+Соглашение говорит, что если имя свойства -- нечисловая строка, то такие ключи всегда перебираются в том же порядке. Так получилось по историческим причинам и изменить это сложно: поломается много готового кода.
+
+С другой стороны, если имя свойства -- число, то все современные браузеры сортируют такие свойства в целях внутренней оптимизации.
+
+К примеру, рассмотрим объект с заведомо нечисловыми свойствами:
+
+```js
+//+ run
+var user = {
+  name: "Вася",
+  surname: "Петров"
+};
+user.age = 25;
+
+*!*
+// порядок перебора соответствует порядку присвоения свойства
+*/!*
+for (var prop in user) {
+  alert(prop); // name, surname, age
+}
+```
+
+А теперь -- что будет, если перебрать объект с кодами?
+
+```js
+//+ run
+var codes = {
+  // телефонные коды в формате "код страны": "название"
+  "7": "Россия",
+  "38": "Украина",
+  "1": "США"
+};
+
+for(var code in codes) alert(code); // 1, 7, 38
+```
+
+При запуске этого кода в современном браузере мы увидим, что на первое место попал код США! 
+
+Нарушение порядка возникло, потому что ключи численные. Интерпретатор JavaScript видит, что строка на самом деле является числом и преобразует ключ в немного другой внутренний формат. Дополнительным эффектом внутренних оптимизаций является сортировка.
+
+**А что, если мы хотим, чтобы порядок был именно таким, какой мы задали?**
+ 
+Это возможно. Можно применить небольшой хак, который заключается в том, чтобы сделать все ключи нечисловыми, например, добавим в начало дополнительный символ `'+'`:
+
+```js
+//+ run
+var codes = {
+  "+7": "Россия", 
+  "+38": "Украина",
+  "+1": "США"
+};
+
+for (var code in codes ) {
+  var value = codes[code];
+  code = +code; // ..если нам нужно именно число, преобразуем: "+7" -> 7
+ 
+  alert( code + ": " + value ); // 7, 38, 1 во всех браузерах
+}
+```
+
+## Итого
+
+<ul>
+<li>Цикл по ключам: `for (key in obj)`.</li>
+<li>Порядок перебора соответствует порядку объявления для нечисловых ключей, а числовые -- сортируются (в современных браузерах).</li>
+<li>Для того, чтобы гарантировать перебор ключей в нужном порядке, их делают "нечисловыми", например добавляя в начало `+`, а потом, в процессе обработки, преобразуют ключи в числа.</li>
+</ul>
+
diff --git a/1-js/4-data-structures/5-object-reference/article.md b/1-js/4-data-structures/5-object-reference/article.md
new file mode 100644
index 00000000..7247f6d7
--- /dev/null
+++ b/1-js/4-data-structures/5-object-reference/article.md
@@ -0,0 +1,162 @@
+# Объекты: передача по ссылке
+
+Фундаментальным отличием объектов от примитивов, является их копирование "по ссылке".
+
+[cut]
+
+## Копирование по значению
+
+Обычные значения: строки, числа, булевы значения, `null/undefined` при присваивании переменных копируются целиком или, как говорят, *"по значению"*.
+
+```js
+var message = "Привет";
+var phrase = message;
+```
+
+В результате такого копирования получились две полностью независимые переменные, в каждой из которых хранится значение `"Привет"`.
+
+<img src="message_box_hello.png"> <img src="phrase_box_hello.png">
+
+## Копирование по ссылке
+
+С объектами -- всё не так.
+
+**В переменной, которой присвоен объект, хранится не сам объект, а "адрес его места в памяти", иными словами -- "ссылка" на него.**
+
+Например, обычную переменную можно изобразить как коробку с данными:
+
+```js
+var message = "Привет"; // значение в переменной
+```
+
+<img src="box-message-hello.png">
+
+А вот как выглядит переменная, которой присвоен объект:
+
+```js
+var user = { name: "Вася" };
+```
+
+<img src="referenceUser.png">
+
+Внимание: объект -- вне переменной. В переменной -- лишь ссылка на него.
+
+**При копировании переменной с объектом -- копируется эта ссылка, а объект по-прежнему остается в единственном экземпляре.** 
+
+Например:
+
+```js
+var user = { name: "Вася" }; // в переменной - ссылка 
+
+var admin = user; // скопировали ссылку
+```
+
+Получили две переменные, в которых находятся ссылки на один и тот же объект:
+
+<img src="referenceUserAdmin.png">
+
+**Так как объект всего один, то изменения через любую переменную видны в других переменных:**
+
+```js
+//+ run
+var user = { name: 'Вася' };
+
+var admin = user;
+
+*!*admin.name*/!* = 'Петя'; // поменяли данные через admin
+
+alert(*!*user.name*/!*); // 'Петя', изменения видны в user
+```
+
+[smart header="Переменная с объектом как \"ключ\" к сейфу с данными"]
+Ещё одна аналогия: переменная, в которую присвоен объект, на самом деле хранит не сами данные, а ключ к сейфу, где они хранятся.
+
+При копировании её, получается что мы сделали копию ключа, но сейф по-прежнему один. По какому бы ключу мы не залезли в сейф, данные -- одни и те же.
+[/smart]
+
+## Клонирование объектов
+
+Иногда, на практике -- очень редко, нужно скопировать объект целиком, создать именно полную копию, "независимый клон".
+
+Что ж, можно сделать и это. Для этого нужно пройти по объекту, достать данные и скопировать на уровне примитивов.
+
+Примерно так:
+
+```js
+//+ run
+var user = {
+  name: "Вася",
+  age: 30 
+};
+
+*!*
+var clone = {}; // новый пустой объект
+
+// скопируем в него все свойства user
+for(var key in user) {
+  clone[key] = user[key];
+}
+*/!*
+
+// теперь clone -- полностью независимая копия
+clone.name = "Петя"; // поменяли данные в clone
+
+alert(user.name); // по-прежнем "Вася"
+```
+
+В этом коде не учитывается, что свойства объектов, в свою очередь, могут хранить ссылки на другие объекты. Можно обойти такие подобъекты и тоже склонировать их.
+
+Это называют "глубоким" клонированием. Для того, чтобы это сделать, нужно рекурсивно обойти объект вместе с подобъектами. 
+
+## Вывод в консоли
+
+Откройте консоль браузера (обычно [key F12]) и запустите следующий код:
+
+```js
+//+ run
+var time = {
+  year: 2345,
+  month: 11,
+  day: 10,
+  hour: 11,
+  minute: 12,
+  second: 13,
+  microsecond: 123456
+}
+
+console.log(time);  // (*)
+time.microsecond++; // (**)
+
+console.log(time);
+time.microsecond++;
+
+console.log(time);
+time.microsecond++;
+```
+
+Как видно, некий объект выводится `(*)`, затем он меняется `(**)` и снова выводится, и так несколько раз. Пока ничего необычного, типичная ситуация -- скрипт делает какую-то работу с объектом и выводит в консоли то, как она продвигается.
+
+Необычное -- в другом!
+
+При раскрытии каждый объект будет выглядеть примерно так (в Chrome):
+
+<img src="object-reference-console.png">
+
+**Судя по выводу, свойство `microsecond` всегда было равно `123459`... Или нет?**
+
+Конечно, нет! Консоль нас просто дурит. 
+
+**При "раскрытии" свойств объекта в консоли -- браузер всегда выводит их текущие (на момент раскрытия) значения.**
+
+Так происходит именно потому, что вывод не делает "копию" текущего содержимого, а сохраняет лишь ссылку на объект. В будущем, при отладке скриптов у вас не раз возникнет подобная ситуация :)
+
+
+## Итого
+
+<ul>
+<li>Объект присваивается и копируется "по ссылке". То есть, в переменной хранится не сам объект а, условно говоря, адрес в памяти, где он находится.</li>
+<li>Если переменная-объект скопирована или передана в функцию, то копируется именно эта ссылка, а объект остаётся один в памяти.</li>
+</ul>
+
+Это -- одно из ключевых отличий объекта от примитива (числа, строки...), который при присвоении как раз копируется "по значению", то есть полностью.
+
diff --git a/1-js/4-data-structures/5-object-reference/box-message-hello.png b/1-js/4-data-structures/5-object-reference/box-message-hello.png
new file mode 100755
index 00000000..1a0a7efa
Binary files /dev/null and b/1-js/4-data-structures/5-object-reference/box-message-hello.png differ
diff --git a/1-js/4-data-structures/5-object-reference/message_box_hello.png b/1-js/4-data-structures/5-object-reference/message_box_hello.png
new file mode 100755
index 00000000..44e39e66
Binary files /dev/null and b/1-js/4-data-structures/5-object-reference/message_box_hello.png differ
diff --git a/1-js/4-data-structures/5-object-reference/object-reference-console.png b/1-js/4-data-structures/5-object-reference/object-reference-console.png
new file mode 100644
index 00000000..864f1f94
Binary files /dev/null and b/1-js/4-data-structures/5-object-reference/object-reference-console.png differ
diff --git a/1-js/4-data-structures/5-object-reference/object-reference-console@2x.png b/1-js/4-data-structures/5-object-reference/object-reference-console@2x.png
new file mode 100644
index 00000000..89345268
Binary files /dev/null and b/1-js/4-data-structures/5-object-reference/object-reference-console@2x.png differ
diff --git a/1-js/4-data-structures/5-object-reference/phrase_box_hello.png b/1-js/4-data-structures/5-object-reference/phrase_box_hello.png
new file mode 100755
index 00000000..cd963668
Binary files /dev/null and b/1-js/4-data-structures/5-object-reference/phrase_box_hello.png differ
diff --git a/1-js/4-data-structures/5-object-reference/referenceUser.png b/1-js/4-data-structures/5-object-reference/referenceUser.png
new file mode 100755
index 00000000..8884c2cd
Binary files /dev/null and b/1-js/4-data-structures/5-object-reference/referenceUser.png differ
diff --git a/1-js/4-data-structures/5-object-reference/referenceUser@2x.png b/1-js/4-data-structures/5-object-reference/referenceUser@2x.png
new file mode 100755
index 00000000..74768628
Binary files /dev/null and b/1-js/4-data-structures/5-object-reference/referenceUser@2x.png differ
diff --git a/1-js/4-data-structures/5-object-reference/referenceUserAdmin.png b/1-js/4-data-structures/5-object-reference/referenceUserAdmin.png
new file mode 100755
index 00000000..24910f93
Binary files /dev/null and b/1-js/4-data-structures/5-object-reference/referenceUserAdmin.png differ
diff --git a/1-js/4-data-structures/5-object-reference/referenceUserAdmin@2x.png b/1-js/4-data-structures/5-object-reference/referenceUserAdmin@2x.png
new file mode 100755
index 00000000..3ffccfe6
Binary files /dev/null and b/1-js/4-data-structures/5-object-reference/referenceUserAdmin@2x.png differ
diff --git a/1-js/4-data-structures/6-array/1-get-last-in-array/solution.md b/1-js/4-data-structures/6-array/1-get-last-in-array/solution.md
new file mode 100644
index 00000000..50760642
--- /dev/null
+++ b/1-js/4-data-structures/6-array/1-get-last-in-array/solution.md
@@ -0,0 +1,16 @@
+Последний элемент имеет индекс на `1` меньший, чем длина массива.
+
+Например:
+
+```js
+var fruits = ["Яблоко", "Груша", "Слива"];
+```
+
+Длина массива этого массива `fruits.length` равна `3`. Здесь "Яблоко" имеет индекс `0`, "Груша" -- индекс `1`, "Слива" -- индекс `2`. 
+
+То есть, для массива длины `goods`:
+
+```js
+var lastItem = goods[goods.length-1]; // получить последний элемент
+```
+
diff --git a/1-js/4-data-structures/6-array/1-get-last-in-array/task.md b/1-js/4-data-structures/6-array/1-get-last-in-array/task.md
new file mode 100644
index 00000000..b33ea3d9
--- /dev/null
+++ b/1-js/4-data-structures/6-array/1-get-last-in-array/task.md
@@ -0,0 +1,9 @@
+# Получить последний элемент массива
+
+[importance 5]
+
+Как получить последний элемент из произвольного массива?
+
+У нас есть массив `goods`. Сколько в нем элементов -- не знаем, но можем прочитать из `goods.length`. 
+
+Напишите код для получения последнего элемента `goods`.
\ No newline at end of file
diff --git a/1-js/4-data-structures/6-array/10-maximal-subarray/_js.view/solution.js b/1-js/4-data-structures/6-array/10-maximal-subarray/_js.view/solution.js
new file mode 100644
index 00000000..727ee23b
--- /dev/null
+++ b/1-js/4-data-structures/6-array/10-maximal-subarray/_js.view/solution.js
@@ -0,0 +1,10 @@
+function getMaxSubSum(arr) {
+  var maxSum = 0, partialSum = 0;
+  for (var i=0; i<arr.length; i++) {
+    partialSum += arr[i];
+    maxSum = Math.max(maxSum, partialSum);
+    if (partialSum < 0) partialSum = 0;
+  }
+  return maxSum;
+}
+
diff --git a/1-js/4-data-structures/6-array/10-maximal-subarray/_js.view/test.js b/1-js/4-data-structures/6-array/10-maximal-subarray/_js.view/test.js
new file mode 100644
index 00000000..0ffc9eaa
--- /dev/null
+++ b/1-js/4-data-structures/6-array/10-maximal-subarray/_js.view/test.js
@@ -0,0 +1,33 @@
+describe("getMaxSubSum", function() {
+  it("максимальная подсумма [1, 2, 3] равна 6", function() {
+    assert.equal( getMaxSubSum([1, 2, 3]), 6);
+  });
+
+  it("максимальная подсумма [-1, 2, 3, -9] равна 5", function() {
+    assert.equal( getMaxSubSum([-1, 2, 3, -9]), 5);
+  });
+
+  it("максимальная подсумма [-1, 2, 3, -9, 11] равна 11", function() {
+    assert.equal( getMaxSubSum([-1, 2, 3, -9, 11]), 11);
+  });
+
+  it("максимальная подсумма [-2, -1, 1, 2] равна 3", function() {
+    assert.equal( getMaxSubSum([-2, -1, 1, 2]), 3);
+  });
+
+  it("максимальная подсумма [100, -9, 2, -3, 5] равна 100", function() {
+    assert.equal( getMaxSubSum([100, -9, 2, -3, 5]), 100);
+  });
+
+  it("максимальная подсумма [] равна 0", function() {
+    assert.equal( getMaxSubSum([]), 0);
+  });
+
+  it("максимальная подсумма [-1] равна 0", function() {
+    assert.equal( getMaxSubSum([-1]), 0);
+  });
+
+  it("максимальная подсумма [-1, -2] равна 0", function() {
+    assert.equal( getMaxSubSum([-1, -2]), 0);
+  });
+});
\ No newline at end of file
diff --git a/1-js/4-data-structures/6-array/10-maximal-subarray/solution.md b/1-js/4-data-structures/6-array/10-maximal-subarray/solution.md
new file mode 100644
index 00000000..8f6794e8
--- /dev/null
+++ b/1-js/4-data-structures/6-array/10-maximal-subarray/solution.md
@@ -0,0 +1,99 @@
+# Подсказка (медленное решение)
+Можно просто посчитать для каждого элемента массива все суммы, которые с него начинаются.
+
+Например, для `[-1, 2, 3, -9, 11]`:
+
+```js
+// Начиная с -1:
+-1
+-1 + 2
+-1 + 2 + 3
+-1 + 2 + 3 + (-9)
+-1 + 2 + 3 + (-9) + 11
+
+// Начиная с 2:
+2
+2 + 3
+2 + 3 + (-9)
+2 + 3 + (-9) + 11
+
+// Начиная с 3:
+3
+3 + (-9)
+3 + (-9) + 11
+
+// Начиная с -9
+-9
+-9 + 11
+
+// Начиная с -11
+-11
+```
+
+Сделайте вложенный цикл, который на внешнем уровне бегает по элементам массива, а на внутреннем -- формирует все суммы элементов, которые начинаются с текущей позиции.
+
+# Медленное решение
+
+Решение через вложенный цикл:
+
+```js
+//+ run
+function getMaxSubSum(arr) {
+  var maxSum = 0; // если совсем не брать элементов, то сумма 0
+
+  for(var i=0; i<arr.length; i++) {
+    var sumFixedStart = 0;
+    for(var j=i; j<arr.length; j++) {
+      sumFixedStart += arr[j];
+      maxSum = Math.max(maxSum, sumFixedStart);
+    }
+  }
+
+  return maxSum;
+}
+
+alert( getMaxSubSum([-1, 2, 3, -9]) ); // 5
+alert( getMaxSubSum([-1, 2, 3, -9, 11]) ); // 11
+alert( getMaxSubSum([-2, -1, 1, 2]) ); // 3
+alert( getMaxSubSum([1, 2, 3]) ); // 6
+alert( getMaxSubSum([100, -9, 2, -3, 5]) ); // 100
+```
+
+Такое решение имеет [оценку сложности](http://ru.wikipedia.org/wiki/%C2%ABO%C2%BB_%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%BE%D0%B5_%D0%B8_%C2%ABo%C2%BB_%D0%BC%D0%B0%D0%BB%D0%BE%D0%B5) O(n<sup>2</sup>), то есть при увеличении массива в 2 раза алгоритм требует в 4 раза больше времени. На больших массивах (1000, 10000 и более элементов) такие алгоритмы могут приводить к серьёзным "тормозам".
+
+# Подсказка (быстрое решение)
+
+Будем идти по массиву и накапливать в некоторой переменной `s` текущую частичную сумму. Если в какой-то момент s окажется отрицательной, то мы просто присвоим `s=0`. Утверждается, что максимум из всех значений переменной s, случившихся за время работы, и будет ответом на задачу.
+
+**Докажем этот алгоритм.**
+
+В самом деле, рассмотрим первый момент времени, когда сумма `s` стала отрицательной. Это означает, что, стартовав с нулевой частичной суммы, мы в итоге пришли к отрицательной частичной сумме -- значит, и весь этот префикс массива, равно как и любой его суффикс имеют отрицательную сумму.
+
+Следовательно, от всего этого префикса массива в дальнейшем не может быть никакой пользы: он может дать только отрицательную прибавку к ответу.
+
+# Быстрое решение
+
+```js
+//+ run
+function getMaxSubSum(arr) {
+  var maxSum = 0, partialSum = 0;
+  for (var i=0; i<arr.length; i++) {
+    partialSum += arr[i];
+    maxSum = Math.max(maxSum, partialSum);
+    if (partialSum < 0) partialSum = 0;
+  }
+  return maxSum;
+}
+
+
+alert( getMaxSubSum([-1, 2, 3, -9]) ); // 5
+alert( getMaxSubSum([-1, 2, 3, -9, 11]) ); // 11
+alert( getMaxSubSum([-2, -1, 1, 2]) ); // 3
+alert( getMaxSubSum([100, -9, 2, -3, 5]) ); // 100
+alert( getMaxSubSum([1, 2, 3]) ); // 6
+alert( getMaxSubSum([-1, -2, -3]) ); // 0
+```
+
+Информацию об алгоритме вы также можете прочитать здесь: [](http://e-maxx.ru/algo/maximum_average_segment) и здесь: [Maximum subarray problem](http://en.wikipedia.org/wiki/Maximum_subarray_problem).
+
+Этот алгоритм требует ровно одного прохода по массиву, его сложность имеет оценку `O(n)`.
\ No newline at end of file
diff --git a/1-js/4-data-structures/6-array/10-maximal-subarray/task.md b/1-js/4-data-structures/6-array/10-maximal-subarray/task.md
new file mode 100644
index 00000000..2381c0f6
--- /dev/null
+++ b/1-js/4-data-structures/6-array/10-maximal-subarray/task.md
@@ -0,0 +1,28 @@
+# Подмассив наибольшей суммы
+
+[importance 2]
+
+На входе массив чисел, например: `arr = [1, -2, 3, 4, -9, 6]`.
+
+Задача -- найти непрерывный подмассив `arr`, сумма элементов которого максимальна. 
+
+Ваша функция должна возвращать только эту сумму.
+
+Например:
+
+```js
+getMaxSubSum([-1, *!*2, 3*/!*, -9]) = 5 (сумма выделенных)
+getMaxSubSum([*!*2, -1, 2, 3*/!*, -9]) = 6
+getMaxSubSum([-1, 2, 3, -9, *!*11*/!*]) = 11 
+getMaxSubSum([-2, -1, *!*1, 2*/!*]) = 3
+getMaxSubSum([*!*100*/!*, -9, 2, -3, 5]) = 100
+getMaxSubSum([*!*1, 2, 3*/!*]) = 6 (неотрицательные - берем всех)
+```
+
+Если все элементы отрицательные, то не берём ни одного элемента и считаем сумму равной нулю:
+
+```js
+getMaxSubSum([-1, -2, -3]) = 0
+```
+
+Постарайтесь придумать решение, которое работает за O(n<sup>2</sup>), а лучше за O(n) операций.
\ No newline at end of file
diff --git a/1-js/4-data-structures/6-array/2-add-item-to-array/solution.md b/1-js/4-data-structures/6-array/2-add-item-to-array/solution.md
new file mode 100644
index 00000000..9f72e68b
--- /dev/null
+++ b/1-js/4-data-structures/6-array/2-add-item-to-array/solution.md
@@ -0,0 +1,6 @@
+Текущий последний элемент имеет индекс `goods.length-1`. Значит, индексом нового элемента будет `goods.length`:
+
+```js
+goods[goods.length] = 'Компьютер'
+```
+
diff --git a/1-js/4-data-structures/6-array/2-add-item-to-array/task.md b/1-js/4-data-structures/6-array/2-add-item-to-array/task.md
new file mode 100644
index 00000000..6f0e6d16
--- /dev/null
+++ b/1-js/4-data-structures/6-array/2-add-item-to-array/task.md
@@ -0,0 +1,7 @@
+# Добавить новый элемент в массив
+
+[importance 5]
+
+Как добавить элемент в конец произвольного массива?
+
+У нас есть массив `goods`. Напишите код для добавления в его конец значения "Компьютер".
diff --git a/1-js/4-data-structures/6-array/3-create-array/solution.md b/1-js/4-data-structures/6-array/3-create-array/solution.md
new file mode 100644
index 00000000..5f6093c8
--- /dev/null
+++ b/1-js/4-data-structures/6-array/3-create-array/solution.md
@@ -0,0 +1,11 @@
+
+
+```js
+//+ run
+var styles = ["Джаз", "Блюз"];
+styles.push("Рок-н-Ролл");
+styles[styles.length-2] = "Классика";
+alert( styles.shift() );
+styles.unshift( "Рэп", "Регги ");
+```
+
diff --git a/1-js/4-data-structures/6-array/3-create-array/task.md b/1-js/4-data-structures/6-array/3-create-array/task.md
new file mode 100644
index 00000000..38434b47
--- /dev/null
+++ b/1-js/4-data-structures/6-array/3-create-array/task.md
@@ -0,0 +1,23 @@
+# Создание массива
+
+[importance 5]
+
+Задача из 5 шагов-строк:
+<ol>
+<li>Создайте массив `styles` с элементами "Джаз", "Блюз".</li>
+<li>Добавьте в конец значение "Рок-н-Ролл"</li>
+<li>Замените предпоследнее значение с конца на "Классика". Код замены предпоследнего значения должен работать для массивов любой длины.</li>
+<li>Удалите первое значение массива и выведите его `alert`.</li>
+<li>Добавьте в начало значения "Рэп" и "Регги".</li>
+</ol>
+
+Массив в результате каждого шага:
+
+```js
+Джаз, Блюз
+Джаз, Блюз, Рок-н-Ролл
+Джаз, Классика, Рок-н-Ролл
+Классика, Рок-н-Ролл
+Рэп, Регги, Классика, Рок-н-Ролл
+```
+
diff --git a/1-js/4-data-structures/6-array/4-random-from-array/solution.md b/1-js/4-data-structures/6-array/4-random-from-array/solution.md
new file mode 100644
index 00000000..9f4d1195
--- /dev/null
+++ b/1-js/4-data-structures/6-array/4-random-from-array/solution.md
@@ -0,0 +1,11 @@
+Для вывода нужен случайный номер от `0` до `arr.length-1` включительно.
+
+```js
+//+ run
+var arr = ["Яблоко", "Апельсин", "Груша", "Лимон"];
+
+var rand = Math.floor( Math.random() * arr.length );
+
+alert(arr[rand]);
+```
+
diff --git a/1-js/4-data-structures/6-array/4-random-from-array/task.md b/1-js/4-data-structures/6-array/4-random-from-array/task.md
new file mode 100644
index 00000000..71fde183
--- /dev/null
+++ b/1-js/4-data-structures/6-array/4-random-from-array/task.md
@@ -0,0 +1,16 @@
+# Получить случайное значение из массива
+
+[importance 3]
+
+Напишите код для вывода `alert` случайного значения из массива:
+
+```js
+var arr = ["Яблоко", "Апельсин", "Груша", "Лимон"];
+```
+
+P.S. Код для генерации случайного целого от `min` to `max` включительно:
+
+```js
+var rand = min + Math.floor( Math.random() * (max+1-min) );
+```
+
diff --git a/1-js/4-data-structures/6-array/5-calculator-for-input/solution.md b/1-js/4-data-structures/6-array/5-calculator-for-input/solution.md
new file mode 100644
index 00000000..d2f7dfc5
--- /dev/null
+++ b/1-js/4-data-structures/6-array/5-calculator-for-input/solution.md
@@ -0,0 +1,23 @@
+В решение ниже обратите внимание: мы не приводим `value` к числу сразу после `prompt`, так как если сделать `value = +value`, то после этого отличить пустую строку от нуля уже никак нельзя. А нам здесь нужно при пустой строке прекращать ввод, а при нуле -- продолжать.
+
+```js
+//+ run demo
+var numbers = [];
+
+while(true) {
+
+  var value = prompt("Введите число", 0);
+  
+  if (value === "" || value === null || isNaN(value)) break;
+
+  numbers.push(+value);
+}
+
+var sum = 0;
+for(var i=0; i<numbers.length; i++) {
+  sum += numbers[i];
+}
+
+alert(sum);
+```
+
diff --git a/1-js/4-data-structures/6-array/5-calculator-for-input/task.md b/1-js/4-data-structures/6-array/5-calculator-for-input/task.md
new file mode 100644
index 00000000..6c3cfab5
--- /dev/null
+++ b/1-js/4-data-structures/6-array/5-calculator-for-input/task.md
@@ -0,0 +1,13 @@
+# Создайте калькулятор для введённых значений 
+
+[importance 4]
+
+Напишите код, который: 
+<ul>
+<li>Запрашивает по очереди значения при помощи `prompt` и сохраняет их в массиве.</li>
+<li>Заканчивает ввод, как только посетитель введёт пустую строку, не число или нажмёт "Отмена".</li>
+<li>При этом ноль `0` не должен заканчивать ввод, это разрешённое число.</li>
+<li>Выводит сумму всех значений массива</li>
+</ul>
+
+[demo /]
\ No newline at end of file
diff --git a/1-js/4-data-structures/6-array/6-item-value/solution.md b/1-js/4-data-structures/6-array/6-item-value/solution.md
new file mode 100644
index 00000000..38e515d0
--- /dev/null
+++ b/1-js/4-data-structures/6-array/6-item-value/solution.md
@@ -0,0 +1,24 @@
+
+
+```js
+//+ run
+var arr = [1,2,3];
+
+var arr2 = arr; // (*)
+arr2[0] = 5;
+
+alert(arr[0]);
+alert(arr2[0]);
+```
+
+Код выведет `5` в обоих случаях, так как массив является объектом. В строке `(*)` в переменную `arr2` копируется ссылка на него, а сам объект в памяти по-прежнему один, в нём отражаются изменения, внесенные через `arr2` или `arr`.
+
+В частности, сравнение `arr2 == arr` даст `true`.
+
+Если нужно именно скопировать массив, то это можно сделать, например, так:
+
+```js
+var arr2 = [];
+for(var i=0; i<arr.length; i++) arr2[i] = arr[i];
+```
+
diff --git a/1-js/4-data-structures/6-array/6-item-value/task.md b/1-js/4-data-structures/6-array/6-item-value/task.md
new file mode 100644
index 00000000..6fea1db6
--- /dev/null
+++ b/1-js/4-data-structures/6-array/6-item-value/task.md
@@ -0,0 +1,18 @@
+# Чему равен элемент массива?
+
+[importance 3]
+
+Что выведет этот код?
+
+```js
+var arr = [1,2,3];
+
+var arr2 = arr;
+arr2[0] = 5;
+
+*!*
+alert(arr[0]);
+alert(arr2[0]);
+*/!*
+```
+
diff --git a/1-js/4-data-structures/6-array/7-array-find/_js.view/solution.js b/1-js/4-data-structures/6-array/7-array-find/_js.view/solution.js
new file mode 100644
index 00000000..a113ad57
--- /dev/null
+++ b/1-js/4-data-structures/6-array/7-array-find/_js.view/solution.js
@@ -0,0 +1,11 @@
+function find(array, value) {
+  if (array.indexOf) { // если метод существует
+    return array.indexOf(value);
+  }
+
+  for(var i=0; i<array.length; i++) {
+    if (array[i] === value) return i;
+  }
+   
+  return -1;
+}
\ No newline at end of file
diff --git a/1-js/4-data-structures/6-array/7-array-find/_js.view/test.js b/1-js/4-data-structures/6-array/7-array-find/_js.view/test.js
new file mode 100644
index 00000000..46465e5b
--- /dev/null
+++ b/1-js/4-data-structures/6-array/7-array-find/_js.view/test.js
@@ -0,0 +1,26 @@
+describe("find", function() {
+
+  describe("возвращает позицию, на которой найден элемент", function() {
+    it("в массиве [1,2,3] находит 1 на позиции 0", function() {
+      assert.equal( find([1, 2, 3], 1), 0);
+    });
+    it("в массиве [1,2,3] находит 2 на позиции 1", function() {
+      assert.equal( find([1, 2, 3], 2), 1);
+    }); 
+    it("в массиве [1,2,3] находит 3 на позиции 2", function() {
+      assert.equal( find([1, 2, 3], 3), 2);
+    });
+  });
+
+  it("если элемент не найден, возвращает -1", function() {
+    assert.equal( find([1,2,3], 0), -1);
+  });
+
+  it("отличает false или null от 0", function() {
+    assert.equal( find([false, true, null], 0), -1);
+  });
+
+  it("отличает 1 от true", function() {
+    assert.equal( find([1, 2, 3], true), -1);
+  });
+});
\ No newline at end of file
diff --git a/1-js/4-data-structures/6-array/7-array-find/solution.md b/1-js/4-data-structures/6-array/7-array-find/solution.md
new file mode 100644
index 00000000..f15d58f7
--- /dev/null
+++ b/1-js/4-data-structures/6-array/7-array-find/solution.md
@@ -0,0 +1,61 @@
+Возможное решение:
+
+```js
+function find(array, value) {
+
+  for(var i=0; i<array.length; i++) {
+    if (array[i] == value) return i;
+  }
+   
+  return -1;
+}
+```
+
+Однако, в нем ошибка, т.к. сравнение `==` не различает `0` и `false`. 
+
+Поэтому лучше использовать `===`. Кроме того, в современном стандарте JavaScript существует встроенная фунция <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf">Array#indexOf</a>, которая работает именно таким образом. Имеет смысл ей воспользоваться, если браузер ее поддерживает.
+
+```js
+//+ run
+function find(array, value) {
+  if (array.indexOf) { // если метод существует
+    return array.indexOf(value);
+  }
+
+  for(var i=0; i<array.length; i++) {
+    if (array[i] === value) return i;
+  }
+   
+  return -1;
+}
+
+var arr = ["a", -1, 2, "b"];
+
+var index = find(arr, 2);
+
+alert(index);
+```
+
+... Но еще лучшим вариантом было бы определить `find` по-разному в зависимости от поддержки браузером метода `indexOf`:
+
+```js
+// создаем пустой массив и проверяем поддерживается ли indexOf
+if ( [].indexOf ) { 
+
+  var find = function(array, value) {
+    return array.indexOf(value);
+  }
+
+} else {
+  var find = function(array, value) {
+    for(var i=0; i<array.length; i++) {
+      if (array[i] === value) return i;
+    }
+   
+    return -1;
+  }
+
+}
+```
+
+Этот способ - лучше всего, т.к. не требует при каждом запуске `find` проверять поддержку `indexOf`.
diff --git a/1-js/4-data-structures/6-array/7-array-find/task.md b/1-js/4-data-structures/6-array/7-array-find/task.md
new file mode 100644
index 00000000..7b66d9b3
--- /dev/null
+++ b/1-js/4-data-structures/6-array/7-array-find/task.md
@@ -0,0 +1,18 @@
+# Поиск в массиве
+
+[importance 3]
+
+Создайте функцию `find(arr, value)`, которая ищет в массиве `arr` значение `value` и возвращает его номер, если найдено, или `-1`, если не найдено.
+
+Например:
+
+```js
+arr = [ "test", 2, 1.5, false ];
+
+find(arr, "test"); // 0
+find(arr, 2); // 1
+find(arr, 1.5); // 2
+
+find(arr, 0); // -1
+```
+
diff --git a/1-js/4-data-structures/6-array/8-filter-range/_js.view/solution.js b/1-js/4-data-structures/6-array/8-filter-range/_js.view/solution.js
new file mode 100644
index 00000000..0e87ed19
--- /dev/null
+++ b/1-js/4-data-structures/6-array/8-filter-range/_js.view/solution.js
@@ -0,0 +1,11 @@
+function filterRange(arr, a, b) {
+  var result = [];
+
+  for(var i=0; i<arr.length; i++) {
+    if (arr[i] >= a && arr[i] <= b) {
+      result.push(arr[i]);
+    }
+  }
+
+  return result;
+}
\ No newline at end of file
diff --git a/1-js/4-data-structures/6-array/8-filter-range/_js.view/test.js b/1-js/4-data-structures/6-array/8-filter-range/_js.view/test.js
new file mode 100644
index 00000000..0007bbbe
--- /dev/null
+++ b/1-js/4-data-structures/6-array/8-filter-range/_js.view/test.js
@@ -0,0 +1,15 @@
+describe("filterRange", function() {
+  it("не меняет исходный массив", function() {
+    var arr = [5, 4, 3, 8, 0];
+  
+    filterRange(arr, 0, 10);
+    assert.deepEqual(arr, [5,4,3,8,0]);
+  });
+
+  it("оставляет только значения указанного интервала", function() {
+    var arr = [5, 4, 3, 8, 0];
+  
+    var result = filterRange(arr, 3, 5);
+    assert.deepEqual(result, [5,4,3]);
+  });
+});
diff --git a/1-js/4-data-structures/6-array/8-filter-range/solution.md b/1-js/4-data-structures/6-array/8-filter-range/solution.md
new file mode 100644
index 00000000..d37bc58b
--- /dev/null
+++ b/1-js/4-data-structures/6-array/8-filter-range/solution.md
@@ -0,0 +1,29 @@
+# Алгоритм решения
+<ol>
+<li>Создайте временный пустой массив `var results = []`. </li>
+<li>Пройдите по элементам `arr` в цикле и заполните его.</li>
+<li>Возвратите `results`.</li>
+</ol>
+
+# Решение
+
+```js
+//+ run
+function filterRange(arr, a, b) {
+  var result = [];
+
+  for(var i=0; i<arr.length; i++) {
+    if (arr[i] >= a && arr[i] <= b) {
+      result.push(arr[i]);
+    }
+  }
+
+  return result;
+}
+
+var arr = [5, 4, 3, 8, 0];
+
+var filtered = filterRange(arr, 3, 5);
+alert(filtered);
+```
+
diff --git a/1-js/4-data-structures/6-array/8-filter-range/task.md b/1-js/4-data-structures/6-array/8-filter-range/task.md
new file mode 100644
index 00000000..150f7737
--- /dev/null
+++ b/1-js/4-data-structures/6-array/8-filter-range/task.md
@@ -0,0 +1,17 @@
+# Фильтр диапазона
+
+[importance 3]
+
+Создайте фунцию `filterRange(arr, a, b)`, которая принимает массив чисел `arr` и возвращает новый массив, который содержит только числа из `arr` из диапазона от `a` до `b`. То есть, проверка имеет вид `a ≤ arr[i] ≤ b`. 
+Функция не должна менять `arr`.
+
+Пример работы:
+
+```js
+var arr = [5, 4, 3, 8, 0];
+
+var filtered = filterRange(arr, 3, 5);
+// теперь filtered = [5, 4, 3]
+// arr не изменился
+```
+
diff --git a/1-js/4-data-structures/6-array/9-eratosthenes-sieve/solution.md b/1-js/4-data-structures/6-array/9-eratosthenes-sieve/solution.md
new file mode 100644
index 00000000..03dc51b2
--- /dev/null
+++ b/1-js/4-data-structures/6-array/9-eratosthenes-sieve/solution.md
@@ -0,0 +1,40 @@
+Их сумма равна `1060`.
+
+```js
+//+ run
+// шаг 1
+var arr = [];
+
+for (var i=2; i<100; i++) {
+  arr[i] = true
+}
+
+// шаг 2
+var p = 2;
+
+do {
+  // шаг 3
+  for (i=2*p; i<100; i+=p) {
+    arr[i] = false;
+  }
+
+  // шаг 4
+  for (i=p+1; i<100; i++) {
+    if (arr[i]) break;
+  }
+
+  p = i;
+} while (p*p < 100); // шаг 5
+
+// шаг 6 (готово)
+// посчитать сумму
+var sum = 0;
+for (i=0; i<arr.length; i++) {
+  if (arr[i]) {
+    sum += i;
+  }
+}
+
+alert(sum);
+```
+
diff --git a/1-js/4-data-structures/6-array/9-eratosthenes-sieve/task.md b/1-js/4-data-structures/6-array/9-eratosthenes-sieve/task.md
new file mode 100644
index 00000000..fe367dc3
--- /dev/null
+++ b/1-js/4-data-structures/6-array/9-eratosthenes-sieve/task.md
@@ -0,0 +1,25 @@
+# Решето Эратосфена
+
+[importance 3]
+
+Целое число, большее `1`, называется *простым*, если оно не делится нацело ни на какое другое, кроме себя и `1`.
+
+Древний алгоритм "Решето Эратосфена" для поиска всех простых чисел до `n` выглядит так:
+
+<ol>
+<li>Создать список последовательных чисел от `2` до `n`: `2, 3, 4, ..., n`.</li>
+<li>Пусть `p=2`, это первое простое число.</li>
+<li>Зачеркнуть все последующие числа в списке с разницей в `p`, т.е. `2*p, 3*p, 4*p` и т.д. В случае `p=2` это будут `4,6,8...`.</li>
+<li>Поменять значение `p` на первое незачеркнутое число после `p`.</li>
+<li>Повторить шаги 3-4 пока <code>p<sup>2</sup> &lt; n</code>.</li>
+<li>Все оставшиеся незачеркнутыми числа -- простые.</li>
+</ol>
+
+Посмотрите также <a href="/files/tutorial/intro/array/sieve.gif">анимацию алгоритма</a>.
+
+Реализуйте "Решето Эратосфена" в JavaScript, используя массив.
+
+Найдите все простые числа до `100` и выведите их сумму.
+
+
+
diff --git a/1-js/4-data-structures/6-array/article.md b/1-js/4-data-structures/6-array/article.md
new file mode 100644
index 00000000..fe381029
--- /dev/null
+++ b/1-js/4-data-structures/6-array/article.md
@@ -0,0 +1,440 @@
+# Массивы c числовыми индексами
+
+*Массив с числовыми индексами* -- это коллекция данных, которая хранит сколько угодно значений, причем у каждого значения -- свой уникальный номер.
+
+Если переменная -- это *коробка для данных*, то массив -- это *шкаф с нумерованными ячейками*, в каждой из которых могут быть свои данные.
+[cut]
+Например, при создании электронного магазина нужно хранить список товаров -- для таких задач и придуман массив.
+
+## Объявление
+
+Синтаксис для создания нового массива -- квадратные скобки со списком элементов внутри. 
+
+Пустой массив:
+
+```js
+var arr = [];
+```
+
+Массив `fruits` с тремя элементами:
+
+```js
+var fruits = ["Яблоко", "Апельсин", "Слива"];
+```
+
+**Элементы нумеруются, начиная с нуля.** Чтобы получить нужный элемент из массива -- указывается его номер в квадратных скобках:
+
+```js
+//+ run
+var fruits = ["Яблоко", "Апельсин", "Слива"];
+
+alert(fruits[0]); // Яблоко
+alert(fruits[1]); // Апельсин
+alert(fruits[2]); // Слива
+```
+
+Элемент можно всегда заменить:
+
+```js
+fruits[2] = 'Груша'; // теперь ["Яблоко", "Апельсин", "Груша"]
+```
+
+... Или добавить:
+
+```js
+fruits[3] = 'Лимон'; // теперь ["Яблоко", "Апельсин", "Груша", "Лимон"]
+```
+
+Общее число элементов, хранимых в массиве, содержится в его свойстве `length`:
+
+```js
+//+ run
+var fruits = ["Яблоко", "Апельсин", "Груша"]; 
+
+alert(fruits.length); // 3
+```
+
+**Через `alert` можно вывести и массив целиком.** При этом его элементы будут перечислены через запятую:
+
+```js
+//+ run
+var fruits = ["Яблоко", "Апельсин", "Груша"]; 
+
+alert(fruits); // Яблоко,Апельсин,Груша
+```
+
+**В массиве может храниться любое число элементов любого типа.** В том числе, строки, числа, объекты и т.п.:
+
+```js
+//+ run
+// микс значений
+var arr = [ 1, 'Имя', { name: 'Петя' }, true ];
+
+// получить объект из массива и тут же -- его свойство
+alert( arr[2].name ); // Петя
+```
+
+## Методы pop/push, shift/unshift  
+
+Одно из применений массива -- это [очередь](http://ru.wikipedia.org/wiki/%D0%9E%D1%87%D0%B5%D1%80%D0%B5%D0%B4%D1%8C_%28%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%D0%B5%29). В классическом программировании так называют упорядоченную коллекцию элементов, такую что элементы добавляются в конец, а обрабатываются -- с начала. 
+
+В реальной жизни эта структура данных встречается очень часто. Например, очередь сообщений, которые надо отослать.
+
+Очень близка к очереди еще одна структура данных: [стек](http://ru.wikipedia.org/wiki/%D0%A1%D1%82%D0%B5%D0%BA). Это такая коллекция элементов, в которой новые элементы добавляются в конец и берутся с конца. 
+
+Например, стеком является колода карт, в которую новые карты кладутся сверху, и берутся -- тоже сверху.
+
+Для того, чтобы реализовывать эти структуры данных, и просто для более удобной работы с началом и концом массива существуют специальные методы.
+
+### Конец массива
+
+<dl>
+<dt>`pop`</dt>
+<dd>Удаляет *последний* элемент из массива и возвращает его:
+
+```js
+//+ run
+var fruits = ["Яблоко", "Апельсин", "Груша"];
+
+alert( fruits.pop() ); // удалили "Груша"
+
+alert(fruits); // Яблоко, Апельсин
+```
+
+</dd>
+<dt>`push`</dt>
+<dd>Добавляет элемент *в конец* массива:
+
+```js
+//+ run
+var fruits = ["Яблоко", "Апельсин"];
+
+fruits.push("Груша");
+
+alert(fruits); // Яблоко, Апельсин, Груша
+```
+
+Является полным аналогом `fruits[fruits.length] = ...`.
+</dd>
+</dl>
+
+### Начало массива
+
+<dl>
+<dt>`shift`</dt>
+<dd>Удаляет из массива *первый* элемент и возвращает его:
+
+```js
+var fruits = ["Яблоко", "Апельсин", "Груша"];
+
+alert( fruits.shift() ); // удалили Яблоко
+
+alert(fruits); // Апельсин, Груша
+```
+
+</dd>
+<dt>`unshift`</dt>
+<dd>Добавляет элемент *в начало* массива:
+
+```js
+var fruits = ["Апельсин", "Груша"];
+
+fruits.unshift('Яблоко');
+
+alert(fruits); // Яблоко, Апельсин, Груша
+```
+
+</dd>
+</dl>
+
+<img src="shiftpush.png">
+
+Методы `push` и `unshift` могут добавлять сразу по несколько элементов:
+
+```js
+//+ run
+var fruits = ["Яблоко"];
+
+fruits.push("Апельсин", "Персик");
+fruits.unshift("Ананас", "Лимон");
+
+// результат: ["Ананас", "Лимон", "Яблоко", "Апельсин", "Персик"]
+alert(fruits);
+```
+
+## Внутреннее устройство массива
+
+Массив -- это объект, где в качестве ключей выбраны цифры, с дополнительными методами и свойством `length`.
+
+Так как это объект, то в функцию он передаётся по ссылке:
+
+```js
+//+ run
+function eat(arr) {
+  arr.pop();
+}
+
+var arr = ["нам", "не", "страшен", "серый", "волк"]
+
+alert(arr.length); // 5
+eat(arr);
+eat(arr);
+alert(arr.length); // 3, в функцию массив не скопирован, а передана ссылка
+```
+
+**Ещё одно следствие -- можно присваивать в массив любые свойства.**
+
+Например:
+
+```js
+var fruits = []; // создать массив
+
+fruits[99999] = 5; // присвоить свойство с любым номером
+
+fruits.age = 25; // назначить свойство со строковым именем
+```
+
+.. Но массивы для того и придуманы в JavaScript, чтобы удобно работать именно *с упорядоченными, нумерованными данными*. Для этого в них существуют специальные методы и свойство `length`. 
+
+Как правило, нет причин использовать массив как обычный объект, хотя технически это и возможно.
+
+[warn header="Вывод массива с \"дырами\""]
+Если в массиве есть пропущенные индексы, то при выводе в большинстве браузеров появляются "лишние" запятые, например:
+
+```js
+//+ run
+var a = [];
+a[0] = 0;
+a[5] = 5;
+
+alert(a); // 0,,,,,5
+```
+
+Эти запятые появляются потому, что алгоритм вывода массива идёт от `0` до `arr.length` и выводит всё через запятую. Отсутствие значений даёт несколько запятых подряд.
+[/warn]
+
+### Влияние на быстродействие
+
+Методы `push/pop` выполняются быстро, а `shift/unshift` -- медленно.
+
+Чтобы понять, почему работать с концом массива -- быстрее, чем с его началом, разберём происходящее подробнее.
+
+Операция `shift` выполняет два действия:
+<ol>
+<li>Удалить элемент в начале.</li>
+<li>Обновить внутреннее свойство `length`.</li>
+</ol>
+
+При этом, так как все элементы находятся в своих ячейках, просто очистить ячейку с номером `0` недостаточно. Нужно еще и переместить все ячейки на `1` вниз (красным на рисунке подсвечены изменения):
+
+```js
+*!*fruits.shift();*/!* // убрать 1 элемент с начала
+```
+
+<img src="shift.png">
+
+Чем больше элементов в массиве, тем дольше их перемещать.
+
+Аналогично работает `unshift`: чтобы добавить элемент в начало массива, нужно сначала перенести все существующие.
+
+У методов `push/pop` таких проблем нет. Для того, чтобы удалить элемент, метод `pop` очищает ячейку и укорачивает `length`.
+
+```js
+*!*fruits.pop();*/!*  // убрать 1 элемент с конца
+```
+
+<img src="pop.png">
+
+Аналогично работает `push`.
+
+
+## Перебор элементов
+
+Для перебора элементов обычно используется цикл:
+
+```js
+//+ run
+var arr = ["Яблоко", "Апельсин", "Груша"];
+
+*!*
+for (var i=0; i<arr.length; i++) {
+  alert( arr[i] );
+}
+*/!*
+```
+
+[warn header="Не используйте `for..in` для массивов"]
+Так как массив является объектом, то возможен и вариант `for..in`:
+
+```js
+//+ run
+var arr = ["Яблоко", "Апельсин", "Груша"];
+
+*!*
+for (var key in arr) {
+*/!*
+  alert( arr[key] ); // Яблоко, Апельсин, Груша
+}
+```
+
+Недостатки этого способа:
+
+<ul>
+<li>Цикл `for..in` выведет *все свойства* объекта, а не только цифровые. 
+
+В браузере, при работе с объектами страницы, встречаются коллекции элементов, которые по виду как массивы, но имеют дополнительные нецифровые свойства, которые будут видны в цикле `for..in`. 
+
+Бывают и библиотеки, которые предоставляют такие коллекции. Например jQuery. С виду -- массив, но есть дополнительные свойства. Для перебора только цифровых свойств нужен цикл `for(var i=0; i<arr.length...)`
+</li>
+<li>Цикл `for (var i=0; i<arr.length; i++)` в современных браузерах выполняется в 10-100 раз быстрее. Казалось бы, по виду он сложнее, но браузер особым образом оптимизирует такие циклы.</li>
+</ul>
+
+**Если кратко: цикл `for(var i=0; i<arr.length...)` надёжнее и быстрее.**
+[/warn]
+
+
+## Особенности работы length
+
+Встроенные методы для работы с массивом автоматически обновляют его длину `length`.
+
+**Длина `length` -- не количество элементов массива, а `последний индекс + 1`**. Так уж оно устроено.
+
+Это легко увидеть на следующем примере:
+
+```js
+//+ run
+var arr = [];
+arr[1000] = true;
+
+alert(arr.length); // *!*1001*/!*
+```
+
+Вообще, если у вас элементы массива нумеруются случайно или с большими пропусками, то стоит подумать о том, чтобы использовать обычный объект. 
+
+Массивы предназначены именно для работы с непрерывной упорядоченной коллекцией элементов.
+
+### Используем length для укорачивания массива
+
+Обычно нам не нужно самостоятельно менять `length`... Но есть один фокус, который можно провернуть. 
+
+**При уменьшении `length` массив укорачивается.** Причем этот процесс необратимый, т.е. даже если потом вернуть `length` обратно -- значения не восстановятся:
+
+```js
+//+ run
+var arr = [1, 2, 3, 4, 5]; 
+
+arr.length = 2; // укоротить до 2 элементов
+alert(arr); // [1, 2]
+
+arr.length = 5; // вернуть length обратно, как было
+alert(arr[3]); // undefined: значения не вернулись
+```
+
+Самый простой способ очистить массив -- это `arr.length=0`.
+   
+## Создание вызовом new Array [#new-array]
+   
+### new Array() 
+Существует еще один синтаксис для создания массива:
+
+```js
+var arr = *!*new Array*/!*("Яблоко", "Груша", "и т.п.");
+```
+
+Он редко используется, т.к. квадратные скобки `[]` короче.
+
+Кроме того, у него есть одна особенность. Обычно `new Array(элементы, ...)` создаёт массив из данных элементов, но если у него один аргумент, и это число --то он создает массив *без элементов, но с заданной длиной*.
+
+```js
+//+ run
+var arr = new Array(2,3); // создает массив [2, 3]
+
+arr = new Array(2); // создаст массив [2] ?
+
+alert(arr[0]); // нет! у нас массив без элементов, длины 2
+```
+
+Что же такое этот "массив без элементов, но с длиной"? Как такое возможно?
+
+Оказывается, очень даже возможно и соответствует объекту `{length: 2}`. Получившийся массив ведёт себя так, как будто его элементы равны `undefined`.
+
+Это может быть неожиданным сюрпризом, поэтому обычно используют квадратные скобки.
+
+### Многомерные массивы   
+
+Массивы в JavaScript могут содержать в качестве элементов другие массивы. Это можно использовать для создания многомерных массивов, например матриц:
+
+```js
+//+ run
+var matrix = [
+  [1, 2, 3],
+  [4, 5, 6],
+  [7, 8, 9]
+];
+
+alert(matrix[1][1]); // центральный элемент
+```
+
+## Внутреннее представление массивов
+
+[warn header="Hardcore coders only"]
+Эта секция относится ко внутреннему устройству структуры данных и требует специальных знаний. Она не обязательна к прочтению.
+[/warn]
+
+Числовые массивы, согласно спецификации, являются объектами, в которые добавили ряд свойств, методов и автоматическую длину `length`. Но внутри они, как правило, устроены по-другому.
+
+**Современные интерпретаторы стараются оптимизировать их и хранить в памяти не в виде хэш-таблицы, а в виде непрерывной области памяти, по которой легко пробежаться от начала до конца.** 
+
+Операции с массивами также оптимизируются, особенно если массив хранит только один тип данных, например только числа. Порождаемый набор инструкций для процессора получается очень эффективным.
+
+Чтобы у интерпретатора получались эти оптимизации, программист не должен мешать. 
+
+В частности:
+<ul>
+<li>Не ставить массиву произвольные свойства, такие как `arr.test = 5`. То есть, работать именно как с массивом, а не как с объектом.</li>
+<li>Заполнять массив непрерывно. Как только браузер встречает необычное поведение массива, например устанавливается значение `arr[0]`, а потом сразу `arr[1000]`, то он начинает работать с ним, как с обычным объектом. Как правило, это влечёт преобразование его в хэш-таблицу.</li>
+</ul>
+
+
+Если следовать этим принципам, то массивы будут занимать меньше памяти и быстрее работать.
+
+## Итого
+
+Массивы существуют для работы с упорядоченным набором элементов. 
+
+**Объявление:**
+
+```js
+// предпочтительное
+var arr = [ элемент1, элемент2... ];
+
+// new Array
+var arr = new Array( элемент1, элемент2...);
+```
+
+При этом `new Array(число)` создаёт массив заданной длины, *без элементов*. Чтобы избежать ошибок, предпочтителен первый синтаксис.
+
+**Свойство `length`** -- длина массива. Если точнее, то последний индекс массива плюс `1`. Если её уменьшить вручную, то массив укоротится. Если `length` больше реального количества элементов, то отсутствующие элементы равны `undefined`.
+
+
+Массив можно использовать как очередь или стек.
+
+**Операции с концом массива:**
+<ul>
+<li>`arr.push(элемент1, элемент2...)` добавляет элементы в конец.</li>
+<li>`var elem = arr.pop()` удаляет и возвращает последний элемент.</li>
+</ul>
+
+**Операции с началом массива:**
+<ul>
+<li>`arr.unshift(элемент1, элемент2...)` добавляет элементы в начало.</li>
+<li>`var elem = arr.shift()` удаляет и возвращает первый элемент.</li>
+</ul>
+
+Эти операции перенумеровывают все элементы, поэтому работают медленно.
+
+В следующей главе мы рассмотрим другие методы для работы с массивами.
+
+
+
+
diff --git a/1-js/4-data-structures/6-array/pop.png b/1-js/4-data-structures/6-array/pop.png
new file mode 100755
index 00000000..80551a8c
Binary files /dev/null and b/1-js/4-data-structures/6-array/pop.png differ
diff --git a/1-js/4-data-structures/6-array/shift.png b/1-js/4-data-structures/6-array/shift.png
new file mode 100755
index 00000000..6c412948
Binary files /dev/null and b/1-js/4-data-structures/6-array/shift.png differ
diff --git a/1-js/4-data-structures/6-array/shiftpush.png b/1-js/4-data-structures/6-array/shiftpush.png
new file mode 100755
index 00000000..568b1b77
Binary files /dev/null and b/1-js/4-data-structures/6-array/shiftpush.png differ
diff --git a/1-js/4-data-structures/7-array-methods/1-add-class/_js.view/solution.js b/1-js/4-data-structures/7-array-methods/1-add-class/_js.view/solution.js
new file mode 100644
index 00000000..316e3087
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/1-add-class/_js.view/solution.js
@@ -0,0 +1,11 @@
+function addClass(obj, cls) {
+  var classes = obj.className ? obj.className.split(' ') : [];
+
+  for(var i=0; i<classes.length; i++) {
+    if (classes[i] == cls) return; // класс уже есть
+  }
+
+  classes.push(cls); // добавить
+   
+  obj.className = classes.join(' '); // и обновить свойство
+}
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array-methods/1-add-class/_js.view/test.js b/1-js/4-data-structures/7-array-methods/1-add-class/_js.view/test.js
new file mode 100644
index 00000000..bc267a49
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/1-add-class/_js.view/test.js
@@ -0,0 +1,27 @@
+describe("addClass", function() {
+
+  it("добавляет класс, которого нет", function() {
+    var obj = { className: 'open menu' };
+    addClass(obj, 'new');
+    assert.deepEqual(obj, {
+      className: 'open menu new'
+    });
+  });
+
+  it("не добавляет класс, который уже есть", function() {
+    var obj = { className: 'open menu' };
+    addClass(obj, 'open');
+    assert.deepEqual(obj, {
+      className: 'open menu'
+    });
+  });
+
+  it("не добавляет лишних пробелов, который уже есть", function() {
+    var obj = { className: '' };
+    addClass(obj, 'open');
+    assert.deepEqual(obj, {
+      className: 'open'
+    });
+  });
+
+});
diff --git a/1-js/4-data-structures/7-array-methods/1-add-class/solution.md b/1-js/4-data-structures/7-array-methods/1-add-class/solution.md
new file mode 100644
index 00000000..89fe6b7c
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/1-add-class/solution.md
@@ -0,0 +1,28 @@
+Решение заключается в превращении `obj.className` в массив при помощи `split`. 
+После этого в нем можно проверить наличие класса, и если нет - добавить.
+
+```js
+//+ run
+function addClass(obj, cls) {
+  var classes = obj.className ? obj.className.split(' ') : [];
+
+  for(var i=0; i<classes.length; i++) {
+    if (classes[i] == cls) return; // класс уже есть
+  }
+
+  classes.push(cls); // добавить
+   
+  obj.className = classes.join(' '); // и обновить свойство
+}
+
+var obj = { className: 'open menu' };
+
+addClass(obj, 'new');
+addClass(obj, 'open');
+addClass(obj, 'me');
+alert(obj.className)   // open menu new me
+```
+
+P.S. "Альтернативный" подход к проверке наличия класса вызовом `obj.className.indexOf(cls)` был бы неверным. В частности, он найдёт `cls = "menu"` в строке классов `obj.className = "open mymenu"`. 
+
+P.P.S. Проверьте, нет ли в вашем решении присвоения `obj.className += " " + cls`. Не добавляет ли оно лишний пробел в случае, если изначально `obj.className = ""`?
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array-methods/1-add-class/task.md b/1-js/4-data-structures/7-array-methods/1-add-class/task.md
new file mode 100644
index 00000000..70ac7651
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/1-add-class/task.md
@@ -0,0 +1,23 @@
+# Добавить класс в строку
+
+[importance 5]
+
+В объекте есть свойство `className`, которое содержит список "классов" - слов, разделенных пробелом:
+
+```js
+var obj = {
+  className: 'open menu'
+}
+```
+
+Создайте функцию `addClass(obj, cls)`, которая добавляет в список класс `cls`, но только если его там еще нет:
+
+```js
+addClass(obj, 'new'); // obj.className='open menu new'
+addClass(obj, 'open');  // без изменений (класс уже существует)
+addClass(obj, 'me'); // obj.className='open menu new me'
+
+alert(obj.className);  // "open menu new me"
+```
+
+P.S. Ваша функция не должна добавлять лишних пробелов.
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array-methods/10-filter-anagrams/_js.view/solution.js b/1-js/4-data-structures/7-array-methods/10-filter-anagrams/_js.view/solution.js
new file mode 100644
index 00000000..a5a70092
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/10-filter-anagrams/_js.view/solution.js
@@ -0,0 +1,16 @@
+function aclean(arr) {
+  var obj = {};
+
+  for(var i=0; i<arr.length; i++) {
+    var sorted = arr[i].toLowerCase().split("").sort().join(""); 
+    obj[sorted] = arr[i]; 
+  }
+
+  var result = [];
+
+  for(var key in obj) {
+    result.push(obj[key]);
+  }
+
+  return result;
+}
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array-methods/10-filter-anagrams/_js.view/test.js b/1-js/4-data-structures/7-array-methods/10-filter-anagrams/_js.view/test.js
new file mode 100644
index 00000000..cf97fa8b
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/10-filter-anagrams/_js.view/test.js
@@ -0,0 +1,13 @@
+describe("aclean", function() {
+ 
+  it("удаляет анаграммы", function() {
+    var arr = ["воз", "киборг", "корсет", "зов", "гробик", "костер", "сектор"];
+    assert.sameMembers(aclean(arr), ["гробик", "зов", "сектор"]);
+  });
+ 
+  it("не различает регистр символов", function() {
+    var arr = ["воз", "ЗОВ"];
+    assert.equal( aclean(arr).length, 1 );
+  });
+
+});    
diff --git a/1-js/4-data-structures/7-array-methods/10-filter-anagrams/solution.md b/1-js/4-data-structures/7-array-methods/10-filter-anagrams/solution.md
new file mode 100644
index 00000000..d1c98ab1
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/10-filter-anagrams/solution.md
@@ -0,0 +1,70 @@
+# Решение 
+
+Чтобы обнаружить анаграммы, разобьём каждое слово на буквы и отсортируем их. В отсортированном по буквам виде все анаграммы одинаковы.
+
+Например:
+
+```
+воз, зов -> взо
+киборг, гробик -> бгикор
+...
+```
+
+По такой последовательности будем делать массив уникальным. 
+
+Для этого воспользуемся вспомогательным объектом, в который будем записывать слова по отсортированному ключу:
+
+```js
+//+ run
+function aclean(arr) {
+  // этот объект будем использовать для уникальности
+  var obj = {};
+
+  for(var i=0; i<arr.length; i++) {
+    // разбить строку на буквы, отсортировать и слить обратно
+*!*
+    var sorted = arr[i].toLowerCase().split('').sort().join(''); // (*)
+*/!*
+
+    obj[sorted] = arr[i]; // сохраняет только одно значение с таким ключом
+  }
+
+  var result = [];
+
+  // теперь в obj находится для каждого ключа ровно одно значение
+  for(var key in obj) result.push(obj[key]);
+
+  return result;
+}
+
+var arr = ["воз", "киборг", "корсет", "ЗОВ", "гробик", "костер", "сектор"];
+
+alert( aclean(arr) );
+```
+
+Приведение слова к  сортированному по буквам виду осуществляется цепочкой вызовов в строке `(*)`.
+
+Для удобства комментирования разобьём её на несколько строк (JavaScript это позволяет):
+
+```js
+var sorted = arr[i] // ЗОВ
+  .toLowerCase()   // зов
+  .split('')        // ['з','о','в']  
+  .sort()           // ['в','з','о']
+  .join('');        // взо
+```
+
+Получится, что два разных слова `'ЗОВ'` и `'воз'` получат одинаковую отсортированную форму `'взо'`. 
+
+Следующая строка:
+
+```js
+obj[sorted] = arr[i];
+```
+
+В объект `obj` будет записано сначала первое из слов `obj['взо'] = "воз"`, а затем `obj['взо'] = 'ЗОВ'`. 
+
+Обратите внимание, ключ -- отсортирован, а само слово -- в исходной форме, чтобы можно было потом получить его из объекта.
+
+Вторая запись по тому же ключу перезапишет первую, то есть в объекте останется ровно одно слово с таким набором букв.
+
diff --git a/1-js/4-data-structures/7-array-methods/10-filter-anagrams/task.md b/1-js/4-data-structures/7-array-methods/10-filter-anagrams/task.md
new file mode 100644
index 00000000..9654d440
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/10-filter-anagrams/task.md
@@ -0,0 +1,27 @@
+# Отфильтровать анаграммы
+
+[importance 3]
+
+*Анаграммы* -- слова, состоящие из одинакового количества одинаковых букв, но в разном порядке.
+Например:
+
+```
+воз - зов
+киборг - гробик
+корсет - костер - сектор
+```
+
+Напишите функцию `aclean(arr)`, которая возвращает массив слов, очищенный от анаграмм. 
+
+Например:
+
+```js
+var arr = ["воз", "киборг", "корсет", "ЗОВ", "гробик", "костер", "сектор"];
+
+alert( aclean(arr) ); // "воз,киборг,корсет" или "ЗОВ,гробик,сектор"
+```
+
+Из каждой группы анаграмм должно остаться только одно слово, не важно какое.
+
+
+
diff --git a/1-js/4-data-structures/7-array-methods/11-array-unique/_js.view/solution.js b/1-js/4-data-structures/7-array-methods/11-array-unique/_js.view/solution.js
new file mode 100644
index 00000000..a4f7cdce
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/11-array-unique/_js.view/solution.js
@@ -0,0 +1,10 @@
+function unique(arr) {
+  var obj = {};
+
+  for(var i=0; i<arr.length; i++) {
+    var str = arr[i];
+    obj[str] = true; // запомнить строку в виде свойства объекта
+  }
+ 
+  return Object.keys(obj); // или собрать ключи перебором для IE<9
+}
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array-methods/11-array-unique/_js.view/test.js b/1-js/4-data-structures/7-array-methods/11-array-unique/_js.view/test.js
new file mode 100644
index 00000000..1659a053
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/11-array-unique/_js.view/test.js
@@ -0,0 +1,14 @@
+describe("unique", function() {
+  it("убирает неуникальные элементы из массива", function() {
+    var strings = ["кришна", "кришна", "харе", "харе", 
+      "харе", "харе", "кришна", "кришна", "8-()"];
+
+    assert.deepEqual( unique(strings), ["кришна", "харе", "8-()"] ); 
+  });
+
+  it("не изменяет исходный массив", function() {
+    var strings = ["кришна", "кришна", "харе", "харе"];
+    unique(strings);
+    assert.deepEqual( strings, ["кришна", "кришна", "харе", "харе"] ); 
+  });
+});
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array-methods/11-array-unique/solution.md b/1-js/4-data-structures/7-array-methods/11-array-unique/solution.md
new file mode 100644
index 00000000..7240bc6c
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/11-array-unique/solution.md
@@ -0,0 +1,81 @@
+# Решение перебором (медленное)
+
+Пройдём по массиву вложенным циклом. 
+
+Для каждого элемента мы будем искать, был ли такой уже. Если был -- игнорировать:
+
+```js
+//+ run
+function unique(arr) {
+  var obj = {};
+  var result = [];
+
+  nextInput:
+  for(var i=0; i<arr.length; i++) {
+    var str = arr[i];                      // для каждого элемента
+    for(var j=0; j<result.length; j++) {   // ищем, был ли он уже?
+      if (result[j] == str) continue nextInput; // если да, то следующий
+    }
+    result.push(str);
+  }
+ 
+  return result;
+}
+
+var strings = ["кришна", "кришна", "харе", "харе", 
+  "харе", "харе", "кришна", "кришна", "8-()"];
+
+alert( unique(strings) ); // кришна, харе, 8-()
+```
+
+Давайте посмотрим, насколько быстро он будет работать.
+
+Предположим, в массиве `100` элементов. Если все они одинаковые, то `result` будет состоять из одного элемента и вложенный цикл будет выполняться сразу. В этом случае всё хорошо.
+
+А если все, или почти все элементы разные?
+
+В этом случае для каждого элемента понадобится обойти весь текущий массив результатов, после чего -- добавить в этот массив.
+
+<ol>
+<li>Для первого элемента -- это обойдётся в `0` операций доступа к элементам `result` (он пока пустой).</li>
+<li>Для второго элемента -- это обойдётся в `1` операцию доступа к элементам `result`.</li>
+<li>Для третьего элемента -- это обойдётся в `2` операции доступа к элементам `result`.</li>
+<li>...Для n-го элемента -- это обойдётся в `n-1` операций доступа к элементам `result`.</li>
+</ul>
+
+Всего <code>0 + 1 + 2 + ... + n-1 = (n-1)*n/2 = n<sup>2</sup>/2 - n/2</code> (как сумма арифметической прогрессии), то есть количество операций растёт примерно как квадрат от `n`.
+
+Это очень быстрый рост. Для `100` элементов -- `4950` операций, для `1000` -- `499500` (по формуле выше).
+
+Поэтому такое решение подойдёт только для небольших массивов. Вместо вложенного `for` можно использовать и `arr.indexOf`, ситуация от этого не поменяется, так как `indexOf` тоже ищет перебором.
+
+# Решение с объектом (быстрое)
+
+Наилучшая техника для выбора уникальных строк -- использование вспомогательного объекта. Ведь название свойства в объекте, с одной стороны -- строка, а с другой -- всегда уникально. Повторная запись в свойство с тем же именем перезапишет его.
+
+Например, если `"харе"` попало в объект один раз (`obj["харе"] = true`), то второе такое же присваивание ничего не изменит. 
+
+Решение ниже создаёт объект `obj = {}` и записывает в него все строки как имена свойств. А затем собирает свойства из объекта в массив через `for..in`. Дубликатов уже не будет.
+
+```js
+//+ run
+function unique(arr) {
+  var obj = {};
+
+  for(var i=0; i<arr.length; i++) {
+    var str = arr[i];
+*!*
+    obj[str] = true; // запомнить строку в виде свойства объекта
+*/!*
+  }
+ 
+  return Object.keys(obj); // или собрать ключи перебором для IE8-
+}
+
+var strings = ["кришна", "кришна", "харе", "харе", 
+  "харе", "харе", "кришна", "кришна", "8-()"];
+
+alert( unique(strings) ); // кришна, харе, 8-()
+```
+
+Так что можно положить все значения как ключи в объект, а потом достать.
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array-methods/11-array-unique/task.md b/1-js/4-data-structures/7-array-methods/11-array-unique/task.md
new file mode 100644
index 00000000..2498d50c
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/11-array-unique/task.md
@@ -0,0 +1,21 @@
+# Оставить уникальные элементы массива
+
+[importance 3]
+
+Пусть `arr` -- массив строк.
+
+Напишите функцию `unique(arr)`, которая возвращает массив, содержащий только уникальные элементы `arr`.
+
+Например:
+
+```js
+function unique(arr) {
+  /* ваш код */
+}
+
+var strings = ["кришна", "кришна", "харе", "харе", 
+  "харе", "харе", "кришна", "кришна", "8-()"];
+
+alert( unique(strings) ); // кришна, харе, 8-()
+```
+
diff --git a/1-js/4-data-structures/7-array-methods/2-camelcase/_js.view/solution.js b/1-js/4-data-structures/7-array-methods/2-camelcase/_js.view/solution.js
new file mode 100644
index 00000000..a28e0ee7
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/2-camelcase/_js.view/solution.js
@@ -0,0 +1,10 @@
+function camelize(str) {
+  var arr = str.split('-');
+
+  for(var i=1; i<arr.length; i++) {
+    // преобразовать: первый символ с большой буквы
+    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
+  }
+
+  return arr.join('');
+}
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array-methods/2-camelcase/_js.view/test.js b/1-js/4-data-structures/7-array-methods/2-camelcase/_js.view/test.js
new file mode 100644
index 00000000..92e4ed76
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/2-camelcase/_js.view/test.js
@@ -0,0 +1,22 @@
+describe("camelize", function() {
+
+  it("оставляет пустую строку \"как есть\"", function() {
+    assert.equal( camelize(""), "");
+  });
+
+  describe("делает заглавным первый символ после дефиса", function() {
+
+    it("превращает background-color в backgroundColor", function() {
+      assert.equal( camelize("background-color"), "backgroundColor");
+    });
+
+    it("превращает list-style-image в listStyleImage", function() {
+      assert.equal( camelize("list-style-image"), "listStyleImage");
+    });
+
+    it("превращает -webkit-transition в WebkitTransition", function() {
+      assert.equal( camelize("-webkit-transition"), "WebkitTransition");
+    });
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array-methods/2-camelcase/solution.md b/1-js/4-data-structures/7-array-methods/2-camelcase/solution.md
new file mode 100644
index 00000000..87ac3389
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/2-camelcase/solution.md
@@ -0,0 +1,26 @@
+# Идея
+
+Задача может быть решена несколькими способами. Один из них -- разбить строку по дефису `str.split('-')`, затем последовательно сконструировать новую.
+
+# Решение
+
+Разобьем строку в массив, а затем преобразуем его элементы и сольём обратно:
+
+```js
+//+ run
+function camelize(str) {
+  var arr = str.split('-');
+
+  for(var i=1; i<arr.length; i++) {
+    // преобразовать: первый символ с большой буквы
+    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
+  }
+
+  return arr.join('');
+}
+
+alert( camelize("background-color"));   // backgroundColor
+alert( camelize("list-style-image") );    // listStyleImage
+alert( camelize("-webkit-transition") ); // WebkitTransition
+```
+
diff --git a/1-js/4-data-structures/7-array-methods/2-camelcase/task.md b/1-js/4-data-structures/7-array-methods/2-camelcase/task.md
new file mode 100644
index 00000000..dd2446d4
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/2-camelcase/task.md
@@ -0,0 +1,20 @@
+# Перевести текст вида border-left-width в borderLeftWidth
+
+[importance 3]
+
+Напишите функцию `camelize(str)`, которая преобразует строки вида "my-short-string" в "myShortString".
+
+То есть, дефисы удаляются, а все слова после них получают заглавную букву.
+
+Например:
+
+```js
+camelize("background-color") == 'backgroundColor';
+camelize("list-style-image") == 'listStyleImage';
+camelize("-webkit-transition") == 'WebkitTransition';
+```
+
+Такая функция полезна при работе с CSS. 
+
+P.S. Вам пригодятся методы строк `charAt`, `split` и `toUpperCase`.
+
diff --git a/1-js/4-data-structures/7-array-methods/3-remove-class/_js.view/solution.js b/1-js/4-data-structures/7-array-methods/3-remove-class/_js.view/solution.js
new file mode 100644
index 00000000..c0d92143
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/3-remove-class/_js.view/solution.js
@@ -0,0 +1,11 @@
+function removeClass(obj, cls) {
+  var classes = obj.className.split(' ');
+ 
+  for(i=0; i<classes.length; i++) {
+    if (classes[i] == cls) {
+      classes.splice(i, 1); // удалить класс  
+      i--;
+    }
+  }
+  obj.className = classes.join(' ');
+}
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array-methods/3-remove-class/_js.view/test.js b/1-js/4-data-structures/7-array-methods/3-remove-class/_js.view/test.js
new file mode 100644
index 00000000..a67865dd
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/3-remove-class/_js.view/test.js
@@ -0,0 +1,35 @@
+describe("removeClass", function() {
+
+  it("ничего не делает, если класса нет", function() {
+    var obj = { className: 'open menu' };
+    removeClass(obj, 'new');
+    assert.deepEqual(obj, {
+      className: 'open menu'
+    });
+  });
+
+  it("не меняет пустое свойство", function() {
+    var obj = { className: '' };
+    removeClass(obj, 'new');
+    assert.deepEqual(obj, {
+      className: ""
+    });
+  });
+
+  it("удаляет класс, не оставляя лишних пробелов", function() {
+    var obj = { className: 'open menu' };
+    removeClass(obj, 'open');
+    assert.deepEqual(obj, {
+      className: "menu"
+    });
+  });
+
+  it("если класс один и он удалён, то результат - пустая строка", function() {
+    var obj = { className: "menu" };
+    removeClass(obj, 'menu');
+    assert.deepEqual(obj, {
+      className: ""
+    });
+  });
+
+});
diff --git a/1-js/4-data-structures/7-array-methods/3-remove-class/solution.md b/1-js/4-data-structures/7-array-methods/3-remove-class/solution.md
new file mode 100644
index 00000000..820e0114
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/3-remove-class/solution.md
@@ -0,0 +1,31 @@
+Решение заключается в том, чтобы разбить `className` в массив классов, а затем пройтись по нему циклом. Если класс есть - удаляем его `splice`, заново объединяем массив в строку и присваиваем объекту.
+
+```js
+//+ run
+function removeClass(obj, cls) {
+  var classes = obj.className.split(' ');
+ 
+  for(i=0; i<classes.length; i++) {
+    if (classes[i] == cls) {
+      classes.splice(i, 1); // удалить класс  
+*!*
+      i--; // (*)
+*/!*
+    }
+  }
+  obj.className = classes.join(' ');
+	
+}
+
+var obj = { className: 'open menu menu' }
+
+removeClass(obj, 'blabla'); 
+removeClass(obj, 'menu')
+alert(obj.className)   // open
+```
+
+В примере выше есть тонкий момент. Элементы массива проверяются один за другим. При вызове `splice` удаляется текущий, `i-й` элемент, и те элементы, которые идут дальше, сдвигаются на его место.
+
+Таким образом, **на месте `i` оказывается новый, непроверенный элемент**. 
+
+Чтобы это учесть, строчка `(*)` уменьшает `i`, чтобы следующая итерация цикла заново проверила  элемент с номером `i`. Без нее функция будет работать с ошибками.
diff --git a/1-js/4-data-structures/7-array-methods/3-remove-class/task.md b/1-js/4-data-structures/7-array-methods/3-remove-class/task.md
new file mode 100644
index 00000000..c82bb912
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/3-remove-class/task.md
@@ -0,0 +1,28 @@
+# Функция removeClass
+
+[importance 5]
+
+У объекта есть свойство `className`, которое хранит список "классов" - слов, разделенных пробелами:
+
+```js
+var obj = { 
+  className: 'open menu'
+};
+```
+
+Напишите функцию `removeClass(obj, cls)`, которая удаляет класс `cls`, если он есть:
+
+```js
+removeClass(obj, 'open'); // obj.className='menu'
+removeClass(obj, 'blabla'); // без изменений (нет такого класса)
+```
+
+P.S. Дополнительное усложнение. Функция должна корректно обрабатывать дублирование класса в строке:
+
+```js
+obj = { className: 'my menu menu' };
+removeClass(obj, 'menu');
+alert(obj.className); // 'my'
+```
+
+Лишних пробелов после функции образовываться не должно.
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array-methods/4-filter-in-place/_js.view/solution.js b/1-js/4-data-structures/7-array-methods/4-filter-in-place/_js.view/solution.js
new file mode 100644
index 00000000..02427e89
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/4-filter-in-place/_js.view/solution.js
@@ -0,0 +1,10 @@
+function filterRangeInPlace(arr, a, b) {
+
+    for(var i = 0; i<arr.length; i++) {
+        var val  = arr[i];
+        if (val < a || val > b) {
+            arr.splice(i--, 1);
+        }
+    }
+
+}
diff --git a/1-js/4-data-structures/7-array-methods/4-filter-in-place/_js.view/test.js b/1-js/4-data-structures/7-array-methods/4-filter-in-place/_js.view/test.js
new file mode 100644
index 00000000..f8374db2
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/4-filter-in-place/_js.view/test.js
@@ -0,0 +1,9 @@
+describe("filterRangeInPlace", function() {
+
+  it("меняет массив, оставляя только значения из диапазона", function() {
+    var arr = [5, 3, 8, 1];
+    filterRangeInPlace(arr, 1, 4);
+    assert.deepEqual(arr, [3, 1]);
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array-methods/4-filter-in-place/solution.md b/1-js/4-data-structures/7-array-methods/4-filter-in-place/solution.md
new file mode 100644
index 00000000..05c7b005
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/4-filter-in-place/solution.md
@@ -0,0 +1,21 @@
+
+
+```js
+//+ run
+function filterRangeInPlace(arr, a, b) {
+
+    for(var i = 0; i<arr.length; i++) {
+        var val  = arr[i];
+        if (val < a || val > b) {
+            arr.splice(i--, 1);
+        }
+    }
+
+}
+
+var arr = [5, 3, 8, 1];
+
+filterRangeInPlace(arr, 1, 4);
+alert(arr); // [3, 1]
+```
+
diff --git a/1-js/4-data-structures/7-array-methods/4-filter-in-place/task.md b/1-js/4-data-structures/7-array-methods/4-filter-in-place/task.md
new file mode 100644
index 00000000..ba90585a
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/4-filter-in-place/task.md
@@ -0,0 +1,17 @@
+# Фильтрация массива "на месте"
+
+[importance 4]
+
+Создайте функцию `filterRangeInPlace(arr, a, b)`, которая получает массив с числами `arr` и удаляет из него все числа вне диапазона `a..b`. 
+То есть, проверка имеет вид `a ≤ arr[i] ≤ b`. Функция должна менять сам массив и ничего не возвращать.
+
+Например:
+
+```js
+arr = [5, 3, 8, 1];
+
+filterRangeInPlace(arr, 1, 4); // удалены числа вне диапазона 1..4
+
+alert(arr); // массив изменился: остались [3, 1]
+```
+
diff --git a/1-js/4-data-structures/7-array-methods/5-sort-back/solution.md b/1-js/4-data-structures/7-array-methods/5-sort-back/solution.md
new file mode 100644
index 00000000..0931342a
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/5-sort-back/solution.md
@@ -0,0 +1,15 @@
+
+
+```js
+//+ run
+var arr = [ 5, 2, 1, -10, 8];
+
+function compareReversed(a, b) {
+  return b - a;
+}
+
+arr.sort(compareReversed);
+
+alert(arr);
+```
+
diff --git a/1-js/4-data-structures/7-array-methods/5-sort-back/task.md b/1-js/4-data-structures/7-array-methods/5-sort-back/task.md
new file mode 100644
index 00000000..6771097f
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/5-sort-back/task.md
@@ -0,0 +1,14 @@
+# Сортировать в обратном порядке
+
+[importance 5]
+
+Как отсортировать массив чисел в обратном порядке?
+
+```js
+var arr = [ 5, 2, 1, -10, 8];
+
+// отсортируйте?
+
+alert(arr);  // 8, 5, 2, 1, -10
+```
+
diff --git a/1-js/4-data-structures/7-array-methods/6-copy-sort-array/solution.md b/1-js/4-data-structures/7-array-methods/6-copy-sort-array/solution.md
new file mode 100644
index 00000000..242fa0b9
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/6-copy-sort-array/solution.md
@@ -0,0 +1,14 @@
+Для копирования массива используем `slice()`, и тут же -- сортировку:
+
+```js
+//+ run
+var arr = [ "HTML", "JavaScript", "CSS" ];
+
+*!*
+var arrSorted = arr.slice().sort();
+*/!*
+
+alert(arrSorted);
+alert(arr);
+```
+
diff --git a/1-js/4-data-structures/7-array-methods/6-copy-sort-array/task.md b/1-js/4-data-structures/7-array-methods/6-copy-sort-array/task.md
new file mode 100644
index 00000000..52660134
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/6-copy-sort-array/task.md
@@ -0,0 +1,18 @@
+# Скопировать и отсортировать массив
+
+[importance 5]
+
+Есть массив строк `arr`. Создайте массив `arrSorted` -- из тех же элементов, но отсортированный.
+
+Исходный массив не должен меняться.
+
+```js
+var arr = [ "HTML", "JavaScript", "CSS" ];
+
+// ... ваш код ...
+
+alert(arrSorted);  // CSS, HTML, JavaScript
+alert(arr); // HTML, JavaScript, CSS (без изменений)
+```
+
+Постарайтесь сделать код как можно короче.
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array-methods/7-shuffle-array/solution.md b/1-js/4-data-structures/7-array-methods/7-shuffle-array/solution.md
new file mode 100644
index 00000000..fa23ae9e
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/7-shuffle-array/solution.md
@@ -0,0 +1,23 @@
+# Подсказка
+
+Функция сортировки должна возвращать случайный результат сравнения. Используйте для этого [Math.random](http://javascript.ru/Math.random).
+
+# Решение
+
+Обычно `Math.random()` возвращает результат от `0` до `1`. Вычтем `0.5`, чтобы область значений стала `[-0.5 ... 0.5)`.
+
+```js
+//+ run
+var arr = [1, 2, 3, 4, 5];
+
+*!*
+function compareRandom(a, b) { 
+  return Math.random() - 0.5;
+}
+
+arr.sort(compareRandom);
+*/!*
+
+alert(arr); // элементы в случайном порядке, например [3,5,1,2,4]
+```
+
diff --git a/1-js/4-data-structures/7-array-methods/7-shuffle-array/task.md b/1-js/4-data-structures/7-array-methods/7-shuffle-array/task.md
new file mode 100644
index 00000000..9a645e3f
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/7-shuffle-array/task.md
@@ -0,0 +1,14 @@
+# Случайный порядок в массиве
+
+[importance 3]
+
+Используйте функцию `sort` для того, чтобы "перетрясти" элементы массива в случайном порядке.
+
+```js
+var arr = [1, 2, 3, 4, 5];
+
+arr.sort(ваша функция);
+
+alert(arr); // элементы в случайном порядке, например [3,5,1,2,4]
+```
+
diff --git a/1-js/4-data-structures/7-array-methods/8-sort-objects/solution.md b/1-js/4-data-structures/7-array-methods/8-sort-objects/solution.md
new file mode 100644
index 00000000..a29d3cec
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/8-sort-objects/solution.md
@@ -0,0 +1,26 @@
+Для сортировки объявим и передадим в `sort` анонимную функцию, которая сравнивает объекты по полю `age`:
+
+```js
+//+ run
+*!*
+// Наша функция сравнения
+function compareAge(personA, personB) {
+  return personA.age - personB.age;
+}
+*/!*
+
+// проверка
+var vasya = { name: "Вася", age: 23 };
+var masha = { name: "Маша", age: 18 };
+var vovochka = { name: "Вовочка", age: 6 };
+
+var people = [ vasya , masha , vovochka ];
+
+people.sort(compareAge);
+
+// вывести
+for(var i=0; i<people.length; i++) {
+  alert(people[i].name); // Вовочка Маша Вася
+}
+```
+
diff --git a/1-js/4-data-structures/7-array-methods/8-sort-objects/task.md b/1-js/4-data-structures/7-array-methods/8-sort-objects/task.md
new file mode 100644
index 00000000..9ded313f
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/8-sort-objects/task.md
@@ -0,0 +1,22 @@
+# Сортировка объектов
+
+[importance 5]
+
+Напишите код, который отсортирует массив объектов `people` по полю `age`.
+
+Например:
+
+```js
+var vasya = { name: "Вася", age: 23 };
+var masha = { name: "Маша", age: 18 };
+var vovochka = { name: "Вовочка", age: 6 };
+
+var people = [ vasya , masha , vovochka ];
+
+... ваш код ...
+
+// теперь people: [vovochka, masha, vasya]
+alert(people[0].age) // 6
+```
+
+Выведите список имён в массиве после сортировки.
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array-methods/9-output-single-linked-list/linkedlist.png b/1-js/4-data-structures/7-array-methods/9-output-single-linked-list/linkedlist.png
new file mode 100755
index 00000000..20788957
Binary files /dev/null and b/1-js/4-data-structures/7-array-methods/9-output-single-linked-list/linkedlist.png differ
diff --git a/1-js/4-data-structures/7-array-methods/9-output-single-linked-list/solution.md b/1-js/4-data-structures/7-array-methods/9-output-single-linked-list/solution.md
new file mode 100644
index 00000000..4f8ca104
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/9-output-single-linked-list/solution.md
@@ -0,0 +1,142 @@
+# Вывод списка в цикле
+
+```js
+//+ run
+var list = {
+  value: 1,  next: {
+    value: 2, next: {
+      value: 3, next: {
+        value: 4, next: null
+      }
+    }
+  }
+};
+
+function printList(list) {
+  var tmp = list;
+
+  while(tmp) {
+    alert( tmp.value );
+    tmp = tmp.next;
+  }
+
+}
+
+printList(list);
+```
+
+Обратите внимание, что для прохода по списку используется временная переменная `tmp`, а не `list`. Можно было бы и бегать по списку, используя входной параметр функции:
+
+```js
+function printList(list) {
+
+  while(*!*list*/!*) {
+    alert( list.value );
+    list = list.next;
+  }
+
+}
+```
+
+...Но при этом мы в будущем не сможем расширить функцию и сделать со списком что-то ещё, ведь после окончания цикла начало списка уже нигде не хранится.
+
+Поэтому и используется временная переменная -- чтобы сделать код расширяемым, и, кстати, более понятным, ведь роль `tmp` -- исключительно обход списка, как `i` в цикле `for`.
+
+# Вывод списка с рекурсией
+
+Рекурсивный вариант `printList(list)` следует простой логике: вывести текущее значение `(1)`, а затем пропустить через себя следующее  `(2)`:
+
+```js
+//+ run
+var list = {
+  value: 1,  next: {
+    value: 2, next: {
+      value: 3, next: {
+        value: 4, next: null
+      }
+    }
+  }
+};
+
+function printList(list) {
+ 
+  alert(list.value); // (1)
+ 
+  if (list.next) {
+    printList(list.next); // (2)
+  }
+ 
+}
+
+printList(list);
+```
+
+# Обратный вывод с рекурсией
+
+Обратный вывод -- почти то же самое, что прямой, просто сначала мы обрабатываем следующее значение, а потом -- текущее:
+
+```js
+//+ run
+var list = {
+  value: 1,  next: {
+    value: 2, next: {
+      value: 3, next: {
+        value: 4, next: null
+      }
+    }
+  }
+};
+
+function printReverseList(list) {
+
+  if (list.next) {
+    printReverseList(list.next);
+  }
+
+  alert(list.value);
+}
+
+printReverseList(list);
+```
+
+# Обратный вывод без рекурсии
+
+```js
+//+ run
+var list = {
+  value: 1,  next: {
+    value: 2, next: {
+      value: 3, next: {
+        value: 4, next: null
+      }
+    }
+  }
+};
+
+
+function printReverseList(list) {
+  var arr = [];
+  var tmp = list;
+
+  while(tmp) {
+    arr.push(tmp.value);
+    tmp = tmp.next;
+  }
+
+  for( var i = arr.length-1; i>=0; i-- ) {
+    alert( arr[i] );
+  }
+}
+
+printReverseList(list);
+```
+
+**Обратный вывод без рекурсии быстрее.**
+
+По сути, рекурсивный вариант и нерекурсивный работают одинаково: они проходят список и запоминают его элементы, а потом выводят в обратном порядке.
+
+В случае с массивом это очевидно, а для рекурсии запоминание происходит в стеке (внутренней специальной структуре данных): когда вызывается вложенная функция, то интерпретатор сохраняет в стек текущие параметры. Вложенные вызовы заполняют стек, а потом он выводится в обратном порядке.
+
+При этом, при рекурсии в стеке сохраняется не только элемент списка, а другая вспомогательная информация, необходимая для возвращения из вложенного вызова. Поэтому тратится больше памяти. Все эти расходы отсутствуют во варианте без рекурсии, так как в массиве хранится именно то, что нужно.
+
+Преимущество рекурсии, с другой стороны -- более короткий и, зачастую, более простой код.
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array-methods/9-output-single-linked-list/task.md b/1-js/4-data-structures/7-array-methods/9-output-single-linked-list/task.md
new file mode 100644
index 00000000..eb93d530
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/9-output-single-linked-list/task.md
@@ -0,0 +1,49 @@
+# Вывести односвязный список
+
+[importance 5]
+
+[Односвязный список](http://ru.wikipedia.org/wiki/Связный_список) -- это структура данных, которая состоит из *элементов*, каждый из которых хранит ссылку на следующий. Последний элемент может не иметь ссылки, либо она равна `null`.
+
+Например, объект ниже задаёт односвязный список, в `next` хранится ссылка на следующий элемент:
+
+```js
+var list = {
+  value: 1,
+  next: {
+    value: 2,
+    next: {
+      value: 3,
+      next: {
+        value: 4,
+        next: null
+      }
+    }
+  }
+};
+```
+
+Графическое представление этого списка:
+<img src="linkedlist.png">
+
+Альтернативный способ создания:
+
+```js
+var list = { value: 1 };
+list.next = { value: 2 };
+list.next.next = { value: 3 };
+list.next.next.next = { value: 4 };
+```
+
+Такая структура данных интересна тем, что можно очень быстро разбить список на части, объединить списки, удалить или добавить элемент в любое место, включая начало. При использовании массива такие действия требуют обширных перенумерований.
+
+Задачи:
+
+<ol>
+<li>Напишите функцию `printList(list)`, которая выводит элементы списка по очереди, при помощи цикла.</li>
+<li>Напишите функцию `printList(list)` при помощи рекурсии.</li>
+<li>Напишите функцию `printReverseList(list)`, которая выводит элементы списка в обратном порядке, при помощи рекурсии. 
+Для списка выше она должна выводить `4`,`3`,`2`,`1`</li>
+<li>Сделайте вариант `printReverseList(list)`, использующий не рекурсию, а цикл.</li>
+</ol>
+
+Как лучше -- с рекурсией или без?
\ No newline at end of file
diff --git a/1-js/4-data-structures/7-array-methods/article.md b/1-js/4-data-structures/7-array-methods/article.md
new file mode 100644
index 00000000..af8cf6fa
--- /dev/null
+++ b/1-js/4-data-structures/7-array-methods/article.md
@@ -0,0 +1,445 @@
+# Массивы: методы
+
+В этой главе мы рассмотрим встроенные методы массивов JavaScript.
+[cut]
+
+## Метод split   
+
+Ситуация из реальной жизни. Мы пишем сервис отсылки сообщений и посетитель вводит имена тех, кому его отправить: `Маша, Петя, Марина, Василий...`. Но нам-то гораздо удобнее работать с массивом имен, чем с одной строкой. 
+
+К счастью, есть метод `split(s)`, который позволяет превратить строку в массив, разбив ее по разделителю `s`. В примере ниже таким разделителем является строка из запятой и пробела.
+
+```js
+//+ run
+var names = 'Маша, Петя, Марина, Василий';
+
+var arr = names.split(', ');
+
+for (var i=0; i<arr.length; i++) { 
+  alert('Вам сообщение ' + arr[i]);
+}
+```
+
+[smart header="Второй аргумент `split`"]
+У метода `split` есть необязательный второй аргумент -- ограничение на количество элементов в массиве. Если их больше, чем указано -- остаток массива будет отброшен:
+
+```js
+//+ run
+alert( "a,b,c,d".split(',', *!*2*/!*) ); // a,b
+```
+
+[/smart]
+
+[smart header="Разбивка по буквам"]
+Вызов `split` с пустой строкой разобьёт по буквам:
+
+```js
+//+ run
+var str = "тест";
+
+alert( str.split('') ); // т,е,с,т
+```
+
+[/smart]
+
+## Метод join 
+
+Вызов `arr.join(str)` делает в точности противоположное `split`. Он берет массив и склеивает его в строку, используя `str` как разделитель.
+
+Например:
+
+```js
+//+ run
+var arr = ['Маша', 'Петя', 'Марина', 'Василий'];
+
+var str = arr.join(';');
+
+alert(str); // Маша;Петя;Марина;Василий
+```
+
+[smart header="new Array + join = Повторение строки"]
+Код для повторения строки `3` раза:
+
+```js
+//+ run
+alert( new Array(4).join("ля") ); // ляляля
+```
+
+Как видно, `new Array(4)` делает массив без элементов длины 4, который `join` объединяет в строку, вставляя *между его элементами* строку `"ля"`. 
+
+В результате, так как элементы пусты, получается повторение строки. Такой вот небольшой трюк.
+[/smart]
+
+
+## Удаление из массива
+
+Так как массивы являются объектами, то для удаления ключа можно воспользоваться обычным `delete`:
+
+```js
+//+ run
+var arr = ["Я", "иду", "домой"];
+
+delete arr[1]; // значение с индексом 1 удалено
+
+// теперь arr = ["Я", undefined, "домой"];
+alert(arr[1]); // undefined
+```
+
+Да, элемент удален из массива, но не так, как нам этого хочется. Образовалась "дырка".
+
+Это потому, что оператор `delete` удаляет пару "ключ-значение". Это -- все, что он делает. Обычно же при удалении из массива мы хотим, чтобы оставшиеся элементы сдвинулись и заполнили образовавшийся промежуток.
+
+Поэтому для удаления используются специальные методы: из начала -- `shift`, с конца -- `pop`, а из середины -- `splice`, с которым мы сейчас познакомимся.
+
+## Метод splice   
+
+Метод `splice` -- это универсальный раскладной нож для работы с массивами. Умеет все: удалять элементы, вставлять элементы, заменять элементы -- по очереди и одновременно.
+
+Его синтаксис:
+
+<dl>
+<dt>`arr.splice(index[, deleteCount, elem1, ..., elemN])`</dt>
+<dd>Удалить `deleteCount` элементов, начиная с номера `index`, а затем вставить  `elem1, ..., elemN` на их место.</dd>
+</dl>
+
+Посмотрим примеры.
+
+```js
+//+ run
+var arr = ["Я", "изучаю", "JavaScript"];
+
+*!*
+arr.splice(1, 1);  // начиная с позиции 1, удалить 1 элемент
+*/!*
+
+alert(arr); //  осталось ["Я", "JavaScript"]
+```
+
+Ниже продемонстрировано, как использовать `splice` для удаления одного элемента. Следующие за удаленным элементы сдвигаются, чтобы заполнить его место.
+
+```js
+//+ run
+var arr = ["Я", "изучаю", "JavaScript"];
+
+*!*
+arr.splice(0, 1);  // удалить 1 элемент, начиная с позиции 0
+*/!*
+
+alert( arr[0] ); // "изучаю" стал первым элементом
+```
+
+Следующий пример показывает, как *заменять элементы*:
+
+```js
+//+ run
+var arr = [*!*"Я", "сейчас", "изучаю",*/!* "JavaScript"];
+
+// удалить 3 первых элемента и добавить другие вместо них
+arr.splice(0, 3, "Мы", "изучаем") 
+
+alert( arr ) // теперь [*!*"Мы", "изучаем"*/!*, "JavaScript"]
+```
+
+Метод **`splice` возвращает массив из удаленных элементов**:
+
+```js
+//+ run
+var arr = [*!*"Я", "сейчас",*/!* "изучаю", "JavaScript"];
+
+// удалить 2 первых элемента 
+var removed = arr.splice(0, 2); 
+
+alert( removed ); // "Я", "сейчас" <-- array of removed elements
+```
+
+Метод **`splice` также может вставлять элементы без удаления**, для этого достаточно установить `deleteCount` в `0`:
+
+```js
+//+ run
+var arr = ["Я", "изучаю", "JavaScript"];
+
+// с позиции 2 
+// удалить 0 
+// вставить "сложный", "язык"
+arr.splice(2, 0, "сложный", "язык"); 
+
+alert(arr); // "Я", "изучаю", "сложный", "язык", "JavaScript"
+```
+
+Допускается использование отрицательного номера позиции, которая в этом случае отсчитывается с конца:
+
+```js
+//+ run
+var arr = [1, 2, 5]
+
+// начиная с позиции индексом -1 (предпоследний элемент)
+// удалить 0 элементов, 
+// затем вставить числа 3 и 4
+arr.splice(-1, 0, 3, 4);
+
+alert(arr); // результат: 1,2,3,4,5
+```
+
+## Метод slice   
+
+Метод `slice(begin, end)` копирует участок массива от `begin` до `end`, не включая `end`. Исходный массив при этом не меняется.
+
+Например:
+
+```js
+//+ run
+var arr = ["Почему", "надо", "учить", "JavaScript"];
+
+var arr2 = arr.slice(1,3); // элементы 1, 2 (не включая 3)
+
+alert(arr2); // надо, учить
+```
+
+Аргументы ведут себя так же, как и в строковом `slice`:
+<ul>
+<li>Если не указать `end` -- копирование будет до конца массива:
+
+```js
+//+ run
+var arr = ["Почему", "надо", "учить", "JavaScript"];
+
+alert( arr.slice(1) ); // взять все элементы, начиная с номера 1
+```
+
+</li>
+<li>Можно использовать отрицательные индексы, они отсчитываются с конца:
+
+```js
+var arr2 = arr.slice(-2); // копировать от 2го элемента с конца и дальше
+```
+
+</li>
+<li>Если вообще не указать аргументов -- скопируется весь массив:
+
+```js
+var fullCopy = arr.slice();
+```
+
+</li>
+</ul>
+
+## Сортировка, метод sort(fn)   
+
+Метод `sort()` сортирует массив *на месте*. Например:
+
+```js
+//+ run
+var arr = [ 1, 2, 15 ];
+
+arr.sort();
+
+alert( arr );  // *!*1, 15, 2*/!*
+```
+
+Не заметили ничего странного в этом примере? 
+
+Порядок стал `1, 15, 2`. Это произошло потому, что **`sort` сортирует, преобразуя элементы к строке**. Поэтому и порядок у них строковый, ведь `"2" > "15"`.
+
+### Свой порядок сортировки
+
+Внутренняя реализация метода `arr.sort(fn)` умеет сортировать любые массивы, если указать функцию `fn` от двух элементов, которая умеет сравнивать их.
+
+Если эту функцию не указать, то элементы сортируются как строки.
+
+Например, укажем эту функцию явно, отсортируем элементы массива как числа:
+
+```js
+//+ run
+function compareNumeric(a, b) {
+  if (a > b) return 1;
+  if (a < b) return -1;
+}
+
+var arr = [ 1, 2, 15 ];
+
+*!*
+arr.sort(compareNumeric);
+*/!*
+
+alert(arr);  // *!*1, 2, 15*/!*
+```
+
+Обратите внимание, мы передаём в `sort()` именно саму функцию `compareNumeric`, без вызова через скобки. Был бы ошибкой следующий код:
+
+```js
+*!*
+arr.sort( compareNumeric() );  // не сработает
+*/!*
+```
+
+К функции, передаваемой `sort`, есть всего одно требование.
+
+Алгоритм сортировки, встроенный в JavaScript, будет передавать ей для сравнения элементы массива. Она должна возвращать:
+<ul>
+<li>Положительное значение, если `a > b`,</li>
+<li>Отрицательное значение, если `a < b`,</li>
+<li>Если равны -- не важно, что возвращать, их взаимный порядок не имеет значения.</li>
+</ul>
+
+
+[smart header="Алгоритм сортировки"]
+В методе `sort`, внутри самого интерпретатора JavaScript, реализован универсальный алгоритм сортировки. Как правило, это ["\"быстрая сортировка\""](http://algolist.manual.ru/sort/quick_sort.php), дополнительно оптимизированная для небольших массивов.
+
+Ему совершенно неважно, что сортировать -- строки, числа, яблоки с апельсинами или посетителей. Это и не должно быть важно, алгоритм сортировки просто сортирует абстрактные "элементы массива". Всё, что ему нужно о них знать -- как эти элементы сравнивать между собой.
+
+Для этого мы передаём в `sort` функцию сравнения. А там уже алгоритм решает, что с чем сравнивать, чтобы отсортировать побыстрее.
+
+Кстати, те значения, с которыми `sort` вызывает функцию сравнения, можно увидеть, если вставить в неё `alert`:
+
+```js
+//+ run
+[1, -2, 15, 2, 0, 8].sort(function(a, b) {
+  alert(a + " <> " + b);
+});
+```
+
+[/smart]
+
+Функцию `compareNumeric` для сравнения элементов-чисел можно упростить до одной строчки. Как?
+
+[hide text="Показать простой вариант `compareNumeric`"]
+Функция должна возвращать положительное число, если `a > b`, отрицательное, если наоборот, и, например, `0`, если числа равны. 
+
+Всем этим требованиям удовлетворяет функция:
+
+```js
+function compareNumeric(a, b) {
+  return a - b;
+}
+```
+
+[/hide]
+
+
+## reverse
+
+Метод [arr.reverse()](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/reverse) меняет порядок элементов в массиве на обратный.
+
+```js
+//+ run
+var arr = [1,2,3];
+arr.reverse();
+
+alert(arr); // 3,2,1
+```
+
+## concat
+
+Метод [arr.concat(value1, value2, ... valueN)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/concat) создаёт новый массив, в который копируются элементы из `arr`, а также `value1, value2, ... valueN`.
+
+Например:
+
+```js
+//+ run
+var arr = [1,2];
+*!*
+var newArr = arr.concat(3,4);
+*/!*
+
+alert(newArr); // 1,2,3,4
+```
+
+**Если `value` -- массив, то `concat` добавляет его элементы.** 
+
+Например:
+
+```js
+//+ run
+var arr = [1,2];
+*!*
+var newArr = arr.concat( [3,4], 5);// то же самое, что arr.concat(3,4,5)
+*/!*
+
+alert(newArr); // 1,2,3,4,5
+```
+
+## indexOf/lastIndexOf
+
+Эти методы не поддерживаются в IE<9. Для их поддержки подключите библиотеку [ES5-shim](https://github.com/kriskowal/es5-shim).
+
+
+Метод ["arr.indexOf(searchElement[, fromIndex])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf) возвращает номер элемента `searchElement` в массиве `arr` или `-1`, если его нет. 
+
+Поиск начинается с номера `fromIndex`, если он указан. Если нет -- с начала массива.
+
+**Для поиска используется строгое сравнение `===`.** 
+
+Например:
+
+```js
+//+ run
+var arr = [ 1, 0, false ];
+
+alert( arr.indexOf(0) ); // 1
+alert( arr.indexOf(false) ); // 2
+alert( arr.indexOf(null) ); // -1
+```
+
+Как вы могли заметить, по синтаксису он полностью аналогичен методу [indexOf для строк](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/indexOf).
+
+Метод ["arr.lastIndexOf(searchElement[, fromIndex])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/lastIndexOf) ищет справа-налево: с конца массива или с номера `fromIndex`, если он указан. 
+
+[warn header="Методы `indexOf/lastIndexOf` осуществляют поиск перебором"]
+Если нужно проверить, существует ли значение в массиве -- его нужно перебрать. Только так. Внутренняя реализация `indexOf/lastIndexOf` осуществляет полный перебор, аналогичный циклу `for` по массиву. Чем длиннее массив, тем дольше он будет работать.
+[/warn]
+
+[smart header="Коллекция уникальных элементов"]
+Рассмотрим задачу -- есть коллекция строк, и нужно быстро проверять: есть ли в ней какой-то элемент. Массив для этого не подходит из-за медленного `indexOf`. Но подходит объект! Доступ к свойству объекта осуществляется очень быстро, так что можно сделать все элементы ключами объекта и проверять, есть ли уже такой ключ.
+
+Например, организуем такую проверку для коллекции строк `"div"`, `"a"` и `"form"`:
+
+```js
+var store = { }; // объект для коллекции
+
+var items = ["div", "a", "form"];
+
+for(var i=0; i<items.length; i++) {
+  var key = items[i]; // для каждого элемента создаём свойство
+  store[ key ] = true; // значение здесь не важно
+}
+```
+
+Теперь для проверки, есть ли ключ `key`, достаточно выполнить `if (store[key])`. Если есть -- можно использовать значение, если нет -- добавить. 
+
+Такое решение работает только со строками, но применимо к любым элементам, для которых можно вычислить строковый  "уникальный ключ".
+[/smart]
+
+
+
+
+## Object.keys(obj)
+
+Ранее мы говорили о том, что свойства объекта можно перебрать в цикле `for..in`.
+
+Если мы хотим работать с ними в виде массива, то к нашим услугам -- замечательный метод [Object.keys(obj)](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys). Он поддерживается везде, кроме IE8-:
+
+```js
+//+ run
+var user = {
+  name: "Петя",
+  age: 30
+}
+
+var keys = Object.keys(user);
+
+alert(keys); // name, age
+```
+
+## Итого
+
+Методы:
+<ul>
+<li>`push/pop`, `shift/unshift`, `splice` -- для добавления и удаления элементов.</li>
+<li>`join/split` -- для преобразования строки в массив и обратно.</li>
+<li>`sort` -- для сортировки массива. Если не передать функцию сравнения -- сортирует элементы как строки.</li>
+<li>`reverse` -- меняет порядок элементов на обратный.</li>
+<li>`concat` -- объединяет массивы.</li>
+<li>`indexOf/lastIndexOf` -- возвращают позицию элемента в массиве (не поддерживается в IE<9).</li>
+</ul>
+ 
+Изученных нами методов достаточно в 95% случаях, но существуют и другие. Для знакомства с ними рекомендуется заглянуть в справочник <a href="http://javascript.ru/Array">Array</a> и [Array в Mozilla Developer Network](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array).
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-iteration/1-rewrite-for-map/solution.md b/1-js/4-data-structures/8-array-iteration/1-rewrite-for-map/solution.md
new file mode 100644
index 00000000..3b1d135e
--- /dev/null
+++ b/1-js/4-data-structures/8-array-iteration/1-rewrite-for-map/solution.md
@@ -0,0 +1,15 @@
+
+
+```js
+//+ run
+var arr = ["Есть", "жизнь", "на", "Марсе"];
+
+*!*
+var arrLength = arr.map(function(item) {
+  return item.length;
+});
+*/!*
+
+alert( arrLength ); // 4,5,2,5
+```
+
diff --git a/1-js/4-data-structures/8-array-iteration/1-rewrite-for-map/task.md b/1-js/4-data-structures/8-array-iteration/1-rewrite-for-map/task.md
new file mode 100644
index 00000000..3ef6e594
--- /dev/null
+++ b/1-js/4-data-structures/8-array-iteration/1-rewrite-for-map/task.md
@@ -0,0 +1,21 @@
+# Перепишите цикл через map
+
+[importance 5]
+
+Код ниже получает из массива строк новый массив, содержащий их длины:
+
+```js
+//+ run
+var arr = ["Есть", "жизнь", "на", "Марсе"];
+
+*!*
+var arrLength = [];
+for(var i=0; i<arr.length; i++) {
+  arrLength[i] = arr[i].length;
+}
+*/!*
+
+alert( arrLength ); // 4,5,2,5
+```
+
+Перепишите выделенный участок: уберите цикл, используйте вместо него метод `map`.
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-iteration/2-partial-sums-array/_js.view/solution.js b/1-js/4-data-structures/8-array-iteration/2-partial-sums-array/_js.view/solution.js
new file mode 100644
index 00000000..c79d8e9e
--- /dev/null
+++ b/1-js/4-data-structures/8-array-iteration/2-partial-sums-array/_js.view/solution.js
@@ -0,0 +1,12 @@
+function getSums(arr) {
+  var result = [];
+  if (!arr.length) return result;
+
+  var totalSum = arr.reduce(function(sum, item) {
+    result.push(sum);
+    return sum + item;
+  });
+  result.push(totalSum);
+
+  return result;
+}
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-iteration/2-partial-sums-array/_js.view/test.js b/1-js/4-data-structures/8-array-iteration/2-partial-sums-array/_js.view/test.js
new file mode 100644
index 00000000..282357d9
--- /dev/null
+++ b/1-js/4-data-structures/8-array-iteration/2-partial-sums-array/_js.view/test.js
@@ -0,0 +1,18 @@
+describe("getSums", function() {
+
+  it("частичные суммы [1,2,3,4,5] равны [1,3,6,10,15]", function() {
+    assert.deepEqual( getSums([1,2,3,4,5]), [1,3,6,10,15]);
+  });
+
+  it("частичные суммы [-2,-1,0,1] равны [-2,-3,-3,-2]", function() {
+    assert.deepEqual( getSums([-2,-1,0,1]), [-2,-3,-3,-2]);
+  });
+
+  it("частичные суммы [] равны []", function() {
+    assert.deepEqual( getSums([]), [] );
+  });
+
+  it("частичные суммы [1] равны [1]", function() {
+    assert.deepEqual( getSums([1]), [1] );
+  });
+});
diff --git a/1-js/4-data-structures/8-array-iteration/2-partial-sums-array/solution.md b/1-js/4-data-structures/8-array-iteration/2-partial-sums-array/solution.md
new file mode 100644
index 00000000..33a25c84
--- /dev/null
+++ b/1-js/4-data-structures/8-array-iteration/2-partial-sums-array/solution.md
@@ -0,0 +1,47 @@
+Метод `arr.reduce` подходит здесь идеально. Достаточно пройтись по массиву слева-направа, накапливая текущую сумму в переменной и, кроме того, добавляя её в результирующий массив.
+
+Неправильный вариант может выглядеть так:
+
+```js
+//+ run
+function getSums(arr) {
+  var result = [];
+  if (!arr.length) return result;
+
+  arr.reduce(function(sum, item) {
+    result.push(sum);
+    return sum + item;
+  });
+    
+  return result;
+}
+
+alert(getSums([1,2,3,4,5])); // результат: *!*1,3,6,10*/!*
+```
+
+Перед тем, как читать дальше, посмотрите на него внимательно. Заметили, в чём ошибка?
+
+Если вы его запустите, то обнаружите, что результат не совсем тот. В получившемся массиве всего четыре элемента, отсутствует последняя сумма.
+
+Это из-за того, что последняя сумма является результатом метода `reduce`, он на ней заканчивает проход и далее функцию не вызывает, поэтому она оказывается не добавленной в `result`.
+
+Исправим это:
+
+```js
+//+ run
+function getSums(arr) {
+  var result = [];
+
+  *!*var totalSum*/!* = arr.reduce(function(sum, item) {
+    result.push(sum);
+    return sum + item;
+  });
+  *!*result.push(totalSum);*/!*  
+
+  return result;
+}
+
+alert(getSums([1,2,3,4,5])); // *!*1,3,6,10,15*/!*
+alert(getSums([-2,-1,0,1])); // *!*-2,-3,-3,-2*/!*
+```
+
diff --git a/1-js/4-data-structures/8-array-iteration/2-partial-sums-array/task.md b/1-js/4-data-structures/8-array-iteration/2-partial-sums-array/task.md
new file mode 100644
index 00000000..bc80b7fe
--- /dev/null
+++ b/1-js/4-data-structures/8-array-iteration/2-partial-sums-array/task.md
@@ -0,0 +1,23 @@
+# Массив частичных сумм
+
+[importance 2]
+
+На входе массив чисел, например: `arr = [1,2,3,4,5]`.
+
+Напишите функцию `getSums(arr)`, которая возвращает массив его частичных сумм.
+
+Иначе говоря, вызов `getSums(arr)` должен возвращать новый массив из такого же числа элементов, в котором на каждой позиции должна быть сумма элементов `arr` до этой позиции включительно.
+
+То есть:
+
+```js
+для arr = [1,2,3,4,5]
+getSums(arr) = [1, 1+2, 1+2+3, 1+2+3+4, 1+2+3+4+5] = [1, 3, 6, 10, 15]
+```
+
+Еще пример: `getSums([-2,-1,0,1]) = [-2,-3,-3,-2]`. 
+
+<ul>
+<li>Функция не должна модифицировать входной массив.</li>
+<li>В решении используйте метод `arr.reduce`.</li>
+</ul>
\ No newline at end of file
diff --git a/1-js/4-data-structures/8-array-iteration/article.md b/1-js/4-data-structures/8-array-iteration/article.md
new file mode 100644
index 00000000..90fe2ce4
--- /dev/null
+++ b/1-js/4-data-structures/8-array-iteration/article.md
@@ -0,0 +1,227 @@
+# Массив: перебирающие методы
+
+Современный стандарт JavaScript предоставляет много методов для "умного" перебора массивов, которые есть в современных браузерах...
+
+...Ну а для их поддержки в IE8- просто подключите библиотеку [ES5-shim](https://github.com/kriskowal/es5-shim).
+[cut]
+## forEach
+
+Метод ["arr.forEach(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach) используется для перебора массива.
+
+Он позволяет перебрать массив при помощи функции `callback`, что зачастую гораздо элегантнее, нежели цикл `for`.
+
+Функция `callback` вызывается для каждого элемента с тремя параметрами `callback(item, i, arr)`:
+
+<ul>
+<li>`item` -- очередной элемент массива.</li>
+<li>`i` -- его номер.</li>
+<li>`arr` -- массив, который перебирается.</li>
+</ul>
+
+Например:
+
+```js
+//+ run
+var arr = ["Яблоко", "Апельсин", "Груша"];
+
+function show(item, i, arr) {
+  alert(i + ": " + item + " (массив:" + arr + ")");
+}
+
+arr.forEach(show);
+```
+
+Второй, необязательный аргумент `forEach` позволяет указать контекст `this` для `callback`. Мы обсудим его в деталях чуть позже, сейчас он нам не важен.
+
+Метод `forEach` ничего не возвращает, его используют только для перебора.
+
+## filter
+
+Метод ["arr.filter(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/filter) используется для *фильтрации* массива через функцию.
+
+Он создаёт новый массив, в который войдут только те элементы `arr`, для которых вызов `callback(item, i, arr)` возвратит `true`.
+
+Например:
+
+```js
+//+ run
+var arr = [1, -1, 2, -2, 3];
+
+function isPositive(number) {
+  return number > 0;
+}
+
+*!*
+var positiveArr = arr.filter(isPositive);
+*/!*
+
+alert(positiveArr); // 1,2,3
+```
+
+## map
+
+Метод ["arr.map(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/map) используется для *трансформации* массива.
+
+Он создаёт новый массив, который будет состоять из результатов вызова `callback(item, i, arr)` для каждого элемента `arr`.
+
+Например:
+
+```js
+//+ run
+var arr = [1, 2, 3, 4];
+
+function square(number) {
+  return number * number;
+}
+
+*!*
+var squaredArr = arr.map(square);
+*/!*
+
+alert(squaredArr); // получили массив квадратов чисел: 1, 4, 9, 16
+```
+
+## every/some
+
+Эти методы используется для проверки массива.
+
+Метод ["arr.every(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/every) возвращает `true`, если вызов `callback` вернёт `true` для *каждого* элемента `arr`.
+
+ 
+Метод ["arr.some(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/some) возвращает `true`, если вызов `callback` вернёт `true` для *какого-нибудь* элемента `arr`.
+
+```js
+//+ run
+var arr = [1, -1, 2, -2, 3];
+
+function isPositive(number) {
+  return number > 0;
+}
+
+*!*
+alert( arr.every(isPositive) ); // false, не все положительные
+alert( arr.some(isPositive) ); // true, есть хоть одно положительное
+*/!*
+```
+
+## reduce/reduceRight
+
+Метод ["arr.reduce(callback[, initialValue])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/reduce) используется для последовательной обработки каждого элемента массива с сохранением промежуточного результата.
+
+Это один из самых сложных методов для работы с массивами. Но его стоит освоить, потому что временами с его помощью можно в несколько строк решить задачу, которая иначе потребовала бы в разы больше места и времени.
+
+Метод `reduce` используется для вычисления на основе массива какого-либо единого значения, иначе говорят "для свёртки массива". Чуть далее мы разберём пример для вычисления суммы.
+
+Он применяет функцию `callback` по очереди к каждому элементу массива слева направо, сохраняя при этом промежуточный результат.
+
+Аргументы функции `callback(previousValue, currentItem, index, arr)`:
+
+<ul>
+<li>`previousValue` -- последний результат вызова функции, он же "промежуточный результат". Значение `previousValue` при первом вызове равно `initialValue` (второй аргумент `reduce`) или, если у `reduce` нет второго аргумента, то оно равно первому элементу массива, а перебор начинается со второго.</li>
+<li>`currentItem` -- текущий элемент массива, элементы перебираются по очереди слева-направо. </li>
+<li>`index` -- номер текущего элемента.</li>
+<li>`arr` -- обрабатываемый массив.</li>
+</ul>
+
+Разберём работу метода `reduce` на примере. 
+
+Пусть мы хотим вычислить сумму всех элементов массива. Можно сделать это при помощи цикла, но это как раз подходящий повод познакомиться с `reduce`.
+
+Вот решение в одну строку:
+
+```js
+//+ run
+var arr = [1, 2, 3, 4, 5]
+
+var result = arr.reduce(function(prev, current) { return prev + current }, 0);
+
+alert(result); // 15
+```
+
+Разберём, что в нём происходит.
+
+Здесь начальное значение, с которого начинаются вычисления, равно нулю (второй аргумент `reduce`).
+
+Сначала анонимная функция вызывается с этим начальным значением и первым элементом массива, результат запоминается и передаётся в следующий вызов, уже со вторым аргументом массива, затем новое значение участвует в вычислениях с третьим аргументом и так далее.
+
+Таблица вычислений получается такая:
+<table class="bordered">
+ <thead>
+  <tr>
+   <th></th>
+   <th>`prev`</th>
+   <th>`current`</th>
+   <th>результат</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>первый вызов</th>
+   <td>`0`</td>
+   <td>`1`</td>
+   <td>`1`</td>
+  </tr>
+  <tr>
+   <th>второй вызов</th>
+   <td>`1`</td>
+   <td>`2`</td>
+   <td>`3`</td>
+  </tr>
+  <tr>
+   <th>третий вызов</th>
+   <td>`3`</td>
+   <td>`3`</td>
+   <td>`6`</td>
+  </tr>
+  <tr>
+   <th>четвёртый вызов</th>
+   <td>`6`</td>
+   <td>`4`</td>
+   <td>`10`</td>
+  </tr>
+  <tr>
+   <th>пятый вызов</th>
+   <td>`10`</td>
+   <td>`5`</td>
+   <td>`15`</td>
+  </tr>
+ </tbody>
+</table>
+
+Функция-аргумент `reduce` могла бы также использовать параметры `i` и `array`, но здесь в них нет нужды.
+
+**Можно сделать ещё короче!**
+
+Посмотрим, что будет, если не указать `initialValue` в вызове `arr.reduce`:
+
+```js
+//+ run
+var arr = [1, 2, 3, 4, 5]
+
+// убрали 0 в конце
+var result = arr.reduce(function(prev, current) { return prev + current });
+
+alert(result); // 15
+```
+
+Результат -- точно такой же! Это потому, что при отсутствии `initialValue` в качестве первого значения берётся первый элемент массива, а перебор стартует со второго. 
+
+Таблица вычислений будет такая же, за вычетом первой строки.
+
+**Метод [arr.reduceRight](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/reduceRight) работает аналогично, но идёт по массиву справа-налево:**
+
+
+
+## Итого
+
+Мы рассмотрели методы:
+<ul>
+<li>`forEach` -- для *перебора* массива.</li>
+<li>`filter` -- для *фильтрации* массива.</li>
+<li>`every/some` -- для *проверки* массива.</li>
+<li>`map` -- для *трансформации* массива в массив.</li>
+<li>`reduce/reduceRight` -- для *прохода по массиву с вычислением значения*.</li>
+</ul>
+
+Во многих ситуациях их использование позволяет написать код короче и понятнее, чем обычный перебор через `for`.
+ 
\ No newline at end of file
diff --git a/1-js/4-data-structures/9-arguments-pseudoarray/1-check-arguments-undefined/solution.md b/1-js/4-data-structures/9-arguments-pseudoarray/1-check-arguments-undefined/solution.md
new file mode 100644
index 00000000..277201c7
--- /dev/null
+++ b/1-js/4-data-structures/9-arguments-pseudoarray/1-check-arguments-undefined/solution.md
@@ -0,0 +1,12 @@
+Узнать количество реально переданных аргументов можно по значению `arguments.length`:
+
+```js
+//+ run
+function f(x) {
+  alert(arguments.length ? 1 : 0);
+}
+
+f(undefined);
+f();
+```
+
diff --git a/1-js/4-data-structures/9-arguments-pseudoarray/1-check-arguments-undefined/task.md b/1-js/4-data-structures/9-arguments-pseudoarray/1-check-arguments-undefined/task.md
new file mode 100644
index 00000000..7cfd2562
--- /dev/null
+++ b/1-js/4-data-structures/9-arguments-pseudoarray/1-check-arguments-undefined/task.md
@@ -0,0 +1,16 @@
+# Проверка на аргумент-undefined
+
+[importance 5]
+
+Как в функции отличить отсутствующий аргумент от `undefined`?
+
+```js
+function f(x) { 
+  // ..ваш код..
+  // выведите 1, если первый аргумент есть, и 0 - если нет
+}
+
+f(undefined); // 1
+f(); // 0
+```
+
diff --git a/1-js/4-data-structures/9-arguments-pseudoarray/2-sum-arguments/solution.md b/1-js/4-data-structures/9-arguments-pseudoarray/2-sum-arguments/solution.md
new file mode 100644
index 00000000..c957acc6
--- /dev/null
+++ b/1-js/4-data-structures/9-arguments-pseudoarray/2-sum-arguments/solution.md
@@ -0,0 +1,21 @@
+
+
+```js
+//+ run
+function sum() {
+  var result = 0;
+
+  for(var i=0; i<arguments.length; i++) {
+    result += arguments[i];
+  }
+
+  return result;
+}
+
+alert( sum() ); // 0
+alert( sum(1) ); // 1
+alert( sum(1, 2) ); // 3
+alert( sum(1, 2, 3) ); // 6
+alert( sum(1, 2, 3, 4) ); // 10
+```
+
diff --git a/1-js/4-data-structures/9-arguments-pseudoarray/2-sum-arguments/task.md b/1-js/4-data-structures/9-arguments-pseudoarray/2-sum-arguments/task.md
new file mode 100644
index 00000000..7777033b
--- /dev/null
+++ b/1-js/4-data-structures/9-arguments-pseudoarray/2-sum-arguments/task.md
@@ -0,0 +1,14 @@
+# Сумма аргументов
+
+[importance 5]
+
+Напишите функцию `sum(...)`, которая возвращает сумму всех своих аргументов:
+
+```js
+sum() = 0
+sum(1) = 1
+sum(1, 2) = 3
+sum(1, 2 ,3) = 6
+sum(1, 2, 3, 4) = 10
+```
+
diff --git a/1-js/4-data-structures/9-arguments-pseudoarray/article.md b/1-js/4-data-structures/9-arguments-pseudoarray/article.md
new file mode 100644
index 00000000..47d13f8e
--- /dev/null
+++ b/1-js/4-data-structures/9-arguments-pseudoarray/article.md
@@ -0,0 +1,422 @@
+# Псевдомассив аргументов "arguments"
+
+В JavaScript любая функция может быть вызвана с произвольным количеством аргументов. 
+
+[cut]
+Например:
+
+```js
+//+ run
+function go(a,b) {
+  alert("a="+a+", b="+b);
+}
+
+go(1);     // a=1, b=undefined
+go(1,2);   // a=1, b=2
+go(1,2,3); // a=1, b=2, третий аргумент не вызовет ошибку
+```
+
+[smart header="В JavaScript нет \"перегрузки\" функций"]
+
+В некоторых языках программист может создать две функции с одинаковым именем, но разным набором аргументов, а при вызове интерпретатор сам выберет нужную:
+
+```js
+function log(a) {
+  ...
+}
+
+function log(a,b,c) {
+  ...
+}
+
+*!*
+log(a); // вызовется первая функция
+log(a,b,c); // вызовется вторая функция
+*/!*
+```
+
+Это называется "полиморфизмом функций" или "перегрузкой функций". В JavaScript ничего подобного нет.
+
+**Может быть только одна функция с именем `log`, которая вызывается с любыми аргументами.** А уже внутри она может посмотреть, с чем вызвана и по-разному отработать.
+
+В примере выше второе объявление `log` просто переопределит первое.
+[/smart]
+
+## Доступ к "лишним" аргументам  
+
+Как получить значения аргументов, которых нет в списке параметров?
+
+Доступ к ним осуществляется через "псевдо-массив" <a href="https://developer.mozilla.org/en/JavaScript/Reference/functions_and_function_scope/arguments">arguments</a>. 
+
+Он содержит список аргументов по номерам: `arguments[0]`, `arguments[1]`..., а также свойство `length`.
+
+Например, выведем список всех аргументов:
+
+```js
+//+ run
+function sayHi() {
+  for (var i=0; i<arguments.length; i++) {
+    alert("Привет, " + arguments[i]);
+  }
+}
+ 
+sayHi("Винни", "Пятачок");  // 'Привет, Винни', 'Привет, Пятачок'
+```
+
+Все параметры находятся в `arguments`, даже если они есть в списке. Код выше сработал бы также, будь функция объявлена `sayHi(a,b,c)`. 
+
+
+[warn header="Связь между `arguments` и параметрами"]
+
+**В старом стандарте JavaScript псевдо-массив `arguments` и переменные-параметры ссылаются на одни и те же значения.**
+
+В результате изменения `arguments` влияют на параметры и наоборот. 
+
+Например:
+
+```js
+//+ run
+function f(x) {
+  arguments[0] = 5; // меняет переменную x
+  alert(x); // 5
+} 
+
+f(1);
+```
+
+Наоборот:
+
+```js
+//+ run
+function f(x) {
+  x = 5; 
+  alert(arguments[0]); // 5, обновленный x 
+} 
+
+f(1);
+```
+
+В современной редакции стандарта это поведение изменено. Аргументы отделены от локальных переменных:
+
+```js
+//+ run
+function f(x) {
+  "use strict"; // для браузеров с поддержкой строгого режима
+
+  arguments[0] = 5;
+  alert(x); // не 5, а 1! Переменная "отвязана" от arguments
+} 
+
+f(1);
+```
+
+**Если вы не используете строгий режим, то чтобы переменные не менялись "неожиданно", рекомендуется никогда не изменять `arguments`.** 
+[/warn]
+
+### arguments -- это не массив
+
+Частая ошибка новичков -- попытка применить методы `Array` к `arguments`. Это невозможно:
+
+```js
+//+ run
+function sayHi() {
+  var a = arguments.shift(); // ошибка! нет такого метода!
+}
+
+sayHi(1);
+```
+
+Дело в том, что `arguments` -- это не массив `Array`. 
+
+В действительности, это обычный объект, просто ключи числовые и есть `length`. На этом сходство заканчивается. Никаких особых методов у него нет, и методы массивов он тоже не поддерживает.  
+
+Впрочем, никто не мешает сделать обычный массив из `arguments`, например так:
+
+```js
+//+ run
+var args = [];
+for(var i=0; i<arguments.length; i++) {
+  args[i] = arguments[i];
+}
+```
+
+Такие объекты иногда называют *"коллекциями"* или *"псевдомассивами"*.
+
+## Примеры работы с аргументами 
+
+### Копирование объектов copy(dst, src1, src2...) [#copy]
+
+Иногда встаёт задача -- скопировать в существующий объект свойства из одного или нескольких других. 
+
+Напишем для этого функцию `copy`. Она будет работать с любым числом аргументов, благодаря использованию `arguments`.
+
+Синтаксис:
+<dl>
+<dt>copy(dst, src1, src2...)</dt>
+<dd>Копирует свойства из объектов `src1, src2,...` в объект `dst`. Возвращает получившийся объект.</dd>
+</dl>
+
+Использование:
+
+<ul>
+<li>Для объединения нескольких объектов в один:
+
+```js
+//+ run
+var vasya = {
+  age: 21,
+  name: 'Вася',
+  surname: 'Петров'
+};
+
+var user = { 
+  isAdmin: false,
+  isEmailConfirmed: true
+};
+
+var student = {
+  university: 'My university'
+};
+
+// добавить к vasya свойства из user и student
+*!*
+copy(vasya, user, student); 
+*/!*
+
+alert(vasya.isAdmin); // false
+alert(vasya.university); // My university
+```
+
+</li>
+<li>Для создания копии объекта `user`:
+
+```js
+// скопирует все свойства в пустой объект
+var userClone = copy({}, user);
+```
+
+Такой "клон" объекта может пригодиться там, где мы хотим изменять его свойства, при этом не трогая исходный объект `user`.
+
+В нашей реализации мы будем копировать только свойства первого уровня, то есть вложенные объекты как-то особым образом не обрабатываются. Впрочем, её можно расширить.</li>
+</ul>
+
+А вот и реализация:
+
+```js
+//+ autorun
+function copy() {
+  var dst = arguments[0];
+  for (var i=1; i<arguments.length; i++) {
+    var arg = arguments[i];
+    for (var key in arg) {
+      dst[key] = arg[key];
+    }
+  }
+  return dst;
+}
+```
+
+Здесь первый аргумент `copy` -- это объект, в который нужно копировать, он назван `dst`. Для упрощения доступа к нему можно указать его прямо в объявлении функции:
+
+```js
+*!*
+function copy(dst) {
+*/!*
+  // остальные аргументы остаются безымянными
+  for (var i=1; i<arguments.length; i++) {
+    var arg = arguments[i];
+    for (var key in arg) {
+      dst[key] = arg[key];
+    }
+  }
+  return dst;
+}
+```
+
+### Аргументы по умолчанию через ||
+
+Если функция вызвана с меньшим количеством аргументов, чем указано, то отсутствующие аргументы считаются равными `undefined`.
+
+Зачастую в случае отсутствия аргумента мы хотим присвоить ему некоторое "стандартное" значение или, иначе говоря,  значение "по умолчанию". Это можно удобно сделать при помощи оператора логическое ИЛИ `||`.
+
+Например, функция `showWarning`, описанная ниже, должна показывать предупреждение. Для этого она принимает ширину `width`, высоту `height`, заголовок `title` и содержимое `contents`, но большая часть этих аргументов необязательна:
+
+```js
+function showWarning(width, height, title, contents) {
+  width = width || 200; // если не указана width, то width = 200
+  height = height || 100; // если нет height, то height = 100
+  title = title || "Предупреждение"; 
+
+  //...
+}
+```
+
+Это отлично работает в тех ситуациях, когда "нормальное" значение параметра в логическом контексте отлично от `false`. В коде выше, при передаче `width = 0` или `width = null`, оператор ИЛИ заменит его на значение по умолчанию.
+
+А что, если мы хотим использовать значение по умолчанию только если `width === undefined`? В этом случае оператор ИЛИ уже не подойдёт, нужно поставить явную проверку:
+
+```js
+function showWarning(width, height, title, contents) {
+  if (width !== undefined) width = 200; 
+  if (height !== undefined) height = 100;
+  if (title !== undefined) title = "Предупреждение"; 
+
+  //...
+}
+```
+
+### "Именованные аргументы"
+
+*Именованные аргументы* -- альтернативная техника работы с аргументами, которая вообще не использует `arguments`.
+
+Некоторые языки программирования позволяют передать параметры как-то так: `f(width=100, height=200)`, то есть по именам, а что не передано, тех аргументов нет. Это очень удобно в тех случаях, когда аргументов много, сложно запомнить их порядок и большинство вообще не надо передавать, по умолчанию подойдёт. 
+
+Такая ситуация часто встречается в компонентах интерфейса. Например, у "меню" может быть масса настроек отображения, которые можно "подкрутить" но обычно нужно передать всего один-два главных параметра, а остальные возьмутся по умолчанию.
+ 
+В JavaScript для этих целей используется передача аргументов в виде объекта, а в его свойствах мы передаём параметры.
+
+Получается так:
+
+```js
+function showWarning(options) {
+  var width = options.width || 200;  // по умолчанию
+  var height = options.height || 100;
+  
+  var title = options.title || "Предупреждение";
+
+  // ...
+}
+
+showWarning({
+```
+
+Вызвать такую функцию очень легко. Достаточно передать объект аргументов, указав в нем только нужные:
+
+```js
+showWarning({ 
+  contents: "Вы вызвали функцию" // и всё понятно!
+});
+```
+
+Сравним это с передачей аргументов через список:
+
+```js
+showWarning(null, null, "Предупреждение!"); 
+// мысль программиста "а что это за null, null в начале? ох, надо глядеть описание функции"
+```
+
+Не правда ли, объект -- гораздо проще и понятнее?
+
+Еще один бонус кроме красивой записи -- возможность повторного использования объекта аргументов:
+
+```js
+var opts = {
+  width: 400,
+  height: 200, 
+  contents: "Текст"
+};
+
+showWarning(opts);
+
+opts.contents = "Другой текст"; 
+
+*!*
+showWarning(opts); // вызвать с новым текстом, без копирования других аргументов
+*/!*
+```
+
+Именованные аргументы применяются во многих JavaScript-фреймворках.
+
+
+
+
+
+## Устаревшее свойство arguments.callee [#arguments-callee]
+
+В старом стандарте JavaScript объект `arguments` не только хранил список аргументов, но и содержал в свойстве `arguments.callee` ссылку на функцию, которая выполняется в данный момент. 
+
+[warn header="Используйте NFE вместо `arguments.callee`"]
+Это свойство устарело, при `use strict` оно не работает, но ещё встречается в старом коде, поэтому о нём желательно знать.
+
+Современная спецификация рекомендует использовать ["именованные функциональные выражения (NFE)"](#functions-nfe). 
+[/warn]
+
+Например:
+
+```js
+//+ run
+function f() {
+  alert( arguments.callee === f ); // true
+}
+
+f();
+```
+
+Эти два примера будут работать одинаково:
+
+```js
+// подвызов через NFE
+var factorial = function f(n) {  
+  return n==1 ? 1 : n**!*f(n-1)*/!*;
+};
+
+// подвызов через arguments.callee
+var factorial = function(n) {  
+  return n==1 ? 1 : n**!*arguments.callee(n-1)*/!*;
+};
+```
+
+В учебнике мы его использовать не будем, оно приведено для общего ознакомления, так как пока ещё много старого кода использует его.
+
+### arguments.callee.caller   
+
+Устаревшее свойство `arguments.callee.caller` хранит ссылку на *функцию, которая вызвала данную*.
+
+[warn header="Это свойство тоже устарело"]
+Это свойство было в старом стандарте, при `use strict` оно не работает, как и `arguments.callee`. 
+
+Также ранее существовало похожее свойство `arguments.caller` (без `callee`). Но это уже вообще раритет, оно даже не кросс-браузерное. А вот свойство `arguments.callee.caller` поддерживается везде, если не использован `use strict`, поэтому в старом коде оно встречается.
+[/warn]
+ 
+Пример работы:
+
+```js
+//+ run
+f1();
+
+function f1() {
+  alert(arguments.callee.caller); // null, меня вызвали из глобального кода
+  f2();
+}
+
+function f2() {
+  alert(arguments.callee.caller); // f1, функция, из которой меня вызвали
+  f3();
+}
+
+function f3() {
+  alert(arguments.callee.caller); // f2, функция, из которой меня вызвали
+}
+```
+
+В учебнике мы это свойство также не будем использовать.
+
+## Итого 
+
+<ul>
+<li>Полный список аргументов, с которыми вызвана функция, доступен через `arguments`.</li>
+<li>Это псевдомассив, то есть объект, который похож на массив, в нём есть нумерованные свойства и `length`, но методов массива у него нет.</li>
+<li>В старом стандарте было свойство `arguments.callee` со ссылкой на текущую функцию, а также свойство `arguments.callee.caller`, содержащее ссылку на функцию, которая вызвала данную. Эти свойства устарели, при `use strict` обращение к ним приведёт к ошибке.</li>
+<li>Для указания аргументов по умолчанию, в тех случаях, когда они заведомо не `false`, удобен оператор `||`.</li>
+</ul>
+
+В тех случаях, когда возможных аргументов много и, в особенности, когда большинство их имеют значения по умолчанию, вместо работы с `arguments` организуют передачу данных через объект, который как правило называют `options`.
+
+Возможен и гибридный подход, при котором первый аргумент обязателен, а второй -- `options`, который содержит всевозможные дополнительные параметры:
+
+```js
+function showMessage(text, options) {
+  // показать сообщение text, настройки показа указаны в options
+}
+```
+
diff --git a/1-js/4-data-structures/index.md b/1-js/4-data-structures/index.md
new file mode 100644
index 00000000..774dee46
--- /dev/null
+++ b/1-js/4-data-structures/index.md
@@ -0,0 +1,3 @@
+# Структуры данных
+
+Изучаем JavaScript: расширенное знакомство со встроенными типами данных, их особенностями.
\ No newline at end of file
diff --git a/1-js/5-functions-closures/1-global-object/1-window-and-variable/solution.md b/1-js/5-functions-closures/1-global-object/1-window-and-variable/solution.md
new file mode 100644
index 00000000..f889e997
--- /dev/null
+++ b/1-js/5-functions-closures/1-global-object/1-window-and-variable/solution.md
@@ -0,0 +1,24 @@
+Ответ: `1`.
+
+```js
+//+ run  untrusted refresh
+if ("a" in window) {
+    var a = 1;
+}
+alert(a);
+```
+
+Посмотрим, почему.
+
+На стадии подготовки к выполнению, из `var a` создается `window.a`:
+
+```js
+// window = {a:undefined}
+
+if ("a" in window) { // в if видно что window.a уже есть
+    var a = 1; // поэтому эта строка сработает
+}
+alert(a);
+```
+
+В результате `a` становится `1`.
\ No newline at end of file
diff --git a/1-js/5-functions-closures/1-global-object/1-window-and-variable/task.md b/1-js/5-functions-closures/1-global-object/1-window-and-variable/task.md
new file mode 100644
index 00000000..d06c144a
--- /dev/null
+++ b/1-js/5-functions-closures/1-global-object/1-window-and-variable/task.md
@@ -0,0 +1,13 @@
+# Window и переменная
+
+[importance 5]
+
+Каков будет результат кода?
+
+```js
+if ("a" in window) {
+    var a = 1;
+}
+alert(a);
+```
+
diff --git a/1-js/5-functions-closures/1-global-object/2-window-and-variable-2/solution.md b/1-js/5-functions-closures/1-global-object/2-window-and-variable-2/solution.md
new file mode 100644
index 00000000..379979fc
--- /dev/null
+++ b/1-js/5-functions-closures/1-global-object/2-window-and-variable-2/solution.md
@@ -0,0 +1,12 @@
+Ответ: **ошибка**.
+
+Переменной `a` нет, так что условие `"a" in window` не выполнится. В результате на последней строчке - обращение к неопределенной переменной.
+
+```js
+//+ run untrusted refresh
+if ("a" in window) {
+    a = 1;
+} 
+alert(a);  // <-- error!
+```
+
diff --git a/1-js/5-functions-closures/1-global-object/2-window-and-variable-2/task.md b/1-js/5-functions-closures/1-global-object/2-window-and-variable-2/task.md
new file mode 100644
index 00000000..b88a32f9
--- /dev/null
+++ b/1-js/5-functions-closures/1-global-object/2-window-and-variable-2/task.md
@@ -0,0 +1,13 @@
+# Window и переменная 2
+
+[importance 5]
+
+Каков будет результат (перед `a` нет `var`)?
+
+```js
+if ("a" in window) {
+    a = 1;
+}
+alert(a);
+```
+
diff --git a/1-js/5-functions-closures/1-global-object/3-window-and-variable-3/solution.md b/1-js/5-functions-closures/1-global-object/3-window-and-variable-3/solution.md
new file mode 100644
index 00000000..dd910b4d
--- /dev/null
+++ b/1-js/5-functions-closures/1-global-object/3-window-and-variable-3/solution.md
@@ -0,0 +1,14 @@
+Ответ: `1`.
+
+Переменная `a` создается до начала выполнения кода, так что условие `"a" in window` выполнится и сработает `a = 1`.
+
+```js
+//+ run  untrusted refresh
+if ("a" in window) {
+    a = 1;
+}
+var a;
+
+alert(a); // 1
+```
+
diff --git a/1-js/5-functions-closures/1-global-object/3-window-and-variable-3/task.md b/1-js/5-functions-closures/1-global-object/3-window-and-variable-3/task.md
new file mode 100644
index 00000000..6575a422
--- /dev/null
+++ b/1-js/5-functions-closures/1-global-object/3-window-and-variable-3/task.md
@@ -0,0 +1,15 @@
+# Window и переменная 3
+
+[importance 5]
+
+Каков будет результат (перед `a` нет `var`, а ниже есть)?
+
+```js
+if ("a" in window) {
+    a = 1;
+}
+var a;
+
+alert(a);
+```
+
diff --git a/1-js/5-functions-closures/1-global-object/4-function-and-variable/solution.md b/1-js/5-functions-closures/1-global-object/4-function-and-variable/solution.md
new file mode 100644
index 00000000..33fe8cf2
--- /dev/null
+++ b/1-js/5-functions-closures/1-global-object/4-function-and-variable/solution.md
@@ -0,0 +1,19 @@
+Ответ: `5`.
+
+```js
+//+ run untrusted
+var a = 5; 
+ 
+function a() { }
+
+alert(a);
+```
+
+Чтобы понять, почему -- разберём внимательно как работает этот код.
+<ol>
+<li>До начала выполнения создаётся переменная `a` и функция `a`. Стандарт написан так, что функция создаётся первой и переменная ее не перезаписывает. То есть, функция имеет приоритет. Но в данном случае это совершенно неважно, потому что...
+</li>
+<li>...После инициализации, когда код начинает выполняться -- срабатывает присваивание `a = 5`, перезаписывая `a`, и уже не важно, что там лежало.</li>
+<li>Объявление `Function Declaration` на стадии выполнения игнорируется (уже обработано).</li>
+<li>В результате `alert(a)` выводит 5.</li>
+</ol>
diff --git a/1-js/5-functions-closures/1-global-object/4-function-and-variable/task.md b/1-js/5-functions-closures/1-global-object/4-function-and-variable/task.md
new file mode 100644
index 00000000..ee8502d0
--- /dev/null
+++ b/1-js/5-functions-closures/1-global-object/4-function-and-variable/task.md
@@ -0,0 +1,15 @@
+# Функция и переменная
+
+[importance 3]
+
+Каков будет результат кода? Почему?
+
+```js
+var a = 5; 
+ 
+function a() { }
+
+alert(a);
+```
+
+P.S. Это задание -- учебное, на понимание процесса инициализации и выполнения. В реальной жизни мы, конечно же, не будем называть переменную и функцию одинаково. 
diff --git a/1-js/5-functions-closures/1-global-object/article.md b/1-js/5-functions-closures/1-global-object/article.md
new file mode 100644
index 00000000..e4d9ad5d
--- /dev/null
+++ b/1-js/5-functions-closures/1-global-object/article.md
@@ -0,0 +1,242 @@
+# Глобальный объект
+
+Механизм работы функций и переменных в JavaScript очень отличается от большинства языков.
+
+Чтобы его понять, мы в этой главе рассмотрим переменные и функции в глобальной области. А в следующей -- пойдём дальше.
+
+[cut]
+
+## Глобальный объект
+
+*Глобальными* называют переменные и функции, которые не находятся внутри какой-то функции. То есть, иными словами, если переменная или функция не находятся внутри конструкции `function`, то они -- "глобальные".
+
+**В JavaScript все глобальные переменные и функции являются свойствами специального объекта, который называется *"глобальный объект"* (`global object`).**
+
+В браузере этот объект явно доступен под именем `window`. Объект `window` одновременно является глобальным объектом и содержит ряд свойств и методов для работы с окном браузера, но нас здесь интересует только его роль как глобального объекта.
+
+В других окружениях, например Node.JS, глобальный объект может быть недоступен в явном виде, но суть происходящего от этого не изменяется, поэтому далее для обозначения глобального объекта мы будем использовать `"window"`.
+
+**Присваивая или читая глобальную переменную, мы, фактически, работаем со свойствами `window`.** 
+
+Например:
+
+```js
+//+ run untrusted refresh
+var a = 5;   // объявление var создаёт свойство window.a
+alert(window.a); // 5
+```
+
+Создать переменную можно и явным присваиванием в `window`:
+
+```js
+//+ run untrusted refresh
+window.a = 5; 
+alert(a); // 5
+```
+
+## Порядок инициализации
+
+Выполнение скрипта происходит в две фазы:
+<ol>
+<li>На первой фазе происходит инициализация, подготовка к запуску.
+
+Во время инициализации скрипт сканируется на предмет объявления функций вида [Function Declaration](/function-declaration-expression), а затем -- на предмет объявления переменных `var`. Каждое такое объявление добавляется в `window`. 
+
+**Функции, объявленные как Function Declaration, создаются сразу работающими, а переменные -- равными `undefined`.**
+</li>
+<li>На второй фазе -- собственно, выполнение.
+
+Присваивание (`=`) значений переменных происходит на второй фазе, когда поток выполнения доходит до соответствующей строчки кода.
+</li>
+</ol>
+
+В начале кода ниже указано содержание глобального объекта на момент окончания инициализации:
+
+```js
+// По окончании инициализации, до выполнения кода:
+*!*
+// window = { f: function, a: undefined, g: undefined }
+*/!*
+
+var a = 5; // при инициализации даёт: window.a=undefined
+
+function f(arg) { /*...*/ }  // при инициализации даёт: window.f = function
+
+var g = function(arg) { /*...*/ }; // при инициализации даёт: window.g = undefined
+```
+
+Кстати, тот факт, что к началу выполнения кода переменные и функции *уже* содержатся в `window`, можно легко проверить:
+
+```js
+//+ run untrusted refresh
+ 
+alert("a" in window); // *!*true*/!*,  т.к. есть свойство window.a 
+alert(a); // равно *!*undefined*/!*,  присваивание будет выполнено далее
+alert(f); // *!*function ...*/!*,  готовая к выполнению функция
+alert(g); // *!*undefined*/!*, т.к. это переменная, а не Function Declaration
+
+var a = 5;  
+function f() { /*...*/ } 
+var g = function() { /*...*/ };
+```
+
+[smart header="Присвоение переменной без объявления"]
+В старом стандарте JavaScript переменную можно было создать и без объявления `var`:
+
+```js
+//+ run
+a = 5;
+
+alert(a); // 5
+```
+
+Такое присвоение, как и `var a = 5`, создает свойство `window.a = 5`. Отличие от `var a = 5` -- в том, что переменная будет создана не на этапе входа в область видимости, а в момент присвоения.
+
+Сравните два кода ниже. 
+
+Первый выведет `undefined`, так как переменная была добавлена в `window` на фазе инициализации:
+
+```js
+//+ run untrusted refresh
+*!*
+alert(a); // undefined
+*/!*
+
+var a = 5;
+```
+
+Второй код выведет ошибку, так как переменной ещё не существует:
+
+```js
+//+ run untrusted refresh
+*!*
+alert(a); // error, a is not defined
+*/!*
+
+a = 5;
+```
+
+**Вообще, рекомендуется всегда объявлять переменные через `var`.**
+
+В современном стандарте присваивание без `var` вызовет ошибку:
+
+```js
+//+ run
+'use strict';
+a = 5; // error, a is not defined
+```
+
+[/smart]
+
+[smart header="Конструкции `for, if...` не влияют на видимость переменных"]
+Фигурные скобки, которые используются в `for, while, if`, в отличие от объявлений функции, имеют "декоративный" характер.
+
+В JavaScript нет разницы между объявлением вне блока:
+
+```js
+*!*var*/!* i;
+{
+  i = 5;
+}
+```
+
+...И внутри него:
+
+```js
+i = 5;
+{
+  *!*var*/!* i;
+}
+```
+
+**Также нет разницы между объявлением в цикле и вне его:**
+
+```js
+//+ run untrusted refresh
+for (*!*var*/!* i=0; i<5; i++) { }
+```
+
+Идентичный по функциональности код:
+
+```js
+//+ run untrusted refresh
+*!*var i;*/!*
+for (i=0; i<5; i++) { }
+```
+
+В обоих случаях переменная будет создана до выполнения цикла, на стадии инициализации, и ее значение будет сохранено после окончания цикла.
+
+[/smart]
+
+[smart header="Не важно, где и сколько раз объявлена переменная"]
+
+Объявлений `var` может быть сколько угодно:
+
+```js
+var i = 10;
+
+for (var i=0; i<20; i++) {
+  ...
+}
+
+var i = 5;
+```
+
+**Все `var` будут обработаны один раз, на фазе инициализации.**
+
+На фазе исполнения объявления `var` будут проигнорированы: они уже были обработаны. Зато будут выполнены присваивания.
+[/smart]
+
+
+[warn header="Ошибки при работе с `window` в IE8-"]
+
+В старых IE есть две забавные ошибки при работе с переменными в `window`:
+
+<ol>
+<li>Переопределение переменной, у которой такое же имя, как и `id` элемента, приведет к ошибке:
+
+```html
+<!--+ run -->
+<div id="a">...</div>
+<script> 
+  a = 5;    // ошибка в IE<9! Правильно будет "var a = 5"
+  alert(a); // никогда не сработает
+</script>
+```
+
+А если сделать через `var`, то всё будет хорошо. 
+
+Это была реклама того, что надо везде ставить `var`.
+
+</li>
+<li>Ошибка при рекурсии через функцию-свойство `window`. Следующий код "умрет" в IE<9:
+
+```html
+<!--+ run height=0 -->
+<script>
+// рекурсия через функцию, явно записанную в window
+window.recurse = function(times) {
+  if (times !== 0) recurse(times-1);
+}
+
+recurse(13);
+</script>
+```
+
+Проблема здесь возникает из-за того, что функция напрямую присвоена в `window.recurse = ...`. Ее не будет при обычном объявлении функции.
+
+**Этот пример выдаст ошибку только в настоящем IE8!** Не IE9 в режиме эмуляции. Вообще, режим эмуляции позволяет отлавливать где-то 95% несовместимостей и проблем, а для оставшихся 5% вам нужен будет настоящий IE8 в виртуальной машине.
+</li>
+</ol>
+[/warn]
+
+
+## Итого
+
+В результате инициализации, к началу выполнения кода:
+<ol>
+<li>Функции, объявленные как `Function Declaration`, создаются полностью и готовы к использованию.</li>
+<li>Переменные объявлены, но равны `undefined`. Присваивания выполнятся позже, когда выполнение дойдет до них.</li>
+</ol>
+
+
diff --git a/1-js/5-functions-closures/2-closures/1-say-phrase-first/solution.md b/1-js/5-functions-closures/2-closures/1-say-phrase-first/solution.md
new file mode 100644
index 00000000..7d7d24e9
--- /dev/null
+++ b/1-js/5-functions-closures/2-closures/1-say-phrase-first/solution.md
@@ -0,0 +1,17 @@
+Ошибки не будет, выведет `"Вася, undefined"`.
+
+```js
+//+ run
+ 
+*!*
+say('Вася');  // Что выведет? Не будет ли ошибки?
+*/!*
+
+var phrase = 'Привет';
+
+function say(name) {
+  alert(name + ", " + phrase);
+}
+```
+
+Переменная как таковая существует, вот только на момент запуска функции она равна `undefined`.
\ No newline at end of file
diff --git a/1-js/5-functions-closures/2-closures/1-say-phrase-first/task.md b/1-js/5-functions-closures/2-closures/1-say-phrase-first/task.md
new file mode 100644
index 00000000..37162cd1
--- /dev/null
+++ b/1-js/5-functions-closures/2-closures/1-say-phrase-first/task.md
@@ -0,0 +1,19 @@
+# Что выведет say в начале кода?
+
+[importance 5]
+
+Что будет, если вызов `sayHi('Вася');` стоит в самом-самом начале, в первой строке кода?
+
+```js
+ 
+*!*
+say('Вася');  // Что выведет? Не будет ли ошибки?
+*/!*
+
+var phrase = 'Привет';
+
+function say(name) {
+  alert(name + ", " + phrase);
+}
+```
+
diff --git a/1-js/5-functions-closures/2-closures/1.png b/1-js/5-functions-closures/2-closures/1.png
new file mode 100755
index 00000000..bbbbb2bc
Binary files /dev/null and b/1-js/5-functions-closures/2-closures/1.png differ
diff --git a/1-js/5-functions-closures/2-closures/1@2x.png b/1-js/5-functions-closures/2-closures/1@2x.png
new file mode 100755
index 00000000..d6fea260
Binary files /dev/null and b/1-js/5-functions-closures/2-closures/1@2x.png differ
diff --git a/1-js/5-functions-closures/2-closures/2-which-value-is-modified/solution.md b/1-js/5-functions-closures/2-closures/2-which-value-is-modified/solution.md
new file mode 100644
index 00000000..eed571f3
--- /dev/null
+++ b/1-js/5-functions-closures/2-closures/2-which-value-is-modified/solution.md
@@ -0,0 +1,9 @@
+**Результатом будет `true`**, т.к. `var` обработается и переменная будет создана до выполнения кода.
+
+Соответственно, присвоение `value=true` сработает на локальной переменной, и `alert` выведет `true`.
+
+**Внешняя переменная не изменится.**
+
+P.S. Если `var` нет, то в функции переменная не будет найдена. Интерпретатор обратится за ней в `window` и изменит её там. 
+
+**Так что без `var` результат будет также `true`, но внешняя переменная изменится.**
diff --git a/1-js/5-functions-closures/2-closures/2-which-value-is-modified/task.md b/1-js/5-functions-closures/2-closures/2-which-value-is-modified/task.md
new file mode 100644
index 00000000..9472005a
--- /dev/null
+++ b/1-js/5-functions-closures/2-closures/2-which-value-is-modified/task.md
@@ -0,0 +1,25 @@
+# В какую переменную будет присвоено значение?
+
+[importance 5]
+
+Каков будет результат выполнения этого кода?
+
+```js
+var value = 0;
+
+function f() {  
+  if (1) {
+    value = true;
+  } else {
+    var value = false;
+  }
+
+  alert(value);
+}
+
+f();
+```
+
+Изменится ли внешняя переменная `value` ?
+
+P.S. Какими будут ответы, если из строки `var value = false` убрать `var`?
\ No newline at end of file
diff --git a/1-js/5-functions-closures/2-closures/2.png b/1-js/5-functions-closures/2-closures/2.png
new file mode 100755
index 00000000..19e1a6d2
Binary files /dev/null and b/1-js/5-functions-closures/2-closures/2.png differ
diff --git a/1-js/5-functions-closures/2-closures/2@2x.png b/1-js/5-functions-closures/2-closures/2@2x.png
new file mode 100755
index 00000000..fc810e06
Binary files /dev/null and b/1-js/5-functions-closures/2-closures/2@2x.png differ
diff --git a/1-js/5-functions-closures/2-closures/3-var-window/solution.md b/1-js/5-functions-closures/2-closures/3-var-window/solution.md
new file mode 100644
index 00000000..da66ef7a
--- /dev/null
+++ b/1-js/5-functions-closures/2-closures/3-var-window/solution.md
@@ -0,0 +1,29 @@
+Результатом будет `undefined`, затем `5`.
+
+```js
+//+ run
+function test() {
+  
+  alert(window);
+
+  var window = 5;
+
+  alert(window);
+}
+
+test();
+```
+
+Такой результат получился потом, что `window` -- это глобальная переменная, но ничто не мешает объявить такую же локальную.
+
+Директива `var window` обработается до начала выполнения кода функции и будет создана локальная переменная, т.е. свойство `LexicalEnvironment.window`:
+
+```js
+LexicalEnvironment = {
+  window: undefined
+}
+```
+
+Когда выполнение кода начнется и сработает `alert`, он выведет уже локальную переменную, которая на тот момент равна `undefined`.
+
+Затем сработает присваивание, и второй `alert` выведет уже `5`.
\ No newline at end of file
diff --git a/1-js/5-functions-closures/2-closures/3-var-window/task.md b/1-js/5-functions-closures/2-closures/3-var-window/task.md
new file mode 100644
index 00000000..1aa6c7a9
--- /dev/null
+++ b/1-js/5-functions-closures/2-closures/3-var-window/task.md
@@ -0,0 +1,19 @@
+# var window
+
+[importance 5]
+
+Каков будет результат выполнения этого кода? Почему?
+
+```js
+function test() {
+  
+  alert(window);
+
+  var window = 5;
+
+  alert(window);
+}
+
+test();
+```
+
diff --git a/1-js/5-functions-closures/2-closures/3.png b/1-js/5-functions-closures/2-closures/3.png
new file mode 100755
index 00000000..caa7d158
Binary files /dev/null and b/1-js/5-functions-closures/2-closures/3.png differ
diff --git a/1-js/5-functions-closures/2-closures/3@2x.png b/1-js/5-functions-closures/2-closures/3@2x.png
new file mode 100755
index 00000000..68c14b75
Binary files /dev/null and b/1-js/5-functions-closures/2-closures/3@2x.png differ
diff --git a/1-js/5-functions-closures/2-closures/4-call-inplace/solution.md b/1-js/5-functions-closures/2-closures/4-call-inplace/solution.md
new file mode 100644
index 00000000..204c334e
--- /dev/null
+++ b/1-js/5-functions-closures/2-closures/4-call-inplace/solution.md
@@ -0,0 +1,37 @@
+Результат - **ошибка**. Попробуйте:
+
+```js
+//+ run
+var a = 5
+
+(function() {
+  alert(a)
+})()
+```
+
+Дело в том, что после `var a = 5` нет точки с запятой. 
+
+JavaScript воспринимает этот код как если бы перевода строки не было:
+
+```js
+//+ run
+var a = 5(function() {
+  alert(a)
+})()
+```
+
+То есть, он пытается вызвать *функцию* `5`, что и приводит к ошибке.
+
+Если точку с запятой поставить, все будет хорошо:
+
+```js
+//+ run
+var a = 5;
+
+(function() {
+  alert(a)
+})()
+```
+
+Это один из наиболее частых и опасных подводных камней, приводящих к ошибкам тех, кто *не* ставит точки с запятой.
+
diff --git a/1-js/5-functions-closures/2-closures/4-call-inplace/task.md b/1-js/5-functions-closures/2-closures/4-call-inplace/task.md
new file mode 100644
index 00000000..988f0273
--- /dev/null
+++ b/1-js/5-functions-closures/2-closures/4-call-inplace/task.md
@@ -0,0 +1,16 @@
+# Вызов "на месте"
+
+[importance 4]
+
+Каков будет результат выполнения кода? Почему?
+
+```js
+var a = 5
+
+(function() {
+  alert(a)
+})()
+```
+
+P.S. *Подумайте хорошо! Здесь все ошибаются!*
+P.P.S. *Внимание, здесь подводный камень! Ок, вы предупреждены.*
diff --git a/1-js/5-functions-closures/2-closures/4.png b/1-js/5-functions-closures/2-closures/4.png
new file mode 100755
index 00000000..4282808b
Binary files /dev/null and b/1-js/5-functions-closures/2-closures/4.png differ
diff --git a/1-js/5-functions-closures/2-closures/4@2x.png b/1-js/5-functions-closures/2-closures/4@2x.png
new file mode 100755
index 00000000..adc4f5ff
Binary files /dev/null and b/1-js/5-functions-closures/2-closures/4@2x.png differ
diff --git a/1-js/5-functions-closures/2-closures/5-access-outer-variable/solution.md b/1-js/5-functions-closures/2-closures/5-access-outer-variable/solution.md
new file mode 100644
index 00000000..4e0a619e
--- /dev/null
+++ b/1-js/5-functions-closures/2-closures/5-access-outer-variable/solution.md
@@ -0,0 +1,3 @@
+Нет, нельзя.
+
+Локальная переменная полностью перекрывает внешнюю. 
diff --git a/1-js/5-functions-closures/2-closures/5-access-outer-variable/task.md b/1-js/5-functions-closures/2-closures/5-access-outer-variable/task.md
new file mode 100644
index 00000000..10e9de72
--- /dev/null
+++ b/1-js/5-functions-closures/2-closures/5-access-outer-variable/task.md
@@ -0,0 +1,17 @@
+# Перекрытие переменной
+
+[importance 4]
+
+Если во внутренней функции есть своя переменная с именем `currentCount` -- можно ли в ней получить `currentCount` из внешней функции?
+
+```js
+function makeCounter() {
+  var currentCount = 1;
+    
+  return function() { 
+    var currentCount;
+    // можно ли здесь вывести currentCount из внешней функции (равный 1)?
+  };
+}
+```
+
diff --git a/1-js/5-functions-closures/2-closures/5.png b/1-js/5-functions-closures/2-closures/5.png
new file mode 100755
index 00000000..42dd9304
Binary files /dev/null and b/1-js/5-functions-closures/2-closures/5.png differ
diff --git a/1-js/5-functions-closures/2-closures/5@2x.png b/1-js/5-functions-closures/2-closures/5@2x.png
new file mode 100755
index 00000000..fca45921
Binary files /dev/null and b/1-js/5-functions-closures/2-closures/5@2x.png differ
diff --git a/1-js/5-functions-closures/2-closures/6-counter-window-variable/solution.md b/1-js/5-functions-closures/2-closures/6-counter-window-variable/solution.md
new file mode 100644
index 00000000..fc3e459d
--- /dev/null
+++ b/1-js/5-functions-closures/2-closures/6-counter-window-variable/solution.md
@@ -0,0 +1,30 @@
+Выведут **1,2,3,4.**
+
+Здесь внутренняя функция будет искать -- и находить `currentCount` каждый раз в самом внешнем объекте переменных: глобальном объекте `window`.
+
+В результате все счётчики будут разделять единое, глобальное текущее значение.
+
+```js
+//+ run
+var currentCount = 1;
+
+function makeCounter() {    
+  return function() { 
+    return currentCount++; 
+  };
+}
+
+var counter = makeCounter();
+var counter2 = makeCounter();
+
+*!*
+alert( counter() ); // ?
+alert( counter() ); // ?
+*/!*
+
+*!*
+alert( counter2() ); // ?
+alert( counter2() ); // ?
+*/!*
+```
+
diff --git a/1-js/5-functions-closures/2-closures/6-counter-window-variable/task.md b/1-js/5-functions-closures/2-closures/6-counter-window-variable/task.md
new file mode 100644
index 00000000..304e59fd
--- /dev/null
+++ b/1-js/5-functions-closures/2-closures/6-counter-window-variable/task.md
@@ -0,0 +1,29 @@
+# Глобальный счётчик
+
+[importance 5]
+
+Что выведут эти вызовы, если переменная `currentCount` находится вне `makeCounter`?
+
+```js
+var currentCount = 1;
+
+function makeCounter() {    
+  return function() { 
+    return currentCount++; 
+  };
+}
+
+var counter = makeCounter();
+var counter2 = makeCounter();
+
+*!*
+alert( counter() ); // ?
+alert( counter() ); // ?
+*/!*
+
+*!*
+alert( counter2() ); // ?
+alert( counter2() ); // ?
+*/!*
+```
+
diff --git a/1-js/5-functions-closures/2-closures/6.png b/1-js/5-functions-closures/2-closures/6.png
new file mode 100755
index 00000000..7e01b2c5
Binary files /dev/null and b/1-js/5-functions-closures/2-closures/6.png differ
diff --git a/1-js/5-functions-closures/2-closures/6@2x.png b/1-js/5-functions-closures/2-closures/6@2x.png
new file mode 100755
index 00000000..38209f2c
Binary files /dev/null and b/1-js/5-functions-closures/2-closures/6@2x.png differ
diff --git a/1-js/5-functions-closures/2-closures/article.md b/1-js/5-functions-closures/2-closures/article.md
new file mode 100644
index 00000000..e79b77bb
--- /dev/null
+++ b/1-js/5-functions-closures/2-closures/article.md
@@ -0,0 +1,435 @@
+# Замыкания, функции изнутри
+
+В этой главе мы продолжим рассматривать, как работают переменные, и, как следствие, познакомимся с замыканиями. От глобального объекта мы переходим к работе внутри функций.
+[cut]
+## Лексическое окружение
+
+Все переменные внутри функции -- это свойства специального внутреннего объекта `LexicalEnvironment`, который создаётся при её запуске.
+
+Мы будем называть этот объект "лексическое окружение" или просто "объект переменных".
+
+При запуске функция создает объект `LexicalEnvironment`, записывает туда аргументы, функции и переменные. Процесс инициализации выполняется в том же порядке, что и для глобального объекта, который, вообще говоря, является частным случаем лексического окружения.
+
+В отличие от `window`, объект `LexicalEnvironment` является внутренним, он скрыт от прямого доступа.
+
+### Пример
+
+Посмотрим пример, чтобы лучше понимать, как это работает:
+
+```js
+function sayHi(name) {
+  var phrase = "Привет, " + name;
+  alert(phrase);
+}
+
+sayHi('Вася');
+```
+
+При вызове функции:
+<ol>
+<li>До выполнения первой строчки её кода, на стадии инициализации, интерпретатор создает пустой объект `LexicalEnvironment` и заполняет его.
+
+В данном случае туда попадает аргумент `name` и единственная переменная `phrase`:
+
+```js
+function sayHi(name) {
+*!*
+  // LexicalEnvironment = { name: 'Вася', phrase: undefined }
+*/!*
+  var phrase = "Привет, " + name;
+  alert(phrase);
+}
+
+sayHi('Вася');
+```
+
+</li>
+<li>Функция выполняется. 
+
+Во время выполнения происходит присвоение локальной переменной `phrase`, то есть, другими словами, присвоение свойству `LexicalEnvironment.phrase` нового значения:
+
+```js
+function sayHi(name) {
+  // LexicalEnvironment = { name: 'Вася', phrase: undefined }
+  var phrase = "Привет, " + name;
+
+*!*
+  // LexicalEnvironment = { name: 'Вася', phrase: 'Привет, Вася'}
+*/!*
+  alert(phrase);
+}
+
+sayHi('Вася');
+```
+
+</li>
+<li>В конце выполнения функции объект с переменными обычно выбрасывается и память очищается.</li>
+</ol>
+
+[smart header="Тонкости спецификации"]
+Если почитать спецификацию ECMA-262, то мы увидим, что речь идёт о двух объектах: `VariableEnvironment` и `LexicalEnvironment`. 
+
+Но там же замечено, что в реализациях эти два объекта могут быть объединены. Так что мы избегаем лишних деталей и используем везде термин `LexicalEnvironment`, это достаточно точно позволяет описать происходящее.
+
+Более формальное описание находится в спецификации ECMA-262, секции 10.2-10.5 и 13.
+[/smart]
+
+
+## Доступ ко внешним переменным   
+
+Из функции мы можем обратиться не только к локальной переменной, но и к внешней:
+
+```js
+var a = 5;
+
+function f() {
+  alert(a);  // 5
+}
+```
+
+**Интерпретатор, при доступе к переменной, сначала пытается найти переменную в текущем `LexicalEnvironment`, а затем, если её нет -- ищет во внешнем объекте переменных. В данном случае им является `window`.**
+
+Такой порядок поиска возможен благодаря тому, что ссылка на внешний объект переменных хранится в специальном внутреннем свойстве функции, которое называется `[[Scope]]`. Это свойство закрыто от прямого доступа, но знание о нём очень важно для понимания того, как работает JavaScript.
+
+Рассмотрим, как `[[Scope]]` создаётся и используется:
+
+<ol>
+<li>Всё начинается с момента создания функции. Функция создается не в вакууме, а в некотором лексическом окружении. 
+
+В случае выше функция создается в глобальном лексическом окружении `window`:
+
+<img src="1.png">
+
+**Для того, чтобы функция могла в будущем обратиться к внешним переменным, в момент создания она получает скрытое свойство `[[Scope]]`, которое ссылается на лексическое окружение, в котором она была создана:**
+
+<img src="2.png">
+
+Эта ссылка появляется одновременно с функцией и умирает вместе с ней. Программист не может как-либо получить или изменить её.
+</li>
+<li>Позже, приходит время и функция запускается.
+
+Интерпретатор вспоминает, что у неё есть свойство `f.[[Scope]]`:
+
+<img src="3.png">
+
+...И использует его при создании объекта переменных для функции.
+
+**Новый объект `LexicalEnvironment` получает ссылку на "внешнее лексическое окружение" со значением из `[[Scope]]`. Эта ссылка используется для поиска переменных, которых нет в текущей функции.**
+
+<img src="4.png">
+Например, `alert(a)` сначала ищет в текущем объекте переменных: он пустой. А потом, как показано зеленой стрелкой на рисунке ниже -- по ссылке, во внешнем окружении.
+
+<img src="5.png">
+
+
+На уровне кода это выглядит как поиск во внешней области видимости, вне функции:
+
+<img src="6.png">
+
+</li>
+</ol>
+
+Если обобщить:
+<ul>
+<li>Каждая функция при создании получает ссылку `[[Scope]]` на объект с переменными, в контексте которого была создана.</li>
+<li>При запуске функции создаётся новый объект с переменными `LexicalEnvironment`. Он получает ссылку на внешний объект переменных из `[[Scope]]`.</li>
+<li>При поиске переменных он осуществляется сначала в текущем объекте переменных, а потом -- по этой ссылке. Благодаря этому в функции доступны внешние переменные.</li>
+</ul>
+
+### Значение переменных -- всегда текущее
+
+Значение переменной из внешней области берётся всегда текущее, на момент запуска, а не то, которое было на момент создания функции.
+
+Например, в коде ниже функция `sayHi` берёт `phrase` из внешней области:
+
+```js
+//+ run
+ 
+var phrase = 'Привет';
+
+function say(name) {
+  alert(name + ", " + phrase);
+}
+
+*!*
+say('Вася');  // Вася, Привет (*)
+*/!*
+
+phrase = 'Пока';
+
+*!*
+say('Вася'); // Вася, Пока (**)
+*/!*
+```
+
+На момент выполнения строки `(*)`, переменная `phrase` имела значение `'Привет'`, а потом изменила его на `'Пока'`. Функция всегда берёт то внешнее значение, которое есть сейчас.
+
+Это естественно, ведь для доступа к внешним переменным функция использует ссылку на внешний объект с ними -- на внешний объект целиком! А не на каждое его свойство (переменную) по отдельности. Если переменная меняется, то при новом доступе функция всегда получит текущее, последнее её значение.
+
+
+
+
+## Вложенные функции
+
+Внутри функции можно объявлять не только локальные переменные, но и другие функции. 
+
+К примеру, вложенная функция может помочь лучше организовать код:
+
+```js
+//+ run
+function sayHi(firstName, lastName) {
+
+  alert( "Привет, " + getFullName() );
+
+*!*
+  function getFullName() {
+    return firstName + " " + lastName;
+  }
+*/!*
+
+}
+
+sayHi("Вася", "Пупкин"); // Привет, Вася Пупкин
+```
+
+Здесь, для наглядности, для вычислений создана функция `getFullName()`.
+
+**Вложенные функции обрабатываются в точности так же, как и глобальные. Единственная разница -- они создаются в объекте переменных внешней функции, а не в `window`.**
+
+При запуске функции `sayHi("Вася", "Пупкин")`:
+<ul>
+<li>Интерпретатор создаст объект для переменных.</li>
+<li>Заполнит его аргументами текущего вызова и локальными переменными:
+
+```js
+function sayHi(firstName, lastName) {
+*!*
+//  LexicalEnvironment = { 
+//    firstName: "Вася", 
+//    lastName: "Пупкин",
+//    getFullName: function
+//  }
+*/!*
+
+  alert( "Привет, " + getFullName() ); // (*)
+
+  function getFullName() {
+    return firstName + " " + lastName;
+  }
+
+}
+
+sayHi("Вася", "Пупкин"); // Привет, Вася Пупкин
+```
+
+</li>
+<li>Далее, в строке `(*)`, при вызове `getFullName()` -- она получит ссылку на внешний объект переменных, достанет оттуда `firstName` и `lastName`.</li>
+</ul>
+
+
+## Возврат функции
+
+Рассмотрим более "продвинутый" вариант, при котором внутри одной функции создаётся другая и возвращается в качестве результата.
+
+Здесь мы будем создавать функцию-счётчик. Это, конечно, учебный пример, дальше будут задачи посложнее, поближе к реальности, ну а при изучении интерфейсов создавать и передавать туда-сюда функцию будет вообще стандартным приёмом разработки.
+
+В примере ниже `makeCounter` создает функцию, которая считает свои вызовы:
+
+```js
+//+ run
+function makeCounter() {
+  var currentCount = 1;
+    
+  return function() { // (**)
+    return currentCount++; 
+  };
+}
+
+var counter = makeCounter(); // (*)
+
+// каждый вызов увеличивает счётчик и возвращает результат
+alert( counter() ); // 1 
+alert( counter() ); // 2
+alert( counter() ); // 3
+
+// создать другой счётчик, он будет независим от первого
+var counter2 = makeCounter();
+alert( counter2() ); // 1
+```
+
+Хранение текущего числа вызовов осуществляется в переменной `currentCount` внешней функции. 
+  
+Что здесь, вообще, происходит?
+
+**Первый этап -- вызов `makeCounter()`:**
+
+<ol>
+<li>В строке `(*)` запускается `makeCounter()`. При этом создаётся `LexicalEnvironment` для переменных текущего вызова. В функции есть одна переменная `var currentCount`, которая станет свойством этого объекта. Она изначально инициализуется в `undefined`, затем, в процессе  выполнения, получит значение `1`:
+
+```js
+function makeCounter() {
+*!*
+  // LexicalEnvironment = { currentCount: undefined } -> window
+*/!*
+
+  var currentCount = 1;
+
+*!*
+  // LexicalEnvironment = { currentCount: 1 } -> window
+*/!*
+    
+  return function() { // [[Scope]] -> LexicalEnvironment (**)
+    return currentCount++;
+  };
+}
+
+var counter = makeCounter(); // (*)
+```
+
+</li>
+<li>В процессе выполнения `makeCounter()` создаёт функцию в строке `(**)`. При создании эта функция получает внутреннее свойство `[[Scope]]` со ссылкой на текущий `LexicalEnvironment`.</li>
+<li>Далее вызов `makeCounter()` завершается и функция `(**)` возвращается и сохраняется во внешней переменной `counter` `(*)`.</li>
+</ol>
+
+**На этом первый этап можно считать завершённым.**
+
+В результате вызова `makeCounter` в переменную `counter` была записана функция:
+
+```js
+var counter = function() { // [[Scope]] -> {currentCount: 1} -> window
+  return currentCount++;
+};
+```
+
+**Возвращённая из `makeCounter()` функция `counter` отличается от "просто функции" тем, что она помнит (через `[[Scope]]`) о том, в каком окружении была создана.** 
+
+Скорее всего, когда-нибудь функция `counter` будет вызвана. Мы не знаем, когда это произойдёт. Может быть, прямо  сейчас, но, вообще говоря, совсем не факт. Этот вызов может быть сильно отделён по времени, поэтому назовём происходящее "вторым этапом".
+
+**Второй этап -- вызов `counter`:**
+
+<ol>
+<li>Эта функция состоит из одной строки: `return currentCount++`, ни переменных ни параметров в ней нет, поэтому её собственный объект переменных, для краткости назовём его `LE` --  будет пуст. 
+
+Единственное, что у него есть -- так это ссылка на внешний `LexicalEnvironment`, которую он получит из `[[Scope]]`:
+
+```js
+var counter = function() {
+  //в процессе запуска LE = {} -> {currentCount: 1} -> window
+  return currentCount++;
+};
+```
+
+</li>
+<li>Чтобы увеличить и вернуть `currentCount`, интерпретатор ищет в текущем объекте переменных `LE`, но он пуст, затем идёт во внешний объект, там находит, изменяет и возвращает новое значение:
+
+```js
+//+ run
+function makeCounter() {
+  var currentCount = 1;
+    
+  return function() { 
+    return currentCount++; 
+  };
+}
+
+var counter = makeCounter(); // [[Scope]] -> {currentCount: 1} -> window
+
+alert( counter() ); // 1, [[Scope]] -> {currentCount: 1} -> window
+alert( counter() ); // 2, [[Scope]] -> {currentCount: 2} -> window
+alert( counter() ); // 3, [[Scope]] -> {currentCount: 3} -> window
+```
+
+</li>
+</ol>
+
+Можно создать несколько счётчиков. Все они будут взаимно независимы:
+
+```js
+var counter = makeCounter();
+
+var counter2 = makeCounter();
+
+alert( counter() ); // 1
+alert( counter() ); // 2
+alert( counter() ); // 3
+
+alert( counter2() ); // 1, *!*счётчики независимы*/!*
+```
+
+Они независимы, потому что при каждом запуске `makeCounter` создаётся свой `LexicalEnvironment`, на который имеет ссылку соответствующий счётчик.
+
+
+## Альтернатива -- свойство функции
+
+Функция в JavaScript является объектом, поэтому можно присваивать свойства прямо к ней.
+
+Перепишем пример со счётчиком, используя запись в функцию:
+
+```js
+//+ run
+*!*
+function makeCounter() {    
+  function counter() { 
+    return counter.currentCount++; 
+  };
+  counter.currentCount = 1;
+
+  return counter;
+}
+*/!*
+
+var counter = makeCounter(); 
+alert( counter() ); // 1
+alert( counter() ); // 2
+alert (counter() ); // 3
+```
+
+Как видно, с виду пример работает также. Но внутри всё по-другому.
+
+**Свойство функции, в отличие от переменной из замыкания -- общедоступно. К нему имеет доступ любой, у кого есть объект функции.**
+
+Например, можно взять и поменять счётчик из внешнего кода:
+
+```js
+var counter = makeCounter(); 
+alert( counter() ); // 1
+
+*!*
+counter.currentCount = 5;
+*/!*
+
+alert( counter() ); // 5
+```
+
+[smart header="Статические переменные"]
+Иногда свойства, привязанные к функции, называют "статическими переменными".
+
+В некоторых языках программирования можно объявлять переменную, которая сохраняет значение между вызовами функции. В JavaScript ближайший аналог -- это свойство функции.
+[/smart]
+
+
+## Итого: замыкания
+
+[Замыкание](http://en.wikipedia.org/wiki/Closure_(computer_science&#041;) -- это функция вместе со всеми внешними переменными, которые ей доступны. 
+
+Таково стандартное определение, которое есть в Wikipedia и большинстве серьёзных источников по программированию. То есть, замыкание -- это функция + внешние переменные.
+
+Тем не менее, в JavaScript есть небольшая терминологическая особенность. 
+
+**Обычно, говоря "замыкание функции", подразумевают не саму эту функцию, а именно внешние переменные.**
+
+**Иногда говорят "переменная берётся из замыкания". Это означает -- из внешнего объекта переменных.**
+
+
+[smart header="Что это такое -- \"понимать замыкания?\""]
+Иногда говорят "Вася крут, Вася понимает замыкания!". Что это такое -- "понимать замыкания", какой смысл обычно вкладывают в эти слова?
+
+"Понимать замыкания" в JavaScript означает понимать следующие вещи:
+<ol>
+<li>Все переменные и параметры функций являются свойствами объекта переменных `LexicalEnvironment`. Каждый запуск функции создает новый такой объект. На верхнем уровне роль `LexicalEnvironment` играет "глобальный объект", в браузере это `window`.</li>
+<li>При создании функция получает системное свойство `[[Scope]]`, которое ссылается на `LexicalEnvironment`, в котором она была создана (кроме `new Function`).</li>
+<li>Свойство `[[Scope]]` создаётся вместе с функцией и далее не меняется. Когда бы ни была вызвана функция, куда бы её ни передали в коде -- она будет искать переменные сначала у себя, а затем во внешних `LexicalEnvironment` с места своего создания.</li>
+</ol>
+
+В следующих главах мы углубим и расширим это понимание дополнительными примерами, а также рассмотрим, что происходит с памятью.
+[/smart]
diff --git a/1-js/5-functions-closures/3-scope-new-function/article.md b/1-js/5-functions-closures/3-scope-new-function/article.md
new file mode 100644
index 00000000..95e2de45
--- /dev/null
+++ b/1-js/5-functions-closures/3-scope-new-function/article.md
@@ -0,0 +1,90 @@
+# [[Scope]] для new Function
+
+
+## Присвоение [[Scope]] для new Function [#scope-Function] 
+
+Есть одно исключение из общего правила присвоения `[[Scope]]`, которое мы рассматривали в предыдущей главе. 
+
+**При создании функции с использованием  `new Function`, её свойство `[[Scope]]` ссылается не на текущий `LexicalEnvironment`, а на `window`.**
+
+## Пример 
+
+Следующий пример демонстрирует как функция, созданная `new Function`, игнорирует внешнюю переменную `a` и выводит глобальную вместо нее.
+
+Сначала обычное поведение:
+
+```js
+//+ run untrusted refresh
+var a = 1;
+function getFunc() {
+  var a = 2;
+ 
+*!*
+  var func = function() { alert(a); };
+*/!*
+
+  return func; 
+}
+
+getFunc()(); // *!*2*/!*, из LexicalEnvironment функции getFunc
+```
+
+А теперь -- для функции, созданной через `new Function`:
+
+```js
+//+ run untrusted refresh
+var a = 1;
+function getFunc() {
+  var a = 2;
+ 
+*!*
+  var func = new Function('', 'alert(a)');  
+*/!*
+
+  return func;
+}
+
+getFunc()(); // *!*1*/!*, из window
+```
+
+## Почему так сделано?
+
+[warn header="Продвинутые знания"]
+Содержимое этой секции содержит информацию теоретического характера, которая прямо сейчас не обязательна для дальнейшего изучения JavaScript.
+[/warn]
+
+**Эта особенность `new Function`, хоть и выглядит странно, на самом деле весьма полезна.**
+
+Представьте себе, что нам действительно нужно создать функцию из строки кода. Наверняка код этой функции неизвестен на момент написания скрипта (иначе зачем `new Function`), но станет известен позже, например получен с сервера или из других источников данных.
+
+При выполнении кода на боевом сервере он наверняка сжат минификатором -- специальной программой, которая уменьшает размер кода, убирая из него лишние комментарии, пробелы, что очень важно -- переименовывает локальные переменные на более короткие. 
+
+То есть, обычно если внутри функции есть `var userName`, то минификатор заменит её на `var u` (или другую букву, чтобы не было конфликта), предполагая, что так как переменная видна только внутри функции, то этого всё равно никто не заметит, а код станет короче. И обычно проблем нет. 
+
+...Но если бы `new Function` могла обращаться к внешним переменным, то при попытке доступа к `userName` в сжатом коде была бы ошибка, так как минификатор переименовал её. 
+
+**Получается, что даже если бы мы захотели использовать локальные переменные в `new Function`, то после сжатия были бы проблемы, так как минификатор переименовывает локальные переменные.**
+
+Описанная особенность `new Function` просто-таки спасает нас от ошибок. 
+
+Если внутри функции, создаваемой через `new Function`, всё же нужно использовать локальные переменные -- нужно всего лишь предусмотреть соответствующие параметры и передавать их явным образом, например так:
+
+```js
+//+ run untrusted refresh
+*!*
+var sum = new Function('a, b', ' return a + b; ');
+*/!*
+
+var a = 1, b = 2;
+
+*!*
+alert( sum(a, b) ); // 3
+*/!*
+```
+
+## Итого
+
+<ul>
+<li>Функции, создаваемые через `new Function`, имеют значением `[[Scope]]` не внешний объект переменных, а `window`.</li>
+<li>Следствие -- такие функции не могут использовать замыкание. Но это хорошо, так как бережёт от ошибок проектирования, да и при сжатии JavaScript проблем не будет. Если же внешние переменные реально нужны -- их можно передать в качестве параметров.</li>
+</ul>
diff --git a/1-js/5-functions-closures/4-closures-module/article.md b/1-js/5-functions-closures/4-closures-module/article.md
new file mode 100644
index 00000000..a88a3f51
--- /dev/null
+++ b/1-js/5-functions-closures/4-closures-module/article.md
@@ -0,0 +1,304 @@
+# Модули через замыкания
+
+Приём программирования "модуль" имеет громадное количество вариаций.
+
+Его цель -- скрыть внутренние детали реализации скрипта. В том числе: временные переменные, константы, вспомогательные мини-функции и т.п. 
+
+## Зачем нужен модуль?
+
+Допустим, мы хотим разработать скрипт, который делает что-то полезное.
+
+В браузере скрипты могут делать много чего -- если бы мы умели работать со страницей, то могли бы сделать так, чтобы все блоки кода красиво расцвечивались, так сделано на этом сайте.
+
+Но, так как пока мы со страницей работать не умеем (скоро научимся), то пусть скрипт просто выводит сообщение:
+
+Файл `highlight.js`
+
+```js
+//+ run
+// глобальная переменная нашего скрипта
+var message = "Привет";
+
+// функция для вывода этой переменной
+function showMessage() {
+  alert(message);
+}
+
+// выводим сообщение
+showMessage();
+```
+
+**У этого скрипта есть свои внутренние переменные и функции.**
+
+В данном случае это `message` и `showMessage`.
+
+**Если подключить подобный скрипт к странице "как есть", то возможен конфликт с переменными, которые она использует.**
+
+То есть, при подключении к такой странице он её "сломает":
+
+```html
+<script>
+  var message = "Пожалуйста, нажмите на кнопку";
+</script>
+<script src="highlight.js"></script>
+
+<button>Кнопка</button>
+<script>
+  alert(message);
+</script>
+```
+
+Будет выведено два раза слово "Привет".
+
+[edit src="highlight-conflict"/]
+
+Если же убрать скрипт `highlight.js`, то страница будет выводить правильное сообщение.
+
+**Проблема возникла потому, что переменная `message` из скрипта `highlight.js` перезаписала объявленную на странице.**
+
+## Приём проектирования "Модуль"
+
+Чтобы проблемы не было, нам всего-то нужно, чтобы у скрипта была *своя собственная область видимости*, чтобы его переменные не попали на страницу.
+
+Для этого мы завернём всё его содержимое в функцию, которую тут же запустим.
+
+Файл `highlight.js`, оформленный как модуль:
+
+```js
+//+ run
+(function() {
+  
+  // глобальная переменная нашего скрипта
+  var message = "Привет";
+
+  // функция для вывода этой переменной
+  function showMessage() {
+    alert(message);
+  }
+
+  // выводим сообщение
+  showMessage();
+
+})();
+```
+
+Этот скрипт при подключении к той же странице будет работать корректно. 
+
+Будет выводиться "Привет", а затем "Пожалуйста, нажмите на кнопку".
+
+[edit src="highlight-module"/]
+
+### Зачем скобки вокруг функции?
+
+В примере выше объявление модуля выглядит так:
+
+```js
+//+ run
+(function() {
+ 
+  alert("объявляем локальные переменные, функции, работаем");
+  // ...
+
+}());
+```
+
+**В начале и в конце стоят скобки, так как иначе была бы ошибка.**
+
+Вот неверный вариант:
+
+```js
+//+ run
+function() {
+ // будет ошибка
+}();
+```
+
+Ошибка при его запуске произойдет потому, что браузер, видя ключевое слово `function` в основном потоке кода, попытается прочитать `Function Declaration`, а здесь имени нет.
+
+Впрочем, даже если имя поставить, то работать тоже не будет:
+
+```js
+//+ run
+function work() {
+  // ...
+}();  // syntax error
+```
+
+**Дело в том, что "на месте" разрешено вызывать *только* `Function Expression`.**
+
+Общее правило таково:
+
+<ul>
+<li>**Если браузер видит `function` в основном потоке кода -- он считает, что это `Function Declaration`.**</li>
+<li>**Если же `function` идёт в составе более сложного выражения, то он считает, что это `Function Expression`.**</li>
+</ul>
+
+Для этого и нужны скобки -- показать, что у нас `Function Expression`, который по правилам JavaScript можно вызвать "на месте".
+
+Можно показать это другим способом, например поставив перед функцией оператор:
+
+```js
+//+ run
++function() {
+  alert('Вызов на месте');
+}();
+
+!function() {
+  alert('Так тоже будет работать');
+}();
+```
+
+## Библиотека
+
+Приём "модуль" используется почти во всех современных библиотеках.
+
+Ведь что такое библиотека? Это полезные функции, ради которых её подключают, плюс временные переменные и вспомогательные функции, которые библиотека использует внутри себя.
+
+Посмотрим, к примеру, на библиотеку [Lodash](http://lodash.com/), хотя могли бы и [jQuery](http://jquery.com/), там почти то же самое.
+
+Если её подключить, то появится функция `lodash` (она же `_`), в которую можно обернуть любой объект, так что `lodash(obj)` -- это обёртка, добавляющая к объекту функциональность.
+
+Кроме того, `lodash` имеет ряд полезных свойств-функций, например [lodash.defaults(object, source)](http://lodash.com/docs#defaults) для удобного добавления в объект `object` значений свойств "по умолчанию", описанных в `source`.
+
+Выдержка из файла [lodash.js](https://github.com/lodash/lodash/blob/master/dist/lodash.js) для демонстрации того, как организована библиотека:
+
+```js
+//+ run
+;(function() {
+ 
+*!*
+  // порядок не важен, но сначала объявим то, что нужно только внутри библиотеки
+  // version, objectTypes, assignDefaults
+*/!*
+  var version = '2.4.1';  
+
+  var objectTypes = {   
+    'function': true,
+    'object': true
+  };
+
+  function assignDefaults(objectValue, sourceValue) {
+    return typeof objectValue == 'undefined' ? sourceValue : objectValue;
+  }
+
+*!*
+  // а это функция, которая станет lodash.defaults
+*/!*
+  function defaults(object) {
+    if (!object || arguments.length < 2) {
+      return object;
+    }
+    var args = slice(arguments);
+    args.push(assignDefaults);
+    return assign.apply(null, args);
+  }
+
+*!*
+  // lodash - основная функция для библиотеки, единственное, что пойдёт наружу
+*/!*
+  function lodash(value) {
+    // ...
+  }
+  
+*!*
+  // присвоим ей defaults и другие функции, которые нужно вынести из модуля
+*/!*
+  lodash.defaults = defaults;
+  // lodash... = ...
+
+*!*
+  // root - это window в браузере
+  // в других окружениях, где window нет, root = this
+*/!*
+  var root = (objectTypes[typeof window] && window) || this;
+
+  root.lodash = lodash; // в браузере будет window.lodash = lodash
+
+}.call(this)); // this = window в браузере, в Node.JS - по-другому
+```
+
+**Внутри внешней функции:**
+<ol>
+<li>**Происходит что угодно, объявляются свои локальные переменные, функции.**</li>
+<li>**В `window` выносится то, что нужно снаружи.**</li>
+</ol>
+
+Технически, мы могли бы вынести в `window` не только `lodash`, но и вообще все объекты и функции. На практике, обычно модуль -- это один объект, глобальную область во избежание конфликтов хранят максимально чистой.
+
+[smart header="Зачем точка с запятой в начале?"]
+Если получится, что несколько JS-файлы объединены в один (и, скорее всего, сжаты минификатором, но это не важно), то без точки с запятой будет ошибка:
+
+```js
+//+ run
+// a.js, в конце забыта точка с запятой!
+*!*
+var a = 5
+*/!*
+
+// lib.js, библиотека
+(function() {
+  // ...
+})();
+```
+
+Ошибка при запуске будет потому, что JavaScript интерпретирует код как `var a = 5(function ...)`, то есть пытается вызвать число `5` как функцию. 
+
+Таковы правила языка, и поэтому рекомендуется явно ставить точку с запятой. В данном случае автор Lodash ставит `;` перед функцией, чтобы предупредить эту ошибку.
+[/smart]
+
+Использование:
+
+```html
+<!--+ run -->
+<p>Подключим библиотеку</p>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
+
+<p>Используем <code>_.defaults()</code>.</p>
+<script>
+var user = { name: 'Вася' };
+
+*!*
+_.defaults(user, { name: 'Не указано', employer: 'Не указан' });
+*/!*
+
+alert(user.name); // Вася
+alert(user.employer); // Не указан
+</script>
+```
+
+## Экспортирование через return
+
+Можно оформить модуль и чуть по-другому, например передать значение через `return`:
+
+```js
+var lodash = (function() {
+
+  var version;
+  function assignDefaults() { ... }
+
+  return {
+    defaults: function() {  }
+  }
+
+})();
+```
+
+Здесь, кстати, скобки вокруг внешней `function() { ... }` не обязательны, ведь функция и так объявлена внутри выражения присваивания, а значит -- является Function Expression. 
+
+Тем не менее, лучше их ставить, для улучшения читаемости кода, чтобы было сразу видно, что это не простое присвоение функции.
+
+## Итого
+
+Модуль при помощи замыканий -- это оборачивание пакета функционала в единую внешнюю функцию, которая тут же выполняется.
+
+**Все функции модуля будут иметь доступ к другим переменным и внутренним функциям этого же модуля через замыкание.**
+
+Например, `defaults` из примера выше имеет доступ к `assignDefaults`.
+
+**Но снаружи программист, использующий модуль, может обращаться напрямую только к тем, которые экспортированы.**
+
+Благодаря этому будут скрыты внутренние аспекты реализации, которые нужны только разработчику модуля.
+
+Можно придумать и много других вариаций такого подхода. В конце концов, "модуль" -- это всего лишь функция-обёртка для скрытия переменных.
+
+
diff --git a/1-js/5-functions-closures/4-closures-module/highlight-conflict.view/highlight.js b/1-js/5-functions-closures/4-closures-module/highlight-conflict.view/highlight.js
new file mode 100755
index 00000000..09c9f943
--- /dev/null
+++ b/1-js/5-functions-closures/4-closures-module/highlight-conflict.view/highlight.js
@@ -0,0 +1,10 @@
+// глобальная переменная нашего скрипта
+var message = "Привет";
+
+// функция для вывода этой переменной
+function showMessage() {
+  alert(message);
+}
+
+// выводим сообщение
+showMessage();
diff --git a/1-js/5-functions-closures/4-closures-module/highlight-conflict.view/index.html b/1-js/5-functions-closures/4-closures-module/highlight-conflict.view/index.html
new file mode 100755
index 00000000..42649598
--- /dev/null
+++ b/1-js/5-functions-closures/4-closures-module/highlight-conflict.view/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <script>
+    var message = 'Пожалуйста, нажмите на кнопку';
+  </script>
+  <script src="highlight.js"></script>
+</head>
+<body>
+
+<button>Кнопка</button>
+
+<script>
+  alert(message);
+</script>
+
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/1-js/5-functions-closures/4-closures-module/highlight-module.view/highlight.js b/1-js/5-functions-closures/4-closures-module/highlight-module.view/highlight.js
new file mode 100755
index 00000000..c517f401
--- /dev/null
+++ b/1-js/5-functions-closures/4-closures-module/highlight-module.view/highlight.js
@@ -0,0 +1,14 @@
+(function() {
+  
+  // глобальная переменная нашего скрипта
+  var message = "Привет";
+
+  // функция для вывода этой переменной
+  function showMessage() {
+    alert(message);
+  }
+
+  // выводим сообщение
+  showMessage();
+
+})();
\ No newline at end of file
diff --git a/1-js/5-functions-closures/4-closures-module/highlight-module.view/index.html b/1-js/5-functions-closures/4-closures-module/highlight-module.view/index.html
new file mode 100755
index 00000000..42649598
--- /dev/null
+++ b/1-js/5-functions-closures/4-closures-module/highlight-module.view/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <script>
+    var message = 'Пожалуйста, нажмите на кнопку';
+  </script>
+  <script src="highlight.js"></script>
+</head>
+<body>
+
+<button>Кнопка</button>
+
+<script>
+  alert(message);
+</script>
+
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/1-js/5-functions-closures/5-closures-usage/1-closure-sum/solution.md b/1-js/5-functions-closures/5-closures-usage/1-closure-sum/solution.md
new file mode 100644
index 00000000..48af7992
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/1-closure-sum/solution.md
@@ -0,0 +1,18 @@
+Чтобы вторые скобки в вызове работали - первые должны возвращать функцию. 
+
+Эта функция должна знать про `a` и уметь прибавлять `a` к `b`. Вот так:
+
+```js
+//+ run
+function sum(a) {
+
+  return function(b) { 
+    return a + b;  // возьмет a из внешнего LexicalEnvironment
+  };
+
+}
+
+alert( sum(1)(2) );
+alert( sum(5)(-1) );
+```
+
diff --git a/1-js/5-functions-closures/5-closures-usage/1-closure-sum/task.md b/1-js/5-functions-closures/5-closures-usage/1-closure-sum/task.md
new file mode 100644
index 00000000..5de93f5e
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/1-closure-sum/task.md
@@ -0,0 +1,13 @@
+# Сумма через замыкание
+
+[importance 4]
+
+Напишите функцию `sum`, которая работает так: `sum(a)(b) = a+b`.
+
+Да, именно так, через двойные скобки (это не опечатка). Например:
+
+```js
+sum(1)(2) = 3
+sum(5)(-1) = 4
+```
+
diff --git a/1-js/5-functions-closures/5-closures-usage/2-stringbuffer/_js.view/solution.js b/1-js/5-functions-closures/5-closures-usage/2-stringbuffer/_js.view/solution.js
new file mode 100644
index 00000000..e1f3870b
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/2-stringbuffer/_js.view/solution.js
@@ -0,0 +1,10 @@
+function makeBuffer() {
+  var text = ''; 
+    
+  return function(piece) {
+    if (arguments.length == 0) { // вызов без аргументов
+      return text;
+    }
+    text += piece; 
+  };
+};
\ No newline at end of file
diff --git a/1-js/5-functions-closures/5-closures-usage/2-stringbuffer/_js.view/test.js b/1-js/5-functions-closures/5-closures-usage/2-stringbuffer/_js.view/test.js
new file mode 100644
index 00000000..45aee8dc
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/2-stringbuffer/_js.view/test.js
@@ -0,0 +1,22 @@
+var buffer;
+beforeEach(function() {
+  buffer = makeBuffer();
+});
+
+it("возвращает пустую строку по умолчанию", function() {
+  assert.strictEqual( buffer(), "");
+});
+
+it("добавляет аргументы в буффер", function() {
+  buffer('Замыкания'); 
+  buffer(' Использовать'); 
+  buffer(' Нужно!'); 
+  assert.equal( buffer(), 'Замыкания Использовать Нужно!');
+});
+
+it("приводит всё к строке", function() {
+  buffer(null);
+  buffer(false);
+  assert.equal( buffer(), "nullfalse");
+});
+
diff --git a/1-js/5-functions-closures/5-closures-usage/2-stringbuffer/solution.md b/1-js/5-functions-closures/5-closures-usage/2-stringbuffer/solution.md
new file mode 100644
index 00000000..af2beea3
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/2-stringbuffer/solution.md
@@ -0,0 +1,30 @@
+Текущее значение текста удобно хранить в замыкании, в локальной переменной `makeBuffer`:
+
+```js
+//+ run
+function makeBuffer() {
+  var text = ''; 
+    
+  return function(piece) {
+    if (arguments.length == 0) { // вызов без аргументов
+      return text;
+    }
+    text += piece; 
+  };
+};
+
+var buffer = makeBuffer();
+
+// добавить значения к буферу
+buffer('Замыкания'); 
+buffer(' Использовать'); 
+buffer(' Нужно!'); 
+alert( buffer() ); // 'Замыкания Использовать Нужно!'
+
+var buffer2 = makeBuffer();
+buffer2(0); buffer2(1); buffer2(0);
+
+alert( buffer2() ); // '010'
+```
+
+Начальное значение `text = ''` -- пустая строка. Поэтому операция `text += piece` прибавляет `piece` к строке, автоматически преобразуя его к строковому типу, как и требовалось в условии.
diff --git a/1-js/5-functions-closures/5-closures-usage/2-stringbuffer/task.md b/1-js/5-functions-closures/5-closures-usage/2-stringbuffer/task.md
new file mode 100644
index 00000000..e892ca4a
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/2-stringbuffer/task.md
@@ -0,0 +1,43 @@
+# Функция - строковый буфер
+
+[importance 5]
+
+В некоторых языках программирования существует объект "строковый буфер", который аккумулирует внутри себя значения. Его функционал состоит из двух возможностей:
+<ol>
+<li>Добавить значение в буфер.</li>
+<li>Получить текущее содержимое.</li>
+</ol>
+
+**Задача -- реализовать строковый буфер на функциях в JavaScript, со следующим синтаксисом:**
+
+<ul>
+<li>Создание объекта: `var buffer = makeBuffer();`.</li>
+<li>Вызов `makeBuffer` должен возвращать такую функцию `buffer`, которая при вызове `buffer(value)` добавляет значение в некоторое внутреннее хранилище, а при вызове без аргументов `buffer()` -- возвращает его.</li>
+</ul>
+
+Вот пример работы:
+
+```js
+function makeBuffer() { /* ваш код */ }
+
+var buffer = makeBuffer();
+
+// добавить значения к буферу
+buffer('Замыкания'); 
+buffer(' Использовать'); 
+buffer(' Нужно!'); 
+
+// получить текущее значение
+alert( buffer() ); // Замыкания Использовать Нужно!
+```
+
+Буфер должен преобразовывать все данные к строковому типу:
+
+```js
+var buffer = makeBuffer();
+buffer(0); buffer(1); buffer(0);
+
+alert( buffer() ); // '010'
+```
+
+Решение не должно использовать глобальные переменные.
diff --git a/1-js/5-functions-closures/5-closures-usage/3-stringbuffer-with-clear/_js.view/solution.js b/1-js/5-functions-closures/5-closures-usage/3-stringbuffer-with-clear/_js.view/solution.js
new file mode 100644
index 00000000..6b044530
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/3-stringbuffer-with-clear/_js.view/solution.js
@@ -0,0 +1,16 @@
+function makeBuffer() {
+  var text = ''; 
+    
+  function buffer(piece) {
+    if (arguments.length == 0) { // вызов без аргументов
+      return text;
+    }
+    text += piece; 
+  };
+
+  buffer.clear = function() {
+    text = "";
+  }
+
+  return buffer;
+};
\ No newline at end of file
diff --git a/1-js/5-functions-closures/5-closures-usage/3-stringbuffer-with-clear/_js.view/test.js b/1-js/5-functions-closures/5-closures-usage/3-stringbuffer-with-clear/_js.view/test.js
new file mode 100644
index 00000000..e9c1b8fc
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/3-stringbuffer-with-clear/_js.view/test.js
@@ -0,0 +1,30 @@
+var buffer;
+
+beforeEach(function() {
+  buffer = makeBuffer();
+});
+
+it("возвращает пустую строку по умолчанию", function() {
+  assert.strictEqual( buffer(), "");
+});
+
+it("добавляет аргументы в буффер", function() {
+  buffer('Замыкания'); 
+  buffer(' Использовать'); 
+  buffer(' Нужно!'); 
+  assert.equal( buffer(), 'Замыкания Использовать Нужно!');
+});
+
+it("приводит всё к строке", function() {
+  buffer(null);
+  buffer(false);
+  assert.equal( buffer(), "nullfalse");
+});
+
+it("очищает буфер вызовом clear", function() {
+  buffer("test");
+  buffer.clear();
+  buffer("первый");
+  buffer("второй");
+  assert.equal( buffer(), "первыйвторой");
+});
diff --git a/1-js/5-functions-closures/5-closures-usage/3-stringbuffer-with-clear/solution.md b/1-js/5-functions-closures/5-closures-usage/3-stringbuffer-with-clear/solution.md
new file mode 100644
index 00000000..ae3b8a62
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/3-stringbuffer-with-clear/solution.md
@@ -0,0 +1,34 @@
+
+
+```js
+//+ run
+function makeBuffer() {
+  var text = ''; 
+    
+  function buffer(piece) {
+    if (arguments.length == 0) { // вызов без аргументов
+      return text;
+    }
+    text += piece; 
+  };
+
+  buffer.clear = function() {
+    text = "";
+  }
+
+  return buffer;
+};
+
+var buffer = makeBuffer();
+
+buffer("Тест");
+buffer(" тебя не съест ");
+alert( buffer() ); // Тест тебя не съест
+
+*!*
+buffer.clear();
+*/!*
+
+alert( buffer() ); // ""
+```
+
diff --git a/1-js/5-functions-closures/5-closures-usage/3-stringbuffer-with-clear/task.md b/1-js/5-functions-closures/5-closures-usage/3-stringbuffer-with-clear/task.md
new file mode 100644
index 00000000..319af876
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/3-stringbuffer-with-clear/task.md
@@ -0,0 +1,24 @@
+# Строковый буфер с очисткой
+
+[importance 5]
+
+Добавьте буферу из решения задачи [](/task/stringbuffer) метод `buffer.clear()`, который будет очищать текущее содержимое буфера:
+
+```js
+function makeBuffer() {
+  ...ваш код...
+}
+
+var buffer = makeBuffer();
+
+buffer("Тест");
+buffer(" тебя не съест ");
+alert( buffer() ); // Тест тебя не съест
+
+*!*
+buffer.clear();
+*/!*
+
+alert( buffer() ); // ""
+```
+
diff --git a/1-js/5-functions-closures/5-closures-usage/4-sort-by-field/solution.md b/1-js/5-functions-closures/5-closures-usage/4-sort-by-field/solution.md
new file mode 100644
index 00000000..8ba3409d
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/4-sort-by-field/solution.md
@@ -0,0 +1,25 @@
+
+
+```js
+//+ run
+var users = [
+  { name: "Вася", surname: 'Иванов', age: 20 },
+  { name: "Петя", surname: 'Чапаев', age: 25 },
+  { name: "Маша", surname: 'Медведева', age: 18 }
+];
+
+*!*
+function byField(field) {
+  return function(a, b) {
+    return a[field] > b[field] ? 1: -1;
+  }
+}
+*/!*
+
+users.sort(byField('name'));
+users.forEach(function(user) {  alert(user.name); });
+
+users.sort(byField('age'));
+users.forEach(function(user) {  alert(user.name); });
+```
+
diff --git a/1-js/5-functions-closures/5-closures-usage/4-sort-by-field/task.md b/1-js/5-functions-closures/5-closures-usage/4-sort-by-field/task.md
new file mode 100644
index 00000000..154b2358
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/4-sort-by-field/task.md
@@ -0,0 +1,41 @@
+# Сортировка
+
+[importance 5]
+
+У нас есть массив объектов:
+
+```js
+var users = [
+  { name: "Вася", surname: 'Иванов', age: 20 },
+  { name: "Петя", surname: 'Чапаев', age: 25 },
+  { name: "Маша", surname: 'Медведева', age: 18 }
+];
+```
+
+Обычно сортировка по нужному полю происходит так:
+
+```js
+// по полю name (Вася, Маша, Петя)
+users.sort(function(a, b) { 
+  return a.name > b.name ? 1 : -1; 
+});
+
+// по полю age  (Маша, Вася, Петя)
+users.sort(function(a, b) { 
+  return a.age > b.age ? 1 : -1; 
+});
+```
+
+Мы хотели бы упростить синтаксис до одной строки, вот так:
+
+```js
+users.sort(byField('name')); 
+users.forEach(function(user) {  alert(user.name); }); // Вася, Маша, Петя
+
+users.sort(byField('age')); 
+users.forEach(function(user) {  alert(user.name); }); // Маша, Вася, Петя
+```
+
+То есть, вместо того, чтобы каждый раз писать в `sort` `function...` -- будем использовать `byField(...)`
+
+Напишите функцию `byField(field)`, которую можно использовать в `sort` для сравнения объектов по полю `field`, чтобы пример выше заработал.
diff --git a/1-js/5-functions-closures/5-closures-usage/5-filter-through-function/_js.view/solution.js b/1-js/5-functions-closures/5-closures-usage/5-filter-through-function/_js.view/solution.js
new file mode 100644
index 00000000..45f3087d
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/5-filter-through-function/_js.view/solution.js
@@ -0,0 +1,24 @@
+function filter(arr, func) {
+  var result = [];
+
+  for(var i=0; i<arr.length; i++) {
+    var val  = arr[i];
+    if (func(val)) {
+      result.push(val);
+    }
+  }
+
+  return result;
+}
+
+function inArray(arr) {
+  return function(x) {
+    return arr.indexOf(x) != -1;
+  };
+}
+
+function inBetween(a, b) {
+  return function(x) {
+    return x >=a && x <= b;
+  };
+}
diff --git a/1-js/5-functions-closures/5-closures-usage/5-filter-through-function/_js.view/source.js b/1-js/5-functions-closures/5-closures-usage/5-filter-through-function/_js.view/source.js
new file mode 100644
index 00000000..677f2997
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/5-filter-through-function/_js.view/source.js
@@ -0,0 +1,12 @@
+function filter(arr, fuc) {
+  // ...ваш код...
+}
+
+function inBetween(a, b) {
+  // ...ваш код...
+}
+
+function inArray(arr) {
+  // ...ваш код...
+}
+
diff --git a/1-js/5-functions-closures/5-closures-usage/5-filter-through-function/_js.view/test.js b/1-js/5-functions-closures/5-closures-usage/5-filter-through-function/_js.view/test.js
new file mode 100644
index 00000000..1cefcabd
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/5-filter-through-function/_js.view/test.js
@@ -0,0 +1,54 @@
+var arr;
+
+before(function() {
+  arr = [1, 2, 3, 4, 5, 6, 7];
+});
+
+describe("inArray", function() {
+  var checkInArr;
+
+  before(function() {
+    checkInArr = inArray(arr);
+  });
+   
+  it("возвращает фильтр для значений в массиве", function() {
+    assert.isTrue( checkInArr(5) );
+    assert.isFalse( checkInArr(0) );
+  });
+});
+
+
+describe("inBetween", function() {
+  var checkBetween36;
+
+  before(function() {
+    checkBetween36 = inBetween(3, 6);
+  });
+
+  it("возвращает фильтрa для значений в промежутке", function() {
+    assert.isTrue( checkBetween36(5) );
+    assert.isFalse( checkBetween36(0) );
+  });
+});
+
+
+describe("filter", function() {
+
+  it("фильтрует через func", function() {
+    assert.deepEqual( filter(arr, function(a) { return a % 2 == 0; }), [2,4,6] ); 
+  });
+
+  it("не модифицирует исходный массив", function() {
+    filter(arr, function(a) { return a % 2 == 0; });
+    assert.deepEqual( arr, [1, 2, 3, 4, 5, 6, 7] ); 
+  });
+
+  it("поддерживает фильтр inBetween", function() {
+    assert.deepEqual( filter(arr,inBetween(3,6)), [3,4,5,6]);
+  });
+
+  it("поддерживает фильтр inArray", function() {
+    assert.deepEqual( filter(arr, inArray([1,2,3])), [1,2,3]);
+  });
+
+});
diff --git a/1-js/5-functions-closures/5-closures-usage/5-filter-through-function/solution.md b/1-js/5-functions-closures/5-closures-usage/5-filter-through-function/solution.md
new file mode 100644
index 00000000..2974267c
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/5-filter-through-function/solution.md
@@ -0,0 +1,80 @@
+# Функция фильтрации
+
+```js
+//+ run
+function filter(arr, func) {
+  var result = [];
+
+  for(var i=0; i<arr.length; i++) {
+    var val  = arr[i];
+    if (func(val)) {
+      result.push(val);
+    }
+  }
+
+  return result;
+}
+
+var arr = [1, 2, 3, 4, 5, 6, 7];
+
+alert( filter(arr, function(a) { return a % 2 == 0; }) ); // 2, 4, 6
+```
+
+# Фильтр inBetween
+
+```js
+//+ run
+function filter(arr, func) {
+  var result = [];
+
+  for(var i=0; i<arr.length; i++) {
+    var val  = arr[i];
+    if (func(val)) {
+      result.push(val);
+    }
+  }
+
+  return result;
+}
+
+*!*
+function inBetween(a, b) {
+  return function(x) {
+    return x >=a && x <= b;
+  };
+}
+*/!*
+
+var arr = [1, 2, 3, 4, 5, 6, 7];
+alert( filter(arr, inBetween(3,6)) ); // 3,4,5,6
+```
+
+# Фильтр inArray
+
+```js
+//+ run
+function filter(arr, func) {
+  var result = [];
+
+  for(var i=0; i<arr.length; i++) {
+    var val  = arr[i];
+    if (func(val)) {
+      result.push(val);
+    }
+  }
+
+  return result;
+}
+
+*!*
+function inArray(arr) {
+  return function(x) {
+    return arr.indexOf(x) != -1;
+  };
+}
+*/!*
+
+var arr = [1, 2, 3, 4, 5, 6, 7];
+alert( filter(arr, inArray([1,2,10])) ); // 1,2
+```
+
diff --git a/1-js/5-functions-closures/5-closures-usage/5-filter-through-function/task.md b/1-js/5-functions-closures/5-closures-usage/5-filter-through-function/task.md
new file mode 100644
index 00000000..35a08244
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/5-filter-through-function/task.md
@@ -0,0 +1,27 @@
+# Фильтрация через функцию
+
+[importance 5]
+
+<ol>
+<li>Создайте функцию `filter(arr, func)`, которая получает массив `arr` и возвращает новый, в который входят только те элементы `arr`, для которых `func` возвращает `true`.</li>
+<li>Создайте набор "готовых фильтров": `inBetween(a,b)` -- "между a,b", `inArray([...])` -- "в массиве `[...]`". 
+Использование должно быть таким: 
+<ul>
+<li>`filter(arr, inBetween(3,6))` -- выберет только числа от 3 до 6,</li>
+<li>`filter(arr, inArray([1,2,3]))` -- выберет только элементы, совпадающие с одним из значений массива.</li>
+</ul>
+</li>
+</ol>
+Пример, как это должно работать:
+
+```js
+/* .. ваш код для filter, inBetween, inArray */
+var arr = [1, 2, 3, 4, 5, 6, 7];
+
+alert( filter(arr, function(a) { return a % 2 == 0 }) ); // 2,4,6
+
+alert( filter(arr, inBetween(3,6)) ); // 3,4,5,6
+
+alert( filter(arr, inArray([1,2,10])) ); // 1,2
+```
+
diff --git a/1-js/5-functions-closures/5-closures-usage/6-make-army/_js.view/solution.js b/1-js/5-functions-closures/5-closures-usage/6-make-army/_js.view/solution.js
new file mode 100644
index 00000000..b19f094d
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/6-make-army/_js.view/solution.js
@@ -0,0 +1,19 @@
+function makeArmy() {
+
+  var shooters = [];
+
+  for(var i=0; i<10; i++) {
+
+    var shooter = (function(x) {
+
+      return function() {
+        alert( x ); 
+      };
+
+    })(i);
+
+    shooters.push(shooter);   
+  }
+
+  return shooters; 
+}
diff --git a/1-js/5-functions-closures/5-closures-usage/6-make-army/_js.view/source.js b/1-js/5-functions-closures/5-closures-usage/6-make-army/_js.view/source.js
new file mode 100644
index 00000000..a8678c17
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/6-make-army/_js.view/source.js
@@ -0,0 +1,13 @@
+function makeArmy() {
+
+  var shooters = [];
+
+  for(var i=0; i<10; i++) {
+    var shooter = function() { // функция-стрелок
+      alert(i); // выводит свой номер
+    };
+    shooters.push(shooter);
+  }
+
+  return shooters;
+}
diff --git a/1-js/5-functions-closures/5-closures-usage/6-make-army/_js.view/test.js b/1-js/5-functions-closures/5-closures-usage/6-make-army/_js.view/test.js
new file mode 100644
index 00000000..fdfabf66
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/6-make-army/_js.view/test.js
@@ -0,0 +1,20 @@
+var army;
+before(function() {
+  army = makeArmy();
+  window.alert = sinon.stub(window, "alert");
+});
+
+it("army[0] выводит 0", function() {
+  army[0]();
+  assert(alert.calledWith(0));
+});
+
+
+it("army[5] функция выводит 5", function() {
+  army[5]();
+  assert(alert.calledWith(5));
+});
+
+after(function() {
+  window.alert.restore();
+});
\ No newline at end of file
diff --git a/1-js/5-functions-closures/5-closures-usage/6-make-army/solution.md b/1-js/5-functions-closures/5-closures-usage/6-make-army/solution.md
new file mode 100644
index 00000000..edef84d0
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/6-make-army/solution.md
@@ -0,0 +1,217 @@
+# Что происходит в этом коде
+
+Функция `makeArmy` делает следующее:
+<ol>
+<li>Создаёт пустой массив `shooter`:
+
+```js
+var shooters = [];
+```
+
+</li>
+<li>В цикле заполняет массив элементами через `shooter.push`. 
+При этом каждый элемент массива -- это функция, так что в итоге после цикла массив будет таким:
+
+```js
+shooters = [
+  function () { alert(i); },
+  function () { alert(i); },
+  function () { alert(i); },
+  function () { alert(i); },
+  function () { alert(i); },
+  function () { alert(i); },
+  function () { alert(i); },
+  function () { alert(i); },
+  function () { alert(i); },
+  function () { alert(i); }
+];
+```
+
+Этот массив возвращается из функции.
+</li>
+<li>Вызов `army[5]()` -- это получение элемента массива (им будет функция), и тут же -- её запуск.</li>
+</ol>
+
+# Почему ошибка
+
+Вначале разберемся, почему все стрелки выводят одно и то же значение.
+
+В функциях-стрелках `shooter` отсутствует переменная `i`. Когда такая функция вызывается, то `i` она берет из внешнего `LexicalEnvironment`.
+
+Чему же будет равно это значение `i`?
+
+К моменту вызова `army[0]()`, функция `makeArmy` уже закончила работу. Цикл  завершился, последнее значение было `i=10`.
+
+В результате все функции `shooter` получают из внешнего лексического кружения это, одно и то же, последнее, значение `i=10`.
+
+Попробуйте исправить проблему самостоятельно.
+
+# Исправление (3 варианта)
+
+Есть несколько способов исправить ситуацию.
+
+<ol>
+<li>**Первый способ исправить код - это привязать значение непосредственно к функции-стрелку:**
+
+```js
+//+ run
+function makeArmy() {
+
+  var shooters = [];
+
+  for(var i=0; i<10; i++) {
+
+*!*
+    var shooter = function me() {
+      alert( me.i ); 
+    };
+    shooter.i = i;
+*/!*
+
+    shooters.push(shooter);    
+  }
+
+  return shooters; 
+}
+
+var army = makeArmy();
+
+army[0](); // 0
+army[1](); // 1
+```
+
+В этом случае каждая функция хранит в себе свой собственный номер.
+
+Кстати, обратите внимание на использование Named Function Expression, вот в этом участке:
+
+```js
+...
+var shooter = function me() {
+  alert( me.i ); 
+};
+...
+```
+
+Если убрать имя `me` и оставить обращение через `shooter`, то работать не будет:
+
+```js
+for(var i=0; i<10; i++) {
+  var shooter = function() { 
+*!*
+    alert(shooter.i); // вывести свой номер (не работает!)
+    // потому что откуда функция возьмёт переменную shooter?
+    // ..правильно, из внешнего объекта, а там она одна на всех
+*/!*
+  };
+  shooter.i = i;
+  shooters.push(shooter);
+}
+```
+
+Вызов `alert(shooter.i)` при вызове будет искать переменную `shooter`, а эта переменная меняет значение по ходу цикла, и к моменту вызову она равна последней функции, созданной в цикле. 
+
+Если использовать Named Function Expression, то имя жёстко привязывается к конкретной функции, и поэтому в коде выше `me.i` возвращает правильный `i`.
+
+</li>
+<li>**Другое, более продвинутое решение --- использовать дополнительную функцию для того, чтобы "поймать" текущее значение `i`**:
+
+```js
+//+ run
+function makeArmy() {
+
+  var shooters = [];
+
+  for(var i=0; i<10; i++) {
+
+*!*
+    var shooter = (function(x) {
+
+      return function() {
+        alert( x ); 
+      };
+
+    })(i);
+*/!*
+
+    shooters.push(shooter);   
+  }
+
+  return shooters; 
+}
+
+var army = makeArmy();
+
+army[0](); // 0
+army[1](); // 1
+```
+
+Посмотрим выделенный фрагмент более внимательно, чтобы понять, что происходит:
+
+```js
+var shooter = (function(x) {
+  return function() {
+    alert( x ); 
+  };
+})(i);
+```
+
+Функция `shooter` создана как результат вызова промежуточного функционального выражения `function(x)`, которое объявляется -- и тут же выполняется, получая `x = i`.
+
+Так как `function(x)` тут же завершается, то значение `x` больше не меняется. Оно и будет использовано в возвращаемой функции-стрелке.
+
+Для красоты можно изменить название переменной `x` на `i`, суть происходящего при этом не изменится:
+
+```js
+var shooter = (function(i) {
+  return function() {
+    alert( i ); 
+  };
+})(i);
+```
+
+**Кстати, обратите внимание -- скобки вокруг `function(i)` не нужны**, можно и так:
+
+```js
+var shooter = function(i) { // *!*без скобок вокруг function(i)*/!*
+  return function() {
+    alert( i ); 
+  };
+}(i);
+```
+
+Скобки добавлены в код для лучшей читаемости, чтобы человек, который просматривает его, не подумал, что `var shooter = function`, а понял что это вызов "на месте", и присваивается его результат.
+</li>
+<li>**Еще один забавный способ - обернуть весь цикл во временную функцию**:
+
+```js
+//+ run
+function makeArmy() {
+
+  var shooters = [];
+
+*!*
+  for(var i=0; i<10; i++) (function(i) {
+
+    var shooter = function() {
+      alert( i ); 
+    };
+    
+    shooters.push(shooter); 
+   
+  })(i);
+*/!*
+
+  return shooters; 
+}
+
+var army = makeArmy();
+
+army[0](); // 0
+army[1](); // 1
+```
+
+Вызов `(function(i) { ... })` обернут в скобки, чтобы интерпретатор понял, что это `Function Expression`.
+
+Плюс этого способа - в большей читаемости. Фактически, мы не меняем создание `shooter`, а просто обертываем итерацию в функцию.
+</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/5-functions-closures/5-closures-usage/6-make-army/task.md b/1-js/5-functions-closures/5-closures-usage/6-make-army/task.md
new file mode 100644
index 00000000..04d0eef1
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/6-make-army/task.md
@@ -0,0 +1,31 @@
+# Армия функций
+
+[importance 5]
+
+Следующий код создает массив функций-стрелков `shooters`. По замыслу, каждый стрелок должен выводить свой номер:
+
+```js
+//+ run
+function makeArmy() {
+
+  var shooters = [];
+
+  for(var i=0; i<10; i++) {
+    var shooter = function() { // функция-стрелок
+      alert(i); // выводит свой номер
+    };
+    shooters.push(shooter);
+  }
+
+  return shooters;
+}
+
+var army = makeArmy();
+
+army[0](); // стрелок выводит 10, а должен 0
+army[5](); // стрелок выводит 10...
+// .. все стрелки выводят 10 вместо 0,1,2...9
+```
+
+Почему все стрелки́ выводят одно и то же? Поправьте код, чтобы стрелки работали как задумано. Предложите несколько вариантов исправления.
+
diff --git a/1-js/5-functions-closures/5-closures-usage/article.md b/1-js/5-functions-closures/5-closures-usage/article.md
new file mode 100644
index 00000000..041edea7
--- /dev/null
+++ b/1-js/5-functions-closures/5-closures-usage/article.md
@@ -0,0 +1,126 @@
+# Использование замыканий
+
+Замыкания можно использовать сотнями способов. Иногда люди сами не замечают, что использовали замыкания -- настолько это просто и естественно.
+
+В этой главе мы рассмотрим дополнительные примеры использования замыканий и задачи на эту тему.
+
+[cut]
+
+## Локальные переменные для объекта
+
+Ранее мы сделали счётчик. 
+
+Напомню, как он выглядел:
+
+```js
+//+ run
+function makeCounter() {
+  var currentCount = 1;
+    
+  return function() { 
+    return currentCount++; 
+  };
+}
+
+var counter = makeCounter(); 
+
+// каждый вызов увеличивает счётчик и возвращает результат
+alert( counter() ); // 1 
+alert( counter() ); // 2
+alert( counter() ); // 3
+```
+
+Счётчик получился вполне рабочий, но вот только возможностей ему не хватает. Хорошо бы, чтобы можно было сбрасывать значение счётчика или начинать отсчёт с другого значения вместо `1` или... Да много чего можно захотеть от простого счётчика и, тем более, в более сложных проектах.
+
+**Чтобы добавить счётчику возможностей -- перейдём с функции на полноценный объект:**
+
+```js
+//+ run
+function makeCounter() {
+  var currentCount = 1;
+    
+  return {  // возвратим объект вместо функции
+    getNext: function() {  
+      return currentCount++;
+    },
+ 
+    set: function(value) {  
+      currentCount = value;
+    },
+
+    reset: function() {
+      currentCount = 0;
+    }
+  };
+}
+
+var counter = makeCounter();
+
+alert( counter.getNext() ); // 1
+alert( counter.getNext() ); // 2
+
+counter.set(5);
+alert( counter.getNext() ); // 5
+```
+
+Теперь функция `makeCounter` возвращает не одну функцию, а объект с несколькими методами:
+
+<ul>
+<li>`getNext()` -- получить следующее значение, то, что раньше делал вызов `counter()`.</li>
+<li>`set(value)` -- поставить значение.</li>
+<li>`reset()` -- обнулить счётчик.</li>
+</ul>
+
+Все они получают ссылку `[[Scope]]` на текущий (внешний) объект переменных. Поэтому вызов любого из этих методов будет получать или модифицировать одно и то же внешнее значение `currentCount`.
+
+## Объект счётчика + функция
+
+Изначально, счётчик делался функцией во многом ради красивого вызова: `counter()`, который увеличивал значение и возвращал результат.
+
+К сожалению, при переходе на объект короткий вызов пропал, вместо него теперь `counter.getNext()`. Но он ведь был таким простым и удобным... 
+
+Поэтому давайте вернём его!
+
+```js
+//+ run
+function makeCounter() {
+  var currentCount = 1;
+    
+*!*
+  // возвращаемся к функции
+  function counter() {  
+    return currentCount++;
+  }
+*/!*
+
+  // ...и добавляем ей методы!
+  counter.set = function(value) {  
+    currentCount = value;
+  };
+
+  counter.reset = function() {
+    currentCount = 0;
+  };
+
+  return counter;
+}
+
+var counter = makeCounter();
+
+*!*
+alert( counter() ); // 1
+alert( counter() ); // 2
+
+counter.set(5);
+alert( counter() ); // 5
+*/!*
+```
+
+Красиво, не правда ли? Получился полноценный объект, который можно вдобавок ещё и вызывать.
+
+Этот трюк часто используется при разработке JavaScript-библиотек. Например, популярная библиотека [jQuery](http://jquery.com) предоставляет глобальную переменную с именем [jQuery](http://api.jquery.com/jQuery/) (доступна также под коротким именем `$`), которая с одной стороны является функцией и может вызываться как `jQuery(...)`, а с другой -- у неё есть различные методы, например `jQuery.type(123)` возвращает тип аргумента.
+
+
+## Задачи на понимание замыканий
+
+
diff --git a/1-js/5-functions-closures/6-memory-management/article.md b/1-js/5-functions-closures/6-memory-management/article.md
new file mode 100644
index 00000000..095c372a
--- /dev/null
+++ b/1-js/5-functions-closures/6-memory-management/article.md
@@ -0,0 +1,491 @@
+# Управление памятью в JavaScript
+
+Управление памятью обычно незаметно. Мы создаём примитивы, объекты, функции.. Всё это занимает память.
+
+Что происходит с объектом, когда он становится "не нужен"? Возможно ли "переполнение" памяти? Для ответа на эти вопросы -- залезем "под капот" интерпретатора.
+
+[cut]
+## Управление памятью в JavaScript
+
+Главной концепцией управления памятью в JavaScript является принцип  *достижимости* (англ. reachability).
+
+<ol>
+<li>Определённое множество значений считается достижимым изначально, в частности:
+<ul>
+<li>Значения, ссылки на которые содержатся в стеке вызова, то есть -- все локальные переменные и параметры функций, которые в настоящий момент выполняются или находятся в ожидании окончания вложенного вызова.</li>
+<li>Все глобальные переменные.</li>
+</ul>
+
+Эти значения гарантированно хранятся в памяти. Мы будем называть их *корнями*.
+</li> 
+<li>**Любое другое значение сохраняется в памяти лишь до тех пор, пока доступно из корня по ссылке или цепочке ссылок.**</li>
+</ol>
+
+Для очистки памяти от недостижимых значений в браузерах используется автоматический <a href="http://en.wikipedia.org/wiki/Garbage_collection_(computer_science)">Сборщик мусора</a> (англ. Garbage collection, GC), встроенный в интерпретатор, который наблюдает за объектами и время от времени удаляет недостижимые.
+
+Далее мы посмотрим ряд примеров, которые помогут в этом разобраться.
+
+### Достижимость и наличие ссылок
+
+Можно сказать просто: "значение остаётся в памяти, пока на него есть ссылка". Но такое упрощение будет не совсем верным.
+
+<ul>
+<li>**Верно -- в том плане, что если на значение не остаётся ссылок, то память из-под него очищается.**
+
+Например, была создана ссылка в переменной, и эту переменную тут же перезаписали:
+
+```js
+var user = { name: "Вася" };
+user = null;
+```
+
+Теперь объект `{ name: "Вася" }` более недоступен. Память будет освобождена. 
+</li>
+<li>**Неверно -- может быть так, что ссылка есть, но при этом значение недостижимо и должно быть удалено из памяти.**
+
+Такая ситуация возникает с объектами, при наличии ссылок друг на друга:
+
+```js
+var vasya = {};
+var petya = {};
+vasya.friend = petya;
+petya.friend = vasya;
+
+vasya = petya = null;
+```
+
+Несмотря на то, что на объекты `vasya`, `petya` ссылаются друг на друга через ссылку `friend`, то есть можно сказать, что на каждый из них есть ссылка, последняя строка делает эти объекты в совокупности недостижимыми. 
+
+Поэтому они будут удалены из памяти. 
+
+Чтобы отследить такие сложные случаи, придуман [сборщик мусора](http://ru.wikipedia.org/wiki/%D0%A1%D0%B1%D0%BE%D1%80%D0%BA%D0%B0_%D0%BC%D1%83%D1%81%D0%BE%D1%80%D0%B0), который время от времени перебирает объекты и ищет недоступные, с использованием хитрых алгоритмов и оптимизаций, чтобы это было быстро и незаметно.
+</li>
+</ul>
+
+## Управление памятью в картинках
+
+Рассмотрим пример объекта "семья":
+
+<table>
+<tr>
+<th>Код</th>
+<th>Структура в памяти</th>
+<tr>
+<td>
+
+```js
+var family = { };
+
+family.father = {
+  name: "Вася"
+};
+
+family.mother = {
+  name: "Маша"
+};
+```
+
+</td>
+<td>
+
+<img src="family.png">
+</td>
+</tr>
+</table>
+Этот код создаёт объект `family` и два дополнительных объекта, доступных по ссылкам `family.father` и `family.mother`.
+
+### Недостижимый объект
+
+Теперь посмотрим, что будет, если удалить ссылку `family.father` при помощи `delete`:
+
+<table>
+<tr>
+<th>Код</th>
+<th>Структура в памяти</th>
+<tr>
+<td>
+
+```js
+var family = { };
+
+family.father = {
+  name: "Вася"
+};
+
+family.mother = {
+  name: "Маша"
+};
+
+*!*
+delete family.father;
+*/!*
+```
+
+</td>
+<td>
+<img src="family-nofatherlink.png">
+</td>
+</tr>
+</table>
+
+### Пришёл сборщик мусора
+
+Сборщик мусора ищет недоступные объекты. Базовый алгоритм поиска -- это идти от корня (`window`) по ссылкам и помечать все объекты, которые встретит. Тогда после окончания обхода непомеченными останутся как раз недостижимые объекты.
+
+В нашем случае таким объектом будет бывший `family.father`. Он стал недостижимым и будет удалён вместе со своим "поддеревом", которое также более недоступно из программы.
+
+<table>
+<tr>
+<th>Код</th>
+<th>Структура в памяти</th>
+<tr>
+<td>
+
+```js
+var family = {
+  father: {
+    name: "Вася"
+  },
+
+  mother: {
+    name: "Маша"
+  }
+};
+
+*!*
+delete family.father;
+*/!*
+```
+
+</td>
+<td>
+<img src="family-nofatherlink-junk.png">
+</td>
+</tr>
+</table>
+
+### После сборщика
+
+После того, как сработает сборщик мусора, картина в памяти будет такой:
+
+<table>
+<tr>
+<th>Код</th>
+<th>Структура в памяти</th>
+<tr>
+<td>
+
+```js
+var family = {
+  father: {
+    name: "Вася"
+  },
+
+  mother: {
+    name: "Маша"
+  }
+};
+
+*!*
+delete family.father;
+*/!*
+```
+
+</td>
+<td>
+<img src="family-nofatherlink-junk-cleanup.png">
+</td>
+</tr>
+</table>
+
+
+### Достижимость -- только по входящим ссылкам 
+
+Вернёмся к исходному коду. 
+
+**Пусть внутренние объекты ссылаются друг на друга:**
+
+<table>
+<tr>
+<th>Код</th>
+<th>Структура в памяти</th>
+<tr>
+<td>
+
+```js
+var family = {
+  father: {
+    name: "Вася"
+  },
+
+  mother: {
+    name: "Маша"
+  }
+};
+
+// добавим перекрёстных ссылок
+*!*
+family.father.wife = family.mother;
+family.mother.husband = family.father;
+family.father.we = family;
+family.mother.we = family;
+*/!*
+```
+
+</td>
+<td>
+<img src="family-ext.png">
+</td>
+</tr>
+</table>
+
+Получилась сложная структура, с круговыми ссылками.
+
+**Если удалить ссылки `family.father` и `family.mother.husband` (см. иллюстрацию ниже), то получится объект, который имеет исходящие ссылки, но не имеет входящих:**
+<table>
+<tr>
+<th>Код</th>
+<th>Структура в памяти</th>
+<tr>
+<td>
+
+```js
+var family = {
+  father: {
+    name: "Вася"
+  },
+
+  mother: {
+    name: "Маша"
+  }
+};
+
+family.father.wife = family.mother;
+family.mother.husband = family.father;
+family.father.we = family;
+family.mother.we = family;
+
+*!*
+delete family.father;
+delete family.mother.husband;
+*/!*
+```
+
+</td>
+<td>
+<img src="family-ext-nofatherlink-nohusband.png">
+</td>
+</tr>
+</table>
+
+При стандартном алгоритме очистки памяти, сборщик мусора пойдёт от корня и не сможет достичь объект, помеченный серым. Поэтому он будет удалён. 
+
+**И совершенно неважно, что из объекта выходят какие-то ссылки `wife`, `we`, они не влияют на достижимость этого объекта.**
+
+### Недостижимый остров
+
+Всё "семейство" объектов, которое мы рассматривали выше, достижимо исключительно через глобальную переменную `family` или, иными словами, через свойство `window.family`.
+
+Если записать в `window.family` что-то ещё, то все они, вместе со своими внутренними ссылками станут "недостижимым островом" и будут удалены:
+
+<table>
+<tr>
+<th>Код</th>
+<th>Структура в памяти</th>
+<tr>
+<td>
+
+```js
+var family = {
+  father: {
+    name: "Вася"
+  },
+
+  mother: {
+    name: "Маша"
+  }
+};
+
+family.father.wife = family.mother;
+family.mother.husband = family.father;
+family.father.we = family;
+family.mother.we = family;
+
+*!*
+family = null;
+*/!*
+```
+
+</td>
+<td>
+<img src="family-ext-nolink.png">
+</td>
+</tr>
+</table>
+
+## Замыкания
+
+Замыкания следуют тем же правилам, что и обычные объекты.
+
+**Объект переменных внешней функции существует в памяти до тех пор, пока существует хоть одна внутренняя функция, ссылающаяся на него через свойство `[[Scope]]`.**
+
+Например:
+
+<ul>
+<li>Обычно объект переменных удаляется по завершении работы функции. Даже если в нём есть объявление внутренней функции:
+
+```js
+function f() {
+  var value = Math.random();
+
+  function g() { } // g видна только изнутри
+}
+
+f();
+```
+
+В коде выше внутренняя функция объявлена, но она осталась внутри. После окончания работы `f()` она станет недоступной для вызовов, так что будет убрана из памяти вместе с остальными локальными переменными.
+</li>
+<li>...А вот в этом случае лексическое окружение, включая переменную `value`, будет сохранено:
+
+```js
+function f() {
+  var value = Math.random();
+
+  function g() { } 
+
+*!*
+  return g;
+*/!*
+}
+
+var g = f(); // функция g будет жить и сохранит ссылку на объект переменных
+```
+
+Причина сохранения проста: в скрытом свойстве `g.[[Scope]]` находится ссылка на объект переменных, в котором была создана `g`. 
+</li>
+<li>
+Если `f()` будет вызываться много раз, а полученные функции будут сохраняться, например, складываться в массив, то будут сохраняться и объекты `LexicalEnvironment` с соответствующими значениями  `value`:
+
+```js
+function f() {
+  var value = Math.random();
+
+  return function() { };
+}
+
+// 3 функции, каждая ссылается на свой объект переменных, 
+// со своим значением value
+var arr = [f(), f(), f()];
+```
+
+При этом совершенно не важно, имеет ли вложенная функция имя или нет.
+</li>
+<li>Объект `LexicalEnvironment` живёт ровно до тех пор, пока на него существуют ссылки. В коде ниже замыкание сначала сохраняется в памяти, а после удаления ссылки на `g` умирает:
+
+```js
+function f() {
+  var value = Math.random();
+
+  function g() { } 
+
+  return g;
+}
+
+var g = f();  // функция g жива
+// а значит в памяти остается соответствующий объект переменных 
+
+g = null;     // ..а вот теперь память будет очищена
+```
+
+</li>
+</ul>
+
+### Оптимизация в V8 и её последствия 
+
+Современные JS-движки делают оптимизации замыканий по памяти. Они анализируют использование переменных и в случае, когда переменная из замыкания абсолютно точно не используется, удаляют её.
+
+В коде выше переменная `value` никак не используется. Поэтому она будет удалена из памяти.
+
+**Важный побочный эффект в V8 (Chrome, Opera) состоит в том, что удалённая переменная станет недоступна и при отладке!**
+
+Попробуйте запустить пример ниже с открытой консолью Chrome. Когда он остановится, в консоли наберите `alert(value)`.
+
+```js
+//+ run
+function f() {
+  var value = Math.random();
+
+  function g() { 
+    debugger; // выполните в консоли alert(value); Нет такой переменной!
+  } 
+
+  return g;
+}
+
+var g = f(); 
+g();
+```
+
+Это может привести к забавным казусам при отладке, вплоть до того что вместо этой переменной будет другая, внешняя:
+
+```js
+//+ run
+var value = "Сюрприз";
+
+function f() {
+  var value = "...";
+
+  function g() { 
+    debugger; // выполните в консоли alert(value); Сюрприз!
+  } 
+
+  return g;
+}
+
+var g = f(); 
+g();
+```
+
+[warn header="Ещё увидимся"]
+Об этой особенности важно знать. Если вы отлаживаете под Chrome/Opera, то наверняка рано или поздно с ней встретитесь!
+
+Это не глюк отладчика, а особенность работы V8, которая, возможно, будет когда-нибудь изменена. Вы всегда сможете проверить, не изменилось ли чего, запустив примеры на этой странице.
+[/warn]
+
+## Влияние управления памятью на скорость 
+
+На создание новых объектов и их удаление тратится время. Это важно иметь в виду в случае, когда важна производительность.
+
+В качестве примера рассмотрим рекурсию. При вложенных вызовах каждый раз создаётся новый объект с переменными и помещается в стек. Потом память из-под него нужно очистить. Поэтому рекурсивный код будет всегда медленнее использующего цикл, но насколько?
+
+Пример ниже тестирует сложение чисел до данного через рекурсию по сравнению с обычным циклом:
+
+```js
+//+ run
+function sumTo(n) {   // обычный цикл 1+2+...+n
+  var result = 0;
+  for (var i=1; i<=n; i++) {
+    result += i;
+  }
+  return result;
+}
+
+function sumToRec(n) { // рекурсия sumToRec(n) = n+SumToRec(n-1)
+  return n == 1 ? 1 : n + sumToRec(n-1);
+}
+
+var timeLoop = performance.now();
+for (var i=1;i<1000;i++) sumTo(1000); // цикл
+timeLoop = performance.now() - timeLoop; 
+
+var timeRecursion = performance.now();
+for (var i=1;i<1000;i++) sumToRec(1000); // рекурсия
+timeRecursion = performance.now() - timeRecursion;
+
+alert("Разница в " + ( timeRecursion / timeLoop ) + " раз");
+```
+
+Различие в скорости на таком примере может составлять, в зависимости от интерпретатора, 2-10 раз. 
+
+В большинстве ситуаций оптимизация по количеству создаваемых объектов несущественна, просто потому что "JavaScript и так достаточно быстр". Но она может быть важной для "узких мест" кода, а также при написании компьютерной графики и сложных вычислений на JS.
diff --git a/1-js/5-functions-closures/6-memory-management/family-ext-nofatherlink-nohusband.png b/1-js/5-functions-closures/6-memory-management/family-ext-nofatherlink-nohusband.png
new file mode 100755
index 00000000..51715238
Binary files /dev/null and b/1-js/5-functions-closures/6-memory-management/family-ext-nofatherlink-nohusband.png differ
diff --git a/1-js/5-functions-closures/6-memory-management/family-ext-nolink.png b/1-js/5-functions-closures/6-memory-management/family-ext-nolink.png
new file mode 100755
index 00000000..dd9d5760
Binary files /dev/null and b/1-js/5-functions-closures/6-memory-management/family-ext-nolink.png differ
diff --git a/1-js/5-functions-closures/6-memory-management/family-ext.png b/1-js/5-functions-closures/6-memory-management/family-ext.png
new file mode 100755
index 00000000..c1108d59
Binary files /dev/null and b/1-js/5-functions-closures/6-memory-management/family-ext.png differ
diff --git a/1-js/5-functions-closures/6-memory-management/family-nofatherlink-junk-cleanup.png b/1-js/5-functions-closures/6-memory-management/family-nofatherlink-junk-cleanup.png
new file mode 100755
index 00000000..ea1c8300
Binary files /dev/null and b/1-js/5-functions-closures/6-memory-management/family-nofatherlink-junk-cleanup.png differ
diff --git a/1-js/5-functions-closures/6-memory-management/family-nofatherlink-junk.png b/1-js/5-functions-closures/6-memory-management/family-nofatherlink-junk.png
new file mode 100755
index 00000000..73f971b0
Binary files /dev/null and b/1-js/5-functions-closures/6-memory-management/family-nofatherlink-junk.png differ
diff --git a/1-js/5-functions-closures/6-memory-management/family-nofatherlink.png b/1-js/5-functions-closures/6-memory-management/family-nofatherlink.png
new file mode 100755
index 00000000..f9073786
Binary files /dev/null and b/1-js/5-functions-closures/6-memory-management/family-nofatherlink.png differ
diff --git a/1-js/5-functions-closures/6-memory-management/family.png b/1-js/5-functions-closures/6-memory-management/family.png
new file mode 100755
index 00000000..93e7247d
Binary files /dev/null and b/1-js/5-functions-closures/6-memory-management/family.png differ
diff --git a/1-js/5-functions-closures/7-with/1-with-function/solution.md b/1-js/5-functions-closures/7-with/1-with-function/solution.md
new file mode 100644
index 00000000..fd30089e
--- /dev/null
+++ b/1-js/5-functions-closures/7-with/1-with-function/solution.md
@@ -0,0 +1,17 @@
+Вторая (`2`), т.к. при обращении к любой переменной внутри `with` -- она ищется прежде всего в объекте.
+
+Соответственно, будет выведено `2`:
+
+```js
+//+ run
+function f() { alert(1) }
+
+var obj = { 
+  f: function() { alert(2) } 
+};
+
+with(obj) {
+  f();
+}
+```
+
diff --git a/1-js/5-functions-closures/7-with/1-with-function/task.md b/1-js/5-functions-closures/7-with/1-with-function/task.md
new file mode 100644
index 00000000..05e73c4e
--- /dev/null
+++ b/1-js/5-functions-closures/7-with/1-with-function/task.md
@@ -0,0 +1,18 @@
+# With + функция
+
+[importance 5]
+
+Какая из функций будет вызвана?
+
+```js
+function f() { alert(1) }
+
+var obj = { 
+  f: function() { alert(2) } 
+};
+
+with(obj) {
+  f();
+}
+```
+
diff --git a/1-js/5-functions-closures/7-with/2-with-variables/solution.md b/1-js/5-functions-closures/7-with/2-with-variables/solution.md
new file mode 100644
index 00000000..79d5f180
--- /dev/null
+++ b/1-js/5-functions-closures/7-with/2-with-variables/solution.md
@@ -0,0 +1,20 @@
+Выведет `3`.
+
+**Конструкция `with` не создаёт области видимости,** её создают только функции. Поэтому объявление `var b` внутри конструкции работает также, как если бы оно было вне её.
+
+Код в задаче эквивалентен такому:
+
+```js
+//+ run
+var a = 1;
+*!*
+var b;
+*/!*
+
+var obj = { b: 2 }
+
+with(obj) {
+  alert( a + b );
+}
+```
+
diff --git a/1-js/5-functions-closures/7-with/2-with-variables/task.md b/1-js/5-functions-closures/7-with/2-with-variables/task.md
new file mode 100644
index 00000000..c979fc47
--- /dev/null
+++ b/1-js/5-functions-closures/7-with/2-with-variables/task.md
@@ -0,0 +1,17 @@
+# With + переменные
+
+[importance 5]
+
+Что выведет этот код?
+
+```js
+var a = 1;
+
+var obj = { b: 2 };
+
+with(obj) {
+  var b;
+  alert( a + b );
+}
+```
+
diff --git a/1-js/5-functions-closures/7-with/article.md b/1-js/5-functions-closures/7-with/article.md
new file mode 100644
index 00000000..966dc0e6
--- /dev/null
+++ b/1-js/5-functions-closures/7-with/article.md
@@ -0,0 +1,181 @@
+# Устаревшая конструкция "with" 
+
+Конструкция `with` позволяет использовать в качестве области видимости для переменных произвольный объект. 
+
+В современном JavaScript от этой конструкции отказались. С `use strict` она не работает, но её ещё можно найти в старом коде, так что стоит познакомиться с ней, чтобы если что -- понимать, о чём речь.
+
+[cut]
+Синтаксис:
+
+```js
+with(obj) {
+  ... код ...
+}
+```
+
+**Любое обращение к переменной внутри `with` сначала ищет её среди свойств `obj`, а только потом -- вне `with`.**
+
+## Пример   
+
+В примере ниже переменная будет взята не из глобальной области, а из `obj`:
+
+```js
+//+ run
+var a = 5;
+
+var obj = { a : 10 };
+
+*!*
+with(obj) {
+  alert(a); // 10, из obj
+}
+*/!*
+```
+
+Попробуем получить переменную, которой в `obj` нет:
+
+```js
+//+ run
+var b = 1;
+
+var obj = { a : 10 };
+
+*!*
+with(obj) {
+  alert(b); // 1, из window
+}
+*/!*
+```
+
+Здесь интерпретатор сначала проверяет наличие `obj.b`, не находит и идет вне `with`.
+
+Особенно забавно выглядит применение вложенных `with`:
+
+```js
+//+ run
+var obj = {
+  weight: 10,
+  size: {
+    width: 5,
+    height: 7
+  }
+};
+
+with(obj) {
+  with(size) { // size будет взят из obj
+*!*
+    alert( width*height / weight ); // width,height из size, weight из obj
+*/!*
+  }
+}
+```
+
+Свойства из разных объектов используются как обычные переменные... Магия! Порядок поиска переменных в выделенном коде: `size => obj => window`
+
+<img src="with_obj_size.png">
+
+## Изменения переменной
+
+При использовании `with`, как и во вложенных функциях -- переменная изменяется в той области, где была найдена.
+
+Например:
+
+```js
+//+ run
+var obj = { a : 10 }
+
+*!*
+with(obj) {
+  a = 20;
+}
+*/!*
+alert(obj.a); // 20, переменная была изменена в объекте
+```
+
+## Почему отказались от with?   
+
+Есть несколько причин.
+
+<ol>
+<li>В современном стандарте `JavaScript` отказались от `with`, потому что **конструкция `with` подвержена ошибкам и непрозрачна.**
+
+Проблемы возникают в том случае, когда в `with(obj)` присваивается переменная, которая по замыслу должна быть в свойствах `obj`, но ее там нет.
+
+Например:
+
+```js
+//+ run
+var obj = { weight: 10 };
+
+with(obj) {
+  weight = 20; // (1)
+  size = 35;   // (2)
+}
+
+alert(obj.size);
+alert(window.size);
+```
+
+В строке `(2)` присваивается свойство, отсутствующее в `obj`. В результате интерпретатор, не найдя его, создает новую глобальную переменную `window.size`.
+
+Такие ошибки редки, но очень сложны в отладке, особенно если `size` изменилась не в `window`, а где-нибудь во внешнем `LexicalEnvironment`.
+</li>
+<li>Еще одна причина -- **алгоритмы сжатия JavaScript не любят `with`**. Перед выкладкой на сервер JavaScript сжимают. Для этого есть много инструментов, например [Closure Compiler](http://code.google.com/intl/ru-RU/closure/compiler/) и [UglifyJS](https://github.com/mishoo/UglifyJS). Если вкратце -- они либо сжимают код с `with` с ошибками, либо оставляют его частично несжатым.</li>
+<li>Ну и, наконец, **производительность -- усложнение поиска переменной из-за `with` влечет дополнительные накладные расходы**. Современные движки применяют много внутренних оптимизаций, ряд которых не могут быть применены к коду, в котором есть `with`.
+
+Вот, к примеру, запустите этот код в современном браузере. Производительность функции `fast` существенно отличается `slow` с пустым(!) `with`. И дело тут именно в `with`, т.к. наличие этой конструкции препятствует оптимизации.
+
+```js
+//+ run
+var i = 0;
+
+function fast() {
+  i++;
+}
+
+function slow() { 
+  with(i) {}
+  i++;
+}
+
+
+var time = new Date();
+while(i < 1000000) fast();
+alert(new Date - time);
+
+var time = new Date();
+i=0;
+while(i < 1000000) slow();
+alert(new Date - time);
+```
+
+</li>
+</ol>
+
+### Замена with
+
+Вместо `with` рекомендуется использовать временную переменную, например:
+
+```js
+/* вместо
+with(elem.style) {
+  top = '10px';
+  left = '20px';
+}
+*/
+
+var s = elem.style;
+
+s.top = '10px';
+s.left = '0';
+```
+
+Это не так элегантно, но убирает лишний уровень вложенности и абсолютно точно понятно, что будет происходить и куда присвоятся свойства.
+
+## Итого
+
+<ul>
+<li>Конструкция `with(obj) { ... }` использует `obj` как дополнительную область видимости. Все переменные, к которым идет обращение внутри блока, сначала ищутся в `obj`.</li>
+<li>Конструкция `with` устарела и не рекомендуется по ряду причин. Избегайте её.</li>
+</ul>
+
diff --git a/1-js/5-functions-closures/7-with/with_obj_size.png b/1-js/5-functions-closures/7-with/with_obj_size.png
new file mode 100755
index 00000000..1967895d
Binary files /dev/null and b/1-js/5-functions-closures/7-with/with_obj_size.png differ
diff --git a/1-js/5-functions-closures/index.md b/1-js/5-functions-closures/index.md
new file mode 100644
index 00000000..faff5532
--- /dev/null
+++ b/1-js/5-functions-closures/index.md
@@ -0,0 +1,5 @@
+# Замыкания, область видимости
+
+Понимание "области видимости" и "замыканий" -- ключевое в изучении JavaScript, без них "каши не сваришь". 
+
+В этом разделе мы более глубоко изучаем переменные и функции -- и замыкания в том числе.
\ No newline at end of file
diff --git a/1-js/6-objects-more/1-object-methods/1-call-array-this/solution.md b/1-js/6-objects-more/1-object-methods/1-call-array-this/solution.md
new file mode 100644
index 00000000..f3b7cde8
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/1-call-array-this/solution.md
@@ -0,0 +1,13 @@
+Вызов `arr[2]()` -- это обращение к методу объекта `obj[method]()`, в роли `obj` выступает `arr`, а в роли метода: `2`. 
+
+Поэтому, как это бывает при вызове функции как метода, функция `arr[2]` получит `this = arr` и выведет массив:
+
+```js
+//+ run
+var arr = ["a", "b"];
+
+arr.push( function() { alert(this); } )
+
+arr[2](); // "a","b",function
+```
+
diff --git a/1-js/6-objects-more/1-object-methods/1-call-array-this/task.md b/1-js/6-objects-more/1-object-methods/1-call-array-this/task.md
new file mode 100644
index 00000000..a46c5456
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/1-call-array-this/task.md
@@ -0,0 +1,14 @@
+# Вызов в контексте массива
+
+[importance 5]
+
+Каким будет результат? Почему?
+
+```js
+var arr = ["a", "b"];
+
+arr.push( function() { alert(this); } )
+
+arr[2]();  // ?
+```
+
diff --git a/1-js/6-objects-more/1-object-methods/2-check-syntax/solution.md b/1-js/6-objects-more/1-object-methods/2-check-syntax/solution.md
new file mode 100644
index 00000000..b73f4b2d
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/2-check-syntax/solution.md
@@ -0,0 +1,24 @@
+**Ошибка**! 
+
+Попробуйте:
+
+```js
+//+ run
+var obj = {
+  go: function() { alert(this) }
+}
+
+(obj.go)()  // error!
+```
+
+Причем сообщение об ошибке в большинстве браузеров не даёт понять, что на самом деле не так.
+
+**Ошибка возникла из-за того, что после объявления `obj` пропущена точка с запятой.**
+
+JavaScript игнорирует перевод строки перед скобкой `(obj.go)()`  и читает этот код как:
+
+```js
+var obj = { go:... }(obj.go)()
+```
+
+Интерпретатор попытается вычислить это выражение, которое обозначает вызов объекта `{ go: ... }` как функции с аргументом `(obj.go)`. При этом, естественно, возникнет ошибка.
diff --git a/1-js/6-objects-more/1-object-methods/2-check-syntax/task.md b/1-js/6-objects-more/1-object-methods/2-check-syntax/task.md
new file mode 100644
index 00000000..f8fe23ec
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/2-check-syntax/task.md
@@ -0,0 +1,15 @@
+# Проверка синтаксиса
+
+[importance 2]
+
+Каков будет результат этого кода?
+
+```js
+var obj = {
+  go: function() { alert(this) }
+}
+
+(obj.go)()
+```
+
+P.S. Есть подвох :)
\ No newline at end of file
diff --git a/1-js/6-objects-more/1-object-methods/3-why-this/solution.md b/1-js/6-objects-more/1-object-methods/3-why-this/solution.md
new file mode 100644
index 00000000..b7e4eea6
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/3-why-this/solution.md
@@ -0,0 +1,31 @@
+<ol>
+<li>Обычный вызов функции в контексте объекта.</li>
+<li>То же самое, скобки ни на что не влияют.</li>
+<li>Здесь не просто вызов `obj.method()`, а более сложный вызов вида `(выражение).method()`. Такой вызов работает, как если бы он был разбит на две строки:
+
+```js
+f = obj.go; // сначала вычислить выражение
+f();             // потом вызвать то, что получилось
+```
+
+При этом `f()` выполняется как обычная функция, без передачи `this`. 
+</li>
+<li>Здесь также слева от точки находится выражение, вызов аналогичен двум строкам.</li>
+</ol>
+
+В спецификации это объясняется при помощи специального внутреннего типа [Reference Type](http://es5.github.com/x8.html#x8.7).
+
+Если подробнее -- то `obj.go()` состоит из двух операций:
+<ol>
+<li>Сначала получить свойство `obj.go`.</li>
+<li>Потом вызвать его как функцию.</li>
+</ol>
+
+Но откуда на шаге 2 получить `this`? Как раз для этого операция получения свойства `obj.go` возвращает значение особого типа `Reference Type`, который в дополнение к свойству `go` содержит информацию об `obj`. Далее, на втором шаге, вызов его при помощи скобок `()` правильно устанавливает `this`.
+
+**Любые другие операции, кроме вызова, превращают `Reference Type` в обычный тип, в данном случае -- функцию `go` (так уж этот тип устроен).** 
+
+Поэтому получается, что `(method = obj.go)` присваивает в переменную `method` функцию `go`, уже без всякой информации об объекте `obj`.
+
+Аналогичная ситуация и в случае `(4)`: оператор ИЛИ `||` делает из `Reference Type` обычную функцию.
+
diff --git a/1-js/6-objects-more/1-object-methods/3-why-this/task.md b/1-js/6-objects-more/1-object-methods/3-why-this/task.md
new file mode 100644
index 00000000..5ff97a04
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/3-why-this/task.md
@@ -0,0 +1,26 @@
+# Почему this присваивается именно так?
+
+[importance 3]
+
+Вызовы `(1)` и `(2)` в примере ниже работают не так, как `(3)` и `(4)`:
+
+```js
+//+ run
+"use strict"
+
+var obj, f;
+
+obj = {
+  go: function() { alert(this); }
+};
+
+obj.go();            // (1) object
+
+(obj.go)();          // (2) object
+
+(method = obj.go)();      // (3) undefined
+
+(obj.go || obj.stop)(); // (4) undefined
+```
+
+В чём дело? Объясните логику работы `this`.
diff --git a/1-js/6-objects-more/1-object-methods/4-object-property-this/solution.md b/1-js/6-objects-more/1-object-methods/4-object-property-this/solution.md
new file mode 100644
index 00000000..e26f24d8
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/4-object-property-this/solution.md
@@ -0,0 +1,22 @@
+**Ответ: пустая строка.**
+
+```js
+//+ run
+var name = "";
+
+var user = {
+  name: "Василий",
+        
+*!*
+  export: this // (*)
+*/!*
+};  
+
+alert(user.export.name);
+```
+
+Объявление объекта само по себе не влияет на `this`. Никаких функций, которые могли бы повлиять на контекст, здесь нет.
+
+Так как код находится вообще вне любых функций, то `this` в нём равен `window` (при `use strict` было бы `undefined`).
+
+Получается, что в строке `(*)` мы имеем `export: window`, так что далее `alert(user.export.name)` выводит свойство `window.name`, то есть глобальную переменную `name`, которая равна пустой строке.
diff --git a/1-js/6-objects-more/1-object-methods/4-object-property-this/task.md b/1-js/6-objects-more/1-object-methods/4-object-property-this/task.md
new file mode 100644
index 00000000..95421894
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/4-object-property-this/task.md
@@ -0,0 +1,18 @@
+# Значение this в объявлении объекта
+
+[importance 5]
+
+Что выведет `alert` в этом коде? Почему?
+
+```js
+var name = "";
+
+var user = {
+  name: "Василий",
+        
+  export: this
+};  
+
+alert(user.export.name);
+```
+
diff --git a/1-js/6-objects-more/1-object-methods/5-return-this/solution.md b/1-js/6-objects-more/1-object-methods/5-return-this/solution.md
new file mode 100644
index 00000000..b34977b4
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/5-return-this/solution.md
@@ -0,0 +1,5 @@
+**Ответ: `Василий`.**
+
+Вызов `user.export()` использует `this`, который равен объекту до точки, то есть внутри `user.export()` строка `return this` возвращает объект `user`. 
+
+В итоге выводится свойство `name` объекта `user`, равное `"Василий"`.
diff --git a/1-js/6-objects-more/1-object-methods/5-return-this/task.md b/1-js/6-objects-more/1-object-methods/5-return-this/task.md
new file mode 100644
index 00000000..e9065794
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/5-return-this/task.md
@@ -0,0 +1,21 @@
+# Возврат this
+
+[importance 5]
+
+Что выведет `alert` в этом коде? Почему?
+
+```js
+var name = "";
+
+var user = {
+  name: "Василий",
+        
+  export: function() {        
+    return this;
+  }
+
+};  
+
+alert(user.export().name);
+```
+
diff --git a/1-js/6-objects-more/1-object-methods/6-return-object-this/solution.md b/1-js/6-objects-more/1-object-methods/6-return-object-this/solution.md
new file mode 100644
index 00000000..67dda01b
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/6-return-object-this/solution.md
@@ -0,0 +1,7 @@
+**Ответ: `Василий`.**
+
+Во время выполнения `user.export()` значение `this = user`. 
+
+При создании объекта `{ value: this }`, в свойство `value` копируется ссылка на текущий контекст, то есть на `user`.
+
+Получается что `user.export().value == user`.
diff --git a/1-js/6-objects-more/1-object-methods/6-return-object-this/task.md b/1-js/6-objects-more/1-object-methods/6-return-object-this/task.md
new file mode 100644
index 00000000..fe585cfa
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/6-return-object-this/task.md
@@ -0,0 +1,23 @@
+# Возврат объекта с this
+
+[importance 5]
+
+Что выведет `alert` в этом коде? Почему?
+
+```js
+var name = "";
+
+var user = {
+  name: "Василий",
+        
+  export: function() {
+    return {  
+      value: this
+    };
+  }
+
+};  
+
+alert(user.export().value.name);
+```
+
diff --git a/1-js/6-objects-more/1-object-methods/7-calculator/_js.view/solution.js b/1-js/6-objects-more/1-object-methods/7-calculator/_js.view/solution.js
new file mode 100644
index 00000000..ca2ca33b
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/7-calculator/_js.view/solution.js
@@ -0,0 +1,15 @@
+var calculator = {
+  sum: function() {
+    return this.a + this.b;
+  },
+
+  mul: function() {
+    return this.a * this.b;
+  },
+
+  read: function() {
+    this.a = +prompt('a?', 0);
+    this.b = +prompt('b?', 0);
+  }
+}
+
diff --git a/1-js/6-objects-more/1-object-methods/7-calculator/_js.view/test.js b/1-js/6-objects-more/1-object-methods/7-calculator/_js.view/test.js
new file mode 100644
index 00000000..761f881e
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/7-calculator/_js.view/test.js
@@ -0,0 +1,22 @@
+sinon.stub(window, "prompt");
+
+prompt.onCall(0).returns("2");
+prompt.onCall(1).returns("3");
+
+describe("calculator", function() {
+  before(function() {
+    calculator.read();
+  });
+
+  it("при вводе 2 и 3 сумма равна 5", function() {
+    assert.equal( calculator.sum(), 5 );
+  });
+
+  it("при вводе 2 и 3 произведение равно 6", function() {
+    assert.equal( calculator.mul(), 6 );
+  });
+});
+
+after(function() {
+  prompt.restore();
+});
\ No newline at end of file
diff --git a/1-js/6-objects-more/1-object-methods/7-calculator/solution.md b/1-js/6-objects-more/1-object-methods/7-calculator/solution.md
new file mode 100644
index 00000000..1849cc94
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/7-calculator/solution.md
@@ -0,0 +1,24 @@
+
+
+```js
+//+ run demo
+var calculator = {
+  sum: function() {
+    return this.a + this.b;
+  },
+
+  mul: function() {
+    return this.a * this.b;
+  },
+
+  read: function() {
+    this.a = +prompt('a?', 0);
+    this.b = +prompt('b?', 0);
+  }
+}
+
+calculator.read();
+alert( calculator.sum() );
+alert( calculator.mul() );
+```
+
diff --git a/1-js/6-objects-more/1-object-methods/7-calculator/task.md b/1-js/6-objects-more/1-object-methods/7-calculator/task.md
new file mode 100644
index 00000000..d45d1b1e
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/7-calculator/task.md
@@ -0,0 +1,22 @@
+# Создайте калькулятор
+
+[importance 5]
+
+Создайте объект `calculator` с тремя методами: 
+<ul>
+<li>`read()` запрашивает `prompt` два значения и сохраняет их как свойства объекта</li>
+<li>`sum()` возвращает сумму этих двух значений</li>
+<li>`mul()` возвращает произведение этих двух значений</li>
+</ul>
+
+```js
+var calculator = { 
+  ... ваш код...
+}
+
+calculator.read();
+alert( calculator.sum() );
+alert( calculator.mul() );
+```
+
+[demo /]
diff --git a/1-js/6-objects-more/1-object-methods/8-chain-calls/solution.md b/1-js/6-objects-more/1-object-methods/8-chain-calls/solution.md
new file mode 100644
index 00000000..d412c95e
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/8-chain-calls/solution.md
@@ -0,0 +1,23 @@
+Решение состоит в том, чтобы каждый раз возвращать текущий объект. Это делается добавлением `return this` в конце каждого метода:
+
+```js
+//+ run
+var ladder = {
+  step: 0,
+  up: function() { 
+    this.step++; 
+    return this;
+  },
+  down: function() { 
+    this.step--; 
+    return this;
+  },
+  showStep: function() { 
+    alert(this.step); 
+    return this;
+  }
+}
+
+ladder.up().up().down().up().down().showStep();  // 1
+```
+
diff --git a/1-js/6-objects-more/1-object-methods/8-chain-calls/task.md b/1-js/6-objects-more/1-object-methods/8-chain-calls/task.md
new file mode 100644
index 00000000..0fa9218a
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/8-chain-calls/task.md
@@ -0,0 +1,38 @@
+# Цепочка вызовов
+
+[importance 2]
+
+Есть объект "лестница" ladder:
+
+```js
+var ladder = {
+  step: 0,
+  up: function() {  // вверх по лестнице
+    this.step++;
+  },
+  down: function() {  // вниз по лестнице
+    this.step--;
+  },
+  showStep: function() { // вывести текущую ступеньку
+    alert(this.step);
+  }
+};
+```
+
+Сейчас, если нужно последовательно вызвать несколько методов объекта, это можно сделать так:
+
+```js
+ladder.up();
+ladder.up();
+ladder.down();
+ladder.showStep(); // 1
+```
+
+Модифицируйте код методов объекта, чтобы вызовы можно было делать цепочкой, вот так:
+
+```js
+ladder.up().up().down().up().down().showStep();  // 1
+```
+
+Такой подход называется "чейнинг" (chaining) и используется, например, во фреймворке jQuery.
+
diff --git a/1-js/6-objects-more/1-object-methods/article.md b/1-js/6-objects-more/1-object-methods/article.md
new file mode 100644
index 00000000..80403568
--- /dev/null
+++ b/1-js/6-objects-more/1-object-methods/article.md
@@ -0,0 +1,228 @@
+# Методы объектов, this
+
+До этого мы говорили об объекте лишь как о хранилище значений. Теперь пойдём дальше и поговорим об объектах как о сущностях со своими функциями ("методами").
+[cut]
+
+## Методы у объектов
+
+При объявлении объекта можно указать свойство-функцию, например:
+
+```js
+//+ run
+var user = {
+  name: 'Василий',
+
+*!*
+  // метод
+*/!*
+  sayHi: function() {
+    alert('Привет!');
+  }
+
+};
+
+*!*
+// Вызов
+user.sayHi();
+*/!*
+```
+
+Свойства-функции называют "методами" объектов. Их можно добавлять и удалять в любой момент, в том числе и явным присваиванием:
+
+```js
+//+ run
+var user = {
+  name: 'Василий'
+};
+
+*!*
+user.sayHi = function() { // присвоили метод после создания объекта
+  alert('Привет!');
+};
+*/!*
+
+// Вызов метода:
+*!*user.sayHi();*/!*
+```
+
+## Доступ к объекту через this
+
+Для полноценной работы метод должен иметь доступ к данным объекта. В частности, вызов `user.sayHi()` может захотеть вывести имя пользователя.
+
+**Для доступа к текущему объекту из метода используется ключевое слово `this`**. 
+
+Значением `this` является объект перед "точкой", в контексте которого вызван метод, например:
+
+```js
+//+ run
+var user = {
+  name: 'Василий',
+
+  sayHi: function() {
+    alert( *!*this.name*/!* );
+  }
+};
+
+user.sayHi(); // sayHi в контексте user
+```
+
+Здесь при выполнении функции `user.sayHi()` в `this` будет храниться ссылка на текущий объект `user`. 
+
+Вместо `this` внутри `sayHi` можно было бы обратиться к объекту, используя переменную `user`:
+
+```js
+...
+  sayHi: function() {
+    alert( *!*user.name*/!* );
+  }
+...
+```
+
+...Однако, такое решение нестабильно. Если мы решим скопировать объект в другую переменную, например `admin = user`, а в переменную `user` записать что-то другое -- обращение будет совсем не по адресу:
+
+```js
+//+ run
+var user = {
+  name: 'Василий',
+
+  sayHi: function() {
+    alert( *!*user.name*/!* ); // приведёт к ошибке
+  }
+};
+
+var admin = user;
+user = null;
+
+admin.sayHi(); // упс! внутри sayHi обращение по старому имени, ошибка!
+```
+
+**Использование `this` гарантирует, что функция работает именно с тем объектом, в контексте которого вызвана!**
+
+Через `this` метод может обратиться к любому свойству объекта, а, при желании, и передать объект куда-либо:
+
+```js
+//+ run
+var user = {
+  name: 'Василий',
+
+*!* 
+  sayHi: function() {
+    showName(this); // передать текущий объект в showName
+  }
+*/!*
+};
+
+function showName(obj) {
+  alert( obj.name ); 
+}
+
+user.sayHi(); // Василий
+```
+
+## Подробнее про this 
+
+Любая функция может иметь в себе `this`. Совершенно неважно, объявлена она в объекте или вне него.
+
+Значение `this` называется *контекстом вызова* и будет определено в момент вызова функции.
+
+Например, такая функция, объявленная без объекта, вполне допустима:
+
+```js
+function sayHi() { 
+  alert( *!*this.firstName*/!* );
+}
+```
+
+Эта функция ещё не знает, каким будет `this`. Это выяснится при выполнении программы.
+
+**Если одну и ту же функцию запускать в контексте разных объектов, она будет получать разный `this`:**
+
+```js
+//+ run
+var user = { firstName: "Вася" };
+var admin = { firstName: "Админ" };
+
+function func() { 
+  alert( this.firstName );
+}
+
+user.f = func;  
+admin.g = func; 
+
+*!*
+// this равен объекту перед точкой:
+user.f(); // Вася
+admin.g(); // Админ
+admin['g'](); // Админ (не важно, доступ к объекту через точку или квадратные скобки)
+*/!*
+```
+
+**Значение `this` не зависит от того, как функция была создана, оно определяется исключительно в момент вызова.**
+
+## Значение this при вызове без контекста
+
+Если функция использует `this` -- это подразумевает работу с объектом. Но и прямой вызов `func()` технически возможен. 
+
+Как правило, такая ситуация возникает при ошибке в разработке.
+
+При этом `this` получает значение `window`, глобального объекта:
+
+```js
+//+ run
+function func() { 
+  alert(this); // выведет [object Window] или [object global]
+}
+
+func();
+```
+
+В современном стандарте языка это поведение изменено, вместо глобального объекта `this` будет `undefined`.
+
+```js
+//+ run
+function func() { 
+  "use strict";
+  alert(this); // выведет undefined (кроме IE<10)
+}
+
+func();
+```
+
+Это стоит иметь в виду для общего развития, но обычно если в функции используется `this`, то она, всё же, проектируется для вызова в контексте объекта.
+
+[warn header="`this` теряется при операциях с методом"]
+Ещё раз обратим внимание: контекст `this` никак не привязан к функции, даже если она создана в объявлении объекта.
+
+Чтобы `this` передался правильно, нужно вызвать функцию именно через точку (или квадратные скобки). Любой более хитрый вызов приведёт к потере контекста, например:
+
+```js
+//+ run
+var user = {
+  name: "Вася",
+  hi: function() { alert(this.name); },
+  bye: function() { alert("Пока"); }
+};
+
+user.hi(); // Вася (простой вызов работает)
+*!*
+// а теперь вызовем user.hi или user.bye в зависимости от имени
+(user.name == "Вася" ? user.hi : user.bye)(); // undefined
+*/!*
+```
+
+В последней строке примера метод получен в результате выполнения тернарного оператора и тут же вызван. При этом `this` теряется. 
+
+Иначе говоря, такой вызов эквивалентен двум строкам:
+
+```js
+var method = (user.name == "Вася" ? user.hi : user.bye);
+method(); // без this
+```
+
+[/warn]
+
+## Задачи
+
+
+
+
diff --git a/1-js/6-objects-more/2-constructor-new/1-two-functions-one-object/solution.md b/1-js/6-objects-more/2-constructor-new/1-two-functions-one-object/solution.md
new file mode 100644
index 00000000..2dcc843b
--- /dev/null
+++ b/1-js/6-objects-more/2-constructor-new/1-two-functions-one-object/solution.md
@@ -0,0 +1,19 @@
+Да, возможны.
+
+Они должны возвращать одинаковый объект. При этом если функция возвращает объект, то `this` не используется.
+
+Например, они могут вернуть один и тот же объект `obj`, определённый снаружи:
+
+```js
+//+ run
+var obj = {};
+
+function A() { return obj; }
+function B() { return obj; }
+
+var a = new A;
+var b = new B;
+
+alert( a == b ); // true
+```
+
diff --git a/1-js/6-objects-more/2-constructor-new/1-two-functions-one-object/task.md b/1-js/6-objects-more/2-constructor-new/1-two-functions-one-object/task.md
new file mode 100644
index 00000000..a70741db
--- /dev/null
+++ b/1-js/6-objects-more/2-constructor-new/1-two-functions-one-object/task.md
@@ -0,0 +1,17 @@
+# Две функции один объект
+
+[importance 2]
+
+Возможны ли такие функции `A` и `B` в примере ниже, что соответствующие объекты `a,b` равны (см. код ниже)?
+
+```js
+function A() { ... }
+function B() { ... }
+
+var a = new A;
+var b = new B;
+
+alert( a == b ); // true
+```
+
+Если да -- приведите пример кода с такими функциями. 
\ No newline at end of file
diff --git a/1-js/6-objects-more/2-constructor-new/2-calculator-constructor/_js.view/solution.js b/1-js/6-objects-more/2-constructor-new/2-calculator-constructor/_js.view/solution.js
new file mode 100644
index 00000000..6e40b871
--- /dev/null
+++ b/1-js/6-objects-more/2-constructor-new/2-calculator-constructor/_js.view/solution.js
@@ -0,0 +1,15 @@
+function Calculator() {
+
+  this.read = function() {
+    this.a = +prompt('a?', 0); 
+    this.b = +prompt('b?', 0);
+  };
+
+  this.sum = function() {
+    return this.a + this.b;
+  };
+
+  this.mul = function() {
+    return this.a * this.b;
+  };
+}
\ No newline at end of file
diff --git a/1-js/6-objects-more/2-constructor-new/2-calculator-constructor/_js.view/test.js b/1-js/6-objects-more/2-constructor-new/2-calculator-constructor/_js.view/test.js
new file mode 100644
index 00000000..74f1186e
--- /dev/null
+++ b/1-js/6-objects-more/2-constructor-new/2-calculator-constructor/_js.view/test.js
@@ -0,0 +1,25 @@
+sinon.stub(window, "prompt")
+
+prompt.onCall(0).returns("2");
+prompt.onCall(1).returns("3");
+
+describe("calculator", function() {
+  var calculator;
+  before(function() {
+    calculator = new Calculator();
+    calculator.read();
+  });
+
+  it("при вводе 2 и 3 сумма равна 5", function() {
+    assert.equal( calculator.sum(), 5 );
+  });
+
+  it("при вводе 2 и 3 произведение равно 6", function() {
+    assert.equal( calculator.mul(), 6 );
+  });
+
+});
+
+after(function() {
+  prompt.restore();
+});
\ No newline at end of file
diff --git a/1-js/6-objects-more/2-constructor-new/2-calculator-constructor/solution.md b/1-js/6-objects-more/2-constructor-new/2-calculator-constructor/solution.md
new file mode 100644
index 00000000..41051702
--- /dev/null
+++ b/1-js/6-objects-more/2-constructor-new/2-calculator-constructor/solution.md
@@ -0,0 +1,27 @@
+
+
+```js
+//+ run demo
+function Calculator() {
+
+  this.read = function() {
+    this.a = +prompt('a?', 0); 
+    this.b = +prompt('b?', 0);
+  };
+
+  this.sum = function() {
+    return this.a + this.b;
+  };
+
+  this.mul = function() {
+    return this.a * this.b;
+  };
+}
+
+var calculator = new Calculator();
+calculator.read();
+
+alert( "Сумма=" + calculator.sum() );
+alert( "Произведение=" + calculator.mul() );
+```
+
diff --git a/1-js/6-objects-more/2-constructor-new/2-calculator-constructor/task.md b/1-js/6-objects-more/2-constructor-new/2-calculator-constructor/task.md
new file mode 100644
index 00000000..bc7933a0
--- /dev/null
+++ b/1-js/6-objects-more/2-constructor-new/2-calculator-constructor/task.md
@@ -0,0 +1,22 @@
+# Создать Calculator при помощи конструктора
+
+[importance 5]
+
+Напишите *функцию-конструктор* `Calculator`, которая создает объект с двумя методами:
+<ul>
+<li>Метод `read()` запрашивает два значения при помощи `prompt` и запоминает их в свойствах объекта.</li>
+<li>Метод `sum()` возвращает сумму запомненных свойств.</li>
+<li>Метод `mul()` возвращает произведение запомненных свойств.</li>
+</ul>
+
+Пример использования:
+
+```js
+var calculator = new Calculator();
+calculator.read();
+
+alert( "Сумма=" + calculator.sum() );
+alert( "Произведение=" + calculator.mul() );
+```
+
+[demo /]
diff --git a/1-js/6-objects-more/2-constructor-new/3-accumulator/_js.view/solution.js b/1-js/6-objects-more/2-constructor-new/3-accumulator/_js.view/solution.js
new file mode 100644
index 00000000..425f7bdd
--- /dev/null
+++ b/1-js/6-objects-more/2-constructor-new/3-accumulator/_js.view/solution.js
@@ -0,0 +1,8 @@
+function Accumulator(startingValue) {
+  this.value = startingValue;
+
+  this.read = function() {
+    this.value += +prompt('Сколько добавлять будем?', 0);
+  };
+
+}
diff --git a/1-js/6-objects-more/2-constructor-new/3-accumulator/_js.view/test.js b/1-js/6-objects-more/2-constructor-new/3-accumulator/_js.view/test.js
new file mode 100644
index 00000000..1ab40633
--- /dev/null
+++ b/1-js/6-objects-more/2-constructor-new/3-accumulator/_js.view/test.js
@@ -0,0 +1,37 @@
+describe("Accumulator(1)", function() {
+  var accumulator;
+  before(function() {
+    accumulator = new Accumulator(1);
+  });
+
+  beforeEach(function() {
+    sinon.stub(window, "prompt")
+  });
+
+  afterEach(function() {
+    prompt.restore();
+  });
+
+  it("начальное значение 1", function() {
+    assert.equal( accumulator.value, 1 );
+  });
+
+  it("после ввода 0 значение 1", function() {
+    prompt.returns("0");
+    accumulator.read();
+    assert.equal( accumulator.value, 1 );
+  });
+
+  it("после ввода 1 значение 2", function() {
+    prompt.returns("1");
+    accumulator.read();
+    assert.equal( accumulator.value, 2 );
+  });
+
+  it("после ввода 2 значение 4", function() {
+    prompt.returns("2");
+    accumulator.read();
+    assert.equal( accumulator.value, 4 );
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/6-objects-more/2-constructor-new/3-accumulator/solution.md b/1-js/6-objects-more/2-constructor-new/3-accumulator/solution.md
new file mode 100644
index 00000000..974473fd
--- /dev/null
+++ b/1-js/6-objects-more/2-constructor-new/3-accumulator/solution.md
@@ -0,0 +1,19 @@
+
+
+```js
+//+ run
+function Accumulator(startingValue) {
+  this.value = startingValue;
+
+  this.read = function() {
+    this.value += +prompt('Сколько добавлять будем?', 0);
+  };
+
+}
+
+var accumulator = new Accumulator(1);
+accumulator.read();
+accumulator.read();
+alert( accumulator.value );
+```
+
diff --git a/1-js/6-objects-more/2-constructor-new/3-accumulator/task.md b/1-js/6-objects-more/2-constructor-new/3-accumulator/task.md
new file mode 100644
index 00000000..7852e561
--- /dev/null
+++ b/1-js/6-objects-more/2-constructor-new/3-accumulator/task.md
@@ -0,0 +1,24 @@
+# Создать Accumulator при помощи конструктора
+
+[importance 5]
+
+Напишите *функцию-конструктор* `Accumulator(startingValue)`. 
+Объекты, которые она создает, должны хранить текущую сумму и прибавлять к ней то, что вводит посетитель.
+
+Более формально, объект должен:
+<ul>
+<li>Хранить текущее значение в своём свойстве `value`. Начальное значение свойства `value` ставится конструктором равным `startingValue`.</li>
+<li>Метод `read()` вызывает `prompt`, принимает число и прибавляет его к свойству `value`.</li> 
+</ul>
+Таким образом, свойство `value` является текущей суммой всего, что ввел посетитель при вызовах метода `read()`, с учетом начального значения `startingValue`.
+
+Ниже вы можете посмотреть работу кода:
+
+```js
+var accumulator = new Accumulator(1); // начальное значение 1
+accumulator.read(); // прибавит ввод prompt к текущему значению
+accumulator.read(); // прибавит ввод prompt к текущему значению
+alert( accumulator.value ); // выведет текущее значение
+```
+
+[demo /]
diff --git a/1-js/6-objects-more/2-constructor-new/4-calculator-extendable/_js.view/solution.js b/1-js/6-objects-more/2-constructor-new/4-calculator-extendable/_js.view/solution.js
new file mode 100644
index 00000000..175c5704
--- /dev/null
+++ b/1-js/6-objects-more/2-constructor-new/4-calculator-extendable/_js.view/solution.js
@@ -0,0 +1,29 @@
+function Calculator() {
+
+  var methods = {
+    "-": function(a, b) {
+      return a - b;
+    },
+    "+": function(a, b) {
+      return a + b;
+    }
+  };
+
+  this.calculate = function(str) {
+
+    var split = str.split(' '),
+      a = +split[0],
+      op = split[1],
+      b = +split[2]
+
+    if(!methods[op] || isNaN(a) || isNaN(b)) {
+      return NaN;
+    }
+
+    return methods[op](+a, +b);
+  }
+
+  this.addMethod = function(name, func) {
+    methods[name] = func;
+  };
+}
diff --git a/1-js/6-objects-more/2-constructor-new/4-calculator-extendable/_js.view/test.js b/1-js/6-objects-more/2-constructor-new/4-calculator-extendable/_js.view/test.js
new file mode 100644
index 00000000..50a30d5c
--- /dev/null
+++ b/1-js/6-objects-more/2-constructor-new/4-calculator-extendable/_js.view/test.js
@@ -0,0 +1,26 @@
+var calculator;
+before(function() {
+  calculator = new Calculator;
+});
+
+it("calculate(12 + 34) = 46", function() {
+  assert.equal( calculator.calculate("12 + 34"), 46 );
+});
+
+it("calculate(34 - 12) = 22", function() {
+  assert.equal( calculator.calculate("34 - 12"), 22 );
+});
+
+it("добавили умножение: calculate(2 * 3) = 6", function() {
+  calculator.addMethod("*", function(a, b) {
+    return a * b;
+  });
+  assert.equal( calculator.calculate("2 * 3"), 6 );
+});
+
+it("добавили возведение в степень: calculate(2 ** 3) = 8", function() {
+  calculator.addMethod("**", function(a, b) {
+    return Math.pow(a, b);
+  });
+  assert.equal( calculator.calculate("2 ** 3"), 8 );
+});
diff --git a/1-js/6-objects-more/2-constructor-new/4-calculator-extendable/solution.md b/1-js/6-objects-more/2-constructor-new/4-calculator-extendable/solution.md
new file mode 100644
index 00000000..80b6a8a0
--- /dev/null
+++ b/1-js/6-objects-more/2-constructor-new/4-calculator-extendable/solution.md
@@ -0,0 +1,55 @@
+
+
+```js
+//+ run
+function Calculator() {
+
+  var methods = {
+    "-": function(a, b) {
+      return a - b;
+    },
+    "+": function(a, b) {
+      return a + b;
+    }
+  };
+
+  this.calculate = function(str) {
+
+    var split = str.split(' '),
+      a = +split[0],
+      op = split[1],
+      b = +split[2]
+
+    if(!methods[op] || isNaN(a) || isNaN(b)) {
+      return NaN;
+    }
+
+    return methods[op](+a, +b);
+  }
+
+  this.addMethod = function(name, func) {
+    methods[name] = func;
+  };
+}
+
+var calc = new Calculator;
+
+calc.addMethod("*", function(a, b) {
+  return a * b;
+});
+calc.addMethod("/", function(a, b) {
+  return a / b;
+});
+calc.addMethod("**", function(a, b) {
+  return Math.pow(a, b);
+});
+
+var result = calc.calculate("2 ** 3");
+alert(result); // 8
+```
+
+<ul>
+<li>Обратите внимание на хранение методов. Они просто добавляются к внутреннему объекту.</li>
+<li>Все проверки и преобразование к числу производятся в методе `calculate`. В дальнейшем он может быть расширен для поддержки более сложных выражений.</li>
+</ul>
+
diff --git a/1-js/6-objects-more/2-constructor-new/4-calculator-extendable/task.md b/1-js/6-objects-more/2-constructor-new/4-calculator-extendable/task.md
new file mode 100644
index 00000000..89e61cc9
--- /dev/null
+++ b/1-js/6-objects-more/2-constructor-new/4-calculator-extendable/task.md
@@ -0,0 +1,41 @@
+# Создайте калькулятор
+
+[importance 5]
+
+Напишите конструктор `Calculator`, который создаёт расширяемые объекты-калькуляторы.
+
+Эта задача состоит из двух частей, которые можно решать одна за другой.
+<ol>
+<li>Первый шаг задачи: вызов `calculate(str)` принимает строку, например "1 + 2", с жёстко заданным форматом "ЧИСЛО операция ЧИСЛО" (по одному пробелу вокруг операции), и возвращает результат. Понимает плюс `+` и минус `-`.
+
+Пример использования:
+
+```js
+var calc = new Calculator;
+
+alert(calc.calculate("3 + 7")); // 10
+```
+
+</li>
+<li>Второй шаг -- добавить калькулятору метод `addMethod(name, func)`, который учит калькулятор новой операции. Он получает имя операции `name` и функцию от двух аргументов `func(a,b)`, которая должна её реализовывать.
+
+Например, добавим операции умножить `*`, поделить `/` и возвести в степень `**`:
+
+```js
+var powerCalc = new Calculator;
+powerCalc.addMethod("*", function(a, b) { return a * b; });
+powerCalc.addMethod("/", function(a, b) { return a / b; });
+powerCalc.addMethod("**", function(a, b) { return Math.pow(a, b); });
+
+var result = powerCalc.calculate("2 ** 3");
+alert(result); // 8
+```
+
+</li>
+</ol>
+
+<ul>
+<li>Поддержка скобок и сложных математических выражений в этой задаче не требуется.</li>
+<li>Числа и операции могут состоять из нескольких символов. Между ними ровно один пробел.</li>
+<li>Предусмотрите обработку ошибок. Какая она должна быть - решите сами.</li>
+</ul>
\ No newline at end of file
diff --git a/1-js/6-objects-more/2-constructor-new/article.md b/1-js/6-objects-more/2-constructor-new/article.md
new file mode 100644
index 00000000..ab1922d4
--- /dev/null
+++ b/1-js/6-objects-more/2-constructor-new/article.md
@@ -0,0 +1,185 @@
+# Создание объектов через "new"
+
+Обычный синтаксис `{...}` позволяет создать один объект. Но зачастую нужно создать много однотипных объектов.
+
+Для этого используют функции, запуская их при помощи специального оператора `new`.
+[cut]
+## Конструктор
+
+Конструктором становится любая функция, вызванная через `new`.
+
+Например:
+
+```js
+function Animal(name) {
+  this.name = name;
+  this.canWalk = true;  
+}
+
+*!*
+var animal = new Animal("ёжик");
+*/!*
+```
+
+Технически, никаких ограничений нет -- любую функцию можно вызвать при помощи `new`. Но при этом она работает несколько иным образом, чем обычно, поэтому функции, предназначенные к вызову через `new`, называют с большой буквы.
+
+**Алгоритм работы оператора `new`:**
+
+<ol>
+<li>Автоматически создается новый пустой объект.</li>
+<li>Ключевое слово `this` получает ссылку на этот объект.</li>
+<li>Функция выполняется. Как правило, она модифицирует `this`, добавляет методы, свойства.</li>
+<li>Возвращается `this`.</li>
+</ol>
+
+
+В результате вызова `new Animal("ёжик");` получаем объект:
+
+```js
+animal = {
+  name: "ёжик",
+  canWalk: true
+}
+```
+
+Иными словами, при вызове `new Animal` происходит что-то в таком духе (комментарии -- это то, что делает интерпретатор):
+
+```js
+function Animal(name) {
+*!*
+  // this = {}
+*/!*
+  this.name = name;
+  this.canWalk = true;  
+*!*
+  // return this
+*/!*
+}
+```
+
+## Правила обработки return
+
+Как правило, конструкторы ничего не возвращают. Их задача -- записать всё, что нужно, в `this`, который автоматически станет результатом.
+
+Но если явный вызов `return` всё же есть, то применяется простое правило:
+<ul>
+<li>При вызове `return` с объектом, будет возвращён он, а не `this`.</li>
+<li>При вызове `return` с примитивным значением, оно будет отброшено.</li>
+</ul>
+
+Иными словами, вызов `return` с объектом вернёт объект, а с чем угодно, кроме объекта -- прекратит выполнение функции и возвратит `this`.
+
+Например, возврат объекта:
+
+```js
+//+ run
+function BigAnimal() {
+
+  this.name = "Мышь";
+
+  return { name: "Годзилла" };  // <-- возвратим объект
+}
+
+alert( new BigAnimal().name );  // Годзилла, получили объект вместо this
+```
+
+А вот пример с возвратом строки:
+
+```js
+//+ run
+function BigAnimal() {
+
+  this.name = "Мышь";
+
+  return "Годзилла"; // <-- возвратим примитив
+}
+
+alert( new BigAnimal().name );  // Мышь, получили this (а Годзилла пропал)
+```
+
+Эта особенность работы `new` прописана в стандарте, знать о ней полезно, но используется она весьма редко.
+
+[smart]
+Кстати, при вызове `new` без аргументов скобки можно не ставить:
+
+```js
+var animal = new BigAnimal; // <-- без скобок
+// то же самое что 
+var animal = new BigAnimal();
+```
+
+[/smart]
+
+## Создание методов в конструкторе   
+
+Использование функций для создания объекта дает большую гибкость. Можно передавать конструктору параметры,  определяющие как его создавать.
+
+Например, `new User(name)` создает объект с заданным значением свойства `name` и методом `sayHi`:
+
+```js
+//+ run
+function User(name) {
+  this.name = name;
+ 
+  this.sayHi = function() {
+    alert("Моё имя: " + this.name);
+  };
+}
+
+*!*
+var ivan = new User("Иван");
+
+ivan.sayHi(); // Моё имя: Иван
+*/!*
+
+/* 
+ivan = {
+   name: "Иван", 
+   sayHi: функция
+} 
+*/
+```
+
+## Локальные переменные   
+
+В функции-конструкторе бывает удобно объявить вспомогательные локальные переменные и вложенные функции, которые будут видны только внутри:
+
+```js
+//+ run
+function User(firstName, lastName) {
+*!*
+  // вспомогательная переменная
+  var phrase = "Привет";
+ 
+  //  вспомогательная вложенная функция
+  function getFullName() { 
+    return firstName + " " + lastName;
+  }
+*/!*
+ 
+  this.sayHi = function() {
+    alert(phrase + ", " + getFullName()); // использование
+  };
+}
+
+var vasya = new User("Вася", "Петров");
+vasya.sayHi(); // Вася Петров
+```
+
+Мы уже говорили об этом подходе ранее, в главе [](/closures-usage). 
+
+Те функции и данные, которые должны быть доступны для внешнего кода, мы пишем в `this` -- и к ним можно будет обращаться, как например `vasya.sayHi()`, а вспомогательные, которые нужны только внутри самого объекта, сохраняем в локальной области видимости.
+
+## Итого
+
+Объекты могут быть созданы при помощи функций-конструкторов:
+
+<ul>
+<li>Любая функция может быть вызвана с `new`, при этом она получает новый пустой объект в качестве `this`, в который она добавляет свойства. Если функция не решит возвратить свой объект, то её результатом будет `this`.</li>
+<li>Функции, которые предназначены для создания объектов, называются *конструкторами*. Их названия пишут с большой буквы, чтобы отличать от обычных.</li>
+</ul>
+
+
+
+
+
diff --git a/1-js/6-objects-more/3-static-properties-and-methods/1-objects-counter/_js.view/solution.js b/1-js/6-objects-more/3-static-properties-and-methods/1-objects-counter/_js.view/solution.js
new file mode 100644
index 00000000..f92594e2
--- /dev/null
+++ b/1-js/6-objects-more/3-static-properties-and-methods/1-objects-counter/_js.view/solution.js
@@ -0,0 +1,11 @@
+function Article() {  
+  this.created = new Date;
+
+  Article.count++; // увеличиваем счетчик при каждом вызове
+  Article.last = this.created; // и запоминаем дату
+}
+Article.count = 0; // начальное значение 
+
+Article.showStats = function() {
+  alert('Всего: ' + this.count + ', Последняя: ' + this.last);
+};
diff --git a/1-js/6-objects-more/3-static-properties-and-methods/1-objects-counter/_js.view/test.js b/1-js/6-objects-more/3-static-properties-and-methods/1-objects-counter/_js.view/test.js
new file mode 100644
index 00000000..04f7d30b
--- /dev/null
+++ b/1-js/6-objects-more/3-static-properties-and-methods/1-objects-counter/_js.view/test.js
@@ -0,0 +1,28 @@
+describe("Article.showStats", function() {
+  before(function() {
+    sinon.stub(window, "alert");
+    this.clock = sinon.useFakeTimers();
+  });
+  
+  after(function() {
+    window.alert.restore();
+    this.clock.restore();
+  });
+
+  it("Выводит число статей и дату создания последней", function() {
+    new Article();
+    this.clock.tick(100);
+    new Article();
+    Article.showStats(); 
+    
+    assert( alert.calledWith('Всего: 2, Последняя: ' + new Date() ) );
+  });
+
+  it("и ещё одна статья...", function() {
+    this.clock.tick(100);
+    new Article();
+    Article.showStats();
+
+    assert( alert.calledWith('Всего: 3, Последняя: ' + new Date() ) );
+  });
+});
\ No newline at end of file
diff --git a/1-js/6-objects-more/3-static-properties-and-methods/1-objects-counter/solution.md b/1-js/6-objects-more/3-static-properties-and-methods/1-objects-counter/solution.md
new file mode 100644
index 00000000..ad088c0b
--- /dev/null
+++ b/1-js/6-objects-more/3-static-properties-and-methods/1-objects-counter/solution.md
@@ -0,0 +1,29 @@
+Решение (как вариант):
+
+```js
+//+ run
+function Article() {  
+  this.created = new Date;
+
+*!*
+  Article.count++; // увеличиваем счетчик при каждом вызове
+  Article.last = this.created; // и запоминаем дату
+*/!*
+}
+Article.count = 0; // начальное значение 
+// (нельзя оставить undefined, т.к. Article.count++ будет NaN)
+
+Article.showStats = function() {
+  alert('Всего: ' + this.count + ', Последняя: ' + this.last);
+};
+
+new Article();
+new Article();
+
+Article.showStats(); // Всего: 2, Последняя: (дата)
+
+new Article();
+
+Article.showStats(); // Всего: 3, Последняя: (дата)
+```
+
diff --git a/1-js/6-objects-more/3-static-properties-and-methods/1-objects-counter/task.md b/1-js/6-objects-more/3-static-properties-and-methods/1-objects-counter/task.md
new file mode 100644
index 00000000..513ed072
--- /dev/null
+++ b/1-js/6-objects-more/3-static-properties-and-methods/1-objects-counter/task.md
@@ -0,0 +1,33 @@
+# Счетчик объектов
+
+[importance 5]
+
+Добавить в конструктор `Article`:
+<ul>
+<li>Подсчёт общего количества созданных объектов.</li>
+<li>Запоминание даты последнего созданного объекта.</li>
+</ul>
+Используйте для этого статические свойства.
+
+Пусть вызов `Article.showStats()` выводит то и другое.
+
+Использование:
+
+```js
+function Article() {
+  this.created = new Date();
+*!*
+  // ... ваш код ...
+*/!*
+}
+
+new Article();
+new Article();
+
+Article.showStats(); // Всего: 2, Последняя: (дата)
+
+new Article();
+
+Article.showStats(); // Всего: 3, Последняя: (дата)
+```
+
diff --git a/1-js/6-objects-more/3-static-properties-and-methods/article.md b/1-js/6-objects-more/3-static-properties-and-methods/article.md
new file mode 100644
index 00000000..decd48c6
--- /dev/null
+++ b/1-js/6-objects-more/3-static-properties-and-methods/article.md
@@ -0,0 +1,245 @@
+# Статические и фабричные методы
+
+Методы и свойства, которые не привязаны к конкретному экземпляру объекта, называют "статическими". Их записывают прямо в саму функцию-конструктор.
+
+[cut]
+
+## Статические свойства 
+
+В коде ниже используются статические свойства `Article.count` и `Article.DEFAULT_FORMAT`:
+
+```js
+function Article() {
+  Article.count++;
+}
+
+Article.count = 0; // статическое свойство-переменная
+Article.DEFAULT_FORMAT = "html"; // статическое свойство-константа
+```
+
+Они хранят данные, специфичные не для одного объекта, а для всех статей целиком. 
+
+Как правило, это чаще константы, такие как формат "по умолчанию" `Article.DEFAULT_FORMAT`.
+
+## Статические методы
+
+С примерами статических методов мы уже знакомы: это встроенные методы [String.fromCharCode](http://javascript.ru/String.fromCharCode), [Date.parse](http://javascript.ru/Date.parse).
+
+Создадим для `Article` статический метод `Article.showCount()`:
+
+```js
+//+ run
+function Article() {
+  Article.count++;
+
+  //...
+}
+Article.count = 0;
+
+Article.showCount = function() {
+*!*
+  alert(this.count);  // (1)
+*/!*
+}
+
+// использование
+new Article();
+new Article();
+Article.showCount(); // (2)
+```
+
+Здесь `Article.count` -- статическое свойство, а `Article.showCount` -- статический метод.
+
+**Обратите внимание на контекст `this`. Несмотря на то, что переменная и метод -- статические, он всё ещё полезен. В строке `(1)` он равен `Article`!**
+
+## Пример: сравнение объектов
+
+Ещё один хороший способ применения -- сравнение объектов.
+
+Например, у нас есть объект `Journal` для журналов. Журналы можно сравнивать -- по толщине, по весу, по другим параметрам. 
+
+Объявим "стандартную" функцию сравнения, которая будет сравнивать по дате издания. Эта функция сравнения, естественно, не привязана к конкретному журналу, но относится к журналам вообще.
+
+Поэтому зададим её как статический метод `Journal.compare`:
+
+```js
+function Journal(date) {
+  this.date = date;
+  // ...
+}
+
+// возвращает значение, большее 0, если A больше B, иначе меньшее 0
+Journal.compare = function(journalA, journalB) {
+  return journalA.date - journalB.date;
+};
+```
+
+В примере ниже эта функция используется для поиска самого раннего журнала из массива:
+
+```js
+//+ run
+function Journal(date) {
+  this.date = date;
+
+  this.formatDate = function(date) {
+    return date.getDate() + '.' + (date.getMonth()+1) + '.' + date.getFullYear();
+  };
+
+  this.getTitle = function() { 
+    return "Выпуск от " + this.formatDate(this.date);
+  };
+
+}
+
+*!*
+Journal.compare = function(journalA, journalB) {
+  return journalA.date - journalB.date;
+};
+*/!*
+
+// использование:
+var journals = [
+  new Journal(new Date(2012,1,1)), 
+  new Journal(new Date(2012,0,1)),
+  new Journal(new Date(2011,11,1)) 
+];
+
+function findMin(journals) {
+  var min = 0;
+  for(var i=0; i<journals.length; i++) {
+*!*
+    // используем статический метод
+    if ( Journal.compare(journals[min], journals[i]) > 0 ) min = i;
+*/!*
+  }
+  return journals[min];
+}
+
+alert( findMin(journals).getTitle() );
+```
+
+**Статический метод также можно использовать для функций, которые вообще не требуют наличия объекта.**
+
+Например, метод `formatDate(date)` можно сделать статическим. Он будет форматировать дату "как это принято в журналах", при этом его можно использовать в любом месте кода, не обязательно создавать журнал.
+
+Например:
+
+```js
+//+ run
+function Journal() { /*...*/ }
+
+Journal.formatDate = function(date) {
+  return date.getDate() + '.' + (date.getMonth()+1) + '.' + date.getFullYear();
+}
+
+// ни одного объекта Journal нет, просто форматируем дату
+alert( *!*Journal.formatDate(new Date)*/!* );
+```
+
+## Фабричные методы
+
+Рассмотрим ситуацию, когда объект нужно создавать различными способами. Например, это реализовано во встроенном объекте [Date](/datetime). Он по-разному обрабатывает аргументы разных типов:
+
+<ul>
+<li>`new Date()` -- создаёт объект с текущей датой,</li>
+<li>`new Date(milliseconds)` -- создаёт дату по количеству миллисекунд `milliseconds`,</li>
+<li>`new Date(year, month, day ...)` -- создаёт дату по компонентам год, месяц, день...</li>
+<li>`new Date(datestring)` -- читает дату из строки `datestring`</li>
+</ul>
+
+**"Фабричный статический метод" -- удобная альтернатива такому конструктору. Так называется статический метод, который служит для создания новых объектов (поэтому и называется "фабричным").**
+
+Пример встроенного фабричного метода -- [String.fromCharCode(code)](http://javascript.ru/String.fromCharCode). Этот метод создает строку из кода символа:
+
+```js
+//+ run
+var str = String.fromCharCode(65);
+alert(str); // 'A'
+```
+
+Но строки -- слишком простой пример, посмотрим что-нибудь посложнее.
+
+Допустим, нам нужно создавать объекты `User`: анонимные `new User()` и с данными `new User({name: 'Вася', age: 25})`.
+
+Можно, конечно, создать полиморфную функцию-конструктор `User`:
+
+```js
+//+ run
+function User(userData) { 
+  if (userData) { // если указаны данные -- одна ветка if
+    this.name = userData.name;
+    this.age = userData.age;
+  } else {   // если не указаны -- другая
+    this.name = 'Аноним';
+  }
+
+  this.sayHi = function() { alert(this.name) };
+  // ...
+}
+
+// Использование
+
+var guest = new User();
+guest.sayHi(); // Аноним
+
+var knownUser = new User({name: 'Вася', age: 25});
+knownUser.sayHi(); // Вася
+```
+
+Подход с использованием фабричных методов был бы другим. Вместо разбора параметров в конструкторе -- делаем два метода: `User.createAnonymous` и `User.createFromData`. 
+
+Код:
+
+```js
+//+ run
+function User() { 
+  this.sayHi = function() { alert(this.name) };
+}
+
+User.createAnonymous = function() {
+  var user = new User;
+  user.name = 'Аноним';
+  return user;
+}
+
+User.createFromData = function(userData) {
+  var user = new User;
+  user.name = userData.name;
+  user.age = userData.age;
+  return user;
+}
+
+// Использование
+
+*!*
+var guest = User.createAnonymous();
+guest.sayHi(); // Аноним
+
+var knownUser = User.createFromData({name: 'Вася', age: 25});
+knownUser.sayHi(); // Вася
+*/!*
+```
+
+Преимущества использования фабричных методов:
+
+[compare]
++Лучшая читаемость кода. Как конструктора -- вместо одной большой функции несколько маленьких, так и вызывающего кода -- явно видно, что именно создаётся.
++Лучший контроль ошибок, т.к. если в `createFromData` ничего не передали, то будет ошибка, а полиморфный конструктор создал бы анонимного посетителя.
++Удобная расширяемость. Например, нужно добавить создание администратора, без аргументов. Фабричный метод сделать легко: `User.createAdmin = function() { ... }`. А для  полиморфного конструктора вызов без аргумента создаст анонима, так что нужно добавить параметр -- "тип посетителя" и усложнить этим код.
+[/compare]
+
+**Поэтому полиморфные конструкторы лучше использовать там, где нужна именно полиморфность**, т.е. когда непонятно, какого типа аргумент передадут, и хочется в одном конструкторе охватить все варианты. 
+
+А в остальных случаях отличная альтернатива -- фабричные методы.
+
+## Итого
+
+Статические свойства и методы объекта удобно применять в следующих случаях:
+
+<ul>
+<li>Общие действия и подсчёты, имеющие отношения ко всем объектам данного типа. В примерах выше это подсчёт количества.</li>
+<li>Методы, не привязанные к конкретному объекту, например сравнение.</li>
+<li>Вспомогательные методы, которые полезны вне объекта, например для форматирования даты.</li>
+<li>Фабричные методы.</li>
+</ul>
+
diff --git a/1-js/6-objects-more/4-call-apply/1-rewrite-sum-arguments/solution.md b/1-js/6-objects-more/4-call-apply/1-rewrite-sum-arguments/solution.md
new file mode 100644
index 00000000..ba57d3fa
--- /dev/null
+++ b/1-js/6-objects-more/4-call-apply/1-rewrite-sum-arguments/solution.md
@@ -0,0 +1,31 @@
+# Первый вариант
+
+```js
+//+ run
+function sumArgs() {
+  // скопируем reduce из массива
+  arguments.reduce = [].reduce;
+  return arguments.reduce(function(a, b) { 
+    return a + b;
+  });
+}
+
+alert( sumArgs(4,5,6) ); // 15
+```
+
+# Второй вариант
+
+Метод `call` здесь вполне подойдёт, так как требуется вызвать `reduce` в контексте `arguments` с одним аргументом.
+
+```js
+//+ run
+function sumArgs() {
+  // запустим reduce из массива напрямую
+  return [].reduce.call(arguments, function(a, b) { 
+    return a + b; 
+  });
+}
+
+alert( sumArgs(4,5,6) ); // 15
+```
+
diff --git a/1-js/6-objects-more/4-call-apply/1-rewrite-sum-arguments/task.md b/1-js/6-objects-more/4-call-apply/1-rewrite-sum-arguments/task.md
new file mode 100644
index 00000000..412f68c9
--- /dev/null
+++ b/1-js/6-objects-more/4-call-apply/1-rewrite-sum-arguments/task.md
@@ -0,0 +1,28 @@
+# Перепишите суммирование аргументов
+
+[importance 5]
+
+Есть функция `sum`, которая суммирует все элементы массива:
+
+```js
+//+ run
+function sum(arr) {
+  return arr.reduce(function(a, b) { return a + b; });
+}
+
+alert( sum([1,2,3]) ); // 6 (=1+2+3)
+```
+
+Создайте аналогичную функцию `sumArgs()`, которая будет суммировать все свои аргументы:
+
+```js
+function sumArgs() {
+  /* ваш код */
+}
+
+alert( sumArgs(1,2,3) ); // 6, аргументы переданы через запятую, без массива
+```
+
+Для решения примените метод `reduce` к `arguments`, используя `call`, `apply` или одалживание метода.
+
+P.S. Функция `sum` вам не понадобится, она приведена в качестве примера использования `reduce` для похожей задачи.
\ No newline at end of file
diff --git a/1-js/6-objects-more/4-call-apply/2-apply-function-skip-first-argument/_js.view/solution.js b/1-js/6-objects-more/4-call-apply/2-apply-function-skip-first-argument/_js.view/solution.js
new file mode 100644
index 00000000..41cf927e
--- /dev/null
+++ b/1-js/6-objects-more/4-call-apply/2-apply-function-skip-first-argument/_js.view/solution.js
@@ -0,0 +1,3 @@
+function applyAll(func) {
+  return func.apply(this, [].slice.call(arguments, 1) );
+}
\ No newline at end of file
diff --git a/1-js/6-objects-more/4-call-apply/2-apply-function-skip-first-argument/_js.view/test.js b/1-js/6-objects-more/4-call-apply/2-apply-function-skip-first-argument/_js.view/test.js
new file mode 100644
index 00000000..7de18f29
--- /dev/null
+++ b/1-js/6-objects-more/4-call-apply/2-apply-function-skip-first-argument/_js.view/test.js
@@ -0,0 +1,15 @@
+describe("applyAll", function() {
+
+  it("применяет функцию ко всем аргументам, начиная со 2го", function() {
+    var min = applyAll(Math.min, 1, 2, 3);
+    assert.equal( min, 1 );
+  });
+
+  it("при отсутствии аргументов просто вызывает функцию", function() {
+    var spy = sinon.spy();
+    applyAll(spy);
+    assert( spy.calledOnce );
+    assert.equal( spy.firstCall.args.length, 0 );
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/6-objects-more/4-call-apply/2-apply-function-skip-first-argument/solution.md b/1-js/6-objects-more/4-call-apply/2-apply-function-skip-first-argument/solution.md
new file mode 100644
index 00000000..32d6e1c7
--- /dev/null
+++ b/1-js/6-objects-more/4-call-apply/2-apply-function-skip-first-argument/solution.md
@@ -0,0 +1,23 @@
+
+
+```js
+//+ run
+function sum() {
+  return [].reduce.call(arguments, function(a, b) { return a + b; });
+}
+function mul() {
+  return [].reduce.call(arguments, function(a, b) { return a * b; });
+}
+
+*!*
+function applyAll(func) {
+  return func.apply(this, [].slice.call(arguments, 1) );
+}
+*/!*
+
+alert( applyAll(sum, 1, 2, 3) ); // 6
+alert( applyAll(mul, 2, 3, 4) ); // 24
+alert( applyAll(Math.max, 2, -2, 3) ); // 3
+alert( applyAll(Math.min, 2, -2, 3) ); // -2
+```
+
diff --git a/1-js/6-objects-more/4-call-apply/2-apply-function-skip-first-argument/task.md b/1-js/6-objects-more/4-call-apply/2-apply-function-skip-first-argument/task.md
new file mode 100644
index 00000000..d7f13e9a
--- /dev/null
+++ b/1-js/6-objects-more/4-call-apply/2-apply-function-skip-first-argument/task.md
@@ -0,0 +1,35 @@
+# Примените функцию к аргументам
+
+[importance 5]
+
+Напишите функцию `applyAll(func, arg1, arg2...)`, которая получает функцию `func` и произвольное количество аргументов. 
+
+Она должна вызвать `func(arg1, arg2...)`, то есть передать в `func` все аргументы, начиная со второго, и возвратить результат. 
+
+Например:
+
+```js
+// Применить Math.max к аргументам 2, -2, 3
+alert( applyAll(Math.max, 2, -2, 3) ); // 3
+
+// Применить Math.min к аргументам 2, -2, 3
+alert( applyAll(Math.min, 2, -2, 3) ); // -2
+```
+
+Область применения `applyAll`, конечно, шире, можно вызывать её и со своими функциями:
+
+```js
+//+ run
+function sum() { // суммирует аргументы: sum(1,2,3) = 6
+  return [].reduce.call(arguments, function(a, b) { return a + b; });
+}
+function mul() { // перемножает аргументы: mul(2,3,4) = 24
+  return [].reduce.call(arguments, function(a, b) { return a * b; });
+}
+
+*!*
+alert( applyAll(sum, 1, 2, 3) ); // -> sum(1, 2, 3) = 6
+alert( applyAll(mul, 2, 3, 4) ); // -> mul(2, 3, 4) = 24
+*/!*
+```
+
diff --git a/1-js/6-objects-more/4-call-apply/article.md b/1-js/6-objects-more/4-call-apply/article.md
new file mode 100644
index 00000000..8308ec8d
--- /dev/null
+++ b/1-js/6-objects-more/4-call-apply/article.md
@@ -0,0 +1,312 @@
+# Явное указание this: "call", "apply"
+
+Итак, мы знаем, что в `this` -- это текущий объект при вызове "через точку" и новый объект при конструировании через `new`.
+
+В этой главе наша цель получить окончательное и полное понимание `this` в JavaScript. Для этого не хватает всего одного элемента: способа явно указать `this` при помощи методов `call` и `apply`.
+
+[cut]
+
+## Метод call   
+
+Синтаксис метода `call`:
+
+```js
+func.call(context, arg1, arg2,...)
+```
+
+При этом вызывается функция `func`, первый аргумент `call` становится её `this`, а остальные передаются "как есть".
+
+**Вызов `func.call(context, a, b...)` -- то же, что обычный вызов  `func(a, b...)`, но с явно указанным `this(=context)`.**
+
+Например, у нас есть функция `showFullName`, которая  работает с `this`:
+
+```js
+function showFullName() { 
+  alert( this.firstName + " " + this.lastName );
+}
+```
+
+**Обратите внимание, JavaScript позволяет использовать `this` везде. Любая функция может в своём коде упомянуть `this`, каким будет это значение -- выяснится в момент запуска.**
+
+Вызов `showFullName.call(user)` запустит функцию, установив `this = user`, вот так:
+
+```js
+//+ run
+function showFullName() { 
+  alert( this.firstName + " " + this.lastName );
+}
+
+var user = { 
+  firstName: "Василий",
+  lastName: "Петров"
+};
+
+*!*
+// функция вызовется с this=user
+showFullName.call(user)  // "Василий Петров"
+*/!*
+```
+
+После контекста в `call` можно передать аргументы для функции. Вот пример с более сложным вариантом `showFullName`, который конструирует ответ из указанных свойств объекта:
+
+```js
+//+ run
+var user = { 
+  firstName: "Василий",
+  surname: "Петров",
+  patronym: "Иванович"
+};
+
+function showFullName(firstPart, lastPart) { 
+  alert( this[firstPart] + " " + this[lastPart] );
+}
+
+*!*
+// f.call(контекст, аргумент1, аргумент2, ...)
+showFullName.call(user, 'firstName', 'surname')  // "Василий Петров"
+showFullName.call(user, 'firstName', 'patronym')  // "Василий Иванович"
+*/!*
+```
+
+## "Одалживание метода"
+
+При помощи `call` можно легко взять метод одного объекта, в том числе встроенного, и вызвать в контексте другого. 
+
+Это называется "одалживание метода" (на англ. *method borrowing*).
+
+**Используем эту технику для упрощения манипуляций с `arguments`.**
+
+Как мы знаем, `arguments` не массив, а обычный объект, поэтому таких полезных методов как `push`, `pop`, `join` и других у него нет. Но иногда так хочется, чтобы были...
+
+Нет ничего проще! Давайте скопируем метод `join` из обычного массива:
+
+```js
+//+ run
+function printArgs() {
+  arguments.join = [].join; // одолжили метод (1)
+
+  var argStr = arguments.join(':');  // (2)
+
+  alert(argStr);  // сработает и выведет 1:2:3
+}
+
+printArgs(1, 2, 3);
+```
+
+<ol>
+<li>В строке `(1)` объявлен пустой массив `[]` и скопирован его метод `[].join`. Обратим внимание, мы не вызываем его, а просто копируем. Функция, в том числе встроенная -- обычное значение, мы можем скопировать любое свойство любого объекта, и `[].join` здесь не исключение. </li>
+<li>В строке `(2)` запустили `join` в контексте `arguments`, как будто он всегда там был.</li>
+
+[smart header="Почему вызов сработает?"]
+
+Здесь метод <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/join">join</a> массива скопирован и вызван в контексте `arguments`. Не произойдёт ли что-то плохое от того, что `arguments` -- не массив? Почему он, вообще, сработал?
+
+Ответ на эти вопросы простой. В соответствии [со спецификацией](http://es5.github.com/x15.4.html#x15.4.4.5), внутри `join` реализован примерно так:
+
+```js
+function join(separator) {
+  if (!this.length) return '';
+
+  var str = this[0]; 
+
+  for (var i = 1; i<this.length; i++) {
+    str += separator + this[i]; 
+  }
+  
+  return str;
+}
+```
+
+Как видно, используется `this`, числовые индексы и свойство `length`. Если эти свойства есть, то все в порядке. А больше ничего и не нужно. 
+
+В качестве `this` подойдёт даже обычный объект:
+
+```js
+//+ run
+var obj = {  // обычный объект с числовыми индексами и length
+  0: "А", 
+  1: "Б", 
+  2: "В",
+  length: 3
+};
+
+*!*
+obj.join = [].join;
+alert( obj.join(';') ); // "A;Б;В"
+*/!*
+```
+
+[/smart]
+
+**...Однако, копирование метода из одного объекта в другой не всегда приемлемо!**
+
+Представим на минуту, что вместо `arguments` у нас -- произвольный объект. У него тоже есть числовые индексы, `length` и мы хотим вызвать в его контексте метод `[].join`. То есть, ситуация похожа на `arguments`, но (!) вполне возможно, что у объекта есть *свой* метод `join`. 
+
+Поэтому копировать `[].join`, как сделано выше, нельзя: если он перезапишет собственный `join` объекта, то будет страшный бардак и путаница.
+
+**Безопасно вызвать метод нам поможет `call`:**
+
+```js
+//+ run
+function printArgs() {
+  var join = [].join; // скопируем ссылку на функцию в переменную
+
+*!*
+  // вызовем join с this=arguments,
+  // этот вызов эквивалентен arguments.join(':') из примера выше
+  var argStr = join.call(arguments, ':'); 
+*/!*
+
+  alert(argStr);  // сработает и выведет 1:2:3
+}
+
+printArgs(1, 2, 3);
+```
+
+Мы вызвали метод без копирования. Чисто, безопасно. 
+
+## Ещё пример: [].slice.call(arguments)
+
+В JavaScript есть очень простой способ сделать из `arguments` настоящий массив. Для этого возьмём метод массива: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/slice">slice</a>. 
+
+По стандарту вызов `arr.slice(start, end)` создаёт новый массив и копирует в него элементы массива `arr` от `start` до `end`. А если `start` и `end` не указаны, то копирует весь массив. 
+
+Вызовем его в контексте `arguments`:
+
+```js
+//+ run
+function printArgs() {
+  // вызов arr.slice() скопирует все элементы из this в новый массив
+*!*
+  var args = [].slice.call(arguments);
+*/!*
+  alert( args.join(', ') ); // args - полноценный массив из аргументов
+}
+
+printArgs('Привет', 'мой', 'мир'); // Привет, мой, мир
+```
+
+Как и в случае с `join`, такой вызов технически возможен потому, что `slice` для работы требует только нумерованные свойства и `length`. Всё это в `arguments` есть.
+
+## Метод apply   
+
+Если нам неизвестно, с каким количеством аргументов понадобится вызвать функцию, можно использовать более мощный метод: `apply`.
+
+**Вызов функции при помощи `func.apply` работает аналогично `func.call`, но принимает массив аргументов вместо списка.**
+
+```js
+func.call(context, arg1, arg2)
+// идентичен вызову
+func.apply(context, [arg1, arg2]);
+```
+
+В частности, эти две строчки cработают одинаково:
+
+```js
+showFullName.call(user, 'firstName', 'surname'); 
+
+showFullName.apply(user, ['firstName', 'surname']);
+```
+
+Преимущество `apply` перед `call` отчётливо видно в следующем примере, когда мы формируем массив аргументов динамически:
+
+```js
+//+ run
+var arr = [];
+arr.push(1);
+arr.push(5);
+arr.push(2);
+
+// получить максимум из элементов arr
+alert( Math.max.apply(null, arr) ); // 5
+```
+
+Обратим внимание, в примере выше вызывается метод `Math.max`. Его стандартное применение -- это выбор максимального аргумента из переданных, которых может быть сколько угодно:
+
+```js
+//+ run
+alert( Math.max(1, 5, 2) ); // 5
+alert( Math.max(1, 5, 2, 8) ); // 8
+```
+
+В примере выше мы передали аргументы через массив -- второй параметр `apply`... Но вы, наверное, заметили небольшую странность? В качестве контекста `this` был передан `null`. 
+
+Строго говоря, полным эквивалентом вызову `Math.max(1,2,3)` был бы вызов `Math.max.apply(Math, [1,2,3])`. В обоих этих вызовах контекстом будет объект `Math`.
+
+Но в данном случае в качестве контекста можно передавать что угодно, поскольку в своей внутренней реализации метод `Math.max`не использует `this`. Действительно, зачем `this`, если нужно всего лишь выбрать максимальный из аргументов? 
+
+**Вот так, при помощи `apply` мы получили короткий и элегантный способ вычислить максимальное значение в массиве!**
+
+[smart header="Вызов `call/apply` с `null` или `undefined`"]
+
+В старом стандарте при указании первого аргумента `null` или `undefined` в `call/apply`, функция получала `this = window`, например:
+
+```js
+//+ run
+function f() { 
+  alert(this);
+}
+
+f.call(null); // window
+```
+
+Это поведение исправлено в современном стандарте ([15.3](http://es5.github.com/x15.3.html#x15.3.4.3)). 
+
+Если функция работает в строгом режиме, то `this` передаётся "как есть":
+
+```js
+//+ run
+function f() { 
+  "use strict";
+*!*
+  alert(this); // null, а не window
+*/!*
+}
+
+f.call(null);
+```
+
+[/smart]
+
+## Итого про this
+
+
+Значение `this` устанавливается в зависимости от того, как вызвана функция:
+<dl>
+<dt>При вызове функции как метода</dt>
+<dd>
+
+```js
+obj.func(...)    // this = obj
+obj["func"](...)
+```
+
+</dd>
+<dt>При обычном вызове</dt>
+<dd>
+
+```js
+func(...)        // this = window (ES3) /undefined (ES5)
+```
+
+</dd>
+<dt>В `new`</dt>
+<dd>
+
+```js
+new func()       // this = {} (новый объект)
+```
+
+</dd>
+<dt>Явное указание</dt>
+<dd>
+
+```js
+func.apply(context, args) // this = context (явная передача)
+func.call(context, arg1, arg2, ...)
+```
+
+</dd>
+</dl>
+
+
diff --git a/1-js/6-objects-more/5-bind/1-cross-browser-bind/solution.md b/1-js/6-objects-more/5-bind/1-cross-browser-bind/solution.md
new file mode 100644
index 00000000..28b52dcb
--- /dev/null
+++ b/1-js/6-objects-more/5-bind/1-cross-browser-bind/solution.md
@@ -0,0 +1,8 @@
+
+Страшновато выглядит, да? Работает так (по строкам):
+<ol>
+<li>Вызов `bind` сохраняет дополнительные аргументы `args` (они идут со 2го номера) в массив `bindArgs`.</li>
+<li>... и возвращает обертку `wrapper`.</li>
+<li>Эта обёртка делает из `arguments` массив `args` и затем, используя метод [concat](http://javascript.ru/Array/concat), прибавляет их к аргументам `bindArgs` (карринг).</li>
+<li>Затем передаёт вызов `func` с контекстом и общим массивом аргументов.</li>
+</ol>
diff --git a/1-js/6-objects-more/5-bind/1-cross-browser-bind/task.md b/1-js/6-objects-more/5-bind/1-cross-browser-bind/task.md
new file mode 100644
index 00000000..af2df791
--- /dev/null
+++ b/1-js/6-objects-more/5-bind/1-cross-browser-bind/task.md
@@ -0,0 +1,22 @@
+# Кросс-браузерная эмуляция bind
+
+[importance 3]
+
+Если вы вдруг захотите копнуть поглубже -- аналог `bind` для IE8- и старых версий других браузеров будет выглядеть следующим образом:
+
+```js
+function bind(func, context /*, args*/) {
+  var bindArgs = [].slice.call(arguments, 2); // (1)
+  function wrapper() {                        // (2)
+    var args = [].slice.call(arguments); 
+    var unshiftArgs = bindArgs.concat(args);  // (3)
+    return func.apply(context, unshiftArgs);  // (4)
+  }
+  return wrapper;
+}
+```
+
+Использование -- вместо `mul.bind(null, 2)` вызывать `bind(mul, null, 2)`.
+
+Не факт, что он вам понадобится, но в качестве упражнение попробуйте разобраться, как это работает.
+
diff --git a/1-js/6-objects-more/5-bind/2-write-to-object-after-bind/solution.md b/1-js/6-objects-more/5-bind/2-write-to-object-after-bind/solution.md
new file mode 100644
index 00000000..c43c8731
--- /dev/null
+++ b/1-js/6-objects-more/5-bind/2-write-to-object-after-bind/solution.md
@@ -0,0 +1,22 @@
+Ответ: `Hello`.
+
+```js
+//+ run
+function f() {
+  alert( this );
+}
+
+var user = {
+  g: bind(f, "Hello")
+}
+      
+user.g();
+```
+
+Так как вызов идёт в контексте объекта `user.g()`, то внутри функции `g` контекст `this = user`.
+
+Однако, функции `g` совершенно без разницы, какой `this` она получила.
+
+Её единственное предназначение -- это передать вызов в `f` вместе с аргументами и ранее указанным контекстом `"Hello"`, что она и делает.
+
+Эта задача демонстрирует, что изменить однажды привязанный контекст уже нельзя.
\ No newline at end of file
diff --git a/1-js/6-objects-more/5-bind/2-write-to-object-after-bind/task.md b/1-js/6-objects-more/5-bind/2-write-to-object-after-bind/task.md
new file mode 100644
index 00000000..75b35b6d
--- /dev/null
+++ b/1-js/6-objects-more/5-bind/2-write-to-object-after-bind/task.md
@@ -0,0 +1,18 @@
+# Запись в объект после bind
+
+[importance 5]
+
+Что выведет функция?
+
+```js
+function f() {
+  alert( this );
+}
+
+var user = {
+  g: bind(f, "Hello")
+}
+      
+user.g();
+```
+
diff --git a/1-js/6-objects-more/5-bind/3-second-bind/solution.md b/1-js/6-objects-more/5-bind/3-second-bind/solution.md
new file mode 100644
index 00000000..952a8df4
--- /dev/null
+++ b/1-js/6-objects-more/5-bind/3-second-bind/solution.md
@@ -0,0 +1,55 @@
+Ответ: `"Вася"`.
+
+```js
+//+ run
+function f() {
+  alert(this.name);
+}
+
+f = f.bind( {name: "Вася"} ).bind( {name: "Петя"} );
+
+f(); // Вася
+```
+
+Первый вызов `f.bind(..Вася..)` возвращает "обёртку", которая устанавливает контекст для `f` и передаёт вызов `f`.
+
+Следующий вызов `bind` будет устанавливать контекст уже для этой обёртки, это ни на что не влияет.  
+
+Чтобы это проще понять, используем наш собственный вариант `bind` вместо встроенного:
+
+```js
+function bind(func, context) {
+  return function() { 
+    return func.apply(context, arguments); 
+  };
+}
+```
+
+Код станет таким:
+
+```js
+function f() {
+  alert(this.name);
+}
+
+f = bind(f, {name: "Вася"} ); // (1)
+f = bind(f, {name: "Петя"} ); // (2)
+
+f(); // Вася
+```
+
+Здесь видно, что первый вызов `bind`, в строке `(1)`, возвращает обёртку вокруг `f`, которая выглядит так (выделена):
+
+```js
+function bind(func, context) {
+*!*
+  return function() { 
+    return func.apply(context, arguments); 
+  };
+*/!*
+}
+```
+
+В этой обёртке нигде не используется `this`, только `func` и `context`. Посмотрите на код, там нигде нет `this`.
+
+Поэтому следующий `bind` в строке `(2)`, который выполняется уже над обёрткой и фиксирует в ней `this`, ни на что не влияет. Какая разница, что будет в качестве `this` в функции, которая этот `this` не использует?
diff --git a/1-js/6-objects-more/5-bind/3-second-bind/task.md b/1-js/6-objects-more/5-bind/3-second-bind/task.md
new file mode 100644
index 00000000..5808b590
--- /dev/null
+++ b/1-js/6-objects-more/5-bind/3-second-bind/task.md
@@ -0,0 +1,16 @@
+# Повторный bind
+
+[importance 5]
+
+Что выведет этот код?
+
+```js
+function f() {
+  alert(this.name);
+}
+
+f = f.bind( {name: "Вася"} ).bind( {name: "Петя" } );
+
+f();
+```
+
diff --git a/1-js/6-objects-more/5-bind/4-function-property-after-bind/solution.md b/1-js/6-objects-more/5-bind/4-function-property-after-bind/solution.md
new file mode 100644
index 00000000..a882a35e
--- /dev/null
+++ b/1-js/6-objects-more/5-bind/4-function-property-after-bind/solution.md
@@ -0,0 +1,4 @@
+Ответ: `undefined`.
+
+Результатом работы `bind` является функция-обёртка над `sayHi`. Эта функция -- самостоятельный объект, у неё уже нет свойства `test`.
+
diff --git a/1-js/6-objects-more/5-bind/4-function-property-after-bind/task.md b/1-js/6-objects-more/5-bind/4-function-property-after-bind/task.md
new file mode 100644
index 00000000..2ab42fc4
--- /dev/null
+++ b/1-js/6-objects-more/5-bind/4-function-property-after-bind/task.md
@@ -0,0 +1,20 @@
+# Свойство функции после bind
+
+[importance 5]
+
+В свойство функции записано значение. Изменится ли оно после применения `bind`? Обоснуйте ответ.
+
+```js
+function sayHi() {  
+  alert(this.name);
+}
+sayHi.test = 5;
+alert(sayHi.test); // 5
+
+*!*
+var bound = sayHi.bind({ name: "Вася" });
+
+alert(bound.test); // что выведет? почему?
+*/!*
+```
+
diff --git a/1-js/6-objects-more/5-bind/5-question-use-bind/solution.md b/1-js/6-objects-more/5-bind/5-question-use-bind/solution.md
new file mode 100644
index 00000000..d022a510
--- /dev/null
+++ b/1-js/6-objects-more/5-bind/5-question-use-bind/solution.md
@@ -0,0 +1,105 @@
+# Решение с bind
+
+Ошибка происходит потому, что `ask` получает только функцию, без объекта-контекста. 
+
+Используем `bind`, чтобы передать в `ask` функцию с уже привязанным контекстом:
+
+```js
+//+ run
+"use strict";
+
+function ask(question, answer, ok, fail) {
+  var result = prompt(question, '');
+  if (result.toLowerCase() == answer.toLowerCase()) ok();
+  else fail();
+}
+
+var user = {
+  login: 'Василий',
+  password: '12345',
+
+  loginOk: function() {
+    alert(this.login + ' вошёл в сайт');
+  },
+
+  loginFail: function() {
+    alert(this.login + ': ошибка входа');
+  },
+
+  checkPassword: function() {
+*!*
+    ask("Ваш пароль?", this.password, this.loginOk.bind(this), this.loginFail.bind(this));
+*/!*
+  }
+};
+
+var vasya = user;
+user = null;
+vasya.checkPassword();
+```
+
+# Решение через замыкание
+
+Альтернативное решение -- сделать функции-обёртки над `user.loginOk/loginFail`:
+
+```js
+var user = {
+  ...
+  checkPassword: function() {
+*!*
+    ask("Ваш пароль?", this.password, 
+      function() { user.loginOk(); }, function() { user.loginFail(); });
+*/!*
+  }
+}
+```
+
+...Но такой код использует переменную `user`, так что если объект переместить из неё, к примеру, так, то работать он не будет:
+
+```js
+var vasya = user; // переместим user в vasya
+user = null;
+vasya.checkPassword(); // упс будет ошибка, ведь в коде объекта остался user
+```
+
+Для того, чтобы избежать проблем, можно использовать `this`. Внутри `checkPassword` он всегда будет равен текущему объекту, так что скопируем его в переменную, которую назовём `self`:
+
+```js
+//+ run
+"use strict";
+
+function ask(question, answer, ok, fail) {
+  var result = prompt(question, '');
+  if (result.toLowerCase() == answer.toLowerCase()) ok();
+  else fail();
+}
+
+var user = {
+  login: 'Василий',
+  password: '12345',
+
+  loginOk: function() {
+    alert(this.login + ' вошёл в сайт');
+  },
+
+  loginFail: function() {
+    alert(this.login + ': ошибка входа');
+  },
+
+  checkPassword: function() {
+*!*
+    var self = this;
+    ask("Ваш пароль?", this.password, 
+      function() { self.loginOk(); }, 
+      function() { self.loginFail(); }
+    );
+*/!*
+  }
+};
+
+var vasya = user;
+user = null;
+vasya.checkPassword();
+```
+
+Теперь всё работает. Анонимные функции достают правильный контекст из замыкания, где он сохранён в переменной `self`.
\ No newline at end of file
diff --git a/1-js/6-objects-more/5-bind/5-question-use-bind/task.md b/1-js/6-objects-more/5-bind/5-question-use-bind/task.md
new file mode 100644
index 00000000..be46ffc1
--- /dev/null
+++ b/1-js/6-objects-more/5-bind/5-question-use-bind/task.md
@@ -0,0 +1,50 @@
+# Использование функции вопросов
+
+[importance 5]
+
+Вызов `user.checkPassword()` в коде ниже должен, при помощи `ask`, спрашивать пароль и вызывать `loginOk/loginFail` в зависимости от правильности ответа. 
+
+Однако, его вызов приводит к ошибке. Почему? 
+
+Исправьте выделенную строку, чтобы всё работало (других строк изменять не надо).
+
+```js
+//+ run
+"use strict";
+
+function ask(question, answer, ok, fail) {
+  var result = prompt(question, '');
+  if (result.toLowerCase() == answer.toLowerCase()) ok();
+  else fail();
+}
+
+var user = {
+  login: 'Василий',
+  password: '12345',
+
+  loginOk: function() {
+    alert(this.login + ' вошёл в сайт');
+  },
+
+  loginFail: function() {
+    alert(this.login + ': ошибка входа');
+  },
+
+  checkPassword: function() {
+*!*
+    ask("Ваш пароль?", this.password, this.loginOk, this.loginFail);
+*/!*
+  }
+};
+
+user.checkPassword();
+```
+
+P.S. Ваше решение должно также срабатывать, если переменная `user` будет перезаписана, например вместо `user.checkPassword()` в конце будут строки:
+
+```js
+var vasya = user;
+user = null;
+vasya.checkPassword();
+```
+
diff --git a/1-js/6-objects-more/5-bind/6-ask-currying/solution.md b/1-js/6-objects-more/5-bind/6-ask-currying/solution.md
new file mode 100644
index 00000000..3a1173f0
--- /dev/null
+++ b/1-js/6-objects-more/5-bind/6-ask-currying/solution.md
@@ -0,0 +1,69 @@
+# Решение с bind
+
+Первое решение -- передать в `ask` функции с привязанным контекстом и аргументами.
+
+```js
+//+ run
+"use strict";
+
+function ask(question, answer, ok, fail) {
+  var result = prompt(question, '');
+  if (result.toLowerCase() == answer.toLowerCase()) ok();
+  else fail();
+}
+
+var user = {
+  login: 'Василий',
+  password: '12345',
+
+  loginDone: function(result) {
+    alert(this.login + (result ? ' вошёл в сайт' : ' ошибка входа'));
+  },
+
+  checkPassword: function() {
+*!*
+    ask("Ваш пароль?", this.password, this.loginDone.bind(this, true), this.loginDone.bind(this, false));
+*/!*
+  }
+};
+
+user.checkPassword();
+```
+
+# Решение с локальной переменной
+
+Второе решение -- это скопировать `this` в локальную переменную (чтобы внешняя перезапись не повлияла):
+
+```js
+//+ run
+"use strict";
+
+function ask(question, answer, ok, fail) {
+  var result = prompt(question, '');
+  if (result.toLowerCase() == answer.toLowerCase()) ok();
+  else fail();
+}
+
+var user = {
+  login: 'Василий',
+  password: '12345',
+
+  loginDone: function(result) {
+    alert(this.login + (result ? ' вошёл в сайт' : ' ошибка входа'));
+  },
+
+  checkPassword: function() {
+    var self = this;
+*!*
+    ask("Ваш пароль?", this.password,
+       function() { self.loginDone(true); }, 
+       function() { self.loginDone(false); }
+    );
+*/!*
+  }
+};
+
+user.checkPassword();
+```
+
+Оба решения хороши, вариант с `bind` короче.
\ No newline at end of file
diff --git a/1-js/6-objects-more/5-bind/6-ask-currying/task.md b/1-js/6-objects-more/5-bind/6-ask-currying/task.md
new file mode 100644
index 00000000..245d91d8
--- /dev/null
+++ b/1-js/6-objects-more/5-bind/6-ask-currying/task.md
@@ -0,0 +1,53 @@
+# Использование функции вопросов с каррингом
+
+[importance 5]
+
+Эта задача -- усложнённый вариант задачи [](/task/question-use-bind). В ней объект `user` изменён.
+
+Теперь вместо двух функций `user.loginOk()` и `user.loginFail()` теперь один метод: `user.loginDone(true/false)`, который нужно вызвать с `true` при верном ответе и `fail` -- при неверном. 
+
+Код ниже делает это, соответствующий фрагмент выделен.
+
+**Сейчас он обладает важным недостатком: при записи в `user` другого значения объект перестанет корректно работать, вы увидите это, запустив пример ниже (будет ошибка).**
+
+Как бы вы написали правильно? 
+
+**Исправьте выделенный фрагмент, чтобы код заработал.**
+
+```js
+//+ run
+"use strict";
+
+function ask(question, answer, ok, fail) {
+  var result = prompt(question, '');
+  if (result.toLowerCase() == answer.toLowerCase()) ok();
+  else fail();
+}
+
+var user = {
+  login: 'Василий',
+  password: '12345',
+
+  // метод для вызова из ask 
+  loginDone: function(result) {
+    alert(this.login + (result ? ' вошёл в сайт' : ' ошибка входа'));
+  },
+
+  checkPassword: function() {
+*!*
+    ask("Ваш пароль?", this.password, 
+      function() { user.loginDone(true); },
+      function() { user.loginDone(false); }
+    );
+*/!*
+  }
+};
+
+var vasya = user;
+user = null;
+vasya.checkPassword();
+```
+
+Изменения должны касаться только выделенного фрагмента.
+
+Если возможно, предложите два решения, одно -- с использованием `bind`, другое -- без него. Какое решение лучше?
diff --git a/1-js/6-objects-more/5-bind/article.md b/1-js/6-objects-more/5-bind/article.md
new file mode 100644
index 00000000..29a23d13
--- /dev/null
+++ b/1-js/6-objects-more/5-bind/article.md
@@ -0,0 +1,308 @@
+# Привязка контекста и карринг: "bind"
+
+Функции в JavaScript никак не привязаны к своему контексту `this`, с одной стороны, здорово -- это позволяет быть максимально гибкими, одалживать методы и так далее.
+
+Но с другой стороны -- в некоторых случаях контекст может быть потерян. То есть мы вроде как вызываем метод объекта, а на самом деле он получает `this = undefined`. 
+
+Такая ситуация является типичной для начинающих разработчиков, но бывает и у "зубров" то же. Конечно, зубры при этом знают, что с ней делать.
+
+[cut]
+
+## Пример потери контекста
+
+В браузере есть встроенная функция `setTimeout(func, ms)`, которая вызывает выполение функции `func` через `ms` миллисекунд (=1/1000 секунды).
+
+Мы подробно остановимся на ней и её тонкостях позже, в главе [](/setTimeout-setInterval), а пока просто посмотрим пример.
+
+Этот код выведет "Привет" через 1000мс, то есть 1 секунду:
+
+```js
+//+ run
+setTimeout(function() {
+  alert("Привет");
+}, 1000);
+```
+
+Попробуем сделать то же самое с методом объекта, следующий код должен выводить имя пользователя через 1 секунду:
+
+```js
+//+ run
+var user = {
+  firstName: "Вася",
+  sayHi: function() { 
+    alert(this.firstName);
+  }
+};
+
+*!*
+setTimeout( user.sayHi, 1000); // undefined (не Вася!)
+*/!*
+```
+
+**При запуске кода выше через секунду выводится вовсе не `"Вася"`, а `undefined`!**
+
+Это произошло потому, что в примере выше `setTimeout` получил функцию `user.sayHi`, но не её контекст. То есть, последняя строчка аналогична двум таким:
+
+```js
+var f = user.sayHi;
+setTimeout(f, 1000); // контекст user потеряли
+```
+
+**Ситуация довольно типична -- мы хотим передать метод объекта куда-то в другое место кода, откуда он потом может быть вызван. Как бы прикрепить к нему контекст, желательно, с минимумом плясок с бубном и при этом надёжно?**
+
+Есть несколько способов решения, среди которых мы, в зависимости от ситуации, можем выбирать.
+
+## Решение 1: сделать обёртку
+
+Самый простой вариант решения -- это обернуть вызов в анонимную функцию:
+
+```js
+//+ run
+var user = {
+  firstName: "Вася",
+  sayHi: function() { 
+    alert(this.firstName);
+  }
+};
+
+*!*
+setTimeout(function() {
+ user.sayHi(); // Вася
+}, 1000); 
+*/!*
+```
+
+Теперь код работает, так как `user` достаётся из замыкания. 
+
+Но тут же появляется и уязвимое место в структуре кода! 
+
+**А что, если до срабатывания `setTimeout` в переменную `user` будет записано другое значение? К примеру, какой-то другой пользователь... В этом случае вызов неожиданно будет совсем не тот!**
+
+Хорошо бы гарантировать правильность контекста.
+
+## Решение 2: bind для привязки контекста
+
+Напишем вспомогательную функцию `bind(func, context)`, которая будет жёстко фиксировать контекст для `func`:
+
+```js
+function bind(func, context) {
+  return function() { 
+    return func.apply(context, arguments); 
+  };
+}
+```
+
+Параметры:
+<dl>
+<dt>`func`</dt>
+<dd>Произвольная функция</dd>
+<dt>`context`</dt>
+<dd>Произвольный объект</dd>
+
+Результатом вызова  `bind(func, context)` будет, как видно из кода, функция-обёртка, которая передаёт все вызовы `func`, указывая при этом правильный контекст `context`.
+
+Чтобы понять, как она работает, нужно вспомнить тему "замыкания" -- здесь `bind` возвращает анонимную функцию, которая при вызове получает контекст `context` из внешней области видимости и передаёт вызов в `func` вместе с этим контекстом `context` и аргументами `arguments`.
+
+**В результате вызова `bind` мы получаем как бы "ту же функцию, но с фиксированным контекстом".**
+
+Пример с `bind`:
+
+```js
+//+ run
+function bind(func, context) {
+  return function() { 
+    return func.apply(context, arguments); 
+  };
+}
+
+var user = {
+  firstName: "Вася",
+  sayHi: function() { 
+    alert(this.firstName);
+  }
+};
+
+*!*
+setTimeout( bind(user.sayHi, user), 1000 );
+*/!*
+```
+
+Теперь всё в порядке! В `setTimeout` пошла обёртка, фиксирующая контекст. 
+
+
+## Решение 3: встроенный метод bind [#bind]
+
+В современном JavaScript (или при подключении библиотеки [es5-shim](https://github.com/kriskowal/es5-shim) для IE8-) у функций уже есть встроенный метод [bind](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind), который мы можем использовать.
+
+Он позволяет получить обёртку, которая привязывает функцию не только к нужному контексту но, если нужно, то и к аргументам. 
+
+Синтаксис `bind`:
+
+```js
+var wrapper = func.bind(context[, arg1, arg2...])
+```
+
+<dl>
+<dt>`func`</dt>
+<dd>Произвольная функция</dd>
+<dt>`context`</dt>
+<dd>Обертка `wrapper` будет вызывать функцию с контекстом `this = context`.</dd>
+<dt>`arg1`, `arg2`, ...</dt>
+<dd>Если указаны аргументы `arg1, arg2...` -- они будут прибавлены к каждому вызову новой функции, причем встанут *перед* теми, которые указаны при вызове.</dd>
+</dl>
+
+Результат вызова: `func.bind(context)` аналогичен вызову `bind(func, context)`, описанному выше. То есть, `wrapper` -- это обёртка, фиксирующая контекст и передающая вызовы в `func`. Также можно указать аргументы, но это делается редко, мы поговорим о них позже.
+
+Пример со встроенным методом `bind`:
+
+```js
+//+ run
+var user = {
+  firstName: "Вася",
+  sayHi: function() { 
+    alert(this.firstName);
+  }
+};
+
+*!*
+// setTimeout( bind(user.sayHi, user), 1000 ); 
+
+setTimeout( user.sayHi.bind(user), 1000 ); // аналог через встроенный метод
+*/!*
+```
+
+Получили простой и надёжный способ привязать контекст, причём даже встроенный в JavaScript.
+
+[smart header="Привязать всё: `bindAll`"]
+Если у объекта много методов и мы планируем их активно передавать, то можно привязать контекст для них всех в цикле:
+
+```js
+for(var prop in user) {
+  if (typeof user[prop] == 'function') {
+    user[prop] = user[prop].bind(user);
+  }
+}
+```
+
+В некоторых JS-фреймворках есть даже встроенные функции для этого, например [_.bindAll(obj)](http://lodash.com/docs#bindAll).
+[/smart]
+
+## Карринг
+
+До этого мы говорили о привязке контекста. Теперь пойдём на шаг дальше. Привязывать можно не только контекст, но и аргументы. Используется это реже, но бывает полезно.
+
+[Карринг](http://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D1%80%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)  (currying) или *каррирование* -- термин [функционального программирования](http://ru.wikipedia.org/wiki/%D0%A4%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%B5_%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%D0%B5), который означает создание новой функции путём фиксирования аргументов существующей.
+
+Как было сказано выше, метод `func.bind(context, ...)` может создавать обёртку, которая фиксирует не только контекст, но и ряд аргументов функции.
+
+Например, есть функция умножения двух чисел `mul(a, b)`:
+
+```js
+function mul(a, b) {
+  return a * b;
+};
+```
+
+При помощи `bind` создадим функцию `double`, удваивающую значения. Это будет вариант функции `mul` с фиксированным первым аргументом:
+
+```js
+//+ run
+*!*
+// double умножает только на два
+var double = mul.bind(null, 2); // контекст фиксируем null, он не используется
+*/!*
+
+alert( double(3) );  // = mul(2, 3) = 6
+alert( double(4) );  // = mul(2, 4) = 8
+alert( double(5) );  // = mul(2, 5) = 10
+```
+
+При вызове `double` будет передавать свои аргументы исходной функции `mul` после тех, которые указаны в `bind`, то есть в данном случае после зафиксированного первого аргумента `2`.
+
+**Говорят, что `double` является "частичной функцией" (partial function) от `mul`.**
+
+Другая частичная функция `triple` утраивает значения:
+
+```js
+//+ run
+*!*
+var triple = mul.bind(null, 3); // контекст фиксируем null, он не используется
+*/!*
+
+alert( triple(3) );  // = mul(3, 3) = 9
+alert( triple(4) );  // = mul(3, 4) = 12
+alert( triple(5) );  // = mul(3, 5) = 15
+```
+
+**При помощи `bind` мы можем получить из функции её "частный вариант" как самостоятельную функцию и дальше передать в `setTimeout` или сделать с ней что-то ещё.**
+
+
+## Задачи
+
+
+Рассмотрим для дальнейших задач "функцию для вопросов" `ask`:
+
+```js
+function ask(question, answer, ok, fail) {
+  var result = prompt(question, '');
+  if (result.toLowerCase() == answer.toLowerCase()) ok();
+  else fail();
+}
+```
+
+Пока в этой функции ничего особого нет. Её назначение -- задать вопрос `question` и, если ответ совпадёт с `answer`, то запустить функцию `ok()`, а иначе -- функцию `fail()`.
+
+Однако, тем не менее, эта функция взята из реального проекта. Просто обычно она сложнее, вместо `alert/prompt` -- вывод красивого  JavaScript-диалога с рамочками, кнопочками и так далее, но это нам сейчас не нужно.
+
+Пример использования:
+
+```js
+//+ run
+*!*
+ask("Выпустить птичку?", "да", fly, die);
+*/!*
+
+function fly() { 
+  alert('улетела :)');
+}
+
+function die() { 
+  alert('птичку жалко :(');
+}
+```
+
+## Итого
+
+Функции и контекст к JavaScript -- как шнурки и кроссовки. Если мы куда-то отправляем шнурки (например в `setTimeout`), то кроссовки сами за ними не побегут.
+
+Нужно либо передать их дополнительно, либо привязать одно к другому вызовом `bind`, либо завернуть в замыкание.
+
+[head]
+<script>
+function mul(a, b) {
+  return a * b;
+};
+
+function ask(question, correctAnswer, ok, fail) {
+  var result;
+  if (typeof correctAnswer == 'boolean') {
+    result = confirm(question);
+  } else {
+    result = prompt(question, '');
+  }
+
+  if (result == correctAnswer) ok()
+  else fail();
+}
+
+function bind(func, context /*, args*/) {
+  var bindArgs = [].slice.call(arguments, 2); // (1)
+  function wrapper() {                        // (2)
+    var args = [].slice.call(arguments); 
+    var unshiftArgs = bindArgs.concat(args);  // (3)
+    return func.apply(context, unshiftArgs);  // (4)
+  }
+  return wrapper;
+}
+</script>
+[/head]
\ No newline at end of file
diff --git a/1-js/6-objects-more/6-decorators/1-logging-decorator/_js.view/solution.js b/1-js/6-objects-more/6-decorators/1-logging-decorator/_js.view/solution.js
new file mode 100644
index 00000000..22c190ed
--- /dev/null
+++ b/1-js/6-objects-more/6-decorators/1-logging-decorator/_js.view/solution.js
@@ -0,0 +1,9 @@
+function makeLogging(f, log) {
+
+  function wrapper(a) {
+    log.push(a);
+    return f.call(this, a);   
+  }
+
+  return wrapper;
+}
diff --git a/1-js/6-objects-more/6-decorators/1-logging-decorator/_js.view/test.js b/1-js/6-objects-more/6-decorators/1-logging-decorator/_js.view/test.js
new file mode 100644
index 00000000..67480fdc
--- /dev/null
+++ b/1-js/6-objects-more/6-decorators/1-logging-decorator/_js.view/test.js
@@ -0,0 +1,48 @@
+describe("makeLogging", function() {
+  it("записывает вызовы в массив log", function() {
+    var work = sinon.spy();
+
+    var log = [];
+    work = makeLogging(work, log);
+    assert.deepEqual( log, []);
+
+    work(1);
+    assert.deepEqual( log, [1]);
+
+    work(2);
+    assert.deepEqual( log, [1, 2]);
+  });
+
+  it("передаёт вызов функции, возвращает её результат", function() {
+    var log = [];
+    
+    function work(x) {
+      return x*2;
+    }
+
+    work = sinon.spy(work);
+    var spy = work;
+    work = makeLogging(work, log);
+        
+    assert.equal( work(1), 2 );
+    assert(spy.calledWith(1));
+  });
+    
+
+  it("сохраняет контекст вызова для методов объекта", function() {
+    var log = [];
+    
+    var calculator = {
+      double: function(x) {  return x*2; }
+    }
+
+    calculator.double = sinon.spy(calculator.double);
+    var spy = calculator.double;
+    calculator.double = makeLogging(calculator.double, log);
+
+    assert.equal( calculator.double(1), 2 );
+    assert(spy.calledWith(1));
+    assert(spy.calledOn(calculator));
+  });
+
+});
diff --git a/1-js/6-objects-more/6-decorators/1-logging-decorator/solution.md b/1-js/6-objects-more/6-decorators/1-logging-decorator/solution.md
new file mode 100644
index 00000000..ac92d137
--- /dev/null
+++ b/1-js/6-objects-more/6-decorators/1-logging-decorator/solution.md
@@ -0,0 +1,44 @@
+Возвратим декоратор `wrapper` который будет записывать аргумент в `log` и передавать вызов в `f`:
+
+```js
+//+ run
+function work(a) { 
+  /*...*/ // work - произвольная функция, один аргумент
+}
+
+function makeLogging(f, log) {
+
+*!*
+  function wrapper(a) {
+    log.push(a);
+    return f.call(this, a);   
+  }
+*/!*
+
+  return wrapper;
+}
+
+var log = [];
+work = makeLogging(work, log);
+
+work(1); // 1
+work(5); // 5
+
+for(var i=0; i<log.length; i++) {
+  alert( 'Лог:' + log[i] ); // "Лог:1", затем "Лог:5"
+}
+```
+
+**Обратите внимание, вызов функции осуществляется как `f.call(this, a)`, а не просто `f(a)`.**
+
+Передача контекста необходима, чтобы декоратор корректно работал с методами объекта. Например:
+
+```js
+user.method = makeLogging(user.method, log);
+```
+
+Теперь при вызове `user.method(...)` в декоратор будет передаваться контекст `this`, который надо передать исходной функции через `call/apply`.
+
+
+
+
diff --git a/1-js/6-objects-more/6-decorators/1-logging-decorator/task.md b/1-js/6-objects-more/6-decorators/1-logging-decorator/task.md
new file mode 100644
index 00000000..5dc3c1a6
--- /dev/null
+++ b/1-js/6-objects-more/6-decorators/1-logging-decorator/task.md
@@ -0,0 +1,32 @@
+# Логирующий декоратор (1 аргумент)
+
+[importance 5]
+
+Создайте декоратор `makeLogging(f, log)`, который берет функцию `f` и массив `log`. 
+
+Он должен возвращать обёртку вокруг `f`, которая при каждом вызове записывает ("логирует") аргументы в `log`, а затем передает вызов в `f`. 
+
+**В этой задаче можно считать, что у функции `f` ровно один аргумент.**
+
+Работать должно так:
+
+```js
+function work(a) { 
+  /* ... */ // work - произвольная функция, один аргумент
+}
+
+function makeLogging(f, log) { /* ваш код */ }
+
+var log = [];
+work = makeLogging(work, log);
+
+work(1); // 1, добавлено в log
+work(5); // 5, добавлено в log
+
+for(var i=0; i<log.length; i++) {
+*!*
+  alert( 'Лог:' + log[i] ); // "Лог:1", затем "Лог:5"
+*/!*
+}
+```
+
diff --git a/1-js/6-objects-more/6-decorators/2-logging-decorator-arguments/_js.view/solution.js b/1-js/6-objects-more/6-decorators/2-logging-decorator-arguments/_js.view/solution.js
new file mode 100644
index 00000000..f8b18460
--- /dev/null
+++ b/1-js/6-objects-more/6-decorators/2-logging-decorator-arguments/_js.view/solution.js
@@ -0,0 +1,15 @@
+function makeLogging(f, log) {
+ 
+  function wrapper() {
+    log.push([].slice.call(arguments));
+    return f.apply(this, arguments);   
+  }
+
+  return wrapper;
+}
+
+
+
+
+
+
diff --git a/1-js/6-objects-more/6-decorators/2-logging-decorator-arguments/_js.view/test.js b/1-js/6-objects-more/6-decorators/2-logging-decorator-arguments/_js.view/test.js
new file mode 100644
index 00000000..9abc8ec5
--- /dev/null
+++ b/1-js/6-objects-more/6-decorators/2-logging-decorator-arguments/_js.view/test.js
@@ -0,0 +1,49 @@
+
+describe("makeLogging", function() {
+  it("записывает вызовы в массив log", function() {
+    var work = sinon.spy();
+
+    var log = [];
+    work = makeLogging(work, log);
+    assert.deepEqual( log, []);
+
+    work(1, 2);
+    assert.deepEqual( log, [[1, 2]]);
+
+    work(3, 4);
+    assert.deepEqual( log, [[1, 2], [3,4]]);
+  });
+
+  it("передаёт вызов функции, возвращает её результат", function() {
+    var log = [];
+    
+    function sum(a, b) {
+      return a + b;
+    }
+
+    sum = sinon.spy(sum);
+    var spy = sum;
+    sum = makeLogging(sum, log);
+        
+    assert.equal( sum(1, 2), 3 );
+    assert(spy.calledWith(1, 2));
+  });
+    
+
+  it("сохраняет контекст вызова для методов объекта", function() {
+    var log = [];
+    
+    var calculator = {
+      sum: function(a, b) {  return a + b; }
+    }
+
+    calculator.sum = sinon.spy(calculator.sum);
+    var spy = calculator.sum;
+    calculator.sum = makeLogging(calculator.sum, log);
+
+    assert.equal( calculator.sum(1, 2), 3 );
+    assert(spy.calledWith(1, 2));
+    assert(spy.calledOn(calculator));
+  });
+
+});
diff --git a/1-js/6-objects-more/6-decorators/2-logging-decorator-arguments/solution.md b/1-js/6-objects-more/6-decorators/2-logging-decorator-arguments/solution.md
new file mode 100644
index 00000000..622c11ad
--- /dev/null
+++ b/1-js/6-objects-more/6-decorators/2-logging-decorator-arguments/solution.md
@@ -0,0 +1,34 @@
+Решение аналогично задаче [](/task/logging-decorator), разница в том, что в лог вместо одного аргумента идет весь объект `arguments`.
+
+Для передачи вызова с произвольным количеством аргументов используем `f.apply(this, arguments)`.
+
+```js
+//+ run
+function work(a, b) { 
+  alert(a + b); // work - произвольная функция
+}
+
+function makeLogging(f, log) {
+ 
+*!*
+  function wrapper() {
+    log.push([].slice.call(arguments));
+    return f.apply(this, arguments);   
+  }
+*/!*
+
+  return wrapper;
+}
+
+var log = [];
+work = makeLogging(work, log);
+
+work(1, 2); // 3
+work(4, 5); // 9
+
+for(var i=0; i<log.length; i++) {
+  var args = log[i]; // массив из аргументов i-го вызова
+  alert( 'Лог:' + args.join() ); // "Лог:1,2", "Лог:4,5"
+}
+```
+
diff --git a/1-js/6-objects-more/6-decorators/2-logging-decorator-arguments/task.md b/1-js/6-objects-more/6-decorators/2-logging-decorator-arguments/task.md
new file mode 100644
index 00000000..75ecf94c
--- /dev/null
+++ b/1-js/6-objects-more/6-decorators/2-logging-decorator-arguments/task.md
@@ -0,0 +1,29 @@
+# Логирующий декоратор (много аргументов)
+
+[importance 3]
+
+Создайте декоратор `makeLogging(func, log)`, для функции `func` возвращающий обёртку, которая при каждом вызове добавляет её аргументы в массив `log`. 
+
+Условие аналогично задаче [](/task/logging-decorator), но допускается `func` с любым набором аргументов.
+
+Работать должно так:
+
+```js
+function work(a, b) { 
+  alert(a + b); // work - произвольная функция
+}
+
+function makeLogging(f, log) { /* ваш код */ }
+
+var log = [];
+work = makeLogging(work, log);
+
+work(1, 2); // 3
+work(4, 5); // 9
+
+for(var i=0; i<log.length; i++) {
+  var args = log[i]; // массив из аргументов i-го вызова
+  alert( 'Лог:' + args.join() ); // "Лог:1,2", "Лог:4,5"
+}
+```
+
diff --git a/1-js/6-objects-more/6-decorators/3-caching-decorator/_js.view/solution.js b/1-js/6-objects-more/6-decorators/3-caching-decorator/_js.view/solution.js
new file mode 100644
index 00000000..32109e18
--- /dev/null
+++ b/1-js/6-objects-more/6-decorators/3-caching-decorator/_js.view/solution.js
@@ -0,0 +1,11 @@
+function makeCaching(f) { 
+  var cache = {};  
+
+  return function(x) {
+    if (!(x in cache)) {   
+      cache[x] = f.call(this, x);
+    }
+    return cache[x];
+  };
+
+}
\ No newline at end of file
diff --git a/1-js/6-objects-more/6-decorators/3-caching-decorator/_js.view/test.js b/1-js/6-objects-more/6-decorators/3-caching-decorator/_js.view/test.js
new file mode 100644
index 00000000..3bf702d7
--- /dev/null
+++ b/1-js/6-objects-more/6-decorators/3-caching-decorator/_js.view/test.js
@@ -0,0 +1,31 @@
+describe("makeCaching", function() {
+
+  it("запоминает предыдущее значение функции с таким аргументом", function() {
+    function f(x) { 
+      return Math.random()*x;  
+    }
+
+    f = makeCaching(f);
+
+    var a = f(1);
+    var b = f(1);
+    assert.equal(a, b);
+ 
+    var anotherValue = f(2);    
+    // почти наверняка другое значение
+    assert.notEqual( a, anotherValue );
+  });
+
+  it("сохраняет контекст вызова", function() {
+    var obj = {
+      spy: sinon.spy()
+    };
+
+    var spy = obj.spy;
+    obj.spy = makeCaching(obj.spy);
+    obj.spy(123);
+    assert( spy.calledWith(123) );
+    assert( spy.calledOn(obj) );
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/6-objects-more/6-decorators/3-caching-decorator/solution.md b/1-js/6-objects-more/6-decorators/3-caching-decorator/solution.md
new file mode 100644
index 00000000..64131682
--- /dev/null
+++ b/1-js/6-objects-more/6-decorators/3-caching-decorator/solution.md
@@ -0,0 +1,34 @@
+Запоминать результаты вызова функции будем в замыкании, в объекте `cache: { ключ:значение }`.
+
+```js
+//+ run
+function f(x) { 
+  return Math.random()*x;
+}
+
+*!*
+function makeCaching(f) { 
+  var cache = {};  
+
+  return function(x) {
+    if (!(x in cache)) {   
+      cache[x] = f.call(this, x);
+    }
+    return cache[x];
+  };
+
+}
+*/!*
+
+f = makeCaching(f);
+
+var a = f(1);
+var b = f(1);
+alert( a == b ); // true (значение закешировано)
+
+b = f(2);
+alert( a == b ); // false, другой аргумент => другое значение
+```
+
+Обратите внимание: проверка на наличие уже подсчитанного значения выглядит так: `if (x in cache)`. Менее универсально можно проверить так: `if (cache[x])`, это если мы точно знаем, что `cache[x]` никогда не будет `false`, `0` и т.п.
+
diff --git a/1-js/6-objects-more/6-decorators/3-caching-decorator/task.md b/1-js/6-objects-more/6-decorators/3-caching-decorator/task.md
new file mode 100644
index 00000000..2f51f84c
--- /dev/null
+++ b/1-js/6-objects-more/6-decorators/3-caching-decorator/task.md
@@ -0,0 +1,34 @@
+# Кеширующий декоратор
+
+[importance 5]
+
+Создайте декоратор `makeCaching(f)`, который берет функцию `f` и возвращает обертку, которая кеширует её результаты.
+
+**В этой задаче функция `f` имеет только один аргумент, и он является числом.**
+
+<ol>
+<li>При первом вызове обертки с определенным аргументом -- она вызывает `f` и запоминает значение.</li>
+<li>При втором и последующих вызовах с тем же аргументом возвращается запомненное значение.</li>
+</ol>
+
+Должно работать так:
+
+```js
+function f(x) { 
+  return Math.random()*x; // random для удобства тестирования 
+}
+
+function makeCaching(f) { /* ваш код */ }
+
+f = makeCaching(f);
+
+var a, b;
+
+a = f(1);
+b = f(1);
+alert( a == b ); // true (значение закешировано)
+
+b = f(2);
+alert( a == b ); // false, другой аргумент => другое значение
+```
+
diff --git a/1-js/6-objects-more/6-decorators/article.md b/1-js/6-objects-more/6-decorators/article.md
new file mode 100644
index 00000000..746ac446
--- /dev/null
+++ b/1-js/6-objects-more/6-decorators/article.md
@@ -0,0 +1,205 @@
+# Функции-обёртки, декораторы
+
+JavaScript предоставляет удивительно гибкие возможности по работе с функциями: их можно передавать, в них можно записывать данные как в объекты, у них есть свои встроенные методы...
+
+Конечно, этим нужно уметь пользоваться. В этой главе, чтобы более глубоко понимать работу с функциями, мы рассмотрим создание функций-обёрток или, иначе говоря, "декораторов".
+[cut]
+
+## Примеры декораторов
+
+<a href="http://en.wikipedia.org/wiki/Decorator_pattern">Декоратор</a> -- приём программирования, который позволяет взять существующую функцию и изменить/расширить ее поведение.
+
+***Декоратор* получает функцию и возвращает обертку, которая делает что-то своё "вокруг" вызова основной функции.**
+
+### bind -- привязка контекста
+
+Один простой декоратор вы уже видели ранее -- это функция [bind](/bind):
+
+```js
+function bind(func, context) {
+  return function() { 
+    return func.apply(context, arguments); 
+  };
+}
+```
+
+Вызов `bind(func, context)` возвращает обёртку, которая ставит `this` и передаёт основную работу функции `func`.
+
+### Декоратор -- измеритель времени
+
+Посмотрим немного более сложный декоратор, замеряющий время выполнения функции:
+
+**При помощи декоратора `timingDecorator` мы можем взять произвольную функцию и одним движением руки прикрутить к ней измеритель времени:**
+
+```js
+//+ run
+var timers = {}
+
+// прибавит время выполнения f к таймеру timers[timer]
+function timingDecorator(f, timer) {
+  return function() {
+    var start = performance.now();
+
+    var result = f.apply(this, arguments);
+
+    if (!timers[timer]) timers[timer] = 0;
+    timers[timer] += performance.now() - start;
+
+    return result;
+  }
+}
+
+// функция может быть произвольной, например такой:
+function fibonacci(n) {
+  return (n > 2) ? fibonacci(n-1) + fibonacci(n-2) : 1;
+}
+
+*!*
+// использование: завернём fibonacci в декоратор
+fibonacci = timingDecorator(fibonacci, "fibo");
+*/!*
+
+// неоднократные вызовы...
+alert( fibonacci(10) ); // 55
+alert( fibonacci(20) ); // 6765
+// ...
+
+*!*
+// в любой момент можно получить общее количество времени на вызовы
+alert( timers.fibo + 'мс' ); 
+*/!*
+```
+
+Обратим внимание на ключевую строку декоратора`var result = f.apply(this, arguments)`. 
+
+**Этот приём называется "форвардинг вызова" (от англ. forwarding): текущий контекст и аргументы через `apply` передаются в функцию, так что изнутри `f` всё выглядит так, как будто это была вызвана она, а не декоратор.**
+
+### Декоратор для проверки типа
+
+В JavaScript, как правило, пренебрегают проверками типа. В функцию, которая должна получать число, может быть передана строка, булево значение или даже объект. 
+
+Например:
+
+```js
+function sum(a, b) {
+  return a + b;
+}
+
+alert( sum(true, { name: "Вася", age: 35 }) ); // true[Object object]
+```
+
+Функция "как-то" отработала, но в реальной жизни такой вызов, скорее всего, будет следствием программной ошибки. Всё-таки `sum` предназначена для суммирования чисел, а не объектов.
+
+Многие языки программирования позволяют прямо в объявлении функции указать, какие типы данных имеют параметры. И это удобно, поскольку повышает надёжность кода.
+
+В JavaScript же проверку типов приходится делать дополнительным кодом в начале функции, который во-первых обычно  лень писать, а во-вторых он увеличивает общий объем текста, тем самым ухудшая читаемость.
+
+**Декораторы способны упростить рутинные, повторяющиеся задачи, вынести их из кода функции.**
+
+Например, создадим декоратор, который принимает функцию и массив, который описывает для какого аргумента какую проверку типа применять:
+
+```js
+//+ run
+// вспомогательная функция для проверки на число
+function checkNumber(value) {
+  return typeof value == 'number';
+}
+
+// декоратор, проверяющий типы для f
+// второй аргумент checks - массив с функциями для проверки
+function typeCheck(f, checks) {
+  return function() {
+    for(var i=0; i<arguments.length; i++) {
+      if (!checks[i](arguments[i])) {
+        alert("Некорректный тип аргумента номер " + i);
+        return;
+      }
+    }
+    return f.apply(this, arguments);
+  }
+}
+
+function sum(a, b) {
+  return a + b;
+}
+
+*!*
+// обернём декоратор для проверки
+sum = typeCheck(sum, [checkNumber, checkNumber]); // оба аргумента - числа
+*/!*
+
+// пользуемся функцией как обычно
+alert( sum(1,2 ) ); // 3, все хорошо
+
+*!*
+// а вот так - будет ошибка
+sum(true, null); // некорректный аргумент номер 0
+sum(1, ["array", "in", "sum?!?"]); // некорректный аргумент номер 1
+*/!*
+```
+
+Конечно, этот декоратор можно ещё расширять, улучшать, дописывать проверки, но... Вы уже поняли принцип, не правда ли? 
+
+**Один раз пишем декоратор и дальше просто применяем этот функционал везде, где нужно.**
+
+### Декоратор проверки доступа
+
+И наконец посмотрим ещё один, последний пример.
+
+Предположим, у нас есть функция `isAdmin()`, которая возвращает `true`, если у посетителя есть права администратора.
+
+Можно создать декоратор `checkPermissionDecorator`, который добавляет в любую функцию проверку прав:
+
+Например, создадим декоратор `checkPermissionDecorator(f)`. Он будет возвращать обертку, которая передает вызов `f` в том случае, если у посетителя достаточно прав:
+
+```js
+function checkPermissionDecorator(f) {
+  return function() {
+    if ( isAdmin() ) {
+      return f.apply(this, arguments); 
+    }
+    alert('Недостаточно прав');
+  }
+}
+```
+
+Использование декоратора:
+
+```js
+function save() { ... }
+
+save = checkPermissionDecorator(save);
+// Теперь вызов функции save() проверяет права
+```
+
+## Итого
+
+Декоратор -- это обёртка над функцией, которая модифицирует её поведение. При этом основную работу по-прежнему выполняет функция.
+
+**Декораторы можно не только повторно использовать, но и комбинировать!**
+
+Это кардинально повышает их выразительную силу. Декораторы можно рассматривать как своего рода "фичи" или возможности, которые можно "нацепить" на любую функцию. Можно один, а можно несколько.
+
+Скажем, используя декораторы, описанные выше, можно добавить к функции возможности по проверке типов данных, замеру времени и проверке доступа буквально одной строкой, не залезая при этом в её код, то есть (!) не увеличивая его сложность.
+
+Предлагаю вашему вниманию задачи, которые помогут выяснить, насколько вы разобрались в декораторах. Далее в учебнике мы ещё встретимся с ними.
+
+
+
+[head]
+<script>
+function timingDecorator(f) {
+  return function() {
+    var d = new Date();
+    var result = f.apply(this, arguments);
+    console.log("Функция заняла: " + (new Date - d) + "мс");
+    return result;
+  }
+}
+function bind(func, context) {
+  return function() { 
+    return func.apply(context, arguments); 
+  };
+}
+</script>
+[/head]
\ No newline at end of file
diff --git a/1-js/6-objects-more/index.md b/1-js/6-objects-more/index.md
new file mode 100644
index 00000000..e021da19
--- /dev/null
+++ b/1-js/6-objects-more/index.md
@@ -0,0 +1,3 @@
+# Методы объектов и контекст вызова
+
+Начинаем изучать объектно-ориентированную разработку -- как работают объекты и функции, что такое контекст вызова и почему его значение нельзя предсказать. Как, всё же, гарантировать правильный контекст и многие другие, не самые простые, темы.
\ No newline at end of file
diff --git a/1-js/7-js-misc/1-object-conversion/1-array-equals-string/solution.md b/1-js/7-js-misc/1-object-conversion/1-array-equals-string/solution.md
new file mode 100644
index 00000000..a0c488b5
--- /dev/null
+++ b/1-js/7-js-misc/1-object-conversion/1-array-equals-string/solution.md
@@ -0,0 +1,15 @@
+Если с одной стороны -- объект, а с другой -- нет, то сначала приводится объект. 
+
+В данном случае сравнение означает численное приведение. У массивов нет `valueOf`, поэтому вызывается `toString`, который возвращает список элементов через запятую.
+
+В данном случае, элемент только один - он и возвращается. Так что `['x']` становится `'x'`. Получилось `'x' == 'x'`, верно.
+
+P.S.
+По той же причине верны равенства:
+
+```js
+//+ run
+alert( ['x','y'] == 'x,y' ); // true
+alert( [] == '' ); // true
+```
+
diff --git a/1-js/7-js-misc/1-object-conversion/1-array-equals-string/task.md b/1-js/7-js-misc/1-object-conversion/1-array-equals-string/task.md
new file mode 100644
index 00000000..190bbeb4
--- /dev/null
+++ b/1-js/7-js-misc/1-object-conversion/1-array-equals-string/task.md
@@ -0,0 +1,11 @@
+# ['x'] == 'x'
+
+[importance 5]
+
+Почему результат `true` ?
+
+```js
+//+ run
+alert( ['x'] == 'x' );
+```
+
diff --git a/1-js/7-js-misc/1-object-conversion/2-tostring-valueof/solution.md b/1-js/7-js-misc/1-object-conversion/2-tostring-valueof/solution.md
new file mode 100644
index 00000000..9b2108d0
--- /dev/null
+++ b/1-js/7-js-misc/1-object-conversion/2-tostring-valueof/solution.md
@@ -0,0 +1,10 @@
+# Первый alert(foo)
+
+Возвращает строковое представление объекта, используя `toString`, т.е. `"foo"`.
+
+# Второй alert(foo + 1)
+Оператор `'+'` преобразует объект к примитиву, используя `valueOf`, так что результат: `3`.
+
+# Третий alert(foo + '3')
+
+То же самое, что и предыдущий случай, объект превращается в примитив `2`. Затем происходит сложение `2 + '3'`. Оператор `'+'` при сложении чего-либо со строкой приводит и второй операнд к строке, а затем применяет конкатенацию, так что результат -- строка `"23"`.
\ No newline at end of file
diff --git a/1-js/7-js-misc/1-object-conversion/2-tostring-valueof/task.md b/1-js/7-js-misc/1-object-conversion/2-tostring-valueof/task.md
new file mode 100644
index 00000000..2785680a
--- /dev/null
+++ b/1-js/7-js-misc/1-object-conversion/2-tostring-valueof/task.md
@@ -0,0 +1,24 @@
+# Преобразование
+
+[importance 5]
+
+Объявлен объект с `toString` и `valueOf`.
+
+Какими будут результаты `alert`?
+
+```js
+var foo = {
+    toString: function () {
+        return 'foo';
+    },
+    valueOf: function () {
+        return 2;
+    }
+};
+
+alert(foo);
+alert(foo + 1);
+alert(foo + "3");
+```
+
+Подумайте, прежде чем ответить.
\ No newline at end of file
diff --git a/1-js/7-js-misc/1-object-conversion/3-compare-empty-arrays/solution.md b/1-js/7-js-misc/1-object-conversion/3-compare-empty-arrays/solution.md
new file mode 100644
index 00000000..ef69d31c
--- /dev/null
+++ b/1-js/7-js-misc/1-object-conversion/3-compare-empty-arrays/solution.md
@@ -0,0 +1,34 @@
+# Ответ по первому равенству
+
+Два объекта равны только тогда, когда это один и тот же объект.
+
+В первом равенстве создаются два массива, это разные объекты, так что они неравны.
+
+# Ответ по второму равенству
+
+<ol>
+<li>Первым делом, обе части сравнения вычисляются. Справа находится `![]`. Логическое НЕ `'!'` преобразует аргумент к логическому типу. Массив является объектом, так что это `true`. Значит, правая часть становится `![] = !true = false`. Так что получили:
+
+```js
+alert( [] == false );
+```
+
+</li>
+<li>Проверка равенства между объектом и примитивом вызывает численное преобразование объекта.
+
+У массива нет `valueOf`, сработает `toString` и преобразует массив в список элементов, то есть - в пустую строку:
+
+```js
+alert( '' == false );
+```
+
+</li>
+<li>Сравнение различных типов вызывает численное преобразование слева и справа:
+
+```js
+alert( 0 == 0 );
+```
+
+Теперь результат очевиден.
+</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/7-js-misc/1-object-conversion/3-compare-empty-arrays/task.md b/1-js/7-js-misc/1-object-conversion/3-compare-empty-arrays/task.md
new file mode 100644
index 00000000..3883d1ef
--- /dev/null
+++ b/1-js/7-js-misc/1-object-conversion/3-compare-empty-arrays/task.md
@@ -0,0 +1,13 @@
+# Почему [] == [] неверно, а [ ] == ![ ] верно?
+
+[importance 5]
+
+Почему первое равенство -- неверно, а второе -- верно?
+
+```js
+//+ run
+alert( [] == [] );  // false
+alert( [] == ![] ); // true
+```
+
+Какие преобразования происходят при вычислении?
\ No newline at end of file
diff --git a/1-js/7-js-misc/1-object-conversion/4-object-types-conversion-questions/solution.md b/1-js/7-js-misc/1-object-conversion/4-object-types-conversion-questions/solution.md
new file mode 100644
index 00000000..863963ce
--- /dev/null
+++ b/1-js/7-js-misc/1-object-conversion/4-object-types-conversion-questions/solution.md
@@ -0,0 +1,33 @@
+
+
+```js
+new Date(0) - 0 = 0 // (1)
+new Array(1)[0] + "" = "undefined" // (2)
+({})[0]
 = undefined // (3)
+[1] + 1 = "11" // (4)
+[1,2] + [3,4] = "1,23,4" // (5)
+[] + null + 1 = "null1" // (6)
+[[0]][0][0] = 0 // (7)
+({} + {}) = "[object Object][object Object]" // (8)
+```
+
+<ol>
+<li>`new Date(0)` -- дата, созданная по миллисекундам и соответствующая 0мс от 1 января 1970 года 00:00:00 UTC. Оператор минус `-` преобразует дату обратно в число миллисекунд, то есть в `0`.</li>
+<li>`new Array(num)` при вызове с единственным аргументом-числом создаёт массив данной длины, без элементов. Поэтому его нулевой элемент равен `undefined`, при сложении со строкой получается строка `"undefined"`.</li> 
+<li>Фигурные скобки -- это создание пустого объекта, у него нет свойства `'0'`. Так что значением будет `undefined`.
+Обратите внимание на внешние, круглые скобки. Если их убрать и запустить `{}[0]` в отладочной консоли браузера -- будет `0`, т.к. скобки `{}` будут восприняты как пустой блок кода, после которого идёт массив.</li>
+<li>Массив преобразуется в строку `"1"`. Оператор `"+"` при сложении со строкой приводит второй аргумент к строке -- значит будет `"1" + "1" = "11"`.</li>
+<li>Массивы приводятся к строке и складываются.</li>
+<li>Массив преобразуется в пустую строку `"" + null + 1`, оператор `"+"` видит, что слева строка и преобразует `null` к строке, получается `"null" + 1`, и в итоге `"null1"`.</li>
+<li>`[[0]]` -- это вложенный массив `[0]`  внутри внешнего `[ ]`. Затем мы берём от него нулевой элемент, и потом еще раз.
+
+Если это непонятно, то посмотрите на такой пример:
+
+```js
+alert( [1,[0],2][1] );
+```
+
+Квадратные скобки после массива/объекта обозначают не другой массив, а взятие элемента.
+</li>
+<li>Каждый объект преобразуется к примитиву. У встроенных объектов `Object` нет подходящего `valueOf`, поэтому используется `toString`, так что складываются в итоге строковые представления объектов.</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/7-js-misc/1-object-conversion/4-object-types-conversion-questions/task.md b/1-js/7-js-misc/1-object-conversion/4-object-types-conversion-questions/task.md
new file mode 100644
index 00000000..e85a68bc
--- /dev/null
+++ b/1-js/7-js-misc/1-object-conversion/4-object-types-conversion-questions/task.md
@@ -0,0 +1,17 @@
+# Вопросник по преобразованиям, для объектов
+
+[importance 5]
+
+Подумайте, какой результат будет у выражений ниже. Когда закончите -- сверьтесь с решением.
+
+```js
+new Date(0) - 0
+new Array(1)[0] + ""
+({})[0]

+[1] + 1
+[1,2] + [3,4]
+[] + null + 1
+[[0]][0][0]
+({} + {})
+```
+
diff --git a/1-js/7-js-misc/1-object-conversion/5-sum-many-brackets/solution.md b/1-js/7-js-misc/1-object-conversion/5-sum-many-brackets/solution.md
new file mode 100644
index 00000000..c670bd4d
--- /dev/null
+++ b/1-js/7-js-misc/1-object-conversion/5-sum-many-brackets/solution.md
@@ -0,0 +1,59 @@
+# Подсказка
+
+Чтобы `sum(1)`, а также `sum(1)(2)` можно было вызвать новыми скобками -- результатом `sum` должна быть функция.
+
+Но эта функция также должна уметь превращаться в число. Для этого нужно дать ей соответствующий `valueOf`. А если мы хотим, чтобы и в строковом контексте она вела себя так же -- то `toString`.
+
+# Решение
+
+Функция, которая возвращается `sum`, должна накапливать значение при каждом вызове.
+
+Удобнее всего хранить его в замыкании, в переменной `currentSum`. Каждый вызов прибавляет к ней очередное значение:
+
+```js
+//+ run
+function sum(a) {
+  
+  var currentSum = a;
+  
+  function f(b) {
+    currentSum += b;
+    return f;
+  }
+  
+  f.toString = function() { return currentSum; };
+  
+  return f;
+}
+
+alert( sum(1)(2) );  // 3
+alert( sum(5)(-1)(2) );  // 6
+alert( sum(6)(-1)(-2)(-3) );  // 0
+alert( sum(0)(1)(2)(3)(4)(5) );  // 15
+```
+
+При внимательном взгляде на решение легко заметить, что функция `sum` срабатывает только один раз. Она возвращает функцию `f`.
+
+Затем, при каждом запуске функция `f` добавляет параметр к сумме `currentSum`, хранящейся в замыкании, и возвращает сама себя.
+
+**В последней строчке `f` нет рекурсивного вызова.** 
+
+Вот так была бы рекурсия:
+
+```js
+function f(b) {
+  currentSum += b;
+  return f(); // <-- подвызов
+}
+```
+
+А в нашем случае, мы просто возвращаем саму функцию, ничего не вызывая.
+
+```js
+function f(b) {
+  currentSum += b;
+  return f; // <-- не вызывает сама себя, а возвращает ссылку на себя
+}
+```
+
+Эта `f` используется при следующем вызове, опять возвратит себя, и так сколько нужно раз. Затем, при использовании в строчном или численном контексте -- сработает `toString`, который вернет текущую сумму `currentSum`.
\ No newline at end of file
diff --git a/1-js/7-js-misc/1-object-conversion/5-sum-many-brackets/task.md b/1-js/7-js-misc/1-object-conversion/5-sum-many-brackets/task.md
new file mode 100644
index 00000000..b220c704
--- /dev/null
+++ b/1-js/7-js-misc/1-object-conversion/5-sum-many-brackets/task.md
@@ -0,0 +1,17 @@
+# Сумма произвольного количества скобок
+
+[importance 2]
+
+Напишите функцию `sum`, которая будет работать так:
+
+```js
+sum(1)(2) == 3; // 1 + 2
+sum(1)(2)(3) == 6; // 1 + 2 + 3
+sum(5)(-1)(2) == 6
+sum(6)(-1)(-2)(-3) == 0
+sum(0)(1)(2)(3)(4)(5) == 15
+```
+
+Количество скобок может быть любым.
+
+Пример такой функции для двух аргументов -- есть в решении задачи [](/task/closure-sum).
\ No newline at end of file
diff --git a/1-js/7-js-misc/1-object-conversion/article.md b/1-js/7-js-misc/1-object-conversion/article.md
new file mode 100644
index 00000000..b8c1e213
--- /dev/null
+++ b/1-js/7-js-misc/1-object-conversion/article.md
@@ -0,0 +1,239 @@
+# Преобразование объектов: toString и valueOf
+
+Ранее, в главе [](/types-conversion) мы рассматривали преобразование типов для примитивов. Теперь добавим в нашу картину мира объекты.
+
+Бывают операции, при которых объект должен быть преобразован в примитив.
+[cut]
+Например:
+
+<ul>
+<li>Строковое преобразование -- если объект выводится через `alert(obj)`.</li>
+<li>Численное преобразование -- при арифметических операциях, сравнении с примитивом.</li>
+<li>Логическое преобразование -- при `if(obj)` и других логических операциях.</li>
+</ul>
+
+Рассмотрим эти преобразования по очереди.
+
+## Логическое преобразование
+
+Проще всего -- с логическим преобразованием.
+
+**Любой объект в логическом контексте -- `true`, даже если это пустой массив `[]` или объект `{}`.**
+
+```js
+//+ run
+if ( {} && [] ) {
+  alert("Все объекты - true!"); // alert сработает
+}
+```
+
+## Строковое преобразование
+
+Строковое преобразование проще всего увидеть, если вывести объект при помощи `alert`:
+
+```js
+//+ run
+var user = { 
+  firstName: 'Василий' 
+};
+
+alert(user); // [object Object]
+```
+
+**Как видно, содержимое объекта не вывелось. Это потому, что стандартным строковым представлением пользовательского объекта является строка `"[object Object]"`**.
+
+Такой вывод объекта не содержит интересной информации. Поэтому имеет смысл его поменять на что-то более полезное. 
+
+**Если в объекте присутствует метод `toString`, который возвращает примитив, то он используется для преобразования.**
+
+```js
+//+ run
+var user = {
+
+  firstName: 'Василий',
+
+  *!*toString:*/!* function() {
+    return 'Пользователь ' + this.firstName;
+  }
+};
+
+alert( user );  // Пользователь Василий
+```
+
+[smart header="Результатом `toString` может быть любой примитив"]
+Метод `toString` не обязан возвращать именно строку. 
+
+Его результат может быть любого примитивного типа. Например, это может быть число, как в примере ниже:
+
+```js
+//+ run
+var obj = {
+  toString: function() { return 123; }
+};
+
+alert(obj); // 123
+```
+
+Поэтому мы и называем его здесь *"строковое преобразование"*, а не "преобразование к строке".
+[/smart]
+
+Все объекты, включая встроенные, имеют свои реализации метода `toString`, например:
+
+```js
+//+ run
+alert( [1,2] );    // toString для массивов выводит список элементов "1,2"
+alert( new Date ); // toString для дат выводит дату в виде строки
+alert( function() { } ); // toString для функции выводит её код
+```
+
+## Численное преобразование
+
+Для численного преобразования объекта используется метод `valueOf`, а если его нет -- то `toString`:
+
+```js
+//+ run
+var room = {
+  number: 777,
+
+  valueOf: function() { return this.number; },
+  toString: function() { return this.number; }
+};
+
+alert( +room );  // 777, *!*вызвался valueOf*/!*
+
+delete room.valueOf; // *!*valueOf удалён*/!*
+
+alert( +room );  // 777, *!*вызвался toString*/!*
+```
+
+Метод `valueOf` обязан возвращать примитивное значение, иначе его результат будет проигнорирован. При этом -- не обязательно числовое.
+
+[smart header="У большинства объектов нет `valueOf`"]
+**У большинства встроенных объектов такого `valueOf` нет, поэтому численное и строковое преобразования для них работают одинаково.**
+
+Исключением является объект `Date`, который поддерживает оба типа преобразований:
+
+```js
+//+ run
+alert( new Date() ); // toString: Дата в виде читаемой строки
+alert( +new Date() ); // valueOf: кол-во миллисекунд, прошедших с 01.01.1970
+```
+
+[/smart]
+
+[smart header="Детали спецификации"]
+Если посмотреть в стандарт, то в пункте [15.2.4.4](http://es5.github.com/x15.2.html#x15.2.4.4) говорится о том, что `valueOf` есть у любых объектов. Но он ничего не делает, просто возвращает сам объект (не-примитивное значение!), а потому игнорируется.
+[/smart]
+
+## Две стадии преобразования
+
+Если необходимо, полученный из объекта примитив может быть преобразован дальше.
+
+Например, рассмотрим применение к объекту операции `==`:
+
+```js
+//+ run
+var obj = { 
+  valueOf: function() { return 1; }
+};
+
+alert(obj == true); // true
+```
+
+Объект `obj` был сначала преобразован в примитив, используя численное преобразование, получилось `1 == true`. 
+
+Далее, так как значения всё ещё разных типов, применяются правила преобразования примитивов, результат: `true`.
+
+То же самое -- при сложении с объектом при помощи `+`:
+
+```js
+//+ run
+var obj = { 
+  valueOf: function() { return 1; }
+};
+
+alert(obj + "test"); // 1test
+```
+
+Или вот, для разности объектов:
+
+```js
+//+ run
+var a = { 
+  valueOf: function() { return "1"; }
+};
+var b = { 
+  valueOf: function() { return "2"; }
+};
+
+alert(a - b); // "1" - "2" = -1
+```
+
+[warn header="Исключение: `Date`"]
+Обычно арифметические операторы и сравнения используют численное преобразование, но есть исключение: объект `Date`.
+
+Он преобразуется в примитив, используя строковое преобразование. С этим можно столкнуться в операторе `"+"`:
+
+```js
+//+ run
+// бинарный вариант, преобразование к примитиву
+alert( new Date + "" ); // "строка даты"
+
+// унарный вариант, наравне с - * / и другими приводит к числу
+alert( +new Date ); // число миллисекунд
+```
+
+Это исключение явно прописано в стандарте и является единственным в своём роде.
+[/warn]
+
+[warn header="Как испугать Java-разработчика"]
+В языке Java (это не JavaScript, другой язык, здесь приведён для примера) логические значения можно создавать, используя синтаксис `new Boolean(true/false)`, например `new Boolean(true)`.
+
+В JavaScript тоже есть подобная возможность, которая возвращает "объектную обёртку" для логического значения. 
+
+Эта возможность давно существует лишь для совместимости, она и не используется на практике, поскольку приводит к странным результатам. Некоторые из них могут сильно удивить человека, не привыкшего к JavaScript, например:
+
+```js
+//+ run
+var value = new Boolean(false); 
+if ( value ) {
+  alert(true); // сработает!
+}
+```
+
+Почему запустился `alert`? Ведь в `if` находится `false`... Проверим:
+
+```js
+//+ run
+var value = new Boolean(false); 
+
+*!*
+alert(value); // выводит false, все ок..
+*/!*
+
+if ( value ) {
+  alert(true);  // ..но тогда почему выполняется alert в if ?!? 
+}
+```
+
+Дело в том, что `new Boolean` -- это не примитивное значение, а объект. Поэтому в логическом контексте он преобразуется к`true`, в результате работает первый пример.
+
+А второй пример вызывает `alert`, который преобразует объект к строке, и он становится `"false"`. 
+
+**В JavaScript вызовы `new Boolean/String/Number` не используются, а используются простые вызовы соответствующих функций, они преобразуют значение в примитив нужного типа, например `Boolean(val) === !!val`.**
+[/warn]
+
+## Итого
+
+<ul>
+<li>В логическом контексте объект -- всегда `true`.</li>
+<li>При строковом преобразовании объекта используется его метод `toString`. Он должен возвращать примитивное значение, причём не обязательно именно строку.
+</li>
+<li>Для численного преобразования используется метод `valueOf`, который также может возвратить любое примитивное значение. У большинства объектов `valueOf` не работает (возвращает сам объект и потому игнорируется), при этом для численного преобразования используется `toString`.</li>
+</ul> 
+
+Полный алгоритм преобразований есть в спецификации EcmaScript, смотрите пункты [11.8.5](http://es5.github.com/x11.html#x11.8.5), [11.9.3](http://es5.github.com/x11.html#x11.9.3), а также [9.1](http://es5.github.com/x9.html#x9.1) и [9.3](http://es5.github.com/x9.html#x9.3).
+
+
+
+
diff --git a/1-js/7-js-misc/2-class-property/article.md b/1-js/7-js-misc/2-class-property/article.md
new file mode 100644
index 00000000..fca95e60
--- /dev/null
+++ b/1-js/7-js-misc/2-class-property/article.md
@@ -0,0 +1,103 @@
+# Секретное свойство [[Class]]
+
+Для встроенных объектов есть одна "секретная" возможность узнать их тип, которая связана с методом `toString`. 
+
+**Во всех встроенных объектах есть специальное свойство `[[Class]]`, в котором хранится информация о его типе или конструкторе.**
+
+Оно взято в квадратные скобки, так как это свойство -- внутреннее. Явно получить его нельзя, но можно прочитать его "в обход", воспользовавшись методом `toString` из `Object`.
+
+[cut]
+
+## Получение [[Class]]
+
+Вернёмся к примеру, который видели раньше:
+
+```js
+//+ run
+var obj = {};
+alert( obj ); // [object Object]
+```
+
+**В выводе стандартного `toString` для объектов внутри `[object ...]` указано как раз значение `[[Class]]`.**
+
+Для обычного объекта это как раз и есть `"Object"`, но если бы такой `toString` запустить для даты, то будет `[object Date]`, для массивов -- `[object Array]` и т.п.
+
+К сожалению или к счастью, но большинство встроенных объектов в JavaScript имеют свой собственный метод `toString`: для массивов он выводит элементы через запятую, для дат -- строчное представление и так далее.
+
+То есть, просто вызов `[1,2,3].toString()` вернёт нам `1,2,3` и никакой информации про `[[Class]]`.
+
+Поэтому для получения `[[Class]]` мы одолжим функцию `toString` у стандартного объекта и запустим её в контексте тех значений, для которых нужно получить тип. В этом нам поможет метод `call`:
+
+```js
+//+ run
+var toClass = {}.toString; // (1)
+
+var arr = [1,2];
+alert( toClass.call(arr) ); // (2) [object Array]
+
+var date = new Date;
+alert( toClass.call(date) ); // [object Date]
+
+var type = toClass.call(date).slice(8, -1); // (3)
+alert(type); // Date
+```
+
+Разберем происходящее более подробно.
+
+<ol>
+<li>Можно переписать эту строку в две:
+
+```js
+var obj = {};
+var toClass = obj.toString;
+```
+
+Иначе говоря, мы создаём пустой объект `{}` и копируем ссылку на его метод `toString` в переменную `toClass`.
+
+**Для получения `[[Class]]` нужна именно внутренняя реализация `toString` стандартного объекта `Object`, другая не подойдёт.**</li>
+<li>Вызываем скопированный метод в контексте нужного объекта `obj`. 
+
+Мы могли бы поступить проще -- одолжить метод под другим названием:
+
+```js
+//+ run
+var arr = [1,2];
+arr.toClass = {}.toString;
+
+alert( arr.toClass() ); // [object Array]
+```
+
+...Но зачем копировать лишнее свойство в объект? Синтаксис `toClass.call(arr)` делает то же самое, поэтому используем его.
+</li>
+<li>Всё, класс получен. При желании можно убрать обёртку `[object ...]`, взяв подстроку вызовом `slice(8,-1)`.</li>
+</ol>
+
+Метод также можно использовать с примитивами:
+
+```js
+//+ run
+alert( {}.toString.call(123) ); // [object Number]
+alert( {}.toString.call("строка") ); // [object String]
+```
+
+[warn header="Вызов `{}.toString` в консоли может выдать ошибку"]
+При тестировании кода в консоли вы можете обнаружить, что если ввести в командную строку `{}.toString.call(...)` -- будет ошибка. С другой стороны, вызов `alert( {}.toString... )` -- работает.
+
+Эта ошибка возникает потому, что фигурные скобки `{ }` в основном потоке кода интерпретируются как блок. Интерпретатор читает `{}.toString.call(...)` так:
+
+```js
+{ } // пустой блок кода
+.toString.call(...) // а что это за точка в начале? не понимаю, ошибка!
+```
+
+Фигурные скобки считаются объектом, только если они находятся в контексте выражения. В частности, оборачивание в скобки `( {}.toString... )` тоже сработает нормально.
+[/warn]
+
+## Итого
+
+<ul>
+<li>Свойство `[[Class]]` позволяет получить тип для встроенных объектов. Далее мы будем рассматривать создание своих объектов через функцию-конструктор, с ними `[[Class]]` не работает.</li>
+<li>Для доступа к `[[Class]]` используется `{}.toString.call(obj).slice(8, -1)`.</li>
+</ul>
+
+Обычно в JavaScript используется утиная типизация. Свойство `[[Class]]` -- самое надёжное средство проверки типа встроенных объектов, но обычно утиной типизации вполне хватает.
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-json/1-serialize-object/solution.md b/1-js/7-js-misc/3-json/1-serialize-object/solution.md
new file mode 100644
index 00000000..ee40c197
--- /dev/null
+++ b/1-js/7-js-misc/3-json/1-serialize-object/solution.md
@@ -0,0 +1,12 @@
+
+
+```js
+var leader = { 
+  name: "Василий Иванович",
+  age: 35
+};
+
+var leaderStr = JSON.stringify(leader);
+leader = JSON.parse(leaderStr);
+```
+
diff --git a/1-js/7-js-misc/3-json/1-serialize-object/task.md b/1-js/7-js-misc/3-json/1-serialize-object/task.md
new file mode 100644
index 00000000..b5b7ba1b
--- /dev/null
+++ b/1-js/7-js-misc/3-json/1-serialize-object/task.md
@@ -0,0 +1,14 @@
+# Превратите объект в JSON
+
+[importance 3]
+
+Превратите объект `leader` из примера ниже в JSON:
+
+```js
+var leader = { 
+  name: "Василий Иванович",
+  age: 35
+};
+```
+
+После этого прочитайте получившуюся строку обратно в объект. 
diff --git a/1-js/7-js-misc/3-json/2-serialize-object-circular/solution.md b/1-js/7-js-misc/3-json/2-serialize-object-circular/solution.md
new file mode 100644
index 00000000..a5738a55
--- /dev/null
+++ b/1-js/7-js-misc/3-json/2-serialize-object-circular/solution.md
@@ -0,0 +1,63 @@
+# Ответ на первый вопрос
+
+Обычный вызов `JSON.stringify(team)` выдаст ошибку, так как объекты `leader` и `soldier` внутри структуры ссылаются друг на друга. 
+
+Формат JSON не предусматривает средств для хранения ссылок.
+
+# Варианты решения 
+
+Чтобы превращать такие структуры в JSON, обычно используются два подхода:
+
+<ol>
+<li>Добавить в `team` свой код `toJSON`:
+
+```js
+team.toJSON = function() {
+  /* свой код, который может создавать копию объекта без круговых ссылок и передавать управление JSON.stringify */
+}
+```
+
+При этом, конечно, понадобится и своя функция чтения из JSON, которая будет восстанавливать объект, а затем дополнять его круговыми ссылками.
+</li>
+<li>Можно учесть возможную проблему в самой структуре, используя вместо ссылок `id`. Как правило, это несложно, ведь на сервере у данных тоже есть идентификаторы.
+
+Изменённая структура может выглядеть так:
+
+```js
+var leader = { 
+  id: 12,
+  name: "Василий Иванович"
+};
+
+var soldier = {
+  id: 51,
+  name: "Петька"
+};
+
+*!*
+// поменяли прямую ссылку на ID
+leader.soldierId = 51;
+soldier.leaderId = 12;
+*/!*
+
+var team = {
+ 12: leader,
+ 51: soldier
+};
+```
+
+..Но действительно ли это решение будет оптимальным? Использовать структуру стало сложнее, и вряд ли это изменение стоит делать лишь из-за JSON. Вот если есть другие преимущества, тогда можно подумать.
+</li>
+</ol>
+
+Универсальный вариант подхода, описанного выше -- это использование особой реализации JSON, которая не входит в стандарт и поддерживает расширенный формат для поддержки ссылок. 
+
+Она, к примеру, есть во фреймворке Dojo.
+
+При вызове `dojox.json.ref.toJson(team)` будет создано следующее строковое представление:
+
+```js
+[{"name":"Василий Иванович","soldier":{"name":"Петька","leader":{"$ref":"#0"}}},{"$ref":"#0.soldier"}]
+```
+
+Метод разбора такой строки -- также свой: `dojox.json.ref.fromJson`.
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-json/2-serialize-object-circular/task.md b/1-js/7-js-misc/3-json/2-serialize-object-circular/task.md
new file mode 100644
index 00000000..8f470c47
--- /dev/null
+++ b/1-js/7-js-misc/3-json/2-serialize-object-circular/task.md
@@ -0,0 +1,26 @@
+# Превратите объекты со ссылками в JSON
+
+[importance 3]
+
+Превратите объект `team` из примера ниже в JSON:
+
+```js
+var leader = { 
+  name: "Василий Иванович"
+};
+
+var soldier = {
+  name: "Петька"
+};
+
+// эти объекты ссылаются друг на друга!
+leader.soldier = soldier;
+soldier.leader = leader;
+
+var team = [ leader, soldier ];
+```
+
+<ol>
+<li>Может ли это сделать прямой вызов `JSON.stringify(team)`? Если нет, то почему?</li>
+<li>Какой подход вы бы предложили для чтения и восстановления таких объектов?</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/7-js-misc/3-json/article.md b/1-js/7-js-misc/3-json/article.md
new file mode 100644
index 00000000..2b416cc1
--- /dev/null
+++ b/1-js/7-js-misc/3-json/article.md
@@ -0,0 +1,366 @@
+# Формат JSON, метод toJSON
+
+В этой главе мы рассмотрим работу с форматом [JSON](http://ru.wikipedia.org/wiki/JSON), который используется для представления объектов в виде строки. 
+
+Это один из наиболее удобных форматов данных при взаимодействии с JavaScript. Если нужно с сервера взять объект с данными и передать на клиенте, то в качестве промежуточного формата -- для передачи по сети, почти всегда используют именно его.
+
+В современных браузерах есть замечательные методы, знание тонкостей которых делает операции с JSON простыми и комфортными.
+
+[cut]
+
+## Формат JSON
+
+Данные в формате JSON ([RFC 4627](http://tools.ietf.org/html/rfc4627)) представляют собой:
+<ul>
+<li>JavaScript-объекты `{ ... }` или</li>
+<li>Массивы `[ ... ]` или</li>
+<li>Значения одного из типов:
+<ul>
+<li>строки в двойных кавычках,</li>
+<li>число,</li>
+<li>логическое значение `true`/`false`,</li>
+<li>`null`.</li>
+</ul>
+</li>
+</ul>
+
+Почти все языки программирования имеют библиотеки для преобразования объектов в формат JSON.
+
+Основные методы для работы с JSON в JavaScript -- это:
+<ul>
+<li>`JSON.parse` -- читает объекты из строки в формате JSON.</li>
+<li>`JSON.stringify` -- превращает объекты в строку в формате JSON, используется, когда нужно из JavaScript передать данные по сети.</li>
+</ul>
+
+Далее мы разберём их подробнее.
+
+## Метод JSON.parse
+
+Вызов `JSON.parse(str)` превратит строку с данными в формате JSON в JavaScript-объект/массив/значение.
+
+Например:
+
+```js
+//+ run
+var numbers = "[0, 1, 2, 3]";
+
+numbers = JSON.parse(numbers);
+
+alert( numbers[1] ); // 1
+```
+
+Или так:
+
+```js
+//+ run
+var user = '{ "name": "Вася", "age": 35, "isAdmin": false, friends: [0,1,2,3] }';
+
+user = JSON.parse(user);
+
+alert( user.friends[1] ); // 1
+```
+
+Данные могут быть сколь угодно сложными, объекты и массивы могут включать в себя другие объекты и массивы. Главное чтобы они соответствовали формату.
+
+[warn header="JSON-объекты ≠ JavaScript-объекты"]
+**Объекты в формате JSON похожи на обычные JavaScript-объекты, но отличаются от них более строгими требованиями к строкам -- они должны быть именно в двойных кавычках.**
+
+В частности, первые два свойства объекта ниже -- некорректны:
+
+```js
+{
+  *!*name*/!*: "Вася",       // ошибка: ключ name без кавычек!
+  "surname": *!*'Петров'*/!*,// ошибка: одинарные кавычки у значения 'Петров'!
+  "age": 35           // .. а тут всё в порядке.
+  "isAdmin": false    // и тут тоже всё ок
+}
+```
+
+Кроме того, в формате JSON не поддерживаются комментарии. Он предназначен только для передачи данных.
+[/warn]
+
+## Умный разбор: JSON.parse(str, reviver)
+
+Метод `JSON.parse` поддерживает и более сложные алгоритмы разбора.
+
+Например, мы получили с сервера объект с данными события `event`.
+
+Он выглядит так:
+
+```js
+// title: название собятия, date: дата события
+var str = '{"title":"Конференция","date":"2012-11-30T12:00:00.000Z"}';
+```
+
+...И теперь нужно *восстановить* его, то есть превратить в JavaScript-объект.
+
+Попробуем вызвать для этого `JSON.parse`:
+
+```js
+//+ run
+var str = '{"title":"Конференция","date":"2014-11-30T12:00:00.000Z"}';
+
+var event = JSON.parse(str);
+
+*!*
+alert( event.date.getDate() ); // ошибка!
+*/!*
+```
+
+...Увы, ошибка!
+
+Дело в том, что значением `event.date` является строка, а отнюдь не объект `Date`. Откуда методу `JSON.parse` знать, что нужно превратить строку именно в дату?
+
+**Для интеллектуального восстановления из строки у `JSON.parse(str, reviver)` есть второй параметр `reviver`, который является функцией `function (key, value)`.**
+
+Если она указана, то в процессе чтения объекта из строки `JSON.parse` передаёт ей по очереди все создаваемые пары ключ-значение и может возвратить либо преобразованное значение, либо `undefined`, если его нужно пропустить.
+
+В данном случае мы можем создать правило, что ключ `date` всегда означает дату:
+
+```js
+//+ run
+// дата в строке - в формате UTC
+var str = '{"title":"Конференция","date":"2014-11-30T12:00:00.000Z"}';
+
+*!*
+var event = JSON.parse(str, function(key, value) {
+  if (key == 'date') return new Date(value);
+  return value;
+});
+*/!*
+
+alert( event.date.getDate() ); // теперь сработает!
+```
+
+Кстати, эта возможность работает и для вложенных объектов тоже:
+
+```js
+//+ run
+var schedule = '{ \
+  "events": [ \
+    {"title":"Конференция","date":"2014-11-30T12:00:00.000Z"}, \
+    {"title":"День рождения","date":"2015-04-18T12:00:00.000Z"} \
+  ]\
+}';
+
+schedule = JSON.parse(schedule, function(key, value) {
+  if (key == 'date') return new Date(value);
+  return value;
+});
+
+*!*
+alert( schedule.events[1].date.getDate() ); // сработает!
+*/!*
+```
+
+## Сериализация, метод JSON.stringify
+
+Метод `JSON.stringify(value, replacer, space)` преобразует (*"сериализует"*) значение в JSON-строку. 
+
+Он поддерживается во всех браузерах, включая IE8+. Для более IE7- рекомендуется библиотека [JSON-js](https://github.com/douglascrockford/JSON-js), которая добавляет аналогичную функциональность.
+
+Пример использования:
+
+```js
+//+ run
+var event = {
+  title: "Конференция",
+  date: "сегодня"
+};
+
+var str = JSON.stringify(event);
+alert( str ); // {"title":"Конференция","date":"сегодня"}
+
+// Обратное преобразование.
+event = JSON.parse(str);
+```
+
+**При сериализации объекта вызывается его метод `toJSON`.**
+
+Если такого метода нет -- перечисляются его свойства, кроме функций.
+
+Посмотрим это в примере посложнее:
+
+```js
+//+ run
+var room = {
+  number: 23,
+  occupy: function() { 
+    alert(this.number);
+  }
+};
+
+event = {
+  title: "Конференция",
+  date: new Date(Date.UTC(2014, 0, 1)),
+  room: room
+};
+
+alert( JSON.stringify(event) );
+/*
+  {
+    "title":"Конференция",
+    "date":"2014-01-01T00:00:00.000Z",  // (1)
+    "room": {"number":23}               // (2)
+  }
+*/
+```
+
+Обратим внимание на два момента:
+<ol>
+<li>Дата превратилась в строку. Это не случайно: у всех дат есть встроенный метод `toJSON`. Его результат в данном случае -- строка в таймзоне UTC.</li>
+<li>У объекта `room` нет метода `toJSON`. Поэтому он сериализуется перечислением свойств.
+
+Мы, конечно, могли бы добавить такой метод, тогда в итог попал бы его результат:
+
+```js
+//+ run
+var room = {
+  number: 23,
+*!*
+  toJSON: function() { 
+    return this.number;
+  }
+*/!*
+};
+
+alert( JSON.stringify(room) ); // 23
+```
+
+</li>
+</ol>
+
+### Исключение свойств
+
+Попытаемся преобразовать в JSON объект, содержащий ссылку на DOM.
+
+Например:
+
+```js
+//+ run
+var user = {
+  name: "Вася",
+  age: 25,
+  window: window 
+};
+
+*!*
+alert( JSON.stringify(user) ); // ошибка!
+// TypeError: Converting circular structure to JSON (текст из Chrome)
+*/!*
+```
+
+Произошла ошибка! В чём же дело, неужели некоторые объекты запрещены? Как видно из текста ошибки -- дело совсем в другом. Глобальный объект `window` -- сложная структура с кучей встроенных свойств и круговыми ссылками, поэтому его преобразовать невозможно. Да и нужно ли?
+
+**Во втором параметре `JSON.stringify(value, replacer)` можно указать массив свойств, которые подлежат сериализации.**
+
+Например:
+
+```js
+//+ run
+var user = {
+  name: "Вася",
+  age: 25,
+  window: window 
+};
+
+*!*
+alert( JSON.stringify(user, ["name", "age"]) ); 
+// {"name":"Вася","age":25}
+*/!*
+```
+
+Для более сложных ситуаций вторым параметром можно передать функцию `function(key, value)`, которая возвращает сериализованное `value` либо `undefined`, если его не нужно включать в результат:
+
+```js
+//+ run
+var user = {
+  name: "Вася",
+  age: 25,
+  window: window  
+};
+
+*!*
+var str = JSON.stringify(user, function(key, value) {
+  if (key == 'elem') return undefined;
+  return value;
+} );
+*/!*
+
+alert(str); // {"name":"Вася","age":25}
+```
+
+В примере выше функция пропустит свойство с названием `elem`. Для остальных она просто возвращает значение, передавая его стандартному алгоритму. А могла бы и как-то обработать.
+
+**Функция `replacer` работает рекурсивно.**
+
+То есть, если объект содержит вложенные объекты, массивы и т.п., то все они пройдут через `replacer`. 
+
+### Красивое форматирование
+
+В методе `JSON.stringify(value, replacer, space)` есть ещё третий параметр `space`.
+
+Если он является числом -- то уровни вложенности в JSON оформляются указанным количеством пробелов, если строкой -- вставляется эта строка.
+
+Например:
+
+```js
+//+ run
+var user = {
+  name: "Вася",
+  age: 25,
+  roles: {isAdmin: false, isEditor: true} 
+};
+
+*!*
+var str = JSON.stringify(user, "", 4);
+*/!*
+
+alert(str);
+/* Результат -- красиво сериализованный объект:
+{
+    "name": "Вася",
+    "age": 25,
+    "roles": {
+        "isAdmin": false,
+        "isEditor": true
+    }
+}
+*/
+```
+
+## Итого
+
+<ul>
+<li>JSON -- формат для представления объектов (и не только) в виде строки.</li>
+<li>Методы [JSON.parse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) и [JSON.stringify](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) позволяют интеллектуально преобразовать объект в строку и обратно.</li>
+<li>Для IE7- можно подключить библиотеку [json2](https://github.com/douglascrockford/JSON-js/blob/master/json2.js).</li>
+</ul>
+
+
+
+[head]
+<script>
+function voteSync(outputElem) {
+  var xhr = new XMLHttpRequest(); // (1)
+
+  xhr.open('GET', '/files/tutorial/ajax/xhr/vote.php', false); 
+  xhr.send(null);   // (2)
+
+  outputElem.innerHTML = xhr.responseText;  // (3)
+}
+
+function vote(outputElem) {
+  var xhr = new XMLHttpRequest();
+
+  xhr.open('GET', '/files/tutorial/ajax/xhr/vote.php', true);
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState != 4) return;
+    outputElem.innerHTML = xhr.responseText;
+  }
+
+  xhr.send(null);
+}
+</script>
+[/head]
\ No newline at end of file
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/1-output-numbers-100ms/solution.md b/1-js/7-js-misc/4-setTimeout-setInterval/1-output-numbers-100ms/solution.md
new file mode 100644
index 00000000..f6e7fbcd
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/1-output-numbers-100ms/solution.md
@@ -0,0 +1,17 @@
+
+
+```js
+//+ run
+function printNumbersInterval() {
+  var i = 1;
+  var timerId = setInterval(function() {
+    console.log(i);
+    if (i == 20) clearInterval(timerId);
+    i++;
+  }, 100);
+}
+
+// вызов
+printNumbersInterval();
+```
+
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/1-output-numbers-100ms/task.md b/1-js/7-js-misc/4-setTimeout-setInterval/1-output-numbers-100ms/task.md
new file mode 100644
index 00000000..dc2364f4
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/1-output-numbers-100ms/task.md
@@ -0,0 +1,21 @@
+# Вывод чисел каждые 100мс
+
+[importance 5]
+
+Напишите функцию `printNumbersInterval()`, которая последовательно выводит в консоль числа от 1 до 20, с интервалом между числами 100мс. То есть, весь вывод должен занимать 2000мс, в течение которых каждые 100мс в консоли появляется очередное число.
+
+Нажмите на кнопку, открыв консоль, для демонстрации:
+<script> 
+function printNumbersInterval() {
+  var i = 1;
+  var timerId = setInterval(function() {
+    console.log(i);
+    if (i == 20) clearInterval(timerId);
+    i++;
+  }, 100);
+}
+</script>
+<button onclick="printNumbersInterval()">printNumbersInterval()</button>
+</script>
+
+P.S. Функция должна использовать `setInterval`.
\ No newline at end of file
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/2-output-numbers-100ms-settimeout/solution.md b/1-js/7-js-misc/4-setTimeout-setInterval/2-output-numbers-100ms-settimeout/solution.md
new file mode 100644
index 00000000..bc23dd04
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/2-output-numbers-100ms-settimeout/solution.md
@@ -0,0 +1,17 @@
+
+
+```js
+//+ run
+function printNumbersTimeout20_100() {
+  var i = 1;
+  var timerId = setTimeout(function go() {
+    console.log(i);
+    if (i < 20) setTimeout(go, 100);
+    i++;
+  }, 100);
+}
+
+// вызов
+printNumbersTimeout20_100();
+```
+
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/2-output-numbers-100ms-settimeout/task.md b/1-js/7-js-misc/4-setTimeout-setInterval/2-output-numbers-100ms-settimeout/task.md
new file mode 100644
index 00000000..8334753f
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/2-output-numbers-100ms-settimeout/task.md
@@ -0,0 +1,5 @@
+# Вывод чисел каждые 100мс, через setTimeout
+
+[importance 5]
+
+Сделайте то же самое, что в задаче [](/task/output-numbers-100ms), но с использованием рекурсивного `setTimeout` вместо `setInterval`. 
\ No newline at end of file
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/3-highlight-tactics/solution.md b/1-js/7-js-misc/4-setTimeout-setInterval/3-highlight-tactics/solution.md
new file mode 100644
index 00000000..13c70041
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/3-highlight-tactics/solution.md
@@ -0,0 +1,5 @@
+**Нужно выбрать вариант 2, который гарантирует браузеру свободное время между выполнениями `highlight`.**
+
+Первый вариант может загрузить процессор на 100%, если `highlight` занимает время, близкое к 10мс или, тем более, большее чем 10мс, т.к. таймер не учитывает время выполнения функции. 
+
+Что интересно, в обоих случаях браузер не будет выводить предупреждение о том, что скрипт занимает много времени. Но от 100% загрузки процессора возможны притормаживания других операций. В общем, это совсем не то, что мы хотим, поэтому вариант 2.
\ No newline at end of file
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/3-highlight-tactics/task.md b/1-js/7-js-misc/4-setTimeout-setInterval/3-highlight-tactics/task.md
new file mode 100644
index 00000000..afe1d6fd
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/3-highlight-tactics/task.md
@@ -0,0 +1,34 @@
+# Для подсветки setInterval или setTimeout?
+
+[importance 5]
+
+Стоит задача: реализовать подсветку синтаксиса в длинном коде при помощи JavaScript, для онлайн-редактора кода. Это требует сложных вычислений, особенно загружает процессор генерация дополнительных элементов страницы, визуально осуществляющих подсветку. 
+
+Поэтому решаем обрабатывать не весь код сразу, что привело бы к зависанию скрипта, а разбить работу на части: подсвечивать по 20 строк раз в 10мс.
+
+Как мы знаем, есть два варианта реализации такой подсветки:
+
+<ol>
+<li>Через `setInterval`, с остановкой по окончании работы:
+
+```js
+timer = setInterval(function() {
+  if (есть еще что подсветить) highlight();
+  else clearInterval(timer);
+}, 10);
+```
+
+</li>
+<li>Через рекурсивный `setTimeout`:
+
+```js
+setTimeout(function go() {
+  highlight();
+  if (есть еще что подсветить) setTimeout(go, 10);
+}, 10);
+```
+
+</li>
+</ol>
+
+Какой из них стоит использовать? Почему?
\ No newline at end of file
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/4-settimeout-result/solution.md b/1-js/7-js-misc/4-setTimeout-setInterval/4-settimeout-result/solution.md
new file mode 100644
index 00000000..ea95474b
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/4-settimeout-result/solution.md
@@ -0,0 +1,8 @@
+Ответы:
+<ul>
+<li>`alert` выведет `100000000`.</li>
+<li>**3**, срабатывание будет после окончания работы `hardWork`.</li>
+</ul>
+
+
+Так будет потому, что вызов планируется на `100мс` от времени вызова `setTimeout`, но функция выполняется больше, чем `100мс`, поэтому к моменту ее окончания время уже подошло и отложенный вызов выполняется тут же. 
\ No newline at end of file
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/4-settimeout-result/task.md b/1-js/7-js-misc/4-setTimeout-setInterval/4-settimeout-result/task.md
new file mode 100644
index 00000000..cc6bf22e
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/4-settimeout-result/task.md
@@ -0,0 +1,31 @@
+# Что выведет setTimeout?
+
+[importance 5]
+
+В коде ниже запланирован запуск `setTimeout`, а затем запущена тяжёлая функция `f`, выполнение которой занимает более долгое время, чем интервал до срабатывания таймера. 
+
+Когда сработает `setTimeout`? Выберите нужный вариант:
+<ol>
+<li>До выполнения `f`.</li>
+<li>Во время выполнения `f`.</li>
+<li>Сразу же по окончании `f`.</li>
+<li>Через 100мс после окончания `f`.</li>
+</ol>
+
+Что выведет `alert` в коде ниже?
+
+```js
+setTimeout(function() { 
+  alert(i);
+}, 100);
+
+var i;
+
+function hardWork() { 
+  // время выполнения этого кода >100мс, сам код неважен
+  for(i=0; i<1e8; i++) hardWork[i%2] = i;
+}
+
+hardWork();
+```
+
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/5-setinterval-result/solution.md b/1-js/7-js-misc/4-setTimeout-setInterval/5-setinterval-result/solution.md
new file mode 100644
index 00000000..d45ba64f
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/5-setinterval-result/solution.md
@@ -0,0 +1,37 @@
+Вызов `alert(i)` в `setTimeout` введет `100000001`. 
+
+Можете проверить это запуском:
+
+```js
+//+ run
+var timer = setInterval(function() { 
+  i++;
+}, 10);
+
+setTimeout(function() { 
+  clearInterval(timer);
+*!*
+  alert(i); // (*)
+*/!*
+}, 50);
+
+var i;
+
+function f() { 
+  // точное время выполнения не играет роли
+  // здесь оно заведомо больше 100мс
+  for(i=0; i<1e8; i++) f[i%2] = i;
+}
+
+f();
+```
+
+Правильный вариант срабатывания: **3** (сразу же по окончании `f` один раз).
+
+Планирование `setInterval` будет вызывать функцию каждые `10мс` после текущего времени. Но так как интерпретатор занят долгой функцией, то до конца ее работы никакого вызова не происходит.
+
+За время выполнения `f` может пройти время, на которое запланированы несколько вызовов `setInterval`, но в этом случае остается только один, т.е. накопления вызовов не происходит. Такова логика работы `setInterval`. 
+
+После окончания текущего скрипта интерпретатор обращается к очереди запланированных вызовов, видит в ней `setInterval` и выполняет. А затем тут же выполняется  `setTimeout`, очередь которого тут же подошла. 
+
+Итого, как раз и видим, что `setInterval` выполнился ровно 1 раз по окончании работы функции. Такое поведение кросс-браузерно.
\ No newline at end of file
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/5-setinterval-result/task.md b/1-js/7-js-misc/4-setTimeout-setInterval/5-setinterval-result/task.md
new file mode 100644
index 00000000..504dde53
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/5-setinterval-result/task.md
@@ -0,0 +1,44 @@
+# Что выведет после setInterval?
+
+[importance 5]
+
+В коде ниже запускается `setInterval` каждые 10мс, и через 50мс запланирована его отмена.
+
+После этого запущена тяжёлая функция `f`, выполнение которой (мы точно знаем) потребует более 100мс. 
+
+Сработает ли `setInterval`, как и когда?
+
+Варианты:
+<ol>
+<li>Да, несколько раз, *в процессе* выполнения `f`.</li>
+<li>Да, несколько раз, *сразу после* выполнения `f`.</li>
+<li>Да, один раз, *сразу после* выполнения `f`.</li>
+<li>Нет, не сработает.</li>
+<li>Может быть по-разному, как повезёт.</li>
+</ol>
+
+Что выведет `alert` в строке `(*)`?
+
+```js
+var i;
+var timer = setInterval(function() { // планируем setInterval каждые 10мс
+  i++;
+}, 10);
+
+setTimeout(function() { // через 50мс - отмена setInterval
+  clearInterval(timer);
+*!*
+  alert(i); // (*)
+*/!*
+}, 50);
+
+// и запускаем тяжёлую функцию
+function f() { 
+  // точное время выполнения не играет роли
+  // здесь оно заведомо больше 100мс
+  for(i=0; i<1e8; i++) f[i%2] = i;
+}
+
+f();
+```
+
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/6-who-runs-faster/solution.md b/1-js/7-js-misc/4-setTimeout-setInterval/6-who-runs-faster/solution.md
new file mode 100644
index 00000000..7fe4a8fe
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/6-who-runs-faster/solution.md
@@ -0,0 +1,55 @@
+Задача -- с небольшим "нюансом".
+
+Есть браузеры, в которых на время работы JavaScript таймер "застывает", например таков IE. В них количество шагов будет почти одинаковым, +-1.
+
+В других браузерах (Chrome) первый бегун будет быстрее.
+
+Создадим реальные объекты `Runner` и запустим их для проверки:
+
+```js
+//+ run
+function Runner() {
+  this.steps = 0;
+
+  this.step = function() {
+    this.doSomethingHeavy(); 
+    this.steps++;
+  };
+
+  function fib(n) {
+    return n <= 1 ? n : fib(n-1) + fib(n-2); 
+  }
+
+  this.doSomethingHeavy = function() {
+    for(var i=0; i<25; i++) {
+      this[i] = fib(i);
+    }
+  };
+
+}
+
+var runner1 = new Runner();
+var runner2 = new Runner();
+
+// запускаем бегунов
+var t1 = setInterval(function() {
+  runner1.step();
+}, 15);
+
+var t2 = setTimeout(function go() {
+  runner2.step();
+  t2 = setTimeout(go, 15);
+}, 15);
+
+// кто сделает больше шагов?
+setTimeout(function() {
+  clearInterval(t1);
+  clearTimeout(t2);
+  alert(runner1.steps);
+  alert(runner2.steps);
+}, 5000);
+```
+
+Если бы в шаге `step()` не было вызова `doSomethingHeavy()`, то есть он бы не требовал времени, то количество шагов было бы почти равным.
+
+Но так как у нас шаг, всё же, что-то делает, и функция `doSomethingHeavy()` специально написана таким образом, что она требует (небольшого) времени, то первый бегун успеет сделать больше шагов. Ведь в `setTimeout` пауза `15` мс будет *между* шагами, а `setInterval` шагает равномерно, каждые `15` мс. Получается чаще.
\ No newline at end of file
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/6-who-runs-faster/task.md b/1-js/7-js-misc/4-setTimeout-setInterval/6-who-runs-faster/task.md
new file mode 100644
index 00000000..f65075d8
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/6-who-runs-faster/task.md
@@ -0,0 +1,35 @@
+# Кто быстрее?
+
+[importance 5]
+
+Есть два бегуна:
+
+```js
+var runner1 = new Runner();
+var runner2 = new Runner();
+```
+
+У каждого есть метод `step()`, который делает шаг, увеличивая свойство `steps`. 
+
+Конкретный код метода `step()` не имеет значения, важно лишь что шаг делается не мгновенно, он требует небольшого времени. 
+
+Если запустить первого бегуна через `setInterval`, а второго -- через вложенный `setTimeout` -- какой сделает больше шагов за 5 секунд?
+
+```js
+// первый?
+setInterval(function() {
+  runner1.step();
+}, 15);
+
+// или второй?
+setTimeout(function go() {
+  runner2.step();
+  setTimeout(go, 15);
+}, 15);
+
+setTimeout(function() {
+  alert(runner1.steps);
+  alert(runner2.steps);
+}, 5000);
+```
+
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/7-delay/_js.view/solution.js b/1-js/7-js-misc/4-setTimeout-setInterval/7-delay/_js.view/solution.js
new file mode 100644
index 00000000..62271941
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/7-delay/_js.view/solution.js
@@ -0,0 +1,12 @@
+function delay(f, ms) {
+
+  return function() {
+    var savedThis = this;
+    var savedArgs = arguments;
+
+    setTimeout(function() {
+      f.apply(savedThis, savedArgs);
+    }, ms);
+  };
+
+}
\ No newline at end of file
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/7-delay/_js.view/test.js b/1-js/7-js-misc/4-setTimeout-setInterval/7-delay/_js.view/test.js
new file mode 100644
index 00000000..457ccf7f
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/7-delay/_js.view/test.js
@@ -0,0 +1,45 @@
+describe("delay", function() {
+  before(function() {
+    this.clock = sinon.useFakeTimers();
+  });
+
+  after(function() {
+    this.clock.restore();
+  });
+
+  it("вызывает функцию через указанный таймаут", function() {
+    var start = Date.now();
+    function f(x) {
+      assert.equal(Date.now() - start, 1000);
+    }
+    f = sinon.spy(f);
+    
+    var f1000 = delay(f, 1000);
+    f1000("test");
+    this.clock.tick(2000);
+    assert(f.calledOnce, 'calledOnce check fails');
+  });
+
+  it("передаёт аргументы и контекст", function() {
+    var start = Date.now();
+    var user = {
+      sayHi: function(phrase, who) {
+        assert.equal(this, user);
+        assert.equal(phrase, "Привет");
+        assert.equal(who, "Вася");
+        assert.equal(Date.now() - start, 1500);
+      }
+    };
+    
+    user.sayHi = sinon.spy(user.sayHi);
+    
+    var spy = user.sayHi;
+    user.sayHi = delay(user.sayHi, 1500);
+    
+    user.sayHi("Привет", "Вася");
+    
+    this.clock.tick(2000);
+    
+    assert(spy.calledOnce, 'проверка calledOnce не сработала');
+  });
+});
\ No newline at end of file
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/7-delay/solution.md b/1-js/7-js-misc/4-setTimeout-setInterval/7-delay/solution.md
new file mode 100644
index 00000000..d578ae3b
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/7-delay/solution.md
@@ -0,0 +1,46 @@
+
+
+```js
+//+ run
+function delay(f, ms) {
+
+*!*
+  return function() {
+    var savedThis = this;
+    var savedArgs = arguments;
+
+    setTimeout(function() {
+      f.apply(savedThis, savedArgs);
+    }, ms);
+  };
+*/!*
+
+}
+
+function f(x) {
+  alert(x);
+}
+
+var f1000 = delay(f, 1000);
+var f1500 = delay(f, 1500);
+
+f1000("тест"); // выведет "тест" через 1000 миллисекунд
+f1500("тест2"); // выведет "тест2" через 1500 миллисекунд
+```
+
+Обратим внимание на то, как работает обёртка:
+
+```js
+return function() {
+  var savedThis = this;
+  var savedArgs = arguments;
+
+  setTimeout(function() {
+    f.apply(savedThis , savedArgs);
+  }, ms);
+};
+```
+
+Именно обёртка возвращается декоратором `delay` и будет вызвана. Чтобы передать аргумент и контекст функции, вызываемой через `ms` миллисекунд, они копируются в локальные переменные `savedThis` и `savedArgs`. 
+
+Это один из самых простых, и в то же время удобных способов передать что-либо в функцию, вызываемую через `setTimeout`.
\ No newline at end of file
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/7-delay/task.md b/1-js/7-js-misc/4-setTimeout-setInterval/7-delay/task.md
new file mode 100644
index 00000000..f65ddb06
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/7-delay/task.md
@@ -0,0 +1,23 @@
+# Функция-задержка
+
+[importance 5]
+
+**Напишите функцию `delay(f, ms)`, которая возвращает обёртку вокруг `f`, задерживающую вызов на `ms` миллисекунд.**
+
+Например:
+
+```js
+function f(x) {
+  alert(x);
+}
+
+var f1000 = delay(f, 1000);
+var f1500 = delay(f, 1500);
+
+f1000("тест"); // выведет "тест" через 1000 миллисекунд
+f1500("тест2"); // выведет "тест2" через 1500 миллисекунд
+```
+
+Иначе говоря, `f1000` -- это "задержанный на 1000мс" вызов `f`.
+
+В примере выше у функции только один аргумент, но `delay` должна быть универсальной: передавать любое количество аргументов и контекст `this`.
\ No newline at end of file
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/8-debounce/_js.view/solution.js b/1-js/7-js-misc/4-setTimeout-setInterval/8-debounce/_js.view/solution.js
new file mode 100644
index 00000000..1993b2e4
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/8-debounce/_js.view/solution.js
@@ -0,0 +1,17 @@
+function debounce(f, ms) {
+
+  var state = null;
+
+  var COOLDOWN = 1;
+
+  return function() {
+    if (state) return;
+
+    f.apply(this, arguments);
+
+    state = COOLDOWN;
+
+    setTimeout(function() { state = null }, ms);
+  }
+
+}
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/8-debounce/_js.view/test.js b/1-js/7-js-misc/4-setTimeout-setInterval/8-debounce/_js.view/test.js
new file mode 100644
index 00000000..857f4dca
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/8-debounce/_js.view/test.js
@@ -0,0 +1,38 @@
+describe("debounce", function() {
+  before(function() {
+    this.clock = sinon.useFakeTimers();
+  });
+ 
+  after(function() {
+    this.clock.restore();
+  });
+
+  it("вызывает функцию не чаще чем раз в ms миллисекунд", function() {
+    var log = '';
+    function f(a) { log += a; }
+
+    f = debounce(f, 1000);
+
+    f(1); // выполнится сразу же
+    f(2); // игнор
+
+    setTimeout(function() { f(3) }, 100); // игнор (рановато)
+    setTimeout(function() { f(4) }, 1100); // выполнится (таймаут прошёл)
+    setTimeout(function() { f(5) }, 1500); // игнор
+
+    this.clock.tick(5000);
+    assert.equal(log, "14");
+  });
+
+  it("сохраняет контекст вызова", function() {
+    var obj = {
+      f: function() {  
+        assert.equal(this, obj);
+      }
+    };
+   
+    obj.f = debounce(obj.f, 1000);
+    obj.f("test");
+ });
+
+});
\ No newline at end of file
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/8-debounce/solution.md b/1-js/7-js-misc/4-setTimeout-setInterval/8-debounce/solution.md
new file mode 100644
index 00000000..6c8ea156
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/8-debounce/solution.md
@@ -0,0 +1,38 @@
+
+
+```js
+//+ run
+function debounce(f, ms) {
+
+  var state = null;
+
+  var COOLDOWN = 1;
+
+  return function() {
+    if (state) return;
+
+    f.apply(this, arguments);
+
+    state = COOLDOWN;
+
+    setTimeout(function() { state = null }, ms);
+  }
+
+}
+
+function f(x) { alert(x) }
+var f = debounce(f, 1000);
+
+f(1); // 1, выполнится сразу же
+f(2); // игнор
+
+setTimeout( function() { f(3) }, 100); // игнор (прошло только 100мс)
+setTimeout( function() { f(4) }, 1100); // 4, выполнится
+setTimeout( function() { f(5) }, 1500); // игнор
+```
+
+Вызов `debounce` возвращает функцию-обёртку. Все необходимые данные для неё хранятся в замыкании.
+
+При вызове ставится таймер и состояние `state` меняется на константу `COOLDOWN` ("в процессе охлаждения").
+
+Последующие вызовы игнорируются, пока таймер не обнулит состояние.
\ No newline at end of file
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/8-debounce/task.md b/1-js/7-js-misc/4-setTimeout-setInterval/8-debounce/task.md
new file mode 100644
index 00000000..343ccecf
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/8-debounce/task.md
@@ -0,0 +1,23 @@
+# Вызов не чаще чем в N миллисекунд
+
+[importance 5]
+
+**Напишите функцию `debounce(f, ms)`, которая возвращает обёртку, которая передаёт вызов `f` не чаще, чем раз в `ms` миллисекунд.**
+
+"Лишние" вызовы игнорируются. Все аргументы и контекст -- передаются.
+
+Например:
+
+```js
+function f() { ... }
+
+var f = debounce(f, 1000);
+
+f(1); // выполнится сразу же
+f(2); // игнор
+
+setTimeout( function() { f(3) }, 100); // игнор (прошло только 100мс)
+setTimeout( function() { f(4) }, 1100); // выполнится
+setTimeout( function() { f(5) }, 1500); // игнор
+```
+
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/9-throttle/_js.view/solution.js b/1-js/7-js-misc/4-setTimeout-setInterval/9-throttle/_js.view/solution.js
new file mode 100644
index 00000000..7d01975d
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/9-throttle/_js.view/solution.js
@@ -0,0 +1,29 @@
+function throttle(func, ms) {
+    
+  var isThrottled = false,
+    savedArgs,
+    savedThis;
+        
+  function wrapper() {
+        
+    if (isThrottled) { 
+      savedArgs = arguments;
+      savedThis = this;
+      return;
+    }
+            
+    func.apply(this, arguments); 
+      
+    isThrottled = true;
+        
+    setTimeout(function() {
+      isThrottled = false; 
+      if (savedArgs) {
+        wrapper.apply(savedThis, savedArgs);
+        savedArgs = savedThis = null;
+      }
+    }, ms);    
+  }
+    
+  return wrapper;
+}
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/9-throttle/_js.view/test.js b/1-js/7-js-misc/4-setTimeout-setInterval/9-throttle/_js.view/test.js
new file mode 100644
index 00000000..c11a0f74
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/9-throttle/_js.view/test.js
@@ -0,0 +1,44 @@
+describe("throttle(f, 1000)", function() {
+  var f1000;
+  var log = "";
+  function f(a) { log += a; } 
+
+  before(function() {
+    f1000 = throttle(f, 1000);
+    this.clock = sinon.useFakeTimers();
+  });
+
+  it("первый вызов срабатывает тут же", function() {
+    f1000(1); // такой вызов должен сработать тут же
+    assert.equal(log, "1");
+  });
+
+  it("тормозит второе срабатывание до 1000мс", function() {
+    f1000(2); // (тормозим, не прошло 1000мс)
+    f1000(3); // (тормозим, не прошло 1000мс)
+    // через 1000 мс запланирован вызов с последним аргументом 
+
+    assert.equal(log, "1"); // пока что сработал только первый вызов
+ 
+    this.clock.tick(1000); // прошло 1000мс времени
+    assert.equal(log, "13");  // log==13, т.к. сработал вызов f1000(3)
+  });
+
+  it("тормозит третье срабатывание до 1000мс после второго", function() {
+    this.clock.tick(100);
+    f1000(4); // (тормозим, с последнего вызова прошло 100мс - менее 1000мс)
+    this.clock.tick(100);
+    f1000(5); // (тормозим, с последнего вызова прошло 200мс - менее 1000мс)
+    this.clock.tick(700);
+    f1000(6); // (тормозим, с последнего вызова прошло 900мс - менее 1000мс)
+ 
+    this.clock.tick(100); // сработал вызов с 6
+
+    assert.equal(log, "136");
+  });
+
+  after(function() {
+    this.clock.restore();
+  });
+
+});
\ No newline at end of file
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/9-throttle/solution.md b/1-js/7-js-misc/4-setTimeout-setInterval/9-throttle/solution.md
new file mode 100644
index 00000000..6c078926
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/9-throttle/solution.md
@@ -0,0 +1,42 @@
+
+
+```js
+function throttle(func, ms) {
+    
+  var isThrottled = false,
+    savedArgs,
+    savedThis;
+        
+  function wrapper() {
+        
+    if (isThrottled) { // (2)
+      savedArgs = arguments;
+      savedThis = this;
+      return;
+    }
+            
+    func.apply(this, arguments);  // (1)
+      
+    isThrottled = true;
+        
+    setTimeout(function() {
+      isThrottled = false; // (3)
+      if (savedArgs) {
+        wrapper.apply(savedThis, savedArgs);
+        savedArgs = savedThis = null;
+      }
+    }, ms);    
+  }
+    
+  return wrapper;
+}
+```
+
+Шаги работы этой функции:
+<ol>
+<li>Декоратор `throttle` возвращает функцию-обёртку `wrapper`, которая при первом вызове запускает `func` и переходит в состояние "паузы" (`isThrottled = true`).</li>
+<li>В этом состоянии все новые вызовы запоминаются в замыкании через `savedArgs/savedThis`. Обратим внимание, что и контекст вызова и аргументы для нас одинаково важны и запоминаются одновременно. Только зная и то и другое, можно воспроизвести вызов правильно.</li>
+<li>Далее, когда пройдёт таймаут `ms` миллисекунд -- пауза будет снята, а `wrapper` -- запущен с последними аргументами и контекстом (если во время паузы были вызовы).</li>
+</ol>
+
+Шаг `(3)` запускает именно не саму функцию, а снова `wrapper`, так как необходимо не только выполнить `func`, но и снова поставить выполнение на паузу. Получается последовательность "вызов - пауза.. вызов - пауза .. вызов - пауза ...", каждое выполнение в обязательном порядке сопровождается паузой после него. Это удобно описывается рекурсией.
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/9-throttle/task.md b/1-js/7-js-misc/4-setTimeout-setInterval/9-throttle/task.md
new file mode 100644
index 00000000..6c762461
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/9-throttle/task.md
@@ -0,0 +1,50 @@
+# Тормозилка
+
+[importance 5]
+
+Напишите функцию `throttle(f, ms)` -- "тормозилку", которая возвращает обёртку, передающую вызов `f` не чаще, чем раз в `ms` миллисекунд.
+
+**У этой функции должно быть важное существенное отличие от `debounce`:** если игнорируемый вызов оказался последним, т.е. после него до окончания задержки ничего нет -- то он выполнится.
+
+Чтобы лучше понять, откуда взялось это требование, и как `throttle` должна работать -- разберём реальное применение, на которое и ориентирована эта задача.
+
+**Например, нужно обрабатывать передвижения мыши.** 
+
+В JavaScript это делается функцией, которая будет запускаться при каждом микро-передвижении мыши и получать координаты курсора. По мере того, как мышь двигается, эта функция может запускаться очень часто, может быть 100 раз в секунду (каждые 10мс).
+
+**Функция обработки передвижения должна обновлять некую информацию на странице.** 
+
+При этом обновление -- слишком "тяжёлый" процесс, чтобы делать его при каждом микро-передвижении. Имеет смысл делать его раз в 100мс, не чаще. 
+
+Пусть функция, которая осуществляет это обновление по передвижению, называется `onmousemove`.
+
+Вызов `throttle(onmousemove, 100)`, по сути, предназначен для того, чтобы "притормаживать" обработку `onmousemove`. Технически, он должен возвращать обёртку, которая передаёт все вызовы `onmousemove`, но не чаще чем раз в 100мс.
+
+**При этом промежуточные движения можно игнорировать, но мышь в конце концов где-то остановится. И это последнее, итоговое положение мыши обязательно нужно обработать!**
+
+Визуально это даст следующую картину обработки перемещений мыши:
+<ol>
+<li>Первое обновление произойдёт сразу (это важно, посетитель тут же видит реакцию на своё действие).</li>
+<li>Дальше может быть много вызовов (микро-передвижений) с разными координатами, но пока не пройдёт 100мс -- ничего не будет.</li>
+<li>По истечении 100мс -- опять обновление, с последними координатами. Промежуточные микро-передвижения игнорированы.</li>
+<li>В конце концов мышь где-то остановится, обновление по окончании очередной паузы 100мс (иначе мы не знаем, последнее оно или нет) сработает с последними координатами.</li>
+</ol>
+
+Ещё раз заметим -- задача из реальной жизни, и в ней принципиально важно, что *последнее* передвижение обрабатывается. Пользователь должен увидеть, где остановил мышь. 
+
+Пример использования:
+
+```js
+var f = function(a) { console.log(a) };
+
+// затормозить функцию до одного раза в 1000 мс
+var f1000 = throttle(f, 1000);
+
+f1000(1); // выведет 1
+f1000(2); // (тормозим, не прошло 1000мс)
+f1000(3); // (тормозим, не прошло 1000мс)
+
+// когда пройдёт 1000мс...
+// выведет 3, промежуточное значение 2 игнорируется
+```
+
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/article.md b/1-js/7-js-misc/4-setTimeout-setInterval/article.md
new file mode 100644
index 00000000..8e7ea42f
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/article.md
@@ -0,0 +1,322 @@
+# setTimeout и setInterval
+
+Почти все реализации JavaScript имеют внутренний таймер-планировщик, который позволяет задавать вызов функции через заданный период времени.
+
+В частности, эта возможность поддерживается в браузерах и в сервере Node.JS.
+
+[cut]
+## setTimeout
+
+Синтаксис:
+
+```js
+var timerId = setTimeout(func/code, delay[, arg1, arg2...])
+```
+
+Параметры:
+
+<dl>
+<dt>`func/code`</dt>
+<dd>Функция или строка кода для исполнения. 
+Строка поддерживается для совместимости, использовать её не рекомендуется.</dd>
+<dt>`delay`</dt>
+<dd>Задержка в милисекундах, 1000 милисекунд равны 1 секунде.</dd>
+<dt>`arg1`, `arg2`...</dt>
+<dd>Аргументы, которые нужно передать функции. Не поддерживаются в IE9-.</dd>
+</dl>
+
+Исполнение функции произойдёт спустя время, указанное в параметре `delay`. 
+
+Например, следующий код вызовет `func()` через одну секунду:
+
+```js
+//+ run
+function func() { 
+  alert('Привет');
+}
+
+*!*
+setTimeout(func, 1000);
+*/!*
+```
+
+С передачей аргументов (не сработает в IE9-):
+
+```js
+//+ run
+function func(phrase, who) { 
+  alert(phrase + ', ' + who);
+}
+
+*!*
+setTimeout(func, 1000, "Привет", "Вася");  // Привет, Вася
+*/!*
+```
+
+**Если первый аргумент является строкой, то интерпретатор создаёт анонимную функцию из этой строки.** 
+
+То есть такая запись тоже сработает:
+
+```js
+//+ run
+setTimeout("alert('Привет')", 1000);
+```
+
+**Однако, использование строк не рекомендуется, так как они могут вызвать проблемы при минимизации кода, и, вообще, сама возможность использовать строку сохраняется лишь для совместимости.**
+
+Вместо них используйте анонимные функции, вот так:
+
+```js
+//+ run
+setTimeout(function() { alert('Привет') }, 1000);
+```
+
+### Отмена исполнения clearTimeout
+
+Функция `setTimeout` возвращает числовой идентификатор таймера `timerId`, который можно использовать для отмены действия.
+
+Синтаксис:
+
+```js
+var timerId = setTimeout(...);
+clearTimeout(timerId);
+```
+
+В следующем примере мы ставим таймаут, а затем удаляем (передумали). В результате ничего не происходит.
+
+```js
+//+ run
+var timerId = setTimeout(function() { alert(1) }, 1000);
+alert(timerId); // число - идентификатор таймера
+
+clearTimeout(timerId);
+alert(timerId); // всё ещё число, оно не обнуляется после отмены
+```
+
+Как видно из `alert`, в браузере идентификатор таймера является обычным числом. Другие JavaScript-окружения, например Node.JS, могут возвращать объект таймера, с дополнительными методами.
+
+**Такие разночтения вполне соответствуют стандарту просто потому, что в спецификации JavaScript про таймеры нет ни слова.**
+
+Таймеры -- это надстройка над JavaScript, которая описана в [секции Timers](http://www.w3.org/TR/html5/webappapis.html#timers) стандарта HTML5 для браузеров и в [документации к Node.JS](http://nodejs.org/docs/latest/api/timers.html) -- для сервера. 
+
+## setInterval   
+
+Метод `setInterval` имеет синтаксис, аналогичный `setTimeout`.
+
+```js
+var timerId = setInterval(func/code, delay[, arg1, arg2...])
+```
+
+Смысл аргументов -- тот же самый. Но, в отличие от `setTimeout`, он запускает выполнение функции не один раз, а  регулярно повторяет её через указанный интервал времени. Остановить исполнение можно вызовом `clearInterval(timerId)`.
+
+Следующий пример при запуске станет выводить сообщение каждые две секунды, пока не пройдёт 5 секунд:
+
+```js
+//+ run
+// начать повторы с интервалом 2 сек
+var timerId = setInterval(function() { 
+  alert("тик");
+}, 2000);
+
+// через 5 сек остановить повторы
+setTimeout(function() { 
+  clearInterval(timerId);
+  alert('стоп');
+}, 5000);
+```
+
+[smart header="Модальные окна замораживают время в Chrome/Opera/Safari"]
+Что будет, если долго не жать `OK` на появившемся `alert`? Это зависит от браузера. 
+
+В браузерах Chrome, Opera и Safari внутренний таймер "заморожен" во время показа `alert/confirm/prompt`. А вот в IE и Firefox внутренний таймер продолжит идти.
+
+Поэтому, если закрыть `alert` после небольшой паузы, то в Firefox/IE следующий `alert` будет показан сразу же (время подошло), а в Chrome/Opera/Safari -- только через 2 секунды после закрытия. 
+[/smart]
+
+
+### Рекурсивный setTimeout
+
+Важная альтернатива `setInterval` -- рекурсивный `setTimeout`:
+
+```js
+/** вместо:
+var timerId = setInterval(function() { 
+  alert("тик");
+}, 2000);
+*/
+
+var timerId = setTimeout(function tick() {
+  alert("тик");
+*!*
+  timerId = setTimeout(tick, 2000);
+*/!*
+}, 2000);
+```
+
+В коде выше следующее выполнение планируется сразу после окончания предыдущего.
+
+**Рекурсивный `setTimeout` -- более гибкий метод тайминга, чем `setInterval`, так как время до следующего выполнения можно запланировать по-разному, в зависимости от результатов текущего.**
+
+Например, у нас есть сервис, который в 5 секунд опрашивает сервер на предмет новых данных. В случае, если сервер перегружен, можно увеличивать интервал опроса до 10, 20, 60 секунд... А потом вернуть обратно, когда всё нормализуется.
+
+Если у нас регулярно проходят грузящие процессор задачи, то мы можем оценивать время, потраченное на их выполнение, и планировать следующий запуск раньше или позже.
+
+**Рекурсивный `setTimeout` гарантирует паузу между вызовами, `setInterval` -- нет.**
+
+Давайте сравним два кода. Первый использует `setInterval`:
+
+```js
+var i = 1;
+setInterval(function() {
+  func(i);
+}, 100);
+```
+
+Второй использует рекурсивный `setTimeout`:
+
+```js
+var i = 1;
+setTimeout(function run() {
+  func(i);
+  setTimeout(run, 100);
+}, 100);
+```
+
+При `setInterval` внутренний таймер будет срабатывать чётко каждые `100` мс и вызывать `func(i)`:
+
+<img src="interval1.png">
+
+Вы обратили внимание?...
+
+**Реальная пауза между вызовами `func` при `setInterval` меньше, чем указана в коде!**
+
+Это естественно, ведь время работы функции никак не учитывается, оно "съедает" часть интервала. 
+
+Возможно и такое что `func` оказалась сложнее, чем мы рассчитывали и выполнялась дольше, чем 100мс. 
+
+В этом случае интерпретатор будет ждать, пока функция завершится, затем проверит таймер и, если время вызова `setInterval` уже подошло (или прошло), то следующий вызов произойдёт *сразу же*.
+
+**Если функция и выполняется дольше, чем пауза `setInterval`, то вызовы будут происходить вообще без перерыва.**
+
+Исключением является IE, в котором таймер "застывает" во время выполнения JavaScript.
+
+А так будет выглядить картинка с рекурсивным `setTimeout`:
+
+<img src="timeout.png">
+
+**При рекурсивном `setTimeout` задержка всегда фиксирована и равна 100мс.**
+
+Это происходит потому, что каждый новый запуск планируется только после окончания текущего.
+
+[smart header="Управление памятью"]
+Сборщик мусора в JavaScript не чистит функции, назначенные в таймерах, пока таймеры актуальны. 
+
+При передаче функции в `setInterval/setTimeout` создаётся внутренняя ссылка на неё, через которую браузер её будет запускать, и которая препятствует удалению из памяти, даже если функция анонимна.
+
+```js
+// Функция будет жить в памяти, пока не сработал (или не был очищен) таймер
+setTimeout(function() {}, 100);
+```
+
+<ul>
+<li>Для `setTimeout` -- внутренняя ссылка исчезнет после исполнения функции.</li>
+<li>Для `setInterval` -- ссылка исчезнет при очистке таймера.</li>
+</ul>
+
+**Так как функция также тянет за собой всё замыкание, то ставшие неактуальными, но не отменённые `setInterval` могут приводить к излишним тратам памяти.**
+[/smart]
+
+
+## Минимальная задержка таймера
+
+У браузерного таймера есть минимальная возможная задержка. Она меняется от примерно нуля до 4мс в современных браузерах. В более старых она может быть больше и достигать 15мс.
+
+По [стандарту](http://www.w3.org/TR/html5/webappapis.html#timers), минимальная задержка составляет 4мс.  Так что нет разницы между `setTimeout(..,1)` и `setTimeout(..,4)`. 
+
+Посмотреть минимальное разрешение "вживую" можно на следующем примере.
+
+**В примере ниже каждая полоска удлиняется вызовом `setInterval` с указанной на ней задержкой -- от 0мс (сверху) до 20мс (внизу).**
+
+Позапускайте его в различных браузерах. Вы заметите, что несколько первых полосок анимируются с одинаковой скоростью. Это как раз потому, что слишком маленькие задержки таймер не различает.
+
+[iframe border="1" src="setInterval-anim" link edit]
+
+[warn]
+В Internet Explorer, нулевая задержка `setInterval(.., 0)` не сработает. Это касается именно `setInterval`, т.е. `setTimeout(.., 0)` работает нормально. 
+[/warn]
+
+## Реальная частота срабатывания
+
+В ряде ситуаций таймер будет срабатывать реже, чем обычно. Задержка между вызовами  `setInterval(..., 4)` может быть не 4мс, а 30мс или даже 1000мс.
+
+<ul>
+<li>Большинство браузеров (десктопных в первую очередь) продолжают выполнять `setTimeout/setInterval`, даже если вкладка неактивна.
+
+При этом ряд из них (Chrome, FF, IE10) снижают минимальную частоту таймера, до 1 раза в секунду. Получается, что в "фоновой" вкладке будет срабатывать таймер, но редко.</li>
+<li>При работе от батареи, в ноутбуке -- браузеры тоже могут снижать частоту, чтобы реже выполнять код и экономить заряд батареи. Особенно этим известен IE. Снижение может достигать нескольких раз, в зависимости от настроек.</li>
+<li>При слишком большой загрузке процессора JavaScript может не успевать обрабатывать таймеры вовремя. При этом некоторые запуски `setInterval` будут пропущены.</li>
+</ul>
+
+**Вывод: на частоту 4мс стоит ориентироваться, но не стоит рассчитывать.**
+
+Посмотрим снижении частоты в действии на небольшом примере. 
+
+При клике на кнопку ниже запускается `setInterval(..., 90)`, который выводит список интервалов времени между 25 последними срабатываниями таймера. Запустите его. Перейдите на другую вкладку и вернитесь.
+
+<div id="timer-interval-log"></div>
+
+<button onclick="timerIntervalLog()">Запустить повтор с интервалом в 90 мс</button> 
+<button onclick="clearInterval(timerIntervalLogTimer)">Остановить повтор</button>
+
+<script>
+var timerIntervalLogTimer;
+function timerIntervalLog() {
+  var arr = [];
+  var d = new Date;
+  timerIntervalLogTimer = setInterval(function() {
+    var diff = new Date - d;
+    if (diff > 100) diff = '<span style="color:red">'+diff+'</span>';
+    arr.push( diff );
+    if (arr.length > 25) arr.shift();
+    document.getElementById('timer-interval-log').innerHTML = arr;
+    d = new Date;
+  }, 90);
+}
+</script>
+
+Если ваш браузер увеличивает таймаут при фоновом выполнении вкладки, то вы увидите увеличенные интервалы, помеченные <span style="color:red">красным</span>.
+
+Кроме того, вы заметите, что таймер не является идеально точным ;)
+
+
+## Разбивка долгих скриптов
+
+Нулевой или небольшой таймаут также используют, чтобы разорвать поток выполнения "тяжелых" скриптов.
+
+Например, скрипт для подсветки синтаксиса должен проанализировать код, создать много цветных элементов для подсветки и добавить их в документ -- на большом файле это займёт много времени, браузер может даже подвиснуть, что неприемлемо.
+
+Для того, чтобы этого избежать, сложная задача разбивается на части, выполнение каждой части запускается через мини-интервал после предыдущей, чтобы дать браузеру время. 
+
+Например, осуществляется анализ и подсветка первых 100 строк, затем через 20 мс -- следующие 100 строк и так далее. При этом можно подстраиваться под CPU посетителя: замерять время на анализ 100 строк и, если процессор хороший, то в следующий раз обработать 200 строк, а если плохой -- то 50. В итоге подсветка будет работать с адекватной быстротой и без тормозов на любых текстах и компьютерах.
+
+## Итого
+
+<ul>
+<li>Методы `setInterval(func, delay)` и `setTimeout(func, delay)` позволяют запускать `func` регулярно/один раз через `delay` миллисекунд.</li>
+<li>Оба метода возвращают идентификатор таймера. Его используют для остановки выполнения вызовом `clearInterval/clearTimeout`.</li>
+<li>В случаях, когда нужно гарантировать задержку между регулярными вызовами или гибко её менять, вместо `setInterval` используют рекурсивный `setTimeout`.</li>
+<li>Минимальная задержка по стандарту составляет `4мс`. Браузеры соблюдают этот стандарт, но некоторые другие среды для выполнения JS, например Node.JS, могут предоставить и меньше задержки.</li>
+<li>В реальности срабатывания таймера могут быть гораздо реже, чем назначено, например если процессор перегружен, вкладка находится в фоновом режиме, ноутбук работает от батареи или по какой-то иной причине.</li>
+
+Браузерных особенностей почти нет, разве что вызов `setInterval(..., 0)` с нулевой задержкой в IE недопустим, нужно указывать `setInterval(..., 1)`.
+
+
+
+
+
+## Полезные декораторы
+
+Эти декораторы часто востребованы в реальных проектах. Постарайтесь сделать их без подсказок.
+
+
+
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/interval1.png b/1-js/7-js-misc/4-setTimeout-setInterval/interval1.png
new file mode 100755
index 00000000..2c60a630
Binary files /dev/null and b/1-js/7-js-misc/4-setTimeout-setInterval/interval1.png differ
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/setInterval-anim.view/index.html b/1-js/7-js-misc/4-setTimeout-setInterval/setInterval-anim.view/index.html
new file mode 100755
index 00000000..8506c73d
--- /dev/null
+++ b/1-js/7-js-misc/4-setTimeout-setInterval/setInterval-anim.view/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style> div { height: 18px; margin: 1px; background-color:green; } </style>
+</head>
+<body>
+
+<input type="button" id="start" value="Старт">
+<input type="button" id="stop" value="Стоп" disabled>
+
+<script>
+for (var i=0; i<=20; i+=2) {
+  document.write('<div>'+i+'</div>');
+}
+
+var startButton = document.getElementById('start');
+var stopButton = document.getElementById('stop');
+
+var timers = [];
+
+stopButton.onclick = function() {
+  startButton.disabled = false;
+  stopButton.disabled = true;
+
+  for(var i=0; i<timers.length; i++) clearInterval(timers[i]);
+  timers = [];
+}
+
+startButton.onclick = function() {
+  startButton.disabled = true;
+  stopButton.disabled = false;
+
+  var divs = document.getElementsByTagName('div');
+  for (var i=0; i<divs.length; i++) {
+    animateDiv(divs, i);
+  }
+}
+
+function animateDiv(divs, i) {
+  var div = divs[i], speed = div.innerHTML;
+  timers[i] = setInterval(function() {
+    div.style.width = (parseInt(div.style.width||0) + 2) % 400 + 'px'
+  }, speed);
+}
+</script>
+
+</body>
+</html>
diff --git a/1-js/7-js-misc/4-setTimeout-setInterval/timeout.png b/1-js/7-js-misc/4-setTimeout-setInterval/timeout.png
new file mode 100755
index 00000000..2ab19038
Binary files /dev/null and b/1-js/7-js-misc/4-setTimeout-setInterval/timeout.png differ
diff --git a/1-js/7-js-misc/5-eval/1-eval-calculator/solution.md b/1-js/7-js-misc/5-eval/1-eval-calculator/solution.md
new file mode 100644
index 00000000..aed1c355
--- /dev/null
+++ b/1-js/7-js-misc/5-eval/1-eval-calculator/solution.md
@@ -0,0 +1,12 @@
+Вычислить любое выражение нам поможет `eval`:
+
+```js
+//+ demo run
+var expr = prompt("Введите выражение?", '2*3+2');
+
+alert(eval(expr));
+```
+
+При этом посетитель потенциально может делать все, что угодно.
+
+Чтобы ограничить выражения только математикой, вводимую строку нужно проверять при помощи [регулярных выражений](/regular-expressions-javascript) на наличие любых символов, кроме букв, пробелов и знаков пунктуации. 
diff --git a/1-js/7-js-misc/5-eval/1-eval-calculator/task.md b/1-js/7-js-misc/5-eval/1-eval-calculator/task.md
new file mode 100644
index 00000000..771b005f
--- /dev/null
+++ b/1-js/7-js-misc/5-eval/1-eval-calculator/task.md
@@ -0,0 +1,9 @@
+# Eval-калькулятор
+
+[importance 4]
+
+Напишите интерфейс, который принимает математическое выражение (`prompt`) и возвращает его результат.
+
+Проверять выражение на корректность не требуется.
+
+[demo /]
diff --git a/1-js/7-js-misc/5-eval/article.md b/1-js/7-js-misc/5-eval/article.md
new file mode 100644
index 00000000..d2c961fa
--- /dev/null
+++ b/1-js/7-js-misc/5-eval/article.md
@@ -0,0 +1,265 @@
+# Запуск кода из строки: eval 
+
+Функция `eval(code)` позволяет выполнить код, переданный ей в виде строки.
+
+Этот код будет выполнен в *текущей области видимости*.
+[cut]
+
+## Использование eval
+
+В простейшем случае `eval` всего лишь выполняет код, например:
+
+```js
+//+ run
+var a = 1;
+
+(function() {
+
+  var a = 2; 
+  
+*!*
+  eval(' alert(a) '); // 2
+*/!*
+
+})()
+```
+
+Но он может не только выполнить код, но и вернуть результат.
+
+**Вызов `eval` возвращает последнее вычисленное выражение**:
+
+Например:
+
+```js
+//+ run
+alert( eval('1+1') ); // 2
+```
+
+**При вызове `eval` имеет полный доступ к локальным переменным.**
+
+Это означает, что текущие переменные могут быть изменены или дополнены:
+
+```js
+//+ untrusted refresh run
+var x = 5;
+eval(" alert(x); x = 10"); // 5, доступ к старому значению
+alert(x); // 10, значение изменено внутри eval
+```
+
+[smart header="В строгом режиме `eval` имеет свою область видимости "]
+В строгом режиме функционал `eval` чуть-чуть меняется. 
+
+При `use strict` код внутри `eval` по-прежнему сможет читать и менять внешние переменные, однако переменные и функции, объявленные внутри `eval`, не попадут наружу.
+
+```js
+//+ untrusted refresh run
+"use strict";
+
+*!*
+eval("var a = 5; function f() { }");
+*/!*
+alert(a); // ошибка, переменная не определена
+// функция f тоже не видна снаружи
+```
+
+Иными словами, в новом стандарте `eval` имеет свою область видимости, а к внешним переменным обращается через замыкание, аналогично тому, как работают обычные функции.
+[/smart]
+
+## Грамотное использование eval
+
+Начнём с того, что `eval` применяется очень редко. Действительно редко. Есть даже такое выражение "eval is evil" (eval -- зло).
+
+Причина проста: когда-то JavaScript был гораздо более слабым языком, чем сейчас и некоторые вещи без `eval` было сделать невозможно. Но те времена давно прошли. И теперь найти тот случай, когда действительно надо выполнить код из строки -- это надо постараться. 
+
+Но если вы действительно знаете, что это именно тот случай и вам необходим `eval` -- есть ряд вещей, которые нужно иметь в виду.
+
+**Доступ к локальным переменным -- самое страшное зло `eval`.**
+
+Дело в том, что локальные переменные могут быть легко переименованы:
+
+```js
+function sayHi() {
+  var phrase = "Привет";
+  eval(str);
+}
+```
+
+Переменная `phrase` может быть переименована в `hello`, и если строка `str` обращается к ней -- будет ошибка.
+
+**Современные средства сжатия JavaScript переименовывают локальные переменные автоматически.**
+
+Это считается безопасным, так как локальная переменная видна лишь внутри функции и если в ней везде поменять `phrase` на `p`, то никто этого не заметит.
+
+До сжатия:
+
+```js
+function sayHi() {
+  var phrase = "Привет";
+  alert(phrase);
+}
+```
+
+После сжатия:
+
+```js
+function sayHi() {
+  var a = "Привет";
+  alert(a);
+}
+```
+
+На самом деле всё ещё проще -- в данном случае утилита сжатия автоматически уберёт переменную `a` и код станет таким:
+
+```js
+function sayHi() {
+  alert("Привет");
+}
+```
+
+**Теперь очевидно, что если где-то в функции есть `eval`, то любое его взаимодействие с локальными переменными будет нарушено с непредсказуемыми побочными эффектами.**
+
+Некоторые инструменты сжатия предупреждают, когда видят `eval` или стараются вообще не сжимать такой код вместе с его внешними функциями, но всё это борьба с последствиями кривого кода.
+
+### Запуск скрипта в глобальной области
+
+Ок, взаимодействовать с локальными переменными нельзя. 
+
+Но допустим мы загрузили с сервера или вручную сгенерировали скрипт, который нужно выполнить в глобальной области, вне любых функций.
+
+**Есть два трюка для выполнения кода в глобальной области.**
+
+<ol>
+<li>Везде, кроме IE8-, достаточно вызвать `eval` не напрямую, а через `window.eval`. 
+
+Вот так:
+
+```js
+//+ run
+var a = 1;
+
+(function() {
+
+  var a = 2; 
+*!*  
+  window.eval(' alert(a) '); // 1, выполнено глобально везде, кроме IE8-
+*/!*
+})();
+```
+
+</li>
+<li>В IE8- можно применить нестандартную фунцию [execScript](http://msdn.microsoft.com/en-us/library/ie/ms536420%28v=vs.85%29.aspx). Она, как и `eval`, выполняет код, но всегда в глобальной области видимости и не возвращает значение.</li>
+</ol>
+
+Оба способа можно объединить в единой функции `globalEval(code)`, выполняющей код без доступа к локальным переменным:
+
+```js
+//+ run
+*!*
+function globalEval(code) { // объединим два способа в одну функцию
+  window.execScript ? execScript(code) : window.eval(code);
+}
+*/!*
+
+var a = 1;
+
+(function() {
+
+  var a = 2; 
+  
+  globalEval(' alert(a) '); // 1, во всех браузерах
+
+})();
+```
+
+### Взаимодействие  с внешним кодом, new Function
+
+Бывает, что в код, выполняемый при помощи `eval`, всё же нужно передать какие-то значения.
+
+ Считать их из локальных переменных нельзя: как мы видели, это подвержено ошибкам при переименовании переменных и сразу ломается при сжатии JavaScript.
+
+**К счастью, существует отличная альтернатива `eval`, которая позволяет корректно взаимодействовать c внешним кодом: `new Function`.**
+
+Вызов `new Function('a,b', '..тело..')` создает функцию с указанными аргументами `a,b` и телом. Как мы помним, доступа к текущему замыканию у такой функции не будет, но можно передать параметры и получить результат.
+
+Например:
+
+```js
+//+ run
+var a = 2, b = 3; 
+  
+*!*
+// вместо обращения к a,b через eval
+// будем принимать их как аргументы динамически созданной функции
+var mul = new Function('a, b', ' return a * b;'); 
+*/!*
+
+alert( mul(a, b) ); // 6
+```
+
+## JSON и eval
+
+В браузерах IE7- не было методов `JSON.stringify` и `JSON.parse`, поэтому работа с JSON происходила через `eval`.
+
+Вызов `eval(code)` выполняет код и, если это выражение, то возвращает его значение, поэтому можно в качестве кода передать JSON.
+
+Например:
+
+```js
+//+ run
+var str= '{ \
+    "name": "Вася", \
+    "age": 25 \
+}';
+
+*!*
+var user = eval('(' + str + ')');
+*/!*
+
+alert(user.name); // Вася
+```
+
+Зачем здесь нужны скобки `eval( '(' + str + ')' )`, почему не просто `eval(str)`? 
+
+...Всё дело в том, что в JavaScript с фигурной скобки `{` начинаются не только объекты, а в том числе и "блоки кода". Что имеется в виду в данном случае -- интерпретатор определяет по контексту. Если в основном потоке кода -- то блок, если в контексте выражения, то объект.
+
+Поэтому если передать в `eval` объект напрямую, то интерпретатор подумает, что это на самом деле блок кода, а там внутри какие-то двоеточия... 
+
+Вот, для примера, `eval` без скобок, он выдаст ошибку:
+
+```js
+//+ run
+var user = eval( '{  "name": "Вася",  "age": 25  }' );
+```
+
+А если `eval` получает выражение в скобках `( ... )`, то интерпретатор точно знает, что это не блок кода, а объект:
+
+```js
+//+ run
+var user = eval( '( {  "name": "Вася",  "age": 25  } )' );
+alert(user.age); // 25
+```
+
+[warn header="Осторожно, злой JSON!"]
+Если мы получаем JSON из недоверенного источника, например с чужого сервера, то разбор через `eval` может быть опасен.
+
+Например, чужой сервер может быть взломан (за свой-то код мы отвечаем, а за чужой -- нет) и вместо JSON вставлен злонамеренный JavaScript-код.
+
+**Поэтому рекомендуется, всё же, использовать `JSON.parse`.**
+
+При разборе через `JSON.parse` некорректный JSON просто приведёт к ошибке, а вот при разборе через `eval` этот код реально выполнится, он может вывести что-то на странице, перенаправить посетителя куда-то и т.п.
+
+Если вам важна поддержка IE7, в котором `JSON.parse нет`, то от злого кода можно защититься проверкой текста при помощи регулярного выражения из [стандарта RFC 4627, секция 6](https://www.ietf.org/rfc/rfc4627.txt) или подключить библиотеку  [json2](https://github.com/douglascrockford/JSON-js/blob/master/json2.js).
+[/warn]
+
+
+## Итого
+
+<ul>
+<li>Функция `eval(str)` выполняет код и возвращает последнее вычисленное выражение. В современном JavaScript она используется редко.</li>
+<li>Вызов `eval` может читать и менять локальные переменные. Это -- зло, которого нужно избегать.</li>
+<li>Для выполнения скрипта в глобальной области используются трюк с `window.eval/execScript`. При этом локальные переменные не будут затронуты, так что такое выполнение безопасно и иногда, в редких архитектурах, может быть полезным.</li>
+<li>Если нужно выполняемый код всё же должен взаимодействовать с локальными переменными -- используйте `new Function`. Создавайте функцию из строки и передавайте переменные ей, это надёжно и безопасно.</li>
+</ul>
+
+Ещё примеры использования `eval` вы найдёте далее, в главе [](/json).
+
diff --git a/1-js/7-js-misc/6-exception/1-finally-ili-prosto-kod/solution.md b/1-js/7-js-misc/6-exception/1-finally-ili-prosto-kod/solution.md
new file mode 100644
index 00000000..d976cbee
--- /dev/null
+++ b/1-js/7-js-misc/6-exception/1-finally-ili-prosto-kod/solution.md
@@ -0,0 +1,43 @@
+Разница в поведении станет очевидной, если рассмотреть код внутри функции.
+
+Поведение будет различным, если управление каким-то образом выпрыгнет из `try..catch`.
+
+Например, `finally` сработает после `return`:
+
+```js
+function f() {
+  try {
+    ...
+*!*
+    return result;
+*/!*
+  } catch(e) { 
+    ...
+  } finally {
+    очистить ресурсы 
+  }
+}
+```
+
+Или же управление может выпрыгнуть из-за `throw`:
+
+```js
+function f() {
+  try {
+    ...
+    
+  } catch(e) { 
+    ...
+    if (не умею обрабатывать эту ошибку) {  
+*!*
+      throw e;
+*/!*
+    }
+
+  } finally {
+    очистить ресурсы 
+  }
+}
+```
+
+В этих случаях именно `finally` гарантирует выполнение кода до окончания работы `f`, просто код не будет вызван.
\ No newline at end of file
diff --git a/1-js/7-js-misc/6-exception/1-finally-ili-prosto-kod/task.md b/1-js/7-js-misc/6-exception/1-finally-ili-prosto-kod/task.md
new file mode 100644
index 00000000..29b0cbe6
--- /dev/null
+++ b/1-js/7-js-misc/6-exception/1-finally-ili-prosto-kod/task.md
@@ -0,0 +1,43 @@
+# Finally или просто код?
+
+[importance 5]
+
+Сравните два фрагмента кода. 
+
+<ol>
+<li>Первый использует `finally` для выполнения кода по выходу из `try..catch`:
+
+```js
+try {
+  начать работу
+  работать
+} catch(e) {
+  обработать ошибку
+} finally {
+*!*
+  финализация: завершить работу 
+*/!*
+}
+```
+
+</li>
+<li>Второй фрагмент просто ставит очистку ресурсов за `try..catch`:
+
+```js
+try {
+  начать работу
+} catch(e) {
+  обработать ошибку
+} 
+
+*!*
+финализация: завершить работу
+*/!*
+```
+
+</li>
+</ol>
+
+Нужно, чтобы код финализации всегда выполнялся при выходе из блока `try..catch` и, таким образом, заканчивал начатую работу. Имеет ли здесь `finally` какое-то преимущество или оба фрагмента работают одинаково?
+
+Если имеет, то дайте пример когда код с `finally` работает верно, а без -- неверно.
diff --git a/1-js/7-js-misc/6-exception/2-eval-calculator-errors/solution.md b/1-js/7-js-misc/6-exception/2-eval-calculator-errors/solution.md
new file mode 100644
index 00000000..7fda9e72
--- /dev/null
+++ b/1-js/7-js-misc/6-exception/2-eval-calculator-errors/solution.md
@@ -0,0 +1,36 @@
+Вычислить любое выражение нам поможет `eval`:
+
+```js
+//+ run
+alert( eval("2+2") ); // 4
+```
+
+Считываем выражение в цикле `while(true)`. Если при вычислении возникает ошибка -- ловим её в `try..catch`. 
+
+Ошибкой считается, в том числе, получение `NaN` из `eval`, хотя при этом исключение не возникает. Можно бросить своё исключение в этом случае.
+
+Код решения:
+
+```js
+//+ run demo
+var expr, res;
+
+while(true) {
+  expr = prompt("Введите выражение?", '2-');
+  if (expr == null) break;
+
+  try {
+    res = eval(expr);
+    if (isNaN(res)) {
+      throw new Error("Результат неопределён");
+    }
+
+    break;
+  } catch(e) {
+    alert("Ошибка: "+e.message+", повторите ввод");
+  }
+}
+
+alert(res);
+```
+
diff --git a/1-js/7-js-misc/6-exception/2-eval-calculator-errors/task.md b/1-js/7-js-misc/6-exception/2-eval-calculator-errors/task.md
new file mode 100644
index 00000000..73e5108f
--- /dev/null
+++ b/1-js/7-js-misc/6-exception/2-eval-calculator-errors/task.md
@@ -0,0 +1,13 @@
+#  Eval-калькулятор с ошибками
+
+[importance 5]
+
+Напишите интерфейс, который принимает математическое выражение (в `prompt`) и результат его вычисления через `eval`.
+
+**При ошибке нужно выводить сообщение и просить переввести выражение**. 
+
+Ошибкой считается не только некорректное выражение, такое как `2+`, но и выражение, возвращающее `NaN`, например `0/0`. 
+
+[demo /]
+
+
diff --git a/1-js/7-js-misc/6-exception/article.md b/1-js/7-js-misc/6-exception/article.md
new file mode 100644
index 00000000..0b44a210
--- /dev/null
+++ b/1-js/7-js-misc/6-exception/article.md
@@ -0,0 +1,512 @@
+# Перехват ошибок, "try..catch"
+
+Как бы мы хорошо ни программировали, в коде бывают ошибки. Обычно скрипт при ошибке, как говорят, "падает", с выводом ошибки в консоль.
+
+Но бывают случаи, когда нам хотелось бы как-то контролировать ситуацию, чтобы скрипт не просто "упал", а сделал что-то разумное.
+
+Для этого в JavaScript есть замечательная конструкция `try..catch`.
+
+[cut]
+
+## Конструкция try..catch 
+
+Конструкция `try..catch` состоит из двух основных блоков: `try`, и затем `catch`:
+
+```js
+try {
+
+  // код ...
+
+} catch(err) {
+
+  // обработка ошибки
+
+}
+```
+
+Работает она так:
+<ol>
+<li>Выполняется код внутри блока `try`.</li>
+<li>Если в нём ошибок нет, то блок `catch(err)` игнорируется, то есть выполнение доходит до конца `try` и потом прыгает через `catch`.</li>
+<li>Если в нём возникнет ошибка, то выполнение `try` на ней прерывается, и управление прыгает в начало блока `catch(err)`.
+
+При этом переменная `err` (можно выбрать и другое название) будет содержать объект ошибки с подробной информацией о произошедшем.</li>
+</ol>
+
+**Таким образом, при ошибке в `try` скрипт не падает, а продолжает выполнение, и мы получаем возможность обработать ошибку внутри `catch`.**
+
+Посмотрим это на примерах.
+
+<ul>
+<li>Пример без ошибок: при запуске сработают `alert` `(1)` и `(2)`:
+
+```js
+//+ run
+try {
+
+  alert('Начало блока try');  // *!*(1) <--*/!*
+
+  // .. код без ошибок
+
+  alert('Конец блока try');   // *!*(2) <--*/!*
+
+} catch(e) {
+
+  alert('Блок catch не получит управление, так как нет ошибок'); // (3)
+
+}
+
+alert("Потом код продолжит выполнение...");
+```
+
+</li>
+<li>Пример с ошибкой: при запуске сработают `(1)` и `(3)`:
+
+```js
+//+ run
+try {
+
+  alert('Начало блока try');  // *!*(1) <--*/!*
+
+*!*
+  lalala; // ошибка, переменная не определена!
+*/!*
+
+  alert('Конец блока try');  // (2)
+ 
+} catch(e) {
+
+  alert('Ошибка ' + e.name + ":" + e.message + "\n" + e.stack); // *!*(3) <--*/!*
+
+}
+
+alert("Потом код продолжит выполнение...");
+```
+
+</li> 
+</ul>
+
+[warn header="`try..catch` подразумевает, что код синтаксически верен"]
+Если грубо нарушена структура кода, например не закрыта фигурная скобка или где-то стоит лишняя запятая, то никакой `try..catch` здесь не поможет. Такие ошибки называются *синтаксическими*, интерпретатор не может понять такой код и запустить его.
+
+Здесь же мы рассматриваем ошибки *семантические*, то есть происходящие в корректном коде, в процессе выполнения.
+[/warn]
+
+
+
+### Объект ошибки
+
+В примере выше мы видим объект ошибки. У него есть три основных свойства:
+<dl>
+<dt>`name`</dt>
+<dd>Тип ошибки. Например, при обращении к несуществующей переменной: `"ReferenceError"`.</dd>
+<dt>`message`</dt>
+<dd>Текстовое сообщение о деталях ошибки.</dd>
+<dt>`stack`</dt>
+<dd>Везде, кроме IE8-, есть также свойство `stack`, которое содержит строку с информацией о последовательности вызовов, которая привела к ошибке.</dd>
+</dl>
+
+В зависимости от браузера, у него могут быть и дополнительные свойства, см. <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Error">Error в MDN</a> и <a href="http://msdn.microsoft.com/en-us/library/dww52sbt%28v=vs.85%29.aspx">Error в MSDN</a>.
+
+## Пример использования
+
+В JavaScript есть встроенный метод [JSON.parse(str)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse), который используется для чтения JavaScript-объектов (и не только) из строки. 
+
+Обычно он используется для того, чтобы обрабатывать данные, полученные по сети, с сервера или из другого источника.
+
+Мы получаем их и вызываем метод `JSON.parse`, вот так:
+
+```js
+//+ run
+var data = '{"name":"Вася", "age": 30}'; // строка с данными, полученная с сервера
+
+var user = JSON.parse(data); // преобразовали строку в объект
+
+// теперь user -- это JS-объект с данными из строки
+alert( user.name ); // Вася
+alert( user.age ); // 30
+```
+
+Более детально формат JSON разобран в главе [](/json).
+
+**В случае, если данные некорректны, `JSON.parse` генерирует ошибку, то есть скрипт "упадёт".**
+
+Устроит ли нас такое поведение? Конечно нет!
+
+Получается, что если вдруг что-то не так с данными, то посетитель никогда (если, конечно, не откроет консоль) об этом не узнает.
+
+А люди очень-очень не любят, когда что-то "просто падает", без всякого объявления об ошибке.
+
+**Бывают ситуации, когда без `try..catch` не обойтись, это -- одна из таких.**
+
+Используем `try..catch`, чтобы обработать некорректный ответ:
+
+```js
+//+ run
+var data = "Has Error"; // в данных ошибка
+
+try {
+
+  var user = JSON.parse(data); // <-- ошибка при выполнении
+  alert(user.name); // не сработает
+
+} catch(e) {
+  // ...выполнится catch
+  alert( "Извините, в данных ошибка, мы попробуем получить их ещё раз"); 
+  alert( e.name );
+  alert( e.message );
+}
+```
+
+Здесь в `alert` только выводится сообщение, но область применения гораздо шире: можно повторять запрос, можно предлагать посетителю использовать альтернативный способ, можно отсылать информацию об ошибке на сервер... Свобода действий.
+
+## Генерация своих ошибок
+
+Представим на минуту, что данные являются корректным JSON... Но в этом объекте нет нужного свойства `name`:
+
+```js
+//+ run
+var data = '{ "age": 30 }'; // данные неполны
+
+try {
+
+  var user = JSON.parse(data); // <-- выполнится без ошибок
+*!*
+  alert(user.name); // undefined
+*/!*
+
+} catch(e) {
+  // не выполнится
+  alert( "Извините, в данных ошибка"); 
+}
+```
+
+Вызов `JSON.parse` выполнится без ошибок, но ошибка в данных есть. И, так как свойство `name` обязательно должно быть, то для нас это такие же некорректные данные как и `"Has Error"`.
+
+Для того, чтобы унифицировать и объединить обработку ошибок парсинга и ошибок в структуре, мы воспользуемся оператором `throw`.
+
+### Оператор throw
+
+Оператор `throw` генерирует ошибку. 
+ 
+Синтаксис: `throw <объект ошибки>`. 
+
+Технически, в качестве объекта ошибки можно передать что угодно, это может быть даже не объект, а число или строка, но всё же лучше, чтобы это был объект, желательно -- совместимый со стандартным, то есть чтобы у него были как минимум свойства `name` и `message`.
+
+**В качестве конструктора ошибок можно использовать встроенный конструктор: `new Error(message)` или любой другой.**
+
+В данном случае мы используем конструктор `new SyntaxError(message)`, он создаст ошибку того же типа, что и `JSON.parse`.
+
+```js
+//+ run
+var data = '{ "age": 30 }'; // данные неполны
+
+try {
+
+  var user = JSON.parse(data); // <-- выполнится без ошибок
+
+*!*
+  if (!user.name) {
+    throw new SyntaxError("Данные некорректны");
+  }
+*/!*
+
+  alert(user.name);
+
+} catch(e) {
+  alert( "Извините, в данных ошибка"); 
+}
+```
+
+Получилось, что блок `catch` -- единое место для обработки ошибок во всех случаях: когда ошибка выявляется при `JSON.parse` или позже.
+
+## Проброс исключения
+
+В коде выше мы предусмотрели обработку ошибок, которые возникают при некорректных данных. Но может ли быть так, что возникнет какая-то другая ошибка?
+
+Конечно, может! Код -- это вообще мешок с ошибками, бывает даже так что библиотеку выкладывают в открытый доступ, она там 10 лет лежит, её смотрят миллионы людей и на 11й год находятся опаснейшие ошибки. Такова жизнь, таковы люди.
+
+**Блок `catch` в нашем примере предназначен для обработки ошибок, возникающих при некорректных данных.**
+
+Если же в него попала какая-то другая ошибка, то вывод сообщения о "некорректных данных" будет дезинформацией посетителя. Ошибку, о которой `catch` не знает, он должен пропустить.
+
+**Такая техника называется *"проброс исключения"*: в `catch(e)` мы анализируем объект ошибки, и если он нам не подходит, то делаем `throw e`.**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
+При этом ошибка "выпадает" из `try..catch` наружу. Далее она может быть поймана либо внешним блоком `try..catch` (если есть), либо "повалит" скрипт.
+
+Например:
+
+```js
+//+ run
+var data = '{ "name": "Вася", "age": 30 }'; // данные корректны
+
+try {
+
+  var user = JSON.parse(data); 
+
+  if (!user.name) {
+    throw new SyntaxError("Ошибка в данных");
+  }
+
+*!*
+  blabla(); // произошла непредусмотренная ошибка
+*/!*
+
+  alert(user.name);
+
+} catch(e) {
+
+*!* 
+  if (e.name == "SyntaxError") {
+    alert( "Извините, в данных ошибка"); 
+  } else {
+    throw e;
+  }
+*/!*
+
+}
+```
+
+**Ошибка, которая возникла внутри `catch`, "выпадает" наружу.**
+
+Возможно, что этот `try..catch` вызывается внутри другого, более общего `try.catch`, и он как раз умеет обрабатывать выпавшую ошибку.
+
+Тогда получится так:
+
+```js
+//+ run
+function readData() {
+  var data = '{ "name": "Вася", "age": 30 }'; 
+
+  try {
+    // ...
+*!*
+    blabla(); // ошибка!
+*/!*
+  } catch(e) {
+    // ...
+*!*
+    if (e.name != 'SyntaxError') {
+      throw e; // пробрасываем
+    }
+*/!*
+  }
+}
+
+
+try {
+  readData();
+} catch(e) {
+*!*
+  alert("Поймал во внешнем catch: " + e); // ловим
+*/!*
+}
+```
+
+В примере выше `try..catch` внутри `readData` умеет обрабатывать только `SyntaxError`, а внешний -- все ошибки.
+
+Если же внешнего `try..catch` нет, то ошибка "вываливается" в консоль, и скрипт умирает. 
+
+### Последняя надежда: window.onerror
+
+Допустим, ошибка произошла вне блока `try..catch` или выпала из `try..catch` наружу, во внешний код. Скрипт упал.
+
+Можно ли как-то узнать о том, что произошло? Да, конечно.
+
+**В браузере существует специальное свойство `window.onerror`, если в него записать функцию, то она выполнится и получит в аргументах сообщение ошибки, текущий URL и номер строки, откуда "выпала" ошибка.**
+
+Необходимо лишь позаботиться, чтобы функция была назначена заранее. 
+
+Например:
+
+```html
+<!--+ run -->
+<script>
+*!*
+window.onerror = function(message, url, lineNumber) {
+  alert("Поймана ошибка, выпавшая в глобальную область!\n" +
+   "Сообщение: " + message +"\n(" + url + ":" + lineNumber + ")");
+};
+*/!*
+
+function readData() {
+  error(); // ой, что-то не так
+}
+
+readData();
+</script>
+```
+
+Как правило, роль `window.onerror` заключается в том, чтобы не оживить скрипт -- скорее всего, это уже невозможно, а в том, чтобы отослать сообщение об ошибке на сервер, где разработчики о ней узнают.
+
+Существуют даже специальные веб-сервисы, которые предоставляют скрипты для отлова и аналитики таких ошибок, например: [](https://errorception.com/) или [](http://www.muscula.com/).
+
+
+
+## Секция finally  
+
+Конструкция `try..catch` может содержать ещё один блок: `finally`.
+
+Выглядит этот расширенный синтаксис так:
+
+```js
+*!*try*/!* {
+   .. пробуем выполнить код ..
+} *!*catch*/!*(e) {
+   .. перехватываем исключение ..
+} *!*finally*/!* {
+   .. выполняем всегда ..
+}
+```
+
+Секция `finally` не обязательна, но если она есть, то она выполняется всегда:
+<ul>
+<li>после блока `try`, если ошибок не было,</li>
+<li>после `catch`, если они были.</li>
+</ul>
+
+Попробуйте запустить такой код?
+
+```js
+//+ run
+try {
+  alert('try');
+  if (confirm('Сгенерировать ошибку?')) BAD_CODE();
+} catch(e) {
+  alert('catch');
+} finally {
+  alert('finally');
+}
+```
+
+У него два варианта работы:
+<ol>
+<li>Если вы ответите на вопрос "Сгенерировать ошибку?" утвердительно, то `try -> catch -> finally`.</li>
+<li>Если ответите отрицательно, то `try -> finally`.
+</ol>
+
+**Секцию `finally` используют, чтобы завершить начатые операции при любом варианте развития событий.**
+
+Например, мы хотим подсчитать время на выполнение функции `sum(n)`, которая должна возвратить сумму чисел от `1` до `n` и работает рекурсивно:
+
+```js
+//+ run
+function sum(n) {
+  return n ? (n + sum(n-1)) : 0;
+}
+
+var n = +prompt('Введите n?', 100);
+
+var start = new Date();
+
+try {
+  var result = sum(n);
+} catch(e) {
+  result = 0;
+*!*
+} finally {
+  var diff = new Date() - start;
+}
+*/!*
+
+alert(result ? result : 'была ошибка');
+alert("Выполнение заняло " + diff);
+```
+
+Здесь секция `finally` гарантирует, что время будет подсчитано в любых ситуациях -- при ошибке в `sum` или без неё.
+
+Вы можете проверить это, запустив код с указанием `n=100` -- будет без ошибки, `finally` выполнится после `try`, а затем с `n=100000` -- будет ошибка из-за слишком глубокой рекурсии, управление прыгнет в `finally` после `catch`.
+
+[smart header="`finally` и `return`"]
+  
+Блок `finally` срабатывает при *любом* выходе из `try..catch`, в том числе и `return`.
+
+В примере ниже, из `try` происходит `return`, но `finally` получает управление до того, как контроль возвращается во внешний код.
+
+```js
+//+ run
+function func() {
+ 
+  try {
+    // сразу вернуть значение
+    return 1;
+
+  } catch(e) {
+    /* ... */
+  } finally {
+*!*
+    alert('finally');
+*/!*
+  }
+}
+
+alert( func() ); // сначала finally, потом 1
+```
+
+Если внутри `try` были начаты какие-то процессы, которые нужно завершить по окончании работы, во в `finally` это обязательно будет сделано.
+
+Кстати, для таких случаев иногда используют `try..finally` вообще без `catch`:
+
+```js
+//+ run
+function func() {
+  try {
+    return 1;
+  } finally {
+    alert('Вызов завершён');
+  }
+}
+
+alert( func() ); // сначала finally, потом 1
+```
+
+В примере выше `try..finally` вообще не обрабатывает ошибки. Задача в другом -- выполнить код при любом выходе из `try` -- с ошибкой ли, без ошибок или через `return.
+[/smart]
+
+
+
+## Итого
+
+Конструкция `try..catch` позволяет обработать произвольные ошибки в блоке кода.
+
+Это удобно в тех случаях, когда проще сделать действие и потом разбираться с результатом, чем долго и нудно проверять, не упадёт ли чего.
+
+Кроме того, иногда проверить просто невозможно, например `JSON.parse(str)` не позволяет "проверить" формат строки перед разбором. В этом случае блок `try..catch` необходим.
+
+Полный вид конструкции:
+
+```js
+*!*try*/!* {
+   .. пробуем выполнить код ..
+} *!*catch*/!*(e) {
+   .. перехватываем исключение ..
+} *!*finally*/!* { 
+   .. выполняем всегда ..
+}
+```
+
+Возможны также варианты `try..catch` или `try..finally`.
+
+Вместе с `try..catch` используется оператор `throw err`, который генерирует ошибку `err`, причём в качестве `err` рекомендуется генерировать объекты встроенного типа, например [Error](http://javascript.ru/Error) или совместимые с ним.
+
+[warn header="`try..catch` работает только в синхронном коде"]
+Ошибку, которая произойдёт в будущем, например, в `setTimeout`, `try..catch` не поймает:
+
+```js
+//+ run
+try {
+  setTimeout(function() { 
+    throw new Error(); // вылетит в консоль
+  }, 1000);
+} catch(e) {
+  alert("не сработает");
+}
+// на момент срабатывания setTimeout этот код уже завершится
+```
+
+[/warn]
+
+
+
+
+
diff --git a/1-js/7-js-misc/index.md b/1-js/7-js-misc/index.md
new file mode 100644
index 00000000..091a171f
--- /dev/null
+++ b/1-js/7-js-misc/index.md
@@ -0,0 +1,3 @@
+# Некоторые другие возможности
+
+Различные возможности JavaScript, которые достаточно важны, но не заслужили отдельного раздела.
\ No newline at end of file
diff --git a/1-js/8-oop/1-about-oop/article.md b/1-js/8-oop/1-about-oop/article.md
new file mode 100644
index 00000000..c6842bbc
--- /dev/null
+++ b/1-js/8-oop/1-about-oop/article.md
@@ -0,0 +1,49 @@
+# Введение 
+
+На протяжении долгого времени в программировании применялся [процедурный подход](http://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%BE%D1%86%D0%B5%D0%B4%D1%83%D1%80%D0%BD%D0%BE%D0%B5_%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%D0%B5). При этом программа состоит из функций, вызывающих друг друга.
+	 
+Гораздо позже появилось [объектно-ориентированное программирование](http://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%BD%D0%BE-%D0%BE%D1%80%D0%B8%D0%B5%D0%BD%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D0%BE%D0%B5_%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%D0%B5) (ООП), которое позволяет группировать функции и данные в единой сущности -- "объекте".
+ 	
+Например, "пользователь", "меню", "компонент интерфейса"... 
+
+**Чтобы ООП-подход "работал", объект должен представлять собой законченную, интуитивно понятную сущность.**
+
+[warn header="ООП -- это не просто объекты"]
+В JavaScript объекты часто используются просто как коллекции.
+
+Например, встроенный объект [Math](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Math) содержит функции (`Math.sin`, `Math.pow`, ...) и данные (константа `Math.PI`).
+ 
+При таком использовании объектов мы не можем сказать, что "применён объектно-ориентированный подход". В частности, никакую "единую сущность" `Math` из себя не представляет. 
+[/warn]
+ 	 	
+
+Мы уже работали в ООП-стиле, создавая объекты такого вида:
+
+```js
+//+ run
+function User(name) {
+
+  this.sayHi = function() {
+    alert("Привет, я " + name);
+  };
+
+}
+
+var vasya = new User("Вася"); // создали пользователя
+vasya.sayHi();                // пользователь умеет говорить "Привет"
+```
+
+Здесь мы видим ярко выраженную сущность -- `User` (посетитель). 
+
+**При объектно-ориентированной разработке мы описываем происходящее на уровне объектов, которые создаются, меняют свои свойства, взаимодействуют друг с другом и (в случае браузера) со страницей, в общем, живут.**
+
+ООП -- это наука о том, как делать правильную архитектуру. У неё есть свои принципы, по ним пишут книги, к примеру:
+
+<ul>
+<li><a href="http://www.ozon.ru/context/detail/id/3905587/?partner=iliakan">Объектно-ориентированный анализ и проектирование с примерами приложений.</a>
+<i>Гради Буч и др.</i>.</li>
+<li><a href="http://www.ozon.ru/context/detail/id/2457392/?partner=iliakan">Приемы объектно-ориентированного проектирования. Паттерны проектирования.</a>
+<i>Э. Гамма, Р. Хелм, Р. Джонсон, Дж. Влиссидес.</i></li>
+</ul>
+
+Далее мы поговорим подробно как про ООП, так и об основных принципах, которых нужно придерживаться.
\ No newline at end of file
diff --git a/1-js/8-oop/2-internal-external-interface/1-add-method-property-coffeemachine/solution.md b/1-js/8-oop/2-internal-external-interface/1-add-method-property-coffeemachine/solution.md
new file mode 100644
index 00000000..2fd8f40f
--- /dev/null
+++ b/1-js/8-oop/2-internal-external-interface/1-add-method-property-coffeemachine/solution.md
@@ -0,0 +1,40 @@
+Кофеварка с новым методом:
+
+```js
+//+ run
+function CoffeeMachine(power) {
+  this.waterAmount = 0;
+
+  var WATER_HEAT_CAPACITY = 4200; 
+*!*
+  var timerId;
+*/!*
+  var self = this;
+
+  function getBoilTime() {
+    return self.waterAmount * WATER_HEAT_CAPACITY * 80 / power;
+  }
+
+  function onReady() {
+    alert('Кофе готово!');
+  }
+
+  this.run = function() {
+    timerId = setTimeout(onReady, getBoilTime());
+  };
+
+*!*
+  this.stop = function() {
+    clearTimeout(timerId)
+  };
+*/!*
+}
+
+
+var coffeeMachine = new CoffeeMachine(50000);
+coffeeMachine.waterAmount = 200;
+
+coffeeMachine.run();
+coffeeMachine.stop(); // кофе приготовлен не будет
+```
+
diff --git a/1-js/8-oop/2-internal-external-interface/1-add-method-property-coffeemachine/task.md b/1-js/8-oop/2-internal-external-interface/1-add-method-property-coffeemachine/task.md
new file mode 100644
index 00000000..33123bf7
--- /dev/null
+++ b/1-js/8-oop/2-internal-external-interface/1-add-method-property-coffeemachine/task.md
@@ -0,0 +1,41 @@
+# Добавить метод и свойство кофеварке
+
+[importance 5]
+
+Улучшите готовый код кофеварки, который дан ниже: добавьте в кофеварку *публичный* метод `stop()`, который будет останавливать кипячение (через `clearTimeout`).
+
+```js
+function CoffeeMachine(power) {
+  this.waterAmount = 0;
+
+  var WATER_HEAT_CAPACITY = 4200; 
+
+  var self = this;
+
+  function getBoilTime() {
+    return self.waterAmount * WATER_HEAT_CAPACITY * 80 / power;
+  }
+
+  function onReady() {
+    alert('Кофе готово!');
+  }
+
+  this.run = function() {
+    setTimeout(onReady, getBoilTime());
+  };
+
+}
+```
+
+Вот такой код должен ничего не выводить:
+
+```js
+var coffeeMachine = new CoffeeMachine(50000);
+coffeeMachine.waterAmount = 200;
+ 
+coffeeMachine.run();
+coffeeMachine.stop(); // кофе приготовлен не будет
+```
+
+P.S. Текущую температуру воды вычислять и хранить не требуется.
+P.P.S. При решении вам, скорее всего, понадобится добавить *приватное* свойство `timerId`, которое будет хранить текущий таймер.
\ No newline at end of file
diff --git a/1-js/8-oop/2-internal-external-interface/article.md b/1-js/8-oop/2-internal-external-interface/article.md
new file mode 100644
index 00000000..533545c2
--- /dev/null
+++ b/1-js/8-oop/2-internal-external-interface/article.md
@@ -0,0 +1,352 @@
+# Внутренний и внешний интерфейс
+
+Один из важнейших принципов ООП -- отделение внутреннего интерфейса от внешнего.
+
+Это -- обязательная практика в разработке чего угодно сложнее hello world.
+
+Чтобы это понять, отвлечемся от разработки и переведем взгляд на объекты реального мира. 
+
+Как правило, устройства, с которыми мы имеем дело, весьма сложны. Но *разделение интерфейса на внешний и внутренний* позволяет использовать их без малейших проблем.
+[cut]
+## Пример из жизни
+
+Например, кофеварка. Простая снаружи: кнопка, индикатор, отверстия,... И, конечно, результат -- кофе :)
+
+<img src="coffee.jpg">
+
+Но внутри... (картинка из пособия по ремонту)
+
+<img src="coffee-inside.jpg">
+
+Масса деталей. Но мы можем пользоваться ей, совершенно не зная об этом.
+
+Кофеварки -- довольно-таки надежны, не правда ли? Можно пользоваться годами, и только когда что-то пойдет не так -- придется нести к мастеру.
+
+Секрет надежности и простоты кофеварки -- в том, что все детали отлажены и *спрятаны* внутри.
+
+Если снять с кофеварки защитный кожух, то использование её будет более сложным (куда нажимать?) и опасным (током ударить может). 
+
+Как мы увидим, объекты очень схожи с кофеварками.
+
+Только для того, чтобы прятать внутренние детали, используется не кожух, а специальные средства языка и соглашения.
+
+## Внутренний и внешний интерфейс
+
+В программировании есть чёткое разграничение методов и свойств объекта на две группы:
+
+<ul>
+<li>*Внутренний интерфейс* -- это свойства и методы, доступ к которым может быть осуществлен только из других методов объекта, их также называют "приватными" (есть и другие термины, встретим их далее).</li>
+</li>
+<li>*Внешний интерфейс* -- это свойства и методы, доступные снаружи объекта, их называют "публичными".</li>
+</ul>
+
+Если продолжить аналогию с кофеваркой -- то, что спрятано внутри кофеварки: трубка кипятильника, нагревательный элемент, тепловой предохранитель и так далее -- это её внутренний интерфейс. 
+
+Внутренний интерфейс используется для обеспечения работоспособности объекта, его детали используют друг друга. Например, трубка кипятильника подключена к нагревательному элементу. 
+
+Но снаружи кофеварка закрыта специальным кожухом, чтобы никто к ним не подобрался. Детали скрыты и недоступны. Виден лишь внешний интерфейс.
+
+**Все, что нужно для пользования объектом -- это внешний интерфейс.**
+
+О внутреннем пользователю вообще знать не обязательно.
+
+[smart header="Между приватным и публичным"]
+Приватные свойства полностью закрыты для доступа снаружи, а публичные -- наоборот, полностью открыты. Это крайности, между которыми бывают промежуточные варианты.
+
+<ul>
+<li>В языке С++ можно открыть доступ к приватным переменным одного класса -- другому, объявив его "дружественным".</li>
+<li>В языке Java можно объявлять переменные, которые доступны всем классам внутри "пакета".</li>
+<li>Между объектами можно организовать "наследование" и сделать свойства открытыми только для "наследников", такой вариант доступа называют "защищённым".</li>
+</ul>
+
+В этом учебнике будем изучать наследование и защищённые свойства, но позже, а пока сосредоточимся на приватном и публичном доступе... И, конечно, использовать мы будем JavaScript :)
+[/smart]
+
+Это были общие слова по теории программирования.
+
+Далее мы реализуем кофеварку на JavaScript с приватными и публичными свойствами. В кофеварке много деталей, мы конечно, не будем моделировать каждый винтик, а сосредоточимся на основных приёмах разработки.
+
+### Шаг 1: публичное и приватное свойство
+
+Конструктор кофеварок будет называться `CoffeeMachine`.
+
+```js
+//+ run
+function CoffeeMachine(power) {
+  this.waterAmount = 0; // количество воды в кофеварке
+  
+  alert('Создана кофеварка мощностью: ' + power + ' ватт');
+}
+
+// создать кофеварку
+var coffeeMachine = new CoffeeMachine(100);
+
+// залить воды
+coffeeMachine.waterAmount = 200;
+```
+
+**Локальные переменные, включая параметры конструктора, являются приватными свойствами.**
+
+В примере выше это `power` -- мощность кофеварки, которая указывается при создании и далее будет использована для расчёта времени кипячения. 
+
+К локальным переменным конструктора нельзя обратиться снаружи, но они доступны внутри самого конструктора.
+
+**Свойства, записанные в `this`, являются публичными.**
+
+Здесь свойство `waterAmount` записано в объект, а значит -- доступно для модификации снаружи. Можно доливать и выливать воду в любом количестве. 
+
+[smart header="Вопрос терминологии"]
+Может возникнуть вопрос -- почему я назвал `power` "приватным свойством", ведь это локальная *переменная*, а никакое не *свойство* объекта?
+
+Здесь небольшой конфликт терминологий.
+
+Термины "приватное свойство/метод", "публичное свойство/метод" относятся к общей теории ООП. А их конкретная реализация в языке программирования может быть различной. 
+
+Здесь ООП-принцип "приватного свойства" реализован через локальные переменные, поэтому и "локальная переменная" и "приватное свойство" -- правильные термины, в зависимости от того, с какой точки зрения посмотреть -- кода или архитектуры ООП.
+[/smart]
+
+
+### Шаг 2: публичный и приватный методы
+
+Добавим публичный метод `run`, запускающий кофеварку, а также вспомогательные внутренние методы `getBoilTime` и `onReady`:
+
+```js
+//+ run
+function CoffeeMachine(power) {
+
+  this.waterAmount = 0;
+
+*!*
+  // расчёт времени для кипячения
+  function getBoilTime() {
+    return 1000; // точная формула расчета будет позже
+  }
+ 
+  // что делать по окончании процесса
+  function onReady() {
+    alert('Кофе готово!');
+  }
+
+  this.run = function() {
+    // setTimeout - встроенная функция, 
+    // она запустит onReady через getBoilTime() миллисекунд
+    setTimeout(onReady, getBoilTime());
+  };
+*/!*
+}
+
+var coffeeMachine = new CoffeeMachine(100);
+coffeeMachine.waterAmount = 200;
+
+coffeeMachine.run();
+```
+
+**Приватные методы, такие как `onReady`, `getBoilTime` объявляются как вложенные функции.**
+
+В результате естественным образом получается, что доступ к ним (через замыкание) имеют только другие функции, объявленные в том же конструкторе.
+
+### Шаг 3: константа
+
+Для расчёта времени на кипячение воды используется формула `c*m*ΔT / power`, где:
+<ul>
+<li>`c` -- коэффициент теплоёмкости воды, физическая константа равная `4200`.</li>
+<li>`m` -- масса воды, которую нужно согреть.</li>
+<li>`ΔT` -- температура, на которую нужно подогреть, будем считать, что изначально вода -- комнатной температуры 20°С, то есть до 100° нужно греть на `ΔT=80`.</li>
+<li>`power` -- мощность.</li>
+</ul>
+
+Используем её в более реалистичном варианте `getBoilTime()`, включающем использование приватных свойств и константу:
+
+```js
+//+ run
+"use strict"
+
+function CoffeeMachine(power) {
+
+  this.waterAmount = 0;
+
+*!*
+  // физическая константа - удельная теплоёмкость воды для getBoilTime
+  var WATER_HEAT_CAPACITY = 4200; 
+
+  // расчёт времени для кипячения
+  function getBoilTime() {
+    return this.waterAmount * WATER_HEAT_CAPACITY * 80 / power; 
+  }
+*/!*
+
+  // что делать по окончании процесса
+  function onReady() {
+    alert('Кофе готово!');
+  }
+
+  this.run = function() {
+    setTimeout(onReady, getBoilTime());
+  };
+
+}
+
+var coffeeMachine = new CoffeeMachine(1000);
+coffeeMachine.waterAmount = 200;
+
+coffeeMachine.run();
+```
+
+Удельная теплоёмкость `WATER_HEAT_CAPACITY` выделена большими буквами, так как это константа.
+
+**Внимание, при запуске кода выше в методе `getBoilTime` будет ошибка. Как вы думаете, почему?**
+
+### Шаг 4: доступ к объекту из внутреннего метода 
+
+Внутренний метод вызывается так: `getBoilTime()`. А чему при этом равен `this`?... Как вы наверняка помните, в современном стандарте он будет `undefined` (в старом -- `window`), из-за этого при чтении `this.waterAmount` возникнет ошибка!
+
+Её можно решить, если вызвать `getBoilTime` с явным указанием контекста: `getBoilTime.call(this)`:
+
+```js
+//+ run
+function CoffeeMachine(power) {
+  this.waterAmount = 0;
+  var WATER_HEAT_CAPACITY = 4200; 
+
+  function getBoilTime() {
+    return this.waterAmount * WATER_HEAT_CAPACITY * 80 / power;
+  }
+
+  function onReady() {
+    alert('Кофе готово!');
+  }
+
+  this.run = function() {
+*!*
+    setTimeout(onReady, getBoilTime.call(this));
+*/!*
+  };
+
+}
+
+// создаю кофеварку, мощностью 100000W чтобы кипятила быстро
+var coffeeMachine = new CoffeeMachine(100000);
+coffeeMachine.waterAmount = 200;
+
+coffeeMachine.run();
+```
+
+Такой подход будет работать, но он не очень-то удобен. Ведь получается, что теперь везде, где мы хотим вызвать `getBoilTime`, нужно явно указывать контекст, т.е. писать `getBoilTime.call(this)`.
+
+К счастью существуют более элегантные решения.
+
+### Привязка через bind
+
+Можно при объявлении привязать `getBoilTime` к объекту через `bind`, тогда вопрос контекста отпадёт сам собой:
+
+```js
+//+ run
+function CoffeeMachine(power) {
+  this.waterAmount = 0;
+
+  var WATER_HEAT_CAPACITY = 4200; 
+
+*!*
+  var getBoilTime = function() {
+    return this.waterAmount * WATER_HEAT_CAPACITY * 80 / power;
+  }.bind(this);
+*/!*
+
+  function onReady() {
+    alert('Кофе готово!');
+  }
+
+  this.run = function() {
+*!*
+    setTimeout(onReady, getBoilTime());
+*/!*
+  };
+
+}
+
+var coffeeMachine = new CoffeeMachine(100000);
+coffeeMachine.waterAmount = 200;
+
+coffeeMachine.run();
+```
+
+Это решение будет работать, теперь функцию можно просто вызывать без `call`. Но объявление функции стало менее красивым.
+
+### Сохранение this в замыкании
+
+Пожалуй, самый удобный и часто применяемый путь решения состоит в том, чтобы предварительно скопировать `this` во вспомогательную переменную и обращаться из внутренних функций уже к ней.
+
+Вот так:
+
+```js
+//+ run
+function CoffeeMachine(power) {
+  this.waterAmount = 0;
+
+  var WATER_HEAT_CAPACITY = 4200; 
+
+*!*
+  var self = this;
+
+  function getBoilTime() {
+    return self.waterAmount * WATER_HEAT_CAPACITY * 80 / power;
+  }
+*/!*
+
+  function onReady() {
+    alert('Кофе готово!');
+  }
+
+  this.run = function() {
+    setTimeout(onReady, getBoilTime());
+  };
+
+}
+
+var coffeeMachine = new CoffeeMachine(100000);
+coffeeMachine.waterAmount = 200;
+
+coffeeMachine.run();
+```
+
+Теперь `getBoilTime` получает `self` из замыкания. 
+
+**Конечно, чтобы это работало, мы не должны изменять `self`, а все приватные методы, которые хотят привязаться к текущему объекту, должны использовать внутри себя `self` вместо `this`.**
+
+Вместо `self` можно использовать любое другое имя переменной, например `var me = this`.
+
+## Что нам даст разделение доступов?
+
+Итак, мы сделали кофеварку с публичными и приватными методами и заставили их корректно работать.
+
+В терминологии ООП отделение и защита внутреннего интерфейса называется [инкапсуляция](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D0%BA%D0%B0%D0%BF%D1%81%D1%83%D0%BB%D1%8F%D1%86%D0%B8%D1%8F_%28%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%D0%B5%29). 
+
+Кратко перечислим бонусы, которые она даёт:
+
+<dl>
+<dt>Защита пользователей от выстрела себе в ногу</dt>
+<dd>Представьте, команда разработчиков пользуется кофеваркой. Кофеварка создана фирмой "Лучшие Кофеварки" и, в общем, работает хорошо, но с неё сняли защитный кожух и, таким образом, внутренний интерфейс стал доступен.
+
+Все разработчики цивилизованны -- и пользуются кофеваркой как обычно. Но хитрый Вася решил, что он самый умный, и подкрутил кое-что внутри кофеварки, чтобы кофе заваривался покрепче. Вася не знал, что те изменения, которые он произвёл, приведут к тому, что кофеварка испортится через два дня. 
+
+Виноват, разумеется, не только Вася, но и тот, кто снял защитный кожух с кофеварки, и тем самым позволил Васе проводить манипуляции.
+
+В программировании -- то же самое. Если пользователь объекта будет менять то, что не рассчитано на изменение снаружи -- последствия могут быть непредсказуемыми. 
+</dd>
+<dt>Удобство в поддержке</dt>
+<dd>Ситуация в программировании сложнее, чем с кофеваркой, т.к. кофеварку один раз купили и всё, а программа может улучшаться и дорабатываться.
+
+**При наличии чётко выделенного внешнего интерфейса, разработчик может свободно менять внутренние свойства и методы, без оглядки на коллег.** 
+
+Гораздо легче разрабатывать, если знаешь, что ряд методов (все внутренние) можно переименовывать, менять их параметры, и вообще, переписать как угодно, так как внешний код к ним абсолютно точно не обращается.
+
+Ближайшая аналогия в реальной жизни -- это когда выходит "новая версию" кофеварки, которая работает гораздо лучше. Разработчик мог переделать всё внутри, но пользоваться ей по-прежнему просто, так как внешний интерфейс сохранён.</dd>
+<dt>Управление сложностью</dt>
+<dd>Люди обожают пользоваться вещами, которые просты с виду. А что внутри -- дело десятое. 
+
+Программисты здесь не исключение. 
+
+**Всегда удобно, когда детали реализации скрыты, и доступен простой, понятно документированный внешний интерфейс.**
+</dd>
+</dl>
+
diff --git a/1-js/8-oop/2-internal-external-interface/coffee-inside.jpg b/1-js/8-oop/2-internal-external-interface/coffee-inside.jpg
new file mode 100755
index 00000000..4d2c3dd0
Binary files /dev/null and b/1-js/8-oop/2-internal-external-interface/coffee-inside.jpg differ
diff --git a/1-js/8-oop/2-internal-external-interface/coffee.jpg b/1-js/8-oop/2-internal-external-interface/coffee.jpg
new file mode 100755
index 00000000..14e2810c
Binary files /dev/null and b/1-js/8-oop/2-internal-external-interface/coffee.jpg differ
diff --git a/1-js/8-oop/3-getters-setters/1-object-with-getters-setters/solution.md b/1-js/8-oop/3-getters-setters/1-object-with-getters-setters/solution.md
new file mode 100644
index 00000000..5713cb4e
--- /dev/null
+++ b/1-js/8-oop/3-getters-setters/1-object-with-getters-setters/solution.md
@@ -0,0 +1,29 @@
+Решение:
+
+```js
+//+ run
+function User() {
+  
+  var firstName, surName;
+
+  this.setFirstName = function(newFirstName) {
+    firstName = newFirstName;
+  };
+
+  this.setSurname = function(newSurname) {
+    surname = newSurname;
+  };
+
+  this.getFullName = function() {
+    return firstName + ' ' + surname;
+  }
+}
+
+var user = new User();
+user.setFirstName("Петя");
+user.setSurname("Иванов");
+
+alert( user.getFullName() ); // Петя Иванов
+```
+
+Обратим внимание, что для "геттера" `getFullName` нет соответствующего свойства объекта, он конструирует ответ "на лету". Это нормально. Одна из целей существования геттеров/сеттеров -- как раз и есть изоляция внутренних свойств объекта, чтобы можно было их как угодно менять, генерировать "на лету", а внешний интерфейс оставался тем же.
\ No newline at end of file
diff --git a/1-js/8-oop/3-getters-setters/1-object-with-getters-setters/task.md b/1-js/8-oop/3-getters-setters/1-object-with-getters-setters/task.md
new file mode 100644
index 00000000..d9efe056
--- /dev/null
+++ b/1-js/8-oop/3-getters-setters/1-object-with-getters-setters/task.md
@@ -0,0 +1,25 @@
+# Написать объект с геттерами и сеттерами
+
+[importance 4]
+
+Напишите конструктор `User` для создания объектов:
+<ul>
+<li>С приватными свойствами имя `firstName` и фамилия `surname`.</li>
+<li>С сеттерами для этих свойств.</li>
+<li>С геттером `getFullName()`, который возвращает полное имя.</li>
+</ul>
+
+Должен работать так:
+
+```js
+function User() {
+  /* ваш код */
+}
+
+var user = new User();
+user.setFirstName("Петя");
+user.setSurname("Иванов");
+
+alert( user.getFullName() ); // Петя Иванов
+```
+
diff --git a/1-js/8-oop/3-getters-setters/2-getter-power/solution.md b/1-js/8-oop/3-getters-setters/2-getter-power/solution.md
new file mode 100644
index 00000000..b82c109a
--- /dev/null
+++ b/1-js/8-oop/3-getters-setters/2-getter-power/solution.md
@@ -0,0 +1,28 @@
+
+
+```js
+function CoffeeMachine(power, capacity) {
+  //...
+  this.setWaterAmount = function(amount) {
+    if (amount < 0) {
+      throw new Error("Значение должно быть положительным");
+    }
+    if (amount > capacity) {
+      throw new Error("Нельзя залить воды больше, чем " + capacity);
+    }
+
+    waterAmount = amount;
+  };
+
+  this.getWaterAmount = function() {
+    return waterAmount;
+  };
+
+*!*
+  this.getPower = function() {
+    return power;
+  };
+*/!*
+}
+```
+
diff --git a/1-js/8-oop/3-getters-setters/2-getter-power/task.md b/1-js/8-oop/3-getters-setters/2-getter-power/task.md
new file mode 100644
index 00000000..7301c6f5
--- /dev/null
+++ b/1-js/8-oop/3-getters-setters/2-getter-power/task.md
@@ -0,0 +1,32 @@
+# Добавить геттер для power
+
+[importance 5]
+
+Добавьте кофеварке геттер для приватного свойства `power`, чтобы внешний код мог узнать мощность кофеварки. 
+
+Исходный код:
+
+```js
+function CoffeeMachine(power, capacity) {
+  //...
+  this.setWaterAmount = function(amount) {
+    if (amount < 0) {
+      throw new Error("Значение должно быть положительным");
+    }
+    if (amount > capacity) {
+      throw new Error("Нельзя залить воды больше, чем " + capacity);
+    }
+
+    waterAmount = amount;
+  };
+
+  this.getWaterAmount = function() {
+    return waterAmount;
+  };
+
+}
+```
+
+Обратим внимание, что ситуация, когда у свойства `power` есть геттер, но нет сеттера -- вполне обычна. 
+
+Здесь это означает, что мощность `power` можно указать лишь при создании кофеварки и в дальнейшем её можно прочитать, но нельзя изменить.
\ No newline at end of file
diff --git a/1-js/8-oop/3-getters-setters/3-add-public-coffeemachine/solution.md b/1-js/8-oop/3-getters-setters/3-add-public-coffeemachine/solution.md
new file mode 100644
index 00000000..d01cf173
--- /dev/null
+++ b/1-js/8-oop/3-getters-setters/3-add-public-coffeemachine/solution.md
@@ -0,0 +1,46 @@
+В решении ниже `addWater` будет просто вызывать `setWaterAmount`.
+
+```js
+//+ run
+function CoffeeMachine(power, capacity) {
+  var waterAmount = 0;
+
+  var WATER_HEAT_CAPACITY = 4200;
+  function getTimeToBoil() {
+    return waterAmount * WATER_HEAT_CAPACITY * 80 / power;
+  }
+
+  this.setWaterAmount = function(amount) {
+    if (amount < 0) {
+      throw new Error("Значение должно быть положительным");
+    }
+    if (amount > capacity) {
+      throw new Error("Нельзя залить больше, чем " + capacity);
+    }
+
+    waterAmount = amount;
+  };
+
+*!*
+  this.addWater = function(amount) {
+    this.setWaterAmount(waterAmount + amount);
+  };
+*/!*
+
+  function onReady() {
+    alert('Кофе готов!');
+  }
+
+  this.run = function() {
+    setTimeout(onReady, getTimeToBoil());
+  };
+
+}
+
+var coffeeMachine = new CoffeeMachine(100000, 400);
+coffeeMachine.addWater(200);
+coffeeMachine.addWater(100);
+coffeeMachine.addWater(300); // Нельзя залить больше..
+coffeeMachine.run();
+```
+
diff --git a/1-js/8-oop/3-getters-setters/3-add-public-coffeemachine/task.md b/1-js/8-oop/3-getters-setters/3-add-public-coffeemachine/task.md
new file mode 100644
index 00000000..2243e0d3
--- /dev/null
+++ b/1-js/8-oop/3-getters-setters/3-add-public-coffeemachine/task.md
@@ -0,0 +1,51 @@
+# Добавить публичный метод кофеварке
+
+[importance 5]
+
+Добавьте кофеварке публичный метод `addWater(amount)`, который будет добавлять воду. 
+
+При этом, конечно же, должны происходить все необходимые проверки -- на положительность и превышение ёмкости.
+
+Исходный код:
+
+```js
+function CoffeeMachine(power, capacity) {
+  var waterAmount = 0;
+
+  var WATER_HEAT_CAPACITY = 4200;
+  function getTimeToBoil() {
+    return waterAmount * WATER_HEAT_CAPACITY * 80 / power;
+  }
+
+  this.setWaterAmount = function(amount) {
+    if (amount < 0) {
+      throw new Error("Значение должно быть положительным");
+    }
+    if (amount > capacity) {
+      throw new Error("Нельзя залить больше, чем " + capacity);
+    }
+
+    waterAmount = amount;
+  };
+
+  function onReady() {
+    alert('Кофе готов!');
+  }
+
+  this.run = function() {
+    setTimeout(onReady, getTimeToBoil());
+  };
+
+}
+```
+
+Вот такой код должен приводить к ошибке:
+
+```js
+var coffeeMachine = new CoffeeMachine(100000, 400);
+coffeeMachine.addWater(200);
+coffeeMachine.addWater(100);
+coffeeMachine.addWater(300); // Нельзя залить больше, чем 400
+coffeeMachine.run();
+```
+
diff --git a/1-js/8-oop/3-getters-setters/4-setter-onready/solution.md b/1-js/8-oop/3-getters-setters/4-setter-onready/solution.md
new file mode 100644
index 00000000..da337433
--- /dev/null
+++ b/1-js/8-oop/3-getters-setters/4-setter-onready/solution.md
@@ -0,0 +1,66 @@
+
+
+```js
+//+ run
+function CoffeeMachine(power, capacity) {
+  var waterAmount = 0;
+
+  var WATER_HEAT_CAPACITY = 4200;
+  function getTimeToBoil() {
+    return waterAmount * WATER_HEAT_CAPACITY * 80 / power;
+  }
+
+  this.setWaterAmount = function(amount) {
+    // ... проверки пропущены для краткости
+    waterAmount = amount;
+  };
+
+  this.getWaterAmount = function(amount) {
+    return waterAmount;
+  };
+
+  function onReady() {
+    alert('Кофе готов!');
+  }
+
+*!*
+  this.setOnReady = function(newOnReady) {
+    onReady = newOnReady;
+  };
+*/!*
+
+  this.run = function() {
+*!*
+    setTimeout(function() { onReady(); }, getTimeToBoil());
+*/!*
+  };
+
+}
+
+var coffeeMachine = new CoffeeMachine(20000, 500);
+coffeeMachine.setWaterAmount(150);
+
+coffeeMachine.run();
+
+*!*
+coffeeMachine.setOnReady(function() {
+  var amount =  coffeeMachine.getWaterAmount();
+  alert('Готов кофе: ' + amount + 'мл'); // Готов кофе: 150 мл
+});
+*/!*
+```
+
+Обратите внимание на два момента в решении:
+<ol>
+<li>В сеттере `setOnReady` параметр называется `newOnReady`. Мы не можем назвать его `onReady`, так как тогда изнутри сеттера мы никак не доберёмся до внешнего (старого значения):
+
+```js
+// нерабочий вариант
+this.setOnReady = function(onReady) {
+  onReady = onReady; // ??? внешняя переменная onReady недоступна
+};
+```
+
+</li>
+<li>Чтобы `setOnReady` можно было вызывать в любое время, в `setTimeout` передаётся не `onReady`, а анонимная функция `function() { onReady() }`, которая возьмёт текущий (установленный последним) `onReady` из замыкания.</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/8-oop/3-getters-setters/4-setter-onready/task.md b/1-js/8-oop/3-getters-setters/4-setter-onready/task.md
new file mode 100644
index 00000000..1d301654
--- /dev/null
+++ b/1-js/8-oop/3-getters-setters/4-setter-onready/task.md
@@ -0,0 +1,58 @@
+# Создать сеттер для onReady 
+
+[importance 5]
+
+Обычно когда кофе готов, мы хотим что-то сделать, например выпить его.
+
+Сейчас при готовности срабатывает функция `onReady`, но она жёстко задана в коде:
+
+```js
+function CoffeeMachine(power, capacity) {
+  var waterAmount = 0;
+
+  var WATER_HEAT_CAPACITY = 4200;
+  function getTimeToBoil() {
+    return waterAmount * WATER_HEAT_CAPACITY * 80 / power;
+  }
+
+  this.setWaterAmount = function(amount) {
+    // ... проверки пропущены для краткости
+    waterAmount = amount;
+  };
+
+  this.getWaterAmount = function(amount) {
+    return waterAmount;
+  };
+
+*!*
+  function onReady() {
+    alert('Кофе готов!');
+  }
+*/!*
+
+  this.run = function() {
+    setTimeout(onReady, getTimeToBoil());
+  };
+
+}
+```
+
+Создайте сеттер `setOnReady`, чтобы код снаружи мог назначить свой `onReady`, вот так:
+
+```js
+var coffeeMachine = new CoffeeMachine(20000, 500);
+coffeeMachine.setWaterAmount(150);
+
+*!*
+coffeeMachine.setOnReady(function() {
+  var amount =  coffeeMachine.getWaterAmount();
+  alert('Готов кофе: ' + amount + 'мл'); // Кофе готов: 150 мл
+});
+*/!*
+
+coffeeMachine.run();
+```
+
+P.S. Значение `onReady` по умолчанию должно быть таким же, как и раньше.
+
+P.P.S. Постарайтесь сделать так, чтобы `setOnReady` можно было вызвать не только до, но и *после* запуска кофеварки, то есть чтобы функцию `onReady` можно было изменить в любой момент до её срабатывания. 
\ No newline at end of file
diff --git a/1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/solution.md b/1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/solution.md
new file mode 100644
index 00000000..dd4d0cf3
--- /dev/null
+++ b/1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/solution.md
@@ -0,0 +1,61 @@
+Код решения модифицирует функцию `run` и добавляет приватный идентификатор таймера `timerId`, по наличию которого мы судим о состоянии кофеварки:
+
+```js
+//+ run
+function CoffeeMachine(power, capacity) {
+  var waterAmount = 0;
+
+*!*
+  var timerId;
+
+  this.isRunning = function() {
+    return !!timerId;
+  };
+*/!*
+
+  var WATER_HEAT_CAPACITY = 4200;
+  function getTimeToBoil() {
+    return waterAmount * WATER_HEAT_CAPACITY * 80 / power;
+  }
+
+  this.setWaterAmount = function(amount) {
+    // ... проверки пропущены для краткости
+    waterAmount = amount;
+  };
+
+  this.getWaterAmount = function(amount) {
+    return waterAmount;
+  };
+
+  function onReady() {
+    alert('Кофе готов!');
+  }
+
+  this.setOnReady = function(newOnReady) {
+    onReady = newOnReady;
+  };
+
+  this.run = function() {
+*!*
+    timerId = setTimeout(function() {
+      timerId = null; 
+      onReady();
+    }, getTimeToBoil());
+  };
+*/!*
+
+}
+
+var coffeeMachine = new CoffeeMachine(20000, 500);
+coffeeMachine.setWaterAmount(100);
+
+alert('До: ' + coffeeMachine.isRunning()); // До: false
+
+coffeeMachine.run();
+alert('В процессе: ' + coffeeMachine.isRunning()); // В процессе: true
+
+coffeeMachine.setOnReady(function() {
+  alert("После: " + coffeeMachine.isRunning()); // После: false
+});
+```
+
diff --git a/1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/task.md b/1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/task.md
new file mode 100644
index 00000000..45cb1d97
--- /dev/null
+++ b/1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/task.md
@@ -0,0 +1,25 @@
+# Добавить метод isRunning
+
+[importance 5]
+
+Из внешнего кода мы хотели бы иметь возможность понять -- запущена кофеварка или нет.
+
+Для этого добавьте кофеварке публичный метод `isRunning()`, который будет возвращать `true`, если она запущена и `false`, если нет.
+
+Нужно, чтобы такой код работал:
+
+```js
+var coffeeMachine = new CoffeeMachine(20000, 500);
+coffeeMachine.setWaterAmount(100);
+
+alert('До: ' + coffeeMachine.isRunning()); // До: false
+
+coffeeMachine.run();
+alert('В процессе: ' + coffeeMachine.isRunning()); // В процессе: true
+
+coffeeMachine.setOnReady(function() {
+  alert("После: " + coffeeMachine.isRunning()); // После: false
+});
+```
+
+Исходный код возьмите из решения [предыдущей задачи](/task/setter-onReady).
\ No newline at end of file
diff --git a/1-js/8-oop/3-getters-setters/article.md b/1-js/8-oop/3-getters-setters/article.md
new file mode 100644
index 00000000..a6888832
--- /dev/null
+++ b/1-js/8-oop/3-getters-setters/article.md
@@ -0,0 +1,157 @@
+# Геттеры и сеттеры
+
+Для *управляемого* доступа к состоянию объекта используют специальные функции, так называемые "геттеры" и "сеттеры".
+[cut]
+
+## Геттер и сеттер для воды
+
+На текущий момент количество воды в кофеварке является публичным свойством `waterAmount`:
+
+```js
+//+ run
+function CoffeeMachine(power) {
+  // количество воды в кофеварке
+  this.waterAmount = 0;
+
+  ...
+}
+```
+
+Это немного опасно. Ведь в это свойство можно записать произвольное количество воды, хоть весь мировой океан.
+
+```js
+// не помещается в кофеварку!
+coffeeMachine.waterAmount = 1000000;
+```
+
+Это ещё ничего, гораздо хуже, что можно наоборот -- вылить больше, чем есть:
+
+```js
+// и не волнует, было ли там столько воды вообще!
+coffeeMachine.waterAmount -= 1000000;
+```
+
+Так происходит потому, что свойство полностью доступно снаружи.
+
+Чтобы не было таких казусов, нам нужно ограничить контроль над свойством со стороны внешнего кода.
+
+**Для лучшего контроля над свойством его делают приватным, а запись значения осуществляется через специальный метод, который называют *"сеттер"* (setter method).**
+
+Типичное название для сеттера -- `setСвойство`, например, в случае с кофеваркой таким сеттером будет метод `setWaterAmount`:
+
+```js
+//+ run
+function CoffeeMachine(power, capacity) { // capacity - ёмкость кофеварки
+  var waterAmount = 0;
+
+  var WATER_HEAT_CAPACITY = 4200;
+  function getTimeToBoil() {
+    return waterAmount * WATER_HEAT_CAPACITY * 80 / power;
+  }
+
+*!*
+  // "умная" установка свойства
+  this.setWaterAmount = function(amount) {
+    if (amount < 0) {
+      throw new Error("Значение должно быть положительным");
+    }
+    if (amount > capacity) {
+      throw new Error("Нельзя залить воды больше, чем " + capacity);
+    }
+
+    waterAmount = amount;
+  };
+*/!*
+
+  function onReady() {
+    alert('Кофе готов!');
+  }
+
+  this.run = function() {
+    setTimeout(onReady, getTimeToBoil());
+  };
+
+}
+
+var coffeeMachine = new CoffeeMachine(1000, 500);
+coffeeMachine.setWaterAmount(600); // упс, ошибка!
+```
+
+Теперь `waterAmount` -- внутреннее свойство, его можно записать (через сеттер), но, увы, нельзя прочитать.
+
+**Для того, чтобы дать возможность внешнему коду узнать его значение, создадим специальную функцию -- "геттер" (getter method).** 
+
+Геттеры обычно имеют название вида `getСвойство`, в данном случае `getWaterAmount`:
+
+```js
+//+ run
+function CoffeeMachine(power, capacity) {
+  //...
+  this.setWaterAmount = function(amount) {
+    if (amount < 0) {
+      throw new Error("Значение должно быть положительным");
+    }
+    if (amount > capacity) {
+      throw new Error("Нельзя залить воды больше, чем " + capacity);
+    }
+
+    waterAmount = amount;
+  };
+
+*!*
+  this.getWaterAmount = function() {
+    return waterAmount;
+  };
+*/!*
+}
+
+var coffeeMachine = new CoffeeMachine(1000, 500);
+coffeeMachine.setWaterAmount(450); 
+alert( coffeeMachine.getWaterAmount() ); // 450
+```
+
+## Единый геттер-сеттер
+
+Для большего удобства иногда делают единый метод, который называется так же, как свойство и отвечает *и за запись и за чтение*.
+
+При вызове без параметров такой метод возвращает свойство, а при передаче параметра -- назначает его. 
+
+Выглядит это так:
+
+```js
+//+ run
+function CoffeeMachine(power, capacity) {
+  var waterAmount = 0;
+
+*!*
+  this.waterAmount = function(amount) {
+*/!*
+    // вызов без параметра, значит режим геттера, возвращаем свойство
+    if (!arguments.length) return waterAmount;
+
+    // иначе режим сеттера
+    if (amount < 0) {
+      throw new Error("Значение должно быть положительным");
+    }
+    if (amount > capacity) {
+      throw new Error("Нельзя залить воды больше, чем " + capacity);
+    }
+
+    waterAmount = amount;
+  };
+
+}
+
+var coffeeMachine = new CoffeeMachine(1000, 500);
+
+// пример использования
+*!*
+coffeeMachine.waterAmount(450); 
+alert( coffeeMachine.waterAmount() ); // 450
+*/!*
+```
+
+Единый геттер-сеттер используется реже, чем две отдельные функции, но в некоторых JavaScript-библиотеках, например [jQuery](http://jquery.com) и [D3](http://d3js.org) подобный подход принят на уровне концепта. 
+
+## Задачи
+
diff --git a/1-js/8-oop/4-descriptors-getters-setters/1-replace-property-getter/solution.md b/1-js/8-oop/4-descriptors-getters-setters/1-replace-property-getter/solution.md
new file mode 100644
index 00000000..efe1006b
--- /dev/null
+++ b/1-js/8-oop/4-descriptors-getters-setters/1-replace-property-getter/solution.md
@@ -0,0 +1,27 @@
+
+
+```js
+//+ run
+function CoffeeMachine(power, capacity) {
+  var waterAmount = 0;
+
+  Object.defineProperty(this, "waterAmount", {
+
+    get: function() {
+      return waterAmount;
+    },
+
+    set: function(amount) {
+      if (amount > capacity) {
+        throw new Error("Нельзя залить больше, чем " + capacity);
+      }
+
+      waterAmount = amount;
+    }
+  });
+}
+
+var coffeeMachine = new CoffeeMachine(1000, 300);
+coffeeMachine.waterAmount = 500;
+```
+
diff --git a/1-js/8-oop/4-descriptors-getters-setters/1-replace-property-getter/task.md b/1-js/8-oop/4-descriptors-getters-setters/1-replace-property-getter/task.md
new file mode 100644
index 00000000..73d213ef
--- /dev/null
+++ b/1-js/8-oop/4-descriptors-getters-setters/1-replace-property-getter/task.md
@@ -0,0 +1,22 @@
+# Заменить свойство на встроенные геттеры/сеттеры
+
+[importance 5]
+
+Вам попал в руки код кофеварки, который использует свойство `this.waterAmount` для хранения количества воды:
+
+```js
+function CoffeeMachine(power, capacity) {
+  // количество воды в кофеварке
+  this.waterAmount = 0;
+}
+
+// создать кофеварку
+var coffeeMachine = new CoffeeMachine(1000, 300);
+
+// залить воды
+coffeeMachine.waterAmount = 500;
+```
+
+Задача -- сделать так, чтобы при присвоении `coffeeMachine.waterAmount = 500` выдавалась ошибка, если значение больше `capacity` (в примере выше `300`).
+
+Для этого реализуйте `waterAmount` через геттер и сеттер, который будет проверять корректность установки. Используйте для этого `Object.defineProperty`.
\ No newline at end of file
diff --git a/1-js/8-oop/4-descriptors-getters-setters/article.md b/1-js/8-oop/4-descriptors-getters-setters/article.md
new file mode 100644
index 00000000..bc7f5eb2
--- /dev/null
+++ b/1-js/8-oop/4-descriptors-getters-setters/article.md
@@ -0,0 +1,407 @@
+# Дескрипторы, геттеры и сеттеры свойств
+
+В этой главе мы рассмотрим возможности, которые позволяют очень гибко и мощно управлять всеми свойствами объекта, включая их аспекты -- изменяемость, видимость в цикле `for..in` и даже "невидимые" геттеры-сеттеры.
+
+Они поддерживаются всеми современными браузерами, но не IE8-. Точнее говоря, они поддерживаются даже в IE8, но не для всех объектов, а только для DOM-объектов (они используются при работе со страницей, это сейчас вне нашего рассмотрения).
+
+Большая часть этих методов, в частности, работа с дескрипторами, не задействуется в других главах учебника для обеспечения совместимости с IE8-, но во вспомогательных скриптах -- библиотеках для тестирования, сборки, а также для сервера Node.JS они используются достаточно активно.
+
+[cut]
+## Дескрипторы в примерах
+
+Основной метод для управления свойствами -- [Object.defineProperty](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/defineProperty).
+
+Он позволяет определить свойство путём задания "дескриптора" -- описания, включающего в себя ряд важных внутренних параметров.
+
+Синтаксис:
+
+```js
+Object.defineProperty(obj, prop, descriptor)
+```
+
+Аргументы:
+<dl>
+<dt>`obj`</dt>
+<dd>Объект, в котором объявляется свойство.</dd>
+<dt>`prop`</dt>
+<dd>Имя свойства, которое нужно объявить или модифицировать.</dd>
+<dt>`descriptor`</dt>
+<dd>Дескриптор -- объект, который описывает поведение свойства. В нём могут быть следующие поля:
+
+<dl>
+<dt>`value`</dt>
+<dd>Значение свойства, по умолчанию `undefined`</dd>
+<dt>`writable`</dt>
+<dd>Значение свойства можно менять, если `true`. По умолчанию `false`.</dd>
+<dt>`configurable`</dt>
+<dd>Если `true`, то свойство можно удалять, а также менять его в дальнейшем при помощи `defineProperty`. По умолчанию `false`.</dd>
+<dt>`enumerable`</dt>
+<dd>Если `true`, то свойство будет участвовать в переборе `for..in`. По умолчанию `false`.</dd>
+<dt>`get`</dt>
+<dd>Функция, которая возвращает значение свойства. По умолчанию `undefined`.</dd>
+<dt>`set`</dt>
+<dd>Функция, которая записывает значение свойства. По умолчанию `undefined`.</dd>
+</dl>
+</dd>
+</dl>
+
+Чтобы избежать конфликта, запрещено одновременно указывать значение `value` и функции `get/set`. Либо значение, либо функции для его чтения-записи, одно из двух. Также запрещено и не имеет смысла указывать `writable` при наличии `get/set`-функций.
+
+Далее мы подробно разберём эти свойства на примерах.
+
+### Пример: обычное свойство
+
+Обычное свойство добавить очень просто.
+
+Два таких вызова работают одинаково:
+
+```js
+var user = {};
+
+// 1. простое присваивание
+user.name = "Вася";
+
+// 2. указание значения через дескриптор
+Object.defineProperty(user, "name", { value: "Вася" });
+```
+
+### Пример: свойство-константа
+
+Для того, чтобы сделать свойство неизменяемым, добавим ему флаги `writable` и `configurable`:
+
+```js
+//+ run
+*!*
+"use strict";
+*/!*
+
+var user = {};
+
+Object.defineProperty(user, "name", {
+  value: "Вася",
+  writable: false,    // запретить присвоение "user.name=" 
+  configurable: false // запретить удаление "delete user.name"
+});
+
+// Теперь попытаемся изменить это свойство.
+
+// в strict mode присвоение "user.name=" вызовет ошибку
+*!*
+user.name = "Петя";
+*/!*
+```
+
+**Заметим, что ошибки при попытке изменения такого свойства произойдут только при `use strict`.**
+
+Без `use strict` операция записи "молча" не сработает. 
+
+### Пример: свойство, скрытое для for..in
+
+Встроенный метод `toString`, как и большинство встроенных методов, не участвует в цикле `for..in`. Это удобно, так как обычно такое свойство является "служебным".
+
+К сожалению, свойство `toString`, объявленное обычным способом, будет видно в цикле `for..in`, например:
+
+```js
+//+ run
+var user = {
+  name: "Вася",
+  toString: function() { return this.name; }
+};
+
+*!*
+for(var key in user) alert(key);  // name, toString
+*/!*
+```
+
+`Object.defineProperty` может помочь исключить `toString` из списка итерации. Достаточно поставить ему флаг `enumerable: false`:
+
+```js
+//+ run
+var user = {
+  name: "Вася",
+  toString: function() { return this.name; }
+};
+
+*!*
+Object.defineProperty(user, "toString", {enumerable: false});
+
+for(var key in user) alert(key);  // name
+*/!*
+```
+
+Обратим внимание, вызов `defineProperty` не перезаписал свойство, а просто модифицировал настройки у существующего `toString`.
+
+### Пример: свойство как функция-геттер
+
+Дескриптор позволяет задать свойство, которое на самом деле работает как функция. Для этого в нём нужно указать эту функцию в `get`.
+
+Например, у объекта `user` есть обычные свойства: имя `firstName` и фамилия `surname`. 
+
+Создадим свойство `fullName`, которое на самом деле является функцией:
+
+```js
+//+ run
+var user = {
+  firstName: "Вася",
+  surname: "Петров"
+}
+
+Object.defineProperty(user, "fullName", {
+  *!*get*/!*: function() {
+    return this.firstName + ' ' + this.surname;
+  }
+});
+
+*!*
+alert(user.fullName); // Вася Петров
+*/!*
+```
+
+**Обратим внимание, снаружи это обычное свойство `user.fullName`.**
+
+Лишь в описании указывается, что на самом деле его значение возвращается функцией.
+
+### Пример: свойство геттер-сеттер
+
+Также можно указать функцию, которая используется для записи значения, при помощи дескриптора `set`.
+
+Например, добавим возможность присвоения `user.fullName` к примеру выше:
+
+```js
+//+ run
+var user = {
+  firstName: "Вася",
+  surname: "Петров"
+}
+
+Object.defineProperty(user, "fullName", {
+
+  get: function() {
+    return this.firstName + ' ' + this.surname;
+  },
+
+*!*
+  set: function(value) {
+    var split = value.split(' ');
+    this.firstName = split[0];
+    this.surname = split[1];
+  }
+*/!*
+});
+
+*!*
+user.fullName = "Петя Иванов";
+*/!*
+alert(user.firstName); // Петя 
+alert(user.surname); // Иванов
+```
+
+## Геттеры и сеттеры в литералах
+
+Если мы создаём объект при помощи синтаксиса `{ ... }`,  то задать геттеры/сеттеры можно прямо в его определении.
+
+Для этого используется особый синтаксис: `get свойство` или `set свойство`. 
+
+Например, ниже объявлен геттер-сеттер `fullName`:
+
+```js
+//+ run
+var user = {
+  firstName: "Вася",
+  surname: "Петров",
+
+*!*
+  get fullName() {
+*/!*
+    return this.firstName + ' ' + this.surname;
+  },
+
+*!*
+  set fullName(value) {
+*/!*
+    var split = value.split(' ');
+    this.firstName = split[0];
+    this.surname = split[1];
+  }
+};
+
+*!*
+alert(user.fullName); // Вася Петров (из геттера)
+
+user.fullName = "Петя Иванов";
+alert(user.firstName); // Петя  (поставил сеттер)
+alert(user.surname); // Иванов (поставил сеттер)
+*/!*
+```
+
+## Да здравствуют геттеры и сеттеры!
+
+Казалось бы, зачем нам назначать геттеры и сеттеры через всякие хитрые вызовы? Можно же сделать функции `getFullName`, `setFullName`...
+
+**Основной бонус -- возможность получить контроль над свойством в любой момент!**
+
+В начале разработки мы можем использовать обычные свойства, например у `User` будет имя `name` и возраст `age`:
+
+```js
+function User(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+var pete = new User("Петя", 25);
+
+alert(pete.age); // 25
+```
+
+**С обычными свойствами в коде меньше букв, они удобны.**
+
+...Но рано или поздно может наступить расплата! 
+
+Например, когда написано много кода, который использует эти свойства, формат данных изменился и теперь вместо возраста `age` хранится дата рождения `birthday`:
+
+```js
+function User(name, birthday) {
+  this.name = name;
+  this.birthday = birthday;
+}
+
+var pete = new User("Петя", new Date(1987, 6, 1));
+```
+
+Что теперь делать со старым кодом, который выводит свойство `age`? 
+
+Можно, конечно, найти все места и поправить их, но это долго, а иногда и невозможно, скажем, если вы взаимодействуете со сторонней библиотекой, код в которой -- чужой и влезать в него нежелательно.
+
+Геттеры позволяют обойти проблему легко и непринуждённо. 
+
+Просто добавляем геттер `age`:
+
+```js
+//+ run
+function User(name, birthday) {
+  this.name = name;
+  this.birthday = birthday;
+
+*!*
+  Object.defineProperty(this, "age", { 
+    get: function() { 
+      var todayYear = new Date().getFullYear();
+      return todayYear - this.birthday.getFullYear();
+    }
+  });
+*/!*
+}
+
+var pete = new User("Петя", new Date(1987, 6, 1));
+
+alert(pete.age); // получает возраст из даты рождения
+```
+
+**Таким образом, `defineProperty` позволяет нам использовать обычные свойства и, при необходимости, в любой момент заменить их на функции, сохраняя совместимость внешнего интерфейса.**
+
+## Другие методы работы со свойствами
+
+<dl>
+<dt>[Object.defineProperties(obj, descriptors)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/defineProperties)</dt>
+<dd>Позволяет объявить несколько свойств сразу:
+
+```js
+//+ run
+var user = {}
+
+Object.defineProperties(user, {
+*!*
+  firstName: {
+*/!*
+    value: "Петя"
+  },
+
+*!*
+  surname: {
+*/!*
+    value: "Иванов"
+  },
+
+*!*
+  fullName: {
+*/!*
+    get: function() {
+      return this.firstName + ' ' + this.surname;
+    }
+  }
+});
+
+alert( user.fullName ); // Петя Иванов
+```
+
+</dd>
+<dt>[Object.keys(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/keys), [Object.getOwnPropertyNames(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames)</dt>
+<dd>Возвращают массив -- список свойств объекта.
+
+При этом `Object.keys` возвращает только `enumerable`-свойства, а `Object.getOwnPropertyNames` -- все:
+
+```js
+//+ run
+var obj = {
+  a: 1,
+  b: 2,
+  internal: 3
+};
+
+Object.defineProperty(obj, "internal", {enumerable: false});
+
+*!*
+alert( Object.keys(obj) ); // a,b 
+alert( Object.getOwnPropertyNames(obj) ); // a, internal, b
+*/!*
+```
+
+</dd>
+<dt>[Object.getOwnPropertyDescriptor(prop)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor)</dt>
+<dd>Возвращает дескриптор для свойства с `prop`.
+
+Полученный дескриптор можно изменить и использовать `defineProperty` для сохранения изменений, например:
+
+```js
+//+ run
+var obj = { test: 5 };
+*!*
+var descriptor = Object.getOwnPropertyDescriptor(obj, 'test');
+*/!*
+
+*!*
+// заменим value на геттер, для этого...
+*/!*
+delete descriptor.value; // ..нужно убрать value/writable
+delete descriptor.writable;
+descriptor.get = function() { // и поставить get
+  alert("Preved :)"); 
+};
+
+*!*
+// поставим новое свойство вместо старого
+*/!*
+
+// если не удалить - defineProperty объединит старый дескриптор с новым
+delete obj.test; 
+
+Object.defineProperty(obj, 'test', descriptor);
+
+obj.test; // Preved :)
+```
+
+</dd>
+</dl>
+
+...И несколько методов, которые используются очень редко:
+<dl>
+<dt>[Object.preventExtensions(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/seal)</dt>
+<dd>Запрещает добавление свойств в объект.</dd>
+<dt>[Object.seal(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/seal)</dt>
+<dd>Запрещает добавление и удаление свойств, все текущие свойства делает `configurable: false`.</dd>
+<dt>[Object.freeze(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/freeze)</dt>
+<dd>Запрещает добавление, удаление и изменение свойств, все текущие свойства делает `configurable: false, writable: false`.</dd>
+<dt>[Object.isExtensible(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/isExtensible), [Object.isSealed(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/isSealed), [Object.isFrozen(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/isFrozen)</dt>
+<dd>Возвращают `true`, если на объекте были вызваны методы `Object.preventExtensions/seal/freeze`.</dd>
+</dl>
+
diff --git a/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/solution.md b/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/solution.md
new file mode 100644
index 00000000..5a64ee15
--- /dev/null
+++ b/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/solution.md
@@ -0,0 +1,15 @@
+Изменения в методе `run`:
+
+```js
+this.run = function() {
+*!*
+  if (!this._enabled) {
+    throw new Error("Кофеварка выключена");
+  }
+*/!*
+
+  setTimeout(onReady, 1000);
+};
+```
+
+[edit src="solution" /]
diff --git a/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/solution.view/index.html b/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/solution.view/index.html
new file mode 100755
index 00000000..5a2be21c
--- /dev/null
+++ b/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/solution.view/index.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+</head>
+<body>
+  
+<script>
+function Machine(power) {
+  this._enabled = false;
+
+  this.enable = function() {
+    this._enabled = true;
+  };
+
+  this.disable = function() {
+    this._enabled = false;
+  };
+}
+
+function CoffeeMachine(power) {
+  Machine.apply(this, arguments);
+
+  var waterAmount = 0;
+
+  this.setWaterAmount = function(amount) {
+    waterAmount = amount;
+  };
+
+  function onReady() {
+    alert('Кофе готов!');
+  }
+
+  this.run = function() {
+    if (!this._enabled) {
+      throw new Error("Кофеварка выключена");
+    }
+    setTimeout(onReady, 1000);
+  };
+
+}
+
+var coffeeMachine = new CoffeeMachine(10000);
+coffeeMachine.run();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/source.view/index.html b/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/source.view/index.html
new file mode 100755
index 00000000..d742ef78
--- /dev/null
+++ b/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/source.view/index.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+</head>
+<body>
+  
+<script>
+function Machine(power) {
+  this._enabled = false;
+
+  this.enable = function() {
+    this._enabled = true;
+  };
+
+  this.disable = function() {
+    this._enabled = false;
+  };
+}
+
+function CoffeeMachine(power) {
+  Machine.apply(this, arguments);
+
+  var waterAmount = 0;
+
+  this.setWaterAmount = function(amount) {
+    waterAmount = amount;
+  };
+
+  function onReady() {
+    alert('Кофе готово!');
+  }
+
+  this.run = function() {
+    setTimeout(onReady, 1000);
+  };
+
+}
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/task.md b/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/task.md
new file mode 100644
index 00000000..fcbe592e
--- /dev/null
+++ b/1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/task.md
@@ -0,0 +1,22 @@
+# Запускать только при включённой кофеварке
+
+[importance 5]
+
+В коде `CoffeeMachine` сделайте так, чтобы метод `run` выводил ошибку, если кофеварка выключена.
+
+В итоге должен работать такой код:
+
+```js
+var coffeeMachine = new CoffeeMachine(10000);
+coffeeMachine.run(); // ошибка, кофеварка выключена!
+```
+
+А вот так -- всё в порядке:
+
+```js
+var coffeeMachine = new CoffeeMachine(10000);
+coffeeMachine.enable(); 
+coffeeMachine.run(); // ...Кофе готов!
+```
+
+[edit src="source" task /]
\ No newline at end of file
diff --git a/1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/solution.md b/1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/solution.md
new file mode 100644
index 00000000..33000522
--- /dev/null
+++ b/1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/solution.md
@@ -0,0 +1 @@
+[edit src="solution"/]
\ No newline at end of file
diff --git a/1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/solution.view/index.html b/1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/solution.view/index.html
new file mode 100755
index 00000000..7a6ba8b0
--- /dev/null
+++ b/1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/solution.view/index.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+</head>
+<body>
+  
+<script>
+function Machine(power) {
+  this._enabled = false;
+
+  this.enable = function() {
+    this._enabled = true;
+  };
+
+  this.disable = function() {
+    this._enabled = false;
+  };
+}
+
+function CoffeeMachine(power) {
+  Machine.apply(this, arguments);
+
+  var waterAmount = 0;
+  var timerId;
+
+  this.setWaterAmount = function(amount) {
+    waterAmount = amount;
+  };
+
+  function onReady() {
+    alert('Кофе готов!');
+  }
+
+  var parentDisable = this.disable;
+  this.disable = function() {
+    parentDisable.call(this);
+    clearTimeout(timerId);
+  }
+
+  this.run = function() {
+    if (!this._enabled) {
+      throw new Error("Кофеварка выключена");
+    }
+    timerId = setTimeout(onReady, 1000);
+  };
+
+}
+
+var coffeeMachine = new CoffeeMachine(10000);
+coffeeMachine.run();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/task.md b/1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/task.md
new file mode 100644
index 00000000..298cd301
--- /dev/null
+++ b/1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/task.md
@@ -0,0 +1,16 @@
+# Останавливать кофеварку при выключении
+
+[importance 5]
+
+Когда кофеварку выключают -- текущая варка кофе должна останавливаться.
+
+Например, следующий код кофе не сварит:
+
+```js
+var coffeeMachine = new CoffeeMachine(10000);
+coffeeMachine.enable();
+coffeeMachine.run();
+coffeeMachine.disable(); // остановит работу, ничего не выведет
+```
+
+Реализуйте это на основе решения [предыдущей задачи](/task/coffeemachine-fix-run).
diff --git a/1-js/8-oop/5-functional-inheritance/3-inherit-fridge/solution.md b/1-js/8-oop/5-functional-inheritance/3-inherit-fridge/solution.md
new file mode 100644
index 00000000..f5a6c779
--- /dev/null
+++ b/1-js/8-oop/5-functional-inheritance/3-inherit-fridge/solution.md
@@ -0,0 +1,29 @@
+Решение:
+
+```js
+function Fridge(power) {
+  // унаследовать
+  Machine.apply(this, arguments);
+
+  var food = []; // приватное свойство food
+
+  this.addFood = function() {
+    if (!this._enabled) {
+      throw new Error("Холодильник выключен");
+    }
+    if (food.length + arguments.length >= this._power / 100) {
+      throw new Error("Нельзя добавить, не хватает мощности");
+    }
+    for(var i=0; i<arguments.length; i++) {
+      food.push(arguments[i]);  // добавить всё из arguments
+    }
+  };
+
+  this.getFood = function() {
+    // копируем еду в новый массив, чтобы манипуляции с ним не меняли food
+    return food.slice(); 
+  };
+  
+}
+```
+
diff --git a/1-js/8-oop/5-functional-inheritance/3-inherit-fridge/task.md b/1-js/8-oop/5-functional-inheritance/3-inherit-fridge/task.md
new file mode 100644
index 00000000..1d72db05
--- /dev/null
+++ b/1-js/8-oop/5-functional-inheritance/3-inherit-fridge/task.md
@@ -0,0 +1,67 @@
+# Унаследуйте холодильник
+
+[importance 4]
+
+Создайте класс для холодильника `Fridge(power)`, наследующий от `Machine`, с приватным свойством `food` и методами `addFood(...)`, `getFood()`:
+<ul>
+<li>Приватное свойство `food` хранит массив еды.</li>
+<li>Публичный метод `addFood(item)` добавляет в массив `food` новую еду, доступен вызов с несколькими аргументами `addFood(item1, item2...)` для добавления нескольких элементов сразу.</li>
+<li>Если холодильник выключен, то добавить еду нельзя, будет ошибка.</li>
+<li>Максимальное количество еды ограничено `power/100`, где `power` -- мощность холодильника, указывается в конструкторе. При попытке добавить больше -- будет ошибка</li>
+<li>Публичный метод `getFood()` возвращает еду в виде массива, добавление или удаление элементов из которого не должно влиять на свойство `food` холодильника.</li>
+</ul>
+
+Код для проверки:
+
+```js
+var fridge = new Fridge(200); 
+fridge.addFood("котлета"); // ошибка, холодильник выключен
+```
+
+Ещё код для проверки:
+
+```js
+// создать холодильник мощностью 500 (не более 5 еды)
+var fridge = new Fridge(500); 
+fridge.enable();
+fridge.addFood("котлета"); 
+fridge.addFood("сок", "зелень");
+fridge.addFood("варенье", "пирог", "торт"); // ошибка, слишком много еды
+```
+
+Код использования холодильника без ошибок:
+
+```js
+var fridge = new Fridge(500); 
+fridge.enable();
+fridge.addFood("котлета"); 
+fridge.addFood("сок", "варенье");
+
+var fridgeFood = fridge.getFood();
+alert(fridgeFood); // котлета, сок, варенье
+
+// добавление элементов не влияет на еду в холодильнике
+fridgeFood.push("вилка", "ложка"); 
+
+alert(fridge.getFood()); // внутри по-прежнему: котлета, сок, варенье
+```
+
+Исходный код класса `Machine`, от которого нужно наследовать:
+
+```js
+function Machine(power) {
+  this._power = power;
+  this._enabled = false;
+
+  var self = this;
+
+  this.enable = function() {
+    self._enabled = true;
+  };
+
+  this.disable = function() {
+    self._enabled = false;
+  };
+}
+```
+
diff --git a/1-js/8-oop/5-functional-inheritance/4-add-methods-fridge/solution.md b/1-js/8-oop/5-functional-inheritance/4-add-methods-fridge/solution.md
new file mode 100644
index 00000000..50758d57
--- /dev/null
+++ b/1-js/8-oop/5-functional-inheritance/4-add-methods-fridge/solution.md
@@ -0,0 +1,77 @@
+
+
+```js
+//+ run
+function Machine(power) {
+  this._power = power;
+  this._enabled = false;
+
+  var self = this;
+
+  this.enable = function() {
+    self._enabled = true;
+  };
+
+  this.disable = function() {
+    self._enabled = false;
+  };
+}
+
+function Fridge(power) {
+  // унаследовать
+  Machine.apply(this, arguments);
+
+  var food = []; // приватное свойство food
+
+  this.addFood = function() {
+    if (!this._enabled) {
+      throw new Error("Холодильник выключен");
+    }
+    if (food.length + arguments.length >= this._power / 100) {
+      throw new Error("Нельзя добавить, не хватает мощности");
+    }
+    for(var i=0; i<arguments.length; i++) {
+      food.push(arguments[i]);  // добавить всё из arguments
+    }
+
+  };
+
+  this.getFood = function() {
+    // копируем еду в новый массив, чтобы манипуляции с ним не меняли food
+    return food.slice(); 
+  };
+
+*!*
+  this.filterFood = function(filter) {
+    return food.filter(filter);
+  };
+
+  this.removeFood = function(item) {
+    var idx = food.indexOf(item);
+    if (idx != -1) food.splice(idx, 1);
+  };
+*/!*
+}
+
+var fridge = new Fridge(500); 
+fridge.enable();
+fridge.addFood({ title: "котлета", calories: 100 });
+fridge.addFood({ title: "сок", calories: 30 });
+fridge.addFood({ title: "зелень", calories: 10 });
+fridge.addFood({ title: "варенье", calories: 150 }); 
+
+var dietItems = fridge.filterFood(function(item) {
+  return item.calories < 50;
+});
+
+fridge.removeFood("нет такой еды"); // без эффекта
+alert(fridge.getFood().length); // 4
+
+dietItems.forEach(function(item) {
+  alert(item.title); // сок, зелень
+  fridge.removeFood(item);
+});
+
+alert(fridge.getFood().length); // 2
+```
+
diff --git a/1-js/8-oop/5-functional-inheritance/4-add-methods-fridge/task.md b/1-js/8-oop/5-functional-inheritance/4-add-methods-fridge/task.md
new file mode 100644
index 00000000..7f7c03e3
--- /dev/null
+++ b/1-js/8-oop/5-functional-inheritance/4-add-methods-fridge/task.md
@@ -0,0 +1,36 @@
+# Добавьте методы в холодильник
+
+[importance 5]
+
+Добавьте в холодильник методы:
+<ul>
+<li>Публичный метод `filterFood(func)`, который возвращает всю еду, для которой `func(item) == true`</li>
+<li>Публичный метод `removeFood(item)`, который удаляет еду `item` из холодильника.</li>
+</ul>
+
+Код для проверки:
+
+```js
+var fridge = new Fridge(500); 
+fridge.enable();
+fridge.addFood({ title: "котлета", calories: 100 });
+fridge.addFood({ title: "сок", calories: 30 });
+fridge.addFood({ title: "зелень", calories: 10 });
+fridge.addFood({ title: "варенье", calories: 150 }); 
+
+fridge.removeFood("нет такой еды"); // без эффекта
+alert(fridge.getFood().length); // 4
+
+var dietItems = fridge.filterFood(function(item) {
+  return item.calories < 50;
+});
+
+dietItems.forEach(function(item) {
+  alert(item.title); // сок, зелень
+  fridge.removeFood(item);
+});
+
+alert(fridge.getFood().length); // 2
+```
+
+В качестве исходного кода используйте решение [предыдущей задачи](/task/inherit-fridge).
diff --git a/1-js/8-oop/5-functional-inheritance/5-override-disable/solution.md b/1-js/8-oop/5-functional-inheritance/5-override-disable/solution.md
new file mode 100644
index 00000000..1ea8ed77
--- /dev/null
+++ b/1-js/8-oop/5-functional-inheritance/5-override-disable/solution.md
@@ -0,0 +1,68 @@
+
+
+```js
+//+ run
+function Machine(power) {
+  this._power = power;
+  this._enabled = false;
+
+  var self = this;
+
+  this.enable = function() {
+    self._enabled = true;
+  };
+
+  this.disable = function() {
+    self._enabled = false;
+  };
+}
+
+function Fridge(power) {
+  Machine.apply(this, arguments);
+
+  var food = []; // приватное свойство food
+
+  this.addFood = function() {
+    if (!this._enabled) {
+      throw new Error("Холодильник выключен");
+    }
+    if (food.length + arguments.length >= this._power / 100) {
+      throw new Error("Нельзя добавить, не хватает мощности");
+    }
+    for(var i=0; i<arguments.length; i++) {
+      food.push(arguments[i]);  // добавить всё из arguments
+    }
+
+  };
+
+  this.getFood = function() {
+    // копируем еду в новый массив, чтобы манипуляции с ним не меняли food
+    return food.slice(); 
+  };
+
+  this.filterFood = function(filter) {
+    return food.filter(filter);
+  };
+
+  this.removeFood = function(item) {
+    var idx = food.indexOf(item);
+    if (idx != -1) food.splice(idx, 1);
+  };
+
+*!*
+  var parentDisable = this.disable;
+  this.disable = function() {
+    if (food.length) {
+      throw new Error("Нельзя выключить: внутри еда");
+    }
+    parentDisable();
+  };
+*/!*
+}
+
+var fridge = new Fridge(500); 
+fridge.enable();
+fridge.addFood("кус-кус");
+fridge.disable(); // ошибка, в холодильнике есть еда
+```
+
diff --git a/1-js/8-oop/5-functional-inheritance/5-override-disable/task.md b/1-js/8-oop/5-functional-inheritance/5-override-disable/task.md
new file mode 100644
index 00000000..d8eac533
--- /dev/null
+++ b/1-js/8-oop/5-functional-inheritance/5-override-disable/task.md
@@ -0,0 +1,17 @@
+# Переопределите disable
+
+[importance 5]
+
+Переопределите метод `disable` холодильника, чтобы при наличии в нём еды он выдавал ошибку.
+
+
+Код для проверки:
+
+```js
+var fridge = new Fridge(500); 
+fridge.enable();
+fridge.addFood("кус-кус");
+fridge.disable(); // ошибка, в холодильнике есть еда
+```
+
+В качестве исходного кода используйте решение [предыдущей задачи](/task/add-methods-fridge).
diff --git a/1-js/8-oop/5-functional-inheritance/article.md b/1-js/8-oop/5-functional-inheritance/article.md
new file mode 100644
index 00000000..c9811d45
--- /dev/null
+++ b/1-js/8-oop/5-functional-inheritance/article.md
@@ -0,0 +1,401 @@
+# Функциональное наследование
+
+Наследование -- это создание новых "классов" на основе существующих.
+
+В JavaScript его можно реализовать несколькими путями, один из которых -- с использованием наложения конструкторов, мы рассмотрим в этой главе.
+[cut]
+
+## Зачем наследование?
+
+Ранее мы обсуждали различные реализации кофеварки. Продолжим эту тему далее.
+
+Хватит ли нам только кофеварки для удобной жизни? Вряд ли... Скорее всего, ещё понадобятся как минимум холодильник, микроволновка, а возможно и другие *машины*.
+
+В реальной жизни у этих *машин* есть базовые правила пользования. Например, большая кнопка <i class="fa fa-power-off"></i> -- включение, шнур с розеткой нужно воткнуть в питание и т.п.
+
+Можно сказать, что "у всех машин есть общие свойства, а конкретные машины могут их дополнять". 
+
+Именно поэтому, увидев новую технику, мы уже можем что-то с ней сделать, даже не читая инструкцию.
+
+**Механизм наследования позволяет определить базовый класс `Машина`, в нём описать то, что свойственно всем машинам, а затем на его основе построить другие, более конкретные: `Кофеварка`, `Холодильник` и т.п.**
+
+[smart header="В веб-разработке всё так же"]
+В веб-разработке нам могут понадобиться классы `Меню`, `Табы`, `Диалог` и другие компоненты интерфейса. 
+
+Можно выделить полезный общий функционал в класс `Компонент` и наследовать их от него, чтобы не дублировать код. Это обычная практика, принятая во множестве библиотек.
+[/smart]
+
+## Наследование от Machine
+
+Например, у нас есть класс `Machine`, который реализует методы "включить" `enable()` и "выключить" `disable()`:
+
+```js
+function Machine() {
+  var enabled = false;
+
+  this.enable = function() {
+    enabled = true;
+  };
+
+  this.disable = function() {
+    enabled = false;
+  };
+}
+```
+
+Унаследуем от него кофеварку. При этом она получит эти методы автоматически:
+
+```js
+function CoffeeMachine(power) {
+*!*
+  Machine.call(this);
+*/!*
+  var waterAmount = 0;
+
+  this.setWaterAmount = function(amount) {
+    waterAmount = amount;
+  };
+
+  function onReady() {
+    alert('Кофе готово!');
+  }
+
+  this.run = function() {
+    setTimeout(onReady, 1000);
+  };
+
+}
+
+var coffeeMachine = new CoffeeMachine(10000);
+coffeeMachine.enable();
+```
+
+Наследование реализовано вызовом `Machine.call(this)` в начале `CoffeeMachine`.
+
+Он вызывает функцию `Machine`, передавая ей в качестве контекста `this` текущий объект. `Machine`, в процессе выполнения, записывает в `this` различные полезные свойства и методы, в нашем случае `this.enable` и `this.disable`.
+
+Далее `CoffeeMachine` продолжает выполнение и может добавить свои свойства и методы, а также пользоваться унаследованными.
+
+## Защищённые свойства
+
+В коде выше есть одна проблема.
+
+**Наследник не имеет доступа к приватным свойствам родителя.**
+
+Иначе говоря, если кофеварка захочет обратиться к `enabled`, то её ждёт разочарование:
+
+```js
+//+ run
+function Machine() {
+  var enabled = false;
+
+  this.enable = function() {
+    enabled = true;
+  };
+
+  this.disable = function() {
+    enabled = false;
+  };
+}
+
+function CoffeeMachine(power) {
+  Machine.call(this);
+
+  this.enable();
+
+*!*
+  // ошибка, переменная не определена!
+  alert(enabled);
+*/!*
+}
+
+var coffeeMachine = new CoffeeMachine(10000);
+```
+
+Это естественно, ведь `enabled` -- локальная переменная функции `Machine`. Она находится в другой области видимости.
+
+**Чтобы наследник имел доступ к свойству, оно должно быть записано в `this`.**
+
+**При этом, чтобы обозначить, что свойство является внутренним, его имя начинают с подчёркивания `_`.**
+
+```js
+//+ run
+function Machine() {
+*!*
+  this._enabled = false;
+*/!*
+
+  this.enable = function() {
+    this._enabled = true;
+  };
+
+  this.disable = function() {
+    this._enabled = false;
+  };
+}
+
+function CoffeeMachine(power) {
+  Machine.call(this);
+
+  this.enable();
+
+*!*
+  alert(this._enabled); // true
+*/!*
+}
+
+var coffeeMachine = new CoffeeMachine(10000);
+```
+
+**Подчёркивание в начале свойства -- общепринятый знак, что свойство является внутренним, предназначенным лишь для доступа из самого объекта и его наследников. Такие свойства называют *защищёнными*.**
+
+Технически это, конечно, возможно, но приличный программист снаружи в такое свойство не полезет.
+
+**Вообще, это стандартная практика: конструктор сохраняет свои параметры в свойствах объекта. Иначе наследники не будут иметь к ним доступ.**
+
+## Перенос свойства в защищённые
+
+В коде выше есть свойство `power`. Сейчас мы его тоже сделаем защищённым и перенесём в `Machine`, поскольку "мощность" свойственна всем машинам, а не только кофеварке:
+
+```js
+//+ run
+function CoffeeMachine(power) {
+*!*
+  Machine.apply(this, arguments); // (1)
+*/!*
+
+  alert(this._enabled); // false
+  alert(this._power); // 10000
+}
+
+function Machine(power) {
+*!*
+  this._power = power; // (2)
+*/!*
+
+  this._enabled = false;
+
+  this.enable = function() {
+    this._enabled = true;
+  };
+
+  this.disable = function() {
+    this._enabled = false;
+  };
+}
+
+var coffeeMachine = new CoffeeMachine(10000);
+```
+
+В коде выше при вызове `new CoffeeMachine(10000)` в строке `(1)` кофеварка передаёт аргументы и контекст родителю вызовом `Machine.apply(this, arguments)`. 
+
+Можно было бы использовать `Machine.call(this, power)`, но использование `apply` гарантирует передачу всех аргументов, мало ли, вдруг мы в будущем захотим их добавить.
+
+Далее конструктор `Machine` в строке `(2)` сохраняет `power` в свойстве объекта `this._power`, благодаря этому кофеварка, когда наследование перейдёт обратно к `CoffeeMachine`, сможет сразу обращаться к нему. 
+
+## Переопределение методов
+
+Итак, мы получили класс `CoffeeMachine`, который наследует от `Machine`.
+
+Аналогичным образом мы можем унаследовать от `Machine` холодильник `Fridge`, микроволновку `MicroOven` и другие классы, которые разделяют общий "машинный" функционал.
+
+Для этого достаточно вызвать `Machine` текущем контексте, а затем добавить свои методы.
+
+```js
+// Fridge может добавить и свои аргументы, 
+// которые в Machine не будут использованы
+function Fridge(power, temperature) {
+  Machine.call(this, arguments);
+ 
+   // ...
+}
+```
+
+Кроме создания новых методов, можно заменить унаследованные на свои:
+
+```js
+function CoffeeMachine(power, capacity) {
+  Machine.apply(this, arguments);
+ 
+   // переопределить this.enable
+   this.enable = function() { 
+     /* enable для кофеварки */ 
+   };
+}
+```
+
+...Однако, как правило, мы хотим не заменить, а *расширить* метод родителя. Например, сделать так, чтобы при включении кофеварка тут же запускалась. 
+
+Для этого метод родителя предварительно копируют в переменную, и затем вызывают внутри нового `enable` -- там, где считают нужным:
+
+```js
+function CoffeeMachine(power) {
+  Machine.apply(this, arguments);
+
+*!*
+  var parentEnable = this.enable; // (1)
+  this.enable = function() {  // (2)
+    parentEnable.call(this); // (3)
+    this.run(); // (4)
+  }
+*/!*
+
+  ...
+}
+```
+
+**Общая схема переопределения метода (по строкам выделенного фрагмента кода):**
+
+<ol>
+<li>Мы скопировали доставшийся от родителя метод `enable` в переменную, например `parentEnable`.</li>
+<li>Заменили метод `this.enable()` на свою функцию...</li>
+<li>Которая по-прежнему реализует старый функционал через вызов `parentEnable`...</li>
+<li>И в дополнение к нему делает что-то своё, например запускает приготовление кофе.</li>
+</ol>
+
+Обратим внимание на строку `(3)`. 
+
+В ней родительский метод вызывается так: `parentEnable.call(this)`. Если бы вызов был таким: `parentEnable()`, то ему бы не передался текущий `this` и возникла бы ошибка.
+
+Технически, можно сделать возможность вызывать его и как `parentEnable()`, но тогда надо гарантировать, что контекст будет правильным, например привязать его при помощи `bind` или при объявлении, в родителе, вообще не использовать `this`, а получать контекст через замыкание, вот так:
+
+```js
+//+ run
+function Machine(power) {
+  this._enabled = false;
+
+*!*
+  var self = this; 
+
+  this.enable = function() {
+    // используем внешнюю переменную вместо this
+    self._enabled = true;  
+  };
+*/!*
+
+  this.disable = function() {
+    this._enabled = false;
+  };
+
+}
+
+function CoffeeMachine(power) {
+  Machine.apply(this, arguments);
+
+  var waterAmount = 0;
+
+  this.setWaterAmount = function(amount) {
+    waterAmount = amount;
+  };
+
+*!*
+  var parentEnable = this.enable;
+  this.enable = function() {
+    parentEnable();  // теперь можно вызывать как угодно, this не важен
+    this.run();
+  }
+*/!*
+
+  function onReady() {
+    alert('Кофе готово!');
+  }
+
+  this.run = function() {
+    setTimeout(onReady, 1000);
+  };
+
+}
+
+var coffeeMachine = new CoffeeMachine(10000);
+coffeeMachine.setWaterAmount(50);
+coffeeMachine.enable();
+```
+
+В коде выше родительский метод `parentEnable = this.enable` успешно продолжает работать даже при вызове без контекста. А всё потому, что использует `self` внутри.
+
+## Итого
+
+Организация наследования, которая описана в этой главе, называется "функциональным паттерном наследования".
+
+Её общая схема (кратко):
+
+<ol>
+<li>Объявляется конструктор родителя `Machine`. В нём могут быть приватные (private), публичные (public) и защищённые (protected) свойства:
+
+```js
+function Machine(params) {
+  // локальные переменные и функции доступны только внутри Machine
+  var private; 
+
+  // публичные доступны снаружи
+  this.public = ...;
+
+  // защищённые доступны внутри Machine и для потомков
+  // мы договариваемся не трогать их снаружи
+  this._protected = ...
+}
+
+var machine = new Machine(...)
+machine.public();
+```
+
+</li>
+<li>Для наследования конструктор потомка вызывает родителя в своём контексте через `apply`. После чего может добавить свои переменные и методы:
+
+```js
+function CoffeeMachine(params) {
+  // универсальный вызов с передачей любых аргументов
+*!*
+  Machine.apply(this, arguments); 
+*/!*
+
+  this.coffeePublic = ...
+}
+
+var coffeeMachine = new CoffeeMachine(...);
+coffeeMachine.public();
+coffeeMachine.coffeePublic();
+```
+
+</li>
+<li>В `CoffeeMachine` свойства, полученные от родителя, можно перезаписать своими. Но обычно требуется не заменить, а расширить метод родителя. Для этого он предварительно копируется в переменную:
+
+```js
+function CoffeeMachine(params) {
+  Machine.apply(this, arguments); 
+
+*!*
+  var parentProtected = this._protected;
+  this._protected = function(args) {
+    parentProtected.call(this, args); // (*)
+    // ...
+  };
+*/!*
+}
+```
+
+Строку `(*)` можно упростить до `parentProtected(args)`, если метод родителя не использует `this`, а, например, привязан к `var self = this`:
+
+```js
+function Machine(params) {
+  var self = this;
+
+  this._protected = function() {
+    self.property = "value"; 
+  };
+}
+```
+
+</li>
+</ol>
+
+**В следующих главах мы будем изучать прототипный подход, который обладаем рядом преимуществ, по сравнению с функциональным.**
+
+Но функциональный тоже бывает полезен. 
+
+В своей практике разработки я обычно наследую функционально в тех случаях, когда *уже* есть какой-то код, который на нём построен. К примеру, уже существуют классы, написанные сторонними разработчиками, которые можно доопределить или расширить только так. 
+
+
+
+
+
diff --git a/1-js/8-oop/index.md b/1-js/8-oop/index.md
new file mode 100644
index 00000000..292b2d77
--- /dev/null
+++ b/1-js/8-oop/index.md
@@ -0,0 +1,3 @@
+# ООП в функциональном стиле
+
+Инкапсуляция и наследование в функциональном стиле, а также расширенные возможности объектов JavaScript.
\ No newline at end of file
diff --git a/1-js/9-prototypes/1-prototype/1-property-after-delete/solution.md b/1-js/9-prototypes/1-prototype/1-property-after-delete/solution.md
new file mode 100644
index 00000000..f6308c17
--- /dev/null
+++ b/1-js/9-prototypes/1-prototype/1-property-after-delete/solution.md
@@ -0,0 +1,5 @@
+<ol>
+<li>`true`, свойство взято из `rabbit`.</li>
+<li>`null`, свойство взято из `animal`.</li>
+<li>`undefined`, свойства больше нет.</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/9-prototypes/1-prototype/1-property-after-delete/task.md b/1-js/9-prototypes/1-prototype/1-property-after-delete/task.md
new file mode 100644
index 00000000..cdcc0a9a
--- /dev/null
+++ b/1-js/9-prototypes/1-prototype/1-property-after-delete/task.md
@@ -0,0 +1,24 @@
+# Чему равно cвойство после delete?
+
+[importance 5]
+
+Какие значения будут выводиться в коде ниже?
+
+```js
+var animal = { jumps: null };
+var rabbit = { jumps: true };
+
+rabbit.__proto__ = animal; 
+
+alert( rabbit.jumps ); // ? (1)
+
+delete rabbit.jumps;
+
+alert( rabbit.jumps ); // ? (2)
+
+delete animal.jumps;
+
+alert( rabbit.jumps);  // ? (3)
+```
+
+Итого три вопроса.
\ No newline at end of file
diff --git a/1-js/9-prototypes/1-prototype/1.png b/1-js/9-prototypes/1-prototype/1.png
new file mode 100755
index 00000000..85778ffc
Binary files /dev/null and b/1-js/9-prototypes/1-prototype/1.png differ
diff --git a/1-js/9-prototypes/1-prototype/1@2x.png b/1-js/9-prototypes/1-prototype/1@2x.png
new file mode 100755
index 00000000..3439b25e
Binary files /dev/null and b/1-js/9-prototypes/1-prototype/1@2x.png differ
diff --git a/1-js/9-prototypes/1-prototype/2-proto-and-this/proto5.png b/1-js/9-prototypes/1-prototype/2-proto-and-this/proto5.png
new file mode 100755
index 00000000..b9c002f0
Binary files /dev/null and b/1-js/9-prototypes/1-prototype/2-proto-and-this/proto5.png differ
diff --git a/1-js/9-prototypes/1-prototype/2-proto-and-this/proto6.png b/1-js/9-prototypes/1-prototype/2-proto-and-this/proto6.png
new file mode 100755
index 00000000..c9eb114f
Binary files /dev/null and b/1-js/9-prototypes/1-prototype/2-proto-and-this/proto6.png differ
diff --git a/1-js/9-prototypes/1-prototype/2-proto-and-this/solution.md b/1-js/9-prototypes/1-prototype/2-proto-and-this/solution.md
new file mode 100644
index 00000000..4206298f
--- /dev/null
+++ b/1-js/9-prototypes/1-prototype/2-proto-and-this/solution.md
@@ -0,0 +1,18 @@
+**Ответ: свойство будет записано в `rabbit`.**
+
+Если коротко -- то потому что `this` будет указывать на `rabbit`, а прототип при записи не используется.
+
+Если в деталях -- посмотрим как выполняется `rabbit.eat()`:
+<ol>
+<li>Интерпретатор ищет `rabbit.eat`, чтобы его вызвать. Но свойство `eat` отсутствует в объекте `rabbit`, поэтому он идет по ссылке `rabbit.__proto__` и находит это свойство там.
+<img src="proto5.png">
+</li>
+<li>Функция `eat` запускается. Контекст ставится равным объекту перед точкой, т.е. `this = rabbit`.
+
+Итак -- получается, что команда `this.full = true` устанавливает свойство `full` в самом объекте `rabbit`. Итог:
+
+<img src="proto6.png">
+</li>
+</ol>
+ 
+Эта задача демонстрирует, что несмотря на то, в каком прототипе находится свойство, это никак не влияет на установку `this`, которая осуществляется по своим, независимым правилам.
\ No newline at end of file
diff --git a/1-js/9-prototypes/1-prototype/2-proto-and-this/task.md b/1-js/9-prototypes/1-prototype/2-proto-and-this/task.md
new file mode 100644
index 00000000..a5ac9430
--- /dev/null
+++ b/1-js/9-prototypes/1-prototype/2-proto-and-this/task.md
@@ -0,0 +1,24 @@
+# Прототип и this
+
+[importance 5]
+
+Сработает ли вызов `rabbit.eat()` ?
+
+Если да, то в какой именно объект он запишет свойство `full`: в `rabbit` или `animal`?
+
+```js
+var animal = { 
+  eat: function() {
+    this.full = true;
+  }
+};
+
+var rabbit = {
+  __proto__: animal
+};
+
+*!*
+rabbit.eat();  
+*/!*
+```
+
diff --git a/1-js/9-prototypes/1-prototype/3-search-algorithm/solution.md b/1-js/9-prototypes/1-prototype/3-search-algorithm/solution.md
new file mode 100644
index 00000000..60ba9501
--- /dev/null
+++ b/1-js/9-prototypes/1-prototype/3-search-algorithm/solution.md
@@ -0,0 +1,33 @@
+<ol>
+<li>Расставим `__proto__`:
+
+```js
+//+ run
+var head = {
+  glasses: 1
+};
+
+var table = {
+  pen: 3
+};
+table.__proto__ = head;
+
+var bed = {
+  sheet: 1,
+  pillow: 2
+};
+bed.__proto__ = table;
+
+var pockets = {
+  money: 2000
+};
+pockets.__proto__ = bed;
+
+alert( pockets.pen ); // 3
+alert( bed.glasses ); // 1
+alert( table.money ); // undefined
+```
+
+</li>
+<li>**В современных браузерах, с точки зрения производительности, нет разницы, брать свойство из объекта или прототипа.** Они запоминают, где было найдено свойство и в следующий раз при запросе, к примеру, `pockets.glasses` начнут искать сразу в прототипе (`head`).</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/9-prototypes/1-prototype/3-search-algorithm/task.md b/1-js/9-prototypes/1-prototype/3-search-algorithm/task.md
new file mode 100644
index 00000000..ab5f9f16
--- /dev/null
+++ b/1-js/9-prototypes/1-prototype/3-search-algorithm/task.md
@@ -0,0 +1,32 @@
+# Алгоритм для поиска
+
+[importance 5]
+
+Есть объекты:
+
+```js
+var head = {
+  glasses: 1
+};
+
+var table = {
+  pen: 3
+};
+
+var bed = {
+  sheet: 1,
+  pillow: 2
+};
+
+var pockets = {
+  money: 2000
+};
+```
+
+Задание состоит из двух частей:
+<ol>
+<li>Присвойте объектам ссылки `__proto__` так, чтобы любой поиск чего-либо шёл по алгоритму `pockets -> bed -> table -> head`.
+
+То есть `pockets.pen == 3`, `bed.glasses == 1`, но `table.money == undefined`.</li>
+<li>После этого ответьте на вопрос, как быстрее искать `glasses`: обращением к `pockets.glasses` или `head.glasses`? Попробуйте протестировать.</li>
+</ol>
diff --git a/1-js/9-prototypes/1-prototype/article.md b/1-js/9-prototypes/1-prototype/article.md
new file mode 100644
index 00000000..2eaed2c1
--- /dev/null
+++ b/1-js/9-prototypes/1-prototype/article.md
@@ -0,0 +1,211 @@
+# Прототип объекта
+
+Объекты в JavaScript можно организовать в цепочки, так, чтобы если свойство не найдено в одном объекте -- оно автоматически искалось бы его в другом.
+
+Связующим звеном выступает специальное свойство `__proto__`.
+
+[cut]
+## Прототип __proto__ 
+
+Если один объект имеет специальную ссылку `__proto__` на другой объект, то при чтении свойства из него, если свойство отсутствует в самом объекте, оно ищется в объекте `__proto__`.
+
+Свойство доступно во всех браузерах, кроме IE10-. Впрочем, в старых IE оно, на самом деле, тоже есть, но требуются чуть более сложные способы для работы с ним, которые мы рассмотрим позднее.
+
+Пример кода (кроме IE10-):
+
+```js
+//+ run
+var animal = { eats: true };
+var rabbit = { jumps: true };
+
+*!*
+rabbit.__proto__ = animal; 
+*/!*
+
+// в rabbit можно найти оба свойства
+alert(rabbit.jumps); // true
+alert(rabbit.eats); // true
+```
+
+<ol>
+<li>Первый `alert` здесь работает очевидным образом -- он выводит свойство `jumps` объекта `rabbit`.</li>
+<li>Второй `alert` хочет вывести `rabbit.eats`, ищет его в самом объекте `rabbit`, не находит -- и продолжает поиск в объекте `rabbit.__proto__`, то есть, в данном случае, в `animal`.</li>
+</ol>
+
+Иллюстрация происходящего (поиск идет снизу вверх):
+
+<img src="1.png">
+
+**Объект, на который указывает ссылка `__proto__`, называется *"прототипом"*. В данном случае получилось, что `animal` является прототипом для `rabbit`.**
+
+**Также говорят, что объект `rabbit` *"прототипно наследует"* от `animal`.**
+
+Обратим внимание -- прототип используется исключительно при чтении. Запись значения, например, `rabbit.eats = value` или удаление `delete rabbit.eats` -- работает напрямую с объектом. 
+
+В примере ниже мы записываем свойство в сам `rabbit`, после чего `alert` перестаёт брать его у прототипа, а берёт уже из самого объекта:
+
+```js
+//+ run
+var animal = { eats: true };
+var rabbit = { jumps: true, eats: false };
+
+rabbit.__proto__ = animal;
+
+*!*
+alert(rabbit.eats); // false, свойство взято из rabbit 
+*/!*
+```
+
+**Другими словами, прототип -- это "резервное хранилище свойств и методов" объекта, автоматически используемое при поиске.**
+
+[smart header="Ссылка __proto__ в спецификации"]
+Если вы будете читать спецификацию EcmaScript -- свойство `__proto__` обозначено в ней как `[[Prototype]]`. 
+
+Двойные квадратные скобки здесь важны, чтобы не перепутать его с совсем другим свойством, которое называется `prototype`, и которое мы рассмотрим позже.
+[/smart]
+
+
+## Цепочка прототипов
+
+У объекта, который является `__proto__`, может быть свой `__proto__`, у того -- свой, и так далее. 
+
+Например, цепочка наследования из трех объектов `donkey -> winnie -> owl`:
+
+```js
+//+ run
+var donkey = { /* ... */ };
+var winnie = { /* ... */ };
+var owl = { knowsAll: true };
+
+donkey.__proto__ = winnie;
+winnie.__proto__ = owl;
+
+*!*
+alert( donkey.knowsAll ); // true
+*/!*
+```
+
+Картина происходящего:
+
+<img src="donkey_winnie_owl.png">
+ 
+## Перебор свойств без прототипа
+
+Обычный цикл `for..in` не делает различия между свойствами объекта и его прототипа.
+
+Он перебирает всё, например:
+
+```js
+//+ run
+var animal = {
+  eats: true
+};
+
+var rabbit = {
+  jumps: true,
+  __proto__: animal
+};
+
+*!*
+for (var key in rabbit) {
+  alert (key + " = " + rabbit[key]); // выводит и "eats" и "jumps"
+}
+*/!*
+```
+
+Иногда хочется посмотреть, что находится именно в самом объекте, а не в прототипе.
+
+**Вызов [obj.hasOwnProperty(prop)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/HasOwnProperty) возвращает `true`, если свойство `prop` принадлежит самому объекту `obj`, иначе `false`.**
+
+Например:
+
+```js
+//+ run
+var animal = {
+  eats: true
+};
+
+var rabbit = {
+  jumps: true,
+  __proto__: animal
+};
+
+*!*
+alert( rabbit.hasOwnProperty('jumps') ); // true: jumps принадлежит rabbit
+
+alert( rabbit.hasOwnProperty('eats') ); // false: eats не принадлежит
+*/!*
+```
+
+Для того, чтобы перебрать свойства самого объекта, достаточно профильтровать `key` через `hasOwnProperty`:
+
+```js
+//+ run
+var animal = {
+  eats: true
+};
+
+var rabbit = {
+  jumps: true,
+  __proto__: animal
+};
+
+for (var key in rabbit) {
+*!*
+  if ( !rabbit.hasOwnProperty(key) ) continue; // пропустить "не свои" свойства
+*/!*
+  alert (key + " = " + rabbit[key]); // выводит только "jumps"
+}
+```
+
+## Методы для работы с __proto__
+
+В современных браузерах есть два дополнительных метода для работы с `__proto__`. Зачем они нужны, если есть `__proto__`? В общем-то, не очень нужны, но по историческим причинам тоже существуют.
+
+<dl>
+<dt>[Object.getPrototypeOf(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/getPrototypeOf)</dt>
+<dd>Возвращает `obj.__proto__` (кроме IE8-)</dd>
+<dt>[Object.setPrototypeOf(obj, proto)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/setPrototypeOf)</dt>
+<dd>Устанавливает `obj.__proto__ = proto` (кроме IE10-).</dd>
+</dl>
+
+Кроме того, есть ещё один вспомогательный метод:
+<dt>[Object.create(proto)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create)</dt>
+<dd>Создаёт пустой объект с `__proto__`, равным первому аргументу (кроме IE8-).</dd>
+</dl>
+
+Метод `Object.create` -- несколько более мощный, чем здесь описано, у него есть необязательный второй аргумент, который позволяет также задать другие свойства объекта, но используется он редко и пока что нам не нужен. Мы рассмотрим его позже, в главе [](/descriptors-getters-setters).
+
+## Итого
+
+<ul>
+<li>Объекты в JavaScript можно организовать в цепочку при помощи специального свойства `__proto__`.</li>
+<li>При установке свойства `rabbit.__proto__ = animal` говорят, что объект `animal` будет "прототипом" `rabbit`.</li>
+<li>При чтении свойства из объекта, если его в нём нет, оно ищется в `__proto__`. Прототип задействуется только при чтении свойства. Операции присвоения `obj.prop =` или удаления `delete obj.prop` совершаются всегда над самим объектом `obj`.</li>
+</ul>
+
+Несколько прототипов одному объекту присвоить нельзя, но можно организовать объекты в цепочку, когда один объект ссылается на другой при помощи `__proto__`, тот ссылается на третий, и так далее.
+
+В современных браузерах есть методы для работы с прототипом:
+
+<ul>
+<li>[Object.getPrototypeOf(obj)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/getPrototypeOf) (кроме IE8-)</li>
+<li>[Object.setPrototypeOf(obj, proto)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/setPrototypeOf) (кроме IE10-)</li>
+<li>[Object.create(proto)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create) (кроме IE8-)</li>
+</ul>
+
+Возможно, вас смущает недостаточная поддержка `__proto__` в старых IE. Но это временно. В последующих главах мы рассмотрим дополнительные методы работы с `__proto__`, включая те, которые работают везде.
+
+Также мы рассмотрим, как свойство `__proto__` используется внутри самого языка JavaScript.
+
+
+
+[head]
+<script>
+function inherit(proto) {
+  function F() {}     
+  F.prototype = proto;
+  return new F();
+}
+</script>
+[/head]
\ No newline at end of file
diff --git a/1-js/9-prototypes/1-prototype/donkey_winnie_owl.png b/1-js/9-prototypes/1-prototype/donkey_winnie_owl.png
new file mode 100755
index 00000000..82352906
Binary files /dev/null and b/1-js/9-prototypes/1-prototype/donkey_winnie_owl.png differ
diff --git a/1-js/9-prototypes/1-prototype/donkey_winnie_owl@2x.png b/1-js/9-prototypes/1-prototype/donkey_winnie_owl@2x.png
new file mode 100755
index 00000000..3a3d1ca3
Binary files /dev/null and b/1-js/9-prototypes/1-prototype/donkey_winnie_owl@2x.png differ
diff --git a/1-js/9-prototypes/2-new-prototype/1-prototype-after-new/solution.md b/1-js/9-prototypes/2-new-prototype/1-prototype-after-new/solution.md
new file mode 100644
index 00000000..9256a9fb
--- /dev/null
+++ b/1-js/9-prototypes/2-new-prototype/1-prototype-after-new/solution.md
@@ -0,0 +1,9 @@
+Результат: `true`, из прототипа
+
+Результат:  `true`. Свойство `prototype` всего лишь задаёт `__proto__` у новых объектов. Так что его изменение не повлияет на `rabbit.__proto__`. Свойство `eats` будет получено из прототипа.
+
+Результат: `false`. Свойство `Rabbit.prototype` и `rabbit.__proto__` указывают на один и тот же объект. В данном случае изменения вносятся в сам объект.
+
+Результат: `true`, так как `delete rabbit.eats` попытается удалить `eats` из `rabbit`, где его и так нет. А чтение в `alert` произойдёт из прототипа.
+
+Результат: `undefined`. Удаление осуществляется из самого прототипа, поэтому свойство `rabbit.eats` больше взять неоткуда.
\ No newline at end of file
diff --git a/1-js/9-prototypes/2-new-prototype/1-prototype-after-new/task.md b/1-js/9-prototypes/2-new-prototype/1-prototype-after-new/task.md
new file mode 100644
index 00000000..5ebab1fe
--- /dev/null
+++ b/1-js/9-prototypes/2-new-prototype/1-prototype-after-new/task.md
@@ -0,0 +1,79 @@
+# Прототип после создания
+
+[importance 5]
+
+В примерах ниже создаётся объект `new Rabbit`, а затем проводятся различные действия с `prototype`. 
+
+Каковы будут результаты выполнения? Почему?
+
+Начнём с этого кода. Что он выведет?
+
+```js
+function Rabbit() { }
+Rabbit.prototype = { eats: true };
+
+var rabbit = new Rabbit(); 
+
+alert(rabbit.eats);
+```
+
+Добавили строку (выделена), что будет теперь?
+
+```js
+function Rabbit() { }
+Rabbit.prototype = { eats: true };
+
+var rabbit = new Rabbit(); 
+
+*!*
+Rabbit.prototype = {};
+*/!*
+
+alert(rabbit.eats);
+```
+
+А если код будет такой? (заменена одна строка):
+
+```js
+function Rabbit(name) { }
+Rabbit.prototype = { eats: true };
+
+var rabbit = new Rabbit(); 
+
+*!*
+Rabbit.prototype.eats = false;
+*/!*
+
+alert(rabbit.eats);
+```
+
+А такой? (заменена одна строка)
+
+```js
+function Rabbit(name) { }
+Rabbit.prototype = { eats: true };
+
+var rabbit = new Rabbit(); 
+
+*!* 
+delete rabbit.eats; // (*)
+*/!*
+
+alert(rabbit.eats);
+```
+
+И последний вариант:
+
+```js
+function Rabbit(name) { }
+Rabbit.prototype = { eats: true };
+
+var rabbit = new Rabbit(); 
+
+*!* 
+delete Rabbit.prototype.eats; // (*)
+*/!*
+
+alert(rabbit.eats);
+```
+
diff --git a/1-js/9-prototypes/2-new-prototype/2-default-arguments/solution.md b/1-js/9-prototypes/2-new-prototype/2-default-arguments/solution.md
new file mode 100644
index 00000000..7dec9540
--- /dev/null
+++ b/1-js/9-prototypes/2-new-prototype/2-default-arguments/solution.md
@@ -0,0 +1,15 @@
+Можно прототипно унаследовать от `options` и добавлять/менять опции в наследнике:
+
+```js
+//+ run
+function Menu(options) {
+  options = Object.create(options);
+  options.width = options.width || 300;
+
+  alert(options.width);  // возьмёт width из наследника
+  alert(options.height); // возьмёт height из исходного объекта
+  ...
+}
+```
+
+Все изменения будут происходить не в самом `options`, а в его наследнике, при этом исходный объект останется незатронутым.
diff --git a/1-js/9-prototypes/2-new-prototype/2-default-arguments/task.md b/1-js/9-prototypes/2-new-prototype/2-default-arguments/task.md
new file mode 100644
index 00000000..1f1c84d5
--- /dev/null
+++ b/1-js/9-prototypes/2-new-prototype/2-default-arguments/task.md
@@ -0,0 +1,27 @@
+# Аргументы по умолчанию
+
+[importance 4]
+
+Есть функция `Menu`, которая получает аргументы в виде объекта `options`:
+
+```js
+/* options содержит настройки меню: width, height и т.п. */
+function Menu(options) {
+  ...
+}
+```
+
+Ряд опций должны иметь значение по умолчанию. Мы могли бы проставить их напрямую в объекте `options`:
+
+```js
+function Menu(options) {
+  options.width = options.width || 300; // по умолчанию ширина 300
+  ...
+}
+```
+
+...Но такие изменения могут привести к непредвиденным результатам, т.к. объект `options` может быть повторно использован во внешнем коде. Он передается в `Menu` для того, чтобы параметры из него читали, а не писали.
+
+Один из способов безопасно назначить значения по умолчанию -- скопировать все свойства `options` в локальные переменные и затем уже менять. Другой способ -- клонировать `options` путём копирования всех свойств из него в новый объект, который уже изменяется. 
+
+При помощи наследования и `Object.create` предложите третий способ, который позволяет избежать копирования объекта и не требует новых переменных.
diff --git a/1-js/9-prototypes/2-new-prototype/3-compare-calls/solution.md b/1-js/9-prototypes/2-new-prototype/3-compare-calls/solution.md
new file mode 100644
index 00000000..ac2d442b
--- /dev/null
+++ b/1-js/9-prototypes/2-new-prototype/3-compare-calls/solution.md
@@ -0,0 +1,29 @@
+# Разница между вызовами
+
+Первый вызов ставит `this == rabbit`, остальные ставят `this` равным `Rabbit.prototype`, следуя правилу "`this` -- объект перед точкой". 
+
+Так что только первый вызов выведет `Rabbit`, в остальных он будет `undefined`.
+
+Код для проверки:
+
+```js
+//+ run
+function Rabbit(name) { this.name = name; }
+Rabbit.prototype.sayHi = function() { alert(this.name); }
+
+var rabbit = new Rabbit("Rabbit");
+
+rabbit.sayHi();
+Rabbit.prototype.sayHi();
+Object.getPrototypeOf(rabbit).sayHi();
+rabbit.__proto__.sayHi();
+```
+
+# Совместимость 
+
+<ol>
+<li>Первый вызов работает везде.</li>
+<li>Второй вызов работает везде.</li>
+<li>Третий вызов не будет работать в IE8-, там нет метода `getPrototypeOf`</li>
+<li>Четвёртый вызов -- самый "несовместимый", он не будет работать в IE10-, ввиду отсутствия свойства  `__proto__`.</li>
+</ol>
\ No newline at end of file
diff --git a/1-js/9-prototypes/2-new-prototype/3-compare-calls/task.md b/1-js/9-prototypes/2-new-prototype/3-compare-calls/task.md
new file mode 100644
index 00000000..98f1d037
--- /dev/null
+++ b/1-js/9-prototypes/2-new-prototype/3-compare-calls/task.md
@@ -0,0 +1,23 @@
+# Есть ли разница между вызовами?
+
+[importance 5]
+
+Создадим новый объект, вот такой:
+
+```js
+function Rabbit(name) { this.name = name; }
+Rabbit.prototype.sayHi = function() { alert(this.name); }
+
+var rabbit = new Rabbit("Rabbit");
+```
+
+Одинаково ли сработают эти вызовы?
+
+```js
+rabbit.sayHi();
+Rabbit.prototype.sayHi();
+Object.getPrototypeOf(rabbit).sayHi();
+rabbit.__proto__.sayHi();
+```
+
+Все ли они являются кросс-браузерными? Если нет -- в каких браузерах сработает каждый?
\ No newline at end of file
diff --git a/1-js/9-prototypes/2-new-prototype/article.md b/1-js/9-prototypes/2-new-prototype/article.md
new file mode 100644
index 00000000..f9e80be1
--- /dev/null
+++ b/1-js/9-prototypes/2-new-prototype/article.md
@@ -0,0 +1,156 @@
+# Свойство F.prototype и создание объектов через new
+
+До этого момента мы говорили о наследовании объектов, объявленных через `{...}`. 
+
+Но что, если объекты создаются функцией-конструктором через `new`?  Как указать прототип в этом случае?
+[cut]
+
+## Свойство F.prototype
+
+Самым очевидным решением является назначение `__proto__` в конструкторе.
+
+Например, если я хочу, чтобы у всех объектов, которые создаются `new Rabbit`, был прототип `animal`, я могу сделать так:
+
+```js
+//+ run
+var animal = { eats: true }
+
+function Rabbit(name) {
+  this.name = name;
+*!*
+  this.__proto__ = animal;
+*/!*
+}
+
+var rabbit = new Rabbit("Кроль");
+
+alert( rabbit.eats ); // true, из прототипа
+```
+
+Недостаток этого подхода -- он не работает в IE10-. 
+
+К счастью, в JavaScript с древнейших времён существует альтернативный, встроенный в язык и полностью кросс-браузерный способ.
+
+**Чтобы новым объектам автоматически ставить прототип, конструктору ставится свойство `prototype`.**
+
+**При создании объекта через `new`, в его прототип `__proto__` записывается ссылка из `prototype` функции-конструктора.**
+
+Например, код ниже полностью аналогичен предыдущему, но работает всегда и везде:
+
+```js
+//+ run
+var animal = { eats: true };
+
+function Rabbit(name) { 
+  this.name = name;
+}
+
+*!*
+Rabbit.prototype = animal;
+*/!*
+
+var rabbit = new Rabbit("Кроль"); //  rabbit.__proto__ == animal
+
+alert( rabbit.eats ); // true
+```
+
+Установка `Rabbit.prototype = animal` буквально говорит интерпретатору следующее: *"При создании объекта через `new Rabbit` запиши ему `__proto__  = animal`".* 
+
+[smart header="Свойство `prototype` имеет смысл только у конструктора"]
+Свойство `prototype` можно указать на любом объекте, но особый смысл оно имеет, лишь если назначено функции-конструктору.
+
+Само по себе оно вообще ничего не делает, его единственное назначение -- ставить `__proto__` новым объектам.
+[/smart]
+
+
+
+[warn header="Значением `prototype` может быть только объект"]
+Технически, в это свойство можно записать что угодно.
+
+Однако, при работе `new`, свойство `prototype` будет использовано лишь в том случае, если это объект. Примитивное значение, такое как число или строка, будет проигнорировано. 
+[/warn]
+
+## Эмуляция Object.create для IE8- [#inherit]
+
+Как мы только что видели, с конструкторами всё просто, назначить прототип можно кросс-браузерно при помощи `F.prototype`.
+
+Теперь вернёмся к созданию объектов без конструктора.
+
+Мы знаем, что в этом случае можно указывать прототип при помощи `__proto__`, но это не работает в IE10-. Также мы знаем, что есть метод `Object.create(proto)`, который создаёт пустой объект с данным прототипом, но он не работает в IE8-. 
+
+**Используя `prototype`, вызов `Object.create` можно легко эмулировать, так что он будет работать во всех браузерах, включая даже очень-очень старые.**
+
+Кросс-браузерный аналог -- назовём его `inherit`, состоит буквально из нескольких строк:
+
+```js
+function inherit(proto) {
+  function F() {}
+  F.prototype = proto;
+  var object = new F;
+  return object;
+}
+```
+
+Результат вызова `inherit(animal)` идентичен `Object.create(animal)`. Это будет новый пустой объект с прототипом `animal`.
+
+Например:
+
+```js
+//+ run
+var animal = { eats: true };
+
+var rabbit = inherit(animal); 
+ 
+alert(rabbit.eats); // true
+```
+
+Посмотрите внимательно на функцию `inherit` и вы, наверняка, сами поймёте, как она работает...
+ 
+Давайте, на всякий случай, пройдём её по шагам:
+
+```js
+function inherit(proto) {
+  function F() {}     // (1)
+  F.prototype = proto // (2)
+  var object = new F; // (3)
+  return object;      // (4)
+}
+```
+
+<ol>
+<li>Создана новая функция `F`. Она ничего не делает с `this`, так что если вызвать `new F`, то получим пустой объект.</li>
+<li>Свойство `F.prototype` устанавливается в будущий прототип `proto`</li>
+<li>Результатом вызова `new F` будет пустой объект с `__proto__` равным значению `F.prototype`.</li>
+<li>Мы получили пустой объект с заданным прототипом, как и хотели. Возвратим его.</li>
+</ol>
+
+
+Эта функция широко используется в библиотеках и фреймворках.
+
+Здесь и далее мы будем использовать `Object.create`, предполагая что для IE8- выполнен код:
+
+```js
+if (!Object.create) Object.create = inherit; /* определение inherit - выше */
+```
+
+В частности, аналогичным образом работает библиотека [es5-shim](https://github.com/es-shims/es5-shim), при подключении которой `Object.create` станет доступен для всех браузеров.
+
+## Итого
+
+<ul>
+<li>Прототип новых объектов, создаваемых через `new`, можно задавать кросс-браузерно, при помощи свойства конструктора `prototype`.</li>
+<li>При создании объекта через `new F`, в его `__proto__` записывается ссылка на объект `F.prototype`.</li>
+<li>Современный метод `Object.create(proto)` можно эмулировать его при помощи `prototype`, если хочется, чтобы он работал в IE8-.</li>
+</ul>
+
+
+
+[head]
+<script>
+function inherit(proto) {
+  function F() {}     
+  F.prototype = proto;
+  return new F();
+}
+</script>
+[/head]
\ No newline at end of file
diff --git a/1-js/9-prototypes/3-native-prototypes/1-defer-to-prototype/solution.md b/1-js/9-prototypes/3-native-prototypes/1-defer-to-prototype/solution.md
new file mode 100644
index 00000000..2db51390
--- /dev/null
+++ b/1-js/9-prototypes/3-native-prototypes/1-defer-to-prototype/solution.md
@@ -0,0 +1,15 @@
+
+
+```js
+//+ run
+Function.prototype.defer = function(ms) {
+  setTimeout(this, ms);
+}
+
+function f() {
+  alert("привет");
+}
+
+f.defer(1000); // выведет "привет" через 1 секунду
+```
+
diff --git a/1-js/9-prototypes/3-native-prototypes/1-defer-to-prototype/task.md b/1-js/9-prototypes/3-native-prototypes/1-defer-to-prototype/task.md
new file mode 100644
index 00000000..01e01567
--- /dev/null
+++ b/1-js/9-prototypes/3-native-prototypes/1-defer-to-prototype/task.md
@@ -0,0 +1,16 @@
+# Добавить функциям defer
+
+[importance 5]
+
+Добавьте всем функциям в прототип метод `defer(ms)`, который откладывает вызов функции на `ms` миллисекунд.
+
+После этого должен работать такой код:
+
+```js
+function f() {
+  alert("привет");
+}
+
+f.defer(1000); // выведет "привет" через 1 секунду
+```
+
diff --git a/1-js/9-prototypes/3-native-prototypes/2-defer-to-prototype-extended/solution.md b/1-js/9-prototypes/3-native-prototypes/2-defer-to-prototype-extended/solution.md
new file mode 100644
index 00000000..9a262a07
--- /dev/null
+++ b/1-js/9-prototypes/3-native-prototypes/2-defer-to-prototype-extended/solution.md
@@ -0,0 +1,22 @@
+
+
+```js
+//+ run
+Function.prototype.defer = function(ms) {
+  var f = this;
+  return function() {
+    var args = arguments, context = this;
+    setTimeout(function() {
+      f.apply(context, args);
+    }, ms);
+  }
+}
+
+// проверка
+function f(a, b) {
+  alert(a + b);
+}
+
+f.defer(1000)(1, 2); // выведет 3 через 1 секунду.
+```
+
diff --git a/1-js/9-prototypes/3-native-prototypes/2-defer-to-prototype-extended/task.md b/1-js/9-prototypes/3-native-prototypes/2-defer-to-prototype-extended/task.md
new file mode 100644
index 00000000..e7efba30
--- /dev/null
+++ b/1-js/9-prototypes/3-native-prototypes/2-defer-to-prototype-extended/task.md
@@ -0,0 +1,19 @@
+# Добавить функциям defer с аргументами
+
+[importance 4]
+
+Добавьте всем функциям в прототип метод defer(ms), который возвращает обёртку, откладывающую вызов функции на ms миллисекунд.
+
+Например, должно работать так:
+
+```js
+function f(a, b) {
+  alert(a + b);
+}
+
+f.defer(1000)(1, 2); // выведет 3 через 1 секунду.
+```
+
+То есть, должны корректно передаваться аргументы.
+
+
diff --git a/1-js/9-prototypes/3-native-prototypes/5.png b/1-js/9-prototypes/3-native-prototypes/5.png
new file mode 100755
index 00000000..f4202de0
Binary files /dev/null and b/1-js/9-prototypes/3-native-prototypes/5.png differ
diff --git a/1-js/9-prototypes/3-native-prototypes/5@2x.png b/1-js/9-prototypes/3-native-prototypes/5@2x.png
new file mode 100755
index 00000000..9adfa463
Binary files /dev/null and b/1-js/9-prototypes/3-native-prototypes/5@2x.png differ
diff --git a/1-js/9-prototypes/3-native-prototypes/6.png b/1-js/9-prototypes/3-native-prototypes/6.png
new file mode 100755
index 00000000..a4ab88fd
Binary files /dev/null and b/1-js/9-prototypes/3-native-prototypes/6.png differ
diff --git a/1-js/9-prototypes/3-native-prototypes/6@2x.png b/1-js/9-prototypes/3-native-prototypes/6@2x.png
new file mode 100755
index 00000000..6ac1ba26
Binary files /dev/null and b/1-js/9-prototypes/3-native-prototypes/6@2x.png differ
diff --git a/1-js/9-prototypes/3-native-prototypes/article.md b/1-js/9-prototypes/3-native-prototypes/article.md
new file mode 100644
index 00000000..590286ec
--- /dev/null
+++ b/1-js/9-prototypes/3-native-prototypes/article.md
@@ -0,0 +1,293 @@
+# Встроенные "классы" в JavaScript
+
+В JavaScript есть встроенные объекты: `Date`, `Array`, `Object` и другие. Они используют прототипы и демонстрируют организацию "псевдоклассов" на JavaScript, которую мы вполне можем применить и для себя.
+
+[cut]
+
+## Откуда методы у {} ?
+
+Начнём мы с того, что создадим пустой объект и выведем его.
+
+```js
+//+ run
+var obj = { };
+alert( obj ); // "[object Object]" ?
+```
+
+В объекте, очевидно, ничего нет... Но кто же тогда генерирует строковое представление для `alert(obj)`?
+
+## Object.prototype
+
+...Конечно же, это сделал метод `toString`, который находится во встроенном прототипе `Object.prototype`. Этот прототип ставится всем объектам `Object` при создании и содержит все встроенные методы и свойства для объектов.
+ 
+В деталях, работает это так:
+<ol>
+<li>Запись `obj = {}` является краткой формой `obj = new Object`, где `Object` -- встроенная функция-конструктор для объектов.</li>
+<li>При выполнении `new Object`, создаваемому объекту ставится `__proto__` по `prototype` конструктора, то есть в данном случае `Object.prototype`.</li>
+<li>В дальнейшем при обращении к `obj.toString()` -- функция будет взята из `Object.prototype`.</li>
+</ol>
+<img src="5.png">
+
+Это можно легко проверить:
+
+```js
+//+ run
+var obj = { };
+
+// метод берётся из прототипа?
+alert(obj.toString == Object.prototype.toString); // true, да
+
+// проверим, правда ли что __proto__ это Object.prototype?
+alert(obj.__proto__ == Object.prototype); // true
+```
+
+## Встроенные "классы" в JavaScript
+
+Точно такой же подход используется в массивах `Array`, функциях `Function` и других объектах. Встроенные методы для них находятся в `Array.prototype`, `Function.prototype` и т.п.
+
+<img src="6.png">
+
+Как видно из картинки, `Array.prototype` в свою очередь имеет прототипом `Object.prototype`, поэтому если метода нет у массива, то он ищется в объекте.
+
+Например, при вызове `arr.hasOwnProperty(...)` для массива `arr` метод `hasOwnProperty` берётся из `Object.prototype`.
+
+Получается иерархия наследования, которая всегда заканчивается на `Object.prototype`. Объект `Object.prototype` -- вершина иерархии, единственный, у которого `__proto__` равно `null`.
+
+**Поэтому говорят, что "все объекты наследуют от `Object`", а если более точно, то от `Object.prototype`.**
+
+**"Псевдоклассом" или, более коротко, "классом", называют функцию-конструктор вместе с её `prototype`.**
+
+[smart header="Переопределение методов в наследниках"]
+**При наследовании часть методов переопределяется, например, у массива `Array` есть свой `toString`, который находится в `Array.prototype.toString`:**
+
+```js
+//+ run
+var arr = [1, 2, 3]
+alert( arr ); // 1,2,3 <-- результат Array.prototype.toString
+```
+
+Для вывода объекта JavaScript ищет `toString` сначала в самом объекте `arr`, затем в `arr.__proto__`, который равен `Array.prototype`. 
+
+Конечно, если бы его там не было -- поиск пошёл бы выше в `Array.prototype.__proto__`, который по стандарту (см. диаграмму выше) равен `Object.prototype`, и тогда использовался бы стандартный метод для объектов.
+[/smart]
+
+Ранее мы говорили о применении методов массивов к "псевдомассивам", например, можно использовать `[].join` для произвольных объектов, имеющих нумерованные свойства и `length`:
+
+```js
+//+ run
+function showList() {
+*!*
+  alert( [].join.call(arguments, " - ") );
+*/!*
+}
+
+showList("Вася", "Паша", "Маша"); // Вася - Паша - Маша
+```
+
+Так как метод `join` находится в `Array.prototype`, то можно вызвать его оттуда напрямую, вот так:
+
+```js
+//+ run
+function showList() {
+*!*
+  alert( Array.prototype.join.call(arguments, " - ") );
+*/!*
+}
+
+showList("Вася", "Паша", "Маша"); // Вася - Паша - Маша
+```
+
+Это лучше, потому что не создаётся лишний объект массива `[]`, хотя, с другой стороны -- так больше писать.
+
+
+## Примитивы
+
+Примитивы не являются объектами, но методы берут из соответствующих прототипов: `Number.prototype`, `Boolean.prototype`, `String.prototype`.
+
+По стандарту, если обратиться к свойству примитива, то будет создан объект соответствующего типа, например `new String`, произведена операция со свойством или вызов метода по обычным правилам, с поиском в прототипе, а затем этот объект будет уничтожен. 
+
+Именно так работает код ниже:
+
+```js
+//+ run
+var user = "Вася"; // создали строку (примитив)
+
+*!*
+alert( user.toUpperCase() ); // ВАСЯ
+// создан временный объект new String
+// вызван метод 
+// new String уничтожен, результат возвращён
+*/!*
+```
+
+**Принципиальное отличие от объектов -- в примитив нельзя записать свойство.**
+
+```js
+//+ run
+// а теперь попытаемся записать свойство в строку:
+var user = "Вася";
+user.age = 30;
+
+*!*
+alert(user.age); // undefined
+*/!*
+```
+
+Свойство `age` было записано во временный объект, который был тут же уничтожен. 
+
+[warn header="Конструкторы `String/Number/Boolean` -- только для внутреннего использования"]
+Технически, можно создавать объекты для примитивов и вручную, например `new Number`. Но в ряде случаев получится откровенно бредовое поведение. Например:
+
+```js
+//+ run
+alert(typeof 1); // "number"
+
+alert(typeof new Number(1)); // "object" ?!?
+```
+
+Или, ещё страннее:
+
+```js
+//+ run
+var zero = new Number(0);
+
+if (zero) {  // объект - true, так что alert выполнится
+  alert("число ноль -- true?!?");
+}
+```
+
+Поэтому в явном виде `new String`, `new Number` и `new Boolean` никогда не вызываются.
+[/warn]
+
+[warn header="Значения `null` и `undefined` не имеют свойств"]
+Значения `null` и `undefined` стоят особняком. Вышесказанное к ним не относится.
+
+Для них нет соответствующих классов, в них нельзя записать свойство (будет ошибка), в общем, на конкурсе "самое примитивное значение" они точно разделили бы первое место.
+
+[/warn]
+
+
+## Изменение встроенных прототипов [#native-prototype-change]
+
+Встроенные прототипы можно изменять. В том числе -- добавлять свои методы.
+
+Мы можем написать метод для многократного повторения строки, и он тут же станет доступным для всех строк:
+
+```js
+//+ run
+String.prototype.repeat = function(times) {
+  return new Array(times+1).join(this);
+};
+
+alert( "ля".repeat(3) ) // ляляля
+```
+
+Аналогично мы могли бы создать метод `Object.prototype.each(func)`, который будет применять `func` к каждому свойству:
+
+```js
+//+ run
+Object.prototype.each = function(f) {
+  for (var prop in this) {
+    var value = this[prop];
+    f.call(value, prop, value); // вызовет f(prop, value), this=value
+  }
+}
+
+// Попробуем! (внимание, пока что это работает неверно!) 
+var obj = { name: 'Вася', age: 25 };
+
+obj.each(function(prop, val) { 
+  alert(prop); // name -> age -> (!) each
+});
+```
+
+Обратите внимание -- пример выше работает неправильно. Он выводит лишнее свойство `each`, т.к. цикл `for..in` перебирает свойства в прототипе. Встроенные методы при этом пропускаются, а наш метод -- вылез.
+
+В данном случае это легко поправить добавлением проверки `hasOwnProperty`:
+
+```js
+//+ run
+Object.prototype.each = function(f) {
+
+  for (var prop in this) {
+
+*!*
+    if (!this.hasOwnProperty(prop)) continue;
+*/!*
+
+    var value = this[prop];
+    f.call(value, prop, value);
+
+  }
+
+};
+
+// Теперь все будет в порядке
+var obj = { name: 'Вася', age: 25 };
+
+obj.each(function(prop, val) { 
+  alert(prop); // name -> age
+});
+```
+
+Здесь это сработало, теперь код работает верно. Но мы же не хотим добавлять  `hasOwnProperty` в цикл по любому объекту! Поэтому...
+
+
+
+[warn header="Не добавляйте свойства в `Object.prototype`"]
+
+Свойства, добавленные в `Object.prototype`, появятся во всех `for..in` циклах. Они в них будут лишними.
+
+[/warn]
+
+
+
+[smart header="Современный стандарт и `for..in`"]
+
+Встроенные свойства и методы не перебираются в `for..in`, так как у них есть специальный внутренний флаг `[[Enumerable]]`, установленный в `false`.
+
+Современные браузеры (включая IE с версии 9) позволяют устанавливать этот флаг для любых свойств, используя специальные вызовы, описанные в главе [](/descriptors-getters-setters). При таком добавлении предупреждение станет неактуальным, так как они тоже не будут видны в `for..in`.
+[/smart]
+
+**Многие объекты не участвуют в циклах `for..in`, например строки, функции... С ними уж точно нет такой проблемы, и в их прототипы, пожалуй, можно добавлять свои методы.**
+
+Но здесь есть свои "за" и "против":
+
+[compare]
++Методы в прототипе автоматически доступны везде, их вызов прост и красив.
+-Новые свойства, добавленные в прототип из разных мест, могут конфликтовать между собой. Представьте, что вы подключили две библиотеки, которые добавили одно и то же свойство в прототип, но определили его по-разному. Конфликт неизбежен.
+-Изменения встроенных прототипов влияют глобально, на все-все скрипты, делать их не очень хорошо с архитектурной точки зрения.
+[/compare]
+
+С другой стороны, есть одно исключение, когда изменения встроенных прототипов не только разрешены, но и приветствуются.
+
+**Допустимо изменение прототипа встроенных объектов, которое добавляет поддержку метода из современных стандартов в те браузеры, где её пока нет.**
+
+Например, добавим `Object.create(proto)` в старые браузеры:
+
+```js
+if (!Object.create) {
+
+  Object.create = function(proto) {
+    function F() {}
+    F.prototype = proto;
+    return new F;
+  };
+
+}
+```
+
+Именно так работает библиотека [es5-shim](https://github.com/kriskowal/es5-shim), которая предоставляет многие функции современного JavaScript для старых браузеров. Они добавляются во встроенные объекты и их прототипы.
+
+## Итого
+
+<ul>
+<li>Методы встроенных объектов хранятся в их прототипах.</li>
+<li>Встроенные прототипы можно расширить или поменять.</li>
+<li>Добавление методов в `Object.prototype`, если оно не сопровождается `Object.defineProperty` с установкой `enumerable` (IE9+), "сломает" циклы `for..in`, поэтому стараются в этот прототип методы не добавлять. 
+
+Другие прототипы изменять менее опасно, но все же не рекомендуется во избежание конфликтов.
+
+Отдельно стоит изменение с целью добавления современных методов в старые браузеры, таких как <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create">Object.create</a>, <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a>, <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a> и т.п. Это допустимо и как раз делается [es5-shim](https://github.com/kriskowal/es5-shim).</li>
+</ul>
+
diff --git a/1-js/9-prototypes/4-classes/1-rewrite-by-class/solution.md b/1-js/9-prototypes/4-classes/1-rewrite-by-class/solution.md
new file mode 100644
index 00000000..09af813f
--- /dev/null
+++ b/1-js/9-prototypes/4-classes/1-rewrite-by-class/solution.md
@@ -0,0 +1,32 @@
+
+
+```js
+//+ run
+function CoffeeMachine(power) {
+  // свойства конкретной кофеварки
+  this._power = power;
+  this._waterAmount = 0;
+}
+
+// свойства и методы для всех объектов класса
+CoffeeMachine.prototype.WATER_HEAT_CAPACITY = 4200;
+
+CoffeeMachine.prototype._getTimeToBoil = function() {
+  return this._waterAmount * this.WATER_HEAT_CAPACITY * 80 / this._power;
+};
+
+CoffeeMachine.prototype.run = function() {
+  setTimeout(function() {
+    alert('Кофе готов!');
+  }, this._getTimeToBoil());
+};
+
+CoffeeMachine.prototype.setWaterAmount = function(amount) {
+  this._waterAmount = amount;
+};
+
+var coffeeMachine = new CoffeeMachine(10000);
+coffeeMachine.setWaterAmount(50);
+coffeeMachine.run();
+```
+
diff --git a/1-js/9-prototypes/4-classes/1-rewrite-by-class/task.md b/1-js/9-prototypes/4-classes/1-rewrite-by-class/task.md
new file mode 100644
index 00000000..dadde648
--- /dev/null
+++ b/1-js/9-prototypes/4-classes/1-rewrite-by-class/task.md
@@ -0,0 +1,39 @@
+# Перепишите в виде класса
+
+[importance 5]
+
+Есть класс `CoffeeMachine`, заданный в функциональном стиле. 
+
+Задача: переписать `CoffeeMachine` в виде класса с использованием прототипа.
+
+Исходный код:
+
+```js
+//+ run
+function CoffeeMachine(power) {
+  var waterAmount = 0;
+
+  var WATER_HEAT_CAPACITY = 4200; 
+
+  function getTimeToBoil() {
+    return waterAmount * WATER_HEAT_CAPACITY * 80 / power;
+  }
+
+  this.run = function() {
+    setTimeout(function() {
+      alert('Кофе готов!');
+    }, getTimeToBoil());
+  };
+
+  this.setWaterAmount = function(amount) {
+    waterAmount = amount;
+  };
+
+}
+
+var coffeeMachine = new CoffeeMachine(10000);
+coffeeMachine.setWaterAmount(50);
+coffeeMachine.run();
+```
+
+P.S. При описании через прототипы локальные переменные недоступны методам, поэтому нужно будет переделать их в защищённые свойства.
diff --git a/1-js/9-prototypes/4-classes/2-hamsters-with-proto/solution.md b/1-js/9-prototypes/4-classes/2-hamsters-with-proto/solution.md
new file mode 100644
index 00000000..70cc2fc5
--- /dev/null
+++ b/1-js/9-prototypes/4-classes/2-hamsters-with-proto/solution.md
@@ -0,0 +1,52 @@
+# Почему возникает проблема
+
+Давайте подробнее разберем происходящее при вызове `speedy.found("яблоко")`:
+<ol>
+<li>Интерпретатор ищет свойство `found` в `speedy`. Но `speedy` -- пустой объект, т.к. `new Hamster` ничего не делает с `this`.</li>
+<li>Интерпретатор идёт по ссылке `speedy.__proto__ (==Hamster.prototype)` и находят там метод `found`, запускает его.</li>
+<li>Значение `this` устанавливается в объект перед точкой, т.е. в `speedy`.</li>
+<li>Для выполнения `this.food.push()` нужно найти свойство `this.food`. Оно отсутствует в `speedy`, но есть в `speedy.__proto__`.</li>
+<li>Значение `"яблоко"` добавляется в `speedy.__proto__.food`.</li>
+</ol>
+
+**У всех хомяков общий живот!** Или, в терминах JavaScript, свойство `food` изменяется в прототипе, который является общим для всех объектов-хомяков.
+
+Заметим, что этой проблемы не было бы при простом присваивании:
+
+```js
+this.food = something;
+```
+
+В этом случае значение записалось бы в сам объект, без поиска `found` в прототипе.
+
+**Проблема возникает только со свойствами-объектами в прототипе.**
+
+Исправьте её?
+
+# Исправление
+
+Для исправления проблемы нужно дать каждому хомяку свой живот. Это можно сделать, присвоив его в конструкторе.
+
+```js
+//+ run
+function Hamster() { 
+*!*
+  this.food = [];
+*/!*
+}
+
+Hamster.prototype.found = function(something) {
+  this.food.push(something);
+};
+
+speedy = new Hamster();
+lazy = new Hamster();
+
+speedy.found("яблоко");
+speedy.found("орех");
+
+alert(speedy.food.length) // 2
+alert(lazy.food.length) // 0(!)
+```
+
+Теперь всё в порядке. У каждого хомяка -- свой живот.
\ No newline at end of file
diff --git a/1-js/9-prototypes/4-classes/2-hamsters-with-proto/task.md b/1-js/9-prototypes/4-classes/2-hamsters-with-proto/task.md
new file mode 100644
index 00000000..452c3d46
--- /dev/null
+++ b/1-js/9-prototypes/4-classes/2-hamsters-with-proto/task.md
@@ -0,0 +1,33 @@
+# Хомяки с __proto__
+
+[importance 5]
+
+Вы -- руководитель команды, которая разрабатывает игру, хомяковую ферму. Один из программистов получил задание создать класс "хомяк" (англ - `"Hamster"`).
+
+Объекты-хомяки должны иметь массив `food` для хранения еды и метод `found`, который добавляет к нему.
+
+Ниже -- его решение. При создании двух хомяков, если поел один -- почему-то сытым становится и второй тоже. 
+
+В чём дело? Как поправить?
+
+```js
+//+ run
+function Hamster() {  }
+
+Hamster.prototype.food = [ ]; // пустой "живот"
+
+Hamster.prototype.found = function(something) {
+  this.food.push(something);
+};
+
+// Создаём двух хомяков и кормим первого
+speedy = new Hamster();
+lazy = new Hamster();
+
+speedy.found("яблоко");
+speedy.found("орех");
+
+alert(speedy.food.length); // 2
+alert(lazy.food.length);   // 2 (!??)
+```
+
diff --git a/1-js/9-prototypes/4-classes/7.png b/1-js/9-prototypes/4-classes/7.png
new file mode 100755
index 00000000..9a43f55e
Binary files /dev/null and b/1-js/9-prototypes/4-classes/7.png differ
diff --git a/1-js/9-prototypes/4-classes/7@2x.png b/1-js/9-prototypes/4-classes/7@2x.png
new file mode 100755
index 00000000..add9a340
Binary files /dev/null and b/1-js/9-prototypes/4-classes/7@2x.png differ
diff --git a/1-js/9-prototypes/4-classes/article.md b/1-js/9-prototypes/4-classes/article.md
new file mode 100644
index 00000000..cc6da884
--- /dev/null
+++ b/1-js/9-prototypes/4-classes/article.md
@@ -0,0 +1,138 @@
+# Свои классы на прототипах
+
+Используем ту же структуру, что JavaScript использует внутри себя, для объявления своих классов.
+
+[cut]
+## Обычный конструктор
+
+Вспомним, как мы объявляли конструкторы ранее.
+
+Например, этот код задаёт объект `Animal` без всяких прототипов:
+
+```js
+//+ run
+function Animal(name) {
+  this.speed = 0;
+  this.name = name;
+ 
+  this.run = function(speed) {
+    this.speed += speed;
+    alert(this.name + ' бежит, скорость ' + this.speed);
+  };
+
+  this.stop = function() {
+    this.speed = 0;
+    alert(this.name + ' стоит');
+  };
+};
+
+var animal = new Animal('Зверь');
+
+alert(animal.speed);               // 0, начальная скорость
+animal.run(3);                     // Зверь бежит, скорость 3
+animal.run(10);                    // Зверь бежит, скорость 13
+animal.stop();                     // Зверь стоит
+```
+
+## Класс через прототип
+
+А теперь создадим аналогичный класс, используя прототипы, наподобие того, как сделаны классы `Object`, `Date` и остальные.
+
+**Чтобы объявить свой класс, нужно:**
+<ol>
+<li>Объявить функцию-конструктор.</li>
+<li>Записать методы и свойства, нужные всем объектам класса, в `prototype`.</li>
+</ol>
+
+Опишем класс `Animal`:
+
+```js
+//+ run
+// конструктор
+function Animal(name) {
+  this.name = name;
+}
+
+// методы в прототипе
+Animal.prototype.run = function(speed) {
+  this.speed += speed;
+  alert(this.name + ' бежит, скорость ' + this.speed);
+};
+
+Animal.prototype.stop = function() {
+  this.speed = 0;
+  alert(this.name + ' стоит');
+};
+
+// свойство speed со значением "по умолчанию"
+Animal.prototype.speed = 0;
+
+var animal = new Animal('Зверь');
+
+alert(animal.speed);               // 0, свойство взято из прототипа
+animal.run(5);                     // Зверь бежит, скорость 5
+animal.run(5);                     // Зверь бежит, скорость 10
+animal.stop();                     // Зверь стоит
+```
+
+Здесь объекту `animal` принадлежит лишь свойство `name`, а остальное находится в прототипе.
+
+Обратим внимание, значение `speed` по умолчанию тоже перенесено в прототип, ведь оно во всех объектах (в начале) одинаково, но вызовы `animal.run()`, `animal.stop()` в примере используют вызов `this.speed += speed`, а любая запись в `this.свойство` работает с самим объектом.
+
+То есть, начальное значение `speed` берётся из прототипа, а новое -- пишется уже в сам объект. И в дальнейшем используется.
+
+<img src="7.png">
+
+## Сравнение
+
+Чем такое задание класса лучше и хуже предыдущего?
+
+[compare]
++Прототип позволяет хранить общие свойства и методы в единственном экземпляре, таким образом экономится память и создание объекта происходит быстрее, чем если записывать их в каждый `this`.
+-При объявлении класса через прототип, мы теряем возможность использовать локальные переменные и функции.
+[/compare]
+
+К примеру, есть у нас приватное свойство `name` и метод `sayHi` в функциональном стиле ООП:
+
+```js
+//+ run
+function Animal(name) {
+  this.sayHi = function() {
+*!*
+    alert(name);
+*/!*
+  };
+}
+
+var animal = new Animal("Зверь");
+animal.sayHi(); // Зверь
+```
+
+При задании методов в прототипе мы не сможем её так оставить, ведь методы находятся *вне* конструктора, у них нет общей области видимости, поэтому приходится записывать `name` в сам объект, обозначив его как защищённое:
+
+```js
+//+ run
+function Animal(name) {
+*!*
+  this._name = name;
+*/!*
+}
+
+Animal.prototype.sayHi = function() {
+*!*
+  alert(this._name);
+*/!*
+}
+
+var animal = new Animal("Зверь");
+animal.sayHi(); // Зверь
+```
+
+Ранее в каждый объект `Animal` записывалась своя функция `this.sayHi`, а теперь есть одна функция такого рода в прототипе. В сам объект мы пишем только то, что свойственно именно этому объекту.
+
+## Задачи
+
+Обычно свойства по умолчанию хранятся в прототипе. Но если свойство по умолчанию -- объект, то его в прототипе хранить нельзя. 
+
+Почему? Смотрите задачу ниже на эту тему.
+
diff --git a/1-js/9-prototypes/5-class-inheritance/1-inheritance-error-assign/solution.md b/1-js/9-prototypes/5-class-inheritance/1-inheritance-error-assign/solution.md
new file mode 100644
index 00000000..f0b99ed5
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/1-inheritance-error-assign/solution.md
@@ -0,0 +1,44 @@
+Ошибка в строке:
+
+```js
+Rabbit.prototype = Animal.prototype;
+```
+
+Эта ошибка приведёт к тому, что `Rabbit.prototype` и `Animal.prototype` -- один и тот же объект. В результате методы `Rabbit` будут помещены в него и, при совпадении, перезапишут методы `Animal`.
+
+Получится, что все животные прыгают, вот пример:
+
+```js
+//+ run
+function Animal(name) {
+  this.name = name;
+}
+
+Animal.prototype.walk = function() { 
+  alert("ходит " + this.name);
+};
+
+function Rabbit(name) {
+  this.name = name;
+}
+*!*
+Rabbit.prototype = Animal.prototype;
+*/!*
+
+Rabbit.prototype.walk = function() { 
+  alert("прыгает! и ходит: " + this.name);
+};
+
+*!*
+var animal = new Animal("Хрюшка");
+animal.walk(); // прыгает! и ходит Хрюшка
+*/!*
+```
+
+Правильный вариант этой строки:
+
+```js
+Rabbit.prototype = Object.create(Animal.prototype);
+```
+
+Если так написать, то в `Rabbit.prototype` будет отдельный объект, который прототипно наследует от `Animal.prototype`, но может содержать и свои свойства, специфичные для кроликов.
diff --git a/1-js/9-prototypes/5-class-inheritance/1-inheritance-error-assign/task.md b/1-js/9-prototypes/5-class-inheritance/1-inheritance-error-assign/task.md
new file mode 100644
index 00000000..5b176d3d
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/1-inheritance-error-assign/task.md
@@ -0,0 +1,25 @@
+# Найдите ошибку в наследовании
+
+[importance 5]
+
+Найдите ошибку в пототипном наследовании. К чему она приведёт?
+
+```js
+function Animal(name) {
+  this.name = name;
+}
+
+Animal.prototype.walk = function() { 
+  alert("ходит " + this.name);
+};
+
+function Rabbit(name) {
+  this.name = name;
+}
+Rabbit.prototype = Animal.prototype;
+
+Rabbit.prototype.walk = function() { 
+  alert("прыгает! и ходит: " + this.name);
+};
+```
+
diff --git a/1-js/9-prototypes/5-class-inheritance/10.png b/1-js/9-prototypes/5-class-inheritance/10.png
new file mode 100755
index 00000000..f5fa8c74
Binary files /dev/null and b/1-js/9-prototypes/5-class-inheritance/10.png differ
diff --git a/1-js/9-prototypes/5-class-inheritance/10@2x.png b/1-js/9-prototypes/5-class-inheritance/10@2x.png
new file mode 100755
index 00000000..53c247af
Binary files /dev/null and b/1-js/9-prototypes/5-class-inheritance/10@2x.png differ
diff --git a/1-js/9-prototypes/5-class-inheritance/11.png b/1-js/9-prototypes/5-class-inheritance/11.png
new file mode 100755
index 00000000..826d0239
Binary files /dev/null and b/1-js/9-prototypes/5-class-inheritance/11.png differ
diff --git a/1-js/9-prototypes/5-class-inheritance/11@2x.png b/1-js/9-prototypes/5-class-inheritance/11@2x.png
new file mode 100755
index 00000000..995a70eb
Binary files /dev/null and b/1-js/9-prototypes/5-class-inheritance/11@2x.png differ
diff --git a/1-js/9-prototypes/5-class-inheritance/2-inheritance-error-constructor/solution.md b/1-js/9-prototypes/5-class-inheritance/2-inheritance-error-constructor/solution.md
new file mode 100644
index 00000000..8d0ae759
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/2-inheritance-error-constructor/solution.md
@@ -0,0 +1,40 @@
+Ошибка -- в том, что метод `walk` присваивается в конструкторе `Animal` самому объекту вместо прототипа.
+
+Казалось бы -- ничего страшного, ведь `Animal.apply(this, arguments)` создаст его. Код работает.
+
+Однако, если мы решим перезаписать этот метод своим, специфичным для кролика, то будет сюрприз:
+
+```js
+//+ run
+function Animal(name) {
+  this.name = name;
+
+  this.walk = function() { 
+    alert("ходит " + this.name);
+  };
+}
+
+function Rabbit(name) {
+  Animal.apply(this, arguments);
+}
+Rabbit.prototype = Object.create(Animal.prototype);
+
+*!*
+Rabbit.prototype.walk = function() { 
+  alert("прыгает! и ходит: " + this.name);
+};
+*/!*
+
+var rabbit = new Rabbit("Кроль");
+*!*
+rabbit.walk(); // ходит Кроль
+*/!*
+```
+
+Переопределение не сработало!
+
+Причина -- метод `walk` создаётся в конструкторе, записывается в сам объект и тем самым игнорирует цепочку прототипов и говорит "гуд-бай" всей иерархии наследования.
+
+Правильно было бы определять `walk` как `Animal.prototype.walk`.
+
+Тем более, что этот метод является общим для всех объектов, тратить память и время на запись его в каждый конструктор определённо ни к чему.
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/2-inheritance-error-constructor/task.md b/1-js/9-prototypes/5-class-inheritance/2-inheritance-error-constructor/task.md
new file mode 100644
index 00000000..b3efa118
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/2-inheritance-error-constructor/task.md
@@ -0,0 +1,26 @@
+# В чём ошибка в наследовании
+
+[importance 5]
+
+Найдите ошибку в пототипном наследовании. К чему она приведёт?
+
+```js
+//+ run
+function Animal(name) {
+  this.name = name;
+
+  this.walk = function() { 
+    alert("ходит " + this.name);
+  };
+
+}
+
+function Rabbit(name) {
+  Animal.apply(this, arguments);
+}
+Rabbit.prototype = Object.create(Animal.prototype);
+
+var rabbit = new Rabbit("Кроль");
+rabbit.walk();
+```
+
diff --git a/1-js/9-prototypes/5-class-inheritance/3-clock-class/clock.js b/1-js/9-prototypes/5-class-inheritance/3-clock-class/clock.js
new file mode 100755
index 00000000..a3b119c8
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/3-clock-class/clock.js
@@ -0,0 +1,33 @@
+
+function Clock(options) {
+  this._template = options.template;
+}
+
+Clock.prototype._render = function render() {
+  var date = new Date();
+
+  var hours = date.getHours();
+  if (hours < 10) hours = '0' + hours;
+
+  var min = date.getMinutes();
+  if (min < 10) min = '0' + min;
+
+  var sec = date.getSeconds();
+  if (sec < 10) sec = '0' + sec;
+
+  var output = this._template.replace('h', hours).replace('m', min).replace('s', sec);
+
+  console.log(output);
+};
+
+Clock.prototype.stop = function() {
+  clearInterval(this._timer);
+};
+
+Clock.prototype.start = function() {
+  this._render();
+  var self = this;
+  this._timer = setInterval(function() {
+    self._render();
+  }, 1000);
+};
diff --git a/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.md b/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.md
new file mode 100644
index 00000000..d1c08b87
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.md
@@ -0,0 +1,7 @@
+
+
+```js
+//+ src="clock.js"
+```
+
+[edit src="solution"]Открыть полное решение[/edit]
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.view/clock.js b/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.view/clock.js
new file mode 100755
index 00000000..a3b119c8
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.view/clock.js
@@ -0,0 +1,33 @@
+
+function Clock(options) {
+  this._template = options.template;
+}
+
+Clock.prototype._render = function render() {
+  var date = new Date();
+
+  var hours = date.getHours();
+  if (hours < 10) hours = '0' + hours;
+
+  var min = date.getMinutes();
+  if (min < 10) min = '0' + min;
+
+  var sec = date.getSeconds();
+  if (sec < 10) sec = '0' + sec;
+
+  var output = this._template.replace('h', hours).replace('m', min).replace('s', sec);
+
+  console.log(output);
+};
+
+Clock.prototype.stop = function() {
+  clearInterval(this._timer);
+};
+
+Clock.prototype.start = function() {
+  this._render();
+  var self = this;
+  this._timer = setInterval(function() {
+    self._render();
+  }, 1000);
+};
diff --git a/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.view/index.html b/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.view/index.html
new file mode 100755
index 00000000..5b807b0c
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.view/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Часики в консоли</title>
+    <meta charset="utf-8">
+</head>
+<body>
+
+<script src="clock.js"></script>
+<script>
+    var clock = new Clock({
+        template: 'h:m:s'
+    });
+    clock.start();
+</script>
+
+</body>
+</html>
diff --git a/1-js/9-prototypes/5-class-inheritance/3-clock-class/source.view/clock.js b/1-js/9-prototypes/5-class-inheritance/3-clock-class/source.view/clock.js
new file mode 100755
index 00000000..bb9662fc
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/3-clock-class/source.view/clock.js
@@ -0,0 +1,32 @@
+function Clock(options) {
+
+  var template = options.template;
+  var timer;
+
+  function render() {
+    var date = new Date();
+
+    var hours = date.getHours();
+    if (hours < 10) hours = '0' + hours;
+
+    var min = date.getMinutes();
+    if (min < 10) min = '0' + min;
+
+    var sec = date.getSeconds();
+    if (sec < 10) sec = '0' + sec;
+
+    var output = template.replace('h', hours).replace('m', min).replace('s', sec);
+
+    console.log(output);
+  }
+
+  this.stop = function() {
+    clearInterval(timer);
+  };
+
+  this.start = function() {
+    render();
+    timer = setInterval(render, 1000);
+  }
+
+}
diff --git a/1-js/9-prototypes/5-class-inheritance/3-clock-class/source.view/index.html b/1-js/9-prototypes/5-class-inheritance/3-clock-class/source.view/index.html
new file mode 100755
index 00000000..5b807b0c
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/3-clock-class/source.view/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Часики в консоли</title>
+    <meta charset="utf-8">
+</head>
+<body>
+
+<script src="clock.js"></script>
+<script>
+    var clock = new Clock({
+        template: 'h:m:s'
+    });
+    clock.start();
+</script>
+
+</body>
+</html>
diff --git a/1-js/9-prototypes/5-class-inheritance/3-clock-class/task.md b/1-js/9-prototypes/5-class-inheritance/3-clock-class/task.md
new file mode 100644
index 00000000..51dc1bd9
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/3-clock-class/task.md
@@ -0,0 +1,11 @@
+# Класс "часы"
+
+[importance 5]
+
+Есть реализация часиков, оформленная в виде одной функции-конструктора. У неё есть приватные свойства `timer`, `template` и метод `render`.
+
+Задача: переписать часы на прототипах. Приватные свойства и методы сделать защищёнными.
+
+[edit src="source" task/]
+
+P.S. Часики тикают в браузерной консоли (надо открыть её, чтобы увидеть).
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/extended-clock.js b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/extended-clock.js
new file mode 100755
index 00000000..75a8478d
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/extended-clock.js
@@ -0,0 +1,16 @@
+
+
+function ExtendedClock(options) {
+  Clock.apply(this, arguments);
+  this._precision = +options.precision || 1000;
+}
+
+ExtendedClock.prototype = Object.create(Clock.prototype);
+
+ExtendedClock.prototype.start = function() {
+  this._render();
+  var self = this;
+  this._timer = setInterval(function() {
+    self._render();
+  }, this._precision);
+};
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.md b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.md
new file mode 100644
index 00000000..f58d46d8
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.md
@@ -0,0 +1,7 @@
+Наследник:
+
+```js
+//+ src="extended-clock.js"
+```
+
+[edit src="solution"]Открыть полное решение в редакторе[/edit]
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/clock.js b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/clock.js
new file mode 100755
index 00000000..a3b119c8
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/clock.js
@@ -0,0 +1,33 @@
+
+function Clock(options) {
+  this._template = options.template;
+}
+
+Clock.prototype._render = function render() {
+  var date = new Date();
+
+  var hours = date.getHours();
+  if (hours < 10) hours = '0' + hours;
+
+  var min = date.getMinutes();
+  if (min < 10) min = '0' + min;
+
+  var sec = date.getSeconds();
+  if (sec < 10) sec = '0' + sec;
+
+  var output = this._template.replace('h', hours).replace('m', min).replace('s', sec);
+
+  console.log(output);
+};
+
+Clock.prototype.stop = function() {
+  clearInterval(this._timer);
+};
+
+Clock.prototype.start = function() {
+  this._render();
+  var self = this;
+  this._timer = setInterval(function() {
+    self._render();
+  }, 1000);
+};
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/extended-clock.js b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/extended-clock.js
new file mode 100755
index 00000000..75a8478d
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/extended-clock.js
@@ -0,0 +1,16 @@
+
+
+function ExtendedClock(options) {
+  Clock.apply(this, arguments);
+  this._precision = +options.precision || 1000;
+}
+
+ExtendedClock.prototype = Object.create(Clock.prototype);
+
+ExtendedClock.prototype.start = function() {
+  this._render();
+  var self = this;
+  this._timer = setInterval(function() {
+    self._render();
+  }, this._precision);
+};
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/index.html b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/index.html
new file mode 100755
index 00000000..e7b9c984
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Часики в консоли</title>
+    <meta charset="utf-8">
+</head>
+<body>
+
+<script src="clock.js"></script>
+
+<script src="extended-clock.js"></script>
+
+<script>
+    var lowResolutionClock = new ExtendedClock({
+        template: 'h:m:s',
+        precision: 10000
+    });
+
+    lowResolutionClock.start();
+</script>
+
+</body>
+</html>
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/clock.js b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/clock.js
new file mode 100755
index 00000000..a3b119c8
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/clock.js
@@ -0,0 +1,33 @@
+
+function Clock(options) {
+  this._template = options.template;
+}
+
+Clock.prototype._render = function render() {
+  var date = new Date();
+
+  var hours = date.getHours();
+  if (hours < 10) hours = '0' + hours;
+
+  var min = date.getMinutes();
+  if (min < 10) min = '0' + min;
+
+  var sec = date.getSeconds();
+  if (sec < 10) sec = '0' + sec;
+
+  var output = this._template.replace('h', hours).replace('m', min).replace('s', sec);
+
+  console.log(output);
+};
+
+Clock.prototype.stop = function() {
+  clearInterval(this._timer);
+};
+
+Clock.prototype.start = function() {
+  this._render();
+  var self = this;
+  this._timer = setInterval(function() {
+    self._render();
+  }, 1000);
+};
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/extended-clock.js b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/extended-clock.js
new file mode 100755
index 00000000..05d93d88
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/extended-clock.js
@@ -0,0 +1,12 @@
+function extend(Child, Parent) {
+  Child.prototype = inherit(Parent.prototype);
+  Child.prototype.constructor = Child;
+  Child.parent = Parent.prototype;
+}
+function inherit(proto) {
+  function F() {}
+  F.prototype = proto;
+  return new F;
+}
+
+// ваш код 
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/index.html b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/index.html
new file mode 100755
index 00000000..9611fa12
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Часики в консоли</title>
+    <meta charset="utf-8">
+</head>
+<body>
+
+<!-- исходные часы, от них нужно унаследовать -->
+<script src="clock.js"></script>
+<script>
+    var clock = new Clock({
+        template: 'h:m:s'
+    });
+    clock.start();
+
+
+	/* ... ваш код для ExtendedClock */
+
+    /*
+	Надо: часы, которые тикают раз в 10 секунд (точность 10000)
+    var lowResolutionClock = new ExtendedClock({
+        template: 'h:m:s',
+        precision: 10000
+    });
+
+    lowResolutionClock.start();
+    */
+
+</script>
+
+</body>
+</html>
diff --git a/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/task.md b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/task.md
new file mode 100644
index 00000000..ad2d973a
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/task.md
@@ -0,0 +1,15 @@
+# Класс "расширенные часы"
+
+[importance 5]
+
+Есть реализация часиков на прототипах. Создайте класс, расширяющий её, добавляющий поддержку параметра `precision`, который будет задавать частоту тика в `setInterval`. Значение по умолчанию: `1000`.
+
+[edit src="source" task/]
+
+<ul>
+<li>Для этого класс `Clock` надо унаследовать. Пишите ваш новый код в файле `extended-clock.js`.</li>
+<li>Исходный класс `Clock` менять нельзя.</li>
+<li>Пусть конструктор потомка вызывает конструктор родителя. Это позволит избежать проблем при расширении `Clock` новыми опциями.</li>
+</ul>
+
+P.S. Часики тикают в браузерной консоли (надо открыть её, чтобы увидеть).
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.md b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.md
new file mode 100644
index 00000000..9cb942f7
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.md
@@ -0,0 +1,3 @@
+[edit src="solution"]Открыть решение в редакторе[/edit]
+
+Обратите внимание: константы состояний перенесены в прототип, чтобы `AnimatingMenu` их тоже унаследовал.
diff --git a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.view/index.html b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.view/index.html
new file mode 100755
index 00000000..a3dec85f
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.view/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+</head>
+<body>
+
+<script src="menu.js"></script>
+<script>
+
+  function AnimatingMenu() {
+    Menu.apply(this, arguments);
+  }
+
+  AnimatingMenu.prototype = Object.create(Menu.prototype);
+
+  AnimatingMenu.prototype.STATE_ANIMATING = 2;
+
+  AnimatingMenu.prototype.open = function() {
+    var self = this;
+
+    this._state = this.STATE_ANIMATING;
+
+    this._timer = setTimeout(function() {
+      Menu.prototype.open.call(self);
+    }, 1000);
+  };
+
+  AnimatingMenu.prototype.close = function() {
+    clearTimeout(this._timer);
+    Menu.prototype.close.apply(this);
+  };
+
+  AnimatingMenu.prototype._stateAsString = function() {
+    
+    switch(this._state) {
+      case this.STATE_ANIMATING:
+        return 'анимация';
+
+      default:
+        return Menu.prototype._stateAsString.call(this);
+    }
+  };
+
+  // тест, использование..
+  var menu = new AnimatingMenu();
+
+  menu.showState(); // закрыто
+
+  menu.open(); 
+  menu.showState(); // анимация
+
+  setTimeout(function() { // через 1 секунду
+    menu.showState(); // открыто
+
+    menu.close(); 
+    menu.showState(); // закрыто
+  }, 1000);
+
+
+
+
+
+</script>
+
+</body>
+</html>
diff --git a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.view/menu.js b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.view/menu.js
new file mode 100755
index 00000000..9180dec9
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.view/menu.js
@@ -0,0 +1,28 @@
+function Menu(state) {
+  this._state = state || this.STATE_CLOSED;
+};
+
+Menu.prototype.STATE_OPEN = 1;
+Menu.prototype.STATE_CLOSED = 0;
+
+Menu.prototype.open = function() {
+  this._state = this.STATE_OPEN;
+};
+
+Menu.prototype.close = function() {
+  this._state = this.STATE_CLOSED;
+};
+
+Menu.prototype._stateAsString = function() {
+  switch(this._state) {
+    case this.STATE_OPEN:
+      return 'открыто';
+
+    case this.STATE_CLOSED:
+      return 'закрыто';
+  }
+};
+
+Menu.prototype.showState = function() {
+  alert( this._stateAsString() );
+}
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/source.view/index.html b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/source.view/index.html
new file mode 100755
index 00000000..bc17df1f
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/source.view/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+</head>
+<body>
+
+<script src="menu.js"></script>
+<script>
+
+  var AnimatingMenu = Menu; // замените на ваш код для AnimatingMenu
+
+  // использование..
+
+  var menu = new AnimatingMenu();
+
+  menu.showState(); // закрыто
+
+  menu.open(); 
+  menu.showState(); // анимация
+
+  setTimeout(function() {
+    menu.showState(); // открыто
+
+    menu.close();
+    menu.showState(); // закрыто (закрытие без анимации)
+  }, 1000);
+
+
+</script>
+
+</body>
+</html>
diff --git a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/source.view/menu.js b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/source.view/menu.js
new file mode 100755
index 00000000..9de39aa5
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/source.view/menu.js
@@ -0,0 +1,28 @@
+function Menu(state) {
+  this._state = state || Menu.STATE_CLOSED;
+};
+
+Menu.STATE_OPEN = 1;
+Menu.STATE_CLOSED = 0;
+
+Menu.prototype.open = function() {
+  this._state = Menu.STATE_OPEN;
+};
+
+Menu.prototype.close = function() {
+  this._state = Menu.STATE_CLOSED;
+};
+
+Menu.prototype._stateAsString = function() {
+  switch(this._state) {
+    case Menu.STATE_OPEN:
+      return 'открыто';
+
+    case Menu.STATE_CLOSED:
+      return 'закрыто';
+  }
+};
+
+Menu.prototype.showState = function() {
+  alert( this._stateAsString() );
+};
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/task.md b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/task.md
new file mode 100644
index 00000000..dd080260
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/task.md
@@ -0,0 +1,14 @@
+# Меню с таймером для анимации
+
+[importance 5]
+
+Есть класс `Menu`. У него может быть два состояния: открыто `STATE_OPEN` и закрыто `STATE_CLOSED`.
+
+Создайте наследника `AnimatingMenu`, который добавляет третье состояние `STATE_ANIMATING`.
+<ul>
+<li>При вызове `open()` состояние меняется на `STATE_ANIMATING`, а через 1 секунду, по таймеру, открытие завершается вызовом `open()` родителя.</li>
+<li>Вызов `close()` при необходимости отменяет таймер анимации (назначаемый в `open`) и передаёт вызов родительскому `close`.</li>
+<li>Метод `showState` для нового состояния выводит `"анимация"`, для остальных -- полагается на родителя.</li>
+</ul>
+
+[edit src="source"]Исходный документ, вместе с тестом[/edit]
\ No newline at end of file
diff --git a/1-js/9-prototypes/5-class-inheritance/array-object-prototype.png b/1-js/9-prototypes/5-class-inheritance/array-object-prototype.png
new file mode 100755
index 00000000..1c732c4b
Binary files /dev/null and b/1-js/9-prototypes/5-class-inheritance/array-object-prototype.png differ
diff --git a/1-js/9-prototypes/5-class-inheritance/array-object-prototype@2x.png b/1-js/9-prototypes/5-class-inheritance/array-object-prototype@2x.png
new file mode 100755
index 00000000..4905d1e2
Binary files /dev/null and b/1-js/9-prototypes/5-class-inheritance/array-object-prototype@2x.png differ
diff --git a/1-js/9-prototypes/5-class-inheritance/article.md b/1-js/9-prototypes/5-class-inheritance/article.md
new file mode 100644
index 00000000..32995e28
--- /dev/null
+++ b/1-js/9-prototypes/5-class-inheritance/article.md
@@ -0,0 +1,320 @@
+# Наследование классов в JavaScript
+
+*Наследование* -- это когда мы на основе одного объекта создаём другой, который его расширяет: добавляет свои свойства, методы и так далее.
+
+Наследование на уровне объектов в JavaScript, как мы видели, реализуется через ссылку `__proto__`.
+
+Теперь поговорим о наследовании на уровне классов, то есть когда объекты, создаваемые, к примеру, через `new Admin`, должны иметь все методы, которые есть у объектов, создаваемых через `new User`, и ещё какие-то свои.
+[cut]
+
+## Наследование Array от Object
+
+Примеры организации наследования мы встречаем среди встроенных типов JavaScript. Например, массивы, которые создаются при помощи `new Array` (или квадратных скобок `[...]`), используют методы из своего прототипа `Array.prototype`, а если их там нет -- то методы из родителя `Object.prototype`.
+
+Как JavaScript это организует?
+
+Очень просто: встроенный `Array.prototype` имеет ссылку `__proto__` на `Object.prototype`:
+
+<img src="array-object-prototype.png">
+
+То есть, как и раньше, методы хранятся в прототипах, а для наследования прототипы организованы в `__proto__`-цепочку.
+
+Самый наглядный способ это увидеть -- запустить в консоли команду `console.dir([1,2,3])`.
+
+Вывод в Chrome будет примерно таким:
+
+<img src="console_dir_array.png">
+
+Здесь отчётливо видно, что сами данные и `length` находятся в массиве, дальше в `__proto__` идут методы для массивов `concat`, то есть `Array.prototype`, а далее -- `Object.prototype`.
+
+[smart header="`console.dir` для доступа к свойствам"]
+Обратите внимание, я использовал именно `console.dir`, а не `console.log`, поскольку `log` зачастую выводит объект в виде строки, без доступа к свойствам.
+[/smart]
+
+## Наследование в наших классах
+
+Применим тот же подход для наших классах. Объявим класс `Rabbit`, который будет наследовать от `Animal`.
+
+Вначале создадим два этих класса по отдельности, они пока что будут совершенно независимы.
+
+`Animal`:
+
+```js
+function Animal(name) {
+  this.name = name;
+}
+
+Animal.prototype.speed = 0;
+
+Animal.prototype.run = function(speed) {
+  this.speed += speed;
+  alert(this.name + ' бежит, скорость ' + this.speed);
+};
+
+Animal.prototype.stop = function() {
+  this.speed = 0;
+  alert(this.name + ' стоит');
+};
+```
+
+`Rabbit`:
+
+```js
+function Rabbit(name) {
+  this.name = name;
+}
+
+Rabbit.prototype.jump = function() {
+  this.speed++;
+  alert(this.name + ' прыгает');
+};
+
+var rabbit = new Rabbit('Кроль');
+```
+
+Для того, чтобы наследование работало, объект `rabbit = new Rabbit` должен использовать свойства и методы из своего прототипа `Rabbit.prototype`, а если их там нет, то -- свойства и метода родителя, которые хранятся в `Animal.prototype`.
+
+Если ещё короче -- порядок поиска свойств и методов должен быть таким: `rabbit -> Rabbit.prototype -> Animal.prototype`, по аналогии с тем, как это сделано для объектов и массивов. 
+
+Для этого можно поставить ссылку `__proto__` явно: `Rabbit.prototype.__proto__ = Animal.prototype`. Но это не будет работать в IE10-. 
+
+Поэтому лучше используем функцию `Object.create`, благо она либо встроена либо легко эмулируется во всех браузерах.
+
+Класс `Animal` остаётся без изменений, а для `Rabbit` добавим установку `prototype`:
+
+```js
+function Rabbit(name) {
+  this.name = name;
+}
+
+*!*
+// задаём наследование
+Rabbit.prototype = Object.create(Animal.prototype);
+*/!*
+
+// и добавим свой метод (или методы...)
+Rabbit.prototype.jump = function() { ... };
+```
+
+Теперь выглядеть иерархия будет так:
+
+<img src="10.png">
+
+Для наглядности -- вот итоговый код с двумя классами `Animal` и `Rabbit`:
+
+```js
+// 1. Конструктор Animal 
+function Animal(name) {
+  this.name = name;
+}
+
+// 1.1. Методы и свойства по умолчанию -- в прототип 
+Animal.prototype.speed = 0;
+
+Animal.prototype.stop = function() {
+  this.speed = 0;
+  alert(this.name + ' стоит');
+}
+
+Animal.prototype.run = function(speed) {
+  this.speed += speed;
+  alert(this.name + ' бежит, скорость ' + this.speed);
+};
+
+
+// 2. Конструктор Rabbit
+function Rabbit(name) {
+  this.name = name;
+}
+
+// 2.1. Наследование
+Rabbit.prototype = Object.create(Animal.prototype);
+
+// 2.2. Методы Rabbit
+Rabbit.prototype.jump = function() {
+  this.speed++;
+  alert(this.name + ' прыгает, скорость ' + this.speed);
+}
+```
+
+Как видно, наследование задаётся всего одной строчкой, поставленной в правильном месте.
+
+Обратим внимание: `Rabbit.prototype = Object.create(proto)` присваивается сразу после объявления конструктора, иначе он перезатрёт уже записанные в прототип методы.
+
+[warn header="Альтернативный вариант: `Rabbit.prototype = new Animal`"]
+
+Можно унаследовать от `Animal` и по-другому:
+
+```js
+// вместо Rabbit.prototype = Object.create(Animal.prototype)
+Rabbit.prototype = new Animal();
+```
+
+В этом случае мы получаем в прототипе не пустой объект с прототипом `Animal.prototype`, а полноценный `Animal`.
+
+Можно даже сконфигурировать его:
+
+```js
+Rabbit.prototype = new Animal("Зверь номер два");
+```
+
+Теперь новые `Rabbit` будут создаваться на основе конкретного экземпляра `Animal`. Это интересная возможность, но  как правило мы не хотим создавать `Animal`, а хотим только унаследовать его методы!
+
+Более того, на практике создание объекта, скажем, меню `new Menu`, может иметь побочные эффекты, показывать что-то посетителю, и так далее, и этого мы хотели бы избежать. Поэтому рекомендуется использовать вариант с `Object.create`.
+[/warn]
+
+## Вызов конструктора родителя
+
+Посмотрим внимательно на конструкторы `Animal` и `Rabbit` из примеров выше:
+
+```js
+function Animal(name) {
+  this.name = name;
+}
+
+function Rabbit(name) {
+  this.name = name;
+}
+```
+
+Как видно, объект `Rabbit` не добавляет никакой особенной логики при создании, которой не было в `Animal`.
+
+Чтобы упростить поддержку кода, имеет смысл не дублировать код конструктора `Animal`, а напрямую вызвать его:
+
+```js
+function Rabbit(name) {
+  Animal.apply(this, arguments);
+}
+```
+
+Такой вызов запустит функцию `Animal` в контексте текущего объекта, со всеми аргументами, она выполнится и запишет в `this` всё, что нужно. 
+
+Здесь можно было бы использовать и `Animal.call(this, name)`, но `apply` надёжнее, так как работает с любым количеством аргументов.
+
+## Переопределение метода  
+
+Итак, `Rabbit` наследует `Animal`. Теперь если какого-то метода нет в `Rabbit.prototype` -- он будет взят из `Animal.prototype`. 
+
+В `Rabbit` может понадобиться задать какие-то методы, которые у родителя уже есть. Например, кролики бегают не так, как остальные животные, поэтому переопределим метод `run()`:
+
+```js
+Rabbit.prototype.run = function(speed) {
+  this.speed++;
+  this.jump();
+};
+```
+
+Вызов `rabbit.run()` теперь будет брать `run` из своего прототипа:
+
+<img src="11.png">
+
+[smart]
+Кстати, можно назначить метод и на уровне конкретного объекта:
+
+```js
+rabbit.run = function() {
+  alert('Особый метод подпрыгивания для этого кролика');
+};
+```
+
+[/smart]
+
+### Вызов метода родителя после переопределения
+
+Более частая ситуация -- когда мы хотим не просто заменить метод на свой, а взять метод родителя и расширить его. Скажем, кролик бежит так же, как и другие звери, но время от времени подпрыгивает.
+
+Для вызова метода родителя можно обратиться к нему напрямую, взяв из прототипа:
+
+```js
+//+ run
+ 
+Rabbit.prototype.run = function() {
+*!*
+  Animal.prototype.run.apply(this, arguments); 
+  this.jump();
+*/!*
+}
+```
+
+Обратите внимание на `apply` и явное указание контекста. Если вызвать просто `Animal.prototype.run()`, то в качестве `this` функция `run` получит `Animal.prototype`, а это неверно, нужен текущий объект.
+
+## Итого
+
+<ul>
+<li>Для наследования нужно, чтобы "склад методов потомка" (`Child.prototype`) наследовал от "склада метода родителей" (`Parent.prototype`).
+
+Это можно сделать при помощи `Object.create`:
+
+Код:
+
+```js
+Rabbit.prototype = Object.create(Animal.prototype);
+```
+
+</li>
+<li>Для того, чтобы наследник создавался так же, как и родитель, он вызывает конструктор родителя в своём контексте, используя `apply(this, arguments)`, вот так:
+
+```js
+function Rabbit(...) {
+  Animal.apply(this, arguments);
+}
+```
+
+</li>
+<li>При переопределении метода родителя в потомке, к исходному методу можно обратиться, взяв его напрямую из прототипа:
+
+```js
+Rabbit.prototype.run = function() {
+  var result = Animal.prototype.run.apply(this, ...);
+  // result -- результат вызова метода родителя 
+}
+```
+
+</li>
+</ul>
+
+Структура наследования полностью:
+
+```js
+//+ run
+// --------- *!*Класс-Родитель*/!* ------------
+// Конструктор родителя
+function Animal(name) {
+  this.name = name;
+}
+
+// Методы родителя 
+Animal.prototype.run= function() {
+  alert(this + " бежит!")
+}
+
+Animal.prototype.toString = function() {
+  return this.name;
+}
+
+// --------- *!*Класс-потомок*/!* -----------
+// Конструктор потомка
+function Rabbit(name) {
+  Animal.apply(this, arguments);
+}
+
+// *!*Унаследовать*/!*
+*!*
+Rabbit.prototype = Object.create(Animal.prototype);
+*/!*
+
+// Методы потомка
+Rabbit.prototype.run = function() { 
+  Animal.prototype.run.apply(this); // метод родителя вызвать
+  alert(this + " подпрыгивает!");  
+};
+
+var rabbit = new Rabbit('Кроль');
+rabbit.run();
+```
+
+<ul>
+<li>Если метод или свойство начинается с `_`, то оно существует исключительно для внутренних нужд объекта, не нужно обращаться к нему из внешнего кода, но можно -- из методов объекта и наследников.</li>
+<li>Остальные свойства и методы -- публичные.</li>
+</ul>
+
diff --git a/1-js/9-prototypes/5-class-inheritance/console_dir_array.png b/1-js/9-prototypes/5-class-inheritance/console_dir_array.png
new file mode 100755
index 00000000..1ae78dd6
Binary files /dev/null and b/1-js/9-prototypes/5-class-inheritance/console_dir_array.png differ
diff --git a/1-js/9-prototypes/5-class-inheritance/console_dir_array@2x.png b/1-js/9-prototypes/5-class-inheritance/console_dir_array@2x.png
new file mode 100755
index 00000000..a55d2c89
Binary files /dev/null and b/1-js/9-prototypes/5-class-inheritance/console_dir_array@2x.png differ
diff --git a/1-js/9-prototypes/6-constructor/1-new-object-same-constructor/solution.md b/1-js/9-prototypes/6-constructor/1-new-object-same-constructor/solution.md
new file mode 100644
index 00000000..9f345069
--- /dev/null
+++ b/1-js/9-prototypes/6-constructor/1-new-object-same-constructor/solution.md
@@ -0,0 +1,19 @@
+Да, можем, но только если уверены, что кто-то позаботился о том, чтобы значение `constructor` было верным.
+
+В частности, без вмешательства в прототип код точно работает, например:
+
+```js
+//+ run
+function User(name) { 
+  this.name = name;
+}
+
+var obj = new User('Вася');
+var obj2 = new obj.constructor('Петя');
+
+alert(obj2.name); // Петя (сработало)
+```
+
+Сработало, так как `User.prototype.constructor == User`. 
+
+Но если кто-то, к примеру, перезапишет `User.prototype` и забудет указать `constructor`, то такой фокус не пройдёт.
\ No newline at end of file
diff --git a/1-js/9-prototypes/6-constructor/1-new-object-same-constructor/task.md b/1-js/9-prototypes/6-constructor/1-new-object-same-constructor/task.md
new file mode 100644
index 00000000..12e9beb0
--- /dev/null
+++ b/1-js/9-prototypes/6-constructor/1-new-object-same-constructor/task.md
@@ -0,0 +1,13 @@
+# Создать объект тем же конструктором
+
+[importance 5]
+
+Пусть у нас есть произвольный объект `obj`, созданный каким-то конструктором, каким -- мы не знаем, но хотели бы создать новый объект с его помощью.
+
+Сможем ли мы сделать так?
+
+```js
+var obj2 = new obj.constructor();
+```
+
+В каком случае такой код будет работать, а в каком -- нет?
diff --git a/1-js/9-prototypes/6-constructor/2-constructor-inherited/solution.md b/1-js/9-prototypes/6-constructor/2-constructor-inherited/solution.md
new file mode 100644
index 00000000..34867c20
--- /dev/null
+++ b/1-js/9-prototypes/6-constructor/2-constructor-inherited/solution.md
@@ -0,0 +1,26 @@
+**Нет, не распознает, выведет `false`.**
+
+Свойство `constructor` содержится в `prototype` функции по умолчанию, интерпретатор не поддерживает его корректность. Посмотрим, чему оно равно и откуда оно будет взято в данном случае.
+
+Порядок поиска свойства `rabbit.constructor`, по цепочке прототипов:
+<ol>
+<li>`rabbit` -- это пустой объект, в нём нет.</li>
+<li>`Rabbit.prototype` -- в него при помощи `Object.create` записан пустой объект, наследующий от `Animal.prototype`. Поэтому `constructor'а` в нём также нет.</li>
+<li>`Animal.prototype` -- у функции `Animal` свойство `prototype` никто не менял. Поэтому оно содержит `Animal.prototype.constructor == Animal`.</li>
+</ol>
+
+```js
+//+ run
+function Animal() { }
+
+function Rabbit() { }
+Rabbit.prototype = Object.create(Animal.prototype);
+
+var rabbit = new Rabbit();
+
+*!*
+alert( rabbit.constructor == Rabbit ); // false
+alert( rabbit.constructor == Animal ); // true
+*/!*
+```
+
diff --git a/1-js/9-prototypes/6-constructor/2-constructor-inherited/task.md b/1-js/9-prototypes/6-constructor/2-constructor-inherited/task.md
new file mode 100644
index 00000000..da6986d3
--- /dev/null
+++ b/1-js/9-prototypes/6-constructor/2-constructor-inherited/task.md
@@ -0,0 +1,19 @@
+# Что содержит constructor?
+
+[importance 5]
+
+В коде ниже создаётся простейшая иерархия классов: `Animal -> Rabbit`.
+
+Что содержит свойство `rabbit.constructor`? Распознает ли проверка в `alert` объект как `Rabbit`?
+
+```js
+function Animal() { }
+
+function Rabbit() { }
+Rabbit.prototype = Object.create(Animal.prototype);
+
+var rabbit = new Rabbit();
+
+alert( rabbit.constructor == Rabbit ); // что выведет?
+```
+
diff --git a/1-js/9-prototypes/6-constructor/8.png b/1-js/9-prototypes/6-constructor/8.png
new file mode 100755
index 00000000..b875db60
Binary files /dev/null and b/1-js/9-prototypes/6-constructor/8.png differ
diff --git a/1-js/9-prototypes/6-constructor/8@2x.png b/1-js/9-prototypes/6-constructor/8@2x.png
new file mode 100755
index 00000000..fc77fd69
Binary files /dev/null and b/1-js/9-prototypes/6-constructor/8@2x.png differ
diff --git a/1-js/9-prototypes/6-constructor/9.png b/1-js/9-prototypes/6-constructor/9.png
new file mode 100755
index 00000000..666fd19c
Binary files /dev/null and b/1-js/9-prototypes/6-constructor/9.png differ
diff --git a/1-js/9-prototypes/6-constructor/9@2x.png b/1-js/9-prototypes/6-constructor/9@2x.png
new file mode 100755
index 00000000..3c193118
Binary files /dev/null and b/1-js/9-prototypes/6-constructor/9@2x.png differ
diff --git a/1-js/9-prototypes/6-constructor/article.md b/1-js/9-prototypes/6-constructor/article.md
new file mode 100644
index 00000000..3cc088ac
--- /dev/null
+++ b/1-js/9-prototypes/6-constructor/article.md
@@ -0,0 +1,141 @@
+# F.prototype по умолчанию, "constructor"
+
+В стандарте JavaScript есть свойство `constructor`, которое, по идее, должно быть в каждом объекте и указывать, какой функцией он создан. 
+
+Однако на практике оно ведет себя не всегда адекватным образом. Мы рассмотрим, как оно работает и почему именно так, а также -- как сделать, чтобы оно работало правильно.
+[cut]
+
+## Свойство constructor [#constructor]
+
+По замыслу, свойство `constructor` объекта должно содержать ссылку на функцию, создавшую объект. И в простейших случаях так оно и есть, вот например:
+
+```js
+//+ run
+function Rabbit() { }
+
+var rabbit = new Rabbit();
+
+*!*
+alert( rabbit.constructor == Rabbit ); // true
+*/!*
+```
+
+Как видим, всё работает. Мы получили из объекта функцию, которая его создала.
+
+Но всё не так просто. Расширим наш пример установкой `Rabbit.prototype`:
+
+```js
+//+ run
+function Rabbit() { } 
+
+Rabbit.prototype = { jumps: true } ; 
+
+var rabbit = new Rabbit();
+
+*!*
+alert( rabbit.constructor == Rabbit ); // false (упс, потеряли конструктор!)
+*/!*
+```
+
+...Сломалось! Чтобы детальнее понять происходящее -- посмотрим, откуда берется свойство `constructor` и что с ним произошло.
+
+## Значение prototype по умолчанию
+
+До этого мы записывали и меняли свойство `prototype`, но оказывается, оно существует и без нашего вмешательства.
+
+**Свойство `prototype` есть у каждой функции, даже если его не ставить.**
+
+**Оно создается автоматически вместе с самой функцией, и по умолчанию является пустым объектом с единственным свойством `constructor`, которое ссылается обратно на функцию.**
+
+Вот такой вид имеет прототип по умолчанию:
+
+```js
+Rabbit.prototype = { 
+  constructor: Rabbit
+}
+```
+
+<img src="8.png">
+
+Так что объект `rabbit` не хранит в себе свойство `constructor`, а берёт его из прототипа.
+
+Сделаем прямую проверку этого:
+
+```js
+//+ run
+function Rabbit() { }
+
+var rabbit = new Rabbit();
+
+*!*
+alert( rabbit.hasOwnProperty('constructor') ); // false, в объекте нет!
+
+alert( Rabbit.prototype.hasOwnProperty('constructor') ); // true, да, оно в прототипе
+*/!*
+```
+
+## Потеря constructor 
+
+JavaScript не прилагает никаких усилий для проверки корректности или поддержания правильного значения `constructor`.
+
+**При замене `Rabbit.prototype` на свой объект, свойство `constructor` из него обычно пропадает.**
+
+Например:
+
+```js
+//+ run
+function Rabbit() { }
+
+Rabbit.prototype = {};  // (*)
+
+var rabbit = new Rabbit();
+
+alert( rabbit.constructor == Rabbit ); // false
+alert( rabbit.constructor == Object ); // true
+```
+
+Ого! Теперь конструктором `rabbit` является не `Rabbit`, а `Object`. Но почему?
+
+Вот иллюстрация, которая наглядно демонстрирует причину:
+
+<img src="9.png">
+
+То есть, свойство `constructor` бралось из `Rabbit.prototype`, но мы заменили его на пустой объект `Rabbit.prototype = {}`. В нём свойства `constructor` там уже нет, значит оно ищется дальше по цепочке прототипов, в `{}.__proto__`, то есть  берётся из встроенного `Object.prototype`. А там оно равно `Object`.
+
+Что делать?
+
+**Если мы хотим, чтобы свойство `constructor` объекта всегда хранило функцию, которая его создала -- об этом нужно позаботиться самостоятельно.**
+
+То есть, можно не заменять встроенный `Rabbit.prototype`, а расширить его. Или же, если обязательно нужно заменить, скажем при наследовании, то указать `constructor` явно:
+
+```js
+//+ run
+function Animal() { }
+Animal.prototype.run = function() { }
+
+function Rabbit() { }
+*!*
+Rabbit.prototype = Object.create(Animal);
+Rabbit.prototype.constructor = Rabbit;
+*/!*
+
+Rabbit.prototype.run = function() { }
+
+var rabbit = new Rabbit();
+
+*!*
+alert( rabbit.constructor == Rabbit ); // true
+*/!*
+```
+
+## Итого
+
+При создании функции, её `prototype` -- это объект с единственным свойством `constructor`, которое указывает обратно на функцию.
+
+**Забавен тот факт, что больше нигде в спецификации JavaScript свойство `constructor` не упоминается. Интерпретатор не использует его никак и нигде.** 
+
+В результате, в частности, `constructor` теряется при замене `prototype` на новый объект. И ничего страшного в этом нет.
+
+Но если мы хотим использовать это свойство сами, чтобы при необходимости получать функцию-конструктор объекта, но при смене прототипа нужно самим смотреть, чтобы ненароком не перезаписать его.
+
+
diff --git a/1-js/9-prototypes/7-instanceof/1-strange-instanceof/solution.md b/1-js/9-prototypes/7-instanceof/1-strange-instanceof/solution.md
new file mode 100644
index 00000000..6bf55d43
--- /dev/null
+++ b/1-js/9-prototypes/7-instanceof/1-strange-instanceof/solution.md
@@ -0,0 +1,7 @@
+Да, это выглядит достаточно странно, поскольку объект `a` не создавался функцией `B`. 
+
+Но методу `instanceof` на самом деле вообще не важна функция. Он смотрит на её `prototype` и сверяет его с цепочкой `__proto__` объекта.
+
+В данном случае `a.__proto__ == B.prototype`, поэтому `instanceof` возвращает `true`.
+
+По логике `instanceof` именно прототип задаёт "тип объекта", поэтому `instanceof` работает именно так.
\ No newline at end of file
diff --git a/1-js/9-prototypes/7-instanceof/1-strange-instanceof/task.md b/1-js/9-prototypes/7-instanceof/1-strange-instanceof/task.md
new file mode 100644
index 00000000..c8638a4c
--- /dev/null
+++ b/1-js/9-prototypes/7-instanceof/1-strange-instanceof/task.md
@@ -0,0 +1,20 @@
+# Странное поведение instanceof
+
+[importance 5]
+
+Почему `instanceof` в коде ниже возвращает `true`, ведь объект `a` явно создан не `B()`?
+
+```js
+//+ run
+function A() {}
+function B() {}
+
+A.prototype = B.prototype = {};
+
+var a = new A();
+
+*!*
+alert(a instanceof B); // true
+*/!*
+```
+
diff --git a/1-js/9-prototypes/7-instanceof/2-instanceof-result/solution.md b/1-js/9-prototypes/7-instanceof/2-instanceof-result/solution.md
new file mode 100644
index 00000000..071ec9e2
--- /dev/null
+++ b/1-js/9-prototypes/7-instanceof/2-instanceof-result/solution.md
@@ -0,0 +1,18 @@
+Да, распознает.
+
+Он проверяет наследование с учётом цепочки прототипов.
+
+```js
+//+ run
+function Animal() { }
+
+function Rabbit() { }
+Rabbit.prototype = Object.create(Animal.prototype);
+
+var rabbit = new Rabbit();
+
+alert( rabbit instanceof Rabbit ); // true
+alert( rabbit instanceof Animal ); // true
+alert( rabbit instanceof Object ); // true
+```
+
diff --git a/1-js/9-prototypes/7-instanceof/2-instanceof-result/task.md b/1-js/9-prototypes/7-instanceof/2-instanceof-result/task.md
new file mode 100644
index 00000000..aa8c4c40
--- /dev/null
+++ b/1-js/9-prototypes/7-instanceof/2-instanceof-result/task.md
@@ -0,0 +1,23 @@
+# Что выведет instanceof?
+
+[importance 5]
+
+В коде ниже создаётся простейшая иерархия классов: `Animal -> Rabbit`.
+
+Что выведет [instanceof](/instanceof)?  
+
+Распознает ли он `rabbit` как `Animal`, `Rabbit` и к тому же `Object`?
+
+```js
+function Animal() { }
+
+function Rabbit() { }
+Rabbit.prototype = Object.create(Animal.prototype);
+
+var rabbit = new Rabbit();
+
+alert( rabbit instanceof Rabbit );
+alert( rabbit instanceof Animal );
+alert( rabbit instanceof Object );
+```
+
diff --git a/1-js/9-prototypes/7-instanceof/article.md b/1-js/9-prototypes/7-instanceof/article.md
new file mode 100644
index 00000000..827ad460
--- /dev/null
+++ b/1-js/9-prototypes/7-instanceof/article.md
@@ -0,0 +1,240 @@
+# Проверка класса: "instanceof" 
+
+Оператор `instanceof` позволяет проверить, какому классу принадлежит объект, с учетом прототипного наследования.
+[cut]
+
+
+## Алгоритм работы instanceof [#ref-instanceof]
+
+Вызов `obj instanceof Constructor` возвращает `true`, если объект принадлежит классу `Constructor` или его родителям.
+
+Как это часто бывает в JavaScript, здесь есть ряд тонкостей. В некоторых ситуациях, проверка может даже ошибаться!
+
+Вначале -- простейший пример.
+
+Вот так, по замыслу, должен работать `instanceof`:
+
+```js
+//+ run
+function Rabbit() { }
+
+*!*
+// создаём объект
+*/!*
+var rabbit = new Rabbit;
+
+*!*
+// проверяем -- этот объект создан Rabbit?
+alert(rabbit instanceof Rabbit); // true, верно
+*/!*
+```
+
+Для встроенных объектов:
+
+```js
+//+ run
+var arr = [];
+alert(arr instanceof Array); // true
+alert(arr instanceof Object); // true
+```
+
+Массив `arr` принадлежит классу `Array`, но также и является объектом `Object`. Это верно, так как массивы наследуют от объектов. 
+
+По этой же логике вызов `rabbit instanceof Object` -- тоже будет `true`, так как `rabbit` является объектом. 
+
+**Алгоритм проверки `obj instanceof Constructor`:**
+
+<ol>
+<li>Получить `obj.__proto__`</li>
+<li>Сравнить `obj.__proto__` с `Constructor.prototype`</li>
+<li>Если не совпадает, тогда заменить `obj` на `obj.__proto__` и повторить проверку на шаге 2 до тех пор, пока либо не найдется совпадение (результат `true`), либо цепочка прототипов не закончится (результат `false`).</li>
+</ol>
+
+В проверки `rabbit instanceof Rabbit`, совпадение находится тут же, на первом же шаге, так как: `rabbit.__proto__ == Rabbit.prototype`.
+
+А если рассмотреть `rabbit instanceof Rabbit`, то совпадение будет найдено на следующем шаге, т.к. `rabbit.__proto__.__proto__ == Object.prototype`.
+
+[smart header="Примитивы -- не объекты, доказательство"]
+Проверим, является ли число объектом `Number`:
+
+```js
+//+ run
+alert(123 instanceof Number); // false, нет!
+```
+
+...С другой стороны, если создать встроенный объект `Number` (не делайте так):
+
+```js
+//+ run
+alert( new Number(123) instanceof Number ); // true
+```
+
+[/smart]
+
+[warn header="Не друзья: `instanceof` и фреймы"]
+
+**Оператор `instanceof` не срабатывает, когда значение приходит из другого окна или фрейма.**
+
+Например, массив, который создан в ифрейме и передан родительскому окну -- будет массивом *в том ифрейме*, но не в родительском окне. Проверка `instanceof Array` в родительском окне вернёт `false`.
+
+Вообще, у каждого окна и фрейма -- своя иерархия объектов и свой `window` .
+
+Как правило, эта проблема возникает со встроенными объектами, в этом случае используется проверка внутреннего свойства `[[Class]]`. Более подробно это описано в главе [](/class-property).
+[/warn]
+
+[smart header="Вызов `instanceof Rabbit` не использует саму функцию `Rabbit`"]
+Забавно, что сама функция-констуктор не участвует в процессе проверки!
+
+Используется только цепочка прототипов для проверяемого объекта и `Rabbit.prototype`.
+
+Это может приводить к забавному результату и даже ошибкам в проверке при изменении `prototype`, например:
+
+```js
+//+ run
+// Создаём объект rabbit, как обычно
+function Rabbit() { }
+var rabbit = new Rabbit();
+
+// изменили prototype...
+Rabbit.prototype = {};
+
+// ...instanceof перестал работать!
+*!*
+alert( rabbit instanceof Rabbit ); // false
+*/!*
+```
+
+Стоит ли говорить, что это один из доводов для того, чтобы никогда не менять `prototype`? Так сказать, во избежание...
+[/smart]
+
+## instanceof + наследование + try..catch = ♡
+
+Когда мы работаем с внешними данными, возможны самые разные ошибки. 
+
+Создание иерархии ошибок вносит порядок в происходящее, а `instanceof` внутри `try..catch` позволяет легко понять, что за ошибка произошла и обработать, либо пробросить её дальше.
+
+Для примера создадим функцию `readUser(json)`, которая будет разбирать JSON с данными посетителя. Мы его получаем с сервера -- может, нашего, а может -- чужого, в общем -- желательно проверить на ошибки. А может, это даже и не JSON, а какие-то другие данные -- не важно, для наглядности поработаем с JSON.
+
+Пример правильного JSON: `{ "name": "Вася", "age": 30 }`. 
+
+Функция `readUser` должна бросать исключение в случаях, когда:
+
+<ol>
+<li>В JSON синтаксическая ошибка, то есть "падает" вызов `JSON.parse`.</li>
+<li>В получившемся объекте нет свойства `name` или `age`.</li>
+<li>Свойство `age` (возраст) -- не число.</li>
+</ol>
+
+Для каждого из этих типов ошибок сделаем отдельный класс -- это поможет позже легко идентифицировать произошедшее:
+
+<ol>
+<li>`SyntaxError` -- ошибка "что-то не так в данных", встроенный класс, ошибка такого типа генерируется как раз `JSON.parse`.</li>
+<li>`PropertyRequiredError` -- ошибка "нет свойства", будет наследовать от `SyntaxError`,  так как является подвидом синтаксической ошибки.</li>
+<li>`FormatError` -- "ошибка форматирования", тоже наследник `SyntaxError`.</li>
+</ol>
+
+Вот ошибки в JS:
+
+```js
+function PropertyRequiredError(property) {
+*!*
+  this.property = property;
+  this.message = "Отсутствует свойство " + property;
+*/!*
+  this.name = 'PropertyRequired';
+}      
+PropertyRequiredError.prototype = Object.create(SyntaxError.prototype);
+
+
+function FormatError(message) {
+  this.message = message;
+  this.name = 'FormatError';
+}
+FormatError.prototype = Object.create(SyntaxError.prototype);
+```
+
+Понятное дело, эти классы ошибок имеют общий характер и могут использоваться не только в данной конкретной функции, но и в других местах кода -- при обработке любых данных.
+ 
+**У разных типов ошибок могут быть разные конструкторы, разные дополнительные свойства, которые позволят в дальнейшем удобно работать с ошибкой.**
+
+В коде выше обратите внимание на `PropertyRequiredError` -- конструтор этой ошибки получает отсутствующее свойство и сохраняет его в дополнительном свойстве `property`, в дополнение к стандартному `message`. В дальнейшем, для особой обработки этой ошибки, его легко можно будет получить.
+
+Код ниже -- полная реализация `readUser`:
+
+```js
+function PropertyRequiredError(property) {
+  this.property = property;
+  this.message = "Отсутствует свойство " + property;
+  this.name = 'PropertyRequired';
+}      
+PropertyRequiredError.prototype = Object.create(SyntaxError.prototype);
+
+
+function FormatError(message) {
+  this.message = message;
+  this.name = 'FormatError';
+}
+FormatError.prototype = Object.create(SyntaxError.prototype);
+
+
+function readUser(data) {
+  
+  var user = JSON.parse(data);
+
+  validateUser(user);
+
+  return user;
+}
+
+function validateUser(user) {
+  
+  if (!user.age) {
+    throw new PropertyRequiredError("age"); 
+  }
+  if (typeof user.age != "number") {
+    throw new FormatError("Возраст - не число");
+  }
+
+  if (!user.name) {
+    throw new PropertyRequiredError("name"); 
+  }
+  
+}
+
+try {
+  readUser('{ "name": "Вася", "age": "unknown" }');
+} catch (e) {
+*!*
+  if (e instanceof PropertyRequiredError) {
+    if (e.property == 'name') {
+      // в данном месте кода возможны анонимы, ошибка поправима
+      user[e.property] = "Аноним";
+    } else {
+      alert(e.message); 
+    }
+  } else if (e instanceof SyntaxError) {
+    alert("Ошибка в данных: " + e.message); 
+  } else {
+    throw e; // неизвестная ошибка, не знаю что с ней делать
+  }      
+*/!*
+}
+```
+
+Обратим внимание -- в данном конкретном месте кода мы допускаем анонимных посетителей, поэтому в случае, если отсутствует `name` -- исправляем эту ошибку. Мы можем легко это сделать, благодаря наличию у `PropertyRequiredError` дополнительного (по сравнению со стандартными ошибками) свойства `property`.
+
+**Для проверки, какая именно ошибка произошла, вместо `e.name` используется `instanceof`.**
+
+Это позволяет как выделить какие-то отдельные типы ошибок (`e instanceof PropertyRequiredError`), так и проверить общий тип, с которым мы умеем работать, без оглядки на его детали (`e instanceof SyntaxError`).
+
+Благодаря `instanceof` мы получили удобную поддержку иерархии ошибок, с возможностью в любой момент добавить новые классы, понятным кодом и предсказуемым поведением.
+
+## Итого
+
+<ul>
+<li>Оператор `obj instanceof Func` проверяет тот факт, что `obj` является результатом вызова `new Func`. Он учитывает цепочку `__proto__`, поэтому наследование поддерживается. </li>
+<li>Оператор `instanceof` не сможет проверить тип значения, если объект создан в одном окне/фрейме, а проверяется в другом. Это потому, что в каждом окне -- своя иерархия объектов. Для точной проверки типов встроенных объектов можно использовать свойство `[[Class]]`.</li>
+<li>Оператор `instanceof` особенно востребован в случаях, когда мы работаем с иерархиями классов. Это наилучший способ проверить принадлежность тому или иному классу с учётом наследования.</li>
+</ul>
+
+
diff --git a/1-js/9-prototypes/8-class-extend/article.md b/1-js/9-prototypes/8-class-extend/article.md
new file mode 100644
index 00000000..3483325e
--- /dev/null
+++ b/1-js/9-prototypes/8-class-extend/article.md
@@ -0,0 +1,300 @@
+# Фреймворк Class.extend 
+
+Можно использовать прототипное наследование и не повторять `Rabbit.prototype.method = ...` при определении каждого метода, не иметь проблем с конструкторами и так далее.
+
+Для этого используют ООП-фреймворк -- библиотеку, в которой об этом подумали "за нас".
+
+В этой главе мы рассмотрим один из таких фреймворков:
+<ul>
+<li>С удобным синтаксисом наследования.</li>
+<li>С вызовом родительских методов.</li>
+<li>С поддержкой статических методов и *примесей*.</li>
+</ul>
+
+Можно сказать, что фреймворк представляет собой "синтаксический сахар" к наследованию на классах.
+[cut]
+
+Оригинальный код этого фреймворка были предложены Джоном Ресигом: [Simple JavaScript Inheritance](http://ejohn.org/blog/simple-javascript-inheritance/), но подход это не новый, его варианты используются во многих фреймворках и знакомство с ним будет очень кстати.
+
+Полный код фреймворка: [class-extend.js](http://js.cx/libs/class-extend.js). Он содержит много комментариев, чтобы было проще его понять, но смотреть его лучше после того, как ознакомитесь с возможностями.
+
+## Создание класса
+
+Итак, начнём. 
+
+Фреймворк предоставляет всего один метод: `Class.extend`.
+
+Чтобы представлять себе, как выглядит класс "на фреймворке", взглянем на рабочий пример:
+
+```js
+//+ run
+// Объявление класса Animal
+var Animal = *!*Class.extend*/!*({
+
+  init: function(name) {
+    this.name = name;
+  },
+
+  run: function() {
+    alert(this.name + " бежит!");
+  }
+
+});
+
+// Создать (вызовется `init`)
+var animal = new Animal("Зверь");
+
+// Вызвать метод
+animal.run(); // "Зверь бежит!"
+```
+
+Готово, создан класс `Animal`. 
+
+Внутри `Class.extend(props)` делает следующее:
+
+<ul>
+<li>Создаётся объект, в который копируются свойства и методы из `prop`. Это будет прототип.</li>
+<li>Объявляется функция, которая вызывает `this.init`, в её `prototype` записывается созданный прототип.</li>
+<li>Эта функция возвращается, она и есть конструктор `Animal`.</li>
+</ul>
+
+Как видим, всё весьма просто.
+
+Но фреймворк этим не ограничивается и добавляет ряд других интересных возможностей.
+
+## Статические свойства 
+
+У метода `Class.extend` есть и второй, необязательный аргумент: объект `staticProps`. 
+
+Если он есть, то его свойства копируются в саму функцию-конструктор.
+
+Например:
+
+```js
+//+ run
+// Объявить класс Animal
+var Animal = Class.extend({
+
+  init: function(name){
+    this.name = name;
+  },
+
+  toString: function(){
+    return this.name;
+  }
+
+}, 
+*!*
+{ // статические свойства
+  compare: function(a, b) { 
+    return a.name - b.name;
+  }
+});
+*/!*
+
+var arr = [new Animal('Зорька'), new Animal('Бурёнка')]
+
+*!*
+arr.sort(Animal.compare);
+*/!*
+
+alert(arr); // Бурёнка, Зорька
+```
+
+## Наследование
+
+Метод `extend` копируется в создаваемые классы. 
+
+Поэтому его можно вызывать на любом конструкторе, чтобы создать ему класс-наследник.
+
+Например, создадим `Rabbit`, наследующий от `Animal`:
+
+```js
+//+ run
+// Создать Animal, всё как обычно
+var Animal = Class.extend({
+  init: function(name) { 
+    this.name = name; 
+  },
+  run: function() { 
+    alert(this.name + ' бежит!'); 
+  }
+});
+
+// Объявить класс Rabbit, *!*наследующий*/!* от Animal
+var Rabbit = *!*Animal.extend*/!*({
+
+  init: function(name) {
+*!*
+    this._super(name); // вызвать родительский init(name)
+*/!*
+  },
+
+  run: function() {
+    this._super();     // вызвать родительский run
+    alert('..и мощно прыгает за морковкой!');
+  }
+
+});
+
+*!*
+var rabbit = new Rabbit("Кроль");
+rabbit.run(); // "Кроль бежит!", затем "..и мощно прыгает за морковкой!"
+*/!*
+```
+
+## Метод this._super
+
+В коде выше появился ещё один замечательный метод: `this._super`.
+
+**Вызов `this._super(аргументы)` вызывает метод *родительского класса*, с указанными аргументами.**
+
+То есть, здесь он запустит родительский `init(name)`:
+
+```js
+init: function(name) {
+  this._super(name); // вызвать родительский init(name)
+}
+```
+
+...А здесь -- родительский `run`:
+
+```js
+run: function() {
+  this._super();     // вызвать родительский run
+  alert('..и мощно прыгает за морковкой!');
+}
+```
+
+Работает это, примерно, так: когда фреймворк копирует методы в прототип, он смотрит их код, и если видит там слово `_super`, то оборачивает метод в обёртку, которая ставит `this._super` в метод родителя, затем вызывает метод, а затем возвращает `this._super` как было ранее.
+
+Это вызывает некоторые дополнительные расходы при объявлении, так как чтобы проверить, есть ли обращение к `_super`, фреймворк при копировании методов преобразует их через `toString` в строку и ищет в ней обращение.
+
+Как правило, эти расходы несущественны, если нужно их минимизировать  -- не составляет труда изъять эту возможность из фреймворка или учесть в инструментах сжатия (минификации) кода.
+
+Кстати, примерно это минификатор Google Closure Compiler, когда сжимает код, написанный на "дружащей" с ним Google Closure Library. 
+
+
+## Примеси [#mixins]
+
+Согласно теории ООП, *примесь* (англ. mixin) -- класс, реализующий какое-либо чётко выделенное поведение, который не предназначен для порождения самостоятельно используемых объектов, а используется для *уточнения* поведения других классов.
+
+Иными словами, *примесь* позволяет легко добавить в существующий класс новые возможности, например:
+<ul>
+<li>Публикация событий и подписка на них.</li>
+<li>Работ c шаблонизатором.</li>
+<li>... любое поведение, дополняющее объект.</li>
+</ul>
+
+**Как правило, примесь реализуется в виде объекта, свойства которого копируются в прототип.**
+
+Например, напишем примесь `EventMixin` для работы с событиями. Она будет содержать три метода  -- `on/off` (подписка) и `trigger` (генерация события):
+
+```js
+var EventMixin = {
+
+  on: function (eventName, handler) {
+    if (!this._eventHandlers) this._eventHandlers = {};
+    if (!this._eventHandlers[eventName]) {
+      this._eventHandlers[eventName] = [];
+    }
+
+    this._eventHandlers[eventName].push(handler);
+  },
+
+  off: function(eventName, handler) {
+    ...
+  },
+
+  trigger: function (eventName, args) {
+    if (!this.eventHandlers || !this._eventHandlers[eventName]) {
+      return; 
+    }
+
+    var handlers = this._eventHandlers[eventName];
+    for (var i = 0; i < handlers.length; i++) {
+      handlers[i].apply(this, args);
+    }
+  }
+  
+};
+```
+
+Скопировав свойства из `EventMixin` в любой объект, мы дадим ему возможность генерировать события (`trigger`) и  подписываться на них (`on/off`).
+
+Чтобы было проще, во фреймворк добавлена возможность указания примесей при объявлении класса.
+
+**Для добавления примесей у метода `Class.extend` существует синтаксис с первым аргументом-массивом:**
+<ul>
+<li>**`Class.extend([mixin1, mixin2...], props, staticProps)`.**</li>
+</ul>
+
+Если первый аргумент -- массив, то его элементы `mixin1, mixin2..` записываются в прототип по очереди, перед `props`, примерно так:
+
+```js
+for(var key in mixin1) prototype[key] = mixin1[key];
+for(var key in mixin2) prototype[key] = mixin2[key];
+...
+for(var key in props) prototype[key] = props[key];
+```
+
+При этом, если названия методов совпадают, то последующий затрёт предыдущий, так как в объекте может быть только одно свойство с данным названием. Впрочем, обычно такого не происходит, т.к. примеси проектируются так, чтобы их методы были уникальными и ни с чем не конфликтовали.
+
+Применение:
+
+```js
+*!*
+var Rabbit = Class.extend( [ EventMixin ], {
+*/!*
+
+  /* свойства и методы для Rabbit */
+
+});
+
+var rabbit = new Rabbit();
+
+*!*rabbit.on*/!*("jump", function() { // повесить функцию на событие jump
+  alert("jump &-@!");
+});
+
+*!*rabbit.trigger*/!*('jump'); // alert сработает!
+```
+
+Примеси могут быть самыми разными. Например `TemplateMixin` для работы с шаблонами:
+
+```js
+Rabbit = Class.extend([EventMixin, TemplateMixin], {
+
+  /* Теперь Rabbit умеет использовать события и шаблоны */
+
+});
+```
+
+Красиво, не правда ли? Всего лишь указали одну-другую примесь и объект уже всё умеет!
+
+Примеси могут задавать и многое другое, например автоматически подписывать компонент на стандартные события, добавлять AJAX-функционал и т.п.
+
+## Итого
+
+<ol>
+<li>**Фреймворк имеет основной метод `Class.extend` с несколькими вариациями:**
+<ul>
+<li>`Class.extend(props)` -- просто класс с прототипом `props`.</li>
+<li>`Class.extend(props, staticProps)` -- класс с прототипом `props` и статическими свойствами `staticProps`.</li>
+<li>`Class.extend(mixins, props [, staticProps])` -- если первый аргумент массив, то он интерпретируется как примеси. Их свойства копируются в прототип перед `props`.</li>
+</ul>
+</li>
+<li>**У созданных этим методом классов также есть `extend` для продолжения наследования.**</li>
+<li>**Методы родителя можно вызвать при помощи `this._super(...)`.**</li>
+</ol>
+
+Плюсы и минусы:
+[compare]
++Такой фреймворк удобен потому, что класс можно задать одним вызовом `Class.extend`, с читаемым синтаксисом, удобным наследованием и вызовом родительских методов.
+-Редакторы и IDE, как правило, не понимают такой синтаксис, а значит, не предоставляют автодополнение. При этом они обычно понимают объявление методов через явную запись в объект или в прототип. 
+-Есть некоторые дополнительные расходы, связанные с реализацией `_super`. Если они критичны, то их можно избежать.[/compare]
+
+То, как работает фреймворк, подробно описано в комментариях: [class-extend.js](http://js.cx/libs/class-extend.js).
+[head]
+<script src="http://js.cx/libs/class-extend.js"></script>
+[/head]
\ No newline at end of file
diff --git a/1-js/9-prototypes/9-why-prototypes-better/article.md b/1-js/9-prototypes/9-why-prototypes-better/article.md
new file mode 100644
index 00000000..1bb6e93a
--- /dev/null
+++ b/1-js/9-prototypes/9-why-prototypes-better/article.md
@@ -0,0 +1,266 @@
+# Сравнение с функциональным наследованием
+
+В этой главе мы озаботимся тем, чтобы сравнить прототипный и функциональный подход к ООП.
+
+Причём, сделать это грамотно, с учётом того, что реально происходит "под капотом" интерпретатора.
+
+Нас интересуют три показателя:
+<ol>
+<li>Эффективность по памяти.</li>
+<li>Скорость работы.</li>
+<li>Архитектурные ограничения (если есть) и плюшки.</li>
+</ol>
+
+[cut]
+
+## Класс Machine
+
+Объявим класс `Machine` двумя способами:
+<dl>
+<dt>Функциональное объявление:</dt>
+<dd>Состоит из единственной функции-конструктора, которая записывает в объект всё, что нужно. Приватные данные сохраняются в локальные переменные и доступны через замыкание:
+
+```js
+function MachineOne(power) {
+  var enabled = false;
+
+  this.enable = function() {  enabled = true; };
+  this.disable = function() { enabled = false; };
+ 
+  // ...
+}
+```
+
+При этом у каждого объекта будет своя копия методов `enable` и `disable`, которые создаются каждый раз заново.
+</dd>
+<dt>Прототипное объявление:</dt>
+<dd>В объекте хранится только то, что ему нужно. Методы записываются в прототип:
+
+```js
+function MachineTwo(power) {
+  this._enabled = false;
+}
+
+MachineTwo.prototype.enable = function() {  
+  this._enabled = true; 
+};
+
+MachineTwo.prototype.disable = function() { 
+  this._enabled = false; 
+};
+```
+
+</dd>
+</dl>
+
+## Сравнение памяти
+
+Оценим затраты памяти в функциональном стиле:
+
+```js
+var machine = new MachineOne();
+
+затраты памяти = 
+  сам объект + 
+  свойства и методы в нём (this.enable/disable) + 
+  замыкание, объект с приватными переменными (var enabled)
+```
+
+В этой, казалось бы, очевидной формуле кроется серьёзная ошибка. 
+
+По коду кажется, каждый объект хранит свою копию методов `this.enable/disable`, однако это не совсем так.
+
+Интерпретаторы оптимизируют создание и хранение одинаковых одинаковых функций. "Под капотом" *строка с кодом* функции `enable/disable` хранится только один раз, и её разделяют между собой все объекты `MachineOne`. То есть, если вывести функцию в виде строки `alert(machine.enable)`, то каждый объект возьмёт код из единого для всех места в памяти.
+
+Далее, при использовании, строка с кодом на JavaScript превращается в *машинный код*, который может по-разному оптимизироваться, в зависимости от того, как именно используется функция, но и здесь интерпретатор старается разделять одинаково оптимизированный код между объектами. 
+
+**То есть, на самом деле в каждом объекте хранится не полная копия метода, а скорее "метаданные", которые указывают, где в памяти лежит соответствующим образом оптимизированная функция.**
+
+Теперь прототипный стиль:
+
+```js
+var machine = new MachineTwo();
+
+затраты памяти = 
+  сам объект + 
+  свойства (this._enabled)
+```
+
+Если сравнить, то мы видим, что значение `var enabled` переместилось в сам объект, произошла небольшая экономия на объекте LexicalEnvironment, который больше не нужен. 
+
+Кроме того, методы находятся в прототипе. Интерпретатор делает неплохую работу по оптимизации функционального стиля можно сказать, что "почти вся" информация о функциях будет разделяться между объектами, но в прототипном подходе функции разделяются на 100%, без "почти".
+
+**Вывод: прототипный стиль требует меньше памяти, так как не хранится LexicalEnvironment и методы (совсем).**
+
+В случае, когда объект хранит мало данных, и методы маленькие, разница в памяти может быть существенной. В браузере Chrome (V8) для описанных выше `MachineOne` и `MachineTwo` она может составлять 5-8 раз. Но это лишь потому, что объекты полностью синтетические, в них почти нет кода и данных. В реальности она меньше, порядка 1-3 раз, конечно это зависит от конкретного объекта.
+
+## Сравнение производительности
+
+Создание объекта в функциональном стиле дольше, поскольку происходят присвоения в `this`. Это очевидно.
+
+Но может показаться, что при этом скорость доступа к таким методом "особо быстрая", так как они хранятся в самом объекте, а не в его прототипе.
+
+Это не так.
+
+"Под капотом" интерпретатор при первом вызове метода пробежится по цепочке `__proto__`, запомнит место, где его нашёл, и далее будет обращаться прямо туда.
+
+**В современных браузерах скорость доступа к методам в прототипе и в объекте одинакова.**
+
+Функциональный стиль и здесь не имеет преимущества.
+
+## Красота синтаксиса
+
+В функциональном стиле мы имеем красивые приватные переменные и функции. Это хорошо.
+
+Но пользоваться публичными методами менее удобно.
+
+Скажем, мы хотим при создании `new Machine` тут же включить машину вызовом `this.enable()`:
+
+```js
+function Machine(power) {
+  var enabled = false;
+
+  this.enable = function() {  enabled = true; };
+  this.disable = function() { enabled = false; };
+ 
+*!*
+  // нужно писать этот вызов внизу
+  this.enable();
+*/!*
+}
+```
+
+Мы вынуждены написать вызов `this.enable()` внизу, под определением соответствующего метода.
+
+**Если методов много и они длинные, то получается, что при чтении кода нам нужно проматывать в конец файла. Это неудобно!**
+
+Типичное средство обхода -- объявлять все методы через Function Declaration, а внизу выносить во внешний интерфейс нужные:
+
+```js
+function Machine(power) {
+  var enabled = false;
+
+  enable();
+
+  function enable() {  enabled = true; };
+  function disable() { enabled = false; };
+ 
+*!*
+  this.enable = enable;
+  this.disable = disable;
+*/!*
+}
+```
+
+Ничего такого, но приходится писать лишние буквы, а у программиста и так нелёгкий труд.
+
+Прототипное наследование похожей проблемы не имеет. Зато там нужно писать слово `prototype`, что, впрочем, исправляется различными ООП-фреймворками.
+
+## Архитектурные ограничения 
+
+Наследование, реализованное в функциональном стиле, обладает важным архитектурным ограничением.
+
+**Конструктор наследника получает контроль лишь после полной инициализации родителя, и это может быть слишком поздно.**
+
+Например, пусть конструктор `Machine` при инициализации вызывает свой метод `work()`. Это достаточно типично, что при создании объект тут же делает что-то полезное или заполняет себя важными данными. 
+
+Потомок -- `CoffeeMachine` захочет переопределить этот метод. Реализация будет выглядеть так:
+
+```js
+//+ run
+// Родитель:
+
+function Machine() {
+  this.work = function() {
+    alert('Гр-р-р-р! Бям-бямс...');
+  };
+
+  this.work();
+}
+
+// Потомок:
+
+function CoffeeMachine() {
+  Machine.apply(this, arguments); 
+
+*!* 
+  // попытаемся переопределить метод в потомке
+  this.work = function() {
+    alert('Вжжжжжжжжж!');
+  };
+*/!*
+}
+
+// переопределение не сработало! 
+*!*
+var coffeeMachine = new CoffeeMachine(); // Гр-р-р-р! Бям-бямс...!
+*/!*
+```
+
+Вызвался метод `work` не потомка, а родителя! 
+
+Это естественно, ведь первым делом мы вызвали `Machine.apply(this, arguments)`, в котором используется старый `work`.
+
+**Методы для инициализации, уже использованные родителем, переопределить в потомке нельзя: слишком поздно.**
+
+Недостаток этот -- весьма серьёзный. Фактически, он ограничивает возможности построения архитектуры.
+
+Заметим, что при использовании прототипов такой проблемы не возникает. Потому что сначала полностью задаются конструкторы, методы, задаётся порядок поиска через прототипы, а уже *потом* создаются объекты.
+
+Аналогичный код через прототипы:
+
+```js
+//+ run
+function Machine() {
+  this.work();
+}
+Machine.prototype.work = function() {
+  alert('Гр-р-р-р! Бям-бямс...');
+};
+
+function CoffeeMachine() {
+  Machine.apply(this, arguments);
+}
+CoffeeMachine.prototype = Object.create(Machine.prototype);
+
+CoffeeMachine.prototype.work = function() {
+  alert('Вжжжжжжжжж!');
+};
+
+// переопределение сработает, work найден в CoffeeMachine.prototype 
+*!*
+var coffeeMachine = new CoffeeMachine(); // Вжжжжжжжжж!
+*/!*
+```
+
+## Не учитывается наследование в instanceof
+
+Есть и ещё одна проблема функционального подхода.
+
+При наследовании в функциональном стиле проверка `coffeeMachine instanceof Machine` вернёт `false`.
+
+Это вполне естественно, ведь, формально говоря, `CoffeeMachine` не является `Machine`.
+
+Единственная связь между ними -- конструктор `CoffeeMachine` вызвал функцию `Machine` в своём контексте. Оператор `instanceof` работает через проверку цепочки прототипов, а здесь её нет.
+
+**Здесь прототипный подход гораздо удобнее.**
+
+Конечно, можно попробовать запоминать, кого и в каком порядке вызывали, разработать свой аналог `instanceof`, но обычно так не делают, т.к. в прототипах встроенный `instanceof` просто работает.
+
+## Сжатие JavaScript
+
+При функциональном наследовании используются локальные переменные и функции.
+
+Современные средства сжатия JavaScript переименовывают их, делая короче и таким образом уменьшая размер кода. 
+
+**Это означает, что код, написанный в функциональном стиле, сожмётся лучше.**
+
+## Итого 
+
+Получилось, что функциональный паттерн в сочетании с наследованием обладает рядом серьёзных проблем.
+
+Его, по сути, основное достоинство -- это использование локальных функций и переменных, в которые никак нельзя залезть снаружи, и которые дают лучшее сжатие кода минификаторами.
+
+Кроме того, если программировать без фреймворков, то функциональный стиль -- наиболее нагляден и прост.
+
+Но если в проекте нужен единообразный стиль ООП, то лучше использовать прототипный подход, возможно прибавив "сахарку" в виде ООП-фреймворка (тысячи их), а функциональный использовать в тех случаях, когда *уже есть* сторонняя библиотека или конструкторы в этом стиле, которые нужно расширить.
diff --git a/1-js/9-prototypes/index.md b/1-js/9-prototypes/index.md
new file mode 100644
index 00000000..e9dc66dd
--- /dev/null
+++ b/1-js/9-prototypes/index.md
@@ -0,0 +1,3 @@
+# ООП в прототипном стиле
+
+Изучаем прототипы -- де-факто стандарт объектно-ориентированной разработки, а также их использование для наследования.
\ No newline at end of file
diff --git a/1-js/index.md b/1-js/index.md
new file mode 100644
index 00000000..f3fadc3a
--- /dev/null
+++ b/1-js/index.md
@@ -0,0 +1,5 @@
+# Язык JavaScript
+
+Эта часть позволит вам изучить JavaScript с нуля или упорядочить и дополнить существующие знания.
+
+Мы будем использовать браузер в качестве окружения, но основное внимание будет уделяться именно самому языку JavaScript.
\ No newline at end of file
diff --git a/2-ui/1-document/1-browser-environment/article.md b/2-ui/1-document/1-browser-environment/article.md
new file mode 100644
index 00000000..df975514
--- /dev/null
+++ b/2-ui/1-document/1-browser-environment/article.md
@@ -0,0 +1,45 @@
+# Окружение: DOM, BOM и JS
+
+Сам по себе язык JavaScript не предусматривает работы с браузером, он вообще не знает про HTML.
+
+Но в браузере есть ряд специальных объектов, которые образуют Document Object Model (DOM) и дают доступ к документу, а также объекты Browser Object Model (BOM), которые позволяют использовать различные возможности браузера, такие как коммуникация с сервером, открытие новых окон и т.п.
+[cut]
+
+На рисунке ниже схематически отображена структура, которая получается если посмотреть на совокупность браузерных объектов с "высоты птичьего полёта".
+
+<img src="windowObjects.png">
+
+Как видно из рисунка, на вершине стоит `window`, который играет роль *глобального объекта*, но вместе с этим даёт доступ к функционалу по управлению окном браузера, у него есть методы `window.focus()`, `window.open()` и другие.
+Все остальные объекты делятся на 3 группы. 
+
+## Объектная модель документа (DOM)
+
+Глобальный объект `document` даёт возможность взаимодействовать с содержимым страницы.
+
+Он и громадное количество его свойств, методов и связанных с ним интерфейсов описаны в [стандарте W3C DOM](http://www.w3.org/DOM/DOMTR).
+
+По историческим причинам когда-то появилась первая версия стандарта DOM Level 1, затем придумали ещё свойства и методы, и появился DOM Level 2, на текущий момент поверх них добавили ещё DOM Level 3 и готовится DOM 4.
+
+Современные браузеры также поддерживают некоторые возможности, которые не вошли в стандарты, но де-факто существуют давным-давно и отказываться от них никто не хочет. Их условно называют "DOM Level 0".
+
+Также информацию по работе с элементами страницы можно найти в стандарте [HTML 5](http://www.w3.org/TR/html5/Overview.html).
+
+## Объектная модель браузера (BOM)
+
+BOM -- это объекты для работы с чем угодно, кроме документа.
+
+Например:
+<ul>
+<li>Объект [navigator](https://developer.mozilla.org/en/DOM/window.navigator) содержит общую информацию о браузере и операционной системе. Особенно примечательны два свойства: `navigator.userAgent` -- содержит информацию о браузере и `navigator.platform` -- содержит информацию о платформе, позволяет различать Windows/Linux/Mac и т.п.</li>
+<li>Объект [location](https://developer.mozilla.org/en-US/docs/Web/API/Window.location) содержит информацию о текущем URL страницы и позволяет перенаправить посетителя на новый URL.</li>
+<li>Функции `alert/confirm/prompt` -- тоже входят в BOM.
+</li>
+</ul>
+
+Большинство возможностей BOM стандартизированы в [HTML 5](http://www.w3.org/TR/html5/Overview.html), но браузеры любят изобрести что-нибудь своё, особенное.
+
+## Объекты и функции JavaScript
+
+JavaScript -- объекты и методы языка JavaScript, который даёт возможность управлять всем этим. Именно их описывает стандарт EcmaScript.
+
+Далее в этом курсе мы будем, преимущественно, изучать DOM, поскольку именно документ занимает центральную роль в организации интерфейса, и работа с ним -- сложнее всего.
\ No newline at end of file
diff --git a/2-ui/1-document/1-browser-environment/windowObjects.png b/2-ui/1-document/1-browser-environment/windowObjects.png
new file mode 100755
index 00000000..5407ce72
Binary files /dev/null and b/2-ui/1-document/1-browser-environment/windowObjects.png differ
diff --git a/2-ui/1-document/10-compare-document-position/article.md b/2-ui/1-document/10-compare-document-position/article.md
new file mode 100644
index 00000000..e52dbd5a
--- /dev/null
+++ b/2-ui/1-document/10-compare-document-position/article.md
@@ -0,0 +1,209 @@
+# Методы contains и compareDocumentPosition
+
+Если есть два элемента, то иногда бывает нужно понять, находится ли один в другом, и произвести обработку в зависимости от результата.
+
+Обычные поисковые методы здесь не дают ответа, но есть два специальных. Они используются редко, но когда подобная задача встаёт, то знание метода может сэкономить много строк кода.
+
+[cut]
+
+## Метод contains
+
+Синтаксис:
+
+```js
+var result = parent.contains(child);
+```
+
+Возвращает `true`, если `parent` содержит `child` или `parent == child`.
+
+## Метод compareDocumentPosition
+
+Бывает, что у нас есть два элемента, к примеру, `<li>` в списке, и нужно понять, какой из них выше другого.
+
+Это поможет сделать другой метод.
+
+Синтаксис:
+
+```js
+var result = nodeA.compareDocumentPosition(nodeB);
+```
+
+Возвращаемое значение -- битовая маска (см. [](/bitwise-operators)), биты в которой означают следующее:
+
+<table>
+<tr>
+<th>Биты</th>
+<th>Число</th>
+<th>Значение</th>
+</tr>
+<tr><td>000000</td><td>0</td><td>`nodeA` и `nodeB` -- один и тот же узел</td></tr>
+<tr><td>000001</td><td>1</td><td>Узлы в разных документах (или один из них не в документе)</td></tr>
+<tr><td>000010</td><td>2</td><td>`nodeB` предшествует `nodeA` (в порядке обхода документа)</td></tr>
+<tr><td>000100</td><td>4</td><td>`nodeA` предшествует `nodeB`</td></tr>
+<tr><td>001000</td><td>8</td><td>`nodeB` содержит `nodeA`</td></tr>
+<tr><td>010000</td><td>16</td><td>`nodeA` содержит `nodeB`</td></tr>
+<tr><td>100000</td><td>32</td><td>Зарезервировано для браузера</td></tr>
+</table>
+
+Понятие "предшествует" -- означает не только "предыдущий сосед при общем родителе", но и имеет более общий смысл:  "раньше встречается в порядке [прямого обхода](http://algolist.manual.ru/ds/walk.php) дерева документа.
+
+Могут быть и сочетания битов. Примеры реальных значений:
+
+```html
+<!--+ run -->
+<p>...</p>
+<ul>
+  <li>1.1</li>
+</ul>
+<p>...</p>
+
+<script>
+var ul = document.getElementsByTagName('ul')[0];
+
+// 1. соседи
+alert( ul.compareDocumentPosition( ul.previousSibling ) ); // 2 = 10
+alert( ul.compareDocumentPosition( ul.nextSibling ) );  // 4 = 100
+
+// 2. родитель/потомок
+alert( ul.compareDocumentPosition( ul.firstChild ) ); // 20 = 10100
+alert( ul.compareDocumentPosition( ul.parentNode ) ); // 10 = 1010
+
+// 3. вообще разные узлы
+var li = ul.children[0];
+alert( li.compareDocumentPosition( document.body.lastChild ) ); // 4 = 100
+</script>
+```
+
+Комментарии:
+<ol>
+<li>Узлы являются соседями, поэтому стоит только бит "предшествования": какой перед каким.</li>
+<li>Здесь стоят сразу два бита: `10100` означает, что `ul` одновременно содержит `ul.firstChild` и является его предшественником, то есть при прямом обходе дерева документа сначала встречается `nodeA`, а потом `nodeB`. 
+Аналогично, `1010` означает, что `ul.parentNode` содержит `ul` и предшествует ему.</li>
+<li>Так как ни один из узлов не является предком друг друга, то стоит только бит предшествования: `li` предшествует последнему узлу документа, никакого сюрприза здесь нет.</li>
+</ol> 
+
+[smart header="Перевод в двоичную систему"]
+Самый простой способ самостоятельно посмотреть, как число выглядит в 2-ной системе -- вызвать для него `toString(2)`, например:
+
+```js
+//+ run
+var x = 20;
+alert( x.toString(2) ); // "10100"
+```
+
+Или так:
+
+```js
+//+ run
+alert( 20..toString(2) );
+```
+
+Здесь после `20` две точки, так как если одна, то JS подумает, что после неё десятичная часть -- будет ошибка.
+[/smart]
+
+Проверка условия "`nodeA` содержит `nodeB`" с использованием битовых операций: `nodeA.compareDocumentPosition(nodeB) & 16`, например:
+
+```html
+<!--+ run -->
+<ul>
+  <li>1</li>
+</ul>
+
+<script>
+var nodeA = document.body;
+var nodeB = document.body.children[0].children[0];
+
+*!*
+if( nodeA.compareDocumentPosition(nodeB) & 16 ) {
+  alert( nodeA +' содержит ' + nodeB );
+}
+*/!*
+</script>
+```
+
+Более подробно о битовых масках:  [](/bitwise-operators).
+
+## Поддержка в IE8-
+
+В IE8- поддерживаются свои, нестандартные, метод и свойство:
+
+<dl>
+<dt>[nodeA.contains(nodeB)](http://msdn.microsoft.com/en-us/library/ms536377.aspx)</dt>
+<dd>Результат: `true`, если `nodeA` содержит `nodeB`, а также в том случае, если `nodeA == nodeB`.</dd>
+<dt>[node.sourceIndex](http://msdn.microsoft.com/en-us/library/ms534635.aspx)</dt>
+<dd>Номер элемента `node` в порядке прямого обхода дерева. Только для узлов-элементов.</dd>
+</dl>
+
+На их основе можно написать кросс-браузерную реализацию `compareDocumentPosition`:
+
+```js
+// Адаптировано с http://ejohn.org/blog/comparing-document-position/
+function compareDocumentPosition(a, b) {
+  return a.compareDocumentPosition ?
+    a.compareDocumentPosition(b) :
+      (a != b && a.contains(b) && 16) +
+        (a != b && b.contains(a) && 8) +
+        (a.sourceIndex >= 0 && b.sourceIndex >= 0 ?
+          (a.sourceIndex < b.sourceIndex && 4) +
+            (a.sourceIndex > b.sourceIndex && 2) :
+          1);
+}
+```
+
+Эта функция будет работать для узлов-элементов во всех браузерах.
+
+## Итого
+
+Для проверки, лежит ли один узел внутри другого, достаточно метода `nodeA.contains(nodeB)`.
+
+Для расширенной проверки на предшествование есть метод `compareDocumentPosition`, кросс-браузерный вариант которого приведён выше.
+
+Пример использования:
+
+```html
+<!--+ run -->
+<ul>
+  <li id="li1">1</li>
+  <li id="li2">2</li>
+</ul>
+
+<script>
+var body = document.body;
+
+*!*
+if( compareDocumentPosition(body, li1) & 16 ) {
+  alert( 'BODY содержит LI-1' );
+}
+
+if( compareDocumentPosition(li1, li2) & 4 ) {
+  alert( 'LI-1 предшествует LI-2' );
+}
+*/!*
+
+function compareDocumentPosition(a, b) {
+  return a.compareDocumentPosition ?
+    a.compareDocumentPosition(b) :
+      (a != b && a.contains(b) && 16) +
+        (a != b && b.contains(a) && 8) +
+        (a.sourceIndex >= 0 && b.sourceIndex >= 0 ?
+          (a.sourceIndex < b.sourceIndex && 4) +
+            (a.sourceIndex > b.sourceIndex && 2) :
+          1);
+}
+</script>
+```
+
+Список битовых масок для проверки:
+<table class="bordered">
+<tr>
+<th>Биты</th>
+<th>Число</th>
+<th>Значение</th>
+</tr>
+<tr><td>000000</td><td>0</td><td>`nodeA` и `nodeB` -- один и тот же узел</td></tr>
+<tr><td>000001</td><td>1</td><td>Узлы в разных документах (или один из них не в документе)</td></tr>
+<tr><td>000010</td><td>2</td><td>`nodeB` предшествует `nodeA` (в порядке обхода документа)</td></tr>
+<tr><td>000100</td><td>4</td><td>`nodeA` предшествует `nodeB`</td></tr>
+<tr><td>001000</td><td>8</td><td>`nodeB` содержит `nodeA`</td></tr>
+<tr><td>010000</td><td>16</td><td>`nodeA` содержит `nodeB`</td></tr>
+</table>
diff --git a/2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/solution.md b/2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/solution.md
new file mode 100644
index 00000000..9bfaa536
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/solution.md
@@ -0,0 +1,31 @@
+Результат выполнения может быть разный: `innerHTML` вставит именно HTML, а `createTextNode` интерпретирует теги как текст.
+
+Запустите следующие примеры, чтобы увидеть разницу:
+<ul>
+<li>`createTextNode` создает текст <code>'&lt;b&gt;текст&lt;/b&gt;'</code>:
+
+```html
+<!--+ run height=50 -->
+<div id="elem"></div>
+<script>
+  var text = '<b>текст</b>';
+
+  elem.appendChild(document.createTextNode(text));
+</script>
+```
+
+</li>
+<li>`innerHTML` присваивает HTML <code>&lt;b&gt;текст&lt;/b&gt;</code>:
+
+```html
+<!--+ run height=50 -->
+<div id="elem"></div>
+<script>
+  var text = '<b>текст</b>';
+
+  elem.innerHTML = text;
+</script>
+```
+
+</li>
+</ul>
diff --git a/2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/task.md b/2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/task.md
new file mode 100644
index 00000000..eea47737
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/task.md
@@ -0,0 +1,21 @@
+# createTextNode vs innerHTML
+
+[importance 5]
+
+Есть *пустой* узел DOM `elem`. 
+
+**Одинаковый ли результат дадут эти скрипты?**
+
+Первый:
+
+```js
+elem.appendChild(document.createTextNode(text));
+```
+
+Второй:
+
+```js
+elem.innerHTML = text;
+```
+
+Если нет -- дайте пример значения `text`, для которого результат разный.
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/10-clock-settimeout/solution.md b/2-ui/1-document/11-modifying-document/10-clock-settimeout/solution.md
new file mode 100644
index 00000000..f71c63c0
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/10-clock-settimeout/solution.md
@@ -0,0 +1,7 @@
+Общее решение описано в [аналогичной задаче с setInterval](/task/clock-setinterval).
+
+Способ через `setTimeout` -- по сути, такой же, только функция `update` каждый раз ставит себя в очередь заново.
+
+Заметим, что в данном случае целесообразнее использовать `setInterval`, т.к. нужна не задержка между запусками, а просто запуск каждую секунду.
+
+[edit src="solution"]Открыть решение в песочнице[/edit]
diff --git a/2-ui/1-document/11-modifying-document/10-clock-settimeout/solution.view/index.html b/2-ui/1-document/11-modifying-document/10-clock-settimeout/solution.view/index.html
new file mode 100755
index 00000000..ceec78e3
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/10-clock-settimeout/solution.view/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8">
+<style>
+.hour { color: red }
+.min { color: green }
+.sec { color: blue }
+</style>
+</head>
+<body>
+
+<div id="clock">
+    <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
+</div>
+<script>
+
+var timerId;
+
+function update() {
+  var clock = document.getElementById('clock');
+  var date = new Date();
+
+  var hours = date.getHours()
+  if (hours < 10) hours = '0'+hours;
+  clock.children[0].innerHTML = hours;
+
+  var minutes = date.getMinutes();
+  if (minutes < 10) minutes = '0'+minutes;
+  clock.children[1].innerHTML = minutes;
+
+  var seconds = date.getSeconds();
+  if (seconds < 10) seconds = '0'+seconds;
+  clock.children[2].innerHTML = seconds;
+
+  timerId = setTimeout(update, 1000);
+}
+
+function clockStart() {
+  if (timerId) return;
+  update();
+}
+
+function clockStop() {
+  clearTimeout(timerId);
+  timerId = null;
+}
+
+
+
+</script>
+
+
+<input type="button" onclick="clockStart()" value="Старт">
+
+<input type="button" onclick="clockStop()" value="Стоп">
+
+</body>
+</html>
diff --git a/2-ui/1-document/11-modifying-document/10-clock-settimeout/source.view/index.html b/2-ui/1-document/11-modifying-document/10-clock-settimeout/source.view/index.html
new file mode 100755
index 00000000..57b6c3f2
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/10-clock-settimeout/source.view/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+<input type="button" onclick="clockStart()" value="Start">
+
+<input type="button" onclick="clockStop()" value="Stop">
+
+</body>
+</html>
diff --git a/2-ui/1-document/11-modifying-document/10-clock-settimeout/task.md b/2-ui/1-document/11-modifying-document/10-clock-settimeout/task.md
new file mode 100644
index 00000000..e227269f
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/10-clock-settimeout/task.md
@@ -0,0 +1,10 @@
+# Часики при помощи "setTimeout"
+
+[importance 3]
+
+Создайте цветные часы, **используя `setTimeout` вместо `setInterval`**:
+
+[iframe src="solution"]
+
+[edit src="source" task/]
+
diff --git a/2-ui/1-document/11-modifying-document/2-remove-elements/solution.md b/2-ui/1-document/11-modifying-document/2-remove-elements/solution.md
new file mode 100644
index 00000000..0d6d1ec6
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/2-remove-elements/solution.md
@@ -0,0 +1,16 @@
+Родителя `parentNode` можно получить из `elem`.
+
+Нужно учесть два момента.
+<ol>
+<li>Родителя может не быть (элемент уже удален или еще не вставлен).</li>
+<li>Для совместимости со стандартным методом нужно вернуть удаленный элемент.</li>
+</ol>
+
+Вот так выглядит решение:
+
+```js
+function remove(elem) {
+  return elem.parentNode ? elem.parentNode.removeChild(elem) : elem;
+}
+```
+
diff --git a/2-ui/1-document/11-modifying-document/2-remove-elements/task.md b/2-ui/1-document/11-modifying-document/2-remove-elements/task.md
new file mode 100644
index 00000000..763e2ab7
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/2-remove-elements/task.md
@@ -0,0 +1,23 @@
+# Удаление элементов
+
+[importance 5]
+
+Напишите функцию, которая удаляет элемент из DOM.
+
+Синтаксис должен быть таким: `remove(elem)`, то есть, в отличие от `parentNode.removeChild(elem)` -- без родительского элемента.
+
+```html
+<div>Это</div>
+<div>Все</div>
+<div>Элементы DOM</div>
+
+<script>
+  var elem = document.body.children[0];
+
+  function remove(elem) { /* ваш код */ }
+*!*
+  remove(elem);   // <-- функция должна удалить элемент
+*/!*
+</script>
+```
+
diff --git a/2-ui/1-document/11-modifying-document/3-insert-after/solution.md b/2-ui/1-document/11-modifying-document/3-insert-after/solution.md
new file mode 100644
index 00000000..d935d32a
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/3-insert-after/solution.md
@@ -0,0 +1,29 @@
+Для того, чтобы добавить элемент *после* `refElem`, мы можем вставить его *перед* `refElem.nextSibling`.
+
+Но что если `nextSibling` нет? Это означает, что `refElem` является последним потомком своего родителя и можем использовать `appendChild`.
+
+Код:
+
+```js
+function insertAfter(elem, refElem) {
+    var parent = refElem.parentNode;
+    var next = refElem.nextSibling;
+    if (next) {
+        return parent.insertBefore(elem, next);
+    } else {
+        return parent.appendChild(elem);
+    }
+}
+```
+
+Но код может быть гораздо короче, если использовать фишку со вторым аргументом null метода `insertBefore`:
+
+```js
+function insertAfter(elem, refElem) {
+    return refElem.parentNode.insertBefore(elem, refElem.nextSibling);
+}
+```
+
+Если нет `nextSibling`, то второй аргумент `insertBefore` становится `null` и тогда `insertBefore(elem,null)` работает как `appendChild`.
+
+В решении нет проверки на существование `refElem.parentNode`, поскольку вставка после элемента без родителя -- уже ошибка, пусть она возникнет в функции, это нормально.
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/3-insert-after/task.md b/2-ui/1-document/11-modifying-document/3-insert-after/task.md
new file mode 100644
index 00000000..30947467
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/3-insert-after/task.md
@@ -0,0 +1,27 @@
+# insertAfter
+
+[importance 5]
+
+Напишите функцию `insertAfter(elem, refElem)`, которая добавит `elem` после узла `refElem`.
+
+```html
+<div>Это</div>
+<div>Элементы</div>
+
+<script>
+  var elem = document.createElement('div');
+  elem.innerHTML = '<b>Новый элемент</b>';
+
+  function insertAfter(elem, refElem) { /* ваш код */ }
+
+  var body = document.body;
+
+  // вставить elem после первого элемента
+  insertAfter(elem, body.firstChild); // <--- должно работать
+
+  // вставить elem за последним элементом
+  insertAfter(elem, body.lastChild);  // <--- должно работать 
+  
+</script>
+```
+
diff --git a/2-ui/1-document/11-modifying-document/4-remove-children/solution.md b/2-ui/1-document/11-modifying-document/4-remove-children/solution.md
new file mode 100644
index 00000000..6a29e291
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/4-remove-children/solution.md
@@ -0,0 +1,56 @@
+# Неправильное решение 
+
+Для начала рассмотрим забавный пример того, как делать *не надо*:
+
+```js
+function removeChildren(elem) {
+  for(var k=0; k<elem.childNodes.length;k++) {
+    elem.removeChild(elem.childNodes[k]);
+  }
+}
+```
+
+Если вы попробуете это на практике, то увидите, то это не сработает.
+
+Не сработает потому, что `childNodes` всегда начинается 0 и автоматически смещается, когда первый потомок удален(т.е. тот, что был вторым, станет первым), поэтому такой цикл по `k` пропустит половину узлов.
+
+# Решение через DOM
+
+Правильное решение:
+
+```js
+function removeChildren(elem) {
+  while(elem.lastChild) {
+    elem.removeChild(elem.lastChild);
+  }
+}
+```
+
+# Неправильное решение (innerHTML)
+
+Прямая попытка использовать `innerHTML` была бы неправильной:
+
+```js
+function removeChildren(elem) {
+  elem.innerHTML = '';
+}
+```
+
+Дело в том, что в IE8- свойство `innerHTML` на большинстве табличных элементов (кроме ячеек `TH/TD`) не работает. Будет ошибка.
+
+# Верное решение (innerHTML)
+
+Можно завернуть `innerHTML` в `try/catch`:
+
+```js
+function removeChildren(elem) {
+  try {
+    elem.innerHTML = '';
+  } catch(e) {
+    while(elem.firstChild) { 
+      elem.removeChild(elem.firstChild);
+    }
+  }
+}
+```
+
diff --git a/2-ui/1-document/11-modifying-document/4-remove-children/task.md b/2-ui/1-document/11-modifying-document/4-remove-children/task.md
new file mode 100644
index 00000000..4c2b7386
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/4-remove-children/task.md
@@ -0,0 +1,29 @@
+# removeChildren
+
+[importance 5]
+
+Напишите функцию `removeChildren`, которая удаляет всех потомков элемента.
+
+```html
+<table id="table">
+  <tr>
+    <td>Это</td><td>Все</td><td>Элементы DOM</td>
+  </tr>
+</table>
+
+<ol id="ol">
+  <li>Вася</li>
+  <li>Петя</li>
+  <li>Маша</li>
+  <li>Даша</li>
+</ol>
+
+<script>
+  function removeChildren(elem) { /* ваш код */ }
+
+  removeChildren(table); // очищает таблицу
+  removeChildren(ol); // очищает список
+</script>
+```
+
+P.S. Проверьте ваше решение в IE8.
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/5-why-aaa/solution.md b/2-ui/1-document/11-modifying-document/5-why-aaa/solution.md
new file mode 100644
index 00000000..452540b9
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/5-why-aaa/solution.md
@@ -0,0 +1,5 @@
+HTML в задаче некорректен. В этом всё дело. И вопрос легко решится, если открыть отладчик.
+
+В нём видно, что браузер поместил текст `aaa` *перед* таблицей. Поэтому он и остался в документе.
+
+Вообще, в стандарте HTML5 описано, как браузеру обрабатывать некорректный HTML, так что такое действие браузера является правильным.
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/5-why-aaa/task.md b/2-ui/1-document/11-modifying-document/5-why-aaa/task.md
new file mode 100644
index 00000000..47a76ec2
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/5-why-aaa/task.md
@@ -0,0 +1,25 @@
+# Почему остаётся "ааа" ?
+
+[importance 1]
+
+Запустите этот пример. Почему вызов `removeChild` не удалил текст `"aaa"`?
+
+```html
+<!--+ height=100 run -->
+<table>
+  aaa
+  <tr>
+   <td>Test</td>
+  </tr>
+</table>
+
+<script>
+var table = document.body.children[0]; 
+
+alert(table); // таблица, пока всё правильно
+
+document.body.removeChild( table );
+// почему в документе остался текст?
+</script>
+```
+
diff --git a/2-ui/1-document/11-modifying-document/6-create-list/solution.md b/2-ui/1-document/11-modifying-document/6-create-list/solution.md
new file mode 100644
index 00000000..d0235e68
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/6-create-list/solution.md
@@ -0,0 +1,6 @@
+
+Делайте проверку на `null` в цикле. `prompt` возвращает это значение только если был нажат ESC.
+
+Контент в `LI` добавляйте с помощью `document.createTextNode`, чтобы правильно работали &lt;, &gt; и т.д.
+
+[edit src="solution"]Решение в песочнице[/edit]
diff --git a/2-ui/1-document/11-modifying-document/6-create-list/solution.view/index.html b/2-ui/1-document/11-modifying-document/6-create-list/solution.view/index.html
new file mode 100755
index 00000000..757cf670
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/6-create-list/solution.view/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Создание списка</h1>
+
+<script>
+  var ul = document.createElement('ul');
+  document.body.appendChild(ul);
+
+  while (true) {
+    var data = prompt("Введите текст для пункта списка", "");
+
+    if (data === null) {
+       break;
+    }
+
+    var li = document.createElement('li');
+    li.appendChild(document.createTextNode(data));
+    ul.appendChild(li);
+  }
+</script>
+     
+</body>
+</html>
diff --git a/2-ui/1-document/11-modifying-document/6-create-list/task.md b/2-ui/1-document/11-modifying-document/6-create-list/task.md
new file mode 100644
index 00000000..c86fe48d
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/6-create-list/task.md
@@ -0,0 +1,20 @@
+# Создать список
+
+[importance 4]
+
+Напишите интерфейс для создания списка.
+
+Для каждого пункта:
+<ol>
+<li>Запрашивайте содержимое пункта у пользователя с помощью `prompt`.</li>
+<li>Создавайте пункт и добавляйте его к `UL`.</li>
+<li>Процесс прерывается, когда пользователь нажимает ESC.</li>
+</ol>
+
+**Все элементы должны создаваться динамически.**
+
+Если посетитель вводит теги -- в списке они показываются как обычный текст.
+
+[demo src="solution"]
+
+P.S. `prompt` возвращает `null`, если пользователь нажал ESC.
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/7-create-object-tree/build-tree-dom.view/index.html b/2-ui/1-document/11-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
new file mode 100755
index 00000000..7b920d9f
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<div id="container"></div>
+
+<script>
+  var data = {
+    "Рыбы":{
+      "Форель":{},
+      "Щука":{}
+    },
+
+    "Деревья":{
+      "Хвойные":{
+        "Лиственница":{},
+        "Ель":{}
+      },
+      "Цветковые":{
+        "Берёза":{},
+        "Тополь":{}
+      }
+
+    }
+  };
+
+  function createTree(container, obj) {
+    container.appendChild( createTreeDom(obj) );
+  }
+
+  function createTreeDom(obj) {
+    // если нет детей, то рекурсивный вызов ничего не возвращает
+    // так что вложенный UL не будет создан
+    if (isObjectEmpty(obj)) return;
+
+    var ul = document.createElement('ul');
+
+    for (var key in obj) {
+      var li = document.createElement('li');
+      li.innerHTML = key;
+
+      var childrenUl = createTreeDom(obj[key]);
+      if (childrenUl) li.appendChild(childrenUl);
+
+      ul.appendChild(li);
+    }
+
+    return ul;
+  }
+
+
+  function isObjectEmpty(obj) {
+    for (var key in obj) {
+      return false;
+    }
+    return true;
+  }
+
+  var container = document.getElementById('container');
+  createTree(container, data);
+</script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/11-modifying-document/7-create-object-tree/solution.md b/2-ui/1-document/11-modifying-document/7-create-object-tree/solution.md
new file mode 100644
index 00000000..ff334e70
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/7-create-object-tree/solution.md
@@ -0,0 +1,6 @@
+Решения через рекурсию.
+
+<ol>
+<li>[edit src="solution"]Через innerHTML[/edit].</li>
+<li>[edit src="build-tree-dom"]Через DOM[/edit].</li>
+</ol>
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/7-create-object-tree/solution.view/index.html b/2-ui/1-document/11-modifying-document/7-create-object-tree/solution.view/index.html
new file mode 100755
index 00000000..e4c3501a
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/7-create-object-tree/solution.view/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<div id="container"></div>
+
+<script>
+  var data = {
+    "Рыбы":{
+      "Форель":{},
+      "Щука":{}
+    },
+
+    "Деревья":{
+      "Хвойные":{
+        "Лиственница":{},
+        "Ель":{}
+      },
+      "Цветковые":{
+        "Берёза":{},
+        "Тополь":{}
+      }
+
+    }
+  };
+
+  function createTree(container, obj) {
+    container.innerHTML = createTreeText(obj);
+  }
+
+  function createTreeText(obj) { // отдельная рекурсивная функция
+    var li = '';
+    for (var key in obj) {
+      li += '<li>' + key + createTreeText(obj[key]) + '</li>';
+    }
+    if (li) {
+      var ul = '<ul>' + li + '</ul>'
+    }
+    return ul || '';
+  }
+
+  var container = document.getElementById('container');
+  createTree(container, data);
+</script>
+</body>
+  </html>
diff --git a/2-ui/1-document/11-modifying-document/7-create-object-tree/source.view/index.html b/2-ui/1-document/11-modifying-document/7-create-object-tree/source.view/index.html
new file mode 100755
index 00000000..35067bf8
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/7-create-object-tree/source.view/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<div id="tree"></div>
+
+<!-- Результат должен быть таким:
+<div id="tree">
+<ul>
+  <li>Рыбы
+    <ul>
+      <li>Форель</li>
+      <li>Щука</li>
+    </ul>
+  </li>
+  <li>Деревья
+    <ul>
+      <li>Хвойные
+        <ul>
+          <li>Лиственница</li>
+          <li>Ель</li>
+        </ul>
+      </li>
+      <li>Цветковые
+        <ul>
+          <li>Берёза</li>
+          <li>Тополь</li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+</ul>
+</div>
+-->
+
+<script>
+  var data = {
+    "Рыбы":{
+      "Форель":{},
+      "Щука":{}
+    },
+
+    "Деревья":{
+      "Хвойные":{
+        "Лиственница":{},
+        "Ель":{}
+      },
+      "Цветковые":{
+        "Берёза":{},
+        "Тополь":{}
+      }
+    }
+  };
+
+  /* ваш код */
+
+  createTree(document.getElementById('tree'), data);
+</script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/11-modifying-document/7-create-object-tree/task.md b/2-ui/1-document/11-modifying-document/7-create-object-tree/task.md
new file mode 100644
index 00000000..78726b96
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/7-create-object-tree/task.md
@@ -0,0 +1,52 @@
+# Создайте дерево из объекта
+
+[importance 5]
+
+Напишите функцию, которая создаёт вложенный список `UL/LI` (дерево) из объекта.
+
+Например:
+
+```js
+var data = {
+  "Рыбы":{
+    "Форель":{},
+    "Щука":{}
+  },
+
+  "Деревья":{
+    "Хвойные":{
+      "Лиственница":{},
+      "Ель":{}
+    },
+    "Цветковые":{
+      "Берёза":{},
+      "Тополь":{}
+    }
+  }
+};
+```
+
+Синтаксис:
+
+```js
+var container = document.getElementById('container');
+*!*
+createTree(container, data); // создаёт 
+*/!*
+```
+
+Результат (дерево):
+
+[iframe border=1 src="solution"]
+
+Выберите один из двух способов решения этой задачи:
+<ol>
+<li>Создать строку, а затем присвоить через `container.innerHTML`.</li>
+<li>Создавать узлы через методы DOM.</li>
+</ol>
+
+Если получится -- сделайте оба.
+
+[edit src="source" task/]
+
+P.S. Желательно, чтобы в дереве не было лишних элементов, в частности -- пустых `<ul></ul>` на нижнем уровне.
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/8-calendar-table/solution.md b/2-ui/1-document/11-modifying-document/8-calendar-table/solution.md
new file mode 100644
index 00000000..a4e1a7f3
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/8-calendar-table/solution.md
@@ -0,0 +1,11 @@
+Для решения задачи сгенерируем таблицу в виде строки: `"<table>...</table>"`, а затем присвоим в `innerHTML`.
+
+Алгоритм:
+<ol>
+<li>Создать объект даты `d = new Date(year, month-1)`. Это первый день месяца `month` (с учетом того, что месяцы в JS начинаются от 0, а не от 1).</li>
+<li>Ячейки первого ряда пустые от начала и до дня недели `d.getDay()`, с которого начинается месяц. Создадим их.</li>
+<li>Увеличиваем день в `d` на единицу: `d.setDate(d.getDate()+1)`, и добавляем в календарь очередную ячейку, пока не достигли следующего месяца. При этом последний день недели означает вставку перевода строки <code>"&lt;/tr&gt;&lt;tr&gt;"</code>.</li>
+<li>При необходимости, если календарь окончился не на воскресенье - добавить пустые `TD` в таблицу, чтобы было все ровно.</li>
+</ol>
+
+[edit src="solution"]Открыть полное решение[/edit]
diff --git a/2-ui/1-document/11-modifying-document/8-calendar-table/solution.view/index.html b/2-ui/1-document/11-modifying-document/8-calendar-table/solution.view/index.html
new file mode 100755
index 00000000..2adc7474
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/8-calendar-table/solution.view/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+table {
+  border-collapse: collapse;
+}
+
+td, th {
+  border: 1px solid black;
+  padding: 3px;
+  text-align: center;
+}
+
+th {
+  font-weight: bold;
+  background-color: #E6E6E6;
+}
+</style>
+<meta charset="utf-8">
+</head>
+<body>
+
+
+<div id="calendar"></div>
+
+<script>
+function createCalendar(id, year, month) {
+  var elem = document.getElementById(id);
+
+  var mon = month - 1; // месяцы в JS идут от 0 до 11, а не от 1 до 12
+  var d = new Date(year, mon);
+
+  var table = '<table><tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr><tr>';
+
+  // заполнить первый ряд от понедельника
+  // и до дня, с которого начинается месяц
+  // * * * | 1  2  3  4
+  for (var i=0; i<getDay(d); i++) {
+    table += '<td></td>';
+  }
+
+  // ячейки календаря с датами
+  while(d.getMonth() == mon) {
+    table += '<td>'+d.getDate()+'</td>';
+
+    if (getDay(d) % 7 == 6) { // вс, последний день - перевод строки
+      table += '</tr><tr>';
+    }
+
+    d.setDate(d.getDate()+1);
+  }
+
+  // добить таблицу пустыми ячейками, если нужно
+  if (getDay(d) != 0) {
+    for (var i=getDay(d); i<7; i++) {
+      table += '<td></td>';
+    }
+  }
+
+  // закрыть таблицу
+  table += '</tr></table>';
+
+  // только одно присваивание innerHTML
+  elem.innerHTML = table;
+}
+
+function getDay(date) { // получить номер дня недели, от 0(пн) до 6(вс)
+  var day = date.getDay();
+  if (day == 0) day = 7;
+  return day - 1;
+}
+
+
+
+createCalendar("calendar", 2012, 9)
+</script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/11-modifying-document/8-calendar-table/source.view/index.html b/2-ui/1-document/11-modifying-document/8-calendar-table/source.view/index.html
new file mode 100755
index 00000000..38008482
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/8-calendar-table/source.view/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+table {
+  border-collapse: collapse;
+}
+
+td, th {
+  border: 1px solid black;
+  padding: 3px;
+  text-align: center;
+}
+
+th {
+  font-weight: bold;
+  background-color: #E6E6E6;
+}
+</style>
+<meta charset="utf-8">
+</head>
+<body>
+
+
+<div id="calendar"></div>
+
+<script>
+
+function createCalendar(id, year, month) {
+  var elem = document.getElementById(id)
+
+  // ... ваш код, который генерирует в elem календарь
+}
+
+createCalendar('calendar', 2011, 1)
+
+</script>
+</body>
+</html>
diff --git a/2-ui/1-document/11-modifying-document/8-calendar-table/task.md b/2-ui/1-document/11-modifying-document/8-calendar-table/task.md
new file mode 100644
index 00000000..a3b08b3c
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/8-calendar-table/task.md
@@ -0,0 +1,19 @@
+# Создать календарь в виде таблицы
+
+[importance 4]
+
+Напишите функцию, которая умеет генерировать календарь для заданной пары (месяц, год).
+
+Календарь должен быть таблицей, где каждый день -- это `TD`. У таблицы должен быть заголовок с названиями дней недели, каждый день -- `TH`.
+
+Синтаксис: `createCalendar(id, year, month)`. 
+
+Такой вызов должен генерировать текст для календаря месяца `month` в году `year`, а затем помещать его внутрь элемента с указанным `id`.
+
+Например: `createCalendar("cal", 2012, 9)` сгенерирует в <code>&lt;div id='cal'&gt;&lt;/div&gt;</code> следующий календарь:
+
+[iframe height=210 src="solution"]
+
+P.S. Достаточно сгенерировать календарь, кликабельным его делать не нужно.
+
+[edit src="source" task/]
diff --git a/2-ui/1-document/11-modifying-document/9-clock-setinterval/solution.md b/2-ui/1-document/11-modifying-document/9-clock-setinterval/solution.md
new file mode 100644
index 00000000..551e6f04
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/9-clock-setinterval/solution.md
@@ -0,0 +1,59 @@
+Для начала, придумаем подходящую HTML/CSS-структуру.
+
+Здесь каждый компонент времени удобно поместить в соответствующий `SPAN`:
+
+```html
+<div id="clock">
+    <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
+</div>
+```
+
+Каждый `SPAN` раскрашивается при помощи CSS.
+
+Жизнь часам будет обеспечивать функция `update`, вызываемая каждую секунду: `setInterval(update, 1000)`.
+
+```js
+var timerId; // таймер, если часы запущены
+
+function clockStart() {  // запустить часы
+  if (timerId) return;
+
+  timerId = setInterval(update, 1000);
+  update();  // (*)
+}
+
+function clockStop() {
+  clearInterval(timerId);
+  timerId = null;
+}
+```
+
+Обратите внимание, что вызов `update` не только запланирован, но и производится тут же в строке `(*)`. Иначе посетителю пришлось бы ждать до первого выполнения `setInterval`.
+
+Функция обновления часов:
+
+```js
+function update() {
+  var clock = document.getElementById('clock');
+*!*
+  var date = new Date(); // (*)
+*/!*
+  var hours = date.getHours();
+  if (hours < 10) hours = '0'+hours;
+  clock.children[0].innerHTML = hours;
+
+  var minutes = date.getMinutes();
+  if (minutes < 10) minutes = '0'+minutes;
+  clock.children[1].innerHTML = minutes;
+
+  var seconds = date.getSeconds();
+  if (seconds < 10) seconds = '0'+seconds;
+  clock.children[2].innerHTML = seconds;
+}
+```
+
+В строке `(*)` каждый раз мы получаем текущую дату. Мы должны это сделать, несмотря на то, что, казалось бы, могли бы просто увеличивать счетчик каждую секунду.
+
+На самом деле мы не можем опираться на счетчик для вычисления даты, т.к. `setInterval` не гарантирует точную задержку. Если в другом участке кода будет вызван `alert`, то часы остановятся, как и любые счетчики.
+
+[edit src="solution"]Полный код решения[/edit]
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/9-clock-setinterval/solution.view/index.html b/2-ui/1-document/11-modifying-document/9-clock-setinterval/solution.view/index.html
new file mode 100755
index 00000000..645c176a
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/9-clock-setinterval/solution.view/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8">
+<style>
+.hour { color: red }
+.min { color: green }
+.sec { color: blue }
+</style>
+</head>
+<body>
+
+<div id="clock">
+    <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
+</div>
+
+<script>
+
+var timerId;
+
+function update() {
+  var clock = document.getElementById('clock');
+  var date = new Date();
+
+  var hours = date.getHours();
+  if (hours < 10) hours = '0'+hours;
+  clock.children[0].innerHTML = hours;
+
+  var minutes = date.getMinutes();
+  if (minutes < 10) minutes = '0'+minutes;
+  clock.children[1].innerHTML = minutes;
+
+  var seconds = date.getSeconds();
+  if (seconds < 10) seconds = '0'+seconds;
+  clock.children[2].innerHTML = seconds;
+}
+
+function clockStart() {
+  if (timerId) return;
+
+  timerId = setInterval(update, 1000);
+  update(); // <--  начать тут же, не ждать 1 секунду пока setInterval сработает
+}
+
+function clockStop() {
+  clearInterval(timerId);
+  timerId = null;
+}
+
+
+
+</script>
+
+
+<input type="button" onclick="clockStart()" value="Старт">
+
+<input type="button" onclick="clockStop()" value="Стоп">
+
+</body>
+</html>
diff --git a/2-ui/1-document/11-modifying-document/9-clock-setinterval/source.view/index.html b/2-ui/1-document/11-modifying-document/9-clock-setinterval/source.view/index.html
new file mode 100755
index 00000000..f921b8fb
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/9-clock-setinterval/source.view/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+
+<input type="button" onclick="clockStart()" value="Start">
+
+<input type="button" onclick="clockStop()" value="Stop">
+
+</body>
+</html>
diff --git a/2-ui/1-document/11-modifying-document/9-clock-setinterval/task.md b/2-ui/1-document/11-modifying-document/9-clock-setinterval/task.md
new file mode 100644
index 00000000..26a17c2f
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/9-clock-setinterval/task.md
@@ -0,0 +1,9 @@
+# Часики с использованием "setInterval"
+
+[importance 4]
+
+Создайте цветные часики как в примере ниже, **используя `setInterval`**:
+
+[iframe src="solution"]
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/2-ui/1-document/11-modifying-document/article.md b/2-ui/1-document/11-modifying-document/article.md
new file mode 100644
index 00000000..d8c194db
--- /dev/null
+++ b/2-ui/1-document/11-modifying-document/article.md
@@ -0,0 +1,341 @@
+# Добавление и удаление узлов
+
+Изменение DOM -- ключ к созданию "живых" страниц. 
+
+В этой главе мы рассмотрим, как создавать новые элементы "на лету" и заполнять их данными.
+
+[cut]
+
+## Пример: показ сообщения
+
+В качестве примера рассмотрим добавление сообщения на страницу, чтобы оно было оформленно красивее чем обычный `alert`.
+
+HTML-код для сообщения (с подключённой библиотекой стилей [bootstrap](http://getbootstrap.com/)):
+
+```html
+<!--+ autorun height="100" -->
+<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
+
+<div class="alert alert-success">
+  <strong>Ура!</strong> Вы прочитали это важное сообщение.
+</div>
+```
+
+## Создание элемента
+
+Для создания элементов используются следующие методы:
+
+<dl>
+<dt>`document.createElement(tag)`</dt>
+<dd>Создает новый элемент с указанным тегом:
+
+```js
+var div = document.createElement('div');
+```
+
+</dd>
+<dt>`document.createTextNode(text)`</dt>
+<dd>Создает новый *текстовый* узел с данным текстом:
+
+```js
+var textElem = document.createTextNode('Тут был я');
+```
+
+</dl>
+
+### Создание сообщения
+
+В нашем случае мы хотим сделать DOM-элемент `div`, дать ему классы и заполнить текстом:
+
+```js
+var div = document.createElement('div');
+div.className = "alert alert-success";
+div.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";
+```
+
+После этого кода у нас есть готовый DOM-элемент. Пока что он присвоен в переменную `div`, но не виден, так как никак не связан со страницей. 
+
+## Добавление элемента: appendChild, insertBefore
+
+Чтобы DOM-узел был показан на странице, его необходимо вставить в `document`.
+
+Для этого первым делом нужно решить, куда мы будем его вставлять. Предположим, что мы решили, что вставлять будем в некий элемент `parentElem`, например `var parentElem = document.body`.
+
+Для вставки внутрь `parentElem` есть следующие методы:
+
+<dl>
+<dt>`parentElem.appendChild(elem)`</dt>
+<dd>Добавляет `elem` в конец дочерних элементов `parentElem`. 
+
+Следующий пример добавляет новый элемент в конец `<ol>`:
+
+```html
+<!--+ run height=100 -->
+<ol id="list">
+  <li>0</li>
+  <li>1</li>
+  <li>2</li>
+</ol>
+
+<script>
+
+  var newLi = document.createElement('li');
+  newLi.innerHTML = 'Привет, мир!';
+
+  list.appendChild(newLi);
+
+</script>
+```
+
+</dd>
+<dt>`parentElem.insertBefore(elem, nextSibling)`</dt>
+<dd>Вставляет `elem` в список дочерних `parentElem` перед элементом `nextSibling`.
+
+Следующий код вставляет новый элемент перед вторым `<li>`:
+
+```html
+<!--+ run height=100 -->
+<ol id="list">
+  <li>0</li>
+  <li>1</li>
+  <li>2</li>
+</ol>
+<script>
+
+  var newLi = document.createElement('li');
+  newLi.innerHTML = 'Привет, мир!';
+
+*!*
+  list.insertBefore(newLi, list.children[1]);
+*/!*
+</script>
+```
+
+**Этот же метод используется для вставки в начало элемента.**
+
+Достаточно указать, что вставлять будем перед первым потомком:
+
+```js
+list.insertBefore(newLi, list.firstChild);
+```
+
+У человека, который посмотрит на этот код внимательно, наверняка возникнет вопрос: "А что, если `list` вообще пустой, в этом случае ведь `list.firstChild = null`, произойдёт ли вставка?"
+
+Ответ -- да, произойдёт.
+
+**Дело в том, что если в качестве `nextSibling` указать `null`, то `insertBefore` сработает как `appendChild`:**
+
+```js
+parentElem.insertBefore(elem, null);
+// то же, что и:
+parentElem.appendChild(elem)
+```
+
+</dd>
+</dl>
+
+Все методы вставки возвращают вставленный узел, например `parentElem.appendChild(elem)` возвращает `elem`. 
+
+### Добавление сообщения
+
+Добавим сообщение в конец `<body>`:
+
+```html
+<!--+ height=150 run autorun -->
+<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
+<body>
+  <h3>Моя страница</h3>
+</body>
+
+<script>
+  var div = document.createElement('div');
+  div.className = "alert alert-success";
+  div.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";
+
+*!*
+  document.body.appendChild(div);
+*/!*
+</script>
+```
+
+...А теперь -- в начало `<body>`:
+
+```html
+<!--+ height=150 run autorun -->
+<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
+<body>
+  <h3>Моя страница</h3>
+</body>
+
+<script>
+  var div = document.createElement('div');
+  div.className = "alert alert-success";
+  div.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";
+
+*!*
+  document.body.insertBefore(div, document.body.firstChild);
+*/!*
+</script>
+```
+
+## Клонирование узлов: cloneNode
+
+А как бы мне вставить второе такое же сообщение?
+
+Конечно, можно сделать функцию для генерации сообщений и поместить туда этот код, но в ряде случаев гораздо эффективнее -- *клонировать* существующий `div`. В частности, если элемент большой, то клонировать его будет гораздо быстрее, чем пересоздавать.
+
+Вызов `elem.cloneNode(true)` создаст "глубокую" копию элемента -- вместе с атрибутами, включая подэлементы. Если же вызвать с аргумнтом `false`, то он копия будет без подэлементов, но это нужно гораздо реже.
+
+### Копия сообщения 
+
+Пример со вставкой копии сообщения:
+
+```html
+<!--+ height=200 run autorun -->
+<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
+<body>
+  <h3>Моя страница</h3>
+</body>
+
+<script>
+  var div = document.createElement('div');
+  div.className = "alert alert-success";
+  div.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";
+
+  document.body.insertBefore(div, document.body.firstChild);
+
+*!*
+  // создать копию узла
+  var div2 = div.cloneNode(true);
+  // копию можно подправить
+  div2.querySelector('strong').innerHTML = 'Супер!';
+  // вставим её после текущего сообщения
+  div.parentNode.insertBefore( div2, div.nextSibling );
+*/!*
+
+</script>
+```
+
+Обратите внимание на последнюю строку, которая вставляет `div2` после `div`:
+
+```js
+div.parentNode.insertBefore( div2, div.nextSibling );
+```
+
+<ol>
+<li>Для вставки нам нужен будущий родитель. Мы, возможно, не знаем, где точно находится `div` (или не хотим зависеть от того, где он), но если нужно вставить рядом с ним, то родителем определённо будет `div.parentNode`.</li>
+<li>Вставляем в родителя. Мы хотели бы вставить после `div`, но метода `insertAfter` нет, есть только `insertBefore`, поэтому вставляем *перед* его правым соседом `div.nextSibling`.</li>
+</ol>
+
+
+## Удаление узлов: removeChild  
+
+Для удаления узла есть два метода:
+
+<dl>
+<dt>`parentElem.removeChild(elem)`</dt>
+<dd>Удаляет `elem` из списка детей `parentElem`.</dd>
+<dt>`parentElem.replaceChild(elem, currentElem)`</dt>
+<dd>Среди детей `parentElem` заменяет `currentElem` на `elem`.</dd>
+</dl>
+
+Оба этих метода возвращают удаленный узел. Если нужно, его можно вставить в другое место DOM тут же или в будущем.
+
+[smart]
+Если вы хотите *переместить* элемент на новое место -- не нужно его удалять со старого.
+
+**Все методы вставки автоматически удаляют вставляемый элемент со старого места.**
+
+Конечно же, это очень удобно.
+
+Например, поменяем элементы местами:
+
+```html
+<!--+ run height=150 -->
+<div>Первый</div>
+<div>Второй</div>
+<script>
+  var first = document.body.children[0];
+  var last = document.body.children[1];
+
+  // нет необходимости в предварительном removeChild(last)
+  document.body.insertBefore(last, first); // поменять местами
+</script>
+```
+
+[/smart]
+
+
+### Удаление сообщения
+
+Сделаем так, что через секунду сообщение пропадёт:
+
+```html
+<!--+ run -->
+<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
+<body>
+  <h3>Сообщение пропадёт через секунду</h3>
+</body>
+
+<script>
+  var div = document.createElement('div');
+  div.className = "alert alert-success";
+  div.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";
+
+  document.body.appendChild(div);
+
+*!*
+  setTimeout(function() {
+    div.parentNode.removeChild(div);
+  }, 1000);
+*/!*
+</script>
+```
+
+## Пример использования текстовых узлов
+
+При работе с сообщением мы использовали только узлы-элементы и `innerHTML`. 
+
+Но и текстовые узлы тоже имеют интересную область применения! Было бы несправедливо их обойти.
+
+У них есть две особенности. Начнем с небольшого вопроса.
+
+
+Ответили на вопрос выше? Даже если нет, то, поглядев в решение, вы легко увидите разницу.
+
+Итак, отличий два:
+<ol>
+<li>При создании текстового узла `createTextNode('<b>...</b>')` любые специальные символы и теги в строке будут интерпретированы *как текст*. А `innerHTML` обработал бы их *как HTML*.</li>
+<li>Во всех современных браузерах создание и вставка текстового узла работает гораздо быстрее, чем присвоение HTML.</li>
+</ol>
+
+## Итого
+
+Методы для создания узлов:
+
+<ul>
+<li>`document.createElement(tag)` -- создает элемент</li>
+<li>`document.createTextNode(value)` -- создает текстовый узел</li>
+<li>`elem.cloneNode(deep)` -- клонирует элемент, если `deep == true`, то со всеми потомками, если `false` -- без потомков.</li>
+</ul>
+
+Вставка и удаление узлов:
+<ul>
+<li>`parent.appendChild(elem)`</li>
+<li>`parent.insertBefore(elem, nextSibling)`</li>
+<li>`parent.removeChild(elem)`</li>
+<li>`parent.replaceChild(elem, currentElem)`</li>
+</ul>
+
+Все эти методы возвращают `elem`.
+
+Запомнить порядок аргументов очень просто: **новый(вставляемый) элемент -- всегда первый.**
+
+Методы для изменения DOM также описаны в спецификации <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html">DOM Level 1</a>.
+
+
+
+
+
+
+
diff --git a/2-ui/1-document/12-multi-insert/1-append-to-list/solution.md b/2-ui/1-document/12-multi-insert/1-append-to-list/solution.md
new file mode 100644
index 00000000..f8202293
--- /dev/null
+++ b/2-ui/1-document/12-multi-insert/1-append-to-list/solution.md
@@ -0,0 +1,8 @@
+Решение:
+
+```js
+var ul = document.body.children[0];
+
+ul.insertAdjacentHTML("beforeEnd", "<li>3</li><li>4</li><li>5</li>");
+```
+
diff --git a/2-ui/1-document/12-multi-insert/1-append-to-list/task.md b/2-ui/1-document/12-multi-insert/1-append-to-list/task.md
new file mode 100644
index 00000000..88c334f6
--- /dev/null
+++ b/2-ui/1-document/12-multi-insert/1-append-to-list/task.md
@@ -0,0 +1,15 @@
+# Вставьте элементы в конец списка
+
+[importance 5]
+
+Напишите код для вставки текста `html` в конец списка `ul` с использованием метода `insertAdjacentHTML`. Такая вставка, в отличие от присвоения `innerHTML+=`, не будет перезаписывать текущее содержимое. 
+
+Добавьте к списку ниже элементы `<li>3</li><li>4</li><li>5</li>`:
+
+```html
+<ul>
+  <li>1</li>
+  <li>2</li>
+</ul>
+```
+
diff --git a/2-ui/1-document/12-multi-insert/2-insertadjacenthtml-documentfragment/solution.md b/2-ui/1-document/12-multi-insert/2-insertadjacenthtml-documentfragment/solution.md
new file mode 100644
index 00000000..9de9c2f5
--- /dev/null
+++ b/2-ui/1-document/12-multi-insert/2-insertadjacenthtml-documentfragment/solution.md
@@ -0,0 +1,49 @@
+# Подсказки
+
+<ul>
+<li>Проверить поддержку `insertAdjacentHTML` можно так:
+
+```js
+if (elem.insertAdjacentHTML) { ... }
+```
+
+</li>
+<li>Если этот метод не поддерживается, то сделайте временный элемент, через `innerHTML` поставьте туда `html`, а затем переместите содержимое в `DocumentFragment`. Последнее действие -- вставка в документ.</li>
+</ul>
+
+# Решение
+
+```html
+<!--+ run -->
+<ul>
+  <li>1</li>
+  <li>2</li>
+  <li>5</li>
+</ul>
+
+<script>
+var ul = document.body.children[0];
+var li5 = ul.children[2];
+
+function insertBefore(elem, html) {
+  if (elem.insertAdjacentHTML) {
+    elem.insertAdjacentHTML("beforeBegin", html);
+  } else {
+    var fragment = document.createDocumentFragment();
+
+    var tmp = document.createElement('DIV');
+
+    tmp.innerHTML = html;
+
+    while(tmp.firstChild) {
+      // перенести все узлы во fragment
+      fragment.appendChild(tmp.firstChild);
+    }
+    elem.parentNode.insertBefore(fragment, elem);
+  }
+}
+
+insertBefore(li5, "<li>3</li><li>4</li>")
+</script>
+```
+
diff --git a/2-ui/1-document/12-multi-insert/2-insertadjacenthtml-documentfragment/task.md b/2-ui/1-document/12-multi-insert/2-insertadjacenthtml-documentfragment/task.md
new file mode 100644
index 00000000..ad9d8207
--- /dev/null
+++ b/2-ui/1-document/12-multi-insert/2-insertadjacenthtml-documentfragment/task.md
@@ -0,0 +1,34 @@
+# Вставка insertAdjacentHTML/DocumentFragment
+
+[importance 4]
+
+Напишите кроссбраузерную функцию `insertBefore(elem, html)`, которая:
+
+<ul>
+<li>Вставляет HTML-строку `html` перед элементом `elem`, используя `insertAdjacentHTML`,</li>
+<li>Если он не поддерживается (старый Firefox) -- то через `DocumentFragment`.</li>
+</ul>
+
+В обоих случаях должна быть лишь одна операция с DOM документа.
+
+Следующий код должен вставить два пропущенных элемента списка `<li>3</li><li>4</li>`:
+
+```html
+<ul>
+  <li>1</li>
+  <li>2</li>
+  <li>5</li>
+</ul>
+
+<script>
+var ul = document.body.children[0];
+var li5 = ul.children[2];
+
+function insertBefore(elem, html) {
+  /* ваш код */
+}
+
+insertBefore(li5, "<li>3</li><li>4</li>")
+</script>
+```
+
diff --git a/2-ui/1-document/12-multi-insert/3-sort-table-performance/solution.md b/2-ui/1-document/12-multi-insert/3-sort-table-performance/solution.md
new file mode 100644
index 00000000..f5201d1c
--- /dev/null
+++ b/2-ui/1-document/12-multi-insert/3-sort-table-performance/solution.md
@@ -0,0 +1,11 @@
+Для сортировки нам поможет функция `sort` массива.
+
+Общая идея лежит на поверхности: сделать массив из строк и отсортировать его. Тонкости кроются в деталях.
+
+В ифрейме ниже загружен документ, описывающий и реализующий разные алгоритмы. Обратите внимание: разница в производительности может достигать нескольких раз!
+
+[iframe height=800 border=1 src="solution" link edit]
+
+P.S. Создавать `DocumentFragment` здесь ни к чему. Можно вытащить из документа `TBODY` и иметь дело с ним в отрыве от DOM (алгоритм 4).
+
+P.P.S. Если нужно сделать много узлов, то обычно `innerHTML` работает быстрее, чем генерация элементов через DOM-вызовы. Но в данном случае мы не создаём элементы, а сортируем и перевставляем готовые, так что результаты могут отличаться.
diff --git a/2-ui/1-document/12-multi-insert/3-sort-table-performance/solution.view/index.html b/2-ui/1-document/12-multi-insert/3-sort-table-performance/solution.view/index.html
new file mode 100755
index 00000000..ee89ce92
--- /dev/null
+++ b/2-ui/1-document/12-multi-insert/3-sort-table-performance/solution.view/index.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<fieldset>
+  <legend>Алгоритм 1.</legend>
+<ol>
+  <li>Все <code>TR</code> удалить из таблицы, при этом собрав их в JavaScript-массив.</li>
+  <li>Отсортировать этот массив, используя свою функцию в <code>sort(...)</code> для сравнения <code>TR</code></li>
+  <li>Добавить <code>TR</code> из массива в таблицу в нужном порядке</li>
+</ol>
+<button onclick="bench(sort1, this)">Померять время</button>
+</fieldset>
+
+<fieldset>
+  <legend>Алгоритм 2.</legend>
+<ol>
+  <li>Скопировать <code>TR</code> в JavaScript-массив.</li>
+  <li>Отсортировать этот массив, используя свою функцию в <code>sort(...)</code> для сравнения <code>TR</code></li>
+  <li>Добавить <code>TR</code> из массива в таблицу в нужном порядке. При добавлении каждый <code>TR</code> сам удалится с предыдущего места.</li>
+</ol>
+<button onclick="bench(sort2, this)">Померять время</button>
+</fieldset>
+
+
+<fieldset>
+  <legend>Алгоритм 3.</legend>
+<ol>
+  <li>Создать массив из объектов вида <code>{elem: ссылка на TR, value: содержимое TR}</code>.</li>
+  <li>Отсортировать массив по <code>value</code>. Функция сравнения во время сортировки теперь будет обращаться не к <code>innerHTML</code>, а к свойству объекта, это быстрее. Сортировка может потребовать многократных сравнений одного и того же элемента, отсюда выигрыш.</li>
+  <li>Добавить <code>TR</code> в таблицу в нужном порядке (автоудалятся с предыдущего места).</li>
+</ol>
+<button onclick="bench(function(){sortOpt(false)}, this)">Померять время</button>
+</fieldset>
+
+
+<fieldset>
+  <legend>Алгоритм 4.</legend>
+  <ol>
+    <li>Выполнить алгоритм 3, но перед этим удалить таблицу из документа, а после - вставить обратно.</li>
+  </ol>
+<button onclick="bench(function(){sortOpt(true)}, this)">Померять время</button>
+</fieldset>
+
+<fieldset>
+  <legend>Алгоритм 5.</legend>
+  <ol>
+    <li>Замерить время генерации таблицы (создаётся строка и пишется в <code>innerHTML</code>).</li>
+  </ol>
+<button onclick="benchMake(this)">Померять время</button>
+</fieldset>
+
+<div id="table-holder"></div>
+
+
+<script>
+
+function makeTable() {
+  var tableHolder = document.getElementById('table-holder');
+
+  var contents = '<thead><th>Имя</th><th>Фамилия</th><th>Отчество</th><th>Возраст</th></thead>';
+  contents += '<tbody>';
+  for(var i=0; i<100; i++) {
+    contents += "<tr><td> ... </td><td>Разные</td><td>Данные</td><td>" + ( (i+50) % 30 ) + "</td></tr>";
+  }
+  contents += '</tbody>';
+
+  tableHolder.innerHTML = '<table>'+contents+'</table>';
+}
+
+/* перенести элементы в массив, отсортировать его и перевставить */
+function sort1() {
+  var tbody = document.getElementsByTagName('tbody')[0];
+  var rows = [];
+
+  for(var i=tbody.children.length-1; i>=0; i--) {    
+    var child = tbody.removeChild(tbody.children[i]);
+    rows.push(child);
+  }
+
+  rows.sort(function(a, b) {
+    return a.lastChild.innerHTML - b.lastChild.innerHTML;
+  })
+
+  for(var i=0; i<rows.length; i++) {
+    tbody.appendChild(rows[i]);
+  }
+
+}
+
+/* скопировать ссылки в массив, отсортировать его и перевставить */
+function sort2() {
+  var tbody = document.getElementsByTagName('tbody')[0];
+  var rows = [];
+
+  for(var i=0; i<tbody.children.length; i++) {
+    rows.push(tbody.children[i]);
+  }
+
+  rows.sort(function(a, b) {
+    return a.lastChild.innerHTML - b.lastChild.innerHTML;
+  })
+
+  for(var i=0; i<rows.length; i++) {
+    tbody.appendChild(rows[i]);
+  }
+
+}
+
+
+/* создать массив из значений и ссылок, отсортировать, перевставить
+  doRemove = предварительно вынуть из документа
+*/
+function sortOpt(doRemove) {
+  var tbody = document.getElementsByTagName('tbody')[0];
+  var table = tbody.parentNode;
+  if (doRemove) table.removeChild(tbody);
+
+  var rows = [];
+  for(var i=0; i<tbody.children.length; i++) {
+    var elem = tbody.children[i];
+    rows.push({
+      value: elem.lastChild.innerHTML,
+      elem: elem 
+    });
+  }
+
+  rows.sort(function(a, b) {
+    return a.value - b.value;
+  });
+
+  for(var i=0; i<rows.length; i++) {
+    tbody.appendChild(rows[i].elem);
+  }
+
+  if (doRemove) table.appendChild(tbody);
+}
+
+
+function bench(f, elem) {
+  var sum = 0;
+  for(var i=0; i<100; i++) {
+    makeTable();
+    var d = new Date;
+    f();
+    sum += new Date - d;
+  }
+  elem.innerHTML = sum + 'мс';
+}
+
+
+function benchMake(elem) {
+  var sum = 0;
+  for(var i=0; i<100; i++) {
+    var d = new Date;
+    makeTable();
+    sum += new Date - d;
+  }
+  elem.innerHTML = sum + 'мс';
+}
+
+
+</script>
+
+
+
+<h3>Содержимое документа для придания "реалистичности"</h3>
+
+<div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div><div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/12-multi-insert/3-sort-table-performance/task.md b/2-ui/1-document/12-multi-insert/3-sort-table-performance/task.md
new file mode 100644
index 00000000..0a1dcbf1
--- /dev/null
+++ b/2-ui/1-document/12-multi-insert/3-sort-table-performance/task.md
@@ -0,0 +1,47 @@
+# Отсортировать таблицу
+
+[importance 5]
+
+Есть таблица:
+
+<table>
+<tr>
+  <th>Имя</th>
+  <th>Фамилия</th>
+  <th>Отчество</th>
+  <th>Возраст</th>
+</tr>
+<tr>
+  <td>Вася</td>
+  <td>Петров</td>
+  <td>Александрович</td>
+  <td>10</td>
+</tr>
+<tr>
+  <td>Петя</td>
+  <td>Иванов</td>
+  <td>Петрович</td>
+  <td>15</td>
+</tr>
+<tr>
+  <td>Владимир</td>
+  <td>Ленин</td>
+  <td>Ильич</td>
+  <td>9</td>
+</tr>
+<tr>
+  <td>...</td>
+  <td>...</td>
+  <td>...</td>
+  <td>...</td>
+</tr>
+</table>
+
+Строк в таблице много: может быть 20, 50, 100.. Есть и другие элементы в документе.
+
+Как бы вы предложили отсортировать содержимое таблицы по полю `Возраст`? Обдумайте алгоритм, реализуйте его. 
+
+Как сделать, чтобы сортировка работала как можно быстрее? А если в таблице 10000 строк (бывает и такое)? 
+
+P.S. Может ли здесь помочь `DocumentFragment`?
+P.P.S. Если предположить, что у нас заранее есть массив данных для таблицы в JavaScript -- что быстрее: отсортировать эту таблицу или сгенерировать новую?
\ No newline at end of file
diff --git a/2-ui/1-document/12-multi-insert/article.md b/2-ui/1-document/12-multi-insert/article.md
new file mode 100644
index 00000000..71b2e967
--- /dev/null
+++ b/2-ui/1-document/12-multi-insert/article.md
@@ -0,0 +1,312 @@
+# Мультивставка: insertAdjacentHTML и DocumentFragment
+
+Обычные методы вставки работают с одним узлом. Но есть и способы вставлять множество узлов одновременно.
+[cut]
+## Оптимизация вставки в документ
+
+Рассмотрим задачу: сгенерировать список `UL/LI`. 
+
+Есть две возможных последовательности:
+
+<ol>
+<li>Сначала вставить `UL` в документ, а потом добавить к нему `LI`:
+
+```js
+var ul = document.createElement('ul');
+document.body.appendChild(ul); // сначала в документ
+for(...) ul.appendChild(li);   // потом узлы
+```
+
+</li>
+<li>Полностью создать список "вне DOM", а потом -- вставить в документ:
+
+```js
+var ul = document.createElement('ul');
+for(...) ul.appendChild(li);   // сначала вставить узлы
+document.body.appendChild(ul); // затем в документ
+```
+
+</li>
+</ol>
+
+Как ни странно, между этими последовательностями есть разница. В большинстве браузеров, второй вариант -- быстрее.
+
+Почему же? Иногда говорят: "потому что браузер перерисовывает каждый раз при добавлении элемента". Это не так. **Дело вовсе не в перерисовке**.
+
+Браузер достаточно "умён", чтобы ничего не перерисовывать понапрасну. В большинстве случаев процессы перерисовки и сопутствующие вычисления будут отложены до окончания работы скрипта, и на тот момент уже совершенно без разницы, в какой последовательности были изменены узлы.
+
+**Тем не менее, при вставке узла происходят разные внутренние события и обновления внутренних структур данных, скрытые от наших глаз.**
+
+Что именно происходит -- зависит от конкретной, внутренней браузерной реализации DOM, но это отнимает время. Конечно, браузеры развиваются и стараются свести лишние действия к минимуму. 
+
+### Бенчмарк [#insert-bench-tbody]
+
+Чтобы легко проверить текущее состояние дел -- вот два бенчмарка. 
+
+Оба они создают таблицу 20x20, наполняя <code>TBODY</code> элементами <code>TR/TD</code>. 
+
+При этом первый вставляет все в документ тут же, второй -- задерживает вставку <code>TBODY</code> в документ до конца процесса.
+
+Кликните, чтобы запустить.
+
+<input type="button" onclick="alert(bench(appendFirst,50))" value="TBODY cразу в DOM"/> <input type="button" onclick="alert(bench(appendLast,50))" value="Отложенная вставка TBODY в DOM"/>
+  
+<table id="bench-table"></table>
+
+```js
+//+ hide="открыть код" src="insert-bench.js"
+```
+
+## Добавление множества узлов
+
+Продолжим работать со вставкой узлов. 
+
+Рассмотрим случай, когда в документе *уже есть* большой список `UL`. И тут понадобилось срочно добавить еще 20 элементов `LI`.
+
+Как это сделать?
+
+Если новые элементы пришли в виде строки, то можно попробовать добавить их так:
+
+```js
+ul.innerHTML += "<li>1</li><li>2</li>...";
+```
+
+Но операция `+=` с `innerHTML` не работает с DOM. Она не прибавляет, а заменяет всё содержимое списка на дополненную строку. Это не только медленно, но все внешние ресурсы (картинки) будут загружены заново! Так лучше не делать.
+
+А если нужно вставить в середину списка? Здесь `innerHTML` вообще не поможет.
+
+Можно, конечно, вставить строку во временный DOM-элемент и перенести оттуда элементы, но есть и гораздо лучший вариант: метод `insertAdjacentHTML`!
+
+## insertAdjacent*
+
+Метод [insertAdjacentHTML](https://developer.mozilla.org/en/DOM/element.insertAdjacentHTML) позволяет вставлять произвольный HTML в любое место документа, в том числе *и между узлами*!
+
+Он поддерживается всеми браузерами, кроме Firefox меньше версии 8, ну а там его можно эмулировать.
+
+Синтаксис:
+
+```js
+elem.insertAdjacentHTML(where, html);
+```
+
+<dl>
+<dt>`html`</dt>
+<dd>Строка HTML, которую нужно вставить</dd>
+<dt>`where`</dt>
+<dd>Куда по отношению к `elem` вставлять строку. Всего четыре варианта:
+<ol>
+<li>`beforeBegin` -- перед `elem`.</li>
+<li>`afterBegin` -- внутрь `elem`, в самое начало.</li>
+<li>`beforeEnd` -- внутрь `elem`, в конец.</li>
+<li>`afterEnd` -- после `elem`.</li>
+</ol>
+</dd>
+
+<img src="insertAdjacentHTML.png">
+
+Например, вставим пропущенные элементы списка *перед* `<li>5</li>`:
+
+```html
+<!--+ run -->
+<ul>
+  <li>1</li>
+  <li>2</li>
+  <li>5</li>
+</ul>
+
+<script>
+var ul = document.body.children[0];
+var li5 = ul.children[2];
+
+li5.insertAdjacentHTML("beforeBegin", "<li>3</li><li>4</li>");
+</script>
+```
+
+Единственный недостаток этого метода -- он не работает в Firefox до версии 8. Но его можно легко добавить, используя следующий JavaScript: [insertAdjacentFF.js](/files/tutorial/browser/dom/insertAdjacentFF.js).
+
+У этого метода есть "близнецы-братья", которые поддерживаются везде, кроме FF, но в него они добавляются этим же скриптом:
+
+<ul>
+<li>[elem.insertAdjacentElement(where, newElem)](http://help.dottoro.com/ljbreokf.php) -- вставляет в произвольное место не строку HTML, а элемент `newElem`.</li>
+<li>[elem.insertAdjacentText(where, text)](http://help.dottoro.com/ljrsluxu.php) -- создаёт текстовый узел из строки `text` и вставляет его в указанное место относительно `elem`.</li>
+</ul>
+
+Синтаксис этих методов, за исключением последнего параметра, полностью совпадает с `insertAdjacentHTML`. Вместе они образуют "универсальный швейцарский нож" для вставки чего угодно куда угодно.
+
+## DocumentFragment
+
+[warn header="Важно для старых браузеров"]
+Оптимизация, о которой здесь идёт речь, важна в первую очередь для старых браузеров, включая IE9-. В современных браузерах эффект от нее, как правило, не превышает 20%, а иногда может быть и отрицательным.
+[/warn]
+
+До этого мы говорили о вставке строки в DOM. А что делать в случае, когда надо в существующий `UL` вставить много *DOM-элементов*?
+
+Можно вставлять их один за другим, вызовом `insertBefore/appendChild`, но при этом получится много операций с большим живым документом. 
+
+**Вставить пачку узлов единовременно поможет `DocumentFragment`. Это особенный *кросс-браузерный* DOM-объект, который похож на обычный DOM-узел, но им не является.**
+
+Синтаксис для его создания:
+
+```js
+var fragment = document.createDocumentFragment();
+```
+
+В него можно добавлять другие узлы.
+
+```js
+fragment.appendChild(node);
+```
+
+Его можно клонировать:
+
+```js
+fragment.cloneNode(true); // клонирование с подэлементами
+```
+
+**У `DocumentFragment` нет обычных свойств DOM-узлов, таких как `innerHTML`, `tagName` и т.п. Это не узел.**
+
+**"Фишка" заключается в том, что когда `DocumentFragment` вставляется в DOM -- то он исчезает, а вместо него вставляются его дети. Это свойство является уникальной особенностью `DocumentFragment`.**
+
+Например, если добавить в него много `LI`, и потом `appendChild` к `UL`, то фрагмент растворится, и в DOM вставятся именно `LI`, причём в том же порядке, в котором были во фрагменте.
+
+Псевдокод:
+
+```js
+// хотим вставить в список UL много LI
+
+// делаем вспомогательный DocumentFragment
+var fragment = document.createDocumentFragment();
+
+for (цикл по li) {
+  fragment.appendChild(list[i]); // вставить каждый LI в DocumentFragment 
+}
+
+ul.appendChild(fragment);   // вместо фрагмента вставятся элементы списка
+```
+
+В современных браузерах эффект от такой оптимизации может быть различным. Чтобы понять текущее положение вещей, попробуйте в различных браузерах следующий небольшой бенчмарк.
+
+При нажатии на кнопки ниже в список добавляются `100` элементов. 
+[pre]
+<div>
+<input type="button" onclick="alert(bench(DocumentFragmentTest.insertPlain,200))" value="Обычная вставка"/>
+<input type="button" onclick="alert(bench(DocumentFragmentTest.insertDocumentFragment,200))" value="Вставка через DocumentFragment">
+</div>
+  [/pre]
+<ul id="bench-list"></ul>
+
+
+<script src="/files/tutorial/browser/dom/documentfragment-bench.js"></script>
+
+```js
+//+ hide="открыть код" src="documentfragment-bench.js"
+```
+
+## Итого
+
+<ul>
+<li>**Манипуляции, меняющие структуру DOM (вставка, удаление элементов), как правило, быстрее с отдельным маленьким узлом, чем с большим DOM, который находится в документе.** 
+
+Конкретная разница зависит от внутренней реализации DOM в браузере.</li>
+<li>**Семейство методов `elem.insertAdjacentHTML(where, html)`, `insertAdjacentElement`, `insertAdjacentText` позволяет вставлять HTML/элемент/текст в произвольное место документа.**
+
+Метод `insertAdjacentHTML` не поддерживается в Firefox до версии 8, остальные два метода не поддерживаются в Firefox, на момент написания текста, вообще, но есть небольшой скрипт  [insertAdjacentFF.js](/files/tutorial/browser/dom/insertAdjacentFF.js), который добавляет их. Конечно, он нужен только для Firefox.
+</li>
+<li>**`DocumentFragment` позволяет минимизировать количество вставок в большой живой DOM. Эта оптимизация особо эффективна в старых браузерах, в новых эффект от неё меньше.**
+
+Элементы сначала вставляются в него, а потом -- он вставляется в DOM. При вставке `DocumentFragment` "растворяется", и вместо него вставляются содержащиеся в нём узлы.
+
+`DocumentFragment`, в отличие от `insertAdjacent*`, работает с коллекцией DOM-узлов.
+</li>
+</ul>
+
+
+[head]
+<script>
+function bench(test, times) {
+   var sum = 0;
+   for(var i=0; i<times; i++) {
+      if(test.setup) test.setup();
+      var t = new Date();
+      test.work();
+      sum += (new Date() - t);
+      if(test.tearDown) test.tearDown();
+   }
+   return sum;
+}
+/* 1. Вставляет TBODY в документ сразу. а затем элементы */
+var appendFirst = new function() {
+  var benchTable;
+
+  this.setup = function() {
+    // очистить всё
+    benchTable = document.getElementById('bench-table')
+    while(benchTable.firstChild) {
+      benchTable.removeChild(benchTable.firstChild);
+    }
+  }
+
+  this.work = function() {
+    // встаить TBODY и элементы
+    var tbody = document.createElement('TBODY');
+    benchTable.appendChild(tbody);
+
+    for(var i=0; i<20; i++) {
+      var tr = document.createElement('TR');
+      tbody.appendChild(tr);
+      for(var j=0; j<20; j++) {
+        var td = document.createElement('td');
+        td.appendChild(document.createTextNode(''+i.toString(20)+j.toString(20)));
+        tr.appendChild(td);
+      }
+    }
+  }
+
+}
+
+/* 2. Полностью делает TBODY, а затем вставляет в документ */
+var appendLast = new function() {
+  var benchTable;
+
+  this.setup = function() {
+    // очистить всё
+    benchTable = document.getElementById('bench-table');
+    while(benchTable.firstChild) {
+      benchTable.removeChild(benchTable.firstChild);
+    }
+  }
+
+  this.work = function() {
+    var tbody = document.createElement('TBODY');
+
+    for(var i=0; i<20; i++) {
+      var tr = document.createElement('TR');
+      tbody.appendChild(tr);
+      for(var j=0; j<20; j++) {
+        var td = document.createElement('td');
+        tr.appendChild(td);
+        td.appendChild(document.createTextNode(''+i.toString(20)+j.toString(20)));
+      }
+    }
+
+    benchTable.appendChild(tbody);
+  }
+
+}
+</script>
+
+<style>
+##bench-table td {
+  padding: 0;
+}
+
+##bench-list li {
+  display: inline-block;
+  margin: 0;
+  padding: 2px;
+  list-style-image: none;
+  list-style: none;
+}
+
+</style>
+[/head]
\ No newline at end of file
diff --git a/2-ui/1-document/12-multi-insert/documentfragment-bench.js b/2-ui/1-document/12-multi-insert/documentfragment-bench.js
new file mode 100755
index 00000000..afa0134b
--- /dev/null
+++ b/2-ui/1-document/12-multi-insert/documentfragment-bench.js
@@ -0,0 +1,45 @@
+var DocumentFragmentTest = new function() {
+  var benchList = document.getElementById('bench-list');
+
+  var items = [];
+  for(var i=0; i<100; i++) {
+    var li = document.createElement('li');
+    li.innerHTML = i;
+    items.push(li);  
+  }
+
+  this.insertPlain = new function() {
+
+    this.setup = function() {
+      while(benchList.firstChild) {
+        benchList.removeChild(benchList.firstChild);
+      }
+    }
+
+    this.work = function() {
+      for(var i=0; i<items.length; i++) {
+        benchList.appendChild(items[i]);
+      }
+    }
+
+  };
+
+  this.insertDocumentFragment = new function() {
+
+    this.setup = function() {
+      // очистить всё
+      while(benchList.firstChild) {
+        benchList.removeChild(benchList.firstChild);
+      }
+    }
+
+    this.work = function() {
+      var docFrag = document.createDocumentFragment();
+      for(var i=0; i<items.length; i++) {
+        docFrag.appendChild(items[i]);
+      }
+      benchList.appendChild(docFrag);
+    }
+
+  };
+}
diff --git a/2-ui/1-document/12-multi-insert/insert-bench.js b/2-ui/1-document/12-multi-insert/insert-bench.js
new file mode 100755
index 00000000..7481e1ed
--- /dev/null
+++ b/2-ui/1-document/12-multi-insert/insert-bench.js
@@ -0,0 +1,60 @@
+
+/* 1. Вставляет TBODY в документ сразу. а затем элементы */
+var appendFirst = new function() {
+  var benchTable;
+
+  this.setup = function() {
+    // очистить всё
+    benchTable = document.getElementById('bench-table')
+    while(benchTable.firstChild) {
+      benchTable.removeChild(benchTable.firstChild);
+    }
+  }
+
+  this.work = function() {
+    // встаить TBODY и элементы
+    var tbody = document.createElement('TBODY');
+    benchTable.appendChild(tbody);
+
+    for(var i=0; i<20; i++) {
+      var tr = document.createElement('TR');
+      tbody.appendChild(tr);
+      for(var j=0; j<20; j++) {
+        var td = document.createElement('td');
+        td.appendChild(document.createTextNode(''+i.toString(20)+j.toString(20)));
+        tr.appendChild(td);
+      }
+    }
+  }
+
+}
+
+/* 2. Полностью делает TBODY, а затем вставляет в документ */
+var appendLast = new function() {
+  var benchTable;
+
+  this.setup = function() {
+    // очистить всё
+    benchTable = document.getElementById('bench-table');
+    while(benchTable.firstChild) {
+      benchTable.removeChild(benchTable.firstChild);
+    }
+  }
+
+  this.work = function() {
+    var tbody = document.createElement('TBODY');
+
+    for(var i=0; i<20; i++) {
+      var tr = document.createElement('TR');
+      tbody.appendChild(tr);
+      for(var j=0; j<20; j++) {
+        var td = document.createElement('td');
+        tr.appendChild(td);
+        td.appendChild(document.createTextNode(''+i.toString(20)+j.toString(20)));
+      }
+    }
+
+    benchTable.appendChild(tbody);
+  }
+
+}
diff --git a/2-ui/1-document/12-multi-insert/insertAdjacentHTML.png b/2-ui/1-document/12-multi-insert/insertAdjacentHTML.png
new file mode 100755
index 00000000..f9625e2f
Binary files /dev/null and b/2-ui/1-document/12-multi-insert/insertAdjacentHTML.png differ
diff --git a/2-ui/1-document/13-document-write/article.md b/2-ui/1-document/13-document-write/article.md
new file mode 100644
index 00000000..cb15f278
--- /dev/null
+++ b/2-ui/1-document/13-document-write/article.md
@@ -0,0 +1,143 @@
+# Метод document.write
+
+Метод `document.write` -- один из наиболее древних методов добавления текста к документу.
+
+У него есть существенные ограничения, поэтому он используется редко, но по своей сути он совершенно уникален и иногда, хоть и редко, может быть полезен.
+[cut]
+## Как работает document.write   
+
+Метод `document.write(str)` работает только пока HTML-страница находится в процессе загрузки. Он дописывает текст в текущее место HTML ещё до того, как браузер построит из него DOM.
+
+HTML-документ ниже будет содержать `1 2 3`.
+
+```html
+<!--+ run -->
+<body>
+1
+<script>
+  document.write(2);
+</script>
+3
+</body>
+```
+
+**Нет никаких ограничений на содержимое `document.write`**. 
+
+Строка просто пишется в HTML-документ без проверки структуры тегов, как будто она всегда там была.
+
+Например:
+
+```html
+<!--+ run -->
+<script> 
+  document.write('<style> td { color: #F40 } </style>');
+ </script>
+<table>
+  <tr>
+  <script> document.write('<td>') </script>
+    Текст внутри TD.
+  <script> document.write('</td>') </script>
+  </tr>
+</table>
+```
+
+Также существует метод `document.writeln(str)` -- не менее древний, который добавляет после `str` символ перевода строки `"\n"`.
+
+## Только до конца загрузки
+
+Во время загрузки браузер читает документ и тут же строит из него DOM, по мере получения информации достраивая новые и новые узлы, и тут же отображая их. Этот процесс идет непрерывным потоком. Вы наверняка видели это, когда заходили на сайты в качестве посетителя -- браузер зачастую отображает неполный документ, добавляя его новыми узлами по мере их получения.
+
+**Методы `document.write` и `document.writeln` пишут напрямую в текст документа, до того как браузер построит из него DOM, поэтому они могут записать в документ все, что угодно, любые стили и незакрытые теги.**
+
+Браузер учтет их при построении DOM, точно так же, как учитывает очередную порцию HTML-текста.
+
+Технически, вызвать `document.write` можно в любое время, однако, когда HTML загрузился, и браузер полностью построил DOM, документ становится *"закрытым"*. Попытка дописать что-то в закрытый документ открывает его заново. При этом все текущее содержимое удаляется.
+
+Текущая страница, скорее всего, уже загрузилась, поэтому если вы нажмёте на эту кнопку -- её содержимое удалится:
+
+<input type="button" onclick='document.write("Пустая страница!");' value="Запустить document.write('Пустая страница!')">
+
+Из-за этой особенности `document.write` для загруженных документов не используют.
+
+[warn header="XHTML и `document.write`"]
+В некоторых современных браузерах при получении страницы с заголовком `Content-Type: text/xml` или `Content-Type: text/xhtml+xml` включается "XML-режим" чтения документа. Метод `document.write` при этом не работает. 
+
+Это одна из причин, по которой XML-режим обычно не используют.
+[/warn]
+
+
+## Преимущества перед innerHTML
+
+Метод `document.write` -- динозавр, он существовал десятки <strike>миллионов</strike> лет назад. С тех пор, как появился и стал стандартным метод `innerHTML`, нужда в нём возникает редко, но некоторые преимущества, всё же, есть.
+
+<ul>
+<li>**Метод `document.write` работает быстрее, фактически это самый быстрый способ добавить на страницу текст, сгенерированный скриптом.**
+
+Это естественно, ведь он не модифицирует существующий DOM, а пишет в текст страницы до его генерации.</li>
+<li>**Метод `document.write` вставляет любой текст на страницу "как есть", в то время как `innerHTML` может вписать лишь валидный HTML.** (при попытке подсунуть невалидный -- браузер скорректирует его).</li>
+</ul>
+
+Эти преимущества являются скорее средством оптимизации, которое нужно использовать именно там, где подобная оптимизация нужна или уместна.
+
+Однако, `document.write` по своей природе уникален: он добавляет текст "в текущее место документа", без всяких хитроумных DOM. Поэтому он бывает просто-напросто удобен, из-за чего его нередко используют не по назначению.
+
+## Антипример: реклама
+
+Например, `document.write` используют для вставки рекламных скриптов и различных счетчиков, когда URL скрипта необходимо генерировать динамически, добавляя в него параметры из JavaScript, например:
+
+```html
+<script>
+  // в url указано текущее разрешение экрана посетителя
+  var url = 'http://ads.com/buyme?screen=' + screen.width + "x" + screen.height;
+
+  // загрузить такой скрипт прямо сейчас
+  document.write('<script src="'+url+'"></scr'+'ipt>');
+</script>
+```
+
+[smart]
+Закрывающий тег <code>&lt;/script&gt;</code> в строке разделён, чтобы браузер не увидел `</script>` и не посчитал его концом скрипта. 
+
+Также используют запись:
+
+```js
+document.write('<script src="'+url+'"><\/script>');
+```
+
+Здесь `<\/script>` вместо `</script>`: обратный слеш `\` обычно используется для вставки спецсимволов типа `\n`, а если такго спецсимвола нет, в данном случае `\/` не является спецсимволом, то он просто исчезает. Так что получается такой альтернативный способ безопасно вставить строку `</script>`. 
+[/smart]
+
+Сервер, получив запрос с такими параметрами, обрабатывает его и, исходя учитывая переданную информацию, генерирует текст скрипта, в котором обычно есть какой-то другой `document.write`, рисующий на этом месте баннер.
+ 
+**Проблема здесь в том, что загрузка такого скрипта блокирует отрисовку всей страницы.**
+
+То есть, дело даже не в самом `document.write`, а в том, что в страницу вставляется сторонний скрипт, а браузер устроен так, что пока он его не загрузит и не выполнит -- он не будет дальше строить DOM и показывать документ.
+
+Представим на минуту, что сервер `ads.com`, с которого грузится скрипт, работает медленно или вообще завис -- зависнет и наша страница.
+
+Что делать?
+
+В современных браузерах у скриптов есть атрибуты `async` и `defer`, которые разрешают браузеру продолжать обработку страницы, но применить их здесь нельзя, так как рекламный скрипт захочет вызвать `document.write` именно на этом месте, и браузер не должен двигаться вперёд по документу.
+
+Альтернатива -- использовать другие техники вставки рекламы и счётчиков. Примеры вы можете увидеть в коде Google Analytics, Яндекс.Метрики и других.
+
+Если это невозможно -- применяют всякие хитрые оптимизации, например заменяют метод `document.write` своей функцией, и она уже разбирается со скриптами и баннерами. 
+
+## Итого
+
+Метод `document.write` (или `writeln`) пишет текст прямо в HTML, как будто он там всегда был. 
+
+<ul>
+<li>**Этот метод редко используется, так как работает только из скриптов, выполняемых в процессе загрузки страницы.**
+
+Запуск после загрузки приведёт к очистке документа.</li>
+<li>**Метод `document.write` очень быстр.** 
+
+В отличие от установки `innerHTML` и DOM-методов, он не изменяет существующий документ, а работает на стадии текста, до того как DOM-структура сформирована. </li>
+<li>**Иногда `document.write` используют для добавления скриптов с динамическим URL.** 
+
+Рекомендуется избегать этого, так как браузер остановится на месте добавления скрипта и будет ждать его загрузки. Если скрипт будет тормозить, то и страница -- тоже. 
+
+Поэтому желательно подключать внешние скрипты, используя вставку скрипта через DOM.
+</li>
+</ul>
diff --git a/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.md b/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.md
new file mode 100644
index 00000000..c78f0136
--- /dev/null
+++ b/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.md
@@ -0,0 +1,43 @@
+Есть два варианта. 
+
+<ol>
+<li>Можно использовать свойство `elem.style.cssText` и присвоить стиль в текстовом виде. При этом все присвоенные ранее свойства `elem.style` будут удалены.</li>
+<li>Можно назначить подсвойства `elem.style` одно за другим. Этот способ более безопасен, т.к. меняет только явно присваемые свойства.</li>
+</ol>
+
+Мы выберем второй путь.
+
+[edit src="solution"]Открыть решение[/edit] 
+
+**Описание CSS-свойств:**
+
+```css
+.button {
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  border: 2px groove green;
+  display: block;
+  height: 30px;
+  line-height: 30px;
+  width: 100px;
+  text-decoration: none;
+  text-align: center;
+  color: red;
+  font-weight: bold;
+}
+```
+
+<dl>
+<dt>`*-border-radius`</dt>
+<dd>Добавляет скругленные углы. Свойство присваивается в вариантах для Firefox `-moz-...`, Chrome/Safari `-webkit-...` и стандартное CSS3-свойство для тех, кто его поддерживает (Opera).</dd>
+<dt>`display`</dt>
+<dd>По умолчанию, у `A` это свойство имеет значение `display: inline`.</dd>
+<dt>`height`, `line-height`</dt>
+<dd>Устанавливает высоту и делает текст вертикально центрированным путем установки `line-height` в значение, равное высоте. Такой способ центрирования текста работает, если он состоит из одной строки.</dd>
+<dt>`text-align`</dt>
+<dd>Центрирует текст горизонтально.</dd>
+<dt>`color`, `font-weight`</dt>
+<dd>Делает текст красным и жирным.</dd>
+</dl>
+
diff --git a/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.view/index.html b/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.view/index.html
new file mode 100755
index 00000000..906df785
--- /dev/null
+++ b/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.view/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+
+<div>
+  Кнопка:
+  <!-- создайте элемент и расположите его тут -->
+</div>
+
+<script>
+  var a = document.createElement('a');
+  a.className = 'button';
+  a.appendChild(document.createTextNode('Нажми меня'));
+  a.href = '/';
+
+  var s = a.style
+  s.MozBorderRadius = s.WebkitBorderRadius = s.borderRadius = '8px';
+  s.border = '2px groove green';
+  s.display = 'block';
+  s.height = '30px';
+  s.lineHeight = '30px';
+  s.width = '100px';
+  s.textDecoration = 'none';
+  s.textAlign = 'center';
+  s.color = 'red';
+  s.fontWeight = 'bold';
+
+  var div = document.body.children[0];
+  div.appendChild(a);
+
+
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/source.view/index.html b/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/source.view/index.html
new file mode 100755
index 00000000..be378ff0
--- /dev/null
+++ b/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/source.view/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+
+<div>
+  Кнопка:
+  <!-- создайте элемент и расположите его тут -->
+</div>
+
+<script>
+  // .. ваш код
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/task.md b/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/task.md
new file mode 100644
index 00000000..f77417bc
--- /dev/null
+++ b/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/task.md
@@ -0,0 +1,33 @@
+# Скругленая кнопка со стилями из JavaScript
+
+[importance 3]
+
+Создайте кнопку в виде элемента `<a>` с заданным стилем, используя JavaScript.
+
+В примере ниже такая кнопка создана при помощи HTML/CSS. В вашем решении кнопка должна создаваться, настраиваться и добавляться в документ при помощи *только JavaScript*, без тегов `<style>` и `<a>`.
+
+```html
+<!--+ autorun height="50" -->
+<style>
+  .button {
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+    border-radius: 8px;
+    border: 2px groove green;
+    display: block;
+    height: 30px;
+    line-height: 30px;
+    width: 100px;
+    text-decoration: none;
+    text-align: center;
+    color: red;
+    font-weight: bold;
+  }
+</style>
+
+<a class="button" href="/">Нажми меня</a>
+```
+
+**Проверьте себя: вспомните, что означает каждое свойство. В чём состоит эффект его появления здесь?**
+
+[edit src="source" task/] 
diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.md b/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.md
new file mode 100644
index 00000000..099f5e81
--- /dev/null
+++ b/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.css b/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.css
new file mode 100755
index 00000000..e04a30b3
--- /dev/null
+++ b/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.css
@@ -0,0 +1,15 @@
+.notification {
+  position: fixed;
+  z-index: 1000;
+  padding: 5px;
+  border: 1px solid black;
+  font: normal 20px Georgia;
+  background: white;
+  text-align: center;
+}
+
+.welcome {
+  background: red;
+  color: yellow;
+}
+
diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.html b/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.html
new file mode 100755
index 00000000..94dc16d3
--- /dev/null
+++ b/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    
+  <h2>Уведомление</h2>
+  
+  <p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
+  </p>    
+  
+  <script>
+    /**
+     * Показывает уведомление, пропадающее через 1.5 сек
+     * 
+     * @param options.top {number} вертикальный отступ, в px
+     * @param options.right {number} правый отступ, в px
+     * @param options.cssText {string} строка стиля
+     * @param options.className {string} CSS-класс 
+     * @param options.html {string} HTML-текст для показа
+     */
+    function showNotification(options) {
+      
+      var notification = document.createElement('div');
+      notification.className = "notification";
+      if (options.cssText) {
+        notification.style.cssText = options.cssText;
+      }
+      notification.style.top = (options.top || 0) + 'px'; // can use cssText
+      notification.style.right = (options.right || 0) + 'px'; // can use cssText
+      if (options.className) {
+        notification.classList.add(options.className);
+      }
+
+      notification.innerHTML = options.html;
+      document.body.appendChild(notification); // over cover
+
+      setTimeout(function() {
+        document.body.removeChild(notification);
+      }, 1500);
+    }
+
+    // тест работоспособности
+    var i = 0;
+    setInterval(function() {
+      showNotification({
+        top: 10,
+        right: 10,
+        html: 'Привет ' + ++i,
+        className: "welcome"
+      });      
+    }, 2000);
+
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.css b/2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.css
new file mode 100755
index 00000000..e04a30b3
--- /dev/null
+++ b/2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.css
@@ -0,0 +1,15 @@
+.notification {
+  position: fixed;
+  z-index: 1000;
+  padding: 5px;
+  border: 1px solid black;
+  font: normal 20px Georgia;
+  background: white;
+  text-align: center;
+}
+
+.welcome {
+  background: red;
+  color: yellow;
+}
+
diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.html b/2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.html
new file mode 100755
index 00000000..752e22cc
--- /dev/null
+++ b/2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    
+  <h2>Уведомление</h2>
+  
+  <p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
+  </p>    
+  
+  <p>В CSS есть готовый класс notification, который можно ставить уведомлению.</p>
+
+  <script>
+    /**
+    * Показывает уведомление, пропадающее через 1.5 сек
+    * 
+    * @param options.top {number} вертикальный отступ, в px
+    * @param options.right {number} правый отступ, в px
+    * @param options.cssText {string} строка стиля
+    * @param options.className {string} CSS-класс 
+    * @param options.html {string} HTML-текст для показа
+    */
+    function showNotification(options) {
+      // ваш код
+    }
+
+    // тест работоспособности
+    var i = 0;
+    setInterval(function() {
+      showNotification({
+        top: 10,
+        right: 10,
+        html: 'Привет ' + ++i,
+        className: "welcome"
+      });      
+    }, 2000);
+
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/task.md b/2-ui/1-document/14-styles-and-classes/2-create-notification/task.md
new file mode 100644
index 00000000..b2bedfb3
--- /dev/null
+++ b/2-ui/1-document/14-styles-and-classes/2-create-notification/task.md
@@ -0,0 +1,41 @@
+# Создать уведомление
+
+[importance 5]
+
+Напишите функцию `showNotification(options)`, которая показывает уведомление, пропадающее через 1.5 сек. 
+
+Описание функции:
+
+```js
+/**
+ * Показывает уведомление, пропадающее через 1.5 сек
+ * 
+ * @param options.top {number} вертикальный отступ, в px
+ * @param options.right {number} правый отступ, в px
+ * @param options.cssText {string} строка стиля
+ * @param options.className {string} CSS-класс 
+ * @param options.html {string} HTML-текст для показа
+ */
+function showNotification(options) { 
+  // ваш код
+}
+```
+
+Пример использования:
+
+```js
+// покажет элемент с текстом "Привет" и классом welcome справа-сверху окна
+showNotification({
+  top: 10,
+  right: 10,
+  html: "Привет",
+  className: "welcome"
+});
+```
+
+[demo src="solution"]
+
+Элемент уведомления должен иметь CSS-класс `notification`, к которому добавляется класс из `options.className`, если есть. Исходный документ содержит готовые стили.
+
+[edit src="source" task/]
+
diff --git a/2-ui/1-document/14-styles-and-classes/article.md b/2-ui/1-document/14-styles-and-classes/article.md
new file mode 100644
index 00000000..371e5962
--- /dev/null
+++ b/2-ui/1-document/14-styles-and-classes/article.md
@@ -0,0 +1,343 @@
+# Стили, getComputedStyle
+
+Эта глава -- о свойствах стиля, получении о них информации и изменении при помощи JavaScript.
+ 	 	
+Перед прочтением убедитесь, что хорошо знакомы с <a href="http://www.w3.org/TR/CSS2/box.html">блочной моделью CSS</a> и понимаете, что такое `padding`, `margin`, `border`.
+ 	 	
+[cut]
+
+## Объект стилей style   
+
+Объект `element.style` дает доступ к стилю элемента на чтение и запись.
+
+С его помощью можно изменять большинство CSS-свойств, например `element.style.width='100px'` работает так, как будто у элемента в атрибуте прописано `style="width:100px"`. 
+
+[warn header="Единицы измерения обязательны в `style`"]
+Об этом иногда забывают, но в `style` так же, как и в CSS, нужно указывать единицы измерения, например `px`. 
+
+Ни в коем случае не просто `elem.style.width = 100` -- работать не будет.
+[/warn]
+
+**Для свойств, названия которых состоят из нескольких слов, используется вотТакаяЗапись:**
+
+```js
+background-color  => elem.style.backgroundColor
+z-index           => elem.style.zIndex
+border-left-width => elem.style.borderLeftWidth
+```
+
+Пример использования `style`:
+
+```js
+//+ run
+document.body.style.backgroundColor = prompt('background color?', 'green');
+```
+
+[warn header="`style.cssFloat` вместо `style.float`"]
+Исключением является свойство `float`. В старом стандарте JavaScript слово `"float"` было зарезервировано и недоступно для использования в качестве свойства объекта. Поэтому используется `element.style.cssFloat`.
+[/warn]
+
+[smart header="Свойства с префиксами"]
+Специфические свойства браузеров, типа `-moz-border-radius`, `-webkit-border-radius`, записываются следующим способом:
+
+```js
+button.style.MozBorderRadius = '5px';
+button.style.WebkitBorderRadius = '5px';
+```
+
+То есть, каждый дефис дает большую букву. В этом смысле преобразование -- такое же, как для обычных свойств.
+[/smart]
+
+**Чтобы сбросить поставленный стиль, присваивают в `style` пустую строку: `elem.style.width=""`.**
+
+При сбросе свойства `style` стиль будет взят из CSS.
+
+Например, для того, чтобы спрятать элемент, можно присвоить: `elem.style.display = "none"`. 
+
+А вот чтобы показать его обратно -- не обязательно явно указывать другой `elem.style.display = "block"`! Можно просто снять поставленный стиль: `elem.style.display = ""`.
+
+```js
+//+ run
+// если запустить этот код, то <body> "мигнёт"
+document.body.style.display = "none";
+
+setTimeout(function() {
+  document.body.style.display = "";
+}, 1000);
+```
+
+**Стиль в `style` находится в формате браузера, а не в том, в котором его присвоили.**
+
+Например:
+
+```html
+<!--+ run height=100 -->
+<body>
+  <script> 
+*!*
+    document.body.style.margin = '20px';
+    alert(document.body.style.marginTop); // 20px! 
+*/!*
+
+*!*
+    document.body.style.color = '#abc';
+    alert(document.body.style.color); // rgb(170, 187, 204) 
+*/!*
+  </script>
+</body>
+```
+
+Обратите внимание на то, как браузер "распаковал" свойство `style.margin`, предоставив для чтения `style.marginTop`. То же самое произойдет и для `border`, `background` и т.д.
+
+
+[warn header="Свойство `style` мы используем лишь там, где не работают классы"]
+В большинстве случаев внешний вид элементов задаётся классами. А JavaScript добавляет или удаляет их. Такой код красив и гибок, дизайн можно легко изменять.
+
+Свойство `style` нужно использовать лишь там, где классы  не подходят, например если точное значение цвета/отступа/высоты... Вычисляется в JavaScript.
+[/warn]
+
+
+## Строка стилей style.cssText   
+
+Свойство `style` является специальным объектом, ему нельзя присваивать строку. 
+
+Запись `div.style="color:blue"` работать не будет. Но как же, всё-таки, поставить свойство стиля, если хочется задать его строкой?
+
+Можно попробовать использовать атрибут: `elem.setAttribute("style", ...)`, но самым правильным и, главное, кросс-браузерным (с учётом старых IE) решением такой задачи будет использование свойства `style.cssText`. 
+
+**Свойство `style.cssText` позволяет поставить стиль целиком в виде строки.**
+
+Например:
+
+```html
+<!--+ run -->
+<div>Button</div>
+
+<script>
+  var div = document.body.children[0];
+ 
+  div.style.cssText="*!*color: red !important;*/!* \
+    background-color: yellow; \
+    width: 100px; \
+    text-align: center; \
+    *!*blabla: 5; \*/!*
+  ";
+
+  alert(div.style.cssText);
+</script>
+```
+
+Браузер разбирает строку `style.cssText` и применяет известные ему свойства. Нет никаких ограничений на запись несуществующих свойств, но если указать свойство `blabla` -- большинство браузеров его просто проигнорируют.
+
+**При установке `style.cssText` все существующие свойства `style` перезаписываются.** 
+
+Поэтому, по возможности, во избежание конфликта, присваивают более конкретные подсвойства `style`: `style.color`, `style.width` и т.п, а `style.cssText` используют для более короткой записи, когда это заведомо безопасно.
+
+## Чтение стиля из style
+
+Записать в стиль очень просто. А как прочитать?
+
+Например, мы хотим узнать размер, отступы элемента, его цвет... Как это сделать?
+
+**Свойство `style` содержит лишь тот стиль, который указан в атрибуте элемента, без учёта каскада CSS.**
+
+Вот так `style` уже ничего не увидит:
+
+```html
+<!--+ run height=100 -->
+<head>
+  <style> body { color: red; margin: 5px } </style>
+</head>
+<body>
+
+  Красный текст
+  <script> 
+*!*
+    alert(document.body.style.color); //в большинстве браузеров
+    alert(document.body.style.marginTop); //  ничего не выведет
+*/!*
+  </script>
+</body>
+```
+
+## Стиль из getComputedStyle   
+
+Итак, свойство `style` дает доступ только к той информации, которая хранится в `elem.style`. 
+
+Он не скажет ничего об отступе, если он появился в результате наложения CSS или встроенных стилей браузера:
+
+А если мы хотим, например, сделать анимацию и плавно увеличивать `marginTop` от текущего значения? Как нам сделать это? Ведь для начала нам надо это текущее значение получить.
+
+**Для того, чтобы получить текущее используемое значение свойства, используется метод `window.getComputedStyle`, описанный в стандарте <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html">DOM Level 2</a>.**
+
+Его синтаксис таков:
+
+```js
+getComputedStyle(element, pseudo)
+```
+
+<dl>
+<dt>element</dt>
+<dd>Элемент, значения для которого нужно получить</dd>
+<dt>pseudo</dt>
+<dd>Указывается, если нужен стиль псевдо-элемента, например `"::before"`. Пустая строка означает сам элемент.</dd>
+</dl>
+
+Поддерживается всеми браузерами, кроме IE<9. Следующий код будет работать во всех не-IE браузерах и в IE9+:
+
+```html
+<!--+ run height=100 -->
+<style>
+  body { margin: 10px }
+</style>
+<body>
+
+  <script> 
+    var computedStyle = getComputedStyle(document.body, '');
+    alert(computedStyle.marginTop);  // выведет отступ в пикселях
+    alert(computedStyle.color);  // выведет цвет 
+  </script>
+
+</body>
+```
+
+[smart header="Вычисленное (computed) и окончательное (resolved) значения"]
+В CSS есть две концепции:
+<ol>
+<li>*Вычисленное* (computed) значение -- это то, которое получено после применения всех правил CSS и CSS-наследования. Например, `width: auto` или `font-size: 125%`.</li>
+<li>*Окончательное* ([resolved](http://dev.w3.org/csswg/cssom/#resolved-values)) значение -- непосредственно применяемое к элементу. При этом все размеры приводятся к пикселям, например `width: 212px` или `font-size: 16px`. В некоторых браузерах пиксели могут быть дробными.</li>
+</ol>
+Когда-то `getComputedStyle` задумывалось для возврата вычисленного значения, но со временем оказалось, что окончательное гораздо удобнее. Поэтому сейчас в целом все значения возвращаются именно такие, кроме некоторых небольших глюков в браузерах, которые постепенно вычищаются.
+[/smart]
+
+[warn header="`getComputedStyle` требует полное свойство!"]
+Для правильного получения значения нужно указать точное свойство. Например: `paddingLeft`, `marginTop`, `borderLeftWidth`.
+
+**При обращении к сокращенному: `padding`, `margin`, `border` -- правильный результат не гарантируется.**
+
+Действительно, допустим свойства `paddingLeft/paddingTop` взяты из разных классов CSS. Браузер не обязан объединять их в одно свойство `padding`. Иногда, в простейших случаях, когда свойство задано сразу целиком, `getComputedStyle`  сработает для сокращённого свойства, но не во всех браузерах. 
+
+Например, некоторые браузеры (Chrome) выведут `10px` в документе ниже, а некоторые (Firefox) -- нет:
+
+```html
+<!--+ run -->
+<style>
+  body {
+    margin: 10px;
+  }
+</style>
+<script>
+  var style = getComputedStyle(document.body, '');
+  alert( style.margin ); // в Firefox пустая строка
+</script>
+```
+
+[/warn]
+
+
+[smart header="Стили посещенных ссылок -- тайна!"]
+У посещенных ссылок может быть другой цвет, фон, чем у обычных. Это можно поставить в CSS с помощью псевдокласса `:visited`. 
+
+Но `getComputedStyle` не дает доступ к этой информации, чтобы произвольная страница не могла определить, посещал ли пользователь ту или иную ссылку. 
+
+Кроме того, большинство браузеров запрещают применять к `:visited` CSS-стили, которые могут изменить геометрию элемента, чтобы даже окольным путем нельзя было это понять. В целях безопасности. 
+[/smart]
+
+## currentStyle для IE8-
+
+В IE8- нет `getComputedStyle`, но у элементов есть свойство <a href="http://msdn.microsoft.com/en-us/library/ms536497.aspx">currentStyle</a>, которое возвращает вычисленное (computed) значение: уже с учётом CSS-каскада, но не всегда в окончательном формате.
+
+Чтобы код работал и в старых и новых браузерах, обычно пишут кросс-браузерный код, наподобие такого:
+
+```js
+function getStyle(elem) {
+  return window.getComputedStyle ? getComputedStyle(elem, "") : elem.currentStyle;
+}
+```
+
+Если вы откроете такой документ в IE8-, то размеры будут в процентах, а в современных браузерах -- в пикселях.
+
+```html
+<!--+ run height=100 -->
+<style>
+  body { margin: 10% }
+</style>
+<body>
+  <script> 
+    var elem = document.body;
+
+    function getStyle(elem) {
+      return window.getComputedStyle ? getComputedStyle(elem, "") : elem.currentStyle;
+    }
+
+    var marginTop = getStyle(elem).marginTop;
+    alert(marginTop); // IE8-: 10%, иначе пиксели
+  </script>
+</body>
+```
+
+[smart header="IE8-: перевод `pt,em,%` из `currentStyle` в пиксели"]
+Эта информация -- дополнительная, она не обязательна для освоения.
+
+В IE для того, чтобы получить из процентов реальное значение в пикселях существует метод "runtimeStyle+pixel", [описанный Дином Эдвардсом](http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291).
+
+Он основан на свойствах `runtimeStyle` и `pixelLeft`, работающих только в IE.
+
+В следующем примере функция `getIEComputedStyle(elem, prop)` получает значение в пикселях для свойства `prop`, используя `elem.currentStyle` и метод Дина Эдвардса.
+
+Если вам интересно, как он работает, ознакомьтесь со свойствами с <a href="http://msdn.microsoft.com/en-us/library/ms535889(v=vs.85).aspx">runtimeStyle</a> и <a href="http://msdn.microsoft.com/en-us/library/ms531129%28VS.85%29.aspx">pixelLeft</a> в MSDN и раскройте код.
+
+```js
+//+ src="getIEComputedStyle.js" hide="Раскрыть код"
+
+```
+
+<script src="/files/tutorial/browser/dom/getIEComputedStyle.js"></script>
+
+Рабочий пример (только IE):
+
+```html
+<style> #margin-test { margin: 1%; border: 1px solid black; } </style>
+<div id="margin-test">Тестовый элемент с margin 1%</div>
+
+<script>
+  var elem = document.getElementById('margin-test');
+  if (!elem.getComputedStyle) // старые IE
+    document.write(getIEComputedStyle(elem, 'marginTop'));
+  else 
+    document.write('Пример работает только в IE<9');
+</script>
+```
+
+[pre]
+<style> #margin-test { margin: 1%; border: 1px solid black; } </style>
+<div id="margin-test">Тестовый элемент с margin 1%</div>
+<i>
+<script>
+  var elem = document.getElementById('margin-test');
+  if (!window.getComputedStyle) // старые IE
+    document.write(getIEComputedStyle(elem, 'marginTop'));
+  else 
+    document.write('Пример работает только в IE<9');
+</script>
+</i>
+[/pre]
+Современные Javascript-фреймворки используют этот прием для эмуляции `getComputedStyle` в старых IE.
+[/smart]
+
+
+## Итого
+
+Все DOM-элементы предоставляют следующие свойства.
+
+<ul>
+<li>Свойство `style` -- это объект, в котором CSS-свойства пишутся `вотТакВот`. Чтение и изменение его свойств -- это, по сути, работа с компонентами атрибута `style`.</li>
+<li>`style.cssText` -- строка стилей для чтения или записи. Аналог полного атрибута `style`.</li>
+
+<li>Свойство `currentStyle`(IE8-) и метод `getComputedStyle` (IE9+, стандарт) позволяют получить реальное, применённое сейчас к элементу свойство стиля с учётом CSS-каскада и браузерных стилей по умолчанию.
+
+При этом `currentStyle` возвращает значение из CSS, до окончательных вычислений, а `getComputedStyle` -- окончательное, непосредственно применённое к элементу (как правило).</li>
+</ul>
+
+Более полная информация о `style`, включающая другие, реже используемые методы работы с ним, доступна здесь: [CSSStyleDeclaration](https://developer.mozilla.org/en-US/docs/DOM/CSSStyleDeclaration).
+
diff --git a/2-ui/1-document/14-styles-and-classes/getIEComputedStyle.js b/2-ui/1-document/14-styles-and-classes/getIEComputedStyle.js
new file mode 100755
index 00000000..df64388e
--- /dev/null
+++ b/2-ui/1-document/14-styles-and-classes/getIEComputedStyle.js
@@ -0,0 +1,18 @@
+function getIEComputedStyle(elem, prop) {
+  var value = elem.currentStyle[prop] || 0
+
+  // we use 'left' property as a place holder so backup values
+  var leftCopy = elem.style.left
+  var runtimeLeftCopy = elem.runtimeStyle.left
+
+  // assign to runtimeStyle and get pixel value
+  elem.runtimeStyle.left = elem.currentStyle.left
+  elem.style.left = (prop === "fontSize") ? "1em" : value
+  value = elem.style.pixelLeft + "px";
+
+  // restore values for left
+  elem.style.left = leftCopy 
+  elem.runtimeStyle.left = runtimeLeftCopy 
+ 
+  return value
+}
diff --git a/2-ui/1-document/15-metrics/1-get-scroll-height-bottom/solution.md b/2-ui/1-document/15-metrics/1-get-scroll-height-bottom/solution.md
new file mode 100644
index 00000000..4d84cf8f
--- /dev/null
+++ b/2-ui/1-document/15-metrics/1-get-scroll-height-bottom/solution.md
@@ -0,0 +1 @@
+Решение: `elem.scrollHeight - elem.scrollTop - elem.clientHeight`.
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/1-get-scroll-height-bottom/task.md b/2-ui/1-document/15-metrics/1-get-scroll-height-bottom/task.md
new file mode 100644
index 00000000..944fe06c
--- /dev/null
+++ b/2-ui/1-document/15-metrics/1-get-scroll-height-bottom/task.md
@@ -0,0 +1,9 @@
+# Найти размер прокрутки снизу
+
+[importance 5]
+
+Свойство `elem.scrollTop` содержит размер прокрученной области при отсчете сверху. А как подсчитать его снизу?
+
+Напишите соответствующее выражение для произвольного элемента `elem`. 
+
+Проверьте: если прокрутки нет или элемент полностью прокручен -- оно должно давать ноль.
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/2-scrollbar-width/solution.md b/2-ui/1-document/15-metrics/2-scrollbar-width/solution.md
new file mode 100644
index 00000000..4dda1121
--- /dev/null
+++ b/2-ui/1-document/15-metrics/2-scrollbar-width/solution.md
@@ -0,0 +1,23 @@
+Создадим элемент с прокруткой, но без `padding`. Тогда разница между его полной шириной `offsetWidth` и внутренней `clientWidth` будет равна как раз прокрутке:
+
+```js
+//+ run
+// создадим элемент с прокруткой
+var div = document.createElement('div');
+      
+div.style.overflowY = 'scroll';
+div.style.width =  '50px';
+div.style.height = '50px';
+
+// при display:none размеры нельзя узнать
+// нужно, чтобы элемент был видим, 
+// visibility:hidden - можно, т.к. сохраняет геометрию
+div.style.visibility = 'hidden';
+
+document.body.appendChild(div);
+var scrollWidth = div.offsetWidth - div.clientWidth;
+document.body.removeChild(div);
+
+alert( scrollWidth );
+```
+
diff --git a/2-ui/1-document/15-metrics/2-scrollbar-width/task.md b/2-ui/1-document/15-metrics/2-scrollbar-width/task.md
new file mode 100644
index 00000000..77867ac8
--- /dev/null
+++ b/2-ui/1-document/15-metrics/2-scrollbar-width/task.md
@@ -0,0 +1,7 @@
+# Узнать ширину полосы прокрутки
+
+[importance 3]
+
+Напишите код, который возвращает ширину стандартной полосы прокрутки. Именно самой полосы, где ползунок. Обычно она равна `16px`, в редких и мобильных браузерах может колебаться от `14px` до `18px`, а кое-где даже равна `0px`.
+
+P.S. Ваш код должен работать на любом HTML-документе, независимо от его содержимого.
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/3-div-placeholder/solution.md b/2-ui/1-document/15-metrics/3-div-placeholder/solution.md
new file mode 100644
index 00000000..b6cf804d
--- /dev/null
+++ b/2-ui/1-document/15-metrics/3-div-placeholder/solution.md
@@ -0,0 +1,31 @@
+Нам нужно создать `div` с такими же размерами и вставить его на место "переезжающего".
+
+Один из вариантов -- это просто клонировать элемент.
+
+Если делать это при помощи `div.cloneNode(true)`, то склонируется все содержимое, которого может быть много. Обычно нам это не нужно, поэтому можно использовать `div.cloneNode(false)` для клонирования элемента со стилями, и потом поправить его `width/height`. 
+
+Можно и просто создать новый `div` и поставить ему нужные размеры. 
+
+**Всё, кроме `margin`, можно получить из свойств DOM-элемента, а `margin` -- только через `getComputedStyle`.**
+
+Причём `margin` мы обязаны поставить, так как иначе элемент не будет отодвинут от внешних.
+
+Код:
+
+```js
+var div = document.getElementById('moving-div');
+
+var placeHolder = document.createElement('div');
+placeHolder.style.height = div.offsetHeight + 'px';
+// можно и width, но в этом примере это не обязательно
+
+// IE || другой браузер
+var computedStyle = div.currentStyle ||  getComputedStyle(div, '');
+
+placeHolder.style.marginTop = computedStyle.marginTop;          // (1)
+placeHolder.style.marginBottom = computedStyle.marginBottom;
+```
+
+В строке `(1)` использование полного название свойства `"marginTop"` гарантирует, что полученное значение будет корректным.
+
+[edit src="solution"]Открыть решение в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/3-div-placeholder/solution.view/index.html b/2-ui/1-document/15-metrics/3-div-placeholder/solution.view/index.html
new file mode 100755
index 00000000..be9ce325
--- /dev/null
+++ b/2-ui/1-document/15-metrics/3-div-placeholder/solution.view/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style> 
+  #moving-div { 
+    border: 5px groove green; 
+    padding: 5px; 
+    margin: 10px;
+    background-color: yellow;
+  }
+</style>
+</head>
+<body>
+
+Before Before Before
+
+<div id="moving-div">
+Text Text Text<br>
+Text Text Text<br>
+</div>
+
+After After After
+
+<script>
+var div = document.getElementById('moving-div')
+
+var placeHolder = document.createElement('div')
+placeHolder.style.height = div.offsetHeight + 'px'
+
+var computedStyle = div.currentStyle || getComputedStyle(div, null)
+
+placeHolder.style.marginTop = computedStyle.marginTop // full prop name
+placeHolder.style.marginBottom = computedStyle.marginBottom
+
+// highlight it for demo purposes 
+placeHolder.style.backgroundColor = '#C0C0C0'
+
+document.body.insertBefore(placeHolder, div)
+
+div.style.position = 'absolute'
+div.style.right = div.style.top = 0
+
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/15-metrics/3-div-placeholder/source.view/index.html b/2-ui/1-document/15-metrics/3-div-placeholder/source.view/index.html
new file mode 100755
index 00000000..de20a8c1
--- /dev/null
+++ b/2-ui/1-document/15-metrics/3-div-placeholder/source.view/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style> 
+  #moving-div { 
+    border: 5px groove green; 
+    background-color: yellow;
+    padding: 5px; 
+    margin: 10px;
+  }
+</style>
+</head>
+<body>
+
+Before Before Before
+
+<div id="moving-div">
+Text Text Text<br>
+Text Text Text<br>
+</div>
+
+After After After
+
+<script>
+// .. Add your code here 
+
+var div = document.getElementById('moving-div')
+div.style.position = 'absolute'
+div.style.right = div.style.top = 0
+</script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/15-metrics/3-div-placeholder/task.md b/2-ui/1-document/15-metrics/3-div-placeholder/task.md
new file mode 100644
index 00000000..f814304d
--- /dev/null
+++ b/2-ui/1-document/15-metrics/3-div-placeholder/task.md
@@ -0,0 +1,50 @@
+# Подменить div на другой с таким же размером
+
+[importance 3]
+
+Посмотрим следующий случай из жизни. Был текст, который, в частности, содержал `div` с зелеными границами:
+
+```html
+<!--+ run -->
+<style> 
+  #moving-div { 
+    border: 5px groove green; 
+    padding: 5px; 
+    margin: 10px;
+    background-color: yellow;
+  }
+</style>
+
+Before Before Before
+
+<div id="moving-div">
+Text Text Text<br>
+Text Text Text<br>
+</div>
+
+After After After
+```
+
+Программист Валера из вашей команды написал код, который позиционирует его абсолютно и смещает в правый верхний угол. Вот этот код:
+
+```js
+var div = document.getElementById('moving-div');
+div.style.position = 'absolute';
+div.style.right = div.style.top = 0;
+```
+
+Побочным результатом явилось смещение текста, который раньше шел после `DIV`. Теперь он поднялся вверх:
+[iframe height=90 src="source"]
+
+**Допишите код Валеры, сделав так, чтобы текст оставался на своем месте после того, как `DIV` будет смещен.**
+
+Сделайте это путем создания вспомогательного `DIV` с теми же размерами (`width`, `height`, `border`, `margin`, `padding`), что и у желтого `DIV`. Используйте только JavaScript, без CSS.
+
+Должно быть так (новому блоку задан фоновый цвет для демонстрации):
+
+[iframe height=140 src="solution"]
+
+[edit src="source" task/]
+
+
+
diff --git a/2-ui/1-document/15-metrics/4-put-ball-in-center/ball-half/index.html b/2-ui/1-document/15-metrics/4-put-ball-in-center/ball-half/index.html
new file mode 100755
index 00000000..818ab431
--- /dev/null
+++ b/2-ui/1-document/15-metrics/4-put-ball-in-center/ball-half/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+  #field {
+    width: 200px;
+    border: 10px groove black;
+    background-color: #00FF00;
+    position: relative;
+  }
+
+  #ball {
+    position: absolute;
+  }
+</style>
+</head>
+<body>
+
+
+<div id="field">
+<img src="http://js.cx/clipart/ball.gif" id="ball">
+. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+</div>
+
+
+<script>
+var ball = document.getElementById('ball')
+var field = document.getElementById('field')
+
+// ball.offsetWidth=0 before image loaded!
+// to fix: set width
+ball.style.left = Math.round(field.clientWidth / 2)+'px'
+ball.style.top = Math.round(field.clientHeight / 2)+'px'
+
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/15-metrics/4-put-ball-in-center/field.png b/2-ui/1-document/15-metrics/4-put-ball-in-center/field.png
new file mode 100755
index 00000000..6d1fefb9
Binary files /dev/null and b/2-ui/1-document/15-metrics/4-put-ball-in-center/field.png differ
diff --git a/2-ui/1-document/15-metrics/4-put-ball-in-center/solution.md b/2-ui/1-document/15-metrics/4-put-ball-in-center/solution.md
new file mode 100644
index 00000000..2dd7a7a5
--- /dev/null
+++ b/2-ui/1-document/15-metrics/4-put-ball-in-center/solution.md
@@ -0,0 +1,51 @@
+При абсолютном позиционировании мяча внутри поля его координаты `left/top` отсчитываются от **внутреннего** угла поля, например верхнего-левого:
+
+<img src="field.png">
+
+Метрики для внутренней зоны поля -- это `clientWidth/Height`.
+
+Центр - это `(clientWidth/2, clientHeight/2)`. 
+
+Но если мы установим мячу такие значения `ball.style.left/top`, то в центре будет не сам мяч, а его левый верхний угол:
+
+```js
+var ball = document.getElementById('ball');
+var field = document.getElementById('field');
+
+ball.style.left = Math.round(field.clientWidth / 2)+'px';
+ball.style.top = Math.round(field.clientHeight / 2)+'px';
+```
+
+[iframe hide="Нажмите, чтобы посмотреть текущий результат" height=180 src="ball-half"]
+
+Для того, чтобы центр мяча находился в центре поля, нам нужно сместить мяч на половину его ширины влево и на половину его высоты вверх.
+
+```js
+var ball = document.getElementById('ball');
+var field = document.getElementById('field');
+
+ball.style.left = Math.round(field.clientWidth/2 - ball.offsetWidth/2)+'px';
+ball.style.top = Math.round(field.clientHeight/2 - ball.offsetHeight/2)+'px';
+```
+
+**Внимание, подводный камень!**
+
+Код выше стабильно работать не будет, потому что `IMG` идет без ширины/высоты:
+
+```html
+<img src="ball.gif" id="ball">
+```
+
+**Высота и ширина изображения неизвестны браузеру до тех пор, пока оно не загрузится, если размер не указан явно.** 
+
+После первой загрузки изображение уже будет в кеше браузера, и его размеры будут известны. Но когда браузер впервые видит документ -- он ничего не знает о картинке, поэтому значение `ball.offsetWidth` равно `0`. Вычислить координаты невозможно.
+
+Чтобы это исправить, добавим `width/height` к картинке:
+
+```html
+<img src="ball.gif" *!*width="40" height="40"*/!* id="ball">
+```
+
+Теперь браузер всегда знает ширину и высоту, так что все работает. Тот же эффект дало бы указание размеров в CSS.
+
+[edit src="solution"]Полный код решения[/edit]
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/4-put-ball-in-center/solution.view/index.html b/2-ui/1-document/15-metrics/4-put-ball-in-center/solution.view/index.html
new file mode 100755
index 00000000..e1c0a409
--- /dev/null
+++ b/2-ui/1-document/15-metrics/4-put-ball-in-center/solution.view/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style> 
+  #field { 
+    width: 200px;
+    border: 10px groove black;
+    background-color: #00FF00;
+    position: relative;
+  }
+  
+  #ball {
+    position: absolute;
+  }
+</style>
+</head>
+<body>
+
+
+<div id="field">
+<img src="http://js.cx/clipart/ball.gif" width="40" height="40" id="ball">
+. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
+</div>
+
+
+<script>
+var ball = document.getElementById('ball')
+var field = document.getElementById('field')
+
+// ball.offsetWidth=0 before image loaded! 
+// to fix: set width
+ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2)+'px'
+ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2)+'px'
+
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/15-metrics/4-put-ball-in-center/source.view/index.html b/2-ui/1-document/15-metrics/4-put-ball-in-center/source.view/index.html
new file mode 100755
index 00000000..99a6d4fc
--- /dev/null
+++ b/2-ui/1-document/15-metrics/4-put-ball-in-center/source.view/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style> 
+  #field { 
+    width: 200px;
+    border: 10px groove black;
+    background-color: #00FF00;
+    position: relative;
+  }
+  
+  #ball {
+    position: absolute;
+  }
+</style>
+</head>
+<body>
+
+
+<div id="field">
+<img src="http://js.cx/clipart/ball.gif" id="ball">
+. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
+</div>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/15-metrics/4-put-ball-in-center/task.md b/2-ui/1-document/15-metrics/4-put-ball-in-center/task.md
new file mode 100644
index 00000000..4c07cb6c
--- /dev/null
+++ b/2-ui/1-document/15-metrics/4-put-ball-in-center/task.md
@@ -0,0 +1,21 @@
+# Поместите мяч в центр поля
+
+[importance 5]
+
+Поместите мяч в центр поля.
+
+Исходный документ выглядит так:
+[iframe src="source" edit link]
+
+**Используйте JavaScript, чтобы поместить мяч в центр:**
+[iframe src="solution"]
+
+<ul>
+<li>Менять CSS нельзя, мяч должен переносить в центр ваш скрипт, через установку нужных стилей элемента.</li>
+<li>Код не должен быть привязан к конкретному размеру мяча.</li>
+<li>Обратите внимание: мяч должен быть строго по центру! Независимо от местоположения поля и ширины его рамки.</li>
+</ul>
+
+[edit src="source" task/]
+
+P.S. Да, это можно сделать при помощи чистого CSS, но задача именно на JavaScript. Далее будет развитие темы и более сложные ситуации, когда JavaScript будет уже точно необходим.
diff --git a/2-ui/1-document/15-metrics/5-expand-element/solution.md b/2-ui/1-document/15-metrics/5-expand-element/solution.md
new file mode 100644
index 00000000..1c4e554b
--- /dev/null
+++ b/2-ui/1-document/15-metrics/5-expand-element/solution.md
@@ -0,0 +1,45 @@
+**Вначале рассмотрим неверный вариант.**
+
+Он выглядит так:
+
+```js
+elem.style.width = '100%';
+```
+
+Если вы его попробуете, то увидите, что элемент начинает вылезать за рамки родителя.
+
+Так происходит потому, что ширина -- это то, что *внутри `padding`*. То есть, ставя ширину в `100%`, вы говорите: "внутренняя область должна занимать `100%` доступной ширины". А на `padding` остаётся `0%`. В результате поля вылезают наружу.
+
+**Правильное решение через `clientWidth`.**
+
+Доступную внутреннюю ширину родителя можно получить, вычитая `padding` из `clientWidth`, и присвоить элементу:
+
+```js
+var bodyClientWidth = document.body.clientWidth;
+
+var style = window.getComputedStyle ? getComputedStyle(elem, '') : elem.currentStyle;
+
+*!*
+var bodyInnerWidth = bodyClientWidth - parseInt(style.paddingLeft) - parseInt(style.paddingRight);
+*/!*
+
+elem.style.width = bodyInnerWidth + 'px';
+```
+
+Этот вариант сломается, если в IE<9 значение `padding` указано не в пикселях. Получение пикселей из процентов и других единиц измерения рассмотрено в главе [](/styles-and-classes).
+
+**Правильный вариант с CSS.**
+
+**Самое лучшее решение получится, если вспомнить, что элемент и сам рад растянуться по всей доступной ширине, и делает это по умолчанию.**
+
+Достаточно вернуть ему стандартный алгоритм вычисленя ширины, установив `width: auto`:
+
+```js
+elem.style.width = 'auto';
+```
+
+Но.. **Это не будет работать для элементов, которые сами по себе не растягиваются**, например в случае `position: absolute` или `float`.
+
+Такой элемент можно расширить, используя предыдущее решение.
+
+[edit src="solution"]Документ с обоими решениями[/edit]
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/5-expand-element/solution.view/index.html b/2-ui/1-document/15-metrics/5-expand-element/solution.view/index.html
new file mode 100755
index 00000000..a2ab1d63
--- /dev/null
+++ b/2-ui/1-document/15-metrics/5-expand-element/solution.view/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    #elem {
+        width: 200px;
+        height: 150px;
+        background-color: red;
+        padding: 20px;
+        overflow: auto;
+        /* position: absolute */
+    }
+
+    body {
+      border: 1px solid black;
+    }
+
+  </style>
+</head>
+<body>
+
+<div id="elem">
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+</div>
+
+<script>
+var elem = document.getElementById("elem");
+
+// неверно!
+//elem.style.width = '100%';
+
+// верно (решение с CSS)
+//elem.style.width = 'auto';
+
+// верно (решение с JS), т.к. padding указан  px
+// если паддинг в процентах, например 10%, то в IE<9 currentStyle вернет 10%,
+// и нужно преобразовать % в px через runtimeStyle
+var bodyWidth = document.body.clientWidth;
+
+var style = window.getComputedStyle ? getComputedStyle(elem, '') : elem.currentStyle;
+
+var bodyInnerWidth = bodyWidth - parseInt(style.paddingLeft) - parseInt(style.paddingRight);
+
+elem.style.width =  bodyInnerWidth + 'px';
+
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/15-metrics/5-expand-element/source.view/index.html b/2-ui/1-document/15-metrics/5-expand-element/source.view/index.html
new file mode 100755
index 00000000..d2c10ef0
--- /dev/null
+++ b/2-ui/1-document/15-metrics/5-expand-element/source.view/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    #elem {
+        width: 200px;
+        height: 150px;
+        background-color: red;
+        padding: 20px;
+        overflow: auto;
+    }
+
+    body {
+      border: 1px solid black;
+    }
+
+  </style>
+</head>
+<body>
+
+<div id="elem">
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+</div>
+
+<script>
+var elem = document.getElementById("elem");
+
+// ... ваш код
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/15-metrics/5-expand-element/task.md b/2-ui/1-document/15-metrics/5-expand-element/task.md
new file mode 100644
index 00000000..4a8f9293
--- /dev/null
+++ b/2-ui/1-document/15-metrics/5-expand-element/task.md
@@ -0,0 +1,18 @@
+# Расширить элемент
+
+[importance 3]
+
+В `BODY` есть элемент `DIV` с заданной шириной `width`. 
+
+Задача -- написать код, который "распахнет" `DIV` по ширине на всю страницу.
+
+Исходный документ (`DIV` -- красный): 
+[iframe height=220 src="source"]
+
+[edit src="source" task/]
+
+Расширить нужно точно по ширине, чтобы красный `DIV` не вылез за границы `BODY`.
+
+P.S. Пользоваться следует исключительно средствами JS, при этом не подглядывая в стили. То есть, код должен быть универсален и не ломаться, если цифры в CSS станут другими.
+
+P.P.S. После того, как решите... Будет ли ваше решение работать, если у красного `DIV` стоит `position:absolute`? Если нет, то почему и как его поправить?
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/6-width-vs-clientwidth/solution.md b/2-ui/1-document/15-metrics/6-width-vs-clientwidth/solution.md
new file mode 100644
index 00000000..60b19846
--- /dev/null
+++ b/2-ui/1-document/15-metrics/6-width-vs-clientwidth/solution.md
@@ -0,0 +1,11 @@
+Отличия:
+
+<ol>
+<li>`getComputedStyle` не работает в IE8-.</li>
+<li>`clientWidth` возвращает число, а `getComputedStyle(...).width` -- в `px`.</li>
+<li>`getComputedStyle` не всегда даст ширину, он может вернуть, к примеру, `"auto"` для инлайнового элемента.</li> 
+<li>`clientWidth` соответствует внутренней видимой области элемента, *включая `padding`, а CSS-ширина `width`, при стандартном значении [box-sizing](/box-sizing), соответствует зоне *внутри `padding`*.</li>
+<li>Если есть полоса прокрутки, то некоторые браузеры включают её ширину в `width`, а некоторые -- нет. 
+
+Свойство `clientWidth`, с другой стороны, полностью кросс-браузерно. Оно всегда обозначает размер *за вычетом прокрутки*, т.е. реально доступный для содержимого.</li>
+</ol>
diff --git a/2-ui/1-document/15-metrics/6-width-vs-clientwidth/task.md b/2-ui/1-document/15-metrics/6-width-vs-clientwidth/task.md
new file mode 100644
index 00000000..0acb4dfa
--- /dev/null
+++ b/2-ui/1-document/15-metrics/6-width-vs-clientwidth/task.md
@@ -0,0 +1,7 @@
+# В чём отличие "width" и "clientWidth" ?
+
+[importance 5]
+
+В чём отличия между `getComputedStyle(elem, "").width` и `elem.clientWidth`?
+
+В решении приведены пять отличий. Постарайтесь найти столько же или больше :)
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/article.md b/2-ui/1-document/15-metrics/article.md
new file mode 100644
index 00000000..a01c3b4e
--- /dev/null
+++ b/2-ui/1-document/15-metrics/article.md
@@ -0,0 +1,276 @@
+# Размеры и прокрутка элементов 
+
+Для того, чтобы показывать элементы правильно, подгонять на нужные места страницы, управлять ими при помощи мыши, необходимо во-первых, знать CSS-позиционирование, а во-вторых -- уметь работать с "геометрией элементов" из JavaScript.
+
+В этой главе мы поговорим о размерах элементов DOM, способах их вычисления и *метриках* -- различных свойствах, которые содержат эту информацию.
+[cut]
+## Образец документа
+
+Мы будем использовать для примера блок, у которого есть рамка (border), поля (padding), отступы (margin) и прокрутка:
+
+```html
+<div id="example">
+  ...Текст...
+</div>
+<style>
+##example {
+  width: 300px;
+  height: 200px;
+
+  border: 25px solid #F0E68C; /* рамка 25px */
+
+  padding: 20px;              /* поля 20px */
+  margin: 20px;               /* отступы 20px */
+
+  overflow: auto;             /* прокрутка */
+}
+</style>
+```
+
+Результат выглядит так:
+
+<img src="css.png">
+
+Вы можете открыть документ [edit src="metric"]по этой ссылке[/edit].
+## Получение width/height из CSS
+
+Какой способ первый приходит на ум, когда есть задача определить `width/height`?
+
+Если вы внимательно читали до этого момента, то уж точно знаете, что CSS-высоту и ширину `width/height` можно установить с помощью `elem.style` и извлечь, используя `getComputedStyle()/currentStyle`, которые в подробностях  обсуждаются в главе [](/styles-and-classes).
+
+Решение может быть таким:
+
+```js
+//+ run
+var elem = document.body;
+
+var style = window.getComputedStyle ? getComputedStyle(elem, "") : elem.currentStyle;
+alert(style.width); // вывести CSS-ширину body
+```
+
+Всегда ли такой подход сработает? Увы, нет!
+
+<ol>
+<li>Во-первых, CSS-свойства `width/height` зависят от другого свойства -- `box-sizing`, которое определяет, что такое, собственно, эти ширина и высота. По умолчанию они относятся к размеру внутренней части элемента, которая лежит внутри `padding`, а если нужно узнать полную высоту/ширину?</li>
+<li>В IE8- могут быть нестыковки с единицами измерения -- как мы помним, `currentStyle` не пересчитывает размеры в пиксели.</li>
+<li>И, наконец, самое главное, свойства `width/height` могут быть равны `auto`!
+
+Например, для инлайн-элемента:
+
+```html
+<!--+ run -->
+<span id="elem">Привет!</span>
+
+<script>
+  alert( getComputedStyle(elem, "").width );  // auto
+</script>
+```
+
+Конечно, с точки зрения CSS размер `auto`  -- совершенно нормально, но нам-то в JavaScript нужен конкретный размер в пикселях, который мы сможем использовать для вычислений.
+</li>
+</ol>
+
+
+## Полоса прокрутки
+
+Полоса прокрутки -- причина многих проблем и недопониманий. Как говорится, "дьявол кроется в деталях". Недопустимо, чтобы наш код работал на элементах без прокрутки и начинал "глючить" с ней. Поэтому мы с самого начала будем её учитывать.
+
+**При наличии вертикальной полосы прокрутки -- она забирает себе часть ширины элемента.**
+
+Ширина полосы прокрутки обычно составляет около `14-18px`, в зависимости от браузера и операционной системы. Бывает и `0` для полупрозрачной прокрутки, не отъедающей место. В примере подразумевается, что прокрутка место ест, поэтому внутренняя область будет уже не `300px`, а около `284px`.
+
+**Несмотря на то, что на рисунке полоса прокрутки находится визуально в правом поле -- отнимает место она не у `padding`, а у внутренней области элемента.**
+
+...Но при этом некоторые браузеры отражают это уменьшение ширины в результате `getComputedStyle(...).width`, а некоторые -- нет. 
+
+В примере ниже в стилях указано `width:300px`. А вот `getComputedStyle` возвращает `300px/284px`, в зависимости от браузера.
+
+Если ваш браузер в принципе показывает полосу прокрутки (например, под Windows почти все браузеры так делают), то вы можете протестировать это сами, нажав на кнопку в ифрейме ниже:
+
+[iframe src="cssWidthScroll" link border=1]
+
+Описанные разночтения касаются только чтения свойства `getComputedStyle(...).width` из JavaScript, визуальное отображение корректно в обоих случаях -- ширина текста при наличии прокрутки в обоих случаях уменьшается.
+
+**Здесь и далее, мы будем понимать под `width` именно реальную ширину внутренней области (около `284px`), а не результат чтения CSS-свойства `width`, который может быть разным в зависимости от браузера/OS.**
+
+## JavaScript-метрики
+
+В JavaScript существует ряд дополнительных свойств, содержащих размеры элементов. Мы будем называть их "метриками".
+
+**Метрики JavaScript, в отличие от свойств CSS, содержат числа, всегда в пикселях и без единиц измерения на конце.**
+
+### clientWidth/Height
+
+Размер *клиентской зоны*, а именно: внутренняя область плюс `padding`.
+
+<img src="clientWidth.png">
+
+Общая ширина внутри рамки -- это `284 (width) + 20(padding left) + 20 (padding right) = 324`.
+
+Получаем:
+
+```js
+clientWidth = 284(width) + 2*20(padding) = 324
+clientHeight = 200(height) + 2*20(padding) = 240
+```
+
+Обратите внимание, в `clientHeight` входят и верхнее и нижнее поля, несмотря на то, что нижнее поле заполнено текстом.
+
+**Если `padding` нет, то `clientWidth/Height` покажет реальный размер области данных, внутри рамок и полосы прокрутки.**
+
+<img src="clientWidthNoPadding.png">
+
+### scrollWidth/Height
+
+Ширина и высота контента *с учетом прокручиваемой области*.
+
+<ul>
+<li>`scrollHeight = 723` -- полная высота, включая прокрученную область</li>
+<li>`scrollWidth = 324` -- полная ширина, включая прокрученную область</li>
+</ul>
+
+**`scrollWidth/Height` то же самое, что и `clientWidth/Height`, но включает в себя прокручиваемую область.**
+
+<img src="scrollWidth.png">
+
+Эти свойства можно использовать, чтобы "распахнуть" элемент на всю ширину/высоту:
+
+```js
+element.style.height = element.scrollHeight + 'px';
+```
+
+Нажмите на кнопку, чтобы распахнуть элемент:
+
+<div id="scrollOpen" style="width:300px;height:200px; padding: 0;overflow: auto; border:1px solid black;">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div>
+
+    <button style="padding:0" onclick="document.getElementById('scrollOpen').style.height = document.getElementById('scrollOpen').scrollHeight + 'px'">element.style.height = element.scrollHeight + 'px'</button>
+
+### scrollTop/scrollLeft
+
+Размеры текущей прокрученной части элемента -- вертикальной и горизонтальной. 
+
+Следующее изображение иллюстрирует `scrollHeight` и `scrollTop` для блока с вертикальной прокруткой.
+
+<img src="scrollTop.png">
+
+[smart header="`scrollLeft/scrollTop` можно изменять"]
+**В отличие от большинства свойств, которые доступны только для чтения, значения `scrollLeft/scrollTop` можно изменить, и браузер выполнит прокрутку элемента**.
+
+При клике на следующий элемент будет выполняться код `elem.scrollTop += 10`. Поэтому он будет прокручиваться на `10px` вниз:
+
+<div onclick="this.scrollTop+=10" style="cursor:pointer;border:1px solid black;width:100px;height:80px;overflow:auto">Кликни<br>Меня<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div>
+[/smart]
+
+
+### offsetWidth/Height
+
+Внешняя ширина/высота блока, полный размер, включая рамки, исключая внешние отступы `margin`.
+
+<ul>
+<li>`offsetWidth = 390` -- внешняя ширина блока</li>
+<li>`offsetHeight = 290` -- внешняя высота блока</li>
+</ul>
+
+<img src="offsetWidth.png">
+
+Эти свойства показывают *внешние* ширину и высоту блока, то как блок выглядит снаружи.
+
+### clientTop/Left
+
+Отступ *клиентской области* от внешнего угла блока.
+
+Другими словами, это ширина верхней/левой рамки(border) в пикселях.
+
+<ul>
+<li>`clientLeft = 25` -- ширина левой рамки</li>
+<li>`clientTop = 25` -- ширина верхней рамки</li>
+</ul>
+
+<img src="clientLeft.png">
+
+Казалось бы, зачем еще какие-то свойства, если ширину рамки можно получить напрямую из CSS? Обычно они действительно не нужны.
+
+Но есть две ситуации, когда эти свойства бывают полезны:
+
+<ol>
+<li>В случае, когда документ располагается *справа налево* (арабский язык, иврит), свойство `clientLeft` включает в себя еще и ширину *правой* полосы прокрутки.</li>
+<li>В IE&lt;8 документ, а точнее -- элемент `document.documentElement` немного смещен относительно верхнего левого угла документа. Несмотря на то, что рамки там нет, сдвиг существует и хранится в `document.body.clientLeft/clientTop` (обычно это 2 пикселя).</li>
+</ol>
+
+### offsetParent, offsetLeft/Top
+
+[warn header="Используются редко..."]
+Ситуации, когда эти свойства нужны, можно перечислить по пальцам. Они возникают действительно редко. Как правило, эти свойства используют по ошибке, потому что не знают средств правильной работы с координатами, о которых мы поговорим позже. 
+[/warn]
+
+**`offsetParent` -- это родительский элемент в смысле отображения на странице.**
+
+Когда браузер рисует страницу, то он высчитывает дерево расположения элементов, иначе говоря "дерево геометрии" или "дерево рендеринга".
+
+Обычно элементы вложены друг в друга и структура дерева рендеринга повторяет DOM.
+
+Но, к примеру, если у элемента стоит `position: absolute`, то его расположение вычисляется уже не относительно непосредственного родителя `parentNode`, а относительно ближайшего <a href="http://www.w3.org/TR/CSS21/visuren.html#position-props">позиционированного элемента</a> (т.е. свойство `position` которого не равно `static`), или `BODY`, если таковой отсутствует. 
+
+Получается, что элемент имеет одного родителя в DOM и другого -- в плане позиционирования, относительно которого он рисуется. Этот элемент и будет в свойстве `offsetParent`.
+
+**Свойства `offsetLeft/Top` задают смещение относительно `offsetParent`.**
+
+```html
+<div style="position: relative">
+  <div style="position: absolute; left: 180px; top: 180px">...</div>
+</div>
+```
+
+<img src="offsetLeft.png">
+</dd>
+</dl>
+
+
+[smart header="Метрики для невидимых элементов равны нулю."]
+
+Координаты и размеры в JavaScript устанавливаются только для *видимых* элементов.
+
+Для элементов с `display:none` или находящихся вне документа дерево рендеринга не строится. Для них метрики равны нулю. Кстати, и `offsetParent` для таких элементов тоже `null`.
+
+Это дает нам **замечательный способ для проверки, виден ли элемент**:
+
+```js
+function isHidden(elem)
+  return !elem.offsetWidth && !elem.offsetHeight;
+}
+```
+
+<ul>
+<li>Работает, даже если родителю элемента установлено свойство `display:none`.</li>
+<li>Работает для всех элементов, кроме `TR`, с которым возникают некоторые проблемы в разных браузерах. Обычно, проверяются не `TR`, поэтому всё ок :).</li>
+<li>Считает элемент видимым, даже если позиционирован за пределами экрана или  имеет свойство `visibility:hidden`.</li>
+<li>"Схлопнутый" элемент, например пустой `div` без высоты и ширины, будет считаться невидимым.</li>
+</ul>
+[/smart]
+
+
+## Итого
+
+У элементов есть следующие метрики:
+<ul>
+<li>`clientWidth/clientHeight` -- ширина/высота видимой области, включая поля, но не полосы прокрутки.</li>
+<li>`clientLeft/clientTop` -- ширина левой/верхней рамки или, точнее, сдвиг клиентской области, относительно верхнего левого угла блока.
+Используется, преимущественно, в IE<8 для вычисления сдвига `document.body`.
+</li>
+<li>`scrollWidth/scrollHeight` -- ширина/высота прокручиваемой области. Включает в себя `padding` и не включает полосы прокрутки.</li>
+<li>`scrollLeft/scrollTop` -- ширина/высота прокрученной части документа, считается от верхнего левого угла.</li>
+<li>`offsetWidth/offsetHeight` -- "внешняя" ширина/высота блока, не считая отступов.</li>
+<li>`offsetParent` -- "родитель по дереву рендеринга" -- ближайшая ячейка таблицы, body для статического позиционирования или ближайший позиционированный элемент для других типов позиционирования.</li>
+<li>`offsetLeft/offsetTop` -- позиция в пикселях левого верхнего угла блока, относительно его `offsetParent`.</li>
+</ul>
+
+Все свойства, кроме `scrollLeft/scrollTop` доступны только для чтения. Изменение этих свойств заставляет браузер прокручивать элемент.
+
+Краткая схема:
+
+<img src="summary.png">
+
+**Прокрутку *элемента* можно прочитать или изменить через свойства `scrollLeft/Top`.**
+
+В этой главе мы считали, что страница находится в режиме соответствия стандартам. В режиме совместимости -- всё так же, но некоторые старые браузеры требуют `document.body` вместо `documentElement`.
+
diff --git a/2-ui/1-document/15-metrics/clientLeft.png b/2-ui/1-document/15-metrics/clientLeft.png
new file mode 100755
index 00000000..b7bf8a34
Binary files /dev/null and b/2-ui/1-document/15-metrics/clientLeft.png differ
diff --git a/2-ui/1-document/15-metrics/clientWidth.png b/2-ui/1-document/15-metrics/clientWidth.png
new file mode 100755
index 00000000..cfc6222e
Binary files /dev/null and b/2-ui/1-document/15-metrics/clientWidth.png differ
diff --git a/2-ui/1-document/15-metrics/clientWidthNoPadding.png b/2-ui/1-document/15-metrics/clientWidthNoPadding.png
new file mode 100755
index 00000000..dc57a65a
Binary files /dev/null and b/2-ui/1-document/15-metrics/clientWidthNoPadding.png differ
diff --git a/2-ui/1-document/15-metrics/css.png b/2-ui/1-document/15-metrics/css.png
new file mode 100755
index 00000000..430e08ae
Binary files /dev/null and b/2-ui/1-document/15-metrics/css.png differ
diff --git a/2-ui/1-document/15-metrics/cssWidthScroll.view/index.html b/2-ui/1-document/15-metrics/cssWidthScroll.view/index.html
new file mode 100755
index 00000000..27019b13
--- /dev/null
+++ b/2-ui/1-document/15-metrics/cssWidthScroll.view/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+<div id="elem" style="overflow-y:scroll;width:300px;height:200px;border:1px solid black">
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+текст текст текст текст текст текст текст текст текст текст текст текст текст текст
+</div>
+
+<script>
+function getWidth() {
+  var style = window.getComputedStyle ? getComputedStyle(elem, '') : elem.currentStyle;
+  return style.width;
+}
+
+// FF: 200, Ch/Sa: 184, Op: 200, IE9: 184, IE7,8:200
+</script>
+
+У элемента стоит <code>style="width:300px"</code><br>
+
+<button onclick="alert(getWidth())">alert(width из getComputedStyle/currentStyle)</button>
+
+</body>
+</html>
diff --git a/2-ui/1-document/15-metrics/metric.view/index.html b/2-ui/1-document/15-metrics/metric.view/index.html
new file mode 100755
index 00000000..50972d9c
--- /dev/null
+++ b/2-ui/1-document/15-metrics/metric.view/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+    <script src="http://code.jquery.com/jquery.min.js"></script>
+    <style type="text/css">
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        #example {
+            width: 300px;
+            height: 200px;
+            overflow: auto;
+            border: 25px solid #F0E68C;
+            padding: 20px;
+            margin: 20px;
+        }
+        .key {
+            cursor: pointer;
+            text-decoration: underline;
+        }
+    </style>
+
+</head>
+<body>
+
+
+<div id="example">
+<h3>Introduction</h3>
+<p>This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company's Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0.</p>
+
+<p>The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997.</p>
+
+<p>That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.</p>
+
+<p>The third edition of the Standard introduced powerful regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and minor changes in anticipation of forthcoming internationalisation facilities and future language growth. The third edition of the ECMAScript standard was adopted by the Ecma General Assembly of December 1999 and published as ISO/IEC 16262:2002 in June 2002.</p>
+
+</div>
+
+
+<div id="mouse-wrap">Координаты мыши: <span id="mouse">...</span></div>
+<div id="info"></div>
+
+
+<script>
+    var example = document.getElementById('example')
+
+    $(function() {
+        var info = document.getElementById('info')
+
+        var props = {
+            'размеры':
+                    ['clientLeft','clientTop', 'clientWidth','clientHeight','offsetWidth','offsetHeight','scrollWidth', 'scrollHeight'],
+            'прокрутка':
+                    ['scrollLeft','scrollTop'] ,
+            'позиционирование по рендерингу':
+                    ['offsetParent', 'offsetLeft','offsetTop']
+        }
+
+        info.innerHTML = '<h3>Нажмите для просмотра значения:</h3>';
+        for (var k in props) {
+            info.innerHTML += '<h4>' + k + '</h4>';
+            var prop = props[k];
+            for (var i = 0; i < prop.length; i++) {
+                info.innerHTML += "<span class='key'>"+prop[i]+'</span>: <span id="'+prop[i]+'">&nbsp;</span>' + " "
+                i++;
+                if (i<prop.length) {
+                  info.innerHTML += "<span class='key'>"+prop[i]+'</span>: <span id="'+prop[i]+'">&nbsp;</span>';
+                }
+                info.innerHTML += "<br/>";
+
+            }
+        }
+
+        $(document).delegate('span.key','click', function() {
+            var prop = this.innerHTML;
+            var value = example[prop];
+            value = value.tagName || value;
+            $('#'+prop).html(value);
+        })
+
+    })
+
+    document.onmousemove = function(e) {
+        e = e || window.event;
+        document.getElementById('mouse').innerHTML = Math.round(e.clientX)+':'+Math.round(e.clientY);
+    }
+
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/15-metrics/offsetLeft.png b/2-ui/1-document/15-metrics/offsetLeft.png
new file mode 100755
index 00000000..c897d9cf
Binary files /dev/null and b/2-ui/1-document/15-metrics/offsetLeft.png differ
diff --git a/2-ui/1-document/15-metrics/offsetWidth.png b/2-ui/1-document/15-metrics/offsetWidth.png
new file mode 100755
index 00000000..8ba49795
Binary files /dev/null and b/2-ui/1-document/15-metrics/offsetWidth.png differ
diff --git a/2-ui/1-document/15-metrics/scrollTop.png b/2-ui/1-document/15-metrics/scrollTop.png
new file mode 100755
index 00000000..3c595d89
Binary files /dev/null and b/2-ui/1-document/15-metrics/scrollTop.png differ
diff --git a/2-ui/1-document/15-metrics/scrollWidth.png b/2-ui/1-document/15-metrics/scrollWidth.png
new file mode 100755
index 00000000..b6fd3949
Binary files /dev/null and b/2-ui/1-document/15-metrics/scrollWidth.png differ
diff --git a/2-ui/1-document/15-metrics/summary.png b/2-ui/1-document/15-metrics/summary.png
new file mode 100755
index 00000000..df266417
Binary files /dev/null and b/2-ui/1-document/15-metrics/summary.png differ
diff --git a/2-ui/1-document/16-metrics-window/1-get-document-scrolls/solution.md b/2-ui/1-document/16-metrics-window/1-get-document-scrolls/solution.md
new file mode 100644
index 00000000..40278b0b
--- /dev/null
+++ b/2-ui/1-document/16-metrics-window/1-get-document-scrolls/solution.md
@@ -0,0 +1,47 @@
+`top` -- можно кроссбраузерно получить, как указано в главе [](/metrics-window):
+
+```js
+function getDocumentScrollTop() {
+  var html = document.documentElement;
+  var body = document.body;
+
+  var scrollTop = html.scrollTop || body && body.scrollTop || 0;
+  scrollTop -= html.clientTop; // IE<8
+
+  return scrollTop;
+}
+```
+
+`bottom` -- это `top` плюс высота видимой части:
+
+```js
+function getDocumentScrollBottom() {
+  return getDocumentScrollTop() + document.documentElement.clientHeight;
+}
+```
+
+Полная высота -- максимум двух значений, детали см. в [](/metrics-window):
+
+```js
+function getDocumentScrollHeight() {
+  var scrollHeight = document.documentElement.scrollHeight;
+  var clientHeight = document.documentElement.clientHeight;
+
+  scrollHeight = Math.max(scrollHeight, clientHeight);
+
+  return scrollHeight;
+}
+```
+
+Итого, ответ, использующий описанные выше функции:
+
+```js
+function getDocumentScroll() {
+  return {
+    top: getDocumentScrollTop(),
+    bottom: getDocumentScrollBottom(),
+    height: getDocumentScrollHeight()
+  };
+}
+```
+
diff --git a/2-ui/1-document/16-metrics-window/1-get-document-scrolls/task.md b/2-ui/1-document/16-metrics-window/1-get-document-scrolls/task.md
new file mode 100644
index 00000000..b04f07cd
--- /dev/null
+++ b/2-ui/1-document/16-metrics-window/1-get-document-scrolls/task.md
@@ -0,0 +1,15 @@
+# Получить прокрутки документа
+
+[importance 5]
+
+Напишите функцию `getDocumentScroll()`, которая возвращает объект с координатами области видимости относительно документа.
+
+Свойства объекта результата:
+
+<ul>
+<li>`top` -- координата верхней границы видимой части (относительно документа).</li>
+<li>`bottom` -- координата нижней границы видимой части (относительно документа).</li>
+<li>`height` -- полная высота документа, включая прокрутку.</li>
+</ul>
+
+В задаче можно учитывать только вертикальную прокрутку (горизонтальную отдельно нет смысла разбирать, она делается аналогично, а нужна сильно реже).
\ No newline at end of file
diff --git a/2-ui/1-document/16-metrics-window/article.md b/2-ui/1-document/16-metrics-window/article.md
new file mode 100644
index 00000000..e1d93a2b
--- /dev/null
+++ b/2-ui/1-document/16-metrics-window/article.md
@@ -0,0 +1,209 @@
+# Размеры и прокрутка страницы
+
+Многие метрики для страницы работают совсем не так, как для элементов. Поэтому рассмотрим решения типичных задач для страницы отдельно.
+[cut]
+## Ширина/высота видимой части окна
+
+Свойства `clientWidth/Height` для элемента `document.documentElement` позволяют получить ширину/высоту видимой области окна.
+
+Например, кнопка ниже выведет размер такой области для этой страницы:
+
+<button onclick="alert(document.documentElement.clientHeight)">alert(document.documentElement.clientHeight)</button>
+
+Этот способ -- кросс-браузерный.
+
+## Ширина/высота всей страницы, с учётом прокрутки
+
+Если прокрутка на странице присутствует, то полные размеры страницы можно взять в `document.documentElement.scrollWidth/scrollHeight`. 
+
+Проблемы с этими свойствами возникают, когда *прокрутка то есть, то нет*. В этом случае они работают некорректно. 
+
+В браузерах Chrome/Safari и Opera при отсутствии прокрутки значение `document.documentElement.scrollHeight` в этом случае может быть даже меньше, чем `document.documentElement.clientHeight` (нонсенс!). Эта проблема -- именно для `document.documentElement`, то есть для всей страницы. С обычными элементами здесь всё в порядке.
+
+Надёжно определить размер с учетом прокрутки можно, взяв максимум из двух свойств:
+
+```js
+//+ run
+var scrollHeight = document.documentElement.scrollHeight;
+var clientHeight = document.documentElement.clientHeight;
+
+*!*
+scrollHeight = Math.max(scrollHeight, clientHeight);
+*/!*
+
+alert('Высота с учетом прокрутки: ' + scrollHeight);
+```
+
+## Прокрутка страницы [#page-scroll]
+
+### Получение текущей прокрутки
+
+Значение текущей прокрутки страницы хранится в свойствах `window.pageXOffset/pageYOffset`.
+
+Но эти свойства:
+<ul>
+<li>Не поддерживаются IE<9</li>
+<li>Их можно только читать, а менять нельзя.</li>
+</ul>
+
+Поэтому для кросс-браузерности рассмотрим другой способ -- свойство `document.documentElement.scrollLeft/Top`. 
+
+<ul>
+<li>`document.documentElement` содержит значение прокрутки, если стоит правильный DOCTYPE. Это работает во всех браузерах, кроме Safari/Chrome.</li>
+<li>Safari/Chrome используют вместо этого `document.body` (это баг в Webkit).</li>
+<li>В режиме совместимости (если некорректный DOCTYPE) некоторые браузеры также используют  `document.body`.</li>
+</ul> 
+
+Таким образом, для IE8+ и других браузеров, работающих в режиме соответствия стандартам, получить значение прокрутки можно так:
+
+```js
+//+ run
+var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+alert("Текущая прокрутка: " + scrollTop);
+```
+
+### С учётом IE7- и Quirks Mode [#getPageScroll]
+
+Если дополнительно нужна поддержка IE<8, то там тоже есть важная тонкость. Документ может быть смещен относительно начальной позиции (0,0). Это смещение хранится в `document.documentElement.clientLeft/clientTop`, и мы должны вычесть его.
+
+Если дополнительно добавить возможность работы браузера в Quirks Mode, то надёжный способ будет таким:
+
+```js
+//+ run
+var html = document.documentElement;
+var body = document.body;
+
+var scrollTop = html.scrollTop || body && body.scrollTop || 0;
+scrollTop -= html.clientTop;
+alert("Текущая прокрутка: " + scrollTop);
+```
+
+Итого, можно создать кросс-браузерную функцию, которая возвращает значения прокрутки и поддерживает в том числе IE8-:
+
+```js
+var getPageScroll = (window.pageXOffset != undefined) ?
+  function() {
+    return {
+      left: pageXOffset,
+      top: pageYOffset
+    };
+  } :
+  function() {
+    var html = document.documentElement;
+    var body = document.body;
+
+    var top = html.scrollTop || body && body.scrollTop || 0;
+    top -= html.clientTop;
+
+    var left = html.scrollLeft || body && body.scrollLeft || 0;
+    left -= html.clientLeft;
+
+    return { top: top, left: left };
+  }
+```
+
+### Изменение прокрутки: scrollTo, scrollBy, scrollIntoView [#window-scroll]
+
+[smart]
+Чтобы прокрутить страницу при помощи JavaScript, её DOM должен быть полностью загружен.
+[/smart]
+
+На обычных элементах свойства `scrollTop/scrollLeft` можно изменять, и при этом элемент будет прокручиваться.
+
+Никто не мешает точно так же поступать и со страницей. Во всех браузерах, кроме Chrome/Safari можно осуществить прокрутку установкой `document.documentElement.scrollTop`, а в Chrome/Safari -- использовать для этого `document.body.scrollTop`. И будет работать.
+
+Но есть и другое, полностью кросс-браузерное решение -- специальные методы прокрутки страницы [window.scrollBy(x,y)](https://developer.mozilla.org/en/Window.scrollBy) и [window.scrollTo(pageX,pageY)](https://developer.mozilla.org/en/Window.scrollTo). 
+
+
+
+<ul>
+<li>**Метод `scrollBy(x,y)` прокручивает страницу относительно текущих координат.**
+Например, кнопка ниже прокрутит страницу на `10px` вниз:
+
+<button onclick="window.scrollBy(0,10)">window.scrollBy(0,10)</button>
+</li>
+<li>**Метод `scrollTo(pageX,pageY)` прокручивает страницу к указанным координатам относительно документа.** Он эквивалентен установке свойств `scrollLeft/scrollTop`.
+
+Чтобы прокрутить в начало документа, достаточно указать координаты `(0,0)`:
+<button onclick="window.scrollTo(0,0)">window.scrollTo(0,0)</button>
+</li>
+</ul>
+
+Для полноты картины рассмотрим также метод [elem.scrollIntoView(top)](https://developer.mozilla.org/en/DOM/element.scrollIntoView).
+
+Метод `elem.scrollIntoView(top)` вызывается на элементе и прокручивает страницу так, чтобы элемент оказался вверху, если параметр `top` равен `true`, и внизу, если `top` равен `false`. Причем, если параметр `top` не указан, то он считается равным `true`.
+
+Кнопка ниже прокрутит страницу так, чтобы кнопка оказалась вверху:
+
+<button onclick="this.scrollIntoView()">this.scrollIntoView()</button>
+
+А следующая кнопка прокрутит страницу так, чтобы кнопка оказалась внизу:
+
+<button onclick="this.scrollIntoView(false)">this.scrollIntoView(false)</button>
+
+## Запрет прокрутки
+
+Иногда бывает нужно временно сделать документ "непрокручиваемым". Например, при показе большого диалогового окна над документом -- чтобы посетитель мог прокручивать это окно, но не документ.
+
+**Чтобы запретить прокрутку страницы, достаточно поставить `document.body.style.overflow = "hidden"`.**
+
+При этом страница замрёт в текущем положении. Попробуйте сами:
+
+<button onclick="document.body.style.overflow = 'hidden'">`document.body.style.overflow = 'hidden'`</button>
+
+<button onclick="document.body.style.overflow = ''">`document.body.style.overflow = ''`</button>
+
+При нажатии на верхнюю кнопку страница замрёт на текущем положении прокрутки. После нажатия на нижнюю -- прокрутка возобновится. 
+
+**Вместо `document.body` может быть любой элемент, прокрутку которого необходимо запретить.**
+
+Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, заняв её место. Такая перерисовка иногда выглядит как "прыжок" страницы. Это может быть не очень красиво, но обходится, если вычислить размер прокрутки и добавить `padding-right`.
+
+## Итого
+
+Размеры:
+
+<ul>
+<li>Для получения размеров видимой части окна: `document.documentElement.clientWidth/Height`
+</li>
+<li>Для получения размеров страницы с учётом прокрутки:
+
+```js
+var scrollHeight = document.documentElement.scrollHeight;
+var clientHeight = document.documentElement.clientHeight;
+
+*!*
+scrollHeight = Math.max(scrollHeight, clientHeight);
+*/!*
+```
+
+</li>
+</ul>
+
+**Прокрутка окна:**
+
+<ul>
+<li>Прокрутку окна можно *получить* как `window.pageYOffset` (для горизонтальной -- `window.pageXOffset`) везде, кроме IE<9. 
+
+Для кросс-браузерности используется другой способ:
+
+```js
+//+ run
+var html = document.documentElement;
+var body = document.body;
+
+var scrollTop = html.scrollTop || body && body.scrollTop || 0;
+scrollTop -= html.clientTop; // IE<8
+alert("Текущая прокрутка: " + scrollTop);
+```
+
+</li>
+<li>Установить прокрутку можно при помощи специальных методов:
+<ul>
+<li>`window.scrollTo(pageX,pageY)` -- абсолютные координаты,</li>
+<li>`window.scrollBy(x,y)` -- прокрутить относительно текущего места.</li><li>`elem.scrollIntoView(top)` -- прокрутить, чтобы элемент `elem` стал виден.</li>
+</ul>
+</li>
+</ul>
+
diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.md b/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.md
new file mode 100644
index 00000000..ceae552e
--- /dev/null
+++ b/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.md
@@ -0,0 +1,42 @@
+# Координаты внешних углов
+
+Координаты элемента возвращаются функцией [elem.getBoundingClientRect](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect). Она возвращает все координаты относительно окна в виде объекта со свойствами `left`, `top`, `right`, `bottom`.  Некоторые браузеры также добавляют `width`, `height`.
+
+Так что координаты верхнего-левого `coords1` и правого-нижнего `coords4` внешних углов:
+
+```js
+var coords = elem.getBoundingClientRect();
+
+var coords1 = [coords.left, coords.top];
+var coords2 = [coords.right, coords.bottom];
+```
+
+# Левый-верхний угол внутри
+
+Этот угол отстоит от наружных границ на размер рамки, который доступен через `clientLeft/clientTop`:
+
+```js
+var coords3 = [coords.left + field.clientLeft, coords.top + field.clientTop];
+```
+
+# Правый-нижний угол внутри
+
+Этот угол отстоит от правой-нижней наружной границы на размер рамки. Так как нужная рамка находится справа-внизу, то специальных свойств для нее нет, но мы можем получить этот размер из CSS:
+
+```js
+var coords4 = [
+  coords.right - parseInt(getComputedStyle(field).borderRightWidth) ,
+  coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth) 
+]
+```
+
+Можно получить их альтернативным путем, прибавив `clientWidth/clientHeight` к координатам левого-верхнего внутреннего угла. Получится то же самое, пожалуй даже быстрее и изящнее.
+
+```js
+var coords4 = [
+  coords.left + elem.clientLeft + elem.clientWidth ,
+  coords.top + elem.clientTop + elem.clientHeight
+]
+```
+
+[edit src="solution"]Полный код решения[/edit]
\ No newline at end of file
diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.view/index.css b/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.view/index.css
new file mode 100755
index 00000000..9d4f4a6e
--- /dev/null
+++ b/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.view/index.css
@@ -0,0 +1,27 @@
+body {
+  padding: 20px 0 0 20px;
+  cursor: pointer;
+}
+
+#field {
+  overflow: hidden; 
+  width: 200px;
+  height: 150px;
+  border-top: 10px solid black;
+  border-right: 10px solid gray;
+  border-bottom: 10px solid gray;
+  border-left: 10px solid black;
+  background-color: #00FF00;
+  font: 10px/1.2 monospace;
+}
+
+.triangle-right {
+  position: relative;
+  width: 0;
+  height: 0;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 20px solid red;
+  text-indent: -20px;
+  font: 12px/1 monospace;
+}  
diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.view/index.html b/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.view/index.html
new file mode 100755
index 00000000..f4c46101
--- /dev/null
+++ b/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.view/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="index.css">
+  <script>
+  document.onclick = function(e) { // выводит текущие координаты при клике
+    document.getElementById('coords').innerHTML = e.clientX + ':' + e.clientY;
+  };
+  </script>
+</head>
+<body>
+
+  Кликните на любое место, чтобы получить координаты относительно окна.<br>
+  Это для удобства тестирования, чтобы проверить результат, который вы получите из DOM.<br>
+  <div id="coords">(координаты появятся тут)</div>
+
+
+  <div id="field">
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+  </div>
+
+
+  <div class="triangle-right" style="left:-20px;top:-176px">1</div>
+  <div class="triangle-right" style="left:-10px;top:-178px">3</div>
+  <div class="triangle-right" style="left:190px;top:-40px">4</div>
+  <div class="triangle-right" style="left:200px;top:-42px">2</div>
+
+
+  <script>
+
+  var field = document.getElementById('field');
+
+  // полное решение - в массиве result
+
+  var fieldCoords = field.getBoundingClientRect();
+
+  var result = [
+    [ // 1
+      fieldCoords.left, 
+      fieldCoords.top
+    ], 
+    [ // 2
+      fieldCoords.right,
+      fieldCoords.bottom
+    ],
+    [ // 3
+      fieldCoords.left + field.clientLeft, 
+      fieldCoords.top + field.clientTop
+    ], 
+    [ // 4
+      fieldCoords.left + field.clientLeft + field.clientWidth,
+      fieldCoords.top + field.clientTop + field.clientHeight
+    ]
+  ];
+
+  alert(result.join('  '));
+
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.css b/2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.css
new file mode 100755
index 00000000..9d4f4a6e
--- /dev/null
+++ b/2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.css
@@ -0,0 +1,27 @@
+body {
+  padding: 20px 0 0 20px;
+  cursor: pointer;
+}
+
+#field {
+  overflow: hidden; 
+  width: 200px;
+  height: 150px;
+  border-top: 10px solid black;
+  border-right: 10px solid gray;
+  border-bottom: 10px solid gray;
+  border-left: 10px solid black;
+  background-color: #00FF00;
+  font: 10px/1.2 monospace;
+}
+
+.triangle-right {
+  position: relative;
+  width: 0;
+  height: 0;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 20px solid red;
+  text-indent: -20px;
+  font: 12px/1 monospace;
+}  
diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.html b/2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.html
new file mode 100755
index 00000000..cd09f1f8
--- /dev/null
+++ b/2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="index.css">
+  <script>
+  document.onclick = function(e) { // выводит текущие координаты при клике
+    document.getElementById('coords').innerHTML = e.clientX + ':' + e.clientY;
+  };
+  </script>
+</head>
+<body>
+
+  Кликните на любое место, чтобы получить координаты относительно окна.<br>
+  Это для удобства тестирования, чтобы проверить результат, который вы получите из DOM.<br>
+  <div id="coords">(координаты появятся тут)</div>
+
+
+  <div id="field">
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+  </div>
+
+
+  <div class="triangle-right" style="left:-20px;top:-176px">1</div>
+  <div class="triangle-right" style="left:-10px;top:-178px">3</div>
+  <div class="triangle-right" style="left:190px;top:-40px">4</div>
+  <div class="triangle-right" style="left:200px;top:-42px">2</div>
+
+
+  <script>
+
+  var field = document.getElementById('field');
+
+  // ваш код...
+
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/task.md b/2-ui/1-document/17-coordinates/1-find-point-coordinates/task.md
new file mode 100644
index 00000000..052ebcb9
--- /dev/null
+++ b/2-ui/1-document/17-coordinates/1-find-point-coordinates/task.md
@@ -0,0 +1,25 @@
+# Найдите координаты точки в документе
+
+[importance 5]
+
+В ифрейме ниже вы видите документ с зеленым "полем".
+
+При помощи JavaScript найдите координаты указанных стрелками углов относительно окна браузера.
+
+Для тестирования в документ добавлено удобство: клик в любом месте отображает координаты мыши относительно окна.
+
+[iframe border=1 height=360 src="source" link edit]
+
+Ваш код должен при помощи DOM получить четыре пары координат: 
+<ol>
+<li>Левый-верхний угол снаружи, это просто.</li>
+<li>Правый-нижний угол снаружи, это тоже просто.</li>
+<li>Левый-верхний угол внутри, это чуть сложнее.</li>
+<li>Правый-нижний угол внутри, это ещё сложнее, но можно сделать даже несколькими способами.</li>
+</ol>
+
+Они должны совпадать с координатами, которые вы получите кликом по полю.
+
+P.S. Код не должен быть как-то привязан к конкретным размерам элемента, стилям, наличию или отсутствию рамки.
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/2-ui/1-document/17-coordinates/2-position-at/solution.md b/2-ui/1-document/17-coordinates/2-position-at/solution.md
new file mode 100644
index 00000000..099f5e81
--- /dev/null
+++ b/2-ui/1-document/17-coordinates/2-position-at/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/1-document/17-coordinates/2-position-at/solution.view/index.css b/2-ui/1-document/17-coordinates/2-position-at/solution.view/index.css
new file mode 100755
index 00000000..c3749b0d
--- /dev/null
+++ b/2-ui/1-document/17-coordinates/2-position-at/solution.view/index.css
@@ -0,0 +1,28 @@
+.note {
+  position: fixed;
+  z-index: 1000;
+  padding: 5px;
+  border: 1px solid black;
+  background: white;
+  text-align: center;
+  font: italic 14px Georgia;
+}
+
+blockquote {
+  background:#f9f9f9;
+  border-left:10px solid #ccc;
+  margin: 0 0 0 100px;
+  padding:.5em 10px;
+  quotes:"\201C""\201D""\2018""\2019";
+  display: inline-block;
+  white-space: pre;
+}
+
+blockquote:before {
+  color: #ccc;
+  content: open-quote;
+  font-size:4em;
+  line-height:.1em;
+  margin-right:.25em;
+  vertical-align:-.4em;
+}
diff --git a/2-ui/1-document/17-coordinates/2-position-at/solution.view/index.html b/2-ui/1-document/17-coordinates/2-position-at/solution.view/index.html
new file mode 100755
index 00000000..4726fcc2
--- /dev/null
+++ b/2-ui/1-document/17-coordinates/2-position-at/solution.view/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
+    
+  
+  <blockquote>
+- Что на завтрак, Бэрримор?
+- Овсянка, сэр.
+- А на обед?
+- Овсянка, сэр.
+- Ну а на ужин?
+- Котлеты, сэр.
+- Уррра!!!
+- Из овсянки, сэр!!!
+  </blockquote>
+  
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
+    
+  
+  <script>
+
+    /**
+     * Позиционирует элемент elem относительно элемента anchor, как указано в
+     * в position.
+     *
+     * @param {Node} anchor     Элемент-якорь, относительно которого задана позиция
+     * @param {string} position Позиция: одно из (top/right/bottom)
+     * @param {Node} elem       Элемент, который будет позиционирован
+     *
+     * Оба элемента elem && anchor должны быть видимы в документе.
+     */
+    function positionAt(anchor, position, elem) {
+
+      var anchorCoords = anchor.getBoundingClientRect();
+
+      switch(position) {
+      case "top":
+        elem.style.left = anchorCoords.left + "px";
+        elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
+        break;
+
+      case "right":
+        elem.style.left = anchorCoords.left + anchor.offsetWidth + "px";
+        elem.style.top = anchorCoords.top + "px";
+        break;
+
+      case "bottom":
+        elem.style.left = anchorCoords.left + "px";
+        elem.style.top = anchorCoords.top + anchor.offsetHeight + "px";
+        break;
+      }
+
+    }
+
+    /** 
+     * Показывает заметку с текстом html на позиции position
+     * относительно элемента anchor
+     */
+    function showNote(anchor, position, html) {
+      
+      var note = document.createElement('div');
+      note.className = "note";
+      note.innerHTML = html;
+      document.body.appendChild(note); 
+
+      positionAt(anchor, position, note);
+    }
+
+    // проверка работоспособности
+    var blockquote = document.querySelector('blockquote');
+
+    showNote(blockquote, "top", "заметка сверху");
+    showNote(blockquote, "right", "заметка справа");
+    showNote(blockquote, "bottom", "заметка снизу");
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/17-coordinates/2-position-at/source.view/index.css b/2-ui/1-document/17-coordinates/2-position-at/source.view/index.css
new file mode 100755
index 00000000..c3749b0d
--- /dev/null
+++ b/2-ui/1-document/17-coordinates/2-position-at/source.view/index.css
@@ -0,0 +1,28 @@
+.note {
+  position: fixed;
+  z-index: 1000;
+  padding: 5px;
+  border: 1px solid black;
+  background: white;
+  text-align: center;
+  font: italic 14px Georgia;
+}
+
+blockquote {
+  background:#f9f9f9;
+  border-left:10px solid #ccc;
+  margin: 0 0 0 100px;
+  padding:.5em 10px;
+  quotes:"\201C""\201D""\2018""\2019";
+  display: inline-block;
+  white-space: pre;
+}
+
+blockquote:before {
+  color: #ccc;
+  content: open-quote;
+  font-size:4em;
+  line-height:.1em;
+  margin-right:.25em;
+  vertical-align:-.4em;
+}
diff --git a/2-ui/1-document/17-coordinates/2-position-at/source.view/index.html b/2-ui/1-document/17-coordinates/2-position-at/source.view/index.html
new file mode 100755
index 00000000..f9e156cb
--- /dev/null
+++ b/2-ui/1-document/17-coordinates/2-position-at/source.view/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
+    
+  
+  <blockquote>
+- Что на завтрак, Бэрримор?
+- Овсянка, сэр.
+- А на обед?
+- Овсянка, сэр.
+- Ну а на ужин?
+- Котлеты, сэр.
+- Уррра!!!
+- Из овсянки, сэр!!!
+  </blockquote>
+  
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
+    
+  
+  <script>
+
+    /**
+     * Позиционирует элемент elem относительно элемента anchor, как указано в
+     * в position.
+     *
+     * @param {Node} anchor     Элемент-якорь, относительно которого задана позиция
+     * @param {string} position Позиция: одно из top/right/bottom
+     * @param {Node} elem       Элемент, который будет позиционирован
+     */
+    function positionAt(anchor, position, elem) {
+      // ваш код...
+    }
+
+    /** 
+     * Показывает заметку с текстом html на позиции position
+     * относительно элемента anchor
+     */
+    function showNote(anchor, position, html) {
+      // ваш код ...      
+    }
+
+    // проверка работоспособности
+    var blockquote = document.querySelector('blockquote');
+
+    showNote(blockquote, "top", "заметка сверху");
+    showNote(blockquote, "right", "заметка справа");
+    showNote(blockquote, "bottom", "заметка снизу");
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/17-coordinates/2-position-at/task.md b/2-ui/1-document/17-coordinates/2-position-at/task.md
new file mode 100644
index 00000000..43617adf
--- /dev/null
+++ b/2-ui/1-document/17-coordinates/2-position-at/task.md
@@ -0,0 +1,13 @@
+# Разместить заметку рядом с элементом
+
+[importance 5]
+
+Создайте функцию `positionAt(anchor, position, elem)`, которая позиционирует элемент `elem`, в зависимости от `position`, сверху (`"top"`), справа (`"right"`) или снизу (`"bottom"`) от элемента `anchor`.
+
+Используйте её, чтобы сделать функцию `showNote(anchor, position, html)`, которая показывает элемент с классом `note` и текстом `html` на позиции `position` рядом с элементом `anchor`.
+
+Выведите заметки как здесь:
+
+[iframe src="solution" height="450" border="1" link]
+
+[edit src="source" task/]
diff --git a/2-ui/1-document/17-coordinates/article.md b/2-ui/1-document/17-coordinates/article.md
new file mode 100644
index 00000000..fe9364eb
--- /dev/null
+++ b/2-ui/1-document/17-coordinates/article.md
@@ -0,0 +1,176 @@
+# Координаты в окне
+
+Для того, чтобы поместить один элемент рядом с другим на странице, а также двигать его произвольным образом, к примеру, рядом с указателем мыши -- используются координаты.
+
+Первая координатная система, которую мы посмотрим, начинается в левом-верхнем углу текущей видимой области окна.
+
+Мы будем называть координаты в ней `clientX/clientY`.
+
+
+## getBoundingClientRect()
+
+Синтаксис:
+
+```js
+var coords = elem.getBoundingClientRect();
+```
+
+Возвращает координаты элемента, а точнее -- размеры прямоугольника, который охватывает элемент, в виде объекта со свойствами: `top`, `left`, `right` и `bottom`:
+<ul>
+<li>`top` -- Y-координата верхней границы элемента,</li>
+<li>`left` -- X-координата левой границы,</li>
+<li>`right` -- X-координата правой границы,</li>
+<li>`bottom` -- Y-координата нижней границы.</li>
+</ul>
+
+Например:
+
+<img src="transitions-bare.png">
+
+Обратите внимание: страница в этом примере прокручена, её часть осталась сверху. 
+
+**Координаты относительно окна не учитывают прокрутку, они высчитываются от границ текущей видимой области.**
+
+Например, кликните на кнопку, чтобы увидеть её координаты:
+
+<input id="brTest" type="button" value="Показать button.getBoundingClientRect() для этой кнопки" onclick='showRect(this)'/>
+
+<script>
+function showRect(elem) {
+  var r = elem.getBoundingClientRect()
+  alert("{top:"+r.top+", left:"+r.left+", right:"+r.right+", bottom:"+ r.bottom + "}");
+}
+</script>
+
+Если вы прокрутите эту страницу, то положение кнопки в окне изменится, и её координаты, соответственно, тоже. 
+
+<ul>
+<li>Координаты могут быть дробными -- это нормально, так как они возвращаются из внутренних структур браузера.</li>
+<li>Координаты могут быть и отрицательными, например если прокрутить страницу так, что часть кнопки будет выходить за верхнуюю границу окна, то её `top`-координата будет меньше нуля.</li>
+<li>Некоторые современные браузеры также добавляют к объекту свойства для ширины и высоты: `width/height`, но их можно получить и простым вычитанием: `height = bottom - top`, `width = right - left`.</li>
+</ul>
+
+
+[smart header="Метод `elem.getBoundingClientRect()` изнутри"]
+
+Браузер отображает любое содержимое, используя прямоугольники. 
+
+В случае с блочным элементом, таким как `DIV`, элемент сам по себе образует прямоугольник. Но если элемент строчный и содержит в себе длинный текст, то каждая строка будет отдельным прямоугольником, с одинаковой высотой но разной длиной (у каждой строки -- своя длина).
+
+Более подробно это описано в: <a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">спецификации</a>.
+
+Если обобщить, содержимое элемента может отображаться в одном прямоугольнике или в нескольких.
+
+Все эти прямоугольники можно получить с помощью [elem.getClientRects()](https://developer.mozilla.org/en/DOM/element.getClientRects). А метод [elem.getBoundingClientRect()](https://developer.mozilla.org/en/DOM/element.getBoundingClientRect) возвращает один охватывающий прямоугольник для всех `getClientRects()`.
+[/smart]
+
+
+## elementFromPoint(x, y) [#elementFromPoint]
+
+Возвращает элемент, который находится на координатах `(x, y)` относительно окна.
+
+Синтаксис:
+
+```js
+var elem = document.elementFromPoint(x, y);
+```
+
+Например, код ниже ниже выделяет и выводит тег у элемента, который сейчас в середине окна:
+
+```js
+//+ run
+var centerX = document.documentElement.clientWidth / 2;
+var centerY = document.documentElement.clientHeight / 2;
+
+var elem = document.elementFromPoint(centerX, centerY);
+
+elem.style.background = "red";
+alert( elem.tagName );
+elem.style.background = "";
+```
+
+Аналогично предыдущему методу, используются координаты относительно окна. В зависимости от прокрутки страницы, от размеров окна браузера, в центре может быть разный элемент.
+
+## position:fixed
+
+Координаты обычно требуются не просто так, а, например, чтобы переместить элемент на них.
+
+В CSS для позиционирования элемента относительно окна используется свойство `position:fixed`. Как правило, вместе с ним идут и координаты, например `left/top`.
+
+Например, этот код покажет сообщение под элементом с `id="coords-show-mark"`:
+
+```js
+var elem = document.getElementById("coords-show-mark");
+
+// получить координаты
+var coords = elem.getBoundingClientRect();
+
+// создать элемент для сообщения
+var message = document.createElement('div');
+
+// эти свойства можно было бы задать классом
+message.style.position = "fixed";
+message.style.background = "red";
+message.style.color = "yellow";
+
+*!*
+// к координатам обязательно добавляем "px"!
+message.style.left = coords.left + "px";
+message.style.top = coords.bottom + "px";
+*/!*
+
+message.innerHTML = "Привет, мир!";
+
+// добавить на 10 сек в документ
+document.body.appendChild(message);
+setTimeout(function() {
+  document.body.removeChild(message);
+}, 10000);
+```
+
+Нажмите на кнопку, чтобы запустить его:
+
+<button id="coords-show-mark">кнопка с id="coords-show-mark"</button>
+
+Этот код можно модифицировать, чтобы показывать сообщение слева, справа, сверху, делать это вместе с CSS-анимацией и так далее. Для этого нужно всего лишь понимать, как получить координаты.
+
+**Заметим, однако, важную деталь: при прокрутке страницы сообщение отделяется от кнопки.**
+
+Причина очевидна, ведь оно использует `position: fixed`. Как это обойти, мы посмотрим в следующей главе.
+
+
+[head]
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+
+document.getElementById('coords-show-mark').onclick = function() {
+var elem = document.getElementById("coords-show-mark");
+
+// получить координаты
+var coords = elem.getBoundingClientRect();
+
+// создать элемент для сообщения
+var message = document.createElement('div');
+
+// эти свойства можно было бы задать классом
+message.style.position = "fixed";
+message.style.background = "red";
+message.style.color = "yellow";
+message.style.padding = "5px 3px";
+
+// к координатам обязательно добавляем "px"!
+message.style.left = coords.left + "px";
+message.style.top = coords.bottom + "px";
+
+message.innerHTML = "Привет, мир!";
+
+// добавить на 10 сек в документ
+document.body.appendChild(message);
+setTimeout(function() {
+  document.body.removeChild(message);
+}, 10000);
+}
+});
+
+</script>
+[/head]
\ No newline at end of file
diff --git a/2-ui/1-document/17-coordinates/transitions-bare.png b/2-ui/1-document/17-coordinates/transitions-bare.png
new file mode 100755
index 00000000..346c57d2
Binary files /dev/null and b/2-ui/1-document/17-coordinates/transitions-bare.png differ
diff --git a/2-ui/1-document/17-coordinates/transitions-bare@2x.png b/2-ui/1-document/17-coordinates/transitions-bare@2x.png
new file mode 100755
index 00000000..172ad1e6
Binary files /dev/null and b/2-ui/1-document/17-coordinates/transitions-bare@2x.png differ
diff --git a/2-ui/1-document/18-coordinates-document/1-position-at-absolute/solution.md b/2-ui/1-document/18-coordinates-document/1-position-at-absolute/solution.md
new file mode 100644
index 00000000..099f5e81
--- /dev/null
+++ b/2-ui/1-document/18-coordinates-document/1-position-at-absolute/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/1-document/18-coordinates-document/1-position-at-absolute/solution.view/index.css b/2-ui/1-document/18-coordinates-document/1-position-at-absolute/solution.view/index.css
new file mode 100755
index 00000000..0e0b7ec9
--- /dev/null
+++ b/2-ui/1-document/18-coordinates-document/1-position-at-absolute/solution.view/index.css
@@ -0,0 +1,28 @@
+.note {
+  position: absolute;
+  z-index: 1000;
+  padding: 5px;
+  border: 1px solid black;
+  background: white;
+  text-align: center;
+  font: italic 14px Georgia;
+}
+
+blockquote {
+  background:#f9f9f9;
+  border-left:10px solid #ccc;
+  margin: 0 0 0 100px;
+  padding:.5em 10px;
+  quotes:"\201C""\201D""\2018""\2019";
+  display: inline-block;
+  white-space: pre;
+}
+
+blockquote:before {
+  color: #ccc;
+  content: open-quote;
+  font-size:4em;
+  line-height:.1em;
+  margin-right:.25em;
+  vertical-align:-.4em;
+}
diff --git a/2-ui/1-document/18-coordinates-document/1-position-at-absolute/solution.view/index.html b/2-ui/1-document/18-coordinates-document/1-position-at-absolute/solution.view/index.html
new file mode 100755
index 00000000..4ead72fc
--- /dev/null
+++ b/2-ui/1-document/18-coordinates-document/1-position-at-absolute/solution.view/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="index.css">
+</head>
+<body style="height:2000px">
+  
+  <p>Исправления два:</p>
+    
+  <ol>
+    <li>Использование функции <code>getCoords()</code> из учебника для получения абсолютных координат.</li>
+    <li>Изменение <code>position:fixed</code> на <code>position:absolute</code> в стилях.</li>
+  </ol>
+  
+  <blockquote>
+- Что на завтрак, Бэрримор?
+- Овсянка, сэр.
+- А на обед?
+- Овсянка, сэр.
+- Ну а на ужин?
+- Котлеты, сэр.
+- Уррра!!!
+- Из овсянки, сэр!!!
+  </blockquote>
+  
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
+    
+  
+  <script>
+
+    /**
+     * Вспомогательная функция для координат относительно документа
+     */
+
+    function getCoords(elem) {
+      var box = elem.getBoundingClientRect();
+      
+      var body = document.body;
+      var docEl = document.documentElement;
+      
+      var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
+      var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+      
+      var clientTop = docEl.clientTop || body.clientTop || 0;
+      var clientLeft = docEl.clientLeft || body.clientLeft || 0;
+      
+      var top  = box.top +  scrollTop - clientTop;
+      var left = box.left + scrollLeft - clientLeft;
+      
+      return { top: top, left: left };
+    }
+
+
+    function positionAt(anchor, position, elem) {
+
+      var anchorCoords = getCoords(anchor);
+
+      switch(position) {
+      case "top":
+        elem.style.left = anchorCoords.left + "px";
+        elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
+        break;
+
+      case "right":
+        elem.style.left = anchorCoords.left + anchor.offsetWidth + "px";
+        elem.style.top = anchorCoords.top + "px";
+        break;
+
+      case "bottom":
+        elem.style.left = anchorCoords.left + "px";
+        elem.style.top = anchorCoords.top + anchor.offsetHeight + "px";
+        break;
+      }
+
+    }
+
+    /** 
+     * Показывает заметку с текстом html на позиции position
+     * относительно элемента anchor
+     */
+    function showNote(anchor, position, html) {
+      
+      var note = document.createElement('div');
+      note.className = "note";
+      note.innerHTML = html;
+      document.body.appendChild(note); 
+      positionAt(anchor, position, note);
+    }
+
+    // проверка работоспособности
+    var blockquote = document.querySelector('blockquote');
+
+    showNote(blockquote, "top", "заметка сверху");
+    showNote(blockquote, "right", "заметка справа");
+    showNote(blockquote, "bottom", "заметка снизу");
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/18-coordinates-document/1-position-at-absolute/task.md b/2-ui/1-document/18-coordinates-document/1-position-at-absolute/task.md
new file mode 100644
index 00000000..5e229a89
--- /dev/null
+++ b/2-ui/1-document/18-coordinates-document/1-position-at-absolute/task.md
@@ -0,0 +1,9 @@
+# Разместить заметку рядом с элементом (absolute)
+
+[importance 5]
+
+Модифицируйте решение задачи [](/task/position-at), чтобы при прокрутке страницы заметка не убегала от элемента.
+
+Используйте для этого координаты относительно документа и `position:absolute` вместо `position:fixed`.
+
+В качестве исходного документа используйте решение задачи [](/task/position-at), для тестирования прокрутки добавьте стиль `<body style="height: 2000px">`.
\ No newline at end of file
diff --git a/2-ui/1-document/18-coordinates-document/2-position-at-2/solution.md b/2-ui/1-document/18-coordinates-document/2-position-at-2/solution.md
new file mode 100644
index 00000000..33000522
--- /dev/null
+++ b/2-ui/1-document/18-coordinates-document/2-position-at-2/solution.md
@@ -0,0 +1 @@
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/1-document/18-coordinates-document/2-position-at-2/solution.view/index.css b/2-ui/1-document/18-coordinates-document/2-position-at-2/solution.view/index.css
new file mode 100755
index 00000000..588db26b
--- /dev/null
+++ b/2-ui/1-document/18-coordinates-document/2-position-at-2/solution.view/index.css
@@ -0,0 +1,29 @@
+.note {
+  position: absolute;
+  z-index: 1000;
+  padding: 5px;
+  border: 1px solid black;
+  background: white;
+  text-align: center;
+  font: italic 14px Georgia;
+  opacity: .8;
+}
+
+blockquote {
+  background: #f9f9f9;
+  border-left: 10px solid #ccc;
+  margin: 0 0 0 100px;
+  padding: .5em 10px;
+  quotes: "\201C""\201D""\2018""\2019";
+  display: inline-block;
+  white-space: pre;
+}
+
+blockquote:before {
+  color: #ccc;
+  content: open-quote;
+  font-size: 4em;
+  line-height: .1em;
+  margin-right: .25em;
+  vertical-align: -.4em;
+}
diff --git a/2-ui/1-document/18-coordinates-document/2-position-at-2/solution.view/index.html b/2-ui/1-document/18-coordinates-document/2-position-at-2/solution.view/index.html
new file mode 100755
index 00000000..0a8fce0e
--- /dev/null
+++ b/2-ui/1-document/18-coordinates-document/2-position-at-2/solution.view/index.html
@@ -0,0 +1,115 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="index.css">
+</head>
+<body style="height:2000px">
+  
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
+    
+  
+  <blockquote>
+- Что на завтрак, Бэрримор?
+- Овсянка, сэр.
+- А на обед?
+- Овсянка, сэр.
+- Ну а на ужин?
+- Котлеты, сэр.
+- Уррра!!!
+- Из овсянки, сэр!!!
+  </blockquote>
+  
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
+    
+  
+  <script>
+    function getCoords(elem) {
+      var box = elem.getBoundingClientRect();
+      
+      var body = document.body;
+      var docEl = document.documentElement;
+      
+      var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
+      var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+      
+      var clientTop = docEl.clientTop || body.clientTop || 0;
+      var clientLeft = docEl.clientLeft || body.clientLeft || 0;
+      
+      var top  = box.top +  scrollTop - clientTop;
+      var left = box.left + scrollLeft - clientLeft;
+      
+      return { top: top, left: left };
+    }
+
+    function showNote(anchor, position, html) {
+      
+      var note = document.createElement('div');
+      note.className = "note";
+      note.innerHTML = html;
+      document.body.appendChild(note); 
+
+      positionAt(anchor, position, note);
+    }
+
+    /**
+     * Позиционирует элемент elem относительно элемента anchor, как указано в
+     * в position.
+     *
+     * @param {Node} anchor     Элемент-якорь, относительно которого задана позиция
+     * @param {string} position вне элемента top-out/right-out/bottom-out, внутри элемента *-in
+     * @param {Node} elem       Элемент, который будет позиционирован
+     *
+     * Оба элемента elem && anchor должны быть видимы в документе.
+     */
+    function positionAt(anchor, position, elem) {
+
+      var anchorCoords = getCoords(anchor);
+
+      switch(position) {
+      case "top-out":
+        elem.style.left = anchorCoords.left + "px";
+        elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
+        break;
+
+      case "right-out":
+        elem.style.left = anchorCoords.left + anchor.offsetWidth + "px";
+        elem.style.top = anchorCoords.top + "px";
+        break;
+
+      case "bottom-out":
+        elem.style.left = anchorCoords.left + "px";
+        elem.style.top = anchorCoords.top + anchor.offsetHeight + "px";
+        break;
+
+      case "top-in":
+        elem.style.left = anchorCoords.left + "px";
+        elem.style.top = anchorCoords.top + "px";
+        break;
+
+      case "right-in":
+        elem.style.left = anchorCoords.left + anchor.offsetWidth - elem.offsetWidth + "px";
+        elem.style.top = anchorCoords.top + "px";
+        break;
+
+      case "bottom-in":
+        elem.style.left = anchorCoords.left + "px";
+        elem.style.top = anchorCoords.top + anchor.offsetHeight - elem.offsetHeight + "px";
+        break;
+      }
+
+    }
+
+
+    var blockquote = document.querySelector('blockquote');
+
+    showNote(blockquote, "top-in", "заметка top-in");
+    showNote(blockquote, "top-out", "заметка top-out");
+    showNote(blockquote, "right-out", "заметка right-out");
+    showNote(blockquote, "bottom-in", "заметка bottom-in");
+
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/1-document/18-coordinates-document/2-position-at-2/task.md b/2-ui/1-document/18-coordinates-document/2-position-at-2/task.md
new file mode 100644
index 00000000..f81c127f
--- /dev/null
+++ b/2-ui/1-document/18-coordinates-document/2-position-at-2/task.md
@@ -0,0 +1,27 @@
+# Разместить заметку внутри элемента
+
+[importance 5]
+
+Расширьте предыдущую задачу [](/task/position-at-absolute): научите функцию `positionAt(anchor, position, elem)` вставлять `elem` внутрь `anchor`. 
+
+Новые значения `position`:
+<ul>
+<li>`top-out`, `right-out`, `bottom-out` -- работают так же, как раньше, то есть вставляют `elem` над/справа/под `anchor`.</li>
+<li>`top-in`, `right-in`, `bottom-in` -- вставляют `elem` внутрь `anchor`: к верхней границе/правой/нижней.</li>
+</ul>
+
+Например:
+
+```js
+// покажет note сверху blockquote
+positionAt(blockquote, "top-out", note);
+
+// покажет note сверху-внутри blockquote
+positionAt(blockquote, "top-in", note);
+```
+
+Пример результата:
+
+[iframe src="solution" height="500" border="1" link]
+
+В качестве исходного документа возьмите решение задачи [](/task/position-at-absolute).
\ No newline at end of file
diff --git a/2-ui/1-document/18-coordinates-document/article.md b/2-ui/1-document/18-coordinates-document/article.md
new file mode 100644
index 00000000..90b8ceac
--- /dev/null
+++ b/2-ui/1-document/18-coordinates-document/article.md
@@ -0,0 +1,266 @@
+# Координаты в документе
+
+Система координат относительно всей страницы или, иначе говоря, относительно *документа*, тоже начинается в левом-верхнем углу.
+
+Мы будем называть координаты в ней `pageX/pageY`.
+
+[cut]
+
+Зачем нужны ещё какие-то координаты, кроме рассмотренных ранее? 
+
+Как мы видели в конце предыдущей главы, позиционирование через `position: fixed` привязывает элемент не к месту на странице, а к окну. Поэтому при прокрутке страница под таким элементом двигается, а сам элемент -- нет.
+
+**Как правило, мы хотим показать элемент в определённом месте страницы, а не окна.**
+
+Для этого используют `position: absolute` и координаты `left/top`, которые заданы относительно документа.
+
+## Сравнение систем координат
+
+Когда страница не прокручена, точки начала координат относительно окна `(clientX,clientY)` и документа `(pageX,pageY)` совпадают:
+
+<img src="pagewindow0.png">
+
+Например, координаты элемента с надписью "STANDARDS" равны расстоянию от верхней/левой границы окна:
+
+<img src="standards.png">
+
+**Прокрутим страницу, чтобы элемент был на самом верху:**
+
+Посмотрите на рисунок ниже, на нём -- та же страница, только прокрученная, и тот же элемент "STANDARDS".
+
+<ul>
+<li>Координата `clientY` изменилась. Она теперь равна `0`, так как элемент находится вверху окна.</li>
+<li>Координата `pageY` осталась такой же, так как отсчитывается от левого-верхнего угла *документа*.</li>
+</ul>
+
+<img src="standards-scroll.png">
+
+**Итак, координаты `pageX/pageY` не меняются при прокрутке, в отличие от  `clientX/clientY`.** 
+
+Технически, координаты относительно страницы включают в себя текущую прокрутку. Эти две системы координат жёстко связаны, их разность `pageY-clientY` -- в точности размер текущей прокрученной области.
+
+## Получение координат [#getCoords]
+
+К сожалению, готовой функции для получения координат элемента относительно страницы нет. Но её можно легко написать самим.
+
+Наша функция `getCoords(elem)` будет брать результат `elem.getBoundingClientRect()` и прибавлять текущую прокрутку документа.
+
+Результат: объект с координатами `{left: .., top: ..}`
+
+```js
+//+ autorun
+function getCoords(elem) {
+    // (1)
+    var box = elem.getBoundingClientRect();
+    
+    var body = document.body;
+    var docEl = document.documentElement;
+    
+    // (2)
+    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
+    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+    
+    // (3)
+    var clientTop = docEl.clientTop || body.clientTop || 0;
+    var clientLeft = docEl.clientLeft || body.clientLeft || 0;
+    
+    // (4)
+    var top  = box.top +  scrollTop - clientTop;
+    var left = box.left + scrollLeft - clientLeft;
+    
+    return { top: top, left: left };
+}
+```
+
+Разберем что и зачем, по шагам:
+
+<ol>
+<li>Получаем прямоугольник.</li>
+<li>Считаем прокрутку страницы. Все браузеры, кроме IE8- поддерживают свойство `pageXOffset/pageYOffset`. В более старых IE, когда установлен DOCTYPE, прокрутку можно получить из `documentElement`, ну и наконец если DOCTYPE некорректен -- использовать `body`.</li>
+<li>В IE документ может быть смещен относительно левого верхнего угла. Получим это смещение.</li>
+<li>Добавим прокрутку к координатам окна и вычтем смещение `html/body`, чтобы получить координаты всего документа.</li>
+</ol>
+
+### Устаревший метод: offset*
+
+Есть альтернативный способ нахождения координат -- это пройти всю цепочку `offsetParent` от элемента вверх и сложить отступы `offsetLeft/offsetTop`.
+
+Мы разбираем его здесь с учебной целью, так как он используется лишь в старых браузерах.
+
+Вот функция, реализующая такой подход.
+
+```js
+//+ autorun
+function getOffsetSum(elem) {
+  var top = 0, left = 0;
+
+  while(elem) {
+    top = top + parseInt(elem.offsetTop);
+    left = left + parseInt(elem.offsetLeft);
+    elem = elem.offsetParent;         
+  }
+   
+  return {top: top, left: left};
+}
+```
+
+Казалось бы, код нормальный. И он как-то работает, но разные браузеры преподносят "сюрпризы", включая или выключая размер рамок и прокруток из `offsetTop/Left`, некорректно учитывая позиционирование. В итоге результат не всегда верен. Можно, конечно, разобрать эти проблемы и посчитать действительно аккуратно и правильно этим способом, но зачем? Ведь есть `getBoundingClientRect`.
+
+### Сравнение offset* с getBoundingClientRect
+
+Посмотрим разницу между описанными способами вычисления координат на примере.
+
+В прямоугольнике ниже есть 3 вложенных `DIV`. Все они имеют `border`, кое-кто из них имеет `position/margin/padding`.
+
+Кликните по внутреннему (жёлтому) элементу, чтобы увидеть результаты обоих методов: `getOffsetSum` и `getCoords`, а также реальные координаты курсора -- `event.pageX/pageY` (мы обсудим их позже в статье [](/fixevent)).
+
+[pre]
+<div style="position:relative;padding:10px;height:80px;width:380px;border:7px red solid">
+  <div style="border:10px blue solid;padding:2px;position:absolute;left:20%;top:20%">
+    <div id="getBoundingClientRectEx" style="background-color:yellow;border:4px solid black;margin:2px;cursor:pointer">Кликните, чтобы получить координаты getOffsetSum и getCoords</div>
+  </div>
+</div>
+<div id="getBoundingClientRectExRes">
+<div><b>getOffsetSum</b>:<span>значение getOffsetSum()</span></div>
+<div><b>getCoords</b>:<span>значение getCoords()</span></div>
+<div><b>mouse</b>:<span>координаты мыши</span></div>
+</div>
+
+<script>
+document.getElementById('getBoundingClientRectEx').onclick = function(event) {
+    var o = getOffsetSum(this);
+    var orect = getCoords(this);
+    
+    event = event || window.event;
+    if ( event.pageX == null && event.clientX != null ) {
+        var html = document.documentElement, body = document.body;
+        event.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
+        event.pageY = event.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
+    }
+
+    var list = document.getElementById('getBoundingClientRectExRes').getElementsByTagName('SPAN')
+    list[0].innerHTML = '{left:'+o.left+', top:'+o.top+'}'
+    list[1].innerHTML = '{left:'+orect.left+', top:'+orect.top+'}'
+    list[2].innerHTML = 'pageX='+event.pageX+' pageY='+event.pageY
+}
+</script>
+[/pre]
+
+**При клике на любом месте желтого блока вы легко увидите разницу между `getOffsetSum(elem)` и `getCoords(elem)`.**
+
+Для того, чтобы узнать, какой же результат верный, кликните в левом-верхнем углу жёлтого блока, причём обратите внимание -- кликать нужно не на жёлтом, а на чёрном, это рамка, она тоже входит в элемент. Будут видны точные координаты мыши, так что вы можете сравнить их с `getOffsetSum/getCoords`.
+
+Пример клика в правильном месте (обратите внимание на разницу координат):
+
+<img src="getcoords-compare.png">
+
+**Именно `getCoords` всегда возвращает верное значение :).**
+
+
+
+
+### Комбинированный подход  
+
+Фреймворки, которые хотят быть совместимыми со старыми браузерами, используют комбинированный подход:
+
+```js
+function getOffset(elem) {
+    if (elem.getBoundingClientRect) {
+        return getCoords(elem);
+    } else { // старый браузер
+        return getOffsetSum(elem);
+    }
+}
+```
+
+[js hide="Открыть полный код getCoords/getOffsetSum"]
+function getOffsetSum(elem) {
+  var top=0, left=0
+  while(elem) {
+    top = top + parseInt(elem.offsetTop)
+    left = left + parseInt(elem.offsetLeft)
+    elem = elem.offsetParent        
+  }
+   
+  return {top: top, left: left}
+}
+
+
+function getCoords(elem) {
+    var box = elem.getBoundingClientRect()
+    
+    var body = document.body;
+    var docEl = document.documentElement;
+    
+    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
+    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+    
+    var clientTop = docEl.clientTop || body.clientTop || 0;
+    var clientLeft = docEl.clientLeft || body.clientLeft || 0;
+    
+    var top  = box.top +  scrollTop - clientTop;
+    var left = box.left + scrollLeft - clientLeft;
+    
+    return { top: Math.round(top), left: Math.round(left) };
+}
+
+
+function getOffset(elem) {
+    if (elem.getBoundingClientRect) {
+        return getCoords(elem)
+    } else {
+        return getOffsetSum(elem)
+    }
+}
+[/js]
+
+
+## Координаты на экране screenX/screenY
+
+Есть ещё одна система координат, которая используется очень редко, но для полноты картины необходимо её упомянуть.
+
+Координаты относительно *экрана* `screenX/screenY` отсчитываются от его левого-верхнего угла. Имеется в виду именно *весь экран*, а не окно браузера.
+
+<img src="screen.png">
+
+Такие координаты могут быть полезны, например, при работе с мобильными устройствами или для открытия нового окна посередине экрана вызовом [window.open](https://developer.mozilla.org/en-US/docs/DOM/window.open).
+
+<ul>
+<li>**Общая информация об экране хранится в глобальной переменной [screen](https://developer.mozilla.org/en/DOM/window.screen):**
+
+```js
+//+ run
+// общая ширина/высота
+alert( screen.width + ' x ' + screen.height ); 
+
+// доступная ширина/высота (за вычетом таскбара и т.п.)
+alert( screen.availWidth + ' x ' + screen.availHeight); 
+
+// есть и ряд других свойств screen (см. документацию)
+```
+
+</li>
+<li>**Координаты левого-верхнего угла браузера на экране хранятся в `window.screenX,` `window.screenY`** (не поддерживаются IE8-):
+
+```js
+//+ run
+alert("Браузер находится на " + window.screenX + "," + window.screenY);
+```
+
+Они могут быть и меньше нуля, если окно частично вне экрана. </li>
+<li>**Координаты *DOM-элемента* на экране получить нельзя, браузер не предоставляет свойств и методов для этого.**</li>
+</ul>
+
+## Итого  
+
+У любой точки в браузере есть координаты:
+<ol>
+<li>Относительно окна `window` -- `elem.getBoundingClientRect()`.</li>
+<li>Относительно документа `document` -- добавляем прокрутку, во всех фреймворках есть готовая функция.</li>
+<li>Относительно экрана `screen` -- можно узнать координаты браузера, но не элемента.</li>
+</ol>
+
+Метод `elem.getBoundingClientRect()` поддерживается IE очень давно, с версии 6, а вот версии других браузеров старше чем 2010 года (примерно), могут не иметь его. Для них (и только для них) используется подсчёт координат суммированием `offsetTop/Left`.
+
+Координаты будут нужны нам далее, при работе с событиями мыши (координаты клика) и элементами (перемещение).
+
diff --git a/2-ui/1-document/18-coordinates-document/getcoords-compare.png b/2-ui/1-document/18-coordinates-document/getcoords-compare.png
new file mode 100755
index 00000000..8459a297
Binary files /dev/null and b/2-ui/1-document/18-coordinates-document/getcoords-compare.png differ
diff --git a/2-ui/1-document/18-coordinates-document/getcoords-compare@2x.png b/2-ui/1-document/18-coordinates-document/getcoords-compare@2x.png
new file mode 100755
index 00000000..51f50217
Binary files /dev/null and b/2-ui/1-document/18-coordinates-document/getcoords-compare@2x.png differ
diff --git a/2-ui/1-document/18-coordinates-document/pagewindow0.png b/2-ui/1-document/18-coordinates-document/pagewindow0.png
new file mode 100755
index 00000000..83672bfb
Binary files /dev/null and b/2-ui/1-document/18-coordinates-document/pagewindow0.png differ
diff --git a/2-ui/1-document/18-coordinates-document/screen.png b/2-ui/1-document/18-coordinates-document/screen.png
new file mode 100755
index 00000000..40905f92
Binary files /dev/null and b/2-ui/1-document/18-coordinates-document/screen.png differ
diff --git a/2-ui/1-document/18-coordinates-document/standards-scroll.png b/2-ui/1-document/18-coordinates-document/standards-scroll.png
new file mode 100755
index 00000000..0ab7389b
Binary files /dev/null and b/2-ui/1-document/18-coordinates-document/standards-scroll.png differ
diff --git a/2-ui/1-document/18-coordinates-document/standards.png b/2-ui/1-document/18-coordinates-document/standards.png
new file mode 100755
index 00000000..f0e49efa
Binary files /dev/null and b/2-ui/1-document/18-coordinates-document/standards.png differ
diff --git a/2-ui/1-document/19-support-polyfill/1-polyfill-textcontent-ie8/solution.md b/2-ui/1-document/19-support-polyfill/1-polyfill-textcontent-ie8/solution.md
new file mode 100644
index 00000000..af305164
--- /dev/null
+++ b/2-ui/1-document/19-support-polyfill/1-polyfill-textcontent-ie8/solution.md
@@ -0,0 +1,30 @@
+Код для полифилла здесь имеет стандартный вид:
+
+```js
+(function() {
+
+  // проверяем поддержку
+  if (document.createElement('div').textContent === undefined) {
+
+    // определяем свойство
+    Object.defineProperty(Element.prototype, "textContent", { 
+        get : function() {
+          return this.innerText;
+        },
+        set : function(value) {
+          this.innerText = value;
+        }
+      }
+    );
+  }
+
+})();
+```
+
+Единственный тонкий момент -- в проверке поддержки.
+
+Мы часто можем использовать уже существующий элемент. В частности, при проверке `firstElementChild` мы можем проверить его наличие в `document.documentElement`. 
+
+Однако, в данном случае попытка получить `document.documentElement.textContent` при поддержке этого свойства приведёт к совершенно лишним затратам времени и памяти на генерацию текстового содержимого всего документа.
+
+Поэтому мы создаём временный пустой элемент и проверяем наличие свойства у него.
diff --git a/2-ui/1-document/19-support-polyfill/1-polyfill-textcontent-ie8/task.md b/2-ui/1-document/19-support-polyfill/1-polyfill-textcontent-ie8/task.md
new file mode 100644
index 00000000..aaad6bbd
--- /dev/null
+++ b/2-ui/1-document/19-support-polyfill/1-polyfill-textcontent-ie8/task.md
@@ -0,0 +1,9 @@
+# Полифилл для textContent
+
+[importance 5]
+
+Свойство `textContent` не поддерживается IE8. Однако, там есть свойство `innerText`.
+
+Создаёте полифилл для него, который использует `innerText`. При наличии полифилла в IE8 свойство `textContent` должно стать "псевдонимом" для `innerText`.
+
+Хотя свойство `innerText` и работает по-иному, нежели `textContent`, но в некоторых ситуациях они могут быть взаимозаменимы. Именно на них направлен полифилл.
diff --git a/2-ui/1-document/19-support-polyfill/article.md b/2-ui/1-document/19-support-polyfill/article.md
new file mode 100644
index 00000000..fd56413e
--- /dev/null
+++ b/2-ui/1-document/19-support-polyfill/article.md
@@ -0,0 +1,232 @@
+# Современный DOM: полифиллы
+
+В старых IE, особенно в IE8 и ниже, ряд стандартных DOM-свойств не поддерживаются или поддерживаются плохо.
+
+Но это не значит, что, поддерживая IE8-, мы должны о них забыть!
+
+Их можно использовать, необходимо только поставить нужный полифилл.
+[cut]
+
+## Полифиллы
+
+"Полифилл" (англ. polyfill) -- это библиотека, которая добавляет в старые браузеры поддержку возможностей, которые в современных браузерах являются встроенными.
+
+Один полифилл мы уже видели, когда изучали собственно JavaScript -- это библиотека [ES5 shim](https://github.com/es-shims/es5-shim). Если её подключить, то в IE8- начинают работать многие возможности ES5. Работает она через модификацию стандартных объектов и их прототипов. Это типично для полифиллов.
+
+В работе с DOM несовместимостей гораздо больше, как и способов их обхода.
+
+Как правило, полифиллы организованы в виде коллекции, из которой можно как выбрать отдельные свойства и функции, так и подключить всё вместе, пачкой.
+
+Примеры полифиллов:
+<ul>
+<li>[](https://github.com/jonathantneal/polyfill) -- ES5 вместе с DOM</li>
+<li>[](https://github.com/termi/ES5-DOM-SHIM) -- ES5 вместе с DOM</li>
+<li>[](https://github.com/inexorabletash/polyfill) -- ES5+ вместе с DOM</li>
+</ul>
+
+Есть и более мелкие библиотеки, а также коллекции ссылок на них:
+
+<ul>
+<li>[](http://compatibility.shwups-cms.ch/en/polyfills/)</li>
+<li>[](http://html5please.com/#polyfill)</li>
+<li>[](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills)</li>
+</ul>
+
+Например, мы хотим в браузере IE8 использовать свойство `firstElementChild`, которое по умолчанию отсутствует.
+
+Для этого мы либо смотрим свою любимую коллекцию полифиллов на предмет его поддержки, либо набираем в Google: ["\"polyfill firstElementChild\""](https://www.google.ru/search?q=polyfill+firstElementChild). Одна из ссылок укажет на [](http://compatibility.shwups-cms.ch/en/polyfills/)... 
+
+И вот, пожалуйста, код, который нужно подключить к IE8, чтобы получить `firstElementChild` (и не только):
+<ul>
+<li>[](http://compatibility.shwups-cms.ch/en/polyfills?&id=81)</li>
+</ul>
+
+## Что делает полифилл?
+
+Как работает полифилл для `firstElementChild`? Посмотрим внимательнее на его JS:
+
+```js
+//+ run
+*!*
+if( document.createElement('div').firstElementChild === undefined ) { // (1)
+*/!*
+
+*!*
+  Object.defineProperty(Element.prototype, 'firstElementChild', { // (2)
+*/!*
+    get: function () { 
+      var el = this.firstChild;
+      do {
+        if( el.nodeType === 1 ) {
+          return el;
+        }
+        el = el.nextSibling;
+      } while(el);
+
+      return null;
+    }
+  });
+}
+```
+
+Если этот код запустить, то `firstElementChild` появится у всех элементов в IE8.
+
+Общий вид этого полифилла довольно типичен. Обычно полифилл состоит из двух частей:
+<ol>
+<li>Проверка, есть ли встроенная возможность.</li>
+<li>Эмуляция, если её нет.</li>
+</ol>
+
+### Проверка встроенного свойства
+
+Для проверки встроенной поддержки `firstElementChild` создаём элемент и смотрим, есть ли у него это свойство.
+
+**"Фишка" заключается в том, что если бы DOM-свойство поддерживалось, то его значение никогда не было бы `undefined`. Если детей нет  -- свойство было бы `null`.**
+
+Сравните:
+
+```js
+//+ run
+var div = document.createElement('div');
+
+alert( div.firstChild ); // null, поддержка есть
+alert( div.blabla ); // undefined, поддержки нет
+```
+
+**Важная тонкость -- элемент, который мы тестируем, должен *по стандарту* поддерживать такое свойство.**
+
+Попытаемся, к примеру, проверить "поддержку" свойства `value`. У `input` оно есть, у `div` такого свойства нет:
+
+```js
+//+ run
+var div = document.createElement('div');
+var input = document.createElement('input');
+
+alert( input.value ); // пустая строка, поддержка есть
+alert( div.value );  // undefined, поддержки нет
+```
+
+[smart header="Поддержка значений свойств"]
+**Если мы хотим проверить поддержку не свойства целиком, а некоторых его значений, то ситуация сложнее.**
+
+Например, нам интересно, поддерживает ли браузер `<input type="range">`. То есть, понятно, что свойство `type` у `input`, в целом, поддерживается, а вот конкретный тип `<input>`?
+
+**Для этого можно присвоить такой атрибут и посмотреть, подействовал ли он.**
+
+Например, сохранился ли он в свойстве:
+
+```js
+//+ run
+var input = document.createElement("input");
+*!*
+input.setAttribute("type", "range");
+*/!*
+
+var support = (input.type == "range");
+
+alert('Поддержка: ' + support);
+```
+
+Эта проверка работает, так как хоть в атрибут `type` и можно присвоить любую строку, но в DOM-свойство `type` [по стандарту](http://www.w3.org/TR/html-markup/input.html) хранит реальный тип `input'а`. Если присвоить неподдерживаемый тип, то свойство `type` не изменится. 
+
+Ниже вы можете увидеть, верно ли сработал код определения поддержки. Если он вывел `true`, то HTML ниже выведет красивый "слайдер", иначе -- текстовое поле.
+
+```html
+<!--+ autorun height=40 -->
+<input type="range">
+```
+
+[/smart]
+
+### Ещё проверки: Modernizr
+
+Существует целый фреймворк [Modernizr](http://modernizr.com/), посвящённый разнообразным проверкам. Использовать его очень просто.
+
+Можно либо скачать сборку, которая проверяет поддержку именно того, что интересно, со страницы [](http://modernizr.com/download/), либо подключить вообще все проверки файлом [](http://modernizr.com/downloads/modernizr.js).
+
+Пример использования:
+
+```html
+<!--+ run height="10" -->
+<script src="http://modernizr.com/downloads/modernizr.js"></script>
+
+<script>
+alert( Modernizr.inputtypes.range ); // есть поддержка input type="range"
+</script>
+```
+
+### Добавляем поддержку
+
+Если мы осуществили проверку и видим, что встроенной поддержки нет -- полифилл должен её добавить.
+
+Для этого вспомним, что DOM элементы описываются соответствующими JS-классами.
+
+Например:
+<ul>
+<li>`<li>` -- [HTMLLiElement](http://www.w3.org/TR/html5/grouping-content.html#the-li-element) (см. секцию DOM Interface)</li>
+<li>`<a>` -- [HTMLAnchorElement](http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element)</li>
+<li>`<body>` -- [HTMLBodyElement](http://www.w3.org/TR/html5/sections.html#the-body-element)</li>
+</ul>
+
+Они наследуют, как указано в секции DOM Interface по ссылкам выше, от [HTMLElement](http://www.w3.org/TR/html5/dom.html#htmlelement), который является общим родительским классом для HTML-элементов.
+
+А `HTMLElement`, в свою очередь, наследует от [Element](http://www.w3.org/TR/dom/#interface-element), который является общим родителем не только для HTML, но и для других DOM-структур, например для XML и SVG.
+
+**Для добавления нужной возможности берётся правильный класс и модифицируется его `prototype`.**
+
+Самое простое -- это добавить всем элементам в прототип функцию, например:
+
+```js
+//+ run
+Element.prototype.sayHi = function() {
+  alert("Привет от " + this);
+}
+
+document.body.sayHi(); // Привет от [object HTMLBodyElement]
+```
+
+**Сложнее -- добавить свойство, но это тоже возможно, через `Object.defineProperty`:**
+
+```js
+//+ run
+Object.defineProperty(Element.prototype, 'lowerTag', { 
+  get: function() {
+    return this.tagName.toLowerCase();
+  }
+});
+
+alert( document.body.lowerTag ); // body
+```
+
+[warn header="Геттер-сеттер и IE8"]
+В IE8 современные методы для работы со свойствами, такие как [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty), [Object.getOwnPropertyDescriptor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) и другие не поддерживаются для произвольных объектов, но отлично работают для DOM-элементов.
+
+Чем полифиллы и пользуются.
+[/warn]
+
+В итоге получается, что если в браузере нет нужного свойства -- оно появляется.
+ 
+Эта техника почти не работает в совсем старых IE6,7. Когда-то для них использовалась особая "IE-магия" при помощи `.htc`-файлов, которые [более не поддерживаются](http://msdn.microsoft.com/en-us/library/ie/hh801216.aspx). 
+
+Если нужно поддерживать и эти версии, то рекомендуется воспользоваться фреймворками. К счастью, для большинства проектов эти браузеры уже стали историей. 
+
+## Итого
+
+<ul>
+<li>Для того, чтобы спокойно и без оглядки на старые браузеры использовать современные возможности DOM, используются особые библиотеки, которые называют "полифиллами" (polyfill).</li>
+<li>Для поиска полифилла обычно достаточно ввести в поисковике `"polyfill"`, и нужное свойство либо метод. Как правило, полифиллы идут в виде коллекций скриптов.</li>
+<li>Полифиллы хороши тем, что мы просто подключаем их и используем везде современный DOM/JS, а когда старые браузеры окончательно отомрут -- просто выкинем полифилл, без изменения кода.</li>
+</ul>
+
+Для создания полифилла DOM-свойства или метода:
+<ul>
+<li>Создаётся элемент, который его, в теории, должен поддерживать.</li>
+<li>Соответствующее свойство сравнивается с `undefined`.</li>
+<li>Если его нет -- модифицируется прототип, обычно это `Element.prototype` -- в него дописываются новые геттеры и функции.</li>
+</ul>
+
+Другие полифиллы сделать сложнее. Например, для добавления поддержки `<input type="range">` полифилл должен искать все такие элементы на странице и обрабатывать их. Возможности такого полифилла ограничены -- если уже существующему `<input>` поменять `type` на `range` -- полифилл не "подхватит" его. 
+
+И это нормальная ситуация, что полифилл не обеспечивает 100% совместимости. Скорее всего, мы не собираемся так делать, а значит -- полифилл вполне подойдёт. 
+
+
diff --git a/2-ui/1-document/2-dom-nodes/1-body-from-head/solution.md b/2-ui/1-document/2-dom-nodes/1-body-from-head/solution.md
new file mode 100644
index 00000000..4fd0177f
--- /dev/null
+++ b/2-ui/1-document/2-dom-nodes/1-body-from-head/solution.md
@@ -0,0 +1,18 @@
+Выведет `null`, так как на момент выполнения скрипта тег `<body>` ещё не обработан браузером.
+
+Попробуйте в действии:
+
+```html
+<!--+ run -->
+<html>
+<head>
+  <script>
+    alert(document.body); // null
+  </script>
+</head>
+<body>
+  Привет, мир!
+</body>
+</html>
+```
+
diff --git a/2-ui/1-document/2-dom-nodes/1-body-from-head/task.md b/2-ui/1-document/2-dom-nodes/1-body-from-head/task.md
new file mode 100644
index 00000000..9303132d
--- /dev/null
+++ b/2-ui/1-document/2-dom-nodes/1-body-from-head/task.md
@@ -0,0 +1,21 @@
+# Что выведет этот alert?
+
+[importance 5]
+
+Что выведет `alert`?
+
+```html
+<html>
+<head>
+*!*
+  <script>
+    alert(document.body); // ?
+  </script>
+*/!*
+</head>
+<body>
+  Привет, мир!
+</body>
+</html>
+```
+
diff --git a/2-ui/1-document/2-dom-nodes/article.md b/2-ui/1-document/2-dom-nodes/article.md
new file mode 100644
index 00000000..f7e53cac
--- /dev/null
+++ b/2-ui/1-document/2-dom-nodes/article.md
@@ -0,0 +1,250 @@
+# Дерево DOM
+
+Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) -- объектная модель, используемая для XML/HTML-документов.
+
+
+[cut]
+Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом "элемент". Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом "текст".
+
+**DOM -- это представление документа в виде дерева объектов, доступное для изменения через JavaScript.**
+
+## Пример DOM
+
+Построим, для начала, дерево DOM для следующего документа.
+
+```html
+<!--+ run -->
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>О лосях</title>
+  </head>
+  <body>
+     Правда о лосях
+   </body>
+</html>
+```
+
+<div class="domtree"></div>
+<script>
+var node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n    "},{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"О лосях"}]},{"name":"#text","nodeType":3,"content":"\n  "}]},{"name":"#text","nodeType":3,"content":"\n  "},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n     Правда о лосях\n   \n\n"}]}]}
+
+drawHtmlTree(node, [].pop.call(document.querySelectorAll('div.domtree')), 690, 350);
+</script>
+
+В этом дереве выделено два типа узлов.
+
+<ol>
+<li><span style="color:#5e8aae">Теги образуют синие узлы-элементы (element node).</span> Естественным образом одни узлы вложены в другие. Структура дерева образована за счет синих элементов-узлов -- тегов HTML.</li>
+<li><span style="color:#ab9347">Текст внутри элементов образует **текстовые узлы** (text node),</span> обозначенные как `#text`. Текстовый узел содержит исключительно строку текста и не может иметь потомков.</li>
+</ol>
+
+Например, у корневого элемента `<html>` есть три узла-потомка: `<head>`, текстовый узел и `<body>`
+
+**На рисунке выше синие узлы-элементы можно кликать, при этом их дети будут скрываться-раскрываться.**
+
+Обратите внимание на специальные символы в текстовых узлах:
+<ul>
+<li>перевод строки: `↵`</li>
+<li>пробел: `␣`</li>
+</ul>
+
+**Пробелы и переводы строки -- это тоже текст, полноправные символы, которые учитываются в DOM!**
+
+В частности, в примере выше тег `<head>` содержит не только узел-элемент `<title>`, но и два текстовых узла до и после него, состоящие из пробелов и переводов строк. Они не видны, но они существуют!
+
+Исключения из этого правила только на самом верхнем уровне -- пробелы до `<head>` по стандарту игнорируются, а любое содержимое после `</body>` не создаёт узла, браузер переносит его в конец `body`.
+
+В остальных случаях всё честно -- если пробелы есть в документе, то они есть и в DOM, а если их убрать, то и в DOM их не будет, получится так:
+
+```html
+<!DOCTYPE HTML>
+<html><head><title>О лосях</title></head><body>Правда о лосях</body></html>
+```
+
+<div class="domtree"></div>
+<script>
+var node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"О лосях"}]}]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Правда о лосях\n"}]}]}
+
+drawHtmlTree(node,  [].pop.call(document.querySelectorAll('div.domtree')), 690, 300);
+</script>
+
+## Автоисправление
+
+При чтении неверного HTML браузер автоматически корректирует его для показа и при построении DOM.
+
+В частности, всегда будет верхний тег `<html>`. Даже если в тексте нет -- в DOM он будет, браузер создаст его самостоятельно. 
+
+То же самое касается и тега `<body>`. 
+
+Например, если файл состоит из одного слова `"Привет"`, то браузер автоматически обернёт его в `<html>` и `<body>`. 
+
+**При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.**
+
+Такой документ:
+
+```html
+<p>Привет
+<li>Мама
+<li>и
+<li>Папа
+```
+
+...Превратится вот во вполне респектабельный DOM, браузер сам закроет теги:
+
+<div class="domtree"></div>
+<script>
+var node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"P","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Привет\n"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Мама\n"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"и\n"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Папа\n"}]}]}]}
+
+drawHtmlTree(node,  [].pop.call(document.querySelectorAll('div.domtree')), 690, 400);
+</script>
+
+[warn header="Таблицы всегда содержат `<tbody>`"]
+Важный "особый случай" при работе с DOM -- таблицы. По стандарту DOM они обязаны иметь `<tbody>`, однако по стандарту HTML их можно написать без него.
+
+В этом случае браузер добавляет `<tbody>` самостоятельно.
+
+Например, для такого HTML:
+
+```html
+<table id="table">
+  <tr><td>1</td></tr>
+</table>
+```
+
+DOM-структура будет такой:
+<div class="domtree"></div>
+<script>
+var node = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType":1,"children":[{"name":"TR","nodeType":1,"children":[{"name":"TD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"1"}]},{"name":"#text","nodeType":3,"content":"\n"}]}]}]};
+
+drawHtmlTree(node,  [].pop.call(document.querySelectorAll('div.domtree')), 600, 200);
+</script>
+
+Вы видите? Появился `<tbody>`, как будто документ был таким:
+
+```html
+<table>
+*!*
+  <tbody>
+*/!*
+    <tr><td>1</td></tr>
+*!*
+  </tbody>
+*/!*
+</table>
+```
+
+Важно знать об этом, иначе при работе с таблицами возможны сюрпризы.
+[/warn]
+
+
+## Другие типы узлов
+
+Дополним страницу новыми тегами и комментарием:
+
+```html
+<!DOCTYPE HTML>
+<html>
+  <body>
+    Правда о лосях
+    <ol>
+      <li>Лось — животное хитрое</li>
+*!*
+      <!-- комментарий -->
+*/!*
+      <li>..и коварное!</li>
+    </ol>
+  </body>
+</html>
+```
+
+<div class="domtree"></div>
+<script>
+var node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n    Правда о лосях\n    "},{"name":"OL","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n      "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Лось — животное хитрое"}]},{"name":"#text","nodeType":3,"content":"\n      "},{"name":"#comment","nodeType":8,"content":" комментарий "},{"name":"#text","nodeType":3,"content":"\n      "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"..И коварное!"}]},{"name":"#text","nodeType":3,"content":"\n    "}]},{"name":"#text","nodeType":3,"content":"\n  \n\n"}]}]};
+
+drawHtmlTree(node,  [].pop.call(document.querySelectorAll('div.domtree')), 690, 550);
+</script>
+
+**В этом примере тегов уже больше, и даже появился узел нового типа -- *комментарий*.**
+
+Казалось бы, зачем комментарий в DOM? На отображение-то он всё равно не влияет. Но так как он есть в HTML -- обязан присутствовать в DOM-дереве.
+
+**Всё, что есть в HTML, находится и в DOM.** 
+
+Вообще-то это секрет, но и директива `<!DOCTYPE...>` тоже является DOM-узлом, и находится в дереве DOM непосредственно перед HTML. На иллюстрациях выше этот факт скрыт, поскольку здесь и далее мы с этим узлом работать не будем. 
+
+Даже сам объект `document`, формально, является DOM-узлом, самым-самым корневым.
+
+Всего различают 12 типов узлов, но на практике мы работаем с тремя из них: элемент, текст и, редко, комментарии (если они есть в HTML).
+
+## Возможности, которые дает DOM
+
+Зачем, кроме красивых рисунков, нужна иерархическая модель DOM? 
+
+**DOM нужен для того, чтобы манипулировать страницей -- читать информацию из HTML, создавать и изменять элементы.** 
+
+Узел `HTML`  можно получить как `document.documentElement`, а `BODY` -- как `document.body`. Получив узел, мы можем что-то сделать с ним.
+
+Например, можно поменять цвет `BODY` и вернуть обратно:
+
+```js
+//+ run
+document.body.style.backgroundColor = 'red';
+alert('Поменяли цвет BODY');
+
+document.body.style.backgroundColor = '';
+alert('Сбросили цвет BODY');
+```
+
+Фактически, DOM предоставляет возможность делать со страницей всё, что угодно, и далее мы этому научимся.
+
+## Особенности IE8-
+
+IE8- не генерирует текстовые узлы, если они состоят только из пробелов.
+
+ То есть, такие два документа дадут идентичный DOM:
+
+```html
+<!DOCTYPE HTML>
+<html><head><title>О лосях</title></head><body>Правда о лосях</body></html>
+```
+
+И такой:
+
+```html
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>О лосях</title>
+  </head>
+  <body>
+    Правда о лосях
+  </body>
+</html>
+```
+
+Эта, с позволения сказать, "оптимизация" не соответствует стандарту и IE9+ уже работает как нужно, то есть как описано ранее.
+
+Но, по большому счёту, для нас должно быть без разницы, старый или новый IE.
+
+**При работе с DOM/HTML мы в любом случае не должны быть завязаны на то, есть пробел между тегами или его нет. Мало ли, сегодня он есть, а завтра решили переформатировать HTML и его не стало.**
+
+К счастью, свойства и методы DOM, которые мы пройдём далее, вполне позволяют писать код, который будет работать корректно во всех версиях браузеров.
+
+## Итого
+
+<ul>
+<li>DOM-модель -- это внутреннее представление HTML-страницы в виде дерева.</li>
+<li>Все элементы страницы, включая теги, текст, комментарии, являются узлами DOM.</li>
+<li>У элементов DOM есть свойства и методы, которые позволяют изменять их.</li>
+<li>IE8- не генерирует пробельные узлы.</li>
+</ul>
+
+Кстати, DOM-модель используется не только в JavaScript, это известный способ представления XML-документов.
+
+В следующих главах мы лучше познакомимся с DOM и увидим, какие свойства и методы нужны, чтобы творить красивые штуки со страницей.
+
+[libs]
+d3
+domtree
+[/libs]
\ No newline at end of file
diff --git a/2-ui/1-document/20-dom-cheatsheet/article.md b/2-ui/1-document/20-dom-cheatsheet/article.md
new file mode 100644
index 00000000..c893a1a8
--- /dev/null
+++ b/2-ui/1-document/20-dom-cheatsheet/article.md
@@ -0,0 +1,157 @@
+# Итого: DOM-шпаргалка
+
+В этой статье перечислены основные свойства и методы DOM, которые мы изучили.
+
+Используйте её, чтобы быстро подглядеть то, что изучали ранее.
+
+[cut]
+
+## Создание
+
+<dl>
+<dt>`document.createElement(tag)`</dt><dd>создать элемент с тегом `tag`</dd>
+<dt>`document.createTextNode(txt)`</dt><dd>создать текстовый узел с текстом `txt`</dd>
+<dt>`node.cloneNode(deep)`</dt><dd>клонировать существующий узел, если `deep=false`, то без потомков.</dd>
+</dl>
+
+## Свойства узлов
+
+<dl>
+<dt>`node.nodeType`</dt><dd>тип узла: 1(элемент) / 3(текст) / другие.</dd>
+<dt>`elem.tagName`</dt><dd>тег элемента.</dd>
+<dt>`elem.innerHTML`</dt><dd>HTML внутри элемента.</dd>
+<dt>`node.data`</dt><dd>содержимое любого узла любого типа, кроме элемента.</dd>
+</dl>
+
+## Ссылки
+
+<dl>
+<dt>`document.documentElement`</dt>
+<dd>элемент `<HTML>`</dd>
+<dt>`document.body`</dt>
+<dd>элемент `<BODY>`</dd>
+</dl>
+
+По всем узлам:
+<ul>
+<li>`parentNode`</li>
+<li>`nextSibling` `previousSibling`</li>
+<li>`childNodes` `firstChild` `lastChild`</li>
+</ul>
+
+Только по элементам:
+
+<ul>
+<li>`children`</li>
+<li>`nextElementSibling` `previousElementSibling`</li>
+<li>`firstElementChild` `lastElementChild`</li>
+</ul>
+
+В IE8- из них работает только `children`, причём содержит не только элементы, но и комментарии (ошибка в браузере).
+
+### Таблицы
+
+<dl>
+<dt>`table.rows[N]`</dt>
+<dd>строка `TR` номер `N`.</dd>
+<dt>`tr.cells[N]`</dt>
+<dd>ячейка `TH/TD` номер `N`.</dd>
+<dt>`tr.sectionRowIndex`</dt>
+<dd>номер строки в таблице в секции `THEAD/TBODY`.<dd>
+<dt>`td.cellIndex`</dt>
+<dd>номер ячейки в строке.</dd>
+</dl>
+
+### Формы
+
+<dl>
+<dt>`document.forms[N/name]`</dt>
+<dd>форма по номеру/имени.</dd>
+<dt>`form.elements[N/name]`</dt>
+<dd>элемент формы по номеру/имени</dd>
+<dt>`element.form`</dt>
+<dd>форма для элемента.</dd>
+</dl>
+
+## Поиск
+
+
+<dl>
+<dt>`*.querySelector(css)`</dt>
+<dd>По селектору, только первый элемент</dd>
+<dt>`*.querySelectorAll(css)`</dt>
+<dd>По селектору CSS3, в IE8 по CSS 2.1</dd>
+<dt>`document.getElementById(id)`</dt>
+<dd>По уникальному `id`</dd>
+<dt>`document.getElementsByName(name)`</dt>
+<dd>По атрибуту `name`,  в IE<10 работает только для элементов, где `name` предусмотрен стандартом.</dd>
+<dt>`*.getElementsByTagName(tag)`</dt>
+<dd>По тегу `tag`</dd>
+<dt>`*.getElementsByClassName(class)`</dt>
+<dd>По классу, IE9+, корректно работает с элементами, у которых несколько классов.</dd>
+</dl>
+
+При поддержки IE только версии 8 и выше, можно использовать только `querySelector/querySelectorAll`. 
+
+Для более старых IE нужен либо фреймворк, который сам умеет искать узлы по селектору, наподобие jQuery, либо пользоваться методами `get*`, все из которых, кроме `...ByClassName`, поддерживаются с древних времён.
+
+## Изменение
+
+<ul>
+<li>`parent.appendChild(newChild)`</li>
+<li>`parent.removeChild(child)`</li>
+<li>`parent.insertBefore(newChild, refNode)`</li>
+<li>`parent.insertAdjacentHTML("beforeBegin|afterBegin|beforeEnd|afterEnd", html)`</li>
+</ul>
+
+## Классы и стили
+
+<dl>
+<dt>`elem.className`</dt>
+<dd>Атрибут `class`</dt>
+<dt>`elem.classList.add(class) remove(class) toggle(class) contains(class)`</dt>
+<dd>Управление классами в HTML5, для IE8+ есть [эмуляция](https://github.com/eligrey/classList.js/blob/master/classList.js).</dd>
+<dt>`elem.style`</dt>
+<dd>Стили в атрибуте `style` элемента</dd>
+<dt>`getComputedStyle(elem, "")`</dd>
+<dd>Стиль, с учётом всего каскада, вычисленный и применённый (только чтение)</dd>
+</dl>
+
+## Размеры и прокрутка элемента
+
+<dl>
+<dt>`clientLeft/Top`</dt>
+<dd>Ширина левой/верхней рамки `border`</dd>
+<dt>`clientWidth/Height`</dt>
+<dd>Ширина/высота внутренней части элемента, включая содержимое и `padding`, не включая полосу прокрутки (если есть).</dd>
+<dt>`scrollWidth/Height`</dt>
+<dd>Ширина/высота внутренней части элемента, с учетом прокрутки.</dd>
+<dt>`scrollLeft/Top`</dt>
+<dd>Ширина/высота прокрученной области.</dd>
+<dt>`offsetWidth/Height`</dt>
+<dd>Полный размер элемента: ширина/высота, включая `border`.</dd>
+</dl>
+
+## Размеры и прокрутка страницы
+
+<ul>
+<li>ширина/высота видимой области: `document.documentElement.clientHeight`</li>
+<li>прокрутка(чтение):  ` window.pageYOffset || document.documentElement.scrollTop`</li>
+<li>прокрутка(изменение):
+<ul>
+<li>`window.scrollBy(x,y)`: на x,y относительно текущей позиции.</li>
+<li>`window.scrollTo(pageX, pageY)`: на координаты в документе.</li>
+<li>`elem.scrollIntoView(true/false)`: прокрутить, чтобы `elem` стал видимым и оказался вверху окна(`true`) или внизу(`false`)</li>
+</ul>
+</li>
+</ul>
+
+## Координаты
+
+<ul>
+<li>относительно окна: `elem.getBoundingClientRect()`</li>
+<li>относительно документа: `elem.getBoundingClientRect()` + прокрутка страницы</li>
+<li>получить элемент по координатам: `document.elementFromPoint(clientX, clientY)`</li>
+</ul>
+
+Список намеренно сокращён, чтобы было проще найти то, что нужно.
diff --git a/2-ui/1-document/3-dom-console/1.png b/2-ui/1-document/3-dom-console/1.png
new file mode 100755
index 00000000..864a95c9
Binary files /dev/null and b/2-ui/1-document/3-dom-console/1.png differ
diff --git a/2-ui/1-document/3-dom-console/1@2x.png b/2-ui/1-document/3-dom-console/1@2x.png
new file mode 100755
index 00000000..64d717a2
Binary files /dev/null and b/2-ui/1-document/3-dom-console/1@2x.png differ
diff --git a/2-ui/1-document/3-dom-console/2.png b/2-ui/1-document/3-dom-console/2.png
new file mode 100755
index 00000000..91dac732
Binary files /dev/null and b/2-ui/1-document/3-dom-console/2.png differ
diff --git a/2-ui/1-document/3-dom-console/2@2x.png b/2-ui/1-document/3-dom-console/2@2x.png
new file mode 100755
index 00000000..cfa45822
Binary files /dev/null and b/2-ui/1-document/3-dom-console/2@2x.png differ
diff --git a/2-ui/1-document/3-dom-console/3.png b/2-ui/1-document/3-dom-console/3.png
new file mode 100755
index 00000000..4ccaa0b2
Binary files /dev/null and b/2-ui/1-document/3-dom-console/3.png differ
diff --git a/2-ui/1-document/3-dom-console/3@2x.png b/2-ui/1-document/3-dom-console/3@2x.png
new file mode 100755
index 00000000..bc8a66d6
Binary files /dev/null and b/2-ui/1-document/3-dom-console/3@2x.png differ
diff --git a/2-ui/1-document/3-dom-console/article.md b/2-ui/1-document/3-dom-console/article.md
new file mode 100644
index 00000000..526bc747
--- /dev/null
+++ b/2-ui/1-document/3-dom-console/article.md
@@ -0,0 +1,83 @@
+# Работа с DOM из консоли
+
+Исследовать и изменять DOM можно с помощью инструментов разработки, встроенных в браузер. Посмотрим средства для этого на примере Google Chrome.
+[cut]
+
+## Доступ к элементу
+
+Откройте документ [losi.html](/files/tutorial/browser/dom/dom-tree/losi.html) и, в инструментах разработчика, перейдите во вкладку Elements.
+
+Чтобы проанализировать любой элемент:
+<ul>
+<li>Выберите его во вкладке Elements.</li>
+<li>...Либо внизу вкладки Elements есть лупа, при нажатии на которую можно выбрать элемент кликом.</li>
+<li>...Либо, что обычно удобнее всего, просто кликните на нужном месте на странице правой кнопкой и выберите в меню "Проверить Элемент".</li>
+</ul>
+
+<img src="1.png">
+
+**В более новой версии Chrome расположение элементов управления может отличаться, но происходящее всё равно должно быть понятно.**
+
+Справа будет различная информация об элементе:
+<dl>
+<dt>Computed Style</dt>
+<dd>Итоговые свойства CSS элемента, которые он приобрёл в результате применения всего каскада стилей, включая внешние CSS-файлы и атрибут `style`.</dd>
+<dt>Style</dt>
+<dd>Каскад стилей, применённый к элементу. Каждое стилевое правило отдельно, здесь же можно менять стили кликом.</dd>
+<dt>Metrics</dt>
+<dd>Размеры элемента.</dd>
+<dt>...</dt>
+<dd>И еще некоторые реже используемые вкладки, которые станут понятны по мере изучения DOM.</dd>
+</dl>
+
+[warn header="DOM не полностью отображается в инструментах!"]
+Во вкладке Elements не отображаются пробельные узлы. Это сделано для удобства просмотра. На самом-то деле они есть. 
+
+Зато в Elements могут быть видны псевдоэлементы, такие как `::before`, `::after`. Это также сделано для удобства, в DOM их нет.
+[/warn]
+
+
+## Ссылки $0 $1...
+
+Зачастую бывает нужно выбрать элемент DOM и сделать с ним что-то на JavaScript. 
+
+Находясь во вкладке Elements, откройте консоль нажатием Esc (или перейдите на вкладку Console).
+
+**Последний элемент, выбранный во вкладке Elements, доступен в консоли как `$0`, предыдущий -- `$1` и так далее.**
+
+Запустите на элементе команду, которая делает его красным:
+
+```js
+$0.style.backgroundColor = 'red';
+```
+
+Пример, как это может выглядеть в браузере:
+
+<img src="2.png">
+
+**Итак, можно выделить элемент и редактировать его в консоли. Есть и обратный путь: любой элемент из консоли можно открыть во вкладке Elements.**
+
+Чтобы показать элемент из JS-переменной во вкладке Elements:
+<ol>
+<li>Выведите эту переменную в консоли, например при помощи `console.log`.</li>
+<li>Кликните на нём правой кнопкой мыши.</li>
+<li>Выберите соответствующий пункт меню.</li>
+</ol>
+
+<img src="3.png">
+
+**Таким образом можно легко перемещаться из Elements в консоль и обратно.**
+
+Выбрал элемент -- попробовал на нём JavaScript -- посмотрел что получилось в DOM.
+
+## Ещё методы консоли
+
+Для поиска элементов в консоли есть два специальных метода:
+<ul>
+<li>`$$("div.my")` -- возвращает все элементы по CSS-селектору.</li>
+<li>`$("div.my")` -- возвращает один элемент по CSS-селектору, если их много, то только первый.</li>
+</ul>
+
+Более полная документация по методам консоли доступна здесь: [Console API Reference для Chrome](https://developers.google.com/chrome-developer-tools/docs/console-api) и здесь:  [Command Line API для Firebug](https://getfirebug.com/wiki/index.php/Command_Line_API), а также на [firebug.ru](http://firebug.ru).
+
+Другие браузеры реализуют почти такой же функционал, как и Chrome/Firebug.
diff --git a/2-ui/1-document/4-traversing-dom/1-dom-children/index.html b/2-ui/1-document/4-traversing-dom/1-dom-children/index.html
new file mode 100755
index 00000000..e8e9d60f
--- /dev/null
+++ b/2-ui/1-document/4-traversing-dom/1-dom-children/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+  <head><meta charset="utf-8"></head>
+  <body>
+    <div>Пользователи:</div>
+    <ul id="user-list">
+      <li>Маша</li>
+      <li>Вовочка</li>
+    </ul>
+
+    <!-- комментарий -->
+
+    <script>
+      // ... ваш код
+    </script>
+
+  </body>
+</html>
diff --git a/2-ui/1-document/4-traversing-dom/1-dom-children/solution.md b/2-ui/1-document/4-traversing-dom/1-dom-children/solution.md
new file mode 100644
index 00000000..e04fff6a
--- /dev/null
+++ b/2-ui/1-document/4-traversing-dom/1-dom-children/solution.md
@@ -0,0 +1,34 @@
+# HEAD
+
+Два способа:
+
+```js
+document.documentElement.children[0]
+document.documentElement.firstChild
+```
+
+Второй способ работает, так как пробелы перед `<head>` игнорируются.
+
+# UL
+
+Два варианта:
+
+```js
+document.getElementById('user-list')
+document.body.children[1]
+```
+
+Предпочтителен второй вариант, так как он не зависит от положении узла в документе. Мало ли, вдруг мы решим вставить какую-то ещё информацию перед ним.
+
+# LI
+
+Два варианта:
+
+```js
+document.getElementById('user-list').children[1];
+document.body.children[1].children[1]; // LI
+```
+
+Если комментарий переместить между элементами списка, то в IE8- он станет одним из `children`, в результате последний код станет работать некорректно.
+
+Чтобы это обойти, нужно либо не ставить комментарии в те места HTML, где планируются такие выборки, либо использовать другие методы поиска в HTML, которые мы рассмотрим [далее](/searching-elements-dom).
\ No newline at end of file
diff --git a/2-ui/1-document/4-traversing-dom/1-dom-children/solution.view/index.html b/2-ui/1-document/4-traversing-dom/1-dom-children/solution.view/index.html
new file mode 100755
index 00000000..e8e9d60f
--- /dev/null
+++ b/2-ui/1-document/4-traversing-dom/1-dom-children/solution.view/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+  <head><meta charset="utf-8"></head>
+  <body>
+    <div>Пользователи:</div>
+    <ul id="user-list">
+      <li>Маша</li>
+      <li>Вовочка</li>
+    </ul>
+
+    <!-- комментарий -->
+
+    <script>
+      // ... ваш код
+    </script>
+
+  </body>
+</html>
diff --git a/2-ui/1-document/4-traversing-dom/1-dom-children/task.md b/2-ui/1-document/4-traversing-dom/1-dom-children/task.md
new file mode 100644
index 00000000..92c74b0a
--- /dev/null
+++ b/2-ui/1-document/4-traversing-dom/1-dom-children/task.md
@@ -0,0 +1,17 @@
+# DOM children
+
+[importance 5]
+
+Для страницы:
+
+```html
+<!--+ src="index.html" -->
+```
+
+<ul>
+<li>Напишите код, который получит элемент `HEAD`.</li>
+<li>Напишите код, который получит `UL`.</li>
+<li>Напишите код, который получит второй `LI`. Будет ли ваш код работать в IE8-, если комментарий переместить *между* элементами `LI`?</li>
+</ul>
+
+[edit src="solution" task/]
\ No newline at end of file
diff --git a/2-ui/1-document/4-traversing-dom/2-has-childnodes/solution.md b/2-ui/1-document/4-traversing-dom/2-has-childnodes/solution.md
new file mode 100644
index 00000000..73176af3
--- /dev/null
+++ b/2-ui/1-document/4-traversing-dom/2-has-childnodes/solution.md
@@ -0,0 +1,27 @@
+Вначале нерабочие способы, которые могут прийти на ум:
+
+```js
+if (!elem) { .. }
+```
+
+Это не работает, так как `elem` всегда есть, и является объектом. Так что проверка `if (elem)` всегда верна, вне зависимости от того, есть ли у `elem` потомки.
+
+```js
+if (!elem.childNodes) { ... }
+```
+
+Тоже не работает, так как псевдо-массив `childNodes` всегда существует. Он может быть пуст или непуст, но он всегда является объектом, так что проверка `if (elem.childNodes)` всегда верна.
+
+Несколько рабочих способов:
+
+```js
+if (!elem.childNodes.length) { ... }
+
+if (!elem.firstChild) { ... }
+
+if (!elem.lastChild) { ... }
+```
+
+Последний - самый короткий.
+
+P.S. Также есть метод [hasChildNodes](https://developer.mozilla.org/en-US/docs/Web/API/Node.hasChildNodes), который позволяет вызовом `elem.hasChildNodes()` определить наличие детей. Он работает так же, как проверка `elem.childNodes.length != 0`.
\ No newline at end of file
diff --git a/2-ui/1-document/4-traversing-dom/2-has-childnodes/task.md b/2-ui/1-document/4-traversing-dom/2-has-childnodes/task.md
new file mode 100644
index 00000000..d7aa46f6
--- /dev/null
+++ b/2-ui/1-document/4-traversing-dom/2-has-childnodes/task.md
@@ -0,0 +1,13 @@
+# Проверка существования детей
+
+[importance 5]
+
+Придумайте самый короткий код для проверки, пуст ли элемент `elem`. 
+
+"Пустой" -- значит нет дочерних узлов, даже текстовых.
+
+```js
+if (/*...ваш код проверки elem... */) { узел elem пуст }
+```
+
+Что написать в условии `if` ?
\ No newline at end of file
diff --git a/2-ui/1-document/4-traversing-dom/3-navigation-links-which-null/solution.md b/2-ui/1-document/4-traversing-dom/3-navigation-links-which-null/solution.md
new file mode 100644
index 00000000..ca09870b
--- /dev/null
+++ b/2-ui/1-document/4-traversing-dom/3-navigation-links-which-null/solution.md
@@ -0,0 +1,10 @@
+<ol>
+<li>Да, верно, с оговоркой. Элемент `elem.lastChild` последний, у него нет правого соседа. 
+
+**Оговорка:** `elem.lastChild.nextSibling` выдаст ошибку если `elem` не имеет детей.
+</li>
+<LI>Нет, неверно, это может быть текстовый узел. Значением `elem.children[0]` является первый узел-элемент, перед ним может быть текст.
+
+Аналогично предыдущему случаю, если у `elem` нет детей-элементов -- будет ошибка.
+</li>
+</ul>
diff --git a/2-ui/1-document/4-traversing-dom/3-navigation-links-which-null/task.md b/2-ui/1-document/4-traversing-dom/3-navigation-links-which-null/task.md
new file mode 100644
index 00000000..993d7d8b
--- /dev/null
+++ b/2-ui/1-document/4-traversing-dom/3-navigation-links-which-null/task.md
@@ -0,0 +1,9 @@
+# Вопрос по навигационным ссылкам
+
+[importance 5]
+
+Если `elem` -- это произвольный узел DOM...
+
+Верно ли, что `elem.lastChild.nextSibling` всегда `null`?
+
+Верно ли, что `elem.children[0].previousSibling` всегда `null` ?
\ No newline at end of file
diff --git a/2-ui/1-document/4-traversing-dom/article.md b/2-ui/1-document/4-traversing-dom/article.md
new file mode 100644
index 00000000..6cc5884b
--- /dev/null
+++ b/2-ui/1-document/4-traversing-dom/article.md
@@ -0,0 +1,374 @@
+# Ссылки между DOM-элементами
+
+Для того, чтобы изменить узел DOM или его содержимое, нужно сначала его получить.
+
+Доступ к DOM начинается с объекта `document`. Из него можно добраться до любых узлов.
+
+[cut]
+
+Вот картина, которая, с небольшими дополниниями, будет обсуждаться в этой главе:
+
+<img src="navigation.png">
+
+## Корень: documentElement и body   
+
+Войти в "корень" дерева можно двумя путями.
+
+<dl>
+<dt>`<HTML>` = `document.documentElement`</dt>
+<dd>Первая точка входа -- `document.documentElement`. Это свойство ссылается на DOM-объект для тега `HTML`.</dd>
+<dt>`<BODY>` = `document.body`</dt>
+<dd>Вторая точка входа -- `document.body`, который соответствует тегу `BODY`.</dd>
+</dl>
+
+Оба варианта отлично работают. Но есть одна тонкость: **`document.body` может быть равен `null`**.
+
+Например, при доступе к `document.body` в момент обработки тега `HEAD`, то `document.body = null`. Это вполне логично, потому что `BODY` еще не существует.
+
+**Нельзя получить доступ к элементу, которого еще не существует в момент выполнения скрипта.**
+
+В следующем примере, первый `alert` выведет `null`:
+
+```html
+<!--+ run -->
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <script>
+      alert("Из HEAD: " + document.body); // null
+    </script>
+  </head>
+  <body>
+  
+    <script>
+      alert("Из BODY: " + document.body);
+    </script>
+
+  </body>
+</html>
+```
+
+[smart header="В DOM активно используется `null`"]
+
+В мире DOM в качестве значения "нет такого элемента" или "узел не найден" используется не `undefined`, а `null`.
+[/smart]
+
+## document.getElementById или просто id
+
+Если элементу назначен специальный атрибут `id`, то можно получить его прямо по переменной с именем из значения `id`.
+
+Например:
+
+```html
+<!--+ run -->
+<div id="*!*content-holder*/!*">
+  <div id="*!*content*/!*">Элемент</div>
+</div>
+
+<script>
+*!*
+  alert( content ); // DOM-элемент
+  alert( window['content-holder'] ); // в имени дефис, поэтому через [...]
+*/!*
+</script>
+```
+
+По стандарту, значение `id` должно быть уникально, то есть в документе может быть только один элемент с данным `id`.
+
+Это поведение соответствует [стандарту](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem). Оно существует, в первую очередь, для совместимости, как осколок далёкого прошлого и не очень приветствуется, поскольку использует глобальные переменные.  Браузер пытается помочь нам, смешивая пространства имён JS и DOM, но при этом возможны конфликты.
+
+**Более правильной и общепринятой практикой является доступ к элементу вызовом `document.getElementById("идентификатор")`.**
+
+Например:
+
+```html
+<!--+ run -->
+<div id="*!*content*/!*">Выделим этот элемент</div>
+
+<script>
+*!*
+  var elem = document.getElementById('content');
+
+  elem.style.background = 'red';
+
+  alert( elem == content ); // true
+
+  content.style.background = ""; // один и тот же элемент
+*/!*
+</script>
+```
+
+**Далее я изредка буду использовать прямое обращение через переменную в примерах, чтобы было меньше букв и проще было понять происходящее. Но предпочтительным методом является `document.getElementById`.**
+
+## Дочерние элементы
+
+Здесь и далее мы будем использовать два принципиально разных термина.
+
+<ul>
+<li>**Дочерние элементы (или дети)** -- элементы, которые лежат *непосредственно* внутри данного. Например, внутри `<HTML>` обычно лежат `<HEAD>` и `<BODY>`.</li>
+<li>**Потомки** -- все элементы, которые лежат внутри данного, вместе с их детьми, детьми их детей и так далее. То есть, всё поддерево.</li>
+</ul>
+
+### childNodes   
+
+Псевдо-массив `childNodes` хранит все дочерние элементы, включая текстовые.
+
+Пример ниже последовательно выведет дочерние элементы `document.body`:
+
+```html
+<!--+ run src="index.html" -->
+```
+
+Во всех браузерах, кроме старых IE, `document.body.childNodes[0]` это текстовый узел из пробелов, а `DIV` -- второй потомок: `document.body.childNodes[1]`.
+
+В IE8- не создаются пустые текстовые узлы, поэтому там дети начнутся с `DIV`.
+
+Как вы думаете, почему перечисление узлов в примере выше заканчивается на `SCRIPT` ? Неужели под скриптом нет пробельного узла?
+
+[hide]
+Конечно, потому что пробельный узел будет в итоговом документе, но его еще нет на момент выполнения скрипта.
+[/hide]
+
+[warn header="Коллекция только для чтения!"]
+Все навигационные свойства, которые перечислены в этой главе -- только для чтения. Нельзя просто заменить элемент присвоением `childNodes[i] = ...`. В частности, методы массива для `childNodes` тоже не поддерживаются, поэтому это свойство и называют "коллекцией".
+
+Изменения DOM осуществляется другими методами, которые мы рассмотрим далее, все навигационные ссылки при этом обновляются автоматически.
+[/warn]
+
+
+
+### children   
+
+А что если текстовые узлы нам не интересны? 
+
+**Свойство `children`, перечисляет только дочерние узлы-элементы, соответствующие тегам.**
+ 
+Модифицируем предыдущий пример, применив `children` вместо `childNodes`. 
+
+Теперь он будет выводить не все узлы, а только узлы-элементы:
+
+```html
+<!--+ src="index.html" run link -->
+```
+
+[warn header="В IE8- в `children` присутствуют узлы-комментарии"]
+С точки зрения стандарта это ошибка, но IE8- также включает в `children` узлы, соответствующие HTML-комментариям.
+
+Это может привести к сюрпризам при использовании свойства `children`, поэтому HTML-комментарии либо убирают либо используют функцию (или фреймворк, к примеру, jQuery), который автоматически офильтрует их.
+[/warn]
+
+### Коллекции -- не массивы
+
+Коллекции, которые возвращают методы поиска, не являются массивами.
+
+У них нет методов массива, таких как `join`, `pop`, `forEach` и т.п. 
+
+Например, этот пример выполнится с ошибкой:
+
+```js
+//+ run
+var elems = document.documentElement.childNodes;
+
+*!*
+elems.forEach(function(elem) { // нет такого метода!
+*/!*
+  /* ... */
+});
+```
+
+Можно для перебора коллекции использовать обычный цикл `for(var i=0; i<elems.length; i++) ...`
+
+Но что делать, если уж очень хочется воспользоваться методами массива?
+
+Варианта два:
+<ol>
+<li>Применить метод массива через `call/apply`:
+
+```js
+//+ run
+var elems = document.documentElement.childNodes;
+
+*!*
+[].forEach.call(elems, function(elem) { 
+*/!*
+  alert(elem);  // HEAD, текст, BODY
+});
+```
+
+</li>
+<li>При помощи [Array.prototype.slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) сделать из коллекции массив.
+
+Обычно вызов `arr.slice(a, b)` делает новый массив и копирует туда элементы `arr` с индексами от `a` до `b-1` включительно. Если же вызвать его без аргументов `arr.slice()`, то он делает новый массив и копирует туда все элементы  `arr`. 
+
+Это работает и для коллекции:
+
+```js
+//+ run
+var elems = document.documentElement.childNodes;
+*!*
+elems = Array.prototype.slice.call(elems); // теперь elems - массив
+*/!*
+
+elems.forEach(function(elem) { 
+  alert(elem.tagName);  // HEAD, текст, BODY
+});
+```
+
+</li>
+</ol>
+
+[warn header="Нельзя перебирать коллекцию через `for..in`"]
+Ранее мы говорили, что не рекомендуется использовать для перебора массива цикл `for..in`.
+
+**Коллекции -- наглядный пример, почему нельзя. Они похожи на массивы, но у них есть свои свойства и методы, которых в массивах нет.**
+
+При запуске этого кода вы увидите, что `alert` сработает не 3, а целых 5 раз!
+
+```js
+//+ run
+var elems = document.documentElement.childNodes;
+
+for(var key in elems) {
+  alert(key); // 0, 1, 2, length, item
+}
+```
+
+Цикл `for..in` вывел не только ожидаемые индексы `0`, `1`, `2`, по которым лежат узлы в коллекции, но и свойства `length` (в коллекции оно enumerable), а также функцию `item(n)` -- она никогда не используется, возвращает `n-й` элемент коллекции, старый аналог обращения по индексу `[n]`. 
+
+В реальном коде мы хотим перебирать только элементы, поэтому желательно использовать `for(var i=0; i<elems.length; i++)`, либо методы массивов, как описано выше.
+[/warn]
+
+## firstChild и lastChild   
+
+Свойства `firstChild` и `lastChild` обеспечивают быстрый доступ к первому и последнему дочернему элементу.
+
+Например, для документа:
+
+```html
+<body>
+  <div>...</div>
+  <ul>...</ul>
+  <div>...</div>
+</body>
+```
+
+DOM-дерево будет таким (внутренности `div` и `ul` скрыты):
+
+<div class="domtree" id="traversing-dom-domtree"></div>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+
+var node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n  "},{"name":"DIV","nodeType":1,"_children":[{"name":"#text","nodeType":3,"content":"..."}]},{"name":"#text","nodeType":3,"content":"\n  "},{"name":"UL","nodeType":1,"_children":[{"name":"#text","nodeType":3,"content":"..."}]},{"name":"#text","nodeType":3,"content":"\n  "},{"name":"DIV","nodeType":1,"_children":[{"name":"#text","nodeType":3,"content":"..."}]},{"name":"#text","nodeType":3,"content":"\n"}]}]}
+
+
+  drawHtmlTree(node, document.getElementById('traversing-dom-domtree'), 690, 400);
+});
+</script>
+
+Если бы пробельных узлов не было, например, в IE8, то была бы такая картина ссылок:
+
+<img src="children.png">
+
+С другой стороны, так как пробельные узлы, всё же, есть, то `body.firstChild` и `body.lastChild` будут указывать как раз на них, то есть на первый и последний `#text`.
+
+Всегда верны равенства:
+
+```js
+body.firstChild === body.childNodes[0]
+body.lastChild === body.childNodes[body.childNodes.length-1]
+```
+
+## parentNode, previousSibling и nextSibling   
+
+Ранее мы смотрели свойства для доступа к детям. Теперь рассмотрим ссылки для доступа вверх и в стороны от узла.
+
+<ul>
+<li>Свойство `parentNode` ссылается на родительский узел.</li>
+<li>Свойства `previousSibling` и `nextSibling` дают доступ к левому и правому соседу.</li>
+</ul>
+
+Ниже изображены ссылки между `BODY` и его потомками для документа:
+
+```html
+<!--+ src="index.html" run link -->
+```
+
+Ссылки (пробельные узлы обозначены решеткой `#`):
+
+<img src="siblings2.png">
+
+## Ссылки для элементов (IE9+)
+
+Все современные браузеры, включая IE9+, поддерживают дополнительные ссылки:
+
+<ul>
+<li>`firstElementChild` -- первый потомок-элемент (`=children[0]`)</li>
+<li>`lastElementChild` -- последний потомок-элемент (`=children[children.length-1]`)</li>
+<li>`nextElementSibling` -- правый брат-элемент</li>
+<li>`previousElementSibling` -- левый брат-элемент</li>
+<li>`parentElement` -- родительский узел-элемент, по факту отличается от `parentNode` только тем, что `document.documentElement.parentElement = null`, то есть `document` он элементом не считает.</li>
+</ul>
+
+Любые другие узлы, кроме элементов, просто игнорируются. 
+
+Например:
+
+```html
+<!--+ run -->
+<body>
+  firstElementChild: <div>...</div>
+  <!-- комментарий -->
+  lastElementChild: <span>...</span>
+
+  <script>
+    alert(document.body.firstElementChild.nextElementSibling); // SPAN
+  </script>
+
+</body>
+```
+
+Современные браузеры также поддерживают дополнительные интерфейсы для обхода DOM c фильтром по узлам: `NodeIterator`, `TreeFilter` и `TreeWalker`. Они были утверждены аж в 2000-м году, однако на практике оказались неудобными, и потому практически не применяются. Вы можете почитать о них в стандарте [DOM 2 Traversal](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-Filters). 
+
+
+## Итого
+
+Сверху в DOM можно войти либо через `document.documentElement` (тег `HTML`), либо через `document.body` (тег `BODY`).
+
+По элементу DOM можно получить всех соседей через ссылки:
+
+<dl>
+<dt>`childNodes`, `children`</dt>
+<dd>Список дочерних узлов.</dd>
+<dt>`firstChild`, `lastChild`</dt>
+<dd>Первый и последний потомки</dd>
+<dt>`parentNode`</dt>
+<dd>Родительский узел</dd>
+<dt>`previousSibling`, `nextSibling`</dt>
+<dd>Соседи влево-вправо</dd>
+</dl>
+
+Все навигационные ссылки доступны только для чтения и поддерживаются автоматически.
+
+Свойства-коллекции, хотя и имеют индексы, а также `length`, не являются массивами. Поэтому их и называют "псевдомассивами", "коллекциями" или "списками". Далее мы встретимся с кучей других полезных коллекций, которые тоже не будут массивами.
+
+В современных браузерах, включая IE9+, реализованы дополнительные свойства, работающие только для элементов: 
+
+<ul>
+<li>`firstElementChild` -- первый потомок-элемент</li>
+<li>`lastElementChild` -- последний потомок-элемент </li>
+<li>`nextElementSibling` -- правый брат-элемент</li>
+<li>`previousElementSibling` -- левый брат-элемент</li>
+</ul>
+
+Картинка только со ссылками для элементов:
+
+<img src="navigation-elements.png">
+
+<ul>
+<li>`children*` -- единственное свойство из списка, поддерживаемое IE8-.</li>
+</ul>
+
+[libs]
+d3
+domtree
+[/libs]
\ No newline at end of file
diff --git a/2-ui/1-document/4-traversing-dom/children.png b/2-ui/1-document/4-traversing-dom/children.png
new file mode 100755
index 00000000..1feaf4d5
Binary files /dev/null and b/2-ui/1-document/4-traversing-dom/children.png differ
diff --git a/2-ui/1-document/4-traversing-dom/index.html b/2-ui/1-document/4-traversing-dom/index.html
new file mode 100755
index 00000000..7f5319b2
--- /dev/null
+++ b/2-ui/1-document/4-traversing-dom/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+  <div>Начало</div>
+
+  <ul>
+    <li>Содержание</li>
+  </ul>
+
+  <div>Конец</div>
+</body>
+</html>
diff --git a/2-ui/1-document/4-traversing-dom/navigation-elements.png b/2-ui/1-document/4-traversing-dom/navigation-elements.png
new file mode 100755
index 00000000..59e387ae
Binary files /dev/null and b/2-ui/1-document/4-traversing-dom/navigation-elements.png differ
diff --git a/2-ui/1-document/4-traversing-dom/navigation-elements@2x.png b/2-ui/1-document/4-traversing-dom/navigation-elements@2x.png
new file mode 100755
index 00000000..bca8a83d
Binary files /dev/null and b/2-ui/1-document/4-traversing-dom/navigation-elements@2x.png differ
diff --git a/2-ui/1-document/4-traversing-dom/navigation.png b/2-ui/1-document/4-traversing-dom/navigation.png
new file mode 100755
index 00000000..1f4d6a46
Binary files /dev/null and b/2-ui/1-document/4-traversing-dom/navigation.png differ
diff --git a/2-ui/1-document/4-traversing-dom/navigation@2x.png b/2-ui/1-document/4-traversing-dom/navigation@2x.png
new file mode 100755
index 00000000..d55257de
Binary files /dev/null and b/2-ui/1-document/4-traversing-dom/navigation@2x.png differ
diff --git a/2-ui/1-document/4-traversing-dom/siblings2.png b/2-ui/1-document/4-traversing-dom/siblings2.png
new file mode 100755
index 00000000..a9a529ab
Binary files /dev/null and b/2-ui/1-document/4-traversing-dom/siblings2.png differ
diff --git a/2-ui/1-document/5-traversing-tables/1-select-diagonal-cells/solution.md b/2-ui/1-document/5-traversing-tables/1-select-diagonal-cells/solution.md
new file mode 100644
index 00000000..099f5e81
--- /dev/null
+++ b/2-ui/1-document/5-traversing-tables/1-select-diagonal-cells/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/1-document/5-traversing-tables/1-select-diagonal-cells/solution.view/index.html b/2-ui/1-document/5-traversing-tables/1-select-diagonal-cells/solution.view/index.html
new file mode 100755
index 00000000..8b548755
--- /dev/null
+++ b/2-ui/1-document/5-traversing-tables/1-select-diagonal-cells/solution.view/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    table { border-collapse: collapse; }
+    td { border: 1px solid black; padding: 3px 5px; }
+  </style>
+</head>
+<body>
+  <table>
+    <tr><td>1:1</td><td>2:1</td><td>3:1</td><td>4:1</td><td>5:1</td></tr>
+    <tr><td>1:2</td><td>2:2</td><td>3:2</td><td>4:2</td><td>5:2</td></tr>
+    <tr><td>1:3</td><td>2:3</td><td>3:3</td><td>4:3</td><td>5:3</td></tr>
+    <tr><td>1:4</td><td>2:4</td><td>3:4</td><td>4:4</td><td>5:4</td></tr>
+    <tr><td>1:5</td><td>2:5</td><td>3:5</td><td>4:5</td><td>5:5</td></tr>
+  </table>
+  <script>
+    var table = document.body.children[0];
+
+    for(var i=0; i<table.rows.length; i++) {
+      var row = table.rows[i];
+      row.cells[i].style.backgroundColor = 'red';
+    }
+
+  </script>
+</body>
+</html>
diff --git a/2-ui/1-document/5-traversing-tables/1-select-diagonal-cells/source.view/index.html b/2-ui/1-document/5-traversing-tables/1-select-diagonal-cells/source.view/index.html
new file mode 100755
index 00000000..b1fa9345
--- /dev/null
+++ b/2-ui/1-document/5-traversing-tables/1-select-diagonal-cells/source.view/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    table { border-collapse: collapse; }
+    td { border: 1px solid black; padding: 3px 5px; }
+  </style>
+</head>
+<body>
+  <table>
+    <tr><td>1:1</td><td>2:1</td><td>3:1</td><td>4:1</td><td>5:1</td></tr>
+    <tr><td>1:2</td><td>2:2</td><td>3:2</td><td>4:2</td><td>5:2</td></tr>
+    <tr><td>1:3</td><td>2:3</td><td>3:3</td><td>4:3</td><td>5:3</td></tr>
+    <tr><td>1:4</td><td>2:4</td><td>3:4</td><td>4:4</td><td>5:4</td></tr>
+    <tr><td>1:5</td><td>2:5</td><td>3:5</td><td>4:5</td><td>5:5</td></tr>
+  </table>
+  <script>
+    var table = document.body.children[0];
+
+    /* ваш код */
+
+  </script>
+</body>
+</html>
diff --git a/2-ui/1-document/5-traversing-tables/1-select-diagonal-cells/task.md b/2-ui/1-document/5-traversing-tables/1-select-diagonal-cells/task.md
new file mode 100644
index 00000000..7a1235ce
--- /dev/null
+++ b/2-ui/1-document/5-traversing-tables/1-select-diagonal-cells/task.md
@@ -0,0 +1,16 @@
+# Выделите ячейки по диагонали
+
+[importance 5]
+
+Напишите код, который выделит все ячейки в таблице по диагонали.
+
+Вам нужно будет получить из таблицы `table` все диагональные `td` и выделить их, используя код:
+
+```js
+td.style.backgroundColor = 'red';
+```
+
+Должно получиться так:
+[iframe src="solution"]
+
+[edit src="source" task/]
diff --git a/2-ui/1-document/5-traversing-tables/article.md b/2-ui/1-document/5-traversing-tables/article.md
new file mode 100644
index 00000000..c3d84b5e
--- /dev/null
+++ b/2-ui/1-document/5-traversing-tables/article.md
@@ -0,0 +1,58 @@
+# Особые ссылки для таблиц 
+
+У конкретных элементов DOM могут быть свои дополнительные ссылки для большего удобства навигации.
+
+В этой главе мы рассмотрим таблицу, так как это важный частный случай и просто для примера. Также дополнительные ссылки есть у форм, но работу с ними лучше осваивать отдельно.
+[cut]
+
+В списке ниже выделены наиболее полезные:
+
+<dl>
+<dt>`TABLE`</dt>
+<dd>
+<ul>
+<li>**`table.rows`** -- список строк `TR` таблицы.</li>
+<li>`table.caption/tHead/tFoot` -- ссылки на элементы таблицы `CAPTION`, `THEAD`, `TFOOT`.</li>
+<li>`table.tBodies` -- список элементов таблицы `TBODY`, по спецификации их может быть несколько.</li>
+</ul></dd>
+<dt>`THEAD/TFOOT/TBODY`</dt>
+<dd>
+<ul>
+<li>`tbody.rows` -- список строк `TR` секции.</li>
+</ul></dd>
+<dt>`TR`</dt>
+<dd>
+<ul>
+<li>**`tr.cells`** -- список ячеек `TD/TH`</li>
+<li>**`tr.sectionRowIndex`** -- номер строки в текущей секции `THEAD/TBODY`</li>
+<li>`tr.rowIndex` -- номер строки в таблице</li>
+</ul>
+</dd>
+<dt>`TD/TH`</dt>
+<dd>
+<ul>
+<li>**`td.cellIndex`** -- номер ячейки в строке</li>
+</ul>
+</dd>
+</dl>
+
+Пример использования:
+
+```html
+<!--+ run height=100 -->
+<table>
+  <tr> <td>один</td> <td>два</td>    </tr>
+  <tr> <td>три</td>  <td>четыре</td> </tr>
+</table>
+
+<script>
+var table = document.body.children[0];
+
+alert( table.*!*rows[0].cells[0]*/!*.innerHTML ) // "один"
+</script>
+```
+
+Спецификация: [HTML5: tabular data](http://www.w3.org/TR/html5/tabular-data.html).
+
+Даже если эти свойства не нужны вам прямо сейчас, имейте их в виду на будущее, когда понадобится пройтись по таблице.
+
diff --git a/2-ui/1-document/6-basic-dom-node-properties/1-console-firstchild-innerhtml/console-innerhtml.png b/2-ui/1-document/6-basic-dom-node-properties/1-console-firstchild-innerhtml/console-innerhtml.png
new file mode 100755
index 00000000..0f58e790
Binary files /dev/null and b/2-ui/1-document/6-basic-dom-node-properties/1-console-firstchild-innerhtml/console-innerhtml.png differ
diff --git a/2-ui/1-document/6-basic-dom-node-properties/1-console-firstchild-innerhtml/console-innerhtml@2x.png b/2-ui/1-document/6-basic-dom-node-properties/1-console-firstchild-innerhtml/console-innerhtml@2x.png
new file mode 100755
index 00000000..a7b48c6c
Binary files /dev/null and b/2-ui/1-document/6-basic-dom-node-properties/1-console-firstchild-innerhtml/console-innerhtml@2x.png differ
diff --git a/2-ui/1-document/6-basic-dom-node-properties/1-console-firstchild-innerhtml/solution.md b/2-ui/1-document/6-basic-dom-node-properties/1-console-firstchild-innerhtml/solution.md
new file mode 100644
index 00000000..87aba7d3
--- /dev/null
+++ b/2-ui/1-document/6-basic-dom-node-properties/1-console-firstchild-innerhtml/solution.md
@@ -0,0 +1,18 @@
+**Однозначно правильный ответ невозможен.**
+
+В консоли не выводятся пробельные узлы. Если перед `<h1>` находится пробельный узел, то будет `undefined`, а если нет -- то текст внутри `<h1>`.
+
+Пример с `undefined`:
+
+```html
+<!--+ run -->
+<body>
+<h1>Привет, мир!</h1>
+
+<script>
+alert( document.body.firstChild.innerHTML ); // undefined
+</script>
+</body>
+```
+
+Если убрать из него перевод строки перед `<h1>`, то было бы `"Привет, мир!"`.
\ No newline at end of file
diff --git a/2-ui/1-document/6-basic-dom-node-properties/1-console-firstchild-innerhtml/task.md b/2-ui/1-document/6-basic-dom-node-properties/1-console-firstchild-innerhtml/task.md
new file mode 100644
index 00000000..e5bab48c
--- /dev/null
+++ b/2-ui/1-document/6-basic-dom-node-properties/1-console-firstchild-innerhtml/task.md
@@ -0,0 +1,12 @@
+# Что выведет код в консоли?
+
+[importance 5]
+
+В браузере Chrome открыт HTML-документ.
+
+Вы зашли во вкладку Elements и видите такую картинку:
+<img src="console-innerhtml.png">
+
+В настоящий момент выбран элемент `<body>`.
+
+Что выведет код `$0.firstChild.innerHTML` в консоли?
\ No newline at end of file
diff --git a/2-ui/1-document/6-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md b/2-ui/1-document/6-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md
new file mode 100644
index 00000000..2a0e3976
--- /dev/null
+++ b/2-ui/1-document/6-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md
@@ -0,0 +1,16 @@
+Небольшой подвох -- в том, что во время выполнения скрипта последним тегом является `SCRIPT`. Браузер не может обработать страницу дальше, пока не выполнит скрипт.
+
+Так что результат будет `1` (узел-элемент).
+
+```html
+<!--+ run height=60 -->
+<!DOCTYPE HTML>
+<html>  
+<body>  
+   <script>
+      alert(document.body.lastChild.nodeType);
+   </script>
+</body>  
+</html>
+```
+
diff --git a/2-ui/1-document/6-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md b/2-ui/1-document/6-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md
new file mode 100644
index 00000000..481d07f0
--- /dev/null
+++ b/2-ui/1-document/6-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md
@@ -0,0 +1,17 @@
+# В инлайн скрипте lastChild.nodeType 
+
+[importance 5]
+
+Что выведет скрипт на этой странице?
+
+```html
+<!DOCTYPE HTML>
+<html>  
+<body>  
+   <script>
+      alert(document.body.lastChild.nodeType);
+   </script>
+</body>  
+</html>
+```
+
diff --git a/2-ui/1-document/6-basic-dom-node-properties/3-find-next-element/solution.md b/2-ui/1-document/6-basic-dom-node-properties/3-find-next-element/solution.md
new file mode 100644
index 00000000..4fb95abf
--- /dev/null
+++ b/2-ui/1-document/6-basic-dom-node-properties/3-find-next-element/solution.md
@@ -0,0 +1,101 @@
+# Менее эффективный вариант
+
+Цикл по правым соседям в поисках узла-элемента:
+
+```html
+<!--+ run -->
+<div>Первый</div>
+<!-- комментарий... -->
+<p>Второй</p>
+
+<script>
+*!*
+function getNextElement(elem) {
+  var current = elem.nextSibling;
+
+  while(current && current.nodeType != 1) {
+    current = current.nextSibling;
+  }
+ 
+  // два варианта окончания цикла:
+  // current == null (нет следующего узла-элемента)
+  // current.nodeType == 1 (нашли)
+  return current;
+}
+*/!*
+
+alert(getNextElement(document.body.children[0]).tagName); // "P"
+alert(getNextElement(document.body.lastChild)); // null
+</script>
+```
+
+# Более эффективный вариант
+
+Все браузеры, кроме IE<9, поддерживают свойство `nextElementSibling`. Воспользуемся этим.
+
+```html
+<!--+ run -->
+<div>Первый</div>
+<!-- комментарий... -->
+<p>Второй</p>
+
+<script>
+function getNextElement(elem) {
+*!*
+  if (elem.nextElementSibling !== undefined) {
+    return elem.nextElementSibling;
+  }
+*/!*
+  var current = elem.nextSibling;
+
+  while(current && current.nodeType != 1) {
+    current = current.nextSibling;
+  }
+ 
+  // два варианта окончания цикла:
+  // current == null (нет следующего узла-элемента)
+  // current.nodeType == 1 (нашли)
+  return current;
+}
+
+alert(getNextElement(document.body.children[0]).tagName); // "P"
+alert(getNextElement(document.body.lastChild)); // null
+</script>
+```
+
+В выделенном фрагменте мы проверяем поддержку этого свойства. Если оно поддерживается, то равно либо элементу-соседу, либо `null`, если такого соседа нет. В любом случае это не `undefined`.
+
+Если же оно не поддерживается, то производим те же вычисления, что в предыдущем решении.
+
+# Ещё более эффективный вариант
+
+Поддержка свойства `nextElementSibling` в браузере либо есть, либо её нет. Зачем проверять её для каждого элемента? Можно сделать это один раз и запомнить результат. А можно поступить ещё лучше -- определить функцию по-разному, в зависимости от того, поддерживается это свойство или нет.
+
+```html
+<!--+ run -->
+<div>Первый</div>
+<!-- комментарий... -->
+<p>Второй</p>
+
+<script>
+*!*
+var getNextElement = 
+  document.documentElement.nextElementSibling !== undefined ?
+  function(elem) {
+    return elem.nextElementSibling;
+  }
+  :
+  function(elem) {
+    var current = elem.nextSibling;
+    while(current && current.nodeType != 1) {
+      current = current.nextSibling;
+    }
+    return current;
+  };
+*/!*
+
+alert(getNextElement(document.body.children[0]).tagName); // "P"
+alert(getNextElement(document.body.lastChild)); // null
+</script>
+```
+
diff --git a/2-ui/1-document/6-basic-dom-node-properties/3-find-next-element/source.view/index.html b/2-ui/1-document/6-basic-dom-node-properties/3-find-next-element/source.view/index.html
new file mode 100755
index 00000000..c3b7fc56
--- /dev/null
+++ b/2-ui/1-document/6-basic-dom-node-properties/3-find-next-element/source.view/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+</head>
+<body>
+
+<div>Первый</div>
+<!-- комментарий... -->
+<p>Второй</p>
+
+<script>
+function getNextElement(elem) { /* ваш код */ }
+
+alert(getNextElement(document.body.children[0]).tagName); // P
+alert(getNextElement(document.body.lastChild)); // null
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/2-ui/1-document/6-basic-dom-node-properties/3-find-next-element/task.md b/2-ui/1-document/6-basic-dom-node-properties/3-find-next-element/task.md
new file mode 100644
index 00000000..c8b1777e
--- /dev/null
+++ b/2-ui/1-document/6-basic-dom-node-properties/3-find-next-element/task.md
@@ -0,0 +1,27 @@
+# Найти следующий элемент
+
+[importance 5]
+
+Напишите функцию `getNextElement(elem)`, которая возвращает следующий за `elem` узел-элемент (игнорирует остальные узлы).
+
+
+Пример:
+
+```html
+<div>Первый</div>
+<!-- комментарий... -->
+<p>Второй</p>
+
+<script>
+function getNextElement(elem) { /* ваш код */ }
+
+*!*
+alert(getNextElement(document.body.children[0]).tagName); // P
+alert(getNextElement(document.body.lastChild)); // null
+*/!*
+</script>
+```
+
+[edit src="source" /]
+
+P.S. Функция должна работать максимально эффективно и учитывать возможности современных браузеров.
\ No newline at end of file
diff --git a/2-ui/1-document/6-basic-dom-node-properties/4-tag-in-comment/solution.md b/2-ui/1-document/6-basic-dom-node-properties/4-tag-in-comment/solution.md
new file mode 100644
index 00000000..f791b12f
--- /dev/null
+++ b/2-ui/1-document/6-basic-dom-node-properties/4-tag-in-comment/solution.md
@@ -0,0 +1,19 @@
+Ответ: **`BODY`**.
+
+```html
+<!--+ run -->
+<script>
+var body = document.body;
+
+body.innerHTML = "<!--" + body.tagName + "-->"; 
+
+alert(body.firstChild.data); // BODY
+</script>
+```
+
+Происходящее по шагам:
+<ol>
+<li>Заменяем содержимое `<body>` на комментарий. Он будет иметь вид <code>&lt;!--BODY--&gt;</code>, так как `body.tagName == "BODY"`. Как мы помним, свойство `tagName` в HTML всегда находится в верхнем регистре.</li>
+<li>Этот комментарий теперь является первым и единственным потомком `body.firstChild`.</li>
+<li>Получим значение `data` для комментария `body.firstChild`. Оно равно содержимому узла для всех узлов, кроме элементов. Содержимое комментария: `"BODY"`.</li>
+</ol>
\ No newline at end of file
diff --git a/2-ui/1-document/6-basic-dom-node-properties/4-tag-in-comment/task.md b/2-ui/1-document/6-basic-dom-node-properties/4-tag-in-comment/task.md
new file mode 100644
index 00000000..2e42bbc4
--- /dev/null
+++ b/2-ui/1-document/6-basic-dom-node-properties/4-tag-in-comment/task.md
@@ -0,0 +1,16 @@
+# Тег в комментарии
+
+[importance 3]
+
+Что выведет этот код?
+
+```html
+<script>
+var body = document.body;
+
+body.innerHTML = "<!--" + body.tagName + "-->";  
+
+alert(body.firstChild.data); // что выведет? 
+</script>
+```
+
diff --git a/2-ui/1-document/6-basic-dom-node-properties/article.md b/2-ui/1-document/6-basic-dom-node-properties/article.md
new file mode 100644
index 00000000..35c86c74
--- /dev/null
+++ b/2-ui/1-document/6-basic-dom-node-properties/article.md
@@ -0,0 +1,503 @@
+# Свойства узлов: тип, тег и содержимое
+
+Для того, чтобы работать с DOM-узлами, нужно знать, какие свойства у них есть, и как изменение тех или иных свойств повлияет на документ.
+
+В этой главе мы познакомимся с основными, самыми важными свойствами, которые отвечают за тип DOM-узла, тег и содержимое.
+
+[cut]
+
+## Классы, иерархия DOM
+
+Самое главное различие между DOM-узлами -- разные узлы являются объектами различных классов.
+
+Основной объект в ней: [Node](http://dom.spec.whatwg.org/#interface-node), от которого наследуют остальные:
+
+<img src="hierarchy.png">
+
+На рисунке выше изображены основные объекты иерархии:
+<ul>
+<li>От `Node` наследуют различные типы узлов -- текстовые `Text`, комментарии `Comment` и элементы `Element`.</li>
+<li>Элементы `Element` -- это ещё не HTML, а более общий тип, который используется для узлов XML. От него наследуют, к примеру, `SVGElement` для SVG-графики и, конечно, `HTMLElement`.</li>
+<li>От `HTMLElement` уже наследуют разнообразные узлы HTML:
+<ul>
+<li>Для `<input>` -- `HTMLInputElement`</li>
+<li>Для `<body>` -- `HTMLBodyElement`</li>
+<li>Для `<a>` -- `HTMLAnchorElement`... и так далее.</li>
+</ul>
+</li>
+</ul>
+
+Узнать класс узла очень просто -- достаточно привести его к строке, к примеру, вывести:
+
+```js
+//+ run
+alert( document.body ); // [object HTMLBodyElement]
+```
+
+**Разные классы могут иметь разные свойства и методы, детальное описание которых можно найти в [спецификации](http://www.whatwg.org/specs/web-apps/current-work/multipage/).**
+
+Например, [The input element](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-element) описывает класс, соответствующий `<input>`, включая [interface HTMLInputElement](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#htmlinputelement), который нас как раз и интересует.
+
+Вот из него выдержка:
+
+```js
+interface HTMLInputElement : HTMLElement {
+  attribute DOMString accept; 
+  attribute DOMString alt;
+  attribute DOMString autocomplete;
+  attribute boolean autofocus;
+  ...
+  attribute DOMString value;
+  ...
+  void select();   
+  ... 
+}
+```
+
+Здесь мы видим, что у всех `<input>` есть свойства `accept`, `alt`, `autocomplete`, `autofocus`, `value`, метод `select()` и так далее. В зависимости от типа `<input>` чаще используются те или иные свойства. Позже мы к ним вернёмся.
+
+**Далее в этом разделе мы сосредоточимся на самых главных свойствах узлов DOM, без разницы какого типа.**
+
+## Тип: nodeType   
+
+Тип узла содержится в его свойстве `nodeType`.
+
+Как правило, мы работаем всего с двумя типами узлов:
+<ul>
+<li>Элемент.</li>
+<li>Текстовый узел.</li>
+</ul>
+
+На самом деле типов узлов гораздо больше. Строго говоря, их 12, и они описаны в спецификации с древнейших времён, см. <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1950641247">DOM Уровень 1</a>:
+
+```js
+interface Node {
+  // NodeType
+  const unsigned short      ELEMENT_NODE       = 1;
+  const unsigned short      ATTRIBUTE_NODE     = 2;
+  const unsigned short      TEXT_NODE          = 3;
+  const unsigned short      CDATA_SECTION_NODE = 4;
+  const unsigned short      ENTITY_REFERENCE_NODE = 5;
+  const unsigned short      ENTITY_NODE        = 6;
+  const unsigned short      PROCESSING_INSTRUCTION_NODE = 7;
+  const unsigned short      COMMENT_NODE       = 8;
+  const unsigned short      DOCUMENT_NODE      = 9;
+  const unsigned short      DOCUMENT_TYPE_NODE = 10;
+  const unsigned short      DOCUMENT_FRAGMENT_NODE = 11;
+  const unsigned short      NOTATION_NODE      = 12;   
+  ...
+}
+```
+
+Нам важны номера основных типов. 
+
+**Самые важные -- это `ELEMENT_NODE` под номером 1 и `TEXT_NODE` под номером 3.** 
+
+Например, выведем все узлы-потомки `document.body`, *являющиеся элементами*:
+
+```html
+<!--+ run -->
+<body>
+  <div>Читатели:</div>
+  <ul>
+    <li>Вася</li>
+    <li>Петя</li>
+  </ul>
+ 
+  <!-- комментарий -->
+
+  <script>   
+    var childNodes = document.body.childNodes;
+
+    for (var i=0; i<childNodes.length; i++) {
+
+*!*
+      // отфильтровать не-элементы  
+      if (childNodes[i].nodeType != 1) continue;
+*/!*
+
+      alert(childNodes[i]);
+
+    }
+  </script>
+</body>
+```
+
+Это свойство можно только читать, изменить его невозможно.
+
+
+## Тег: nodeName и tagName   
+
+Существует целых два свойства: `nodeName` и `tagName`, которые содержат название(тег) элемента узла. 
+
+**Название HTML-тега всегда находится в верхнем регистре.**
+
+Например, для `document.body`:
+
+```js
+//+ run
+alert( document.body.nodeName );   // BODY
+alert( document.body.tagName );   // BODY
+```
+
+[smart header="Когда `nodeName` не в верхнем регистре?"]
+У браузера есть два режима обработки документа: HTML и XML-режим. Обычно используется режим HTML, XML-режим включается, когда браузер получает XML-документ через `XMLHttpRequest`(технология AJAX) или при наличии заголовка `Content-Type: application/xml+xhtml`.
+
+В XML-режиме сохраняется регистр и `nodeName` может выдать "body" или даже "bOdY" -- в точности как указано в документе. 
+[/smart]
+
+### Какая разница между tagName и nodeName ?
+
+Разница отражена в названиях свойств, но неочевидна. 
+
+<ul>
+<li>Свойство `tagName` есть только у элементов `Element` (в IE8- также у комментариев, но это ошибка в браузере).</li>
+<li>Свойство `nodeName` определено для любых узлов `Node`, для элементов оно равно `tagName`, а для не-элементов обычно содержит строку с типом узла.</li>
+</ul>
+
+Таким образом, при помощи `tagName` мы можем работать только с элементами, а `nodeName` может что-то сказать и о других типах узлов.
+
+Например, сравним `tagName` и `nodeName` на примере узла-комментария и объекта `document`:
+
+```html
+<!--+ run -->
+<body><!-- комментарий -->
+
+<script>
+  // для комментария
+  alert(document.body.firstChild.nodeName); // #comment
+  alert(document.body.firstChild.tagName); // undefined (в IE8- воскл. знак "!")
+
+  // для документа
+  alert(document.nodeName); // #document, т.к. корень DOM -- не элемент
+  alert(document.tagName); // undefined
+</script>
+</body>
+```
+
+При работе только с узлами элементов имеет смысл использовать `tagName` -- так короче :).
+
+## innerHTML: содержимое элемента
+
+Свойство `innerHTML` описано в спецификации HTML 5 -- <a href="http://www.w3.org/TR/html5/embedded-content-0.html">embedded content</a>.
+
+Оно позволяет получить HTML-содержимое элемента в виде строки. В `innerHTML` можно и читать и писать. 
+
+Пример выведет на экран все содержимое `document.body`, а затем заменит его на другое:
+
+```html
+<!--+ run -->
+<body>
+  <p>Параграф</p>
+  <div>Div</div>
+
+  <script>
+    alert( document.body.innerHTML ); // читаем текущее содержимое
+    document.body.innerHTML = 'Новый BODY!'; // заменяем содержимое
+  </script>
+
+</body>
+```
+
+Значение, возвращаемое `innerHTML` -- всегда валидный HTML-код. При записи можно попробовать записать  что угодно, но браузер исправит ошибки:
+
+```html
+<!--+ run -->
+<body>
+
+  <script>
+    document.body.innerHTML = '<b>тест'; // незакрытый тег
+    alert(document.body.innerHTML); // <b>тест</b> (исправлено)
+  </script>
+
+</body>
+```
+
+Свойство `innerHTML` -- одно из самых часто используемых. 
+
+### Тонкости innerHTML   
+
+`innerHTML` не так прост, как может показаться, и таит в себе некоторые тонкости, которые могут сбить с толку новичка, а иногда и опытного программиста.
+
+Ознакомьтесь с ними. Даже если этих сложностей у вас *пока* нет, эта информация отложится где-то в мозге и поможет, когда проблема появится.
+
+[warn header="Для таблиц в IE9- -- `innerHTML` только для чтения"]
+В Internet Explorer версии 9 и ранее, <a href="http://msdn.microsoft.com/en-us/library/ms533897.aspx">innerHTML</a> доступно только для чтения для элементов `COL`, `COLGROUP`, `FRAMESET`, `HEAD`, `HTML`, `STYLE`, `TABLE`, `TBODY`, `TFOOT`, `THEAD`, `TITLE`, `TR`. 
+
+В частности, **в IE9- нельзя присвоить `innerHTML` табличным элементам, кроме ячеек (`TD/TH`).**
+[/warn]
+
+[warn header="Добавление `innerHTML+=` осуществляет перезапись"]
+Синтаксически, можно добавить текст к `innerHTML` через `+=`:
+
+```js
+chatDiv.innerHTML += "<div>Привет<img src='smile.gif'/> !</div>";
+chatDiv.innerHTML += "Как дела?";
+```
+
+На практике этим следует пользоваться с большой осторожностью, так как фактически происходит не добавление, а перезапись:
+<ol>
+<li>Удаляется старое содержание</li>
+<li>На его место становится новое значение `innerHTML`.</li>
+</ol>
+
+Так как новое значение записывается с нуля, то **все изображения и другие ресурсы будут перезагружены**. В примере выше вторая строчка перезагрузит `smile.gif`, который был до неё. Если в `chatDiv` много текста, то эта перезагрузка будет очень заметна. 
+
+Есть и другие побочные эффекты, например если существующий текст был выделен мышкой, то в большинстве браузеров это выделение пропадёт.
+
+К счастью, есть и другие способы добавить содержимое, не использующие `innerHTML`.
+[/warn]
+
+[warn header="Скрипты не выполняются"]
+**Если в `innerHTML` есть тег `script` -- он не будет выполнен.**
+
+Пример -- ниже:
+
+```html
+<!--+ run -->
+<div id="my"></div>
+
+<script>
+  var elem = document.getElementById('my');
+  elem.innerHTML = 'ТЕСТ<script>alert(1);</scr'+'ipt>';
+</script>
+```
+
+В примере закрывающий тег `</scr'+'ipt>` разбит на две строки, т.к. иначе браузер подумает, что это конец скрипта. Вставленный скрипт не выполнится.
+
+Исключение -- IE9-, в нем вставляемый скрипт выполняются, если у него есть атрибут  `defer` (это нестандартная возможность):
+
+```html
+<!--+ run -->
+<div id="my"></div>
+
+<script>
+  var elem = document.getElementById('my');
+  elem.innerHTML = 'Для IE<script *!*defer*/!*>alert(1);</scr'+'ipt>';
+</script>
+```
+
+[/warn]
+
+[warn header="IE8- обрезает `style` и `script` в начале `innerHTML`"]
+Если в начале `innerHTML` находятся стили `<style>`, то старый IE проигнорирует их. То есть, иными словами, они не применятся.
+
+Смотрите также [innerHTML на MSDN](http://msdn.microsoft.com/en-us/library/ms533897%28v=vs.85%29.aspx) на эту тему.
+[/warn]
+
+## outerHTML: HTML элемента целиком
+
+Свойство `outerHTML` содержит HTML элемента целиком.
+
+Пример чтения `outerHTML`:
+
+```html
+<!--+ run -->
+<div id="hi">Привет <b>Мир</b></div>
+
+<script>
+var div = document.getElementById('hi');
+
+alert(div.outerHTML); // <div>Привет <b>Мир</b></div>
+</script>
+```
+
+**Изменить `outerHTML` элемента невозможно.**
+
+Здесь мы остановимся чуть подробнее. Дело в том, что технически свойство `outerHTML` доступно на запись. Но при этом элемент не меняется, а заменяется на новый, который создаётся из нового `outerHTML`.
+
+Это отлично видно на примере:
+
+```html
+<!--+ run -->
+<div id="hi">Привет, Мир!</div>
+
+<script>
+var div = document.getElementById('hi');
+
+*!*
+// заменим div.outerHTML на <p>...</p>
+*/!*
+div.outerHTML = '<p id="new">Новый элемент!</p>';
+
+*!*
+// как видно, div.tagName -- по-прежнему div 
+*/!*
+alert(div.tagName);    // DIV
+
+*!*
+// и содержимое div.outerHTML осталось тем же, несмотря на "перезапись"
+*/!*
+alert(div.outerHTML);  // <div id="hi">Привет, Мир!</div>
+</script>
+```
+
+То, что произошло в примере выше -- так это замена `div` в документе на новый узел `<p>...</p>`. При этом переменная `div` полностью сохраняет значение, просто старый узел теперь "повис в воздухе", он вне документа.
+
+А новый узел теперь на его месте. На него пока нет ссылки, но его можно получить, к примеру, по `id`.
+
+[warn header="Записал `outerHTML`? Понимай последствия!"]
+Иногда начинающие делают здесь ошибку: сначала заменяют `div.outerHTML`, а потом продолжают работать с `div`, как будто это изменившийся элемент. Такое возможно с `innerHTML`, но не с `outerHTML`.
+
+Записать новый HTML в `outerHTML` можно, но нужно понимать, что это никакое не изменение узла, а его полная замена.
+[/warn]
+
+## nodeValue/data: содержимое текстового узла   
+
+Свойство `innerHTML` есть только у узлов-элементов. 
+
+**Содержимое других узлов, например, текстовых или комментариев, доступно на чтение и запись через свойство `data`.**
+
+Его тоже можно читать и обновлять. Следующий пример демонстрирует это:
+
+```html
+<!--+ run height="50" -->
+<body>
+  Привет
+  <!-- Комментарий -->
+  <script>
+    for (var i=0; i<document.body.childNodes.length; i++) {
+*!*
+      alert(document.body.childNodes[i].data);
+*/!*
+    }
+  </script>
+  Пока
+</body>
+```
+
+Если вы запустите этот пример, то увидите, как выводятся последовательно:
+<ol>
+<li>`Привет` -- это содержимое первого узла (текстового).</li>
+<li>`Комментарий` -- это содержимое второго узла (комментария).</li>
+<li>`Пробелы` -- это содержимое небольшого пробельного узла после комментария до скрипта.</li>
+<li>`undefined` -- далее цикл дошёл до <code>&lt;script&gt;</code>, но это узел-элемент, у него нет `data`.</li>
+</ol>
+
+Вообще говоря, после <code>&lt;script&gt;...&lt;/script&gt;</code> и до закрытия `</body>` в документе есть еще один текстовый узел. Однако, на момент работы скрипта браузер ещё не знает о нём, поэтому не выведет.
+
+**Свойство `nodeValue` мы использовать не будем.**
+
+Оно работает так же, как `data`, но на некоторых узлах, где `data` нет (`undefined`), `nodeValue` есть и имеет значение `null`. Как-то использовать эти тонкие различия обычно нет причин. 
+
+**Два свойства сохраняются для совместимости, мы будем использовать лишь `data`, поскольку оно короче.**
+
+## Текст: textContent
+
+Свойство `textContent` содержит только текст внутри элемента, за вычетом всех `<тегов>`.
+
+Оно поддерживается везде, кроме IE8-.
+
+Например:
+
+```html
+<!--+ run -->
+<div id="news">
+  <h1>Срочно в номер!</h1>
+  <p>Марсиане атакуют людей!</p>
+</div>
+
+<script>
+// \n  Срочно в номер!\n  Марсиане атакуют людей!\n
+alert( news.textContent );
+</script>
+```
+
+Как видно из примера выше, возвращается в точности весь текст, включая переводы строк и пробелы, но без тегов.
+
+**Иными словами, `elem.textContent` возвращает конкатенацию всех текстовых узлов внутри `elem`.**
+
+Не сказать, чтобы эта информация была часто востребована. 
+
+**Гораздо полезнее возможность записать текст в элемент, причём именно как текст!**
+
+В этом примере имя посетителя попадёт в первый `div` как `innerHTML`, а во второй -- как текст:
+
+```html
+<!--+ run -->
+<div id="userName"></div>
+<div id="userName2"></div>
+
+<script>
+var name = prompt("Введите имя?", "<b onclick='alert(1)'>Нажми меня</b>");
+
+userName.innerHTML = name;
+userName2.textContent = name;
+</script>
+```
+
+Когда данные получены от посетителя -- они могут быть любыми, даже такими, как описано выше. Вставлять их как HTML -- опасно. Вряд ли мы *действительно* хотим, чтобы посетители вставляли в наш сайт произвольный HTML-код.
+
+Присваивание через `textContent` -- один из способов от этого защититься.
+
+[warn header="Нестандартное свойство `innerText`"]
+Всеми браузерами, кроме Firefox, поддерживается нестандартное свойство [innerText](http://msdn.microsoft.com/en-us/library/ie/ms533899.aspx). 
+
+У него, в некотором роде, преимущество перед `textContent` в том, что оно по названию напоминает `innerHTML`, его проще запомнить.
+
+Однако, свойство `innerText` не следует использовать, так как оно не стандартное и не будет стандартным.
+
+Это свойство возвращает текст не в том виде, в котором он в DOM, а в том, в котором он виден -- как если бы мы выбрали содержимое элемента мышкой и скопировали его. В частности, если элемент невидим, то его текст возвращён не будет. 
+
+Впрочем, 98% применений свойства `textContent` -- это именно запись текста в узел, а не чтение из него. В этом случае оно работает так же, как и `innerText`.
+[/warn]
+
+## Исследование элементов
+
+У DOM-узлов есть и другие свойства, зависящие от типа, например:
+
+<ul>
+<li>`value` -- значение для `INPUT`, `SELECT` или `TEXTAREA`</li>
+<li>`id` -- идентификатор</li>
+<li>`href` -- адрес ссылки</li>
+<li>...многие другие...</li>
+</ul>
+
+Например:
+
+```html
+<!--+ run height="80" -->
+<input type="text" id="input" value="значение">
+
+<script>
+alert(input.type); // "text"
+alert(input.id); // "input"
+alert(input.value); // значение
+</script>
+```
+
+Как узнать, какие свойства есть у данного типа элементов?
+
+Это просто. Нужно либо посмотреть [список элементов HTML5](http://dev.w3.org/html5/markup/elements.html) и найти в нём интересующий вас элемент и прочитать секцию с `interface`.
+
+Если же недосуг или интересуют особенности конкретного браузера -- элемент всегда можно вывести в консоль вызовом `console.dir(элемент)`.
+
+Метод `console.dir` выводит аргумент не в "красивом" виде, а как объект, который можно развернуть и исследовать.
+
+Например:
+
+```js
+//+ run
+// в консоли можно будет увидеть все свойства DOM-объекта document 
+console.dir(document);
+```
+
+## Итого
+
+Основные свойства DOM-узлов:
+
+<dl>
+<dt>`nodeType`</dt>
+<dd>Тип узла. Самые популярные типы: `"1"` - для элементов и `"3"` - для текстовых узлов. Только для чтения.</dd>
+<dt>`nodeName/tagName`</dt>
+<dd>Название тега заглавными буквами. `nodeName` имеет специальные значения для узлов-неэлементов. Только для чтения.</dd>
+<dt>`innerHTML`</dt>
+<dd>Внутреннее содержимое узла-элемента в виде HTML. Можно изменять.</dd>
+<dt>`outerHTML`</dt>
+<dd>Полный HTML узла-элемента. При записи в `elem.outerHTML` переменная `elem` сохраняет старый узел.</dd>
+<dt>`nodeValue/data`</dt>
+<dd>Содержимое текстового узла или комментария. Свойство `nodeValue` также определено и для других типов узлов. Можно изменять.</dd>
+</dl>
+
+Узлы DOM также имеют другие свойства, в зависимости от тега. Например, у `INPUT` есть свойства `value` и `checked`, а у `A` есть `href` и т.д. Мы рассмотрим их далее.
+
diff --git a/2-ui/1-document/6-basic-dom-node-properties/hierarchy.png b/2-ui/1-document/6-basic-dom-node-properties/hierarchy.png
new file mode 100755
index 00000000..af0c8cf2
Binary files /dev/null and b/2-ui/1-document/6-basic-dom-node-properties/hierarchy.png differ
diff --git a/2-ui/1-document/7-attributes-and-custom-properties/1-get-user-attribute/solution.md b/2-ui/1-document/7-attributes-and-custom-properties/1-get-user-attribute/solution.md
new file mode 100644
index 00000000..f9e252b7
--- /dev/null
+++ b/2-ui/1-document/7-attributes-and-custom-properties/1-get-user-attribute/solution.md
@@ -0,0 +1,20 @@
+
+
+```html
+<!--+ run height=100 -->
+<body>
+
+  <div id="widget" data-widget-name="menu">Выберите жанр</div>
+
+  <script>
+    var div = document.getElementById('widget');
+ 
+    var widgetName = div.getAttribute('data-widget-name');
+    // или так, кроме IE10=
+    var widgetName = div.dataset.widgetName;
+
+    alert( widgetName );  // "menu"
+  </script>
+</body>
+```
+
diff --git a/2-ui/1-document/7-attributes-and-custom-properties/1-get-user-attribute/solution.view/index.html b/2-ui/1-document/7-attributes-and-custom-properties/1-get-user-attribute/solution.view/index.html
new file mode 100755
index 00000000..943ade17
--- /dev/null
+++ b/2-ui/1-document/7-attributes-and-custom-properties/1-get-user-attribute/solution.view/index.html
@@ -0,0 +1,12 @@
+<!DOCTYLE HTML>
+<html>
+<body>
+
+  <div data-widget-name="menu">Выберите жанр</div>
+
+  <script>
+    // ваш код
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/7-attributes-and-custom-properties/1-get-user-attribute/task.md b/2-ui/1-document/7-attributes-and-custom-properties/1-get-user-attribute/task.md
new file mode 100644
index 00000000..e8a57690
--- /dev/null
+++ b/2-ui/1-document/7-attributes-and-custom-properties/1-get-user-attribute/task.md
@@ -0,0 +1,22 @@
+# Получите пользовательский атрибут
+
+[importance 5]
+
+<ol>
+<li>Получите `div` в переменную.</li>
+<li>Получите значение атрибута `"data-widget-name"` в переменную.</li>
+<li>Выведите его.</li>
+</ol>
+
+Документ:
+
+```html
+<body>
+
+  <div id="widget" data-widget-name="menu">Выберите жанр</div>  
+
+  <script>/* ... */</script>
+</body>
+```
+
+[edit src="solution" task/]
diff --git a/2-ui/1-document/7-attributes-and-custom-properties/article.md b/2-ui/1-document/7-attributes-and-custom-properties/article.md
new file mode 100644
index 00000000..85747058
--- /dev/null
+++ b/2-ui/1-document/7-attributes-and-custom-properties/article.md
@@ -0,0 +1,467 @@
+# Атрибуты и "свои" свойства
+
+При чтении HTML браузер генерирует DOM-модель. При этом большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов. 
+
+Например, если тег выглядит как `<body id="page">`, то у объекта будет свойство `body.id = "page"`. 
+
+Но это преобразование -- не один-в-один. Бывают ситуации, когда атрибут имеет одно значение, а свойство -- другое. Бывает и так, что атрибут есть, а свойства с таким названием не создаётся.
+
+**Если коротко -- атрибуты и свойства не всегда соответствуют друг другу, нужно понимать, что такое свойство и что такое атрибут, чтобы работать с ними правильно.**
+
+[cut]
+## Свойства DOM-объектов
+
+Ранее мы видели некоторые встроенные свойства DOM-узлов. Но, технически, никто нас ими не ограничивает.
+
+**Узел DOM -- это объект, поэтому, как и любой объект в JavaScript, он может содержать  пользовательские свойства и методы.**
+
+Например, создадим в `document.body` новое свойство и запишем в него объект:
+
+```js
+//+ run
+document.body.myData = { 
+  name: 'Петр',
+  familyName: 'Петрович'
+};
+
+alert(document.body.myData.name); // Петр
+```
+
+Можно добавить и новую функцию:
+
+```js
+//+ run
+document.body.sayHi = function() { 
+  alert(this.nodeName);
+}
+ 
+document.body.sayHi(); // BODY, выполнилась с правильным this
+```
+
+Такие свойства и методы видны только в JavaScript и никак не влияют на отображение соответствующего тега.
+
+Эти свойства можно даже перебрать с помощью `for..in` (свойства будут все, и встроенные тоже):
+
+```js
+//+ run
+document.body.TEST = 5;
+
+alert( Object.keys(document.body).sort() ); // TEST, ...
+```
+
+Пользовательские DOM-свойства:
+<ul>
+<li>Могут иметь любое значение.</li>
+<li>Названия свойств *чувствительны* к регистру.</li>
+<li>Работают за счет того, что DOM-узлы являются объектами JavaScript</li>
+</ul>
+
+## Атрибуты
+
+Элементам DOM, с другой стороны, соответствуют HTML-теги, у которых есть текстовые атрибуты.
+
+Конечно, здесь речь именно об узлах-элементах, не о текстовых узлах или комментариях.
+
+Доступ к атрибутам осуществляется при помощи стандартных методов:
+<ul>
+<li>`elem.hasAttribute(name)` - проверяет наличие атрибута</li>
+<li>`elem.getAttribute(name)` - получает значение атрибута</li>
+<li>`elem.setAttribute(name, value)` - устанавливает атрибут</li>
+<li>`elem.removeAttribute(name)` - удаляет атрибут</li>
+</ul>
+
+В отличие от свойств, атрибуты:
+<ul>
+<li>Могут содержать только значение-строку.</li>
+<li>Их имя *нечувствительно* к регистру (ведь это HTML)</li>
+<li>Видны в `innerHTML` (за исключением старых IE)</li>
+<li>Все атрибуты элемента можно получить с помощью свойства `elem.attributes`, которое содержит псевдо-массив объектов типа <a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-637646024">Attr</a>.</li>
+</ul>
+
+Рассмотрим работу с атрибутами на примере HTML-кода:
+
+```html
+<body>
+  <div id="elem" about="Elephant" class="smiling"></div>
+</body>
+```
+
+Пример ниже устанавливает атрибуты и демонстрирует их особенности.
+
+```html
+<!--+ run -->
+<body>
+  <div id="elem" about="Elephant"></div>
+
+  <script>
+    alert( elem.getAttribute('About') ); // (1) 'Elephant', атрибут получен
+    
+    elem.setAttribute('Test', 123);  // (2) атрибут Test установлен
+    alert( document.body.innerHTML );  // (3) в HTML видны все атрибуты!
+
+    var attrs = elem.attributes;  // (4) можно получить коллекцию атрибутов
+    for (var i=0; i<attrs.length; i++) {
+      alert(attrs[i].name + " = " + attrs[i].value); 
+    }
+  </script>
+</body>
+```
+
+При запуске кода выше обратите внимание:
+<ol>
+<li>`getAttribute('About')` -- первая буква имени атрибута написана в верхнем регистре, но это не имеет значения, так как имена нечувствительны к регистру.</li>
+<li>Мы можем записать в атрибут любое значение, но оно будет превращено в строку. Объекты также будут  автоматически сконвертированы, но у IE8- с этим проблемы, поэтому придерживайтесь примитивов.</li>
+<li>После добавления атрибута его можно увидеть в `innerHTML`.</li>
+<li>Коллекция `attributes` содержит все атрибуты в виде объектов со свойствами `name` и `value`.</li>
+</ol>
+
+## Синхронизация свойств и атрибутов
+
+Когда браузер читает HTML и создаёт DOM-модель, то он создаёт свойства для всех *стандартных* атрибутов.
+
+Например, свойства тега `'A'` описаны в спецификации DOM: <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-48250443">HTMLAnchorElement</a>.
+
+Например, у него есть свойство `"href"`. Кроме того, он имеет `"id"` и другие свойства, общие для всех элементов, которые описаны в спецификации в <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-58190037">HTMLElement</a>.
+
+**Стандартные свойства DOM синхронизируются с атрибутами, нестандартные -- нет.** 
+
+Здесь есть ряд тонкостей, поэтому посмотрим на примеры.
+
+### Двухсторонняя синхронизация: id   
+
+Например, браузер синхронизирует атрибут `"id"` со свойством `id`. 
+
+Изменим одно -- поменяется и другое, например:
+
+```html
+<!--+ run -->
+<script>
+  // изменим атрибут
+  document.body.setAttribute('id', 'attr');
+  alert(document.body.id); // attr, верно
+
+  // изменим id
+  document.body.id = 'prop'
+  alert( document.body.getAttribute('id') ); // prop
+</script>
+```
+
+Здесь синхронизация осуществляется один-в-один, но бывает, что атрибут и свойство синхронизируются более хитро.
+
+### Значения могут быть разными: href   
+
+Синхронизация не гарантирует одинакового значения в атрибуте и свойстве. 
+
+Для примера, посмотрим, что произойдет с атрибутом `"href"` при изменении свойства:
+
+```html
+<!--+ height=30 run -->
+<a id="a" href="#"></a>
+<script>
+*!*
+  a.href = '/';
+*/!*
+
+  alert( 'атрибут:' + a.getAttribute('href') ); // '/'
+  alert( 'свойство:' + a.href );  // *!*полный URL*/!* 
+
+</script>
+```
+
+Это происходит потому, что атрибут может быть любым, а свойство `href`, <a href="http://www.w3.org/TR/REC-html40/struct/links.html#adef-href">в соответствии со спецификацией W3C</a>, должно быть полной ссылкой.
+
+Есть и другие свойства-атрибуты, которые не копируются в точности. Например, таково свойство `input.checked`:
+
+```html
+<!--+ run -->
+<input id="input" type="checkbox" checked>
+
+<script>
+  alert( input.checked ); // true <-- может быть только true/false
+
+  alert( input.getAttribute('checked') ); // пустая строка
+
+  // снять checked через атрибут можно лишь удалив его
+  input.removeAttribute('checked'); 
+  
+  alert( input.checked ); // false
+</script>
+```
+
+Большинство атрибутов "логического типа", для которых важно лишь он есть/нет, например `option.selected`, `input.required`, синхронизируются именно так.
+
+### Свойство не всегда обновляет атрибут: value   
+
+Изменение некоторых свойств обновляет атрибут. Но это скорее исключение, чем правило.
+
+**Обычно синхронизация -- односторонняя: свойство зависит от атрибута.**
+
+Например, при изменении свойства `input.value` атрибут `input.getAttribute('value')` не меняется:
+
+```html
+<!--+ height=30 run -->
+<body>
+  <input id="input" type="text" value="markup">
+  <script>
+*!*
+    input.value = 'new'; // поменяли свойство
+
+    alert(input.getAttribute('value')); // 'markup', не изменилось!
+*/!*
+  </script>
+</body>
+```
+
+То есть, изменение свойства на атрибут не влияет, он остаётся таким же.
+
+А вот изменение атрибута обновляет свойство:
+
+```html
+<!--+ height=30 run -->
+<body>
+  <input id="input" type="text" value="markup">
+  <script>
+*!*
+    input.setAttribute('value', 'new'); // поменяли атрибут
+
+    alert( input.value ); // 'new', input.value изменилось!
+*/!*
+  </script>
+</body>
+```
+
+Эту особенность можно красиво использовать.
+
+Получается, что атрибут `input.getAttribute('value')` хранит оригинальное (исходное) значение даже после того, как пользователь заполнил поле и свойство изменилось. 
+
+**Изначальное значение можно взять из атрибута, чтобы узнать было ли изменено значение `input` и, если нужно, чтобы отменить изменения.**
+
+### Атрибут class -- className   
+
+Атрибуту `"class"` соответствует свойство `className`.
+
+Так как слово `"class"` является зарезервированным словом в Javascript, то при проектировании DOM решили, что атрибуту `"class"` будет соответствовать свойство `className`.
+
+```html
+<!--+ run -->
+<body class="main page">
+  <script>
+    alert( document.body.className );  // main page
+
+    document.body.className="class1 class2"; 
+  </script>
+</body>
+```
+
+**Есть и другие атрибуты, которые называются иначе, чем свойство. Например, атрибуту `for` (`<label for="...">`) соответствует свойство с названием `htmlFor`.**
+
+### Атрибут class -- объект classList   
+
+Атрибут `class` -- уникален. Ему соответствует аж целых два свойства!
+
+Работать с классами как со строкой неудобно. Поэтому, кроме `className`, в современных браузерах есть свойство `classList`.
+
+**Свойство `classList` -- это объект для работы с классами.**
+
+Оно поддерживается в IE начиная с IE10, но его можно эмулировать в IE8+, подключив мини-библиотеку [classList.js](https://github.com/eligrey/classList.js).
+
+Методы `classList`:
+<ul>
+<li>`elem.classList.contains("class")` -- возвращает `true/false`, в зависимости от того, есть ли у элемента класс `class`.</li>
+<li>`elem.classList.add/remove("class")` -- добавляет/удаляет класс `class`</li>
+<li>`elem.classList.toggle("class")` -- если класса `class` нет, добавляет его, если есть -- удаляет.</li>
+</ul>
+
+Кроме того, можно перебрать классы через `for`, так как `classList` -- это псевдо-массив.
+
+Например:
+
+```html
+<!--+ run -->
+<body class="main page">
+  <script>
+    var classList = document.body.classList;
+
+   classList.remove('page');   // удалить класс
+   classList.add('post');         // добавить класс
+
+   for(var i=0; i<classList.length; i++) { // перечислить классы
+     alert(classList[i]); // main, затем post
+   }
+
+   alert( classList.contains('post') );  // проверить наличие класса
+
+   alert( document.body.className ); // main post, тоже работает
+  </script>
+</body>
+```
+
+## Нестандартные атрибуты, dataset
+
+Для нестандартных атрибутов свойство не создаётся.
+
+Например:
+
+```html
+<!--+ run -->
+<div id="elem" about="Elephant"></div>
+
+<script>
+  alert( elem.id ); // elem
+*!*
+  alert( elem.about ); // undefined
+*/!*
+</script>
+```
+
+У каждого элемента есть некоторый набор стандартных свойств, например для `<a>` это будут `href`, `name`, `title`, а для `<img>` это будут `src`, `alt`, и так далее. 
+
+Точный набор свойств описан в стандарте, обычно мы более-менее представляем, если пользуемся HTML, какие свойства могут быть, а какие -- нет. 
+
+**Свойство создаётся, лишь если атрибут в принципе может быть у элемента.**
+
+То есть, если назначить элементу `<img>` атрибут `href`, то свойство `img.href` от этого не появится. Как, впрочем, и если назначить ссылке `<a>` атрибут `alt`:
+
+```html
+<!--+ run -->
+<img id="img" href="test">
+<a id="link" alt="test"></a>
+
+<script>
+  alert( img.href ); // undefined
+  alert( link.alt ); // undefined
+</script>
+```
+
+**Нестандартные атрибуты никак не влияют на внешний вид элемента, но с их помощью можно привязать к элементу данные, которые будут доступны в JavaScript.**
+
+Как правило, это делается при помощи атрибутов с названиями, начинающимися на `data-`, например:
+
+```html
+<!--+ run -->
+<div id="elem" *!*data-about*/!*="Elephant" *!*data-user-location*/!*="street">
+  По улице прошёлся слон. Весьма красив и толст был он.
+</div>
+<script>
+  alert( elem.getAttribute('data-about') ); // Elephant
+  alert( elem.getAttribute('data-user-location') ); // street
+</script>
+```
+
+[Стандарт HTML5](http://www.w3.org/TR/2010/WD-html5-20101019/elements.html#embedding-custom-non-visible-data-with-the-data-attributes) специально разрешает атрибуты `data-*` и резервирует их для пользовательских данных.
+
+При этом во всех браузерах, кроме IE10-, к таким атрибутам можно обратиться не только как к атрибутам, но и как к свойствам, при помощи специального свойства `dataset`:
+
+```html
+<!--+ run -->
+<div id="elem" data-about="Elephant" data-user-location="street">
+  По улице прошёлся слон. Весьма красив и толст был он.
+</div>
+<script>
+*!*
+  alert( elem.dataset.about ); // Elephant
+  alert( elem.dataset.userLocation ); // street
+*/!*
+</script>
+```
+
+Обратим внимание -- название `data-user-location` трансформировалось в `dataset.userLocation`. Дефис превращается в большую букву.
+
+**В современной разработке мы можем использовать `dataset` для доступа к таким атрибутам, если точно знаем, что браузеры IE10- нам не нужны.**
+
+...Ну а для кросс-браузерного кода мы можем получать такие атрибуты через `getAttribute`.
+
+
+## "Особенности" старых IE   
+
+Для полноты картины ознакомимся с проблемами версий IE8-.
+
+<ol>
+<li>**Во-первых, версии IE8- синхронизируют <u>все</u> свойства и атрибуты, а не только стандартные**:
+
+```js
+//+ run
+document.body.setAttribute('my', 123);
+
+alert( document.body.my );  // 123 в IE<9
+```
+
+При этом даже тип данных не меняется. Атрибут не становится строкой, как ему положено. 
+</li>
+<li>**Во-вторых, в IE7- (или в IE8 в режиме совместимости с IE7) свойства и атрибуты -- одно и то же.**
+
+Поэтому возникают забавные казусы.
+
+Например, названия свойств регистрозависимы, а названия атрибутов -- нет. Что будет если два свойства имеют одинаковое имя в разном регистре? Как поведет себя соответствующий атрибут?
+
+```js
+//+ run
+document.body.abba = 1; // задаем свойство 
+document.body.ABBA = 5; // задаем свойство, теперь уже прописными буквами
+
+// запрашиваем атрибут в *!*смешаном*/!* регистре
+alert( document.body.getAttribute('AbBa') ); // что должен вернуть браузер?
+```
+
+Браузер выходит из ситуации, возвращая первое назначенное свойство(`abba`). Также, в IE8- существует второй параметр для `getAttribute`, который делает его чувствительным к регистру. Подробнее тут:<a href="http://msdn.microsoft.com/en-us/library/ms536429(v=vs.85).aspx">MSDN getAttribute</a>. 
+</li>
+<li>Ещё одна некорректность IE8-: для изменения класса нужно использовать именно свойство `className/classList`, вызов `setAttribute('class', ...)` не сработает.</li>
+</ol>
+
+**Вывод из этого довольно прост -- использовать всегда только свойства, кроме тех ситуаций, когда нужны именно атрибуты.**
+
+И тогда даже старые IE не страшны.
+
+
+## Итого   
+
+<ul>
+<li>Атрибуты -- это то, что написано в HTML.</li>
+<li>Свойство -- это то, что находится в свойстве DOM-объекта.</li>
+</ul>
+
+Таблица сравнений для атрибутов и свойств:
+
+<table class="bordered">
+<tr>
+<th>Свойства</th>
+<th>Атрибуты</th>
+</tr>
+<tr>
+<td>Любое значение</td>
+<td>Строка</td>
+</tr>
+<tr>
+<td>Названия регистрозависимы</td>
+<td>Не чувствительны к регистру</td>
+</tr>
+<tr>
+<td>Не видны в `innerHTML`</td>
+<td>Видны в `innerHTML`</td>
+</tr>
+</table>
+
+Синхронизация между атрибутами и свойствами:
+<ul>
+<li>Стандартные свойства и атрибуты синхронизируются: установка атрибута автоматически ставит свойство DOM. Некоторые свойства синхронизируются в обе стороны.</li>
+<li>Бывает так, что свойство не совсем соответствует атрибуту. Например, "логические" свойства вроде `checked`, `selected` всегда имеют значение `true/false`, даже если в атрибут записать произвольную строку `<input checked="checked">`. Значение атрибута вообще не играет роли -- или он есть или нет. Выше мы видели другие примеры на эту тему, например `href`.</li>
+</ul>
+
+Нестандартные атрибуты:
+<ul>
+<li>Нестандартный атрибут (если забыть глюки старых IE) никогда не попадёт в свойство, так что для кросс-браузерного доступа к нему нужно обязательно использовать `getAttribute`.</li>
+<li>Атрибуты, название которых начинается с `data-`, можно прочитать через `dataset`. Эта возможность не поддерживается  IE10-.</li>
+</ul>
+
+Для того, чтобы избежать проблем со старыми IE, а также для более короткого и понятного кода старайтесь везде использовать свойства, а атрибуты -- только там, где это *действительно* нужно.
+
+А *действительно* нужны атрибуты очень редко - лишь в следующих трёх случаях:
+<ol>
+<li>Когда нужно кросс-браузерно получить нестандартный HTML-атрибут.</li>
+<li>Когда нужно получить "оригинальное значение" стандартного HTML-атрибута, например, `<input value="...">`. В IE7- это не cработает, т.к. там атрибуты смешаны со свойствами, и значение атрибута и свойства будет одинаковое.
+</li>
+<li>Когда нужно получить список всех атрибутов, включая пользовательские. Для этого используется коллекция `attributes`.</li>
+</ol>
+
+Если вы хотите использовать собственные атрибуты в HTML, то помните, что атрибуты с именем, начинающимся на `data-` валидны в HTML5 и современные браузеры поддерживают доступ к ним через свойство `dataset`.
+
diff --git a/2-ui/1-document/8-searching-elements-dom/1-find-elements/index.html b/2-ui/1-document/8-searching-elements-dom/1-find-elements/index.html
new file mode 100755
index 00000000..e7995847
--- /dev/null
+++ b/2-ui/1-document/8-searching-elements-dom/1-find-elements/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+  
+  <body>
+    <form name="search">
+      <label>Поиск по сайту: <input type="text" name="search"></label>
+      <input type="submit" value="Искать!">
+    </form>
+    
+    <hr>
+    
+    <form name="search-person">
+      Поиск по посетителям:
+      <table id="table">
+        <tr>
+          <td>Возраст:</td>
+          <td id="age-list">
+            <label><input type="radio" name="age" value="young">до 18</label>
+            <label><input type="radio" name="age" value="mature">18-50</label>
+            <label><input type="radio" name="age" value="senior">более 50</label>
+          </td>
+        </tr>
+        
+        <tr>
+          <td>Дополнительно:</td>
+          <td>
+            <input type="text" name="info[0]">
+            <input type="text" name="info[1]">
+            <input type="text" name="info[2]">
+          </td>
+        </tr>
+        
+      </table>
+      
+      <input type="submit" value="Искать!">
+    </form>
+  </body>
+
+</html>
\ No newline at end of file
diff --git a/2-ui/1-document/8-searching-elements-dom/1-find-elements/solution.md b/2-ui/1-document/8-searching-elements-dom/1-find-elements/solution.md
new file mode 100644
index 00000000..d320098c
--- /dev/null
+++ b/2-ui/1-document/8-searching-elements-dom/1-find-elements/solution.md
@@ -0,0 +1,54 @@
+Есть много вариантов решения, вот некоторые из них:
+<ol>
+<li>
+
+```js
+document.getElementById('age-table').getElementsByTagName('label');
+```
+
+</li>
+<li>
+
+```js
+document.getElementById('age-table').getElementsByTagName('td')[0];
+// в современных браузерах можно одним запросом:
+var result = document.querySelector('#age-table td');
+```
+
+</li>
+<li>
+
+```js
+document.getElementsByTagName('form')[1];
+```
+
+</li>
+<li>
+
+```js
+document.querySelector('form[name="search"]');
+```
+
+</li>
+<li>
+
+```js
+document.querySelector('form[name="search-person"] input')
+```
+
+</li>
+<li>
+
+```js
+document.getElementsByName("info[0]")[0];
+```
+
+</li>
+<li>
+
+```js
+document.querySelector('form[name="search-person"] [name="info[0]"]');
+```
+
+</li>
+</ol>
diff --git a/2-ui/1-document/8-searching-elements-dom/1-find-elements/task.md b/2-ui/1-document/8-searching-elements-dom/1-find-elements/task.md
new file mode 100644
index 00000000..66abfd05
--- /dev/null
+++ b/2-ui/1-document/8-searching-elements-dom/1-find-elements/task.md
@@ -0,0 +1,24 @@
+# Поиск элементов
+
+[importance 4]
+
+Ниже находится документ с таблицей и формой.
+
+Найдите (получите в переменную) в нём: 
+
+<ol>
+<li>Все элементы `label` внутри таблицы. Должно быть 3 элемента.</li>
+<li>Первую ячейку таблицы (со словом `"Возраст"`).</li>
+<li>Вторую форму в документе.</li>
+<li>Форму с именем `search`, без использования её позиции в документе.</li>
+<li>Элемент `input` в форме с именем `search`. Если их несколько, то нужен первый.</li>
+<li>Элемент с именем `info[0]`, без точного знания его позиции в документе.</li> 
+<li>Элемент с именем `info[0]`, внутри формы с именем `search-person`.</li>
+</ol>
+
+Используйте для этого консоль браузера или откройте пример в песочнице:
+
+```html
+<!--+ autorun run src="index.html" -->
+```
+
diff --git a/2-ui/1-document/8-searching-elements-dom/2-tree/solution.md b/2-ui/1-document/8-searching-elements-dom/2-tree/solution.md
new file mode 100644
index 00000000..5e90331b
--- /dev/null
+++ b/2-ui/1-document/8-searching-elements-dom/2-tree/solution.md
@@ -0,0 +1,26 @@
+# Алгоритм решения
+
+Сперва, опишем алгоритм решения.
+
+Он может быть таким:
+<ol>
+<li>Найти все элементы списка.</li>
+<li>Для каждого элемента списка:
+<ol>
+<li>Подсчитать количество потомков `LI`.</li>
+<li>Если количество равно 0, пропускаем этот элемент, иначе, изменяем DOM, добавляя эту информацию.</li></ol>
+</li>
+</ol>
+
+Реализуйте его.
+
+# Полное решение
+
+В алгоритме не хватает всего нескольких деталей.
+
+<ul>
+<li>Количество потомков -- его можно получить как `UL.getElementsByTagName('li').length`.</li>
+<li>Добавление текста с количеством потомков к `li`. Это можно сделать, дописав прямо в текстовый узел `li.firstChild`, с помощью свойства `data`.</li>
+</ul>
+
+[edit src="solution"]Окончательное решение[/edit]
\ No newline at end of file
diff --git a/2-ui/1-document/8-searching-elements-dom/2-tree/solution.view/index.html b/2-ui/1-document/8-searching-elements-dom/2-tree/solution.view/index.html
new file mode 100755
index 00000000..5d22663e
--- /dev/null
+++ b/2-ui/1-document/8-searching-elements-dom/2-tree/solution.view/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+
+<ul>
+    <li>Животные
+        <ul>
+            <li>Млекопитающие
+                <ul>
+                    <li>Коровы</li>
+                    <li>Ослы</li>
+                    <li>Собаки</li>
+                    <li>Тигры</li>
+                </ul>
+            </li>
+            <li>Другие
+                <ul>
+                    <li>Змеи</li>
+                    <li>Птицы</li>
+                    <li>Ящерицы</li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+    <li>Рыбы
+        <ul>
+            <li>Аквариумные
+                <ul>
+                    <li>Гуппи</li>
+                    <li>Скалярии</li>
+                </ul>
+
+            </li>
+            <li>Морские
+                <ul>
+                    <li>Морская форель</li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+</ul>
+
+<script>
+var lis = document.getElementsByTagName('li')
+
+for(i=0; i<lis.length; i++) {
+    // получить количество детей
+    var childCount = lis[i].getElementsByTagName('li').length;
+    if (!childCount) continue;
+
+    // добавить кол-во детей к текстовому узлу
+    lis[i].firstChild.nodeValue += ' ['+childCount+']';
+
+}
+</script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/8-searching-elements-dom/2-tree/source.view/index.html b/2-ui/1-document/8-searching-elements-dom/2-tree/source.view/index.html
new file mode 100755
index 00000000..ddf25947
--- /dev/null
+++ b/2-ui/1-document/8-searching-elements-dom/2-tree/source.view/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+
+<ul>
+    <li>Животные
+        <ul>
+            <li>Млекопитающие
+                <ul>
+                    <li>Коровы</li>
+                    <li>Ослы</li>
+                    <li>Собаки</li>
+                    <li>Тигры</li>
+                </ul>
+            </li>
+            <li>Другие
+                <ul>
+                    <li>Змеи</li>
+                    <li>Птицы</li>
+                    <li>Ящерицы</li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+    <li>Рыбы
+        <ul>
+            <li>Аквариумные
+                <ul>
+                    <li>Гуппи</li>
+                    <li>Скалярии</li>
+                </ul>
+
+            </li>
+            <li>Морские
+                <ul>
+                    <li>Морская форель</li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+</ul>
+
+<script>
+  // .. ваш код ..
+</script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/8-searching-elements-dom/2-tree/task.md b/2-ui/1-document/8-searching-elements-dom/2-tree/task.md
new file mode 100644
index 00000000..e8b62fed
--- /dev/null
+++ b/2-ui/1-document/8-searching-elements-dom/2-tree/task.md
@@ -0,0 +1,12 @@
+# Дерево
+
+[importance 5]
+
+Есть дерево [edit src="source"]в песочнице[/edit]. 
+
+Напишите код, который добавит каждому элементу списка(`LI`) количество вложенных в него элементов. Узлы нижнего уровня -- пропускайте.
+
+Добавьте ваш скрипт в конец `BODY`.
+
+Результат:
+[iframe border=1 src="solution"]. 
diff --git a/2-ui/1-document/8-searching-elements-dom/3-set-class-links/solution.md b/2-ui/1-document/8-searching-elements-dom/3-set-class-links/solution.md
new file mode 100644
index 00000000..2b8cf144
--- /dev/null
+++ b/2-ui/1-document/8-searching-elements-dom/3-set-class-links/solution.md
@@ -0,0 +1,25 @@
+# Алгоритм
+
+Сначала можно найти ссылки, например, при помощи `document.getElementsByTagName('a')`. 
+
+Затем определимся -- что использовать для проверки адреса: свойство `href` или атрибут `getAttribute('href')`?
+
+Различие между ними заключается в том, что свойство будет содержать полный путь ссылки, а атрибут -- значение, указанное в HTML. 
+
+Если открыть страницу локально, на диске, то для `<a href="/tutorial">` значения будут такими:
+<ul>
+<li>a.getAttribute('href') == "/tutorial".</li>
+<li>a.href == "file:///tutorial" (возможно, в пути будет также буква диска).</li>
+</ul>
+ 
+Будем использовать атрибут.
+
+Правила определения:
+<ul>
+<li>Cсылки без протокола `://` являются заведомо внутренними.</li>
+<li>Там, где протокол есть -- нужно создать новую строку из того, что идёт после `://` (`indexOf + slice`) и проверить начало на совпадение с `javascript.ru`.</li>
+</ul>
+
+# Решение
+
+[edit src="solution"]Полный код решения[/edit]
\ No newline at end of file
diff --git a/2-ui/1-document/8-searching-elements-dom/3-set-class-links/solution.view/index.html b/2-ui/1-document/8-searching-elements-dom/3-set-class-links/solution.view/index.html
new file mode 100755
index 00000000..fffb1a06
--- /dev/null
+++ b/2-ui/1-document/8-searching-elements-dom/3-set-class-links/solution.view/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+  .external {
+    background-color: yellow;
+  }
+  </style>
+</head>
+<body>
+
+<ul>
+    <li>
+        <a href="http://google.com">http://google.com</a>
+    </li>
+    <li>
+        <a href="/tutorial">/tutorial.html</a>
+    </li>
+    <li>
+        <a href="ftp://ftp.com/my.zip">ftp://example.com/my.zip</a>
+    </li>
+    <li>
+        <a href="http://nodejs.org">http://nodejs.org</a>
+    </li>
+    <li><a href="http://javascript.ru">http://javascript.ru</a></li>
+    <li><a href="ftp://javascript.ru/file">ftp://javascript.ru/file</a></li>
+</ul>
+
+
+
+<script>
+
+var links = document.getElementsByTagName('a');
+for(var i=0; i<links.length; i++) {
+
+    var a = links[i];
+
+    // в IE8+ в атрибуте хранится именно текст HTML-атрибута, а в a.href -- полная ссылка
+    var href = a.getAttribute('href'); 
+    
+    if (!href) continue; // ссылка без href, не обрабатывается
+
+    if (href.indexOf('://') == -1) {
+        continue; // внутренняя ссылка, без протокола 
+    }
+
+    var domain = href.split('/')[2];  
+
+    if (domain == 'javascript.ru') continue; // внутренняя ссылка.
+    // на сайтах (не в песочнице, где домен другой) - лучше сравнивать domain с document.domain или window.location.host
+
+    a.className = 'external';
+}
+
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/1-document/8-searching-elements-dom/3-set-class-links/task.md b/2-ui/1-document/8-searching-elements-dom/3-set-class-links/task.md
new file mode 100644
index 00000000..feb2bfca
--- /dev/null
+++ b/2-ui/1-document/8-searching-elements-dom/3-set-class-links/task.md
@@ -0,0 +1,26 @@
+# Поставьте класс ссылкам
+
+[importance 3]
+
+Сделайте желтыми внешние ссылки, добавив им класс `external`.
+
+Все относительные ссылки и абсолютные с доменом `javascript.ru` считаются внутренними.
+
+```html
+<!--+ run nolinks -->
+<style>
+.external { background-color: yellow }
+</style>
+<ul>
+ <li><a href="http://google.com">http://google.com</a></li>
+ <li><a href="/tutorial">/tutorial.html</a></li>
+ <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
+ <li><a href="http://nodejs.org">http://nodejs.org</a></li>
+ <li><a href="http://javascript.ru/test">http://javascript.ru/test</a></li>
+ <li><a href="ftp://javascript.ru/file">ftp://javascript.ru/file</a></li>
+</ul>
+```
+
+Результат: 
+[iframe border=1 height=180 src="solution"]
+
diff --git a/2-ui/1-document/8-searching-elements-dom/article.md b/2-ui/1-document/8-searching-elements-dom/article.md
new file mode 100644
index 00000000..dc2eeead
--- /dev/null
+++ b/2-ui/1-document/8-searching-elements-dom/article.md
@@ -0,0 +1,303 @@
+# Поиск: getElement* и querySelector*
+
+Прямая навигация от родителя к потомку удобна, если элементы рядом. А если нет?
+
+Для этого в DOM есть дополнительные методы поиска.
+[cut]
+## getElementById   
+
+Мы рассматривали этот способ ранее. Он работает, если у DOM-элемента есть атрибут `id`. 
+
+**В тех случаях, когда `id` не уникален, вызов `document.getElementById(id)` может возвратить любой из элементов с данным `id`.**
+
+## getElementsByTagName   
+
+Метод `elem.getElementsByTagName(tag)` ищет все элементы с заданным тегом `tag` внутри элемента `elem` и возвращает их в виде списка.
+
+Регистр тега не имеет значения.
+
+Можно искать и в элементе и в документе:
+
+```js
+// получить все div-элементы
+var elements = document.getElementsByTagName('div');
+```
+
+Найдём все элементы `input` внутри таблицы:
+
+```html
+<!--+ run height=50 -->
+<table id="age-table">
+  <tr>
+    <td>Ваш возраст:</td>
+
+    <td>
+      <label>
+        <input type="radio" name="age" value="young" checked> младше 18
+      </label>
+      <label>
+        <input type="radio" name="age" value="mature"> от 18 до 50
+      </label>
+      <label>
+        <input type="radio" name="age" value="senior"> старше 60
+      </label>
+    </td>
+  </tr>
+
+</table>
+
+<script>
+
+*!*
+  var tableElem = document.getElementById('age-table');
+  var elements = tableElem.getElementsByTagName('input');
+*/!*
+
+  for (var i=0; i<elements.length; i++) {
+    var input = elements[i];  
+    alert(input.value + ': ' + input.checked);
+  }
+
+</script>
+```
+
+**Можно получить все элементы, передав звездочку `'*'` вместо тега:**
+
+```js
+// получить все элементы документа
+var allElems = document.getElementsByTagName('*');
+```
+
+Если хочется получить только один элемент -- можно указать индекс сразу же:
+
+```js
+var element = document.getElementsByTagName('input')*!*[0]*/!*
+```
+
+[warn header="Не забываем про букву `\"s\"`!"]
+Одна из самых частых ошибок начинающих (впрочем, иногда и не только) -- это забыть букву `"s", то есть пробовать вызывать метод `getElementByTagName` вместо <code>getElement**s**ByTagName</code>.
+
+Буква `"s"` не нужна там, где элемент только один, то есть в `getElementById`, в остальных методах она обязательна.
+[/warn]
+
+[warn header="Возвращается коллекция, а не элемент"]
+Другая частая ошибка -- это код вида:
+
+```js
+document.getElementsByTagName('input').value = 5;
+```
+
+То есть, вместо элемента присваивают значение коллекции. Работать такое не будет.
+
+Коллекцию нужно или перебрать в цикле или получить элемент по номеру и уже ему присваивать `value`, например так:
+
+```js
+document.getElementsByTagName('input')[0].value = 5;
+```
+
+[/warn]
+
+## getElementsByName   
+
+Вызов `document.getElementsByName(name)` позволяет получить все элементы с данным атрибутом `name`.
+
+Например, все элементы с именем `age`:
+
+```js
+var elems = document.getElementsByName('age');
+```
+
+До появления стандарта HTML5 этот метод возвращал только те элементы, в которых предусмотрена поддержка атрибута `name`, в частности: `iframe`, `a`, `input` и другими. 
+
+В современных браузерах тег не имеет значения, но старое поведение можно увидеть, попробовав пример ниже в IE10 и до версии 10:
+
+```html
+<!--+ run -->
+<input name="test">
+
+<div name="test"></div>
+
+<script>
+var elems = document.getElementsByName('test');
+
+alert(elems.length); // 2 в современных браузерах, 1 в IE<10
+</script>
+```
+
+**В IE9- метод не найдёт элементы, для которых в стандарте нет атрибута `name`.**
+
+## getElementsByClassName   
+
+Вызов `elem.getElementsByClassName(className)` возвращает коллекцию элементов с классом `className`. Находит элемент и в том случае, если у него несколько классов, а искомый - один из них.
+
+Поддерживается всеми современными браузерами, кроме IE8-.
+
+Например:
+
+```html
+<!--+ run height=50 -->
+<div class="article">Статья</div>
+<div class="long article">Длинная статья</div>
+
+<script>
+var articles = document.getElementsByClassName('article');
+alert( articles.length ); // 2, найдёт оба элемента 
+</script>
+```
+
+Как и `getElementsByTagName`, этот метод может быть вызван и в контексте DOM-элемента и в контексте документа.
+
+
+## querySelectorAll [#querySelectorAll]
+
+Вызов `elem.querySelectorAll(cssQuery)` возвращает все элементы внутри `elem`, удовлетворяющие CSS-селектору `cssQuery`.
+
+Он работает во всех современных браузерах, включая IE9+. Также работает и в IE8, но с некоторыми ограничениями:
+<ol>
+<li>IE8 должен быть именно в режиме IE8, а не в режиме совместимости.</li>
+<li>В IE8 синтаксис `cssQuery` должен соответствовать не CSS 3, а CSS 2.1. Не так мощно, конечно, но этого хватает для большинства случаев.</li>
+</ol>
+
+Следующий запрос получает все элементы `LI`, которые являются последними потомками своих `UL`. Это будет работать и в IE8.
+
+```html
+<!--+ run -->
+<ul>
+  <li>Этот</li>
+  <li>тест</li>
+</ul>
+<ul>
+  <li>полностью</li>
+  <li>пройден</li>
+</ul>
+<script>
+*!*
+  var elements = document.querySelectorAll('ul > li:last-child');
+*/!*
+
+  for (var i=0; i<elements.length; i++) {
+    alert(elements[i].innerHTML ); // "тест", "пройден"
+  }
+</script>
+```
+
+## querySelector [#querySelector]
+
+То же самое, что `elem.querySelectorAll(cssQuery)`, но возвращает только первый элемент.
+
+Фактически, эквивалентен `elem.querySelectorAll(cssQuery)[0]`, но быстрее, так как ищутся не все элементы, а только первый.
+
+## matches
+
+Вызов [elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches) проверяет, удовлетворяет ли `elem` селектору `css`.
+
+Он возвращает `true` либо `false`. 
+
+Ранее в спецификации он назывался `matchesSelector`, и большинство браузеров поддерживают его под этим старым именем, либо с префиксами.
+
+Например:
+
+```html
+<!--+ run -->
+<div id="test">
+  <a href="http://example.com/file.zip" id="link">...</a>
+</div>
+
+<script>
+var testElem = document.documentElement;
+var matchesSelector = testElem.matches ||
+  testElem.matchesSelector ||
+  testElem.msMatchesSelector;
+
+*!*
+var elem = document.getElementById('link');
+
+// проверим, подходит ли элемент под CSS-селектор?
+alert( matchesSelector.call(elem, '#test a[href$="zip"]') ); // true
+*/!*
+</script>
+```
+
+Не поддерживается в IE8-.
+
+## XPath в современных браузерах  
+
+Для поиска в XML-документах существует <a href="http://www.w3.org/TR/xpath/">язык запросов XPath</a>. 
+
+Он очень мощный, во многом мощнее CSS, но сложнее. Например, запрос для поиска элементов `H2`, содержащих текст `"XPath"`, будет выглядеть так: `//h2[contains(., "XPath")]`.
+
+**Все современные браузеры, кроме IE, поддерживают XPath с синтаксисом, близким к [описанному в MDN](https://developer.mozilla.org/en/XPath).**
+
+Найдем заголовки с текстом `XPath` в текущем документе:
+
+```js
+//+ run
+var result = document.evaluate("//h2[contains(., 'XPath')]", document.documentElement, null,                  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+
+for (var i=0; i<result.snapshotLength; i++) {
+    alert(result.snapshotItem(i).outerHTML);
+}
+```
+
+IE тоже поддерживает XPath, но эта поддержка не соответствует стандарту и работает только для XML-документов, например, полученных с помощью `XMLHTTPRequest` (AJAX).  Для обычных же HTML-документов XPath в IE не поддерживается. 
+
+## Итого
+
+Есть 6 основных методов поиска элементов DOM:
+<table>
+<tr>
+<td>Метод</td>
+<td>Ищет по..</td>
+<td>Ищет внутри элемента?</td>
+<td>Поддержка</td>
+<tr>
+<td>`getElementById`</td>
+<td>`id`</td>
+<td>-</td>
+<td>везде</td>
+</tr>
+<tr>
+<td>`getElementsByName`</td>
+<td>`name`</td>
+<td>-</td>
+<td>везде</td>
+</tr>
+<tr>
+<td>`getElementsByTagName`</td>
+<td>тег или `'*'`</td>
+<td>✔</td>
+<td>везде</td>
+</tr>
+<tr>
+<td>`getElementsByClassName`</td>
+<td>классу</td>
+<td>✔</td>
+<td>кроме IE8-</td>
+</tr>
+<tr>
+<td>`querySelector`</td>
+<td>CSS-селектор</td>
+<td>✔</td>
+<td>кроме IE7-</td>
+</tr>
+<tr>
+<td>`querySelectorAll`</td>
+<td>CSS-селектор</td>
+<td>✔</td>
+<td>кроме IE7-</td>
+</tr>
+</table>
+
+Если браузеры IE7- не нужны, то в 95% ситуаций достаточно и одного `querySelector(All)`.
+
+Кроме того:
+<ul>
+<li>Есть метод `elem.matchesSelector(css)`, который проверяет, удовлетворяет ли элемент CSS-селектору. Он поддерживается большинством браузеров в префиксной форме (`ms`, `moz`, `webkit`).</li>
+<li>XPath поддерживается большинством браузеров, кроме IE, даже 9й версии. Кроме того, как правило, `querySelector` удобнее. Поэтому он используется редко. </li>
+</ul>
+
+
+
+
+
+
diff --git a/2-ui/1-document/9-searching-elements-internals/1-collection-length-after-remove/solution.md b/2-ui/1-document/9-searching-elements-internals/1-collection-length-after-remove/solution.md
new file mode 100644
index 00000000..730cb5d7
--- /dev/null
+++ b/2-ui/1-document/9-searching-elements-internals/1-collection-length-after-remove/solution.md
@@ -0,0 +1,48 @@
+# Ответ на первый вопрос 
+
+Ответ: 0, пустая коллекция.
+
+```html
+<!--+ run -->
+<ul id="menu">
+  <li>Главная страница</li>
+  <li>Форум</li>
+  <li>Магазин</li>
+</ul>
+<script>
+  var lis = document.body.getElementsByTagName('li');
+
+  document.body.innerHTML = "";
+  
+  alert(lis.length);
+</script>
+```
+
+Это потому, что все элементы из `BODY` удаляются, а коллекция - *живая*.
+
+# Ответ на второй вопрос
+
+Ответ на второй вопрос зависит от браузера. В большинстве браузеров будет 3, коллекция не изменилась, так как она теперь привязана не к `BODY`, а к элементу, на котором идёт поиск, т.е. к `menu`.
+
+Но элемент `menu` находится в переменной, и поэтому должен быть жив, а значит и его дети тоже. Но некоторые браузеры (IE10) используют агрессивный подход при работе с памятью и очищают все элементы, кроме тех, которые непосредственно хранятся в переменных. 
+
+Поэтому результат кода ниже в большинстве браузеров: `3`, а в IE10: `0`.
+
+```html
+<!--+ run -->
+<ul id="menu">
+  <li>Главная страница</li>
+  <li>Форум</li>
+  <li>Магазин</li>
+</ul>
+<script>
+
+  var menu = document.getElementById('menu');
+  var lis = menu.getElementsByTagName('li');
+
+  document.body.innerHTML = "";
+
+  alert(lis.length);
+</script>
+```
+
diff --git a/2-ui/1-document/9-searching-elements-internals/1-collection-length-after-remove/task.md b/2-ui/1-document/9-searching-elements-internals/1-collection-length-after-remove/task.md
new file mode 100644
index 00000000..ff9eeb93
--- /dev/null
+++ b/2-ui/1-document/9-searching-elements-internals/1-collection-length-after-remove/task.md
@@ -0,0 +1,35 @@
+# Длина коллекции после удаления элементов
+
+[importance 5]
+
+Вот небольшой документ:
+
+```html
+<ul id="menu">
+  <li>Главная страница</li>
+  <li>Форум</li>
+  <li>Магазин</li>
+</ul>
+```
+
+1. Что выведет следующий код (простой вопрос)?
+
+```js
+var lis = document.body.getElementsByTagName('li');
+
+document.body.innerHTML = "";
+
+alert(lis.length);
+```
+
+2. А такой код (вопрос посложнее)?
+
+```js
+var menu = document.getElementById('menu');
+var lis = menu.getElementsByTagName('li');
+
+document.body.innerHTML = "";
+
+alert(lis.length);
+```
+
diff --git a/2-ui/1-document/9-searching-elements-internals/2-compare-elements-count/solution.md b/2-ui/1-document/9-searching-elements-internals/2-compare-elements-count/solution.md
new file mode 100644
index 00000000..8a39f575
--- /dev/null
+++ b/2-ui/1-document/9-searching-elements-internals/2-compare-elements-count/solution.md
@@ -0,0 +1,5 @@
+Значение `aList1` изменится, потому что `getElementsByTagName` - *живая* коллекция. Она автоматически дополнится новым элементом `a` и ее длина увеличится на 1.
+
+А вот `querySelector`, наоборот, возвращает статичный список узлов. Он ссылается на те же самые элементы, что бы не происходило с документом. Поэтому длина `aList2.length` останется неизменной.
+
+
diff --git a/2-ui/1-document/9-searching-elements-internals/2-compare-elements-count/task.md b/2-ui/1-document/9-searching-elements-internals/2-compare-elements-count/task.md
new file mode 100644
index 00000000..fd311082
--- /dev/null
+++ b/2-ui/1-document/9-searching-elements-internals/2-compare-elements-count/task.md
@@ -0,0 +1,13 @@
+# Сравнение количества элементов
+
+[importance 5]
+
+Для любого документа сделаем следующее:
+
+```js
+var aList1 = document.getElementsByTagName('a'),
+var aList2 = document.querySelectorAll('a');
+```
+
+Что произойдёт со значениями `aList1.length`, `aList2.length`, если в документе вдруг появится ещё одна ссылка `<a href="#">...</a>`?
+
diff --git a/2-ui/1-document/9-searching-elements-internals/3-benchmark-search-dom/solution.md b/2-ui/1-document/9-searching-elements-internals/3-benchmark-search-dom/solution.md
new file mode 100644
index 00000000..76d0cd59
--- /dev/null
+++ b/2-ui/1-document/9-searching-elements-internals/3-benchmark-search-dom/solution.md
@@ -0,0 +1,32 @@
+Для бенчмаркинга будем использовать функцию `bench(f, times)`, которая запускает функцию `f` `times` раз и возвращает разницу во времени:
+
+```js
+function bench(f, times) {
+  var d = new Date();
+  for(var i=0; i<times; i++) f();
+  return new Date() - d;
+}
+```
+
+Первый вариант (неверный) -- замерять разницу между функциями `runGet/runQuery`, вот так:
+
+```js
+function runGet() {
+  var results = document.getElementsByTagName('p');
+}
+
+function runQuery() {
+  var results = document.querySelectorAll('p');
+}
+
+alert( bench(runGet, 10000) ); // вывести время 1000*runGet
+```
+
+Он даст неверные результаты, т.к. `getElementsByTagName` является "живым поисковым запросом". Если не обратиться к его результатам, то поиска не произойдет вообще, т.е. `runGet` ничего по сути не ищет.
+
+...А `querySelectorAll` всегда производит поиск и формирует список элементов.
+
+Более правильный тест -- это не только запустить поиск, но и получить все элементы, как это делается в реальной жизни.
+
+[edit src="solution"]Полное решение[/edit]
+
diff --git a/2-ui/1-document/9-searching-elements-internals/3-benchmark-search-dom/solution.view/index.html b/2-ui/1-document/9-searching-elements-internals/3-benchmark-search-dom/solution.view/index.html
new file mode 100755
index 00000000..817e736e
--- /dev/null
+++ b/2-ui/1-document/9-searching-elements-internals/3-benchmark-search-dom/solution.view/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+ <style>
+   p {
+    display: inline-block;
+    margin: 0;
+   } 
+  </style>
+</head>
+<body>
+
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+
+
+<script>
+function bench(f, times) {
+  var d = new Date();
+  for(var i=0; i<times; i++) f();
+  return new Date() - d;
+}
+
+
+function runGetList() {
+  var results = document.getElementsByTagName('p');
+  var len = results.length;
+  for(var i = 0; i<len; i++) {
+    var elem = results[i];
+  }
+}
+
+function runQueryList() {
+  var results = document.querySelectorAll('p');
+  var len = results.length;
+  for(var i = 0; i<len; i++) {
+    var elem = results[i];
+  }
+}
+
+
+function log(msg) {
+	alert(msg);
+}
+
+
+log( 'getElementsByTagName: ' + bench(runGetList, 10000) );
+log( 'querySelectorAll: ' + bench(runQueryList, 10000) );
+
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/1-document/9-searching-elements-internals/3-benchmark-search-dom/source.view/index.html b/2-ui/1-document/9-searching-elements-internals/3-benchmark-search-dom/source.view/index.html
new file mode 100755
index 00000000..3e989571
--- /dev/null
+++ b/2-ui/1-document/9-searching-elements-internals/3-benchmark-search-dom/source.view/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+</head>
+<body>
+
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+
+<script>
+ // ...
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/1-document/9-searching-elements-internals/3-benchmark-search-dom/task.md b/2-ui/1-document/9-searching-elements-internals/3-benchmark-search-dom/task.md
new file mode 100644
index 00000000..aa952850
--- /dev/null
+++ b/2-ui/1-document/9-searching-elements-internals/3-benchmark-search-dom/task.md
@@ -0,0 +1,11 @@
+# Бенчмаркинг методов поиска в DOM
+
+[importance 2]
+
+Какой метод поиска элементов работает быстрее: `getElementsByTagName(tag)` или `querySelectorAll(tag)`?
+
+Напишите код, который измеряет разницу между ними. 
+
+[edit src="source" task/]
+
+*P.S. В задаче есть подвох, все не так просто. Если разница больше 10 раз -- вы решили ее неверно. Тогда подумайте, почему такое может быть.*
diff --git a/2-ui/1-document/9-searching-elements-internals/4-get-second-li/solution.md b/2-ui/1-document/9-searching-elements-internals/4-get-second-li/solution.md
new file mode 100644
index 00000000..930f4120
--- /dev/null
+++ b/2-ui/1-document/9-searching-elements-internals/4-get-second-li/solution.md
@@ -0,0 +1,21 @@
+Можно так:
+
+```js
+var li = ul.getElementsByTagName('li')[1];
+```
+
+Или так:
+
+```js
+var li = ul.querySelector('li:nth-child(2)');
+```
+
+Оба этих вызова будут перебирать детей `UL` и остановят перебор на найденном элементе.
+
+А вот так -- браузер найдет все элементы, а затем выберет второй. Это дольше:
+
+```js
+var li = ul.querySelectorAll('li')[1];
+```
+
+На практике разница в производительности будет видна только для действительно больших списков, либо при частом выполнении запроса. Браузер перебирает элементы весьма шустро.
diff --git a/2-ui/1-document/9-searching-elements-internals/4-get-second-li/task.md b/2-ui/1-document/9-searching-elements-internals/4-get-second-li/task.md
new file mode 100644
index 00000000..6dbecfe4
--- /dev/null
+++ b/2-ui/1-document/9-searching-elements-internals/4-get-second-li/task.md
@@ -0,0 +1,16 @@
+# Получить второй LI
+
+[importance 5]
+
+Есть длинный список `ul`:
+
+```html
+<ul>
+  <li>...</li>
+  <li>...</li>
+  <li>...</li>
+  ...
+</ul>
+```
+
+Как наиболее эффективно получить второй `LI`?
diff --git a/2-ui/1-document/9-searching-elements-internals/article.md b/2-ui/1-document/9-searching-elements-internals/article.md
new file mode 100644
index 00000000..d82f25bd
--- /dev/null
+++ b/2-ui/1-document/9-searching-elements-internals/article.md
@@ -0,0 +1,168 @@
+# Внутреннее устройство поисковых методов 
+
+Несмотря на схожесть в синтаксисе, поисковые методы `get*` и `querySelector*` внутри устроены очень по-разному. 
+
+Если вы хотите действительно глубоко понимать, что происходит, то посмотрите эту главу. Если нет -- её можно пропустить.
+
+## document.getElementById(id)
+
+Браузер поддерживает у себя внутреннее соответствие `id -> элемент`. Поэтому нужный элемент возвращается сразу. Это очень быстро.
+
+## elem.querySelector(query), elem.querySelectorAll(query)
+
+Чтобы найти элементы, удовлетворяющие поисковому запросу, браузер не использует никаких сложных структур данных.
+
+Он просто перебирает все подэлементы внутри элемента `elem`(или по всему документу, если вызов в контексте документа) и проверяет каждый элемент на соответствие запросу `query`. 
+
+Вызов `querySelector` прекращает перебор после первого же найденного элемента, а `querySelectorAll` собирает найденные элементы в "псевдомассив": внутреннюю структуру данных, по сути аналогичную массиву JavaScript.
+
+Этот перебор происходит очень быстро, так как осуществляется непосредственно движком браузера, а не JavaScript-кодом. 
+
+Оптимизации:
+<ul>
+<li>В случае поиска по ID: `elem.querySelector('#id')`, большинство браузеров оптимизируют поиск, используя вызов `getElementById`.</li>
+<li>Последние результаты поиска сохраняются в кеше. Но это до тех пор, пока документ как-нибудь не изменится.</li>
+</ul>
+
+
+## elem.getElementsBy*(...)
+
+Результаты поиска `getElementsBy*` --  живые!  При изменении документа -- изменяется и результат запроса.
+
+Например, найдём все `div` при помощи `querySelectorAll` и `getElementsByTagName`, а потом изменим документ:
+
+```html
+<!--+ run height=50 -->
+<div></div>
+<script>
+  var resultGet = document.getElementsByTagName('div');
+  var resultQuery = document.querySelectorAll('div');
+
+  alert(resultQuery.length + ', ' + resultGet.length); // 1, 1 
+
+  document.body.innerHTML = ''; // удалить всё содержимое BODY
+
+*!*
+  alert(resultQuery.length + ', ' + resultGet.length); // 1, 0
+*/!*
+</script>
+```
+
+Как видно, длина коллекции, найденной через `querySelectorAll`, осталась прежней. А длина списка, возвращённого `getElementsByTagName`, изменилась.
+
+Дело в том, что результат запросов `getElementsBy*` -- это не массив, а специальный объект, имеющий тип <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-536297177">NodeList</a> или <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506">HTMLCollection</a>. Он похож на массив, так как имеет нумерованные элементы и длину, но внутри это не готовый список, а "живой поисковой запрос". 
+
+Собственно поиск выполняется только при обращении к элементам списка или к его длине.
+
+## Алгоритмы getElementsBy*
+
+Поиск `getElementsBy*` наиболее сложно сделать эффективно, так как его результат -- "живая" коллекция, она должна быть всегда актуальной для текущего состояния документа.
+
+```js
+var elems = document.getElementsByTagName('div');
+alert( elems[0] );
+*!*
+// изменили документ
+*/!*
+alert( elems[0] ); // результат может быть уже другой
+```
+
+Можно искать заново при каждой попытке получить элемент из `elems`. Тогда результат будет всегда актуален, но поиск будет работать уж слишком медленно. Да и зачем? Ведь, скорее всего, документ не поменялся. 
+
+**Чтобы производительность `getElementsBy*` была достаточно хорошей, активно используется кеширование результатов поиска.**
+
+Для этого есть два основных способа: назовём их условно "Способ Firefox" (Firefox, IE) и "Способ WebKit" (Chrome, Safari, Opera).
+
+Для примера, рассмотрим поиск в произвольном документе, в котором есть 1000 элементов `div`.
+
+Посмотрим, как будут работать браузеры, если нужно выполнить следующий код:
+
+```js
+// вместо document может быть любой элемент
+var elems = document.getElementsByTagName('div');
+alert( elems[0] );
+alert( elems[995] );
+alert( elems[500] );
+alert( elems.length );
+```
+
+<dl>
+<dt>Способ Firefox</dt>
+<dd>Перебрать подэлементы `document.body` в порядке их появления в поддереве. Запоминать *все найденные элементы* во внутренней структуре данных, чтобы при повторном обращении обойтись без поиска.
+
+Разбор действий браузера при выполнении кода выше:
+<ol><li>Браузер создаёт пустую "живую коллекцию" `elems`. Пока ничего не ищет.</li>
+<li>Перебирает элементы, пока не найдёт первый `div`. Запоминает его и возвращает.</li>
+<li>Перебирает элементы дальше, пока не найдёт элемент с индексом `995`. Запоминает все найденные.</li>
+<li>Возвращает ранее запомненный элемент с индексом `500`, без дополнительного поиска!</li>
+<li>Продолжает обход поддерева с элемента, на котором остановился (`995`) и до конца. Запоминает найденные элементы и возвращает их количество.</li>
+</ol>
+</dd>
+<dt>Способ WebKit</dt>
+<dd>Перебирать подэлементы `document.body`. Запоминать только один, *последний найденный*, элемент, а также, по окончании перебора -- длину коллекции.
+
+Здесь кеширование используется меньше.
+
+Разбор действий браузера по строкам:
+<ol><li>Браузер создаёт пустую "живую коллекцию" `elems`. Пока ничего не ищет.</li>
+<li>Перебирает элементы, пока не найдёт первый `div`. Запоминает его и возвращает.</li>
+<li>Перебирает элементы дальше, пока не найдёт элемент с индексом `995`. Запоминает его и возвращает.</li>
+<li>Браузер запоминает только последний найденный, поэтому не помнит об элементе `500`. Нужно найти его перебором поддерева. Этот перебор можно начать либо с начала -- вперед по поддереву, 500й по счету) либо с элемента `995` --  назад по поддереву, 495й по счету. Так как назад разница в индексах меньше, то браузер выбирает второй путь и идёт от 995го назад 495 раз. Запоминает теперь уже 500й элемент и возвращает его.</li>
+<li>Продолжает обход поддерева с 500го (не 995го!) элемента и до конца. Запоминает число найденных элементов и возвращает его.</li>
+</ol>
+</dd>
+</dl>
+
+Основное различие -- в том, что Firefox запоминает все найденные, а Webkit -- только последний. Таким образом, "метод Firefox" требует больше памяти, но гораздо эффективнее при повторном доступе к предыдущим элементам. 
+
+А "метод Webkit" ест меньше памяти и при этом работает не хуже в самом важном и частом случае -- последовательном переборе коллекции, без возврата к ранее выбранным.
+
+**Запомненные элементы сбрасываются при изменениях DOM.**
+
+Документ может меняться. При этом, если изменение может повлиять на результаты поиска, то запомненные элементы необходимо сбросить. Например, добавление нового узла `div` сбросит запомненные элементы коллекции `elem.getElementsByTagName('div')`. 
+
+Сбрасывание запомненных элементов при изменении документа выполняется интеллектуально.
+<ol>
+<li>Во-первых, при добавлении элемента будут сброшены только те коллекции, которые могли быть затронуты обновлением. Например, если в документе есть два независимых раздела `<section>`, и поисковая коллекция привязана к первому из них, то при добавлении во второй -- она сброшена не будет. 
+
+Если точнее -- будут сброшены все коллекции, привязанные к элементам вверх по иерархии от непосредственного родителя нового `div` и выше, то есть такие, которые потенциально могли измениться. И только они.
+</li>
+<li>Во-вторых, если добавлен только `div`, то не будут сброшены запомненные элементы для поиска по другим тегам, например `elem.getElementsByTagName('a')`.</li>
+<li>...И, конечно же, не любые изменения DOM приводят к сбросу кешей, а только те, которые могут повлиять на список. Если где-то добавлен новый атрибут -- с поиском по тегу ничего не произойдёт.</li>
+</ol>
+
+Прочие поисковые методы, такие как `getElementsByClassName` тоже сбрасывают кеш при изменениях интеллектуально.
+
+Разницу в алгоритмах поиска легко "пощупать". Посмотрите сами:
+
+```html
+<!--+ run -->
+<script>
+  for(var i=0; i<10000;i++) document.write('<span> </span>');
+
+  var elements = document.body.getElementsByTagName('span');
+  var len = elements.length;
+
+  var d = new Date;
+*!*
+  for(var i = 0; i<len; i++) elements[i];
+*/!*
+  alert("Последовательно: "+ (new Date - d) + "мс");   // (1)
+
+  var d = new Date;
+*!*
+  for(var i = 0; i<len; i+=2) elements[i], elements[len-i-1];
+*/!*
+  alert("Вразнобой: "+ (new Date - d) + "мс");  // (2)
+</script>
+```
+
+В примере выше первый цикл проходит элементы последовательно. А второй -- идет по шагам: один с начала, потом один с конца, потом ещё один с начала, ещё один -- с конца, и так далее.
+
+Количество обращений к элементам одинаково.
+
+<ul>
+<li>В браузерах, которые запоминают все найденные (Firefox, IE) -- скорость будет одинаковой.</li>
+<li>В браузерах, которые запоминают только последний (Webkit) -- разница будет порядка 100 и более раз, так как браузер вынужден бегать по дереву при каждом запросе заново.</li>
+</ul>
+
diff --git a/2-ui/1-document/index.md b/2-ui/1-document/index.md
new file mode 100644
index 00000000..ebc4cf6f
--- /dev/null
+++ b/2-ui/1-document/index.md
@@ -0,0 +1,3 @@
+# Документ и объекты страницы
+
+При помощи JavaScript получаем и меняем существующие элементы на странице, а также создаём новые.
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.md
new file mode 100644
index 00000000..ed38f26c
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Решение задачи[/edit]
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.view/index.html
new file mode 100755
index 00000000..4f218abe
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.view/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<input type="button" id="hider" value="Нажмите, чтобы спрятать текст"/>
+
+<div id="hide">Текст</div>
+
+<script>
+document.getElementById('hider').onclick = function() {
+	document.getElementById('hide').style.display = 'none';
+}
+</script>
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/source.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/source.view/index.html
new file mode 100755
index 00000000..97a6221e
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/source.view/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<input type="button" id="hider" value="Нажмите, чтобы спрятать текст"/>
+
+<div id="hide">Текст</div>
+
+<script>
+ /* ваш код */
+</script>
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/task.md
new file mode 100644
index 00000000..26da5029
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/task.md
@@ -0,0 +1,10 @@
+# Спрятать при клике
+
+[importance 5]
+
+Используя JavaScript, сделайте так, чтобы при клике на кнопку исчезал элемент с `id="hide"`. 
+
+Демо:
+[iframe border=1 src="solution"]
+
+[edit src="source" task/]
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/2-hide-self-onclick/solution.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/2-hide-self-onclick/solution.md
new file mode 100644
index 00000000..4a7904c0
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/2-hide-self-onclick/solution.md
@@ -0,0 +1,7 @@
+Решение задачи заключается в использовании `this` в обработчике.
+
+```html
+<!--+ run height=50 -->
+<input type="button" onclick="this.style.display='none'" value="Нажми, чтобы меня спрятать"/>
+```
+
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/2-hide-self-onclick/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/2-hide-self-onclick/task.md
new file mode 100644
index 00000000..685e1092
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/2-hide-self-onclick/task.md
@@ -0,0 +1,8 @@
+# Спрятаться
+
+[importance 5]
+
+Создайте кнопку, при клике на которую, она будет скрывать сама себя.
+
+Как эта:
+<input type="button" onclick="this.style.display='none'" value="Нажми, чтобы меня спрятать"/>
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/2.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/2.html
new file mode 100755
index 00000000..a12e5cc4
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <script>
+    function countRabbits() {
+      for(var i=1; i<=3; i++) {
+        alert("Кролик номер " + i);
+      }
+    }
+  </script>
+</head>
+<body>
+  <input type="button" onclick="countRabbits()" value="Считать кроликов!"/>
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/solution.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/solution.md
new file mode 100644
index 00000000..7e8e00fa
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/solution.md
@@ -0,0 +1,16 @@
+Ответ: будет выведено `1` и `2`.
+
+Первый обработчик сработает, так как он не убран вызовом `removeEventListener`. Для удаления обработчика нужно передать в точности ту же функцию (ссылку на нее), что была назначена, а в коде передается такая же с виду функция, но, тем не менее, это другой объект. 
+
+Для того, чтобы удалить функцию-обработчик, нужно где-то сохранить ссылку на неё, например так:
+
+```js
+function handler() { 
+  alert("1"); 
+}
+
+button.addEventListener("click", handler, false);
+button.removeEventListener("click", handler, false);
+```
+
+Обработчик `button.onclick` сработает независимо и в дополнение к назначенному в `addEventListener`.
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/task.md
new file mode 100644
index 00000000..ebe89653
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/task.md
@@ -0,0 +1,18 @@
+# Какие обработчики сработают?
+
+[importance 5]
+
+В переменной `button` находится кнопка. 
+
+Изначально обработчиков на ней нет.
+ 
+Что будет выведено при клике после выполнения кода?
+
+```js
+button.addEventListener("click", function() { alert("1"); }, false);
+
+button.removeEventListener("click", function() { alert("1"); }, false);
+
+button.onclick = function() { alert(2); };
+```
+
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.md
new file mode 100644
index 00000000..85a53f25
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.md
@@ -0,0 +1,74 @@
+# Структура HTML/CSS
+
+Для начала, зададим структуру HTML/CSS.
+
+Меню является отдельным графическим компонентом, его лучше поместить в единый DOM-элемент.
+
+Элементы меню с точки зрения семантики являются списком `UL/LI`. Заголовок должен быть отдельным кликабельным элементом.
+
+Получаем структуру:
+
+```html
+<div class="menu">
+  <span class="title">Сладости (нажми меня)!</span>
+  <ul>
+    <li>Пирог</li>
+    <li>Пончик</li>
+    <li>Мед</li>
+  </ul>
+</div>
+```
+
+Для заголовка лучше использовать именно `SPAN`, а не `DIV`, так как `DIV` постарается занять 100% ширины, и мы не сможем ловить `click` только на тексте:
+
+```html
+<!--+ autorun height=50 -->
+<div style="border: solid red 1px">[Сладости (нажми меня)!]</div>
+```
+
+...А `SPAN` -- это элемент с `display: inline`, поэтому он занимает ровно столько места, сколько занимает текст внутри него:
+
+```html
+<!--+ autorun height=50 -->
+<span style="border: solid red 1px">[Сладости (нажми меня)!]</span>
+```
+
+Раскрытие/закрытие делайте путём добавления/удаления класса `.menu-open` к меню, которые отвечает за стрелочку и отображение `UL`.
+
+# CSS 
+
+CSS для меню:
+
+```css
+.menu ul {
+  margin: 0;
+  list-style: none;
+  padding-left: 20px;
+    
+  display: none;
+}
+  
+.menu .title {
+  padding-left: 16px;
+  font-size: 18px;
+  cursor: pointer;
+    
+  background: url(...arrow-right.png) left center no-repeat;       
+}
+```
+
+Если же меню раскрыто, то есть имеет класс `.menu-open`, то стрелочка слева заголовка меняется и список детей показывается:
+
+```css
+.menu-open .title {
+  background: url(...arrow-down.png) left center no-repeat; 
+}
+  
+.menu-open ul {
+  display: block;
+}
+```
+
+Теперь сделайте JavaScript.
+
+[edit src="solution"]Полное решение в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.view/index.html
new file mode 100755
index 00000000..6c707e44
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.view/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+
+  .menu ul {
+    margin: 0;
+    list-style: none;
+    padding-left: 20px;
+
+    display: none;
+  }
+
+  .menu .title {
+    padding-left: 16px;
+    font-size: 18px;
+    cursor: pointer;
+
+    background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
+  }
+
+  .menu-open .title {
+    background: url(http://js.cx/clipart/arrow-down.png) left center no-repeat;
+  }
+
+  .menu-open ul {
+    display: block;
+  }
+
+</style>
+</head>
+<body>
+
+<div id="sweeties" class="menu">
+  <span id="sweeties-title" class="title">Сладости (нажми меня)!</span>
+  <ul>
+    <li>Торт</li>
+    <li>Пончик</li>
+    <li>Пирожное</li>
+  </ul>
+
+</div>
+
+<script>
+var titleElem = document.getElementById('sweeties-title');
+
+titleElem.onclick = function() {
+  var menu = this.parentNode;
+  menu.classList.toggle('menu-open');
+};
+
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/source.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/source.view/index.html
new file mode 100755
index 00000000..d8b1bc96
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/source.view/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+</head>
+<body>
+
+<img src="http://js.cx/clipart/arrow-down.png">
+<img src="http://js.cx/clipart/arrow-right.png">
+
+Сладости (нажми меня)!
+<ul>
+  <li>Торт</li>
+  <li>Пончик</li>
+  <li>Пирожное</li>
+</ul>
+
+
+
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/task.md
new file mode 100644
index 00000000..b67dda4e
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/task.md
@@ -0,0 +1,11 @@
+# Раскрывающееся меню
+
+[importance 5]
+
+Создайте меню, которое раскрывается/сворачивается при клике:
+
+[iframe border=1 height=100 src="solution"]
+
+HTML/CSS исходного документа, возможно, понадобится изменить.
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.md
new file mode 100644
index 00000000..acead631
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.md
@@ -0,0 +1,26 @@
+# Алгоритм решения
+
+<ol>
+<li>Разработать структуру HTML/CSS. Позиционировать кнопку внутри сообщения.</li>
+<li>Найти все кнопки</li>
+<li>Присвоить им обработчики</li>
+<li>Обработчик будет ловить событие на кнопке и удалять соответствующий элемент.</li>
+<ol>
+
+# Вёрстка
+
+Исправьте HTML/CSS, чтобы кнопка была в нужном месте сообщения. Кнопку лучше сделать как `div`, а картинка --- будет его `background`. Это более правильно, чем `img`, т.к. в данном случае картинка является *оформлением кнопки*, а оформление должно быть в CSS. 
+
+Расположить кнопку справа можно при помощи `position: relative` для `pane`, а для кнопки `position: absolute + right/top`. Так как `position: absolute` вынимает элемент из потока, то кнопка может перекрыть текст заголовка. Чтобы этого не произошло, можно добавить `padding-right` к заголовку.
+
+Потенциальным преимуществом способа с `position` по сравнению с `float` в данном случае является возможность поместить элемент кнопки в HTML *после текста*, а не до него.
+
+# Обработчики
+
+Для того, чтобы получить кнопку из контейнера, можно найти все `IMG` в нём и выбрать из них кнопку по `className`. На каждую кнопку можно повесить обработчик.
+
+# Решение
+
+[edit src="solution"]Решение в песочнице[/edit]
+
+Для поиска элементов `span` с нужным классом в нём используется `getElementsByTagName` с фильтрацией. К сожалению, это единственный способ, доступный в IE 6,7. Если же эти браузеры вам не нужны, то гораздо лучше -- искать элементы при помощи `querySelector` или `getElementsByClassName`.
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/index.html
new file mode 100755
index 00000000..6fe31c05
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="messages.css">
+    <meta charset="utf-8">
+    <style>
+      .pane {
+        position: relative;
+      }
+
+      .remove-button {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        cursor: pointer;
+        display: block;
+        background: url(http://js.cx/clipart/delete.gif) no-repeat;
+        width: 16px;
+        height: 16px;
+      }
+
+      h3 {
+        padding-right: 20px;
+      }
+    </style>
+</head>
+
+<body>
+
+<div id="messages-container">
+  <div class="pane">
+    <h3>Лошадь</h3>
+    <p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
+    <span class="remove-button"></span>
+  </div>
+  <div class="pane">
+    <h3>Осёл</h3>
+    <p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
+    <span class="remove-button"></span>
+  </div>
+  <div class="pane">
+    <h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
+    <p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
+    <span class="remove-button"></span>
+  </div>
+</div>
+
+
+
+<script>
+
+  var spans = document.getElementById('messages-container').getElementsByTagName('span');
+
+  for(var i=0; i<spans.length; i++) {
+    var span = spans[i];
+    if (span.className != 'remove-button') continue;
+
+    span.onclick = function() {
+      var el = this.parentNode;
+      el.parentNode.removeChild(el);
+    };
+  }
+
+
+</script>
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/messages.css b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/messages.css
new file mode 100755
index 00000000..696daed0
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/messages.css
@@ -0,0 +1,32 @@
+body {
+	margin: 10px auto;
+	width: 470px;
+}
+h3 {
+	margin: 0;
+	padding-bottom: .3em;
+	padding-right: 20px;
+	font-size: 1.1em;
+}
+p {
+	margin: 0;
+	padding: 0 0 .5em;
+}
+.pane {
+	background: #edf5e1;
+	padding: 10px 20px 10px;
+	border-top: solid 2px #c4df9b;
+    position: relative;
+}
+
+.remove-button {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	cursor: pointer;
+	display: block;
+	background: url(delete.gif) no-repeat;
+	width: 16px;
+	height: 16px;
+}
+
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/index.html
new file mode 100755
index 00000000..830beb0b
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="messages.css">
+    <meta charset="utf-8">
+</head>
+
+<body>
+
+Картинка для кнопки удаления: <img src="http://js.cx/clipart/delete.gif">
+
+<div>
+	<div class="pane">
+    <h3>Лошадь</h3>
+    <p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
+	</div>
+	<div class="pane">
+    <h3>Осёл</h3>
+    <p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
+	</div>
+	<div class="pane">
+    <h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
+    <p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/messages.css b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/messages.css
new file mode 100755
index 00000000..d459af80
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/messages.css
@@ -0,0 +1,18 @@
+body {
+	margin: 10px auto;
+	width: 470px;
+}
+h3 {
+	margin: 0;
+	padding-bottom: .3em;
+	font-size: 1.1em;
+}
+p {
+	margin: 0;
+	padding: 0 0 .5em;
+}
+.pane {
+	background: #edf5e1;
+	padding: 10px 20px 10px;
+	border-top: solid 2px #c4df9b;
+}
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/task.md
new file mode 100644
index 00000000..a62cc2bf
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/task.md
@@ -0,0 +1,12 @@
+# Спрятать сообщение
+
+[importance 5]
+
+Есть список сообщений. Добавьте каждому сообщению по кнопке для его скрытия.
+
+Результат:
+[iframe src="solution"]
+
+Как лучше отобразить кнопку справа-сверху: через `position:absolute` или `float`?
+
+[edit src="source" task/]
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1.png b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1.png
new file mode 100755
index 00000000..6520a756
Binary files /dev/null and b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1.png differ
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2.png b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2.png
new file mode 100755
index 00000000..fba478e2
Binary files /dev/null and b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2.png differ
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.md
new file mode 100644
index 00000000..55c01c24
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.md
@@ -0,0 +1,28 @@
+# HTML/CSS
+Лента изображений должна быть оформлена как список, согласно принципам семантической вёрстки.
+
+Нужно стилизовать его так, чтобы он был длинной лентой, из которой внешний `DIV` вырезает нужную часть для просмотра:
+
+<img src="carousel1.png">
+
+Чтобы список был длинный и элементы не переходили вниз, ему ставится `width: 9999px`, а элементам, соответственно, `float:left`.
+
+[warn header="Не используйте display:inline"]
+Элементы с `display:inline` имеют дополнительные отступы для возможных "хвостов букв".
+
+В частности, для `img` нужно поставить в стилях явно `display:block`, чтобы пространства под ними не оставалось.
+[/warn]
+
+При прокрутке UL сдвигается назначением `margin-left`:
+
+<img src="carousel2.png">
+
+У внешнего `DIV` фиксированная ширина, поэтому "лишние" изображения обрезаются.
+
+Снаружи окошка находятся стрелки и внешний контейнер.
+
+Реализуйте эту структуру, и к ней прикручивайте обработчики, которые меняют `ul.style.marginLeft`.
+
+# Полное решение
+
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/index.html
new file mode 100755
index 00000000..b248fbd3
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<head>
+<meta charset="utf-8">
+<link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body>
+
+<div class="carousel">
+<a href="#" class="arrow left-arrow" id="prev">&#8249; </a>
+  <div class="gallery">
+    <ul id="images">
+      <li><img src="http://js.cx/carousel/1.png"></li>
+      <li><img src="http://js.cx/carousel/2.png"></li>
+      <li><img src="http://js.cx/carousel/3.png"></li>
+      <li><img src="http://js.cx/carousel/4.png"></li>
+      <li><img src="http://js.cx/carousel/5.png"></li>
+      <li><img src="http://js.cx/carousel/6.png"></li>
+      <li><img src="http://js.cx/carousel/7.png"></li>
+      <li><img src="http://js.cx/carousel/8.png"></li>
+      <li><img src="http://js.cx/carousel/9.png"></li>
+      <li><img src="http://js.cx/carousel/10.png"></li>
+    </ul>
+  </div>
+<a href="#" class="arrow right-arrow" id="next">&#8250; </a>
+</div>
+
+<script>
+
+/* этот код помечает картинки, для удобства разработки */
+var lis = document.getElementsByTagName('li');
+for(var i=0; i<lis.length; i++) {
+  lis[i].style.position='relative';
+  var span = document.createElement('span');
+  // обычно лучше использовать CSS-классы,
+  // но этот код - для удобства разработки, так что не будем трогать стили
+  span.style.cssText='position:absolute;left:0;top:0';
+  span.innerHTML = i+1;
+  lis[i].appendChild(span);
+}
+
+/* конфигурация */
+var width = 130; // ширина изображения
+var count = 3; // количество изображений
+
+var ul = document.getElementById('images');
+var imgs = ul.getElementsByTagName('li');
+
+var position = 0; // текущий сдвиг влево
+
+document.getElementById('prev').onclick = function() {
+  if (position >= 0) return false; // уже до упора
+
+  // последнее передвижение влево может быть не на 3, а на 2 или 1 элемент
+  position = Math.min(position + width*count, 0)
+  ul.style.marginLeft = position + 'px';
+  return false;
+}
+
+document.getElementById('next').onclick = function() {
+  if (position <= -width*(imgs.length-count)) return false; // уже до упора
+
+  // последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент
+  position = Math.max(position-width*count, -width*(imgs.length-count));
+  ul.style.marginLeft = position + 'px';
+  return false;
+};
+
+</script>
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/style.css b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/style.css
new file mode 100755
index 00000000..d430e776
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/style.css
@@ -0,0 +1,52 @@
+body {
+  padding: 10px
+}
+
+.carousel {
+  position: relative;
+  width: 398px;
+  padding: 10px 40px;
+  border: 1px solid #CCC;
+  border-radius: 15px;
+  background: #eee;
+}
+.carousel img {
+  width: 130px;
+  height: 130px;
+  display: block; /* если не поставить block, в ряде браузеров будет inline -> лишнее пространтсво вокруг элементов */
+}
+.carousel .arrow {
+  position: absolute;
+  top: 57px;
+  padding: 3px 8px 8px 9px;
+  background: #ddd;
+  border-radius: 15px;
+  font-size: 24px;
+  color: #444;
+  text-decoration: none;
+}
+
+.carousel .arrow:hover {
+  background: #ccc;
+}
+.carousel .left-arrow {
+  left: 7px;
+}
+.carousel .right-arrow {
+  right: 7px;
+}
+.gallery {
+  width: 390px;
+  overflow: hidden;
+}
+.gallery ul {
+  height: 130px;
+  width: 9999px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gallery ul li {
+	float: left;
+}
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html
new file mode 100755
index 00000000..31a895a4
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+<!-- ваша верстка виджета, ваши стили -->
+<ul id="images">
+  <li><img src="http://js.cx/carousel/1.png"></li>
+  <li><img src="http://js.cx/carousel/2.png"></li>
+  <li><img src="http://js.cx/carousel/3.png"></li>
+  <li><img src="http://js.cx/carousel/4.png"></li>
+  <li><img src="http://js.cx/carousel/5.png"></li>
+  <li><img src="http://js.cx/carousel/6.png"></li>
+  <li><img src="http://js.cx/carousel/7.png"></li>
+  <li><img src="http://js.cx/carousel/8.png"></li>
+  <li><img src="http://js.cx/carousel/9.png"></li>
+  <li><img src="http://js.cx/carousel/10.png"></li>
+</ul>
+
+
+<script>
+/* этот код помечает картинки цифрами, для удобства разработки
+  его можно убрать, если не нужен */
+var lis = document.getElementsByTagName('li');
+for(var i=0; i<lis.length; i++) {
+  lis[i].style.position='relative';
+  var span = document.createElement('span');
+  span.style.cssText='position:absolute;left:0;top:0';
+  span.innerHTML = i+1;
+  lis[i].appendChild(span);
+}
+</script>
+
+<script>
+
+// ваш код..
+
+</script>
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/task.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/task.md
new file mode 100644
index 00000000..8a236e81
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/task.md
@@ -0,0 +1,13 @@
+# Карусель
+
+[importance 5]
+
+Напишите "Карусель" -- ленту изображений, которую можно листать влево-вправо нажатием на стрелочки.
+
+[iframe height=200 src="solution"]
+
+В дальнейшем к ней можно легко добавить анимацию, динамическую подгрузку и другие возможности.
+
+В этой задаче разработка HTML/CSS-структуры составляет 90% решения.
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/article.md b/2-ui/2-events-and-interfaces/1-introduction-browser-events/article.md
new file mode 100644
index 00000000..9ca06ad5
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/article.md
@@ -0,0 +1,526 @@
+# Введение в браузерные события 
+
+Для реакции на действия посетителя и внутреннего взаимодействия скриптов существуют *события*. 
+
+*Событие* - это сигнал от браузера о том, что что-то произошло.
+[cut]
+Существует много видов событий.
+
+Посмотрим список самых часто используемых, пока просто для ознакомления:
+
+<dl>
+<dt>События мыши</dt>
+<dd>
+<ul>
+<li>`click` -- происходит, когда кликнули на элемент левой кнопкой мыши</li>
+<li>`contextmenu` -- происходит, когда кликнули на элемент правой кнопкой мыши</li>
+<li>`mouseover` -- возникает, когда на элемент наводится мышь</li>
+<li>`mousedown` и `mouseup` -- когда кнопку мыши нажали или отжали</li>
+<li>`mousemove` -- при движении мыши</li>
+</ul>
+</dd>
+<dt>События на элементах управления</dt>
+<dd>
+<ul>
+<li>`submit` -- посетитель отправил форму `<form>`</li>
+<li>`focus` --  посетитель фокусируется на элементе, например нажимает на `<input>`</li>
+</ul>
+<dt>Клавиатурные события</dt>
+<dd>
+<ul>
+<li>`keydown` -- когда посетитель нажимает клавишу</li>
+<li>`keyup` -- когда посетитель отпускает клавишу</li>
+</ul>
+</dd>
+<dt>События документа</dt>
+<dd>
+<ul>
+<li>`DOMContentLoaded` -- когда HTML загружен и обработан, DOM документа полностью построен и доступен.</li>
+</ul></dd>
+<dt>События CSS</dt>
+<dd>
+<ul>
+<li>`transitionend` -- когда CSS-анимация завершена.</li>
+</ul></dd>
+</dl>
+
+Также есть и много других событий.
+
+## Назначение обработчиков событий  
+
+Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.
+
+Именно благодаря событиям JavaScript-код может реагировать на действия посетителя.
+
+Есть несколько способов назначить событию обработчик. Сейчас мы их рассмотрим, начиная от самого простого.
+ 
+### Использование атрибута HTML   
+
+Обработчик может быть назначен прямо в разметке, в атрибуте, который называется `on<событие>`.
+
+Например, чтобы прикрепить `click`-событие к `input` кнопке, можно присвоить обработчик `onclick`, вот так:
+
+```html
+<input value="Нажми меня" *!*onclick="alert('Клик!')"*/!* type="button">
+```
+
+При клике мышкой на кнопке выполнится код, указанный в атрибуте `onclick`.
+
+В действии:
+
+<input value="Нажми меня" onclick="alert('Клик!');" type="button">
+
+Обратите внимание, для строки *внутри* `alert('Клик!')` используются *одиночные кавычки*, так как сам атрибут находится в двойных. 
+
+Частая ошибка новичков в том, что они забывают, что код находится внутри атрибута. Запись вида `onclick="alert("Клик!")"` не будет работать. Если вам действительно нужно использовать именно двойные кавычки, то это можно сделать, заменив их на `&quot;`: <code>onclick="alert(&amp;quot;Клик!&amp;quot;)"</code>.
+
+Однако, обычно этого не требуется, так как в разметке пишутся только очень простые обработчики. Если нужно сделать что-то сложное, то имеет смысл описать это в функции, и в обработчике вызвать уже её.
+
+Следующий пример по клику запускает функцию `countRabbits()`.
+
+```html
+<!--+ src="2.html" run height=80 -->
+
+```
+
+Как мы помним, атрибут HTML-тега не чувствителен к регистру, поэтому `ONCLICK` будет работать так же, как `onClick` или `onclick`... Но, как правило, атрибуты пишут в нижнем регистре: `onclick`.
+
+### Использование свойства DOM-объекта   
+
+Можно назначать обработчик, используя свойство DOM-элемента `on<событие>`. 
+
+Пример установки обработчика `click`:
+
+```html
+<input id="elem" type="button" value="Нажми меня"/>
+<script>
+*!*
+elem.onclick = function() {
+    alert('Спасибо');
+};
+*/!*
+</script>
+```
+
+В действии:
+<input id="elem" type="button" value="Нажми меня"/>
+<script>
+elem.onclick = function() {
+    alert('Спасибо');
+};
+</script>
+
+Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство `onclick`.
+
+**Обработчик хранится именно в свойстве, а атрибут -- лишь один из способов его инициализации.**
+
+Эти два примера кода работают одинаково:
+
+<ol>
+<li>Только HTML:
+
+```html
+<!--+ run height=50 -->
+<input type="button" *!*onclick="alert('Клик!')"*/!* value="Кнопка"/>
+```
+
+</li>
+<li>HTML + JS:
+
+```html
+<!--+ run height=50 -->
+<input type="button" id="button" value="Кнопка"/>
+<script>
+*!*
+button.onclick = function() {
+  alert('Клик!');
+};
+*/!*
+</script>
+```
+
+</li>
+</ol>
+
+**Так как свойство, в итоге, одно, то назначить более одного обработчика так нельзя.** 
+
+В примере ниже назначение через JavaScript перезапишет обработчик из атрибута:
+
+```html
+<!--+ run height=50 autorun -->
+<input type="button" id="elem" onclick="alert('До')" value="Нажми меня"/>
+<script>
+*!*
+elem.onclick = function() { // перезапишет существующий обработчик
+  alert('После');
+};
+*/!*
+</script>
+```
+
+Кстати, обработчиком можно назначить и уже существующую функцию:
+
+```js
+function sayThanks() {
+  alert('Спасибо!');
+}
+
+elem.onclick = sayThanks;
+```
+
+Если обработчик надоел -- его всегда можно убрать назначением `elem.onclick = null`.
+
+### Доступ к элементу через this
+
+Внутри обработчика события `this` ссылается на текущий элемент, то есть на тот, на котором он сработал. 
+
+Это можно использовать, чтобы получить свойства или изменить элемент.
+
+В коде ниже `button` выводит свое содержимое, используя `this.innerHTML`:
+
+```html
+<button onclick="alert(this.innerHTML)">Нажми меня</button>
+```
+
+В действии:
+<button onclick="alert(this.innerHTML)">Нажми меня</button>
+
+
+### Частые ошибки
+
+Если вы только начинаете работать с событиями -- обратите внимание на следующие особенности.
+
+<dl>
+<dt>Функция должна быть присвоена как `sayThanks`, а не `sayThanks()`.</dt>
+<dd>
+
+```js
+button.onclick = sayThanks;
+```
+
+Если добавить скобки, то `sayThanks()` --  будет уже *результат* выполнения функции (а так как в ней нет `return`, то в `onclick` попадёт `undefined`). Нам же нужна именно функция.
+
+...А вот в разметке как раз скобки нужны:
+
+```html
+<input type="button" id="button" onclick="sayThanks()"/>
+```
+
+Это различие просто объяснить. При создании обработчика браузером по разметке, он автоматически создает функцию из его содержимого. Поэтому последний пример -- фактически то же самое, что:
+
+```js
+button.onclick = function() {
+*!*
+  sayThanks();  // содержимое атрибута
+*/!*
+};
+```
+
+</dd>
+<dt>Используйте именно функции, а не строки.</dt>
+<dd>
+Назначение обработчика строкой `elem.onclick = 'alert(1)'` будет работать, но не рекомендуется, могут быть проблемы при сжатии JavaScript.
+
+Передавать код в виде строки по меньшей мере странно в языке, который поддерживает Function Expressions, оно здесь доступно только по соображениям совместимости с древними временами.
+</dd>
+<dt>Не используйте `setAttribute`.</dt>
+<dd>
+Такой вызов работать не будет:
+
+```js
+//+ run
+// при нажатии на body будут ошибки 
+// потому что при назначении в атрибут функция будет преобразована в строку
+document.body.setAttribute('onclick', function() { alert(1) });
+```
+
+</dd>
+<dt>Регистр свойства имеет значение.</dt>
+<dd>Свойство называется `onclick`, а не `ONCLICK`.</dd>
+ </dl>
+
+
+
+
+## Специальные методы 
+
+Фундаментальный недостаток описанных выше способов назначения обработчика -- невозможность повесить *несколько* обработчиков на одно событие.
+
+Например, одна часть кода хочет при клике на кнопку делать ее подсвеченной, а другая -- выдавать сообщение. Нужно в разных местах два обработчика повесить.
+
+При этом новый обработчик будет затирать предыдущий. Например, следующий код на самом деле назначает один обработчик -- последний:
+
+```js
+input.onclick = function() { alert(1); }
+// ...
+input.onclick = function() { alert(2); } // заменит предыдущий обработчик
+```
+
+Разработчики стандартов достаточно давно это поняли и предложили альтернативный способ назначения обработчиков при помощи специальных методов, который свободен от указанного недостатка.
+
+### addEventListener и removeEventListener 
+
+Методы `addEventListener` и `removeEventListener` являются современным способом назначить или удалить обработчик, и при этом позволяют использовать сколько угодно любых обработчиков.
+
+Назначение обработчика осуществляется вызовом `addEventListener` с тремя аргументами:
+
+```js
+element.addEventListener( event, handler, phase );
+```
+
+<dl>
+<dt>`event`</dt>
+<dd>Имя события, например `click`</dd>
+<dt>`handler`</dt>
+<dd>Ссылка на функцию, которую надо поставить обработчиком.</dd>
+<dt>`phase`</dt>
+<dd>Фаза, на которой обработчик должен сработать. Этот аргумент мы рассмотрим далее в учебнике. Пока что будем использовать значение `phase = false`, которое нужно в 99% случаев.</dd>
+</dl>
+
+Удаление обработчика осуществляется вызовом `removeEventListener`:
+
+```js
+element.removeEventListener( event, handler, phase );
+```
+
+[warn header="Удаление требует ту же функцию"]
+Для удаления нужно передать именно ту функцию-обработчик которая была назначена.
+
+Вот так `removeEventListener` не сработает:
+
+```js
+input.addEventListener( "click" , function() {alert('Спасибо!')}, false);
+// .... 
+input.removeEventListener( "click", function() {alert('Спасибо!')}, false);
+```
+
+Это не одна и та же функция, а две независимо созданные (с одинаковым кодом, но это не важно).
+
+Вот так правильно:
+
+```js
+function handler() {
+  alert('Спасибо!');
+}
+
+input.addEventListener( "click" , handler, false);
+// .... 
+input.removeEventListener( "click", handler, false);
+```
+
+[/warn]
+
+**Использование `addEventListener` позволяет добавлять несколько обработчиков на одно событие одного элемента:**
+
+```html
+<!--+ run -->
+<input id="elem" type="button" value="Нажми меня"/>
+
+<script>
+  function handler1() {
+    alert('Спасибо!');
+  };
+ 
+  function handler2() {
+    alert('Спасибо ещё раз!');
+  }
+
+*!*
+  elem.onclick = function() { alert("Привет"); };
+  elem.addEventListener("click", handler1, false); // Спасибо! 
+  elem.addEventListener("click", handler2, false); // Спасибо ещё раз!
+*/!*
+</script>
+```
+
+Как видно из примера выше, можно одновременно назначать обработчики и через `onсвойство` (только один) и через `addEventListener`. Однако, во избежание путаницы обычно рекомендуется выбрать один способ.
+
+[warn header="`addEventListener` работает всегда, а `onсвойство` -- нет"]
+У специальных методов есть ещё одно перимущество перед "старой школой".
+
+Есть некоторые события, которые нельзя назначить через `onсвойство`, но можно через `addEventListener`. 
+
+Например, таково событие `transitionend`, то есть окончание CSS-анимации. В большинстве браузеров оно требует назначения через `addEventListener`.
+
+При нажатии на кнопку в примере ниже сработает второй обработчик, но не первый.
+
+```html
+<!--+ autorun run -->
+<style>
+  button {
+    transition: width 3s;
+    width: 100px;
+  }
+  .wide {
+    width: 300px;
+  }
+</style>
+
+<button id="elem" onclick="this.classList.toggle('wide');">
+  Нажми меня
+</button>
+
+<script>
+  elem.ontransitionend = function() { 
+    alert("ontransitionend");  // не сработает
+  };
+
+*!*
+  elem.addEventListener("transitionend", function() {
+    alert("addEventListener"); // сработает по окончании анимации
+  }, false);
+*/!*
+</script>
+```
+
+[/warn]
+
+
+## Отличия IE8-
+
+При работе с событиями в IE8- есть много отличий. Как правило, они формальны -- некое свойство или метод называются по-другому. Начиная с версии 9, также работают и стандартные свойства и методы, которые предпочтительны.
+
+**В IE8- вместо `addEventListener/removeEventListener` используются свои методы.**
+
+Назначение обработчика осуществляется вызовом `attachEvent`:
+
+```js
+element.attachEvent( "on"+event, handler);
+```
+
+Удаление обработчика -- вызовом `detachEvent`:
+
+```js
+element.detachEvent( "on"+event, handler);
+```
+
+Например:
+
+```js
+function handler() {
+    alert('Спасибо!');
+}
+button.attachEvent( "onclick" , handler) // Назначение обработчика
+// .... 
+button.detachEvent( "onclick", handler) // Удаление обработчика
+```
+
+Как видите, почти то же самое, только событие должно включать префикс `on` и нет третьего аргумента, который нам пока не нужен.
+
+
+[warn header="У обработчиков, назначенных с `attachEvent`, нет `this`"]
+Обработчики, назначенные с `attachEvent` не получают `this`!
+
+Это важная особенность и подводный камень старых IE.
+[/warn]
+
+### Кроссбраузерный способ назначения обработчиков
+
+Можно объединить способы для IE<9 и современных браузеров, создав свои методы `addEvent(elem, type, handler)` и `removeEvent(elem, type, handler)`:
+
+```js
+var addEvent, removeEvent;
+
+if (document.addEventListener) { // проверка существования метода
+  addEvent = function(elem, type, handler) {
+    elem.addEventListener(type, handler, false);
+  };
+  removeEvent = function(elem, type, handler) {
+    elem.removeEventListener(type, handler, false);
+  };
+} else {
+  addEvent = function(elem, type, handler) {
+    elem.attachEvent("on" + type, handler);
+  };
+  removeEvent = function(elem, type, handler) {
+    elem.detachEvent("on" + type, handler);
+  };
+}
+
+...
+// использование:
+addEvent(elem, "click", function() { alert("Привет"); });
+```
+
+Это хорошо работает в большинстве случаев, но у обработчика не будет `this` в IE, потому что `attachEvent` не поддерживает `this`.
+
+Кроме того, в IE7- есть проблемы с утечками памяти... Но если вам не нужно `this`, и вы не боитесь утечек (как вариант -- не поддерживаете IE7-), то это решение может подойти.
+
+
+## Итого
+
+Есть три способа назначения обработчиков событий:
+
+<ol>
+<li>Атрибут HTML: `onclick="..."`.</li>
+<li>Свойство: <code>elem.onclick = function</code>.</li>
+<li>Специальные методы:
+<ul>
+<li>Для IE8-: `elem.attachEvent( on+событие, handler )` (удаление через `detachEvent`).</li>
+<li>Для остальных: `elem.addEventListener( событие, handler, false )` (удаление через `removeEventListener`).</li>
+</ul>
+</li>
+</ol>
+
+Сравнение `addEventListener` и `onclick`:
+[compare]
++Некоторые события можно назначить только через `addEventListener`.
++Метод `addEventListener` позволяет назначить много обработчиков на одно событие.
+-Обработчик, назначенный через `onclick`, проще удалить или заменить.
+-Метод `onclick` кросс-браузерный.
+[/compare]
+
+**Этим введением мы только начинаем работу с событиями, но вы уже можете решать разнообразные задачи с их использованием.**
+
+
+[head]
+<style type="text/css">
+.d0 { text-align:center;margin:auto; }
+.d1 p { margin: 0 }
+.d1 {
+margin:2em;
+background-color:green;
+width:13em;
+height:13em;
+text-align:center;
+}
+.d1 .number {
+  line-height: 2em;
+}
+.d2 {
+text-align:center;
+margin:auto;
+background-color:blue;
+width:9em;
+height:9em;
+}
+.d1 .d2 ,number {
+  line-height: 2em;
+}
+.d3 {
+text-align:center;
+margin:auto;
+background-color:red;
+width:5em;
+height:5em;
+}
+.d1 .d2 .d3 .number {
+  line-height: 5em;
+}
+.d1 .d2 .d2a {
+  color:white;
+  line-height: 2em;
+}
+</style>
+<script type="text/javascript">
+function highlightMe(elem) {
+    elem.style.backgroundColor='yellow'
+    alert(elem.className)
+    elem.style.backgroundColor = ''
+}
+
+function highlightMe2(e) {
+    highlightMe(e.currentTarget);
+}
+</script>
+[/head]
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/2-events-and-timing-depth/article.md b/2-ui/2-events-and-interfaces/2-events-and-timing-depth/article.md
new file mode 100644
index 00000000..7d9265ac
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/2-events-and-timing-depth/article.md
@@ -0,0 +1,175 @@
+# Порядок обработки событий
+
+События могут возникать не только по очереди, но и пачкой, по многу сразу. Возможно и такое, что во время обработки одного события возникают другие.
+
+Здесь и далее, очень важно понимать, как браузер обычно работает с событиями и важные исключения из этого правила. Это мы и разберём в этой главе.
+
+[cut]
+## Главный поток
+
+В каждом окне выполняется только один *главный* поток, который занимается выполнением JavaScript, отрисовкой и работой с DOM. 
+
+Он выполняет команды последовательно и блокируется при выводе модальных окон, таких как `alert`. 
+
+
+[smart header="Дополнительные потоки тоже есть"]
+Есть и другие, служебные потоки, например, для сетевых коммуникаций. 
+
+Поэтому скачивание файлов может продолжаться пока главный поток ждёт реакции на `alert`. Но управлять служебными потоками мы не можем.
+[/smart]
+
+[smart header="Web Workers"]
+Существует спецификация <a href="http://www.w3.org/TR/workers/">Web Workers</a>, которая позволяет запускать дополнительные JavaScript-процессы(workers). 
+
+Они могут обмениваться сообщениями с главным процессом, но их переменные полностью независимы.
+
+В частности, дополнительные процессы не имеют доступа к DOM, поэтому они полезны, преимущественно, при вычислениях, чтобы загрузить несколько ядер/процессоров одновременно.
+[/smart]
+
+## Очередь событий
+
+Произошло одновременно несколько событий или во время работы одного случилось другое -- как главному потоку обработать это?
+
+Если главный поток прямо сейчас занят, то он не может срочно выйти из середины одной функции и прыгнуть в другую. А потом третью. Отладка при этом могла бы превратиться в кошмар, потому что пришлось бы разбираться с совместным состоянием нескольких функций сразу. 
+
+Поэтому используется альтернативный подход.
+
+**Когда происходит событие, оно попадает в очередь.**
+
+Внутри браузера существует главный внутренний цикл, который проверяет очередь и обрабатывает события, запускает соответствующие обработчики и т.п. 
+
+**Иногда события добавляются в очередь сразу пачкой.**
+
+Например, при клике на элементе генерируется несколько событий: 
+<ol>
+<li>Сначала `mousedown` -- нажата кнопка мыши.</li>
+<li>Затем `mouseup` -- кнопка мыши отпущена.</li>
+<li>Так как это было над одним элементом, то дополнительно генерируется `click`</li>
+</ol>
+
+
+В действии:
+
+```html
+<!--+ autorun -->
+<textarea rows="6" cols="40" id="area">Кликни меня
+</textarea>
+
+<script>
+  area.onmousedown = function(e) { this.value += "mousedown\n"; this.scrollTop = 1e9; };
+  area.onmouseup = function(e) { this.value += "mouseup\n"; this.scrollTop = 1e9; };
+  area.onclick = function(e) { this.value += "click\n"; this.scrollTop = 1e9; };
+</script>
+```
+
+Таким образом, при нажатии кнопки мыши в очередь попадёт событие `mousedown`, а при отпускании -- сразу два события: `mouseup` и `click`. Браузер сначала обработает первое, а потом -- второе.
+
+**При этом каждое событие из очереди обрабатывается полностью отдельно от других.**
+
+## Вложенные (синхронные) события   
+
+В тех случаях, когда событие инициируется не посетителем, а кодом, то оно, как правило, обрабатывается синхронно, то есть прямо сейчас.
+
+Рассмотрим в качестве примера событие `onfocus`.
+
+### Пример: событие onfocus
+
+Когда посетитель фокусируется на элементе, возникает событие `onfocus`. Обычно оно происходит, когда посетитель кликает на поле ввода, например:
+
+```html
+<!--+ run autorun -->
+<p>При фокусе на поле оно изменит значение.</p>
+<input type="text" onfocus="this.value = 'Фокус!'" value="Кликни меня">
+```
+
+Но ту же фокусировку можно вызвать и явно, вызовом метода `elem.focus()`:
+
+```html
+<!--+ run -->
+<input type="text" id="elem" onfocus="this.value = 'Фокус!'">
+
+<script>
+*!*
+  // сфокусируется на input и вызовет обработчик onfocus
+  elem.focus();
+*/!*
+</script>
+```
+
+В главе [](/focus-blur) мы познакомимся с этим событием подробнее, а пока -- нажмите на кнопку в примере ниже. При этом обработчик `onclick` вызовет метод `focus()` на текстовом поле `text`.
+
+**Событие `onfocus`, инициированное вызовом `text.focus()`, будет обработано синхронно, прямо сейчас, до завершения `onclick`.**
+
+```html
+<!--+ autorun -->
+<input type="button" id="button" value="Нажми меня">
+<input type="text" id="text" size="60">
+
+<script>
+
+  button.onclick = function() {
+    text.value += ' ->в onclick ';
+
+    text.focus(); // вызов инициирует событие onfocus
+   
+    text.value += ' из onclick-> ';
+  };
+ 
+  text.onfocus = function() {
+    text.value += ' !focus! ';
+  };
+</script>
+```
+
+При клике на кнопке в примере выше будет видно, что управление вошло в `onclick`, затем перешло в `onfocus`, затем вышло из `onclick`.
+
+**Так ведут себя все браузеры, кроме IE.** 
+
+В нём событие `onfocus` -- всегда асинхронное, так что будет сначала полностью обработан клик, а потом -- фокус. В остальных -- фокус вызовется посередине клика. Попробуйте кликнуть в IE и в другом браузере, чтобы увидеть разницу.
+
+
+## Делаем события асинхронными через setTimeout(...,0)
+
+А что, если мы хотим, чтобы *сначала* закончилась обработка `onclick`, а потом уже произошла обработка `onfocus` и связанные с ней действия?
+
+Можно добиться и этого.
+
+Один вариант -- просто переместить строку `text.focus()` вниз кода обработчика.
+
+Если это неудобно, можно запланировать `text.focus()` чуть позже через `setTimeout(..., 0)`, вот так
+
+```html
+<!--+ autorun -->
+<input type="button" id="button" value="Нажми меня">
+<input type="text" id="text" size="60">
+
+<script>
+
+  button.onclick = function() {
+    text.value += ' ->в onclick ';
+
+*!*
+    setTimeout(function() {
+      text.focus(); // сработает после onclick
+    }, 0);
+*/!*
+   
+    text.value += ' из onclick-> ';
+  };
+ 
+  text.onfocus = function() {
+    text.value += ' !focus! ';
+  };
+</script>
+```
+
+Такой вызов обеспечит фокусировку через минимальный "тик" таймера, по стандарту равный 4мс. Обычно такая задержка не играет роли, а необходимую асинхронность мы получили.
+
+## Итого
+
+<ul>
+<li>JavaScript выполняется в едином потоке. Современные браузеры позволяют порождать подпроцессы <a href="http://www.w3.org/TR/workers/">Web Workers</a>, они выполняются параллельно и могут отправлять/принимать сообщения, но не имеют доступа к DOM.</li>
+<li>Обычно события становятся в очередь и обрабатываются в порядке поступления, асинхронно, независимо друг от друга.</li>
+<li>Синхронными являются вложенные события,  инициированные из кода.</li>
+<li>Чтобы сделать событие гарантированно асинхронным, используется вызов через `setTimeout(func, 0)`.</li>
+</ul>
diff --git a/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.md b/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.md
new file mode 100644
index 00000000..30031d16
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.md
@@ -0,0 +1,35 @@
+# Мяч под курсор мыши
+
+Основная сложность первого этапа -- сдвинуть мяч под курсор, т.к. координаты клика `e.clientX/Y` -- относительно окна, а мяч позиционирован абсолютно внутри поля, его координаты `left/top` нужно ставить относительно левого-верхнего внутреннего (внутри рамки!) угла поля.
+
+Чтобы правильно вычислить координаты мяча, нужно получить координаты угла поля и вычесть их из `clientX/Y`:
+
+```js
+var field = document.getElementById('field');
+var ball = document.getElementById('ball');
+
+field.onclick = function(e) {
+
+*!*
+  var fieldCoords = field.getBoundingClientRect();
+  var fieldInnerCoords = {
+    top: fieldCoords.top + field.clientTop,
+    left: fieldCoords.left + field.clientLeft
+  };
+
+  ball.style.left = e.clientX - fieldInnerCoords.left + 'px';
+  ball.style.top = e.clientY - fieldInnerCoords.top + 'px';
+*/!*
+
+};
+```
+
+Далее мяч нужно сдвинуть на половину его ширины и высоты `ball.clientWidth/clientHeight`, чтобы он оказался центром под курсором. 
+
+Здесь есть важный "подводный камень" -- размеры мяча в исходном документе не прописаны. Там просто стоит `<img>`. Но на момент выполнения JavaScript картинка, возможно, ещё не загрузилась, так что высота и ширина мяча будут неизвестны (а они необходимы для центрирования).
+
+Нужно добавить `width/height` в тег `<img>` или задать размеры в CSS, тогда на момент выполнения JavaScript будет знать их и передвинет мяч правильно.
+
+Код, который полностью центрирует мяч, вы найдете в полном решении:
+
+[iframe border="1" src="solution" height="260" link edit]
diff --git a/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.view/index.html b/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.view/index.html
new file mode 100755
index 00000000..9d09b8fd
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.view/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style> 
+  #field { 
+    width: 200px;
+    height: 150px;
+    border: 10px groove black;
+    background-color: #00FF00;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+  }
+    
+  #ball {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 40px;
+    height: 40px;
+
+    -webkit-transition: all 1s;
+    -moz-transition: all 1s;
+    -o-transition: all 1s;
+    -ms-transition: all 1s;
+    transition: all 1s;
+  }
+
+  </style>
+</head>
+<body style="height:2000px">
+
+  Кликните на любое место поля, чтобы мяч перелетел туда.<br>
+
+
+  <div id="field">
+    <img src="http://js.cx/clipart/ball.gif" id="ball">
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+  </div>
+
+  <script>
+
+  var field = document.getElementById('field');
+  var ball = document.getElementById('ball');
+
+
+  field.onclick = function(event) {
+    
+    // координаты поля относительно окна
+    var fieldCoords = this.getBoundingClientRect();
+
+    // координаты левого-верхнего внутреннего угла поля
+    var fieldInnerCoords = {
+      top: fieldCoords.top + field.clientTop,
+      left: fieldCoords.left + field.clientLeft
+    };
+
+    // разместить по клику,
+    // но сдвинув относительно поля (т.к. position:relative) 
+    // и сдвинув на половину ширины/высоты
+    // (!) используются координаты относительно окна clientX/Y, как и в fieldCoords
+    var ballCoords = {  
+      top: event.clientY - fieldInnerCoords.top - ball.clientHeight / 2,
+      left: event.clientX - fieldInnerCoords.left - ball.clientWidth / 2
+    };
+
+    // вылезает за верхнюю границу - разместить по ней
+    if(ballCoords.top < 0) ballCoords.top = 0;
+
+    // вылезает за левую границу - разместить по ней
+    if(ballCoords.left < 0) ballCoords.left = 0;
+
+
+    // вылезает за правую границу - разместить по ней
+    if(ballCoords.left + ball.clientWidth > field.clientWidth) {
+      ballCoords.left = field.clientWidth - ball.clientWidth;
+    }
+
+    // вылезает за нижнюю границу - разместить по ней
+    if(ballCoords.top + ball.clientHeight > field.clientHeight) {
+      ballCoords.top = field.clientHeight - ball.clientHeight;
+    }
+
+    ball.style.left = ballCoords.left + 'px';
+    ball.style.top = ballCoords.top + 'px';
+  }
+
+
+  </script>
+
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/source.view/index.html b/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/source.view/index.html
new file mode 100755
index 00000000..5db0fe17
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/source.view/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<style> 
+  #field { 
+    width: 200px;
+    height: 150px;
+    border: 10px groove black;
+    background-color: #00FF00;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  #ball {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left: -20px;
+    margin-top: -20px;
+  }
+</style>
+</head>
+<body style="height:2000px">
+
+Кликните на любое место поля, чтобы мяч перелетел туда.<br>
+Мяч никогда не вылетит за границы поля.
+
+
+<div id="field">
+<img src="http://js.cx/clipart/ball.gif" id="ball">
+. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+</div>
+
+
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/task.md b/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/task.md
new file mode 100644
index 00000000..4a56e13c
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/task.md
@@ -0,0 +1,26 @@
+# Передвигать мяч по полю
+
+[importance 5]
+
+Сделайте так, что при клике по полю мяч перемещался на место клика.
+
+[iframe src="solution" height="260" link]
+
+Требования:
+<ul>
+<li>Мяч после перелёта должен становиться центром ровно под курсор мыши, если это возможно без вылета за край поля.</li>
+<li>CSS-анимация не обязательна, но желательна.</li>
+<li>Мяч должен останавливаться у границ поля, ни в коем случае не вылетать за них.</li>
+<li>При прокрутке страницы ничего не должно ломаться.</li>
+</ul>
+
+Замечания:
+<ul>
+<li>Код не должен зависеть от конкретных размеров мяча и поля.</li>
+<li>Текущий HTML/CSS нельзя менять, можно лишь "украшать" (анимация).</li>
+<li>Вам пригодятся свойства `event.clientX/event.clientY`</li>
+</ul>
+
+[edit src="source" task/]
+
+P.S. Центрировать мяч можно и при помощи CSS, но JavaScript в перспективе позволит делать это гибче и определять позицию более динамически.
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/3-obtaining-event-object/article.md b/2-ui/2-events-and-interfaces/3-obtaining-event-object/article.md
new file mode 100644
index 00000000..b7ee8645
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/3-obtaining-event-object/article.md
@@ -0,0 +1,109 @@
+# Объект события
+
+Чтобы хорошо обработать событие, недостаточно знать о том, что это -- "клик" или "нажатие клавиши". Могут понадобиться детали: координаты курсора, введённый символ и другие, в зависимости от события.
+
+**Детали произошедшего браузер записывает в "объект события", который передаётся первым аргументом в обработчик.**
+[cut]
+
+## Получение объекта события   
+
+Пример ниже демонстрирует использования объекта события:
+
+```html
+<!--+ run -->
+<input type="button" value="Нажми меня" id="elem">
+
+<script>
+  elem.onclick = function(*!*event*/!*) {
+    alert(event.type + " на " + event.currentTarget); 
+    alert(event.clientX + ":" + event.clientY); 
+  }
+</script>
+```
+
+Свойства объекта `event`:
+<dl>
+<dt>`event.type`</dt>
+<dd>Тип события, в данном случае `click`</dd>
+<dt>`event.currentTarget`</dt>
+<dd>Элемент, на котором сработал обработчик -- то же, что и `this`, но бывают ситуации, когда обработчик является методом объекта и его `this` при помощи `bind` привязан к объекту, тогда `event.currentTarget` полезен.</dd>
+<dt>`event.clientX / event.clientY`</dt>
+<dd>Координаты курсора в момент клика (относительно окна)</dd>
+</dl>
+
+Есть также и ряд других свойств, в зависимости от событий, которые мы разберём в дальнейших главах, когда будем подробно знакомиться с событиями мыши, клавиатуры и так далее.
+
+[smart header="Объект события доступен и в HTML"]
+При назначении обработчика в HTML, тоже можно использовать переменную `event`, это будет работать кросс-браузерно:
+
+```html
+<!--+ autorun height=auto -->
+<input type="button" onclick="*!*alert(event.type)*/!*" value="Тип события">
+```
+
+Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: `function(event) { alert(event.type) }`. То есть, её первый аргумент называется `"event"`.
+[/smart]
+
+## Особенности IE8-
+
+IE8- вместо передачи параметра обработчику создаёт глобальный объект `window.event`. Обработчик может обратиться к нему.
+
+Работает это так:
+
+```js
+elem.onclick = function() {
+  // window.event - объект события
+  alert( window.event.clientX );
+};
+```
+
+### Кроссбраузерное решение   
+
+Универсальное решение для получения объекта события:
+
+```js
+element.onclick = function(event) {
+  event = event || window.event; // (*)
+
+  // Теперь event - объект события во всех браузерах.
+};
+```
+
+Строка `(*)`, в случае, если функция не получила `event` (IE8-), использует `window.event`.-событие `event`.
+
+Можно написать и иначе, если мы сами не используем переменную `event` в замыкании:
+
+```js
+element.onclick = function(e) {
+  e = e || event; 
+
+  // Теперь e - объект события во всех браузерах.
+};
+```
+
+## Итого
+
+<ul>
+<li>Объект события содержит ценную информацию о деталях события.</li>
+<li>Он передается первым аргументом `event` в обработчик для всех браузеров, кроме IE8-, в которых используется глобальная переменная `window.event`.</li>
+</ul>
+
+Кросс-браузерно для JavaScript-обработчика получаем объект события так:
+
+```js
+element.onclick = function(event) {
+    event = event || window.event;
+
+    // Теперь event - объект события во всех браузерах.
+};
+```
+
+Еще вариант:
+
+```js
+element.onclick = function(e) {
+    e = e || event; // если нет другой внешней переменной event
+    ...
+};
+```
+
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/article.md b/2-ui/2-events-and-interfaces/4-event-bubbling/article.md
new file mode 100644
index 00000000..7c774993
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/4-event-bubbling/article.md
@@ -0,0 +1,255 @@
+# Всплытие и перехват
+
+Давайте сразу начнём с примера. 
+
+Этот обработчик для `<div>` сработает, если вы кликните по вложенному тегу `<em>` или `<code>`:
+
+```html
+<!--+ autorun height=auto -->
+<div onclick="alert('Обработчик для Div сработал!')">
+  <em>Кликните на <code>EM</code>, сработает обработчик на <code>DIV</code></em>
+</div>
+```
+
+Вам не кажется это странным? Почему же сработал обработчик на `<div>`, если клик произошёл на `<em>`?
+
+## Всплытие
+
+Основной принцип всплытия:
+
+**При наступлении события обработчики сначала срабатывают на самом вложенном элементе, затем на его родителе, затем выше и так далее, вверх по цепочке вложенности.**
+
+Например, есть 3 вложенных элемента `FORM > DIV > P`, с обработчиком на каждом:
+
+```html
+<!--+ run -->
+<form onclick="alert('form')">FORM
+    <div onclick="alert('div')">DIV
+        <p onclick="alert('p')">P</p>
+    </div>
+</form>
+```
+
+Всплытие гарантирует, что клик по внутреннему `P` вызовет обработчик `onclick` (если есть) сначала на самом `P`, затем на элементе `DIV` далее на элементе `FORM`, и так далее вверх по цепочке родителей до самого `document`.
+
+<img src="event-order-bubbling.png" alt="Порядок всплытия событий">
+
+Этот процесс называется *всплытием*, потому что события "всплывают" от внутреннего элемента вверх через родителей, подобно тому, как всплывает пузырек воздуха в воде.
+
+[warn header="Всплывают *почти* все события."]
+Ключевое слово в этой фразе -- "почти". 
+
+Например, событие `focus` не всплывает. В дальнейших главах мы будем детально знакомиться с различными событиями и увидим ещё примеры.
+[/warn]
+
+## Целевой элемент event.target   
+
+На каком бы элементе мы ни поймали событие, всегда можно узнать, где конкретно оно произошло.
+
+**Самый глубокий элемент, который вызывает событие, называется *"целевым"* или *"исходным"* элементом и доступен как `event.target`.**
+
+Отличия от `this` (=`event.currentTarget`):
+<ul>
+<li>`event.target` -- это **исходный элемент**, на котором произошло событие, в процессе всплытия он неизменен.</li>
+<li>`this` -- это **текущий элемент**, до которого дошло всплытие, на нём сейчас выполняется обработчик.</li>
+</ul>
+
+Например, если стоит только один обработчик `form.onclick`, то он "поймает" все клики внутри него. Где бы ни был клик внутри -- он всплывёт до элемента `<form>`, на котором сработает обработчик.
+
+<ul>
+<li>`event.target` будет содержать элемент, на котором произошёл клик.</li>
+<li>`this` (`=event.currentTarget`) всегда будет сама форма, так как обработчик сработал на ней.</li>
+</ul>
+
+[example height=220 src="bubble-target"]
+
+## Прекращение всплытия   
+
+Всплытие идет прямо наверх. Обычно событие будет всплывать наверх и наверх, до элемента `<html>`, а затем до `document` и даже до `window`, вызывая все обработчики на своем пути.
+
+**Но любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие.**
+
+Для остановки всплытия нужно вызвать метод `event.stopPropagation()`.
+
+Например, здесь при клике на кнопку обработчик `body.onclick` не сработает:
+
+```html
+<!--+ run autorun -->
+<body onclick="alert('сюда обработка не дойдёт')">
+  <button onclick="event.stopPropagation()">Кликни меня</button>
+</body>
+```
+
+[smart header="event.stopImmediatePropagation()"] 
+Если у элемента есть несколько обработчиков на одно событие, то даже при прекращении всплытия все они будут выполнены. 
+
+То есть, `stopPropagation` препятствует продвижению события дальше, но на текущем элементе все обработчики отработают.
+
+Для того, чтобы полностью остановить обработку, современные браузеры поддерживают метод `event.stopImmediatePropagation()`. Он не только предотвращает всплытие, но и останавливает обработку событий на текущем элементе.
+[/smart]
+
+[warn header="Не прекращайте всплытие без необходимости!"]
+Всплытие -- это удобно. Не прекращайте его без явной нужды, очевидной и архитектурно прозрачной. 
+
+Зачастую прекращение всплытия создаёт свои подводные камни, которые потом приходится обходить. 
+
+Например:
+<ol>
+<li>Мы делаем меню. Оно обрабатывает клики на своих элементах и делает для них `stopPropagation`. Вроде бы, всё работает.</li>
+<li>Позже мы решили отслеживать все клики в окне, для какой-то своей функциональности, к примеру, для статистики -- где вообще у нас кликают люди. Например, Яндекс.Метрика так делает, если включить соответствующую опцию.</li>
+<li>Над областью, где клики убиваются `stopPropagation`, статистика работать не будет! Получилась "мёртвая зона".</li>
+</ol>
+
+Проблема в том, что `stopPropagation` убивает всякую возможность отследить событие сверху, а это бывает нужно для реализации чего-нибудь "эдакого", что к меню отношения совсем не имеет.
+[/warn]
+
+## Погружение
+
+В современном стандарте, кроме "всплытия" событий, предусмотрено ещё и "погружение".
+
+Оно гораздо менее востребовано, но иногда, очень редко, знание о нём может быть полезным.
+
+[cut]
+
+## Три стадии прохода события
+
+Кроме всплытия, есть ещё стадии прохода события.
+
+В соответствии со стандартом, их три:
+
+<ol>
+<li>Событие сначала идет сверху вниз. Эта стадия называется *"стадия перехвата"* (capturing stage).</li>
+<li>Событие достигло целевого элемента. Это -- *"стадия цели"* (target stage).</li>
+<li>После этого событие начинает всплывать. Это -- *"стадия всплытия"* (bubbling stage).</li>
+</ol>
+
+В [стандарте DOM Events 3](http://www.w3.org/TR/DOM-Level-3-Events/) это продемонстрировано так:
+
+<img src="eventflow.png">
+
+То есть, при клике на `TD` событие путешествует по цепочке родителей сначала вниз к элементу ("погружается"), а потом наверх ("всплывает"), по пути задействуя обработчики.
+
+**Ранее мы говорили только о всплытии, потому что другие стадии, как правило, не используются и проходят незаметно для нас.**
+
+Обработчики, добавленные через `on...`, ничего не знают о стадии перехвата, а начинают работать со всплытия.
+
+**Чтобы поймать событие на стадии перехвата, нужно использовать третий аргумент `addEventListener`:**
+
+<ul>
+<li>Если аргумент `true`, то событие будет перехвачено по дороге вниз.</li>
+<li>Если аргумент `false`, то событие будет поймано при всплытии.</li>
+</ul>
+
+Стадия цели, обозначенная на рисунке цифрой `(2)`, особо не обрабатывается, так как обработчики, назначаемые обоими этими способами, срабатывают также на целевом элементе.
+
+## Примеры
+
+В примере ниже на `form, div, p` стоят те же обработчики, что и раньше, но на этот раз -- на стадии погружения.
+
+Чтобы увидеть перехват в действии, кликните на элементе `P`:
+
+[example height=220 src="capture"]
+
+Обработчики сработают в порядке "сверху-вниз": `FORM` -> `DIV` -> `P`.
+
+JS-код здесь такой:
+
+```js
+var elems = document.querySelectorAll('form,div,p');
+
+// на каждый элемент повесить обработчик на стадии перехвата
+for(var i=0; i<elems.length; i++) {
+  elems[i].addEventListener("click", highlightThis, true);
+}
+```
+
+Никто не мешает назначить обработчики для обеих стадий, вот так:
+
+```js
+var elems = document.querySelectorAll('form,div,p');
+
+for(var i=0; i<elems.length; i++) {
+  elems[i].addEventListener("click", highlightThis, true);
+  elems[i].addEventListener("click", highlightThis, false);
+}
+```
+
+Кликните по внутреннему элементу `P`, чтобы увидеть порядок прохода события:
+
+[example height=220 src="both"]
+
+Должно быть `FORM` -> `DIV` -> `P` -> `P` -> `DIV` -> `FORM`. Заметим, что элемент `P` участвует в обоих стадиях.
+
+Как видно из примера, один и тот же обработчик можно назначить на разные стадии. При этом номер текущей стадии он, при необходимости, может получить из свойства `event.eventPhase` (=1, если погружение, =3, если всплытие).
+
+[smart header="Есть события, которые не всплывают, но которые можно перехватить"]
+Есть события, которые можно поймать только на стадии перехвата, а на стадии всплытия -- нельзя.. 
+
+Например, таково событие фокусировки на элементе [onfocus](/focus-blur).
+[/smart]
+
+
+## Отличия IE8-
+
+Чтобы было проще ориентироваться, я собрал отличия IE8-, которые имеют отношение ко всплытию, в одну секцию. 
+ 
+Их знание понадобится, если вы решите писать на чистом JS, без фреймворков и вам понадобится поддержка IE8-.
+
+<dl>
+<dt>Нет свойства `event.currentTarget`</dt>
+<dd>Обратим внимание, что при назначении обработчика через `onсвойство` у нас есть `this`, поэтому `event.currentTarget`, как правило, не нужно, а вот при назначении через `attachEvent` обработчик не получает `this`, так что текущий элемент, если нужен, можно будет взять лишь из замыкания.</dd>
+<dt>Вместо `event.target` в IE8- используется `event.srcElement`</dt>
+<dd>Если мы пишем обработчик, который будет поддерживать и IE8- и современные браузеры, то можно начать его так:
+
+```js
+elem.onclick = function(event) {
+  event = event || window.event;
+  var target = event.target || event.srcElement;
+
+  // ... теперь у нас есть объект события и target
+  ...
+}
+```
+
+</dd>
+<dt>Для остановки всплытия используется код `event.cancelBubble=true`.</dt>
+<dd>Кросс-браузерно остановить всплытие можно так:
+
+```js
+event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
+```
+
+</dd>
+</dl>
+
+Далее в учебнике мы будем использовать стандартные свойства и вызовы, поскольку добавление этих строк, обеспечивающих совместимость -- достаточно простая и очевидная задача.
+
+Ещё раз хотелось бы заметить -- эти отличия понадобятся при написании JS-кода с поддержкой IE8- без фреймворков. Почти все JS-фреймворки обеспечивают кросс-браузерную поддержку `target`, `currentTarget` и `stopPropagation()`.
+
+## Итого
+
+Алгоритм:
+<ul>
+<li>При наступлении события -- элемент, на котором оно произошло, помечается как "целевой" (`event.target`).</li>
+<li>Далее событие сначала двигается вниз от корня документа к `event.target`, по пути вызывая обработчики, поставленные через `addEventListener(...., true)`.</li>
+<li>Далее событие двигается от `event.target` вверх к корню документа, по пути вызывая обработчики, поставленные через `on*` и `addEventListener(...., false)`.</li>
+</ul>
+
+Каждый обработчик имеет доступ к свойствам события:
+<ul>
+<li>`event.target` -- самый глубокий элемент, на котором прозошло событие.</li>
+<li>`event.currentTarget` (=`this`) -- элемент, на котором в данный момент сработал обработчик (до которого "доплыло" событие).</li>
+<li>`event.eventPhase` -- на какой фазе он сработал (погружение =1, всплытие = 3).</li>
+</ul>
+
+Любой обработчик может остановить событие вызовом `event.stopPropagation()`, но делать это не рекомендуется, так как в дальнейшем это событие может понадобиться, иногда для самых неожиданных вещей.
+
+В современной разработке стадия погружения используется очень редко. 
+
+Этому есть две причины:
+<ol>
+<li>Историческая, так как IE лишь с версии 9 в полной мере поддерживает современный стандарт.</li>
+<li>Разумная -- когда происходит событие, то разумно дать возможность первому сработать обработчику на самом элементе, поскольку он наиболее конкретен. Код, который поставил обработчик именно на этот элемент, знает максимум деталей о том, что это за элемент, чем он занимается, и обработчик через замыкание, скорее всего, имеет к ним доступ.
+
+Далее имеет смысл передать обработку события родителю -- он тоже понимает, что происходит, но уже менее детально, далее -- выше, и так далее, до самого объекта `document`, обработчик на котором реализовывает самую общую функциональность уровня документа.</li>
+</ol>
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/both.view/example.css b/2-ui/2-events-and-interfaces/4-event-bubbling/both.view/example.css
new file mode 100755
index 00000000..4fc1a986
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/4-event-bubbling/both.view/example.css
@@ -0,0 +1,28 @@
+form {
+  background-color: green;
+  position: relative;
+  width: 150px;
+  height: 150px;
+  text-align: center;
+  cursor: pointer;
+}
+
+div {
+  background-color: blue;
+  position: absolute;
+  top: 25px;
+  left: 25px;
+  width: 100px;
+  height: 100px;
+}
+
+p {
+  background-color: red;
+  position: absolute;
+  top: 25px;
+  left: 25px;
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+  margin: 0;
+}
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/both.view/index.html b/2-ui/2-events-and-interfaces/4-event-bubbling/both.view/index.html
new file mode 100755
index 00000000..8099db3b
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/4-event-bubbling/both.view/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<link type="text/css" rel="stylesheet" href="example.css">
+
+<form>FORM
+    <div>DIV
+        <p>P</p>
+    </div>
+</form>
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/both.view/script.js b/2-ui/2-events-and-interfaces/4-event-bubbling/both.view/script.js
new file mode 100755
index 00000000..b7c03f1c
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/4-event-bubbling/both.view/script.js
@@ -0,0 +1,13 @@
+
+var elems = document.querySelectorAll('form,div,p');
+
+for(var i=0; i<elems.length; i++) {
+  elems[i].addEventListener("click", highlightThis, true);
+  elems[i].addEventListener("click", highlightThis, false);
+}
+
+function highlightThis() {
+  this.style.backgroundColor = 'yellow';
+  alert(this.tagName);
+  this.style.backgroundColor = '';
+}
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/example.css b/2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/example.css
new file mode 100755
index 00000000..4fc1a986
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/example.css
@@ -0,0 +1,28 @@
+form {
+  background-color: green;
+  position: relative;
+  width: 150px;
+  height: 150px;
+  text-align: center;
+  cursor: pointer;
+}
+
+div {
+  background-color: blue;
+  position: absolute;
+  top: 25px;
+  left: 25px;
+  width: 100px;
+  height: 100px;
+}
+
+p {
+  background-color: red;
+  position: absolute;
+  top: 25px;
+  left: 25px;
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+  margin: 0;
+}
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/index.html b/2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/index.html
new file mode 100755
index 00000000..bbb05b6c
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<link type="text/css" rel="stylesheet" href="example.css">
+
+<form id="form">FORM 
+    <div>DIV
+        <p>P</p> 
+    </div>
+</form>
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/script.js b/2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/script.js
new file mode 100755
index 00000000..5e454fed
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/script.js
@@ -0,0 +1,10 @@
+
+var form = document.querySelector('form');
+
+form.onclick = function(event) {
+  event.target.style.backgroundColor = 'yellow';
+
+  alert("target = " + event.target.tagName + ", this=" + this.tagName);
+
+  event.target.style.backgroundColor = '';
+};
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/example.css b/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/example.css
new file mode 100755
index 00000000..4fc1a986
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/example.css
@@ -0,0 +1,28 @@
+form {
+  background-color: green;
+  position: relative;
+  width: 150px;
+  height: 150px;
+  text-align: center;
+  cursor: pointer;
+}
+
+div {
+  background-color: blue;
+  position: absolute;
+  top: 25px;
+  left: 25px;
+  width: 100px;
+  height: 100px;
+}
+
+p {
+  background-color: red;
+  position: absolute;
+  top: 25px;
+  left: 25px;
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+  margin: 0;
+}
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/index.html b/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/index.html
new file mode 100755
index 00000000..8099db3b
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<link type="text/css" rel="stylesheet" href="example.css">
+
+<form>FORM
+    <div>DIV
+        <p>P</p>
+    </div>
+</form>
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/script.js b/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/script.js
new file mode 100755
index 00000000..d105514a
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/script.js
@@ -0,0 +1,12 @@
+
+var elems = document.querySelectorAll('form,div,p');
+
+for(var i=0; i<elems.length; i++) {
+  elems[i].addEventListener("click", highlightThis, true);
+}
+
+function highlightThis() {
+  this.style.backgroundColor = 'yellow';
+  alert(this.tagName);
+  this.style.backgroundColor = '';
+}
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.png b/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.png
new file mode 100755
index 00000000..b8cfc965
Binary files /dev/null and b/2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.png differ
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.png b/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.png
new file mode 100755
index 00000000..dbf2ddbe
Binary files /dev/null and b/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.png differ
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.md b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.md
new file mode 100644
index 00000000..b69ff06a
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.md
@@ -0,0 +1,3 @@
+Поставьте обработчик `click` на контейнере. Он должен проверять, произошел ли клик на кнопке удаления (`target`), и если да, то удалять соответствующий ей `DIV`.
+
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/index.html
new file mode 100755
index 00000000..3292ec43
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="messages.css">
+    <meta charset="utf-8">
+</head>
+
+<body>
+
+<div id="messages-container">
+  <div class="pane">
+    <h3>Лошадь</h3>
+    <p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
+    <span class="remove-button"></span>
+  </div>
+  <div class="pane">
+    <h3>Осёл</h3>
+    <p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
+    <span class="remove-button"></span>
+  </div>
+  <div class="pane">
+    <h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
+    <p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
+    <span class="remove-button"></span>
+  </div>
+</div>
+
+<script>
+
+  document.getElementById('messages-container').onclick = function(e) {
+
+    e = e || window.event;
+    var target = e.target || e.srcElement;
+
+    // без цикла, т.к. мы точно знаем, что внутри нет тегов
+    if (target.className != 'remove-button') return;
+
+    target.parentNode.style.display = 'none';
+  }
+
+
+</script>
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/messages.css b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/messages.css
new file mode 100755
index 00000000..ad86dadf
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/messages.css
@@ -0,0 +1,35 @@
+body {
+	margin: 10px auto;
+	width: 470px;
+}
+h3 {
+	margin: 0;
+	padding-bottom: .3em;
+	font-size: 1.1em;
+}
+p {
+	margin: 0;
+	padding: 0 0 .5em;
+}
+.pane {
+	position: relative;
+	padding: 10px 20px 10px;
+	border-top: solid 2px #c4df9b;
+	background: #edf5e1;
+}
+
+
+.remove-button {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	display: block;
+	width: 16px;
+	height: 16px;
+	background: url(http://js.cx/clipart/delete.gif) no-repeat;
+	cursor: pointer;
+}
+
+h3 {
+	padding-right: 20px;
+}
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/index.html
new file mode 100755
index 00000000..6b9ed4a5
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="messages.css">
+    <meta charset="utf-8">
+</head>
+
+<body>
+
+<div id="messages-container">
+  <div class="pane">
+    <h3>Лошадь</h3>
+    <p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
+    <span class="remove-button"></span>
+  </div>
+  <div class="pane">
+    <h3>Осёл</h3>
+    <p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
+    <span class="remove-button"></span>
+  </div>
+  <div class="pane">
+    <h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
+    <p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
+    <span class="remove-button"></span>
+  </div>
+</div>
+
+<script>
+
+  /* ваш код */
+
+</script>
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/messages.css b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/messages.css
new file mode 100755
index 00000000..ed64b446
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/messages.css
@@ -0,0 +1,32 @@
+body {
+	margin: 10px auto;
+	width: 470px;
+}
+h3 {
+	margin: 0;
+	padding-bottom: .3em;
+	padding-right: 20px;
+	font-size: 1.1em;
+}
+p {
+	margin: 0;
+	padding: 0 0 .5em;
+}
+.pane {
+	background: #edf5e1;
+	padding: 10px 20px 10px;
+	border-top: solid 2px #c4df9b;
+    position: relative;
+}
+
+.remove-button {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	cursor: pointer;
+	display: block;
+	background: url(http://js.cx/clipart/delete.gif) no-repeat;
+	width: 16px;
+	height: 16px;
+}
+
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/task.md b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/task.md
new file mode 100644
index 00000000..8142d5a6
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/task.md
@@ -0,0 +1,12 @@
+# Скрытие сообщения с помощью делегирования
+
+[importance 5]
+
+Дан список сообщений. Добавьте каждому сообщению кнопку для его удаления.
+
+**Используйте делегирование событий. Один обработчик для всего.**
+
+В результате, должно работать вот так(кликните на крестик):
+[iframe src="solution" height=500]
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.md b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.md
new file mode 100644
index 00000000..5726f23d
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.md
@@ -0,0 +1,109 @@
+# Схема решения
+
+Дерево устроено как вложенный список.
+
+Клики на все элементы можно поймать, повесив единый обработчик `onclick` на внешний `UL`. 
+
+Как поймать клик на заголовке? Элемент `LI` является блочным, поэтому нельзя понять, был ли клик на *тексте*, или справа от него.
+
+Например, ниже -- участок дерева с выделенными рамкой узлами. Кликните справа от любого заголовка. Видите, клик ловится? А лучше бы такие клики (не на тексте) игнорировать.
+
+```html
+<!--+ autorun height=190 untrusted -->
+<style>
+li { border: 1px solid green; }
+</style>
+
+<ul onclick="alert(event.target)">
+<li>Млекопетающие
+  <ul>
+    <li>Коровы</li>
+    <li>Ослы</li>
+    <li>Собаки</li>
+    <li>Тигры</li>
+  </ul>
+</li>
+</ul>
+```
+
+В примере выше видно, что проблема в верстке, в том что `LI` занимает всю ширину. Можно кликнуть справа от текста, это все еще `LI`.
+
+Один из способов это поправить -- обернуть заголовки в дополнительный элемент `SPAN`, и обрабатывать только клики внутри `SPAN'ов`, получать по `SPAN'у` его родителя `LI` и ставить ему класс открыт/закрыт.
+
+Напишите для этого JavaScript-код.
+
+# Оборачиваем заголовки в SPAN
+
+Следующий код ищет все `LI` и оборачивает текстовые узлы в `SPAN`.
+
+```js
+var treeUl = document.getElementsByTagName('ul')[0];
+
+var treeLis = treeUl.getElementsByTagName('li');
+
+for(var i=0; i<treeLis.length; i++) {
+  var li = treeLis[i];
+  
+  var span = document.createElement('span');
+  li.insertBefore(span, li.firstChild); // добавить пустой SPAN
+  span.appendChild(span.nextSibling); // переместить в него заголовок
+}
+```
+
+Теперь можно отслеживать клики *на заголовках*.
+
+Так выглядит дерево с обёрнутыми в `SPAN` заголовками и делегированием:
+
+```html
+<!--+ autorun height=190 untrusted -->
+<style>
+span { border: 1px solid red; }
+</style>
+
+<ul onclick="alert(event.target.tagName)">
+<li><span>Млекопетающие</span>
+  <ul>
+    <li><span>Коровы</span></li>
+    <li><span>Ослы</span></li>
+    <li><span>Собаки</span></li>
+    <li><span>Тигры</span></li>
+  </ul>
+</li>
+</ul>
+```
+
+Так как `SPAN` -- инлайновый элемент, он всегда такого же размера как текст. Да здравствует `SPAN`!
+
+В реальной жизни дерево, скорее всего, будет сразу со `SPAN`: если HTML-код дерева генерируется на сервере, то это несложно, если дерево генерируется в JavaScript -- тем более просто.
+
+# Итоговое решение
+
+Для делегирования нужно по клику понять, на каком узле он произошел.
+
+В нашем случае у `SPAN` нет детей-элементов, поэтому не нужно подниматься вверх по цепочке родителей. Достаточно просто проверить `event.target.tagName == 'SPAN'`, чтобы понять, где был клик, и спрятать потомков.
+
+```js
+var tree = document.getElementsByTagName('ul')[0];
+
+tree.onclick = function(event) {
+  var target = event.target;
+
+  if (target.tagName != 'SPAN') {    
+    return; // клик был не на заголовке
+  }
+    
+  var li = target.parentNode; // получить родительский LI
+
+  // получить UL с потомками -- это первый UL внутри LI
+  var node = li.getElementsByTagName('ul')[0];
+
+  if (!node) return; // потомков нет -- ничего не надо делать
+
+  // спрятать/показать (можно и через CSS-класс)
+  node.style.display = node.style.display ? '' : 'none';
+}
+```
+
+Выделение узлов жирным при наведении делается при помощи CSS-селектора `:hover`.
+
+[edit src="solution"]Полное решение[/edit]
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.view/index.html
new file mode 100755
index 00000000..4292b440
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.view/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+.tree span:hover {
+  font-weight: bold;
+}
+.tree span {
+  cursor: pointer;
+}
+</style>
+<meta charset="utf-8">
+</head>
+<body>
+
+<ul class="tree">
+    <li>Животные
+        <ul>
+            <li>Млекопитающие
+                <ul>
+                    <li>Коровы</li>
+                    <li>Ослы</li>
+                    <li>Собаки</li>
+                    <li>Тигры</li>
+                </ul>
+            </li>
+            <li>Другие
+                <ul>
+                    <li>Змеи</li>
+                    <li>Птицы</li>
+                    <li>Ящерицы</li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+    <li>Рыбы
+        <ul>
+            <li>Аквариумные
+                <ul>
+                    <li>Гуппи</li>
+                    <li>Скалярии</li>
+                </ul>
+
+            </li>
+            <li>Морские
+                <ul>
+                    <li>Морская форель</li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+</ul>
+
+<script>
+var tree = document.getElementsByTagName('ul')[0];
+
+var treeLis = tree.getElementsByTagName('li');
+
+/* wrap all textNodes into spans */
+for(var i=0; i<treeLis.length; i++) {
+  var li = treeLis[i];
+
+  var span = document.createElement('span');
+  li.insertBefore(span, li.firstChild);
+  span.appendChild(span.nextSibling);
+}
+
+/* catch clicks on whole tree */
+tree.onclick = function(event) {
+  var target = event.target;
+
+  if (target.tagName != 'SPAN') {
+    return;
+  }
+
+  /* now we know SPAN is clicked */
+  var node = target.parentNode.getElementsByTagName('ul')[0];
+  if (!node) return; // no children
+
+  node.style.display = node.style.display ? '' : 'none';
+}
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/source.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/source.view/index.html
new file mode 100755
index 00000000..e4100d0a
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/source.view/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+
+<ul class="tree">
+    <li>Животные
+        <ul>
+            <li>Млекопитающие
+                <ul>
+                    <li>Коровы</li>
+                    <li>Ослы</li>
+                    <li>Собаки</li>
+                    <li>Тигры</li>
+                </ul>
+            </li>
+            <li>Другие
+                <ul>
+                    <li>Змеи</li>
+                    <li>Птицы</li>
+                    <li>Ящерицы</li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+    <li>Рыбы
+        <ul>
+            <li>Аквариумные
+                <ul>
+                    <li>Гуппи</li>
+                    <li>Скалярии</li>
+                </ul>
+
+            </li>
+            <li>Морские
+                <ul>
+                    <li>Морская форель</li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+</ul>
+
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/task.md b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/task.md
new file mode 100644
index 00000000..d838b3b7
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/task.md
@@ -0,0 +1,19 @@
+# Раскрывающееся дерево
+
+[importance 5]
+
+Создайте дерево, которое по клику на заголовок скрывает-показывает детей: 
+
+[iframe border=1 src="solution"]
+
+
+Требования:
+<ul>
+<li>Использовать делегирование.</li>
+<li>Клик вне текста заголовка (на пустом месте) ничего делать не должен.</li>
+<li>При наведении на заголовок -- он становится жирным, реализовать через CSS.</li>
+</ul>
+
+P.S. При необходимости HTML/CSS дерева можно изменить.
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.md b/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.md
new file mode 100644
index 00000000..ae704e84
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.md
@@ -0,0 +1,21 @@
+# Подсказка (обработчик)
+
+<ol>
+<li>Обработчик `onclick` можно повесить один, на всю таблицу или `THEAD`. Он будет игнорировать клики не на `TH`.</li>
+<li>При клике на `TH` обработчик будет получать номер из `TH`, на котором кликнули (`TH.cellIndex`) и вызывать функцию `sortColumn`, передавая ей номер колонки и тип.</li>
+<li>Функция `sortColumn(colNum, type)` будет сортировать.</li>
+</ol>
+
+# Подсказка (сортировка)
+
+Функция сортировки:
+
+<ol>
+<li>Переносит все `TR` из `TBODY` в массив `rowsArr`</li>
+<li>Сортирует массив, используя `rowsArr.sort(compare)`, функция `compare` зависит от типа столбца.</li>
+<li>Добавляет `TR` из массива обратно в `TBODY`</li>
+</ol>
+
+# Решение
+
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.view/index.html
new file mode 100755
index 00000000..572ca9d6
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.view/index.html
@@ -0,0 +1,117 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+  <meta charset="utf-8">
+  <style>
+    th {
+      cursor: pointer;
+    }
+    th:hover {
+      background: yellow;
+    }
+   </style>
+  </head>
+  <body>
+
+    <table id="grid">
+      <thead>
+      <tr>
+        <th data-type="number">Возраст</th>
+        <th data-type="string">Имя</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td>5</td>
+        <td>Вася</td>
+      </tr>
+      <tr>
+        <td>2</td>
+        <td>Петя</td>
+      </tr>
+      <tr>
+        <td>12</td>
+        <td>Женя</td>
+      </tr>
+      <tr>
+        <td>9</td>
+        <td>Маша</td>
+      </tr>
+      <tr>
+        <td>1</td>
+        <td>Илья</td>
+      </tr>
+      </tbody>
+    </table>
+
+    <script>
+      // сортировка таблицы
+      // использовать делегирование!
+      // должно быть масштабируемо:
+      // код работает без изменений при добавлении новых столбцов и строк
+
+      var grid = document.getElementById('grid');
+
+      grid.onclick = function(e) {
+        var target = e && e.target || window.event.srcElement;
+
+        if (target.tagName != 'TH') return;
+
+        // Если TH -- сортируем
+        sortGrid(target.cellIndex, target.getAttribute('data-type'));
+      };
+
+      function sortGrid(colNum, type) {
+        var tbody = grid.getElementsByTagName('tbody')[0];
+
+        // Составить массив из TR
+        var rowsArray = [].slice.call(tbody.rows);
+
+        // определить функцию сравнения, в зависимости от типа
+        var compare;
+
+        switch(type) {
+          case 'number':
+            compare = function(rowA, rowB) {
+              return rowA.cells[colNum].innerHTML - rowB.cells[colNum].innerHTML;
+            };
+            break;
+          case 'string':
+            compare = function(rowA, rowB) {
+              return rowA.cells[colNum].innerHTML > rowB.cells[colNum].innerHTML ? 1 : -1;
+            };
+            break;
+        }
+
+        // сортировать
+        rowsArray.sort(compare);
+
+        // Убрать tbody из большого DOM документа для лучшей производительности
+        grid.removeChild(tbody);
+
+
+        // Убрать TR из TBODY.
+        // Присваивание tbody.innerHTML = '' не работает в IE
+        // 
+        // на самом деле без этих строк можно обойтись! 
+        // при добавлении appendChild все узлы будут сами перемещены на правильное место!
+        while(tbody.firstChild) {
+          tbody.removeChild(tbody.firstChild);
+        }
+ 
+
+        // добавить результат в нужном порядке в TBODY
+        for(var i=0; i<rowsArray.length; i++) {
+          tbody.appendChild(rowsArray[i]);
+        }
+
+        grid.appendChild(tbody);
+
+      }
+
+      // P.S. В IE7 cells, cellIndex не работают, если элемент вне документа
+
+    </script>
+
+  </body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/source.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/source.view/index.html
new file mode 100755
index 00000000..9aaad9c9
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/source.view/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+  <meta charset="utf-8">
+  <style>
+    th {
+      cursor: pointer;
+    }
+    th:hover {
+      background: yellow;
+    }
+   </style>
+  </head>
+  <body>
+
+    <table id="grid">
+      <thead>
+      <tr>
+        <th data-type="number">Возраст</th>
+        <th data-type="string">Имя</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td>5</td>
+        <td>Вася</td>
+      </tr>
+      <tr>
+        <td>2</td>
+        <td>Петя</td>
+      </tr>
+      <tr>
+        <td>12</td>
+        <td>Женя</td>
+      </tr>
+      <tr>
+        <td>9</td>
+        <td>Маша</td>
+      </tr>
+      <tr>
+        <td>1</td>
+        <td>Илья</td>
+      </tr>
+      </tbody>
+    </table>
+
+    <script>
+      /* ваш код */
+
+    </script>
+
+  </body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/task.md b/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/task.md
new file mode 100644
index 00000000..23b0059f
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/task.md
@@ -0,0 +1,20 @@
+# Сортировка таблицы
+
+[importance 4]
+
+Сделать сортировку таблицы при клике на заголовок.
+
+Демо:
+[iframe border=1 src="solution"]
+
+Требования:
+<ul>
+<li>Использовать делегирование.</li>
+<li>Код не должен меняться при увеличении количества столбцов или строк.</li>
+</ul>
+
+[edit src="source" task/]
+
+P.S. Обратите внимание, тип столбца задан атрибутом у заголовка. Это необходимо, ведь числа сортируются иначе чем строки. Соответственно, код это может использовать.
+
+P.P.S. Вам помогут дополнительные [навигационные ссылки по таблицам](#dom-navigation-tables).
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/article.md b/2-ui/2-events-and-interfaces/5-event-delegation/article.md
new file mode 100644
index 00000000..82ce00db
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/article.md
@@ -0,0 +1,201 @@
+# Делегирование событий
+
+Всплытие событий позволяет реализовать один из самых важных приёмов разработки -- *делегирование*.
+
+Он заключается в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому -- мы ставим один обработчик на их общего предка. Из него можно получить целевой элемент `event.target`, понять на каком именно потомке произошло событие и обработать его.
+
+## Пример "Ба Гуа" 
+
+Рассмотрим пример -- <a href="http://en.wikipedia.org/wiki/Ba_gua">диаграмму "Ба Гуа"</a>. Это таблица, отражающая древнюю китайскую философию.
+
+Вот она:
+[iframe height=350 src="bagua" edit link]
+
+Её HTML (схематично):
+
+```html
+<table>
+  <tr>
+    <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+  </tr>
+  <tr>
+     <td>...<strong>Northwest</strong>...</td>
+     <td>...</td>
+     <td>...</td>
+  </tr>
+  <tr>...еще 2 строки такого же вида...</tr>
+  <tr>...еще 2 строки такого же вида...</tr>
+</table>
+```
+
+В этой таблице всего 9 ячеек, но могло быть и 99, и даже 9999, не важно.
+
+**Наша задача -- реализовать подсветку ячейки `<td>` при клике.**
+
+Вместо того, чтобы назначать обработчик для каждой ячейки, мы повесим *один обработчик* на элемент `<table>`. 
+
+Он  использует `event.target`, чтобы получить элемент, на котором произошло событие, и подсветить его.
+
+Код будет таким:
+
+```js
+var selectedTd;
+
+*!*
+table.onclick = function(event) {
+  var target = event.target; // где был клик?
+  
+  if (target.tagName != 'TD') return; // не на TD? тогда не интересует
+
+  highlight(target); // подсветить TD
+};
+*/!*
+
+function highlight(node) {
+  if (selectedTd) {
+    selectedTd.classList.remove('highlight');
+  }
+  selectedTd = node;
+  selectedTd.classList.add('highlight');
+}
+```
+
+Такой код будет работать и ему без разницы, сколько ячеек в таблице. Обработчик всё равно один. Я могу добавлять, удалять `<td>` из таблицы, менять их количество -- моя подсветка будет стабильно работать, так как обработчик стоит на `<table>`.
+
+Однако, у текущей версии кода есть недостаток.
+
+**Клик может быть не на том теге, который нас интересует, а внутри него.**
+
+В нашем случае клик может произойти на вложенном элементе, внутри `<td>`, например на `<strong>`. Такой клик будет пойман по пути наверх, но `target` у него будет не `<td>`, а `<strong>`:
+
+<img src="bagua.png">
+
+**Внутри обработчика `table.onclick` мы должны найти нужный `<td>` по `event.target`.**
+
+Для этого мы вручную, используя ссылку `parentNode`, будем идти вверх по иерархии родителей от `event.target` и выше и проверять:
+<ul>
+<li>Если нашли `<td>`, значит это то что нужно.</li>
+<li>Если дошли до элемента `table` и при этом `<td>` не найден, то наверное клик был вне `<td>`, например на элементе заголовка таблицы.</li>
+</ul>
+  
+Улучшенный обработчик `table.onclick` с циклом `while`,  который этот делает:
+
+```js
+table.onclick = function(event) {
+  var target = event.target;
+  
+  // цикл двигается вверх от target к родителям до table
+  while(target != table) { 
+    if (target.tagName == 'TD') {
+       // нашли элемент, который нас интересует!
+       highlight(target);
+       return;
+    }
+    target = target.parentNode;
+  }
+
+  // возможна ситуация, когда клик был вне <td>
+  // если цикл дошёл до table и ничего не нашёл, 
+  // то обработчик просто заканчивает работу
+}
+```
+
+[smart]
+Кстати, в проверке `while` можно бы было использовать `this` вместо `table`:
+
+```js
+while(target != this) {
+  // ...
+}
+```
+
+Это тоже будет работать, так как в обработчике `table.onclick` значением `this` является текущий элемент, то есть `table`.
+[/smart]
+
+
+## Применение делегирования: действия в разметке  
+
+Обычно делегирование -- это средство оптимизации интерфейса. Мы используем один обработчик для *схожих* действий на однотипных элементах.
+
+**Но делегирование позволяет использовать обработчик и для абсолютно разных действий.** 
+
+Например, нам нужно сделать меню с разными кнопками: "Сохранить", "Загрузить", "Поиск" и т.д. И есть объект с соответствующими методами: `save`, `load`, `search` и т.п...
+
+Первое, что может прийти в голову -- это найти каждую кнопку и назначить ей свой обработчик среди методов объекта.
+
+Но более изящно решить задачу можно путем добавления одного обработчика на всё меню, а для каждой кнопки в специальном атрибуте, который мы назовем `data-action` (можно придумать любое название, но `data-*` является валидным в HTML5), укажем, что она должна вызывать:
+
+```html
+<button *!*data-action="save"*/!*>Нажмите, чтобы Сохранить</button>
+```
+
+Обработчик считывает содержимое атрибута и выполняет метод. Взгляните на рабочий пример:
+
+```html
+<!--+ autorun height=auto -->
+<div id="menu">
+  <button data-action="save">Сохранить</button>
+  <button data-action="load">Загрузить</button>
+  <button data-action="search">Поиск</button>
+</div>
+
+<script>
+function Menu(elem) {
+  this.save = function() { alert('сохраняю'); };
+  this.load = function() { alert('загружаю'); };
+  this.search = function() { alert('ищу'); };
+
+  var self = this;
+
+  elem.onclick = function(e) {
+    var target = e.target;
+*!*
+    var action = target.getAttribute('data-action');
+    if (action) {
+      self[action]();
+    }
+*/!*
+  };
+}
+
+new Menu(menu);
+</script>
+```
+
+Обратите внимание, как используется трюк с `var self = this`, чтобы сохранить ссылку на объект `Menu`. Иначе обработчик просто бы не смог вызвать методы `Menu`, потому что *его собственный `this` ссылается на элемент*.
+
+Что в этом случае нам дает использование делегирования событий?
+[compare]
++Не нужно писать код, чтобы присвоить обработчик каждой кнопке. Меньше кода, меньше времени, потраченного на инициализацию.
++Структура HTML становится по-настоящему гибкой. Мы можем добавлять/удалять кнопки в любое время.
++Данный подход является семантичным. Мы можем использовать классы `.action-save`, `.action-load` вместо атрибута `data-action`, если захотим.
+[/compare]
+
+
+## Итого
+
+Делегирование событий -- это здорово! Пожалуй, это один из самых полезных приёмов для работы с DOM. Он отлично подходит, если есть много элементов, обработка которых очень схожа.
+
+Алгоритм:
+<ol>
+<li>Вешаем обработчик на контейнер.</li>
+<li>В обработчике: получаем `event.target`.</li>
+<li>В обработчике: если необходимо, проходим вверх цепочку `target.parentNode`, пока не найдем нужный подходящий элемент (и обработаем его), или пока не упремся в контейнер (`this`). </li>
+</ol>
+Зачем использовать:
+[compare]
++Упрощает инициализацию и экономит память: не нужно вешать много обработчиков.
++Меньше кода: при добавлении и удалении элементов не нужно ставить или снимать обработчики.
++Удобство изменений: можно массово добавлять или удалять элементы путём изменения `innerHTML`. 
+[/compare]
+
+Конечно, у делегирования событий есть свои ограничения.
+
+[compare]
+-Во-первых, событие должно всплывать, и нельзя, чтобы какой-то промежуточный обработчик вызвал `event.stopPropagation()`.
+-Во-вторых, делегирование создает дополнительную нагрузку на браузер, ведь обработчик запускается, когда событие происходит в любом месте контейнера, не обязательно на элементах, которые нам  интересны. Но обычно эта нагрузка невелика и не является проблемой.
+[/compare]
+
+
+
+
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/bagua.png b/2-ui/2-events-and-interfaces/5-event-delegation/bagua.png
new file mode 100755
index 00000000..9a256a24
Binary files /dev/null and b/2-ui/2-events-and-interfaces/5-event-delegation/bagua.png differ
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/bagua.view/bagua.css b/2-ui/2-events-and-interfaces/5-event-delegation/bagua.view/bagua.css
new file mode 100755
index 00000000..82ec4cb1
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/bagua.view/bagua.css
@@ -0,0 +1,56 @@
+#bagua-table th {
+	text-align: center;
+	font-weight: bold;	
+}
+
+#bagua-table td {
+	width: 150px;
+	white-space: nowrap;
+	text-align: center;
+	vertical-align: bottom;
+	padding-top: 5px;
+	padding-bottom: 12px;
+}
+
+#bagua-table .nw {
+	background: #999;
+}
+
+#bagua-table .n {
+	background: #03f;
+	color: #fff;
+}
+
+#bagua-table .ne {
+	background: #ff6;
+}
+
+#bagua-table .w {
+	background: #ff0;
+}
+#bagua-table .c {
+	background: #60c;
+	color: #fff;
+}
+#bagua-table .e {
+	background: #09f;
+	color: #fff;
+}
+
+#bagua-table .sw {
+	background: #963;
+	color: #fff;
+}
+
+#bagua-table .s {
+	background: #f60;
+	color: #fff;
+}
+#bagua-table .se {
+	background: #0c3;
+	color: #fff;
+}
+
+#bagua-table .highlight {
+	background: red;
+}
diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/bagua.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/bagua.view/index.html
new file mode 100755
index 00000000..ae37006e
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/5-event-delegation/bagua.view/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<link type="text/css" rel="stylesheet" href="bagua.css">
+
+
+<table id="bagua-table">
+  <tr>
+    <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+  </tr>
+  <tr>
+    <td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
+    </td>
+    <td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
+    </td>
+    <td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
+    </td>
+  </tr>
+  <tr>  
+      <td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
+    </td>
+    <td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
+    </td>
+    <td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
+    </td>
+  </tr>
+  <tr>  
+      <td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
+    </td>
+    <td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
+    </td>
+    <td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
+    </td>
+  </tr>
+  
+</table>
+
+<script>
+var table = document.getElementById('bagua-table');
+
+var selectedTd;
+
+table.onclick = function(event) {
+  var target = event.target;
+  
+  while(target != this) {
+    if (target.tagName == 'TD') {
+       highlight(target);
+       return;
+    }
+    target = target.parentNode;
+  }
+}
+
+function highlight(node) {
+  if (selectedTd) {
+    selectedTd.classList.remove('highlight');
+  }
+  selectedTd = node;
+  selectedTd.classList.add('highlight');
+}
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/6-behavior/article.md b/2-ui/2-events-and-interfaces/6-behavior/article.md
new file mode 100644
index 00000000..6af50d13
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/6-behavior/article.md
@@ -0,0 +1,76 @@
+# Приём проектирования "поведение"
+
+Шаблон проектирования "поведение" (behavior) позволяет задавать хитрые обработчики на элементе *декларативно*, установкой специальных HTML-атрибутов и классов.
+[cut]
+
+Например, хочется, чтобы при клике на один элемент показывался другой. Конечно, можно поставить обработчик в атрибуте `onclick` или даже описать его где-нибудь в JS-коде страницы.
+
+Но есть решение другое, и очень изящное.
+
+## Описание 
+
+Приём проектирования "поведение" состоит из двух частей:
+<ol>
+<li>Элементу ставится атрибут, описывающий его поведение.</li>
+<li>При помощи делегирования ставится обработчик на документ, который ловит все клики и, если элемент имеет нужный атрибут, производит нужное действие.
+</ol>
+
+## Пример
+
+Например, я хочу, чтобы при клике на один элемент скрывался/показывался другой.
+
+Конечно, можно написать соответствующий обработчик в JavaScript.
+
+А что, если подобная задача возникает часто? 
+
+Хотелось бы получить более простой способ задания такого *поведения*, например -- *декларативно*, при помощи особого атрибута.
+
+**Сделаем так, что при клике на элемент с атрибутом `data-toggle-id` будет скрываться/показываться элемент с заданным `id`.**
+
+```html
+<!--+ autorun run height=100 -->
+<button *!*data-toggle-id="subscribe-mail"*/!*>
+  Показать форму подписки
+</button>
+ 
+<form id="subscribe-mail" style="display:none">
+  Ваша почта: <input type="email">
+</form>
+
+<script>
+*!*
+  document.onclick = function(event) {
+    var target = event.target;
+
+    var id = target.getAttribute('data-toggle-id');
+    if (!id) return;
+
+    var elem = document.getElementById(id);
+
+    elem.style.display = (elem.style.display == 'none') ? "" : "none";
+  };
+*/!*
+</script>
+```
+
+**При помощи JavaScript мы добавили "поведение" -- возможность через атрибут указывать, что делает элемент.**
+
+[smart header="Не только атрибут"]
+Для своих целей мы можем использовать в HTML любые атрибуты, но стандарт рекомендует для своих целей называть атрибуты `data-*`.
+
+В обработчике `document.onclick` мы могли бы проверять не атрибут, а класс или что-то ещё.
+[/smart]
+
+Обратите внимание: обработчик поставлен на `document`, то есть клик на любом элементе страницы пройдёт через него. Теперь для того, чтобы добавить скрытие-раскрытие любому элементу -- даже не надо знать JavaScript, можно просто написать атрибут.
+
+Также для добавления обработчиков на `document` рекомендуется использовать `addEventListener`, чтобы можно было добавлять несколько различных поведений на документ.
+
+## Итого
+
+Шаблон "поведение" удобен тем, что сколь угодно сложное JavaScript-поведение можно "навесить" на элемент одним лишь атрибутом. А можно -- несколькими атрибутами на связанных элементах.
+
+Здесь мы рассмотрели базовый пример, который можно как угодно модифицировать и масштабировать. Важно не переусердствовать.
+
+**Приём разработки "поведение" рекомендуется использовать для расширения возможностей разметки, как альтернативу мини-фрагментам JavaScript.**
+
+Далее у нас ещё будут задачи, где мы реализуем этот приём разработки.
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/solution.md b/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/solution.md
new file mode 100644
index 00000000..bba60480
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/solution.md
@@ -0,0 +1,42 @@
+Дело в том, что обработчик из атрибута `onclick` делается браузером как функция с заданным телом. 
+
+То есть, он будет таким:
+
+```js
+function(event) {
+  handler()
+}
+```
+
+При этом возвращаемое `handler` значение никак не используется и не влияет на результат.
+
+Рабочий вариант:
+
+```html
+<!--+ run -->
+<script>
+  function handler() {
+    alert("...");
+    return false;
+  }
+</script>
+
+<a href="http://w3.org" onclick="*!*return handler()*/!*">w3.org</a>
+```
+
+Альтернатива -- передать и использовать объект события для вызова `event.preventDefault()` (или кросс-браузерного варианта для поддержки старых IE).
+
+```html
+<!--+ run -->
+<script>
+*!*
+  function handler(event) {
+    alert("...");
+    event.preventDefault ? event.preventDefault() : (event.returnValue=false);
+  }
+*/!*
+</script>
+
+<a href="http://w3.org" onclick="*!*handler(event)*/!*">w3.org</a>
+```
+
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/task.md b/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/task.md
new file mode 100644
index 00000000..ba5604e9
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/task.md
@@ -0,0 +1,21 @@
+# Почему не работает return false?
+
+[importance 3]
+
+Почему в этом документе `return false` не работает?
+
+```html
+<!--+ autorun run -->
+<script>
+  function handler() {
+    alert("...");
+    return false;
+  }
+</script>
+
+<a href="http://w3.org" onclick="handler()">w3.org</a>
+```
+
+По замыслу, переход на `w3.org` при клике должен отменяться. Однако, на самом деле он происходит.
+
+В чём дело и как поправить, сохранив `onclick` в HTML?
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.md b/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.md
new file mode 100644
index 00000000..81aa6a91
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.md
@@ -0,0 +1,29 @@
+Это -- классическая задача на тему делегирования.
+
+В реальной жизни, мы можем перехватить событие и создать AJAX-запрос к серверу, который сохранит информацию о том, по какой ссылке ушел посетитель.
+
+Мы перехватываем событие на `contents` и поднимаемся до `parentNode` пока не получим `A` или не упремся в контейнер.
+
+```js
+contents.onclick = function(evt) {
+  var target = evt.target;
+
+  function handleLink(href) {    
+    var isLeaving = confirm('Уйти на '+href+'?');    
+    if (!isLeaving) return false;
+  }
+    
+  while(target != this) {
+    if (target.nodeName == 'A') {
+*!*
+      return handleLink(target.getAttribute('href')); // (*)
+*/!*
+    }
+    target = target.parentNode;
+  }
+};
+```
+
+В строке `(*)` используется атрибут, а не свойство `href`, чтобы показать в `confirm` именно то, что написано в HTML-атрибуте, так как свойство может отличаться, оно обязано содержать полный валидный адрес.
+
+[edit src="solution"]Полное решение[/edit].
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.view/index.html b/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.view/index.html
new file mode 100755
index 00000000..96ee683d
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.view/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<div id="contents">
+  <p>
+  Как насчет почитать <a href="http://wikipedia.org">Википедию</a>, или посетить <a href="http://w3.org"><i>W3.org</i></a> и узнать про современные стандарты?
+  </p>
+</div>
+
+<script>
+  document.getElementById('contents').onclick = function(evt) {
+    var evt = evt || event
+    var target = evt.target || evt.srcElement
+
+    function handleLink(href) {
+      var isLeaving = confirm('Уйти на '+href+'?')
+      if (!isLeaving) return false
+    }
+
+    while(target != this) {
+      if (target.nodeName == 'A') {
+        return handleLink(target.getAttribute('href'));
+      }
+      target = target.parentNode
+    }
+  }
+</script>
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/source.view/index.html b/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/source.view/index.html
new file mode 100755
index 00000000..a70b2602
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/source.view/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<div id="contents">
+  <p>
+  Как насчет почитать <a href="http://wikipedia.org">Википедию</a>, или посетить <a href="http://w3.org"><i>W3.org</i></a> и узнать про современные стандарты?
+  </p>
+</div>
+
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/task.md b/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/task.md
new file mode 100644
index 00000000..935c9a55
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/task.md
@@ -0,0 +1,18 @@
+# Поймайте переход по ссылке
+
+[importance 5]
+
+Сделайте так, чтобы при клике на ссылки внутри <code>&lt;DIV id="contents"&gt;</code> пользователю выводился вопрос о том, действительно ли он хочет покинуть страницу и если он не хочет, то прерывать переход по ссылке.
+
+Так это должно работать:
+
+[iframe height=100 border=1 src="solution"]
+
+Детали:
+<ul>
+<li>Содержимое блока `DIV` может быть загружено динамически и присвоено при помощи  `innerHTML`. Так что найти все ссылки и поставить на них обработчики нельзя. Используйте делегирование.</li>
+<li>Содержимое может содержать вложенные теги, *в том числе внутри ссылок*, например, `<a href=".."><i>...</i></a>`.</li>
+</ul>
+
+[edit src="source" task/]
+
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.md b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.md
new file mode 100644
index 00000000..856b4204
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.md
@@ -0,0 +1,57 @@
+Решение состоит в том, чтобы добавить обработчик на контейнер `#thumbs` и отслеживать клики на ссылках. 
+
+Когда происходит событие, обработчик должен изменять `src` `#largeImg` на `href` ссылки и заменять `alt` на ее `title`.
+
+Код решения:
+
+```js
+var largeImg = document.getElementById('largeImg');
+
+document.getElementById('thumbs').onclick = function(e) {
+  e = e || window.event;
+  var target = e.target || e.srcElement;
+
+  while(target != this) {
+
+    if (target.nodeName == 'A') {
+      showThumbnail(target.href, target.title);
+      return false;
+    }
+
+    target = target.parentNode;
+  }
+
+}
+
+function showThumbnail(href, title) {
+  largeImg.src = href;
+  largeImg.alt = title;
+}
+```
+
+**Предзагрузка картинок**
+
+Для того, чтобы картинка загрузилась, достаточно создать новый элемент `IMG` и указать ему `src`, вот так:
+
+```js
+var imgs = thumbs.getElementsByTagName('img');
+for(var i=0; i<imgs.length; i++) {
+  var url = imgs[i].parentNode.href;
+
+*!*
+  var img = document.createElement('img');  
+  img.src = url;
+*/!*
+}
+```
+
+Как только элемент создан и ему назначен `src`, браузер сам начинает скачивать файл картинки.  
+
+При правильных настройках сервера как-то использовать этот элемент не обязательно -- картинка уже закеширована. 
+
+
+**Семантичная верстка**
+
+Для списка картинок используется `DIV`. С точки зрения семантики более верный вариант -- список `UL/LI`.
+
+[edit src="solution"]Полное решение[/edit]
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.view/gallery.css b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.view/gallery.css
new file mode 100755
index 00000000..5bfee393
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.view/gallery.css
@@ -0,0 +1,44 @@
+
+body {
+	margin: 0;
+	padding: 0;
+	font: 75%/120% Arial, Helvetica, sans-serif;
+}
+
+h2 {
+	font: bold 190%/100% Arial, Helvetica, sans-serif;
+	margin: 0 0 .2em;
+}
+h2 em {
+	font: normal 80%/100% Arial, Helvetica, sans-serif;
+	color: #999999;
+}
+
+#largeImg {
+	border: solid 1px #ccc;
+	width: 550px;
+	height: 400px;
+	padding: 5px;
+}
+
+#thumbs a {
+	border: solid 1px #ccc;
+	width: 100px;
+	height: 100px;
+	padding: 3px;
+	margin: 2px;
+	float: left;
+}
+
+#thumbs a:hover {
+	border-color: #FF9900;
+}
+
+#thumbs li {
+	list-style: none;
+}
+
+#thumbs {
+	margin: 0;
+	padding: 0;
+}
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.view/index.html b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.view/index.html
new file mode 100755
index 00000000..084ea6ba
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.view/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Галерея</title>
+  <link rel="stylesheet" type="text/css" href="gallery.css">
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+<p><img id="largeImg" src="http://js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
+
+<ul id="thumbs">
+  <!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
+  <li><a href="http://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="http://js.cx/gallery/img2-thumb.jpg"></a></li>
+  <li><a href="http://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="http://js.cx/gallery/img3-thumb.jpg"></a></li>
+  <li><a href="http://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="http://js.cx/gallery/img4-thumb.jpg"></a></li>
+  <li><a href="http://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="http://js.cx/gallery/img5-thumb.jpg"></a></li>
+  <li><a href="http://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="http://js.cx/gallery/img6-thumb.jpg"></a></li>
+</ul>
+
+<script>
+var largeImg = document.getElementById('largeImg');
+
+var thumbs = document.getElementById('thumbs');
+
+thumbs.onclick = function(e) {
+  e = e || window.event;
+  var target = e.target || e.srcElement;
+
+  while(target != this) {
+
+    if (target.nodeName == 'A') {
+      showThumbnail(target.href, target.title);
+      return false;
+    }
+
+    target = target.parentNode;
+  }
+
+}
+
+function showThumbnail(href, title) {
+  largeImg.src = href;
+  largeImg.alt = title;
+}
+
+
+/* предзагрузка */
+var imgs = thumbs.getElementsByTagName('img');
+for(var i=0; i<imgs.length; i++) {
+  var url = imgs[i].parentNode.href;
+  var img = document.createElement('img');
+  img.src = url;
+}
+</script>
+
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/source.view/gallery.css b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/source.view/gallery.css
new file mode 100755
index 00000000..230421b7
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/source.view/gallery.css
@@ -0,0 +1,35 @@
+
+body {
+	margin: 0;
+	padding: 0;
+	font: 75%/120% Arial, Helvetica, sans-serif;
+}
+
+h2 {
+	font: bold 190%/100% Arial, Helvetica, sans-serif;
+	margin: 0 0 .2em;
+}
+h2 em {
+	font: normal 80%/100% Arial, Helvetica, sans-serif;
+	color: #999999;
+}
+
+#largeImg {
+	border: solid 1px #ccc;
+	width: 550px;
+	height: 400px;
+	padding: 5px;
+}
+
+#thumbs a {
+	border: solid 1px #ccc;
+	width: 100px;
+	height: 100px;
+	padding: 3px;
+	margin: 2px;
+	float: left;
+}
+
+#thumbs a:hover {
+	border-color: #FF9900;
+}
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/source.view/index.html b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/source.view/index.html
new file mode 100755
index 00000000..a6fb7d22
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/source.view/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Галерея</title>
+  <link rel="stylesheet" type="text/css" href="gallery.css">
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+<p><img id="largeImg" src="http://js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
+
+<div id="thumbs">
+  <!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
+  <a href="http://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="http://js.cx/gallery/img2-thumb.jpg"></a>
+  <a href="http://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="http://js.cx/gallery/img3-thumb.jpg"></a>
+  <a href="http://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="http://js.cx/gallery/img4-thumb.jpg"></a>
+  <a href="http://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="http://js.cx/gallery/img5-thumb.jpg"></a>
+  <a href="http://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="http://js.cx/gallery/img6-thumb.jpg"></a>
+</div>
+
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/task.md b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/task.md
new file mode 100644
index 00000000..0d404c27
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/task.md
@@ -0,0 +1,22 @@
+# Галерея изображений
+
+[importance 5]
+
+Создайте галерею изображений, в которой основное изображение изменяется при клике на уменьшенный вариант.
+
+Результат должен выглядеть так:
+
+[iframe src="solution" height=600]
+
+Для обработки событий используйте делегирование, т.е. не более одного обработчика.
+
+[edit src="source" task/]
+
+P.S. Обратите внимание -- клик может быть как на маленьком изображении `IMG`, так и на `A` вне него. При этом `event.target` будет, соответственно, либо `IMG`, либо `A`.
+
+Дополнительно:
+
+<ul>
+<li>Если получится -- сделайте предзагрузку больших изображений, чтобы при клике они появлялись сразу.</li>
+<li>Всё ли в порядке с семантической вёрсткой в HTML исходного документа? Если нет -- поправьте, чтобы было, как нужно.</li>
+</ul>
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/article.md b/2-ui/2-events-and-interfaces/7-default-browser-action/article.md
new file mode 100644
index 00000000..7382d601
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/7-default-browser-action/article.md
@@ -0,0 +1,152 @@
+# Действия браузера по умолчанию
+
+Многие события влекут за собой действие браузера.
+
+Например:
+<ul>
+<li>Клик по ссылке инициирует переход на новый URL</li>
+<li>Нажатие на кнопку "отправить" в форме -- посылку ее на сервер</li>
+<li>Двойной клик на тексте -- инициирует его выделение.</li>
+</ul>
+
+**Зачастую, мы полностью обрабатываем событие в JavaScript, и такое действие браузера нам не нужно.**
+
+К счастью, его можно отменить.
+
+[cut]
+## Отмена действия браузера
+
+Есть два способа отменить действие браузера:
+<ul>
+<li>**Основной способ -- это воспользоваться объектом события. Для отмены действия браузера существует стандартный метод `event.preventDefault()`.**</li>
+<li>Если же обработчик назначен через `on...` (не через `addEventListener/attachEvent`), то можно просто вернуть `false` из обработчика.</li>
+</ul>
+
+В следующем примере при клике по ссылке переход не произойдет:
+
+```html
+<!--+ autorun -->
+<a href="/" onclick="return false">Нажми здесь</a>
+или
+<a href="/" onclick="event.preventDefault()">здесь</a>
+```
+
+[warn header="Возвращать `true` не нужно"]
+Вообще говоря, значение, которое возвращает обработчик, игнорируется.
+
+Единственное исключение -- это `return false` из обработчика, назначенного через `onсобытие`. 
+
+Иногда в коде начинающих разработчиков можно увидеть `return` других значений. Но они не нужны и никак не обрабатываются. 
+[/warn]
+
+### Пример: меню
+
+Рассмотрим задачу, когда нужно создать меню для сайта, например такое:
+
+```html
+<ul id="menu" class="menu">
+  <li><a href="/php">PHP</a></li>
+  <li><a href="/html">HTML</a></li>
+  <li><a href="/javascript">JavaScript</a></li>
+  <li><a href="/flash">Flash</a></li>
+</ul>
+```
+
+Данный пример при помощи CSS может выводиться так:
+
+[iframe height=70 src="menu" link edit]
+
+**Все элементы меню являются ссылками, то есть тегами `<a>`.**
+
+Это потому, что некоторые посетители очень любят сочетание "правый клик - открыть в новом окне".  Да, мы можем использовать и `<button>` и `<span>`, но если правый клик не работает -- это их огорчает. Кроме того, если на сайт зайдёт поисковик, то по ссылке из `<a href="...">` он перейдёт, а выполнить сложный JavaScript и получить результат -- вряд ли захочет.
+
+**Значение `<a href="...">` -- это "запасной вариант", для правого клика и для поисковиков, а обычно клик будет обрабатываться JavaScript.**
+
+Например, вот так:
+
+```js
+menu.onclick = function(event) {
+  if (event.target.nodeName != 'A') return;
+
+  var href = event.target.getAttribute('href');
+  alert(href); // может быть подгрузка с сервера, генерация интерфейса и т.п.
+
+*!*
+  return false; // отменить переход по url
+*/!*
+};
+```
+
+В конце `return false`, иначе браузер перейдёт по адресу из `href`.
+
+Так как мы применили делегирование, то меню может увеличиваться, можно добавить вложенные списки `ul/li`, стилизовать их при помощи CSS -- меню продолжит работать.
+
+## Другие действия браузера
+
+Действий браузера по умолчанию достаточно много. 
+
+Вот некоторые примеры событий, которые вызывают действие браузера:
+<ul>
+<li>`mousedown` -- нажатие кнопкой мыши в то время как курсор находится на тексте начинает его выделение.</li>
+<li>`click` на `<input type="checkbox">` -- ставит или убирает галочку.</li>
+<li>`submit` -- при нажатии на `<input type="submit">`  в форме данные отправляются на сервер.</li>
+<li>`wheel` -- движение колёсика мыши инициирует прокрутку.</li>
+<li>`keydown` -- при нажатии клавиши в поле ввода появляется символ.</li>
+<li>`contextmenu` -- при правом клике показывается контекстное меню браузера.</li>
+<li>...</li>
+</ul>
+
+Все эти действия можно отменить, если мы хотим обработать событие исключительно при помощи JavaScript.
+
+[warn header="События могут быть связаны между собой"]
+Некоторые события естественным образом вытекают друг из друга.
+
+Например, нажатие мышкой `mousedown` на поле ввода `<input>` приводит к фокусировке внутрь него. Если отменить действие `mousedown`, то и фокуса не будет.
+
+Попробуйте нажать мышкой на первый `<input>` -- произойдёт событие `onfocus`. Это обычная ситуация.
+
+Но если нажать на второй, то фокусировки не произойдёт.
+
+```html
+<!--+ run autorun -->
+<input value="Фокус работает" onfocus="this.value=''">
+<input *!*onmousedown="return false"*/!* onfocus="this.value=''" value="Кликни меня">
+```
+
+...С другой стороны, во второй `<input>` можно перейти с первого нажатием клавиши [key Tab], и тогда фокусировка сработает. То есть, дело здесь именно в `onmousedown="return false"`.
+[/warn]
+
+## Особенности IE8-
+
+В IE8- для отмены действия по умолчанию нужно назначить свойство `event.returnValue = false`.
+
+Кроссбраузерный код для отмены действия по умолчанию:
+
+```js
+element.onclick = function(event) {
+  event = event || window.event;
+
+  if (event.preventDefault) {  // если метод существует
+    event.preventDefault(); // то вызвать его
+  } else { // иначе вариант IE<9:
+    event.returnValue = false;
+  }
+}
+```
+
+Можно записать в одну строку:
+
+```js
+...
+event.preventDefault ? event.preventDefault() : (event.returnValue=false);
+...
+```
+
+## Итого
+
+<ul>
+<li>Браузер имеет встроенные действия при ряде событий -- переход по ссылке, отправка формы и т.п. Как правило, их можно отменить.</li>
+<li>Есть два способа отменить действие по умолчанию: первый -- использовать `event.preventDefault()` (IE<9: `event.returnValue=false`), второй -- `return false` из обработчика. Второй способ работает только если обработчик назначен через `onсобытие`.</li>
+</ul>
+
+
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/index.html b/2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/index.html
new file mode 100755
index 00000000..987c71e5
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="menu.css"/>
+</head>
+<body>
+
+<ul id="menu" class="menu">
+  <li><a href="/php">PHP</a></li>
+  <li><a href="/html">HTML</a></li>
+  <li><a href="/javascript">JavaScript</a></li>
+  <li><a href="/flash">Flash</a></li>
+</ul>
+
+<script src="menu.js"></script>
+
+</body>
+</html>
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/menu.css b/2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/menu.css
new file mode 100755
index 00000000..d518d6d2
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/menu.css
@@ -0,0 +1,25 @@
+.menu li {
+  display: inline-block;
+  margin: 0;
+}
+
+.menu > li a {
+  display: inline-block;
+  margin: 0 2px;
+  outline: none;
+  text-align: center;
+  text-decoration: none;
+  font: 14px/100% Arial, Helvetica, sans-serif;
+  padding: .5em 2em .55em;
+  text-shadow: 0 1px 1px rgba(0,0,0,.3);
+  border-radius: .5em;
+  box-shadow: 0 1px 2px rgba(0,0,0,.2);
+  color: #d9eef7;
+  border: solid 1px #0076a3;
+  background: #0095cd;
+}
+
+.menu > li:hover a {
+  text-decoration: none;
+  background: #007ead;
+}
\ No newline at end of file
diff --git a/2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/menu.js b/2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/menu.js
new file mode 100755
index 00000000..35a5957e
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/menu.js
@@ -0,0 +1,8 @@
+menu.onclick = function(event) {
+  if (event.target.nodeName != 'A') return;
+
+  var href = event.target.getAttribute('href');
+  alert(href);
+
+  return false; // prevent url change
+};
diff --git a/2-ui/2-events-and-interfaces/8-dispatch-events/article.md b/2-ui/2-events-and-interfaces/8-dispatch-events/article.md
new file mode 100644
index 00000000..6e9a0be9
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/8-dispatch-events/article.md
@@ -0,0 +1,384 @@
+# Генерация событий на элементах
+
+Можно не только слушать браузерные события, но и генерировать их самому.
+
+Это нужно довольно редко, преимущественно -- для целей автоматического тестирования.
+
+[cut]
+
+## Конструктор Event
+
+Вначале рассмотрим современный способ генерации событий, по стандарту [DOM 4](http://www.w3.org/TR/dom/#introduction-to-dom-events). Он поддерживается всеми браузерами, кроме IE11-. А далее рассмотрим устаревшие варианты, поддерживаемые IE.
+
+**Объект события создаётся при помощи конструктора [Event](http://www.w3.org/TR/dom/#event).**
+
+Синтаксис:
+
+```js
+var event = new Event(тип события[, флаги]);
+```
+
+Где:
+<ul>
+<li>*Тип события* -- может быть как своим, так и встроенным, к примеру `"click"`.</li>
+<li>*Флаги* -- объект вида `{ bubbles: true/false, cancelable: true/false }`, где свойство `bubbles` указывает, всплывает ли событие, а `cancelable` -- можно ли отменить действие по умолчанию. 
+
+Не обязателен, по умолчанию `{bubbles: false, cancelable: false}`.</li>
+</ul>
+
+### Метод dispatchEvent
+
+Затем, чтобы инициировать событие, запускается `elem.dispatchEvent(event)`. 
+
+Событие обрабатывается "как обычно", передаётся обработчикам, всплывает... Этот метод возвращает `false`, если событие было отменено при помощи `preventDefault()`. Конечно, отмена возможна лишь если событие изначально было создано с флагом `cancelable`.
+
+При просмотре примера ниже кнопка будет нажата скриптом:
+
+```html
+<!--+ run -->
+<button id="elem" onclick="alert('Клик');">Автоклик</button>
+
+<script>
+  var event = new Event("click");
+  elem.dispatchEvent(event);
+</script>
+```
+
+[smart header="Как отличить реальное нажатие от скриптового?"]
+В целях безопасности иногда хорошо бы знать -- инициировано ли действие посетителем или это кликнул скрипт. 
+
+Единственный способ, которым код может отличить реальное нажатие от программного, является проверка свойства `event.isTrusted`. 
+
+Оно на момент написания статьи поддерживается IE и Firefox и равно `true`, если посетитель кликнул сам, и всегда `false` -- если событие инициировал скрипт.
+[/smart]
+
+Браузер автоматически ставит следующие свойства объекта `event`:
+
+<ul>
+<li>`isTrusted: false` -- означает, что событие сгенерировано скриптом,  это свойство изменить невозможно.</li>
+<li>`target: null` --  это свойство ставится автоматически позже при `dispatchEvent`.</li>
+<li>`type: тип события` -- первый аргумент `new Event`.</li>
+<li>`bubbles`, `cancelable` -- по второму аргументу `new Event`.</li>
+</ul>
+
+Другие свойства события, если они нужны, например координаты для события мыши -- можно присвоить в объект события позже, например:
+
+```js
+var event = new Event("click");
+event.clientX = 100;
+event.clientY = 100;
+```
+
+### Пример с hello
+
+Можно генерировать события с любыми названиями.
+
+Для примера сгенерируем совершенно новое событие `"hello"`:
+
+```html
+<!--+ run -->
+<h1 id="elem">Привет от скрипта!</h1>
+
+<script>
+  document.addEventListener("hello", function(event) { // (1)
+    alert("Привет");
+    event.preventDefault();  // (2)
+  }, false);
+
+  var event = new Event("hello", {bubbles: true, cancelable: true}); // (3)
+  if (elem.dispatchEvent(event) === false) {
+    alert('Событие было отменено preventDefault');
+  }
+</script>
+```
+
+Обратите внимание:
+<ol>
+<li>Обработчик события `hello` стоит на `document`. Мы его поймаем на всплытии.</li>
+<li>Вызов `event.preventDefault()` приведёт к тому, что `dispatchEvent` вернёт `false`.</li>
+<li>Чтобы событие всплывало и его можно было отменить, указан второй аргумент `new Event`.</li>
+</ol>
+
+Никакой разницы между встроенными событиями (`click`) и своими (`hello`) здесь нет, они создаются и работают совершенно одинаково.
+
+## Конструкторы MouseEvent, KeyboardEvent и другие
+
+Для конкретных типов событий есть свои конструкторы.
+
+Вот список конструкторов для различных событий интерфейса которые можно найти в спецификации [UI Event](http://www.w3.org/TR/uievents/):
+<ul>
+<li>`UIEvent`</li>
+<li>`FocusEvent`</li>
+<li>`MouseEvent`</li>
+<li>`WheelEvent`</li>
+<li>`KeyboardEvent`</li>
+<li>`CompositionEvent`</li>
+</ul>
+
+Вместо `new Event("click")` можно вызвать `new MouseEvent("click")`.
+
+**Конкретный конструктор позволяет указать стандартные свойства для данного типа события.**
+
+Например:
+
+```js
+//+ run
+var e = new MouseEvent("click", {
+  bubbles: true,
+  cancelable: true,
+  clientX: 100,
+  clientY: 100
+});
+
+*!*
+alert(e.clientX); // 100
+*/!*
+```
+
+Сравните это с обычным `Event`:
+
+```js
+//+ run
+var e = new Event("click", {
+  bubbles: true,
+  cancelable: true,
+  clientX: 100,
+  clientY: 100
+});
+
+*!*
+alert(e.clientX); // undefined
+*/!*
+```
+
+...То есть, "мышиные" свойства можно сразу же в конструкторе указать только если это `MouseEvent`, а `Event` их игнорирует. 
+
+**Использование конкретного конструктора не является обязательным, можно обойтись `Event`.**
+
+Свойства можно присвоить и явно, после конструктора. Здесь это скорее вопрос удобства и желания следовать правилам. События, которые генерирует браузер, всегда имеют правильный тип.
+
+Полный список свойств по типам событий вы найдёте в спецификации, например для `MouseEvent`: [MouseEvent Constructor](http://www.w3.org/TR/uievents/#constructor-mouseevent).
+
+## Свои события
+
+Для генерации встроенных событий существуют описанные выше конструкторы, а для генерации своих, нестандартных, событий существует конструктор [CustomEvent](http://www.w3.org/TR/dom/#customevent). 
+
+Технически, он абсолютно идентичен `Event`, кроме небольшой детали: у второго аргумента-объекта есть дополнительное свойство `detail`, в котором можно указывать информацию для передачи в событие.
+
+Например:
+
+```html
+<!--+ run -->
+<h1 id="elem">Привет для Васи!</h1>
+
+<script>
+  elem.addEventListener("hello", function(event) { 
+    alert( *!*event.detail.name*/!* );
+  }, false);
+
+  var event = new CustomEvent("hello", { 
+*!*
+    detail: { name: "Вася" }
+*/!*
+  }); 
+
+  elem.dispatchEvent(event);
+</script>
+```
+
+Надо сказать, что никто не мешает и в обычное `Event` записать любые свойства. Но `CustomEvent` более явно говорит, что событие не встроенное, а своё, и выделяет отдельно "информационное" поле `detail`, в которое можно записать что угодно без конфликта со стандартными свойствами объекта.
+
+## Старое API для IE9+
+
+В предыдущем стандарте [DOM 3 Events](http://www.w3.org/TR/DOM-Level-3-Events) была предусмотрена [иерархия событий](http://www.w3.org/TR/DOM-Level-3-Events/#event-interfaces), с различными методами инициализации.
+
+Она поддерживается как современными браузерами, так и IE9+. Для генерации событий используется немного другой синтаксис, но по возможностям -- всё то же самое, что и в современном стандарте.
+
+Объект события создаётся вызовом `document.createEvent`:
+
+```js
+var event = document.createEvent(eventInterface);
+```
+
+Аргументы:
+<ul>
+<li>`eventInterface` -- это тип события, например `MouseEvent`, `FocusEvent`, `KeyboardEvent`. В [секции 5 DOM 3 Events](http://www.w3.org/TR/DOM-Level-3-Events/#events-module) есть подробный список, какое событие к какому интерфейсу относится.
+</li>
+</ul>
+
+**На практике можно всегда использовать самый общий интерфейс: `document.createEvent("Event")`.**
+
+Далее событие нужно инициализовать:
+
+```js
+event.initEvent(type, boolean bubbles, boolean cancelable);
+```
+
+Аргументы:
+<ul>
+<li>`type` -- тип события, например `"click"`.</li>
+<li>`bubbles` -- всплывает ли событие.</li>
+<li>`cancelable` -- можно ли отменить событие`.</li>
+</ul>
+
+Эти два кода аналогичны:
+
+```js
+// современный стандарт
+var event = new Event("click", { bubbles: true, cancelable: true });
+
+// старый стандарт
+var event = document.createEvent("Event");
+event.initEvent("click", true, true);
+```
+
+Единственная разница -- старый стандарт поддерживается IE9+.
+
+Этот пример с событием `hello` будет работать во всех браузерах, кроме IE8-:
+
+```html
+<!--+ run -->
+<h1 id="elem">Привет от скрипта!</h1>
+
+<script>
+  document.addEventListener("hello", function(event) { 
+    alert("Привет");
+    event.preventDefault();  
+  }, false);
+
+*!*
+  var event = document.createEvent("Event");
+  event.initEvent("hello", true, true);
+*/!*
+
+  if (elem.dispatchEvent(event) === false) {
+    alert('Событие было отменено preventDefault');
+  }
+
+</script>
+```
+
+[smart header="`initMouseEvent`, `initKeyboardEvent` и другие..."]
+У конкретных типов событий, например `MouseEvent`, `KeyboardEvent`, есть методы, которые позволяют указать стандартные свойства.
+
+Они называются по аналогии: `initMouseEvent`, `initKeyboardEvent`. 
+
+Их можно использовать вместо базового `initEvent`, если хочется, чтобы свойства событий соответствовали встроенным браузерным.
+
+Выглядят они немного страшновато, например (взято из [спецификации](http://www.w3.org/TR/DOM-Level-3-Events/#idl-interface-MouseEvent-initializers)):
+
+```js
+void initMouseEvent ( 
+  DOMString typeArg,  // тип
+  boolean bubblesArg,  // всплывает?
+  boolean cancelableArg,  // можно отменить?
+  AbstractView? viewArg, // объект window, null означает текущее окно
+  long detailArg,   // свойство detail и другие...
+  long screenXArg,   
+  long screenYArg,  
+  long clientXArg,  
+  long clientYArg, 
+  boolean ctrlKeyArg, 
+  boolean altKeyArg, 
+  boolean shiftKeyArg, 
+  boolean metaKeyArg, 
+  unsigned short buttonArg, 
+  EventTarget? relatedTargetArg);
+};
+```
+
+Для инициализации мышиного события нужно обязательно указать *все* аргументы, например:
+
+```html
+<!--+ run -->
+<button id="elem">Автоклик</button>
+
+<script>
+  elem.onclick = function(e) {
+    alert('Клик на координатах ' + e.clientX + ':' + e.clientY);
+  };
+
+  var event = document.createEvent("MouseEvent");
+*!*
+  event.initMouseEvent("click", true, true, null, 0, 0, 0, 100, 100, true, true, true, null, 1, null);
+*/!*
+  elem.dispatchEvent(event);
+</script>
+```
+
+Браузер, по стандарту, может сгенерировать отсутствующие свойства самостоятельно, например `pageX`, но это нужно проверять в конкретных случаях, обычно это не работает или работает некорректно.
+[/smart]
+
+## Антистандарт: IE8-
+
+В совсем старом IE были "свои" методы `document.createEventObject()` и `elem.fireEvent()`.
+
+Пример с ними для IE8:
+
+```html
+<!--+ run -->
+<button id="elem">Автоклик</button>
+
+<script>
+  document.body.onclick = function() {
+    alert("Клик, event.type=" + event.type);
+    return false;
+  };
+
+*!*
+  var event = document.createEventObject();
+  if( !elem.fireEvent("onclick", event) ) {
+    alert('Событие было отменено');
+  } 
+*/!*
+</script>
+```
+
+**При помощи `fireEvent` можно сгенерировать только встроенные события.**
+
+Если указать `"hello"` вместо `"onclick"` в примере выше -- будет ошибка.
+
+Параметры `bubbles` и `cancelable` настраивать нельзя, браузер использует стандартные для данного типа событий.
+
+## Кросс-браузерный пример
+
+Для поддержки IE9+ достаточно использовать методы `document.createEvent` и `event.initEvent`, как показано выше, и всё будет хорошо.
+
+Если же нужен IE8, то подойдёт такой код:
+
+```js
+function trigger(elem, type){
+  if (document.createEvent) {
+    var event = document.createEvent('Event') : 
+    event.initEvent(type);
+    return elem.dispatchEvent(event);
+  } 
+
+  var event = document.createEventObject();
+  return elem.fireEvent("on"+type, event);
+}
+
+// использование:
+trigger(elem, "click");
+```
+
+Конечно, надо иметь в виду, что в IE8 события можно использовать только встроенные, а `bubbles` и `cancelable` поставить нельзя.
+
+## Итого
+
+<ul>
+<li>Все браузеры, кроме IE, позволяют генерировать любые события, следуя стандарту DOM4.</li>
+<li>IE9+ тоже справляется, если использовать вызовы более старого стандарта, и имеет в итоге тот же функционал.</li>
+<li>IE8- может генерировать только встроенные события.</li>
+</ul>
+
+**Несмотря на техническую возможность генерировать браузерные события -- пользоваться ей стоит с большой осторожностью.**
+
+В 98% случаев, когда разработчик начинающего или среднего уровня хочет сгенерировать *встроенное* событие -- это вызвано "кривой" архитектурой кода, и взаимодействие нужно на уровне выше. 
+
+Как правило события имеет смысл генерировать:
+<ul>
+<li>Либо как явный и грубый хак, чтобы заставить работать сторонние библиотеки, в которых не предусмотрены другие средства взаимодействия.</li>
+<li>Либо для автоматического тестирования, чтобы скриптом "нажать на кнопку" и посмотреть, произошло ли нужное действие.</li>
+<li>Либо при создании своих "элементов интерфейса". Например, никто не мешает при помощи JavaScript создать из `<div class="calendar">` красивый календарь и генерировать на нём событие `change` при выборе даты. Эту тему мы разовьём позже.</li>
+</ul>
diff --git a/2-ui/2-events-and-interfaces/index.md b/2-ui/2-events-and-interfaces/index.md
new file mode 100644
index 00000000..a4fa3992
--- /dev/null
+++ b/2-ui/2-events-and-interfaces/index.md
@@ -0,0 +1,3 @@
+# Основы работы с событиями
+
+Введение в браузерные события, общие свойства всех событий и приёмы работы с ними.
\ No newline at end of file
diff --git a/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/solution.md b/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/solution.md
new file mode 100644
index 00000000..9421aca8
--- /dev/null
+++ b/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Решение со всеми видами выделения[/edit]
\ No newline at end of file
diff --git a/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/solution.view/index.html b/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/solution.view/index.html
new file mode 100755
index 00000000..530a64aa
--- /dev/null
+++ b/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/solution.view/index.html
@@ -0,0 +1,108 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .selected {
+      background: #0f0;
+    }
+    li {
+      cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+
+Клик на элементе выделяет только его.<br>
+Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.<br>
+Shift+Клик добавляет промежуток от последнего кликнутого к выделению.<br>
+
+<ul>
+<li>Кристофер Робин</li>
+<li>Винни-Пух</li>
+<li>Ослик Иа</li>
+<li>Мудрая Сова</li>
+<li>Кролик. Просто кролик.</li>
+</ul>
+
+<script>
+
+var ul = document.getElementsByTagName('ul')[0];
+
+var lastClickedLi = null;
+
+// --- обработчики ---
+
+ul.onclick = function(event) {
+  var target = event.target;
+
+  // возможно, клик был внутри списка UL, но вне элементов LI
+  if (target.tagName != "LI") return;
+
+  // для Mac проверяем Cmd, т.к. Ctrl + click там контекстное меню
+  if(event.metaKey || event.ctrlKey) { 
+    toggleSelect(target);
+  } else if (event.shiftKey) {
+    selectFromLast(target);
+  } else {
+    selectSingle(target);
+  }
+
+  lastClickedLi = target;
+}
+
+// --- функции для выделения ---
+
+function toggleSelect(li) {
+  li.classList.toggle('selected');
+}
+
+function selectFromLast(target) {
+  var startElem = lastClickedLi || ul.children[0];
+
+  var isLastClickedBefore = compareDocumentPosition(startElem, target) & 4;
+
+  if (isLastClickedBefore) {
+    for(var elem = startElem; elem != target; elem = elem.nextElementSibling) {
+      elem.classList.add('selected');
+    }
+  } else {
+    for(var elem = startElem; elem != target; elem = elem.previousElementSibling) {
+      elem.classList.add('selected');
+    }
+  }
+  elem.classList.add('selected');
+}
+
+
+
+
+function deselectAll() {
+  for(var i=0; i<ul.children.length; i++) {
+    ul.children[i].classList.remove('selected');
+  }
+}
+
+function selectSingle(li) {
+  deselectAll();
+  li.classList.add('selected');
+}
+
+
+// --- вспомогательная функция ---
+// http://learn.javascript.ru/compare-document-position
+function compareDocumentPosition(a, b) {
+  return a.compareDocumentPosition ?
+    a.compareDocumentPosition(b) :
+      (a != b && a.contains(b) && 16) +
+        (a != b && b.contains(a) && 8) +
+        (a.sourceIndex >= 0 && b.sourceIndex >= 0 ?
+          (a.sourceIndex < b.sourceIndex && 4) +
+            (a.sourceIndex > b.sourceIndex && 2) :
+          1);
+}
+
+
+</script>
+</body>
+</html>
diff --git a/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/source.view/index.html b/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/source.view/index.html
new file mode 100755
index 00000000..b9607c6a
--- /dev/null
+++ b/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/source.view/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .selected {
+      background: #0f0;
+    }
+    li {
+      cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+
+Клик на элементе выделяет только его.<br>
+Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.<br>
+Shift+Клик добавляет промежуток от последнего кликнутого к выделению.<br>
+
+<ul>
+<li>Кристофер Робин</li>
+<li>Винни-Пух</li>
+<li>Ослик Иа</li>
+<li>Мудрая Сова</li>
+<li>Кролик. Просто кролик.</li>
+</ul>
+
+<script>
+
+// ... ваш код 
+
+
+// --- вспомогательная функция, может понадобиться для части 3 ---
+// http://learn.javascript.ru/compare-document-position
+function compareDocumentPosition(a, b) {
+  return a.compareDocumentPosition ?
+    a.compareDocumentPosition(b) :
+      (a != b && a.contains(b) && 16) +
+        (a != b && b.contains(a) && 8) +
+        (a.sourceIndex >= 0 && b.sourceIndex >= 0 ?
+          (a.sourceIndex < b.sourceIndex && 4) +
+            (a.sourceIndex > b.sourceIndex && 2) :
+          1);
+}
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/task.md b/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/task.md
new file mode 100644
index 00000000..ff13535f
--- /dev/null
+++ b/2-ui/3-event-details/1-mouse-clicks/1-selectable-list/task.md
@@ -0,0 +1,20 @@
+# Список с выделением
+
+[importance 5]
+
+Эта задача состоит из трёх частей.
+
+<ol>
+<li>Сделайте список, элементы которого можно выделять кликом.</li>
+<li>Добавьте мульти-выделение. Если клик с нажатым <code class="key">Ctrl</code> (<code class="key">Cmd</code> под Mac), то элемент добавляется-удаляется из выделенных.</li>
+<li>Добавьте выделение промежутков. Если происходит клик с нажатым <code class="key">Shift</code>, то к выделению добавляется промежуток элементов от предыдущего кликнутого до этого. При этом не важно, какое именно действие делал предыдущий клик.
+Это похоже на то, как работает файловый менеджер в ряде ОС, но чуть проще, так как конкретная реализация выделений различается у разных ОС, и её точное воспроизведение не входит в эту задачу.</li>
+</ol>
+
+Демо:
+[iframe border="1" src="solution"]
+
+[edit src="source" task/]
+
+P.S. В этой задаче можно считать, что в элементах списка может быть только текст, без вложенных тегов. 
+P.P.S. Обработка одновременного нажатия <code class="key">Ctrl</code>(<code class="key">Cmd</code>) и <code class="key">Shift</code> может быть любой.
\ No newline at end of file
diff --git a/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/solution.md b/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/solution.md
new file mode 100644
index 00000000..abb84c19
--- /dev/null
+++ b/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/solution.md
@@ -0,0 +1,29 @@
+# Подсказка
+
+У события клика есть координаты. Проверьте по ним, попал ли клик на заголовок.
+
+Самый глубокий узел на координатах можно получить вызовом [document.elementFromPoint(clientX, clientY)](https://developer.mozilla.org/en/DOM/document.elementFromPoint).
+
+...Но заголовок является текстовым узлом, поэтому эта функция для него работать не будет. Однако это, всё же, можно обойти. Как?
+
+# Подсказка 2
+
+Можно при клике на `LI` сделать временный `SPAN` и переместить в него текстовый узел-заголовок.
+
+После этого проверить, попал ли клик в него и вернуть всё как было.
+
+```js
+// 1) заворачиваем текстовый узел в SPAN
+
+// 2) проверяем
+var elem = document.elementFromPoint(e.clientX, e.clientY);
+var isClickOnTitle = (elem == span);
+
+// 3) возвращаем текстовый узел обратно из SPAN
+```
+
+На шаге 3 текстовый узел вынимается обратно из `SPAN`, всё возвращается в исходное состояние.
+
+# Решение
+
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/solution.view/index.html b/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/solution.view/index.html
new file mode 100755
index 00000000..f96de868
--- /dev/null
+++ b/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/solution.view/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+.tree li {
+    cursor: pointer;
+}
+</style>
+</head>
+<body>
+
+<ul class="tree" id="tree">
+    <li>Животные
+        <ul>
+            <li>Млекопитающие
+                <ul>
+                    <li>Коровы</li>
+                    <li>Ослы</li>
+                    <li>Собаки</li>
+                    <li>Тигры</li>
+                </ul>
+            </li>
+            <li>Другие
+                <ul>
+                    <li>Змеи</li>
+                    <li>Птицы</li>
+                    <li>Ящерицы</li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+    <li>Рыбы
+        <ul>
+            <li>Аквариумные
+                <ul>
+                    <li>Гуппи</li>
+                    <li>Скалярии</li>
+                </ul>
+
+            </li>
+            <li>Морские
+                <ul>
+                    <li>Морская форель</li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+</ul>
+
+<script>
+var tree = document.getElementById('tree');
+
+/* проверить на попадание события в заголовок LI */
+function isOverTitle(evt, li) {
+  /* обернуть заголовок в span */
+  var titleWrapper = document.createElement('span');
+  var titleTextNode = li.firstChild;             // <li>TITLE...
+  li.insertBefore(titleWrapper, titleTextNode); // <li><span></span>TITLE
+  titleWrapper.appendChild(titleTextNode);  // <li><span>TITLE</span>
+
+  /* определить, был ли клик по координатам - в SPAN ?*/
+  var isClickOnTitle = (document.elementFromPoint(evt.clientX, evt.clientY) == titleWrapper);
+
+  /* в любом случае вернуть заголовок в текст обратно перед тем как идти дальше */
+  titleWrapper.removeChild(titleWrapper.firstChild); // <li><span></span>
+  li.replaceChild(titleTextNode, titleWrapper);  // <li>TITLE...
+
+  return isClickOnTitle;
+}
+
+/* отслеживаем клики на всём дереве */
+tree.onclick = function(evt) {
+  var evt = evt || event;
+  var target = evt.target || evt.srcElement;
+
+
+  if (!isOverTitle(evt, target)) {
+    return; // клик не на заголовке
+  }
+
+  /* раскрыть-закрыть детей */
+  var node = target.getElementsByTagName('ul')[0];
+  if (!node) return; // нет детей
+
+  node.style.display = node.style.display ? '' : 'none';
+}
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/source.view/index.html b/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/source.view/index.html
new file mode 100755
index 00000000..6ee56ce0
--- /dev/null
+++ b/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/source.view/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+.tree li {
+    cursor: pointer;
+}
+</style>
+</head>
+<body>
+
+<ul class="tree" id="tree">
+    <li>Животные
+        <ul>
+            <li>Млекопитающие
+                <ul>
+                    <li>Коровы</li>
+                    <li>Ослы</li>
+                    <li>Собаки</li>
+                    <li>Тигры</li>
+                </ul>
+            </li>
+            <li>Другие
+                <ul>
+                    <li>Змеи</li>
+                    <li>Птицы</li>
+                    <li>Ящерицы</li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+    <li>Рыбы
+        <ul>
+            <li>Аквариумные
+                <ul>
+                    <li>Гуппи</li>
+                    <li>Скалярии</li>
+                </ul>
+
+            </li>
+            <li>Морские
+                <ul>
+                    <li>Морская форель</li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+</ul>
+
+<script>
+var tree = document.getElementById('tree');
+
+tree.onclick = function(evt) {
+  var evt = evt || event;
+  var target = evt.target || evt.srcElement;
+
+  /* раскрыть-закрыть детей */
+  var node = target.getElementsByTagName('ul')[0];
+  if (!node) return; // нет детей
+
+  node.style.display = node.style.display ? '' : 'none';
+}
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/task.md b/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/task.md
new file mode 100644
index 00000000..e4b22c5b
--- /dev/null
+++ b/2-ui/3-event-details/1-mouse-clicks/2-tree-coords/task.md
@@ -0,0 +1,37 @@
+# Дерево: проверка клика на заголовке
+
+[importance 3]
+
+Есть кликабельное JavaScript-дерево UL/LI (см. задачу [](/task/sliding-tree)).
+
+```html
+<ul>
+  <li>Млекопитающие
+    <ul>
+      <li>Коровы</li>
+      <li>Ослы</li>
+      <li>Собаки</li>
+      <li>Тигры</li>
+    </ul>
+  </li>
+</ul>
+```
+
+При клике на заголовке его список его детей скрывается-раскрывается.
+Выглядит это так: (кликайте на заголовки)
+
+[iframe edit link border="1" src="source"]
+
+Однако, проблема в том, что скрытие-раскрытие происходит даже при клике *вне заголовка*, на пустом пространстве справа от него.
+
+**Как скрывать/раскрывать детей только при клике на заголовок?**
+
+В задаче [](/task/sliding-tree) это решено так: заголовки завёрнуты в элементы `SPAN` и проверяются клики только на них. Представим на минуту, что мы не хотим оборачивать текст в `SPAN`, а хотим оставить как есть. Например, по соображениям производительности, если дерево и так очень большое, ведь оборачивание всех заголовков в `SPAN` увеличит количество DOM-узлов в 2 раза.
+
+**Решите задачу без обёртывания заголовков в `SPAN`, используя работу с координатами.**
+
+Исходный документ содержит кликабельное дерево.
+
+[edit src="source" task/]
+
+P.S. Задача -- скорее на сообразительность, однако подход может быть полезен в реальной жизни.
diff --git a/2-ui/3-event-details/1-mouse-clicks/article.md b/2-ui/3-event-details/1-mouse-clicks/article.md
new file mode 100644
index 00000000..1e2e1a78
--- /dev/null
+++ b/2-ui/3-event-details/1-mouse-clicks/article.md
@@ -0,0 +1,334 @@
+# Мышь: клики, кнопка, координаты
+
+В этой главе мы глубже разберёмся со списком событий мыши, рассмотрим их общие  свойства, а также те события, которые связаны с кликом.
+[cut]
+## Типы событий мыши  
+
+Условно можно разделить события на два типа: "простые" и "комплексные". 
+
+### Простые события   
+
+<dl>
+<dt>`mousedown`</dt>
+<dd>Кнопка мыши нажата над элементом.</dd>
+<dt>`mouseup`</dt>
+<dd>Кнопка мыши отпущена над элементом.</dd>
+<dt>`mouseover`</dt>
+<dd>Мышь появилась над элементом.</dd>
+<dt>`mouseout`</dt>
+<dd>Мышь ушла с элемента.</dd>
+<dt>`mousemove`</dt>
+<dd>Каждое движение мыши над элементом генерирует это событие.</dd>
+</dl>
+
+### Комплексные события   
+
+<dl>
+<dt>`click`</dt>
+<dd>Вызывается при клике мышью, то есть при `mousedown`, а затем `mouseup` на одном элементе</dd>
+<dt>`contextmenu`</dt>
+<dd>Вызывается при клике правой кнопкой мыши на элементе.</dd>
+<dt>`dblclick`</dt>
+<dd>Вызывается при двойном клике по элементу.</dd>
+</dl>
+
+Комплексные можно составить из простых, поэтому в теории можно было бы обойтись вообще без них. Но они есть, и это хорошо, потому что с ними удобнее.
+
+### Порядок срабатывания событий
+
+Одно действие может вызывать несколько событий. 
+
+Например, клик вызывает сначала `mousedown` при нажатии, а затем `mouseup` и `click` при отпускании кнопки.
+
+В тех случаях, когда одно действие генерирует несколько событий, их порядок фиксирован. То есть, обработчики вызовутся в порядке `mousedown -> mouseup -> click`.  
+
+Кликните по кнопке ниже и вы увидите, какие при этом происходят события. Попробуйте также двойной клик. 
+
+На тест-стенде ниже все мышиные события записываются, и если между событиями проходит больше 1 секунды, то они для удобства чтения отделяются линией. Также присутствуют свойства `which/button`, по которым можно определить кнопку мыши. Мы их рассмотрим далее.
+
+<input onmousedown="return logMouse(event)" onmouseup="return logMouse(event)" onclick="return logMouse(event)" oncontextmenu="return logMouse(event)" ondblclick="return logMouse(event)" value="Кликни меня левой или правой кнопкой мыши" type="button" /> <input onclick="logClear('test')" value="Очистить" type="button" /> <form id="testform" name="testform"> <textarea style="font-size:12px;height:150px;width:360px;"></textarea></form>
+
+**Каждое событие обрабатывается независимо.**
+
+Например, при клике события `mouseup + click` возникают одновременно, но обрабатываются последовательно. Сначала полностью завершается обработка `mouseup`, затем запускается `click`.
+
+
+## Получение информации о кнопке: which   
+
+При обработке событий, связанных с кликами мыши, бывает важно знать, какая кнопка нажата. 
+
+**Для получения кнопки мыши в объекте `event` есть свойство `which`.** 
+
+На практике оно используется редко, т.к. обычно обработчик вешается либо  `onclick` -- только на левую кнопку мыши, либо `oncontextmenu` -- только на правую. 
+
+Возможны следующие значения:
+<ul>
+<li>`event.which == 1` - левая кнопка</li>
+<li>`event.which == 2` - средняя кнопка</li>
+<li>`event.which == 3` - правая кнопка</li>
+</ul>
+
+Это свойство не поддерживается IE8-, но его можно получить способом, описанным в конце главы.
+
+## Правый клик: oncontextmenu   
+
+При клике правой кнопкой мыши браузер показывает свое контекстное меню. Это является его действием по умолчанию:
+
+```html
+<!--+ autorun height=auto -->
+<button oncontextmenu="alert('Клик!');">Правый клик сюда</button>
+```
+
+...Но если мы не хотим, чтобы показывалось встроенное меню, например потому что показываем своё, то можно отменить действие по умолчанию.
+
+В примере ниже встроенное меню показано не будет:
+
+```html
+<!--+ autorun height=auto -->
+<button oncontextmenu="alert('Клик!');return false">Правый клик сюда</button>
+```
+
+## Модификаторы shift, alt, ctrl и meta
+
+Во всех событиях мыши присутствует информация о нажатых клавишах-модификаторах.
+
+Соответствующие свойства:
+<ul>
+<li>`shiftKey`</li>
+<li>`altKey`</li>
+<li>`ctrlKey`</li>
+<li>`metaKey` (для Mac)</li>
+</ul>
+
+Например, кнопка ниже сработает только на Alt+Shift+Клик:
+
+```html
+<!--+ autorun -->
+<button>Alt+Shift+Кликни меня!</button>
+
+<script>
+  document.body.children[0].onclick = function(e) {
+    e = e || event;
+*!*
+    if (!e.altKey || !e.shiftKey) return;
+*/!*
+    alert('Ура!');
+  }
+</script>
+```
+
+[warn header="Внимание: на Mac вместо `Ctrl` используется `Cmd`"]
+На компьютерах Mac кроме клавиш [key Alt], [key Shift] и [key Ctrl], есть ещё одна специальная клавиша: [key Cmd], которой соответствует свойство `metaKey`.
+
+В большинстве случаев на Mac вместо [key Ctrl] используется [key Cmd]. Там, где пользователь Windows нажимает [key Ctrl+Enter] или [key Ctrl+A], пользователь Mac нажмёт [key Cmd+Enter] или [key Cmd+A], и так далее, почти всегда [key Cmd] вместо [key Ctrl].
+
+Поэтому, если мы хотим поддерживать [key Ctrl]+click, то под Mac имеет смысл обрабатывать [key Cmd]+click.
+
+Даже если бы мы хотели бы заставить пользователей Mac использовать именно [key Ctrl]+click -- это было бы затруднительно. Дело в том, что обычный клик с зажатым [key Ctrl] под Mac работает как *правый клик* и генерирует другое событие: `oncontextmenu`, так что сгенерировать именно [key Ctrl]+click под Mac достаточно сложно.
+
+Вывод -- чтобы пользователи обоих операционных систем работали с комфортом, в паре с `ctrlKey` нужно обязательно использовать `metaKey`.
+
+В JS-коде это означает, что для удобства пользователей Mac нужно проверять `if (event.ctrlKey || event.metaKey)`. 
+[/warn]
+
+## Координаты мыши
+
+Все мышиные события предоставляют текущие координаты курсора в двух видах: относительно окна и относительно документа.
+
+### Относительно окна: clientX/Y
+
+Есть отличное кросс-браузерное свойство `clientX`(`clientY`), которое содержит координаты курсора относительно `window`.
+
+При этом, например, если ваше окно размером 500x500, а мышь находится в центре, тогда и `clientX` и `clientY` будут равны 250.
+
+Можно как угодно прокручивать страницу, но если не двигать при этом мышь, то координаты курсора `clientX/clientY` не изменятся, потому что они считаются относительно окна, а не документа.
+
+Проведите мышью над полем ввода, чтобы увидеть `clientX/clientY`:
+
+```html
+<input onmousemove="this.value = event.clientX+':'+event.clientY">
+```
+
+<input onmousemove="this.value = event.clientX+':'+event.clientY">
+
+
+### Относительно документа: pageX/Y     
+
+Координаты курсора относительно документа находятся в свойствах `pageX/pageY`.
+ 
+Так как эти координаты -- относительно левого-верхнего узла документа, а не окна, то они учитывают прокрутку. Если прокрутить страницу, а мышь не трогать, то координаты курсора `pageX/pageY` изменятся на величину прокрутки, они привязаны к конкретной точке в документе.
+
+В IE8- этих свойств нет, но можно получить их способом, описанным в конце главы. 
+
+Проведите мышью над полем ввода, чтобы увидеть `pageX/pageY` (кроме IE8-):
+
+```html
+<input onmousemove="this.value = event.pageX+':'+event.pageY">
+```
+
+<input onmousemove="this.value = event.pageX+':'+event.pageY">
+
+[warn header="Устарели: `x, y, layerX, layerY`"]
+Некоторые браузеры поддерживают свойства  `event.x/y`, `event.layerX/layerY`.  
+
+Эти свойства устарели, они нестандартные и не добавляют ничего к описанным ваше. Использовать их не стоит.
+[/warn]
+
+
+## Особенности IE8-
+
+### Двойной клик
+
+Все браузеры, кроме IE8-, генерируют `dblclick` *в дополнение* к другим событиям. 
+
+То есть, обычно:
+<ul>
+<li>`mousedown` (нажал)</li>
+<li>`mouseup+click` (отжал) </li>
+<li>`mousedown` (нажал)</li>
+<li>`mouseup+click+dblclick` (отжал).</li>
+</ul>
+
+**IE8- на втором клике не генерирует `mousedown` и `click`.**
+
+Получается:
+<ul>
+<li>`mousedown` (нажал)</li>
+<li>`mouseup+click` (отжал)</li>
+<li>(нажал второй раз, без события)</li>
+<li>`mouseup+dblclick` (отжал).</li>
+</ul>
+
+**Поэтому отловить двойной клик в IE8-, отслеживая только `click`, нельзя, ведь при втором нажатии его нет. Нужно именно событие `dblclick`.**
+
+### Свойство which/button
+
+
+В старых IE8- не поддерживалось свойство `which`, а вместо него использовалось свойство `button`, которое является 3-х битным числом, в котором каждому биту соответствует кнопка мыши. Бит установлен в 1, только если соответствующая кнопка нажата.
+
+Чтобы его расшифровать -- нужна [побитовая операция](/bitwise-operators) `&` ("битовое И"):
+
+<ul>
+<li>`!!(button & 1) == true` (1й бит установлен), если нажата левая кнопка,</li>
+<li>`!!(button & 2) == true` (2й бит установлен), если нажата правая кнопка,</li>
+<li>`!!(button & 4) == true` (3й бит установлен), если нажата средняя кнопка.</li>
+</ul>
+
+Что интересно, при этом мы можем узнать, были ли две кнопки нажаты одновременно, в то время как стандартный `which` такой возможности не даёт. Так что, в некотором смысле, свойство `button` -- более мощное. 
+
+Можно легко сделать функцию, которая будет ставить свойство `which` из `button`, если его нет:
+
+```js
+function fixWhich(e) {
+  if (!e.which && e.button) { // если which нет, но есть button... (IE8-)
+    if (e.button & 1) e.which = 1;      // левая кнопка
+    else if (e.button & 4) e.which = 2; // средняя кнопка
+    else if (e.button & 2) e.which = 3; // правая кнопка
+  }
+}
+```
+
+### Свойства pageX/pageY [#fixPageXY]
+
+В IE до версии 9 не поддерживаются свойства `pageX/pageY`, но их можно получить, прибавив к `clientX/clientY` величину прокрутки страницы. 
+
+Более подробно о её вычислении вы можете прочитать в разделе [прокрутка страницы](#page-scroll). 
+
+Мы же здесь приведем готовый вариант, который позволяет нам получить `pageX/pageY` для старых IE:
+
+```js
+function fixPageXY(e) {
+  if (e.pageX == null && e.clientX != null ) { // если нет pageX..
+    var html = document.documentElement;
+    var body = document.body;
+
+    e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
+    e.pageX -= html.clientLeft || 0;
+    
+    e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
+    e.pageY -= html.clientTop || 0;
+  }
+}
+```
+
+## Итого
+
+События мыши имеют следующие свойства:
+
+<ul>
+<li>Кнопка мыши: `which` (для IE<9: нужно ставить из `button`)</li>
+<li>Элемент, вызвавший событие: `target`</li>
+<li>Координаты, относительно окна: `clientX/clientY`</li>
+<li>Координаты, относительно документа: `pageX/pageY` (для IE<9: нужно ставить по `clientX/Y` и прокрутке)</li>
+<li>Если зажата спец. клавиша, то стоит соответствующее свойство: `altKey`, `ctrlKey`, `shiftKey` или `metaKey` (Mac).</li>
+<li>Для поддержки [key Ctrl]+`click` не забываем проверить `if (e.metaKey || e.ctrlKey)`, чтобы пользователи `Mac` тоже были довольны.</li>
+</ul>
+
+
+
+
+[head]
+<script>
+
+var timer = 0
+
+function showmesg(t, form) {
+
+   if (timer==0) timer = new Date()
+
+   var tm = new Date()
+   if (tm-timer > 300) {
+	t = '------------------------------\n'+t
+   }
+
+   var area = document.forms[form+'form'].getElementsByTagName('textarea')[0]
+
+   area.value += t + '\n';
+   area.scrollTop = area.scrollHeight
+
+   timer = tm
+}
+
+function logMouse(e) {
+   var evt = e.type
+   while (evt.length < 11) evt += ' '
+   showmesg(evt+" which="+e.which+" button="+e.button, 'test')
+   return false
+}
+
+function logMouseMove(e) {
+   var evt = e.type
+   while (evt.length < 11) evt += ' '
+   showmesg(evt+" target="+(e.target || e.srcElement).id, 'move')
+   return false
+}
+
+/*
+function logKey(e) {
+   var evt = e.type
+   while (evt.length < 10) evt += ' '
+   showmesg(evt + 'keyCode=' + keyval(e.keyCode) + ' which=' + keyval(e.which) +  ' charCode=' + keyval(e.charCode) +
+      (e.shiftKey ? ' +shift' : '') +
+      (e.ctrlKey ? ' +ctrl' : '') +
+      (e.altKey ? ' +alt' : '') +
+      (e.metaKey ? ' +meta' : ''), 'key'
+   )
+
+} */
+
+function keyval(n) {
+   if (n == null) return 'undefined';
+   var s = '' + n;
+   if (n >= 32 && n < 127) s += ' ' + String.fromCharCode(n);
+   while (s.length < 6) s += ' ';
+   return s;
+}
+
+
+function logClear(form) {
+	timer = 0
+	document.forms[form+'form'].getElementsByTagName('textarea')[0].value ='';
+	lines=0
+}
+</script>
+[/head]
\ No newline at end of file
diff --git a/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md b/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md
new file mode 100644
index 00000000..592a3161
--- /dev/null
+++ b/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md
@@ -0,0 +1,214 @@
+# Загрузка документа: DOMContentLoaded, load, beforeunload, unload
+
+Процесс загрузки HTML-документа, условно, состоит из трёх стадий:
+<ul>
+<li>`DOMContentLoaded` -- браузер полностью загрузил HTML, и построил DOM-дерево.</li>
+<li>`load` -- браузер загрузил все ресурсы.</li>
+<li>`beforeunload/unload` -- уход со страницы.</li>
+</ul>
+
+Все эти стадии очень важны. На каждую можно повесить обработчик, чтобы совершить полезные действия:
+<ul>
+<li>`DOMContentLoaded` -- означает, что все DOM-элементы разметки уже созданы, можно их искать, вешать обработчики, создавать интерфейс, но при этом, возможно, ещё не догрузились какие-то картинки или стили.</li>
+<li>`load` -- страница и все ресурсы загружены, используется редко, обычно нет нужды ждать этого момента.</li>
+<li>`beforeunload/unload` -- можно проверить, сохранил ли посетитель изменения, уточнить, действительно ли он хочет покинуть страницу.</li>
+</ul>
+
+Далее мы рассмотрим важные детали этих событий.
+
+[cut]
+
+## DOMContentLoaded
+Событие `DOMContentLoaded` поддерживается во всех браузерах, кроме IE8-. Про поддержку аналогичного функционала в старых IE мы поговорим в конце главы.
+ 
+Обработчик на него вешается только через `addEventListener`:
+
+```js
+document.addEventListener( "DOMContentLoaded", ready, false );
+```
+
+Пример:
+
+```html
+<!--+ run height=150 -->
+<script>
+  function ready() {
+    alert('DOM готов');
+    alert("Размеры картинки: " + img.offsetWidth + "x" + img.offsetHeight);
+  }
+ 
+*!*
+  document.addEventListener( "DOMContentLoaded", ready, false );
+*/!*
+</script>  
+
+<img id="img" src="http://js.cx/clipart/yozhik.jpg?speed=1">
+```
+
+В примере выше размеры обработчик `DOMContentLoaded` сработает сразу после загрузки документа, не дожидаясь получения картинки. 
+
+Поэтому на момент вывода `alert` и сама картинка будет невидна и её размеры -- неизвестны (кроме случая, когда картинка взята из кеша браузера). 
+
+В своей сути, событие `onDOMContentLoaded` -- простое, как пробка. Полностью создано DOM-дерево -- и вот событие. Но с ним связан ряд существенных тонкостей.
+
+### DOMContentLoaded и скрипты
+
+Если в документе есть теги `<script>`, то браузер обязан их выполнить до того, как построит DOM. Поэтому событие `DOMContentLoaded` ждёт загрузки и выполнения таких скриптов.
+
+Исключением являются скрипты с атрибутами `async` и `defer`, которые подгружаются асинхронно.
+
+**Побочный эффект: если на странице подключается скрипт с внешнего ресурса (к примеру, реклама), и он тормозит, то событие `DOMContentLoaded` и связанные с ним действия могут сильно задержаться.**
+
+Современные системы рекламы используют атрибут `async`, либо вставляют скрипты через DOM: `document.createElement('script')...`, что работает так же как `async`: такой скрипт выполняется полностью независимо от страницы и от других скриптов -- сам ничего не ждёт и ничего не блокирует.
+
+### DOMContentLoaded и стили
+
+Внешние стили никак не влияют на событие `DOMContentLoaded`. Но есть один нюанс. 
+
+**Если после стиля идёт скрипт, то этот скрипт обязан дождаться, пока стиль загрузится:**
+
+```html
+<link type="text/css" rel="stylesheet" href="style.css">
+<script>  
+  // сработает после загрузки style.css
+</script>
+```
+
+Такое поведение прописано в стандарте. Его причина -- скрипт может захотеть получить информацию со страницы, зависящую от стилей, например, ширину элемента, и поэтому обязан дождаться загрузки `style.css`.
+
+**Побочный эффект -- так как событие `DOMContentLoaded` будет ждать выполнения скрипта, то оно подождёт и загрузки стилей, которые идут перед `<script>`.**
+
+### Автозаполнение
+
+Firefox/Chrome/Opera автозаполняют формы по `DOMContentLoaded`.
+
+Это означает, что если на странице есть форма для ввода логина-пароля, то браузер введёт в неё запомненные значения только по `DOMContentLoaded`.
+
+**Побочный эффект: если `DOMContentLoaded` ожидает множества скриптов и стилей, то автозаполнение не сработает до полной их загрузки.**
+
+Конечно, это довод в пользу того, чтобы не задерживать `DOMContentLoaded`, в частности -- использовать у скриптов атрибуты `async` и `defer`. 
+
+## window.onload [#window-onload]
+
+Обработчик `window.onload` срабатывает, когда загружается *вся* страница, включая ресурсы на ней -- стили, картинки, ифреймы и т.п.
+
+Пример ниже выведет `alert` лишь после полной загрузки окна, включая `IFRAME` и картинку:
+
+```html
+<!--+ run -->
+<script>
+*!*
+  window.onload = function() {
+    alert('Документ и все ресурсы загружены');
+  };
+*/!*
+</script>
+<iframe src="http://example.com/" style="height:60px"></iframe>
+<img src="http://js.cx/clipart/yozhik.jpg?speed=1">
+```
+
+## window.onunload
+
+Когда человек уходит со страницы или закрывает окно, срабатывает `window.unload`. В нём можно сделать что-то, не требующее ожидания, например, закрыть вспомогательные popup-окна, но отменить сам переход нельзя. 
+
+Это позволяет другое событие -- `window.onbeforeunload`, которое поэтому используется гораздо чаще.
+
+## window.onbeforeunload [#window.onbeforeunload]
+
+Если посетитель инициировал переход на другую страницу или нажал "закрыть окно", то обработчик `onbeforeunload` может приостановить процесс и спросить подтверждение.
+
+Для этого ему нужно вернуть строку, которую браузеры покажут посетителю, спрашивая -- нужно ли переходить. 
+
+Например:
+
+```js
+window.onbeforeunload = function() {
+  return "Данные не сохранены. Точно перейти?";
+};
+```
+
+[warn header="Firefox игнорирует текст, он показывает своё сообщение"]
+Firefox игнорирует текст, а всегда показывает своё сообщение. 
+
+Это сделано в целях безопасности.
+[/warn]
+
+Кликните на кнопку в `IFRAME'е` ниже, чтобы поставить обработчик, а затем по ссылке, чтобы увидеть его в действии:
+
+[iframe src="window-onbeforeunload" border="1" height="80" link]
+
+
+## Эмуляция DOMContentLoaded для IE8-
+
+Прежде чем что-то эмулировать, заметим, что альтернативой событию `onDOMContentLoaded` является вызов функции `init` из скрипта в самом конце `BODY`, когда основная часть DOM уже готова:
+
+```html
+<body>
+  ...
+<script>
+  init();
+</script>
+</body>
+```
+
+Причина, по которой обычно предпочитают именно событие -- одна: удобство. Вешается обработчик и не надо ничего писать в конец `BODY`.
+
+### Мини-скрипт documentReady
+Если вы всё же хотите использовать `onDOMContentLoaded` кросс-браузерно, то нужно либо подключить какой-нибудь фреймворк -- почти все предоставляют такой функционал, либо использовать функцию из мини-библиотеки [jquery.documentReady.js](https://github.com/addyosmani/jquery.parts/blob/master/jquery.documentReady.js).
+
+Несмотря на то, что в названии содержится слово "jquery", эта библиотечка не требует [jQuery](http://jquery.com). Наоборот, она представляет собой единственную функцию с названием `$`, вызов которой `$(callback)` добавляет обработчик `callback` на `DOMContentLoaded` (можно вызывать много раз), либо, если документ уже загружен -- выполняет его тут же.
+
+Пример использования:
+
+```html
+<!--+ run -->
+<script src="http://js.cx/script/jquery.documentReady.js"></script>
+
+<script>
+*!*
+  $(function() {
+    alert("DOMContentLoaded");
+  });
+*/!*
+</script>
+
+<img src="http://js.cx/clipart/yozhik.jpg?speed=1">
+<div>Текст страницы</div>
+```
+
+Здесь `alert` сработает до загрузки картинки, но после создания DOM, в частности, после появления текста. И так будет для всех браузеров, включая даже очень старые IE.
+
+[smart header="Как именно эмулируется `DOMContentLoaded`?"]
+Технически, эмуляция `DOMContentLoaded` для старых IE осуществляется очень забавно.
+
+Основной приём -- это попытка прокрутить документ вызовом:
+
+```js
+document.documentElement.doScroll("left");
+```
+
+Метод `doScroll` работает только в IE и "методом тыка" было обнаружено, что он бросает исключение, если DOM не полностью создан.
+
+Поэтому библиотека пытается вызвать прокрутку, если не получается -- через `setTimeout(.., 1)` пытается прокрутить его ещё раз, и так до тех пор, пока действие не перестанет вызывать ошибку. На этом этапе документ считается загрузившимся.
+
+Внутри фреймов и в очень старых браузерах такой подход может ошибаться, поэтому дополнительно ставится резервный обработчик на `onload`, чтобы уж точно сработал.
+[/smart]
+
+
+## Итого
+
+<ul>
+<li>Самое востребованное событие из описанных -- без сомнения, `DOMContentLoaded`. Многие страницы сделаны так, что инициализуют интерфейсы именно по этому событию.
+
+Это удобно, ведь можно в `<head>` написать скрипт, который будет запущен в момент, когда все DOM-элементы доступны.
+
+С другой стороны, следует иметь в виду, что событие `DOMContentLoaded` будет ждать не только, собственно, HTML-страницу, но и внешние скрипты, подключенные тегом `<script>` без атрибутов `defer/async`, а также стили перед такими скриптами.
+
+Событие `DOMContentLoaded` не поддерживается в IE8-, но почти все фреймворки умеют его эмулировать. Если нужна отдельная функция только для кросс-браузерного аналога `DOMContentLoaded` -- можно использовать [jquery.documentReady.js](https://github.com/addyosmani/jquery.parts/blob/master/jquery.documentReady.js).
+</li>
+<li>Событие `window.onload` используют редко, поскольку обычно нет нужды ждать подгрузки *всех* ресурсов. Если же нужен конкретный ресурс (картинка или ифрейм), то можно поставить событие `onload` непосредственно на нём, мы посмотим, как это сделать, далее.</li>
+<li>Событие `window.onunload` почти не используется, как правило, оно бесполезно -- мало что можно сделать, зная, что окно браузера прямо сейчас закроется.</li>
+<li>Гораздо чаще применяется `window.onbeforeunload` -- это де-факто стандарт для того, чтобы проверить, сохранил ли посетитель данные, действительно ли он хочет покинуть страницу. В системах редактирования документов оно используется повсеместно.</li>
+</ul>
+
+
diff --git a/2-ui/3-event-details/10-onload-ondomcontentloaded/window-onbeforeunload.view/index.html b/2-ui/3-event-details/10-onload-ondomcontentloaded/window-onbeforeunload.view/index.html
new file mode 100755
index 00000000..776ae33d
--- /dev/null
+++ b/2-ui/3-event-details/10-onload-ondomcontentloaded/window-onbeforeunload.view/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+<script>
+function setHandler() {
+  window.onbeforeunload = function() {
+    return "Данные не сохранены. Точно перейти?";
+  };
+}
+</script>
+
+<button onclick="setHandler()">Поставить window.onbeforeunload</button>
+
+<a href="http://example.com">Уйти на EXAMPLE.COM</a>
+</body>
+</html>
diff --git a/2-ui/3-event-details/11-onload-onerror/1-nice-alt/solution.md b/2-ui/3-event-details/11-onload-onerror/1-nice-alt/solution.md
new file mode 100644
index 00000000..958b2434
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/1-nice-alt/solution.md
@@ -0,0 +1,9 @@
+# Подсказка
+
+Текст на странице пусть будет изначально `DIV`, с классом `img-replace` и атрибутом `data-src` для картинки. 
+
+Функция `replaceImg()` должна искать такие `DIV` и загружать изображение с указанным `src`. По `onload` осуществляется замена `DIV` на картинку.
+
+# Решение
+
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/1-nice-alt/solution.view/index.html b/2-ui/3-event-details/11-onload-onerror/1-nice-alt/solution.view/index.html
new file mode 100755
index 00000000..7e4e59b5
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/1-nice-alt/solution.view/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style> .img-replace { float: left; border: 1px solid black;} </style>
+</head>
+<body>
+
+<button onclick="window.location.reload(true)">Перезагрузить ифрейм</button>
+<hr>
+<div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" data-src="http://js.cx/search/google.png" class="img-replace">
+<span style="color:#1A53F7">G</span><span style="color:#E42131">o</span><span style="color:#FEB819">o</span><span style="color:#164AF2">g</span><span style="color:#00a315">l</span><span style="color:#E42131">e</span>
+</div>
+
+<div style="width:101px;height:40px;font-size:32px" data-src="http://js.cx/search/yandex.png" class="img-replace">
+<span style="color:#F00">Я</span>ндекс
+</div>
+
+<div style="width:100;height:40px;font-size:32px;color:#006dd4;font-weight:bold;letter-spacing:3px;font-family:Arial" data-src="bing.png" class="img-replace">bing</div>
+
+
+<script>
+
+function replaceImg() {
+  var divs = document.querySelectorAll('div.img-replace');
+  for(var i=0; i<divs.length; i++) (function(i) {
+    var img = document.createElement('img');
+    img.src = divs[i].getAttribute('data-src');
+    img.className = 'img-replace';
+
+    img.onload = function() {
+      divs[i].parentNode.replaceChild(img, divs[i]);
+    }
+
+  }(i))
+}
+
+setTimeout(replaceImg, 1000); // задержка на 1 сек для демонстрации
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/11-onload-onerror/1-nice-alt/source.view/index.html b/2-ui/3-event-details/11-onload-onerror/1-nice-alt/source.view/index.html
new file mode 100755
index 00000000..21acdfeb
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/1-nice-alt/source.view/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style> .img-replace { float: left; border: 1px solid black;} </style>
+</head>
+<body>
+
+<!-- Google -->
+
+<div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" class="img-replace">
+<span style="color:#1A53F7">G</span><span style="color:#E42131">o</span><span style="color:#FEB819">o</span><span style="color:#164AF2">g</span><span style="color:#00a315">l</span><span style="color:#E42131">e</span>
+</div>
+
+<!-- Яндекс -->
+<div style="width:101px;height:40px;font-size:32px" class="img-replace">
+<span style="color:#F00">Я</span>ндекс
+</div>
+
+<!-- Bing -->
+<div style="width:100;height:40px;font-size:32px;color:#006dd4;font-weight:bold;letter-spacing: 3px; font-family:Arial">bing</div>
+
+<hr>
+<!-- картинки (для bing картинки специально нет, чтобы протестировать случай "загрузка не удалась") -->
+
+<img src="http://js.cx/search/yandex.png" width="114" height="40" alt="Яндекс">
+<img src="http://js.cx/search/google.png" width="101" height="40" alt="Google">
+<img src="http://js.cx/search/bing.png" width="101" height="40" alt="Файла нет (bing)">
+
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/11-onload-onerror/1-nice-alt/task.md b/2-ui/3-event-details/11-onload-onerror/1-nice-alt/task.md
new file mode 100644
index 00000000..cab148fc
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/1-nice-alt/task.md
@@ -0,0 +1,18 @@
+# Красивый "ALT"
+
+[importance 5]
+
+Обычно, до того как изображение загрузится (или при отключенных картинках), посетитель видит пустое место с текстом из "ALT". Но этот атрибут не допускает HTML-форматирования.
+
+При мобильном доступе скорость небольшая, и хочется, чтобы посетитель сразу видел красивый текст.
+
+**Реализуйте "красивый" (HTML) аналог `alt` при помощи CSS/JavaScript, который затем будет заменён картинкой сразу же как только она загрузится.** А если загрузка не состоится -- то не заменён.
+
+Демо: (нажмите "перезагрузить", чтобы увидеть процесс загрузки и замены)
+[iframe src="solution" height="100"]
+
+Картинки для `bing` специально нет, так что текст остается "как есть".
+
+Исходный документ содержит разметку текста и ссылки на изображения.
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.md b/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.md
new file mode 100644
index 00000000..0100decd
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.md
@@ -0,0 +1,9 @@
+# Подсказка
+
+Создайте переменную-счетчик для подсчёта количества загруженных картинок, и увеличивайте при каждом `onload/onerror`.
+
+Когда счетчик станет равен количеству картинок -- вызывайте `callback`.
+
+# Решение
+
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.view/index.html b/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.view/index.html
new file mode 100755
index 00000000..2b657ab6
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.view/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<script>
+
+  function preloadImages(sources, callback) {
+    var counter = 0;
+
+    function onLoad() {
+      counter++;
+      if (counter == sources.length) callback();
+    }
+
+    for (var i = 0; i < sources.length; i++) {
+      var img = document.createElement('img');
+      // сначала onload/onerror, затем src - важно для IE<9
+      img.onload = img.onerror = onLoad;
+      img.src = sources[i];
+    }
+
+  }
+
+  // ---------- Проверка ----------
+
+  var sources = [
+    "http://js.cx/images-load/1.jpg", 
+    "http://js.cx/images-load/2.jpg", 
+    "http://js.cx/images-load/3.jpg"
+  ];
+  for (var i=0; i<sources.length; i++) {
+    sources[i] += '?'+Math.random();
+  }
+
+  function testLoaded() {
+    var widthSum = 0;
+    for (var i = 0; i < sources.length; i++) {
+      var img = document.createElement('img');
+      img.src = sources[i];
+      widthSum += img.width;
+    }
+    alert(widthSum); // 300!
+  }
+
+  // до загрузки - 0
+  testLoaded();
+  // после загрузки - 300
+  preloadImages(sources, testLoaded);
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/source.view/index.html b/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/source.view/index.html
new file mode 100755
index 00000000..dfb6a365
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/source.view/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<script>
+
+  function preloadImages(sources, callback) {
+    /* ваш код */
+  }
+
+  // ---------- Проверка ----------
+
+  /* файлы для загрузки */
+  var sources = [
+    "http://js.cx/images-load/1.jpg", 
+    "http://js.cx/images-load/2.jpg", 
+    "http://js.cx/images-load/3.jpg"
+  ];
+  for (var i=0; i<sources.length; i++) {
+    sources[i] += '?'+Math.random(); // добавляем параметр, чтобы без кеша (для теста)
+  }
+
+  /** если картинка загружена, то можно будет сразу получить её ширину
+   * создадим все картинки и проверим, есть ли у них ширина
+  */
+  function testLoaded() {
+    var widthSum = 0;
+    for (var i = 0; i < sources.length; i++) {
+      var img = document.createElement('img');
+      img.src = sources[i];
+      widthSum += img.width;
+    }
+    // каждое изображение 100x100, общая ширина должна быть 300px
+    alert(widthSum);
+  }
+
+  // до загрузки - выведет 0
+  testLoaded();
+
+  // после загрузки - выведет 300
+  preloadImages(sources, testLoaded);
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/task.md b/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/task.md
new file mode 100644
index 00000000..101b5b87
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/2-load-img-callback/task.md
@@ -0,0 +1,23 @@
+# Загрузить изображения с коллбэком
+
+[importance 4]
+
+Создайте функцию `preloadImages(sources, callback)`, которая предзагружает изображения из массива `sources`, и после загрузки вызывает функцию `callback`.
+
+Пример использования:
+
+```js
+addScripts(["1.jpg", "2.jpg", "3.jpg"], callback);
+```
+
+Если вдруг возникает ошибка при загрузке -- считаем такое изображение загруженным, чтобы не ломать поток выполнения.
+
+Такая функция может полезна, например, для фоновой загрузки картинок в онлайн-галерею.
+
+В исходном документе содержатся ссылки на картинки, а также код для проверки, действительно ли изображения загрузились. Он должен выводить "0", затем "300".
+
+[edit src="source" task/] 
+
+
+
+
diff --git a/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.md b/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.md
new file mode 100644
index 00000000..8b36e7ac
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.md
@@ -0,0 +1,19 @@
+# Подсказка
+
+Добавляйте `SCRIPT` при помощи методов `DOM`:
+
+```js
+var script = document.createElement('script');
+script.src = src;
+
+// в документе может не быть HEAD или BODY,
+// но хотя бы один (текущий) SCRIPT в документе есть
+var s = document.getElementsByTagName('script')[0];
+s.parentNode.insertBefore(script, s); // перед ним и вставим
+```
+
+На скрипт повесьте обработчики `onload/onreadystatechange`.
+
+# Решение
+
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/go.js b/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/go.js
new file mode 100755
index 00000000..777a73b9
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/go.js
@@ -0,0 +1,3 @@
+function go () {
+  alert("ok");
+}
diff --git a/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/index.html b/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/index.html
new file mode 100755
index 00000000..f7994a00
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<script>
+
+  function addScript(src, callback) {
+    var script = document.createElement('script');
+    script.src = src;
+    var s = document.getElementsByTagName('script')[0]
+    s.parentNode.insertBefore(script, s);
+
+    var loaded = false;
+
+    function onload() {
+      if (loaded) return; // повторный вызов
+      loaded = true;
+      callback();
+    }
+
+    script.onload = onload; // все браузеры, IE с версии 9
+
+    script.onreadystatechange = function () { // IE<9
+      if (this.readyState == 'loaded' || this.readyState == 'complete') {
+        setTimeout(onload, 0);
+      }
+    };
+
+  }
+
+  addScript("go.js", function() {
+    go();
+  });
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/11-onload-onerror/3-script-callback/source.view/go.js b/2-ui/3-event-details/11-onload-onerror/3-script-callback/source.view/go.js
new file mode 100755
index 00000000..c409fbd4
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/3-script-callback/source.view/go.js
@@ -0,0 +1,3 @@
+function go() {
+  alert("ok");
+}
diff --git a/2-ui/3-event-details/11-onload-onerror/3-script-callback/source.view/index.html b/2-ui/3-event-details/11-onload-onerror/3-script-callback/source.view/index.html
new file mode 100755
index 00000000..2dbe0b70
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/3-script-callback/source.view/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<script>
+
+  function addScript(src, callback) {
+    /* ваш код */
+  }
+
+  addScript("go.js", function() {
+    go();
+  });
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/11-onload-onerror/3-script-callback/task.md b/2-ui/3-event-details/11-onload-onerror/3-script-callback/task.md
new file mode 100644
index 00000000..d6612c4d
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/3-script-callback/task.md
@@ -0,0 +1,20 @@
+# Скрипт с коллбэком
+
+[importance 4]
+
+Создайте функцию `addScript(src, callback)`, которая загружает скрипт с данным `src`, и после его загрузки и выполнения вызывает функцию `callback`.
+
+Скрипт может быть любым, работа функции не должна зависеть от его содержимого.
+
+Пример использования:
+
+```js
+// go.js содержит функцию go()
+addScript("go.js", function() {
+ go();
+});
+```
+
+Ошибки загрузки обрабатывать не нужно.
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.md b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.md
new file mode 100644
index 00000000..9e1ea754
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.md
@@ -0,0 +1,9 @@
+# Подсказки
+
+Создайте переменную-счетчик для подсчёта количества загруженных скриптов.
+
+Чтобы один скрипт не учитывался два раза (например, `onreadystatechange` запустился при `loaded` и `complete`), учитывайте его состояние в объекте `loaded`. Свойство `loaded[i] = true`  означает что `i`-й скрипт уже учтён.
+
+# Решение
+
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/a.js b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/a.js
new file mode 100755
index 00000000..9d6742cd
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/a.js
@@ -0,0 +1,3 @@
+function a() {
+  b();
+}
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/b.js b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/b.js
new file mode 100755
index 00000000..ce1689f2
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/b.js
@@ -0,0 +1,3 @@
+function b() {
+  c();
+}
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/c.js b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/c.js
new file mode 100755
index 00000000..e343ee11
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/c.js
@@ -0,0 +1,3 @@
+function c() {
+  alert('ok');
+}
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/index.html b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/index.html
new file mode 100755
index 00000000..6b75f501
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<script>
+
+  function addScript(src) {
+    var script = document.createElement('script');
+    script.src = src;
+    var s = document.getElementsByTagName('script')[0]
+    s.parentNode.insertBefore(script, s);
+    return script;
+  }
+
+  function addScripts(scripts, callback) {
+    var loaded = {}; // Для загруженных файлов loaded[i] = true
+    var counter = 0;
+
+    function onload(i) {
+      if (loaded[i]) return; // лишний вызов onload/onreadystatechange
+      loaded[i] = true;
+      counter++;
+      if (counter == scripts.length) callback();
+    }
+
+    for (var i = 0; i < scripts.length; i++) (function(i) {
+      var script = addScript(scripts[i]);
+
+      script.onload = function() {
+        onload(i);
+      };
+
+      script.onreadystatechange = function() { // IE<9
+        if (this.readyState == 'loaded' || this.readyState == 'complete') {
+          setTimeout(this.onload, 0); // возможны повторные вызовы onload
+        }
+      };
+
+    }(i));
+
+  }
+
+  addScripts(["a.js", "b.js", "c.js"], function() { a() });
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/a.js b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/a.js
new file mode 100755
index 00000000..9d6742cd
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/a.js
@@ -0,0 +1,3 @@
+function a() {
+  b();
+}
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/b.js b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/b.js
new file mode 100755
index 00000000..ce1689f2
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/b.js
@@ -0,0 +1,3 @@
+function b() {
+  c();
+}
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/c.js b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/c.js
new file mode 100755
index 00000000..e343ee11
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/c.js
@@ -0,0 +1,3 @@
+function c() {
+  alert('ok');
+}
\ No newline at end of file
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/index.html b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/index.html
new file mode 100755
index 00000000..58601437
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<script>
+
+  /* ваш код */
+
+  // функция a() сработает только если загружены a.js, b.js, c.js
+  addScripts(["a.js", "b.js", "c.js"], function() { a() });
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/task.md b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/task.md
new file mode 100644
index 00000000..99016f1c
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/4-scripts-callback/task.md
@@ -0,0 +1,23 @@
+# Скрипты с коллбэком
+
+[importance 5]
+
+Создайте функцию `addScripts(scripts, callback)`, которая загружает скрипты из массива `scripts`, и *после загрузки и выполнения их всех* вызывает функцию `callback`.
+
+Скрипт может быть любым, работа функции не должна зависеть от его содержимого.
+
+Пример использования:
+
+```js
+addScripts(["a.js", "b.js", "c.js"], function() { a() });
+/* функция a() описана в a.js и использует b.js,c.js */
+```
+
+<ul>
+<li>Ошибки загрузки обрабатывать не нужно.</li>
+<li>Один скрипт не ждёт другого. Они все загружаются, а по окончании вызывается обработчик `callback`.</li>
+
+Исходный содержит скрипты `a.js`, `b.js`, `c.js`: 
+
+[edit src="source" task/]
+
diff --git a/2-ui/3-event-details/11-onload-onerror/article.md b/2-ui/3-event-details/11-onload-onerror/article.md
new file mode 100644
index 00000000..9b12cb36
--- /dev/null
+++ b/2-ui/3-event-details/11-onload-onerror/article.md
@@ -0,0 +1,239 @@
+# Загрузка скриптов, картинок, фреймов: onload и onerror
+
+Браузер позволяет отслеживать загрузку внешних ресурсов -- скриптов, ифреймов, картинок и других.
+
+Для этого есть два события:
+<ul>
+<li>`onload` -- если загрузка успешна.</li>
+<li>`onerror` -- если при загрузке произошла ошибка.</li>
+</ul>
+
+## Загрузка SCRIPT
+
+Рассмотрим следующую задачу. 
+
+В браузере работает сложный интерфейс и, чтобы создать очередной компонент, нужно загрузить скрипт с сервера.
+
+Подгрузить внешний скрипт -- достаточно просто:
+
+```js
+var script = document.createElement('script');
+script.src = "my.js";
+
+document.documentElement.appendChild(script);
+```
+
+...Но, как подгрузки выполнить функцию из этого скрипта? Конечно, можно вызвать её в самом скрипте, но если скрипт -- это универсальная библиотека, то это было бы неправильно.
+
+### script.onload [#onload]
+
+Первым нашим помощником станет событие `onload`.
+
+**Событие `onload` сработает, когда скрипт загрузился *и* выполнился.**
+
+Например:
+
+```js
+//+ run
+var script = document.createElement('script');
+script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"
+document.documentElement.appendChild(script);
+
+*!*
+script.onload = function() {
+  alert(jQuery); 
+}
+*/!*
+```
+
+Это даёт возможность, как в примере выше, получить переменные из скрипта и выполнять объявленные в нём функции.
+
+...А что, если загрузка скрипта не удалась? Например, такого скрипта на сервере нет (ошибка 404) или сервер "упал" (ошибка 500). 
+
+По-хорошему, такое тоже нужно как-то обрабатывать, хотя бы сообщить посетителю о возникшей проблеме.
+
+### script.onerror [#onerror]
+
+Любые ошибки загрузки (но не выполнения) скрипта отслеживаются обработчиком `onerror`.
+
+Например, для заведомо отсутствующего скрипта:
+
+```js
+//+ run
+var script = document.createElement('script');
+script.src = "http://example.com/404.js"
+document.documentElement.appendChild(script);
+
+*!*
+script.onerror = function() {
+  alert("Ошибка: " + this.src); 
+};
+*/!*
+```
+
+### IE8-: script.onreadystatechange [#onreadystatechange]
+
+Примеры выше работают во всех браузерах, кроме IE8-.
+
+В IE для отслеживания загрузки есть другое событие: `onreadystatechange`. Оно срабатывает многократно, при каждом обновлении состояния загрузки.
+
+Текущая стадия процесса находится в `script.readyState`:
+<dl>
+<dt>`loading`</dt>
+<dd>В процессе загрузки.</dd>
+<dt>`loaded`</dt>
+<dd>Получен ответ с сервера -- скрипт или ошибка. Скрипт на фазе `loaded` может быть ещё не выполнен.</dd>
+<dt>`complete`</dt>
+<dd>Скрипт выполнен.</dd>
+</dl>
+
+Например, рабочий скрипт:
+
+```js
+//+ run
+var script = document.createElement('script');
+script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js";
+document.documentElement.appendChild(script);
+
+*!*
+script.onreadystatechange = function() {
+  alert(this.readyState); // loading -> loaded -> complete
+}
+*/!*
+```
+
+Скрипт с ошибкой:
+
+```js
+//+ run
+var script = document.createElement('script');
+script.src = "http://ajax.googleapis.com/404.js";
+document.documentElement.appendChild(script);
+
+*!*
+script.onreadystatechange = function() {
+  alert(this.readyState);  // loading -> loaded
+}
+*/!*
+```
+
+Обратим внимание на две особенности:
+<ul>
+<li>**Стадии могут пропускаться.** 
+
+Если скрипт в кэше браузера -- он сразу даст `complete`. Вы можете увидеть это, если несколько раз запустите первый пример.</li>
+<li>**Нет особой стадии для ошибки.** 
+
+В примере выше это видно, обработка останавливается на `loaded`.
+</li>
+</ul>
+
+Итак, самое надёжное средство для IE8- поймать загрузку (или ошибку загрузки) -- это повесить обработчик на событие `onreadystatechange`, который будет срабатывать и на стадии `complete` и на стадии `loaded`. Так как скрипт может быть ещё не выполнен к этому моменту, то вызов функции лучше сделать через `setTimeout(.., 0)`. 
+
+Пример ниже вызывает `afterLoad` после загрузки скрипта и работает только в IE:
+
+```js
+//+ run
+var script = document.createElement('script');
+script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js";
+document.documentElement.appendChild(script);
+
+function afterLoad() {
+  alert("Загрузка завершена: " + typeof(jQuery));
+}
+
+*!*
+script.onreadystatechange = function() {
+  if (this.readyState == "complete") { // на случай пропуска loaded
+    afterLoad(); // (2)
+  }
+
+  if (this.readyState == "loaded") {
+    setTimeout(afterLoad, 0);  // (1)
+    
+    // убираем обработчик, чтобы не сработал на complete
+    this.onreadystatechange = null; 
+  }
+}
+*/!*
+```
+
+Вызов `(1)` выполнится при первой загрузке скрипта, а `(2)` -- при второй, когда он уже будет в кеше, и стадия станет сразу `complete`.
+
+Функция `afterLoad` может и не обнаружить `jQuery`, если при загрузке была ошибка, причём не важно какая -- файл не найден или синтаксис скрипта ошибочен.
+
+### Кросс-браузерное решение
+
+Для кросс-браузерной обработки загрузки скрипта или её ошибки поставим обработчик на все три события: `onload`, `onerror`, `onreadystatechange`.
+
+Пример ниже выполняет функцию `afterLoad` после загрузки скрипта *или* при ошибке. 
+
+Работает во всех браузерах:
+
+```js
+//+ run
+var script = document.createElement('script');
+script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js";
+document.documentElement.appendChild(script);
+
+function afterLoad() {
+  alert("Загрузка завершена: " + typeof(jQuery));
+}
+
+script.onload = script.onerror = function() {
+  if (!this.executed) { // выполнится только один раз
+    this.executed = true;
+    afterLoad();
+  }
+};
+
+script.onreadystatechange = function() {
+  var self = this;
+  if (this.readyState == "complete" || this.readyState == "loaded") {
+    setTimeout(function() { self.onload() }, 0);// сохранить "this" для onload
+  }
+};
+```
+
+## Загрузка других ресурсов
+
+Поддержка этих событий для других типов ресурсов различна:
+
+<dl>
+<dt>`<img>`, `<link>` (стили)</dt>
+<dd>Поддерживает `onload/onerror` во всех браузерах.</dd>
+<dt>`<iframe>`</dt>
+<dd>Поддерживает `onload` во всех браузерах. Это событие срабатывает как при успешной загрузке, так и при ошибке. 
+
+Обратим внимание, что если `<iframe>` загружается с того же домена, то можно, используя `iframe.contentWindow.document` получить ссылку на документ и поставить обработчик `DOMContentLoaded`. А вот если `<iframe>` -- с другого домена, то так не получится, однако сработает `onload`. 
+</dd>
+</dl>
+
+## Итого
+
+В этой статье мы рассмотрели события `onload/onerror` для ресурсов.
+
+Их можно обобщить, разделив на рецепты:
+
+<dl>
+<dt>Отловить загрузку скрипта (включая ошибку)</dt>
+<dd>Ставим обработчики на `onload` + `onerror` + (для IE8-) `onreadystatechange`, как указано в рецепте выше</dd>
+<dt>Отловить загрузку картинки `<img>` или стиля `<link>`</dt>
+<dd>Ставим обработчики на `onload` + `onerror`
+
+```js
+var img = document.createElement('img');
+img.onload = function() { alert("Успех "+this.src };
+img.onerror = function() { alert("Ошибка "+this.src };
+img.src = ...
+```
+
+Изображения начинают загружаться сразу при создании, не нужно их для этого вставлять в HTML.
+
+**Чтобы работало в IE8-, `src` нужно ставить *после* `onload/onerror`.**
+</dd>
+<dt>Отловить загрузку `<iframe>`</dt>
+<dd>Поддерживается только обработчик `onload`. Он сработает, когда `IFRAME` загрузится, со всеми подресурсами, а также в случае ошибки.
+</dd>
+</dl>
+
diff --git a/2-ui/3-event-details/2-unselectable/article.md b/2-ui/3-event-details/2-unselectable/article.md
new file mode 100644
index 00000000..ac9f1449
--- /dev/null
+++ b/2-ui/3-event-details/2-unselectable/article.md
@@ -0,0 +1,175 @@
+# Мышь: отмена выделения, невыделяемые элементы
+
+В ряде случаев, например, когда мы хотим обработать клик или двойной клик, браузер также добавляет "от себя" выделение текста, на котором кликнули.
+
+Это некрасиво и неудобно. В этой главе мы рассмотрим основные способы, как делать элемент невыделяемым. В том числе и такие, которые применимы не только к событиям мыши.
+
+[cut]
+## Способ 1: отмена mousedown/selectstart
+
+Проблема: браузер выделяет текст при движении мышью с зажатой левой кнопкой , а также при двойном клике на элемент. Даже там, где это не нужно.
+
+Для примера -- попробуйте сделать двойной клик на элементе ниже.
+
+```html
+<!--+ autorun height=auto -->
+<span ondblclick="alert('двойной клик!')">Текст</span>
+```
+
+Обработчик сработает. Но побочным эффектом является *выделение текста браузером*. 
+
+**Чтобы избежать выделения, мы должны предотвратить действие браузера по умолчанию для события [selectstart](http://msdn.microsoft.com/en-us/library/ms536969%28VS.85%29.aspx) в IE и `mousedown` в других браузерах.**
+
+Полный код элемента, который обрабатывает двойной клик без выделения:
+
+```html
+<!--+ autorun height=auto -->
+<div ondblclick="alert('Тест')" *!*onselectstart="return false" onmousedown="return false"*/!*>
+  Двойной клик сюда выведет "Тест", без выделения
+</div>
+```
+
+При установке на родителя -- все его потомки станут невыделяемыми:
+
+```html
+<!--+ autorun -->
+Элементы списка не выделяются при клике:
+<ul onmousedown="return false" onselectstart="return false">
+  <li>Винни-Пух</li>
+  <li>Ослик Иа</li>
+  <li>Мудрая Сова</li>
+  <li>Кролик. Просто кролик.</li>
+</ul>
+```
+
+[smart header="Выделение, всё же, возможно"]
+Отмена действия браузера при `mousedown/selectstart` отменяет выделение при клике, но не запрещает его полностью.
+
+Если пользователь всё же хочет выделить текстовое содержимое элемента, то он может сделать это. 
+
+Достаточно начать выделение (зажать кнопку мыши) не на самом элементе, а рядом с ним. Ведь там отмены не произойдёт, выделение начнётся, и дальше можно передвинуть мышь уже на элемент.
+[/smart]
+
+## Способ 2: снятие выделения пост-фактум
+
+Вместо *предотвращения* выделения, можно его снять в обработчике события, *после* того, как оно уже произошло.
+
+Для этого мы используем методы работы с выделением, которые описаны в отдельной главе [](/range-textrange-selection). Здесь нам понадобится всего лишь одна функция `clearSelection`, которая будет снимать выделение.
+
+Например, попробуйте двойной клик на этот элемент списка:
+
+```html
+<!--+ autorun height=auto -->
+<ul>
+  <li ondblclick="clearSelection()">Выделение отменяется при двойном клике.</li>
+</ul>
+
+<script>
+  function clearSelection() {
+    if (window.getSelection) {
+      window.getSelection().removeAllRanges();
+    } else { // старый IE
+      document.selection.empty();
+    }
+  }
+</script>
+```
+
+У этого подхода есть две особенности:
+
+<ul>
+<li>Выделение всё же производится, но тут же снимается.</li>
+<li>Выделение при помощи передвижения зажатой мыши всё еще работает, так что посетитель имеет возможность выделить содержимое элемента.</li>
+</ul>
+
+
+
+## Способ 3: свойство user-select
+
+Существует нестандартное CSS-свойство `user-select`, которые делает элемент невыделяемым.
+
+Оно когда-то планировалось в стандарте CSS3, потом от него отказались, но поддержка в браузерах уже была сделана и потому осталась.
+
+Это свойство работает (с префиксом) везде, кроме IE9-:
+
+```html
+<!--+ autorun height=auto -->
+<style>
+b {
+  -webkit-user-select: none; /* user-select -- это нестандартное свойство */
+  -moz-user-select: none;    /* поэтому нужны префиксы */
+  -ms-user-select: none;    
+}
+</style>
+
+Строка до..
+<div ondblclick="alert('Тест')">
+  <b>Этот текст нельзя выделить (кроме IE9-)</b>
+</div>
+.. Строка после
+```
+
+Читайте на эту тему также [Controlling Selection with CSS user-select](http://blogs.msdn.com/b/ie/archive/2012/01/11/controlling-selection-with-css-user-select.aspx).
+
+
+### IE9-: атрибут unselectable="on"
+
+В IE9-  нет `user-select`, но есть атрибут [unselectable](http://msdn.microsoft.com/en-us/library/ms534706%28v=vs.85%29.aspx). 
+
+Он отменяет выделение, но у него есть особенности:
+<ol>
+<li>Во-первых, невыделяемость не наследуется. То есть, невыделяемость родителя не делает невыделяемыми детей.</li>
+<li>Во-вторых, текст, в отличие от `user-select`, всё равно можно выделить, если начать выделение не на самом элементе, а рядом с ним.</li>
+</ol>
+
+```html
+<div ondblclick="alert('Тест')" *!*unselectable="on"*/!* style="border:1px solid black">
+  Этот текст невыделяем в IE, <em>кроме дочерних элементов</em>
+</div>
+```
+
+В действии:
+<div ondblclick="alert('Тест')" unselectable="on" style="border:1px solid black">
+  Этот текст невыделяем в IE, <em>кроме дочерних элементов</em>
+</div>
+
+Левая часть текста в IE не выделяется при двойном клике. Правую часть (`em`) можно выделить, т.к. на ней нет атрибута `unselectable`. 
+
+
+## Итого
+
+Для отмены выделения есть несколько способов:
+
+<ol>
+<li>CSS-свойство `user-select` -- везде кроме IE9- (нужен префикс, нестандарт).</li>
+<li>Атрибут `unselectable="on"` -- работает для любых IE (должен быть у всех потомков)</li>
+<li>Отмена действий на `mousedown` и `selectstart`:
+
+```js
+elem.onmousedown = elem.onselectstart = function() { 
+  return false;
+};
+```
+
+</li>
+<li>Отмена выделения пост-фактум через функцию `clearSelection()`, описанную выше.</li>
+</ol>
+
+Какой же способ выбирать?
+
+Это зависит от задач и вашего удобства, а также конкретного случая. Все описанные способы работают. Обычно через JavaScript -- наиболее просто и кросс-браузерно.
+
+**В любом случае эти способы не предназначены для защиты от выделения-и-копирования.**
+
+Если уж хочется запретить копирование -- можно использовать событие `oncopy`:
+
+```html
+<!--+ autorun -->
+<div oncopy="alert('Копирование запрещено');return false">
+  Уважаемый копирователь, 
+  почему-то автор хочет заставить вас покопаться в исходном коде этой страницы.
+  Если вы знаете JS или HTML, то скопировать текст не составит для вас проблемы, 
+  ну а если нет, то увы...
+</div>
+```
+
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-track-cursor-movements/solution.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-track-cursor-movements/solution.md
new file mode 100644
index 00000000..46e823fd
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-track-cursor-movements/solution.md
@@ -0,0 +1,7 @@
+Самый простой способ решения этой задачи -- замерять скорость движения курсора. То есть, при `mousemove` вычислять расстояние между текущими координатами и предыдущими, а затем делить на разницу во времени. 
+
+Когда скорость будет очень маленькой, например 5 пикселей за 100 миллисекунд -- можно считать, что курсор остановился (некоторое дрожание может присутствовать) и обработать этот факт.
+
+Обработчик `mousemove` может стоять на всём документе, либо на контейнере, который включает в себя интересующие нас элементы.
+
+
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-track-cursor-movements/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-track-cursor-movements/task.md
new file mode 100644
index 00000000..30ca50ab
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-track-cursor-movements/task.md
@@ -0,0 +1,9 @@
+# Как отследить прекращение движения курсора?
+
+[importance 5]
+
+Представим ситуацию -- посетитель быстро проводит мышью над элементами и останавливается на интересном ему.
+
+Нам надо запустить код (например открыть пункт меню) для того, на котором он остановился, а те элементы, над которыми он быстро провёл мышь, но на которых не остановился -- игнорировать, даже если события мыши на них произошли.
+
+Как бы вы решали такую задачу?
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-behavior-tooltip/solution.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-behavior-tooltip/solution.md
new file mode 100644
index 00000000..33000522
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-behavior-tooltip/solution.md
@@ -0,0 +1 @@
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-behavior-tooltip/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-behavior-tooltip/solution.view/index.html
new file mode 100755
index 00000000..81ad0166
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-behavior-tooltip/solution.view/index.html
@@ -0,0 +1,124 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body {
+    height: 2000px; /* подсказка должна работать независимо от прокрутки */
+  }
+
+  .tooltip {
+    position:absolute;
+    z-index:100; /* подсказка должна перекрывать другие элементы */
+    padding: 10px 20px;
+
+    /* красивости... */
+    border: 1px solid #b3c9ce;
+    border-radius: 4px;
+    text-align: center;
+    font: italic 14px/1.3 arial, sans-serif; 
+    color: #333;
+    background: #fff;
+    box-shadow: 3px 3px 3px rgba(0,0,0,.3);
+  }
+
+</style>
+</head>
+<body>
+
+<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
+<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
+
+<a href="#" id="link" data-tooltip="подсказка длиннее, чем элемент">Короткая ссылка</a>
+<a href="#" id="link2" data-tooltip="HTML<br>подсказка">Еще ссылка</a>
+
+<p>Прокрутите страницу и проверьте, правильно ли показывается подсказка</p>
+
+
+<script>
+
+var showingTooltip;
+
+document.onmouseover = function(e) {
+  e = e || event;
+  var target = e.target || e.srcElement;
+
+  var tooltip = target.getAttribute('data-tooltip');
+  if (!tooltip) return;
+
+  var tooltipElem = document.createElement('div');
+  tooltipElem.className = 'tooltip';
+  tooltipElem.innerHTML = tooltip;
+  document.body.appendChild(tooltipElem);
+
+  var coords = getCoords(target);
+
+  // не вылезаем за пределы экрана
+  var scroll = getPageScroll();
+
+  var left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth)/2^0;
+  if (left < scroll.left) left = scroll.left; // не вылезать за левую границу экрана
+
+  var top = coords.top - tooltipElem.offsetHeight - 5;
+  if (top < scroll.top) {
+    top = coords.top + target.offsetHeight + 5;
+  }
+
+  tooltipElem.style.left = left + 'px';
+  tooltipElem.style.top = top + 'px';
+  
+  showingTooltip = tooltipElem;
+};
+
+document.onmouseout = function(e) {
+
+  if (showingTooltip) {
+    document.body.removeChild(showingTooltip);
+    showingTooltip = null;
+  }
+
+};
+
+
+function getCoords(elem) {
+    var box = elem.getBoundingClientRect();
+    
+    var body = document.body;
+    var docEl = document.documentElement;
+
+    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
+    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+
+    var clientTop = docEl.clientTop || body.clientTop || 0;
+    var clientLeft = docEl.clientLeft || body.clientLeft || 0;
+
+    var top  = box.top +  scrollTop - clientTop;
+    var left = box.left + scrollLeft - clientLeft;
+
+    return { top: Math.round(top), left: Math.round(left) };
+}
+
+function getPageScroll() {
+  if (window.pageXOffset != undefined) {
+    return {
+      left: pageXOffset,
+      top: pageYOffset
+    }
+  }
+
+  var html = document.documentElement;
+  var body = document.body;
+
+  var top = html.scrollTop || body && body.scrollTop || 0;
+  top -= html.clientTop;
+
+  var left = html.scrollLeft || body && body.scrollLeft || 0;
+  left -= html.clientLeft;
+
+  return { top: top, left: left };
+}
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-behavior-tooltip/source.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-behavior-tooltip/source.view/index.html
new file mode 100755
index 00000000..6a3b8114
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-behavior-tooltip/source.view/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body {
+    height: 2000px; /* подсказка должна работать независимо от прокрутки */
+  }
+
+  /* ваши стили */
+
+</style>
+</head>
+<body>
+
+<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
+<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
+
+<a href="#" id="link" data-tooltip="подсказка длиннее, чем элемент">Короткая ссылка</a>
+<a href="#" id="link2" data-tooltip="HTML<br>подсказка">Еще ссылка</a>
+
+<p>Прокрутите страницу и проверьте, правильно ли показывается подсказка</p>
+
+
+<script>
+
+// ваш код
+
+// ------------  вспомогательные функции 
+
+function getCoords(elem) {
+    var box = elem.getBoundingClientRect();
+    
+    var body = document.body;
+    var docEl = document.documentElement;
+
+    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
+    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+
+    var clientTop = docEl.clientTop || body.clientTop || 0;
+    var clientLeft = docEl.clientLeft || body.clientLeft || 0;
+
+    var top  = box.top +  scrollTop - clientTop;
+    var left = box.left + scrollLeft - clientLeft;
+
+    return { top: Math.round(top), left: Math.round(left) };
+}
+
+function getPageScroll() {
+  if (window.pageXOffset != undefined) {
+    return {
+      left: pageXOffset,
+      top: pageYOffset
+    }
+  }
+
+  var html = document.documentElement;
+  var body = document.body;
+
+  var top = html.scrollTop || body && body.scrollTop || 0;
+  top -= html.clientTop;
+
+  var left = html.scrollLeft || body && body.scrollLeft || 0;
+  left -= html.clientLeft;
+
+  return { top: top, left: left };
+}
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-behavior-tooltip/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-behavior-tooltip/task.md
new file mode 100644
index 00000000..5cbb7067
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-behavior-tooltip/task.md
@@ -0,0 +1,36 @@
+# Поведение "подсказка"
+
+[importance 5]
+
+Напишите JS-код, который будет показывать всплывающую подсказку над элементом, если у него есть атрибут `data-tooltip`. 
+
+Например, две ссылки:
+
+```html
+<a href="#" id="link" data-tooltip="подсказка длиннее, чем элемент">
+  Короткая ссылка
+</a>
+
+<a href="#" id="link2" data-tooltip="HTML<br>подсказка">
+  Еще ссылка
+</a>
+```
+
+Результат в ифрейме с документом:
+
+[iframe src="solution" height=200 border=1]
+
+<ul>
+<li>Подсказка должна появляться при наведении на элемент, по центру и на небольшом расстоянии сверху. При уходе курсора с элемента -- исчезать.</li>
+<li>Текст подсказки брать из значения атрибута `data-tooltip`. Это может быть произвольный HTML.</li>
+<li>Оформление подсказки должно задаваться CSS.</li>
+<li>Подсказка не должна вылезать за границы экрана, в том числе если страница частично прокручена. Если нельзя показать сверху -- показывать снизу элемента.</li>
+</ul>
+
+**Если хотите -- в этой задаче для простоты можно считать, что у элемента, на котором "висит" подсказка, нет детей.** 
+
+В исходном документе есть вспомогательные функции: [](#getPageScroll) для определения текущей прокрутки страницы  и [](#getCoords) -- для определения координат элемента относительно страницы.
+
+[edit task src="source"/].
+
+P.S. Эта задача -- на практическое применение ["Шаблона проектирования \"поведение\""](/behavior). 
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/3-behavior-nested-tooltip/solution.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/3-behavior-nested-tooltip/solution.md
new file mode 100644
index 00000000..33000522
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/3-behavior-nested-tooltip/solution.md
@@ -0,0 +1 @@
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/3-behavior-nested-tooltip/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/3-behavior-nested-tooltip/solution.view/index.html
new file mode 100755
index 00000000..cf4e585d
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/3-behavior-nested-tooltip/solution.view/index.html
@@ -0,0 +1,170 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body {
+    height: 2000px; /* подсказка должна работать независимо от прокрутки */
+  }
+
+  .tooltip {
+    position:absolute;
+    z-index:100; /* подсказка должна перекрывать другие элементы */
+    padding: 10px 20px;
+
+    /* красивости... */
+    border: 1px solid #b3c9ce;
+    border-radius: 4px;
+    text-align: center;
+    font: italic 14px/1.3 arial, sans-serif; 
+    color: #333;
+    background: #fff;
+    box-shadow: 3px 3px 3px rgba(0,0,0,.3);
+  }
+
+  #house {
+    margin-top: 50px;
+    width: 400px;
+    border: 1px solid brown;
+  }
+
+  #roof {
+    width: 0; 
+    height: 0; 
+    border-left: 200px solid transparent;
+    border-right: 200px solid transparent;
+    
+    border-bottom: 20px solid brown;
+    margin-top: -20px;
+  }
+
+  p {
+    text-align: justify;
+    margin: 10px 3px;
+  }
+
+</style>
+</head>
+<body>
+
+
+<div data-tooltip="Это – внутренность дома" id="house">
+<div data-tooltip="Это – крыша" id="roof"></div>
+
+  <p>Жили-были на свете три поросёнка. Три брата.</p>
+
+  <p>Все одинакового роста, кругленькие, розовые, с одинаковыми весёлыми хвостиками.</p>
+
+  <p>Даже имена у них были похожи. Звали поросят Ниф-Ниф, Нуф-Нуф и Наф-Наф. Всё лето они кувыркались в зелёной траве, грелись на солнышке, нежились в лужах.</p>
+
+  <p>Но вот наступила осень. <a href="http://ru.wikipedia.org/wiki/Три_поросёнка" data-tooltip="Читать дальше&hellip;">Наведи на меня</a></p>
+
+</div>
+
+<script>
+
+var showingTooltip;
+
+document.onmouseover = function(e) {
+  e = e || event;
+  var target = e.target || e.srcElement;
+
+  // ВАЖНО: mouseover может сработать сразу на потомке
+  // минуя родителя (при быстром движении мышью)
+  
+  // пройти вверх до первого элемента с data-tooltip
+  while (target !== this) {
+    var tooltip = target.getAttribute('data-tooltip');
+    if (tooltip) break;
+    target = target.parentNode;
+  }
+
+  if (!tooltip) return;
+
+  // показать и запомнить подсказку
+  showingTooltip = showTooltip(tooltip, target);  
+}
+
+document.onmouseout = function() {
+  // возможно такое, что mouseout сработал, а мы все еще внутри элемента (всплытие)
+  // но в этом случае сразу же будет и mouseover, 
+  // то есть подсказка будет уничтожена и тут же показана заново
+  // 
+  // это лишние расходы, их можно избежать дополнительными проверками
+  if (showingTooltip) {
+    document.body.removeChild(showingTooltip);
+    showingTooltip = false;
+  }
+
+}
+
+
+function showTooltip(text, elem) {
+  var tooltipElem = document.createElement('div');
+  tooltipElem.className = 'tooltip';
+  tooltipElem.innerHTML = text;
+  document.body.appendChild(tooltipElem);
+
+  var coords = getCoords(elem);
+  
+  // не вылезаем за пределы экрана
+  var scroll = getPageScroll();
+
+  var left = coords.left + (elem.offsetWidth - tooltipElem.offsetWidth)/2^0;
+  if (left < scroll.left) left = scroll.left; // не вылезать за левую границу экрана
+
+  var top = coords.top - tooltipElem.offsetHeight - 5;
+  if (top < scroll.top) {
+    top = coords.top + elem.offsetHeight + 5;
+  }
+
+  tooltipElem.style.left = left + 'px';
+  tooltipElem.style.top = top + 'px';
+
+  return tooltipElem;
+}
+
+
+
+function getCoords(elem) {
+    var box = elem.getBoundingClientRect();
+    
+    var body = document.body;
+    var docEl = document.documentElement;
+
+    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
+    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+
+    var clientTop = docEl.clientTop || body.clientTop || 0;
+    var clientLeft = docEl.clientLeft || body.clientLeft || 0;
+
+    var top  = box.top +  scrollTop - clientTop;
+    var left = box.left + scrollLeft - clientLeft;
+
+    return { top: Math.round(top), left: Math.round(left) };
+}
+
+function getPageScroll() {
+  if (window.pageXOffset != undefined) {
+    return {
+      left: pageXOffset,
+      top: pageYOffset
+    }
+  }
+
+  var html = document.documentElement;
+  var body = document.body;
+
+  var top = html.scrollTop || body && body.scrollTop || 0;
+  top -= html.clientTop;
+
+  var left = html.scrollLeft || body && body.scrollLeft || 0;
+  left -= html.clientLeft;
+
+  return { top: top, left: left };
+}
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/3-behavior-nested-tooltip/source.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/3-behavior-nested-tooltip/source.view/index.html
new file mode 100755
index 00000000..b573bc2a
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/3-behavior-nested-tooltip/source.view/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body {
+    height: 2000px; /* подсказка должна работать при прокрутке */
+  }
+
+  #house {
+    margin-top: 50px;
+    width: 400px;
+    border: 1px solid brown;
+  }
+
+  #roof {
+    width: 0; 
+    height: 0; 
+    border-left: 200px solid transparent;
+    border-right: 200px solid transparent;
+    
+    border-bottom: 20px solid brown;
+    margin-top: -20px;
+  }
+
+  p {
+    text-align: justify;
+    margin: 10px 3px;
+  }
+
+</style>
+</head>
+<body>
+
+
+<div data-tooltip="Это – внутренность дома" id="house">
+<div data-tooltip="Это – крыша" id="roof"></div>
+
+  <p>Жили-были на свете три поросёнка. Три брата.</p>
+
+  <p>Все одинакового роста, кругленькие, розовые, с одинаковыми весёлыми хвостиками.</p>
+
+  <p>Даже имена у них были похожи. Звали поросят Ниф-Ниф, Нуф-Нуф и Наф-Наф. Всё лето они кувыркались в зелёной траве, грелись на солнышке, нежились в лужах.</p>
+
+  <p>Но вот наступила осень. <a href="http://ru.wikipedia.org/wiki/Три_поросёнка" data-tooltip="Читать дальше&hellip;">Наведи на меня</a></p>
+
+</div>
+
+<script>
+
+
+// --------- вспомогательные функции ---------
+
+function getCoords(elem) {
+    var box = elem.getBoundingClientRect();
+    
+    var body = document.body;
+    var docEl = document.documentElement;
+
+    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
+    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+
+    var clientTop = docEl.clientTop || body.clientTop || 0;
+    var clientLeft = docEl.clientLeft || body.clientLeft || 0;
+
+    var top  = box.top +  scrollTop - clientTop;
+    var left = box.left + scrollLeft - clientLeft;
+
+    return { top: Math.round(top), left: Math.round(left) };
+}
+
+function getPageScroll() {
+  if (window.pageXOffset != undefined) {
+    return {
+      left: pageXOffset,
+      top: pageYOffset
+    }
+  }
+
+  var html = document.documentElement;
+  var body = document.body;
+
+  var top = html.scrollTop || body && body.scrollTop || 0;
+  top -= html.clientTop;
+
+  var left = html.scrollLeft || body && body.scrollLeft || 0;
+  left -= html.clientLeft;
+
+  return { top: top, left: left };
+}
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/3-behavior-nested-tooltip/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/3-behavior-nested-tooltip/task.md
new file mode 100644
index 00000000..3bff31d0
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/3-behavior-nested-tooltip/task.md
@@ -0,0 +1,26 @@
+# Поведение "вложенная подсказка"
+
+[importance 4]
+
+Напишите JS-код, который будет показывать всплывающую подсказку над элементом, если у него есть атрибут `data-tooltip`. 
+
+Условие аналогично задаче [](/task/behavior-tooltip), но здесь необходима поддержка вложенных элементов. При наведении показывается самая вложенная подсказка.
+
+Например:
+
+```html
+<div data-tooltip="Это – внутренность дома" id="house">
+  <div data-tooltip="Это – крыша" id="roof"></div>
+  ...
+  <a href="http://ru.wikipedia.org/wiki/Три_поросёнка" data-tooltip="Читать дальше">Наведи на меня</a>
+</div>
+```
+
+Результат в ифрейме с документом:
+
+[iframe src="solution" height=300 border=1]
+
+Исходный документ содержит вспомогательные функции [](#getPageScroll) и [](#getCoords).
+Вы также можете использовать как заготовку решение задачи [](/task/behavior-tooltip).
+
+[edit src="source" task/]
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
new file mode 100644
index 00000000..7fa11b9b
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -0,0 +1,172 @@
+# Мышь: движение mouseover/out, mouseenter/leave
+
+В этой главе мы рассмотрим события, возникающие при движении мыши над элементами.
+[cut]
+## События mouseover/mouseout, свойство relatedTarget   
+
+Событие `mouseover` происходит, когда мышь появляется над элементом, а `mouseout` -- когда уходит из него.
+
+При этом мы можем узнать, с какого элемента пришла (или на какой ушла) мышь, используя дополнительное свойство `relatedTarget`.
+
+В случае `mouseover` оно содержит элемент, *с которого* пришла мышь, а для `mouseout` -- *на который* ушла.
+
+В примере ниже вы можете наглядно посмотреть события `mouseover/out`, возникающие на всех элементах. 
+
+[example src="mouseoverout" height=220]
+
+Можно заметить, что в некоторых случаях значение `relatedTarget` может быть `null`. Это вполне нормально и означает, что мышь пришла из-за пределов окна (или ушла за окно).
+
+## Частота событий mousemove и mouseover/out   
+
+Событие `mousemove` срабатывает при передвижении мыши. Но это не значит, что каждый пиксель экрана порождает отдельное событие!
+
+События `mousemove` и `mouseover/mouseout` срабатывают так часто, насколько это позволяет внутренняя система взаимодействия с мышью браузера.
+
+Это означает, что если вы двигаете мышью очень быстро, то DOM-элементы, через которые мышь проходит на большой скорости, могут быть пропущены.
+
+К примеру:
+<ul>
+<li>Курсор может быстро перейти *над* родительским элементом в дочерний, при этом *не вызвав событий на родителе*, как будто он через родителя никогда не проходил.</li>
+<li>Курсор может быстро выйти из дочернего элемента без генерации событий на родителе.</li>
+</ul>
+
+Попробуйте увидеть это "вживую" на тестовом стенде ниже.
+
+Его HTML представляет собой два вложенных `div'а`.
+
+Молниеносно проведите мышью над вложенными элементами. При этом может не быть ни одного события или их получит только красный `div`, а может быть только зеленый.
+
+А еще попробуйте зайти курсором мыши на красный `div` и потом быстро вывести мышь из него куда-нибудь сквозь зеленый. Если движение мыши достаточно быстрое, то родительский элемент будет проигнорирован.
+
+[example height=360 src="mouseoverout-fast"]
+
+
+Важно иметь в виду эту особенность событий, чтобы не написать код, который рассчитан на последовательный проход над элементами.
+## "Лишний" mouseout при уходе на потомка
+
+Представьте ситуацию -- курсор зашёл на элемент. Сработал `mouseover` на нём. Потом курсор идёт на дочерний... И, оказывается, на элементе-родителе при этом происходит `mouseout`! Как будто курсор с него ушёл, хотя он всего лишь перешёл на потомка.
+
+**При переходе на потомка срабатывает `mouseout` на родителе.**
+
+Это кажется странным, но легко объяснимо.
+
+**Согласно браузерной логике, курсор мыши может быть только над *одним* элементом -- самым глубоким в DOM (и верхним по z-index).**
+
+Так что если он перешел куда-нибудь, то автоматически ушёл с предыдущего элемента. Всё просто.
+
+К чему это приводит на практике, можно увидеть в примере ниже. В нём красный `div` вложен в синий. На синем стоит обработчик, который записывает его `mouseover/mouseout`. 
+
+Зайдите на синий элемент, а потом переведите мышь на красный -- и наблюдайте за событиями:
+
+[example height=360 src="mouseoverout-child"]
+
+<ol>
+<li>При заходе на синий -- на нём сработает `mouseover [target: blue]`.</li>
+<li>При переходе с синего на красный -- будет `mouseout [target: blue]` -- уход с родителя.</li>
+<li>...И тут же `mouseover [target: red]` -- как ни странно, "обратный переход" на родителя.</li>
+</ol> 
+
+На самом деле, обратного перехода нет. Событие `mouseover` сработало на потомке (видно по `target: red`), а затем всплыло.
+
+**То есть, у кода создаётся впечатление, что курсор ушёл `mouseout` с родителя, а затем тут же перешёл `mouseover` на него (за счёт всплытия `mouseover` с потомка).**
+
+Как это влияет на его поведение? 
+
+Если действия при наведении и уходе курсора с родителя простые, например скрытие/показ подсказки, то можно вообще ничего не заметить. Ведь события происходят одновременно, подсказка будет скрыта по `mouseout` и тут же показана по `mouseover`.
+
+Если же происходит что-то более сложное, то бывает важно отследить момент "настоящего" ухода, то есть понять, когда элемент зашёл на родителя, а когда ушёл -- без учёта переходов по дочерним элементам.
+
+Для этого можно использовать события `mouseenter/mouseleave`, которые мы рассмотрим далее.
+
+## События mouseenter и mouseleave
+
+События `mouseenter/mouseleave` похожи на `mouseover/mouseout`. Они тоже срабатывают, когда курсор заходит на элемент и уходит с него, но с двумя отличиями.
+
+<ol>
+<li>При переходе на потомка курсор не уходит с родителя.</li>
+<li>События `mouseenter/mouseleave` не всплывают.</li>
+</ol>
+
+Эти события более интуитивно понятны. Курсор заходит на элемент -- срабатывает `mouseenter`, а затем -- неважно, куда он внутри него переходит, `mouseleave` будет, когда курсор окажется за пределами элемента.
+
+Вы можете увидеть, как они работают проведя курсором над голубым `DIV'ом` ниже. Обработчик стоит только на внешнем, синем элементе. Обратите внимание -- лишних событий при переходе на красного потомка нет!
+
+[example height=340 src="mouseleave"]
+
+## Делегирование -- проблема mouseenter/leave
+
+События `mouseenter/leave` более наглядны и понятны, но они не всплывают, а значит с ними нельзя использовать делегирование.
+
+Представьте себе, что нам нужно обработать вход/выход мыши для ячеек таблицы. А в таблице таких ячеек тысяча. 
+
+Естественное решение -- поставить обработчик на верхний элемент `<table>` и ловить все события в нём. Но события `mouseenter/leave` не всплывают, а срабатывают именно на том элементе, на котором стоит обработчик и только на нём.
+
+Это легко видеть в примере ниже: обработчики `mouseenter/leave` стоят на `<table>` и сработают при входе-выходе из таблицы, получить из них какую-то информацию о переходах по её ячейкам не представляется возможным:
+
+[example height=480 src="mouseleave-table"]
+
+Не беда -- воспользуемся `mouseover/mouseout`.
+
+Но мы хотели бы, чтобы наши действия выполнялись только при входе-выходе в ячейку, без учета переходов внутри самих ячеек. 
+
+Если нужно делегирование -- нужно использовать `mouseover/out`.
+
+Получится так:
+
+[example height=450 src="mouseenter-mouseleave-delegation"]
+
+В этом примере код обработчиков выглядит так:
+
+```js
+table.onmouseover = function(event) {
+  var target = event.target; 
+  target.style.background = 'pink';
+};
+
+table.onmouseout = function(event) {
+  var target = event.target; 
+  target.style.background = '';
+};
+```
+
+Пока что они срабатывают на всём подряд. Их нужно фильтровать:
+<ul>
+<li>Вход-выход срабатывает на любых элементах, а нам нужны именно ячейки таблицы. 
+
+Для этого по `mouseover` нужно проверять, находится ли `event.target` был внутри `<td>`, это стандартная проверка при делегировании.</li>
+<li>Лишними для нас будут `mouseover/mouseout`, связанные с переходом на дочерние элементы внутри `<td>`. Проверить их можно по `event.target/event.relatedTarget`.</li>
+</ul>
+
+Детали кода вы можете посмотреть в примере ниже, который демонстрирует этот подход:
+
+[example height=450 src="mouseenter-mouseleave-delegation-2"]
+
+Попробуйте по-разному, быстро или медленно заходить и выходить в ячейки таблицы. Обработчики `mouseover/mouseout` стоят на `table`, но при помощи делегирования корректно обрабатывают вход-выход.
+
+## Особенности IE8-
+
+В IE8- нет свойства `relatedTarget`. Вместо него используется `fromElement` для `mouseover` и `toElement` для `mouseout`.
+
+Можно "исправить" несовместимость с `relatedTarget` так:
+
+```js
+function fixRelatedTarget(e) {
+  if (e.relatedTarget === undefined) {
+    if (e.type == 'mouseover') e.relatedTarget = e.fromElement;
+    if (e.type == 'mouseout') e.relatedTarget = e.toElement;
+  }
+}
+```
+
+## Итого
+
+У `mouseover, mousemove, mouseout` есть следующие особенности:
+<ol>
+<li>События `mouseover` и `mouseout` -- единственные, у которых есть вторая цель: `relatedTarget` (`toElement/fromElement` в IE).</li>
+<li>Событие `mouseout` срабатывает, когда мышь уходит с родительского элемента на дочерний. Используйте `mouseenter/mouseleave` или фильтруйте их, чтобы избежать излишнего реагирования.</li>
+<li>При быстром движении мыши события `mouseover, mousemove, mouseout` могут пропускать промежуточные элементы. Мышь может моментально возникнуть над потомком, миновав при этом его родителя.</li>
+</ol>
+
+
+
+
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html
new file mode 100755
index 00000000..3e9035f5
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+  
+        
+    <table id="table">
+      <tr>
+        <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+      </tr>
+      <tr>
+        <td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
+        </td>
+        <td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
+        </td>
+        <td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
+        </td>
+      </tr>
+      <tr>  
+          <td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
+        </td>
+        <td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
+        </td>
+        <td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
+        </td>
+      </tr>
+      <tr>  
+          <td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
+        </td>
+        <td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
+        </td>
+        <td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
+        </td>
+      </tr>
+      
+    </table>
+
+    <textarea id="text"></textarea>
+
+    <input type="button" onclick="text.value=''" value="Очистить">
+
+        
+    <script src="script.js"></script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
new file mode 100755
index 00000000..48186c87
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
@@ -0,0 +1,47 @@
+
+// элемент TD, внутри которого сейчас курсор
+var currentElem = null;
+
+table.onmouseover = function(event) {
+  if (currentElem) {
+    // перед тем, как зайти в новый элемент, курсор всегда выходит из предыдущего
+    // 
+    // если мы еще не вышли, значит это переход внутри элемента, отфильтруем его
+    return;
+  }
+
+  // посмотрим, куда пришёл курсор
+  var target = event.target; 
+
+  // уж не на TD ли?
+  while (target != this) {
+    if (target.tagName == 'TD') break;
+    target = target.parentNode;
+  }
+  if (target == this) return;
+
+  // да, элемент перешёл внутрь TD!
+  currentElem = target;
+  target.style.background = 'pink';
+};
+
+
+table.onmouseout = function(event) {
+  // если курсор и так снаружи - игнорируем это событие
+  if (!currentElem) return;
+
+  // произошёл уход с элемента - проверим, куда, может быть на потомка?
+  var relatedTarget = event.relatedTarget;
+  if (relatedTarget) { // может быть relatedTarget = null
+    while(relatedTarget) {
+      // идём по цепочке родителей и проверяем, 
+      // если переход внутрь currentElem - игнорируем это событие
+      if (relatedTarget == currentElem) return;
+      relatedTarget = relatedTarget.parentNode;
+    }
+  }
+
+  // произошло событие mouseout, курсор ушёл
+  currentElem.style.background = '';
+  currentElem = null;
+};
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/style.css
new file mode 100755
index 00000000..707de6db
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/style.css
@@ -0,0 +1,64 @@
+
+#text {
+  display: block;
+  height:100px;
+  width:400px;
+}
+
+#table th {
+  text-align: center;
+  font-weight: bold;  
+}
+
+#table td {
+  width: 150px;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: bottom;
+  padding-top: 5px;
+  padding-bottom: 12px;
+}
+
+#table .nw {
+  background: #999;
+}
+
+#table .n {
+  background: #03f;
+  color: #fff;
+}
+
+#table .ne {
+  background: #ff6;
+}
+
+#table .w {
+  background: #ff0;
+}
+#table .c {
+  background: #60c;
+  color: #fff;
+}
+#table .e {
+  background: #09f;
+  color: #fff;
+}
+
+#table .sw {
+  background: #963;
+  color: #fff;
+}
+
+#table .s {
+  background: #f60;
+  color: #fff;
+}
+#table .se {
+  background: #0c3;
+  color: #fff;
+}
+
+#table .highlight {
+  background: red;
+}
+
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/index.html
new file mode 100755
index 00000000..3e9035f5
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+  
+        
+    <table id="table">
+      <tr>
+        <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+      </tr>
+      <tr>
+        <td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
+        </td>
+        <td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
+        </td>
+        <td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
+        </td>
+      </tr>
+      <tr>  
+          <td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
+        </td>
+        <td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
+        </td>
+        <td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
+        </td>
+      </tr>
+      <tr>  
+          <td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
+        </td>
+        <td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
+        </td>
+        <td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
+        </td>
+      </tr>
+      
+    </table>
+
+    <textarea id="text"></textarea>
+
+    <input type="button" onclick="text.value=''" value="Очистить">
+
+        
+    <script src="script.js"></script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/script.js
new file mode 100755
index 00000000..4186e414
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/script.js
@@ -0,0 +1,12 @@
+
+table.onmouseover = function(event) {
+  var target = event.target; 
+  target.style.background = 'pink';
+  text.value += "mouseover " + target.tagName + "\n";
+};
+
+table.onmouseout = function(event) {
+  var target = event.target; 
+  target.style.background = '';
+  text.value += "mouseout " + target.tagName + "\n";
+};
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/style.css
new file mode 100755
index 00000000..707de6db
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/style.css
@@ -0,0 +1,64 @@
+
+#text {
+  display: block;
+  height:100px;
+  width:400px;
+}
+
+#table th {
+  text-align: center;
+  font-weight: bold;  
+}
+
+#table td {
+  width: 150px;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: bottom;
+  padding-top: 5px;
+  padding-bottom: 12px;
+}
+
+#table .nw {
+  background: #999;
+}
+
+#table .n {
+  background: #03f;
+  color: #fff;
+}
+
+#table .ne {
+  background: #ff6;
+}
+
+#table .w {
+  background: #ff0;
+}
+#table .c {
+  background: #60c;
+  color: #fff;
+}
+#table .e {
+  background: #09f;
+  color: #fff;
+}
+
+#table .sw {
+  background: #963;
+  color: #fff;
+}
+
+#table .s {
+  background: #f60;
+  color: #fff;
+}
+#table .se {
+  background: #0c3;
+  color: #fff;
+}
+
+#table .highlight {
+  background: red;
+}
+
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html
new file mode 100755
index 00000000..3e9035f5
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+  
+        
+    <table id="table">
+      <tr>
+        <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+      </tr>
+      <tr>
+        <td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
+        </td>
+        <td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
+        </td>
+        <td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
+        </td>
+      </tr>
+      <tr>  
+          <td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
+        </td>
+        <td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
+        </td>
+        <td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
+        </td>
+      </tr>
+      <tr>  
+          <td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
+        </td>
+        <td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
+        </td>
+        <td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
+        </td>
+      </tr>
+      
+    </table>
+
+    <textarea id="text"></textarea>
+
+    <input type="button" onclick="text.value=''" value="Очистить">
+
+        
+    <script src="script.js"></script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/script.js
new file mode 100755
index 00000000..4106a76b
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/script.js
@@ -0,0 +1,7 @@
+
+table.onmouseenter = table.onmouseleave = log;
+
+function log(event) {
+  text.value += event.type+' [target: '+event.target.tagName+']\n';
+  text.scrollTop = text.scrollHeight;
+}
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/style.css
new file mode 100755
index 00000000..707de6db
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/style.css
@@ -0,0 +1,64 @@
+
+#text {
+  display: block;
+  height:100px;
+  width:400px;
+}
+
+#table th {
+  text-align: center;
+  font-weight: bold;  
+}
+
+#table td {
+  width: 150px;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: bottom;
+  padding-top: 5px;
+  padding-bottom: 12px;
+}
+
+#table .nw {
+  background: #999;
+}
+
+#table .n {
+  background: #03f;
+  color: #fff;
+}
+
+#table .ne {
+  background: #ff6;
+}
+
+#table .w {
+  background: #ff0;
+}
+#table .c {
+  background: #60c;
+  color: #fff;
+}
+#table .e {
+  background: #09f;
+  color: #fff;
+}
+
+#table .sw {
+  background: #963;
+  color: #fff;
+}
+
+#table .s {
+  background: #f60;
+  color: #fff;
+}
+#table .se {
+  background: #0c3;
+  color: #fff;
+}
+
+#table .highlight {
+  background: red;
+}
+
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html
new file mode 100755
index 00000000..a493f58e
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+  
+    <div id="blue" onmouseenter="log(event)" onmouseleave="log(event)">
+      <div id="red"></div>
+    </div>
+
+    <textarea id="text"></textarea>
+    <input type="button" onclick="text.value=''" value="Очистить">
+    
+    <script src="script.js"></script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/script.js
new file mode 100755
index 00000000..7b687c13
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/script.js
@@ -0,0 +1,5 @@
+
+function log(event) {
+  text.value += event.type+' [target: '+event.target.className+']\n';
+  text.scrollTop = text.scrollHeight;
+}
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/style.css
new file mode 100755
index 00000000..2aa0a6b0
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/style.css
@@ -0,0 +1,21 @@
+#blue {
+  background:blue;
+  width:160px;
+  height:160px;
+  position:relative;
+}
+  
+#red {
+  background:red;
+  width:70px;
+  height:70px;
+  position:absolute;
+  left:20px;
+  top:20px;
+}
+
+#text {
+  display: block;
+  height:100px;
+  width:400px;
+}
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html
new file mode 100755
index 00000000..ea4c9677
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  
+<div class="blue" onmouseover="mouselog(event)" onmouseout="mouselog(event)">
+    <div class="red"></div>
+</div>
+
+<textarea id="text">mouseover [target: blue]
+mouseout [target: blue]
+mouseover [target: red]
+</textarea>
+<input type="button" onclick="text.value=''" value="Очистить">
+
+<script src="script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/script.js
new file mode 100755
index 00000000..cf4ff058
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/script.js
@@ -0,0 +1,5 @@
+
+function mouselog(event) {
+  text.value += event.type+' [target: '+event.target.className+']\n'
+  text.scrollTop = text.scrollHeight
+}
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/style.css
new file mode 100755
index 00000000..08d3da10
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/style.css
@@ -0,0 +1,21 @@
+.blue {
+  background:blue;
+  width:160px;
+  height:160px;
+  position:relative;
+}
+
+.red {
+  background:red;
+  width:100px;
+  height:100px;
+  position:absolute;
+  left:30px;
+  top:30px;
+}
+
+textarea {
+  height:100px;
+  width:400px;
+  display: block;
+}
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html
new file mode 100755
index 00000000..fa2bdb54
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div id="green">
+    <div id="red">Тест</div>
+  </div>
+
+  <input onclick="clearText()" value="Очистить" type="button"> 
+
+  <textarea id="text"></textarea>
+
+  <script src="script.js"></script>
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/script.js
new file mode 100755
index 00000000..4caa5e63
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/script.js
@@ -0,0 +1,46 @@
+ green.onmouseover = green.onmouseout = green.onmousemove = handler;
+ 
+ function handler(event) {
+   var type = event.type;
+   while (type < 11) type += ' ';
+
+   log(type + " target=" + event.target.id)
+   return false;
+ }
+
+
+function clearText() {
+  text.value = "";
+  lastMessage = "";
+}
+
+var lastMessageTime = 0;
+var lastMessage = "";
+var repeatCounter = 1;
+function log(message) {
+  if (lastMessageTime == 0) lastMessageTime = new Date();
+
+  var time = new Date();
+
+  if (time - lastMessageTime > 500) {
+    message = '------------------------------\n' + message;
+  }
+
+  if (message === lastMessage) {
+    repeatCounter++;
+    if (repeatCounter == 2) {
+      text.value = text.value.trim() + ' x 2\n';
+    } else {
+      text.value = text.value.slice(0, text.value.lastIndexOf('x') + 1) + repeatCounter + "\n";
+    }
+
+  } else {
+    repeatCounter = 1;
+    text.value += message + "\n";
+  }
+
+  text.scrollTop = text.scrollHeight;
+
+  lastMessageTime = time;
+  lastMessage = message;
+}
\ No newline at end of file
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/style.css
new file mode 100755
index 00000000..d88f845f
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/style.css
@@ -0,0 +1,25 @@
+
+
+#green {
+  height: 50px;
+  width: 160px;
+  background: green;
+}
+
+#red {
+  height: 20px;
+  width: 110px;
+  background: red;
+  color: white;
+  font-weight: bold;
+  padding: 5px;
+  text-align: center;
+  margin: 20px;
+}
+
+#text {
+  font-size: 12px;
+  height: 200px;
+  width: 360px;
+  display: block;
+}
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/index.html
new file mode 100755
index 00000000..e3fd558c
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div class="smiley-green">
+  <div class="left-eye"></div>
+  <div class="right-eye"></div>
+  <div class="smile"></div>
+  </div>
+  
+  <div class="smiley-yellow">
+  <div class="left-eye"></div>
+  <div class="right-eye"></div>
+  <div class="smile"></div>
+  </div>
+  
+  <div class="smiley-red">
+  <div class="left-eye"></div>
+  <div class="right-eye"></div>
+  <div class="smile"></div>
+  </div>
+  
+  <textarea id="log" style="width:400px;height:100px">Здесь будут события и relatedTarget
+</textarea>
+
+
+  <script src="script.js"></script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/script.js
new file mode 100755
index 00000000..ce86e0b2
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/script.js
@@ -0,0 +1,21 @@
+document.body.onmouseover = document.body.onmouseout = handler;
+
+function handler(event) {
+
+  function str(el) {
+    if (!el) return "null"
+    return el.className || el.tagName;
+  }
+
+  log.value += event.type + ': ' +
+  'target=' + str(event.target) + 
+  ', relatedTarget=' + str(event.relatedTarget) + "\n";
+  log.scrollTop = 1e9;
+  
+  if (event.type == 'mouseover') {
+    event.target.style.background = 'pink'
+  }
+  if (event.type == 'mouseout') {
+    event.target.style.background = ''
+  }
+}
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/style.css
new file mode 100755
index 00000000..6ed7a364
--- /dev/null
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/style.css
@@ -0,0 +1,151 @@
+
+body, html { 
+  height: 130px; 
+  margin: 0; 
+  padding: 0; 
+}
+
+[class^="smiley-"]{
+  display: inline-block;
+  width:70px;
+  height:70px;
+  border-radius:50%;
+  margin-right:20px;
+}
+.smiley-green{
+  background:#a9db7a;
+  border:5px solid #92c563;
+  position: relative;
+}
+.smiley-green .left-eye{
+  width:18%;
+  height:18%;
+  background:#84b458;
+  position:relative;
+  top:29%;
+  left:22%;
+  border-radius:50%;
+  float: left;
+}
+.smiley-green .right-eye{
+  width:18%;
+  height:18%;
+  border-radius:50%;
+  position:relative;
+  background:#84b458;
+  top: 29%;
+  right: 22%;
+  float: right;
+}
+.smiley-green .smile{
+  position: absolute;
+  top:67%;
+  left:16.5%;
+  width:70%;
+  height:20%;
+  overflow: hidden;
+}
+ .smiley-green .smile:after, .smiley-green .smile:before{
+  content:"";
+  position:absolute;
+  top:-50%;
+  left:0%;
+  border-radius:50%;
+  background:#84b458;
+  height:100%;
+  width:97%;
+ }
+ .smiley-green .smile:after{
+  background: #84b458;
+  height: 80%;
+  top: -40%;
+  left: 0%;
+}
+
+
+.smiley-yellow{
+  background:#eed16a;
+  border:5px solid #dbae51;
+  position: relative;
+}
+.smiley-yellow .left-eye{
+  width:18%;
+  height:18%;
+  background:#dba652;
+  position:relative;
+  top:29%;
+  left:22%;
+  border-radius:50%;
+  float: left;
+}
+.smiley-yellow .right-eye{
+  width:18%;
+  height:18%;
+  border-radius:50%;
+  position:relative;
+  background:#dba652;
+  top: 29%;
+  right: 22%;
+  float: right;
+}
+.smiley-yellow .smile{
+  position: absolute;
+  top:67%;
+  left:19%;
+  width:65%;
+  height:14%;
+  background:#dba652;
+  overflow: hidden;
+  border-radius:8px;
+}
+
+
+.smiley-red{
+  background:#ee9295;
+  border:5px solid #e27378;
+  position: relative;
+}
+.smiley-red .left-eye{
+  width:18%;
+  height:18%;
+  background:#d96065;
+  position:relative;
+  top:29%;
+  left:22%;
+  border-radius:50%;
+  float: left;
+}
+.smiley-red .right-eye{
+  width:18%;
+  height:18%;
+  border-radius:50%;
+  position:relative;
+  background:#d96065;
+  top: 29%;
+  right: 22%;
+  float: right;
+}
+.smiley-red .smile{
+  position: absolute;
+  top:57%;
+  left:16.5%;
+  width:70%;
+  height:20%;
+  overflow: hidden;
+}
+ .smiley-red .smile:after, .smiley-red .smile:before{
+  content:"";
+  position:absolute;
+  top:50%;
+  left:0%;
+  border-radius:50%;
+  background:#d96065;
+  height:100%;
+  width:97%;
+ }
+ .smiley-red .smile:after{
+  background: #d96065;
+  height: 80%;
+  top: 60%;
+  left: 0%;
+}
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-mousewheel/1-scale-with-mouse-wheel/solution.md b/2-ui/3-event-details/4-mousewheel/1-scale-with-mouse-wheel/solution.md
new file mode 100644
index 00000000..59e98690
--- /dev/null
+++ b/2-ui/3-event-details/4-mousewheel/1-scale-with-mouse-wheel/solution.md
@@ -0,0 +1,3 @@
+Решение использует кросс-браузерный код назначения обработчика `onwheel` на элемент и `style.transform`.
+
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-mousewheel/1-scale-with-mouse-wheel/solution.view/index.html b/2-ui/3-event-details/4-mousewheel/1-scale-with-mouse-wheel/solution.view/index.html
new file mode 100755
index 00000000..b176c8db
--- /dev/null
+++ b/2-ui/3-event-details/4-mousewheel/1-scale-with-mouse-wheel/solution.view/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+</head>
+<body>
+
+<p id="text" style="margin: 40px; width: 200px; height:60px; border: 1px solid red">
+При прокрутке колёсика мыши над этим элементом, он будет масштабироваться.
+</p>
+<script>
+function addOnWheel(elem, handler) {
+  if (elem.addEventListener) {
+    if ('onwheel' in document) {
+      // IE9+, FF17+
+      elem.addEventListener ("wheel", handler, false);
+    } else if ('onmousewheel' in document) {
+      // устаревший вариант события
+      elem.addEventListener ("mousewheel", handler, false);
+    } else {
+      // 3.5 <= Firefox < 17, более старое событие DOMMouseScroll пропустим
+      elem.addEventListener ("MozMousePixelScroll", handler, false);
+    }
+  } else { // IE<9
+    text.attachEvent ("onmousewheel", handler);
+  }
+}
+
+var scale = 1;
+
+addOnWheel(text, function(e) {
+
+  var delta = e.deltaY || e.detail || e.wheelDelta;
+  
+  // отмасштабируем при помощи CSS
+  if (delta > 0) scale += 0.05; 
+  else scale -= 0.05;
+
+  text.style.transform = text.style.WebkitTransform = text.style.MsTransform = 'scale(' + scale + ')';
+
+  // отменим прокрутку
+  e.preventDefault();
+});
+
+</script>
+
+</body>
+
+</html>
+</html>
diff --git a/2-ui/3-event-details/4-mousewheel/1-scale-with-mouse-wheel/task.md b/2-ui/3-event-details/4-mousewheel/1-scale-with-mouse-wheel/task.md
new file mode 100644
index 00000000..660f9e88
--- /dev/null
+++ b/2-ui/3-event-details/4-mousewheel/1-scale-with-mouse-wheel/task.md
@@ -0,0 +1,15 @@
+# Масштабирование колёсиком мыши
+
+[importance 5]
+
+Сделайте так, чтобы при прокрутке колёсиком мыши над элементом, он масштабировался.
+
+Масштабирование обеспечивайте при помощи свойства CSS transform:
+
+```js
+// увеличение в 1.5 раза
+elem.style.transform = elem.style.WebkitTransform = elem.style.MsTransform = 'scale(1.5)';
+```
+
+Результат в iframe:
+[iframe link border="1" src="solution" height="160"]
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-mousewheel/2-no-doc-scroll/solution.md b/2-ui/3-event-details/4-mousewheel/2-no-doc-scroll/solution.md
new file mode 100644
index 00000000..33000522
--- /dev/null
+++ b/2-ui/3-event-details/4-mousewheel/2-no-doc-scroll/solution.md
@@ -0,0 +1 @@
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-mousewheel/2-no-doc-scroll/solution.view/fix-textarea-scroll.js b/2-ui/3-event-details/4-mousewheel/2-no-doc-scroll/solution.view/fix-textarea-scroll.js
new file mode 100755
index 00000000..e4bcc775
--- /dev/null
+++ b/2-ui/3-event-details/4-mousewheel/2-no-doc-scroll/solution.view/fix-textarea-scroll.js
@@ -0,0 +1,14 @@
+document.onwheel = function(e) {
+  if (e.target.tagName != 'TEXTAREA') return;
+  var area = e.target;
+
+  var delta = e.deltaY || e.detail || e.wheelDelta;
+
+  if (delta < 0 && area.scrollTop == 0) {
+    e.preventDefault();
+  }
+
+  if (delta > 0 && area.scrollHeight - area.clientHeight - area.scrollTop <= 1) {
+    e.preventDefault();
+  }
+};
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-mousewheel/2-no-doc-scroll/solution.view/index.html b/2-ui/3-event-details/4-mousewheel/2-no-doc-scroll/solution.view/index.html
new file mode 100755
index 00000000..d9fcd846
--- /dev/null
+++ b/2-ui/3-event-details/4-mousewheel/2-no-doc-scroll/solution.view/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="fix-textarea-scroll.js"></script>
+</head>
+<body style="height: 1000px; position: relative">
+
+<header>
+  <h2>Начало документа</h2>
+</header>
+
+<textarea cols="80" rows="10">
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+</textarea>
+
+
+<footer style="position: absolute; bottom: 0">
+Конец документа.
+</footer>
+</body>
+</html>
diff --git a/2-ui/3-event-details/4-mousewheel/2-no-doc-scroll/source.view/index.html b/2-ui/3-event-details/4-mousewheel/2-no-doc-scroll/source.view/index.html
new file mode 100755
index 00000000..34c5bfa3
--- /dev/null
+++ b/2-ui/3-event-details/4-mousewheel/2-no-doc-scroll/source.view/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+</head>
+<body style="height: 1000px; position: relative">
+
+<header>
+  <h2>Начало документа</h2>
+</header>
+
+<textarea cols="80" rows="10">
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+прокрути меня
+</textarea>
+
+
+<footer style="position: absolute; bottom: 0">
+Конец документа.
+</footer>
+</body>
+</html>
diff --git a/2-ui/3-event-details/4-mousewheel/2-no-doc-scroll/task.md b/2-ui/3-event-details/4-mousewheel/2-no-doc-scroll/task.md
new file mode 100644
index 00000000..277331f3
--- /dev/null
+++ b/2-ui/3-event-details/4-mousewheel/2-no-doc-scroll/task.md
@@ -0,0 +1,28 @@
+# Прокрутка без влияния на страницу
+
+[importance 4]
+
+В большинстве браузеров (кроме Firefox) если в процессе прокрутки `textarea` мышкой (или жестами) мы достигаем границы, то прокрутка продолжается уже на уровне страницы.
+
+Иными словами, если в примере ниже вы попробуете прокрутить `textarea` вниз, то когда прокрутка дойдёт до конца -- начнёт прокручиваться документ:
+
+[iframe src="source" border="1" height=300]
+
+То же самое происходит при прокрутке вверх.
+
+В интерфейсах редактирования, когда большая `textarea` является основным элементом страницы, такое поведение может быть неудобно. 
+
+Для редакторования более оптимально, чтобы при прокрутке до конца `textarea` страница не "улетала" вверх и вниз.
+
+Вот тот же документ, но с желаемым поведением `textarea`:
+
+[iframe src="solution" border="1" height=300]
+
+Задача: 
+<ul>
+<li>Создать скрипт, который при подключении к документу исправлял бы поведение всех `textarea`, чтобы при прокрутке они не трогали документ.</li>
+<li>Направление прокрутки -- только вверх или вниз.</li>
+<li>Редактор прокручивает только мышкой или жестами (на мобильных устройствах), прокрутку клавиатурой здесь рассматривать не нужно (хотя это и возможно).</li>
+</ul>
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-mousewheel/article.md b/2-ui/3-event-details/4-mousewheel/article.md
new file mode 100644
index 00000000..474651e4
--- /dev/null
+++ b/2-ui/3-event-details/4-mousewheel/article.md
@@ -0,0 +1,79 @@
+# Мышь: колёсико, событие wheel
+
+Колёсико мыши используется редко. Оно есть даже не у всех мышей. Поэтому существуют пользователи, которые в принципе не могут сгенерировать такое событие.
+
+...Но, тем не менее, его использование может быть оправдано. Например, можно добавить дополнительные удобства для тех, у кого колёсико есть.
+[cut]
+## Отличия колёсика от прокрутки 
+
+Несмотря на то, что колёсико мыши обычно ассоциируется с прокруткой, это совсем разные вещи.
+
+<ul>
+<li>При прокрутке срабатывает событие [onscroll](/event-onscroll) -- рассмотрим его в дальнейшем. Оно произойдёт *при любой прокрутке*, в том числе через клавиатурy, но *только на прокручиваемых элементах*. Например, элемент с `overflow: hidden` в принципе не может сгенерировать `onscroll`.</li>
+<li>А событие `wheel` является чисто "мышиным". Оно генерируется *над любым элементом* при передвижении колеса мыши. При этом не важно, прокручиваемый он или нет. В частности, `overflow:hidden` никак не препятствует обработке колеса мыши.</li>
+</ul>
+
+Кроме того, событие `onscroll` происходит после прокрутки, а `onwheel` -- до прокрутки, поэтому в нём можно отменить саму прокрутку (действие браузера).
+
+## Зоопарк wheel в разных браузерах
+
+Событие `wheel` появилось в [стандарте](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel) не так давно. Оно поддерживается IE9+, Firefox 17+. Возможно, другими браузерами на момент чтения этой статьи.
+
+До него браузеры обрабатывали прокрутку при помощи событий [mousewheel](http://msdn.microsoft.com/en-us/library/ie/ms536951.aspx) (все кроме Firefox) и [DOMMouseScroll](https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll), [MozMousePixelScroll](https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/MozMousePixelScroll) (только Firefox).
+
+Самые важные свойства современного события и его нестандартных аналогов:
+<dl>
+<dt>`wheel`</dt>
+<dd>Свойство `deltaY` -- количество прокрученных пикселей по горизонтали и вертикали. Существуют также свойства `deltaX` и `deltaZ` для других направлений прокрутки.</dd>
+<dt>`MozMousePixelScroll`</dt>
+<dd>Срабатывает, начиная с Firefox 3.5, только в Firefox. Даёт возможность отменить прокрутку и получить размер в пикселях через свойство `detail`, ось прокрутки в свойстве `axis`.</dd>
+<dt>`DOMMouseScroll`</dt>
+<dd>Существует в Firefox очень давно, отличается от предыдущего тем, что даёт в `detail` количество строк. Если не нужна поддержка Firefox < 3.5, то не нужно и это событие.</dd>
+<dt>`mousewheel`</dd>
+<dd>Срабатывает в браузерах, которые ещё не реализовали `wheel`. В свойстве `wheelDelta` -- условный "размер прокрутки", обычно равен `120` для прокрутки вверх и `-120` -- вниз. Он не соответствует какому-либо конкретному количеству пикселей.</dd>
+</dl>
+
+Чтобы кросс-браузерно отловить прокрутку и, при необходимости, отменить её, можно использовать все эти события.
+
+Пример:
+
+```js
+if (elem.addEventListener) {
+  if ('onwheel' in document) {
+    // IE9+, FF17+
+    elem.addEventListener ("wheel", onWheel, false);
+  } else if ('onmousewheel' in document) {
+    // устаревший вариант события
+    elem.addEventListener ("mousewheel", onWheel, false);
+  } else {
+    // 3.5 <= Firefox < 17, более старое событие DOMMouseScroll пропустим
+    elem.addEventListener ("MozMousePixelScroll", onWheel, false);
+  }
+} else { // IE<9
+  elem.attachEvent ("onmousewheel", onWheel);
+}
+
+function onWheel(e) {
+  e = e || window.event;
+
+  // wheelDelta не дает возможность узнать количество пикселей
+  var delta = e.deltaY || e.detail || e.wheelDelta;
+
+  var info = document.getElementById('delta');
+
+  info.innerHTML = +info.innerHTML + delta;
+
+  e.preventDefault ? e.preventDefault() : (e.returnValue = false);
+}
+```
+
+В действии: 
+[iframe src="wheel" link edit]
+
+[warn header="Ошибка в IE8"]
+
+В браузере IE8 (только версия 8) есть ошибка. При наличии обработчика `mousewheel` --  элемент не скроллится. Иначе говоря, действие браузера отменяется по умолчанию.
+
+Это, конечно, не имеет значения, если элемент в принципе не прокручиваемый.
+[/warn]
+
diff --git a/2-ui/3-event-details/4-mousewheel/wheel.view/index.html b/2-ui/3-event-details/4-mousewheel/wheel.view/index.html
new file mode 100755
index 00000000..46587004
--- /dev/null
+++ b/2-ui/3-event-details/4-mousewheel/wheel.view/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+  <style>
+    #container {
+      width: 200px;
+      height: 200px;
+      border: 1px solid black;
+      background: #0FF;
+      overflow: auto;
+    }
+
+  </style>
+</head>
+<body>
+
+Прокрутка: <span id="delta">0</span>
+<div id="container">
+Прокрути надо мной.
+</div>
+
+<script>
+var elem = document.getElementById('container');
+
+if (elem.addEventListener) {
+  if ('onwheel' in document) {
+    // IE9+, FF17+
+    elem.addEventListener ("wheel", onWheel, false);
+  } else if ('onmousewheel' in document) {
+    // устаревший вариант события
+    elem.addEventListener ("mousewheel", onWheel, false);
+  } else {
+    // 3.5 <= Firefox < 17, более старое событие DOMMouseScroll пропустим
+    elem.addEventListener ("MozMousePixelScroll", onWheel, false);
+  }
+} else { // IE<9
+  elem.attachEvent ("onmousewheel", onWheel);
+}
+
+
+function onWheel(e) {
+  e = e || window.event;
+
+  // deltaY, detail содержат пиксели
+  // wheelDelta не дает возможность узнать количество пикселей
+  // onwheel || MozMousePixelScroll || onmousewheel
+  var delta = e.deltaY || e.detail || e.wheelDelta;
+
+  var info = document.getElementById('delta');
+
+  info.innerHTML = +info.innerHTML + delta;
+
+  e.preventDefault ? e.preventDefault() : (e.returnValue = false);
+}
+
+</script>
+</body>
+</html>
diff --git a/2-ui/3-event-details/5-fixevent/article.md b/2-ui/3-event-details/5-fixevent/article.md
new file mode 100644
index 00000000..12a670b4
--- /dev/null
+++ b/2-ui/3-event-details/5-fixevent/article.md
@@ -0,0 +1,66 @@
+# Мышь: исправление события для IE8- 
+
+В предыдущих главах мы говорили о различных несовместимостях при работе с событиями для IE8-.
+
+Самая главная -- это, конечно, назначение событий при помощи `attachEvent/detachEvent` вместо `addEventListener/removeEventListener` и отсутствие фазы перехвата.
+
+Что же касается событий мыши, то различия в свойствах можно легко исправить при помощи функции `fixEvent`, которая описана в этой главе.
+[cut]
+
+[warn header="Только IE8"]
+Эта функция нужна только для IE8.
+[/warn]
+
+
+Функция `fixEvent` предназначена для запуска в начале обработчика, вот так:
+
+```js
+elem.onclick = function(event) {
+*!*
+  // если IE8-, то получить объект события window.event и исправить его
+  event = event || fixEvent.call(this, window.event); 
+*/!*
+  ...
+}
+```
+
+Она добавлит объекту события в IE8- следующие стандартные свойства:
+<ul>
+<li>`target`</li>
+<li>`currentTarget` -- если обработчик назначен не через `attachEvent`.</li>
+<li>`relatedTarget` -- для `mouseover/mouseout` и `mouseenter/mouseleave`.</li>
+<li>`pageX/pageY`</li>
+<li>`which`</li>
+</ul>
+
+Код функции:
+
+```js
+function fixEvent(e) {
+
+  e.currentTarget = this;
+  e.target = e.srcElement;
+  
+  if (e.type == 'mouseover' || e.type == 'mouseenter') e.relatedTarget = e.fromElement;
+  if (e.type == 'mouseout' || e.type == 'mouseleave') e.relatedTarget = e.toElement;
+  
+  if (e.pageX == null && e.clientX != null ) {
+    var html = document.documentElement;
+    var body = document.body;
+
+    e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
+    e.pageX -= html.clientLeft || 0;
+
+    e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
+    e.pageY -= html.clientTop || 0;
+  }
+
+  if (!e.which && e.button) {
+    e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : (e.button & 4 ? 2 : 0) );
+  }
+
+  return e;
+}
+```
+
+Эта функция не нужна, если используются JavaScript-фреймворки, но может быть полезной, если вы по какой-то причине пишите без них.
\ No newline at end of file
diff --git a/2-ui/3-event-details/6-drag-and-drop/1-slider/solution.md b/2-ui/3-event-details/6-drag-and-drop/1-slider/solution.md
new file mode 100644
index 00000000..4aff681d
--- /dev/null
+++ b/2-ui/3-event-details/6-drag-and-drop/1-slider/solution.md
@@ -0,0 +1,47 @@
+# HTML/CSS, подсказка
+
+Слайдер -- это `DIV`, подкрашенный фоном/градиентом, внутри которого находится другой `DIV`, оформленный как бегунок, с `position:relative`.
+
+Бегунок немного поднят, и вылезает по высоте из родителя.
+
+# HTML/CSS для слайдера
+
+Например, вот так:
+
+```html
+<!--+ run -->
+<style>
+.slider {
+  border-radius: 5px;
+  background: #E0E0E0;
+  background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
+  background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
+  background: linear-gradient(left top, #E0E0E0, #EEEEEE);
+  width: 310px;
+  height: 15px;
+  margin: 5px;
+}
+.thumb {
+  width: 10px;
+  height: 25px;
+  border-radius: 3px;
+  position: relative;
+  left: 10px;
+  top: -5px;
+  background: blue;
+  cursor: pointer;
+}
+</style>
+
+<div class="slider">
+  <div class="thumb"></div>
+</div>
+```
+
+Теперь на этом реализуйте перенос бегунка.
+
+# Полное решение
+
+[edit src="solution"]Полное решение[/edit]
+
+Это горизонтальный Drag'n'Drop, ограниченный по ширине. Его особенность -- в `position:relative` у переносимого элемента, т.е. координата ставится не абсолютная, а относительно родителя.
\ No newline at end of file
diff --git a/2-ui/3-event-details/6-drag-and-drop/1-slider/solution.view/index.html b/2-ui/3-event-details/6-drag-and-drop/1-slider/solution.view/index.html
new file mode 100755
index 00000000..a8e293f1
--- /dev/null
+++ b/2-ui/3-event-details/6-drag-and-drop/1-slider/solution.view/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="lib.js"></script>
+  <style>
+    .slider {
+      border-radius: 5px;
+      background: #E0E0E0;
+      background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
+      background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
+      background: linear-gradient(left top, #E0E0E0, #EEEEEE);
+      width: 310px;
+      height: 15px;
+      margin: 5px;
+    }
+    .thumb {
+      width: 10px;
+      height: 25px;
+      border-radius: 3px;
+      position: relative;
+      left: 10px;
+      top: -5px;
+      background: blue;
+      cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+
+<div id="slider" class="slider">
+  <div class="thumb"></div>
+</div>
+
+<script>
+
+var sliderElem = document.getElementById('slider');
+var thumbElem = sliderElem.children[0];
+
+thumbElem.ondragstart = function() { return false; };
+thumbElem.onmousedown = function(e) {
+  e = fixEvent(e);
+  var thumbCoords = getCoords(thumbElem);
+  var shiftX = e.pageX - thumbCoords.left;
+  // shiftY здесь не нужен, слайдер двигается только по горизонтали
+
+  var sliderCoords = getCoords(sliderElem);
+
+  document.onmousemove = function(e) {
+    e = fixEvent(e);
+
+    //  вычесть координату родителя, т.к. position: relative
+    var newLeft = e.pageX - shiftX - sliderCoords.left;
+
+    // курсор ушёл вне слайдера
+    if (newLeft < 0) {
+      newLeft = 0;
+    }
+    var rightEdge = sliderElem.offsetWidth - thumbElem.offsetWidth;
+    if (newLeft > rightEdge) {
+      newLeft = rightEdge;
+    }
+
+    thumbElem.style.left = newLeft + 'px';
+  }
+
+  document.onmouseup = function() {
+    document.onmousemove = document.onmouseup = null;
+  };
+
+  return false; // disable selection start (cursor change)
+};
+
+
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/3-event-details/6-drag-and-drop/1-slider/solution.view/lib.js b/2-ui/3-event-details/6-drag-and-drop/1-slider/solution.view/lib.js
new file mode 100755
index 00000000..4b84d52a
--- /dev/null
+++ b/2-ui/3-event-details/6-drag-and-drop/1-slider/solution.view/lib.js
@@ -0,0 +1,44 @@
+
+function fixEvent(e) {
+  e = e || window.event;
+
+  if (!e.target) e.target = e.srcElement;
+
+  if (e.pageX == null && e.clientX != null ) { // если нет pageX..
+    var html = document.documentElement;
+    var body = document.body;
+
+    e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
+    e.pageX -= html.clientLeft || 0;
+
+    e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
+    e.pageY -= html.clientTop || 0;
+  }
+
+  if (!e.which && e.button) {
+    e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
+  }
+
+  return e;
+}
+
+
+function getCoords(elem) {
+    var box = elem.getBoundingClientRect();
+
+    var body = document.body;
+    var docElem = document.documentElement;
+
+    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
+    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
+
+    var clientTop = docElem.clientTop || body.clientTop || 0;
+    var clientLeft = docElem.clientLeft || body.clientLeft || 0;
+
+    var top  = box.top +  scrollTop - clientTop;
+    var left = box.left + scrollLeft - clientLeft;
+
+    return { top: Math.round(top), left: Math.round(left) };
+}
+
+
diff --git a/2-ui/3-event-details/6-drag-and-drop/1-slider/source.view/index.html b/2-ui/3-event-details/6-drag-and-drop/1-slider/source.view/index.html
new file mode 100755
index 00000000..7536c19b
--- /dev/null
+++ b/2-ui/3-event-details/6-drag-and-drop/1-slider/source.view/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="lib.js"></script>
+</head>
+<body>
+
+<!-- Ваш HTML/CSS -->
+
+<script>
+// ваш код
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/3-event-details/6-drag-and-drop/1-slider/source.view/lib.js b/2-ui/3-event-details/6-drag-and-drop/1-slider/source.view/lib.js
new file mode 100755
index 00000000..4b84d52a
--- /dev/null
+++ b/2-ui/3-event-details/6-drag-and-drop/1-slider/source.view/lib.js
@@ -0,0 +1,44 @@
+
+function fixEvent(e) {
+  e = e || window.event;
+
+  if (!e.target) e.target = e.srcElement;
+
+  if (e.pageX == null && e.clientX != null ) { // если нет pageX..
+    var html = document.documentElement;
+    var body = document.body;
+
+    e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
+    e.pageX -= html.clientLeft || 0;
+
+    e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
+    e.pageY -= html.clientTop || 0;
+  }
+
+  if (!e.which && e.button) {
+    e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
+  }
+
+  return e;
+}
+
+
+function getCoords(elem) {
+    var box = elem.getBoundingClientRect();
+
+    var body = document.body;
+    var docElem = document.documentElement;
+
+    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
+    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
+
+    var clientTop = docElem.clientTop || body.clientTop || 0;
+    var clientLeft = docElem.clientLeft || body.clientLeft || 0;
+
+    var top  = box.top +  scrollTop - clientTop;
+    var left = box.left + scrollLeft - clientLeft;
+
+    return { top: Math.round(top), left: Math.round(left) };
+}
+
+
diff --git a/2-ui/3-event-details/6-drag-and-drop/1-slider/task.md b/2-ui/3-event-details/6-drag-and-drop/1-slider/task.md
new file mode 100644
index 00000000..f82d8b59
--- /dev/null
+++ b/2-ui/3-event-details/6-drag-and-drop/1-slider/task.md
@@ -0,0 +1,19 @@
+# Слайдер 
+
+[importance 5]
+
+Создайте слайдер:
+[iframe src="solution" height=60 border=1]
+
+Захватите мышкой синий бегунок и двигайте его, чтобы увидеть в работе.
+
+Позже к этому слайдеру можно будет добавить дополнительные функции по чтению/установке значения.
+
+[edit src="source" task/] ([getCoords](#getCoords) -- в lib.js).
+
+Важно:
+<ul>
+<li>Слайдер должен нормально работать при резком движении мыши влево или вправо, за пределы полосы. При этом бегунок должен останавливаться четко в нужном конце полосы.</li>
+<li>Курсор при передвижении слайдера должен быть рукой(`hand`) или крестиком(`move`).</li> 
+<li>При нажатом бегунке мышь может выходить за пределы полосы слайдера, но слайдер пусть все равно работает (удобство для пользователя).</li>
+</ul>
\ No newline at end of file
diff --git a/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/solution.md b/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/solution.md
new file mode 100644
index 00000000..099f5e81
--- /dev/null
+++ b/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/solution.view/index.html b/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/solution.view/index.html
new file mode 100755
index 00000000..3cb1f873
--- /dev/null
+++ b/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/solution.view/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="soccer.css">
+</head>
+<body>
+  
+  <h2>Расставьте супергероев по полю.</h2>
+  
+  <p>Супергерои -- это элементы с классом "draggable". Сделайте так, чтобы их можно было переносить.</p>
+  
+  <p>Важно: если супергероя подносят к низу или верху страницы, она должна автоматически прокручиваться. Конечно, можно прокрутить и клавиатурой, но так -- удобнее. Если страница помещается на вашем экране целиком и не имеет вертикальной прокрутки -- сделайте окно браузера меньше, чтобы протестировать эту возможность.</p>
+  
+  <p>Да, и ещё: супергерои ни при каких условиях не должны попасть за край экрана.</p>
+  
+  <div id="field">
+    
+  </div>
+
+  <div class="hero draggable" id="hero1"></div>
+  <div class="hero draggable" id="hero2"></div>
+  <div class="hero draggable" id="hero3"></div>
+  <div class="hero draggable" id="hero4"></div>
+  <div class="hero draggable" id="hero5"></div>
+  <div id="winnie" class="draggable"></div>
+
+  <img src="http://js.cx/drag-heroes/ball.png" class="draggable">
+
+  <div style="clear:both"></div>
+
+  <script src="http://js.cx/libs/getCoords.js"></script>
+  <script src="http://js.cx/libs/documentScroll.js"></script>
+  
+  <script src="soccer.js"></script>
+</body>
+</html>
diff --git a/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/solution.view/soccer.css b/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/solution.view/soccer.css
new file mode 100755
index 00000000..c79a9e7a
--- /dev/null
+++ b/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/solution.view/soccer.css
@@ -0,0 +1,58 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+#field {
+  background: url(http://js.cx/drag-heroes/field.png);
+  width: 800px;
+  height: 600px;
+  float: left;
+}
+
+.hero {
+  background: url(http://js.cx/drag-heroes/heroes.png);
+  width: 105px;
+  height: 128px;
+  float: left;
+}
+
+#hero1 {
+  background-position: 0 0;
+}
+
+#hero2 {
+  background-position: 0 -128px;
+}
+
+#hero3 {
+  background-position: -131px 0;
+}
+
+#hero4 {
+  background-position: -131px -128px;
+}
+
+#hero5 {
+  background-position: -236px 0;
+  width: 130px;
+}
+
+#winnie {
+  background: url(http://js.cx/drag-heroes/winnie.png);
+  width: 115px;
+  height: 128px;
+  float: left;
+}
+
+.draggable {
+  cursor: pointer;
+}
+
+.dragging {
+  z-index: 1000;
+  position: absolute;
+  cursor: move;
+}
+
+
diff --git a/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/solution.view/soccer.js b/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/solution.view/soccer.js
new file mode 100755
index 00000000..405e0d93
--- /dev/null
+++ b/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/solution.view/soccer.js
@@ -0,0 +1,80 @@
+
+
+document.body.onmousedown = function(e) {
+
+  var dragElement = e.target;
+
+  if (!dragElement.classList.contains('draggable')) return;
+
+  var coords, shiftX, shiftY;
+  
+  startDrag(e.pageX, e.pageY);
+
+  document.onmousemove = function(e) {
+    moveAt(e.pageX, e.pageY);
+  };
+
+  dragElement.onmouseup = function() {
+    finishDrag();
+  };
+
+
+  // -------------------------
+
+  function startDrag(pageX, pageY) {
+
+    coords = getCoords(dragElement);
+    shiftX = pageX - coords.left;
+    shiftY = pageY - coords.top;
+   
+    dragElement.classList.add("dragging");
+    dragElement.style.position = 'absolute';
+    document.body.appendChild(dragElement); 
+
+    moveAt(pageX, pageY);
+  };
+
+  function finishDrag() {
+    dragElement.classList.remove('dragging');
+    document.onmousemove = dragElement.onmouseup = null;
+  }
+
+  function moveAt(pageX, pageY) {
+    var newX = pageX - shiftX; 
+    var newY = pageY - shiftY; 
+
+    var newBottom = newY + dragElement.offsetHeight;
+
+    var docScroll = getDocumentScroll();
+
+    // прокрутить вниз, если нужно
+    if (newBottom > docScroll.bottom) {
+      // ...но не за конец документа
+      var scrollSizeToEnd = docScroll.height - docScroll.bottom;
+
+      // scrollBy, если его не ограничить,
+      // может заскроллить за текущую границу страницы
+      var toScrollY = Math.min(scrollSizeToEnd, 10);
+      window.scrollBy(0, toScrollY );
+
+      // при необходимости двигаем элемент вверх, чтобы поместился
+      // метод scrollBy асинхронный, поэтому учитываем будущую прокрутку (+toScrollY)
+      newY = Math.min(newY, docScroll.bottom - dragElement.offsetHeight + toScrollY);
+    }
+
+    if (newY < docScroll.top) {
+      var toScrollY = Math.min(docScroll.top, 10);
+      window.scrollBy(0, -toScrollY );
+      newY = Math.max(newY, docScroll.top - toScrollY );
+    }
+
+    // зажать в границах экрана по горизонтали
+    newX = Math.max(newX, 0);
+    newX = Math.min(newX, document.documentElement.clientWidth - dragElement.offsetHeight);
+   
+    dragElement.style.left = newX + 'px';
+    dragElement.style.top = newY + 'px';
+  }
+
+  return false;
+}
\ No newline at end of file
diff --git a/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/source.view/index.html b/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/source.view/index.html
new file mode 100755
index 00000000..66de6971
--- /dev/null
+++ b/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/source.view/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="soccer.css">
+</head>
+<body>
+  
+  <h2>Расставьте супергероев по полю.</h2>
+  
+  <p>Супергерои -- это элементы с классом "draggable". Сделайте так, чтобы их можно было переносить.</p>
+  
+  <p>Важно: если супергероя подносят к низу или верху страницы, она должна автоматически прокручиваться. Конечно, можно прокрутить и клавиатурой, но так -- удобнее. Если страница помещается на вашем экране целиком и не имеет вертикальной прокрутки -- сделайте окно браузера меньше, чтобы протестировать эту возможность.</p>
+  
+  <p>Да, и ещё: супергерои ни при каких условиях не должны попасть за край экрана.</p>
+  
+  
+  <div id="field">
+    
+  </div>
+
+  <div class="hero draggable" id="hero1"></div>
+  <div class="hero draggable" id="hero2"></div>
+  <div class="hero draggable" id="hero3"></div>
+  <div class="hero draggable" id="hero4"></div>
+  <div class="hero draggable" id="hero5"></div>
+  <div id="winnie" class="draggable"></div>
+
+  <img src="http://js.cx/drag-heroes/ball.png" class="draggable">
+
+  <div style="clear:both"></div>
+
+  <script src="http://js.cx/libs/getCoords.js"></script>
+  <script src="http://js.cx/libs/documentScroll.js"></script>
+
+  <script src="soccer.js"></script>
+</body>
+</html>
diff --git a/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/source.view/soccer.css b/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/source.view/soccer.css
new file mode 100755
index 00000000..c79a9e7a
--- /dev/null
+++ b/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/source.view/soccer.css
@@ -0,0 +1,58 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+#field {
+  background: url(http://js.cx/drag-heroes/field.png);
+  width: 800px;
+  height: 600px;
+  float: left;
+}
+
+.hero {
+  background: url(http://js.cx/drag-heroes/heroes.png);
+  width: 105px;
+  height: 128px;
+  float: left;
+}
+
+#hero1 {
+  background-position: 0 0;
+}
+
+#hero2 {
+  background-position: 0 -128px;
+}
+
+#hero3 {
+  background-position: -131px 0;
+}
+
+#hero4 {
+  background-position: -131px -128px;
+}
+
+#hero5 {
+  background-position: -236px 0;
+  width: 130px;
+}
+
+#winnie {
+  background: url(http://js.cx/drag-heroes/winnie.png);
+  width: 115px;
+  height: 128px;
+  float: left;
+}
+
+.draggable {
+  cursor: pointer;
+}
+
+.dragging {
+  z-index: 1000;
+  position: absolute;
+  cursor: move;
+}
+
+
diff --git a/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/source.view/soccer.js b/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/source.view/soccer.js
new file mode 100755
index 00000000..eb778e9f
--- /dev/null
+++ b/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/source.view/soccer.js
@@ -0,0 +1,2 @@
+
+/* ваш код */
\ No newline at end of file
diff --git a/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/task.md b/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/task.md
new file mode 100644
index 00000000..591c07e8
--- /dev/null
+++ b/2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/task.md
@@ -0,0 +1,13 @@
+# Расставить супергероев по полю
+
+[importance 5]
+
+Сделайте так, чтобы элементы с классом `draggable` можно было переносить мышкой. 
+
+Футбольное поле в этой задач слишком большое, чтобы показывать его здесь, поэтому откройте его, кликнув по ссылке ниже. Там же и подробное описание задачи (осторожно, винни-пух и супергерои!).
+
+[demo src="solution"] 
+
+[edit src="source" task/]
+
+P.S. Для вашего удобства добавлены функции `getCoords` --  для координат и `getDocumentScroll` -- для получения границ видимой области и прокрутки в документе.
\ No newline at end of file
diff --git a/2-ui/3-event-details/6-drag-and-drop/article.md b/2-ui/3-event-details/6-drag-and-drop/article.md
new file mode 100644
index 00000000..0885c481
--- /dev/null
+++ b/2-ui/3-event-details/6-drag-and-drop/article.md
@@ -0,0 +1,259 @@
+# Мышь: Drag'n'Drop   
+
+Drag'n'Drop -- это возможность захватить мышью элемент и перенести его. В свое время это было замечательным открытием в области интерфейсов, которое позволило упростить большое количество операций.
+
+Перенос мышкой может заменить целую последовательность кликов. И, самое главное, он упрощает внешний вид интерфейса: функции, реализуемые через Drag'n'Drop, в ином случае потребовали бы дополнительных полей, виджетов и т.п.
+
+[cut]
+## Отличия от HTML5 Drag'n'Drop
+
+В современном стандарте HTML5 есть поддержка Drag'n'Drop при помощи [специальных событий](http://www.html5rocks.com/en/tutorials/dnd/basics/). Эти события поддерживаются всеми браузерами, в мелочах отстаёт от них IE.
+
+У них есть своя область применения, например можно перетащить файл в браузер, но здесь сосредоточимся на реализации техник Drag'n'Drop в более широком смысле, для более обширного класса задач.
+
+**Далее речь пойдет о реализации Drag'n'Drop при помощи событий мыши.**
+
+**Изложенные методы применяются в элементах управления для обработки любых действий вида "захватить - потянуть - отпустить".** 
+
+## Основная логика Drag'n'Drop
+ 
+Для организации Drag'n'Drop нужно:
+<ol>
+ <li>При помощи события `mousedown` отследить нажатие кнопки на переносимом элементе.</li>
+ <li>При нажатии -- подготовить элемент к перемещению: обычно ему назначается `position:absolute` и ставятся координаты `left/top` по координатам курсора.</li>
+<li>Далее отслеживаем движение мыши через <code>mousemove</code> и передвигаем переносимый элемент на новые координаты путём смены `left/top`.</li>
+ <li>При отпускании кнопки мыши, то есть наступлении события <code>mouseup</code> -- остановить перенос элемента и произвести все действия, связанные с окончанием Drag'n'Drop.</li>
+</ol>
+
+В следующем примере эти шаги реализованы для переноса мяча:
+
+```js
+//+ autorun
+var ball = document.getElementById('ball');
+
+ball.onmousedown = function(e) { // 1. отследить нажатие*!*
+  var self = this;
+
+  // подготовить к перемещению
+  // 2. разместить на том же месте, но в абсолютных координатах*!*
+  this.style.position = 'absolute'; 
+  moveAt(e);
+  // переместим в body, чтобы мяч был точно не внутри position:relative
+  document.body.appendChild(this); 
+
+  this.style.zIndex = 1000; // показывать мяч над другими элементами
+  
+  // передвинуть мяч под координаты курсора   
+  function moveAt(e) {
+    self.style.left = e.pageX-20+'px'; // 20 - половина ширины/высоты мяча
+    self.style.top = e.pageY-20+'px'; 
+   }
+
+  // 3, перемещать по экрану*!*
+  document.onmousemove = function(e) {
+    moveAt(e);
+  }
+
+  // 4. отследить окончание переноса *!*
+  this.onmouseup = function() {
+    document.onmousemove = self.onmouseup = null;
+  }
+}
+```
+
+В действии:
+<div style="height:80px">
+Кликните по мячу и тяните, чтобы двигать его.
+<img src="http://js.cx/clipart/ball.gif" style="cursor:pointer" width="40" height="40" id="ball">
+</div>
+
+**Попробуйте этот пример. Он не совсем работает, мячик "раздваивается".**
+
+Сейчас мы это исправим.
+
+## Отмена переноса браузера
+
+При нажатии мышью на `<img>` браузер начинает выполнять свой собственный, встроенный Drag'n'Drop, который и портит наш перенос.
+
+Чтобы браузер не вмешивался, нужно отменить действие по умолчанию для события `dragstart`:
+
+```js
+ball.ondragstart = function() { 
+  return false; 
+};
+```
+
+Исправленный пример:
+
+```js
+//+ autorun
+var ball = document.getElementById('ball2');
+
+ball.onmousedown = function(e) {
+  var self = this;
+
+  this.style.position = 'absolute'; 
+  moveAt(e);
+  document.body.appendChild(this); 
+
+  this.style.zIndex = 1000; 
+  
+  function moveAt(e) {
+    self.style.left = e.pageX-20+'px'; 
+    self.style.top = e.pageY-20+'px'; 
+   }
+
+  document.onmousemove = function(e) {
+    moveAt(e);
+  };
+
+  this.onmouseup = function() {
+    document.onmousemove = self.onmouseup = null;
+  };
+}
+
+*!*
+ball.ondragstart = function() { 
+  return false; 
+};
+*/!*
+```
+
+В действии:
+
+<div style="height:80px">
+Кликните по мячу и тяните, чтобы двигать его.
+<img src="http://js.cx/clipart/ball.gif" style="cursor:pointer"  width="40" height="40" id="ball2">
+</div>
+
+[smart header="Обработчик `mousemove` ставим на `document`"]
+
+**Почему событие `mousemove` в примере отслеживается на `document`, а не на `ball`?**
+
+С первого взгляда кажется, что мышь всегда над мячом и обработчик `mousemove` можно повесить на сам мяч, а не на документ. 
+
+Однако, на самом деле **мышь во время переноса не всегда над мячом**. Вспомните, браузер регистрирует `mousemove` часто, но не для каждого пикселя. 
+
+Быстрое движение курсора вызовет `mousemove` уже не над мячом, а, например, в дальнем конце страницы. 
+Вот почему мы должны отслеживать `mousemove` на всём `document`.
+[/smart]
+
+## Правильное позиционирование
+
+В примерах выше мяч позиционируется в центре под курсором мыши:
+
+```js
+self.style.left = e.pageX - 20 + 'px';
+self.style.top = e.pageY - 20 + 'px';
+```
+
+Число `20` здесь -- половина длины мячика. Оно использовано здесь потому, что если поставить `left/top` ровно в `pageX/pageY`, то мячик прилипнет верхним-левым углом к курсору мыши. Будет некрасиво.
+
+**Для правильного переноса необходимо, чтобы изначальный сдвиг курсора относительно элемента сохранялся: где захватили, за ту "часть элемента" и переносим.**
+
+<img src="ball_shift.png">
+
+<ul>
+<li>Когда человек нажимает на мячик `mousedown` -- курсор сдвинут относительно левого-верхнего угла мяча на расстояние `shiftX/shiftY`. И мы хотели бы сохранить этот сдвиг.
+
+Получить значения `shiftX/shiftY` легко: достаточно вычесть из координат курсора `pageX/pageY` левую-верхнюю границу мячика, полученную при помощи функции [getCoords](#getCoords).
+
+**При Drag'n'Drop мы везде используем координаты относительно документа, так как они подходят в большем количестве ситуаций.**
+
+Конечно же, не проблема перейти к координатам относительно окна, если это понадобится. Достаточно использовать `position:fixed`, `elem.getBoundingClientRect()` для определения координат и `e.clientX/Y`.
+
+```js
+// onmousedown
+shiftX = e.pageX - getCoords(ball).left;
+shiftY = e.pageY - getCoords(ball).top;
+```
+
+</li>
+<li>Далее при переносе мяча мы располагаем его `left/top` с учетом сдвига, то есть вот так:
+
+```js
+// onmousemove
+self.style.left = e.pageX - *!*shiftX*/!* + 'px';
+self.style.top = e.pageY - *!*shiftY*/!* + 'px';
+```
+
+</li>
+</ul>
+
+
+**Пример с правильным позиционированием:**
+
+В этом примере позиционирование осуществляется не на `20px`, а с учётом изначального сдвига.
+
+```js
+//+ autorun
+var ball = document.getElementById('ball3');
+
+ball.onmousedown = function(e) {
+  var self = this;
+
+  var coords = getCoords(this);
+*!*
+  var shiftX = e.pageX - coords.left;
+  var shiftY = e.pageY - coords.top;
+*/!*
+
+  this.style.position = 'absolute';
+  document.body.appendChild(this);
+  moveAt(e);
+
+  this.style.zIndex = 1000; // над другими элементами
+
+  function moveAt(e) {
+    self.style.left = e.pageX - *!*shiftX*/!* + 'px';
+    self.style.top = e.pageY - *!*shiftY*/!* + 'px';
+  }
+
+  document.onmousemove = function(e) { 
+    moveAt(e); 
+  };
+
+  this.onmouseup = function() {
+    document.onmousemove = self.onmouseup = null;
+  };
+
+}
+
+ball.ondragstart = function() { 
+  return false; 
+};
+```
+
+В действии:
+
+<div style="height:80px">
+Кликните по мячу и тяните, чтобы двигать его.
+<img src="http://js.cx/clipart/ball.gif" style="cursor:pointer" width="40" height="40" id="ball3">
+</div>
+
+Различие особенно заметно, если захватить мяч за правый-нижний угол. В предыдущем примере мячик "прыгнет" серединой под курсор, в этом -- будет плавно переноситься с текущей позиции.
+
+## Итого
+
+Мы рассмотрели "минимальный каркас" `Drag'n'Drop`. 
+
+Его компоненты:
+
+<ol>
+<li>События `mousedown` -> `document.mousemove` -> `mouseup`.</li>
+<li>Передвижение с учётом изначального сдвига `shiftX/shiftY`.</li>
+<li>Отмена действия браузера по событию `dragstart`.</li>
+</ol>
+
+На этой основе можно сделать очень многое. 
+
+<ul>
+<li>При `mouseup` можно обработать окончание переноса, произвести изменения в данных, если они нужны.</li>
+<li>Во время самого переноса можно подсвечивать элементы, над которыми проходит элемент.</li>
+</ul>
+
+Это и многое другое мы рассмотрим в статье про [Drag'n'Drop объектов](/drag-and-drop-objects).
+
+[libs]
+getCoords.js
+[/libs]
\ No newline at end of file
diff --git a/2-ui/3-event-details/6-drag-and-drop/ball_shift.png b/2-ui/3-event-details/6-drag-and-drop/ball_shift.png
new file mode 100755
index 00000000..e1ac4641
Binary files /dev/null and b/2-ui/3-event-details/6-drag-and-drop/ball_shift.png differ
diff --git a/2-ui/3-event-details/6-drag-and-drop/ball_shift@2x.png b/2-ui/3-event-details/6-drag-and-drop/ball_shift@2x.png
new file mode 100755
index 00000000..3fcb0506
Binary files /dev/null and b/2-ui/3-event-details/6-drag-and-drop/ball_shift@2x.png differ
diff --git a/2-ui/3-event-details/7-drag-and-drop-objects/article.md b/2-ui/3-event-details/7-drag-and-drop-objects/article.md
new file mode 100644
index 00000000..671e3973
--- /dev/null
+++ b/2-ui/3-event-details/7-drag-and-drop-objects/article.md
@@ -0,0 +1,610 @@
+# Мышь: Drag'n'Drop объектов
+
+В [предыдущей статье](/drag-and-drop) мы рассмотрели основы Drag'n'Drop. Здесь мы построим на этой основе фреймворк, предназначенный для переноса *объектов* -- элементов списка, узлов дерева и т.п.
+
+Почти все javascript-библиотеки реализуют Drag'n'Drop так, как написано (хотя бывает что и менее эффективно ;)). Зная, что и как, вы сможете легко написать свой код переноса или поправить, адаптировать существующую библиотеку под себя.
+[cut]
+## Документ
+
+Как пример задачи -- возьмём документ с иконками браузера ("объекты переноса"), которые можно переносить в компьютер ("цель переноса"):
+
+<ul>
+<li>Элементы, которые можно переносить (иконки браузеров), помечены атрибутом `draggable`.</li>
+<li>Элементы, на которые можно положить (компьютер), имеют атрибут `droppable`.</li>
+</ul>
+
+```html
+<img src="chrome.png" *!*draggable*/!*>
+<img src="firefox.png" *!*draggable*/!*>
+<img src="ie.png" *!*draggable*/!*>
+<img src="opera.png" *!*draggable*/!*>
+<img src="safari.png" *!*draggable*/!*>
+
+<p>Браузер переносить сюда:</p>
+
+<img src="computer.gif" *!*droppable*/!*>
+```
+
+Работающий пример с переносом. 
+
+
+[iframe border=1 src="dragDemo" height=250 link edit]
+
+Далее мы рассмотрим, как делается фреймворк для таких переносов, а в перспективе -- и для более сложных.
+
+Требования:
+<ul>
+<li>Поддержка большого количества элементов без "тормозов".</li>
+<li>Продвинутые возможности по анимации переноса.</li>
+<li>Удобная обработка успешного и неудачного переноса.</li>
+</ul>
+
+## Начало переноса
+
+Чтобы начать перенос элемента, мы должны отловить нажатие левой кнопки мыши на нём. Для этого используем событие `mousedown`. 
+
+..И здесь нас ждёт первая особенность переноса объектов. На что ставить обработчик?
+
+**Переносимых элементов может быть много.** В нашем документе-примере это всего лишь несколько иконок, но если мы хотим переносить элементы списка или дерева, то их может быть 100 штук и более.
+
+Назначать обработчик на каждый DOM-элемент -- нецелесообразно. Проще всего решить эту задачу делегированием. 
+
+**Повесим обработчик `mousedown` на контейнер, который содержит переносимые элементы,** и будем определять нужный элемент поиском ближайшего `draggable` вверх по иерархии от `event.target`. В качестве контейнера здесь и далее будем брать `document`.
+
+Найденный переносимый объект сохраним в переменной `dragObject` и начнём двигать.
+
+Код обработчика `mousedown`:
+
+```js
+var dragObject = {}; 
+
+document.onmousedown = function(e){
+
+  if (e.which != 1) {
+    return; // нажатие правой кнопкой не запускает перенос
+  }
+
+  // найти ближайший draggable, пройдя по цепочке родителей target
+  var elem = findDraggable(e.target, document);
+
+  if (!elem) return; // не нашли, клик вне draggable объекта
+
+  // запомнить переносимый объект 
+  dragObject.elem = elem;
+
+  // запомнить координаты, с которых начат перенос объекта
+  dragObject.downX = e.pageX;
+  dragObject.downY = e.pageY;
+}
+```
+
+В обработчике используется функция `findDraggable` для поиска переносимого элемента по `event.target`:
+
+```js
+function findDraggable(event) {
+  var elem = event.target;
+
+  // найти ближайший draggable, пройдя по цепочке родителей target
+  while(elem != document && elem.getAttribute('draggable') == null) {
+    elem = elem.parentNode;
+  }
+  return elem == document ? null : elem;
+}
+```
+
+**Здесь мы пока не начинаем перенос, потому что нажатие на элемент вовсе не означает, что его собираются куда-то двигать.** Возможно, на нём просто кликают.
+
+Это важное различие. Нужно отличать перенос от клика, в том числе -- от клика, который сопровождается нечаянным перемещением на пару пикселей (рука дрогнула).
+
+Иначе при клике элемент будет сниматься со своего места, и потом тут же возвращаться обратно (никуда не положили). Это лишняя работа и, вообще, выглядит некрасиво.
+
+**Поэтому в `mousedown` мы запоминаем, какой элемент и где был зажат, а начало переноса будем инициировать из `mousemove`,** если он передвинут хотя бы на несколько пикселей. 
+
+## Перенос элемента
+
+Первой задачей обработчика `mousemove` является инициировать начало переноса, если элемент передвинули в зажатом состоянии.
+
+Ну а второй задачей -- отображать его перенос при каждом передвижении мыши. Схематично, обработчик имеет такой вид:
+
+```js
+document.onmousemove = function(e) {
+  if (!dragObject.elem) return; // элемент не зажат
+
+  if ( !dragObject.avatar ) { // элемент нажат, но пока не начали его двигать
+    ... начать перенос, присвоить dragObject.avatar = переносимый элемент
+  }
+
+  ...отобразить перенос элемента...
+}
+```
+
+Здесь мы видим новое свойство `dragObject.avatar`. При начале переноса *аватар* делается из элемента и сохраняется в свойство `dragObject.avatar`.
+
+***"Аватар"* -- это DOM-элемент, который перемещается по экрану.** 
+
+Почему бы не перемещать по экрану сам `draggable`-элемент? Зачем, вообще, нужен аватар?
+
+Дело в том, что иногда сам элемент передвигать неудобно, например он слишком большой. А удобно создать некоторое визуальное представление элемента, и его уже переносить. Аватар дает такую возможность.
+
+А в простейшем случае аватаром можно будет сделать сам элемент, и это не повлечёт дополнительных расходов.
+
+### Визуальное перемещение аватара
+
+Для того, чтобы отобразить перенос аватара, достаточно поставить ему `position: absolute` и менять координаты `left/top`.
+
+Для использования абсолютных координат относительно документа, аватар должен быть прямым потомком `BODY`.
+
+Следующий код готовит аватар к переносу:
+
+```js
+// в начале переноса:
+if (avatar.parentNode != document.body) { 
+  document.body.appendChild(avatar); // переместить в BODY, если надо
+}
+avatar.style.zIndex = 9999; // сделать, чтобы элемент был над другими
+avatar.style.position = 'absolute';
+```
+
+... А затем его можно двигать:
+
+```js
+// при каждом движении мыши
+
+avatar.style.left = новая координата + 'px';
+avatar.style.top = новая координата + 'px';
+```
+
+**Как вычислять новые координаты `left/top` при переносе?**
+
+Чтобы элемент сохранял свою позицию под курсором, необходимо при нажатии запомнить его изначальный сдвиг относительно курсора, и сохранять его при переносе.
+
+<img src="shiftx.png">
+
+Этот сдвиг по горизонтали обозначен `shiftX` на рисунке выше. Аналогично, есть `shiftY`. Они вычисляются как расстояние между курсором и левой/верхней границей элемента при `mousedown`. Детали вычислений описаны в главе [](/drag-and-drop).
+
+Таким образом, при `mousemove` мы будем назначать элементу координаты курсора с учетом сдвига `shiftX/shiftY`:
+
+```js
+avatar.style.left = e.pageX - shiftX + 'px';
+avatar.style.top = e.pageY - shiftY + 'px';
+```
+
+### Полный код mousemove
+
+Код `mousemove`, решающий задачу начала переноса и позиционирования аватара:
+
+```js
+document.onmousemove = function(e) {
+  if (!dragObject.elem) return; // элемент не зажат
+
+  if ( !dragObject.avatar ) { // если перенос не начат...
+
+    // посчитать дистанцию, на которую переместился курсор мыши
+    var moveX = e.pageX - dragObject.downX;
+    var moveY = e.pageY - dragObject.downY;
+    if ( Math.abs(moveX) < 3 && Math.abs(moveY) < 3 ) {
+      return; // ничего не делать, мышь не передвинулась достаточно далеко
+    }
+
+    *!*dragObject.avatar = createAvatar(e)*/!*; // захватить элемент
+    if (!dragObject.avatar) { 
+      dragObject = {}; // аватар создать не удалось, отмена переноса
+      return; // возможно, нельзя захватить за эту часть элемента
+    }
+
+    // аватар создан успешно
+    // создать вспомогательные свойства shiftX/shiftY
+    var coords = getCoords(avatar);
+    dragObject.shiftX = dragObject.downX - coords.left;
+    dragObject.shiftY = dragObject.downY - coords.top;
+
+    *!*startDrag(e)*/!*; // отобразить начало переноса
+  }
+
+  // отобразить перенос объекта при каждом движении мыши
+  dragObject.avatar.style.left = e.pageX - dragObject.shiftX + 'px';
+  dragObject.avatar.style.top = e.pageY - dragObject.shiftY + 'px';
+
+  return false; 
+}
+```
+
+Здесь используются две функции для начала переноса: `createAvatar(e)` и `startDrag(e)`.
+
+Функция `createAvatar(e)` создает аватар. В нашем случае в качестве аватара берется сам `draggable` элемент. После создания аватара в него записывается функция `avatar.rollback`, которая задает поведение при отмене переноса. 
+
+Как правило, отмена переноса влечет за собой разрушение аватара, если это был клон, или возвращение его на прежнее место, если это сам элемент. 
+
+В нашем случае для отмены переноса нужно запомнить старую позицию элемента и его родителя.
+
+```js
+//+ hide="Раскрыть код createAvatar"
+function createAvatar(e) {
+
+  // запомнить старые свойства, чтобы вернуться к ним при отмене переноса
+  var avatar = dragObject.elem;
+  var old = {
+    parent: avatar.parentNode,
+    nextSibling: avatar.nextSibling,
+    position: avatar.position || '',
+    left: avatar.left || '',
+    top: avatar.top || '',
+    zIndex: avatar.zIndex || ''
+  };
+
+  // функция для отмены переноса
+  avatar.rollback = function() {
+    old.parent.insertBefore(avatar, old.nextSibling);
+    avatar.style.position = old.position;
+    avatar.style.left = old.left;
+    avatar.style.top = old.top;
+    avatar.style.zIndex = old.zIndex
+  };
+
+  return avatar;
+}
+```
+
+Функция `startDrag(e)` инициирует начало переноса и позиционирует аватар на странице.
+
+```js
+function startDrag(e) {
+  var avatar = dragObject.avatar;
+
+  document.body.appendChild(avatar);
+  avatar.style.zIndex = 9999;
+  avatar.style.position = 'absolute';
+}
+```
+
+### Окончание переноса
+
+Окончание переноса происходит по событию `mouseup`. 
+
+Его обработчик можно поставить на аватаре, т.к. аватар всегда под курсором и `mouseup` происходит на нем. Но для универсальности и большей гибкости (вдруг мы захотим перемещать аватар *рядом* с курсором?) поставим его, как и остальные, на `document`.
+
+Задача обработчика `mouseup`:
+<ol>
+<li>Обработать успешный перенос, если он идет (существует аватар)</li>
+<li>Очистить данные `dragObject`.</li>
+</ol>
+
+Это дает нам следующий код:
+
+```js
+document.onmouseup = function(e) {
+  // (1) обработать перенос, если он идет
+  if (dragObject.avatar) { 
+    *!*finishDrag(e)*/!*;
+  }
+
+  // в конце mouseup перенос либо завершился, либо даже не начинался
+  // (2) в любом случае очистим "состояние переноса" dragObject
+  dragObject = {};
+}
+```
+
+Для завершения переноса в функции `finishDrag(e)` нам нужно понять, на каком элементе мы находимся, и если над `droppable` -- обработать перенос, а нет -- откатиться:
+
+```js
+function finishDrag(e) {
+  var dropElem = *!*findDroppable(e)*/!*;
+
+  if (dropElem) {
+    ... успешный перенос ...
+  } else {
+    ... отмена переноса ...
+  }
+}
+```
+
+### Определяем элемент под курсором
+
+Чтобы понять, над каким элементом мы остановились -- используем метод [document.elementFromPoint(clientX, clientY)](https://developer.mozilla.org/en/DOM/document.elementFromPoint), который мы обсуждали в разделе [координаты](#elementFromPoint). Этот метод получает координаты *относительно окна* и возвращает самый глубокий элемент, который там находится.
+
+Функция `findDroppable(event)`, описанная ниже, использует его и находит самый глубокий элемент с атрибутом `droppable` под курсором мыши:
+
+```js
+// возвратит ближайший droppable или null
+// *!*предварительный вариант findDroppable, исправлен ниже!*/!*
+function findDroppable(event) {
+
+  // взять элемент на данных координатах
+  var elem = document.elementFromPoint(event.clientX, event.clientY);
+
+  // пройти вверх по цепочке родителей в поисках droppable
+  while(elem != document && elem.getAttribute('droppable') == null) {
+    elem = elem.parentNode;
+  }
+
+  return elem == document ? null : elem;
+}
+```
+
+Обратите внимание -- для `elementFromPoint` нужны координаты относительно окна `clientX/clientY`, а не `pageX/pageY`.
+
+Вариант выше -- предварительный. Он не будет работать. Если попробовать применить эту функцию, будет все время возвращать один и тот же элемент! А именно -- *текущий переносимый*. Почему так?
+
+..Дело в том, что в процессе переноса под мышкой находится именно аватар. При начале переноса ему даже `z-index` ставится большой, чтобы он был поверх всех остальных. 
+
+**Аватар перекрывает остальные элементы. Поэтому функция `document.elementFromPoint()` увидит на текущих координатах именно его.**
+
+Чтобы это изменить, нужно либо поправить код переноса, чтобы аватар двигался *рядом* с курсором мыши, либо поступить проще:
+
+<ol><li>Спрятать аватар.</li>
+<li>Вызывать `elementFromPoint`.</li>
+<li>Показать аватар.</li></ol>
+
+Напишем вспомогательную функцию `getElementUnderClientXY(elem, clientX, clientY)`, которая это делает:
+
+```js
+/* получить элемент на координатах clientX/clientY, под elem */
+function getElementUnderClientXY(elem, clientX, clientY) {
+  // сохранить старый display и спрятать переносимый элемент
+  var display = elem.style.display || '';
+  elem.style.display = 'none';
+
+  // получить самый вложенный элемент под курсором мыши
+  var target = document.elementFromPoint(clientX, clientY);
+
+  // показать переносимый элемент обратно
+  elem.style.display = display;
+
+  if (!target || target == document) { // такое бывает при выносе за границы окна
+    target = document.body; // поправить значение, чтобы был именно элемент
+  }
+
+  return target;
+}
+```
+
+Правильный код `findDroppable`:
+
+```js
+function findDroppable(event) {
+  var elem = getElementUnderClientXY(dragObject.avatar, event.clientX, event.clientY);
+
+  while(elem != document && elem.getAttribute('droppable') == null) {
+    elem = elem.parentNode;
+  }
+
+  return elem == document ? null : elem;
+}
+```
+
+## Сводим части фреймворка вместе
+
+Сейчас в нашем распоряжении находятся основные фрагменты кода и решения всех технических подзадач. 
+
+Приведем их в нормальный вид.
+
+### dragManager
+
+Перенос будет координироваться единым объектом. Назовем его `dragManager`.
+
+Для его создания используем не обычный синтаксис `{...}`, а вызов `new function`. Это позволит прямо при создании объявить дополнительные переменные и функции в замыкании, которыми могут пользоваться методы объекта, а также назначить обработчики:
+
+```js
+var dragManager = new function() {
+  
+  var dragObject = {};
+
+  var self = this; // для доступа к себе из обработчиков
+
+  function onMouseDown(e) { ... }
+  function onMouseMove(e) { ... }
+  function onMouseUp(e) { ... }
+
+  document.onmousedown = onMouseDown;
+  document.onmousemove = onMouseMove;
+  document.onmouseup = onMouseUp;
+
+  this.onDragEnd = function(dragObject, dropElem) { };
+  this.onDragCancel = function(dragObject) { };
+}
+```
+
+Всю работу будут выполнять обработчики `onMouse*`, которые оформлены как локальные функции. В данном случае они ставятся на `document` через `on...`, но вы легко можете поменять это на `addEventListener/attachEvent`.
+
+Внутренний объект `dragObject` будет содержать информацию об объекте переноса. 
+
+У него будут следующие свойства:
+<dl>
+<dt>`elem`</dt>
+<dd>Текущий зажатый мышью объект, если есть (ставится в `mousedown`).</dd>
+<dt>`avatar`</dt>
+<dd>Элемент-аватар, который передвигается по странице.</dd>
+<dt>`downX/downY`</dt>
+<dd>Координаты, на которых был клик `mousedown`</dd>
+<dt>`shiftX/shiftY`</dt>
+<dd>Относительный сдвиг курсора от угла элемента, вспомогательное свойство вычисляется в начале переноса.</dd>
+</dl>
+
+**Задачей `dragManager` является общее управление переносом.** Для обработки его окончания вызываются методы `onDrag*`, которые назначаются внешним кодом.
+
+Разработчик, подключив `dragManager`, описывает в этих методах, что делать при начале и завершении переноса. 
+
+[smart]
+Если в вашем распоряжении есть современный JavaScript-фреймворк, то можно заменить вызовы методов `onDrag*` на генерацию соответствующих событий.
+[/smart]
+
+### Реализация переноса иконок
+
+С использованием этого фреймворка перенос иконок браузеров в компьютер реализуется просто:
+
+```js
+dragManager.onDragEnd = function(dragObject, dropElem) {
+
+  // успешный перенос, показать улыбку классом computer-smile
+  dropElem.className = 'computer computer-smile';
+
+  // скрыть переносимый объект
+  dragObject.elem.style.display = 'none';
+
+  // убрать улыбку через 0.2 сек
+  setTimeout(function() { dropElem.className = 'computer'; }, 200);
+};
+
+dragManager.onDragCancel = function(dragObject) {
+  // откат переноса
+  dragObject.avatar.rollback(); 
+};
+```
+
+Результат:
+
+
+[iframe border=1 src="dragDemo" height=250 link edit]
+
+
+
+## Варианты расширения этого кода
+
+Существует масса возможных применений Drag'n'Drop. Реализациях всех из них здесь превратила бы довольно простой фреймворк в страшнейшего монстра.
+
+Поэтому мы разберем варианты расширений и их реализации, чтобы вы, при необходимости, легко могли написать то, что нужно.
+
+### Захватывать элемент можно только за "ручку"
+
+Функция `createAvatar(e)` может быть модифицирована, чтобы захватывать элемент можно было, только ухватившись за определенную зону. 
+
+Например, окно чата можно "взять", только захватив его за заголовок.
+
+Для этого достаточно проверять по `e.target`, куда, всё же, нажал посетитель. Если взять элемент на данных координатах нельзя, то `createAvatar` может вернуть `false`, и перенос не будет начат.
+
+### Проверка прав положить на droppable
+
+Бывает так, что не на любое место в `droppable` можно положить элемент. 
+
+Само решение "можно или нет" может зависеть как от переносимого элемента (или "аватара" как его полномочного представителя), так и от конкретного места в `droppable`, над которым посетитель отпустил кнопку мыши.
+
+Например: в админке есть дерево всех объектов сайта: статей, разделов, посетителей и т.п. 
+
+<ul>
+<li>В этом дереве есть узлы различных типов: "статьи", "разделы" и "пользователи".</li>
+<li>Все узлы являются переносимыми объектами.</li>
+<li>Узел "статья" (draggable) можно переносить в "раздел" (droppable), а узел "пользователи" -- нельзя. Но и то и другое можно поместить в "корзину".</li>
+</ul>
+
+Эта задача решается добавлением проверки в `findDroppable(e)`. Эта функция знает и об аватаре и о событии. При попытке положить в "неправильное" место функция `findDroppable(e)` должна возвращать `null`.
+
+Рассмотрим эту задачу поглубже, так как она встречается часто.
+
+**Есть две наиболее частые причины, по которым аватар нельзя положить на потенциальный `droppable`.**
+
+Первую мы уже рассмотрели: "несовпадение типов". Это как раз тот случай, когда "узлы-разделы" дерева админки могут принимать только "статьи", и не могут -- "посетителей".
+
+В этом случае мы можем проверить это в `findDroppable`, так как вся необходимая информация о типах у нас есть.
+
+Вторая причина -- посложнее.
+
+**Может не хватать прав на такое действие с `draggable/droppable`, в рамках наложенных на посетителя ограничений.**
+
+Например, человек не может положить статью именно в данный раздел.
+
+А возможно, объект переноса удален из базы администратором, и браузер об этом (пока) не знает -- мы должны корректно обрабатывать все случаи, включая этот.
+
+Здесь сложность в том, что **окончательное решение знает только сервер**. Значит, нужно сделать запрос. А элемент после отпускания мыши не может "зависнуть" над элементом в ожидании ответа, нужно его куда-то положить.
+
+**Как правило, применяют "оптимистичный" сценарий, по которому мы считаем, что перенос обычно успешен.**
+
+При нём посетитель кладет объект туда, куда он хочет. 
+
+Затем, в коде `onDragEnd`:
+<ol>
+<li>Визуально обрабатывается завершение переноса, как будто все ок.</li>
+<li>Производится асинхронный запрос к серверу, содержащий информацию о переносе.</li>
+<li>Сервер обрабатывает перенос и возвращает ответ, все ли в порядке.</li>
+<li>Если нет -- выводится ошибка и возвращается `avatar.rollback()`. Аватар в этом случае должен предусматривать возможность отката после успешного завершения.</li>
+</ol>
+
+**Процесс общения с сервером сопровождается индикацией загрузки и, при необходимости, блокировкой новых операций переноса до получения подтверждения.**
+</dd>
+</dl>
+
+
+### Индикация переноса
+
+Можно добавить методы `onDragEnter/onDragMove/onDragLeave` для интеграции с внешним кодом, которые вызываются при заходе (`onDragEnter`), при каждом передвижении (`onDragMove`), и при выходе из `droppable` (`onDragLeave`).
+
+При этом бывает, что нужно поддерживать перенос *в элемент*, но и перенос *между элементами*. Разберем два варианта такой ситуации:
+
+<dl>
+<dt>Поддержка трех видов переноса: "между", "под", "над" `droppable`</dt>
+<dd>Этот сценарий встречается, когда можно вставить статью как *в* существующий "узел-раздел" дерева, так и *между* разделами. 
+
+В этом случае `droppable` делится на 3 части по высоте: 25% - 50% - 25%, берутся координаты элемента и определяется попадание координаты события на нужную часть.
+
+В параметры `dragObject` добавляется флаг, обозначающий, куда по отношению к найденному `droppable` происходит перенос.
+</dd>
+<dt>Поддержка переноса только "между"</dt>
+<dd>Здесь есть два варианта.
+<ol>
+<li>Во-первых, можно разделить `droppable` в отношении 50%/50% и по координатам смотреть, куда мы попали.</li>
+<li>В некоторых случаях, например при вставке между `droppable`-элементами списка, можно считать, что *элемент вставляется перед тем `LI`, над которым проходит*. 
+
+А чтобы вставить после последнего -- нужно перетащить аватар на сам DOM-элемент списка, но не на существующий `droppable`, а в пустое место, которое оставляется внизу для этой цели.</li>
+</ol>
+</dd>
+</dl>
+
+Индикацию "переноса между" удобнее всего делать либо раздвижением элементов, либо показом полосы-индикатора <code>border-top/border-bottom</code>, как показано на рисунке ниже:
+
+<img src="between.png"> 
+
+### Анимация отмены переноса
+Отмену переноса и возврат аватара на место можно красиво анимировать.
+
+Один из частых вариантов -- скольжение объекта обратно к исходному месту, откуда его взяли. Для этого достаточно поправить `avatar.revert()` соотвествующим образом.
+
+## Итого
+
+Алгоритм Drag'n'Drop:
+<ol>
+<li>При `mousedown` запомнить координаты нажатия.</li>
+<li>При `mousemove` инициировать перенос, как только зажатый элемент передвинули на 3 пикселя или больше.
+<ol>
+<li>Создать аватар, если можно начать перенос с этой точки `draggable`.</li>  
+<li>Перемещать его по экрану. Новые координаты ставить по `e.pageX/pageY` с учетом изначального сдвига элемента относительно курсора.</li>
+</ol>
+</li>
+<li>При `mouseup` обработать завершение переноса. Элемент под аватаром получить по координатам, предварительно спрятав аватар.</li>
+</ol>
+
+Получившийся попутно с обсуждением технических моментов Drag'n'Drop фреймворк обладает рядом особенностей:
+
+[compare]
++Он прост. Он действительно очень прост.
++Он полностью кросс-браузерный, не содержит хаков.
++Он позволяет работать с большим количеством потенциальных `draggable`/`droppable`.
++Его легко расширить и поменять.
+[/compare]
+
+Вы можете получить файлы и посмотреть итоговое демо [edit src="dragDemo"]в песочнице[/edit].
+
+
+В зависимости от ваших задач, вы можете либо использовать его как отправную точку, либо реализовать свой. 
+
+ООП-вариант фреймворка находится в статье [](/drag-and-drop-plus).
+[head]
+<script>
+function getElementUnderClientXY(elem, clientX, clientY) {
+  var display = elem.style.display || '';
+  elem.style.display = 'none';
+
+  var target = document.elementFromPoint(clientX, clientY);
+
+  elem.style.display = display;
+
+  if (!target || target == document) { 
+    target = document.body; 
+  }
+
+  return target;
+}
+
+</script>
+[/head]
+[libs]
+getCoords.js
+[/libs]
\ No newline at end of file
diff --git a/2-ui/3-event-details/7-drag-and-drop-objects/between.png b/2-ui/3-event-details/7-drag-and-drop-objects/between.png
new file mode 100755
index 00000000..f570158f
Binary files /dev/null and b/2-ui/3-event-details/7-drag-and-drop-objects/between.png differ
diff --git a/2-ui/3-event-details/7-drag-and-drop-objects/dragDemo.view/DragManager.js b/2-ui/3-event-details/7-drag-and-drop-objects/dragDemo.view/DragManager.js
new file mode 100755
index 00000000..cd288616
--- /dev/null
+++ b/2-ui/3-event-details/7-drag-and-drop-objects/dragDemo.view/DragManager.js
@@ -0,0 +1,147 @@
+var dragManager = new function() {
+
+  /**
+   * составной объект для хранения информации о переносе:
+   * {
+   *   elem - элемент, на котором была зажата мышь
+   *   avatar - аватар
+   *   downX/downY - координаты, на которых был mousedown
+   *   shiftX/shiftY - относительный сдвиг курсора от угла элемента
+   * }
+  */
+  var dragObject = {};
+
+  var self = this;
+
+  function onMouseDown(e){
+
+    if (e.which != 1) return;
+
+    var elem = findDraggable(e);
+    if (!elem) return;
+
+    dragObject.elem = elem;
+
+    // запомним, что элемент нажат на текущих координатах pageX/pageY
+    dragObject.downX = e.pageX;
+    dragObject.downY = e.pageY;
+
+    return false;
+  }
+
+  function onMouseMove(e) {
+    if (!dragObject.elem) return; // элемент не зажат
+
+    if ( !dragObject.avatar ) { // если перенос не начат...
+      var moveX = e.pageX - dragObject.downX;
+      var moveY = e.pageY - dragObject.downY;
+
+      // если мышь передвинулась в нажатом состоянии недостаточно далеко
+      if ( Math.abs(moveX) < 3 && Math.abs(moveY) < 3 ) {        
+        return;
+      }
+
+      // начинаем перенос
+      dragObject.avatar = createAvatar(e); // создать аватар
+      if (!dragObject.avatar) { // отмена переноса, нельзя "захватить" за эту часть элемента
+        dragObject = {};
+        return;
+      }
+
+      // аватар создан успешно
+      // создать вспомогательные свойства shiftX/shiftY
+      var coords = getCoords(dragObject.avatar);
+      dragObject.shiftX = dragObject.downX - coords.left;
+      dragObject.shiftY = dragObject.downY - coords.top;
+
+      startDrag(e); // отобразить начало переноса
+    }
+
+    // отобразить перенос объекта при каждом движении мыши
+    dragObject.avatar.style.left = e.pageX - dragObject.shiftX + 'px';
+    dragObject.avatar.style.top = e.pageY - dragObject.shiftY + 'px';
+
+    return false;
+  }
+
+  function onMouseUp(e) {
+    if (dragObject.avatar) { // если перенос идет
+      finishDrag(e);
+    }
+
+    // перенос либо не начинался, либо завершился
+    // в любом случае очистим "состояние переноса" dragObject
+    dragObject = {};
+  }
+
+  function finishDrag(e) {
+      var dropElem = findDroppable(e);
+
+      if (!dropElem) {
+        self.onDragCancel(dragObject);
+      } else {
+        self.onDragEnd(dragObject, dropElem);
+      }
+  }
+
+  function createAvatar(e) {
+  
+    // запомнить старые свойства, чтобы вернуться к ним при отмене переноса
+    var avatar = dragObject.elem;
+    var old = {
+      parent: avatar.parentNode,
+      nextSibling: avatar.nextSibling,
+      position: avatar.position || '',
+      left: avatar.left || '',
+      top: avatar.top || '',
+      zIndex: avatar.zIndex || ''
+    };
+
+    // функция для отмены переноса
+    avatar.rollback = function() {
+      old.parent.insertBefore(avatar, old.nextSibling);
+      avatar.style.position = old.position;
+      avatar.style.left = old.left;
+      avatar.style.top = old.top;
+      avatar.style.zIndex = old.zIndex
+    };
+
+    return avatar;
+  }
+
+  function startDrag(e) {
+    var avatar = dragObject.avatar;
+
+    // инициировать начало переноса
+    document.body.appendChild(avatar);
+    avatar.style.zIndex = 9999;
+    avatar.style.position = 'absolute';
+  }
+
+  function findDraggable(event) {
+    var elem = event.target;
+    while(elem != document && elem.getAttribute('draggable') == null) {
+      elem = elem.parentNode;
+    }
+    return elem == document ? null : elem;
+  }
+
+  function findDroppable(event) {
+
+    var elem = getElementUnderClientXY(dragObject.avatar, event.clientX, event.clientY);
+
+    while(elem != document && elem.getAttribute('droppable') == null) {
+      elem = elem.parentNode;
+    }
+
+    return elem == document ? null : elem;
+  }
+
+  document.onmousemove = onMouseMove;
+  document.onmouseup = onMouseUp;
+  document.onmousedown = onMouseDown;
+
+  this.onDragEnd = function(dragObject, dropElem) { };
+  this.onDragCancel = function(dragObject) { };
+
+};
diff --git a/2-ui/3-event-details/7-drag-and-drop-objects/dragDemo.view/dragDemo.css b/2-ui/3-event-details/7-drag-and-drop-objects/dragDemo.view/dragDemo.css
new file mode 100755
index 00000000..c359f3d1
--- /dev/null
+++ b/2-ui/3-event-details/7-drag-and-drop-objects/dragDemo.view/dragDemo.css
@@ -0,0 +1,11 @@
+.computer { 
+      width: 93px;
+      height: 98px;
+      background: url(http://js.cx/clipart/computer.gif) no-repeat;
+      padding: 5px;
+      font-style: italic;
+    }
+
+.computer-smile {
+    background: url(http://js.cx/clipart/computer-smile.gif) no-repeat;      
+}
diff --git a/2-ui/3-event-details/7-drag-and-drop-objects/dragDemo.view/index.html b/2-ui/3-event-details/7-drag-and-drop-objects/dragDemo.view/index.html
new file mode 100755
index 00000000..4e4174d3
--- /dev/null
+++ b/2-ui/3-event-details/7-drag-and-drop-objects/dragDemo.view/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <script src="lib.js"></script>
+  <script src="DragManager.js"></script>
+  <link rel="stylesheet" type="text/css" href="dragDemo.css">
+  <script>
+    dragManager.onDragCancel = function(dragObject) {
+      dragObject.avatar.rollback();
+    };
+
+    dragManager.onDragEnd = function(dragObject, dropElem) {
+      dropElem.className = 'computer computer-smile';
+      dragObject.elem.style.display = 'none';
+      setTimeout(function() { dropElem.className = 'computer'; }, 200);
+    };
+  </script>
+</head>
+<body>
+
+<img src="http://js.cx/browsers/chrome_64.png" draggable>
+<img src="http://js.cx/browsers/firefox_64.png" draggable>
+<img src="http://js.cx/browsers/ie_64.png" draggable>
+<img src="http://js.cx/browsers/opera_64.png" draggable>
+<img src="http://js.cx/browsers/safari_64.png" draggable>
+
+<p>Браузер переносить сюда:</p>
+
+<div class="computer" droppable>
+</div>
+
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/7-drag-and-drop-objects/dragDemo.view/lib.js b/2-ui/3-event-details/7-drag-and-drop-objects/dragDemo.view/lib.js
new file mode 100755
index 00000000..5d08fb5b
--- /dev/null
+++ b/2-ui/3-event-details/7-drag-and-drop-objects/dragDemo.view/lib.js
@@ -0,0 +1,30 @@
+
+function getCoords(elem) {
+    var box = elem.getBoundingClientRect();
+
+    var body = document.body;
+    var docElem = document.documentElement;
+
+    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
+    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
+
+    var clientTop = docElem.clientTop || body.clientTop || 0;
+    var clientLeft = docElem.clientLeft || body.clientLeft || 0;
+
+    var top  = box.top +  scrollTop - clientTop;
+    var left = box.left + scrollLeft - clientLeft;
+
+    return { top: Math.round(top), left: Math.round(left) };
+}
+
+function getElementUnderClientXY(elem, clientX, clientY) {
+  var display = elem.style.display || '';
+  elem.style.display = 'none';
+
+  var target = document.elementFromPoint(clientX, clientY);
+
+  elem.style.display = display;
+
+  return target;
+}
+
diff --git a/2-ui/3-event-details/7-drag-and-drop-objects/shiftx.png b/2-ui/3-event-details/7-drag-and-drop-objects/shiftx.png
new file mode 100755
index 00000000..1d4a3a05
Binary files /dev/null and b/2-ui/3-event-details/7-drag-and-drop-objects/shiftx.png differ
diff --git a/2-ui/3-event-details/8-keyboard-events/1-numeric-input/solution.md b/2-ui/3-event-details/8-keyboard-events/1-numeric-input/solution.md
new file mode 100644
index 00000000..d7de0b52
--- /dev/null
+++ b/2-ui/3-event-details/8-keyboard-events/1-numeric-input/solution.md
@@ -0,0 +1,36 @@
+# Подсказка: выбор события
+
+Нам нужно событие `keypress`, так как по скан-коду мы не отличим, например, клавишу `'2'` обычную и в верхнем регистре (символ `'@'`).
+
+Нужно отменять действие по умолчанию (т.е. ввод), если введена не цифра.
+
+# Решение
+
+Нам нужно проверять *символы* при вводе, поэтому, будем использовать событие `keypress`.
+
+Алгоритм такой: получаем символ и проверяем, является ли он цифрой. Если не является, то отменяем действие по умолчанию.
+
+Кроме того, игнорируем специальные символы и нажатия со включенным [key Ctrl]/[key Alt]/[key Cmd].
+
+Итак, вот решение:
+
+```js
+input.onkeypress = function(e) {
+  e = e || event;
+  
+  if (e.ctrlKey || e.altKey || e.metaKey) return;  
+
+  var chr = getChar(e);
+
+  // с null надо осторожно в неравенствах, 
+  // т.к. например null >= '0' => true
+  // на всякий случай лучше вынести проверку chr == null отдельно
+  if (chr == null) return;
+  
+  if (chr < '0' || chr > '9') {
+    return false;
+  }
+}
+```
+
+[edit src="solution"]Открыть полное решение в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/3-event-details/8-keyboard-events/1-numeric-input/solution.view/index.html b/2-ui/3-event-details/8-keyboard-events/1-numeric-input/solution.view/index.html
new file mode 100755
index 00000000..defe8319
--- /dev/null
+++ b/2-ui/3-event-details/8-keyboard-events/1-numeric-input/solution.view/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+
+Введите ваш возраст: <input type="text">
+
+
+<script>
+
+document.getElementsByTagName('input')[0].onkeypress = function(e) {
+
+  e = e || event;
+
+  if (e.ctrlKey || e.altKey || e.metaKey) return;
+
+  var chr = getChar(e);
+
+  // с null надо осторожно в неравенствах, т.к. например null >= '0' => true!
+  // на всякий случай лучше вынести проверку chr == null отдельно
+  if (chr == null) return;
+
+  if (chr < '0' || chr > '9') {
+    return false;
+  }
+
+}
+
+function getChar(event) {
+  if (event.which == null) {
+    if (event.keyCode < 32) return null;
+    return String.fromCharCode(event.keyCode) // IE
+  }
+
+  if (event.which!=0 && event.charCode!=0) {
+    if (event.which < 32) return null;
+    return String.fromCharCode(event.which)   // остальные
+  }
+
+  return null; // специальная клавиша
+}
+
+</script>
+</body>
+</html>
+
diff --git a/2-ui/3-event-details/8-keyboard-events/1-numeric-input/source.view/index.html b/2-ui/3-event-details/8-keyboard-events/1-numeric-input/source.view/index.html
new file mode 100755
index 00000000..1050e2e4
--- /dev/null
+++ b/2-ui/3-event-details/8-keyboard-events/1-numeric-input/source.view/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+
+Введите ваш возраст: <input type="text">
+
+
+<script>
+
+/* ваш код .. .*/
+
+
+// вспомогательная функция, если понадобится
+
+function getChar(event) {
+  if (event.which == null) {
+    if (event.keyCode < 32) return null;
+    return String.fromCharCode(event.keyCode) // IE
+  }
+
+  if (event.which!=0 && event.charCode!=0) {
+    if (event.which < 32) return null;
+    return String.fromCharCode(event.which)   // остальные
+  }
+
+  return null; // специальная клавиша
+}
+
+</script>
+</body>
+</html>
+
diff --git a/2-ui/3-event-details/8-keyboard-events/1-numeric-input/task.md b/2-ui/3-event-details/8-keyboard-events/1-numeric-input/task.md
new file mode 100644
index 00000000..b2d407c8
--- /dev/null
+++ b/2-ui/3-event-details/8-keyboard-events/1-numeric-input/task.md
@@ -0,0 +1,13 @@
+# Поле только для цифр
+
+[importance 5]
+
+При помощи событий клавиатуры сделайте так, чтобы в поле можно было вводить только цифры. Пример ниже.
+
+[iframe border=1 src="solution"]
+
+В поле должны нормально работать специальные клавиши [key Delete]/[key Backspace] и сочетания c [key Ctrl]/[key Alt]/[key Cmd].
+
+[edit src="source" task/]
+
+P.S. Конечно, при помощи альтернативных способов ввода (например, вставки мышью), посетитель всё же может ввести что угодно.
\ No newline at end of file
diff --git a/2-ui/3-event-details/8-keyboard-events/2-check-sync-keydown/solution.md b/2-ui/3-event-details/8-keyboard-events/2-check-sync-keydown/solution.md
new file mode 100644
index 00000000..b7d3275e
--- /dev/null
+++ b/2-ui/3-event-details/8-keyboard-events/2-check-sync-keydown/solution.md
@@ -0,0 +1,11 @@
+# Ход решения
+
+<ul>
+<li>Функция `runOnKeys` -- с переменным числом аргументов. Для их получения используйте `arguments`.</li>
+<li>Используйте два обработчика: `document.onkeydown` и `document.onkeyup`. Первый отмечает нажатие клавиши в объекте `pressed = {}`, устанавливая `pressed[keyCode] = true`, а второй -- удаляет это свойство. Если все клавиши с кодами из `arguments` нажаты -- запускайте `func`.</li>
+<li>Возникнет проблема с повторным нажатием сочетания клавиш после `alert`, решите её.</li>
+</ul>
+
+# Решение
+
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/3-event-details/8-keyboard-events/2-check-sync-keydown/solution.view/index.html b/2-ui/3-event-details/8-keyboard-events/2-check-sync-keydown/solution.view/index.html
new file mode 100755
index 00000000..1867633e
--- /dev/null
+++ b/2-ui/3-event-details/8-keyboard-events/2-check-sync-keydown/solution.view/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<body>
+
+<p>Нажмите одновременно "Q" и "W" (в любой раскладке).</p>
+
+<script>
+
+function runOnKeys(func) {
+  var codes = [].slice.call(arguments, 1);
+
+  var pressed = {};
+
+  document.onkeydown = function(e) {
+    e = e || window.event;
+
+    pressed[e.keyCode] = true;
+
+    for(var i=0; i<codes.length; i++) { // проверить, все ли клавиши нажаты
+      if (!pressed[codes[i]]) {
+        return;
+      }
+    }
+
+    // во время показа alert, если посетитель отпустит клавиши - не возникнет keyup
+    // при этом JavaScript "пропустит" факт отпускания клавиш, а pressed[keyCode] останется true
+    // чтобы избежать "залипания" клавиши -- обнуляем статус всех клавиш, пусть нажимает всё заново
+    pressed = {};
+
+    func();
+
+  };
+
+  document.onkeyup = function(e) {
+    e = e || window.event;
+
+    delete pressed[e.keyCode];
+  };
+
+}
+
+runOnKeys(
+  function() { alert("Привет!") },
+  "Q".charCodeAt(0),
+  "W".charCodeAt(0)
+);
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/8-keyboard-events/2-check-sync-keydown/task.md b/2-ui/3-event-details/8-keyboard-events/2-check-sync-keydown/task.md
new file mode 100644
index 00000000..d3884444
--- /dev/null
+++ b/2-ui/3-event-details/8-keyboard-events/2-check-sync-keydown/task.md
@@ -0,0 +1,17 @@
+# Отследить одновременное нажатие 
+
+[importance 3]
+
+Создайте функцию `runOnKeys(func, code1, code2, ... code_n)`, которая запускает `func` при одновременном нажатии клавиш со скан-кодами `code1`, `code2`, ..., `code_n`.
+
+Например, код ниже выведет `alert` при одновременном нажатии клавиш `"Q"` и `"W"` (в любом регистре, в любой раскладке)
+
+```js
+runOnKeys(
+  function() { alert("Привет!") }, 
+  "Q".charCodeAt(0), 
+  "W".charCodeAt(0)
+);
+```
+
+[demo src="solution"]
\ No newline at end of file
diff --git a/2-ui/3-event-details/8-keyboard-events/article.md b/2-ui/3-event-details/8-keyboard-events/article.md
new file mode 100644
index 00000000..794be610
--- /dev/null
+++ b/2-ui/3-event-details/8-keyboard-events/article.md
@@ -0,0 +1,340 @@
+# Клавиатура: keyup, keydown, keypress
+
+Здесь мы рассмотрим основные "клавиатурные" события и работу с ними.
+[cut]
+
+## Тестовый стенд [#keyboard-test-stand]
+
+Для того, чтобы лучше понять, как работают события клавиатуры, можно использовать тестовый стенд.
+
+Попробуйте различные варианты нажатия клавиш в текстовом поле.
+
+
+[example src="keyboard-dump"]
+
+По мере чтения статьи, если возникнут вопросы -- возвращайтесь к этому стенду.
+
+## События keydown и keyup
+
+События `keydown/keyup` происходят при нажатии/отпускании клавиши и позволяют получить её *скан-код* в свойстве `keyCode`.
+
+Скан-код клавиши одинаков в любой раскладке и в любом регистре. Например, клавиша [key z] может означать символ `"z"`, `"Z"` или `"я"`, `"Я"` в русской раскладке, но её *скан-код* будет всегда одинаков: `90`.
+
+В действии:
+
+```html
+<input onkeydown="this.nextSibling.innerHTML = event.keyCode"><b></b>
+```
+
+<input size="40" placeholder="Нажмите клавишу, скан-код будет справа" onkeydown="this.nextSibling.innerHTML = event.keyCode"><b></b>
+
+### Какими бывают скан-коды?
+
+Для буквенно-цифровых клавиш, скан-код будет равен коду соответствующей заглавной английской буквы/цифры.
+
+Например, при нажатии клавиши [key S] (не важно, каков регистр и раскладка) её скан-код будет равен `"S".charCodeAt(0)`.
+
+С другими символами, например, знаками пунктуации, ситуация тоже понятна. Есть  таблица кодов, которую можно взять, например, из статьи Джона Уолтера: <a href="http://unixpapa.com/js/key.html">JavaScript Madness: Keyboard Events</a>, или же можно нажать на нужную клавишу на [тестовом стенде](#keyboard-test-stand) и получить код.
+
+Когда-то в этих кодах была масса кросс-браузерных несовместимостей. Сейчас всё проще -- таблицы кодов в различных браузерах почти полностью совпадают.
+
+Но некоторые несовместимости, всё же, остались. Вы можете увидеть их в таблице ниже. Слева -- клавиша с символом, а справа -- скан-коды в различных браузерах.
+
+<table>
+<tr><th>Клавиша</th><th>Firefox</th><th>Остальные браузеры</th></tr>
+<tr>
+<td>[key ;]</td>
+<td>59</td>
+<td>186</td>
+</tr>
+<tr>
+<td>[key =]</td>
+<td>107</td>
+<td>187</td>
+</tr>
+<tr>
+<td>[key -]</td>
+<td>109</td>
+<td>189</td>
+</tr>
+</table>
+
+
+## Событие keypress
+
+Событие `keypress` возникает сразу после `keydown`, если нажата *символьная* клавиша, т.е. нажатие приводит к появлению символа.
+
+Любые буквы, цифры генерируют `keypress`. Управляющие клавиши, такие как [key Ctrl], [key Shift], [key F1], [key F2].. -- `keypress` не генерируют.
+
+Событие `keypress` позволяет получить *код символа*. В отличие от скан-кода, он специфичен именно для символа и различен для `"z"` и `"я"`. 
+
+Код символа хранится в свойствах: `charCode` и `which`. Здесь скрывается целое "гнездо" кросс-браузерных несовместимостей, разбираться с которыми нет никакого смысла -- запомнить сложно, а на практике нужна лишь одна "правильная" функция, позволяющая получить код везде.
+
+### Получение символа в keypress [#getChar]
+
+Кросс-браузерная функция для получения символа из события `keypress`:
+
+```js
+//+ autorun
+// event.type должен быть keypress
+function getChar(event) {
+  if (event.which == null) {  // IE
+    if (event.keyCode < 32) return null; // спец. символ
+    return String.fromCharCode(event.keyCode) 
+  } 
+
+  if (event.which!=0 && event.charCode!=0) { // все кроме IE
+    if (event.which < 32) return null; // спец. символ
+    return String.fromCharCode(event.which); // остальные
+  } 
+
+  return null; // спец. символ
+}
+```
+
+Для общей информации -- вот основные браузерные особенности, учтённые в `getChar(event)`:
+
+<ol>
+<li>Во всех браузерах, кроме IE, у события `keypress` есть свойство `charCode`, которое содержит код символа.</li>
+<li>Браузер IE для `keypress` не устанавливает `charCode`, а вместо этого он записывает код символа в `keyCode` (в `keydown/keyup` там хранится скан-код).</li>
+</ol>
+
+Также, посмотрите -- в функции выше используется проверка `if(event.which!=0)`, а не более короткая `if(event.which)`. Это не случайно! При `event.which=null` первое сравнение даст `true`, а второе -- `false`.
+
+В действии:
+
+```html
+<input onkeypress="this.nextSibling.innerHTML = getChar(event)+''"><b></b>
+```
+
+<input size="40" placeholder="Наберите символ, он будет справа" onkeypress="this.nextSibling.innerHTML = getChar(event)+''"><b></b>
+
+
+[warn header="Неправильный `getChar`"]
+В сети вы можете найти другую функцию того же назначения:
+
+```js
+function getChar(event) {
+  return String.fromCharCode(event.keyCode || event.charCode);
+}
+```
+
+Она работает неверно для многих специальных клавиш, потому что не фильтрует их. Например, она возвращает символ амперсанда `"&"`, когда нажата клавиша 'Стрелка Вверх'. 
+[/warn]
+
+[smart header="Свойства-модификаторы"]
+
+Как и у других событий, связанных с пользовательским вводом, поддерживаются свойства `shiftKey`, `ctrlKey`, `altKey` и `metaKey`.
+
+Они установлены в `true`, если нажаты клавиши-модификаторы -- соответственно, [key Shift], [key Ctrl], [key Alt] и [key Cmd] для Mac.
+[/smart]
+
+## Отмена пользовательского ввода   
+
+Появление символа можно предотвратить, если отменить действие браузера на  `keydown/keypress`:
+
+```html
+Попробуйте что-нибудь ввести в этих полях:
+<input *!*onkeydown="return false"*/!* type="text" size="30">
+<input *!*onkeypress="return false"*/!* type="text" size="30">
+```
+
+Попробуйте что-нибудь ввести в этих полях (не получится):
+
+<input onkeydown="return false" type="text" size="30">
+
+<input onkeypress="return false" type="text" size="30">
+
+При тестировании на стенде вы можете заметить, что отмена действия браузера при `keydown` также предотвращает само событие `keypress`.
+ 
+[warn header="При `keydown/keypress` значение ещё старое"]
+На момент срабатывания `keydown/keypress` *клавиша ещё не обработана браузером*. 
+
+Поэтому в обработчике значение `input.value` -- старое, т.е. до ввода. Это можно увидеть в примере ниже. Вводите символы `abcd..`, а справа будет текущее `input.value`: `abc..`
+
+<input onkeydown="this.nextSibling.innerHTML=this.value" type="text" placeholder="Вводите символы"><b></b>
+
+А что, если мы хотим обработать `input.value` именно после ввода? Самое простое решение -- использовать событие `keyup`, либо запланировать обрабочик через `setTimeout(..,0)`.
+[/warn]
+
+
+[warn header="Не для работы с формами"]
+Распространённая ошибка -- использовать события клавиатуры для работы с полями ввода в формах.
+
+Это неправильно. События клавиатуры предназначены именно для работы с клавиатурой. Да, их можно использовать и для `<input>`, но будут побочные эффекты.
+
+Например, текст может быть вставлен мышкой, при помощи правого клика и меню, без единого нажатия клавиши. И как нам помогут события клавиатуры?
+
+Некоторые мобильные устройства не генерируют `keypress/keydown`, а сразу вставляют текст в поле. Отменить ввод для них таким образом нельзя, как и вообще отловить его.
+
+Далее мы разберём [события для элементов форм](/events-change), которые позволяют работать с вводом в формы правильно.
+[/warn]
+
+### Отмена любых действий  
+
+Отменять можно не только символ, а любое действие клавиш.
+
+Например:
+<ul>
+<li>При отмене [key Backspace] -- символ не удалится.</li>
+<li>При отмене [key PageDown] -- страница не прокрутится.</li>
+<li>При отмене [key Tab] -- курсор не перейдёт на следующее поле.</li>
+</ul>
+
+Конечно же, есть действия, которые в принципе нельзя отменить, в первую очередь -- те, которые происходят на уровне операционной системы. Комбинация Alt+F4 инициирует закрытие браузера в Windows, что бы мы ни делали в JavaScript. 
+
+### Демо: перевод символа в верхний регистр
+
+В примере ниже действие браузера отменяется с помощью `return false`, а вместо него в `input` добавляется значение в верхнем регистре:
+
+```html
+<input id="my" type="text" size="2">
+<script>
+document.getElementById('my').onkeypress = function(e) {  
+  // спец. сочетание - не обрабатываем  
+  if (e.ctrlKey || e.altKey || e.metaKey) return;
+  
+  var char = getChar(e);  
+
+  if (!char) return; // спец. символ - не обрабатываем
+  
+  this.value = char.toUpperCase();
+  
+  return false;
+};
+</script>
+```
+
+В действии: <input id="my" type="text" size="2">
+<script>
+document.getElementById('my').onkeypress = function(e) {
+  var char = getChar(e);  
+  
+  // спец. сочетание - не обрабатываем  
+  if (e.ctrlKey || e.altKey || e.metaKey) return;
+  if (!char) return; // спец. символ - не обрабатываем
+  
+  this.value = char.toUpperCase();
+  
+  return false;
+}
+</script>
+
+
+## Особенности клавиш и ОС [#keyboard-events-order]
+
+События `keydown/keyup` возникают всегда. А `keypress` -- по-разному.
+
+Есть три основных категории клавиш, работа с которыми отличается.
+
+Перечислим их в таблице, обращая основное внимание на особенности работы с ними.
+
+<table class="bordered">
+<tr>
+  <th>Категория</th>
+  <th>Примеры</th>
+  <th>События</th>
+  <th>Описание</th>
+<tr>
+  <td>Печатные клавиши</td>
+  <td style="white-space:nowrap">[key S] [key 1] [key ,]</td>
+  <td>`keydown`
+`keypress`
+`keyup`</td>
+<td>Нажатие  вызывает `keydown` и `keypress`. 
+Когда клавишу отпускают, срабатывает `keyup`. 
+
+Исключение -- CapsLock под MacOS, он глючит неимоверно:
+<ul>
+<li>В Safari/Chrome/Opera: при включении только `keydown`, при отключении только `keyup`.</li>
+<li>В Firefox: при включении и отключении только `keydown`.</li>
+</ul>
+Попробуйте на тестовом стенде.
+ </td>
+ 
+<tr>
+  <td>Специальные клавиши</td>
+  <td style="white-space:nowrap">[key Alt] [key Esc] [key ⇧]</td>
+  <td>`keydown`
+`keyup`</td>
+<td>Нажатие  вызывает `keydown`. 
+Когда клавишу отпускают, срабатывает `keyup`. 
+
+Некоторые браузеры могут дополнительно генерировать и `keypress`, например IE для [key Esc]. Попробуйте нажать [key Esc] на тестовом стенде в разных браузерах -- и увидите: в IE `keypress` есть, а в остальных -- нет.
+
+На практике это не доставляет проблем, так как для специальных клавиш мы всегда используем `keydown/keyup`.
+ </td> 
+
+</tr>
+
+
+<tr>
+  <td>Сочетания с печатной клавишей</td>
+  <td style="white-space:nowrap">
+
+ [key Alt+E]
+ [key Ctrl+У]
+ [key Cmd+1]
+
+</td>
+  <td>`keydown`
+`keypress?`
+`keyup`</td>
+<td>
+Браузеры под Windows -- не генерируют `keypress`, браузеры под MacOS -- генерируют. 
+
+Кроме того, если сочетание вызвало браузерное действие или диалог ("Сохранить файл", "Открыть" и т.п., ряд диалогов можно отменить при `keydown`), то `keypress/keyup` может не быть.
+</td>
+</tr>
+</table>
+
+## Автоповтор
+
+При долгом нажатии клавиши возникает *автоповтор*. По стандарту, должны генерироваться многократные события `keydown (+keypress)`, и вдобавок стоять свойство [repeat=true](http://www.w3.org/TR/DOM-Level-3-Events/#events-KeyboardEvent-repeat) у объекта события.
+
+То есть поток событий должен быть такой:
+
+```
+keydown
+keypress
+keydown
+keypress
+..повторяется, пока клавиша не отжата...
+keyup
+```
+
+Однако в реальности на это полагаться нельзя. На момент написания статьи, под Firefox(Linux) генерируется и `keyup`:
+
+```
+keydown
+keypress
+keyup
+keydown
+keypress
+keyup
+..повторяется, пока клавиша не отжата...
+keyup
+```
+
+...А Chrome под MacOS не генерирует `keypress`. В общем, "зоопарк". Полагаться можно только на `keydown` при каждом автонажатии и `keyup` по отпусканию клавиши.
+
+## Итого, рецепты 
+
+Если обобщить данные из этой таблицы и статьи, то можно сделать ряд выводов:
+
+<ol>
+<li>Для реализации горячих клавиш, включая сочетания -- используем `keydown`.</li>
+<li>Если нужен именно символ -- используем `keypress`. При этом функция `getChar` позволит получить символ и отфильтровать лишние срабатывания.</li>
+<li>Ловля CapsLock глючит под MacOS. Её можно организовать при помощи проверки `navigator.userAgent` и `navigator.platform`, а лучше вообще не трогать эту клавишу.</li>
+</ol>
+
+Для работы с вводом в формы, существуют [события для форм](/events-change), которые мы разберём позже. Их можно использовать как отдельно от событий клавиатуры, так и вместе с ними.
+ 
+[head]
+<style>
+
+##scan-codes th, #scan-codes td {
+  text-align: center;
+}
+</style>
+[/head]
\ No newline at end of file
diff --git a/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/index.html b/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/index.html
new file mode 100755
index 00000000..cca17c41
--- /dev/null
+++ b/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+
+  <form id="form" onsubmit="return false">
+
+    Предотвратить действие по умолчанию для:<label><input type="checkbox" name="keydownStop" value="1"> keydown</label>&nbsp;&nbsp;&nbsp;<label><input type="checkbox" name="keypressStop" value="1"> keypress</label>&nbsp;&nbsp;&nbsp;<label><input type="checkbox" name="keyupStop" value="1"> keyup</label>
+    
+    <p>
+    Игнорировать:<label><input type="checkbox" name="keydownIgnore" value="1"> keydown</label>&nbsp;&nbsp;&nbsp;<label><input type="checkbox" name="keypressIgnore" value="1"> keypress</label>&nbsp;&nbsp;&nbsp;<label><input type="checkbox" name="keyupIgnore" value="1"> keyup</label></p>
+
+    <p>Сфокусируйтесь на поле и нажмите какую-нибудь клавишу.</p>
+
+    <input type="text" placeholder="Поле для тестов" id="kinput">
+    
+    <textarea rows="18" id="text"></textarea>
+    <input type="button" value="Очистить" onclick="text.value = ''"/></form>    
+  </form>  
+  <script src="script.js"></script>
+
+
+</body>
+</html>
+
diff --git a/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/script.js b/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/script.js
new file mode 100755
index 00000000..80a22e7e
--- /dev/null
+++ b/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/script.js
@@ -0,0 +1,23 @@
+
+kinput.onkeydown = kinput.onkeyup = kinput.onkeypress = handle;
+
+function handle(e) {
+  if (form.elements[e.type + 'Ignore'].checked) return;
+   
+  var evt = e.type
+  while (evt.length < 10) evt += ' '
+  text.value += evt + 
+    ' keyCode=' + e.keyCode + 
+    ' which=' + e.which + 
+    ' charCode=' + e.charCode +
+    ' char=' + String.fromCharCode(e.keyCode || e.charCode) +
+    (e.shiftKey ? ' +shift' : '') +
+    (e.ctrlKey ? ' +ctrl' : '') +
+    (e.altKey ? ' +alt' : '') +
+    (e.metaKey ? ' +meta' : '') + "\n";
+    
+  
+  if (form.elements[e.type + 'Stop'].checked) {
+    e.preventDefault();
+  }
+}
diff --git a/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/style.css b/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/style.css
new file mode 100755
index 00000000..3dda314c
--- /dev/null
+++ b/2-ui/3-event-details/8-keyboard-events/keyboard-dump.view/style.css
@@ -0,0 +1,20 @@
+form {
+  border:solid gray 1px;
+  margin:10px;
+  padding:10px;
+}
+
+#kinput {
+  font-size:150%;
+  width:600px;
+}
+
+#text {
+  width:600px;
+  border:1px solid black;
+  display: block;
+}
+
+form label {
+  display: inline;
+}
diff --git a/2-ui/3-event-details/9-event-onscroll/1-avatar-above-scroll/solution.md b/2-ui/3-event-details/9-event-onscroll/1-avatar-above-scroll/solution.md
new file mode 100644
index 00000000..33000522
--- /dev/null
+++ b/2-ui/3-event-details/9-event-onscroll/1-avatar-above-scroll/solution.md
@@ -0,0 +1 @@
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/3-event-details/9-event-onscroll/1-avatar-above-scroll/solution.view/index.html b/2-ui/3-event-details/9-event-onscroll/1-avatar-above-scroll/solution.view/index.html
new file mode 100755
index 00000000..21216dc7
--- /dev/null
+++ b/2-ui/3-event-details/9-event-onscroll/1-avatar-above-scroll/solution.view/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    body, html {
+      margin: 0;
+      padding: 0;
+    }
+
+    .column-left {
+      float: left;
+      width: 30%;
+      background: #aef;
+    }
+
+    .column-right {
+      margin-left: 30%;
+      width: 70%;
+      background: tan;
+      overflow: auto; /* расшириться вниз захватить float'ы */
+    }
+
+    .header {
+      line-height: 60px;
+      background: yellow;
+    }
+
+    .inner {
+      margin: 1em;
+      font-size: 130%;
+    }
+
+    #avatar {
+      float:left;
+      margin: 0 1em .5em 0;
+      border: 1px solid black;
+      text-align:center;
+      background:white;
+    }
+
+    .fixed {
+      position: fixed;
+      top: 0;
+      left: 0;
+    }
+  </style>
+</head>
+<body>
+
+<div class="header">Шапка</div>
+
+<div class="column-left">
+<div class="inner">
+  <h3>Персонажи:</h3>
+  <ul>
+    <li>Винни-Пух</li>
+    <li>Ослик Иа</li>
+    <li>Сова</li>
+    <li>Кролик</li>
+  </ul>
+</div>
+</div>
+<div class="column-right">
+<div class="inner">
+
+<h3>Винни-Пух</h3>
+
+<div id="avatar">
+  <img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
+  <div>Кадр из мультфильма</div>
+</div>
+
+<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
+
+<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
+
+<p>Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни), содержавшейся в 1920-х в Лондонском зоопарке.</p>
+
+<p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую надпись.</p>
+
+<p>«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь в 1954; между этими датами — ряд трагических событий германской истории.</p>
+
+
+<p>Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2].
+Алан Милн, Кристофер Робин и Винни-Пух. Фотография из Британской национальной портретной галереи</p>
+
+<p>Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].</p>
+
+<p>Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных — опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5], возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.</p>
+</div>
+</div>
+
+<script>
+  var avatarElem = document.getElementById('avatar');
+
+  var avatarSourceBottom = avatarElem.getBoundingClientRect().bottom + window.pageYOffset;
+
+  window.onscroll = function() {
+    if (avatarElem.classList.contains('fixed') && window.pageYOffset < avatarSourceBottom) {
+      avatarElem.classList.remove('fixed');
+    } else if (window.pageYOffset > avatarSourceBottom) {
+      avatarElem.classList.add('fixed');
+    }
+  };
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/9-event-onscroll/1-avatar-above-scroll/source.view/index.html b/2-ui/3-event-details/9-event-onscroll/1-avatar-above-scroll/source.view/index.html
new file mode 100755
index 00000000..3c793861
--- /dev/null
+++ b/2-ui/3-event-details/9-event-onscroll/1-avatar-above-scroll/source.view/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    body, html {
+      margin: 0;
+      padding: 0;
+    }
+
+    .column-left {
+      float: left;
+      width: 30%;
+      background: #aef;
+    }
+
+    .column-right {
+      margin-left: 30%;
+      width: 70%;
+      background: tan;
+      overflow: auto; /* расшириться вниз захватить float'ы */
+    }
+
+    .header {
+      line-height: 60px;
+      background: yellow;
+    }
+
+    .inner {
+      margin: 1em;
+      font-size: 130%;
+    }
+
+    #avatar {
+      float:left;
+      margin: 0 1em .5em 0;
+      border: 1px solid black;
+      text-align:center;
+      background:white;
+    }
+
+  </style>
+</head>
+<body>
+
+<div class="header">Шапка</div>
+
+<div class="column-left">
+<div class="inner">
+  <h3>Персонажи:</h3>
+  <ul>
+    <li>Винни-Пух</li>
+    <li>Ослик Иа</li>
+    <li>Сова</li>
+    <li>Кролик</li>
+  </ul>
+</div>
+</div>
+<div class="column-right">
+<div class="inner">
+
+<h3>Винни-Пух</h3>
+
+<div id="avatar">
+  <img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
+  <div>Кадр из мультфильма</div>
+</div>
+
+<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
+
+<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
+
+<p>Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни), содержавшейся в 1920-х в Лондонском зоопарке.</p>
+
+<p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую надпись.</p>
+
+<p>«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь в 1954; между этими датами — ряд трагических событий германской истории.</p>
+
+
+<p>Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2].
+Алан Милн, Кристофер Робин и Винни-Пух. Фотография из Британской национальной портретной галереи</p>
+
+<p>Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].</p>
+
+<p>Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных — опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5], возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.</p>
+</div>
+</div>
+
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/9-event-onscroll/1-avatar-above-scroll/task.md b/2-ui/3-event-details/9-event-onscroll/1-avatar-above-scroll/task.md
new file mode 100644
index 00000000..38f1b6e0
--- /dev/null
+++ b/2-ui/3-event-details/9-event-onscroll/1-avatar-above-scroll/task.md
@@ -0,0 +1,12 @@
+# Аватар наверху при прокрутке
+
+[importance 5]
+
+Сделайте так, чтобы при прокрутке ниже элемента `#avatar` (картинка с Винни-Пухом) -- он продолжал показываться в левом-верхнем углу.
+
+При прокрутке вверх -- должен возвращаться на обычное место.
+
+Прокрутите вниз, чтобы увидеть:
+[iframe src="solution" height=300 link border="1"]
+
+[edit task src="source"/]
diff --git a/2-ui/3-event-details/9-event-onscroll/2-updown-button/solution.md b/2-ui/3-event-details/9-event-onscroll/2-updown-button/solution.md
new file mode 100644
index 00000000..e3f80b4d
--- /dev/null
+++ b/2-ui/3-event-details/9-event-onscroll/2-updown-button/solution.md
@@ -0,0 +1,95 @@
+Добавим в документ `DIV` с кнопкой:
+
+```html
+<div id="updown"></div>
+```
+
+Сама кнопка должна иметь `position:fixed`.
+
+```css
+#updown {
+  position: fixed;
+  top: 30px;
+  left: 10px;
+  cursor: pointer;
+}
+```
+
+Кнопка является CSS-спрайтом, поэтому мы дополнительно добавляем ей размер и два состояния:
+
+```css
+#updown {
+  height: 9px;
+  width: 14px;
+  position: fixed;
+  top: 30px;
+  left: 10px;
+  cursor: pointer;
+}
+
+#updown.up {
+  background: url(...updown.gif) left top;
+}
+
+#updown.down {
+  background: url(...updown.gif) left -9px;
+}
+```
+
+Для решения необходимо аккуратно разобрать все возможные состояния кнопки и указать, что делать при каждом.
+
+Состояние -- это просто класс элемента: `up/down` или пустая строка, если кнопка не видна.
+
+При прокрутке состояния меняются следующим образом:
+
+```js
+window.onscroll = function() {
+  var pageY = window.pageYOffset || document.documentElement.scrollTop;
+  var innerHeight = document.documentElement.clientHeight;
+
+  switch(updownElem.className) {
+    case '':
+      if (pageY > innerHeight) {
+        updownElem.className = 'up';
+      }
+      break;
+
+    case 'up':
+      if (pageY < innerHeight) {
+        updownElem.className = '';
+      }
+      break;
+
+    case 'down':
+      if (pageY > innerHeight) {
+        updownElem.className = 'up';
+      }
+      break;
+  }
+}
+```
+
+При клике:
+
+```js
+var pageYLabel = 0;
+
+updownElem.onclick = function() {
+  var pageY = window.pageYOffset || document.documentElement.scrollTop;
+
+  switch(this.className) {
+    case 'up':
+      pageYLabel = pageY;
+      window.scrollTo(0, 0);
+      this.className = 'down';
+      break;
+
+    case 'down':
+      window.scrollTo(0, pageYLabel);
+      this.className = 'up';
+  }
+
+}
+```
+
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/3-event-details/9-event-onscroll/2-updown-button/solution.view/index.html b/2-ui/3-event-details/9-event-onscroll/2-updown-button/solution.view/index.html
new file mode 100755
index 00000000..d94be96f
--- /dev/null
+++ b/2-ui/3-event-details/9-event-onscroll/2-updown-button/solution.view/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <style>
+        body, html {
+            height:100%;
+            width: 100%;
+            padding:  0;
+            margin:  0;
+        }
+        #matrix {
+            width: 400px;
+            margin: auto;
+            overflow: auto;
+            text-align: justify;
+        }
+
+
+        #updown {
+          height: 9px;
+          width: 14px;
+          position: fixed;
+          top: 30px;
+          left: 10px;
+          cursor: pointer;
+        }
+
+        #updown.up {
+          background: url(http://js.cx/clipart/updown.gif) left top;
+        }
+
+        #updown.down {
+          background: url(http://js.cx/clipart/updown.gif) left -9px;
+        }
+
+    </style>
+    <meta charset="utf-8">
+</head>
+<body>
+
+<div id="matrix">
+  <script>for (var i = 0; i < 2000; i++) document.writeln(i)</script>
+</div>
+
+<div id="updown"></div>
+
+<script>
+var updownElem = document.getElementById('updown');
+
+var pageYLabel = 0;
+
+updownElem.onclick = function() {
+  var pageY = window.pageYOffset || document.documentElement.scrollTop;
+
+  switch(this.className) {
+    case 'up':
+      pageYLabel = pageY;
+      window.scrollTo(0, 0);
+      this.className = 'down';
+      break;
+
+    case 'down':
+      window.scrollTo(0, pageYLabel);
+      this.className = 'up';
+  }
+
+}
+
+window.onscroll = function() {
+  var pageY = window.pageYOffset || document.documentElement.scrollTop;
+  var innerHeight = document.documentElement.clientHeight;
+
+  switch(updownElem.className) {
+    case '':
+      if (pageY > innerHeight) {
+        updownElem.className = 'up';
+      }
+      break;
+
+    case 'up':
+      if (pageY < innerHeight) {
+        updownElem.className = '';
+      }
+      break;
+
+    case 'down':
+      if (pageY > innerHeight) {
+        updownElem.className = 'up';
+      }
+      break;
+
+  }
+}
+
+</script>
+</body>
+</html>
diff --git a/2-ui/3-event-details/9-event-onscroll/2-updown-button/source.view/index.html b/2-ui/3-event-details/9-event-onscroll/2-updown-button/source.view/index.html
new file mode 100755
index 00000000..814e090c
--- /dev/null
+++ b/2-ui/3-event-details/9-event-onscroll/2-updown-button/source.view/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+    <style>
+        body, html {
+            height:100%;
+            width: 100%;
+            padding:  0;
+            margin:  0;
+        }
+        #matrix {
+            width: 400px;
+            margin: auto;
+            overflow: auto;
+            text-align: justify;
+        }
+
+    </style>
+    <meta charset="utf-8">
+</head>
+<body>
+
+<img src="http://js.cx/clipart/updown.gif">
+
+<div id="matrix">
+  <script>for (var i = 0; i < 2000; i++) document.writeln(i)</script>
+</div>
+
+<script>
+  // ... ваш код
+  // при необходимости, в документ можно добавить элементы и стили
+</script>
+</body>
+</html>
diff --git a/2-ui/3-event-details/9-event-onscroll/2-updown-button/task.md b/2-ui/3-event-details/9-event-onscroll/2-updown-button/task.md
new file mode 100644
index 00000000..31c5ea17
--- /dev/null
+++ b/2-ui/3-event-details/9-event-onscroll/2-updown-button/task.md
@@ -0,0 +1,21 @@
+# Кнопка вверх-вниз
+
+[importance 3]
+
+Создайте кнопку навигации, которая помогает при прокрутке страницы.
+
+Работать должна следующим образом:
+<ul>
+<li>Пока страница промотана меньше чем на высоту экрана вниз -- кнопка не видна.</li>
+<li>При промотке страницы вниз больше, чем на высоту экрана, появляется кнопка "стрелка вверх". При нажатии на нее страница запоминает текущую прокрутку и прыгает вверх, а кнопка меняется на "стрелка вниз" и остается такой, пока посетитель не прокрутит вниз больше, чем один экран, после чего вновь изменится на "стрелка вверх".</li>
+<li>Нажатие на "стрелка вниз" отправляет обратно на запомненную позицию.</li>
+</ul>
+Должен получиться удобный навигационный помощник.
+
+Посмотрите, как оно должно работать, в ифрейме ниже. Прокрутите ифрейм, навигационная стрелка появится слева. 
+
+[iframe border="1" height="200" link src="solution"]
+
+В исходный документ включена кнопка.
+
+[edit src="source" task/]
diff --git a/2-ui/3-event-details/9-event-onscroll/3-load-visible-img/solution.md b/2-ui/3-event-details/9-event-onscroll/3-load-visible-img/solution.md
new file mode 100644
index 00000000..d43306ff
--- /dev/null
+++ b/2-ui/3-event-details/9-event-onscroll/3-load-visible-img/solution.md
@@ -0,0 +1,36 @@
+Функция должна по текущей прокрутке определять, какие изображения видимы, и загружать их.
+
+Она должна срабатывать не только при прокрутке, но и при загрузке. Вполне достаточно для этого -- указать ее вызов в скрипте под страницей, вот так:
+
+```js
+... страница ...
+
+function isVisible(elem) {
+
+  var coords = elem.getBoundingClientRect();
+
+  var windowHeight = document.documentElement.clientHeight;
+
+  // верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
+  var topVisible = coords.top > 0 && coords.top < windowHeight;
+  var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
+
+  return topVisible || bottomVisible;
+}
+
+
+*!*
+showVisible(); 
+window.onscroll = showVisible;
+*/!*
+```
+
+При запуске функция ищет все видимые картинки с `realsrc` и перемещает значение `realsrc` в `src`. Обратите внимание, т.к. атрибут `realsrc` нестандартный, то для доступа к нему мы используем `get/setAttribute`. А `src` -- стандартный, поэтому можно обратиться по DOM-свойству.
+
+**Функция проверки видимости `isVisible(elem)` получает координаты текущей видимой области и сравнивает их с элементом.**
+
+Для видимости достаточно, чтобы координаты верхней(или нижней) границы элемента находились между границами видимой области.
+
+В решении также указан вариант с `isVisible`, который расширяет область видимости на +-1 страницу (высота страницы -- `document.documentElement.clientHeight`).
+
+[edit src="solution"]Открыть полное решение в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/3-event-details/9-event-onscroll/3-load-visible-img/solution.view/index.html b/2-ui/3-event-details/9-event-onscroll/3-load-visible-img/solution.view/index.html
new file mode 100755
index 00000000..7b5514f9
--- /dev/null
+++ b/2-ui/3-event-details/9-event-onscroll/3-load-visible-img/solution.view/index.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .news-item {
+      width: 700px;
+      text-align: justify;
+      margin-top: 20px;
+    }
+    .news-item .title {
+      font-weight: bold;
+      margin-bottom: 5px;
+    }
+  </style>
+</head>
+<body>
+
+<p>Тексты и картинки взяты с сайта http://etoday.ru. </p>
+
+<h3>Все изображения с realsrc загружаются, когда становятся видимыми.</h3>
+
+
+<div class="news-item">
+<div class="title">Космопорт Америка \ Architecture</div>
+
+Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также обеспечена взлетно-посадочная полоса длиной в три километра.
+
+<div class="illustrations">
+<img src="http://js.cx/lazyimg/1.gif" width="200" height="140" realsrc="http://js.cx/lazyimg/1.jpg">
+</div>
+</div>
+
+<div class="news-item">
+<div class="title">Рокер и супермодель в Vogue Russia \ Celebrities</div>
+
+Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной.
+<div class="illustrations">
+<img src="http://js.cx/lazyimg/1.gif" width="200" height="259" realsrc="http://js.cx/lazyimg/2-1.jpg">
+<img src="http://js.cx/lazyimg/1.gif" width="200" height="260" realsrc="http://js.cx/lazyimg/2-2.jpg">
+</div>
+</div>
+
+<div class="news-item">
+<div class="title">Старость - не радость в Vogue Italia \ Fashion Photo</div>
+
+Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf), Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad).
+<div class="illustrations">
+<img src="http://js.cx/lazyimg/1.gif" width="341" height="474" realsrc="http://js.cx/lazyimg/3-1.jpg">
+<img src="http://js.cx/lazyimg/1.gif" width="338" height="474" realsrc="http://js.cx/lazyimg/3-2.jpg">
+</div>
+</div>
+
+<div class="news-item">
+<div class="title">"Вышитый рентген" Matthew Cox \ Art</div>
+
+Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе. Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели.
+
+Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
+<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="680" height="452" realsrc="http://js.cx/lazyimg/4.jpg"></div>
+</div>
+
+<div class="news-item">
+<div class="title">Подарочный каталог Apple 1983 \ Creative</div>
+
+Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно!
+Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
+<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="600" height="393" realsrc="http://js.cx/lazyimg/5.jpg"></div>
+</div>
+
+<div class="news-item">
+<div class="title">Винтажные открытки к празднику Halloween \ Illustrations</div>
+
+Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
+
+<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="680" height="433" realsrc="http://js.cx/lazyimg/6.jpg"></div>
+</div>
+
+<div class="news-item">
+<div class="title">Фотограф Emily Lee \ Photography</div>
+
+Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
+
+<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="680" height="453" realsrc="http://js.cx/lazyimg/7.jpg"></div>
+</div>
+
+<div class="news-item">
+<div class="title">Иконы моды в Fashimals \ Creative</div>
+
+Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
+
+<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="600" height="622" realsrc="http://js.cx/lazyimg/8.jpg"></div>
+</div>
+
+
+<script>
+/**
+ * Проверяет элемент на попадание в видимую часть экрана.
+ * Для попадания достаточно, чтобы верхняя или нижняя границы элемента были видны.
+*/
+function isVisible(elem) {
+
+  var coords = elem.getBoundingClientRect();
+
+  var windowHeight = document.documentElement.clientHeight;
+
+  // верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
+  var topVisible = coords.top > 0 && coords.top < windowHeight;
+  var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
+
+  return topVisible || bottomVisible;
+}
+
+/**
+Вариант проверки, считающий элемент видимым,
+если он не более чем -1 страница назад или +1 страница вперед
+
+function isVisible(elem) {
+
+  var coords = elem.getBoundingClientRect();
+
+  var windowHeight = document.documentElement.clientHeight;
+
+  var extendedTop = -windowHeight;
+  var extendedBottom = 2 * windowHeight;
+
+  // top visible || bottom visible
+  var topVisible = coords.top > extendedTop && coords.top < extendedBottom;
+  var bottomVisible = coords.bottom < extendedBottom && coords.bottom > extendedTop;
+
+  return topVisible || bottomVisible;
+}
+*/
+
+function showVisible() {
+  var imgs = document.getElementsByTagName('img');
+  for(var i=0; i<imgs.length; i++) {
+
+    var img = imgs[i];
+
+    var realsrc = img.getAttribute('realsrc');
+    if (!realsrc) continue;
+
+    if (isVisible(img)) {
+      img.src = realsrc;
+      img.setAttribute('realsrc', '');
+    }
+  }
+
+}
+
+window.onscroll = showVisible;
+showVisible();
+
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/3-event-details/9-event-onscroll/3-load-visible-img/source.view/index.html b/2-ui/3-event-details/9-event-onscroll/3-load-visible-img/source.view/index.html
new file mode 100755
index 00000000..37843ce1
--- /dev/null
+++ b/2-ui/3-event-details/9-event-onscroll/3-load-visible-img/source.view/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<style>
+		.news-item {
+			width: 700px;
+			text-align: justify;
+			margin-top: 20px;
+		}
+		.news-item .title {
+			font-weight: bold;
+			margin-bottom: 5px;
+		}
+	</style>
+</head>
+<body>
+
+<p>Тексты и картинки взяты с сайта http://etoday.ru. </p>
+
+<h3>Все изображения с realsrc загружаются, когда становятся видимыми.</h3>
+
+
+<div class="news-item">
+<div class="title">Космопорт Америка \ Architecture</div>
+
+Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также обеспечена взлетно-посадочная полоса длиной в три километра.
+
+<div class="illustrations">
+<img src="http://js.cx/lazyimg/1.gif" width="200" height="140" realsrc="http://js.cx/lazyimg/1.jpg">
+</div>
+</div>
+
+<div class="news-item">
+<div class="title">Рокер и супермодель в Vogue Russia \ Celebrities</div>
+
+Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной.
+<div class="illustrations">
+<img src="http://js.cx/lazyimg/1.gif" width="200" height="259" realsrc="http://js.cx/lazyimg/2-1.jpg">
+<img src="http://js.cx/lazyimg/1.gif" width="200" height="260" realsrc="http://js.cx/lazyimg/2-2.jpg">
+</div>
+</div>
+
+<div class="news-item">
+<div class="title">Старость - не радость в Vogue Italia \ Fashion Photo</div>
+
+Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf), Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad).
+<div class="illustrations">
+<img src="http://js.cx/lazyimg/1.gif" width="341" height="474" realsrc="http://js.cx/lazyimg/3-1.jpg">
+<img src="http://js.cx/lazyimg/1.gif" width="338" height="474" realsrc="http://js.cx/lazyimg/3-2.jpg">
+</div>
+</div>
+
+<div class="news-item">
+<div class="title">"Вышитый рентген" Matthew Cox \ Art</div>
+
+Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе. Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели.
+
+Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
+<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="680" height="452" realsrc="http://js.cx/lazyimg/4.jpg"></div>
+</div>
+
+<div class="news-item">
+<div class="title">Подарочный каталог Apple 1983 \ Creative</div>
+
+Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно!
+Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
+<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="600" height="393" realsrc="http://js.cx/lazyimg/5.jpg"></div>
+</div>
+
+<div class="news-item">
+<div class="title">Винтажные открытки к празднику Halloween \ Illustrations</div>
+
+Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
+
+<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="680" height="433" realsrc="http://js.cx/lazyimg/6.jpg"></div>
+</div>
+
+<div class="news-item">
+<div class="title">Фотограф Emily Lee \ Photography</div>
+
+Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
+
+<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="680" height="453" realsrc="http://js.cx/lazyimg/7.jpg"></div>
+</div>
+
+<div class="news-item">
+<div class="title">Иконы моды в Fashimals \ Creative</div>
+
+Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
+
+<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="600" height="622" realsrc="http://js.cx/lazyimg/8.jpg"></div>
+</div>
+
+
+<script>
+  // ... ваш код ...
+</script>
+
+</body>
+</html>
diff --git a/2-ui/3-event-details/9-event-onscroll/3-load-visible-img/task.md b/2-ui/3-event-details/9-event-onscroll/3-load-visible-img/task.md
new file mode 100644
index 00000000..751b37c9
--- /dev/null
+++ b/2-ui/3-event-details/9-event-onscroll/3-load-visible-img/task.md
@@ -0,0 +1,49 @@
+# Загрузка видимых изображений
+
+[importance 4]
+
+Задача, которая описана ниже, демонстрирует результативный метод оптимизации страницы.
+
+С целью экономии трафика и более быстрой загрузки страницы изображения на ней заменяются на "макеты".
+
+Вместо такого изображения:
+
+```html
+<img src="yozhik.jpg" width="128" height="128">
+```
+
+<img src="http://js.cx/clipart/yozhik.jpg" width="128" height="128">
+
+
+Стоит вот такое:
+
+```html
+<img *!*src="1.gif"*/!* width="128" height="128" *!*realsrc="yozhik.jpg"*/!*>
+```
+
+<img src="http://js.cx/lazyimg/1.gif" width="128" height="128">
+
+То есть настоящий URL находится в атрибуте `realsrc` (название атрибута можно выбрать любое). А в `src` поставлен серый GIF размера 1x1, и так как `width/height` правильные, то он растягивается, так что вместо изображения виден серый прямоугольник. 
+
+При этом, чтобы браузер загрузил изображение, нужно заменить значение `src` на то, которое находится в `realsrc`.
+
+**Если страница большая, то замена больших изображений на такие макеты существенно убыстряет полную загрузку страницы.** Это особенно заметно в случае, когда на странице много анонсов новостей с картинками или изображений товаров, из которых многие находятся за пределами прокрутки.
+
+ Кроме того, для мобильных устройств JavaScript может подставлять URL уменьшенного варианта картинки.
+
+**Напишите код, который при прокрутке окна загружает ставшие видимыми изображения.** То есть, как только изображение попало в видимую часть документа -- в `src` нужно прописать правильный URL из `realsrc`. 
+
+Работать должно так: <a target="_blank" href="/files/tutorial/browser/events/lazyimg/index.html">открыть работающую страницу в новом окне</a>.
+
+<ul>
+<li>При начальной загрузке некоторые изображения должны быть видны сразу, до прокрутки. Код должен это учитывать.</li>
+<li>Некоторые изображения могут быть обычными, без `realsrc`. Их код не должен трогать вообще.</li>
+<li>Также код не должен перегружать уже показанное изображение.</li>
+</ul>
+
+**Дополнительно: расширьте код, чтобы загружались изображения не только видимые сейчас, но и на страницу вперед и назад от текущего места.**
+
+[edit src="source" task/]
+
+
+P.S. Страница прокручивается только вверх или вниз, горизонтальной прокрутки нет.
\ No newline at end of file
diff --git a/2-ui/3-event-details/9-event-onscroll/article.md b/2-ui/3-event-details/9-event-onscroll/article.md
new file mode 100644
index 00000000..ad575bc5
--- /dev/null
+++ b/2-ui/3-event-details/9-event-onscroll/article.md
@@ -0,0 +1,31 @@
+# Прокрутка: событие scroll
+
+Событие `onscroll` происходит, когда элемент прокручивается.
+
+В отличие от события `onwheel` (колесико мыши), его могут генерировать только прокручиваемые элементы или окно `window`. Но зато оно генерируется всегда, при любой прокрутке, не обязательно "мышиной".
+
+[cut]
+Например, следующая функция при прокрутке окна выдает количество прокрученных пикселей:
+
+```js
+//+ autorun
+window.onscroll = function() { 
+  var scrolled = window.pageYOffset || document.documentElement.scrollTop;
+  document.getElementById('showScroll').innerHTML = scrolled + 'px';
+}
+```
+
+В действии:
+Текущая прокрутка = <b id="showScroll">прокрутите окно</b>
+
+Каких-либо особенностей события здесь нет, разве что для его использования нужно отлично представлять, как получить текущее значение прокрутки или прокрутить документ. Об этом мы говорили ранее, в главе [](/metrics).
+
+Событие `onscroll` используется достаточно часто для:
+<ul>
+<li>Подгрузки содержимого элементов, ставших видимыми после прокрутки.</li>
+<li>Показа дополнительных элементов навигации, важных в текущем положении прокрутки.</li>
+</ul>
+
+Вашему вниманию предлагаются несколько задач, которые вы можете решить сами или посмотреть использование `onscroll` на их примере.
+
+
diff --git a/2-ui/3-event-details/index.md b/2-ui/3-event-details/index.md
new file mode 100644
index 00000000..11860ec4
--- /dev/null
+++ b/2-ui/3-event-details/index.md
@@ -0,0 +1,5 @@
+# События в деталях
+
+Основные типы событий, которые нужны в 95% случаев. Глубоко изучаем их особенности и применение. 
+
+Вы можете читать этот раздел в любом порядке или кратко просмотреть его и вернуться к конкретным событиям, когда они понадобятся.
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md
new file mode 100644
index 00000000..cdf6dffb
--- /dev/null
+++ b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md
@@ -0,0 +1,25 @@
+Решение:
+
+```html
+<!--+ run -->
+<select>
+  <option value="Rock">Рок</option>
+  <option value="Blues" selected>Блюз</option>
+</select>
+
+<script>
+  var select = document.body.children[0];
+
+  // 1) 
+  var selectedOption = select.options[select.selectedIndex];
+  alert(selectedOption.value);
+
+  // 2)
+  var newOption = new Option("Classic", "Классика");
+  select.appendChild(newOption);
+ 
+  // 3)
+  newOption.selected = true;
+</script>
+```
+
diff --git a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md
new file mode 100644
index 00000000..86685734
--- /dev/null
+++ b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md
@@ -0,0 +1,19 @@
+# Добавьте опцию к селекту
+
+[importance 5]
+
+Есть селект:
+
+```html
+<select>
+  <option value="Rock">Рок</option>
+  <option value="Blues" selected>Блюз</option>
+</select>
+```
+
+При помощи JavaScript:
+<ol>
+<li>Выведите значение и текст текущей выбранной опции.</li>
+<li>Добавьте опцию: `<option value="Classic">Классика</option>`.</li>
+<li>Сделайте её выбранной.</li>
+</ol>
diff --git a/2-ui/4-forms-controls/1-form-elements/article.md b/2-ui/4-forms-controls/1-form-elements/article.md
new file mode 100644
index 00000000..7ec731af
--- /dev/null
+++ b/2-ui/4-forms-controls/1-form-elements/article.md
@@ -0,0 +1,306 @@
+# Навигация и свойства элементов формы
+
+Элементы управления, такие как `<form>`, `<input>` и другие имеют большое количество своих важных свойств и ссылок.
+
+[cut]
+
+## Псевдомассив form.elements
+
+Элементы `FORM` можно получить по имени или номеру, используя свойство `document.forms[name/index]`.
+
+Например:
+
+```js
+document.forms.my -- форма с именем 'my'
+document.forms[0] -- первая форма в документе
+```
+
+**Любой *элемент* формы `form` можно получить аналогичным образом, используя свойство `form.elements`.**
+
+<img src="form.png">
+
+Например:
+
+```html
+<!--+ run height=40 -->
+<body>
+<form name="my">
+  <input name="one" value="1">
+  <input name="two" value="2">
+</form>
+
+<script>
+var form = document.forms.my; // можно document.forms[0]
+
+var elem = form.elements.one;  // можно form.elements[0]
+
+alert(elem.value); // "один"
+</script>
+</body>
+```
+
+**Может быть несколько элементов с *одинаковым именем*. В таком случае `form.elements[name]` вернет коллекцию элементов**, например:
+
+```html
+<!--+ run height=40 -->
+<body>
+<form>
+  <input type="radio" name="*!*age*/!*" value="10">
+  <input type="radio" name="*!*age*/!*" value="20">
+</form>
+
+<script>
+var form = document.forms[0];
+
+var elems = form.elements.age;
+
+alert(elems[0].value); // 10, первый input
+</script>
+</body>
+```
+
+Эти ссылки не зависят от окружающих тегов. Элемент может быть "зарыт" где-то глубоко в форме, но он всё равно доступен через `form.elements`.
+
+**Свойство `elements` также есть у элементов `<fieldset>`.**
+Вот пример:
+
+```html
+<!--+ run height=80 -->
+<body>
+<form>
+  <fieldset name="set"><legend>fieldset</legend>
+      <input name="text" type="text">
+  </fieldset>
+</form>
+
+<script>
+var form = document.forms[0];
+
+alert( form.elements.text ); // INPUT
+*!*
+alert( form.elements.set.elements.text ); // INPUT
+*/!*
+</script>
+</body>
+```
+
+Спецификация: [HTML5 Forms](http://www.w3.org/TR/html5/forms.html).
+
+[warn header="Доступ `form.name` тоже работает, но с особенностями"]
+Получить доступ к элементам формы можно не только через `form.elements[name/index]`, но и проще: `form[index/name]`.
+ 
+Этот способ короче, так как обладает одной неприятной особенностью: если к элементу обратиться по его `name`, а потом свойство `name` изменить, то он по-прежнему будет доступен под старым именем.
+
+Звучит странно, поэтому посмотрим на примере.
+
+```html
+<!--+ run height=40 -->
+<form name="myform"> <input name="text"> </form>
+
+<script>
+var form = document.forms.myform;
+
+alert(form.elements.text == form.text); // true, это тот самый INPUT
+
+form.text.name = "new-name"; // меняем name ему
+
+// нет больше элемента с таким именем
+alert(form.elements.text); // undefined
+
+alert(form.text); //  INPUT (а должно быть undefined!)
+</script>
+```
+
+[/warn]
+
+## Ссылка на форму element.form
+
+По элементу можно получить его форму, используя свойство `element.form`.
+
+Пример:
+
+```html
+<!--+ run height=40 -->
+<body>
+<form>
+  <input type="text" name="*!*surname*/!*">
+</form>
+
+<script>
+var form = document.forms[0];
+
+var elem = form.elements.surname;
+
+*!*
+alert(elem.form == form); // true
+*/!*
+</script>
+</body>
+```
+
+Познакомиться с другими свойствами элементов можно в спецификации [HTML5 Forms](http://www.w3.org/TR/html5/forms.html).
+
+## Элемент label
+
+Элемент `label` -- один из самых важных в формах. 
+
+**Клик на `label` засчитывается как фокусировка или клик на элементе формы, к которому он относится.**
+
+Это позволяет посетителям кликать на большой красивой метке, а не на маленьком квадратике `input type=checkbox` (`radio`). Конечно, это очень удобно.
+ 
+Есть два способа показать, какой элемент относится к `label`:
+
+<ol>
+<li>Дать метке атрибут `for`, равный `id` соответствующего `input`:
+
+```html
+<!--+ autorun -->
+<table>
+  <tr>
+    <td><label for="agree">Согласен с правилами</label></td>
+    <td><input id="agree" type="checkbox"></td>
+  </tr>
+  <tr>
+    <td><label for="not-a-robot">Я не робот</label></td>
+    <td><input id="not-a-robot" type="checkbox"></td>
+  </tr>
+</table>
+```
+
+</li>
+<li>Завернуть элемент в `label`. В этом случае можно обойтись без дополнительных атрибутов:
+
+```html
+<!--+ autorun -->
+<label>Кликни меня <input type="checkbox"></label>
+```
+
+</li>
+</ol>
+
+## Элементы input и textarea
+
+Для большинства типов `input` значение ставится/читается через свойство `value`.
+
+```js
+input.value = "Новое значение";
+textarea.value = "Новый текст";
+```
+
+[warn header="Не используйте `textarea.innerHTML`"]
+Для элементов `textarea` также доступно свойство `innerHTML`, но лучше им не пользоваться: оно хранит только HTML, изначально присутствовавший в элементе, и не меняется при изменении значения.
+[/warn]
+
+Исключения -- `input type="checkbox"` и `input type="radio"`
+
+**Текущее "отмеченное" состояние для `checkbox` и `radio` находится в свойстве `checked` (`true/false`).**
+
+```js
+if (input.checked) { 
+  alert("Чекбокс выбран");
+}
+```
+
+## Элементы select и option
+
+Селект в JavaScript можно установить двумя путями: поставив значение  `select.value`, либо установив свойство `select.selectedIndex` в номер нужной опции.:
+
+```js
+select.selectedIndex = 0; // первая опция
+```
+
+Установка `selectedIndex = -1` очистит выбор.
+
+**Список элементов-опций доступен через `select.options`.**
+
+Если `select` допускает множественный выбор (атрибут `multiple`), то значения можно получить/установить, сделав цикл по `select.options`. При этом выбранные опции будут иметь свойство `option.selected = true`.
+
+Пример:
+
+```html
+<!--+ run -->
+<form name="form">
+  <select name="genre" *!*multiple*/!*>
+    <option value="blues" selected>Мягкий блюз</option>
+    <option value="rock" selected>Жёсткий рок</option>
+    <option value="classic">Классика</option>
+  </select>
+</form>
+
+<script>
+var form = document.forms[0];
+var select = form.elements.genre;
+
+for (var i=0; i<select.options.length; i++) {
+  var option = select.options[i];
+*!*
+  if(option.selected) {
+    alert(option.value);
+  }
+*/!*
+}
+</script>
+```
+
+Спецификация: <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980">HTMLSelectElement</a>.
+
+[smart header="`new Option`"]
+В стандарте [the Option Element](http://dev.w3.org/html5/spec/the-option-element.html#the-option-element) есть любопытный короткий синтаксис для создания элемента с тегом `option`:
+
+```js
+option = new Option( text, value, defaultSelected, selected);
+```
+
+Параметры:
+<ul>
+<li>`text` -- содержимое,</li>
+<li>`value` -- значение,</li>
+<li>`defaultSelected` и `selected` поставьте в `true`, чтобы сделать элемент выбранным.</li>
+</ul>
+
+Его можно использовать вместо `document.createElement('option')`, например:
+
+```js
+var option = new Option("Текст", "value"); 
+// создаст <option value="value">Текст</option>
+```
+
+Такой же элемент, но выбранный:
+
+```js
+var option = new Option("Текст", "value", true, true);
+```
+
+[/smart]
+
+[smart header="Дополнительные свойства `option`"]
+
+У элементов `option` также есть особые свойства, которые могут оказаться полезными (см. [The Option Element](http://dev.w3.org/html5/spec/the-option-element.html#the-option-element)):
+
+<dl>
+<dt>`selected`</dt>
+<dd>выбрана ли опция</dd>
+<dt>`index`</dt>
+<dd>номер опции в списке селекта</dd>
+<dt>`text`</dt>
+<dd>Текстовое содержимое опции (то, что видит посетитель).</dd>
+</dl>
+
+[/smart]
+
+
+## Итого
+
+Свойства для навигации по формам:
+
+<dl>
+<dt>`document.forms`</dt>
+<dd>Форму можно получить как <code>document.forms[name/index].</dd>
+<dt>`form.elements`</dt>
+<dd>Элементы в форме: <code>form.elements[name/index]</code>. Каждый элемент имеет ссылку на форму в свойстве `form`. Свойство `elements` также есть у `<fieldset>`.</dd>
+</dl>
+
+Значение элементов читается/ставится через `value` или `checked`.
+
+Для элемента `select` можно задать опцию по номеру через `select.selectedIndex` и перебрать опции через `select.options`. При этом выбранные опции (в том числе при мультиселекте) будут иметь свойство `option.selected = true`.
+
diff --git a/2-ui/4-forms-controls/1-form-elements/form.png b/2-ui/4-forms-controls/1-form-elements/form.png
new file mode 100755
index 00000000..062470d0
Binary files /dev/null and b/2-ui/4-forms-controls/1-form-elements/form.png differ
diff --git a/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/solution.md b/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/solution.md
new file mode 100644
index 00000000..be5f9b5f
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/solution.md
@@ -0,0 +1,52 @@
+Состояние элемента определяется наличием класса `placeholder`. Для простоты будем считать, что это -- единственный возможный класс у `INPUT'а`
+
+При фокусировке, если в элементе находится плейсхолдер -- он должен исчезать:
+
+```js
+input.onfocus = function() {
+  if (this.className == 'placeholder') {
+    prepareInput(this);
+  }
+}
+
+function prepareInput(input) { // превратить элемент в простой пустой input
+  input.className = '';
+  input.value = '';
+}
+```
+
+...Затем элемент потеряет фокус. При этом нужно возвратить плейсхолдер, но только в том случае, если элемент пустой:
+
+```js
+input.onblur = function() {
+  if (this.value == '') { // если пустой
+    resetInput(this); // заполнить плейсхолдером
+  }
+}
+
+function resetInput(input) {
+  input.className = 'placeholder';
+  input.value = 'E-mail';
+}
+```
+
+Это решение можно сделать удобнее в поддержке, если при выполнении `prepareInput` копировать значение в специальное свойство, а в `resetInput` -- восстанавливать его:
+
+```js
+function prepareInput(input) {
+  input.className = '';
+*!*
+  input.oldValue = input.value;
+*/!*
+  input.value = '';
+}
+
+function resetInput(input) {
+  input.className = 'placeholder';
+  input.value = input.oldValue;
+}
+```
+
+Теперь, если понадобится изменить значение плейсхолдера -- это достаточно сделать в HTML, и не надо трогать JavaScript-код.
+
+[edit src="solution"]Полное решение[/edit]
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/solution.view/index.html
new file mode 100755
index 00000000..ddf7c1c6
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/solution.view/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    .placeholder {
+      color: gray;
+    }
+  </style>
+</head>
+<body>
+  
+
+<input type="text" class="placeholder" value="E-mail">
+
+
+
+<script>
+  var input = document.getElementsByTagName('input')[0];
+
+  function prepareInput(input) {
+    input.className = '';
+    input.oldValue = input.value;
+    input.value = '';
+  }
+
+  function resetInput(input) {
+    input.className = 'placeholder';
+    input.value = input.oldValue;
+  }
+  
+
+  input.onfocus = function() {
+    if (this.className == 'placeholder') {
+      prepareInput(this);
+    }
+  }
+
+  input.onblur = function() {
+    if (this.value == '') {
+      resetInput(this);
+    }
+  }
+  
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/source.view/index.html
new file mode 100755
index 00000000..47b37be7
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/source.view/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    .placeholder {
+      color: gray;
+    }
+  </style>
+</head>
+<body>
+  
+
+<input type="text" class="placeholder" value="E-mail">
+
+
+
+<script>
+  var input = document.getElementsByTagName('input')[0];
+
+  // ...
+
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/task.md b/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/task.md
new file mode 100644
index 00000000..32bb7af0
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/1-emulate-placeholder/task.md
@@ -0,0 +1,18 @@
+# Плейсхолдер
+
+[importance 5]
+
+Реализуйте плейсхолдер на JavaScript, чтобы он работал в IE9-.
+
+Правила работы плейсхолдера:
+<ul>
+<li>Элемент изначально содержит плейсхолдер. Специальный класс `placeholder` придает ему серый цвет.</li>
+<li>При фокусировке плейсхолдер пропадает.</li>
+<li>При снятии фокуса, если поле пустое -- плейсхолдер возвращается.</li>
+</ul>
+
+Все три пункта должны быть соблюдены кросс-браузерно. Пример:
+
+[iframe src="solution" height=40]
+
+[edit src="source" task/]
diff --git a/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/solution.md b/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/solution.md
new file mode 100644
index 00000000..260dd373
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/solution.md
@@ -0,0 +1,110 @@
+# Алгоритм
+
+Самый естественный алгоритм решения:
+<ol>
+<li>При клике мышонок получает фокус. Для этого нужно либо заменить `DIV` на другой тег, либо добавить ему `tabindex="-1"`.</li>
+<li>Когда на элементе фокус, то клавиатурные события будут срабатывать прямо на нём. То есть ловим `mousie.onkeydown`.
+
+Мы выбираем `keydown`, потому что он позволяет во-первых отлавливать нажатия на спец. клавиши (стрелки), а во-вторых, отменить действие браузера, которым по умолчанию является прокрутка страницы.
+</li>
+<li>При нажатии на стрелки двигаем мышонка через `position:absolute` и `top/left`.</li>
+</ol>
+
+Дальше решение -- попробуйте сделать сами. Возможны подводные камни :)
+
+# Решение
+
+<ol>
+<li>
+При получении фокуса -- готовим мышонка к перемещению:
+
+```js
+mousie.onfocus = function() {
+  this.style.position = 'relative';
+  this.style.left = '0px';
+  this.style.top = '0px';
+}
+```
+
+</li>
+<li>Коды для клавиш стрелок можно узнать, нажимая на них на [тестовом стенде](#keyboard-test-stand). Вот они: 37-38-39-40 (влево-вверх-вправо-вниз).
+
+При нажатии стрелки -- двигаем мышонка:
+
+```js
+mousie.onkeydown = function(e) {
+  switch(e.keyCode) {
+  case 37: // влево
+    this.style.left = parseInt(this.style.left)-this.offsetWidth+'px';
+    return false;
+  case 38: // вверх
+    this.style.top = parseInt(this.style.top)-this.offsetHeight+'px';
+    return false;
+  case 39: // вправо
+    this.style.left = parseInt(this.style.left)+this.offsetWidth+'px';
+    return false;
+  case 40: // вниз
+    this.style.top = parseInt(this.style.top)+this.offsetHeight+'px';
+    return false;
+  }
+}
+```
+
+Обратите внимание, что действием по умолчанию для стрелок является прокрутка страницы. Поэтому, чтобы её отменить, нужно использовать `return false`.
+
+Когда пользователь убирает фокус с мышки, то она перестает реагировать на клавиши. Нет нужды удалять обработчики на `blur`, потому что браузер перестанет вызывать `keydown`.
+</li>
+</ol>
+
+**В решении выше есть проблема. Мышонок находится в `DIV` с `position:relative`.** Это означает, что его `left/top` являются координатами не относительно документа, а относительно позиционированного предка.
+
+Что делать? Решений три.
+
+<ol><li>Первое -- учесть этого позиционированного предка  при вычислении `left/top`, вычитать его координаты из координат относительно документа.</li>
+<li>Второе -- сделать `position:fixed`. При этом координаты мышонка можно взять напрямую из [mousie.getBoundingClientRect()](https://developer.mozilla.org/en/DOM/element.getBoundingClientRect), т.е. все вычисления выполнять относительно окна. Это больше компьютерно-игровой подход, чем работа с документом.</li>
+<li>Третье -- переместить мышонка под `document.body` в начале движения. Тогда и с координатами всё будет в порядке. Но при этом могут "слететь" стили.</li>
+</ol>
+
+Хочется верить, что первое и второе решения понятны. А вот третье более интересно, так как скрывает новые тонкости.
+
+Если пойти этим путём, то в обработчик `onfocus` следует добавить перемещение мышонка под `BODY`:
+
+```js
+mousie.onfocus = function() {
+  var coords = getCoords(this);
+
+*!*
+  document.body.appendChild(this);
+*/!*
+  
+  this.style.position = 'absolute';
+  this.style.left = coords.left + 'px';
+  this.style.top = coords.top + 'px';
+};
+```
+
+...Но вот беда! **При `document.body.appendChild(this)` с элемента слетает фокус!** 
+
+Фокус нужно восстановить, чтобы ловить `keydown`. Однако некоторые браузеры, например FF и IE, не дают вызвать метод `focus()` элемента из его обработчика `onfocus`. То есть сделать это нельзя.
+
+Чтобы это обойти, можно поставить обработчик не `onfocus`, а `onclick`:
+
+```js
+mousie.onclick = function() {
+  var coords = getCoords(this);
+  this.style.position = 'absolute';
+  this.style.left = coords.left + 'px';
+  this.style.top = coords.top + 'px';
+
+*!*
+  if (this.parentNode != document.body) {
+    document.body.appendChild(this);
+    this.focus();
+  }
+*/!*
+};
+```
+
+Обычно событие `focus` всё равно происходит *после* `click`, но здесь элемент перемещается, поэтому оно "съедается" и мы инициируем его сами вызовом `focus()`.
+
+[edit src="solution"]Окончательное решение[/edit]
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/solution.view/index.html
new file mode 100755
index 00000000..6420c533
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/solution.view/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+  #mousie:focus {
+    outline: none;
+    border: 1px dashed black;
+  }
+  html, body {
+    margin: 0;
+    height: 100%;
+  }
+  </style>
+</head>
+<body>
+
+Кликните на мышонка и передвигайте его, нажимая клавиши со стрелками.
+
+<div style="position:relative;top:30px;width:50px;height:50px">
+  <div style="width:41px; height:48px; background:url(http://js.cx/clipart/mousie.gif)" id="mousie" tabindex="-1"></div>
+</div>
+
+<script>
+
+document.getElementById('mousie').onclick = function() {
+  var coords = getCoords(this);
+  this.style.position = 'absolute';
+  this.style.left = coords.left + 'px';
+  this.style.top = coords.top + 'px';
+
+  if (this.parentNode != document.body) {
+    document.body.appendChild(this);
+    this.focus();
+  }
+};
+
+
+document.getElementById('mousie').onkeydown = function(e) {
+  e = e || event;
+
+  switch(e.keyCode) {
+  case 37: // влево
+    this.style.left = parseInt(this.style.left) - this.offsetWidth + 'px';
+    return false;
+  case 38: // вверх
+    this.style.top = parseInt(this.style.top) - this.offsetHeight + 'px';
+    return false;
+  case 39: // вправо
+    this.style.left = parseInt(this.style.left) + this.offsetWidth + 'px';
+    return false;
+  case 40: // вниз
+    this.style.top = parseInt(this.style.top) + this.offsetHeight + 'px';
+    return false;
+  }
+};
+
+// -----------------------
+
+
+function getCoords(elem) {
+    var box = elem.getBoundingClientRect();
+
+    var body = document.body;
+    var docElem = document.documentElement;
+
+    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
+    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
+
+    var clientTop = docElem.clientTop || body.clientTop || 0;
+    var clientLeft = docElem.clientLeft || body.clientLeft || 0;
+
+    var top  = box.top +  scrollTop - clientTop;
+    var left = box.left + scrollLeft - clientLeft;
+
+    return { top: Math.round(top), left: Math.round(left) };
+}
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/source.view/index.html
new file mode 100755
index 00000000..db2e2fae
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/source.view/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+  #mousie:focus {
+    outline: none;
+    border: 1px dashed black;
+  }
+  html, body {
+    margin: 0;
+    height: 100%;
+  }
+  </style>
+</head>
+<body>
+
+Кликните на мышонка и передвигайте его, нажимая клавиши со стрелками.
+
+<div style="width:41px;height:48px;background:url(http://js.cx/clipart/mousie.gif)"></div>
+
+
+
+<script>
+
+/* ваш код */
+
+
+// -----------------------
+
+
+function getCoords(elem) {
+    var box = elem.getBoundingClientRect();
+
+    var body = document.body;
+    var docElem = document.documentElement;
+
+    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
+    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
+
+    var clientTop = docElem.clientTop || body.clientTop || 0;
+    var clientLeft = docElem.clientLeft || body.clientLeft || 0;
+
+    var top  = box.top +  scrollTop - clientTop;
+    var left = box.left + scrollLeft - clientLeft;
+
+    return { top: Math.round(top), left: Math.round(left) };
+}
+
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/task.md b/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/task.md
new file mode 100644
index 00000000..a5b8c45b
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/task.md
@@ -0,0 +1,77 @@
+# Мышонок на "клавиатурном" приводе
+
+[importance 4]
+
+Кликните по мышонку. Затем нажимайте клавиши со стрелками, и он будет двигаться.
+
+<style>
+##mousie:focus {
+  outline: none;
+  border: 1px dashed black;
+}
+</style>
+
+<div style="position:relative;top:20px;width:100px;height:100px">
+  <div style="width:41px; height:48px;background:url(http://js.cx/clipart/mousie.gif)" id="mousie" tabindex="0"></div>
+</div>
+
+<script>
+mousie.onclick = function() {
+  var coords = getCoords(this);
+  this.style.position = 'absolute';
+  this.style.left = coords.left + 'px';
+  this.style.top = coords.top + 'px';
+
+  if (this.parentNode != document.body) {
+    document.body.appendChild(this);
+    this.focus();
+  }
+};
+
+
+mousie.onkeydown = function(e) {
+  e = e || event;
+
+  switch(e.keyCode) {
+  case 40: // вниз
+    this.style.top = parseInt(this.style.top) + this.offsetHeight + 'px';
+    return false;
+  case 39: // вправо
+    this.style.left = parseInt(this.style.left) + this.offsetWidth + 'px';
+    return false;
+  case 38: // вверх
+    this.style.top = parseInt(this.style.top) - this.offsetHeight + 'px';
+    return false;
+  case 37: // влево
+    this.style.left = parseInt(this.style.left) - this.offsetWidth + 'px';
+    return false;
+  }
+};
+
+
+// -----------------------
+
+
+function getCoords(elem) {
+    var box = elem.getBoundingClientRect();
+
+    var body = document.body;
+    var docElem = document.documentElement;
+
+    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
+    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
+
+    var clientTop = docElem.clientTop || body.clientTop || 0;
+    var clientLeft = docElem.clientLeft || body.clientLeft || 0;
+
+    var top  = box.top +  scrollTop - clientTop;
+    var left = box.left + scrollLeft - clientLeft;
+
+    return { top: Math.round(top), left: Math.round(left) };
+}
+
+</script>
+
+Учтите при решении, что мышонок изначально находится где-то в глубине документа, в `DIV'е` с `position:relative`.
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.md b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.md
new file mode 100644
index 00000000..94b2f2f8
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.md
@@ -0,0 +1,99 @@
+# CSS для решения
+
+Как видно из исходного кода, `#view` -- это `DIV`, который будет содержать результат, а `#area` - это редактируемое текстовое поле.
+
+Так как мы преобразуем `DIV` в `TEXTAREA` и обратно, нам нужно сделать их практически одинаковыми с виду:
+
+```css
+#view, #area {
+  height:150px;
+  width:400px;
+  font-family:arial;
+}
+```
+
+Текстовое поле нужно как-то выделить. Можно добавить границу, но тогда изменится блок: он увеличится в размерах и немного съедет текст.
+
+Для того, чтобы сделать размер `#area` таким же, как и `#view`, добавим поля(padding):
+
+```css
+#view {  
+  /* padding + border = 3px */
+  padding: 2px; 
+  border:1px solid black; 
+}
+```
+
+CSS для `#area` заменяет поля границами:
+
+```css
+#area {
+  border: 3px groove blue;  
+  padding: 0px;
+
+  display:none;
+}
+```
+
+По умолчанию, текстовое поле скрыто. Кстати, этот код убирает дополнительную рамку в ряде браузеров, которая появляется вокруг поля, когда на него попадает фокус:
+
+```css
+#area:focus { 
+  outline: none; /* убирает рамку при фокусе */
+}
+```
+
+# Горячие клавиши
+
+Чтобы отследить горячие клавиши, нам нужны их скан-коды, а не символы. Это важно, потому что горячие клавиши должны работать независимо от языковой раскладки. Поэтому, мы будем использовать <code>keydown</code>:
+
+```js
+document.onkeydown = function(e) {
+  if (e.keyCode == 27) { // escape
+    cancel();
+    return false;
+  }
+
+  if ((e.ctrlKey && e.keyCode == 'E'.charCodeAt(0)) && !area.offsetHeight) {
+    edit();
+    return false;
+  }
+
+  if ((e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) && area.offsetHeight) {
+    save();
+    return false;
+  }
+};
+```
+
+В примере выше, `offsetHeight` используется для того, чтобы проверить, отображается элемент или нет. Это очень надежный способ для всех элементов, кроме `TR` в некоторых старых браузерах.
+
+В отличие от простой проверки `display=='none'`, этот способ работает с элементом, спрятанным с помощью стилей, а так же для элементов, у которых скрыты родители.
+
+# Редактирование
+
+Следующие функции переключают режимы. HTML-код разрешен, поэтому возможна прямая трансформация в `TEXTAREA` и обратно.
+
+```js
+function edit() {
+    view.style.display = 'none';
+    area.value = view.innerHTML;
+    area.style.display = 'block';
+    area.focus();
+}
+
+function save() {
+    area.style.display = 'none';
+    view.innerHTML = area.value;
+    view.style.display = 'block';
+}
+
+function cancel() {
+    area.style.display = 'none';
+    view.style.display = 'block';
+}
+```
+
+[edit src="solution"]Полное решение[/edit]
+
+Чтобы проверить его, сфокусируйтесь на правом iframe, пожалуйста.
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.view/index.html
new file mode 100755
index 00000000..f6cdd9f5
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.view/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link type="text/css" rel="stylesheet" href="my.css">
+  <meta charset="utf-8">
+</head>
+<body>
+
+<ul>
+<li>Ctrl-E для начала редактирования.</li>
+<li>Во время редактирования: Ctrl-S для сохранения, Esc для отмены.</li>
+</ul>
+
+HTML разрешён.
+
+<textarea id="area"></textarea>
+<div id="view">Текст</div>
+
+<script>
+
+area = document.getElementById('area');
+view = document.getElementById('view');
+
+document.onkeydown = function(e) {
+    e = e || event;
+    if (e.keyCode == 27) { // escape
+        cancel();
+        return false;
+    }
+
+    if ((e.ctrlKey && e.keyCode == 'E'.charCodeAt(0)) && !area.offsetHeight) {
+        edit();
+        return false;
+    }
+
+    if ((e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) && area.offsetHeight) {
+        save();
+        return false;
+    }
+}
+
+function edit() {
+    view.style.display = 'none';
+    area.value = view.innerHTML;
+    area.style.display = 'block';
+    area.focus();
+}
+
+function save() {
+    area.style.display = 'none';
+    view.innerHTML = area.value;
+    view.style.display = 'block';
+}
+
+function cancel() {
+    area.style.display = 'none';
+    view.style.display = 'block';
+}
+
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.view/my.css b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.view/my.css
new file mode 100755
index 00000000..ded05822
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.view/my.css
@@ -0,0 +1,22 @@
+#view, #area {
+  height:150px;
+  width:400px;
+  font-family:arial;
+}
+
+#view {  
+  /* padding + border = 3px */
+  padding: 2px; 
+  border:1px solid black; 
+}
+
+#area {
+  display:none;
+  
+  /* replace padding with border (still 3px not to shift the contents) */
+  border: 3px groove blue;  
+  padding: 0px;
+}
+#area:focus { 
+  outline: none; /* remove focus border in Safari */
+}
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/source.view/index.html
new file mode 100755
index 00000000..515fdc69
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/source.view/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link type="text/css" rel="stylesheet" href="my.css" >
+</head>
+<body>
+
+<ul>
+<li>Ctrl-E to start editing.</li>
+<li>While editing: Ctrl-S to save, Esc to cancel.</li>
+</ul>
+
+
+<textarea id="area"></textarea>
+<div id="view">Text</div>
+
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/source.view/my.css b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/source.view/my.css
new file mode 100755
index 00000000..ded05822
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/source.view/my.css
@@ -0,0 +1,22 @@
+#view, #area {
+  height:150px;
+  width:400px;
+  font-family:arial;
+}
+
+#view {  
+  /* padding + border = 3px */
+  padding: 2px; 
+  border:1px solid black; 
+}
+
+#area {
+  display:none;
+  
+  /* replace padding with border (still 3px not to shift the contents) */
+  border: 3px groove blue;  
+  padding: 0px;
+}
+#area:focus { 
+  outline: none; /* remove focus border in Safari */
+}
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/task.md b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/task.md
new file mode 100644
index 00000000..c73009d5
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/3-hotkeys/task.md
@@ -0,0 +1,13 @@
+# Горячие клавиши
+
+[importance 5]
+
+Создайте `DIV`, который при нажатии [key Ctrl+E] превращается в `TEXTAREA`.
+Изменения, внесенные в поле, можно сохранить в `DIV` сочетанием клавиш [key Ctrl+S] или же отменить нажав [key Esc]. После этого, `TEXTAREA` снова превращается в `DIV`.
+
+Содержимое, сохраненное как HTML-теги должно работать.
+
+[demo src="solution"].
+
+[edit src="source" task/]
+
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/solution.md b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/solution.md
new file mode 100644
index 00000000..5ad07e3f
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/solution.md
@@ -0,0 +1,8 @@
+<ol>
+<li>При клике -- заменяем `innerHTML` ячейки на `<textarea>` с размерами "под ячейку", без рамки.</li>
+<li>В `textarea.value` присваиваем содержимое ячейки.</li>
+<li>Фокусируем посетителя на ячейке вызовом `focus()`.</li>
+<li>По `keydown` отслеживаем нажатие с `keyCode = 13` ([key Enter]) с `shiftKey` и трансформируем ячейку обратно.</li>
+</ol>
+
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/solution.view/bagua.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/solution.view/bagua.css
new file mode 100755
index 00000000..c8f45d76
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/solution.view/bagua.css
@@ -0,0 +1,52 @@
+
+#bagua-table th {
+  text-align:center;
+  font-weight:bold;
+}
+
+#bagua-table td {
+  width: 150px;
+  white-space: nowrap;
+  text-align:center;
+  vertical-align: bottom;
+  padding: 0;
+}
+
+#bagua-table .nw {
+  background-color: #999;
+}
+
+#bagua-table .n {
+  background-color: #03f;
+  color: #fff;
+}
+
+#bagua-table .ne {
+  background-color: #ff6;
+}
+
+#bagua-table .w {
+  background-color: #ff0;
+}
+#bagua-table .c {
+  background-color: #60c;
+  color: #fff;
+}
+#bagua-table .e {
+  background-color: #09f;
+  color: #fff;
+}
+
+#bagua-table .sw {
+  background-color: #963;
+  color: #fff;
+}
+
+#bagua-table .s {
+  background-color: #f60;
+  color: #fff;
+}
+#bagua-table .se {
+  background-color: #0c3;
+  color: #fff;
+}
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/solution.view/index.html
new file mode 100755
index 00000000..03078d83
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/solution.view/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<link type="text/css" rel="stylesheet" href="bagua.css">
+<link type="text/css" rel="stylesheet" href="my.css">
+
+Кликните на ячейке для начала редактирования. Когда закончите -- нажмите, находясь в ней, Shift+Enter.
+
+<table id="bagua-table">
+  <tr>
+    <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+  </tr>
+  <tr>
+    <td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
+    </td>
+    <td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
+    </td>
+    <td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
+    </td>
+  </tr>
+  <tr>
+      <td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
+    </td>
+    <td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
+    </td>
+    <td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
+    </td>
+  </tr>
+  <tr>
+      <td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
+    </td>
+    <td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
+    </td>
+    <td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
+    </td>
+  </tr>
+
+</table>
+
+<script src="script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/solution.view/my.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/solution.view/my.css
new file mode 100755
index 00000000..3f3b2d60
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/solution.view/my.css
@@ -0,0 +1,12 @@
+.edit-area  {
+  border: none;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  display: block;
+  resize: none;    /* remove resizing handle in Firefox */
+  outline: none;   /* remove outline on focus in Chrome */
+  overflow: auto; /* remove scrollbar in IE */
+}
+
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/solution.view/script.js b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/solution.view/script.js
new file mode 100755
index 00000000..6f21bf66
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/solution.view/script.js
@@ -0,0 +1,35 @@
+
+var table = document.getElementById('bagua-table');
+
+table.onclick = function(event) {
+  var target = event.target;
+
+  while(target != table) {
+    if (target.nodeName == 'TD') {
+       if (target.firstChild.tagName == 'TEXTAREA') { // already editing
+         return;
+       }
+       makeTdEditable(target);
+       return;
+    }
+    target = target.parentNode;
+  }
+}
+
+function makeTdEditable(td) {
+  var textArea = document.createElement('textarea');
+  textArea.className = 'edit-area';
+  textArea.value = td.innerHTML;
+  textArea.onkeydown = function(e) {
+    if (e.keyCode == 13 && e.shiftKey) {
+      finishTdEditing(td);
+    }
+  }
+  td.innerHTML = '';
+  td.appendChild(textArea);
+  textArea.focus();
+}
+
+function finishTdEditing(td) {
+  td.innerHTML = td.firstChild.value;
+}
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/source.view/bagua.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/source.view/bagua.css
new file mode 100755
index 00000000..c8f45d76
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/source.view/bagua.css
@@ -0,0 +1,52 @@
+
+#bagua-table th {
+  text-align:center;
+  font-weight:bold;
+}
+
+#bagua-table td {
+  width: 150px;
+  white-space: nowrap;
+  text-align:center;
+  vertical-align: bottom;
+  padding: 0;
+}
+
+#bagua-table .nw {
+  background-color: #999;
+}
+
+#bagua-table .n {
+  background-color: #03f;
+  color: #fff;
+}
+
+#bagua-table .ne {
+  background-color: #ff6;
+}
+
+#bagua-table .w {
+  background-color: #ff0;
+}
+#bagua-table .c {
+  background-color: #60c;
+  color: #fff;
+}
+#bagua-table .e {
+  background-color: #09f;
+  color: #fff;
+}
+
+#bagua-table .sw {
+  background-color: #963;
+  color: #fff;
+}
+
+#bagua-table .s {
+  background-color: #f60;
+  color: #fff;
+}
+#bagua-table .se {
+  background-color: #0c3;
+  color: #fff;
+}
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/source.view/index.html
new file mode 100755
index 00000000..1ea17798
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/source.view/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<link type="text/css" rel="stylesheet" href="bagua.css">
+
+
+<table id="bagua-table">
+  <tr>
+    <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+  </tr>
+  <tr>
+    <td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
+    </td>
+    <td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
+    </td>
+    <td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
+    </td>
+  </tr>
+  <tr>
+      <td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
+    </td>
+    <td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
+    </td>
+    <td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
+    </td>
+  </tr>
+  <tr>
+      <td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
+    </td>
+    <td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
+    </td>
+    <td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
+    </td>
+  </tr>
+
+</table>
+
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/task.md b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/task.md
new file mode 100644
index 00000000..0d544f69
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click-1/task.md
@@ -0,0 +1,18 @@
+# Редактирование TD по клику
+
+[importance 4]
+
+Сделать ячейки таблицы `td` редактируемыми по клику.
+
+<ul>
+<li>При клике -- ячейка `td` превращается в редактируемую, можно менять HTML. Размеры ячеек при этом не должны меняться.</li> 
+<li>Клик на ячейку, которая уже находится в процессе редактирования не меняет ее состояние.</li>
+<li>Сохранение ячейки и превращение обратно в ячейку таблицы -- при нажатии [key Shift+Enter], когда курсор внутри.</li>
+<li>Несколько ячеек могут быть редактируемыми одновременно.</li>
+</ul>
+
+Демо:
+
+[iframe src="solution"]
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/solution.md b/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/solution.md
new file mode 100644
index 00000000..eeda701c
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Открыть решение в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/solution.view/bagua.css b/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/solution.view/bagua.css
new file mode 100755
index 00000000..c8f45d76
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/solution.view/bagua.css
@@ -0,0 +1,52 @@
+
+#bagua-table th {
+  text-align:center;
+  font-weight:bold;
+}
+
+#bagua-table td {
+  width: 150px;
+  white-space: nowrap;
+  text-align:center;
+  vertical-align: bottom;
+  padding: 0;
+}
+
+#bagua-table .nw {
+  background-color: #999;
+}
+
+#bagua-table .n {
+  background-color: #03f;
+  color: #fff;
+}
+
+#bagua-table .ne {
+  background-color: #ff6;
+}
+
+#bagua-table .w {
+  background-color: #ff0;
+}
+#bagua-table .c {
+  background-color: #60c;
+  color: #fff;
+}
+#bagua-table .e {
+  background-color: #09f;
+  color: #fff;
+}
+
+#bagua-table .sw {
+  background-color: #963;
+  color: #fff;
+}
+
+#bagua-table .s {
+  background-color: #f60;
+  color: #fff;
+}
+#bagua-table .se {
+  background-color: #0c3;
+  color: #fff;
+}
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/solution.view/index.html
new file mode 100755
index 00000000..4743a291
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/solution.view/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+<link type="text/css" rel="stylesheet" href="bagua.css">
+<link type="text/css" rel="stylesheet" href="my.css">
+
+
+Кликните на ячейке для начала редактирования. Когда закончите -- нажмите, находясь в ней, Shift+Enter или кликните на OK/CANCEL.
+
+<table id="bagua-table">
+  <tr>
+    <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+  </tr>
+  <tr>
+    <td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
+    </td>
+    <td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
+    </td>
+    <td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
+    </td>
+  </tr>
+  <tr>
+      <td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
+    </td>
+    <td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
+    </td>
+    <td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
+    </td>
+  </tr>
+  <tr>
+      <td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
+    </td>
+    <td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
+    </td>
+    <td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
+    </td>
+  </tr>
+
+</table>
+
+
+<script src="script.js"></script>
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/solution.view/my.css b/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/solution.view/my.css
new file mode 100755
index 00000000..9bc7511c
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/solution.view/my.css
@@ -0,0 +1,16 @@
+.edit-td .edit-area  {
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+  resize: none;    /* remove resizing handle in Firefox */
+  outline: none;   /* remove outline on focus in Chrome */
+  overflow: auto; /* remove scrollbar in IE */
+}
+
+.edit-controls {
+  position: absolute;
+}
+.edit-td {
+  position: relative;
+}
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/solution.view/script.js b/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/solution.view/script.js
new file mode 100755
index 00000000..94dca0b2
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/solution.view/script.js
@@ -0,0 +1,62 @@
+
+var table = document.getElementById('bagua-table');
+
+var editingTd;
+
+table.onclick = function(event) {
+
+  var target = event.target;
+  
+  while(target != table) {
+    if (target.className == 'edit-cancel') {
+       finishTdEdit(editingTd.elem, false);
+       return;
+    }
+
+    if (target.className == 'edit-ok') {
+       finishTdEdit(editingTd.elem, true);
+       return;
+    }
+
+    if (target.nodeName == 'TD') {
+      if (editingTd) return; // already editing
+
+       makeTdEditable(target);
+       return;
+    }
+
+    target = target.parentNode;
+  }
+}
+
+function makeTdEditable(td) {
+  editingTd = { elem: td, data: td.innerHTML };
+
+  td.className += ' edit-td'; // td, not textarea! the rest of rules will cascade
+
+  var textArea = document.createElement('textarea');
+  textArea.style.width =  td.clientWidth + 'px';
+  textArea.style.height = td.clientHeight + 'px';
+  textArea.className = 'edit-area';
+
+  textArea.value = td.innerHTML;
+  td.innerHTML = '';
+  td.appendChild(textArea);
+  textArea.focus();
+
+  var controls = document.createElement('div');
+  controls.innerHTML = '<button class="edit-ok">OK</button><button class="edit-cancel">CANCEL</button>';
+  controls.className = 'edit-controls';
+  td.appendChild(controls);
+}
+
+function finishTdEdit(td, isOk) {
+  if (isOk) {
+    td.innerHTML = td.firstChild.value;
+  } else {
+    td.innerHTML = editingTd.data;
+  }
+  td.className = td.className.replace(' edit-td', ''); // remove edit class
+  editingTd = null;
+}
+
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/task.md b/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/task.md
new file mode 100644
index 00000000..1a72d3db
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/5-edit-td-click-2/task.md
@@ -0,0 +1,19 @@
+# Редактирование TD по клику, часть 2
+
+[importance 4]
+
+Сделать ячейки таблицы `td` редактируемыми по клику. 
+
+Поменяйте алгоритм из задачи [](/task/edit-td-click-1) на следующий:
+<ul>
+<li>В один момент может редактироваться одна ячейка.</li>
+<li>При редактировании под ячейкой появляются кнопки для приема и отмена редактирования, только клик на них заканчивает редактирование.</li>
+</ul>
+
+При решении этой задачи - максимально использовать делегирование.
+
+Демо:
+
+[iframe src="solution"]
+
+В качестве исходного варианта возьмите решение задачи [](/task/edit-td-click-1). 
diff --git a/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.md b/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.md
new file mode 100644
index 00000000..cd99950a
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.md
@@ -0,0 +1,22 @@
+# Вёрстка
+
+Для вёрстки можно использовать отрицательный `margin` у текста с подсказкой.
+
+Решение в плане вёрстка есть в решении задачи [](/task/position-text-into-input).
+
+# Решение
+
+```js
+placeholder.onclick = function() {
+  input.focus();
+}
+
+// onfocus сработает и вызове input.focus() и при клике на input
+input.onfocus = function() {
+  if (placeholder.parentNode) {
+    placeholder.parentNode.removeChild(placeholder);
+  }
+}
+```
+
+[edit src="solution"]Открыть полный код решения[/edit]
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.view/index.html
new file mode 100755
index 00000000..90366fc5
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.view/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    input {
+      margin: 0;
+      width: 12em;
+    }
+
+    #placeholder {
+      color: red;
+
+      margin: -1.3em 0 0 0.2em;
+    }
+  </style>
+</head>
+<body>
+
+<div>Добро пожаловать</div>
+<input type="password" id="input">
+
+<div id="placeholder">Скажи пароль, друг</div>
+
+<div>.. и заходи</div>
+
+<script>
+var placeholder = document.getElementById('placeholder');
+var input = document.getElementById('input');
+
+placeholder.onclick = function() {
+  input.focus();
+}
+
+input.onfocus = function() {
+  placeholder.parentNode && placeholder.parentNode.removeChild(placeholder);
+}
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/source.view/index.html
new file mode 100755
index 00000000..04f62c11
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/source.view/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+
+<div>Добро пожаловать</div>
+<input type="password" id="input">
+
+<div id="placeholder">Скажи пароль, друг</div>
+
+<div>.. и заходи</div>
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/task.md b/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/task.md
new file mode 100644
index 00000000..a0e7d50e
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/task.md
@@ -0,0 +1,11 @@
+# Красивый плейсхолдер для INPUT
+
+[importance 5]
+
+Создайте для `<input type="password">` красивый, стилизованный плейсхолдер, например (кликните на тексте):
+
+[iframe src="solution" height=90]
+
+[edit src="source" task/]
+
+При клике плейсхолдер просто исчезает и дальше не показывается.
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.md b/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.md
new file mode 100644
index 00000000..576e2ede
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.md
@@ -0,0 +1,91 @@
+# Алгоритм
+
+JavaScript не имеет доступа к текущему состоянию [key CapsLock]. При загрузке страницы не известно, включён он или нет.
+
+Но мы можем догадаться о его состоянии из событий:
+<ol>
+<li>Проверив символ, полученный по `keypress`. Символ в верхнем регистре без нажатого [key Shift] означает, что включён [key CapsLock]. Аналогично, символ в нижнем регистре, но с [key Shift] говорят о включенном [key CapsLock]. Свойство `event.shiftKey` показывает, нажат ли [key Shift]. Так мы можем точно узнать, нажат ли [key CapsLock].</li>
+<li>Проверять `keydown`. Если нажат CapsLock (скан-код равен `20`), то переключить состояние, но лишь в том случае, когда оно уже известно. 
+Под Mac так делать не получится, поскольку клавиатурные события с CapsLock  [работают некорректно](#keyboard-events-order).</li>
+</ol>
+
+Имея состояние `CapsLock` в переменной, можно при фокусировке на `INPUT` выдавать предупреждение.
+
+Отслеживать оба события: `keydown` и `keypress` хорошо бы на уровне документа, чтобы уже на момент входа в поле ввода мы знали состояние CapsLock.
+
+Но при вводе сразу в нужный `input` событие `keypress` событие доплывёт до `document` и поставит состояние CapsLock *после того, как сработает на `input`*. Как это обойти -- подумайте сами.
+
+# Решение
+
+При загрузке страницы, когда еще ничего не набрано, мы ничего не знаем о состоянии [key CapsLock], поэтому оно равно `null`:
+
+```js
+var capsLockEnabled = null;
+```
+
+Когда нажата клавиша, мы можем попытаться проверить, совпадает ли регистр символа и состояние [key Shift]:
+
+```js
+document.onkeypress = function(e) {
+
+  var chr = getChar(e);
+  if (!chr) return; // специальная клавиша
+
+  if (chr.toLowerCase() == chr.toUpperCase()) {
+    // символ, который не имеет регистра, такой как пробел,
+    // мы не можем использовать для определения состояния CapsLock
+    return;
+  }
+
+  capsLockEnabled = (chr.toLowerCase() == chr && e.shiftKey) || (chr.toUpperCase() == chr && !e.shiftKey);
+}
+```
+
+Когда пользователь нажимает [key CapsLock], мы должны изменить его текущее состояние. Но мы можем сделать это только если знаем, что был нажат [key CapsLock]. 
+
+Например, когда пользователь открыл страницу, мы не знаем, включен ли [key CapsLock]. Затем, мы получаем событие `keydown` для [key CapsLock]. Но мы все равно не знаем его состояния, был ли [key CapsLock] *выключен* или, наоборот, включен.
+
+```js
+if (navigator.platform.substr(0,3) != 'Mac') { // событие для CapsLock глючит под Mac
+  document.onkeydown = function(e) {  
+    if (e.keyCode == 20 && capsLockEnabled !== null) {
+      capsLockEnabled = !capsLockEnabled;
+    }
+  };
+}
+```
+
+Теперь поле. Задание состоит в том, чтобы предупредить пользователя о включенном CapsLock, чтобы уберечь его от неправильного ввода.
+
+<ol>
+<li>Для начала, когда пользователь сфокусировался на поле, мы должны вывести предупреждение о CapsLock, если он включен.</li>
+<li>Пользователь начинает ввод. Каждое событие `keypress` всплывает до обработчика `document.keypress`, который обновляет состояние `capsLockEnabled`. 
+
+Мы не можем использовать событие `input.onkeypress`, для отображения состояния пользователю, потому что оно сработает *до* `document.onkeypress` (из-за всплытия) и, следовательно, до того, как мы узнаем состояние [key CapsLock].
+
+Есть много способов решить эту проблему. Можно, например, назначить обработчик состояния CapsLock на  событие `input.onkeyup`. То есть, индикация будет с задержкой, но это несущественно.
+
+Альтернативное решение -- добавить на `input` такой же обработчик, как и на `document.onkeypress`.
+</li>
+<li>...И наконец, пользователь убирает фокус с поля. Предупреждение может быть видно, если [key CapsLock] включен, но так как пользователь уже ушел с поля, то нам нужно спрятать предупреждение.</li>
+</ol>
+
+Код проверки поля:
+
+```html
+<input type="text" onkeyup="checkCapsWarning(event)" onfocus="checkCapsWarning(event)" onblur="removeCapsWarning()"/>
+
+<div style="display:none;color:red" id="caps">Внимание: нажат CapsLock!</div>
+
+<script>
+function checkCapsWarning() {
+  document.getElementById('caps').style.display = capsLockEnabled ? 'block' : 'none';
+}
+
+function removeCapsWarning() {
+  document.getElementById('caps').style.display = 'none';
+}
+</script>
+```
+
+[edit src="solution"]Полный код решения[/edit]
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.view/index.html
new file mode 100755
index 00000000..154ca08a
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.view/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+Введите текст(например, пароль) с нажатым CapsLock:
+<input type="text" onkeyup="checkCapsWarning(event)" onfocus="checkCapsWarning(event)" onblur="removeCapsWarning()"/>
+
+<div style="display:none;color:red" id="capsIndicator">Внимание: нажат CapsLock!</div>
+
+
+<script>
+
+
+/**
+ * Текущее состояние CapsLock
+ *  - null : неизвестно
+ *  - true/false : CapsLock включен/выключен
+ */
+var capsLockEnabled = null;
+
+function getChar(event) {
+  if (event.which == null) {
+    if (event.keyCode < 32) return null;
+    return String.fromCharCode(event.keyCode) // IE
+  }
+
+  if (event.which!=0 && event.charCode!=0) {
+    if (event.which < 32) return null;
+    return String.fromCharCode(event.which)   // остальные
+  }
+
+  return null; // специальная клавиша
+}
+
+if (navigator.platform.substr(0,3) != 'Mac') { // событие для CapsLock глючит под Mac
+  document.onkeydown = function(e) {
+    e = e || event;
+
+    if (e.keyCode == 20 && capsLockEnabled !== null) {
+      capsLockEnabled = !capsLockEnabled;
+    }
+  }
+}
+
+document.onkeypress = function(e) {
+  e = e || event;
+
+  var chr = getChar(e);
+  if (!chr) return // special key
+
+  if (chr.toLowerCase() == chr.toUpperCase()) {
+    // символ, не зависящий от регистра, например пробел
+    // не может быть использован для определения CapsLock
+    return;
+  }
+
+  capsLockEnabled = (chr.toLowerCase() == chr && e.shiftKey) || (chr.toUpperCase() == chr && !e.shiftKey);
+}
+
+
+/**
+ * Проверить CapsLock
+ */
+function checkCapsWarning() {
+  document.getElementById('capsIndicator').style.display = capsLockEnabled ? 'block' : 'none';
+}
+
+function removeCapsWarning() {
+  document.getElementById('capsIndicator').style.display = 'none';
+}
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/source.view/index.html
new file mode 100755
index 00000000..69bffc5b
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/source.view/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+</head>
+<body>
+
+
+Введите текст(например, пароль) с нажатым CapsLock:
+<input type="text"/>
+
+<div style="display:none;color:red" id="capsIndicator">Внимание: нажат CapsLock!</div>
+
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/task.md b/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/task.md
new file mode 100644
index 00000000..fa2f4433
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/task.md
@@ -0,0 +1,11 @@
+# Поле, предупреждающее о включенном CapsLock
+
+[importance 3]
+
+Создайте поле, которое будет предупреждать пользователя, если включен [key CapsLock]. Выключение [key CapsLock] уберёт предупреждение. 
+
+Такое поле может помочь избежать ошибок при вводе пароля.
+
+[iframe height=80 src="solution"]
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md
new file mode 100644
index 00000000..4aed9835
--- /dev/null
+++ b/2-ui/4-forms-controls/2-focus-blur/article.md
@@ -0,0 +1,307 @@
+# Фокусировка: focus/blur
+
+Говорят, что элемент "получает фокус", когда посетитель фокусируется на нём. Обычно фокусировка автоматически происходит при нажатии на элементе мышкой, но также можно перейти на нужный элемент клавиатурой -- через клавишу [key Tab], нажатие пальцем (на мобильных устройствах) и так далее.
+
+Момент получения фокуса и потери очень важен. 
+
+При получении фокуса мы можем подгрузить данные для автодополнения, начать отслеживать изменения. При потере -- проверить данные, которые ввёл посетитель. 
+
+Кроме того, иногда полезно "вручную", из JavaScript перевести фокус на нужный элемент, например, на поле в динамически созданной форме.
+
+[cut]
+## События focus/blur
+
+Событие `focus` вызывается тогда, когда пользователь фокусируется на элементе, а  `blur` -- когда фокус исчезает, например посетитель кликает на другом месте экрана.
+
+Давайте сразу посмотрим на них в деле, используем для проверки ("валидации") введённых в форму значений.
+
+В примере ниже:
+<ul>
+<li>Обработчик `onblur` проверяет, что в поле введено число, если нет -- показывает ошибку.</li>
+<li>Обработчик `onfocus`, если текущее состояние поля ввода -- "ошибка" -- скрывает её (потом при `onblur` будет повторная проверка).</li>
+</ul>
+
+Наберите что-нибудь в поле "возраст" примера ниже и завершите ввод, нажав [key Tab] или кликнув в другое место страницы. Введённое значение будет автоматически проверено:
+
+```html
+<!--+ run autorun height=60 -->
+<style> .error { background: red; } </style>
+
+Введите ваш возраст: <input type="text" id="input">
+
+<div id="error"></div>
+
+<script>
+*!*input.onblur*/!* = function() {
+  if (isNaN(this.value)) { // введено не число
+    // показать ошибку
+    this.className = "error";
+    error.innerHTML = 'Вы ввели не число. Исправьте, пожалуйста'
+  }
+};
+
+*!*input.onfocus*/!* = function() { 
+  if (this.className == 'error') { // сбросить состояние "ошибка", если оно есть 
+    this.className = "";
+    error.innerHTML = "";
+  }
+};
+</script>
+```
+
+## Методы focus/blur
+
+Методы с теми же названиями переводят/уводят фокус с элемента.
+
+Для примера модифицируем пример выше, чтобы при неверном вводе посетитель просто не мог уйти с элемента:
+
+```html
+<!--+ run autorun height=80 -->
+<style> .error { background: red; } </style>
+
+<div>Возраст: <input type="text" id="age"></div>
+  
+<div>Имя: <input type="text"></div>
+
+<script>
+age.onblur = function() {
+  if (isNaN(this.value)) { // введено не число
+    // показать ошибку
+    this.classList.add("error");
+    age.focus();*!*
+  } else {
+    this.classList.remove("error");
+  }
+};
+
+</script>
+```
+
+Если в примере выше ввести что-то нецифровое в поле "возраст", и потом попытаться табом или мышкой перейти на другой `<input>`, то обработчик `onblur` вернёт фокус обратно.
+
+Обратим внимание -- если из `onblur` сделать `event.preventDefault()`, то такого же эффекта не будет, потому что `onblur` срабатывает уже *после* того, как элемент потерял фокус.
+
+## HTML5 и CSS3 вместо focus/blur
+
+Прежде чем переходить к более сложным примерам, использующим JavaScript, мы рассмотрим три примера, когда его использовать не надо, а достаточно современного HTML/CSS.
+
+### Подсветка при фокусировке
+
+Стилизация полей ввода может быть решена средствами CSS (CSS2.1), а именно -- селектором `:focus`:
+
+```html
+<!--+ autorun -->
+<style> 
+*!*input:focus*/!* { 
+  background: #FA6; 
+  outline: none;  /* убрать рамку */
+} 
+</style>
+<input type="text"> 
+
+<p>Селектор :focus выделит элемент при фокусировке на нем и уберёт рамку, которой браузер выделяет этот элемент по умолчанию.</p>
+```
+
+В IE (включая более старые) скрыть фокус также может установка специального атрибута [hideFocus](http://msdn.microsoft.com/en-us/library/ie/ms533783.aspx).
+
+### Автофокус
+
+При загрузке страницы, если на ней существует элемент с атрибутом `autofocus` -- браузер автоматически фокусируется на этом элементе. Работает во всех браузерах, кроме IE9-.
+
+```html
+<!--+ run link -->
+<input type="text" name="search" *!*autofocus*/!*>
+```
+
+Если нужны старые IE, то же самое может сделать JavaScript:
+
+```html
+<input type="text" name="search">
+<script> 
+  document.getElementsByName('search')[0].focus();
+</script>
+```
+
+Как правило, этот атрибут используется при изначальной загрузке, для страниц поиска и так далее, где главный элемент очевиден.
+
+### Плейсхолдер
+
+*Плейсхолдер* -- это значение-подсказка внутри `INPUT`, которое автоматически исчезает при фокусировке и существует, пока посетитель не начал вводить текст.
+
+Во всех браузерах, кроме IE9-, это реализуется специальным атрибутом `placeholder`:
+
+```html
+<!--+ autorun -->
+<input type="text" placeholder="E-mail">
+```
+
+В некоторых браузерах этот текст можно стилизовать:
+
+```html
+<!--+ autorun -->
+<style>
+.my*!*::-webkit-input-placeholder*/!*, .my*!*::-moz-placeholder*/!* {
+  color: red;
+  font-style: italic;
+}
+</style>
+
+<input class="my" type="text" placeholder="E-mail"> 
+Стилизуется везде, кроме IE
+```
+
+## Разрешаем фокус на любом элементе: tabindex
+
+По умолчанию не все элементы поддерживают фокусировку.
+
+Перечень элементов немного рознится от браузера к браузеру, например, список для IE описан <a href="http://msdn.microsoft.com/en-us/library/ms536934.aspx">в MSDN</a>, одно лишь верно всегда -- заведомо поддерживают `focus/blur` те элементы, c которыми посетитель может взаимодействовать: `<button>`, `<input>`, `<select>`, `<a>` и т.д.
+
+С другой стороны, на элементах для форматирования, таких как `<div>`, `<span>`, `<table>` -- по умолчанию сфокусироваться нельзя. Впрочем, существует способ включить фокусировку и для них.
+
+В HTML есть атрибут `tabindex`. 
+
+Его основной смысл -- это указать номер элемента при переборе клавишей [key Tab].
+
+То есть, если есть два элемента, первый имеет `tabindex="1"`, а второй `tabindex="2"`, то нажатие [key Tab] при фокусе на первом элементе -- переведёт его на второй.
+
+Исключением являются специальные значения:
+<ul>
+<li>`tabindex="0"` делает элемент всегда последним.</li>
+<li>`tabindex="-1"` означает, что клавиша [key Tab] будет элемент игнорировать.</li>
+</ul>
+
+**Любой элемент поддерживает фокусировку, если у него есть `tabindex`.**
+
+В примере ниже есть список элементов. Кликните на любой из них и нажмите "tab".
+
+```html
+<!--+ autorun -->
+Кликните на первый элемент списка и нажмите Tab. Внимание! Дальнейшие нажатия Tab могут вывести за границы iframe'а с примером.
+<ul>
+  <li tabindex="1">Один</li>
+  <li tabindex="0">Ноль</li>
+  <li tabindex="2">Два</li>
+  <li tabindex="-1">Минус один</li>
+</ul>
+
+<style> 
+  li { cursor: pointer; }
+  :focus { border: 1px dashed green; outline: 0; } 
+</style>
+```
+
+Порядок перемещения по клавише "Tab" в примере выше должен быть таким: `1 - 2 - 0` (ноль всегда последний). Продвинутые пользователи частенько используют "Tab" для навигации, и ваше хорошее отношение к ним будет вознаграждено :)
+
+Обычно `<li>` не поддерживает фокусировку, но здесь есть `tabindex`.
+
+## Делегирование с focus/blur 
+
+События `focus` и `blur` не всплывают.
+
+Это грустно, поскольку мы не можем использовать делегирование с ними. Например, мы не можем сделалать так, чтобы при фокусировке в форме она вся подсвечивалась:
+
+```html
+<!--+ autorun height=auto -->
+<form *!*onfocus="this.className='focused'"*/!*>
+  <input type="text" name="name" value="Ваше имя">
+  <input type="text" name="surname" value="Ваша фамилия">
+</form>
+
+<style> .focused { border: 2px solid red; } </style>
+```
+
+В примере выше стоит обработчик `onfocus` на форме, но он не работает, т.к. при фокусировке на любом `INPUT` событие `focus` срабатывает только на этом элементе и не всплывает наверх.
+
+Что делать? Неужели мы должны присваивать обработчик каждому полю?
+
+**Это забавно, но хотя `focus/blur` не всплывают, они могут быть пойманы на фазе перехвата.**
+
+Вот так сработает:
+
+```html
+<!--+ autorun height=auto -->
+<form id="form">
+  <input type="text" name="name" value="Ваше имя">
+  <input type="text" name="surname" value="Ваша фамилия">
+</form>
+
+<style> .focused { border: 2px solid red; } </style>
+
+<script>
+*!*
+  // ставим обработчики на фазе перехвата, последний аргумент true
+  form.addEventListener("focus", function() {
+    this.classList.add('focused');
+  }, true);
+
+  form.addEventListener("blur", function() {
+    this.classList.remove('focused');
+  }, true);
+*/!*
+</script>
+```
+
+### События focusin/focusout
+
+События `focusin/focusout` -- то же самое, что и `focus/blur`, только они всплывают.
+
+У них две особенности:
+<ul>
+<li>Не поддерживаются Firefox, хотя поддерживаются даже IE6+.</li>
+<li>Во всех браузерах, кроме IE, должны быть назначены не через `on`-свойство, а при помощи `elem.addEventListener`.</li>
+</ul>
+
+Для кросс-браузерной поддержки фокуса с делегированием можно использовать сочетать эти события с фазой перехвата.
+
+Подсветка формы в примере ниже работает во всех браузерах.
+
+```html
+<!--+ autorun height=60 run -->
+<form name="form">
+  <input type="text" name="name" value="Ваше имя">
+  <input type="text" name="surname" value="Ваша фамилия">
+</form>
+<style>
+.focused { border: 2px solid red; }
+</style>
+
+<script>
+function onFormFocus() { this.className = 'focused'; }
+function onFormBlur() { this.className = ''; }
+
+var form = document.forms.form;
+
+if (form.addEventListener) { 
+  form.addEventListener('focus', onFormFocus, true); 
+  form.addEventListener('blur', onFormBlur, true); 
+} else {  // IE8-
+  form.onfocusin = onFormFocus;
+  form.onfocusout = onFormBlur;
+}
+</script>
+```
+
+## Итого
+События `focus/blur` происходят при получении и снятия фокуса с элемента.
+
+У них есть особенности:
+<ul>
+<li>Они не всплывают. Но на фазе перехвата их можно перехватить. Это странно, но это так, не спрашивайте почему.
+
+Везде, кроме Firefox, поддерживаются всплывающие альтернативы `focusin/focusout`.</li>
+<li>По умолчанию многие элементы не могут получить фокус. Например, если вы кликните по `DIV`, то фокусировка на нем не произойдет.
+
+Но это можно изменить, если поставить элементу атрибут `tabIndex`. Этот атрибут также дает возможность контролировать порядок перехода при нажатии [key Tab].
+</li>
+</ul>
+
+Текущий элемент, на котором фокус, доступен как `document.activeElement`.
+
+
+
+
+
+
+
+
+
diff --git a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.md b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.md
new file mode 100644
index 00000000..83b1a298
--- /dev/null
+++ b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.md
@@ -0,0 +1,12 @@
+Алгоритм решения такой.
+
+Только численный ввод в поле с суммой разрешаем, повесив обработчик на `keypress`.
+
+Отслеживаем события изменения для перевычисления результатов:
+<ul>
+<li>На `input`: событие `input` и дополнительно `propertychange/keyup` для совместимости со старыми IE.</li>
+<li>На `checkbox`: событие `click` вместо `change` для совместимости с IE<9.</li>
+<li>На `select`: событие `change`.</li>
+</ul>
+
+[edit src="solution"]Открыть решение в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.view/index.html b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.view/index.html
new file mode 100755
index 00000000..e014fedd
--- /dev/null
+++ b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.view/index.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+<style>
+td select, td input {
+  width: 150px;
+}
+
+#diagram td {
+  vertical-align: bottom;
+  text-align: center;
+  padding: 10px;
+}
+#diagram div {
+  margin: auto;
+}
+</style>
+</head>
+<body>
+
+
+Калькулятор процентов, из расчёта 12% годовых.
+<form name="calculator">
+<table>
+  <tr>
+  <td>Сумма</td>
+  <td><input name="money" type="text" value="10000"></td>
+  </tr>
+  <tr>
+  <td>Срок в месяцах</td>
+  <td>
+    <select name="months">
+      <option value="3">3 (минимум)</option>
+      <option value="6">6 (полгода)</option>
+      <option value="12"selected>12 (год)</option>
+      <option value="18">18 (1.5 года)</option>
+      <option value="24">24 (2 года)</option>
+      <option value="30">30 (2.5 года)</option>
+      <option value="36">36 (3 года)</option>
+    </select>
+  </td>
+  </tr>
+  <tr>
+  <td>С капитализацией</td>
+  <td><input name="capitalization" type="checkbox"></td>
+  </tr>
+</table>
+
+
+</form>
+
+
+<table id="diagram">
+<tr>
+<th>Было:</th>
+<th>Станет:</th>
+</tr>
+<tr>
+<th id="money-before"></th>
+<th id="money-after"></th>
+</tr>
+<td>
+<div style="background: red;width:40px;height:100px"></div>
+</td>
+<td>
+<div style="background: green;width:40px;height:0" id="height-after"></div>
+</td>
+</table>
+
+<script>
+// event.type должен быть keypress
+function getChar(event) {
+  if (event.which == null) {
+    if (event.keyCode < 32) return null;
+    return String.fromCharCode(event.keyCode) // IE
+  }
+
+  if (event.which!=0 && event.charCode!=0) {
+    if (event.which < 32) return null;
+    return String.fromCharCode(event.which)   // остальные
+  }
+
+  return null; // специальная клавиша
+}
+
+var form = document.forms.calculator;
+
+
+var moneyElem = form.elements.money;
+moneyElem.onkeypress = function(e) {
+  e = e || event;
+  var chr  = getChar(e);
+
+  if (e.ctrlKey || e.altKey || chr == null) return; // специальная клавиша
+  if (chr < '0' || chr > '9') return false;
+}
+
+// клавиатура, вставить/вырезать клавиатурой
+moneyElem.onkeyup = calculate;
+
+// любые действия, кроме IE. В IE9 также работает, кроме удаления
+moneyElem.oninput = calculate;
+
+moneyElem.onpropertychange = function() { // для IE<9 изменение значения, кроме удаления
+  event.propertyName == "value" && calculate();
+}
+
+var capitalizationElem = form.elements.capitalization;
+capitalizationElem.onclick = calculate;
+
+var monthsElem = form.elements.months;
+monthsElem.onchange = calculate;
+
+
+function calculate() {
+  var sum = +moneyElem.value;
+  if (!sum) return;
+
+  var monthlyIncrease = 0.01;
+
+  if (!capitalizationElem.checked) {
+    sum = sum*(1+monthlyIncrease*monthsElem.value);
+  } else {
+
+    for(var i=0; i<monthsElem.value; i++) {
+     // 1000 1010 1020.1
+      sum = sum*(1+monthlyIncrease);
+    }
+  }
+  sum = Math.round(sum);
+
+  var height = sum / moneyElem.value*100+'px';
+  document.getElementById('height-after').style.height = height;
+  document.getElementById('money-before').innerHTML = moneyElem.value;
+  document.getElementById('money-after').innerHTML = sum;
+}
+
+calculate();
+
+</script>
+
+
+</body>
+</html>
+
diff --git a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/source.view/index.html b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/source.view/index.html
new file mode 100755
index 00000000..28e33c38
--- /dev/null
+++ b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/source.view/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+<style>
+td select, td input {
+  width: 150px;
+}
+
+#diagram td {
+  vertical-align: bottom;
+  text-align: center;
+  padding: 10px;
+}
+#diagram div {
+  margin: auto;
+}
+</style>
+</head>
+<body>
+
+
+Калькулятор процентов, из расчёта 12% годовых.
+<form name="calculator">
+<table>
+  <tr>
+  <td>Сумма</td>
+  <td><input name="money" type="text" value="10000"></td>
+  </tr>
+  <tr>
+  <td>Срок в месяцах</td>
+  <td>
+    <select name="months">
+      <option value="3">3 (минимум)</option>
+      <option value="6">6 (полгода)</option>
+      <option value="12" selected>12 (год)</option>
+      <option value="18">18 (1.5 года)</option>
+      <option value="24">24 (2 года)</option>
+      <option value="30">30 (2.5 года)</option>
+      <option value="36">36 (3 года)</option>
+    </select>
+  </td>
+  </tr>
+  <tr>
+  <td>С капитализацией</td>
+  <td><input name="capitalization" type="checkbox"></td>
+  </tr>
+</table>
+
+
+</form>
+
+
+<table id="diagram">
+<tr>
+<th>Было:</th>
+<th>Станет:</th>
+</tr>
+<tr>
+<th id="money-before"></th>
+<th id="money-after"></th>
+</tr>
+<td>
+<div style="background: red;width:40px;height:100px"></div>
+</td>
+<td>
+<div style="background: green;width:40px;height:0" id="height-after"></div>
+</td>
+</table>
+
+<script>
+// вспомогательная функция для получения символа из события keypress
+// (вдруг понадобится))
+function getChar(event) {
+  if (event.which == null) {
+    if (event.keyCode < 32) return null;
+    return String.fromCharCode(event.keyCode) // IE
+  }
+
+  if (event.which!=0 && event.charCode!=0) {
+    if (event.which < 32) return null;
+    return String.fromCharCode(event.which)   // остальные
+  }
+
+  return null; // специальная клавиша
+}
+
+// ваш код...
+
+</script>
+
+
+</body>
+</html>
+
diff --git a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/task.md b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/task.md
new file mode 100644
index 00000000..af0c13e4
--- /dev/null
+++ b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/task.md
@@ -0,0 +1,20 @@
+# Автовычисление процентов по вкладу
+
+[importance 5]
+
+Создайте интерфейс для автоматического вычисления процентов по вкладу.
+
+Ставка фиксирована: 12% годовых. При включённом поле "капитализация" -- проценты приплюсовываются к сумме вклада каждый месяц ([сложный процент](http://damoney.ru/finance/slozniy-procent.php)).
+
+Пример:
+[iframe src="solution" height="350" border="1"]
+
+Технические требования:
+<ul>
+<li>В поле с суммой должно быть нельзя ввести не-цифру. При этом пусть в нём работают специальные клавиши и сочетания Ctrl-X/Ctrl-V.</li>
+<li>Изменения в форме отражаются в результатах сразу.</li>
+</ul>
+
+[edit src="source" task/]
+
+
diff --git a/2-ui/4-forms-controls/3-events-change/article.md b/2-ui/4-forms-controls/3-events-change/article.md
new file mode 100644
index 00000000..bc671cb4
--- /dev/null
+++ b/2-ui/4-forms-controls/3-events-change/article.md
@@ -0,0 +1,208 @@
+# Изменение: change, input, propertychange
+
+На элементах формы происходят события клавиатуры и мыши, но есть и несколько других, особенных событий.
+
+## Событие change
+
+Событие [change](http://www.w3.org/TR/html5/forms.html#event-input-change) происходит по окончании изменении значения элемента формы, когда это изменение зафиксировано. 
+
+Для текстовых элементов это означает, что событие произойдёт не при каждом вводе, а при потере фокуса.
+
+Например, пока вы набираете что-то в текстовом поле ниже -- события нет. Но как только вы уведёте фокус на другой элемент, например, нажмёте кнопку -- произойдет событие `onchange`.
+
+```html
+<!--+ autorun height=40 -->
+<input type="text" onchange="alert(this.value)">
+<input type="button" value="Кнопка">
+```
+
+Для остальных же элементов: `select`, `input type=checkbox/radio` оно срабатывает сразу при выборе значения.
+
+[warn header="Поздний `onchange` в IE8-"]
+В IE8- `checkbox/radio` при изменении мышью не инициируют событие сразу, а ждут потери фокуса.
+
+Для того, чтобы видеть изменения `checkbox/radio` тут же -- в IE8- нужно повесить обработчик на событие `click` (оно произойдет и при изменении значения с клавиатуры) или воспользоваться событием `propertychange`, описанным далее.
+[/warn]
+
+## Событие propertychange
+
+Это событие происходит только в старых IE, до версии 11, при любом изменении свойства. Оно позволяет отлавливать изменение тут же и используется, преимущественно, для исправления ошибок в старых IE.
+
+Если поставить его на `checkbox` в IE8-, то получится "правильное" событие `change`:
+
+```html
+<!--+ autorun height=40 -->
+<input type="checkbox"> Чекбокс с "onchange", работающим везде одинаково
+<script>
+var checkbox = document.body.children[0];
+
+if("onpropertychange" in checkbox) { 
+  // старый IE
+*!*
+  checkbox.onpropertychange = function() {
+    // проверим имя изменённого свойства
+    if (event.propertyName == "checked") { 
+      alert(checkbox.checked);
+    }
+  };
+*/!*
+} else {
+  // остальные браузеры
+  checkbox.onchange = function() {
+    alert(checkbox.checked);
+  };
+}
+</script>
+```
+
+Это событие также срабатывает при изменении значения текстового элемента, но в IE9 у него ошибка: оно не срабатывает при удалении символов.
+
+## Событие input
+
+Событие `input` срабатывает *тут же* при изменении значения текстового элемента и поддерживается всеми браузерами, кроме IE8-.
+
+В IE9 оно поддерживается частично, а именно -- *не возникает при удалении символов* (как и `onpropertychange`).
+
+Пример использования (не работает в IE8-):
+
+```html
+<!--+ autorun height=40 -->
+<input type="text"> oninput: <span id="result"></span>
+<script>
+var input = document.body.children[0];
+
+input.oninput = function() {
+  document.getElementById('result').innerHTML = input.value;
+};
+</script>
+```
+
+## События cut, copy, paste
+
+Эти события используются редко. Они происходят при вырезании/вставке/копировании значения.
+
+К сожалению, кросс-браузерного способа получить данные, которые вставляются/копируются, не существует, поэтому их основное применение -- это отмена соответствующей операции.
+
+Например, вот так:
+
+```html
+<!--+ autorun height=40 -->
+<input type="text" id="input"> event: <span id="result"></span>
+<script>
+  input.oncut = input.oncopy = input.onpaste = function(event) {
+    result.innerHTML = event.type + ' ' + input.value;
+    return false;
+  };
+</script>
+```
+
+## Пример: поле с контролем СМС
+
+Как видим, событий несколько и они взаимно дополняют друг друга.
+
+Посмотрим, как их использовать, на примере.
+
+Сделаем поле для СМС, рядом с которым должно показываться число символов, обновляющееся при каждом изменении поля.
+
+Как такое реализовать?
+
+Событие `input` идеально решит задачу во всех браузерах, кроме IE9-. Собственно, если IE9- нам не нужен, то на этом можно и остановиться.
+
+### IE9-
+
+В IE8- событие `input` не поддерживается, но, как мы видели ранее, есть `onpropertychange`, которое может заменить его. 
+
+Что же касается IE9 -- там поддерживаются и `input` и `onpropertychange`, но они оба не работают при удалении символов. Поэтому мы будем отслеживать удаление при помощи `keyup` на [key Delete]  и [key BackSpace] . А вот удаление командой "вырезать" из меню -- сможет отловить лишь `oncut`.
+
+Получается вот такая комбинация:
+
+```html
+<!--+ autorun run height=60 -->
+<input type="text" id="sms"> символов: <span id="result"></span>
+<script>
+
+function showCount() {
+  result.innerHTML = sms.value.length;
+}
+
+sms.onkeyup = sms.oninput = showCount;
+sms.onpropertychange = function() {
+  if (event.propertyName == "value") showCount();
+}
+sms.oncut = function() {
+  setTimeout(showCount, 0); // на момент oncut значение еще старое
+};
+</script>
+```
+
+Здесь мы добавили вызов `showCount` на все события, которые могут приводить к изменению значения. Да, иногда изменение будет обрабатываться несколько раз, но зато с гарантией. А лишние вызовы легко убрать, например, при помощи `throttle`-декоратора, описанного в задаче [](/task/throttle).
+
+**Есть и совсем другой простой, но действенный вариант: через `setInterval` регулярно проверять значение и, если оно слишком длинное, обрезать его.**
+
+Чтобы сэкономить ресурсы браузера, мы можем начинать отслеживание по `onfocus`, а прекращать -- по `onblur`, вот так:
+
+```html
+<!--+ autorun height=60 -->
+<input type="text" id="sms"> символов: <span id="result"></span>
+
+<script>
+var timerId;
+
+sms.onfocus = function() {
+
+  var lastValue = sms.value;
+  timerId = setInterval(function() {
+    if (sms.value != lastValue) {
+      showCount();
+      lastValue = sms.value;
+    }
+  }, 20);
+};
+
+sms.onblur = function() {
+  clearInterval(timerId);
+};
+
+function showCount() {
+  result.innerHTML = sms.value.length;
+}
+</script>
+```
+
+Обратим внимание -- весь этот "танец с бубном" нужен только для поддержки IE8-, в которых не поддерживается `oninput` и IE9, где `oninput` не работает при удалении.
+
+## Итого
+
+События изменения данных:
+
+<table class="bordered">
+<tr>
+<th>Событие</th>
+<th>Описание</th>
+<th>Особенности</th>
+</tr>
+<tr>
+<td>`change`</td>
+<td>Изменение значения любого элемента формы. Для текстовых элементов срабатывает при потере фокуса.</td>
+<td>В IE8- на чекбоксах ждет потери фокуса, поэтому для мгновенной реакции ставят также `onclick`-обработчик или `onpropertychange`.</td>
+</tr>
+<tr>
+<td>`input`</td>
+<td>Событие срабатывает только на текстовых элементах. Оно не ждет потери фокуса, в отличие от `change`.</td>
+<td>В IE8- не поддерживается, в IE9 не работает при удалении символов.</td>
+</tr>
+<tr>
+<td>`propertychange`</td>
+<td>Только для IE10-. Универсальное событие для отслеживания изменения свойств элементов. Имя изменённого свойства содержится в `event.propertyName`. Используют для мгновенной реакции на изменение значения в старых IE.
+</td>
+<td>В IE9 не срабатывает при удалении символов.</td>
+</tr>
+<tr>
+<td>`cut/copy/paste`</td>
+<td>Срабатывают при вставке/копировании/удалении текста. В них можно отменить действие браузера, и тогда вставке/копирования/удаления не произойдёт.</td>
+<td>Вставляемое значение получить нельзя: на момент срабатывания события в элементе всё ещё *старое* значение, а новое недоступно.</td>
+</tr>
+</table>
+
+Ещё особенность: в IE8- события `change`, `propertychange`, `cut` и аналогичные не всплывают. То есть, обработчики нужно назначать на сам элемент, без делегирования.
+
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md
new file mode 100644
index 00000000..f27b658f
--- /dev/null
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md
@@ -0,0 +1,23 @@
+Модальное окно делается путём добавления к документу `DIV`, полностью перекрывающего документ и имеющего больший `z-index`.
+
+В результате все клики будут доставаться этому `DIV'у`:
+
+Стиль:
+
+```css
+#cover-div {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9000;
+  width: 100%;
+  height: 100%;
+  background-color: gray;
+  opacity: 0.3;
+  filter: alpha(opacity=30);
+}
+```
+
+Самой форме нужно, естественно, дать еще больший `z-index`, чтобы она была над `DIV'ом`. Мы не помещаем форму в контейнер, чтобы она не унаследовала полупрозрачность.
+
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html
new file mode 100755
index 00000000..517ee3b4
--- /dev/null
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+
+
+#prompt-form {
+  display: inline-block;
+  padding: 5px 5px 5px 70px;
+  width: 200px;
+  border: 1px solid black;
+  background: white url(prompt.png) no-repeat left 5px;
+  vertical-align: middle;
+}
+
+#prompt-form-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  display: none;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+#prompt-form-container:before {
+  display: inline-block;
+  height: 100%;
+  content: '';
+  vertical-align: middle;
+}
+
+#cover-div {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9000;
+  width: 100%;
+  height: 100%;
+  background-color: gray;
+  opacity: 0.3;
+  filter: alpha(opacity=30);
+}
+
+#prompt-form input[name="text"] {
+  display: block;
+  margin: 5px;
+  width: 180px;
+}
+</style>
+</head>
+<body style="height:3000px">
+
+<h1>Нажмите на кнопку ниже</h1>
+
+<input type="button" value="Нажмите для показа формы ввода" id="show-button">
+
+
+<div id="prompt-form-container">
+  <form id="prompt-form">
+    <div id="prompt-message"></div>
+    <input name="text" type="text">
+    <input type="submit" value="Ок">
+    <input type="button" name="cancel" value="Отмена">
+  </form>
+</div>
+
+<script>
+
+/* Показать полупрозрачный DIV, затеняющий всю страницу 
+(а форма будет не в нем, а рядом с ним, чтобы не полупрозрачная) */
+function showCover() {
+  var coverDiv = document.createElement('div');
+  coverDiv.id = 'cover-div';
+  document.body.appendChild(coverDiv);
+}
+
+function hideCover() {
+  document.body.removeChild(document.getElementById('cover-div'));
+}
+
+function showPrompt(text, callback) {
+  showCover();
+  var form = document.getElementById('prompt-form');
+  var container = document.getElementById('prompt-form-container');
+  document.getElementById('prompt-message').innerHTML = text;
+  form.elements.text.value = '';
+
+  function complete(value) {
+    hideCover();
+    container.style.display = 'none';
+    document.onkeydown = null;
+    callback(value);
+  }
+
+  form.onsubmit = function() {
+    var value = form.elements.text.value;
+    if (value == '') return false; // игнорировать пустой submit
+
+    complete(value);
+    return false;
+  };
+
+  form.elements.cancel.onclick = function() {
+    complete(null);
+  };
+
+  document.onkeydown = function(e) {
+    e = e || event;
+    if (e.keyCode == 27) { // escape
+      complete(null);
+    }
+  };
+
+  var lastElem = form.elements[form.elements.length-1];      
+  var firstElem = form.elements[0];
+          
+  lastElem.onkeydown = function(e) {
+    if (e.keyCode == 9 && !e.shiftKey) {
+      firstElem.focus();
+      return false;
+    }
+  };
+  
+  firstElem.onkeydown = function(e) {
+    if (e.keyCode == 9 && e.shiftKey) {
+      lastElem.focus();
+      return false;
+    }
+  };
+    
+
+  container.style.display = 'block';
+  form.elements.text.focus();
+}
+
+document.getElementById('show-button').onclick = function() {
+  showPrompt("Введите что-нибудь<br>...умное :)", function(value) {
+    alert("Вы ввели: " + value);
+  });
+};
+
+</script>
+
+
+
+</body>
+</html>
+
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html
new file mode 100755
index 00000000..5c1ff05b
--- /dev/null
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+<style>
+html, body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+#prompt-form {
+  display: inline-block;
+  padding: 5px 5px 5px 70px;
+  width: 200px;
+  border: 1px solid black;
+  background: white url(http://js.cx/clipart/prompt.png) no-repeat left 5px;
+  vertical-align: middle;
+}
+
+#prompt-form-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+#prompt-form-container:before {
+  display: inline-block;
+  height: 100%;
+  content: '';
+  vertical-align: middle;
+}
+
+#prompt-form input[name="text"] {
+  display: block;
+  margin: 5px;
+  width: 180px;
+}
+</style>
+</head>
+<body>
+
+
+<div id="prompt-form-container">
+  <form id="prompt-form">
+    <div id="prompt-message">Введите, пожалуйста...<br>Что-то..</div>
+    <input name="text" type="text">
+    <input type="submit" value="Ок">
+    <input type="button" name="cancel" value="Отмена">
+  </form>
+</div>
+
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
new file mode 100644
index 00000000..cb2fe59e
--- /dev/null
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
@@ -0,0 +1,34 @@
+# Модальное диалоговое окно
+
+[importance 5]
+
+Создайте функцию `showPrompt(text, callback)`, которая выводит форму для ввода с сообщением `text` и кнопками `ОК/Отмена`.
+
+<ul>
+<li>При отправке формы (OK/ввод в текстовом поле) -- должна вызываться функция `callback` со значением поля.</li>
+<li>При нажатии на `Отмена` или на клавишу [key Esc] -- должна вызываться функция `callback(null)`. Клавиша [key Esc] должна закрывать форму всегда, даже если поле для ввода сообщения не в фокусе.</li>
+</ul>
+
+Особенности реализации:
+<ul>
+<li>Форма должна показываться в центре окна (и оставаться в центре при изменении его размеров, а также при прокрутке окна!).</li>
+<li>Текст может состоять из нескольких строк, возможен любой HTML</li>
+<li>При показе формы остальные элементы страницы использовать нельзя, не работают другие кнопки и т.п, это окно -- *модальное*.</li>
+<li>При показе формы -- сразу фокус на `INPUT` для ввода.</li>
+<li>Нажатия [key Tab]/[key Shift+Tab] переключают в цикле только по полям формы, они не позволяют переключиться на другие элементы страницы.</li>
+</ul>
+
+Пример использования:
+
+```js
+showPrompt("Введите что-нибудь<br>... умное :)", function(value) {
+  alert(value);
+});
+```
+
+Демо в ифрейме:
+[iframe src="solution" height=160 border=1]
+
+Исходный HTML/CSS для формы с готовым fixed-позиционированием:
+
+[edit src="source" task/]
diff --git a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.md b/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.md
new file mode 100644
index 00000000..eeda701c
--- /dev/null
+++ b/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Открыть решение в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.view/index.html b/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.view/index.html
new file mode 100755
index 00000000..b0a37767
--- /dev/null
+++ b/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.view/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+<style>
+td select, td input {
+  width: 150px;
+}
+
+label {
+  display: block;
+}
+
+.error input, .error textarea {
+  border: 1px solid red;
+}
+.error {
+  color: red;
+}
+
+</style>
+</head>
+<body>
+
+
+<form>
+<table>
+  <tr>
+  <td>От кого</td>
+  <td><input name="from" type="text"></td>
+  </tr>
+  <tr>
+  <td>Ваш пароль</td>
+  <td><input name="password" type="password"></td>
+  </tr>
+  <tr>
+  <td>Повторите пароль</td>
+  <td><input name="password2" type="password"></td>
+  </tr>
+  <tr>
+  <td>Куда</td>
+  <td>
+    <select name="to">
+      <option></option>
+      <option value="1">Отдел снабжения</option>
+      <option value="2">Отдел разработки</option>
+      <option value="3">Директору</option>
+    </select>
+  </td>
+  </tr>
+</table>
+
+Сообщение:
+<label>
+<textarea name="message" style="display:block;width:400px;height:80px"></textarea>
+</label>
+
+<input type="button" onclick="validate(this.form)" value="Проверить">
+</form>
+
+<script>
+
+function showError(container, errorMessage) {
+  container.className = 'error';
+  var msgElem = document.createElement('span');
+  msgElem.className = "error-message";
+  msgElem.innerHTML = errorMessage;
+  container.appendChild(msgElem);
+}
+
+function resetError(container) {
+  container.className = '';
+  if (container.lastChild.className == "error-message") {
+    container.removeChild(container.lastChild);
+  }
+}
+
+function validate(form) {
+  var elems = form.elements;
+
+  resetError(elems.from.parentNode);
+  if (!elems.from.value) {
+    showError(elems.from.parentNode, ' Укажите от кого.');
+  }
+
+  resetError(elems.password.parentNode);
+  if (!elems.password.value) {
+    showError(elems.password.parentNode, ' Укажите пароль.');
+  } else if (elems.password.value != elems.password2.value) {
+    showError(elems.password.parentNode, ' Пароли не совпадают.');
+  }
+
+  resetError(elems.to.parentNode);
+  if (!elems.to.value) {
+    showError(elems.to.parentNode, ' Укажите, куда.');
+  }
+
+  resetError(elems.message.parentNode);
+  if (!elems.message.value) {
+    showError(elems.message.parentNode, ' Отсутствует текст.');
+  }
+
+}
+
+</script>
+
+
+</body>
+</html>
+
diff --git a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/source.view/index.html b/2-ui/4-forms-controls/4-forms-submit/2-form-validation/source.view/index.html
new file mode 100755
index 00000000..819e8b24
--- /dev/null
+++ b/2-ui/4-forms-controls/4-forms-submit/2-form-validation/source.view/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+<style>
+td select, td input {
+  width: 150px;
+}
+
+label {
+  display: block;
+}
+
+/* ваши стили */
+
+</style>
+</head>
+<body>
+
+
+<form>
+<table>
+  <tr>
+  <td>От кого</td>
+  <td><input name="from" type="text"></td>
+  </tr>
+  <tr>
+  <td>Ваш пароль</td>
+  <td><input name="password" type="password"></td>
+  </tr>
+  <tr>
+  <td>Повторите пароль</td>
+  <td><input name="password2" type="password"></td>
+  </tr>
+  <tr>
+  <td>Куда</td>
+  <td>
+    <select name="to">
+      <option></option>
+      <option value="1">Отдел снабжения</option>
+      <option value="2">Отдел разработки</option>
+      <option value="3">Директору</option>
+    </select>
+  </td>
+  </tr>
+</table>
+
+Сообщение:
+<label>
+<textarea name="message" style="display:block;width:400px;height:100px"></textarea>
+</label>
+
+<input type="button" onclick="validate(this.form)" value="Проверить">
+</form>
+
+<script>
+
+function validate(form) {
+  /* ваш код */
+}
+
+/* ваш код */
+
+</script>
+
+
+</body>
+</html>
+
diff --git a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/task.md b/2-ui/4-forms-controls/4-forms-submit/2-form-validation/task.md
new file mode 100644
index 00000000..a4318fe1
--- /dev/null
+++ b/2-ui/4-forms-controls/4-forms-submit/2-form-validation/task.md
@@ -0,0 +1,17 @@
+# Валидация формы
+
+[importance 3]
+
+Напишите функцию `validate(form)`, которая проверяет содержимое формы по клику на кнопку "Проверить".
+ 
+Ошибки:
+<ol>
+<li>Одно из полей не заполнено.</li>
+<li>Пароли не совпадают.</li>
+</ol>
+
+Ошибка должна сопровождаться сообщением у поля. Например:
+[iframe height=280 src="solution"]
+
+ [edit src="source" task/]
+
diff --git a/2-ui/4-forms-controls/4-forms-submit/article.md b/2-ui/4-forms-controls/4-forms-submit/article.md
new file mode 100644
index 00000000..05055b4e
--- /dev/null
+++ b/2-ui/4-forms-controls/4-forms-submit/article.md
@@ -0,0 +1,71 @@
+# Формы: отправка, событие и метод submit
+
+Событие `submit` возникает при отправке формы. Наиболее частое его применение -- это *валидация* (проверка) формы перед отправкой. 
+
+Метод `submit` позволяет инициировать отправку формы из JavaScript, без участия пользователя. Далее мы рассмотрим их важные детали использования.
+[cut]
+## Событие submit
+
+Чтобы отправить форму на сервер, у посетителя есть два способа:
+
+<ol>
+<li>**Первый -- это нажать кнопку `<input type="submit">` или `<input type="image">`.**</li>
+<li>**Второй -- нажать Enter, находясь на каком-нибудь поле.**</li>
+</ol>
+
+Какой бы способ ни выбрал посетитель -- будет сгенерировано событие `submit`. Обработчик в нём может проверить данные и, если они неверны, то вывести ошибку и сделать `event.preventDefault()` -- тогда форма не отправится на сервер.
+
+Посмотрим это на живом примере. 
+
+Оба способа выдадут сообщение, форма не будет отправлена:
+
+```html
+<!--+ autorun height=80 -->
+<form onsubmit="alert('submit!');return false">
+  Первый: Enter в текстовом поле <input type="text" value="Текст"><br>
+  Второй: Нажать на "Отправить": <input type="submit" value="Отправить">
+</form>
+
+</button>
+```
+
+Ожидаемое поведение:
+
+<ol><li>Перейдите в текстовое поле и нажмите Enter, будет событие, но форма не отправится на сервер благодаря `return false` в обработчике.</li>
+<li>То же самое произойдет при клике на `<input type="submit">`.</li>
+</ol>
+
+[smart header="Взаимосвязь событий `submit` и `click`"]
+
+**При отправке формы путём нажатия Enter на текстовом поле, на элементе `<input type="submit">` везде, кроме IE<9, генерируется событие `click`.**
+
+Это довольно забавно, учитывая что клика-то и не было.
+
+```html
+<!--+ autorun height=80 -->
+<form onsubmit="alert('submit');return false">
+ <input type="text" size="30" value="Нажми здесь Enter">
+ <input type="submit" value="Submit" *!*onclick="alert('click')"*/!*>
+</form>
+```
+
+[/smart]
+
+[warn header="В IE<9 событие `submit` не всплывает"]
+В IE<9 событие `submit` не всплывает. Впрочем, если вешать обработчик `submit` на сам элемент формы, без использования делегирования, то это не создаёт проблем.
+</li>
+</ul>
+[/warn]
+
+
+## Метод submit
+
+Чтобы отправить форму на сервер из JavaScript -- нужно вызвать на элементе формы метод `form.submit()`.
+
+При этом само событие `submit` не генерируется. Предполагается, что если программист вызывает метод `form.submit()`, то он выполнил все проверки.
+
+Это используют, в частности, для искусственной генерации и отправки формы. 
+
+
+
+
diff --git a/2-ui/4-forms-controls/index.md b/2-ui/4-forms-controls/index.md
new file mode 100644
index 00000000..266c555d
--- /dev/null
+++ b/2-ui/4-forms-controls/index.md
@@ -0,0 +1,3 @@
+# Формы, элементы управления
+
+Особые свойства, методы и события для работы с формами `<form>` и элементами ввода: `<input>`, `<select>` и другими.
\ No newline at end of file
diff --git a/2-ui/5-widgets/1-architect-intro/article.md b/2-ui/5-widgets/1-architect-intro/article.md
new file mode 100644
index 00000000..dff29fed
--- /dev/null
+++ b/2-ui/5-widgets/1-architect-intro/article.md
@@ -0,0 +1,12 @@
+# Введение
+
+[quote author="Эдсгер Вибе Дейкстра"]
+Для надёжности необходима простота.
+[/quote]
+
+В современной JavaScript-разработке используются фреймворки, которые дают готовые библиотеки и правила для написания кода. Эта глава не ставит своей целью их все заменить (зачем?), а равно как и научить какому-нибудь фреймворку (не факт, что он для вас лучший).
+
+Вместо этого мы разберём основные средства для построения архитектуры и при помощи чистого JavaScript построим компоненты интерфейса с их использованием.
+
+Это во-первых покажет, что и без фреймворков есть жизнь, а во-вторых даст фундамент для освоения любого фреймворка, какой бы вы ни выбрали.
+
diff --git a/2-ui/5-widgets/2-widgets-structure/1-clock/solution.md b/2-ui/5-widgets/2-widgets-structure/1-clock/solution.md
new file mode 100644
index 00000000..099f5e81
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/1-clock/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/1-clock/solution.view/clock.js b/2-ui/5-widgets/2-widgets-structure/1-clock/solution.view/clock.js
new file mode 100755
index 00000000..7fc8f199
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/1-clock/solution.view/clock.js
@@ -0,0 +1,31 @@
+function Clock(options) {
+  var elem = options.elem;
+
+  var timer;
+
+  function render() {
+    var date = new Date();
+
+    var hours = date.getHours();
+    if (hours < 10) hours = '0' + hours;
+    $('.hour', elem).html(hours);
+
+    var min = date.getMinutes();
+    if (min < 10) min = '0' + min;
+    $('.min', elem).html(min);
+
+    var sec = date.getSeconds();
+    if (sec < 10) sec = '0' + sec;
+    $('.sec', elem).html(sec);
+  }
+
+  this.stop = function() {
+    clearInterval(timer);
+  };
+
+  this.start = function() {
+    render();
+    timer = setInterval(render, 1000);
+  }
+
+}
diff --git a/2-ui/5-widgets/2-widgets-structure/1-clock/solution.view/index.html b/2-ui/5-widgets/2-widgets-structure/1-clock/solution.view/index.html
new file mode 100755
index 00000000..0da6aba7
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/1-clock/solution.view/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Часики</title>
+    <script src="http://code.jquery.com/jquery.min.js"></script>
+    <script src="clock.js"></script>
+    <meta charset="utf-8">
+    <style>
+      .hour { color: green }
+      .min { color: blue }
+      .sec { color: red }
+    </style>
+</head>
+<body>
+
+<div id="clock" class="clock">
+    <span class="hour">00</span>:<span class="min">00</span>:<span class="sec">00</span>
+</div>
+
+<script>
+
+  var pageClock = new Clock({
+    elem: $('#clock')
+  });
+
+</script>
+
+<input type="button" onclick="pageClock.start()" value="Старт">
+<input type="button" onclick="pageClock.stop()" value="Стоп">
+
+<input type="button" 
+  onclick="alert('Часы должны останавливаться во время alert,\nи продолжать корректно работать после нажатия на ОК')"
+  value="alert для проверки корректного возобновления"
+>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/2-widgets-structure/1-clock/source.view/index.html b/2-ui/5-widgets/2-widgets-structure/1-clock/source.view/index.html
new file mode 100755
index 00000000..4b3156ee
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/1-clock/source.view/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Часики</title>
+    <script src="http://code.jquery.com/jquery.min.js"></script>
+    <meta charset="utf-8">
+    <style>
+      .hour { color: green }
+      .min { color: blue }
+      .sec { color: red }
+    </style>
+</head>
+<body>
+
+<div id="clock" class="clock">
+    <span class="hour">00</span>:<span class="min">00</span>:<span class="sec">00</span>
+</div>
+
+<script>
+
+  // .. ваш код Clock
+
+  var pageClock = new Clock({
+    elem: $('#clock')
+  });
+
+</script>
+
+<input type="button" onclick="pageClock.start()" value="Старт">
+<input type="button" onclick="pageClock.stop()" value="Стоп">
+
+<input type="button" 
+  onclick="alert('Часы должны останавливаться во время alert,\nи продолжать корректно работать после нажатия на ОК')"
+  value="alert для проверки корректного возобновления"
+>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/2-widgets-structure/1-clock/task.md b/2-ui/5-widgets/2-widgets-structure/1-clock/task.md
new file mode 100644
index 00000000..84412724
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/1-clock/task.md
@@ -0,0 +1,25 @@
+# Часики
+
+[importance 5]
+
+Создайте компонент "Часы" (Clock).
+
+Интерфейс:
+
+```js
+var clock = new Clock({
+  elem: элемент
+});
+
+clock.start(); // старт
+clock.stop();  // стоп
+```
+
+Остальные методы, если нужны, должны быть приватными.
+
+При нажатии на `alert` часы должны приостанавливаться, а затем продолжать идти с правильным временем.
+
+Пример результата:
+[iframe src="solution" border=1]
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/2-slider-widget/solution.md b/2-ui/5-widgets/2-widgets-structure/2-slider-widget/solution.md
new file mode 100644
index 00000000..402801f8
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/2-slider-widget/solution.md
@@ -0,0 +1,3 @@
+Пример переписанного слайдера:
+
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/2-slider-widget/solution.view/index.html b/2-ui/5-widgets/2-widgets-structure/2-slider-widget/solution.view/index.html
new file mode 100755
index 00000000..8f4b640f
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/2-slider-widget/solution.view/index.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+  
+  <head>
+    <meta charset="utf-8">
+    
+    <script src="http://code.jquery.com/jquery.min.js"></script>
+    
+    <style>
+      .slider {
+        margin: 5px;
+        width: 310px;
+        height: 15px;
+        border-radius: 5px;
+        background: #E0E0E0;
+        background: -moz-linear-gradient(left top, #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
+        background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
+        background: linear-gradient(left top, #E0E0E0, #EEEEEE);
+      }
+      .thumb {
+        position: relative;
+        top: -5px;
+        left: 10px;
+        width: 10px;
+        height: 25px;
+        border-radius: 3px;
+        background: blue;
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  
+  <body>
+    <div id="slider" class="slider">
+      <div class="thumb"></div>
+    </div>
+    <script>
+      var slider = new Slider({
+        elem: $('#slider')
+      });
+
+      function Slider(options) {
+        var elem = options.elem;
+        var thumbElem = elem.find('.thumb');
+
+        var sliderCoords, thumbCoords, shiftX, shiftY;
+
+        elem.on('dragstart', false)
+          .on('mousedown', '.thumb', onThumbMouseDown);
+
+        // ---------------
+
+        function onDocumentMouseMove(e) {
+          moveTo(e.pageX);
+        }
+
+        function onThumbMouseDown(e) {
+          startDrag(e.pageX, e.pageY);
+          return false; // disable selection start (cursor change)
+        }
+
+        function onDocumentMouseUp() {
+          endDrag();
+        }
+
+        // -------------------
+
+        function moveTo(pageX) {
+          // вычесть координату родителя, т.к. position: relative
+          var newLeft = pageX - shiftX - sliderCoords.left;
+
+          // курсор ушёл вне слайдера
+          if(newLeft < 0) {
+            newLeft = 0;
+          }
+          var rightEdge = elem.width() - thumbElem.width();
+          if(newLeft > rightEdge) {
+            newLeft = rightEdge;
+          }
+
+          thumbElem.css('left', newLeft);
+        }
+
+
+        function startDrag(startPageX, startPageY) {
+          thumbCoords = thumbElem.offset();
+          shiftX = startPageX - thumbCoords.left;
+          shiftY = startPageY - thumbCoords.top;
+
+          sliderCoords = elem.offset();
+
+          $(document).on({
+            'mousemove.slider': onDocumentMouseMove,
+            'mouseup.slider': onDocumentMouseUp
+          });
+
+        }
+
+        function endDrag() {
+          $(document).off('.slider');
+        }
+
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/2-ui/5-widgets/2-widgets-structure/2-slider-widget/task.md b/2-ui/5-widgets/2-widgets-structure/2-slider-widget/task.md
new file mode 100644
index 00000000..71bb67f1
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/2-slider-widget/task.md
@@ -0,0 +1,8 @@
+# Слайдер-компонент
+
+[importance 5]
+
+Перепишите слайдер в виде компонента:
+[iframe src="solution" height=60 border=1]
+
+Исходный документ возьмите из решения задачи [](/task/slider).
diff --git a/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.md b/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.md
new file mode 100644
index 00000000..76426b34
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.md
@@ -0,0 +1 @@
+[edit src="solution"/]
diff --git a/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/index.html b/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/index.html
new file mode 100755
index 00000000..4e0a49e1
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <script src="listSelect.js"></script>
+</head>
+<body>
+
+Клик на элементе выделяет только его.<br>
+Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.<br>
+Shift+Клик добавляет промежуток от последнего кликнутого к выделению.<br>
+
+<ul>
+<li>Кристофер Робин</li>
+<li>Винни-Пух</li>
+<li>Ослик Иа</li>
+<li>Мудрая Сова</li>
+<li>Кролик. Просто кролик.</li>
+</ul>
+
+<button onclick="alert(listSelect.getSelected())">listSelect.getSelected()</button>
+
+<script>
+var listSelect = new ListSelect({
+  elem: $('ul')
+});
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/listSelect.js b/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/listSelect.js
new file mode 100755
index 00000000..558c1906
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/listSelect.js
@@ -0,0 +1,61 @@
+
+function ListSelect(options) {
+  var elem = options.elem;
+
+  var lastClickedLi = null;
+
+  elem.on('click', 'li', onLiClick);
+  elem.on('selectstart mousedown', false);
+
+  function onLiClick(e) {
+    var li = $(this);
+
+    if(e.metaKey || e.ctrlKey) { // для Mac проверяем Cmd, т.к. Ctrl + click там контекстное меню
+      toggleSelect(li);
+    } else if (e.shiftKey) {
+      selectFromLast(li);
+    } else {
+      selectSingle(li);
+    }
+
+    lastClickedLi = li;
+  }
+
+  function deselectAll() {
+    elem.children().removeClass('selected');
+  }    
+
+  function toggleSelect(li) {
+    li.toggleClass('selected');
+  }
+
+  function selectSingle(li) {
+    deselectAll();
+    li.addClass('selected');
+  }
+
+  function selectFromLast(target) {
+    var startElem = lastClickedLi || elem.children().first();
+
+    target.addClass('selected');
+    if (startElem[0] == target[0]) {
+      // клик на том же элементе, что и раньше
+      // это особый случай
+      return; 
+    }
+
+    var isLastClickedBefore = startElem.index() < target.index();
+
+    if (isLastClickedBefore) {
+      startElem.nextUntil(target).add(startElem).addClass('selected');
+    } else {
+      startElem.prevUntil(target).add(startElem).addClass('selected');
+    }
+  }
+
+  this.getSelected = function() {
+    return elem.children('.selected').map(function() {
+      return this.innerHTML;
+    }).toArray();
+  };
+}
diff --git a/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/style.css b/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/style.css
new file mode 100755
index 00000000..2b2539ec
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/style.css
@@ -0,0 +1,7 @@
+
+.selected {
+  background: #0f0;
+}
+li {
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/task.md b/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/task.md
new file mode 100644
index 00000000..b516ac8e
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/task.md
@@ -0,0 +1,20 @@
+# Компонент: список с выделением
+
+[importance 5]
+
+Перепишите решение задачи [](/task/selectable-list) (последний шаг) в виде компонента, с использованием jQuery. 
+
+У компонента должен быть единственный публичный метод `getSelected()`, который возвращает выбранные значения в виде массива.
+
+Использование:
+
+```js
+var listSelect = new ListSelect({
+  elem: $('ul')
+});
+// listSelect.getSelected()
+```
+
+Демо:
+[iframe border="1" src="solution"]
+
diff --git a/2-ui/5-widgets/2-widgets-structure/4-voter/solution.md b/2-ui/5-widgets/2-widgets-structure/4-voter/solution.md
new file mode 100644
index 00000000..319263df
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/4-voter/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Открыть решение в песочнице[/edit]
diff --git a/2-ui/5-widgets/2-widgets-structure/4-voter/solution.view/index.html b/2-ui/5-widgets/2-widgets-structure/4-voter/solution.view/index.html
new file mode 100755
index 00000000..3e6bf82d
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/4-voter/solution.view/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .voter {
+      font-family: Consolas, "Lucida Console", monospace;
+      font-size: 18px;
+    }
+    .up, .down {
+      cursor: pointer;
+      color: blue;
+      font-weight: bold;
+    }
+  </style>
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+</head>
+<body>
+
+<div id="voter" class="voter">
+  <span class="down">—</span>
+  <span class="vote">0</span>
+  <span class="up">+</span>
+</div>
+
+<script>
+function Voter(options) {
+  var elem = options.elem;
+
+  var voteElem = elem.find('.vote');
+
+  elem.on('click', '.down', onDownClick)
+    .on('click', '.up', onUpClick)
+    .on('mousedown selectstart', false);
+
+  // ----------- методы -------------
+
+  function onDownClick() {
+    voteDecrease(); // сам обработчик не меняет голос, он вызывает функцию
+  }
+
+  function onUpClick() {
+    voteIncrease();
+  }
+
+  function voteDecrease() {
+    voteElem.html( +voteElem.html()-1 );
+  }
+
+  function voteIncrease() {
+    voteElem.html( +voteElem.html()+1 );
+  }
+
+  this.setVote = function(vote) {
+    voteElem.html( +vote );
+  };
+
+}
+
+var voter = new Voter({
+  elem: $('#voter')
+});
+voter.setVote(1);
+
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/5-widgets/2-widgets-structure/4-voter/source.view/index.html b/2-ui/5-widgets/2-widgets-structure/4-voter/source.view/index.html
new file mode 100755
index 00000000..297b8c47
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/4-voter/source.view/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .voter {
+      font-family: Consolas, "Lucida Console", monospace;
+      font-size: 18px;
+    }
+    .up, .down {
+      cursor: pointer;
+      color: blue;
+      font-weight: bold;
+    }
+  </style>
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+</head>
+<body>
+
+<div id="voter" class="voter">
+  <span class="down">—</span>
+  <span class="vote">0</span>
+  <span class="up">+</span>
+</div>
+
+<script>
+function Voter(options) {
+  // ... ваш код
+}
+
+var voter = new Voter({
+  elem: $('#voter')
+});
+
+voter.setVote(1);
+
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/5-widgets/2-widgets-structure/4-voter/task.md b/2-ui/5-widgets/2-widgets-structure/4-voter/task.md
new file mode 100644
index 00000000..caab2bf8
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/4-voter/task.md
@@ -0,0 +1,25 @@
+# Голосовалка
+
+[importance 5]
+
+Напишите функцию-конструктор `new Voter(options)` для голосовалки. 
+Она должна получать элемент в `options.elem`, в следующей разметке:
+
+```html
+<div id="voter" class="voter">
+  <span class="down">—</span>
+  <span class="vote">0</span>
+  <span class="up">+</span>
+</div>
+```
+
+По клику на `+` и `—` число должно увеличиваться или уменьшаться.
+
+**Публичный метод `voter.setVote(vote)` должен устанавливать текущее число -- значение голоса.** 
+
+Все остальные методы и свойства пусть будут приватными.
+
+Результат:
+[iframe src="solution" height=60 border=1]
+
+[edit src="source" task/]
diff --git a/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.md b/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.md
new file mode 100644
index 00000000..099f5e81
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/index.html b/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/index.html
new file mode 100755
index 00000000..3aa85a15
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+  <script src="http://code.jquery.com/jquery-latest.js"></script>
+  <script src="voter.js"></script> <!-- отрефакторить -->
+</head>
+<body>
+
+<div id="voter" class="voter">
+  <span class="down">–</span>
+  <span class="vote">0</span>
+  <span class="up">+</span>
+</div>
+
+<script>
+
+var voter = new Voter({
+  elem: $('#voter')
+});
+
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/style.css b/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/style.css
new file mode 100755
index 00000000..6b05faec
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/style.css
@@ -0,0 +1,10 @@
+
+.voter {
+  font-family: Consolas, "Lucida Console", monospace;
+  font-size: 18px;
+}
+.up, .down {
+  cursor: pointer;
+  color: blue;
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/voter.js b/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/voter.js
new file mode 100755
index 00000000..80f3096b
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/voter.js
@@ -0,0 +1,22 @@
+
+function Voter(options) {
+  var elem = this._elem = options.elem;
+  this._voteElem = elem.find('.vote');
+
+  elem.on('mousedown selectstart', false);
+
+  elem.on('click', '.down', this._onDownClick.bind(this));
+  elem.on('click', '.up', this._onUpClick.bind(this));
+}
+
+Voter.prototype._onDownClick = function() {
+  this._voteElem.html( +this._voteElem.html() - 1 );
+};
+
+Voter.prototype._onUpClick = function() {
+  this._voteElem.html( +this._voteElem.html() + 1 );
+};
+
+Voter.prototype.setVote = function(vote) {
+  this._voteElem.html(vote);
+};
diff --git a/2-ui/5-widgets/2-widgets-structure/5-voter-proto/task.md b/2-ui/5-widgets/2-widgets-structure/5-voter-proto/task.md
new file mode 100644
index 00000000..347a985c
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/5-voter-proto/task.md
@@ -0,0 +1,9 @@
+# Голосовалка в прототипном стиле ООП
+
+[importance 5]
+
+Поменяйте стиль ООП в голосовалке, созданной в задаче [](/task/voter) на прототипный.
+
+Внешний код, использующий класс `Voter`, не должен измениться.
+
+В качестве исходого кода возьмите решение задачи [](/task/voter).
diff --git a/2-ui/5-widgets/2-widgets-structure/6-voter-colored/solution.md b/2-ui/5-widgets/2-widgets-structure/6-voter-colored/solution.md
new file mode 100644
index 00000000..f3403556
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/6-voter-colored/solution.md
@@ -0,0 +1,3 @@
+Для показа голосов также добавлены семантические классы `.positive/.negative` в `style.css`.
+
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/6-voter-colored/solution.view/colored-voter.js b/2-ui/5-widgets/2-widgets-structure/6-voter-colored/solution.view/colored-voter.js
new file mode 100755
index 00000000..7abd21b7
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/6-voter-colored/solution.view/colored-voter.js
@@ -0,0 +1,15 @@
+function ColoredVoter(options) {
+  Voter.apply(this, arguments);
+}
+ColoredVoter.prototype = Object.create(Voter.prototype);
+
+ColoredVoter.prototype._renderVote = function() {
+  Voter.prototype._renderVote.apply(this, arguments);
+  this._voteElem.removeClass('positive negative');
+  if (this._vote > 0) {
+    this._voteElem.addClass('positive');
+  }
+  if (this._vote < 0) {
+    this._voteElem.addClass('negative');
+  }
+};
diff --git a/2-ui/5-widgets/2-widgets-structure/6-voter-colored/solution.view/index.html b/2-ui/5-widgets/2-widgets-structure/6-voter-colored/solution.view/index.html
new file mode 100755
index 00000000..be2406fe
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/6-voter-colored/solution.view/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+  <script src="http://code.jquery.com/jquery-latest.js"></script>
+  <script src="voter.js"></script> <!-- отрефакторить -->
+  <script src="colored-voter.js"></script> <!-- отнаследовать и переопределить методы -->
+</head>
+<body>
+
+<div id="voter" class="voter">
+  <span class="down">–</span>
+  <span class="vote">0</span>
+  <span class="up">+</span>
+</div>
+
+<script>
+
+var voter = new ColoredVoter({
+  elem: $('#voter')
+});
+
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/5-widgets/2-widgets-structure/6-voter-colored/solution.view/style.css b/2-ui/5-widgets/2-widgets-structure/6-voter-colored/solution.view/style.css
new file mode 100755
index 00000000..16870974
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/6-voter-colored/solution.view/style.css
@@ -0,0 +1,18 @@
+
+.voter {
+  font-family: Consolas, "Lucida Console", monospace;
+  font-size: 18px;
+}
+.up, .down {
+  cursor: pointer;
+  color: blue;
+  font-weight: bold;
+}
+
+.positive {
+  color: green;
+}
+
+.negative {
+  color: red;
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/6-voter-colored/solution.view/voter.js b/2-ui/5-widgets/2-widgets-structure/6-voter-colored/solution.view/voter.js
new file mode 100755
index 00000000..db936fb1
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/6-voter-colored/solution.view/voter.js
@@ -0,0 +1,28 @@
+
+function Voter(options) {
+  var elem = this._elem = options.elem;
+  this._voteElem = elem.find('.vote');
+  this._vote = 0;
+
+  elem.on('mousedown selectstart', false);
+
+  elem.on('click', '.down', this._onDownClick.bind(this));
+  elem.on('click', '.up', this._onUpClick.bind(this));
+}
+
+Voter.prototype._onDownClick = function() {
+  this.setVote(this._vote - 1);
+};
+
+Voter.prototype._onUpClick = function() {
+  this.setVote(this._vote + 1);
+};
+
+Voter.prototype._renderVote = function() {
+  this._voteElem.html(this._vote);
+};
+
+Voter.prototype.setVote = function(vote) {
+  this._vote = vote;
+  this._renderVote();
+};
diff --git a/2-ui/5-widgets/2-widgets-structure/6-voter-colored/task.md b/2-ui/5-widgets/2-widgets-structure/6-voter-colored/task.md
new file mode 100644
index 00000000..6c8156ba
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/6-voter-colored/task.md
@@ -0,0 +1,17 @@
+# Добавить цвет в голосовалку
+
+[importance 5]
+
+Создайте функцию-конструктор `ColoredVoter`, которая наследует от голосовалки, созданной в задаче [](/task/voter-proto) и  отображает положительные значения зелёным, а отрицательные -- красным.
+
+Результат работы `new ColoredVoter`: (проголосуйте, чтобы увидеть):
+[iframe border=1 src="solution"]
+
+Решение задачи состоит из двух этапов:
+<ol>
+<li>Внести изменения в `Voter`, вынести логику отображения голоса в защищенный метод `_renderVote`, чтобы его можно было отнаследовать. При необходимости добавьте другие методы и свойства. Делайте такой код, который будет удобно расширять.</li>
+<li>Отнаследовать и переопределить `_renderVote` в `ColoredVoter`.</li>
+</ol>
+
+
+В качестве исходного кода используйте решение задачи [](/task/voter-proto).
diff --git a/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/solution.md b/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/solution.md
new file mode 100644
index 00000000..099f5e81
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/solution.view/index.html b/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/solution.view/index.html
new file mode 100755
index 00000000..86a48b29
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/solution.view/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+  <script src="http://code.jquery.com/jquery-latest.js"></script>
+  <script src="voter.js"></script> <!-- отрефакторить -->
+  <script src="step-voter.js"></script> <!-- отнаследовать и переопределить методы -->
+</head>
+<body>
+
+<div id="voter" class="voter">
+  <span class="down">–</span>
+  <span class="vote">0</span>
+  <span class="up">+</span>
+</div>
+
+<script>
+
+var voter = new StepVoter({
+  elem: $('#voter'),
+  step: 2
+});
+
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/solution.view/step-voter.js b/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/solution.view/step-voter.js
new file mode 100755
index 00000000..b474294b
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/solution.view/step-voter.js
@@ -0,0 +1,13 @@
+function StepVoter(options) {
+  Voter.apply(this, arguments);
+  this._step = options.step || 1;
+}
+StepVoter.prototype = Object.create(Voter.prototype);
+
+StepVoter.prototype._increase = function() {
+  this.setVote(this._vote + this._step);
+};
+
+StepVoter.prototype._decrease = function() {
+  this.setVote(this._vote - this._step);
+};
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/solution.view/style.css b/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/solution.view/style.css
new file mode 100755
index 00000000..6b05faec
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/solution.view/style.css
@@ -0,0 +1,10 @@
+
+.voter {
+  font-family: Consolas, "Lucida Console", monospace;
+  font-size: 18px;
+}
+.up, .down {
+  cursor: pointer;
+  color: blue;
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/solution.view/voter.js b/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/solution.view/voter.js
new file mode 100755
index 00000000..0d78d91f
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/solution.view/voter.js
@@ -0,0 +1,36 @@
+
+function Voter(options) {
+  var elem = this._elem = options.elem;
+  this._voteElem = elem.find('.vote');
+  this._vote = 0;
+
+  elem.on('mousedown selectstart', false);
+
+  elem.on('click', '.down', this._onDownClick.bind(this));
+  elem.on('click', '.up', this._onUpClick.bind(this));
+}
+
+Voter.prototype._onDownClick = function() {
+  this._decrease();
+};
+
+Voter.prototype._onUpClick = function() {
+  this._increase();
+};
+
+Voter.prototype._renderVote = function() {
+  this._voteElem.html(this._vote);
+};
+
+Voter.prototype.setVote = function(vote) {
+  this._vote = vote;
+  this._renderVote();
+};
+
+Voter.prototype._increase = function() {
+  this.setVote(this._vote + 1);
+};
+
+Voter.prototype._decrease = function() {
+  this.setVote(this._vote - 1);
+};
diff --git a/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/task.md b/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/task.md
new file mode 100644
index 00000000..b93d6a46
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/7-voter-add-doublevote/task.md
@@ -0,0 +1,28 @@
+# Добавить двойной голос в голосовалку
+
+[importance 5]
+
+Создайте функцию-конструктор `StepVoter`, которая наследует от голосовалки, созданной в задаче [](/task/voter-proto) и добавляет голосовалке опцию `options.step`, которая задаёт "шаг" голоса.
+
+Пример:
+
+```js
+var voter = new StepVoter({
+  elem: $('#voter'),
+  step: 2  // увеличивать/уменьшать сразу на 2 пункта
+});
+```
+
+Результат:
+[iframe border=1 height=60 src="solution"]
+
+В реальном проекте влияние клика на голосовалку может зависеть от полномочий или репутации посетителя.
+
+Сделайте задачу в два этапа:
+<ol>
+<li>Поменять исходный класс `Voter`: вынести логику изменения значений в защищенные методы `_increase/_decrease`, так чтобы их можно было переопределить в наседнике. 
+На этом этапе использование кода не должно измениться, код в `index.html` будет тот же.</li>
+<li>Сделать новый класс `StepVoter`, в котором обработать дополнительную опцию и переопределить `_increase/_decrease` соответственно. Затем использовать его в `index.html`.</li>
+</ol>
+
+В качестве исходного кода используйте решение задачи [](/task/voter-proto).
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/article.md b/2-ui/5-widgets/2-widgets-structure/article.md
new file mode 100644
index 00000000..516b3923
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/article.md
@@ -0,0 +1,287 @@
+# Графические компоненты
+
+Первый и главный шаг в наведении порядка -- это оформить код в объекты, каждый из которых будет решать свою задачу.
+
+Здесь мы сосредоточимся на графических компонентах, которые также называют "виджетами". 
+
+В браузерах есть встроенные виджеты, например `<select>`, `<input>` и другие элементы, о которых мы даже и не думаем, как они работают. Просто работают: принимают значение, вызывают события...
+
+Наша задача -- сделать то же самое на уровне выше. Мы будем создавать объекты, которые генерируют меню, диалог или другие компоненты интерфейса, и дают возможность удобно работать с ними. 
+
+## Виджет Menu
+
+Мы начнём работу с виджета, который предусматривает уже готовую разметку.
+
+То есть, в нужном месте HTML находится DOM-структура для меню -- заголовок и список опций:
+
+```html
+<div class="menu" id="sweets-menu">
+  <span class="title">Сладости</span>
+  <ul>
+    <li>Торт</li>
+    <li>Пончик</li>
+    <li>...</li>
+  </ul>
+</div>
+```
+
+Далее она может дополняться, изменяться, но в начале -- она такая.
+
+Обратим внимание на важные соглашения:
+
+<dl>
+<dt>Вся разметка заключена в корневой элемент `<div class="menu" id="sweeties-menu">`.</dt>
+<dd>Это очень удобно: вынул этот элемент из DOM -- нет меню, вставил в другое место -- переместил меню. Кроме того, можно удобно искать подэлементы.</dd>
+<dt>В разметке -- только классы.</dt>
+<dd>Документ вполне может содержать много различных меню. Они не должны конфликтовать между собой, поэтому для разметки везде используются классы.
+
+Исключение -- корневой элемент. В данном случае мы предполагаем, что данное конкретное "меню сладостей" в документе только одно, поэтому даём ему `id`.</dd>
+</dl>
+
+Для работы с разметкой будем создавать объект `new Menu` и передавать ему корневой элемент. В конструкторе он поставит необходимые обработчики.
+
+```js
+function Menu(options) {
+  var elem = options.elem;
+
+  elem.on('mousedown selectstart', false);
+
+  elem.on('click', '.title', function() {
+    elem.toggleClass('open');
+  });
+}
+
+// использование
+var menu = new Menu({
+  elem: $('#sweets-menu')
+});
+```
+
+Меню:
+[example src="menu-1"]
+
+Это, конечно, только первый шаг, но уже здесь видны некоторые важные соглашения в коде.
+
+<dl>
+<dt>У конструктора только один аргумент -- объект `options`.</dt>
+<dd>Это удобно, так как у графических компонентов обычно много настроек, большинство из которых имеют разумные значения "по умолчанию". Если передавать аргументы через запятую -- их будет слишком много.</dd>
+<dt>Обработчики назначаются через делегирование.</dt>
+<dd>Вместо того, чтобы найти элемент и поставить обработчик на него:
+
+```js
+var titleElem = elem.find('.title');
+
+titleElem.on('click', function() {
+  elem.toggleClass('open');
+}
+```
+
+...Мы пишем так:
+
+```js
+elem.on('click', '.title', function() {
+  elem.toggleClass('open');
+});
+```
+
+Это ускоряет инициализацию, так как не надо искать элементы, и даёт возможность в любой момент менять DOM внутри, в том числе через `innerHTML`, без необходимости переставлять обработчика.
+</dd>
+</dl>
+
+## Публичные методы
+
+Уважающий себя компонент обычно имеет публичные методы, которые позволяют управлять им снаружи.
+
+Рассмотрим повнимательнее этот фрагмент:
+
+```js
+elem.on('click', '.title', function() {
+  elem.toggleClass('open');
+});
+```
+
+Здесь в обработчике события сразу код работы с элементами. Пока одна строка -- всё понятно, но если их будет много, то при чтении понадобится долго и упорно вникать: "А что же, всё-таки, такое делается при клике?"
+
+Для улучшения читаемости выделим обработчик в отдельную функцию `toggle`, которая к тому же станет полезным публичным методом:
+
+```js
+function Menu(options) {
+  var elem = options.elem;
+
+  elem.on('mousedown selectstart', false);
+
+*!*
+  elem.on('click', '.title', onTitleClick);
+
+  function onTitleClick(e) {
+   toggle();
+  }
+
+  function toggle() {
+    elem.toggleClass('open');
+  };
+*/!*
+
+  this.toggle = toggle;
+}
+```
+
+Здесь и сам обработчик события тоже вынесен в отдельную функцию `onTitleClick`.
+
+Наши бонусы:
+<ol>
+<li>Во-первых, стало проще найти и расширить обработчик события в коде -- имя `onTitleClick` найти и запомнить.</li>
+<li>Во-вторых, код стал лучше читаться.</li>
+<li>Во-третьих, `toggle` теперь -- отдельная функция, доступная извне.</li>
+</ol>
+
+Пример использования публичного метода:
+
+```js
+var menu = new Menu(...);
+menu.toggle();
+```
+
+## Генерация DOM-дерева
+
+До этого момента меню "оживляло" уже существующий HTML. Но в более сложном интерфейсе нужно уметь сгенерировать меню "на лету", по данным.
+
+Для этого добавим меню три метода:
+<ul>
+<li>`render()` -- генерирует корневой DOM-элемент и заголовок меню, приватный.</li>
+<li>`renderItems()` -- генерирует DOM для списка опций (`<li>`), приватный.</li>
+<li>`getElem()` -- возвращает DOM-элемент меню, при необходимости запуская генерацию, публичный.</li>
+</ul>
+
+Функция генерации корневого элемента с заголовком `render` отделена от генерации списка `renderItems`. Почему -- будет видно чуть далее.
+
+Новый способ использования меню:
+
+```js
+*!*
+// создать объект меню с данным заголовком и опциями
+*/!*
+var menu = new Menu({ 
+  title: "Сладости",
+  items: [
+    "Торт",
+    "Пончик",
+    "Пирожное",
+    "Шоколадка",
+    "Мороженое"
+  ]
+});
+
+*!*
+// получить DOM-элемент меню
+*/!*
+var elem = menu.getElem();
+
+*!*
+// вставить меню в нужное место страницы
+*/!*
+$('#sweets-menu-holder').append( elem );
+```
+
+Код `Menu` с новыми методами:
+
+```js
+function Menu(options) {
+  var elem;
+
+  function getElem() {
+    if (!elem) render();
+    return elem;
+  }
+
+  function render() {
+    elem = $('<div class="menu"></div>');
+    elem.append( $('<span/>', { class: "title", text: options.title }))
+
+    elem.on('mousedown selectstart', false);
+
+    elem.on('click', '.title', onTitleClick);
+  }
+
+  function renderItems() {
+    var items = options.items || [];
+    var list = $('<ul/>');
+    $.each(items, function(i, item) {
+      list.append( $('<li>').text(item) );
+    })
+    list.appendTo(elem);
+  }
+
+  // ... 
+}
+```
+
+**Важнейший принцип, который здесь использован -- ленивость.**
+
+Мы стараемся откладывать работу до момента, когда она реально нужна. Например, когда `new Menu` создаётся, то переменная `elem` лишь объявляется. DOM-дерево будет сгенерировано только при вызове `getElem()`.
+
+Более того! Пока меню закрыто -- достаточно заголовка. Кроме того, возможно, посетитель вообще никогда не раскроет это меню, так зачем генерировать список раньше времени?
+
+**Фаза инициализации очень чувствительна к производительности, так как при загрузке страницы со сложным интерфейсом  создаётся много всего. А мы хотим, чтобы он начал работать как можно быстрее.**
+
+Если изначально подходить к оптимизации на этой фазе "спустя рукава", то потом поправить может быть сложно. Всё-таки, инициализация -- это фундамент, начало работы виджета. Конечно, лучше без фанатизма. Бывают ситуации, когда по коду гораздо удобнее что-то сделать сразу, поэтому нужен взвешенный подход. Чем крупнее участок работы и чем больше шансов его вообще избежать -- тем больше доводов его отложить.
+
+Ниже -- код меню с методами `open`, `close` и `toggle`, которые подразумевают ленивую генерацию DOM:
+
+```js
+function Menu(options) {
+  var elem;
+
+  function getElem() { /* см выше */ }
+
+  function render() { /* см выше */  }
+
+  function renderItems() { /* см выше */ }
+
+  function onTitleClick(e) { /* см выше */ }
+
+*!*
+  function open() {
+    if (!elem.find('ul').length) {
+      renderItems();
+    }
+    elem.addClass('open');
+  };
+
+  function close() {
+    elem.removeClass('open');
+  };
+
+  function toggle() {
+    if (elem.hasClass('open')) close();
+    else open();
+  };
+*/!*
+
+  this.getElem = getElem;
+  this.toggle = toggle;
+  this.close = close;
+  this.open = open;
+}
+```
+
+Основные изменения -- теперь метод `toggle` не просто меняет класс. Этого недостаточно, ведь, чтобы открыть меню, нужно для начала отрендерить его опции. Поэтому добавлено два метода `open` и `close`, которые также полезны и для внешнего интерфейса.
+
+В действии:
+[example src="menu-3-elem" height="200"]
+
+
+## Итого
+
+Мы начали создавать компонент "с чистого листа", пока без дополнительных библиотек, но они скоро понадобятся.
+
+Основные принципы:
+<ul>
+<li>В конструктор передаётся объект аргументов `options`, а не список аргументов -- для удобства дополнения и расширения виджета.</li>
+<li>Обработчики назначаются через делегирование -- для производительности и упрощения виджета.</li>
+<li>Не экономим буквы ценой понятности -- действие и/или обработчик заслуживают быть отдельными функциями.</li>
+<li>Будем ленивыми -- если существенный участок работы можно отложить до реального задействования виджета -- откладываем его.</li>
+</ul>
+
+Далее мы продолжим работать со разметкой виджета.
+
diff --git a/2-ui/5-widgets/2-widgets-structure/menu-1.view/index.html b/2-ui/5-widgets/2-widgets-structure/menu-1.view/index.html
new file mode 100755
index 00000000..658af91a
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/menu-1.view/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <script src="menu.js"></script>
+</head>
+<body>
+
+<div id="sweets-menu" class="menu">
+  <span class="title">Сладости</span>
+  <ul>
+    <li>Торт</li>
+    <li>Пончик</li>
+    <li>Пирожное</li>
+    <li>Шоколадка</li>
+    <li>Мороженое</li>
+  </ul>
+</div>
+
+<script>
+var menu = new Menu({ 
+  elem: $('#sweets-menu')
+});
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/menu-1.view/menu.js b/2-ui/5-widgets/2-widgets-structure/menu-1.view/menu.js
new file mode 100755
index 00000000..a9bb71ae
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/menu-1.view/menu.js
@@ -0,0 +1,11 @@
+function Menu(options) {
+  var elem = options.elem;
+
+  // отмена выделения при клике на меню
+  elem.on('mousedown selectstart', false);
+
+  elem.on('click', '.title', function() {
+    elem.toggleClass('open');
+  });
+
+}
diff --git a/2-ui/5-widgets/2-widgets-structure/menu-1.view/style.css b/2-ui/5-widgets/2-widgets-structure/menu-1.view/style.css
new file mode 100755
index 00000000..f141382b
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/menu-1.view/style.css
@@ -0,0 +1,20 @@
+
+.menu ul {
+  display: none;
+  margin: 0;
+}
+
+.menu .title {
+  font-weight: bold;
+  cursor: pointer;
+  background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
+  padding-left: 18px;
+}
+
+.menu.open ul {
+  display: block;
+}
+
+.menu.open .title {
+  background-image: url(http://js.cx/clipart/arrow-down.png);
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/menu-3-elem.view/index.html b/2-ui/5-widgets/2-widgets-structure/menu-3-elem.view/index.html
new file mode 100755
index 00000000..95e460f7
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/menu-3-elem.view/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <script src="menu.js"></script>
+</head>
+<body>
+
+<button onclick="menu.toggle()">menu.toggle()</button>
+<button onclick="menu.open()">menu.open()</button>
+<button onclick="menu.close()">menu.close()</button>
+
+<div id="sweets-menu-holder"></div>
+
+
+<script>
+var menu = new Menu({ 
+  title: "Сладости",
+  items: [
+    "Торт",
+    "Пончик",
+    "Пирожное",
+    "Шоколадка",
+    "Мороженое"
+  ]
+});
+
+$('#sweets-menu-holder').append(menu.getElem());
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/menu-3-elem.view/menu.js b/2-ui/5-widgets/2-widgets-structure/menu-3-elem.view/menu.js
new file mode 100755
index 00000000..d1c4851c
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/menu-3-elem.view/menu.js
@@ -0,0 +1,51 @@
+function Menu(options) {
+  var elem;
+
+  function getElem() {
+    if (!elem) render();
+    return elem;
+  }
+
+  function render() {
+    elem = $('<div class="menu"></div>');
+    elem.append( $('<span/>', { class: "title", text: options.title }))
+
+    elem.on('mousedown selectstart', false);
+
+    elem.on('click', '.title', onTitleClick);
+  }
+
+  function renderItems() {
+    var items = options.items || [];
+    var list = $('<ul/>');
+    $.each(items, function(i, item) {
+      list.append( $('<li>').text(item) );
+    })
+    list.appendTo(elem);
+  }
+
+  function onTitleClick(e) {
+    toggle();
+  }
+
+  function open() {
+    if (!elem.find('ul').length) {
+      renderItems();
+    }
+    elem.addClass('open');
+  };
+
+  function close() {
+    elem.removeClass('open');
+  };
+
+  function toggle() {
+    if (elem.hasClass('open')) close();
+    else open();
+  };
+
+  this.getElem = getElem;
+  this.toggle = toggle;
+  this.close = close;
+  this.open = open;
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/2-widgets-structure/menu-3-elem.view/style.css b/2-ui/5-widgets/2-widgets-structure/menu-3-elem.view/style.css
new file mode 100755
index 00000000..83ab6464
--- /dev/null
+++ b/2-ui/5-widgets/2-widgets-structure/menu-3-elem.view/style.css
@@ -0,0 +1,20 @@
+
+.menu ul {
+  display: none;
+  margin: 0;
+}
+
+.menu .title {
+  font-weight: bold;
+  cursor: pointer;
+  background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
+  padding-left: 18px;
+}
+
+.menu.open ul {
+  display: block;
+}
+
+.menu.open .title {
+  background-image: url(http://js.cx/clipart/arrow-down.png);
+}
diff --git a/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/solution.md b/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/solution.md
new file mode 100644
index 00000000..515f6f2b
--- /dev/null
+++ b/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/solution.md
@@ -0,0 +1,33 @@
+Несмотря на то, что меню более-менее прилично отображается, эта вёрстка совершенно не семантична. 
+
+Ошибки:
+<ol>
+<li>Во-первых, меню представляет собой *список элементов*, а для списка существует тег `LI`.
+
+**Семантический подход -- это когда теги используются по назначению.** Для элементов списка `<li>`, для адреса `<address>`, для заголовка таблицы `<th>` и т.п.
+</li>
+<li>Во-вторых, класс `rounded-horizontal-blocks` показывает, что содержимое должно быть *оформлено* как скругленные горизонтальные блоки. Любой класс, отражающий оформление, несемантичен.
+
+**Правильно -- чтобы класс был *смысловым***. Например, `<ul class="menu">` будет говорить о том, что смысл элемента -- "меню".</li>
+<li>В-третьих, элемент `.vertical-splitter`. Здесь класс вполне семантичен, этот элемент списка является вертикальным разделителем, так что здесь всё в порядке. Но на этот раз несемантичность -- в содержимом. 
+
+**Мы, по возможности, стараемся, чтобы HTML содержал именно информацию, а символ вертикальной черты`|` выполняет чисто оформительскую функцию.**
+
+Поэтому от него следует либо вообще избавиться, либо переместить в CSS при помощи `::before`.</li>
+</ol>
+
+И, наконец, это не обязательно и не ошибка, но обычно элементы, которые являются ссылками или кнопками, оформляют в `<a>` или `<button>`. 
+
+Вариант ниже -- семантичен:
+
+```html
+<ul class="menu">
+  <li class="item"><a href="#">Главная</a></li>
+  <li class="vertical-splitter"></li>
+  <li class="item"><a href="#">Товары</a></li>
+  <li class="item"><a href="#">Фотографии</a></li>
+  <li class="item"><a href="#">Контакты</a></li>
+</ul>
+```
+
+[edit src="solution"]Полное меню со стилями[/edit]
\ No newline at end of file
diff --git a/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/solution.view/index.html b/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/solution.view/index.html
new file mode 100755
index 00000000..cf4134d1
--- /dev/null
+++ b/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/solution.view/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .menu {
+      margin: 0;
+      padding: 0;
+    }
+
+    .menu li {
+      list-style: none;
+
+      float: left;
+      padding: 6px;
+      margin: 0 2px;
+    }
+
+    .menu li.item {
+      border: 1px solid gray;
+      border-radius: 10px;
+
+      cursor: pointer;
+      font-size: 90%;
+      background: #FFF5EE;
+    }
+
+    .menu li.vertical-splitter:before {
+      content: "|";
+    }
+
+    .menu .item a {
+      color: black;
+      text-decoration: none;
+    }
+
+    .menu .item a:hover {
+      text-decoration: underline;
+    }
+
+  </style>
+</head>
+<body>
+
+<ul class="menu">
+  <li class="item"><a href="#">Главная</a></li>
+  <li class="vertical-splitter"></li>
+  <li class="item"><a href="#">Товары</a></li>
+  <li class="item"><a href="#">Фотографии</a></li>
+  <li class="item"><a href="#">Контакты</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/source.view/index.html b/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/source.view/index.html
new file mode 100755
index 00000000..61fcadf7
--- /dev/null
+++ b/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/source.view/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .rounded-horizontal-blocks .item {
+      float: left;
+      padding: 6px;
+      margin: 0 2px;
+
+      border: 1px solid gray;
+      border-radius: 10px;
+
+      cursor: pointer;
+      font-size: 90%;
+      background: #FFF5EE;
+    }
+
+    .vertical-splitter {
+      float: left;
+      padding: 6px;
+      margin: 0 2px;
+    }
+
+    .item:hover {
+      text-decoration: underline;
+    }
+  </style>
+</head>
+<body>
+
+<div class="rounded-horizontal-blocks">
+  <div class="item">Главная</div>
+  <div class="vertical-splitter">|</div>
+  <div class="item">Товары</div>
+  <div class="item">Фотографии</div>
+  <div class="item">Контакты</div>
+</div>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/task.md b/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/task.md
new file mode 100644
index 00000000..fb8fec2b
--- /dev/null
+++ b/2-ui/5-widgets/3-widgets-markup/1-semantic-menu/task.md
@@ -0,0 +1,49 @@
+# Семантическое меню
+
+[importance 5]
+
+Посмотрите на вёрстку горизонтального меню.
+
+```html
+<div class="rounded-horizontal-blocks">
+  <div class="item">Главная</div>
+  <div class="vertical-splitter">|</div>
+  <div class="item">Товары</div>
+  <div class="item">Фотографии</div>
+  <div class="item">Контакты</div>
+</div>
+```
+
+
+
+```css
+/*+ hide="Результат со стилями (показать стили)" */
+.rounded-horizontal-blocks .item {
+  float: left;
+  padding: 6px;
+  margin: 0 2px;
+
+  border: 1px solid gray;
+  border-radius: 10px;
+
+  cursor: pointer;
+  font-size: 90%;
+  background: #FFF5EE;
+}
+
+.vertical-splitter {
+  float: left;
+  padding: 6px;
+  margin: 0 2px;
+}
+
+.item:hover {
+  text-decoration: underline;
+}
+```
+
+[iframe src="source" border=1 height=50 edit link]
+
+Что делает эту вёрстку несемантичной? Найдите 3 ошибки.
+
+Как бы вы сверстали меню правильно?
diff --git a/2-ui/5-widgets/3-widgets-markup/2-markup-errors/solution.md b/2-ui/5-widgets/3-widgets-markup/2-markup-errors/solution.md
new file mode 100644
index 00000000..c5e5f147
--- /dev/null
+++ b/2-ui/5-widgets/3-widgets-markup/2-markup-errors/solution.md
@@ -0,0 +1,29 @@
+<ul>
+<li>Самая главная ошибка: классы без префиксов. Это означает, что если внутри содержимого будет что-либо с классом `.headers`, то стили оформят это как заголовок таба. Что, конечно же, будет неверно.</li>
+<li>Класс `selected`, соответствующий "текущей" выбранной вкладке, находится на ссылке:
+
+```html
+ <li><a href="#tabs-3" class="selected">Открытая вкладка</a></li>
+```
+
+...Но состояние "выбранности" относится к заголовку `LI` целиком. Для его нормального отображения класс должен быть на `LI`.</li>
+<li>В использовании `.tabs > div` особо криминала нет, но нужно учесть, что добавить `DIV` с другим функционалом на этот уровень будет затруднительно. Иначе говоря, такая вёрстка усложняет расширение виджета. Лучше использовать для вкладки класс с префиксом `<div class="tabs-tab">` и, соответственно, селектор `.tabs-tab`.</li>
+</ul>
+
+Правильный вариант:
+
+```html
+<div id="tabs" class="tabs">
+  <ul class="*!*tabs-headers*/!*">
+    <li><a href="#tabs-1">Вкладка 1</a></li>
+    <li><a href="#tabs-2">Вкладка 2</a></li>
+    <li *!*class="tabs-selected"*/!*><a href="#tabs-3">Открытая..</a></li>
+  </ul>
+  <div *!*class="tabs-tab"*/!* id="tabs-1">Содержимое...</div>
+  <div *!*class="tabs-tab"*/!* id="tabs-2">Содержимое...</div>
+  <div *!*class="tabs-tab"*/!* id="tabs-3" class="*!*tabs-selected*/!*">
+    Посетитель видит содержимое третьей вкладки.
+  </div>
+</div>
+```
+
diff --git a/2-ui/5-widgets/3-widgets-markup/2-markup-errors/tabs-example.png b/2-ui/5-widgets/3-widgets-markup/2-markup-errors/tabs-example.png
new file mode 100755
index 00000000..23b46e34
Binary files /dev/null and b/2-ui/5-widgets/3-widgets-markup/2-markup-errors/tabs-example.png differ
diff --git a/2-ui/5-widgets/3-widgets-markup/2-markup-errors/task.md b/2-ui/5-widgets/3-widgets-markup/2-markup-errors/task.md
new file mode 100644
index 00000000..3320e106
--- /dev/null
+++ b/2-ui/5-widgets/3-widgets-markup/2-markup-errors/task.md
@@ -0,0 +1,44 @@
+# Ошибки в вёрстке
+
+[importance 5]
+
+Посмотрите на вёрстку "табов" (вкладок). Какие ошибки вы в ней видите? Как правильно?
+
+```html
+<div id="tabs" class="tabs">
+  <ul class="headers">
+    <li><a href="#tabs-1">Вкладка 1</a></li>
+    <li><a href="#tabs-2">Вкладка 2</a></li>
+    <li><a href="#tabs-3" class="selected">Открытая вкладка</a></li>
+  </ul>
+  <div id="tabs-1">Содержимое в первой вкладке.</div>
+  <div id="tabs-2">Содержимое во второй вкладке.</div>
+  <div id="tabs-3" class="selected">
+    Посетитель видит содержимое третьей вкладки.
+  </div>
+</div>
+```
+
+
+
+```css
+.tabs .headers { 
+  /* стиль для заголовков вкладок */ 
+}
+
+.tabs .headers .selected {
+  /* стиль для заголовка выбранной вкладки */
+}
+
+.tabs > div {
+  /* стиль для обычной вкладки */
+}
+
+.tabs > div.selected {
+  /* стиль для выбранной вкладки */
+}
+```
+
+Примерный внешний вид:
+
+<img src="tabs-example.png">
\ No newline at end of file
diff --git a/2-ui/5-widgets/3-widgets-markup/article.md b/2-ui/5-widgets/3-widgets-markup/article.md
new file mode 100644
index 00000000..92d99b90
--- /dev/null
+++ b/2-ui/5-widgets/3-widgets-markup/article.md
@@ -0,0 +1,193 @@
+# Вёрстка графических компонентов
+
+При создании графических компонент ("виджетов") в первую очередь придумывается их HTML/CSS-структура.
+	
+Как будет выглядеть виджет в обычном состоянии? Как будет меняться в процессе взаимодействия с посетителем? 
+	
+Чтобы разработка виджета была удобной, при вёрстке полезно соблюдать несколько простых, но очень важных соглашений.
+	
+[cut]
+
+## Семантическая вёрстка
+
+HTML-разметка и названия CSS-классов должны отражать не оформление, а смысл.
+
+Например, сообщение об ошибке можно сверстать так:
+
+```html
+<div *!*style="color:red; border: 1px solid red"*/!*>
+  Плохая вёрстка сообщения об ошибке: атрибут style!
+</div>
+```
+
+...Или так:
+
+```html
+<div *!*class="red red-border"*/!*>
+  Плохая вёрстка сообщения об ошибке: несемантический class!
+</div>
+```
+
+В обоих случаях вёрстка не является семантической. В первом случае -- стиль, а во втором -- класс содержат информацию об *оформлении*.
+
+**При семантической вёрстке классы описывают смысл ("что это?" -- меню, кнопка...) и состояние (открыто, закрыто, отключено...) компонента.**
+
+Например:
+
+```html
+<div *!*class="error"*/!*>
+  Сообщение об ошибке (error), правильная вёрстка!
+</div>
+```
+
+У предупреждения будет класс `message` и так далее, по смыслу.
+
+```html
+<div *!*class="warning"*/!*>
+  Предупреждение  (warning), правильная вёрстка!
+</div>
+```
+
+**Семантическая верстка упрощает поддержку и развитие CSS, упрощает взаимодействие между членами команды.** 
+
+Такая верстка удобна для организации JS-кода. В коде мы просто ставим нужный класс, остальное делает CSS.
+
+## Состояние виджета -- класс на элементе
+
+Зачастую компонент может иметь несколько состояний. Например, меню может быть открыто или закрыто.
+
+**Состояние должно добавляться CSS-классом не на тот элемент, который нужно скрыть/показать/..., а на тот, к которому оно "по смыслу" относится, обычно -- на корневой элемент.**
+
+Например, меню в закрытом состоянии скрывает свой список элементов. Класс `open` нужно добавлять не к списку опций `<ul>`, который скрывается-показывается, а к *корневому элементу* виджета, поскольку это состояние касается всего меню:
+
+```html
+<div class="menu *!*open*/!*">
+  <span class="title">Заголовок меню</span>
+  <ul>
+    <li>Список элементов</li>
+  </ul>
+</div>
+```
+
+Ещё пример -- индикатор загрузки:
+
+```html
+<div class="loader">
+  <span class="progress">Тут показывается прогресс</span>
+</div>
+```
+
+Состояние индикатора может быть "в процессе" (loading) или "загрузка завершена" (complete). С точки зрения оформления оно может влиять только на показ внутреннего `span`, но ставить его нужно всё равно на внешний элемент, ведь это -- состояние всего компонента:
+
+```html
+<div class="loader *!*loading*/!*">
+  <span class="progress">Тут показывается прогресс</span>
+</div>
+```
+
+Из примеров выше можно подумать, что классы, описывающие состояние, всегда ставятся на корневой элемент. Но это не так.
+
+Возможно и такое, что состояние относится к внутреннему элементу. Например, для дерева состояние открыт/закрыт относится к узлу, соответственно, класс должен быть на узле.
+
+Например:
+
+```html
+<ul class="tree">
+  <li class="*!*closed*/!*">
+    Закрытый узел дерева
+  </li>
+  <li class="*!*open*/!*">
+    Открытый узел дерева
+  </li>
+  ...
+</ul>
+```
+
+На практике, даже если в начале разработки поставить класс не там -- то, при правильном понимании CSS, рано или поздно он всё равно переместится куда надо, поскольку стилизация открытого/закрытого меню касается также и заголовка. 
+
+Но оптимальнее -- сразу ставить его на правильное место.
+
+## Префиксы у классов
+
+Посмотрите, пожалуйста, вёрстку для виджета диалогового окна.
+
+```html
+<div class="dialog">
+  <h2 class="title">Заголовок</h2>
+  <div class="content">
+    Содержимое. Имена классов в этой вёрстке опасны.
+  </div>
+</div>
+
+<style>
+  .dialog .title { стиль заголовка }
+  .dialog .content { стиль содержимого окна }
+</style>
+```
+
+В этой вёрстке есть серьёзная проблема, которая появится, если в содержимом окна будет элемент с классом `.title`:
+
+```html
+<div class="dialog">
+  <h1 class="*!*title*/!*">Заголовок</h1>
+  <div class="content">
+
+*!*
+    <h2 class="*!*title*/!*">Привет!</h2>
+   ... текст диалога ...
+*/!*
+
+  </div>
+</div>
+```
+
+Такое вполне возможно, ведь диалоговое окно может иметь любое содержимое. 
+
+**В этом случае CSS-правило `.dialog .title` будет применено и к `<h2 class="title">` в содержимом с непредсказуемыми последствиями.**
+
+Конечно, можно попытаться бороться с этим. Например, нейтрализовать его действие, добавив дополнительное правило `.dialog .content .title`, но это скорее "заплатка", нежели полноценное решение проблемы.
+
+Ещё один вариант -- жёстко задать вложенность. А именно, использовать класс `.dialog > .title`. Это сработает в данном конкретном примере, но как быть в тех местах, где нужен более глубокий потомок?
+
+**Чтобы избежать возможных проблем, все классы внутри виджета начинают с его имени.**
+
+Подходящий вариант:
+
+```html
+<div class="*!*dialog*/!*">
+  <h1 class="*!*dialog-title*/!*">Заголовок</h1>
+  <div class="*!*dialog-content*/!*">Содержимое</div>
+</div>
+
+<style>
+  .dialog-title { стиль загловка }
+  .dialog-content { стиль содержимого окна }
+</style>
+```
+
+В этом случае внутрь `.dialog-content` можно смело помещать другие компоненты со своими классами `..-title`, `..-content` и т.п.
+
+Кроме всего прочего, обработка такого CSS будет чуть-чуть быстрее ;) Так как один класс вместо каскада.
+
+[smart header="Когда префиксы не нужны?"]
+Префиксы делают названия классов длиннее, поэтому иногда не хочется их ставить.
+
+Без них можно обойтись в тех случаях, когда внутри элемента заведомо не будет произвольного HTML и других компонент. То есть когда конфликты заведомо исключены.
+
+С другой стороны, требования имеют свойство расти. Компоненты зачастую вставляются туда, где их не предполагалось. Ваш виджет, написанный для одной задачи или проекта, может быть потом использован совсем в другом месте, где потребуются вложенные компоненты. И тогда заранее предусмотренные префиксы сослужат хорошую службу.
+[/smart]
+
+## Итого 
+
+<ul>
+<li>Вёрстка должна быть семантической, использовать соответствующие смыслу информации теги и классы.</li>
+<li>Класс, описывающий состояние всего компонента, нужно ставить на его корневом элементе, а не на том, который нужно "украсить" в этом состоянии. Если состояние относится не ко всему компоненту, а к его части -- то на соответствующем "по смыслу" DOM-узле.</li>
+<li>Классы внутри компонента должны начинаться с префикса -- имени компонента.
+
+Это не всегда строго необходимо, но позволяет избежать проблем в случаях, когда компонент может содержать произвольный DOM, как например диалоговое окно с произвольным HTML-текстом.
+
+Использование `.dialog-title` вместо `.dialog .title` гарантирует, что CSS не применится по ошибке к какому-нибудь другому `.title` внутри диалога.
+</li>
+</ul>
+
+
diff --git a/2-ui/5-widgets/4-template-lodash/1-table-template/solution.md b/2-ui/5-widgets/4-template-lodash/1-table-template/solution.md
new file mode 100644
index 00000000..3b01ac9d
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/1-table-template/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Открыть в песочнице[/edit]
diff --git a/2-ui/5-widgets/4-template-lodash/1-table-template/solution.view/index.html b/2-ui/5-widgets/4-template-lodash/1-table-template/solution.view/index.html
new file mode 100755
index 00000000..a200c274
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/1-table-template/solution.view/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+ <html>
+ <head>
+   <meta charset="utf-8">
+   <script src="http://code.jquery.com/jquery.min.js"></script>
+   <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
+   <style>
+     table {
+      border-collapse: collapse;
+     }
+     td {
+      border: 1px solid gray;
+      padding: 2px 5px;
+      text-align: center;
+     }
+    </style>
+ </head>
+ <body>
+
+ <div id="grid-holder"></div>
+
+<script type="text/template" id="grid-template">
+<table>
+  <thead>
+  <tr>
+    <th>Имя</th><th>Возраст</th>
+  </tr>
+  </thead>
+  <tbody>
+  <% for(var i=0; i<list.length; i++) { %>
+    <tr><td><%=list[i].name%></td><td><%=list[i].age%></td></tr>
+  <% } %>
+  </tbody>
+</table>
+</script>
+
+<script>
+
+var users = [
+  {name: "Вася", age: 10},
+  {name: "Петя", age: 15},
+  {name: "Женя", age: 20},
+  {name: "Маша", age: 25},
+  {name: "Даша", age: 30}
+];
+
+$('#grid-holder').html( 
+  _.template( $('#grid-template').html().trim(), {list: users}) 
+);
+
+
+
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/4-template-lodash/1-table-template/source.view/index.html b/2-ui/5-widgets/4-template-lodash/1-table-template/source.view/index.html
new file mode 100755
index 00000000..cbbfaed8
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/1-table-template/source.view/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+ <html>
+ <head>
+   <meta charset="utf-8">
+   <script src="http://code.jquery.com/jquery.min.js"></script>
+   <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
+ </head>
+ <body>
+
+ <div id="grid-holder"></div>
+
+<script type="text/template" id="grid-template">
+  ..ваш шаблон..
+</script>
+
+ <script>
+
+ var users = [
+  {name: "Вася", age: 10},
+  {name: "Петя", age: 15},
+  {name: "Женя", age: 20},
+  {name: "Маша", age: 25},
+  {name: "Даша", age: 30},
+];
+
+// ваш код, чтобы сгенерировать таблицу с юзерами (table/tr/td) по шаблону и данным users
+// выведите таблицу внутри #grid-holder
+
+ </script>
+
+ </body>
+ </html>
diff --git a/2-ui/5-widgets/4-template-lodash/1-table-template/task.md b/2-ui/5-widgets/4-template-lodash/1-table-template/task.md
new file mode 100644
index 00000000..255d6ef4
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/1-table-template/task.md
@@ -0,0 +1,24 @@
+# Шаблон для таблицы с пользователями
+
+[importance 5]
+
+Есть данные:
+
+```js
+var users = [
+  {name: "Вася", age: 10},
+  {name: "Петя", age: 15},
+  {name: "Женя", age: 20},
+  {name: "Маша", age: 25},
+  {name: "Даша", age: 30},
+];
+```
+
+Выведите их в виде таблицы `TABLE/TR/TD` при помощи шаблона.
+
+Результат:
+
+[iframe src="solution"]
+
+[edit src="source" task/]
+
diff --git a/2-ui/5-widgets/4-template-lodash/2-template-display-none/solution.md b/2-ui/5-widgets/4-template-lodash/2-template-display-none/solution.md
new file mode 100644
index 00000000..dc8172d6
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/2-template-display-none/solution.md
@@ -0,0 +1,5 @@
+Основная причина -- шаблон может быть любым, даже некорректным HTML. В `DIV` доставить незакрытым тег -- и могут быть проблемы. А в скрипте может быть почти что угодно, его содержимое полностью игнорируется.
+
+Кроме того, содержимое `DIV` браузер обрабатывает, создаёт DOM-узлы, добавляет их в документ, но там они совсем не нужны, это же шаблон.
+
+Альтернативный вариант -- поместить шаблон в комментарий `<!-- ... -->`, его содержимое можно получить при помощи `node.data`. Но у узла-комментария не может быть `id`, так что это менее удобно.
diff --git a/2-ui/5-widgets/4-template-lodash/2-template-display-none/task.md b/2-ui/5-widgets/4-template-lodash/2-template-display-none/task.md
new file mode 100644
index 00000000..de2b67d3
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/2-template-display-none/task.md
@@ -0,0 +1,7 @@
+# Шаблон в div с display:none?
+
+[importance 5]
+
+Что лучше для размещения шаблона -- <code>&lt;script&gt;</code> с нестандартным `type` или `<div>` с `display:none`?
+
+Почему? Есть ли какие-то другие хорошие варианты?
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.md b/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.md
new file mode 100644
index 00000000..f201b3dd
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.md
@@ -0,0 +1,2 @@
+
+[edit src="solution"]Решение[/edit]
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/index.html b/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/index.html
new file mode 100755
index 00000000..8355c755
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="menu.css">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
+  <script src="menu.js"></script>
+</head>
+<body>
+
+<script type="text/template" id="menu-template">
+<div class="menu">
+  <span class="title"><%-title%></span>
+</div>
+</script>
+
+<script type="text/template" id="menu-list-template">
+<ul>
+  <% for(var key in items) { %>
+  <li><a href="#<%-key%>"><%-items[key]%></li>
+  <% } %>
+</ul>
+</script>
+
+<script>
+var menu = new Menu({ 
+  title: "Сладости",
+  template: _.template($('#menu-template').html()),
+  listTemplate: _.template($('#menu-list-template').html()),
+  items: {
+    "donut": "Пончик", 
+    "cake": "Пирожное", 
+    "chocolate": "Шоколадка"
+  }
+});
+
+$(document.body).append(menu.getElem());
+menu.open();
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.css b/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.css
new file mode 100755
index 00000000..f141382b
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.css
@@ -0,0 +1,20 @@
+
+.menu ul {
+  display: none;
+  margin: 0;
+}
+
+.menu .title {
+  font-weight: bold;
+  cursor: pointer;
+  background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
+  padding-left: 18px;
+}
+
+.menu.open ul {
+  display: block;
+}
+
+.menu.open .title {
+  background-image: url(http://js.cx/clipart/arrow-down.png);
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.js b/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.js
new file mode 100755
index 00000000..b0610ed1
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.js
@@ -0,0 +1,55 @@
+function Menu(options) {
+  var elem;
+
+  function getElem() {
+    if (!elem) render();
+    return elem;
+  }
+
+  function render() {
+    var elemHtml = options.template({title: options.title});
+
+    elem = $(elemHtml);
+
+    elem.on('mousedown selectstart', false);
+
+    elem.on('click', '.title', onTitleClick);
+    elem.on('click', 'a', onItemClick)
+  }
+
+
+  function renderItems() {
+    if (elem.find('ul').length) return;
+    
+    var listHtml = options.listTemplate({items: options.items});
+    elem.append(listHtml);
+  }
+
+  function onItemClick(e) {
+    alert(e.currentTarget.getAttribute('href').slice(1));
+    e.preventDefault();
+  }
+
+  function onTitleClick(e) {
+    toggle();
+  }
+
+  function open() {
+    renderItems();
+    elem.addClass('open');
+  };
+
+  function close() {
+    elem.removeClass('open');
+  };
+
+  function toggle() {
+    if (elem.hasClass('open')) close();
+    else open();
+  };
+
+  this.getElem = getElem;
+  this.toggle = toggle;
+  this.close = close;
+  this.open = open;
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/index.html b/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/index.html
new file mode 100755
index 00000000..872765d1
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="menu.css">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
+  <script src="menu.js"></script>
+</head>
+<body>
+
+<script type="text/template" id="menu-template">
+<div class="menu">
+  <span class="title"><%-title%></span>
+</div>
+</script>
+
+<script type="text/template" id="menu-list-template">
+<ul>
+  <% items.forEach(function(item) { %>
+  <li><%-item%></li>
+  <% }); %>
+</ul>
+</script>
+
+<script>
+var menu = new Menu({ 
+  title: "Сладости",
+  template: _.template($('#menu-template').html()),
+  listTemplate: _.template($('#menu-list-template').html()),
+  items: [
+    "Пончик", // donut
+    "Пирожное", // cake
+    "Шоколадка", // chockolate
+  ]
+});
+
+$(document.body).append(menu.getElem());
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.css b/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.css
new file mode 100755
index 00000000..f141382b
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.css
@@ -0,0 +1,20 @@
+
+.menu ul {
+  display: none;
+  margin: 0;
+}
+
+.menu .title {
+  font-weight: bold;
+  cursor: pointer;
+  background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
+  padding-left: 18px;
+}
+
+.menu.open ul {
+  display: block;
+}
+
+.menu.open .title {
+  background-image: url(http://js.cx/clipart/arrow-down.png);
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.js b/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.js
new file mode 100755
index 00000000..d30b7927
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.js
@@ -0,0 +1,48 @@
+function Menu(options) {
+  var elem;
+
+  function getElem() {
+    if (!elem) render();
+    return elem;
+  }
+
+  function render() {
+    var elemHtml = options.template({title: options.title});
+
+    elem = $(elemHtml);
+
+    elem.on('mousedown selectstart', false);
+
+    elem.on('click', '.title', onTitleClick);
+  }
+
+  function renderItems() {
+    if (elem.find('ul').length) return;
+    
+    var listHtml = options.listTemplate({items: options.items});
+    elem.append(listHtml);
+  }
+
+  function onTitleClick(e) {
+    toggle();
+  }
+
+  function open() {
+    renderItems();
+    elem.addClass('open');
+  };
+
+  function close() {
+    elem.removeClass('open');
+  };
+
+  function toggle() {
+    if (elem.hasClass('open')) close();
+    else open();
+  };
+
+  this.getElem = getElem;
+  this.toggle = toggle;
+  this.close = close;
+  this.open = open;
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/3-menu-template/task.md b/2-ui/5-widgets/4-template-lodash/3-menu-template/task.md
new file mode 100644
index 00000000..6cd45914
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/3-menu-template/task.md
@@ -0,0 +1,28 @@
+# Сделайте меню ссылками
+
+[importance 5]
+
+Возьмите в качестве исходного кода меню на шаблонах и модифицируйте его, чтобы вместо массива `items` оно принимало *объект* `items`, вот так:
+
+```js
+var menu = new Menu({ 
+  title: "Сладости",
+  template: _.template($('#menu-template').html()),
+  listTemplate: _.template($('#menu-list-template').html()),
+*!*
+  items: {
+    "donut": "Пончик", 
+    "cake": "Пирожное", 
+    "chocolate": "Шоколадка"
+  }
+*/!*
+});
+```
+
+Вывод в шаблоне пусть будет не просто `<li>Пончик</li>`, а через ссылку: `<a href="#donut">Пончик</a>`.
+
+При клике на ссылку должно выводиться название из её `href`. Демо:
+
+[iframe src="solution" height="130" border="1"]
+
+[edit src="source"]Исходное меню[/edit]
diff --git a/2-ui/5-widgets/4-template-lodash/article.md b/2-ui/5-widgets/4-template-lodash/article.md
new file mode 100644
index 00000000..73d295a1
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/article.md
@@ -0,0 +1,528 @@
+# Шаблонизатор LoDash
+
+В этой главе мы рассмотрим *шаблонизацию* -- удобный способ генерации HTML-структуры для виджета и её реализацию при помощи библиотеки [LoDash](http://lodash.com).
+[cut]
+
+Все виджеты можно условно разделить на три группы по генерации DOM-структуры:
+<ol>
+<li>**Получают готовый HTML/DOM и "оживляют" его.**
+
+Это типичный случай в сайтах, где JavaScript -- на ролях "второго помощника". Разметка, CSS уже есть, от JavaScript, условно говоря, требуются лишь обработчики, чтобы менюшки заработали.</li>
+<li>**Создают DOM для компоненты самостоятельно.**
+
+В ряде случаев даже на простых страницах нужно генерировать DOM динамически. Например, виджет "подсказка" при наведении на элемент создаёт красивую подсказку и показывает её. Элемент генерируется в JavaScript-коде.
+
+В более сложных интерфейсах компоненты генерируют свой DOM на основе данных, полученных с сервера или из других источников.</li>
+<li>**=1+2: должны уметь как "оживить" уже готовый DOM, так и создать свой.**
+
+Бывает и так, что виджет должен уметь и то и другое. Например, так работает Twitter, который при загрузке сразу показывает текущие сообщения (HTML генерируется на сервере), но может динамически добавлять новые. 
+
+Браузер быстро скачивает HTML и отображает его, посетитель видит текущие сообщения и рад этому. А затем уже подгружается объёмный JavaScript, который умеет загружать сообщения с сервера, создавать их и т.д.
+</li>
+</ol>
+
+С первым типом виджетов -- вопросов нет. Добавляем обработчики, и дело сделано.
+
+Интересно начинается со второго типа, и совсем интересно -- с третьим типом.
+
+## Зачем нужны шаблоны?
+
+Ранее мы уже видели код `Menu`, который сам создаёт свой элемент:
+
+```js
+function Menu(options) {
+  // ... приведены только методы для генерации DOM ...
+
+  function render() {
+    elem = $('<div class="menu"></div>');
+    elem.append( $('<span/>', { class: "title", text: options.title }))
+
+    elem.on('mousedown selectstart', false);
+
+    elem.on('click', '.title', onTitleClick);
+  }
+
+  function renderItems() {
+    var items = options.items || [];
+    var list = $('<ul/>');
+    $.each(items, function(i, item) {
+      list.append( $('<li>').text(item) );
+    })
+    list.appendTo(elem);
+  }
+  
+  // ...
+}
+```
+
+Понятен ли этот код? Очевидно ли, какой HTML он генерирует?
+
+С первого взгляда -- вряд ли. Нужно как минимум внимательно посмотреть и продумать код, чтобы разобраться. Причём это -- с jQuery, если на обычном JavaScript написать, код ещё длиннее и сложнее будет.
+
+...А что, если нужно изменить создаваемый HTML? ...А что, если эта задача досталась не программисту, который написал этот код, а верстальщику, который c HTML/CSS проекта знаком отлично, но этот JS-код видит впервые? Вероятность ошибок при этом зашкаливает за все разумные пределы. 
+
+**К счастью, генерацию HTML можно упростить. Для этого воспользуемся шаблонами.**
+
+## Шаблон
+
+*Шаблон* -- это заготовка, которая путём подстановки значений (текст сообщения, цена и т.п.) превращается в DOM/HTML.
+
+Пример шаблона для меню:
+
+```html
+<div class="menu">
+  <span class="title"><%-title%></span>
+  <ul>
+    <% items.forEach(function(item) { %>
+    <li><%-item%></li>
+    <% }); %>
+  </ul>
+</div>
+```
+
+Как видно, это обычный HTML, со специальными вставками `<% ... %>`. Для работы с таким шаблоном используется специальная функция `_.template`, которая предоставляется фреймворком [LoDash](http://lodash.com/docs#template), её синтаксис мы подробно посмотрим далее.
+
+Взглянем, каким будет вывод меню с использованием шаблона:
+
+```js
+// шаблон должен быть в переменной tmpl
+*!*
+// сгенерировать HTML, используя шаблон tmpl с данными title и items
+*/!*
+var html = _.template(tmpl, { 
+  title: "Сладости",
+  items: [
+    "Торт",
+    "Печенье",
+    "Пирожное"
+  ]
+});
+```
+
+Значение `html` в результате:
+
+```html
+<div class="menu">
+  <span class="title">Сладости</span>
+  <ul>
+    <li>Торт</li>
+    <li>Печенье</li>
+    <li>Сладости</li>
+  </ul>
+</div>
+```
+
+Этот гораздо проще, чем JS-код, не правда ли? Шаблон очень наглядно показывает, что в итоге должно получиться. Шаблоны можно использовать для описания как меню целиком, так и его частей.
+
+## Шаблонизация через _.template [#tmpl]
+
+Далее мы подробнее познакомимся с `_.template` и синтаксисом шаблонов.
+
+[warn header="Holy war detected!"]
+Способов шаблонизации и, в особенности, синтаксисов шаблонов, примерно столько же, сколько способов [поймать льва в пустыне](http://lurkmore.to/%D0%9A%D0%B0%D0%BA_%D0%BF%D0%BE%D0%B9%D0%BC%D0%B0%D1%82%D1%8C_%D0%BB%D1%8C%D0%B2%D0%B0_%D0%B2_%D0%BF%D1%83%D1%81%D1%82%D1%8B%D0%BD%D0%B5). Иначе говоря... много.
+
+Эта глава -- совершенно не место для священных войн на эту тему. Далее будет более полный обзор типов шаблонных систем, применяемых в JavaScript, но начнём мы с `_.template`, поскольку эта "шаблонка" проста, быстра и демонстрирует целый класс шаблонных систем, активно используемых в самых разных JS-проектах.
+[/warn]
+
+### Синтаксис шаблона 
+
+Шаблон представляет собой строку со специальными разделителями, которых всего три:
+
+<dl>
+<dt>`<% code %>` -- код</dt>
+<dd>Код между разделителями `<% ... %>` будет выполнен "как есть"</dd>
+<dt>`<%= expr %>` -- для вставки HTML</dt>
+<dd>Переменная или выражение внутри `<%= ... %>` будет вставлено  "как есть". Например: `<%=title %>` вставит значение переменной `title`, а `<%=2+2%>` вставит `4`.</dd>
+<dt>`<%- expr %>` -- для вставки текста</dt>
+<dd>Переменная или выражение внутри `<%- ... %>` будет вставлено "как текст", то есть с заменой символов `< > & " '` на соответствующие HTML-entities. 
+
+Например, если `expr` содержит текст `<br>`, то при `<%-expr%>` в результат попадёт (в отличие от `<%=expr%>`) не HTML-тег `<br>`, а  текст `&lt;br&gt;`.</dd>
+</dl>
+
+### Функция _.template
+
+Для работы с шаблоном в библиотеке [LoDash](https://github.com/bestiejs/lodash) есть функция `_.template(tmpl, data, options)`.
+
+Её аргументы:
+<dl>
+<dt>`tmpl`</dt>
+<dd>Шаблон.</dd>
+<dt>`data`</dt>
+<dd>Объект с данными.</dd>
+<dt>`options`</dt>
+<dd>Необязательные настройки, например можно поменять разделители.</dd>
+</dl>
+
+Эта функция запускает "сборку" шаблона с объектом `data` и возвращает результат в виде строки.
+
+Вот так:
+
+```js
+//+ run
+// Шаблон*!*
+var tmpl = '<span class="title"><%=title%></span>';
+
+// Данные*!*
+var data = {
+  title: "Заголовок"
+};
+
+// Результат подстановки*!*
+var result = _.template(tmpl, data); 
+alert(result); // <span class="title">Заголовок</span>
+```
+
+Этот пример похож на операцию "поиск-и-замена": функция `_.template` просто заменила `<%=title%>` в шаблоне `tmpl` на значение свойства `data.title`.
+
+Но возможность вставки JS-кода делает шаблоны сильно мощнее.
+
+Например, вот шаблон для генерации списка от `1` до `count`:
+
+```js
+//+ run
+var tmpl = '<ul>\
+  <% for (var i=1; i<=count; i++) { %> \
+    <li><%=i%></li> \
+  <% } %>\
+</ul>';
+alert( _.template(tmpl, {count: 5}) );
+```
+
+Здесь в результат попал сначала текст `<ul>`, потом выполнился код `for`, который последовательно сгенерировал элементы списка, и затем список был закрыт `</ul>`.  
+
+Скоро мы подробнее разберём, за счёт чего работает функция `_.template`.
+
+### Хранение шаблона в документе
+
+Шаблон -- это многострочный HTML-текст. Объявлять его в скрипте, как сделано выше -- неудобно и некрасиво.
+
+**Один из способов объявления шаблона -- в HTML, внутри <code>&lt;script&gt;</code> с нестандартным `type`, например `"text/template"`:**
+
+```html
+<script type="*!*text/template*/!*" id="menu-template">
+<div class="menu">
+  <span class="title"><%-title%></span> 
+</div>
+</script>
+```
+
+Если `type` не знаком браузеру, то содержимое такого скрипта игнорируется, однако оно доступно при помощи `innerHTML`:
+
+```js
+var template = document.getElementById('menu-template').innerHTML;
+```
+
+В данном случае выбран `type="text/template"`, однако подошёл бы и любой другой нестандартный, например `text/html`.
+
+Полный пример HTML с подключением библиотеки и шаблоном:
+
+```html
+<!--+ run height=150 -->
+<!-- библиотека LoDash -->
+<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
+
+<!-- шаблон для списка от 1 до count -->
+<script *!*type="text/template"*/!* id="list-template">
+<ul>
+  <% for (var i=1; i<=count; i++) { %>
+  <li><%=i%></li>
+  <% } %>
+</ul>
+</script>
+
+<script>
+  var tmpl = document.getElementById('list-template').innerHTML;
+
+*!*  
+  // ..а вот и результат
+  var result = _.template(tmpl, {count: 5});
+  document.write( result );
+*/!*
+</script>
+```
+
+### Как работает функция _.template?
+
+Понимание того, как работает `_.template`, очень важно для отладки ошибок в шаблонах. 
+
+Вызов `_.template(tmpl, data)` выполняется в два этапа:
+<ol>
+<li>Разбивает строку `tmpl` по разделителям и, при помощи `new Function` создаёт на её основе JavaScript-функцию.</li>
+<li>Запускает эту функцию с данными `data`, так что она уже генерирует результат.</li>
+</ol>
+
+Эти два процесса можно разделить. Функцию из строки-шаблона можно получить в явном виде вызовом `_.template(tmpl)` (без второго аргумента).
+
+Пример:
+
+```js
+//+ run
+var compiled = _.template("<h1><%=title%></h1>");
+
+alert( compiled( {title: "Заголовок"} ) );  // <h1>Заголовок</h1>
+```
+
+Функция `compiled`, которую вернул вызов `_template` из этого примера, выглядит примерно так:
+
+```js
+function(obj) { 
+  obj || (obj = {}); 
+  var __t, __p = '', __e = _.escape; 
+  with(obj) { \
+    __p += '<h1>' + 
+      ((__t = (title)) == null ? '' : __t) + 
+      '</h1>';
+  }
+  return __p
+}
+```
+
+Она является результатом вызова `new Function("obj", "код")`, где код динамическим образом генерируется внутри `_.template` на основе шаблона:
+<ol>
+<li>Вначале в коде идёт "шапка" -- стандартное начало функции, в котором объявляется переменная `__p`. В неё будет записываться результат.</li>
+<li>Затем добавляется блок `with(obj) { ... }`, внутри которого в `__p` добавляются фрагменты HTML из шаблона, а также переменные из выражений `<%=...%>`. Код из `<%...%>` копируется в функцию "как есть".</li>
+<li>Затем функция завершается, и `return __p` возвращает результат.</li>
+</ol>
+
+При вызове этой функции, например `compiled({title: "Заголовок"})`, она получает объект данных как `obj`, здесь это `{title: "Заголовок"}`, и если внутри `with(obj) { .. }` обратиться к `title`, то по правилам [конструкции with](/with) это свойство будет получено из объекта.
+
+Поэтому в шаблоне мы можем обращаться к свойствам переданного объекта, напрямую.
+
+[smart header="Можно и без `with`"]
+Конструкция `with` является устаревшей, но в данном случае она полезна. 
+
+Так как функция создаётся через `new Function("obj", "код")` то:
+<ul>
+<li>Она работает в глобальной области видимости, не имеет доступа к внешним локальным переменным.</li>
+<li>Внешний `use strict` на такую функцию не влияет, то есть даже в строгом режиме шаблон продолжит работать.</li>
+</ul>
+Если мы, по какой-то причине, не хотим использовать `with` -- это возможно. Для этого достаточно поставить третий параметр -- `options`, указав параметр `variable` (название переменной с данными).
+
+Например:
+
+```js
+//+ run
+alert( _.template("<h1><%=menu.title%></h1>", null, {variable: "menu"}) );
+```
+
+Результат:
+
+```js
+*!*
+function(*!*menu*/!*) {
+*/!*
+  var __t, __p = '', __e = _.escape;
+  __p += '<h1>' +
+    ((__t = (menu.title)) == null ? '' : __t) +
+    '</h1>';
+  return __p
+}
+```
+
+При таком подходе переменная `title` уже не будет искаться в объекте данных автоматически, поэтому нужно будет обращаться к ней как `<%=menu.title%>`.
+[/smart]
+
+[smart header="Кеширование скомпилированных шаблонов"]
+Чтобы не компилировать один и тот же шаблон много раз, результаты обычно кешируют.
+
+Например, глобальная функция `getTemplate("menu-template")` может доставать шаблон из HTML, компилировать, результат запоминать и сразу отдавать при последующих обращениях к тому же шаблону. 
+[/smart]
+
+### Меню на шаблонах
+ 
+Рассмотрим для наглядности полный пример меню на шаблонах.
+
+HTML (шаблоны):
+
+```html
+<script type="text/template" id="menu-template">
+<div class="menu">
+  <span class="title"><%-title%></span>
+</div>
+</script>
+
+<script type="text/template" id="menu-list-template">
+<ul>
+  <% items.forEach(function(item) { %>
+  <li><%-item%></li>
+  <% }); %>
+</ul>
+</script>
+```
+
+JS для создания меню:
+
+```js
+var menu = new Menu({ 
+  title: "Сладости",
+*!*
+  // передаём также шаблоны
+*/!*
+  template: _.template($('#menu-template').html()),
+  listTemplate: _.template($('#menu-list-template').html()),
+  items: [
+    "Торт",
+    "Пончик",
+    "Пирожное",
+    "Шоколадка",
+    "Мороженое"
+  ]
+});
+
+$(document.body).append(menu.getElem());
+```
+
+JS код `Menu`:
+
+```js
+function Menu(options) {
+  var elem;
+
+  function getElem() {
+    if (!elem) render();
+    return elem;
+  }
+
+  function render() {
+    var elemHtml = options.template({title: options.title});
+
+    elem = $(elemHtml);
+
+    elem.on('mousedown selectstart', false);
+
+    elem.on('click', '.title', onTitleClick);
+  }
+
+  function renderItems() {
+    if (elem.find('ul').length) return;
+    
+    var listHtml = options.listTemplate({items: options.items});
+    elem.append(listHtml);
+  }
+
+  function onTitleClick(e) {
+    toggle();
+  }
+
+  function open() {
+    renderItems();
+    elem.addClass('open');
+  };
+
+  function close() {
+    elem.removeClass('open');
+  };
+
+  function toggle() {
+    if (elem.hasClass('open')) close();
+    else open();
+  };
+
+  this.getElem = getElem;
+  this.toggle = toggle;
+}
+```
+
+Результат:
+
+[iframe src="menu-3-template" edit border="1" height="160"]
+
+Здесь два шаблона. Первый, для меню, мы уже разобрали, посмотрим на список опций:
+
+```html
+<ul>
+  <% items.forEach(function(item) { %>
+  <li><%-item%></li>
+  <% }); %>
+</ul>
+```
+
+Если разбить шаблон для списка элементов по разделителям, то он будет таким:
+<ul>
+<li>`<ul>` -- текст</li>
+<li>`<% items.forEach(function(item) { %>` -- код</li>
+<li>`<li>` -- текст</li>
+<li>`<%-item%>` -- вставить значение `item` с экранированием</li>
+<li>`</li>` -- текст</li>
+<li>`<% }); %>` -- код</li>
+<li>`</ul>` -- текст</li>
+</ul>
+
+А вот функция, которую возвратит `_.template` для этого шаблона. Она практически один-в-один содержит эти инструкции:
+
+```js
+function(obj) {
+  obj || (obj = {});
+  var __t, __p = '', __e = _.escape;
+  with(obj) {
+*!*
+    __p += '\n<ul>\n  ';
+    items.forEach(function(item) { 
+      __p += '\n  <li>' + 
+        __e(item) + // <%-item%> экранирование функцией _.escape
+        '</li>\n  ';
+    });
+    __p += '\n</ul>\n';
+*/!*
+  }
+  return __p
+}
+```
+
+Код попал в функцию "как есть", выражение в `<%-...%>` обёрнуто в вызов [_.escape](http://lodash.com/docs#escape).
+
+### Отладка шаблонов
+
+Что, если в шаблоне ошибка? Например, синтаксическая. Конечно, ошибки будут возникать, куда же без них. 
+
+**Шаблон компилируется в функцию, ошибка будет либо при компиляции, либо позже, в процессе её выполнения.**
+
+Более сложным является второй случай, так как отладчик при этом останавливается где-то посередине "страшной" функции, и при этом, особенно если шаблонов много и компилируются они где-то раньше по коду -- бывает совершенно неочевидно, из какого шаблона она получена. 
+
+Попробуйте сами запустить пример с открытыми инструментами разработчика и включённой опцией "остановка при ошибке":
+
+```html
+<!--+ run src="index.html" -->
+```
+
+В шаблоне допущена ошибка, поэтому отладчик остановит выполнение. 
+
+В Chrome картина будет примерно такой:
+
+<img src="template-debugger.png">
+
+**LoDash пытается нам помочь. Он добавляет к шаблонам специальный идентификатор [sourceURL](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl), который служит аналогом "имени файла".  На картинке он отмечен красным.**
+
+По умолчанию `sourceURL` имеет вид `/lodash/template/source[N]`, где `N` -- постоянно увеличивающийся номер шаблона. В данном случае мы можем понять, что эта функция получена при самой первой компиляции.
+
+**Это, конечно, лучше чем ничего, но, как правило, его имеет смысл заменить `sourceURL` на свой.**
+
+Это делается при компиляции дополнительным параметром `sourceURL`:
+
+```js
+...
+var compiled = _.template(tmpl, null, {sourceURL: '/template/menu-template'});
+...
+```
+
+Попробуйте запустить [исправленный пример](/tutorial/widgets/template-error-sourceurl/) и вы увидите в качестве имени файла `/template/menu-template`.
+
+[warn header="Не определена переменная -- ошибка"]
+Кстати говоря, а в чём же здесь ошибка? 
+
+...А в том, что переменная `items` не передана в шаблон. При доступе к неизвестной переменной JavaScript генерирует ошибку.
+
+Самый простой способ это обойти -- обращаться к необязательным переменным через `obj`, например `<%=obj.items%>`. Тогда в случае `undefined` просто ничего не будет выведено. Но в данном случае реакция совершенно адекватна, так как для меню список опций `items` является обязательным.
+[/warn]
+ 
+## Итого
+
+Шаблоны полезны для того, чтобы отделить HTML от кода. Это упрощает разработку и поддержку. 
+
+В этой главе подробно разобрана система шаблонизации из библиотеки [LoDash](https://github.com/bestiejs/lodash). 
+
+Теперь, когда мы с ней знакомы, мы можем как использовать её в своих проектах, так и перейти к более глобальному рассмотрению подходов к шаблонизации.
+
+[libs]
+lodash.js
+[/libs]
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/index.html b/2-ui/5-widgets/4-template-lodash/index.html
new file mode 100755
index 00000000..665d1f04
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
+
+<script type="text/template" id="menu-template">
+<div class="menu">
+  <span class="title"><%-title%>
+  <ul>
+  <% items.forEach(function(item) { %>
+    <li><%-item%></li>
+  <% }); %>
+  </ul>
+</div>
+</script>
+
+<script>
+  var tmpl = document.getElementById('menu-template').innerHTML;
+ 
+  var compiled = _.template(tmpl);
+  var result = compiled({ title: "Заголовок" });
+
+  document.write(result);
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/5-widgets/4-template-lodash/menu-3-template.view/index.html b/2-ui/5-widgets/4-template-lodash/menu-3-template.view/index.html
new file mode 100755
index 00000000..f3f53bda
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/menu-3-template.view/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="menu.css">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
+  <script src="menu.js"></script>
+</head>
+<body>
+
+<script type="text/template" id="menu-template">
+<div class="menu">
+  <span class="title"><%-title%></span>
+</div>
+</script>
+
+<script type="text/template" id="menu-list-template">
+<ul>
+  <% items.forEach(function(item) { %>
+  <li><%-item%></li>
+  <% }); %>
+</ul>
+</script>
+
+<script>
+var menu = new Menu({ 
+  title: "Сладости",
+  template: _.template($('#menu-template').html()),
+  listTemplate: _.template($('#menu-list-template').html()),
+  items: [
+    "Торт",
+    "Пончик",
+    "Пирожное",
+    "Шоколадка",
+    "Мороженое"
+  ]
+});
+
+$(document.body).append(menu.getElem());
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/5-widgets/4-template-lodash/menu-3-template.view/menu.css b/2-ui/5-widgets/4-template-lodash/menu-3-template.view/menu.css
new file mode 100755
index 00000000..f141382b
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/menu-3-template.view/menu.css
@@ -0,0 +1,20 @@
+
+.menu ul {
+  display: none;
+  margin: 0;
+}
+
+.menu .title {
+  font-weight: bold;
+  cursor: pointer;
+  background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
+  padding-left: 18px;
+}
+
+.menu.open ul {
+  display: block;
+}
+
+.menu.open .title {
+  background-image: url(http://js.cx/clipart/arrow-down.png);
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/menu-3-template.view/menu.js b/2-ui/5-widgets/4-template-lodash/menu-3-template.view/menu.js
new file mode 100755
index 00000000..d30b7927
--- /dev/null
+++ b/2-ui/5-widgets/4-template-lodash/menu-3-template.view/menu.js
@@ -0,0 +1,48 @@
+function Menu(options) {
+  var elem;
+
+  function getElem() {
+    if (!elem) render();
+    return elem;
+  }
+
+  function render() {
+    var elemHtml = options.template({title: options.title});
+
+    elem = $(elemHtml);
+
+    elem.on('mousedown selectstart', false);
+
+    elem.on('click', '.title', onTitleClick);
+  }
+
+  function renderItems() {
+    if (elem.find('ul').length) return;
+    
+    var listHtml = options.listTemplate({items: options.items});
+    elem.append(listHtml);
+  }
+
+  function onTitleClick(e) {
+    toggle();
+  }
+
+  function open() {
+    renderItems();
+    elem.addClass('open');
+  };
+
+  function close() {
+    elem.removeClass('open');
+  };
+
+  function toggle() {
+    if (elem.hasClass('open')) close();
+    else open();
+  };
+
+  this.getElem = getElem;
+  this.toggle = toggle;
+  this.close = close;
+  this.open = open;
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/4-template-lodash/template-debugger.png b/2-ui/5-widgets/4-template-lodash/template-debugger.png
new file mode 100755
index 00000000..6a1a849b
Binary files /dev/null and b/2-ui/5-widgets/4-template-lodash/template-debugger.png differ
diff --git a/2-ui/5-widgets/4-template-lodash/template-debugger@2x.png b/2-ui/5-widgets/4-template-lodash/template-debugger@2x.png
new file mode 100755
index 00000000..dc8a3a63
Binary files /dev/null and b/2-ui/5-widgets/4-template-lodash/template-debugger@2x.png differ
diff --git a/2-ui/5-widgets/5-custom-events/1-voter-events/index.html b/2-ui/5-widgets/5-custom-events/1-voter-events/index.html
new file mode 100755
index 00000000..ba822a6a
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/1-voter-events/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <style>
+    .voter {
+      font-family: Consolas, "Lucida Console", monospace;
+      font-size: 18px;
+    }
+    .up, .down {
+      cursor: pointer;
+      color: blue;
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+
+<div id="voter" class="voter">
+  <span class="down">—</span>
+  <span class="vote">0</span>
+  <span class="up">+</span>
+</div>
+
+<script>
+function Voter(options) {
+  var self = this;
+  var elem = options.elem;
+
+  var voteElem = elem.find('.vote');
+
+  // вынесем текущее значение в отдельную переменную
+  var vote = options.value || 0;
+
+  // установить значение без генерации события
+  setVote(vote, true);
+
+  elem.on('click', '.down', onDownClick)
+    .on('click', '.up', onUpClick)
+    .on('mousedown selectstart', false);
+
+  // ----------- методы -------------
+
+  function onDownClick() {
+    // сам обработчик не меняет голос, он вызывает для этого функцию
+    voteDecrease(); 
+  }
+
+  function onUpClick() {
+    voteIncrease();
+  }
+
+  function voteDecrease() {
+    self.setVote( vote - 1 );
+  }
+
+  function voteIncrease() {
+    self.setVote( vote + 1 );
+  }
+
+  // сделали функцию приватной, чтобы её можно было вызывать до объявления
+  // в коде инициализации
+  function setVote(newVote, quiet) {
+    vote = newVote;
+
+    voteElem.html( vote );
+
+    if (!quiet) {
+      $(self).triggerHandler({
+        type: 'change',
+        value: vote
+      });
+    }
+  }
+
+  this.setVote = setVote;
+
+}
+
+var voter = new Voter({
+  elem: $('#voter'),
+  value: 5
+});
+
+$(voter).on('change', function(e) {
+  alert(e.value);
+});
+
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/5-widgets/5-custom-events/1-voter-events/solution.md b/2-ui/5-widgets/5-custom-events/1-voter-events/solution.md
new file mode 100644
index 00000000..76426b34
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/1-voter-events/solution.md
@@ -0,0 +1 @@
+[edit src="solution"/]
diff --git a/2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/index.html b/2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/index.html
new file mode 100755
index 00000000..ba822a6a
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <style>
+    .voter {
+      font-family: Consolas, "Lucida Console", monospace;
+      font-size: 18px;
+    }
+    .up, .down {
+      cursor: pointer;
+      color: blue;
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+
+<div id="voter" class="voter">
+  <span class="down">—</span>
+  <span class="vote">0</span>
+  <span class="up">+</span>
+</div>
+
+<script>
+function Voter(options) {
+  var self = this;
+  var elem = options.elem;
+
+  var voteElem = elem.find('.vote');
+
+  // вынесем текущее значение в отдельную переменную
+  var vote = options.value || 0;
+
+  // установить значение без генерации события
+  setVote(vote, true);
+
+  elem.on('click', '.down', onDownClick)
+    .on('click', '.up', onUpClick)
+    .on('mousedown selectstart', false);
+
+  // ----------- методы -------------
+
+  function onDownClick() {
+    // сам обработчик не меняет голос, он вызывает для этого функцию
+    voteDecrease(); 
+  }
+
+  function onUpClick() {
+    voteIncrease();
+  }
+
+  function voteDecrease() {
+    self.setVote( vote - 1 );
+  }
+
+  function voteIncrease() {
+    self.setVote( vote + 1 );
+  }
+
+  // сделали функцию приватной, чтобы её можно было вызывать до объявления
+  // в коде инициализации
+  function setVote(newVote, quiet) {
+    vote = newVote;
+
+    voteElem.html( vote );
+
+    if (!quiet) {
+      $(self).triggerHandler({
+        type: 'change',
+        value: vote
+      });
+    }
+  }
+
+  this.setVote = setVote;
+
+}
+
+var voter = new Voter({
+  elem: $('#voter'),
+  value: 5
+});
+
+$(voter).on('change', function(e) {
+  alert(e.value);
+});
+
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/5-widgets/5-custom-events/1-voter-events/task.md b/2-ui/5-widgets/5-custom-events/1-voter-events/task.md
new file mode 100644
index 00000000..e55c538b
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/1-voter-events/task.md
@@ -0,0 +1,25 @@
+# Голосовалка "на событиях"
+
+[importance 5]
+
+Добавьте событие в голосовалку, созданную в задаче [](/task/voter), используя jQuery-механизм генерации событий на объекте.
+
+Пусть каждое изменение голоса сопровождается событием `change`:
+
+```js
+var voter = new Voter({
+  elem: $('#voter'),
+  value: 5
+});
+
+$(voter).on('change', function(e) { 
+  alert(e.value);
+});
+```
+
+Все изменения голоса должны производиться централизованно, через метод `setVote`, который и генерирует событие.
+
+Результат использования кода выше (планируемый): 
+[iframe border=1 height=60 src="index.html"].
+
+Исходный документ возьмите из решения задачи [](/task/voter).
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.md b/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.md
new file mode 100644
index 00000000..bee5b33c
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.md
@@ -0,0 +1,8 @@
+[edit src="solution"/]
+
+Обратите внимание:
+<ul>
+<li>`onLiClick` не генерирует событие `select`. Это обработчик, его роль -- разобраться, что происходит, и передать работу нужным методам.</li>
+<li>В событие передаётся массив значений `value`. Код виджета производит всю работу по подготовке этого значения. Было бы совершенно недопустимо, хотя это проще, передавать массив выбранных `LI`. Вообще, элементы -- это внутреннее дело компонента, они могут измениться в любой момент, доступ к ним снаружи крайне нежелателен.</li>
+<li>Код получения значений вынесен в отдельную функцию `getValues` -- для чистоты (каждая функция делает свою работу), и потому что скорее всего она ещё где-то понадобится.</li>
+</ul>
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/index.html b/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/index.html
new file mode 100755
index 00000000..649ca116
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <style>
+    .selected {
+      background: #0f0;
+    }
+    li {
+      cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+
+Клик на элементе выделяет только его.<br>
+Shift+Клик добавляет/убирает элемент из выделенных.<br>
+
+<ul>
+<li>Винни-Пух</li>
+<li>Ослик Иа</li>
+<li>Мудрая Сова</li>
+<li>Кролик. Просто кролик.</li>
+</ul>
+
+<script>
+
+function ListSelect(options) {
+  var elem = options.elem;
+
+  var self = this;
+
+  elem.on('click', 'li', onLiClick);
+  elem.on('selectstart mousedown', false);
+
+  function onLiClick(e) {
+    if (!e.shiftKey) {
+      deselectAllItems();
+    }
+
+    toggleSelectItem( $(this) );
+  }
+
+  function deselectAllItems() {
+    elem.children().removeClass('selected');
+  }    
+
+  function getValue() {
+    var value = [];
+
+    elem.children('.selected').each(function() {
+      value.push( $(this).html() );
+    });
+
+    return value;
+  }
+
+  function toggleSelectItem(li) {
+    li.toggleClass('selected');
+
+    $(self).triggerHandler({
+      type: 'change',
+      value: getValue()
+    })
+  }
+}
+
+var select = new ListSelect({
+  elem: $('ul')
+});
+
+$(select).on('change', function(e) {
+  alert(e.value);
+});
+
+</script>
+</body>
+</html>
diff --git a/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/task.md b/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/task.md
new file mode 100644
index 00000000..9d943338
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/2-selectable-list-evented/task.md
@@ -0,0 +1,12 @@
+# Список с выделением и событием
+
+[importance 5]
+
+Добавьте в решение задачи [](/task/selectable-list-component) событие `select`. 
+
+Оно должно срабатывать при каждом изменении выбора и содержать список выбранных строк.
+
+Во внешнем коде добавьте обработчик к списку, который при изменениях выводит список значений.
+[iframe border="1" src="solution"]
+
+В качестве исходного кода возьмите решение задачи [](/task/selectable-list-component).
diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/solution.md b/2-ui/5-widgets/5-custom-events/3-custom-select/solution.md
new file mode 100644
index 00000000..8aa8cbc3
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/3-custom-select/solution.md
@@ -0,0 +1,9 @@
+В этом решении для закрытия селекта по клику вне него используется отслеживание произвольных кликов вне документа.
+
+Альтернатива -- события `focusin/focusout`, т.е. считаем, что пока фокус в селекте -- он открыт. С одной стороны, это более мощный способ, он позволяет перемещаться по элементам управления при помощи [key Tab] и корректно обрабатывать уход при помощи клавиатуры.
+
+С другой стороны, это решение не универсально: если выводится `alert`, то фокус "прыгает" в него, уходя с элемента, а потом возвращается обратно. При этом JavaScript зарегистрирует уход фокуса `focusout` и возвращение `focusin`, хотя по смыслу фокус с элемента никуда не уходил, просто был `alert`. 
+
+Побочный эффект --  к закрытию и раскрытию (лишнему) элемента управления при таких "ненамеренных" потерях фокуса. Поэтому был выбран `onclick`.
+
+Решение: [edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/customselect.css b/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/customselect.css
new file mode 100755
index 00000000..b8288096
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/customselect.css
@@ -0,0 +1,47 @@
+.customselect {
+    width: 200px;
+    font-size: 14px;
+    display: inline-block;
+}
+
+.customselect-title {
+    height: 17px;
+    border: 1px solid #ADD8E6;
+    background-position: right;
+    background-image: url(http://js.cx/clipart/select-button.gif);
+    background-repeat: no-repeat;
+    padding: 2px;
+    cursor: pointer;
+}
+
+.customselect-options li {
+    padding: 2px;
+    cursor: pointer;
+}
+
+.customselect-options li:nth-child(even) {
+    background-color: #f0f8ff;
+}
+
+.customselect-options li:hover {
+    background-color: #7fffd4;
+}
+
+.customselect-options {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+    display: none;
+
+    position: absolute;
+    z-index: 1000;
+    background: white;
+    width: 200px;
+    border-bottom: 1px solid #add8e6;
+    border-left: 1px solid #add8e6;
+    border-right: 1px solid #add8e6;
+    box-sizing: border-box;
+}
+.customselect-open .customselect-options {
+    display: block;
+}
diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/customselect.js b/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/customselect.js
new file mode 100755
index 00000000..3d75bb21
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/customselect.js
@@ -0,0 +1,61 @@
+function CustomSelect(options) {
+  var self = this;
+
+  var elem = options.elem;
+
+  elem.on('click', '.customselect-title', onTitleClick);
+  elem.on('click', 'li', onOptionClick);
+
+  var isOpen = false;
+
+  // ------ обработчики ------
+
+  function onTitleClick(event) {
+    toggle();
+  }
+
+  // закрыть селект, если клик вне его
+  function onDocumentClick(event) {
+    var isInside = $(event.target).closest(elem).length;
+    if (!isInside) close();
+  }
+
+  function onOptionClick(event) {
+    close();
+
+    var name = $(event.target).html(); 
+    var value = $(event.target).data('value'); 
+        
+    setValue(name, value);
+  }
+
+  // ------------------------
+
+  function setValue(name, value) {
+    elem.find('.customselect-title').html(name);
+
+    $(self).triggerHandler({
+      type: 'select',
+      name: name,
+      value: value
+    });
+  }
+
+  function toggle() {
+    if (isOpen) close()
+    else open();
+  }
+
+  function open() {
+    elem.addClass('customselect-open');
+    $(document).on('click', onDocumentClick);
+    isOpen = true;
+  }
+
+  function close() {
+    elem.removeClass('customselect-open');
+    $(document).off('click', onDocumentClick);
+    isOpen = false;
+  }
+
+}
diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/index.html b/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/index.html
new file mode 100755
index 00000000..83e3c656
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Селект</title>
+  <script src='http://code.jquery.com/jquery.min.js'></script>
+  <link rel="stylesheet" href="customselect.css"/>
+  <script src="customselect.js"></script>
+</head>
+<body>
+
+<div>Последний результат: <span id="result">...</span></div>
+
+<div id="animal-select" class="customselect">
+  <div class="customselect-title">Выберите</div>
+  <ol class="customselect-options">
+    <!-- значение хранится в свойстве data-value -->
+    <li data-value="bird">Птицы</li>
+    <li data-value="fish">Рыбы</li>
+    <li data-value="animal">Звери</li>
+    <li data-value="dino">Динозавры</li>
+    <li data-value="simplest">Одноклеточные</li>
+  </ol>
+</div>
+
+<div id="food-select" class="customselect">
+  <div class="customselect-title">Выберите</div>
+  <ol class="customselect-options">
+    <li data-value="carnivore">Плотоядные</li>
+    <li data-value="herbivore">Травоядные</li>
+    <li data-value="omnivore">Всеядные</li>
+  </ol>
+</div>
+
+
+<script>
+  var animalSelect = new CustomSelect({
+    elem: $('#animal-select')
+  });
+
+  var foodSelect = new CustomSelect({
+    elem: $('#food-select')
+  });
+
+  $([animalSelect, foodSelect]).on('select', function (event) {
+    $('#result').html(event.value)
+  });
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/index.html b/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/index.html
new file mode 100755
index 00000000..0003fc5f
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/3-custom-select/source.view/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Селект</title>
+  <script src='http://code.jquery.com/jquery.min.js'></script>
+  <link rel="stylesheet" href="customselect.css"/>
+  <script src="customselect.js"></script>
+</head>
+<body>
+
+<div>Последний результат: <span id="result">...</span></div>
+
+<img src="http://js.cx/clipart/select-button.gif">
+
+<div id="animal-select" class="customselect">
+  <div class="customselect-title">Выберите</div>
+  <ol class="customselect-options">
+    <!-- значение хранится в свойстве data-value -->
+    <li data-value="bird">Птицы</li>
+    <li data-value="fish">Рыбы</li>
+    <li data-value="animal">Звери</li>
+    <li data-value="dino">Динозавры</li>
+    <li data-value="simplest">Одноклеточные</li>
+  </ol>
+</div>
+
+<div id="food-select" class="customselect">
+  <div class="customselect-title">Выберите</div>
+  <ol class="customselect-options">
+    <li data-value="carnivore">Плотоядные</li>
+    <li data-value="herbivore">Травоядные</li>
+    <li data-value="omnivore">Всеядные</li>
+  </ol>
+</div>
+
+
+<script>
+  // создаём два селекта
+  var animalSelect = new CustomSelect({
+    elem: $('#animal-select')
+  });
+
+  var foodSelect = new CustomSelect({
+    elem: $('#food-select')
+  });
+
+  // выводим выбранное значение
+  $([animalSelect, foodSelect]).on('select', function (event) {
+    $('#result').html(event.value)
+  });
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/5-custom-events/3-custom-select/task.md b/2-ui/5-widgets/5-custom-events/3-custom-select/task.md
new file mode 100644
index 00000000..141c64de
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/3-custom-select/task.md
@@ -0,0 +1,20 @@
+# Свой селект
+
+[importance 5]
+
+Напишите свой, самостоятельно оформленный, селект.
+
+Требования:
+<ul>
+<li>Открытие и закрытие по клику на заголовок.</li>
+<li>Закрытие селекта происходит при выборе или клике на любое другое место документа, в том числе на другой аналогичный селект.</li>
+<li>Событие `"select"` при выборе опции.</li>
+<li>Значение опции хранится в атрибуте `data-value` (HTML-структура есть в исходном документе).
+</ul>
+Например:
+
+[iframe src="solution" border="1" height="200" newwin]
+
+В примере выше два селекта, чтобы можно было проверить процесс открытия-закрытия.
+
+[edit src="source" task/]
diff --git a/2-ui/5-widgets/5-custom-events/article.md b/2-ui/5-widgets/5-custom-events/article.md
new file mode 100644
index 00000000..01889231
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/article.md
@@ -0,0 +1,354 @@
+# Коллбэки и события на компонентах
+
+Компоненты, хоть и каждый сам по себе, обычно интегрированы друг с другом. 
+
+Есть несколько способов, при помощи которых компоненты сообщают друг другу о важных событиях, которые в них произошли.
+
+[cut]
+
+## Коллбэки
+
+Коллбэк (от англ. callback) -- это функция, которую мы передаём куда-либо и ожидаем, что она будет вызвана при наступлении события.
+
+Например, мы можем добавить в `options` для `Menu` новый параметр -- функцию `onselect`, которая будет вызываться при выборе пункта меню:
+
+```js
+var menu = new Menu({ 
+  title: "Сладости",
+  template: _.template($('#menu-template').html()),
+  listTemplate: _.template($('#menu-list-template').html()),
+  items: {
+    "donut": "Пончик", 
+    "cake": "Пирожное", 
+    "chocolate": "Шоколадка"
+  },
+*!*
+  onselect: showSelected
+*/!*
+});
+
+*!*
+function showSelected(href) {
+  alert(href);
+}
+*/!*
+```
+
+В коде меню нужно будет вызывать её, как-то так:
+
+```js
+...
+  function onItemClick(e) {
+    e.preventDefault();
+*!*
+    var onselect = options.onselect;
+    if (onselect) {
+      onselect(e.currentTarget.getAttribute('href').slice(1));
+    }
+*/!*
+  }
+...
+```
+
+Демо:
+
+[example src="menu-callback" height="180"]
+
+## Свои события 
+
+Оповещение через коллбэки -- это примерный аналог назначения обработчика через `onсвойство` для DOM-элементов. 
+
+Да, он работает, но чтобы можно было назначать сколько угодно обработчиков в любой момент, нужна полноценная поддержка событий, то есть аналог `addEventListener`.
+
+Поддержка событий для компонентов будет выглядеть так:
+
+```js
+var menu = new Menu(...);
+
+// любой код может подписаться на событие "select"
+menu.on("select", function(item) {
+  // при выборе пункта меню сработает этот обработчик
+  alert("Выбран элемент " + item);
+});
+```
+
+Код, который заинтересован в том, чтобы узнавать, что происходит с меню, подписывается на нужные события вызовом `menu.on(имя события, обработчик)`.
+
+Далее `Menu` при наступлении события вызывает обработчик методом `trigger`, при необходимости передавая ему важные данные в качестве аргументов, вот так:
+
+```js
+function Menu(options) {
+  var self = this;
+
+*!*
+  // ... при клике на item - сгенерировать событие (trigger)
+  function onItemClick(e) {
+    e.preventDefault();
+    
+    self.trigger("select", e.currentTarget.getAttribute('href').slice(1));
+  }
+*/!*    
+
+}
+```
+
+Обратим внимание -- события будут генерироваться не на элементе `<div class="menu">`, а на объекте `new Menu`. Сейчас мы разберём методы, которые для этого нужны.
+
+## Методы on, off и trigger
+
+Для поддержки событий в любой объект достаточно добавить три метода: `on`, `off` и `trigger`, которые перечислены ниже в свойствах `EventMixin`:
+
+```js
+var EventMixin = {
+
+  /**
+   * Подписка на событие
+   * Использование:
+   *  menu.on('select', function(item) { ... }
+  */
+  on: function(eventName, handler) {
+    if (!this._eventHandlers) this._eventHandlers = {};
+    if (!this._eventHandlers[eventName]) {
+      this._eventHandlers[eventName] = [];
+    }
+    this._eventHandlers[eventName].push(handler);
+  },
+
+  /**
+   * Прекращение подписки
+   *  menu.off('select',  handler)
+   */
+  off: function(eventName, handler) {
+    var handlers = this._eventHandlers && this._eventHandlers[eventName];
+    if (!handlers) return;
+    for(var i=0; i<handlers.length; i++) {
+      if (handlers[i] == handler) {
+        handlers.splice(i--, 1);
+      }
+    }
+  },
+
+  /**
+   * Генерация события с передачей данных
+   *  this.trigger('select', item);
+   */
+  trigger: function(eventName) {
+
+    if (!this._eventHandlers || !this._eventHandlers[eventName]) {
+      return; // обработчиков для события нет
+    }
+
+    // вызвать обработчики 
+    var handlers = this._eventHandlers[eventName];
+    for (var i = 0; i < handlers.length; i++) {
+      handlers[i].apply(this, [].slice.call(arguments, 1));
+    }
+
+  }
+};
+```
+
+Объект `EventMixin` -- всего лишь хранилище для функций, которые нужно скопировать в тот объект, которому нужны события.
+
+Пример использования:
+
+```js
+//+ run
+var obj = {}; // произвольный объект
+
+*!*
+// скопируем в него методы для работы с событиями
+*/!*
+for(var m in EventMixin) obj[m] = EventMixin[m];
+
+*!*
+// поставить обработчик на событие hello
+*/!*
+obj.on("hello", function(a, b, c) {
+  alert(a + ", " + b + ", " + c);
+});
+
+// и ещё один обработчик
+obj.on("hello", function() {
+  alert("привет!");
+});
+
+*!*
+// генерация события с дополнительными данными
+// обычно происходит внутри методов объекта
+*/!*
+obj.trigger("hello", "data1", "data2", "data3");
+```
+
+При запуске этого кода будет поставлено два обработчика на событие `hello`, которые (по очереди) будут вызваны при `obj.trigger(...)`.
+
+[smart header="Внутренний алгоритм `on/off/trigger`"]
+Большинство фреймворков, предоставляющих события на произвольных объектах, работают примерно так же, как `on/off/trigger` в примере выше.
+
+**Все обработчики событий `obj` хранятся в "скрытом" свойстве самого `obj`.**
+<ul>
+<li>Вызов `obj.on(event, handler)` создаёт свойство `obj._eventHandlers`, если его ещё нет, и сохраняет в нём обработчик: `obj._eventHandlers[event].push(handler)`.</li>
+<li>Далее вызов `obj.trigger(event, ...)` получает обработчики из `obj._eventHandlers[event]` и выполняет их один за другим.</li>
+<li>Вызов `obj.off(event, handler)` удаляет обработчик из `obj._eventHandlers`.</li>
+</ul>
+[/smart]
+
+## Меню с событиями
+
+Для перехода на события в меню, нужно:
+<ol>
+<li>Добавить методы из `EventMixin` в объект меню. Их можно скопировать либо в объект, либо в прототип.</li>
+<li>Вместо вызова коллбэка `onselect` -- генерируем событие вызовом `trigger('select', значение)`.</li>
+</ol>
+
+Код:
+
+```js
+function Menu(options) {
+  var elem;
+  var self = this;
+
+*!*
+  for(var method in EventMixin) {
+    this[method] = EventMixin[method]
+  }
+*/!*
+
+  function onItemClick(e) {
+    e.preventDefault();
+
+*!*
+    self.trigger("select", currentTarget.getAttribute('href').slice(1));
+*/!*
+  }
+  
+  // другие методы без изменений
+}
+```
+
+Во внешнем коде:
+
+```js
+var menu = new Menu(...)
+menu.on('select', function(value) { 
+  alert('выбрано значение ' + value);
+});
+```
+
+Результат:
+[example src="menu-event"]
+
+## События при помощи jQuery
+
+Фреймворк jQuery предоставляет свои средства для генерации произвольных событий.
+
+Метод [trigger](http://api.jquery.com/trigger/) позволяет генерировать любое событие на элементе и он же -- работает на любом объекте, "обёрнутом" в jQuery: `$(...)`.
+
+Синтаксис для генерации события на элементе:
+
+```js
+elem.trigger(event);
+```
+
+Объект `event` должен содержать свойство `type` -- тип события (произвольный) и любые другие свойства, которые будут переданы обработчикам.
+
+Например:
+
+```js
+$('body').on('hello', function(e) { 
+  alert(e.user) 
+});
+
+*!*
+$('body').trigger({ 
+  type: 'hello', // тип события
+  user: 'Вася', // любые данные
+});
+*/!*
+
+$('body').off('hello');
+```
+
+Есть также альтернативный синтаксис:
+
+```js
+elem.trigger(eventType, args);
+```
+
+<ul>
+<li>`eventType` -- тип события (строка)</li>
+<li>`args` -- массив аргументов, которые будут переданы обработчику.</li>
+</ul>
+
+Пример использования:
+
+```js
+$('body').on('hello', function(e, user) { 
+  alert(user) 
+});
+
+*!*
+// аргументы - в виде массива 
+$('body').trigger("hello", ["Вася"]);
+*/!*
+
+$('body').off('hello');
+```
+
+Как правильно, предпочтителен первый синтаксис: `elem.trigger(event)`, поскольку он гораздо гибче, можно указывать любые свойства в любом порядке.
+
+События, сгенерированные таким образом на элементах, всплывают и обрабатываются jQuery наравне с обычными браузерными событиями.
+
+**Для объекта всё точно так же, как и для элемента:**
+
+```js
+//+ run
+var obj = {}; // произвольный объект 
+
+$(obj).on('hello', function(e) { 
+  alert(e.user) 
+});
+
+$(obj).trigger({
+  type: 'hello',
+  user: 'Вася'
+});
+```
+
+Конечно, события на объектах не всплывают, всё-таки "всплытие" -- это привилегия DOM.
+
+Внутри jQuery делает в точности то же самое, что `EventMixin` -- вызов `on(...)` добавляет обработчик добавляются в "скрытое" свойство объекта, из которого они потом читаются и выполняются вызовом `trigger(...)`.
+
+Это свойство можно легко увидеть:
+
+```js
+//+ run
+var obj = {};
+
+$(obj).on('hello', function(e) { /* ... */ });
+
+// свойство называется примерно так: jQuery19105266267273109406
+// оно имеет такое псевдослучайное название, 
+// чтобы не перезаписать "настоящие", важные свойства объекта
+for(var prop in obj) alert(prop);
+```
+
+Технически, можно генерировать событие и на корневом элементе меню `<div class="menu">` и на JavaScript-объекте `new Menu` (`this` внутри конструктора). Однако, обычно используют именно объект: считается, что DOM компонента -- это его сугубо личное дело. Он может в любой момент поменяться и быть пересоздан "с нуля", если потребуется. Залезать в него снаружи и ставить какие-то обработчики никто не имеет права.
+
+
+## Итого
+
+Для того, чтобы внешний код мог узнавать о важных событиях, произошедших внутри компоненты, используются:
+<ul>
+<li>Коллбэки -- функции, которые передаются "снаружи" при создании компонента, и которые он обязуется вызвать при наступлении событий.</li>
+<li>События -- компонент генерирует их при помощи вызова `trigger` (`EventMixin`, jQuery или другой фреймворк), а внешний код ставит обработчики при помощи `on`.</li>
+</ul>
+
+Можно использовать и то и другое одновременно. Например, виджеты фреймворка jQuery UI позволяют передать при создании коллбэк `onselect`, и вместе с тем генерируют событие. 
+
+Далее, для простоты, в примерах и задачах мы будем использовать для событий методы `on/off/trigger` из jQuery. Если jQuery не нужен -- всегда можно использовать `EventMixin` или какой-либо другой фреймворк.
+
+
+[libs]
+event-mixin.js
+[/libs]
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/menu-callback.view/index.html b/2-ui/5-widgets/5-custom-events/menu-callback.view/index.html
new file mode 100755
index 00000000..73027f99
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/menu-callback.view/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
+  <script src="menu.js"></script>
+</head>
+<body>
+
+<script type="text/template" id="menu-template">
+<div class="menu">
+  <span class="title"><%-title%></span>
+</div>
+</script>
+
+<script type="text/template" id="menu-list-template">
+<ul>
+  <% for(var key in items) { %>
+  <li><a href="#<%-key%>"><%-items[key]%></li>
+  <% } %>
+</ul>
+</script>
+
+<script>
+var menu = new Menu({ 
+  title: "Сладости",
+  template: _.template($('#menu-template').html()),
+  listTemplate: _.template($('#menu-list-template').html()),
+  items: {
+    "donut": "Пончик", 
+    "cake": "Пирожное", 
+    "chocolate": "Шоколадка"
+  },
+  onselect: showSelected
+});
+
+function showSelected(href) {
+  alert(href);
+}
+
+$(document.body).append(menu.getElem());
+menu.open();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/menu-callback.view/menu.js b/2-ui/5-widgets/5-custom-events/menu-callback.view/menu.js
new file mode 100755
index 00000000..323c4906
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/menu-callback.view/menu.js
@@ -0,0 +1,59 @@
+function Menu(options) {
+  var elem;
+
+  function getElem() {
+    if (!elem) render();
+    return elem;
+  }
+
+  function render() {
+    var elemHtml = options.template({title: options.title});
+
+    elem = $(elemHtml);
+
+    elem.on('mousedown selectstart', false);
+
+    elem.on('click', '.title', onTitleClick);
+    elem.on('click', 'a', onItemClick)
+  }
+
+
+  function renderItems() {
+    if (elem.find('ul').length) return;
+    
+    var listHtml = options.listTemplate({items: options.items});
+    elem.append(listHtml);
+  }
+
+  function onItemClick(e) {
+    e.preventDefault();
+
+    var onselect = options.onselect;
+    if (onselect) {
+      onselect(e.currentTarget.getAttribute('href').slice(1));
+    }
+  }
+
+  function onTitleClick(e) {
+    toggle();
+  }
+
+  function open() {
+    renderItems();
+    elem.addClass('open');
+  };
+
+  function close() {
+    elem.removeClass('open');
+  };
+
+  function toggle() {
+    if (elem.hasClass('open')) close();
+    else open();
+  };
+
+  this.getElem = getElem;
+  this.toggle = toggle;
+  this.close = close;
+  this.open = open;
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/menu-callback.view/style.css b/2-ui/5-widgets/5-custom-events/menu-callback.view/style.css
new file mode 100755
index 00000000..f141382b
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/menu-callback.view/style.css
@@ -0,0 +1,20 @@
+
+.menu ul {
+  display: none;
+  margin: 0;
+}
+
+.menu .title {
+  font-weight: bold;
+  cursor: pointer;
+  background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
+  padding-left: 18px;
+}
+
+.menu.open ul {
+  display: block;
+}
+
+.menu.open .title {
+  background-image: url(http://js.cx/clipart/arrow-down.png);
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/menu-event.view/eventMixin.js b/2-ui/5-widgets/5-custom-events/menu-event.view/eventMixin.js
new file mode 100755
index 00000000..d344baee
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/menu-event.view/eventMixin.js
@@ -0,0 +1,48 @@
+var EventMixin = {
+
+  /**
+   * Подписка на событие
+   * Использование:
+   *  menu.on('select', function(item) { ... }
+  */
+  on: function(eventName, handler) {
+    if (!this._eventHandlers) this._eventHandlers = {};
+    if (!this._eventHandlers[eventName]) {
+      this._eventHandlers[eventName] = [];
+    }
+    this._eventHandlers[eventName].push(handler);
+  },
+
+  /**
+   * Прекращение подписки
+   *  menu.off('select',  handler)
+   */
+  off: function(eventName, handler) {
+    var handlers = this._eventHandlers && this._eventHandlers[eventName];
+    if (!handlers) return;
+    for(var i=0; i<handlers.length; i++) {
+      if (handlers[i] == handler) {
+        handlers.splice(i--, 1);
+      }
+    }
+  },
+
+  /**
+   * Генерация события с передачей данных
+   *  this.trigger('select', item);
+   */
+  trigger: function(eventName) {
+
+    if (!this._eventHandlers || !this._eventHandlers[eventName]) {
+      return; // обработчиков для события нет
+    }
+
+    // вызвать обработчики 
+    var handlers = this._eventHandlers[eventName];
+    for (var i = 0; i < handlers.length; i++) {
+      handlers[i].apply(this, [].slice.call(arguments, 1));
+    }
+
+  }
+};
+
diff --git a/2-ui/5-widgets/5-custom-events/menu-event.view/index.html b/2-ui/5-widgets/5-custom-events/menu-event.view/index.html
new file mode 100755
index 00000000..90b2221d
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/menu-event.view/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
+  <script src="eventMixin.js"></script>
+  <script src="menu.js"></script>
+</head>
+<body>
+
+<script type="text/template" id="menu-template">
+<div class="menu">
+  <span class="title"><%-title%></span>
+</div>
+</script>
+
+<script type="text/template" id="menu-list-template">
+<ul>
+  <% for(var key in items) { %>
+  <li><a href="#<%-key%>"><%-items[key]%></li>
+  <% } %>
+</ul>
+</script>
+
+<script>
+var menu = new Menu({ 
+  title: "Сладости",
+  template: _.template($('#menu-template').html()),
+  listTemplate: _.template($('#menu-list-template').html()),
+  items: {
+    "donut": "Пончик", 
+    "cake": "Пирожное", 
+    "chocolate": "Шоколадка"
+  }
+});
+
+$(document.body).append(menu.getElem());
+menu.open();
+
+menu.on('select', function(value) {
+  alert('выбрано значение ' + value);
+});
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/2-ui/5-widgets/5-custom-events/menu-event.view/menu.js b/2-ui/5-widgets/5-custom-events/menu-event.view/menu.js
new file mode 100755
index 00000000..e1bd46d0
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/menu-event.view/menu.js
@@ -0,0 +1,61 @@
+function Menu(options) {
+  var elem;
+  var self = this;
+
+  for(var method in EventMixin) {
+    this[method] = EventMixin[method]
+  }
+
+  function getElem() {
+    if (!elem) render();
+    return elem;
+  }
+
+  function render() {
+    var elemHtml = options.template({title: options.title});
+
+    elem = $(elemHtml);
+
+    elem.on('mousedown selectstart', false);
+
+    elem.on('click', '.title', onTitleClick);
+    elem.on('click', 'a', onItemClick)
+  }
+
+
+  function renderItems() {
+    if (elem.find('ul').length) return;
+    
+    var listHtml = options.listTemplate({items: options.items});
+    elem.append(listHtml);
+  }
+
+  function onItemClick(e) {
+    e.preventDefault();
+
+    self.trigger('select', e.currentTarget.getAttribute('href').slice(1));
+  }
+
+  function onTitleClick(e) {
+    toggle();
+  }
+
+  function open() {
+    renderItems();
+    elem.addClass('open');
+  };
+
+  function close() {
+    elem.removeClass('open');
+  };
+
+  function toggle() {
+    if (elem.hasClass('open')) close();
+    else open();
+  };
+
+  this.getElem = getElem;
+  this.toggle = toggle;
+  this.close = close;
+  this.open = open;
+}
diff --git a/2-ui/5-widgets/5-custom-events/menu-event.view/style.css b/2-ui/5-widgets/5-custom-events/menu-event.view/style.css
new file mode 100755
index 00000000..f141382b
--- /dev/null
+++ b/2-ui/5-widgets/5-custom-events/menu-event.view/style.css
@@ -0,0 +1,20 @@
+
+.menu ul {
+  display: none;
+  margin: 0;
+}
+
+.menu .title {
+  font-weight: bold;
+  cursor: pointer;
+  background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
+  padding-left: 18px;
+}
+
+.menu.open ul {
+  display: block;
+}
+
+.menu.open .title {
+  background-image: url(http://js.cx/clipart/arrow-down.png);
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/solution.md b/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/solution.md
new file mode 100644
index 00000000..983f9b6c
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/solution.md
@@ -0,0 +1,83 @@
+# Подсказки
+
+Функция показа подсказки должна при первом показе сгенерировать элемент с подсказкой, а затем -- показать в нужном месте страницы. 
+
+Обсудим, как это сделать.
+
+Для генерации подсказки добавим вспомогательную функцию `getTooltipElem()`. Она будет возвращать существующий элемент, если он есть, а если нет -- генерировать новый.
+
+```js
+function getTooltipElem() {
+  if (!tooltipElem) {
+    tooltipElem = $('<div/>', {
+      "class" : 'tooltip',
+      html: html
+    });
+  }
+  return tooltipElem;
+}
+```
+
+**Основная настройка вида подсказки -- в CSS-классе `tooltip`.**
+
+Например:
+
+```css
+.tooltip {
+  position:absolute;
+  z-index:100; /* подсказка должна перекрывать другие элементы */
+  padding: 10px 20px;
+
+  /* красивости... */
+  border: 1px solid #b3c9ce;
+  border-radius: 4px;
+  text-align: center;
+  font: italic 14px/1.3 arial, sans-serif; 
+  color: #333;
+  background: #fff;
+  box-shadow: 3px 3px 3px rgba(0,0,0,.3);
+}
+```
+
+**Как правильно отпозиционировать подсказку? Для начала, по горизонтали.**
+
+Центр подсказки должен быть ровно над центром элемента, который имеет координату `elem.offset().left + elem.outerWidth()/2`.
+
+Если поставить `tooltipElem.left` в это значение -- результат будет выглядеть так:
+<img src="tooltip-fixed-center.png">
+
+```js
+tooltipElem.left = elem.offset().left + elem.outerWidth()/2
+```
+
+Дополнительно нужно сдвинуть подсказку на половину собственной ширины влево:
+
+<img src="tooltip-fixed-center2.png">
+
+```js
+left -= tooltipElem.outerWidth()/2;
+```
+
+**Теперь отпозиционируем по вертикали.**
+
+Это гораздо проще: нужно взять координату Y элемента и вычесть из неё высоту подсказки и дополнительный отступ.
+
+```js
+elemCoords.top - tooltipElem.outerHeight() - 10
+```
+
+# Проверка решения
+
+Проверьте, пожалуйста, ваше решение на предмет возможных ошибок:
+
+<ul>
+<li>Подсказка корректно работает при прокрутке?</li>
+<li>Не используете ли вы события `mouseout/mouseover`? Лучше -- `mouseenter/mouseleave` (или, более кратко в jQuery: `hover`).</li>
+<li>Вторая подсказка с `offset:0` расположена сразу над элементом, а не как первая.</li>
+<li>Элемент с подсказкой генерируется динамически, при наведении, а не когда подсказка только создаётся?</li>
+<li>Элемент с подсказкой *позиционируется* при показе, а не при создании? Ведь элемент, на котором стоит подсказка, может менять своё положение.</li>
+</ul>
+
+# Код решения
+
+[edit src="solution"]Полное решение в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/solution.view/index.html b/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/solution.view/index.html
new file mode 100755
index 00000000..e13d1674
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/solution.view/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<script src="http://code.jquery.com/jquery.min.js"></script>
+<style>
+  body {
+    height: 2000px; /* подсказка должна работать независимо от прокрутки */
+  }
+
+  .tooltip {
+    position:absolute;
+    z-index:100; /* подсказка должна перекрывать другие элементы */
+    padding: 10px 20px;
+
+    /* красивости... */
+    border: 1px solid #b3c9ce;
+    border-radius: 4px;
+    text-align: center;
+    font: italic 14px/1.3 arial, sans-serif; 
+    color: #333;
+    background: #fff;
+    box-shadow: 3px 3px 3px rgba(0,0,0,.3);
+  }
+
+</style>
+</head>
+<body>
+
+<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
+<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
+<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
+
+<a href="#" id="link">Ссылка с <i>подсказкой</i></a>
+<a href="#" id="link2">Еще ссылка</a>
+
+<script>
+// должно работать даже если страница имеет прокрутку
+// подсказка должна перекрывать текст под ней
+// подсказка не должна вылезать за экран
+function Tooltip(options) {
+
+  var offsetFromElement = (options.offset === undefined) ? 10 : options.offset;
+  var tooltipElem;
+  var isEnabled = true;
+
+  var elem = options.elem;
+  var html = options.html;
+
+  // обычно обработчики - отдельные функции, но здесь все слишком просто, так что без них
+  elem.hover(show, hide);
+
+  function hide() {
+    getTooltipElem().remove();
+  }
+
+  function show() {
+    var elemCoords = elem.offset();
+    
+    var tooltipElem = getTooltipElem();
+
+    var winLeft = $(window).scrollLeft();
+    var winTop = $(window).scrollTop();
+
+    tooltipElem.appendTo('body'); // если не показать элемент, то не получится получить ширину
+
+    var left = elemCoords.left + (elem.outerWidth() - tooltipElem.outerWidth())/2^0;
+    if (left < winLeft) left = winLeft; // вылезли за левую границу
+
+    var top = elemCoords.top - tooltipElem.outerHeight() - offsetFromElement;
+    if (top < winTop) { // вылезли за верхнюю границу
+      top = elemCoords.top + elem.outerHeight() + offsetFromElement;
+    }
+
+    tooltipElem.css({
+        left: left,
+        top: top
+    });
+  }
+
+  function getTooltipElem() {
+    if (!tooltipElem) {
+      tooltipElem = $('<div/>', {
+        "class" : 'tooltip',
+        html: html
+      });
+    }
+    return tooltipElem;
+  }
+
+}
+
+new Tooltip({
+  elem: $('#link'),
+  html: "подсказка длиннее, чем элемент"
+});
+
+
+new Tooltip({
+  elem: $('#link2'),
+  html: "HTML<br>подсказка",
+  offset: 0
+});
+
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/source.view/index.html b/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/source.view/index.html
new file mode 100755
index 00000000..fcd5ded1
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/source.view/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<script src="http://code.jquery.com/jquery.min.js"></script>
+<style>
+  body {
+    height: 2000px; /* подсказка должна работать независимо от прокрутки */
+  }
+
+  .tooltip {
+    /* ваш стиль */
+  }
+
+</style>
+</head>
+<body>
+
+<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
+<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
+<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
+
+<a href="#" id="link">Ссылка с <i>подсказкой</i></a>
+<a href="#" id="link2">Еще ссылка</a>
+
+<script>
+// должно работать даже если страница имеет прокрутку
+// подсказка должна перекрывать текст под ней
+// подсказка не должна вылезать за экран
+function Tooltip(options) {
+  /* ваш код */
+}
+
+new Tooltip({
+  elem: $('#link'),
+  html: "подсказка длиннее, чем элемент"
+});
+
+
+new Tooltip({
+  elem: $('#link2'),
+  html: "HTML<br>подсказка",
+  offset: 0
+});
+
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/task.md b/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/task.md
new file mode 100644
index 00000000..31335863
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/task.md
@@ -0,0 +1,32 @@
+# Подсказка над элементом
+
+[importance 5]
+
+Создайте всплывающую подсказку над элементом. 
+
+Подсказка должна появляться при наведении на элемент, по центру и на небольшом расстоянии сверху. При уходе курсора с элемента -- исчезать.
+
+Вы можете посмотреть поведение подсказки в ифрейме ниже, наведя курсор на ссылку.
+
+[iframe src="solution" height=200 link border=1]
+
+Способ добавления подсказки к элементу:
+
+```js
+new Tooltip({
+  elem: $('#elem'), 
+  html: "Вот <b>такая</b> подсказка!",
+  // вертикальное расстояние от подсказки до элемента
+  offset: 20 // необязательный параметр, по умолчанию 10
+});
+```
+
+<ul>
+<li>В подсказке и элементе, на который она поставлена, может быть произвольный HTML. Оформление подсказки должно задаваться CSS.</li>
+<li>Подсказка не должна вылезать за пределы экрана, если нельзя показать сверху -- показывать снизу элемента.</li>
+<li>Объект подсказки не должен иметь публичных методов, только приватные.</li>
+</ul>
+
+[edit src="source" task/]
+
+P.S. Подсказки, если их мало, можно реализовать и при помощи CSS. Но JS-подход более универсален и не зависит от вёрстки, в частности, он может проверять, не вылезает ли подсказка за экран.
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/tooltip-fixed-center.png b/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/tooltip-fixed-center.png
new file mode 100755
index 00000000..0a29f53e
Binary files /dev/null and b/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/tooltip-fixed-center.png differ
diff --git a/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/tooltip-fixed-center2.png b/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/tooltip-fixed-center2.png
new file mode 100755
index 00000000..564dbc18
Binary files /dev/null and b/2-ui/5-widgets/6-widget-tasks/1-tooltip-over-element/tooltip-fixed-center2.png differ
diff --git a/2-ui/5-widgets/6-widget-tasks/2-moving-tooltip/solution.md b/2-ui/5-widgets/6-widget-tasks/2-moving-tooltip/solution.md
new file mode 100644
index 00000000..10ae0397
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/2-moving-tooltip/solution.md
@@ -0,0 +1,30 @@
+# События
+
+Три события имеют отношение к подсказке:
+<ol>
+<li>При `mouseover` -- показать.</li>
+<li>При `mousemove` -- показать на новом месте.</li>
+<li>При `mouseout` -- спрятать.</li>
+</ol>
+
+...Но при заходе на элемент происходят сразу оба события: `mouseover` и `mousemove` на нём же. Зачем вызывать код для показа два раза? Можно оставить его только в `mousemove`.
+
+Стиль элемента подсказки:
+
+```css
+.tooltip {
+  position:absolute;
+  z-index:100; /* подсказка должна перекрывать другие элементы */
+  ...
+}
+```
+
+# Решение
+
+[edit src="solution"]Решение в песочнице[/edit]
+
+В нём есть две тонкости.
+<ol>
+<li>Для того, чтобы можно было получить высоту и ширину, подсказку надо сначала показать.</li>
+<li>При показе -- важно, чтобы подсказка не оказалась *под* курсором. Если такое произойдет, то дальнейшие события `mousemove` станут происходить *уже на подсказке*, а не на элементе, и их обработка сломается.</li>
+</ol>
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/2-moving-tooltip/solution.view/index.html b/2-ui/5-widgets/6-widget-tasks/2-moving-tooltip/solution.view/index.html
new file mode 100755
index 00000000..18a2179d
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/2-moving-tooltip/solution.view/index.html
@@ -0,0 +1,138 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<script src="http://code.jquery.com/jquery.min.js"></script>
+<style>
+  body {
+    height: 2000px; /* подсказка должна работать независимо от прокрутки */
+  }
+
+  .tooltip {
+    position:absolute;
+    z-index:100; /* подсказка должна перекрывать другие элементы */
+    padding: 10px 20px;
+
+    /* красивости... */
+    border: 1px solid #b3c9ce;
+    border-radius: 4px;
+    text-align: center;
+    font: italic 14px/1.3 arial, sans-serif; 
+    color: #333;
+    background: #fff;
+    box-shadow: 3px 3px 3px rgba(0,0,0,.3);
+  }
+
+</style>
+</head>
+<body>
+
+<a href="#" id="link">Ссылка с подсказкой</a>
+<a href="#" id="link2">Еще ссылка</a>
+
+<div id="elem" style="border:1px solid black; position:absolute;width:300px;height:150px;right:10px;bottom:10px">
+  <em>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</em>
+</div>
+
+<script>
+// должно работать даже если страница имеет прокрутку
+// подсказка должна перекрывать текст под ней
+// у нижнего и правого края окна подсказка должна идти налево/вверх от курсора
+function Tooltip(options) {
+
+  var offsetFromCursor = (options.offset === undefined) ? 10 : options.offset;
+  var tooltipElem;
+  var isEnabled = true;
+
+  var elem = options.elem;
+  var html = options.html;
+
+  elem.on({
+    mouseenter: onMouseEnter,
+    mouseleave: onMouseLeave,
+    mousemove: onMouseMove
+  });
+
+  function onMouseEnter(e) {
+    show(e.pageX, e.pageY);
+  }
+
+  function onMouseLeave() {
+    hide();    
+  }
+
+  function onMouseMove(e) {
+    show(e.pageX, e.pageY);    
+  }
+
+
+  function hide() {
+    getTooltipElem().remove();
+  };
+
+  function getTooltipElem() {
+    if (!tooltipElem) {
+      tooltipElem = $('<div/>', {
+        "class" : 'tooltip',
+        html: html
+      });
+    }
+    return tooltipElem;
+  }
+
+  function show(pageX, pageY) {
+    var tooltipElem = getTooltipElem();
+
+    if (!tooltipElem.is(':visible')) {
+      // первым делом - отобразить подсказку, чтобы можно было получить её размеры
+      tooltipElem.appendTo('body');
+    }
+
+    var scrollY = $(window).scrollTop();
+    var winBottom = scrollY + $(window).height();
+
+    var scrollX = $(window).scrollLeft();
+    var winRight  = scrollX + $(window).width();
+
+    var newLeft = pageX + offsetFromCursor;
+    var newTop = pageY + offsetFromCursor;
+
+    if (newLeft + tooltipElem.outerWidth() > winRight) { // если за правой границей окна
+      newLeft -= tooltipElem.outerWidth();
+      newLeft -= offsetFromCursor + 2; // немного левее, чтобы курсор был не над подсказкой
+    }
+
+    if (newTop + tooltipElem.outerHeight() > winBottom) { // если за нижней границей окна
+      newTop -= tooltipElem.outerHeight();
+      newTop -= offsetFromCursor + 2;  // немного выше
+    }
+
+    tooltipElem.css({
+      left: newLeft,
+      top: newTop
+    });
+  };
+
+}
+
+new Tooltip({
+  elem: $('#elem'),
+  html: "Вот <b>такая</b> подсказка!"
+});
+
+new Tooltip({
+  elem: $('#link'),
+  html: $('#link').html()
+});
+
+new Tooltip({
+  elem: $('#link2'),
+  html: $('#link2').html()
+});
+
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/6-widget-tasks/2-moving-tooltip/source.view/index.html b/2-ui/5-widgets/6-widget-tasks/2-moving-tooltip/source.view/index.html
new file mode 100755
index 00000000..c7fc322d
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/2-moving-tooltip/source.view/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<script src="http://code.jquery.com/jquery.min.js"></script>
+<style>
+  body {
+    height: 2000px; /* подсказка должна работать независимо от прокрутки */
+  }
+
+  .tooltip {
+    /* ваш стиль */
+  }
+
+</style>
+</head>
+<body>
+
+<a href="#" id="link">Ссылка с подсказкой</a>
+<a href="#" id="link2">Еще ссылка</a>
+
+<div id="elem" style="border:1px solid black; position:absolute;width:300px;height:150px;right:10px;bottom:10px">
+  <em>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</em>
+</div>
+
+<script>
+// должно работать даже если страница имеет прокрутку
+// подсказка должна перекрывать текст под ней
+// у нижнего и правого края окна подсказка должна идти налево/вверх от курсора
+function Tooltip(options) {
+  /* ваш код */
+}
+
+new Tooltip({
+  elem: $('#elem'),
+  html: "Вот <b>такая</b> подсказка!"
+});
+
+new Tooltip({
+  elem: $('#link'),
+  html: $('#link').html()
+});
+
+new Tooltip({
+  elem: $('#link2'),
+  html: $('#link2').html()
+});
+
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/6-widget-tasks/2-moving-tooltip/task.md b/2-ui/5-widgets/6-widget-tasks/2-moving-tooltip/task.md
new file mode 100644
index 00000000..a3fec729
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/2-moving-tooltip/task.md
@@ -0,0 +1,34 @@
+# Подсказка, следующая за курсором
+
+[importance 4]
+
+Создайте всплывающую подсказку, следующую за курсором. 
+
+<ul>
+<li>Подсказка должна появляться при наведении на элемент, на небольшом расстоянии справа-снизу от курсора.</li>
+<li>При передвижении курсора подсказка следует за ним.</li>
+<li>Если курсор слишком низко/справа, то чтобы подсказка не вылезла за нижнюю/правую границу экрана -- пусть отображается сверху/слева от курсора.</li>
+</ul>
+
+Вы можете посмотреть поведение подсказки в ифрейме ниже, наведя курсор на правый-нижний угол.
+
+[iframe src="solution" height=200 link border=1]
+
+Способ добавления подсказки к элементу:
+
+```js
+new Tooltip({
+  elem: $('#elem'),
+  html: "Вот <b>такая</b> подсказка!")
+});
+```
+
+Естественные пожелания:
+<ul>
+<li>Подсказка не должна "моргать" при движении мыши.</li>
+<li>Подсказка должна правильно работать, если у страницы есть прокрутка.</li>
+<li>В подсказке и элементе, на который она поставлена, может быть произвольный HTML. Оформление подсказки должно задаваться CSS.</li>
+<li>Объект подсказки не должен иметь публичных методов, только приватные.</li>
+</ul>
+
+[edit src="source" task/]
diff --git a/2-ui/5-widgets/6-widget-tasks/3-resize-img/solution.md b/2-ui/5-widgets/6-widget-tasks/3-resize-img/solution.md
new file mode 100644
index 00000000..0be9b458
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/3-resize-img/solution.md
@@ -0,0 +1,75 @@
+# CSS
+
+Для захвата проще всего создать дополнительные `DIV'ы` и отпозиционировать их сбоку и справа-снизу `IMG`. При нажатии на них начинать смену размера. 
+
+CSS-структура:
+
+```html
+<div class="resize-wrapper" style="width: 503px; height: 285px;">
+  <img src="heroes.jpg" id="heroes" style="width:500px;height:282px">
+  <div class="resize-handle-s"></div>
+  <div class="resize-handle-e"></div>
+  <div class="resize-handle-se"></div>
+</div>
+```
+
+Внешний `DIV` подстраивается под размер картинки и имеет `position:relative`. Внутри него расположены абсолютно позиционированные "ручки" для захвата.
+
+Стиль:
+
+```css
+.resize-wrapper {
+  position: relative;
+}
+.resize-wrapper img {
+  /* img при таком DOCTYPE в некоторых браузерах имеет display:inline, в некоторых display:block
+     если оставить inline, то под img браузер оставит пустое место для "хвостов" букв
+  */
+  display: block;
+}
+
+.resize-handle-se { /* правый-нижний угол */
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  background: url(handle-se.png) no-repeat;
+  cursor: se-resize;
+}
+
+.resize-handle-s { /* нижняя "рамка", за которую можно потащить */
+  position: absolute;
+  bottom: 0;
+  height: 3px;
+  width:100%;
+  background: gray;
+  cursor: s-resize;
+}
+
+.resize-handle-e { /* правая "рамка", за которую можно потащить */
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 3px;
+  height:100%;
+  background: gray;
+  cursor: e-resize;
+}
+```
+
+Для обозначения низа используется буква "s" (south, "юг" по-английски), обозначения правой стороны -- буква "e" (east, "восток" по-английски).
+
+Использование сторон света для обозначения направления можно часто встретить в скриптах.
+
+# Алгоритм
+
+<ol>
+<li>При инициализации IMG оборачивается во внешнюю обертку и обкладывается `DIV'ами`, на которых ловим `mousedown`. Обертка нужна, чтобы абсолютно позиционировать `DIV'ы` внутри неё под/сбоку изображения.</li>
+<li>При наступлении `mousedown`, начинаем ловить `document.mousemove` и подгонять картинку под размер, а обертку -- под картинку.
+
+Желательно заодно отменить браузерное выделение и Drag'n'Drop, возвратив `false` из собработчиков событий `mousedown` и `dragstart`.
+</li>
+<li>При наступлении `mouseup` -- конец.</li>
+
+[edit src="solution"]Открыть полное решение[/edit]
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/3-resize-img/solution.view/index.html b/2-ui/5-widgets/6-widget-tasks/3-resize-img/solution.view/index.html
new file mode 100755
index 00000000..8e01a5f3
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/3-resize-img/solution.view/index.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <style>
+    .resize-wrapper {
+      position: relative;
+    }
+    .resize-wrapper img {
+      /* img при таком DOCTYPE в некоторых браузерах имеет display:inline, в некоторых display:block
+         если оставить inline, то под img браузер оставит пустое место для "хвостов" букв
+      */
+      display: block;
+    }
+
+    .resize-handle-se { /* правый-нижний угол */
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 16px;
+      height: 16px;
+      background: url(http://js.cx/clipart/handle-se.png) no-repeat;
+      cursor: se-resize;
+    }
+
+    .resize-handle-s { /* нижняя "рамка", за которую можно потащить */
+      position: absolute;
+      bottom: 0;
+      height: 3px;
+      width:100%;
+      background: gray;
+      cursor: s-resize;
+    }
+
+    .resize-handle-e { /* правая "рамка", за которую можно потащить */
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 3px;
+      height:100%;
+      background: gray;
+      cursor: e-resize;
+    }
+
+  </style>
+</head>
+<body>
+
+<img style="width:500px;height:282px" id="heroes" src="http://js.cx/clipart/heroes.jpg">
+
+<div id="info"></div>
+
+<script>
+function Resizeable(options) {
+  var self = this;
+
+  var elem = options.elem;
+  var handleSize = options.handleSize || 3;
+
+  var newWidth, newHeight, resizeType; // размеры в процессе ресайза
+
+  // внешняя обертка
+  var wrapper = $('<div class="resize-wrapper"/>')
+  wrapper.prependTo(elem.parent())
+  wrapper.append(elem);
+
+  // добавляем "ручки" в обертку
+  wrapper.append(
+    '<div class="resize-handle-s"/><div class="resize-handle-e"/><div class="resize-handle-se"/>'
+  );
+
+  // отменить перенос и выделение браузера
+  // в дополнение к return false из mousedown
+  wrapper.on('selectstart dragstart', false);
+
+  adjustWrapperSize();
+
+  wrapper.on('mousedown', onMouseDown);
+
+  function onMouseDown(e) {
+    var className = e.target.className;
+    if (className.indexOf("resize-handle-") == 0) {
+      // поймали клик на "ручке" - вызываем начало ресайза
+      resizeType = className.slice("resize-handle-".length);
+      startResize();
+    }
+    return false;
+  }
+
+  function adjustWrapperSize() {
+    // подгоняет размер обертки под картинку
+    wrapper.css({
+      width: elem.width() + handleSize,
+      height: elem.height() + handleSize
+    });
+  }
+
+  function startResize() {
+    $(document).on('mousemove.resizeable', onDocumentMouseMove);
+    $(document).on('mouseup.resizeable', onDocumentMouseUp);
+  }
+
+  function onDocumentMouseMove(e) {
+    var offset = wrapper.offset();
+
+    if (~resizeType.indexOf("s")) {
+      // в ручке есть буква "s" - значит меняем высоту картинки
+      newHeight = Math.max(e.pageY - offset.top, handleSize);
+      elem.css('height', newHeight);
+    }
+    if (~resizeType.indexOf("e")) {
+      // в ручке есть буква "e" - значит меняем ширину картинки
+      newWidth = Math.max(e.pageX - offset.left, handleSize);
+      elem.css('width', newWidth);
+    }
+
+    // подогнать обертку
+    adjustWrapperSize();
+  }
+
+  function onDocumentMouseUp() {
+    endResize();
+  }
+
+  function endResize() {
+    $(document).off('.resizeable');
+    $(self).triggerHandler({
+      type: "resize", 
+      newWidth: newWidth,
+      newHeight: newHeight
+    });
+  }
+
+}
+
+var resizeMe = new Resizeable({
+  elem: $('#heroes')
+});
+
+$(resizeMe).on("resize", function(e) {
+  // вывести результат
+  $('#info').html("ширина:" + e.newWidth + ", высота:" + e.newHeight);
+});
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/6-widget-tasks/3-resize-img/source.view/index.html b/2-ui/5-widgets/6-widget-tasks/3-resize-img/source.view/index.html
new file mode 100755
index 00000000..148259ff
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/3-resize-img/source.view/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+</head>
+<body>
+
+<img style="width:500px;height:282px" id="heroes" src="http://js.cx/clipart/heroes.jpg">
+
+Картинка для декорации правого-нижнего угла: <img src="http://js.cx/clipart/handle-se.png">
+
+<div id="info"></div>
+
+<script>
+function Resizeable(options) {
+  /* ваш код */
+}
+
+var resizeMe = new Resizeable({
+  elem: $('#heroes')
+});
+
+$(resizeMe).on("resize", function(e) {
+  // вывести результат
+  $('#info').html("ширина:" + e.newWidth + ", высота:" + e.newHeight);
+});
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/6-widget-tasks/3-resize-img/task.md b/2-ui/5-widgets/6-widget-tasks/3-resize-img/task.md
new file mode 100644
index 00000000..5faff440
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/3-resize-img/task.md
@@ -0,0 +1,29 @@
+# Менять размер картинки при помощи мыши
+
+[importance 5]
+
+Реализуйте интерфейс для смены размера изображения мышью. 
+
+Пусть изображение "тянется" при захвате его снизу, справа и в правом-нижнем углу, вот так:
+[iframe height=350 src="solution" link]
+
+По окончанию смены размеров должно быть событие **`resize`** c новыми размерами.
+
+Синтаксис:
+
+```js
+var resizeMe = new Resizeable({
+  elem: $('#heroes')
+});
+
+$(resizeMe).on("resize", function(e) {
+  // вывести результат
+  $('#info').html("ширина:" + e.newWidth + ", высота:" + e.newHeight);
+});
+```
+
+Минимальный размер изображения 3x3, меньше ресайзить нельзя.
+
+В исходном документе есть ссылка на <a href="http://js.cx/clipart/handle-se.png">картинку handle-se.png</a> для правого-нижнего угла.
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/4-img-select-mouse/solution.md b/2-ui/5-widgets/6-widget-tasks/4-img-select-mouse/solution.md
new file mode 100644
index 00000000..e5d4e325
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/4-img-select-mouse/solution.md
@@ -0,0 +1,21 @@
+# HTML/CSS
+
+Область выделения можно оформить как `DIV`, серого цвета, полупрозрачный, с рамкой:
+
+```css
+.crop-area {
+  position: absolute;
+  border: 1px dashed black;
+  background: #F5DEB3;
+  opacity: 0.3;
+  filter:alpha(opacity=30); /* IE opacity */
+}
+```
+
+# Решение
+
+[edit src="solution"]Открыть в песочнице[/edit]
+
+Обратите внимание: обработчики `mousemove/mouseup` ставятся на `document`, не на элемент. 
+
+Это для того, чтобы посетитель мог начать выделение на элементе, а продолжить и завершить его, двигая зажатой мышкой снаружи, вне его границ.
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/4-img-select-mouse/solution.view/index.html b/2-ui/5-widgets/6-widget-tasks/4-img-select-mouse/solution.view/index.html
new file mode 100755
index 00000000..9e900673
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/4-img-select-mouse/solution.view/index.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <style>
+    .crop-area {
+      position: absolute;
+      border: 1px dashed black;
+
+      background: #F5DEB3;
+      opacity: 0.3;
+      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); /* IE opacity */
+    }
+
+  </style>
+</head>
+<body>
+
+<img width="500" height="282" id="heroes" src="http://js.cx/clipart/heroes.jpg">
+
+<div id="info"></div>
+<script>
+function Croppable(options) {
+  var self = this;
+
+  var elem = options.elem;
+
+  var cropArea;
+  var cropStartX, cropStartY;
+
+  elem.on('selectstart dragstart', false)
+   .on('mousedown', onImgMouseDown);
+
+  function initCropArea(pageX, pageY) {
+    cropArea = $('<div class="crop-area"/>')
+      .appendTo('body');
+
+    cropStartX = pageX;
+    cropStartY = pageY;
+  }
+
+  function onDocumentMouseMove(e) {
+    drawCropArea(e.pageX, e.pageY);
+  }
+
+  function onDocumentMouseUp(e) {
+    endCrop(e.pageX, e.pageY);
+
+    cropArea.remove();
+    $(document).off('.croppable');
+  }
+
+  function onImgMouseDown(e) {
+    initCropArea(e.pageX, e.pageY);
+
+    $(document).on({
+      'mousemove.croppable': onDocumentMouseMove,
+      'mouseup.croppable': onDocumentMouseUp
+    });
+   
+    return false;
+  };
+
+  function drawCropArea(pageX, pageY) {
+    var dims = getCropDimensions(pageX, pageY);
+
+    cropArea.css(dims);
+
+    // вычитаем 2, т.к. ширина будет дополнена рамкой
+    // если не вычесть, то рамка может вылезти за изображение
+    cropArea.css({
+      height: Math.max(dims.height-2, 0),
+      width: Math.max(dims.width-2,0)
+    });
+
+    // здесь мы просто рисуем полупрозрачный квадрат
+    // альтернативный подход - накладывать на каждую часть изображения div'ы с opacity и черным цветом, чтобы только кроп был ярким
+  }
+
+  function endCrop(pageX, pageY) {
+    var dims = getCropDimensions(pageX, pageY);
+
+    var coords = elem.offset();
+    // получить координаты относительно изображения
+    dims.left -= coords.left;
+    dims.top -= coords.top;
+
+    $(self).triggerHandler($.extend({ type: "crop" }, dims));
+  }
+
+  function getCropDimensions(pageX, pageY) {
+    // 1. Делаем квадрат из координат нажатия и текущих
+    // 2. Ограничиваем размерами img, если мышь за его пределами
+
+    var left = Math.min(cropStartX, pageX);
+    var right = Math.max(cropStartX, pageX);
+    var top = Math.min(cropStartY, pageY);
+    var bottom = Math.max(cropStartY, pageY);
+
+    var coords = elem.offset();
+
+    left = Math.max(left, coords.left);
+    top = Math.max(top, coords.top);
+    right = Math.min(right, coords.left + elem.outerWidth());
+    bottom = Math.min(bottom, coords.top + elem.outerHeight());
+
+    return { left: left, top: top, width: right-left, height: bottom-top };
+  }
+
+}
+
+var croppable = new Croppable({
+  elem: $('#heroes')
+});
+
+$(croppable).on("crop", function(event) {
+  // вывести координаты и размеры crop-квадрата относительно изображения
+  var str = "";
+  $(['left','top','width','height']).each(function() {
+    str += this+":"+event[this]+" ";
+  });
+
+  $('#info').html("Crop: " + str);
+});
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/6-widget-tasks/4-img-select-mouse/source.view/index.html b/2-ui/5-widgets/6-widget-tasks/4-img-select-mouse/source.view/index.html
new file mode 100755
index 00000000..0388b592
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/4-img-select-mouse/source.view/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+</head>
+<body>
+
+<img width="500" height="282" id="heroes" src="http://js.cx/clipart/heroes.jpg">
+
+<div id="info"></div>
+<script>
+function Croppable(options) {
+  /* ваш код */
+}
+
+var croppable = new Croppable({
+  elem: $('#heroes')
+});
+
+$(croppable).on("crop", function(event) {
+  // вывести координаты и размеры crop-квадрата относительно изображения
+  var str = "";
+  $(['left','top','width','height']).each(function() {
+    str += this+":"+event[this]+" ";
+  });
+
+  $('#info').html("Crop: " + str);
+});
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/6-widget-tasks/4-img-select-mouse/task.md b/2-ui/5-widgets/6-widget-tasks/4-img-select-mouse/task.md
new file mode 100644
index 00000000..d8f853a6
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/4-img-select-mouse/task.md
@@ -0,0 +1,31 @@
+# Выбор фрагмента картинки мышью
+
+[importance 3]
+
+Реализуйте интерфейс для выбора фрагмента изображения мышью. 
+
+Нажмите на изображении и проведите мышью для выбора:
+[iframe height=350 src="solution" link]
+
+По окончании смены размеров должно быть событие `crop` c `left/top` координатами и `width/height` размерами выбранной области.
+
+Синтаксис:
+
+```js
+var croppable = new Croppable({
+  elem: $('#heroes')
+});
+
+$(croppable).on("crop", function(e) {
+  // вывести crop-квадрат, left/top - относительно изображения
+  // e.left, e.top, e.width, e.height
+});
+```
+
+<ul>
+<li>Область можно выбирать, двигая курсором в любую сторону от исходной точки.</li>
+<li>Область не может вылезать за пределы изображения.</li>
+</ul>
+
+[edit src="source" task/]
+
diff --git a/2-ui/5-widgets/6-widget-tasks/5-menu-animated/solution.md b/2-ui/5-widgets/6-widget-tasks/5-menu-animated/solution.md
new file mode 100644
index 00000000..099f5e81
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/5-menu-animated/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/5-menu-animated/solution.view/index.html b/2-ui/5-widgets/6-widget-tasks/5-menu-animated/solution.view/index.html
new file mode 100755
index 00000000..b8090a51
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/5-menu-animated/solution.view/index.html
@@ -0,0 +1,117 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<script src="http://code.jquery.com/jquery.min.js"></script>
+<style>
+  .menu {
+    padding: 5px;
+    width: 250px;
+    border: 1px solid black;
+  }
+  .menu ul {
+    margin: 0;
+    padding-left: 20px;
+    margin-left: 10px;
+    height: 0;
+
+    list-style-position: outside;
+    overflow: hidden;
+  }
+
+  .menu .menu-title {
+    padding-left: 16px;
+    background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
+    font-size: 18px;
+    cursor: pointer;
+
+  }
+
+  .menu-open .menu-title {
+    background: url(http://js.cx/clipart/arrow-down.png) left center no-repeat;
+  }
+
+  .menu-open ul {
+    display: block;
+  }
+
+</style>
+</head>
+<body>
+
+<div id="selected"></div>
+
+<div id="sweeties" class="menu">
+  <span class="menu-title">Сладости (наведи курсор)!</span>
+  <ul>
+    <li><a href="#cake">Торт</a></li>
+    <li><a href="#donut">Пончик</a></li>
+    <li><a href="#cake-small">Пирожное</a></li>
+    <li><a href="#chokolate">Шоколадка</a></li>
+    <li><a href="#icecream">Мороженое</a></li>
+    <li><a href="#souflet">Суфле</a></li>
+    <li><a href="#rahatlukum">Рахат-Лукум</a></li>
+  </ul>
+
+</div>
+
+<script>
+
+var menu = new SlidingMenu({
+  elem: $('#sweeties'),
+  duration: 1000
+});
+
+$(menu).on("select", function(e) {
+  $("#selected").html(e.value);
+});
+
+
+function SlidingMenu(options) {
+  var self = this;
+
+  var elem = options.elem;
+  var duration = options.duration || 100;
+
+  var titleElem = elem.find('.menu-title');
+  var listElem = elem.find('ul');
+
+  elem.hover(slideListShow, slideListHide);
+
+  elem.on('click', 'a', onItemClick);
+
+  function onItemClick(e) {
+    $(self).triggerHandler({
+      type: "select", 
+      value: e.target.getAttribute('href').slice(1)
+    });
+    return false;
+  }
+
+  function slideListShow() {
+    // анимируем высоту от нуля до scrollHeight
+    // чтобы scrollHeight был верный - ставим overflow: hidden
+    // скрываем при помощи height: 0 вместо display: none, чтобы анимация могла определить высоту
+    listElem.stop().animate({
+      height: listElem.prop('scrollHeight')
+    }, {
+      // время на часть высоты, которую еще надо показать
+      duration: duration * (listElem.prop('scrollHeight') - listElem.height()) / listElem.prop('scrollHeight')
+    });
+
+  }
+
+  function slideListHide() {
+    listElem.stop().animate({
+      height: 0
+    }, {
+      duration: duration * (listElem.height() /  listElem.prop('scrollHeight'))
+    });    
+  }
+}
+
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/6-widget-tasks/5-menu-animated/source.view/index.html b/2-ui/5-widgets/6-widget-tasks/5-menu-animated/source.view/index.html
new file mode 100755
index 00000000..1890f31d
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/5-menu-animated/source.view/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<script src="http://code.jquery.com/jquery.min.js"></script>
+<style>
+  .menu {
+    padding: 5px;
+    width: 250px;
+    border: 1px solid black;
+  }
+  .menu ul {
+    margin: 0;
+    padding-left: 20px;
+    margin-left: 10px;
+    height: 0;
+
+    list-style-position: outside;
+    overflow: hidden;
+  }
+
+  .menu .menu-title {
+    padding-left: 16px;
+    background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
+    font-size: 18px;
+    cursor: pointer;
+
+  }
+
+  .menu-open .menu-title {
+    background: url(http://js.cx/clipart/arrow-down.png) left center no-repeat;
+  }
+
+  .menu-open ul {
+    display: block;
+  }
+
+</style>
+</head>
+<body>
+
+<div id="selected"></div>
+
+<div id="sweeties" class="menu">
+  <span class="menu-title">Сладости (наведи курсор)!</span>
+  <ul>
+    <li><a href="#cake">Торт</a></li>
+    <li><a href="#donut">Пончик</a></li>
+    <li><a href="#cake-small">Пирожное</a></li>
+    <li><a href="#chokolate">Шоколадка</a></li>
+    <li><a href="#icecream">Мороженое</a></li>
+    <li><a href="#souflet">Суфле</a></li>
+    <li><a href="#rahatlukum">Рахат-Лукум</a></li>
+  </ul>
+
+</div>
+
+<script>
+
+var menu = new SlidingMenu({
+  elem: $('#sweeties'),
+  duration: 1000
+});
+
+$(menu).on("select", function(e) {
+  $("#selected").html(e.value);
+});
+
+
+function SlidingMenu(options) {
+  /* ваш код, оживляющий меню */
+}
+
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/6-widget-tasks/5-menu-animated/task.md b/2-ui/5-widgets/6-widget-tasks/5-menu-animated/task.md
new file mode 100644
index 00000000..f7d553e8
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/5-menu-animated/task.md
@@ -0,0 +1,26 @@
+# Меню с анимированным раскрытием
+
+[importance 3]
+
+Создайте раскрывающееся при наведении на заголовок меню:
+
+[iframe height=210 src="solution"]
+
+Меню должно плавно скрываться-раскрываться, когда курсор переводят в него, а затем обратно, затем опять в него...
+
+При клике меню должно генерировать событие `"select"`.
+
+```js
+var menu = new SlidingMenu({
+  elem: $('#sweeties'),
+  duration: 1000 // длительность анимации
+});
+
+$(menu).on("select", function(e) {
+  $("#selected").html(e.value);
+});
+```
+
+В исходном документе находится DOM-структура и стили для меню.
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/6-slider-events/slider.png b/2-ui/5-widgets/6-widget-tasks/6-slider-events/slider.png
new file mode 100755
index 00000000..1f310616
Binary files /dev/null and b/2-ui/5-widgets/6-widget-tasks/6-slider-events/slider.png differ
diff --git a/2-ui/5-widgets/6-widget-tasks/6-slider-events/solution.md b/2-ui/5-widgets/6-widget-tasks/6-slider-events/solution.md
new file mode 100644
index 00000000..2de105f8
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/6-slider-events/solution.md
@@ -0,0 +1,29 @@
+# Сопоставление значения и слайдера
+
+Как сопоставить позицию слайдера и значение?
+
+Для этого посмотрим крайние значения слайдера. Допустим, размер бегунка `10px`.
+
+Раз центр соответствует значению, то крайнее левое значение будет соответствовать центру на `5px`, а крайнее правой -- центру на `5px` от правой границы:
+
+<img src="slider.png">
+
+Соответственно, ширина области изменения будет `sliderElem.clientWidth - thumbElem.clientWidth`. Далее её можно уже поделить на части, количество пикселей на значение будет:
+
+```js
+pixelsPerValue = (sliderElem.clientWidth-thumbElem.clientWidth) / max;
+```
+
+Может получиться так, что это значение будет дробным, меньше единицы. Например, если `max = 1000`, а ширина слайдера `110` (пробег 100), то будет `0.1` пикселя на значение. 
+
+Используя `pixelsPerValue` мы сможем переводить позицию бегунка в значение и обратно.
+
+Крайнее левое значение `thumbElem.style.left` равно нулю, крайнее правой -- как раз ширине доступной области `sliderElem.clientWidth - thumbElem.clientWidth`. Поэтому можно получив значение, поделив его на `pixelsPerValue`:
+
+```js
+value = Math.round( newLeft / pixelsPerValue);
+```
+
+# Полное решение
+
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/6-slider-events/solution.view/index.html b/2-ui/5-widgets/6-widget-tasks/6-slider-events/solution.view/index.html
new file mode 100755
index 00000000..755942b3
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/6-slider-events/solution.view/index.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <style>
+
+  .slider {
+    width: 310px;
+    height: 15px;
+    margin: 5px;
+
+    border-radius: 5px;
+    background: #E0E0E0;
+    background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
+    background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
+    background: linear-gradient(left top, #E0E0E0, #EEEEEE);
+  }
+
+  .slider-thumb {
+    position: relative;
+    width: 10px;
+    height: 25px;
+    left: 10px;
+    top: -5px;
+
+    border-radius: 3px;
+    background: blue;
+    cursor: pointer;
+  }
+
+  .sliding .slider-thumb {
+    cursor: move;
+  }
+  </style>
+</head>
+<body>
+
+<div id="slider" class="slider">
+  <div class="slider-thumb"></div>
+</div>
+
+Slide:<span id="slide">&nbsp;</span>
+Change:<span id="change">&nbsp;</span>
+
+<script>
+
+function Slider(options) {
+  var self = this;
+
+  var elem = options.elem;
+  var thumbElem = elem.find('.slider-thumb');
+
+  // [<*>----------------]
+  //   |...............|
+  // first            last
+  var pixelsPerValue = (elem.width() - thumbElem.width()) / options.max;
+  var value = options.value || 0;
+
+  // при начале переноса фиксируются
+  var thumbCursorShift; // сдвиг курсора относительно бегунка
+  var sliderCoords; // и координаты слайдера
+
+  thumbElem.on('mousedown', onThumbMouseDown)
+    .on('selectstart dragstart', false);
+
+  setSlidingValue(value, true);
+ 
+
+  function onThumbMouseDown(e) {
+    startSlide(e.pageX, e.pageY);
+    return false;
+  }
+
+
+  function onDocumentMouseMove(e) { 
+    //  вычесть координату родителя, т.к. position: relative
+    var newLeft = e.pageX - thumbCursorShift.x - sliderCoords.left;
+
+    // курсор ушёл вне слайдера
+    if (newLeft < 0) {
+      newLeft = 0;
+    }
+
+    var rightEdge = elem.outerWidth() - thumbElem.outerWidth();
+    if (newLeft > rightEdge) {
+      newLeft = rightEdge;
+    }
+
+    setSlidingValue( Math.round( newLeft / pixelsPerValue) );    
+  }
+
+  function onDocumentMouseUp() {
+    endSlide();
+  }
+
+  function endSlide() {
+    $(document).off('.slider');
+    $(self).triggerHandler({
+        type: "change", 
+        value: value
+    });
+
+    elem.removeClass('sliding');
+  }
+    
+  function startSlide(downPageX, downPageY) {
+    var thumbCoords = thumbElem.offset();
+    thumbCursorShift = { 
+      x: downPageX - thumbCoords.left,
+      y: downPageY - thumbCoords.top
+    };
+
+    sliderCoords = elem.offset();
+
+    $(document).on({
+      'mousemove.slider': onDocumentMouseMove,
+      'mouseup.slider': onDocumentMouseUp
+    });
+
+    elem.addClass('sliding');
+  }
+
+  /**
+   * Установить промежуточное значение 
+   * quiet -- означает "не генерировать событие"
+   */ 
+  function setSlidingValue(newValue, quiet) {
+    value = newValue;
+
+    thumbElem.css('left', value * pixelsPerValue ^ 0);
+    if (!quiet) {
+      $(self).triggerHandler({
+        type: "slide", 
+        value: value
+      });
+    }
+  }
+
+  /**
+   * Установить окончательное значение
+   * @param {number} newValue новое значение
+   * @param {boolean} quiet если установлен, то без события
+   */
+  this.setValue = function(newValue, quiet) {
+    // установить значение БЕЗ генерации события slide
+    // т.е. slide в любом случае нет
+    setSlidingValue(newValue, true);
+
+    // ..а change будет, если не указан quiet
+    if (!quiet) {
+      $(self).triggerHandler({
+        type: "change", 
+        value: value
+      });
+    }
+  }
+
+
+}
+
+var slider = new Slider({
+  elem: $('#slider'), 
+  max: 100,
+  value: 10
+});
+
+$(slider).on({
+  slide: function(e) {
+    $('#slide').html(e.value);
+  },
+  change: function(e) {
+    $('#change').html(e.value);
+  }
+});
+
+slider.setValue(50);
+
+</script>
+
+</body>
+</html>
+
diff --git a/2-ui/5-widgets/6-widget-tasks/6-slider-events/task.md b/2-ui/5-widgets/6-widget-tasks/6-slider-events/task.md
new file mode 100644
index 00000000..19ccb7b5
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/6-slider-events/task.md
@@ -0,0 +1,45 @@
+# Слайдер с событиями
+
+[importance 5]
+
+На основе слайдера из задачи [](/task/slider) создайте графический компонент, который умеет возвращать/получать значение.
+
+Синтаксис:
+
+```js
+var slider = new Slider({
+  elem: $('#slider'), 
+  max: 100 // слайдер на самой правой позиции соответствует 100
+});
+```
+
+Метод `setValue` устанавливает значение:
+
+```js
+slider.setValue(50);
+```
+
+У слайдера должно быть два события: `slide` при каждом передвижении и `change` при отпускании мыши (установке значения).
+
+Пример использования:
+
+```js
+$(slider).on({
+  slide: function(value) {
+    $('#slide').html(value);
+  },
+  change: function(value) {
+    $('#change').html(value);
+  }
+});
+```
+
+В действии:
+[iframe src="solution" height="60"]
+
+<ul>
+<li>Дизайн слайдера, ширина/высота элементов должна быть изменяемой через CSS, без необходимости трогать JS-код.</li>
+<li>Центр бегунка должен располагаться над значением. Например, он должен быть в центре для 50 при максимуме 100.</li>
+</ul>
+
+Исходный документ -- возьмите решение из задачи [](/task/slider).
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/7-calendar/solution.md b/2-ui/5-widgets/6-widget-tasks/7-calendar/solution.md
new file mode 100644
index 00000000..33000522
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/7-calendar/solution.md
@@ -0,0 +1 @@
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/7-calendar/solution.view/calendar.css b/2-ui/5-widgets/6-widget-tasks/7-calendar/solution.view/calendar.css
new file mode 100755
index 00000000..3eb78e38
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/7-calendar/solution.view/calendar.css
@@ -0,0 +1,28 @@
+
+.calendar-table {
+  border-collapse: collapse;
+}
+
+.calendar-table td, .calendar-table th {
+  border: 1px solid black;
+  padding: 3px;
+  text-align: center;
+}
+
+.calendar-table th {
+  font-weight: bold;
+  background-color: #E6E6E6;
+}
+
+.date-cell:hover {
+  background: #eee;
+  cursor: pointer;
+}
+
+.date-cell.selected {
+  background: #0F0;
+}
+
+.calendar-table caption {
+  text-align: center;
+}
diff --git a/2-ui/5-widgets/6-widget-tasks/7-calendar/solution.view/calendar.js b/2-ui/5-widgets/6-widget-tasks/7-calendar/solution.view/calendar.js
new file mode 100755
index 00000000..6ec15803
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/7-calendar/solution.view/calendar.js
@@ -0,0 +1,153 @@
+/**
+ * options:
+ *   value Date или объект {year,month,day}} -- дата, для которой показывать календарь
+ *     если в объекте указаны только {year,month}, то день не выбран
+*/
+function Calendar(options) {
+  var self = this;
+
+  var monthNames = 'Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь'.split(' ');
+
+  var elem;
+  var year, month, day;
+
+  var showYear, showMonth;
+
+  parseValue(options.value);
+
+  // -----------------------
+
+  this.getElement = function() {
+    if (!elem) {
+      render();
+    }
+    return elem;
+  };
+
+  this.getValue = function() {
+    return day ? new Date(year, month, day) : null;
+  };
+
+  function parseValue(value) {
+    if (value instanceof Date) {
+      year = value.getFullYear();
+      month = value.getMonth();
+      day = value.getDate();
+    } else {
+      year = value.year;
+      month = value.month;
+      day = value.day;
+    }
+  }
+
+  /**
+   * Установить значение календаря
+   * @param newValue {Date или объект {year,month[,day]} Новое значение
+   * @param quiet Если true, то событие не генерируется
+   */
+  this.setValue = function(newValue, quiet) {
+    parseValue(newValue);
+
+    if (elem) {
+      clearSelected();
+      render();
+    }
+
+    if (!quiet) {
+      $(self).triggerHandler({
+        type: "select", 
+        value: new Date(year, month, day)
+      });
+    }
+  };
+
+  function render() {
+    if (!elem) {
+      elem = $('<div class="calendar"/>')
+        .on('click', '.date-cell', onDateCellClick);     
+    }
+
+    if (showYear != year || showMonth != month) {  
+      elem.html(renderCalendarTable(year, month));
+      elem.find('caption').html(monthNames[month]+' '+year);
+      showYear = year;
+      showMonth = month;
+    }
+       
+    if (day) {
+      var num = getCellByDate(new Date(year, month, day));
+      elem.find('td').eq(num).addClass("selected");
+    }
+
+  }
+
+  function clearSelected() {
+    elem.find('.selected').removeClass('selected');
+  }
+
+
+  function onDateCellClick(e) {    
+    day = $(e.target).html();
+    self.setValue({year: year, month: month, day: day});
+  }
+
+
+  /**
+   * Возвращает по дате номер TD в таблице
+   * Использование:
+   *  var td = table.getElementsByTagName('td')[getCellByDate(date)]
+  */
+  function getCellByDate(date) {
+    var dateDayOne = new Date(date.getFullYear(), date.getMonth(), 1);
+
+    return getDay(dateDayOne) + date.getDate() - 1;
+  }
+
+  /**
+   * получить номер дня недели для date, от 0(пн) до 6(вс)
+   * @param date
+   */
+  function getDay(date) { //
+    var day = date.getDay();
+    if (day == 0) day = 7;
+    return day - 1;
+  }
+
+  /**
+   * Генерирует таблицу для календаря заданного месяца/года
+   */
+  function renderCalendarTable(year, month) {
+
+    var d = new Date(year, month);
+
+    var table = ['<table class="calendar-table"><caption></caption><tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr><tr>'];
+
+    for (var i=0; i<getDay(d); i++) {
+      table.push('<td></td>');
+    }
+
+    // ячейки календаря с датами
+    while(d.getMonth() == month) {
+      table.push('<td class="date-cell">'+d.getDate()+'</td>');
+
+      if (getDay(d) % 7 == 6) { // вс, последний день - перевод строки
+        table.push('</tr><tr>');
+      }
+
+      d.setDate(d.getDate()+1);
+    }
+
+    // добить таблицу пустыми ячейками, если нужно
+    if (getDay(d) != 0) {
+      for (var i=getDay(d); i<7; i++) {
+        table.push('<td></td>');
+      }
+    }
+
+    table.push('</tr></table>');
+
+    return table.join('\n')
+  }
+
+}
+  
diff --git a/2-ui/5-widgets/6-widget-tasks/7-calendar/solution.view/index.html b/2-ui/5-widgets/6-widget-tasks/7-calendar/solution.view/index.html
new file mode 100755
index 00000000..357648ca
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/7-calendar/solution.view/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link type="text/css" rel="stylesheet" href="calendar.css">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <script src="calendar.js"></script>
+</head>
+<body>
+
+
+<button onclick="calendar.setValue(new Date())">setValue(сегодня)</button>
+
+<div id="calendar-holder"></div>
+<div id="value">тут будет выбранное значение (дата)</div>
+
+
+<script>
+  var calendar = new Calendar({ 
+    value: {year: 2012, month: 2 }
+  });
+  $('#calendar-holder').append(calendar.getElement());
+
+  $(calendar).on("select", function(e) {
+    $('#value').html(e.value+'');
+  });
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/6-widget-tasks/7-calendar/source.view/calendar-table.js b/2-ui/5-widgets/6-widget-tasks/7-calendar/source.view/calendar-table.js
new file mode 100755
index 00000000..027d29d4
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/7-calendar/source.view/calendar-table.js
@@ -0,0 +1,58 @@
+/**
+ * Возвращает по дате номер TD в таблице
+ * Использование:
+ *  var td = table.find('td').eq(getCellByDate(date))
+*/
+function getCellByDate(date) {
+  var date1 = new Date(date.getFullYear(), date.getMonth(), 1);
+
+  return getDay(date1) + date.getDate() - 1;
+}
+
+/**
+ * получить номер дня недели для date, от 0(пн) до 6(вс)
+ * @param date
+ */
+function getDay(date) { //
+  var day = date.getDay();
+  if (day == 0) day = 7;
+  return day - 1;
+}
+
+/**
+ * Генерирует таблицу для календаря заданного месяца/года
+ * @param year
+ * @param month
+ */
+function renderCalendarTable(year, month) {
+
+  var d = new Date(year, month);
+
+  var table = ['<table class="calendar-table"><tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr><tr>'];
+
+  for (var i=0; i<getDay(d); i++) {
+    table.push('<td></td>');
+  }
+
+  // ячейки календаря с датами
+  while(d.getMonth() == month) {
+    table.push('<td class="date-cell">'+d.getDate()+'</td>');
+
+    if (getDay(d) % 7 == 6) { // вс, последний день - перевод строки
+      table.push('</tr><tr>');
+    }
+
+    d.setDate(d.getDate()+1);
+  }
+
+  // добить таблицу пустыми ячейками, если нужно
+  if (getDay(d) != 0) {
+    for (var i=getDay(d); i<7; i++) {
+      table.push('<td></td>');
+    }
+  }
+
+  table.push('</tr></table>');
+
+  return table.join('\n')
+}
diff --git a/2-ui/5-widgets/6-widget-tasks/7-calendar/source.view/calendar.css b/2-ui/5-widgets/6-widget-tasks/7-calendar/source.view/calendar.css
new file mode 100755
index 00000000..3eb78e38
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/7-calendar/source.view/calendar.css
@@ -0,0 +1,28 @@
+
+.calendar-table {
+  border-collapse: collapse;
+}
+
+.calendar-table td, .calendar-table th {
+  border: 1px solid black;
+  padding: 3px;
+  text-align: center;
+}
+
+.calendar-table th {
+  font-weight: bold;
+  background-color: #E6E6E6;
+}
+
+.date-cell:hover {
+  background: #eee;
+  cursor: pointer;
+}
+
+.date-cell.selected {
+  background: #0F0;
+}
+
+.calendar-table caption {
+  text-align: center;
+}
diff --git a/2-ui/5-widgets/6-widget-tasks/7-calendar/source.view/calendar.js b/2-ui/5-widgets/6-widget-tasks/7-calendar/source.view/calendar.js
new file mode 100755
index 00000000..7f9ee236
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/7-calendar/source.view/calendar.js
@@ -0,0 +1,10 @@
+/**
+ * options:
+ *   year/month {number} год/месяц для календаря
+ *   value {Date} текущая выбранная дата
+*/
+function Calendar(options) {
+  var monthNames = 'Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь'.split(' ');
+
+  /* ваш код */
+}
diff --git a/2-ui/5-widgets/6-widget-tasks/7-calendar/source.view/index.html b/2-ui/5-widgets/6-widget-tasks/7-calendar/source.view/index.html
new file mode 100755
index 00000000..357648ca
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/7-calendar/source.view/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link type="text/css" rel="stylesheet" href="calendar.css">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <script src="calendar.js"></script>
+</head>
+<body>
+
+
+<button onclick="calendar.setValue(new Date())">setValue(сегодня)</button>
+
+<div id="calendar-holder"></div>
+<div id="value">тут будет выбранное значение (дата)</div>
+
+
+<script>
+  var calendar = new Calendar({ 
+    value: {year: 2012, month: 2 }
+  });
+  $('#calendar-holder').append(calendar.getElement());
+
+  $(calendar).on("select", function(e) {
+    $('#value').html(e.value+'');
+  });
+</script>
+
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/6-widget-tasks/7-calendar/task.md b/2-ui/5-widgets/6-widget-tasks/7-calendar/task.md
new file mode 100644
index 00000000..582463b3
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/7-calendar/task.md
@@ -0,0 +1,46 @@
+# Календарь
+
+[importance 5]
+
+Создайте календарь.
+
+Конструктор:
+
+```js
+var calendar = new Calendar({ 
+  year: 2012, // календарь для года 2012
+  month: 2  // месяц - март (нумерация с нуля!)
+});
+```
+
+События:
+<ul>
+<li>`select` -- при изменении даты.</li>
+</ul>
+Публичные методы:
+<ul>
+<li>`setValue(date, quiet)` -- устанавливает дату `date`. Если второй аргумент `true`, то событие не генерируется.</li>
+<li>`getElement()` -- возвращает DOM-элемент для компонента для вставки в документ. При первом вызове создаёт DOM.</li>
+</ul>
+
+Использование -- добавление в документ:
+
+```js
+var calendar = new Calendar({... });
+calendar.getElement().appendTo('body');
+```
+
+Использование -- подписка на изменение и вывод значения:
+
+```js
+calendar.on("select", function(e) {
+  $('#value').html( e.value+'' );
+})
+```
+
+Пример в действии:
+[iframe border=1 src="solution"]
+
+В исходный документ входит файл `calendar-table.js` со вспомогательными функциями, в частности, `renderCalendarTable(year, month)` генерирует таблицу.
+
+[edit task src="source"/]. 
diff --git a/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.md b/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.md
new file mode 100644
index 00000000..33000522
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.md
@@ -0,0 +1 @@
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.view/autocomplete-list.js b/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.view/autocomplete-list.js
new file mode 100755
index 00000000..f3c7a12d
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.view/autocomplete-list.js
@@ -0,0 +1,62 @@
+function AutocompleteList(provider) {
+  var elem;
+
+  var filteredResults;
+  var currentIndex = 0;
+
+  this.render = function() {
+    elem = $('<ol/>');
+    return elem;
+  };
+
+  this.update = function(value) {
+    filteredResults = provider.filterByStart(value);
+
+    if (filteredResults.length) {
+      elem.html( '<li>' + filteredResults.join('</li><li>') + '</li>' );
+    } else {
+      elem.empty();
+    }
+
+    currentIndex = 0; 
+    renderCurrent();
+
+    // это событие, как и всё обновление,
+    // может быть асинхронным (при получении списка с сервера)
+    $(this).triggerHandler({
+      type: 'update',
+      values: filteredResults
+    });
+
+  };
+
+  function renderCurrent() {
+    elem.children().eq(currentIndex).addClass('selected');
+  }
+
+  function clearCurrent() {   
+    elem.children().eq(currentIndex).removeClass('selected'); 
+  }
+
+  this.get = function() {
+    return filteredResults[currentIndex];
+  };
+
+  this.down = function() {
+    if (currentIndex == filteredResults.length - 1) return;
+    clearCurrent();
+    currentIndex++;
+    renderCurrent();
+  };
+
+  this.up = function() {
+    if (currentIndex == 0) return;
+    clearCurrent();
+    currentIndex--;
+    renderCurrent();
+  };
+
+  this.clear = function() {
+    this.update('');
+  };
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.view/autocomplete.css b/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.view/autocomplete.css
new file mode 100755
index 00000000..339f0c18
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.view/autocomplete.css
@@ -0,0 +1,51 @@
+
+.autocomplete ol {
+  display: none;
+  margin: 0;
+  padding: 3px;
+  border: 1px solid gray;
+  list-style: none;
+}
+
+.autocomplete input {
+  -moz-box-sizing: border-box;
+  
+  box-sizing: border-box;
+  margin: 0;
+  padding: 1px 0 1px 3px;
+
+  width: 100%;
+
+  border: 1px solid blue;
+  border-radius: 3px;
+  -webkit-appearance: none;
+
+  font-size: 16px;
+}
+
+.autocomplete input:focus {
+  outline: none;
+}
+
+.autocomplete.open input {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.autocomplete.open ol {
+  display: block;
+
+  background: white;
+  z-index: 10000;
+  position: relative;
+}
+
+.autocomplete {
+  width: 400px;
+  height: 20px;
+}
+
+.autocomplete ol .selected {
+  background: blue;
+}
diff --git a/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.view/autocomplete.js b/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.view/autocomplete.js
new file mode 100755
index 00000000..98810052
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.view/autocomplete.js
@@ -0,0 +1,103 @@
+function Autocomplete(options) {
+  var self = this;
+
+  var elem = options.elem;
+  
+  var input = $('input', elem);
+  var list;
+
+  input.on({
+    focus: onInputFocus,
+    blur: onInputBlur,
+    keydown: onInputKeyDown
+  });
+
+  var inputCheckTimer;
+
+  // ------------------
+
+  function onInputKeyDown(e) {
+    var KEY_ARROW_UP = 38;
+    var KEY_ARROW_RIGHT = 39;
+    var KEY_ARROW_DOWN = 40;
+    var KEY_ENTER = 13;
+    var KEY_ESC = 27;
+
+    switch(e.keyCode) {
+      case KEY_ARROW_UP:
+        list.up();
+        return false;
+        break;
+
+      case KEY_ARROW_RIGHT:
+        if (list.get()) {
+          self.setValue( list.get(), true );
+        }
+        break;
+
+      case KEY_ENTER:
+        self.setValue( list.get() || input.val() );
+        input.blur();
+        break;
+
+      case KEY_ESC:
+        list.clear();
+        break;
+
+      case KEY_ARROW_DOWN:
+        list.down();
+        return false;
+        break;
+    }
+
+  }
+
+  function initList() {
+    list = new AutocompleteList(options.provider);
+    list.render().appendTo(elem);
+    $(list).on('update', onListUpdate);
+  }
+
+  function onListUpdate(e) {
+    if (e.values.length) {
+      elem.addClass('open');
+    } else {
+      elem.removeClass('open');
+    }
+  }
+
+  function onInputFocus() {
+    var inputValue = input.val();
+    function checkInput() {
+      if (inputValue != input.val()) {
+
+        if (!list) {
+          initList();
+        } 
+
+        list.update(input.val());
+        inputValue = input.val();
+      }
+    }
+
+    inputCheckTimer = setInterval(checkInput, 30);
+  }
+
+  function onInputBlur() {
+    clearInterval(inputCheckTimer);
+    if (list) {
+      list.clear();
+    }
+  }
+
+  this.setValue = function(value, quiet) {
+    input.val(value);
+    if (!quiet) {
+      $(self).triggerHandler({
+        type: 'change',
+        value: value
+      });
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.view/filtering-list-provider.js b/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.view/filtering-list-provider.js
new file mode 100755
index 00000000..dfb42af4
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.view/filtering-list-provider.js
@@ -0,0 +1,20 @@
+function FilteringListProvider(strings) {
+
+  this.get = function(index) {
+    return strings[index];
+  };
+
+  this.filterByStart = function(stringStart) {
+    if (stringStart.length < 2) return [];
+
+    var stringStartLC = stringStart.toLowerCase();
+
+    return strings.filter(function(str) {
+      var strLC = str.toLowerCase();
+
+      return strLC.slice(0, stringStartLC.length) == stringStartLC && strLC != stringStartLC;
+    });
+  }
+
+
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.view/index.html b/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.view/index.html
new file mode 100755
index 00000000..542081a5
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/8-autocomplete/solution.view/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="autocomplete.css">
+  <script src="http://code.jquery.com/jquery-latest.js"></script>
+  <script src="autocomplete.js"></script>
+  <script src="filtering-list-provider.js"></script>
+  <script src="autocomplete-list.js"></script>
+</head>
+<body>
+  
+  <div class="autocomplete" id="search">
+    
+    <input type="text" autocomplete="off">
+    
+  </div>
+  
+  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam explicabo nostrum eum placeat aliquid voluptatem nihil modi libero nulla tempore dolore itaque accusamus distinctio veniam quae voluptatibus suscipit provident quas quaerat tempora sequi magnam.</div>
+
+
+  <script>
+    var dataProvider = new FilteringListProvider([ 
+        'Человек',
+        'Чело',
+        'Че Гевара',
+        'Яблоко',
+        'Ноутбук',
+        'Но Пасаран!'
+    ]);
+
+    var autocomplete = new Autocomplete({
+      elem: $('#search'),
+      provider: dataProvider
+    });
+
+    $(autocomplete).on('change', function(e) {
+      $('#search').next().html(e.value);
+    });
+
+  </script>
+</body>
+</html>
diff --git a/2-ui/5-widgets/6-widget-tasks/8-autocomplete/task.md b/2-ui/5-widgets/6-widget-tasks/8-autocomplete/task.md
new file mode 100644
index 00000000..165c73d4
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/8-autocomplete/task.md
@@ -0,0 +1,36 @@
+# Автокомплит
+
+[importance 4]
+
+Создайте `input` с автодополнением из списка.
+
+Список задаётся массивом, например:
+
+```js
+var list = [ 
+  'Человек',
+  'Че Гевара',
+  'Яблоко',
+  'Ноутбук',
+  'Но Пасаран!'
+];
+
+var autocomplete = new Autocomplete({ 
+  elem: $('#search'),
+  data: list
+});
+```
+
+Результат:
+[iframe src="solution" border=1]
+
+Требования:
+<ul>
+<li>Автодополнение начинается со 2го символа.</li>
+<li>Выпадающий список перекрывает документ, навигация по нему клавишами ↑ и ↓, выбор: → или Enter, скрытие списка Escape.</li>
+<li>Событие `change` при нажатии Enter.</li>
+</ul>
+
+Поддержка кликов мыши, а также получение списка с сервера не требуются, но могут быть добавлены в будущем. 
+
+Исходный документ -- пустой HTML, ну или [поиск Google с автокомплитом](http://google.com) ;)
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/solution.md b/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/solution.md
new file mode 100644
index 00000000..33000522
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/solution.md
@@ -0,0 +1 @@
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/solution.view/hoverintent.js b/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/solution.view/hoverintent.js
new file mode 100755
index 00000000..d00d5c40
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/solution.view/hoverintent.js
@@ -0,0 +1,62 @@
+/**
+ * Taken from jQuery UI accordion and fixed, special hoverintent event
+ * http://benalman.com/news/2010/03/jquery-special-events/
+ */
+!function($) {
+
+
+        var cfg = {
+                sensitivity: 9,
+                interval: 50
+        };
+
+
+        $.event.special.hoverintent = {
+                setup: function() {
+                        $(this).on("mouseover", handler);
+                },
+
+                teardown: function() {
+                        $(this).on("mouseover", handler);
+                },
+
+                cfg: cfg
+        };
+
+        function handler(event) {
+
+                var self = this,
+                        args = arguments,
+                        target = $(event.target),
+                        cX, cY, pX, pY;
+
+                function track(event) {
+                        cX = event.pageX;
+                        cY = event.pageY;
+                };
+                pX = event.pageX;
+                pY = event.pageY;
+
+                function clear() {
+                        target.off("mousemove", track).off("mouseout", clear);
+                        clearTimeout(timeout);
+                }
+
+                function handler() {
+                        if((Math.abs(pX - cX) + Math.abs(pY - cY)) < cfg.sensitivity) {
+                                clear();
+                                event.type = "hoverintent";
+                                jQuery.event.simulate("hoverintent", event.target, $.event.fix(event), true);
+                        } else {
+                                pX = cX;
+                                pY = cY;
+                                timeout = setTimeout(handler, cfg.interval);
+                        }
+                }
+                var timeout = setTimeout(handler, cfg.interval);
+                target.mousemove(track).mouseout(clear);
+                return true;
+        }
+
+
+}(jQuery);
diff --git a/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/solution.view/index.html b/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/solution.view/index.html
new file mode 100755
index 00000000..2d87849e
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/solution.view/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="menu.css">
+  <script src="http://code.jquery.com/jquery-latest.js"></script>
+  <script src="hoverintent.js"></script>
+  <script src="menu.js"></script>
+</head>
+<body>
+  
+  <!--   Разрешить вложенные меню -->
+  <div class="menu" id="menu">
+    <a href="#" class="title">Моё меню</a>
+    <ol>
+      <li class="has-children">
+        <a href="#a1">Элемент 1</a>
+        <ol>
+          <li><a href="#a1.1">Элемент 1.1</a></li>
+          <li class="has-children">  
+            <a href="#a1.2">Элемент 1.2</a>
+            <ol>
+              <li><a href="#a1.2.1">Элемент 1.2.1</a></li>
+              <li><a href="#a1.2.2">Элемент 1.2.2</a></li>
+            </ol>
+          </li>
+          <li><a href="#a1.3">Элемент 1.3</a></li>
+        </ol>
+      </li>
+      <li><a href="#a2">Элемент 2</a></li>
+      <li class="has-children">
+        <a href="#a3">Элемент 3</a>
+        <ol>
+          <li><a href="#a3.1">Элемент 3.1</a></li>
+          <li><a href="#a3.2">Элемент 3.2</a></li>
+          <li><a href="#a3.3">Элемент 3.3</a></li>
+        </ol>
+      </li>
+      <li><a href="#a4">Элемент 4</a></li>
+      <li><a href="#a5">Элемент 5</a></li>
+    </ol>
+    
+  </div>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor eos.
+  
+  <script>
+
+    var menu = new Menu({
+      elem: $('#menu')
+    });
+
+    $(menu).on("select", function(e) {
+      if (!e.value) return;
+      alert(e.value);
+    });
+
+
+  </script>
+  
+</body>
+</html>
diff --git a/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/solution.view/menu.css b/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/solution.view/menu.css
new file mode 100755
index 00000000..da22a577
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/solution.view/menu.css
@@ -0,0 +1,54 @@
+
+.menu::before {
+  content: '☞';
+  font-size: 16px;
+  float: left;
+}
+
+
+.menu.open::before {
+  content: '☟';
+}
+
+.menu a {
+  text-decoration: none;
+  color: black;
+  display: block;
+}
+
+.menu > a {
+  display: inline;
+}
+
+.menu a {
+  padding: 3px 5px;
+  white-space: nowrap;
+}
+
+li.active > a {
+  background: blue;
+  color: white;
+}
+
+.menu ol {
+  margin: 0;
+  padding: 3px 0;
+  list-style: none;
+  display: none;
+  background: #eee;
+  border: 1px solid black;
+  position: absolute;
+}
+
+.menu.open > ol {
+  display: block;
+  margin-left: 16px;
+}
+
+.menu li.has-children > a::after {
+  content: ' >';
+}
+
+.menu li.active > ol {
+  display: block;
+}
diff --git a/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/solution.view/menu.js b/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/solution.view/menu.js
new file mode 100755
index 00000000..f776d4a2
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/solution.view/menu.js
@@ -0,0 +1,131 @@
+function Menu(options) {
+  var elem = options.elem;
+  var self = this;
+
+  var activeLi;
+
+  elem.on('click', 'a.title', onTitleClick);
+
+  // item clicks are all inside ol
+  elem.on('click', 'ol a', onLiClick);
+
+  // I use "a" here instead of LI, because hover on LI also works if going over it's child container OL
+  // child container may have paddings etc, so the click may happen on that OL, outside of this item
+  elem.on('hoverintent', 'ol a', onLiHoverIntent);
+
+  // ----------------------
+
+  function onLiClick(e) {
+    
+    close();
+
+    var li = $(e.currentTarget).closest('li');
+
+    $(self).triggerHandler({
+      type: 'select',
+      value: getLiValue(li)
+    });
+
+    return false;    
+  }
+
+  function onTitleClick() {
+    if (elem.hasClass('open')) {
+      close();
+    } else {
+      open();
+    }
+  }
+
+  function onLiHoverIntent(e) {
+    var li = $(this).closest('li');
+
+    if (isActiveLi(li)) return;
+
+    activateLi(li);
+    openChildren();
+  }
+
+  // ----------------------
+
+  function isActiveLi(li) {
+    if (activeLi && activeLi[0] == li[0]) return true;
+    return false;
+  }
+
+
+  function close(argument) {
+    
+    elem.removeClass('open');
+
+    if (activeLi) {
+      activeLi.parentsUntil(elem).andSelf().removeClass('active');
+      activeLi = null;
+    }
+
+    $(document).off('.menu-nested');
+  }
+
+  function getLiValue(li) {
+    if (!li.length) return null;
+    return li.children('a').attr('href').slice(2);
+  }
+
+  function open() {
+
+    elem.addClass('open');
+
+    // TODO: close menu on document click outside of it
+    $(document).on('click.menu-nested', function(e) {
+      if ( $(e.target).closest(elem).length ) return;
+      close();
+    });
+  }
+
+  function getParentLi(li) {
+    return li.parent().parent();
+  }
+
+  function activateLi(li) {
+
+    if (activeLi && getParentLi(li)[0] != activeLi[0]) { // if (new li is not child of activeLi)
+      // not a child item, then need to close currently active ones
+      // collapse parents of last active until container of new element
+      collapseActiveUntil(li);
+    }
+      
+    activeLi = li;
+    activeLi.addClass("active");
+  }
+
+  function collapseActiveUntil(li) {
+
+    var el = activeLi;
+    for(;;) {
+      el.removeClass('active');
+      if (el[0].parentNode == li[0].parentNode) break;
+      el = getParentLi(el);
+    }
+
+  }
+
+  function openChildren() {        
+    var subcontainer = activeLi.children('ol');
+    if (!subcontainer.length) return;
+
+    // show children
+    
+    var left = activeLi.width(); // to the right of the parent 
+    var top = activeLi.position().top; // at same height as current parent
+
+    // lift it up, so that first subchild will be aligned with the parent
+    top -= subcontainer.children('li').position().top;
+    top -= subcontainer.prop('clientTop')
+
+    subcontainer.css({
+      left: left,
+      top: top
+    })
+  }
+
+}
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/task.md b/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/task.md
new file mode 100644
index 00000000..7a5698d5
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/9-hover-menu-onclick/task.md
@@ -0,0 +1,12 @@
+# Вложенное меню с выпаданием по клику
+
+[importance 4]
+
+Создайте меню с выпаданием по клику и раскрытием внутренних пунктов при наведении.
+
+Демо:
+[iframe src="solution" height=200 border=1]
+
+При выборе -- событие `select` с выбранным значением.
+
+HTML/CSS -- на ваш вкус.
\ No newline at end of file
diff --git a/2-ui/5-widgets/6-widget-tasks/article.md b/2-ui/5-widgets/6-widget-tasks/article.md
new file mode 100644
index 00000000..9ce2d312
--- /dev/null
+++ b/2-ui/5-widgets/6-widget-tasks/article.md
@@ -0,0 +1,2 @@
+# Практика, практика, практика!
+
diff --git a/2-ui/5-widgets/7-what-next/article.md b/2-ui/5-widgets/7-what-next/article.md
new file mode 100644
index 00000000..c4c730f6
--- /dev/null
+++ b/2-ui/5-widgets/7-what-next/article.md
@@ -0,0 +1,21 @@
+# Что изучать дальше
+
+Если вы прочитали весь учебник и сделали задачи, то на текущий момент вы обладаете важнейшими фундаментальными знаниями JavaScript и квалификацией, чтобы создавать графические компоненты, достойные современного сайта.
+
+Ещё предстоит изучить:
+<ul>
+<li>Работу с окнами и фреймами.</li>
+<li>Регулярные выражения.</li>
+<li>JavaScript-фреймворк (jQuery?)</li>
+<li>Оптимизацию.</li>
+<li>AJAX и COMET.</li>
+<li>HTML5, возможности современных браузеров.</li>
+</ul>
+
+Кое-что из этого вы можете узнать из дополнительных глав учебника. Многое -- из Open Source. 
+
+Обратите внимание на раздел [](/books).
+
+Присоединитесь к какому-нибудь интересному проекту и сделайте что-то хорошее. Разберитесь в том, как оно работает. Пофиксите пару багов. 
+
+Успехов вам!
\ No newline at end of file
diff --git a/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/solution.md b/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/solution.md
new file mode 100644
index 00000000..33000522
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/solution.md
@@ -0,0 +1 @@
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/solution.view/dateselector.js b/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/solution.view/dateselector.js
new file mode 100755
index 00000000..bf5e6699
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/solution.view/dateselector.js
@@ -0,0 +1,104 @@
+/**
+ * options:
+ * yearFrom {number} начальный год в селекторе
+ * yearTo {number} конечный год в селекторе
+ * value {Date} текущая выбранная дата
+*/
+function DateSelector(options) {
+  var self = this;
+
+  var monthNames = 'января февраля марта апреля мая июня июля августа сентября октября ноября декабря'.split(' ');
+
+  var value = options.value;
+
+  var elem;
+  var yearSelect, monthSelect, daySelect;
+
+  function render() {
+    var tmpl = _.template( options.template );
+    elem = $('<div class="date-selector"/>').html(tmpl({
+      yearFrom: options.yearFrom,
+      yearTo: options.yearTo,
+      dayTo: getLastDayOfMonth(value.getFullYear(), value.getMonth()),
+      monthNames: monthNames
+    }));
+    
+    yearSelect = elem.find('.year');
+    monthSelect = elem.find('.month');
+    daySelect = elem.find('.day');
+
+    elem.on('change', onChange); // обычно оно не всплывает, но jQuery эмулирует всплытие
+    self.setValue(value, true);
+  }
+
+  this.getValue = function() {
+    return value;
+  };
+
+  this.setValue = function(newValue, quiet) {
+    value = newValue;
+
+    yearSelect.val(value.getFullYear());
+    monthSelect.val(value.getMonth());
+    daySelect.val(value.getDate());
+
+    if (!quiet) {
+      $(self).triggerHandler({
+        type: "select", 
+        value: value
+      });
+    }
+  };
+
+  this.getElement = function() {
+    if (!elem) render();
+    return elem;
+  };
+
+  function onChange(e) {
+    
+    var selectType = e.target.className;
+
+    if (selectType == "month" || selectType == "year") {
+      // поправить день с учетом месяца и, возможно, високосного года
+      adjustDayOptions(+yearSelect.val(), +monthSelect.val());
+    }
+
+    readValue(); // для простоты -- получим значения из всех селектов
+    
+    $(self).triggerHandler({
+      type: "select", 
+      value: value
+    });
+  }
+
+  function readValue() {
+      // если я сделаю сначала value.setMonth(),
+      // то может получится некорректная дата типа 31 марта -> 31 февраля,
+      // которая автоскорректируется в 2 марта, т.е месяц не поставится.
+      // поэтому сначала именно setDate, и так далее.
+      value.setDate(daySelect.val());
+      value.setMonth(monthSelect.val());
+      value.setFullYear(yearSelect.val());    
+  }
+
+  function getLastDayOfMonth(year, month) {
+    var date = new Date(year, month+1, 0);
+    return date.getDate();
+  }
+
+  function adjustDayOptions(year, month) {
+    var maxDay = getLastDayOfMonth(year, month);
+
+    // укоротить селект, если дней стало меньше
+    daySelect.children().filter(function() {
+      return this.value > maxDay;
+    }).remove();
+
+    // добавить дни, если новый месяц дольше
+    for(var i = +daySelect.last().val(); i <= maxDay; i++) {
+      daySelect.append(new Option(i, i));
+    }
+  }
+
+}
diff --git a/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/solution.view/index.html b/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/solution.view/index.html
new file mode 100755
index 00000000..c13d582c
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/solution.view/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
+  <script src="dateselector.js"></script>
+</head>
+<body>
+
+<script type="text/template" id="date-selector-template">
+  <select class="year">
+    <% for(var year = yearFrom; year <= yearTo; year++) { %>
+      <option value="<%=year%>"><%=year%></option>
+    <% } %>
+  </select>
+  <select class="month">
+    <% for(var month = 0; month <= 11; month++) { %>
+      <option value="<%=month%>"><%=monthNames[month]%></option>
+    <% } %>
+  </select>
+  <select class="day">
+    <% for(var day = 1; day <= dayTo; day++) { %>
+      <option value="<%=day%>"><%=day%></option>
+    <% } %>
+  </select>
+</script>
+
+<div id="selector-holder"></div>
+<div id="value">тут будет значение даты при выборе</div>
+
+<script>
+  var dateSelector = new DateSelector({ 
+    yearFrom: 2010, 
+    yearTo: 2020, 
+    value: new Date(2012, 2, 31), // 31 марта 2012
+    template: $('#date-selector-template').html().trim()
+  });
+
+  $('#selector-holder').append(dateSelector.getElement());
+
+  $(dateSelector).on("select", function(e) {
+    $('#value').html( e.value + '' );
+  });
+</script>
+
+<button onclick="dateSelector.setValue(new Date)">setValue(сегодня)</button>
+
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/source.view/dateselector.js b/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/source.view/dateselector.js
new file mode 100755
index 00000000..cdd868f0
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/source.view/dateselector.js
@@ -0,0 +1,12 @@
+/**
+ * options:
+ * yearFrom {number} начальный год в селекторе
+ * yearTo {number} конечный год в селекторе
+ * value {Date} текущая выбранная дата
+*/
+function DateSelector(options) {
+  var self = this;
+
+
+  /* ваш код */
+}
diff --git a/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/source.view/index.html b/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/source.view/index.html
new file mode 100755
index 00000000..1889d73a
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/source.view/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
+  <script src="dateselector.js"></script>
+</head>
+<body>
+
+<script type="text/template" id="date-selector-template">
+  /* шаблон для виджета */
+</script>
+
+<div id="selector-holder"></div>
+<div id="value">тут будет значение даты при выборе</div>
+
+<script>
+  var dateSelector = new DateSelector({ 
+    yearFrom: 2010, 
+    yearTo: 2020, 
+    value: new Date(2012, 2, 31), // 31 марта 2012
+    template: $('#date-selector-template').html()
+  });
+
+  $('#selector-holder').append(dateSelector.getElement());
+
+  $(dateSelector).on("select", function(e) {
+    $('#value').html( e.value + '' );
+  });
+</script>
+
+<button onclick="dateSelector.setValue(new Date)">setValue(сегодня)</button>
+
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/task.md b/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/task.md
new file mode 100644
index 00000000..f404bc93
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/1-date-selector/task.md
@@ -0,0 +1,46 @@
+# Селектор даты
+
+[importance 5]
+
+Создайте тройной селектор даты, который выступает как единый компонент. То есть, можно подписываться на `"select"` сразу у этого компонента.
+
+Конструктор:
+
+```js
+var dateSelector = new DateSelector({ 
+  yearFrom: 2010,  // начальный год в селекторе
+  yearTo: 2020,    // конечный год в селекторе
+  value: new Date(2012,2,31) // текущая выбранная дата
+});
+```
+
+События:
+<ul>
+<li>`select` -- при изменении даты.</li>
+</ul>
+Методы:
+<ul>
+<li>`setValue(date, quiet)` -- устанавливает дату `date`. Если второй аргумент `true`, то событие не генерируется.</li>
+<li>`getElement()` -- возвращает DOM-элемент для компоненты для вставки в документ.</li>
+</ul>
+
+Использование - добавление в документ:
+
+```js
+dateSelector.getElement().appendTo('body');
+```
+
+Использование - подписка на изменение и вывод значения:
+
+```js
+$(dateSelector).on("select", function(e) {
+  $('#value').html(e.value);
+});
+```
+
+Пример в действии:
+[iframe border=1 src="solution"]
+
+[edit task src="source"/]
+
+P.S. При выборе месяца дни должны подстраиваться под него. Чтобы не было доступно 31 февраля.
\ No newline at end of file
diff --git a/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/index.html b/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/index.html
new file mode 100755
index 00000000..8ed42eab
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <script src="http://code.jquery.com/jquery.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
+    <link type="text/css" rel="stylesheet" href="window.css" />
+    <style>
+      html, body {
+        padding: 0;
+        margin: 0;
+      }
+    </style>
+    <script src="draggableWindow.js"></script>
+</head>
+<body style="height:2000px">
+
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+
+<script type="text/template" id="draggable-window-template">
+<div class="window-title"><%=title%></div>
+<div class="window-content"></div>
+<form class="window-message-form">
+<input type="text" name="message" class="window-message-text"><input type="submit" name="submit" class="window-message-submit" value="Послать">
+</form>
+</script>
+
+<script>
+
+var win = new DraggableWindow({
+  title: "Чат с Петей",
+  template: $('#draggable-window-template').html()
+});
+
+win.getElement().appendTo('body');
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/solution.md b/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/solution.md
new file mode 100644
index 00000000..94a831c6
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/solution.md
@@ -0,0 +1,11 @@
+# Подсказки
+
+<ul>
+<li>Так как высота и ширина окна известны, вёрстка внутри может содержать точные пиксельные размеры.</li>
+<li>При обработке события `document.onmousemove`, мы вычисляем новые координаты `left/top` и смотрим, вылезает ли окно за границы. Если да -- меняем `left/top` на максимально возможные, чтобы не вылезало.</li>
+<li>На форме вешаем обработчик `onsubmit`, т.к. иначе Enter в поле отправить её на сервер.</li>
+</ul>
+
+# Решение
+
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/solution.view/draggableWindow.js b/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/solution.view/draggableWindow.js
new file mode 100755
index 00000000..9c3c81ea
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/solution.view/draggableWindow.js
@@ -0,0 +1,126 @@
+// если начать перенос и передвинуть мышь максимально вверх -- верхний край окна не должен вылетать за край страницы.
+// в другие стороны
+
+// чтобы даже при резких движениях мыши -- окно прилипало к краю но не вылезало за край
+// исключение -- максимальная нижняя позиция окна -- это когда только заголовок виден
+
+// позиция мыши смещается
+function DraggableWindow(options) {
+  var self = this;
+
+  var title = options.title;
+  var template = typeof options.template == 'function' ?  // компиляция, если строка
+    options.template : _.template(options.template);
+
+  var elem, contentElem;
+
+  var mouseDownShift;
+
+  function render() {
+    elem = $('<div/>', {
+      "class": "window",
+      html: template({
+        title: title
+      })
+    });
+
+    $('form', elem).on('submit', onSubmit);
+
+    titleElem = elem.find('.window-title');
+
+    titleElem.on('selectstart dragstart', false); 
+    titleElem.on('mousedown', onTitleMouseDown); 
+
+    contentElem = elem.find('.window-content'); // = children[1]
+  }
+
+  this.getElement = function() {
+    if (!elem) render();
+    return elem;
+  }
+
+  function onTitleMouseDown(e) {  
+    startDrag(e.pageX, e.pageY);  
+    return false;
+  };
+
+  function startDrag(mouseDownX, mouseDownY) {
+    // запомнить координаты нажатия
+    var coords = elem.offset();
+    mouseDownShift = { 
+      x: mouseDownX - coords.left, 
+      y: mouseDownY - coords.top
+    };
+
+    // двигать
+    $(document).on({
+      'mousemove.draggablewindow': onDocumentMouseMove,
+      'mouseup.draggablewindow': onDocumentMouseUp
+    });
+
+    elem.addClass('window-moving');
+  }
+
+  function onDocumentMouseUp() {
+    $(document).off('.draggablewindow');
+    elem.removeClass('window-moving');
+  }
+
+  function onDocumentMouseMove(e) {
+    moveWindowAtCursor(e.pageX, e.pageY);
+  }
+
+  function moveWindowAtCursor(pageX, pageY) {
+    var newLeft = pageX - mouseDownShift.x;
+    var newTop = pageY - mouseDownShift.y;
+
+    // проверим, не вылезем ли мы за границы экрана
+    var windowLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    var windowTop = window.pageYOffset || document.documentElement.scrollTop;
+    var windowRight = windowLeft + document.documentElement.clientWidth;
+    var windowBottom = windowTop + document.documentElement.clientHeight;
+
+    // тут не if..else, а if т.к., возможно, обе координаты надо поправить
+    if (newLeft < windowLeft) {
+      newLeft = windowLeft;
+    }
+    if (newLeft > windowRight - elem.outerWidth()) {
+      newLeft = windowRight - elem.outerWidth(); // внешняя ширина с учетом рамки внешней
+    }
+    if (newTop < windowTop) {
+      newTop = windowTop;
+    }
+    if (newTop > windowBottom - titleElem.outerHeight()) {
+      newTop = windowBottom - titleElem.outerHeight();
+      // внизу заголовок будет немного залезать за край, т.к. нужно мерять вместе с рамкой верхней на самом деле
+      // но здесь это не страшно
+    }
+
+    elem.css({
+      left: newLeft,
+      top: newTop
+    });
+  };
+
+  function onSubmit(e) {
+    // принять события, совершить обработку события, связанную с формой
+    var form = e.currentTarget;
+    var value = form.elements.message.value;
+    form.elements.message.value = '';
+    if (value) {
+      submit(value); // логика по отправке сообщения
+    }
+    return false;
+  }
+
+  function submit(message) {
+    // добавить
+    var newMessageElem = $('<div>', {text: message }).appendTo(contentElem);
+
+    // прокрутить к новому сообщению
+    contentElem.prop('scrollTop', 999999999);
+  }
+
+
+}
+
diff --git a/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/solution.view/index.html b/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/solution.view/index.html
new file mode 100755
index 00000000..8ed42eab
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/solution.view/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <script src="http://code.jquery.com/jquery.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
+    <link type="text/css" rel="stylesheet" href="window.css" />
+    <style>
+      html, body {
+        padding: 0;
+        margin: 0;
+      }
+    </style>
+    <script src="draggableWindow.js"></script>
+</head>
+<body style="height:2000px">
+
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+
+<script type="text/template" id="draggable-window-template">
+<div class="window-title"><%=title%></div>
+<div class="window-content"></div>
+<form class="window-message-form">
+<input type="text" name="message" class="window-message-text"><input type="submit" name="submit" class="window-message-submit" value="Послать">
+</form>
+</script>
+
+<script>
+
+var win = new DraggableWindow({
+  title: "Чат с Петей",
+  template: $('#draggable-window-template').html()
+});
+
+win.getElement().appendTo('body');
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/solution.view/window.css b/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/solution.view/window.css
new file mode 100755
index 00000000..3f5fbf0d
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/solution.view/window.css
@@ -0,0 +1,56 @@
+
+  .window {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 10;
+    
+    width: 200px;
+    height: 300px;
+    border: 2px #ADD8E6 groove;
+    /* раскомментировать для проверки, вылезает ли внешняя рамка за экран
+    border: 2px red solid;
+    */
+    background: white;
+  }
+
+  .window-title {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+
+    background-color: #4169E1;
+    color: white;
+    text-align:center;        
+    cursor: pointer;
+  }
+
+  .window-moving .window-title {
+    cursor: move;
+  }
+
+  .window-message-form {
+    position: absolute;
+    bottom: 0;
+    height: 30px;
+    line-height: 30px;
+    width: 100%;
+
+    background: #ADD8E6;
+  }
+
+  .window-content {
+    height: 240px;
+    padding: 3px;
+    overflow-y: auto;
+  }
+
+  .window-message-text {
+    width: 120px;
+  }
+
+  .window-message-submit {
+    width: 70px;
+    margin-left: 2px;
+  }
+
diff --git a/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/source.view/index.html b/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/source.view/index.html
new file mode 100755
index 00000000..9b1cf62b
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/source.view/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <script src="http://code.jquery.com/jquery.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
+    <style>
+      html, body {
+        padding: 0;
+        margin: 0;
+      }
+
+      /* ваши стили */
+
+    </style>
+</head>
+<body>
+
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+
+<script type="text/template" id="draggable-window-template">
+  /* шаблон для окна */
+</script>
+
+<script>
+
+// если начать перенос и передвинуть мышь максимально вверх -- верхний край окна не должен вылетать за край страницы.
+// в другие стороны
+
+// чтобы даже при резких движениях мыши -- окно прилипало к краю но не вылезало за край
+// исключение -- максимальная нижняя позиция окна -- это когда только заголовок виден
+
+// позиция мыши смещается
+function DraggableWindow(options) {
+  var self = this;
+
+  /* ваш код */
+}
+
+var win = new DraggableWindow({
+  title: "Чат с Петей",
+  template: $('#draggable-window-template').html()
+});
+
+win.getElement().appendTo('body');
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/task.md b/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/task.md
new file mode 100644
index 00000000..0ae981e0
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/2-draggable-windows/task.md
@@ -0,0 +1,26 @@
+# Переносимые окна
+
+[importance 5]
+
+Создайте виджет окна для чата.
+
+Окно -- это `DIV`, который можно переносить, взявшись за заголовок. По нажатию на "Послать" данные передаются в содержание окна. 
+
+[demo src="index.html"/]
+
+Синтаксис:
+
+```js
+new DraggableWindow({
+  title: "Чат с Петей",
+  template: HTML-шаблон окна
+});
+```
+
+<ul>
+<li>Возможно появление прокрутки внутри окна, если сообщений много. Сообщения не должны вылезать вовне окна.</li>
+<li>Окно нельзя вытащить за пределы экрана, даже резкими движениями мыши. Влево-вправо-вверх оно вообще не должно вылезать за границу, а вниз -- только до заголовка. Попробуйте перемещать его в демо, чтобы увидеть.</li>
+<li>Для задания DOM-структуры окна используйте шаблон. Может быть создано несколько окон.</li>
+</ul>
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/solution.md b/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/solution.md
new file mode 100644
index 00000000..62feb093
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Открыть решение в новом окне[/edit]
diff --git a/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/solution.view/draggableWindow.js b/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/solution.view/draggableWindow.js
new file mode 100755
index 00000000..7f1997c0
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/solution.view/draggableWindow.js
@@ -0,0 +1,142 @@
+// если начать перенос и передвинуть мышь максимально вверх -- верхний край окна не должен вылетать за край страницы.
+// в другие стороны
+
+// чтобы даже при резких движениях мыши -- окно прилипало к краю но не вылезало за край
+// исключение -- максимальная нижняя позиция окна -- это когда только заголовок виден
+
+// позиция мыши смещается
+function DraggableWindow(options) {
+  var self = this;
+
+  var title = options.title;
+  var template = typeof options.template == 'function' ?  // компиляция, если строка
+    options.template : _.template(options.template);
+
+  var elem, contentElem;
+
+  var mouseDownShift;
+
+  function render() {
+    elem = $('<div tabindex="0" class="window"/>').html(template({
+      title: title
+    }));
+
+    $('form', elem).on('submit', onSubmit);
+
+    titleElem = elem.find('.window-title');
+
+    titleElem.on('selectstart dragstart', false); 
+    titleElem.on('mousedown', onTitleMouseDown); 
+
+    contentElem = elem.find('.window-content'); // = children[1]
+    elem.on('focusin', onFocus);
+  }
+
+  this.getElement = function() {
+    if (!elem) render();
+    return elem;
+  }
+
+  function onFocus() {
+    $(self).triggerHandler({ type: 'focus' });
+  }
+
+  function onTitleMouseDown(e) {  
+    startDrag(e.pageX, e.pageY);  
+
+    setTimeout(onFocus, 0);
+    return false; // returning false prevents onfocus
+  };
+
+  function startDrag(mouseDownX, mouseDownY) {
+    // запомнить координаты нажатия
+    var coords = elem.offset();
+    mouseDownShift = { 
+      x: mouseDownX - coords.left, 
+      y: mouseDownY - coords.top
+    };
+
+    // двигать
+    $(document).on({
+      'mousemove.draggablewindow': onDocumentMouseMove,
+      'mouseup.draggablewindow': onDocumentMouseUp
+    });
+
+    elem.addClass('window-moving');
+  }
+
+  function onDocumentMouseUp() {
+    $(document).off('.draggablewindow');
+    elem.removeClass('window-moving');
+  }
+
+  function onDocumentMouseMove(e) {
+    moveWindowAtCursor(e.pageX, e.pageY);
+  }
+
+  function moveWindowAtCursor(pageX, pageY) {
+    var newLeft = pageX - mouseDownShift.x;
+    var newTop = pageY - mouseDownShift.y;
+
+    // проверим, не вылезем ли мы за границы экрана
+    var windowLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    var windowTop = window.pageYOffset || document.documentElement.scrollTop;
+    var windowRight = windowLeft + document.documentElement.clientWidth;
+    var windowBottom = windowTop + document.documentElement.clientHeight;
+
+    // тут не if..else, а if т.к., возможно, обе координаты надо поправить
+    if (newLeft < windowLeft) {
+      newLeft = windowLeft;
+    }
+    if (newLeft > windowRight - elem.outerWidth()) {
+      newLeft = windowRight - elem.outerWidth(); // внешняя ширина с учетом рамки внешней
+    }
+    if (newTop < windowTop) {
+      newTop = windowTop;
+    }
+    if (newTop > windowBottom - titleElem.outerHeight()) {
+      newTop = windowBottom - titleElem.outerHeight();
+      // внизу заголовок будет немного залезать за край, т.к. нужно мерять вместе с рамкой верхней на самом деле
+      // но здесь это не страшно
+    }
+
+    elem.css({
+      left: newLeft,
+      top: newTop
+    });
+  };
+
+  function onSubmit(e) {
+    // принять события, совершить обработку события, связанную с формой
+    var form = e.currentTarget;
+    var value = form.elements.message.value;
+    form.elements.message.value = '';
+    if (value) {
+      submit(value); // логика по отправке сообщения
+    }
+    return false;
+  }
+
+  function submit(message) {
+    // добавить
+    var newMessageElem = $('<div>', {text: message }).appendTo(contentElem);
+
+    // прокрутить к новому сообщению
+    contentElem.prop('scrollTop', 999999999);
+  }
+
+
+  this.setZIndex = function(zIndex) {
+    elem.css('z-index', zIndex);
+  };
+
+  this.getZIndex = function() {
+    return +elem.css('z-index') || 0;
+  };
+
+  this.toString = function() {
+    return "[Window " + options.title + " " + elem.css('z-index') + "]";
+  }
+
+}
+
diff --git a/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/solution.view/index.html b/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/solution.view/index.html
new file mode 100755
index 00000000..c2cf0f0f
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/solution.view/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <script src="http://code.jquery.com/jquery.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
+    <link type="text/css" rel="stylesheet" href="window.css" />
+    <style>
+      html, body {
+        padding: 0;
+        margin: 0;
+      }
+    </style>
+    <script src="draggableWindow.js"></script>
+    <script src="windowManager.js"></script>
+</head>
+<body>
+
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
+
+<script type="text/template" id="draggable-window-template">
+<div class="window-title"><%=title%></div>
+<div class="window-content"></div>
+<form class="window-message-form">
+<input type="text" name="message" class="window-message-text"><input type="submit" name="submit" class="window-message-submit" value="Послать">
+</form>
+</script>
+
+<script>
+
+
+WindowManager.setTemplate( $('#draggable-window-template').html().trim() );
+
+WindowManager.addWindow({
+  title: "Чат с Петей"
+});
+
+WindowManager.addWindow({
+  title: "Чат с Машей"
+});
+
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/solution.view/window.css b/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/solution.view/window.css
new file mode 100755
index 00000000..3f5fbf0d
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/solution.view/window.css
@@ -0,0 +1,56 @@
+
+  .window {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 10;
+    
+    width: 200px;
+    height: 300px;
+    border: 2px #ADD8E6 groove;
+    /* раскомментировать для проверки, вылезает ли внешняя рамка за экран
+    border: 2px red solid;
+    */
+    background: white;
+  }
+
+  .window-title {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+
+    background-color: #4169E1;
+    color: white;
+    text-align:center;        
+    cursor: pointer;
+  }
+
+  .window-moving .window-title {
+    cursor: move;
+  }
+
+  .window-message-form {
+    position: absolute;
+    bottom: 0;
+    height: 30px;
+    line-height: 30px;
+    width: 100%;
+
+    background: #ADD8E6;
+  }
+
+  .window-content {
+    height: 240px;
+    padding: 3px;
+    overflow-y: auto;
+  }
+
+  .window-message-text {
+    width: 120px;
+  }
+
+  .window-message-submit {
+    width: 70px;
+    margin-left: 2px;
+  }
+
diff --git a/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/solution.view/windowManager.js b/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/solution.view/windowManager.js
new file mode 100755
index 00000000..83ebfb60
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/solution.view/windowManager.js
@@ -0,0 +1,52 @@
+var WindowManager = new function() {
+
+  var windows = [];
+  var activeWindow;
+
+  var template; 
+
+  this.setTemplate = function(newTemplate) {
+    template = _.template(newTemplate);
+  };
+
+  this.addWindow = function(options) {
+
+    var win = new DraggableWindow({
+      title: options.title,
+      template: template
+    });
+
+    $(win).on("focus", function() {
+      activateWindow(this);
+    });
+
+    win.getElement().appendTo('body');
+
+    windows.push(win);
+    activateWindow(win);
+
+    return win;
+  }
+
+  function activateWindow(win) {
+    if (activeWindow == win) return;
+    activeWindow = win;
+    sortWindows();
+  }
+
+  /**
+   * пересортировать окна
+   */
+  function sortWindows() {
+    windows.sort(function(a, b) {
+      if (activeWindow == a) return 1; // активное окно больше всех
+      if (activeWindow == b) return -1; // активное окно больше всех
+      return a.getZIndex() - b.getZIndex(); // порядок среди остальных - оставляем "как есть"
+    });
+    for(var i=0; i<windows.length; i++) {
+      windows[i].setZIndex(i+1);
+    }
+
+  }
+
+}
diff --git a/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/task.md b/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/task.md
new file mode 100644
index 00000000..85652f58
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/3-window-manager/task.md
@@ -0,0 +1,35 @@
+# Менеджер окон
+
+[importance 5]
+
+Эта задача является продолжением задачи [](/task/draggable-windows).
+
+Предусмотрите возможность создавать несколько окон. При этом то, которое получает фокус, становится выше всех.
+
+Общее управление окнами должен осуществлять объект `WindowManager`.
+
+Синтаксис:
+
+```js
+WindowManager.setTemplate(html-шаблон для окон);
+
+WindowManager.addWindow({ // создаёт окно по шаблону с заголовком
+  title: "Чат с Петей"    // и показывает его
+});
+
+WindowManager.addWindow({ // ещё одно окно
+  title: "Чат с Машей"
+});
+```
+
+Демо в ифрейме:
+[iframe src="solution" height=300 border=1]
+
+
+<ul>
+<li>Окна перекрывают друг-друга по `z-index`. Максимальный `z-index` должен быть ограничен: от 1 до количества окон.</li>
+<li>Информация от окна к менеджеру передаётся через события.</li>
+<li>Инкапсуляция: `WindowManager` использует объект `DraggableWindow`, но не лезет в DOM окна. Обработчики -- только на объект.</li>
+</ul>
+
+В качестве исходного документа можно взять решение [предыдущей задачи](/task/draggable-windows). Скорее всего, класс `DraggableWindow` понадобиться немного изменить, добавить события.
diff --git a/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.md b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.md
new file mode 100644
index 00000000..d17cfea8
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.md
@@ -0,0 +1,3 @@
+[edit src="solution"/]
+
+В решении присутствуют файлы из [задачи про календарь](/task/calendar), т.к. он используется в качестве компонента.
diff --git a/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.view/calendar.css b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.view/calendar.css
new file mode 100755
index 00000000..3eb78e38
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.view/calendar.css
@@ -0,0 +1,28 @@
+
+.calendar-table {
+  border-collapse: collapse;
+}
+
+.calendar-table td, .calendar-table th {
+  border: 1px solid black;
+  padding: 3px;
+  text-align: center;
+}
+
+.calendar-table th {
+  font-weight: bold;
+  background-color: #E6E6E6;
+}
+
+.date-cell:hover {
+  background: #eee;
+  cursor: pointer;
+}
+
+.date-cell.selected {
+  background: #0F0;
+}
+
+.calendar-table caption {
+  text-align: center;
+}
diff --git a/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.view/calendar.js b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.view/calendar.js
new file mode 100755
index 00000000..37815a0f
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.view/calendar.js
@@ -0,0 +1,158 @@
+/**
+ * options:
+ *   value Date или объект {year,month,day}} -- дата, для которой показывать календарь
+ *     если в объекте указаны только {year,month}, то день не выбран
+*/
+function Calendar(options) {
+  var self = this;
+
+  var monthNames = 'Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь'.split(' ');
+
+  var elem;
+  var year, month, day;
+
+  var showYear, showMonth;
+
+  parseValue(options.value);
+
+  // -----------------------
+
+  this.getElement = function() {
+    if (!elem) {
+      render();
+    }
+    return elem;
+  };
+
+  this.getValue = function() {
+    return day ? new Date(year, month, day) : null;
+  };
+
+  function parseValue(value) {
+    if (value instanceof Date) {
+      year = value.getFullYear();
+      month = value.getMonth();
+      day = value.getDate();
+    } else {
+      year = value.year;
+      month = value.month;
+      day = value.day;
+    }
+  }
+
+  /**
+   * Установить значение календаря
+   * @param newValue {Date или объект {year,month[,day]} Новое значение
+   * @param quiet Если true, то событие не генерируется
+   */
+  this.setValue = function(newValue, quiet) {
+    parseValue(newValue);
+
+    if (elem) {
+      clearSelected();
+      render();
+    }
+
+    if (!quiet) {
+      $(self).triggerHandler({
+        type: "select", 
+        value: new Date(year, month, day)
+      });
+    }
+  };
+
+  this.clearValue = function() {
+    day = null;
+    clearSelected();
+  };
+
+  function render() {
+    if (!elem) {
+      elem = $('<div class="calendar"/>')
+        .on('click', '.date-cell', onDateCellClick);     
+    }
+
+    if (showYear != year || showMonth != month) {  
+      elem.html(renderCalendarTable(year, month));
+      elem.find('caption').html(monthNames[month]+' '+year);
+      showYear = year;
+      showMonth = month;
+    }
+       
+    if (day) {
+      var num = getCellByDate(new Date(year, month, day));
+      elem.find('td').eq(num).addClass("selected");
+    }
+
+  }
+
+  function clearSelected() {
+    elem.find('.selected').removeClass('selected');
+  }
+
+
+  function onDateCellClick(e) {    
+    day = $(e.target).html();
+    self.setValue({year: year, month: month, day: day});
+  }
+
+
+  /**
+   * Возвращает по дате номер TD в таблице
+   * Использование:
+   *  var td = table.getElementsByTagName('td')[getCellByDate(date)]
+  */
+  function getCellByDate(date) {
+    var dateDayOne = new Date(date.getFullYear(), date.getMonth(), 1);
+
+    return getDay(dateDayOne) + date.getDate() - 1;
+  }
+
+  /**
+   * получить номер дня недели для date, от 0(пн) до 6(вс)
+   * @param date
+   */
+  function getDay(date) { //
+    var day = date.getDay();
+    if (day == 0) day = 7;
+    return day - 1;
+  }
+
+  /**
+   * Генерирует таблицу для календаря заданного месяца/года
+   */
+  function renderCalendarTable(year, month) {
+
+    var d = new Date(year, month);
+
+    var table = ['<table class="calendar-table"><caption></caption><tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr><tr>'];
+
+    for (var i=0; i<getDay(d); i++) {
+      table.push('<td></td>');
+    }
+
+    // ячейки календаря с датами
+    while(d.getMonth() == month) {
+      table.push('<td class="date-cell">'+d.getDate()+'</td>');
+
+      if (getDay(d) % 7 == 6) { // вс, последний день - перевод строки
+        table.push('</tr><tr>');
+      }
+
+      d.setDate(d.getDate()+1);
+    }
+
+    // добить таблицу пустыми ячейками, если нужно
+    if (getDay(d) != 0) {
+      for (var i=getDay(d); i<7; i++) {
+        table.push('<td></td>');
+      }
+    }
+
+    table.push('</tr></table>');
+
+    return table.join('\n')
+  }
+
+}
+  
diff --git a/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.view/datepicker.css b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.view/datepicker.css
new file mode 100755
index 00000000..b3002990
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.view/datepicker.css
@@ -0,0 +1,42 @@
+
+.datepicker {
+  border: 1px solid black;
+  width: 350px;
+}
+
+.datepicker .body {
+  clear: both;
+  background: red;
+}
+
+.datepicker .prev-link {
+  float: left;
+  cursor: pointer;
+}
+
+.datepicker .next-link {
+  float: right;
+  cursor: pointer;
+}
+
+.datepicker .prev-link:hover, .datepicker .next-link:hover {
+	color: red;
+}
+
+
+.datepicker .header {
+	padding: 5px;
+  font-size: 120%;
+}
+
+.datepicker .calendar-left-holder {
+	float: left;
+}
+
+.datepicker .calendar-right-holder {
+	float: right;
+}
+
+.datepicker .title {
+	text-align: center;
+}
diff --git a/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.view/datepicker.js b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.view/datepicker.js
new file mode 100755
index 00000000..ae03b8bf
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.view/datepicker.js
@@ -0,0 +1,130 @@
+/**
+ * options:
+ *   value Date или объект {year,month,day}} -- дата, для которой показывать календарь
+ *     если в объекте указаны только {year,month}, то день не выбран
+*/
+function DatePicker(options) { 
+  var elem;
+  var calendarLeft;
+  var calendarRight;
+  var calendarCache = {};
+
+  var showYear, showMonth;
+  var selectedYear, selectedMonth, selectedDay;
+
+  var self = this;
+
+  parseValue(options.value);
+  showYear = selectedYear;
+  showMonth = selectedMonth;
+
+  // -------------
+
+  this.getElement = function() {
+    if (!elem) render();
+    return elem;
+  };
+
+  this.getValue = function() {
+    if (!selectedDay) return null;
+
+    return new Date(selectedYear, selectedMonth, selectedDay);
+  };
+
+  function parseValue(value) {
+    if (value instanceof Date) {
+      selectedYear = value.getFullYear();
+      selectedMonth = value.getMonth();
+      selectedDay = value.getDate();
+    } else {
+      selectedYear = value.year;
+      selectedMonth = value.month;
+      selectedDay = value.day;
+    }
+  }
+
+  function getCalendar(year, month) {
+
+    var key = '' + year + month;
+    var calendar;
+
+    if (!calendarCache[key]) {
+      calendar = calendarCache[key] = new Calendar({
+        value: {year: year, month: month}
+      });
+      $(calendar).on("select", onCalendarSelect);
+    } else {
+      calendar = calendarCache[key];
+    }
+
+    var value = {
+      year: year,
+      month: month,
+      // если календарь отображает текущий выбранный месяц, то передать и день для выбора
+      day: (year == selectedYear && month == selectedMonth) ? selectedDay : null
+    };
+
+    calendar.setValue(value, true);
+
+    return calendar;
+  }
+
+  function onCalendarSelect(e) {
+    parseValue(e.value);
+    if (e.target == calendarLeft) {
+      calendarRight.clearValue();
+    } else {
+      calendarLeft.clearValue();
+    }
+
+    $(self).triggerHandler({
+      type: "select", 
+      value: e.target.getValue()
+    });
+  }
+
+
+  function render() {
+    elem = $('<div class="datepicker"/>').html(
+      _.template(options.template)()
+    );
+
+    elem.on('mousedown', '.next-link', onNextLinkMouseDown);
+    elem.on('mousedown', '.prev-link', onPrevLinkMouseDown);
+    renderCalendars();
+  }
+
+  function renderCalendars() {
+    calendarLeft = getCalendar(showYear, showMonth);
+    // использую children().detach() вместо empty(), 
+    // т.к. empty() убивает обработчики на календаре
+    elem.find('.calendar-left-holder').children().detach().end()
+      .append(calendarLeft.getElement());
+
+    var dateNextMonth = new Date(showYear, showMonth + 1);
+    calendarRight = getCalendar(dateNextMonth.getFullYear(), dateNextMonth.getMonth());
+    elem.find('.calendar-right-holder').children().detach().end()
+      .append(calendarRight.getElement());
+  }
+
+  function onNextLinkMouseDown() {
+    showMonth++;
+    if (showMonth > 11) {
+      showMonth = 0;
+      showYear++;
+    }
+    renderCalendars();
+    return false;
+  }
+
+  function onPrevLinkMouseDown() {
+    showMonth--;
+    if (showMonth < 0) {
+      showMonth = 11;
+      showYear--;
+    }
+    renderCalendars();
+    return false;
+  }
+
+}
diff --git a/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.view/index.html b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.view/index.html
new file mode 100755
index 00000000..1521ed45
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/solution.view/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <link type="text/css" rel="stylesheet" href="calendar.css">
+  <link type="text/css" rel="stylesheet" href="datepicker.css">
+
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
+
+  <script src="calendar.js"></script>
+  <script src="datepicker.js"></script>
+</head>
+<body>
+
+<div id="value">тут будет выбранное значение (дата)</div>
+
+<script type="text/template" id="template-datepicker">
+  <div class="header">
+    <div class="prev-link">&laquo;</div>
+    <div class="next-link">&raquo;</div>
+    <div class="title">Выберите дату</div>
+  </div>
+  <div class="body">
+    <div class="calendar-left-holder prev-month">
+      <!-- left calendar -->
+    </div>
+    <div class="calendar-right-holder next-month">
+      <!-- right calendar -->
+    </div>
+  </div>
+</script>
+
+<script>
+var datePicker = new DatePicker({
+  template: $('#template-datepicker').html(),
+  value: {year: 2012, month: 2 }
+});
+
+datePicker.getElement().appendTo('body');
+
+$(datePicker).on("select", function(e) {
+  $("#value").html( e.value + '' );
+});
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/source.view/calendar.css b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/source.view/calendar.css
new file mode 100755
index 00000000..3eb78e38
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/source.view/calendar.css
@@ -0,0 +1,28 @@
+
+.calendar-table {
+  border-collapse: collapse;
+}
+
+.calendar-table td, .calendar-table th {
+  border: 1px solid black;
+  padding: 3px;
+  text-align: center;
+}
+
+.calendar-table th {
+  font-weight: bold;
+  background-color: #E6E6E6;
+}
+
+.date-cell:hover {
+  background: #eee;
+  cursor: pointer;
+}
+
+.date-cell.selected {
+  background: #0F0;
+}
+
+.calendar-table caption {
+  text-align: center;
+}
diff --git a/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/source.view/calendar.js b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/source.view/calendar.js
new file mode 100755
index 00000000..37815a0f
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/source.view/calendar.js
@@ -0,0 +1,158 @@
+/**
+ * options:
+ *   value Date или объект {year,month,day}} -- дата, для которой показывать календарь
+ *     если в объекте указаны только {year,month}, то день не выбран
+*/
+function Calendar(options) {
+  var self = this;
+
+  var monthNames = 'Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь'.split(' ');
+
+  var elem;
+  var year, month, day;
+
+  var showYear, showMonth;
+
+  parseValue(options.value);
+
+  // -----------------------
+
+  this.getElement = function() {
+    if (!elem) {
+      render();
+    }
+    return elem;
+  };
+
+  this.getValue = function() {
+    return day ? new Date(year, month, day) : null;
+  };
+
+  function parseValue(value) {
+    if (value instanceof Date) {
+      year = value.getFullYear();
+      month = value.getMonth();
+      day = value.getDate();
+    } else {
+      year = value.year;
+      month = value.month;
+      day = value.day;
+    }
+  }
+
+  /**
+   * Установить значение календаря
+   * @param newValue {Date или объект {year,month[,day]} Новое значение
+   * @param quiet Если true, то событие не генерируется
+   */
+  this.setValue = function(newValue, quiet) {
+    parseValue(newValue);
+
+    if (elem) {
+      clearSelected();
+      render();
+    }
+
+    if (!quiet) {
+      $(self).triggerHandler({
+        type: "select", 
+        value: new Date(year, month, day)
+      });
+    }
+  };
+
+  this.clearValue = function() {
+    day = null;
+    clearSelected();
+  };
+
+  function render() {
+    if (!elem) {
+      elem = $('<div class="calendar"/>')
+        .on('click', '.date-cell', onDateCellClick);     
+    }
+
+    if (showYear != year || showMonth != month) {  
+      elem.html(renderCalendarTable(year, month));
+      elem.find('caption').html(monthNames[month]+' '+year);
+      showYear = year;
+      showMonth = month;
+    }
+       
+    if (day) {
+      var num = getCellByDate(new Date(year, month, day));
+      elem.find('td').eq(num).addClass("selected");
+    }
+
+  }
+
+  function clearSelected() {
+    elem.find('.selected').removeClass('selected');
+  }
+
+
+  function onDateCellClick(e) {    
+    day = $(e.target).html();
+    self.setValue({year: year, month: month, day: day});
+  }
+
+
+  /**
+   * Возвращает по дате номер TD в таблице
+   * Использование:
+   *  var td = table.getElementsByTagName('td')[getCellByDate(date)]
+  */
+  function getCellByDate(date) {
+    var dateDayOne = new Date(date.getFullYear(), date.getMonth(), 1);
+
+    return getDay(dateDayOne) + date.getDate() - 1;
+  }
+
+  /**
+   * получить номер дня недели для date, от 0(пн) до 6(вс)
+   * @param date
+   */
+  function getDay(date) { //
+    var day = date.getDay();
+    if (day == 0) day = 7;
+    return day - 1;
+  }
+
+  /**
+   * Генерирует таблицу для календаря заданного месяца/года
+   */
+  function renderCalendarTable(year, month) {
+
+    var d = new Date(year, month);
+
+    var table = ['<table class="calendar-table"><caption></caption><tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr><tr>'];
+
+    for (var i=0; i<getDay(d); i++) {
+      table.push('<td></td>');
+    }
+
+    // ячейки календаря с датами
+    while(d.getMonth() == month) {
+      table.push('<td class="date-cell">'+d.getDate()+'</td>');
+
+      if (getDay(d) % 7 == 6) { // вс, последний день - перевод строки
+        table.push('</tr><tr>');
+      }
+
+      d.setDate(d.getDate()+1);
+    }
+
+    // добить таблицу пустыми ячейками, если нужно
+    if (getDay(d) != 0) {
+      for (var i=getDay(d); i<7; i++) {
+        table.push('<td></td>');
+      }
+    }
+
+    table.push('</tr></table>');
+
+    return table.join('\n')
+  }
+
+}
+  
diff --git a/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/source.view/datepicker.css b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/source.view/datepicker.css
new file mode 100755
index 00000000..d168879f
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/source.view/datepicker.css
@@ -0,0 +1,2 @@
+
+/* ваши стили */
diff --git a/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/source.view/datepicker.js b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/source.view/datepicker.js
new file mode 100755
index 00000000..baf92821
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/source.view/datepicker.js
@@ -0,0 +1,8 @@
+/**
+ * options:
+ *   value Date или объект {year,month,day}} -- дата, для которой показывать календарь
+ *     если в объекте указаны только {year,month}, то день не выбран
+*/
+function DatePicker(options) { 
+  /* ваш код */
+}
diff --git a/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/source.view/index.html b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/source.view/index.html
new file mode 100755
index 00000000..3c106b9f
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/source.view/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <link type="text/css" rel="stylesheet" href="calendar.css">
+  <link type="text/css" rel="stylesheet" href="datepicker.css">
+
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
+
+  <script src="calendar.js"></script>
+  <script src="datepicker.js"></script>
+</head>
+<body>
+
+<div id="value">тут будет выбранное значение (дата)</div>
+
+<script type="text/template" id="template-datepicker">
+  /* ваш шаблон */
+</script>
+
+<script>
+var datePicker = new DatePicker({
+  template: $('#template-datepicker').html(),
+  value: {year: 2012, month: 2 }
+});
+
+datePicker.getElement().appendTo('body');
+
+$(datePicker).on("select", function(e) {
+  $("#value").html( e.value + '' );
+});
+</script>
+
+</body>
+</html>
diff --git a/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/task.md b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/task.md
new file mode 100644
index 00000000..daf81884
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/4-double-calendar-with-arrows/task.md
@@ -0,0 +1,47 @@
+# Двойной календарь со стрелками
+
+[importance 5]
+
+Создайте календарь, который показывает два месяца сразу. Стрелки позволяют менять текущий месяц.
+
+Конструктор:
+
+```js
+var datePicker = new DatePicker({
+  template: HTML-шаблон,
+  value: Date или объект {year, month, day}
+});
+```
+
+Если значение `value` передано в виде объекта `{year, month}`, т.е. без `day`, то дата не выбрана.
+
+События:
+<ul>
+<li>`select` -- при изменении даты.</li>
+</ul>
+Методы:
+<ul>
+<li>`setValue(date, quiet)` -- устанавливает значение даты, формат -- как в конструкторе. Если второй аргумент `true`, то событие не генерируется.</li>
+<li>`getElement()` -- возвращает DOM-элемент для компоненты для вставки в документ. При первом вызове создаёт DOM.</li>
+</ul>
+
+Использование -- добавление в документ:
+
+```js
+$('body').append(datePicker.getElement());
+```
+
+Использование - подписка на изменение и вывод значения:
+
+```js
+$(datePicker).on("select", function(e) {
+  $('#value').html( e.value + '' );
+});
+```
+
+Пример в действии:
+[iframe border=1 src="solution"]
+
+[edit src="source" task/]
+
+**В решении используйте готовый компонент -- календарь из задачи [](/task/calendar).**
diff --git a/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.md b/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.md
new file mode 100644
index 00000000..dec500a8
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.md
@@ -0,0 +1,76 @@
+# Получение данных
+
+Данные регионов можно хранить в разном виде. 
+
+Наиболее естественное представление дерева -- в виде вложенного объекта: свойство `children` содержит поддеревья.
+
+Выглядит это так:
+
+```js
+var regions = [
+  {
+    title: 'Россия',
+    id: 1,
+    children: [
+      { 
+        title: 'Центр',
+        id: 2,
+        children: [ ... поддеревья ... ]
+      },
+      ...
+    }
+  }
+  ...
+]
+```
+
+У такого вложенного объекта есть важный недостаток: сложно перейти напрямую к узлу по ID. Нужно "прыгать" по дереву.
+
+Поэтому может быть более удобен другой вариант:
+
+```js
+var regions = [
+  {
+    title: 'Россия',
+    id: 1,
+    children: [ 2 ]
+  },
+  { 
+    title: 'Центр',
+    id: 2,
+    children: [ ... ]
+  },
+  ...
+]
+```
+
+..То есть, массив содержит все узлы дерева, и каждый узел хранит в `children` список `id` детей. 
+
+Но и это не совсем удобно. Ведь хочется по ID получить данные. Значит, нужно хранить не массив, а объект вида `id => { title: .., id: .., children: [... ] }`. 
+
+<ul>
+<li>Свойство `children` может отсутствовать, если детей нет.</li>
+<li>`id` есть и в ключе объекта и в данных узла. Так удобнее.</li>
+<li>Список внешних узлов дерева содержится в корневом узле без имени, с `id = 0`.</li> 
+</ul>
+
+**Выберите наиболее симпатичную структуру и получите её из исходного документа.**
+
+# Данные
+
+Скрипт для получения данных в последнем формате, описанном выше: [fetch.js](/files/tutorial/widgets/checkbox-tree/fetch.js).
+
+Результат в файле (после `JSON.stringify`): [regions.js](/files/tutorial/widgets/checkbox-tree/regions.js).
+
+# Исправления
+
+Желательно сделать следующие исправления:
+
+<ul>
+<li>Переделать вёрстку. В частности, заменить текстовые + - на оформление при помощи CSS.</li>
+<li>Оформить всё в виде виджета с шаблоном.</li>
+<li>Использовать ленивый рендеринг! Не рисовать всё дерево сразу (зачем рисовать то, чего не видно?), а дорисовывать при открытии.</li>
+
+# Решение
+
+[edit src="solution"/]
\ No newline at end of file
diff --git a/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.view/fetch.js b/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.view/fetch.js
new file mode 100755
index 00000000..a1c11a37
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.view/fetch.js
@@ -0,0 +1,23 @@
+var result = {
+	0: { children: [] }	
+};
+
+$('div[id^="region"]').each(function() {
+  el = $(this);
+  var id = el.attr('id').slice(6);
+  result[id] = {
+    title: el.children('label').html(),
+    children: [],
+    id: id
+  };
+
+  var parent = el.parent().closest('div[id^="region"]');
+  if (parent.length) {
+    var pid = parent.attr('id').slice(6);
+  } else {
+    pid = 0;
+  }
+    
+  result[pid].children.push(+id);
+  
+});
\ No newline at end of file
diff --git a/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.view/index.html b/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.view/index.html
new file mode 100755
index 00000000..469125ab
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.view/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link href="tree.css" rel="stylesheet">
+
+	<script src="http://code.jquery.com/jquery.min.js"></script>
+	<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
+	<script src="regions.js"></script>
+	<script src="tree.js"></script>
+</head>
+
+<body>
+
+<script id="tree-template" type="text/template">
+<ul>
+	<% $(children).each(function() { 
+		var nodeData = data[this];
+		var hasChildren = nodeData.children && nodeData.children.length;
+	%>
+	<li data-id="<%=nodeData.id%>" class="<%=hasChildren ? 'tree-closed' : ''%>">
+	    <% if (hasChildren) { %> <span class="tree-toggler"></span> <% } %>
+		<input type="checkbox" value="<%=nodeData.id%>">
+		<%=nodeData.title%>
+	</li>
+	<% }); %>
+</ul>
+</script>
+
+<script>
+// требование - как можно меньше DOM-элементов
+// работа с данными из 1000 узлов
+/* пример структуры данных
+var data = [
+    {
+    	children: [1,2,3]
+    },
+	{
+		title: 'Россия',
+		id: 1,
+		children: [4,5]
+	},
+	{
+		title: 'Украина',
+		id: 2
+	},
+	{
+		title: 'Беларусь',
+		id: 3
+	},
+	{
+		title: 'Север',
+		id: 4
+	},
+	{
+		title: 'Юг',
+		id: 5
+	}
+
+];
+ */
+
+var tree = new Tree({
+	template: _.template($('#tree-template').html().trim()),
+	data: regions
+});
+
+tree.getElement().appendTo('body');
+
+
+</script>
+</body>
+</html>
+
+
diff --git a/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.view/regions.js b/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.view/regions.js
new file mode 100755
index 00000000..815a674b
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.view/regions.js
@@ -0,0 +1 @@
+var regions = {"0":{"children":[225,166,111,183,241,10002,10003,138]},"1":{"title":"Москва и область","children":[213,10716,10722,10723,214,215,21622,20571,21623,37147,10734,20728,10735,10739,10745,10747,217,10750,10752,10754,21619,219,10765,21620],"id":"1"},"2":{"title":"Санкт-Петербург","children":[],"id":"2"},"3":{"title":"Центр","children":[1,10645,10650,10658,10672,10687,10693,10699,10705,10712,10772,10776,10795,10802,10819,10832,10841],"id":"3"},"4":{"title":"Белгород","children":[],"id":"4"},"6":{"title":"Калуга","children":[],"id":"6"},"8":{"title":"Курск","children":[],"id":"8"},"15":{"title":"Тула","children":[],"id":"15"},"16":{"title":"Ярославль","children":[],"id":"16"},"17":{"title":"Северо-Запад","children":[10174,10842,10904,10853,10857,10897,10176,10926,10933,10939],"id":"17"},"18":{"title":"Петрозаводск","children":[],"id":"18"},"19":{"title":"Сыктывкар","children":[],"id":"19"},"20":{"title":"Архангельск","children":[],"id":"20"},"21":{"title":"Вологда","children":[],"id":"21"},"23":{"title":"Мурманск","children":[],"id":"23"},"25":{"title":"Псков","children":[],"id":"25"},"26":{"title":"Юг","children":[10946,10950,10995,11004,11015,11029],"id":"26"},"35":{"title":"Краснодар","children":[],"id":"35"},"36":{"title":"Ставрополь","children":[],"id":"36"},"38":{"title":"Волгоград","children":[],"id":"38"},"39":{"title":"Ростов-на-Дону","children":[],"id":"39"},"40":{"title":"Поволжье","children":[11070,11079,11084,11095,11108,11111,11077,11117,11119,11131,11146,11148,11153,11156],"id":"40"},"43":{"title":"Казань","children":[],"id":"43"},"44":{"title":"Ижевск","children":[],"id":"44"},"45":{"title":"Чебоксары","children":[],"id":"45"},"47":{"title":"Нижний Новгород","children":[],"id":"47"},"48":{"title":"Оренбург","children":[],"id":"48"},"50":{"title":"Пермь","children":[],"id":"50"},"51":{"title":"Самара","children":[],"id":"51"},"52":{"title":"Урал","children":[11162,11158,11176,11193,11225,11232],"id":"52"},"54":{"title":"Екатеринбург","children":[],"id":"54"},"55":{"title":"Тюмень","children":[],"id":"55"},"56":{"title":"Челябинск","children":[],"id":"56"},"57":{"title":"Ханты-Мансийск","children":[],"id":"57"},"58":{"title":"Салехард","children":[],"id":"58"},"59":{"title":"Сибирь","children":[11235,21949,11266,11282,11309,11316,11318,10231,11330,10233,11340,11353],"id":"59"},"62":{"title":"Красноярск","children":[],"id":"62"},"63":{"title":"Иркутск","children":[],"id":"63"},"64":{"title":"Кемерово","children":[],"id":"64"},"67":{"title":"Томск","children":[],"id":"67"},"73":{"title":"Дальний Восток","children":[11375,10243,11398,11403,11409,11443,11457,10251,11450],"id":"73"},"75":{"title":"Владивосток","children":[],"id":"75"},"76":{"title":"Хабаровск","children":[],"id":"76"},"77":{"title":"Благовещенск","children":[],"id":"77"},"84":{"title":"США","children":[],"id":"84"},"93":{"title":"Аргентина","children":[],"id":"93"},"94":{"title":"Бразилия","children":[],"id":"94"},"95":{"title":"Канада","children":[],"id":"95"},"96":{"title":"Германия","children":[],"id":"96"},"102":{"title":"Великобритания","children":[],"id":"102"},"111":{"title":"Европа","children":[113,114,115,102,116,96,246,203,204,205,20574,118,119,120,180,121,122,980,983,123,124,10083,125,126,127],"id":"111"},"113":{"title":"Австрия","children":[],"id":"113"},"114":{"title":"Бельгия","children":[],"id":"114"},"115":{"title":"Болгария","children":[],"id":"115"},"116":{"title":"Венгрия","children":[],"id":"116"},"117":{"title":"Литва","children":[],"id":"117"},"118":{"title":"Нидерланды","children":[],"id":"118"},"119":{"title":"Норвегия","children":[],"id":"119"},"120":{"title":"Польша","children":[],"id":"120"},"121":{"title":"Словакия","children":[],"id":"121"},"122":{"title":"Словения","children":[],"id":"122"},"123":{"title":"Финляндия","children":[],"id":"123"},"124":{"title":"Франция","children":[],"id":"124"},"125":{"title":"Чехия","children":[],"id":"125"},"126":{"title":"Швейцария","children":[],"id":"126"},"127":{"title":"Швеция","children":[],"id":"127"},"134":{"title":"Китай","children":[],"id":"134"},"135":{"title":"Южная Корея","children":[],"id":"135"},"137":{"title":"Япония","children":[],"id":"137"},"138":{"title":"Австралия и Океания","children":[211,139],"id":"138"},"139":{"title":"Новая Зеландия","children":[],"id":"139"},"141":{"title":"Днепропетровск","children":[],"id":"141"},"142":{"title":"Донецк","children":[],"id":"142"},"143":{"title":"Киев","children":[],"id":"143"},"146":{"title":"Симферополь","children":[],"id":"146"},"149":{"title":"Беларусь","children":[29632,29633,29631,29634,29630,29629],"id":"149"},"159":{"title":"Казахстан","children":[29414,29404,29406,29403,29407,29408,29410,29411,29412,29413,29415,29416,29409,29417],"id":"159"},"162":{"title":"Алматы","children":[],"id":"162"},"163":{"title":"Астана","children":[],"id":"163"},"165":{"title":"Семей","children":[],"id":"165"},"166":{"title":"СНГ (исключая Россию)","children":[29386,167,168,149,159,207,208,209,170,171,187],"id":"166"},"167":{"title":"Азербайджан","children":[],"id":"167"},"168":{"title":"Армения","children":[],"id":"168"},"169":{"title":"Грузия","children":[],"id":"169"},"170":{"title":"Туркмения","children":[],"id":"170"},"171":{"title":"Узбекистан","children":[],"id":"171"},"172":{"title":"Уфа","children":[],"id":"172"},"179":{"title":"Эстония","children":[],"id":"179"},"180":{"title":"Сербия","children":[],"id":"180"},"181":{"title":"Израиль","children":[],"id":"181"},"183":{"title":"Азия","children":[1004,169,994,20975,134,995,135,137],"id":"183"},"187":{"title":"Украина","children":[20525,20524,977,20528,20527,20526],"id":"187"},"192":{"title":"Владимир","children":[],"id":"192"},"194":{"title":"Саратов","children":[],"id":"194"},"195":{"title":"Ульяновск","children":[],"id":"195"},"197":{"title":"Барнаул","children":[],"id":"197"},"203":{"title":"Дания","children":[],"id":"203"},"204":{"title":"Испания","children":[],"id":"204"},"205":{"title":"Италия","children":[],"id":"205"},"206":{"title":"Латвия","children":[],"id":"206"},"207":{"title":"Киргизия","children":[],"id":"207"},"208":{"title":"Молдова","children":[],"id":"208"},"209":{"title":"Таджикистан","children":[],"id":"209"},"210":{"title":"Объединенные Арабские Эмираты","children":[],"id":"210"},"211":{"title":"Австралия","children":[],"id":"211"},"213":{"title":"Москва","children":[],"id":"213"},"214":{"title":"Долгопрудный","children":[],"id":"214"},"215":{"title":"Дубна","children":[],"id":"215"},"217":{"title":"Пущино","children":[],"id":"217"},"219":{"title":"Черноголовка","children":[],"id":"219"},"222":{"title":"Луганск","children":[],"id":"222"},"225":{"title":"Россия","children":[3,17,40,26,59,73,102444,52],"id":"225"},"235":{"title":"Магнитогорск","children":[],"id":"235"},"236":{"title":"Набережные Челны","children":[],"id":"236"},"237":{"title":"Новокузнецк","children":[],"id":"237"},"238":{"title":"Новочеркасск","children":[],"id":"238"},"239":{"title":"Сочи","children":[],"id":"239"},"240":{"title":"Тольятти","children":[],"id":"240"},"241":{"title":"Африка","children":[],"id":"241"},"246":{"title":"Греция","children":[],"id":"246"},"959":{"title":"Севастополь","children":[],"id":"959"},"964":{"title":"Полтава","children":[],"id":"964"},"967":{"title":"Обнинск","children":[],"id":"967"},"968":{"title":"Череповец","children":[],"id":"968"},"969":{"title":"Выборг","children":[],"id":"969"},"970":{"title":"Новороссийск","children":[],"id":"970"},"971":{"title":"Таганрог","children":[],"id":"971"},"972":{"title":"Дзержинск","children":[],"id":"972"},"973":{"title":"Сургут","children":[],"id":"973"},"974":{"title":"Находка","children":[],"id":"974"},"975":{"title":"Бийск","children":[],"id":"975"},"976":{"title":"Братск","children":[],"id":"976"},"977":{"title":"Крым","children":[11463,11464,959,146,11469,11470],"id":"977"},"980":{"title":"Страны Балтии","children":[206,117,179],"id":"980"},"983":{"title":"Турция","children":[103668,103669,103670,103671,103672,103673,103674,103675,103676,103677,103678,103679,103680,103681,103682,103683,103684,103685,103686,103687,103688,103689,103690,103691,103692,103693,103694,103695,103696,103697,103742,103698,103699,103700,103701,103702,103703,103704,103705,103706,103707,103708,103709,103710,103711,103712,103713,103714,103715,103716,103717,103718,103719,103720,103721,103722,103723,103724,103725,103726,103727,103728,103729,103730,103731,103732,103733,103734,103735,103736,103737,103738,103739,103740,103741,103743,103744,103745,103746,103747,103748],"id":"983"},"994":{"title":"Индия","children":[],"id":"994"},"995":{"title":"Таиланд","children":[],"id":"995"},"1004":{"title":"Ближний Восток","children":[1056,181,210],"id":"1004"},"1056":{"title":"Египет","children":[],"id":"1056"},"1058":{"title":"Туапсе","children":[],"id":"1058"},"1091":{"title":"Нижневартовск","children":[],"id":"1091"},"1107":{"title":"Анапа","children":[],"id":"1107"},"10002":{"title":"Северная Америка","children":[95,84],"id":"10002"},"10003":{"title":"Южная Америка","children":[93,94],"id":"10003"},"10083":{"title":"Хорватия","children":[],"id":"10083"},"10174":{"title":"Санкт-Петербург и Ленинградская область","children":[10864,10865,969,10867,10871,2,10891,10892],"id":"10174"},"10176":{"title":"Ненецкий автономный округ","children":[],"id":"10176"},"10231":{"title":"Республика Алтай","children":[],"id":"10231"},"10233":{"title":"Республика Тыва","children":[],"id":"10233"},"10243":{"title":"Еврейская автономная область","children":[],"id":"10243"},"10251":{"title":"Чукотский автономный округ","children":[],"id":"10251"},"10303":{"title":"Талдыкорган","children":[],"id":"10303"},"10306":{"title":"Усть-Каменогорск","children":[],"id":"10306"},"10347":{"title":"Кривой Рог","children":[],"id":"10347"},"10366":{"title":"Мариуполь","children":[],"id":"10366"},"10369":{"title":"Белая Церковь","children":[],"id":"10369"},"10645":{"title":"Белгород и область","children":[4,10649],"id":"10645"},"10649":{"title":"Старый Оскол","children":[],"id":"10649"},"10650":{"title":"Брянск и область","children":[],"id":"10650"},"10658":{"title":"Владимир и область","children":[192,10664,10668],"id":"10658"},"10664":{"title":"Ковров","children":[],"id":"10664"},"10668":{"title":"Муром","children":[],"id":"10668"},"10672":{"title":"Воронеж и область","children":[],"id":"10672"},"10687":{"title":"Иваново и область","children":[],"id":"10687"},"10693":{"title":"Калуга и область","children":[6,967],"id":"10693"},"10699":{"title":"Кострома и область","children":[],"id":"10699"},"10705":{"title":"Курск и область","children":[10710,8],"id":"10705"},"10710":{"title":"Железногорск","children":[],"id":"10710"},"10712":{"title":"Липецк и область","children":[],"id":"10712"},"10716":{"title":"Балашиха","children":[],"id":"10716"},"10722":{"title":"Воскресенск","children":[],"id":"10722"},"10723":{"title":"Дмитров","children":[],"id":"10723"},"10734":{"title":"Коломна","children":[],"id":"10734"},"10735":{"title":"Красногорск","children":[],"id":"10735"},"10739":{"title":"Можайск","children":[],"id":"10739"},"10745":{"title":"Орехово-Зуево","children":[],"id":"10745"},"10747":{"title":"Подольск","children":[],"id":"10747"},"10750":{"title":"Раменское","children":[],"id":"10750"},"10752":{"title":"Сергиев Посад","children":[],"id":"10752"},"10754":{"title":"Серпухов","children":[],"id":"10754"},"10765":{"title":"Щелково","children":[],"id":"10765"},"10772":{"title":"Орел и область","children":[],"id":"10772"},"10776":{"title":"Рязань и область","children":[],"id":"10776"},"10795":{"title":"Смоленск и область","children":[],"id":"10795"},"10802":{"title":"Тамбов и область","children":[],"id":"10802"},"10819":{"title":"Тверь и область","children":[],"id":"10819"},"10830":{"title":"Новомосковск","children":[],"id":"10830"},"10832":{"title":"Тула и область","children":[10830,15],"id":"10832"},"10839":{"title":"Рыбинск","children":[],"id":"10839"},"10841":{"title":"Ярославль и область","children":[10839,21154,16],"id":"10841"},"10842":{"title":"Архангельск и область","children":[20,10849],"id":"10842"},"10849":{"title":"Северодвинск","children":[],"id":"10849"},"10853":{"title":"Вологда и область","children":[21,968],"id":"10853"},"10857":{"title":"Калининград и область","children":[],"id":"10857"},"10864":{"title":"Волхов","children":[],"id":"10864"},"10865":{"title":"Всеволожск","children":[],"id":"10865"},"10867":{"title":"Гатчина","children":[],"id":"10867"},"10871":{"title":"Кириши","children":[],"id":"10871"},"10891":{"title":"Сосновый Бор","children":[],"id":"10891"},"10892":{"title":"Тихвин","children":[],"id":"10892"},"10894":{"title":"Апатиты","children":[],"id":"10894"},"10897":{"title":"Мурманск и область","children":[10894,23],"id":"10897"},"10904":{"title":"Великий Новгород и Новгородская область","children":[],"id":"10904"},"10926":{"title":"Псков и область","children":[10928,25],"id":"10926"},"10928":{"title":"Великие Луки","children":[],"id":"10928"},"10933":{"title":"Республика Карелия","children":[10934,18,10937],"id":"10933"},"10934":{"title":"Кондопога","children":[],"id":"10934"},"10937":{"title":"Сортавала","children":[],"id":"10937"},"10939":{"title":"Республика Коми","children":[10940,19,10944,10945],"id":"10939"},"10940":{"title":"Воркута","children":[],"id":"10940"},"10944":{"title":"Усинск","children":[],"id":"10944"},"10945":{"title":"Ухта","children":[],"id":"10945"},"10946":{"title":"Астрахань и область","children":[],"id":"10946"},"10950":{"title":"Волгоград и область","children":[38,10951,10959],"id":"10950"},"10951":{"title":"Волжский","children":[],"id":"10951"},"10959":{"title":"Камышин","children":[],"id":"10959"},"10987":{"title":"Армавир","children":[],"id":"10987"},"10993":{"title":"Ейск","children":[],"id":"10993"},"10995":{"title":"Краснодарский край","children":[1107,10987,10993,35,970,239,1058],"id":"10995"},"11004":{"title":"Республика Адыгея","children":[],"id":"11004"},"11010":{"title":"Республика Дагестан","children":[],"id":"11010"},"11012":{"title":"Республика Ингушетия","children":[],"id":"11012"},"11013":{"title":"Республика Кабардино-Балкария","children":[],"id":"11013"},"11015":{"title":"Республика Калмыкия","children":[],"id":"11015"},"11020":{"title":"Карачаево-Черкесская Республика","children":[],"id":"11020"},"11021":{"title":"Республика Северная Осетия-Алания","children":[],"id":"11021"},"11024":{"title":"Чеченская Республика","children":[],"id":"11024"},"11029":{"title":"Ростов-на-Дону и область","children":[11036,11043,238,39,971,11053],"id":"11029"},"11036":{"title":"Волгодонск","children":[],"id":"11036"},"11043":{"title":"Каменск-Шахтинский","children":[],"id":"11043"},"11053":{"title":"Шахты","children":[],"id":"11053"},"11057":{"title":"Ессентуки","children":[],"id":"11057"},"11062":{"title":"Кисловодск","children":[],"id":"11062"},"11063":{"title":"Минеральные Воды","children":[],"id":"11063"},"11064":{"title":"Невинномысск","children":[],"id":"11064"},"11067":{"title":"Пятигорск","children":[],"id":"11067"},"11069":{"title":"Ставропольский край","children":[11057,11062,11063,11064,11067,36],"id":"11069"},"11070":{"title":"Киров и область","children":[],"id":"11070"},"11077":{"title":"Республика Марий Эл","children":[],"id":"11077"},"11079":{"title":"Нижний Новгород и область","children":[20040,972,20044,47,11083],"id":"11079"},"11083":{"title":"Саров","children":[],"id":"11083"},"11084":{"title":"Оренбург и область","children":[48,11091],"id":"11084"},"11091":{"title":"Орск","children":[],"id":"11091"},"11095":{"title":"Пенза и область","children":[],"id":"11095"},"11108":{"title":"Пермский край","children":[20237,50],"id":"11108"},"11111":{"title":"Республика Башкортостан","children":[11114,20235,11115,11116,172],"id":"11111"},"11114":{"title":"Нефтекамск","children":[],"id":"11114"},"11115":{"title":"Салават","children":[],"id":"11115"},"11116":{"title":"Стерлитамак","children":[],"id":"11116"},"11117":{"title":"Республика Мордовия","children":[],"id":"11117"},"11119":{"title":"Республика Татарстан","children":[11121,11122,43,236,11127],"id":"11119"},"11121":{"title":"Альметьевск","children":[],"id":"11121"},"11122":{"title":"Бугульма","children":[],"id":"11122"},"11127":{"title":"Нижнекамск","children":[],"id":"11127"},"11131":{"title":"Самара и область","children":[11132,51,11139,240],"id":"11131"},"11132":{"title":"Жигулевск","children":[],"id":"11132"},"11139":{"title":"Сызрань","children":[],"id":"11139"},"11143":{"title":"Балаково","children":[],"id":"11143"},"11146":{"title":"Саратов и область","children":[11143,194,11147],"id":"11146"},"11147":{"title":"Энгельс","children":[],"id":"11147"},"11148":{"title":"Удмуртская Республика","children":[11150,44,11152],"id":"11148"},"11150":{"title":"Глазов","children":[],"id":"11150"},"11152":{"title":"Сарапул","children":[],"id":"11152"},"11153":{"title":"Ульяновск и область","children":[11155,195],"id":"11153"},"11155":{"title":"Димитровград","children":[],"id":"11155"},"11156":{"title":"Чувашская Республика","children":[37133,45],"id":"11156"},"11158":{"title":"Курган и область","children":[],"id":"11158"},"11162":{"title":"Екатеринбург и Свердловская область","children":[54,11164,11168,11171],"id":"11162"},"11164":{"title":"Каменск-Уральский","children":[],"id":"11164"},"11168":{"title":"Нижний Тагил","children":[],"id":"11168"},"11171":{"title":"Первоуральск","children":[],"id":"11171"},"11173":{"title":"Ишим","children":[],"id":"11173"},"11175":{"title":"Тобольск","children":[],"id":"11175"},"11176":{"title":"Тюмень и область","children":[11173,11175,55],"id":"11176"},"11184":{"title":"Нефтеюганск","children":[],"id":"11184"},"11193":{"title":"Ханты-Мансийский АО","children":[11184,1091,973,57],"id":"11193"},"11212":{"title":"Миасс","children":[],"id":"11212"},"11214":{"title":"Озерск","children":[],"id":"11214"},"11217":{"title":"Сатка","children":[],"id":"11217"},"11225":{"title":"Челябинск и область","children":[235,11212,11214,11217,56],"id":"11225"},"11230":{"title":"Новый Уренгой","children":[],"id":"11230"},"11231":{"title":"Ноябрьск","children":[],"id":"11231"},"11232":{"title":"Ямало-Ненецкий АО","children":[11230,11231,58],"id":"11232"},"11235":{"title":"Алтайский край","children":[197,975],"id":"11235"},"11256":{"title":"Ангарск","children":[],"id":"11256"},"11266":{"title":"Иркутск и область","children":[11256,976,63,11273],"id":"11266"},"11273":{"title":"Усть-Илимск","children":[],"id":"11273"},"11282":{"title":"Кемерово и область","children":[64,11287,237],"id":"11282"},"11287":{"title":"Междуреченск","children":[],"id":"11287"},"11302":{"title":"Ачинск","children":[],"id":"11302"},"11309":{"title":"Красноярский край","children":[11302,20086,62,11310,11311],"id":"11309"},"11310":{"title":"Минусинск","children":[],"id":"11310"},"11311":{"title":"Норильск","children":[],"id":"11311"},"11316":{"title":"Новосибирск и область","children":[],"id":"11316"},"11318":{"title":"Омск и область","children":[],"id":"11318"},"11330":{"title":"Республика Бурятия","children":[],"id":"11330"},"11340":{"title":"Республика Хакасия","children":[],"id":"11340"},"11351":{"title":"Северск","children":[],"id":"11351"},"11353":{"title":"Томск и область","children":[11351,67],"id":"11353"},"11374":{"title":"Белогорск","children":[],"id":"11374"},"11375":{"title":"Благовещенск и Амурская область","children":[11374,77,11391],"id":"11375"},"11391":{"title":"Тында","children":[],"id":"11391"},"11398":{"title":"Камчатский край","children":[],"id":"11398"},"11403":{"title":"Магадан и область","children":[],"id":"11403"},"11409":{"title":"Приморский край","children":[75,974,11426],"id":"11409"},"11426":{"title":"Уссурийск","children":[],"id":"11426"},"11443":{"title":"Республика Саха (Якутия)","children":[],"id":"11443"},"11450":{"title":"Южно-Сахалинск и Сахалинская область","children":[],"id":"11450"},"11453":{"title":"Комсомольск-на-Амуре","children":[],"id":"11453"},"11457":{"title":"Хабаровский край","children":[11453,76],"id":"11457"},"11463":{"title":"Евпатория","children":[],"id":"11463"},"11464":{"title":"Керчь","children":[],"id":"11464"},"11469":{"title":"Феодосия","children":[],"id":"11469"},"11470":{"title":"Ялта","children":[],"id":"11470"},"20040":{"title":"Выкса","children":[],"id":"20040"},"20044":{"title":"Кстово","children":[],"id":"20044"},"20086":{"title":"Железногорск","children":[],"id":"20086"},"20235":{"title":"Октябрьский","children":[],"id":"20235"},"20237":{"title":"Березники","children":[],"id":"20237"},"20524":{"title":"Запад","children":[20532,20550,20529,20534,20531,20530,20535,20533],"id":"20524"},"20525":{"title":"Восток","children":[20537,20536,20539,20540,20538],"id":"20525"},"20526":{"title":"Юг","children":[20543,20541,20542],"id":"20526"},"20527":{"title":"Центр","children":[20545,20547,20544,20548,20549,20546],"id":"20527"},"20528":{"title":"Север","children":[20552,20551],"id":"20528"},"20529":{"title":"Львов и область","children":[],"id":"20529"},"20530":{"title":"Ужгород и Закарпатская область","children":[],"id":"20530"},"20531":{"title":"Тернополь и область","children":[],"id":"20531"},"20532":{"title":"Ивано-Франковск и область","children":[],"id":"20532"},"20533":{"title":"Черновцы и область","children":[],"id":"20533"},"20534":{"title":"Ровно и область","children":[],"id":"20534"},"20535":{"title":"Хмельницкий и область","children":[],"id":"20535"},"20536":{"title":"Донецк и область","children":[21774,142,20554,24876,10366],"id":"20536"},"20537":{"title":"Днепропетровск и область","children":[21775,141,10347,21773,28401],"id":"20537"},"20538":{"title":"Харьков и область","children":[],"id":"20538"},"20539":{"title":"Запорожье и область","children":[],"id":"20539"},"20540":{"title":"Луганск и область","children":[24885,222,24893],"id":"20540"},"20541":{"title":"Одесса и область","children":[],"id":"20541"},"20542":{"title":"Херсон и область","children":[],"id":"20542"},"20543":{"title":"Николаев и область","children":[],"id":"20543"},"20544":{"title":"Киев и область","children":[10369,143],"id":"20544"},"20545":{"title":"Винница и область","children":[],"id":"20545"},"20546":{"title":"Черкассы и область","children":[],"id":"20546"},"20547":{"title":"Житомир и область","children":[],"id":"20547"},"20548":{"title":"Кировоград и область","children":[],"id":"20548"},"20549":{"title":"Полтава и область","children":[21609,964],"id":"20549"},"20550":{"title":"Луцк и Волынская область","children":[],"id":"20550"},"20551":{"title":"Чернигов и область","children":[],"id":"20551"},"20552":{"title":"Сумы и область","children":[],"id":"20552"},"20554":{"title":"Краматорск","children":[],"id":"20554"},"20571":{"title":"Жуковский","children":[],"id":"20571"},"20574":{"title":"Кипр","children":[],"id":"20574"},"20728":{"title":"Королёв","children":[],"id":"20728"},"20809":{"title":"Кокшетау","children":[],"id":"20809"},"20975":{"title":"Камбоджа","children":[],"id":"20975"},"21154":{"title":"Тутаев","children":[],"id":"21154"},"21609":{"title":"Кременчуг","children":[],"id":"21609"},"21619":{"title":"Фрязино","children":[],"id":"21619"},"21620":{"title":"Юбилейный","children":[],"id":"21620"},"21622":{"title":"Железнодорожный","children":[],"id":"21622"},"21623":{"title":"Ивантеевка","children":[],"id":"21623"},"21773":{"title":"Никополь","children":[],"id":"21773"},"21774":{"title":"Горловка","children":[],"id":"21774"},"21775":{"title":"Днепродзержинск","children":[],"id":"21775"},"21949":{"title":"Забайкальский край","children":[],"id":"21949"},"24876":{"title":"Макеевка","children":[],"id":"24876"},"24885":{"title":"Алчевск","children":[],"id":"24885"},"24893":{"title":"Северодонецк","children":[],"id":"24893"},"28401":{"title":"Павлоград","children":[],"id":"28401"},"29386":{"title":"Абхазия","children":[],"id":"29386"},"29403":{"title":"Астана и Акмолинская область","children":[163,20809],"id":"29403"},"29404":{"title":"Актобе и область","children":[],"id":"29404"},"29406":{"title":"Алматы и область","children":[162,10303],"id":"29406"},"29407":{"title":"Атырау и область","children":[],"id":"29407"},"29408":{"title":"Восточно-Казахстанская область","children":[165,10306],"id":"29408"},"29409":{"title":"Тараз и Жамбылская область","children":[],"id":"29409"},"29410":{"title":"Западно-Казахстанская область","children":[],"id":"29410"},"29411":{"title":"Караганда и область","children":[],"id":"29411"},"29412":{"title":"Костанай и область","children":[],"id":"29412"},"29413":{"title":"Кызылорда и область","children":[],"id":"29413"},"29414":{"title":"Актау и Мангистауская область","children":[],"id":"29414"},"29415":{"title":"Павлодар и область","children":[],"id":"29415"},"29416":{"title":"Северо-Казахстанская область","children":[],"id":"29416"},"29417":{"title":"Южно-Казахстанская область","children":[],"id":"29417"},"29629":{"title":"Могилёв и область","children":[],"id":"29629"},"29630":{"title":"Минск и область","children":[],"id":"29630"},"29631":{"title":"Гомель и область","children":[],"id":"29631"},"29632":{"title":"Брест и область","children":[],"id":"29632"},"29633":{"title":"Витебск и область","children":[],"id":"29633"},"29634":{"title":"Гродно и область","children":[],"id":"29634"},"37133":{"title":"Новочебоксарск","children":[],"id":"37133"},"37147":{"title":"Климовск","children":[],"id":"37147"},"102444":{"title":"Северный Кавказ","children":[11020,11010,11012,11013,11021,11069,11024],"id":"102444"},"103668":{"title":"Провинция Агры","children":[],"id":"103668"},"103669":{"title":"Провинция Адана","children":[],"id":"103669"},"103670":{"title":"Провинция Адыяман","children":[],"id":"103670"},"103671":{"title":"Провинция Айдын","children":[],"id":"103671"},"103672":{"title":"Провинция Аксарай","children":[],"id":"103672"},"103673":{"title":"Провинция Амасья","children":[],"id":"103673"},"103674":{"title":"Провинция Анкара","children":[],"id":"103674"},"103675":{"title":"Провинция Анталья","children":[],"id":"103675"},"103676":{"title":"Провинция Ардахан","children":[],"id":"103676"},"103677":{"title":"Провинция Артвин","children":[],"id":"103677"},"103678":{"title":"Провинция Афьонкарахисар","children":[],"id":"103678"},"103679":{"title":"Провинция Байбурт","children":[],"id":"103679"},"103680":{"title":"Провинция Балыкесир","children":[],"id":"103680"},"103681":{"title":"Провинция Бартын","children":[],"id":"103681"},"103682":{"title":"Провинция Батман","children":[],"id":"103682"},"103683":{"title":"Провинция Биледжик","children":[],"id":"103683"},"103684":{"title":"Провинция Бингёль","children":[],"id":"103684"},"103685":{"title":"Провинция Битлис","children":[],"id":"103685"},"103686":{"title":"Провинция Болу","children":[],"id":"103686"},"103687":{"title":"Провинция Бурдур","children":[],"id":"103687"},"103688":{"title":"Провинция Бурса","children":[],"id":"103688"},"103689":{"title":"Провинция Ван","children":[],"id":"103689"},"103690":{"title":"Провинция Газиантеп","children":[],"id":"103690"},"103691":{"title":"Провинция Гиресун","children":[],"id":"103691"},"103692":{"title":"Провинция Гюмюшхане","children":[],"id":"103692"},"103693":{"title":"Провинция Денизли","children":[],"id":"103693"},"103694":{"title":"Провинция Диярбакыр","children":[],"id":"103694"},"103695":{"title":"Провинция Дюздже","children":[],"id":"103695"},"103696":{"title":"Провинция Зонгулдак","children":[],"id":"103696"},"103697":{"title":"Провинция Измир","children":[],"id":"103697"},"103698":{"title":"Провинция Йозгат","children":[],"id":"103698"},"103699":{"title":"Провинция Кайсери","children":[],"id":"103699"},"103700":{"title":"Провинция Карабюк","children":[],"id":"103700"},"103701":{"title":"Провинция Караман","children":[],"id":"103701"},"103702":{"title":"Провинция Карс","children":[],"id":"103702"},"103703":{"title":"Провинция Кастамону","children":[],"id":"103703"},"103704":{"title":"Провинция Кахраманмараш","children":[],"id":"103704"},"103705":{"title":"Провинция Килис","children":[],"id":"103705"},"103706":{"title":"Провинция Коджаэли","children":[],"id":"103706"},"103707":{"title":"Провинция Конья","children":[],"id":"103707"},"103708":{"title":"Провинция Кыркларели","children":[],"id":"103708"},"103709":{"title":"Провинция Кыршехир","children":[],"id":"103709"},"103710":{"title":"Провинция Кырыккале","children":[],"id":"103710"},"103711":{"title":"Провинция Кютахья","children":[],"id":"103711"},"103712":{"title":"Провинция Малатья","children":[],"id":"103712"},"103713":{"title":"Провинция Маниса","children":[],"id":"103713"},"103714":{"title":"Провинция Мардин","children":[],"id":"103714"},"103715":{"title":"Провинция Мерсин","children":[],"id":"103715"},"103716":{"title":"Провинция Мугла","children":[],"id":"103716"},"103717":{"title":"Провинция Муш","children":[],"id":"103717"},"103718":{"title":"Провинция Невшехир","children":[],"id":"103718"},"103719":{"title":"Провинция Нигде","children":[],"id":"103719"},"103720":{"title":"Провинция Орду","children":[],"id":"103720"},"103721":{"title":"Провинция Османие","children":[],"id":"103721"},"103722":{"title":"Провинция Ризе","children":[],"id":"103722"},"103723":{"title":"Провинция Сакарья","children":[],"id":"103723"},"103724":{"title":"Провинция Самсун","children":[],"id":"103724"},"103725":{"title":"Провинция Сивас","children":[],"id":"103725"},"103726":{"title":"Провинция Сиирт","children":[],"id":"103726"},"103727":{"title":"Провинция Синоп","children":[],"id":"103727"},"103728":{"title":"Провинция Стамбул","children":[],"id":"103728"},"103729":{"title":"Провинция Текирдаг","children":[],"id":"103729"},"103730":{"title":"Провинция Токат","children":[],"id":"103730"},"103731":{"title":"Провинция Трабзон","children":[],"id":"103731"},"103732":{"title":"Провинция Тунджели","children":[],"id":"103732"},"103733":{"title":"Провинция Ушак","children":[],"id":"103733"},"103734":{"title":"Провинция Хаккяри","children":[],"id":"103734"},"103735":{"title":"Провинция Хатай","children":[],"id":"103735"},"103736":{"title":"Провинция Чанаккале","children":[],"id":"103736"},"103737":{"title":"Провинция Чанкыры","children":[],"id":"103737"},"103738":{"title":"Провинция Чорум","children":[],"id":"103738"},"103739":{"title":"Провинция Шанлыурфа","children":[],"id":"103739"},"103740":{"title":"Провинция Ширнак","children":[],"id":"103740"},"103741":{"title":"Провинция Ыгдыр","children":[],"id":"103741"},"103742":{"title":"Провинция Испарта","children":[],"id":"103742"},"103743":{"title":"Провинция Эдирне","children":[],"id":"103743"},"103744":{"title":"Провинция Элязыг","children":[],"id":"103744"},"103745":{"title":"Провинция Эрзинджан","children":[],"id":"103745"},"103746":{"title":"Провинция Эрзурум","children":[],"id":"103746"},"103747":{"title":"Провинция Эскишехир","children":[],"id":"103747"},"103748":{"title":"Провинция Ялова","children":[],"id":"103748"}};
\ No newline at end of file
diff --git a/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.view/tree.css b/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.view/tree.css
new file mode 100755
index 00000000..43bd2a01
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.view/tree.css
@@ -0,0 +1,37 @@
+.tree, .tree ul {
+	list-style: none;
+	margin: 0;
+	padding: 2px;
+}
+
+.tree .tree-open ul {
+	display: block;
+}
+
+
+.tree .tree-closed ul {
+	display: none;
+}
+
+.tree-toggler {
+	color: blue;
+	cursor: pointer;
+	float: left;
+	margin-left: -16px;
+	width: 1em;
+	height: 1em;
+}
+
+.tree-open .tree-toggler {
+	background: url(http://js.cx/tree/minus.gif) no-repeat center;
+}
+
+
+.tree-closed .tree-toggler {
+	background: url(http://js.cx/tree/plus.gif) no-repeat center;
+}
+
+.tree li {
+	line-height: 1em;
+	padding-left: 16px;
+}
diff --git a/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.view/tree.js b/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.view/tree.js
new file mode 100755
index 00000000..fb9cc7ea
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.view/tree.js
@@ -0,0 +1,74 @@
+
+function Tree(options) {
+  var self = this;
+
+  var template = options.template;
+
+  var data = options.data;
+
+  this.getElement = function() {
+  	if (!this.elem) render();
+  	return this.elem;
+  }
+
+  function onTogglerClick(e) { 
+  	self.toggle( $(e.currentTarget.parentNode) );
+  }
+
+  function onCheckboxChange(e) { 
+    var checked = e.target.checked;
+    var id = e.target.value;
+    var node = $(e.currentTarget.parentNode);
+
+    if (checked) {
+      self.open(node);
+    }
+
+    node.find('input').prop('checked', checked);
+  }
+
+  this.toggle = function(node) { 
+  	ensureChildrenRendered(node);
+  	node.toggleClass("tree-open tree-closed");
+  };
+
+  this.open = function(node) {
+    ensureChildrenRendered(node);
+    node.addClass("tree-open").removeClass("tree-closed");
+  }
+
+  this.close = function(node) {
+    ensureChildrenRendered(node);
+    node.addClass("tree-closed").removeClass("tree-open");
+  }
+
+  function ensureChildrenRendered(node) {
+    var ul = node.children('ul');
+
+  	if (!ul.length) {
+  		renderChildren( node.data('id') ).appendTo(node);
+
+      if (node.children('input').is(':checked')) {
+        node.find('input').prop('checked', true);
+      }
+  	}
+  }
+
+  function renderChildren(id) {
+  	return $(template({
+  		children: data[id].children,
+  		data: data
+  	}));
+  }
+
+  function render() {
+  	
+  	self.elem = renderChildren(0)
+  	 .addClass('tree');
+
+  	self.elem.on('click', '.tree-toggler', onTogglerClick);
+
+    self.elem.on('change', 'input', onCheckboxChange);
+  }
+
+}
diff --git a/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/source.view/index.html b/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/source.view/index.html
new file mode 100755
index 00000000..3458b92e
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/source.view/index.html
@@ -0,0 +1,356 @@
+<html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<!-- saved from url=(0095)http://wordstat.yandex.ru/regions_ru.html?cmd=showgeo&media=&geo=&bid=undefined&my_id=undefined -->
+<title>Выбор регионов</title>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
+<script type="text/javascript">
+
+function GenerateAll() {
+  
+  var geo = '';
+  if ( !geo.match(/\d/) && document.location.search && document.location.search.match(/.*&?geo=([\d,]+).*/) ) {
+  	geo = document.location.search.replace(/%2C/ig, ',').replace(/.*&?geo=([\d,-]+).*/, "$1");
+  }
+  
+  
+  var rs = geo.split(/,/);
+  for (var l = 0; l < rs.length; l++) {
+    if (rs[l]) {
+      var numReg = rs[l];
+      if (rs[l] < 0) {
+        numReg = -rs[l];
+      }
+
+      for (var m = 0; m < reg_form.length; m++) {
+        var regexp = new RegExp('(^|[^0-9]+)' + numReg + '[^0-9]+');
+        if (regexp.test(reg_form[m].id)) {
+
+          if (rs[l] > 0) {
+            reg_form[m].checked = true;
+          } else {
+            reg_form[m].checked = false;
+          }
+          Generate(reg_form[m]);
+          openTree(reg_form[m]);
+          break;
+        }
+      }
+    }
+  }
+    
+}
+
+function collapseRegions(parent) {
+    parent = parent || document.getElementById('beginRegions');
+    var regionsBlocks = parent.childNodes;
+    for (var i = 0;  i < regionsBlocks.length; i++) {
+        if (regionsBlocks[i].tagName && regionsBlocks[i].tagName.toLowerCase() == 'div'
+                && regionsBlocks[i].id && regionsBlocks[i].id.indexOf('region') != -1 && regionsBlocks[i].style.display == 'block') {
+
+            var regionId = regionsBlocks[i].id.match(/^region(\d*)?/)[1];
+
+            if (parent != document.getElementById('beginRegions')) {
+                regtree(regionId);
+            }
+            changeSign(regionId, true);
+            collapseRegions(regionsBlocks[i]);
+        }
+    }
+}
+
+function quick_choose( reg_id, dont_collapse ) {
+    var regexp = new RegExp('(^|[^0-9]+)' + reg_id + '[^0-9]+');
+    if (!dont_collapse) {
+        reg_form.reset();
+        collapseRegions();
+    }
+    for (var m = 0; m < reg_form.length; m++) {
+        if (regexp.test( reg_form[m].id ) ) {
+            reg_form[m].checked = true;
+            Generate(reg_form[m]);
+            openTree(reg_form[m]);
+            return;
+        }
+    }
+}
+
+// Открываем дерево до текущего элемента
+function openTree(f) {
+    if ( !f || !f.id ) {
+        return;
+    }
+    // Находим id всех отцов
+    var parents_ids = f.id.replace(/^_+|_+$/g, '').split(/_/);
+    for( var i = 0; i < parents_ids.length - 1; i++ ) {
+        var d = document.getElementById( 'region' + parents_ids[i] );
+        if ( d && d.style ) {
+            // Открываем сам элемент
+            d.style.display = 'block';
+            // меняем знак
+            var a = document.getElementById('link'+parents_ids[i]);
+            if ( a ) a.innerHTML = "&#150;";
+            // Если это последний элемент - ничего не делаем
+            if ( i != parents_ids.length - 1 ) {
+                // Открываем всех соседей
+                var cn = d.childNodes;
+                for( var j = 0; j < cn.length; j++ ) {
+                    if ( cn[j] && cn[j].tagName == 'DIV' && cn[j].style ) {
+                        cn[j].style.display = 'block';
+                    }
+                }
+            }
+        }
+    }
+}
+
+function Generate(f, no_child_check) {
+    if ( !f || f.checked == null ) return;
+    var parent_id = f.id.replace(/\d+_$/, '');
+    var all_checked = true, all_unchecked = true;
+    var checked_num = 0, unchecked_num = 0;
+
+    var parent_id_res = parent_id;    
+    if( parent_id.match( '^[0-9]+_[0-9]+_' ) )
+    {
+         pra_parent_id = parent_id.replace(/\d+_$/, '');
+	   var bc = document.getElementById(pra_parent_id);				
+	   if( bc.checked )
+	   {
+        	var abc = document.getElementById(parent_id);
+        	abc.checked = true;
+         }
+    }
+    parent_id = parent_id_res;
+
+    var one_of_parents_cheched = false;
+    for (var j=0; j < reg_form.length; j++) {
+        // идет внутрь и чекает детей
+        if (
+            reg_form[j].id.indexOf(f.id) == 0
+            && f.id != reg_form[j].id
+            && !no_child_check
+        ) {
+            !reg_form[j].disabled && (reg_form[j].checked =  f.checked);
+        }
+        // проверяем чекнутость родителей
+        if (
+            f.id.indexOf(reg_form[j].id) == 0
+            && f.id != reg_form[j].id
+        ) {
+            if (reg_form[j].checked) one_of_parents_cheched = true;
+        } 
+        // Проверяем детей на чекнутость
+        if (
+            reg_form[j].id.indexOf(parent_id) == 0
+            && reg_form[j].id != parent_id
+        ) {
+            all_checked = all_checked && reg_form[j].checked;
+            if (reg_form[j].checked) checked_num++;
+            all_unchecked = all_unchecked && !reg_form[j].checked;
+            if (!reg_form[j].checked) unchecked_num++;
+        }
+    }
+    // меняем, если нужно статуc отца
+    var parent_chk = document.getElementById(parent_id);
+    if (parent_chk && !parent_chk.checked
+        && checked_num > 0 && one_of_parents_cheched
+    ) {
+        parent_chk.checked = true;
+        Generate(parent_chk, true);       
+    }
+    // Специальное ограничение для медийки, СЗ регион - нельзя СЗ,-Санкт-Петербург
+    if (
+        parent_chk && all_checked && checked_num > 1
+        && !parent_chk.checked
+    ) {
+        parent_chk.checked = true;
+        Generate(parent_chk);
+    } else if (
+        parent_chk && all_unchecked 
+        && (unchecked_num > 1 || parent_chk.id.match(/_17_$/))
+        && parent_chk.checked
+    ) {
+        parent_chk.checked = false;
+        Generate(parent_chk);
+    }
+    if ( f.checked ) {
+        // Получаем текущий id
+        var re = new RegExp('(?:[0-9_]*?)?([0-9]+)_$');
+        var reg_id = f.id.replace(re, '$1');
+        var a = document.getElementById('link'+reg_id);
+        if ( a ) { a.innerHTML = "&#150;"; }
+        // Открываем всех соседей
+        var cn = f.parentNode.childNodes;
+        for( var j = 0; j < cn.length; j++ ) {
+            if ( cn[j] && cn[j].tagName == 'DIV' && cn[j].style ) {
+                cn[j].style.display = 'block';
+            }
+        }
+    }
+}
+
+function save(f) {
+  document.getElementById("debug").innerHTML = "";
+
+  regions_name = '';
+  regions_name_with_comas = '';
+  regions_id = '';
+  regions_exept_flag = false;
+  var bid = '';
+  regions = document.getElementById("beginRegions").childNodes;
+
+  //document.getElementById("debug").innerHTML = regions.length + "<br>";
+
+  for (i = 0; i < regions.length; i++) {
+    if (regions.item(i).tagName == 'DIV') {
+      processReg(regions.item(i));
+    }
+  }
+
+  //document.getElementById("debug").innerHTML += regions_name + "<br>" + regions_id + "<br>";
+  if(!regions_name) regions_name = "Россия\nСНГ (исключая Россию)\nЕвропа\nАзия\nАфрика\nСеверная Америка\nЮжная Америка\nАвстралия и Океания";
+  if(!regions_name_with_comas) regions_name_with_comas = "Россия, СНГ (исключая Россию), Европа, Азия, Африка, Северная Америка, Южная Америка, Австралия и Океания";
+  if(!regions_id) regions_id = "0";
+  if(regions_exept_flag) regions_name += ')\n';
+  if(regions_exept_flag) regions_name_with_comas += ')';
+  
+     opener.window.showGeo(bid, regions_id, regions_name_with_comas);
+  
+  window.close();
+}
+
+function processReg(div) {
+  var childs = div.childNodes;
+
+  var parentChecked = false;
+  for (var i = 0; i < childs.length; i++) {
+    if (childs.item(i).type == 'checkbox') {
+
+      parentChilds = childs.item(i).parentNode.parentNode.childNodes;
+      for (j = 0; j < parentChilds.length; j++) {
+            if (parentChilds[j].type == 'checkbox') {
+              parentChecked = parentChilds[j].checked;
+            }
+      }
+
+      ids = childs.item(i).id.split('_');
+      if (childs.item(i).checked && !parentChecked ) {
+        //document.getElementById("debug").innerHTML += childs.item(i).value + " " + ids[ids.length - 2] + "<br>";
+        if (regions_exept_flag) {
+            regions_name += ')\n';
+            regions_name_with_comas += '), ';
+            regions_exept_flag = false;
+        } else if (regions_name != '') {
+            regions_name += '\n';
+            regions_name_with_comas += ', ';
+        }
+        regions_name += childs.item(i).value;
+        regions_name_with_comas += childs.item(i).value;
+        regions_id += ids[ids.length - 2] + ",";
+      } 
+      
+      if (!childs.item(i).checked && parentChecked) {
+        //document.getElementById("debug").innerHTML += "&#151;" + childs.item(i).value + "<br>";
+        if (regions_exept_flag) {
+            regions_name += ", " + childs.item(i).value;
+            regions_name_with_comas += ", " + childs.item(i).value;
+        } else {
+            regions_exept_flag = true;
+            regions_name += " (кроме: " + childs.item(i).value;
+            regions_name_with_comas += " (кроме: " + childs.item(i).value;
+        }
+        regions_id += "-" + ids[ids.length - 2] + ",";
+      }
+    }
+
+    if (childs.item(i).tagName == 'DIV') {
+      processReg(childs.item(i));
+    }
+
+  }
+}
+
+function regtree(regID) {
+  regID = document.getElementById("region" + regID);
+  if (regID.style.display == 'none') {
+      regID.style.display = 'block';
+        }
+  else {
+      regID.style.display = 'none';
+        }
+  return false;
+}
+
+function changeSign(regID, toPlusOnly) {
+  regID = document.getElementById("link" + regID);
+  if (!regID) { return; }
+  if (regID.innerHTML == "+" && !toPlusOnly) {
+    regID.innerHTML = "&#150;";
+  } else {
+    regID.innerHTML = "+";
+  }
+
+  return false;
+}
+
+</script>
+<style type="text/css">
+    body { font-family: Arial, sans-serif; }
+    table.geoSelect {font-size:80%;}
+    table.geoSelect div {margin:0 20px 1em 20px; font-weight:bold; text-indent:-20px;}
+    table.geoSelect div div {margin:0.3em 0 0 20px; font-weight:normal; text-indent:-20px}
+    a.alias {
+        margin-right: 1px;
+    }
+    a.alias:visited {
+        color: blue;
+    }
+    div#quick {
+        float: right;
+        text-align: left; 
+        font-weight: normal; 
+        text-indent: 0;
+        line-height: 120%;
+        padding: 10px;
+    }
+</style>
+</head>
+<body bgcolor="white" marginheight="0" marginwidth="20" topmargin="0" rightmargin="20" bottommargin="0" leftmargin="20" class="window" onload="GenerateAll();">
+
+
+<div id="debug"></div>
+
+
+<h2 style="margin:0">Выбор регионов для показов объявлений</h2>
+
+<form name="reg" onclick="javascript:Generate(this)">
+<table border="0" width="100%" cellspacing="0" cellpadding="0" class="geoSelect">
+<tbody><tr>
+
+<td bgcolor="#F0F1F3" style="border-right:white 20px solid;">
+
+</td>
+</tr>
+
+<tr valign="top">
+<td id="beginRegions" style="padding-top: 1em;">
+
+
+        
+<div id="region225" style="display: block;"> <a name="name225" style="text-decoration: none" id="link225" href="javascript://" onclick="regtree(3);regtree(17);regtree(40);regtree(26);regtree(59);regtree(73);regtree(102444);regtree(52);changeSign(225);">+</a>&nbsp; <input id="225_" value="Россия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_">Россия</label> <div id="region3" style="display: none; "> <a name="name3" style="text-decoration: none" id="link3" href="javascript://" onclick="regtree(1);regtree(10645);regtree(10650);regtree(10658);regtree(10672);regtree(10687);regtree(10693);regtree(10699);regtree(10705);regtree(10712);regtree(10772);regtree(10776);regtree(10795);regtree(10802);regtree(10819);regtree(10832);regtree(10841);changeSign(3);">+</a>&nbsp; <input id="225_3_" value="Центр" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_">Центр</label> <div id="region1" style="display: none;"> <a name="name1" style="text-decoration: none" id="link1" href="javascript://" onclick="regtree(213);regtree(10716);regtree(10722);regtree(10723);regtree(214);regtree(215);regtree(21622);regtree(20571);regtree(21623);regtree(37147);regtree(10734);regtree(20728);regtree(10735);regtree(10739);regtree(10745);regtree(10747);regtree(217);regtree(10750);regtree(10752);regtree(10754);regtree(21619);regtree(219);regtree(10765);regtree(21620);changeSign(1);">+</a>&nbsp; <input id="225_3_1_" value="Москва и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_">Москва и область</label> <div id="region213" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name213"></a> <input id="225_3_1_213_" value="Москва" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_213_">Москва</label> </div> <div id="region10716" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10716"></a> <input id="225_3_1_10716_" value="Балашиха" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_10716_">Балашиха</label> </div> <div id="region10722" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10722"></a> <input id="225_3_1_10722_" value="Воскресенск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_10722_">Воскресенск</label> </div> <div id="region10723" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10723"></a> <input id="225_3_1_10723_" value="Дмитров" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_10723_">Дмитров</label> </div> <div id="region214" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name214"></a> <input id="225_3_1_214_" value="Долгопрудный" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_214_">Долгопрудный</label> </div> <div id="region215" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name215"></a> <input id="225_3_1_215_" value="Дубна" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_215_">Дубна</label> </div> <div id="region21622" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name21622"></a> <input id="225_3_1_21622_" value="Железнодорожный" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_21622_">Железнодорожный</label> </div> <div id="region20571" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20571"></a> <input id="225_3_1_20571_" value="Жуковский" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_20571_">Жуковский</label> </div> <div id="region21623" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name21623"></a> <input id="225_3_1_21623_" value="Ивантеевка" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_21623_">Ивантеевка</label> </div> <div id="region37147" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name37147"></a> <input id="225_3_1_37147_" value="Климовск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_37147_">Климовск</label> </div> <div id="region10734" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10734"></a> <input id="225_3_1_10734_" value="Коломна" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_10734_">Коломна</label> </div> <div id="region20728" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20728"></a> <input id="225_3_1_20728_" value="Королёв" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_20728_">Королёв</label> </div> <div id="region10735" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10735"></a> <input id="225_3_1_10735_" value="Красногорск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_10735_">Красногорск</label> </div> <div id="region10739" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10739"></a> <input id="225_3_1_10739_" value="Можайск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_10739_">Можайск</label> </div> <div id="region10745" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10745"></a> <input id="225_3_1_10745_" value="Орехово-Зуево" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_10745_">Орехово-Зуево</label> </div> <div id="region10747" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10747"></a> <input id="225_3_1_10747_" value="Подольск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_10747_">Подольск</label> </div> <div id="region217" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name217"></a> <input id="225_3_1_217_" value="Пущино" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_217_">Пущино</label> </div> <div id="region10750" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10750"></a> <input id="225_3_1_10750_" value="Раменское" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_10750_">Раменское</label> </div> <div id="region10752" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10752"></a> <input id="225_3_1_10752_" value="Сергиев Посад" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_10752_">Сергиев Посад</label> </div> <div id="region10754" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10754"></a> <input id="225_3_1_10754_" value="Серпухов" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_10754_">Серпухов</label> </div> <div id="region21619" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name21619"></a> <input id="225_3_1_21619_" value="Фрязино" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_21619_">Фрязино</label> </div> <div id="region219" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name219"></a> <input id="225_3_1_219_" value="Черноголовка" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_219_">Черноголовка</label> </div> <div id="region10765" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10765"></a> <input id="225_3_1_10765_" value="Щелково" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_10765_">Щелково</label> </div> <div id="region21620" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name21620"></a> <input id="225_3_1_21620_" value="Юбилейный" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_1_21620_">Юбилейный</label> </div> </div> <div id="region10645" style="display: none;"> <a name="name10645" style="text-decoration: none" id="link10645" href="javascript://" onclick="regtree(4);regtree(10649);changeSign(10645);">+</a>&nbsp; <input id="225_3_10645_" value="Белгород и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10645_">Белгород и область</label> <div id="region4" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name4"></a> <input id="225_3_10645_4_" value="Белгород" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10645_4_">Белгород</label> </div> <div id="region10649" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10649"></a> <input id="225_3_10645_10649_" value="Старый Оскол" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10645_10649_">Старый Оскол</label> </div> </div> <div id="region10650" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10650"></a> <input id="225_3_10650_" value="Брянск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10650_">Брянск и область</label> </div> <div id="region10658" style="display: none;"> <a name="name10658" style="text-decoration: none" id="link10658" href="javascript://" onclick="regtree(192);regtree(10664);regtree(10668);changeSign(10658);">+</a>&nbsp; <input id="225_3_10658_" value="Владимир и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10658_">Владимир и область</label> <div id="region192" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name192"></a> <input id="225_3_10658_192_" value="Владимир" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10658_192_">Владимир</label> </div> <div id="region10664" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10664"></a> <input id="225_3_10658_10664_" value="Ковров" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10658_10664_">Ковров</label> </div> <div id="region10668" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10668"></a> <input id="225_3_10658_10668_" value="Муром" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10658_10668_">Муром</label> </div> </div> <div id="region10672" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10672"></a> <input id="225_3_10672_" value="Воронеж и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10672_">Воронеж и область</label> </div> <div id="region10687" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10687"></a> <input id="225_3_10687_" value="Иваново и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10687_">Иваново и область</label> </div> <div id="region10693" style="display: none;"> <a name="name10693" style="text-decoration: none" id="link10693" href="javascript://" onclick="regtree(6);regtree(967);changeSign(10693);">+</a>&nbsp; <input id="225_3_10693_" value="Калуга и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10693_">Калуга и область</label> <div id="region6" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name6"></a> <input id="225_3_10693_6_" value="Калуга" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10693_6_">Калуга</label> </div> <div id="region967" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name967"></a> <input id="225_3_10693_967_" value="Обнинск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10693_967_">Обнинск</label> </div> </div> <div id="region10699" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10699"></a> <input id="225_3_10699_" value="Кострома и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10699_">Кострома и область</label> </div> <div id="region10705" style="display: none;"> <a name="name10705" style="text-decoration: none" id="link10705" href="javascript://" onclick="regtree(10710);regtree(8);changeSign(10705);">+</a>&nbsp; <input id="225_3_10705_" value="Курск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10705_">Курск и область</label> <div id="region10710" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10710"></a> <input id="225_3_10705_10710_" value="Железногорск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10705_10710_">Железногорск</label> </div> <div id="region8" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name8"></a> <input id="225_3_10705_8_" value="Курск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10705_8_">Курск</label> </div> </div> <div id="region10712" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10712"></a> <input id="225_3_10712_" value="Липецк и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10712_">Липецк и область</label> </div> <div id="region10772" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10772"></a> <input id="225_3_10772_" value="Орел и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10772_">Орел и область</label> </div> <div id="region10776" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10776"></a> <input id="225_3_10776_" value="Рязань и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10776_">Рязань и область</label> </div> <div id="region10795" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10795"></a> <input id="225_3_10795_" value="Смоленск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10795_">Смоленск и область</label> </div> <div id="region10802" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10802"></a> <input id="225_3_10802_" value="Тамбов и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10802_">Тамбов и область</label> </div> <div id="region10819" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10819"></a> <input id="225_3_10819_" value="Тверь и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10819_">Тверь и область</label> </div> <div id="region10832" style="display: none;"> <a name="name10832" style="text-decoration: none" id="link10832" href="javascript://" onclick="regtree(10830);regtree(15);changeSign(10832);">+</a>&nbsp; <input id="225_3_10832_" value="Тула и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10832_">Тула и область</label> <div id="region10830" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10830"></a> <input id="225_3_10832_10830_" value="Новомосковск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10832_10830_">Новомосковск</label> </div> <div id="region15" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name15"></a> <input id="225_3_10832_15_" value="Тула" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10832_15_">Тула</label> </div> </div> <div id="region10841" style="display: none;"> <a name="name10841" style="text-decoration: none" id="link10841" href="javascript://" onclick="regtree(10839);regtree(21154);regtree(16);changeSign(10841);">+</a>&nbsp; <input id="225_3_10841_" value="Ярославль и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10841_">Ярославль и область</label> <div id="region10839" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10839"></a> <input id="225_3_10841_10839_" value="Рыбинск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10841_10839_">Рыбинск</label> </div> <div id="region21154" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name21154"></a> <input id="225_3_10841_21154_" value="Тутаев" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10841_21154_">Тутаев</label> </div> <div id="region16" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name16"></a> <input id="225_3_10841_16_" value="Ярославль" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_3_10841_16_">Ярославль</label> </div> </div> </div> <div id="region17" style="display: none; "> <a name="name17" style="text-decoration: none" id="link17" href="javascript://" onclick="regtree(10174);regtree(10842);regtree(10904);regtree(10853);regtree(10857);regtree(10897);regtree(10176);regtree(10926);regtree(10933);regtree(10939);changeSign(17);">+</a>&nbsp; <input id="225_17_" value="Северо-Запад" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_">Северо-Запад</label> <div id="region10174" style="display: none;"> <a name="name10174" style="text-decoration: none" id="link10174" href="javascript://" onclick="regtree(10864);regtree(10865);regtree(969);regtree(10867);regtree(10871);regtree(2);regtree(10891);regtree(10892);changeSign(10174);">+</a>&nbsp; <input id="225_17_10174_" value="Санкт-Петербург и Ленинградская область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10174_">Санкт-Петербург и Ленинградская область</label> <div id="region10864" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10864"></a> <input id="225_17_10174_10864_" value="Волхов" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10174_10864_">Волхов</label> </div> <div id="region10865" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10865"></a> <input id="225_17_10174_10865_" value="Всеволожск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10174_10865_">Всеволожск</label> </div> <div id="region969" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name969"></a> <input id="225_17_10174_969_" value="Выборг" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10174_969_">Выборг</label> </div> <div id="region10867" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10867"></a> <input id="225_17_10174_10867_" value="Гатчина" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10174_10867_">Гатчина</label> </div> <div id="region10871" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10871"></a> <input id="225_17_10174_10871_" value="Кириши" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10174_10871_">Кириши</label> </div> <div id="region2" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name2"></a> <input id="225_17_10174_2_" value="Санкт-Петербург" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10174_2_">Санкт-Петербург</label> </div> <div id="region10891" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10891"></a> <input id="225_17_10174_10891_" value="Сосновый Бор" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10174_10891_">Сосновый Бор</label> </div> <div id="region10892" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10892"></a> <input id="225_17_10174_10892_" value="Тихвин" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10174_10892_">Тихвин</label> </div> </div> <div id="region10842" style="display: none;"> <a name="name10842" style="text-decoration: none" id="link10842" href="javascript://" onclick="regtree(20);regtree(10849);changeSign(10842);">+</a>&nbsp; <input id="225_17_10842_" value="Архангельск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10842_">Архангельск и область</label> <div id="region20" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20"></a> <input id="225_17_10842_20_" value="Архангельск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10842_20_">Архангельск</label> </div> <div id="region10849" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10849"></a> <input id="225_17_10842_10849_" value="Северодвинск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10842_10849_">Северодвинск</label> </div> </div> <div id="region10904" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10904"></a> <input id="225_17_10904_" value="Великий Новгород и Новгородская область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10904_">Великий Новгород и Новгородская область</label> </div> <div id="region10853" style="display: none;"> <a name="name10853" style="text-decoration: none" id="link10853" href="javascript://" onclick="regtree(21);regtree(968);changeSign(10853);">+</a>&nbsp; <input id="225_17_10853_" value="Вологда и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10853_">Вологда и область</label> <div id="region21" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name21"></a> <input id="225_17_10853_21_" value="Вологда" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10853_21_">Вологда</label> </div> <div id="region968" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name968"></a> <input id="225_17_10853_968_" value="Череповец" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10853_968_">Череповец</label> </div> </div> <div id="region10857" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10857"></a> <input id="225_17_10857_" value="Калининград и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10857_">Калининград и область</label> </div> <div id="region10897" style="display: none;"> <a name="name10897" style="text-decoration: none" id="link10897" href="javascript://" onclick="regtree(10894);regtree(23);changeSign(10897);">+</a>&nbsp; <input id="225_17_10897_" value="Мурманск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10897_">Мурманск и область</label> <div id="region10894" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10894"></a> <input id="225_17_10897_10894_" value="Апатиты" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10897_10894_">Апатиты</label> </div> <div id="region23" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name23"></a> <input id="225_17_10897_23_" value="Мурманск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10897_23_">Мурманск</label> </div> </div> <div id="region10176" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10176"></a> <input id="225_17_10176_" value="Ненецкий автономный округ" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10176_">Ненецкий автономный округ</label> </div> <div id="region10926" style="display: none;"> <a name="name10926" style="text-decoration: none" id="link10926" href="javascript://" onclick="regtree(10928);regtree(25);changeSign(10926);">+</a>&nbsp; <input id="225_17_10926_" value="Псков и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10926_">Псков и область</label> <div id="region10928" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10928"></a> <input id="225_17_10926_10928_" value="Великие Луки" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10926_10928_">Великие Луки</label> </div> <div id="region25" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name25"></a> <input id="225_17_10926_25_" value="Псков" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10926_25_">Псков</label> </div> </div> <div id="region10933" style="display: none;"> <a name="name10933" style="text-decoration: none" id="link10933" href="javascript://" onclick="regtree(10934);regtree(18);regtree(10937);changeSign(10933);">+</a>&nbsp; <input id="225_17_10933_" value="Республика Карелия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10933_">Республика Карелия</label> <div id="region10934" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10934"></a> <input id="225_17_10933_10934_" value="Кондопога" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10933_10934_">Кондопога</label> </div> <div id="region18" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name18"></a> <input id="225_17_10933_18_" value="Петрозаводск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10933_18_">Петрозаводск</label> </div> <div id="region10937" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10937"></a> <input id="225_17_10933_10937_" value="Сортавала" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10933_10937_">Сортавала</label> </div> </div> <div id="region10939" style="display: none;"> <a name="name10939" style="text-decoration: none" id="link10939" href="javascript://" onclick="regtree(10940);regtree(19);regtree(10944);regtree(10945);changeSign(10939);">+</a>&nbsp; <input id="225_17_10939_" value="Республика Коми" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10939_">Республика Коми</label> <div id="region10940" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10940"></a> <input id="225_17_10939_10940_" value="Воркута" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10939_10940_">Воркута</label> </div> <div id="region19" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name19"></a> <input id="225_17_10939_19_" value="Сыктывкар" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10939_19_">Сыктывкар</label> </div> <div id="region10944" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10944"></a> <input id="225_17_10939_10944_" value="Усинск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10939_10944_">Усинск</label> </div> <div id="region10945" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10945"></a> <input id="225_17_10939_10945_" value="Ухта" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_17_10939_10945_">Ухта</label> </div> </div> </div> <div id="region40" style="display: none; "> <a name="name40" style="text-decoration: none" id="link40" href="javascript://" onclick="regtree(11070);regtree(11079);regtree(11084);regtree(11095);regtree(11108);regtree(11111);regtree(11077);regtree(11117);regtree(11119);regtree(11131);regtree(11146);regtree(11148);regtree(11153);regtree(11156);changeSign(40);">+</a>&nbsp; <input id="225_40_" value="Поволжье" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_">Поволжье</label> <div id="region11070" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11070"></a> <input id="225_40_11070_" value="Киров и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11070_">Киров и область</label> </div> <div id="region11079" style="display: none;"> <a name="name11079" style="text-decoration: none" id="link11079" href="javascript://" onclick="regtree(20040);regtree(972);regtree(20044);regtree(47);regtree(11083);changeSign(11079);">+</a>&nbsp; <input id="225_40_11079_" value="Нижний Новгород и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11079_">Нижний Новгород и область</label> <div id="region20040" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20040"></a> <input id="225_40_11079_20040_" value="Выкса" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11079_20040_">Выкса</label> </div> <div id="region972" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name972"></a> <input id="225_40_11079_972_" value="Дзержинск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11079_972_">Дзержинск</label> </div> <div id="region20044" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20044"></a> <input id="225_40_11079_20044_" value="Кстово" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11079_20044_">Кстово</label> </div> <div id="region47" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name47"></a> <input id="225_40_11079_47_" value="Нижний Новгород" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11079_47_">Нижний Новгород</label> </div> <div id="region11083" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11083"></a> <input id="225_40_11079_11083_" value="Саров" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11079_11083_">Саров</label> </div> </div> <div id="region11084" style="display: none;"> <a name="name11084" style="text-decoration: none" id="link11084" href="javascript://" onclick="regtree(48);regtree(11091);changeSign(11084);">+</a>&nbsp; <input id="225_40_11084_" value="Оренбург и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11084_">Оренбург и область</label> <div id="region48" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name48"></a> <input id="225_40_11084_48_" value="Оренбург" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11084_48_">Оренбург</label> </div> <div id="region11091" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11091"></a> <input id="225_40_11084_11091_" value="Орск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11084_11091_">Орск</label> </div> </div> <div id="region11095" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11095"></a> <input id="225_40_11095_" value="Пенза и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11095_">Пенза и область</label> </div> <div id="region11108" style="display: none;"> <a name="name11108" style="text-decoration: none" id="link11108" href="javascript://" onclick="regtree(20237);regtree(50);changeSign(11108);">+</a>&nbsp; <input id="225_40_11108_" value="Пермский край" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11108_">Пермский край</label> <div id="region20237" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20237"></a> <input id="225_40_11108_20237_" value="Березники" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11108_20237_">Березники</label> </div> <div id="region50" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name50"></a> <input id="225_40_11108_50_" value="Пермь" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11108_50_">Пермь</label> </div> </div> <div id="region11111" style="display: none;"> <a name="name11111" style="text-decoration: none" id="link11111" href="javascript://" onclick="regtree(11114);regtree(20235);regtree(11115);regtree(11116);regtree(172);changeSign(11111);">+</a>&nbsp; <input id="225_40_11111_" value="Республика Башкортостан" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11111_">Республика Башкортостан</label> <div id="region11114" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11114"></a> <input id="225_40_11111_11114_" value="Нефтекамск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11111_11114_">Нефтекамск</label> </div> <div id="region20235" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20235"></a> <input id="225_40_11111_20235_" value="Октябрьский" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11111_20235_">Октябрьский</label> </div> <div id="region11115" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11115"></a> <input id="225_40_11111_11115_" value="Салават" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11111_11115_">Салават</label> </div> <div id="region11116" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11116"></a> <input id="225_40_11111_11116_" value="Стерлитамак" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11111_11116_">Стерлитамак</label> </div> <div id="region172" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name172"></a> <input id="225_40_11111_172_" value="Уфа" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11111_172_">Уфа</label> </div> </div> <div id="region11077" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11077"></a> <input id="225_40_11077_" value="Республика Марий Эл" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11077_">Республика Марий Эл</label> </div> <div id="region11117" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11117"></a> <input id="225_40_11117_" value="Республика Мордовия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11117_">Республика Мордовия</label> </div> <div id="region11119" style="display: none;"> <a name="name11119" style="text-decoration: none" id="link11119" href="javascript://" onclick="regtree(11121);regtree(11122);regtree(43);regtree(236);regtree(11127);changeSign(11119);">+</a>&nbsp; <input id="225_40_11119_" value="Республика Татарстан" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11119_">Республика Татарстан</label> <div id="region11121" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11121"></a> <input id="225_40_11119_11121_" value="Альметьевск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11119_11121_">Альметьевск</label> </div> <div id="region11122" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11122"></a> <input id="225_40_11119_11122_" value="Бугульма" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11119_11122_">Бугульма</label> </div> <div id="region43" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name43"></a> <input id="225_40_11119_43_" value="Казань" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11119_43_">Казань</label> </div> <div id="region236" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name236"></a> <input id="225_40_11119_236_" value="Набережные Челны" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11119_236_">Набережные Челны</label> </div> <div id="region11127" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11127"></a> <input id="225_40_11119_11127_" value="Нижнекамск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11119_11127_">Нижнекамск</label> </div> </div> <div id="region11131" style="display: none;"> <a name="name11131" style="text-decoration: none" id="link11131" href="javascript://" onclick="regtree(11132);regtree(51);regtree(11139);regtree(240);changeSign(11131);">+</a>&nbsp; <input id="225_40_11131_" value="Самара и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11131_">Самара и область</label> <div id="region11132" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11132"></a> <input id="225_40_11131_11132_" value="Жигулевск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11131_11132_">Жигулевск</label> </div> <div id="region51" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name51"></a> <input id="225_40_11131_51_" value="Самара" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11131_51_">Самара</label> </div> <div id="region11139" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11139"></a> <input id="225_40_11131_11139_" value="Сызрань" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11131_11139_">Сызрань</label> </div> <div id="region240" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name240"></a> <input id="225_40_11131_240_" value="Тольятти" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11131_240_">Тольятти</label> </div> </div> <div id="region11146" style="display: none;"> <a name="name11146" style="text-decoration: none" id="link11146" href="javascript://" onclick="regtree(11143);regtree(194);regtree(11147);changeSign(11146);">+</a>&nbsp; <input id="225_40_11146_" value="Саратов и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11146_">Саратов и область</label> <div id="region11143" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11143"></a> <input id="225_40_11146_11143_" value="Балаково" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11146_11143_">Балаково</label> </div> <div id="region194" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name194"></a> <input id="225_40_11146_194_" value="Саратов" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11146_194_">Саратов</label> </div> <div id="region11147" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11147"></a> <input id="225_40_11146_11147_" value="Энгельс" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11146_11147_">Энгельс</label> </div> </div> <div id="region11148" style="display: none;"> <a name="name11148" style="text-decoration: none" id="link11148" href="javascript://" onclick="regtree(11150);regtree(44);regtree(11152);changeSign(11148);">+</a>&nbsp; <input id="225_40_11148_" value="Удмуртская Республика" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11148_">Удмуртская Республика</label> <div id="region11150" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11150"></a> <input id="225_40_11148_11150_" value="Глазов" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11148_11150_">Глазов</label> </div> <div id="region44" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name44"></a> <input id="225_40_11148_44_" value="Ижевск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11148_44_">Ижевск</label> </div> <div id="region11152" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11152"></a> <input id="225_40_11148_11152_" value="Сарапул" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11148_11152_">Сарапул</label> </div> </div> <div id="region11153" style="display: none;"> <a name="name11153" style="text-decoration: none" id="link11153" href="javascript://" onclick="regtree(11155);regtree(195);changeSign(11153);">+</a>&nbsp; <input id="225_40_11153_" value="Ульяновск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11153_">Ульяновск и область</label> <div id="region11155" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11155"></a> <input id="225_40_11153_11155_" value="Димитровград" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11153_11155_">Димитровград</label> </div> <div id="region195" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name195"></a> <input id="225_40_11153_195_" value="Ульяновск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11153_195_">Ульяновск</label> </div> </div> <div id="region11156" style="display: none;"> <a name="name11156" style="text-decoration: none" id="link11156" href="javascript://" onclick="regtree(37133);regtree(45);changeSign(11156);">+</a>&nbsp; <input id="225_40_11156_" value="Чувашская Республика" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11156_">Чувашская Республика</label> <div id="region37133" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name37133"></a> <input id="225_40_11156_37133_" value="Новочебоксарск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11156_37133_">Новочебоксарск</label> </div> <div id="region45" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name45"></a> <input id="225_40_11156_45_" value="Чебоксары" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_40_11156_45_">Чебоксары</label> </div> </div> </div> <div id="region26" style="display: none; "> <a name="name26" style="text-decoration: none" id="link26" href="javascript://" onclick="regtree(10946);regtree(10950);regtree(10995);regtree(11004);regtree(11015);regtree(11029);changeSign(26);">+</a>&nbsp; <input id="225_26_" value="Юг" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_">Юг</label> <div id="region10946" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10946"></a> <input id="225_26_10946_" value="Астрахань и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_10946_">Астрахань и область</label> </div> <div id="region10950" style="display: none;"> <a name="name10950" style="text-decoration: none" id="link10950" href="javascript://" onclick="regtree(38);regtree(10951);regtree(10959);changeSign(10950);">+</a>&nbsp; <input id="225_26_10950_" value="Волгоград и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_10950_">Волгоград и область</label> <div id="region38" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name38"></a> <input id="225_26_10950_38_" value="Волгоград" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_10950_38_">Волгоград</label> </div> <div id="region10951" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10951"></a> <input id="225_26_10950_10951_" value="Волжский" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_10950_10951_">Волжский</label> </div> <div id="region10959" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10959"></a> <input id="225_26_10950_10959_" value="Камышин" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_10950_10959_">Камышин</label> </div> </div> <div id="region10995" style="display: none;"> <a name="name10995" style="text-decoration: none" id="link10995" href="javascript://" onclick="regtree(1107);regtree(10987);regtree(10993);regtree(35);regtree(970);regtree(239);regtree(1058);changeSign(10995);">+</a>&nbsp; <input id="225_26_10995_" value="Краснодарский край" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_10995_">Краснодарский край</label> <div id="region1107" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name1107"></a> <input id="225_26_10995_1107_" value="Анапа" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_10995_1107_">Анапа</label> </div> <div id="region10987" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10987"></a> <input id="225_26_10995_10987_" value="Армавир" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_10995_10987_">Армавир</label> </div> <div id="region10993" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10993"></a> <input id="225_26_10995_10993_" value="Ейск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_10995_10993_">Ейск</label> </div> <div id="region35" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name35"></a> <input id="225_26_10995_35_" value="Краснодар" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_10995_35_">Краснодар</label> </div> <div id="region970" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name970"></a> <input id="225_26_10995_970_" value="Новороссийск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_10995_970_">Новороссийск</label> </div> <div id="region239" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name239"></a> <input id="225_26_10995_239_" value="Сочи" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_10995_239_">Сочи</label> </div> <div id="region1058" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name1058"></a> <input id="225_26_10995_1058_" value="Туапсе" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_10995_1058_">Туапсе</label> </div> </div> <div id="region11004" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11004"></a> <input id="225_26_11004_" value="Республика Адыгея" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_11004_">Республика Адыгея</label> </div> <div id="region11015" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11015"></a> <input id="225_26_11015_" value="Республика Калмыкия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_11015_">Республика Калмыкия</label> </div> <div id="region11029" style="display: none;"> <a name="name11029" style="text-decoration: none" id="link11029" href="javascript://" onclick="regtree(11036);regtree(11043);regtree(238);regtree(39);regtree(971);regtree(11053);changeSign(11029);">+</a>&nbsp; <input id="225_26_11029_" value="Ростов-на-Дону и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_11029_">Ростов-на-Дону и область</label> <div id="region11036" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11036"></a> <input id="225_26_11029_11036_" value="Волгодонск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_11029_11036_">Волгодонск</label> </div> <div id="region11043" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11043"></a> <input id="225_26_11029_11043_" value="Каменск-Шахтинский" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_11029_11043_">Каменск-Шахтинский</label> </div> <div id="region238" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name238"></a> <input id="225_26_11029_238_" value="Новочеркасск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_11029_238_">Новочеркасск</label> </div> <div id="region39" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name39"></a> <input id="225_26_11029_39_" value="Ростов-на-Дону" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_11029_39_">Ростов-на-Дону</label> </div> <div id="region971" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name971"></a> <input id="225_26_11029_971_" value="Таганрог" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_11029_971_">Таганрог</label> </div> <div id="region11053" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11053"></a> <input id="225_26_11029_11053_" value="Шахты" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_26_11029_11053_">Шахты</label> </div> </div> </div> <div id="region59" style="display: none; "> <a name="name59" style="text-decoration: none" id="link59" href="javascript://" onclick="regtree(11235);regtree(21949);regtree(11266);regtree(11282);regtree(11309);regtree(11316);regtree(11318);regtree(10231);regtree(11330);regtree(10233);regtree(11340);regtree(11353);changeSign(59);">+</a>&nbsp; <input id="225_59_" value="Сибирь" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_">Сибирь</label> <div id="region11235" style="display: none;"> <a name="name11235" style="text-decoration: none" id="link11235" href="javascript://" onclick="regtree(197);regtree(975);changeSign(11235);">+</a>&nbsp; <input id="225_59_11235_" value="Алтайский край" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11235_">Алтайский край</label> <div id="region197" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name197"></a> <input id="225_59_11235_197_" value="Барнаул" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11235_197_">Барнаул</label> </div> <div id="region975" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name975"></a> <input id="225_59_11235_975_" value="Бийск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11235_975_">Бийск</label> </div> </div> <div id="region21949" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name21949"></a> <input id="225_59_21949_" value="Забайкальский край" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_21949_">Забайкальский край</label> </div> <div id="region11266" style="display: none;"> <a name="name11266" style="text-decoration: none" id="link11266" href="javascript://" onclick="regtree(11256);regtree(976);regtree(63);regtree(11273);changeSign(11266);">+</a>&nbsp; <input id="225_59_11266_" value="Иркутск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11266_">Иркутск и область</label> <div id="region11256" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11256"></a> <input id="225_59_11266_11256_" value="Ангарск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11266_11256_">Ангарск</label> </div> <div id="region976" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name976"></a> <input id="225_59_11266_976_" value="Братск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11266_976_">Братск</label> </div> <div id="region63" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name63"></a> <input id="225_59_11266_63_" value="Иркутск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11266_63_">Иркутск</label> </div> <div id="region11273" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11273"></a> <input id="225_59_11266_11273_" value="Усть-Илимск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11266_11273_">Усть-Илимск</label> </div> </div> <div id="region11282" style="display: none;"> <a name="name11282" style="text-decoration: none" id="link11282" href="javascript://" onclick="regtree(64);regtree(11287);regtree(237);changeSign(11282);">+</a>&nbsp; <input id="225_59_11282_" value="Кемерово и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11282_">Кемерово и область</label> <div id="region64" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name64"></a> <input id="225_59_11282_64_" value="Кемерово" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11282_64_">Кемерово</label> </div> <div id="region11287" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11287"></a> <input id="225_59_11282_11287_" value="Междуреченск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11282_11287_">Междуреченск</label> </div> <div id="region237" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name237"></a> <input id="225_59_11282_237_" value="Новокузнецк" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11282_237_">Новокузнецк</label> </div> </div> <div id="region11309" style="display: none;"> <a name="name11309" style="text-decoration: none" id="link11309" href="javascript://" onclick="regtree(11302);regtree(20086);regtree(62);regtree(11310);regtree(11311);changeSign(11309);">+</a>&nbsp; <input id="225_59_11309_" value="Красноярский край" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11309_">Красноярский край</label> <div id="region11302" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11302"></a> <input id="225_59_11309_11302_" value="Ачинск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11309_11302_">Ачинск</label> </div> <div id="region20086" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20086"></a> <input id="225_59_11309_20086_" value="Железногорск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11309_20086_">Железногорск</label> </div> <div id="region62" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name62"></a> <input id="225_59_11309_62_" value="Красноярск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11309_62_">Красноярск</label> </div> <div id="region11310" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11310"></a> <input id="225_59_11309_11310_" value="Минусинск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11309_11310_">Минусинск</label> </div> <div id="region11311" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11311"></a> <input id="225_59_11309_11311_" value="Норильск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11309_11311_">Норильск</label> </div> </div> <div id="region11316" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11316"></a> <input id="225_59_11316_" value="Новосибирск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11316_">Новосибирск и область</label> </div> <div id="region11318" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11318"></a> <input id="225_59_11318_" value="Омск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11318_">Омск и область</label> </div> <div id="region10231" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10231"></a> <input id="225_59_10231_" value="Республика Алтай" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_10231_">Республика Алтай</label> </div> <div id="region11330" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11330"></a> <input id="225_59_11330_" value="Республика Бурятия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11330_">Республика Бурятия</label> </div> <div id="region10233" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10233"></a> <input id="225_59_10233_" value="Республика Тыва" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_10233_">Республика Тыва</label> </div> <div id="region11340" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11340"></a> <input id="225_59_11340_" value="Республика Хакасия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11340_">Республика Хакасия</label> </div> <div id="region11353" style="display: none;"> <a name="name11353" style="text-decoration: none" id="link11353" href="javascript://" onclick="regtree(11351);regtree(67);changeSign(11353);">+</a>&nbsp; <input id="225_59_11353_" value="Томск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11353_">Томск и область</label> <div id="region11351" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11351"></a> <input id="225_59_11353_11351_" value="Северск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11353_11351_">Северск</label> </div> <div id="region67" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name67"></a> <input id="225_59_11353_67_" value="Томск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_59_11353_67_">Томск</label> </div> </div> </div> <div id="region73" style="display: none; "> <a name="name73" style="text-decoration: none" id="link73" href="javascript://" onclick="regtree(11375);regtree(10243);regtree(11398);regtree(11403);regtree(11409);regtree(11443);regtree(11457);regtree(10251);regtree(11450);changeSign(73);">+</a>&nbsp; <input id="225_73_" value="Дальний Восток" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_">Дальний Восток</label> <div id="region11375" style="display: none;"> <a name="name11375" style="text-decoration: none" id="link11375" href="javascript://" onclick="regtree(11374);regtree(77);regtree(11391);changeSign(11375);">+</a>&nbsp; <input id="225_73_11375_" value="Благовещенск и Амурская область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_11375_">Благовещенск и Амурская область</label> <div id="region11374" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11374"></a> <input id="225_73_11375_11374_" value="Белогорск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_11375_11374_">Белогорск</label> </div> <div id="region77" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name77"></a> <input id="225_73_11375_77_" value="Благовещенск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_11375_77_">Благовещенск</label> </div> <div id="region11391" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11391"></a> <input id="225_73_11375_11391_" value="Тында" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_11375_11391_">Тында</label> </div> </div> <div id="region10243" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10243"></a> <input id="225_73_10243_" value="Еврейская автономная область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_10243_">Еврейская автономная область</label> </div> <div id="region11398" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11398"></a> <input id="225_73_11398_" value="Камчатский край" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_11398_">Камчатский край</label> </div> <div id="region11403" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11403"></a> <input id="225_73_11403_" value="Магадан и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_11403_">Магадан и область</label> </div> <div id="region11409" style="display: none;"> <a name="name11409" style="text-decoration: none" id="link11409" href="javascript://" onclick="regtree(75);regtree(974);regtree(11426);changeSign(11409);">+</a>&nbsp; <input id="225_73_11409_" value="Приморский край" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_11409_">Приморский край</label> <div id="region75" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name75"></a> <input id="225_73_11409_75_" value="Владивосток" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_11409_75_">Владивосток</label> </div> <div id="region974" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name974"></a> <input id="225_73_11409_974_" value="Находка" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_11409_974_">Находка</label> </div> <div id="region11426" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11426"></a> <input id="225_73_11409_11426_" value="Уссурийск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_11409_11426_">Уссурийск</label> </div> </div> <div id="region11443" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11443"></a> <input id="225_73_11443_" value="Республика Саха (Якутия)" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_11443_">Республика Саха (Якутия)</label> </div> <div id="region11457" style="display: none;"> <a name="name11457" style="text-decoration: none" id="link11457" href="javascript://" onclick="regtree(11453);regtree(76);changeSign(11457);">+</a>&nbsp; <input id="225_73_11457_" value="Хабаровский край" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_11457_">Хабаровский край</label> <div id="region11453" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11453"></a> <input id="225_73_11457_11453_" value="Комсомольск-на-Амуре" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_11457_11453_">Комсомольск-на-Амуре</label> </div> <div id="region76" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name76"></a> <input id="225_73_11457_76_" value="Хабаровск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_11457_76_">Хабаровск</label> </div> </div> <div id="region10251" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10251"></a> <input id="225_73_10251_" value="Чукотский автономный округ" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_10251_">Чукотский автономный округ</label> </div> <div id="region11450" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11450"></a> <input id="225_73_11450_" value="Южно-Сахалинск и Сахалинская область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_73_11450_">Южно-Сахалинск и Сахалинская область</label> </div> </div> <div id="region102444" style="display: none; "> <a name="name102444" style="text-decoration: none" id="link102444" href="javascript://" onclick="regtree(11020);regtree(11010);regtree(11012);regtree(11013);regtree(11021);regtree(11069);regtree(11024);changeSign(102444);">+</a>&nbsp; <input id="225_102444_" value="Северный Кавказ" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_102444_">Северный Кавказ</label> <div id="region11020" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11020"></a> <input id="225_102444_11020_" value="Карачаево-Черкесская Республика" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_102444_11020_">Карачаево-Черкесская Республика</label> </div> <div id="region11010" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11010"></a> <input id="225_102444_11010_" value="Республика Дагестан" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_102444_11010_">Республика Дагестан</label> </div> <div id="region11012" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11012"></a> <input id="225_102444_11012_" value="Республика Ингушетия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_102444_11012_">Республика Ингушетия</label> </div> <div id="region11013" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11013"></a> <input id="225_102444_11013_" value="Республика Кабардино-Балкария" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_102444_11013_">Республика Кабардино-Балкария</label> </div> <div id="region11021" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11021"></a> <input id="225_102444_11021_" value="Республика Северная Осетия-Алания" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_102444_11021_">Республика Северная Осетия-Алания</label> </div> <div id="region11069" style="display: none;"> <a name="name11069" style="text-decoration: none" id="link11069" href="javascript://" onclick="regtree(11057);regtree(11062);regtree(11063);regtree(11064);regtree(11067);regtree(36);changeSign(11069);">+</a>&nbsp; <input id="225_102444_11069_" value="Ставропольский край" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_102444_11069_">Ставропольский край</label> <div id="region11057" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11057"></a> <input id="225_102444_11069_11057_" value="Ессентуки" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_102444_11069_11057_">Ессентуки</label> </div> <div id="region11062" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11062"></a> <input id="225_102444_11069_11062_" value="Кисловодск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_102444_11069_11062_">Кисловодск</label> </div> <div id="region11063" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11063"></a> <input id="225_102444_11069_11063_" value="Минеральные Воды" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_102444_11069_11063_">Минеральные Воды</label> </div> <div id="region11064" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11064"></a> <input id="225_102444_11069_11064_" value="Невинномысск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_102444_11069_11064_">Невинномысск</label> </div> <div id="region11067" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11067"></a> <input id="225_102444_11069_11067_" value="Пятигорск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_102444_11069_11067_">Пятигорск</label> </div> <div id="region36" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name36"></a> <input id="225_102444_11069_36_" value="Ставрополь" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_102444_11069_36_">Ставрополь</label> </div> </div> <div id="region11024" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11024"></a> <input id="225_102444_11024_" value="Чеченская Республика" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_102444_11024_">Чеченская Республика</label> </div> </div> <div id="region52" style="display: none; "> <a name="name52" style="text-decoration: none" id="link52" href="javascript://" onclick="regtree(11162);regtree(11158);regtree(11176);regtree(11193);regtree(11225);regtree(11232);changeSign(52);">+</a>&nbsp; <input id="225_52_" value="Урал" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_">Урал</label> <div id="region11162" style="display: none;"> <a name="name11162" style="text-decoration: none" id="link11162" href="javascript://" onclick="regtree(54);regtree(11164);regtree(11168);regtree(11171);changeSign(11162);">+</a>&nbsp; <input id="225_52_11162_" value="Екатеринбург и Свердловская область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11162_">Екатеринбург и Свердловская область</label> <div id="region54" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name54"></a> <input id="225_52_11162_54_" value="Екатеринбург" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11162_54_">Екатеринбург</label> </div> <div id="region11164" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11164"></a> <input id="225_52_11162_11164_" value="Каменск-Уральский" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11162_11164_">Каменск-Уральский</label> </div> <div id="region11168" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11168"></a> <input id="225_52_11162_11168_" value="Нижний Тагил" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11162_11168_">Нижний Тагил</label> </div> <div id="region11171" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11171"></a> <input id="225_52_11162_11171_" value="Первоуральск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11162_11171_">Первоуральск</label> </div> </div> <div id="region11158" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11158"></a> <input id="225_52_11158_" value="Курган и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11158_">Курган и область</label> </div> <div id="region11176" style="display: none;"> <a name="name11176" style="text-decoration: none" id="link11176" href="javascript://" onclick="regtree(11173);regtree(11175);regtree(55);changeSign(11176);">+</a>&nbsp; <input id="225_52_11176_" value="Тюмень и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11176_">Тюмень и область</label> <div id="region11173" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11173"></a> <input id="225_52_11176_11173_" value="Ишим" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11176_11173_">Ишим</label> </div> <div id="region11175" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11175"></a> <input id="225_52_11176_11175_" value="Тобольск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11176_11175_">Тобольск</label> </div> <div id="region55" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name55"></a> <input id="225_52_11176_55_" value="Тюмень" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11176_55_">Тюмень</label> </div> </div> <div id="region11193" style="display: none;"> <a name="name11193" style="text-decoration: none" id="link11193" href="javascript://" onclick="regtree(11184);regtree(1091);regtree(973);regtree(57);changeSign(11193);">+</a>&nbsp; <input id="225_52_11193_" value="Ханты-Мансийский АО" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11193_">Ханты-Мансийский АО</label> <div id="region11184" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11184"></a> <input id="225_52_11193_11184_" value="Нефтеюганск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11193_11184_">Нефтеюганск</label> </div> <div id="region1091" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name1091"></a> <input id="225_52_11193_1091_" value="Нижневартовск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11193_1091_">Нижневартовск</label> </div> <div id="region973" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name973"></a> <input id="225_52_11193_973_" value="Сургут" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11193_973_">Сургут</label> </div> <div id="region57" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name57"></a> <input id="225_52_11193_57_" value="Ханты-Мансийск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11193_57_">Ханты-Мансийск</label> </div> </div> <div id="region11225" style="display: none;"> <a name="name11225" style="text-decoration: none" id="link11225" href="javascript://" onclick="regtree(235);regtree(11212);regtree(11214);regtree(11217);regtree(56);changeSign(11225);">+</a>&nbsp; <input id="225_52_11225_" value="Челябинск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11225_">Челябинск и область</label> <div id="region235" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name235"></a> <input id="225_52_11225_235_" value="Магнитогорск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11225_235_">Магнитогорск</label> </div> <div id="region11212" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11212"></a> <input id="225_52_11225_11212_" value="Миасс" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11225_11212_">Миасс</label> </div> <div id="region11214" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11214"></a> <input id="225_52_11225_11214_" value="Озерск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11225_11214_">Озерск</label> </div> <div id="region11217" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11217"></a> <input id="225_52_11225_11217_" value="Сатка" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11225_11217_">Сатка</label> </div> <div id="region56" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name56"></a> <input id="225_52_11225_56_" value="Челябинск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11225_56_">Челябинск</label> </div> </div> <div id="region11232" style="display: none;"> <a name="name11232" style="text-decoration: none" id="link11232" href="javascript://" onclick="regtree(11230);regtree(11231);regtree(58);changeSign(11232);">+</a>&nbsp; <input id="225_52_11232_" value="Ямало-Ненецкий АО" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11232_">Ямало-Ненецкий АО</label> <div id="region11230" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11230"></a> <input id="225_52_11232_11230_" value="Новый Уренгой" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11232_11230_">Новый Уренгой</label> </div> <div id="region11231" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11231"></a> <input id="225_52_11232_11231_" value="Ноябрьск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11232_11231_">Ноябрьск</label> </div> <div id="region58" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name58"></a> <input id="225_52_11232_58_" value="Салехард" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="225_52_11232_58_">Салехард</label> </div> </div> </div> </div> <div id="region166" style="display: block;"> <a name="name166" style="text-decoration: none" id="link166" href="javascript://" onclick="regtree(29386);regtree(167);regtree(168);regtree(149);regtree(159);regtree(207);regtree(208);regtree(209);regtree(170);regtree(171);regtree(187);changeSign(166);">+</a>&nbsp; <input id="166_" value="СНГ (исключая Россию)" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_">СНГ (исключая Россию)</label> <div id="region29386" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29386"></a> <input id="166_29386_" value="Абхазия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_29386_">Абхазия</label> </div> <div id="region167" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name167"></a> <input id="166_167_" value="Азербайджан" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_167_">Азербайджан</label> </div> <div id="region168" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name168"></a> <input id="166_168_" value="Армения" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_168_">Армения</label> </div> <div id="region149" style="display: none;"> <a name="name149" style="text-decoration: none" id="link149" href="javascript://" onclick="regtree(29632);regtree(29633);regtree(29631);regtree(29634);regtree(29630);regtree(29629);changeSign(149);">+</a>&nbsp; <input id="166_149_" value="Беларусь" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_149_">Беларусь</label> <div id="region29632" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29632"></a> <input id="166_149_29632_" value="Брест и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_149_29632_">Брест и область</label> </div> <div id="region29633" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29633"></a> <input id="166_149_29633_" value="Витебск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_149_29633_">Витебск и область</label> </div> <div id="region29631" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29631"></a> <input id="166_149_29631_" value="Гомель и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_149_29631_">Гомель и область</label> </div> <div id="region29634" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29634"></a> <input id="166_149_29634_" value="Гродно и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_149_29634_">Гродно и область</label> </div> <div id="region29630" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29630"></a> <input id="166_149_29630_" value="Минск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_149_29630_">Минск и область</label> </div> <div id="region29629" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29629"></a> <input id="166_149_29629_" value="Могилёв и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_149_29629_">Могилёв и область</label> </div> </div> <div id="region159" style="display: none;"> <a name="name159" style="text-decoration: none" id="link159" href="javascript://" onclick="regtree(29414);regtree(29404);regtree(29406);regtree(29403);regtree(29407);regtree(29408);regtree(29410);regtree(29411);regtree(29412);regtree(29413);regtree(29415);regtree(29416);regtree(29409);regtree(29417);changeSign(159);">+</a>&nbsp; <input id="166_159_" value="Казахстан" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_">Казахстан</label> <div id="region29414" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29414"></a> <input id="166_159_29414_" value="Актау и Мангистауская область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29414_">Актау и Мангистауская область</label> </div> <div id="region29404" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29404"></a> <input id="166_159_29404_" value="Актобе и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29404_">Актобе и область</label> </div> <div id="region29406" style="display: none;"> <a name="name29406" style="text-decoration: none" id="link29406" href="javascript://" onclick="regtree(162);regtree(10303);changeSign(29406);">+</a>&nbsp; <input id="166_159_29406_" value="Алматы и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29406_">Алматы и область</label> <div id="region162" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name162"></a> <input id="166_159_29406_162_" value="Алматы" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29406_162_">Алматы</label> </div> <div id="region10303" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10303"></a> <input id="166_159_29406_10303_" value="Талдыкорган" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29406_10303_">Талдыкорган</label> </div> </div> <div id="region29403" style="display: none;"> <a name="name29403" style="text-decoration: none" id="link29403" href="javascript://" onclick="regtree(163);regtree(20809);changeSign(29403);">+</a>&nbsp; <input id="166_159_29403_" value="Астана и Акмолинская область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29403_">Астана и Акмолинская область</label> <div id="region163" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name163"></a> <input id="166_159_29403_163_" value="Астана" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29403_163_">Астана</label> </div> <div id="region20809" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20809"></a> <input id="166_159_29403_20809_" value="Кокшетау" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29403_20809_">Кокшетау</label> </div> </div> <div id="region29407" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29407"></a> <input id="166_159_29407_" value="Атырау и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29407_">Атырау и область</label> </div> <div id="region29408" style="display: none;"> <a name="name29408" style="text-decoration: none" id="link29408" href="javascript://" onclick="regtree(165);regtree(10306);changeSign(29408);">+</a>&nbsp; <input id="166_159_29408_" value="Восточно-Казахстанская область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29408_">Восточно-Казахстанская область</label> <div id="region165" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name165"></a> <input id="166_159_29408_165_" value="Семей" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29408_165_">Семей</label> </div> <div id="region10306" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10306"></a> <input id="166_159_29408_10306_" value="Усть-Каменогорск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29408_10306_">Усть-Каменогорск</label> </div> </div> <div id="region29410" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29410"></a> <input id="166_159_29410_" value="Западно-Казахстанская область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29410_">Западно-Казахстанская область</label> </div> <div id="region29411" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29411"></a> <input id="166_159_29411_" value="Караганда и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29411_">Караганда и область</label> </div> <div id="region29412" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29412"></a> <input id="166_159_29412_" value="Костанай и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29412_">Костанай и область</label> </div> <div id="region29413" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29413"></a> <input id="166_159_29413_" value="Кызылорда и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29413_">Кызылорда и область</label> </div> <div id="region29415" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29415"></a> <input id="166_159_29415_" value="Павлодар и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29415_">Павлодар и область</label> </div> <div id="region29416" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29416"></a> <input id="166_159_29416_" value="Северо-Казахстанская область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29416_">Северо-Казахстанская область</label> </div> <div id="region29409" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29409"></a> <input id="166_159_29409_" value="Тараз и Жамбылская область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29409_">Тараз и Жамбылская область</label> </div> <div id="region29417" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name29417"></a> <input id="166_159_29417_" value="Южно-Казахстанская область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_159_29417_">Южно-Казахстанская область</label> </div> </div> <div id="region207" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name207"></a> <input id="166_207_" value="Киргизия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_207_">Киргизия</label> </div> <div id="region208" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name208"></a> <input id="166_208_" value="Молдова" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_208_">Молдова</label> </div> <div id="region209" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name209"></a> <input id="166_209_" value="Таджикистан" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_209_">Таджикистан</label> </div> <div id="region170" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name170"></a> <input id="166_170_" value="Туркмения" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_170_">Туркмения</label> </div> <div id="region171" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name171"></a> <input id="166_171_" value="Узбекистан" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_171_">Узбекистан</label> </div> <div id="region187" style="display: none;"> <a name="name187" style="text-decoration: none" id="link187" href="javascript://" onclick="regtree(20525);regtree(20524);regtree(977);regtree(20528);regtree(20527);regtree(20526);changeSign(187);">+</a>&nbsp; <input id="166_187_" value="Украина" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_">Украина</label> <div id="region20525" style="display: none;"> <a name="name20525" style="text-decoration: none" id="link20525" href="javascript://" onclick="regtree(20537);regtree(20536);regtree(20539);regtree(20540);regtree(20538);changeSign(20525);">+</a>&nbsp; <input id="166_187_20525_" value="Восток" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_">Восток</label> <div id="region20537" style="display: none;"> <a name="name20537" style="text-decoration: none" id="link20537" href="javascript://" onclick="regtree(21775);regtree(141);regtree(10347);regtree(21773);regtree(28401);changeSign(20537);">+</a>&nbsp; <input id="166_187_20525_20537_" value="Днепропетровск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20537_">Днепропетровск и область</label> <div id="region21775" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name21775"></a> <input id="166_187_20525_20537_21775_" value="Днепродзержинск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20537_21775_">Днепродзержинск</label> </div> <div id="region141" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name141"></a> <input id="166_187_20525_20537_141_" value="Днепропетровск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20537_141_">Днепропетровск</label> </div> <div id="region10347" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10347"></a> <input id="166_187_20525_20537_10347_" value="Кривой Рог" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20537_10347_">Кривой Рог</label> </div> <div id="region21773" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name21773"></a> <input id="166_187_20525_20537_21773_" value="Никополь" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20537_21773_">Никополь</label> </div> <div id="region28401" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name28401"></a> <input id="166_187_20525_20537_28401_" value="Павлоград" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20537_28401_">Павлоград</label> </div> </div> <div id="region20536" style="display: none;"> <a name="name20536" style="text-decoration: none" id="link20536" href="javascript://" onclick="regtree(21774);regtree(142);regtree(20554);regtree(24876);regtree(10366);changeSign(20536);">+</a>&nbsp; <input id="166_187_20525_20536_" value="Донецк и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20536_">Донецк и область</label> <div id="region21774" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name21774"></a> <input id="166_187_20525_20536_21774_" value="Горловка" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20536_21774_">Горловка</label> </div> <div id="region142" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name142"></a> <input id="166_187_20525_20536_142_" value="Донецк" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20536_142_">Донецк</label> </div> <div id="region20554" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20554"></a> <input id="166_187_20525_20536_20554_" value="Краматорск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20536_20554_">Краматорск</label> </div> <div id="region24876" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name24876"></a> <input id="166_187_20525_20536_24876_" value="Макеевка" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20536_24876_">Макеевка</label> </div> <div id="region10366" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10366"></a> <input id="166_187_20525_20536_10366_" value="Мариуполь" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20536_10366_">Мариуполь</label> </div> </div> <div id="region20539" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20539"></a> <input id="166_187_20525_20539_" value="Запорожье и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20539_">Запорожье и область</label> </div> <div id="region20540" style="display: none;"> <a name="name20540" style="text-decoration: none" id="link20540" href="javascript://" onclick="regtree(24885);regtree(222);regtree(24893);changeSign(20540);">+</a>&nbsp; <input id="166_187_20525_20540_" value="Луганск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20540_">Луганск и область</label> <div id="region24885" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name24885"></a> <input id="166_187_20525_20540_24885_" value="Алчевск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20540_24885_">Алчевск</label> </div> <div id="region222" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name222"></a> <input id="166_187_20525_20540_222_" value="Луганск" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20540_222_">Луганск</label> </div> <div id="region24893" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name24893"></a> <input id="166_187_20525_20540_24893_" value="Северодонецк" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20540_24893_">Северодонецк</label> </div> </div> <div id="region20538" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20538"></a> <input id="166_187_20525_20538_" value="Харьков и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20525_20538_">Харьков и область</label> </div> </div> <div id="region20524" style="display: none;"> <a name="name20524" style="text-decoration: none" id="link20524" href="javascript://" onclick="regtree(20532);regtree(20550);regtree(20529);regtree(20534);regtree(20531);regtree(20530);regtree(20535);regtree(20533);changeSign(20524);">+</a>&nbsp; <input id="166_187_20524_" value="Запад" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20524_">Запад</label> <div id="region20532" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20532"></a> <input id="166_187_20524_20532_" value="Ивано-Франковск и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20524_20532_">Ивано-Франковск и область</label> </div> <div id="region20550" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20550"></a> <input id="166_187_20524_20550_" value="Луцк и Волынская область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20524_20550_">Луцк и Волынская область</label> </div> <div id="region20529" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20529"></a> <input id="166_187_20524_20529_" value="Львов и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20524_20529_">Львов и область</label> </div> <div id="region20534" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20534"></a> <input id="166_187_20524_20534_" value="Ровно и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20524_20534_">Ровно и область</label> </div> <div id="region20531" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20531"></a> <input id="166_187_20524_20531_" value="Тернополь и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20524_20531_">Тернополь и область</label> </div> <div id="region20530" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20530"></a> <input id="166_187_20524_20530_" value="Ужгород и Закарпатская область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20524_20530_">Ужгород и Закарпатская область</label> </div> <div id="region20535" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20535"></a> <input id="166_187_20524_20535_" value="Хмельницкий и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20524_20535_">Хмельницкий и область</label> </div> <div id="region20533" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20533"></a> <input id="166_187_20524_20533_" value="Черновцы и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20524_20533_">Черновцы и область</label> </div> </div> <div id="region977" style="display: none;"> <a name="name977" style="text-decoration: none" id="link977" href="javascript://" onclick="regtree(11463);regtree(11464);regtree(959);regtree(146);regtree(11469);regtree(11470);changeSign(977);">+</a>&nbsp; <input id="166_187_977_" value="Крым" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_977_">Крым</label> <div id="region11463" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11463"></a> <input id="166_187_977_11463_" value="Евпатория" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_977_11463_">Евпатория</label> </div> <div id="region11464" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11464"></a> <input id="166_187_977_11464_" value="Керчь" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_977_11464_">Керчь</label> </div> <div id="region959" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name959"></a> <input id="166_187_977_959_" value="Севастополь" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_977_959_">Севастополь</label> </div> <div id="region146" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name146"></a> <input id="166_187_977_146_" value="Симферополь" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_977_146_">Симферополь</label> </div> <div id="region11469" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11469"></a> <input id="166_187_977_11469_" value="Феодосия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_977_11469_">Феодосия</label> </div> <div id="region11470" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name11470"></a> <input id="166_187_977_11470_" value="Ялта" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_977_11470_">Ялта</label> </div> </div> <div id="region20528" style="display: none;"> <a name="name20528" style="text-decoration: none" id="link20528" href="javascript://" onclick="regtree(20552);regtree(20551);changeSign(20528);">+</a>&nbsp; <input id="166_187_20528_" value="Север" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20528_">Север</label> <div id="region20552" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20552"></a> <input id="166_187_20528_20552_" value="Сумы и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20528_20552_">Сумы и область</label> </div> <div id="region20551" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20551"></a> <input id="166_187_20528_20551_" value="Чернигов и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20528_20551_">Чернигов и область</label> </div> </div> <div id="region20527" style="display: none;"> <a name="name20527" style="text-decoration: none" id="link20527" href="javascript://" onclick="regtree(20545);regtree(20547);regtree(20544);regtree(20548);regtree(20549);regtree(20546);changeSign(20527);">+</a>&nbsp; <input id="166_187_20527_" value="Центр" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20527_">Центр</label> <div id="region20545" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20545"></a> <input id="166_187_20527_20545_" value="Винница и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20527_20545_">Винница и область</label> </div> <div id="region20547" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20547"></a> <input id="166_187_20527_20547_" value="Житомир и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20527_20547_">Житомир и область</label> </div> <div id="region20544" style="display: none;"> <a name="name20544" style="text-decoration: none" id="link20544" href="javascript://" onclick="regtree(10369);regtree(143);changeSign(20544);">+</a>&nbsp; <input id="166_187_20527_20544_" value="Киев и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20527_20544_">Киев и область</label> <div id="region10369" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10369"></a> <input id="166_187_20527_20544_10369_" value="Белая Церковь" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20527_20544_10369_">Белая Церковь</label> </div> <div id="region143" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name143"></a> <input id="166_187_20527_20544_143_" value="Киев" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20527_20544_143_">Киев</label> </div> </div> <div id="region20548" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20548"></a> <input id="166_187_20527_20548_" value="Кировоград и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20527_20548_">Кировоград и область</label> </div> <div id="region20549" style="display: none;"> <a name="name20549" style="text-decoration: none" id="link20549" href="javascript://" onclick="regtree(21609);regtree(964);changeSign(20549);">+</a>&nbsp; <input id="166_187_20527_20549_" value="Полтава и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20527_20549_">Полтава и область</label> <div id="region21609" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name21609"></a> <input id="166_187_20527_20549_21609_" value="Кременчуг" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20527_20549_21609_">Кременчуг</label> </div> <div id="region964" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name964"></a> <input id="166_187_20527_20549_964_" value="Полтава" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20527_20549_964_">Полтава</label> </div> </div> <div id="region20546" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20546"></a> <input id="166_187_20527_20546_" value="Черкассы и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20527_20546_">Черкассы и область</label> </div> </div> <div id="region20526" style="display: none;"> <a name="name20526" style="text-decoration: none" id="link20526" href="javascript://" onclick="regtree(20543);regtree(20541);regtree(20542);changeSign(20526);">+</a>&nbsp; <input id="166_187_20526_" value="Юг" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20526_">Юг</label> <div id="region20543" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20543"></a> <input id="166_187_20526_20543_" value="Николаев и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20526_20543_">Николаев и область</label> </div> <div id="region20541" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20541"></a> <input id="166_187_20526_20541_" value="Одесса и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20526_20541_">Одесса и область</label> </div> <div id="region20542" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20542"></a> <input id="166_187_20526_20542_" value="Херсон и область" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="166_187_20526_20542_">Херсон и область</label> </div> </div> </div> </div> <div id="region111" style="display: block;"> <a name="name111" style="text-decoration: none" id="link111" href="javascript://" onclick="regtree(113);regtree(114);regtree(115);regtree(102);regtree(116);regtree(96);regtree(246);regtree(203);regtree(204);regtree(205);regtree(20574);regtree(118);regtree(119);regtree(120);regtree(180);regtree(121);regtree(122);regtree(980);regtree(983);regtree(123);regtree(124);regtree(10083);regtree(125);regtree(126);regtree(127);changeSign(111);">+</a>&nbsp; <input id="111_" value="Европа" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_">Европа</label> <div id="region113" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name113"></a> <input id="111_113_" value="Австрия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_113_">Австрия</label> </div> <div id="region114" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name114"></a> <input id="111_114_" value="Бельгия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_114_">Бельгия</label> </div> <div id="region115" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name115"></a> <input id="111_115_" value="Болгария" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_115_">Болгария</label> </div> <div id="region102" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name102"></a> <input id="111_102_" value="Великобритания" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_102_">Великобритания</label> </div> <div id="region116" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name116"></a> <input id="111_116_" value="Венгрия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_116_">Венгрия</label> </div> <div id="region96" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name96"></a> <input id="111_96_" value="Германия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_96_">Германия</label> </div> <div id="region246" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name246"></a> <input id="111_246_" value="Греция" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_246_">Греция</label> </div> <div id="region203" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name203"></a> <input id="111_203_" value="Дания" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_203_">Дания</label> </div> <div id="region204" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name204"></a> <input id="111_204_" value="Испания" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_204_">Испания</label> </div> <div id="region205" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name205"></a> <input id="111_205_" value="Италия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_205_">Италия</label> </div> <div id="region20574" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20574"></a> <input id="111_20574_" value="Кипр" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_20574_">Кипр</label> </div> <div id="region118" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name118"></a> <input id="111_118_" value="Нидерланды" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_118_">Нидерланды</label> </div> <div id="region119" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name119"></a> <input id="111_119_" value="Норвегия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_119_">Норвегия</label> </div> <div id="region120" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name120"></a> <input id="111_120_" value="Польша" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_120_">Польша</label> </div> <div id="region180" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name180"></a> <input id="111_180_" value="Сербия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_180_">Сербия</label> </div> <div id="region121" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name121"></a> <input id="111_121_" value="Словакия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_121_">Словакия</label> </div> <div id="region122" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name122"></a> <input id="111_122_" value="Словения" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_122_">Словения</label> </div> <div id="region980" style="display: none;"> <a name="name980" style="text-decoration: none" id="link980" href="javascript://" onclick="regtree(206);regtree(117);regtree(179);changeSign(980);">+</a>&nbsp; <input id="111_980_" value="Страны Балтии" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_980_">Страны Балтии</label> <div id="region206" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name206"></a> <input id="111_980_206_" value="Латвия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_980_206_">Латвия</label> </div> <div id="region117" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name117"></a> <input id="111_980_117_" value="Литва" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_980_117_">Литва</label> </div> <div id="region179" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name179"></a> <input id="111_980_179_" value="Эстония" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_980_179_">Эстония</label> </div> </div> <div id="region983" style="display: none;"> <a name="name983" style="text-decoration: none" id="link983" href="javascript://" onclick="regtree(103668);regtree(103669);regtree(103670);regtree(103671);regtree(103672);regtree(103673);regtree(103674);regtree(103675);regtree(103676);regtree(103677);regtree(103678);regtree(103679);regtree(103680);regtree(103681);regtree(103682);regtree(103683);regtree(103684);regtree(103685);regtree(103686);regtree(103687);regtree(103688);regtree(103689);regtree(103690);regtree(103691);regtree(103692);regtree(103693);regtree(103694);regtree(103695);regtree(103696);regtree(103697);regtree(103742);regtree(103698);regtree(103699);regtree(103700);regtree(103701);regtree(103702);regtree(103703);regtree(103704);regtree(103705);regtree(103706);regtree(103707);regtree(103708);regtree(103709);regtree(103710);regtree(103711);regtree(103712);regtree(103713);regtree(103714);regtree(103715);regtree(103716);regtree(103717);regtree(103718);regtree(103719);regtree(103720);regtree(103721);regtree(103722);regtree(103723);regtree(103724);regtree(103725);regtree(103726);regtree(103727);regtree(103728);regtree(103729);regtree(103730);regtree(103731);regtree(103732);regtree(103733);regtree(103734);regtree(103735);regtree(103736);regtree(103737);regtree(103738);regtree(103739);regtree(103740);regtree(103741);regtree(103743);regtree(103744);regtree(103745);regtree(103746);regtree(103747);regtree(103748);changeSign(983);">+</a>&nbsp; <input id="111_983_" value="Турция" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_">Турция</label> <div id="region103668" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103668"></a> <input id="111_983_103668_" value="Провинция Агры" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103668_">Провинция Агры</label> </div> <div id="region103669" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103669"></a> <input id="111_983_103669_" value="Провинция Адана" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103669_">Провинция Адана</label> </div> <div id="region103670" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103670"></a> <input id="111_983_103670_" value="Провинция Адыяман" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103670_">Провинция Адыяман</label> </div> <div id="region103671" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103671"></a> <input id="111_983_103671_" value="Провинция Айдын" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103671_">Провинция Айдын</label> </div> <div id="region103672" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103672"></a> <input id="111_983_103672_" value="Провинция Аксарай" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103672_">Провинция Аксарай</label> </div> <div id="region103673" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103673"></a> <input id="111_983_103673_" value="Провинция Амасья" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103673_">Провинция Амасья</label> </div> <div id="region103674" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103674"></a> <input id="111_983_103674_" value="Провинция Анкара" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103674_">Провинция Анкара</label> </div> <div id="region103675" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103675"></a> <input id="111_983_103675_" value="Провинция Анталья" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103675_">Провинция Анталья</label> </div> <div id="region103676" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103676"></a> <input id="111_983_103676_" value="Провинция Ардахан" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103676_">Провинция Ардахан</label> </div> <div id="region103677" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103677"></a> <input id="111_983_103677_" value="Провинция Артвин" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103677_">Провинция Артвин</label> </div> <div id="region103678" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103678"></a> <input id="111_983_103678_" value="Провинция Афьонкарахисар" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103678_">Провинция Афьонкарахисар</label> </div> <div id="region103679" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103679"></a> <input id="111_983_103679_" value="Провинция Байбурт" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103679_">Провинция Байбурт</label> </div> <div id="region103680" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103680"></a> <input id="111_983_103680_" value="Провинция Балыкесир" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103680_">Провинция Балыкесир</label> </div> <div id="region103681" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103681"></a> <input id="111_983_103681_" value="Провинция Бартын" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103681_">Провинция Бартын</label> </div> <div id="region103682" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103682"></a> <input id="111_983_103682_" value="Провинция Батман" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103682_">Провинция Батман</label> </div> <div id="region103683" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103683"></a> <input id="111_983_103683_" value="Провинция Биледжик" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103683_">Провинция Биледжик</label> </div> <div id="region103684" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103684"></a> <input id="111_983_103684_" value="Провинция Бингёль" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103684_">Провинция Бингёль</label> </div> <div id="region103685" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103685"></a> <input id="111_983_103685_" value="Провинция Битлис" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103685_">Провинция Битлис</label> </div> <div id="region103686" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103686"></a> <input id="111_983_103686_" value="Провинция Болу" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103686_">Провинция Болу</label> </div> <div id="region103687" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103687"></a> <input id="111_983_103687_" value="Провинция Бурдур" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103687_">Провинция Бурдур</label> </div> <div id="region103688" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103688"></a> <input id="111_983_103688_" value="Провинция Бурса" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103688_">Провинция Бурса</label> </div> <div id="region103689" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103689"></a> <input id="111_983_103689_" value="Провинция Ван" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103689_">Провинция Ван</label> </div> <div id="region103690" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103690"></a> <input id="111_983_103690_" value="Провинция Газиантеп" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103690_">Провинция Газиантеп</label> </div> <div id="region103691" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103691"></a> <input id="111_983_103691_" value="Провинция Гиресун" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103691_">Провинция Гиресун</label> </div> <div id="region103692" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103692"></a> <input id="111_983_103692_" value="Провинция Гюмюшхане" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103692_">Провинция Гюмюшхане</label> </div> <div id="region103693" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103693"></a> <input id="111_983_103693_" value="Провинция Денизли" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103693_">Провинция Денизли</label> </div> <div id="region103694" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103694"></a> <input id="111_983_103694_" value="Провинция Диярбакыр" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103694_">Провинция Диярбакыр</label> </div> <div id="region103695" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103695"></a> <input id="111_983_103695_" value="Провинция Дюздже" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103695_">Провинция Дюздже</label> </div> <div id="region103696" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103696"></a> <input id="111_983_103696_" value="Провинция Зонгулдак" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103696_">Провинция Зонгулдак</label> </div> <div id="region103697" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103697"></a> <input id="111_983_103697_" value="Провинция Измир" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103697_">Провинция Измир</label> </div> <div id="region103742" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103742"></a> <input id="111_983_103742_" value="Провинция Испарта" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103742_">Провинция Испарта</label> </div> <div id="region103698" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103698"></a> <input id="111_983_103698_" value="Провинция Йозгат" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103698_">Провинция Йозгат</label> </div> <div id="region103699" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103699"></a> <input id="111_983_103699_" value="Провинция Кайсери" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103699_">Провинция Кайсери</label> </div> <div id="region103700" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103700"></a> <input id="111_983_103700_" value="Провинция Карабюк" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103700_">Провинция Карабюк</label> </div> <div id="region103701" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103701"></a> <input id="111_983_103701_" value="Провинция Караман" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103701_">Провинция Караман</label> </div> <div id="region103702" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103702"></a> <input id="111_983_103702_" value="Провинция Карс" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103702_">Провинция Карс</label> </div> <div id="region103703" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103703"></a> <input id="111_983_103703_" value="Провинция Кастамону" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103703_">Провинция Кастамону</label> </div> <div id="region103704" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103704"></a> <input id="111_983_103704_" value="Провинция Кахраманмараш" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103704_">Провинция Кахраманмараш</label> </div> <div id="region103705" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103705"></a> <input id="111_983_103705_" value="Провинция Килис" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103705_">Провинция Килис</label> </div> <div id="region103706" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103706"></a> <input id="111_983_103706_" value="Провинция Коджаэли" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103706_">Провинция Коджаэли</label> </div> <div id="region103707" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103707"></a> <input id="111_983_103707_" value="Провинция Конья" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103707_">Провинция Конья</label> </div> <div id="region103708" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103708"></a> <input id="111_983_103708_" value="Провинция Кыркларели" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103708_">Провинция Кыркларели</label> </div> <div id="region103709" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103709"></a> <input id="111_983_103709_" value="Провинция Кыршехир" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103709_">Провинция Кыршехир</label> </div> <div id="region103710" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103710"></a> <input id="111_983_103710_" value="Провинция Кырыккале" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103710_">Провинция Кырыккале</label> </div> <div id="region103711" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103711"></a> <input id="111_983_103711_" value="Провинция Кютахья" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103711_">Провинция Кютахья</label> </div> <div id="region103712" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103712"></a> <input id="111_983_103712_" value="Провинция Малатья" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103712_">Провинция Малатья</label> </div> <div id="region103713" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103713"></a> <input id="111_983_103713_" value="Провинция Маниса" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103713_">Провинция Маниса</label> </div> <div id="region103714" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103714"></a> <input id="111_983_103714_" value="Провинция Мардин" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103714_">Провинция Мардин</label> </div> <div id="region103715" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103715"></a> <input id="111_983_103715_" value="Провинция Мерсин" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103715_">Провинция Мерсин</label> </div> <div id="region103716" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103716"></a> <input id="111_983_103716_" value="Провинция Мугла" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103716_">Провинция Мугла</label> </div> <div id="region103717" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103717"></a> <input id="111_983_103717_" value="Провинция Муш" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103717_">Провинция Муш</label> </div> <div id="region103718" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103718"></a> <input id="111_983_103718_" value="Провинция Невшехир" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103718_">Провинция Невшехир</label> </div> <div id="region103719" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103719"></a> <input id="111_983_103719_" value="Провинция Нигде" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103719_">Провинция Нигде</label> </div> <div id="region103720" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103720"></a> <input id="111_983_103720_" value="Провинция Орду" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103720_">Провинция Орду</label> </div> <div id="region103721" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103721"></a> <input id="111_983_103721_" value="Провинция Османие" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103721_">Провинция Османие</label> </div> <div id="region103722" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103722"></a> <input id="111_983_103722_" value="Провинция Ризе" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103722_">Провинция Ризе</label> </div> <div id="region103723" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103723"></a> <input id="111_983_103723_" value="Провинция Сакарья" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103723_">Провинция Сакарья</label> </div> <div id="region103724" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103724"></a> <input id="111_983_103724_" value="Провинция Самсун" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103724_">Провинция Самсун</label> </div> <div id="region103725" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103725"></a> <input id="111_983_103725_" value="Провинция Сивас" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103725_">Провинция Сивас</label> </div> <div id="region103726" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103726"></a> <input id="111_983_103726_" value="Провинция Сиирт" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103726_">Провинция Сиирт</label> </div> <div id="region103727" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103727"></a> <input id="111_983_103727_" value="Провинция Синоп" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103727_">Провинция Синоп</label> </div> <div id="region103728" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103728"></a> <input id="111_983_103728_" value="Провинция Стамбул" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103728_">Провинция Стамбул</label> </div> <div id="region103729" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103729"></a> <input id="111_983_103729_" value="Провинция Текирдаг" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103729_">Провинция Текирдаг</label> </div> <div id="region103730" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103730"></a> <input id="111_983_103730_" value="Провинция Токат" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103730_">Провинция Токат</label> </div> <div id="region103731" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103731"></a> <input id="111_983_103731_" value="Провинция Трабзон" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103731_">Провинция Трабзон</label> </div> <div id="region103732" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103732"></a> <input id="111_983_103732_" value="Провинция Тунджели" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103732_">Провинция Тунджели</label> </div> <div id="region103733" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103733"></a> <input id="111_983_103733_" value="Провинция Ушак" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103733_">Провинция Ушак</label> </div> <div id="region103734" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103734"></a> <input id="111_983_103734_" value="Провинция Хаккяри" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103734_">Провинция Хаккяри</label> </div> <div id="region103735" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103735"></a> <input id="111_983_103735_" value="Провинция Хатай" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103735_">Провинция Хатай</label> </div> <div id="region103736" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103736"></a> <input id="111_983_103736_" value="Провинция Чанаккале" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103736_">Провинция Чанаккале</label> </div> <div id="region103737" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103737"></a> <input id="111_983_103737_" value="Провинция Чанкыры" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103737_">Провинция Чанкыры</label> </div> <div id="region103738" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103738"></a> <input id="111_983_103738_" value="Провинция Чорум" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103738_">Провинция Чорум</label> </div> <div id="region103739" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103739"></a> <input id="111_983_103739_" value="Провинция Шанлыурфа" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103739_">Провинция Шанлыурфа</label> </div> <div id="region103740" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103740"></a> <input id="111_983_103740_" value="Провинция Ширнак" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103740_">Провинция Ширнак</label> </div> <div id="region103741" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103741"></a> <input id="111_983_103741_" value="Провинция Ыгдыр" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103741_">Провинция Ыгдыр</label> </div> <div id="region103743" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103743"></a> <input id="111_983_103743_" value="Провинция Эдирне" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103743_">Провинция Эдирне</label> </div> <div id="region103744" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103744"></a> <input id="111_983_103744_" value="Провинция Элязыг" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103744_">Провинция Элязыг</label> </div> <div id="region103745" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103745"></a> <input id="111_983_103745_" value="Провинция Эрзинджан" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103745_">Провинция Эрзинджан</label> </div> <div id="region103746" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103746"></a> <input id="111_983_103746_" value="Провинция Эрзурум" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103746_">Провинция Эрзурум</label> </div> <div id="region103747" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103747"></a> <input id="111_983_103747_" value="Провинция Эскишехир" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103747_">Провинция Эскишехир</label> </div> <div id="region103748" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name103748"></a> <input id="111_983_103748_" value="Провинция Ялова" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_983_103748_">Провинция Ялова</label> </div> </div> <div id="region123" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name123"></a> <input id="111_123_" value="Финляндия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_123_">Финляндия</label> </div> <div id="region124" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name124"></a> <input id="111_124_" value="Франция" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_124_">Франция</label> </div> <div id="region10083" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name10083"></a> <input id="111_10083_" value="Хорватия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_10083_">Хорватия</label> </div> <div id="region125" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name125"></a> <input id="111_125_" value="Чехия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_125_">Чехия</label> </div> <div id="region126" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name126"></a> <input id="111_126_" value="Швейцария" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_126_">Швейцария</label> </div> <div id="region127" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name127"></a> <input id="111_127_" value="Швеция" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="111_127_">Швеция</label> </div> </div> <div id="region183" style="display: block;"> <a name="name183" style="text-decoration: none" id="link183" href="javascript://" onclick="regtree(1004);regtree(169);regtree(994);regtree(20975);regtree(134);regtree(995);regtree(135);regtree(137);changeSign(183);">+</a>&nbsp; <input id="183_" value="Азия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="183_">Азия</label> <div id="region1004" style="display: none;"> <a name="name1004" style="text-decoration: none" id="link1004" href="javascript://" onclick="regtree(1056);regtree(181);regtree(210);changeSign(1004);">+</a>&nbsp; <input id="183_1004_" value="Ближний Восток" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="183_1004_">Ближний Восток</label> <div id="region1056" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name1056"></a> <input id="183_1004_1056_" value="Египет" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="183_1004_1056_">Египет</label> </div> <div id="region181" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name181"></a> <input id="183_1004_181_" value="Израиль" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="183_1004_181_">Израиль</label> </div> <div id="region210" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name210"></a> <input id="183_1004_210_" value="Объединенные Арабские Эмираты" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="183_1004_210_">Объединенные Арабские Эмираты</label> </div> </div> <div id="region169" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name169"></a> <input id="183_169_" value="Грузия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="183_169_">Грузия</label> </div> <div id="region994" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name994"></a> <input id="183_994_" value="Индия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="183_994_">Индия</label> </div> <div id="region20975" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name20975"></a> <input id="183_20975_" value="Камбоджа" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="183_20975_">Камбоджа</label> </div> <div id="region134" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name134"></a> <input id="183_134_" value="Китай" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="183_134_">Китай</label> </div> <div id="region995" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name995"></a> <input id="183_995_" value="Таиланд" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="183_995_">Таиланд</label> </div> <div id="region135" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name135"></a> <input id="183_135_" value="Южная Корея" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="183_135_">Южная Корея</label> </div> <div id="region137" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name137"></a> <input id="183_137_" value="Япония" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="183_137_">Япония</label> </div> </div> <div id="region241" style="display: block;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name241"></a> <input id="241_" value="Африка" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="241_">Африка</label> </div> <div id="region10002" style="display: block;"> <a name="name10002" style="text-decoration: none" id="link10002" href="javascript://" onclick="regtree(95);regtree(84);changeSign(10002);">+</a>&nbsp; <input id="10002_" value="Северная Америка" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="10002_">Северная Америка</label> <div id="region95" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name95"></a> <input id="10002_95_" value="Канада" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="10002_95_">Канада</label> </div> <div id="region84" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name84"></a> <input id="10002_84_" value="США" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="10002_84_">США</label> </div> </div> <div id="region10003" style="display: block;"> <a name="name10003" style="text-decoration: none" id="link10003" href="javascript://" onclick="regtree(93);regtree(94);changeSign(10003);">+</a>&nbsp; <input id="10003_" value="Южная Америка" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="10003_">Южная Америка</label> <div id="region93" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name93"></a> <input id="10003_93_" value="Аргентина" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="10003_93_">Аргентина</label> </div> <div id="region94" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name94"></a> <input id="10003_94_" value="Бразилия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="10003_94_">Бразилия</label> </div> </div> <div id="region138" style="display: block;"> <a name="name138" style="text-decoration: none" id="link138" href="javascript://" onclick="regtree(211);regtree(139);changeSign(138);">+</a>&nbsp; <input id="138_" value="Австралия и Океания" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="138_">Австралия и Океания</label> <div id="region211" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name211"></a> <input id="138_211_" value="Австралия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="138_211_">Австралия</label> </div> <div id="region139" style="display: none;"> &nbsp;&nbsp;&nbsp;&nbsp;<a name="name139"></a> <input id="138_139_" value="Новая Зеландия" type="checkbox" name="reg" onclick="javascript:Generate(this)"> <label for="138_139_">Новая Зеландия</label> </div> </div>
+
+</td>
+</tr>
+<tr>
+
+<td bgcolor="#F0F1F3" style="border-right:white 20px solid;">
+
+</td>
+</tr>
+
+</tbody></table>  </form>
+<script type="text/javascript">
+var reg_form=document.forms['reg'];
+</script>
+
+</body></html>
diff --git a/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/task.md b/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/task.md
new file mode 100644
index 00000000..43d7987f
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/task.md
@@ -0,0 +1,33 @@
+# Дерево с чекбоксами
+
+[importance 5]
+
+Вы получили проект, в котором есть дерево с чекбоксами.
+
+К сожалению, оно "кривое" -- некрасивое, плохо закодированное и с ошибками. Ваша задача -- сделать "как надо".
+
+Образец:
+
+[iframe src="source" height=400 link edit border=1]
+
+Особенности работы:
+<ul>
+<li>При изначальном рисовании все элементы закрыты и не отмечены.</li>
+<li>Установка отметки в чекбоксе раскрывает узел и отмечает все элементы под ним.</li>
+<li>Снятие отметки из чекбокса -- снимает отметки из всех элементов под ним.</li>
+</ul>
+
+Требования к реализации:
+<ul>
+<li>Все данные для дерева (регионы) нужно хранить в JS. Как именно -- определяете вы сами. Можно в одном объекте, можно -- ещё как-то.</li>
+<li>Программист, который делал этот код, сейчас недоступен. Ваша задача -- восстановить данные регионов из дерева примера.</li>
+<li>Можно считать, что название региона всегда занимает только 1 строку.</li>
+<li>Дерево должно легко работать с 1000 узлов (в примере их около 450).</li>
+<li>Используйте минимум DOM-элементов.</li>
+</ul>
+
+Исходный документ содержит "образец" дерева.
+
+[edit task src="source"/]
+
+P.S. При получении данных из дерева-образца вам поможет `JSON.stringify(объект)`. Он превратит объект в строку, которую можно положить в файл.
diff --git a/2-ui/5-widgets/8-widget-tasks-2/article.md b/2-ui/5-widgets/8-widget-tasks-2/article.md
new file mode 100644
index 00000000..b203947e
--- /dev/null
+++ b/2-ui/5-widgets/8-widget-tasks-2/article.md
@@ -0,0 +1,2 @@
+# Еще практика! 
+
diff --git a/2-ui/5-widgets/index.md b/2-ui/5-widgets/index.md
new file mode 100644
index 00000000..3311b2da
--- /dev/null
+++ b/2-ui/5-widgets/index.md
@@ -0,0 +1,3 @@
+# Создание графических компонентов
+
+В этом разделе мы обсуждаем, как вместо "простыни кода" писать объектно-ориентированные компоненты на JavaScript.
\ No newline at end of file
diff --git a/2-ui/index.md b/2-ui/index.md
new file mode 100644
index 00000000..fb9db59a
--- /dev/null
+++ b/2-ui/index.md
@@ -0,0 +1,3 @@
+# Документ, события, интерфейсы
+
+Изучаем работу со страницей -- как получать элементы, манипулировать их размерами, динамически создавать интерфейсы и взаимодействовать с посетителем.
diff --git a/3-more/1-webcomponents/1-webcomponents-intro/article.md b/3-more/1-webcomponents/1-webcomponents-intro/article.md
new file mode 100644
index 00000000..f94feefc
--- /dev/null
+++ b/3-more/1-webcomponents/1-webcomponents-intro/article.md
@@ -0,0 +1,91 @@
+# С высоты орбитального полёта
+
+Этот раздел посвящён набору современных браузерных стандартов, описывающих создание "веб-компонент" (web components).
+
+На текущий момент эти стандарты -- в разработке, браузеры по-разному поспевают за их развитием. Статьи можно читать в любом браузере, но для тестирования я бы рекомендовал использовать Chrome Canary, поскольку главной "движущей силой" этих стандартов являются сотрудники Google и, как правило, этот браузер реализует последний вариант спецификации.
+
+Понимание этих стандартов важно потому, что это "взгляд в будущее", в то, какой станет интернет-разработка. Сейчас уже существуют некоторые полифиллы, частично реализующие их.
+
+Идеи веб-компонент взяты не с пустого места. Они эксплуатируются в более "приземлённых", текущих подходах к разработке.
+
+## Что общего, между...
+
+Прежде, чем мы перейдём к веб-компонентам, посмотрим на одну очень классную штуку:
+
+<img style="border-radius:5px" src="satellite.jpg">
+
+Да, это Международная Космическая Станция (МКС).
+
+И вот, как она, приблизительно, устроена:
+
+<img style="border-radius:5px" src="satellite-expanded.jpg">
+
+МКС:
+<ul>
+<li>Состоит из множества компонентов.</li>
+<li>Каждый компонент -- в свою очередь состоит из множества деталей внутри.</li>
+<li>Эти компоненты очень сложны, они гораздо сложнее, чем большинство сайтов.</li>
+<li>Их разрабатывают команды из разных стран, разговаривающие на разных языках.</li>
+</ul>
+
+...И эта штука летает! 
+
+За счёт чего строятся настолько сложные вещи? 
+
+Что мы могли бы позаимствовать, чтобы наша разработка была столь же надёжной и масштабируемой? Ну, или по крайней мере, близко к этому...
+
+## Компонентная архитектура
+
+Ключевое правило при разработке сложных вещей: "Никогда не делайте сложные вещи".
+
+Если что-то становится сложным -- разбиваем это на части попроще и связываем их наиболее очевидным способом.
+
+**Хороший архитектор -- это как раз тот, кто умеет делать сложное простым.**
+
+Любой сложный интерфейс мы делим на компоненты -- сущности, для которых мы можем максимально чётко и понятно указать, что это такое и что оно умеет делать.
+
+Посмотрим на какой-нибудь более-менее сложный сайт, например на [Twitter](http://twitter.com).
+
+Он естественным образом распадается на компоненты:
+<img src="twitter-components.png">
+
+Для наглядности они обведены <span style="border: 2px dashed red">красной рамкой:</span>
+
+<ol>
+<li>"Главное Меню"</li>
+<li>"Об Авторе"</li>
+<li>"Близкие по духу"</li>
+<li>"Твиты"</li>
+</ol>
+
+Как мы решаем, что именно выделять в компонент? Конечно, нам подсказывает опыт, но 
+
+В случае с твиттером разбиение на компоненты особенно очевидно. Странца "сама распадается" на чётко очерченные блоки, каждый из которых выполняет свою роль.
+
+Если представить каждый компонент HTML-тегом, то страница будет выглядеть примерно так (выделены нестандартные теги):
+
+```html
+<header>
+*!*
+  <top-menu/>
+*/!*
+</header>
+<aside>
+*!*
+  <author-info/>
+  <congenial-info/>
+*/!*
+</aside>
+<main>
+*!*
+  <tweets-list/>
+*/!*
+</main>
+```
+
+До недавнего времени, чтобы так описать страницу, требовались специальные JavaScript-фреймворки. Такой фреймворк позволял описывать "свои" теги, которые, после обработки фреймворком, становились JavaScript-объектами.
+
+Веб-компоненты (Web Components) -- это не один стандарт, а целая платформа, комплекс стандартов, которые вместе добавляют в браузер технологии для удобной реализации компонент.
+
+Если глядеть "сверху", то веб-компоненты -- это возможность добавлять свои элементы в браузер, например `document.createElement("tweets-list")`. Но "под капотом" кроются расширенные возможности по инкапсуляции поддерева DOM и стилей, по генерации событий и многое другое.
+
diff --git a/3-more/1-webcomponents/1-webcomponents-intro/satellite-expanded.jpg b/3-more/1-webcomponents/1-webcomponents-intro/satellite-expanded.jpg
new file mode 100755
index 00000000..39dd8a2b
Binary files /dev/null and b/3-more/1-webcomponents/1-webcomponents-intro/satellite-expanded.jpg differ
diff --git a/3-more/1-webcomponents/1-webcomponents-intro/satellite-expanded@2x.jpg b/3-more/1-webcomponents/1-webcomponents-intro/satellite-expanded@2x.jpg
new file mode 100755
index 00000000..5404f06c
Binary files /dev/null and b/3-more/1-webcomponents/1-webcomponents-intro/satellite-expanded@2x.jpg differ
diff --git a/3-more/1-webcomponents/1-webcomponents-intro/satellite.jpg b/3-more/1-webcomponents/1-webcomponents-intro/satellite.jpg
new file mode 100755
index 00000000..e3447947
Binary files /dev/null and b/3-more/1-webcomponents/1-webcomponents-intro/satellite.jpg differ
diff --git a/3-more/1-webcomponents/1-webcomponents-intro/satellite@2x.jpg b/3-more/1-webcomponents/1-webcomponents-intro/satellite@2x.jpg
new file mode 100755
index 00000000..85f5fe88
Binary files /dev/null and b/3-more/1-webcomponents/1-webcomponents-intro/satellite@2x.jpg differ
diff --git a/3-more/1-webcomponents/1-webcomponents-intro/twitter-components.png b/3-more/1-webcomponents/1-webcomponents-intro/twitter-components.png
new file mode 100755
index 00000000..e9383efa
Binary files /dev/null and b/3-more/1-webcomponents/1-webcomponents-intro/twitter-components.png differ
diff --git a/3-more/1-webcomponents/1-webcomponents-intro/twitter-components@2x.png b/3-more/1-webcomponents/1-webcomponents-intro/twitter-components@2x.png
new file mode 100755
index 00000000..76f6e7c6
Binary files /dev/null and b/3-more/1-webcomponents/1-webcomponents-intro/twitter-components@2x.png differ
diff --git a/3-more/1-webcomponents/2-webcomponent-core/article.md b/3-more/1-webcomponents/2-webcomponent-core/article.md
new file mode 100644
index 00000000..1c1bd54f
--- /dev/null
+++ b/3-more/1-webcomponents/2-webcomponent-core/article.md
@@ -0,0 +1,212 @@
+# Веб-компоненты
+
+Сердцем платформы "веб-компоненты" является стандарт [Web Components](http://w3c.github.io/webcomponents/explainer/), который находится в разработке и позволяет описывать свои элементы.
+[cut]
+## Зачем Web Components?
+
+Критично настроенный читатель скажет: "Зачем ещё стандарт для создания своих элементов? Я могу создать любой элемент и прямо сейчас! В любом из современных браузеров можно писать любой HTML, используя свои теги. В чём же разница?"
+
+Она в том, что обычно элемент с нестандартным названием (например `<message>`) воспринимается браузером, как нечто неопределённо-непонятное. Ему соответствует класс [HTMLUnknownElement](http://www.w3.org/TR/html5/dom.html#htmlunknownelement), и у него нет каких-либо особых методов.
+
+**Стандарт Web Components позволяет описывать для новых элементов свои свойства, методы, объявлять свой DOM, подобие конструктора и многое другое.**
+
+Давайте посмотрим это на примерах.
+
+[warn header="Только Chrome"]
+Так как спецификация не окончательна, то для запуска примеров рекомендуется использовать Chrome Canary.
+[/warn]
+
+## Новый элемент
+
+Для описания нового элемента используется вызов `document.registerElement(имя, { prototype: прототип })`.
+
+Здесь:
+<ul>
+<li>`имя` -- имя нового тега, например `"mega-select"`. Оно обязано содержать дефис `-`. Спецификация требует дефис, чтобы избежать в будущем конфликтов со стандартными элементами HTML. Нельзя создать элемент `timer` или `myTimer` -- будет ошибка.</li>
+<li>`прототип` -- объект-прототип для нового элемента, он должен наследовать от `HTMLElement`, чтобы у элемента были стандартные свойства и методы.</li>
+</ul>
+
+Вот, к примеру, новый элемент `<my-timer>`:
+
+```html
+<!--+ run -->
+<script>
+*!*
+  // прототип с методами для нового элемента
+*/!*
+  var MyTimerProto = Object.create(HTMLElement.prototype);
+  MyTimerProto.tick = function() { // *!*свой метод tick*/!*
+    this.innerHTML++;
+  };
+
+*!*
+  // регистрируем новый элемент в браузере
+*/!*
+  document.registerElement("my-timer", { 
+    prototype: MyTimerProto
+  });
+</script>
+
+*!*
+<!-- теперь используем новый элемент -->
+*/!*
+<my-timer id="timer">0</my-timer>
+
+<script>
+*!*
+  // вызовем метод tick() на элементе
+*/!*
+  setInterval(function() {
+    timer.tick();
+  }, 1000);
+</script>
+```
+
+**Метод `registerElement` может быть вызван в любое время, даже и после появления `<my-timer>` в HTML.**
+
+Для этого в браузере предусмотрен специальный режим "обновления" существующих элементов.
+
+Если браузер видит элемент с неизвестным именем, в котором есть дефис `-` (такие элементы называются "unresolved"), то:
+<ul>
+<li>Он ставит такому элементу специальный CSS-псевдокласс `:unresolved`, для того, чтобы через CSS можно было показать, что он ещё "не подгрузился".</li>
+<li>При вызове `registerElement` такие элементы автоматически обновятся до нужного класса.</li>
+</ul>
+
+Вот демо того, что происходит, когда регистрация элемента происходит после его появления в разметке:
+
+```html
+<!--+ run -->
+<style>
+*!*
+  /* стиль для :unresolved элемента (до регистрации) */
+*/!*
+  hello-world:unresolved {
+    color: white;
+  }
+  
+  hello-world {
+    transition: color 5s;
+  }
+</style>
+
+<hello-world id="hello">Hello, world!</hello-world>
+
+<script>
+*!*
+  // регистрация произойдёт через 2 сек
+*/!*
+  setTimeout(function() {
+    document.registerElement("hello-world", { 
+      prototype: {
+        __proto__: HTMLElement.prototype,
+        sayHi: function() { alert('Привет!'); }
+      }
+    });
+ 
+    hello.sayHi();
+  }, 2000);
+</script>
+```
+
+Создание таких элементов в JavaScript никак не отличается от обычных:
+
+```js
+var timer = document.createElement('my-timer');
+```
+
+## Расширение встроенных элементов
+
+Для расширения встроенных элементов у `registerElement` предусмотрен параметр `extends`, в котором можно задать, какой тег мы расширяем.
+
+Например:
+
+```html
+<!--+ run -->
+<script>
+  var MyTimerProto = Object.create(*!*HTMLButtonElement.prototype*/!*);
+  MyTimerProto.tick = function() { 
+    this.innerHTML++;
+  };
+
+  document.registerElement("my-timer", { 
+    prototype: MyTimerProto,
+*!*
+    extends: 'button' 
+*/!* 
+  });
+</script>
+
+<button *!*is="my-timer"*/!* id="timer">0</button>
+
+<script>
+  setInterval(function() {
+    timer.tick();
+  }, 1000);
+
+  timer.onclick = function() {
+    alert("Текущее значение: " + this.innerHTML);
+  };
+</script>
+```
+
+Важные детали:
+<dl>
+<dt>Прототип теперь наследует не от `HTMLElement`, а от `HTMLButtonElement`</dt>
+<dd>Чтобы расширить элемент, нужно унаследовать прототип от его класса.</dd>
+<dt>В HTML указывается при помощи атрибута `is="..."`</dt>
+<dd>Это принципиальное отличие разметки от обычного объявления без `extends`. Теперь `<my-timer>` работать не будет, нужно использовать исходный тег и `is`.</dd>
+<dt>Работают методы, стили и события кнопки.</dt>
+<dd>При клике на кнопку её не отличишь от встроенной. И всё же, это новый элемент, со своими методами, в данном случае `tick`.</dd>
+</dl>
+
+При создании нового элемента в JS, если используется `extends`, необходимо указать и исходный тег в том числе:
+
+```js
+var timer = document.createElement("button", "my-timer");
+```
+
+## Жизненный цикл
+
+Следующие методы автоматически вызываются во время жизненного цикла элемента:
+
+<table class="bordered">
+<tr><td>`createdCallback`</td><td>Элемент создан</td></tr>
+<tr><td>`attachedCallback`</td><td>Элемент добавлен в документ</td></tr>
+<tr><td>`detachedCallback`</td><td>Элемент удалён из документа</td></tr>
+<tr><td>`attributeChangedCallback(name, prevValue, newValue)`</td><td>Атрибут добавлен, изменён или удалён</td></tr>
+</table>
+
+Как вы, наверняка, заметили, `createdCallback` является подобием конструктора. Можно добавить к элементу свойства, запросить с сервера данные и так далее.
+
+Давайте используем `attachedCallback`, чтобы автоматически запускать таймер при вставке в документ:
+
+```html
+<!--+ run -->
+<script>
+  var MyTimerProto = Object.create(HTMLElement.prototype);
+
+  MyTimerProto.tick = function() { 
+    this.innerHTML++;
+  };
+
+*!*
+  MyTimerProto.attachedCallback = function() {
+    setInterval(this.tick.bind(this), 1000);
+  };
+*/!*
+
+  document.registerElement("my-timer", { 
+    prototype: MyTimerProto
+  });
+</script>
+
+<my-timer id="timer">0</my-timer>
+```
+
+Спецификация:
+<ul>
+<li>[Introduction to Web Components](http://w3c.github.io/webcomponents/explainer/)</li>
+<li>[Custom Elements](http://w3c.github.io/webcomponents/spec/custom/)</li>
+</ul>
+
+
diff --git a/3-more/1-webcomponents/3-shadow-dom/article.md b/3-more/1-webcomponents/3-shadow-dom/article.md
new file mode 100644
index 00000000..9a4697aa
--- /dev/null
+++ b/3-more/1-webcomponents/3-shadow-dom/article.md
@@ -0,0 +1,493 @@
+# Shadow DOM
+
+Спецификация [Shadow DOM](http://w3c.github.io/webcomponents/spec/shadow/index.html) готовится как отдельный стандарт и применяется, в том числе, отдельно от веб-компонентов.
+
+*Shadow DOM* -- это внутренний DOM элемента, который существует отдельно от внешнего документа. В нём могут быть свои ID, свои стили и так далее. Причём снаружи оно, без применения специальных техник, не видно, поэтому не возникает конфликтов.
+[cut]
+
+## Внутри браузера
+
+Концепция Shadow DOM начала применяться довольно давно внутри самих браузеров. Когда браузер показывает сложные элементы управления, наподобие слайдера `<input type="range">` или календаря `<input type="date">` -- внутри себя он конструирует их из самых обычных стилизованных `<div>`, `<span>` и так далее. 
+
+С первого взгляда они незаметны, но если в настройках Chrome Development Tools выбрать показ Shadow DOM, то их можно легко увидеть.
+
+Например, вот такое содержимое будет у `<input type="date">`:
+<img src="shadow-dom-chrome.png">
+
+То, что находится под `shadow-root` -- это и есть Shadow DOM. 
+
+**Получить элементы из Shadow DOM можно только при помощи специальных JavaScript-вызовов или селекторов. Это не обычные дети, а намного более мощное средство отделения содержимого.**
+
+В Shadow DOM выше можно увидеть полезный атрибут `pseudo`. С его помощью можно стилизовать подэлементы через CSS.
+
+Например, сделаем поле редактирования даты красным:
+
+```html
+<!--+ run -->
+<style>
+*!*
+input::-webkit-datetime-edit {
+*/!*
+  background: red;
+}
+</style>
+
+<input type="date">
+```
+
+Если говорить хронологически, то сначала браузеры начали экспериментировать внутри себя с инкапсуляцией внутренних DOM-структур, а уже потом, через некоторое время, появился стандарт Shadow DOM, который позволяет делать то же самое разработчикам.
+
+## Создание Shadow DOM
+
+Shadow DOM можно создать внутри любого элемента вызовом `elem.createShadowRoot()`.
+
+Например:
+
+```html
+<!--+ run -->
+<p id="elem">Доброе утро, страна!</p>
+
+<script>
+  var root = elem.createShadowRoot();
+  root.innerHTML = "<p>Привет из подполья!</p>";
+</script>
+```
+
+Если вы запустите этот пример, то увидите, что изначальное содержимое элемента куда-то исчезло и показывается только "Привет из подполья!". Это потому, что у элемента есть Shadow DOM. 
+
+**С момента создания Shadow DOM обычное содержимое (дети) элемента не отображается, а показывается только Shadow DOM.**
+
+Внутрь этого Shadow DOM, при желании, можно поместить обычное содержимое. Для этого нужно указать, куда, то есть "точку вставки" (insertion point). Это делается при помощи тега `<content>`.
+
+Укажем его:
+
+```html
+<!--+ run -->
+<p id="elem">Доброе утро, страна!</p>
+
+<script>
+  var root = elem.createShadowRoot();
+  root.innerHTML = "<h3>*!*<content></content>*/!*</h3> <p>Привет из подполья!</p>";
+</script>
+```
+
+Теперь, если у вас последний Chrome, вы увидите две строчки: "Доброе утро, страна!" в заголовке, а затем "Привет из подполья".
+
+Shadow DOM примера выше в инструментах разработки:
+
+<img src="shadow-content.png">
+
+Важные детали:
+<ul>
+<li>Тег `<content>` влияет только на отображение, он не перемещает узлы физически. Как видно из картинки выше, текстовый узел  "Доброе утро, страна!" остался внутри `p#elem`. Его можно даже получить при помощи `elem.firstElementChild`. </li>
+<li>Внутри `<content>` показывается не `<p>`, а его содержимое, то есть в данном случае текст "Привет из подполья".</li>
+</ul>
+
+**Атрибутом `select` можно указать конкретный селектор содержимого, которое нужно переносить. Например, `<content select="h3"></content>` перенесёт только заголовки.**
+
+Внутри Shadow DOM можно использовать `<content>` много раз, указывая таким образом, где конкретно какие части исходного содержимого разместить, но при этом дублирование узлов невозможно. Если узел показан в одном `<content>`, то в следующем он будет пропущен.
+
+Например, если сначала идёт `<content select="h3.big">`, а затем `<content select="h3">`, то в первом `<content>` будут показаны заголовки `<h3>` с классом `big`, а во втором -- все остальные.</li>
+
+**Содержимое внутри `<content>...</content>` будет показано только в том случае, если узлов для вставки нет.**
+
+Ещё пример:
+
+```html
+<!--+ run -->
+  
+<section id="elem">
+  <h1>Новости</h1>
+  <article>Жили-были <i>старик со старухой</i>, но недавно...</article>
+</section>
+
+<script>
+  var root = elem.createShadowRoot();
+  root.innerHTML = "<content select='h1'></content> \
+   <content select='.author'>Без автора.</content> \
+   <content></content>";
+  
+  alert(elem.innerHTML);
+  
+</script>
+```
+
+При запуске мы увидим, что:
+<ul>
+<li>Первый `<content select='h1'>` выведет заголовок.</li>
+<li>Второй `<content select=".author">` вывел бы автора, но так как такого элемента нет -- выводится содержимое самого `<content select=".author">`.</li> 
+<li>Третий `<content>` выведет остальное содержимое (уже без заголовка `<h1>`, он выведен ранее!)</li>
+</ul>
+
+Ещё раз обратим внимание, что `<content>` физически не перемещает узлы по DOM. Он только показывает, где их отображать, а также, как мы увидим далее, влияет на применение стилей. Поэтому в примере выше `innerHTML` выведет содержимое `elem`, как если бы не было никакого Shadow DOM.
+
+## Корень shadowRoot
+
+После создания корень внутреннего DOM-дерева доступен как `elem.shadowRoot`. 
+
+Он представляет собой специальный объект, поддерживающий основные методы CSS-запросов и подробно описанный в стандарте как [ShadowRoot](http://w3c.github.io/webcomponents/spec/shadow/#shadowroot-object).
+
+Например:
+
+```html
+<!--+ run -->
+<p id="elem">Доброе утро, страна!</p>
+
+<script>
+  var root = elem.createShadowRoot();
+  root.innerHTML = "<h3><content></content></h3> <p>Привет из подполья!</p>";
+</script>
+
+<script>
+*!*
+  var root = elem.shadowRoot; // ...где-то в другом месте кода
+  alert(root.querySelector('p').innerHTML); // Привет из подполья!
+  alert(root.querySelector('content').innerHTML); // пусто, физически узлы - вне content 
+*/!*
+</script>
+```
+
+[warn header="Внутрь встроенных элементов так \"залезть\" нельзя"]
+На момент написания статьи `shadowRoot` можно получить только для Shadow DOM, созданного описанным выше способом, но не встроенного, как в элементах типа `<input type="date">`.
+[/warn]
+
+## Шаблоны <template>
+
+Элемент `<template>` предназначен для хранения "образца" разметки, предназначенного для вставки куда-либо.
+
+Его отличие от обычных тегов в том, что его содержимое обрабатывается особым образом. Оно не показывается и считается находящимся вообще "вне документа".
+
+Однако, вместе с тем, оно всё же парсится браузером и записывается в виде `DocumentFragment` в свойство `content`. Предполагается, что мы, при необходимости, возьмём фрагмент `content` и вставим, куда надо.
+
+Пример использования:
+
+```html
+<!--+ run -->
+  
+<p id="elem">Доброе утро, страна!</p>
+
+<template id="tmpl">
+  <h3><content></content></h3> 
+  <p>Привет из подполья!</p>
+  <script> alert('Новость!'); </script>
+</template>
+
+<script>
+  var root = elem.createShadowRoot();
+  root.appendChild( tmpl.content.cloneNode(true) );
+</script>
+```
+
+Детали:
+<ul>
+<li>В отличие от вставки через `innerHTML` и от обычного `DocumentFragment`, скрипт внутри шаблона выполнится при вставке. Содержимое шаблона изначально "вне документа" и "оживает", когда оно попадает в него. Это относится ко всему -- картинки начинают загружаться, видео -- проигрываться и т.п.</li>
+<li>Вставляется не сам `tmpl.content`, а его клон. Это обычная практика, чтобы можно было использовать содержимое одного шаблона во многих однотипных элементах.</li>
+</ul>
+
+## Стили 
+
+Стилизация Shadow DOM покрывается более общей спецификацией ["CSS Scoping"](http://drafts.csswg.org/css-scoping/). 
+
+**По умолчанию стили внутри Shadow DOM относятся только к его содержимому.**
+
+Например:
+
+```html
+<!--+ run -->
+<p>Жили мы тихо-мирно, и тут...</p>
+
+<p id="elem">Доброе утро, страна!</p>
+
+<template id="tmpl">
+*!*
+  <style> p { color: red; } </style>
+*/!*
+  <h3><content></content></h3> 
+  <p>Привет из подполья!</p>
+</template>
+
+<script>
+  var root = elem.createShadowRoot();
+  root.appendChild( tmpl.content.cloneNode(true) );
+</script>
+```
+
+При запуске окрашенным в красный цвет окажется только `<p>` внутри Shadow DOM.
+
+...Но при помощи специальных селекторов переходить через эту границу!
+
+### Извне стиль для Shadow DOM
+
+Если нужно со страницы стилизовать или выбрать элементы внутри Shadow DOM, то можно использовать селекторы:
+
+<ul>
+<li>**`::shadow` -- выбирает корень Shadow DOM.** 
+
+Например, `#elem::shadow div` найдёт внутри Shadow DOM `#elem` элементы `div`.</li>
+<li>**`/deep/` -- особого вида CSS-селектор для всех элементов Shadow DOM, который полностью игнорирует границы между DOM'ами, включая вложенные подэлементы, у которых тоже может быть свой Shadow DOM.**
+
+Например, `#elem /deep/ span` найдёт все `span` внутри Shadow DOM `#elem`, но кроме того, если в `#elem` есть подэлементы, у которых свой Shadow DOM, то оно продолжит поиск в них.
+
+Вот пример, когда внутри одного Shadow DOM есть `<input type="date">`, у которого тоже есть Shadow DOM:
+
+```html
+<!--+ run -->
+<style>
+##elem::shadow span {
+  /* для span только внутри Shadow DOM #elem */
+  text-decoration: underline;    
+}
+
+##elem /deep/ span {
+  /* для span внутри Shadow DOM #elem и далее внутри input[type=date] */
+  color: red; 
+}
+</style>
+
+<p id="elem"></p>
+
+<script>
+  var root = elem.createShadowRoot();
+  root.innerHTML = "<span>Текущее время:</span> <input type='date'>";
+</script>
+```
+
+</li>
+<li>Кроме того, на Shadow DOM действует CSS-наследование, если свойство поддерживает его по умолчанию.
+
+В этом примере CSS-стили для `body` наследуются на внутренние элементы, включая Shadow DOM:
+
+```html
+<!--+ run autorun -->
+<style>
+  body {
+    color: red;
+    font-style: italic;
+  }
+</style>
+<p id="elem"></p>
+<script>
+  elem.createShadowRoot().innerHTML = "<span>Привет, мир!</span>";
+</script>
+```
+
+Внутренний элемент станет красным курсивом. 
+</li>
+</ul>
+
+[warn header="Нельзя получить содержимое встроенных элементов"]
+Описанные CSS-селекторы можно использовать не только в CSS, но и в `querySelector`. 
+
+Исключением являются встроенные элементы типа `<input type="date">`, для которых CSS-селекторы работают, но  получить их содержимое нельзя.
+
+Например:
+
+```html
+<!--+ run -->
+<p id="elem"></p>
+
+<script>
+  var root = elem.createShadowRoot();
+  root.innerHTML = "<span>Текущее время:</span> <input type='date'>";
+  
+  // выберет только span из #elem
+  // вообще-то, должен выбрать и span из вложенных Shadow DOM,
+  // но в текущей браузерной реализации для встроенных элементов - не умеет
+  alert(document.querySelector('#elem /deep/ span').length); // 1
+</script>
+```
+
+[/warn]
+
+### Стиль Shadow DOM в зависимости от хозяина
+
+Следующие селекторы позволяют выбрать элемент-хозяин:
+
+<ul>
+<li>**`:host` выбирает элемент-хозяин**, в котором, живёт Shadow DOM.</li>
+<li>**`:host(селектор хозяина)` выбирает элемент-хозяин, если он подходит под селектор.**
+
+Например:
+
+```css
+:host(.important) { 
+  /* сработает, если хозяин имеет класс important */
+}
+```
+
+Этот селектор используется для темизации хозяина "изнутри", в зависимости от его классов и атрибутов. 
+
+**Хозяин :host выбирается в именно в контексте Shadow DOM.**
+
+То есть, это доступ не к внешнему элементу, а, скорее, к корню текущего Shadow DOM.
+
+После `:host(...)` мы можем указать селекторы и стили, которые нужно применить, если хозяин удовлетворяет тому или иному условию, например:
+
+```html
+<style> 
+  :host p { color: green; } 
+  :host(.important) p { color: red; } 
+</style>
+```
+
+Эти селекторы сработают для `<p>` внутри Shadow DOM, причём второй -- только если у хозяина стоит класс `important`.
+</li>
+<li>**`:host-context(селектор хозяина)` выбирает элемент-хозяин, если какой-либо из его родителей удовлетворяет селектору.**
+
+Например:
+
+```css
+:host-context(h1) p {
+  /* селектор сработает для p, если хозяин находится внутри h1 */
+}
+```
+
+Это используется для расширенной темизации, теперь уже не только в зависимости от его атрибутов, но и от того, внутри каких элементов он находится.
+</li>
+</ul>
+
+Пример использования селектора `:host()` для темизации содержимого:
+
+```html
+<!--+ run autorun -->
+*!*
+<p class="message info">Доброе утро, страна!</p>
+*/!*
+
+*!*
+<p class="message warning">Внимание-внимание! Говорит информбюро!</p>
+*/!*
+
+<template id="tmpl">
+  <style>
+  .content {
+    min-height: 20px;
+    padding: 19px;
+    margin-bottom: 20px;
+    background-color: #f5f5f5;
+    border: 1px solid #e3e3e3;
+    border-radius: 4px;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
+  }
+
+*!*
+  :host(.info) .content {
+    color: green;
+  }
+  
+  :host(.warning) .content {
+    color: red;
+  }
+*/!*
+  
+  </style>
+  <div class="content"><content></content></div>
+</template>
+
+<script>
+var elems = document.querySelectorAll('p.message');
+
+elems[0].createShadowRoot().appendChild( tmpl.content.cloneNode(true) );
+elems[1].createShadowRoot().appendChild( tmpl.content.cloneNode(true) );
+</script>
+```
+
+### Стиль для содержимого <content>
+
+Тег `<content>` не меняет DOM, а указывает, что где показывать. Поэтому если элемент изначально находится в элементе-хозяине -- внешний документ сохраняет к нему доступ.
+
+К нему будут применены стили и сработают селекторы, всё как обычно.
+
+Например, здесь применится стиль для `<span>`:
+
+```html
+<!--+ run -->
+<style>
+*!*
+  span { text-decoration: underline; }
+*/!*
+</style>
+    
+<p id="elem"><span>Доброе утро, страна!</span></p>
+
+<template id="tmpl">
+  <h3><content></content></h3> 
+  <p>Привет из подполья!</p>
+</template>
+
+<script>
+  elem.createShadowRoot().appendChild( tmpl.content.cloneNode(true) );
+</script>
+```
+
+В примере выше заголовок "Доброе утро, страна!", который пришёл как `<span>` из внешнего документа, будет подчёркнут, 
+
+...Но, поскольку эти узлы показываются внутри Shadow DOM, то ему тоже может понадобится к ним доступ.
+
+**Для обращения к "содержимому" `<content>` используется псевдоэлемент `::content`.**
+
+Например, `content[select="h1"]::content span` найдёт элемент `<content select="h1">` и *в его содержимом* отыщет `<span>`. 
+
+Селектор `::content` подразумевает `*::content`, так что `::content span` стилизует все `<span>` внутри всех `<content>`.
+
+Например:
+
+```html
+<!--+ run -->
+<style>
+*!*
+  span { text-decoration: underline; }
+*/!*
+</style>
+
+<p id="elem"><span>Доброе утро, страна!</span></p>
+
+<template id="tmpl">
+  <style> 
+*!*
+    ::content span { color: green; } 
+*/!*
+  </style> 
+  <h3><content></content></h3> 
+  <p>Привет из подполья!</p>
+</template>
+
+<script>
+  elem.createShadowRoot().appendChild( tmpl.content.cloneNode(true) );
+</script>
+```
+
+Если запустить пример выше, то текст внутри `<h3>` станет зелёным и подчёркнутым одновременно. 
+
+Приоритет селекторов расчитывается по [обычным правилам специфичности](http://www.w3.org/TR/css3-selectors/#specificity), если же приоритеты стилей на странице и в Shadow DOM и на странице равны, то, как описано в секции [Cascading](http://dev.w3.org/csswg/css-scoping/#cascading), побеждает страница, а для `!important`-стиля побеждает Shadow DOM.
+</li>
+</ul>
+
+[summary]
+Если обобщить -- инкапсуляция Shadow DOM имеет односторонний характер:
+<ul>
+<li>Изнутри Shadow DOM можно стилизовать только сам Shadow DOM и узлы, показываемые в `<content>`.</li>
+<li>Со страницы можно иметь доступ и стилизовать элементы, изначально находящиеся внутри хозяина -- напрямую, а узлы внутри Shadow DOM -- при помощи селекторов `::shadow` и `/deep/`.</li>
+</ul>
+[/summary]
+
+
+## Итого
+
+Shadow DOM -- это средство для создания отдельного DOM-дерева внутри элемента, которое не видно снаружи без применения специальных методов.
+
+<ul>
+<li>Ряд браузерных элементов со сложной структурой уже имеют Shadow DOM.</li>
+<li>Можно создать Shadow DOM внутри любого элемента вызовом `elem.createShadowRoot()`. В дальнейшем его корень будет доступен как `elem.shadowRoot`.</li>
+<li>Как только у элемента появляется Shadow DOM, его изначальное содержимое скрывается. Теперь показывается только Shadow DOM, который может указать, какое содержимое хозяина куда вставлять, при помощи элемента `<content>`. Можно указать селектор `<content select="селектор">` и размещать разное содержимое в разных местах Shadow DOM.</li>
+<li>Стили  и `querySelector`, объявленные внутри Shadow DOM, по умолчанию относятся только к его содержимому, могут обращаться к содержимому `<content>`, но не к основной странице.</li>
+<li>Стили и `querySelector` с внешней страницы могут преодолевать границу между DOM при помощи селекторов `::shadow` и `/deep/`.</li>
+</ul>
+
+Спецификации, затрагивающие Shadow DOM:
+
+<ul>
+<li>[Shadow DOM](http://w3c.github.io/webcomponents/spec/shadow/) -- самая полная спецификация по свойствам и методам Shadow DOM, деталям обработки событий.</li>
+<li>[Introduction to Web Components](http://w3c.github.io/webcomponents/explainer/) -- обо всём понемногу.</li>
+<li>[CSS Scoping](http://drafts.csswg.org/css-scoping/) -- спецификация по CSS-селекторам, в том числе Shadow DOM.</li>
+</ul>
diff --git a/3-more/1-webcomponents/3-shadow-dom/shadow-content.png b/3-more/1-webcomponents/3-shadow-dom/shadow-content.png
new file mode 100755
index 00000000..36ad0639
Binary files /dev/null and b/3-more/1-webcomponents/3-shadow-dom/shadow-content.png differ
diff --git a/3-more/1-webcomponents/3-shadow-dom/shadow-content@2x.png b/3-more/1-webcomponents/3-shadow-dom/shadow-content@2x.png
new file mode 100755
index 00000000..4d265000
Binary files /dev/null and b/3-more/1-webcomponents/3-shadow-dom/shadow-content@2x.png differ
diff --git a/3-more/1-webcomponents/3-shadow-dom/shadow-dom-chrome.png b/3-more/1-webcomponents/3-shadow-dom/shadow-dom-chrome.png
new file mode 100755
index 00000000..65bdbbd3
Binary files /dev/null and b/3-more/1-webcomponents/3-shadow-dom/shadow-dom-chrome.png differ
diff --git a/3-more/1-webcomponents/3-shadow-dom/shadow-dom-chrome@2x.png b/3-more/1-webcomponents/3-shadow-dom/shadow-dom-chrome@2x.png
new file mode 100755
index 00000000..35969f9f
Binary files /dev/null and b/3-more/1-webcomponents/3-shadow-dom/shadow-dom-chrome@2x.png differ
diff --git a/3-more/1-webcomponents/4-link-import/article.md b/3-more/1-webcomponents/4-link-import/article.md
new file mode 100644
index 00000000..0090fbfb
--- /dev/null
+++ b/3-more/1-webcomponents/4-link-import/article.md
@@ -0,0 +1,173 @@
+# Импорты
+
+Новая спецификация ["HTML Imports"](http://w3c.github.io/webcomponents/spec/imports/index.html) описывает, как вставить один документ в другой при помощи HTML-тега `<link rel="import">`.
+
+[cut]
+
+## Зачем?
+
+Мы ведь и так можем вставлять документ в документ, при помощи `<iframe>`, зачем нужен ещё какой-то импорт? Что не так с `iframe`?
+
+...С `iframe` всё так. Однако, по своему смыслу `iframe` -- это отдельный документ.
+<ul>
+<li>Для `iframe` создаётся полностью своё окружение, у него свой объект `window` и свои переменные.</li>
+<li>Если `iframe` загружен с другого домена, то взаимодействие с ним возможно только через `postMessage`.</li>
+</ul>
+
+Это хорошо, когда нужно действительно в одной странице отобразить содержимое другой.
+
+А что, если нужно встроить другой документ как естественную часть текущего? С единым скриптовым пространством, едиными стилями. И желательно не иметь проблем с разными доменами: если уж мы действительно хотим подключить HTML с одного домена в  страницу на другом -- мы должны иметь возможность это сделать без "плясок с бубном".
+
+Именно для этого предназначен `<link rel="import" href="...">`.
+
+## Пример вставки
+
+Синтаксис:
+
+```html
+<link rel="import" href="http://site.com/document.html">
+```
+
+<ul>
+<li>В отличие от `<iframe>` тег `<link rel="import">` может быть в любом месте документа.</li>
+<li>При вставке через `<iframe>` документ показывается внутри фрейма. В случае с `<link rel="import">` это не так, по умолчанию документ вообще не показывается.</li>
+</ul>
+
+**HTML, загруженный через `<link rel="import">` имеет отдельный DOM документа, но скрипты в нём выполняются в общем контексте страницы.**
+
+Файл, загруженный через `<link rel="import">`, обрабатывается, выполняются скрипты, строится DOM документа, но не показывается, а записывается в свойство `link.import`. 
+
+Мы сами решаем, где и когда его вставить.
+
+Например:
+[iframe src="import-show" link edit height="60" border="1"]
+
+Основной документ:
+
+```html
+<!--+ src="index.html" -->
+```
+
+Важные детали:
+<ul>
+<li>Загрузка осуществляется асинхронно, для того чтобы поймать момент загрузки -- используется событие `onload`, для ошибки -- `onerror`.</li>
+<li>Подгруженный документ доступен как `link.import`. Это полноценный HTML-документ.</li>
+</ul>
+
+Файл `timer.html`:
+
+```html
+<!--+ src="timer.html" -->
+```
+
+Важные детали:
+<ul>
+<li>После загрузки все скрипты в подключённом `timer.html` выполняются в контексте основной страницы, так что `timer` и другие переменные станут глобальными переменными страницы.</li>
+<li>Переменная `document` -- это документ основной страницы. Для доступа к импортированному, то есть текущему документу его можно получить как `document.currentScript.ownerDocument`.</li>
+<li>Таймер в загруженном документе начинает работать сразу, новый документ активен, хотя до переноса узлов в основной документ этого не видно.</li>
+</ul>
+
+В примере выше содержимым импорта управлял основной документ, но `timer.html` мог бы и показать сам себя вызовом `document.body.appendChild(timer)` или вызвать функцию с внешнего документа, так как у них единая область видимости. Тогда не понадобился бы никакой `onload`.
+
+Ещё пример вставки:
+
+[iframe src="import-style" link edit height="60" border="1"]
+
+Основной документ:
+
+```html
+<!--+ src="index.html" -->
+```
+
+Сейчас он просто загружает `timer.html` и всё. А вставит себя импорт сам.
+
+Файл `timer.html`:
+
+```html
+<!--+ src="timer.html" -->
+```
+
+**Обратим внимание -- стили импорта попадают в контекст страницы.**
+
+В примере выше импорт добавил и стиль для `#timer` и сам элемент.
+
+## Веб-компоненты
+
+Импорт задуман как часть платформы веб-компонент.
+
+Предполагается, что главный документ может импортировать файлы-определения, в которых будут все необходимые HTML, JS и CSS для элементов:
+
+Файл `index.html`:
+
+```html
+<link rel="import" href="ui-tabs.html">
+<link rel="import" href="ui-dialog.html">
+
+<ui-tabs>...</ui-tabs>
+<ui-dialog>...</ui-dialog>
+```
+
+В следующей главе мы разберём расширенный пример на эту тему.
+
+## Повторное использование
+
+Повторный импорт с тем же URL использует уже существующий документ.
+ 
+Если файл `libs.html` импортирован два раза, то CSS и скрипты из него подключатся и выполнятся ровно один раз.
+
+Файл `libs.html`:
+
+```html
+<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
+<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
+<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
+<script> alert('Библиотеки подключены!'); </script>
+```
+
+Это можно использовать, чтобы не подгружать одинаковые зависимости много раз. И сама страница и её импорты, и их подимпорты, и так далее, могут подключать `libs.html` без опасения лишний раз перезагрузить и выполнить скрипты.
+
+Например:
+<ul>
+<li>Главный файл `index.html` подключает документы:
+
+```html
+<link rel="import" href="ui-tabs.html">
+<link rel="import" href="ui-dialog.html">
+...
+```
+
+</li>
+<li>`ui-tabs.html`:
+
+```html
+<link rel="import" href="libs.html">
+...template и код для табов...
+```
+
+</li>
+
+<li>`ui-dialog.html`:
+
+```html
+<link rel="import" href="libs.html">
+...template и код для диалогов...
+```
+
+</li>
+</ul>
+
+[edit src="import-libs"/]
+
+Открыв пример, вы увидите, что скрипты `libs.html` сработают один раз.
+
+## Итого
+
+Тег `<link rel="import">` позволяет подключить любой документ к странице, причём:
+
+<ul>
+<li>Скриптовое пространство и стили со страницей будут общие.</li>
+<li>Документ DOM -- отдельный, он доступен как `link.import` снаружи, а из внутреннего скрипта -- через `document.currentScript.ownerDocument`. Можно без проблем переносить элементы из главного документа в импорт и наоборот.</li>
+<li>Импорты могут содержать другие импорты.</li>
+<li>Если какой-то URL импортируется повторно -- подключается уже готовый документ, без повторного выполнения скриптов в нём. Это можно использовать для удобного управления зависимостями.</li>
+</ul>
+ 
diff --git a/3-more/1-webcomponents/4-link-import/import-libs.view/index.html b/3-more/1-webcomponents/4-link-import/import-libs.view/index.html
new file mode 100755
index 00000000..0c335249
--- /dev/null
+++ b/3-more/1-webcomponents/4-link-import/import-libs.view/index.html
@@ -0,0 +1,4 @@
+<link rel="import" href="ui-tabs.html">
+<link rel="import" href="ui-dialog.html">
+...
+
diff --git a/3-more/1-webcomponents/4-link-import/import-libs.view/libs.html b/3-more/1-webcomponents/4-link-import/import-libs.view/libs.html
new file mode 100755
index 00000000..fc35034a
--- /dev/null
+++ b/3-more/1-webcomponents/4-link-import/import-libs.view/libs.html
@@ -0,0 +1,4 @@
+<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
+<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
+<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
+<script> alert('Библиотеки подключены!'); </script>
diff --git a/3-more/1-webcomponents/4-link-import/import-libs.view/ui-dialog.html b/3-more/1-webcomponents/4-link-import/import-libs.view/ui-dialog.html
new file mode 100755
index 00000000..cf5ffc4b
--- /dev/null
+++ b/3-more/1-webcomponents/4-link-import/import-libs.view/ui-dialog.html
@@ -0,0 +1,2 @@
+<link rel="import" href="libs.html">
+...template и код для диалогов...
diff --git a/3-more/1-webcomponents/4-link-import/import-libs.view/ui-tabs.html b/3-more/1-webcomponents/4-link-import/import-libs.view/ui-tabs.html
new file mode 100755
index 00000000..fbd5bd0a
--- /dev/null
+++ b/3-more/1-webcomponents/4-link-import/import-libs.view/ui-tabs.html
@@ -0,0 +1,2 @@
+<link rel="import" href="libs.html">
+...template и код для табов...
diff --git a/3-more/1-webcomponents/4-link-import/import-show.view/index.html b/3-more/1-webcomponents/4-link-import/import-show.view/index.html
new file mode 100755
index 00000000..4f7ff70a
--- /dev/null
+++ b/3-more/1-webcomponents/4-link-import/import-show.view/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+  <body>
+  
+    <script>
+      
+      function show() {
+        var p = link.import.querySelector('p')
+        document.body.appendChild(p);
+      };
+
+    </script>
+  
+    <link rel="import" id="link" onload="show()" href="timer.html"> 
+
+  </body>
+
+</html>
\ No newline at end of file
diff --git a/3-more/1-webcomponents/4-link-import/import-show.view/timer.html b/3-more/1-webcomponents/4-link-import/import-show.view/timer.html
new file mode 100755
index 00000000..641bc1c2
--- /dev/null
+++ b/3-more/1-webcomponents/4-link-import/import-show.view/timer.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+  <body>
+    
+    <p id="timer">0</p>
+
+    <script>
+      var localDocument = document.currentScript.ownerDocument;
+      var timer = localDocument.getElementById('timer');
+      
+      var timerId = setInterval(function() {
+        timer.innerHTML++;
+      }, 1000);  
+
+    </script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/3-more/1-webcomponents/4-link-import/import-style.view/index.html b/3-more/1-webcomponents/4-link-import/import-style.view/index.html
new file mode 100755
index 00000000..5250c1d8
--- /dev/null
+++ b/3-more/1-webcomponents/4-link-import/import-style.view/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <link rel="import" id="link" href="timer.html">
+  </head>
+  <body></body>
+</html>
\ No newline at end of file
diff --git a/3-more/1-webcomponents/4-link-import/import-style.view/timer.html b/3-more/1-webcomponents/4-link-import/import-style.view/timer.html
new file mode 100755
index 00000000..6f4fdef4
--- /dev/null
+++ b/3-more/1-webcomponents/4-link-import/import-style.view/timer.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <style>
+      #timer { color: red; }
+    </style>
+  </head>
+  <body>
+    
+    <p id="timer">0</p>
+
+    <script>
+      var localDocument = document.currentScript.ownerDocument;
+      var timer = localDocument.getElementById('timer');
+      
+      var timerId = setInterval(function() {
+        timer.innerHTML++;
+      }, 1000);  
+
+      document.body.appendChild(timer);
+
+    </script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/3-more/1-webcomponents/4-link-import/index.html b/3-more/1-webcomponents/4-link-import/index.html
new file mode 100755
index 00000000..5250c1d8
--- /dev/null
+++ b/3-more/1-webcomponents/4-link-import/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <link rel="import" id="link" href="timer.html">
+  </head>
+  <body></body>
+</html>
\ No newline at end of file
diff --git a/3-more/1-webcomponents/4-link-import/timer.html b/3-more/1-webcomponents/4-link-import/timer.html
new file mode 100755
index 00000000..6f4fdef4
--- /dev/null
+++ b/3-more/1-webcomponents/4-link-import/timer.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <style>
+      #timer { color: red; }
+    </style>
+  </head>
+  <body>
+    
+    <p id="timer">0</p>
+
+    <script>
+      var localDocument = document.currentScript.ownerDocument;
+      var timer = localDocument.getElementById('timer');
+      
+      var timerId = setInterval(function() {
+        timer.innerHTML++;
+      }, 1000);  
+
+      document.body.appendChild(timer);
+
+    </script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/3-more/1-webcomponents/5-webcomponent-build/article.md b/3-more/1-webcomponents/5-webcomponent-build/article.md
new file mode 100644
index 00000000..37404d06
--- /dev/null
+++ b/3-more/1-webcomponents/5-webcomponent-build/article.md
@@ -0,0 +1,296 @@
+# Веб-компонент в сборе
+
+В этой главе мы посмотрим на расширенный пример веб-компонента, включающий в себя описанные ранее технологии: Custom Elements, Shadow DOM, CSS Scoping и, конечно же, Imports.
+
+[cut]
+
+## Компонент ui-message
+
+Компонент `ui-message` будет описан в отдельном файле `ui-message.html`.
+
+Его использование будет выглядеть следующим образом:
+
+```html
+<link rel="import" id="link" href="ui-message.html">
+
+<style>
+  ui-message {
+    width: 80%;
+    margin: auto;
+  }
+</style>
+
+*!*
+<ui-message class="info">Доброе утро, страна!</ui-message>
+*/!*
+
+*!*
+<ui-message class="warning">Внимание-внимание! Говорит информбюро!</ui-message>
+*/!*
+```
+
+Этот код ничем не отличается от использования обычного элемента, поэтому перейдём дальше, к содержимому `ui-message.html`
+
+### Шаблон
+
+Файл `ui-message.html` можно начать с шаблона:
+
+```html
+<template id="tmpl">
+  <style>
+  .content {  
+    min-height: 20px;
+    padding: 19px;
+    margin-bottom: 20px;
+    background-color: #f5f5f5;
+    border: 1px solid #e3e3e3;
+    border-radius: 4px;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
+  }
+
+  :host { 
+    display: block;
+  }
+
+  :host(.info) .content {
+    color: green;
+  }
+  
+  :host(.warning) .content {
+    color: red;
+  }
+  </style>
+  <div class="content"><content></content></div>
+</template>
+```
+
+Этот шаблон рисует `<div class="content">` и заполняет его содержимым элемента.
+
+Важные детали:
+<ul>
+<li>Самое важное правило здесь `:host { display:block }`.
+
+Оно обязательно! . Это правило задаёт, что элемент-хозяин, то есть `<ui-message>`, будет иметь `display:block`. По умолчанию у элементов стоит `display: inline`, а это значит, что ни ширину ни `margin` указать не получится
+
+Обратим внимание -- `display` относится к базовым свойствам элемента, поэтому задаётся в Shadow DOM. Внешняя страница надстраивает свои свойства поверх "стандартных".</li>
+<li>Последующие правила `:host(.info) .content` и `:host(.warning) .content` стилизуют уже не хозяина, а элемент `.content` в зависимости от того, какой на хозяине класс.</li>
+</ul>
+
+### Скрипт
+
+<script>
+// (1) получить шаблон
+var localDocument = document.currentScript.ownerDocument;
+var tmpl = localDocument.getElementById('tmpl');
+
+// (2) создать элемент
+var MessageProto = Object.create(HTMLElement.prototype);
+
+MessageProto.createdCallback = function() {
+  var root = this.createShadowRoot();
+  root.appendChild(tmpl.content.cloneNode(true));
+};
+
+// (3) зарегистрировать в DOM
+document.registerElement('ui-message', {
+  prototype: MessageProto
+});
+</script>
+[/html]
+
+Все компоненты этого кода мы подробно разбирали ранее:
+
+<ol>
+<li>Получаем шаблон из текущего документа, то есть из самого импорта.</li>
+<li>Описываем элемент. Он довольно прост -- при создании записывает в свой `Shadow DOM` шаблон. При этом содержимое исходного элемента будет показано в `<content>`, но делать правила на сам `content` бессмысленно -- они не сработают. Нужно либо перейти внутрь `<content>` при помощи `::content`-селектора, либо указать для внешнего элемента `.content`, что в данном случае и сделано.</li>
+<li>С момента регистрации все уже существующие элементы `<ui-message>` будут превращены в описанные здесь. И будущие, конечно, тоже.</li>
+</ol>
+
+В действии:
+
+[iframe src="message" border="1" edit link/]
+
+## Компонент ui-slider
+
+Теперь создадим слайдер с использованием библиотеки [jQuery UI](http://jqueryui.com).
+
+Компонент `ui-slider` будет показывать слайдер с минимальным и максимальным значением из атрибутов `min/max` и генерировать событие `slide` при его перемещении.
+
+Использование:
+
+```html
+<link rel="import" id="link" href="ui-slider.html">
+
+<ui-slider min="0" max="1000" id="elem"></ui-slider>
+    
+<script>
+  elem.addEventListener("slide", function(e) {
+    value.innerHTML = e.detail.value; 
+  });
+</script>    
+
+<div id="value">0</div>
+```
+
+Файл `ui-slider.html` мы разберём по частям.
+
+### Заголовок
+
+В начале подключим jQuery и jQuery UI.
+
+Мы импортируем в слайдер `jquery.html`, который содержит теги `<script>` вместо того, чтобы явным образом прописывать загрузку скриптов:
+
+```html
+<head>
+  <link rel="import" href="jquery.html">
+</head>
+```
+
+Это сделано для того, чтобы другие компоненты, которым тоже могут понадобится эти библиотеки, также могли импортировать `jquery.html`. При повторном импорте ничего не произойдёт, скрипты не будут подгружены и исполнены два раза.
+
+То есть, это средство оптимизации.
+
+Содержимое `jquery.html`:
+
+```html
+<script src="http://code.jquery.com/jquery-latest.js"></script>
+<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
+```
+
+### Шаблон
+
+Шаблон будет помещён в Shadow DOM. В нём должны быть стили и элементы, необходимые слайдеру.
+
+Конкретно для слайдера из разметки достаточно одного элемента `<div id="slider"></div>, который затем будет обработан jQuery UI.
+
+Кроме того, в шаблоне должны быть стили:
+
+```html
+<template id="tmpl">
+  <style>
+    @import url(http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css);
+
+    :host { 
+      display: block;
+    }
+  </style>
+  <div id="slider"></div>
+</template>
+```
+
+### Скрипт
+
+Скрипт для нового элемента похож на тот, что делали раньше, но теперь он использует jQuery UI для создания слайдера внутри своего Shadow DOM.
+
+Для его понимания желательно знать jQuery, но я намеренно свёл использование этой библиотеки к минимуму. Ниже будет описание по шагам.
+
+```js
+var localDocument = document.currentScript.ownerDocument;
+var tmpl = localDocument.getElementById('tmpl');
+
+var SliderProto = Object.create(HTMLElement.prototype);
+
+SliderProto.createdCallback = function() {
+  // (1) инициализовать Shadow DOM, получить из него #slider 
+  var root = this.createShadowRoot();
+  root.appendChild(tmpl.content.cloneNode(true));
+
+  this.$slider = $(root.getElementById('slider'));
+  
+  var self = this;
+
+  // (2) инициализовать слайдер, пробросить параметры
+  this.$slider.slider({
+    min: this.getAttribute('min') || 0,
+    max: this.getAttribute('max') || 100,
+    value: this.getAttribute('value') || 0,
+    slide: function() {  
+      // (3) пробросить событие
+      var event = new CustomEvent("slide", {
+        detail: { value: self.$slider.slider("option", "value") },
+        bubbles: true
+      });
+      self.dispatchEvent(event);
+    }
+  });
+};
+
+document.registerElement('ui-slider', {
+  prototype: SliderProto
+});
+```
+
+Функция `createdCallback` по шагам:
+
+<ol>
+<li>Создаём Shadow DOM, элемент `#slider` получаем из него, он не в основном документе.</li>
+<li>Используя jQuery UI, слайдер создаётся вызовом [jQuery UI методом slider](http://jqueryui.com/slider/), который имеет вид `$elem.slider({...параметры...});`. Параметры получаем из атрибутов `<ui-slider>` (он же `this`) и отдаём библиотеке. Она делает всю работу.</li>
+<li>Параметр `slide` задаёт функцию-коллбэк, которая вызывается при передвижении слайдера и будет генерировать DOM-событие на элементе, на которое можно будет поставить обработчик при помощи `addEventListener`. В его деталях мы указываем новое значение слайдера.</li>
+</ol>
+
+Полный код с примером:
+
+[iframe src="ui-slider" edit link border="1"/]
+ 
+Его можно далее улучшать, например добавить геттер и сеттер для значения `value`:
+
+```js
+Object.defineProperty(SliderProto, 'value', {
+  get: function() {
+    return this.$slider.slider("option", "value");
+  },
+  set: function(value) {
+    this.$slider.slider('option', 'value', value);
+  }
+});
+```
+
+Если добавить этот код, то к значению `<ui-slider>` можно будет обращаться как `elem.value`, аналогично всяким встроенным `<input>`.
+
+**Попробуйте пример выше. Он не совсем работает!**
+
+Слайдер прокручивается первый раз, но второй раз он как-то странно "прыгает".
+
+Чтобы понять, почему это происходит, я заглянул в исходники jQuery UI и, после отладки происходящего, натолкнулся на проблемный код. 
+
+Он был в методе [offset](http://api.jquery.com/offset/), который предназначен для того, чтобы определять координаты элемента. Этот метод не срабатывал, поскольку в нём есть проверка, которая выглядит примерно так:
+
+```js
+var box = { top: 0, left: 0 };
+...
+// Make sure it's not a disconnected DOM node
+if ( !jQuery.contains( elem.ownerDocument, elem ) ) {
+  return box;
+}
+```
+
+То есть, jQuery проверяет, находится ли элемент внутри своего документа. Если нет -- оно считает, что элемент не в DOM, и его размеры равны нулю.
+
+**Но в случае с Shadow DOM элемент как раз *не* лежит в `document`. Вызов `document.contains(elem)` вернёт `false`!**
+
+Получилось, что элемент не в документе и одновременно он имеет размеры. Такого разработчики jQuery не предусмотрели.
+
+Можно, конечно, побежать исправлять jQuery, но давайте подумаем.
+
+С точки зрения здравого смысла, Shadow DOM является частью текущего документа. Это соответствует и духу [текущей спецификации](http://w3c.github.io/webcomponents/spec/shadow/), где shadow tree рассматривается в контексте document tree.
+
+Поэтому на самом деле `document.contains(elem)` следовало бы возвращать `true`.
+
+Почему же `false`? Причина проста -- описанный в [другом стандарте](http://www.w3.org/TR/dom/#dom-node-contains) механизм работы `contains` по сути состоит в проходе вверх от `elem` по цепочке `parentNode`, пока либо встретим искомый элемент, тогда ответ `true`, а иначе `false`. В случае с Shadow DOM этот путь закончится на корне Shadow DOM-дерева, оно ведь не является потомком хозяина. Метод `contains` не знает ничего про саму возможность Shadow DOM, поэтому и выходит, что результат `false`.
+
+Так что срочно слать патчи в jQuery здесь рановато, скорее необходимо ещё подумать над стандартами.
+
+## Итого
+
+<ul>
+<li>С использованием современных технологий можно делать компоненты. Но это, всё же, дело будущего. Все стандарты находятся в процессе доработки, готовятся новые.</li>
+<li>На текущий момент нельзя взять произвольную библиотеку, даже такую распространённую как jQuery, и работать с Shadow DOM с её использованием. Выше была продемонстрирована одна проблема, но возможны и другие.</li>
+</ul>
+
+Самый известный из полифиллов на тему веб-компонент -- это [Polymer](http://www.polymer-project.org). Он старается их эмулировать по возможности кросс-браузерно, но пока что это довольно-таки сложно, в частности, необходима дополнительная разметка.
+
+Текущее состояние веб-стандартов -- "взгляд в будущее". Наверно, будет здорово, когда оно наступит :)
+
+
+
+
diff --git a/3-more/1-webcomponents/5-webcomponent-build/message.view/index.html b/3-more/1-webcomponents/5-webcomponent-build/message.view/index.html
new file mode 100755
index 00000000..36fc134f
--- /dev/null
+++ b/3-more/1-webcomponents/5-webcomponent-build/message.view/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="import" id="link" href="ui-message.html">
+  <style>
+  ui-message {
+    width: 80%;
+    margin: auto;
+  }
+  </style>
+</head>
+<body>
+
+  <ui-message class="info">Доброе утро, страна!</ui-message>
+
+  <ui-message class="warning">Внимание-внимание! Говорит информбюро!</ui-message>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/3-more/1-webcomponents/5-webcomponent-build/message.view/ui-message.html b/3-more/1-webcomponents/5-webcomponent-build/message.view/ui-message.html
new file mode 100755
index 00000000..81c93825
--- /dev/null
+++ b/3-more/1-webcomponents/5-webcomponent-build/message.view/ui-message.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+<template id="tmpl">
+  <style>
+  .content {
+    min-height: 20px;
+    padding: 19px;
+    margin-bottom: 20px;
+    background-color: #f5f5f5;
+    border: 1px solid #e3e3e3;
+    border-radius: 4px;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
+  }
+
+  :host {
+    display: block;
+  }
+
+  :host(.info) .content {
+    color: green;
+  }
+  
+  :host(.warning) .content {
+    color: red;
+  }
+  </style>
+  <div class="content"><content></content></div>
+</template>
+
+<script>
+  !function() {
+    var localDocument = document.currentScript.ownerDocument;
+    var tmpl = localDocument.getElementById('tmpl');
+
+    var MessageProto = Object.create(HTMLElement.prototype);
+
+    MessageProto.createdCallback = function() {
+      var root = this.createShadowRoot();
+      root.appendChild(tmpl.content.cloneNode(true));
+    };
+
+    document.registerElement('ui-message', {
+      prototype: MessageProto
+    });
+  }();
+</script>
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/3-more/1-webcomponents/5-webcomponent-build/ui-slider.view/index.html b/3-more/1-webcomponents/5-webcomponent-build/ui-slider.view/index.html
new file mode 100755
index 00000000..a2299b15
--- /dev/null
+++ b/3-more/1-webcomponents/5-webcomponent-build/ui-slider.view/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="import" id="link" href="ui-slider.html">
+    <style>
+      ui-slider {
+        width: 300px;
+        margin: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    
+    <ui-slider min="0" max="1000" id="elem"></ui-slider>
+    
+    <script>
+      elem.addEventListener("slide", function(e) {
+        value.innerHTML = e.detail.value; // = this.value
+      });
+    </script>
+    
+    <div id="value">0</div>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/3-more/1-webcomponents/5-webcomponent-build/ui-slider.view/jquery.html b/3-more/1-webcomponents/5-webcomponent-build/ui-slider.view/jquery.html
new file mode 100755
index 00000000..94cbf7a8
--- /dev/null
+++ b/3-more/1-webcomponents/5-webcomponent-build/ui-slider.view/jquery.html
@@ -0,0 +1,2 @@
+<script src="http://code.jquery.com/jquery-latest.js"></script>
+<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
diff --git a/3-more/1-webcomponents/5-webcomponent-build/ui-slider.view/ui-slider.html b/3-more/1-webcomponents/5-webcomponent-build/ui-slider.view/ui-slider.html
new file mode 100755
index 00000000..eb907776
--- /dev/null
+++ b/3-more/1-webcomponents/5-webcomponent-build/ui-slider.view/ui-slider.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="import" href="jquery.html">
+</head>
+<body>
+
+<template id="tmpl">
+  <style>
+    @import url(http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css);
+
+    :host { 
+      display: block;
+    }
+  </style>
+  <div id="slider"></div>
+</template>
+
+<script>
+!function() {
+var localDocument = document.currentScript.ownerDocument;
+var tmpl = localDocument.getElementById('tmpl');
+
+var SliderProto = Object.create(HTMLElement.prototype);
+
+SliderProto.createdCallback = function() {
+  var root = this.createShadowRoot();
+  root.appendChild(tmpl.content.cloneNode(true));
+
+  this.$slider = $(root.getElementById('slider'));
+  
+  var self = this;
+
+  this.$slider.slider({
+    min: this.getAttribute('min') || 0,
+    max: this.getAttribute('max') || 100,
+    value: this.getAttribute('value') || 0,
+    slide: function() {
+      var event = new CustomEvent("slide", {
+        detail: { value: self.$slider.slider("option", "value") },
+        bubbles: true
+      });
+      self.dispatchEvent(event);
+    }
+  });
+};
+
+
+document.registerElement('ui-slider', {
+  prototype: SliderProto
+});
+}();
+</script>
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/3-more/1-webcomponents/index.md b/3-more/1-webcomponents/index.md
new file mode 100644
index 00000000..beb63279
--- /dev/null
+++ b/3-more/1-webcomponents/index.md
@@ -0,0 +1,2 @@
+# Веб-компоненты: взгляд в будущее
+
diff --git a/3-more/10-ajax/1-ajax-intro/article.md b/3-more/10-ajax/1-ajax-intro/article.md
new file mode 100644
index 00000000..f151012a
--- /dev/null
+++ b/3-more/10-ajax/1-ajax-intro/article.md
@@ -0,0 +1,131 @@
+# Введение в AJAX и COMET
+
+В этой статье AJAX описывается на уровне возможностей и примеров. Рассмотрены особенности асинхронного взаимодействия и примеры использования, но с минимумом технических деталей.
+
+Надеюсь, она будет полезна для понимания, что такое AJAX и с чем его едят.
+[cut]
+
+
+## Что такое AJAX? 
+
+AJAX ("<u>A</u>synchronous <u>J</u>avascript <u>A</u>nd <u>X</u>ml") -- технология обращения к серверу без перезагрузки страницы.
+
+За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.
+
+Например, при нажатии кнопки голосовать -- из браузера на сервер будет отправлено сообщение, а сервер ответит браузеру, что голос принят.
+
+<button onclick="vote(this)">Голосовать</button>
+
+Обратите внимание, текст кнопки после голосования предоставляется сервером и обновляется лишь после его ответа!
+
+Несмотря на то, что в названии технологии присутствует буква `X` (от слова XML), использовать XML вовсе не обязательно. Под AJAX подразумевают любое общение с сервером без перезагрузки страницы, организованное при помощи JavaScript.
+
+## Что я могу сделать с помощью AJAX?
+
+<dl>
+<dt>Элементы интерфейса</dt>
+<dd>
+В первую очередь AJAX полезен для небольших элементов, связанных с элементарными действиями: добавить в корзину, подписаться, и т.п.
+
+<table border="0">
+<tr>
+<td><img src="/files/tutorial/ajax/intro/can_do_1.png" onclick="alert('Почтамт поможет!')"></td>
+<td><img src="/files/tutorial/ajax/intro/can_do_2.png" onclick="alert('Да это просто пример :)')"></td>
+<td><img src="/files/tutorial/ajax/intro/can_do_3.png" onclick="alert('Закажи мне.. Закажи :)');"></td>
+</tr>
+</table>
+
+Сейчас -- в порядке вещей, что голосование на сайтах осуществляется без перезагрузки страницы.
+</dd>
+<dt>Динамическая подгрузка данных</dt>
+<dd>Например, дерево, которое при открытии узла запрашивает данные у сервера:
+
+[iframe src="tree.html" height=200 border=1]
+</dd>
+<dt>Живой поиск</dt>
+<dd>
+*Живой поиск* -- классический пример использования AJAX, взятый на вооружение современными поисковыми системами.
+
+Пользователь начинает печатать поисковую фразу, а JavaScript предлагает возможные варианты, получая список самых вероятных дополнений с сервера.
+
+<img src="suggest.png" onclick="alert('этот пример - картинка, см. http://google.com');">
+
+Код, который это обеспечивает, работает следующим образом.
+<ol>
+	<li>Активируется примерно при каждом нажатии клавиши
+<ul>
+	<li>Время посылки последнего запроса отслеживается</li>
+	<li>Для "обычной" скорости печати - запрос отсылается при каждом нажатии</li>
+	<li>Для "программистской" скорости - каждые несколько нажатий</li>
+</ul>
+</li>
+	<li>Создается скрытый DIV, который показывается при начале печати</li>
+	<li>DIV заполняется ответом сервера
+<ul>
+	<li>Текущий результат подсвечен, можно перемещаться и выбирать</li>
+	<li>При нажатии правой стрелки или при клике -- поиск в подрезультатах</li>
+</ul>
+</li>
+	<li>Результаты кешируются
+<ul>
+	<li>При нажатии на Backspace, обращения к серверу не происходит</li>
+</ul>
+</li>
+<li>В Google не только предлагаются варианты, но система тут же инициирует и сам поиск, т.е. не нужно даже жать Enter.</li>
+</ol>
+</dd>
+</dl>
+
+**Технически, с помощью AJAX можно обмениваться любыми данными с сервером.**
+
+Обычно используются форматы:
+<ul>
+<li>JSON -- для отправки и получения структурированных данных, объектов.</li>
+<li>XML -- если сервер почему-то работает в формате XML, то можно использовать и его, есть средства.</li>
+<li>HTML/текст -- можно и просто загрузить с сервера код HTML или текст для показа на странице.</li>
+<li>Бинарные данные, файлы -- гораздо реже, в современных браузерах есть удобные средства для них.</li>
+</ul>
+
+## Что такое COMET?
+
+[COMET](http://ru.wikipedia.org/wiki/Comet_(%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%D0%B5) -- общий термин, описывающий различные техники получения данных по инициативе сервера.
+
+Можно сказать, что AJAX -- это "нажал на кнопку -- получил результат", а COMET -- это "просто сижу и наблюдаю за результатами".
+
+Примеры COMET-приложений:
+
+<ul>
+<li>Чат -- человек сидит и смотрит, что пишут другие. При этом новые сообщения приходят "сами по себе", он не должен нажимать на кнопку для обновления окна чата.</li>
+<li>Аукцион -- человек смотрит на экран и видит, как обновляется текущая ставка за товар.</li>
+<li>Интерфейс редактирования -- когда один редактор начинает изменять документ, другие видят информацию об этом. Возможно и совместное редактирование, когда редакторы видят изменения друг друга.</li>
+</ul>
+
+На текущий момент технология COMET удобно реализуется во всех браузерах.
+
+## Об этом разделе
+
+Здесь мы будем говорить об AJAX и COMET на низком уровне, на уровне веб-стандартов и их использования.
+
+Существуют библиотеки и фреймворки, добавляющие удобства, например [Socket.io](http://socket.io), [CometD](http://cometd.org/) и другие.
+
+В принципе, можно начать их использовать и не зная, что внутри. Но, скорее всего, вам всё равно понадобится отлаживать ошибки, смотреть детали коммуникации, выбирать наилучшее решение для конкретной задачи, и здесь обязательно разбираться, как это всё работает.
+
+
+[head]
+<script>
+function vote(outputElem) {
+  var xhr = new XMLHttpRequest();
+
+  xhr.open('GET', '/files/tutorial/ajax/intro/vote.php', true);
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState != 4) return;
+
+    outputElem.innerHTML = xhr.responseText;
+  }
+
+  outputElem.innerHTML = '...';
+  xhr.send(null);
+}
+</script>
+[/head]
\ No newline at end of file
diff --git a/3-more/10-ajax/1-ajax-intro/suggest.png b/3-more/10-ajax/1-ajax-intro/suggest.png
new file mode 100755
index 00000000..85ff3247
Binary files /dev/null and b/3-more/10-ajax/1-ajax-intro/suggest.png differ
diff --git a/3-more/10-ajax/1-ajax-intro/tree.html b/3-more/10-ajax/1-ajax-intro/tree.html
new file mode 100755
index 00000000..b709aa4a
--- /dev/null
+++ b/3-more/10-ajax/1-ajax-intro/tree.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="stylesheet" type="text/css" href="tree.css">
+	<script src="http://code.jquery.com/jquery.min.js"></script>
+	<script src="tree.js"></script>
+</head>
+<body>
+
+Дерево с подгрузкой узлов (рабочее):
+<ul class="Container" id="tree">
+  <li class="Node IsRoot IsLast ExpandClosed">
+    <div class="Expand"></div>
+    <div class="Content">Каталог</div>
+    <ul class="Container">
+    </ul>
+  </li>
+</ul>
+
+<script>
+	tree("tree", "data.php");
+</script>
+
+
+</body>
+</html>
diff --git a/3-more/10-ajax/10-ajax-jsonp/article.md b/3-more/10-ajax/10-ajax-jsonp/article.md
new file mode 100644
index 00000000..fde6abb0
--- /dev/null
+++ b/3-more/10-ajax/10-ajax-jsonp/article.md
@@ -0,0 +1,166 @@
+# JSONP, получение данных через SCRIPT
+
+Если создать узел `SCRIPT` со ссылкой на внешний исходник, то при добавлении в документ запустится процесс загрузки. В ответ сервер может прислать скрипт, содержащий нужные данные.
+
+Основным преимуществом такого способа коммуникации является кросс-браузерность и возможность обратиться к любому домену. 
+
+[cut]
+
+## Запрос SCRIPT
+
+Простейший пример запроса:
+
+```js
+function attachScript(src) {
+  var elem = document.createElement("script");
+  elem.src = src;
+  document.getElementsByTagName('head')[0].appendChild(elem);
+}
+
+attachScript('/user.php?id=123');
+```
+
+Такой вызов добавит в `HEAD` документа тег:
+
+```js
+<script src="/user.php?id=123"></script>
+```
+
+Браузер тут же обработает его: запросит `/user.php?id=123` с заданного URL и выполнит. 
+
+## Обработка ответа, JSONP
+
+В примере выше рассмотрено создание запроса, но как получить ответ? Самый простой способ -- это присвоить его в переменную, т.е. сервер ответит как-то так:
+
+```js
+var response = "....";
+```
+
+...А браузер по `script.onload` отловит окончание загрузки и получит значение `response`.
+
+Но что, если одновременно делается несколько запросов? Получается, нужно присваивать в разные переменные.
+
+Для большей гибкости при ответе используется протокол `JSONP`.
+
+**При этом название функции браузер может передать вместе с запросом.**
+
+Запрос:
+
+```js
+attachScript('/user.php?id=123&*!*callback=onUserData*/!*');
+```
+
+Cервер кодирует данные как JavaScript-объект и оборачивает их в функцию, название которой получает из параметра `callback`:
+
+```js
+onUserData({
+  name: "Вася",
+  age: 25,
+  isAdmin: false
+});
+```
+
+**Формат запроса, когда JSON заворачивается в функцию, называется JSONP ("JSON with Padding").**
+
+[warn header="Аспекты безопасности"]
+<ol>
+<li>При кросс-доменном получении скрипта JavaScript не имеет доступа к его тексту.</li>
+<li>Клиентский код должен доверять серверу при таком запросе. Ведь серверу ничего не стоит добавить в скрипт любые команды.</li>
+</ol>
+[/warn]
+
+## Реестр CallbackRegistry
+
+В примере выше функция `onUserData` должна быть глобальной, иначе скрипт её не увидит. 
+
+Хотелось бы не загрязнять глобальное пространство имён и вызывать транспорт с локальной или даже анонимной функцией, как-то так:
+
+```js
+scriptRequest("/user.php?id=123", function(data) {
+  /* обработать данные */
+});
+```
+
+**Чтобы решить эти задачи, для каждого запроса генерируется временная функция и записывается в глобальный объект ("реестр").**
+
+Тег будет выглядеть так:
+
+```html
+<script src="/user.php?id=123&callback=*!*CallbackRegistry.func12345*/!*"></script>
+```
+
+Сервер обернёт ответ в функцию `CallbackRegistry.func12345`, она вызывает нужный обработчик и очищает память, удаляя себя.
+
+Далее мы посмотрим код всего этого, но перед этим -- важный момент! Нужно предусмотреть обработку ошибок.
+
+## Обнаружение ошибок 
+
+При запросе данных при помощи `SCRIPT` возможны различные ошибки:
+
+<ol>
+<li>Скрипт может не загрузиться: отказ в соединении, разрыв связи...</li>
+<li>Ошибка HTTP, например 500.</li>
+<li>Скрипт загрузился, но внутри некорректен и не вызывает функцию. Например, на сервере произошла ошибка и в ответе передан её текст, а вовсе не данные.</li>
+</ol>
+
+Чтобы отловить их все "одним махом", используем следующий алгоритм:
+
+<ol>
+<li>Создаётся `SCRIPT`.</li>
+<li>На `SCRIPT` ставятся обработчики `onreadystatechange` (для старых IE) и `onload/onerror` (для остальных браузеров).</li>
+<li>При загрузке скрипт выполняет функцию-коллбэк `CallbackRegistry...`. Пусть она при запуске ставит флажок "все ок". А мы в обработчиках проверим -- если флага нет, то функция не вызывалась -- стало быть, ошибка при загрузке или содержимое скрипта некорректно.</li>
+</ol>
+
+## Полный код
+
+Итак, код. Он совсем небольшой, а без комментариев был бы ещё меньше:
+
+```js
+//+ src="scriptRequest.js"
+```
+
+Серверный скрипт отсылает ответ примерно так:
+
+```js
+var url = require('url');
+var params = url.parse(req.url, true).query;
+
+var data = { 
+  name: "Вася",  
+  age: 30 // данные из базы 
+}
+
+res.end(params.callback + '(' + JSON.stringify(data) + ')' );
+```
+
+### Демо
+
+Пример "в действии" с тремя запросами -- правильным и двумя ошибочными:
+
+```js
+//+ run
+function ok(data) {
+  alert("Загружен пользователь " + data.name);
+}
+
+function fail(url) {
+  alert('Ошибка при запросе ' + url);
+}
+
+// Внимание! Ответы могут приходить в любой последовательности!
+scriptRequest("/files/tutorial/ajax/jsonp/user?id=123", ok, fail); // Загружен
+scriptRequest("/badurl.js", ok, fail); // fail, 404
+scriptRequest("/", ok, fail); // fail, 200 но некорректный скрипт
+```
+
+Функция `scriptRequest` в том или ином виде, иногда урезанном, реализована в различных фреймворках. В неё можно добавить более точное сообщение об ошибке, отправку данных и т.п.
+
+## COMET
+
+
+COMET через `SCRIPT` реализуется при помощи длинных опросов, также как мы обсуждали в главе [](/xhr-longpoll).
+
+То есть, создаётся тег `<script>`, браузер запрашивает скрипт у сервера и... Сервер оставляет соединение висеть, пока не появится, что сказать. Когда сервер хочет отправить сообщение -- он отвечает, используя формат JSONP. И, тут же, новый запрос...
+[head]
+<script src="/files/tutorial/ajax/jsonp/scriptRequest.js"></script>
+[/head]
\ No newline at end of file
diff --git a/3-more/10-ajax/10-ajax-jsonp/scriptRequest.js b/3-more/10-ajax/10-ajax-jsonp/scriptRequest.js
new file mode 100755
index 00000000..601bc41d
--- /dev/null
+++ b/3-more/10-ajax/10-ajax-jsonp/scriptRequest.js
@@ -0,0 +1,49 @@
+var CallbackRegistry = {}; // реестр
+
+// при успехе вызовет onSuccess, при ошибке onError
+function scriptRequest(url, onSuccess, onError) {
+
+  var scriptOk = false; // флаг, что вызов прошел успешно
+
+  // сгенерировать имя JSONP-функции для запроса
+  var callbackName = 'f'+String(Math.random()).slice(2);
+
+  // укажем это имя в URL запроса 
+  url += ~url.indexOf('?') ? '&' : '?';
+  url += 'callback=CallbackRegistry.'+callbackName;
+
+  // ..и создадим саму функцию в реестре
+  CallbackRegistry[callbackName] = function(data) {       
+    scriptOk = true; // обработчик вызвался, указать что всё ок  
+    delete CallbackRegistry[callbackName]; // можно очистить реестр
+    onSuccess(data); // и вызвать onSuccess
+  };
+
+  // эта функция сработает при любом результате запроса
+  // важно: при успешном результате - всегда после JSONP-обработчика 
+  function checkCallback() {      
+    if (scriptOk) return; // сработал обработчик?
+    delete CallbackRegistry[callbackName]; 
+    onError(url);  // нет - вызвать onError
+  }
+
+  var script = document.createElement('script');  
+
+  // в старых IE поддерживается только событие, а не onload/onerror
+  // в теории 'readyState=loaded' означает "скрипт загрузился", 
+  // а 'readyState=complete' -- "скрипт выполнился", но иногда
+  // почему-то случается только одно из них, поэтому проверяем оба
+  script.onreadystatechange = function() {    
+    if (this.readyState == 'complete' || this.readyState == 'loaded'){   
+      this.onreadystatechange = null;   
+      setTimeout(checkCallback, 0); // Вызвать checkCallback - после скрипта
+    }
+  }
+
+  // события script.onload/onerror срабатывают всегда после выполнения скрипта
+  script.onload = script.onerror = checkCallback;
+  script.src = url;
+
+  document.body.appendChild(script);
+}
+
diff --git a/3-more/10-ajax/11-server-sent-events/article.md b/3-more/10-ajax/11-server-sent-events/article.md
new file mode 100644
index 00000000..0c3a050d
--- /dev/null
+++ b/3-more/10-ajax/11-server-sent-events/article.md
@@ -0,0 +1,287 @@
+# EventSource - события с сервера
+
+Современный стандарт [Server-Sent Events](http://dev.w3.org/html5/eventsource/) позволяет браузеру создавать специальный объект `EventSource`, который сам обеспечивает соединение с сервером, делает пересоединение в случае обрыва и генерирует события при поступлении данных.
+[cut]
+
+## Получение сообщений
+
+При создании объекта `new EventSource(src)` браузер автоматически подключается к адресу `src` и начинает получать с него события:
+
+```js
+var eventSource = new EventSource("/events/subscribe");
+
+eventSource.onmessage = function(e) {
+  console.log("Пришло сообщение: " + e.data);
+}
+```
+
+Чтобы соединение успешно открылось, сервер должен ответить с заголовком `Content-Type: text/event-stream`, а затем оставить соединение висящим и писать в него сообщения в специальном формате:
+
+```
+data: Сообщение 1
+
+data: Сообщение 2
+
+data: Сообщение 3
+data: из двух строк
+```
+
+<ul>
+<li>Каждое сообщение пишется после `data:`. Если после двоеточия есть пробел, то он игнорируется.</li>
+<li>Сообщения разделяются двумя строками `\n\n`.</li>
+<li>Если нужно переслать перевод строки, то сообщение разделяется. Каждая следующая строка пересылается отдельным `data:`.
+
+В частности, две последние строки в примере выше составляют одно сообщение: `"Сообщение 3\nиз двух строк"`.
+</li>
+</ul>
+
+Здесь все очень просто и удобно, кроме разделения сообщения при переводе строки. Но, если подумать -- это не так уж страшно: на практике сложные сообщения обычно передаются в формате JSON. А перевод строки в нём кодируется как `\n`. Соответственно, что данные будут пересылаться так:
+
+```
+data: {"user":"Вася","message":"Сообщение 3\n из двух строк"}
+```
+
+..То есть, строка `data:` будет одна.
+
+## Восстановление соединения
+
+При создании объекта браузер автоматически подключается к серверу, а при обрыве -- пытается его возобновить.
+
+Это очень удобно, никакой другой транспорт не обладает такой встроенной способностью.
+
+[smart header="А что, если сервер "чисто" закрыл соединение?"]
+При любом закрытии соединения, в том числе если сервер ответит на запрос и закроет соединение сам -- браузер через короткое время повторит свой запрос.
+
+Есть лишь два способа, которыми сервер может "отшить" надоедливый `EventSource`:
+<ul>
+<li>Ответить со статусом не 200.</li>
+<li>Ответить с `Content-Type`, не совпадающим с `text/event-stream`.</li>
+</ul>
+[/smart]
+
+Между попытками возобновить соединение будет пауза, начальное значение которой зависит от браузера (1-3 секунды) и может быть изменено сервером через указание `retry:` в ответе:
+
+```js
+retry: 15000
+data: Поставлена задержка 15 секунд
+```
+
+Браузер, со своей стороны, может закрыть соединение вызовом `close()`:
+
+```js
+var eventSource = new EventSource(...);
+
+eventSource.close();
+```
+
+При этом дальнейших попыток соединения не будет. Открыть обратно этот объект тоже нельзя, можно создать новый `EventSource`.
+
+### Идентификатор id
+
+Для того, чтобы продолжить получение событий с места разрыва, стандарт предусматривает идентификацию событий через `id`.
+
+Сервер может указать его в ответе:
+
+```
+data: Сообщение 1
+id: 1
+
+data: Сообщение 2
+id: 2
+
+data: Сообщение 3
+data: из двух строк
+id: 3
+```
+
+При получении `id:` браузер:
+<ul>
+<li>Устанавливает свойство `eventSource.lastEventId` в его значение.</li>
+<li>При пересоединении пошлёт заголовок `Last-Event-ID` с этим `id`, так что сервер сможет переслать последующие, пропущенные, сообщения.</li>
+</ul>
+
+Обратим внимание: `id` шлётся *не перед сообщением, а после него*, чтобы обновление `lastEventId` произошло, когда браузер всё уже точно получил.
+
+## Статус соединения readyState
+
+У объекта `EventSource` есть свойство `readyState`, которое содержит одно из значений (выдержка из стандарта):
+
+```js
+const unsigned short CONNECTING = 0; // в процессе (пере-)соединения 
+const unsigned short OPEN = 1;       // соединение установлено
+const unsigned short CLOSED = 2;     // соединение закрыто
+```
+
+При создании объекта и при разрыве оно автоматически равно `CONNECTING`.
+
+## События 
+
+Событий всего три:
+<ul>
+<li>`onmessage` -- пришло сообщение, доступно как `event.data`</li>
+<li>`onopen` -- при успешном установлении соединения</li>
+<li>`onerror` -- при ошибке соединения.</li>
+</ul>
+
+Например:
+
+```js
+var eventSource = new EventSource('digits');
+
+eventSource.onopen = function(e) {
+  console.log("Соединение открыто");
+};
+
+eventSource.onerror = function(e) {
+  if (this.readyState == EventSource.CONNECTING) {      
+    console.log("Соединение порвалось, пересоединяемся...");
+  } else {
+    console.log("Ошибка, состояние: " + this.readyState);
+  }
+};
+
+eventSource.onmessage = function(e) {
+  console.log("Пришли данные: " + e.data);
+};
+```
+
+### Своё имя события: event
+
+По умолчанию на события срабатывает обработчик `onmessage`, но можно сделать и свои события. Для этого сервер должен указать перед событием его имя после `event:`.
+
+Например:
+
+```
+event: join
+data: Вася
+
+data: Привет
+
+event: leave
+data: Вася
+```
+
+Сообщение по умолчанию имеет имя `message`.
+
+**Для обработки своих имён событий необходимо ставить обработчик при помощи `addEventListener`.**
+
+Пример кода для обработки:
+
+```js
+eventSource.addEventListener('join', function(e) {
+  alert('Пришёл ' + e.data);
+}
+
+eventSource.addEventListener('message', function(e) {
+  alert('Сообщение ' + e.data);
+}
+
+eventSource.addEventListener('leave', function(e) {
+  alert('Ушёл ' + e.data);
+}
+```
+
+На момент написания этой статьи (конец 2012) браузер Chrome не поддерживал свои события.
+
+## Демо
+
+В примере ниже сервер посылает в соединение числа от 1 до 5, а затем -- событие `bye` и закрывает соединение. Браузер автоматически откроет его заново.
+
+```js
+//+ src="browser.js"
+```
+
+
+
+```js
+//+ src="index.js" hide="Открыть код для сервера"
+```
+
+[iframe src="eventsource" border="1" zip link height=200]
+
+## Кросс-доменность
+
+`EventSource` поддерживает кросс-доменные запросы, аналогично `XMLHttpRequest`. Для этого у конструктора есть второй аргумент -- объект, который нужно передать так:
+
+```js
+var source = new EventSource("http://pupkin.ru/stream", { withCredentials: true });
+```
+
+Второй аргумент сделан объектом с расчётом на будущее. Пока что никаких других свойств там не поддерживается, только `withCredentials`.
+
+При обработки события у `event` также появится свойство `origin`, содержащее адрес источника, откуда пришёл ответ.
+
+## Итого
+
+Объект `EventSource` создаётся так:
+
+```js
+var source = new EventSource(src); // src - адрес с любого домена
+```
+
+Второй необязательный аргумент, если указан в виде `{ withCredentials: true }`, инициирует отправку Cookie и данных авторизации при кросс-доменных запросах. 
+
+Безопасность при кросс-доменных запросах обеспечивается аналогично `XMLHttpRequest`.
+
+**Свойства объекта:**
+<dl>
+<dt>`readyState`</dt>
+<dd>Текущее состояние соединения, одно из `EventSource.CLOSING (=0)`, `EventSource.OPEN (=1)` или `EventSource.CLOSED (=2)`.</dd>
+<dt>`lastEventId`</dt>
+<dd>Последнее полученное `id`, если есть. При возобновлении соединения браузер указывает это значение в заголовке `Last-Event-ID`.</dd>
+<dt>`url`, `withCredentials`</dt>
+<dd>Параметры, переданные при создании объекта. Менять их нельзя.</dd>
+<dt>
+</dl>
+
+**Методы:**
+
+<dl>
+<dt>`close()`</dt>
+<dd>Закрывает соединение.</dd>
+</dl>
+
+**События:**
+
+<dl>
+<dt>`onmessage`</dt>
+<dd>При сообщении, данные -- в `event.data`.</dd>
+<dt>`onopen`</dt>
+<dd>При установлении соединения.</dd>
+<dt>`onerror`</dt>
+<dd>При ошибке, в том числе -- закрытии соединения по инициативе сервера.</dd>
+</dl>
+
+Эти события можно ставить напрямую через свойство: `source.onmessage = ...`.
+
+Если сервер присылает имя события в `event:`, то такие события нужно обрабатывать через `addEventListener`.
+
+**Формат ответа сервера:**
+
+Сервер присылает пустые строки, либо строки, начинающиеся с:
+<ul>
+<li>`date:` -- сообщение.</li>
+<li>`id:` -- обновляет `lastEventId`.</li>
+<li>`retry:` -- указывает паузу между пересоединениями, в миллисекундах. JavaScript не может указать это значение, только сервер.</li>
+<li>`event:` -- имя события, должен быть перед `date:`.</li>
+</ul>
+
+Сообщения разделяются двойным переводом строки.
+
+Основным преимуществом `EventSource` является поддержка пересоединения и событий "из коробки". 
+
+Поддержка -- все браузеры, кроме IE.
+
+
+
+
+
+
+
+
+
+
+
+[head]
+<script src="/files/tutorial/ajax/script/scriptRequest.js"></script>
+[/head]
\ No newline at end of file
diff --git a/3-more/10-ajax/11-server-sent-events/browser.js b/3-more/10-ajax/11-server-sent-events/browser.js
new file mode 100755
index 00000000..b64a2d39
--- /dev/null
+++ b/3-more/10-ajax/11-server-sent-events/browser.js
@@ -0,0 +1,36 @@
+
+if (!window.EventSource) {
+  document.write('<b>В этом браузере нет поддержки EventSource.</b>');
+} 
+
+var eventSource;
+
+function start() { // при нажатии на Старт
+  eventSource = new EventSource('digits');
+
+  var log = document.getElementById('log');
+
+  eventSource.onopen = function(e) {
+    log.innerHTML += "Соединение открыто<br>";
+  };
+
+  eventSource.onerror = function(e) {
+    if (this.readyState == EventSource.CONNECTING) {      
+      log.innerHTML += "Соединение порвалось, пересоединяемся...<br>";
+    } else {
+      log.innerHTML += "Ошибка, состояние: " + this.readyState;
+    }
+  };
+
+  eventSource.addEventListener('bye', function(e) {
+    log.innerHTML += "Bye<br>";
+  }, false);
+
+  eventSource.onmessage = function(e) {
+    log.innerHTML += e.data + '<br>';
+  };
+}
+
+function stop() { // при нажатии на Стоп
+  eventSource.close();
+}
\ No newline at end of file
diff --git a/3-more/10-ajax/11-server-sent-events/eventsource/browser.js b/3-more/10-ajax/11-server-sent-events/eventsource/browser.js
new file mode 100755
index 00000000..b64a2d39
--- /dev/null
+++ b/3-more/10-ajax/11-server-sent-events/eventsource/browser.js
@@ -0,0 +1,36 @@
+
+if (!window.EventSource) {
+  document.write('<b>В этом браузере нет поддержки EventSource.</b>');
+} 
+
+var eventSource;
+
+function start() { // при нажатии на Старт
+  eventSource = new EventSource('digits');
+
+  var log = document.getElementById('log');
+
+  eventSource.onopen = function(e) {
+    log.innerHTML += "Соединение открыто<br>";
+  };
+
+  eventSource.onerror = function(e) {
+    if (this.readyState == EventSource.CONNECTING) {      
+      log.innerHTML += "Соединение порвалось, пересоединяемся...<br>";
+    } else {
+      log.innerHTML += "Ошибка, состояние: " + this.readyState;
+    }
+  };
+
+  eventSource.addEventListener('bye', function(e) {
+    log.innerHTML += "Bye<br>";
+  }, false);
+
+  eventSource.onmessage = function(e) {
+    log.innerHTML += e.data + '<br>';
+  };
+}
+
+function stop() { // при нажатии на Стоп
+  eventSource.close();
+}
\ No newline at end of file
diff --git a/3-more/10-ajax/11-server-sent-events/eventsource/index.html b/3-more/10-ajax/11-server-sent-events/eventsource/index.html
new file mode 100755
index 00000000..bf8d4634
--- /dev/null
+++ b/3-more/10-ajax/11-server-sent-events/eventsource/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<script src="browser.js"></script>
+</head>
+<body>
+
+<button onclick="start()">Старт</button>
+<button onclick="stop()">Стоп</button>
+
+Нажмите "Старт" для начала.
+<div id="log"></div>
+
+
+</body>
+</html>
diff --git a/3-more/10-ajax/11-server-sent-events/eventsource/index.js b/3-more/10-ajax/11-server-sent-events/eventsource/index.js
new file mode 100755
index 00000000..760cca7b
--- /dev/null
+++ b/3-more/10-ajax/11-server-sent-events/eventsource/index.js
@@ -0,0 +1,50 @@
+var http = require('http');
+var url = require('url');
+var querystring = require('querystring');
+
+var fileServer = new (require('node-static')).Server('.');
+
+function onDigits(req, res) {
+  res.writeHead(200, {
+    'Content-Type': 'text/event-stream',
+    'Cache-Control': 'no-cache'
+  });
+
+  var i=0;
+
+  var timer = setInterval(write, 1000);
+  write();
+
+  function write() {
+    res.write('data: ' + ++i + '\n\n');
+    if (i == 5) {
+      clearInterval(timer);
+
+      res.end('event: bye\ndata: до свидания');
+    }
+    
+  }
+}
+
+function accept(req, res) {
+
+  if (req.url == '/digits') {
+    onDigits(req, res);
+    return;
+  }
+
+  // всё остальное -- статика
+  fileServer.serve(req, res);
+
+
+}
+
+
+
+// ----- запуск accept как сервера из консоли или как модуля ------
+
+if (!module.parent) {
+  http.createServer(accept).listen(8080);
+} else {
+  exports.accept = accept;
+}
diff --git a/3-more/10-ajax/11-server-sent-events/index.js b/3-more/10-ajax/11-server-sent-events/index.js
new file mode 100755
index 00000000..760cca7b
--- /dev/null
+++ b/3-more/10-ajax/11-server-sent-events/index.js
@@ -0,0 +1,50 @@
+var http = require('http');
+var url = require('url');
+var querystring = require('querystring');
+
+var fileServer = new (require('node-static')).Server('.');
+
+function onDigits(req, res) {
+  res.writeHead(200, {
+    'Content-Type': 'text/event-stream',
+    'Cache-Control': 'no-cache'
+  });
+
+  var i=0;
+
+  var timer = setInterval(write, 1000);
+  write();
+
+  function write() {
+    res.write('data: ' + ++i + '\n\n');
+    if (i == 5) {
+      clearInterval(timer);
+
+      res.end('event: bye\ndata: до свидания');
+    }
+    
+  }
+}
+
+function accept(req, res) {
+
+  if (req.url == '/digits') {
+    onDigits(req, res);
+    return;
+  }
+
+  // всё остальное -- статика
+  fileServer.serve(req, res);
+
+
+}
+
+
+
+// ----- запуск accept как сервера из консоли или как модуля ------
+
+if (!module.parent) {
+  http.createServer(accept).listen(8080);
+} else {
+  exports.accept = accept;
+}
diff --git a/3-more/10-ajax/12-ajax-iframe/article.md b/3-more/10-ajax/12-ajax-iframe/article.md
new file mode 100644
index 00000000..169156ce
--- /dev/null
+++ b/3-more/10-ajax/12-ajax-iframe/article.md
@@ -0,0 +1,225 @@
+# IFRAME для AJAX-запросов
+
+Транспорт `iframe` -- самый кросс-браузерный, это его основное преимущество. Он работает везде: от IE6 до Opera Mobile.
+
+Для общения с сервером создается невидимый `IFRAME`. В него отправляются данные, и в него же сервер пишет ответ.
+
+[cut]
+
+## Введение
+
+Сначала -- немного вспомогательных функций и особенности работы с `IFRAME`.
+
+### Двуличность IFRAME: окно+документ
+
+Что такое `IFRAME`? На этот вопрос у браузера два ответа
+<ol>
+	<li>`IFRAME` -- это HTML-тег: <code>&lt;iframe&gt;</code> со стандартным набором свойств.
+<ul>
+	<li>Тег можно создавать в JavaScript</li>
+	<li>У тега есть стили, можно менять.</li>
+	<li>К тегу можно обратиться через `document.getElementById` и другие методы.</li>
+</ul>
+</li>
+	<li>`IFRAME` -- это окно браузера, вложенное в основное
+<ul>
+	<li>`IFRAME` -- такое же по функционалу окно браузера, как и основное, с адресом и т.п.</li>
+        <li>Если документ в `IFRAME` и внешнее окно находятся на разных доменах, то прямой вызов методов друг друга невозможен.</li>
+	<li>Ссылку на это окно можно получить через `window.frames['имя фрейма']`.</li>
+</ul>
+</li>
+</ol>
+
+Для достижения цели мы будем работать как с тегом, так и с окном. Они, конечно же, взаимосвязаны.
+
+**В теге `IFRAME` свойство `contentWindow` хранит ссылку на окно.**
+
+Окна также содержатся в коллекции `window.frames`.
+
+Например:
+
+```js
+// Окно из ифрейма
+var iframeWin = iframe.contentWindow;
+
+// Можно получить и через frames, если мы знаем имя ифрейма (и оно у него есть)
+var iframeWin = window.frames[iframe.name];
+iframeWin.parent == window; // parent из iframe указывает на родительское окно
+
+// Документ не будет доступен, если iframe с другого домена
+var iframeDoc = iframe.contentWindow.document;
+```
+
+Больше информации об ифреймах вы можете получить в главе [](/iframes).
+
+### IFRAME и история посещений
+
+`IFRAME` -- полноценное окно, поэтому навигация в нём попадает в историю посещений.
+
+Это означает, что при нажатии кнопки "Назад" браузер вернёт посетителя назад не в основном окне, а в ифрейме. В лучшем случае -- браузер возьмёт предыдущее состояние ифрейма из кэша и посетитель просто подумает, что кнопка не сработала. В худшем -- в ифрейм будет сделан предыдущий запрос, а это уже точно ни к чему. 
+
+**Наши запросы в ифрейм -- служебные и для истории не предназначены. К счастью, есть ряд техник, которые позволяют обойти проблему.**
+
+<ul>
+<li>Ифрейм нужно создавать динамически, через JavaScript.
+</li>
+<li>Когда ифрейм уже создан, то единственный способ поменять его `src` без попадания запроса в историю посещений:
+
+```js
+ 
+// newSrc - новый адрес
+iframeDoc.location.replace(newSrc);
+```
+
+Вы можете возразить: "но ведь `iframeDoc` не всегда доступен! `iframe` может быть с другого домена -- как быть тогда?". Ответ: вместо смены `src` этого ифрейма -- создать новый, с новым `src`.</li>
+<li>POST-запросы в `iframe` всегда попадают в историю посещений.</li>
+<li>... Но если `iframe` удалить, то лишняя история тоже исчезнет :). Сделать это можно по окончании запроса.</li>
+</ul>
+
+**Таким образом, общий принцип использования `IFRAME`: динамически создать, сделать запрос, удалить.**
+
+Бывает так, что удалить по каким-то причинам нельзя, тогда возможны проблемы с историей, описанные выше.
+
+### Функция createIframe
+
+Приведенная ниже функция `createIframe(name, src, debug)` кросс-браузерно создаёт ифрейм с данным именем и `src`.
+
+Аргументы:
+<dl>
+<dt>`name`</dt>
+<dd>Имя и `id` ифрейма</dd>
+<dt>`src`</dt>
+<dd>Исходный адрес ифрейма. Необязательный параметр.</dd>
+<dt>`debug`</dt>
+<dd>Если параметр задан, то ифрейм после создания не прячется.</dd>
+</dl>
+
+```js
+function createIframe(name, src, debug) {
+  src = src || 'javascript:false'; // пустой src
+
+  var tmpElem = document.createElement('div');
+
+  // в старых IE нельзя присвоить name после создания iframe
+  // поэтому создаём через innerHTML
+  tmpElem.innerHTML = '<iframe name="'+name+'" id="'+name+'" src="'+src+'">';
+  var iframe = tmpElem.firstChild;
+
+  if (!debug) {
+    iframe.style.display = 'none';
+  }
+
+  document.body.appendChild(iframe);
+
+  return iframe;
+}
+```
+
+Ифрейм здесь добавляется к `document.body`. Конечно, вы можете исправить этот код и добавлять его в любое другое место документа. 
+ 
+Кстати, при вставке, если не указан `src`, тут же произойдёт событие `iframe.onload`. Пока обработчиков нет, поэтому оно будет проигнорировано.
+
+### Функция postToIframe
+
+Функция `postToIframe(url, data, target)` отправляет POST-запрос в ифрейм с именем `target`, на адрес `url` с данными `data`.
+
+Аргументы:
+<dl>
+<dt>`url`</dt>
+<dd>URL, на который отправлять запрос.</dd>
+<dt>`data`</dt>
+<dd>Объект содержит пары `ключ:значение` для полей формы. Значение будет приведено к строке.</dd>
+<dt>`target`</dt>
+<dd>Имя ифрейма, в который отправлять данные.</dd>
+</dl>
+
+```js
+// Например: postToIframe('/vote.php', {mark:5}, 'frame1')
+
+function postToIframe(url, data, target){
+  var phonyForm = document.getElementById('phonyForm');
+  if(!phonyForm){
+    // временную форму создаем, если нет
+    phonyForm = document.createElement("form");
+    phonyForm.id = 'phonyForm';
+    phonyForm.style.display = "none";
+    phonyForm.method = "POST";        
+    document.body.appendChild(phonyForm);
+  }
+
+  phonyForm.action = url;
+  phonyForm.target = target;
+
+  // заполнить форму данными из объекта
+  var html = [];
+  for(var key in data){
+    var value = data[key].replace(/"/g, "&quot;");
+    // в старых IE нельзя указать name после создания input
+    // поэтому используем innerHTML вместо DOM-методов
+    html.push("<input type='hidden' name=\""+key+"\" value=\""+value+"\">");
+  }
+  phonyForm.innerHTML = html.join('');
+
+  phonyForm.submit();
+}
+```
+
+Эта функция формирует форму динамически, но, конечно, это лишь один из возможных сценариев использования. 
+
+В `IFRAME` можно отправлять и существующую форму, включающую файловые и другие поля. 
+
+## Запросы GET и POST
+
+Общий алгоритм обращения к серверу через ифрейм:
+
+<ol>
+<li>Создаём `iframe` со случайным именем `iframeName`.</li>
+<li>Создаём в основном окне объект `CallbackRegistry`, в котором в `CallbackRegistry[iframeName]` сохраняем функцию, которая будет обрабатывать результат.</li>
+<li>Отправляем GET или POST-запрос в него.</li>
+<li>Сервер отвечает как-то так:
+
+```html
+<script>
+  parent.CallbackRegistry[window.name]({данные});
+</script>
+```
+
+..То есть, вызывает из основного окна функцию обработки (`window.name` в ифрейме -- его имя).</li>
+<li>Дополнительно нужен обработчик `iframe.onload` -- он сработает и проверит, выполнилась ли функция `CallbackRegistry[window.name]`. Если нет, значит какая-то ошибка. Сервер при нормальном потоке выполнения всегда отвечает её вызовом.</li>
+</ol>
+
+Подробнее можно понять процесс, взглянув на код.
+
+Мы будем использовать в нём две функции -- одну для GET, другую -- для POST:
+<ul>
+<li>`iframeGet(url, onSuccess, onError)` -- для GET-запросов на `url`. При успешном запросе вызывается `onSuccess(result)`, при неуспешном: `onError()`.</li>
+<li>`iframePost(url, data, onSuccess, onError)` -- для POST-запросов на `url`. Значением `data` должен быть объект `ключ:значение` для пересылаемых данных, он конвертируется в поля формы.</li>
+</ul>
+
+```js
+//+ src="samedomain.js"
+```
+
+Код с серверной стороны (важна лишь выделенная часть):
+
+```js
+res.write(200, {'Cache-Control': 'no-cache'});
+
+var data = JSON.stringify(data из POST или дата сервера);
+
+*!*
+res.end('<script>parent.CallbackRegistry[window.name]('+data+')</script>');
+*/!*
+```
+
+Пример в действии, возвращающий дату сервера при GET и клиента при POST:
+
+[iframe src="samedomain" border="1" link]
+
+
+**Прямой вызов функции внешнего окна из ифрейма отлично работает, потому что они с одного домена.**
+
+..Но есть и способы делать запросы на другой домен при помощи ифреймов. Мы рассмотрим их в следующей главе.
+[head]
+<script src="/files/tutorial/ajax/script/scriptRequest.js"></script>
+[/head]
\ No newline at end of file
diff --git a/3-more/10-ajax/12-ajax-iframe/samedomain.js b/3-more/10-ajax/12-ajax-iframe/samedomain.js
new file mode 100755
index 00000000..d3f95db2
--- /dev/null
+++ b/3-more/10-ajax/12-ajax-iframe/samedomain.js
@@ -0,0 +1,45 @@
+var CallbackRegistry = {}; // реестр
+
+function iframeGet(url, onSuccess, onError) {
+
+  var iframeOk = false; // флаг успешного ответа сервера
+
+  var iframeName = Math.random(); // случайное имя для ифрейма
+  var iframe = createIframe(iframeName, url); 
+  
+  CallbackRegistry[iframeName] = function(data) {
+    iframeOk = true;  // сервер ответил успешно
+    onSuccess(data);
+  }
+
+  iframe.onload = function() { 
+    iframe.parentNode.removeChild(iframe); // очистка
+    delete CallbackRegistry[iframeName];   
+    if (!iframeOk) onError(); // если сервер не ответил как надо - что-то не так
+  }
+
+}
+
+// аналогично iframeGet, но в postToIframe передаются данные data
+function iframePost(url, data, onSuccess, onError) {
+
+  var iframeOk = false;
+
+  var iframeName = Math.random();
+  var iframe = createIframe(iframeName);
+  
+  CallbackRegistry[iframeName] = function(data) {
+    iframeOk = true;  
+    onSuccess(data);
+  }
+
+  iframe.onload = function() {    
+    iframe.parentNode.removeChild(iframe); // очистка
+    delete CallbackRegistry[iframeName]; 
+
+    if (!iframeOk) onError(); // если коллбэк не вызвался - что-то не так
+  }
+
+  postToIframe(url, data, iframeName);
+}
+
diff --git a/3-more/10-ajax/12-ajax-iframe/samedomain/.zip b/3-more/10-ajax/12-ajax-iframe/samedomain/.zip
new file mode 100755
index 00000000..d3f5a12f
--- /dev/null
+++ b/3-more/10-ajax/12-ajax-iframe/samedomain/.zip
@@ -0,0 +1 @@
+
diff --git a/3-more/10-ajax/12-ajax-iframe/samedomain/iframe.js b/3-more/10-ajax/12-ajax-iframe/samedomain/iframe.js
new file mode 100755
index 00000000..c8e8303b
--- /dev/null
+++ b/3-more/10-ajax/12-ajax-iframe/samedomain/iframe.js
@@ -0,0 +1,49 @@
+
+
+function createIframe(name, src, debug) {
+  src = src || 'javascript:false'; // пустой src
+
+  var tmpElem = document.createElement('div');
+
+  // в старых IE нельзя присвоить name после создания iframe, поэтому создаём через innerHTML
+  tmpElem.innerHTML = '<iframe name="'+name+'" id="'+name+'" src="'+src+'">';
+  var iframe = tmpElem.firstChild;
+
+  if (!debug) {
+    iframe.style.display = 'none';
+  }
+
+  document.body.appendChild(iframe);
+
+  return iframe;
+}
+
+// функция постит объект-хэш content в виде формы с нужным url , target
+// напр. postToIframe('/count.php', {a:5,b:6}, 'frame1')
+
+function postToIframe(url, data, target){
+  var phonyForm = document.getElementById('phonyForm');
+  if(!phonyForm){
+    // временную форму создаем, если нет
+    phonyForm = document.createElement("form");
+    phonyForm.id = 'phonyForm';
+    phonyForm.style.display = "none";
+    phonyForm.method = "POST";     
+    phonyForm.enctype = "multipart/form-data";     
+    document.body.appendChild(phonyForm);
+  }
+
+  phonyForm.action = url;
+  phonyForm.target = target;
+
+  // заполнить форму данными из объекта
+  var html = [];
+  for(var key in data){
+    var value = data[key].replace(/"/g, "&quot;");
+    html.push("<input type='hidden' name=\""+key+"\" value=\""+value+"\">");
+  }
+  phonyForm.innerHTML = html.join('');
+
+  phonyForm.submit();
+}
+
diff --git a/3-more/10-ajax/12-ajax-iframe/samedomain/index.html b/3-more/10-ajax/12-ajax-iframe/samedomain/index.html
new file mode 100755
index 00000000..e72c9c56
--- /dev/null
+++ b/3-more/10-ajax/12-ajax-iframe/samedomain/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<script src="iframe.js"></script>
+<script src="samedomain.js"></script>
+
+<script>
+function ok(result) {
+   alert('ok: ' + result);
+}
+function fail() {
+   alert('fail');
+}
+</script>
+
+<button onclick="iframeGet('samedomain.php', ok, fail)">iframeGet</button>
+
+<button onclick="iframePost('samedomain.php', {data: 'Client date: '+new Date}, ok, fail)">iframePost</button>
+
+</body>
+</html>
diff --git a/3-more/10-ajax/12-ajax-iframe/samedomain/samedomain.js b/3-more/10-ajax/12-ajax-iframe/samedomain/samedomain.js
new file mode 100755
index 00000000..d3f95db2
--- /dev/null
+++ b/3-more/10-ajax/12-ajax-iframe/samedomain/samedomain.js
@@ -0,0 +1,45 @@
+var CallbackRegistry = {}; // реестр
+
+function iframeGet(url, onSuccess, onError) {
+
+  var iframeOk = false; // флаг успешного ответа сервера
+
+  var iframeName = Math.random(); // случайное имя для ифрейма
+  var iframe = createIframe(iframeName, url); 
+  
+  CallbackRegistry[iframeName] = function(data) {
+    iframeOk = true;  // сервер ответил успешно
+    onSuccess(data);
+  }
+
+  iframe.onload = function() { 
+    iframe.parentNode.removeChild(iframe); // очистка
+    delete CallbackRegistry[iframeName];   
+    if (!iframeOk) onError(); // если сервер не ответил как надо - что-то не так
+  }
+
+}
+
+// аналогично iframeGet, но в postToIframe передаются данные data
+function iframePost(url, data, onSuccess, onError) {
+
+  var iframeOk = false;
+
+  var iframeName = Math.random();
+  var iframe = createIframe(iframeName);
+  
+  CallbackRegistry[iframeName] = function(data) {
+    iframeOk = true;  
+    onSuccess(data);
+  }
+
+  iframe.onload = function() {    
+    iframe.parentNode.removeChild(iframe); // очистка
+    delete CallbackRegistry[iframeName]; 
+
+    if (!iframeOk) onError(); // если коллбэк не вызвался - что-то не так
+  }
+
+  postToIframe(url, data, iframeName);
+}
+
diff --git a/3-more/10-ajax/12-ajax-iframe/samedomain/samedomain.php b/3-more/10-ajax/12-ajax-iframe/samedomain/samedomain.php
new file mode 100755
index 00000000..c6d6ae2c
--- /dev/null
+++ b/3-more/10-ajax/12-ajax-iframe/samedomain/samedomain.php
@@ -0,0 +1,7 @@
+<?php 
+header('Cache-Control: no-cache');
+$data = @json_encode($_POST['data'] ?: 'Server date: '.date('H:i:s'));
+?>
+<script>
+parent.CallbackRegistry[window.name](<?=$data?>);
+</script>
diff --git a/3-more/10-ajax/13-ajax-iframe-htmlfile/activex/.zip b/3-more/10-ajax/13-ajax-iframe-htmlfile/activex/.zip
new file mode 100755
index 00000000..d3f5a12f
--- /dev/null
+++ b/3-more/10-ajax/13-ajax-iframe-htmlfile/activex/.zip
@@ -0,0 +1 @@
+
diff --git a/3-more/10-ajax/13-ajax-iframe-htmlfile/activex/activex.js b/3-more/10-ajax/13-ajax-iframe-htmlfile/activex/activex.js
new file mode 100755
index 00000000..b1fc3299
--- /dev/null
+++ b/3-more/10-ajax/13-ajax-iframe-htmlfile/activex/activex.js
@@ -0,0 +1,37 @@
+var CallbackRegistry = {}; // реестр
+
+function iframeActiveXGet(url, onSuccess, onError) {
+
+  var iframeOk = false;
+
+  var iframeName = Math.random();
+  var iframe = createActiveXFrame(iframeName, url);
+  
+  CallbackRegistry[iframeName] = function(data) {
+    iframeOk = true;  
+    onSuccess(data);
+  }
+
+  iframe.onload = function() { 
+    iframe.parentNode.removeChild(iframe); // очистка
+    delete CallbackRegistry[iframeName];   
+    if (!iframeOk) onError(); // если коллбэк не вызвался - что-то не так
+  }
+
+}
+
+
+function createActiveXFrame(name, src) {
+  var htmlfile = window.htmlfile;
+  if (!htmlfile) {
+    htmlfile = window.htmlfile = new ActiveXObject("htmlfile");
+    htmlfile.open();
+    htmlfile.write("<html><body></body></html>");
+    htmlfile.close();
+    htmlfile.parentWindow.CallbackRegistry = CallbackRegistry;
+  }
+
+  src = src || 'javascript:false'; // пустой src  
+  htmlfile.body.insertAdjacentHTML('beforeEnd', "<iframe name='"+name+"' src='"+src+"'></iframe>");
+  return htmlfile.body.lastChild; // window in .document.parentWindow
+}
diff --git a/3-more/10-ajax/13-ajax-iframe-htmlfile/activex/index.html b/3-more/10-ajax/13-ajax-iframe-htmlfile/activex/index.html
new file mode 100755
index 00000000..9b96f404
--- /dev/null
+++ b/3-more/10-ajax/13-ajax-iframe-htmlfile/activex/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<script src="activex.js"></script>
+
+<script>
+function ok(result) {
+   alert('ok: ' + result);
+}
+function fail() {
+   alert('fail');
+}
+
+function go() {
+	if (!window.ActiveXObject) {
+		alert("Только Internet Explorer");
+		return;
+	}
+	iframeActiveXGet("samedomain.php", ok, fail);
+}
+</script>
+
+
+<button onclick="go()">iframeActiveXGet</button>
+
+
+</body>
+</html>
diff --git a/3-more/10-ajax/13-ajax-iframe-htmlfile/activex/samedomain.php b/3-more/10-ajax/13-ajax-iframe-htmlfile/activex/samedomain.php
new file mode 100755
index 00000000..fe97317b
--- /dev/null
+++ b/3-more/10-ajax/13-ajax-iframe-htmlfile/activex/samedomain.php
@@ -0,0 +1,8 @@
+<?php 
+header('Cache-Control: no-cache');
+$data = json_encode($_POST['data'] ?: 'Server date: '.date('H:i:s'));
+sleep(2);
+?>
+<script>
+parent.CallbackRegistry[window.name](<?=$data?>);
+</script>
diff --git a/3-more/10-ajax/13-ajax-iframe-htmlfile/article.md b/3-more/10-ajax/13-ajax-iframe-htmlfile/article.md
new file mode 100644
index 00000000..8c98c8f7
--- /dev/null
+++ b/3-more/10-ajax/13-ajax-iframe-htmlfile/article.md
@@ -0,0 +1,120 @@
+# IFRAME в IE: cкрытие в ActiveX "htmlfile"
+
+Так как в IE6-9 современные транспорты не поддерживаются, то приходится использовать  `iframe`. И здесь есть две проблемы:
+
+<ul>
+<li>При POST в `IFRAME` раздаётся звук "клика".</li>
+<li>Пока идёт запрос в ифрейм, показываются часики и анимируется загрузка страницы.</li>
+</ul>
+
+И того и другого можно избежать, и сделать запрос полностью незаметным, если воспользоваться некоторыми специфическими возможностями Internet Explorer.
+[cut]
+
+В Internet Explorer есть безопасный ActiveX-объект `htmlfile`. IE не требует разрешений на его создание. Фактически, это независимый HTML-документ.
+
+Оказывается, если `iframe` создать в нём, то никакой анимации и звуков не будет.
+
+Итак, схема:
+<ol>
+<li>Основное окно `main` создёт вспомогательный объект: `new ActiveXObject("htmlfile")`. Это HTML-документ со своим `window`, похоже на встроенный `iframe`.</li>
+<li>В `htmlfile` записывается `iframe`.</li>
+<li>Цепочка общения: основное окно - `htmlfile` - ифрейм.</li>
+</ol>
+
+## iframeActiveXGet
+
+На самом деле всё еще проще, если посмотреть на код:
+
+Метод `iframeActiveXGet` по существу идентичен обычному `iframeGet`, которое мы рассмотрели. Единственное отличие -- вместо `createIframe` используется особый метод `createActiveXFrame`:
+
+```js
+function iframeActiveXGet(url, onSuccess, onError) {
+
+  var iframeOk = false;
+
+  var iframeName = Math.random();
+*!*
+  var iframe = createActiveXFrame(iframeName, url);
+*/!*
+  
+  CallbackRegistry[iframeName] = function(data) {
+    iframeOk = true;  
+    onSuccess(data);
+  }
+
+  iframe.onload = function() { 
+    iframe.parentNode.removeChild(iframe); // очистка
+    delete CallbackRegistry[iframeName];   
+    if (!iframeOk) onError(); // если коллбэк не вызвался - что-то не так
+  }
+
+}
+```
+
+## createActiveXFrame
+
+В этой функции творится вся IE-магия:
+
+```js
+function createActiveXFrame(name, src) {
+  // (1)
+  var htmlfile = window.htmlfile;
+  if (!htmlfile) {
+    htmlfile = window.htmlfile = new ActiveXObject("htmlfile");
+    htmlfile.open();
+    // (2)
+    htmlfile.write("<html><body></body></html>");
+    htmlfile.close();
+    // (3)
+    htmlfile.parentWindow.CallbackRegistry = CallbackRegistry;
+  }
+  
+  // (4)
+  src = src || 'javascript:false';
+  htmlfile.body.insertAdjacentHTML('beforeEnd', 
+    "<iframe name='"+name+"' src='"+src+"'></iframe>");
+  return htmlfile.body.lastChild; 
+}
+```
+
+<ol>
+<li>Вспомогательный объект `htmlfile` будет один и он будет глобальным. Можно и спрятать переменную в замыкании. Смысл в том, что в один `htmlfile` можно записать много ифреймов, так что не будем множить сущности и занимать ими лишнюю память.</li>
+<li>В `htmlfile` можно записать любой текст и, при необходимости, через  `document.write('<script>...<\/script>)`. Здесь мы делаем пустой документ.</li>
+<li>Когда загрузится `iframe`, он сделает вызов:
+
+```php
+<script>
+parent.CallbackRegistry[window.name](<?=$data?>);
+</script>
+```
+
+Здесь `parent'ом` для `iframe'а` будет `htmlfile`, т.е. `CallbackRegistry` будет искаться среди переменных соответствующего ему окна, а вовсе не верхнего `window`.
+
+Окно для `htmlfile` доступно как `htmlfile.parentWindow`, копируем в него ссылку на реестр коллбэков `CallbackRegistry`. Теперь ифрейм его найдёт.</li>
+<li>Далее вставляем ифрейм в документ. В старых `IE` нельзя поменять `name` ифрейму через DOM, поэтому вставляем строкой через `insertAdjacentHTML`.</li>
+</ol>
+
+Пример в действии (только IE):
+
+[iframe src="activex" border=1 link zip]
+
+Запрос, который происходит, полностью незаметен. Мы ещё воспользуемся описанным способом для реализации COMET.
+
+## POST через ActiveX
+
+Ранее мы рассмотрели метод GET. Метод POST подразумевает отправку формы в ифрейм.
+
+Для этого форму нужно добавить не во внешнее окно, а в `htmlfile`, через `htmlfile.appendChild`.  
+
+В остальном -- всё также, как и при обычной отправке через ифрейм. 
+
+
+
+
+
+
+
+
+[head]
+<script src="/files/tutorial/ajax/script/scriptRequest.js"></script>
+[/head]
\ No newline at end of file
diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/article.md b/3-more/10-ajax/14-ajax-iframe-xdomain/article.md
new file mode 100644
index 00000000..eee67293
--- /dev/null
+++ b/3-more/10-ajax/14-ajax-iframe-xdomain/article.md
@@ -0,0 +1,199 @@
+# IFRAME для кросс-доменных запросов
+
+Современные браузеры поддерживают множество альтернатив ифреймам. В первую очередь, это современный [XMLHttpRequest](/ajax-xmlhttprequest), который может делать любые запросы, в том числе кросс-доменные и с пересылкой файлов.
+
+А в IE6-9 ифреймы в некоторых ситуациях незаменимы, поэтому способ, описанный в этой статье, в первую очередь используется для поддержки этих браузеров.
+Существует несколько вариантов реализации кросс-доменных запросов. Конкретный выбор зависит от версии IE, которую мы собираемся поддерживать.
+
+## IE8+: postMessage-ответ
+
+IE8 и выше поддерживают интерфейс [postMessage](https://developer.mozilla.org/en-US/docs/DOM/window.postMessage) для общения между окнами с разных доменов. 
+
+Для его использования серверный код должен ответить на запрос примерно так:
+
+```js
+<script>
+parent.postMessage(message, parentDomain);
+</script>
+```
+
+Браузер проверит, действительно ли родительское окно `parent` с домена `parentDomain`, и если это так, то на нём будет вызвано событие `onmessage`, которое получит доступ к тексту `message`. 
+
+В `message` должна содержаться информация о том, на какой запрос пришёл ответ, и  данные. Так как кросс-браузерно поддерживаются только сообщения-строки, то передать эту информацию можно через JSON.
+
+Серверный код, который это делает:
+
+```php
+<?php 
+header('Cache-Control: no-cache');
+$data = json_encode($_POST['data'] ?: 'Server date: '.date('H:i:s'));
+?>
+<script>
+*!*
+parent.postMessage(JSON.stringify({
+	name: window.name,
+	body: <?=$data?>
+}), "http://learn.javascript.ru"); 
+*/!*
+</script>
+```
+
+Код на клиенте, который будет реагировать на `postMessage`:
+
+```js
+window.onmessage = function(event) {
+  // распаковать сообщение
+  var message = JSON.parse(event.data);
+  // вызвать обработку результата запроса
+  CallbackRegistry[message.name](message.body);
+}
+```
+
+Ещё одна небольшая тонкость -- время вызова `iframe.onload`. 
+
+Задача этого обработчика -- проверить, всё ли вызвалось. Для этого он должен отработать обязательно *после* `onmessage`. А вызов `postMessage` -- асинхронный, поэтому нужно отложить проверку на `setTimeout(..,0)`.
+
+При этом получится следующий поток выполнения:
+
+<ol>
+<li>Пришёл ответ с сервера, вызвал `postMessage`.</li>
+<li>Событие `onmessage` встало в очередь выполнения.</li>
+<li>Обработано окончание загрузки, вызвался `iframe.onload`, поставил в очередь проверку.</li>
+<li>Сработает `onmessage`, а затем проверка.</li>
+</ol>
+
+Полный код кросс-доменного `iframeGet` (`iframePost` -- аналогично):
+
+```js
+//+ src="postmessage.js"
+```
+
+Пример в действии:
+
+[iframe src="postmessage" border="1" link zip]
+
+### postMessage-прокси
+
+Если нужно часто обмениваться данными с одним доменом, то можно загрузить `iframe` с этого домена, содержащий код `postMessage` и `onmessage`:
+
+```html
+<script>
+window.onmessage = function(event) {
+  // получил информацию с основной страницы
+
+  if (event.origin != 'javascript.ru') return; // обратились с чужого сайта
+
+  // послать event.data на свой домен
+  // по окончании запроса вызвать parent.postMessage(ответ, ...)
+}
+</script>
+```
+
+Время от времени этому `iframe` пересылаются сообщения, он обменивается информацией со своей страницей (можно через `XMLHttpRequest`) и отвечает основной странице.
+
+При этом ифрейм будет только один, пересоздавать ничего не нужно.
+
+
+## IE6: передача через window.name
+
+Этот способ активно используется, так как с одной стороны покрывает ряд важных сценариев использования, а с другой -- поддерживается всеми браузерами, включая IE6+.
+
+У `IFRAME` есть атрибут `name`, который задаёт "имя окна". Обычно он используется для отправки форм в данный ифрейм или для доступа к внутреннему окну через `window.frames[name]`.
+
+Но можно и использовать его для другой, непредусмотренной цели -- передачи данных.
+
+Дело в том, что имя окна не меняется при навигации в `IFRAME`, и при этом доступно из JavaScript. Поэтому если одна страница поставила `window.name = "Вася"`, а потом посетитель нажал на ссылку в `IFRAME` и перешёл на другую страницу (домен не важен), то она сможет прочитать "Вася" из `window.name`. 
+
+Это делает возможным следующий алгоритм:
+
+<ol>
+<li>Страница на основном домене создаёт `IFRAME` и отправляет в него запрос *на другой домен*.</li>
+<li>Сервер отвечает кодом, который выглядит примерно так:
+
+```php
+<?php ... ?>
+<script>
+window.name = "данные"; 
+
+// IFRAME сам должен поменять свой адрес, иначе в IE name не сохранится
+// blank.html - любой пустой документ на основном домене
+window.location.replace('http://основной домен/blank.html');
+</script>
+```
+
+</li>
+<li>Страница по `iframe.onload` читает `iframe.contentWindow.name` и получает данные.</li>
+</ol>
+
+Ниже реализован метод POST, т.к. кросс-доменный GET можно сделать и при помощи [Транспорта SCRIPT](/ajax-jsonp):
+
+```js
+//+ src="name.js"
+```
+
+Обратите внимание на комментарии, они более подробно описывают важные детали коммуникации.
+
+Пример в действии:
+
+[iframe src="name" border="1" zip link]
+
+### Сфера использования
+
+У метода `window.name` почти нет недостатков.
+
+<ul>
+<li>Он работает во всех браузерах.</li>
+<li>Он прост в реализации.</li>
+<li>В `window.name` кросс-браузерно влезает до 2МБ.</li>
+<li>Пустой документ `blank.html` будет сразу же закэширован браузером, и в дальнейшем лишнего запроса не будет.</li>
+</ul> 
+
+Единственное ограничение -- ответ до 2МБ. Многие сценарии использования, например кросс-доменная авторизация, легко вписываются в них.
+
+## IE6+: hash-прокси
+
+Этот способ представляет собой отвратительнейший хак. Он заключается в том, что при общении между основной страницей и ифреймом с другого домена -- они могут легко менять `hash` друг другу (часть пути после `#`).
+
+Считается, что это безопасно, т.к. изменение хэша -- всего лишь прыжок по странице, поэтому браузеры это разрешают.
+
+При этом читать хэши друг друга нельзя, можно только писать в них.
+
+Соответственно, логика взаимодействия такая:
+
+<ol>
+<li>Главная страница подключает ифрейм с другого домена.</li>
+<li>Ифрейму меняется `hash`, он видит это и понимает, что ему "хотят что-то этим сказать", обрабатывает полученное сообщение.</li>
+<li>Когда ифрейм готов, он, в свою очередь, меняет хэш родителю. Тот принимает ответ.</li>
+</ol>
+
+При этом у родителя и ифрейма существует протокол общения через хэш. Ограничение -- не более 4kb (минус длина базовой части URL) на сообщение.
+
+Обход проблем:
+<ul>
+<li>**При такой реализации на п.3 окно-родитель будет "прыгать" -- ему же меняют хэш!**
+
+Поэтому в реальности используют три ифрейма: родительское окно `main` включает ифрейм с того же домена `localProxy.html`, а уже он включает в себя ифрейм с другого домена `remoteProxy.html`.
+
+Общение осуществляется по цепочке `main -> localProxy -> remoteProxy -> localProxy -> main`. Хэш меняется у промежуточного прокси, который сообщает об этом родительскому окну (он на одном домене с ним).
+
+Можно сделать фреймы `localProxy` и `remoteProxy` на одном уровне. Тогда не во всех браузерах будет работать (в Opera не будет?), но в IE всё (вроде!) будет ок.</li
+<li>**Как окну(или ифрейму) обнаружить изменение хэща?** 
+
+В старых браузерах отсутствует событие `onhashchange`, поэтому используются два подхода:
+<ol>
+<li>Окно раз в 50мс проверяет, поменялся ли хэш.</li>
+<li>Используется `window.onresize` как сигнал: когда ифрейму меняем хэш -- тут же немного изменим и его размер, на нём сработает событие `onresize`.</li>
+</ol>
+</li>
+</ul>
+
+Автор этих строк реализовывал такой протокол в очень бородатые времена, несколько раз участвовал в обсуждениях проектов, использующих такое решение -- и всегда был удивлён, насколько стабильно оно работает. Несмотря на хакерскую природу самого решения.
+
+В этом случае ифрейм перегружать не надо, поэтому большей частью такой подход используется даже не для AJAX, а для общения между постоянно встроенным виджетом-ифреймом и основной страницей.
+
+Область применения -- когда обязательна поддержка IE6,7 и никакие другие способы, почему-то, не подходят.
+
+
+[head]
+<script src="/files/tutorial/ajax/script/scriptRequest.js"></script>
+[/head]
\ No newline at end of file
diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/name.js b/3-more/10-ajax/14-ajax-iframe-xdomain/name.js
new file mode 100755
index 00000000..1221f9f9
--- /dev/null
+++ b/3-more/10-ajax/14-ajax-iframe-xdomain/name.js
@@ -0,0 +1,36 @@
+
+function iframePost(url, data, onSuccess, onError) {
+
+  var iframeName = Math.random();
+  var iframe = createIframe(iframeName);  
+
+  // onload после append, чтобы не срабатывал лишний раз
+  iframe.onload = function() {  
+  
+    var newName = iframe.contentWindow.name;
+
+    if (newName == iframeName) {
+      // имя получили, но оно осталось тем же - значит сервер его не заменил
+      // значит что-то не так в ответе (ошибка сервера или неверный формат)
+      onError();
+      return;
+    }
+
+    // имя получено, коммуникация завершена
+    iframe.parentNode.removeChild(iframe); // очистка
+
+    // такой eval можно использовать вместо JSON.parse для старых IE, 
+    // при условии доверия содержимому к newName
+    // если доверия нет -- используйте библиотеку json2.js
+    onSuccess( eval('(' + newName +')') ); 
+  };
+
+  // для IE<9 нужно использовать attachEvent вместо iframe.onload 
+  if (iframe.attachEvent && !iframe.addEventListener) {
+    iframe.attachEvent("onload", iframe.onload);
+    iframe.onload = null;
+  }
+
+  postToIframe(url, data, iframeName);
+}
+
diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/name/.zip b/3-more/10-ajax/14-ajax-iframe-xdomain/name/.zip
new file mode 100755
index 00000000..d3f5a12f
--- /dev/null
+++ b/3-more/10-ajax/14-ajax-iframe-xdomain/name/.zip
@@ -0,0 +1 @@
+
diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/name/anydomain.php b/3-more/10-ajax/14-ajax-iframe-xdomain/name/anydomain.php
new file mode 100755
index 00000000..c2bcc4ef
--- /dev/null
+++ b/3-more/10-ajax/14-ajax-iframe-xdomain/name/anydomain.php
@@ -0,0 +1,13 @@
+<?php 
+header('Cache-Control: no-cache');
+$data = json_encode($_POST['data'] ?: 'Server date: '.date('H:i:s'));
+
+// $blankUrl can be any empty document
+$blankUrl = 'http://learn.javascript.ru'.dirname($_SERVER['REQUEST_URI']).'/blank.html';
+ ?>
+<script>
+window.name = "<?=str_replace('"','\\"',$data)?>"; // положить JSON внутрь строки, иначе JSON.parse(window.name) не сработает
+
+// сам IFRAME должен поменять свой адрес, иначе в IE name не сохранится
+window.location.replace('<?=$blankUrl?>');
+</script>
diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/name/blank.html b/3-more/10-ajax/14-ajax-iframe-xdomain/name/blank.html
new file mode 100755
index 00000000..95222a60
--- /dev/null
+++ b/3-more/10-ajax/14-ajax-iframe-xdomain/name/blank.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<html></html>
diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/name/iframe.js b/3-more/10-ajax/14-ajax-iframe-xdomain/name/iframe.js
new file mode 100755
index 00000000..f7cf9169
--- /dev/null
+++ b/3-more/10-ajax/14-ajax-iframe-xdomain/name/iframe.js
@@ -0,0 +1,49 @@
+
+
+function createIframe(name, src, debug) {
+  src = src || 'javascript:false'; // пустой src
+
+  var tmpElem = document.createElement('div');
+
+  // в старых IE нельзя присвоить name после создания iframe, поэтому создаём через innerHTML
+  tmpElem.innerHTML = '<iframe name="'+name+'" id="'+name+'" src="'+src+'">';
+  var iframe = tmpElem.firstChild;
+
+  if (!debug) {
+    iframe.style.display = 'none';
+  }
+
+  document.body.appendChild(iframe); 
+
+  return iframe;
+}
+
+// функция постит объект-хэш content в виде формы с нужным url , target
+// напр. postToIframe('/count.php', {a:5,b:6}, 'frame1')
+
+function postToIframe(url, data, target){
+  var phonyForm = document.getElementById('phonyForm');
+  if(!phonyForm){
+    // временную форму создаем, если нет
+    phonyForm = document.createElement("form");
+    phonyForm.id = 'phonyForm';
+    phonyForm.style.display = "none";
+    phonyForm.method = "POST"; 
+    phonyForm.enctype = "multipart/form-data";      
+    document.body.appendChild(phonyForm);
+  }
+
+  phonyForm.action = url;
+  phonyForm.target = target;
+
+  // заполнить форму данными из объекта
+  var html = [];
+  for(var key in data){
+    var value = data[key].replace(/"/g, "&quot;");
+    html.push("<input type='hidden' name=\""+key+"\" value=\""+value+"\">");
+  }
+  phonyForm.innerHTML = html.join('');
+
+  phonyForm.submit();
+}
+
diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/name/index.html b/3-more/10-ajax/14-ajax-iframe-xdomain/name/index.html
new file mode 100755
index 00000000..fdc1e9d6
--- /dev/null
+++ b/3-more/10-ajax/14-ajax-iframe-xdomain/name/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<script src="iframe.js"></script>
+<script src="name.js"></script>
+
+<script>
+function ok(result) {
+   alert('ok: ' + result);
+}
+function fail() {
+   alert('fail');
+}
+
+// запрос к файлу anydomain.php на другом домене
+var url = 'http://test.javascript.ru' + location.pathname.replace(/[^\/]*$/, 'anydomain.php');
+</script>
+
+
+<button onclick="iframePost(url, {data: 'Client date: '+new Date}, ok, fail)">iframePost</button>
+
+</body>
+</html>
diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/name/name.js b/3-more/10-ajax/14-ajax-iframe-xdomain/name/name.js
new file mode 100755
index 00000000..1221f9f9
--- /dev/null
+++ b/3-more/10-ajax/14-ajax-iframe-xdomain/name/name.js
@@ -0,0 +1,36 @@
+
+function iframePost(url, data, onSuccess, onError) {
+
+  var iframeName = Math.random();
+  var iframe = createIframe(iframeName);  
+
+  // onload после append, чтобы не срабатывал лишний раз
+  iframe.onload = function() {  
+  
+    var newName = iframe.contentWindow.name;
+
+    if (newName == iframeName) {
+      // имя получили, но оно осталось тем же - значит сервер его не заменил
+      // значит что-то не так в ответе (ошибка сервера или неверный формат)
+      onError();
+      return;
+    }
+
+    // имя получено, коммуникация завершена
+    iframe.parentNode.removeChild(iframe); // очистка
+
+    // такой eval можно использовать вместо JSON.parse для старых IE, 
+    // при условии доверия содержимому к newName
+    // если доверия нет -- используйте библиотеку json2.js
+    onSuccess( eval('(' + newName +')') ); 
+  };
+
+  // для IE<9 нужно использовать attachEvent вместо iframe.onload 
+  if (iframe.attachEvent && !iframe.addEventListener) {
+    iframe.attachEvent("onload", iframe.onload);
+    iframe.onload = null;
+  }
+
+  postToIframe(url, data, iframeName);
+}
+
diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage.js b/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage.js
new file mode 100755
index 00000000..95e4e904
--- /dev/null
+++ b/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage.js
@@ -0,0 +1,29 @@
+var CallbackRegistry = {}; // реестр
+
+function iframeGet(url, onSuccess, onError) {
+
+  var iframeOk = false;
+
+  var iframeName = Math.random();
+  var iframe = createIframe(iframeName, url);
+  
+  CallbackRegistry[iframeName] = function(data) {
+      iframeOk = true;  
+    onSuccess(data);
+  }
+
+  function iframeOnLoad() { // onload всегда после обработки скриптов в ифрейме
+    iframe.parentNode.removeChild(iframe); // очистка
+    delete CallbackRegistry[iframeName];   
+    if (!iframeOk) onError(); // если коллбэк не вызвался - что-то не так
+  }
+  iframe.onload = function() { // перенести onload на "после postMessage"
+    setTimeout(iframeOnLoad, 0);
+  };
+
+}
+
+window.onmessage = function(event) {
+  var message = JSON.parse(event.data);
+  CallbackRegistry[message.name](message.body);
+}
diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/.zip b/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/.zip
new file mode 100755
index 00000000..d3f5a12f
--- /dev/null
+++ b/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/.zip
@@ -0,0 +1 @@
+
diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/anydomain.php b/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/anydomain.php
new file mode 100755
index 00000000..9c63c0bb
--- /dev/null
+++ b/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/anydomain.php
@@ -0,0 +1,10 @@
+<?php 
+header('Cache-Control: no-cache');
+$data = json_encode($_POST['data'] ?: 'Server date: '.date('H:i:s'));
+?>
+<script>
+parent.postMessage(JSON.stringify({
+	name: window.name,
+	body: <?=$data?>
+}), "http://learn.javascript.ru"); // разрешить читать ответ только с этого хоста
+</script>
diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/iframe.js b/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/iframe.js
new file mode 100755
index 00000000..0fad77af
--- /dev/null
+++ b/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/iframe.js
@@ -0,0 +1,49 @@
+
+
+function createIframe(name, src, debug) {
+  src = src || 'javascript:false'; // пустой src
+
+  var tmpElem = document.createElement('div');
+
+  // в старых IE нельзя присвоить name после создания iframe, поэтому создаём через innerHTML
+  tmpElem.innerHTML = '<iframe name="'+name+'" id="'+name+'" src="'+src+'">';
+  var iframe = tmpElem.firstChild;
+
+  if (!debug) {
+    iframe.style.display = 'none';
+  }
+  
+  document.body.appendChild(iframe);
+
+  return iframe;
+}
+
+// функция постит объект-хэш content в виде формы с нужным url , target
+// напр. postToIframe('/count.php', {a:5,b:6}, 'frame1')
+
+function postToIframe(url, data, target){
+  var phonyForm = document.getElementById('phonyForm');
+  if(!phonyForm){
+    // временную форму создаем, если нет
+    phonyForm = document.createElement("form");
+    phonyForm.id = 'phonyForm';
+    phonyForm.style.display = "none";
+    phonyForm.method = "POST";        
+    phonyForm.enctype = "multipart/form-data";  
+    document.body.appendChild(phonyForm);
+  }
+
+  phonyForm.action = url;
+  phonyForm.target = target;
+
+  // заполнить форму данными из объекта
+  var html = [];
+  for(var key in data){
+    var value = data[key].replace(/"/g, "&quot;");
+    html.push("<input type='hidden' name=\""+key+"\" value=\""+value+"\">");
+  }
+  phonyForm.innerHTML = html.join('');
+
+  phonyForm.submit();
+}
+
diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/index.html b/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/index.html
new file mode 100755
index 00000000..ce4f51e6
--- /dev/null
+++ b/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<script src="iframe.js"></script>
+<script src="postmessage.js"></script>
+
+<script>
+
+function ok(result) {
+ 	alert('ok: '+result);
+}
+function fail() {
+ 	alert('fail');
+}
+
+var url = 'http://test.javascript.ru' + location.pathname.replace(/[^\/]*$/, 'anydomain.php');
+</script>
+
+<button onclick="iframeGet(url, ok, fail)">iframeGet</button>
+
+
+</body>
+</html>
diff --git a/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/postmessage.js b/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/postmessage.js
new file mode 100755
index 00000000..95e4e904
--- /dev/null
+++ b/3-more/10-ajax/14-ajax-iframe-xdomain/postmessage/postmessage.js
@@ -0,0 +1,29 @@
+var CallbackRegistry = {}; // реестр
+
+function iframeGet(url, onSuccess, onError) {
+
+  var iframeOk = false;
+
+  var iframeName = Math.random();
+  var iframe = createIframe(iframeName, url);
+  
+  CallbackRegistry[iframeName] = function(data) {
+      iframeOk = true;  
+    onSuccess(data);
+  }
+
+  function iframeOnLoad() { // onload всегда после обработки скриптов в ифрейме
+    iframe.parentNode.removeChild(iframe); // очистка
+    delete CallbackRegistry[iframeName];   
+    if (!iframeOk) onError(); // если коллбэк не вызвался - что-то не так
+  }
+  iframe.onload = function() { // перенести onload на "после postMessage"
+    setTimeout(iframeOnLoad, 0);
+  };
+
+}
+
+window.onmessage = function(event) {
+  var message = JSON.parse(event.data);
+  CallbackRegistry[message.name](message.body);
+}
diff --git a/3-more/10-ajax/15-comet-iframe/article.md b/3-more/10-ajax/15-comet-iframe/article.md
new file mode 100644
index 00000000..3a375011
--- /dev/null
+++ b/3-more/10-ajax/15-comet-iframe/article.md
@@ -0,0 +1,86 @@
+# IFRAME для длинных соединений
+
+Реализация COMET, рассматриваемая здесь, подходит для IE<10 и других старых браузеров, не поддерживающих специализированный стандарт WebSocket.
+
+Бесконечный IFRAME -- самый старый способ организации COMET. Когда-то он был основой AJAX-приложений, а сейчас -- используется лишь в случаях, когда браузер не поддерживает современный стандарт WebSocket.
+[cut]
+
+Этот способ основан на том, что браузер читает страницу последовательно и обрабатывает все новые теги по мере того, как сервер их присылает.
+
+Классическая реализация -- это когда клиент создает невидимый IFRAME, ведущий на служебный URL. Сервер, получив соединение на этот URL, не закрывает его, а
+время от времени присылает блоки сообщений <code>&lt;script&gt;...javascript...&lt;/script&gt;</code>. Появившийся в IFRAME'е javascript тут же выполняется браузером, передавая информацию на основную страницу.
+
+Таким образом, для передачи данных используется "бесконечный" ифрейм, через который сервер присылает все новые данные. 
+
+## Схема работы
+
+
+Принцип работы: 
+<ol>
+<li>Создаётся `<iframe src="COMET_URL">`, по адресу `COMET_URL` расположен сервер.</li>
+<li>Сервер выдаёт начало ("шапку") документа и останавливается, оставляя соединение активным.</li>
+<li>Когда сервер хочет что-то отправить -- он пишет в соединение <code>&lt;script&gt;parent.onMessage(сообщение)&lt;/script&gt;</code> Браузер тут же выполняет этот скрипт -- так сообщение приходит на клиент.</li>
+<li>Ифрейм, в теории, грузится бесконечно. Его завершение означает обрыв канала связи. Его можно поймать по `iframe.onload` и заново открыть соединение (создать новый `iframe`).</li>
+</ol>
+
+Также ифрейм можно пересоздавать время от времени, для очистки памяти от старых сообщений.
+
+<img src="comet.png">
+
+Ифрейм работает только на получение данных. Для запросов используется обычный `XMLHttpRequest`.
+
+## Проблемы, специфичные для IFRAME
+
+Такое использование ифреймов является хаком. Поэтому есть ряд проблем:
+
+<ol>
+<li>Показывается индикатор загрузки, "курсор-часики".</li>
+<li>`IFRAME` влияет на историю посещений, если неправильно создан.</li>
+<li>Браузер буферизует начало страницы.</li>
+</ol>
+
+Как обойти первые две проблемы в IE6-9 (именно для него в первую очередь и нужен IFRAME), мы видели в главе [](/ajax-iframe-htmlfile).
+
+Что же касается буферизации -- IE не начинает обработку страницы, пока она не загрузится до определенного размера.
+
+Поэтому в таком `IFRAME` первые несколько сообщений задержатся:
+
+```html
+<!DOCTYPE HTML>
+<html>
+  <body>
+  <script>parent.onMessage("привет");</script>
+  <script>parent.onMessage("от сервера");</script>
+  ...
+```
+
+Решение -- забить начало ифрейма чем-нибудь, поставить, например, килобайт пробелов в начале:
+
+```html
+<!DOCTYPE HTML>
+<html>
+  <body>
+  ******* 1 килобайт пробелов, а потом уже сообщения ******
+  <script>parent.onMessage("привет");</script>
+  <script>parent.onMessage("от сервера");</script>
+  ...
+```
+
+## Код
+
+Клиентский код, кросс-браузерно реализующий этот подход с возобновлением соединения при ошибках:
+
+```js
+//+ src="iframeComet.js"
+```
+
+Его можно улучшить, например сервер может раз в секунду посылать мини-сообщение "я тут", для более надёжного определения статуса подключения.
+
+## Скачать пример
+
+Мини-приложение с сервером на Node.JS, непрерывно получающее текущее время с сервера через `IFRAME`, можно скачать: [comet.zip](/zip/tutorial/ajax/iframe/comet.zip).
+
+
+[head]
+<script src="/files/tutorial/ajax/script/scriptRequest.js"></script>
+[/head]
\ No newline at end of file
diff --git a/3-more/10-ajax/15-comet-iframe/comet.png b/3-more/10-ajax/15-comet-iframe/comet.png
new file mode 100755
index 00000000..6fcfc166
Binary files /dev/null and b/3-more/10-ajax/15-comet-iframe/comet.png differ
diff --git a/3-more/10-ajax/15-comet-iframe/iframeComet.js b/3-more/10-ajax/15-comet-iframe/iframeComet.js
new file mode 100755
index 00000000..0d1d3d38
--- /dev/null
+++ b/3-more/10-ajax/15-comet-iframe/iframeComet.js
@@ -0,0 +1,83 @@
+
+var IframeComet = new function() {
+  var self = this;
+
+  var connectTries = 0, reconnectTimer;
+  var htmlfile; // for ie only
+  var iframe;
+  
+  this.onConnected = function() {
+    connectTries = 0;
+    clearTimeout(reconnectTimer);
+  };
+
+  this.onMessage = function(message) { /* ... */ };
+
+  this.onError = function(err) { /* ... */ };
+
+  this.open = function(url) {    
+    connectTries++;
+
+    if(connectTries > 3) {
+      self.onError("Unable to connect");
+    }
+
+    if (!window.WebSocket && window.ActiveXObject) { // old ie
+      createActiveXFrame(url);
+    } else {
+      createIframe(url);
+    }
+
+    reconnectTimer = setTimeout(function() {
+      if (!self.isConnected()) { 
+        self.open(url);
+      }
+    }, connectTries * 2000);
+    
+    // в Chrome не срабатывает при обрыве соединения,
+    // так что используем там другой =) транспорт
+    iframe.onload = function() {
+      self.open(url);
+    };
+
+  };
+
+  this.isConnected = function() {
+    return connectTries == 0; // onConnect обнуляет connectTries
+  }
+
+  function cleanIframe() {    
+    if (iframe) {
+      iframe.src = "javascript:false";
+      iframe.parentNode.removeChild(iframe); // очистка
+    }
+  }
+
+  function createIframe(src) {
+    cleanIframe();
+
+    iframe = document.createElement('iframe');
+    iframe.src = src || 'javascript:false';
+    iframe.style.display = 'none';
+    
+    document.body.appendChild(iframe);
+  }
+
+
+  function createActiveXFrame(src) {
+    cleanIframe();
+
+    if (!htmlfile) {
+      htmlfile = new ActiveXObject("htmlfile");
+      htmlfile.open();
+      htmlfile.write("<html><body></body></html>");
+      htmlfile.close();
+      htmlfile.parentWindow.IframeComet = self;
+    }
+
+    src = src || 'javascript:false'; // пустой src  
+    htmlfile.body.insertAdjacentHTML('beforeEnd', "<iframe src='"+src+"'></iframe>");
+    iframe = htmlfile.body.lastChild; // window in .document.parentWindow
+  }
+
+}
\ No newline at end of file
diff --git a/3-more/10-ajax/16-ajax-summary/article.md b/3-more/10-ajax/16-ajax-summary/article.md
new file mode 100644
index 00000000..d1cade8b
--- /dev/null
+++ b/3-more/10-ajax/16-ajax-summary/article.md
@@ -0,0 +1,113 @@
+# Таблица транспортов и их возможностей 
+
+Здесь мы подведём итог раздела, сравним транспорты и их возможности.
+[cut]
+
+## Способы опроса сервера
+
+Основные способы опроса сервера:
+<ol>
+<li>**Частые опросы** -- регулярно к серверу отправляется запрос за данными. Сервер тут же отвечает на него, возвращая данные, если они есть. Если нет -- получается, что запрос был зря.
+
+Этот способ очень лёгок в реализации, но приводит к большому количеству лишних запросов, поэтому мы его далее не рассматриваем.
+</li>
+<li>**Длинные опросы** -- к серверу отправляется запрос за данными. Сервер не отвечает на него, пока данные не появятся. Когда данные появились -- ответ с ними отправляется в браузер, и тот тут же делает новый запрос.
+
+Способ хорош, пока сообщений не слишком много. В идеальном случае соединение почти всё время висит открытым, лишь иногда сервер отвечает на него, доставляя данные в браузер.
+
+Также удобен в реализации, но даёт большое количество висящий соединений на сервере. Не все сервера хорошо поддерживают это. Например, `Apache` будет есть очень много памяти.
+</li>
+<li>**Потоковое соединение** -- открыто соединение к серверу, и через него непрерывно поступают данные.</li>
+</ol>
+
+## Таблица транспортов
+Основные характеристики всех транспортов, которые мы обсуждали в деталях, собраны в этой таблице.
+
+Они были детально рассмотрены в предыдущих главах раздела.
+
+<table class="bordered">
+<tr>
+<th></th>
+<th>`XMLHttpRequest`</th>
+<th>`IFRAME`</th>
+<th>`SCRIPT`</th>
+<th>`EventSource`</th>
+<th>`WebSocket`</th>
+</tr>
+<tr>
+<th>Кросс-доменность</th>
+<td>да, кроме IE<10<a class="link-ref" href="#x1">x1</a></td>
+<td>да, сложности в IE<8<a class="link-ref" href="#i1">i1</a></td>
+<td>да</td>
+<td>да</td>
+<td>да</td>
+</tr>
+<tr>
+<th>Методы</th>
+<td>Любые</td>
+<td>GET / POST</td>
+<td>GET</td>
+<td>GET</td>
+<td>Свой протокол</td>
+</tr>
+<tr>
+<th>COMET</th>
+<td>Длинные опросы<a class="link-ref" href="#x2">x2</a></td>
+<td>Непрерывное соединение</td>
+<td>Длинные опросы</td>
+<td>Непрерывное соединение</td>
+<td>Непрерывное соединение в обе стороны</td>
+</tr>
+<tr>
+<th>Поддержка</th>
+<td>Все браузеры, ограничения в IE&lt;10<a class="link-ref" href="#x3">x3</a></td>
+<td>Все браузеры</td>
+<td>Все браузеры</td>
+<td>Кроме IE</td>
+<td>IE 10, FF11, Chrome 16, Safari 6, Opera 12.5<a class="link-ref" href="#w1">w1</a></td>
+</tr>
+</table>
+
+Пояснения:
+
+<dl>
+<dt>`XMLHttpRequest`</dt>
+<dd>
+<ol>
+<li id="x1">В IE8-9 поддерживаются кросс-доменные GET/POST запросы с ограничениями через `XDomainRequest`.</li>
+<li id="x2">Можно говорить об ограниченной поддержке непрерывного соединения через `onprogress`, но это событие вызывается не чаще чем в `50ms` и не гарантирует получение полного пакета данных. Например, сервер может записать "Привет!", а событие вызовется один раз, когда браузер получил "При". Поэтому наладить обмен пакетами сообщений с его помощью затруднительно.
+</li>
+<li id="x3">Многие возможности современного стандарта включены в IE лишь с версии 10.</li>
+</ol>
+</dd>
+<dt>`IFRAME`</dt>
+<dd>
+<ol>
+<li id="i1">Во всех современных браузерах и IE8 кросс-доменность обеспечивает `postMessage`. В более старых браузерах возможны решения через `window.name` и `hash`.</li>
+</ol>
+</dd>
+<dt>`WebSocket`</dt>
+<dd>
+<ol>
+<li id="w1">Имеется в виду поддержка окончательной редакции протокола [RFC 6455](http://tools.ietf.org/html/rfc6455). Более старые браузеры могут поддерживать черновики протокола. IE<10 не поддерживает `WebSocket`.</li>
+</ol>
+</dd>
+</dl>
+
+Существует также транспорт, не рассмотренный здесь:
+<ul>
+<li>XMLHttpRequest с флагом `multipart`, только для Firefox. 
+
+При указании свойства `xhr.multipart = true` и специального multipart-формата ответа сервера, Firefox инициирует `onload` при получении очередной части ответа.
+
+Ответ может состоять из любого количества частей, досылаемых по инициативе сервера.
+</li>
+</ul>
+Мы не рассматривали его, т.к. Firefox поддерживает и другие, стандартные, транспорты.
+
+
+
+ 
+[head]
+<script src="/files/tutorial/ajax/script/scriptRequest.js"></script>
+[/head]
\ No newline at end of file
diff --git a/3-more/10-ajax/2-ajax-nodejs/article.md b/3-more/10-ajax/2-ajax-nodejs/article.md
new file mode 100644
index 00000000..1184ed57
--- /dev/null
+++ b/3-more/10-ajax/2-ajax-nodejs/article.md
@@ -0,0 +1,136 @@
+# Node.JS для решения задач
+
+В этом разделе предлагаются задачи по теме AJAX. 
+
+Конечно же, они требуют взаимодействия с сервером. Чтобы не давать преимущества ни одному из серверных языков программирования ;), мы будем использовать серверную часть, написанную на <a href="http://nodejs.org">Node.JS</a>.
+
+[cut]
+
+Если вы не использовали Node.JS ранее -- не беспокойтесь. Здесь нашей целью является преимущественно клиентская часть, поэтому прямо сейчас изучать Node.JS не обязательно. Серверные скрипты уже готовы. Нужно только поставить и добавить модулей, чтобы их запускать.
+
+
+## Установка
+
+Для настройки окружения будет достаточно сделать два шага:
+
+<ol>
+<li>Сначала установите сам сервер Node.JS.
+
+Если у вас Unix-система -- рекомендуется собрать последнюю версию из исходников, а также NPM. Вы справитесь.
+
+Если Windows -- посетите сайт <a href="http://nodejs.org">http://nodejs.org</a> или скачайте установщик (32 или 64-битный) с расширением `.msi` из <a href="http://nodejs.org/dist/latest/">http://nodejs.org/dist/latest/</a>. 
+</li>
+<li>Выберите директорию, в которой будете решать задачи. Запустите в ней:
+
+```
+npm install node-static
+```
+
+Это установит в текущую директорию модуль [node-static](https://github.com/cloudhead/node-static), который станет автоматически доступным для скриптов из поддиректорий.
+
+**Если у вас Windows и команда не сработала, то скорее всего дело в том, что "не подхватились" новые пути. Перезапустите ваш файловый менеджер или консоль.**
+</li>
+</ol>
+
+## Проверка
+
+Проверьте инсталяцию.
+
+Для этого:
+<ol>
+<li>Создайте какую-нибудь поддиректорию и в ней файл `server.js` с таким содержимым:
+
+```js
+var http = require('http');
+var static = require('node-static');
+var file = new static.Server('.');
+
+http.createServer(function (req, res) {
+  file.serve(req, res);
+}).listen(8080);
+
+console.log('Server running on port 8080');
+```
+
+</li>
+<li>Запустите его: `node server.js`.
+
+Должно вывести:
+
+```
+Server running on port 8080
+```
+
+[warn header="Нельзя запустить больше одного сервера одновременно!"]
+При попытке запуска двух серверов (например, в разных консолях) -- будет конфликт портов и ошибка.
+[/warn]
+
+</li>
+<li>Откройте в браузере <a href="http://127.0.0.1:8080/server.js">http://127.0.0.1:8080/server.js</a>.
+
+Должно вывести код файла `server.js`.</li>
+</ol>
+
+Если всё работает -- отлично, теперь вы готовы решать задачи.
+
+## Примеры
+
+В примерах, за редким исключением, для краткости будет приводиться не полный скрипт на Node.JS, а только код обработки запроса.
+
+Например, вместо:
+
+```js
+var http = require('http');
+var url = require('url');
+var querystring = require('querystring');
+
+function accept(req, res) {
+
+  res.writeHead(200, {
+    'Content-Type': 'text/plain',
+    'Cache-Control': 'no-cache'
+  });
+
+  res.end("OK");
+}
+
+http.createServer(accept).listen(8080);
+```
+
+...Будет только функция `accept`, или даже только её содержимое:
+
+```js
+res.writeHead(200, {
+  'Content-Type': 'text/plain',
+  'Cache-Control': 'no-cache'
+});
+```
+
+## Основные методы
+
+В функции `accept` используются два объекта:
+<ul>
+<li>`req` -- объект запроса ("request"), из него читаем данные.</li>
+<li>`res` -- объект ответа ("response"), в него пишем данные.
+<ul>
+<li>вызов `res.writeHead(HTTP-код, [строка статуса], {заголовки})` пишет заголовки.</li>
+<li>вызов `res.write(txt)` пишет текст в ответ.</li>
+<li>вызов `res.end(txt)` -- завершает запрос ответом.</li>
+</ul>
+</li>
+</ul>
+
+## Демо
+
+Кроме просмотра кода, можно будет попробовать и скачать различные демки. 
+
+Вот пример демо, можете попробовать нажать на кнопку -- она работает. 
+
+
+[iframe src="example" border="1" zip]
+
+Если хотите посмотреть пример поближе и поиграть с ним -- скачайте полный код, он будет работать и на вашем Node.JS.
+
+## Больше о Node.JS
+
+Больше о сервере Node.JS можно узнать в [скринкасте по Node.JS](/nodejs-screencast).
diff --git a/3-more/10-ajax/2-ajax-nodejs/example/.zip b/3-more/10-ajax/2-ajax-nodejs/example/.zip
new file mode 100755
index 00000000..e69de29b
diff --git a/3-more/10-ajax/2-ajax-nodejs/example/index.html b/3-more/10-ajax/2-ajax-nodejs/example/index.html
new file mode 100755
index 00000000..91eab08b
--- /dev/null
+++ b/3-more/10-ajax/2-ajax-nodejs/example/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+
+<button onclick="vote()" id="button">Голосовать!</button>
+
+<script>
+function vote() {
+  button.innerHTML = ' ... ';
+
+  var xhr = new XMLHttpRequest();
+
+  xhr.open('GET', 'vote', true);
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState != 4) return;
+
+    if (xhr.status != 200) {
+      // обработать ошибку
+      alert('Ошибка ' + xhr.status + ': ' + xhr.statusText);
+      return;
+    }
+
+    // обработать результат
+    button.innerHTML = xhr.responseText;
+  }
+
+  xhr.send(null);
+
+}
+</script>
+
+</body>
+</html>
diff --git a/3-more/10-ajax/2-ajax-nodejs/example/index.js b/3-more/10-ajax/2-ajax-nodejs/example/index.js
new file mode 100755
index 00000000..0161637d
--- /dev/null
+++ b/3-more/10-ajax/2-ajax-nodejs/example/index.js
@@ -0,0 +1,31 @@
+var http = require('http');
+var url = require('url');
+var querystring = require('querystring');
+var static = require('node-static');
+var file = new static.Server('.');
+
+
+function accept(req, res) {
+
+  // если URL запроса /vote, то...
+  if (req.url == '/vote') {
+    // через 1.5 секунды ответить сообщением
+    setTimeout(function() {
+      res.end('Ваш голос принят: ' + new Date());
+    }, 1500);
+  } else {
+    // иначе считаем это запросом к обычному файлу и выводим его
+    file.serve(req, res); // (если он есть)
+  }
+  
+}
+
+
+// ------ этот код запускает веб-сервер -------
+
+if (!module.parent) {
+  http.createServer(accept).listen(8080);
+} else {
+  exports.accept = accept;
+}
+
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/.zip b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/.zip
new file mode 100755
index 00000000..d3f5a12f
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/.zip
@@ -0,0 +1 @@
+
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/index.html b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/index.html
new file mode 100755
index 00000000..605c5092
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+
+<button onclick="loadPhones()" id="button">Загрузить phones.json!</button>
+
+<script>
+function loadPhones() {
+
+  var xhr = new XMLHttpRequest(); 
+    
+  xhr.open('GET', 'phones.json', true); 
+    
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState != 4) return;
+   
+    button.innerHTML = 'Готово!';
+
+    if (xhr.status != 200) {
+      // обработать ошибку
+      alert(xhr.status + ': ' + xhr.statusText);
+    } else {
+      // вывести результат
+      alert(xhr.responseText); 
+    }
+  
+  }
+
+  xhr.send(); 
+
+  button.innerHTML = 'Загружаю...';
+  button.disabled = true;
+}
+</script>
+
+</body>
+</html>
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/index.js b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/index.js
new file mode 100755
index 00000000..818ce465
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/index.js
@@ -0,0 +1,29 @@
+var http = require('http');
+var url = require('url');
+var querystring = require('querystring');
+var static = require('node-static');
+var file = new static.Server('.',  { cache: 0 });
+
+
+function accept(req, res) {
+
+  if (req.url == '/phones.json') {
+    // искусственная задержка для наглядности
+    setTimeout(function() {
+      file.serve(req, res);
+    }, 2000);
+  } else {
+    file.serve(req, res);
+  }
+  
+}
+
+
+// ------ запустить сервер -------
+
+if (!module.parent) {
+  http.createServer(accept).listen(8080);
+} else {
+  exports.accept = accept;
+}
+
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/phones.json b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/phones.json
new file mode 100755
index 00000000..472b2b16
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-async/phones.json
@@ -0,0 +1,155 @@
+[
+    {
+        "age": 0, 
+        "id": "motorola-xoom-with-wi-fi", 
+        "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
+        "name": "Motorola XOOM\u2122 with Wi-Fi", 
+        "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
+    }, 
+    {
+        "age": 1, 
+        "id": "motorola-xoom", 
+        "imageUrl": "img/phones/motorola-xoom.0.jpg", 
+        "name": "MOTOROLA XOOM\u2122", 
+        "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
+    }, 
+    {
+        "age": 2, 
+        "carrier": "AT&amp;T", 
+        "id": "motorola-atrix-4g", 
+        "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", 
+        "name": "MOTOROLA ATRIX\u2122 4G", 
+        "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
+    }, 
+    {
+        "age": 3, 
+        "id": "dell-streak-7", 
+        "imageUrl": "img/phones/dell-streak-7.0.jpg", 
+        "name": "Dell Streak 7", 
+        "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around."
+    }, 
+    {
+        "age": 4, 
+        "carrier": "Cellular South", 
+        "id": "samsung-gem", 
+        "imageUrl": "img/phones/samsung-gem.0.jpg", 
+        "name": "Samsung Gem\u2122", 
+        "snippet": "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price."
+    }, 
+    {
+        "age": 5, 
+        "carrier": "Dell", 
+        "id": "dell-venue", 
+        "imageUrl": "img/phones/dell-venue.0.jpg", 
+        "name": "Dell Venue", 
+        "snippet": "The Dell Venue; Your Personal Express Lane to Everything"
+    }, 
+    {
+        "age": 6, 
+        "carrier": "Best Buy", 
+        "id": "nexus-s", 
+        "imageUrl": "img/phones/nexus-s.0.jpg", 
+        "name": "Nexus S", 
+        "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet."
+    }, 
+    {
+        "age": 7, 
+        "carrier": "Cellular South", 
+        "id": "lg-axis", 
+        "imageUrl": "img/phones/lg-axis.0.jpg", 
+        "name": "LG Axis", 
+        "snippet": "Android Powered, Google Maps Navigation, 5 Customizable Home Screens"
+    }, 
+    {
+        "age": 8, 
+        "id": "samsung-galaxy-tab", 
+        "imageUrl": "img/phones/samsung-galaxy-tab.0.jpg", 
+        "name": "Samsung Galaxy Tab\u2122", 
+        "snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility."
+    }, 
+    {
+        "age": 9, 
+        "carrier": "Cellular South", 
+        "id": "samsung-showcase-a-galaxy-s-phone", 
+        "imageUrl": "img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg", 
+        "name": "Samsung Showcase\u2122 a Galaxy S\u2122 phone", 
+        "snippet": "The Samsung Showcase\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance, even outdoors"
+    }, 
+    {
+        "age": 10, 
+        "carrier": "Verizon", 
+        "id": "droid-2-global-by-motorola", 
+        "imageUrl": "img/phones/droid-2-global-by-motorola.0.jpg", 
+        "name": "DROID\u2122 2 Global by Motorola", 
+        "snippet": "The first smartphone with a 1.2 GHz processor and global capabilities."
+    }, 
+    {
+        "age": 11, 
+        "carrier": "Verizon", 
+        "id": "droid-pro-by-motorola", 
+        "imageUrl": "img/phones/droid-pro-by-motorola.0.jpg", 
+        "name": "DROID\u2122 Pro by Motorola", 
+        "snippet": "The next generation of DOES."
+    }, 
+    {
+        "age": 12, 
+        "carrier": "AT&amp;T", 
+        "id": "motorola-bravo-with-motoblur", 
+        "imageUrl": "img/phones/motorola-bravo-with-motoblur.0.jpg", 
+        "name": "MOTOROLA BRAVO\u2122 with MOTOBLUR\u2122", 
+        "snippet": "An experience to cheer about."
+    }, 
+    {
+        "age": 13, 
+        "carrier": "T-Mobile", 
+        "id": "motorola-defy-with-motoblur", 
+        "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", 
+        "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", 
+        "snippet": "Are you ready for everything life throws your way?"
+    }, 
+    {
+        "age": 14, 
+        "carrier": "T-Mobile", 
+        "id": "t-mobile-mytouch-4g", 
+        "imageUrl": "img/phones/t-mobile-mytouch-4g.0.jpg", 
+        "name": "T-Mobile myTouch 4G", 
+        "snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi."
+    }, 
+    {
+        "age": 15, 
+        "carrier": "US Cellular", 
+        "id": "samsung-mesmerize-a-galaxy-s-phone", 
+        "imageUrl": "img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg", 
+        "name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone", 
+        "snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors"
+    }, 
+    {
+        "age": 16, 
+        "carrier": "Sprint", 
+        "id": "sanyo-zio", 
+        "imageUrl": "img/phones/sanyo-zio.0.jpg", 
+        "name": "SANYO ZIO", 
+        "snippet": "The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value."
+    }, 
+    {
+        "age": 17, 
+        "id": "samsung-transform", 
+        "imageUrl": "img/phones/samsung-transform.0.jpg", 
+        "name": "Samsung Transform\u2122", 
+        "snippet": "The Samsung Transform\u2122 brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed \u201cSprint ID Service Pack\u201d."
+    }, 
+    {
+        "age": 18, 
+        "id": "t-mobile-g2", 
+        "imageUrl": "img/phones/t-mobile-g2.0.jpg", 
+        "name": "T-Mobile G2", 
+        "snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible."
+    }, 
+    {
+        "age": 19, 
+        "id": "motorola-charm-with-motoblur", 
+        "imageUrl": "img/phones/motorola-charm-with-motoblur.0.jpg", 
+        "name": "Motorola CHARM\u2122 with MOTOBLUR\u2122", 
+        "snippet": "Motorola CHARM fits easily in your pocket or palm.  Includes MOTOBLUR service."
+    }
+]
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/.zip b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/.zip
new file mode 100755
index 00000000..d3f5a12f
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/.zip
@@ -0,0 +1 @@
+
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/index.html b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/index.html
new file mode 100755
index 00000000..eb32f652
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+
+<button onclick="loadPhones()" id="button">Загрузить phones.json!</button>
+
+<ul id="list"></ul>
+
+<script>
+function loadPhones() {
+
+  var xhr = new XMLHttpRequest(); 
+    
+  xhr.open('GET', 'phones.json', true); 
+    
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState != 4) return;
+   
+    button.parentNode.removeChild(button);
+
+    if (xhr.status != 200) {
+      // обработать ошибку
+      alert(xhr.status + ': ' + xhr.statusText);
+    } else {
+      try {
+        var phones = JSON.parse(xhr.responseText);
+      } catch(e) {
+        alert("Некорректный ответ " + e.message);
+      }
+      showPhones(phones);
+    }
+  
+  }
+
+  xhr.send(); 
+
+  button.innerHTML = 'Загружаю...';
+  button.disabled = true;
+}
+
+function showPhones(phones) {
+
+  phones.forEach(function(phone) {
+    var li = list.appendChild(document.createElement('li'));
+    li.innerHTML = phone.name;
+  });
+
+}
+</script>
+
+</body>
+</html>
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/index.js b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/index.js
new file mode 100755
index 00000000..818ce465
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/index.js
@@ -0,0 +1,29 @@
+var http = require('http');
+var url = require('url');
+var querystring = require('querystring');
+var static = require('node-static');
+var file = new static.Server('.',  { cache: 0 });
+
+
+function accept(req, res) {
+
+  if (req.url == '/phones.json') {
+    // искусственная задержка для наглядности
+    setTimeout(function() {
+      file.serve(req, res);
+    }, 2000);
+  } else {
+    file.serve(req, res);
+  }
+  
+}
+
+
+// ------ запустить сервер -------
+
+if (!module.parent) {
+  http.createServer(accept).listen(8080);
+} else {
+  exports.accept = accept;
+}
+
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/phones.json b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/phones.json
new file mode 100755
index 00000000..472b2b16
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/phones-list/phones.json
@@ -0,0 +1,155 @@
+[
+    {
+        "age": 0, 
+        "id": "motorola-xoom-with-wi-fi", 
+        "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
+        "name": "Motorola XOOM\u2122 with Wi-Fi", 
+        "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
+    }, 
+    {
+        "age": 1, 
+        "id": "motorola-xoom", 
+        "imageUrl": "img/phones/motorola-xoom.0.jpg", 
+        "name": "MOTOROLA XOOM\u2122", 
+        "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
+    }, 
+    {
+        "age": 2, 
+        "carrier": "AT&amp;T", 
+        "id": "motorola-atrix-4g", 
+        "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", 
+        "name": "MOTOROLA ATRIX\u2122 4G", 
+        "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
+    }, 
+    {
+        "age": 3, 
+        "id": "dell-streak-7", 
+        "imageUrl": "img/phones/dell-streak-7.0.jpg", 
+        "name": "Dell Streak 7", 
+        "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around."
+    }, 
+    {
+        "age": 4, 
+        "carrier": "Cellular South", 
+        "id": "samsung-gem", 
+        "imageUrl": "img/phones/samsung-gem.0.jpg", 
+        "name": "Samsung Gem\u2122", 
+        "snippet": "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price."
+    }, 
+    {
+        "age": 5, 
+        "carrier": "Dell", 
+        "id": "dell-venue", 
+        "imageUrl": "img/phones/dell-venue.0.jpg", 
+        "name": "Dell Venue", 
+        "snippet": "The Dell Venue; Your Personal Express Lane to Everything"
+    }, 
+    {
+        "age": 6, 
+        "carrier": "Best Buy", 
+        "id": "nexus-s", 
+        "imageUrl": "img/phones/nexus-s.0.jpg", 
+        "name": "Nexus S", 
+        "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet."
+    }, 
+    {
+        "age": 7, 
+        "carrier": "Cellular South", 
+        "id": "lg-axis", 
+        "imageUrl": "img/phones/lg-axis.0.jpg", 
+        "name": "LG Axis", 
+        "snippet": "Android Powered, Google Maps Navigation, 5 Customizable Home Screens"
+    }, 
+    {
+        "age": 8, 
+        "id": "samsung-galaxy-tab", 
+        "imageUrl": "img/phones/samsung-galaxy-tab.0.jpg", 
+        "name": "Samsung Galaxy Tab\u2122", 
+        "snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility."
+    }, 
+    {
+        "age": 9, 
+        "carrier": "Cellular South", 
+        "id": "samsung-showcase-a-galaxy-s-phone", 
+        "imageUrl": "img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg", 
+        "name": "Samsung Showcase\u2122 a Galaxy S\u2122 phone", 
+        "snippet": "The Samsung Showcase\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance, even outdoors"
+    }, 
+    {
+        "age": 10, 
+        "carrier": "Verizon", 
+        "id": "droid-2-global-by-motorola", 
+        "imageUrl": "img/phones/droid-2-global-by-motorola.0.jpg", 
+        "name": "DROID\u2122 2 Global by Motorola", 
+        "snippet": "The first smartphone with a 1.2 GHz processor and global capabilities."
+    }, 
+    {
+        "age": 11, 
+        "carrier": "Verizon", 
+        "id": "droid-pro-by-motorola", 
+        "imageUrl": "img/phones/droid-pro-by-motorola.0.jpg", 
+        "name": "DROID\u2122 Pro by Motorola", 
+        "snippet": "The next generation of DOES."
+    }, 
+    {
+        "age": 12, 
+        "carrier": "AT&amp;T", 
+        "id": "motorola-bravo-with-motoblur", 
+        "imageUrl": "img/phones/motorola-bravo-with-motoblur.0.jpg", 
+        "name": "MOTOROLA BRAVO\u2122 with MOTOBLUR\u2122", 
+        "snippet": "An experience to cheer about."
+    }, 
+    {
+        "age": 13, 
+        "carrier": "T-Mobile", 
+        "id": "motorola-defy-with-motoblur", 
+        "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", 
+        "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", 
+        "snippet": "Are you ready for everything life throws your way?"
+    }, 
+    {
+        "age": 14, 
+        "carrier": "T-Mobile", 
+        "id": "t-mobile-mytouch-4g", 
+        "imageUrl": "img/phones/t-mobile-mytouch-4g.0.jpg", 
+        "name": "T-Mobile myTouch 4G", 
+        "snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi."
+    }, 
+    {
+        "age": 15, 
+        "carrier": "US Cellular", 
+        "id": "samsung-mesmerize-a-galaxy-s-phone", 
+        "imageUrl": "img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg", 
+        "name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone", 
+        "snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors"
+    }, 
+    {
+        "age": 16, 
+        "carrier": "Sprint", 
+        "id": "sanyo-zio", 
+        "imageUrl": "img/phones/sanyo-zio.0.jpg", 
+        "name": "SANYO ZIO", 
+        "snippet": "The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value."
+    }, 
+    {
+        "age": 17, 
+        "id": "samsung-transform", 
+        "imageUrl": "img/phones/samsung-transform.0.jpg", 
+        "name": "Samsung Transform\u2122", 
+        "snippet": "The Samsung Transform\u2122 brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed \u201cSprint ID Service Pack\u201d."
+    }, 
+    {
+        "age": 18, 
+        "id": "t-mobile-g2", 
+        "imageUrl": "img/phones/t-mobile-g2.0.jpg", 
+        "name": "T-Mobile G2", 
+        "snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible."
+    }, 
+    {
+        "age": 19, 
+        "id": "motorola-charm-with-motoblur", 
+        "imageUrl": "img/phones/motorola-charm-with-motoblur.0.jpg", 
+        "name": "Motorola CHARM\u2122 with MOTOBLUR\u2122", 
+        "snippet": "Motorola CHARM fits easily in your pocket or palm.  Includes MOTOBLUR service."
+    }
+]
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/solution.md b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/solution.md
new file mode 100644
index 00000000..4bb95319
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/solution.md
@@ -0,0 +1,54 @@
+Код для загрузки и вывода телефонов:
+
+```js
+function loadPhones() {
+
+  var xhr = new XMLHttpRequest(); 
+    
+  xhr.open('GET', 'phones.json', true); 
+    
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState != 4) return;
+   
+    button.parentNode.removeChild(button);
+
+    if (xhr.status != 200) {
+      // обработать ошибку
+      alert(xhr.status + ': ' + xhr.statusText);
+    } else {
+*!*
+      try {
+        var phones = JSON.parse(xhr.responseText);
+      } catch(e) {
+        alert("Некорректный ответ " + e.message);
+      }
+      showPhones(phones);
+*/!*
+    }
+  
+  }
+
+  xhr.send(""); 
+
+  button.innerHTML = 'Загружаю...';
+  button.disabled = true;
+}
+
+*!*
+function showPhones(phones) {
+
+  phones.forEach(function(phone) {
+    var li = list.appendChild(document.createElement('li'));
+    li.innerHTML = phone.name;
+  });
+
+}
+*/!*
+```
+
+Полное решение с возможнотью скачать:
+[iframe src="phones-list" height="100" border="1" zip]
+
+Обратите внимание -- код обрабатывает возможную ошибку при чтении JSON при помощи `try..catch`. 
+
+Технически, это такая же ошибка, как и `status != 200`, так как сервер обязан присылать корректный JSON, поэтому если уж обрабатываем ошибки запроса, то и её тоже.
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/task.md b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/task.md
new file mode 100644
index 00000000..5a0422fa
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/1-phones-list/task.md
@@ -0,0 +1,13 @@
+# Выведите телефоны
+
+[importance 5]
+
+Создайте код, который загрузит файл `phones.json` из текущей директории и выведет все названия телефонов из него в виде списка.
+
+Демо результата:
+[iframe src="phones-list" height="100" border="1"]
+
+
+Исходный код просто выводит содержимое файла (скачайте к себе):
+[iframe src="phones-async" border="1" zip]
+
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/2-request-with-auth/solution.md b/3-more/10-ajax/3-ajax-xmlhttprequest/2-request-with-auth/solution.md
new file mode 100644
index 00000000..23ca3e88
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/2-request-with-auth/solution.md
@@ -0,0 +1 @@
+Решение: <a href="/zip/tutorial/ajax/xhr/get.zip">get.zip</a>
\ No newline at end of file
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/2-request-with-auth/task.md b/3-more/10-ajax/3-ajax-xmlhttprequest/2-request-with-auth/task.md
new file mode 100644
index 00000000..25395567
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/2-request-with-auth/task.md
@@ -0,0 +1,15 @@
+# Запрос с авторизацией
+
+[importance 5]
+
+Создайте функцию `get(url, password)`, которая отправляет GET-запрос на `url` и передаёт `password` в качестве значения HTTP-заголовка `Authorization`.
+
+Она должна выводить `responseText`. Если же сервер вернул ошибку -- то выводить "Ошибка" и добавлять информацию из `status` и `statusText`.
+
+Примеры ошибок:
+<ul>
+<li>404 -- неправильный `url`.</li>
+<li>403 -- отсутствует или неверен заголовок `Authorization`.</li>
+</ul>
+
+Заготовку вы можете скачать здесь: <a href="/zip/tutorial/ajax/xhr/get-src.zip">get-src.zip</a>. Серверный код написан так, что возвращает успешный результат при запросе на адрес `'info'` с паролем `'password'`. 
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/article.md b/3-more/10-ajax/3-ajax-xmlhttprequest/article.md
new file mode 100644
index 00000000..2dcf7f20
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/article.md
@@ -0,0 +1,426 @@
+# Основы XMLHttpRequest
+
+Объект `XMLHttpRequest` (или, как его кратко называют, "XHR") дает возможность из JavaScript делать HTTP-запросы к серверу без перезагрузки страницы.
+
+Несмотря на слово "XML" в названии, `XMLHttpRequest` может работать с любыми данными, а не только с XML.
+
+Использовать его очень просто.
+
+[cut]
+
+## Пример использования
+
+Как правило, `XMLHttpRequest` используют для загрузки данных. 
+
+Разберём его на примере ниже, в котором JavaScript осуществит загрузку файла `phones.json` и вывод содержимого:
+
+[iframe src="phones" border="1" zip]
+
+Код, который выполняется при нажатии на кнопку, по шагам:
+
+```js
+*!*
+// 1. Создаём новый объект XMLHttpRequest
+*/!*
+var xhr = new XMLHttpRequest(); 
+
+*!*
+// 2. Конфигурируем его: GET-запрос на URL 'phones.json'
+xhr.open('GET', 'phones.json', false); 
+*/!*
+
+*!*
+// 3. Отсылаем запрос
+*/!*
+xhr.send(); 
+
+*!*
+// 4. Если код ответа сервера не 200, то это ошибка
+*/!*
+if (xhr.status != 200) {
+  // обработать ошибку
+  alert(xhr.status + ': ' + xhr.statusText); // пример вывода: 404: Not Found 
+} else {
+  // вывести результат
+  alert(xhr.responseText); // responseText -- текст ответа.
+}
+```
+
+Далее мы более подробно разберём основные методы и свойства `xhr`.
+
+## Методы open, send и abort
+
+Эти три метода управляют основным потоком запроса:
+
+<dl>
+<dt>`open(method, URL, async, user, password)`</dt>
+<dd>
+Задаёт основные параметры запроса:
+<ul>
+<li>`method` -- HTTP-метод. Как правило, используется GET либо POST, хотя доступны и более экзотические, вроде TRACE/DELETE/PUT и т.п.</li>
+<li>`URL` -- адрес запроса. Можно использовать не только http/https, но и другие протоколы, например `ftp://` и `file://`.
+
+**При этом есть ограничения безопасности, называемые "Same Origin Policy": запрос со страницы можно отправлять только на тот же `протокол://домен:порт`, с которого она пришла. В следующих главах мы рассмотрим, как их можно обойти.**
+</li>
+<li>`async` -- если установлено в `false`, то запрос производится синхронно, если `true` -- асинхронно.
+
+"Синхронный запрос" означает, что после вызова `xhr.send()` и до ответа сервера главный поток будет "заморожен": посетитель не сможет взаимодействовать со страницей -- прокручивать, нажимать на кнопки и т.п. После получения ответа выполнение продолжится со следующей строки.
+
+"Асинхронный запрос" означает, что браузер отправит запрос, а далее результат нужно будет получить через обработчики событий, которые мы рассмотрим далее.
+</li>
+<li>`user`, `password` -- логин и пароль для HTTP-авторизации, если нужны.</li>
+</ul>
+
+</dd>
+<dt>`send([body])`</dt>
+<dd>Отправить запрос на сервер.
+
+В `body` находится *тело* запроса. Не у всякого запроса есть тело, например у GET-запросов тела нет.
+
+С другой стороны, в POST основные данные как раз передаются через `body`.</dd>
+<dt>`abort()`</dt>
+<dd>Прерывает выполнение запроса.</dd>
+</dl>
+
+## Свойства status, statusText, responseText и responseXML
+
+Основные свойства, содержащие ответ сервера:
+
+<dl>
+<dt>`status`</dt>
+<dd>HTTP-код ответа: `200`, `404`, `403` и так далее. Может быть также равен `0`, если сервер не ответил или при запросе на другой домен.</dd>
+<dt>`statusText`</dt>
+<dd>Текстовое описание статуса от сервера: `OK` `Not Found`, `Forbidden` и так далее.</dd>
+<dt>`responseText`</dt>
+<dd>Ответ сервера в виде текста.</dd>
+<dt>`responseXml`</dt>
+<dd>Если сервер вернул XML, снабдив его правильным заголовком `Content-type: text/xml`, то браузер создаст из него XML-документ. По нему можно будет делать запросы `xhr.responseXml.querySelector("...")` и другие.
+
+Как правило, при общении с сервером используют не XML, а JSON. То есть, сервер возвращает JSON в виде текста, который  браузер превращает в объект вызовом `JSON.parse(xhr.responseText)`.
+</dd>
+</dl>
+
+
+## Асинхронный вызов
+
+Синхронные вызовы имеют ряд важных отличий от асинхронных:
+
+<ul>
+<li>Блокируют взаимодействие со страницей до окончания загрузки. Посетитель не может даже прокручивать её.</li>
+<li>Если синхронный вызов занял слишком много времени, то браузер предложит закрыть "зависшую" страницу.</li>
+<li>Кроме того, забегая вперёд, заметим, что ряд продвинутых возможностей, таких как возможность делать запросы на другой домен и указывать таймаут, в синхронном режиме не работают.</li>
+</ul>
+
+**Поэтому, как правило, используют асинхронные вызовы.**
+
+Для того, чтобы запрос стал асинхронным, укажем параметр `async` равным `true`.
+
+Демо:
+
+[iframe src="phones-async" border zip]
+
+JS-код изменился:
+
+```js
+var xhr = new XMLHttpRequest();
+
+xhr.open('GET', 'phones.json', *!*true*/!*);
+
+*!*
+xhr.onreadystatechange = function() { // (3)
+  if (xhr.readyState != 4) return;
+*/!*
+
+  button.innerHTML = 'Готово!';
+
+  if (xhr.status != 200) {
+    alert(xhr.status + ': ' + xhr.statusText);
+  } else {
+    alert(xhr.responseText);
+  }
+
+}
+
+xhr.send(); // (1)
+
+button.innerHTML = 'Загружаю...'; // (2)
+button.disabled = true;
+```
+
+Теперь мы отправляем запрос асинхронно: 
+<ol>
+<li>JavaScript продолжает выполнение после `xhr.send()`.</li>
+<li>Для того, чтобы показать, что задача "в процессе" -- мы меняем текст кнопки `button`.</li>
+<li>Скрипт завершается, страница полностью активна, а ответ, когда он появится, вызовет обработчик `onreadystatechange`.</li>
+</ol>
+
+**Событие `readystatechange` происходит несколько раз в процессе отсылки и получения ответа. При этом можно посмотреть "текущее состояние запроса" в свойстве `xhr.readyState`.**
+
+Все состояния, по [спецификации](http://www.w3.org/TR/XMLHttpRequest/#states):
+
+```js
+const unsigned short UNSENT = 0; // начальное состояние
+const unsigned short OPENED = 1; // вызван open
+const unsigned short HEADERS_RECEIVED = 2; // получены заголовки
+const unsigned short LOADING = 3; // загружается тело (получен очередной пакет данных)
+const unsigned short DONE = 4; // запрос завершён
+```
+
+Запрос проходит их в порядке `0` -> `1` -> `2` -> `3` -> ... -> `3` -> `4`, состояние `3` повторяется при каждом получении очередного пакета данных по сети.
+
+В данном случае нас интересует состояние `4` (запрос завершён).
+
+Пример ниже демонстрирует переключение между состояниями. В нём сервер отвечает на запрос `digits`, пересылая по строке из 1000 цифр раз в секунду.
+
+[iframe src="readystate" height=200 border zip]
+
+[warn header="Точка разрыва не гарантирована"]
+При `readyState=3` мы можем посмотреть текущие данные в `responseText` и, казалось бы, могли бы работать с этими данными как с "ответом на текущий момент".
+
+Однако, технически мы не управляем разрывами между сетевыми пакетами. Если протестировать пример выше в локальной сети, то в большинстве браузеров разрывы будут каждые 1000 символов, но в реальности событие может возникнуть на любом байте. 
+
+Вплоть до того, что символ русского языка в кодировке UTF-16 кодируется двумя байтами -- и разрыв может возникнуть *между ними*. 
+
+Получится, что при очередном `readyState` в конце `responseText` будет байт-полсимвола, то есть он не будет корректной строкой -- частью ответа! Если скрипт будет предполагать, что это -- полноценная часть ответа, то неизбежны глюки.
+[/warn]
+
+
+## HTTP-заголовки, методы *RequestHeader
+
+`XMLHttpRequest` умеет как указывать свои заголовки в запросе, так и читать присланные в ответ.
+
+Для работы с HTTP-заголовками есть 3 метода:
+
+<dl>
+<dt>`setRequestHeader(name, value)`</dt>
+<dd>Устанавливает заголовок `name` запроса со значением `value`. 
+
+Например:
+
+```js
+xhr.setRequestHeader('Content-Type', 'application/json');
+```
+
+[warn header="Ограничения на заголовки"]
+Нельзя установить заголовки, которые контролирует браузер, например `Referer` или `Host` и ряд других (полный список [тут](http://www.w3.org/TR/XMLHttpRequest/#the-setrequestheader-method)). 
+
+Это ограничение существует в целях безопасности и для контроля корректности запроса. 
+[/warn]
+
+[warn header="Поставленный заголовок нельзя снять"]
+Особенностью `XMLHttpRequest` является то, что отменить `setRequestHeader` невозможно.
+
+Повторные вызовы добавляют информацию к заголовку:
+
+```js
+xhr.setRequestHeader('X-Auth', '123');
+xhr.setRequestHeader('X-Auth', '456');
+
+// в результате будет заголовок:
+// X-Auth: 123, 456
+```
+
+[/warn]
+
+</dd>
+<dt>`getResponseHeader(name)`</dt>
+<dd>Возвращает значение заголовка ответа `name`, кроме `Set-Cookie` и `Set-Cookie2`.
+
+Например:
+
+```js
+xhr.getResponseHeader('Content-Type')
+```
+
+</dd>
+<dt>`getAllResponseHeaders()`</dt>
+<dd>Возвращает все заголовки ответа, кроме `Set-Cookie` и `Set-Cookie2`.
+
+Заголовки возвращаются в виде единой строки, например:
+
+```
+Cache-Control: max-age=31536000
+Content-Length: 4260
+Content-Type: image/png
+Date: Sat, 08 Sep 2012 16:53:16 GMT
+```
+
+Между заголовками стоит перевод строки в два символа `"\r\n"` (не зависит от ОС), значение заголовка отделено двоеточием с пробелом `": "`. Этот формат задан стандартом.
+
+Таким образом, если хочется получить объект с парами заголовок-значение, то эту строку необходимо разбить и обработать.
+</dd>
+</dl>
+
+
+## Таймаут: свойство и событие timeout
+
+Максимальную продолжительность запроса можно задать свойством `timeout`:
+
+```js
+xhr.timeout = 30000; // 30 секунд (в миллисекундах)
+```
+
+При превышении этого времени запрос будет оборван и сгенерировано событие `ontimeout`:
+
+```js
+xhr.ontimeout = function() {
+  alert('Извините, запрос превысил максимальное время');
+}
+```
+
+## Полный список событий загрузки
+
+Современная [спецификация](http://www.w3.org/TR/XMLHttpRequest/#events) предусматривает следующие события:
+
+<ul>
+<li>`loadstart` -- запрос начат.</li>
+<li>`progress` -- браузер получил очередной пакет данных, можно прочитать текущие полученные данные в `responseText`.</li>
+<li>`abort` -- запрос был отменён вызовом `xhr.abort()`.</li>
+<li>`error` -- произошла ошибка.</li>
+<li>`load` -- запрос был успешно (без ошибок) завершён.</li>
+<li>`timeout` -- запрос был прекращён по таймауту.</li>
+<li>`loadend` -- запрос был завершён (успешно или неуспешно)</li
+</ul>
+
+Используя эти события можно более удобно отслеживать загрузку (`onload`) и ошибку (`onerror`), а также количество загруженных данных (`onprogress`).
+
+Также поддерживается событие `readystatechange`, которое было описано ранее. Оно появилось гораздо раньше, ещё до появления текущего стандарта. От него можно отказаться в пользу современных событий, если учесть особенности IE8-9 (см. далее). 
+
+## Особенности IE8,9: XDomainRequest
+
+В IE8 и IE9 поддержка `XMLHttpRequest` ограничена:
+
+<ul>
+<li>Не поддерживаются события, кроме `onreadystatechange`.</li>
+<li>Некорректно поддерживается состояние `readyState = 3`: браузер может сгенерировать его только один раз во время запроса, а не при каждом пакете данных. Кроме того, он не даёт доступ к ответу `responseText` до того, как он будет до конца получен.</li>
+</ul>
+
+Дело в том, что, когда создавались эти браузеры, спецификации были не до конца проработаны. Поэтому разработчики браузера решили добавить свой объект [XDomainRequest](/xhr-crossdomain) (только IE!), который реализовывал часть возможностей современного стандарта.
+
+А обычный `XMLHttpRequest` решили не трогать, чтобы ненароком не сломать существующий код.
+
+**Для того, чтобы получить некоторые из современных возможностей, вместо `new XMLHttpRequest()` пишем `new XDomainRequest`.**
+
+Если кросс-браузерно:
+
+```js
+var XHR = window.XDomainRequest || XMLHttpRequest;
+var xhr = new XHR();
+```
+
+Теперь в IE8,9 поддерживаются события `onload`, `onerror` и `onprogress`.
+
+**Ещё одна деталь: IE9- по умолчанию кеширует ответы, не снабжённые антикеш-заголовком. Другие браузеры этого не делают.**
+
+**Чтобы этого избежать, сервер должен добавить в ответ соответствующие антикеш-заголовки, например `Cache-Control: no-cache`.** 
+
+По правде говоря, использовать заголовки типа `Expires`, `Last-Modified` и `Cache-Control` рекомендуется в любом случае, чтобы дать понять браузеру (не обязательно IE), что ему следует делать.
+
+**Альтернативный вариант -- добавить в URL запроса случайный параметр, предотвращающий кеширование.**
+
+Например, вместо `xhr.open('GET', 'service', false)` написать:
+
+```js
+xhr.open('GET', '*!*'service?r=' + Math.random()*/!*, false);
+```
+
+По историческим причинам такой способ предотвращения кеширования можно увидеть много где, так как старые браузеры плохо обрабатывали кеширующие заголовки. Сейчас серверные заголовки поддерживаются хорошо.
+
+## Итого
+
+Типовой код для GET-запроса при помощи `XMLHttpRequest`:
+
+```js
+var xhr = new XMLHttpRequest();
+
+xhr.open('GET', '/my/url', true);
+
+xhr.onreadystatechange = function() {
+  if (this.readyState != 4) return;
+
+  // по окончании запроса доступны:
+  // status, statusText
+  // responseText, responseXML (при content-type: text/xml)
+
+  if (this.status != 200) {
+    // обработать ошибку
+    alert('ошибка: ' + (this.status ? this.statusText || 'запрос не удался') );
+    return;
+  }
+
+  // получить результат из this.responseText или this.responseXML
+}
+
+xhr.send();
+```
+
+Методы:
+
+<ul>
+<li>`open(method, url, async, user, password)`</li>
+<li>`send(body)`</li>
+<li>`abort()`</li>
+<li>`setRequestHeader(name, value)`</li>
+<li>`getResponseHeader(name)`</li>
+<li>`getAllResponseHeaders()`</li>
+</ul>
+
+Свойства:
+
+<ul>
+<li>`timeout`</li>
+<li>`responseText`</li>
+<li>`responseXML`</li>
+<li>`status`</li>
+<li>`statusText`</li>
+</ul>
+
+События:
+
+<ul>
+<li>`onreadystatechange`</li>
+<li>`ontimeout`</li>
+<li>`onerror`</li>
+<li>`onload`</li>
+<li>`onprogress`</li>
+<li>`onabort`</li>
+<li>`onloadstart`</li>
+<li>`onloadend`</li>
+</ul>
+
+
+[head]
+<style>
+.log-div {
+  width: 600px;
+  overflow: auto;
+}
+</style>
+<script>
+function voteSync(outputElem) {
+  var xhr = new XMLHttpRequest(); // (1)
+
+  outputElem.innerHTML = '...';
+
+  xhr.open('GET', '/files/tutorial/ajax/xhr/vote', false); 
+  xhr.send(null);   // (2)
+
+  outputElem.innerHTML = xhr.responseText;  // (3)
+}
+
+function vote(outputElem) {
+  var xhr = new XMLHttpRequest();
+
+  xhr.open('GET', '/files/tutorial/ajax/xhr/vote', true);
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState != 4) return;
+    outputElem.innerHTML = xhr.responseText;
+  }
+
+
+  outputElem.innerHTML = '...';
+  xhr.send(null);
+}
+</script>
+[/head]
\ No newline at end of file
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/.zip b/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/.zip
new file mode 100755
index 00000000..d3f5a12f
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/.zip
@@ -0,0 +1 @@
+
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/index.html b/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/index.html
new file mode 100755
index 00000000..605c5092
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+
+<button onclick="loadPhones()" id="button">Загрузить phones.json!</button>
+
+<script>
+function loadPhones() {
+
+  var xhr = new XMLHttpRequest(); 
+    
+  xhr.open('GET', 'phones.json', true); 
+    
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState != 4) return;
+   
+    button.innerHTML = 'Готово!';
+
+    if (xhr.status != 200) {
+      // обработать ошибку
+      alert(xhr.status + ': ' + xhr.statusText);
+    } else {
+      // вывести результат
+      alert(xhr.responseText); 
+    }
+  
+  }
+
+  xhr.send(); 
+
+  button.innerHTML = 'Загружаю...';
+  button.disabled = true;
+}
+</script>
+
+</body>
+</html>
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/index.js b/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/index.js
new file mode 100755
index 00000000..818ce465
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/index.js
@@ -0,0 +1,29 @@
+var http = require('http');
+var url = require('url');
+var querystring = require('querystring');
+var static = require('node-static');
+var file = new static.Server('.',  { cache: 0 });
+
+
+function accept(req, res) {
+
+  if (req.url == '/phones.json') {
+    // искусственная задержка для наглядности
+    setTimeout(function() {
+      file.serve(req, res);
+    }, 2000);
+  } else {
+    file.serve(req, res);
+  }
+  
+}
+
+
+// ------ запустить сервер -------
+
+if (!module.parent) {
+  http.createServer(accept).listen(8080);
+} else {
+  exports.accept = accept;
+}
+
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/phones.json b/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/phones.json
new file mode 100755
index 00000000..472b2b16
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/phones-async/phones.json
@@ -0,0 +1,155 @@
+[
+    {
+        "age": 0, 
+        "id": "motorola-xoom-with-wi-fi", 
+        "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
+        "name": "Motorola XOOM\u2122 with Wi-Fi", 
+        "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
+    }, 
+    {
+        "age": 1, 
+        "id": "motorola-xoom", 
+        "imageUrl": "img/phones/motorola-xoom.0.jpg", 
+        "name": "MOTOROLA XOOM\u2122", 
+        "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
+    }, 
+    {
+        "age": 2, 
+        "carrier": "AT&amp;T", 
+        "id": "motorola-atrix-4g", 
+        "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", 
+        "name": "MOTOROLA ATRIX\u2122 4G", 
+        "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
+    }, 
+    {
+        "age": 3, 
+        "id": "dell-streak-7", 
+        "imageUrl": "img/phones/dell-streak-7.0.jpg", 
+        "name": "Dell Streak 7", 
+        "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around."
+    }, 
+    {
+        "age": 4, 
+        "carrier": "Cellular South", 
+        "id": "samsung-gem", 
+        "imageUrl": "img/phones/samsung-gem.0.jpg", 
+        "name": "Samsung Gem\u2122", 
+        "snippet": "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price."
+    }, 
+    {
+        "age": 5, 
+        "carrier": "Dell", 
+        "id": "dell-venue", 
+        "imageUrl": "img/phones/dell-venue.0.jpg", 
+        "name": "Dell Venue", 
+        "snippet": "The Dell Venue; Your Personal Express Lane to Everything"
+    }, 
+    {
+        "age": 6, 
+        "carrier": "Best Buy", 
+        "id": "nexus-s", 
+        "imageUrl": "img/phones/nexus-s.0.jpg", 
+        "name": "Nexus S", 
+        "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet."
+    }, 
+    {
+        "age": 7, 
+        "carrier": "Cellular South", 
+        "id": "lg-axis", 
+        "imageUrl": "img/phones/lg-axis.0.jpg", 
+        "name": "LG Axis", 
+        "snippet": "Android Powered, Google Maps Navigation, 5 Customizable Home Screens"
+    }, 
+    {
+        "age": 8, 
+        "id": "samsung-galaxy-tab", 
+        "imageUrl": "img/phones/samsung-galaxy-tab.0.jpg", 
+        "name": "Samsung Galaxy Tab\u2122", 
+        "snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility."
+    }, 
+    {
+        "age": 9, 
+        "carrier": "Cellular South", 
+        "id": "samsung-showcase-a-galaxy-s-phone", 
+        "imageUrl": "img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg", 
+        "name": "Samsung Showcase\u2122 a Galaxy S\u2122 phone", 
+        "snippet": "The Samsung Showcase\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance, even outdoors"
+    }, 
+    {
+        "age": 10, 
+        "carrier": "Verizon", 
+        "id": "droid-2-global-by-motorola", 
+        "imageUrl": "img/phones/droid-2-global-by-motorola.0.jpg", 
+        "name": "DROID\u2122 2 Global by Motorola", 
+        "snippet": "The first smartphone with a 1.2 GHz processor and global capabilities."
+    }, 
+    {
+        "age": 11, 
+        "carrier": "Verizon", 
+        "id": "droid-pro-by-motorola", 
+        "imageUrl": "img/phones/droid-pro-by-motorola.0.jpg", 
+        "name": "DROID\u2122 Pro by Motorola", 
+        "snippet": "The next generation of DOES."
+    }, 
+    {
+        "age": 12, 
+        "carrier": "AT&amp;T", 
+        "id": "motorola-bravo-with-motoblur", 
+        "imageUrl": "img/phones/motorola-bravo-with-motoblur.0.jpg", 
+        "name": "MOTOROLA BRAVO\u2122 with MOTOBLUR\u2122", 
+        "snippet": "An experience to cheer about."
+    }, 
+    {
+        "age": 13, 
+        "carrier": "T-Mobile", 
+        "id": "motorola-defy-with-motoblur", 
+        "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", 
+        "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", 
+        "snippet": "Are you ready for everything life throws your way?"
+    }, 
+    {
+        "age": 14, 
+        "carrier": "T-Mobile", 
+        "id": "t-mobile-mytouch-4g", 
+        "imageUrl": "img/phones/t-mobile-mytouch-4g.0.jpg", 
+        "name": "T-Mobile myTouch 4G", 
+        "snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi."
+    }, 
+    {
+        "age": 15, 
+        "carrier": "US Cellular", 
+        "id": "samsung-mesmerize-a-galaxy-s-phone", 
+        "imageUrl": "img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg", 
+        "name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone", 
+        "snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors"
+    }, 
+    {
+        "age": 16, 
+        "carrier": "Sprint", 
+        "id": "sanyo-zio", 
+        "imageUrl": "img/phones/sanyo-zio.0.jpg", 
+        "name": "SANYO ZIO", 
+        "snippet": "The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value."
+    }, 
+    {
+        "age": 17, 
+        "id": "samsung-transform", 
+        "imageUrl": "img/phones/samsung-transform.0.jpg", 
+        "name": "Samsung Transform\u2122", 
+        "snippet": "The Samsung Transform\u2122 brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed \u201cSprint ID Service Pack\u201d."
+    }, 
+    {
+        "age": 18, 
+        "id": "t-mobile-g2", 
+        "imageUrl": "img/phones/t-mobile-g2.0.jpg", 
+        "name": "T-Mobile G2", 
+        "snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible."
+    }, 
+    {
+        "age": 19, 
+        "id": "motorola-charm-with-motoblur", 
+        "imageUrl": "img/phones/motorola-charm-with-motoblur.0.jpg", 
+        "name": "Motorola CHARM\u2122 with MOTOBLUR\u2122", 
+        "snippet": "Motorola CHARM fits easily in your pocket or palm.  Includes MOTOBLUR service."
+    }
+]
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/phones/.zip b/3-more/10-ajax/3-ajax-xmlhttprequest/phones/.zip
new file mode 100755
index 00000000..d3f5a12f
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/phones/.zip
@@ -0,0 +1 @@
+
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/phones/index.html b/3-more/10-ajax/3-ajax-xmlhttprequest/phones/index.html
new file mode 100755
index 00000000..6d60bc59
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/phones/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+
+<button onclick="loadPhones()">Загрузить phones.json!</button>
+
+<script>
+function loadPhones() {
+  var xhr = new XMLHttpRequest(); 
+
+  xhr.open('GET', 'phones.json', false); 
+  xhr.send(); 
+
+  if (xhr.status != 200) {
+    // обработать ошибку
+    alert('Ошибка ' + xhr.status + ': ' + xhr.statusText);
+  } else {
+    // вывести результат
+    alert(xhr.responseText); 
+  }
+}
+</script>
+
+</body>
+</html>
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/phones/index.js b/3-more/10-ajax/3-ajax-xmlhttprequest/phones/index.js
new file mode 100755
index 00000000..818ce465
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/phones/index.js
@@ -0,0 +1,29 @@
+var http = require('http');
+var url = require('url');
+var querystring = require('querystring');
+var static = require('node-static');
+var file = new static.Server('.',  { cache: 0 });
+
+
+function accept(req, res) {
+
+  if (req.url == '/phones.json') {
+    // искусственная задержка для наглядности
+    setTimeout(function() {
+      file.serve(req, res);
+    }, 2000);
+  } else {
+    file.serve(req, res);
+  }
+  
+}
+
+
+// ------ запустить сервер -------
+
+if (!module.parent) {
+  http.createServer(accept).listen(8080);
+} else {
+  exports.accept = accept;
+}
+
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/phones/phones.json b/3-more/10-ajax/3-ajax-xmlhttprequest/phones/phones.json
new file mode 100755
index 00000000..472b2b16
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/phones/phones.json
@@ -0,0 +1,155 @@
+[
+    {
+        "age": 0, 
+        "id": "motorola-xoom-with-wi-fi", 
+        "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
+        "name": "Motorola XOOM\u2122 with Wi-Fi", 
+        "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
+    }, 
+    {
+        "age": 1, 
+        "id": "motorola-xoom", 
+        "imageUrl": "img/phones/motorola-xoom.0.jpg", 
+        "name": "MOTOROLA XOOM\u2122", 
+        "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
+    }, 
+    {
+        "age": 2, 
+        "carrier": "AT&amp;T", 
+        "id": "motorola-atrix-4g", 
+        "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", 
+        "name": "MOTOROLA ATRIX\u2122 4G", 
+        "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
+    }, 
+    {
+        "age": 3, 
+        "id": "dell-streak-7", 
+        "imageUrl": "img/phones/dell-streak-7.0.jpg", 
+        "name": "Dell Streak 7", 
+        "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around."
+    }, 
+    {
+        "age": 4, 
+        "carrier": "Cellular South", 
+        "id": "samsung-gem", 
+        "imageUrl": "img/phones/samsung-gem.0.jpg", 
+        "name": "Samsung Gem\u2122", 
+        "snippet": "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price."
+    }, 
+    {
+        "age": 5, 
+        "carrier": "Dell", 
+        "id": "dell-venue", 
+        "imageUrl": "img/phones/dell-venue.0.jpg", 
+        "name": "Dell Venue", 
+        "snippet": "The Dell Venue; Your Personal Express Lane to Everything"
+    }, 
+    {
+        "age": 6, 
+        "carrier": "Best Buy", 
+        "id": "nexus-s", 
+        "imageUrl": "img/phones/nexus-s.0.jpg", 
+        "name": "Nexus S", 
+        "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet."
+    }, 
+    {
+        "age": 7, 
+        "carrier": "Cellular South", 
+        "id": "lg-axis", 
+        "imageUrl": "img/phones/lg-axis.0.jpg", 
+        "name": "LG Axis", 
+        "snippet": "Android Powered, Google Maps Navigation, 5 Customizable Home Screens"
+    }, 
+    {
+        "age": 8, 
+        "id": "samsung-galaxy-tab", 
+        "imageUrl": "img/phones/samsung-galaxy-tab.0.jpg", 
+        "name": "Samsung Galaxy Tab\u2122", 
+        "snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility."
+    }, 
+    {
+        "age": 9, 
+        "carrier": "Cellular South", 
+        "id": "samsung-showcase-a-galaxy-s-phone", 
+        "imageUrl": "img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg", 
+        "name": "Samsung Showcase\u2122 a Galaxy S\u2122 phone", 
+        "snippet": "The Samsung Showcase\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance, even outdoors"
+    }, 
+    {
+        "age": 10, 
+        "carrier": "Verizon", 
+        "id": "droid-2-global-by-motorola", 
+        "imageUrl": "img/phones/droid-2-global-by-motorola.0.jpg", 
+        "name": "DROID\u2122 2 Global by Motorola", 
+        "snippet": "The first smartphone with a 1.2 GHz processor and global capabilities."
+    }, 
+    {
+        "age": 11, 
+        "carrier": "Verizon", 
+        "id": "droid-pro-by-motorola", 
+        "imageUrl": "img/phones/droid-pro-by-motorola.0.jpg", 
+        "name": "DROID\u2122 Pro by Motorola", 
+        "snippet": "The next generation of DOES."
+    }, 
+    {
+        "age": 12, 
+        "carrier": "AT&amp;T", 
+        "id": "motorola-bravo-with-motoblur", 
+        "imageUrl": "img/phones/motorola-bravo-with-motoblur.0.jpg", 
+        "name": "MOTOROLA BRAVO\u2122 with MOTOBLUR\u2122", 
+        "snippet": "An experience to cheer about."
+    }, 
+    {
+        "age": 13, 
+        "carrier": "T-Mobile", 
+        "id": "motorola-defy-with-motoblur", 
+        "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", 
+        "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", 
+        "snippet": "Are you ready for everything life throws your way?"
+    }, 
+    {
+        "age": 14, 
+        "carrier": "T-Mobile", 
+        "id": "t-mobile-mytouch-4g", 
+        "imageUrl": "img/phones/t-mobile-mytouch-4g.0.jpg", 
+        "name": "T-Mobile myTouch 4G", 
+        "snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi."
+    }, 
+    {
+        "age": 15, 
+        "carrier": "US Cellular", 
+        "id": "samsung-mesmerize-a-galaxy-s-phone", 
+        "imageUrl": "img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg", 
+        "name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone", 
+        "snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors"
+    }, 
+    {
+        "age": 16, 
+        "carrier": "Sprint", 
+        "id": "sanyo-zio", 
+        "imageUrl": "img/phones/sanyo-zio.0.jpg", 
+        "name": "SANYO ZIO", 
+        "snippet": "The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value."
+    }, 
+    {
+        "age": 17, 
+        "id": "samsung-transform", 
+        "imageUrl": "img/phones/samsung-transform.0.jpg", 
+        "name": "Samsung Transform\u2122", 
+        "snippet": "The Samsung Transform\u2122 brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed \u201cSprint ID Service Pack\u201d."
+    }, 
+    {
+        "age": 18, 
+        "id": "t-mobile-g2", 
+        "imageUrl": "img/phones/t-mobile-g2.0.jpg", 
+        "name": "T-Mobile G2", 
+        "snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible."
+    }, 
+    {
+        "age": 19, 
+        "id": "motorola-charm-with-motoblur", 
+        "imageUrl": "img/phones/motorola-charm-with-motoblur.0.jpg", 
+        "name": "Motorola CHARM\u2122 with MOTOBLUR\u2122", 
+        "snippet": "Motorola CHARM fits easily in your pocket or palm.  Includes MOTOBLUR service."
+    }
+]
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/readystate/.zip b/3-more/10-ajax/3-ajax-xmlhttprequest/readystate/.zip
new file mode 100755
index 00000000..d3f5a12f
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/readystate/.zip
@@ -0,0 +1 @@
+
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/readystate/index.html b/3-more/10-ajax/3-ajax-xmlhttprequest/readystate/index.html
new file mode 100755
index 00000000..f8e6ebc1
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/readystate/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+
+<button onclick="run()">Загрузить digits</button>
+
+<ul id="log"></ul>
+
+<script>
+function run() {
+
+  var xhr = new XMLHttpRequest(); 
+  write(xhr.readyState);
+    
+  xhr.open('GET', 'digits', true); 
+  write(xhr.readyState);
+    
+  xhr.onreadystatechange = function() {
+    write(xhr.readyState + " получено символов:" + xhr.responseText.length);
+  };
+
+  xhr.send(); 
+}
+
+function write(text) {
+  var li = log.appendChild(document.createElement('li'));
+  li.innerHTML = text;
+}
+</script>
+
+</body>
+</html>
diff --git a/3-more/10-ajax/3-ajax-xmlhttprequest/readystate/index.js b/3-more/10-ajax/3-ajax-xmlhttprequest/readystate/index.js
new file mode 100755
index 00000000..f23d5556
--- /dev/null
+++ b/3-more/10-ajax/3-ajax-xmlhttprequest/readystate/index.js
@@ -0,0 +1,42 @@
+var http = require('http');
+var url = require('url');
+var querystring = require('querystring');
+var static = require('node-static');
+var file = new static.Server('.');
+
+function accept(req, res) {
+
+  if (req.url == '/digits') {
+
+    res.writeHead(200, {
+      'Content-Type': 'text/plain',
+      'Cache-Control': 'no-cache'
+    });
+
+    var i=0;
+
+    var timer = setInterval(write, 1000);
+    write();
+
+    function write() {
+      res.write(new Array(1000).join(++i+'') + ' ');
+      if (i == 9) {
+        clearInterval(timer);
+        res.end();
+      }
+      
+    }
+  } else {
+    file.serve(req, res);
+  }
+}
+
+
+
+// ----- запуск accept как сервера из консоли или как модуля ------
+
+if (!module.parent) {
+  http.createServer(accept).listen(8080);
+} else {
+  exports.accept = accept;
+}
diff --git a/3-more/10-ajax/4-xhr-forms/article.md b/3-more/10-ajax/4-xhr-forms/article.md
new file mode 100644
index 00000000..cc041afc
--- /dev/null
+++ b/3-more/10-ajax/4-xhr-forms/article.md
@@ -0,0 +1,275 @@
+# XMLHttpRequest и POST, отсылка форм
+
+Во время обычной отправки формы браузер сам кодирует значения полей и составляет тело GET/POST-запроса для посылки на сервер. 
+
+При отправке данных через `XMLHttpRequest`, это нужно делать самим, в javascript-коде. Большинство проблем и вопросов здесь связано с непониманием, где и какое кодирование нужно осуществлять.
+
+[cut]
+
+## Кодировка urlencoded
+
+Основной способ кодировки запросов -- это [:urlencoded], то есть -- стандартное кодирование URL. При этом пробел представляется как `%20`, русские буквы и большинство спецсимволов кодируются, английские буквы и дефис оставляются как есть.
+
+Способ, которым следует кодировать данные формы при отправке, задаётся в её HTML-теге. 
+
+Например:
+
+```html
+<form method="get">  метод GET с кодировкой по умолчанию
+<form method="post"> метод POST с кодировкой по умолчанию 
+<form method="post" enctype="application/x-www-form-urlencoded">
+```
+
+Во всех этих случаях будет использована кодировка `urlencoded`.
+
+Если форма отправляется обычным образом, то браузер сам кодирует (urlencode) название и значение каждого поля данных, и отсылает форму на сервер в закодированном виде.
+
+Например, форма:
+
+```html
+<form action="/submit" method="GET"> 
+  <input name="*!*name*/!*" value="*!*Виктор*/!*">
+  <input name="*!*surname*/!*" value="*!*Цой*/!*">
+</form>
+```
+
+Будет отправлена как: `/submit?name=%D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80&surname=%D0%A6%D0%BE%D0%B9`.
+
+### GET-запрос
+
+Формируя XMLHttpRequest, мы должны формировать запрос "руками", кодируя поля функцией [:encodeURIComponent].
+
+Например, для посылки GET-запроса с произвольными параметрами `name` и `surname`, их необходимо закодировать вот так:
+
+```js
+// Передаём name и surname в параметрах запроса
+
+var xhr = new XMLHttpRequest();
+
+var params = 'name=' + encodeURIComponent(name) + 
+  '&surname=' + encodeURIComponent(surname);
+
+xhr.open("GET", '/submit?'+params, true);
+
+xhr.onreadystatechange = ...;
+
+xhr.send('');
+```
+
+[smart header="Прочие заголовки"]
+Заголовки `Content-Length`, `Connection` не нужны.
+
+Более того, по спецификации браузер запрещает их явную установку, как и некоторых других низкоуровневых HTTP-заголовков, которые могли бы ввести в заблуждение сервер относительно того, кто и сколько данных ему прислал, например `Referer`. Это сделано в целях контроля правильности запроса и для безопасности. 
+[/smart]
+
+[smart header="AJAX или не AJAX?"]
+**Запрос, отправленный кодом выше через `XMLHttpRequest`, никак не отличается от обычной отправки формы.** 
+
+Поэтому в некоторых фреймворках, чтобы сказать серверу, что это AJAX, добавляют специальный заголовок.
+
+Например:
+
+```js
+xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+```
+
+Сервер может, увидев заголовок, отправить данные в JSON-формате, а без него -- генерировать полноценную страницу. Получится, что один URL работает и как страница и как AJAX-сервис.
+[/smart]
+
+### POST-запрос
+
+В методе POST параметры передаются не в URL, а в теле, посылаемом через `send(body)`. Поэтому `params` нужно указывать не в `open`, а в `send`.
+
+Кроме того, при POST обязателен заголовок `Content-Type`, содержащий кодировку. Это указание для сервера -- как обрабатывать (раскодировать) пришедший запрос.
+
+```js
+// Пример с POST
+var xhr = new XMLHttpRequest();
+
+var params = 'name=' + encodeURIComponent(name) + 
+  '&surname=' + encodeURIComponent(surname);
+
+xhr.open("POST", '/submit', true)
+xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
+
+xhr.onreadystatechange = ...;
+
+xhr.send(params);
+```
+
+[warn header="Только UTF-8"]
+Всегда используется только UTF-8, независимо от языка страницы.
+
+Если сервер вдруг ожидает данные в windows-1251 (к примеру), то их нужно будет перекодировать.
+[/warn]
+
+## Кодировка multipart/form-data
+
+Второй способ кодирования называется "[multipart/form-data](http://ru.wikipedia.org/wiki/Multipart_form-data)". При этом поля пересылаются одно за другим, через строку-разделитель.
+
+Этот способ используется в методе `POST` и указывается атрибутом `enctype="multipart/form-data"`.
+
+Пример формы
+
+```html
+<form action="/submit" method="POST" enctype="multipart/form-data"> 
+  <input name="*!*name*/!*" value="*!*Виктор*/!*">
+  <input name="*!*surname*/!*" value="*!*Цой*/!*">
+</form>
+```
+
+Форма при такой кодировке пересылается в теле запроса, поля разделены случайно сгенерированной строкой `boundary`, вот так:
+
+```
+...Заголовки...
+Content-Type: *!*multipart/form-data; boundary=RaNdOmDeLiMiTeR*/!*
+
+--RaNdOmDeLiMiTeR
+Content-Disposition: form-data; name="*!*name*/!*"
+
+*!*Виктор*/!*
+--RaNdOmDeLiMiTeR
+Content-Disposition: form-data; name="*!*surname*/!*"
+
+*!*Цой*/!*
+--RaNdOmDeLiMiTeR--
+```
+
+Сервер видит заголовок `Content-Type: multipart/form-data` и раскодирует поля формы.
+
+**Как видно, само содержимое полей при этом оставляется "как есть". Поэтому такой способ используется в первую очередь при пересылке файла.**
+
+
+### POST-запрос
+
+В `XMLHttpRequest` можно указать кодировку `multipart/form-data` и вручную сформировать тело запроса, удовлетворяющее требованиям кодировки.
+
+Пример кода для формирования запроса в кодировке `multipart/form-data`:
+
+```js
+var data = {
+  name: 'Виктор',
+  surname: 'Цой'
+};
+
+var boundary = String(Math.random()).slice(2);
+var boundaryMiddle = '--' + boundary + '\r\n';
+var boundaryLast = '--' + boundary + '--\r\n'
+
+var body = ['\r\n'];
+for (var key in data) {
+  // добавление поля
+  body.push('Content-Disposition: form-data; name="'+key+'"\r\n\r\n'+data[key]+'\r\n');
+}
+
+body = body.join(boundaryMiddle) + boundaryLast;
+
+// Тело запроса готово, отправляем
+
+var xhr = new XMLHttpRequest();
+xhr.open('POST', '/submit', true);
+
+xhr.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary);
+
+xhr.onreadystatechange = function() {
+  if (this.readyState != 4) return;
+
+  alert(this.responseText);
+}
+
+xhr.send(body);
+```
+
+Тело запроса будет иметь вид, описанный выше, то есть поля через разделитель. 
+
+[smart header="Отправка файла"]
+**Можно создать запрос, который сервер воспримет как загрузку файла.**
+
+Для этого текст файла должен быть уже доступен JavaScript, т.е. произвольный файл прочитать и переслать, конечно же, нельзя.
+
+Для добавления файла нужно использовать тот же код, что выше, но при добавлении поля  вместо строки `body.push('Content-Disposition: form-data; name=...')` указать расширенные заголовки:
+
+```js
+Content-Disposition: form-data; name="myfile"; filename="pic.jpg"
+Content-Type: image/jpeg
+(пустая строка)
+содержимое файла
+```
+
+Код будет выглядеть так:
+
+```js
+body.push('Content-Disposition: form-data; name="'+key+'"; filename="pic.jpg"\r\nContent-Type: image/jpeg\r\n\r\n'+data[key]+'\r\n');
+```
+
+Имя файла `pic.jpg` здесь задано явно, но вам не составит труда его заменить.
+[/smart]
+
+## FormData
+
+Современные браузеры, исключая IE<10, поддерживают объект [FormData](https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects), который позволяет загружать формы напрямую.
+
+**В форме могут быть любые поля, в том числе файловые.** 
+
+Лучше всего это показывает пример:
+
+```html
+<form name="user">
+  <input name="firstname" value="Вася">
+</form>
+
+<script>
+// создать объект из формы
+// в форме могут быть любые поля
+var form = document.forms.user;
+*!*
+var formData = new FormData(form);  
+*/!*
+
+// добавить к пересылке ещё пару ключ - значение
+formData.append("lastname", "Пупкин");
+
+// отослать
+var xhr = new XMLHttpRequest();
+xhr.open("POST", "/url");
+*!*
+xhr.send(formData);
+*/!*
+</script>
+```
+
+Этот код отправит на сервер форму с полями `firstname` и `lastname`.
+
+Интерфейс:
+<ul>
+<li>Конструктор `new FormData([form])` вызывается либо без аргументов, либо с DOM-элементом формы. </li>
+<li>Метод `formData.append(name, value)` добавляет данные к форме.</li>
+</ul>
+
+Интеграция `FormData` с `XMLHttpRequest` встроена в браузер.
+[head]
+<script>
+function voteSync(outputElem) {
+  var xhr = new XMLHttpRequest(); // (1)
+
+  xhr.open('GET', '/files/tutorial/ajax/xhr/vote.php', false); 
+  xhr.send(null);   // (2)
+
+  outputElem.innerHTML = xhr.responseText;  // (3)
+}
+
+function vote(outputElem) {
+  var xhr = new XMLHttpRequest();
+
+  xhr.open('GET', '/files/tutorial/ajax/xhr/vote.php', true);
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState != 4) return;
+debugger
+    outputElem.innerHTML = xhr.responseText;
+  }
+
+  xhr.send(null);
+}
+</script>
+[/head]
\ No newline at end of file
diff --git a/3-more/10-ajax/5-xhr-longpoll/article.md b/3-more/10-ajax/5-xhr-longpoll/article.md
new file mode 100644
index 00000000..f2b02d82
--- /dev/null
+++ b/3-more/10-ajax/5-xhr-longpoll/article.md
@@ -0,0 +1,104 @@
+# XMLHttpRequest: длинные опросы
+
+Способ организации COMET, который мы рассмотрим в этой главе, прост и подходит в 90% реальных случаев.
+
+[cut]
+
+## Частые опросы
+
+Первое решение, которое приходит в голову для получения событий с сервера -- это "частые опросы" (polling), т.е периодические запросы на сервер: "эй, я тут, изменилось ли что-нибудь?". Например, раз в 10 секунд.
+
+В ответ сервер во-первых помечает у себя, что клиент онлайн, а во-вторых посылает сообщение, в котором в специальном формате содержится весь пакет событий, накопившихся к данному моменту.
+
+**У частых опросов есть одна большая проблема, а именно -- большие задержки между созданием и получением данных.**
+
+Сервер отсылает их не тогда, когда они появились, а когда настанет время очередного запроса.
+
+[summary]
+Задержка = время между опросами + установление соединения + передача данных.
+[/summary]
+
+Другой минус -- лишний входящий трафик на сервер. При каждом запросе браузер передает множество заголовков и в ответ получает, кроме данных, также заголовки. Для некоторых приложений трафик заголовков может в 10 и более раз превосходить трафик реальных данных.
+
+[compare]
+-Задержки между событием и уведомлением.
+-Лишний трафик и запросы на сервер.
++Простота реализации.
+[/compare]
+
+Причём, простота реализации тут достаточно условная. Клиентская часть -- довольно проста, а вот сервер получает сразу большой поток запросов. 
+
+Даже если клиент ушёл пить чай -- его браузер каждые 10 секунд будет "долбить" сервер запросами. Готов ли сервер к такому? 
+
+## Длинные опросы
+
+Длинные опросы -- отличная альтернатива частым опросам. Они также удобны в реализации, и при этом сообщения доставляются без задержек.
+
+Схема:
+<ol>
+<li>Отправляется запрос на сервер.</li>
+<li>Соединение не закрывается сервером, пока не появится сообщение.</li>
+<li>Когда сообщение появилось -- сервер отвечает на запрос, пересылая данные.</li>
+<li>Браузер тут же делает новый запрос.</li>
+</ol>
+
+Ситуация, когда браузер отправил запрос и держит соединение с сервером, ожидая ответа, является стандартной и прерывается только доставкой сообщений.
+
+Схема коммуникации:
+
+<img src="longpoll.png">
+
+При этом если соединение рвётся само, например, закрыто прокси-сервером, то браузер тут же отсылает новый запрос.
+
+Примерный код клиентской части:
+
+```js
+function subscribe(url) {
+  var xhr = new XMLHttpRequest();
+  xhr.onreadystatechange = function() {
+    if (this.readyState != 4) return;
+
+    if (this.status == 200) {
+      onMessage(this.responseText);
+    } else {
+      onError(this);
+    }
+
+    subscribe(url);
+  }
+  xhr.open("GET", url, true);
+  xhr.send('');
+}
+```
+
+Функция `subscribe` делает запрос, при ответе обрабатывает результат, и тут же запускает процесс по новой.
+
+[compare]
+-Сообщение отправляются клиенту тут же.
+-Сервер должен уметь держать большое количество ожидающих соединений.
+-Простота реализации.
+[/compare]
+
+## Демо: чат
+
+Для примера вы можете скачать простейший чат, где в качестве сервера -- Node.JS: [longpoll.zip](/zip/tutorial/ajax/xhr/longpoll.zip).
+
+Демо:
+
+[iframe src="longpoll" border="1" height="200px" link zip]
+
+## Область применения
+
+Длинные опросы отлично работают в тех случаях, когда сообщения приходят редко. 
+
+При большом количестве частых сообщений график приёма-отправки, приведённый выше, превращается в "пилу". Каждое сообщение -- это новый запрос, дополнительный трафик.
+
+В этих случаях используются другие способы получения данных, подразумевающие непрерывное соединение с сервером. Мы рассмотрим их в следующих главах.
+
+
+
+
+
+
+
+
diff --git a/3-more/10-ajax/5-xhr-longpoll/longpoll.png b/3-more/10-ajax/5-xhr-longpoll/longpoll.png
new file mode 100755
index 00000000..fae89022
Binary files /dev/null and b/3-more/10-ajax/5-xhr-longpoll/longpoll.png differ
diff --git a/3-more/10-ajax/5-xhr-longpoll/longpoll/.zip b/3-more/10-ajax/5-xhr-longpoll/longpoll/.zip
new file mode 100755
index 00000000..d3f5a12f
--- /dev/null
+++ b/3-more/10-ajax/5-xhr-longpoll/longpoll/.zip
@@ -0,0 +1 @@
+
diff --git a/3-more/10-ajax/5-xhr-longpoll/longpoll/browser.js b/3-more/10-ajax/5-xhr-longpoll/longpoll/browser.js
new file mode 100755
index 00000000..bac497c7
--- /dev/null
+++ b/3-more/10-ajax/5-xhr-longpoll/longpoll/browser.js
@@ -0,0 +1,52 @@
+// Посылка запросов -- обычными XHR POST
+function PublishForm(form, url) {
+
+  function sendMessage(message) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", url, true);
+    xhr.send('message='+encodeURIComponent(message));
+  }
+
+  form.onsubmit = function() {
+    var message = form.message.value;
+    if (message) {
+      form.message.value = '';
+      sendMessage(message);
+    }
+    return false;
+  };  
+}
+
+// Получение сообщений, COMET
+function SubscribePane(elem, url) {
+  
+  function showMessage(message) {
+    var messageElem = document.createElement('div');
+    messageElem.appendChild(document.createTextNode(message));
+    elem.appendChild(messageElem);
+  }
+
+  function subscribe() {
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function() {
+      if (this.readyState != 4) return;
+
+      if (this.status == 200) {
+        showMessage(this.responseText);
+        subscribe();
+        return;
+      }
+
+      if (this.status != 404 ) {  // 404 может означать, что сервер перезагружается
+        showMessage(this.statusText); // показать ошибку
+      }
+      
+      setTimeout(subscribe, 1000);  // попробовать ещё раз через 1 сек
+    }
+    xhr.open("GET", url, true);
+    xhr.send('');
+  }
+  
+  subscribe(); 
+  
+}
diff --git a/3-more/10-ajax/5-xhr-longpoll/longpoll/index.html b/3-more/10-ajax/5-xhr-longpoll/longpoll/index.html
new file mode 100755
index 00000000..a3d8f465
--- /dev/null
+++ b/3-more/10-ajax/5-xhr-longpoll/longpoll/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<script src="browser.js"></script>
+</head>
+<body>
+
+Несколько человек при заходе на эту страницу будут получать сообщения друг друга.
+
+<form name="publish">
+<input type="text" name="message"/>
+<input type="submit" value="Отправить"/>
+</form>
+
+<div id="subscribe">
+</div>
+
+<script>
+	new PublishForm(document.forms.publish, 'publish');
+	new SubscribePane(document.getElementById('subscribe'), 'subscribe');
+</script>
+
+</body>
+</html>
diff --git a/3-more/10-ajax/5-xhr-longpoll/longpoll/index.js b/3-more/10-ajax/5-xhr-longpoll/longpoll/index.js
new file mode 100755
index 00000000..8c45a053
--- /dev/null
+++ b/3-more/10-ajax/5-xhr-longpoll/longpoll/index.js
@@ -0,0 +1,79 @@
+var http = require('http');
+var url = require('url');
+var querystring = require('querystring');
+var static = require('node-static');
+
+var fileServer = new static.Server('.');
+
+var subscribers = {};
+
+function onSubscribe(req, res) {
+  var id = Math.random();
+  
+  subscribers[id] = res;
+  console.log("новый клиент " + id + ", клиентов:" + Object.keys(subscribers).length);
+
+  req.on('close', function() {
+    delete subscribers[id];
+    console.log("клиент "+id+" отсоединился, клиентов:" + Object.keys(subscribers).length);
+  });
+
+}
+
+function onPublish(req, res, message) {
+
+  console.log("есть сообщение, клиентов:" + Object.keys(subscribers).length);    
+
+  for(var id in subscribers) {
+    console.log("отсылаю сообщение " + id);
+    var res = subscribers[id];
+
+    res.writeHead(200, {
+        'Content-Type': 'text/plain;charset=utf-8',
+        "Cache-Control": "no-cache, must-revalidate"
+    });
+
+    res.write(message, 'utf-8');    
+    res.end();
+  }
+  
+  subscribers = {};
+}
+
+function accept(req, res) {
+  var urlParsed = url.parse(req.url, true);
+
+  // новый клиент хочет получать сообщения
+  if (urlParsed.pathname == '/subscribe') {
+    onSubscribe(req, res); // собственно, подписка
+    return;
+  } 
+
+  // отправка сообщения
+  if (urlParsed.pathname == '/publish' && req.method == 'POST') {
+    // принять POST-запрос
+    var post;
+    req.addListener('data', function (chunk) {
+      post = querystring.parse(chunk.toString());
+    }).addListener('end', function () {
+      onPublish(req, res, post.message.toString()); // собственно, отправка
+    });
+  
+    return;
+  } 
+
+  // всё остальное -- статика
+  fileServer.serve(req, res);
+
+}
+
+
+// -----------------------------------
+
+if (!module.parent) {
+  http.createServer(accept).listen(8080);
+  console.log('Сервер запущен на порту 8080');
+} else {
+  exports.accept = accept;
+}
+
diff --git a/3-more/10-ajax/6-xhr-crossdomain/1-do-we-need-origin/solution.md b/3-more/10-ajax/6-xhr-crossdomain/1-do-we-need-origin/solution.md
new file mode 100644
index 00000000..42ead589
--- /dev/null
+++ b/3-more/10-ajax/6-xhr-crossdomain/1-do-we-need-origin/solution.md
@@ -0,0 +1,3 @@
+`Origin` нужен, потому что `Referer` передаётся не всегда. В частности, при запросе со страницы на HTTPS -- нет `Referer`.
+
+Что же касается "неправильного" `Referer` -- это из области фантастики. Когда-то, много лет назад, в браузерах были ошибки, которые позволяли подменить `Referer` из JavaScript, но они давно исправлены. 
diff --git a/3-more/10-ajax/6-xhr-crossdomain/1-do-we-need-origin/task.md b/3-more/10-ajax/6-xhr-crossdomain/1-do-we-need-origin/task.md
new file mode 100644
index 00000000..fe1a1532
--- /dev/null
+++ b/3-more/10-ajax/6-xhr-crossdomain/1-do-we-need-origin/task.md
@@ -0,0 +1,28 @@
+# Зачем нужен Origin?
+
+[importance 3]
+
+Как вы, наверняка, знаете, существует HTTP-заголовок `Referer`, в котором обычно указан адрес страницы, с которой инициирован запрос.
+
+Например, при отправке `XMLHttpRequest` со страницы `http://javascript.ru/some/url` на `http://google.ru`, заголовки будут примерно такими:
+
+```
+Accept:*/*
+Accept-Charset:windows-1251,utf-8;q=0.7,*;q=0.3
+Accept-Encoding:gzip,deflate,sdch
+Accept-Language:ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4
+Connection:keep-alive
+Host:google.ru
+*!*
+Origin:http://learn.javascript.ru
+Referer:http://learn.javascript.ru/node/add/learning-task
+*/!*
+```
+
+Как видно, здесь присутствуют и `Referer` и `Origin`.
+
+Итак, вопросы:
+<ol>
+<li>Зачем нужен `Origin`, если `Referer` содержит даже более полную информацию?</li>
+<li>Может ли быть такое, что заголовка `Referer` нет или он неправильный?</li>
+</ol>
diff --git a/3-more/10-ajax/6-xhr-crossdomain/article.md b/3-more/10-ajax/6-xhr-crossdomain/article.md
new file mode 100644
index 00000000..534847f5
--- /dev/null
+++ b/3-more/10-ajax/6-xhr-crossdomain/article.md
@@ -0,0 +1,342 @@
+# XMLHttpRequest: кросс-доменные запросы
+
+Обычно запрос `XMLHttpRequest` может делать запрос только в рамках текущего сайта. При попытке использовать другой домен/порт/протокол -- браузер выдаёт ошибку.
+
+Существует современный стандарт [XMLHttpRequest](http://www.w3.org/TR/XMLHttpRequest/), он ещё в состоянии черновика, но предусматривает кросс-доменные запросы и многое другое.
+[cut]
+Большинство возможностей этого стандарта уже поддерживаются всеми браузерами, но увы, не в IE<10. 
+
+Впрочем, частично кросс-доменные запросы поддерживаются, начиная с IE8, только вместо `XMLHttpRequest` нужно использовать объект [XDomainRequest](http://msdn.microsoft.com/en-us/library/ie/cc288060.aspx). 
+
+## Кросс-доменные запросы  [#cors]
+
+Разберём кросс-доменные запросы на примере кода:
+
+```js
+// (1)
+var xhr = new XMLHttpRequest();
+if (!xhr.onload) { // это IE 8/9, в них старый XMLHttpRequest
+  if (!window.XDomainRequest) throw new Error("Not supported");
+  xhr = new XDomainRequest(); // ..но есть XDomainRequest
+}
+
+// (2) запрос на другой домен :)
+xhr.open('GET', 'http://anywhere.com/vote.php', true);
+
+// (3)
+xhr.onload = function() {
+  alert(this.responseText);
+}
+
+xhr.onerror = function() {
+  alert('Ошибка ' + this.status);
+}
+
+xhr.send('');
+```
+
+Комментарии:
+<ol>
+<li>Мы создаём `XMLHttpRequest` и проверяем, поддерживает ли он событие `onload`. Если нет, то это старый `XMLHttpRequest`. Возможно, у нас IE8-9, значит надо попробовать `XDomainRequest`.</li>
+<li>Запрос на другой домен отсылается просто указанием соответствующего URL в `open`. Он должен быть асинхронным.</li>
+<li>Все браузеры, которые поддерживают кросс-доменные запросы, поддерживают и события `onload/onerror`, которые можно использовать вместо `onreadystatechange`.</li>
+</ol>
+
+
+
+### Контроль безопасности
+
+Контроль безопасности осуществляется на уровне браузера. 
+
+**В кросс-доменный запрос браузер автоматически добавляет заголовок `Origin`, содержащий домен, с которого осуществлён запрос.**
+
+В данном случае заголовки будут примерно такие:
+
+```
+GET /vote.php
+Accept:*/*
+Accept-Charset:windows-1251,utf-8;q=0.7,*;q=0.3
+Accept-Encoding:gzip,deflate,sdch
+Accept-Language:ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4
+Connection:keep-alive
+Host:anywhere.com
+*!*
+Origin:http://javascript.ru
+*/!*
+```
+
+Сервер должен, со своей стороны, ответить специальными заголовками, разрешает ли он такой запрос к себе.
+
+
+**Если сервер разрешает кросс-доменный запрос с этого домена -- он должен добавить к ответу заголовок `Access-Control-Allow-Origin`, содержащий домен запроса или  звёздочку `*`.** 
+
+Только при наличии такого заголовка в ответе -- браузер сочтёт запрос успешным, а иначе JavaScript получит ошибку.
+
+То есть, ответ сервера может быть примерно таким:
+
+```
+HTTP/1.1 200 OK
+Content-Type:text/html; charset=UTF-8
+*!*
+Access-Control-Allow-Origin: http://javascript.ru
+*/!*
+```
+
+**Описанный выше поток выполнения обладает двумя особенностями:**
+
+<ol>
+<li>Не передаются куки и заголовки HTTP-авторизации. Параметры `user` и `password` в методе `open` игнорируются. </li>
+<li>Речь пока только о GET и POST-запросах, другие методы обрабатываются по-другому.</li>
+</ol>
+
+[warn header="Что может сделать хакер, используя такие запросы?"]
+Описанные выше ограничения приводят к тому, что запрос полностью безопасен.
+
+Действительно, нехороший человек со злой страницы может сформировать любой GET/POST-запрос и отправить его, но без разрешения сервера ответа он не получит.
+
+А без ответа такой запрос, по сути, эквивалентен отправке формы GET/POST, причём  без авторизации.
+[/warn] 
+
+
+
+
+
+
+### Ограничения IE<10
+
+В IE<10 используется `XDomainRequest`, который представляет собой урезанный `XMLHttpRequest`. 
+
+На него действуют ограничения:
+
+<ul>
+<li>Протокол нужно сохранять: запросы допустимы с HTTP на HTTP, с HTTPS на HTTPS. Другие протоколы запрещены.</li>
+<li>Метод `open(method, url)` имеет только два параметра. Он всегда асинхронный.</li>
+<li>Ряд возможностей современного стандарта недоступны, в частности:
+<ul><li>Недоступны методы, кроме GET или POST.</li>
+<li>Нельзя добавлять свои заголовки, даже нельзя указать свой `Content-Type` для запроса, он всегда `text/plain`.</li>
+<li>Нельзя включить передачу кук и данных HTTP-авторизации.</li>
+</ul>
+</li>
+<li>В IE8 в режиме просмотра InPrivate кросс-доменные запросы не работают.</li>
+</ul>
+
+Современный стандарт [XMLHttpRequest](http://www.w3.org/TR/XMLHttpRequest/) предусматривает средства для преодоления этих ограничений, но на момент выхода IE8 они ещё не были проработаны, поэтому их не реализовали. А IE9 исправил некоторые ошибки, но в общем не добавил ничего нового.
+
+Так как большинство сайтов хотят поддерживать IE<10, то на практике кросс-доменные запросы редко используют, предпочитая другие способы кросс-доменной коммуникации. Например, динамически создаваемый тег `SCRIPT` или вспомогательный `IFRAME` с другого домена. Мы разберём эти подходы в последующих главах.
+
+[smart header="Как разрешить кросс-доменные запросы от доверенного сайта в IE<10?"]
+
+Разрешить кросс-доменные запросы можно в настройках IE, во вкладке "Безопасность", включив пункт "Доступ к источникам данных за пределами домена".
+
+Обычно это делается не для всех сайтов, а для зоны "Надёжные узлы", после чего в неё вносится доверенный сайт. Теперь он может делать кросс-доменные запросы `XMLHttpRequest`.
+
+Этот способ можно применить для корпоративных сайтов, а также в тех случаях, когда посетитель заведомо вам доверяет, но почему-то (компьютер на работе, админ запрещает ставить другой браузер?) хочет использовать именно IE. Например, он может предлагаться в качестве дополнительной инструкции "как заставить этот сервис работать под IE".
+[/smart]
+
+[smart header="В IE разрешён другой порт"]
+В кросс-доменные ограничения IE не включён порт. 
+
+То есть, можно сделать запрос с `http://javascript.ru` на `http://javascript.ru:8080`, и в IE он не будет считаться кросс-доменным.
+
+Это позволяет решить некоторые задачи, связанные с взаимодействием различных сервисов в рамках одного сайта.
+
+[/smart]
+
+Есть и другие способы обойти кросс-доменные ограничения, например использование тега `SCRIPT` или `IFRAME`. Их детали мы рассмотрим в следующих главах, так как здесь мы рассматриваем именно `XMLHttpRequest`.
+
+
+**Расширенные возможности, описанные далее, поддерживаются всеми современными браузерами, кроме IE<10.**
+
+## Запросы от имени пользователя
+
+Чтобы браузер передал вместе с запросом куки и, при необходимости, HTTP-авторизацию, поставьте запросу `xhr.withCredentials = true`:
+
+```js
+var xhr = new XMLHttpRequest(); // XDomainRequest не поддерживает это
+xhr.withCredentials = true;
+
+...
+```
+
+Далее -- всё как обычно, дополнительных действий со стороны клиента не требуется.
+
+### Защита от CSRF
+
+Кросс-доменный `XMLHttpRequest` с куками, безусловно, опаснее, чем анонимный. 
+
+Представьте себе -- человек нечаянно попадает на страницу злого хакера. А она, используя JavaScript, отправляет кросс-доменный запрос на почтовый сервер, например GMail. 
+
+Если с запросом отправятся куки, то получится, что этот запрос выполнился "от имени посетителя".
+
+Подобные атаки давно существуют в интернете и называются [CSRF-атака](http://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%BC%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D1%85_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%BE%D0%B2). Обычно они выполняются при помощи динамической генерации о отправки POST-формы. "Злая" страница может создать произвольную форму и отправить её на почтовый сервер. При этом с формой передадутся куки, то есть авторизация посетителя. Если почтовый сервер полагается только на них, то он выполнит запрошенное действие от имени пользователя.
+
+**Чтобы защититься от CSRF-атак, почтовый сервер при генерации формы отправки сообщения добавляет в неё специальный ключ:**
+
+```html
+<form action="send.php" method="POST">
+*!*
+  <input type="hidden" name="csrf-token" value="abcdefabcdef">
+*/!*
+  ...
+</form>
+```
+
+Этот ключ генерируется случайным образом и привязывается к сессии посетителя. Если посетитель честно открыл браузер и отправил форму со страницы, то в ней будет этот ключ. А "злая" страница этот ключ не знает, ведь его сгенерировал сервер. Даже открыв страницу с почтового сервера в `IFRAME`, она не сможет получить информацию со страницы -- `IFRAME`-то на другом домене.
+
+...А без ключа она не сможет отправить сообщение. Сервер ведь его проверяет. Правильный ключ доказывает, что форма отправлена именно со страницы почтового сервера. 
+
+В случае с кросс-доменным `XMLHttpRequest` ситуация принципиально меняется и атака становится куда опаснее!
+
+Если сервер разрешает делать к себе `XMLHttpRequest` с `withCredentials`, то эту защиту легко обойти! Ведь `XMLHttpRequest` не просто делает запрос, а возвращает ответ, к которому JavaScript, (в отличие от результата отправки формы на другой домен) имеет полный доступ.
+
+Например, "злая" страница может запросить страницу с формой отправки, найти в `responseText` нужный `<input name="csrf-token">` -- и вуаля, ключ есть, можно делать новый запрос, уже с гарантией прохождения.
+
+**Поэтому для запросов с `withCredentials` предусмотрено дополнительное подтверждение со стороны сервера.**
+
+Он должен показать, что разрешает делать не просто запросы, а запросы от имени посетителя. Как мы видим, это очень серьёзное разрешение.
+
+**При запросе с `withCredentials` сервер должен вернуть уже не один, а два заголовка: `Access-Control-Allow-Origin: домен` и `Access-Control-Allow-Credentials: true`.**
+
+Пример заголовков:
+
+```js
+HTTP/1.1 200 OK
+Content-Type:text/html; charset=UTF-8
+*!*
+Access-Control-Allow-Origin: http://javascript.ru
+Access-Control-Allow-Credentials: true
+*/!*
+```
+
+Использование звёздочки `*` в `Access-Control-Allow-Origin` при этом запрещено.
+
+Если заголовков не будет, то браузер не даст JavaScript'у доступ к ответу сервера. И получится, что запрос -- не опаснее обычной CSRF-атаки.
+
+## Чтение заголовков
+
+Чтобы клиент мог прочитать HTTP-заголовок, сервер должен указать его имя в `Access-Control-Expose-Headers`.
+
+Например:
+
+```
+HTTP/1.1 200 OK
+Content-Type:text/html; charset=UTF-8
+*!*
+X-Uid: 123
+X-Authorization: abcdefabcdef
+Access-Control-Allow-Origin: http://javascript.ru
+Access-Control-Expose-Headers: X-Uid, X-Authentication
+*/!*
+```
+
+Это ограничение относится ко всем заголовкам, кроме "простых":
+
+```
+Cache-Control
+Content-Language
+Content-Type
+Expires
+Last-Modified
+Pragma
+```
+
+**...То есть, `Content-Type` получить всегда можно, а доступ к специфическим заголовкам нужно открывать явно.**
+
+## Нестандартные методы и заголовки
+
+В кросс-доменном `XMLHttpRequest` можно указать не только `GET/POST`, но и любой другой метод, например `PUT`, `DELETE`.
+
+Когда-то никто и не думал, что страница сможет сделать такие запросы. Поэтому ряд веб-сервисов написаны в предположении, что "если метод -- нестандартный, то это не браузер". Некоторые веб-сервисы даже учитывают это при проверке прав доступа. 
+
+**Чтобы пресечь любые недопонимания, браузер использует предзапрос в случаях:**
+
+<ul>
+<li>Если метод -- не GET и не POST</li>
+<li>Если метод -- POST, но заголовок `Content-Type` имеет значение отличное от `application/x-www-form-urlencoded`, `multipart/form-data` или `text/plain`, например `application/xml`.</li>
+<li>Если устанавливаются другие HTTP-заголовки</li>
+</ul>
+
+...Любое из условий выше ведёт к тому, что браузер cделает два HTTP-запроса.
+
+Первый запрос называется "предзапрос" (английский термин "preflight"), он использует метод `OPTIONS`. Его задача -- спросить сервер, разрешает ли он использовать выбранный метод и заголовки.
+
+Название метода браузер передаёт в `Access-Control-Request-Method`, а если в `XMLHttpRequest` добавлены особые заголовки, то и их тоже -- в `Access-Control-Request-Headers`.
+
+### Пример запроса COPY
+
+Рассмотрим запрос `COPY`, который используется в протоколе[WebDAV](http://www.webdav.org/specs/rfc2518.html) для управления файлами через HTTP:
+
+```js
+var xhr = new XMLHttpRequest();
+
+xhr.open('COPY', 'http://site.com/~ilya', true);
+xhr.setRequestHeader('Destination', 'http://site.com/~ilya.bak');
+
+xhr.onload = ...
+xhr.onerror = ...
+
+xhr.send('...');
+```
+
+Браузер сначала шлёт предзапрос `OPTIONS`:
+
+```
+OPTIONS /~ilya HTTP/1.1
+Host: site.com
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Encoding: gzip,deflate
+Connection: keep-alive
+*!*
+Origin: http://javascript.ru
+Access-Control-Request-Method: COPY
+Access-Control-Request-Headers: Destination
+*/!*
+```
+
+На этот запрос сервер должен ответить статусом 200, указав заголовки `Access-Control-Allow-Method: метод` и, если есть заголовки, `Access-Control-Allow-Headers: разрешённые заголовки`.
+
+Дополнительно он может указать `Access-Control-Max-Age: sec`, где `sec` -- количество секунд, на которые нужно закэшировать разрешение. Тогда при последующих вызовах метода браузер уже не будет делать предзапрос.
+
+В протоколе WebDav разрешены многие методы и заголовки, которые и перечислим в ответе:
+
+```
+HTTP/1.1 200 OK
+Content-Type: text/plain
+*!*Access-Control-Allow-Methods:*/!* PROPFIND, PROPPATCH, COPY, MOVE, DELETE, MKCOL, LOCK, UNLOCK, PUT, GETLIB, VERSION-CONTROL, CHECKIN, CHECKOUT, UNCHECKOUT, REPORT, UPDATE, CANCELUPLOAD, HEAD, OPTIONS, GET, POST
+*!*Access-Control-Allow-Headers:*/!* Overwrite, Destination, Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control
+*!*Access-Control-Max-Age:*/!* 86400
+```
+
+Браузер видит, что метод `COPY` -- в числе разрешённых и заголовок `Destination` -- тоже, и дальше он шлёт уже основной запрос.
+
+При этом ответ на предзапрос он закэширует на 86400 сек (ровно сутки), так что следующие вызовы `COPY` сразу отправят основной запрос.
+
+Основной запрос браузера:
+
+```
+COPY /~ilya HTTP/1.1
+Host: site.com
+Content-Type: text/html; charset=UTF-8
+*!*
+Destination: http://site.com/~ilya.bak
+Origin: http://javascript.ru
+*/!*
+```
+
+Ответ сервера, согласно спецификации [WebDav COPY](http://www.webdav.org/specs/rfc2518.html#rfc.section.8.8.8):
+
+```
+HTTP/1.1 207 Multi-Status
+Content-Type: text/xml; charset="utf-8"
+Content-Length: ...
+*!*
+Access-Control-Allow-Origin: http://javascript.ru
+*/!*
+
+<?xml version="1.0" encoding="utf-8" ?>
+<d:multistatus xmlns:d="DAV:">
+  ...
+</d:multistatus>
+```
+
+Таким образом, через `XMLHttpRequest` можно удобно использовать любые методы и заголовки, главное чтобы сервер это разрешал.
\ No newline at end of file
diff --git a/3-more/10-ajax/7-xhr-onprogress/article.md b/3-more/10-ajax/7-xhr-onprogress/article.md
new file mode 100644
index 00000000..19485a16
--- /dev/null
+++ b/3-more/10-ajax/7-xhr-onprogress/article.md
@@ -0,0 +1,160 @@
+# XMLHttpRequest: индикация прогресса
+
+Запрос `XMLHttpRequest` состоит из двух фаз:
+<ol>
+<li>На первой фазе данные загружаются на сервер. Эта фаза может быть долгой для POST-запросов.</li>
+<li>После того, как данные загружены, браузер скачивает ответ с сервера. Если он большой, то это может занять существенное время.</li>
+</ol>
+
+Для каждой стадии предусмотрены события, "рассказывающие" о процессе выполнения.
+[cut]
+## XMLHttpRequestUpload
+
+На стадии загрузки обработчики нужно ставить на объект `xhr.upload`. Например:
+
+```js
+xhr.upload.onprogress = function(event) {
+  alert('Загружено ' + event.loaded + ' байт из '+ event.total);
+}
+
+xhr.upload.onload = function() {
+  alert('Данные полностью загружены на сервер!');
+}
+```
+
+Объект `xhr.upload` ничего не делает, у него нет методов, он предназначен исключительно для обработки событий при загрузке.
+
+После того, как загрузка завершена, будет начато скачивание ответа.
+
+**Обработчик `xhr.onprogress` даёт прогресс на фазе скачивания, а за ней наступает фаза закачки, для которой работает xhr.upload.onprogress.** 
+
+## Загрузка файла с индикатором прогресса
+
+Современный `XMLHttpRequest` позволяет отправить на сервер всё, что угодно. Текст, файл, форму.
+
+Мы, для примера, рассмотрим загрузку файла с индикацией прогресса. Это требует от браузера поддержки [File API](http://www.w3.org/TR/FileAPI/), то есть исключает IE<10.
+
+File API позволяет получить доступ к содержимому файла, который перенесён в браузер при помощи Drag'n'Drop или выбран в поле формы.
+
+Форма для выбора файла:
+
+```html
+<form name="upload">
+	<input type="file" name="file1">
+	<input type="submit" value="Загрузить">
+</form>
+```
+
+Обработчик на её `submit`:
+
+```js
+var form = document.forms.upload;
+form.onsubmit = function() {
+  var file = this.elements.file1.files[0];	
+  if (file) *!*upload(file, onSuccess, onError, onProgress)*/!*;	
+  return false;
+}
+```
+
+Все, больше нам здесь File API не нужно. Мы получили файл из формы и отправляем его:
+
+```js
+function upload(file, onSuccess, onError, onProgress) {
+
+  var xhr = new XMLHttpRequest();
+
+  xhr.onload = xhr.onerror = function() {
+    if(this.status != 200 || this.responseText != 'OK') {
+      onError(this);
+      return;
+    }
+    onSuccess();
+  };
+
+*!*
+  xhr.upload.onprogress = function(event) { 
+    onProgress(event.loaded, event.total);
+  }
+*/!*
+
+  xhr.open("POST", "upload.php", true); 
+  xhr.send(file);
+
+}
+```
+
+## Демо
+
+Полный пример, основанный на коде выше, в котором функции `onSuccess`, `onError`, `onProgress` выводят результат на экран:
+
+[iframe border=1 src="progress" link zip]
+
+## Событие onprogress в деталях
+
+Событие `onprogress` имеет одинаковый вид при закачке на сервер (`xhr.upload.onprogress`) и при получении ответа (`xhr.onprogress`).
+
+Оно получает объект `event` типа [ProgressEvent](http://www.w3.org/TR/progress-events/) со свойствами:
+
+<dl>
+<dt>`loaded`</dt>
+<dd>Сколько байт загружено. 
+
+Имеется в виду только тело запроса, заголовки не учитываются.</dd>
+<dt>`lengthComputable`</dt>
+<dd>Если `true`, то известна полное количество байт и оно хранится в свойстве `total`.
+</dd>
+<dd>`total`</dd>
+<dd>Общее количество байт для загрузки, если известно.
+
+При HTTP-запросах оно передаётся в заголовке `Content-Length`. 
+<ul>
+<li>При закачке на сервер браузер всегда точно знает размер пересылаемого фрагмента, поэтому отправляет этот заголовок и учитывает его в `xhr.upload.onprogress`.</li>
+<li>При скачивании данных -- уже задача сервера поставить этот заголовок, если конечно это возможно.</li>
+</ul>
+</dd>
+</dl>
+
+Ещё особенности, которые необходимо учитывать при использовании `onprogress`:
+
+<ul>
+<li>**Событие происходит при каждом полученном/отправленном байте, но не чаще чем раз в 50мс.**
+
+Это обозначено в [спецификации progress notifications](http://www.w3.org/TR/XMLHttpRequest/#make-progress-notifications).
+</li>
+<li>**При получении данных доступен `xhr.responseText`.**
+
+Можно заглянуть в него и прочитать текущие, неоконченные данные. Они будут оборваны на каком-то символе, на каком именно -- предсказать сложно, это зависит от сети.</li>
+<li>**При посылке данных не гарантируется обработка загрузки сервером.**
+
+Событие `xhr.upload.onprogress` срабатывает, когда данные отправлены браузером. Но оно не гарантирует, что сервер получил, обработал и записал данные на диск. 
+
+Поэтому прогресс-индикатор, получаемый при его помощи, носит приблизительный и оптимистичный характер.</li>
+</ul>
+
+
+
+
+
+## Серверная часть: файлы и формы
+
+При вызове `xhr.send(file)`, файл пересылается в теле запроса, как будто отправлен через форму.
+
+Если нужно дополнительно передать имя файла или что-то ещё -- это можно сделать в заголовках, через `xhr.setRequestHeader`. И, конечно же, серверный фреймворк должен понимать, как это обработать.
+
+А что, если серверный фреймворк умеет нормально работать только с обычными формами, а как-то модифицировать его ну совсем нет желания и времени? 
+
+Нам поможет объект [FormData](https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects):
+
+```js
+var formData = new FormData();
+formData.append("file", file);
+xhr.send(formData);
+```
+
+Данные будут отправлены в кодировке `multipart/form-data`. Серверный фреймворк обработает это как обычную форму. 
+
+
+
+[head]
+<script src="/files/tutorial/ajax/script/scriptRequest.js"></script>
+[/head]
\ No newline at end of file
diff --git a/3-more/10-ajax/7-xhr-onprogress/progress/.zip b/3-more/10-ajax/7-xhr-onprogress/progress/.zip
new file mode 100755
index 00000000..99a80913
--- /dev/null
+++ b/3-more/10-ajax/7-xhr-onprogress/progress/.zip
@@ -0,0 +1,2 @@
+
+
diff --git a/3-more/10-ajax/7-xhr-onprogress/progress/index.html b/3-more/10-ajax/7-xhr-onprogress/progress/index.html
new file mode 100755
index 00000000..f7bfde96
--- /dev/null
+++ b/3-more/10-ajax/7-xhr-onprogress/progress/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<head><meta charset="utf-8"></head>
+<form name="upload">
+  <input type="file" name="file1">
+  <input type="submit" value="Загрузить">
+</form>
+
+<div id="log">Прогресс загрузки</div>
+
+<script>
+function log(html) {
+  document.getElementById('log').innerHTML = html;
+}
+
+function onSuccess() {
+  log('success');
+}
+
+function onError() {
+  log('error');
+}
+
+function onProgress(loaded, total) {
+  log(loaded + ' / '+ total);
+}
+
+var form = document.forms.upload;
+form.onsubmit = function() {
+  var file = this.elements.file1.files[0];  
+  if (file) upload(file, onSuccess, onError, onProgress);  
+  return false;
+}
+
+
+function upload(file, onSuccess, onError, onProgress) {
+
+  var xhr = new XMLHttpRequest();
+
+  xhr.onload = xhr.onerror = function() {
+    if(this.status != 200 || this.responseText != 'OK') {
+      onError(this);
+      return;
+    }
+    onSuccess();
+  };
+
+  xhr.upload.onprogress = function(event) {
+    onProgress(event.loaded, event.total);
+  }
+
+  xhr.open("POST", "upload.php", true); 
+  xhr.send(file);
+
+}
+</script>
+</body>
+</html>
diff --git a/3-more/10-ajax/7-xhr-onprogress/progress/upload.php b/3-more/10-ajax/7-xhr-onprogress/progress/upload.php
new file mode 100755
index 00000000..6e594cb7
--- /dev/null
+++ b/3-more/10-ajax/7-xhr-onprogress/progress/upload.php
@@ -0,0 +1,3 @@
+<?php
+/* получить и сохранить данные из php://input */
+?>OK
\ No newline at end of file
diff --git a/3-more/10-ajax/8-xhr-resume/article.md b/3-more/10-ajax/8-xhr-resume/article.md
new file mode 100644
index 00000000..7049d282
--- /dev/null
+++ b/3-more/10-ajax/8-xhr-resume/article.md
@@ -0,0 +1,318 @@
+# XMLHttpRequest: возобновляемая закачка
+
+Современный `XMLHttpRequest` даёт возможность загружать файл как угодно: во множество потоков, с догрузкой, с подсчётом контрольной суммы и т.п.
+
+Здесь мы рассмотрим общий подход к организации загрузки, а его уже можно расширять, адаптировать к своему фреймворку и так далее. 
+
+Поддержка -- все браузеры кроме IE<10.
+
+[cut]
+
+## Неточный upload.onprogress
+
+Ранее мы рассматривали загрузку с индикатором прогресса. Казалось бы, сделать возобновляемую загрузку на его основе очень просто. 
+
+Есть же `xhr.upload.onprogress` -- ставим на него обработчик, по свойству `loaded`  события `onprogress` смотрим, сколько байт загрузилось. А при обрыве -- возобновляем загрузку с последнего байта. 
+
+[smart]
+К счастью, отослать на сервер нужный отрезок файла -- не проблема, [File API](http://www.w3.org/TR/FileAPI/) позволяет прочитать выбранный участок из файла и отправить его.
+
+Примерно так:
+
+```js
+var slice = file.slice(10, 100); // прочитать байты с 10го по 99й включительно
+
+xhr.send(slice); // ... и отправить эти байты в запросе.
+```
+
+[/smart]
+
+..Но такая модель не жизнеспособна! 
+
+Всё дело в том, что `upload.onprogress` срабатывает, когда байты *отправлены*, но были ли они получены сервером -- браузер не знает. Может, их прокси-сервер забуферизовал, может серверный процесс "упал" в процессе обработки, может соединение порвалось и байты так и не дошли до получателя. 
+
+**Поэтому `onprogress` годится лишь для красивенького рисования прогресса.**
+
+Для загрузки нам нужно точно знать количество загруженных байт. Это может сообщить только сервер.
+
+## Общий вид загрузки
+
+Мы разберём несколько способов надёжной загрузки. 
+
+У них будет общим объект `Uploader` для загрузки, который имеет примерно следующий вид:
+
+```js
+function Uploader(file, onSuccess, onFail, onProgress) {
+  
+  var uploadId = Math.random();
+  var startByte = 0;
+
+  var fileId = file.name + '-' + file.size + '-' + (+file.lastModifiedDate);
+  
+  var errorCount = 0; 
+  var MAX_ERROR_COUNT = 6;
+
+  function upload() {
+    ...
+  }
+
+  function pause() {
+    ...
+  }
+
+  function resume() {
+    ...
+  }
+
+  this.upload = upload;
+  this.pause = pause;
+  this.resume = resume;
+
+}
+```
+
+Это -- самый общий интерфейс, разберём его подробнее.
+
+Аргументы:
+<dl>
+<dt>`file`</dt>
+<dd>Объект File API. Может быть получен из формы, либо как результат Drag'n'Drop.<dd>
+<dt>`onSuccess`, `onFail`, `onProgress`</dt>
+<dd>Функции-коллбэки, которые будут вызываться в процессе (`onProgress`) и при окончании загрузки.</dd>
+</dl>
+
+Используемые переменные:
+
+<dl>
+<dt>`uploadId`</dt>
+<dd>Уникальный идентификатор загрузки. Генерируется случайно. Передаётся на сервер в начале загрузки и при её возобновлении, чтобы сервер знал, что это тот же файл.</dd>
+<dt>`startByte`</dt>
+<dd>С какого байта загружать. Изначально -- с нулевого.</dd>
+<dt>`fileId`</dt>
+<dd>Идентификатор файла, основанный на его имени, размере и дате модификации. 
+
+По нему текущее состояние загрузки (`uploadId` и `startByte`) можно сохранить в `localStorage`, так что даже при закрытии браузера, а затем открытии и повторной загрузке того же файла -- браузер сможет продолжить загрузку.</dd>
+<dt>`errorCount / MAX_ERROR_COUNT`</dt>
+<dd>Число ошибок / максимальное число непрерывных ошибок, после которого загрузка считается проваленной.</dd>
+</dl>
+
+Использование:
+
+```js
+var uploader = new Uploader(form.elements.file.files[0], ...);
+
+uploader.upload(); // загружает с возобновлением
+uploader.pause();  // пауза
+uploader.resume(); // возобновление загрузки
+```
+
+## Способ 1: спрашиваем сервер
+
+Первый способ:
+
+<ol>
+<li>Функция `upload` загружает файл обычным образом. При ошибке, если это ещё возможно, вызываем `resume`:
+
+```js
+function upload() {
+  
+  xhrUpload = new XMLHttpRequest();
+  xhrUpload.onload = xhrUpload.onerror = function() {
+
+    if (this.status == 200) {
+      // успешное завершение загрузки
+      onSuccess();
+      return; 
+    }
+
+    // что-то не так
+    if (errorCount++ < MAX_ERROR_COUNT) {
+      setTimeout(resume, 1000); // через 1 сек пробуем ещё раз
+    } else {
+      onError(this.statusText);  
+    }     
+  };
+
+  xhrUpload.open("POST", "upload", true); 
+  // какой файл догружаем /загружаем
+  xhrUpload.setRequestHeader('X-Upload-Id', uploadId); 
+  // с какого байта (сервер сверит со своим размером для надёжности)
+  xhrUpload.setRequestHeader('X-Start-Byte', startByte); 
+  // полный размер загружаемого файла
+  xhrUpload.setRequestHeader('X-File-Size', file.size);
+
+  xhrUpload.upload.onprogress = function(e) {
+    errorCount = 0; 
+    onProgress( startByte + e.loaded, startByte + e.total);
+  }
+
+  // отослать, начиная с байта startByte
+  xhrUpload.send(file.slice(startByte));   
+}
+```
+
+</li>
+<li>При ошибке загрузка возобновляется. Но достоверной информацией о том, сколько байт получено, обладает лишь сервер. 
+
+Функция `resume` спрашивает его об этом запросом `XMLHttpRequest`, а затем возобновляет загрузку:
+
+```js
+function resume() {
+  xhrStatus = new XMLHttpRequest();
+
+  xhrStatus.onload = xhrStatus.onerror = function() {
+    if (this.status == 200) {
+      startByte = +this.responseText || 0;
+      upload();
+      return;
+    }
+
+    // что-то не так
+    if (errorCount++ < MAX_ERROR_COUNT) {
+      setTimeout(resume, 1000); // через 1 сек пробуем ещё раз
+    } else {
+      onError(this.statusText);  
+    }  
+  };
+
+  xhrStatus.open("GET", "status", true); 
+  xhrStatus.setRequestHeader('X-Upload-Id', uploadId);
+  xhrStatus.send('');
+}
+```
+
+</li>
+<li>Пауза-возобновление делаются просто:
+
+```js
+function pause() {
+  // обрываем все запросы
+  xhrStatus && xhrStatus.abort();
+  xhrUpload && xhrUpload.abort();
+}
+```
+
+</li>
+</ol>
+
+### Демо
+
+[iframe src="upload-resume" link zip border="1" height="160"]
+
+Полный код включает также сервер на Node.JS с функциям `onUpload` -- начало и возобновление загрузки, а также `onStatus` -- для получения состояния загрузки.
+
+## Способ 2: статус с сервера
+
+Предыдущий способ -- прост и хорош. Но для лучшего понимания рассмотрим ещё одну реализацию, которая более точна. 
+
+Событие `upload.onprogress`, которое используется для отображения прогресса загрузки -- неточное. Как мы говорили, оно использует данные браузера, а он не может знать, были ли данные успешно получены и, что самое главное, корректно обработаны сервером.
+
+Может быть такое, что индикатор показывает "100%", а на самом деле последний фрагмент ещё не загрузился.
+
+В большинстве случаев эта неточность вполне допустима. Но бывают ситуации, когда мы не имеем права показывать посетителю неточную информацию.
+
+**Описанный далее способ гарантирует точную информацию о процессе загрузке, цена -- дополнительный запрос.**
+
+[warn header="Почему нужен ещё один запрос?"]
+Первая идея, которая может прийти в голову -- это получать информацию о состоянии закачки из `xhr.onprogress`, то есть сервер должен при каждом полученном пакете байт писать полученную длину в ответ. 
+
+Звучит хорошо, но, к сожалению, в `XMLHttpRequest` браузер *сначала* закачивает данные, а *потом* читает. То есть, сначала сработают события `xhr.upload.onprogress`, `xhr.upload.onload`, а уже затем пойдут события на получение данных: `xhr.onprogress`, `xhr.onload` и другие. Браузер получит ответ сервера целиком уже после окончания загрузки, а нам прогресс нужен -- во время загрузки.
+[/warn]
+
+Будем использовать два запроса: в одном -- закачивать, в другом -- читать прогресс с сервера.
+
+<ul>
+<li>Функция `runUpload` будет открывать запрос `xhrUpload`, который отправляет данные на сервер. У него даже не будет `onprogress`, всю информацию о загрузке мы будем получать напрямую от сервера.</li>
+<li>Функция `trackStatus` будет открывать второй, параллельный, запрос `xhrStatus` и в нём, через `onprogress`, получать данные с сервера.</li>
+</ul>
+
+Серверный код будет читать из `xhrUpload`, записывать данные на диск и тут же рапортовать об этом в `xhrStatus`. 
+
+Код соответствующей функции `upload`:
+
+```js
+//+ src="browser.js"
+```
+
+Детали `trackStatus`:
+<ul>
+<li>В ответ на запрос `xhrStatus` сервер присылает информацию о загрузке с данным идентификатором, дописывая в ответ при поступлении (и, если угодно, записи) очередного пакета -- общий размер загруженных данных.
+
+Ответ сервера выглядит так:
+
+```
+1234-56789-123456-200123-423456-...
+```
+
+Это означает, что сервер сначала считал `1234` байта, затем получил ещё пакет и стало `56789`..И на текущий момент можно быть уверенными, что `423456` байт загружены.
+</li>
+<li>Функция `getLastProgress` читает из текущего ответа сервера последнее число. Обратим внимание, что она не может найти последний `-` и взять всё, что после него, т.к. последнее число, возможно, недогружено.
+
+Поэтому из ответа выше она возьмёт `200123`.</li>
+<li>Загрузка считается завершённой только после получения `xhrStatus.onload`.</li>
+</ul>
+
+Важна тонкость здесь -- в том, что запросы независимы. Любой из них может прийти на сервер первым. Возможно и такое, что закачка завершится до того, как запрос на статус достигнет сервера.
+
+### Демо
+
+Пример вместе с кодом сервера на NodeJS: 
+
+[iframe src="upload-2way" link zip border="1" height="160"]
+
+К этому коду можно легко добавить любую логику возобновления загрузки, подсчёта контрольной суммы и т.п. Ведь мы всегда точно знаем, до какого момента сервер получил файл.
+
+## Способ 3: загружаем по частям
+
+Есть ещё один способ. Я привожу его здесь для полноты, так как не раз видел его в статьях в интернет.
+
+Он заключается в том, чтобы разбить файл на части и отсылать их одну за другой. 
+
+Примерно так:
+
+```js
+function upload() {
+  // каждая часть 64000 байт, 
+  // можно делать меньше для маленьких файлов и больше для быстрых соединений
+  var chunk = file.slice(startByte, startByte+64000);
+ 
+  // на текущий момент уже загрузили from байт
+  onProgress(from, file.size); 
+
+  var xhr = new XMLHttpRequest();
+  
+  xhr.onload = function() {
+    // если всё закачали или сервер ответил ошибку - завершение
+    // если нет - вызвать загрузку следующей части
+    upload(file, startByte + 64000);
+  };
+
+  xhr.onerror = function() {
+    setTimeout(upload, 1000);
+  };
+
+  // ...
+  xhr.send(chunk);
+}
+```
+
+Пример заголовков и алгоритма для возобновляемой загрузки: [Спецификация Nginx Upload](http://www.grid.net.ru/nginx/resumable_uploads.ru.html). По ней работает модуль [Nginx Upload Module](http://www.grid.net.ru/nginx/upload.ru.html), но он, к сожалению, нестабилен, на момент написания этих строк замечены падения сервера, да и автор не горит желанием исправлять ошибки и отвечать на вопросы.
+
+Если вы вдруг видите преимущество этого способа перед описанными выше -- напишите об этом в комментариях.
+
+## Итого
+
+Мы рассмотрели 3 способа загрузки файлов через `XMLHttpRequest`:
+
+<ul>
+<li>Простой способ, с неточной индикацией прогресса.</li>
+<li>Более сложный способ, с увеличенным трафиком, но точной индикацией прогресса.</li>
+<li>Загрузка по частям.</li>
+</ul>
+
+Все их можно расширить каким угодно образом, включая:
+<ul>
+<li>Параллельную загрузку одного файла в несколько потоков.</li>
+<li>Хранение состояния в `localStorage`.</li>
+<li>Подсчёт контрольной суммы при загрузке. Для быстрой проверки рекомендуется алгоритм Adler32 (это быстрый вариант CRC-32 для длинных строк), для безопасной -- MD5, и то и другое реализуется на JavaScript.</li>
+</ul>
diff --git a/3-more/10-ajax/8-xhr-resume/browser.js b/3-more/10-ajax/8-xhr-resume/browser.js
new file mode 100755
index 00000000..87914d84
--- /dev/null
+++ b/3-more/10-ajax/8-xhr-resume/browser.js
@@ -0,0 +1,61 @@
+function Uploader(file, onSuccess, onError, onProgress) {
+  
+  // идентификатор загрузки, чтобы стыковать два потока
+  var uploadId = Math.random();
+
+  var xhrUpload;
+  var xhrStatus;
+
+  function upload() {
+    runUpload();
+    trackStatus();
+  }
+
+  // *!* Закачка: поток НА сервер */!*
+  function runUpload() {
+    xhrUpload = new XMLHttpRequest();
+    xhrUpload.onload = xhrUpload.onerror = function() {
+      xhrStatus.abort();
+      if (this.status != 200) {
+        onError("Upload error " + this.statusText);
+      } else {
+	onSuccess(); // не ждем xhrStatus, сервер не обязан хранить статус после завершения upload
+      }
+     
+    };
+    xhrUpload.open("POST", "upload", true); 
+    xhrUpload.setRequestHeader('X-Upload-Id', uploadId);
+    xhrUpload.send(file);
+  }
+
+  // *!* Получать статус: поток С сервера */!*  
+  function trackStatus() {
+    xhrStatus = new XMLHttpRequest(); 
+    xhrStatus.onprogress = function() {
+      onProgress( getLastProgress(xhrStatus.responseText), file.size );
+    }
+
+    xhrStatus.onerror = function() {
+      onError("Upload status error " + this.statusText);
+      xhrUpload.abort();    
+    }
+
+    xhrStatus.open("POST", "status-stream", true); 
+    xhrStatus.setRequestHeader('X-Upload-Id', uploadId);
+    xhrStatus.send('');
+  }
+
+  // *!* Функция для чтения количества байт из статуса сервера 12-345-... */!*
+  function getLastProgress(response) {
+    // читаем число между последним и предпоследним знаком -
+    var lastDelimiter = response.lastIndexOf('-');
+    if (lastDelimiter < 0) return 0;
+
+    var prevDelimiter = response.lastIndexOf('-', lastDelimiter - 1);
+    return response.slice(prevDelimiter+1, lastDelimiter);
+  }
+
+  // внешний интерфейс
+  this.upload = upload;
+
+}
diff --git a/3-more/10-ajax/8-xhr-resume/upload-2way/.zip b/3-more/10-ajax/8-xhr-resume/upload-2way/.zip
new file mode 100755
index 00000000..d3f5a12f
--- /dev/null
+++ b/3-more/10-ajax/8-xhr-resume/upload-2way/.zip
@@ -0,0 +1 @@
+
diff --git a/3-more/10-ajax/8-xhr-resume/upload-2way/browser.js b/3-more/10-ajax/8-xhr-resume/upload-2way/browser.js
new file mode 100755
index 00000000..87914d84
--- /dev/null
+++ b/3-more/10-ajax/8-xhr-resume/upload-2way/browser.js
@@ -0,0 +1,61 @@
+function Uploader(file, onSuccess, onError, onProgress) {
+  
+  // идентификатор загрузки, чтобы стыковать два потока
+  var uploadId = Math.random();
+
+  var xhrUpload;
+  var xhrStatus;
+
+  function upload() {
+    runUpload();
+    trackStatus();
+  }
+
+  // *!* Закачка: поток НА сервер */!*
+  function runUpload() {
+    xhrUpload = new XMLHttpRequest();
+    xhrUpload.onload = xhrUpload.onerror = function() {
+      xhrStatus.abort();
+      if (this.status != 200) {
+        onError("Upload error " + this.statusText);
+      } else {
+	onSuccess(); // не ждем xhrStatus, сервер не обязан хранить статус после завершения upload
+      }
+     
+    };
+    xhrUpload.open("POST", "upload", true); 
+    xhrUpload.setRequestHeader('X-Upload-Id', uploadId);
+    xhrUpload.send(file);
+  }
+
+  // *!* Получать статус: поток С сервера */!*  
+  function trackStatus() {
+    xhrStatus = new XMLHttpRequest(); 
+    xhrStatus.onprogress = function() {
+      onProgress( getLastProgress(xhrStatus.responseText), file.size );
+    }
+
+    xhrStatus.onerror = function() {
+      onError("Upload status error " + this.statusText);
+      xhrUpload.abort();    
+    }
+
+    xhrStatus.open("POST", "status-stream", true); 
+    xhrStatus.setRequestHeader('X-Upload-Id', uploadId);
+    xhrStatus.send('');
+  }
+
+  // *!* Функция для чтения количества байт из статуса сервера 12-345-... */!*
+  function getLastProgress(response) {
+    // читаем число между последним и предпоследним знаком -
+    var lastDelimiter = response.lastIndexOf('-');
+    if (lastDelimiter < 0) return 0;
+
+    var prevDelimiter = response.lastIndexOf('-', lastDelimiter - 1);
+    return response.slice(prevDelimiter+1, lastDelimiter);
+  }
+
+  // внешний интерфейс
+  this.upload = upload;
+
+}
diff --git a/3-more/10-ajax/8-xhr-resume/upload-2way/index.html b/3-more/10-ajax/8-xhr-resume/upload-2way/index.html
new file mode 100755
index 00000000..cba2dbee
--- /dev/null
+++ b/3-more/10-ajax/8-xhr-resume/upload-2way/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<head>
+  <meta charset="utf-8">
+  <script src="browser.js"></script>
+</head>
+<form name="upload" method="POST" enctype="multipart/form-data" action="/upload">
+  <input type="file" name="file1">
+  <input type="submit" name="submit" value="Загрузить">
+</form>
+
+<div id="log">Индикация прогресса</div>
+
+<script>
+function log(html) {
+  document.getElementById('log').innerHTML = html;
+}
+
+function onSuccess() {
+  log('success');
+}
+
+function onError() {
+  log('error');
+}
+
+function onProgress(loaded, total) {
+  log(loaded + ' / '+ total);
+}
+
+
+var uploader;
+
+document.forms.upload.onsubmit = function() {
+  var file = this.elements.file1.files[0];
+  if (!file) return false;
+  
+  uploader = new Uploader(file, onSuccess, onError, onProgress); 
+  uploader.upload(); 
+  return false;
+}
+
+
+</script>
+</body>
+</html>
diff --git a/3-more/10-ajax/8-xhr-resume/upload-2way/index.js b/3-more/10-ajax/8-xhr-resume/upload-2way/index.js
new file mode 100755
index 00000000..b49cac30
--- /dev/null
+++ b/3-more/10-ajax/8-xhr-resume/upload-2way/index.js
@@ -0,0 +1,118 @@
+var http = require('http');
+var static = require('node-static');
+var fileServer = new static.Server('.');
+var events = require('events');
+var fs = require('fs');
+var path = require('path');
+
+var uploads = {};
+
+var filesDir = '/tmp';
+
+function onUpload(req, res) {
+
+	var uploadId = req.headers['x-upload-id'];
+	if (!uploadId) {
+		res.writeHead(400, "No upload id");
+		res.end();
+	}
+
+	// инициализация новой загрузки
+	var upload = uploads[uploadId] = new events.EventEmitter();
+	upload.bytesWritten = 0;
+	
+	var filePath = path.join(filesDir, uploadId);
+
+	// будем сохранять в файл с именем uploadId
+	var fileStream = fs.createWriteStream(filePath);
+
+	// отправить тело запроса в файл
+	req.pipe(fileStream);
+
+	// при записи очередного фрагмента событие progress
+	fileStream.on('drain', function() {
+		upload.bytesWritten = fileStream.bytesWritten;
+		upload.emit("progress");
+	});
+
+	// в конце -- событие end
+	fileStream.on('close', function() {
+		upload.finished = true;
+		upload.emit("end");
+	});
+
+	// при ошибках - завершение запроса
+	fileStream.on('error', function (err) {
+		res.writeHead(500, "File error");
+		res.end('error');
+	});
+
+	// в конце запроса - очистка
+	req.on('end', function() {	
+		res.end();
+		delete uploads[uploadId]; 
+		// в этой демке мы не оставляем файл на диске, 
+		// в реальности здесь будет обработка успешной загрузки
+		fs.unlinkSync(filePath);
+	});
+
+}
+
+function onStatusStream(req, res) {
+
+	var uploadId = req.headers['x-upload-id'];
+	var upload = uploads[uploadId];
+
+	// нет такой загрузки?
+	// подождём немного, может почему-то запрос на статус дошёл до сервера раньше,
+	// и она ещё не началась
+	if (!upload) {
+		var interval = setTimeout(function() {
+			onStatusStream(req, res)
+		}, 500);
+		return;
+	}
+
+	// ..при окончании запроса на статус - прекращаем ждать
+	req.on('end', function() {
+		clearInterval(interval); 
+	});
+
+	// есть загрузка
+
+	// сразу же пишем текущий прогресс
+	res.write(upload.bytesWritten+'-');
+
+	// и по мере загрузки дописываем
+	upload.on('progress', function() {
+		res.write(upload.bytesWritten+'-');		
+	});
+
+	upload.on('end', function() {
+		res.end();
+	});
+}
+
+
+
+function accept(req, res) {
+	if (req.url == '/status-stream') {
+		onStatusStream(req, res);
+	} else if (req.url == '/upload' && req.method == 'POST') {
+		onUpload(req, res);
+	} else {
+		fileServer.serve(req, res);
+	}
+
+}
+
+
+// -----------------------------------
+
+if (!module.parent) {
+  http.createServer(accept).listen(8080);
+  console.log('Сервер запущен на порту 8080');
+} else {
+  exports.accept = accept;
+}
+
diff --git a/3-more/10-ajax/8-xhr-resume/upload-resume/.zip b/3-more/10-ajax/8-xhr-resume/upload-resume/.zip
new file mode 100755
index 00000000..d3f5a12f
--- /dev/null
+++ b/3-more/10-ajax/8-xhr-resume/upload-resume/.zip
@@ -0,0 +1 @@
+
diff --git a/3-more/10-ajax/8-xhr-resume/upload-resume/browser.js b/3-more/10-ajax/8-xhr-resume/upload-resume/browser.js
new file mode 100755
index 00000000..87b24c17
--- /dev/null
+++ b/3-more/10-ajax/8-xhr-resume/upload-resume/browser.js
@@ -0,0 +1,90 @@
+function Uploader(file, onSuccess, onFail, onProgress) {
+
+  // fileId уникальным образом идентифицирует файл
+  // можно добавить идентификатор сессии посетителя, но он и так будет в заголовках
+  // использование: можно добавить в localstorage состояние загрузки по этому ключу
+  var fileId = file.name + '-' + file.size + '-' + (+file.lastModifiedDate);
+
+  // uploadId уникальным образом идентифицирует попытку загрузки
+  var uploadId = Math.random();
+  var errorCount = 0; 
+  var MAX_ERROR_COUNT = 6; // максимальное количество ошибок, между которыми нет успешной загрузки
+  var startByte = 0;
+
+  var xhrUpload;
+  var xhrStatus;
+
+  function resume() {
+    //console.log("resume: check status");
+    xhrStatus = new XMLHttpRequest();
+
+    xhrStatus.onload = xhrStatus.onerror = function() {
+      if (this.status == 200) {
+        startByte = +this.responseText || 0;
+        //console.log("resume: startByte=" + startByte);
+        upload();
+        return;
+      }
+
+      // что-то не так
+      if (errorCount++ < MAX_ERROR_COUNT) {
+        setTimeout(resume, 1000); // через 1 сек пробуем ещё раз
+      } else {
+        onError(this.statusText);  
+      }  
+    };
+
+    xhrStatus.open("GET", "status", true); 
+    xhrStatus.setRequestHeader('X-Upload-Id', uploadId);
+    xhrStatus.send('');
+  }
+
+
+  function upload() {
+    
+    xhrUpload = new XMLHttpRequest();
+    xhrUpload.onload = xhrUpload.onerror = function() {
+      //console.log("upload end status:" + this.status + " text:"+this.statusText);
+
+      if (this.status == 200) {
+        // успешное завершение загрузки
+        onSuccess();
+        return; 
+      }
+
+      // что-то не так
+      if (errorCount++ < MAX_ERROR_COUNT) {
+        setTimeout(resume, 1000); // через 1 сек пробуем ещё раз
+      } else {
+        onError(this.statusText);  
+      }      
+    };
+
+    xhrUpload.open("POST", "upload", true); 
+    // какой файл догружаем /загружаем
+    xhrUpload.setRequestHeader('X-Upload-Id', uploadId); 
+    // с какого байта (сервер сверит со своим размером для надёжности)
+    xhrUpload.setRequestHeader('X-Start-Byte', startByte); 
+    // полный размер загружаемого файла
+    xhrUpload.setRequestHeader('X-File-Size', file.size);
+
+    xhrUpload.upload.onprogress = function(e) {
+      errorCount = 0; 
+      onProgress( startByte + e.loaded, startByte + e.total);
+    }
+
+    // отослать, начиная с байта startByte
+    xhrUpload.send(file.slice(startByte));   
+  }
+
+  function pause() {
+    xhrStatus && xhrStatus.abort();
+    xhrUpload && xhrUpload.abort();
+  }
+
+
+  this.upload = upload;
+  this.pause = pause;
+  this.resume = resume;
+
+}
diff --git a/3-more/10-ajax/8-xhr-resume/upload-resume/index.html b/3-more/10-ajax/8-xhr-resume/upload-resume/index.html
new file mode 100755
index 00000000..c5a6aba3
--- /dev/null
+++ b/3-more/10-ajax/8-xhr-resume/upload-resume/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<head>
+  <meta charset="utf-8">
+  <script src="browser.js"></script>
+</head>
+<form name="upload" method="POST" enctype="multipart/form-data" action="/upload">
+  <input type="file" name="file1">
+  <input type="submit" name="submit" value="Загрузить">
+</form>
+
+<button onclick="uploader.pause()">Пауза</button>
+<button onclick="uploader.resume()">Возобновить</button>
+
+
+<div id="log">Индикация прогресса</div>
+
+<script>
+function log(html) {
+  document.getElementById('log').innerHTML = html;
+  //console.log(html);
+}
+
+function onSuccess() {
+  log('success');
+}
+
+function onError() {
+  log('error');
+}
+
+function onProgress(loaded, total) {
+  log("progress " + loaded + ' / '+ total);
+}
+
+var uploader;
+
+document.forms.upload.onsubmit = function() {
+  var file = this.elements.file1.files[0];
+  if (!file) return false;
+  
+  uploader = new Uploader(file, onSuccess, onError, onProgress); 
+  uploader.upload(); 
+  return false;
+}
+
+
+</script>
+</body>
+</html>
diff --git a/3-more/10-ajax/8-xhr-resume/upload-resume/index.js b/3-more/10-ajax/8-xhr-resume/upload-resume/index.js
new file mode 100755
index 00000000..fa69eb42
--- /dev/null
+++ b/3-more/10-ajax/8-xhr-resume/upload-resume/index.js
@@ -0,0 +1,115 @@
+var http = require('http');
+var static = require('node-static');
+var fileServer = new static.Server('.');
+var fs = require('fs');
+var path = require('path');
+
+var uploads = {};
+
+var filesDir = '/tmp';
+
+function onUpload(req, res) {
+
+	var uploadId = req.headers['x-upload-id'];
+	var startByte = req.headers['x-start-byte'];
+
+	if (!uploadId) {
+		res.writeHead(400, "No upload id");
+		res.end();
+	}
+
+	var filePath = path.join(filesDir, uploadId); // можно положить файл и в другое место
+
+	//console.log("onUpload uploadId: ", uploadId);
+	// инициализация новой загрузки
+	if (!uploads[uploadId]) uploads[uploadId] = {};
+	var upload = uploads[uploadId];
+	
+	console.log("bytesReceived:" + upload.bytesReceived + " startByte:" + startByte)
+
+	// если байт 0, то создать новый файл, иначе проверить размер и дописать
+	if (startByte == 0) {
+		upload.bytesReceived = 0;
+		var fileStream = fs.createWriteStream(filePath, {flags: 'w'});
+		console.log("New file created: " + filePath);
+	} else {
+		if (upload.bytesReceived != startByte) {
+			res.writeHead(400, "Wrong start byte");
+			res.end(upload.bytesReceived);
+			return;
+		}
+		fileStream = fs.createWriteStream(filePath, {flags: 'a'});
+		console.log("File reopened: " + filePath);
+	}
+
+
+	req.on('data', function(data) {
+		upload.bytesReceived += data.length;
+	});
+
+	// отправить тело запроса в файл
+	req.pipe(fileStream);
+
+	// в конце -- событие end
+	fileStream.on('close', function() {
+		if (upload.bytesReceived == req.headers['x-file-size']) {
+			// полностью загрузили
+			console.log("File finished");
+			delete uploads[uploadId];
+
+			fs.unlinkSync(filePath); // удаляю загруженный файл (а мог бы делать с ним что-то еще)
+
+			res.end("Success " + upload.bytesReceived);
+		} else {
+			// соединение оборвано, дескриптор закрылся но файл оставляем
+			console.log("File unfinished, stopped at " + upload.bytesReceived);
+			res.end();
+		}
+	});
+
+	// при ошибках - завершение запроса
+	fileStream.on('error', function (err) {
+		console.log("fileStream error");
+		res.writeHead(500, "File error");
+		res.end();
+	});
+
+}
+
+function onStatus(req, res) {
+	var uploadId = req.headers['x-upload-id'];
+	var upload = uploads[uploadId];
+	console.log("onStatus uploadId:", uploadId, " upload:", upload);
+	if (!upload) {
+		res.writeHead(404);
+		res.end("No such upload");
+		return;
+	}
+
+	res.end(String(upload.bytesReceived));
+}
+
+
+function accept(req, res) {
+	if (req.url == '/status') {
+		onStatus(req, res);
+	} else if (req.url == '/upload' && req.method == 'POST') {
+		onUpload(req, res);
+	} else {
+	    fileServer.serve(req, res);
+	}
+
+}
+
+
+
+
+// -----------------------------------
+
+if (!module.parent) {
+  http.createServer(accept).listen(8080);
+  console.log('Сервер запущен на порту 8080');
+} else {
+  exports.accept = accept;
+}
+
diff --git a/3-more/10-ajax/9-websockets/article.md b/3-more/10-ajax/9-websockets/article.md
new file mode 100644
index 00000000..15e93f13
--- /dev/null
+++ b/3-more/10-ajax/9-websockets/article.md
@@ -0,0 +1,494 @@
+# WebSocket 
+
+Протокол `WebSocket` (стандарт [RFC 6455](http://tools.ietf.org/html/rfc6455)) предназначен для решения любых задач и снятия ограничений обмена данными между браузером и сервером.
+
+Он позволяет пересылать любые данные, на любой домен, безопасно и почти без лишнего сетевого трафика.
+
+[cut]
+
+## Пример браузерного кода
+
+Для открытия соединения достаточно создать объект `WebSocket`, указав в нём специальный протокол `ws`.:
+
+```js
+var socket = new WebSocket("*!*ws*/!*://javascript.ru/ws");
+```
+
+У объекта `socket` есть четыре коллбэка: один при получении данных и три -- при изменениях в состоянии соединения:
+
+```js
+ 
+*!*socket.onopen*/!* = function() { 
+  alert("Соединение установлено."); 
+};
+
+*!*socket.onclose*/!* = function(event) { 
+  if (event.wasClean) {
+    alert('Соединение закрыто чисто');
+  } else {
+    alert('Обрыв соединения'); // например, "убит" процесс сервера
+  }
+  alert('Код: ' + event.code + ' причина: ' + event.reason);
+};
+ 
+*!*socket.onmessage*/!* = function(event) { 
+  alert("Получены данные " + event.data);
+};
+
+*!*socket.onerror*/!* = function(error) { 
+  alert("Ошибка " + error.message); 
+};
+```
+
+**Для посылки данных используется метод `socket.send(data)`. Пересылать можно любые данные.** 
+
+Например, строку:
+
+```js
+socket.send("Привет");
+```
+
+...Или файл, выбранный в форме:
+
+```js
+socket.send(*!*form.elements[0].file*/!*);
+```
+
+Просто, не правда ли? Выбираем, что переслать, и `socket.send()`.
+
+**Для того, чтобы коммуникация была успешной, сервер должен поддерживать протокол WebSocket.**
+
+Чтобы лучше понимать происходящее -- посмотрим, как он устроен.
+
+## Установление WebSocket-соединения
+
+Протокол `WebSocket` работает *над* HTTP.
+
+Это означает, что при соединении браузер отправляет специальные заголовки, спрашивая: "поддерживает ли сервер WebSocket?".
+
+Если сервер в ответных заголовках отвечает "да, поддерживаю", то дальше HTTP прекращается и общение идёт на специальном протоколе WebSocket, который уже не имеет с HTTP ничего общего.
+
+### Установление соединения
+
+Пример запроса от браузера при создании нового объекта `new WebSocket("ws://server.example.com/chat")`:
+
+```
+GET /chat HTTP/1.1
+Host: server.example.com
+Upgrade: websocket
+Connection: Upgrade
+Origin: http://javascript.ru
+Sec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q==
+Sec-WebSocket-Version: 13
+```
+
+Описания заголовков:
+<dl>
+<dt>GET, Host</dt>
+<dd>Стандартные HTTP-заголовки из URL запроса</dd>
+<dt>Upgrade, Connection</dt>
+<dd>Указывают, что браузер хочет перейти на websocket.</dd>
+<dt>Origin</dt>
+<dd>Протокол, домен и порт, откуда отправлен запрос.</dd>
+<dt>Sec-WebSocket-Key</dt>
+<dd>Случайный ключ, который генерируется браузером: 16 байт в кодироке [Base64](http://ru.wikipedia.org/wiki/Base64).</dd>
+<dt>Sec-WebSocket-Version</dt>
+<dd>Версия протокола. Текущая версия: 13.</dd>
+</dl>
+
+Все заголовки, кроме `GET` и `Host`, браузер генерирует сам, без возможности вмешательства JavaScript.
+
+[smart header="Такой XMLHttpRequest создать нельзя"]
+Создать подобный XMLHttpRequest-запрос (подделать `WebSocket`) невозможно, по одной  простой причине: указанные выше заголовки запрещены к установке методом `setRequestHeader`.
+[/smart]
+
+**Сервер может проанализировать эти заголовки и решить, разрешает ли он `WebSocket` с данного домена `Origin`.**
+
+Ответ сервера, если он понимает и разрешает `WebSocket`-подключение:
+
+```
+HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g=
+```
+
+Здесь строка `Sec-WebSocket-Accept` представляет собой перекодированный по специальному алгоритму ключ `Sec-WebSocket-Key`. Браузер использует её для проверки, что ответ предназначается именно ему.
+
+Затем данные передаются по специальному протоколу, структура которого ("фреймы") изложена далее. И это уже совсем не HTTP.
+
+### Расширения и подпротоколы
+Также возможны дополнительные заголовки `Sec-WebSocket-Extensions` и `Sec-WebSocket-Protocol`, описывающие расширения и подпротоколы (subprotocol), которые поддерживает данный клиент.
+
+Посмотрим разницу между ними на двух примерах:
+<ul>
+<li>Заголовок `Sec-WebSocket-Extensions: deflate-frame` означает, что браузер поддерживает модификацию протокола, обеспечивающую сжатие данных. 
+
+Это говорит не о самих данных, а об улучшении способа их передачи. Браузер сам формирует этот заголовок.</li>
+<li>Заголовок `Sec-WebSocket-Protocol: soap, wamp` говорит о том, что по WebSocket браузер собирается передавать не просто какие-то данные, а данные в протоколах [SOAP](http://ru.wikipedia.org/wiki/SOAP) или WAMP ("The WebSocket Application Messaging Protocol"). Стандартные подпротоколы регистрируются в специальном каталоге [IANA](http://www.iana.org/assignments/websocket/websocket.xml).
+
+Этот заголовок браузер поставит, если указать второй необязательный параметр `WebSocket`:
+
+```js
+ 
+var socket = new WebSocket("*!*ws*/!*://javascript.ru/ws", ["soap", "wamp"]);
+```
+
+</li>
+</ul>
+
+При наличии таких заголовков сервер может выбрать расширения и подпротоколы, которые он поддерживает, и ответить с ними.
+
+Например, запрос:
+
+```
+GET /chat HTTP/1.1
+Host: server.example.com
+Upgrade: websocket
+Connection: Upgrade
+Origin: http://javascript.ru
+Sec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q==
+Sec-WebSocket-Version: 13
+*!*
+Sec-WebSocket-Extensions: deflate-frame
+Sec-WebSocket-Protocol: soap, wamp
+*/!*
+```
+
+Ответ:
+
+```
+HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g=
+*!*
+Sec-WebSocket-Extensions: deflate-frame
+Sec-WebSocket-Protocol: soap
+*/!*
+```
+
+В ответе выше сервер указывает, что поддерживает расширение `deflate-frame`, а из запрошенных подпротоколов -- только SOAP.
+
+### WSS
+
+Соединение `WebSocket` можно открывать как `WS://` или как `WSS://`. Протокол `WSS` представляет собой WebSocket над HTTPS.
+
+**Кроме большей безопасности, у `WSS` есть важное преимущество перед обычным `WS` -- большая вероятность соединения.**
+
+Дело в том, что HTTPS шифрует трафик от клиента к серверу, а HTTP -- нет.
+
+Если между клиентом и сервером есть прокси, то в случае с HTTP все WebSocket-заголовки и данные передаются через него. Прокси имеет к ним доступ, ведь они никак не шифруются, и может расценить происходящее как нарушение протокола HTTP, обрезать заголовки или оборвать передачу.
+
+А в случае с `WSS` весь трафик сразу кодируется и через прокси проходит уже в закодированном виде. Поэтому заголовки гарантированно пройдут, и общая вероятность соединения через `WSS` выше, чем через `WS`.
+
+## Формат данных
+
+Полное описание протокола содержится в [RFC 6455](http://tools.ietf.org/html/rfc6455).
+
+Здесь представлено частичное описание с комментариями самых важных его частей. Если вы хотите понять стандарт, то рекомендуется сначала прочитать это описание.
+
+### Описание фрейма
+
+В протоколе WebSocket предусмотрены несколько видов пакетов ("фреймов").
+
+Они делятся на два больших типа: фреймы с данными ("data frames") и управляющие ("control frames"), предназначенные для проверки связи (PING) и закрытия соединения.
+
+Фрейм, согласно стандарту, выглядит так:
+
+<pre>
+    0                   1                   2                   3
+    0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+   +-+-+-+-+-------+-+-------------+-------------------------------+
+   |F|R|R|R| опкод |М| Длина тела  |    Расширенная длина тела     |
+   |I|S|S|S|(4бита)|А|   (7бит)    |            (1 байт)           |
+   |N|V|V|V|       |С|             |(если длина тела==126 или 127) |
+   | |1|2|3|       |К|             |                               |
+   | | | | |       |А|             |                               |  
+   +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+   |  Продолжение расширенной длины тела, если длина тела = 127    |
+   + - - - - - - - - - - - - - - - +-------------------------------+
+   |                               |  Ключ маски, если МАСКА = 1   |
+   +-------------------------------+-------------------------------+
+   | Ключ маски (продолжение)      |       Данные фрейма ("тело")  |
+   +-------------------------------- - - - - - - - - - - - - - - - +
+   :                     Данные продолжаются ...                   :
+   + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+   |                     Данные продолжаются ...                   |
+   +---------------------------------------------------------------+
+</pre>
+
+С виду -- не очень понятно, во всяком случае, для большинства людей.
+
+**Позвольте пояснить: читать следует слева-направо, сверху-вниз, каждая горизонтальная полоска это 32 бита.**
+
+То есть, вот первые 32 бита:
+
+<pre>
+    0                   1                   2                   3
+    0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+   +-+-+-+-+-------+-+-------------+-------------------------------+
+   |F|R|R|R| опкод |М| Длина тела  |    Расширенная длина тела     |
+   |I|S|S|S|(4бита)|А|   (7бит)    |            (1 байт)           |
+   |N|V|V|V|       |С|             |(если длина тела==126 или 127) |
+   | |1|2|3|       |К|             |                               |
+   | | | | |       |А|             |                               |  
+   +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+</pre>
+
+Сначала идёт бит FIN (вертикальная надпись на рисунке), затем биты RSV1, RSV2, RSV3 (их смысл раскрыт ниже), затем "опкод", "МАСКА" и, наконец,  "Длина тела", которая занимает 7 бит. Затем, если "Длина тела" равна 126 или 127, идёт "Расширенная длина тела", потом (на следующей строке, то есть после первых 32 бит) будет её продолжение, ключ маски, и потом данные.
+
+А теперь -- подробное описание частей фрейма, то есть как именно передаются сообщения:
+
+<dl>
+<dt>FIN: 1 бит</dt>
+<dd>Одно сообщение, если оно очень длинное (вызовом `send` можно передать хоть целый файл), может состоять из множества фреймов ("быть фрагментированным"). 
+
+У всех фреймов, кроме последнего, этот фрагмент установлен в `0`, у последнего -- в `1`. 
+
+Если сообщение состоит из одного-единственного фрейма, то он в нём `FIN` равен `1`.</dd>
+<dt>RSV1, RSV2, RSV3:  1 бит каждый</dt>
+<dd>В обычном WebSocket равны `0`, предназначены для расширений протокола. Расширение может записать в эти биты свои значения.</dd>
+<dt>Опкод: 4 бита</dt>
+<dd>Задаёт тип фрейма, который позволяет интерпретировать находящиеся в нём данные. Возможные значения:
+<ul>
+<li>`0x1` обозначает текстовый фрейм.</li>
+<li>`0x2` обозначает двоичный фрейм.</li>
+<li>`0x3-7` зарезервированы для будущих фреймов с данными.</li>
+<li>`0x8` обозначает закрытие соединения этим фреймом.</li>
+<li>`0x9` обозначат PING.</li>
+<li>`0xA` обозначат PONG.</li>
+<li>`0xB-F` зарезервированы для будущих управляющих фреймов.</li>
+<li>`0x0` обозначает фрейм-продолжение для фрагментированного сообщения. Он интерпретируется, исходя из ближайшего предыдущего ненулевого типа.</li>
+</ul>
+</dd>
+<dt>Маска: 1 бит</dt>
+<dd>Если этот бит установлен, то данные фрейма маскированы. Более подробно маску и маскирование мы рассмотрим далее.</dd>
+<dt>Длина тела:  7 битов, 7+16 битов, или 7+64 битов</dt>
+<dd>Если значение поле "Длина тела" лежит в интервале `0-125`, то оно обозначает длину тела (используется далее). 
+Если `126`, то следующие 2 байта интерпретируются как 16-битное беззнаковое целое число, содержащее длину тела.
+Если `127`, то следующие 8 байт интерпретируются как 64-битное беззнаковое целое, содержащее длину. 
+
+Такая хитрая схема нужна, чтобы минимизировать накладные расходы. Для сообщений длиной `125` байт и меньше хранение длины потребует всего 7 битов, для бóльших (до 65536) -- 7 битов + 2 байта, ну а для ещё бóльших -- 7 битов и 8 байт. Этого хватит для хранения длины сообщения размером в гигабайт и более.</dd>
+<dt>Ключ маски: 4 байта.</dt>
+<dd>Если бит `Маска` установлен в 0, то этого поля нет. Если в `1` то эти байты содержат маску, которая налагается на тело (см. далее).</dd>
+<dt>Данные фрейма (тело)</dt>
+<dd>Состоит из "данных расширений" и "данных приложения", которые идут за ними. Данные расширений определяются конкретными расширениями протокола и по умолчанию отсутствуют. Длина тела должна быть равна указанной в заголовке.</dd>
+</dl>
+
+### Примеры
+
+Некоторые примеры сообщений:
+
+<ul>
+<li>Нефрагментированное текстовое сообщение `Hello` без маски:
+
+```
+0x81 0x05 0x48 0x65 0x6c 0x6c 0x6f (содержит "Hello")
+```
+
+В заголовке первый байт содержит `FIN=1` и `опкод=0x1` (получается `10000001` в двоичной системе, то есть `0x81` -- в 16-ричной), далее идёт длина `0x5`, далее текст.
+</li>
+<li>Фрагментированное текстовое сообщение `Hello World` из трёх частей, без маски, может выглядеть так:
+
+```
+0x01 0x03 0x48 0x65 0x6c 0x6c 0x6f (содержит "Hello")
+0x00 0x01 0x20 (содержит " ")
+0x80 0x05 0x57 0x6f 0x72 0x6c 0x64 (содержит "World")
+```
+
+<ol>
+<li>У первого фрейма `FIN=0` и текстовый опкод `0x1`.</li>
+<li>У второго `FIN=0` и опкод `0x0`. При фрагментации сообщения, у всех фреймов, кроме первого, опкод пустой (он один на всё сообщение).</li>
+<li>У третьего, последнего фрейма `FIN=1`.</li>
+</ol>
+</li>
+</ul>
+
+А теперь посмотрим на все те замечательные возможности, которые даёт этот формат фрейма.
+
+### Фрагментация
+
+Позволяет отправлять сообщения в тех случаях, когда на момент начала посылки полный размер ещё неизвестен. 
+
+Например, идёт поиск в базе данных и что-то уже найдено, а что-то ещё может быть позже.
+
+<ul>
+<li>У всех сообщений, кроме последнего, бит `FIN=0`.</li>
+<li>Опкод указывается только у первого, у остальных он должен быть равен `0x0`.</li>
+</ul>
+
+### PING / PONG
+
+В протокол встроена проверка связи при помощи управляющих фреймов типа PING и PONG.
+
+Тот, кто хочет проверить соединение, отправляет фрейм PING с произвольным телом. Его получатель должен в разумное время ответить фреймом PONG с тем же телом.
+
+Этот функционал встроен в браузерную реализацию, так что браузер ответит на PING сервера, но управлять им из JavaScript нельзя. 
+
+**Иначе говоря, сервер всегда знает, жив ли посетитель или у него проблема с сетью.**
+
+### Чистое закрытие
+
+При закрытии соединения сторона, желающая это сделать (обе стороны в WebSocket равноправны) отправляет закрывающий фрейм (опкод `0x8`), в теле которого указывает причину закрытия.
+
+В браузерной реализации эта причина будет содержаться в свойстве `reason` события `onclose`.
+
+**Наличие такого фрейма позволяет отличить "чистое закрытие" от обрыва связи.**
+
+В браузерной реализации событие `onclose` при чистом закрытии имеет `event.wasClean = true`.
+
+### Коды закрытия
+
+Коды закрытия вебсокета `event.code`, чтобы не путать их с HTTP-кодами, состоят из 4 цифр:
+
+<dl>
+<dt>`1000`</dt>
+<dd>Нормальное закрытие.</dd>
+<dt>`1001`</dt>
+<dd>Удалённая сторона "исчезла". Например, процесс сервера убит или браузер перешёл на другую страницу.</dd>
+<dt>`1002`</dt>
+<dd>Удалённая сторона завершила соединение в связи с ошибкой протокола.</dd>
+<dt>`1003`</dt>
+<dd>Удалённая сторона завершила соединение в связи с тем, что она получила данные, которые не может принять. Например, сторона, которая понимает только текстовые данные, может закрыть соединение с таким кодом, если приняла бинарное сообщение.</dd>
+</dl>
+
+### Атака "отравленный кэш"
+
+В ранних реализациях WebSocket существовала уязвимость, называемая "отравленный кэш" (cache poisoning).
+
+**Она позволяла атаковать кэширующие прокси-сервера, в частности, корпоративные.**
+
+Атака осуществлялась так:
+
+<ol>
+<li>Хакер заманивает доверчивого посетителя (далее Жертва) на свою страницу.</li>
+<li>Страница открывает `WebSocket`-соединение на сайт хакера. Предполагается, что Жертва сидит через прокси. Собственно, на прокси и направлена эта атака.</li>
+<li>Страница формирует специального вида WebSocket-запрос, который (и здесь самое главное!) ряд прокси серверов не понимают.
+
+Они пропускают начальный запрос через себя (который содержит `Connection: upgrade`) и думают, что далее идёт уже следующий HTTP-запрос. 
+
+..Но на самом деле там данные, идущие через вебсокет! И обе стороны вебсокета (страница и сервер) контролируются Хакером. Так что хакер может передать в них нечто похожее на GET-запрос к известному ресурсу, например `http://code.jquery.com/jquery.js`, а сервер ответит "якобы кодом jQuery" с кэширующими заголовками. 
+
+Прокси послушно проглотит этот ответ и закэширует "якобы jQuery".</li>
+<li>В результате при загрузке последующих страниц любой пользователь, использующий тот же прокси, что и Жертва, получит вместо `http://code.jquery.com/jquery.js` хакерский код.</li>
+</ol>
+
+Поэтому эта атака и называется "отравленный кэш".
+
+**Такая атака возможна не для любых прокси, но при анализе уязвимости было показано, что она не теоретическая, и уязвимые прокси действительно есть.**
+
+Поэтому придумали способ защиты -- "маску".
+
+
+### Маска для защиты от атаки
+
+Для того, чтобы защититься от атаки, и придумана маска. 
+
+*Ключ маски* -- это случайное 32-битное значение, которое варьируется от пакета к пакету. Тело сообщения проходит через XOR `^` с маской, а получатель восстанавливает его повторным XOR с ней (можно легко доказать, что `(x ^ a) ^ a == x`).
+
+Маска служит двум целям:
+<ol>
+<li>Она генерируется браузером. Поэтому теперь хакер не сможет управлять реальным содержанием тела сообщения. После накладывания маски оно превратиться в бинарную мешанину.</li>
+<li>Получившийся пакет данных уже точно не может быть воспринят промежуточным прокси как HTTP-запрос.</li>
+</ol>
+
+**Наложение маски требует дополнительных ресурсов, поэтому протокол WebSocket не требует её.**
+
+Если по этому протокола связываются два клиента (не обязательно браузеры), доверяющие друг другу и посредникам, то можно поставить бит `Маска` в `0`, и тогда ключ маски не указывается.
+
+
+## Пример
+
+Рассмотрим прототип чата на WebSocket и Node.JS.
+
+HTML: посетитель отсылает сообщения из формы и принимает в `div`
+
+```html
+<!-- форма для отправки сообщений -->
+<form name="publish">
+  <input type="text" name="message"/>
+  <input type="submit" value="Отправить"/>
+</form>
+
+<!-- здесь будут появляться входящие сообщения -->
+<div id="subscribe"></div>
+```
+
+Код на клиенте:
+
+```js
+// создать подключение
+var socket = new WebSocket("ws://localhost:8081");
+
+// отправить сообщение из формы publish
+document.forms.publish.onsubmit = function() {
+  var outgoingMessage = this.message.value;
+
+  socket.send(outgoingMessage);
+  return false;
+};
+
+// обработчик входящих сообщений
+socket.onmessage = function(event) {
+  var incomingMessage = event.data;
+  showMessage(incomingMessage); 
+};
+
+// показать сообщение в div#subscribe
+function showMessage(message) {
+  var messageElem = document.createElement('div');
+  messageElem.appendChild(document.createTextNode(message));
+  document.getElementById('subscribe').appendChild(messageElem);
+}
+```
+
+Серверный код можно писать на любой платформе. В нашем случае это будет Node.JS, с использованием модуля [ws](http://einaros.github.com/ws/):
+
+```js
+var WebSocketServer = new require('ws');
+
+// подключенные клиенты
+var clients = {};
+
+// WebSocket-сервер на порту 8081
+var webSocketServer = new WebSocketServer.Server({port: 8081});
+webSocketServer.on('connection', function(ws) {
+
+  var id = Math.random();
+  clients[id] = ws;
+  console.log("новое соединение " + id);
+
+  ws.on('message', function(message) {
+    console.log('получено сообщение ' + message);
+
+    for(var key in clients) {
+      clients[key].send(message);
+    }
+  });
+
+  ws.on('close', function() {
+    console.log('соединение закрыто ' + id);
+    delete clients[id];
+  });
+
+});
+```
+
+Рабочий пример можно скачать: [websocket.zip](/zip/tutorial/ajax/websocket.zip). Понадобится поставить два модуля: `npm install node-static && npm install ws`.
+## Итого
+
+WebSocket -- современное средство коммуникации. Кросс-доменное, универсальное, безопасное.
+
+На текущий момент он работает в браузерах IE10+, FF11+, Chrome 16+, Safari 6+, Opera 12.5+. В более старых версиях FF, Chrome, Safari, Opera есть поддержка черновых редакций протокола.
+
+Там, где вебсокеты не работают -- обычно используют другие транспорты, например `IFRAME`. Вы найдёте их в других статьях этого раздела.
+
+Есть и готовые библиотеки, реализующие функционал COMET с использованием сразу нескольких транспортов, из которых вебсокет имеет приоритет. Как правило, библиотеки состоят из двух частей: клиентской и серверной.
+
+Например, для Node.JS одной из самых известных библиотек является [Socket.IO](http://socket.io).
+
+К недостаткам библиотек следует отнести то, что некоторые продвинутые возможности WebSocket, такие как двухсторонний обмен бинарными данными, в них недоступны. С другой -- в большинстве случаев стандартного текстового обмена вполне достаточно.
+[head]
+<script src="/files/tutorial/ajax/script/scriptRequest.js"></script>
+[/head]
\ No newline at end of file
diff --git a/3-more/10-ajax/index.md b/3-more/10-ajax/index.md
new file mode 100644
index 00000000..5956b3cd
--- /dev/null
+++ b/3-more/10-ajax/index.md
@@ -0,0 +1,5 @@
+# AJAX
+
+Современный `XMLHttpRequest`, включая поддержку докачки, индикации прогресса, кросс-доменных запросов.
+
+WebSocket. Альтернативные методы общения с сервером при помощи JSONP и IFRAME'ов.
\ No newline at end of file
diff --git a/3-more/11-css-for-js/1-css-why/article.md b/3-more/11-css-for-js/1-css-why/article.md
new file mode 100644
index 00000000..baf3958b
--- /dev/null
+++ b/3-more/11-css-for-js/1-css-why/article.md
@@ -0,0 +1,73 @@
+# О чём пойдёт речь
+
+Неужели мы сейчас будем учить CSS? Ничего подобного. Предполагается, что вы *уже* знаете CSS, во всяком случае понимаете его на таком уровне, который позволяет делать Web-страницы.
+
+[cut]
+Особенность квалификации JavaScript-разработчика заключается в том, что он не обязан выбирать цвета, рисовать иконки, "делать красиво". Он также не обязан верстать макет в HTML, разве что если является по совместительству специалистом-верстальщиком. 
+
+**Вот что он должен уметь абсолютно точно -- так это и разработать такую структуру HTML/CSS для элементов управления, которая не сломается, и с которой ему же потом удобно будет взаимодействовать**. 
+
+Это требует **отличного знания CSS в области позиционирования** элементов, включая тонкости работы `display`, `margin`, `border`, `outline`, `position`, `float`, `border-box` и остальных свойств, а также подходы к построению структуры компонент (CSS layouts).
+
+Многое можно сделать при помощи JavaScript. И зачастую, не зная CSS, так и делают. Но мы на это ловиться не будем.
+
+[summary]
+Если что-то можно сделать через CSS -- лучше делать это через CSS.
+[/summary]
+
+Причина проста -- как бы ни был сложен CSS, JavaScript ещё сложнее. С этим можно поспорить, особенно если достать из нафталина IE 6,7 (IE5.5 не завалялся?) и показать, что CSS там ну совсем никакой. Да и в IE8 тоже есть забавные баги. 
+
+**Как правило, даже если CSS на вид сложнее -- поддерживать и развивать его проще, чем JS**. Поэтому овчинка стоит выделки.
+
+Кроме того, есть ещё одно наблюдение.
+
+[summary]
+Знание JavaScript не может заменить знание CSS.
+[/summary]
+
+Жить становится приятнее и проще, если есть хорошее знание и CSS и JavaScript. 
+
+## Чек-лист
+
+Ниже находится "чек-лист". Если хоть одно свойство незнакомо -- это стоп-сигнал для дальнейшего чтения этого раздела.
+
+<ul>
+<li>Блочная модель, включая:
+<ul>
+<li>`margin`, `padding`, `border`, `overflow`</li>
+<li>а также `height/width` и `min-height/min-width`.</li>
+</ul>
+</li>
+<li>Текст:
+<ul>
+<li>`font`</li><li>`line-height`.</li>
+</ul></li>
+<li>Различные курсоры `cursor`.</li>
+<li>Позиционирование:
+<ul><li>`position`, `float`, `clear`, `display`, `visibility`</li>
+<li>Центрирование при помощи CSS</li>
+<li>Перекрытие `z-index` и прозрачность `opacity`</li>
+</ul>
+</li>
+<li>Cелекторы:
+<ul><li>Приоритет селекторов</li>
+<li>Селекторы `#id`, `.class`, `a > b`</li>
+</ul>
+</li>
+<li>Сброс браузерных стилей, <a href="http://meyerweb.com/eric/tools/css/reset/">reset.css</a>
+</li>
+</ul>
+
+## Почитать 
+
+Книжек много, но хороших -- как всегда, мало. 
+
+С уверенностью могу рекомендовать следующие:
+
+<ul>
+<li><a href="http://www.ozon.ru/context/detail/id/3881079/?partner=iliakan">CSS. Каскадные таблицы стилей. Подробное руководство. Эрик Мейер.</a>
+<li><a href="http://www.ozon.ru/context/detail/id/5647176/?partner=iliakan">Большая книга CSS, Дэвид Макфарланд</a></li>
+<li><a href="http://www.ozon.ru/context/detail/id/5510936/?partner=iliakan">CSS ручной работы, Дэн Седерхольм</a></li>
+</ul>
+
+Дальнейшие статьи раздела не являются *учебником* CSS, поэтому пожалуйста, изучите эту технологию до них. Это *очерки для лучшей систематизации и дополнения* уже существующих знаний.
\ No newline at end of file
diff --git a/3-more/11-css-for-js/10-box-sizing/article.md b/3-more/11-css-for-js/10-box-sizing/article.md
new file mode 100644
index 00000000..123c953f
--- /dev/null
+++ b/3-more/11-css-for-js/10-box-sizing/article.md
@@ -0,0 +1,178 @@
+# Свойство "box-sizing"
+
+Свойство `box-sizing` может принимать одно из двух значений -- `border-box` или `content-box`. В зависимости от выбранного значения браузер по-разному трактует значение свойств `width/height`.
+[cut]
+## Значения box-sizing
+
+
+
+<dl>
+<dt>`content-box`</dt>
+<dd>Это значение по умолчанию. В этом случае свойства `width/height` обозначают то, что находится *внутри `padding`*.</dd>
+<dt>`border-box`</dt>
+<dd>Значения `width/height` задают высоту/ширину *всего элемента*.</dd>
+</dl>
+
+Для большей наглядности посмотрим на картинку этого `div` в зависимости от `box-sizing`:
+
+```css
+div {
+  width: 200px;
+  height: 100px;
+*!*
+  box-sizing: border-box (вверху) | content-box (внизу);
+*/!*
+
+  padding: 20px;
+  border:5px solid brown;
+}
+```
+
+<img src="border-box.png">
+
+В верхнем случае браузер нарисовал весь элемент размером в `width x height`, в нижнем -- интерпретировал `width/height` как размеры внутренней области.
+
+Исторически сложилось так, что по умолчанию принят `content-box`, а `border-box` некоторые браузеры используют если не указан `DOCTYPE`, в режиме совместимости. 
+
+Но есть как минимум один случай, когда явное указание `border-box` может быть полезно: растягивание элемента до ширины родителя.
+
+## Пример: подстроить ширину к родителю
+
+Задача: подогнать элемент по ширине внешнего элемента, чтобы он заполнял всё его пространство. Без привязки к конкретному размеру элемента в пикселях.
+
+Например, мы хотим, чтобы элементы формы ниже были одинакового размера:
+
+```html
+<!--+ autorun -->
+<style>
+  form {
+    width: 200px;
+    border: 2px solid green;
+  }
+
+  form input, form select {
+    display: block;
+    padding-left: 5px; /* padding для красоты */
+  }
+</style>
+
+<form>
+*!*
+  <input>
+  <input>
+  <select><option>опции</option></select>
+*/!*
+</form>
+```
+
+Как сделать, чтобы элементы растянулись чётко по ширине `FORM`? Попробуйте добиться этого самостоятельно, перед тем как читать дальше.
+
+### Попытка width:100%
+
+Первое, что приходит в голову -- поставить всем `INPUT'ам` ширину `width: 100%`. 
+
+Попробуем:
+
+```html
+<!--+ autorun height=100 -->
+<style>
+  form {
+    width: 200px;
+    border: 2px solid green;
+  }
+
+  form input, form select {
+    display: block;
+    padding-left: 5px;
+*!*
+    width: 100%;
+*/!*
+  }
+</style>
+
+<form>
+  <input>
+  <input>
+  <select><option>опции</option></select>
+</form>
+```
+
+Как видно, не получается. **Элементы вылезают за пределы родителя.** 
+
+**Причина -- ширина элемента 100% по умолчанию относится к внутренней области, не включающей `padding` и `border`.** То есть, внутренняя область растягивается до `100%` родителя, и к ней снаружи прибавляются `padding/border`, которые и вылезают.
+
+Есть два решения этой проблемы.
+
+### Решение: дополнительный элемент
+
+Можно убрать `padding/border` у элементов `INPUT/SELECT` и завернуть каждый из них в дополнительный `DIV`, который будет обеспечивать дизайн:
+
+```html
+<!--+ autorun height=100 -->
+<style>
+  form {
+    width: 200px;
+    border: 2px solid green;
+  }
+ 
+  /* убрать padding/border */
+  form input, form select { 
+    padding: 0;
+    border: 0;
+    width: 100%; 
+  }
+
+  /* внешний div даст дизайн */
+  form div {
+    padding-left: 5px;
+    border: 1px solid black;
+  }
+
+</style>
+
+<form>
+  <div><input></div>
+  <div><input></div>
+  <div><select><option>опции</option></select></div>
+</form>
+```
+
+В принципе, это работает. Но нужны дополнительные элементы. А если мы делаем дерево или большую редактируемую таблицу, да и вообще -- любой интерфейс, где элементов и так много, то лишние нам точно не нужны. 
+
+Кроме того, такое решение заставляет пожертвовать встроенным в браузер дизайном элементов `INPUT/SELECT`.
+
+### Решение: box-sizing
+
+Существует другой способ, гораздо более естественный, чем предыдущий.
+
+**При помощи `box-sizing: border-box` мы можем сказать браузеру, что ширина, которую мы ставим, относится к элементу полностью, включая `border` и `padding`**:
+
+```html
+<!--+ autorun height=100 -->
+<style>
+  form {
+    width: 200px;
+    border: 2px solid green;
+  }
+
+  form input, form select {
+    display: block;
+    padding-left: 5px;
+*!*
+    -moz-box-sizing: border-box; /* в Firefox нужен префикс */
+    box-sizing: border-box;
+    width: 100%;
+*/!*
+  }
+</style>
+
+<form>
+  <input>
+  <input>
+  <select><option>опции</option></select>
+</form>
+```
+
+Мы сохранили "родную" рамку вокруг `INPUT/SELECT` и не добавили лишних элементов. Всё замечательно.
+
+Свойство `box-sizing` поддерживается в IE начиная с версии 8.
\ No newline at end of file
diff --git a/3-more/11-css-for-js/10-box-sizing/border-box.png b/3-more/11-css-for-js/10-box-sizing/border-box.png
new file mode 100755
index 00000000..89ab8342
Binary files /dev/null and b/3-more/11-css-for-js/10-box-sizing/border-box.png differ
diff --git a/3-more/11-css-for-js/11-margin/1-failing-margins/solution.md b/3-more/11-css-for-js/11-margin/1-failing-margins/solution.md
new file mode 100644
index 00000000..a2899ad1
--- /dev/null
+++ b/3-more/11-css-for-js/11-margin/1-failing-margins/solution.md
@@ -0,0 +1,5 @@
+Ошибка заключается в том, что `margin` при задании в процентах высчитавается *относительно ширины*. Так написано [в стандарте](http://www.w3.org/TR/CSS2/box.html#margin-properties).
+
+При этом не важно, какой отступ: левый, правый. верхний или нижний. Все они в процентах отсчитываются от ширины. Из-за этого и ошибка.
+
+Ситуацию можно исправить, например, заданием `margin-top/margin-bottom` в пикселях, если это возможно или, в качестве альтернативы, использовать другие средства, в частности, `position` или `padding-top/padding-bottom` на родителе.
\ No newline at end of file
diff --git a/3-more/11-css-for-js/11-margin/1-failing-margins/task.md b/3-more/11-css-for-js/11-margin/1-failing-margins/task.md
new file mode 100644
index 00000000..e796ec03
--- /dev/null
+++ b/3-more/11-css-for-js/11-margin/1-failing-margins/task.md
@@ -0,0 +1,43 @@
+# Нерабочие margin?
+
+[importance 3]
+
+В примере ниже находится блок `.block` фиксированной высоты, а в нём -- прямоугольник `.spacer`.
+
+При помощи `margin-left: 20%` и `margin-right: 20%`, прямоугольник центрирован в родителе по горизонтали. Это работает.
+
+Далее делается попытка при помощи свойств `height: 80%`, `margin-top: 10%` и  `margin-bottom: 10%` расположить прямоугольник в центре по вертикали, чтобы сам элемент занимал `80%` высоты родителя, а сверху и снизу был одинаковый отступ.
+
+Однако, как видите, это не получается. Почему? Как поправить?
+
+```html
+<!--+ autorun run -->
+  
+<style>
+  .block {
+    height: 150px;
+
+    border: 1px solid #CCC;
+    background: #eee;
+  }
+
+  .spacer {
+    margin-left: 20%;
+    margin-right: 20%;
+
+*!*   
+    height: 80%;
+    margin-top: 10%;
+    margin-bottom: 10%;
+*/!*
+
+    border: 1px solid black;
+    background: #FFF;
+  }
+</style>
+ 
+<div class="block">
+  <div class="spacer"></div>
+</div>
+```
+
diff --git a/3-more/11-css-for-js/11-margin/2-position-text-into-input/solution.md b/3-more/11-css-for-js/11-margin/2-position-text-into-input/solution.md
new file mode 100644
index 00000000..27896351
--- /dev/null
+++ b/3-more/11-css-for-js/11-margin/2-position-text-into-input/solution.md
@@ -0,0 +1,30 @@
+# Подсказка
+Надвиньте элемент с текстом на `INPUT` при помощи отрицательного `margin`.
+
+# Решение
+
+Надвинем текст на `INPUT` при помощи отрицательного `margin-top`. Поднять следует на одну строку, т.е. на `1.25em`, можно для красоты чуть больше -- `1.3em`:
+
+Также нам понадобится обнулить "родной" `margin` у `INPUT`, чтобы не сбивал вычисления.
+
+```html
+<!--+ run -->
+<style>
+  input {
+    *!*margin: 0;*/!* 
+    width: 12em;
+  }
+
+  #placeholder {
+    color: red;
+*!*
+    margin: -1.3em 0 0 0.2em;
+*/!*
+  }
+</style>
+
+<input type="password" id="input">
+<div id="placeholder">Скажи пароль, друг</div>
+```
+
+[edit src="solution"]Полный код решения[/edit]
\ No newline at end of file
diff --git a/3-more/11-css-for-js/11-margin/2-position-text-into-input/solution.view/index.html b/3-more/11-css-for-js/11-margin/2-position-text-into-input/solution.view/index.html
new file mode 100755
index 00000000..66a45b36
--- /dev/null
+++ b/3-more/11-css-for-js/11-margin/2-position-text-into-input/solution.view/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    input {
+      margin: 0;
+      width: 12em;
+    }
+
+    #placeholder {
+      color: red;
+
+      margin: -1.3em 0 0 0.2em;
+    }
+  </style>
+</head>
+<body>
+
+<div>Добро пожаловать</div>
+<input type="password" id="input">
+
+<div id="placeholder">Скажи пароль, друг</div>
+
+<div>.. и заходи</div>
+</body>
+</html>
diff --git a/3-more/11-css-for-js/11-margin/2-position-text-into-input/source.view/index.html b/3-more/11-css-for-js/11-margin/2-position-text-into-input/source.view/index.html
new file mode 100755
index 00000000..1690e4ef
--- /dev/null
+++ b/3-more/11-css-for-js/11-margin/2-position-text-into-input/source.view/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<div>Добро пожаловать</div>
+
+<input type="password" id="input">
+
+<div id="placeholder">Скажи пароль, друг</div>
+
+<div>.. и заходи</div>
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/11-margin/2-position-text-into-input/task.md b/3-more/11-css-for-js/11-margin/2-position-text-into-input/task.md
new file mode 100644
index 00000000..f778dba8
--- /dev/null
+++ b/3-more/11-css-for-js/11-margin/2-position-text-into-input/task.md
@@ -0,0 +1,15 @@
+# Расположить текст внутри INPUT
+
+[importance 5]
+
+Создайте `<input type="password">` с цветной подсказкой внутри (должен правильно выглядеть, не обязан работать):
+
+[iframe src="solution" height=90 border="1"]
+
+В дальнейшем мы сможем при помощи JavaScript сделать, чтобы текст при клике пропадал. Получится красивая подсказка.
+
+[edit src="source" task/]
+
+P.S. Обратите внимание: `type="password"`! То есть, просто `value` использовать нельзя, будут звёздочки. Кроме того, подсказка, которую вы реализуете, может быть как угодно стилизована.
+
+P.P.S. Вокруг `INPUT` с подсказкой не должно быть лишних отступов, блоки до и после продолжают идти в обычном потоке.
diff --git a/3-more/11-css-for-js/11-margin/article.md b/3-more/11-css-for-js/11-margin/article.md
new file mode 100644
index 00000000..2adf5f78
--- /dev/null
+++ b/3-more/11-css-for-js/11-margin/article.md
@@ -0,0 +1,170 @@
+# Свойство "margin" 
+
+Свойство `margin` задаёт отступы вокруг элемента. У него есть несколько особенностей, которые мы здесь рассмотрим.
+[cut]
+## Объединение отступов
+
+Вертикальные отступы поглощают друг друга, горизонтальные -- нет.
+
+Например, вот документ с вертикальными и горизонтальными отступами:
+
+```html
+<!--+ autorun height=100 -->
+<body style="background: #aef">
+  <p style="*!*margin:20px;*/!* background:white">
+   
+    <span style="*!*margin:20px;*/!* background:orange">Горизонтальный 20px</span>
+    ← 40px →
+    <span style="*!*margin:20px;*/!* background:orange">20px Отступ </span>
+
+  </p>
+  <p style="*!*margin:15px;*/!* background:white">Вертикальный 20px</p>
+</body>
+```
+
+Расстояние по горизонтали между элементами `SPAN` равно `40px`, так как горизонтальные отступы по `20px` сложились.
+
+А вот по вертикали расстояние от `SPAN` до `P` равно `20px`: из двух вертикальных отступов выбирается больший `max(20px, 15px) = 20px` и применяется. 
+
+## Отрицательные margin-top/left
+
+Отрицательные значения `margin-top/margin-left` смещают элемент со своего обычного места.
+
+В CSS есть другой способ добиться похожего эффекта -- а именно, `position:relative`. Но между ними есть одно принципиальное различие.
+
+**При сдвиге через `margin` соседние элементы занимают освободившееся пространство, в отличие от `position: relative`, при котором элемент визуально сдвигается, но место, где он был, остается "занятым".**
+
+То есть, элемент продолжает полноценно участвовать в потоке.
+
+## Пример: вынос заголовка
+
+Например, есть документ с информационными блоками:
+
+```html
+<!--+ autorun height=400 -->
+<style>
+  div {
+    border: 1px solid blue;
+    margin: 2em;
+    font: .8em/1.25 Arial, sans-serif;
+  }
+  h2 { 
+    background: #aef;
+    margin: 0 0 0.8em 0;
+  }
+</style>
+
+<div>
+  <h2>Общие положения</h2>
+
+  <p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
+</div>
+
+<div>
+  <h2>Общие обязанности водителей</h2>
+
+  <p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
+  <ul>
+  <li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
+  <li>...и так далее...</li>
+  </ul>
+</div>
+```
+
+**Использование отрицательного `margin-top` позволяет вынести заголовки над блоком**.
+
+```css
+/* вверх чуть больше, чем на высоту строки (1.25em) */
+h2 {
+  margin-top: -1.3em;
+}
+```
+
+Результат:
+[iframe src="h2-margin-top" height=330 border=1 link]
+
+А вот, что бы было при использовании `position`:
+
+```css
+h2 {
+  position: relative;
+  top: -1.3em;
+}
+```
+
+Результат:
+[iframe src="h2-margin-top-position" height=330 border=1 link]
+
+**При использовании `position`, в отличие от `margin`, на месте заголовков, внутри блоков, осталось пустое пространство.**
+
+## Пример: вынос отчерка
+
+Организуем информацию чуть по-другому. Пусть после каждого заголовка будет отчерк:
+
+```html
+<div>
+  <h2>Заголовок</h2>
+  <hr>
+
+  <p>Текст Текст Текст.</p>
+</div>
+```
+
+Пример документа с такими отчерками:
+
+[iframe src="hr-margin-left-src" height=320 border=1 link]
+
+Для красоты мы хотим, чтобы отчерк `HR` начинался левее, чем основной текст. Отрицательный `margin-left` нам поможет:
+
+```css
+hr.margin { margin-left: -2em; }
+
+/* для сравнения */
+hr.position { position: relative; left: -2em; }
+```
+
+Результат:
+[iframe src="hr-margin-left" height=320 border=1 link]
+
+Обратите внимание на разницу между методами сдвига!
+<ul>
+<li>`hr.margin` сначала сдвинулся, а потом нарисовался до конца блока.</li>
+<li>`hr.position` сначала нарисовался, а потом сдвинулся -- в результате справа осталось пустое пространство.</li>
+</ul>
+
+Уже отсюда видно, что отрицательные `margin` -- исключительно полезное средство позиционирования!
+
+## Отрицательные margin-right/bottom
+
+Отрицательные `margin-right/bottom` ведут себя по-другому, чем `margin-left/top`. Они не сдвигают элемент, а "укорачивают" его.
+
+То есть, хотя сам размер блока не уменьшается, но следующий элемент будет думать, что он меньше на указанное в `margin-right/bottom` значение.
+
+Например, в примере ниже вторая строка налезает на первую:
+
+```html
+<!--+ autorun height=80 -->
+<div style="border: 1px solid blue; *!*margin-bottom: -0.5em*/!*">
+  Первый
+</div>
+
+<div style="border: 1px solid red">
+  Второй div думает, что высота первого на 0.5em меньше
+</div>
+```
+
+Это используют, в частности для красивых вносок, с приданием иллюзии глубины.
+
+Например:
+
+[iframe src="negative-margin-bottom" border=1 height=200 link="Посмотреть в отдельном окне" edit]
+
+## Итого
+
+<ul>
+<li>Отрицательные `margin-left/top` сдвигают элемент влево-вверх. Остальные элементы это учитывают, в отличие от сдвига через `position`.</li>
+<li>Отрицательные `margin-right/bottom` заставляют другие элементы думать, что блок меньше по размеру справа-внизу, чем он на самом деле.</li>
+<li>
+
+Отличная статья на тему отрицательных `margin`: [The Definitive Guide to Using Negative Margins](http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/)
+
diff --git a/3-more/11-css-for-js/11-margin/h2-margin-top-position.view/index.html b/3-more/11-css-for-js/11-margin/h2-margin-top-position.view/index.html
new file mode 100755
index 00000000..83833dd9
--- /dev/null
+++ b/3-more/11-css-for-js/11-margin/h2-margin-top-position.view/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+  div {
+    border: 1px solid blue;
+    margin: 2em;
+    font: .8em/1.25 Arial, sans-serif;
+  }
+
+  h2 {
+    margin: 0 0 0.8em 0;
+    background: #aef;
+
+    position: relative;
+    top: -1.3em;
+  }
+  </style>
+</head>
+<body>
+
+<div>
+  <h2>Общие положения</h2>
+
+  <p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
+</div>
+
+<div>
+  <h2>Общие обязанности водителей</h2>
+
+  <p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
+  <ul>
+  <li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
+  <li>...и так далее...</li>
+  </ul>
+</div>
+
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/11-margin/h2-margin-top.view/index.html b/3-more/11-css-for-js/11-margin/h2-margin-top.view/index.html
new file mode 100755
index 00000000..267a8bdf
--- /dev/null
+++ b/3-more/11-css-for-js/11-margin/h2-margin-top.view/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+  div {
+    border: 1px solid blue;
+    margin: 2em;
+    font: .8em/1.25 Arial, sans-serif;
+  }
+
+  h2 {
+    margin: 0 0 0.8em 0;
+    background: #aef;
+
+    margin-top: -1.3em; /* или изменить margin выше */
+  }
+  </style>
+</head>
+<body>
+
+<div>
+  <h2>Общие положения</h2>
+
+  <p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
+</div>
+
+<div>
+  <h2>Общие обязанности водителей</h2>
+
+  <p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
+  <ul>
+  <li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
+  <li>...и так далее...</li>
+  </ul>
+</div>
+
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/11-margin/hr-margin-left-src.view/index.html b/3-more/11-css-for-js/11-margin/hr-margin-left-src.view/index.html
new file mode 100755
index 00000000..f7368e2d
--- /dev/null
+++ b/3-more/11-css-for-js/11-margin/hr-margin-left-src.view/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    div {
+      margin: 2em;
+      font: .8em/1.25 Arial, sans-serif;
+    }
+
+    h2 { margin-bottom: 0; }
+  </style>
+</head>
+<body>
+
+
+<div>
+
+  <h2>Общие положения</h2>
+  <hr class="margin">
+
+  <p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
+</div>
+
+<div>
+  <h2>Общие обязанности водителей</h2>
+  <hr class="position">
+
+  <p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
+  <ul>
+  <li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
+  <li>...и так далее...</li>
+  </ul>
+</div>
+
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/11-margin/hr-margin-left.view/index.html b/3-more/11-css-for-js/11-margin/hr-margin-left.view/index.html
new file mode 100755
index 00000000..0fa86c8d
--- /dev/null
+++ b/3-more/11-css-for-js/11-margin/hr-margin-left.view/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    div {
+      margin: 2em;
+      font: .8em/1.25 Arial, sans-serif;
+    }
+
+    h2 { margin-bottom: 0; }
+    hr.margin { margin-left: -2em; }
+    hr.position { position: relative; left: -2em; }
+  </style>
+</head>
+<body>
+
+
+<div>
+
+  <h2>Общие положения (hr.margin)</h2>
+  <hr class="margin">
+
+  <p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
+</div>
+
+<div>
+  <h2>Общие обязанности водителей (hr.position)</h2>
+  <hr class="position">
+
+  <p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
+  <ul>
+  <li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
+  <li>...и так далее...</li>
+  </ul>
+</div>
+
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/11-margin/negative-margin-bottom.view/index.html b/3-more/11-css-for-js/11-margin/negative-margin-bottom.view/index.html
new file mode 100755
index 00000000..d6652970
--- /dev/null
+++ b/3-more/11-css-for-js/11-margin/negative-margin-bottom.view/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .content {
+      background: #aef;
+      padding: 1em 2em 2em 2em;
+
+      margin-bottom: -1em;
+    }
+
+    .comment {
+      margin: 0 1em;
+      padding: .2em;
+      text-align: center;
+      background: black;
+      color: white;
+    }
+  </style>
+</head>
+<body>
+<div>У DIV'а с холодильниками стоит margin-bottom: -1em</div>
+
+<div class="content">
+  Наши холодильники - самые лучшие холодильники в мире!
+  Наши холодильники - самые лучшие холодильники в мире!
+  Наши холодильники - самые лучшие холодильники в мире!
+  Наши холодильники - самые лучшие холодильники в мире!
+</div>
+
+<span class="comment">
+  Так считают: 5 человек
+</span>
+
+<span class="comment">
+  Оставьте <u>свой</u> отзыв!
+</span>
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/12-space-under-img/article.md b/3-more/11-css-for-js/12-space-under-img/article.md
new file mode 100644
index 00000000..837fb7c0
--- /dev/null
+++ b/3-more/11-css-for-js/12-space-under-img/article.md
@@ -0,0 +1,119 @@
+# Лишнее место под IMG
+
+Иногда под `IMG` "вдруг" появляется лишнее место. Посмотрим на эти грабли внимательнее, почему такое бывает и как этого избежать.
+[cut]
+## Демонстрация проблемы
+Например:
+
+```html
+<style> * { margin: 0; padding: 0; } </style>
+<table>
+  <tr>
+  <td style="border:1px red solid">
+    <img src="square.png">
+  </td>
+  </tr>
+</table>
+```
+
+[iframe src="inline"]
+
+Посмотрите внимательно! Вы видите расстояние между рамками снизу? Это потому, что **браузер резервирует дополнительное место под инлайновым элементом, чтобы туда выносить "хвосты" букв**.
+
+Вот так выглядит та же картинка с выступающим вниз символом рядом:
+[iframe src="inline-p"]
+
+В примере картинка обёрнута в красный `TD`. Таблица подстраивается под размер содержимого, так что проблема явно видна. Но она касается не только таблицы. Аналогичная ситуация возникнет, если вокруг `IMG` будет другой элемент с явно указанным размером, "облегающий" картинку по высоте. Браузер постарается зарезервировать место под `IMG`, хотя оно там не нужно.
+
+## Решение: сделать элемент блочным
+
+Самый лучший способ избежать этого -- поставить `display: block` таким картинкам:
+
+```html
+<style> 
+  * { margin: 0; padding: 0; }
+*!*
+  img { display: block }
+*/!*
+</style>
+<table>
+  <tr>
+  <td style="border:1px red solid">
+    <img src="square.png">
+  </td>
+  </tr>
+</table>
+```
+
+[iframe src="block"]
+
+Под блочным элементом ничего не резервируется. Проблема исчезла.
+
+## Решение: задать vertical-align
+
+А что, если мы, по каким-то причинам, *не хотим* делать элемент блочным? 
+
+Существует ещё один способ избежать проблемы -- использовать свойство [vertical-align](http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align).
+
+**Если установить `vertical-align` в `top`, то инлайн-элемент будет отпозиционирован по верхней границе текущей строки.**
+
+При этом браузер не будет оставлять место под изображением, так как запланирует продолжение строки сверху, а не снизу:
+
+```html
+<style> 
+  * { margin: 0; padding: 0; }
+*!*
+  img { vertical-align: top}
+*/!*
+</style>
+<table>
+  <tr>
+  <td style="border:1px red solid">
+    <img src="square.png">
+  </td>
+  </tr>
+</table>
+```
+
+[iframe src="valign"]
+
+А вот, как браузер отобразит соседние символы в этом случае: `p<img src="square.png">p`
+
+[iframe src="valign-p"]
+
+С другой стороны, сама строка никуда не делась, изображение по-прежнему является её частью, а браузер планирует разместить другое текстовое содержимое рядом, хоть и сверху. Поэтому если изображение маленькое, то произойдёт дополнение пустым местом до высоты строки:
+
+Например, для `<img src="square.png" style="height:10px">`:
+
+[iframe src="valign-small"]
+
+Таким образом, требуется уменьшить еще и `line-height` контейнера. Окончательное решение для маленьких изображений с `vertical-align`:
+
+```html
+<style> 
+  * { margin: 0; padding: 0; }
+*!*
+  td { line-height: 1px }
+  img { vertical-align: top }
+*/!*
+</style>
+<table>
+  <tr>
+  <td style="border:1px red solid">
+    <img src="square.png" style="height:10px">
+  </td>
+  </tr>
+</table>
+```
+
+Результат:
+
+[iframe src="valign-small-lh"]
+
+## Итого
+
+<ul>
+<li>Пробелы под картинками появляются, чтобы оставить место под "хвосты" букв в строке. Строка "подразумевается", т.к. `display:inline`.</li>
+<li>Можно избежать пробела, если изменить `display`, например, на `block`.</li>
+<li>Альтернатива: `vertical-align:top` (или `bottom`), но для маленьких изображений может понадобиться уменьшить `line-height`, чтобы контейнер не оставлял место под строку.</li>
+</ul>
\ No newline at end of file
diff --git a/3-more/11-css-for-js/12-space-under-img/block.view/index.html b/3-more/11-css-for-js/12-space-under-img/block.view/index.html
new file mode 100755
index 00000000..36f2b1cb
--- /dev/null
+++ b/3-more/11-css-for-js/12-space-under-img/block.view/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<style>
+  * { margin: 0; padding: 0; }
+  img { display: block; }
+</style>
+<table>
+  <tr>
+  <td style="border:1px red solid">
+    <img src="http://js.cx/clipart/square_50.png" width="50" height="50">
+  </td>
+  </tr>
+</table>
+
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/12-space-under-img/inline-p.view/index.html b/3-more/11-css-for-js/12-space-under-img/inline-p.view/index.html
new file mode 100755
index 00000000..8b82f65a
--- /dev/null
+++ b/3-more/11-css-for-js/12-space-under-img/inline-p.view/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<style> * { margin: 0; padding: 0; } </style>
+<table>
+  <tr>
+  <td style="border:1px red solid; font-size:120%">
+    <img src="http://js.cx/clipart/square_50.png" width="50" height="50">p
+  </td>
+  </tr>
+</table>
+
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/12-space-under-img/inline.view/index.html b/3-more/11-css-for-js/12-space-under-img/inline.view/index.html
new file mode 100755
index 00000000..a788e0b5
--- /dev/null
+++ b/3-more/11-css-for-js/12-space-under-img/inline.view/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<style> * { margin: 0; padding: 0; } </style>
+<table>
+  <tr>
+  <td style="border:1px red solid">
+    <img src="http://js.cx/clipart/square_50.png" width="50" height="50">
+  </td>
+  </tr>
+</table>
+
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/12-space-under-img/valign-p.view/index.html b/3-more/11-css-for-js/12-space-under-img/valign-p.view/index.html
new file mode 100755
index 00000000..b0a96c06
--- /dev/null
+++ b/3-more/11-css-for-js/12-space-under-img/valign-p.view/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<style> * { margin: 0; padding: 0; } </style>
+<table>
+  <tr>
+  <td style="border:1px red solid">
+    p<img src="http://js.cx/clipart/square_50.png" width="50" height="50" style="vertical-align:top">p
+  </td>
+  </tr>
+</table>
+
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/12-space-under-img/valign-small-lh.view/index.html b/3-more/11-css-for-js/12-space-under-img/valign-small-lh.view/index.html
new file mode 100755
index 00000000..436c0a28
--- /dev/null
+++ b/3-more/11-css-for-js/12-space-under-img/valign-small-lh.view/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<style> * { margin: 0; padding: 0; } </style>
+<table>
+  <tr>
+  <td style="border:1px red solid; line-height: 1px">
+    <img src="http://js.cx/clipart/square_50.png" width="10" height="10" style="vertical-align:top">
+  </td>
+  </tr>
+</table>
+
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/12-space-under-img/valign-small.view/index.html b/3-more/11-css-for-js/12-space-under-img/valign-small.view/index.html
new file mode 100755
index 00000000..0c2dbadf
--- /dev/null
+++ b/3-more/11-css-for-js/12-space-under-img/valign-small.view/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<style> * { margin: 0; padding: 0; } </style>
+<table>
+  <tr>
+  <td style="border:1px red solid">
+    <img src="http://js.cx/clipart/square_50.png" width="10" height="10" style="vertical-align:top">
+  </td>
+  </tr>
+</table>
+
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/12-space-under-img/valign.view/index.html b/3-more/11-css-for-js/12-space-under-img/valign.view/index.html
new file mode 100755
index 00000000..ad82b4e0
--- /dev/null
+++ b/3-more/11-css-for-js/12-space-under-img/valign.view/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<style> * { margin: 0; padding: 0; } </style>
+<table>
+  <tr>
+  <td style="border:1px red solid">
+    <img src="http://js.cx/clipart/square_50.png" width="50" height="50" style="vertical-align:top">
+  </td>
+  </tr>
+</table>
+
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/13-overflow/article.md b/3-more/11-css-for-js/13-overflow/article.md
new file mode 100644
index 00000000..4a0cf229
--- /dev/null
+++ b/3-more/11-css-for-js/13-overflow/article.md
@@ -0,0 +1,162 @@
+# Свойство "overflow"
+
+Свойство `overflow` управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую длину/ширину.
+[cut]
+Обычно блок увеличивается в размерах при добавлении в него элементов, заключая в себе всех потомков.
+
+Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое "переполняет" блок. Его отображение в этом случае задаётся свойством `overflow`.
+
+Возможные значения
+<ul>
+<li>`visible` (по умолчанию)</li>
+<li>`hidden`</li>
+<li>`scroll`</li>
+<li>`auto`</li>
+</ul>
+
+## visible
+
+Если не ставить `overflow` явно или поставить `visible`, то содержимое отображается за границами блока.
+
+Например:
+
+```html
+<!--+ autorun -->
+<style>
+  .overflow {
+*!*
+    /* overflow не задан */
+*/!*
+    width: 200px;
+    height: 80px;
+    border: 1px solid black;
+  }
+</style>
+
+<div class="overflow">
+  visible ЭтотТекстВылезаетСправаЭтотТекстВылезаетСправа
+  Этот текст вылезает снизу Этот текст вылезает снизу
+  Этот текст вылезает снизу Этот текст вылезает снизу
+</div>
+```
+
+Как правило, такое переполнение указывает на ошибку в вёрстке. Если содержимое может быть больше контейнера -- используют другие значения.
+
+## hidden
+
+Переполняющее содержимое не отображается.
+
+```html
+<!--+ autorun -->
+<style>
+  .overflow {
+*!*
+    overflow: hidden;
+*/!*
+    width: 200px;
+    height: 80px;
+    border: 1px solid black;
+  }
+</style>
+
+<div class="overflow">
+  hidden ЭтотТекстОбрезанСправаЭтотТекстОбрезанСправа
+  Этот текст будет обрезан снизу Этот текст будет обрезан снизу
+  Этот текст будет обрезан снизу Этот текст будет обрезан снизу
+</div>
+```
+
+Вылезающее за границу содержимое становится недоступно.
+
+Это свойство иногда используют от лени, когда какой-то элемент дизайна немного вылезает за границу, и вместо исправления вёрстки его просто скрывают. Как правило, долго оно не живёт, вёрстку всё равно приходится исправлять.
+
+## auto
+
+При переполнении отображается полоса прокрутки.
+
+```html
+<!--+ autorun -->
+<style>
+  .overflow {
+*!*
+    overflow: auto;
+*/!*
+    width: 200px;
+    height: 100px;
+    border: 1px solid black;
+  }
+</style>
+
+<div class="overflow">
+  auto ЭтотТекстДастПрокруткуСправаЭтотТекстДастПрокруткуСправа
+  Этот текст даст прокрутку снизу Этот текст даст прокрутку снизу
+  Этот текст даст прокрутку снизу
+</div>
+```
+
+## scroll
+
+Полоса прокрутки отображается всегда.
+
+```html
+<!--+ autorun -->
+<style>
+  .overflow {
+*!*
+    overflow: scroll;
+*/!*
+    width: 200px;
+    height: 80px;
+    border: 1px solid black;
+  }
+</style>
+
+<div class="overflow">
+  scroll
+  Переполнения нет.
+</div>
+```
+
+То же самое, что `auto`, но полоса прокрутки видна всегда, даже если переполнения нет.
+
+## overflow-x, overflow-y
+
+Можно указать поведение блока при переполнении по ширине в `overflow-x` и высоте -- в `overflow-y`:
+
+```html
+<!--+ autorun -->
+<style>
+  .overflow {
+*!*
+    overflow-x: auto;
+    overflow-y: hidden;
+*/!*
+    width: 200px;
+    height: 80px;
+    border: 1px solid black;
+  }
+</style>
+
+<div class="overflow">
+  ПоШиринеПолосаПрокруткиAutoПоШиринеПолосаПрокруткиAuto
+  Этот текст вылезает снизу Этот текст вылезает снизу
+  Этот текст вылезает снизу Этот текст вылезает снизу
+</div>
+```
+
+## Итого
+
+Свойства `overflow-x/overflow-y` (или оба одновременно: `overflow`) задают поведение контейнера при переполнении:
+
+<dl>
+<dt>`visible`</dt>
+<dd>По умолчанию, содержимое вылезает за границы блока.</dd>
+<dt>`hidden`</dt>
+<dd>Переполняющее содержимое невидимо.</dd>
+<dt>`auto`</dt>
+<dd>Полоса прокрутки при переполнении.</dd>
+<dt>`scroll`</dt>
+<dd>Полоса прокрутки всегда.</dd>
+</dl>
+
+Кроме того, значение `overflow: auto | hidden` изменяет поведение контейнера, содержащего `float'ы`. Так как элемент с `float` находится вне потока, то обычно контейнер не выделяет под него место. Но если стоит такой `overflow`, то место выделяется, т.е. контейнер растягивается. Более подробно этот вопрос рассмотрен в статье [](/float).
\ No newline at end of file
diff --git a/3-more/11-css-for-js/14-height-percent/article.md b/3-more/11-css-for-js/14-height-percent/article.md
new file mode 100644
index 00000000..f14e71b1
--- /dev/null
+++ b/3-more/11-css-for-js/14-height-percent/article.md
@@ -0,0 +1,140 @@
+# Особенности свойства "height" в %
+
+Обычно свойство `height`, указанное в процентах, означает высоту относительно внешнего блока.
+
+Однако, всё не так просто. Интересно, что для произвольного блочного элемента `height` в процентах работать не будет!
+
+[cut]
+
+Чтобы лучше понимать ситуацию, рассмотрим пример.
+
+## Пример
+
+Наша цель -- получить вёрстку такого вида:
+
+[iframe src="height-percent" height=160 link edit]
+
+**При этом блок с левой стрелкой должен быть отдельным элементом внутри контейнера.** 
+
+Это удобно для интеграции с JavaScript, чтобы отлавливать на нём клики мыши.
+
+То есть, HTML-код требуется такой:
+
+```html
+<div class="container">
+  <div class="toggler"> 
+    <!-- стрелка влево при помощи CSS, ширина фиксирована --> 
+  </div>
+  <div class="content">
+    ...Текст...
+  </div>
+</div>
+```
+
+Как это реализовать? Подумайте перед тем, как читать дальше...
+
+Придумали?... Если да -- продолжаем.
+
+Есть разные варианты, но, возможно, вы решили сдвинуть `.toggler` влево, при помощи `float:left` (тем более что он фиксированной ширины) и увеличить до `height: 100%`, чтобы он занял всё пространство по вертикали.
+
+**Вы ещё не видите подвох? Смотрим внимательно, что будет происходить с `height: 100%`...**
+
+## Демо height:100% + float:left
+
+CSS:
+
+```css
+.container { 
+  border: 1px solid black;
+}
+
+.content {
+  *!*/* margin-left нужен, так как слева от содержимого будет стрелка */*/!*
+  margin-left: 35px;
+}
+
+.toggler {
+  *!*/* Зададим размеры блока со стрелкой */*/!* 
+  height: 100%;
+  width: 30px;
+  float: left;
+
+  background: #EEE url("arrow_left.png") center center no-repeat;
+  border-right: #AAA 1px solid;
+  cursor: pointer;
+}
+```
+
+А теперь -- посмотрим этот вариант в действии:
+
+[iframe src="height-percent-float" height=160 link edit]
+
+Как видно, блок со стрелкой вообще исчез! Куда же он подевался?
+
+Ответ нам даст спецификация CSS 2.1 [пункт 10.5](http://www.w3.org/TR/CSS2/visudet.html#propdef-height).
+
+**"Если высота внешнего блока вычисляется по содержимому, то высота в % не работает, и заменяется на `height:auto`. Кроме случая, когда у элемента стоит `position:absolute`."**
+
+В нашем случае высота `.container` как раз определяется по содержимому, поэтому для `.toggler` проценты не действуют, а размер вычисляется как при `height:auto`.
+
+Какая же она -- эта автоматическая высота? Вспоминаем, что обычно размеры `float` определяются по содержимому ([10.3.5](http://www.w3.org/TR/CSS2/visudet.html#float-width)). А содержимого-то в `.toggler` нет, так что высота нулевая. Поэтому этот блок и не виден.
+
+Если бы мы точно знали высоту внешнего блока и добавили её в CSS -- это решило бы проблему. 
+
+Например:
+
+```css
+.container {
+  height: 200px; /* теперь height в % внутри будет работать */
+}
+```
+
+Результат:
+
+[iframe src="height-percent-float-exact" height="230" link edit]
+
+...Но в данном случае этот путь неприемлем! Ведь мы не знаем, сколько будет текста и какой будет итоговая высота.
+
+Поэтому решим задачу по-другому.
+
+## Правильно: height:100% + position:absolute
+
+Проценты будут работать, если поставить `.toggler` свойство `position: absolute` и спозиционировать его в левом-верхнем углу `.container` (у которого сделать `position:relative`):
+
+```css
+.container {
+  *!*position: relative;*/!*
+  border: 1px solid black;
+}
+
+.content {
+  margin-left: 35px;
+}
+
+.toggler {
+*!*
+  position: absolute;
+  left: 0;
+  top: 0;
+*/!*
+
+  height: 100%;
+  width: 30px;
+  cursor: pointer;
+
+  border-right: #AAA 1px solid; 
+  background: #EEE url("arrow_left.png") center center no-repeat;
+}
+```
+
+Результат:
+
+[iframe src="height-percent" height=160 link edit]
+
+## Итого
+
+<ul>
+<li>Свойство `height`, указанное в %, работает только если для внешнего блока указана высота.</li>
+<li>Стандарт CSS 2.1 предоставляет обход этой проблемы, отдельно указывая, что проценты работают при `position:absolute`. На практике это часто выручает.
+</li>
+</ul>
\ No newline at end of file
diff --git a/3-more/11-css-for-js/14-height-percent/height-percent-float-exact.view/index.html b/3-more/11-css-for-js/14-height-percent/height-percent-float-exact.view/index.html
new file mode 100755
index 00000000..f25aecb4
--- /dev/null
+++ b/3-more/11-css-for-js/14-height-percent/height-percent-float-exact.view/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .container {
+      border: 1px solid black;
+      height: 200px;
+    }
+
+    .toggler {
+      height: 100%;
+      background: #EEE url(http://js.cx/height-percent/arrow_left.png) center center no-repeat;
+      border-right: #AAA 1px solid;
+      width: 30px;
+      float: left;
+      margin-le
+      cursor: pointer;
+    }
+
+    .content {
+      margin-left: 35px;
+    }
+
+    p { font-size: 80%; }
+  </style>
+</head>
+<body>
+
+<div class="container">
+  <div class="toggler"></div>
+  <div class="content">
+  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
+
+  <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
+  </div>
+</div>
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/14-height-percent/height-percent-float.view/index.html b/3-more/11-css-for-js/14-height-percent/height-percent-float.view/index.html
new file mode 100755
index 00000000..b3e0e6d1
--- /dev/null
+++ b/3-more/11-css-for-js/14-height-percent/height-percent-float.view/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .container {
+      border: 1px solid black;
+    }
+
+    .toggler {
+      height: 100%;
+      background: #EEE url(http://js.cx/height-percent/arrow_left.png) center center no-repeat;
+      border-right: #AAA 1px solid;
+      width: 30px;
+      float: left;
+      cursor: pointer;
+    }
+
+    .content {
+      margin-left: 35px;
+    }
+
+    p { font-size: 80%; }
+  </style>
+
+</head>
+<body>
+
+<div class="container">
+  <div class="toggler"></div>
+  <div class="content">
+    <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
+
+    <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
+  </div>
+</div>
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/14-height-percent/height-percent.view/index.html b/3-more/11-css-for-js/14-height-percent/height-percent.view/index.html
new file mode 100755
index 00000000..869bedf8
--- /dev/null
+++ b/3-more/11-css-for-js/14-height-percent/height-percent.view/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .container {
+      border: 1px solid black;
+      position: relative;
+    }
+
+    .content {
+      margin-left: 35px;
+    }
+
+    .toggler {
+      height: 100%;
+      background: #EEE url(http://js.cx/height-percent/arrow_left.png) center center no-repeat;
+      border-right: #AAA 1px solid;
+      width: 30px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      cursor: pointer;
+    }
+
+    p { font-size: 80%; }
+  </style>
+
+</head>
+<body>
+
+<div class="container">
+  <div class="toggler"></div>
+  <div class="content">
+    <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
+
+    <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/15-css-selectors/1-select-elements-selector/index.html b/3-more/11-css-for-js/15-css-selectors/1-select-elements-selector/index.html
new file mode 100755
index 00000000..b46adbd7
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/1-select-elements-selector/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<input type="checkbox"> 
+<input type="checkbox" checked> 
+<input type="text" id="message">
+
+<h3 id="widget-title">Сообщения:</h3>
+<ul id="messages">
+  <li id="message-1">Сообщение 1</li>
+  <li id="message-2">Сообщение 2</li>
+  <li id="message-3" data-action="delete">Сообщение 3</li>
+  <li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
+  <li id="message-5" data-action="edit delete">Сообщение 5</li>
+  <li><a href="#">...</a></li>
+</ul>
+
+
+<a href="http://site.com/list.zip">Ссылка на архив</a>
+<a href="http://site.com/list.pdf">..И на PDF</a>
+
+
+<script>
+// тестовая функция для селекторов 
+// проверяет, чтобы элементов по селектору selector было ровно count
+function test(selector, count) {
+  var elems = document.querySelectorAll(selector);
+  var ok = (elems.length == count);
+
+  if (!ok) alert(selector+": " + elems.length + " != " + count);
+}
+
+// ------------- селекторы --------------
+
+// Выбрать input типа checkbox
+test('input[type="checkbox"]', 1);
+
+// Выбрать input типа checkbox, НЕ отмеченный
+test('input[type="checkbox"]:not(:checked)', 1);
+
+// Найти все элементы с id=message или message-*
+test('[id|="message"]', 6); 
+
+// Найти все элементы с id=message-*
+test('[id^="message-"]', 5); 
+
+// Найти все ссылки с расширением href="...zip"
+test('a[href$=".zip"]', 1); 
+
+// Найти все элементы с data-action, содержащим delete в списке (через пробел)
+test('[data-action~="delete"]', 2); 
+
+// Найти все элементы, у которых ЕСТЬ атрибут data-action, 
+// но он НЕ содержащит delete в списке (через пробел)
+test('[data-action]:not([data-action~="delete"])', 1); 
+
+// Выбрать все чётные элементы списка #messages
+test('#messages li:nth-child(2n)', 3);
+
+// Выбрать один элемент сразу за заголовком h3#widget-title
+// на том же уровне вложенности
+test('h3#widget-title + *', 1);
+
+// Выбрать все ссылки, следующие за заголовком h3#widget-title
+// на том же уровне вложенности
+test('h3#widget-title ~ a', 2);
+
+// Выбрать ссылку внутри последнего элемента списка #messages
+test('#messages li:last-child a', 1);
+</script>
+</body>
+</html>
diff --git a/3-more/11-css-for-js/15-css-selectors/1-select-elements-selector/solution.md b/3-more/11-css-for-js/15-css-selectors/1-select-elements-selector/solution.md
new file mode 100644
index 00000000..e77a01b9
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/1-select-elements-selector/solution.md
@@ -0,0 +1,6 @@
+
+
+```html
+<!--+ src="index.html" -->
+```
+
diff --git a/3-more/11-css-for-js/15-css-selectors/1-select-elements-selector/source.view/index.html b/3-more/11-css-for-js/15-css-selectors/1-select-elements-selector/source.view/index.html
new file mode 100755
index 00000000..2d00407a
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/1-select-elements-selector/source.view/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE HTML>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+
+<input type="checkbox"> 
+<input type="checkbox" checked> 
+<input type="text" id="message">
+
+<h3 id="widget-title">Сообщения:</h3>
+<ul id="messages">
+  <li id="message-1">Сообщение 1</li>
+  <li id="message-2">Сообщение 2</li>
+  <li id="message-3" data-action="delete">Сообщение 3</li>
+  <li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
+  <li id="message-5" data-action="edit delete">Сообщение 5</li>
+  <li><a href="#">...</a></li>
+</ul>
+
+
+<a href="http://site.com/list.zip">Ссылка на архив</a>
+<a href="http://site.com/list.pdf">..И на PDF</a>
+
+
+<script>
+
+/**
+ * Функция test(selector, count) находит элементы по селектору 
+ * и сравнивает их число с count. 
+ * 
+ * Иными словами, вызовы ниже проверяют, 
+ * что число элементов по селектору - правильное  
+**/
+test('input', 3); // далее вместо '...' вставьте правильные селекторы
+
+// Выбрать input типа checkbox
+test('...', 1);
+
+// Выбрать input типа checkbox, НЕ отмеченный
+test('...', 1);
+
+// Найти все элементы с id=message или message-*
+test('...', 6); 
+
+// Найти все элементы с id=message-*
+test('...', 5); 
+
+// Найти все ссылки с расширением href="...zip"
+test('...', 1); 
+
+// Найти все элементы с data-action, содержащим delete в списке (через пробел)
+test('...', 2); 
+
+// Найти все элементы, у которых ЕСТЬ атрибут data-action, 
+// но он НЕ содержит delete в списке (через пробел)
+test('...', 1); 
+
+// Выбрать все чётные элементы списка #messages
+test('...', 3);
+
+// Выбрать один элемент сразу за заголовком h3#widget-title
+// на том же уровне вложенности
+test('...', 1);
+
+// Выбрать все ссылки, следующие за заголовком h3#widget-title
+// на том же уровне вложенности
+test('...', 2);
+
+// Выбрать ссылку внутри последнего элемента списка #messages
+test('...', 1);
+
+
+function test(selector, count) {
+  if (selector === '...') return; 
+
+  var elems = document.querySelectorAll(selector);
+  var ok = (elems.length == count);
+
+  if (!ok) alert(selector+": " + elems.length + " != " + count);
+}
+
+</script>
+</body>
+</html>
diff --git a/3-more/11-css-for-js/15-css-selectors/1-select-elements-selector/task.md b/3-more/11-css-for-js/15-css-selectors/1-select-elements-selector/task.md
new file mode 100644
index 00000000..46322989
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/1-select-elements-selector/task.md
@@ -0,0 +1,42 @@
+# Выберите элементы селектором
+
+[importance 5]
+
+HTML-документ:
+
+```html
+<input type="checkbox"> 
+<input type="checkbox" checked> 
+<input type="text" id="message">
+
+<h3 id="widget-title">Сообщения:</h3>
+<ul id="messages">
+  <li id="message-1">Сообщение 1</li>
+  <li id="message-2">Сообщение 2</li>
+  <li id="message-3" data-action="delete">Сообщение 3</li>
+  <li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
+  <li id="message-5" data-action="edit delete">Сообщение 5</li>
+  <li><a href="#">...</a></li>
+</ul>
+
+
+<a href="http://site.com/list.zip">Ссылка на архив</a>
+<a href="http://site.com/list.pdf">..И на PDF</a>
+```
+
+Задания:
+<ol>
+<li>Выбрать `input` типа `checkbox`.</li>
+<li>Выбрать `input` типа `checkbox`, НЕ отмеченный.</li>
+<li>Найти все элементы с `id=message` или `message-*`.</li>
+<li>Найти все элементы с `id=message-*`.</li>
+<li>Найти все ссылки с расширением `href="...zip"`.</li>
+<li>Найти все элементы с атрибутом `data-action`, содержащим `delete` в списке (через пробел).</li>
+<li>Найти все элементы, у которых ЕСТЬ атрибут `data-action`, но он НЕ содержит `delete` в списке (через пробел).</li>
+<li>Выбрать все чётные элементы списка `#messages`.</li>
+<li>Выбрать один элемент сразу за заголовком `h3#widget-title` на том же уровне вложенности.</li>
+<li>Выбрать все ссылки, следующие за заголовком `h3#widget-title` на том же уровне вложенности.</li>
+<li>Выбрать ссылку внутри последнего элемента списка `#messages`.</li>
+</ol>
+
+[edit src="source"]Исходный документ с вспомогательной функцией `test` для проверки[/edit]
\ No newline at end of file
diff --git a/3-more/11-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/solution.md b/3-more/11-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/solution.md
new file mode 100644
index 00000000..06e97d0a
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/solution.md
@@ -0,0 +1,30 @@
+# Выбор элементов
+
+Для выбора элементов, начиная с первого, можно использовать селектор [nth-child](http://css-tricks.ru/Articles/Details/HowNthChildWorks).
+
+Его вид: `li:nth-child(n+2)`, т.к. `n` идёт от нуля, соответственно первым будет второй элемент (`n=0`), что нам и нужно.
+
+# Решение
+
+Отступ, размером в одну строку, при `line-height: 1.5` -- это `1.5em`.
+
+Правило:
+
+```css
+li:nth-child(n+2) {
+  margin-top: 1.5em;
+}
+```
+
+Полный код [edit src="solution"]в песочнице[/edit].
+
+# Ещё решение
+
+Ещё один вариант селектора: `li + li`
+
+```css
+li + li {
+  margin-top: 1.5em;
+}
+```
+
diff --git a/3-more/11-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/solution.view/index.html b/3-more/11-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/solution.view/index.html
new file mode 100755
index 00000000..e7e8feea
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/solution.view/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+  body {
+    font: 14px/1.5 Georgia, serif;
+  }
+  ul {
+    margin: 0;
+  }
+
+  li:nth-child(n+2) {
+    margin-top: 1.5em;
+  }
+  </style>
+</head>
+<body>
+
+Текст вверху без отступа от списка.
+<ul>
+  <li>Маша</li>
+  <li>Паша</li>
+  <li>Даша</li>
+  <li>Женя</li>
+  <li>Саша</li>
+  <li>Гоша</li>
+</ul>
+Текст внизу без отступа от списка.
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/source.view/index.html b/3-more/11-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/source.view/index.html
new file mode 100755
index 00000000..eced2bc6
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/source.view/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+  body {
+    font: 14px/1.5 Georgia, serif;
+  }
+  ul {
+    margin: 0;
+  }
+  </style>
+</head>
+<body>
+
+Текст вверху без отступа от списка.
+<ul>
+  <li>Маша</li>
+  <li>Паша</li>
+  <li>Даша</li>
+  <li>Женя</li>
+  <li>Саша</li>
+  <li>Гоша</li>
+</ul>
+Текст внизу без отступа от списка.
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/task.md b/3-more/11-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/task.md
new file mode 100644
index 00000000..9e0e654a
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/2-margin-between-pairs-size-1/task.md
@@ -0,0 +1,38 @@
+# Отступ между элементами, размер одна строка
+
+[importance 4]
+
+Есть список `UL/LI`.
+
+```html
+Текст вверху без отступа от списка.
+<ul>
+  <li>Маша</li>
+  <li>Паша</li>
+  <li>Даша</li>
+  <li>Женя</li>
+  <li>Саша</li>
+  <li>Гоша</li>
+</ul>
+Текст внизу без отступа от списка.
+```
+
+Размеры шрифта и строки заданы стилем:
+
+```css
+body {
+  font: 14px/1.5 Georgia, serif;
+}
+```
+
+**Сделайте, чтобы между элементами был вертикальный отступ.**
+<ul>
+<li>Размер отступа: ровно 1 строка.</li>
+<li>Нужно добавить только одно правило CSS с одним псевдоселектором, можно использовать CSS3.</li>
+<li>Не должно быть лишних отступов сверху и снизу списка.</li>
+</ul>
+
+Результат:
+[iframe src="solution" border=1 link]
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/3-more/11-css-for-js/15-css-selectors/3-margin-between-pairs/index.html b/3-more/11-css-for-js/15-css-selectors/3-margin-between-pairs/index.html
new file mode 100755
index 00000000..2839e0dd
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/3-margin-between-pairs/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+  body {
+    font: 14px/1.5 Georgia, serif;
+  }
+  ul {
+    margin: 0;
+  }
+
+  li:nth-child(odd):not(:first-child) {
+    margin-top: 1.5em;
+  }
+  </style>
+</head>
+<body>
+
+Текст вверху без отступа от списка.
+<ul>
+  <li>Маша</li>
+  <li>Паша</li>
+  <li>Даша</li>
+  <li>Женя</li>
+  <li>Саша</li>
+  <li>Гоша</li>
+</ul>
+Текст внизу без отступа от списка.
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/15-css-selectors/3-margin-between-pairs/solution.md b/3-more/11-css-for-js/15-css-selectors/3-margin-between-pairs/solution.md
new file mode 100644
index 00000000..1d4b8551
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/3-margin-between-pairs/solution.md
@@ -0,0 +1,26 @@
+# Селектор
+
+Для отступа между парами, то есть перед каждым нечётным элементом, можно использовать селектор [nth-child](http://css-tricks.ru/Articles/Details/HowNthChildWorks).
+
+Селектор будет `li:nth-child(odd)`, к нему нужно ещё добавить отсечение первого элемента: `li:nth-child(odd):not(:first-child)`.
+
+Можно поступить и по-другому: `li:nth-child(2n+3)` выберет все элементы для `n=0,1,2...`, то есть 3й, 5й и далее, те же, что и предыдущий селектор. Немного менее очевидно, зато короче.
+
+# Правило
+
+Отступ, размером в одну строку, при `line-height: 1.5` -- это `1.5em`.
+
+Поставим отступ перед каждым *нечётным* элементом, кроме первого:
+
+```css
+li:nth-child(odd):not(:first-child) {
+  margin-top: 1.5em;
+}
+```
+
+Получится так:
+
+```html
+<!--+ run src="index.html" -->
+```
+
diff --git a/3-more/11-css-for-js/15-css-selectors/3-margin-between-pairs/solution.view/index.html b/3-more/11-css-for-js/15-css-selectors/3-margin-between-pairs/solution.view/index.html
new file mode 100755
index 00000000..2839e0dd
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/3-margin-between-pairs/solution.view/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+  body {
+    font: 14px/1.5 Georgia, serif;
+  }
+  ul {
+    margin: 0;
+  }
+
+  li:nth-child(odd):not(:first-child) {
+    margin-top: 1.5em;
+  }
+  </style>
+</head>
+<body>
+
+Текст вверху без отступа от списка.
+<ul>
+  <li>Маша</li>
+  <li>Паша</li>
+  <li>Даша</li>
+  <li>Женя</li>
+  <li>Саша</li>
+  <li>Гоша</li>
+</ul>
+Текст внизу без отступа от списка.
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/15-css-selectors/3-margin-between-pairs/source.view/index.html b/3-more/11-css-for-js/15-css-selectors/3-margin-between-pairs/source.view/index.html
new file mode 100755
index 00000000..eced2bc6
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/3-margin-between-pairs/source.view/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+  body {
+    font: 14px/1.5 Georgia, serif;
+  }
+  ul {
+    margin: 0;
+  }
+  </style>
+</head>
+<body>
+
+Текст вверху без отступа от списка.
+<ul>
+  <li>Маша</li>
+  <li>Паша</li>
+  <li>Даша</li>
+  <li>Женя</li>
+  <li>Саша</li>
+  <li>Гоша</li>
+</ul>
+Текст внизу без отступа от списка.
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/15-css-selectors/3-margin-between-pairs/task.md b/3-more/11-css-for-js/15-css-selectors/3-margin-between-pairs/task.md
new file mode 100644
index 00000000..d5b0e778
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/3-margin-between-pairs/task.md
@@ -0,0 +1,38 @@
+# Отступ между парами, размером со строку
+
+[importance 4]
+
+Есть список `UL/LI`.
+
+```html
+Текст вверху без отступа от списка.
+<ul>
+  <li>Маша</li>
+  <li>Паша</li>
+  <li>Даша</li>
+  <li>Женя</li>
+  <li>Саша</li>
+  <li>Гоша</li>
+</ul>
+Текст внизу без отступа от списка.
+```
+
+Размеры шрифта и строки заданы стилем:
+
+```css
+body {
+  font: 14px/1.5 Georgia, serif;
+}
+```
+
+**Сделайте, чтобы между каждой парой элементов был вертикальный отступ.**
+<ul>
+<li>Размер отступа: ровно 1 строка.</li>
+<li>Нужно добавить только одно правило CSS, можно использовать CSS3.</li>
+<li>Не должно быть лишних отступов сверху и снизу списка.</li>
+</ul>
+
+Результат:
+[iframe src="solution" border=1 link]
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/3-more/11-css-for-js/15-css-selectors/article.md b/3-more/11-css-for-js/15-css-selectors/article.md
new file mode 100644
index 00000000..9a023542
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/article.md
@@ -0,0 +1,255 @@
+# Знаете ли вы селекторы?
+
+CSS3-селекторы -- фундаментально полезная вещь. 
+
+Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.
+
+Поэтому эти селекторы необходимо знать.
+[cut]
+
+## Основные виды селекторов
+
+Основных видов селекторов всего несколько:
+
+<ul>
+<li>`*` -- любые элементы.</li>
+<li>`div` -- элементы с таким тегом.</li>
+<li>`#id` -- элемент с данным `id`.</li>
+<li>`.class` -- элементы с таким классом.</li>
+<li>`[name="value"]` -- селекторы на атрибут (см. далее).</li>
+<li>`:visited` -- "псевдоклассы", остальные разные условия на элемент (см. далее).</li>
+</ul>
+
+**Селекторы можно комбинировать, записывая последовательно, без пробела:**
+
+<ul>
+<li>`.c1.c2` -- элементы одновременно с двумя классами `c1` и `c2`</li>
+<li>`a#id.c1.c2:visited` -- элемент `a` с данным `id`, классами `c1` и `c2`, и псевдоклассом `visited`</li>
+</ul>
+
+## Отношения
+
+В CSS3 предусмотрено четыре вида отношений между элементами.
+
+Самые известные вы наверняка знаете:
+<ul>
+<li>`div p` -- элементы `p`, являющиеся потомками `div`.</li>
+<li>`div > p` -- только непосредственные потомки</li>
+</ul>
+
+Есть и два более редких:
+<ul>
+<li>`div ~ p` -- правые соседи: все `p` на том же уровне вложенности, которые идут после `div`.</li>
+<li>`div + p` -- первый правый сосед: `p` на том же уровне вложенности, который идёт сразу после `div` (если есть).</li>
+</ul>
+
+Посмотрим их на примере HTML:
+
+```html
+<h3>Балтославянские языки</h3>
+
+<ol id="languages">
+  ...Вложенный OL/LI список языков...
+</ol>
+```
+
+CSS-селекторы:
+
+```css
+##languages li {
+  color: brown;   /* потомки #languages, подходящие под селектор  LI */
+}
+
+##languages > li {
+  color: black;   /* первый уровень детей #languages подходящих под LI */
+}
+
+##e-slavic { font-style: italic; }
+
+*!*
+##e-slavic ~ li {  /* правые соседи #e-slavic с селектором LI */
+  color: red;
+}
+*/!*
+
+##latvian { 
+  font-style: italic;
+}
+
+##latvian * {      /* потомки #latvian, подходяще под * (т.е. любые) */
+  font-style: normal;
+}
+
+*!*
+##latvian + li {  /* первый правый сосед #latvian с селектором LI */
+ color: green;
+}
+*/!*
+```
+
+Результат:
+[iframe src="relation" border="1" edit link] 
+
+
+## Фильтр по месту среди соседей
+
+При выборе элемента можно указать его место среди соседей.
+
+Список псевдоклассов для этого:
+
+<ul>
+<li>`:first-child` -- первый потомок своего родителя.</li>
+<li>`:last-child` -- последний потомок своего родителя.</li>
+<li>`:only-child` -- единственный потомок своего родителя, соседних элементов нет.</li>
+<li>`:nth-child(a)` -- потомок номер `a` своего родителя, например `:nth-child(2)` -- второй потомок. Нумерация начинается с `1`.</li>
+<li>`:nth-child(an+b)` -- расширение предыдущего селектора через указание номера потомка формулой, где `a,b` -- константы, а под `n` подразумевается любое целое число.
+
+Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо `n`. Например:
+<ul>
+<li>`:nth-child(2n)` даст элементы номер `2`, `4`, `6`..., то есть чётные.</li>
+<li>`:nth-child(2n+1)` даст элементы номер `1`, `3`..., то есть нечётные.</li>
+<li>`:nth-child(3n+2)` даст элементы номер `2`, `5`, `8` и так далее.</li>
+</ul>
+</li>
+</ul>
+
+Пример использования для выделения в списке:
+[iframe src="nthchild" border="1" edit link]
+
+```css
+/*+ hide="CSS к примеру выше" */
+li:nth-child(2n) { /* чётные */
+  background: #eee;
+}
+
+li:nth-child(3) {  /* 3-ий потомок */
+  color: red;
+}
+```
+
+<ul>
+<li>`:nth-last-child(a)`, `:nth-last-child(an+b)` -- то же самое, но отсчёт начинается с конца, например `:nth-last-child(2)` -- второй элемент с конца.</li>
+</ul>
+
+## Фильтр по месту среди соседей с тем же тегом
+
+Есть аналогичные псевдоклассы, которые учитывают не всех соседей, а только с тем же тегом:
+
+<ul>
+<li>`:first-of-type`</li>
+<li>`:last-of-type`</li>
+<li>`:only-of-type`</li>
+<li>`:nth-of-type`</li>
+<li>`:nth-last-of-type`</li>
+</ul>
+
+Они имеют в точности тот же смысл, что и обычные `:first-child`, `:last-child` и так далее, но во время подсчёта игнорируют элементы с другими тегами, чем тот, к которому применяется фильтр.
+
+Пример использования для раскраски списка `DT` "через один" и предпоследнего `DD`:
+
+[iframe src="nthchild-type" border="1" edit link]
+
+```css
+/*+ hide="CSS к примеру выше" */
+dt:nth-of-type(2n) {
+  /* чётные dt (соседи с другими тегами игнорируются) */
+  background: #eee;
+}
+
+dd:nth-last-of-type(2) {
+  /* второй dd снизу */
+  color: red;
+}
+```
+
+Как видим, селектор `dt:nth-of-type(2n)` выбрал каждый второй элемент `dt`, причём другие элементы (`dd`) в подсчётах не участвовали.
+
+## Селекторы атрибутов
+
+<dl>
+<dt>На атрибут целиком</dt>
+<dd>
+<ul>
+<li>`[attr]` -- атрибут установлен,</li>
+<li>`[attr="val"]` -- атрибут равен `val`.</li>
+</ul>
+</dd>
+<dt>На начало атрибута</dt>
+<dd>
+<ul>
+<li>`[attr^="val"]` -- атрибут начинается с `val`, например `"value"`.</li>
+<li>`[attr|="val"]` -- атрибут равен `val` *или* начинается с `val-`, например равен `"val-1"`.</li>
+</ul>
+</dd>
+<dt>На содержание</dd>
+<dd>
+<ul>
+<li>`[attr*="val"]` -- атрибут содержит подстроку `val`, например равен `"myvalue"`.</li>
+<li>`[attr~="val"]` -- атрибут содержит `val` как одно из значений через пробел.
+Например: `[attr~="delete"]` верно для `"edit delete"` и неверно для `"undelete"` или `"no-delete"`.</li>
+</ul>
+</dd>
+<dt>На конец атрибута</dt>
+<dd>
+<ul>
+<li>`[attr$="val"]` -- атрибут заканчивается на `val`, например равен `"myval"`.</li>
+</ul>
+</dd>
+</dl>
+
+## Другие псевдоклассы
+
+<ul>
+<li>`:not(селектор)` -- все, кроме подходящих под селектор.</li>
+<li>`:focus` -- в фокусе.</li>
+<li>`:hover` -- под мышью.</li>
+<li>`:empty` -- без детей (даже без текстовых).</li>
+<li>`:checked`, `:disabled`, `:enabled` -- состояния `INPUT`.</li>
+<li>`:target` -- этот фильтр сработает для элемента, `ID` которого совпадает с анкором  `#...` текущего URL.
+
+Например, если на странице есть элемент с `id="intro"`, то правило `:target { color: red }` подсветит его в том случае, если текущий URL имеет вид `http://...#intro`.
+</li>
+</ul>
+
+## Псевдоэлементы ::before, ::after
+
+"Псевдоэлементы" -- различные вспомогательные элементы, которые браузер записывает или может записать в документ.
+
+При помощи *псевдоэлементов* `::before` и `::after` можно добавлять содержимое в начало и конец элемента:
+
+```html
+<!--+ autorun -->
+<style>
+li::before {
+  content: " [[ ";
+}
+
+li::after {
+  content: " ]] ";
+}
+</style>
+
+Обратите внимание: содержимое добавляется <b>внутрь</b> LI.
+
+<ul>
+  <li>Первый элемент</li>
+  <li>Второй элемент</li>
+</ul>
+```
+
+Псевдоэлементы `::before`/`::after` добавили содержимое в начало и конец каждого `LI`.
+ 
+[smart header="`:before` или `::before`?"]
+Когда-то все браузеры реализовали эти псевдоэлементы с одним двоеточием: `:after/:before`. 
+
+Стандарт с тех пор изменился и сейчас все, кроме IE8, понимают также современную запись с двумя двоеточиями. А для IE8 нужно по-прежнему одно. 
+
+Поэтому если вам важна поддержка IE8, то имеет смысл использовать одно двоеточие.
+
+Версии IE7- не понимают этих селекторов.
+[/smart]
+
+## Практика
+
+Вы можете использовать информацию выше как справочную для решения задач ниже, которые уже реально покажут, владеете вы CSS-селекторами или нет.
+
diff --git a/3-more/11-css-for-js/15-css-selectors/nthchild-type.view/index.html b/3-more/11-css-for-js/15-css-selectors/nthchild-type.view/index.html
new file mode 100755
index 00000000..2aec672a
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/nthchild-type.view/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <style>
+
+    dt:nth-of-type(2n) {
+      /* чётные dt (соседи с другими тегами игнорируются) */
+      background: #eee;
+    }
+
+    dd:nth-last-of-type(2) {
+      /* второй dd снизу */
+      color: red;
+    }
+    
+    code {
+      border: 1px solid black;
+    }
+
+
+  </style>
+</head>
+<body>
+
+<dl>
+  <dt>Первый dt</dt>
+  <dd>Описание dd</dd>
+  <dt>Второй dt <code>dt:nth-of-type(2n)</code></dt>
+  <dd>Описание dd</dd>
+  <dt>Третий dt</dt>
+  <dd>Описание dd <code>dd:nth-last-of-type(2)</code></dd>
+  <dt>Четвёртый dt <code>dt:nth-of-type(2n)</code></dt>
+  <dd>Описание dd</dd>
+</dl>
+
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/15-css-selectors/nthchild.view/index.html b/3-more/11-css-for-js/15-css-selectors/nthchild.view/index.html
new file mode 100755
index 00000000..ca5d343c
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/nthchild.view/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <style>
+
+    li:nth-child(2n) { /* чётные */
+      background: #eee;
+    }
+
+    li:nth-child(3) {  /* 3-ий потомок */
+      color: red;
+    }
+
+    code {
+      border: 1px solid black;
+    }
+
+  </style>
+</head>
+<body>
+
+<ul>
+  <li>Древнерусский язык</li>
+  <li>Древненовгородский диалект <code>li:nth-child(2n)</code></li>
+  <li>Западнорусский письменный язык <code>li:nth-child(3)</code></li>
+  <li>Украинский язык <code>li:nth-child(2n)</code></li>
+  <li>Белорусский язык</li>
+  <li>Другие языки <code>li:nth-child(2n)</code></li>
+</ul>
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/15-css-selectors/relation.view/index.html b/3-more/11-css-for-js/15-css-selectors/relation.view/index.html
new file mode 100755
index 00000000..6f97aedc
--- /dev/null
+++ b/3-more/11-css-for-js/15-css-selectors/relation.view/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+#languages li {
+  color: brown;
+}
+
+#languages > li {
+  color: black;
+}
+
+#e-slavic { font-style: italic; }
+#e-slavic ~ li {
+  color: red;
+}
+
+#latvian { font-style: italic; }
+
+#latvian * { font-style: normal }
+#latvian + li {
+ color: green;
+}
+
+code {
+  border: 1px solid black;
+}
+
+</style>
+</head>
+<body>
+
+<h3>Балтославянские языки</h3>
+
+<ol id="languages">
+  <li>Славянские языки
+    <ol>
+      <li>Славянские микроязыки</li>
+      <li>Праславянский язык</li>
+      <li id="e-slavic">Восточнославянские языки <code>#e-slavic</code></li>
+      <li>Западнославянские языки <code>#e-slavic ~ li</code></li>
+      <li>Южнославянские языки <code>#e-slavic ~ li</code></li>
+      <li> ... <code>#e-slavic ~ li</code></li>
+    </ol>
+  </li>
+  <li>Балтийские языки
+    <ol>
+      <li>Литовский язык</li>
+      <li id="latvian">Латышский язык <code>#latvian</code>
+        <ol><li>Латгальский язык <code>#latvian *</code></li></ol>
+      </li>
+      <li>Прусский язык <code>#latvian + li </code></li>
+      <li>... (следующий элемент уже не <code>#latvian + li</code>)</li>
+    </ol>
+  </li>
+</ol>
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/16-css-no-ie6/article.md b/3-more/11-css-for-js/16-css-no-ie6/article.md
new file mode 100644
index 00000000..22174be7
--- /dev/null
+++ b/3-more/11-css-for-js/16-css-no-ie6/article.md
@@ -0,0 +1,46 @@
+# CSS без IE6(7)
+
+CSS-возможности, которыми мы можем пользоваться, если НЕ поддерживаем IE6.
+[cut]
+<dl>
+<dt>Селекторы атрибутов:</dt>
+<dd>
+<ul>
+<li>`[attr]` -- атрибут установлен,</li>
+<li>`[attr="val"]` -- атрибут равен `val`,</li>
+<li>`[attr^="val"]` -- атрибут начинается с `val`, например `"value"`.</li>
+<li>`[attr*="val"]` -- атрибут содержит `val`, например равен `"myvalue"`.</li>
+<li>`[attr$="val"]` -- атрибут заканчивается на `val`, например равен `"myval"`.</li>
+<li>`[attr~="val"]` -- атрибут содержит `val` как одно из значений через пробел, например: `[data-actions~="edit"]` верно для значения `data-actions="edit delete"`.</li>
+<li>`[attr|="val"]` -- атрибут равен `val` *или* начинается с `val-`, например равен `"val-1"`.</li>
+</ul>
+
+</dd>
+<dt>Селекторы элементов:</dt>
+<dd>
+
+
+<ul>
+<li>`ul > li` -- непосредственный потомок,</li>
+<li>`.prev + .me` -- выбирает `.me`, которые стоят сразу после `.prev`, т.е. "правый брат".</li>
+<li>`.prev ~ .me` -- выбирает `.me`, которые стоят после `.prev`, но не обязательно сразу после, между ними могут быть другие элементы,</li>
+<li>`.a.b` -- несколько классов одновременно,</li>
+<li>`:hover` -- курсор над элементом (в IE6 работает только с `A`),
+<li>`:first-child` -- первый потомок в своём родителе.</li>
+</ul>
+
+Внимание, IE7 не пересчитывает стили при изменении окружающих элементов для селекторов `.prev + .me`, `.prev` и `:first-child`. Иными словами, не обновляет стиль при добавлении/удалении соседей через JavaScript.
+</dd>
+<dt>Свойства: </dt>
+<dd>
+<ul>
+<li>`min-width/min-height` -- минимальная ширина/высота</li>
+<li>`max-width/max-height` -- максимальная ширина/высота</li>
+<li>`position: fixed`</li>
+</ul>
+</dd>
+</dl>
+
+Здесь перечислены в основном возможности. Разумеется, была поправлена и масса багов.
+
+При отказе от поддержки IE7, и, тем более, IE8, список ещё шире и включает в себя почти весь CSS 2.1.
diff --git a/3-more/11-css-for-js/17-css-sprite/article.gif b/3-more/11-css-for-js/17-css-sprite/article.gif
new file mode 100755
index 00000000..8f44ebf9
Binary files /dev/null and b/3-more/11-css-for-js/17-css-sprite/article.gif differ
diff --git a/3-more/11-css-for-js/17-css-sprite/article.md b/3-more/11-css-for-js/17-css-sprite/article.md
new file mode 100644
index 00000000..ddb7bf1c
--- /dev/null
+++ b/3-more/11-css-for-js/17-css-sprite/article.md
@@ -0,0 +1,203 @@
+# CSS-спрайты 
+
+CSS-спрайт -- способ объединить много изображений в одно, чтобы:
+<ol>
+<li>Cократить количество обращений к серверу.</li>
+<li>Загрузить несколько изображений сразу, включая те, которые понадобятся в будущем.</li>
+<li>Если у изображений сходная палитра, то объединённое изображение будет меньше по размеру, чем совокупность исходных картинок.</li>
+</ol>
+[cut]
+Рассмотрим, как это работает, на примере дерева:
+
+```html
+<ul>
+<li class="open">
+  <div class="icon"></div>
+  <div class="text">Раздел 1<br>В две строки</div>
+  <ul>
+  <li class="closed">
+    <div class="icon"></div>
+    <div class="text">Раздел 1.1 в одну строку</div>
+  </li>
+  <li class="leaf">
+    <div class="icon"></div>
+    <div class="text">Страница 1.2<br> в две строки</div>
+  </li>
+  </ul>
+</li>
+<li class="closed">
+  <div class="icon"></div>
+  <div class="text">Раздел 2<br>В две строки</div>
+</li>
+</ul>
+```
+
+[iframe src="sprite-tree-src" border=1 height=200 link edit]
+
+Сейчас "плюс", "минус" и "статья" -- три отдельных изображения. Объединим их в спрайт.
+
+
+
+## Шаг 1. Использовать background
+
+Первый шаг к объединению изображений в "спрайт" -- показывать их через `background`., а не через тег `IMG`.
+
+В данном случае он уже сделан. Стиль для дерева:
+
+```css
+.icon {
+  width: 16px;
+  height: 16px;
+  float: left;
+}
+
+.open .icon {
+  cursor: pointer;
+  background: url(minus.gif);
+}
+
+.closed .icon {
+  cursor: pointer;
+  background: url(plus.gif);
+}
+
+.leaf .icon {
+  cursor: text;
+  background: url(article.gif);
+}
+```
+
+## Шаг 2. Объединить изображения
+
+Составим из нескольких изображений одно `icons.gif`, расположив их, например, по вертикали.
+
+Из <img src="plus.gif">, <img src="minus.gif"> и <img src="article.gif"> получится одна картинка: <img src="icons.gif">
+
+## Шаг 3. Показать часть спрайта в "окошке"
+
+А теперь самое забавное. Размер `DIV'а` для иконки -- жёстко фиксирован:
+
+```css
+.icon {
+*!*
+  width: 16px;
+  height: 16px;
+*/!*
+  float: left;
+}
+```
+
+Это значит, что если поставить `background'ом` объединённую картинку, то вся она не поместится, будет видна только верхняя часть:
+
+[iframe src="sprite-tree-1" height=60 border=1]
+
+Если бы высота иконки была больше, например, `16x48`, как в примере ниже, то было бы видно и остальное:
+
+[iframe src="height48" height=80 border=1]
+..Но так как там всего `16px`, то помещается только одно изображение.
+
+## Шаг 4. Сдвинуть спрайт
+
+Сдвиг фона `background-position` позволяет выбирать, какую именно часть спрайта видно.
+
+В спрайте `icons.gif` изображения объединены так, что сдвиг на `16px` покажет следующую иконку:
+
+```css
+.icon {
+  width: 16px;
+  height: 16px;
+  float: left;
+  background: url(icons.gif) no-repeat;
+}
+
+.open .icon {
+  background-position: 0 -16px; /* вверх на 16px */
+  cursor: pointer;
+}
+
+.closed .icon {
+  background-position: 0 0px; /* по умолчанию */
+  cursor: pointer;
+}
+
+.leaf .icon {
+  background-position: 0 -32px; /* вверх на 32px */
+  cursor: text;
+}
+```
+
+Результат:
+
+[iframe src="sprite-tree" border=1 height=200 link edit]
+
+<ul>
+<li>В спрайт могут объединяться изображения разных размеров, т.е. сдвиг может быть любым.</li>
+<li>Сдвигать можно и по горизонтали и по вертикали.</li>
+</ul>
+
+### Отступы
+
+Обычно отступы делаются `margin/padding`, но иногда их бывает удобно предусмотреть в спрайте.
+
+Тогда если элемент немного больше, чем размер изображения, то в "окошке" не появится лишнего.
+
+Пример спрайта с отступами:
+
+<img src="sprites-example.png">
+
+Иконка RSS находится в нём на координатах `(90px, 40px)`:
+
+<img src="sprites-example-lines2.png">
+
+Это значит, что чтобы показать эту иконку, нужно сместить фон:
+
+```css
+background-position: -90px -40px;
+```
+
+При этом в левом-верхнем углу фона как раз и будет эта иконка:
+
+[iframe src="sprite-example" border=1]
+
+Элемент, в котором находится иконка (в рамке), больше по размеру, чем картинка. 
+
+Его стиль:
+
+```css
+.rss {
+  width: 35px; /* ширина/высота больше чем размер иконки */
+  height: 35px;
+  border: 1px solid black;
+  float: left;
+  background-image: url(sprite.png);
+  background-position: -90px -40px;
+}
+```
+
+Если бы в спрайте не было отступов, то в такое большое "окошко" наверняка влезли бы другие иконки.
+
+
+## Итого
+
+[smart header="Когда использовать для изображений `IMG`, а когда -- `CSS background`?"]
+
+Решение лучше всего принимать, исходя из принципов семантической вёрстки.
+
+Задайте вопрос -- что здесь делает изображение? Является ли оно самостоятельным элементом страницы (фотография, аватар посетителя), или же оформляет что-либо (иконка узла дерева)?
+
+Элемент `IMG` следует использовать в первом случае, а для оформления у нас есть CSS.
+[/smart]
+
+
+Спрайты позволяют:
+<ol>
+<li>Cократить количество обращений к серверу.</li>
+<li>Загрузить несколько изображений сразу, включая те, которые понадобятся в будущем.</li>
+<li>Если у изображений сходная палитра, то объединённое изображение будет меньше по размеру, чем совокупность исходных картинок.</li>
+</ol>
+
+Если фоновое изображение нужно повторять по горизонтали или вертикали, то спрайты тоже подойдут -- изображения в них нужно располагать в этом случае так, чтобы при повторении не были видны соседи, т.е., соответственно, вертикально или горизонтально, но не "решёткой".
+
+Далее мы встретимся со спрайтами при создании интерфейсов, чтобы кнопка при наведении меняла своё изображение. Один спрайт будет содержать все состояния кнопки, а переключение внешнего вида -- осуществляться при помощи сдвига `background-position`.
+
+Для автоматизированной сборки спрайтов используются специальные инструменты, например <a href="http://csssprites.org/">SmartSprites</a>.
\ No newline at end of file
diff --git a/3-more/11-css-for-js/17-css-sprite/height48.view/index.html b/3-more/11-css-for-js/17-css-sprite/height48.view/index.html
new file mode 100755
index 00000000..0425249f
--- /dev/null
+++ b/3-more/11-css-for-js/17-css-sprite/height48.view/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+    .icon {
+      width: 16px;
+      height: 48px;
+      float: left;
+      outline: 1px dotted black;
+      background: url(http://js.cx/sprite-tree/icons.gif) no-repeat;
+    }
+
+    li {
+      list-style: none;
+    }
+    .text {
+      margin: 6px 0 6px 16px;
+    }
+
+  </style>
+</head>
+<body>
+
+<ul>
+<li class="closed">
+  <div class="icon"></div>
+  <div class="text">Пример раздела</div>
+</li>
+</ul>
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/17-css-sprite/icons.gif b/3-more/11-css-for-js/17-css-sprite/icons.gif
new file mode 100755
index 00000000..9c24751e
Binary files /dev/null and b/3-more/11-css-for-js/17-css-sprite/icons.gif differ
diff --git a/3-more/11-css-for-js/17-css-sprite/minus.gif b/3-more/11-css-for-js/17-css-sprite/minus.gif
new file mode 100755
index 00000000..e4e6e6eb
Binary files /dev/null and b/3-more/11-css-for-js/17-css-sprite/minus.gif differ
diff --git a/3-more/11-css-for-js/17-css-sprite/plus.gif b/3-more/11-css-for-js/17-css-sprite/plus.gif
new file mode 100755
index 00000000..9f52ccdd
Binary files /dev/null and b/3-more/11-css-for-js/17-css-sprite/plus.gif differ
diff --git a/3-more/11-css-for-js/17-css-sprite/sprite-example/index.html b/3-more/11-css-for-js/17-css-sprite/sprite-example/index.html
new file mode 100755
index 00000000..4c0e07f7
--- /dev/null
+++ b/3-more/11-css-for-js/17-css-sprite/sprite-example/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .rss {
+      width: 35px;
+      height: 35px;
+      border: 1px solid black;
+      float: left;
+      background-image: url(http://js.cx/sprite-example/sprite.png);
+      background-position: -90px -40px;
+    }
+  </style>
+</head>
+<body>
+
+
+<div class="rss"></div>
+Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость
+Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость
+
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/17-css-sprite/sprite-tree-1/height48.view/index.html b/3-more/11-css-for-js/17-css-sprite/sprite-tree-1/height48.view/index.html
new file mode 100755
index 00000000..0425249f
--- /dev/null
+++ b/3-more/11-css-for-js/17-css-sprite/sprite-tree-1/height48.view/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+    .icon {
+      width: 16px;
+      height: 48px;
+      float: left;
+      outline: 1px dotted black;
+      background: url(http://js.cx/sprite-tree/icons.gif) no-repeat;
+    }
+
+    li {
+      list-style: none;
+    }
+    .text {
+      margin: 6px 0 6px 16px;
+    }
+
+  </style>
+</head>
+<body>
+
+<ul>
+<li class="closed">
+  <div class="icon"></div>
+  <div class="text">Пример раздела</div>
+</li>
+</ul>
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/17-css-sprite/sprite-tree-1/index.html b/3-more/11-css-for-js/17-css-sprite/sprite-tree-1/index.html
new file mode 100755
index 00000000..2809caa9
--- /dev/null
+++ b/3-more/11-css-for-js/17-css-sprite/sprite-tree-1/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      float: left;
+      outline: 1px dotted black;
+      background: url(http://js.cx/sprite-tree/icons.gif) no-repeat;
+    }
+
+    li {
+      list-style: none;
+    }
+    .text {
+      margin: 6px 0 6px 16px;
+    }
+
+  </style>
+</head>
+<body>
+
+<ul>
+<li class="closed">
+  <div class="icon"></div>
+  <div class="text">Пример раздела</div>
+</li>
+</ul>
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/17-css-sprite/sprite-tree-src.view/index.html b/3-more/11-css-for-js/17-css-sprite/sprite-tree-src.view/index.html
new file mode 100755
index 00000000..a84f874d
--- /dev/null
+++ b/3-more/11-css-for-js/17-css-sprite/sprite-tree-src.view/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      float: left;
+    }
+
+    .open .icon {
+      cursor: pointer;
+      background: url(http://js.cx/sprite-tree/minus.gif);
+    }
+
+    .closed .icon {
+      cursor: pointer;
+      background: url(http://js.cx/sprite-tree/plus.gif);
+    }
+
+    .leaf .icon {
+      cursor: text;
+      background: url(http://js.cx/sprite-tree/article.gif);
+    }
+
+    li {
+      list-style: none;
+    }
+    .text {
+      margin: 6px 0 6px 16px;
+    }
+
+  </style>
+</head>
+<body>
+
+
+
+<ul>
+<li class="open">
+  <div class="icon"></div>
+  <div class="text">Раздел 1<br>В две строки</div>
+  <ul>
+  <li class="closed">
+    <div class="icon"></div>
+    <div class="text">Раздел 1.1 в одну строку</div>
+  </li>
+  <li class="leaf">
+    <div class="icon"></div>
+    <div class="text">Страница 1.2<br> в две строки</div>
+  </li>
+  </ul>
+</li>
+<li class="closed">
+  <div class="icon"></div>
+  <div class="text">Раздел 2<br>В две строки</div>
+</li>
+</ul>
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/17-css-sprite/sprite-tree.view/index.html b/3-more/11-css-for-js/17-css-sprite/sprite-tree.view/index.html
new file mode 100755
index 00000000..95e50b77
--- /dev/null
+++ b/3-more/11-css-for-js/17-css-sprite/sprite-tree.view/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      float: left;
+      background: url(http://js.cx/sprite-tree/icons.gif) no-repeat;
+    }
+
+    .open .icon {
+      background-position: 0 -16px;
+      cursor: pointer;
+    }
+
+    .closed .icon {
+      background-position: 0 0px;
+      cursor: pointer;
+    }
+
+    .leaf .icon {
+      background-position: 0 -32px;
+      cursor: text;
+    }
+
+    li {
+      list-style: none;
+    }
+    .text {
+      margin: 6px 0 6px 16px;
+    }
+
+  </style>
+</head>
+<body>
+
+
+
+<ul>
+<li class="open">
+  <div class="icon"></div>
+  <div class="text">Раздел 1<br>В две строки</div>
+  <ul>
+  <li class="closed">
+    <div class="icon"></div>
+    <div class="text">Раздел 1.1 в одну строку</div>
+  </li>
+  <li class="leaf">
+    <div class="icon"></div>
+    <div class="text">Страница 1.2<br> в две строки</div>
+  </li>
+  </ul>
+</li>
+<li class="closed">
+  <div class="icon"></div>
+  <div class="text">Раздел 2<br>В две строки</div>
+</li>
+</ul>
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/17-css-sprite/sprites-example-lines2.png b/3-more/11-css-for-js/17-css-sprite/sprites-example-lines2.png
new file mode 100755
index 00000000..8a8db21c
Binary files /dev/null and b/3-more/11-css-for-js/17-css-sprite/sprites-example-lines2.png differ
diff --git a/3-more/11-css-for-js/17-css-sprite/sprites-example.png b/3-more/11-css-for-js/17-css-sprite/sprites-example.png
new file mode 100755
index 00000000..fbd5eaac
Binary files /dev/null and b/3-more/11-css-for-js/17-css-sprite/sprites-example.png differ
diff --git a/3-more/11-css-for-js/18-css-format/article.md b/3-more/11-css-for-js/18-css-format/article.md
new file mode 100644
index 00000000..947ef731
--- /dev/null
+++ b/3-more/11-css-for-js/18-css-format/article.md
@@ -0,0 +1,145 @@
+# Правила форматирования CSS
+
+Для того, чтобы CSS легко читался, полезно соблюдать пять правил форматирования.
+[cut]
+
+## Каждое свойство -- на отдельной строке
+
+Так -- неверно:
+
+```css
+##snapshot-box h2 { padding: 0 0 6px 0; font-weight: bold; position: absolute; left: 0; top: 0; }
+```
+
+Так -- правильно:
+
+```css
+##snapshot-box h2 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 0 0 6px 0; 
+  font-weight: bold; 
+}
+```
+
+Цель -- лучшая читаемость, проще найти и поправить свойство.
+
+## Каждый селектор -- на отдельной строке
+
+Неправильно:
+
+```css
+##snapshot-box h2, #profile-box h2, #order-box h2 {
+  padding: 0 0 6px 0; 
+  font-weight: bold; 
+}
+```
+
+Правильно:
+
+```css
+##snapshot-box h2, 
+##profile-box h2, 
+##order-box h2 {
+  padding: 0 0 6px 0; 
+  font-weight: bold; 
+}
+```
+
+Цель -- лучшая читаемость, проще найти селектор.
+
+## Свойства, сильнее влияющие на документ, идут первыми
+
+Рекомендуется располагать свойства в следующем порядке:
+<ol>
+<li>Сначала положение элемента относительно других: 
+`position`, `left/right/top/bottom`, `float`, `clear`, `z-index`.</li>
+<li>Затем размеры и отступы: 
+`width`, `height`, `margin`, `padding`...</li>
+<li>Рамка `border`, она частично относится к размерам.</li>
+<li>Общее оформление содержимого: 
+`list-style-type`, `overflow`...</li>
+<li>Цветовое и стилевое оформление: 
+`background`, `color`, `font`...</li>
+</ol>
+
+**Общая логика сортировки: "от общего -- к локальному и менее важному".**
+
+При таком порядке свойства, определяющие структуру документа, будут видны наиболее отчётливо, в начале, а самые незначительно влияющие (например цвет) -- в конце.
+
+Например:
+
+```css
+##snapshot-box h2 {
+  position: absolute; /* позиционирование */
+  left: 0;
+  top: 0;
+
+  padding: 0 0 6px 0; /* размеры и отступы */
+
+  color: red;         /* стилевое оформление */
+  font-weight: bold;  
+}
+```
+
+</li>
+<li>**Свойство без префикса пишется последним.**
+
+Например:
+
+```css
+-webkit-box-shadow:0 0 100px 20px #000;
+box-shadow:0 0 100px 20px #000;
+```
+
+Это нужно, чтобы стандартная (окончательная) реализация всегда была важнее, чем временные браузерные. 
+</li>
+
+## Организация CSS-файлов проекта
+
+Стили можно разделить на две основные группы:
+<ol>
+<li>**Блоки-компоненты имеют свой CSS.** Например, CSS для диалогового окна, CSS для профиля посетителя, CSS для меню.
+
+Такой CSS идёт "в комплекте" с модулем, его удобно выделять в отдельные файлы и подключать через `@import`. 
+
+Конечно, при разработке будет много CSS-файлов, но при выкладке проекта система сборки и сжатия CSS заменит директивы `@import` на их содержимое, объединяя все CSS в один файл.
+</li>
+<li>**Страничный и интегрирующий CSS**.
+Этот CSS описывает общий вид страницы, расположение компонент и их дополнительную стилизацию, зависящую от места на странице и т.п.
+
+```css
+.tab .profile { /* профиль внутри вкладки */
+  float: left;
+  width: 300px;
+  height: 200px;
+}
+```
+
+Важные страничные блоки можно выделять особыми комментариями:
+
+```css
+/** ===========================
+ *  Профиль посетителя
+ *  ===========================
+*/
+
+.profile {
+  border: 1px solid gray;
+}
+
+.profile h2 {
+  color: blue;
+  font-size: 1.8em;
+}
+```
+
+</li>
+</ol>
+
+
+CSS-препроцессоры, такие как [SASS](http://sass-lang.com/), [LESS](http://lesscss.org/), [Stylus](http://learnboost.github.com/stylus/), [Prefix-free](http://leaverou.github.com/prefixfree/) делает написание CSS сильно удобнее.. 
+
+Выберите один из них и используйте. Единственно, они добавляют дополнительную предобработку CSS, которую нужно учесть, и желательно, на сервере.
+
diff --git a/3-more/11-css-for-js/2-css-units/article.md b/3-more/11-css-for-js/2-css-units/article.md
new file mode 100644
index 00000000..6dd2442d
--- /dev/null
+++ b/3-more/11-css-for-js/2-css-units/article.md
@@ -0,0 +1,290 @@
+# Единицы измерения: "px", "em", "rem", "%" и другие
+
+В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину -- что и когда выбирать. 
+
+[cut]
+## Абсолютные: px
+
+Пиксель `px` -- это самая базовая, абсолютная и окончательная единица измерения.
+
+Количество пикселей задаётся в настроках [разрешения экрана](http://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D0%B7%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%B8%D0%B5_(%D0%BA%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%8F_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0), один `px` -- это как раз один такой пиксель на экране.  Все значения браузер в итоге пересчитает в пиксели.
+
+Пиксели могут быть дробными, например размер можно задать в `16.5px`. Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в `100px`, его нужно разделить на три части -- волей-неволей появляются `33.333...px`.
+
+Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование. При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.
+
+[compare]
++Главное достоинство пикселя -- чёткость и понятность
+-Другие единицы измерения -- в некотором смысле "мощнее", они являются относительными и позволяют устанавливать соотношения между различными размерами
+[/compare]
+
+
+[warn header="Давно на свалке: `mm`, `cm`, `pt`, `pc`"]
+
+Существуют также  "производные" от пикселя единицы измерения: `mm`, `cm`, `pt` и `pc`, но они давно отправились на свалку истории.
+
+Вот, если интересно, их значения:
+<ul>
+<li>`1mm` (мм) = `3.8px`</li>
+<li>`1cm` (см) = `38px`</li>
+<li>`1pt` (типографский пункт) = `4/3 px`</li>
+<li>`1pc` (типографская пика) = `16px`</li>
+</ul>
+Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет. 
+[/warn]
+
+[smart header="Почему сантиметре `cm` содержится ровно 38 пикселей?"]
+В реальной жизни сантиметр -- это такой отрезок, эталон длины. А [пиксель](http://ru.wikipedia.org/wiki/%D0%9F%D0%B8%D0%BA%D1%81%D0%B5%D0%BB%D1%8C) может быть разным, в зависимости от экрана.
+
+Но в формулах выше под пикселем понимается "сферический пиксель в вакууме", точка на "стандартизованном экране", характеристики которого описаны в [спецификации](http://www.w3.org/TR/CSS2/syndata.html#length-units). 
+
+Поэтому ни о каком соответствии `cm` реальному сантиметру здесь нет и речи. Полностью синтетическая и ненужная единица измерения.
+[/smart]
+
+
+## Относительно шрифта: em
+
+`1em` -- текущий размер шрифта.
+
+Можно брать любые пропорции от текущего шрифта: `2em`, `0.5em` и т.п.
+
+**Размеры в `em` -- *относительные*, они определяются по текущему контексту.**
+
+Например, давайте сравним `px` с `em` на таком примере:
+
+```html
+<!--+ autorun height=80 -->
+<div style="font-size:24px">
+  Страусы
+  <div style="font-size:24px">Живут также в Африке</div>
+</div>
+```
+
+`24` пикселей -- и в Африке `24` пикселей, поэтому две строчки выше одинаковы.
+
+А вот аналогичный пример с `em` вместо `px`:
+
+```html
+<!--+ autorun height=120 -->
+<div style="font-size:1.5em">
+  Страусы
+  <div style="font-size:1.5em">Живут также в Африке</div>
+</div>
+```
+
+Так как значение в `em` высчитывается относительно *текущего шрифта*, то вторая строка в `1.5` раза больше, чем первая.
+
+**Выходит, задавая размеры в `em`, мы задаём зависимость элементов от стиля родителя. Хочется увеличить или уменьшить всё вместе -- легко, просто поправим один стиль.**
+
+
+[smart header="Также относительно шрифта: `ex`, `ch`"]
+В спецификации указаны также единицы [ex](http://www.w3.org/TR/css3-values/#ex-unit) и [ch](http://www.w3.org/TR/css3-values/#ch-unit) ), которые означают размер в зависимости от таких характеристик шрифта как размер символа `"x"` и размер символа `"0"`. 
+
+Эти размеры присутствуют всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква `"x"` и ноль `"0"`.
+
+Эти единицы используются чрезвычайно редко, так как "размер шрифта" `em` обычно вполне подходит.
+[/smart]
+
+## Проценты %
+
+Проценты `%`, как и `em` -- относительные единицы.
+
+Вот пример с `%`, он выглядит в точности так же, как с `em`:
+
+```html
+<!--+ autorun height=120 -->
+<div style="font-size:150%">
+  Страусы
+  <div style="font-size:150%">Живут также в Африке</div>
+</div>
+```
+
+Когда мы говорим "процент", то возникает вопрос -- "Процент от чего?" 
+
+**Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.**
+
+Это очень важная особенность процентов, про которую, увы, часто забывают.
+
+Отличный источник информации по этой теме -- стандарт, [Visual formatting model details](http://www.w3.org/TR/CSS2/visudet.html).
+
+Некоторые примеры:
+<ul>
+<li>При установке свойства `margin-left` в `%`, процент берётся от *ширины* родительского блока (а вовсе не от его `margin-left`!)</li>
+<li>При установке свойства `line-height` в `%`, процент берётся от текущего *размера шрифта* (а вовсе не от текущего `line-height`!)</li>
+<li>Для `width/height` при `position:fixed`, процент берётся от ширины/высоты *окна* (а не родителя и не документа).</li>
+<li>Кроме того, иногда `%` требует соблюдения дополнительных условий, за примером -- обратитесь к статье [](/height-percent).</li>
+<li>Детали по `line-height` и размеру шрифта вы также можете найти в статье [](/font-size-line-height).</li>
+</ul>
+
+## Микс px и em: rem
+
+Итак, что у нас есть:
+<ul>
+<li>`px` -- абсолютные, чёткие, понятные, не зависящие ни от чего.</li>
+<li>`em` -- относительно размера шрифта.</li>
+<li>`%` -- относительно такого же свойства родителя (а может и не родителя, а может и не такого же -- см. оговорки выше).</li>
+</ul>
+
+Может быть, пора уже остановиться, может этого достаточно? 
+
+Э-э, нет! Не все вещи делаются удобно.
+
+Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки "Шрифт больше" и "Шрифт меньше". При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт. 
+
+Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде [key Ctrl++], но они работают слишком тупо -- берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А надо увеличить, к примеру, только шрифт, потому что посетитель хочет комфортнее читать. И увеличенный шрифт по-новому обтечёт элементы страницы.
+
+Какую единицу использовать для задания шрифтов? Лучше бы не `px`, ведь такие значения абслютны, если менять, то везде, вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.
+
+Следующие кандидаты -- `em` и `%`. 
+
+Разницы между ними здесь нет, так как при задании `font-size` в процентах, эти проценты берутся от `font-size` родителя, то есть ведут себя так же, как и `em`.
+
+Вроде бы, использовать можно, однако есть проблема.
+
+Посмотрите на пример с вложенными `<li>`:
+
+```html
+<!--+ run autorun -->
+<style>
+  li {
+    font-size: 0.8em;
+  }
+</style>
+
+<ul>
+<li>Собака
+  <ul>
+  <li>бывает
+    <ul>
+    <li>кусачей
+      <ul>
+      <li>только
+        <ul>
+        <li>от жизни
+          <ul>
+          <li>собачей</li>
+          </ul>
+        </li>
+        </ul>
+      </li>
+      </ul>
+    </li>
+    </ul>
+  </li>
+  </ul>
+</li>
+</ul>
+```
+
+Проблема очевидна. Хотели, как лучше, а получилось... Мелковато. Каждый `<li>` получил размер шрифта `0.8` от внешнего, это не совсем то, чего мы бы здесь хотели.
+
+Время появиться единице `rem`, которая, можно сказать, придумана для таких случаев!
+
+**Единица `rem` задаёт размер относительно размера шрифта элемента `<html>`.**
+
+Как правило, браузеры ставят этому элементу некоторый "разумный" (reasonable) размер по-умолчанию, который мы, конечно, можем переопределить и использовать `rem` для задания шрифтов внутри:
+
+```html
+<!--+ run height=400 autorun -->
+<style>
+*!*
+  html {
+    font-size: 14px;
+  }
+  li {
+    font-size: 0.8rem;
+  }
+*/!*
+</style>
+
+<div><button id="up">Кликните, чтобы увеличить размер шрифта</button></div>
+
+<img src="http://js.cx/clipart/angry_dog.png">
+
+<ul>
+<li>Собака
+  <ul>
+  <li>бывает
+    <ul>
+    <li>кусачей
+      <ul>
+      <li>только
+        <ul>
+        <li>от жизни
+          <ul>
+          <li>собачей</li>
+          </ul>
+        </li>
+        </ul>
+      </li>
+      </ul>
+    </li>
+    </ul>
+  </li>
+  </ul>
+</li>
+</ul>
+
+<script>
+var html = document.documentElement;
+up.onclick = function() {
+  // при помощи JS увеличить размер шрифта html на 2px
+  html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px';
+};
+</script>
+```
+
+Получилось удобное масштабирование для шрифтов, не влияющее на другие элементы. 
+
+Можно воспринимать `rem` как остановку посередине между `em` и `px`, потому что элементы в `rem` не зависят друг от друга и от контекста -- и этим похожи на `px`, а с другой стороны они все заданы относительно размера шрифта `<html>`.
+
+[warn header="Не поддерживается в IE8-"]
+Единица `rem` не поддерживается в IE8-. Для этих браузеров, которых становится всё меньше, есть два выхода:
+<ol>
+<li>Либо использовать `em` и правила, страхующие от вложенности, вроде:
+
+```css
+li { font-size: 0.8em }
+li li { font-size: 0.8em }
+li li li { font-size: 0.8em }
+```
+
+</li>
+<li>Либо сделать два правила в стилях: первое указывает размер в `px` (для IE8-), а второе -- в `rem` (переопределит первое в современных браузерах) и отключить маштабирование шрифтов для IE8-. Это проще.</li>
+</ol>
+[/warn]
+
+## Относительно экрана: vw, vh, vmin, vmax
+
+Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта [CSS Values and Units 3](http://dev.w3.org/csswg/css3-values/): 
+
+<ul>
+<li>`vw` -- 1% ширины окна</li>
+<li>`vh` -- 1% высоты окна</li>
+<li>`vmin` -- наименьшее из (`vw`, `vh`), в IE9 обозначается `vm`</li>
+<li>`vmax` -- наибольшее из (`vw`, `vh`)</li>
+</ul>
+
+**Эти значения были созданы, в первую очередь, для поддержки мобильных устройств.**
+
+Их основное преимущество -- в том, что любые размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна.
+
+Ниже написан текст с размером `5vh`:
+
+<p style="font-size:5vh">Страусы кусачими не бывают.</p>
+
+**Вы сможете легко увидеть, как работает `vh`, если поменяете размер окна браузера. Текст будет расти/уменьшаться.**
+
+## Итого
+
+Мы рассмотрели единицы измерения:
+
+<ul>
+<li>`px` -- абсолютные пиксели, к которым привязаны и потому не нужны `mm`, `cm`, `pt` и `pc`. Используется для максимально конкретного и точного задания размеров.</li>
+<li>`em` -- задаёт размер относительно шрифта родителя, можно относительно конкретных символов: `"x"`(`ex`) и `"0"`(`ch`), используется там, где нужно упростить масштабирование компоненты.</li>
+<li>`rem` -- задаёт размер относительно шрифта `<html>`, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в `rem`, а JS меняет шрифт у `<html>`.</li>
+<li>`%` -- относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты.</li>
+<li>`vw`, `vh`, `vmin`, `vmax` -- относительно размера экрана.</li>
+</ul>
+
+Здесь я постарался разобрать их применение и преимущества для решения конкретных задач, но вы, конечно, сможете использовать их для других ситуаций.
diff --git a/3-more/11-css-for-js/3-display/article.md b/3-more/11-css-for-js/3-display/article.md
new file mode 100644
index 00000000..b0063e47
--- /dev/null
+++ b/3-more/11-css-for-js/3-display/article.md
@@ -0,0 +1,265 @@
+# Все значения свойства "display"
+
+Свойство `display` имеет много разных значений. Обычно, используются только три из них: `none`, `inline` и `block`, потому что когда-то браузеры другие не поддерживали.
+
+Но, после прихода IE7 и, особенно, IE8+, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.
+
+## Значение none
+
+Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.
+
+```html
+<!--+ autorun -->
+<div style="border:1px solid black">
+Невидимый div (
+  <div style="*!*display: none*/!*">Я - невидим!</div>
+) Стоит внутри скобок
+</div>
+```
+
+## Значение block
+
+<ul>
+<li>**Блочные элементы располагаются один над другим, вертикально** (если нет особых свойств позиционирования, например `float`).</li>
+<li>**Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.**</li>
+</ul>
+
+Это значение `display` многие элементы имеют по умолчанию: `DIV`, заголовок, параграф.
+
+```html
+<!--+ autorun -->
+<div style="border:1px solid black">
+  <div style="border: 1px solid blue; width: 50%">Первый</div>
+  <div style="border: 1px solid red">Второй</div>
+</div>
+```
+
+Блоки прилегают друг к другу вплотную, если у них нет `margin`.
+
+## Значение inline
+
+<ul>
+<li>**Элементы располагаются на той же строке, последовательно.**</li>
+<li>**Ширина и высота элемента определяются по содержимому. Поменять их нельзя.**</li>
+</ul>
+
+Например, инлайновые элементы по умолчанию: `SPAN`, ссылка.
+
+```html
+<!--+ autorun -->
+<span style="border:1px solid black">
+  <span style="border: 1px solid blue; width:50%">Ширина</span>
+  <a style="border: 1px solid red">Игнорируется</a>
+</span>
+```
+
+Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними `SPAN` и `A` есть пробел. Это потому, что он есть в HTML. 
+
+Если расположить элементы вплотную -- его не будет:
+
+```html
+<!--+ autorun -->
+<span style="border:1px solid black">
+  <span style="border: 1px solid blue; width:50%">Без</span><a style="border: 1px solid red">Пробела</a>
+</span>
+```
+
+Содержимое инлайн-элемента может переноситься на другую строку. 
+
+При этом каждая строка в смысле отображения является отдельным прямоугольником ("line box"). **Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.** 
+
+Например:
+
+```html
+<!--+ autorun -->
+...<span style="background: #DEB887">
+  Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля
+  Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля
+  Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля
+</span>...
+```
+
+**Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:**
+
+```html
+<!--+ autorun -->
+<div style="border:1px solid black">
+  <span style="border: 1px solid red">Инлайн</span>
+  <div style="border: 1px solid blue; width:50%">Блок</div>
+  <span style="border: 1px solid red">Инлайн</span>
+</div>
+```
+
+## Значение inline-block
+
+Это значение -- означает элемент, который продолжает находиться в строке (`inline`), но при этом может иметь важные свойства блока.
+
+Как и инлайн-элемент:
+<ul>
+<li>**Располагается в строке.**</li>
+<li>**Размер устанавливается по содержимому.**</li>
+</ul>
+
+Во всём остальном -- это блок, то есть:
+<ul>
+<li>**Элемент всегда прямоугольный.**</li>
+<li>**Работают свойства `width/height`.**</li>
+</ul>
+
+Это значение `display` используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров. 
+
+Например:
+
+```html
+<!--+ autorun -->
+<style>
+li {
+*!*
+  display: inline-block;
+*/!*
+  list-style: none;
+  border: 1px solid red;
+}
+</style>
+
+<ul style="border:1px solid black; padding:0">
+  <li>Инлайн Блок<br>3 строки<br>высота/ширина явно не заданы</li>
+  <li style="width:100px;height:100px">Инлайн<br>Блок 100x100</li>
+  <li style="width:60px;height:60px">Инлайн<br>Блок 60x60</li>
+  <li style="width:100px;height:60px">Инлайн<br>Блок 100x60</li>
+  <li style="width:60px;height:100px">Инлайн<br>Блок 60x100</li>
+</ul>
+```
+
+Свойство `vertical-align` позволяет выровнять такие элементы внутри внешнего блока:
+
+```html
+<!--+ autorun -->
+<style>
+li {
+  display: inline-block;  
+  list-style: none;
+  border: 1px solid red;
+*!*
+  vertical-align: middle;
+*/!*
+}
+</style>
+
+<ul style="border:1px solid black; padding:0">
+  <li>Инлайн Блок<br>3 строки<br>высота/ширина явно не заданы</li>
+  <li style="width:100px;height:100px">Инлайн<br>Блок 100x100</li>
+  <li style="width:60px;height:60px">Инлайн<br>Блок 60x60</li>
+  <li style="width:100px;height:60px">Инлайн<br>Блок 100x60</li>
+  <li style="width:60px;height:100px">Инлайн<br>Блок 60x100</li>
+</ul>
+```
+
+Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript -- их не будет.
+
+**IE7 допускает это значение только для элементов, которые по умолчанию `inline`.**
+
+## Значения table-*
+
+Современные браузеры (не IE6,7) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения `display`.
+
+Для таблицы целиком `table`, для строки -- `table-row`, для ячейки -- `table-cell` и т.д.
+
+Пример использования:
+
+```html
+<!--+ run autorun -->
+<form style="display: *!*table*/!*">
+  <div style="display: *!*table-row*/!*">
+    <label style="display: *!*table-cell*/!*">Имя:</label>
+    <input style="display: *!*table-cell*/!*">
+  </div>
+  <div style="display: *!*table-row*/!*">
+    <label style="display: *!*table-cell*/!*">Фамилия:</label>
+    <input style="display: *!*table-cell*/!*">
+  </div>
+</form>
+```
+
+Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента,  [описанные в стандарте](http://www.w3.org/TR/CSS2/tables.html#width-layout). 
+
+**Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.**
+
+С точки зрения современного CSS, обычные `TABLE`, `TR`, `TD` и т.д. -- это просто элементы с предопределёнными значениями `display`:
+
+```css
+table    { display: table }
+tr       { display: table-row }
+thead    { display: table-header-group }
+tbody    { display: table-row-group }
+tfoot    { display: table-footer-group }
+col      { display: table-column }
+colgroup { display: table-column-group }
+td, th   { display: table-cell }
+caption  { display: table-caption }
+```
+
+Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт [CSS 2.1 - Tables](http://www.w3.org/TR/CSS2/tables.html).
+
+### Вертикальное центрирование с table-cell
+
+Внутри ячеек свойство [vertical-align](http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align) выравнивает содержимое по вертикали.
+
+Это можно использовать для центрирования:
+
+```html
+<!--+ run autorun -->
+<style>
+  div { border: 1px solid black }
+</style>
+
+<div style="height:100px; *!*display: table-cell; vertical-align: middle*/!*">
+  <div>Элемент<br>С неизвестной<br>Высотой</div>
+</div>
+```
+
+CSS не требует, чтобы вокруг `table-cell` была структура таблицы: `table-row` и т.п. Может быть просто такой одинокий `DIV`, это допустимо.
+
+При этом он ведёт себя как ячейка `TD`, то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи `vertical-align`.
+
+Значение `display: table-cell` поддерживается во всех браузерах, кроме IE<8. В IE6,7 можно использовать для центрирования CSS-выражения или реальную таблицу.
+
+## Значения list-item и run-in
+
+У свойства `display` есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:
+
+<dl>
+<dt>`list-item`</dt>
+<dd>Этот display по умолчанию используется для элементов списка. Он добавляет к блоку содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:
+
+```html
+<!--+ autorun -->
+<div style="*!*display: list-item*/!*; list-style:inside square">Пункт 1</div>
+```
+
+</dd>
+<dt>`run-in`</dt>
+<dd>Если после `run-in` идёт `block`, то `run-in` становится его первым инлайн-элементом, то есть отображается в начале `block`.
+
+Если ваш браузер поддерживает это значение,** то примере ниже `h3`, благодаря `display:run-in`, окажется визуально внутри `div`:
+
+```html
+<!--+ autorun -->
+<h3 style="*!*display: run-in*/!*; border: 2px solid red">Про пчёл.</h3>
+<div style="border: 2px solid black">Пчёлы - отличные создания, они делают мёд.</div>
+```
+
+Если же вы видите две строки, то ваш браузер НЕ поддерживает `run-in`. 
+
+Вот, для примера, правильный вариант отображения `run-in`, оформленный другим кодом:
+
+```html
+<!--+ autorun -->
+<div style="border: 2px solid black">
+  <h3 style="display: inline; border: 2px solid red">Про пчёл.</h3>Пчёлы - отличные создания, они делают мёд.
+</div>
+```
+
+Если этот вариант отличается от того, что вы видите выше -- ваш браузер не поддерживает `run-in`. На момент написания этой статьи только IE поддерживал `display:run-in`.
+</dd>
+</dl>
\ No newline at end of file
diff --git a/3-more/11-css-for-js/4-float/1-inline-block-vs-float/gallery-float-diffsize.png b/3-more/11-css-for-js/4-float/1-inline-block-vs-float/gallery-float-diffsize.png
new file mode 100755
index 00000000..0670bc21
Binary files /dev/null and b/3-more/11-css-for-js/4-float/1-inline-block-vs-float/gallery-float-diffsize.png differ
diff --git a/3-more/11-css-for-js/4-float/1-inline-block-vs-float/gallery-float-diffsize.view/index.html b/3-more/11-css-for-js/4-float/1-inline-block-vs-float/gallery-float-diffsize.view/index.html
new file mode 100755
index 00000000..13ff2887
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/1-inline-block-vs-float/gallery-float-diffsize.view/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+    .gallery li {
+      float: left;
+      width: 130px;
+
+      list-style: none;
+
+      /* красивости */
+      border: 1px solid black;
+      text-align: center;
+      margin: 5px;
+    }
+
+    .gallery li:nth-child(2n) {
+      height: 200px;
+    }
+
+  </style>
+</head>
+<body>
+
+<ul class="gallery">
+<li>
+  <img src="http://js.cx/carousel/1.png" width="130" height="130">
+  <div>Картинка 1</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/2.png" width="130" height="130">
+  <div>Картинка 2</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/3.png" width="130" height="130">
+  <div>Картинка 3</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/4.png" width="130" height="130">
+  <div>Картинка 4</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/5.png" width="130" height="130">
+  <div>Картинка 5</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/6.png" width="130" height="130">
+  <div>Картинка 6</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/7.png" width="130" height="130">
+  <div>Картинка 7</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/8.png" width="130" height="130">
+  <div>Картинка 8</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/9.png" width="130" height="130">
+  <div>Картинка 9</div>
+</li>
+
+</ul>
+</body>
+</html>
diff --git a/3-more/11-css-for-js/4-float/1-inline-block-vs-float/gallery-inline-block.view/index.html b/3-more/11-css-for-js/4-float/1-inline-block-vs-float/gallery-inline-block.view/index.html
new file mode 100755
index 00000000..72adde76
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/1-inline-block-vs-float/gallery-inline-block.view/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+    .gallery li {
+      display: inline-block;
+      vertical-align: middle;
+
+      width: 130px;
+
+      list-style: none;
+
+      /* красивости */
+      border: 1px solid black;
+      text-align: center;
+      margin: 5px;
+    }
+
+    .gallery li:nth-child(2n) {
+      height: 200px;
+    }
+
+  </style>
+</head>
+<body>
+
+<ul class="gallery">
+<li>
+  <img src="http://js.cx/carousel/1.png" width="130" height="130">
+  <div>Картинка 1</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/2.png" width="130" height="130">
+  <div>Картинка 2</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/3.png" width="130" height="130">
+  <div>Картинка 3</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/4.png" width="130" height="130">
+  <div>Картинка 4</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/5.png" width="130" height="130">
+  <div>Картинка 5</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/6.png" width="130" height="130">
+  <div>Картинка 6</div>
+</li>
+
+</ul>
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/1-inline-block-vs-float/solution.md b/3-more/11-css-for-js/4-float/1-inline-block-vs-float/solution.md
new file mode 100644
index 00000000..9c05c9d8
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/1-inline-block-vs-float/solution.md
@@ -0,0 +1,44 @@
+# Наводящие вопросы
+
+<ol>
+<li>Что произойдёт, если контейнеру `UL` поставить рамку `border` -- в первом и во втором случае?</li>
+<li>Что будет, если элементы `LI` различаются по размеру? Будут ли они корректно перенесены на новую строку в обоих случаях?</li>
+<li>Как будут вести себя блоки, находящиеся под галереей?</ul>
+</ol>
+
+# Ответы
+
+Разница колоссальная. 
+
+В первую очередь она в том, что `inline-block` продолжают участвовать в потоке, а `float` -- нет.
+
+Ответы на вопросы по примеру:
+
+<dl>
+<dt>Что будет, если контейнеру `UL` поставить рамку `border`?</dt>
+<dd>Контейнер не выделяет пространство под `float`. А больше там ничего нет. В результате он просто сожмётся в одну линию сверху.
+
+Попробуйте сами, добавьте рамку в [edit src="solution"]песочнице[/edit].
+
+А в случае с `inline-block` всё будет хорошо, т.к. элементы остаются в потоке.
+</dd>
+<dt>Что будет, если элементы `LI` различаются по размеру? Будут ли они корректно перенесены на новую строку в обоих случаях?</dt>
+<dd>При `float:left` элементы двигаются направо до тех пор, пока не наткнутся на границу внешнего блока (с учётом `padding`) или на другой `float`-элемент. 
+
+Может получиться вот так:
+
+<img src="gallery-float-diffsize.png">
+
+Вы можете увидеть это, открыв демо-галерею в отдельном окне и изменяя его размер:
+
+[demo src="gallery-float-diffsize"]
+
+При использовании `inline-block` таких странностей не будет, блоки перенесутся корректно на новую строку. И, кроме того, можно выровнять элементы по высоте при помощи `li { vertical-align:middle }`: 
+
+[iframe height=500 src="gallery-inline-block" link edit]
+</dd>
+<dt>Как будут вести себя блоки, находящиеся под галереей?</dt>
+<dd>В случае с `float` нужно добавить дополнительную очистку с `clear`, чтобы поведение было идентично обычному блоку. 
+
+Иначе блоки, находящиеся под галереей, вполне могут "заехать" по вертикали на территорию галереи.</dd>
+</dl>
\ No newline at end of file
diff --git a/3-more/11-css-for-js/4-float/1-inline-block-vs-float/solution.view/index.html b/3-more/11-css-for-js/4-float/1-inline-block-vs-float/solution.view/index.html
new file mode 100755
index 00000000..aadb464c
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/1-inline-block-vs-float/solution.view/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+    .gallery li {
+      float: left;
+      width: 130px;
+
+      list-style: none;
+
+      /* красивости */
+      border: 1px solid black;
+      text-align: center;
+      margin: 5px;
+    }
+
+  </style>
+</head>
+<body>
+
+<ul class="gallery">
+<li>
+  <img src="http://js.cx/carousel/1.png" width="130" height="130">
+  <div>Картинка 1</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/2.png" width="130" height="130">
+  <div>Картинка 2</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/3.png" width="130" height="130">
+  <div>Картинка 3</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/4.png" width="130" height="130">
+  <div>Картинка 4</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/5.png" width="130" height="130">
+  <div>Картинка 5</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/6.png" width="130" height="130">
+  <div>Картинка 6</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/7.png" width="130" height="130">
+  <div>Картинка 7</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/8.png" width="130" height="130">
+  <div>Картинка 8</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/9.png" width="130" height="130">
+  <div>Картинка 9</div>
+</li>
+
+</ul>
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/1-inline-block-vs-float/task.md b/3-more/11-css-for-js/4-float/1-inline-block-vs-float/task.md
new file mode 100644
index 00000000..cb9ba2a7
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/1-inline-block-vs-float/task.md
@@ -0,0 +1,16 @@
+# Разница inline-block и float
+
+[importance 5]
+
+Галерея изображений состоит из картинок в рамках с подписями (возможно, с другой дополнительной информацией).
+
+Пример галереи:
+[iframe src="solution" link edit].
+
+Технически вывод такой галереи можно реализовать при помощи списка UL/LI, где:
+<ol>
+<li>каждый LI имеет `display:inline-block`</li>
+<li>каждый LI имеет `float:left`</li>
+</ol>
+
+**Какие различия между этими подходами? Какой вариант выбрали бы вы?**
diff --git a/3-more/11-css-for-js/4-float/2-tree-with-multiline-nodes/solution.md b/3-more/11-css-for-js/4-float/2-tree-with-multiline-nodes/solution.md
new file mode 100644
index 00000000..1009c29f
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/2-tree-with-multiline-nodes/solution.md
@@ -0,0 +1,3 @@
+Для решения можно применить принцип двухколоночной верстки `float` + `margin`. Иконка будет левой колонкой, а содержимое -- правой.
+
+[edit src="solution"/]
\ No newline at end of file
diff --git a/3-more/11-css-for-js/4-float/2-tree-with-multiline-nodes/solution.view/index.html b/3-more/11-css-for-js/4-float/2-tree-with-multiline-nodes/solution.view/index.html
new file mode 100755
index 00000000..1fc4c668
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/2-tree-with-multiline-nodes/solution.view/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      float: left;
+    }
+
+    .open .icon {
+      cursor: pointer;
+      background: url(http://js.cx/sprite-tree/minus.gif);
+    }
+
+    .closed .icon {
+      cursor: pointer;
+      background: url(http://js.cx/sprite-tree/plus.gif);
+    }
+
+    .leaf .icon {
+      cursor: text;
+      background: url(http://js.cx/sprite-tree/article.gif);
+    }
+
+    li {
+      list-style: none;
+    }
+    .text {
+      margin: 6px 0 6px 16px;
+    }
+
+  </style>
+</head>
+<body>
+
+
+
+<ul>
+<li class="open">
+  <div class="icon"></div>
+  <div class="text">Раздел 1<br>(занимает две строки)</div>
+  <ul>
+  <li class="closed">
+    <div class="icon"></div>
+    <div class="text">Раздел 1.1</div>
+  </li>
+  <li class="leaf">
+    <div class="icon"></div>
+    <div class="text">Страница 1.2<br>(занимает две строки)</div>
+  </li>
+  </ul>
+</li>
+<li class="closed">
+  <div class="icon"></div>
+  <div class="text">Раздел 2<br>(занимает две строки)</div>
+</li>
+</ul>
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/4-float/2-tree-with-multiline-nodes/source.view/index.html b/3-more/11-css-for-js/4-float/2-tree-with-multiline-nodes/source.view/index.html
new file mode 100755
index 00000000..ab21f3b9
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/2-tree-with-multiline-nodes/source.view/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    /* ваш стиль */
+  </style>
+</head>
+<body>
+
+<!-- картинки для узлов -->
+<img src="http://js.cx/sprite-tree/minus.gif" width="16" height="16">
+<img src="http://js.cx/sprite-tree/plus.gif" width="16" height="16">
+<img src="http://js.cx/sprite-tree/article.gif" width="16" height="16">
+
+
+<ul>
+<li class="open">
+  <div class="icon"></div>
+  <div class="text">Раздел 1<br>(занимает две строки)</div>
+  <ul>
+  <li class="closed">
+    <div class="icon"></div>
+    <div class="text">Раздел 1.1</div>
+  </li>
+  <li class="leaf">
+    <div class="icon"></div>
+    <div class="text">Страница 1.2<br>(занимает две строки)</div>
+  </li>
+  </ul>
+</li>
+<li class="closed">
+  <div class="icon"></div>
+  <div class="text">Раздел 2<br>(занимает две строки)</div>
+</li>
+</ul>
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/4-float/2-tree-with-multiline-nodes/task.md b/3-more/11-css-for-js/4-float/2-tree-with-multiline-nodes/task.md
new file mode 100644
index 00000000..c670c76e
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/2-tree-with-multiline-nodes/task.md
@@ -0,0 +1,20 @@
+# Дерево с многострочными узлами
+
+[importance 3]
+
+Сделайте дерево при помощи семантической вёрстки и CSS-спрайта с иконками (есть готовый).
+
+Выглядеть должно так (не кликабельно):
+
+[iframe src="solution" border="1" height=200 link edit]
+
+<ul>
+<li>Поддержка многострочных названий узлов</li>
+<li>Над иконкой курсор становится указателем.</li>
+</ul>
+
+Исходный документ содержит список UL/LI и ссылку на картинку.
+
+[edit task src="source"/]
+
+P.S. Достаточно сделать HTML/CSS-структуру, действия добавим позже.
\ No newline at end of file
diff --git a/3-more/11-css-for-js/4-float/3-paginator-css/nav-div-wrong/arrow-left.jpg b/3-more/11-css-for-js/4-float/3-paginator-css/nav-div-wrong/arrow-left.jpg
new file mode 100755
index 00000000..5c9532a4
Binary files /dev/null and b/3-more/11-css-for-js/4-float/3-paginator-css/nav-div-wrong/arrow-left.jpg differ
diff --git a/3-more/11-css-for-js/4-float/3-paginator-css/nav-div-wrong/arrow-right.jpg b/3-more/11-css-for-js/4-float/3-paginator-css/nav-div-wrong/arrow-right.jpg
new file mode 100755
index 00000000..b2ac9c82
Binary files /dev/null and b/3-more/11-css-for-js/4-float/3-paginator-css/nav-div-wrong/arrow-right.jpg differ
diff --git a/3-more/11-css-for-js/4-float/3-paginator-css/nav-div-wrong/index.html b/3-more/11-css-for-js/4-float/3-paginator-css/nav-div-wrong/index.html
new file mode 100755
index 00000000..0c718638
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/3-paginator-css/nav-div-wrong/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .nav {
+      height: 40px;
+      width: 80%;
+      margin: auto;
+    }
+    .nav .left {
+      float: left;
+      border:1px solid black;
+    }
+    .nav .right {
+      float: right;
+      border:1px solid black;
+    }
+    .nav .pages {
+      text-align: center;
+      line-height: 40px;
+      border:1px solid black;
+    }
+  </style>
+</head>
+<body>
+
+Текст Сверху
+
+<div class="nav">
+<img src="http://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
+<div class="pages">1 2 3 4 5 6 7 8 9</div>
+<img src="http://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
+</div>
+
+Текст Снизу
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/3-paginator-css/solution.md b/3-more/11-css-for-js/4-float/3-paginator-css/solution.md
new file mode 100644
index 00000000..f19a84c0
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/3-paginator-css/solution.md
@@ -0,0 +1,99 @@
+HTML-структура:
+
+```html
+<div class="nav">
+  <img src="arrow-left.jpg" class="left" width="40" height="40">
+  <img src="arrow-right.jpg" class="right" width="40" height="40">
+  <ul class="pages"> <li>...</li> </ul>
+</div>
+```
+
+Стили:
+
+```css
+.nav {
+  height: 40px;
+  width: 80%;
+  margin: auto;
+}
+
+.nav .left {
+  float: left;
+  cursor: pointer;
+}
+
+.nav .right {
+  float: right;
+  cursor: pointer;
+}
+
+.nav .pages {
+  list-style: none;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+.nav .pages li {
+  display: inline;
+  margin: 0 3px;
+  line-height: 40px;
+  cursor: pointer;
+}
+```
+
+Основные моменты:
+<ul>
+<li>**Сначала идёт левая кнопка, затем правая, а лишь затем -- текст.** 
+Почему так, а не лево - центр - право?
+
+Дело в том, что `float` смещает элемент вправо относительно обычного места. А какое обычное место будет у правого `IMG` без `float`? 
+
+Оно будет под списком, так как список -- блочный элемент, а `IMG` -- инлайн-элемент. При добавлении `float:right` элемент `IMG` сдвинется вправо, оставшись под списком.
+
+Код в порядке лево-центр-право (неправильный):
+
+```html
+<div...>
+  <img src="arrow-left.jpg" class="left" width="40" height="40">
+  <ul class="pages"> (li) 1 2 3 4 5 6 7 8 9</ul>
+  <img src="arrow-right.jpg" class="right" width="40" height="40">
+</div>
+```
+
+Его демо:
+[iframe src="nav-div-wrong" border=1 height="140"]
+Правильный порядок: лево-право-центр, тогда `float` останется на верхней строке.
+
+Код, который даёт правильное отображение:
+
+```html
+<div ...>
+  <img src="arrow-left.jpg" class="left" width="40" height="40">
+  <img src="arrow-right.jpg" class="right" width="40" height="40">
+  <ul class="pages"> .. список .. </ul>
+</div>
+```
+
+Также можно расположить стрелки при помощи `position: absolute`. Тогда, чтобы текст при уменьшении размеров окна не налез на стрелки -- нужно добавить в контейнер левый и правый `padding`:
+
+Выглядеть будет примерно так:
+
+```html
+<div style="position:relative; padding: 0 40px;">
+  <img style="position:absolute;left:0" src="..left.." width="40" height="40">
+  <ul> (li) 1 2 3 4 5 6 7 8 9 </ul>
+  <img style="position:absolute;right:0" srr="..right.." width="40" height="40">
+</div>
+```
+
+</li>
+
+<li>**Центрирование одной строки по вертикали осуществляется указанием `line-height`, равной высоте.**
+
+Это красиво лишь для одной строки: если окно становится слишком узким, и строка вдруг разбивается на две -- получается некрасиво, хотя и читаемо. 
+
+Если хочется сделать красивее для двух строк, то можно использовать другой способ центрирования.</li>
+</ul>
+
+[edit src="solution"]Полное решение[/edit]
\ No newline at end of file
diff --git a/3-more/11-css-for-js/4-float/3-paginator-css/solution.view/index.html b/3-more/11-css-for-js/4-float/3-paginator-css/solution.view/index.html
new file mode 100755
index 00000000..b4569092
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/3-paginator-css/solution.view/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+.nav {
+  height: 40px;
+  width: 80%;
+  margin: auto;
+}
+
+.nav .left {
+  float: left;
+  cursor: pointer;
+}
+
+.nav .right {
+  float: right;
+  cursor: pointer;
+}
+
+.nav .pages {
+  list-style: none;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+.nav .pages li {
+  display: inline;
+  margin: 0 3px;
+  line-height: 40px;
+  cursor: pointer;
+}
+  </style>
+</head>
+<body>
+
+Текст Сверху
+
+<div class="nav">
+  <img src="http://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
+  <img src="http://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
+  <ul class="pages">
+    <li>1</li>
+    <li>2</li>
+    <li>3</li>
+    <li>4</li>
+    <li>5</li>
+    <li>6</li>
+    <li>7</li>
+    <li>8</li>
+    <li>9</li>
+  </ul>
+</div>
+
+Текст Снизу
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/3-paginator-css/source.view/index.html b/3-more/11-css-for-js/4-float/3-paginator-css/source.view/index.html
new file mode 100755
index 00000000..3bcc167d
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/3-paginator-css/source.view/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .nav {
+      height: 40px;
+      width: 80%;
+      margin: auto;
+    }
+    /* ваш код */
+  </style>
+</head>
+<body>
+
+Текст Сверху
+
+<div class="nav">
+  <img src="http://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
+
+  <ul class="pages">
+    <li>1</li>
+    <li>2</li>
+    <li>3</li>
+    <li>4</li>
+    <li>5</li>
+    <li>6</li>
+    <li>7</li>
+    <li>8</li>
+    <li>9</li>
+  </ul>
+
+  <img src="http://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
+</div>
+Текст Снизу
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/3-paginator-css/task.md b/3-more/11-css-for-js/4-float/3-paginator-css/task.md
new file mode 100644
index 00000000..0c7536d2
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/3-paginator-css/task.md
@@ -0,0 +1,19 @@
+# Постраничная навигация (CSS)
+
+[importance 5]
+
+Оформите навигацию, центрированную внутри `DIV'а`:
+
+[iframe src="solution" height="100" border="1"]
+
+Требования:
+<ul>
+<li>Левая стрелка -- слева, правая -- справа, список страниц -- по центру.</li>
+<li>Список страниц центрирован вертикально.</li>
+<li>Текст сверху и снизу ни на что не наползает.</li>
+<li>Курсор при наведении на стрелку или элемент списка становится стрелкой `pointer`.</li>
+</ul>
+
+[edit src="source" task/]
+
+P.S. Без использования таблиц.
\ No newline at end of file
diff --git a/3-more/11-css-for-js/4-float/4-add-border-keep-width/solution.md b/3-more/11-css-for-js/4-float/4-add-border-keep-width/solution.md
new file mode 100644
index 00000000..1eee87d5
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/4-add-border-keep-width/solution.md
@@ -0,0 +1,41 @@
+# Подсказка
+
+Используйте свойство `box-sizing`.
+
+# Решение
+
+Да, можно -- указываем `box-sizing: border-box` и добавляем свойства:
+
+```html
+<!--+ run -->
+<style>
+  .left {
+    float:left; 
+    width:30%; 
+    background: #aef;
+  }
+
+  .right {
+    float:right; 
+    width:70%;
+
+*!*
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+
+    border-left: 2px solid green;
+    padding-left: 10px;
+*/!*
+
+    background: tan;
+  }
+</style>
+
+<div class="left">
+ Левая<br>Колонка
+</div>
+<div class="right">
+ Правая<br>Колонка<br>...
+</div>
+```
+
diff --git a/3-more/11-css-for-js/4-float/4-add-border-keep-width/task.md b/3-more/11-css-for-js/4-float/4-add-border-keep-width/task.md
new file mode 100644
index 00000000..4d28d59b
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/4-add-border-keep-width/task.md
@@ -0,0 +1,37 @@
+# Добавить рамку, сохранив ширину
+
+[importance 4]
+
+Есть две колонки `30%/70%`:
+
+```html
+<!--+ autorun run play -->
+<style>
+  .left {
+    float:left; 
+    width:30%; 
+    background: #aef;
+  }
+
+  .right {
+    float:right; 
+    width:70%;
+    background: tan;
+  }
+</style>
+
+<div class="left">
+ Левая<br>Колонка
+</div>
+<div class="right">
+ Правая<br>Колонка<br>...
+</div>
+```
+
+**Добавьте к правой колонке рамку `border-left` и отступ `padding-left`.**
+
+Двухколоночная вёрстка при этом не должна сломаться! 
+
+Желательно не трогать свойство `width` ни слева ни справа и не создавать дополнительных элементов. 
+
+Требуется поддержка всех современных браузеров, IE начиная с версии 8.
\ No newline at end of file
diff --git a/3-more/11-css-for-js/4-float/article.md b/3-more/11-css-for-js/4-float/article.md
new file mode 100644
index 00000000..7e61ee77
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/article.md
@@ -0,0 +1,468 @@
+# Свойство "float"
+
+Свойство `float` в CSS занимает особенное место. До его появления расположить два блока один слева от другого можно было лишь при помощи таблиц. Но в его работе есть ряд особенностей. Поэтому его иногда не любят, но при их понимании `float` станет вашим верным другом и помощником.
+	
+Далее мы рассмотрим, как работает `float`, разберём решения сопутствующих проблем, а также ряд полезных рецептов.
+	
+[cut]
+
+## Как работает float [#float-algorithm]
+
+Синтаксис:
+
+```css
+float: left | right | none | inherit;
+```
+
+При применении этого свойства происходит следующее:
+
+<ol>
+<li>Элемент позиционируется как обычно, а затем *вынимается из <strike>документа</strike> потока* и сдвигается влево (для `left`) или вправо (для `right`) до того как коснётся либо границы родителя, либо другого элемента с `float`.</li>
+<li>Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться.</li>
+<li>Другие непозиционированные блочные элементы без `float` ведут себя так, как будто элемента с `float` нет, так как он убран из потока.</li>
+<li>Строки (inline-элементы), напротив, "знают" о `float` и обтекают элемент по сторонам.</li>
+</ol>
+
+Ещё детали:
+<ol>
+<li>**Элемент при наличии `float` получает `display:block`.** То есть, указав элементу, у которого `display:inline` свойство `float: left/right`, мы автоматически сделаем его блочным. В частности, для него будут работать  `width/height`. 
+
+Исключением являются некоторые редкие `display` наподобие `inline-table` и `run-in` (см. [Relationships between 'display', 'position', and 'float'](http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo))</li>
+<li>**Ширина `float`-блока определяется по содержимому.** (["CSS 2.1, 10.3.5"](http://www.w3.org/TR/CSS2/visudet.html#float-width)).</li>
+<li>**Вертикальные отступы `margin` элементов с `float` не сливаются с отступами соседей,** в отличие от обычных блочных элементов.</li>
+</ol>
+
+Это пока только теория. Далее мы рассмотрим происходящее на примере.
+
+### Текст с картинками
+
+Одно из первых применений `float`, для которого это свойство когда-то было придумано -- это вёрстка текста с картинками, отжатыми влево или вправо.
+
+Например, вот страница о Винни-Пухе с картинками, которым поставлено свойство `float`:
+
+<img src="text.png">
+
+Её HTML-код ([edit src="winnie"]открыть[/edit]) выглядит примерно так:
+
+```html
+<img src="1.jpg" style="float:right">
+<p>Текст...</p>
+<p>Текст...</p>
+
+<img src="2.jpg" style="float:left">
+<p>Текст...</p>
+
+<img src="3.jpg" style="float:right">
+<p>Текст...</p>
+```
+
+Каждая картинка, у которой есть `float`, обрабатывается в точности [по алгоритму](#float-algorithm), указанному выше.
+
+Посмотрим, например, как выглядело бы начало текста без float:
+
+[iframe src="winnie-nofloat" height=300 border=1 link edit]
+
+
+<ol>
+<li>Элемент `IMG` вынимается из <strike>документа</strike> потока. Иначе говоря, последующие блоки начинают вести себя так, как будто его нет, и заполняют освободившееся место (изображение для наглядности полупрозрачно):
+
+[iframe src="winnie-nofloat-1" height=250 border=1 link edit]
+
+</li>
+<li>Элемент `IMG` сдвигается максимально вправо(при `float:right`):
+
+[iframe src="winnie-nofloat-2" height=250 border=1 link edit]
+
+</li>
+<li>Строки, в отличие от блочных элементов, "чувствуют" `float` и уступают ему место, обтекая картинку слева:
+
+[iframe src="winnie-nofloat-3" height=250 border=1 link edit]
+</li>
+</ol>
+
+При `float:left` -- всё то же самое, только `IMG` смещается влево (или не смещается, если он и так у левого края), а строки -- обтекают справа
+
+
+**Строки и инлайн-элементы смещаются, чтобы уступить место `float`. Обычные блоки -- ведут себя так, как будто элемента нет.**
+
+Чтобы это увидеть, добавим параграфам фон и рамку, а также сделаем изображение немного прозрачным:
+
+[iframe src="winnie-block-bg" height=300 border=1 link edit]
+
+Как видно из рисунка, параграфы проходят "за" `float`. При этом строки в них о `float'ах` знают и обтекают их, поэтому соответствующая часть параграфа пуста. 
+
+
+### Блок с float
+
+Свойство `float` можно поставить любому элементу, не обязательно картинке. При этом элемент станет блочным. 
+
+Посмотрим, как это работает, на конкретной задаче -- сделать рамку с названием вокруг картинки с Винни.
+
+HTML будет такой:
+
+```html
+<h2>Винни-Пух</h2>
+
+*!*
+<div class="left-picture">
+  <img src="winnie-mult.jpg" width="200" height="150">
+  <div>Кадр из советского мультфильма</div>
+</div>
+*/!*
+
+<p>Текст...</p>
+```
+
+..То есть, `div.left-picture` включает в себя картинку и заголовок к ней. Добавим стиль с `float`:
+
+```css
+.left-picture {
+*!*
+  float: left;
+*/!*
+
+  /* рамочка и отступ для красоты (не обязательно) */
+  margin: 0 10px 5px 0;
+  text-align: center;
+  border: 1px solid black;
+}
+```
+
+Результат:
+
+[iframe src="winnie-block" height=300 border=1 link edit]
+
+Заметим, что блок `div.left-picture` "обернул" картинку и текст под ней, а не растянулся на всю ширину. Это следствие того, что ширина блока с `float` определяется по содержимому.
+
+## Очистка под float
+
+Разберём еще одну особенность использования свойства `float`. 
+
+Для этого выведем персонажей из мультфильма "Винни-Пух". Цель:
+
+[iframe src="winnie-clear-3" height=600 border=1 link edit]
+
+Реализуем её, шаг за шагом.
+
+### Шаг 1. Добавляем информацию
+
+Попробуем просто добавить Сову после Винни-Пуха:
+
+```html
+<h2>Винни-Пух</h2>
+<div class="left">Картинка</div>
+<p>..Текст о Винни..</p>
+
+<h2>Сова</h2>
+<div class="left">Картинка</div>
+<p>..Текст о Сове..</p>
+```
+
+Результат [edit src="winnie-clear-1"]такого кода[/edit] будет странным, но предсказуемым:
+
+[iframe src="winnie-clear-1" border="1" height=500 link edit]
+
+Произошло следующее:
+<ul>
+<li>**Заголовок `<h2>Сова</h2>` не заметил `float`** (он же блочный элемент) и расположился сразу после предыдущего параграфа `<p>..Текст о Винни..</p>`.</li>
+<li>После него идёт `float`-элемент -- картинка "Сова". Он был сдвинут влево. Согласно [алгоритму](#float-algorithm), он двигается до левой границы или до касания с другим `float`-элементом, что и произошло (картинка "Винни-Пух").</li>
+<li>Так как у совы `float:left`, то **последующий текст обтекает её справа**.</li>
+</ul>
+
+### Шаг 2. Свойство clear
+
+Мы, конечно же, хотели бы расположить заголовок "Сова" и остальную информацию ниже Винни-Пуха.
+
+Для решения возникшей проблемы придумано свойство `clear`. 
+
+Синтаксис:
+
+```css
+clear: left | right | both;
+```
+
+Применение этого свойства сдвигает элемент вниз до тех пор, пока не закончатся  `float'ы` слева/справа/с обеих сторон.
+
+Применим его к заголовку `H2`:
+
+```css
+h2 {
+  clear: left;
+}
+```
+
+Результат [edit src="winnie-clear-2"]получившегося кода[/edit] будет ближе к цели, но всё еще не идеален:
+
+<img src="float-small-margin.png">
+
+Элементы теперь в нужном порядке. Но куда пропал отступ `margin-top` у заголовка "Сова"? 
+
+Теперь заголовок "Сова" прилегает снизу почти вплотную к картинке, с учётом её `margin-bottom`, но без своего большого отступа `margin-top`.
+
+Таково поведение свойства `clear`. Оно сдвинуло элемент `h2` вниз ровно настолько, чтобы элементов `float` не было *сбоку от его верхней границы*. 
+
+Если посмотреть на элемент заголовка внимательно в инструментах разработчика, то можно заметить отступ `margin-top` у заголовка по-прежнему есть, но он располагается "за" элементом `float` и не учитывается при работе в `clear`. 
+
+Чтобы исправить ситуацию, можно добавить перед заголовком пустой промежуточный элемент без отступов, с единственным свойством `clear:both`. Тогда уже под ним отступ заголовка будет работать нормально:
+
+```html
+<h2>Винни-Пух</h2>
+<div class="left">Картинка</div>
+<p>Текст</p>
+
+*!*
+<div style="clear:both"></div>
+*/!*
+
+<h2>Сова</h2>
+<div class="left">Картинка</div>
+<p>Текст</p>
+```
+
+Результат [edit src="winnie-clear-3"]получившегося кода[/edit]:
+
+[iframe src="winnie-clear-3" border="1" height=600 link edit]
+
+<ul>
+<li>Свойство `clear` гарантировало, что `<div style="clear:both">` будет под картинкой с `float`.</li>
+<li>Заголовок `<h2>Сова</h2>` идёт после этого `<div>`. Так что его отступ учитывается.</li>
+</ul>
+
+## Заполнение блока-родителя
+
+Итак, мы научились располагать другие элементы *под* `float`. Теперь рассмотрим следующую особенность.
+
+**Из-за того, что блок с `float` удалён из потока, родитель не выделяет под него места.**
+
+Например, выделим для информации о Винни-Пухе красивый элемент-контейнер `<div class="hero">`:
+
+```html
+<div class="hero">
+
+  <h2>Винни-Пух</h2>
+
+  <div class="left">Картинка</div>
+
+  <p>Текст.</p>
+</div>
+```
+
+Стиль контейнера:
+
+```css
+.hero {
+  background: #D2B48C;
+  border: 1px solid red;
+}
+```
+
+Результат [edit src="winnie-clear-4"]получившегося кода[/edit]:
+
+[iframe src="winnie-clear-4" border="1" height=300 link edit]
+
+Элемент с `float` оказался выпавшим за границу родителя `.hero`. 
+
+Чтобы этого не происходило, используют одну из следующих техник.
+
+### Поставить родителю float
+
+Элемент с `float` обязан расшириться, чтобы вместить вложенные `float`.
+
+Поэтому, если это допустимо, то установка `float` контейнеру всё исправит:
+
+```css
+.hero {
+  background: #D2B48C;
+  border: 1px solid red;
+  *!*
+  float: left;
+  */!*
+}
+```
+
+[iframe src="winnie-clearfill-float" border="1" height=300 link edit]
+
+Разумеется, не всегда можно поставить родителю `float`, так что смотрим дальше.
+
+### Добавить в родителя элемент с clear
+
+Добавим элемент `div style="clear:both"` в самый конец контейнера `.hero`.
+
+Он с одной стороны будет "нормальным" элементом, в потоке, и контейнер будет обязан выделить под него пространство, с другой -- он знает о `float` и сместится вниз.
+
+Соответственно, и контейнер вырастет в размере:
+
+```html
+<div class="hero">
+
+  <h2>Винни-Пух</h2>
+
+  <div class="left">Картинка</div>
+
+  <p>Текст.</p>
+
+*!*
+  <div style="clear:both"></div>
+*/!*
+</div>
+```
+
+Результат -- правильное отображение, как и в примере выше. [edit src="winnie-clearfill-div"]Открыть код[/edit].
+
+Единственный недостаток этого метода -- лишний HTML-элемент в разметке.
+
+### Универсальный класс clearfix
+
+Чтобы не добавлять в HTML-код лишний элемент, можно задать его через `:after`.
+
+```css
+.clearfix:after {
+  content: "."; /* добавить содержимое: "." */
+  display: block;  /* сделать блоком, т.к. inline не может иметь clear */
+  clear: both;  /* с обеих сторон clear */
+  visibility: hidden; /* сделать невидимым, зачем нам точка внизу? */
+  height: 0;  /* сделать высоту 0, чтобы не занимал место */
+}
+```
+
+Добавив этот класс к родителю, получим тот же результат, что и выше. [edit src="winnie-clearfill-clearfix"]Открыть код[/edit].
+
+Псевдоселектор `:after` не поддерживается в IE<8, но для старых IE сработает другое свойство:
+
+```css
+.clearfix {
+  zoom: 1;  /* спец-свойство IE */
+}
+```
+
+### overflow:auto/hidden
+
+Если добавить родителю `overflow: hidden` или `overflow: auto`, то всё станет хорошо.
+
+```css
+.hero {
+*!*
+  overflow: auto;
+*/!*
+}
+```
+
+Этот метод работает во всех браузерах. [edit src="winnie-clearfill-overflow"]Открыть код[/edit].
+
+Несмотря на внешнюю странность, этот способ не является "хаком". Такое поведение прописано в спецификации CSS.
+
+Однако, установка `overflow` может привести к появлению полосы прокрутки, способ с дополнительным элементом (или `.clearfix:after`, если без IE<8) более безопасен.
+
+
+## Еще применения float
+
+Одно применение -- для верстки текста, мы уже видели. Рассмотрим ещё несколько.
+
+### Галерея
+
+При помощи `float` можно сделать галерею изображений:
+
+```html
+<ul class="gallery">
+
+  <li>
+    <img src="1.png" width="130" height="130">
+    <div>Картинка 1</div>
+  </li>
+
+  <li>
+    <img src="2.png" width="130" height="130">
+    <div>Картинка 2</div>
+  </li>
+  ...
+</ul>
+```
+
+Стиль:
+
+```css
+.gallery li {
+  float: left;
+  width: 130px;
+  list-style: none;
+}
+```
+
+Элементы `float:left` двигаются влево, а если это невозможно, то вниз, автоматически адаптируясь под ширину контейнера.
+
+Результат:
+
+[iframe src="gallery-float" border="1" height=550 link edit]
+
+
+
+### Вёрстка в несколько колонок
+
+Свойство `float` позволяет делать несколько вертикальных колонок.
+
+### float:left + float:right
+
+Например, для вёрстки в две колонки можно сделать два `<div>`. Первому указать `float:left` (левая колонка), а второму -- `float:right` (правая колонка). 
+
+Чтобы они не ссорились, каждой колонке нужно дополнительно указать ширину:
+
+```html
+<div>Шапка</div>
+<div class="column-left">Левая колонка</div>
+<div class="column-right">Правая колонка</div>
+<div class="footer">Низ</div>
+```
+
+Стили:
+
+```css
+.column-left {
+  float: left;
+  width: 30%;
+}
+
+.column-right {
+  float: left;
+  width: 70%;
+}
+
+.footer {
+  clear: both;
+}
+```
+
+Результат (добавлены краски):
+[iframe src="two-columns" border="1" height=440 link edit]
+
+В эту структуру легко добавить больше колонок с разной шириной. Правой колонке можно было бы указать и `float:right`. 
+
+### float + margin
+
+Ещё вариант -- сделать `float` для левой колонки, а правую оставить в потоке, но с отбивкой через `margin`:
+
+```css
+.column-left {
+  float: left;
+  width: 30%;
+}
+
+.column-right {
+  margin-left: 30%;
+}
+
+.footer {
+  clear: both;
+}
+```
+
+Результат (добавлены краски):
+[iframe src="two-columns-2" border="1" height=440 link edit]
+
+В примере выше -- показана небольшая проблема. Колонки не растягиваются до одинаковой высоты. Конечно, это не имеет значения, если фон одинаковый, но что, если он разный?
+
+Технически, нет кросс-браузерного CSS-способа сделать, чтобы они растягивались. Есть различные обходы и трюки, которые позволяют обойти проблему в ряде ситуаций, но они выходят за рамки нашего обсуждения. Если интересно -- посмотрите, например, [Faux Columns](http://goodline.spb.ru/III-05-002.html). 
+
+Техник построения структуры страницы и колонок ("CSS layout") очень много. Более подробно вы можете с ними познакомиться в книгах и продвинутых статьях, либо просто придумать самому на основе того, как работает `float`.
+
+
+
diff --git a/3-more/11-css-for-js/4-float/float-small-margin.png b/3-more/11-css-for-js/4-float/float-small-margin.png
new file mode 100755
index 00000000..bf2c7b92
Binary files /dev/null and b/3-more/11-css-for-js/4-float/float-small-margin.png differ
diff --git a/3-more/11-css-for-js/4-float/gallery-float.view/index.html b/3-more/11-css-for-js/4-float/gallery-float.view/index.html
new file mode 100755
index 00000000..aadb464c
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/gallery-float.view/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+    .gallery li {
+      float: left;
+      width: 130px;
+
+      list-style: none;
+
+      /* красивости */
+      border: 1px solid black;
+      text-align: center;
+      margin: 5px;
+    }
+
+  </style>
+</head>
+<body>
+
+<ul class="gallery">
+<li>
+  <img src="http://js.cx/carousel/1.png" width="130" height="130">
+  <div>Картинка 1</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/2.png" width="130" height="130">
+  <div>Картинка 2</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/3.png" width="130" height="130">
+  <div>Картинка 3</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/4.png" width="130" height="130">
+  <div>Картинка 4</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/5.png" width="130" height="130">
+  <div>Картинка 5</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/6.png" width="130" height="130">
+  <div>Картинка 6</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/7.png" width="130" height="130">
+  <div>Картинка 7</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/8.png" width="130" height="130">
+  <div>Картинка 8</div>
+</li>
+
+<li>
+  <img src="http://js.cx/carousel/9.png" width="130" height="130">
+  <div>Картинка 9</div>
+</li>
+
+</ul>
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/text.png b/3-more/11-css-for-js/4-float/text.png
new file mode 100755
index 00000000..30e0f650
Binary files /dev/null and b/3-more/11-css-for-js/4-float/text.png differ
diff --git a/3-more/11-css-for-js/4-float/two-columns-2.view/index.html b/3-more/11-css-for-js/4-float/two-columns-2.view/index.html
new file mode 100755
index 00000000..765499a1
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/two-columns-2.view/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    body, html {
+      margin: 0;
+      padding: 0;
+    }
+
+    .column-left {
+      float: left;
+      width: 30%;
+    }
+
+    .column-right {
+      margin-left: 30%;
+      width: 70%;
+      overflow: auto; /* расшириться вниз захватить float'ы */
+    }
+
+    .footer {
+      clear: both;
+    }
+
+    .inner {
+      margin: 1em;
+    }
+  </style>
+</head>
+<body>
+
+<div style="background:yellow">Шапка</div>
+
+<div class="column-left" style="background:#aef">
+<div class="inner"> <!-- див для отступа внутри ширины родителя -->
+  <h3>Персонажи:</h3>
+  <ul>
+    <li>Винни-Пух</li>
+    <li>Ослик Иа</li>
+    <li>Сова</li>
+    <li>Кролик</li>
+  </ul>
+</div>
+</div>
+<div class="column-right" style="background:tan">
+<div class="inner">
+
+<h3>Винни-Пух</h3>
+
+<img src="http://js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">
+
+<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
+
+<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
+
+
+</div>
+</div>
+
+<div class="footer" style="background:yellow">Низ</div>
+
+
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/two-columns.view/index.html b/3-more/11-css-for-js/4-float/two-columns.view/index.html
new file mode 100755
index 00000000..52f935b4
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/two-columns.view/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    body, html {
+      margin: 0;
+      padding: 0;
+    }
+
+    .column-left {
+      float: left;
+      width: 30%;
+    }
+
+    .column-right {
+      float: left;
+      width: 70%;
+      overflow: auto; /* расшириться вниз захватить float'ы */
+    }
+
+    .footer {
+      clear: both;
+    }
+
+    .inner {
+      margin: 1em;
+    }
+  </style>
+</head>
+<body>
+
+<div style="background:yellow">Шапка</div>
+
+<div class="column-left" style="background:#aef">
+  <div class="inner"> <!-- див для отступа внутри ширины родителя -->
+  <h3>Персонажи:</h3>
+  <ul>
+    <li>Винни-Пух</li>
+    <li>Ослик Иа</li>
+    <li>Сова</li>
+    <li>Кролик</li>
+  </ul>
+  </div>
+</div>
+
+<div class="column-right" style="background:tan">
+  <div class="inner">
+  <h3>Винни-Пух</h3>
+
+  <img src="http://js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">
+
+  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
+
+  <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
+
+  </div>
+</div>
+
+<div class="footer" style="background:yellow">Низ</div>
+
+
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/winnie-block-bg.view/index.html b/3-more/11-css-for-js/4-float/winnie-block-bg.view/index.html
new file mode 100755
index 00000000..ad28d95c
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/winnie-block-bg.view/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+.left-picture {
+  float: left;
+
+  /* рамочка и центрирование */
+  margin: 0 10px 5px 0;
+  text-align: center;
+  border: 1px solid black;
+}
+
+p {
+  background: #aef;
+  border: 1px solid red;
+}
+
+  </style>
+</head>
+<body style="font-size:0.8em">
+
+<h2>Винни-Пух</h2>
+
+<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150" style="float:right;opacity:0.8">
+
+
+<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
+
+<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/winnie-block.view/index.html b/3-more/11-css-for-js/4-float/winnie-block.view/index.html
new file mode 100755
index 00000000..f3d2fc59
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/winnie-block.view/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+.left-picture {
+  float: left;
+
+  /* рамочка и центрирование */
+  margin: 5px 10px 5px 0;
+  text-align: center;
+  border: 1px solid black;
+}
+
+
+  </style>
+</head>
+<body style="font-size:0.8em">
+
+<h2>Винни-Пух</h2>
+
+<div class="left-picture">
+<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
+<div>Кадр из советского мультфильма</div>
+</div>
+
+<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
+
+<p>Один из самых известных героев детской литературы XX века. </p>
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/winnie-clear-1.view/index.html b/3-more/11-css-for-js/4-float/winnie-clear-1.view/index.html
new file mode 100755
index 00000000..6db2d8d9
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/winnie-clear-1.view/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+    .left {
+      float: left;
+      width: 200px;
+
+      /* для красоты */
+      margin: 5px 10px 5px 0;
+      text-align: center;
+      border: 1px solid black;
+    }
+
+    h2 {
+      background: #aef;
+    }
+
+  </style>
+</head>
+<body style="font-size:0.8em">
+
+
+<h2>Винни-Пух</h2>
+
+<div class="left">
+  <img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
+  <div>Кадр из советского мультфильма</div>
+</div>
+
+<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
+
+<p>Один из самых известных героев детской литературы XX века.</p>
+
+<h2>Сова</h2>
+
+<div class="left">
+  <img src="http://js.cx/clipart/owl-mult.jpg" width="200" height="233">
+  <div>Кадр из советского мультфильма</div>
+</div>
+
+<p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
+
+<p>Говорит редко, но чрезвычайно мудро.</p>
+
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/4-float/winnie-clear-2.view/index.html b/3-more/11-css-for-js/4-float/winnie-clear-2.view/index.html
new file mode 100755
index 00000000..b756e5fe
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/winnie-clear-2.view/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+    .left {
+      float: left;
+      width: 200px;
+
+      /* для красоты */
+      margin: 5px 10px 5px 0;
+      text-align: center;
+      border: 1px solid black;
+    }
+
+    h2 {
+      background: #aef;
+      clear: left;
+    }
+
+  </style>
+</head>
+<body style="font-size:0.8em">
+
+
+<h2>Винни-Пух</h2>
+
+<div class="left">
+  <img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
+  <div>Кадр из советского мультфильма</div>
+</div>
+
+<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
+
+<p>Один из самых известных героев детской литературы XX века.</p>
+
+<h2>Сова</h2>
+
+<div class="left">
+  <img src="http://js.cx/clipart/owl-mult.jpg" width="200" height="233">
+  <div>Кадр из советского мультфильма</div>
+</div>
+
+<p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
+
+<p>Говорит редко, но чрезвычайно мудро.</p>
+
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/4-float/winnie-clear-3.view/index.html b/3-more/11-css-for-js/4-float/winnie-clear-3.view/index.html
new file mode 100755
index 00000000..e2623e8e
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/winnie-clear-3.view/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+    .left {
+      float: left;
+      width: 200px;
+
+      /* для красоты */
+      margin: 5px 10px 5px 0;
+      text-align: center;
+      border: 1px solid black;
+    }
+
+    h2 {
+      background: #aef;
+    }
+
+  </style>
+</head>
+<body style="font-size:0.8em">
+
+
+<h2>Винни-Пух</h2>
+
+<div class="left">
+  <img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
+  <div>Кадр из советского мультфильма</div>
+</div>
+
+<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
+
+<p>Один из самых известных героев детской литературы XX века.</p>
+
+<div style="clear:both"></div>
+<h2>Сова</h2>
+
+<div class="left">
+  <img src="http://js.cx/clipart/owl-mult.jpg" width="200" height="233">
+  <div>Кадр из советского мультфильма</div>
+</div>
+
+<p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
+
+<p>Говорит редко, но чрезвычайно мудро.</p>
+
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/4-float/winnie-clear-4.view/index.html b/3-more/11-css-for-js/4-float/winnie-clear-4.view/index.html
new file mode 100755
index 00000000..60c6d5bf
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/winnie-clear-4.view/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+  .left {
+    float: left;
+    width: 200px;
+
+    /* для красоты */
+    margin: 5px 10px 5px 0;
+    text-align: center;
+    border: 1px solid black;
+  }
+
+  .hero {
+    background: #D2B48C;
+    border: 1px solid red;
+  }
+  </style>
+</head>
+<body style="font-size:0.8em">
+
+<div class="hero">
+
+  <h2>Винни-Пух</h2>
+
+  <div class="left">
+  <img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
+  <div>Кадр из советского мультфильма</div>
+  </div>
+
+  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
+
+  <p>Один из самых известных героев детской литературы XX века.</p>
+</div>
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/winnie-clearfill-clearfix.view/index.html b/3-more/11-css-for-js/4-float/winnie-clearfill-clearfix.view/index.html
new file mode 100755
index 00000000..a2705e04
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/winnie-clearfill-clearfix.view/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+  .left {
+    float: left;
+    width: 200px;
+
+    /* для красоты */
+    margin: 5px 10px 5px 0;
+    text-align: center;
+    border: 1px solid black;
+    background: white;
+  }
+
+  .hero {
+    background: #D2B48C;
+    border: 1px solid red;
+  }
+
+  .clearfix:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+  }
+
+  .clearfix {
+    zoom: 1;
+  }
+
+  </style>
+</head>
+<body style="font-size:0.8em">
+
+<div class="hero clearfix">
+
+  <h2>Винни-Пух</h2>
+
+  <div class="left">
+  <img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
+  <div>Кадр из советского мультфильма</div>
+  </div>
+
+  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
+
+  <p>Один из самых известных героев детской литературы XX века.</p>
+</div>
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/winnie-clearfill-div.view/index.html b/3-more/11-css-for-js/4-float/winnie-clearfill-div.view/index.html
new file mode 100755
index 00000000..bde4e0e6
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/winnie-clearfill-div.view/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+  .left {
+    float: left;
+    width: 200px;
+
+    /* для красоты */
+    margin: 5px 10px 5px 0;
+    text-align: center;
+    border: 1px solid black;
+    background: white;
+  }
+
+  .hero {
+    background: #D2B48C;
+    border: 1px solid red;
+    float: left;
+  }
+  </style>
+</head>
+<body style="font-size:0.8em">
+
+<div class="hero">
+
+  <h2>Винни-Пух</h2>
+
+  <div class="left">
+  <img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
+  <div>Кадр из советского мультфильма</div>
+  </div>
+
+  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
+
+  <p>Один из самых известных героев детской литературы XX века.</p>
+</div>
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/winnie-clearfill-float.view/index.html b/3-more/11-css-for-js/4-float/winnie-clearfill-float.view/index.html
new file mode 100755
index 00000000..bde4e0e6
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/winnie-clearfill-float.view/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+  .left {
+    float: left;
+    width: 200px;
+
+    /* для красоты */
+    margin: 5px 10px 5px 0;
+    text-align: center;
+    border: 1px solid black;
+    background: white;
+  }
+
+  .hero {
+    background: #D2B48C;
+    border: 1px solid red;
+    float: left;
+  }
+  </style>
+</head>
+<body style="font-size:0.8em">
+
+<div class="hero">
+
+  <h2>Винни-Пух</h2>
+
+  <div class="left">
+  <img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
+  <div>Кадр из советского мультфильма</div>
+  </div>
+
+  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
+
+  <p>Один из самых известных героев детской литературы XX века.</p>
+</div>
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/winnie-clearfill-overflow.view/index.html b/3-more/11-css-for-js/4-float/winnie-clearfill-overflow.view/index.html
new file mode 100755
index 00000000..2f1b5fdb
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/winnie-clearfill-overflow.view/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+
+  .left {
+    float: left;
+    width: 200px;
+
+    /* для красоты */
+    margin: 5px 10px 5px 0;
+    text-align: center;
+    border: 1px solid black;
+    background: white;
+  }
+
+  .hero {
+    background: #D2B48C;
+    border: 1px solid red;
+    overflow: auto;
+  }
+
+
+  </style>
+</head>
+<body style="font-size:0.8em">
+
+<div class="hero clearfix">
+
+  <h2>Винни-Пух</h2>
+
+  <div class="left">
+  <img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
+  <div>Кадр из советского мультфильма</div>
+  </div>
+
+  <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
+
+  <p>Один из самых известных героев детской литературы XX века.</p>
+</div>
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/winnie-nofloat-1.view/index.html b/3-more/11-css-for-js/4-float/winnie-nofloat-1.view/index.html
new file mode 100755
index 00000000..a1fbf5bb
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/winnie-nofloat-1.view/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    p { font-size: 80%; }
+
+    img {
+      border: 1px solid black;
+      opacity: 0.7;
+    }
+
+  </style>
+</head>
+<body>
+
+<img src="http://js.cx/clipart/winnie-mult.jpg" style="position:absolute" width="200" height="150">
+
+<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
+
+<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
+
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/winnie-nofloat-2.view/index.html b/3-more/11-css-for-js/4-float/winnie-nofloat-2.view/index.html
new file mode 100755
index 00000000..9623c884
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/winnie-nofloat-2.view/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    p { font-size: 80%; }
+
+    img {
+      border: 1px solid black;
+      opacity: 0.7;
+    }
+
+  </style>
+</head>
+<body>
+
+<img src="http://js.cx/clipart/winnie-mult.jpg" style="position:absolute;right:0" width="200" height="150">
+
+<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
+
+<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
+
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/winnie-nofloat-3.view/index.html b/3-more/11-css-for-js/4-float/winnie-nofloat-3.view/index.html
new file mode 100755
index 00000000..fcb3f50e
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/winnie-nofloat-3.view/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    p { font-size: 80%; }
+
+    img {
+      border: 1px solid black;
+    }
+
+  </style>
+</head>
+<body>
+
+<img src="http://js.cx/clipart/winnie-mult.jpg" style="float:right" width="200" height="150">
+
+<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
+
+<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
+
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/winnie-nofloat.view/index.html b/3-more/11-css-for-js/4-float/winnie-nofloat.view/index.html
new file mode 100755
index 00000000..4e3861cb
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/winnie-nofloat.view/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    p { font-size: 80%; }
+
+    img {
+      border: 1px solid black;
+    }
+
+  </style>
+</head>
+<body>
+
+<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
+
+<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
+
+<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
+
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/4-float/winnie.view/index.html b/3-more/11-css-for-js/4-float/winnie.view/index.html
new file mode 100755
index 00000000..67123ea4
--- /dev/null
+++ b/3-more/11-css-for-js/4-float/winnie.view/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    img.right {
+      float: right;
+      margin: 5px 0 5px 10px;
+    }
+
+    img.left {
+      float: left;
+      margin: 5px 10px 5px 0;
+    }
+
+    img {
+      border: 1px solid black;
+    }
+
+  </style>
+</head>
+<body>
+
+<h2>Винни-Пух</h2>
+
+<img src="http://js.cx/clipart/winnie-mult.jpg" class="right" width="200" height="150">
+
+<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
+
+<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
+
+<img src="http://js.cx/clipart/winnie-nazarov.jpg" class="left" width="200" height="201">
+
+<p>Первый перевод «Винни-Пуха» в СССР вышел в 1958 году в Литве (лит. Mikė Pūkuotukas), его выполнил 20-летний литовский писатель Виргилюс Чепайтис, пользовавшийся польским переводом Ирены Тувим. Впоследствии Чепайтис, познакомившись с английским оригиналом, существенно переработал свой перевод, переиздававшийся в Литве неоднократно.</p>
+
+<p>История Винни-Пуха в России начинается с того же 1958 года, когда с книгой познакомился Борис Владимирович Заходер.</p>
+
+
+<img src="http://js.cx/clipart/winnie-stamp.jpg" class="right" width="200" height="142">
+
+<p>В студии «Союзмультфильм» под руководством Фёдора Хитрука было создано три мультфильма.</p>
+
+<p>Сценарий написал Хитрук в соавторстве с Заходером; работа соавторов не всегда шла гладко, что стало в конечном счёте причиной прекращения выпуска мультфильмов (первоначально планировалось выпустить сериал по всей книге). Текст и картинки взяты с Wikipedia.</p>
+
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/5-position/1-modal-window/solution.md b/3-more/11-css-for-js/5-position/1-modal-window/solution.md
new file mode 100644
index 00000000..2f7da85d
--- /dev/null
+++ b/3-more/11-css-for-js/5-position/1-modal-window/solution.md
@@ -0,0 +1,20 @@
+Если использовать `position: absolute`, то `DIV` не растянется на всю высоту документа, т.к. координаты вычисляются *относительно окна*. 
+
+Можно, конечно, узнать эту высоту при помощи JavaScript, но CSS даёт более удобный способ. Будем использовать `position:fixed`:
+
+Стиль:
+
+```css
+#box {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+}
+```
+
+Свойство `z-index` должно превосходить все другие элементы управления, чтобы они перекрывались.
+
+[edit src="solution"]Полный текст решения[/edit]
\ No newline at end of file
diff --git a/3-more/11-css-for-js/5-position/1-modal-window/solution.view/index.html b/3-more/11-css-for-js/5-position/1-modal-window/solution.view/index.html
new file mode 100755
index 00000000..b01580fe
--- /dev/null
+++ b/3-more/11-css-for-js/5-position/1-modal-window/solution.view/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    /* модальный DIV, который всё перекрывает */
+    #box {
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 999; /* нужно если в документе есть элементы с z-index > 0 */
+
+      background: #aef;
+      opacity: 0.7;
+    }
+
+    p, button { margin: 35px; }
+  </style>
+</head>
+<body>
+
+
+<div id="box"></div>
+
+
+<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
+<p>Текст Текст Текст</p>
+<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
+<p>Текст Текст Текст</p>
+<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
+<p>Текст Текст Текст</p>
+<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
+<p>Текст Текст Текст</p>
+<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
+<p>Текст Текст Текст</p>
+<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
+<p>Текст Текст Текст</p>
+<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
+
+
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/5-position/1-modal-window/source.view/index.html b/3-more/11-css-for-js/5-position/1-modal-window/source.view/index.html
new file mode 100755
index 00000000..043e8083
--- /dev/null
+++ b/3-more/11-css-for-js/5-position/1-modal-window/source.view/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    /* модальный DIV, который всё перекрывает */
+    #box {
+      /* ...ваш стиль... */
+      background: #aef;
+      opacity: 0.7;
+    }
+
+    p, button { margin: 35px; }
+  </style>
+</head>
+<body>
+
+
+<div id="box"></div>
+
+
+<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
+<p>Текст Текст Текст</p>
+<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
+<p>Текст Текст Текст</p>
+<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
+<p>Текст Текст Текст</p>
+<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
+<p>Текст Текст Текст</p>
+<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
+<p>Текст Текст Текст</p>
+<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
+<p>Текст Текст Текст</p>
+<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
+
+
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/5-position/1-modal-window/task.md b/3-more/11-css-for-js/5-position/1-modal-window/task.md
new file mode 100644
index 00000000..73816ebb
--- /dev/null
+++ b/3-more/11-css-for-js/5-position/1-modal-window/task.md
@@ -0,0 +1,17 @@
+# Модальное окно
+
+[importance 5]
+
+Создайте при помощи HTML/CSS "модальное окно", то есть `DIV`, который полностью перекрывает документ и находится над ним.
+
+При этом все элементы управления на документе перестают работать, т.к. клики попадают в `DIV`.
+
+В примере ниже `DIV'у` дополнительно поставлен цвет фона и прозрачность, чтобы было видно перекрытие:
+
+[iframe height=150 src="solution" border=1 link]
+
+Браузеры: все основные, IE8+. Должно работать при прокрутке окна (проверьте).
+
+[edit src="source" task/]
+
+
diff --git a/3-more/11-css-for-js/5-position/article.md b/3-more/11-css-for-js/5-position/article.md
new file mode 100644
index 00000000..6ae87934
--- /dev/null
+++ b/3-more/11-css-for-js/5-position/article.md
@@ -0,0 +1,374 @@
+# Свойство "position"
+
+Свойство `position` позволяет сдвигать элемент со своего обычного места. Цель этой главы -- не только напомнить, как оно работает, но и разобрать ряд частых заблуждений и граблей.
+[cut]
+## position: static   
+
+*Статическое позиционирование* производится по умолчанию, в том случае, если свойство `position` не указано.
+
+Его можно также явно указать через CSS-свойство:
+
+```css
+position: static;
+```
+
+Такая запись встречается редко и используется для переопределения других значений `position`.
+
+Здесь и далее, для примеров мы будем использовать следующий документ:
+
+```html
+<!--+ autorun height=200 -->
+<div style="background: #aef; width: 500px">
+    Без позиционирования ("position: static").
+
+    <h2 style="background: #fee; margin: 0">Заголовок</h2>
+
+    <div>А тут - всякий разный текст... <br/>
+         ... В две строки!</div>
+</div>
+```
+
+В этом документе сейчас все элементы отпозиционированы статически, то есть никак.
+
+[summary]
+Элемент с `position: static` еще называют *не позиционированым*.
+[/summary]
+
+
+## position: relative   
+
+*Относительное позиционирование* сдвигает элемент относительно его обычного положения.
+
+Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство `position: relative` и координаты `left/right/top/bottom`.
+
+Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:
+
+```css
+position: relative;
+top: 10px;
+```
+
+
+
+```html
+<!--+ autorun height=200 -->
+*!*
+<style>
+  h2 {
+    position: relative;
+    top: 10px;
+  }
+</style>
+*/!*
+
+<div style="background: #aef; width: 500px">
+    Заголовок сдвинут на 10px вниз.
+
+    <h2 style="background: #fee; margin: 0;">Заголовок</h2>
+
+    <div>А тут - всякий разный текст... <br/>
+         ... В две строки!</div>
+</div>
+```
+
+### Координаты
+
+Для сдвига можно использовать координаты:
+
+<ul>
+<li>`top` - сдвиг от "обычной" верхней границы</li>
+<li>`bottom` - сдвиг от нижней границы</li>
+<li>`left` - сдвиг слева</li>
+<li>`right` - сдвиг справа</li>
+</ul>
+
+Не будут работать одновременно указанные `top` и `bottom`, `left` и `right`. Нужно использовать только одну границу из каждой пары.
+
+**Возможны отрицательные координаты** и координаты, использующие другие единицы измерения. Например, `left: 10%` сдвинет элемент на 10% его ширины вправо, а `left: -10%` -- влево. При этом часть элемента может оказаться за границей окна:
+
+```html
+<!--+ autorun height=200 -->
+*!*
+<style>
+  h2 {
+    position: relative;
+    left: -10%;
+  }
+</style>
+*/!*
+
+<div style="background: #aef; width: 500px">
+    Заголовок сдвинут на 10% влево.
+
+    <h2 style="background: #fee; margin: 0;">Заголовок</h2>
+
+    <div>А тут - всякий разный текст... <br/>
+         ... В две строки!</div>
+</div>
+```
+
+**Свойства `left/top` не будут работать для `position:static`**. Если их все же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.
+
+## position: absolute   
+
+Синтаксис:
+
+```css
+position: absolute;
+```
+
+Абсолютное позиционирование делает две вещи:
+<ol>
+ <li>**Элемент исчезает с того места, где он должен быть и позиционируется заново.** Остальные элементы, располагаются так, как будто этого элемента никогда не было.</li>
+ <li>**Координаты `top/bottom/left/right` для нового местоположения отсчитываются от ближайшего позиционированного родителя**, т.е. родителя с позиционированием, отличным от `static`. Если такого родителя нет -- то относительно документа.</li>
+</ol>
+
+Кроме того:
+<ul>
+<li>**Ширина элемента с `position: absolute` устанавливается по содержимому.** Детали алгоритма вычисления ширины [описаны в стандарте](http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width).</li>
+<li>**Элемент получает `display:block`**, который перекрывает почти все возможные `display` (см. [Relationships between 'display', 'position', and 'float'](http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo)).</li>
+</ul>
+
+Например, отпозиционируем заголовок в правом-верхнем углу документа:
+
+```html
+<!--+ autorun height=200 -->
+*!*
+<style>
+  h2 {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+</style>
+*/!*
+
+<div style="background: #aef; width: 500px">
+    Заголовок в правом-верхнем углу документа.
+
+    <h2 style="background: #fee; margin: 0;">Заголовок</h2>
+
+    <div>А тут - всякий разный текст... <br/>
+         ... В две строки!</div>
+</div>
+```
+
+Важное отличие от `relative`: **так как элемент удаляется со своего обычного места, то элементы под ним сдвигаются, занимая освободившееся пространство**. Это видно в примере выше: строки идут одна за другой.
+
+Так как при `position:absolute` размер блока устанавливается по содержимому, то
+широкий `Заголовок` "съёжился" до прямоугольника в углу.
+
+Иногда бывает нужно поменять элементу `position` на `absolute`, но так, чтобы элементы вокруг не сдвигались. Как правило это делают, меняя соседей -- добавляют `margin/padding` или вставляют в документ пустой элемент с такими же размерами.
+
+
+[smart header="Одновременное указание `left/right`, `top/bottom`"]
+
+**В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.**
+
+Браузер растянет такой элемент до границ. Работает везде, кроме IE6:
+
+```html
+<!--+ autorun height=50 -->
+<style>
+*!*
+div {
+  position: absolute;
+  left: 10px; right: 10px; top: 10px; bottom: 10px;
+}
+*/!*
+</style>
+<div style="background:#aef;text-align:center">10px от границ</div>
+```
+
+[/smart]
+
+
+[smart header="Внешним блоком является окно"]
+Как растянуть абсолютно позиционированный блок на всю ширину документа?
+
+Первое, что может прийти в голову:
+
+```css
+div {
+  position: absolute;
+  left: 0; top: 0; /* в левый-верхний угол */
+  width: 100%; height: 100%; /* .. и растянуть */
+}
+```
+
+Но это будет работать лишь до тех пор, пока у страницы не появится скроллинг!
+
+Прокрутите вниз ифрейм:
+[iframe src="position-100-wrong" height=200 link]
+
+**Вы увидите, что голубой фон оканчивается задолго до конца документа.**
+
+Дело в том, что в CSS `100%` относится к ширине внешнего блока ("containing block"). А какой внешний блок имеется в виду здесь, ведь элемент изъят со своего обычного места?
+
+В данном случае им является так называемый (["\"initial containing block\""](http://www.w3.org/TR/CSS21/visudet.html#containing-block-details)), которым является окно, *а не документ*. 
+
+**То есть, координаты и ширины вычисляются относительно окна, а не документа.**
+
+Может быть, получится так?
+
+```css
+div {
+  position: absolute;
+  left: 0; top: 0; /* в левый-верхний угол, и растянуть..  */
+  right: 0; bottom: 0; /* ..указанием противоположных границ */
+}
+```
+
+С виду логично, но нет, не получится! 
+
+Координаты `top/right/left/bottom` вычисляются относительно *окна*. Значение `bottom: 0` -- нижняя граница окна, а не документа, блок растянется до неё. То есть, будет то же самое, что и в предыдущем примере.
+
+[/smart]
+
+
+## position: absolute в позиционированном родителе  
+
+Если у элемента есть позиционированный предок, то `position: absolute` работает относительно него, а не относительно документа.
+
+То есть, достаточно поставить родительскому `div` позицию `relative`, даже без координат -- и заголовок будет в его правом-верхнем углу, вот так:
+
+```html
+<!--+ autorun height=200 -->
+*!*
+<style>
+  h2 {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+</style>
+*/!*
+
+<div style="background: #aef; width: 500px; *!*position: relative*/!*">
+    Заголовок в правом-верхнем углу DIV'а.
+
+    <h2 style="background: #fee; margin: 0;">Заголовок</h2>
+
+    <div>А тут - всякий разный текст... <br/>
+         ... В две строки!</div>
+</div>
+```
+
+Нужно пользоваться таким позиционированием с осторожностью, т.к оно может перекрыть текст. Этим оно отличается от `float`. 
+
+Сравните:
+<ul>
+<li>Используем `position` для размещения элемента управления:
+
+```html
+<!--+ autorun height=80 -->
+<button style="position: absolute; right: 10px; opacity: 0.8">
+  Кнопка
+</button>
+1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9
+1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9
+```
+
+**Часть текста перекрывается.** Кнопка более не участвует в потоке.
+</li>
+<li>Используем `float` для размещения элемента управления:
+
+```html
+<!--+ autorun height=80 -->
+<button style="float: right; margin-right: 10px; opacity: 0.8;">
+  Кнопка
+</button>
+1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9
+1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9
+```
+
+**Браузер освобождает место справа, текст перенесён.** Кнопка продолжает находиться в потоке, просто сдвинута.
+</li>
+</ul>
+
+
+
+## position: fixed   
+
+Это подвид абсолютного позиционирования.
+
+Синтаксис:
+
+```css
+position: fixed;
+```
+
+Позиционирует объект точно так же, как `absolute`, но относительно `window`.
+
+Разница в нескольких словах:
+
+**Когда страницу прокручивают, фиксированный элемент остается на своем месте и не прокручивается вместе со страницей.**
+
+В следующем примере, при прокрутке документа, ссылка `#top` всегда остается на своем месте.
+
+```html
+<!--+ autorun untrusted height=200 -->
+<style>
+*!* 
+  #top {
+    position: fixed;
+    right: 10px;
+    top: 10px;
+    background: #fee;
+  }
+*/!*
+</style>
+
+*!*<a href="#" id="top">Наверх (остается при прокрутке)</a>*/!*
+
+Фиксированное позиционирование.
+
+<p>Текст страницы.. Прокрути меня...</p>
+<p>Много строк..</p><p>Много строк..</p>
+<p>Много строк..</p><p>Много строк..</p>
+<p>Много строк..</p><p>Много строк..</p>
+<p>Много строк..</p><p>Много строк..</p>
+```
+
+Поддерживается во всех современных браузерах, в IE начиная с версии 7. Для реализации аналогичного функционала в IE6 используют CSS-выражения.
+
+
+## Итого
+
+Виды позиционирования и их особенности.
+
+<dl>
+<dt>`static`</dt>
+<dd>Иначе называется "без позиционирования". В явном виде задаётся только если надо переопределить другое правило CSS.</dd>
+<dt>`relative`</dt>
+<dd>Сдвигает элемент относительно текущего места.
+
+<ul>
+<li>Противоположные границы `left/right` (`top/bottom`) одновременно указать нельзя.</li>
+<li>Окружающие элементы ведут себя так, как будто элемент не сдвигался.</li>
+</ul>
+</dd>
+<dt>`absolute`</dt>
+<dd>Визуально переносит элемент на новое место.
+
+Новое место вычисляется по координатам `left/top/right/bottom` относительно ближайшего позиционированного родителя. Если такого родителя нет, то им считается окно.
+
+<ul>
+<li>Ширина элемента по умолчанию устанавливается по содержимому.</li>
+<li>Можно указать противположные границы `left/right` (`top/bottom`). Элемент растянется. Возможность не поддерживается в IE<8.</li>
+<li>Окружающие элементы заполняют освободившееся место.</li>
+</ul>
+</li>
+</dd>
+<dt>`fixed`</dt>
+<dd>Подвид абсолютного позиционирования, при котором элемент привязывается к координатам окна, а не документа. 
+
+При прокрутке он остаётся на том же месте.</dd>
+</dl>
+
+## Почитать
+
+CSS-позиционирование по-настоящему глубоко в спецификации <a href="http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme">Visual Formatting Model, 9.3 и ниже</a>.
+
+Еще есть хорошее руководство <a href="http://www.barelyfitz.com/screencast/html-training/css/positioning/">CSS Positioning in 10 steps</a>, которое охватывает основные типы позиционирования.
+
diff --git a/3-more/11-css-for-js/5-position/position-100-wrong.view/index.html b/3-more/11-css-for-js/5-position/position-100-wrong.view/index.html
new file mode 100755
index 00000000..4f346b24
--- /dev/null
+++ b/3-more/11-css-for-js/5-position/position-100-wrong.view/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+  div {
+    position: absolute;
+    left: 0; top: 0;
+    width: 100%; height: 100%;
+  }
+  </style>
+</head>
+<body style="height:2000px">
+  <div style="background:#aef;text-align:center">Прокрутите меня...</div>
+</body>
+</html>
+
diff --git a/3-more/11-css-for-js/6-css-center/1-center-ball-css/solution.md b/3-more/11-css-for-js/6-css-center/1-center-ball-css/solution.md
new file mode 100644
index 00000000..aaf9b801
--- /dev/null
+++ b/3-more/11-css-for-js/6-css-center/1-center-ball-css/solution.md
@@ -0,0 +1,13 @@
+Сместим мяч в центр при помощи `left/top=50%`, а затем приподымем его указанием `margin`:
+
+```css
+#ball {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -20px;
+  margin-top: -20px;
+}
+```
+
+[edit src="solution"]Полный код решения[/edit]
\ No newline at end of file
diff --git a/3-more/11-css-for-js/6-css-center/1-center-ball-css/solution.view/index.html b/3-more/11-css-for-js/6-css-center/1-center-ball-css/solution.view/index.html
new file mode 100755
index 00000000..5e6eb2d4
--- /dev/null
+++ b/3-more/11-css-for-js/6-css-center/1-center-ball-css/solution.view/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+  #field {
+    width: 200px;
+    border: 10px groove black;
+    background-color: #00FF00;
+    position: relative;
+  }
+
+  #ball {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -20px;
+    margin-top: -20px;
+  }
+</style>
+</head>
+<body>
+
+
+<div id="field">
+<img src="http://js.cx/clipart/ball.gif" id="ball">
+. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+</div>
+
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/6-css-center/1-center-ball-css/source.view/index.html b/3-more/11-css-for-js/6-css-center/1-center-ball-css/source.view/index.html
new file mode 100755
index 00000000..99a6d4fc
--- /dev/null
+++ b/3-more/11-css-for-js/6-css-center/1-center-ball-css/source.view/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style> 
+  #field { 
+    width: 200px;
+    border: 10px groove black;
+    background-color: #00FF00;
+    position: relative;
+  }
+  
+  #ball {
+    position: absolute;
+  }
+</style>
+</head>
+<body>
+
+
+<div id="field">
+<img src="http://js.cx/clipart/ball.gif" id="ball">
+. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
+</div>
+
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/6-css-center/1-center-ball-css/task.md b/3-more/11-css-for-js/6-css-center/1-center-ball-css/task.md
new file mode 100644
index 00000000..cf748928
--- /dev/null
+++ b/3-more/11-css-for-js/6-css-center/1-center-ball-css/task.md
@@ -0,0 +1,20 @@
+# Поместите мяч в центр поля (CSS)
+
+[importance 5]
+
+Поместите мяч в центр поля при помощи CSS.
+
+Исходный код:
+[iframe height=200 src="source"]
+
+Используйте CSS, чтобы поместить мяч в центр:
+[iframe height=200 src="solution"]
+
+<ul>
+<li>CSS для центрирования может использовать размеры мяча.</li>
+<li>CSS для центрирования не должен опираться на конкретный размер поля.</li>
+</ul>
+
+[edit src="source"]Исходный документ[/edit].
+
+
diff --git a/3-more/11-css-for-js/6-css-center/2-form-modal/solution.md b/3-more/11-css-for-js/6-css-center/2-form-modal/solution.md
new file mode 100644
index 00000000..b47bedb5
--- /dev/null
+++ b/3-more/11-css-for-js/6-css-center/2-form-modal/solution.md
@@ -0,0 +1,12 @@
+# Структура решения
+
+Шаги решения:
+<ol><li>
+Для того, чтобы элементы окна не работали, их нужно перекрыть `DIV'ом` с большим `z-index`.</li>
+<li>Внутри него будет лежать "экран" с полупрозрачностью. Чтобы он растягивался, можно дать ему `position: absolute` и указать все координаты `top/left/right/bottom`. Это работает в IE8+.</li>
+<li>Форму можно отцентрировать при помощи `margin` или `display: table-cell` + `vertical-align` на внешнем `DIV`.</li>
+</ol>
+
+# Решение
+
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/3-more/11-css-for-js/6-css-center/2-form-modal/solution.view/index.html b/3-more/11-css-for-js/6-css-center/2-form-modal/solution.view/index.html
new file mode 100755
index 00000000..efe533ac
--- /dev/null
+++ b/3-more/11-css-for-js/6-css-center/2-form-modal/solution.view/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    /* внешний DIV перекрывает всё окно */
+    #box {
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 999;
+    }
+
+    /* в нём находится полупрозрачный экран, на 20px меньше */
+    #box-inner {
+      position: absolute;
+      left: 20px;
+      right: 20px;
+      top: 20px;
+      bottom: 20px;
+      background: blue;
+      opacity: 0.3;
+      filter: alpha(opacity=30);
+    }
+
+    /* форма находится не в экране, а рядом с ним, чтобы не быть полупрозрачной */
+    #box form {
+      position: absolute;
+      top: 0; bottom: 0; right: 0; left: 0; /* центрирование */
+      margin: auto;  /* центрирование */
+      height: 120px;
+      width: 300px;
+      border: 1px solid black;
+      padding: 5px 5px 5px 55px;
+      background: url(http://js.cx/clipart/key.png) 3px 5px white no-repeat;
+    }
+  </style>
+</head>
+<body style="height:2000px">
+
+<p>Текст Текст Текст</p>
+
+<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
+
+<p>Текст Текст Текст</p>
+
+
+<div id="box">
+<div id="box-inner">
+</div>
+
+  <form>
+   Добро пожаловать!
+  <table>
+    <tr><td>Логин</td><td><input></td></tr>
+    <tr><td>Пароль</td><td><input></td></tr>
+    <tr><td colspan="2"><input type="submit" value="Войти"></td></tr>
+  </table>
+
+  </form>
+
+</div>
+
+
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/6-css-center/2-form-modal/source.view/index.html b/3-more/11-css-for-js/6-css-center/2-form-modal/source.view/index.html
new file mode 100755
index 00000000..28ca5e6f
--- /dev/null
+++ b/3-more/11-css-for-js/6-css-center/2-form-modal/source.view/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body style="height:2000px">
+
+<p>Текст Текст Текст</p>
+
+<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
+
+<p>Текст Текст Текст</p>
+
+<img src="http://js.cx/clipart/key.png"/>
+
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/6-css-center/2-form-modal/task.md b/3-more/11-css-for-js/6-css-center/2-form-modal/task.md
new file mode 100644
index 00000000..a60e9b1f
--- /dev/null
+++ b/3-more/11-css-for-js/6-css-center/2-form-modal/task.md
@@ -0,0 +1,23 @@
+# Форма + модальное окно
+
+[importance 5]
+
+Создайте при помощи HTML/CSS форму для логина в модальном окне.
+
+[iframe height=280 src="solution" border=1 link]
+
+Требования:
+
+<ul>
+<li>Кнопки окна вне формы не работают (даже на левый край нажать нельзя).</li>
+<li>Полупрозрачный голубой "экран" отстоит от границ на `20px`.</li>
+<li>Форма центрирована вертикально и горизонтально, её размеры фиксированы.</li>
+<li>Посетитель может менять размер окна браузера, геометрия должна сохраняться.</li>
+<li>Не ломается при прокрутке.</li>
+</ul>
+
+Браузеры: все основные, IE8+.
+
+[edit src="source" task/]
+
+
diff --git a/3-more/11-css-for-js/6-css-center/3-vertical-align-table-cell-position/solution.md b/3-more/11-css-for-js/6-css-center/3-vertical-align-table-cell-position/solution.md
new file mode 100644
index 00000000..1e255207
--- /dev/null
+++ b/3-more/11-css-for-js/6-css-center/3-vertical-align-table-cell-position/solution.md
@@ -0,0 +1,29 @@
+# Подсказка
+
+Центрирование не работает из-за `position: absolute`.
+
+# Решение
+
+Центрирование не работает потому, что `position: absolute` автоматически меняет элементу `display` на `block`. 
+
+В однострочном случае можно сделать центрирование при помощи `line-height`:
+
+```html
+<!--+ run -->
+<style>
+  .arrow {
+    position: absolute;
+    height: 60px;
+    border: 1px solid black;
+    font-size: 28px;
+
+*!*
+    line-height: 60px;
+*/!*
+  }
+</style>
+
+<div class="arrow">«</div>
+```
+
+Если же центрировать нужно несколько строк или блок, то есть и другие [техники центрирования](/css-center), которые сработают без `display:table-cell`.
\ No newline at end of file
diff --git a/3-more/11-css-for-js/6-css-center/3-vertical-align-table-cell-position/task.md b/3-more/11-css-for-js/6-css-center/3-vertical-align-table-cell-position/task.md
new file mode 100644
index 00000000..6f532d1f
--- /dev/null
+++ b/3-more/11-css-for-js/6-css-center/3-vertical-align-table-cell-position/task.md
@@ -0,0 +1,28 @@
+# vertical-align + table-cell + position = ?
+
+[importance 5]
+
+В коде ниже используется вертикальное центрирование при помощи `table-cell + vertical-align`.
+
+Почему оно не работает? Нажмите на просмотр, чтобы увидеть (стрелка должна быть в центре по вертикали).
+
+```html
+<!--+ run height=70 -->
+<style>
+  .arrow {
+    position: absolute;
+    height: 60px;
+    border: 1px solid black;
+    font-size: 28px;
+
+*!*
+    display: table-cell;
+    vertical-align: middle;
+*/!*
+  }
+</style>
+
+<div class="arrow">«</div>
+```
+
+Как починить центрирование при помощи CSS? Свойства `position/height` менять нельзя.
\ No newline at end of file
diff --git a/3-more/11-css-for-js/6-css-center/article.md b/3-more/11-css-for-js/6-css-center/article.md
new file mode 100644
index 00000000..48cbd1df
--- /dev/null
+++ b/3-more/11-css-for-js/6-css-center/article.md
@@ -0,0 +1,415 @@
+# Центрирование горизонтальное и вертикальное
+
+В CSS есть всего несколько техник центрирования элементов. Если их знать, то большинство задач решаются просто.
+[cut]
+## Горизонтальное
+
+### text-align
+
+Для центрирования инлайновых элементов -- достаточно поставить родителю `text-align: center`.:
+
+```html
+<!--+ autorun height=50 -->
+<style>
+  .outer {
+    *!*text-align: center;*/!*
+    border: 1px solid blue;
+  }
+</style>
+
+<div class="outer">Текст</div>
+```
+
+Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:
+
+```html
+<!--+ autorun height=50 -->
+<style>
+  .outer {
+    *!*text-align: center;*/!*
+    border: 1px solid blue;
+  }
+  .inner {
+    width: 100px;
+    border: 1px solid red;
+  }
+</style>
+
+<div class="outer">
+  <div class="inner">Текст</div>
+</div>
+```
+
+Впрочем, в примере выше блок будет центрирован в IE6,7 (это отклонение от стандарта).
+
+### margin: auto
+
+Для всех браузеров, кроме IE6,7, блок по горизонтали центрируется `margin: auto`.:
+
+```html
+<!--+ autorun height=50 -->
+<style>
+  .outer {
+    *!*text-align: center;*/!* /* Для IE<8 */
+    border: 1px solid blue;
+  }
+  .inner {
+    width: 100px;
+    border: 1px solid red;
+    *!*margin: auto;*/!* /* Для IE8+ и других браузеров */
+  }
+</style>
+
+<div class="outer">
+  <div class="inner">Текст</div>
+</div>
+```
+
+В отличие от `width/height`, значение `auto` для `margin` само не появляется. Обычно `margin` равно конкретной величине для элемента, например `0` для `DIV`. Нужно поставить его явно.
+
+Значение `margin-left:auto/margin-right:auto` заставляет браузер выделять под `margin` всё доступное сбоку пространство. А если и то и другое `auto`, то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации [Calculating widths and margins](http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins).
+
+## Вертикальное 
+
+Для горизонтального центрирования всё просто. Вертикальное же изначальное не было предусмотрено в спецификации  CSS и по сей день вызывает ряд проблем. 
+
+Есть три основных решения.
+
+### position:absolute + margin
+
+Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи `top:50%`:
+
+```html
+<!--+ autorun height=100 -->
+<style>
+  .outer {
+    position: relative;
+    height: 5em;
+    border: 1px solid blue;
+  }
+
+  .inner {
+*!*
+    position: absolute;
+    top: 50%;
+*/!*
+    border: 1px solid red;
+  }
+</style>
+
+<div class="outer">
+  <div class="inner">Текст</div>
+</div>
+```
+
+Это, конечно, не совсем центр. По центру находится верхняя граница. Нужно ещё приподнять элемент на половину своей высоты.
+
+**Высота центрируемого элемента должна быть известна.** Родитель может иметь любую высоту.
+
+Если мы знаем, что это ровно одна строка, то её высота равна `line-height`. 
+
+**Приподнимем элемент на пол-высоты при помощи `margin-top`:**
+
+```html
+<!--+ autorun height=100 -->
+<style>
+  .outer {
+    position: relative;
+    height: 5em;
+    border: 1px solid blue;
+  }
+
+  .inner {
+    position: absolute;
+    top: 50%;
+*!*
+    margin-top: -0.625em;
+*/!*
+    border: 1px solid red;
+  }
+</style>
+
+<div class="outer">
+  <div class="inner">Текст</div>
+</div>
+```
+
+[hide text="Почему -0.625em?"]
+При стандартных настройках браузера высота строки `line-height: 1.25`, если поделить на два `1.25em / 2 = 0.625em`.
+
+Конечно, высота может быть и другой, главное чтобы мы её знали заранее.
+[/hide]
+
+Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи `left:50%` и отрицательного `margin-left`.
+
+### Одна строка: line-height
+
+Вертикально отцентрировать одну строку в элементе с известной высотой `height` можно, указав эту высоту в свойстве `line-height`:
+
+```html
+<!--+ autorun height=100 -->
+<style>
+  .outer {
+    height: 5em;
+*!*
+    line-height: 5em;
+*/!*
+    border: 1px solid blue;
+  }
+</style>
+
+<div class="outer">
+  <span style="border:1px solid red">Текст</span>
+</div>
+```
+
+Это работает, но лишь до тех пор, пока строка одна, а если содержимое вдруг переносится на другую строку, то начинает выглядеть довольно уродливо. 
+
+### Таблица с vertical-align
+
+У свойства [vertical-align](http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align), которое управляет вертикальным расположением элемента, есть два режима работы.
+
+**В таблицах свойство `vertical-align` указывает расположение *содержимого* ячейки.**
+
+Его возможные значения:
+<dl>
+<dt>`baseline`</dt>
+<dd>Значение по умолчанию.</dd>
+<dt>`middle`, `top`, `bottom`</dt>
+<dd>Располагать содержимое посередине, вверху, внизу ячейки.</dd>
+</dl>
+
+Например, ниже есть таблица со всеми 3-мя значениями:
+
+```html
+<!--+ autorun height=130 -->
+<style>
+  table {  border-collapse: collapse; }
+  td {    
+    border: 1px solid blue;
+    height: 100px;
+  }
+</style>
+
+<table>
+<tr>
+*!*
+  <td style="vertical-align: top">top</td>
+  <td style="vertical-align: middle">middle</td>
+  <td style="vertical-align: bottom">bottom</td>
+*/!*
+</tr>
+</table>
+```
+
+Обратим внимание, что в ячейке с `vertical-align: middle` содержимое находится по центру. Таким образом, можно обернуть нужный элемент в таблицу размера `width:100%;height:100%` с одной ячейкой, у которой указать `vertical-align:middle`, и он будет отцентрирован.
+
+Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение `display:table-cell`. Для элемента с таким `display` используются те же алгоритмы вычисления ширины и центрирования, что и в `TD`. И, в том числе, работает `vertical-align`:
+
+Пример центрирования:
+
+```html
+<!--+ autorun height=130 -->
+<div style="*!*display: table-cell; vertical-align: middle; */!* height: 100px; border: 1px solid red">
+  <button>Кнопка<br>с любой высотой<br>и шириной</button>
+</div>
+```
+
+**Этот способ замечателен тем, что он не требует знания высоты элементов.**
+
+Однако у него есть особенность. Вместе с `vertical-align` родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.
+
+Чтобы его растянуть, нужно указать `width` явно, например: `300px`:
+
+```html
+<!--+ autorun height=130 -->
+<div style="display: table-cell; vertical-align: middle; height: 100px; *!*width: 300px*/!*; border: 1px solid red">
+  <button>Кнопка<br>с любой высотой<br>и шириной</button>
+</div>
+```
+
+Можно и в процентах, но в примере выше они не сработают, потому что структура таблицы "сломана" -- ячейка есть, а собственно таблицы-то нет.
+
+Это можно починить, завернув "псевдоячейку" в элемент с `display:table`, которому и поставим ширину:
+
+```html
+<!--+ autorun height=130 -->
+<div style="*!*display: table; width: 100%*/!*">
+<div style="display: table-cell; vertical-align: middle; height: 100px; border: 1px solid blue">
+  <button>Кнопка<br>с любой высотой<br>и шириной</button>
+</div>
+</div>
+```
+
+Если дополнительно нужно горизонтальное центрирование -- оно обеспечивается другими средствами, например `margin: 0 auto` для блочных элементов или `text-align:center` на родителе -- для других. 
+
+### Центрирование в строке с vertical-align
+
+Для инлайновых элементов (`display:inline/inline-block`), включая картинки, свойство `vertical-align` центрирует *сам инлайн-элемент в окружающем его тексте*.
+
+В этом случае набор значений несколько другой:
+[iframe src="vertical-align" height="300" link edit border="1"]
+
+Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента -- нет.
+
+Допустим, высота внешнего элемента `120px`. Укажем её в свойстве `line-height`:
+
+```html
+<!--+ autorun height=150 -->
+<style>
+  .outer {
+    line-height: 120px;
+  }
+  .inner {
+    display: inline-block; /* центрировать..*/
+    vertical-align: middle;  /* ..по вертикали */
+    line-height: 1.25; /* переопределить высоту строки на обычную */
+    border: 1px solid red;
+  }
+</style>
+<div class="outer" style="height: 120px;border: 1px solid blue">
+  <span class="inner">Центрирован<br>вертикально</span>
+</div>
+```
+
+Работает во всех браузерах и IE8+.
+
+Свойство `line-height` наследуется, поэтому надо знать "правильную" высоту строки и переопределять её для `inner`.
+
+### Центрирование с vertical-align без таблиц
+
+Если центрирование должно работать для любой высоты родителя и центрируемого элемента, то обычно используют таблицы или `display:table-cell` с `vertical-align`.
+
+Если центрируются не-блочные элементы, например `inline` или `inline-block`, то `vertical-align` может решить задачу без всяких таблиц. Правда, понадобится вспомогательный элемент (можно через `:before`).
+
+Пример:
+
+```html
+<!--+ autorun -->
+<style>
+.before {
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.inner {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>
+
+<div class="outer" style="height:100px;border:1px solid blue">
+  <span class="before"></span>
+  <span class="inner" style="border:1px solid red">
+    Центрированный<br>Элемент
+  </span>
+</div>
+```
+
+<ul>
+<li>Перед центрируемым элементом помещается вспомогательный инлайн-блок `before`, занимающий всю возможную высоту.</li>
+<li>Центрируемый блок выровнен по его середине.</li>
+</ul>
+
+Для всех современных браузеров и IE8 можно добавить вспомогательный элемент через `:before`:
+
+```html
+<!--+ autorun -->
+<style>
+*!*.outer:before*/!* {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.inner {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* добавим горизонтальное центрирование */
+.outer {
+  text-align: center;
+}
+</style>
+
+<div class="outer" style="height:100px; width: 100%; border:1px solid black">
+  <span class="inner" style="border:1px solid red">
+    Центрированный<br>Элемент
+  </span>
+</div>
+```
+
+В пример выше добавлено также горизонтальное центрирование `text-align: center`. Но вы можете видеть, что на самом деле внутренний элемент не центрирован горизонтально, он немного сдвинут вправо.
+
+Это происходит потому, что центрируется *весь текст*, а перед `inner` находится пробел, который занимает место.
+
+Варианта два:
+<ol>
+<li>Убрать лишний пробел между `div` и началом `inner`, будет `<div class="outer"><span class="inner">...`.</li>
+<li>Оставить пробел, но сделать отрицательный `margin-left` у `inner`, равный размеру пробела, чтобы `inner` сместился левее.</li>
+</ol>
+
+Второе решение:
+
+```html
+<!--+ autorun -->
+<style>
+.outer:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.inner {
+  display: inline-block;
+  vertical-align: middle;
+*!*
+  margin-left: -0.35em;
+*/!*
+}
+
+.outer {
+  text-align: center;
+}
+</style>
+
+<div class="outer" style="height:100px; width: 100%; border:1px solid black">
+  <span class="inner" style="border:1px solid red">
+    Центрированный<br>Элемент
+  </span>
+</div>
+```
+
+## Итого
+
+Обобщим решения, которые обсуждались в этой статье.
+
+Для горизонтального центрирования:
+<ul>
+<li>`text-align: center` -- центрирует инлайн-элементы в блоке. В IE<8 центрирует всё, но это нестандартное поведение.</li>
+<li>`margin: 0 auto` -- центрирует блок внутри родителя. У блока должна быть указана ширина.</li>
+</ul>
+
+Для вертикального центрирования одного блока внутри другого:
+
+<dl>
+<dt>Если размер центрируемого элемента известен, а родителя - нет</dt>
+<dd>Родителю `position:relative`, потомку `position:absolute; top:50%` и `margin-top:-<половина-высоты-потомка>`. Аналогично можно отцентрировать и по горизонтали.</dd>
+<dt>Если нужно отцентрировать одну строку в блоке, высота которого известна</dt>
+<dd>Поставить блоку `line-height: <высота>`. Нужны конкретные единицы высоты (`px`,`em`...). Значение `line-height:100%` не будет работать, т.к. проценты берутся не от высоты блока, а от текущей `line-height`.</dd>
+<dt>Высота родителя известна, а центрируемого элемента - нет.</dt>
+<dd>Поставить `line-height` родителю во всю его высоту, а потомку поставить `display:inline-block`.</dd>
+<dt>Высота обоих элементов неизвестна.</dt>
+<dd>Два варианта:
+<ol>
+<li>Сделать элемент-родитель ячейкой таблицы при помощи `display:table-cell`(IE8) или реальной таблицы, и поставить ему `vertical-align:middle`. Отлично работает, но мы имеем дело с таблицей вместо обычного блока.</li>
+<li>Решение с вспомогательным элементом `outer:before` и инлайн-блоками. Вполне универсально и не создаёт таблицу.</li>
+</ol>
+</dd>
+</dl>
+
+
diff --git a/3-more/11-css-for-js/6-css-center/vertical-align.view/index.html b/3-more/11-css-for-js/6-css-center/vertical-align.view/index.html
new file mode 100755
index 00000000..30c47286
--- /dev/null
+++ b/3-more/11-css-for-js/6-css-center/vertical-align.view/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+Картинка размером в <code>30px</code>, значения <code>vertical-align</code>:
+
+<pre>
+baseline(по умолчанию) <img src="http://js.cx/clipart/30.png">
+middle(по середине) <img src="http://js.cx/clipart/30.png" style="vertical-align: middle">
+sub<sub>вровень с &lt;sub&gt;</sub> <img src="http://js.cx/clipart/30.png" style="vertical-align: sub">
+super<sup>вровень с &lt;sup&gt;</sup> <img src="http://js.cx/clipart/30.png" style="vertical-align: super">
+text-top(верхняя граница вровень с текстом) <img src="http://js.cx/clipart/30.png" style="vertical-align: text-top">
+text-bottom(нижняя граница вровень с текстом) <img src="http://js.cx/clipart/30.png" style="vertical-align: text-bottom">
+</pre>
+
+</body>
+</html>
diff --git a/3-more/11-css-for-js/7-font-size-line-height/article.md b/3-more/11-css-for-js/7-font-size-line-height/article.md
new file mode 100644
index 00000000..8c11ebed
--- /dev/null
+++ b/3-more/11-css-for-js/7-font-size-line-height/article.md
@@ -0,0 +1,119 @@
+# Свойства "font-size" и "line-height"
+
+Здесь мы рассмотрим, как соотносятся размеры шрифта и строки, и как их правильно задавать.
+
+## font-size и line-height
+<ul>
+<li>`font-size` -- *размер шрифта*, в частности, определяющий высоту букв.</li>
+<li>`line-height` -- *высота строки*.</li>
+</ul>
+
+Сделаем HTML, в котором шрифт и размер строки одинаковы:
+
+```html
+<!--+ autorun height=100 -->
+<style>
+body { 
+*!*
+    font-size: 30px;
+    font-family: monospace;
+    line-height: 1em; /* 1em = размер шрифта = 30px */
+*/!*
+  }
+</style>
+
+<div style="outline: 1px dotted red">Ёрш</div>
+<div style="outline: 1px dotted red">Ёрш</div>
+```
+
+**Как видно из примера,`font-size` -- это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях, это даже не "самая большая буква", а просто такая прикидка, чтобы было удобно планировать размер строки.**
+
+При размере строки, равном `font-size`, строка не будет размером точно "под букву". В зависимости от шрифта, "хвосты" букв при этом могут вылезать, поэтому обычно размер строки делают чуть больше, чем шрифт.
+
+**По умолчанию в браузерах используется специальное значение `line-height:normal`.**
+
+Оно означает, что браузер может принимать решение о размере строки самостоятельно. Как правило, оно будет в диапазоне `1.0 - 1.25`, но стандарт не гарантирует этого, он говорит лишь, что оно должно быть "разумным" (reasonable).
+
+## Множитель для line-height
+
+Значение `line-height` можно указать при помощи `px` или `em`, но гораздо лучше -- задать его числом.
+
+Значение-число интерпретируется как множитель относительно размера шрифта. Например, значение с множителем `line-height: 2` при `font-size: 16px` будет аналогично `line-height: 32px (=16px*2)`.
+
+Однако, между множителем и точным значением есть одна существенная разница.
+
+<ul>
+<li>**Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта.**
+То есть, при `line-height: 2` означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.
+</li>
+<li>**Значение, заданное в единицах измерения, запоминается и наследуется "как есть".**
+Это означает, что `line-height: 32px` будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.</li>
+</ul>
+
+Давайте посмотрим, как это выглядит, на примерах:
+
+<dl>
+<dt>Множитель, `line-height:1.25`</dt>
+<dd>
+
+```html
+<!--+ autorun -->
+<div style="*!*line-height: 1.25*/!*">
+  стандартная строка
+  <div style="font-size:2em">
+    шрифт в 2 раза больше<br>
+    шрифт в 2 раза больше
+  </div>
+</div>
+```
+
+</dd>
+<dt>Конкретное значение, `line-height:1.25em`</dt>
+<dd>
+
+```html
+<!--+ autorun -->
+<div style="*!*line-height: 1.25em*/!*">
+  стандартная строка
+  <div style="font-size:2em">
+    шрифт в 2 раза больше<br>
+    шрифт в 2 раза больше
+  </div>
+</div>
+```
+
+</dd>
+</dl>
+
+Какой вариант выглядит лучше? Наверно, первый. В нём размер строки более-менее соответствует шрифту, поскольку задан через множитель.
+
+**В обычных ситуациях рекомендуется использовать именно множитель, за исключением особых случаев, когда вы действительно знаете что делаете.** 
+
+## Синтаксис font: size/height family
+
+Установить `font-size` и `line-height` можно одновременно.
+
+Соответствующий синтаксис выглядит он так:
+
+```css
+font: *!*20px/1.5*/!* Arial,sans-serif;
+```
+
+При этом нужно обязательно указать сам шрифт, например `Arial,sans-serif`. Укороченный вариант `font: 20px/1.5` работать не будет.
+
+Дополнительно можно задать и свойства `font-style`, `font-weight`:
+
+```css
+font: *!*italic bold*/!* 20px/1.5 Arial,sans-serif;
+```
+
+## Итого
+
+<dl>
+<dt>`line-height`</dt>
+<dd>Размер строки, обычно он больше размера шрифта. При установке множителем расчитывается каждый раз относительно текущего шрифта, при установке в единицах измерения -- фиксируется.</dd>
+<dt>`font-size`</dt>
+<dd>Размер шрифта. Если сделать блок такой же высоты, как шрифт, то хвосты букв будут вылезать из-под него.</dd>
+<dt>`font: 125%/1.5 FontFamily`</dt>
+<dd>Даёт возможность одновременно задать размер, высоту строки и, собственно, сам шрифт.</dd>
+</dl>
diff --git a/3-more/11-css-for-js/8-white-space/article.md b/3-more/11-css-for-js/8-white-space/article.md
new file mode 100644
index 00000000..9b2d438f
--- /dev/null
+++ b/3-more/11-css-for-js/8-white-space/article.md
@@ -0,0 +1,122 @@
+# Свойство white-space
+
+Свойство `white-space` позволяет сохранять пробелы и переносы строк. 
+
+У него есть два известных значения:
+<ul>
+<li>`white-space: normal` -- обычное поведение</li>
+<li>`white-space: pre` -- текст ведёт себя, как будто оформлен в тег `pre`.</li>
+</ul>
+
+Но браузеры поддерживают ещё 3, два из которых -- только в IE8+ и очень полезны.
+[cut]
+
+## pre / nowrap
+
+Встречаем первую "сладкую парочку" -- `pre` и `nowrap`. 
+
+Оба этих значения меняют стандартное поведение HTML при работе с текстом:
+
+**`pre`**:
+<ul>
+<li>**сохраняет пробелы**</li>
+<li>**переносит текст при явном разрыве строки.**</li>
+</ul>
+
+**`nowrap`**
+<ul>
+<li>**не сохраняет пробелы**</li>
+<li>**игнорирует явные разрывы строки (не переносит текст).**</li>
+</ul>
+
+Оба этих значения поддерживаются кросс-браузерно.
+
+**Их основной недостаток -- текст вылезает из контейнера.**
+
+Для примера, рассмотрим следующий фрагмент кода:
+
+```js
+if (hours > 18) {
+    // Пойти поиграть в теннис
+}
+```
+
+<ul>
+<li>**`white-space: pre`:**
+
+[pre]
+<div class="example" style="white-space:pre">if (hours > 18) {
+    // Пойти поиграть в теннис
+}
+</div>
+[/pre]
+
+Здесь пробелы и переводы строк сохранены. В HTML этому значению `white-space` соответствует тег `PRE`.
+</li>
+<li>**`white-space: nowrap`:**
+
+[pre]
+<div class="example" style="white-space:nowrap">if (hours > 18) {
+    // Пойти поиграть в теннис
+} 
+</div>
+[/pre]
+
+Здесь переводы строки проигнорированы, а подряд идущие пробелы, если присмотреться -- сжаты в один (например, перед комментарием `//`).
+</li>
+</ul> 
+
+Допустим, мы хотим разрешить посетителям публиковать код на сайте, с сохранением разметки. Но тег `PRE` и описанные выше значения `white-space` для этого не подойдут!
+
+Злой Василий Пупкин может написать такой текст, который вылезет из контейнера и поломает вёрстку страницы. 
+
+Можно скрыть вылезшее значение при помощи `overflow-x: hidden` или сделать так, чтобы была горизонтальная прокрутка, но, к счастью, есть другие значения `white-space`, специально для таких случаев.
+
+## pre-wrap/pre-line
+
+Эти значения не поддерживаются в IE7-.
+
+<dl>
+<dt>`pre-wrap`</dt>
+<dd>То же самое, что `pre`, но переводит строку, если текст вылезает из контейнера.</dd>
+<dt>`pre-line`</dt>
+<dd>То же самое, что `pre`, но переводит строку, если текст вылезает из контейнера и не сохраняет пробелы.</dd>
+</dl>
+
+Оба поведения отлично прослеживаются на примерах:
+
+<ul>
+<li>**`white-space: pre-wrap`:**
+
+[pre]
+<div class="example" style="white-space:pre-wrap">if (hours > 18) {
+    // Пойти поиграть в теннис
+}
+</div>
+[/pre]
+Отличный выбор для безопасной вставки кода посетителями.
+
+</li>
+<li>**`white-space: pre-line`:**
+
+[pre]
+<div class="example" style="white-space:pre-line">if (hours > 18) {
+    // Пойти поиграть в теннис
+} 
+</div>
+[/pre]
+
+Сохранены переводы строк, ничего не вылезает, но пробелы интерпретированы в режиме обычного HTML.
+</li>
+</ul> 
+
+Никто не мешает использовать эти значения на сайте, а для IE7- игнорировать проблему или задавать контейнеру `overflow-x: hidden`.
+
+<style>
+/* not in HEAD, because of export */
+.example {
+  font-family: monospace; 
+  width: 200px; 
+  border: 1px solid black;
+}
+</style>
\ No newline at end of file
diff --git a/3-more/11-css-for-js/9-outline/article.md b/3-more/11-css-for-js/9-outline/article.md
new file mode 100644
index 00000000..2830a468
--- /dev/null
+++ b/3-more/11-css-for-js/9-outline/article.md
@@ -0,0 +1,45 @@
+# Свойство "outline"
+
+Свойство `outline` задаёт дополнительную рамку вокруг элемента, *за пределами его CSS-блока*. Поддерживается во всех браузерах, IE8+.
+[cut]
+Для примера, рассмотрим его вместе с обычной рамкой `border`:
+
+```html
+<!--+ autorun height=60 -->
+<div style="border:3px solid blue; *!*outline: 3px solid red*/!*">
+ Элемент
+</div>
+```
+
+<ul>
+<li>**В отличие от `border`, рамка `outline` не участвует в блочной модели CSS.** Она не занимает места и не меняет размер элемента. Поэтому его используют, когда хотят добавить рамку без изменения других CSS-параметров.
+</li>
+<li>Также, в отличие от `border`, рамку `outline` можно задать только со всех сторон: свойств `outline-top`, `outline-left` не существует.</li>
+</ul>
+
+Так как `outline` находится за границами элемента -- **`outline`-рамки соседей могут перекрывать друг друга**:
+
+```html
+<!--+ height=60 autorun -->
+<div style="*!*outline: 3px solid green*/!*">
+ Элемент
+</div>
+<div style="*!*outline: 3px solid red*/!*">
+ Элемент
+</div>
+```
+
+В примере выше верхняя рамка нижнего элемента находится на территории верхнего и наоборот.
+
+Все браузеры, кроме IE<10, также поддерживают свойство `outline-offset`, задающее отступ `outline` от внешней границы элемента:
+
+```html
+<!--+ autorun height=60 -->
+<div style="border:3px solid blue; outline: 3px solid red; outline-offset:5px">
+ Везде, кроме IE<10, между рамками будет расстояние 5px
+</div>
+```
+
+Ещё раз заметим, что основная особенность `outline` -- в том, что при наличии  `outline-offset` или без него -- он не занимает места в блоке.
+
+Поэтому его часто используют для стилей `:hover` и других аналогичных, когда нужно выделить элемент, но чтобы ничего при этом не прыгало.
\ No newline at end of file
diff --git a/3-more/11-css-for-js/index.md b/3-more/11-css-for-js/index.md
new file mode 100644
index 00000000..c35c778b
--- /dev/null
+++ b/3-more/11-css-for-js/index.md
@@ -0,0 +1,2 @@
+# CSS для JavaScript-разработчика 
+
diff --git a/3-more/2-animation/1-js-animation/1-carousel-animated/solution.md b/3-more/2-animation/1-js-animation/1-carousel-animated/solution.md
new file mode 100644
index 00000000..78e8da76
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/1-carousel-animated/solution.md
@@ -0,0 +1,3 @@
+Проще всего -- использовать функцию [](#animate), а еще удобнее -- `animateProp`.
+
+[edit src="solution"/]
\ No newline at end of file
diff --git a/3-more/2-animation/1-js-animation/1-carousel-animated/solution.view/animate.js b/3-more/2-animation/1-js-animation/1-carousel-animated/solution.view/animate.js
new file mode 100755
index 00000000..51bb38c6
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/1-carousel-animated/solution.view/animate.js
@@ -0,0 +1,92 @@
+/**
+ Docs: http://learn.javascript.ru/tutorial/lib
+*/
+
+function animate(opts) {
+
+  var start = new Date;
+  var delta = opts.delta || linear;
+
+  var timer = setInterval(function() {
+    var progress = (new Date - start) / opts.duration;
+
+    if (progress > 1) progress = 1;
+
+    opts.step( delta(progress) );
+
+    if (progress == 1) {
+      clearInterval(timer);
+      opts.complete && opts.complete();
+    }
+  }, opts.delay || 13);
+
+  return timer;
+}
+
+/**
+ Анимация стиля opts.prop у элемента opts.elem
+ от opts.from до opts.to продолжительностью opts.duration
+ в конце opts.complete
+
+ Например: animateProp({ elem: ..., prop: 'height', start:0, end: 100, duration: 1000 })
+*/
+function animateProp(opts) {
+  var start = opts.start, end = opts.end, prop = opts.prop;
+
+  opts.step = function(delta) {
+    var value = Math.round(start + (end - start)*delta);
+    opts.elem.style[prop] = value + 'px';
+  }
+  return animate(opts);
+}
+
+// ------------------ Delta ------------------
+
+function elastic(progress) {
+  return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*1.5/3*progress);
+}
+
+function linear(progress) {
+  return progress;
+}
+
+function quad(progress) {
+  return Math.pow(progress, 2);
+}
+
+function quint(progress) {
+  return Math.pow(progress, 5);
+}
+
+function circ(progress) {
+  return 1 - Math.sin(Math.acos(progress));
+}
+
+function back(progress) {
+  return Math.pow(progress, 2) * ((1.5 + 1) * progress - 1.5);
+}
+
+
+function bounce(progress) {
+  for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
+    if (progress >= (7 - 4 * a) / 11) {
+      return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
+    }
+  }
+}
+
+function makeEaseInOut(delta) {
+  return function(progress) {
+    if (progress < .5)
+      return delta(2*progress) / 2;
+    else
+      return (2 - delta(2*(1-progress))) / 2;
+  }
+}
+
+
+function makeEaseOut(delta) {
+  return function(progress) {
+    return 1 - delta(1 - progress);
+  }
+}
diff --git a/3-more/2-animation/1-js-animation/1-carousel-animated/solution.view/index.html b/3-more/2-animation/1-js-animation/1-carousel-animated/solution.view/index.html
new file mode 100755
index 00000000..b7f62348
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/1-carousel-animated/solution.view/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<head>
+<meta charset="utf-8">
+<link rel="stylesheet" type="text/css" href="style.css">
+<script src="animate.js"></script>
+</head>
+
+<body>
+
+<div class="carousel">
+<a href="#" class="arrow left-arrow" id="prev">&#8249; </a>
+  <div class="gallery">
+    <ul id="images">
+      <li><img src="http://js.cx/carousel/1.png"></li>
+      <li><img src="http://js.cx/carousel/2.png"></li>
+      <li><img src="http://js.cx/carousel/3.png"></li>
+      <li><img src="http://js.cx/carousel/4.png"></li>
+      <li><img src="http://js.cx/carousel/5.png"></li>
+      <li><img src="http://js.cx/carousel/6.png"></li>
+      <li><img src="http://js.cx/carousel/7.png"></li>
+      <li><img src="http://js.cx/carousel/8.png"></li>
+      <li><img src="http://js.cx/carousel/9.png"></li>
+      <li><img src="http://js.cx/carousel/10.png"></li>
+    </ul>
+  </div>
+<a href="#" class="arrow right-arrow" id="next">&#8250; </a>
+</div>
+
+<script>
+
+/* этот код помечает картинки, для удобства разработки */
+var lis = document.getElementsByTagName('li');
+for(var i=0; i<lis.length; i++) {
+  lis[i].style.position='relative';
+  var span = document.createElement('span');
+  span.style.cssText='position:absolute;left:0;top:0';
+  span.innerHTML = i+1;
+  lis[i].appendChild(span);
+}
+
+/* конфигурация */
+var width = 130; // ширина изображения
+var count = 3; // количество изображений
+
+var ul = document.getElementById('images');
+var imgs = ul.getElementsByTagName('li');
+
+var position = 0; // текущий сдвиг влево
+
+document.getElementById('prev').onclick = function() {
+  if (position >= 0) return false; // уже прокручено до конца влево
+
+  // последнее передвижение влево может быть не на 3, а на 2 или 1 элемент
+  var newPosition = Math.min(position + width*count, 0);
+  animateProp({
+    elem: ul,
+    prop: "marginLeft",
+    start: position,
+    end: newPosition,
+    duration: 250,
+    delay: 20
+  });
+  position = newPosition;
+  return false;
+}
+
+document.getElementById('next').onclick = function() {
+  if (position <= -width*(imgs.length-count)) return false; // уже прокручено до конца вправо
+
+  // последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент
+  var newPosition = Math.max(position-width*count, -width*(imgs.length-count));
+
+  animateProp({
+    elem: ul,
+    prop: "marginLeft",
+    start: position,
+    end: newPosition,
+    duration: 250,
+    delay: 20
+  });
+  position = newPosition;
+  return false;
+};
+
+</script>
+</body>
+</html>
diff --git a/3-more/2-animation/1-js-animation/1-carousel-animated/solution.view/style.css b/3-more/2-animation/1-js-animation/1-carousel-animated/solution.view/style.css
new file mode 100755
index 00000000..d430e776
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/1-carousel-animated/solution.view/style.css
@@ -0,0 +1,52 @@
+body {
+  padding: 10px
+}
+
+.carousel {
+  position: relative;
+  width: 398px;
+  padding: 10px 40px;
+  border: 1px solid #CCC;
+  border-radius: 15px;
+  background: #eee;
+}
+.carousel img {
+  width: 130px;
+  height: 130px;
+  display: block; /* если не поставить block, в ряде браузеров будет inline -> лишнее пространтсво вокруг элементов */
+}
+.carousel .arrow {
+  position: absolute;
+  top: 57px;
+  padding: 3px 8px 8px 9px;
+  background: #ddd;
+  border-radius: 15px;
+  font-size: 24px;
+  color: #444;
+  text-decoration: none;
+}
+
+.carousel .arrow:hover {
+  background: #ccc;
+}
+.carousel .left-arrow {
+  left: 7px;
+}
+.carousel .right-arrow {
+  right: 7px;
+}
+.gallery {
+  width: 390px;
+  overflow: hidden;
+}
+.gallery ul {
+  height: 130px;
+  width: 9999px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gallery ul li {
+	float: left;
+}
diff --git a/3-more/2-animation/1-js-animation/1-carousel-animated/task.md b/3-more/2-animation/1-js-animation/1-carousel-animated/task.md
new file mode 100644
index 00000000..0442a370
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/1-carousel-animated/task.md
@@ -0,0 +1,10 @@
+# Анимируйте карусель
+
+[importance 5]
+
+Возьмите решение задачи [](/task/carousel) и сделайте передвижение карусели плавным, анимированым.
+
+Подключите для этого файл <a href="/files/tutorial/js/animate.js">animate.js</a>.
+
+Результат:
+[iframe height=220 src="solution"]
\ No newline at end of file
diff --git a/3-more/2-animation/1-js-animation/2-animate-logo/solution.md b/3-more/2-animation/1-js-animation/2-animate-logo/solution.md
new file mode 100644
index 00000000..b4953291
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/2-animate-logo/solution.md
@@ -0,0 +1,5 @@
+Анимируйте одновременно свойства `left/top` и `width/height`.
+
+Чтобы в процессе анимации таблица сохраняла геометрию -- создайте на месте `IMG` временный `DIV` фиксированного размера и переместите `IMG` внутрь него. После анимации можно вернуть как было.
+
+[edit src="solution"]Открыть решение в песочнице[/edit]
\ No newline at end of file
diff --git a/3-more/2-animation/1-js-animation/2-animate-logo/solution.view/animate.js b/3-more/2-animation/1-js-animation/2-animate-logo/solution.view/animate.js
new file mode 100755
index 00000000..51bb38c6
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/2-animate-logo/solution.view/animate.js
@@ -0,0 +1,92 @@
+/**
+ Docs: http://learn.javascript.ru/tutorial/lib
+*/
+
+function animate(opts) {
+
+  var start = new Date;
+  var delta = opts.delta || linear;
+
+  var timer = setInterval(function() {
+    var progress = (new Date - start) / opts.duration;
+
+    if (progress > 1) progress = 1;
+
+    opts.step( delta(progress) );
+
+    if (progress == 1) {
+      clearInterval(timer);
+      opts.complete && opts.complete();
+    }
+  }, opts.delay || 13);
+
+  return timer;
+}
+
+/**
+ Анимация стиля opts.prop у элемента opts.elem
+ от opts.from до opts.to продолжительностью opts.duration
+ в конце opts.complete
+
+ Например: animateProp({ elem: ..., prop: 'height', start:0, end: 100, duration: 1000 })
+*/
+function animateProp(opts) {
+  var start = opts.start, end = opts.end, prop = opts.prop;
+
+  opts.step = function(delta) {
+    var value = Math.round(start + (end - start)*delta);
+    opts.elem.style[prop] = value + 'px';
+  }
+  return animate(opts);
+}
+
+// ------------------ Delta ------------------
+
+function elastic(progress) {
+  return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*1.5/3*progress);
+}
+
+function linear(progress) {
+  return progress;
+}
+
+function quad(progress) {
+  return Math.pow(progress, 2);
+}
+
+function quint(progress) {
+  return Math.pow(progress, 5);
+}
+
+function circ(progress) {
+  return 1 - Math.sin(Math.acos(progress));
+}
+
+function back(progress) {
+  return Math.pow(progress, 2) * ((1.5 + 1) * progress - 1.5);
+}
+
+
+function bounce(progress) {
+  for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
+    if (progress >= (7 - 4 * a) / 11) {
+      return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
+    }
+  }
+}
+
+function makeEaseInOut(delta) {
+  return function(progress) {
+    if (progress < .5)
+      return delta(2*progress) / 2;
+    else
+      return (2 - delta(2*(1-progress))) / 2;
+  }
+}
+
+
+function makeEaseOut(delta) {
+  return function(progress) {
+    return 1 - delta(1 - progress);
+  }
+}
diff --git a/3-more/2-animation/1-js-animation/2-animate-logo/solution.view/index.html b/3-more/2-animation/1-js-animation/2-animate-logo/solution.view/index.html
new file mode 100755
index 00000000..e27697d8
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/2-animate-logo/solution.view/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="animate.js"></script>
+  <style>img { display: block; cursor: pointer; }</style>
+</head>
+<body>
+
+Кликните картинку для анимации. Расположение элементов при анимации не должно меняться!
+
+<table>
+<tr>
+<td>Догнать</td>
+<td><img onclick="growIn(this)" src="http://js.cx/clipart/flyjet.jpg" width="400" height="240">
+</td>
+<td>..и перегнать!</td>
+</tr>
+</table>
+
+<script>
+function growIn(img) {
+  var process = arguments.callee;
+  if (process.busy) return;
+  process.busy = true;
+
+  // переместить изображение в placeholder постоянного размера
+  var placeholder = document.createElement('div');
+  placeholder.style.width = img.offsetWidth + 'px';
+  placeholder.style.height = img.offsetHeight + 'px';
+  img.parentNode.replaceChild(placeholder, img);
+  placeholder.appendChild(img);
+
+  img.style.position='relative';
+
+  animateProp({ elem: img, prop: 'height', start:0, end: img.offsetHeight, duration: 3000 });
+  animateProp({ elem: img, prop: 'width', start:0, end: img.offsetWidth, duration: 3000 });
+  animateProp({ elem: img, prop: 'left', start:img.offsetWidth/2, end: 0, duration: 3000 });
+  animateProp({ elem: img, prop: 'top', start:img.offsetHeight/2, end: 0, duration: 3000, complete: done});
+
+  function done() {
+    placeholder.parentNode.replaceChild(img, placeholder);
+    img.style.position = '';
+    process.busy = false;
+  }
+
+}
+
+</script>
+
+</body>
+</html>
diff --git a/3-more/2-animation/1-js-animation/2-animate-logo/source.view/animate.js b/3-more/2-animation/1-js-animation/2-animate-logo/source.view/animate.js
new file mode 100755
index 00000000..51bb38c6
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/2-animate-logo/source.view/animate.js
@@ -0,0 +1,92 @@
+/**
+ Docs: http://learn.javascript.ru/tutorial/lib
+*/
+
+function animate(opts) {
+
+  var start = new Date;
+  var delta = opts.delta || linear;
+
+  var timer = setInterval(function() {
+    var progress = (new Date - start) / opts.duration;
+
+    if (progress > 1) progress = 1;
+
+    opts.step( delta(progress) );
+
+    if (progress == 1) {
+      clearInterval(timer);
+      opts.complete && opts.complete();
+    }
+  }, opts.delay || 13);
+
+  return timer;
+}
+
+/**
+ Анимация стиля opts.prop у элемента opts.elem
+ от opts.from до opts.to продолжительностью opts.duration
+ в конце opts.complete
+
+ Например: animateProp({ elem: ..., prop: 'height', start:0, end: 100, duration: 1000 })
+*/
+function animateProp(opts) {
+  var start = opts.start, end = opts.end, prop = opts.prop;
+
+  opts.step = function(delta) {
+    var value = Math.round(start + (end - start)*delta);
+    opts.elem.style[prop] = value + 'px';
+  }
+  return animate(opts);
+}
+
+// ------------------ Delta ------------------
+
+function elastic(progress) {
+  return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*1.5/3*progress);
+}
+
+function linear(progress) {
+  return progress;
+}
+
+function quad(progress) {
+  return Math.pow(progress, 2);
+}
+
+function quint(progress) {
+  return Math.pow(progress, 5);
+}
+
+function circ(progress) {
+  return 1 - Math.sin(Math.acos(progress));
+}
+
+function back(progress) {
+  return Math.pow(progress, 2) * ((1.5 + 1) * progress - 1.5);
+}
+
+
+function bounce(progress) {
+  for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
+    if (progress >= (7 - 4 * a) / 11) {
+      return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
+    }
+  }
+}
+
+function makeEaseInOut(delta) {
+  return function(progress) {
+    if (progress < .5)
+      return delta(2*progress) / 2;
+    else
+      return (2 - delta(2*(1-progress))) / 2;
+  }
+}
+
+
+function makeEaseOut(delta) {
+  return function(progress) {
+    return 1 - delta(1 - progress);
+  }
+}
diff --git a/3-more/2-animation/1-js-animation/2-animate-logo/source.view/index.html b/3-more/2-animation/1-js-animation/2-animate-logo/source.view/index.html
new file mode 100755
index 00000000..41a246e6
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/2-animate-logo/source.view/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="animate.js"></script>
+  <style>img { display: block; cursor: pointer; }</style>
+</head>
+<body>
+
+Кликните картинку для анимации. Расположение элементов при анимации не должно меняться!
+<table>
+<tr>
+<td>Догнать</td>
+<td><img onclick="growIn(this)" src="http://js.cx/clipart/flyjet.jpg" width="400" height="240">
+</td>
+<td>..и перегнать!</td>
+</tr>
+</table>
+
+<b>В процессе анимации повторные нажатия на изображение игнорируются.</b>
+
+<script>
+function growIn(img) {
+  /* ваш код */
+}
+</script>
+
+</body>
+</html>
+
+
diff --git a/3-more/2-animation/1-js-animation/2-animate-logo/task.md b/3-more/2-animation/1-js-animation/2-animate-logo/task.md
new file mode 100644
index 00000000..0b0c434f
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/2-animate-logo/task.md
@@ -0,0 +1,12 @@
+# Анимировать лого
+
+[importance 5]
+
+Реализуйте анимацию, как в демке ниже (клик на картинку):
+[iframe src="solution" border=1]
+
+Продолжительность анимации: 3 секунды.
+
+В процессе анимации пусть повторные клики на изображение игнорируются.
+
+[edit src="source" task/]
diff --git a/3-more/2-animation/1-js-animation/3-animate-ball/solution.md b/3-more/2-animation/1-js-animation/3-animate-ball/solution.md
new file mode 100644
index 00000000..05b9bbe1
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/3-animate-ball/solution.md
@@ -0,0 +1,28 @@
+В HTML/CSS, падение мяча можно отобразить изменением свойства `ball.style.top` от 0 и до значения, соответствующего нижнему положению.
+
+Нижняя граница элемента `field`, в котором находится мяч, имеет значение  `field.clientHeight`. Но свойство `top` относится к верху мяча, поэтому оно меняется до `field.clientHeight - ball.clientHeight`. 
+
+Для создания анимационного эффекта лучше всего подойдет функция `bounce` в режиме `easeOut`.
+
+Следующий код даст нам нужный результат:
+
+```js
+var img = document.getElementById('ball');
+var field = document.getElementById('field');
+img.onclick = function() {
+  var from = 0;
+  var to = field.clientHeight - img.clientHeight;
+  animate({
+    delay: 20,
+    duration: 1000,
+*!*
+    delta: makeEaseOut(bounce), 
+    step: function(delta) {
+      img.style.top = to*delta + 'px'
+    }
+*/!*
+  });
+}
+```
+
+[edit src="solution"]Полное решение[/edit]
\ No newline at end of file
diff --git a/3-more/2-animation/1-js-animation/3-animate-ball/solution.view/animate.js b/3-more/2-animation/1-js-animation/3-animate-ball/solution.view/animate.js
new file mode 100755
index 00000000..12ae14e3
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/3-animate-ball/solution.view/animate.js
@@ -0,0 +1,91 @@
+/**
+ Docs: http://learn.javascript.ru/tutorial/lib
+*/
+
+function animate(opts) {
+
+  var start = new Date;
+  var delta = opts.delta || linear;
+
+  var timer = setInterval(function() {
+    var progress = (new Date - start) / opts.duration;
+
+    if (progress > 1) progress = 1;
+
+    opts.step( delta(progress) );
+
+    if (progress == 1) {
+      clearInterval(timer);
+      opts.complete && opts.complete();
+    }
+  }, opts.delay || 13);
+
+  return timer;
+}
+
+/**
+ Анимация стиля opts.prop у элемента opts.elem
+ от opts.from до opts.to продолжительностью opts.duration
+ в конце opts.complete
+
+ Например: animateProp({ elem: ..., prop: 'height', from:0, to: 100, duration: 1000 })
+*/
+function animateProp(opts) {
+  var start = opts.start, end = opts.end, prop = opts.prop;
+
+  opts.step = function(delta) {
+    opts.elem.style[prop] = Math.round(start + (start - end)*delta) + 'px';
+  }
+  return animate(opts);
+}
+
+// ------------------ Delta ------------------
+
+function elastic(progress) {
+  return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*1.5/3*progress)
+}
+
+function linear(progress) {
+  return progress
+}
+
+function quad(progress) {
+  return Math.pow(progress, 2)
+}
+
+function quint(progress) {
+  return Math.pow(progress, 5)
+}
+
+function circ(progress) {
+  return 1 - Math.sin(Math.acos(progress))
+}
+
+function back(progress) {
+  return Math.pow(progress, 2) * ((1.5 + 1) * progress - 1.5)
+}
+
+
+function bounce(progress) {
+  for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
+    if (progress >= (7 - 4 * a) / 11) {
+      return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
+    }
+  }
+}
+
+function makeEaseInOut(delta) {
+  return function(progress) {
+    if (progress < .5)
+      return delta(2*progress) / 2
+    else
+      return (2 - delta(2*(1-progress))) / 2
+  }
+}
+
+
+function makeEaseOut(delta) {
+  return function(progress) {
+    return 1 - delta(1 - progress)
+  }
+}
diff --git a/3-more/2-animation/1-js-animation/3-animate-ball/solution.view/index.html b/3-more/2-animation/1-js-animation/3-animate-ball/solution.view/index.html
new file mode 100755
index 00000000..92f12472
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/3-animate-ball/solution.view/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<script src="animate.js"></script>
+<style>
+  #field {
+    height: 200px;
+    border-bottom: 3px black groove;
+    position: relative;
+  }
+
+  #ball {
+    position: absolute;
+  }
+</style>
+</head>
+<body>
+
+
+<div id="field">
+<img src="http://js.cx/clipart/ball.gif" width="40" height="40" id="ball">
+</div>
+
+<script>
+
+
+var img = document.getElementById('ball');
+
+img.onclick = function() {
+
+  var to = document.getElementById('field').clientHeight - img.clientHeight;
+
+  animate({
+    delay: 20,
+    duration: 1000,
+    delta: makeEaseOut(bounce),
+    step: function(delta) {
+      img.style.top = to*delta + 'px'
+    }
+  });
+
+
+}
+
+</script>
+
+
+
+</body>
+</html>
diff --git a/3-more/2-animation/1-js-animation/3-animate-ball/source.view/animate.js b/3-more/2-animation/1-js-animation/3-animate-ball/source.view/animate.js
new file mode 100755
index 00000000..12ae14e3
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/3-animate-ball/source.view/animate.js
@@ -0,0 +1,91 @@
+/**
+ Docs: http://learn.javascript.ru/tutorial/lib
+*/
+
+function animate(opts) {
+
+  var start = new Date;
+  var delta = opts.delta || linear;
+
+  var timer = setInterval(function() {
+    var progress = (new Date - start) / opts.duration;
+
+    if (progress > 1) progress = 1;
+
+    opts.step( delta(progress) );
+
+    if (progress == 1) {
+      clearInterval(timer);
+      opts.complete && opts.complete();
+    }
+  }, opts.delay || 13);
+
+  return timer;
+}
+
+/**
+ Анимация стиля opts.prop у элемента opts.elem
+ от opts.from до opts.to продолжительностью opts.duration
+ в конце opts.complete
+
+ Например: animateProp({ elem: ..., prop: 'height', from:0, to: 100, duration: 1000 })
+*/
+function animateProp(opts) {
+  var start = opts.start, end = opts.end, prop = opts.prop;
+
+  opts.step = function(delta) {
+    opts.elem.style[prop] = Math.round(start + (start - end)*delta) + 'px';
+  }
+  return animate(opts);
+}
+
+// ------------------ Delta ------------------
+
+function elastic(progress) {
+  return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*1.5/3*progress)
+}
+
+function linear(progress) {
+  return progress
+}
+
+function quad(progress) {
+  return Math.pow(progress, 2)
+}
+
+function quint(progress) {
+  return Math.pow(progress, 5)
+}
+
+function circ(progress) {
+  return 1 - Math.sin(Math.acos(progress))
+}
+
+function back(progress) {
+  return Math.pow(progress, 2) * ((1.5 + 1) * progress - 1.5)
+}
+
+
+function bounce(progress) {
+  for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
+    if (progress >= (7 - 4 * a) / 11) {
+      return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
+    }
+  }
+}
+
+function makeEaseInOut(delta) {
+  return function(progress) {
+    if (progress < .5)
+      return delta(2*progress) / 2
+    else
+      return (2 - delta(2*(1-progress))) / 2
+  }
+}
+
+
+function makeEaseOut(delta) {
+  return function(progress) {
+    return 1 - delta(1 - progress)
+  }
+}
diff --git a/3-more/2-animation/1-js-animation/3-animate-ball/source.view/index.html b/3-more/2-animation/1-js-animation/3-animate-ball/source.view/index.html
new file mode 100755
index 00000000..cc74a8f9
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/3-animate-ball/source.view/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<script src="animate.js"></script>
+<style>
+  #field {
+    height: 200px;
+    border-bottom: 1px solid black;
+  }
+</style>
+</head>
+<body>
+
+
+<div id="field">
+<img src="http://js.cx/clipart/ball.gif" width="40" height="40" id="ball">
+</div>
+
+
+
+</body>
+</html>
diff --git a/3-more/2-animation/1-js-animation/3-animate-ball/task.md b/3-more/2-animation/1-js-animation/3-animate-ball/task.md
new file mode 100644
index 00000000..2c736213
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/3-animate-ball/task.md
@@ -0,0 +1,10 @@
+# Анимируйте мяч
+
+[importance 5]
+
+Сделайте так, чтобы мяч подпрыгивал. Кликните по мячу, чтобы увидеть, как это должно выглядеть. 
+[iframe height=250 src="solution"]
+
+В исходный документ включена функция  [](#animate) и набор `delta`-функций.
+
+[edit src="source" task/]
diff --git a/3-more/2-animation/1-js-animation/4-animate-ball-hops/solution.md b/3-more/2-animation/1-js-animation/4-animate-ball-hops/solution.md
new file mode 100644
index 00000000..ffe2ef02
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/4-animate-ball-hops/solution.md
@@ -0,0 +1,37 @@
+Посмотрите задачу [](/task/animate-ball). Там создаётся подпрыгивающий мяч. А для решения этой задачи нам нужно добавить еще одну анимацию для `elem.style.left`.
+
+Горизонтальная координата меняется по другому закону, нежели вертикальная. Она не "подпрыгивает", а постоянно увеличивается, постепенно сдвигая мяч вправо.
+
+Мы могли бы применить для неё `linear`, но тогда горизонтальное движение будет отставать от скачков мяча. Более красиво будет что-то типа `makeEaseOut(quad)`.
+
+Код:
+
+```js
+img.onclick = function() {
+
+  var height  = document.getElementById('field').clientHeight - img.clientHeight
+  var width  = 100
+  
+  animate({
+    delay: 20,
+    duration: 1000,
+    delta: makeEaseOut(bounce), 
+    step: function(delta) {
+      img.style.top = height*delta + 'px'
+    }
+  });
+  
+*!*
+  animate({
+    delay: 20,
+    duration: 1000, 
+    delta: makeEaseOut(quad),
+    step: function(delta) {
+      img.style.left = width*delta  + "px"
+    }
+  }); 
+*/!*
+}
+```
+
+[edit src="solution"]Полное решение[/edit]
\ No newline at end of file
diff --git a/3-more/2-animation/1-js-animation/4-animate-ball-hops/solution.view/animate.js b/3-more/2-animation/1-js-animation/4-animate-ball-hops/solution.view/animate.js
new file mode 100755
index 00000000..12ae14e3
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/4-animate-ball-hops/solution.view/animate.js
@@ -0,0 +1,91 @@
+/**
+ Docs: http://learn.javascript.ru/tutorial/lib
+*/
+
+function animate(opts) {
+
+  var start = new Date;
+  var delta = opts.delta || linear;
+
+  var timer = setInterval(function() {
+    var progress = (new Date - start) / opts.duration;
+
+    if (progress > 1) progress = 1;
+
+    opts.step( delta(progress) );
+
+    if (progress == 1) {
+      clearInterval(timer);
+      opts.complete && opts.complete();
+    }
+  }, opts.delay || 13);
+
+  return timer;
+}
+
+/**
+ Анимация стиля opts.prop у элемента opts.elem
+ от opts.from до opts.to продолжительностью opts.duration
+ в конце opts.complete
+
+ Например: animateProp({ elem: ..., prop: 'height', from:0, to: 100, duration: 1000 })
+*/
+function animateProp(opts) {
+  var start = opts.start, end = opts.end, prop = opts.prop;
+
+  opts.step = function(delta) {
+    opts.elem.style[prop] = Math.round(start + (start - end)*delta) + 'px';
+  }
+  return animate(opts);
+}
+
+// ------------------ Delta ------------------
+
+function elastic(progress) {
+  return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*1.5/3*progress)
+}
+
+function linear(progress) {
+  return progress
+}
+
+function quad(progress) {
+  return Math.pow(progress, 2)
+}
+
+function quint(progress) {
+  return Math.pow(progress, 5)
+}
+
+function circ(progress) {
+  return 1 - Math.sin(Math.acos(progress))
+}
+
+function back(progress) {
+  return Math.pow(progress, 2) * ((1.5 + 1) * progress - 1.5)
+}
+
+
+function bounce(progress) {
+  for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
+    if (progress >= (7 - 4 * a) / 11) {
+      return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
+    }
+  }
+}
+
+function makeEaseInOut(delta) {
+  return function(progress) {
+    if (progress < .5)
+      return delta(2*progress) / 2
+    else
+      return (2 - delta(2*(1-progress))) / 2
+  }
+}
+
+
+function makeEaseOut(delta) {
+  return function(progress) {
+    return 1 - delta(1 - progress)
+  }
+}
diff --git a/3-more/2-animation/1-js-animation/4-animate-ball-hops/solution.view/index.html b/3-more/2-animation/1-js-animation/4-animate-ball-hops/solution.view/index.html
new file mode 100755
index 00000000..252e1fdb
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/4-animate-ball-hops/solution.view/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<script src="animate.js"></script>
+<style>
+  #field {
+    height: 200px;
+    border-bottom: 3px black groove;
+    position: relative;
+  }
+
+  #ball {
+    position: absolute;
+  }
+</style>
+</head>
+<body>
+
+
+<div id="field">
+<img src="http://js.cx/clipart/ball.gif" width="40" height="40" id="ball">
+</div>
+
+<script>
+
+
+var img = document.getElementById('ball');
+
+img.onclick = function() {
+
+  var height  = document.getElementById('field').clientHeight - img.clientHeight;
+  var width  = 100;
+
+  animate({
+    delay: 20,
+    duration: 1000,
+    delta: makeEaseOut(bounce),
+    step: function(delta) {
+      img.style.top = height*delta + 'px'
+    }
+  });
+
+  animate({
+    delay: 20,
+    duration: 1000,
+    delta: makeEaseOut(quad),
+    step: function(delta) {
+      img.style.left = width*delta  + "px"
+    }
+  });
+}
+
+</script>
+
+
+
+</body>
+</html>
diff --git a/3-more/2-animation/1-js-animation/4-animate-ball-hops/source.view/animate.js b/3-more/2-animation/1-js-animation/4-animate-ball-hops/source.view/animate.js
new file mode 100755
index 00000000..12ae14e3
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/4-animate-ball-hops/source.view/animate.js
@@ -0,0 +1,91 @@
+/**
+ Docs: http://learn.javascript.ru/tutorial/lib
+*/
+
+function animate(opts) {
+
+  var start = new Date;
+  var delta = opts.delta || linear;
+
+  var timer = setInterval(function() {
+    var progress = (new Date - start) / opts.duration;
+
+    if (progress > 1) progress = 1;
+
+    opts.step( delta(progress) );
+
+    if (progress == 1) {
+      clearInterval(timer);
+      opts.complete && opts.complete();
+    }
+  }, opts.delay || 13);
+
+  return timer;
+}
+
+/**
+ Анимация стиля opts.prop у элемента opts.elem
+ от opts.from до opts.to продолжительностью opts.duration
+ в конце opts.complete
+
+ Например: animateProp({ elem: ..., prop: 'height', from:0, to: 100, duration: 1000 })
+*/
+function animateProp(opts) {
+  var start = opts.start, end = opts.end, prop = opts.prop;
+
+  opts.step = function(delta) {
+    opts.elem.style[prop] = Math.round(start + (start - end)*delta) + 'px';
+  }
+  return animate(opts);
+}
+
+// ------------------ Delta ------------------
+
+function elastic(progress) {
+  return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*1.5/3*progress)
+}
+
+function linear(progress) {
+  return progress
+}
+
+function quad(progress) {
+  return Math.pow(progress, 2)
+}
+
+function quint(progress) {
+  return Math.pow(progress, 5)
+}
+
+function circ(progress) {
+  return 1 - Math.sin(Math.acos(progress))
+}
+
+function back(progress) {
+  return Math.pow(progress, 2) * ((1.5 + 1) * progress - 1.5)
+}
+
+
+function bounce(progress) {
+  for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
+    if (progress >= (7 - 4 * a) / 11) {
+      return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
+    }
+  }
+}
+
+function makeEaseInOut(delta) {
+  return function(progress) {
+    if (progress < .5)
+      return delta(2*progress) / 2
+    else
+      return (2 - delta(2*(1-progress))) / 2
+  }
+}
+
+
+function makeEaseOut(delta) {
+  return function(progress) {
+    return 1 - delta(1 - progress)
+  }
+}
diff --git a/3-more/2-animation/1-js-animation/4-animate-ball-hops/source.view/index.html b/3-more/2-animation/1-js-animation/4-animate-ball-hops/source.view/index.html
new file mode 100755
index 00000000..cc74a8f9
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/4-animate-ball-hops/source.view/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<script src="animate.js"></script>
+<style>
+  #field {
+    height: 200px;
+    border-bottom: 1px solid black;
+  }
+</style>
+</head>
+<body>
+
+
+<div id="field">
+<img src="http://js.cx/clipart/ball.gif" width="40" height="40" id="ball">
+</div>
+
+
+
+</body>
+</html>
diff --git a/3-more/2-animation/1-js-animation/4-animate-ball-hops/task.md b/3-more/2-animation/1-js-animation/4-animate-ball-hops/task.md
new file mode 100644
index 00000000..7663713d
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/4-animate-ball-hops/task.md
@@ -0,0 +1,11 @@
+# Анимируйте падение мяча с отскоками вправо
+
+[importance 5]
+
+Заставьте мяч падать вправо. Кликните, чтобы увидеть в действии. 
+[iframe height=250 src="solution"]
+
+Напишите код, который будет анимировать мяч. Дистанция вправо составляет `100px`.
+
+В исходный документ включена функция  [](#animate) и набор `delta`-функций.
+[edit src="source" task/]
diff --git a/3-more/2-animation/1-js-animation/article.md b/3-more/2-animation/1-js-animation/article.md
new file mode 100644
index 00000000..2e3fd1ab
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/article.md
@@ -0,0 +1,696 @@
+# JS-Анимация 
+
+В этой главе мы рассмотрим устройство браузерной анимации. Она примерно одинаково реализована во всех фреймворках.
+
+Понимание этого позволит разобраться в происходящем, если что-то вдруг не работает, а также написать сложную анимацию самому.
+
+Анимация при помощи JavaScript и современная CSS-анимация дополняют друг друга.
+[cut]
+
+## Основы анимации   
+
+С точки зрения HTML/CSS, анимация -- это постепенное изменение стиля  DOM-элемента. Например, увеличение координаты `style.left` от `0px` до `100px` сдвигает элемент.
+
+Код, который производит изменение, вызывается таймером. Интервал таймера очень мал и поэтому анимация выглядит плавной. Это тот же принцип, что и в кино: для непрерывной анимации достаточно 24 или больше вызовов таймера в секунду.
+
+Псевдо-код для анимации выглядит так:
+
+```js
+var timer = setInterval(function() {
+    показать новый кадр 
+    if (время вышло) clearInterval(timer);     
+}, 10)
+```
+
+Задержка между кадрами в данном случае составляет `10 ms`, что означает `100` кадров в секунду. 
+
+В большинстве фреймворков, задержка по умолчанию составляет `10`-`15` мс. Меньшая задержка делает анимацию более плавной, но только в том случае, если браузер достаточно быстр, чтобы анимировать каждый шаг вовремя. 
+
+Если анимация требует большого количества вычислений, то нагрузка процессора может доходить до 100% и вызывать ощутимые "тормоза" в работе браузера. В 
+таком случае, задержку можно увеличить. Например, 40мс дадут нам 25 кадров в секунду, что очень близко к кинематографическому стандарту в 24 кадра.
+
+[smart header="`setInterval` вместо `setTimeout`"]
+Мы используем `setInterval`, а не рекурсивный `setTimeout`, потому что нам нужен *один кадр за промежуток времени*, а не *фиксированная задержка между кадрами*</b>. 
+В статье [](/setTimeout-setInterval) описана разница между `setInterval` и рекурсивным `setTimeout`.
+[/smart]
+
+
+### Пример
+
+Например, передвинем элемент путём изменения `element.style.left` от 0 до 100px. Изменение происходит на 1px каждые 10мс.
+
+```html
+<script>
+function move(elem) {
+
+  var left = 0; // начальное значение
+
+  function frame() { // функция для отрисовки
+    left++;
+    elem.style.left = left + 'px' 
+
+    if (left == 100) { 
+      clearInterval(timer); // завершить анимацию
+    }
+  }
+
+  var timer = setInterval(frame, 10) // рисовать каждые 10мс
+}
+</script>
+
+<div onclick="move(this.children[0])" class="example_path">
+  <div class="example_block"></div>
+</div>
+```
+
+Кликните для демонстрации:
+[iframe height=60 src="move100" link]
+
+
+## Структура анимации  
+
+У анимации есть три основных параметра:
+<dl>
+<dt>`delay`</dt>
+<dd>Время между кадрами (в миллисекундах, т.е. 1/1000 секунды). Например, 10мс.</dd>
+<dt>`duration`</dt>
+<dd>Общее время, которое должна длиться анимация, в мс. Например, 1000мс.</dd>
+<dt>`step(progress)`</dt>
+<dd>Функция **`step(progress)`** занимается отрисовкой состояния анимации, соответствующего времени `progress`.</dd>
+</dl>
+
+Каждый кадр выполняется, сколько времени прошло: `progress = (now-start)/duration`. Значение `progress` меняется от `0` в начале анимации до `1` в конце. Так как вычисления с дробными числами не всегда точны, то в конце оно может быть даже немного больше 1. В этом случае мы уменьшаем его до 1 и завершаем анимацию.
+
+Создадим функцию `animate`, которая получает объект со свойствами `delay, duration, step` и выполняет анимацию.
+
+```js
+function animate(opts) {
+  
+  var start = new Date; // сохранить время начала 
+
+  var timer = setInterval(function() {
+
+    // вычислить сколько времени прошло
+    var progress = (new Date - start) / opts.duration;
+    if (progress > 1) progress = 1;
+
+    // отрисовать анимацию
+    opts.step(progress);
+    
+    if (progress == 1) clearInterval(timer); // конец :)
+     
+  }, opts.delay || 10); // по умолчанию кадр каждые 10мс
+
+}
+```
+
+### Пример
+
+
+Анимируем ширину элемента `width` от `0` до `100%`, используя нашу функцию:
+
+```js
+function stretch(elem) {
+  animate({ 
+    duration: 1000, // время на анимацию 1000 мс
+    step: function(progress) {
+      elem.style.width = progress*100 + '%';
+    }
+  });
+}
+```
+
+Кликните для демонстрации:
+[iframe height=60 src="width" link]
+
+
+Функция `step` может получать дополнительные параметры анимации из `opts` (через `this`) или через замыкание.
+
+Следующий пример использует параметр `to` из замыкания для анимации бегунка:
+
+```js
+function move(elem) {
+  var to = 500;
+
+  animate({
+    duration: 1000,
+    step: function(progress) {
+      // progress меняется от 0 до 1, left от 0px до 500px
+      elem.style.left = to*progress + "px";
+    }
+  });
+
+}
+```
+
+Кликните для демонстрации:
+[iframe height=60 src="move" link]
+
+## Временная функция delta   
+
+В сложных анимациях свойства изменяются по определённому закону. Зачастую, он гораздо сложнее, чем простое равномерное возрастание/убывание.
+
+Для того, чтобы можно было задать более хитрые виды анимации, в алгоритм добавляется дополнительная функция `delta(progress)`, которая вычисляет текущее состояние анимации от 0 до 1, а `step` использует её значение вместо `progress`.
+
+В `animate` изменится всего одна строчка. Было:
+
+```js
+...
+opts.step(progress);
+...
+```
+
+Станет:
+
+```js
+...
+opts.step( opts.delta(progress) );
+...
+```
+
+
+
+```js
+//+ hide="Раскрыть код animate с delta"
+function animate(opts) {
+
+  var start = new Date; 
+
+  var timer = setInterval(function() {
+
+    var progress = (new Date - start) / opts.duration;
+    if (progress > 1) progress = 1;
+
+    opts.step( opts.delta(progress) );
+
+    if (progress == 1) clearInterval(timer);
+
+  }, opts.delay || 10);
+
+}
+```
+
+Такое небольшое изменение добавляет много гибкости. Функция `step` занимается всего лишь отрисовкой текущего состояния анимации, а само состояние по времени определяется в `delta`.
+
+Разные значения `delta` заставляют скорость анимации, ускорение и другие параметры вести себя абсолютно по-разному.
+
+Рассмотрим примеры анимации движения с использованием различных `delta`.
+
+### Линейная delta   
+
+Самая простая функция `delta` -- это та, которая просто возвращает `progress`.
+
+```js
+function linear(progress) {
+  return progress;
+}
+```
+
+То есть, как будто никакой `delta` нет. Состояние анимации (которое при передвижении отображается как координата `left`) зависит от времени линейно.
+
+
+**График:**
+<img src="linear.png">
+
+**По горизонтали -  `progress`, а по вертикали - `delta(progress)`.**
+
+Пример:
+
+```html
+<div onclick="move(this.children[0], linear)" class="example_path">
+	<div class="example_block"></div>
+</div>
+```
+
+Здесь и далее функция `move` будет такой:
+
+```js
+function move(elem, delta, duration) {
+  var to = 500;
+  
+  animate({
+    delay: 10,
+    duration: duration || 1000, 
+    delta: delta,
+    step: function(delta) {
+      elem.style.left = to*delta + "px"    
+    }
+  });
+  
+}
+```
+
+То есть, она будет перемещать бегунок, изменяя `left` по закону `delta`, за `duration` мс (по умолчанию 1000мс).
+
+Кликните для демонстрации линейной `delta`:
+<div onclick="move(this.children[0], linear)" class="example_path">
+	<div class="example_block"></div>
+</div>
+
+
+### В степени n   
+
+Вот еще один простой случай. `delta` - это `progress` в `n-й` степени . Частные случаи - квадратичная, кубическая функции и т.д.
+
+Для квадратичной функции:
+
+```js
+function quad(progress) {
+  return Math.pow(progress, 2)
+}
+```
+
+**График квадратичной функции:**
+
+<img src="quad.png">
+
+Пример для квадратичной функции (клик для просмотра):
+<div onclick="move(this.children[0], quad)" class="example_path">
+	<div class="example_block"></div>
+</div>
+
+Увеличение степени влияет на ускорение. Например, график для 5-й степени:
+
+<img src="quint.png">
+
+И пример:
+<div onclick="move(this.children[0], quint)" class="example_path">
+	<div class="example_block"></div>
+</div>
+
+**Функция `delta` описывает развитие анимации в зависимости от времени.** 
+
+В примере выше -- сначала медленно: время идёт (ось X), а состояние анимации почти не меняется (ось Y), а потом всё быстрее и быстрее. Другие графики зададут иное поведение.
+
+
+### Дуга   
+
+Функция:
+
+```js
+function circ(progress) {
+    return 1 - Math.sin(Math.acos(progress))
+}
+```
+
+**График:**
+<img src="circ.png">
+
+Пример:
+<div onclick="move(this.children[0], circ)" class="example_path">
+	<div class="example_block"></div>
+</div>
+
+
+
+### Back: стреляем из лука   
+
+Эта функция работает по принципу лука: сначала мы "натягиваем тетиву", а затем "стреляем".
+
+В отличие от предыдущих функций, эта зависит от дополнительного параметра `x`, который является "коэффициентом упругости". Он определяет расстояние, на которое "оттягивается тетива".
+
+Её код:
+
+```js
+function back(progress, x) {
+    return Math.pow(progress, 2) * ((x + 1) * progress - x)
+}
+```
+
+**График для `x = 1.5`:**
+<img src="back.png">
+
+Пример для `x = 1.5`:
+<div onclick="move(this.children[0], back)" class="example_path">
+	<div class="example_block"></div>
+</div>
+
+
+### Отскок
+
+Представьте, что мы отпускаем мяч, он падает на пол, несколько раз отскакивает и останавливается.
+
+Функция `bounce` делает то же самое, только наоборот: "подпрыгивание" начинается сразу.
+
+Эта функция немного сложнее предыдущих и использует специальные коэффициенты:
+
+```js
+function bounce(progress) {
+  for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
+    if (progress >= (7 - 4 * a) / 11) {
+      return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2)
+    }
+  }
+}
+```
+
+Код взят из MooTools.FX.Transitions. Конечно же, есть и другие реализации `bounce`.
+
+Пример:
+<div onclick="move(this.children[0], bounce, 2000)" class="example_path">
+  <div class="example_block"></div>
+</div>
+
+
+### Упругая анимация
+
+Эта функция зависит от дополнительного параметра `x`, который определяет начальный диапазон.
+
+```js
+function elastic(progress, x) {
+  return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*x/3*progress)
+}
+```
+
+**График для `x=1.5`:**
+<img src="elastic.png">
+
+Пример для `x=1.5`:
+<div onclick="move(this.children[0], elastic, 2000)" class="example_path">
+  <div class="example_block"></div>
+</div>
+
+
+## Реверсивные функции (easeIn, easeOut, easeInOut)   
+
+Обычно, JavaScript-фреймворк предоставляет несколько `delta`-функций.
+Их прямое использование называется "easeIn".
+
+**Иногда нужно показать анимацию в обратном режиме. Преобразование функции, которое даёт такой эффект, называется "easeOut"**. 
+
+
+### easeOut   
+
+В режиме "easeOut", значение delta вычисляется так:
+`deltaEaseOut(progress) = 1 - delta(1 - progress)`
+
+Например, функция `bounce` в режиме "easeOut":
+
+```js
+function bounce(progress) {
+  for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
+    if (progress >= (7 - 4 * a) / 11) {
+      return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
+    }
+  }
+}
+
+*!*
+function makeEaseOut(delta) {  // преобразовать delta 
+  return function(progress) {
+    return 1 - delta(1 - progress);
+  }
+}
+*/!*
+
+*!*var bounceEaseOut = makeEaseOut(bounce);*/!*
+```
+
+Кликните для демонстрации:
+<div onclick="move(this.children[0], makeEaseOut(bounce))" class="example_path">
+	<div class="example_block"></div>
+</div>
+
+Давайте посмотрим, как преобразование `easeOut` изменяет поведение функции:
+
+<img src="bounce-inout.png">
+
+Красным цветом обозначен <span style="color:red">easeIn</span>, а зеленым - <span style="color:#0f0">easeOut</span>.
+<ul>
+<li><span style="color:red">Обычно</span> анимируемый объект сначала медленно скачет внизу, а затем, в конце, резко достигает верха..</li>
+<li>А после <span style="color:red">easeOut</span> он сначала прыгает наверх, а затем медленно скачет внизу.</li>
+</ul>
+
+**При `easeOut` анимация развивается в обратном временном порядке.**
+
+Если есть анимационный эффект, такой как подпрыгивание -- он будет показан в конце, а не в начале (или наоборот, в начале, а не в конце).
+
+### easeInOut   
+
+А еще можно сделать так, чтобы показать эффект *и* в начале *и* в конце анимации. Соответствующее преобразование называется "easeInOut".
+
+Его код выглядит так:
+
+```js
+if (progress <= 0.5) { // первая половина анимации)
+  return delta(2 * progress) / 2;
+} else { // вторая половина
+  return (2 - delta(2 * (1 - progress))) / 2;
+}
+```
+
+Например, `easeInOut` для `bounce`:
+<div onclick="move(this.children[0], makeEaseInOut(bounce), 3000)" class="example_path">
+	<div class="example_block"></div>
+</div>
+
+*У этого примера длительность составляет 3 секунды для того, что бы хватило времени для обоих эффектов(начального и конечного).*
+
+Код, который трансформирует `delta`:
+
+```js
+function makeEaseInOut(delta) {  
+  return function(progress) {
+    if (progress < .5)
+      return delta(2*progress) / 2;
+    else
+      return (2 - delta(2*(1-progress))) / 2;
+  }
+}
+
+bounceEaseInOut = makeEaseInOut(bounce);
+```
+
+Трансформация "easeInOut" объединяет в себе два графика в один: `easeIn` для первой половины анимации и `easeOut` -- для второй.
+
+Например, давайте посмотрим эффект <span style="color:#0f0">`easeOut`</span>/<span style="color:#00f">`easeInOut`</span> на примере функции `circ`:
+
+<img src="circ_ease.png">
+Как видно, график первой половины анимации представляет собой уменьшенный "easeIn", а второй -- уменьшенный "easeOut". В результате, анимация начинается и заканчивается одинаковым эффектом.
+
+
+### Графопостроитель  
+
+Для наглядной демонстрации в действии различных delta, как нормальных(easeIn), так и измененных(easeOut,easeInOut), я подготовил графопостроитель. 
+
+<iframe src="/files/tutorial/browser/animation/plot.html" style="border:1px;height:460px;width:600px"></iframe>
+<a href="/files/tutorial/browser/animation/plot.html">Открыть в новом окне</a>.
+
+Выберите функцию и нажмите `Рисовать!`
+
+
+<ul>
+<li><span style="color:#f00">easeIn</span> - базовое поведение: медленная анимация в начале, с постепенным ускорением.</li>
+<li><span style="color:#0f0">easeOut</span> - поведение, обратное <span style="color:#f00">easeIn</span>: быстрая анимация на старте, а затем все медленней и медленней.</li>
+<li><span style="color:#00f">easeInOut</span> - слияние обоих поведений. Анимация разделяется на две части. Первая часть - это `easeIn`, а вторая - `easeOut`.</li>
+</ul>
+
+Для примера, попробуйте "bounce". 
+
+[summary]
+Процесс анимации полностью в ваших руках благодаря `delta`. Вы можете сделать ее настолько реалистичной, насколько захотите.
+
+И кстати. Если вы когда-нибудь изучали математику... Некоторые вещи все же бывают полезны в жизни :) Можно продумать и сделать красиво.
+
+Впрочем, исходя из практики, можно сказать, что варианты `delta`, описанные выше, покрывают 95% потребностей в анимации.
+[/summary]
+
+## Сложные варианты step   
+
+Анимировать можно все, что угодно. Вместо движения, как во всех предыдущих примерах, вы можете изменять прозрачность, ширину, высоту, цвет... Все, о чем вы можете подумать! 
+
+Достаточно лишь написать соответствующий `step`.
+
+### Подсветка цветом   
+
+Функция `highlight`, представленная ниже, анимирует изменение цвета.
+
+```js
+function highlight(elem) {
+  var from = [255,0,0], to = [255,255,255]
+  animate({
+    delay: 10,
+    duration: 1000,
+    delta: linear,
+    step: function(delta) {
+      elem.style.backgroundColor = 'rgb(' +
+        Math.max(Math.min(parseInt((delta * (to[0]-from[0])) + from[0], 10), 255), 0) + ',' +
+        Math.max(Math.min(parseInt((delta * (to[1]-from[1])) + from[1], 10), 255), 0) + ',' +
+        Math.max(Math.min(parseInt((delta * (to[2]-from[2])) + from[2], 10), 255), 0) + ')'
+    }
+  })  
+}
+```
+
+<div onclick="highlight(this, linear)" style="font-size:150%">Кликните по этой надписи, чтобы увидеть функцию в действии</div>
+
+А теперь тоже самое, но `delta = makeEaseOut(bounce)`:
+
+<div onclick="highlight(this, makeEaseOut(bounce))" style="font-size:150%">Кликните по этой надписи, чтобы увидеть функцию в действии</div>
+
+
+### Набор текста  
+
+Вы можете создавать интересные анимации, как, например, набор текста в "скачущем" режиме:
+
+[pre]
+<textarea id="textExample" style="border: 1px solid #BBB; color:#444" rows="4" cols="60">Он стал под дерево и ждет.
+И вдруг граахнул гром —
+Летит ужасный Бармаглот
+И пылкает огнем!
+</textarea>
+
+<button onclick="animateText(document.getElementById('textExample'))">Запустить анимированную печать!</button>
+[/pre]
+Исходный код:
+
+```js
+function animateText(textArea) {
+  var text = textArea.value
+  var to = text.length, from = 0
+  
+  animate({
+    delay: 20,
+    duration: 5000,
+    delta: bounce,
+    step: function(delta) {
+      var result = (to-from) * delta + from
+      textArea.value = text.substr(0, Math.ceil(result))
+    }
+  })
+}
+```
+
+## Итого [#animate]
+
+
+Анимация выполняется путём использования `setInterval` с маленькой задержкой, порядка 10-50мс. При каждом запуске происходит отрисовка очередного кадра.
+
+Анимационная функция, немного расширенная:
+
+```js
+function animate(opts) {
+
+  var start = new Date;
+  var delta = opts.delta || linear;
+
+  var timer = setInterval(function() {
+
+    var progress = (new Date - start) / opts.duration;
+    if (progress > 1) progress = 1;
+
+    opts.step( delta(progress) );
+
+    if (progress == 1) {
+      clearInterval(timer);
+      opts.complete && opts.complete();
+    }
+  }, opts.delay || 13);
+
+  return timer;
+}
+```
+
+Основные параметры:
+<ul>
+<li>`delay` - задержка между кадрами, по умолчанию 13мс.</li>
+<li>`duration` - длительность анимации в мс.</li> 
+<li>`delta` - функция, которая определяет состояние анимации каждый кадр. Получает часть времени от 0 до 1, возвращает завершенность анимации от 0 до 1. По умолчанию `linear`.</li>
+<li>`step` - функция, которая отрисовывает состояние анимации от 0 до 1.</li>
+<li>`complete` - функция для вызова после завершенности анимации.</li>
+<li>Вызов `animate` возвращает таймер, чтобы анимацию можно было отменить.</li>
+</ul>
+
+Функцию `delta` можно модифицировать, используя трансформации `easeOut/easeInOut`:
+
+```js
+function makeEaseInOut(delta) {
+  return function(progress) {
+    if (progress < .5) return delta(2*progress) / 2;
+    else return (2 - delta(2*(1-progress))); / 2;
+  }
+}
+
+function makeEaseOut(delta) {
+  return function(progress) {
+    return 1 - delta(1 - progress);
+  }
+}
+```
+
+На основе этой общей анимационной функции можно делать и более специализированные, например `animateProp`, которая анимирует свойство `opts.elem[opts.prop]` от `opts.start px` до `opts.end px` :
+
+```js
+//+ run
+function animateProp(opts) {
+  var start = opts.start, end = opts.end, prop = opts.prop;
+
+  opts.step = function(delta) {
+    opts.elem.style[prop] = Math.round(start + (end - start)*delta) + 'px';
+  }
+  return animate(opts);
+}
+
+// Использование:
+animateProp({ 
+  elem: document.body,
+  prop: "width",
+  start: 0,
+  duration: 2000,
+  end: document.body.clientWidth
+});
+```
+
+Можно добавить еще варианты `delta`, `step`, создать общий фреймворк для анимации с единым таймером и т.п. Собственно, это и делают библиотеки типа jQuery. 
+
+
+### Советы по оптимизации  
+
+<dl>
+<dt>Большое количество таймеров сильно нагружают процессор.</dt>
+<dd>Если вы хотите запустить несколько анимаций одновременно, например, показать много падающих снежинок, то управляйте ими с помощью одного таймера.
+
+Дело в том, что каждый таймер вызывает перерисовку. Поэтому браузер работает гораздо эффективней, если для всех анимаций приходится делать одну объединенную перерисовку вместо нескольких.
+
+Фреймворки обычно используют один `setInterval` и запускают все кадры в заданном интервале.
+</dd>
+<dt>Помогайте браузеру в отрисовке</dt>
+<dd>Браузер управляет отрисовкой дерева и элементы зависят друг от друга.
+
+Если анимируемый элемент лежит глубоко в DOM, то другие элементы зависят от его размеров и позиции. Даже если анимация не касается их, браузер все равно делает лишние расчёты.
+
+Для того, чтобы анимация меньше расходовала ресурсы процессора(и была плавнее), не анимируйте элемент, находящийся глубоко в DOM.
+
+Вместо этого:
+<ol>
+<li>Для начала, удалите анимируемый элемент из DOM и прикрепите его непосредственно к `BODY`. Вам, возможно придется использовать `position: absolute` и выставить координаты.</li>
+<li>Анимируйте элемент.</li>
+<li>Верните его обратно в DOM.
+</ol>
+
+Эта хитрость поможет выполнять сложные анимации и при этом экономить ресурсы процессора.
+</dd>
+</dl>
+
+Там, где это возможно, стоит использовать CSS-анимацию, особенно на смартфонах и планшетах, где процессор слабоват и JavaScript работает не быстро.
+
+[head]
+<link type="text/css" rel="stylesheet" href="/files/tutorial/browser/animation/animate.css" />
+<script src="/files/tutorial/js/animate.js"></script>
+<script src="/files/tutorial/browser/animation/step.js"></script>
+<script>
+function move(elem, delta, duration) {
+  var to = 500;
+  
+  animate({
+    delay: 10,
+    duration: duration || 1000, 
+    delta: delta,
+    step: function(delta) {
+      elem.style.left = to*delta + "px"    
+    }
+  });
+  
+}
+</script>
+[/head]
\ No newline at end of file
diff --git a/3-more/2-animation/1-js-animation/back.png b/3-more/2-animation/1-js-animation/back.png
new file mode 100755
index 00000000..72b681b3
Binary files /dev/null and b/3-more/2-animation/1-js-animation/back.png differ
diff --git a/3-more/2-animation/1-js-animation/bounce-inout.png b/3-more/2-animation/1-js-animation/bounce-inout.png
new file mode 100755
index 00000000..e8915745
Binary files /dev/null and b/3-more/2-animation/1-js-animation/bounce-inout.png differ
diff --git a/3-more/2-animation/1-js-animation/circ.png b/3-more/2-animation/1-js-animation/circ.png
new file mode 100755
index 00000000..912af849
Binary files /dev/null and b/3-more/2-animation/1-js-animation/circ.png differ
diff --git a/3-more/2-animation/1-js-animation/circ_ease.png b/3-more/2-animation/1-js-animation/circ_ease.png
new file mode 100755
index 00000000..051e5d40
Binary files /dev/null and b/3-more/2-animation/1-js-animation/circ_ease.png differ
diff --git a/3-more/2-animation/1-js-animation/elastic.png b/3-more/2-animation/1-js-animation/elastic.png
new file mode 100755
index 00000000..243b1bbc
Binary files /dev/null and b/3-more/2-animation/1-js-animation/elastic.png differ
diff --git a/3-more/2-animation/1-js-animation/linear.png b/3-more/2-animation/1-js-animation/linear.png
new file mode 100755
index 00000000..2310ffef
Binary files /dev/null and b/3-more/2-animation/1-js-animation/linear.png differ
diff --git a/3-more/2-animation/1-js-animation/move.view/index.html b/3-more/2-animation/1-js-animation/move.view/index.html
new file mode 100755
index 00000000..ec6f3e03
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/move.view/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<link type="text/css" rel="stylesheet" href="animate.css">
+<script src="move.js"></script>
+</head>
+<body>
+
+<div onclick="move(this.children[0])" class="example_path">
+	<div class="example_block"></div>
+</div>
+</body>
+</html>
diff --git a/3-more/2-animation/1-js-animation/move100.view/index.html b/3-more/2-animation/1-js-animation/move100.view/index.html
new file mode 100755
index 00000000..fb33ca3e
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/move100.view/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<link type="text/css" rel="stylesheet" href="animate.css">
+</head>
+<body>
+<script>
+function move(elem) {
+
+  var left = 0; // начальное значение
+
+  function frame() { // функция для отрисовки
+    left++;
+    elem.style.left = left + 'px'
+
+    if (left == 100) {
+      clearInterval(timer); // завершить анимацию
+    }
+  }
+
+  var timer = setInterval(frame, 10) // рисовать каждые 10мс
+}
+</script>
+
+<div onclick="move(this.children[0])" class="example_path">
+  <div class="example_block"></div>
+</div>
+
+</body>
+</html>
diff --git a/3-more/2-animation/1-js-animation/quad.png b/3-more/2-animation/1-js-animation/quad.png
new file mode 100755
index 00000000..3db3b278
Binary files /dev/null and b/3-more/2-animation/1-js-animation/quad.png differ
diff --git a/3-more/2-animation/1-js-animation/quint.png b/3-more/2-animation/1-js-animation/quint.png
new file mode 100755
index 00000000..ab34dd49
Binary files /dev/null and b/3-more/2-animation/1-js-animation/quint.png differ
diff --git a/3-more/2-animation/1-js-animation/width.view/index.html b/3-more/2-animation/1-js-animation/width.view/index.html
new file mode 100755
index 00000000..68385955
--- /dev/null
+++ b/3-more/2-animation/1-js-animation/width.view/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<link type="text/css" rel="stylesheet" href="animate.css">
+<script src="width.js"></script>
+</head>
+<body>
+
+<div onclick="stretch(this.children[0])" class="example_path">
+	<div class="example_block"></div>
+</div>
+</body>
+</html>
diff --git a/3-more/2-animation/2-bezier/article.md b/3-more/2-animation/2-bezier/article.md
new file mode 100644
index 00000000..6e7497fb
--- /dev/null
+++ b/3-more/2-animation/2-bezier/article.md
@@ -0,0 +1,191 @@
+# Кривые Безье
+
+Кривые Безье используются в компьютерной графике для рисования плавных изгибов, в [CSS-анимации](#css-animation) для описания процесса анимации и много где ещё.
+
+Тему эту стоит изучить, чтобы в дальнейшем с комфортом пользоваться этим замечательным инструментом.
+[cut]
+<script>
+if (!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1")) {
+ document.write('<h2 style="color:red">Ваш браузер не поддерживает SVG. Живые примеры без него не работают :(</h2>');
+}
+</script>
+
+## Виды кривых Безье
+
+[Кривая Безье](http://ru.wikipedia.org/wiki/%D0%9A%D1%80%D0%B8%D0%B2%D0%B0%D1%8F_%D0%91%D0%B5%D0%B7%D1%8C%D0%B5) задаётся опорными точками.
+
+Их может быть две, три, четыре или больше. Например:
+
+<table>
+<tr>
+<th>По двум точкам</th>
+<th>По трём точкам</th>
+<th>По четырём точкам</th>
+</tr>
+<tr>
+<td>
+<img src="bezier2.png">
+</td>
+<td>
+<img src="bezier3.png">
+</td>
+<td>
+<img src="bezier4.png">
+</td>
+</tr>
+</table>
+
+Если вы посмотрите внимательно на эти кривые, то "на глазок" заметите: 
+<ol>
+<li>**Степень кривой равна числу точек минус один**.
+На рисунках выше, соответственно, получаются для двух точек -- линейная кривая (прямая), для трёх точек -- квадратическая кривая (парабола), для четырёх -- кубическая.</li>
+<li>**Кривая всегда находится внутри [выпуклой оболочки](http://ru.wikipedia.org/wiki/%D0%92%D1%8B%D0%BF%D1%83%D0%BA%D0%BB%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BE%D0%BB%D0%BE%D1%87%D0%BA%D0%B0), образованной опорными точками:**
+
+<img src="bezier4-e.png"> <img src="bezier3-e.png">
+
+Благодаря последнему свойству в компьютерной графике можно оптимизировать проверку пересечений двух кривых. Если их выпуклые оболочки не пересекаются, то и кривые тоже не пересекутся.
+</li>
+</ol>
+
+Основная ценность кривых Безье -- в том, что **кривую можно менять, двигая точки**. При этом **кривая меняется интуитивно понятным образом**.
+
+Попробуйте двигать точки мышью в примере ниже:
+
+[iframe src="demo.svg?nocpath=1&p=0,0,0.5,0,0.5,1,1,1" height=370]
+
+Как можно заметить, **кривая натянута по касательным 1 -> 2 и 3 -> 4.**
+
+После небольшой практики становится понятно, как расположить точки, чтобы получить нужную форму. А, соединяя несколько кривых, можно получить практически что угодно.
+
+Вот некоторые примеры:
+
+<img src="car.jpg"> <img src="letter_m.png"> <img src="vase.png">
+
+## Математика
+
+У кривых Безье есть математическая формула. Как мы увидим далее, в ней нет особенной необходимости, но для полноты картины -- вот она.
+
+**Координаты кривой описываются в зависимости от параметра `t⋲[0,1]`**
+
+<ul>
+<li>Для двух точек:
+
+[pre]
+<code>P = (1-t)P<sub>1</sub> + tP<sub>2</sub></code>
+[/pre]
+</li>
+<li>Для трёх точек:
+
+[pre]
+<code>P = (1−t)<sup>2</sup>P<sub>1</sub> + 2(1−t)tP<sub>2</sub> + t<sup>2</sup>P<sub>3</sub></code>
+[/pre]
+</li>
+<li>Для четырёх точек:
+
+[pre]
+<code>P = (1−t)<sup>3</sup>P<sub>1</sub> + 3(1−t)<sup>2</sup>tP<sub>2</sub>  +3(1−t)t<sup>2</sup>P<sub>3</sub> + t<sup>3</sup>P<sub>4</sub></code>
+[/pre]
+</li>
+</ul>
+
+Эти уравнения -- векторные, т.е. вместо <code>P<sub>i</sub></code>  нужно подставить координаты i-й опорной точки <code>(x<sub>i</sub>, y<sub>i</sub>)</code>.
+
+Формула даёт возможность строить кривые, но не очень понятно, почему они именно такие, и как зависят от опорных точек. С этим нам поможет разобраться другой алгоритм.
+
+## Рисование "де Кастельжо"
+
+[Метод де Кастельжо](http://ru.wikipedia.org/wiki/%D0%90%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BC_%D0%B4%D0%B5_%D0%9A%D0%B0%D1%81%D1%82%D0%B5%D0%BB%D1%8C%D0%B6%D0%BE) идентичен математическому определению кривой и наглядно показывает, как она строится.
+
+Посмотрим его на примере трех точек (точки можно двигать). Нажатие на кнопку "edit" запустит демонстрацию. 
+
+[iframe src="demo.svg?p=0,0,0.5,1,1,0&animate=1" height=370]
+
+**Алгоритм построения "де Кастельжо":**
+
+<ol>
+
+<li>Строятся отрезки между опорными точками 1-2-3. На рисунке выше они **чёрные**.</li>
+<li>Параметр `t` пробегает значения от `0` до `1`. В примере выше использован шаг `0.05`, т.е. в цикле `0, 0.05, 0.1, 0.15, ... 0.95, 1`. 
+
+Для каждого значения `t`:
+<ol>
+<li>На каждом из этих отрезков берётся точка, находящаяся от начала на расстоянии от 0 до `t` пропорционально длине. То есть, при `t=0` -- точка будет в начале, при `t=0.25` -- на расстоянии в 25% от начала отрезка, при `t=0.5` -- 50%(на середине), при `t=1` -- в конце. Так как **чёрных** отрезков -- два, то и точек выходит две штуки.</li>
+<li>Эти точки соединяются. На рисунке ниже соединяющий их отрезок изображён <span style="color:blue">синим</span>.
+
+<table class="bordered">
+<tr><td>При `t=0.25`</td><td>При `t=0.5`</td></tr>
+<tr>
+<td><img src="bezier3-draw1.png"></td>
+<td><img src="bezier3-draw2.png"></td>
+</tr>
+</table>
+
+</li>
+<li>На <span style="color:blue">получившемся</span> отрезке берётся точка на расстоянии, соответствующем `t`. То есть, для `t=0.25` получаем точку в конце первой четверти отрезка, для `t=0.5` -- в середине отрезка. На рисунке выше эта точка отмечена <span style="color:red">красным</span>. 
+</li>
+</ol>
+</li>
+<li>
+По мере того как `t` пробегает последовательность от `0` до `1`, каждое значение `t` добавляет к кривой точку. **Совокупность таких точек для всех значений `t` образуют кривую Безье.**
+</li>
+</ol>
+**Это был процесс для построения по трём точкам. Но то же самое происходит и с четырьмя точками.**
+
+
+Демо для четырёх точек (точки можно двигать):
+
+[iframe src="demo.svg?p=0,0,0.5,0,0.5,1,1,1&animate=1" height=370]
+
+Алгоритм:
+<ul>
+<li>Точки по порядку соединяются отрезками: `1-2`, `2-3`, `3-4`. Получается три чёрных отрезка.</li>
+<li>На отрезках берутся точки, соответствующие текущему `t`, соединяются. Получается два <span style="color:#0A0">зелёных отрезка</span>.</li>
+<li>На этих отрезках берутся точки, соответствующие текущему `t`, соединяются. Получается один <span style="color:blue">синий отрезок</span>.</li>
+<li>На синем отрезке берётся точка, соответствующая текущему `t`. При запуске примера выше она <span style="color:red">красная</span>.</li>
+<li>Эти точки описывают кривую.</li>
+</ul>
+
+Нажмите на кнопку "edit" в примере выше, чтобы увидеть это в действии.
+
+Ещё примеры кривых:
+
+[iframe src="demo.svg?p=0,0,0,0.75,0.25,1,1,1&animate=1" height=370]
+
+С другими точками:
+
+[iframe src="demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1" height=370]
+
+Петелька:
+
+[iframe src="demo.svg?p=0,0,1,0.5,0,1,0.5,0&animate=1" height=370]
+
+Пример негладкой кривой Безье:
+
+[iframe src="demo.svg?p=0,0,1,1,0,1,1,0&animate=1" height=370]
+
+Аналогичным образом могут быть построены кривые Безье и более высокого порядка: по пяти точкам, шести и так далее. Но обычно используются 2-3 точки, а для сложных линий несколько кривых соединяются. Это гораздо проще с точки зрения поддержки и расчётов.
+
+[smart header="Как провести кривую через нужные точки?"]
+Этот вопрос не связан с кривыми Безье, но он иногда возникает в смежных задачах.
+
+Такая задача называется [интерполяцией](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D0%BE%D0%BB%D1%8F%D1%86%D0%B8%D1%8F). Существуют математические формулы, которые подбирают коэффициенты кривой по точкам, исходя из требований, например [многочлен Лагранжа](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D0%BE%D0%BB%D1%8F%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D1%8B%D0%B9_%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D1%87%D0%BB%D0%B5%D0%BD_%D0%9B%D0%B0%D0%B3%D1%80%D0%B0%D0%BD%D0%B6%D0%B0). 
+
+Как правило, в компьютерной графике для интерполяции используют кубические кривые, соединённых гладким образом. Вместе они выглядят как одна кривая. Это называется [интерполяция сплайнами](http://ru.wikipedia.org/wiki/%D0%9A%D1%83%D0%B1%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%81%D0%BF%D0%BB%D0%B0%D0%B9%D0%BD).
+[/smart]
+## Итого
+
+Кривые Безье задаются опорными точками. Мы рассмотрели два определения кривых:
+<ol>
+<li>Через математическую формулу.</li>
+<li>Через процесс построения де Кастельжо.</li>
+</ol>
+
+С их помощью можно описать почти любую линию, особенно если соединить несколько.
+
+Применение:
+
+<ul>
+<li>В компьютерной графике, моделировании, в графических редакторах. Шрифты описываются с помощью кривых Безье.</li>
+<li>В веб-разработке -- для графики на Canvas или в формате SVG. Кстати, все живые примеры выше написаны на SVG. Фактически, это один SVG-документ, к которому точки передаются параметрами. Вы можете открыть его в отдельном окне и посмотреть исходник: <a href="/files/tutorial/browser/animation/bezier/demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1">demo.svg</a>.</li>
+<li>В CSS-анимации, для задания временной функции.</li>
+</ul>
\ No newline at end of file
diff --git a/3-more/2-animation/2-bezier/bezier2.png b/3-more/2-animation/2-bezier/bezier2.png
new file mode 100755
index 00000000..820113dd
Binary files /dev/null and b/3-more/2-animation/2-bezier/bezier2.png differ
diff --git a/3-more/2-animation/2-bezier/bezier3-draw1.png b/3-more/2-animation/2-bezier/bezier3-draw1.png
new file mode 100755
index 00000000..4fbe5db1
Binary files /dev/null and b/3-more/2-animation/2-bezier/bezier3-draw1.png differ
diff --git a/3-more/2-animation/2-bezier/bezier3-draw2.png b/3-more/2-animation/2-bezier/bezier3-draw2.png
new file mode 100755
index 00000000..bd06a0e4
Binary files /dev/null and b/3-more/2-animation/2-bezier/bezier3-draw2.png differ
diff --git a/3-more/2-animation/2-bezier/bezier3-e.png b/3-more/2-animation/2-bezier/bezier3-e.png
new file mode 100755
index 00000000..b8639bc6
Binary files /dev/null and b/3-more/2-animation/2-bezier/bezier3-e.png differ
diff --git a/3-more/2-animation/2-bezier/bezier3.png b/3-more/2-animation/2-bezier/bezier3.png
new file mode 100755
index 00000000..314f6432
Binary files /dev/null and b/3-more/2-animation/2-bezier/bezier3.png differ
diff --git a/3-more/2-animation/2-bezier/bezier4-e.png b/3-more/2-animation/2-bezier/bezier4-e.png
new file mode 100755
index 00000000..fb9fe70b
Binary files /dev/null and b/3-more/2-animation/2-bezier/bezier4-e.png differ
diff --git a/3-more/2-animation/2-bezier/bezier4.png b/3-more/2-animation/2-bezier/bezier4.png
new file mode 100755
index 00000000..8c3456b5
Binary files /dev/null and b/3-more/2-animation/2-bezier/bezier4.png differ
diff --git a/3-more/2-animation/2-bezier/car.jpg b/3-more/2-animation/2-bezier/car.jpg
new file mode 100755
index 00000000..fc31600e
Binary files /dev/null and b/3-more/2-animation/2-bezier/car.jpg differ
diff --git a/3-more/2-animation/2-bezier/demo.svg b/3-more/2-animation/2-bezier/demo.svg
new file mode 100755
index 00000000..7dd51ad6
--- /dev/null
+++ b/3-more/2-animation/2-bezier/demo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:xlink="http://www.w3.org/1999/xlink" width="340" height="360">
<!--
@see
http://www.learnsvg.com/books/learnsvg/html/bitmap/chapter04/page04-1.php
http://apike.ca/prog_svg_paths.html
http://www.the-art-of-web.com/css/css-animation/
http://srufaculty.sru.edu/david.dailey/svg/curve.svg
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C
-->
<defs>
<pattern id="Pat01" width="10" height="10" patternUnits="userSpaceOnUse">
	<rect width="10" height="10" fill="#FFFFFF" stroke="#000000" stroke-width="0.1"/>
</pattern>
</defs>


<rect x="20" y="50" width="300" height="300" fill="url(#Pat01)"/>


<path d="M20,50 H320 V350 H20 Z" fill="none" stroke="none" stroke-width="0.5" stroke-dasharray="2 2"/>


<path fill="none" id="control-path" stroke="black"/>
<path stroke="red" fill="none" id="bezier-path" stroke-width="1.2"/>

<path d="" fill="none" id="t-path-template"/>

<svg x="0" y="0" id="p-template">
<circle r="4" fill="white" stroke="black" stroke-width="1" cx="20" cy="20" style="cursor: pointer"/>
<text x="12" y="12" style="font-size:16px;font-weight:bold">1</text>
</svg>

<circle r="4" fill="red" stroke="red" id="marker" stroke-width="1" cx="-10" cy="-10"/>

<svg>
<image xlink:href="play.png" x="5" y="5" style="cursor:pointer" width="30" height="30" id="run-button"/>
<text x="38" y="27" style="font-size:18px;font-family:Consolas, Lucida Console, sans-serif">t:<tspan id="t-value">1</tspan></text>
</svg>

<script><![CDATA[
var xmlns = "http://www.w3.org/2000/svg";
var xlinkns  = "http://www.w3.org/1999/xlink";

var box = {left:20, top: 50, right: 320, bottom: 350 };

if (location.search.match('small=1')) {
  box = {left:20, top: 50, right: 120, bottom: 150 };
}

document.documentElement.ondragstart = function() {
  return false;
};

var pointsIn = location.search.match(/p=(.*?)($|&)/)[1];

// don't show a piece of control path between P2 and P3
var hideMiddleControlPath = location.search.match('nocpath=1');

pointsIn = pointsIn.split(',');

var points = [];

// read points from ?p=...
for(var i=0; i<pointsIn.length; i++) {
  var x = box.left + (box.right - box.left)*pointsIn[i];
  var y = box.bottom + (box.top - box.bottom)*pointsIn[++i];
  points.push( {x: x, y: y} );
}

var bezierPath = document.getElementById("bezier-path");
var controlPath = document.getElementById("control-path");
//controlPath.style.display = location.search.match('nocpath=1') ? 'none' : 'block';

var runButton = document.getElementById("run-button");
runButton.parentNode.style.display = location.search.match('animate=1') ? 'block' : 'none';



var tPathTemplate = document.getElementById("t-path-template");
tPathTemplate.parentNode.removeChild(tPathTemplate);

function drawPath() {
  var letter;
  switch (points.length) {
  case 4:
    letter = 'C';
    break;
  case 3:
    letter = 'Q';
    break;
  default:
    letter = 'L';
  }
  var bezierPathD = "M" + points[0].x + ',' + points[0].y + ' '+letter;
  var controlPathD = "M" + points[0].x + ',' + points[0].y + ' L';

  for(var i = 1; i < points.length; i++) {
    bezierPathD += points[i].x + ',' + points[i].y + ' ';
    controlPathD += points[i].x + ',' + points[i].y + ' ';
  }
  bezierPath.setAttribute('d', bezierPathD);
  controlPath.setAttribute('d', controlPathD);

  function dist(a,b) {
    return Math.round(Math.sqrt( (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y)));
  }

  if (hideMiddleControlPath) {
    controlPath.setAttribute('stroke-dasharray', dist(points[0],points[1])+' '+dist(points[1],points[2])+' 9999 9999');
  }

}

// draw control points
function drawPoints(points) {
  var p = document.getElementById('p-template');
  p.removeAttribute('id');
  p.parentNode.removeChild(p);

  for(var i=0; i<points.length; i++) {
    var point = p.cloneNode(true);
    point.getElementsByTagName('text')[0].firstChild.data = i+1;
    setPointCoords(point, i);
    setPointHandler(point, i);
    document.documentElement.appendChild(point);
  }

}

// control points coords are shifted from Left-Upper corner a bit
// to give them space to render
function setPointCoords(point, i) {
  point.setAttribute('x', points[i].x-20);
  point.setAttribute('y', points[i].y-20);
}

function setPointHandler(point, i) {
  var circle = point.getElementsByTagName('circle')[0];
  circle.onmousedown = function() {
    document.onmousemove = function(e) {
      var x = e.pageX, y = e.pageY;

      // constrain withing the box
      if (x < box.left) x = box.left;
      if (x > box.right) x = box.right;
      if (y > box.bottom) y = box.bottom;
      if (y < box.top) y = box.top;

      points[i].x = x;
      points[i].y = y;
      setPointCoords(point, i);
      drawPath();
    }
    document.onmouseup = function() {
      document.onmousemove = document.onmouseup = null;
    }
    return false;
  }
}

// draw point connectors which form the curve
function drawT(points, t) {

  var path = document.getElementById('t-'+points.length);

  if (!path) {
    path = tPathTemplate.cloneNode(true);
    path.setAttribute('stroke', ["blue","#0a0","red"][points.length % 3]);
    path.setAttribute('id', 't-'+points.length);
    document.documentElement.appendChild(path);
  }

  var subPoints = [];
  var x = points[0].x + (points[1].x - points[0].x)*t;
  var y = points[0].y + (points[1].y - points[0].y)*t;

  var tPathD = "M" + x + ',' + y + ' L';
  subPoints.push({x: x, y: y});

  for(var i=1; i<points.length-1; i++) {
    var x = points[i].x + (points[i+1].x - points[i].x)*t;
    var y = points[i].y + (points[i+1].y - points[i].y)*t;
    subPoints.push({x: x, y: y});

    tPathD += x + ',' + y + ' ';
  }

  if (points.length <= 3) {
    var m = document.getElementById('marker');
    if (t == 1) {
      var mx = -10, my = -10;
    } else {
      mx = subPoints[0].x + (x-subPoints[0].x)*t;
      my = subPoints[0].y + (y-subPoints[0].y)*t;
    }
    m.setAttribute('cx', mx);
    m.setAttribute('cy', my);
    path.setAttribute('stroke-width', 2);
  }
  if (points.length == 2) {
    // only 2 points provided, special case
    tPathD = "M"+points[0].x+","+points[0].y+" L"+x+","+y;
  }

  path.setAttribute('d', tPathD);

  if (subPoints.length > 2){
    drawT(subPoints, t);
  }
}

var t = 0;
var timer;


// animate the curve
function animate(complete) {

  timer = setInterval(function() {
    if (t>1) {
      t = 1;
    }
    //bezierPath.setAttribute('stroke-dasharray', t*bezierPath.getTotalLength()+' '+bezierPath.getTotalLength());
    drawT(points, t);

    document.getElementById('t-value').firstChild.nodeValue = t==0 ? 0 : t == 1 ? 1 : t.toFixed(3);
/*
    if (t >= 0.5) {
      clearInterval(timer);
      runButton.parentNode.style.display = 'none';
      return;
    }
*/
    if (t == 1) {
      clearInterval(timer);
      timer = 0;
      complete && complete();
      return;
    }

    t += 0.005;
  }, 30);
}

function animationDone() {
  for(var i=1; i<=points.length; i++) {
    var path = document.getElementById('t-'+i);
    path && document.documentElement.removeChild(path);
  }
  t = 0;
  runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');
}

runButton.onclick = onAnimate;

function onAnimate() {
  if (timer) {
    // animation in action
    runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');
    clearInterval(timer);
    timer = 0;
    return;
  }

  runButton.setAttributeNS(xlinkns, 'xlink:href', 'pause.png');
  animate(animationDone)
}

drawPath();
drawPoints(points);

//]]></script>

</svg>

\ No newline at end of file
diff --git a/3-more/2-animation/2-bezier/letter_m.png b/3-more/2-animation/2-bezier/letter_m.png
new file mode 100755
index 00000000..e95dc0b9
Binary files /dev/null and b/3-more/2-animation/2-bezier/letter_m.png differ
diff --git a/3-more/2-animation/2-bezier/vase.png b/3-more/2-animation/2-bezier/vase.png
new file mode 100755
index 00000000..97055d18
Binary files /dev/null and b/3-more/2-animation/2-bezier/vase.png differ
diff --git a/3-more/2-animation/3-css-animation/1-animate-logo-css/solution.md b/3-more/2-animation/3-css-animation/1-animate-logo-css/solution.md
new file mode 100644
index 00000000..9f5ed693
--- /dev/null
+++ b/3-more/2-animation/3-css-animation/1-animate-logo-css/solution.md
@@ -0,0 +1,28 @@
+# Алгоритм
+
+Анимируйте одновременно свойства `left/top` и `width/height`.
+
+Чтобы в процессе анимации таблица сохраняла геометрию -- создайте на месте `IMG` временный `DIV` фиксированного размера и переместите `IMG` внутрь него. После анимации можно вернуть как было.
+
+Для начала анимации - добавьте класс изображению:
+
+```css
+.growing {
+  /* все свойства анимируются 3 секунды */
+  -webkit-transition: all 3s;
+  -moz-transition: all 3s;
+  -o-transition: all 3s;
+  -ms-transition: all 3s;
+}
+```
+
+При этом, чтобы анимация началась, может понадобиться отложить установку класса и новых свойств через `setTimeout(.., 0)`.
+
+Для отлова конца анимации используйте событие `on<browser>TransitionEnd`. Оно сработает несколько раз, для каждого свойства, поэтому чтобы обработчик не вывел "OK" много раз -- можно обрабатывать окончание только при одном `event.propertyName`.
+
+# Похожая задача
+Аналогичная задача, решённая средствами JS: [](/task/animate-logo).
+
+# Решение
+
+[edit src="solution" task/]
\ No newline at end of file
diff --git a/3-more/2-animation/3-css-animation/1-animate-logo-css/solution.view/index.html b/3-more/2-animation/3-css-animation/1-animate-logo-css/solution.view/index.html
new file mode 100755
index 00000000..87165c7e
--- /dev/null
+++ b/3-more/2-animation/3-css-animation/1-animate-logo-css/solution.view/index.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>img { display: block; cursor: pointer; }</style>
+  <style>
+  /**
+   * до анимации: .flyjet
+   * в начале анимации .flyjet .growing-init
+   * в процессе анимации .flyjet .growing-init .growing
+   * в конце анимации .flyjet
+   */
+
+    .flyjet {
+      width: 400px;
+      height: 240px;
+    }
+
+    .growing-init {
+      position: absolute;
+      height: 0;
+      width: 0;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      margin: auto;
+
+      /* все свойства анимируются 3 секунды */
+      -webkit-transition: all 3s;
+      -moz-transition: all 3s;
+      -o-transition: all 3s;
+      -ms-transition: all 3s;
+    }
+
+    .growing {
+      width: 400px;
+      height: 240px;
+    }
+  </style>
+</head>
+<body>
+
+Кликните картинку для анимации. Расположение элементов при анимации не должно меняться!
+<table>
+<tr>
+<td>Догнать</td>
+<td><img onclick="growIn(this)" src="http://js.cx/clipart/flyjet.jpg" class="flyjet">
+</td>
+<td>..и перегнать!</td>
+</tr>
+</table>
+
+<b>В процессе анимации повторные клики на изображение игнорировать.</b>
+
+<script>
+function growIn(img) {
+  if (img.classList.contains('growing-init')) return;
+  console.log("growIn!");
+
+  var height = img.offsetHeight;
+  var width = img.offsetWidth;
+
+  // переместить изображение в placeholder постоянного размера
+  var placeholder = document.createElement('div');
+  placeholder.style.position = 'relative';
+  placeholder.style.width = width + 'px';
+  placeholder.style.height = height + 'px';
+  img.parentNode.replaceChild(placeholder, img);
+  placeholder.appendChild(img);
+
+  img.classList.add('growing-init');
+
+  // откладываем на следующий фрейм, чтобы началась анимация
+  // иначе изменение свойств IMG не будет замечено
+  requestAnimationFrame(function() {
+
+    // Firefox иногда не стартует анимацию, 
+    // если не отложить classList.add ещё на один кадр (tested: FF30-)
+    requestAnimationFrame(function() {
+      img.classList.add('growing');
+ 
+      img.addEventListener('transitionend', done, false);
+    });
+  });
+
+  function done(e) {
+    // сработать только первый раз
+    img.removeEventListener('transitionend', done, false);
+
+    placeholder.parentNode.replaceChild(img, placeholder);
+    
+    img.classList.remove('growing');
+    img.classList.remove('growing-init');
+
+    alert('ok');
+  }
+  
+
+}
+</script>
+
+</body>
+</html>
+
+
diff --git a/3-more/2-animation/3-css-animation/1-animate-logo-css/source.view/animate.js b/3-more/2-animation/3-css-animation/1-animate-logo-css/source.view/animate.js
new file mode 100755
index 00000000..51bb38c6
--- /dev/null
+++ b/3-more/2-animation/3-css-animation/1-animate-logo-css/source.view/animate.js
@@ -0,0 +1,92 @@
+/**
+ Docs: http://learn.javascript.ru/tutorial/lib
+*/
+
+function animate(opts) {
+
+  var start = new Date;
+  var delta = opts.delta || linear;
+
+  var timer = setInterval(function() {
+    var progress = (new Date - start) / opts.duration;
+
+    if (progress > 1) progress = 1;
+
+    opts.step( delta(progress) );
+
+    if (progress == 1) {
+      clearInterval(timer);
+      opts.complete && opts.complete();
+    }
+  }, opts.delay || 13);
+
+  return timer;
+}
+
+/**
+ Анимация стиля opts.prop у элемента opts.elem
+ от opts.from до opts.to продолжительностью opts.duration
+ в конце opts.complete
+
+ Например: animateProp({ elem: ..., prop: 'height', start:0, end: 100, duration: 1000 })
+*/
+function animateProp(opts) {
+  var start = opts.start, end = opts.end, prop = opts.prop;
+
+  opts.step = function(delta) {
+    var value = Math.round(start + (end - start)*delta);
+    opts.elem.style[prop] = value + 'px';
+  }
+  return animate(opts);
+}
+
+// ------------------ Delta ------------------
+
+function elastic(progress) {
+  return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*1.5/3*progress);
+}
+
+function linear(progress) {
+  return progress;
+}
+
+function quad(progress) {
+  return Math.pow(progress, 2);
+}
+
+function quint(progress) {
+  return Math.pow(progress, 5);
+}
+
+function circ(progress) {
+  return 1 - Math.sin(Math.acos(progress));
+}
+
+function back(progress) {
+  return Math.pow(progress, 2) * ((1.5 + 1) * progress - 1.5);
+}
+
+
+function bounce(progress) {
+  for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
+    if (progress >= (7 - 4 * a) / 11) {
+      return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
+    }
+  }
+}
+
+function makeEaseInOut(delta) {
+  return function(progress) {
+    if (progress < .5)
+      return delta(2*progress) / 2;
+    else
+      return (2 - delta(2*(1-progress))) / 2;
+  }
+}
+
+
+function makeEaseOut(delta) {
+  return function(progress) {
+    return 1 - delta(1 - progress);
+  }
+}
diff --git a/3-more/2-animation/3-css-animation/1-animate-logo-css/source.view/index.html b/3-more/2-animation/3-css-animation/1-animate-logo-css/source.view/index.html
new file mode 100755
index 00000000..41a246e6
--- /dev/null
+++ b/3-more/2-animation/3-css-animation/1-animate-logo-css/source.view/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="animate.js"></script>
+  <style>img { display: block; cursor: pointer; }</style>
+</head>
+<body>
+
+Кликните картинку для анимации. Расположение элементов при анимации не должно меняться!
+<table>
+<tr>
+<td>Догнать</td>
+<td><img onclick="growIn(this)" src="http://js.cx/clipart/flyjet.jpg" width="400" height="240">
+</td>
+<td>..и перегнать!</td>
+</tr>
+</table>
+
+<b>В процессе анимации повторные нажатия на изображение игнорируются.</b>
+
+<script>
+function growIn(img) {
+  /* ваш код */
+}
+</script>
+
+</body>
+</html>
+
+
diff --git a/3-more/2-animation/3-css-animation/1-animate-logo-css/task.md b/3-more/2-animation/3-css-animation/1-animate-logo-css/task.md
new file mode 100644
index 00000000..175ee0a8
--- /dev/null
+++ b/3-more/2-animation/3-css-animation/1-animate-logo-css/task.md
@@ -0,0 +1,12 @@
+# Анимировать лого (CSS)
+
+[importance 5]
+
+Реализуйте анимацию, как в демке ниже (клик на картинку):
+[iframe src="solution" height=350]
+
+Продолжительность анимации: 3 секунды. 
+
+Для анимации использовать CSS, по окончании вывести "ок".
+
+ [edit src="source" task/]
diff --git a/3-more/2-animation/3-css-animation/article.md b/3-more/2-animation/3-css-animation/article.md
new file mode 100644
index 00000000..2dd69883
--- /dev/null
+++ b/3-more/2-animation/3-css-animation/article.md
@@ -0,0 +1,270 @@
+# CSS-анимация
+
+Все современные браузеры, кроме IE<10 поддерживают <a href="http://www.w3.org/TR/css3-transitions/">CSS transitions</a>, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.
+
+Большинство примеров из этой статьи не будут работать в IE<10.
+[cut]
+
+## Анимация свойства [#css-animation]
+
+Идея проста. Вы указываете, что некоторое свойство будет анимироваться при помощи специальных CSS-правил. Далее, при изменении этого свойства, браузер сам обработает анимацию. 
+
+Например, CSS, представленный ниже, 2 секунды анимирует свойство `background-color`.
+
+```css
+.animated {
+  transition-property: background-color;
+  transition-duration: 2s;
+}
+```
+
+Любое изменение фонового цвета будет анимироваться в течение 2-х секунд.
+
+У свойства `"transition"` есть и короткая запись:
+
+```css
+.animated {
+  transition: background-color 2s;
+}
+```
+
+Так как [стандарт CSS Transitions](http://www.w3.org/TR/css3-transitions/) находится в стадии разработки, то `transition` нужно снабжать браузерными префиксами.
+
+### Пример
+Этот пример работает во всех современных браузерах, не работает в IE&lt;10.
+
+```html
+<style>
+.animated {
+  -webkit-transition: background-color 2s;
+  -ms-transition: background-color 2s;
+  -o-transition: background-color 2s;
+  -moz-transition: background-color 2s;
+  transition: background-color 2s; /* без префикса - на будущее */
+
+  border: 1px solid black;
+}
+</style>
+<div class="animated" onclick="this.style.backgroundColor='red'">
+  <span style="font-size:150%">Кликни меня</span>
+</div>
+```
+
+<style>
+.animated {
+  transition: background-color 2s;
+  -webkit-transition: background-color 2s;
+  -o-transition: background-color 2s;
+  -ms-transition: background-color 2s;
+  -moz-transition: background-color 2s;
+  border: 1px solid black;
+}
+</style>
+<div class="animated" onclick="this.style.backgroundColor='red'">
+  <span style="font-size:150%">Кликни меня</span>
+</div>
+
+CSS-анимации особенно рекомендуются на мобильных устройствах. Они отрисовываются плавнее, чем JavaScript, и меньше нагружают процессор, так как используют графическую акселерацию.
+
+
+## Полный синтаксис CSS
+
+Свойства для CSS-анимаций:
+<dl>
+<dt>`transition-property`</dt>
+<dd>Список свойств, которые будут анимироваться. Анимировать можно не все свойства, но [многие](http://www.w3.org/TR/css3-transitions/#animatable-properties-). Значение `all` означает "анимировать все свойства".</dd>
+<dt>`transition-duration`</dt>
+<dd>Продолжительность анимации. Если указано одно значение -- оно применится ко всем свойствам, можно указать несколько значений для разных `transition-property`.</dd>
+<dt>`transition-timing-function`</dt>
+<dd>[Кривая Безье](/bezier) по 4-м точкам, используемая в качестве временной функциии.</dd>
+<dt>`transition-delay`</dt>
+<dd>Указывает задержку от изменения свойства до начала CSS-анимации.</dd>
+</dl>
+
+Свойство **`transition`** может содержать их все, в порядке: `property duration timing-function delay, ...`.
+
+### Пример
+
+Анимируем одновременно цвет и размер шрифта:
+
+```html
+<style>
+.growing {
+  -webkit-transition: font-size 3s, color 2s;
+  -ms-transition: font-size 3s, color 2s;
+  -o-transition: font-size 3s, color 2s;
+  -moz-transition: font-size 3s, color 2s;
+  transition: font-size 3s, color 2s; 
+}
+</style>
+<button class="growing" onclick="this.style.fontSize='36px';this.style.color='red'">Кликни меня</button>
+```
+
+<style>
+.growing {
+  -webkit-transition: font-size 3s, color 2s;
+  -ms-transition: font-size 3s, color 2s;
+  -o-transition: font-size 3s, color 2s;
+  -moz-transition: font-size 3s, color 2s;
+  transition: font-size 3s, color 2s; 
+}
+</style>
+<button class="growing" onclick="this.style.fontSize='36px';this.style.color='red'">Кликни меня</button>
+
+## Временнáя функция
+
+В качестве временной функции можно выбрать любую [кривую Безье](/bezier), удовлетворяющую условиям:
+<ol>
+<li>Начальная точка `(0,0)`.</li>
+<li>Конечная точка `(1,1)`.</li>
+<li>Для промежуточных точек значения `x` должны быть в интервале  `0..1`.</li>
+</ol>
+
+Синтаксис для задания кривой Безье в CSS: `cubic-bezier(x2, y2, x3, y3)`. В нём указываются координаты второй и третьей точек, так как первая и последняя фиксированы.
+
+Например, торможение можно описать кривой Безье: `cubic-bezier(0.0, 0.5, 0.5 ,1.0)`.
+
+График этой кривой:
+
+<img src="train-curve.png">
+
+Вы можете увидеть эту временную функцию в действии, кликнув на поезд:
+
+```html
+<style>
+.train {
+  position: relative;
+  left: 0;
+  -moz-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
+  -webkit-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
+  -ms-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
+  -o-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
+  transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
+}
+</style>
+<img class="train" width="177" height="160" src="/files/tutorial/browser/animation/train.gif" onclick="this.style.left='450px'">
+```
+
+<style>
+.train {
+  position: relative;
+  cursor: pointer;
+  left: 0;
+  -moz-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
+  -webkit-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
+  -ms-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
+  -o-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
+  transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
+}
+</style>
+<img class="train" width="177" height="160" src="/files/tutorial/browser/animation/train.gif" onclick="this.style.left='450px'">
+
+
+Существуют и несколько стандартных кривых: `linear`, `ease`, `ease-in`, `ease-out` и `ease-in-out`.
+
+Значение `linear` -- это прямая, равномерное изменение. Оно используется по умолчанию.
+
+Остальные кривые являются короткой записью следующих `cubic-bezier`. В таблице ниже показано соответствие:
+
+<table class="bordered">
+<tr>
+<th>`ease`</th>
+<th>`ease-in`</th>
+<th>`ease-out`</th>
+<th>`ease-in-out`</th>
+</tr>
+<tr>
+<td>`(0.25, 0.1, 0.25, 1.0)`</td>
+<td>`(0.42, 0, 1.0, 1.0)`</td>
+<td>`(0, 0, 0.58, 1.0)`</td>
+<td>`(0.42, 0, 0.58, 1.0)`</td>
+</tr>
+<tr>
+<td><img src="ease.png"></td>
+<td><img src="ease-in.png"></td>
+<td><img src="ease-out.png"></td>
+<td><img src="ease-in-out.png"></td>
+</tr>
+</table>
+
+Наиболее близкий стандартный вариант для примера с поездом -- `ease-out`:
+
+```css
+.train {
+  -moz-transition: left 5s ease-out;
+  ...
+}
+```
+
+## CSS-преобразования
+
+Браузеры, которые поддерживают CSS-анимацию, поддерживают и [CSS-преобразования](https://developer.mozilla.org/en/CSS/Using_CSS_transforms).
+
+С их помощью можно сделать много красивых эффектов. Например, вращение:
+
+```js
+//+ run
+ 
+document.body.style.MozTransition = "all 5s";
+document.body.style.MozTransform = "rotate(360deg)";
+document.body.style.WebkitTransition = "all 5s"; 
+document.body.style.WebkitTransform = "rotate(360deg)";
+document.body.style.OTransition = "all 5s";
+document.body.style.OTransform = "rotate(360deg)";
+document.body.style.MsTransition = "all 5s";
+document.body.style.MsTransform = "rotate(360deg)";
+
+document.body.style.Transition = "all 5s";
+document.body.style.Transform = "rotate(360deg)";
+```
+
+Самое замечательное -- все эти эффекты используют графический ускоритель и  почти не нагружают процессор.
+
+Все браузеры, кроме IE<10 поддерживают это, ну а в IE может быть что-то через JavaScript или вообще без анимации.
+
+## Событие transitionend
+
+На конец CSS-анимации можно повесить обработчик. Его стандартное имя: `transitionend`, но браузерные префиксы требуются и тут.
+
+Кликните на лодочку:
+
+[iframe src="boat" height=300 edit link]
+
+Её анимация осуществляется функцией `go`, которая перезапускается по окончании (с переворотом через CSS).
+
+```js
+...
+  go();
+
+  elem.addEventListener('transitionend', go, false); /* на будущее */
+  elem.addEventListener('webkitTransitionEnd', go, false);
+  elem.addEventListener('mozTransitionEnd', go, false);
+  elem.addEventListener('oTransitionEnd', go, false);
+  elem.addEventListener('msTransitionEnd', go, false);
+...
+```
+
+Объект события `transitionend` также содержит свойства:
+<dl>
+<dt>`propertyName`</dt>
+<dd>Свойство, анимация которого завершилась.</dd>
+<dt>`elapsedTime`</dt>
+<dd>Время (в секундах), которое заняла анимация, без учета `transition-delay`.</dd>
+</dl>
+
+Свойство `propertyName` может быть полезно при одновременной анимации нескольких свойств. Каждое свойство даст своё событие, и можно решить, что с ним делать дальше.
+
+## Ограничения и достоинства CSS-анимаций
+
+[compare]
+-Основное ограничение -- это то, что временная функция может быть задана только кривой Безье. Более сложные анимации, состоящие из нескольких кривых, реализуются при помощи [CSS animations](http://dev.w3.org/csswg/css3-animations/#animation-name-property) (стандарт пока не готов).
+-CSS-анимации касаются только свойств, а в JavaScript можно делать всё, что угодно.
+-Отсутствует поддержка в IE9-
++Простые вещи делаются просто. Особенно удобно, если от отсутствия эффекта в IE проблем не возникнет.
++Гораздо "легче" для процессора, чем анимации JavaScript.  Лучше используется графический ускоритель. Это очень важно для мобильных устройств.
+[/compare]
+
+[head]
+<link type="text/css" rel="stylesheet" href="/files/tutorial/browser/animation/animate.css" />
+<script src="/files/tutorial/browser/animation/step.js"></script>
+[/head]
\ No newline at end of file
diff --git a/3-more/2-animation/3-css-animation/boat.view/index.html b/3-more/2-animation/3-css-animation/boat.view/index.html
new file mode 100755
index 00000000..c9dc7a36
--- /dev/null
+++ b/3-more/2-animation/3-css-animation/boat.view/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+  .bouncing-boat {
+    margin-left: 0;
+    cursor: pointer;
+    -webkit-transition: margin-left 3s ease-in-out;
+    -moz-transition: margin-left 3s ease-in-out;
+    -o-transition: margin-left 3s ease-in-out;
+    -ms-transition: margin-left 3s ease-in-out;
+  }
+
+  /* переворот картинки через CSS */
+  .flip-horizontal {
+      -webkit-transform: scaleX(-1);
+      -moz-transform: scaleX(-1);
+      -o-transform: scaleX(-1);
+      -ms-transform: scaleX(-1);
+      filter: fliph; /* IE<10 */
+  }
+
+  </style>
+</head>
+<body>
+
+<img src="http://js.cx/clipart/boat.png" class="bouncing-boat" onclick="bounceBoat(this)">
+
+<script>
+function bounceBoat(elem) {
+
+  elem.onclick = null; // следующий клик не испортит анимацию
+
+  function go() {
+    var marginLeft = parseInt(elem.style.marginLeft) || 0;
+
+    if (marginLeft == 0) {
+      elem.className = 'bouncing-boat';
+    } else {
+      elem.className = 'bouncing-boat flip-horizontal';
+    }
+
+    elem.style.marginLeft = (marginLeft ? 0 : 400) + 'px';
+
+  }
+
+  go();
+
+  elem.addEventListener('transitionend', go, false); /* на будущее */
+  elem.addEventListener('webkitTransitionEnd', go, false);
+  elem.addEventListener('mozTransitionEnd', go, false);
+  elem.addEventListener('oTransitionEnd', go, false);
+  elem.addEventListener('msTransitionEnd', go, false);
+}
+</script>
+
+
+</body>
+</html>
diff --git a/3-more/2-animation/3-css-animation/ease-in-out.png b/3-more/2-animation/3-css-animation/ease-in-out.png
new file mode 100755
index 00000000..5b875894
Binary files /dev/null and b/3-more/2-animation/3-css-animation/ease-in-out.png differ
diff --git a/3-more/2-animation/3-css-animation/ease-in.png b/3-more/2-animation/3-css-animation/ease-in.png
new file mode 100755
index 00000000..2610c5a8
Binary files /dev/null and b/3-more/2-animation/3-css-animation/ease-in.png differ
diff --git a/3-more/2-animation/3-css-animation/ease-out.png b/3-more/2-animation/3-css-animation/ease-out.png
new file mode 100755
index 00000000..9e631a38
Binary files /dev/null and b/3-more/2-animation/3-css-animation/ease-out.png differ
diff --git a/3-more/2-animation/3-css-animation/ease.png b/3-more/2-animation/3-css-animation/ease.png
new file mode 100755
index 00000000..2f57ee34
Binary files /dev/null and b/3-more/2-animation/3-css-animation/ease.png differ
diff --git a/3-more/2-animation/3-css-animation/train-curve.png b/3-more/2-animation/3-css-animation/train-curve.png
new file mode 100755
index 00000000..bb10d5f4
Binary files /dev/null and b/3-more/2-animation/3-css-animation/train-curve.png differ
diff --git a/3-more/2-animation/index.md b/3-more/2-animation/index.md
new file mode 100644
index 00000000..d940e7df
--- /dev/null
+++ b/3-more/2-animation/index.md
@@ -0,0 +1,2 @@
+# Анимация
+
diff --git a/3-more/3-jquery-stub/1-jquery-intro/article.md b/3-more/3-jquery-stub/1-jquery-intro/article.md
new file mode 100644
index 00000000..d390a3dd
--- /dev/null
+++ b/3-more/3-jquery-stub/1-jquery-intro/article.md
@@ -0,0 +1,47 @@
+# Введение
+
+Эта глава содержит основную информацию, которая нужна, чтобы при помощи jQuery работать с документом. 
+
+Я также постараюсь изложить в ней структуру методов и основные особенности jQuery, которые не очевидны из документации.
+
+**Глава находится "в работе". Это означает, что раскрыты далеко не все темы, а то, что раскрыто, является скорее очерком, который постепенно обрастает "мясом" разъяснений и задач.**
+
+
+[cut]
+## О библиотеке jQuery
+
+[jQuery](http://jquery.com) -- библиотека, которая позволяет делать код короче, а также устраняет наиболее одиозные кросс-браузерные различия.
+
+Она не содержит встроенных архитектурных решений и, таким образом, не навязывает свой стиль. Просто делает код короче. За это её и любим.
+
+## Подключаем jQuery
+
+Библиотеку jQuery можно скачать себе на диск с сайта [](http://jquery.com), а можно -- вставить в документ, используя известные интернет адреса:
+
+<ul>
+<li>По адресу [](http://code.jquery.com/jquery-latest.js) -- доступна всегда последняя версия</li>
+<li>С сети Google: [](https://developers.google.com/speed/libraries/devguide?hl=ru#jquery) можно загрузить любую из не слишком старых версий. Синтаксис такой: `src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"`, где `1.8.3` -- версия, причём можно указать её приблизительно: `1.8` означает последнюю версию вида `1.8.*`, а `1` -- последнюю версию вида `1.*`. Файл `jquery.min.js` обозначает сжатый код, а `jquery.js` -- несжатый, для удобства отладки.</li>
+</ul>
+
+Например, подключим на страницу последнюю версию jQuery в несжатом виде и проверим её работу:
+
+```html
+<!--+ run -->
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
+
+<script>
+  alert( typeof $ ); // если jQuery загрузилась -- выведет function
+</script>
+```
+
+Или так:
+
+```html
+<!--+ run -->
+<script src="http://code.jquery.com/jquery-latest.js"></script>
+
+<script>
+  alert( typeof $ ); // если jQuery загрузилась -- выведет function
+</script>
+```
+
diff --git a/3-more/3-jquery-stub/2-jquery-search/article.md b/3-more/3-jquery-stub/2-jquery-search/article.md
new file mode 100644
index 00000000..d056509d
--- /dev/null
+++ b/3-more/3-jquery-stub/2-jquery-search/article.md
@@ -0,0 +1,294 @@
+# jQuery: поиск элементов
+
+Когда-то давным давно, когда деревья были большими, один молодой парень по имени <a href="http://ejohn.org/">Джон Ресиг</a> решил создать библиотеку для поиска элементов в DOM.
+[cut]
+
+## Немного истории
+
+Браузеры тогда не давали возможности искать по CSS-селекторам, поэтому библиотеку назвали "jQuery" (**J**avaScript **Query**). 
+
+Поиск получился хорошо, и Джон стал прикручивать к библиотеке новые возможности, и со временем jQuery стала такой, как мы видим её сейчас. 
+
+[smart header="Sizzle"]
+...А функционал поиска со временем был выделен в отдельный проект: [движок Sizzle](http://sizzlejs.com/).
+
+Это позволяет взять от jQuery только поиск и встроить в другую библиотеку. Например, фреймворк [Dojo Toolkit](http://dojotoolkit.org) можно собрать со своим поиском, а можно и с Sizzle.
+[/smart] 
+
+## Поиск в jQuery
+
+"Сердцем" jQuery является функция `$()`. Все вызовы делаются через `$`. Это самая обычная функция, которая объявлена библиотекой. Как мы помним, символ `"$"` является допустимым символом для имён в JavaScript. 
+
+Простейший поиск элементов выглядит так:
+
+```js
+var result = $('...CSS-селектор...');
+```
+
+Например, `$("div a")` -- ссылки `a` внутри `div`. 
+
+Возможны и более сложные запросы, например:
+
+```js
+var list = $('li > a:odd:not([href^="http://"])');
+// расшифровка: нечётные (:odd) ссылки внутри li,
+// кроме тех (:not), у которых атрибут href начинается c http://
+```
+
+Вызов `$(селектор)` аналогичен `document.querySelectorAll(селектор)`, но:
+<ol>
+<li>Во-первых, поддерживается всеми браузерами, включая старые IE. Список CSS3-селекторов можно найти в главе [](/css-selectors).</li>
+<li>Во-вторых, jQuery предоставляет свои поисковые расширения, например псевдофильтр `:checked` -- выбранные элементы `input` и `option`, `:header` -- заголовок `h1..6`, и другие, более полный список которых доступен [в документации](http://api.jquery.com/category/selectors/).</li>
+</ol>
+
+[warn header="Поиск: `querySelectorAll` и Sizzle"]
+
+При выполнении выборки jQuery сначала определяет, имеет ли селектор простой вид, например `#menu` или `body`, то есть можно ли получить результат сразу вызовом `getElementById` или через `document.body`. Проверяется и ряд других простейших случаев. Если да -- отлично, если нет -- jQuery пытается получить результат вызовом `querySelectorAll`. 
+
+Если и `querySelectorAll` не срабатывает, то jQuery задействует свой поисковой движок [Sizzle](http://sizzlejs.com).
+
+Обычно "не срабатывает", когда либо браузер старый, либо запрос использует jQuery-расширения, не входящие в CSS3. Стоит ли говорить, что поиск по Sizzle обычно медленнее, чем встроенный браузерный? Поэтому к использованию jQuery-расширений стоит подходить осторожно и не применять их в "узких" местах.
+[/warn]
+
+## Перебор результатов
+
+Результатом поиска является jQuery-объект. Он похож на массив: в нём есть нумерованные элементы и `length`.
+
+jQuery-объект также называют "jQuery-коллекцией", "элементами, обёрнутыми в jQuery" и десятком других жаргонных терминов.
+
+Используем jQuery, чтобы выбрать все элементы по селектору `li > a` и перебрать их:
+
+```html
+<!--+ run -->
+<!-- подключить библиотеку -->
+<script src="http://code.jquery.com/jquery.js"></script>
+
+<ul>
+  <li><a href="http://jquery.com">jQuery</a></li>
+  <li><a href="http://jqueryui.com">jQuery UI</a></li>
+  <li><a href="http://blog.jquery.com">jQuery Blog</a></li>
+</ul>
+
+<script>
+*!*
+var links = $('li > a');
+*/!*
+
+// перебор результатов
+for(var i=0; i<links.length; i++) {
+  alert( links[i].href );
+}
+</script>
+```
+
+## Поиск внутри элемента
+
+Для поиска внутри какого-либо элемента -- можно передать его вторым аргументом `$`.
+
+Например, найдём все `a` внутри `#menu`:
+
+```js
+var menu = document.getElementById('menu');
+*!*
+$('a', menu); // поиск аналогичен menu.querySelectorAll('a')
+*/!*
+```
+
+Второй аргумент в этом случае называются "контекстом поиска". 
+
+В качестве контекста можно передать не только DOM-элемент, но и селектор:
+
+```js
+   
+$('a', '#menu' );
+```
+
+Также можно передать результат другого поиска:
+
+```js
+var menu = $('#menu');
+$('a', menu);
+```
+
+**Не важно, в каком виде мы хотим указать контекст: DOM-элемент, строка или результат поиска -- jQuery понимает всё.**
+
+А что, если контекст поиска содержит много элементов? Например, как будет работать запрос `$('a', 'li')`, если `<li>` в документе много? 
+
+Здесь все немного сложнее, но, тем не менее, интуитивно понятно.
+
+**Если в контексте много элементов, то поиск будет произведён в каждом из них. А затем результаты будут объединены.** 
+
+Повторы элементов при этом отфильтровываются, то есть два раза один и тот же элемент в результате не появится.
+
+Например, найдём `$('a', 'li')` в многоуровневом списке:
+
+```html
+<!--+ run -->
+<script src="http://code.jquery.com/jquery.js"></script>
+
+<ul>
+  <li>
+    <a href="http://jquery.com">jQuery</a>
+    <ul>
+      <li><a href="http://blog.jquery.com">jQuery Blog</a></li>
+    </ul>
+  </li>
+  <li><a href="http://sizzlejs.com">Sizzle</a></li>
+</ul>
+
+<script>
+*!*
+var links = $('a', 'li'); 
+*/!*
+
+for(var i=0; i<links.length; i++) {
+  alert( i + ": " +  links[i].href ); // 3 ссылки по очереди
+}
+</script>
+```
+
+## Метод each 
+
+Для более удобного перебора у jQuery-коллекции есть метод [each](http://api.jquery.com/each/). Его синтаксис похож на [forEach](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach) массива:
+
+```js
+.each( function(index, item) )
+```
+
+Он выполняет для каждого элемента коллекции перед точкой функцию-аргумент, и передаёт ей номер `index` и  очередной элемент `item`.
+
+Используем его вместо `for`, чтобы перебрать коллекцию найденных ссылок:
+
+```js
+$('li a').each(function(i, a) {
+  alert( i + ": " + a.href); 
+});
+```
+
+**У `.each` есть важная возможность, которой нет в `forEach`: возврат `false` из функции прекращает перебор.**
+
+Например:
+
+```html
+<!--+ run -->
+<script src="http://code.jquery.com/jquery.js"></script>
+
+<a href="http://wikipedia.ru">Википедия</a>
+
+<ul>
+  <li><a href="http://jquery.com">jQuery</a></li>
+  <li><a href="http://sizzlejs.com">Sizzle</a></li>
+  <li><a href="http://blog.jquery.com">jQuery Blog</a></li>
+</ul>
+
+<script>
+var links = $('li a'); // найти все ссылки на странице внутри LI
+
+*!*
+links.each(function(i, a) {
+  alert(i + ': ' + a.innerHTML);
+
+  if (i == 1) return false; // стоп на элементе коллекции с индексом 1
+});
+*/!*
+</script>
+```
+
+**При переборе `each`, текущий элемент передаётся как `this`.**
+
+Можно было бы использовать это, чтобы сделать код короче:
+
+```js
+$('li a').each(function(i) {
+  alert(i + ': ' + *!*this*/!*.innerHTML);
+
+  if (i == 1) return false; 
+});
+```
+
+## Получение конкретного элемента
+
+Даже если элемент найден только один, всё равно результатом поиска будет jQuery-коллекция.
+
+Если нам нужен один элемент из неё -- есть много способов его получить. Рассмотрим основные:
+
+<ol>
+<li>**Прямой доступ по номеру:**
+
+```js
+//+ run
+alert( $('body')[0] ); // BODY
+```
+
+Это -- самый быстрый и прямой доступ, он использует внутреннюю структуру jQuery-коллекции: элементы там хранятся по индексам. Но этим он нарушает принцип инкапсуляции. 
+
+Вообще-то, в jQuery есть специальные методы для получения элемента по номеру, и сейчас мы будем говорить о них.
+
+</li>
+<li>**Метод [get(индекс)](http://api.jquery.com/get/), работает так же, как прямой доступ:**
+
+```js
+//+ run
+alert( $('body').get(0) ); // BODY
+```
+
+Если элемента с таким номером нет -- вызов `get` возвратит `undefined`.
+
+</li>
+<li>**Метод [eq(индекс)](http://api.jquery.com/eq/) возвращает коллекцию из одного элемента -- с данным номером.**
+
+Он отличается от метода [get(индекс)](http://api.jquery.com/get/) и прямого обращения по индексу тем, что возвращает именно jQuery-коллекцию с одним элементом, а не сам элемент.
+
+Например:
+
+```js
+// DOM-элемент для первой ссылки
+$('a').get(0);
+
+// jQuery-объект из одного элемента: первой ссылки
+$('a').eq(0);
+```
+
+Во втором случае вызов `eq` создаёт новую jQuery-коллекцию, добавляет в нее нулевой элемент и возвращает. Это удобно, если мы хотим дальше работать с этим элементом, используя методы jQuery.
+
+Если элемента с таким номером нет -- `eq` возвратит пустую коллекцию.
+</li>
+</ol>
+
+
+## "Сцепление" вызовов
+
+Почти все методы jQuery-объекта возвращают jQuery-объект -- либо новый, либо тот  на котором вызваны.
+
+**Поэтому можно вызывать методы один за другим.**
+
+Это называют *"сцепление"* вызовов, или *"чейнинг"* (от англ. "chaining"):
+
+```js
+$('li a[href$=".pdf"]') // ссылки, оканчивающиеся на pdf
+*!*
+  .each(function() {
+*/!*
+    this.className = "pdf"; // дать им класс
+  })
+*!*
+  .each(function() {     
+*/!*
+    alert(this.href); // вывести
+  });
+```
+
+Для удобства чтения каждый новый вызов в чейнинге идёт с отступом и с новой строки.
+
+## Итого
+
+Для поиска элементов можно вызвать `$(CSS-селектор[, контекст])`. Результатом будет jQuery-объект, который можно:
+<ul>
+<li>Перебирать как массив.</li>
+<li>Перебирать методом [each](http://api.jquery.com/each/).</li>
+<li>Получить один элемент прямым доступом по индексу, либо вызовом [get](http://api.jquery.com/get/) или  [eq](http://api.jquery.com/eq/).</li>
+</ul>
+
+Для поиска используется, по возможности, `querySelectorAll`, либо если он не может обработать запрос -- встроенный движок Sizzle.
+
+
diff --git a/3-more/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/solution.md b/3-more/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/solution.md
new file mode 100644
index 00000000..290f6050
--- /dev/null
+++ b/3-more/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/solution.md
@@ -0,0 +1,6 @@
+
+
+```js
+var result = $(elem).parents().addBack();
+```
+
diff --git a/3-more/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/task.md b/3-more/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/task.md
new file mode 100644
index 00000000..7009d5fc
--- /dev/null
+++ b/3-more/3-jquery-stub/3-jquery-traversal/1-select-parents-with-self/task.md
@@ -0,0 +1,19 @@
+# Выберите всех родителей вместе с элементом
+
+[importance 5]
+
+Есть элемент `elem`. Выберите в jQuery всех его родителей и сам элемент. 
+
+Например, для `LI` из примера выше должна получиться коллекция `HTML, BODY, UL, LI`:
+
+```html
+<html>
+  <body>
+    <ul>
+      <li>Текст</li>
+    </ul>
+  </body>
+</html>
+```
+
+Код должен быть как можно короче.
\ No newline at end of file
diff --git a/3-more/3-jquery-stub/3-jquery-traversal/article.md b/3-more/3-jquery-stub/3-jquery-traversal/article.md
new file mode 100644
index 00000000..d1ad40cb
--- /dev/null
+++ b/3-more/3-jquery-stub/3-jquery-traversal/article.md
@@ -0,0 +1,458 @@
+# Навигация по jQuery-коллекции
+
+Мы умеем перебирать коллекцию, получать нужный элемент по номеру. Достаточно ли этого?
+
+Конечно нет! По коллекции нужно путешествовать. Получать детей, искать родителей, выбирать элементы по условию, и чтобы это было удобно. 
+[cut]
+
+## Шпаргалка по методам
+
+Методов для навигации по коллекции много. Их гораздо проще воспринять, если разбить на группы.
+
+Итак, на картинке ниже:
+<ul>
+<li>По центру -- действия с текущей коллекцией: фильтрация, добавление, изменение и т.п.</li>
+<li>Сверху -- методы для доступа к родителям.</li>
+<li>Снизу -- для поиска среди потомков.</li>
+<li>Слева/справа -- для поиска соседей.</li>
+</ul>
+
+[pre]
+<style>
+.jqt-td {
+  border: 2px solid #F79646;
+  text-align: center;
+  border-radius: 2px;
+}
+.jqt-table {
+  border-collapse: separate;
+  border-spacing: 10px 10px;
+}
+.jqt-table a {
+  color: blue;
+  margin: 0 2px;
+}
+</style>
+
+
+<table class="jqt-table">
+<tr>
+<td>&nbsp;</td>
+<td class="jqt-td">
+<a href="http://api.jquery.com/parent">parent</a>
+<a href="http://api.jquery.com/parents">parents</a>
+<a href="http://api.jquery.com/parentsUntil">parentsUntil</a><br>
+<a href="http://api.jquery.com/closest">closest</a>
+</td>
+<td>&nbsp;</td>
+</tr>
+<tr>
+<td class="jqt-td">
+<a href="http://api.jquery.com/prev">prev</a>
+<a href="http://api.jquery.com/prevAll">prevAll</a> 
+<a href="http://api.jquery.com/prevUntil">prevUntil</a><br>
+<a href="http://api.jquery.com/siblings">siblings</a>
+</td>
+<td class="jqt-td" style="border-color: red">
+<a href="http://api.jquery.com/filter">filter</a> 
+<a href="http://api.jquery.com/not">not</a>
+<a href="http://api.jquery.com/has">has</a><br>
+<a href="http://api.jquery.com/eq">eq</a> 
+<a href="http://api.jquery.com/first">first</a>
+<a href="http://api.jquery.com/last">last</a>
+<a href="http://api.jquery.com/slice">slice</a><br>
+<a href="http://api.jquery.com/is">is</a> 
+<a href="http://api.jquery.com/add">add</a>
+<a href="http://api.jquery.com/add">map</a>
+</td>
+<td class="jqt-td">
+<a href="http://api.jquery.com/next">next</a> 
+<a href="http://api.jquery.com/nextAll">nextAll</a> 
+<a href="http://api.jquery.com/nextUntil">nextUntil</a><br>
+<a href="http://api.jquery.com/siblings">siblings</a>
+</td>
+</tr>
+<tr>
+<td>&nbsp;</td>
+<td class="jqt-td">
+<a href="http://api.jquery.com/find">find</a><br>
+<a href="http://api.jquery.com/children">children</a> 
+<a href="http://api.jquery.com/contents">contents</a>
+</td>
+<td>&nbsp;</td>
+</tr>
+</table>
+[/pre]
+
+Так как методов много, то запомнить их все сложно, да и не нужно. Достаточно знать, какие есть, а при необходимости -- обратиться к этой странице или к [официальной документации](http://api.jquery.com/category/traversing/).
+
+У этих методов очень хорошие названия, они станут очевидны, как только мы их рассмотрим чуть подробнее.
+
+## По текущей коллекции
+
+<dl>
+<dt><a href="http://api.jquery.com/filter">filter(фильтр)</a>, <a href="http://api.jquery.com/not">not(фильтр)</a>, <a href="http://api.jquery.com/has">has(фильтр)</a></dt>
+<dd>Возвращают отфильтрованную коллекцию, содержащую только элементы...
+<ul>
+<li>для `filter` -- подходящие под фильтр,</li>
+<li>для `not` -- не подходящие под фильтр,</li>
+<li>для `has` -- содержащие потомка, подходящего под фильтр.</li>
+</ul>
+
+```html
+<!--+ jquery run -->
+<ul>
+  <li><code>filter</code>: <i>только подходящие</i>.</li>
+  <li><code>not</code>: <em>не подходящие</em>.</li>
+  <li><code>has</code>: <i>по потомкам</i>.</li>
+  <li>...</li>
+</ul>
+
+<script>
+var list = $('li');
+
+// вызовом css('color', ..) поставим цвет элементам:
+
+*!*
+list.filter(':even').css('color', 'blue');// ФИЛЬТР: чётные 
+list.not(':even').css('color', 'green');  // НЕ чётные
+list.has('em').css('background', 'pink'); // СОДЕРЖАТ em
+*/!*
+
+</script>
+```
+
+В качестве фильтра может быть использована также функция, принимающая элемент как `this` и возвращающая `true/false`:
+
+```html
+<!--+ jquery run -->
+<ul>
+  <li><code>filter</code>: <i>только подходящие</i>.</li>
+  <li><code>not</code>: <em>не подходящие</em>.</li>
+  <li><code>has</code>: <i>по потомкам</i>.</li>
+  <li>...</li>
+</ul>
+
+<script>
+var list = $('li');
+
+// ФИЛЬТР: первый ребёнок - текстовый узел
+*!*
+var result = list.filter(function() { 
+  return this.firstChild.nodeType == 3;
+});
+*/!*
+
+alert( result.length ); // 1, это последний LI
+</script>
+```
+
+</dd>
+<dt><a href="http://api.jquery.com/eq">eq(n)</a>, <a href="http://api.jquery.com/first">first</a>, <a href="http://api.jquery.com/last">last</a>, <a href="http://api.jquery.com/slice">slice(start, end)</a></dt>
+<dd>Возвращает новую коллекцию...
+<ul>
+<li>`eq(n)` -- с одним элементом по его номеру,</li>
+<li>`first/last` -- из первого/последнего элемента,</li>
+<li>`slice(start[, end])` -- из элементов с номера `start` до `end`.</li>
+</ul>
+</dd>
+<dt><a href="http://api.jquery.com/is">is(фильтр)</a></dt>
+<dd>Возвращает `true`, если *какой-нибудь* элемент из коллекции подходит под фильтр.
+
+```html
+<!--+ jquery run -->
+<ul>
+  <li><code>filter</code>: <i>только подходящие</i>.</li>
+  <li><code>not</code>: <em>не подходящие</em>.</li>
+  <li><code>has</code>: <i>по потомкам</i>.</li>
+  <li class="other">...</li>
+</ul>
+
+<script>
+var list = $('ul').children();
+
+*!*
+alert( list.is('li') ); // true
+alert( list.is('.other') ); // true
+alert( list.is(':hidden') ); // false
+*/!*
+</script>
+```
+
+</dd>
+<dt><a href="http://api.jquery.com/add">add(элементы)</a></dd>
+<dd>Возвращает новую коллекцию из элементов текущей и новых, по селектору.
+
+```html
+<!--+ jquery run -->
+<ul>
+  <li><code>filter</code>: <i>только подходящие</i>.</li>
+  <li><code>not</code>: <em>не подходящие</em>.</li>
+  <li><code>has</code>: <i>по потомкам</i>.</li>
+  <li class="other">...</li>
+</ul>
+
+<script>
+var elems = $('ul');
+
+// можно добавить элемент DOM
+var li = document.getElementsByTagName('li')[0];
+*!*
+elems = elems.add( li );
+*/!*
+alert(elems.length); // 2
+
+*!*
+elems = elems.add( '.other' ); // можно - по селектору
+*/!*
+alert(elems.length); // 3
+
+*!*
+elems = elems.add( $('li') );  // можно - коллекцию
+*/!*
+alert(elems.length); // 5, дубликаты удаляются
+</script>
+```
+
+Важно: эта функция не меняет текущую коллекцию, она создаёт новую из существующих и добавленных элементов.
+
+</dd>
+<dt><a href="http://api.jquery.com/add">map(функция)</a></dt>
+<dd>Этот метод стоит особняком. Он не меняет коллекцию, не ищет в ней, а пропускает её через функцию и возвращает результаты.
+
+```html
+<!--+ jquery run -->
+<ul>
+  <li><code>filter</code>: <i>только подходящие</i>.</li>
+  <li><code>not</code>: <em>не подходящие</em>.</li>
+  <li><code>has</code>: <i>по потомкам</i>.</li>
+  <li class="other">...</li>
+</ul>
+
+<script>
+$('code')
+ .css('color', 'red') // подсветить CODE красным
+*!*
+ .map(function() { 
+  return this.parentNode; // получить коллекцию родителей CODE
+ })
+*/!*
+ .css('color', 'green'); // подсветить их зелёным
+</script>
+```
+
+</dd>
+</dl>
+
+Заметим две приятные особенности:
+<ul>
+<li>Большинство методов, которые осуществляют фильтрацию, могут принимать как селектор так и фильтрующую функцию. jQuery любит функции.</li>
+<li>Большинство методов, которые принимают элементы, могут получать их в виде jQuery-коллекции или селектора. Главное, чтобы найти по этому можно было.</li>
+</ul>
+
+## По родителям
+
+<dl>
+<dt>[parent()](http://api.jquery.com/parent/), [parents(фильтр)](http://api.jquery.com/parents/), [parentsUntil(стоп, фильтр)](http://api.jquery.com/parentsUntil/)</dt>
+<dd>Родители -- один `parent`, все `parents(фильтр)` (с фильтром по селектору) и до определённого `parentsUntil(где остановиться, селектор для элементов)`.</dd>
+<dt>[closest(фильтр, элемент-контейнер)](http://api.jquery.com/closest/)</dt>
+<dd>Ищет одного, ближайшего, родителя, подходящего под селектор.
+
+Второй, необязательный, аргумент `элемент-контейнер`, если он передан, ограничивает поиск. jQuery будет идти вверх до тех пор, пока не встретит этот DOM-элемент.
+
+```html
+<!--+ run -->
+<script src="http://code.jquery.com/jquery.js"></script>
+
+<ul id="1">
+  <li><a href="http://blog.jquery.com">jQuery Blog</a></li>
+  <li><a href="http://sizzlejs.com">Sizzle</a></li>
+</ul>
+
+<script>
+var link = $('a[href*="blog"]'); // ссылка, атрибут href содержит "blog"
+
+*!*
+var ul = link.closest('ul'); // ближайший сверху UL
+*/!*
+alert( ul[0].id ); // 1
+
+*!*
+var li = $('li')[0];
+ul = link.closest('ul', li); // ближайший сверху UL, но внутри LI
+*/!*
+alert( ul.length ); // 0, нет таких 
+</script>
+```
+
+</dd>
+</dl>
+
+## По потомкам
+
+<dl>
+<dt>[find(селектор)](http://api.jquery.com/find/)</dt>
+<dd>Ищет в потомках по селектору.
+
+```js
+// для каждого LI искать CODE среди потомков, вернуть их коллекцию
+$('li').find('code');
+```
+
+</dd>
+<dt>[children(селектор)](http://api.jquery.com/children/), [contents()](http://api.jquery.com/contents/)</dt>
+<dd>Выбирает детей по селектору, без аргументов -- всех детей:
+
+```html
+<!--+ jquery run -->
+<ul>
+  <li><code>filter</code>: <i>только подходящие</i>.</li>
+  <li><code>not</code>: <em>не подходящие</em>.</li>
+  <li><code>has</code>: <i>по потомкам</i>.</li>
+  <li class="other">...</li>
+</ul>
+
+<script>
+$('li')
+*!*
+ .children('code') // вернуть всех детей LI, подходящих под селектор code  
+*/!*
+ .css('color', 'red'); // подсветить
+</script>
+```
+
+Метод [contents()](http://api.jquery.com/contents/) -- также возвращает детей, но в отличие от `children` -- узлы всех типов, включая текстовые и комментарии, а не только узлы-элементы.
+
+```html
+<!--+ jquery run -->
+<ul>
+  <li><code>filter</code>: <i>только подходящие</i>.</li>
+  <li><code>not</code>: <em>не подходящие</em>.</li>
+  <li><code>has</code>: <i>по потомкам</i>.</li>
+  <li class="other">...</li>
+</ul>
+
+<script>
+$('li') 
+*!*
+ .contents()  // все узлы-дети LI
+*/!*
+ .map(function() {  // обернуть текстовые узлы в скобки
+    if (this.nodeType == 3) this.data = "("+this.data+")" 
+  });
+</script>
+```
+
+</dd>
+</dl>
+
+## По соседям
+
+<dl>
+<dt><a href="http://api.jquery.com/prev">prev()</a>, <a href="http://api.jquery.com/prevAll">prevAll(фильтр)</a>, <a href="http://api.jquery.com/prevUntil">prevUntil(элемент, фильтр)</a></dt>
+<dd>Получить левого соседа `prev`, всех левых соседей `prevAll` или всех левых соседей `prevUntil` до указанного (`элемент`), подходящих под фильтр.</dd>
+<dt><a href="http://api.jquery.com/next">next()</a>, <a href="http://api.jquery.com/nextAll">nextAll(фильтр)</a>, <a href="http://api.jquery.com/nextUntil">nextUntil(элемент, фильтр)</a></dt>
+<dd>То же самое, но правые соседи.</dd>
+<dt><a href="http://api.jquery.com/siblings">siblings()</a></dt>
+<dd>Получить коллекцию всех соседей.</dd>
+</dl>
+
+
+## Стек селекторов: методы end и addBack
+
+Все методы не влияют на текущую коллекцию, они создают и возвращают новую.
+
+При каждом новом поиске возвращается jQuery-объект с результатом.
+
+**Предыдущий jQuery-объект при этом не теряется, к нему всегда можно вернуться вызовом [end()](http://api.jquery.com/end/).**
+
+Посмотрим это на примере задачи. Допустим, мы нашли форму `$('form')` и хотим выбрать все чекбоксы в ней.
+
+Можно сделать это так:
+
+```js
+$('form')
+  .find(':checkbox')
+  .each(function() { ... }); // сделать что-то с элементами коллекции
+```
+
+...И теперь хотим поискать в этой же форме что-то ещё. 
+
+Самый очевидный способ это сделать -- сохранить `$('form')` в переменной:
+
+```js
+var form = $('form');
+
+form
+  .find(':checkbox')
+  .each(function() { ... });
+
+form
+  .find(':radio')
+  .each(function() { ... });
+```
+
+...Но на самом деле в этом нет необходимости.
+
+jQuery, при вызове `find` сохраняет предыдущую найденную коллекцию, к которой можно вернуться вызовом `end()`:
+
+```js
+$('form')
+  .find(':checkbox') // нашли чекбоксы внутри
+  .each(function() { ... }) // обработали
+*!*
+  .end() // вернулись обратно на форму
+*/!*
+  .find(':radio') // поискали другие элементы внутри..
+  .each(function() { ... }); // сделали с ними что-то ещё
+```
+
+**Метод [addBack(selector)](http://api.jquery.com/addBack/) добавляет элементы из предыдущей коллекции к текущей.**
+ 
+Если указать селектор, то он отфильтрует их.
+
+Этот метод бывает очень удобен, когда какую-то операцию нужно сделать как с детьми, так и с самим элементом, например:
+
+```js
+$('ul')       // коллекция: UL
+  .children() // получить коллекцию LI
+  .addBack()  // добавить к ней сам UL
+  .each(...)   // теперь у нас коллекция LI и UL-родитель
+```
+
+Полный список методов вы найдёте в [разделе Traversing](http://api.jquery.com/category/traversing/) документации. При использовании jQuery, вы часто будете иметь с ними дело и отлично запомните.
+
+## Неэффективность jQuery
+
+Для ряда задач jQuery-методы поиска по коллекции неэффективны.
+
+Например, нужно найти первого потомка. Некоторые способы:
+
+```js
+elem.children(':first');
+elem.children().first();
+$(':first-child', elem);
+```
+
+Все эти способы неэффективны. Особенно первые два.
+
+<ol>
+<li>Первый проходит всех детей, по псевдо-фильтру выбирая нужного.</li>
+<li>Второй копирует детей в коллекцию, а потом получает из неё первый элемент.</li>
+<li>Третий запускает `querySelectorAll(':first-child)` (на самом деле там чуть сложнее, но не суть важно) в контексте `elem`. Здесь, с первого взгляда, нет копирования всех детей, но внутренний алгоритм браузера для выполнения `querySelectorAll` всё равно работает полным перебором. Впрочем, это будет намного быстрее, чем предыдущие решения.</li>
+</ol>
+
+Обычный же вызов `elem[0].children[0]` на порядки обгонит все вышеприведённые способы, особенно если детей много.
+
+Какой вывод из этого?
+
+**Там, где потеря в производительности некритична, используем jQuery -- для удобства. Это большинство случаев. Там, где она важна -- обращаемся к обычному DOM.**
+
+
+
+
+
+
+
+
+
diff --git a/3-more/3-jquery-stub/4-jquery-dom/article.md b/3-more/3-jquery-stub/4-jquery-dom/article.md
new file mode 100644
index 00000000..a6599891
--- /dev/null
+++ b/3-more/3-jquery-stub/4-jquery-dom/article.md
@@ -0,0 +1,45 @@
+# Методы для работы с DOM [в работе]
+
+jQuery-коллекции предоставляют полный набор методов для DOM-манипуляций. И кое-что сверху...
+
+[cut]
+
+## Классы и стили
+
+<ul>
+<li>addClass, hasClass, removeClass</li>
+</ul>
+
+attr
+prop
+css
+
+Таблица методов:
+
+
+
+<dl>
+<dt>.append(parent)</dt>
+<dd>Вставить последним потомком `parent`</dd>
+<dt>.prepend(parent)</dt>
+<dd>Вставить первым потомком `parent`</dd>
+<dt>.insertAfter(sibling)</dt>
+<dd>Вставить сразу после элемента `sibling`</dd>
+<dt>.insertBefore(sibling)</dt>
+<dd>Вставить сразу перед элементом `sibling`</dd>
+<dt>.remove()</dt>
+<dd>Удалить элемент из DOM, удалить связанные с ним данные и обработчики событий.</dd>
+<dt>.detach()</dt>
+<dd>Удалить элемент из DOM, не удаляя связанные с ним данные и обработчики.</dd>
+<dt>.empty()</dt>
+<dd>Удалить всех потомков вызовом remove</dd>
+
+</dl>
+
+Зеркальные методы:
+<ul>
+<li>append -> appendTo</li>
+<li>prepend -> prependTo</li>
+<li>insertAfter -> after</li>
+<li>insertBefore -> before</li>
+
diff --git a/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.md b/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.md
new file mode 100644
index 00000000..099f5e81
--- /dev/null
+++ b/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.md
@@ -0,0 +1 @@
+[edit src="solution"]Открыть в песочнице[/edit]
\ No newline at end of file
diff --git a/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/bagua.css b/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/bagua.css
new file mode 100755
index 00000000..b390d188
--- /dev/null
+++ b/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/bagua.css
@@ -0,0 +1,52 @@
+#bagua-table th {
+	text-align:center;
+	font-weight:bold;	
+}
+
+#bagua-table td {
+	width: 150px;
+	white-space: nowrap;
+	text-align:center;
+	vertical-align: bottom;
+	padding-top: 5px;
+	padding-bottom: 12px;
+}
+
+#bagua-table .nw {
+	background-color: #999;
+}
+
+#bagua-table .n {
+	background-color: #03f;
+	color: #fff;
+}
+
+#bagua-table .ne {
+	background-color: #ff6;
+}
+
+#bagua-table .w {
+	background-color: #ff0;
+}
+#bagua-table .c {
+	background-color: #60c;
+	color: #fff;
+}
+#bagua-table .e {
+	background-color: #09f;
+	color: #fff;
+}
+
+#bagua-table .sw {
+	background-color: #963;
+	color: #fff;
+}
+
+#bagua-table .s {
+	background-color: #f60;
+	color: #fff;
+}
+#bagua-table .se {
+	background-color: #0c3;
+	color: #fff;
+}
diff --git a/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/index.html b/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/index.html
new file mode 100755
index 00000000..d11ea4f7
--- /dev/null
+++ b/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/solution.view/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link type="text/css" rel="stylesheet" href="bagua.css">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+</head>
+<body>
+
+  <table id="bagua-table">
+    <tr>
+      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+    </tr>
+    <tr>
+      <td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
+      </td>
+      <td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
+      </td>
+      <td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
+      </td>
+    </tr>
+    <tr>  
+      <td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
+      </td>
+      <td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
+      </td>
+      <td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
+      </td>
+    </tr>
+    <tr>  
+      <td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
+      </td>
+      <td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
+      </td>
+      <td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
+      </td>
+    </tr>
+
+  </table>
+
+  <script>
+    var highlightedCell;
+    
+    $('#bagua-table').on('click', 'td', function() {
+      if (highlightedCell) {
+        highlightedCell.css('background-color', '');
+      }
+      highlightedCell = $(this)
+        .css('background-color', 'red');
+    });
+
+  </script>
+
+</body>
+</html>
diff --git a/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/bagua.css b/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/bagua.css
new file mode 100755
index 00000000..b390d188
--- /dev/null
+++ b/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/bagua.css
@@ -0,0 +1,52 @@
+#bagua-table th {
+	text-align:center;
+	font-weight:bold;	
+}
+
+#bagua-table td {
+	width: 150px;
+	white-space: nowrap;
+	text-align:center;
+	vertical-align: bottom;
+	padding-top: 5px;
+	padding-bottom: 12px;
+}
+
+#bagua-table .nw {
+	background-color: #999;
+}
+
+#bagua-table .n {
+	background-color: #03f;
+	color: #fff;
+}
+
+#bagua-table .ne {
+	background-color: #ff6;
+}
+
+#bagua-table .w {
+	background-color: #ff0;
+}
+#bagua-table .c {
+	background-color: #60c;
+	color: #fff;
+}
+#bagua-table .e {
+	background-color: #09f;
+	color: #fff;
+}
+
+#bagua-table .sw {
+	background-color: #963;
+	color: #fff;
+}
+
+#bagua-table .s {
+	background-color: #f60;
+	color: #fff;
+}
+#bagua-table .se {
+	background-color: #0c3;
+	color: #fff;
+}
diff --git a/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/index.html b/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/index.html
new file mode 100755
index 00000000..569a4132
--- /dev/null
+++ b/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/source.view/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link type="text/css" rel="stylesheet" href="bagua.css">
+</head>
+<body>
+
+  <table id="bagua-table">
+    <tr>
+      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+    </tr>
+    <tr>
+      <td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
+      </td>
+      <td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
+      </td>
+      <td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
+      </td>
+    </tr>
+    <tr>  
+      <td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
+      </td>
+      <td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
+      </td>
+      <td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
+      </td>
+    </tr>
+    <tr>  
+      <td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
+      </td>
+      <td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
+      </td>
+      <td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
+      </td>
+    </tr>    
+  </table>
+
+  <script>
+  var table = document.getElementById('bagua-table');
+
+  var highlightedCell;
+
+  table.onclick = function(event) {
+    event = event || window.event;
+    var target = event.target || event.srcElement;
+
+    while(target != table) {
+      if(target.nodeName == 'TD') {
+        highlight(target);
+        return;
+      }
+      target = target.parentNode;
+    }
+  }
+
+  function highlight(node) {
+    if(highlightedCell) {
+      highlightedCell.style.backgroundColor = '';
+    }
+    highlightedCell = node;
+    node.style.backgroundColor = 'red';
+  }
+
+  </script>
+
+</body>
+</html>
diff --git a/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/task.md b/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/task.md
new file mode 100644
index 00000000..858511db
--- /dev/null
+++ b/3-more/3-jquery-stub/5-jquery-stub-article/1-rewrite-with-jquery/task.md
@@ -0,0 +1,7 @@
+# Перепишите на jQuery
+
+[importance 5]
+
+Перепишите делегирование на jQuery.
+
+[edit src="source" task/]
\ No newline at end of file
diff --git a/3-more/3-jquery-stub/5-jquery-stub-article/article.md b/3-more/3-jquery-stub/5-jquery-stub-article/article.md
new file mode 100644
index 00000000..e9b923b6
--- /dev/null
+++ b/3-more/3-jquery-stub/5-jquery-stub-article/article.md
@@ -0,0 +1,3 @@
+# ... [в работе]
+
+Раздел не будет доступен еще некоторое время.
diff --git a/3-more/3-jquery-stub/index.md b/3-more/3-jquery-stub/index.md
new file mode 100644
index 00000000..c3b1a546
--- /dev/null
+++ b/3-more/3-jquery-stub/index.md
@@ -0,0 +1,3 @@
+# jQuery: курс немолодого бойца [в работе]
+
+Пока материал этого раздела существует только в голове автора.
\ No newline at end of file
diff --git a/3-more/4-optimize/1-memory-leaks/article.md b/3-more/4-optimize/1-memory-leaks/article.md
new file mode 100644
index 00000000..4029b76b
--- /dev/null
+++ b/3-more/4-optimize/1-memory-leaks/article.md
@@ -0,0 +1,480 @@
+# Утечки памяти 
+
+*Утечки памяти* происходят, когда браузер по какой-то причине не может освободить память от недостижимых объектов.
+
+Обычно это происходит автоматически ([](/memory-management)). Кроме того, браузер освобождает память при переходе на другую страницу. Поэтому утечки в реальной жизни проявляют себя в двух ситуациях:
+
+[cut]
+<ol>
+<li>Приложение, в котором посетитель все время на одной странице и работает со сложным JavaScript-интерфейсом. В этом случае утечки могут постепенно съедать доступную память.</li>
+<li>Страница регулярно делает что-то, вызывающее утечку памяти. Посетитель (например, менеджер) оставляет компьютер на ночь включенным, чтобы не закрывать браузер с кучей вкладок. Приходит утром -- а браузер съел всю память <strike>и рухнул</strike> и сильно тормозит.</li>
+</ol>
+Утечки бывают из-за ошибок браузера, ошибок в расширениях браузера и, гораздо реже, по причине ошибок в архитектуре JavaScript-кода. Мы разберём несколько наиболее частых и важных примеров.
+
+## Коллекция утечек в IE
+
+### Утечка DOM ↔ JS в IE7-
+
+IE до версии 8 не умел очищать циклические ссылки, появляющиеся между DOM-объектами и объектами JavaScript. В результате и DOM и JS оставались в памяти навсегда.
+
+[warn header="Пропустите эту секцию, если IE8- не нужен"]
+Проблема была особенно серьезна в IE6 до SP3 (или до обновления июня 2007 года), там память не освобождалась даже при переходе на другую страницу. 
+
+Сейчас она существует в IE6, 7, а также, в облегчённом варианте, в IE8 (см. далее). Если вы не поддерживаете IE8-, то можете пропустить эту секцию.
+[/warn]
+
+Функция `setHandler` в примере ниже ведёт к утечке памяти в IE6,7:
+
+```js
+function setHandler() {
+  var elem = document.getElementById('id');
+  elem.onclick = function() {  
+    /* может быть пустая функция, не важно */ 
+  };
+}
+```
+
+Элемент `elem` здесь ссылается на JavaScript-функцию через ссылку `onclick` напрямую, через свойство, а функция ссылается на `elem` через замыкание.
+
+<img src="ie1.png">
+
+Здесь вместо DOM-элемента в IE может быть `XMLHttpRequest`, `ActiveX`, любой другой COM-объект. Круговая ссылка гарантирует утечку.
+
+
+**Обойти утечки памяти в IE можно, разорвав циклические ссылки.**
+
+Например, можно удалить ссылку на `elem` из замыкания, присвоив `elem = null`. Таким образом обработчик больше не ссылается на DOM-элемент. Циклическая ссылка разорвана:
+
+<img src="ie2.png">
+
+
+Больше информации об этой утечке вы можете почерпнуть из статей:  <a href="http://msdn.microsoft.com/en-us/library/ms976398.aspx">Understanding and Solving Internet Explorer Leak Patterns</a> и <a href="http://msdn.microsoft.com/en-us/library/dd361842%28v=vs.85%29.aspx">Circular Memory Leak Mitigation</a>. 
+
+
+### Утечка DOM ↔ JS, вариант для IE8-
+
+В браузере IE8 была проведена серьёзная работа над ошибками, и пример, описанный выше, больше не приводит к утечке.
+
+**Но ситуация исправлена не до конца. Утечка в IE8- появляется, если круговая ссылка возникает "через объект".**
+
+Чтобы было понятнее, о чём речь, посмотрите на следующий код. Он вызывает утечку памяти:
+
+```js
+function leak() {
+  // Создаём новый DIV, добавляем к BODY
+  var elem = document.createElement('div');
+  document.body.appendChild(elem);
+
+  // Записываем в свойство жирный объект
+  elem.__expando = {
+    bigAss: new Array(1000000).join('lalala')
+  };
+
+*!*
+  // Создаём круговую ссылку. Без этой строки утечки не будет.
+  elem.__expando.__elem = elem;
+*/!*
+
+  // Удалить элемент из DOM. Браузер должен очистить память.
+  elem.parentElement.removeChild(elem);
+}
+```
+
+<a href="/files/tutorial/leak/leak_ie8.html" target="_blank">Открыть в новом окне (в IE)</a>
+
+Этот пример, течёт в IE6,7,8, а также в IE9 в режиме совместимости с IE8. Проблема -- в круговой ссылке `elem.__expando__elem = elem`. 
+
+**Утечка может возникать и неявным образом, через замыкание:**
+
+```js
+function leak() {
+  var elem = document.createElement('div');
+  document.body.appendChild(elem);
+
+  elem.__expando = {
+    bigAss: new Array(1000000).join('lalala'),
+*!*
+    method: function() {} // создаётся круговая ссылка через замыкание
+*/!*
+  };
+
+  // Удалить элемент из DOM. Браузер должен очистить память.
+  elem.parentElement.removeChild(elem);
+}
+```
+
+<a href="/files/tutorial/leak/leak_ie8_2.html" target="_blank">Открыть в новом окне (в IE)</a>
+
+**Без метода `method` здесь утечки не возникнет.**
+
+Бывает ли такая ситуация в реальной жизни? Или это -- целиком синтетический пример, для заумных программистов?
+
+Да, конечно бывает. Например, при разработке графических компонент. 
+
+Во-первых, сам объект компонента хранит ссылку на его DOM-элемент, чтобы работать с ним. Например:
+
+```js
+function Menu(elem) {
+  elem.onclick = function() {
+    // ссылка на elem осталась в замыкании
+  };
+}
+
+var menu = new Menu(elem);
+```
+
+То есть, компонент всегда знает свой элемент. 
+
+Но бывают ситуации, когда нужно пойти в обратном направлении, а именно -- по элементу определить, какой на нём компонент. Например, при делегировании, чтобы передать обработку события на элементе соответствующему компоненту. Или при Drag'n'Drop, чтобы получить компонент, соответствующий элементу, на который произведён перенос.
+
+Сама задача не является чем-то из ряда вон выходящим. Вполне естественно, что JS-компонент привязан к элементу, а элемент знает о компоненте на нём. Но в IE8- прямая привязка ведёт к утечке памяти!
+
+```js
+function Menu(elem) {
+  elem.onclick = function() {};
+}
+
+var menu = new Menu(elem); // Menu содержит ссылку на elem
+*!*
+elem.menu = menu; // вот такая привязка или что-то подобное ведёт к утечке
+```
+
+<a href="/files/tutorial/leak/leak_ie8_widget.html" target="_blank">Открыть в новом окне (в IE)</a>
+
+Такая привязка удобна, т.к. мы по DOM-элементу можем получить JS-компонент, который к нему привязан. Но, как видим, ведёт к утечке в IE8-.
+
+### Утечка IE8 при обращении к коллекциям таблицы
+
+Эта утечка происходит только в IE8 в стандартном режиме. В нём при обращении к табличным псевдо-массивам (напр. `rows`) создаются и не очищаются внутренние ссылки, что приводит к утечкам.
+
+Также воспроизводится в новых IE в режиме совместимости с IE8.
+
+Код:
+
+```js
+var elem = document.createElement('div'); // любой элемент
+
+function leak() {
+     
+    elem.innerHTML = '<table><tr><td>1</td></tr></table>';
+
+*!*
+    elem.firstChild.rows[0]; // просто доступ через rows[] приводит к утечке
+    // при том, что мы даже не сохраняем значение в переменную
+*/!*
+
+    elem.removeChild(elem.firstChild); // удалить таблицу (*)
+    // alert(elem.childNodes.length) // выдал бы 0, elem очищен, всё честно
+}
+```
+
+<a href="/files/tutorial/leak/leak_ie8_table.html" target="_blank">Открыть в новом окне (в IE)</a>
+
+Особенности:
+<ul>
+<li>Если убрать отмеченную строку, то утечки не будет.</li>
+<li>Если заменить строку `(*)` на `elem.innerHTML = ''`, то память будет очищена, т.к. этот способ работает по-другому, нежели просто `removeChild` (см. главу [](/memory-management)).</li>
+<li>Утечка произойдёт не только при доступе к `rows`, но и к другим свойствам, например `elem.firstChild.tBodies[0]`.</li>
+</ul>
+
+Эта утечка проявляется, в частности, при удалении детей элемента следующей функцией:
+
+```js
+function empty(elem) {
+  while(elem.firstChild) elem.removeChild(elem.firstChild);
+}
+```
+
+Если идёт доступ к табличным коллекциям и регулярное обновление таблиц при помощи DOM-методов  -- утечка в IE8 будет расти.
+
+Более подробно вы можете почитать об этой утечке в статье [Утечки памяти в IE8, или страшная сказка со счастливым концом](http://habrahabr.ru/post/141451/).
+
+### Утечка через XmlHttpRequest в IE8-
+ 
+Следующий код вызывает утечки памяти в IE8-:
+
+```js
+function leak() {
+  var xhr = new XMLHttpRequest(); // в IE6 создать через ActiveX
+
+  xhr.open('GET', '/server.do', true);
+
+  xhr.onreadystatechange = function() {
+    if(xhr.readyState == 4 && xhr.status == 200) {            
+      // ...
+    }
+  }
+
+  xhr.send(null);
+}
+```
+
+Как вы думаете, почему? Если вы внимательно читали то, что написано выше, то имеете информацию для ответа на этот вопрос..
+
+Посмотрим, какая структура памяти создается при каждом запуске:
+
+<img src="xhr.png">
+
+Когда запускается асинхронный запрос `xhr`, браузер создаёт специальную внутреннюю ссылку (internal reference) на этот объект. находится в процессе коммуникации. Именно поэтому объект `xhr` будет жив после окончания работы функции.
+
+**Когда запрос завершен, браузер удаляет внутреннюю ссылку, `xhr` становится недостижимым и память очищается... Везде, кроме IE&lt;9.**
+
+
+<a href="/files/tutorial/leak/leak_ie8_xhr.html" target="_blank">Открыть в новом окне (в IE8-)</a> (откройте страницу и пусть поработает минут 20 - съест всю  память, включая виртуальную).
+
+Чтобы это исправить, нам нужно разорвать круговую ссылку `XMLHttpRequest ↔ JS`. Например, можно удалить `xhr` из замыкания:
+
+```js
+function leak() {
+  var xhr = new XMLHttpRequest();
+
+  xhr.open('GET', 'something.js?'+Math.random(), true);
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState != 4) return;
+
+    if(xhr.status == 200) {
+      document.getElementById('test').innerHTML++;
+    }
+
+*!*
+    xhr = null; // по завершении запроса удаляем ссылку из замыкания
+*/!*
+  }
+
+  xhr.send(null);
+}
+```
+
+<img src="xhr2.png">
+
+Теперь циклической ссылки нет -- мы устранили утечку.
+
+<a href="/files/tutorial/leak/leak_ie8_xhr_fixed.html" target="_blank">Посмотреть исправленный пример для IE в отдельном окне</a>.
+
+
+## Объемы утечек памяти
+
+Объем "утекающей" памяти может быть небольшим. Тогда это почти не ощущается. Но так как замыкания ведут к сохранению переменных внешних функций, то одна функция может тянуть за собой много чего ещё.
+
+Представьте, вы создали функцию, и одна из ее переменных содержит очень большую по объему строку (например, получает с сервера).
+
+```js
+function f() {
+  var data = "Большой объем данных, например, переданных сервером"
+
+  /* делаем что-то хорошее (ну или плохое) с полученными данными */
+
+  function inner() {
+    // ...
+  }
+
+  return inner;
+}
+```
+
+**Пока функция `inner` остается в памяти, `LexicalEnvironment` с переменной большого объема внутри висит в памяти.** 
+
+Висит до тех пор, пока функция `inner` жива.
+
+**Как правило, JavaScript не знает, какие из переменных функции `inner` будут использованы, поэтому оставляет их все.**
+
+Исключение -- виртуальная машина V8 (Chrome, Opera, Node.JS), она обычно видит, что переменная не используется во внутренних функциях, и очистит память.
+
+В других же интерпретаторах, даже если код спроектирован так, что никакой утечки нет, по вполне разумной причине может создаваться множество функций, а память будет расти потому, что функция тянет за собой своё замыкание. 
+
+Сэкономить память здесь вполне можно. Мы же знаем, что переменная `data` не используется в `inner`. Поэтому просто обнулим её:
+
+```js
+function f() {
+  var data = "Большое количество данных, например, переданных сервером"
+
+  /* действия с data */
+
+  function inner() {
+    // ...
+  }
+
+*!*
+  data = null; // когда data станет не нужна -
+*/!*
+
+  return inner;
+}
+```
+
+## jQuery: утечки и борьба с утечками
+
+[warn header="Изменения в jQuery 2"]
+В jQuery 2 объект с данными элемента, о котором идёт речь далее, более недоступен извне. Он стал локальной переменной внутри jQuery с именем `data_priv`, явный доступ к внутренним данным более невозможен (или deprecated).
+
+Но в остальном всё работает точно так, как описано, и с теми же последствиями.
+[/warn]
+
+**В jQuery для борьбы с утечками памяти в IE6-7 используется <a href="http://api.jquery.com/jQuery.data/">$.data</a> API. Однако, это может стать причиной новых(!) утечек, характерных для jQuery.**
+
+Основной принцип `$.data` — это для любого JavaScript объекта сохранить/получить значение для элемента с помощью jQuery вызова:
+
+```js
+//+ run
+$(document.body).data('prop', { anything: "любой объект" }) // set
+alert( $(document.body).data('prop') ) // get
+```
+
+jQuery `elem.data(prop, val)` делает следующее:
+<ol>
+<li>Элемент получает уникальный идентификатор, если у него такого еще нет:
+
+```js
+elem[ jQuery.expando ] = id = ++jQuery.uuid;  // средствами jQuery
+```
+
+`jQuery.expando` -- это случайная строка, сгенерированная jQuery один раз при входе на страницу. Уникальное свойство, чтобы ничего важного не перезаписать.</li> 
+<li>...А сами данные сохраняются в специальном объекте `jQuery.cache`:
+
+```js
+jQuery.cache[id]['prop'] = { anything: "любой объект" };
+```
+
+</li>
+</ol>
+
+Когда данные считываются из элемента:
+
+<ol>
+<li>Уникальный идентификатор элемента извлекается из `id = elem[ jQuery.expando]`.
+<li>Данные считываются из `jQuery.cache[id]`.</li>
+</ol>
+	
+Смысл этого API в том, что DOM-элемент никогда не ссылается на JavaScript объект напрямую. Задействуется идентификатор, а сами данные хранятся в `jQuery.cache`. Утечек в IE не будет. 
+
+К тому же все данные известны библиотеке, так что можно клонировать с ними и т.п.
+
+**Как побочный эффект -- возникает утечка памяти, если элемент удален из DOM без дополнительной очистки.**
+
+### Примеры утечек в jQuery
+
+Следующий код создает jQuery-утечку во всех браузерах:
+
+```js
+$('<div/>')
+  .html(new Array(1000).join('text')) // div с текстом, возможна AJAX-загрузка
+  .click(function() { })
+  .appendTo('#data')
+
+document.getElementById('data').innerHTML = ''; // (*)
+```
+
+<a href="/files/tutorial/leak/jquery2.html" target="_blank">Показать в отдельном окне</a>
+
+Утечка происходит потому, что обработчик события в jQuery хранится в данных элемента. В строке `(*)` элемент удален очисткой родительского `innerHTML`, но в `jQuery.cache` данные остались. 
+
+Более того, система обработки событий в jQuery устроена так, что вместе с обработчиком в данных хранится и ссылка на элемент, так что в итоге оба -- и обработчик и элемент -- остаются в памяти вместе со всем замыканием!
+
+**Ещё более простой пример утечки:**
+
+Этот код создает утечку:
+
+```js
+function go() {
+  $('<div/>')
+    .html(new Array(1000).join('text')) 
+    .click(function() { })
+}
+```
+
+<a href="/files/tutorial/leak/jquery1.html" target="_blank">Показать в отдельном окне</a>
+
+Причина здесь в том, что элемент `<div>` создан, но нигде не размещен :). После выполнения функции ссылка на него теряется. Но обработчик события `click` уже сохранил данные в `jQuery.cache`, которые застревают там навсегда.
+
+### Используем jQuery без утечек
+
+Чтобы избежать утечек, описанных выше, для удаления элементов используйте функции jQuery API, а не чистый JavaScript.
+
+Методы <a href="http://api.jquery.com/remove/">remove()</a>, <a href="http://api.jquery.com/empty">empty()</a> и <a href="http://api.jquery.com/html">html()</a> проверяют дочерние элементы на наличие данных и очищают их. Это несколько замедляет процедуру удаления, но зато освобождается память.
+
+	
+**К счастью обнаружить такие утечки легко. Проверьте размер `$.cache.`** Если  он большой и растет, то изучите кэш, посмотрите, какие записи остаются и почему.
+
+### Улучшение производительности jQuery
+
+У способа борьбы с утечками IE, применённого в jQuery, есть побочный эффект. 
+
+**Функции, удаляющие элементы, бегают по всему дереву DOM и очищают подэлементы.**
+
+Представьте себе, что вы получили с сервера большую таблицу (в виде текста), вставили её в документ и хотите обновить. Вызов `$('table').remove()` будет бегать по всем ячейкам и искать в них данные. Но мы-то знаем, что обработчики назначены через делегирование, и тратить на это время ни к чему!
+
+Чтобы "грязно" удалить элемент, без чистки, можно воспользоваться методом <a href="http://api.jquery.com/detach">detach()</a>. Его официальное назначение -- в том, чтобы убрать элемент из DOM, но сохранить возможность для вставки (и, соответственно, оставить на нём все данные). А неофициальное -- быстро убрать элемент из DOM. Если на нём нет данных и обработчиков, то всё хорошо.
+
+В принципе, если хочется всё сделать чисто, но быстро -- никто не мешает сделать  `elem.detach()` и поместить вызов `elem.remove()` в `setTimeout`. В результате очистка будет происходить ассинхронно и незаметно.
+
+Итак, будем надеяться, что эта тема для вас теперь прозрачна и ясна и в следующих разделах мы не будем больше говорить об утечках в jQuery.
+
+## Поиск и устранение утечек памяти
+
+### Проверка на утечки
+
+Существует множество шаблонов утечек и ошибок в браузерах, которые могут приводить к утечкам. Для их устранения сперва надо постараться изолировать и воспроизвести утечку.
+
+<ul>
+<li>**Необходимо помнить, что браузер может очистить память не сразу когда объект стал недостижим, а чуть позже.** Например, сборщик мусора может ждать, пока не будет достигнут определенный лимит использования памяти, или запускаться время от времени.</li>
+
+Поэтому если вы думаете, что нашли проблему и тестовый код, запущенный в цикле, течёт -- подождите примерно минуту, добейтесь, чтобы памяти ело стабильно и много. Тогда будет понятно, что это не особенность сборщика мусора.</li><li>**Если речь об IE, то надо смотреть "Виртуальную память" в списке процессов, а не только обычную "Память".** Обычная может очищаться за счет того, что перемещается в виртуальную (на диск).</li>
+<li>Для простоты отладки, если есть подозрение на утечку конкретных объектов, в них добавляют большие свойства-маркеры. Например, подойдет фрагмент текста: `new Array(999999).join('leak')`.</li>
+</ul>
+
+### Настройка браузера
+
+Утечки могут возникать из-за расширений браузера, взимодействющих со страницей. Еще более важно, что **утечки могут быть следствием конфликта двух браузерных расширений** Например, было такое: память текла когда включены расширения Skype и плагин антивируса одновременно.
+
+Чтобы понять, в расширениях дело или нет, нужно отключить их:
+
+<ol>
+<li>Отключить Flash.</li>
+<li>Отключить анивирусную защиту, проверку ссылок и другие модули и дополнения.</li>
+<li>Отключить плагины. Отключить ВСЕ плагины.
+<ul>
+<li>
+ Для IE есть параметр коммандной строки:
+
+```
+"C:\Program Files\Internet Explorer\iexplore.exe" -extoff
+```
+
+Кроме того необходимо отключить сторонние расширения в свойствах IE.
+
+<img src="ie9_disable1.png">
+<img src="ie9_disable2.png">
+
+</li>
+<li>Firefox необходимо запускать с чистым профилем. Используйте следующую команду для запуска менеджера профилей и создания чистого пустого профиля:
+
+```
+firefox --profilemanager
+```
+
+</li>
+</ul>
+</li>
+</ol>
+
+## Инструменты
+
+Пожалуй, единственный браузер с поддержкой отладки памяти -- это Chrome. В инструментах разработчика вкладка Timeline -- Memory показывает график использования памяти.
+
+<img src="chrome.png">
+
+Можем посмотреть, сколько памяти и куда он использует.
+
+Также в Profiles есть кнопка Take Heap Snapshot, здесь можно сделать и исследовать снимок текущего состояния страницы. Снимки можно сравнивать друг с другом, выяснять количество новых объектов. Можно смотреть, почему объект не очищен и кто на него ссылается.
+
+Замечательная статья на эту тему есть в документации: [Chrome Developer Tools: Heap Profiling](http://code.google.com/chrome/devtools/docs/heap-profiling.html).
+
+Утечки памяти штука довольно сложная. В борьбе с ними вам определенно понадобится одна вещь: *Удача!*
+
+<div style="text-align:center">
+<img src="goodluck.png">
+</div>
+
+<p style="text-align:right;font-style:italic">Перевести с английского варианта<br> учебника помог Марат Шагиев</p>
+
diff --git a/3-more/4-optimize/1-memory-leaks/chrome.png b/3-more/4-optimize/1-memory-leaks/chrome.png
new file mode 100755
index 00000000..5f233448
Binary files /dev/null and b/3-more/4-optimize/1-memory-leaks/chrome.png differ
diff --git a/3-more/4-optimize/1-memory-leaks/goodluck.png b/3-more/4-optimize/1-memory-leaks/goodluck.png
new file mode 100755
index 00000000..50086e2f
Binary files /dev/null and b/3-more/4-optimize/1-memory-leaks/goodluck.png differ
diff --git a/3-more/4-optimize/1-memory-leaks/ie1.png b/3-more/4-optimize/1-memory-leaks/ie1.png
new file mode 100755
index 00000000..31c0875e
Binary files /dev/null and b/3-more/4-optimize/1-memory-leaks/ie1.png differ
diff --git a/3-more/4-optimize/1-memory-leaks/ie2.png b/3-more/4-optimize/1-memory-leaks/ie2.png
new file mode 100755
index 00000000..ded23dfc
Binary files /dev/null and b/3-more/4-optimize/1-memory-leaks/ie2.png differ
diff --git a/3-more/4-optimize/1-memory-leaks/ie9_disable1.png b/3-more/4-optimize/1-memory-leaks/ie9_disable1.png
new file mode 100755
index 00000000..0b44ee20
Binary files /dev/null and b/3-more/4-optimize/1-memory-leaks/ie9_disable1.png differ
diff --git a/3-more/4-optimize/1-memory-leaks/ie9_disable2.png b/3-more/4-optimize/1-memory-leaks/ie9_disable2.png
new file mode 100755
index 00000000..e8077bac
Binary files /dev/null and b/3-more/4-optimize/1-memory-leaks/ie9_disable2.png differ
diff --git a/3-more/4-optimize/1-memory-leaks/xhr.png b/3-more/4-optimize/1-memory-leaks/xhr.png
new file mode 100755
index 00000000..29c3bcd7
Binary files /dev/null and b/3-more/4-optimize/1-memory-leaks/xhr.png differ
diff --git a/3-more/4-optimize/1-memory-leaks/xhr2.png b/3-more/4-optimize/1-memory-leaks/xhr2.png
new file mode 100755
index 00000000..9806976a
Binary files /dev/null and b/3-more/4-optimize/1-memory-leaks/xhr2.png differ
diff --git a/3-more/4-optimize/2-script-place-optimize/article.md b/3-more/4-optimize/2-script-place-optimize/article.md
new file mode 100644
index 00000000..c0f473dc
--- /dev/null
+++ b/3-more/4-optimize/2-script-place-optimize/article.md
@@ -0,0 +1,63 @@
+# Оптимизация скриптов: dom, async, defer [в работе]
+
+Скрипт может быть размещен в любом месте HTML. 
+
+Здесь мы разберём то, как его местоположение влияет на скорость загрузки страницы.
+
+[cut]
+
+
+## Перемещение скрипта в HEAD
+
+Если нужно, чтобы скрипт обязательно выполнился до того, как страничка будет отображена, то самое подходящее место -- это `HEAD`:
+
+```html
+<!--+ run height=100 -->
+<html>
+  <head>
+    *!*
+    <script>
+      function count_rabbits() {
+        for (var i=1; i<=3; i++) {
+          alert("Кролик номер " + i);
+        }
+      }
+    </script>
+    */!*
+  </head>
+
+  <body>
+  
+    <h3>Нажмите на кнопку, чтобы начать</h3>
+
+    <input type="button" onclick="count_rabbits()" value="Считать кроликов!"/>
+
+  </body>
+
+</html>
+```
+
+## Скрипты в конце BODY   
+
+Скрипт может быть и в конце документа, например перед закрывающим `</body>`. В таком случае он выполняется *после* отрисовки страницы. 
+
+[compare]
++ Это хорошо, т.к. пользователь не должен ждать, пока загрузятся скрипты. Он увидит страницу быстро.
+- Страница будет лишь частично работать, т.к. для инициализации интерфейсов нужен JS. Нужно это учесть, например, закрасить серым нерабочие интерфейсы, показать на них индикатор загрузки.
+[/compare]
+
+[smart header="Рендеринг и CSS"]
+По стандарту, CSS-стили могут располагаться только внутри тега `HEAD`, и они тоже блокируют отображение. 
+
+В принципе, их можно для оптимизации перенести вниз документа -- всё будет работать. Но пока они не загрузятся, страница будет показываться без стилей, это обычно непрезентабельно. Поэтому так не делают.
+[/smart]
+
+## Итоги
+
+Скрипты могут быть внутренними и подключаться напрямую в тег `SCRIPT` и внешними, в виде отдельных файлов, подключаемых с помощью атрибута `src="path/to/file.js"` тега `SCRIPT`
+
+В любом случае, отрисовка HTML-страницы блокируется, пока скрипт не будет скачан и исполнен. Большинство браузеров умеют качать несколько скриптов параллельно, что несколько убыстряет процесс, но представьте -- у посетителя медленный канал (смотрит с телефона). Он открывает сайт. Если в `HEAD` стоит большой внешний скрипт, то пока он не загрузится -- страница не отобразится.
+
+Поэтому, чтобы убыстрить процесс открытия, скрипты добавляют в конец `BODY` или ставят им атрибуты `async` или `defer`. В таком случае страница будет показана до загрузки скрипта. 
+
+Но при этом посетитель может тут же куда-нибудь нажать, а скрипты для этой кнопки ещё не загрузились. Эту особенность взаимодействия нужно предусмотреть в интерфейсе (это вполне возможно), и все будет здорово.
\ No newline at end of file
diff --git a/3-more/4-optimize/3-reflow/article.md b/3-more/4-optimize/3-reflow/article.md
new file mode 100644
index 00000000..7004cdf6
--- /dev/null
+++ b/3-more/4-optimize/3-reflow/article.md
@@ -0,0 +1,4 @@
+# Reflow
+
+
+[iframe src="reflow"]
\ No newline at end of file
diff --git a/3-more/4-optimize/3-reflow/reflow.view/index.html b/3-more/4-optimize/3-reflow/reflow.view/index.html
new file mode 100755
index 00000000..7b0b99fa
--- /dev/null
+++ b/3-more/4-optimize/3-reflow/reflow.view/index.html
@@ -0,0 +1,73 @@
+
+<!DOCTYPE HTML>
+<html>
+<head>
+<script>
+function resize() {
+// calculate -> set, repeat
+	var t = new Date();
+
+	for(var i=0; i<firstRow.cells.length; i++) {
+		var td = firstRow.cells[i];
+		td.style.width = td.offsetWidth + 10 + 'px';
+	}
+
+	alert('Done in '+(new Date - t));
+}
+function resize2() {
+// optimizes against reflow
+// 1. calculate -> repeat
+// 2. set -> repeat
+	var t = new Date();
+
+	var widths = [];
+
+	for(var i=0; i<firstRow.cells.length; i++) {
+		widths[i] = firstRow.cells[i].offsetWidth;
+	}
+
+	for(var i=0; i<widths.length; i++) {
+		firstRow.cells[i].style.width = widths[i] + 10 + 'px';
+	}
+
+	alert('Done in '+(new Date - t));
+}
+
+
+
+</script>
+
+</head>
+<body>
+
+<table id="table" style="font-size:80%">
+<tr id="firstRow"><td>0:0</td><td>0:1</td><td>0:2</td><td>0:3</td><td>0:4</td><td>0:5</td><td>0:6</td><td>0:7</td><td>0:8</td><td>0:9</td><td>0:10</td><td>0:11</td><td>0:12</td><td>0:13</td><td>0:14</td><td>0:15</td><td>0:16</td><td>0:17</td><td>0:18</td><td>0:19</td></tr>
+<tr><td>1:0</td><td>1:1</td><td>1:2</td><td>1:3</td><td>1:4</td><td>1:5</td><td>1:6</td><td>1:7</td><td>1:8</td><td>1:9</td><td>1:10</td><td>1:11</td><td>1:12</td><td>1:13</td><td>1:14</td><td>1:15</td><td>1:16</td><td>1:17</td><td>1:18</td><td>1:19</td></tr>
+<tr><td>2:0</td><td>2:1</td><td>2:2</td><td>2:3</td><td>2:4</td><td>2:5</td><td>2:6</td><td>2:7</td><td>2:8</td><td>2:9</td><td>2:10</td><td>2:11</td><td>2:12</td><td>2:13</td><td>2:14</td><td>2:15</td><td>2:16</td><td>2:17</td><td>2:18</td><td>2:19</td></tr>
+<tr><td>3:0</td><td>3:1</td><td>3:2</td><td>3:3</td><td>3:4</td><td>3:5</td><td>3:6</td><td>3:7</td><td>3:8</td><td>3:9</td><td>3:10</td><td>3:11</td><td>3:12</td><td>3:13</td><td>3:14</td><td>3:15</td><td>3:16</td><td>3:17</td><td>3:18</td><td>3:19</td></tr>
+<tr><td>4:0</td><td>4:1</td><td>4:2</td><td>4:3</td><td>4:4</td><td>4:5</td><td>4:6</td><td>4:7</td><td>4:8</td><td>4:9</td><td>4:10</td><td>4:11</td><td>4:12</td><td>4:13</td><td>4:14</td><td>4:15</td><td>4:16</td><td>4:17</td><td>4:18</td><td>4:19</td></tr>
+<tr><td>5:0</td><td>5:1</td><td>5:2</td><td>5:3</td><td>5:4</td><td>5:5</td><td>5:6</td><td>5:7</td><td>5:8</td><td>5:9</td><td>5:10</td><td>5:11</td><td>5:12</td><td>5:13</td><td>5:14</td><td>5:15</td><td>5:16</td><td>5:17</td><td>5:18</td><td>5:19</td></tr>
+<tr><td>6:0</td><td>6:1</td><td>6:2</td><td>6:3</td><td>6:4</td><td>6:5</td><td>6:6</td><td>6:7</td><td>6:8</td><td>6:9</td><td>6:10</td><td>6:11</td><td>6:12</td><td>6:13</td><td>6:14</td><td>6:15</td><td>6:16</td><td>6:17</td><td>6:18</td><td>6:19</td></tr>
+<tr><td>7:0</td><td>7:1</td><td>7:2</td><td>7:3</td><td>7:4</td><td>7:5</td><td>7:6</td><td>7:7</td><td>7:8</td><td>7:9</td><td>7:10</td><td>7:11</td><td>7:12</td><td>7:13</td><td>7:14</td><td>7:15</td><td>7:16</td><td>7:17</td><td>7:18</td><td>7:19</td></tr>
+<tr><td>8:0</td><td>8:1</td><td>8:2</td><td>8:3</td><td>8:4</td><td>8:5</td><td>8:6</td><td>8:7</td><td>8:8</td><td>8:9</td><td>8:10</td><td>8:11</td><td>8:12</td><td>8:13</td><td>8:14</td><td>8:15</td><td>8:16</td><td>8:17</td><td>8:18</td><td>8:19</td></tr>
+<tr><td>9:0</td><td>9:1</td><td>9:2</td><td>9:3</td><td>9:4</td><td>9:5</td><td>9:6</td><td>9:7</td><td>9:8</td><td>9:9</td><td>9:10</td><td>9:11</td><td>9:12</td><td>9:13</td><td>9:14</td><td>9:15</td><td>9:16</td><td>9:17</td><td>9:18</td><td>9:19</td></tr>
+<tr><td>10:0</td><td>10:1</td><td>10:2</td><td>10:3</td><td>10:4</td><td>10:5</td><td>10:6</td><td>10:7</td><td>10:8</td><td>10:9</td><td>10:10</td><td>10:11</td><td>10:12</td><td>10:13</td><td>10:14</td><td>10:15</td><td>10:16</td><td>10:17</td><td>10:18</td><td>10:19</td></tr>
+<tr><td>11:0</td><td>11:1</td><td>11:2</td><td>11:3</td><td>11:4</td><td>11:5</td><td>11:6</td><td>11:7</td><td>11:8</td><td>11:9</td><td>11:10</td><td>11:11</td><td>11:12</td><td>11:13</td><td>11:14</td><td>11:15</td><td>11:16</td><td>11:17</td><td>11:18</td><td>11:19</td></tr>
+<tr><td>12:0</td><td>12:1</td><td>12:2</td><td>12:3</td><td>12:4</td><td>12:5</td><td>12:6</td><td>12:7</td><td>12:8</td><td>12:9</td><td>12:10</td><td>12:11</td><td>12:12</td><td>12:13</td><td>12:14</td><td>12:15</td><td>12:16</td><td>12:17</td><td>12:18</td><td>12:19</td></tr>
+<tr><td>13:0</td><td>13:1</td><td>13:2</td><td>13:3</td><td>13:4</td><td>13:5</td><td>13:6</td><td>13:7</td><td>13:8</td><td>13:9</td><td>13:10</td><td>13:11</td><td>13:12</td><td>13:13</td><td>13:14</td><td>13:15</td><td>13:16</td><td>13:17</td><td>13:18</td><td>13:19</td></tr>
+<tr><td>14:0</td><td>14:1</td><td>14:2</td><td>14:3</td><td>14:4</td><td>14:5</td><td>14:6</td><td>14:7</td><td>14:8</td><td>14:9</td><td>14:10</td><td>14:11</td><td>14:12</td><td>14:13</td><td>14:14</td><td>14:15</td><td>14:16</td><td>14:17</td><td>14:18</td><td>14:19</td></tr>
+<tr><td>15:0</td><td>15:1</td><td>15:2</td><td>15:3</td><td>15:4</td><td>15:5</td><td>15:6</td><td>15:7</td><td>15:8</td><td>15:9</td><td>15:10</td><td>15:11</td><td>15:12</td><td>15:13</td><td>15:14</td><td>15:15</td><td>15:16</td><td>15:17</td><td>15:18</td><td>15:19</td></tr>
+<tr><td>16:0</td><td>16:1</td><td>16:2</td><td>16:3</td><td>16:4</td><td>16:5</td><td>16:6</td><td>16:7</td><td>16:8</td><td>16:9</td><td>16:10</td><td>16:11</td><td>16:12</td><td>16:13</td><td>16:14</td><td>16:15</td><td>16:16</td><td>16:17</td><td>16:18</td><td>16:19</td></tr>
+<tr><td>17:0</td><td>17:1</td><td>17:2</td><td>17:3</td><td>17:4</td><td>17:5</td><td>17:6</td><td>17:7</td><td>17:8</td><td>17:9</td><td>17:10</td><td>17:11</td><td>17:12</td><td>17:13</td><td>17:14</td><td>17:15</td><td>17:16</td><td>17:17</td><td>17:18</td><td>17:19</td></tr>
+<tr><td>18:0</td><td>18:1</td><td>18:2</td><td>18:3</td><td>18:4</td><td>18:5</td><td>18:6</td><td>18:7</td><td>18:8</td><td>18:9</td><td>18:10</td><td>18:11</td><td>18:12</td><td>18:13</td><td>18:14</td><td>18:15</td><td>18:16</td><td>18:17</td><td>18:18</td><td>18:19</td></tr>
+<tr><td>19:0</td><td>19:1</td><td>19:2</td><td>19:3</td><td>19:4</td><td>19:5</td><td>19:6</td><td>19:7</td><td>19:8</td><td>19:9</td><td>19:10</td><td>19:11</td><td>19:12</td><td>19:13</td><td>19:14</td><td>19:15</td><td>19:16</td><td>19:17</td><td>19:18</td><td>19:19</td></tr>
+</table>
+
+<input type="button" onclick="resize()" value="resize"/>
+<input type="button" onclick="resize2()" value="resize2"/>
+
+
+
+
+
+</body></html>
diff --git a/3-more/4-optimize/index.md b/3-more/4-optimize/index.md
new file mode 100644
index 00000000..77df4229
--- /dev/null
+++ b/3-more/4-optimize/index.md
@@ -0,0 +1,2 @@
+# Оптимизация
+
diff --git a/3-more/5-compress/1-minification/article.md b/3-more/5-compress/1-minification/article.md
new file mode 100644
index 00000000..0ab4f306
--- /dev/null
+++ b/3-more/5-compress/1-minification/article.md
@@ -0,0 +1,512 @@
+# Как работают сжиматели JavaScript
+
+Перед выкладыванием JavaScript на "боевую" машину -- пропускаем его через минификатор (также говорят "сжиматель"), который удаляет пробелы и по-всякому оптимизирует код, уменьшая его размер.
+
+В этой статье мы посмотрим, как работают современные минификаторы, за счёт чего они укорачивают код и какие с ними возможны проблемы.
+[cut]
+
+## Современные сжиматели
+
+Рассматриваемые в этой статье алгоритмы и подходы относятся к минификаторам последнего поколения.
+
+Вот их список:
+
+<ul>
+<li>[Google Closure Compiler](https://developers.google.com/closure/compiler/) </li>
+<li>[UglifyJS](https://github.com/mishoo/UglifyJS)</li>
+<li>[Microsoft AJAX Minifier](http://ajaxmin.codeplex.com/)</li>
+</ul>
+Самые широко используемые -- первые два, поэтому будем рассматривать в первую очередь их.
+
+Наша цель -- понять, как они работают, и что интересного с их помощью можно сотворить.
+
+## С чего начать?
+
+Для GCC:
+
+<ol>
+<li>Убедиться, что стоит [Java](http://java.oracle.com)</li>
+<li>Скачать и распаковать [](http://closure-compiler.googlecode.com/files/compiler-latest.zip), нам нужен файл `compiler.jar`.</li>
+<li>Сжать файл `my.js`: `java -jar compiler.jar --charset UTF-8 --js my.js --js_output_file my.min.js`</li>
+</ol>
+
+Обратите внимание на флаг `--charset` для GCC. Без него русские буквы будут закодированы во что-то типа `\u1234`.
+
+Google Closure Compiler также содержит [песочницу](http://closure-compiler.appspot.com/home) для тестирования сжатия и [веб-сервис](https://developers.google.com/closure/compiler/docs/gettingstarted_api?hl=ru), на который код можно отправлять для сжатия. Но скачать файл обычно гораздо проще, поэтому его редко где используют.
+
+Для UglifyJS:
+
+<ol>
+<li>Убедиться, что стоит [Node.js](http://nodejs.org)</li>
+<li>Поставить `npm install -g uglify-js`.</li>
+<li>Сжать файл `my.js`: `uglifyjs my.js -o my.min.js`</li>
+</ol>
+
+## Что делает минификатор?
+
+Все современные минификаторы работают следующим образом:
+<ol>
+<li>Разбирают JavaScript-код в синтаксическое дерево.
+
+Также поступает любой интерпретатор JavaScript перед тем, как его выполнять. Но затем, вместо исполнения кода...</li>
+<li>Бегают по этому дереву, анализируют и оптимизируют его.</li>
+<li>Записывают из синтаксического дерева получившийся код.</li>
+</ol>
+
+## Как выглядит дерево?
+
+Посмотреть синтаксическое дерево можно, запустив компилятор со специальным флагом.
+
+Для GCC есть даже способ вывести его:
+
+<ol>
+<li>Сначала сгенерируем дерево в формате [DOT](http://en.wikipedia.org/wiki/DOT_language):
+
+```
+java -jar compiler.jar --js my.js --use_only_custom_externs --print_tree >my.dot
+```
+
+Здесь флаг `--print_tree` выводит дерево, а `--use_only_custom_externs` убирает лишнюю служебную информацию.
+</li>
+<li>Файл в этом формате используется в различных программах для графопостроения. 
+
+Чтобы превратить его в обычную картинку, подойдёт утилита `dot` из пакета [Graphviz](http://www.graphviz.org/):
+
+```
+// конвертировать в формат png
+dot -Tpng my.dot -o my.png
+
+// конвертировать в формат svg
+dot -Tsvg my.dot -o my.svg
+```
+
+</li>
+</ol>
+
+Пример кода `my.js`:
+
+```js
+function User(name) {
+
+  this.sayHi = function() {
+    alert(name);
+  };
+
+}
+```
+
+Результат, получившееся из `my.js` дерево:
+
+<img src="my.svg">
+
+В узлах-эллипсах на иллюстрации выше стоит тип, например `FUNCTION` (функция) или `NAME` (имя переменной). Комментарии к ним на русском языке добавлены мной вручную.
+
+Кроме него к каждому узлу привязаны конкретные данные. Сжиматель умеет ходить по этому дереву и менять его, как пожелает.
+
+[smart header="Комментарии JSDoc"]
+Обычно когда код превращается в дерево -- из него естественным образом исчезают комментарии и пробелы. Они не имеют значения при выполнении, поэтому игнорируются.
+
+Но Google Closure Compiler добавляет в дерево информацию из *комментариев JSDoc*, т.е. комментариев вида `/** ... */`, например:
+
+```js
+*!*
+/**
+ * Номер минимальной поддерживаемой версии IE
+ * @const
+ * @type {number}
+ */
+*/!*
+var minIEVersion = 8;
+```
+
+Такие комментарии не создают новых узлов дерева, а добавляются в качестве информации к существующем. В данном случае -- к переменной `minIEVersion`.
+
+В них может содержаться информация о типе переменной (`number`) и другая, которая поможет сжимателю лучше оптимизировать код (`const` -- константа). 
+
+[/smart]
+
+## Оптимизации
+
+Сжиматель бегает по дереву, ищет "паттерны" -- известные ему структуры, которые он знает, как оптимизировать, и обновляет дерево. 
+
+В разных минификаторах реализован разный набор оптимизаций, сами оптимизации применяются в разном порядке, поэтому результаты работы могут отличаться. В примерах ниже даётся результат работы GCC.
+
+
+<dl>
+<dt>Объединение и сжатие констант</dt>
+<dd>
+До оптимизации:
+
+```js
+function test(a, b) {
+   run(a, 'my'+'string', 600*600*5, 1 && 0, b && 0)
+}
+```
+
+После:
+
+```js
+function test(a,b){run(a,"mystring",18E5,0,b&&0)};
+```
+
+<ul>
+<li>`'my' + 'string'` -> `"mystring"`.</li>
+<li>`600 * 600 * 5` -> `18E5` (научная форма числа, для краткости).</li>
+<li>`1 && 0` -> `0`.</li>
+<li>`b && 0` -> без изменений, т.к. результат зависит от `b`.</li>
+</ul>
+</dd>
+<dt>Укорачивание локальных переменных</dt>
+<dd>
+До оптимизации:
+
+```js
+function sayHi(*!*name*/!*, *!*message*/!*) {  
+  alert(name +" сказал: " + message);
+}
+```
+
+После оптимизации:
+
+```js
+function sayHi(a,b){alert(a+" сказал: "+b)};
+```
+
+<ul>
+<li>Локальная переменная заведомо доступна только внутри функции, поэтому обычно её переименование безопасно (необычные случаи рассмотрим далее).</li>
+<li>Также переименовываются локальные функции.</li>
+<li>Вложенные функции обрабатываются корректно.</li>
+</ul>
+</dd>
+<dt>Объединение и удаление локальных переменных</dt>
+<dd>
+До оптимизации:
+
+```js
+function test(nodeId) {
+  var elem = document.getElementsById(nodeId);
+  var parent = elem.parentNode;
+  alert(parent);
+}
+```
+
+После оптимизации GCC:
+
+```js
+function test(a){a=document.getElementsById(a).parentNode;alert(a)};
+```
+
+<ul>
+<li>Локальные переменные были переименованы. </li>
+<li>Лишние переменные убраны. Для этого сжиматель создаёт вспомогательную внутреннюю структуру данных, в которой хранятся сведения о "пути использования" каждой переменной. Если одна переменная заканчивает свой путь и начинает другая, то вполне можно дать им одно имя.</li>
+<li>Кроме того, операции `elem = getElementsById` и `elem.parentNode` объединены, но это уже другая оптимизация.</li>
+</ul>
+</dd>
+<dt>Уничтожение недостижимого кода, разворачивание `if`-веток</dt>
+<dd>
+
+До оптимизации:
+
+```js
+function test(node) {
+  var parent = node.parentNode;
+  
+  if (0) {
+    alert("Привет с параллельной планеты");
+  } else {
+    alert("Останется только один");
+  }
+
+  return;
+
+  alert(1);
+}
+```
+
+После оптимизации:
+
+```js
+function test(){alert("Останется только один")}
+```
+
+<ul>
+<li>Если переменная присваивается, но не используется, она может быть удалена. В примере выше эта оптимизация была применена к переменной `parent`, а затем и к параметру `node`.</li>
+<li>Заведомо ложная ветка `if(0) { .. }` убрана, заведомо истинная -- оставлена. 
+
+То же самое будет с условиями в других конструкциях, например `a = true ? c : d` превратится в `a = c`.</li>
+<li>Код после `return` удалён как недостижимый.</li>
+</ul>
+</dd>
+<dt>Переписывание синтаксических конструкций</dt>
+<dd>
+До оптимизации:
+
+```js
+var i = 0;
+while (i++ < 10) {
+  alert(i);
+}
+
+if (i) {
+  alert(i);
+}
+
+if (i=='1') {
+  alert(1);
+} else if(i == '2') {
+  alert(2);
+} else {
+  alert(i);
+}
+```
+
+После оптимизации:
+
+```js
+for(var i=0;10>i++;)alert(i);i&&alert(i);"1"==i?alert(1):"2"==i?alert(2):alert(i);
+```
+
+<ul>
+<li>Конструкция `while` переписана в `for`.</li>
+<li>Конструкция `if (i) ...` переписана в `i&&...`.</li>
+<li>Конструкция `if (cond) ... else ...` была переписана в `cond ? ... : ...`.</li>
+</ul>
+</dd>
+<dt>Инлайнинг функций</dt>
+<dd>
+*Инлайнинг функции* -- приём оптимизации, при котором функция заменяется на своё тело. 
+
+До оптимизации:
+
+```js
+function sayHi(message) {
+
+  var elem = createMessage('div', message);
+  showElement(elem);
+
+  function createMessage(tagName, message) {
+    var el = document.createElement(tagName);
+    el.innerHTML = message;
+    return el;
+  }
+
+  function showElement(elem) {
+    document.body.appendChild(elem);
+  }
+}
+```
+
+После оптимизации (переводы строк также будут убраны):
+
+```js
+function sayHi(b){
+  var a=document.createElement("div");
+  a.innerHTML=b;
+  document.body.appendChild(a)
+};
+```
+
+<ul>
+<li>Вызовы функций `createMessage` и `showElement` заменены на тело функций. В данном случае это возможно, так как функции используются всего по разу.</li>
+<li>Эта оптимизация применяется не всегда. Если бы каждая функция использовалась много раз, то с точки зрения размера выгоднее оставить их "как есть".</li>
+</ul>
+</dd>
+<dt>Инлайнинг переменных</dt>
+<dd>Переменные заменяются на значение, если оно заведомо известно.
+
+До оптимизации:
+
+```js
+(function() {
+  var isVisible = true;
+  var hi = "Привет вам из JavaScript";
+
+  window.sayHi = function() {
+    if (isVisible) {
+      alert(hi);
+      alert(hi);
+      alert(hi);
+      alert(hi);
+      alert(hi);
+      alert(hi);
+      alert(hi);
+      alert(hi);
+      alert(hi);
+      alert(hi);
+      alert(hi);
+      alert(hi);
+    } 
+  }
+  
+})();
+```
+
+После оптимизации:
+
+```js
+(function(){
+  window.sayHi=function(){
+    alert("Привет вам из JavaScript");
+    alert("Привет вам из JavaScript");
+    alert("Привет вам из JavaScript");
+    alert("Привет вам из JavaScript");
+    alert("Привет вам из JavaScript");
+    alert("Привет вам из JavaScript");
+    alert("Привет вам из JavaScript");
+    alert("Привет вам из JavaScript");
+    alert("Привет вам из JavaScript");
+    alert("Привет вам из JavaScript");
+    alert("Привет вам из JavaScript");
+    alert("Привет вам из JavaScript");
+  };
+}})();
+```
+
+<ul>
+  <li>Переменная `isVisible` заменена на `true`, после чего `if` стало возможным убрать.</li>
+  <li>Переменная `hi` заменена на строку.</li>
+</ul>
+
+Казалось бы -- зачем менять `hi` на строку? Ведь код стал ощутимо длиннее!
+
+...Но всё дело в том, что минификатор знает, что дальше код будет сжиматься при помощи gzip. Во всяком случае, все правильно настроенные сервера так делают. 
+
+[Алгоритм работы gzip](http://www.gzip.org/algorithm.txt) заключается в том, что он ищет повторы в данных и выносит их в специальный "словарь", заменяя на более короткий идентификатор. Архив как раз и состоит из словаря и данных, в которых дубликаты заменены на идентификаторы.
+
+Если вынести строку обратно в переменную, то получится как раз частный случай такого сжатия -- взяли `"Привет вам из JavaScript"` и заменили на идентификатор `hi`. Но gzip справляется с этим лучше, поэтому эффективнее будет оставить именно строку. Gzip сам найдёт дубликаты и сожмёт их.
+
+Плюс такого подхода станет очевиден, если сжать gzip оба кода -- до и после минификации. Минифицированный gzip-сжатый код в итоге даст меньший размер.
+</dd>
+
+<dt>Разные мелкие оптимизации</dt>
+<dd>Кроме основных оптимизаций, описанных выше, есть ещё много мелких:
+
+<ul>
+<li>Убираются лишние кавычки у ключей
+
+```js
+{"prop" : "val" }   =>  {prop:"val"}
+```
+
+</li>
+<li>Упрощаются простые вызовы `Array/Object`
+
+```js
+a = new Array()   =>  a = []
+o = new Object()  => o = {}
+```
+
+Эта оптимизация предполагает, что `Array` и `Object` не переопределены программистом. Для включения её в UglifyJS нужен флаг `--unsafe`.
+</li>
+<li>...И еще некоторые другие мелкие изменения кода...</li>
+</ul>
+
+
+</dd>
+</dl>
+
+## Подводные камни
+
+Описанные оптимизации, в целом, безопасны, но есть ряд подводных камней.
+
+### Конструкция with
+
+Рассмотрим код:
+
+```js
+function changePosition(style) {
+  var position, test;
+
+*!*
+  with (style) {
+    position = 'absolute';
+  }
+*/!*
+}
+```
+
+Куда будет присвоено значение `position = 'absolute'`? 
+
+Это неизвестно до момента выполнения: если свойство `position` есть в `style` -- то туда, а если нет -- то в локальную переменную.
+
+Можно ли в такой ситуации заменить локальную переменную на более короткую? Очевидно, нет:
+
+```js
+function changePosition(style) {
+  var a, b;
+
+*!*
+  with (style) {          // а что, если в style нет такого свойства? 
+    position = 'absolute';// куда будет осуществлена запись? в window.position?
+  }
+*/!*
+}
+```
+
+Такая же опасность для сжатия кроется в использованном `eval`. Ведь `eval` может обращаться к локальным переменным:
+
+```js
+function f(code) {
+  var myVar;
+
+  eval(code); // а что, если будет присвоение eval("myVar = ...") ?
+
+  alert(myVar);
+```
+
+Получается, что при наличии `eval` мы не имеем права переименовывать локальные переменные. Причём (!), если функция является вложенноой, то и во внешних функциях тоже.
+
+А ведь сжатие переменных -- очень важная оптимизация. Как правило, она уменьшает размер сильнее всего.
+
+Что делать? Разные минификаторы поступают по-разному. 
+
+<ul>
+<li>UglifyJS -- не будет переименовывать переменные. Так что наличие `with/eval` сильно повлияет на степень сжатие кода.</li>
+<li>GCC -- всё равно сожмёт локальные переменные. Это, конечно же, может привести к ошибкам, причём в сжатом коде, отлаживать который не очень-то удобно. Поэтому он выдаст предупреждение о наличии опасной конструкции.</li>
+</ul>
+
+Ни тот ни другой вариант нас, по большому счёту, не устраивают.
+
+**Для того, чтобы код сжимался хорошо и работал правильно, не используем `with` и `eval`.**
+
+Либо, если уж очень надо использовать -- делаем это с оглядкой на поведение минификатора, чтобы не было проблем.
+
+### Условная компиляция IE10-
+
+В IE10- поддерживалось [условное выполнение JavaScript](http://msdn.microsoft.com/en-us/library/121hztk3.aspx).
+
+Синтаксис: `/*@cc_on код */`. 
+
+Такой код выполнится в IE10-, например:
+
+```js
+//+ run
+var isIE /*@cc_on =true@*/;
+
+alert(isIE); // true в IE.
+```
+
+Там же доступны и дополнительные директивы: `@_jscript_version`, `@if` и т.п., но речь здесь не о том.
+
+Для минификаторов этот "условный" комментарий -- всего лишь обычный комментарий. Они его удалят. Получится, что код не поймёт, где же IE.
+
+Что делать?
+
+<ol>
+<li>Первое и наиболее корректное решение -- не использовать условную компиляцию.</li>
+<li>Второе, если уж очень надо -- применить хак, завернуть его в `eval` или `new Function` (чтобы сжиматель не ругался):
+
+```js
+//+ run
+var isIE = new Function('', '/*@cc_on return true@*/')();
+
+alert(isIE); // true в IE.
+```
+
+</li>
+</ol>
+
+Ещё раз заметим, что в современных IE11+ эта компиляция не работает в любом случае.
+
+В следующих главах мы посмотрим, какие продвинутые возможности есть в минификаторах, как сделать сжатие более эффективным.
+
diff --git a/3-more/5-compress/1-minification/my.svg b/3-more/5-compress/1-minification/my.svg
new file mode 100755
index 00000000..36ca2420
--- /dev/null
+++ b/3-more/5-compress/1-minification/my.svg
@@ -0,0 +1,262 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 2.26.3 (20100126.1600)
+ -->
+<!-- Title: AST Pages: 1 -->
+<svg width="420pt" height="544pt"
+ viewBox="0.00 0.00 420.00 544.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph1" class="graph" transform="scale(.6 .6) rotate(0) translate(4 902)">
+<title>AST</title>
+<polygon fill="white" stroke="white" points="-4,5 -4,-902 683,-902 683,5 -4,5"/>
+<!-- node0 -->
+<g id="node1" class="node"><title>node0</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="173" cy="-879" rx="44.7575" ry="18.3848"/>
+<text text-anchor="middle" x="173" y="-875.4" font-family="Consolas, monospace" font-size="14.00">BLOCK</text>
+</g>
+<!-- node1 -->
+<g id="node2" class="node"><title>node1</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="173" cy="-787" rx="48.0833" ry="18.3848"/>
+<text text-anchor="middle" x="173" y="-783.4" font-family="Consolas, monospace" font-size="14.00">SCRIPT</text>
+</g>
+<!-- node0&#45;&gt;node1 -->
+<g id="edge2" class="edge"><title>node0&#45;&gt;node1</title>
+<path fill="none" stroke="black" d="M173,-860.382C173,-847.538 173,-830.216 173,-815.627"/>
+<polygon fill="black" stroke="black" points="176.5,-815.59 173,-805.59 169.5,-815.59 176.5,-815.59"/>
+</g>
+<!-- node0&#45;&gt;node1 -->
+<g id="edge50" class="edge"><title>node0&#45;&gt;node1</title>
+<path fill="none" stroke="red" d="M179.666,-860.413C181.442,-854.596 183.112,-848.101 184,-842 185.152,-834.083 185.152,-831.917 184,-824 183.584,-821.14 182.996,-818.194 182.306,-815.271"/>
+<polygon fill="red" stroke="red" points="185.673,-814.315 179.666,-805.587 178.919,-816.156 185.673,-814.315"/>
+<text text-anchor="middle" x="217" y="-829.4" font-family="Consolas, monospace" font-size="14.00" fill="red">UNCOND</text>
+</g>
+<!-- RETURN -->
+<g id="node41" class="node"><title>RETURN</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="427" cy="-379" rx="53.033" ry="18.3848"/>
+<text text-anchor="middle" x="427" y="-375.4" font-family="Consolas, monospace" font-size="14.00">RETURN</text>
+</g>
+<!-- node0&#45;&gt;RETURN -->
+<g id="edge48" class="edge"><title>node0&#45;&gt;RETURN</title>
+<path fill="none" stroke="red" d="M206.737,-866.543C221.585,-860.284 238.832,-851.913 253,-842 357.801,-768.67 407.197,-756.232 456,-638 488.557,-559.127 457.409,-455.907 438.747,-407.014"/>
+<polygon fill="red" stroke="red" points="441.897,-405.46 434.982,-397.433 435.382,-408.021 441.897,-405.46"/>
+<text text-anchor="middle" x="490" y="-661.4" font-family="Consolas, monospace" font-size="14.00" fill="red">SYN_BLOCK</text>
+</g>
+<!-- node2 -->
+<g id="node4" class="node"><title>node2</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="173" cy="-711" rx="63.8479" ry="18.3848"/>
+<text text-anchor="middle" x="173" y="-707.4" font-family="Consolas, monospace" font-size="14.00">FUNCTION</text>
+<text text-anchor="middle" x="173" y="-695.4" font-family="Consolas, monospace" fill="green" font-size="14.00">функция</text>
+</g>
+<!-- node1&#45;&gt;node2 -->
+<g id="edge4" class="edge"><title>node1&#45;&gt;node2</title>
+<path fill="none" stroke="black" d="M173,-768.213C173,-759.654 173,-749.33 173,-739.822"/>
+<polygon fill="black" stroke="black" points="176.5,-739.57 173,-729.57 169.5,-739.57 176.5,-739.57"/>
+</g>
+<!-- node1&#45;&gt;RETURN -->
+<g id="edge46" class="edge"><title>node1&#45;&gt;RETURN</title>
+<path fill="none" stroke="red" d="M200.79,-771.711C241.73,-747.947 318.425,-698.523 365,-638 418.572,-568.385 426.776,-459.45 427.445,-407.897"/>
+<polygon fill="red" stroke="red" points="430.945,-407.817 427.487,-397.802 423.945,-407.788 430.945,-407.817"/>
+<text text-anchor="middle" x="420" y="-615.4" font-family="Consolas, monospace" font-size="14.00" fill="red">UNCOND</text>
+</g>
+<!-- node3 -->
+<g id="node6" class="node"><title>node3</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="41" cy="-619" rx="41.0122" ry="18.3848"/>
+<text text-anchor="middle" x="41" y="-615.4" font-family="Consolas, monospace" font-size="14.00">NAME</text>
+<text text-anchor="middle" x="41" y="-605.4" font-family="Consolas, monospace" fill="green" font-size="14.00">имя</text>
+</g>
+<!-- node2&#45;&gt;node3 -->
+<g id="edge6" class="edge"><title>node2&#45;&gt;node3</title>
+<path fill="none" stroke="black" d="M148.481,-693.911C126.929,-678.89 95.452,-656.951 72.1273,-640.695"/>
+<polygon fill="black" stroke="black" points="73.8301,-637.615 63.6248,-634.769 69.8275,-643.358 73.8301,-637.615"/>
+</g>
+<!-- node4 -->
+<g id="node8" class="node"><title>node4</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="173" cy="-619" rx="73.0388" ry="18.3848"/>
+<text text-anchor="middle" x="173" y="-615.4" font-family="Consolas, monospace" font-size="14.00">PARAM_LIST</text>
+<text text-anchor="middle" x="173" y="-605.4" font-family="Consolas, monospace" fill="green" font-size="14.00">список параметров</text>
+</g>
+<!-- node2&#45;&gt;node4 -->
+<g id="edge8" class="edge"><title>node2&#45;&gt;node4</title>
+<path fill="none" stroke="black" d="M173,-692.382C173,-679.538 173,-662.216 173,-647.627"/>
+<polygon fill="black" stroke="black" points="176.5,-647.59 173,-637.59 169.5,-647.59 176.5,-647.59"/>
+</g>
+<!-- node6 -->
+<g id="node12" class="node"><title>node6</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="311" cy="-619" rx="44.7575" ry="18.3848"/>
+<text text-anchor="middle" x="311" y="-615.4" font-family="Consolas, monospace" font-size="14.00">BLOCK</text>
+<text text-anchor="middle" x="311" y="-605.4" font-family="Consolas, monospace" fill="green" font-size="14.00">тело функции</text>
+</g>
+<!-- node2&#45;&gt;node6 -->
+<g id="edge44" class="edge"><title>node2&#45;&gt;node6</title>
+<path fill="none" stroke="red" d="M184.468,-692.607C192.607,-680.813 204.461,-665.91 218,-656 226.315,-649.914 246.884,-641.526 266.57,-634.276"/>
+<polygon fill="red" stroke="red" points="267.894,-637.518 276.105,-630.823 265.511,-630.937 267.894,-637.518"/>
+<text text-anchor="middle" x="250" y="-661.4" font-family="Consolas, monospace" font-size="14.00" fill="red">UNCOND</text>
+</g>
+<!-- node2&#45;&gt;node6 -->
+<g id="edge12" class="edge"><title>node2&#45;&gt;node6</title>
+<path fill="none" stroke="black" d="M229.449,-702.19C249.189,-696.773 270.314,-688.046 286,-674 293.887,-666.937 299.441,-656.894 303.276,-647.318"/>
+<polygon fill="black" stroke="black" points="306.659,-648.247 306.675,-637.653 300.056,-645.925 306.659,-648.247"/>
+</g>
+<!-- node5 -->
+<g id="node10" class="node"><title>node5</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="172" cy="-527" rx="41.0122" ry="18.3848"/>
+<text text-anchor="middle" x="172" y="-523.4" font-family="Consolas, monospace" font-size="14.00">NAME</text>
+<text text-anchor="middle" x="172" y="-513.4" font-family="Consolas, monospace" fill="green" font-size="14.00">имя</text>
+</g>
+<!-- node4&#45;&gt;node5 -->
+<g id="edge10" class="edge"><title>node4&#45;&gt;node5</title>
+<path fill="none" stroke="black" d="M172.798,-600.382C172.658,-587.538 172.47,-570.216 172.311,-555.627"/>
+<polygon fill="black" stroke="black" points="175.811,-555.551 172.202,-545.59 168.811,-555.627 175.811,-555.551"/>
+</g>
+<!-- node7 -->
+<g id="node14" class="node"><title>node7</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="313" cy="-527" rx="82.0244" ry="18.3848"/>
+<text text-anchor="middle" x="313" y="-523.4" font-family="Consolas, monospace" font-size="14.00">EXPR_RESULT</text>
+<text text-anchor="middle" x="313" y="-513.4" font-family="Consolas, monospace" fill="green" font-size="14.00">выражение</text>
+</g>
+<!-- node6&#45;&gt;node7 -->
+<g id="edge42" class="edge"><title>node6&#45;&gt;node7</title>
+<path fill="none" stroke="red" d="M276.446,-606.903C254.841,-597.254 233.026,-582.337 244,-564 247.743,-557.745 252.946,-552.488 258.832,-548.084"/>
+<polygon fill="red" stroke="red" points="260.764,-551.002 267.21,-542.594 256.928,-545.147 260.764,-551.002"/>
+<text text-anchor="middle" x="276" y="-569.4" font-family="Consolas, monospace" font-size="14.00" fill="red">UNCOND</text>
+</g>
+<!-- node6&#45;&gt;node7 -->
+<g id="edge14" class="edge"><title>node6&#45;&gt;node7</title>
+<path fill="none" stroke="black" d="M311.405,-600.382C311.684,-587.538 312.061,-570.216 312.378,-555.627"/>
+<polygon fill="black" stroke="black" points="315.878,-555.664 312.596,-545.59 308.879,-555.511 315.878,-555.664"/>
+</g>
+<!-- node8 -->
+<g id="node16" class="node"><title>node8</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="313" cy="-435" rx="50.2046" ry="18.3848"/>
+<text text-anchor="middle" x="313" y="-431.4" font-family="Consolas, monospace" font-size="14.00">ASSIGN</text>
+<text text-anchor="middle" x="313" y="-421.4" font-family="Consolas, monospace" fill="green" font-size="14.00">присвоить</text>
+</g>
+<!-- node7&#45;&gt;node8 -->
+<g id="edge16" class="edge"><title>node7&#45;&gt;node8</title>
+<path fill="none" stroke="black" d="M313,-508.382C313,-495.538 313,-478.216 313,-463.627"/>
+<polygon fill="black" stroke="black" points="316.5,-463.59 313,-453.59 309.5,-463.59 316.5,-463.59"/>
+</g>
+<!-- node7&#45;&gt;RETURN -->
+<g id="edge40" class="edge"><title>node7&#45;&gt;RETURN</title>
+<path fill="none" stroke="red" d="M323.59,-508.44C330.399,-497.288 339.85,-483.147 350,-472 358.506,-462.659 363.307,-463.167 372,-454 386.118,-439.113 399.771,-420.528 409.942,-405.583"/>
+<polygon fill="red" stroke="red" points="412.858,-407.518 415.506,-397.26 407.039,-403.628 412.858,-407.518"/>
+<text text-anchor="middle" x="382" y="-477.4" font-family="Consolas, monospace" font-size="14.00" fill="red">UNCOND</text>
+</g>
+<!-- node9 -->
+<g id="node18" class="node"><title>node9</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="210" cy="-323" rx="60.1041" ry="18.3848"/>
+<text text-anchor="middle" x="210" y="-319.4" font-family="Consolas, monospace" font-size="14.00">GETPROP</text>
+<text text-anchor="middle" x="210" y="-309.4" font-family="Consolas, monospace" fill="green" font-size="14.00">получить свойство</text>
+</g>
+<!-- node8&#45;&gt;node9 -->
+<g id="edge18" class="edge"><title>node8&#45;&gt;node9</title>
+<path fill="none" stroke="black" d="M296.451,-417.005C279.408,-398.472 252.694,-369.425 233.472,-348.523"/>
+<polygon fill="black" stroke="black" points="235.853,-345.942 226.508,-340.95 230.701,-350.68 235.853,-345.942"/>
+</g>
+<!-- node12 -->
+<g id="node24" class="node"><title>node12</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="402" cy="-323" rx="63.8479" ry="18.3848"/>
+<text text-anchor="middle" x="402" y="-319.4" font-family="Consolas, monospace" font-size="14.00">FUNCTION</text>
+<text text-anchor="middle" x="402" y="-309.4" font-family="Consolas, monospace" fill="green" font-size="14.00">функция</text>
+</g>
+<!-- node8&#45;&gt;node12 -->
+<g id="edge24" class="edge"><title>node8&#45;&gt;node12</title>
+<path fill="none" stroke="black" d="M324.328,-416.766C334.328,-401.157 349.664,-378.363 365,-360 368.336,-356.006 372.031,-351.947 375.758,-348.052"/>
+<polygon fill="black" stroke="black" points="378.354,-350.404 382.878,-340.824 373.367,-345.492 378.354,-350.404"/>
+</g>
+<!-- node10 -->
+<g id="node20" class="node"><title>node10</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="107" cy="-247" rx="34.8574" ry="18.3848"/>
+<text text-anchor="middle" x="107" y="-243.4" font-family="Consolas, monospace" font-size="14.00">THIS</text>
+</g>
+<!-- node9&#45;&gt;node10 -->
+<g id="edge20" class="edge"><title>node9&#45;&gt;node10</title>
+<path fill="none" stroke="black" d="M186.628,-305.754C171.604,-294.669 151.973,-280.184 135.962,-268.37"/>
+<polygon fill="black" stroke="black" points="137.617,-265.241 127.492,-262.12 133.46,-270.874 137.617,-265.241"/>
+</g>
+<!-- node11 -->
+<g id="node22" class="node"><title>node11</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="210" cy="-247" rx="50.2046" ry="18.3848"/>
+<text text-anchor="middle" x="210" y="-243.4" font-family="Consolas, monospace" font-size="14.00">STRING</text>
+<text text-anchor="middle" x="210" y="-233.4" font-family="Consolas, monospace" fill="green" font-size="14.00">строка-константа</text>
+</g>
+<!-- node9&#45;&gt;node11 -->
+<g id="edge22" class="edge"><title>node9&#45;&gt;node11</title>
+<path fill="none" stroke="black" d="M210,-304.213C210,-295.654 210,-285.33 210,-275.822"/>
+<polygon fill="black" stroke="black" points="213.5,-275.57 210,-265.57 206.5,-275.57 213.5,-275.57"/>
+</g>
+<!-- node13 -->
+<g id="node26" class="node"><title>node13</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="319" cy="-247" rx="41.0122" ry="18.3848"/>
+<text text-anchor="middle" x="319" y="-243.4" font-family="Consolas, monospace" font-size="14.00">NAME</text>
+</g>
+<!-- node12&#45;&gt;node13 -->
+<g id="edge26" class="edge"><title>node12&#45;&gt;node13</title>
+<path fill="none" stroke="black" d="M382.33,-304.989C371.162,-294.763 357.045,-281.837 344.976,-270.785"/>
+<polygon fill="black" stroke="black" points="347.13,-268.012 337.391,-263.84 342.403,-273.175 347.13,-268.012"/>
+</g>
+<!-- node14 -->
+<g id="node28" class="node"><title>node14</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="451" cy="-247" rx="73.0388" ry="18.3848"/>
+<text text-anchor="middle" x="451" y="-243.4" font-family="Consolas, monospace" font-size="14.00">PARAM_LIST</text>
+</g>
+<!-- node12&#45;&gt;node14 -->
+<g id="edge28" class="edge"><title>node12&#45;&gt;node14</title>
+<path fill="none" stroke="black" d="M413.862,-304.603C419.776,-295.429 427.044,-284.156 433.578,-274.022"/>
+<polygon fill="black" stroke="black" points="436.601,-275.793 439.078,-265.491 430.717,-272 436.601,-275.793"/>
+</g>
+<!-- node15 -->
+<g id="node30" class="node"><title>node15</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="587" cy="-247" rx="44.7575" ry="18.3848"/>
+<text text-anchor="middle" x="587" y="-243.4" font-family="Consolas, monospace" font-size="14.00">BLOCK</text>
+</g>
+<!-- node12&#45;&gt;node15 -->
+<g id="edge30" class="edge"><title>node12&#45;&gt;node15</title>
+<path fill="none" stroke="black" d="M438.993,-307.803C469.763,-295.162 513.537,-277.179 545.496,-264.05"/>
+<polygon fill="black" stroke="black" points="547.088,-267.18 555.008,-260.143 544.428,-260.705 547.088,-267.18"/>
+</g>
+<!-- node16 -->
+<g id="node32" class="node"><title>node16</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="587" cy="-171" rx="82.0244" ry="18.3848"/>
+<text text-anchor="middle" x="587" y="-167.4" font-family="Consolas, monospace" font-size="14.00">EXPR_RESULT</text>
+</g>
+<!-- node15&#45;&gt;node16 -->
+<g id="edge32" class="edge"><title>node15&#45;&gt;node16</title>
+<path fill="none" stroke="black" d="M587,-228.213C587,-219.654 587,-209.33 587,-199.822"/>
+<polygon fill="black" stroke="black" points="590.5,-199.57 587,-189.57 583.5,-199.57 590.5,-199.57"/>
+</g>
+<!-- node17 -->
+<g id="node34" class="node"><title>node17</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="587" cy="-95" rx="36.977" ry="18.3848"/>
+<text text-anchor="middle" x="587" y="-91.4" font-family="Consolas, monospace" font-size="14.00">CALL</text>
+<text text-anchor="middle" x="587" y="-81.4" font-family="Consolas, monospace" fill="green" font-size="14.00">вызов функции</text>
+</g>
+<!-- node16&#45;&gt;node17 -->
+<g id="edge34" class="edge"><title>node16&#45;&gt;node17</title>
+<path fill="none" stroke="black" d="M587,-152.213C587,-143.654 587,-133.33 587,-123.822"/>
+<polygon fill="black" stroke="black" points="590.5,-123.57 587,-113.57 583.5,-123.57 590.5,-123.57"/>
+</g>
+<!-- node18 -->
+<g id="node36" class="node"><title>node18</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="537" cy="-19" rx="41.0122" ry="18.3848"/>
+<text text-anchor="middle" x="537" y="-15.4" font-family="Consolas, monospace" font-size="14.00">NAME</text>
+<text text-anchor="middle" x="537" y="-5.4" font-family="Consolas, monospace" fill="green" font-size="14.00">имя(функции)</text>
+</g>
+<!-- node17&#45;&gt;node18 -->
+<g id="edge36" class="edge"><title>node17&#45;&gt;node18</title>
+<path fill="none" stroke="black" d="M575.403,-77.373C569.138,-67.8494 561.277,-55.9018 554.303,-45.3004"/>
+<polygon fill="black" stroke="black" points="557.127,-43.2251 548.707,-36.7946 551.279,-47.0725 557.127,-43.2251"/>
+</g>
+<!-- node19 -->
+<g id="node38" class="node"><title>node19</title>
+<ellipse fill="#b2dfee" stroke="#b2dfee" cx="637" cy="-19" rx="41.0122" ry="18.3848"/>
+<text text-anchor="middle" x="637" y="-15.4" font-family="Consolas, monospace" font-size="14.00">NAME</text>
+<text text-anchor="middle" x="637" y="-5.4" font-family="Consolas, monospace" fill="green" font-size="14.00">имя(параметр)</text>
+</g>
+<!-- node17&#45;&gt;node19 -->
+<g id="edge38" class="edge"><title>node17&#45;&gt;node19</title>
+<path fill="none" stroke="black" d="M598.597,-77.373C604.862,-67.8494 612.723,-55.9018 619.697,-45.3004"/>
+<polygon fill="black" stroke="black" points="622.721,-47.0725 625.293,-36.7946 616.873,-43.2251 622.721,-47.0725"/>
+</g>
+</g>
+</svg>
diff --git a/3-more/5-compress/2-better-minification/article.md b/3-more/5-compress/2-better-minification/article.md
new file mode 100644
index 00000000..68b4debb
--- /dev/null
+++ b/3-more/5-compress/2-better-minification/article.md
@@ -0,0 +1,182 @@
+# Улучшаем сжатие кода
+
+Здесь мы обсудим разные приёмы, которые используются, чтобы улучшить сжатие кода.
+[cut]
+## Больше локальных переменных
+
+Например, код jQuery обёрнут в  функцию, запускаемую "на месте".
+
+```js
+(function(window, undefined) {
+  // ...
+  var jQuery = ...
+
+  window.jQuery = jQuery; // сделать переменную глобальной
+
+})(window);
+```
+
+Переменные `window` и `undefined` стали локальными. Это позволит сжимателю заменить их на более короткие.
+
+## ООП без прототипов
+
+Приватные переменные будут сжаты и заинлайнены.
+
+Например, этот код хорошо сожмётся:
+
+```js
+function User(firstName, lastName) {
+  var fullName = firstName + ' ' + lastName;
+
+  this.sayHi = function() { 
+    showMessage(fullName);
+  }
+
+  function showMessage(msg) {
+    alert('**' + msg + '**');
+  }
+}
+```
+
+..А этот -- плохо:
+
+```js
+function User(firstName, lastName) {
+  this._firstName = firstName;
+  this._lastName = lastName;
+}
+
+User.prototype.sayHi = function() { 
+  this._showMessage(this._fullName);
+}
+
+
+User.prototype._showMessage = function(msg) { 
+  alert('**' + msg + '**');
+}
+```
+
+Сжимаются только локальные переменные, свойства объектов не сжимаются, поэтому эффект от сжатия для второго кода будет совсем небольшим.
+
+При этом, конечно, нужно иметь в виду общий стиль ООП проекта, достоинства и недостатки такого подхода.
+
+## Сжатие под платформу, define
+
+Можно делать разные сборки в зависимости от платформы (мобильная/десктоп) и браузера.
+
+Ведь не секрет, что ряд функций могут быть реализованы по разному, в зависимости от того, поддерживает ли среда выполнения нужную возможность.
+
+### Способ 1: локальная переменная
+
+Проще всего это сделать локальной переменной в модуле:
+
+```js
+(function($) {      
+
+*!*
+   /** @const */
+   var platform = 'IE';  
+*/!*
+
+   // .....
+   
+   if (platform == 'IE') {
+       alert('IE');
+   } else {
+       alert('NON-IE');
+   }
+   
+})(jQuery);
+```
+
+Нужное значение директивы можно вставить при подготовке JavaScript к сжатию.
+
+Сжиматель заинлайнит её и оптимизирует соответствующие IE.
+
+### Способ 2: define
+
+UglifyJS и GCC позволяют задать значение глобальной переменной из командной строки. 
+
+В GCC эта возможность доступна лишь в "продвинутом режиме" работы оптимизатора, который мы рассмотрим далее (он редко используется).
+
+Удобнее в этом плане устроен UglifyJS. В нём можно указать флаг `-d SYMBOL[=VALUE]`, который заменит все переменные `SYMBOL` на указанное значение `VALUE`. Если `VALUE` не указано, то оно считается равным `true`.
+
+Флаг не работает, если переменная определена явно.
+
+Например, рассмотрим код:
+
+```js
+// my.js
+if (isIE) {
+  alert("Привет от IE");
+} else {  
+  alert("Не IE :)");
+}
+```
+
+Сжатие вызовом `uglifyjs -d isIE my.js` даст:
+
+```js
+alert("Привет от IE");
+```
+
+..Ну а чтобы код работал в обычном окружении, нужно определить в нём значение переменной по умолчанию. Это обычно делается в каком-то другом файле (на весь проект), так как если объявить `var isIE` в этом, то флаг `-d isIE` не сработает.
+
+Но можно и "хакнуть" сжиматель, объявив переменную так:
+
+```js
+// объявит переменную при отсутствии сжатия
+// при сжатии не повредит
+window.isIE = window.isIE || getBrowserVersion();
+```
+
+## Убираем вызовы console.*
+
+Минификатор имеет в своём распоряжении дерево кода и может удалить ненужные вызовы. Хотя по умолчанию в UglifyJS и GCC такого флага нет, код минификатора можно легко расширить, добавив эту возможность.
+
+<ul>
+<li>Для UglifyJS функция обхода дерева:
+
+```js
+//+ hide="Раскрыть функцию"
+function ast_squeeze_console(ast) {
+    var w = pro.ast_walker(),
+        walk = w.walk,
+        scope;
+    return w.with_walkers({
+        "stat": function(stmt) {
+            if(stmt[0] === "call" && stmt[1][0] == "dot" && stmt[1][1] instanceof Array && stmt[1][1][0] == 'name' && stmt[1][1][1] == "console") {
+                return ["block"];
+            }
+            return ["stat", walk(stmt)];
+        },
+        "call": function(expr, args) {
+            if(expr[0] == "dot" && expr[1] instanceof Array && expr[1][0] == 'name' && expr[1][1] == "console") {
+                return ["atom", "0"];
+            }
+        }
+    }, function() {
+        return walk(ast);
+    });
+};
+```
+
+Полный код, использующий эту функцию и модуль uglify-js для сжатия с убиранием вызова: [myuglify.js](/files/tutorial/compress/myuglify.js).
+
+Вы можете добавить свои любимые опции и использовать его вместо поставляемого "из коробки".
+</li>
+<li>В GCC соответствующие опции называются `stripNameSuffixes` и `stripTypePrefixes`, но они скрыты при запуске минификатора из командной строки или через веб-сервис.
+
+Чтобы их использовать, нужно либо поставить утилиту [plovr](http://plovr.com/), что эквивалентно стрельбе из пушки по воробьям, либо написать свой Java-код для вызова компилятора, который будет ставить опции.
+
+Выглядеть этот код может [примерно так](https://groups.google.com/d/msg/closure-compiler-discuss/qqdnzikzpWA/8cPHKIR1svgJ).
+</li>
+</ul>
+
+Аналогичным образом можно убрать и любой другой код, например вызовы вашего собственного логгера.
+
+
+
+
+
+
diff --git a/3-more/5-compress/3-gcc-advanced-optimization/article.md b/3-more/5-compress/3-gcc-advanced-optimization/article.md
new file mode 100644
index 00000000..8e7bf6ca
--- /dev/null
+++ b/3-more/5-compress/3-gcc-advanced-optimization/article.md
@@ -0,0 +1,518 @@
+# GCC: продвинутые оптимизации
+
+Продвинутый режим оптимизации google closure compiler включается опцией <code>--compilation_level ADVANCED_OPTIMIZATIONS.</code>
+
+Слово "продвинутый" (advanced) здесь, пожалуй, не совсем подходит. Было бы более правильно назвать его "супер-агрессивный-ломающий-ваш-неподготовленный-код-режим". Кардинальное отличие применяемых оптимизаций от обычных (simple) -- в том, что они небезопасны.
+
+Чтобы им пользоваться -- надо уметь это делать.
+[cut]
+
+## Основной принцип продвинутого режима
+
+<ul>
+<li>Если в обычном режиме переименовываются только локальные переменные внутри функций, то в "продвинутом" -- на более короткие имена заменяется все.</li>
+<li>Если в обычном режиме удаляется недостижимый код после <code>return</code>, то в продвинутом -- вообще весь код, который не вызывается в явном виде.</li>
+</ul>
+
+Например, если запустить продвинутую оптимизацию на таком коде:
+
+```js
+// my.js
+function test(node) {
+  node.innerHTML = "newValue"
+}
+```
+
+Строка запуска компилятора:
+
+```
+java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js my.js
+```
+
+...То результат будет -- пустой файл. Google Closure Compiler увидит, что функция <code>test</code> не используется, и с чистой совестью вырежет ее.  
+
+А в следующем скрипте функция сохранится:
+
+```js
+function test(n) {
+  alert("this is my test number " + n);
+}
+test(1);
+test(2);
+```
+
+После сжатия:
+
+```js
+function a(b) {
+  alert("this is my test number " + b)
+}
+a(1);
+a(2);
+```
+
+Здесь в скрипте присутствует явный вызов функции, поэтому она сохранилась.
+
+Конечно, есть способы, чтобы сохранить функции, вызов которых происходит вне скрипта, и мы их обязательно рассмотрим.
+
+**Продвинутый режим сжатия не предусматривает сохранения глобальных переменных. Он  переименовывает, инлайнит, удаляет вообще все символы, кроме зарезервированных.**
+
+Иначе говоря, продвинутый режим (ADVANCED_OPTIMIZATIONS), в отличие от простого (SIMPLE_OPTIMIZATIONS -- по умолчанию), вообще не заботится о доступности кода извне и сохранении ссылочной целостности относительно внешних скриптов. 
+
+Единственное, что он гарантирует -- это внутреннюю ссылочную целостность, и то -- при соблюдении ряда условий и практик программирования.  
+
+Собственно, за счет такого агрессивного подхода и достигается дополнительный эффект оптимизации и сжатия скриптов.
+
+[summary]
+То есть, продвинутый режим - это не просто "улучшенный обычный", а принципиально другой, небезопасный и обфусцирующий подход к сжатию.
+
+Этот режим является "фирменной фишкой" Google Closure Compiler, недоступной при использовании других компиляторов.
+[/summary]
+
+Для того, чтобы эффективно сжимать Google Closure Compiler в продвинутом режиме, нужно понимать, что и как он делает. Это мы сейчас обсудим.
+
+### Сохранение ссылочной целостности
+
+Чтобы использовать сжатый скрипт, мы должны иметь возможность вызывать функции под теми именами, которые им дали. 
+
+То есть, перед нами стоит задача *сохранения ссылочной целостности*, которая заключается в том, чтобы обеспечить доступность нужных функций для обращений по исходному имени извне скрипта. 
+
+Существует два способа сохранения внешней ссылочной целостности: экстерны и экспорты. Мы в подробностях рассмотрим оба, но перед этим необходимо упомянуть о модулях -- другой важнейшей возможности GCC.
+
+### Модули
+
+При сжатии GCC можно указать одновременно много JavaScript-файлов. "Эка невидаль, " -- скажете вы, и будете правы. Да, пока что ничего особого.
+
+Но в дополнение к этому можно явно указать, какие исходные файлы сжать в какие файлы результата. То есть, разбить итоговую сборку на модули.
+
+Так что страницы могут грузить модули по мере надобности. Например, по умолчанию -- главный, а дополнительная функциональность -- загружаться лишь там, где она нужна.
+
+Для такой сборки используется флаг компилятора `--module имя:количество файлов`.
+
+Например:
+
+```
+java -jar compiler.jar --js base.js --js main.js  --js admin.js --module
+first:2 --module second:1:first
+```
+
+Эта команда создаст модули: first.js и second.js.
+
+Первый модуль, который назван "first", создан из объединённого и оптимизированного кода первых двух файлов (`base.js` и `main.js`).
+
+Второй модуль, который назван "second", создан из `admin.js` -- это следующий аргумент `--js` после включенных в первый модуль. 
+
+Второй модуль в нашем случае зависит от первого. Флаг `--module second:1:first` как раз означает, что модуль `second` будет создан из одного файла после вошедших в предыдущий модуль (`first`) и зависит от модуля `first`. 
+
+А теперь -- самое вкусное.
+
+**Ссылочная целостность между всеми получившимися файлами гарантируется.**
+
+Если в одном функция `doFoo` заменена на `b`, то и в другом тоже будет использоваться `b`. 
+
+Это означает, что проблем между JS-файлами не будет. Они могут свободно вызывать друг друга без экспорта, пока находятся в единой модульной сборке.
+
+### Экстерны
+
+Экстерн (extern) -- имя, которое числится в специальном списке компилятора. Он должен быть определен вне скрипта, в файле экстернов.
+
+**Компилятор никогда не переименовывает экстерны.** 
+
+Например:
+
+```js
+document.onkeyup = function(event) { alert(event.type) }
+```
+
+После продвинутого сжатия:
+
+```js
+document.onkeyup = function(a) { alert(a.type) }
+```
+
+Как видите, переименованной оказалась только переменная `event`. Такое переименование заведомо безопасно, т.к. `event` -- локальная переменная.
+
+Почему компилятор не тронул остального? Попробуем другой вариант:
+
+```js
+document.blabla = function(event) { alert(event.megaProperty) }
+```
+
+После компиляции:
+
+```js
+document.a = function(a) { alert(a.b) }
+```
+
+Теперь компилятор переименовал и <code>blabla</code> и <code>megaProperty</code>. 
+
+Дело в том, что названия, использованные до этого, были во внутреннем списке экстернов компилятора. Этот список охватывает основные объекты браузеров и находится (под именем <code>externs.zip</code>) в корне архива <code>compiler.jar</code>.
+
+**Компилятор переименовывает имя списка экстернов только когда так названа локальная переменная.**
+
+Например:
+
+```js
+window.resetNode = function(node) {
+  var innerHTML = "test";
+  node.innerHTML = innerHTML;
+}
+```
+
+На выходе:
+
+```js
+window.a = function(a) {
+  a.innerHTML = "test"
+};
+```
+
+Как видите, внутренняя переменная <code>innerHTML</code> не просто переименована - она заинлайнена (заменена на значение). Так как переменная локальна, то любые действия внутри функции с ней безопасны.
+
+А свойство <code>innerHTML</code> не тронуто, как и объект <code>window</code> -- так как они в списке экстернов и не являются локальными переменными.
+
+Это приводит к следующему побочному эффекту. Иногда свойства, которые следовало бы сжать, не сжимаются. Например:
+
+```js
+window['User'] = function(name, type, age) {
+	this.name = name
+	this.type = type
+	this.age = age
+}
+```
+
+После сжатия:
+
+```js
+window.User = function(a, b, c) {
+  this.name = a;
+  this.type = b;
+  this.a = c
+};
+```
+
+Как видно, свойство <code>age</code> сжалось, а <code>name</code> и <code>type</code> -- нет. Это побочный эффект экстернов:  <code>name</code> и <code>type</code> -- в списке объектов браузера, и компилятор просто старается не наломать дров.
+
+Поэтому отметим еще одно полезное правило оптимизации:
+
+**Названия своих свойств не должны совпадать с зарезервированными словами (экстернами). Тогда они будут хорошо сжиматься.**
+
+Для задания списка экстернов их достаточно перечислить в файле и указать этот файл флагом <code>--externs &lt;файл экстернов.js&gt;</code>.
+
+При перечислении объектов в файле экстернов - объявляйте их и перечисляйте свойства. Все эти объявления никуда не идут, они используются только для создания списка, который обрабатывается компилятором.
+
+Например, файл `myexterns.js`:
+
+```js
+var dojo = {}
+dojo._scopeMap;
+```
+
+Использование такого файла при сжатии (опция <code>--externs myexterns.js</code>) приведет к тому, что все обращения к символам <code>dojo</code> и к <code>dojo._scopeMap</code> будут не сжаты, а оставлены "как есть".
+
+
+### Экспорт
+
+*Экспорт* -- программный ход, основанный на следующем правиле поведения компилятора.
+
+**Компилятор заменяет обращения к свойствам через кавычки на точку, и при этом не трогает название свойства.**
+
+Например, <code>window['User']</code> превратится в <code>window.User</code>, но не дальше. 
+
+Таким образом можно *"экспортировать"* нужные функции и объекты:
+
+```js
+function SayWidget(elem) {
+  this.elem = elem
+  this.init()
+}
+window['SayWidget'] = SayWidget;
+```
+
+На выходе:
+
+```js
+function a(b) {
+  this.a = b;
+  this.b()
+}
+window.SayWidget = a;
+```
+
+Обратим внимание -- сама функция <code>SayWidget</code> была переименована в <code>a</code>. Но затем -- экспортирована как <code>window.SayWidget</code>, и таким образом доступна внешним скриптам.
+
+Добавим пару методов в прототип:
+
+```js
+function SayWidget(elem) {
+  this.elem = elem;
+  this.init();
+}
+
+SayWidget.prototype = {
+  init: function() {
+    this.elem.style.display = 'none'
+  },
+	
+  setSayHandler: function() {
+    this.elem.onclick = function() { 
+      alert("hi")
+    };
+  }
+}
+
+window['SayWidget'] = SayWidget;
+SayWidget.prototype['setSayHandler'] = SayWidget.prototype.setSayHandler;
+```
+
+После сжатия:
+
+```js
+function a(b) {
+  this.a = b;
+  this.b()
+}
+a.prototype = {b:function() {
+  this.a.style.display = "none"
+}, c:function() {
+  this.a.onclick = function() {
+    alert("hi")
+  }
+}};
+window.SayWidget = a;
+a.prototype.setSayHandler = a.prototype.c;
+```
+
+Благодаря строке
+
+```js
+SayWidget.prototype['setSayHandler'] = SayWidget.prototype.setSayHandler
+```
+
+метод <code>setSayHandler</code> экспортирован и доступен для внешнего вызова.
+
+Сама строка экспорта выглядит довольно глупо. По виду -- присваиваем свойство самому себе. 
+
+Но логика сжатия GCC работает так, что такая конструкция является экспортом. Справа переименование свойства <code>setSayHandler</code> происходит, а слева -- нет.
+
+[smart header="Планируйте жизнь после сжатия"]
+
+Рассмотрим следующий код:
+
+```js
+window['Animal'] = function() {
+  this.blabla = 1;
+  this['blabla'] = 2;
+}
+```
+
+После сжатия:
+
+```js
+window.Animal = function() {
+  this.a = 1;
+  this.blabla = 2
+};
+```
+
+Как видно, первое обращение к свойству <code>blabla</code> сжалось, а второе (как и все аналогичные) -- преобразовалось в синтаксис через точку.
+В результате получили некорректное поведение кода. 
+
+Так что, используя продвинутый режим оптимизации, планируйте поведение кода после сжатия. 
+
+**Если где-то возможно обращение к свойствам через квадратные скобки по полному имени -- такое свойство должно быть экспортировано.**
+[/smart] 
+
+### goog.exportSymbol и goog.exportProperty
+
+В библиотеке [Google Closure Library](https://developers.google.com/closure/library/) для экспорта есть специальная функция <code>goog.exportSymbol</code>. Вызывается так:
+
+```js
+goog.exportSymbol('my.SayWidget', SayWidget)
+```
+
+Эта функция по сути работает также, как и рассмотренная выше строка с присвоением свойства, но при необходимости создает нужные объекты.
+
+Она аналогична коду:
+
+```js
+window['my'] = window['my'] || {}
+window['my']['SayWidget'] = SayWidget
+```
+
+То есть, если путь к объекту не существует -- <code>exportSymbol</code> создаст нужные пустые объекты.
+
+Функция <code>goog.exportProperty</code> экспортирует свойство объекта:
+
+```js
+goog.exportProperty(SayWidget.prototype, 'setSayHandler', SayWidget.prototype.setSayHandler)
+```
+
+Строка выше - то же самое, что и:
+
+```js
+SayWidget.prototype['setSayHandler'] = SayWidget.prototype.setSayHandler
+```
+
+Зачем они нужны, если все можно сделать простым присваиванием?
+
+Основная цель этих функций -- во взаимодействии с Google Closure Compiler. Они дают информацию компилятору об экспортах, которую он может использовать.
+
+Например, есть недокументированная внутренняя опция <code>externExportsPath</code>, которая генерирует из всех экспортов файл экстернов. Таким образом можно распространять откомпилированный JavaScript-файл как внешнюю библиотеку, с файлом экстернов для удобного внешнего связывания.
+
+Кроме того, экспорт через эти функциями удобен и нагляден. 
+
+Если вы используете продвинутый режим оптимизации, то можно взять их из файла base.js Google Closure Library. Можно и подключить этот файл целиком -- оптимизатор при продвинутом сжатии вырежет из него почти всё лишнее, так что overhead будет минимальным.
+
+### Отличия экспорта от экстерна
+
+Между экспортом и экстерном есть кое-что общее. И то и другое дает возможность доступа к объектам под исходным именем, до переименования.
+
+Но, в остальном, это совершенно разные вещи.
+
+<table class="bordered">
+<thead>
+<th style="text-align:center">Экстерн</th>
+<th style="text-align:center">Экспорт</th>
+</thead>
+<tbody>
+<tr>
+<td>Служит для тотального запрета на переименование всех обращений к свойству. 
+Задумано для сохранения обращений к стандартным объектам браузера, внешним библиотекам.</td>
+<td>Служит для открытия доступа к свойству извне под указанным именем. 
+Задумано для открытия внешнего интерфейса к сжатому скрипту.</td>
+</tr>
+<tr>
+<td>Работает со свойством, объявленным вне скрипта. 
+Вы не можете объявить новое свойство в скрипте и сделать его экстерном.</td>
+<td>Создает ссылку на свойство, объявленное в скрипте.</td>
+</tr>
+<tr>
+<td>Если <code>window</code> - экстерн, то все обращения к  <code>window</code> в скрипте останутся как есть.</td>
+<td>Если <code>user</code> экспортируется, то создается только одна ссылка под полным именем, а все остальные обращения будут сокращены.</td>
+</tr>
+</tbody>
+</table>
+
+
+## Стиль разработки
+
+Посмотрим, как сжиматель поведёт себя на следующем, типичном, объявлении библиотеки:
+
+```js
+(function(window, undefined) {
+
+  // пространство имен и локальная перменная для него
+  var MyFramework = window.MyFramework = {};
+
+  // функция фреймворка, доступная снаружи
+  MyFramework.publicOne = function() {
+    makeElem();
+  };
+
+  // приватная функция фреймворка
+  function makeElem() {
+    var div = document.createElement('div');
+    document.body.appendChild(div);
+  }
+
+  // еще какая-то функция
+  MyFramework.publicTwo = function() {};
+
+})(window);
+
+// использование
+MyFramework.publicOne();
+```
+
+Результат компиляции в обычном режиме:
+
+```js
+// java -jar compiler.jar --js myframework.js --formatting PRETTY_PRINT
+(function(a) {
+  a = a.MyFramework = {};
+  a.publicOne = function() {
+    var a = document.createElement("div");
+    document.body.appendChild(a)
+  };
+  a.publicTwo = function() {
+  }
+})(window);
+MyFramework.publicOne();
+```
+
+Это -- примерно то, что мы ожидали. Неиспользованный метод `publicTwo` остался, локальные свойства переименованы и заинлайнены.
+
+А теперь продвинутый режим:
+
+```js
+// --compilation_level ADVANCED_OPTIMIZATIONS
+window.a = {};
+MyFramework.b();
+```
+
+Оно не работает! Компилятор попросту не разобрался, что и как вызывается, и превратил рабочий JS-файл в один сплошной баг.
+
+В зависимости от версии GCC у вас может быть и что-то другое.
+
+Всё дело в том, что такой стиль объявления нетипичен для инструментов, которые в самом Google разрабатываются и сжимаются этим минификатором. 
+
+Типичный правильный стиль:
+
+```js
+// пространство имен и локальная перменная для него
+var MyFramework = {};
+
+MyFrameWork._makeElem = function() {
+  var div = document.createElement('div');
+  document.body.appendChild(div);
+};
+
+MyFramework.publicOne = function() {
+  MyFramework._makeElem();
+};
+
+MyFramework.publicTwo = function() {};
+
+// использование
+MyFramework.publicOne();
+```
+
+Обычное сжатие здесь будет бесполезно, а вот продвинутый режим идеален:
+
+```js
+// в зависимости от версии GCC результат может отличаться
+MyFrameWork.a = function() {
+  var a = document.createElement("div");
+  document.body.appendChild(a)
+};
+MyFrameWork.a();
+```
+
+Google Closure Compiler не только разобрался в структуре и удалил лишний метод - он заинлайнил функции, чтобы итоговый размер получился минимальным.
+
+Как говорится, преимущества налицо.
+
+## Резюме
+
+Продвинутый режим оптимизации сжимает, оптимизирует и, при возможности, удаляет все свойства и методы, за исключением экстернов. 
+
+Это является принципиальным отличием, по сравнению с другими упаковщиками.
+
+Отказ от сохранения внешней ссылочной целостности с одной стороны позволяет увеличить уровень сжатия, но требует поддержки со стороны разработчика.
+
+Основная проблема этого сжатия -- усложнение разработки. Добавляется дополнительный уровень возможных проблем: сжатие. Конечно, можно отлаживать и сжатый код, для этого придуманы [Source Maps](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/), но клиентская разработка и без того достаточно сложна.
+
+Поэтому его используют редко. 
+
+Как правило, есть две причины для использования продвинутого режима:
+<ol>
+<li>**Обфускация кода.** 
+
+Если в коде после обычного сжатия ещё как-то можно разобраться, то после продвинутого -- уже нет. Всё переименовано и заинлайнено. В теории это, конечно, возможно, но "порог входа" в такой код несоизмеримо выше. 
+
+Судя по виду скриптов на сайтах, созданных Google, сам Google жмет свои скрипты именно продвинутым режимом оптимизации. И библиотека Google Closure Library тоже рассчитана на него.</li>
+<li>**Хорошие сжатие виджетов, счётчиков.**
+
+Небольшой код, который отдаётся наружу, может быть сжат в продвинутом режиме. Так как он небольшой -- все ошибки можно легко исправить, а продвинутый режим гарантирует наилучшее сжатие.</li>
+</ol>
diff --git a/3-more/5-compress/4-gcc-check-types/article.md b/3-more/5-compress/4-gcc-check-types/article.md
new file mode 100644
index 00000000..293a4dda
--- /dev/null
+++ b/3-more/5-compress/4-gcc-check-types/article.md
@@ -0,0 +1,175 @@
+# GCC: статическая проверка типов 
+
+Google Closure Compiler, как и любой кошерный компилятор, старается проверить правильность кода и предупредить о возможных ошибках.
+
+Первым делом он, разумеется, проверяет структуру кода и сразу же выдает такие ошибки как пропущенная скобка или лишняя запятая. 
+
+Но, кроме этого, он умеет проверять типы переменных, используя как свои собственные знания о встроенных javascript-функциях и преобразованиях типов, 
+так и информацию о типах из JSDoc, указываемую javascript-разработчиком.
+
+Это обеспечивает то, чем так гордятся компилируемые языки -- статическую проверку типов, что позволяет избежать лишних ошибок во время выполнения.
+[cut]
+
+Для вывода предупреждений при проверки типов используется флаг `--jscomp_warning checkTypes`.
+
+## Задание типа при помощи аннотации
+
+Самый очевидный способ задать тип -- это использовать аннотацию. Полный список аннотаций вы найдете в <a href="http://code.google.com/intl/ru/closure/compiler/docs/js-for-compiler.html">документации</a>.
+
+В следующем примере параметр <code>id</code> функции <code>f1</code> присваивается переменной <code>boolVar</code> другого типа:
+
+```js
+/** @param {number} id */
+function f(id) {
+  /** @type {boolean} */
+  var boolVar;
+
+  boolVar = id; // (!)
+}
+```
+
+Компиляция с флагом `--jscomp_warning checkTypes` выдаст предупреждение:
+
+```
+f.js:6: WARNING - assignment
+found   : number
+required: boolean
+        boolVar = id; // (!)
+        ^
+```
+
+Действительно: произошло присвоение значения типа <code>number</code> переменной типа <code>boolean</code>.
+
+Типы отслеживаются по цепочке вызовов.
+
+Еще пример, на этот раз вызов функции с некорректным параметром:
+
+```js
+/** @param {number} id */
+function f1(id) {
+  f2(id); // (!)
+}
+
+/** @param {string} id */
+function f2(id) { }
+```
+
+Такой вызов приведёт к предупреждению со стороны минификатора:
+
+```
+f2.js:3: WARNING - actual parameter 1 of f2 does not match formal parameter
+found   : number
+required: string
+  f2(id); // (!)
+     ^
+```
+
+Действительно, вызов функции <code>f2</code> произошел с числовым типом вместо строки. 
+
+**Отслеживание приведений и типов идёт при помощи графа взаимодействий и выведению (infer) типов, который строит GCC по коду.**
+
+## Знания о преобразовании типов
+
+Google Closure Compiler знает, как операторы javascript преобразуют типы. Такой код уже не выдаст ошибку:
+
+```js
+/** @param {number} id */
+function f1(id) {
+  /** @type {boolean} */
+  var boolVar;
+
+  boolVar = !!id
+}
+```
+
+Действительно - переменная преобразована к типу boolean двойным оператором НЕ.
+А код <code>boolVar = 'test-'+id</code> выдаст ошибку, т.к. конкатенация со строкой дает тип <code>string</code>.
+
+## Знание о типах встроенных функций, объектные типы
+
+Google Closure Compiler содержит описания большинства встроенных объектов и функций javascript вместе с типами параметров и результатов.
+
+Например, объектный тип <code>Node</code> соответствует узлу DOM. 
+
+Пример некорректного кода:
+
+```js
+/** @param {Node} node */
+function removeNode(node) {
+  node.parentNode.removeChild(node)
+}
+document.onclick = function() {
+  removeNode("123")
+}
+```
+
+Выдаст предупреждение
+
+```
+f3.js:7: WARNING - actual parameter 1 of removeNode does not match formal parameter
+found   : string
+required: (Node|null)
+  removeNode("123")
+             ^
+```
+
+Обратите внимание - в этом примере компилятор выдает <code>required: Node|null</code>. Это потому, что указание объектного типа (не элементарного) подразумевает, что в функцию может быть передан <code>null</code>.
+
+В следующем примере тип указан жестко, без возможности обнуления:
+
+```js
+*!*
+/** @param {!Node} node */
+*/!*
+function removeNode(node) {
+	node.parentNode.removeChild(node)
+}
+```
+
+Восклицательный знак означает, что параметр обязатален.
+
+Найти описания встроенных типов и объектов javascript вы можете в файле экстернов: <code>externs.zip</code> находится в корне архива <code>compiler.jar</code>, или в соответствующей директории SVN: <a href="http://closure-compiler.googlecode.com/svn/trunk/externs/">http://closure-compiler.googlecode.com/svn/trunk/externs/</a>.
+
+## Интеграция с проверками типов из Google Closure Library
+
+В Google Closure Library есть функции проверки типов: <code>goog.isArray</code>, <code>goog.isDef</code>, <code>goog.isNumber</code> и т.п.
+
+Google Closure Compiler знает о них и понимает, что внутри следующего <code>if</code> переменная может быть только функцией:
+
+```js
+var goog = {
+  isFunction: function(f) { return typeof f == 'function' }
+}
+
+if (goog.isFunction(func)) {
+  func.apply(1, 2)
+}
+```
+
+Сжатие с проверкой выдаст предупреждение:
+
+```
+f.js:6: WARNING - actual parameter 2 of Function.apply does not match formal parameter
+found   : number
+required: (Object|null|undefined)
+  func.apply(1, 2)
+                ^      ^
+```
+
+То есть, компилятор увидел, что код, использующий <code>func</code> находится в `if (goog.isFunction(func))` и сделал соответствующий вывод, что это в этой ветке `func` является функцией, а значит вызов `func.apply(1,2)` ошибочен (второй аргумент не может быть числом).
+
+Дело тут именно в интеграции с Google Closure Library. Если поменять `goog` на `g` -- предупреждения не будет. 
+
+## Резюме
+
+Из нескольких примеров, которые мы рассмотрели, должна быть понятна общая логика проверки типов.
+
+Соответствующие различным типам и ограничениям на типы аннотации вы можете найти в <a href="http://code.google.com/intl/ru/closure/compiler/docs/js-for-compiler.html">Документации Google</a>. В частности, возможно указание нескольких возможных типов, типа <code>undefined</code> и т.п.
+
+Также можно указывать количество и тип параметров функции, ключевого слова <code>this</code>, объявлять классы, приватные методы и интерфейсы.
+
+Проверка типов javascript, предоставляемая Google Closure Compiler - пожалуй, самая продвинутая из существующих на сегодняшний день.
+
+C ней аннотации, документирующие типы и параметры, становятся не просто украшением, а реальным средством проверки, уменьшающим количество ошибок на production.
+
+Очень подробно проверка типов описана в книге [Closure: The Definitive Guide](http://www.ozon.ru/context/detail/id/6089988/), автора Michael Bolin.
\ No newline at end of file
diff --git a/3-more/5-compress/5-gcc-closure-library/article.md b/3-more/5-compress/5-gcc-closure-library/article.md
new file mode 100644
index 00000000..ffd5d881
--- /dev/null
+++ b/3-more/5-compress/5-gcc-closure-library/article.md
@@ -0,0 +1,183 @@
+# GCC: интеграция с Google Closure Library
+
+Google Closure Compiler содержит ряд специальных возможностей для интеграции с Google Closure Library. 
+
+Здесь важны две вещи.
+<ol>
+<li>Для их использования возможно использовать минимум от Google Closure Library. Например, взять одну или несколько функций из библиотеки.</li>
+<li>GCC -- расширяемый компилятор, можно добавить к нему свои "фазы оптимизации" для интеграции с другими инструментами и фреймворками.</li>
+</ol>
+[cut]
+
+Интеграция с Google Closure Library подключается флагом <code>--process_closure_primitives</code>, который по умолчанию установлен в <code>true</code>. То есть, она включена по умолчанию.
+
+Этот флаг запускает специальный проход компилятора, описанный классом <code>ProcessClosurePrimitives</code> и подключает дополнительную проверку типов <code>ClosureReverseAbstractInterpreter</code>. 
+
+Мы рассмотрим все действия, которые при этом происходят, а также некоторые опции, которые безопасным образом используют символы Google Closure Library  без объявления флага.
+
+## Преобразование основных символов
+
+Следующие действия описаны в классе <code>ProcessClosurePrimitives</code>.
+
+### Замена константы <code>COMPILED</code>
+
+В Google Closure Library есть переменная:
+
+```js
+/**
+ * @define {boolean} ...
+ */
+var COMPILED = false;
+```
+
+Проход <code>ProcessClosurePrimitives</code> переопределяет ее в <code>true</code> и использует это при оптимизациях, удаляя ветки кода, не предназначены для запуска на production.
+
+Такие функции существуют, например, в ядре Google Closure Library. К ним в первую очередь относятся вызовы, предназначенные для сборки и проверки зависимостей. Они содержат код, обрамленный проверкой <code>COMPILED</code>, например:
+
+```js
+goog.require = function(rule) {
+   // ...
+  if (!COMPILED) {
+     // основное тело функции
+  }
+}
+```
+
+Аналогично может поступить и любой скрипт, даже без использования Google Closure Library:
+
+```js
+/** @define {boolean} */
+var COMPILED = false
+
+Framework = { }
+
+Framework.sayCompiled = function() {
+	if (!COMPILED) {
+		alert("Not compressed")
+	} else {
+		alert("Compressed")
+	}
+}
+```
+
+Для того, чтобы сработало, нужно сжать в продвинутом режиме:
+
+```js
+Framework = {};
+Framework.sayCompiled = Framework.a = function() {
+  alert("Compressed");
+};
+```
+
+Компилятор переопределил <code>COMPILED</code> в <code>true</code> и произвел соответствующие оптимизации. 
+
+### Автоподстановка локали
+
+В Google Closure Compiler есть внутренняя опция <code>locale</code>
+
+Эта опция переопределяет переменную <code>goog.LOCALE</code> на установленную при компиляции.
+
+Для использования опции <code>locale</code>, на момент написания статьи, ее нужно задать в Java коде компилятора, т.к. соответствующего флага нет.
+
+Как и <code>COMPILED</code>, константу <code>goog.LOCALE</code> можно и использовать в своем коде без библиотеки Google Closure Library.
+
+### Проверка зависимостей
+
+Директивы <code>goog.provide</code>, <code>goog.require</code>, <code>goog.addDependency</code> обрабатываются особым образом.
+
+Все зависимости проверяются, а сами директивы проверки -- удаляются из сжатого файла.
+
+### Экспорт символов
+
+Вызов <code>goog.exportSymbol</code> задаёт экспорт символа.
+
+Если подробнее, то код <code>goog.exportSymbol('a',myVar)</code> эквивалентен 
+`window['a'] = myVar`.
+
+
+### Автозамена классов CSS
+
+Google Closure Library умеет преобразовывать классы CSS на более короткие по списку, который задаётся при помощи `goog.setCssNameMapping`.
+
+Например, следующая функция задает такой список.
+
+```js
+ 
+goog.setCssNameMapping({
+   "goog-menu": "a",
+   "goog-menu-disabled": "a-b",
+   "CSS_LOGO": "b",
+   "hidden": "c"
+});
+```
+
+Тогда следующий вызов преобразуется в "a a-b":
+
+```js
+goog.getCssName('goog-menu') + ' ' + goog.getCssName('goog-menu', 'disabled')
+```
+
+Google Closure Compiler производит соответствующие преобразования в сжатом файле и удаляет вызов <code>setCssNameMapping</code> из кода.
+
+Чтобы это сжатие работало, в HTML/CSS классы тоже должны сжиматься. По всей видимости, в приложениях Google это и происходит, но соответствующие инструменты закрыты от публики.
+
+### Генерация списка экстернов
+
+При объявлении внутренней опции <code>externExportsPath</code>, содержащей путь к файлу, в этот файл будут записаны все экспорты, описанные через <code>goog.exportSymbol</code>/<code>goog.exportProperty</code>.
+
+В дальнейшем этот файл может быть использован как список экстернов для компиляции.
+
+Эта опция может быть полезна для создания внешних библиотек, распространяемых со списком экстернов.
+
+Для её использования нужна своя обёртка вокруг компилятора на Java. Соответствующий проход компилятора описан в классе <code>ExternExportsPass</code>.
+
+### Проверка типов
+
+В Google Closure Library есть ряд функций для проверки типов. Например: <code>goog.isArray</code>, <code>goog.isString</code>, <code>goog.isNumber</code>, <code>goog.isDef</code> и т.п.
+
+Компилятор использует их для проверки типов, более подробно см. [](/gcc-check-types)
+
+Эта логика описана в классе <code>ClosureReverseAbstractInterpreter</code>. Названия функций, определяющих типы, жестко прописаны в Java-коде, поменять их на свои без модификации исходников нельзя. 
+
+### Автогенерация экспортов из аннотаций
+
+Для этого в Google Closure Compiler есть внутренняя опция <code>generateExports</code>.
+
+Эта недокументированная опция добавляет проход компилятора, описанный классом <code>GenerateExports</code>.
+
+Он читает аннотации <code>@export</code> и создает из них экспортирующие вызовы <code>goog.exportSymbol/exportProperty</code>. Название экспортирующих функций находится в классе соглашений кодирования, каким по умолчанию является <code>GoogleCodingConvention</code>.
+
+Например:
+
+```js
+/** @export */
+function Widget() {
+}
+/** @export */
+Widget.prototype.hide = function() {
+  this.elem.style.display = 'none'
+}
+```
+
+После компиляции в продвинутом режиме:
+
+```js
+function a() {
+}
+goog.d("Widget", a);
+a.prototype.a = function() {
+  this.b.style.display = "none"
+};
+goog.c(a.prototype, "hide", a.prototype.a);
+```
+
+Свойства благополучно экспортированы. Удобно.
+
+### Резюме
+
+Google Closure Compiler содержит дополнительные фичи, облегчающие интеграцию с Google Closure Library. Некоторые из них весьма полезны, но требуют создания своего Java-файла, который ставит внутренние опции.
+
+При обработке символов компилятор не смотрит, подключена ли библиотека, он находит обрабатывает их просто по именам. Поэтому вы можете использовать свою реализацию соответствующих функций.
+
+Google Closure Compiler можно легко расширить, добавив свои опции и проходы оптимизатора, для интеграции с вашими инструментами.
+
diff --git a/3-more/5-compress/index.md b/3-more/5-compress/index.md
new file mode 100644
index 00000000..9bee2987
--- /dev/null
+++ b/3-more/5-compress/index.md
@@ -0,0 +1,2 @@
+# Сжатие JavaScript
+
diff --git a/3-more/6-extra/1-memory-removechild-innerhtml/article.md b/3-more/6-extra/1-memory-removechild-innerhtml/article.md
new file mode 100644
index 00000000..257fe6c1
--- /dev/null
+++ b/3-more/6-extra/1-memory-removechild-innerhtml/article.md
@@ -0,0 +1,139 @@
+# Очистка памяти при removeChild/innerHTML
+
+Управление памятью в случае с DOM работает по сути так же, как и с обычными JavaScript-объектами. Пока объект достижим -- он остаётся в памяти.
+
+Но есть и особенности, поскольку DOM весь переплетён ссылками. 
+[cut]
+## Пример
+Для примера рассмотрим следующий HTML:
+
+<table>
+<tr>
+<th>Код</th>
+<th>Структура в памяти</th>
+<tr>
+<td>
+
+```html
+<html>
+<body>
+  <div>
+    <ul>
+      <li>Список</li>
+    </ul>
+    Сосед
+  </div>
+</body>
+</html>
+```
+
+</td>
+<td>
+<img src="html.png">
+</td>
+</tr>
+</table>
+
+## Удаление removeChild 
+
+Операция `removeChild` разрывает все связи удаляемым узлом и его родителем.
+
+Поэтому, если удалить `DIV` из `BODY`, то всё поддерево под `DIV` станет недостижимым и будет удалено.
+
+А что происходит, если на какой-то элемент внутри удаляемого поддерева есть ссылка?
+
+Например, `UL` сохранён в переменную `list`:
+
+```js
+var list = document.getElementsByTagName('UL')[0];
+document.body.removeChild(document.body.children[0]);
+```
+
+**В этом случае, так как DOM взаимосвязан, то он полностью остаётся в памяти!** Включая детей, родителей, соседей и т.п... Всё из-за внешней ссылки `list`, которая делает их достижимыми.
+
+<img src="html-list.png">
+
+То есть, в этом случае DOM работает по той же логике, что и обычные объекты.
+
+## Удаление через innerHTML
+
+Удаление через очистку `elem.innerHTML="..."` браузеры интерпретируют по-разному.
+
+По идее, при присвоении `innerHTML` из DOM должны удаляться текущие узлы и добавляться новые (из html). Но стандарт ничего не говорит о том, что делать с узлами после удаления. И тут разные браузеры имеют разное мнение.
+
+Посмотрим, что произойдёт с DOM-структурой при очистке `BODY`, если на какой-либо элемент есть ссылка.
+
+```js
+var list = document.getElementsByTagName('UL')[0];
+document.body.innerHTML = "";
+```
+
+Обращаю внимание -- связь разрывается только между `DIV` и `BODY`, т.е. на верхнем уровне, а `list` -- это произвольный элемент.
+
+Чтобы увидеть, что останется в памяти, а что нет -- запустим код:
+
+```html
+<!--+ run -->
+<div>
+  <ul>
+    <li>Список</li>
+  </ul>
+  Сосед
+</div>
+
+<script>
+  var list = document.getElementsByTagName('ul')[0];
+  document.body.innerHTML = ''; // удалили DIV 
+
+  alert(list.parentNode);  // цела ли ссылка UL -> DIV ?
+  alert(list.nextSibling); // живы ли соседи UL ?
+  alert(list.children.length);  // живы ли потомки UL ?
+</script>
+```
+
+Как ни странно, браузеры ведут себя по-разному:
+
+<table>
+<tr><th></th>
+<th>`parentNode`</th>
+<th>`nextSibling`</th>
+<th>`children.length`</th>
+</tr>
+<tr>
+<td>Chrome/Safari/Opera</td>
+<td>`null`</td>
+<td>`null`</td>
+<td>`1`</td>
+</tr>
+<tr>
+<td>Firefox</td>
+<td>Элемент</td>
+<td>Элемент</td>
+<td>`1`</td>
+</tr>
+<tr>
+<td>IE 6-9</td>
+<td>`null`</td>
+<td>`null`</td>
+<td>`0`</td>
+</tr>
+</table>
+
+Иными словами, браузеры ведут себя с различной степенью агрессивности по отношению к элементам.
+
+<dl>
+<dt>Firefox, Opera</dt>
+<dd>Главные пацифисты. Оставляют всё, на что есть ссылки, т.е. элемент, его родителя, соседей и детей.</dd>
+<dt>Chrome/Safari</dt>
+<dd>Считают, что раз мы задали ссылку на `UL`, то нам нужно только это поддерево, а остальные (соседи, родитель) можно удалить.</dd>
+<dt>Internet Explorer</dt>
+<dd>Как ни странно, самый агрессивный. Удаляет вообще всё, кроме узла, на который есть ссылка. Это поведение одинаково для всех версий IE.</dd>
+</dl>
+
+На иллюстрации ниже показано, какую часть DOM оставит каждый из браузеров:
+<img src="html-innerhtml.png">
+
+Таким образом, кросс-браузерно, при поддержке IE, гарантировано одно: **сам узел, на который есть ссылка, останется в памяти.**  
+
+Это поведение специфично для `innerHTML`. При обычном удалении узла из DOM все браузеры ведут себя как `Firefox/Opera`, т.е. остаётся всё.
+
diff --git a/3-more/6-extra/1-memory-removechild-innerhtml/html-innerhtml.png b/3-more/6-extra/1-memory-removechild-innerhtml/html-innerhtml.png
new file mode 100755
index 00000000..b26311fb
Binary files /dev/null and b/3-more/6-extra/1-memory-removechild-innerhtml/html-innerhtml.png differ
diff --git a/3-more/6-extra/1-memory-removechild-innerhtml/html-list.png b/3-more/6-extra/1-memory-removechild-innerhtml/html-list.png
new file mode 100755
index 00000000..ceaf0ffe
Binary files /dev/null and b/3-more/6-extra/1-memory-removechild-innerhtml/html-list.png differ
diff --git a/3-more/6-extra/1-memory-removechild-innerhtml/html.png b/3-more/6-extra/1-memory-removechild-innerhtml/html.png
new file mode 100755
index 00000000..7c3e8898
Binary files /dev/null and b/3-more/6-extra/1-memory-removechild-innerhtml/html.png differ
diff --git a/3-more/6-extra/10-cookie/article.md b/3-more/6-extra/10-cookie/article.md
new file mode 100644
index 00000000..3b232a91
--- /dev/null
+++ b/3-more/6-extra/10-cookie/article.md
@@ -0,0 +1,253 @@
+# Куки, document.cookie 
+
+Для чтения и записи cookie используется свойство `document.cookie`. Однако, оно представляет собой не объект, а строку в специальном формате, для удобной манипуляций с которой нужны дополнительные функции.
+
+[cut]
+
+## Чтение document.cookie
+
+Наверняка у вас есть cookie, которые привязаны к этому сайту. Давайте полюбуемся на них. Вот так:
+
+```js
+//+ run
+alert( document.cookie );
+```
+
+Эта строка состоит из пар `ключ=значение`, которые перечисляются через точку с запятой с пробелом `; `. 
+
+Значит, чтобы прочитать cookie, достаточно разбить строку по `; `, и затем найти нужный ключ. Это можно делать либо через `split` и работу с массивом, либо через регулярное выражение.
+
+### Функция getCookie(name)
+
+Следующая функция `getCookie(name)` возвращает cookie с именем `name`:
+
+```js
+// возвращает cookie с именем name, если есть, если нет, то undefined
+function getCookie(name) {
+  var matches = document.cookie.match(new RegExp(
+    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
+  ));
+  return matches ? decodeURIComponent(matches[1]) : undefined;
+}
+```
+
+Обратим внимание, что значение может быть любым. Если оно содержит символы, нарушающие форматирование, например, пробелы или `;`, то оно кодируется при помощи `encodeURIComponent`. Функция `getCookie` автоматически раскодирует его.
+
+## Запись в document.cookie
+
+В `document.cookie` можно писать. При этом запись не перезаписывает существующие cookie, а дополняет к ним!
+
+Например, такая строка поставит cookie с именем `userName` и значением `Vasya`:
+
+```js
+//+ run
+document.cookie = "userName=Vasya";
+```
+
+...Однако, всё не так просто. У cookie есть ряд важных настроек, которые очень желательно указать, так как значения по умолчанию у них неудобны.
+
+Эти настройки указываются после пары ключ=значение, каждое -- после точки с запятой:
+<dl>
+<dt>`path=/mypath`</dt>
+<dd>Путь, внутри которого будет доступ к cookie. Если не указать, то имеется в виду текущий путь и все пути ниже него. 
+
+Как правило, используется `path=/`, то есть cookie доступно со всех страниц сайта.</dd>
+<dt>`domain=site.com`</dt>
+<dd>Домен, на котором доступно cookie. Если не указать, то текущий домен. Допустимо указывать текущий домен `site.com` и его поддомены, например `forum.site.com`.
+
+Если указать специальную маску `.site.com`, то cookie будет доступно на сайте и всех его поддоменах. Это используется, например, в случаях, когда кука содержит данные авторизации и должна быть доступна как на `site.com`, так и на `forum.site.com`. 
+</dd>
+<dt>`expires=Tue, 19 Jan 2038 03:14:07 GMT`</dt>
+<dd>Дата истечения куки в формате GMT. Получить нужную дату можно, используя объект `Date`. Его можно установить в любое время, а потом вызвать `toUTCString()`, например:
+
+```js
+// +1 день от текущего момента
+var date = new Date;
+date.setDate( date.getDate() + 1 );
+alert( date.toUTCString() );
+```
+
+Если дату не указать, то cookie будет считаться "сессионным". Такое cookie удаляется при закрытии браузера.
+Если дата в прошлом, то кука будет удалена. 
+</dd>
+<dt>`secure`</dt>
+<dd>Cookie можно передавать только по HTTPS.</dd>
+</dl>
+
+Например, чтобы поставить cookie `name=value` по текущему пути с датой истечения через 60 секунд:
+
+```js
+//+ run
+var date = new Date( new Date().getTime() + 60*1000 );
+document.cookie="name=value; path=/; expires="+date.toUTCString();
+```
+
+Чтобы удалить это cookie:
+
+```js
+//+ run
+var date = new Date(0);
+document.cookie="name=; path=/; expires="+date.toUTCString();
+```
+
+При удалении значение не важно. Можно его не указывать, как сделано в коде выше.
+
+### Функция setCookie(name, value, options)
+
+Если собрать все настройки воедино, вот такая функция ставит куки:
+
+```js
+function setCookie(name, value, options) {
+  options = options || {};
+
+  var expires = options.expires;
+
+  if (typeof expires == "number" && expires) {
+    var d = new Date();
+    d.setTime(d.getTime() + expires*1000);
+    expires = options.expires = d;
+  }
+  if (expires && expires.toUTCString) { 
+  	options.expires = expires.toUTCString();
+  }
+
+  value = encodeURIComponent(value);
+
+  var updatedCookie = name + "=" + value;
+
+  for(var propName in options) {
+    updatedCookie += "; " + propName;
+    var propValue = options[propName];    
+    if (propValue !== true) { 
+      updatedCookie += "=" + propValue;
+     }
+  }
+
+  document.cookie = updatedCookie;
+}
+```
+
+Аргументы:
+<dl>
+<dt>name</dt><dd>название cookie</dd>
+<dt>value</dt><dd>значение cookie (строка)</dd>
+<dt>options</dt><dd>
+Объект с дополнительными свойствами для установки cookie:
+<dl>
+<dt>expires</dt><dd>Время истечения cookie. Интерпретируется по-разному, в зависимости от типа:
+<ul>
+<li>Число -- количество секунд до истечения. Например, `expires: 3600` -- кука на час.</li>
+<li>Объект типа [:Date] -- дата истечения.</li>
+<li>Если expires в прошлом, то cookie будет удалено.</li>
+<li>Если expires отсутствует или `0`, то cookie будет установлено как сессионное и исчезнет при закрытии браузера.</li>
+</ul>
+</dd>
+<dt>path</dt><dd>Путь для cookie.</dd>
+<dt>domain</dt><dd>Домен для cookie.</dd>
+<dt>secure</dt><dd>Если `true`, то пересылать cookie только по защищенному соединению.</dd>
+</dl>
+</dd>
+</dl>
+
+### Функция deleteCookie(name)
+
+Здесь всё просто -- удаляем вызовом `setCookie` с датой в прошлом.
+
+```js
+function deleteCookie(name) {
+  setCookie(name, "", { expires: -1 })
+}
+```
+
+## Сторонние cookie
+
+При работе с cookie есть важная тонкость, которая касается внешних ресурсов.
+
+Теоретически, любой ресурс, который загружает браузер, может поставить cookie. 
+
+Например:
+<ul>
+<li>Если на странице есть `<img src="http://mail.ru/counter.gif">`, то вместе с картинкой в ответ сервер может прислать заголовки, устанавливающие cookie.</li>
+<li>Если на странице есть `<iframe src="http://facebook.com/button.php">`, то во-первых сервер может вместе с `button.php` прислать cookie, а во-вторых JS-код внутри ифрейма может записать в `document.cookie`</li>
+</ul>
+
+При этом cookie будут принадлежать тому домену, который их поставил. То есть, на `mail.ru` для первого случая, и на `facebook.com` во втором. 
+
+**Такие cookie, которые не принадлежат основной странице, называются "сторонними" (3rd party) cookies. Не все браузеры их разрешают.**
+
+Как правило, в настройках браузера можно поставить "Блокировать данные и файлы cookie сторонних сайтов" (Chrome). 
+
+**В Safari такая настройка включена по умолчанию и выглядит так:**
+
+<img src="safari-nocookie.png">
+
+### Тс-с-с. Большой брат смотрит за тобой.
+
+Цель этого запрета -- защитить посетителей от слежки со стороны рекламодателей, которые вместе с картинкой-баннером присылают и куки, таким образом помечая посетителей. 
+
+Например, на многих сайтах стоят баннеры и другая реклама Google Ads. При помощи таких cookie компания Google будет знать, какие именно сайты вы посещаете, сколько времени вы на них проводите и многое другое. 
+
+Как? Да очень просто -- на каждом сайте загружается, к примеру, картинка с рекламой. При этом баннер берётся с домена, принадлежащего Google. Вместе с баннером Google ставит cookie со специальным уникальным идентификатором.
+
+Далее, при следующем запросе на баннер, браузер пошлёт стандартные заголовки, которые включают в себя:
+
+<ul>
+<li>Cookie с домена баннера, то есть уникальный идентификатор, который был поставлен ранее.</li>
+<li>Стандартный заголовок Referrer (его не будет при HTTPS!), который говорит, с какого сайта сделан запрос. Да, впрочем, Google и так знает, с какого сайта запрос, ведь идентификатор сайта есть в URL.</li>
+</ul>
+
+Так что Google может хранить в своей базе, какие именно сайты из тех, на которых есть баннер Google, вы посещали, когда вы на них были, и т.п. Этот идентификатор легко привязывается к остальной информации от других сервисов, и таким образом картина слежки получается довольно-таки глобальной.
+
+Здесь я не утверждаю, что в конкретной компании Google всё именно так... Но во-первых, сделать так легко, во-вторых идентификаторы действительно ставятся, а в-третьих, такие знания о человеке позволяют решать, какую именно рекламу и когда ему показать. А это основная доля доходов Google, благодаря которой корпорация существует.
+
+Возможно, компания Apple, которая выпустила Safari, поставила такой флаг по умолчанию именно для уменьшения влияния Google? 
+
+### А если очень надо?
+
+Итак, Safari запрещает сторонние cookie по умолчанию. Другие браузеры предоставляют такую возможность, если посетитель захочет. 
+
+**А что, если ну очень надо поставить стороннюю cookie, и чтобы это было надёжно?**
+
+Такая задача действительно возникает, например, в системе кросс-доменной авторизации, когда есть несколько доменов 2-го уровня, и хочется, чтобы посетитель, который входит в один сайт, автоматически распознавался во всей сетке. При этом cookie для авторизации ставятся на главный домен -- "мастер", а остальные сайты запрашивают их при помощи специального скрипта (и, как правило, копируют к себе для оптимизации, но здесь это не суть).
+
+Ещё пример -- когда есть внешний виджет, например, `iframe` с информационным сервисом, который можно подключать на разные сайты. И этот `iframe` должен знать что-то о посетителе, опять же, авторизация или какие-то настройки, которые хорошо бы хранить в cookie.
+
+Есть несколько способов поставить 3rd-party cookie для Safari.
+
+<dl>
+<dt>Использовать ифрейм.</dt>
+<dd>Ифрейм является полноценным окном браузера. В нём должна быть доступна вся функциональность, в том числе cookie. Как браузер решает, что ифрейм "сторонний" и нужно запретить для него и его скриптов установку cookie? Критерий таков: "в ифрейме нет навигации". Если навигация есть, то ифрейм признаётся полноценным окном.
+
+Например, в сторонний `iframe` можно сделать POST. И тогда, в ответ на POST, сервер может поставить cookie. Или прислать документ, который это делает. Ифрейм, в который прошёл POST, считается родным и надёжным.</dd>
+<dt>Popup-окно</dt>
+<dd>Другой вариант -- использовать popup, то есть при помощи `window.open` открывать именно окно со стороннего домена, и уже там ставить cookie. Это тоже работает.</dd>
+<dt>Редирект</dt>
+<dd>Ещё одно альтернативное решение, которое подходит не везде - это сделать интеграцию со сторонним доменом, такую что на него можно сделать редирект, он ставит cookie и делает редирект обратно.</dd>
+</dl>
+
+## Дополнительно
+
+<ul>
+<li>На Cookie наложены ограничения:
+<ul>
+<li>Имя и значение (после `encodeURIComponent`) вместе не должны превышать 4кб.</li>
+<li>Общее количество cookie на домен ограничено 30-50, в зависимости от браузера.</li>
+<li>Разные домены 2го уровня полностью изолированы. Но в пределах доменов 3го уровня куки можно ставить свободно с указанием `domain`.</li>
+<li>Сервер может поставить cookie с дополнительным флагом `HttpOnly`. Cookie с таким параметром передаётся только в заголовках, оно никак не доступно из JavaScript.</li>
+</ul>
+</li>
+<li>Иногда посетители отключают cookie. Отловить это можно проверкой свойства [navigator.cookieEnabled](https://developer.mozilla.org/en-US/docs/DOM/window.navigator.cookieEnabled)
+
+```js
+//+ run
+if (!navigator.cookieEnabled) {
+  alert('Включите cookie для комфортной работы с этим сайтом');
+}
+```
+
+...Конечно, предполагается, что включён JavaScript. Впрочем, посетитель без JS и cookie с большой вероятностью не человек, а бот.</li> 
+</ul>
+
+## Cookie.js
+
+Файл с функциями для работы с cookie: [cookie.js](/files/tutorial/browser/cookie/cookie.js).
\ No newline at end of file
diff --git a/3-more/6-extra/10-cookie/safari-nocookie.png b/3-more/6-extra/10-cookie/safari-nocookie.png
new file mode 100755
index 00000000..b3d963fe
Binary files /dev/null and b/3-more/6-extra/10-cookie/safari-nocookie.png differ
diff --git a/3-more/6-extra/10-cookie/safari-nocookie@2x.png b/3-more/6-extra/10-cookie/safari-nocookie@2x.png
new file mode 100755
index 00000000..ea811cd2
Binary files /dev/null and b/3-more/6-extra/10-cookie/safari-nocookie@2x.png differ
diff --git a/3-more/6-extra/11-intl/1-collate-array-sort/solution.md b/3-more/6-extra/11-intl/1-collate-array-sort/solution.md
new file mode 100644
index 00000000..6d2a2f49
--- /dev/null
+++ b/3-more/6-extra/11-intl/1-collate-array-sort/solution.md
@@ -0,0 +1,27 @@
+Здесь подойдут стандартные параметры сравнения:
+
+```js
+//+ run
+var animals = ["тигр", "ёж", "енот", "ехидна", "АИСТ", "ЯК"];
+
+*!*
+var collator = new Intl.Collator();
+animals.sort(function(a, b) {
+  return collator.compare(a, b);
+});
+*/!*
+
+alert(animals); // АИСТ,ёж,енот,ехидна,тигр,ЯК
+```
+
+А вот, что было бы при обычном вызове `sort()`:
+
+```js
+//+ run
+var animals = ["тигр", "ёж", "енот", "ехидна", "АИСТ", "ЯК"];
+
+*!*
+alert( animals.sort() ); // АИСТ,ЯК,енот,ехидна,тигр,ёж
+*/!*
+```
+
diff --git a/3-more/6-extra/11-intl/1-collate-array-sort/task.md b/3-more/6-extra/11-intl/1-collate-array-sort/task.md
new file mode 100644
index 00000000..b50404b4
--- /dev/null
+++ b/3-more/6-extra/11-intl/1-collate-array-sort/task.md
@@ -0,0 +1,17 @@
+# Отсортируйте массив с буквой ё
+
+[importance 5]
+
+Используя `Intl.Collate`, отсортируйте массив:
+
+```js
+var animals = ["тигр", "ёж", "енот", "ехидна", "АИСТ", "ЯК"];
+
+// ... ваш код ...
+
+alert(animals); // АИСТ,ёж,енот,ехидна,тигр,ЯК
+```
+
+В этом примере порядок сортировки не должен зависеть от регистра. 
+
+Что касается бувы `"ё"`, то мы следуем [обычным правилам сортировки буквы ё](http://ru.wikipedia.org/wiki/%D0%81#.D0.A1.D0.BE.D1.80.D1.82.D0.B8.D1.80.D0.BE.D0.B2.D0.BA.D0.B0), по которым "е" и "ё" считаются одной и той же буквой, за исключением случая, когда два слова отличаются только в позиции буквы "е" / "ё" -- тогда слово с "е" ставится первым.
\ No newline at end of file
diff --git a/3-more/6-extra/11-intl/article.md b/3-more/6-extra/11-intl/article.md
new file mode 100644
index 00000000..4e739b7f
--- /dev/null
+++ b/3-more/6-extra/11-intl/article.md
@@ -0,0 +1,478 @@
+# Интернационализация, встроенные объекты Intl
+
+Общая проблема строк, дат, чисел в JavaScript -- они совершенно не в курсе языков и стран, где находится посетитель.
+
+В частности:
+<dl>
+<dt>Строки</dt>
+<dd>При сравнении сравниваются коды символов, а это неправильно, к примеру, в русском языке оказывается, что `"ё" > "я"` и "а" > "Я", хотя всем известно, что `я` -- последняя буква алфавита и это она должна быть больше любой другой.</dd>
+<dt>Даты</dt>
+<dd>В разных странах принята разная запись дат. Где-то пишут 31.12.2014 (Россия), а где-то 12/31/2014 (США), где-то иначе.</dd>
+<dt>Числа</dt>
+<dd>В одних странах выводятся цифрами, в других -- иероглифами, длинные числа разделяются где-то пробелом, где-то запятой.</dd>
+</dl>
+
+Все современные браузеры, кроме IE10- (но есть библиотеки и для него) поддерживает стандарт [ECMA 402](http://www.ecma-international.org/ecma-402/1.0/ECMA-402.pdf), предназначенный решить эти проблемы навсегда.
+
+[cut]
+
+## Основные объекты
+
+<dl>
+<dt>`Intl.Collator`</dt>
+<dd>Умеет правильно сравнивать и сортировать строки.</dd>
+<dt>`Intl.DateTimeFormat`</dt>
+<dd>Умеет форматировать дату и время в соответствии с нужным языком.</dd>
+<dt>`Intl.NumberFormat`</dt>
+<dd>Умеет форматировать числа в соответствии с нужным языком.</dd>
+</dl>
+
+## Локаль 
+
+*Локаль* -- первый и самый важный аргумент всех методов, связанных с интернационализацией.
+
+**Локаль описывается строкой из трёх компонентов, которые разделяются дефисом:**
+<ol>
+<li>Код языка.</li>
+<li>Код способа записи.</li>
+<li>Код страны.</li>
+</ol>
+
+На практике не всегда указаны три, обычно меньше:
+<ol>
+<li>`ru` -- русский язык, без уточнений.</li>
+<li>`en-GB` -- английский язык, используемый в Англии (`GB`).</li>
+<li>`en-US` -- английский язык, используемый в США (`US`).</li>
+<li>`zh-Hans-CN` -- китайский язык (`zh`), записываемый упрощённой иероглифической письменностью (`Hans`), используемый в китае.</li>
+</ol>
+
+Также через суффикс `-u-*` можно указать расширения локалей, например `"th-TH-u-nu-thai"` -- тайский язык (`th`), используемый в Тайланде (`TH`), с записью чисел тайскими буквами (๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) .
+
+Стандарт, который описывает локали -- [RFC 5464](http://tools.ietf.org/html/rfc5646), языки описаны в [IANA language registry](http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).
+
+**Все методы принимают локаль в виде строки или массива, содержащего несколько локалей в порядке предпочтения.**
+
+**Если локаль не указана или `undefined` -- берётся локаль по умолчанию, установленная в окружении (браузере).**
+
+### Подбор локали localeMatcher
+
+`localeMatcher` -- вспомогательная настройка, которую тоже можно везде указать, она определяет способ подбора локали, если желаемая недоступна.
+
+У него два значения:
+<ul>
+<li>`"lookup"` -- означает простейший порядок поиска путём обрезания суффикса, например `zh-Hans-CN` -> `zh-Hans` -> `zh` -> локаль по умолчанию.</li>
+<li>`"best fit"` -- использует встроенные алгоритмы и предпочтения браузера (или другого окружения) для выбора подходящей локали.</li>
+</ul>
+
+**По умолчанию стоит `"best fit"`.**
+
+Если локалей несколько, например `["zh-Hans-CN", "ru-RU"]` то `localeMatcher` пытается подобрать наиболее подходящую локаль для первой из списка (китайская), если не получается -- переходит ко второй (русской) и так далее. Если ни одной не нашёл, например на компьютере не совсем поддерживается ни китайский ни русский, то используется локаль по умолчанию.
+
+**Как правило, `"best fit"` является здесь наилучшим выбором.**
+
+
+## Строки, Intl.Collator [#intl-collator]
+
+Синтаксис:
+
+```js
+// создание 
+var collator = new Intl.Collator([locales, [options] ])
+```
+
+Параметры:
+<dl>
+<dt>`locales`</dt>
+<dd>Локаль, одна или массив в порядке предпочтения.</dd>
+<dt>`options`</dt>
+<dd>Объект с дополнительными настройками:
+<ul>
+<li>`localeMatcher` -- алгоритм выбора подходящей локали.</li>
+<li>`usage` -- цель сравнения: сортировка `"sort"` или поиск `"search"`, по умолчанию `"sort"`.</li>
+<li>`sensitivity` -- чувствительность: какие различия в символах учитывать, а какие -- нет, варианты:
+<ul>
+<li>`base` -- учитывать только разные символы, без диакритических знаков и регистра, например: `а ≠ б`, `е = ё`, `а = А`.</li>
+<li>`accent` -- учитывать символы и диакритические знаки, например: `а ≠ б`, `е ≠ ё`, `а = А`.</li>
+<li>`case` --  учитывать символы и регистр, например: `а ≠ б`, `е = ё`, `а ≠ А`.</li>
+<li>`variant` -- учитывать всё: символ, диакритические знаки, регистр, например: `а ≠ б`, `е ≠ ё`, `а ≠ А`, используется по умолчанию.</li>
+</ul>
+</li>
+<li>`ignorePunctuation` -- игнорировать знаки пунктуации: `true/false`, по умолчанию `false`.</li>
+<li>`numeric` -- использовать ли численное сравнение: `true/false`, если `true`, то будет `12 > 2`, иначе `2 < 12`.</li>
+<li>`caseFirst` -- в сортировке должны идти первыми прописные или строчные буквы,  варианты: `"upper"` (прописные), `lower` (строчные) или `false` (стандартное для локали, также является значением по умолчанию). Не поддерживается IE11-.</li>
+</ul>
+</dd>
+</dl>
+
+**В подавляющем большинстве случаев подходят стандартные параметры, то есть `options` указывать не нужно.**
+
+Использование:
+
+```js
+var result = collator.compare(str1, str2);
+```
+
+Результат `compare` имеет значение `1` (больше), `0` (равно) или `-1` (меньше).
+
+Например:
+
+```js
+//+ run
+var collator = new Intl.Collator();
+
+alert( "ёжик" > "яблоко" ); // true (ёжик больше, что неверно)
+alert( collator.compare("ёжик", "яблоко") ); // -1 (ёжик меньше, верно)
+```
+
+Выше были использованы полностью стандартные настройки. Они различают регистр символа, но это различие можно убрать, если настроить чувствительность `sensitivity`:
+
+```js
+//+ run
+var collator = new Intl.Collator();
+alert( collator.compare("ЁжиК", "ёжик") ); // 1, разные
+
+var collator = new Intl.Collator(undefined, { sensitivity: "accent" } );
+alert( collator.compare("ЁжиК", "ёжик") ); // 0, одинаковые
+```
+
+## Даты, Intl.DateFormatter [#intl-dateformatter]
+
+Синтаксис:
+
+```js
+// создание 
+var formatter = new Intl.DateFormatter([locales, [options] ])
+```
+
+Первый аргумент -- такой же, как и в `Collator`, а в объекте `options` мы можем определить, какие именно части даты показывать (часы, месяц, год...) и в каком формате.
+
+Полный список свойств `options`:
+<table class="bordered">
+<tr>
+    <th>Свойство</th>
+    <th>Описание</th>
+    <th>Возможные значения</th>
+    <th>По умолчанию</th>
+  </tr>
+  <tr>
+    <td>`localeMatcher` </td>
+    <td> Алгоритм подбора локали</td>
+    <td>
+      `lookup`,`best fit`
+    </td>
+    <td>
+      `best fit`
+    </td>
+  </tr>
+  <tr>
+    <td>`formatMatcher` </td>
+    <td>
+      Алгоритм подбора формата
+    </td>
+    <td> `basic`, `best fit` </td>
+    <td> `best fit` </td>
+  </tr>
+  <tr>
+    <td>`hour12`</td>
+    <td>Включать ли время в 12-часовом формате</td>
+    <td>`true` -- 12-часовой формат, `false` -- 24-часовой</td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>`timeZone`</td>
+    <td>Временная зона</td>
+    <td>Временная зона, например `Europe/Moscow`</td>
+    <td>`UTC`</td>
+  </tr>
+  <tr>
+    <td>`weekday`</td>
+    <td>День недели</td>
+    <td>`narrow`, `short`, `long`</td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>`era`</td>
+    <td>Эра</td>
+    <td>`narrow`, `short`, `long`</td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>`year`</td>
+    <td>Год</td>
+    <td>`2-digit`, `numeric`</td>
+    <td>`undefined` или `numeric`</td>
+  </tr>
+  <tr>
+    <td>`month`</td>
+    <td>Месяц</td>
+    <td>`2-digit`, `numeric`, `narrow`, `short`, `long` </td>
+    <td>`undefined` или `numeric`</td>
+  </tr>
+  <tr>
+    <td>`day`</td>
+    <td>День</td>
+    <td>`2-digit`, `numeric`</td>
+    <td>`undefined` или `numeric`</td>
+  </tr>
+  <tr>
+    <td>`hour`</td>
+    <td>Час</td>
+    <td> `2-digit`, `numeric` </td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>`minute`</td>
+    <td>Минуты </td>
+    <td> `2-digit`, `numeric` </td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>`second`
+    </td>
+    <td>Секунды</td>
+    <td>`2-digit`, `numeric`</td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>`timeZoneName`</td>
+    <td>Название таймзоны (нет в IE11)</td>
+    <td>`short`, `long`</td>
+    <td></td>
+  </tr>
+</table>
+
+**Все локали обязаны поддерживать следующие наборы настроек:**
+
+<ul>
+<li>weekday, year, month, day, hour, minute, second</li>
+<li>weekday, year, month, day</li>
+<li>year, month, day</li>
+<li>year, month</li>
+<li>month, day</li>
+<li>hour, minute, second</li>
+</ul>
+
+Если указанный формат не поддерживается, то настройка `formatMatcher` задаёт алгоритм подбора наиболее близкого формата: `basic` -- по [стандартным правилам](http://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher) и `best fit` -- по умолчанию, на усмотрение окружения (браузера).
+
+
+Использование:
+
+```js
+var dateString = formatter.format(date);
+```
+
+Например:
+
+```js
+//+ run
+var date = new Date(2014, 11, 31, 12, 30, 0);
+
+var formatter = new Intl.DateTimeFormat("ru");
+alert( formatter.format(date) ); // 31.12.2014
+
+var formatter = new Intl.DateTimeFormat("en-US");
+alert( formatter.format(date) ); // 12/31/2014
+```
+
+Длинная дата, с настройками:
+
+```js
+//+ run
+var date = new Date(2014, 11, 31, 12, 30, 0);
+
+var formatter = new Intl.DateTimeFormat("ru", {
+  weekday: "long", 
+  year: "numeric", 
+  month: "long",
+  day: "numeric" 
+});
+
+alert( formatter.format(date) );  // среда, 31 декабря 2014 г.
+```
+
+Только время:
+
+```js
+//+ run
+var date = new Date(2014, 11, 31, 12, 30, 0);
+
+var formatter = new Intl.DateTimeFormat("ru", {
+  hour: "numeric" , 
+  minute: "numeric" , 
+  second: "numeric" 
+});
+
+alert( formatter.format(date) );  // 12:30:00
+```
+
+## Числа: Intl.NumberFormat
+
+Форматтер `Intl.NumberFormat` умеет красиво форматировать не только числа, но и валюту, а также проценты.
+
+Синтаксис:
+
+```js
+var formatter = new Intl.NumberFormat([locales [, options] ]);
+
+formatter.format(number); // форматирование
+```
+
+Параметры, как и раньше -- локаль и опции.
+
+Список опций:
+
+<table class="bordered">
+<tr>
+    <th>Свойство </th>
+    <th>Описание </th>
+    <th>Возможные значения </th>
+    <th>По умолчанию </th>
+  </tr>
+  <tr>
+    <td> `localeMatcher` </td>
+    <td>Алгоритм подбора локали </td>
+    <td> `lookup`, `best fit` </td>
+    <td> `best fit` </td>
+  </tr>
+  <tr>
+    <td> `style` </td>
+    <td>Стиль форматирования </td>
+    <td> `decimal`, `percent`, `currency` </td>
+    <td> `decimal` </td>
+  </tr>
+  <tr>
+    <td> `currency` </td>
+    <td> Алфавитный код валюты</td>
+    <td> См. [Список кодов валюты](http://www.currency-iso.org/en/home/tables/table-a1.html), например `USD` </td>
+    <td> </td>
+  </tr>
+  <tr>
+    <td> `currencyDisplay` </td>
+    <td>Показывать валюту в виде кода, локализованного символа или локализованного названия
+    </td>
+    <td> `code`, `symbol`, `name` </td>
+    <td> `symbol` </td>
+  </tr>
+  <tr>
+    <td> `useGrouping` </td>
+    <td>Разделять ли цифры на группы</td>
+    <td> `true`, `false` </td>
+    <td> `true` </td>
+  </tr>
+  <tr>
+    <td>`minimumIntegerDigits`</td>
+    <td>Минимальное количество цифр целой части</td>
+    <td>от `1` до `21`
+    </td>
+    <td>`21`</td>
+  </tr>
+  <tr>
+    <td>`minimumFractionDigits` </td>
+    <td>Минимальное количество десятичных цифр
+    </td>
+    <td>от `0` до `20` </td>
+    <td>для чисел и процентов `0`, для валюты зависит от кода.</td>
+  </tr>
+  <tr>
+    <td>`maximumFractionDigits`</td>
+    <td>Максимальное количество десятичных цифр </td>
+    <td>от `minimumFractionDigits` до `20`. </td>
+    <td>для чисел `max(minimumFractionDigits, 3)`, для процентов `0`, для валюты зависит от кода.</td>
+  </tr>
+  <tr>
+    <td>`minimumSignificantDigits`</td>
+    <td>Минимальное количество значимых цифр</td>
+    <td>от `1` до `21`</td>
+    <td>`1`</td>
+  </tr>
+  <tr>
+    <td>`maximumSignificantDigits`</td>
+    <td>Максимальное количество значимых цифр</td>
+    <td>от `minimumSignificantDigits` до `21`</td>
+    <td>`minimumSignificantDigits`</td>
+  </tr>
+</table>
+
+Пример без опций:
+
+```js
+//+ run
+var formatter = new Intl.NumberFormat("ru");
+alert(formatter.format(1234567890.123)); // 1 234 567 890,123
+```
+
+С ограничением значимых цифр (важны только первые 3):
+
+```js
+//+ run
+var formatter = new Intl.NumberFormat("ru", {
+  maximumSignificantDigits: 3
+});
+alert(formatter.format(1234567890.123)); // 1 230 000 000
+```
+
+C опциями для валюты:
+
+```js
+var formatter = new Intl.NumberFormat("ru", {
+  style: "currency",
+  currency: "GBP"
+});
+
+alert( formatter.format(1234.5)); // 1 234,5 £
+```
+
+С двумя цифрами после запятой:
+
+```js
+var formatter = new Intl.NumberFormat("ru", {
+  style: "currency",
+  currency: "GBP",
+  minimumFractionDigits: 2
+});
+
+alert( formatter.format(1234.5)); // 1 234,50 £
+```
+
+## Методы в Date, String, Number
+
+Методы форматирования также поддерживаются в обычных строках, датах, числах:
+
+<dl>
+<dt>`String.prototype.localeCompare`(that [, locales [, options]])`</dt>
+<dd>Сравнивает строку с другой, с учётом локали, например:
+
+```js
+//+ run
+var str = "ёжик";
+
+alert( str.localeCompare("яблоко", "ru") ); // -1
+```
+
+</dd>
+<dt>`Date.prototype.toLocaleString([locales [, options]])`</dt>
+<dd>Форматирует дату в соответствии с локалью, например:
+
+```js
+//+ run
+var date = new Date(2014, 11, 31, 12, 00);
+
+alert( date.toLocaleString("ru", { year: 'numeric', month: 'long' }) ); // Декабрь 2014
+```
+
+</dd>
+<dt>`Date.prototype.toLocaleDateString([locales [, options]])`</dt>
+<dd>То же, что и выше, но опции по умолчанию включают в себя год, месяц, день</dd>
+<dt>`Date.prototype.toLocaleTimeString`([locales [, options]])`</dt>
+<dd>То же, что и выше, но опции по умолчанию включают в себя часы, минуты, секунды</dd>
+<dt>`Number.prototype.toLocaleString([locales [, options]])`</dt>
+<dd>Форматирует число, используя опции `Intl.NumberFormat`.</dd>
+</dl>
+
+Все эти методы при запуске создают соответствующий объект `Intl.*` и передают ему опции, можно рассматривать их как укороченные варианты вызова.
+
+## Старые IE
+
+В IE10- рекомендуется использовать полифилл, например библиотеку [](https://github.com/andyearnshaw/Intl.js).
+
+
diff --git a/3-more/6-extra/12-regexp-specials/article.md b/3-more/6-extra/12-regexp-specials/article.md
new file mode 100644
index 00000000..9a0ddd00
--- /dev/null
+++ b/3-more/6-extra/12-regexp-specials/article.md
@@ -0,0 +1,193 @@
+# Особенности регулярных выражений в Javascript
+
+Регулярные выражения в javascript немного странные. Вроде - перловые, обычные, но с подводными камнями, на которые натыкаются даже опытные javascript-разработчики.
+
+Эта статья ставит целью перечислить неожиданные фишки и особенности [:RegExp] в краткой и понятной форме.
+
+
+[cut]
+## Точка и перенос строки
+
+Для поиска в многострочном режиме почти все модификации перловых регэкспов используют специальный multiline-флаг.
+
+И javascript здесь не исключение.
+
+Попробуем же сделать поиск и замену многострочного вхождения. Скажем, будем заменять <code>[u] ... [/u]</code> на тэг подчеркивания: <code>&lt;u&gt;</code>:
+
+```js
+//+ run
+function bbtagit(text) {
+  text = text.replace(/\[u\](.*?)\[\/u\]/gim, '<u>$1</u>')
+ 
+  return text
+}
+
+var line = "[u]мой\n текст[/u]"
+alert( bbtagit(line) )
+```
+
+Попробуйте запустить. Заменяет? Как бы не так!
+
+Дело в том, что в javascript мультилайн режим (флаг <code>m</code>) влияет только на символы ^ и $, которые начинают матчиться с началом и концом строки, а не всего текста.
+
+Точка по-прежнему - любой символ, кроме новой строки. В javascript нет флага, который устанавливает мультилайн-режим для точки. Для того, чтобы заматчить совсем что угодно - используйте <code>[\s\S]</code>.
+
+Работающий вариант:
+
+```js
+//+ run
+function bbtagit(text) {
+  text = text.replace(/\[u\]([\s\S]*)\[\/u\]/gim, '<u>$1</u>')
+ 
+  return text
+}
+
+var line = "[u]мой\n текст[/u]"
+alert( bbtagit(line) )
+```
+
+## Жадность
+
+Это не совсем особенность, скорее фича, но все же достойная отдельного абзаца.
+
+Все регулярные выражения в javascript - жадные. То есть, выражение старается отхватить как можно больший кусок строки.
+
+Например, мы хотим заменить все открывающие тэги <code>&lt;a&gt;</code>. На что и почему - не так важно.
+
+```js
+//+ run
+text = '1 <A href="#">...</A> 2'
+text = text.replace(/<A(.*)>/, 'TEST')
+alert(text)
+```
+
+При запуске вы увидите, что заменяется не открывающий тэг, а вся ссылка, выражение матчит ее от начала и до конца.
+
+Это происходит из-за того, что точка-звездочка в "жадном" режиме пытается захватить как можно больше, в нашем случае - это как раз до последнего <code>&gt;</code>.
+
+Последний символ <code>&gt;</code> точка-звездочка не захватывает, т.к. иначе не будет совпадения.
+
+Как вариант решения используют квадратные скобки: <code>[^&gt;]</code>:
+
+```js
+//+ run
+text = '1 <A href="#">...</A> 2'
+text = text.replace(/<A([^>]*)>/, 'TEST')
+alert(text)
+```
+
+Это работает. Но самым удобным вариантом является переключение точки-звездочки в нежадный режим. Это осуществляется простым добавлением знака "<code>?</code>" после звездочки.
+
+В нежадном режиме точка-звездочка пустит поиск дальше сразу, как только нашла совпадение:
+
+```js
+//+ run
+text = '1 <A href="#">...</A> 2'
+text = text.replace(/<A(.*?)>/, 'TEST')
+alert(text)
+```
+
+В некоторых языках программирования можно переключить жадность на уровне всего регулярного выражения, флагом.
+
+В javascript это сделать нельзя.. Вот такая особенность. А вопросительный знак после звездочки рулит - честное слово.
+
+## Backreferences в паттерне и при замене
+
+Иногда нужно в самом паттерне поиска обратиться к предыдущей его части.
+
+Например, при поиске BB-тагов, то есть строк вида <code>[u]...[/u]</code>, <code>[b]...[/b]</code> и <code>[s]...[/s]</code>. Или при поиске атрибутов, которые могут быть в одинарных кавычках или двойных.
+
+Обращение к предыдущей части паттерна в javascript осуществляется как \1, \2 и т.п., бэкслеш + номер скобочной группы:
+
+```js
+//+ run
+text = ' [b]a [u]b[/u] c [/b] '
+
+var reg = /\[([bus])\](.*?)\[\//*u*/\1/*/u*/\]/
+text = text.replace(reg, '<$1>$2</$1>')
+alert(text)
+```
+
+Обращение к скобочной группе в строке замены идет уже через доллар: <code>$1</code>. Не знаю, почему, наверное так удобнее..
+
+P.S. Понятно, что при таком способе поиска bb-тагов придется пропустить текст через замену несколько раз - пока результат не перестанет отличаться от оригинала.
+
+## Найти все / Заменить все
+
+Эти две задачи решаются в javascript принципиально по-разному.
+
+Начнем с "простого".
+
+### Заменить все
+
+Для замены всех вхождений используется метод [:String#replace|]. 
+Он интересен тем, что допускает первый аргумент - регэксп или строку. 
+
+Если первый аргумент - строка, то будет осуществлен поиск подстроки, без преобразования в регулярное выражение.
+
+Попробуйте:
+
+```js
+//+ run
+alert("2 ++ 1".replace("+", "*"))
+```
+
+Как видите, заменился только один плюс, а не оба.
+
+**Чтобы заменить все вхождения, [:String#replace|] обязательно нужно использовать с регулярным выражением.**
+
+В режиме регулярного выражения плюс придётся экранировать, но зато <code>replace</code> заменит все вхождения (при указании флага <code>g</code>):
+
+```js
+//+ run
+alert("2 ++ 1".replace(/\+/g, "*"))
+```
+
+Вот такая особенность работы со строкой.
+
+### Заменить функцией
+
+Очень полезной особенностью <code>replace</code> является возможность работать с функцией вместо строки замены. Такая функция получает первым аргументом - все совпадение, а последующими аргументами - скобочные группы.
+
+Следующий пример произведет операции вычитания:
+
+```js
+//+ run
+var str = "count 36 - 26, 18 - 9"
+str = str.replace(/(\d+) - (\d+)/g, function(a,b,c) { return b-c })
+alert(str)
+```
+
+### Найти всё
+
+В javascript нет одного универсального метода для поиска всех совпадений. 
+Для поиска без запоминания скобочных групп - можно использовать [:String#match|]:
+
+```js
+//+ run
+var str = "count 36-26, 18-9"
+var re =  /(\d+)-(\d+)/g
+result = str.match(re)
+for(var i=0; i<result.length; i++) alert(result[i])
+```
+
+Как видите, оно исправно ищет все совпадения (флаг <code>'g'</code> у регулярного выражения обязателен), но при этом не запоминает скобочные группы. Эдакий "облегченный вариант". 
+
+### Найти всё с учётом скобочных групп
+
+В сколько-нибудь сложных задачах важны не только совпадения, но и скобочные группы. Чтобы их найти, предлагается использовать многократный вызов [:RegExp#exec|].
+
+Для этого регулярное выражение должно использовать флаг <code>'g'</code>. Тогда результат поиска, запомненный в свойстве <code>lastIndex</code> объекта <code>RegExp</code> используется как точка отсчета для следующего поиска:
+
+```js
+//+ run
+var str = "count 36-26, 18-9"
+var re =  /(\d+)-(\d+)/g
+var res
+while ( (res = re.exec(str)) != null) {
+  alert("Найдено " + res[0] + ":  ("+ res[1]+") и ("+res[2]+")")
+  alert("Дальше ищу с позиции "+re.lastIndex)
+}
+```
+
+Проверка <code>while( (res = re.exec(str)) != null)</code> нужна т.к. значение <code>res = 0</code> является хорошим и означает, что вхождение найдено в самом начале строки (поиск успешен). Поэтому необходимо сравнивать именно с <code>null</code>.
diff --git a/3-more/6-extra/2-javascript-quiz/1-memory-management-question/solution.md b/3-more/6-extra/2-javascript-quiz/1-memory-management-question/solution.md
new file mode 100644
index 00000000..6663eb78
--- /dev/null
+++ b/3-more/6-extra/2-javascript-quiz/1-memory-management-question/solution.md
@@ -0,0 +1,5 @@
+Ответ: **3**.
+
+В браузерах, использующих V8, например Chrome, Opera, `name` удалится, так как она более не может быть использована и внутренний оптимизатор это поймёт.
+
+В большинстве других движков такой оптимизации нет и объект переменных будет сохранён в целости, пока есть хоть одна внутренняя функция, в данном случае -- `donkey.yell`.
\ No newline at end of file
diff --git a/3-more/6-extra/2-javascript-quiz/1-memory-management-question/task.md b/3-more/6-extra/2-javascript-quiz/1-memory-management-question/task.md
new file mode 100644
index 00000000..bea9afc5
--- /dev/null
+++ b/3-more/6-extra/2-javascript-quiz/1-memory-management-question/task.md
@@ -0,0 +1,32 @@
+# Вопрос по управлению памятью
+
+[importance 5]
+
+Посмотрите внимательно на код ниже.
+
+```js
+//+ run
+function Donkey() {
+   var name = "Ослик Иа";
+
+   this.sayHi = function() {
+     alert(name);
+   };
+
+   this.yell = function() {
+     alert('И-а, и-а!');
+   };
+}
+
+var donkey = new Donkey();
+donkey.sayHi();
+```
+
+Удалится ли переменная `name` из памяти, если выполнить `delete donkey.sayHi`? 
+
+<ol>
+<li>Да.</li>
+<li>Нет.</li>
+<li>Зависит от браузера.</li>
+<li>Зависит от положения звёзд.</li>
+</ol>
diff --git a/3-more/6-extra/2-javascript-quiz/article.md b/3-more/6-extra/2-javascript-quiz/article.md
new file mode 100644
index 00000000..28bac2bc
--- /dev/null
+++ b/3-more/6-extra/2-javascript-quiz/article.md
@@ -0,0 +1,16 @@
+# Тест: повторение тонких мест
+
+Вопросы из этого теста проверяют знание множества важных нюансов JavaScript. 
+
+Ряд вопросов взят из тестов [](http://dmitry.baranovskiy.com/post/91403200), [](http://perfectionkills.com/javascript-quiz/) и [](http://dmitrysoshnikov.com/ecmascript/the-quiz/). Спасибо их составителям, рекомендую пройти и их тоже.
+[cut]
+<ul>
+<li>Все задачи выполняются в достаточно современных браузерах, IE8+.</li>
+<li>Код задачи является единственным кодом, который запускается в окне. В частности, никаких дополнительных переменных, кроме указанных, нет.</li>
+</ul>
+
+Итак, поехали...
+
+
+
+**Тест сложный! Если у вас не получилось ответить на многие вопросы -- не расстраивайтесь. Его цель -- не только проверить знания, но и помочь заполнить пробелы в них.**
\ No newline at end of file
diff --git a/3-more/6-extra/3-templates/article.md b/3-more/6-extra/3-templates/article.md
new file mode 100644
index 00000000..1165be14
--- /dev/null
+++ b/3-more/6-extra/3-templates/article.md
@@ -0,0 +1,304 @@
+# Эволюция шаблонных систем для JavaScript
+
+Различных шаблонных систем -- много.
+
+Они постепенно эволюционировали и развивались. 
+
+В этой главе мы разберём, как шёл этот процесс, какие шаблонки "родились", какие бонусы нам даёт использование той или иной шаблонной системы.
+[cut]
+
+## Микрошаблоны
+
+*Микрошаблоны* (англ. microtemplate) мы уже видели на примере `_.template`.
+
+Это HTML со вставками переменных и произвольным JS.
+
+Пример:
+
+```html
+<div class="menu">
+  <span class="title"><%-title%></span>
+  <ul>
+    <% items.forEach(function(item) { %>
+    <li><%-item%></li>
+    <% }); %>
+  </ul>
+</div>
+```
+
+Шаблонная система компилирует этот код в JavaScript-функцию с минимальными модификациями, и она уже, запустившись с данными, генерирует результат.
+
+Достоинства и недостатки такого подхода:
+
+[compare]
+-Жёстко привязан к языку JavaScript.
+-При ошибке в шаблоне приходится лезть внутрь "страшной" функции
++Простая и быстрая шаблонная система
++Внутри JS-функции доступен полноценный браузерный отладчик, функция хоть и страшна, но понятна.
+[/compare]
+
+### Код в шаблоне
+
+Включение произвольного JS-кода в шаблон, в теории, позволяет делать в нём всё, что угодно. Но обратная сторона медали -- шаблон вместо внятного HTML может стать адским нагромождением разделителей вперемешку с вычислениями. Что рекомендуется делать в шаблонах, а что нет?
+
+Можно разделить код на два типа с точки зрения шаблонизации:
+<ul>
+<li>**Бизнес-логика** -- код, *формирующий данные*, основной код приложения.</li>
+<li>**Презентационная логика** -- код, описывающий, как *показываются данные*.</li>
+</ul>
+
+Например, код, получающий данные с сервера для вывода в таблице -- бизнес-логика, а код, форматирующий даты для вывода -- презентационная логика. 
+
+В шаблонах допустима лишь презентационная логика.
+
+### Кросс-платформенность
+
+Зачастую, нужно использовать один и тот же шаблон и в браузере и на сервере.
+
+Например, серверный код генерирует HTML со списком сообщений, а JavaScript на клиенте добавляет к нему новые по мере появления.
+
+...Но как использовать на сервере шаблон с JavaScript, если его основной язык -- PHP, Ruby, Java?
+
+Эту проблему решили обошли быстро. 
+
+На сервер, использующем PHP, Ruby, Java или какой-то другой язык, дополнительно ставится виртуальная машина [V8](http://code.google.com/p/v8/) и настраивается интеграция с ней. Почти все платформы это умеют.
+
+После этого становится возможным запускать JavaScript-шаблоны и передавать им данные в виде объектов, массивов и так далее.
+
+Этот подход может показаться искусственным, но на самом деле он вполне жизнеспособен и используется в ряде крупных проектов.
+
+### Прекомпиляция 
+
+Эта шаблонка и большинство других систем, которые мы рассмотрим далее, допускают *прекомпиляцию*.
+
+То есть, можно заранее, до выкладывания сайта на "боевой сервер", обработать шаблоны, создать из них JS-функции, объединить их в единый файл и далее, в "боевом окружении" использовать уже их.
+
+Современные системы сборки ([brunch](http://brunch.io/), [grunt](http://gruntjs.com/) с плагинами и другие) позволяют делать это удобно, а также хранить шаблоны в разных файлах, каждый -- в нужной директории с JS-кодом для виджета.
+
+## Хелперы и фильтры
+
+JavaScript-вставки не всегда просты и элегантны. Иногда, чтобы что-то сделать, нужно написать порядочно кода.
+
+**Для того, чтобы сделать шаблоны компактнее и проще, в них стали добавлять фильтры и хелперы.**
+
+<ul>
+<li>**Хелпер** (англ. helper) -- вспомогательная функция, которая доступна в шаблонах и используется для решения часто возникающих задач. 
+
+В `_.template`, чтобы объявить хелпер, можно просто сделать глобальную функцию. Но это слишком грубо, так не делают. Гораздо лучше -- использовать объект `_.templateSettings.imports`, в котором можно указать, какие функции добавлять в шаблоны, или опцию `imports` для `_.template`.
+
+Пример хелпера -- функция `t(phrase)`, которая переводит `phrase` на текущий язык:
+
+```js
+//+ run
+_.templateSettings.imports.t = function(phrase) {
+  // обычно функция перевода немного сложнее, но здесь это не важно
+  if (phrase == "Hello") return "Привет";
+}
+
+*!*
+// в шаблоне используется хелпер t для перевода 
+var compiled = _.template("<div><%=t('Hello')%></div>");
+*/!*
+alert( compiled() ); // <div>Привет</div>
+```
+
+Такой хелпер очень полезен для мультиязычных сайтов, когда один шаблон нужно выводить на десяти языках. Нечто подобное используется почти во всех языках и платформах, не только в JavaScript.
+</li>
+<li>**Фильтр** -- это функция, которая трансформирует данные, например, форматирует дату, сортирует элементы массива и так далее.
+
+Обычно для фильтров обычно предусмотрен специальный "особо простой и короткий" синтаксис.
+
+Например, в системе шаблонизации [EJS](https://github.com/visionmedia/ejs), которая по сути такая же, но мощнее, чем `_.template`, фильтры задаются через символ `|`, внутри разделителя `<%=: ... %>`.
+
+Чтобы вывести `item` с большой буквы, можно вместо `<%=item%>` написать `<%=: item | capitalize %>`. Чтобы выводить отсортированный массив, можно использовать `<%=: items | sort %>` и так далее.
+</li>
+</ul>
+
+## Свой язык
+
+Для того, чтобы сделать шаблон ещё короче, а также с целью "отвязать" их от JavaScript, ряд шаблонных систем предлагают свой язык.
+
+Например:
+<ul>
+<li>[Mustache](http://mustache.github.com/)</li>
+<li>[Handlebars](http://handlebarsjs.com/)</li>
+<li>[Closure Templates](https://developers.google.com/closure/templates/docs/javascript_usage)</li>
+<li>...тысячи их...</li>
+</ul>
+
+Шаблон для меню в Handlerbars, к примеру, будет выглядеть так:
+
+```html
+<div class="menu">
+  <span class="title">{{title}}</span>
+  <ul>
+    {{#each items}}
+    <li>{{item}}</li>
+    {{/each}}
+  </ul>
+<div>
+```
+
+Как видно, *вместо* JavaScript-конструкций здесь используются хелперы. В примере выше `{{#each}} ... {{/each}` -- "блочный" хелпер: он показывает своё содержимое для каждого элемента `items` и является альтернативой `forEach`.
+
+Есть и другие встроенные в шаблонизатор хелперы, можно легко делать свои.
+
+Использование такого шаблона:
+
+```js
+// текст шаблона должен быть в переменной tmpl
+var compiled = Handlebars.compile(tmpl);
+
+var result = compiled({
+  title: "Сладости",
+  items: [ "Торт", "Пирожное", "Пончик" ]
+});
+```
+
+Библиотека шаблонизации [Handlebars](http://handlebarsjs.com/) "понимает" этот язык. Вызов `Handlebars.compile` принимает строку шаблона, разбивает по разделителям и, аналогично предыдущему виду шаблонов, делает JavaScript-функцию, которая затем по данным выдаёт строку-результат.
+
+### Запрет на встроенный JS
+
+Если "свой язык шаблонизатора" очень прост, то библиотеку для его поддержки можно легко написать под PHP, Ruby, Java и других языках, которые тем самым научатся понимать такие шаблоны.
+
+**Если шаблонка действительна нацелена на кросс-платформенность, то явные JS-вызовы в ней запрещены. Всё делается через хелперы.**
+
+Если же нужна какая-то логика, то она либо выносится во внешний код, либо делается через новый хелпер --  он отдельно пишется на JavaScript (для клиента) и для сервера (на его языке). Получается полная совместимость.
+
+Это создаёт определённые сложности. Например, в Handlebars есть хелпер `{{#if cond}} ... {{/if}}`, который выводит содержимое, если истинно условие `cond`. При этом вместо `cond` нельзя поставить, к примеру, `a > b` или вызов `str.toUpperCase()`, будет ошибка. Все вычисления должны быть сделаны на этапе передачи данных в шаблон. 
+
+Так сделано как раз для переносимости шаблонной системы на другие языки, но на практике не очень-то удобно.
+
+Продвинутые кросс-платформенные шаблонизаторы, в частности, [Closure Templates](https://developers.google.com/closure/templates/docs/javascript_usage), обладают более мощным языком и умеют самостоятельно разбирать и компилировать многие выражения. 
+
+## Шаблонизация компонент
+
+До этого мы говорили о шаблонных системах "общего назначения". По большому счёту, это всего лишь механизмы для преобразования одной строки в другую. Но при описании шаблона для компоненты мы хотим сгенерировать не просто строку, а DOM-элемент, и не просто генерировать, а в дальнейшем -- с ним работать. 
+
+Современные шаблонные системы "заточены" на это. Они умеют создавать по шаблону DOM-элементы и автоматически выполнять после этого разные полезные действия.
+
+Например:
+<ul>
+<li>Можно сохранить важные подэлементы в свойства компоненты, чтобы было проще к ним обращаться из JavaScript.</li>
+<li>Можно автоматически назначать обработчики из методов компонента.</li>
+<li>Можно запомнить, какие данные относятся к каким элементам и в дальнейшем, при изменении данных автоматически обновлять DOM ("привязка данных" -- англ. data binding).</li>
+</ul>
+
+Одной из первых систем шаблонизации, которая поддерживает подобные возможности была [Knockout.JS](http://knockoutjs.com).
+
+Попробуйте поменять значение `<input>` в примере ниже и вы увидите двухстороннюю привязку данных в действии:
+
+```html
+<!--+ run height=120 autorun -->
+<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
+
+Поменяйте имя: <input *!*data-bind="value: name, valueUpdate: 'input'"*/!*>
+<hr>
+<h1>Привет, <span *!*data-bind="text: name"*/!*></span>!</h1>
+
+<script>
+var user = {
+  name: ko.observable("Вася")
+};
+
+ko.applyBindings(user, document.body); 
+</script>
+```
+
+Библиотека Knockout.JS создаёт объект `ko`, который и содержит все её возможности.
+
+В этом примере работу начинает вызов `ko.applyBindings(user, document.body)`. 
+
+Его аргументы:
+
+<ul>
+<li>`user` -- объект с данными.</li>
+<li>`document.body` -- DOM-элемент, который будет использован в качестве шаблона.</li>
+</ul>
+
+Он пробегает по всем подэлементам `document.body` и, если видит атрибут `data-bind`, то читает его и выполняет привязку данных. 
+
+Значение `<input data-bind="value: name, ...">` означает, что нужно привязать `input.value` к свойству `name` объекта данных.
+
+Привязка осуществляется в две стороны:
+<ol>
+<li>Во-первых, библиотека ставит на `input` свой обработчик `oninput` (можно выбрать другие события, см. [документацию](http://knockoutjs.com/documentation/value-binding.html)), который будет обновлять `user.name`. То есть, изменение `input` автоматически меняет `user.name`</li>
+<li>Во-вторых, свойство `user.name` создано как `ko.observable(...)`. Технически, `ko.observable(value)` -- это функция-обёртка вокруг значения: геттер-сеттер, который умеет рассылать события при изменении.
+
+Например:
+
+```html
+<!--+ run -->
+<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
+
+<script>
+var user = ko.observable("Вася");
+
+*!*
+// вызов user() возвращает значение
+*/!*
+alert( user() ); // Вася
+
+*!*
+// вызов user.subscribe(func) ставит обработчик на изменение значения
+*/!*
+user.subscribe(function(newValue) {
+  alert("Новое значение: " + newValue);
+});
+
+*!*
+// вызов user(newValue) меняет значение
+*/!*
+user("Петя"); // сработает обработчик, назначенный выше
+</script>
+```
+
+Библиотека Knockout.JS ставит свой обработчик на изменение значения и при этом обновляет все привязки. Так что при изменении `user.name` меняется и `input.value`.
+</li>
+</ol>
+
+Далее в том же примере находится `<span data-bind="text: name">` -- здесь атрибут означает привязку текста к `name`. Так как `<span>` по своей инициативе меняться не может, то привязка односторонняя, но если бы мог, то можно сделать и двухстороннюю, это несложно.
+
+**Вызов `ko.applyBindings` можно делать внутри компоненты, и таким образом устанавливать соответствия между её объектом и DOM.**
+
+Библиотка также поддерживает хранение шаблонов в `<script type="text/template">` -- см. документацию [template-binding](http://knockoutjs.com/documentation/template-binding.html), можно организовать прекомпиляцию, добавлять свои привязки и так далее.
+
+### Другие библиотеки
+
+Есть другие библиотеки "продвинутой шаблонизации", которые добавляют свои возможности по работе с DOM, например:
+
+<ul>
+<li>[Ractive.JS](http://www.ractivejs.org)</li>
+<li>[Rivets.JS](http://www.rivetsjs.com/)</li>
+</ul>
+
+Подобная шаблонная система является частью многих фреймворков, например:
+<ul>
+<li>[React.JS](http://facebook.github.io/react/)</li>
+<li>[Angular.JS](http://angularjs.org)</li>
+<li>[Ember.JS](http://emberjs.com/)</li>
+</ul>
+
+Все эти фреймворки разные:
+<ul>
+<li>Ember использует надстройку над Handlebars.</li>
+<li>React использует JSX ([JavaScript XML syntax transform](http://facebook.github.io/react/docs/jsx-in-depth.html)) -- свой особый способ вставки разметки в JS-код, который нужно обязательно прекомпилировать перед запуском.</li>
+<li>Angular вместо работы со строками использует клонирование DOM-узлов.</li>
+</ul>
+
+При разработке современного веб-приложения имеет смысл выбрать продвинутую шаблонную систему или даже один из этих архитектурных фреймворков.
+
+## Итого
+
+Системы шаблонизации, в порядке развития и усложнения:
+
+<ul>
+<li>Микрошаблонизация -- строка с JS-вставками, которая компилируется в функцию -- самый простой вариант, минимальная работа для шаблонизатора.</li>
+<li>Собственный язык шаблонов -- "особо простой" синтаксис для частых операций, с запретом на JS в случае, если нужна кросс-платформенность.</li>
+<li>Шаблонизация для компонентов -- современные системы, которые умеют не только генерировать DOM, но и помогать с дальнейшей работой с ним.</li>
+</ul>
+
+Для того, чтобы использовать одни и те же шаблоны на клиенте и сервере, применяют либо кросс-платформенную систему шаблонизации, либо, чаще -- интегрируют серверную часть с V8 и, возможно, с сервером Node.JS.
+
+В главе было много ссылок на шаблонные системы. Все они достаточно современные, поддерживаемые и используются во многих проектах. Среди них вы наверняка найдёте нужную вам.
+
diff --git a/3-more/6-extra/4-books/article.md b/3-more/6-extra/4-books/article.md
new file mode 100644
index 00000000..00e3c1fb
--- /dev/null
+++ b/3-more/6-extra/4-books/article.md
@@ -0,0 +1,90 @@
+# Книги по JS, HTML/CSS и не только
+
+При разработке сложных приложений вам понадобятся как смежные технологии, так и знание общей методологии программирования.
+[cut]
+
+Прямо сейчас вам будет достаточно знания основ HTML/CSS, но в будущем или параллельно с изучением учебника вы, возможно, захотите углубить свои знания и в других областях.
+
+**Для обучения JavaScript по учебнику чтение книг, которые здесь предложены, не является обязательным.**
+
+Мне часто задают вопрос: "Какую литературу порекомендуете?". На этой странице я предлагаю рекомендации по различным темам. Всего несколько книг на каждую тему, из большего количества все равно пришлось бы выбирать.
+
+Кстати, по всем книжкам, особенно тех, которые касаются технологий, всегда ищите последнее издание.
+
+P.S. Скачать книги здесь нельзя. Эта страница содержит только рекомендации.
+
+## CSS
+
+CSS стоит изучать по одной из этих книг. Можно сразу по обеим.
+
+<ul>
+<li><a href="http://www.ozon.ru/context/detail/id/5510936/?partner=iliakan">CSS ручной работы.</a>
+<i>Дэн Седерхольм</i>.</li>
+<li><a href="http://www.ozon.ru/context/detail/id/5647176/?partner=iliakan">Большая книга CSS.</a>
+<i>Дэвид Макфарланд.</i></li>
+</ul>
+
+Для того, чтобы разобраться в конкретных вопросах CSS, и в качестве справочника полезна книга Эрика Мейера <a href="http://www.ozon.ru/context/detail/id/3881079/?partner=iliakan">CSS. Каскадные таблицы стилей. Подробное руководство.</a>, а также [стандарт CSS 2.1](http://specs.operafan.net/css2.1RU/CSS21/visuren.html).
+
+## JavaScript
+
+Полезное чтение о языке, встроенных методах и конструкциях JavaScript:
+
+<ul>
+<li><a href="http://www.ozon.ru/context/detail/id/3881091/?partner=iliakan">JavaScript. Подробное руководство.</a>
+<i>Дэвид Флэнаган.</i></li>
+<li><a href="http://www.ozon.ru/context/detail/id/6287517/?partner=iliakan">JavaScript. Шаблоны.</a>
+<i>Стоян Стефанов.</i></li>
+</ul>
+
+## jQuery
+
+Кроме [документации](http://api.jquery.com/):
+
+<ul>
+<li><a href="http://www.ozon.ru/context/detail/id/6277333/?partner=iliakan">jQuery. Подробное руководство по продвинутому JavaScript.</a>
+<i>Бер Бибо, Иегуда Кац.</i></li>
+</ul>
+
+## Объектно-ориентированное программирование 
+
+Объектно-ориентированное программирование (ООП) -- это концепция построения программных систем на основе объектов и взаимодействия между ними. При изучении ООП рассматриваются полезные архитектурные приёмы, как организовать программу более эффективно. 
+
+Умение создавать объект, конструктор, вызывать методы -- это основные, самые базовые "кирпичики". Их следует освоить первыми, например используя этот учебник. Затем, когда основы более-менее освоены, стоит уделить внимание теории объектно-ориентированной разработки:
+
+<ul>
+<li><a href="http://www.ozon.ru/context/detail/id/3905587/?partner=iliakan">Объектно-ориентированный анализ и проектирование с примерами приложений.</a>
+<i>Гради Буч и др.</i>.</li>
+<li><a href="http://www.ozon.ru/context/detail/id/2457392/?partner=iliakan">Приемы объектно-ориентированного проектирования. Паттерны проектирования.</a>
+<i>Э. Гамма, Р. Хелм, Р. Джонсон, Дж. Влиссидес.</i></li>
+</ul>
+
+## Регулярные выражения
+
+<ul>
+<li><a href="http://www.ozon.ru/context/detail/id/4066500/?partner=iliakan">Регулярные выражения.</a>
+<i>Джеффри Фридл.</i></li>
+</ul>
+
+Эта книга описывает более широкий класс регэкспов, по сравнению с текущим JavaScript. С одной стороны, какая-то информация будет лишней, с другой -- регулярные выражения вообще очень важная и полезная тема.
+
+## Алгоритмы и структуры данных
+
+<ul>
+<li><a href="http://www.ozon.ru/context/detail/id/2429691/?partner=iliakan">Алгоритмы. Построение и анализ.</a>
+<i>Т. Кормен, Ч. Лейзерсон, Р. Ривест, К. Штайн.</i></li>
+</ul>
+
+Есть и другая классика, например "Искусство программирования", Дональд Кнут, но она требует более серьёзной математической подготовки. Будьте готовы читать и вникать долго и упорно. Результат -- апгрейд мозговых извилин и общего умения программировать. 
+
+## Разработка и организация кода
+
+<ul>
+<li><a href="http://www.ozon.ru/context/detail/id/5508646/?partner=iliakan">Совершенный код.</a>
+<i>Стив Макконнелл.</i></li>
+</ul>
+
+Это желательно изучать уже после получения какого-то опыта в программировании.
+ 
+
+
diff --git a/3-more/6-extra/5-setImmediate/article.md b/3-more/6-extra/5-setImmediate/article.md
new file mode 100644
index 00000000..331acf58
--- /dev/null
+++ b/3-more/6-extra/5-setImmediate/article.md
@@ -0,0 +1,30 @@
+# Асинхронное выполнение: setImmediate
+
+Функция, отложенная через `setTimeout(..0)` выполнится не ранее следующего "тика" таймера, минимальная частота которого может составлять от 4 до 1000мс. И, конечно же, это произойдёт после того, как все текущие изменения будут перерисованы.
+
+Но нужна ли нам эта дополнительная задержка? Как правило, используя `setTimeout(func, 0)`, мы хотим перенести выполнение `func` на "ближайшее время после текущего кода", и какая-то дополнительная задержка нам не нужна. Если бы была нужна -- мы бы её указали вторым аргументом вместо `0`.
+
+[cut]
+## Метод setImmediate(func)
+
+Для того, чтобы поставить функцию в очередь на выполнение без задержки, в Microsoft предложили метод [setImmediate(func)](http://msdn.microsoft.com/en-us/library/ie/hh773176.aspx). Он реализован в IE10.
+
+У `setImmediate` единственный аргумент -- это функция, выполнение которой нужно запланировать.
+
+В других браузерах `setImmediate` нет, но его можно эмулировать, используя, к примеру, метод [postMessage](https://developer.mozilla.org/en-US/docs/DOM/window.postMessage), предназначенный для пересылки сообщений от одного окна другому. Детали работы с `postMessage` вы найдёте в статье [](/cross-window-messaging-with-postmessage). Желательно читать её после освоения темы "События".
+
+Эмуляция `setImmediate` с его помощью для всех браузеров, кроме IE<8 (в которых нет `postMessage`, так что будет использован setTimeout):
+
+```js
+//+ hide="Раскрыть код" src="setImmediate.js"
+```
+
+Есть и более сложные эмуляции, включая [MessageChannel](http://www.w3.org/TR/webmessaging/#channel-messaging) для работы с [Web Workers](http://www.w3.org/TR/workers/) и хитрый метод для поддержки IE6-8: [](https://github.com/NobleJS/setImmediate). Все они по существу являются "хаками", направленными на то, чтобы обеспечить поддержку `setImmediate` в тех браузерах, где его нет.
+
+## Тест производительности
+
+Чтобы сравнить реальную частоту срабатывания -- измерим время на подсчет от 1 до 100 при `setTimeout/setImmediate`:
+
+[iframe src="setImmediate" border="1" link edit]
+
+Запустите пример выше -- и вы увидите реальную разницу во времени между `setTimeout(.., 0)` и `setImmediate`. Да, она может быть более в 50, 100 и более раз.
\ No newline at end of file
diff --git a/3-more/6-extra/5-setImmediate/setImmediate.js b/3-more/6-extra/5-setImmediate/setImmediate.js
new file mode 100755
index 00000000..b041e4ea
--- /dev/null
+++ b/3-more/6-extra/5-setImmediate/setImmediate.js
@@ -0,0 +1,27 @@
+if (!window.setImmediate) window.setImmediate = (function() {
+  var head = { }, tail = head; // очередь вызовов, 1-связный список
+
+  var ID = Math.random(); // уникальный идентификатор
+
+  function onmessage(e) {
+    if(e.data != ID) return; // не наше сообщение
+    head = head.next;
+    var func = head.func;
+    delete head.func;
+    func();      
+  }
+
+  if(window.addEventListener) { // IE9+, другие браузеры
+    window.addEventListener('message', onmessage, false);
+  } else { // IE8
+    window.attachEvent( 'onmessage', onmessage ); 
+  }
+
+  return window.postMessage ? function(func) {
+    tail = tail.next = { func: func };
+    window.postMessage(ID, "*");
+  } : 
+  function(func) { // IE<8
+    setTimeout(func, 0);
+  };
+}());
diff --git a/3-more/6-extra/5-setImmediate/setImmediate.view/index.html b/3-more/6-extra/5-setImmediate/setImmediate.view/index.html
new file mode 100755
index 00000000..f19e7ebf
--- /dev/null
+++ b/3-more/6-extra/5-setImmediate/setImmediate.view/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <script src="setImmediate.js"></script>
+</head>
+<body>
+
+<button onclick="testTimeout()">testTimeout</button>
+<button onclick="testImmediate()">testImmediate</button>
+  
+<script>
+  
+  function testTimeout() {
+    var start = new Date();
+    var i = 0;
+    setTimeout(function go() {
+      i++;
+      if (i == 100) {
+        alert(new Date - start);
+      } else {
+        setTimeout(go, 0);
+      }
+    }, 0);
+  }
+
+  function testImmediate() {
+    var start = new Date();
+    var i = 0;
+    setImmediate(function go() {
+      i++;
+      if (i == 100) {
+        alert(new Date - start);
+      } else {
+        setImmediate(go);
+      }
+    });
+  }
+
+
+</script>
+  
+</body>
+</html>
diff --git a/3-more/6-extra/5-setImmediate/setImmediate.view/setImmediate.js b/3-more/6-extra/5-setImmediate/setImmediate.view/setImmediate.js
new file mode 100755
index 00000000..b041e4ea
--- /dev/null
+++ b/3-more/6-extra/5-setImmediate/setImmediate.view/setImmediate.js
@@ -0,0 +1,27 @@
+if (!window.setImmediate) window.setImmediate = (function() {
+  var head = { }, tail = head; // очередь вызовов, 1-связный список
+
+  var ID = Math.random(); // уникальный идентификатор
+
+  function onmessage(e) {
+    if(e.data != ID) return; // не наше сообщение
+    head = head.next;
+    var func = head.func;
+    delete head.func;
+    func();      
+  }
+
+  if(window.addEventListener) { // IE9+, другие браузеры
+    window.addEventListener('message', onmessage, false);
+  } else { // IE8
+    window.attachEvent( 'onmessage', onmessage ); 
+  }
+
+  return window.postMessage ? function(func) {
+    tail = tail.next = { func: func };
+    window.postMessage(ID, "*");
+  } : 
+  function(func) { // IE<8
+    setTimeout(func, 0);
+  };
+}());
diff --git a/3-more/6-extra/6-bind-late/article.md b/3-more/6-extra/6-bind-late/article.md
new file mode 100644
index 00000000..a33953e6
--- /dev/null
+++ b/3-more/6-extra/6-bind-late/article.md
@@ -0,0 +1,160 @@
+# Позднее связывание "bindLate"
+
+Обычный метод `bind` называется "ранним связыванием", поскольку фиксирует привязку сразу же. 
+
+Как только значения привязаны -- они уже не могут быть изменены. В том числе, если метод объекта, который привязали, кто-то переопределит -- "привязанная" функция этого не заметит.
+
+Позднее связывание -- более гибкое, оно позволяет переопределить привязанный метод когда угодно.
+[cut]
+
+## Раннее связывание
+
+Например, попытаемся переопределить метод при раннем связывании:
+
+```js
+//+ run
+function bind(func, context) {  
+  return function() { 
+    return func.apply(context, arguments); 
+  };
+}
+
+var user = {                
+  sayHi: function() { alert('Привет!'); }
+}
+
+// привязали метод к объекту
+*!*
+var userSayHi = bind(user.sayHi, user);
+*/!*
+
+// понадобилось переопределить метод
+user.sayHi = function() { alert('Новый метод!'); }
+
+// будет вызван старый метод, а хотелось бы - новый!
+userSayHi(); // *!*выведет "Привет!"*/!*
+```
+
+...Привязка всё ещё работает со старым методом, несмотря на то что он был переопределён.
+
+## Позднее связывание
+
+При позднем связывании `bind` вызовет не ту функцию, которая была в `sayHi` на момент привязки, а ту, которая есть на момент вызова.**
+
+Встроенного метода для этого нет, поэтому нужно реализовать.
+
+Синтаксис будет таков:
+
+```js
+var func = bindLate(obj, "method");
+```
+
+<dl>
+<dt>`obj`</dt>
+<dd>Объект</dd>
+<dt>`method`</dt>
+<dd>Название метода (строка)</dd>
+</dl>
+
+Код:
+
+```js
+function bindLate(context, funcName) { 
+  return function() {
+    return context[funcName].apply(context, arguments);
+  };
+}
+```
+
+Этот вызов похож на обычный `bind`, один из вариантов которого как раз и выглядит как `bind(obj, "method")`, но работает по-другому.
+
+**Поиск метода в объекте: `context[funcName]`, осуществляется при вызове, самой обёрткой**. 
+
+**Поэтому, если метод переопределили -- будет использован всегда последний вариант.**
+
+В частности, пример, рассмотренный выше, станет работать правильно:
+
+```js
+//+ run
+function bindLate(context, funcName) { 
+  return function() {
+    return context[funcName].apply(context, arguments);
+  };
+}
+
+var user = {
+  sayHi: function() { alert('Привет!'); }
+}
+
+*!*
+var userSayHi = bindLate(user, 'sayHi');
+*/!*
+
+user.sayHi = function() { alert('Здравствуйте!'); }
+
+userSayHi(); // *!*Здравствуйте!*/!*
+```
+
+## Привязка метода, которого нет
+
+Позднее связывание позволяет привязать к объекту даже метод, которого ещё нет!
+
+Конечно, предполагается, что к моменту вызова он уже будет определён ;).
+
+Например:
+
+```js
+//+ run
+function bindLate(context, funcName) { 
+  return function() {
+    return context[funcName].apply(context, arguments);
+  };
+}
+
+// *!*метода нет*/!*
+var user = {  };
+
+// *!*..а привязка возможна!*/!*
+*!*
+var userSayHi = bindLate(user, 'sayHi'); 
+*/!*
+
+// по ходу выполнения добавили метод..
+user.sayHi = function() { alert('Привет!'); }
+
+userSayHi(); // Метод работает: *!*Привет!*/!*
+```
+
+В некотором смысле, позднее связывание всегда лучше, чем раннее. Оно удобнее и надежнее, так как всегда вызывает нужный метод, который в объекте сейчас. 
+
+Но оно влечет и небольшие накладные расходы -- поиск метода при каждом вызове.
+
+## Итого
+
+*Позднее связывание* ищет функцию в объекте в момент вызова.
+
+Оно используется для привязки в тех случаях, когда метод *может быть переопределён* после привязки или *на момент привязки не существует*.
+
+Обёртка для позднего связывания (без карринга):
+
+```js
+function bindLate(context, funcName) { 
+  return function() {
+    return context[funcName].apply(context, arguments);
+  };
+}
+```
+
+[head]
+<script>
+function bind(func, context /*, args*/) {
+  var bindArgs = [].slice.call(arguments, 2); // (1)
+  function wrapper() {                        // (2)
+    var args = [].slice.call(arguments); 
+    var unshiftArgs = bindArgs.concat(args);  // (3)
+    return func.apply(context, unshiftArgs);  // (4)
+  }
+  return wrapper;
+}
+</script>
+[/head]
\ No newline at end of file
diff --git a/3-more/6-extra/7-sublime/article.md b/3-more/6-extra/7-sublime/article.md
new file mode 100644
index 00000000..9c1b81b1
--- /dev/null
+++ b/3-more/6-extra/7-sublime/article.md
@@ -0,0 +1,47 @@
+# Sublime Text: шпаргалка
+
+Одним из наиболее мощных, и при этом простых, редакторов является [Sublime Text](http://www.sublimetext.com/). 
+
+В нём хорошо развита система команд и горячих клавиш. На этой странице размещена "шпаргалка" с плагинами и самыми частыми сочетаниями клавиш, которые сильно упрощают жизнь. 
+
+[cut]
+
+## Горячие клавиши
+Для наибольшего удобства "шпаргалка" должна быть распечатана и повешена перед глазами, поэтому она сделана в виде 3-колоночного PDF.
+
+<a href="/files/tutorial/sublime/sheet.pdf">Скачать шпаргалку в формате PDF</a>
+
+Шпаргалка пока под Mac. Для Windows сочетания похожи, обычно вместо Mac-клавиши <code class="key">Cmd</code> под Windows будет <code class="key">Ctrl</code>. А если в сочетании есть и <code class="key">Cmd</code> и <code class="key">Ctrl</code>, то под Windows будет <code class="key">Ctrl</code> + <code class="key">Shift</code>.
+
+**Вы часто используете сочетание, но его нет в списке? Поделитесь им в комментариях!**
+
+## Плагины
+
+Мои любимые плагины:
+
+<ul>
+<li>Package Control</li>
+<li>sublime-emmet</li>
+<li>JsFormat</li>
+<li>SideBarEnhancements</li>
+<li>AdvancedNewFile</li>
+<li>sublime-jsdocs</li>
+<li>SublimeCodeIntel</li>
+</ul>
+
+Остальные:
+
+<ul>
+<li>Alignment</li>
+<li>CSSComb</li>
+<li>EncodingHelper</li>
+<li>GoToRecent</li>
+<li>HTML5</li>
+<li>jQuery</li>
+<li>Prefixr</li>
+<li>View In Browser</li>
+</ul>
+
+Чтобы узнать о плагине подробнее -- введите его название в Google.
+
+Есть и другие хорошие плагины, кроме перечисленных. Кроме того, Sublime позволяет легко писать свои плагины и команды. 
diff --git a/3-more/6-extra/8-range-textrange-selection/56.gif b/3-more/6-extra/8-range-textrange-selection/56.gif
new file mode 100755
index 00000000..a1a5a0be
Binary files /dev/null and b/3-more/6-extra/8-range-textrange-selection/56.gif differ
diff --git a/3-more/6-extra/8-range-textrange-selection/57.gif b/3-more/6-extra/8-range-textrange-selection/57.gif
new file mode 100755
index 00000000..cdd07f75
Binary files /dev/null and b/3-more/6-extra/8-range-textrange-selection/57.gif differ
diff --git a/3-more/6-extra/8-range-textrange-selection/58.gif b/3-more/6-extra/8-range-textrange-selection/58.gif
new file mode 100755
index 00000000..d761450c
Binary files /dev/null and b/3-more/6-extra/8-range-textrange-selection/58.gif differ
diff --git a/3-more/6-extra/8-range-textrange-selection/article.md b/3-more/6-extra/8-range-textrange-selection/article.md
new file mode 100644
index 00000000..7def6fc7
--- /dev/null
+++ b/3-more/6-extra/8-range-textrange-selection/article.md
@@ -0,0 +1,426 @@
+# Выделение: Range, TextRange и Selection
+
+В этой статье речь пойдет о документированных, но нечасто используемых объектах `Range`, `TextRange` и `Selection`. Мы рассмотрим вольный перевод спецификаций с понятными примерами и различные кроссбраузерные реализации.
+[cut]
+## Range
+
+`Range`. -- это объект, соответствующий фрагменту документа, который может включать узлы и участки текста из этого документа. Наиболее подробно объект `Range` описан в спецификации [DOM Range](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html).
+
+Чтобы понять о чем речь, обратимся к самому простому случаю  `Range`, который будет подробно рассмотрен ниже -- к выделениям. В приводимом ниже примере выделите несколько слов в предложении. Будет выводиться текстовое содержимое выделяемой области:
+
+<div id="demo-mix" onmouseup="alert($selection.getText())" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
+  Соберем микс из <b>жирности</b>, <em>курсива</em> и <a href="#">ссылки</a> и повыделяем здесь.
+</div>
+
+
+Но такие области можно создавать не только с помощью пользовательского выделения, но и из JavaScript-сценария, выполняя с ними определенные манипуляции. Однако, написать простой иллюстрирующий код сразу не выйдет, т.к. есть одно НО -- Internet Explorer до версии 9. В Microsoft создали собственную реализацию -- [объект TextRange](http://msdn.microsoft.com/en-us/library/ms535872.aspx). Разбёрем каждую реализацию по-отдельности.
+
+### DOM-реализация Range (кроме IE<9)
+
+`Range` состоит из двух граничных точек (boundary-points), соответствующих началу и концу области. Позиция любой граничной точки определяется в документе с помощью двух свойств: узел (node) и смещение (offset).
+
+Контейнером (container) называют узел, содержащий граничную точку. Сам контейнер и все его предки называются родительскими контейнерами (ancestor containers) для граничной точки. Родительский контейнер, включающий обе граничные точки, называют корневым контейнером (root container).
+
+<img src="57.gif">
+
+На изображении выше граничные точки выделения лежат в текстовых узлах (`#text1` и `#text2`), которые являются контейнерами. Для левой границы родительскими контейнерами являются `#text1`, `H1`, `BODY`, для правой -- `#text2`, `P`, `BODY`. Общий родитель для обоих граничных точек -- `BODY`, этот элемент является корневым контейнером.
+
+Если контейнер является текстовым узлом, то смещение определяется в символах от начала DOM-узла. Если контейнер является элементом (`Document`, `DocumentFragment`, `Element`...), то смещение определяется в дочерних узлах.
+
+Смотрим на иллюстрацию ([источник](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#td-boundarypoint)):
+
+<img src="56.gif" alt="Пример Range">
+
+Граничные точки объекта `Range` <span style="color:green; font-weight:bold;">s1</span> лежат в текстовых узлах, поэтому смещение задается в символах от начала узла. Для <span style="color:red; font-weight:bold;">s2</span> граничные точки расставлены так, что включают весь абзац &lt;p&gt;Blah xyz&lt;/p&gt;, поэтому контейнером является элемент `BODY`, и смещение считается в позициях дочерних узлов.
+
+Объекты `Range` создаются с помощью вызова `document.createRange()`. Объект при этом создается пустой, и граничные точки нужно задать далее его методами `setStart` и `setEnd`. Смотрим пример.
+
+HTML:
+
+```html
+<div id="ex2">
+  <h2>Соз|даем объект `Range`</h2>
+  <p>От третье|го символа заголовка до десятого символа это абзаца.</p>
+</div>
+
+<button onclick="alert(domRangeCreate())">
+  Создать Range и вывести его текст
+</button>
+
+<script>
+function domRangeCreate() {
+  // Найдем корневой контейнер
+  var root = document.getElementById('ex2');
+  // Найдем контейнеры граничных точек (в данном случае тестовые)
+  var start = root.getElementsByTagName('h2')[0].firstChild;
+  var end = root.getElementsByTagName('p')[0].firstChild;
+  if (root.createRange) {
+    // Создаем Range
+    var rng = root.createRange();
+    // Задаем верхнюю граничную точку, передав контейнер и смещение
+    rng.setStart( start, 3 );
+    // Аналогично для нижней границы
+    rng.setEnd( end, 10 );
+    // Теперь мы можем вернуть текст, который содержится в полученной области
+    return rng.toString();
+  } else {
+    return 'Вероятно, у вас IE<9, смотрите реализацию TextRange ниже';
+  }
+}
+</script>
+```
+
+<p>В действии:</p>
+
+[iframe border="1" src="domRangeCreate" edit link]
+
+<p>Рассмотрим вкратце [свойства и методы Range](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-Interface):</p>
+
+<ul>
+  <li>Свойство `commonAncestorContainer` вернет ссылку на наиболее вложенный корневой контейнер.</li>
+  <li>Свойство `startContainer` (`endContainer`) вернет ссылку на контейнер верхней (нижней) граничной точки.</li>
+  <li>Свойство `startOffset` (`endOffset`) вернет смещение для верхней (нижней) граничной точки.</li>
+  <li>Свойство `collapsed` вернет `true`, если граничные точки имеют одинаковые контейнеры и смещение (`false` в противном случае).</li>
+</ul>
+
+<ul>
+  <li>Метод `setStart` (`setEnd`) задает контейнер (ссылка на узел) и смещение (целочисленное значение) для соответствующих граничных точек. Пример выше.</li>
+  <li>Методы `setStartBefore`, `setStartAfter`, `setEndBefore`, `setEndAfter` принимают в качестве единственного аргумента ссылку на узел и устанавливают граничные точки в соот-ии с естественной границей переданного узла. Например:
+
+```html
+<span id="s1">First</span>
+<span id="s2">Second</span>
+```
+
+
+
+```js
+var rng = document.createRange();
+// Установит верхнюю граничную точку по левой границе спана #s1
+rng.setStartBefore( document.getElementById('s1') );
+// Установит нижнюю граничную точку по правой границе спана #s2
+rng.setEndAfter( document.getElementById('s2') );
+```
+
+</li>
+  <li>Методы `selectNode` и `selectNodeContents` позволяют создать объект `Range` по границам узла, ссылку на который они принимают в качестве единственного аргумента. При использовании `selectNode` передаваемый узел также войдет в `Range`, в то время как `selectNodeContents` создаст объект только из содержимого узла:
+
+<img src="58.gif">
+</li>
+  <li>Метод `collapse` объединяет граничные точки объекта `Range`. В качестве единственного аргумента принимает булево значение (`true` -- для объединения в верхней точке, `false` -- в нижней). По-умолчанию `true`.</li>
+  <li>Метод `toString` вернет текстовое содержимое объекта `Range`.</li>
+  <li>Метод `cloneContents` вернет копию содержимого объекта `Range` в виде фрагмента документа.</li>
+  <li>Метод `cloneRange` вернет копию самого объекта `Range`.</li>
+  <li>Метод `deleteContents` удаляет всё содержимое объекта `Range`.</li>
+  <li>Метод `detach` извлекает текущий объект из DOM, так что на него больше нельзя сослаться.</li>
+  <li>Метод `insertNode` принимает в качестве единственного аргумента ссылку на узел (или фрагмент документа) и вставляет его в содержимое объекта `Range` в начальной точке.</li>
+  <li>Метод `extractContents` вырезает содержимое объекта `Range` и возвращает ссылку на полученный фрагмент документа.</li>
+  <li>Метод `surroundContents` помещает всё содержимое текущего объекта `Range` в новый родительский элемент, ссылка на который принимается в качестве единственного аргумента.</li>
+  <li>Метод `compareBoundaryPoints` используется для сравнения граничных точек.</li>
+</ul>
+
+Для примера решим небольшую задачку. Найдём в текстовом узле фразу и подсветим её синим фоном.
+
+```html
+<div id="ex3">
+  Найдем в этом тексте слово "бабуля" и подсветим его синим фоном
+</div>
+
+<script>
+function domRangeHighlight(text) {
+  // Получим текстовый узел
+  var root = document.getElementById('ex3').firstChild;
+  // и его содержимое
+  var content = root.nodeValue;
+  // Проверим есть ли совпадения с переданным текстом
+  if ( ~content.indexOf( text ) ) {
+    if ( document.createRange ) {
+      // Если есть совпадение, и браузер поддерживает Range, создаем объект
+      var rng = document.createRange();
+      // Ставим верхнюю границу по индексу совпадения,
+      rng.setStart( root, content.indexOf( text ) );
+      // а нижнюю по индексу + длина текста
+      rng.setEnd( root, content.indexOf( text ) + text.length );
+      // Создаем спан с синим фоном
+      var highlightDiv = document.createElement('span');
+      highlightDiv.style.backgroundColor = 'blue';
+      // Обернем наш Range в спан
+      rng.surroundContents( highlightDiv );
+    } else {
+      alert('Вероятно, у вас IE<9, смотрите реализацию TextRange ниже');
+    }
+  } else {
+    alert('Совпадений не найдено');
+  }
+}
+</script>
+```
+
+В действии:
+
+[iframe border="1" src="domRangeHighlight" edit link]
+
+С остальными свойствами и методами поэкспериментируйте сами. Перейдем к реализации range в IE.
+
+### TextRange (для IE)
+
+Объект `TextRange` в реализации MSIE -- это текстовый диапазон нулевой и более длины. У данного диапазона также есть свои границы, "перемещать" которые можно на целое число текстовых единиц: character(символ), word (слово), sentence (предложение). То есть можно взять и сдвинуть границу на 2(5, 8 и т.д.) слова (символа, предложения) вправо (влево). При этом у объекта сохраняются данные о HTML-содержимом диапазона и есть методы взаимодействия с DOM.
+
+Объект `TextRange` создается с помощью метода `createTextRange`, который можно вызывать в контексте элементов `BODY`, `BUTTON`, `INPUT` (большинство типов), `TEXTAREA`.
+
+Простой пример с кнопкой:
+
+```html
+<!--+ autorun -->
+<input id="buttonId" type="button" value="Test button" onclick="alert( ieTextRangeCreate() );" />
+
+<script>
+function ieTextRangeCreate() {
+  // Найдем кнопку
+  var button = document.getElementById('buttonId');
+  // Если мы в ИЕ
+  if ( button.createTextRange && button.createTextRange() != undefined ) {
+    // Создаем TextRange
+    var rng = button.createTextRange();
+    // И вернем текстовое содержимое полученного объекта
+    return rng.text;
+  } else {
+    return 'Вероятно, у вас не IE, смотрите реализацию Range выше';
+  }
+}
+</script>
+```
+
+Рассмотрим [свойства и методы объекта TextRange](http://msdn.microsoft.com/en-us/library/ms535872.aspx) (не все, только самые необходимые):
+
+<ul>
+  <li>Свойство `boundingWidth` (boundingHeight) вернет ширину (высоту), которую занимает объект TextRange в пикселях.</li>
+  <li>Свойство `boundingTop` (`boundingLeft`) вернет Y(X)-координату верхнего левого угла тестовой области относительно окна документа.</li>
+  <li>Свойство `htmlText` вернет HTML-содержимое объекта.</li>
+  <li>Свойство `text` вернет текстовое содержимое объекта (см. пример выше).</li>
+  <li>Свойство `offsetTop` (`offsetLeft`) вернет Y(X)-координату верхнего левого угла тестовой области относительно предка.</li>
+</ul>
+
+<ul>
+  <li>Метод `collapse` объединяет граничные точки диапазона. В качестве единственного аргумента принимает булево значение (`true` -- для объединения в верхней точке, `false` -- в нижней). По-умолчанию true.</li>
+  <li>Метод `duplicate` клонирует имеющийся текстовый диапазон, возвращая новый, точно такой же.</li>
+  <li>Метод `expand` расширяет текущий тектовый диапазон до единицы текста, переданной в качестве единственного текстового аргумента:
+  <ul>
+  <li>`"character'` -- символ.</li>
+  <li>`"word"` -- слово</li>
+  <li>`"sentence"` -- предложение</li>
+  <li>`"textedit"` -- сворачивает до первоначального диапазона.
+</ul>
+  Вернет `true` (`false`) в случае успеха (неудачи).
+  </li>
+  <li>Метод `findText` ищет в диапазоне совпадения с текстовой строкой, передаваемой в качестве первого аргумента (без учета регистра). Если совпадение найдено, то границы диапазона сворачиваются до него. В качестве второго (необязательного) аргумента можно передать целое число, указывающее число символов от верхней точки, в которых нужно производить поиск. Далее в качестве аргументов можно перечислять INT-флаги, которые вам [вряд ли понадобятся](http://msdn.microsoft.com/en-us/library/ms536422.aspx).</li>
+  <li>Метод `getBookmark` возвращает в случае успешного вызова строку, по которой можно будет восстановить текущее состояние текстового диапазона с помощью метода `moveToBookmark`.</li>
+  <li>Метод `inRange` принимает в качестве аргумента другой `TextRange` и проверяет, входит ли его текстовый диапазон в диапазон контекстного объекта. Возвращает булево значение.</li>
+  <li>Метод `isEqual` проверяет является ли текущий `TextRange` идентичным переданному в качестве аргумента. Возвращает булево значение.</li>
+  <li>Метод `move(sUnit [, iCount])` сворачивает текущий диапазон до нулевой длины и передвигает на единицу текста, переданного в качестве первого аргумента (character | word | sentence | textedit). В качестве второго (необязательного) аргумента можно передать число единиц, на которое следует передвинуть диапазон.</li>
+  <li>Метод `moveEnd` (`moveStart`), аналогично методу move, передвигает верхнюю (нижнюю) границу диапазона на единицу текста, число которых также можно задать необязательным вторым параметром.</li>
+  <li>Метод `moveToElementText` принимает в качестве аргумента ссылку на DOM-элемент и выставляет границы диапазона Textобъекта `Range` по границам полученного элемента.</li>
+  <li>Метод `moveToPoint` принимает в качестве двух обязательных аргументов X и Y-координаты (в пикселях) относительно верхнего левого угла документа и переносит границы диапазона туда.</li>
+  <li>Метод `parentElement` вернет ссылку на элемент, который полностью содержит диапазон объекта `TextRange` (или `null`).</li>
+  <li>Метод `pasteHTML` заменяет HTML-содержимое текущего текстового диапазона на строку, переданную в качестве единственного аргумента.</li>
+  <li>Метод `select` формирует выделение на основе содержимого объекта `TextRange`, о чем мы подробнее поговорим ниже.</li>
+  <li>Метод `setEndPoint` принимает в качестве обязательных аргументов текстовый указатель и ссылку на другой `TextRange`, устанавливая в зависимости от значения указателя границы диапазона. Указатели могут быть следующими: 'StartToEnd', 'StartToStart', 'EndToStart', 'EndToEnd'.</li>
+</ul>
+
+Также к `TextRange` применимы команды [метода execCommand](http://msdn.microsoft.com/en-us/library/ms536419%28v=vs.85%29.aspx), который умеет делать текст жирным, курсивным, копировать его в буфер обмена (только IE) и т.п.
+
+Для закрепления сделаем задачку по поиску текстового содержимого, аналогичную той, что была выше:
+
+```html
+<div id="ex4">
+  Найдем в этом тексте слово "бабуля" и подсветим его синим фоном
+</div>
+
+<script>
+function ieTextRangeHighlight(text) {
+  // Получим ссылку на элемент, в котором будет происходить поиск
+  var root = document.getElementById('ex4');
+  // Получим значение его текстового потомка
+  var content = root.firstChild.nodeValue;
+  // Если есть совпадение
+  if ( ~content.indexOf(text) ) {
+    // и мы в MSIE
+    if ( document.body.createTextRange ) {
+      // Создадим объект TextRange
+      var rng = document.body.createTextRange();
+      // Свернем его до root
+      rng.moveToElementText( root );
+      // Найдем текст и свернем диапазон до него
+      if ( rng.findText( text ) )
+        // Заменим текстовый фрагмент на span с синим фоном
+        rng.pasteHTML( '<span style="background:blue;">' + text + '</span>' );
+    } else {
+      alert('Вероятно, у вас не  IE, смотрите реализацию Range выше');
+    }
+  } else {
+    alert('Совпадений не найдено');
+  }
+}
+</script>
+```
+
+В действии:
+
+[iframe border="1" src="ieTextRangeHighlight" edit link]
+
+С остальными свойствами и методами поэкспериментируйте сами.
+
+## Selection
+
+Всем знакомо выделение элементов на странице, когда, зажав левую кнопку мыши и передвигая курсор, мы выделяем нужный фрагмент. Или зажимаем Shift и жмём на стрелочки клавиатуры. Или еще как-то, неважно. В данной части статьи мы кроссбраузерно научимся решать две задачи: получать пользовательское выделение и устанавливать собственное.
+
+### Получаем пользовательское выделение
+
+Эту задачу мы уже решали в самом начале статьи <a href="#demo-mix">в примере с миксом</a>. Теперь рассмотрим код:
+
+```js
+function getSelectionText() {
+  var txt = '';
+  if (txt = window.getSelection) // Не IE, используем метод getSelection
+    txt = window.getSelection().toString();
+  } else { // IE, используем объект selection
+    txt = document.selection.createRange().text;
+  }
+  return txt;
+}
+```
+
+Все браузеры, кроме IE<9 поддерживают метод `window.getSelection()`, который возвращает объект, схожий с рассмотренным ранее `Range`. У этого объекта есть точка начала выделения (anchor) и фокусная точка окончания (focus). Точки могут совпадать. Рассмотрим свойства и методы объекта `Selection`:
+
+<ul>
+  <li>Свойство `anchorNode` вернет контейнер, в котором начинается выделение. Замечу, что началом выделения считается та граница, от которой вы начали выделение. То есть, если вы выделяете справа налево, то началом будет именно правая граница. Это правило работает везде, кроме браузера Opera, в котором `anchorNode` вернет ссылку на узел левого края выделения.</li>
+  <li>Свойство `anchorOffset` вернет смещение для начала выделения в пределах контейнера `anchorNode`.</li>
+  <li>Свойства `focusNode` и `focusOffset` работают аналогично для фокусных точек, то есть точек окончания выделения. Opera и здесь отличилась, возвращает вместо фокусной точки узел правого края выделения.</li>
+  <li>Свойство `rangeCount` возвращает число объектов `Range`, которые входят в полученное выделение. Это свойство полезно при использовании метода `addRange`.</li>
+</ul>
+
+<ul>
+  <li>Метод `getRangeAt` принимает в качестве аргумента индекс объекта `Range` и возвращает сам объект. Если `rangeCount == 1`, то работать будет только `getRangeAt(0)`. Таким образом, мы можем получить объект `Range`, полностью соответствующий текущему выделению.</li>
+  <li>Метод `collapse` сворачивает выделение в точку (каретку). Методу можно передать в качестве первого аргумента узел, в который нужно поместить каретку.</li>
+  <li>Метод `extend` принимает в качестве аргументов ссылку на контейнер и смещение (`parentNode`, `offset`), и перемещает фокусную точку в это положение.</li>
+  <li>Метод `collapseToStart` (`collapseToEnd`) перемещает фокусную (начальную) границу к начальной (фокусной), тем самым сворачивая выделение в каретку.</li>
+  <li>Метод `selectAllChildren` принимает в качестве единственного аргумента ссылку на узел и добавляет всех его потомков в выделение.</li>
+  <li>Метод `addRange` принимает в качестве аргумента объект `Range` и добавляет его в выделение. Таким образом можно увеличить количество объектов `Range`, число которых нам подскажет свойство `rangeCount`.</li>
+  <li>Метод `removeRange` (`removeAllRanges`) удаляет переданный (все) объект `Range` из выделения.</li>
+  <li>Метод `toString` вернет текстовое содержимое выделения.</li>
+</ul>
+
+
+IE предоставляет собственный интерфейс взаимодействия с выделениями -- объект `selection` в контексте document. Для работы с этим объектом используются следующие методы:
+
+<ul>
+  <li>Метод `clear` убирает выделение вместе с содержимым.</li>
+  <li>Метод `createRange` (ВАЖНО! Не путать со стандартным методом `document.createRange()` для создания объектов `Range`!) создает из содержимого выделения `TextRange`.</li>
+  <li>Метод `empty` убирает выделение, но оставляет содержимое.</li>
+</ul>
+
+Надеюсь, теперь, после знакомства с обеими реализациями выделений, код выше стал более понятен.
+
+### Установка собственного выделения
+
+Допустим, вам хочется, чтобы какой-то текстовый фрагмент на странице был выделен, как пользовательское выделение. Это нужно при клиентской реализации поиска по странице и некоторых других задач. 
+
+Проще всего решить эту задачу следующим образом:
+
+<ol>
+  <li>Создать объект `Range` (`TextRange` для IE<9).</li>
+  <li>Перевести полученный объект в выделение.</li>
+</ol>
+
+Смотрим реализацию:
+
+```html
+<div id="ex5">
+  Снова будем выделять <span>бабулю</span>, на этот раз без поиска.
+</div>
+
+<script>
+function setSelection() {
+  var target = document.getElementById('ex5').getElementsByTagName('span')[0];
+  var rng, sel;
+  if ( document.createRange ) {
+    rng = document.createRange();
+    rng.selectNode( target )
+    sel = window.getSelection();
+    sel.removeAllRanges();
+    sel.addRange( rng );
+  } else {
+    var rng = document.body.createTextRange();
+    rng.moveToElementText( target );
+    rng.select();
+  }
+}
+</script>
+```
+
+<p>В действии:</p>
+[iframe border="1" src="setSelection" edit link]
+
+## Снятие выделения
+
+Код для снятия выделения, использующий соответствующие методы объектов `Selection`:
+
+```js
+function clearSelection() {
+  try {
+    // современный объект Selection
+    window.getSelection().removeAllRanges();
+  } catch(e) {
+    // для IE<9
+    document.selection.empty();
+  }
+}
+```
+
+## Итого
+
+<ul>
+<li>В современных браузерах поддерживается стандартный объект [Range](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html)
+</li>
+<li>В IE<9 поддерживается только собственный объект [TextRange](http://help.dottoro.com/ljgbbkjf.php).</li>
+</ul>
+
+Есть библиотеки, которые "исправляют" объект `TextRange`, добавляя ему нужные свойства из `Range`. 
+
+Код, получающий выделение, при использовании такой библиотеки может выглядеть так:
+
+```js
+  var range = getRangeObject();
+  if(range) {
+    alert(range);
+    alert(range.startContainer.nodeValue);
+    alert(range.startOffset);
+    alert(range.endOffset);
+  } else {
+    alert('Ничего не выделено');
+  }
+}
+```
+
+В действии:
+[iframe border="1" src="fix-ie" edit link]
+
+Код функций `getRangeObject(win)` для получения выделения в окне и `fixIERangeObject(range, win)` для исправления `TextRange` -- [edit src="fix-ie"]в песочнице вместе с этим примером[/edit]. 
+
+Эта статья представляет собой обновлённый вариант статьи Александра Бурцева, сайта которого сейчас нет онлайн. Спасибо, Александр!
+[head]
+<script>
+
+window.$selection = {
+	getText : function() {
+		var txt = '';
+		if (txt = window.getSelection) {
+			txt = window.getSelection().toString();
+		} else {
+			txt = document.selection.createRange().text;
+		}
+		return txt;
+	}
+}
+</script>
+[/head]
\ No newline at end of file
diff --git a/3-more/6-extra/8-range-textrange-selection/domRangeCreate.view/index.html b/3-more/6-extra/8-range-textrange-selection/domRangeCreate.view/index.html
new file mode 100755
index 00000000..205b752b
--- /dev/null
+++ b/3-more/6-extra/8-range-textrange-selection/domRangeCreate.view/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+<div id="ex2" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
+	<h2 style="color:#333; margin:0; padding:0 0 7px 0; font:bold 15px Arial;">Соз|даем Range-объект</h2>
+	<p style="color:#333; margin:0; font:13px Arial;">От третье|го символа заголовка до десятого символа это абзаца.</p>
+</div>
+
+<button onclick="alert(domRangeCreate())">Создать Range и вывести его текст</button>
+
+<script>
+function domRangeCreate() {
+  // Найдем корневой контейнер
+  var root = document.getElementById('ex2');
+  // Найдем контейнеры граничных точек (в данном случае тестовые)
+  var start = root.getElementsByTagName('h2')[0].firstChild;
+  var end = root.getElementsByTagName('p')[0].firstChild;
+  if (document.createRange) {
+    // Создаем Range
+    var rng = document.createRange();
+    // Задаем верхнюю граничную точку, передав контейнер и смещение
+    rng.setStart( start, 3 );
+    // Аналогично для нижней границы
+    rng.setEnd( end, 10 );
+    // Теперь мы можем вернуть текст, который содержится в полученной области
+    return rng.toString();
+  } else {
+    return 'Вероятно, у вас IE<9, смотрите реализацию TextRange ниже';
+  }
+}
+</script>
+
+</body>
+</html>
diff --git a/3-more/6-extra/8-range-textrange-selection/domRangeHighlight.view/index.html b/3-more/6-extra/8-range-textrange-selection/domRangeHighlight.view/index.html
new file mode 100755
index 00000000..8ecfc7f2
--- /dev/null
+++ b/3-more/6-extra/8-range-textrange-selection/domRangeHighlight.view/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<div id="ex3" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
+  Найдем в этом тексте слово "бабуля" и подсветим его синим фоном
+</div>
+<div>
+  <input onclick="domRangehighlight('бабуля'); this.style.display = 'none';" type="button" value="Найти!">
+</div>
+<script>
+function domRangehighlight( text ) {
+  var root = document.getElementById('ex3').firstChild;
+  var content = root.nodeValue;
+  if ( ~content.indexOf( text ) ) {
+    if ( document.createRange ) {
+      var rng = document.createRange();
+      rng.setStart( root, content.indexOf( text ) );
+      rng.setEnd( root, content.indexOf( text ) + text.length );
+      var highlightDiv = document.createElement('span');
+      highlightDiv.style.backgroundColor = 'blue';
+       rng.surroundContents( highlightDiv );
+    } else
+      alert('Вероятно, у вас IE<9, смотрите реализацию TextRange ниже');
+  } else
+    alert('Совпадений не найдено');
+}
+</script>
+
+</body>
+</html>
diff --git a/3-more/6-extra/8-range-textrange-selection/fix-ie.view/fixIERangeObject.js b/3-more/6-extra/8-range-textrange-selection/fix-ie.view/fixIERangeObject.js
new file mode 100755
index 00000000..8e92eaf6
--- /dev/null
+++ b/3-more/6-extra/8-range-textrange-selection/fix-ie.view/fixIERangeObject.js
@@ -0,0 +1,87 @@
+/*
+  This code is to fix Microsoft TextRange object (IE8 and below), to give equivalent of
+  HTML5 Range object's startContainer,startOffset,endContainer and endOffset properties.
+
+  Originally from: https://gist.github.com/1115251 (Munnawwar)
+*/
+
+/**
+ * @param {window object} [win] Optional prameter. You could send an IFrame.contentWindow too.
+ */
+function fixIERangeObject(range, win) { //Only for IE8 and below.
+  win=win || window;
+
+  if(!range) return null;
+  if(!range.startContainer && win.document.selection) { //IE8 and below
+
+    var _findTextNode=function(parentElement,text) {
+      //Iterate through all the child text nodes and check for matches
+      //As we go through each text node keep removing the text value (substring) from the beginning of the text variable.
+      var container=null,offset=-1;
+      for(var node=parentElement.firstChild; node; node=node.nextSibling) {
+        if(node.nodeType==3) {//Text node
+          var find=node.nodeValue;
+          var pos=text.indexOf(find);
+          if(pos==0 && text!=find) { //text==find is a special case
+            text=text.substring(find.length);
+          } else {
+            container=node;
+            offset=text.length-1; //Offset to the last character of text. text[text.length-1] will give the last character.
+            break;
+          }
+        }
+      }
+      //Debug Message
+      //alert(container.nodeValue);
+      return {node: container,offset: offset}; //nodeInfo
+    }
+
+    var rangeCopy1=range.duplicate(), rangeCopy2=range.duplicate(); //Create a copy
+    var rangeObj1=range.duplicate(), rangeObj2=range.duplicate(); //More copies :P
+
+    rangeCopy1.collapse(true); //Go to beginning of the selection
+    rangeCopy1.moveEnd('character',1); //Select only the first character
+    rangeCopy2.collapse(false); //Go to the end of the selection
+    rangeCopy2.moveStart('character',-1); //Select only the last character
+
+    //Debug Message
+    // alert(rangeCopy1.text); //Should be the first character of the selection
+    var parentElement1=rangeCopy1.parentElement(), parentElement2=rangeCopy2.parentElement();
+
+    //If user clicks the input button without selecting text, then moveToElementText throws an error.
+    if(parentElement1 instanceof HTMLInputElement || parentElement2 instanceof HTMLInputElement) {
+      return null;
+    }
+    rangeObj1.moveToElementText(parentElement1); //Select all text of parentElement
+    rangeObj1.setEndPoint('EndToEnd',rangeCopy1); //Set end point to the first character of the 'real' selection
+    rangeObj2.moveToElementText(parentElement2);
+    rangeObj2.setEndPoint('EndToEnd',rangeCopy2); //Set end point to the last character of the 'real' selection
+
+    var text1=rangeObj1.text; //Now we get all text from parentElement's first character upto the real selection's first character
+    var text2=rangeObj2.text; //Here we get all text from parentElement's first character upto the real selection's last character
+
+    var nodeInfo1=_findTextNode(parentElement1,text1);
+    var nodeInfo2=_findTextNode(parentElement2,text2);
+
+    //Finally we are here
+    range.startContainer=nodeInfo1.node;
+    range.startOffset=nodeInfo1.offset;
+    range.endContainer=nodeInfo2.node;
+    range.endOffset=nodeInfo2.offset+1; //End offset comes 1 position after the last character of selection.
+  }
+  return range;
+}
+
+function getRangeObject(win) { //Gets the first range object
+  win=win || window;
+  if (win.getSelection) { // Firefox/Chrome/Safari/Opera/IE9
+    try {
+      return win.getSelection().getRangeAt(0); //W3C DOM Range Object
+    } catch(e) {/*If no text is selected an exception might be thrown*/}
+  }
+  else if(win.document.selection) { // IE8
+    var range=win.document.selection.createRange(); //Microsoft TextRange Object
+    return fixIERangeObject(range,win);
+  }
+  return null;
+}
diff --git a/3-more/6-extra/8-range-textrange-selection/fix-ie.view/index.html b/3-more/6-extra/8-range-textrange-selection/fix-ie.view/index.html
new file mode 100755
index 00000000..fcc876ae
--- /dev/null
+++ b/3-more/6-extra/8-range-textrange-selection/fix-ie.view/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <script src="fixIERangeObject.js"></script>
+
+    <script>
+    function test() {
+
+      var range = getRangeObject();
+      if(range) {
+        alert(range);
+        alert(range.startContainer.nodeValue);
+        alert(range.startOffset);
+        alert(range.endOffset);
+      } else {
+        alert('Сначала выделите текст');
+      }
+    }
+    </script>
+  </head>
+  <body>
+    Выделите текст:
+    <pre>The quick brown fox jumped over the lazy dog</pre>
+    <input type="button" value="Вывести выделение и свойства startContainer, startOffset, endOffset" onclick="test();" />
+  </body>
+</html>
diff --git a/3-more/6-extra/8-range-textrange-selection/ieTextRangeHighlight.view/index.html b/3-more/6-extra/8-range-textrange-selection/ieTextRangeHighlight.view/index.html
new file mode 100755
index 00000000..e9f6ab84
--- /dev/null
+++ b/3-more/6-extra/8-range-textrange-selection/ieTextRangeHighlight.view/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<div id="ex4" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
+  Найдем в этом тексте слово "бабуля" и подсветим его синим фоном
+</div>
+<div>
+  <input onclick="ieTextRangeHighlight('бабуля'); this.style.display = 'none';" type="button" value="Найти!">
+</div>
+<script>
+function ieTextRangeHighlight(text) {
+  var root = document.getElementById('ex4');
+  var content = root.firstChild.nodeValue;
+  if ( ~content.indexOf(text) ) {
+    if ( document.body.createTextRange ) {
+      var rng = document.body.createTextRange();
+      rng.moveToElementText( root );
+      if ( rng.findText( text ) )
+        rng.pasteHTML( '<span style="background:blue;">' + text + '</span>' );
+    } else
+      alert('Вероятно, у вас не IE, смотрите реализацию Range выше');
+  } else
+    alert('Совпадений не найдено');
+}
+</script>
+
+</body>
+</html>
diff --git a/3-more/6-extra/8-range-textrange-selection/setSelection.view/index.html b/3-more/6-extra/8-range-textrange-selection/setSelection.view/index.html
new file mode 100755
index 00000000..11e2d8d4
--- /dev/null
+++ b/3-more/6-extra/8-range-textrange-selection/setSelection.view/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+
+<div id="ex5" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
+  Снова будем выделять <span>бабулю</span>, на этот раз без поиска.
+</div>
+<div>
+  <input onclick="setSelection()" type="button" value="Выделить бабулю">
+</div>
+<script>
+function setSelection() {
+  var target = document.getElementById('ex5').getElementsByTagName('span')[0];
+  var rng, sel;
+  if ( document.createRange ) {
+    rng = document.createRange();
+    rng.selectNode( target )
+    sel = window.getSelection();
+    sel.removeAllRanges();
+    sel.addRange( rng );
+  } else {
+    var rng = document.body.createTextRange();
+    rng.moveToElementText( target );
+    rng.select();
+  }
+}
+</script>
+
+
+</body>
+</html>
diff --git a/3-more/6-extra/9-drag-and-drop-plus/DragAvatar.js b/3-more/6-extra/9-drag-and-drop-plus/DragAvatar.js
new file mode 100755
index 00000000..30cf95c2
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/DragAvatar.js
@@ -0,0 +1,83 @@
+/**
+ * "Аватар" - элемент, который перетаскивается.
+ *
+ * В простейшем случае аватаром является сам переносимый элемент
+ * Также аватар может быть клонированным элементом
+ * Также аватар может быть иконкой и вообще чем угодно.
+ */
+function DragAvatar(dragZone, dragElem) {
+  /** "родительская" зона переноса */
+  this._dragZone = dragZone;
+
+  /**
+   * подэлемент родительской зоны, к которому относится аватар
+   * по умолчанию - элемент, соответствующий всей зоне
+   * может быть уточнен в initFromEvent
+   */
+  this._dragZoneElem = dragElem;
+
+  /**
+   * Сам элемент аватара, который будет носиться по экрану.
+   * Инициализуется в initFromEvent
+   */
+  this._elem = dragElem;
+}
+
+/**
+ * Инициализовать this._elem и позиционировать его
+ * При необходимости уточнить this._dragZoneElem
+ * @param downX Координата X нажатия мыши
+ * @param downY Координата Y нажатия мыши
+ * @param event Текущее событие мыши
+ */
+DragAvatar.prototype.initFromEvent = function(downX, downY, event) {
+  /* override */
+};
+
+/**
+ * Возвращает информацию о переносимом элементе для DropTarget
+ * @param event
+ */
+DragAvatar.prototype.getDragInfo = function(event) {
+  // тут может быть еще какая-то информация, необходимая для обработки конца или процесса переноса
+  return {
+    elem: this._elem,
+    dragZoneElem: this._dragZoneElem,
+    dragZone: this._dragZone
+  };
+};
+
+/**
+ * Возвращает текущий самый глубокий DOM-элемент под this._elem
+ * Приватное свойство _currentTargetElem обновляется при каждом передвижении
+ */
+DragAvatar.prototype.getTargetElem = function() {
+  return this._currentTargetElem;
+};
+
+/**
+ * При каждом движении мыши перемещает this._elem
+ * и записывает текущий элемент под this._elem в _currentTargetElem
+ * @param event
+ */
+DragAvatar.prototype.onDragMove = function(event) {
+  this._elem.style.left = event.pageX - this._shiftX + 'px';
+  this._elem.style.top = event.pageY - this._shiftY + 'px';
+
+  this._currentTargetElem = getElementUnderClientXY(this._elem, event.clientX, event.clientY);
+};
+
+/**
+ * Действия с аватаром, когда перенос не удался
+ * Например, можно вернуть элемент обратно или уничтожить
+ */
+DragAvatar.prototype.onDragCancel = function() {
+  /* override */
+};
+
+/**
+ * Действия с аватаром после успешного переноса
+ */
+DragAvatar.prototype.onDragEnd = function() {
+  /* override */
+};
diff --git a/3-more/6-extra/9-drag-and-drop-plus/DragManager.js b/3-more/6-extra/9-drag-and-drop-plus/DragManager.js
new file mode 100755
index 00000000..3da60c4e
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/DragManager.js
@@ -0,0 +1,120 @@
+var dragManager = new function() {
+
+  var dragZone, avatar, dropTarget;
+  var downX, downY;
+
+  var self = this;
+
+  function onMouseDown(e){
+
+    if (e.which != 1 ) { // не левой кнопкой
+      return false;
+    }
+
+    dragZone = findDragZone(e);
+
+    if (!dragZone) {
+	    return;
+    }
+
+    // запомним, что элемент нажат на текущих координатах pageX/pageY
+    downX = e.pageX;
+    downY = e.pageY;
+
+    return false;
+  }
+
+  function onMouseMove(e) {
+    if (!dragZone) return; // элемент не зажат
+
+    if ( !avatar ) { // элемент нажат, но пока не начали его двигать
+      if ( Math.abs(e.pageX-downX) < 3 && Math.abs(e.pageY-downY) < 3 ) {
+        return;
+      }
+      // попробовать захватить элемент
+      avatar = dragZone.onDragStart(downX, downY, e);
+
+      if (!avatar) { // не получилось, значит перенос продолжать нельзя
+        cleanUp(); // очистить приватные переменные, связанные с переносом
+        return;
+      }
+    }
+
+    // отобразить перенос объекта, перевычислить текущий элемент под курсором
+    avatar.onDragMove(e);
+
+    // найти новый dropTarget под курсором: newDropTarget
+    // текущий dropTarget остался от прошлого mousemove
+    // *оба значения: и newDropTarget и dropTarget могут быть null
+    var newDropTarget = findDropTarget(e);
+
+    if (newDropTarget != dropTarget) {
+      // уведомить старую и новую зоны-цели о том, что с них ушли/на них зашли
+      dropTarget && dropTarget.onDragLeave(newDropTarget, avatar, e);
+      newDropTarget && newDropTarget.onDragEnter(dropTarget, avatar, e);
+    }
+
+    dropTarget = newDropTarget;
+
+    dropTarget && dropTarget.onDragMove(avatar, e);
+
+    return false;
+  }
+
+  function onMouseUp(e) {
+
+    if (e.which != 1 ) { // не левой кнопкой
+      return false;
+    }
+
+    if (avatar) { // если уже начали передвигать
+
+      if (dropTarget) {
+        // завершить перенос и избавиться от аватара, если это нужно
+        // эта функция обязана вызвать avatar.onDragEnd/onDragCancel
+        dropTarget.onDragEnd(avatar, e);
+      } else {
+        avatar.onDragCancel();
+      }
+
+    }
+
+    cleanUp();
+  }
+
+  function cleanUp() {
+    // очистить все промежуточные объекты
+    dragZone = avatar = dropTarget = null;
+  }
+
+  function findDragZone(event) {
+    var elem = event.target;
+    while(elem != document && !elem.dragZone) {
+      elem = elem.parentNode;
+    }
+    return elem.dragZone;
+  }
+
+  function findDropTarget(event) {
+    // получить элемент под аватаром
+    var elem = avatar.getTargetElem();
+
+    while(elem != document && !elem.dropTarget) {
+      elem = elem.parentNode;
+    }
+
+    if (!elem.dropTarget) {
+      return null;
+    }
+
+    return elem.dropTarget;
+  }
+
+  document.ondragstart = function() {
+    return false;
+  }
+
+  document.onmousemove = onMouseMove;
+  document.onmouseup = onMouseUp;
+  document.onmousedown = onMouseDown;
+};
diff --git a/3-more/6-extra/9-drag-and-drop-plus/DragZone.js b/3-more/6-extra/9-drag-and-drop-plus/DragZone.js
new file mode 100755
index 00000000..33c1a28f
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/DragZone.js
@@ -0,0 +1,41 @@
+/**
+ * Зона, из которой можно переносить объекты
+ * Умеет обрабатывать начало переноса на себе и создавать "аватар" 
+ * @param elem DOM-элемент, к которому привязана зона
+ */
+function DragZone(elem) {
+  elem.dragZone = this;
+  this._elem = elem;
+}
+
+/**
+ * Создать аватар, соответствующий зоне.
+ * У разных зон могут быть разные типы аватаров
+ */
+DragZone.prototype._makeAvatar = function() {
+  /* override */
+};
+
+/**
+ * Обработать начало переноса.
+ *
+ * Получает координаты изначального нажатия мышки, событие.
+ *
+ * @param downX Координата изначального нажатия по X
+ * @param downY Координата изначального нажатия по Y
+ * @param event текущее событие мыши
+ *
+ * @return аватар или false, если захватить с данной точки ничего нельзя
+ */
+DragZone.prototype.onDragStart = function(downX, downY, event) {
+
+  var avatar = this._makeAvatar();
+
+  if (!avatar.initFromEvent(downX, downY, event)) {
+    return false;
+  }
+
+  return avatar;
+};
+
+
diff --git a/3-more/6-extra/9-drag-and-drop-plus/DropTarget.js b/3-more/6-extra/9-drag-and-drop-plus/DropTarget.js
new file mode 100755
index 00000000..0ddde8de
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/DropTarget.js
@@ -0,0 +1,88 @@
+/**
+ * Зона, в которую объекты можно класть
+ * Занимается индикацией передвижения по себе, добавлением в себя
+ */
+function DropTarget(elem) {
+  elem.dropTarget = this;
+  this._elem = elem;
+
+  /**
+   * Подэлемент, над которым в настоящий момент находится аватар
+   */
+  this._targetElem = null;
+}
+
+/**
+ * Возвращает DOM-подэлемент, над которым сейчас пролетает аватар
+ *
+ * @return DOM-элемент, на который можно положить или undefined
+ */
+DropTarget.prototype._getTargetElem = function(avatar, event) {
+  return this._elem;
+};
+
+/**
+ * Спрятать индикацию переноса
+ * Вызывается, когда аватар уходит с текущего this._targetElem
+ */
+DropTarget.prototype._hideHoverIndication = function(avatar) {
+  /* override */
+};
+
+/**
+ * Показать индикацию переноса
+ * Вызывается, когда аватар пришел на новый this._targetElem
+ */
+DropTarget.prototype._showHoverIndication = function(avatar) {
+  /* override */
+};
+
+/**
+ * Метод вызывается при каждом движении аватара
+ */
+DropTarget.prototype.onDragMove = function(avatar, event) {
+
+  var newTargetElem = this._getTargetElem(avatar, event);
+
+  if (this._targetElem != newTargetElem) {
+
+    this._hideHoverIndication(avatar);
+    this._targetElem = newTargetElem;
+    this._showHoverIndication(avatar);
+  }
+};
+
+/**
+ * Завершение переноса.
+ * Алгоритм обработки (переопределить функцию и написать в потомке):
+ * 1. Получить данные переноса из avatar.getDragInfo()
+ * 2. Определить, возможен ли перенос на _targetElem (если он есть)
+ * 3. Вызвать avatar.onDragEnd() или avatar.onDragCancel()
+ *  Если нужно подтвердить перенос запросом на сервер, то avatar.onDragEnd(),
+ *  а затем асинхронно, если сервер вернул ошибку, avatar.onDragCancel()
+ *  При этом аватар должен уметь "откатываться" после onDragEnd.
+ *
+ * При любом завершении этого метода нужно (делается ниже):
+ *  снять текущую индикацию переноса
+ *  обнулить this._targetElem
+ */
+DropTarget.prototype.onDragEnd = function(avatar, event) {
+  this._hideHoverIndication(avatar);
+  this._targetElem = null;
+};
+
+/**
+ * Вход аватара в DropTarget
+ */
+DropTarget.prototype.onDragEnter = function(fromDropTarget, avatar, event) {
+};
+
+/**
+ * Выход аватара из DropTarget
+ */
+DropTarget.prototype.onDragLeave = function(toDropTarget, avatar, event) {
+  this._hideHoverIndication();
+  this._targetElem = null;
+};
+
+
diff --git a/3-more/6-extra/9-drag-and-drop-plus/TreeDragAvatar.js b/3-more/6-extra/9-drag-and-drop-plus/TreeDragAvatar.js
new file mode 100755
index 00000000..6682983c
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/TreeDragAvatar.js
@@ -0,0 +1,45 @@
+
+function TreeDragAvatar(dragZone, dragElem) {
+  DragAvatar.apply(this, arguments);
+}
+
+extend(TreeDragAvatar, DragAvatar);
+
+TreeDragAvatar.prototype.initFromEvent = function(downX, downY, event) {
+  if (event.target.tagName != 'SPAN') return false;
+
+  this._dragZoneElem = event.target;
+  var elem = this._elem = this._dragZoneElem.cloneNode(true);
+  elem.className = 'avatar';
+
+  // создать вспомогательные свойства shiftX/shiftY
+  var coords = getCoords(this._dragZoneElem);
+  this._shiftX = downX - coords.left;
+  this._shiftY = downY - coords.top;
+
+  // инициировать начало переноса
+  document.body.appendChild(elem);
+  elem.style.zIndex = 9999;
+  elem.style.position = 'absolute';
+
+  return true;
+};
+
+/**
+ * Вспомогательный метод
+ */
+TreeDragAvatar.prototype._destroy = function() {
+  this._elem.parentNode.removeChild(this._elem);
+};
+
+/**
+ * При любом исходе переноса элемент-клон больше не нужен
+ */
+TreeDragAvatar.prototype.onDragCancel = function() {
+  this._destroy();
+};
+
+TreeDragAvatar.prototype.onDragEnd = function() {
+  this._destroy();
+};
+
diff --git a/3-more/6-extra/9-drag-and-drop-plus/TreeDragZone.js b/3-more/6-extra/9-drag-and-drop-plus/TreeDragZone.js
new file mode 100755
index 00000000..2022f64f
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/TreeDragZone.js
@@ -0,0 +1,10 @@
+
+function TreeDragZone(elem) {
+  DragZone.apply(this, arguments);
+}
+
+extend(TreeDragZone, DragZone);
+
+TreeDragZone.prototype._makeAvatar = function() {
+  return new TreeDragAvatar(this, this._elem);
+};
diff --git a/3-more/6-extra/9-drag-and-drop-plus/TreeDropTarget.js b/3-more/6-extra/9-drag-and-drop-plus/TreeDropTarget.js
new file mode 100755
index 00000000..e54b378e
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/TreeDropTarget.js
@@ -0,0 +1,73 @@
+ 
+function TreeDropTarget(elem) {
+  TreeDropTarget.parent.constructor.apply(this, arguments);
+}
+
+extend(TreeDropTarget, DropTarget);
+
+TreeDropTarget.prototype._showHoverIndication = function() {
+  this._targetElem && this._targetElem.classList.add('hover');
+};
+
+TreeDropTarget.prototype._hideHoverIndication = function() {
+  this._targetElem && this._targetElem.classList.remove('hover');
+};
+
+TreeDropTarget.prototype._getTargetElem = function(avatar, event) {
+  var target = avatar.getTargetElem();
+  if (target.tagName != 'SPAN') {
+    return;
+  }
+
+  // проверить, может быть перенос узла внутрь самого себя или в себя?
+  var elemToMove = avatar.getDragInfo(event).dragZoneElem.parentNode;
+
+  var elem = target;
+  while(elem) {
+    if (elem == elemToMove) return; // попытка перенести родителя в потомка
+    elem = elem.parentNode;
+  }
+
+  return target;
+};
+
+TreeDropTarget.prototype.onDragEnd = function(avatar, event) {
+
+  if (!this._targetElem) {
+    // перенос закончился вне подходящей точки приземления
+    avatar.onDragCancel();
+    return;
+  }
+
+  this._hideHoverIndication();
+
+  // получить информацию об объекте переноса
+  var avatarInfo = avatar.getDragInfo(event);
+
+  avatar.onDragEnd(); // аватар больше не нужен, перенос успешен
+
+  // вставить элемент в детей в отсортированном порядке
+  var elemToMove = avatarInfo.dragZoneElem.parentNode; // <LI>
+  var title = avatarInfo.dragZoneElem.innerHTML; // переносимый заголовок
+
+  // получить контейнер для узлов дерева, соответствующий точке преземления
+  var ul = this._targetElem.parentNode.getElementsByTagName('UL')[0];
+  if (!ul) { // нет детей, создадим контейнер
+    ul = document.createElement('UL');
+    this._targetElem.parentNode.appendChild(ul);
+  }
+
+  // вставить новый узел в нужное место среди потомков, в алфавитном порядке
+  var li = null;
+  for(var i=0; i < ul.children.length; i++) {
+    li = ul.children[i];
+    var childTitle = li.children[0].innerHTML;
+    if (childTitle > title) {
+      break;
+    }
+  }
+
+  ul.insertBefore(elemToMove, li);
+
+  this._targetElem = null;
+};
diff --git a/3-more/6-extra/9-drag-and-drop-plus/article.md b/3-more/6-extra/9-drag-and-drop-plus/article.md
new file mode 100644
index 00000000..b805fec5
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/article.md
@@ -0,0 +1,203 @@
+# Применяем ООП: Drag'n'Drop++
+
+Эта статья представляет собой продолжение статьи [](/drag-and-drop-objects). Она посвящена более гибкой и расширяемой реализации переноса.
+[cut]
+В сложных приложениях Drag'n'Drop обладает рядом особенностей:
+<ol>
+<li>Перетаскиваются *элементы* из *зоны переноса `dragZone`* в *зону-цель `dropTarget`*. При этом сама зона не переносится.
+
+Например -- два списка, нужен перенос элемента из одного в другой. В этом случае один список является зоной переноса, второй -- зоной-целью. 
+
+Возможно, что перенос осуществляется внутри одного и того же списка. При этом  `dragZone == dropTarget`.
+</li>
+<li>На странице может быть несколько разных зон переноса и зон-целей.</li>
+<li>Обработка завершения переноса может быть асинхронной, с уведомлением сервера.</li>
+<li>Должно быть легко добавить новый тип зоны переноса или зоны-цели, а также расширить поведение существующей.</li>
+<li>Фреймворк для переноса должен быть расширяемым с учётом сложных сценариев.</li>
+</ol>
+
+Всё это вполне реализуемо. Но для этого фреймворк, описанный в статье [](/drag-and-drop-objects), нужно отрефакторить, и разделить на сущности.
+
+## Основные сущности
+
+Всего будет 4 сущности:
+
+<dl>
+<dt>`DragZone`</dt>
+<dd>Зона переноса. С нее начинается перенос. Она принимает нажатие мыши и генерирует аватар нужного типа.</dd>
+<dt>`DragAvatar`</dt>
+<dd>Переносимый объект. Предоставляет доступ к информации о том, что переносится. Умеет двигать себя по экрану. В зависимости от вида переноса, может что-то делать с собой в конце, например, самоуничтожаться.</dd>
+<dt>`DropTarget`</dt>
+<dd>Зона-цель, на которую можно положить. В процессе переноса аватара над ней умеет рисовать на себе предполагаемое "место приземления". Обрабатывает окончание переноса.</dd>
+<dt>`dragManager`</dt>
+<dd>Единый объект, который стоит над всеми ними, ставит обработчики `mousedown/mousemove/mouseup` и управляет процессом. В терминах ООП, это не класс, а [объект-синглтон](http://ru.wikipedia.org/wiki/%D0%9E%D0%B4%D0%B8%D0%BD%D0%BE%D1%87%D0%BA%D0%B0_%28%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F%29), поэтому он с маленькой буквы.</dd>
+</dl>
+
+На макете страницы ниже возможен перенос студентов из левого списка -- вправо, в одну из команд или в "корзину":
+
+<img src="dragzonetarget.png">
+
+Здесь левый список является зоной переноса `ListDragZone`, а правые списки -- это несколько зон-целей `ListDropTarget`. Кроме того, корзина также является зоной-целью отдельного типа `RemoveDropTarget`.
+
+## Пример
+
+В этой статье мы реализуем пример, когда узлы дерева можно переносить внутри него. То есть, дерево, которое является одновременно `TreeDragZone` и `TreeDropTarget`.
+
+Структура дерева будет состоять из вложенных списков с заголовком в `SPAN`:
+
+```html
+<ul>
+  <li><span>Заголовок 1</span>
+    <ul>
+      <li><span>Заголовок 1.1</span></li>
+      <li><span>Заголовок 1.2</span></li>
+      ...
+    </ul>
+  </li>
+  ...
+</ul>
+```
+
+При переносе:
+<ul>
+<li>Для аватара нужно клонировать заголовок узла, на котором было нажатие.</li>
+<li>Узлы, на которые можно положить, при переносе подсвечиваются красным.</li>
+<li>Нельзя перенести узел сам в себя или в своего потомка.</li>
+<li>Дерево само поддерживает сортировку по алфавиту среди узлов.</li>
+<li>Обязательна расширяемость кода, поддержка большого количества узлов и т.п.</li>
+</ul>
+
+[iframe height=450 border=1 src="dragTree"]
+
+## dragManager
+
+Обязанность `dragManager` -- обработка событий мыши и координация всех остальных сущностей в процессе переноса.
+
+**Готовьтесь, дальше будет много кода с комментариями.** 
+
+Следующий код должен быть очевиден по смыслу, если вы читали [предыдущую статью](/drag-and-drop-objects). Объект взят оттуда, и из него изъята лишняя функциональность, которая перенесена в другие сущности.
+
+Если вызываемые в нём методы `onDrag*` непонятны -- смотрите далее, в описание остальных объектов.
+
+```js
+//+ src="DragManager.js"
+```
+
+## DragZone
+
+Основная задача `DragZone` -- создать аватар и инициализовать его. В зависимости от места, где произошел клик, аватар получит соответствующий подэлемент зоны.
+
+Метод для создания аватара `_makeAvatar` вынесен отдельно, чтобы его легко можно было переопределить и подставить собственный тип аватара.
+
+```js
+//+ src="DragZone.js"
+```
+
+### TreeDragZone
+
+Объект зоны переноса для дерева, по существу, не вносит ничего нового, по сравнению с `DragZone`.
+
+Он только переопределяет `_makeAvatar` для создания `TreeDragAvatar`.
+
+```js
+//+ src="TreeDragZone.js"
+```
+
+## DragAvatar
+
+Аватар создается только зоной переноса при начале Drag'n'Drop. Он содержит всю необходимую информацию об объекте, который переносится. 
+
+В дальнейшем вся работа происходит *только с аватаром*, сама зона напрямую не вызывается.
+
+У аватара есть три основных свойства:
+<dl>
+<dt>`_dragZone`</dt>
+<dd>Зона переноса, которая его создала.</dd>
+<dt>`_dragZoneElem`</dt>
+<dd>Элемент, соответствующий аватару в зоне переноса. По умолчанию -- DOM-элемент всей зоны. Это подходит в тех случаях, когда зона перетаскивается только целиком.
+При инициализации аватара значение этого свойства быть уточнено, например изменено на подэлемент списка, который перетаскивается.</dd>
+<dt>`_elem`</dt>
+<dd>Основной элемент аватара, который будет двигаться по экрану. По умолчанию  равен `_dragZoneElem`, т.е мы переносим сам элемент.
+ 
+При инициализации мы можем также склонировать `_dragZoneElem`, или создать своё красивое представление переносимого элемента и поместить его в `_elem`.</dd>
+</dl>
+
+```js
+//+ src="DragAvatar.js"
+```
+
+### TreeDragAvatar
+
+Основные изменения -- в методе `initFromEvent`, который создает аватар из узла, на котором был клик. 
+
+Обратите внимание, возможно что клик был не на заголовке `SPAN`, а просто где-то на дереве. В этом случае `initFromEvent` возвращает `false` и перенос не начинается.
+
+```js
+//+ src="TreeDragAvatar.js"
+```
+
+## DropTarget
+
+Именно на `DropTarget` ложится работа по отображению предполагаемой "точки приземления" аватара, а также, по завершению переноса, обработка результата. 
+
+Как правило, `DropTarget` принимает переносимый узел в себя, а вот как конкретно организован процесс вставки -- нужно описать в классе-наследнике. Разные типы зон делают разное при вставке: `TreeDropTarget` вставляет элемент в качестве потомка, а `RemoveDropTarget` -- удаляет.
+
+```js
+//+ src="DropTarget.js"
+```
+
+Как видно, из кода выше, по умолчанию `DropTarget` занимается только отслеживанием и индикацией "точки приземления". По умолчанию, единственной возможной "точкой приземления" является сам элемент зоны. В более сложных ситуациях это может быть подэлемент.
+
+Для применения в реальности необходимо как минимум переопределить обработку результата переноса в `onDragEnd`. 
+
+### TreeDropTarget
+
+`TreeDropTarget` содержит код, специфичный для дерева:
+<ul>
+<li>Индикацию переноса над элементом: методы `_showHoverIndication` и `_hideHoverIndication`.</li>
+<li>Получение текущей точки приземления `_targetElem` в методе `_getTargetElem`. Ей может быть только заголовок узла дерева, причем дополнительно проверяется, что это не потомок переносимого узла.</li>
+<li>Обработка успешного переноса в `onDragEnd`, вставка исходного узла `avatar.dragZoneElem` в узел, соответствующий `_targetElem`.</li>
+</ul>
+
+```js
+//+ src="TreeDropTarget.js"
+```
+
+## Итого 
+
+
+Реализация Drag'n'Drop оказалась отличным способом применить ООП в JavaScript.
+
+Исходный код примера целиком находится [edit src="dragTree"]в песочнице[/edit].
+
+<ul>
+<li>Синглтон `dragManager` и классы `Drag*` задают общий фреймворк. От них наследуются конкретные объекты. Для создания новых зон достаточно унаследовать стандартные классы и переопределить их. </li>
+<li>Мини-фреймворк для Drag'n'Drop, который здесь представлен, является переписанным и обновленным вариантом реальной библиотеки, на основе которой было создано много успешных скриптов переноса. 
+
+В зависимости от ваших потребностей, вы можете расширить его, добавить перенос нескольких объектов одновременно, поддержку событий и другие возможности.</li>
+<li>На сегодняшний день в каждом серьезном фреймворке есть библиотека для Drag'n'Drop. Она работает похожим образом, но сделать универсальный перенос -- штука непростая. Зачастую он перегружен лишним функционалом, либо наоборот -- недостаточно расширяем в нужных местах. 
+Понимание, как это все может быть устроено, на примере этой статьи, может помочь в адаптации существующего кода под ваши потребности.</li>
+</ul>
+
+[head]
+<script>
+function getElementUnderClientXY(elem, clientX, clientY) {
+  var display = elem.style.display || '';
+  elem.style.display = 'none';
+
+  var target = document.elementFromPoint(clientX, clientY);
+
+  elem.style.display = display;
+
+  if (!target || target == document) { 
+    target = document.body; 
+  }
+
+  return target;
+}
+
+</script>
+[/head]
+[libs]
+getCoords.js
+[/libs]
\ No newline at end of file
diff --git a/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/DragAvatar.js b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/DragAvatar.js
new file mode 100755
index 00000000..30cf95c2
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/DragAvatar.js
@@ -0,0 +1,83 @@
+/**
+ * "Аватар" - элемент, который перетаскивается.
+ *
+ * В простейшем случае аватаром является сам переносимый элемент
+ * Также аватар может быть клонированным элементом
+ * Также аватар может быть иконкой и вообще чем угодно.
+ */
+function DragAvatar(dragZone, dragElem) {
+  /** "родительская" зона переноса */
+  this._dragZone = dragZone;
+
+  /**
+   * подэлемент родительской зоны, к которому относится аватар
+   * по умолчанию - элемент, соответствующий всей зоне
+   * может быть уточнен в initFromEvent
+   */
+  this._dragZoneElem = dragElem;
+
+  /**
+   * Сам элемент аватара, который будет носиться по экрану.
+   * Инициализуется в initFromEvent
+   */
+  this._elem = dragElem;
+}
+
+/**
+ * Инициализовать this._elem и позиционировать его
+ * При необходимости уточнить this._dragZoneElem
+ * @param downX Координата X нажатия мыши
+ * @param downY Координата Y нажатия мыши
+ * @param event Текущее событие мыши
+ */
+DragAvatar.prototype.initFromEvent = function(downX, downY, event) {
+  /* override */
+};
+
+/**
+ * Возвращает информацию о переносимом элементе для DropTarget
+ * @param event
+ */
+DragAvatar.prototype.getDragInfo = function(event) {
+  // тут может быть еще какая-то информация, необходимая для обработки конца или процесса переноса
+  return {
+    elem: this._elem,
+    dragZoneElem: this._dragZoneElem,
+    dragZone: this._dragZone
+  };
+};
+
+/**
+ * Возвращает текущий самый глубокий DOM-элемент под this._elem
+ * Приватное свойство _currentTargetElem обновляется при каждом передвижении
+ */
+DragAvatar.prototype.getTargetElem = function() {
+  return this._currentTargetElem;
+};
+
+/**
+ * При каждом движении мыши перемещает this._elem
+ * и записывает текущий элемент под this._elem в _currentTargetElem
+ * @param event
+ */
+DragAvatar.prototype.onDragMove = function(event) {
+  this._elem.style.left = event.pageX - this._shiftX + 'px';
+  this._elem.style.top = event.pageY - this._shiftY + 'px';
+
+  this._currentTargetElem = getElementUnderClientXY(this._elem, event.clientX, event.clientY);
+};
+
+/**
+ * Действия с аватаром, когда перенос не удался
+ * Например, можно вернуть элемент обратно или уничтожить
+ */
+DragAvatar.prototype.onDragCancel = function() {
+  /* override */
+};
+
+/**
+ * Действия с аватаром после успешного переноса
+ */
+DragAvatar.prototype.onDragEnd = function() {
+  /* override */
+};
diff --git a/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/DragManager.js b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/DragManager.js
new file mode 100755
index 00000000..3da60c4e
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/DragManager.js
@@ -0,0 +1,120 @@
+var dragManager = new function() {
+
+  var dragZone, avatar, dropTarget;
+  var downX, downY;
+
+  var self = this;
+
+  function onMouseDown(e){
+
+    if (e.which != 1 ) { // не левой кнопкой
+      return false;
+    }
+
+    dragZone = findDragZone(e);
+
+    if (!dragZone) {
+	    return;
+    }
+
+    // запомним, что элемент нажат на текущих координатах pageX/pageY
+    downX = e.pageX;
+    downY = e.pageY;
+
+    return false;
+  }
+
+  function onMouseMove(e) {
+    if (!dragZone) return; // элемент не зажат
+
+    if ( !avatar ) { // элемент нажат, но пока не начали его двигать
+      if ( Math.abs(e.pageX-downX) < 3 && Math.abs(e.pageY-downY) < 3 ) {
+        return;
+      }
+      // попробовать захватить элемент
+      avatar = dragZone.onDragStart(downX, downY, e);
+
+      if (!avatar) { // не получилось, значит перенос продолжать нельзя
+        cleanUp(); // очистить приватные переменные, связанные с переносом
+        return;
+      }
+    }
+
+    // отобразить перенос объекта, перевычислить текущий элемент под курсором
+    avatar.onDragMove(e);
+
+    // найти новый dropTarget под курсором: newDropTarget
+    // текущий dropTarget остался от прошлого mousemove
+    // *оба значения: и newDropTarget и dropTarget могут быть null
+    var newDropTarget = findDropTarget(e);
+
+    if (newDropTarget != dropTarget) {
+      // уведомить старую и новую зоны-цели о том, что с них ушли/на них зашли
+      dropTarget && dropTarget.onDragLeave(newDropTarget, avatar, e);
+      newDropTarget && newDropTarget.onDragEnter(dropTarget, avatar, e);
+    }
+
+    dropTarget = newDropTarget;
+
+    dropTarget && dropTarget.onDragMove(avatar, e);
+
+    return false;
+  }
+
+  function onMouseUp(e) {
+
+    if (e.which != 1 ) { // не левой кнопкой
+      return false;
+    }
+
+    if (avatar) { // если уже начали передвигать
+
+      if (dropTarget) {
+        // завершить перенос и избавиться от аватара, если это нужно
+        // эта функция обязана вызвать avatar.onDragEnd/onDragCancel
+        dropTarget.onDragEnd(avatar, e);
+      } else {
+        avatar.onDragCancel();
+      }
+
+    }
+
+    cleanUp();
+  }
+
+  function cleanUp() {
+    // очистить все промежуточные объекты
+    dragZone = avatar = dropTarget = null;
+  }
+
+  function findDragZone(event) {
+    var elem = event.target;
+    while(elem != document && !elem.dragZone) {
+      elem = elem.parentNode;
+    }
+    return elem.dragZone;
+  }
+
+  function findDropTarget(event) {
+    // получить элемент под аватаром
+    var elem = avatar.getTargetElem();
+
+    while(elem != document && !elem.dropTarget) {
+      elem = elem.parentNode;
+    }
+
+    if (!elem.dropTarget) {
+      return null;
+    }
+
+    return elem.dropTarget;
+  }
+
+  document.ondragstart = function() {
+    return false;
+  }
+
+  document.onmousemove = onMouseMove;
+  document.onmouseup = onMouseUp;
+  document.onmousedown = onMouseDown;
+};
diff --git a/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/DragZone.js b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/DragZone.js
new file mode 100755
index 00000000..33c1a28f
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/DragZone.js
@@ -0,0 +1,41 @@
+/**
+ * Зона, из которой можно переносить объекты
+ * Умеет обрабатывать начало переноса на себе и создавать "аватар" 
+ * @param elem DOM-элемент, к которому привязана зона
+ */
+function DragZone(elem) {
+  elem.dragZone = this;
+  this._elem = elem;
+}
+
+/**
+ * Создать аватар, соответствующий зоне.
+ * У разных зон могут быть разные типы аватаров
+ */
+DragZone.prototype._makeAvatar = function() {
+  /* override */
+};
+
+/**
+ * Обработать начало переноса.
+ *
+ * Получает координаты изначального нажатия мышки, событие.
+ *
+ * @param downX Координата изначального нажатия по X
+ * @param downY Координата изначального нажатия по Y
+ * @param event текущее событие мыши
+ *
+ * @return аватар или false, если захватить с данной точки ничего нельзя
+ */
+DragZone.prototype.onDragStart = function(downX, downY, event) {
+
+  var avatar = this._makeAvatar();
+
+  if (!avatar.initFromEvent(downX, downY, event)) {
+    return false;
+  }
+
+  return avatar;
+};
+
+
diff --git a/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/DropTarget.js b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/DropTarget.js
new file mode 100755
index 00000000..0ddde8de
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/DropTarget.js
@@ -0,0 +1,88 @@
+/**
+ * Зона, в которую объекты можно класть
+ * Занимается индикацией передвижения по себе, добавлением в себя
+ */
+function DropTarget(elem) {
+  elem.dropTarget = this;
+  this._elem = elem;
+
+  /**
+   * Подэлемент, над которым в настоящий момент находится аватар
+   */
+  this._targetElem = null;
+}
+
+/**
+ * Возвращает DOM-подэлемент, над которым сейчас пролетает аватар
+ *
+ * @return DOM-элемент, на который можно положить или undefined
+ */
+DropTarget.prototype._getTargetElem = function(avatar, event) {
+  return this._elem;
+};
+
+/**
+ * Спрятать индикацию переноса
+ * Вызывается, когда аватар уходит с текущего this._targetElem
+ */
+DropTarget.prototype._hideHoverIndication = function(avatar) {
+  /* override */
+};
+
+/**
+ * Показать индикацию переноса
+ * Вызывается, когда аватар пришел на новый this._targetElem
+ */
+DropTarget.prototype._showHoverIndication = function(avatar) {
+  /* override */
+};
+
+/**
+ * Метод вызывается при каждом движении аватара
+ */
+DropTarget.prototype.onDragMove = function(avatar, event) {
+
+  var newTargetElem = this._getTargetElem(avatar, event);
+
+  if (this._targetElem != newTargetElem) {
+
+    this._hideHoverIndication(avatar);
+    this._targetElem = newTargetElem;
+    this._showHoverIndication(avatar);
+  }
+};
+
+/**
+ * Завершение переноса.
+ * Алгоритм обработки (переопределить функцию и написать в потомке):
+ * 1. Получить данные переноса из avatar.getDragInfo()
+ * 2. Определить, возможен ли перенос на _targetElem (если он есть)
+ * 3. Вызвать avatar.onDragEnd() или avatar.onDragCancel()
+ *  Если нужно подтвердить перенос запросом на сервер, то avatar.onDragEnd(),
+ *  а затем асинхронно, если сервер вернул ошибку, avatar.onDragCancel()
+ *  При этом аватар должен уметь "откатываться" после onDragEnd.
+ *
+ * При любом завершении этого метода нужно (делается ниже):
+ *  снять текущую индикацию переноса
+ *  обнулить this._targetElem
+ */
+DropTarget.prototype.onDragEnd = function(avatar, event) {
+  this._hideHoverIndication(avatar);
+  this._targetElem = null;
+};
+
+/**
+ * Вход аватара в DropTarget
+ */
+DropTarget.prototype.onDragEnter = function(fromDropTarget, avatar, event) {
+};
+
+/**
+ * Выход аватара из DropTarget
+ */
+DropTarget.prototype.onDragLeave = function(toDropTarget, avatar, event) {
+  this._hideHoverIndication();
+  this._targetElem = null;
+};
+
+
diff --git a/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/TreeDragAvatar.js b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/TreeDragAvatar.js
new file mode 100755
index 00000000..6682983c
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/TreeDragAvatar.js
@@ -0,0 +1,45 @@
+
+function TreeDragAvatar(dragZone, dragElem) {
+  DragAvatar.apply(this, arguments);
+}
+
+extend(TreeDragAvatar, DragAvatar);
+
+TreeDragAvatar.prototype.initFromEvent = function(downX, downY, event) {
+  if (event.target.tagName != 'SPAN') return false;
+
+  this._dragZoneElem = event.target;
+  var elem = this._elem = this._dragZoneElem.cloneNode(true);
+  elem.className = 'avatar';
+
+  // создать вспомогательные свойства shiftX/shiftY
+  var coords = getCoords(this._dragZoneElem);
+  this._shiftX = downX - coords.left;
+  this._shiftY = downY - coords.top;
+
+  // инициировать начало переноса
+  document.body.appendChild(elem);
+  elem.style.zIndex = 9999;
+  elem.style.position = 'absolute';
+
+  return true;
+};
+
+/**
+ * Вспомогательный метод
+ */
+TreeDragAvatar.prototype._destroy = function() {
+  this._elem.parentNode.removeChild(this._elem);
+};
+
+/**
+ * При любом исходе переноса элемент-клон больше не нужен
+ */
+TreeDragAvatar.prototype.onDragCancel = function() {
+  this._destroy();
+};
+
+TreeDragAvatar.prototype.onDragEnd = function() {
+  this._destroy();
+};
+
diff --git a/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/TreeDragZone.js b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/TreeDragZone.js
new file mode 100755
index 00000000..2022f64f
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/TreeDragZone.js
@@ -0,0 +1,10 @@
+
+function TreeDragZone(elem) {
+  DragZone.apply(this, arguments);
+}
+
+extend(TreeDragZone, DragZone);
+
+TreeDragZone.prototype._makeAvatar = function() {
+  return new TreeDragAvatar(this, this._elem);
+};
diff --git a/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/TreeDropTarget.js b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/TreeDropTarget.js
new file mode 100755
index 00000000..e54b378e
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/TreeDropTarget.js
@@ -0,0 +1,73 @@
+ 
+function TreeDropTarget(elem) {
+  TreeDropTarget.parent.constructor.apply(this, arguments);
+}
+
+extend(TreeDropTarget, DropTarget);
+
+TreeDropTarget.prototype._showHoverIndication = function() {
+  this._targetElem && this._targetElem.classList.add('hover');
+};
+
+TreeDropTarget.prototype._hideHoverIndication = function() {
+  this._targetElem && this._targetElem.classList.remove('hover');
+};
+
+TreeDropTarget.prototype._getTargetElem = function(avatar, event) {
+  var target = avatar.getTargetElem();
+  if (target.tagName != 'SPAN') {
+    return;
+  }
+
+  // проверить, может быть перенос узла внутрь самого себя или в себя?
+  var elemToMove = avatar.getDragInfo(event).dragZoneElem.parentNode;
+
+  var elem = target;
+  while(elem) {
+    if (elem == elemToMove) return; // попытка перенести родителя в потомка
+    elem = elem.parentNode;
+  }
+
+  return target;
+};
+
+TreeDropTarget.prototype.onDragEnd = function(avatar, event) {
+
+  if (!this._targetElem) {
+    // перенос закончился вне подходящей точки приземления
+    avatar.onDragCancel();
+    return;
+  }
+
+  this._hideHoverIndication();
+
+  // получить информацию об объекте переноса
+  var avatarInfo = avatar.getDragInfo(event);
+
+  avatar.onDragEnd(); // аватар больше не нужен, перенос успешен
+
+  // вставить элемент в детей в отсортированном порядке
+  var elemToMove = avatarInfo.dragZoneElem.parentNode; // <LI>
+  var title = avatarInfo.dragZoneElem.innerHTML; // переносимый заголовок
+
+  // получить контейнер для узлов дерева, соответствующий точке преземления
+  var ul = this._targetElem.parentNode.getElementsByTagName('UL')[0];
+  if (!ul) { // нет детей, создадим контейнер
+    ul = document.createElement('UL');
+    this._targetElem.parentNode.appendChild(ul);
+  }
+
+  // вставить новый узел в нужное место среди потомков, в алфавитном порядке
+  var li = null;
+  for(var i=0; i < ul.children.length; i++) {
+    li = ul.children[i];
+    var childTitle = li.children[0].innerHTML;
+    if (childTitle > title) {
+      break;
+    }
+  }
+
+  ul.insertBefore(elemToMove, li);
+
+  this._targetElem = null;
+};
diff --git a/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/dragTree.css b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/dragTree.css
new file mode 100755
index 00000000..17f2c495
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/dragTree.css
@@ -0,0 +1,20 @@
+#tree span:hover {
+    cursor: pointer;
+    font-weight: bold;
+}
+
+/* #tree span.hover, для приоритета перед :hover также добавлен подселектор */
+#tree span.hover, #tree span.hover:hover {
+    color: red;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+span.avatar {
+    padding: 1px;
+    border:  1px dotted black;
+    background:  white;
+    cursor: pointer;
+    opacity: 0.6;
+    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); /* IE opacity */
+}
diff --git a/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/index.html b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/index.html
new file mode 100755
index 00000000..09dfa6dd
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <script src="lib.js"></script>
+    <script src="DragManager.js"></script>
+    <script src="DragAvatar.js"></script>
+    <script src="DragZone.js"></script>
+    <script src="DropTarget.js"></script>
+    <script src="TreeDragAvatar.js"></script>
+    <script src="TreeDragZone.js"></script>
+    <script src="TreeDropTarget.js"></script>
+    <link rel="stylesheet" type="text/css" href="dragTree.css">
+</head>
+<body>
+
+Возьмите за любой заголовок и поменяйте ему родителя.<br>
+В собственных детей перенести нельзя.<br>
+Потомки всегда отсортированы по алфавиту.
+
+<ul id="tree">
+    <li><span>Древо жизни (сверхмалая часть)</span>
+        <ul>
+            <li><span>Грибы</span>
+                <ul>
+                    <li><span>Древесные</span>
+                        <ul>
+                            <li><span>Чага</span></li>
+                        </ul>
+                    </li>
+                    <li><span>Наземные</span>
+                        <ul>
+                            <li><span>Опята</span></li>
+                            <li><span>Подосиновики</span></li>
+                        </ul>
+
+                    </li>
+                </ul>
+            </li>
+            <li><span>Животные</span>
+                <ul>
+                    <li><span>Земноводные</span>
+                        <ul>
+                            <li><span>Лягушки</span></li>
+                            <li><span>Саламандры</span></li>
+                            <li><span>Тритоны</span></li>
+                        </ul>
+                    </li>
+                    <li><span>Млекопитающие</span>
+                        <ul>
+                            <li><span>Коровы</span></li>
+                            <li><span>Ослы</span></li>
+                            <li><span>Собаки</span></li>
+                            <li><span>Тигры</span></li>
+                        </ul>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+</ul>
+
+<script>
+    var tree = document.getElementById('tree');
+    new TreeDragZone(tree);
+    new TreeDropTarget(tree);
+</script>
+
+</body>
+</html>
diff --git a/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/lib.js b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/lib.js
new file mode 100755
index 00000000..09cdae74
--- /dev/null
+++ b/3-more/6-extra/9-drag-and-drop-plus/dragTree.view/lib.js
@@ -0,0 +1,41 @@
+
+function getCoords(elem) {
+    var box = elem.getBoundingClientRect();
+
+    var body = document.body;
+    var docElem = document.documentElement;
+
+    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
+    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
+
+    var clientTop = docElem.clientTop || body.clientTop || 0;
+    var clientLeft = docElem.clientLeft || body.clientLeft || 0;
+
+    var top  = box.top +  scrollTop - clientTop;
+    var left = box.left + scrollLeft - clientLeft;
+
+    return { top: Math.round(top), left: Math.round(left) };
+}
+
+function getElementUnderClientXY(elem, clientX, clientY) {
+  var display = elem.style.display || '';
+  elem.style.display = 'none';
+
+  var target = document.elementFromPoint(clientX, clientY);
+
+  elem.style.display = display;
+
+  if (!target || target == document) { // это бывает при выносе за границы окна
+    target = document.body; // поправить значение, чтобы был именно элемент
+  }
+
+  return target;
+}
+
+function extend(Child, Parent) {
+    function F() { }
+    F.prototype = Parent.prototype
+    Child.prototype = new F()
+    Child.prototype.constructor = Child
+    Child.parent = Parent.prototype
+}
diff --git a/3-more/6-extra/9-drag-and-drop-plus/dragzonetarget.png b/3-more/6-extra/9-drag-and-drop-plus/dragzonetarget.png
new file mode 100755
index 00000000..11d6ffa6
Binary files /dev/null and b/3-more/6-extra/9-drag-and-drop-plus/dragzonetarget.png differ
diff --git a/3-more/6-extra/index.md b/3-more/6-extra/index.md
new file mode 100644
index 00000000..3d29a3df
--- /dev/null
+++ b/3-more/6-extra/index.md
@@ -0,0 +1,2 @@
+# Разное
+
diff --git a/3-more/7-frames-and-windows/1-window-open/article.md b/3-more/7-frames-and-windows/1-window-open/article.md
new file mode 100644
index 00000000..12c80b0f
--- /dev/null
+++ b/3-more/7-frames-and-windows/1-window-open/article.md
@@ -0,0 +1,205 @@
+# Открытие новых окон
+
+Всплывающее окно ("попап" -- от англ. Popup window) -- один из старейших способов показать пользователю ещё один документ.
+
+В этой статье мы рассмотрим открытие окон и ряд тонких моментов, которые с этим связаны.
+
+[cut]
+
+Простейший пример:
+
+```js
+//+ run
+window.open("http://ya.ru");
+```
+
+...При запуске откроется новое окно с данным URL.
+
+Большинство браузеров по умолчанию создают новую вкладку вместо отдельного окна, но чуть далее мы увидим, что можно и "заказать" именно окно.
+
+## Блокировщик всплывающих окон
+
+Рекламные попапы очень надоели посетителям, аж со времён 20го века, поэтому современные браузеры всплывающие окна обычно блокируют. При этом пользователь, конечно, может изменить настройки блокирования для конкретного сайта.
+
+**Всплывающее окно блокируется в том случае, если вызов `window.open` произошёл не в результате действия посетителя.**
+
+Как же браузер понимает -- посетитель вызвал открытие окна или нет?
+
+**Для этого при работе скрипта он хранит внутренний "флаг", который говорит -- инициировал посетитель выполнение или нет.** 
+
+Например, при клике на кнопку весь код, который выполнится в результате, включая вложенные вызовы, будет иметь флаг "инициировано посетителем" и попапы при этом разрешены.
+
+А если код был на странице и выполнился автоматически при её загрузке -- у него этого флага не будет. Попапы будут заблокированы..
+
+Здесь есть ещё ряд тонких моментов. Например: обработчик `onclick` вызвал `setTimeout(func, timeout)`. В результате код `func` выполнится уже после того, как событие `onclick` обработано. Следует ли передать ему флаг "инициировано посетителем" или нет? 
+
+Возможны разные точки зрения, например, IE блокирует такие окна (видимо, проще было реализовать), а Firefox и Chrome/Safari передают флаг, если таймаут меньше секунды. А если больше -- то не передают ;)
+
+Вот это окно откроется в Firefox и Chrome (но не в IE):
+
+```js
+//+ run
+setTimeout(function() { 
+  window.open("http://ya.ru");
+}, *!*500*/!*);
+```
+
+...А это -- будет заблокировано:
+
+```js
+//+ run
+setTimeout(function() { 
+  window.open("http://ya.ru");
+}, *!*2500*/!*);
+```
+
+**Таким образом, современные браузеры расширяют область "действий посетителя" и блокируют попапы не всегда.**
+
+## Синтаксис window.open
+
+Полный синтаксис:
+
+```js
+win = window.open(url, name, params)
+```
+
+<dl>
+<dt>`url`</dt>
+<dd>URL для загрузки в новое окно.</dd>
+<dt>`name`</dt>
+<dd>Имя нового окна. Может быть использовано в параметре `target` в формах. Если позднее вызвать `window.open()` с тем же именем, то некоторые браузеры (Firefox) заменяют существующее окно на новосозданное. А вот IE при этом откроет новое окно.</dd>
+<dt>`params`</dt>
+<dd>Строка с конфигурацией для нового окна. Состоит из параметров, перечисленных через запятую. Пробелов в ней быть не должно.</dd>
+</dl>
+
+**Можно легко узнать, было ли окно заблокировано. При этом результат `window.open` равен `null`.**
+
+Значения параметров `params`.
+
+<ol>
+<li>Настройки расположения окна:
+
+<dl>
+<dt>`left/top` (число)</dt>
+<dd>Координаты верхнего левого угла относительно экрана. Ограничение: новое окно не может быть позиционированно за пределами экрана.</dd>
+<dt>`width/height` (число)</dt>
+<dd>Ширина/высота нового окна. Минимальные значения ограничены, так что невозможно создать невидимое окно с нулевыми размерами.</dd>
+</dl>
+
+Если координаты и размеры не указаны, то обычно браузер открывает не окно, а новую вкладку.
+
+</li>
+<li>Свойства окна:
+<dl>
+<dt>`menubar` (yes/no)</dt>
+<dd>Скрыть или показать строку меню браузера.</dd>
+<dt>`toolbar` (yes/no)</dt>
+<dd>Показать или скрыть панель навигации браузера (кнопки назад, вперед, обновить страницу и остальные) в новом окне.</dd>
+<dt>`location` (yes/no)</dt>
+<dd>Показать/скрыть поле URL-адреса в новом окне. По умолчанию Firefox и IE не позволяют скрывать строку адреса.</dd>
+<dt>`status` (yes/no)</dt>
+<dd>Показать или скрыть строку состояния. С другой стороны, браузер может в принудительном порядке показать строку состояния.</dd>
+<dt>`resizable` (yes/no)</dt>
+<dd>Позволяет отключить возможность изменять размеры нового окна. Значение `no` обычно неудобно посетителям.</dd>
+<dt>`scrollbars` (yes/no)</dt>
+<dd>Разрешает убрать полосы прокрутки для нового окна. Значение `no` обычно неудобно посетителям.</dd>
+</dl>
+</li>
+<li>Еще есть небольшое количество не кросс-браузерных свойств, которые обычно не используются. Вы можете узнать о них в документации, например MDN: [window.open](https://developer.mozilla.org/en/DOM/window.open).</li>
+</ol>
+
+Откроем окно с минимальным набором функций, чтобы посмотреть, какие из них браузер позволяет отключить:
+
+```js
+//+ run
+var params = 'scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no' +
+ 'width=0,height=0,left=-1000,top=-1000';
+window.open('/', 'test', params);
+```
+
+Здесь большинство параметров отключено и окно позиционированно за пределами экрана. Запустите, чтобы увидеть, что произойдет на самом деле.
+
+Теперь давайте добавим корректные параметры позиционирования: нормальную ширину, высоту и координаты левого верхнего угла.
+
+Этот пример браузер отобразит "как заказано":
+
+```js
+//+ run
+var params = 'scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no' +
+ 'width=100,height=100,left=100,top=100';
+window.open('/', 'test', params);
+```
+
+Важные моменты:
+
+<ul>
+<li>Если при вызове `open` третий параметр отсутствует, то используются параметры по умолчанию. Обычно при этом будет открыто не окно, а вкладка.</li>
+<li>Если указана строка с параметрами, но некоторые `yes/no` параметры отсутствуют, то браузер выставляет их в `no`. Поэтому убедитесь, что все нужные вам параметры выставлены в `yes`.</li>
+<li>Когда не указан `top/left`, то браузер откроет окно с небольшим смещением относительно левого верхнего угла последнего открытого окна.</li>
+<li>Если не указаны `width/height`, новое окно будет такого же размера, как последнее открытое.</li>
+</ul>
+
+## Доступ к новому окну
+
+Вызов `window.open` возвращает ссылку на новое окно. Она может быть использована для манипуляции свойствами окна, изменения URL, доступа к его переменным и т.п.
+
+В примере ниже содержимое нового окна модифицируется после загрузки.
+
+```js
+//+ run
+var newWin = window.open('/', 'example', 'width=600,height=400');
+newWin.focus();
+newWin.onload = function() {
+
+  // создать div в документе нового окна
+  var div = *!*newWin*/!*.document.createElement('div');
+  div.innerHTML = 'Добро пожаловать!'
+  div.style.fontSize = '30px'
+
+*!*
+  var body = newWin.document.body;
+*/!*
+  // вставить первым элементом в новое body
+  body.insertBefore(div, body.firstChild);
+}
+```
+
+**Сразу после `window.open` новое окно ещё не загружено.**
+
+Поэтому в примере выше изменения начинаются при `onload`. Можно использовать и событие `DOMContentLoaded`.
+
+[warn header="Same Origin Policy -- защита проверкой протокол-сайт-порт"]
+**Большинство действий, особенно получение содержимого окна и его переменных, возможны лишь в том случае, если URL нового окна происходит из того же источника (англ. - *"Same Origin"*), т.е. совпадают домен, протокол и порт.**
+
+Иначе говоря, если новое окно содержит документ с того же сайта.
+
+Исключение: замена адреса. Поменять (но не прочитать) `win.location = ...` можно всегда, даже если окно с другого домена.
+
+Больше информации об этом -- в главе [](/same-origin-policy).
+[/warn]
+
+## Связь между новым и родительским окном
+
+Связь между окнами -- двухсторонняя. Родительское окно получает ссылку из `window.open`, а дочернее -- специальное свойство `window.opener`.
+
+Оно равно `null`, если открывшего окна нет.
+
+## Итого
+
+<ul>
+<li>Всплывающее окно открывается с помощью вызова `window.open(url, name, params)`.</li>
+<li>Метод `window.open` возвращает ссылку на новое окно или `null`, если окно было заблокировано.</li>
+<li>Современные браузеры блокируют окна, если `window.open` вызвано не в результате действия посетителя.</li>
+<li>Обычно открывается вкладка, но если заданы размеры и позиция -- то именно окно.</li>
+<li>Новое окно имеет ссылку на родительское в `window.opener`.</li>
+<li>Окна могут общаться между собой как угодно, если они из одного источника. Иначе действуют жёсткие ограничения безопасности.</li>
+</ul>
+
+Всплывающие окна используются нечасто. Ведь загрузить новую информацию можно динамически, с помощью технологии AJAX, а показать -- в элементе `DIV`, расположенным над страницей (`z-index`). Ещё одна альтернатива -- тег `IFRAME`.
+
+Но в некоторых случаях всплывающие окна бывают очень даже полезны. Например, отдельное окно сервиса онлайн-консультаций. Посетитель может ходить по сайту в основном окне, а общаться в чате -- во вспомогательном.
+
+Если вы хотите использовать всплывающее окно, предупредите посетителя об этом, так же и при использовании `target="_blank"` в ссылках или формах. Иконка открывающегося окошка на ссылке поможет посетителю понять, что происходит и не потерять оба окна из поля зрения.
+
+
+<p style="text-align:right">Спасибо Марату Шагиеву за помощь в выкладке русскоязычного варианта этой главы.</p> 
\ No newline at end of file
diff --git a/3-more/7-frames-and-windows/2-window-properties-and-methods/article.md b/3-more/7-frames-and-windows/2-window-properties-and-methods/article.md
new file mode 100644
index 00000000..7fc6a53a
--- /dev/null
+++ b/3-more/7-frames-and-windows/2-window-properties-and-methods/article.md
@@ -0,0 +1,114 @@
+# Окно браузера: свойства и методы
+
+Объект `window` выполняет две функции (или играет две роли):
+<ol>
+<li>Является глобальным объектом Javascript.</li>
+<li>Предоставляет интерфейс для работы с окном браузера.</li>
+</ol>
+
+О глобальном объекте мы говорили в главе [](/closures). А здесь --  обратим внимание на то, что касается браузера.
+
+[cut]
+
+## События
+
+Наиболее важные события при работе с окном браузера:
+<ul>
+<li>`onresize` -- событие изменения размера окна.</li>
+<li>`onscroll` -- событие при прокрутке окна.</li>
+<li>`onload` -- полностью загрузилась страница со всеми ресурсами.</li>
+</ul>
+
+## Методы и свойства
+
+<dl>
+<dt>`window.closed`
+<dd>Свойство `window.closed` равно `true`, если окно закрыто. Может быть использовано, чтобы проверить, закрыл ли посетитель попап.</dd>
+<dt>`window.close()`</dt>
+<dd>Закрывает попап без предупреждений и уведомлений. Вообще, метод `close()` можно вызвать для любого окна, в том числе, текущего. Но если окно открыто не с помощью `window.open()`, то браузер может проигнорировать вызов `close` или запросить подтверждение.
+
+Нажмите кнопку ниже, для закрытия текущего окна.
+
+<input type="button" onclick="window.close()" value="window.close()">
+
+Попытайтесь это сделать в разных браузерах. На момент написания статьи, Firefox, Opera и Safari проигнорируют вызов `close()`, а IE запросит подтверждение.
+</dd>
+<dt>`window.title`</dt>
+<dd>Заголовок окна соостветствует содержимому элемента `TITLE` в `HEAD`.
+
+**Забавно, но для *изменения* заголовка нужно использовать не это свойство, а  `document.title`.**
+
+Код, расположенный ниже, каждую секунду обновляет заголовок окна на текущее время:
+
+```js
+//+ run
+setInterval(function() {
+  document.title = new Date();
+}, 1000);
+```
+
+</dd>
+</dl>
+
+## Перемещение и изменение размеров окна
+
+Существует несколько методов для перемещения/изменения размеров окна.
+
+<dl>
+<dt>`win.moveBy(x,y)`</dt>
+<dd>Перемещает окно относительно текущего положения на `x` пикселей вправо и `y` пикселей вниз. Допускаются отрицательные значения.</dd>
+<dt>`win.moveTo(x,y)`</dt>
+<dd>Передвигает окно в заданную координатами `x` и `y` точку экрана монитора.</dd>
+<dt>`win.resizeBy(width,height)`</dt>
+<dd>Изменяет размер окна на заданную величину `width/height` (ширина/высота). Допускаются отрицательные значения.</dd>
+<dt>`win.resizeTo(width,height)`</dt>
+<dd>Изменяет размер окна на заданное значение.</dd>
+</dl>
+
+Чтобы предотвратить использование этих методов с плохими целями, браузеры часто блокируют их выполнение. Как правило, они работают, если окно `win` открыто вызовом [window.open](https://developer.mozilla.org/en-US/docs/Web/API/window.open) из JavaScript текущей страницы и в нём нет дополнительных вкладок.
+
+**JavaScript не может свернуть или максимизировать окно.**
+
+Эти функции операционной системы от Frontend-разработчиков скрыты. Вызовы, описанные выше, в случае свёрнутого или максимизированного окна не работают.
+
+## Прокрутка окна
+
+Прокрутка окна требуется, пожалуй, чаще всего. Мы уже говорили о ней в главе [](/metrics-window):
+
+<dl>
+<dt>`win.scrollBy(x,y)`
+Прокрутка окна на заданное число пикселей вперед или назад. Допускаются отрицательные значения.</dt>
+<dt>`win.scrollTo(x,y)`</dt>
+<dd>Прокручивает окно к заданным координатам.</dd>
+<dt>`elem.scrollIntoView(top)`</dt>
+<dd>Этот метод прокрутки вызывается на элементе. При этом окно прокручивается так, чтобы элемент был полностью видим.
+
+Если параметр `top` равен `true` или не задан, то верх элемента совпадает с верхом окна. Если он равен `false`, то окно прокручивается так, чтобы нижний край элемента совпал с нижним краем окна.
+</dd>
+</dl>
+
+## Итого
+
+Что можно сделать с окном браузера:
+
+<ul>
+<li>Открыть новое -- вызовом `open()`</li>
+<li>Проверить, закрыто ли всплывающее окно -- свойство `window.closed`</li>
+<li>Закрыть окно -- метод `window.close()`. Если окно открыто не через `open()`, то не сработает в Firefox, Opera и Safari).</li>
+<li>Поставить свой заголовок в `document.title`.</li>
+</ul>
+
+Управление размером, положением, прокруткой окна:
+
+<ul>
+<li>Переместить вправо-вниз -- `win.moveBy(x,y)`.</li>
+<li>Переместить в координату на экране монитора -- `win.moveTo(x,y)`.</li>
+<li>Изменить размер на данную величину -- `win.resizeBy(width, height)`.</li>
+<li>Выставить точный размер окна -- `win.resizeTo(width,height)`</li>
+<li>Прокрутить документ в окне на данную величину -- `win.scrollBy(x,y)`.</li>
+<li>Прокрутить документ в окне до точных координат (относительно документа) -- `win.scrollTo(x,y)`.</li>
+<li>Дополнительно для прокрутки можно использовать
+`elem.scrollIntoView(top)`, где top может быть true/false — прокрутка elem до совпадения нижней/верхней границы elem с нижней/верхней границей документа, так, чтобы elem был полностью видим. По умолчанию `true`.</li>
+</ul>
+
+<p style="text-align:right">Спасибо Марату Шагиеву за помощь в выкладке русскоязычного варианта этой главы.</p> 
\ No newline at end of file
diff --git a/3-more/7-frames-and-windows/3-window-focus/article.md b/3-more/7-frames-and-windows/3-window-focus/article.md
new file mode 100644
index 00000000..a3187e95
--- /dev/null
+++ b/3-more/7-frames-and-windows/3-window-focus/article.md
@@ -0,0 +1,172 @@
+# Focus, привлечение внимания к окну
+
+Проверить, находится ли окно в фокусе, а также перевести внимание посетителя на него -- сложно. 
+
+В первую очередь, это потому, что JavaScript не интегрирован с оконным менеджером ОС. Кроме того, браузер охраняет права посетителя: если он хочет скрыть окно, то JavaScript не может его остановить.
+
+Но кое-что сделать, конечно, можно. Об этом и поговорим.
+[cut]
+
+
+## Метод window.focus 
+
+Метод `window.focus` позволяет сфокусироваться на окне. Он работает по-разному в разных ОС и браузерах.
+
+Проверьте, например:
+
+```js
+//+ run
+setInterval(function() { window.focus() }, 1000);
+```
+
+Можно подумать, что окно будет оказываться в фокусе раз в секунду. Но это не так.
+
+Произойдет одно из трех:
+ 
+<ol>
+<li>Окно развернется (при необходимости) и выйдет на передний план. Обычно это происходит, когда метод `window.focus()` вызывается для попапа, а активно  сейчас -- главное окно.</li>
+<li>Заголовок окна начнет мигать. Чтобы увидеть это в действии -- откройте данную страницу в IE, запустите код и переключитесь на другое окно.</li>
+
+Браузер попытается привлечь Ваше внимание миганием/мерцанием заголовка окна.</li>
+<li>Не наблюдается никакого видимого эффекта. Откройте эту страницу в Firefox в Windows, запустите код и сверните окно. Вызов `window.focus` не сработает. Также ведёт себя и Opera.</li>
+</ol>
+
+Как же, всё-таки, можно гарантированно развернуть окно и поместить его на первый план?
+
+Если это Вам действительно необходимо -- есть только одно надежное решение: плагин к браузеру или подписанный Java-апплет, который может обратиться напрямую к функциям ОС. Написать такое вполне можно. Но есть и другие способы привлечь внимание к окну.
+
+## Получение внимания -- для всплывающих окон
+
+Один из лучших способов -- это сочетание `window.focus()` с мерцанием заголовка окна, как показано в примере ниже:
+
+```html
+<!--+ run -->
+<script>
+  var win = open('/', 'test', 'width=300,height=300')
+ 
+  function getAttention(win) {
+    if (win.closed) { 
+      alert("Окно закрыто, привлечь внимание к нему нельзя");
+      return;
+    }
+
+    win.focus();
+    var i = 0;
+    var show = ['************', win.document.title];
+ 
+    var focusTimer = setInterval(function() { 
+      if (win.closed) {
+        clearInterval(focusTimer);
+        return;
+      }  
+      win.document.title = show[i++ % 2];
+    }, 1000);
+ 
+    win.document.onmousemove = function() {
+      clearInterval(focusTimer);
+      win.document.title = show[1];
+      win.document.onmousemove = null;
+    }
+  }
+</script>
+   
+<input type="button" onclick="getAttention(win)" value="getAttention(win)">
+```
+
+Запустите код и сверните всплывющее окно. А затем -- нажмите кнопку с надписью "getAttention(win)". Браузер будет привлекать ваше внимание, как умеет ;)
+
+Обратите внимание: в коде есть проверка на `win.closed`. Попытка манипулирования закрытым окном вызовет исключение.
+
+Как только посетитель сфокусировался на окне индикация прекращается. Для определения момента фокусировки в примере выше используется событие `document.onmousemove`.
+
+Можно было использовать событие `window.onfocus`, но, оказывается, оно ненадежно.
+
+## Событие window.onfocus
+
+Вот переписанный вариант функции `getAtention(win)`, с использованием события `onfocus`:
+
+```html
+<!--+ run -->
+<script>
+  var win = open('/', 'test', 'width=300,height=300')
+
+  function getAttention(win) {
+    if (win.closed) { 
+      alert("Окно закрыто, привлечь внимание к нему нельзя");
+      return;
+    }
+
+    var i = 0;
+    var show = ['************', win.document.title];
+
+    function stop() {
+      clearInterval(focusTimer); 
+      win.document.title = show[1];      
+    }
+ 
+    win.onfocus = function() { 
+      stop();
+      win.onfocus = null;
+    }
+      
+    var focusTimer = setInterval(function() { 
+      if (win.closed) {
+        clearInterval(focusTimer);
+        return;
+      } 
+     
+      win.document.title = show[i++ % 2];
+    }, 1000);
+
+    win.focus();
+  }
+</script>
+
+<input type="button" onclick="getAttention(win)" value="getAttention(win)">
+```
+
+Далее мы посмотрим случаи, когда он не срабатывает, и почему нам всё же нужно `document.onmousemove`.
+
+### Когда событие onfocus не работает?
+
+Возможно такое, что посетитель переключается на окно, а `window.onfocus` не происходит.
+
+Это потому, что переключение между окнами и фокусировка -- это разные вещи. Например, если курсор находится в поле для ввода URL браузера, то считается, что окно не в фокусе, хотя посетитель переключился на это окно.
+
+Попробуйте проделать следующее:
+
+<ol>
+<li>Запустите пример с `getAttention` в Chrome или IE (кстати, в них нельзя отключить адресную панель).</li>
+<li>Поместите курсор в панель адреса всплывающего окна.</li>
+<li>Перейдите обратно к главному окну и нажмите кнопку `getAttention(win)`</li>
+</ol>
+
+**Вы увидите, что несмотря на то, что вы переключились на окно, и оно сейчас на переднем плане, событие `onfocus` не срабатывает.**
+
+Есть и другие случаи, когда переключение между окнами не вызывает `window.onfocus`. Скажем, если окно сфокусировать щелчком в поле ввода формы, то в IE события `window.onfocus` (а также `window.onfocusin`) -- не сработают!
+
+Можно попробовать поймать момент фокусировки и по-другому, повесив дополнительные обработчики событий на `document`. В главе [](/focus-blur) описана техника делегирования для `focus/blur`.
+
+Но этот получает фокус только если посетитель сфокусируется где-то в документе: щелкнет или сделает еще какое-то действие в документе, а не просто посмотрит на него и проведет над ним мышкой.
+
+Впрочем, никто не мешает использовать сочетание всех описанных методов :)
+
+## Итого
+
+Фокусировка и привлечение внимания к окну:
+
+<ul>
+<li>Метод `focus` для `window` не надёжен. Окнами и вкладками браузера можно уверенно управлять только на уровне ОС.
+
+Поэтому для привлечения внимания посетителя к окну стоит также использовать  мерцающий заголовок окна.</li>
+</ul>
+
+Обнаружение переключения на окно:
+
+<ul>
+<li>У `window` есть событие `onfocus`, но оно также ненадёжно.
+
+Поэтому для определения переключения на окно -- используйте его вместе с делегируемым `focus` на документе, а также `document.onmousemove`.</li>
+</ul>
+
+<p style="text-align:right">Спасибо Марату Шагиеву за помощь в выкладке русскоязычного варианта этой главы.</p> 
diff --git a/3-more/7-frames-and-windows/4-iframes/article.md b/3-more/7-frames-and-windows/4-iframes/article.md
new file mode 100644
index 00000000..7892528a
--- /dev/null
+++ b/3-more/7-frames-and-windows/4-iframes/article.md
@@ -0,0 +1,250 @@
+# Общение с окном в ифрейме 
+
+Здесь предполагается, что мы прекрасно знаем, что такое ифрейм, и как подключить внешний документ с его использованием. Иначе говоря, HTML для нас не нов.
+
+В этой главе мы рассмотрим способы работы с ними из JavaScript.
+
+[cut]
+
+## Ифрейм: тонкости с атрибутами
+
+Хоть мы и знаем, что такое ифрейм, но позвольте заострить внимание на нескольких моментах, касающихся атрибутов.
+
+<dl>
+<dt>Рамка: `frameborder="0"`</dt>
+<dd>Если хочется, чтобы в IE<9 вокруг ифреймов не было рамок, то поставьте атрибут `frameborder="0"`.
+
+В IE<9 все ифреймы в примере ниже, кроме последнего, будут с рамкой:
+
+```html
+<!--+ run -->
+<style> iframe { width: 100px; height:40px } </style>
+<ol>
+  <li><iframe src="javascript:'тест'"></iframe></li>
+  <li><iframe src="javascript:'тест'" style="border:0"></iframe></li>
+*!*
+  <li><iframe src="javascript:'тест'" frameborder="0"></iframe></li>
+*/!*
+</ol>
+```
+
+</dd>
+<dt>Пустой `src`</dt>
+<dd>Атрибут `src` может использовать протокол `javascript:...`. При этом код выполняется и его результат будет содержимым ифрейма. Этот способ описан в стандарте и поддерживается всеми браузерами.
+
+Атрибут `src` является обязательным, и его отсутствие может привести к проблемам, вплоть до игнорирования ифрейма браузером. 
+
+**Чтобы ничего не загружать в ифрейм, укажите `src="javascript:false"`.** 
+</dd>
+<dt>Атрибут `name` и создание ифрейма в IE<8</dt>
+<dd>В старых IE нельзя менять атрибут `name` после создания ифрейма:
+
+```js
+var iframe = document.createElement('iframe');
+iframe.name = 'iName'; // в IE<8 не сработает
+```
+
+Поэтому, если нужна совместимость, создавайте ифреймы через `innerHTML`:
+
+```js
+var tmp = document.createElement('div');
+tmp.innerHTML = '<iframe name="iName" src="javascript:false"></iframe>';
+
+var iframe = tmp.firstChild;
+```
+
+</dd>
+</dl>
+
+## Ифрейм: доступ к document и window
+
+Элемент `iframe` является обычным узлом DOM, как и любой другой. Существенное отличие -- в том, что с ним связан объект `window` внутреннего окна. Он доступен по ссылке `iframe.contentWindow`.
+
+Таким образом, `iframe.contentWindow.document` будет внутренним документом.
+
+[smart header="Когда-то..."]
+В старых браузерах использовались дополнительные свойства, такие как `iframe.contentDocument` и даже `iframe.document`, но они давно не нужны.
+[/smart]
+
+В примере ниже JavaScript получает документ внутри ифрейма и модифицирует его:
+
+```html
+<!--+ height="100" run -->
+<iframe src="javascript:'тест'" style="height:60px"></iframe>
+
+<script>
+  var iframe = document.getElementsByTagName('iframe')[0];
+*!*
+  var iframeDoc = iframe.contentWindow.document;
+*/!*
+  iframeDoc.body.style.backgroundColor = 'green';
+</script>
+```
+
+[smart]
+Обратите внимание, HTML `'тест'` в примере выше -- невалидный, там нет `BODY`. Поэтому ифрейм будет отображаться в режиме совместимости.
+
+Но браузер исправляет структуру и гарантирует, что после загрузки документа у него всегда есть `document.body` и ровно одно.
+[/smart]
+
+В целях безопасности возможность доступа к документу в ифрейме ограничена. Если он с другого домена, на другом порту или протоколе, то доступ запрещён. Подробнее об этом ограничении и как его можно обойти -- далее, в главе [](/same-origin-policy).
+
+## Иерархия window.frames   
+
+Альтернативный способ доступа к окну ифрейма -- это получить его из коллекции `window.frames`.
+
+Есть два способа доступа:
+<ol>
+<li>`window.frames[0]` -- доступ по номеру.</li>
+<li>`window.frames.iframeName` -- доступ по `name` ифрейма.</li>
+</ol>
+
+В коллекции хранится именно окно (`contentWindow`), а не тег.
+
+Например:
+
+```html
+<!--+ run -->
+<iframe src="javascript:''" style="height:80px" name="iframeName"></iframe>
+
+<script>  
+  var iframe = document.body.children[0];
+  var iframeWindow = iframe.contentWindow; // окно из тега
+
+  alert(frames[0] === iframeWindow); // true, окно из коллекции frames
+  alert(frames.iframeName == iframeWindow); // true, окно из frames по имени
+</script>
+```
+
+Внутри ифрейма могут быть свои вложенные ифреймы. Всё это вместе образует иерархию.
+
+Ссылки для навигации по ней:
+
+<ul>
+<li>**По детям:** `window.frames` -- коллекция "детей" (вложенных ифреймов)</li>
+<li>**На родителя:** `window.parent` -- содержит ссылку на родительское окно, позволяет обратиться к нему из ифрейма.
+
+Всегда верно:
+
+```js
+// (из окна со фреймом)
+window.frames[0].parent === window; // true
+```
+
+</li>
+<li>**На корень:** `window.top` -- содержит ссылку на самое верхнее окно.
+
+Всегда верно:
+
+```js
+// (в предположении, что вложенные фреймы существуют)
+window.frames[0].frames[0].frames[0].top === window
+```
+
+</li>
+</ul>
+
+**Свойство `top` позволяет легко проверить, во фрейме ли находится текущий документ:**
+
+```js
+//+ run
+if (window == top) {
+  alert('Этот скрипт является окном верхнего уровня в браузере');
+} else {
+  alert('Этот скрипт исполняется во фрейме!');
+}
+```
+
+## Событие onload 
+
+У ифрейма есть своё событие `onload`, которое не связано с `onload` основного окна.
+
+Иными словами, `onload` основного окна не ждёт, пока ифрейм догрузится.
+
+**Событие `onload` есть и на теге `iframe` и на его окне.**
+
+Это важно, так как обработчик на теге более универсален. 
+
+**В случае, когда документ с другого домена, внешний документ сможет отследить его загрузку только по `onload` на теге.**
+
+Например, попытаемся отследить загрузку ифрейма с сайта `http://vk.com/`:
+
+```html
+<!--+ run -->
+<iframe src="http://vk.com/" name="vk" style="height:100px"></iframe>
+
+<script>
+  // поставить onload на элемент
+  document.getElementsByTagName('iframe')[0].onload = function() {
+    alert('Фрейм загрузился')
+  }
+
+  // set onload on window
+  frames.vk.onload = function() {
+    alert('Окно фрейма загрузилось')
+  }
+</script>
+```
+
+Запустите пример выше. Вы увидите, что работает только `iframe.onload`. А если бы ифрейм был с того же домена, то сработали бы оба обработчика.
+
+
+## Атрибуты seamless и sandbox 
+
+В стандарте HTML5 для [iframe](http://www.w3.org/wiki/HTML/Elements/iframe) предусмотрены атрибуты `seamless` и `sandbox`. 
+
+Оба они на момент написания (конец 2012) поддерживаются в Chrome, в других браузерах поддержка тоже не за горами.
+
+### seamless
+
+Атрибут `seamless` полностью интегрирует ифрейм в документ, убирая рамку и применяя CSS-стили внешнего окна к содержимому ифрейма, как будто это обычный элемент.
+
+То есть, если в основном документе есть стиль `p { font-weight: bold }`, то он повлияет и на содержимое ифрейма.
+
+Для JavaScript он не важен.
+
+### sandbox
+
+Атрибут `sandbox` позволяет построить "песочницу" вокруг ифрейма, запретив ему выполнять ряд действий.
+
+Наличие атрибута `sandbox`:
+<ul>
+<li>Заставляет браузер считать ифрейм загруженным с другого домена, так что он и внешнее окно больше не могут обращаться к переменным друг друга.</li>
+<li>Отключает формы и скрипты в ифрейме.</li>
+<li>Запрещает менять `parent.location` из ифрейма.</li>
+</ul>
+
+Пример ниже загружает в такой ифрейм документ:
+
+```html
+<!--+ run height=200 -->
+<iframe *!*sandbox*/!* src="/files/tutorial/window/sandboxed.html"></iframe>
+```
+
+Содержимое файла `sandboxed.html`:
+
+```html
+<script>
+  alert(1);
+</script>
+
+<form action="http://google.ru">
+  <input type="submit" value="Отправить форму на http://google.ru">
+</form>
+```
+
+Запустите пример выше для просмотра. Ни форма ни скрипты не сработают.
+
+**Атрибут `sandbox` может содержать флаги через пробел, которые убирают ограничения:**
+<dl>
+<dt>allow-same-origin</dt>
+<dd>Браузер может не считать документ в ифрейме пришедшим с другого же домена. Если ифрейм *и так* с другого домена, то ничего не меняется.</dd>
+<dt>allow-top-navigation</dt>
+<dd>Разрешает ифрейму менять `parent.location`.</dd>
+<dt>allow-forms</dt>
+<dd>Разрешает отправлять формы из `iframe`.</dd>
+<dt>allow-scripts</dt>
+<dd>Разрешает выполнение скриптов из ифрейма. Но скриптам, всё же, будет запрещено открывать попапы.</dd>
+</dl>
+
+Цель атрибута `sandbox` -- наложить дополнительные ограничения. Он не может снять уже существующие, в частности, убрать ограничения безопасности, если ифрейм с другого домена. 
\ No newline at end of file
diff --git a/3-more/7-frames-and-windows/5-same-origin-policy/article.md b/3-more/7-frames-and-windows/5-same-origin-policy/article.md
new file mode 100644
index 00000000..7cb92d97
--- /dev/null
+++ b/3-more/7-frames-and-windows/5-same-origin-policy/article.md
@@ -0,0 +1,163 @@
+# Ограничение "Same Origin"
+
+Ограничение "Same Origin" ("тот же источник") ограничивает доступ окон и фреймов друг к другу, а также влияет на AJAX-запросы к серверу.
+
+Причина, по которой оно существует -- безопасность. Если есть два окна, в одном из которых `vasya-pupkin.com`, а в другом `gmail.com`, то мы бы не хотели, чтобы скрипт из первого мог читать нашу почту.
+
+Сама концепция проста, но есть много важных исключений и особенностей, которые нужно знать для полного понимания этого правила.
+[cut]
+
+## Same Origin [[#same-origin]
+
+[summary]
+Два URL считаются имеющим один источник ("same origin"), если у них одинаковый протокол, домен и порт.
+[/summary]
+
+Эти URL имеют один источник:
+<ul>
+<li>`http://site.com`</li>
+<li>`http://site.com`/</li>
+<li>`http://site.com/my/page.html`</li>
+</ul>
+
+А вот эти -- все из других источников:
+<ul>
+<li>http://<span style="color:red">www.</span>site.com (другой домен)</li>
+<li>http://site.<span style="color:red">org</span>  (другой домен)</li>
+<li>http<span style="color:red">s</span>://site.com  (другой протокол)</li>
+<li>http://site.com<span style="color:red">:8080</span>  (другой порт)</li>
+</ul>
+
+Существует ряд исключений, позволяющих-таки окнам с разных доменов обмениваться информацией, но прямой вызов методов друг друга и чтение свойств запрещены.
+
+## Пример ограничений
+
+Если одно окно попытается обратиться к другому, то браузер проверит, из одного ли они источника. Если нет -- доступ будет запрещён.
+
+Например:
+
+```html
+<!--+ run -->
+<iframe src="http://vk.com" name="vk" style="height:100px"></iframe>
+
+<script> 
+  var iframe = document.getElementsByName('vk')[0];
+  iframe.onload = function() {
+    try {
+      alert(iframe.contentWindow.document);
+    } catch(e) {
+      alert("Ошибка: " + e.message);
+    }
+  }
+</script>
+```
+
+**При запуске примера выше Safari/Chrome могут вместо ошибки вывести `undefined`.** 
+
+Это их способ (некорректный) показать, что "чтение запрещено". Будем надеяться, исправят.
+
+
+
+## Исключение: запись в location
+
+Окно и вложенный в него `iframe` могут менять `location` друг друга, даже если они из разных источников.
+
+Причём *читать* `location` нельзя, одно окно не имеет право знать, на каком URL пользователь в другом. А вот *запись* браузеры считают безопасной.
+
+Например, открыв на `javascript.ru` ифрейм с `vk.com`, из этого ифрейма нельзя будет узнать URL, а вот поменять его -- запросто:
+
+```html
+<!--+ run -->
+<iframe src="http://vk.com" name="vk"></iframe>
+ 
+<script>
+  var iframe = document.getElementsByName('vk')[0];
+    
+  iframe.onload = function () {
+
+    try { // попытка чтения
+*!*
+      alert(iframe.contentWindow.location.href); // неудачно
+*/!*
+    } catch(e) {
+      alert('Ошибка: ' + e.message);
+    }
+
+    try { // запись в location будет успешной
+*!*
+     iframe.contentWindow.location = 'http://wikipedia.org';
+*/!*
+     alert('Перенаправили на http://wikipedia.org');
+    }
+
+  };
+</script>
+```
+
+## Исключение: поддомен 3го уровня
+
+Ещё одно важное исключение касается доменов третьего уровня.
+
+Например, у нас есть окно на `http://site.com` и два ифрейма: первый с источника `http://john.site.com`, а второй -- с `http://peter.site.com`.
+
+**Если несколько окон присваивают в `document.domain` свой общий поддомен 2го уровня, то все ограничения снимаются.**
+
+Важно:
+<ol>
+<li>Должен быть общий поддомен второго уровня. 
+
+Можно поставить `document.domain='site.com'` на странице с `my.site.com`, но нельзя это сделать на странице с `vaysa-pupkin.ru`.</li>
+<li>Свойство `document.domain` должно быть присвоено на всех окнах, участвующих в коммуникации, в том числе на том, которое и так с этого домена.
+
+Выглядит абсурдно, но на документе с `site.com` нужно вызвать: `document.domain=document.domain`. Тогда будет работать.</li>
+</ol>
+
+
+## Исключение: порт в IE
+
+В браузере Internet Explorer порт не входит в понятие "источник" (origin).
+
+Это означает, что окно с `http://site.com` может свободно общаться с `http://site.com:8080`. 
+
+Это иногда используют для общения разных сервисов, использующих один IP-адрес. Но допустимо такое только в IE.
+
+## Исключение: зона в IE
+
+Если сайт находится в зоне "Надёжные узлы", то в Internet Explorer ограничения к нему не применяются.
+
+При этом подразумевается, что для этой зоны в параметрах "Безопасность" включена опция "Доступ к источникам данных за пределами домена".
+
+## Общение между окнами с разных источников
+
+Если ни одно из исключений выше не подошло, то есть три основных способа, как окнам общаться между собой:
+
+<ol>
+<li>Все современные браузеры, включая IE8+, поддерживают специальный интерфейс `postMessage` для общения между окнами с разных доменов. Мы рассмотрим его в отдельной главе [](/cross-window-messaging-with-postmessage).</li>
+<li>Одно окно может поменять другому `location.hash` -- часть пути после `#`. При этом не произойдёт смены `URL`, но другое окно, увидев это, может прочитать из хэша информацию и, в свою очередь, ответить.
+
+Этот способ испольуется там, где требуется поддержка IE<8. 
+</li>
+</ol>
+
+В совокупности с этим можно использовать интерфейс `localStorage` для оповещении всех окон и вкладок о событии. При сохранении данных в `localStorage` генерируется событие `onstorage`, причём сразу на всех окнах, фреймах и табах с тем же доменом.
+
+Кроме того, если вы используете `IFRAME` вместе с AJAX, то, возможно, вам пригодятся способы, описанные в главе [](/ajax-iframe-xdomain).
+
+
+
+## Итого
+
+Ограничение "одного источника" запрещает окнам и фреймам с разных источников вызывать методы друг друга и читать данные друг из друга.
+
+При этом "из одного источника" означает "совпадают протокол, домен и порт".
+
+Как ни странно, у этого подхода ряд существенных исключений:
+
+<ul>
+<li>Свойство `window.location` нельзя читать, но можно менять.</li>
+<li>Домены третьего уровня с общим наддоменом могут поменять `document.domain` на их общий домен второго уровня, и тогда они смогут взаимодействовать без ограничений.
+</li>
+<li>IE не включает порт в понятие источника. Кроме того, он позволяет снять ограничения для конкретного сайта включением в доверенную зону.</li>
+</ul>
+
+В современных браузерах (IE8+) кросс-доменное общение можно организовать через `location.hash` и [postMessage](/cross-window-messaging-with-postmessage). При этом IE8 не умеет передавать данные между окнами, но, если нужно, `localStorage` передаёт всё и везде :)
\ No newline at end of file
diff --git a/3-more/7-frames-and-windows/6-cross-window-messaging-with-postmessage/article.md b/3-more/7-frames-and-windows/6-cross-window-messaging-with-postmessage/article.md
new file mode 100644
index 00000000..382032e4
--- /dev/null
+++ b/3-more/7-frames-and-windows/6-cross-window-messaging-with-postmessage/article.md
@@ -0,0 +1,106 @@
+# Общение окон с разных доменов: postMessage 
+
+Интерфейс `postMessage` позволяет общаться друг с другом окнам и ифреймам с разных доменов.
+
+Он очень удобен, например, для взаимодействия внешних виджетов и сервисов, подключённых через ифрейм с основной страницей.
+[cut]
+
+## Интерфейс
+
+Интерфейс состоит из двух частей.
+
+### Отправитель: метод postMessage
+
+Первая часть состоит из метода [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage). Его вызывает окно, которое хочет отправить сообщение, в контексте окна-получателя.
+
+Проще говоря, если мы хотим отправить сообщение в окно `win`, то нужно вызвать `win.postMessage(data, targetOrigin)`.
+
+Аргументы:
+
+<dl>
+<dt>data</dt>
+<dd>Данные. По спецификации, это может быть любой объект, который будет *клонирован с сохранением структуры* при передаче. 
+
+Но IE поддерживает только строки, поэтому обычно данные JSON-сериализуют.</dd>
+<dt>targetOrigin</dt>
+<dd>Разрешить получение сообщения только окнам с данного источника. 
+
+Мы ведь не можем из JavaScript узнать, на каком именно URL находится другое окно. Но иногда хочется быть уверенным, что данные передаются в доверенный документ. Для этого и нужен этот параметр. Проверку осуществляет браузер. При указании `'*'` ограничений нет.</dd>
+</dl>
+
+[warn header="В IE8 можно использовать `postMessage` только для ифреймов"]
+
+В браузере IE8, интерфейс `postMessage` работает только с ифреймами. Он не работает между табами и окнами. 
+
+Это ошибка в данном конкретном браузере, в других -- всё в порядке.
+[/warn]
+
+### Получатель: событие onmessage
+
+Чтобы получить сообщение, окно должно поставить обработчик на событие `onmessage`.
+
+Свойства объекта события:
+<dl>
+<dt>`data`</dt>
+<dd>Присланные данные</dd>
+<dt>`origin`</dt>
+<dd>Источник, из которого пришло сообщение, например `http://javascript.ru`.</dd>
+<dt>`source`</dt>
+<dd>Ссылка на окно, с которого пришло сообщение. Можно тут же ответить.</dd>
+</dl>
+
+Назначать обработчик нужно обязательно через методы `addEventListener/attachEvent`, например:
+
+```js
+function listener(event) {
+  if( event.origin != 'http://learn.javascript.ru') { 
+    // что-то прислали с чужого домена - проигнорируем..    
+    return;
+  }
+
+  document.getElementById("msg").innerHTML = "получено: " + event.data;
+}
+
+if (window.addEventListener){
+  window.addEventListener("message", listener, false);
+} else {
+  window.attachEvent("onmessage", listener);
+}
+```
+
+Этот код содержит ифрейм ниже, с именем `name="receiveFrame"`:
+
+<iframe src="/files/tutorial/window/receive.html" style="width:100%; height: 60px; border:1px solid black" frameborder="0" name="receiveFrame"></iframe>
+
+Запустите код для отправки ему сообщения:
+
+```js
+//+ run
+var win = frames.receiveFrame;
+win.postMessage("Привет!", "http://learn.javascript.ru");
+```
+
+## Задержка
+
+Задержки между отправкой и получением нет, совсем.
+
+Если для `setTimeout` стандарт предусматривает минимальную задержку 4мс, то для `postMessage` она равна 0мс.  
+
+Поэтому `postMessage` можно, в том числе, использовать как мгновенную альтернативу `setTimeout`.
+
+## Итого
+
+Интерфейс `postMessage` позволяет общаться окнам и ифреймам с разных доменов (в IE8 -- только ифреймы), при этом обеспечивая проверки безопасности.
+
+<ol>
+<li>Отправитель вызывает `targetWin.postMessage(data, targetOrigin)`.</li>
+<li>Если `targetOrigin` не `'*'`, то браузер проверяет, совпадает ли источник с `targetWin`.</li>
+<li>Если совпадает, то на `targetWin` генерируется событие `onmessage`, в котором передаются:
+<ul>
+<li>`origin` -- источник, с которого пришло сообщение.</li>
+<li>`source` -- ссылка на окно-отправитель.</li>
+<li>`data` -- данные. Везде, кроме IE, допустимы объекты, которые клонируются, а в IE -- только строка.</li>
+</ul>
+</li>
+<li>Обработчик на `onmessage` необходимо вешать при помощи специализированных методов `addEventListener/attachEvent`.</li>
+</ol>
diff --git a/3-more/7-frames-and-windows/7-clickjacking/article.md b/3-more/7-frames-and-windows/7-clickjacking/article.md
new file mode 100644
index 00000000..e0a78c18
--- /dev/null
+++ b/3-more/7-frames-and-windows/7-clickjacking/article.md
@@ -0,0 +1,250 @@
+# Атака Clickjacking и защита от неё
+
+Атака "кликджекинг" (англ. Clickjacking) позволяет хакеру выполнить клик на сайте-жертве *от имени посетителя*. 
+
+В русском языке встречается дословный перевод термина clickjacking: "угон клика". Так же применительно к clickjacking-атаке можно встретить термины "перекрытие iframe" и "подмена пользовательского интерфейса".
+
+Кликджекингу подверглись в своё время Twitter, Facebook , PayPal, YouTube и многие другие сайты. Сейчас, конечно, они уже защищены.
+[cut]
+## Идея атаки
+
+В целом идея очень проста.
+
+Вот как выглядит «угон клика» пользователя, который зарегистрирован на  facebook:
+
+<ol>
+<li>На вредоносной странице пользователю подсовывается безобидная ссылка
+(скажем, что-то скачать, «разбогатеть сейчас», посмотреть ролик или просто перейти по ссылке на интересный ресурс).</li>
+<li>Поверх этой заманчивой ссылки помещен прозрачный iframe со страницей facebook.com, так что кнопка "Like" находится чётко над ней.
+
+Кликая на ссылку, посетитель на самом деле нажимает на эту кнопку.
+</li>
+</ol>
+
+## Пример
+
+Вот пример (для наглядности `iframe` -- полупрозрачный):
+
+```html
+<!--+ run height=120 -->
+<style>
+iframe { /* iframe с сайта-жертвы */
+  width: 300px;
+  height: 100px;
+  position: absolute;
+  top:0; left:-20px;
+  filter: alpha(opacity=50); /* в рельности будет opacity=50 */
+  opacity: 0.5;
+  z-index: 1;
+}
+</style>
+ 
+<div>Нажмите, чтобы разбогатеть сейчас:</div>
+     
+<!-- URL в реальности - с другого домена (атакуемого сайта) -->
+<iframe src="http://js.cx/clickjacking/facebook.html"></iframe>
+ 
+<a href="http://google.com">Нажми тут!</a>
+ 
+<div>..И всё получится (хе-хе, у меня, злого хакера, получится)!</div>
+```
+
+**При клике на ссылку на самом деле происходит клик на iframe (на «Like»).**
+
+Если посетитель авторизован на facebook (а в большинстве случаев так и есть), то facebook.com получает щелчок от имени посетителя.
+
+На Twitter это была бы кнопка «Follow».
+
+Тот же самый код, но как это было бы в реальности, с `opacity:0` для iframe (щелкните, чтобы увидеть захваченную кнопку):
+
+[iframe src="clickjacking" height=120 link edit]
+
+Итак, все, что нужно для проведения атаки --  это правильно расположить iframe на  вредоносной странице. В большинстве случаев это делается средствами HTML/CSS.
+
+События клавиатуры захватить гораздо труднее, потому что, если `iframe` является невидимым, то текст в поле ввода также будет невидимым. Посетитель начнёт печатать, но, не увидев текст, прекратит свои действия.
+
+## Защита и способы обхода.
+
+Самый старый метод защиты -- это код JavaScript, не позволяющий отобразить веб-страницу внутри фрейма (*framebusting*, также его называют *framekilling* и *framebreaking*). 
+
+Добавьте к документу следующий код, если не хотите, чтобы документ загружался в iframe:
+
+<script>
+if (top != window) {
+  top.location = window.location;
+}
+</script>
+
+То есть, если окно обнаруживает, что оно загружено во фрейме, то оно автоматически делает себя верхним.
+
+В настоящий момент это уже не является сколько-нибудь надежной защитой. 
+
+Есть несколько способов обхода framebusting. Давайте рассмотрим некоторые из них.
+
+### Блокировка top-навигации.
+
+Можно заблокировать переход, инициированный сменой `top.location`, в событии [onbeforeunload](#window.onbeforeunload).
+
+Обработчик этого события ставится на внешней (хакерской) странице и, при попытке  `iframe` поменять `top.location`, спросит посетителя, хочет он покинуть данную страницу. В большинстве браузеров хакер может спросить посетителя, используя своё сообщение.
+
+Так что, скорее всего, посетитель ответит на такой странный вопрос отрицательно (он же не знает про ифрейм, видит только страницу, причины для ухода нет).
+
+В приведенном ниже примере представлен "защищенный" `iframe`:
+
+```html
+<!--+ src="cj_location.html" play -->
+```
+
+А вот -- хакерская страница с этим `iframe`, которая отменяет перезагрузку верхнего окна при помощи `onbeforeunload` (предполагается, что посетитель нажмёт «отмену»):
+
+```html
+<script>
+window.onbeforeunload = function() {
+  window.onbeforeunload = null;
+  return "Хотите уйти с этой страницы, не узнав все её тайны (хе-хе)?";
+}
+</script>
+ 
+<iframe src="/files/tutorial/window/cj_location.html" style="height:80px"></iframe>
+```
+
+[Открыть в отдельном окне (сразу спросит)](/files/tutorial/window/cj_location_hack.html).
+
+### security = "restricted"
+
+В IE8 есть особый атрибут `security = "restricted"` -- отключающий исполнение скриптов во фрейме.
+
+Пример использования:
+
+```html
+<iframe security="restricted" src="/files/tutorial/window/cj_location.html" style="height:80px"></iframe>
+```
+
+При этом клик во фрейме, если он не требует JavaScript, всё равно сработает, а вот защита -- нет.
+
+### HTML5
+
+Одна из возможностей HTML5 -- атрибут [sandbox](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-iframe-sandbox)
+
+Он позволяет разрешить во фрейме скрипты `allow-scripts` и формы `allow-forms`, но запретить top-навигацию (не указать `allow-top-navigation`).
+
+Выглядеть это будет так:
+
+```html
+<iframe *!*sandbox="allow-scripts allow-forms"*/!* src="/files/tutorial/window/cj_location.html"></iframe>
+```
+
+Сработает в браузерах, которые поддерживают `sandbox`, например -- в Chrome.
+
+### Ещё приёмы
+
+Есть и еще приёмы для обхода этой простейшей защиты. 
+
+Firefox и старый IE могут активировать designMode на исходной странице, это также предотвращает framebusting (спасибо за идею owasp.org, страница clickjacking).
+
+Как мы видим, она не только не выдерживает реальной атаки, но и может скомпрометировать сайт (программист-то думает, что защитил его).
+
+## Надежная защита от Clickjacking
+
+### Заголовок X-Frame-Options
+
+Все современные браузеры поддерживают заголовок `X-Frame-Options`.
+
+Он разрешает или запрещает отображение страницы, если она открыта во фрейме.
+
+Браузеры игнорируют заголовок, если он определен в МЕТА тег. Таким образом, `<meta http-equiv="X-Frame-Options"...>` будет проигнорирован.
+
+У заголовка может быть три значения:
+
+<dl>
+<dt>SAMEORIGIN</dt>
+<dd>Рендеринг документа, при открытии во фрейме, производится только в том случае, когда верхний (top) документ -- с того же домена.</dd>
+<dt>DENY</dt>
+<dd>Рендеринг документа внутри фрейма запрещён.</dd>
+<dt>ALLOW-FROM domain</dt>
+<dd>Разрешает рендеринг, если внешний документ с данного домена (не поддерживается в Safari, Firefox).</dd>
+</dl>
+
+К примеру, Twitter использует `X-Frame-Options: SAMEORIGIN`. Результат:
+
+```html
+<iframe src="http://twitter.com"></iframe>
+```
+
+<iframe src="http://twitter.com"></iframe>
+
+В зависимости от браузера, `iframe` выше либо пустой, либо в нём находится сообщение о невозможности отобразить его (IE).
+
+### Приостановка показа документа
+
+Если нужно поддерживать старые браузеры (IE<8), то можно и просто отменить показ документа:
+
+```html
+<head>
+  <style> body { display : none } </style>
+</head>
+<body>
+ 
+<script>
+  if (self == top) {
+    document.getElementsByTagName('body').style.display = "block";
+  } else {
+    top.location = self.location;
+  }
+</script>
+```
+
+[warn header="Почему не `document.body`?"]
+В приведенном выше примере, мы используем `document.getElementsByTagName`, вместо `document.body`, потому что это способ получения `BODY` работает во всех браузерах, когда документ еще не готов.
+[/warn]
+
+Обратите внимание -- изначально документ скрыт. Мало ли, вдруг JavaScript во фрейме отключен -- защита сработает.
+
+Он будет показан только в том случае, если заведомо всё в порядке: не отключён JavaScript и страница не во фрейме.
+
+### Показ с отключённым функционалом
+
+Заголовок `X-Frame-Options` имеет неприятный побочный эффект. Иногда поисковики, анонимайзеры или другие сайты хотели бы отобразить страницу в `iframe`, по вполне "легальным" причинам, но не могут.
+
+Хорошо бы показывать их посетителям не пустой `iframe`, а нечто, что может быть более интересно.
+
+Например, можно изначально "накрывать" документ `div` с `height:100%;width:100%`, который будет перехватывать все клики. И поставить на нём ссылку, ведующую на страницу в новом окне.
+
+```html
+<style>
+  #iframe-protector {
+    height: 100%; 
+    width: 100%; 
+    position: absolute; 
+    left: 0; 
+    top: 0;
+    z-index: 99999999;
+  }
+</style>
+
+<div id="iframe-protector">
+  <a href="/" target="_blank">Перейти на сайт</a>
+</div>
+
+<script>
+  if (top.document.domain == document.domain) {
+    убрать iframe-protector
+  }
+</script>
+```
+
+Если страница -- не во фрейме или домен совпадает, то посетитель не увидит его.
+
+## Заключение
+
+Атаку "Clickjacking" легко осуществить, если на сайте есть действие, активируемое с помощью одного клика.
+
+Злоумышленник может осуществить атаку через целенаправленно на посетителей ресурса -- опубликовав ссылку на форуме, или «счастливой рассылкой». Существует масса вариантов.
+
+<ul>
+<li>Рекомендуется использовать X-Frame-Options на страницах, заведомо не предназначеных для запуска во фрейме и на важнейших страницах (финансовые транзакции).</li>
+<li>Используйте защиту через framebusting для защиты IE<8, т.к. там не поддерживается X-Frame-Options.</li>
+<li>Используйте перекрывающий DIV, если это допустимо вашим проектом и вы хотите разрешить безопасный показ документа во фреймах с любых доменов.</li>
+</ul>
+
+<div style="text-align:right; font-style:italic">При участии Марата Шагиева</div>
\ No newline at end of file
diff --git a/3-more/7-frames-and-windows/7-clickjacking/cj_location.html b/3-more/7-frames-and-windows/7-clickjacking/cj_location.html
new file mode 100755
index 00000000..1c2ba89a
--- /dev/null
+++ b/3-more/7-frames-and-windows/7-clickjacking/cj_location.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+<div>Меняет top.location на google.com</div>
+
+<script>
+  top.location = 'http://google.com';
+</script>
+
+<input type="button" value="Like" onclick="alert('Кнопка сработала')">
+
+</body>
+</html>
diff --git a/3-more/7-frames-and-windows/7-clickjacking/clickjacking.view/index.html b/3-more/7-frames-and-windows/7-clickjacking/clickjacking.view/index.html
new file mode 100755
index 00000000..430149de
--- /dev/null
+++ b/3-more/7-frames-and-windows/7-clickjacking/clickjacking.view/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<style>
+iframe { /* iframe с сайта-жертвы */
+  width:300px;
+  height:100px;
+  position:absolute;
+  top:0; left:-20px;
+  filter:alpha(opacity=0); 
+  opacity:0;
+  z-index: 1;
+}
+</style>
+ 
+<div>Нажмите, чтобы разбогатеть сейчас:</div>
+     
+<iframe src="/files/tutorial/window/facebook.html"></iframe>
+ 
+<a href="http://google.com">Нажми тут!</a>
+ 
+<div>..И ваша жизнь удалась!</div>
+
+</body>
+</html>
diff --git a/3-more/7-frames-and-windows/index.md b/3-more/7-frames-and-windows/index.md
new file mode 100644
index 00000000..680aa953
--- /dev/null
+++ b/3-more/7-frames-and-windows/index.md
@@ -0,0 +1,2 @@
+# Окна и Фреймы
+
diff --git a/3-more/8-regular-expressions-javascript/1-regexp-introduction/article.md b/3-more/8-regular-expressions-javascript/1-regexp-introduction/article.md
new file mode 100644
index 00000000..28a288b5
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/1-regexp-introduction/article.md
@@ -0,0 +1,104 @@
+# Паттерны и флаги
+
+Регулярные выражения –- мощное средство поиска и замены в строке. 
+
+В JavaScript регулярные выражения реализованы отдельным объектом `RegExp` и интегрированы в методы строк.
+[cut]
+
+## Регэкспы
+
+Регулярное выражение (оно же "регэксп", "регулярка" или просто "рег"), состоит из *паттерна* (он же "шаблон") и необязательных *флагов*.
+
+Синтаксис создания регулярного выражения:
+
+```js
+var regexp = new RegExp("шаблон", "флаги");
+```
+
+Как правило, используют более короткую запись через слеши `/`:
+
+```js
+var regexp = /шаблон/;     // без флагов
+var regexp = /шаблон/gmi;  // с флагами gmi (изучим их дальше)
+```
+
+Слэши `'/'` говорят JavaScript о том, что это регулярное выражение. Они играют здесь ту же роль, что и кавычки для обозначения строк.
+
+## Использование
+
+Основа регулярного выражения -- паттерн. Это строка, которую можно расширить специальными символами, которые делают поиск намного мощнее.
+
+Если флагов и специальных символов нет, то поиск по паттерну -- то же самое, что и обычный поиск подстроки:
+
+```js
+//+ run
+var str = "Я люблю JavaScript!"; // будем искать в этой строке
+ 
+var regexp = /лю/; 
+alert( str.search(regexp) ); // 2
+```
+
+Сравните с обычным поиском:
+
+```js
+//+ run
+var str = "Я люблю JavaScript!"; 
+ 
+var substr = "лю"; 
+alert( str.indexOf(substr) ); // 2
+```
+
+Как видим, то же самое, разве что для регэкспа использован метод [:String#search(reg)], а для строки [:String#indexOf(substr)]. Но это соответствие лишь кажущееся. Очень скоро мы усложним регулярные выражения, и тогда появятся отличия.
+
+[smart header="Цветовые обозначения"]
+Здесь и далее используется следующая цветовая схема:
+<ul>
+<li>регэксп (регулярное выражение) - <code class="pattern">красный</code></li>
+<li>строка - <code class="subject">синий</code></li>
+<li>результат - <code class="match">зеленый</code></li>
+</ul>
+[/smart]
+
+## Флаги
+
+Регулярные выражения могут иметь флаги, которые влияют на поиск. 
+
+В JavaScript их всего три:
+
+<dl>
+<dt>`i`</dt>
+<dd>Если этот флаг есть, то регэксп ищет независимо от регистра, то есть не различает между `А` и `а`.</dd>
+<dt>`g`</dt>
+<dd>Если этот флаг есть, то регэксп ищет все совпадения, иначе -- только первое.</dd>
+<dt>`m`</dt>
+<dd>Многострочный режим.</dd>
+</dl>
+
+Самый очевидный из этих флагов -- безусловно, `i`. 
+
+Пример его использования:
+
+```js
+//+ run
+var str = "Я люблю JavaScript!"; // будем искать в этой строке
+ 
+alert( str.search( *!*/ЛЮ/*/!* ) ); // -1
+alert( str.search( *!*/ЛЮ/i*/!* ) ); // 2
+```
+
+<ol>
+<li>С регом `/ЛЮ/` вызов вернул `-1`, что означает "не найдено" (то же соглашение, что и `indexOf`),</li>
+<li>С регом `/ЛЮ/i` вызов нашёл совпадение на позиции 2, так как стоит флаг `i`, а значит "лю" тоже подходит.</li>
+</ol>
+
+Следующий, пожалуй, самый важный флаг -- это `g`.
+
+Мы рассмотрим его в следующей секции, вместе с основными методами поиска по регулярным выражениям в JavaScript.
+
+## Итого
+
+<ul>
+<li>Регулярное выражение состоит из шаблона и необязательных флагов `g`, `i` и `m`.</li>
+<li>Поиск по регулярному выражению <code class="pattern">/регэксп/</code> без флагов и спец. символов, которые мы изучим далее -- это то же самое, что и обычный поиск подстроки в строке.</li>
+<li>Метод строки `str.search(regexp)` возвращает индекс, на котором найдено совпадение.</li>
+</ul>
diff --git a/3-more/8-regular-expressions-javascript/10-regexp-backreferences/article.md b/3-more/8-regular-expressions-javascript/10-regexp-backreferences/article.md
new file mode 100644
index 00000000..f2f69286
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/10-regexp-backreferences/article.md
@@ -0,0 +1,52 @@
+# Обратные ссылки \\n и $n
+
+На скобочные группы можно ссылаться как в самом паттерне, так и в строке замены.
+[cut]
+
+Ссылки в строке замены мы уже видели: они имеют вид `$n`, где `n` -- это номер скобочной группы. Вместо `$n` подставляется содержимое соответствующей скобки:
+
+```js
+//+ run
+var name = "Александр Пушкин";
+
+name = name.replace(/([а-яё]+) ([а-яё]+)/i, "$2, $1");
+alert(name); // Пушкин, Александр
+```
+
+К скобочной группе можно также обратиться в самом шаблоне.
+
+Рассмотрим это в реальном примере -- необходимо найти строку в кавычках. Эта строка может быть в одинарных кавычках <code class="subject">'...'</code> или в двойных <code class="subject">"..."</code> -- не важно, в каких именно, но открывающая и закрывающая кавычки должны быть одинаковыми.
+
+Как такие строки искать? Регэксп <code class="pattern">`['"](.*?)['"]`</code> позволяет использовать разные кавычки, но он даст неверный ответ в случае, если одна кавычка ненароком оказалась внутри другой, как например в строке <code class="subject">"She's the one"</code>:
+
+```js
+//+ run
+str = "He said:\"She's the one\"."
+
+reg = /['"](.*?)['"]/g
+
+alert( str.match(reg) ) // "She'
+```
+
+Как видно, регэксп нашёл открывающую кавычку <code class="match">"</code>, затем текст, вплоть до новой кавычки <code class="match">'</code>, которая закрывает соответствие.
+
+Для того, чтобы попросить регэксп искать закрывающую кавычку -- такую же, как открывающую, мы обернём её в скобочную группу и используем обратную ссылку на неё:
+
+```js
+//+ run
+str = "He said:\"She's the one\"."
+
+reg = /(['"])(.*?)\1/g
+
+alert( str.match(reg) ) // "She's the one"
+```
+
+Теперь работает верно!
+
+Обратим внимание на два нюанса:
+
+<ul>
+<li>В строке замены ссылка на первую скобочную группу выглядит как `$1`, а в шаблоне нужно использовать `\1`.</li>
+<li>Чтобы обращаться к скобочной группе -- не важно откуда, она не должна быть исключена из запоминаемых при помощи `?:`, то есть `(?:['"])` не подошло бы.</li>
+</ul>
+ 
diff --git a/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/article.md b/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/article.md
new file mode 100644
index 00000000..a036a6c6
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/article.md
@@ -0,0 +1,82 @@
+# Чёрная дыра бэктрекинга
+
+Некоторые регулярные выражения, с виду являясь простыми, могут выполняться оооочень долго, и даже подвешивать браузер.
+
+[cut]
+Например, попробуйте пример ниже в Chrome или IE (осторожно, подвесит браузер!):
+
+```js
+//+ run
+alert( '123456789012345678901234567890z'.match(/(\d+)*$/) );
+```
+
+Некоторые движки регулярных выражений (Firefox) справляются с таким регэкспом, а некоторые (IE, Chrome) -- нет.
+
+В чём же дело, что не так с регэкспом?
+
+Да с регэкспом-то всё так, синтаксис вполне допустимый. Проблема в том, как выполняется поиск по нему.
+
+Для краткости рассмотрим более короткую строку: <code class="subject">1234567890z</code>:
+
+<ol>
+<li>Первым делом, движок регэкспов пытается найти <code class="pattern">\d+</code>. Плюс <code class="pattern">+</code> является жадным по умолчанию, так что он хватает все цифры, какие может.
+
+Затем движок пытается применить звёздочку вокруг скобок <code class="pattern">(\d+)*</code>, но больше цифр нет, так что звёздочка не даёт повторений. 
+
+После этого в паттерне остаётся <code class="pattern">$</code>, а в тексте -- символ <code class="subject">z</code>. 
+
+<img src="bad_backtrack_greedy1.png">
+
+Так как соответствия нет, то жадный плюс <code class="pattern">+</code> отступает на один символ (бэктрекинг, зелёная стрелка на рисунке выше).
+</li>
+<li>После бэктрекинга, <code class="pattern">\d+</code> содержит всё число, кроме последней цифры. Затем движок снова пытается найти совпадение, уже с новой позиции (`9`). 
+
+Звёздочка <code class="pattern">(\d+)*</code> теперь может быть применена -- она даёт ещё одно число <code class="match">9</code>:
+
+<img src="bad_backtrack_greedy11.png">
+
+Движок пытается найти `$`, но это ему не удаётся -- на его пути опять `z`:
+
+<img src="bad_backtrack_greedy2.png">
+
+Так как совпадения нет, то поисковой движок отступает назад ещё раз.
+</li>
+<li>Теперь первое число <code class="pattern">\d+</code> будет содержать 8 цифр, а остаток строки <code class="subject">90</code> становится вторым <code class="pattern">\d+</code>:
+
+<img src="bad_backtrack_greedy3.png">
+
+Увы, всё ещё нет соответствия для <code class="pattern">$</code>.
+
+Поисковой движок снова должен отступить назад. При этом последний жадный квантификатор отпускает символ. В данном случае это означает, что укорачивается второй <code class="pattern">\d+</code>, до одного символа <code class="subject">9</code>.
+</li>
+<li>Теперь движок регулярных выражений снова может применить звёздочку и находит третье число <code class="pattern">\d+</code>:
+
+<img src="bad_backtrack_greedy4.png">
+
+...И снова неудача. Второе и третье <code class="pattern">\d+</code> отступили по-максимуму, так что сокращается снова первое число.
+</li>
+<li>Теперь есть 7 цифр в первом <code class="pattern">\d+</code>. Поисковой движок видит место для второго <code class="pattern">\d+</code>, теперь уже с позиции 8:
+
+<img src="bad_backtrack_greedy5.png">
+
+Так как совпадения нет, второй <code class="pattern">\d+</code> отступает назад....
+</li>
+<li>...И так далее, легко видеть, что поисковой движок будет перебирать *все возможные комбинации* <code class="pattern">\d+</code> в числе. А их много.</li>
+</ol>
+
+На этом месте умный читатель может воскликнуть: "Бэктрекинг? Давайте включим ленивый режим -- и не будет никакого бэктрекинга!"
+
+Что ж, заменим <code class="pattern">\d+</code> на <code class="pattern">\d+?</code> и посмотрим (аккуратно, может подвесить браузер):
+
+```js
+//+ run
+alert( '123456789012345678901234567890z'.match(/(\d+?)*$/) );
+```
+
+Не помогло!
+
+**Ленивые регулярные выражения делают то же самое, но в обратном порядке.**
+
+Просто подумайте о том, как будет в этом случае работать поисковой движок.
+
+Некоторые движки регулярных выражений, например Firefox, содержат хитрые проверки, в дополнение к алгоритму выше, которые позволяют избежать бесконечного перебора или кардинально ускорить его, но все движки и не всегда.
diff --git a/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy1.png b/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy1.png
new file mode 100755
index 00000000..5bebdcf1
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy1.png differ
diff --git a/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy11.png b/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy11.png
new file mode 100755
index 00000000..3ebb6196
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy11.png differ
diff --git a/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy2.png b/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy2.png
new file mode 100755
index 00000000..6dccbe98
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy2.png differ
diff --git a/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy3.png b/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy3.png
new file mode 100755
index 00000000..170cdebf
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy3.png differ
diff --git a/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy4.png b/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy4.png
new file mode 100755
index 00000000..b64e4952
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy4.png differ
diff --git a/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy5.png b/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy5.png
new file mode 100755
index 00000000..5aa6792d
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy5.png differ
diff --git a/3-more/8-regular-expressions-javascript/12-regexp-alternation/article.md b/3-more/8-regular-expressions-javascript/12-regexp-alternation/article.md
new file mode 100644
index 00000000..b9a4cb55
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/12-regexp-alternation/article.md
@@ -0,0 +1,26 @@
+# Альтернация (или) | 
+
+Альтернация -- термин в регулярных выражениях, которому в русском языке соответствует слово "ИЛИ". Она обозначается символом вертикальной черты <code class="pattern">|</code> и позволяет выбирать между вариантами.
+
+[cut]
+
+Например, нам нужно найти языки программирования: HTML, PHP, Java и JavaScript.
+
+Соответствующее регулярное выражение: <code class="pattern">/html|php/java(script)?/</code>:
+
+```js
+//+ run
+var reg = /html|php|css|java(script)?/gi
+
+var str = "Сначала появился HTML, затем CSS, потом JavaScript"
+
+alert( str.match(reg) )  // 'HTML', 'CSS', 'JavaScript'
+```
+
+**Альтернация имеет очень низкий приоритет.**
+
+Чтобы регэксп находил одновременно <code class="match">gr<b>a</b>y</code> и <code class="match">gr<b>e</b>y</code>, можно использовать <code class="pattern">gr(a|e)y</code> или <code class="pattern">gr[ae]y</code>, но не <code class="pattern">gra|ey</code>. Последний регэксп применит альтернацию к подвыражениям: <code class="pattern">gra</code> (ИЛИ) <code class="pattern">ey</code>.
+
+
+
+
diff --git a/3-more/8-regular-expressions-javascript/13-regexp-ahchors-and-multiline-mode/article.md b/3-more/8-regular-expressions-javascript/13-regexp-ahchors-and-multiline-mode/article.md
new file mode 100644
index 00000000..736de5d2
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/13-regexp-ahchors-and-multiline-mode/article.md
@@ -0,0 +1,62 @@
+# Начало ^ и конец $ строки, многострочный режим
+
+Знак каретки <code class="pattern">'^'</code> и доллара <code class="pattern">'$'</code> имеют в регулярном выражении особый смысл. Их называют "якорями" (anchor - англ.).
+[cut]
+
+Каретка <code class="pattern">^</code> совпадает в начале текста, а доллар <code class="pattern">$</code> -- в конце.
+
+**Якоря являются не символами, а проверками. Они совпадают на "позиции".**
+
+Это очень важное отличие по сравнению с символьными классами. Если движок регулярных выражений видит <code class="pattern">^</code> -- он *проверяет* начало текста, <code class="pattern">$</code> -- проверяет конец текста, при этом *никаких символов к совпадению не добавляется*.
+
+Каретку <code class="pattern">^</code> обычно используют, чтобы указать, что регулярное выражение необходимо проверить именно с начала текста.
+
+Например, без каретки:
+
+```js
+//+ run
+var str = '100500 попугаев съели 500100 бананов!';
+alert( str.match( /\d+/ig )  // 100500, 500100 (все числа)
+```
+
+А с кареткой:
+
+```js
+//+ run
+var str = '100500 попугаев съели 500100 бананов!';
+alert( str.match( /^\d+/ig )  // 100500 (только в начале строки)*!*
+```
+
+Знак доллара <code class="pattern">$</code> используют, чтобы указать, что паттерн должен заканчиваться в конце текста.
+
+Тот же пример с долларом:
+
+```js
+//+ run
+var str = '100500 попугаев съели 500100 бананов!';
+alert( str.match( /\d+$/ig )  // null (в начале строки чисел нет)*!*
+```
+
+Якоря используют одновременно, чтобы указать, что паттерн должен охватывать текст с начала и до конца. Обычно это требуется при валидации.
+
+Например, мы хотим проверить, что в переменной `num` хранится именно десятичная дробь. 
+
+Ей соответствует регэксп <code class="pattern">\d+\.\d+</code>. Но простая проверка найдёт дробь в любом тексте:
+
+```js
+//+ run
+var num = "ля-ля 12.34";
+alert( num.match( /\d+\.\d+/ig) );  // 12.34
+```
+
+Если мы хотим проверить, что `num` *целиком* соответствует паттерну <code class="pattern">\d+\.\d+</code>, то укажем якоря по обе стороны от него:
+
+```js
+//+ run
+var num = "ля-ля 12.34";
+alert( num.match( /^\d+\.\d+$/ig) );  // null, не дробь
+
+var num = "12.34";
+alert( num.match( /^\d+\.\d+$/ig) );  // 12.34, дробь!
+```
+
diff --git a/3-more/8-regular-expressions-javascript/14-regexp-multiline-mode/article.md b/3-more/8-regular-expressions-javascript/14-regexp-multiline-mode/article.md
new file mode 100644
index 00000000..d2e147e8
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/14-regexp-multiline-mode/article.md
@@ -0,0 +1,59 @@
+# Многострочный режим, флаг "m"
+
+Многострочный режим включается, если у регэкспа есть флаг <code class="pattern">/m</code>. 
+[cut]
+
+В этом случае изменяется поведение <code class="pattern">^</code> и <code class="pattern">$</code>.
+
+**В многострочном режиме якоря означают не только начало/конец текста, но и начало/конец строки.**
+
+В примере ниже текст состоит из нескольких строк. Паттерн <code class="pattern">/^\d+/gm</code> берёт число с начала каждой строки:
+
+```js
+//+ run
+var str = '1е место: Винни-пух\n' +
+  '2е место: Пятачок\n' +
+  '33е место: Слонопотам';
+
+alert( str.match(/^\d+/gm ) ); // 1, 2, 33*!*
+```
+
+Обратим внимание -- без флага <code class="pattern">/m</code> было бы только первое число:
+
+```js
+//+ run
+var str = '1е место: Винни-пух\n' +
+  '2е место: Пятачок\n' +
+  '33е место: Слонопотам';
+
+alert( str.match(/^\d+/g ) ); // 1
+```
+
+Это потому что в обычном режиме каретка <code class="pattern">^</code> -- это только начало текста.
+
+Символ доллара <code class="pattern">$</code> ведёт себя точно так же.
+
+Следующий пример находит последнее слово в строке:
+
+TODO: указать на коренное отличие $ от \n: доллар не матчит символ, а \n матчит!!!!
+
+```js
+//+ run
+showMatch( 
+  '1st: *!*John*!*\n' +
+  '2nd: *!*Mary*/!*\n' +
+  '33rd: *!*Peter*/!*', /\w+$/gm )  // John, Mary, Peter
+```
+
+Please note that <code class="pattern">$</code> as well as <code class="pattern">^</code> doesn't add <code class="match">\n</code> to the match. They only check that the position is right.
+
+
+[summary]
+<ul>
+<li>The caret <code class="pattern">'^'</code> matches the position at the the text start. *In multiline mode* it also matches after the newline symbol.</li>
+<li>The dollar <code class="pattern">'$'</code> matches the position at the text end. *In multiline mode* it also matches before the newline symbol.</li>
+</ul>
+
+**For both anchors, the regexp engine only checks the position, and doesn't match a character.**
+[/summary]
+
diff --git a/3-more/8-regular-expressions-javascript/15-regexp-word-boundary/article.md b/3-more/8-regular-expressions-javascript/15-regexp-word-boundary/article.md
new file mode 100644
index 00000000..09ddc758
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/15-regexp-word-boundary/article.md
@@ -0,0 +1,69 @@
+# Word boundary
+
+Another position check is a *word boundary* <code class="pattern">\b</code>. It doesn't match a character, but matches in situations when a wordly character follows a non-wordly or vice versa. A "non-wordly" may also be text start or end.
+[cut]
+For example, <code class=pattern">\bdog\b</code> matches a standalone <code class="subject">dog</code>, not <code class="subject">doggy</code> or <code class="subject">catdog</code>:
+
+```js
+//+ run
+showMatch( "doggy catdog dog", /\bdog\b/ ) // "dog"
+```
+
+Here, <code class="match">dog</code> matches, because the previous char is a space (non-wordly), and the next position is text end.
+
+Normally, <code class="pattern">\w{4}</code> matches 4 consequent word characters.
+If the word is long enough, it may match multiple times:
+
+```js
+//+ run
+showMatch( "Boombaroom", /\w{4}/g) // 'Boom', 'baro'
+```
+
+Appending <code class="pattern">\b</code> causes <code class="pattern">\w{4}\b</code> to match only at word end:
+
+```js
+//+ run
+showMatch( "Because life is awesome", /\w{4}\b/g) // 'ause', 'life', 'some'
+```
+
+**The word boundary <code class="pattern">\b</code> like <code class="pattern">^</code> and <code class="pattern">$</code> doesn't match a char. It only performs the check.**
+
+Let's add the check from another side, <code class="pattern">\b\w{4}\b</code>:
+
+```js
+//+ run
+showMatch( "Because life is awesome", /\b\w{4}\b/g) //  'life'
+```
+
+Now there is only one result <code class="match">life</code>.
+
+<ol>
+<li>The regexp engine matches first word boundary <code class="pattern">\b</code> at zero position:
+<img src="boundary1.png">
+</li>
+<li>Then it successfully matches <code class="pattern">\w{4}</code>, but fails to match finishing <code class="pattern">\b</code>.
+
+<img src="boundary2.png">
+
+So, the match at position zero fails. 
+</li>
+<li>The search continues from position 1, and the closest <code class="pattern">\b</code> is right after <code class="subject">Because</code> (position 9):
+
+<img src="boundary3.png">
+
+Now <code class="pattern">\w{4}</code> doesn't match, because the next character is a space.
+</li>
+<li>The search continues, and the closest <code class="pattern">\b</code> is right before <code class="subject">life</code> at position 11.
+
+<img src="boundary4.png">
+
+Finally, <code class="pattern">\w{4}</code> matches and the position check <code class="pattern">\b</code> after it is positive. We've got the result.
+</li>
+<li>The search continues after the match, but doesn't yield new results.</li>
+</ol>
+
+**The word boundary check <code class="pattern">/\b/</code> works only for words in latin alphabet,** because it is based on <code class="pattern">\w</code> as "wordly" chars. Sometimes that's acceptable, but limits the application range of the feature. 
+
+And, for completeness..
+**There is also an inverse check <code class="pattern">\B</code>, meaning a position other than <code class="pattern">\b</code>.** It is extremely rarely used.
+
diff --git a/3-more/8-regular-expressions-javascript/15-regexp-word-boundary/boundary1.png b/3-more/8-regular-expressions-javascript/15-regexp-word-boundary/boundary1.png
new file mode 100755
index 00000000..cc687e52
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/15-regexp-word-boundary/boundary1.png differ
diff --git a/3-more/8-regular-expressions-javascript/15-regexp-word-boundary/boundary2.png b/3-more/8-regular-expressions-javascript/15-regexp-word-boundary/boundary2.png
new file mode 100755
index 00000000..71570c22
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/15-regexp-word-boundary/boundary2.png differ
diff --git a/3-more/8-regular-expressions-javascript/15-regexp-word-boundary/boundary3.png b/3-more/8-regular-expressions-javascript/15-regexp-word-boundary/boundary3.png
new file mode 100755
index 00000000..b766ab34
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/15-regexp-word-boundary/boundary3.png differ
diff --git a/3-more/8-regular-expressions-javascript/15-regexp-word-boundary/boundary4.png b/3-more/8-regular-expressions-javascript/15-regexp-word-boundary/boundary4.png
new file mode 100755
index 00000000..e14352f6
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/15-regexp-word-boundary/boundary4.png differ
diff --git a/3-more/8-regular-expressions-javascript/16-regexp-practice/article.md b/3-more/8-regular-expressions-javascript/16-regexp-practice/article.md
new file mode 100644
index 00000000..e30a77b3
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/16-regexp-practice/article.md
@@ -0,0 +1,7 @@
+# Practice 
+
+Here you found tasks which help in understanding regexp construction principles.
+[cut]
+
+
+The tutorial is not finished. Till now, we have it up to this part...
\ No newline at end of file
diff --git a/3-more/8-regular-expressions-javascript/17-regexp-orphans/article.md b/3-more/8-regular-expressions-javascript/17-regexp-orphans/article.md
new file mode 100644
index 00000000..5be77f5f
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/17-regexp-orphans/article.md
@@ -0,0 +1,5 @@
+# Задачи-сироты по регекспам
+
+
+
+
diff --git a/3-more/8-regular-expressions-javascript/2-regexp-methods/article.md b/3-more/8-regular-expressions-javascript/2-regexp-methods/article.md
new file mode 100644
index 00000000..69c9f736
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/2-regexp-methods/article.md
@@ -0,0 +1,376 @@
+# Методы RegExp и String
+
+В JavaScript методы для работы с регулярными выражениями есть в классе `RegExp`, а также встроены в обычные строки `String`
+
+Всего этих методов немного, поэтому мы сначала рассмотрим их по отдельности, а затем -- рецепты по решению стандартных задач с ними.
+
+[cut]
+
+## Методы строк
+
+### str.search(regexp)  
+
+Этот метод мы уже видели. 
+
+Он возвращает позицию первого совпадения или `-1`, если ничего не найдено.
+
+```js
+//+ run
+var str = "Люблю регэкспы я, но странною любовью";
+
+alert( str.search( *!*/лю/i*/!* ) ); // 0
+```
+
+**Ограничение метода `search` -- он всегда ищет только первое совпадение.**
+
+Нельзя заставить `search` искать дальше первого совпадения, такой синтаксис попросту не предусмотрен. Но есть другие методы, которые это умеют.
+
+### str.match(regexp) без флага g, скобочные выражения
+
+Метод `str.match` работает по-разному, в зависимости от наличия или отсутствия флага `g`, поэтому сначала мы разберём вариант, когда его нет.
+
+В этом случае `str.match(regexp)` находит только одно, первое совпадение.
+
+Результат вызова -- это массив, состоящий из этого совпадения, с дополнительными свойствами `index` -- позиция, на которой оно обнаружено и `input` -- строка, в которой был поиск.
+
+Например:
+
+```js
+//+ run
+var str = "ОЙ-Ой-ой";
+
+var result = str.match( *!*/ой/i*/!* );
+
+alert( result[0] ); // ОЙ  (совпадение)
+alert( result.index ); // 0 (позиция)
+alert( result.input ); // ОЙ-Ой-ой (поисковая строка)
+```
+
+У этого массива не всегда только один элемент. 
+
+**Если часть шаблона обозначена скобками, то она станет отдельным элементом массива.**
+
+Например:
+
+```js
+//+ run
+var str = "javascript - это такой язык";
+
+var result = str.match( *!*/JAVA(SCRIPT)/i*/!* );
+
+alert( result[0] ); // javascript (всё совпадение полностью)  
+alert( result[1] ); // script (часть совпадения, соответствующая скобкам)
+// также есть свойства result.index, result.input
+```
+
+Благодаря флагу `i` поиск не обращает внимание на регистр буквы, поэтому находит <code class="match">javascript</code>. При этом часть строки, соответствующая <code class="pattern">SCRIPT</code>, выделена в отдельный элемент массива. Позже мы используем это для поиска с заменой.
+
+### str.match(regexp) с флагом g
+
+При наличии флага `g`, вызов `match` возвращает обычный массив из всех совпадений.
+
+Никаких дополнительных свойств у массива в этом случае нет, скобки дополнительных элементов не порождают.
+
+Например:
+
+```js
+//+ run
+var str = "ОЙ-Ой-ой";
+
+var result = str.match( *!*/ой/ig*/!* );
+
+alert( result ); // ОЙ, Ой, ой
+```
+
+Пример со скобками:
+
+```js
+//+ run
+var str = "javascript - это такой язык";
+
+var result = str.match( *!*/JAVA(SCRIPT)/gi*/!* );
+
+alert( result[0] ); // javascript
+alert( result.length ); // 1
+alert( result.index ); // undefined
+```
+
+Из последнего примера видно, что элемент в массиве ровно один, и свойства `index` также нет. Такова особенность глобального поиска при помощи `match`  -- он просто возвращает все совпадения.
+
+Для расширенного глобального поиска, который позволит получить все позиции и, при желании, скобки, нужно использовать метод [:RegExp#exec], которые будет рассмотрен далее.
+
+
+[warn header="В случае, если совпадений не было, `match` возвращает `null`"]
+Обратите внимание, это важно -- если `match` не нашёл совпадений, он возвращает не пустой массив, а именно `null`.
+
+Это важно иметь в виду, чтобы не попасть в такую ловушку:
+
+```js
+//+ run
+var str = "Ой-йой-йой";
+
+alert( str.match( /лю/gi ).length ) // ошибка! нет свойства length у null
+```
+
+[/warn]
+
+### str.split(regexp|substr, limit)  
+
+Разбивает строку в массив по разделителю -- регулярному выражению `regexp` или подстроке `substr`. 
+
+Обычно мы используем метод `split` со строками, вот так:
+
+```js
+//+ run
+alert( '12-34-56'.split('-') ) // [12, 34, 56]
+```
+
+Можно передать в него и регулярное выражение, тогда он разобьёт строку по всем совпадениям.
+
+Тот же пример с регэкспом:
+
+```js
+//+ run
+alert( '12-34-56'.split(/-/) ) // [12, 34, 56]
+```
+
+### str.replace(regexp, newSubStr|function)   
+
+Швейцарский нож для работы со строками, поиска и замены любого уровня сложности.
+
+Его простейшее применение -- поиск и замена подстроки в строке, вот так:
+
+```js
+//+ run
+// заменить дефис на двоеточие
+alert( '12-34-56'.replace("-", ":" ) )  // 12:34-56
+```
+
+При вызове со строкой замены `replace` всегда заменяет только первое совпадение.
+
+**Чтобы заменить *все* совпадения, нужно использовать для поиска не строку `"-"`, а регулярное выражение <code class="pattern">/-/g</code>, причём обязательно с флагом `g`:**
+
+```js
+//+ run
+// заменить дефис на двоеточие
+alert( '12-34-56'.replace( *!*/-/g*/!*, ":" ) )  // 12:34:56
+```
+
+В строке для замены можно использовать специальные символы:
+
+<table>
+    <tr>
+        <th>Спецсимволы</th>
+        <th>Действие в строке замены</th>
+    </tr>
+    <tr>
+        <td>`$$`</td>
+        <td>Вставляет `"$"`.</td>
+    </tr>
+    <tr>
+        <td>`$&`</td>
+        <td>Вставляет всё найденное совпадение.</td>
+    </tr>
+    <tr>
+        <td><code>$&#096;</code></td>
+        <td>Вставляет часть строки до совпадения.</td>
+    </tr>
+    <tr>
+        <td>
+            <code>$'</code>
+        </td>
+        <td>Вставляет часть строки после совпадения.</td>
+    </tr>
+    <tr>
+        <td>
+            <code>$*n*</code>
+        </td>
+        <td>где `n` -- цифра или двузначное число, обозначает `n-ю` по счёту скобку, если считать слева-направо.</td>
+    </tr>
+</table>
+
+Пример использования скобок и `$1`, `$2`:
+
+```js
+//+ run
+var str = "Василий Пупкин";
+
+alert( str.replace( /(Василий) (Пупкин)/ ,'$2, $1') ) // Пупкин, Василий
+```
+
+Ещё пример, с использованием `$&`:
+
+```js
+//+ run
+var str = "Василий Пупкин";
+
+alert( str.replace( /Василий Пупкин/ ,'Великий $&!') ) // Великий Василий Пупкин!
+```
+
+**Для ситуаций, который требуют максимально "умной" замены, в качестве второго аргумента предусмотрена функция.**
+
+Она будет вызвана для каждого совпадения, и её результат будет вставлен как замена.
+
+Например:
+
+```js
+//+ run
+var i = 0;
+
+// заменить каждое вхождение "ой" на результат вызова функции
+alert( "ОЙ-Ой-ой".replace( /ой/gi, function() { return ++i; }) ); // 1-2-3
+```
+
+Эта функция также получает аргументы: 
+
+<ol>
+<li>`str` -- найденное совпадение,</li>
+<li>`p1, p2, ..., pn` -- содержимое скобок</li>
+<li>`offset` -- позиция, на которой найдено совпадение</li>
+<li>`s` -- исходная строка</li>
+</ol>
+
+Если скобок в регулярном выражении нет, то у функции всегда будет ровно 3 аргумента.
+
+Используем это, чтобы вывести полную информацию о совпадениях:
+
+```js
+//+ run
+// вывести и заменить все совпадения
+function replacer(str, offset, s) {
+  alert("Найдено: " + str + " на позиции: " + offset + " в строке: " + s);
+  return ":"
+} 
+
+var result = "ОЙ-Ой-ой".replace( /ой/gi, replacer);
+alert('Результат: ' + result);
+```
+
+Со скобочными выражениями:
+
+```js
+//+ run
+function replacer(str, name, surname, offset, s) {
+  return surname +", " + name;
+}
+ 
+alert( str.replace( /(Василий) (Пупкин)/ , replacer) ) // Пупкин, Василий
+```
+
+Функция для замены -- это самое мощное средство, какое только может быть. Она владеет всей информацией о совпадении и имеет доступ к замыканию, поэтому может всё.
+
+## Методы объектов RegExp
+
+Регэкспы являются объектами класса [:RegExp].
+
+У них есть два основных метода.
+
+### regexp.test(str) 
+
+Проверяет, есть ли хоть одно совпадение в строке `str`. Возвращает `true/false`.
+
+Работает, по сути, так же, как и проверка `str.search(regexp) != -1`, например:
+
+```js
+//+ run
+var str = "Люблю регэкспы я, но странною любовью";
+
+alert( *!*/лю/i*/!*.test(str) ) // true
+alert( str.search(*!*/лю/i*/!*) != -1 ) // true
+```
+
+Пример с отрицательным результатом:
+
+```js
+//+ run
+var str = "Ой, цветёт калина...";
+
+alert( *!*/javascript/i*/!*.test(str) ) // false
+alert( str.search(*!*/javascript/i*/!*) != -1 ) // false
+```
+
+### regexp.exec(str)  
+
+Этот метод -- самое мощное, что только есть для поиска с использованием регулярных выражений.
+
+Он ведёт себя по-разному, в зависимости от того, есть ли у регэкспа флаг `g`.
+
+<ul>
+<li>Если флага `g` нет, то `regexp.exec(str)` ищет и возвращает первое совпадение, является полным аналогом вызова `str.match(regexp)`.</li>
+<li>Если флаг `g` есть, то вызов `regexp.exec` возвращает первое совпадение и *запоминает* его позицию в свойстве `regexp.lastIndex`. Последующий поиск он начнёт уже с этой позиции. Если совпадений не найдено, то сбрасывает `regexp.lastIndex` в ноль.</li>
+</ul>
+
+Второй вариант запуска обычно используют в цикле:
+
+```js
+//+ run
+var str = 'Многое по JavaScript можно найти на сайте http://javascript.ru';
+
+var regexp = /javascript/ig;
+
+alert("Начальное значение lastIndex: " + regexp.lastIndex);
+
+while( result = regexp.exec(str) ) { 
+  alert('Найдено: ' + result[0] + ' на позиции:' + result.index);
+  alert('Свойство lastIndex: ' + regexp.lastIndex);
+}
+
+alert('Конечное значение lastIndex: ' + regexp.lastIndex);
+```
+
+Здесь цикл продолжается до тех пор, пока `regexp.exec` не вернёт `null`, что означает "совпадений больше нет".
+
+Найденные результаты последовательно помещаются в `result`, причём находятся там в том же формате, что и `match` -- с учётом скобок, со свойствами `result.index` и `result.input`.
+
+[smart header="Поиск с нужной позиции"]
+Технически, можно заставить `regexp.exec` искать сразу с нужной позиции, если поставить `lastIndex` вручную:
+
+```js
+//+ run
+var str = 'Многое по JavaScript можно найти на сайте http://javascript.ru';
+
+var regexp = /javascript/ig;
+regexp.lastIndex = 40;
+
+alert( regexp.exec(str).index ); // 49, поиск начат с 40й позиции
+```
+
+[/smart]
+
+## Итого, рецепты
+
+Методы становятся гораздо понятнее, если разбить их использование по задачам, которые нужны в реальной жизни.
+
+<ul>
+<li>Для поиска только одного совпадения:
+<dl>
+<dt>Найти позицию первого совпадения</dt>
+<dd>`str.search(regexp)`</dd>
+<dt>Найти само совпадение</dt>
+<dd>`str.match(regexp)`</dd>
+<dt>Проверить, есть ли хоть одно совпадение</dt>
+<dd>`regexp.test(str)`, также можно использовать `str.search(regexp) != -1`</dd>
+<dt>Найти совпадение с нужной позиции</dt>
+<dd>`regexp.exec(str)`, начальную позицию поиска задать в `regexp.lastIndex`</dd>
+</dl>
+</li>
+<li>Для поиска всех совпадений:
+<dl>
+<dt>Найти массив совпадений</dt>
+<dd>`str.match(regexp)`, с флагом `g`</dd>
+<dt>Получить все совпадения, с подробной информацией о каждом</dt>
+<dd>`regexp.exec(str)` с флагом `g`, в цикле</dd>
+</dl>
+</li>
+<li>Дополнительно:
+<dl>
+<dt>Для поиска-и-замены</dt>
+<dd>`str.replace(regexp, str|func)`</dd>
+<dt>Для разбивки строки на части</dt>
+<dd>`str.split(regexp)`</dd>
+</dl>
+</li>
+</ul>
+
+Далее мы перейдём к более подробному изучению синтаксиса регулярных выражений.
+
diff --git a/3-more/8-regular-expressions-javascript/3-regexp-character-classes/article.md b/3-more/8-regular-expressions-javascript/3-regexp-character-classes/article.md
new file mode 100644
index 00000000..83b2337c
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/3-regexp-character-classes/article.md
@@ -0,0 +1,152 @@
+# Символьные классы
+
+Рассмотрим задачу -- есть телефонный номер `"+7(903)-123-45-67"`, и нам нужно найти в этой строке цифры, а остальные символы нас не интересуют.
+
+**Для поиска символов определённого вида, в регулярных выражениях предусмотрены "классы символов".**
+[cut]
+Класс символов -- это, в первую очередь, специальное обозначение.
+
+Например, в данном случае нам нужен класс "произвольная цифра", он обозначается `\d`. 
+
+Это обозначение вставляется в паттерн наравне с остальными символами. При поиске под него подходит любая цифра.
+
+Пример ниже ищет все цифры в строке:
+
+```js
+//+ run
+var str = "+7(903)-123-45-67";
+
+var reg = /\d/g
+
+alert( str.match(reg) ); // 7,9,0,3,1,2,3,4,5,6,7
+```
+
+Есть и другие классы. Самые полезные:
+<dl>
+<dt>`\d` (от английского "digit" - "цифра")</dt>
+<dd>Цифра, символ от `0` до `9`.</dd>
+<dt>`\s` (от английского "space" - "пробел")</dt>
+<dd>Пробельный символ, включая табы, переводы строки и т.п.</dd>
+<dt>`\w` (от английского "word" -- "слово") </dt>
+<dd>Символ латинского алфавита или цифра или подчёркивание `'_'`</dd>
+</dl>
+
+**Регулярное выражение обычно содержит одновременно и обычные символы и классы**:
+
+Например, найдём строку `CSS` с любой цифровой версией:
+
+```js
+//+ run
+var str = "Стандарт CSS4 - наше будущее";
+var reg = /CSS\d/
+
+alert( str.match(reg) );
+```
+
+Несколько классов в одном регэкспе:
+
+```js
+//+ run
+showMatch( "Я люблю HTML5!", /\s\w\w\w\w\d/ ); // 'HTML5'
+```
+
+Совпадение (каждому классу в регэкспе соответствует один символ результата):
+
+<img src="love_html5.png">
+
+**Также существуют обратные символьные классы:**
+
+<dl>
+<dt>`\D`</dt>
+<dd>Не-цифра, любой символ кроме `\d`</dd>
+<dt>`\S`</dt>
+<dd>Не-пробел, любой символ кроме `\s`.</dd>
+<dt>`\W`</dt>
+<dd>Символ, не принадлежащий латиннице, а также не буква и не подчёркивание, алфавиту, т.е. любой кроме `\w`</dd>
+</dl>
+
+Например, мы хотим получить из телефона <code class="subject">+7(903)-123-45-67</code> только цифры.
+
+Есть два способа сделать это. 
+
+<ol>
+<li>Первый -- найти все цифры и объединить их:
+Например:
+
+```js
+//+ run
+var str = "+7(903)-123-45-67";
+
+var digits = str.match( /\d/g ).join("");
+alert(digits); // 79031234567
+```
+
+</li>
+<li>Второй -- найти все НЕцифры и удалить их из строки:
+
+```js
+//+ run
+var str = "+7(903)-123-45-67";
+
+alert( str.replace(/\D/g, "") ); // 79031234567
+```
+
+Второй способ короче, не правда ли?
+</li>
+</ol>
+
+**Регулярное выражение может также содержать стандартные спецсимволы строк, такие как `\n, \t` и другие.** 
+
+Они являются обычными символами. Отличить их от классов очень просто -- для классов зарезервированы другие буквы.
+
+[warn header="Пробелы важны!"]
+Обычно мы не обращаем внимание на пробелы. Для нашего взгляда строки <code class="subject">1-5</code> и <code class="subject">1 - 5</code> почти идентичны.
+
+Но в регулярных выражениях **пробел - такой же символ, как и другие**.
+
+Поиск ниже не сработает, т.к. не учитывает пробелы вокруг дефиса:
+
+```js
+//+ run
+alert(  "1 - 5".match (/\d-\d/) );  // null, нет совпадений!
+```
+
+Поправим это, добавив в паттерн пробелы:
+
+```js
+//+ run
+alert(  "1 - 5".match (/\d - \d/) );  // работает, пробелы вокруг дефиса
+```
+
+В регулярные выражения также не надо вставлять лишние пробелы. Все они имеют значение:
+
+```js
+//+ run
+alert( "1-5".match( /\d - \d/ ) ); // null, так как в строке 1-5 нет пробелов
+```
+
+[/warn]
+ 
+Особым классом символов является точка `"."`.
+
+**В регулярном выражении, точка <code class="pattern">"."</code> обозначает *любой символ*, кроме перевода строки**:
+
+```js
+//+ run
+var re = /CS.4/;
+
+alert( "Стандарт CSS4".match(re) ); // найдено "CSS4"
+alert( "Сталь CS-4".match(re) ); // найдено "CS-4" 
+alert( "CS 4".match(re) ); // найдено "CS 4", пробел тоже символ
+```
+
+Обратим внимание -- точка означает именно "произвольный символ". 
+
+То есть какой-то символ на этом месте в строке должен быть:
+
+```js
+//+ run
+ 
+alert( "CS4".match (/CS.4/) ); // нет совпадений, так как для точки нет символа
+```
+
diff --git a/3-more/8-regular-expressions-javascript/3-regexp-character-classes/love_html5.png b/3-more/8-regular-expressions-javascript/3-regexp-character-classes/love_html5.png
new file mode 100755
index 00000000..13b27b6f
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/3-regexp-character-classes/love_html5.png differ
diff --git a/3-more/8-regular-expressions-javascript/4-regexp-special-characters/article.md b/3-more/8-regular-expressions-javascript/4-regexp-special-characters/article.md
new file mode 100644
index 00000000..1f08dd20
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/4-regexp-special-characters/article.md
@@ -0,0 +1,46 @@
+# Экранирование специальных символов
+
+В регулярных выражениях есть и другие символы, имеющие особый смысл. 
+
+Они используются, чтобы расширить возможности поиска. 
+
+Вот их полный список: <code class="pattern">[ \ ^ $ . | ? * + ( )</code>.
+
+Не пытайтесь запомнить его -- когда мы разберёмся с каждым из них по отдельности, он запомнится сам собой.
+
+**Чтобы использовать специальный символ в качестве обычного, он должен быть *экранирован*.** 
+
+Или, другими словами, перед символом должен быть обратный слэш `'\'`. 
+
+Например, нам нужно найти точку <code class="pattern">'.'</code>. В регулярном выражении она означает "любой символ, кроме новой строки", поэтому чтобы найти именно сам символ "точка" -- её нужно экранировать: <code class="pattern">\.</code>.
+
+```js
+//+ run
+alert( "Глава 5.1".match( /\d\.\d/ ) );  // 5.1
+```
+
+Круглые скобки также являются специальными символами, так что для поиска именно скобки нужно использовать `\(`. Пример ниже ищет строку `"g()"`:
+
+```js
+//+ run
+alert( "function g()".match( /g\(\)/ ) );  // "g()"
+```
+
+**Слэш `'/'`, хотя и не является специальными символом, но открывает-закрывает регэксп в синтаксисе <code class="pattern">/...pattern.../</code>. Поэтому его тоже нужно экранировать: <code><code>'\/'</code></code>**.
+
+Так выглядит поиск слэша `'/'`:
+
+```js
+//+ run
+alert( "/".match( /\// ) );  // '/'
+```
+
+Ну и, наконец, если нам нужно найти сам обратный слэш `\`, то его нужно просто задублировать.
+
+Так выглядит поиск обратного слэша `"\"`:
+
+```js
+//+ run
+alert( "1\2".match( /\\/ ) );  // '\'
+```
+
diff --git a/3-more/8-regular-expressions-javascript/5-regexp-character-sets-and-ranges/article.md b/3-more/8-regular-expressions-javascript/5-regexp-character-sets-and-ranges/article.md
new file mode 100644
index 00000000..ee32ba08
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/5-regexp-character-sets-and-ranges/article.md
@@ -0,0 +1,149 @@
+# Наборы и диапазоны [...]
+
+Если в регулярном выражении нескольки символов или символьных классов заключены в квадратные скобки `[…]`, то это означает "искать любой символ из указанных в `[…]`".
+
+Например, <code class="pattern">[еао]</code> означает любой символ из этих трёх: `'а'`, `'е'`, или `'о'`.
+[cut]
+Можно использовать квадратные скобки вместе с обычными символами.
+
+Например:
+
+```js
+//+ run
+// найти [г или т], а затем "оп"
+alert( "Гоп-стоп".match( /[гт]оп/gi ) ); // "Гоп", "топ"
+```
+
+Несмотря на то, что в квадратных скобках несколько символов, в совпадении должен присутствовать *ровно один* из них. 
+
+Поэтому в примере ниже нет результатов:
+
+```js
+//+ run
+// найти "В", затем [у или а], затем "ля"
+alert( "Вуаля".match( /В[уа]ля/ ) ); // совпадений нет
+```
+
+Совпадение было бы, если бы после `"Ву"` шло сразу `"ля"`, например <code class="subject">Вуля</code> или если бы `"Ва"` сопровождалось `"ля"`, то есть <code class="subject">Валя</code>.
+
+**Квадратные скобки могут также содержать *диапазоны символов*.** 
+
+Например,  <code class="pattern">[a-z]</code> -- произвольный символ от `a` до `z`, <code class="pattern">[0-5]</code> -- цифра от `0` до `5`.
+
+В примере ниже мы будем искать `"x"`, после которого идёт два раза `[0-9A-F]` -- цифра или буква от A до F:
+
+```js
+//+ run
+// найдёт "xAF"
+alert( "Exception 0xAF".match(/x[0-9A-F][0-9A-F]/g) );
+```
+
+Обратим внимание, в слове <code class="subject">Exception</code> есть сочетание <code class="subject">xce</code>, но оно не подошло, потому что буквы в нём маленькие, а в диапазоне -- большие. 
+
+Если хочется искать и его тоже, можно добавить в скобки диапазон `a-f`: <code class="pattern">[0-9A-Fa-f]</code>. Или же просто указать у всего регулярного выражения флаг `i`.
+
+**Символьные классы -- всего лишь более короткие записи для диапазонов, в частности:**
+
+<ul>
+<li>**\d** -- то же самое, что <code class="pattern">[0-9]</code>,</li>
+<li>**\w** -- то же самое, что <code class="pattern">[a-zA-Z0-9_]</code>,</li>
+<li>**\s** -- то же самое, что <code class="pattern">[\t\n\v\f\r ]</code> плюс несколько юникодных пробельных символов.</li>
+</ul>
+
+**В квадратных скобках можно использовать и диапазоны и символьные классы -- вместе.**
+
+Например, нам нужно найти слова в тексте. Если оно на английском -- это достаточно просто:
+
+```js
+//+ run
+var str = "The sun is rising!";
+
+alert( str.match( /\w+/g ) ); // The, sun, is, rising*!*
+```
+
+А если есть слова и на русском?
+
+```js
+//+ run
+var str = "Солнце встаёт!";
+
+alert( str.match( /\w+/g ) ); // null*!*
+```
+
+Ничего не найдено! Это можно понять, ведь <code class="pattern">\w</code> -- это именно английская букво-цифра, как можно видеть из аналога <code class="pattern">[a-zA-Z0-9_]</code>.
+
+Чтобы находило слово на русском -- нужно использовать диапазон, например <code class="pattern">/[а-я]/</code>. А чтобы на обоих языках -- и то и другое вместе:
+
+```js
+//+ run
+var str = "Солнце (the sun) встаёт!";
+
+alert( str.match( /[\wа-я]+/gi ) ); // Солнце, the, sun, вста, т*!*
+```
+
+...Присмотритесь внимательно к предыдущему примеру! Вы видите странность? Оно не находит букву <code class="match">ё</code>, более того -- считает её разрывом в слове. Причина  -- в кодировке юникод, она подробно раскрыта в главе [](/string). Буква `ё` лежит в стороне от основной кириллицы и её следует добавить в диапазон дополнительно, вот так:
+
+```js
+//+ run
+var str = "Солнце (the sun) встаёт!";
+
+alert( str.match( /[\wа-яё]+/gi ) ); // Солнце, the, sun, встаёт*!*
+```
+
+Теперь всё в порядке.
+
+**Кроме обычных, существуют также *исключающие* диапазоны: <code class="pattern">[^…]</code>.**
+
+Квадратные скобки, начинающиеся со знака каретки: <code class="pattern">[^…]</code> находят любой символ, *кроме указанных*.
+
+Например:
+
+<ul>
+<li><code class="pattern">[^аеуо]</code> -- любой символ, кроме  `'a'`, `'e'`, `'y'`, `'o'`</li>
+<li><code class="pattern">[^0-9]</code> -- любая не-цифра, то же что `\D`</li>
+<li><code class="pattern">[^\s]</code> -- любой не-пробельный символ, как и  `\S`</li>
+</ul>
+
+Пример ниже ищет любые символы, кроме букв, цифр и пробелов:
+
+```js
+//+ run
+alert( "alice15@gmail.com".match( /[^\d\sA-Z]/gi ) ); // "@", "."
+```
+
+**В квадратных скобках большинство специальных символов можно использовать без экранирования.**
+
+Обычно, если мы хотим искать именно точку, а не любой символ, или именно `"\d"`, а не произвольную цифру, то мы используем экранирование: указываем `\.` или `\\d`.
+
+Но квадратные скобки подразумевают поиск одного символа из нескольких или из диапазона. Использование некоторых специальных символов внутри них не имело бы смысла, и они воспринимаются как обычные символы.
+
+Это касается символов:
+<ul>
+<li>точка <code class="pattern">'.'</code></li>
+<li>плюс <code class="pattern">'+'</code></li>
+<li>круглые скобки <code class="pattern">'( )'</code></li>
+<li>дефис <code class="pattern">'-'</code>, если он находится в начале или конце квадратных скобок, то есть не выделяет диапазон.</li>
+<li>символ каретки <code class="pattern">'^'</code>, если не находится в начале квадратных скобок, то есть кроме <code class="pattern">[\^..]</code>.</li>
+<li>а также открывающая квадратная скобка <code class="pattern">'['</code></li>
+</ul>
+
+То есть, точка `"."` в квадратных скобках означает не "любой символ", а обычную точку.
+
+Например, регэксп <code class="pattern">[-().^+]</code> ищет один из символов `-().^`. В данном контексте эти символы не являются специальными.
+
+```js
+//+ run
+var re = /[-().^+]/g;
+
+alert( "1 + 2 - 3".match(re) ); // найдёт +, -
+```
+
+...Впрочем, даже если вы решите "на всякий случай" заэкранировать эти символы, поставив перед ними обратный слэш `\` -- вреда не будет:
+
+```js
+//+ run
+var re = /[\-\(\)\.\^\+]/g;
+
+alert( "1 + 2 - 3".match(re) ); // тоже работает: +, -
+```
+
diff --git a/3-more/8-regular-expressions-javascript/6-regexp-numeric-quantifiers/1-find-text-manydots/solution.md b/3-more/8-regular-expressions-javascript/6-regexp-numeric-quantifiers/1-find-text-manydots/solution.md
new file mode 100644
index 00000000..350fdc0e
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/6-regexp-numeric-quantifiers/1-find-text-manydots/solution.md
@@ -0,0 +1,9 @@
+Символ `.` является специальным, значит его надо экранировать.
+Регулярное выражение:
+
+```js
+//+ run
+var reg = /\.{3,}/g;
+alert("Привет!... Как дела?.....".match(reg)); // ..., .....
+```
+
diff --git a/3-more/8-regular-expressions-javascript/6-regexp-numeric-quantifiers/1-find-text-manydots/task.md b/3-more/8-regular-expressions-javascript/6-regexp-numeric-quantifiers/1-find-text-manydots/task.md
new file mode 100644
index 00000000..750f6c59
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/6-regexp-numeric-quantifiers/1-find-text-manydots/task.md
@@ -0,0 +1,14 @@
+#  Как найти многоточие... ?
+
+[importance 5]
+
+Напишите регулярное выражения для поиска многоточий: трёх или более точек подряд.
+
+
+Проверьте его:
+
+```js
+var reg = /ваше выражение/g;
+alert("Привет!... Как дела?.....".match(reg)); // ..., .....
+```
+
diff --git a/3-more/8-regular-expressions-javascript/6-regexp-numeric-quantifiers/article.md b/3-more/8-regular-expressions-javascript/6-regexp-numeric-quantifiers/article.md
new file mode 100644
index 00000000..0eced219
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/6-regexp-numeric-quantifiers/article.md
@@ -0,0 +1,47 @@
+# Цифровые квантификаторы {n}
+
+Рассмотрим задачу -- взять телефон вида `+7(903)-123-45-67` и найти все числа в нём. То есть, нас интересует результат вида `7, 903, 123, 45, 67`.
+
+Нечто похожее мы уже делали ранее -- мы искали цифры. Для этого было достаточно класса `\d`. Но здесь нужно искать *числа* -- последовательности из 1 или более цифр.
+
+**Количество повторений символа можно указать с помощью числа в фигурных скобках: `{n}`.** 
+
+<dl>
+<dt>Точное количество: `{5}`</dt>
+<dd>Паттерн <code class="pattern">\d{5}</code> обозначает 5 цифр, как и <code class="pattern>\d\d\d\d\d</code>.
+
+Следующий пример находит пятизначное число.
+
+```js
+//+ run
+alert( "Мне 12345 лет".match (/\d{5}/) );  //  "12345"
+```
+
+</dd>
+<dt>Количество от-до: `{3,5}`</dt>
+<dd>Для того, чтобы найти, например, числа размером от трёх до пяти знаков, нужно указать границы в фигурных скобках: `\d{3,5}`
+
+```js
+//+ run
+alert( "Мне не 12, а 1234 года".match( /\d{3,5}/ ) );  // "1234"
+```
+
+Последнее значение можно и не указывать. Тогда выражение `\d{3,}` найдет числа, длиной от трех знаков:
+
+```js
+//+ run
+alert( "Мне не 12, а 345678 лет".match( /\d{3,5}/ ) );  // "345678"
+```
+
+</dd>
+</dl>
+
+В случае с телефоном нам нужны числа - одна или более цифр подряд. Этой задаче соответствует регулярное выражение <code class="pattern">\d{1,}</code>:
+
+```js
+//+ run
+var str = "+7(903)-123-45-67";
+
+alert( str.match( /\d{1,}/g ) ); // 7,903,123,45,67
+```
+
diff --git a/3-more/8-regular-expressions-javascript/7-regexp-quantifiers/article.md b/3-more/8-regular-expressions-javascript/7-regexp-quantifiers/article.md
new file mode 100644
index 00000000..f71e8c51
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/7-regexp-quantifiers/article.md
@@ -0,0 +1,113 @@
+# Квантификаторы +, * и ?
+
+Для самые часто востребованных квантификаторов есть специальные короткие обозначения.
+
+[cut]
+<dl>
+<dt>`+`</dt>
+<dd>Означает "один или более", то же что `{1,}`. 
+
+Например, <code class="pattern">\d+</code> находит числа -- последовательности из 1 или более цифр:
+
+```js
+//+ run
+var str = "+7(903)-123-45-67";
+
+alert( str.match( /\d+/g ) ); // 7,903,123,45,67
+```
+
+</dd>
+<dt>`?`</dt>
+<dd>Означает "ноль или один", то же что и `{0,1}`. По сути, делает символ необязательным.
+
+Например, <code class="pattern">ou?r</code> найдёт <code class="match">or</code> в слове <code class="subject">color</code> и <code class="match">our</code> в его британском варианте написания <code class="subject">colour</code>.
+
+```js
+//+ run
+var str = "Можно писать color или colour";
+
+alert( str.match( /colou?r/g ) ); // color, colour
+```
+
+</dd>
+<dt>`*`</dt>
+<dd>Означает "ноль или более", то же что `{0,}`. То есть, символ может повторяться много раз или вообще отсутствовать.
+
+Пример ниже находит цифру, после которой идёт один или более нулей:
+
+```js
+//+ run
+alert( "100 10 1".match( /\d0*/g ) ); // 100, 10, 1
+```
+
+Сравните это с `'+'` (один или более):
+
+```js
+//+ run
+alert( "100 10 1".match( /\d0+/g ) ); // 100, 10
+```
+
+</dd>
+</dl>
+
+Эти квантификаторы -- одни из важнейших "строительных блоков" для сложных регулярных выражений, поэтому мы рассмотрим ещё примеры.
+
+<dl>
+<dt>Десятичная дробь (число с точкой внутри): <code class="pattern">\d+\.\d+</code></dt>
+<dd>
+
+```js
+//+ run
+alert( "0 1 12.345 7890".match( /\d+\.\d+/g ) ); // 123.45
+```
+
+</dd>
+<dt>Открывающий HTML-тег без атрибутов, такой как `<span>` или `<p>`: <code class="pattern">/&lt;[a-z]+&gt;/i</code></dt>
+<dd>Пример:
+
+```js
+//+ run
+alert( "<BODY> ... </BODY>".match ( /<[a-z]+>/gi ) ); // <BODY>
+```
+
+Это регулярное выражение ищет символ <code class="pattern">'&lt;'</code>, за которым идут одна или более букв английского алфавита, и затем <code class="pattern">'&gt;'</code>. 
+</dd>
+<dt>Открывающий HTML-тег без атрибутов (лучше): <code class="pattern">/&lt;[a-z][a-z0-9]*&gt;/i</code></dt>
+<dd>
+Здесь регулярное выражение расширено: в соответствие со стандартом, HTML-тег может иметь символ на любой позиции, кроме первой, например `<h1>`.
+
+```js
+//+ run
+alert( "<h1>Привет!</h1>".match( /<[a-z][a-z0-9]*>/gi ) );  // <h1>
+```
+
+</dd>
+<dt>Открывающий или закрывающий HTML-тег без атрибутов: <code class="pattern">/&lt;\/?[a-z][a-z0-9]*&gt;/i</code></dt>
+<dd>В предыдущий паттерн добавили необязательный слэш <code class="pattern">/?</code> перед тегом. Его понадобилось заэкранировать, чтобы JavaScript не принял его за конец шаблона.
+
+```js
+//+ run
+alert( "<h1>Привет!</h1>".match( /<\/?[a-z][a-z0-9]*>/gi ) );  // <h1>, </h1>
+```
+
+</dd>
+</dl>
+
+
+[smart header="Точнее -- значит сложнее"]
+Здесь мы видим классическую ситуацию, которая повторяется из раза в раз.
+
+Чем точнее регулярное выражение, тем оно длиннее и сложнее.
+
+Например, для HTML-тегов, скорее всего, подошло бы и более короткое регулярное выражение <code class="pattern">&lt;\w+&gt;</code>.
+
+Так как класс `\w` означает "любая цифра или английская буква или _`, то под такой шаблон подойдут и не теги, например <code class="match">&lt;_&gt;</code>, однако он гораздо проще, чем <code class="pattern">&lt;[a-z][a-z0-9]*&gt;</code>. 
+
+Подойдёт ли нам <code class="pattern">&lt;\w+&gt;</code> или нужно использовать именно <code class="pattern">&lt;[a-z][a-z0-9]*&gt;</code>?
+
+В реальной жизни допустимы оба варианта. Ответ на подобные вопросы зависит от того, насколько реально важна точность и насколько сложно потом будет отфильтровать лишние совпадения (если появятся).
+[/smart]
+
+
+
+
diff --git a/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/article.md b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/article.md
new file mode 100644
index 00000000..2e3bbd51
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/article.md
@@ -0,0 +1,179 @@
+# Жадный и ленивый режимы
+
+Теперь время залезть "под капот" регулярных выражений и посмотреть, как происходит поиск.
+
+Это понимание необходимо для того, чтобы искать что-либо сложнее чем <code class="pattern">/\d+/</code>.
+[cut]
+
+Для примера рассмотрим задачу, которая часто возникает в типографике -- заменить кавычки вида `"..."` на "кавычки-лапки": `«...»`.
+
+Шаблон, который мы будем использовать для поиска подстрок в кавычках, будет выглядеть так:
+
+```js
+//+ run
+var reg = /".+"/g;
+
+var str = 'a "witch" and her "broom" is one';
+
+alert( str.match(reg) );
+```
+
+Запустите этот пример... 
+
+Упс! Он не работает! Вместо того, чтобы найти два совпадения <code class="match">"witch"</code> и <code class="match">"broom"</code>, он находит одно: <code class="match">"witch" and her "broom"</code>.
+
+Это как раз тот случай, когда *жадность* -- причина всех зол.
+
+## Алгоритм поиска
+
+Движок регулярных выражений пытается проверить строку на соответствие шаблону, начиная с самой первой, нулевой позиции. Если не получается, он идёт вперёд и пытается найти с 1й позиции и так далее.
+
+Чтобы сделать происходящее максимально наглядным и понятным, проследим, что именно он делает для паттерна <code class="pattern">".+"</code>.
+
+<ol>
+<li>Первый символ шаблона -- это кавычка <code class="pattern">"</code>. 
+
+Движок регулярных выражений пытается найти её на 0й позиции, но там совсем другой символ, поэтому на 0й позиции соответствия явно нет.
+
+Далее он переходит 1ю, 2ю позицию в исходной строке и, наконец, обнаруживает кавычку на 3й позиции:
+<img src="witch_greedy1.png">
+</li>
+<li>Кавычка найдена, далее движок проверяет, есть ли соответствие для остальной части паттерна. 
+
+В данном случае следующий символ паттерна -- `.` (точка). Она обозначает "любой символ", так что следующая буква строки <code class="match">'w'</code> вполне подходит:
+<img src="witch_greedy2.png">
+</li>
+<li>Далее "любой символ" повторяется, так как стоит квантификатор <code class="pattern">.+</code>. Движок регулярных выражений берёт один символ за другим, до тех пор, пока у него это получается. 
+
+В данном случае это означает "до конца строки":
+<img src="witch_greedy3.png">
+</li>
+<li>Итак, текст закончился, движок регулярных выражений больше не может найти "любой символ", он закончил строить соответствие для <code class="pattern">.+</code> и очень рад по этому поводу.
+
+Следующий символ шаблона -- это кавычка. Её тоже необходимо найти, чтобы соответствие было полным. А тут -- беда, ведь поисковый текст завершился!
+
+Движок регулярных выражений понимает, что, наверное, взял многовато <code class="pattern">.+</code> и начинает отступать обратно ("фаза бэктрекинга" -- backtracking на англ.).
+
+Иными словами, он сокращает текущее совпадение на один символ:
+
+<img src="witch_greedy4.png">
+
+После этого он ещё раз пытается подобрать соответствие для остатка паттерна. Но кавычка <code class="pattern">'"'</code> не совпадает с <code class="subject">'e'</code>.</li>
+<li>...Так что движок уменьшает число повторений <code class="pattern">.+</code> ещё раз:
+
+<img src="witch_greedy5.png">
+
+Кавычка <code class="pattern">'"'</code> не совпадает с <code class="subject">'n'</code>. Опять неудача.</li>
+<li>Движок продолжает отступать, он уменьшает количество повторений точки <code class="pattern">'.'</code> до тех пор, пока остаток паттерна не совпадёт:
+
+<img src="witch_greedy6.png">
+</li>
+<li>Мы получили результат. Так как у регэкспа есть флаг `g`, то поиск продолжится, однако это произойдёт после первого совпадения и не даст новых результатов.</li>
+</ol>
+
+**В жадном режиме (по умолчанию) регэксп повторяет квантификатор настолько много раз, насколько это возможно, чтобы найти соответствие.**
+
+Возможно, это не совсем то, что мы хотели, но так это работает.
+
+## Ленивый режим
+
+Ленивый режим работы квантификаторов -- противоположность жадному, он означает "повторять минимальное количество раз".
+
+Его можно включить, если поставить знак вопроса <code class="pattern">'?'</code> после квантификатора, так что он станет таким: <code class="pattern">*?</code> или <code class="pattern">+?</code> или даже <code class="pattern">??</code> для <code class="pattern">'?'</code>.
+
+Чтобы не возникло путаницы -- важно понимать: обычно `?` сам является квантификатором (ноль или один). Но если он стоит *после другого квантификатора (или даже после себя)*, то обретает другой смысл -- в этом случае он меняет режим его работы на ленивый.
+
+Регэксп <code class="pattern">/".+?"/g</code> работает, как задумано -- находит отдельно <code class="match">witch</code> и <code class="match">broom</code>:
+
+```js
+//+ run
+var reg = /".+?"/g;
+
+var str = 'a "witch" and her "broom" is one';
+
+alert( str.match(reg) ); // witch, broom
+```
+
+Чтобы в точности понять, что происходим, разберём в деталях, как ищется <code class="pattern">".+?"</code>.
+
+<ol>
+<li>Первый шаг -- тот же, кавычка <code class="pattern">'"'</code> найдена на 3й позиции:
+<img src="witch_greedy1.png">
+</li>
+
+<li>Второй шаг -- тот же, находим произвольный символ <code class="pattern">'.'</code>:
+<img src="witch_greedy2.png">
+</li>
+
+<li>А вот дальше -- так как стоит ленивый режим работы `+`, то движок пытается повторять точку (произвольный символ) *минимальное количество раз*.
+
+Так что он тут же пытается проверить, достаточно ли повторить 1 раз -- и для этого пытается найти соответствие остальной части шаблона, то есть <code class="pattern">'"'</code>:
+<img src="witch_lazy3.png">
+
+Нет, один раз повторить недостаточно. В данном случае, символ `'i' != '"'`, но если бы оставшаяся часть паттерна была бы более сложной -- алгоритм остался бы тем же. Если остаток шаблона не находится -- увеличиваем количество повторений.
+</li>
+<li>Движок регулярных выражений увиличивает количество повторений точки на одно и пытается найти соответствие остатку шаблона ещё раз:
+
+<img src="witch_lazy4.png">
+Опять неудача. Тогда поисковой движок увеличивает количество повторений ещё и ещё...
+</li>
+<li>Только на 5м шаге поисковой движок наконец находит соответствие для остатка паттерна:
+
+<img src="witch_lazy5.png">
+</li>
+<li>Так как поиск происходит с флагом `g`, то он продолжается с конца текущего совпадения, давая ещё один результат:
+
+<img src="witch_lazy6.png">
+</li>
+</ol>
+
+В примере выше продемонстрирована работа ленивого режима для <code class="pattern">+?</code>. Квантификаторы  <code class="pattern">+?</code> и <code class="pattern">??</code> ведут себя аналогично -- "ленивый" движок увеличивает количество повторений только в том случае, если для остальной части шаблона на данной позиции нет соответствия, в то время как жадный сначала берёт столько повторений, сколько возможно, а потом отступает назад.
+
+**Ленивость распространяется только на тот квантификатор, после которого стоит `?`.**
+
+Прочие квантификаторы остаются жадными.
+
+Например:
+
+```js
+//+ run
+alert( "123 456".match ( /\d+ \d+?/g) );  // 123 4
+```
+
+<ol>
+<li>Подпаттерн <code class="pattern">\d+</code> пытается найти столько символов, сколько возможно (работает жадно), так что он находит <code class="match">123</code> и останавливается, поскольку символ пробела <code class="pattern">' '</code> не подходит под <code class="pattern">\d</code>.</li>
+<li>Далее идёт пробел, и в игру вступает <code class="pattern">\d+?</code>. 
+
+Он находит один символ <code class="match">'4'</code> и пытатся проверить, есть ли совпадение с остатком шаблона (после <code class="pattern">\d+?</code>).
+
+Здесь мы ещё раз заметим -- ленивый режим без необходимости ничего не возьмёт.
+
+Так как шаблон закончился, то поиск завершается и <code class="match">123 4</code> становится результатом.</li>
+<li>Следующий поиск продолжится с `5`, но ничего не найдёт.</li>
+</ol>
+
+[smart header="Конечные автоматы и не только"]
+Современные движки регулярных выражений могут иметь более хитрую реализацию внутренних алгоритмов, чтобы искать быстрее.
+
+Однако, чтобы понять, как работает регулярное выражение, и строить регулярные выражения самому, знание этих хитрых алгоритмов ни к чему. Они служат лишь внутренней оптимизации способа поиска, описанного выше.
+
+Кроме того, сложные регулярные выражения плохо поддаются всяким оптимизациям, так что поиск вполне может работать и в точности как здесь описано.
+[/smart]
+
+## Альтернативный подход
+
+В данном конкретном случае, возможно искать строки в кавычках, оставаясь в жадном режиме, с использованием регулярного выражения <code class="pattern">"[^"]+"</code>:
+
+```js
+//+ run
+var reg = /"[^"]+"/g;
+
+var str = 'a "witch" and her "broom" is one';
+
+alert( str.match(reg) ); // witch, broom
+```
+
+Регэксп <code class="pattern">"[^"]+"</code> даст правильные результаты, поскольку ищет кавычку <code class="pattern">'"'</code>, за которой идут столько не-кавычек (исключающие квадратные скобки), сколько возможно. Так что вторая кавычка автоматически прекращает повторения <code class="pattern">[^"]+</code> и позволяет найти остаток шаблона <code class="pattern">"</code>.
+
+
+
diff --git a/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy1.png b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy1.png
new file mode 100755
index 00000000..744e8cb6
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy1.png differ
diff --git a/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy2.png b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy2.png
new file mode 100755
index 00000000..495b0a16
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy2.png differ
diff --git a/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy3.png b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy3.png
new file mode 100755
index 00000000..5afa50be
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy3.png differ
diff --git a/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy4.png b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy4.png
new file mode 100755
index 00000000..730afe3e
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy4.png differ
diff --git a/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy5.png b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy5.png
new file mode 100755
index 00000000..a5b3f42a
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy5.png differ
diff --git a/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy6.png b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy6.png
new file mode 100755
index 00000000..b428bda3
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy6.png differ
diff --git a/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy3.png b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy3.png
new file mode 100755
index 00000000..3dc3b35e
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy3.png differ
diff --git a/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy4.png b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy4.png
new file mode 100755
index 00000000..4330a8db
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy4.png differ
diff --git a/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy5.png b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy5.png
new file mode 100755
index 00000000..1b1de1bb
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy5.png differ
diff --git a/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy6.png b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy6.png
new file mode 100755
index 00000000..c5598c3f
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy6.png differ
diff --git a/3-more/8-regular-expressions-javascript/9-regexp-groups/article.md b/3-more/8-regular-expressions-javascript/9-regexp-groups/article.md
new file mode 100644
index 00000000..dcfd7072
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/9-regexp-groups/article.md
@@ -0,0 +1,126 @@
+# Группы
+
+Часть шаблона может быть заключена в скобки <code class="pattern">(...)</code>. Такие выделенные части шаблона называют "скобочными выражениями" или "скобочными группами".
+
+У такого выделения есть два эффекта:
+<ol>
+<li>Он позволяет выделить часть совпадения в отдельный элемент массива при поиске через [:String#match] или [:RegExp#exec].</li>
+<li>Если поставить квантификатор после скобки, то он применится *ко всей скобке*, а не всего лишь к одному символу.</li>
+</ol>
+
+[cut]
+В примере ниже, шаблон <code class="pattern">(go)+</code> находит один или более повторяющихся <code class="pattern">'go'</code>:
+
+```js
+//+ run
+alert( 'Gogogo now!'.match( /(go)+/i );  // "Gogogo"
+```
+
+Без скобок, шаблон <code class="pattern">/go+/</code> означал бы <code class="subject">g</code>, после которого идёт одна или более <code class="subject">o</code>, например: <code class="match">goooo</code>.
+
+
+**Скобки нумеруются слева направо. Поисковой движок запоминает содержимое каждой скобки и позволяет обращаться к нему, в том числе -- в шаблоне и строке замены.**
+
+Например, найти HTML-тег можно шаблоном <code class="pattern">&lt;.*?&gt;</code>. Скорее всего, после поиска мы захотим что-то сделать с результатом, и нас будет интересовать содержимое `<...>`.
+
+Для удобства заключим его в скобки: <code class="pattern">&lt;(.*?)&gt;</code>. Тогда содержимое скобок можно будет получить отдельно.
+
+Используем метод [:String#match]. В результирующем массиве будет сначала всё совпадение, а далее -- скобочные группы, в данном случае -- только одна:
+
+```js
+//+ run
+var str = '<h1>Привет, мир!</h1>'
+var reg = /<(.*?)>/ 
+
+alert( str.match(reg) ) // массив: <h1>, h1
+```
+
+Для поиска всех совпадений, как мы обсуждали ранее, используется метод [:RegExp#exec].
+
+**Скобки могут быть и вложенными. В этом случае нумерация также идёт слева направо.**
+
+Например, в строке <code class="subject">&lt;span class="my"&gt;</code> нас может интересовать отдельно тег `span` и, для примера, его первая буква.
+
+Добавим скобки в регулярное выражение:
+
+```js
+//+ run
+var str = '<span class="my">';
+
+reg = /<(([a-z])[a-z0-9]*).*?>/;
+
+alert( str.match(reg) );  // <span class="my">, span, s
+```
+
+Вот так выглядят скобочные группы:
+<img src="groups.png">
+
+На нулевом месте -- всегда совпадение полностью, далее -- группы. Их вложенность означает всего лишь, что группа 1 содержит группу 2. Нумерация всегда идёт слева направо, по открывающей скобке.
+
+**Даже если скобочная группа необязательна и не входит в совпадение, соответствующий элемент массива существует (и равен `undefined`).**
+
+Например, рассмотрим регэксп <code class="pattern">a(z)?(c)?</code>. Он ищет `"a"`, за которой не обязательно идёт буква `"z"`, за которой необязательно идёт буква `"c"`.
+
+Если напустить его на строку из одной буквы `"a"`, то результат будет таков:
+
+```js
+//+ run
+match = 'a'.match( /a(z)?(c)?/ )  
+
+alert(match.length); // 3
+alert(match[0]); // a
+alert(match[1]); // undefined
+alert(match[2]); // undefined
+```
+
+Массив получился длины `3`, но все скобочные группы -- `undefined`.
+
+А теперь более сложная ситуация, строка <code class="subject">ack</code>:
+
+```js
+//+ run
+match = 'ack'.match( /a(z)?(c)?/ )  
+
+alert(match.length); // 3
+alert(match[0]); // ac, всё совпадение
+alert(match[1]); // undefined, для (z)? ничего нет
+alert(match[2]); // c
+```
+
+Длина массива результатов по-прежнему `3`. Она постоянна. А вот для скобочной группы <code class="pattern">(z)?</code> в ней ничего нет.
+
+**Скобочную группу можно исключить из запоминаемых и нумеруемых, добавив в её начало <code class="pattern">?:</code>**
+
+Бывает так, что скобки нужны, чтобы квантификатор правильно применился, а вот запоминать её в массиве не нужно. Тогда мы просто ставим сразу после открывающей скобки `?:`
+
+В примере ниже есть скобочная группа <code class="pattern">(go-?)</code>, которая сама по себе не интересна, но входит в результаты:
+
+```js
+//+ run
+var str = "Go-go John!";
+*!*
+var reg = /(go-?)* (\w+)/i;
+*/!*
+
+var result = str.match(reg);
+
+alert( result[0] ); // Go-go John
+alert( result[1] ); // go
+alert( result[2] ); // John
+```
+
+Исключим её из запоминаемых:
+
+```js
+//+ run
+var str = "Go-go John!";
+*!*
+var reg = /(?:go-?)* (\w+)/i;
+*/!*
+
+var result = str.match(reg);
+
+alert( result[0] ); // Go-go John
+alert( result[1] ); // John
+```
+
diff --git a/3-more/8-regular-expressions-javascript/9-regexp-groups/groups.png b/3-more/8-regular-expressions-javascript/9-regexp-groups/groups.png
new file mode 100755
index 00000000..41f1b555
Binary files /dev/null and b/3-more/8-regular-expressions-javascript/9-regexp-groups/groups.png differ
diff --git a/3-more/8-regular-expressions-javascript/index.md b/3-more/8-regular-expressions-javascript/index.md
new file mode 100644
index 00000000..c021f806
--- /dev/null
+++ b/3-more/8-regular-expressions-javascript/index.md
@@ -0,0 +1,9 @@
+# Регулярные выражения [в работе]
+
+Регулярные выражения -- мощный способ поиска и замены строк, который используется в самых разных языках, включая, конечно, JavaScript.
+
+У меня здесь для вас две новости.
+<ol>
+<li>Первая плохая -- в JavaScript они на редкость убогие, хуже большинства существующих языков.</li>
+<li>Вторая хорошая -- зато нам будет проще их изучить.</li>
+</ol>
diff --git a/3-more/9-tools/1-tools-browser-extensions/article.md b/3-more/9-tools/1-tools-browser-extensions/article.md
new file mode 100644
index 00000000..c91ffc92
--- /dev/null
+++ b/3-more/9-tools/1-tools-browser-extensions/article.md
@@ -0,0 +1,129 @@
+# Полезные расширения Firefox и Chrome
+
+Здесь мы посмотрим ряд полезных расширений, которые, надеюсь, смогут вам пригодиться.
+[cut]
+
+Если какое-то из расширений вас заинтересует -- его можно поставить. В Firefox расширения устанавливаются из меню "Инструменты -> Дополнения", в Chrome -- через меню "Настройки -> Расширения -> (внизу) Ещё расширения" или напрямую из "магазина" `https://chrome.google.com/webstore/category/home`. 
+
+Для расширений других браузеров такого единого способа нет.
+
+## Web Developer (FF, Ch)
+
+Это расширение добавляет наверх браузера панель с разнообразными инструментами:
+
+<img src="webdeveloper.png">
+
+
+Большинство возможностей, скорее, полезны для верстальщиков, но и для  разработчиков кое-что есть.
+
+Например:
+
+<ul>
+<li>**Disable Cache** -- полностью отключает кэш браузера</li>
+<li>**Disable Cookies** -- браузер перестанет посылать и принимать Cookie. Впрочем, Firebug это тоже умеет (вкладка Cookie)</li>
+<li>**Disable JavaScript** -- нужно редко, но иногда полезно</li>
+<li>**Resize** на нужное разрешение -- у разработчиков мониторы большие, а у пользователей разные. Можно добавить своё разрешение.</li>
+</ul>
+
+Иконок там много, поэтому наверняка вы чем-то не будете пользоваться. Лишние иконки можно убрать. В Firefox(Win) это делается так: Правый клик на панель -> Настроить -> Перетащить лишние иконки с панели.
+
+## DNS Flusher (FF) / DNS Flusher for Chrome
+
+Это расширение позволяет сбросить кэш DNS одним кликом.
+
+Оно нужно в тех случаях, когда вы меняете адреса в файле `hosts` и хотите, чтобы изменения вступили в действие тут же.
+
+При установке в статусной строке, снизу, появляется кнопочка с IP-адресом. По клику на ней кэш DNS сбрасывается.
+
+<img src="dnsflusher.png">
+
+
+## Более удобный Firebug (FF)
+
+Здесь собраны расширения, улучшающие работу отладчика Firebug для Firefox.
+
+<dl>
+<dt>Fire Rainbow</dt>
+<dd>Подсветка кода для Firebug</dd>
+<dt>FireQuery</dt>
+<dd>Для разработки под jQuery -- выводит в разных местах вспомогательную информацию. </dd>
+<dt>Firebug Autocompleter</dt>
+<dd>Включает автодополнение для консоли, когда она в многострочном режиме.</dd> 
+<dt>[CSS-X-Fire](http://code.google.com/p/css-x-fire/)</dt>
+<dd>Позволяет редактировать CSS в Firebug и сохранять изменения, интегрировано с редакторами от JetBrains (IntelliJ IDEA и другие).</dd>
+</dl>
+
+## JsonView (FF,Ch)
+
+Даёт возможность открыть JSON-документ прямо в браузере.
+
+Обычно браузер не понимает `Content-Type: application/json` и пытается сохранить JSON-файлы. 
+
+Но если в нём стоит это расширение, то он покажет файл в удобном виде, с возможностью навигации:
+
+<img src="jsonview.png">
+
+## Xml Tree (Ch)
+
+Расширение для просмотра XML для Chrome. 
+
+Остальные браузеры умеют это делать "из коробки".
+
+
+## YSlow, PageSpeed Insights (FF, Ch)
+
+Эти два расширения позволяют по-быстрому оценить скорость загрузки страницы, проанализировать массу возможных причин тормозов и получить советы по улучшению производительности. 
+
+Они очень похожи, но не идентичны, так что можно поставить оба.
+
+<img src="pageinsight.png">
+
+## AdBlock (FF, Ch)
+
+Расширение для отключения назойливой рекламы и баннеров.
+
+Режет не всё, но многое. Да, оно не для разработки, но настолько полезное, что я не смог удержаться и опубликовал его здесь.
+
+Кстати, насчёт разработки... Бывает так, что AdBlock прячет рекламу на сайтах, которые мы разрабатываем. К хорошему быстро привыкаешь, и если юзер будет слать вам ошибки на страницах (а у вас их нет) -- проверьте! Может быть, стоит отключить AdBlock для конкретной страницы и посмотреть без него? Исключения можно поставить в настройках расширения.
+
+## DownloadHelper (FF)
+
+Расширение для скачивания видео из Youtube, Blip TV и других хостингов.
+
+С одной стороны, это расширение тоже напрямую не связано с разработкой...
+
+..Но с другой -- бывает ли, что работая на компьютере вы получаете ссылку на интересное видео с конференции? Или заходите на сайт и видите там набор прекрасных выступлений, которые хочется скачать и посмотреть в более удобное время с планшетника. Скажем, во время поездки, когда нет интернет.
+
+Если бывает, то это расширение -- для вас. Скачиваем отличные видео и смотрим, когда захотим.
+
+Способ использования: 
+<ol>
+<li>Зайти на страницу.</li>
+<li>Начать смотреть видео.</li>
+<li>Увидеть, как иконка расширения "ожила", кликнуть на нее и выбрать видео в нужном разрешении (если есть несколько).</li>
+<li>Файл будет скачан в папку `dwhelper` (по умолчанию), место можно поменять в настройках.</li>
+</ol>
+
+<img src="downloadhelper.jpg">
+
+## P.S.
+
+В этот список расширений я включил самое любимое и полезное, что связано именно с расширениями браузера. 
+
+Есть дополнительные инструменты, которые становятся в систему, они идут в отдельном разделе.
+
+У вас есть, что добавить? Расширения, которые вам очень помогли? Укажите их в комментариях.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/3-more/9-tools/1-tools-browser-extensions/dnsflusher.png b/3-more/9-tools/1-tools-browser-extensions/dnsflusher.png
new file mode 100755
index 00000000..76069bf6
Binary files /dev/null and b/3-more/9-tools/1-tools-browser-extensions/dnsflusher.png differ
diff --git a/3-more/9-tools/1-tools-browser-extensions/downloadhelper.jpg b/3-more/9-tools/1-tools-browser-extensions/downloadhelper.jpg
new file mode 100755
index 00000000..4ecdcb67
Binary files /dev/null and b/3-more/9-tools/1-tools-browser-extensions/downloadhelper.jpg differ
diff --git a/3-more/9-tools/1-tools-browser-extensions/jsonview.png b/3-more/9-tools/1-tools-browser-extensions/jsonview.png
new file mode 100755
index 00000000..efb92baa
Binary files /dev/null and b/3-more/9-tools/1-tools-browser-extensions/jsonview.png differ
diff --git a/3-more/9-tools/1-tools-browser-extensions/pageinsight.png b/3-more/9-tools/1-tools-browser-extensions/pageinsight.png
new file mode 100755
index 00000000..e98d4193
Binary files /dev/null and b/3-more/9-tools/1-tools-browser-extensions/pageinsight.png differ
diff --git a/3-more/9-tools/1-tools-browser-extensions/webdeveloper.png b/3-more/9-tools/1-tools-browser-extensions/webdeveloper.png
new file mode 100755
index 00000000..d571b3af
Binary files /dev/null and b/3-more/9-tools/1-tools-browser-extensions/webdeveloper.png differ
diff --git a/3-more/9-tools/2-fiddler/article.md b/3-more/9-tools/2-fiddler/article.md
new file mode 100644
index 00000000..c0da788e
--- /dev/null
+++ b/3-more/9-tools/2-fiddler/article.md
@@ -0,0 +1,99 @@
+# Скриптуемый отладочный прокси Fiddler
+
+Fiddler -- прокси, который работает с трафиком между Вашим компьютером и удаленным сервером, и позволяет инспектировать и менять его.
+
+Fiddler можно расширять с помощью скриптов на языке JScript.NET (писать их очень просто), менять меню программы, и вообще -- замечательный инструмент.
+
+Использовать его можно с любым браузером.
+
+Эта статья описывает Fiddler 2.4. В вашей версии Fiddler какие-то возможности могут измениться, какие-то образоваться.
+[cut]
+
+## Режимы подключения
+
+У Fiddler есть 2 способа подключения. 
+
+<ol>
+<li>Первый -- это просто запустить его. При этом он автоматически будет работать для программ, использующих WinINET.
+
+Это, например, Internet Explorer, Chrome, приложения MS Office.
+
+Firefox тоже автоматически подхватит Fiddler, за счёт того что при установке Fiddler в него ставится соответствующее расширение:
+
+<img src="fiddler-hook.png">
+</li>
+<li>Второй -- это явно поставить Fiddler как прокси для браузера, по адресу `127.0.0.1:8888`. Например, так можно сделать для Opera, если уж не хочется перезапускать.</li>
+</ol>
+
+## Fiddler не под Windows
+
+Если вы работаете не под Windows, то Fiddler можно поставить в виртуальную машину.
+
+Чтобы сделать возможной подключение внешних браузеров, нужно включить настройках Fiddler: Tools -> Fiddler Options -> Connections(вкладка) галочку "Allow remote clients to connect".  После этого Fiddler станет доступен как прокси на интерфейсе `0.0.0.0`, так что можно будет браузеру из внешней ОС указать в качестве прокси виртуальную машину. И пользоваться Fiddler.
+
+Если вы так захотите поступить, то вдобавок возьмите удобный переключатель прокси, например Elite Proxy Switcher под Firefox или [Proxy Pick](http://www.bayden.com/ietoys/) для IE, чтобы переключение на прокси осуществлялось в один клик.
+
+## Операции над запросами
+
+При заходе в Fiddler, открывается окно запросов слева и рабочие вкладки справа.
+
+<img src="fiddler.png">
+
+Как видно, опций много, и на изображении они еле-еле помещаются. И, поверьте, возможностей -- ещё больше.
+
+## Возможности
+
+<ul>
+<li>**В окне запросов** слева можно просматривать и выбирать запросы, смотреть их заголовки, сохранять их на диск все вместе или по отдельности.</li>
+<li>**AutoResponder** -- позволяет подставить свой файл вместо сервера.
+
+Например, приятель попросил поправить скрипт `vasya.js` на сайте, но доступа к серверу не дал. 
+
+С Fiddler задача решается просто -- сохраняете скрипт на диске, в AutoResponder указываете, что `vasya.js` нужно брать с диска, а не с сайта -- и исправляете, что нужно, перезагружаете страницу, проверяете -- всё с комфортом.</li>
+<li>**Composer** -- позволяет составить запрос на сервер вручную.
+
+Например, вы хотите сделать такой же AJAX-запрос, как только что делали. Для этого можно просто выбрать его слева и нажать кнопку Replay (слева-сверху).
+
+А если хочется поменять? Нет ничего проще -- выбираем справа Composer и перетаскиваем запрос слева в него. После этого исправляем, что хотим и Execute.</li>
+<li>**Filters** -- позволяет назначить действия в зависимости от вида запроса. Опции станут понятны после перехода на вкладку.</li>
+<li>**FiddlerScript** -- основа мощи Fiddler: скрипт, задающий функционал. Его редактированием можно добавить или удалить пункты меню, колонки в списке запросов, и, вообще, поменять почти всё. 
+
+Язык программирования JScript.NET, который здесь используется, может взаимодействовать с Windows в полном объеме, включая коммуникацию с базой данных, Word, Excel.</li>
+</ol>
+
+## Правила
+
+Слева-сверху в меню находится пункт Rules (правила). В нём изначально находятся некоторые возможности FiddlerScript, которые поставляются "из коробки".
+
+Хотите посмотреть, как ваш сайт будет грузиться "на GPRS"? Выбирайте Rules -> Performance -> Simulate Modem speeds.
+
+Для добавления новых правил можно их задать через пункт "Customize Rules" (на JScript.NET, разумеется). В открывающемся скрипте есть пункты меню и их реализация.
+
+При наступлении любого события из обширного списка, Fiddler вызывает соответствующий обработчик из правил. Например, onBeforeRequest, onShutdown. Стандартные правила отлично прокомментированы, и писать новые весьма просто.
+
+FiddlerScript позволяет манипулировать заголовками, запросом, менять ширину канала, управлять выводом запроса в Fiddler и так далее и т.п.
+
+## Брейкпойнт на запросе
+В меню Rules -&gt; Automatic Breakpoints можно включить автоматическое прерывание Fiddler при обработке запроса.
+
+После этого, если сделать запрос в браузере, подключенном к Fiddler, то  его выполнение зависнет, а в левом окошке Fiddler этот запрос будет отмечен специальным значком.
+
+Если выбрать такой подвисший запрос мышкой, то во вкладке SessionInspector им можно управлять: менять сам запрос и ответ сервера (после Break on Response, когда сервер уже ответил).
+
+Задавать прерывание на запросах определенного вида также можно через Filters.
+
+## Отладка HTTPS
+
+Fiddler является прокси, а HTTPS шифруется от браузера до сервера-получателя, поэтому по умолчанию Fiddler не имеет доступа к содержимому HTTPS-запросов.
+
+Чтобы его получить, Fiddler должен сыграть роль хакера-перехватчика: расшифровывать запросы, и потом отправлять дальше. Это возможно, если инсталлировать специальный сертификат: Tools -> Fiddler Options -> HTTPS(вкладка) -> выбрать все галочки.
+
+После окончания отладки этот сертификат можно убрать.
+
+## Скачать
+
+Fiddler можно бесплатно скачать с <a href="http://www.fiddler2.com/fiddler2/">сайта разработчика</a>. Там же доступна <a href="http://www.fiddler2.com/Fiddler/help/">документация и видео</a>.
+
+К фиддлеру прилагается галерея расширений <a href="http://www.fiddlertool.com/fiddler2/extensions.asp">http://www.fiddlertool.com/fiddler2/extensions.asp</a>. 
+
+Примеры скриптов для Fiddler, которые дают общее представление о том, на что он может быть способен: <a href="http://www.fiddlertool.com/fiddler/dev/scriptsamples.asp">http://www.fiddlertool.com/fiddler/dev/scriptsamples.asp</a>.
\ No newline at end of file
diff --git a/3-more/9-tools/2-fiddler/fiddler-hook.png b/3-more/9-tools/2-fiddler/fiddler-hook.png
new file mode 100755
index 00000000..bb62bfc9
Binary files /dev/null and b/3-more/9-tools/2-fiddler/fiddler-hook.png differ
diff --git a/3-more/9-tools/2-fiddler/fiddler.png b/3-more/9-tools/2-fiddler/fiddler.png
new file mode 100755
index 00000000..4f29e41e
Binary files /dev/null and b/3-more/9-tools/2-fiddler/fiddler.png differ
diff --git a/3-more/9-tools/3-ie-http-analyzer/article.md b/3-more/9-tools/3-ie-http-analyzer/article.md
new file mode 100644
index 00000000..56818c7b
--- /dev/null
+++ b/3-more/9-tools/3-ie-http-analyzer/article.md
@@ -0,0 +1,43 @@
+# IE HTTP Analyzer 
+
+Под Windows есть как минимум два весьма основных инструмента для отладки на уровне HTTP.
+
+Один из них -- Fiddler. Другой -- IE HTTP Analyzer, который представляет собой "другой угол зрения" на задачу.
+[cut]
+
+## Возможности
+IE HTTP Analyzer -- платный, и имеет две ипостаси.
+
+Первая - это обычная программа, запущенная в отдельном окне. При нажатии на кнопку "Play" - начинает перехват HTTP для всех браузеров, включая Firefox.
+
+<img src="ie-http-analyzer.gif">
+
+Вторая -- наподобие Firebug, раскрывающаяся полоса внизу браузера Internet Explorer. Это -- плагин, вызывается из панели или меню браузера.
+
+<img src="ie-http-analyzer-2.gif">
+
+Существуют другие программы похожего вида, но, перебрав несколько, я остановился на этой, как самой удобной.
+
+Основные возможности сводятся к удобной отладке HTTP-запросов, да и кнопочки на скриншотах выше достаточно очевидны.
+
+## Просмотр и создание HTTP-запросов.
+Этим сейчас никого не удивишь, если бы не одно БОЛЬШОЕ НО.
+
+Программа дает возможность удобно просматривать потоковые запросы.
+
+Т.е, например,  отлаживаете Вы чат. А он держит непрерывный iframe, через который сервер передает данные. Программы типа Fiddler будут честно ждать конца запроса, чтобы показать Вам его, а IE HTTP Analyzer не менее честно будет сбрасывать поток пред Ваши светлы очи.
+
+Запросы могут поступать все новые и новые, но в панели инспектора есть кнопка <img src="ie-http-analyzer-3.gif">, которая управляет автопереходом к следующему запросу. При анализе потока она должна быть выключена.
+
+Эта "потоковость" IE Http Analyzer- один из важных его плюсов.
+
+## Конструирование фильтров
+
+В отличие от правил на языке JScript.NET, которые используются для фильтрации в Fiddler, здесь фильтры на интересующие Вас запросы можно конструировать из стандартных компонент, объединяя их условиями ИЛИ/И.
+
+## Дополнительные возможности
+Очистка куков и кеша браузера. Проверено, работает.
+
+Программа платная. 
+
+Живет на <a href="http://www.ieinspector.com/httpanalyzer/">http://www.ieinspector.com/httpanalyzer/</a>. 
\ No newline at end of file
diff --git a/3-more/9-tools/3-ie-http-analyzer/ie-http-analyzer-2.gif b/3-more/9-tools/3-ie-http-analyzer/ie-http-analyzer-2.gif
new file mode 100755
index 00000000..cb7e588c
Binary files /dev/null and b/3-more/9-tools/3-ie-http-analyzer/ie-http-analyzer-2.gif differ
diff --git a/3-more/9-tools/3-ie-http-analyzer/ie-http-analyzer-3.gif b/3-more/9-tools/3-ie-http-analyzer/ie-http-analyzer-3.gif
new file mode 100755
index 00000000..2ba8113d
Binary files /dev/null and b/3-more/9-tools/3-ie-http-analyzer/ie-http-analyzer-3.gif differ
diff --git a/3-more/9-tools/3-ie-http-analyzer/ie-http-analyzer.gif b/3-more/9-tools/3-ie-http-analyzer/ie-http-analyzer.gif
new file mode 100755
index 00000000..10ca985b
Binary files /dev/null and b/3-more/9-tools/3-ie-http-analyzer/ie-http-analyzer.gif differ
diff --git a/3-more/9-tools/index.md b/3-more/9-tools/index.md
new file mode 100644
index 00000000..a5dc0ab0
--- /dev/null
+++ b/3-more/9-tools/index.md
@@ -0,0 +1,2 @@
+# Сундучок с инструментами
+
diff --git a/3-more/index.md b/3-more/index.md
new file mode 100644
index 00000000..91f11c38
--- /dev/null
+++ b/3-more/index.md
@@ -0,0 +1,2 @@
+# Дополнительные темы
+