minor renovations, beautify round 2 (final)

1-js/2-first-steps/6-variable-names/article.md

@@ -95,7 +95,7 @@ var border_left_width;
 
 Есть причина и поважнее. Поскольку именно это имя переменной пришло в голову -- скорее всего, оно больше соответствует хранимым там данным, чем то, которое было мы придумали изначально. Исключения бывают, но в любом случае -- такое несовпадение -- это повод задуматься.
 
-Чтобы удобно переименовывать переменную, нужно использовать [хороший редактор JavaScript](/editors), тогда этот процесс будет очень простым и быстрым.
+Чтобы удобно переименовывать переменную, нужно использовать [хороший редактор JavaScript](/editor), тогда этот процесс будет очень простым и быстрым.
 
 [smart header="Если коротко..."]
 Смысл имени переменной -- это "имя на коробке", по которому мы сможем максимально быстро находить нужные нам данные. 

1-js/4-data-structures/7-array/9-eratosthenes-sieve/task.md

@@ -15,7 +15,7 @@
 <li>Все оставшиеся незачеркнутыми числа -- простые.</li>
 </ol>
 
-Посмотрите также <a href="/files/tutorial/intro/array/sieve.gif">анимацию алгоритма</a>.
+Посмотрите также [анимацию алгоритма](sieve.gif).
 
 Реализуйте "Решето Эратосфена" в JavaScript, используя массив.
 

1-js/8-oop/3-getters-setters/5-coffeemachine-add-isrunning/task.md

@@ -22,4 +22,4 @@ coffeeMachine.setOnReady(function() {
 });
 ```
 
-Исходный код возьмите из решения [предыдущей задачи](/task/setter-onReady).
+Исходный код возьмите из решения [предыдущей задачи](/task/setter-onready).

10-regular-expressions-javascript/10-regexp-backreferences/article.md

@@ -10,7 +10,7 @@
 var name = "Александр Пушкин";
 
 name = name.replace(/([а-яё]+) ([а-яё]+)/i, "$2, $1");
-alert(name); // Пушкин, Александр
+alert( name ); // Пушкин, Александр
 ```
 
 К скобочной группе можно также обратиться в самом шаблоне.
@@ -25,7 +25,7 @@ str = "He said:\"She's the one\"."
 
 reg = /['"](.*?)['"]/g
 
-alert( str.match(reg) ) // "She'
+alert(str.match(reg)) // "She'
 ```
 
 Как видно, регэксп нашёл открывающую кавычку <code class="match">"</code>, затем текст, вплоть до новой кавычки <code class="match">'</code>, которая закрывает соответствие.
@@ -38,7 +38,7 @@ str = "He said:\"She's the one\"."
 
 reg = /(['"])(.*?)\1/g
 
-alert( str.match(reg) ) // "She's the one"
+alert(str.match(reg)) // "She's the one"
 ```
 
 Теперь работает верно!

10-regular-expressions-javascript/12-regexp-alternation/article.md

@@ -14,7 +14,7 @@ var reg = /html|php|css|java(script)?/gi
 
 var str = "Сначала появился HTML, затем CSS, потом JavaScript"
 
-alert( str.match(reg) )  // 'HTML', 'CSS', 'JavaScript'
+alert(str.match(reg)) // 'HTML', 'CSS', 'JavaScript'
 ```
 
 **Альтернация имеет очень низкий приоритет.**

10-regular-expressions-javascript/13-regexp-ahchors-and-multiline-mode/article.md

@@ -16,7 +16,7 @@
 ```js
 //+ run
 var str = '100500 попугаев съели 500100 бананов!';
-alert( str.match( /\d+/ig )  // 100500, 500100 (все числа)
+alert(str.match(/\d+/ig) // 100500, 500100 (все числа)
 ```
 
 А с кареткой:
@@ -24,7 +24,7 @@ alert( str.match( /\d+/ig )  // 100500, 500100 (все числа)
 ```js
 //+ run
 var str = '100500 попугаев съели 500100 бананов!';
-alert( str.match( /^\d+/ig )  // 100500 (только в начале строки)*!*
+alert(str.match(/^\d+/ig) // 100500 (только в начале строки)*!*
 ```
 
 Знак доллара <code class="pattern">$</code> используют, чтобы указать, что паттерн должен заканчиваться в конце текста.
@@ -34,7 +34,7 @@ alert( str.match( /^\d+/ig )  // 100500 (только в начале строк
 ```js
 //+ run
 var str = '100500 попугаев съели 500100 бананов!';
-alert( str.match( /\d+$/ig )  // null (в начале строки чисел нет)*!*
+alert(str.match(/\d+$/ig) // null (в начале строки чисел нет)*!*
 ```
 
 Якоря используют одновременно, чтобы указать, что паттерн должен охватывать текст с начала и до конца. Обычно это требуется при валидации.
@@ -46,7 +46,7 @@ alert( str.match( /\d+$/ig )  // null (в начале строки чисел
 ```js
 //+ run
 var num = "ля-ля 12.34";
-alert( num.match( /\d+\.\d+/ig) );  // 12.34
+alert( num.match(/\d+\.\d+/ig) ); // 12.34
 ```
 
 Если мы хотим проверить, что `num` *целиком* соответствует паттерну <code class="pattern">\d+\.\d+</code>, то укажем якоря по обе стороны от него:
@@ -54,9 +54,9 @@ alert( num.match( /\d+\.\d+/ig) );  // 12.34
 ```js
 //+ run
 var num = "ля-ля 12.34";
-alert( num.match( /^\d+\.\d+$/ig) );  // null, не дробь
+alert( num.match(/^\d+\.\d+$/ig) ); // null, не дробь
 
 var num = "12.34";
-alert( num.match( /^\d+\.\d+$/ig) );  // 12.34, дробь!
+alert( num.match(/^\d+\.\d+$/ig) ); // 12.34, дробь!
 ```
 

10-regular-expressions-javascript/14-regexp-multiline-mode/article.md

@@ -15,7 +15,7 @@ var str = '1е место: Винни-пух\n' +
   '2е место: Пятачок\n' +
   '33е место: Слонопотам';
 
-alert( str.match(/^\d+/gm ) ); // 1, 2, 33*!*
+alert( str.match(/^\d+/gm) ); // 1, 2, 33*!*
 ```
 
 Обратим внимание -- без флага <code class="pattern">/m</code> было бы только первое число:
@@ -26,7 +26,7 @@ var str = '1е место: Винни-пух\n' +
   '2е место: Пятачок\n' +
   '33е место: Слонопотам';
 
-alert( str.match(/^\d+/g ) ); // 1
+alert( str.match(/^\d+/g) ); // 1
 ```
 
 Это потому что в обычном режиме каретка <code class="pattern">^</code> -- это только начало текста.

10-regular-expressions-javascript/15-regexp-word-boundary/article.md

@@ -6,7 +6,7 @@ For example, <code class=pattern">\bdog\b</code> matches a standalone <code clas
 
 ```js
 //+ run
-showMatch( "doggy catdog dog", /\bdog\b/ ) // "dog"
+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.
@@ -16,14 +16,14 @@ If the word is long enough, it may match multiple times:
 
 ```js
 //+ run
-showMatch( "Boombaroom", /\w{4}/g) // 'Boom', 'baro'
+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'
+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.**
@@ -32,7 +32,7 @@ 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'
+showMatch("Because life is awesome", /\b\w{4}\b/g) //  'life'
 ```
 
 Now there is only one result <code class="match">life</code>.

10-regular-expressions-javascript/2-regexp-methods/article.md

@@ -112,7 +112,7 @@ alert( result.index ); // undefined
 var str = "Ой-йой-йой";
 
 // результат match не всегда массив!
-alert( str.match( /лю/gi ).length ) // ошибка! нет свойства length у null
+alert(str.match(/лю/gi).length) // ошибка! нет свойства length у null
 ```
 [/warn]
 
@@ -124,7 +124,7 @@ alert( str.match( /лю/gi ).length ) // ошибка! нет свойства l
 
 ```js
 //+ run
-alert( '12-34-56'.split('-') ) // [12, 34, 56]
+alert('12-34-56'.split('-')) // [12, 34, 56]
 ```
 
 Можно передать в него и регулярное выражение, тогда он разобьёт строку по всем совпадениям.
@@ -133,7 +133,7 @@ alert( '12-34-56'.split('-') ) // [12, 34, 56]
 
 ```js
 //+ run
-alert( '12-34-56'.split(/-/) ) // [12, 34, 56]
+alert('12-34-56'.split(/-/)) // [12, 34, 56]
 ```
 
 ## str.replace(reg, str|func)   
@@ -145,7 +145,7 @@ alert( '12-34-56'.split(/-/) ) // [12, 34, 56]
 ```js
 //+ run
 // заменить дефис на двоеточие
-alert( '12-34-56'.replace("-", ":") )  // 12:34-56
+alert('12-34-56'.replace("-", ":")) // 12:34-56
 ```
 
 **При вызове со строкой замены `replace` всегда заменяет только первое совпадение.**
@@ -198,7 +198,7 @@ alert( '12-34-56'.replace( *!*/-/g*/!*, ":" ) )  // 12:34:56
 //+ run
 var str = "Василий Пупкин";
 
-alert( str.replace( /(Василий) (Пупкин)/ ,'$2, $1') ) // Пупкин, Василий
+alert(str.replace(/(Василий) (Пупкин)/, '$2, $1')) // Пупкин, Василий
 ```
 
 Ещё пример, с использованием `$&`:
@@ -207,7 +207,7 @@ alert( str.replace( /(Василий) (Пупкин)/ ,'$2, $1') ) // Пупки
 //+ run
 var str = "Василий Пупкин";
 
-alert( str.replace( /Василий Пупкин/ ,'Великий $&!') ) // Великий Василий Пупкин!
+alert(str.replace(/Василий Пупкин/, 'Великий $&!')) // Великий Василий Пупкин!
 ```
 
 **Для ситуаций, который требуют максимально "умной" замены, в качестве второго аргумента предусмотрена функция.**
@@ -221,9 +221,9 @@ alert( str.replace( /Василий Пупкин/ ,'Великий $&!') ) // В
 var i = 0;
 
 // заменить каждое вхождение "ой" на результат вызова функции
-alert( "ОЙ-Ой-ой".replace( /ой/gi, function() { 
+alert("ОЙ-Ой-ой".replace(/ой/gi, function() {
-  return ++i; 
+  return ++i;
-}) ); // 1-2-3
+})); // 1-2-3
 ```
 
 В примере выше функция просто возвращала числа по очереди, но обычно она основывается на поисковых данных.
@@ -245,12 +245,12 @@ alert( "ОЙ-Ой-ой".replace( /ой/gi, function() {
 //+ run
 // вывести и заменить все совпадения
 function replacer(str, offset, s) {
-  alert("Найдено: " + str + " на позиции: " + offset + " в строке: " + s);
+  alert( "Найдено: " + str + " на позиции: " + offset + " в строке: " + s );
   return str.toLowerCase();
-} 
+}
 
-var result = "ОЙ-Ой-ой".replace( /ой/gi, replacer);
+var result = "ОЙ-Ой-ой".replace(/ой/gi, replacer);
-alert('Результат: ' + result); // Результат: ой-ой-ой
+alert( 'Результат: ' + result ); // Результат: ой-ой-ой
 ```
 
 С двумя скобочными выражениями -- аргументов уже 5:
@@ -260,8 +260,8 @@ alert('Результат: ' + result); // Результат: ой-ой-ой
 function replacer(str, name, surname, offset, s) {
   return surname + ", " + name;
 }
- 
+
-alert( str.replace( /(Василий) (Пупкин)/ , replacer) ) // Пупкин, Василий
+alert(str.replace(/(Василий) (Пупкин)/, replacer)) // Пупкин, Василий
 ```
 
 Функция -- это самый мощный инструмент для замены, какой только может быть. Она владеет всей информацией о совпадении и имеет доступ к замыканию, поэтому может всё.
@@ -319,14 +319,14 @@ var str = 'Многое по JavaScript можно найти на сайте ht
 
 var regexp = /javascript/ig;
 
-alert("Начальное значение lastIndex: " + regexp.lastIndex);
+alert( "Начальное значение lastIndex: " + regexp.lastIndex );
 
-while( result = regexp.exec(str) ) { 
+while (result = regexp.exec(str)) {
-  alert('Найдено: ' + result[0] + ' на позиции:' + result.index);
+  alert( 'Найдено: ' + result[0] + ' на позиции:' + result.index );
-  alert('Свойство lastIndex: ' + regexp.lastIndex);
+  alert( 'Свойство lastIndex: ' + regexp.lastIndex );
 }
 
-alert('Конечное значение lastIndex: ' + regexp.lastIndex);
+alert( 'Конечное значение lastIndex: ' + regexp.lastIndex );
 ```
 
 Здесь цикл продолжается до тех пор, пока `regexp.exec` не вернёт `null`, что означает "совпадений больше нет".

10-regular-expressions-javascript/3-regexp-character-classes/article.md

@@ -114,21 +114,21 @@ alert( str.replace(/\D/g, "") ); // 79031234567
 
 ```js
 //+ run
-alert(  "1 - 5".match (/\d-\d/) );  // null, нет совпадений!
+alert( "1 - 5".match(/\d-\d/) ); // null, нет совпадений!
 ```
 
 Поправим это, добавив в регэксп пробелы:
 
 ```js
 //+ run
-alert(  "1 - 5".match (/\d - \d/) );  // работает, пробелы вокруг дефиса
+alert( "1 - 5".match(/\d - \d/) ); // работает, пробелы вокруг дефиса
 ```
 
 В регулярные выражения также не надо вставлять лишние пробелы. Все символы имеют значение:
 
 ```js
 //+ run
-alert( "1-5".match( /\d - \d/ ) ); // null, так как в строке 1-5 нет пробелов
+alert( "1-5".match(/\d - \d/) ); // null, так как в строке 1-5 нет пробелов
 ```
 
 ## Класс точка
@@ -159,7 +159,7 @@ alert( "CS 4".match(re) ); // найдено "CS 4" (пробел тоже си
 
 ```js
 //+ run
-alert( "CS4".match (/CS.4/) ); // нет совпадений, так как для точки нет символа
+alert( "CS4".match(/CS.4/) ); // нет совпадений, так как для точки нет символа
 ```
 
 ## Экранирование специальных символов
@@ -180,14 +180,14 @@ alert( "CS4".match (/CS.4/) ); // нет совпадений, так как д
 
 ```js
 //+ run
-alert( "Глава 5.1".match( /\d\.\d/ ) );  // 5.1
+alert( "Глава 5.1".match(/\d\.\d/) ); // 5.1
 ```
 
 Круглые скобки также являются специальными символами, так что для поиска именно скобки нужно использовать `\(`. Пример ниже ищет строку `"g()"`:
 
 ```js
 //+ run
-alert( "function g()".match( /g\(\)/ ) );  // "g()"
+alert( "function g()".match(/g\(\)/) ); // "g()"
 ```
 
 Сам символ слэш `'/'`, хотя и не является специальными символом в регулярных выражениях, но открывает-закрывает регэксп в синтаксисе <code class="pattern">/...pattern.../</code>, поэтому его тоже нужно экранировать.
@@ -196,7 +196,7 @@ alert( "function g()".match( /g\(\)/ ) );  // "g()"
 
 ```js
 //+ run
-alert( "/".match( /\// ) );  // '/'
+alert( "/".match(/\//) ); // '/'
 ```
 
 Ну и, наконец, если нам нужно найти сам обратный слэш `\`, то его нужно просто задублировать.
@@ -205,7 +205,7 @@ alert( "/".match( /\// ) );  // '/'
 
 ```js
 //+ run
-alert( "1\2".match( /\\/ ) );  // '\'
+alert( "1\2".match(/\\/) ); // '\'
 ```
 
 ## Итого

10-regular-expressions-javascript/5-regexp-character-sets-and-ranges/article.md

@@ -13,7 +13,7 @@
 ```js
 //+ run
 // найти [г или т], а затем "оп"
-alert( "Гоп-стоп".match( /[гт]оп/gi ) ); // "Гоп", "топ"
+alert( "Гоп-стоп".match(/[гт]оп/gi) ); // "Гоп", "топ"
 ```
 
 Обратим внимание: несмотря на то, что в наборе указано несколько символов, в совпадении должен присутствовать *ровно один* из них. 
@@ -23,7 +23,7 @@ alert( "Гоп-стоп".match( /[гт]оп/gi ) ); // "Гоп", "топ"
 ```js
 //+ run
 // найти "В", затем [у или а], затем "ля"
-alert( "Вуаля".match( /В[уа]ля/ ) ); // совпадений нет
+alert( "Вуаля".match(/В[уа]ля/) ); // совпадений нет
 ```
 
 Поиск подразумевает:
@@ -69,7 +69,7 @@ alert( "Exception 0xAF".match(/x[0-9A-F][0-9A-F]/g) );
 //+ run
 var str = "The sun is rising!";
 
-alert( str.match( /\w+/g ) ); // The, sun, is, rising*!*
+alert( str.match(/\w+/g) ); // The, sun, is, rising*!*
 ```
 
 А если есть слова и на русском?
@@ -78,7 +78,7 @@ alert( str.match( /\w+/g ) ); // The, sun, is, rising*!*
 //+ run
 var str = "Солнце встаёт!";
 
-alert( str.match( /\w+/g ) ); // null*!*
+alert( str.match(/\w+/g) ); // null*!*
 ```
 
 Ничего не найдено! Это можно понять, ведь <code class="pattern">\w</code> -- это именно английская букво-цифра, как можно видеть из аналога <code class="pattern">[a-zA-Z0-9_]</code>.
@@ -91,7 +91,7 @@ alert( str.match( /\w+/g ) ); // null*!*
 //+ run
 var str = "Солнце (the sun) встаёт!";
 
-alert( str.match( /[\wа-я]+/gi ) ); // Солнце, the, sun, вста, т*!*
+alert( str.match(/[\wа-я]+/gi) ); // Солнце, the, sun, вста, т*!*
 ```
 
 ...Присмотритесь внимательно к предыдущему примеру! Вы видите странность? Оно не находит букву <code class="match">ё</code>, более того -- считает её разрывом в слове. Причина  -- в кодировке юникод, она подробно раскрыта в главе [](/string). 
@@ -102,7 +102,7 @@ alert( str.match( /[\wа-я]+/gi ) ); // Солнце, the, sun, вста, т*!*
 //+ run
 var str = "Солнце (the sun) встаёт!";
 
-alert( str.match( /[\wа-яё]+/gi ) ); // Солнце, the, sun, встаёт*!*
+alert( str.match(/[\wа-яё]+/gi) ); // Солнце, the, sun, встаёт*!*
 ```
 
 Теперь всё в порядке.
@@ -125,7 +125,7 @@ alert( str.match( /[\wа-яё]+/gi ) ); // Солнце, the, sun, встаёт*
 
 ```js
 //+ run
-alert( "alice15@gmail.com".match( /[^\d\sA-Z]/gi ) ); // "@", "."
+alert( "alice15@gmail.com".match(/[^\d\sA-Z]/gi) ); // "@", "."
 ```
 
 ## Не нужно экранирование

10-regular-expressions-javascript/7-regexp-quantifiers/1-find-text-manydots/solution.md

@@ -4,6 +4,6 @@
 ```js
 //+ run
 var reg = /\.{3,}/g;
-alert("Привет!... Как дела?.....".match(reg)); // ..., .....
+alert( "Привет!... Как дела?.....".match(reg) ); // ..., .....
 ```
 

10-regular-expressions-javascript/7-regexp-quantifiers/1-find-text-manydots/task.md

@@ -9,6 +9,6 @@
 
 ```js
 var reg = /ваше выражение/g;
-alert("Привет!... Как дела?.....".match(reg)); // ..., .....
+alert( "Привет!... Как дела?.....".match(reg) ); // ..., .....
 ```
 

10-regular-expressions-javascript/7-regexp-quantifiers/article.md

@@ -20,7 +20,7 @@
 
 ```js
 //+ run
-alert( "Мне 12345 лет".match (/\d{5}/) );  //  "12345"
+alert( "Мне 12345 лет".match(/\d{5}/) ); //  "12345"
 ```
 
 </dd>
@@ -29,14 +29,14 @@ alert( "Мне 12345 лет".match (/\d{5}/) );  //  "12345"
 
 ```js
 //+ run
-alert( "Мне не 12, а 1234 года".match( /\d{3,5}/ ) );  // "1234"
+alert( "Мне не 12, а 1234 года".match(/\d{3,5}/) ); // "1234"
 ```
 
 Последнее значение можно и не указывать. Тогда выражение <code class="pattern">\d{3,}</code> найдет числа, длиной от трех цифр:
 
 ```js
 //+ run
-alert( "Мне не 12, а 345678 лет".match( /\d{3,5}/ ) );  // "345678"
+alert( "Мне не 12, а 345678 лет".match(/\d{3,5}/) ); // "345678"
 ```
 </dd>
 </dl>
@@ -47,7 +47,7 @@ alert( "Мне не 12, а 345678 лет".match( /\d{3,5}/ ) );  // "345678"
 //+ run
 var str = "+7(903)-123-45-67";
 
-alert( str.match( /\d{1,}/g ) ); // 7,903,123,45,67
+alert( str.match(/\d{1,}/g) ); // 7,903,123,45,67
 ```
 
 
@@ -65,7 +65,7 @@ alert( str.match( /\d{1,}/g ) ); // 7,903,123,45,67
 //+ run
 var str = "+7(903)-123-45-67";
 
-alert( str.match( /\d+/g ) ); // 7,903,123,45,67
+alert( str.match(/\d+/g) ); // 7,903,123,45,67
 ```
 
 </dd>
@@ -80,7 +80,7 @@ alert( str.match( /\d+/g ) ); // 7,903,123,45,67
 //+ run
 var str = "Можно писать color или colour (британский вариант)";
 
-alert( str.match( /colou?r/g ) ); // color, colour
+alert( str.match(/colou?r/g) ); // color, colour
 ```
 
 </dd>
@@ -91,14 +91,14 @@ alert( str.match( /colou?r/g ) ); // color, colour
 
 ```js
 //+ run
-alert( "100 10 1".match( /\d0*/g ) ); // 100, 10, 1
+alert( "100 10 1".match(/\d0*/g) ); // 100, 10, 1
 ```
 
 Сравните это с `'+'` (один или более):
 
 ```js
 //+ run
-alert( "100 10 1".match( /\d0+/g ) ); // 100, 10
+alert( "100 10 1".match(/\d0+/g) ); // 100, 10
 ```
 
 </dd>
@@ -115,7 +115,7 @@ alert( "100 10 1".match( /\d0+/g ) ); // 100, 10
 В действии:
 ```js
 //+ run
-alert( "0 1 12.345 7890".match( /\d+\.\d+/g ) ); // 123.45
+alert( "0 1 12.345 7890".match(/\d+\.\d+/g) ); // 123.45
 ```
 
 </dd>
@@ -124,7 +124,7 @@ alert( "0 1 12.345 7890".match( /\d+\.\d+/g ) ); // 123.45
 
 ```js
 //+ run
-alert( "<BODY> ... </BODY>".match ( /<[a-z]+>/gi ) ); // <BODY>
+alert( "<BODY> ... </BODY>".match(/<[a-z]+>/gi) ); // <BODY>
 ```
 
 Это регулярное выражение ищет символ <code class="pattern">'&lt;'</code>, за которым идут одна или более букв английского алфавита, и затем <code class="pattern">'&gt;'</code>. 
@@ -135,7 +135,7 @@ alert( "<BODY> ... </BODY>".match ( /<[a-z]+>/gi ) ); // <BODY>
 
 ```js
 //+ run
-alert( "<h1>Привет!</h1>".match( /<[a-z][a-z0-9]*>/gi ) );  // <h1>
+alert( "<h1>Привет!</h1>".match(/<[a-z][a-z0-9]*>/gi) ); // <h1>
 ```
 
 </dd>
@@ -144,7 +144,7 @@ alert( "<h1>Привет!</h1>".match( /<[a-z][a-z0-9]*>/gi ) );  // <h1>
 
 ```js
 //+ run
-alert( "<h1>Привет!</h1>".match( /<\/?[a-z][a-z0-9]*>/gi ) );  // <h1>, </h1>
+alert( "<h1>Привет!</h1>".match(/<\/?[a-z][a-z0-9]*>/gi) ); // <h1>, </h1>
 ```
 
 </dd>

10-regular-expressions-javascript/8-regexp-greedy-and-lazy/article.md

@@ -152,7 +152,7 @@ alert( str.match(reg) ); // witch, broom
 
 ```js
 //+ run
-alert( "123 456".match ( /\d+ \d+?/g) );  // 123 4
+alert( "123 456".match(/\d+ \d+?/g) ); // 123 4
 ```
 
 <ol>

10-regular-expressions-javascript/9-regexp-groups/article.md

@@ -4,7 +4,7 @@
 
 У такого выделения есть два эффекта:
 <ol>
-<li>Он позволяет выделить часть совпадения в отдельный элемент массива при поиске через [:String#match] или [:RegExp#exec].</li>
+<li>Он позволяет выделить часть совпадения в отдельный элемент массива при поиске через [String#match](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/match) или [RegExp#exec](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec).</li>
 <li>Если поставить квантификатор после скобки, то он применится *ко всей скобке*, а не всего лишь к одному символу.</li>
 </ol>
 
@@ -13,7 +13,7 @@
 
 ```js
 //+ run
-alert( 'Gogogo now!'.match( /(go)+/i );  // "Gogogo"
+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>.
@@ -25,17 +25,17 @@ alert( 'Gogogo now!'.match( /(go)+/i );  // "Gogogo"
 
 Для удобства заключим его в скобки: <code class="pattern">&lt;(.*?)&gt;</code>. Тогда содержимое скобок можно будет получить отдельно.
 
-Используем метод [:String#match]. В результирующем массиве будет сначала всё совпадение, а далее -- скобочные группы, в данном случае -- только одна:
+Используем метод [String#match](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/match). В результирующем массиве будет сначала всё совпадение, а далее -- скобочные группы, в данном случае -- только одна:
 
 ```js
 //+ run
 var str = '<h1>Привет, мир!</h1>'
-var reg = /<(.*?)>/ 
+var reg = /<(.*?)>/
 
-alert( str.match(reg) ) // массив: <h1>, h1
+alert(str.match(reg)) // массив: <h1>, h1
 ```
 
-Для поиска всех совпадений, как мы обсуждали ранее, используется метод [:RegExp#exec].
+Для поиска всех совпадений, как мы обсуждали ранее, используется метод [RegExp#exec](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec).
 
 **Скобки могут быть и вложенными. В этом случае нумерация также идёт слева направо.**
 
@@ -49,7 +49,7 @@ var str = '<span class="my">';
 
 reg = /<(([a-z])[a-z0-9]*).*?>/;
 
-alert( str.match(reg) );  // <span class="my">, span, s
+alert( str.match(reg) ); // <span class="my">, span, s
 ```
 
 Вот так выглядят скобочные группы:
@@ -65,12 +65,12 @@ alert( str.match(reg) );  // <span class="my">, span, s
 
 ```js
 //+ run
-match = 'a'.match( /a(z)?(c)?/ )  
+match = 'a'.match(/a(z)?(c)?/)
 
-alert(match.length); // 3
+alert( match.length ); // 3
-alert(match[0]); // a
+alert( match[0] ); // a
-alert(match[1]); // undefined
+alert( match[1] ); // undefined
-alert(match[2]); // undefined
+alert( match[2] ); // undefined
 ```
 
 Массив получился длины `3`, но все скобочные группы -- `undefined`.
@@ -79,12 +79,12 @@ alert(match[2]); // undefined
 
 ```js
 //+ run
-match = 'ack'.match( /a(z)?(c)?/ )  
+match = 'ack'.match(/a(z)?(c)?/)
 
-alert(match.length); // 3
+alert( match.length ); // 3
-alert(match[0]); // ac, всё совпадение
+alert( match[0] ); // ac, всё совпадение
-alert(match[1]); // undefined, для (z)? ничего нет
+alert( match[1] ); // undefined, для (z)? ничего нет
-alert(match[2]); // c
+alert( match[2] ); // c
 ```
 
 Длина массива результатов по-прежнему `3`. Она постоянна. А вот для скобочной группы <code class="pattern">(z)?</code> в ней ничего нет.

10-regular-expressions-javascript/index.md

@@ -1,5 +1,3 @@
 # Регулярные выражения [в работе]
 
-Регулярные выражения -- мощный способ поиска и замены для строк.
+Регулярные выражения -- мощный способ поиска и замены для строк.
-
-В JavaScript они поддерживаются в простом варианте, менее мощном, чем в большинстве других языков. Но зато  нам будет проще их изучить.

12-extra/10-cookie/article.md

@@ -13,11 +13,11 @@
 alert( document.cookie );
 ```
 
-Эта строка состоит из пар `ключ=значение`, которые перечисляются через точку с запятой с пробелом `; `. 
+Эта строка состоит из пар `ключ=значение`, которые перечисляются через точку с запятой с пробелом `"; "`. 
 
-Значит, чтобы прочитать cookie, достаточно разбить строку по `; `, и затем найти нужный ключ. Это можно делать либо через `split` и работу с массивом, либо через регулярное выражение.
+Значит, чтобы прочитать cookie, достаточно разбить строку по `"; "`, и затем найти нужный ключ. Это можно делать либо через `split` и работу с массивом, либо через регулярное выражение.
 
-### Функция getCookie(name)
+## Функция getCookie(name)
 
 Следующая функция `getCookie(name)` возвращает cookie с именем `name`:
 
@@ -63,7 +63,7 @@ document.cookie = "userName=Vasya";
 ```js
 // +1 день от текущего момента
 var date = new Date;
-date.setDate( date.getDate() + 1 );
+date.setDate(date.getDate() + 1);
 alert( date.toUTCString() );
 ```
 
@@ -78,8 +78,8 @@ alert( date.toUTCString() );
 
 ```js
 //+ run
-var date = new Date( new Date().getTime() + 60*1000 );
+var date = new Date(new Date().getTime() + 60 * 1000);
-document.cookie="name=value; path=/; expires="+date.toUTCString();
+document.cookie = "name=value; path=/; expires=" + date.toUTCString();
 ```
 
 Чтобы удалить это cookie:
@@ -87,12 +87,12 @@ document.cookie="name=value; path=/; expires="+date.toUTCString();
 ```js
 //+ run
 var date = new Date(0);
-document.cookie="name=; path=/; expires="+date.toUTCString();
+document.cookie = "name=; path=/; expires=" + date.toUTCString();
 ```
 
 При удалении значение не важно. Можно его не указывать, как сделано в коде выше.
 
-### Функция setCookie(name, value, options)
+## Функция setCookie(name, value, options)
 
 Если собрать все настройки воедино, вот такая функция ставит куки:
 
@@ -104,23 +104,23 @@ function setCookie(name, value, options) {
 
   if (typeof expires == "number" && expires) {
     var d = new Date();
-    d.setTime(d.getTime() + expires*1000);
+    d.setTime(d.getTime() + expires * 1000);
     expires = options.expires = d;
   }
-  if (expires && expires.toUTCString) { 
+  if (expires && expires.toUTCString) {
-  	options.expires = expires.toUTCString();
+    options.expires = expires.toUTCString();
   }
 
   value = encodeURIComponent(value);
 
   var updatedCookie = name + "=" + value;
 
-  for(var propName in options) {
+  for (var propName in options) {
     updatedCookie += "; " + propName;
-    var propValue = options[propName];    
+    var propValue = options[propName];
-    if (propValue !== true) { 
+    if (propValue !== true) {
       updatedCookie += "=" + propValue;
-     }
+    }
   }
 
   document.cookie = updatedCookie;
@@ -137,7 +137,7 @@ function setCookie(name, value, options) {
 <dt>expires</dt><dd>Время истечения cookie. Интерпретируется по-разному, в зависимости от типа:
 <ul>
 <li>Число -- количество секунд до истечения. Например, `expires: 3600` -- кука на час.</li>
-<li>Объект типа [:Date] -- дата истечения.</li>
+<li>Объект типа [Date](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Date) -- дата истечения.</li>
 <li>Если expires в прошлом, то cookie будет удалено.</li>
 <li>Если expires отсутствует или `0`, то cookie будет установлено как сессионное и исчезнет при закрытии браузера.</li>
 </ul>
@@ -149,13 +149,15 @@ function setCookie(name, value, options) {
 </dd>
 </dl>
 
-### Функция deleteCookie(name)
+## Функция deleteCookie(name)
 
 Здесь всё просто -- удаляем вызовом `setCookie` с датой в прошлом.
 
 ```js
 function deleteCookie(name) {
-  setCookie(name, "", { expires: -1 })
+  setCookie(name, "", {
+    expires: -1
+  })
 }
 ```
 
@@ -241,13 +243,13 @@ function deleteCookie(name) {
 ```js
 //+ run
 if (!navigator.cookieEnabled) {
-  alert('Включите cookie для комфортной работы с этим сайтом');
+  alert( 'Включите cookie для комфортной работы с этим сайтом' );
 }
 ```
 
 ...Конечно, предполагается, что включён JavaScript. Впрочем, посетитель без JS и cookie с большой вероятностью не человек, а бот.</li> 
 </ul>
 
-## Cookie.js
+## Итого
 
-Файл с функциями для работы с cookie: [cookie.js](/files/tutorial/browser/cookie/cookie.js).
+Файл с функциями для работы с cookie: [cookie.js](cookie.js).

12-extra/11-intl/1-collate-array-sort/solution.md

@@ -11,7 +11,7 @@ animals.sort(function(a, b) {
 });
 */!*
 
-alert(animals); // АИСТ,ёж,енот,ехидна,тигр,ЯК
+alert( animals ); // АИСТ,ёж,енот,ехидна,тигр,ЯК
 ```
 
 А вот, что было бы при обычном вызове `sort()`:

12-extra/11-intl/1-collate-array-sort/task.md

@@ -9,7 +9,7 @@ var animals = ["тигр", "ёж", "енот", "ехидна", "АИСТ", "ЯК
 
 // ... ваш код ...
 
-alert(animals); // АИСТ,ёж,енот,ехидна,тигр,ЯК
+alert( animals ); // АИСТ,ёж,енот,ехидна,тигр,ЯК
 ```
 
 В этом примере порядок сортировки не должен зависеть от регистра. 

12-extra/11-intl/article.md

@@ -77,7 +77,7 @@
 
 ```js
 // создание 
-var collator = new Intl.Collator([locales, [options] ])
+var collator = new Intl.Collator([locales, [options]])
 ```
 
 Параметры:
@@ -131,7 +131,9 @@ alert( collator.compare("ёжик", "яблоко") ); // -1 (ёжик мень
 var collator = new Intl.Collator();
 alert( collator.compare("ЁжиК", "ёжик") ); // 1, разные
 
-var collator = new Intl.Collator(undefined, { sensitivity: "accent" } );
+var collator = new Intl.Collator(undefined, {
+  sensitivity: "accent"
+});
 alert( collator.compare("ЁжиК", "ёжик") ); // 0, одинаковые
 ```
 
@@ -141,7 +143,7 @@ alert( collator.compare("ЁжиК", "ёжик") ); // 0, одинаковые
 
 ```js
 // создание 
-var formatter = new Intl.DateFormatter([locales, [options] ])
+var formatter = new Intl.DateFormatter([locales, [options]])
 ```
 
 Первый аргумент -- такой же, как и в `Collator`, а в объекте `options` мы можем определить, какие именно части даты показывать (часы, месяц, год...) и в каком формате.
@@ -281,13 +283,13 @@ alert( formatter.format(date) ); // 12/31/2014
 var date = new Date(2014, 11, 31, 12, 30, 0);
 
 var formatter = new Intl.DateTimeFormat("ru", {
-  weekday: "long", 
+  weekday: "long",
-  year: "numeric", 
+  year: "numeric",
   month: "long",
-  day: "numeric" 
+  day: "numeric"
 });
 
-alert( formatter.format(date) );  // среда, 31 декабря 2014 г.
+alert( formatter.format(date) ); // среда, 31 декабря 2014 г.
 ```
 
 Только время:
@@ -297,12 +299,12 @@ alert( formatter.format(date) );  // среда, 31 декабря 2014 г.
 var date = new Date(2014, 11, 31, 12, 30, 0);
 
 var formatter = new Intl.DateTimeFormat("ru", {
-  hour: "numeric" , 
+  hour: "numeric",
-  minute: "numeric" , 
+  minute: "numeric",
-  second: "numeric" 
+  second: "numeric"
 });
 
-alert( formatter.format(date) );  // 12:30:00
+alert( formatter.format(date) ); // 12:30:00
 ```
 
 ## Числа: Intl.NumberFormat
@@ -312,7 +314,7 @@ alert( formatter.format(date) );  // 12:30:00
 Синтаксис:
 
 ```js
-var formatter = new Intl.NumberFormat([locales [, options] ]);
+var formatter = new Intl.NumberFormat([locales[, options]]);
 
 formatter.format(number); // форматирование
 ```
@@ -398,7 +400,7 @@ formatter.format(number); // форматирование
 ```js
 //+ run
 var formatter = new Intl.NumberFormat("ru");
-alert(formatter.format(1234567890.123)); // 1 234 567 890,123
+alert( formatter.format(1234567890.123) ); // 1 234 567 890,123
 ```
 
 С ограничением значимых цифр (важны только первые 3):
@@ -408,7 +410,7 @@ alert(formatter.format(1234567890.123)); // 1 234 567 890,123
 var formatter = new Intl.NumberFormat("ru", {
   maximumSignificantDigits: 3
 });
-alert(formatter.format(1234567890.123)); // 1 230 000 000
+alert( formatter.format(1234567890.123) ); // 1 230 000 000
 ```
 
 C опциями для валюты:
@@ -419,7 +421,7 @@ var formatter = new Intl.NumberFormat("ru", {
   currency: "GBP"
 });
 
-alert( formatter.format(1234.5)); // 1 234,5 £
+alert( formatter.format(1234.5) ); // 1 234,5 £
 ```
 
 С двумя цифрами после запятой:
@@ -431,7 +433,7 @@ var formatter = new Intl.NumberFormat("ru", {
   minimumFractionDigits: 2
 });
 
-alert( formatter.format(1234.5)); // 1 234,50 £
+alert( formatter.format(1234.5) ); // 1 234,50 £
 ```
 
 ## Методы в Date, String, Number
@@ -454,7 +456,7 @@ alert( str.localeCompare("яблоко", "ru") ); // -1
 <dd>Форматирует дату в соответствии с локалью, например:
 
 ```js
-//+ run
+//+ run no-beautify
 var date = new Date(2014, 11, 31, 12, 00);
 
 alert( date.toLocaleString("ru", { year: 'numeric', month: 'long' }) ); // Декабрь 2014

12-extra/12-regexp-specials/article.md

@@ -2,7 +2,7 @@
 
 Регулярные выражения в javascript немного странные. Вроде - перловые, обычные, но с подводными камнями, на которые натыкаются даже опытные javascript-разработчики.
 
-Эта статья ставит целью перечислить неожиданные фишки и особенности [:RegExp] в краткой и понятной форме.
+Эта статья ставит целью перечислить неожиданные фишки и особенности `RegExp` в краткой и понятной форме.
 
 
 [cut]
@@ -18,12 +18,12 @@
 //+ run
 function bbtagit(text) {
   text = text.replace(/\[u\](.*?)\[\/u\]/gim, '<u>$1</u>')
- 
+
   return text
 }
 
 var line = "[u]мой\n текст[/u]"
-alert( bbtagit(line) )
+alert(bbtagit(line))
 ```
 
 Попробуйте запустить. Заменяет? Как бы не так!
@@ -38,12 +38,12 @@ alert( bbtagit(line) )
 //+ 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) )
+alert(bbtagit(line))
 ```
 
 ## Жадность
@@ -103,7 +103,7 @@ alert(text)
 //+ run
 text = ' [b]a [u]b[/u] c [/b] '
 
-var reg = /\[([bus])\](.*?)\[\//*u*/\1/*/u*/\]/
+var reg = /\[([bus])\](.*?)\[\// * u * /\1/ * /u*/\] /
 text = text.replace(reg, '<$1>$2</$1>')
 alert(text)
 ```
@@ -120,7 +120,7 @@ P.S. Понятно, что при таком способе поиска bb-т
 
 ### Заменить все
 
-Для замены всех вхождений используется метод [:String#replace|]. 
+Для замены всех вхождений используется метод [String#replace](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/replace). 
 Он интересен тем, что допускает первый аргумент - регэксп или строку. 
 
 Если первый аргумент - строка, то будет осуществлен поиск подстроки, без преобразования в регулярное выражение.
@@ -134,7 +134,7 @@ alert("2 ++ 1".replace("+", "*"))
 
 Как видите, заменился только один плюс, а не оба.
 
-**Чтобы заменить все вхождения, [:String#replace|] обязательно нужно использовать с регулярным выражением.**
+**Чтобы заменить все вхождения, [String#replace](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/replace) обязательно нужно использовать с регулярным выражением.**
 
 В режиме регулярного выражения плюс придётся экранировать, но зато <code>replace</code> заменит все вхождения (при указании флага <code>g</code>):
 
@@ -152,7 +152,7 @@ alert("2 ++ 1".replace(/\+/g, "*"))
 Следующий пример произведет операции вычитания:
 
 ```js
-//+ run
+//+ run no-beautify
 var str = "count 36 - 26, 18 - 9"
 str = str.replace(/(\d+) - (\d+)/g, function(a,b,c) { return b-c })
 alert(str)
@@ -161,32 +161,32 @@ alert(str)
 ### Найти всё
 
 В javascript нет одного универсального метода для поиска всех совпадений. 
-Для поиска без запоминания скобочных групп - можно использовать [:String#match|]:
+Для поиска без запоминания скобочных групп - можно использовать [String#match](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/match):
 
 ```js
 //+ run
 var str = "count 36-26, 18-9"
-var re =  /(\d+)-(\d+)/g
+var re = /(\d+)-(\d+)/g
 result = str.match(re)
-for(var i=0; i<result.length; i++) alert(result[i])
+for (var i = 0; i < result.length; i++) alert(result[i])
 ```
 
 Как видите, оно исправно ищет все совпадения (флаг <code>'g'</code> у регулярного выражения обязателен), но при этом не запоминает скобочные группы. Эдакий "облегченный вариант". 
 
 ### Найти всё с учётом скобочных групп
 
-В сколько-нибудь сложных задачах важны не только совпадения, но и скобочные группы. Чтобы их найти, предлагается использовать многократный вызов [:RegExp#exec|].
+В сколько-нибудь сложных задачах важны не только совпадения, но и скобочные группы. Чтобы их найти, предлагается использовать многократный вызов [RegExp#exec](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/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 re = /(\d+)-(\d+)/g
 var res
-while ( (res = re.exec(str)) != null) {
+while ((res = re.exec(str)) != null) {
-  alert("Найдено " + res[0] + ":  ("+ res[1]+") и ("+res[2]+")")
+  alert("Найдено " + res[0] + ":  (" + res[1] + ") и (" + res[2] + ")")
-  alert("Дальше ищу с позиции "+re.lastIndex)
+  alert("Дальше ищу с позиции " + re.lastIndex)
 }
 ```
 

12-extra/3-templates/article.md

@@ -16,6 +16,7 @@
 Пример:
 
 ```html
+<!--+ no-beautify -->
 <div class="menu">
   <span class="title"><%-title%></span>
   <ul>
@@ -129,6 +130,7 @@ alert( compiled() ); // <div>Привет</div>
 Шаблон для меню в Handlerbars, к примеру, будет выглядеть так:
 
 ```html
+<!--+ no-beautify -->
 <div class="menu">
   <span class="title">{{title}}</span>
   <ul>
@@ -151,7 +153,7 @@ var compiled = Handlebars.compile(tmpl);
 
 var result = compiled({
   title: "Сладости",
-  items: [ "Торт", "Пирожное", "Пончик" ]
+  items: ["Торт", "Пирожное", "Пончик"]
 });
 ```
 
@@ -228,7 +230,7 @@ ko.applyBindings(user, document.body);
 Например:
 
 ```html
-<!--+ run -->
+<!--+ run  no-beautify -->
 <script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
 
 <script>

12-extra/4-books/article.md

@@ -17,7 +17,7 @@ CSS стоит изучать по одной из этих книг. Можно
 <i>Эрик Мейер</i></li>
 </ul>
 
-Конечно, [стандарт CSS 2.1](http://specs.operafan.net/css2.1RU/CSS21/visuren.html) тоже будет вам в помощь. Подчас его скупая простота и точность гораздо понятнее, чем много страниц разъяснений.
+Конечно, [стандарты](http://www.w3.org/Style/CSS/) тоже будут полезны. Подчас их точность куда проще, чем много страниц разъяснений.
 
 ## JavaScript
 

12-extra/5-setImmediate/article.md

@@ -16,6 +16,7 @@
 Полифилл для `setImmediate` через `postMessage`:
 
 ```js
+//+ no-beautify
 if (!window.setImmediate) window.setImmediate = (function() {
   var head = { }, tail = head; // очередь вызовов, 1-связный список
 

12-extra/6-bind-late/article.md

@@ -59,7 +59,7 @@ var func = bindLate(obj, "method");
 Код:
 
 ```js
-function bindLate(context, funcName) { 
+function bindLate(context, funcName) {
   return function() {
     return context[funcName].apply(context, arguments);
   };
@@ -138,7 +138,7 @@ userSayHi(); // Метод работает: *!*Привет!*/!*
 Обёртка для позднего связывания (без карринга):
 
 ```js
-function bindLate(context, funcName) { 
+function bindLate(context, funcName) {
   return function() {
     return context[funcName].apply(context, arguments);
   };

12-extra/8-range-textrange-selection/article.md

@@ -50,25 +50,25 @@ HTML:
 </button>
 
 <script>
-function domRangeCreate() {
+  function domRangeCreate() {
-  // Найдем корневой контейнер
+    // Найдем корневой контейнер
-  var root = document.getElementById('ex2');
+    var root = document.getElementById('ex2');
-  // Найдем контейнеры граничных точек (в данном случае тестовые)
+    // Найдем контейнеры граничных точек (в данном случае тестовые)
-  var start = root.getElementsByTagName('h2')[0].firstChild;
+    var start = root.getElementsByTagName('h2')[0].firstChild;
-  var end = root.getElementsByTagName('p')[0].firstChild;
+    var end = root.getElementsByTagName('p')[0].firstChild;
-  if (root.createRange) {
+    if (root.createRange) {
-    // Создаем Range
+      // Создаем Range
-    var rng = root.createRange();
+      var rng = root.createRange();
-    // Задаем верхнюю граничную точку, передав контейнер и смещение
+      // Задаем верхнюю граничную точку, передав контейнер и смещение
-    rng.setStart( start, 3 );
+      rng.setStart(start, 3);
-    // Аналогично для нижней границы
+      // Аналогично для нижней границы
-    rng.setEnd( end, 10 );
+      rng.setEnd(end, 10);
-    // Теперь мы можем вернуть текст, который содержится в полученной области
+      // Теперь мы можем вернуть текст, который содержится в полученной области
-    return rng.toString();
+      return rng.toString();
-  } else {
+    } else {
-    return 'Вероятно, у вас IE8-, смотрите реализацию TextRange ниже';
+      return 'Вероятно, у вас IE8-, смотрите реализацию TextRange ниже';
+    }
   }
-}
 </script>
 ```
 
@@ -99,9 +99,9 @@ function domRangeCreate() {
 ```js
 var rng = document.createRange();
 // Установит верхнюю граничную точку по левой границе спана #s1
-rng.setStartBefore( document.getElementById('s1') );
+rng.setStartBefore(document.getElementById('s1'));
 // Установит нижнюю граничную точку по правой границе спана #s2
-rng.setEndAfter( document.getElementById('s2') );
+rng.setEndAfter(document.getElementById('s2'));
 ```
 
 </li>
@@ -129,32 +129,32 @@ rng.setEndAfter( document.getElementById('s2') );
 </div>
 
 <script>
-function domRangeHighlight(text) {
+  function domRangeHighlight(text) {
-  // Получим текстовый узел
+    // Получим текстовый узел
-  var root = document.getElementById('ex3').firstChild;
+    var root = document.getElementById('ex3').firstChild;
-  // и его содержимое
+    // и его содержимое
-  var content = root.nodeValue;
+    var content = root.nodeValue;
-  // Проверим есть ли совпадения с переданным текстом
+    // Проверим есть ли совпадения с переданным текстом
-  if ( ~content.indexOf( text ) ) {
+    if (~content.indexOf(text)) {
-    if ( document.createRange ) {
+      if (document.createRange) {
-      // Если есть совпадение, и браузер поддерживает Range, создаем объект
+        // Если есть совпадение, и браузер поддерживает Range, создаем объект
-      var rng = document.createRange();
+        var rng = document.createRange();
-      // Ставим верхнюю границу по индексу совпадения,
+        // Ставим верхнюю границу по индексу совпадения,
-      rng.setStart( root, content.indexOf( text ) );
+        rng.setStart(root, content.indexOf(text));
-      // а нижнюю по индексу + длина текста
+        // а нижнюю по индексу + длина текста
-      rng.setEnd( root, content.indexOf( text ) + text.length );
+        rng.setEnd(root, content.indexOf(text) + text.length);
-      // Создаем спан с синим фоном
+        // Создаем спан с синим фоном
-      var highlightDiv = document.createElement('span');
+        var highlightDiv = document.createElement('span');
-      highlightDiv.style.backgroundColor = 'blue';
+        highlightDiv.style.backgroundColor = 'blue';
-      // Обернем наш Range в спан
+        // Обернем наш Range в спан
-      rng.surroundContents( highlightDiv );
+        rng.surroundContents(highlightDiv);
+      } else {
+        alert( 'Вероятно, у вас IE8-, смотрите реализацию TextRange ниже' );
+      }
     } else {
-      alert('Вероятно, у вас IE8-, смотрите реализацию TextRange ниже');
+      alert( 'Совпадений не найдено' );
     }
-  } else {
-    alert('Совпадений не найдено');
   }
-}
 </script>
 ```
 
@@ -177,19 +177,19 @@ function domRangeHighlight(text) {
 <input id="buttonId" type="button" value="Test button" onclick="alert( ieTextRangeCreate() );" />
 
 <script>
-function ieTextRangeCreate() {
+  function ieTextRangeCreate() {
-  // Найдем кнопку
+    // Найдем кнопку
-  var button = document.getElementById('buttonId');
+    var button = document.getElementById('buttonId');
-  // Если мы в ИЕ
+    // Если мы в ИЕ
-  if ( button.createTextRange && button.createTextRange() != undefined ) {
+    if (button.createTextRange && button.createTextRange() != undefined) {
-    // Создаем TextRange
+      // Создаем TextRange
-    var rng = button.createTextRange();
+      var rng = button.createTextRange();
-    // И вернем текстовое содержимое полученного объекта
+      // И вернем текстовое содержимое полученного объекта
-    return rng.text;
+      return rng.text;
-  } else {
+    } else {
-    return 'Вероятно, у вас не IE, смотрите реализацию Range выше';
+      return 'Вероятно, у вас не IE, смотрите реализацию Range выше';
+    }
   }
-}
 </script>
 ```
 
@@ -239,30 +239,30 @@ function ieTextRangeCreate() {
 </div>
 
 <script>
-function ieTextRangeHighlight(text) {
+  function ieTextRangeHighlight(text) {
-  // Получим ссылку на элемент, в котором будет происходить поиск
+    // Получим ссылку на элемент, в котором будет происходить поиск
-  var root = document.getElementById('ex4');
+    var root = document.getElementById('ex4');
-  // Получим значение его текстового потомка
+    // Получим значение его текстового потомка
-  var content = root.firstChild.nodeValue;
+    var content = root.firstChild.nodeValue;
-  // Если есть совпадение
+    // Если есть совпадение
-  if ( ~content.indexOf(text) ) {
+    if (~content.indexOf(text)) {
-    // и мы в MSIE
+      // и мы в MSIE
-    if ( document.body.createTextRange ) {
+      if (document.body.createTextRange) {
-      // Создадим объект TextRange
+        // Создадим объект TextRange
-      var rng = document.body.createTextRange();
+        var rng = document.body.createTextRange();
-      // Свернем его до root
+        // Свернем его до root
-      rng.moveToElementText( root );
+        rng.moveToElementText(root);
-      // Найдем текст и свернем диапазон до него
+        // Найдем текст и свернем диапазон до него
-      if ( rng.findText( text ) )
+        if (rng.findText(text))
         // Заменим текстовый фрагмент на span с синим фоном
-        rng.pasteHTML( '<span style="background:blue;">' + text + '</span>' );
+          rng.pasteHTML('<span style="background:blue;">' + text + '</span>');
+      } else {
+        alert( 'Вероятно, у вас не  IE, смотрите реализацию Range выше' );
+      }
     } else {
-      alert('Вероятно, у вас не  IE, смотрите реализацию Range выше');
+      alert( 'Совпадений не найдено' );
     }
-  } else {
-    alert('Совпадений не найдено');
   }
-}
 </script>
 ```
 
@@ -281,6 +281,7 @@ function ieTextRangeHighlight(text) {
 Эту задачу мы уже решали в самом начале статьи <a href="#demo-mix">в примере с миксом</a>. Теперь рассмотрим код:
 
 ```js
+//+ no-beautify
 function getSelectionText() {
   var txt = '';
   if (txt = window.getSelection) // Не IE, используем метод getSelection
@@ -342,21 +343,21 @@ IE предоставляет собственный интерфейс взаи
 </div>
 
 <script>
-function setSelection() {
+  function setSelection() {
-  var target = document.getElementById('ex5').getElementsByTagName('span')[0];
+    var target = document.getElementById('ex5').getElementsByTagName('span')[0];
-  var rng, sel;
+    var rng, sel;
-  if ( document.createRange ) {
+    if (document.createRange) {
-    rng = document.createRange();
+      rng = document.createRange();
-    rng.selectNode( target )
+      rng.selectNode(target)
-    sel = window.getSelection();
+      sel = window.getSelection();
-    sel.removeAllRanges();
+      sel.removeAllRanges();
-    sel.addRange( rng );
+      sel.addRange(rng);
-  } else {
+    } else {
-    var rng = document.body.createTextRange();
+      var rng = document.body.createTextRange();
-    rng.moveToElementText( target );
+      rng.moveToElementText(target);
-    rng.select();
+      rng.select();
+    }
   }
-}
 </script>
 ```
 
@@ -372,7 +373,7 @@ function clearSelection() {
   try {
     // современный объект Selection
     window.getSelection().removeAllRanges();
-  } catch(e) {
+  } catch (e) {
     // для IE8-
     document.selection.empty();
   }
@@ -393,15 +394,15 @@ function clearSelection() {
 
 ```js
   var range = getRangeObject();
-  if(range) {
+  if (range) {
-    alert(range);
+    alert( range );
-    alert(range.startContainer.nodeValue);
+    alert( range.startContainer.nodeValue );
-    alert(range.startOffset);
+    alert( range.startOffset );
-    alert(range.endOffset);
+    alert( range.endOffset );
   } else {
-    alert('Ничего не выделено');
+    alert( 'Ничего не выделено' );
+  }
   }
-}
 ```
 
 В действии:

2-ui/1-document/1-browser-environment/article.md

@@ -29,7 +29,7 @@ window.open('http://ya.ru');
 ```js
 //+ run
 document.body.style.background = 'red';
-alert('Элемент BODY стал красным, а сейчас обратно вернётся');
+alert( 'Элемент BODY стал красным, а сейчас обратно вернётся' );
 document.body.style.background = '';
 ```
 
@@ -57,7 +57,7 @@ BOM -- это объекты для работы с чем угодно, кро
 Пример использования:
 ```js
 //+ run
-alert(location.href); // выведет текущий адрес
+alert( location.href ); // выведет текущий адрес
 ```
 
 Большинство возможностей BOM стандартизированы в [HTML 5](http://www.w3.org/TR/html5/Overview.html), хотя различные браузеры и предоставляют зачастую что-то своё, в дополнение к стандарту.

2-ui/1-document/10-compare-document-position/article.md

@@ -57,21 +57,21 @@ var result = nodeA.compareDocumentPosition(nodeB);
 </ul>
 
 <script>
-var p = document.body.children[0];
+  var p = document.body.children[0];
-var ul = document.body.children[1];
+  var ul = document.body.children[1];
-var li = ul.children[0];
+  var li = ul.children[0];
 
-// 1. <ul> находится после <p>
+  // 1. <ul> находится после <p>
-alert( ul.compareDocumentPosition( p ) ); // 2 = 10
+  alert( ul.compareDocumentPosition(p) ); // 2 = 10
 
-// 2. <p> находится до <ul>
+  // 2. <p> находится до <ul>
-alert( p.compareDocumentPosition( ul ) );  // 4 = 100
+  alert( p.compareDocumentPosition(ul) ); // 4 = 100
 
-// 3. <ul> родитель <li>
+  // 3. <ul> родитель <li>
-alert( ul.compareDocumentPosition( li ) ); // 20 = 10100
+  alert( ul.compareDocumentPosition(li) ); // 20 = 10100
 
-// 4. <ul> потомок <body>
+  // 4. <ul> потомок <body>
-alert( ul.compareDocumentPosition( document.body ) ); // 10 = 1010
+  alert( ul.compareDocumentPosition(document.body) ); // 10 = 1010
 </script>
 ```
 
@@ -111,13 +111,13 @@ alert( 20..toString(2) );
 </ul>
 
 <script>
-var body = document.body;
+  var body = document.body;
-var li = document.body.children[0].children[0];
+  var li = document.body.children[0].children[0];
 
 *!*
-if( body.compareDocumentPosition(li) & 16 ) {
+  if (body.compareDocumentPosition(li) & 16) {
-  alert( body +' содержит ' + li );
+    alert( body + ' содержит ' + li );
-}
+  }
 */!*
 </script>
 ```
@@ -139,18 +139,17 @@ if( body.compareDocumentPosition(li) & 16 ) {
 
 ```js
 // код с http://compatibility.shwups-cms.ch/en/polyfills/?&id=82
-(function(){
+(function() {
   var el = document.documentElement;
-  if( !el.compareDocumentPosition && el.sourceIndex !== undefined ){
+  if (!el.compareDocumentPosition && el.sourceIndex !== undefined) {
 
-    Element.prototype.compareDocumentPosition = function(other){
+    Element.prototype.compareDocumentPosition = function(other) {
       return (this != other && this.contains(other) && 16) +
-                 (this != other && other.contains(this) && 8) +
+        (this != other && other.contains(this) && 8) +
-                 (this.sourceIndex >= 0 && other.sourceIndex >= 0 ?
+        (this.sourceIndex >= 0 && other.sourceIndex >= 0 ?
-                   (this.sourceIndex < other.sourceIndex && 4) +
+          (this.sourceIndex < other.sourceIndex && 4) +
-                   (this.sourceIndex > other.sourceIndex && 2) 
+          (this.sourceIndex > other.sourceIndex && 2) : 1
-                   : 1
+        ) + 0;
-                 ) + 0;
     }
   }
 }());

2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.md

@@ -4,7 +4,7 @@
 
 ```html
 <div id="clock">
-    <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
+  <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
 </div>
 ```
 
@@ -15,21 +15,21 @@
 ```js
 function update() {
   var clock = document.getElementById('clock');
-  
+
 *!*
   var date = new Date(); // (*)
 */!*
 
   var hours = date.getHours();
-  if (hours < 10) hours = '0'+hours;
+  if (hours < 10) hours = '0' + hours;
   clock.children[0].innerHTML = hours;
 
   var minutes = date.getMinutes();
-  if (minutes < 10) minutes = '0'+minutes;
+  if (minutes < 10) minutes = '0' + minutes;
   clock.children[1].innerHTML = minutes;
 
   var seconds = date.getSeconds();
-  if (seconds < 10) seconds = '0'+seconds;
+  if (seconds < 10) seconds = '0' + seconds;
   clock.children[2].innerHTML = seconds;
 }
 ```
@@ -41,9 +41,9 @@ function update() {
 Функция `clockStart` для запуска часов:
 
 ```js
-function clockStart() {  // запустить часы
+function clockStart() { // запустить часы
   setInterval(update, 1000);
-  update();  // (*)
+  update(); // (*)
 }
 
 function clockStop() {

2-ui/1-document/11-modifying-document/2-remove-polyfill/solution.md

@@ -18,6 +18,6 @@
 
   var elem = document.body.children[0];
 
-  elem.remove();  
+  elem.remove();
 </script>
 ```

2-ui/1-document/11-modifying-document/2-remove-polyfill/task.md

@@ -16,12 +16,12 @@
 <div>Элементы DOM</div>
 
 <script>
-  /* ваш код полифилла */ 
+  /* ваш код полифилла */
-  
+
   var elem = document.body.children[0];
 
 *!*
-  elem.remove();  // <-- вызов должен удалить элемент
+  elem.remove(); // <-- вызов должен удалить элемент
 */!*
 </script>
 ```

2-ui/1-document/11-modifying-document/3-insert-after/solution.md

@@ -9,9 +9,9 @@ function insertAfter(elem, refElem) {
   var parent = refElem.parentNode;
   var next = refElem.nextSibling;
   if (next) {
-      return parent.insertBefore(elem, next);
+    return parent.insertBefore(elem, next);
   } else {
-      return parent.appendChild(elem);
+    return parent.appendChild(elem);
   }
 }
 ```
@@ -20,7 +20,7 @@ function insertAfter(elem, refElem) {
 
 ```js
 function insertAfter(elem, refElem) {
-    return refElem.parentNode.insertBefore(elem, refElem.nextSibling);
+  return refElem.parentNode.insertBefore(elem, refElem.nextSibling);
 }
 ```
 

2-ui/1-document/11-modifying-document/3-insert-after/task.md

@@ -20,8 +20,7 @@
   insertAfter(elem, body.firstChild); // <--- должно работать
 
   // вставить elem за последним элементом
-  insertAfter(elem, body.lastChild);  // <--- должно работать 
+  insertAfter(elem, body.lastChild); // <--- должно работать
-  
 </script>
 ```
 

2-ui/1-document/11-modifying-document/4-remove-children/solution.md

@@ -4,7 +4,7 @@
 
 ```js
 function removeChildren(elem) {
-  for(var k=0; k<elem.childNodes.length;k++) {
+  for (var k = 0; k < elem.childNodes.length; k++) {
     elem.removeChild(elem.childNodes[k]);
   }
 }
@@ -20,7 +20,7 @@ function removeChildren(elem) {
 
 ```js
 function removeChildren(elem) {
-  while(elem.lastChild) {
+  while (elem.lastChild) {
     elem.removeChild(elem.lastChild);
   }
 }
@@ -44,8 +44,8 @@ function removeChildren(elem) {
 function removeChildren(elem) {
   try {
     elem.innerHTML = '';
-  } catch(e) {
+  } catch (e) {
-    while(elem.firstChild) { 
+    while (elem.firstChild) {
       elem.removeChild(elem.firstChild);
     }
   }

2-ui/1-document/11-modifying-document/4-remove-children/task.md

@@ -7,7 +7,9 @@
 ```html
 <table id="table">
   <tr>
-    <td>Это</td><td>Все</td><td>Элементы DOM</td>
+    <td>Это</td>
+    <td>Все</td>
+    <td>Элементы DOM</td>
   </tr>
 </table>
 

2-ui/1-document/11-modifying-document/5-why-aaa/task.md

@@ -9,17 +9,17 @@
 <table>
   aaa
   <tr>
-   <td>Test</td>
+    <td>Test</td>
   </tr>
 </table>
 
 <script>
-var table = document.body.children[0]; 
+  var table = document.body.children[0];
 
-alert(table); // таблица, пока всё правильно
+  alert( table ); // таблица, пока всё правильно
 
-document.body.removeChild( table );
+  document.body.removeChild(table);
-// почему в документе остался текст?
+  // почему в документе остался текст?
 </script>
 ```
 

2-ui/1-document/11-modifying-document/7-create-object-tree/task.md

@@ -8,19 +8,19 @@
 
 ```js
 var data = {
-  "Рыбы":{
+  "Рыбы": {
-    "Форель":{},
+    "Форель": {},
-    "Щука":{}
+    "Щука": {}
   },
 
-  "Деревья":{
+  "Деревья": {
-    "Хвойные":{
+    "Хвойные": {
-      "Лиственница":{},
+      "Лиственница": {},
-      "Ель":{}
+      "Ель": {}
     },
-    "Цветковые":{
+    "Цветковые": {
-      "Берёза":{},
+      "Берёза": {},
-      "Тополь":{}
+      "Тополь": {}
     }
   }
 };

2-ui/1-document/11-modifying-document/article.md

@@ -78,12 +78,10 @@ div.innerHTML = "<strong>Ура!</strong> Вы прочитали это важ
 </ol>
 
 <script>
-
   var newLi = document.createElement('li');
   newLi.innerHTML = 'Привет, мир!';
 
   list.appendChild(newLi);
-
 </script>
 ```
 
@@ -101,7 +99,6 @@ div.innerHTML = "<strong>Ура!</strong> Вы прочитали это важ
   <li>2</li>
 </ol>
 <script>
-
   var newLi = document.createElement('li');
   newLi.innerHTML = 'Привет, мир!';
 
@@ -147,6 +144,7 @@ parentElem.appendChild(elem)
 ```html
 <!--+ height=150 run autorun -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
+
 <body>
   <h3>Моя страница</h3>
 </body>
@@ -167,6 +165,7 @@ parentElem.appendChild(elem)
 ```html
 <!--+ height=150 run autorun -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
+
 <body>
   <h3>Моя страница</h3>
 </body>
@@ -197,6 +196,7 @@ parentElem.appendChild(elem)
 ```html
 <!--+ height=200 run autorun -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
+
 <body>
   <h3>Моя страница</h3>
 </body>
@@ -214,16 +214,15 @@ parentElem.appendChild(elem)
   // копию можно подправить
   div2.querySelector('strong').innerHTML = 'Супер!';
   // вставим её после текущего сообщения
-  div.parentNode.insertBefore( div2, div.nextSibling );
+  div.parentNode.insertBefore(div2, div.nextSibling);
 */!*
-
 </script>
 ```
 
 Обратите внимание на последнюю строку, которая вставляет `div2` после `div`:
 
 ```js
-div.parentNode.insertBefore( div2, div.nextSibling );
+div.parentNode.insertBefore(div2, div.nextSibling);
 ```
 
 <ol>
@@ -284,6 +283,7 @@ div.parentNode.insertBefore( div2, div.nextSibling );
 ```html
 <!--+ run -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
+
 <body>
   <h3>Сообщение пропадёт через секунду</h3>
 </body>
@@ -321,12 +321,12 @@ div.parentNode.insertBefore( div2, div.nextSibling );
   var div = document.createElement('div');
   div.className = "alert alert-success";
   document.body.appendChild(div);
-  
+
 *!*
   var text = prompt("Введите текст для сообщения", "Жили были <a> и <b>!");
 
   // вставится именно как текст, без HTML-обработки
-  div.appendChild( document.createTextNode(text) );
+  div.appendChild(document.createTextNode(text));
 */!*
 </script>
 ```

2-ui/1-document/12-multi-insert/article.md

@@ -14,13 +14,14 @@
 ```js
 var ul = document.createElement('ul');
 document.body.appendChild(ul); // сначала в документ
-for(...) ul.appendChild(li);   // потом узлы
+for (...) ul.appendChild(li); // потом узлы
 ```
 
 </li>
 <li>Полностью создать список "вне DOM", а потом -- вставить в документ:
 
 ```js
+//+ no-beautify
 var ul = document.createElement('ul');
 for(...) ul.appendChild(li);   // сначала вставить узлы
 document.body.appendChild(ul); // затем в документ
@@ -115,14 +116,14 @@ elem.insertAdjacentHTML(where, html);
 </ul>
 
 <script>
-var ul = document.body.children[0];
+  var ul = document.body.children[0];
-var li5 = ul.children[2];
+  var li5 = ul.children[2];
 
-li5.insertAdjacentHTML("beforeBegin", "<li>3</li><li>4</li>");
+  li5.insertAdjacentHTML("beforeBegin", "<li>3</li><li>4</li>");
 </script>
 ```
 
-Единственный недостаток этого метода -- он не работает в Firefox до версии 8. Но его можно легко добавить, используя [полифилл insertAdjacentHTML для Firefox](insertAdjacentHTML.js).
+Единственный недостаток этого метода -- он не работает в Firefox до версии 8. Но его можно легко добавить, используя [полифилл insertAdjacentHTML для Firefox](insertAdjacentFF.js).
 
 У этого метода есть "близнецы-братья", которые поддерживаются везде, кроме Firefox, но в него они добавляются тем же полифиллом:
 
@@ -181,7 +182,7 @@ for (цикл по li) {
   fragment.appendChild(list[i]); // вставить каждый LI в DocumentFragment 
 }
 
-ul.appendChild(fragment);   // вместо фрагмента вставятся элементы списка
+ul.appendChild(fragment); // вместо фрагмента вставятся элементы списка
 ```
 
 В современных браузерах эффект от такой оптимизации может быть различным, а на небольших документах иногда и отрицательным. 
@@ -211,28 +212,30 @@ ul.appendChild(fragment);   // вместо фрагмента вставятс
 ```html
 <!--+ run autorun height=80 -->
 <html>
+
 <head>
   <meta charset="utf-8">
   <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.mutation"></script>
 </head>
 
 <body>
-<script>
+  <script>
-  // добавим элемент в конец <body>
+    // добавим элемент в конец <body>
-  var p = document.createElement('p');
+    var p = document.createElement('p');
-  document.body.append(p);
+    document.body.append(p);
 
-  var em = document.createElement('em');
+    var em = document.createElement('em');
-  em.append('Мир!');
+    em.append('Мир!');
 
-  // вставить в параграф текстовый и обычный узлы
+    // вставить в параграф текстовый и обычный узлы
-  p.append("Привет, ", em);
+    p.append("Привет, ", em);
 
-  // добавить элемент после <p>
+    // добавить элемент после <p>
-  p.after(document.createElement('hr'))
+    p.after(document.createElement('hr'))
-</script>
+  </script>
 
 </body>
+
 </html>
 ```
 

2-ui/1-document/13-document-write/article.md

@@ -13,11 +13,11 @@ HTML-документ ниже будет содержать `1 2 3`.
 ```html
 <!--+ run -->
 <body>
-1
+  1
-<script>
+  <script>
-  document.write(2);
+    document.write(2);
-</script>
+  </script>
-3
+  3
 </body>
 ```
 
@@ -29,14 +29,18 @@ HTML-документ ниже будет содержать `1 2 3`.
 
 ```html
 <!--+ run -->
-<script> 
+<script>
   document.write('<style> td { color: #F40 } </style>');
- </script>
+</script>
 <table>
   <tr>
-  <script> document.write('<td>') </script>
+    <script>
+      document.write('<td>')
+    </script>
     Текст внутри TD.
-  <script> document.write('</td>') </script>
+    <script>
+      document.write('</td>')
+    </script>
   </tr>
 </table>
 ```
@@ -93,7 +97,7 @@ HTML-документ ниже будет содержать `1 2 3`.
   var url = 'http://ads.com/buyme?screen=' + screen.width + "x" + screen.height;
 
   // загрузить такой скрипт прямо сейчас
-  document.write('<script src="'+url+'"></scr'+'ipt>');
+  document.write('<script src="' + url + '"></scr' + 'ipt>');
 </script>
 ```
 
@@ -103,7 +107,7 @@ HTML-документ ниже будет содержать `1 2 3`.
 Также используют запись:
 
 ```js
-document.write('<script src="'+url+'"><\/script>');
+document.write('<script src="' + url + '"><\/script>');
 ```
 
 Здесь `<\/script>` вместо `</script>`: обратный слеш `\` обычно используется для вставки спецсимволов типа `\n`, а если такого спецсимвола нет, в данном случае `\/` не является спецсимволом, то будет проигнорирован. Так что получается такой альтернативный способ безопасно вставить строку `</script>`. 

2-ui/1-document/14-styles-and-classes/2-create-notification/task.md

@@ -16,7 +16,7 @@
  * @param options.className {string} CSS-класс 
  * @param options.html {string} HTML-текст для показа
  */
-function showNotification(options) { 
+function showNotification(options) {
   // ваш код
 }
 ```

2-ui/1-document/14-styles-and-classes/article.md

@@ -21,6 +21,7 @@
 **Для свойств, названия которых состоят из нескольких слов, используется вотТакаяЗапись:**
 
 ```js
+//+ no-beautify
 background-color  => elem.style.backgroundColor
 z-index           => elem.style.zIndex
 border-left-width => elem.style.borderLeftWidth
@@ -73,15 +74,15 @@ setTimeout(function() {
 ```html
 <!--+ run height=100 -->
 <body>
-  <script> 
+  <script>
 *!*
     document.body.style.margin = '20px';
-    alert(document.body.style.marginTop); // 20px! 
+    alert( document.body.style.marginTop ); // 20px! 
 */!*
 
 *!*
     document.body.style.color = '#abc';
-    alert(document.body.style.color); // rgb(170, 187, 204) 
+    alert( document.body.style.color ); // rgb(170, 187, 204) 
 */!*
   </script>
 </body>
@@ -146,7 +147,7 @@ setTimeout(function() {
 Вот так `style` уже ничего не увидит:
 
 ```html
-<!--+ run height=100 -->
+<!--+ run height=100  no-beautify -->
 <head>
   <style> body { color: red; margin: 5px } </style>
 </head>
@@ -190,14 +191,17 @@ getComputedStyle(element[, pseudo])
 ```html
 <!--+ run height=100 -->
 <style>
-  body { margin: 10px }
+  body {
+    margin: 10px
+  }
 </style>
+
 <body>
 
-  <script> 
+  <script>
     var computedStyle = getComputedStyle(document.body);
-    alert(computedStyle.marginTop);  // выведет отступ в пикселях
+    alert( computedStyle.marginTop ); // выведет отступ в пикселях
-    alert(computedStyle.color);  // выведет цвет 
+    alert( computedStyle.color ); // выведет цвет
   </script>
 
 </body>
@@ -264,10 +268,13 @@ function getStyle(elem) {
 ```html
 <!--+ run height=100 -->
 <style>
-  body { margin: 10% }
+  body {
+    margin: 10%
+  }
 </style>
+
 <body>
-  <script> 
+  <script>
     var elem = document.body;
 
     function getStyle(elem) {
@@ -275,7 +282,7 @@ function getStyle(elem) {
     }
 
     var marginTop = getStyle(elem).marginTop;
-    alert(marginTop); // IE8-: 10%, иначе пиксели
+    alert( marginTop ); // IE8-: 10%, иначе пиксели
   </script>
 </body>
 ```

2-ui/1-document/15-metrics/2-scrollbar-width/solution.md

@@ -4,9 +4,9 @@
 //+ run
 // создадим элемент с прокруткой
 var div = document.createElement('div');
-      
+
 div.style.overflowY = 'scroll';
-div.style.width =  '50px';
+div.style.width = '50px';
 div.style.height = '50px';
 
 // при display:none размеры нельзя узнать

2-ui/1-document/15-metrics/3-div-placeholder/solution.md

@@ -20,9 +20,9 @@ placeHolder.style.height = div.offsetHeight + 'px';
 // можно и width, но в этом примере это не обязательно
 
 // IE || другой браузер
-var computedStyle = div.currentStyle ||  getComputedStyle(div, '');
+var computedStyle = div.currentStyle || getComputedStyle(div, '');
 
-placeHolder.style.marginTop = computedStyle.marginTop;          // (1)
+placeHolder.style.marginTop = computedStyle.marginTop; // (1)
 placeHolder.style.marginBottom = computedStyle.marginBottom;
 ```
 

2-ui/1-document/15-metrics/3-div-placeholder/task.md

@@ -5,7 +5,7 @@
 Посмотрим следующий случай из жизни. Был текст, который, в частности, содержал `div` с зелеными границами:
 
 ```html
-<!--+ run -->
+<!--+ run  no-beautify -->
 <style> 
   #moving-div { 
     border: 5px groove green; 

2-ui/1-document/15-metrics/4-put-ball-in-center/solution.md

@@ -12,8 +12,8 @@
 var ball = document.getElementById('ball');
 var field = document.getElementById('field');
 
-ball.style.left = Math.round(field.clientWidth / 2)+'px';
+ball.style.left = Math.round(field.clientWidth / 2) + 'px';
-ball.style.top = Math.round(field.clientHeight / 2)+'px';
+ball.style.top = Math.round(field.clientHeight / 2) + 'px';
 ```
 
 [iframe hide="Нажмите, чтобы посмотреть текущий результат" height=180 src="ball-half"]
@@ -24,8 +24,8 @@ ball.style.top = Math.round(field.clientHeight / 2)+'px';
 var ball = document.getElementById('ball');
 var field = document.getElementById('field');
 
-ball.style.left = Math.round(field.clientWidth/2 - ball.offsetWidth/2)+'px';
+ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px';
-ball.style.top = Math.round(field.clientHeight/2 - ball.offsetHeight/2)+'px';
+ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px';
 ```
 
 **Внимание, подводный камень!**

2-ui/1-document/15-metrics/article.md

@@ -11,6 +11,7 @@
 Мы будем использовать для примера вот такой элемент, у которого есть рамка (border), поля (padding), и прокрутка:
 
 ```html
+<!--+ no-beautify -->
 <div id="example">
   ...Текст...
 </div>
@@ -125,7 +126,7 @@
 **Это дает нам замечательный способ для проверки, виден ли элемент**:
 
 ```js
-function isHidden(elem)
+function isHidden(elem) {
   return !elem.offsetWidth && !elem.offsetHeight;
 }
 ```
@@ -265,7 +266,7 @@ alert( getComputedStyle(elem).width ); // вывести CSS-ширину для
 
 <script>
 *!*
-  alert( getComputedStyle(elem).width );  // auto
+  alert( getComputedStyle(elem).width ); // auto
 */!*
 </script>
 ```

2-ui/1-document/16-metrics-window/article.md

@@ -57,7 +57,7 @@ var scrollHeight = Math.max(
   document.body.clientHeight, document.documentElement.clientHeight
 );
 
-alert('Высота с учетом прокрутки: ' + scrollHeight);
+alert( 'Высота с учетом прокрутки: ' + scrollHeight );
 ```
 
 Почему так? Лучше и не спрашивайте, это одно из редких мест, где просто ошибки в браузерах. Глубокой логики здесь нет.
@@ -74,8 +74,8 @@ alert('Высота с учетом прокрутки: ' + scrollHeight);
 
 ```js
 //+ run
-alert('Текущая прокрутка сверху: ' + window.pageYOffset);
+alert( 'Текущая прокрутка сверху: ' + window.pageYOffset );
-alert('Текущая прокрутка слева: ' + window.pageXOffset);
+alert( 'Текущая прокрутка слева: ' + window.pageXOffset );
 ```
 
 Эти свойства:
@@ -92,7 +92,7 @@ alert('Текущая прокрутка слева: ' + window.pageXOffset);
 //+ run
 var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 
-alert("Текущая прокрутка: " + scrollTop);
+alert( "Текущая прокрутка: " + scrollTop );
 ```
 
 ## Изменение прокрутки: scrollTo, scrollBy, scrollIntoView [#window-scroll]
@@ -199,7 +199,7 @@ var body = document.body;
 var scrollTop = html.scrollTop || body && body.scrollTop || 0;
 scrollTop -= html.clientTop; // в IE7- <html> смещён относительно (0,0)
 
-alert("Текущая прокрутка: " + scrollTop);
+alert( "Текущая прокрутка: " + scrollTop );
 ```
 
 </li>

2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.md

@@ -25,8 +25,8 @@ var coords3 = [coords.left + field.clientLeft, coords.top + field.clientTop];
 
 ```js
 var coords4 = [
-  coords.right - parseInt(getComputedStyle(field).borderRightWidth) ,
+  coords.right - parseInt(getComputedStyle(field).borderRightWidth),
-  coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth) 
+  coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
 ]
 ```
 
@@ -34,7 +34,7 @@ var coords4 = [
 
 ```js
 var coords4 = [
-  coords.left + elem.clientLeft + elem.clientWidth ,
+  coords.left + elem.clientLeft + elem.clientWidth,
   coords.top + elem.clientTop + elem.clientHeight
 ]
 ```

2-ui/1-document/18-coordinates-document/article.md

@@ -46,9 +46,9 @@
 Результат `getCoords`: объект с координатами `{left: .., top: ..}`
 
 ```js
-function getCoords(elem) {  // кроме IE8-
+function getCoords(elem) { // кроме IE8-
   var box = elem.getBoundingClientRect();
-  
+
   return {
     top: box.top + pageYOffset,
     left: box.left + pageXOffset
@@ -64,23 +64,26 @@ function getCoords(elem) {  // кроме IE8-
 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 top = box.top + scrollTop - clientTop;
   var left = box.left + scrollLeft - clientLeft;
-  
+
-  return { top: top, left: left };
+  return {
+    top: top,
+    left: left
+  };
 }
 ```
 
@@ -104,15 +107,19 @@ function getCoords(elem) {
 ```js
 //+ autorun
 function getOffsetSum(elem) {
-  var top = 0, left = 0;
+  var top = 0,
+    left = 0;
 
-  while(elem) {
+  while (elem) {
     top = top + parseInt(elem.offsetTop);
     left = left + parseInt(elem.offsetLeft);
-    elem = elem.offsetParent;     
+    elem = elem.offsetParent;
   }
-   
+
-  return {top: top, left: left};
+  return {
+    top: top,
+    left: left
+  };
 }
 ```
 
@@ -183,10 +190,10 @@ document.getElementById('getBoundingClientRectEx').onclick = function(event) {
 ```js
 //+ run
 // общая ширина/высота
-alert( screen.width + ' x ' + screen.height ); 
+alert( screen.width + ' x ' + screen.height );
 
 // доступная ширина/высота (за вычетом таскбара и т.п.)
-alert( screen.availWidth + ' x ' + screen.availHeight); 
+alert( screen.availWidth + ' x ' + screen.availHeight );
 
 // есть и ряд других свойств screen (см. документацию)
 ```
@@ -196,7 +203,7 @@ alert( screen.availWidth + ' x ' + screen.availHeight);
 
 ```js
 //+ run
-alert("Браузер находится на " + window.screenX + "," + window.screenY);
+alert( "Браузер находится на " + window.screenX + "," + window.screenY );
 ```
 
 Они могут быть и меньше нуля, если окно частично вне экрана. </li>

2-ui/1-document/2-dom-nodes/1-body-from-head/solution.md

@@ -5,14 +5,17 @@
 ```html
 <!--+ run -->
 <html>
+
 <head>
   <script>
-    alert(document.body); // null
+    alert( document.body ); // null
   </script>
 </head>
+
 <body>
   Привет, мир!
 </body>
+
 </html>
 ```
 

2-ui/1-document/2-dom-nodes/1-body-from-head/task.md

@@ -6,16 +6,19 @@
 
 ```html
 <html>
+
 <head>
 *!*
   <script>
-    alert(document.body); // ?
+    alert( document.body ); // ?
   </script>
 */!*
 </head>
+
 <body>
   Привет, мир!
 </body>
+
 </html>
 ```
 

2-ui/1-document/2-dom-nodes/article.md

@@ -13,15 +13,15 @@ DOM -- это представление документа в виде дере
 Построим, для начала, дерево DOM для следующего документа.
 
 ```html
-<!--+ run -->
+<!--+ run  no-beautify -->
 <!DOCTYPE HTML>
 <html>
-  <head>
+<head>
-    <title>О лосях</title>
+  <title>О лосях</title>
-  </head>
+</head>
-  <body>
+<body>
-     Правда о лосях
+  Правда о лосях
-   </body>
+</body>
 </html>
 ```
 
@@ -60,6 +60,7 @@ drawHtmlTree(node, 'div.domtree', 690, 350);
 В остальных случаях всё честно -- если пробелы есть в документе, то они есть и в DOM, а если их убрать, то и в DOM их не будет, получится так:
 
 ```html
+<!--+ no-beautify -->
 <!DOCTYPE HTML>
 <html><head><title>О лосях</title></head><body>Правда о лосях</body></html>
 ```
@@ -86,6 +87,7 @@ drawHtmlTree(node, 'div.domtree', 690, 300);
 Такой документ:
 
 ```html
+<!--+ no-beautify -->
 <p>Привет
 <li>Мама
 <li>и
@@ -98,7 +100,7 @@ drawHtmlTree(node, 'div.domtree', 690, 300);
 <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);
+drawHtmlTree(node, 'div.domtree', 690, 400);
 </script>
 
 [warn header="Таблицы всегда содержат `<tbody>`"]
@@ -107,6 +109,7 @@ drawHtmlTree(node,  [].pop.call(document.querySelectorAll('div.domtree')), 690,
 Например, для такого HTML:
 
 ```html
+<!--+ no-beautify -->
 <table id="table">
   <tr><td>1</td></tr>
 </table>
@@ -123,6 +126,7 @@ drawHtmlTree(node,  'div.domtree', 600, 200);
 Вы видите? Появился `<tbody>`, как будто документ был таким:
 
 ```html
+<!--+ no-beautify -->
 <table>
 *!*
   <tbody>
@@ -145,16 +149,18 @@ drawHtmlTree(node,  'div.domtree', 600, 200);
 ```html
 <!DOCTYPE HTML>
 <html>
-  <body>
+
-    Правда о лосях
+<body>
-    <ol>
+  Правда о лосях
-      <li>Лось — животное хитрое</li>
+  <ol>
+    <li>Лось — животное хитрое</li>
 *!*
-      <!-- комментарий -->
+    <!-- комментарий -->
 */!*
-      <li>...и коварное!</li>
+    <li>...и коварное!</li>
-    </ol>
+  </ol>
-  </body>
+</body>
+
 </html>
 ```
 
@@ -198,10 +204,10 @@ drawHtmlTree(node, 'div.domtree', 690, 550);
 ```js
 //+ run
 document.body.style.backgroundColor = 'red';
-alert('Поменяли цвет BODY');
+alert( 'Поменяли цвет BODY' );
 
 document.body.style.backgroundColor = '';
-alert('Сбросили цвет BODY');
+alert( 'Сбросили цвет BODY' );
 ```
 
 DOM предоставляет возможность делать со страницей всё, что угодно.
@@ -216,6 +222,7 @@ IE8- не генерирует текстовые узлы, если они со
  То есть, такие два документа дадут идентичный DOM:
 
 ```html
+<!--+ no-beautify -->
 <!DOCTYPE HTML>
 <html><head><title>О лосях</title></head><body>Правда о лосях</body></html>
 ```
@@ -225,12 +232,15 @@ IE8- не генерирует текстовые узлы, если они со
 ```html
 <!DOCTYPE HTML>
 <html>
-  <head>
+
-    <title>О лосях</title>
+<head>
-  </head>
+  <title>О лосях</title>
-  <body>
+</head>
-    Правда о лосях
+
-  </body>
+<body>
+  Правда о лосях
+</body>
+
 </html>
 ```
 

2-ui/1-document/4-traversing-dom/1-dom-children/task.md

@@ -7,21 +7,26 @@
 ```html
 <!DOCTYPE HTML>
 <html>
-  <head><meta charset="utf-8"></head>
-  <body>
-    <div>Пользователи:</div>
-    <ul>
-      <li>Маша</li>
-      <li>Вовочка</li>
-    </ul>
 
-    <!-- комментарий -->
+<head>
+  <meta charset="utf-8">
+</head>
 
-    <script>
+<body>
-      // ... ваш код
+  <div>Пользователи:</div>
-    </script>
+  <ul>
+    <li>Маша</li>
+    <li>Вовочка</li>
+  </ul>
+
+  <!-- комментарий -->
+
+  <script>
+    // ... ваш код
+  </script>
+
+</body>
 
-  </body>
 </html>
 ```
 

2-ui/1-document/4-traversing-dom/2-has-childnodes/solution.md

@@ -1,12 +1,14 @@
 Вначале нерабочие способы, которые могут прийти на ум:
 
 ```js
+//+ no-beautify
 if (!elem) { .. }
 ```
 
 Это не работает, так как `elem` всегда есть, и является объектом. Так что проверка `if (elem)` всегда верна, вне зависимости от того, есть ли у `elem` потомки.
 
 ```js
+//+ no-beautify
 if (!elem.childNodes) { ... }
 ```
 
@@ -15,6 +17,7 @@ if (!elem.childNodes) { ... }
 Несколько рабочих способов:
 
 ```js
+//+ no-beautify
 if (!elem.childNodes.length) { ... }
 
 if (!elem.firstChild) { ... }

2-ui/1-document/4-traversing-dom/2-has-childnodes/task.md

@@ -7,6 +7,7 @@
 "Пустой" -- значит нет дочерних узлов, даже текстовых.
 
 ```js
+//+ no-beautify
 if (/*...ваш код проверки elem... */) { узел elem пуст }
 ```
 

2-ui/1-document/4-traversing-dom/article.md

@@ -36,20 +36,23 @@ DOM позволяет делать что угодно с HTML-элементо
 <!--+ run -->
 <!DOCTYPE HTML>
 <html>
-  <head>
-    <script>
-*!*
-      alert("Из HEAD: " + document.body); // null, body ещё нет
-*/!*
-    </script>
-  </head>
-  <body>
-  
-    <script>
-      alert("Из BODY: " + document.body); // body есть
-    </script>
 
-  </body>
+<head>
+  <script>
+*!*
+    alert( "Из HEAD: " + document.body ); // null, body ещё нет
+*/!*
+  </script>
+</head>
+
+<body>
+
+  <script>
+    alert( "Из BODY: " + document.body ); // body есть
+  </script>
+
+</body>
+
 </html>
 ```
 [/warn]
@@ -76,6 +79,7 @@ DOM позволяет делать что угодно с HTML-элементо
 <!--+ run -->
 <!DOCTYPE HTML>
 <html>
+
 <body>
   <div>Начало</div>
 
@@ -87,13 +91,14 @@ DOM позволяет делать что угодно с HTML-элементо
 
   <script>
 *!* 
-    for(var i=0; i<document.body.childNodes.length; i++) {
+    for (var i = 0; i < document.body.childNodes.length; i++) {
       alert( document.body.childNodes[i] ); // Text, DIV, Text, UL, ..., SCRIPT
     }
 */!*
   </script>
   ...
 </body>
+
 </html>
 ```
 
@@ -146,9 +151,9 @@ elems.forEach(function(elem) { // нет такого метода!
 var elems = document.documentElement.childNodes;
 
 *!*
-[].forEach.call(elems, function(elem) { 
+[].forEach.call(elems, function(elem) {
 */!*
-  alert(elem);  // HEAD, текст, BODY
+  alert( elem ); // HEAD, текст, BODY
 });
 ```
 
@@ -166,8 +171,8 @@ var elems = document.documentElement.childNodes;
 elems = Array.prototype.slice.call(elems); // теперь elems - массив
 */!*
 
-elems.forEach(function(elem) { 
+elems.forEach(function(elem) {
-  alert(elem.tagName);  // HEAD, текст, BODY
+  alert( elem.tagName ); // HEAD, текст, BODY
 });
 ```
 
@@ -188,8 +193,8 @@ elems.forEach(function(elem) {
 //+ run
 var elems = document.documentElement.childNodes;
 
-for(var key in elems) {
+for (var key in elems) {
-  alert(key); // 0, 1, 2, length, item
+  alert( key ); // 0, 1, 2, length, item
 }
 ```
 
@@ -242,6 +247,7 @@ for(var key in elems) {
 <!--+ run -->
 <!DOCTYPE HTML>
 <html>
+
 <body>
   <div>Начало</div>
 
@@ -253,13 +259,14 @@ for(var key in elems) {
 
   <script>
 *!* 
-    for(var i=0; i<document.body.children.length; i++) {
+    for (var i = 0; i < document.body.children.length; i++) {
       alert( document.body.children[i] ); // DIV, UL, DIV, SCRIPT
     }
 */!*
   </script>
   ...
 </body>
+
 </html>
 ```
 
@@ -267,7 +274,7 @@ for(var key in elems) {
 
 ```js
 elem.firstElementChild === elem.children[0]
-elem.lastElementChild === body.children[body.children.length-1]
+elem.lastElementChild === body.children[body.children.length - 1]
 ```
 
 

2-ui/1-document/5-searching-elements-dom/2-tree/solution.md

@@ -3,7 +3,7 @@
 ```js
 var lis = document.getElementsByTagName('li');
 
-for(i=0; i<lis.length; i++) {
+for (i = 0; i < lis.length; i++) {
   ...
 }
 ```

2-ui/1-document/5-searching-elements-dom/article.md

@@ -102,17 +102,15 @@ var elements = document.getElementsByTagName('div');
 </table>
 
 <script>
-
 *!*
   var tableElem = document.getElementById('age-table');
   var elements = tableElem.getElementsByTagName('input');
 */!*
 
-  for (var i=0; i<elements.length; i++) {
+  for (var i = 0; i < elements.length; i++) {
-    var input = elements[i];  
+    var input = elements[i];
-    alert(input.value + ': ' + input.checked);
+    alert( input.value + ': ' + input.checked );
   }
-
 </script>
 ```
 
@@ -181,8 +179,8 @@ var elems = document.getElementsByName('age');
 <div class="long article">Длинная статья</div>
 
 <script>
-var articles = document.getElementsByClassName('article');
+  var articles = document.getElementsByClassName('article');
-alert( articles.length ); // 2, найдёт оба элемента 
+  alert( articles.length ); // 2, найдёт оба элемента
 </script>
 ```
 
@@ -214,8 +212,8 @@ alert( articles.length ); // 2, найдёт оба элемента
   var elements = document.querySelectorAll('ul > li:last-child');
 */!*
 
-  for (var i=0; i<elements.length; i++) {
+  for (var i = 0; i < elements.length; i++) {
-    alert(elements[i].innerHTML ); // "тест", "пройден"
+    alert( elements[i].innerHTML ); // "тест", "пройден"
   }
 </script>
 ```
@@ -248,11 +246,11 @@ alert( articles.length ); // 2, найдёт оба элемента
 <script>
   var elems = document.body.children;
 
-  for(var i=0; i<elems.length; i++) {
+  for (var i = 0; i < elems.length; i++) {
 *!*
-    if ( elems[i].matches('a[href$="zip"]') ) {
+    if (elems[i].matches('a[href$="zip"]')) {
 */!*
-      alert("Ссылка на архив: " + elems[i].href);
+      alert( "Ссылка на архив: " + elems[i].href );
     }
   }
 </script>
@@ -284,14 +282,14 @@ alert( articles.length ); // 2, найдёт оба элемента
   var numberSpan = document.querySelector('.num');
 
   // ближайший элемент сверху подходящий под селектор li
-  alert( numberSpan.closest('li').className ) // subchapter
+  alert(numberSpan.closest('li').className) // subchapter
-  
+
   // ближайший элемент сверху подходящий под селектор .chapter
-  alert( numberSpan.closest('.chapter').tagName ) // LI
+  alert(numberSpan.closest('.chapter').tagName) // LI
 
   // ближайший элемент сверху, подходящий под селектор span
   // это сам numberSpan, так как поиск включает в себя сам элемент
-  alert( numberSpan.closest('span') === numberSpan ) // true
+  alert(numberSpan.closest('span') === numberSpan) // true
 </script>
 ```
 
@@ -306,11 +304,12 @@ alert( articles.length ); // 2, найдёт оба элемента
 Найдем заголовки с текстом `XPath` в текущем документе:
 
 ```js
-//+ run
+//+ run no-beautify
-var result = document.evaluate("//h2[contains(., 'XPath')]", document.documentElement, null,                  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+var result = document.evaluate("//h2[contains(., 'XPath')]", document.documentElement, null, 
+  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
 
-for (var i=0; i<result.snapshotLength; i++) {
+for (var i = 0; i < result.snapshotLength; i++) {
-    alert(result.snapshotItem(i).outerHTML);
+  alert( result.snapshotItem(i).outerHTML );
 }
 ```
 

2-ui/1-document/6-searching-elements-internals/1-collection-length-after-remove/solution.md

@@ -13,8 +13,8 @@
   var lis = document.body.getElementsByTagName('li');
 
   document.body.innerHTML = "";
-  
+
-  alert(lis.length);
+  alert( lis.length );
 </script>
 ```
 
@@ -36,13 +36,12 @@
   <li>Магазин</li>
 </ul>
 <script>
-
   var menu = document.getElementById('menu');
   var lis = menu.getElementsByTagName('li');
 
   document.body.innerHTML = "";
 
-  alert(lis.length);
+  alert( lis.length );
 </script>
 ```
 

2-ui/1-document/6-searching-elements-internals/1-collection-length-after-remove/task.md

@@ -19,7 +19,7 @@ var lis = document.body.getElementsByTagName('li');
 
 document.body.innerHTML = "";
 
-alert(lis.length);
+alert( lis.length );
 ```
 
 2. А такой код (вопрос посложнее)?
@@ -30,6 +30,6 @@ var lis = menu.getElementsByTagName('li');
 
 document.body.innerHTML = "";
 
-alert(lis.length);
+alert( lis.length );
 ```
 

2-ui/1-document/6-searching-elements-internals/2-compare-elements-count/task.md

@@ -5,7 +5,7 @@
 Для любого документа сделаем следующее:
 
 ```js
-var aList1 = document.getElementsByTagName('a'),
+var aList1 = document.getElementsByTagName('a');
 var aList2 = document.querySelectorAll('a');
 ```
 

2-ui/1-document/6-searching-elements-internals/3-benchmark-search-dom/solution.md

@@ -3,7 +3,7 @@
 ```js
 function bench(f, times) {
   var d = new Date();
-  for(var i=0; i<times; i++) f();
+  for (var i = 0; i < times; i++) f();
   return new Date() - d;
 }
 ```

2-ui/1-document/6-searching-elements-internals/article.md

@@ -42,12 +42,12 @@
   var resultGet = document.getElementsByTagName('div');
   var resultQuery = document.querySelectorAll('div');
 
-  alert(resultQuery.length + ', ' + resultGet.length); // 1, 1 
+  alert( resultQuery.length + ', ' + resultGet.length ); // 1, 1 
 
   document.body.innerHTML = ''; // удалить всё содержимое BODY
 
 *!*
-  alert(resultQuery.length + ', ' + resultGet.length); // 1, 0
+  alert( resultQuery.length + ', ' + resultGet.length ); // 1, 0
 */!*
 </script>
 ```
@@ -142,22 +142,22 @@ alert( elems.length );
 ```html
 <!--+ run -->
 <script>
-  for(var i=0; i<10000;i++) document.write('<span> </span>');
+  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];
+  for (var i = 0; i < len; i++) elements[i];
 */!*
-  alert("Последовательно: "+ (new Date - d) + "мс");   // (1)
+  alert( "Последовательно: " + (new Date - d) + "мс" ); // (1)
 
   var d = new Date;
 *!*
-  for(var i = 0; i<len; i+=2) elements[i], elements[len-i-1];
+  for (var i = 0; i < len; i += 2) elements[i], elements[len - i - 1];
 */!*
-  alert("Вразнобой: "+ (new Date - d) + "мс");  // (2)
+  alert( "Вразнобой: " + (new Date - d) + "мс" ); // (2)
 </script>
 ```
 

2-ui/1-document/7-basic-dom-node-properties/1-console-firstchild-innerhtml/solution.md

@@ -7,11 +7,11 @@
 ```html
 <!--+ run -->
 <body>
-<h1>Привет, мир!</h1>
+  <h1>Привет, мир!</h1>
 
-<script>
+  <script>
-alert( document.body.firstChild.innerHTML ); // undefined
+    alert( document.body.firstChild.innerHTML ); // undefined
-</script>
+  </script>
 </body>
 ```
 

2-ui/1-document/7-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md

@@ -5,12 +5,14 @@
 ```html
 <!--+ run height=60 -->
 <!DOCTYPE HTML>
-<html>  
+<html>
-<body>  
+
-   <script>
+<body>
-      alert(document.body.lastChild.nodeType);
+  <script>
-   </script>
+    alert( document.body.lastChild.nodeType );
-</body>  
+  </script>
+</body>
+
 </html>
 ```
 

2-ui/1-document/7-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md

@@ -6,12 +6,14 @@
 
 ```html
 <!DOCTYPE HTML>
-<html>  
+<html>
-<body>  
+
-   <script>
+<body>
-      alert(document.body.lastChild.nodeType);
+  <script>
-   </script>
+    alert( document.body.lastChild.nodeType );
-</body>  
+  </script>
+</body>
+
 </html>
 ```
 

2-ui/1-document/7-basic-dom-node-properties/3-tag-in-comment/solution.md

@@ -3,11 +3,11 @@
 ```html
 <!--+ run -->
 <script>
-var body = document.body;
+  var body = document.body;
 
-body.innerHTML = "<!--" + body.tagName + "-->"; 
+  body.innerHTML = "<!--" + body.tagName + "-->";
 
-alert(body.firstChild.data); // BODY
+  alert( body.firstChild.data ); // BODY
 </script>
 ```
 

2-ui/1-document/7-basic-dom-node-properties/3-tag-in-comment/task.md

@@ -6,11 +6,11 @@
 
 ```html
 <script>
-var body = document.body;
+  var body = document.body;
 
-body.innerHTML = "<!--" + body.tagName + "-->";  
+  body.innerHTML = "<!--" + body.tagName + "-->";
 
-alert(body.firstChild.data); // что выведет? 
+  alert( body.firstChild.data ); // что выведет?
 </script>
 ```
 

2-ui/1-document/7-basic-dom-node-properties/article.md

@@ -45,16 +45,16 @@ alert( document.body ); // [object HTMLBodyElement]
 Вот из него выдержка:
 
 ```js
-interface HTMLInputElement : HTMLElement {
+interface HTMLInputElement: HTMLElement {
-  attribute DOMString accept; 
+  attribute DOMString accept;
   attribute DOMString alt;
   attribute DOMString autocomplete;
   attribute boolean autofocus;
   ...
   attribute DOMString value;
   ...
-  void select();   
+  void select();
-  ... 
+  ...
 }
 ```
 
@@ -84,18 +84,18 @@ interface HTMLInputElement : HTMLElement {
 ```js
 interface Node {
   // NodeType
-  const unsigned short      ELEMENT_NODE       = 1;
+  const unsigned short ELEMENT_NODE = 1;
-  const unsigned short      ATTRIBUTE_NODE     = 2;
+  const unsigned short ATTRIBUTE_NODE = 2;
-  const unsigned short      TEXT_NODE          = 3;
+  const unsigned short TEXT_NODE = 3;
-  const unsigned short      CDATA_SECTION_NODE = 4;
+  const unsigned short CDATA_SECTION_NODE = 4;
-  const unsigned short      ENTITY_REFERENCE_NODE = 5;
+  const unsigned short ENTITY_REFERENCE_NODE = 5;
-  const unsigned short      ENTITY_NODE        = 6;
+  const unsigned short ENTITY_NODE = 6;
-  const unsigned short      PROCESSING_INSTRUCTION_NODE = 7;
+  const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
-  const unsigned short      COMMENT_NODE       = 8;
+  const unsigned short COMMENT_NODE = 8;
-  const unsigned short      DOCUMENT_NODE      = 9;
+  const unsigned short DOCUMENT_NODE = 9;
-  const unsigned short      DOCUMENT_TYPE_NODE = 10;
+  const unsigned short DOCUMENT_TYPE_NODE = 10;
-  const unsigned short      DOCUMENT_FRAGMENT_NODE = 11;
+  const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
-  const unsigned short      NOTATION_NODE      = 12;   
+  const unsigned short NOTATION_NODE = 12;
   ...
 }
 ```
@@ -112,20 +112,20 @@ interface Node {
     <li>Вася</li>
     <li>Петя</li>
   </ul>
- 
+
   <!-- комментарий -->
 
-  <script>   
+  <script>
     var childNodes = document.body.childNodes;
 
-    for (var i=0; i<childNodes.length; i++) {
+    for (var i = 0; i < childNodes.length; i++) {
 
 *!*
       // отфильтровать не-элементы  
       if (childNodes[i].nodeType != 1) continue;
 */!*
 
-      alert(childNodes[i]);
+      alert( childNodes[i] );
 
     }
   </script>
@@ -145,8 +145,8 @@ interface Node {
 
 ```js
 //+ run
-alert( document.body.nodeName );   // BODY
+alert( document.body.nodeName ); // BODY
-alert( document.body.tagName );   // BODY
+alert( document.body.tagName ); // BODY
 ```
 
 [smart header="В XHTML `nodeName` может быть не в верхнем регистре"]
@@ -172,17 +172,18 @@ XML-режим включается, когда браузер получает
 
 ```html
 <!--+ run -->
-<body><!-- комментарий -->
+<body>
+  <!-- комментарий -->
 
-<script>
+  <script>
-  // для комментария
+    // для комментария
-  alert(document.body.firstChild.nodeName); // #comment
+    alert( document.body.firstChild.nodeName ); // #comment
-  alert(document.body.firstChild.tagName); // undefined (в IE8- воскл. знак "!")
+    alert( document.body.firstChild.tagName ); // undefined (в IE8- воскл. знак "!")
 
-  // для документа
+    // для документа
-  alert(document.nodeName); // #document, т.к. корень DOM -- не элемент
+    alert( document.nodeName ); // #document, т.к. корень DOM -- не элемент
-  alert(document.tagName); // undefined
+    alert( document.tagName ); // undefined
-</script>
+  </script>
 </body>
 ```
 
@@ -218,7 +219,7 @@ XML-режим включается, когда браузер получает
 
   <script>
     document.body.innerHTML = '<b>тест'; // незакрытый тег
-    alert(document.body.innerHTML); // <b>тест</b> (исправлено)
+    alert( document.body.innerHTML ); // <b>тест</b> (исправлено)
   </script>
 
 </body>
@@ -270,7 +271,7 @@ chatDiv.innerHTML += "Как дела?";
 
 <script>
   var elem = document.getElementById('my');
-  elem.innerHTML = 'ТЕСТ<script>alert(1);</scr'+'ipt>';
+  elem.innerHTML = 'ТЕСТ<script>alert( 1 );</scr' + 'ipt>';
 </script>
 ```
 
@@ -299,7 +300,7 @@ chatDiv.innerHTML += "Как дела?";
 <script>
   var div = document.body.children[0];
 
-  alert(div.outerHTML); // <div>Привет <b>Мир</b></div>
+  alert( div.outerHTML ); // <div>Привет <b>Мир</b></div>
 </script>
 ```
 
@@ -326,7 +327,7 @@ chatDiv.innerHTML += "Как дела?";
 *!*
   // ... но содержимое div.outerHTML осталось тем же, несмотря на "перезапись"
 */!*
-  alert(div.outerHTML);  // <div>Привет, Мир!</div>
+  alert( div.outerHTML ); // <div>Привет, Мир!</div>
 </script>
 ```
 
@@ -354,9 +355,9 @@ chatDiv.innerHTML += "Как дела?";
   Привет
   <!-- Комментарий -->
   <script>
-    for (var i=0; i<document.body.childNodes.length; i++) {
+    for (var i = 0; i < document.body.childNodes.length; i++) {
 *!*
-      alert(document.body.childNodes[i].data);
+      alert( document.body.childNodes[i].data );
 */!*
     }
   </script>
@@ -489,9 +490,9 @@ chatDiv.innerHTML += "Как дела?";
 <script>
   var input = document.body.children[0];
 
-  alert(input.type); // "text"
+  alert( input.type ); // "text"
-  alert(input.id); // "input"
+  alert( input.id ); // "input"
-  alert(input.value); // значение
+  alert( input.value ); // значение
 </script>
 ```
 

2-ui/1-document/8-dom-polyfill/1-polyfill-matches/solution.md

@@ -9,9 +9,9 @@
   if (!Element.prototype.matches) {
 
     // определяем свойство
-    Element.prototype.matches = Element.prototype.matchesSelector || 
+    Element.prototype.matches = Element.prototype.matchesSelector ||
-      Element.prototype.webkitMatchesSelector || 
+      Element.prototype.webkitMatchesSelector ||
-      Element.prototype.mozMatchesSelector || 
+      Element.prototype.mozMatchesSelector ||
       Element.prototype.msMatchesSelector,
 
   }

2-ui/1-document/8-dom-polyfill/3-polyfill-textcontent-ie8/solution.md

@@ -7,15 +7,14 @@
   if (document.documentElement.textContent === undefined) {
 
     // определяем свойство
-    Object.defineProperty(HtmlElement.prototype, "textContent", { 
+    Object.defineProperty(HtmlElement.prototype, "textContent", {
-        get: function() {
+      get: function() {
-          return this.innerText;
+        return this.innerText;
-        },
+      },
-        set: function(value) {
+      set: function(value) {
-          this.innerText = value;
+        this.innerText = value;
-        }
       }
-    );
+    });
   }
 
 })();

2-ui/1-document/8-dom-polyfill/article.md

@@ -25,20 +25,20 @@
 
 ```js
 *!*
-if( document.documentElement.firstElementChild === undefined ) { // (1)
+if (document.documentElement.firstElementChild === undefined) { // (1)
 */!*
 
 *!*
   Object.defineProperty(Element.prototype, 'firstElementChild', { // (2)
 */!*
-    get: function () { 
+    get: function() {
       var el = this.firstChild;
       do {
-        if( el.nodeType === 1 ) {
+        if (el.nodeType === 1) {
           return el;
         }
         el = el.nextSibling;
-      } while(el);
+      } while (el);
 
       return null;
     }
@@ -80,7 +80,7 @@ var div = document.createElement('div');
 var input = document.createElement('input');
 
 alert( input.value ); // пустая строка, поддержка есть
-alert( div.value );  // undefined, поддержки нет
+alert( div.value ); // undefined, поддержки нет
 ```
 
 [smart header="Поддержка значений свойств"]
@@ -98,8 +98,8 @@ alert( div.value );  // undefined, поддержки нет
 <input type="no-such-type">
 
 <script>
-  alert(document.body.children[0].type); // radio, поддерживается
+  alert( document.body.children[0].type ); // radio, поддерживается
-  alert(document.body.children[1].type); // text, не поддерживается
+  alert( document.body.children[1].type ); // text, не поддерживается
 </script>
 ```
 
@@ -136,7 +136,7 @@ alert( div.value );  // undefined, поддержки нет
 ```js
 //+ run
 Element.prototype.sayHi = function() {
-  alert("Привет от " + this);
+  alert( "Привет от " + this );
 }
 
 document.body.sayHi(); // Привет от [object HTMLBodyElement]
@@ -146,7 +146,7 @@ document.body.sayHi(); // Привет от [object HTMLBodyElement]
 
 ```js
 //+ run
-Object.defineProperty(Element.prototype, 'lowerTag', { 
+Object.defineProperty(Element.prototype, 'lowerTag', {
   get: function() {
     return this.tagName.toLowerCase();
   }

2-ui/1-document/9-attributes-and-custom-properties/1-get-user-attribute/solution.md

@@ -8,12 +8,12 @@
 
   <script>
     var div = document.getElementById('widget');
- 
+
     var widgetName = div.getAttribute('data-widget-name');
     // или так, кроме IE10-
     var widgetName = div.dataset.widgetName;
 
-    alert( widgetName );  // "menu"
+    alert( widgetName ); // "menu"
   </script>
 </body>
 ```

2-ui/1-document/9-attributes-and-custom-properties/1-get-user-attribute/task.md

@@ -13,9 +13,11 @@
 ```html
 <body>
 
-  <div id="widget" data-widget-name="menu">Выберите жанр</div>  
+  <div id="widget" data-widget-name="menu">Выберите жанр</div>
 
-  <script>/* ... */</script>
+  <script>
+    /* ... */
+  </script>
 </body>
 ```
 

2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.md

@@ -23,19 +23,19 @@
 ```js
 var links = document.querySelectorAll('a');
 
-for(var i=0; i<links.length; i++) {
+for (var i = 0; i < links.length; i++) {
 
-    var a = links[i];
+  var a = links[i];
 
-    var href = a.getAttribute('href'); 
+  var href = a.getAttribute('href');
 
-    if (!href) continue; // нет атрибута
+  if (!href) continue; // нет атрибута
 
-    if (href.indexOf('://') == -1) continue; // без протокола 
+  if (href.indexOf('://') == -1) continue; // без протокола 
 
-    if (href.indexOf('http://internal.com') === 0) continue; // внутренняя
+  if (href.indexOf('http://internal.com') === 0) continue; // внутренняя
 
-    a.classList.add('external');
+  a.classList.add('external');
 }
 ```
 
@@ -47,7 +47,7 @@ for(var i=0; i<links.length; i++) {
 var css = 'a[href*="://"]:not([href^="http://internal.com"])';
 var links = document.querySelectorAll(css);
 
-for(var i=0; i<links.length; i++) {
+for (var i = 0; i < links.length; i++) {
   links[i].classList.add('external');
 }
 ```

2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/task.md

@@ -9,17 +9,19 @@
 ```html
 <!--+ run -->
 <style>
-  .external { background-color: yellow }
+  .external {
+    background-color: yellow
+  }
 </style>
 
 <a name="list">список</a>
 <ul>
- <li><a href="http://google.com">http://google.com</a></li>
+  <li><a href="http://google.com">http://google.com</a></li>
- <li><a href="/tutorial">/tutorial.html</a></li>
+  <li><a href="/tutorial">/tutorial.html</a></li>
- <li><a href="local/path">local/path</a></li>
+  <li><a href="local/path">local/path</a></li>
- <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</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://nodejs.org">http://nodejs.org</a></li>
- <li><a href="http://internal.com/test">http://internal.com/test</a></li>
+  <li><a href="http://internal.com/test">http://internal.com/test</a></li>
 </ul>
 ```
 

2-ui/1-document/9-attributes-and-custom-properties/article.md

@@ -19,22 +19,22 @@
 
 ```js
 //+ run
-document.body.myData = { 
+document.body.myData = {
   name: 'Петр',
   familyName: 'Петрович'
 };
 
-alert(document.body.myData.name); // Петр
+alert( document.body.myData.name ); // Петр
 ```
 
 Можно добавить и новую функцию:
 
 ```js
 //+ run
-document.body.sayHi = function() { 
+document.body.sayHi = function() {
-  alert(this.nodeName);
+  alert( this.nodeName );
 }
- 
+
 document.body.sayHi(); // BODY, выполнилась с правильным this
 ```
 
@@ -91,13 +91,13 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
 
   <script>
     alert( elem.getAttribute('About') ); // (1) 'Elephant', атрибут получен
-    
-    elem.setAttribute('Test', 123);  // (2) атрибут Test установлен
-    alert( document.body.innerHTML );  // (3) в HTML видны все атрибуты!
 
-    var attrs = elem.attributes;  // (4) можно получить коллекцию атрибутов
+    elem.setAttribute('Test', 123); // (2) атрибут Test установлен
-    for (var i=0; i<attrs.length; i++) {
+    alert( document.body.innerHTML ); // (3) в HTML видны все атрибуты!
-      alert(attrs[i].name + " = " + attrs[i].value); 
+
+    var attrs = elem.attributes; // (4) можно получить коллекцию атрибутов
+    for (var i = 0; i < attrs.length; i++) {
+      alert( attrs[i].name + " = " + attrs[i].value );
     }
   </script>
 </body>
@@ -162,7 +162,7 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
   // работа с checked через атрибут
 */!*
   alert( input.getAttribute('checked') ); // пустая строка
-  input.removeAttribute('checked');  // снять галочку 
+  input.removeAttribute('checked'); // снять галочку 
 
 *!*  
   // работа с checked через свойство
@@ -189,7 +189,7 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
 *!*
     input.value = 'new'; // поменяли свойство
 
-    alert(input.getAttribute('value')); // 'markup', не изменилось!
+    alert( input.getAttribute('value') ); // 'markup', не изменилось!
 */!*
   </script>
 </body>
@@ -232,10 +232,10 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
 <body class="main page">
   <script>
     // прочитать класс элемента
-    alert( document.body.className );  // main page
+    alert( document.body.className ); // main page
 
     // поменять класс элемента
-    document.body.className="class1 class2"; 
+    document.body.className = "class1 class2";
   </script>
 </body>
 ```
@@ -269,16 +269,16 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
   <script>
     var classList = document.body.classList;
 
-   classList.remove('page');   // удалить класс
+    classList.remove('page'); // удалить класс
-   classList.add('post');         // добавить класс
+    classList.add('post'); // добавить класс
 
-   for(var i=0; i<classList.length; i++) { // перечислить классы
+    for (var i = 0; i < classList.length; i++) { // перечислить классы
-     alert(classList[i]); // main, затем post
+      alert( classList[i] ); // main, затем post
-   }
+    }
 
-   alert( classList.contains('post') );  // проверить наличие класса
+    alert( classList.contains('post') ); // проверить наличие класса
 
-   alert( document.body.className ); // main post, тоже работает
+    alert( document.body.className ); // main post, тоже работает
   </script>
 </body>
 ```
@@ -331,9 +331,11 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
   .order[order-state="new"] {
     color: green;
   }
+  
   .order[order-state="pending"] {
     color: blue;
   }
+  
   .order[order-state="canceled"] {
     color: red;
   }
@@ -364,7 +366,7 @@ div.setAttribute('order-state', 'canceled');
 Для классов -- нужно знать, какой класс у заказа сейчас. И тогда мы можем снять старый класс, и поставить новый:
 
 ```js
-div.classList.remove('order-state-new'); 
+div.classList.remove('order-state-new');
 div.classList.add('order-state-canceled');
 ```
 
@@ -417,7 +419,7 @@ div.classList.add('order-state-canceled');
 Этот атрибут должен прятать элемент, действие весьма простое, для его поддержки в HTML достаточно такого CSS:
 
 ```html
-<!--+ run height="80" -->
+<!--+ run height="80"  no-beautify -->
 <style>
 *!*
   [hidden] { display: none }
@@ -441,7 +443,7 @@ div.classList.add('order-state-canceled');
 
 
 ```html
-<!--+ run height="80" -->
+<!--+ run height="80"  no-beautify -->
 <style>
 *!*
   [hidden] { display: none }
@@ -485,7 +487,7 @@ div.classList.add('order-state-canceled');
 //+ run
 document.body.setAttribute('my', 123);
 
-alert( document.body.my );  // 123 в IE8-
+alert( document.body.my ); // 123 в IE8-
 ```
 
 При этом даже тип данных не меняется. Атрибут не становится строкой, как ему положено. 

2-ui/2-events-and-interfaces/1-introduction-browser-events/2-hide-self-onclick/solution.md

@@ -2,6 +2,6 @@
 
 ```html
 <!--+ run height=50 -->
-<input type="button" onclick="this.style.display='none'" value="Нажми, чтобы меня спрятать"/>
+<input type="button" onclick="this.style.display='none'" value="Нажми, чтобы меня спрятать" />
 ```
 

2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/solution.md

@@ -5,8 +5,8 @@
 Для того, чтобы удалить функцию-обработчик, нужно где-то сохранить ссылку на неё, например так:
 
 ```js
-function handler() { 
+function handler() {
-  alert("1"); 
+  alert( "1" );
 }
 
 button.addEventListener("click", handler);

2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/task.md

@@ -9,6 +9,7 @@
 Что будет выведено при клике после выполнения кода?
 
 ```js
+//+ no-beautify
 button.addEventListener("click", function() { alert("1"); });
 
 button.removeEventListener("click", function() { alert("1"); });

2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.md

@@ -1,4 +1,3 @@
-# Структура HTML/CSS
 
 Для начала, зададим структуру HTML/CSS.
 
@@ -33,41 +32,36 @@
 <span style="border: solid red 1px">[Сладости (нажми меня)!]</span>
 ```
 
-Раскрытие/закрытие делайте путём добавления/удаления класса `.menu-open` к меню, которые отвечает за стрелочку и отображение `UL`.
+Раскрытие/закрытие сделаем путём добавления/удаления класса `.menu-open` к меню, которые отвечает за стрелочку и отображение `UL`.
 
-# CSS 
+Обычно меню будет закрыто:
-
-CSS для меню:
 
 ```css
 .menu ul {
   margin: 0;
   list-style: none;
   padding-left: 20px;
-    
   display: none;
 }
-  
+
-.menu .title {
+.menu .title::before {
-  padding-left: 16px;
+  content: '▶ ';
-  font-size: 18px;
+  font-size: 80%;
-  cursor: pointer;
+  color: green;
-    
-  background: url(...arrow-right.png) left center no-repeat;       
 }
 ```
 
 Если же меню раскрыто, то есть имеет класс `.menu-open`, то стрелочка слева заголовка меняется и список детей показывается:
 
 ```css
-.menu-open .title {
+.menu.open .title::before {
-  background: url(...arrow-down.png) left center no-repeat; 
+  content: '▼ ';
 }
-  
+
-.menu-open ul {
+.menu.open ul {
   display: block;
 }
 ```
 
-Теперь сделайте JavaScript.
+Для JavaScript остался минимум работы -- только добавить/удалить класс при клике.
 

2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/messages.css

@@ -26,7 +26,7 @@ p {
   position: absolute;
   font-size: 110%;
   top: 0;
-  color: red;
+  color: darkred;
   right: 10px;
   display: block;
   width: 24px;

2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/messages.css

@@ -22,7 +22,7 @@ p {
 
 .remove-button {
   font-size: 110%;
-  color: red;
+  color: darkred;
   right: 10px;
   width: 24px;
   height: 24px;

2-ui/2-events-and-interfaces/1-introduction-browser-events/article.md

@@ -106,12 +106,12 @@
 Пример установки обработчика `click`:
 
 ```html
-<input id="elem" type="button" value="Нажми меня"/>
+<input id="elem" type="button" value="Нажми меня" />
 <script>
 *!*
-elem.onclick = function() {
+  elem.onclick = function() {
-    alert('Спасибо');
+    alert( 'Спасибо' );
-};
+  };
 */!*
 </script>
 ```
@@ -137,12 +137,12 @@ elem.onclick = function() {
 
 ```html
 <!--+ run height=50 -->
-<input type="button" id="button" value="Кнопка"/>
+<input type="button" id="button" value="Кнопка" />
 <script>
 *!*
-button.onclick = function() {
+  button.onclick = function() {
-  alert('Клик!');
+    alert( 'Клик!' );
-};
+  };
 */!*
 </script>
 ```
@@ -156,12 +156,12 @@ button.onclick = function() {
 
 ```html
 <!--+ run height=50 autorun -->
-<input type="button" id="elem" onclick="alert('До')" value="Нажми меня"/>
+<input type="button" id="elem" onclick="alert('До')" value="Нажми меня" />
 <script>
 *!*
-elem.onclick = function() { // перезапишет существующий обработчик
+  elem.onclick = function() { // перезапишет существующий обработчик
-  alert('После'); // выведется только это
+    alert( 'После' ); // выведется только это
-};
+  };
 */!*
 </script>
 ```
@@ -170,7 +170,7 @@ elem.onclick = function() { // перезапишет существующий
 
 ```js
 function sayThanks() {
-  alert('Спасибо!');
+  alert( 'Спасибо!' );
 }
 
 elem.onclick = sayThanks;
@@ -211,7 +211,7 @@ button.onclick = sayThanks;
 ...А вот в разметке как раз скобки нужны:
 
 ```html
-<input type="button" id="button" onclick="sayThanks()"/>
+<input type="button" id="button" onclick="sayThanks()" />
 ```
 
 Это различие просто объяснить. При создании обработчика браузером из атрибута, он автоматически создает функцию из его содержимого. Поэтому последний пример -- фактически то же самое, что:
@@ -219,7 +219,7 @@ button.onclick = sayThanks;
 ```js
 button.onclick = function() {
 *!*
-  sayThanks();  // содержимое атрибута
+  sayThanks(); // содержимое атрибута
 */!*
 };
 ```
@@ -234,7 +234,7 @@ button.onclick = function() {
 Такой вызов работать не будет:
 
 ```js
-//+ run
+//+ run no-beautify
 // при нажатии на body будут ошибки 
 // потому что при назначении в атрибут функция будет преобразована в строку
 document.body.setAttribute('onclick', function() { alert(1) });
@@ -255,6 +255,7 @@ document.body.setAttribute('onclick', function() { alert(1) });
 При этом новый обработчик будет затирать предыдущий. Например, следующий код на самом деле назначает один обработчик -- последний:
 
 ```js
+//+ no-beautify
 input.onclick = function() { alert(1); }
 // ...
 input.onclick = function() { alert(2); } // заменит предыдущий обработчик
@@ -269,7 +270,7 @@ input.onclick = function() { alert(2); } // заменит предыдущий
 Назначение обработчика осуществляется вызовом `addEventListener` с тремя аргументами:
 
 ```js
-element.addEventListener( event, handler[, phase]);
+element.addEventListener(event, handler[, phase]);
 ```
 
 <dl>
@@ -285,7 +286,7 @@ element.addEventListener( event, handler[, phase]);
 
 ```js
 // передать те же аргументы, что были у addEventListener
-element.removeEventListener( event, handler[, phase]);
+element.removeEventListener(event, handler[, phase]);
 ```
 
 [warn header="Удаление требует именно ту же функцию"]
@@ -294,6 +295,7 @@ element.removeEventListener( event, handler[, phase]);
 Вот так `removeEventListener` не сработает:
 
 ```js
+//+ no-beautify
 elem.addEventListener( "click" , function() {alert('Спасибо!')});
 // .... 
 elem.removeEventListener( "click", function() {alert('Спасибо!')});
@@ -305,12 +307,12 @@ elem.removeEventListener( "click", function() {alert('Спасибо!')});
 
 ```js
 function handler() {
-  alert('Спасибо!');
+  alert( 'Спасибо!' );
 }
 
-input.addEventListener( "click", handler);
+input.addEventListener("click", handler);
 // .... 
-input.removeEventListener( "click", handler);
+input.removeEventListener("click", handler);
 ```
 
 Обратим внимание -- если функцию не сохранить где-либо, а просто передать в `addEventListener`, как в предыдущем коде, то потом получить её обратно, чтобы снять обработчик, будет невозможно. Нет метода, который позволяет считать обработчики событий, назанченные через `addEventListener`.
@@ -319,7 +321,7 @@ input.removeEventListener( "click", handler);
 Метод `addEventListener` позволяет добавлять несколько обработчиков на одно событие одного элемента, например:
 
 ```html
-<!--+ run -->
+<!--+ run  no-beautify -->
 <input id="elem" type="button" value="Нажми меня"/>
 
 <script>
@@ -357,6 +359,7 @@ input.removeEventListener( "click", handler);
     transition: width 1s;
     width: 100px;
   }
+  
   .wide {
     width: 300px;
   }
@@ -367,14 +370,14 @@ input.removeEventListener( "click", handler);
 </button>
 
 <script>
-  elem.ontransitionend = function() { 
+  elem.ontransitionend = function() {
-    alert("ontransitionend");  // не сработает
+    alert( "ontransitionend" ); // не сработает
   };
 
 *!*
   elem.addEventListener("transitionend", function() {
-    alert("addEventListener"); // сработает по окончании анимации
+    alert( "addEventListener" ); // сработает по окончании анимации
-  }, false);
+  });
 */!*
 </script>
 ```
@@ -390,24 +393,24 @@ input.removeEventListener( "click", handler);
 Назначение обработчика осуществляется вызовом `attachEvent`:
 
 ```js
-element.attachEvent( "on"+event, handler);
+element.attachEvent("on" + event, handler);
 ```
 
 Удаление обработчика -- вызовом `detachEvent`:
 
 ```js
-element.detachEvent( "on"+event, handler);
+element.detachEvent("on" + event, handler);
 ```
 
 Например:
 
 ```js
 function handler() {
-    alert('Спасибо!');
+  alert( 'Спасибо!' );
 }
-button.attachEvent( "onclick" , handler) // Назначение обработчика
+button.attachEvent("onclick", handler) // Назначение обработчика
-// .... 
+  // .... 
-button.detachEvent( "onclick", handler) // Удаление обработчика
+button.detachEvent("onclick", handler) // Удаление обработчика
 ```
 
 Как видите, почти то же самое, только событие должно включать префикс `on`.

2-ui/2-events-and-interfaces/2-events-and-timing-depth/article.md

@@ -50,7 +50,7 @@
 В действии:
 
 ```html
-<!--+ autorun -->
+<!--+ autorun  no-beautify -->
 <textarea rows="6" cols="40" id="area">Кликни меня
 </textarea>
 
@@ -103,7 +103,7 @@
 При этом обработчик `onclick` вызовет метод `focus()` на текстовом поле `text`. Код обработчика `onfocus`, который при этом запустится, сработает синхронно, прямо сейчас, до завершения `onclick`.
 
 ```html
-<!--+ autorun -->
+<!--+ autorun  no-beautify -->
 <input type="button" id="button" value="Нажми меня">
 <input type="text" id="text" size="60">
 
@@ -147,7 +147,6 @@
 <input type="text" id="text" size="60">
 
 <script>
-
   button.onclick = function() {
     text.value += ' ->в onclick ';
 
@@ -156,10 +155,10 @@
       text.focus(); // сработает после onclick
     }, 0);
 */!*
-   
+
     text.value += ' из onclick-> ';
   };
- 
+
   text.onfocus = function() {
     text.value += ' !focus! ';
   };

2-ui/2-events-and-interfaces/3-obtaining-event-object/article.md

@@ -76,7 +76,7 @@ element.onclick = function(event) {
 
 ```js
 element.onclick = function(e) {
-  e = e || event; 
+  e = e || event;
 
   // Теперь e - объект события во всех браузерах.
 };
@@ -93,9 +93,9 @@ element.onclick = function(e) {
 
 ```js
 element.onclick = function(event) {
-    event = event || window.event;
+  event = event || window.event;
 
-    // Теперь event - объект события во всех браузерах.
+  // Теперь event - объект события во всех браузерах.
 };
 ```
 
@@ -103,8 +103,8 @@ element.onclick = function(event) {
 
 ```js
 element.onclick = function(e) {
-    e = e || event; // если нет другой внешней переменной event
+  e = e || event; // если нет другой внешней переменной event
-    ...
+  ...
 };
 ```
 

2-ui/2-events-and-interfaces/4-event-bubbling/article.md

@@ -24,13 +24,16 @@
 ```html
 <!--+ run autorun -->
 <style>
-  body * { margin: 10px; border: 1px solid blue; }
+  body * {
+    margin: 10px;
+    border: 1px solid blue;
+  }
 </style>
 
 <form onclick="alert('form')">FORM
-    <div onclick="alert('div')">DIV
+  <div onclick="alert('div')">DIV
-        <p onclick="alert('p')">P</p>
+    <p onclick="alert('p')">P</p>
-    </div>
+  </div>
 </form>
 ```
 
@@ -166,7 +169,7 @@ JS-код здесь такой:
 var elems = document.querySelectorAll('form,div,p');
 
 // на каждый элемент повесить обработчик на стадии перехвата
-for(var i=0; i<elems.length; i++) {
+for (var i = 0; i < elems.length; i++) {
   elems[i].addEventListener("click", highlightThis, true);
 }
 ```
@@ -176,7 +179,7 @@ for(var i=0; i<elems.length; i++) {
 ```js
 var elems = document.querySelectorAll('form,div,p');
 
-for(var i=0; i<elems.length; i++) {
+for (var i = 0; i < elems.length; i++) {
   elems[i].addEventListener("click", highlightThis, true);
   elems[i].addEventListener("click", highlightThis, false);
 }
@@ -218,6 +221,7 @@ elem.onclick = function(event) {
 <dd>Кросс-браузерно остановить всплытие можно так:
 
 ```js
+//+ no-beautify
 event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
 ```
 

2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/messages.css

@@ -26,7 +26,7 @@ p {
   position: absolute;
   font-size: 110%;
   top: 0;
-  color: red;
+  color: darkred;
   right: 10px;
   display: block;
   width: 24px;

2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/messages.css

@@ -22,7 +22,7 @@ p {
 
 .remove-button {
   font-size: 110%;
-  color: red;
+  color: darkred;
   right: 10px;
   width: 24px;
   height: 24px;

2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.md

@@ -11,18 +11,20 @@
 ```html
 <!--+ autorun height=190 untrusted -->
 <style>
-li { border: 1px solid green; }
+  li {
+    border: 1px solid green;
+  }
 </style>
 
 <ul onclick="alert(event.target)">
-<li>Млекопетающие
+  <li>Млекопетающие
-  <ul>
+    <ul>
-    <li>Коровы</li>
+      <li>Коровы</li>
-    <li>Ослы</li>
+      <li>Ослы</li>
-    <li>Собаки</li>
+      <li>Собаки</li>
-    <li>Тигры</li>
+      <li>Тигры</li>
-  </ul>
+    </ul>
-</li>
+  </li>
 </ul>
 ```
 
@@ -41,9 +43,9 @@ var treeUl = document.getElementsByTagName('ul')[0];
 
 var treeLis = treeUl.getElementsByTagName('li');
 
-for(var i=0; i<treeLis.length; i++) {
+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); // переместить в него заголовок
@@ -57,18 +59,20 @@ for(var i=0; i<treeLis.length; i++) {
 ```html
 <!--+ autorun height=190 untrusted -->
 <style>
-span { border: 1px solid red; }
+  span {
+    border: 1px solid red;
+  }
 </style>
 
 <ul onclick="alert(event.target.tagName)">
-<li><span>Млекопетающие</span>
+  <li><span>Млекопетающие</span>
-  <ul>
+    <ul>
-    <li><span>Коровы</span></li>
+      <li><span>Коровы</span></li>
-    <li><span>Ослы</span></li>
+      <li><span>Ослы</span></li>
-    <li><span>Собаки</span></li>
+      <li><span>Собаки</span></li>
-    <li><span>Тигры</span></li>
+      <li><span>Тигры</span></li>
-  </ul>
+    </ul>
-</li>
+  </li>
 </ul>
 ```
 
@@ -88,10 +92,10 @@ var tree = document.getElementsByTagName('ul')[0];
 tree.onclick = function(event) {
   var target = event.target;
 
-  if (target.tagName != 'SPAN') {    
+  if (target.tagName != 'SPAN') {
     return; // клик был не на заголовке
   }
-    
+
   var li = target.parentNode; // получить родительский LI
 
   // получить UL с потомками -- это первый UL внутри LI

2-ui/2-events-and-interfaces/5-event-delegation/article.md

@@ -19,9 +19,9 @@
     <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
   </tr>
   <tr>
-     <td>...<strong>Northwest</strong>...</td>
+    <td>...<strong>Northwest</strong>...</td>
-     <td>...</td>
+    <td>...</td>
-     <td>...</td>
+    <td>...</td>
   </tr>
   <tr>...еще 2 строки такого же вида...</tr>
   <tr>...еще 2 строки такого же вида...</tr>
@@ -44,7 +44,7 @@ var selectedTd;
 *!*
 table.onclick = function(event) {
   var target = event.target; // где был клик?
-  
+
   if (target.tagName != 'TD') return; // не на TD? тогда не интересует
 
   highlight(target); // подсветить TD
@@ -94,13 +94,13 @@ function highlight(node) {
 ```js
 table.onclick = function(event) {
   var target = event.target;
-  
+
   // цикл двигается вверх от target к родителям до table
-  while(target != table) { 
+  while (target != table) {
     if (target.tagName == 'TD') {
-       // нашли элемент, который нас интересует!
+      // нашли элемент, который нас интересует!
-       highlight(target);
+      highlight(target);
-       return;
+      return;
     }
     target = target.parentNode;
   }
@@ -115,7 +115,7 @@ table.onclick = function(event) {
 Кстати, в проверке `while` можно бы было использовать `this` вместо `table`:
 
 ```js
-while(target != this) {
+while (target != this) {
   // ...
 }
 ```
@@ -128,13 +128,13 @@ while(target != this) {
 ```js
 table.onclick = function(event) {
   var target = event.target;
-  
+
   var td = event.target.closest('td');
   if (!td) return; // клик вне <td>, не интересует
 
   // если клик на td, но вне этой таблицы (возможно при вложенных таблицах)
   // то не интересует
-  if (!table.contains(td)) return; 
+  if (!table.contains(td)) return;
 
   // нашли элемент, который нас интересует!
   highlight(td);
@@ -172,25 +172,31 @@ table.onclick = function(event) {
 </div>
 
 <script>
-function Menu(elem) {
+  function Menu(elem) {
-  this.save = function() { alert('сохраняю'); };
+    this.save = function() {
-  this.load = function() { alert('загружаю'); };
+      alert( 'сохраняю' );
-  this.search = function() { alert('ищу'); };
+    };
+    this.load = function() {
+      alert( 'загружаю' );
+    };
+    this.search = function() {
+      alert( 'ищу' );
+    };
 
-  var self = this;
+    var self = this;
 
-  elem.onclick = function(e) {
+    elem.onclick = function(e) {
-    var target = e.target;
+      var target = e.target;
 *!*
-    var action = target.getAttribute('data-action');
+      var action = target.getAttribute('data-action');
-    if (action) {
+      if (action) {
-      self[action]();
+        self[action]();
-    }
+      }
 */!*
-  };
+    };
-}
+  }
 
-new Menu(menu);
+  new Menu(menu);
 </script>
 ```
 

2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/solution.md

@@ -4,7 +4,7 @@
 
 ```js
 function(event) {
-  handler()  // тело взято из атрибута onclick
+  handler() // тело взято из атрибута onclick
 }
 ```
 

2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/task.md

@@ -8,7 +8,7 @@
 <!--+ autorun run -->
 <script>
   function handler() {
-    alert("...");
+    alert( "..." );
     return false;
   }
 </script>

2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.md

@@ -8,12 +8,12 @@
 contents.onclick = function(evt) {
   var target = evt.target;
 
-  function handleLink(href) {    
+  function handleLink(href) {
-    var isLeaving = confirm('Уйти на '+href+'?');    
+    var isLeaving = confirm('Уйти на ' + href + '?');
     if (!isLeaving) return false;
   }
-    
+
-  while(target != this) {
+  while (target != this) {
     if (target.nodeName == 'A') {
 *!*
       return handleLink(target.getAttribute('href')); // (*)

2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.md

@@ -10,7 +10,7 @@ var largeImg = document.getElementById('largeImg');
 document.getElementById('thumbs').onclick = function(e) {
   var target = e.target;
 
-  while(target != this) {
+  while (target != this) {
 
     if (target.nodeName == 'A') {
       showThumbnail(target.href, target.title);
@@ -34,11 +34,11 @@ function showThumbnail(href, title) {
 
 ```js
 var imgs = thumbs.getElementsByTagName('img');
-for(var i=0; i<imgs.length; i++) {
+for (var i = 0; i < imgs.length; i++) {
   var url = imgs[i].parentNode.href;
 
 *!*
-  var img = document.createElement('img');  
+  var img = document.createElement('img');
   img.src = url;
 */!*
 }

2-ui/2-events-and-interfaces/7-default-browser-action/article.md

@@ -24,7 +24,7 @@
 В следующем примере при клике по ссылке переход не произойдет:
 
 ```html
-<!--+ autorun height=60 -->
+<!--+ autorun height=60  no-beautify -->
 <a href="/" onclick="return false">Нажми здесь</a>
 или
 <a href="/" onclick="event.preventDefault()">здесь</a>
@@ -68,7 +68,7 @@ menu.onclick = function(event) {
   if (event.target.nodeName != 'A') return;
 
   var href = event.target.getAttribute('href');
-  alert(href); // может быть подгрузка с сервера, генерация интерфейса и т.п.
+  alert( href ); // может быть подгрузка с сервера, генерация интерфейса и т.п.
 
 *!*
   return false; // отменить переход по url
@@ -127,7 +127,7 @@ menu.onclick = function(event) {
 element.onclick = function(event) {
   event = event || window.event;
 
-  if (event.preventDefault) {  // если метод существует
+  if (event.preventDefault) { // если метод существует
     event.preventDefault(); // то вызвать его
   } else { // иначе вариант IE8-:
     event.returnValue = false;
@@ -138,6 +138,7 @@ element.onclick = function(event) {
 Можно записать в одну строку:
 
 ```js
+//+ no-beautify
 ...
 event.preventDefault ? event.preventDefault() : (event.returnValue=false);
 ...

2-ui/2-events-and-interfaces/8-dispatch-events/article.md

@@ -37,7 +37,7 @@ var event = new Event(тип события[, флаги]);
 При просмотре примера ниже кнопка обработчик `onclick` на кнопке сработает сам по себе, событие генерируется скриптом:
 
 ```html
-<!--+ run -->
+<!--+ run  no-beautify -->
 <button id="elem" onclick="alert('Клик');">Автоклик</button>
 
 <script>
@@ -74,15 +74,17 @@ var event = new Event(тип события[, флаги]);
   setTimeout(hide, 2000);
 
   function hide() {
-    var event = new Event("hide", {cancelable: true});
+    var event = new Event("hide", {
+      cancelable: true
+    });
     if (!rabbit.dispatchEvent(event)) {
-      alert('действие отменено');
+      alert( 'действие отменено' );
     } else {
       rabbit.hidden = true;
     }
   }
 
-  rabbit.addEventListener('hide',  function(event) {
+  rabbit.addEventListener('hide', function(event) {
     if (confirm("Вызвать preventDefault?")) {
       event.preventDefault();
     }
@@ -112,6 +114,7 @@ var event = new Event(тип события[, флаги]);
 Другие свойства события, если они нужны, например координаты для события мыши -- можно присвоить в объект события позже, например:
 
 ```js
+//+ no-beautify
 var event = new Event("click", {bubbles: true, cancelable: false});
 event.clientX = 100;
 event.clientY = 100;
@@ -124,7 +127,7 @@ event.clientY = 100;
 Всё, что для этого нужно -- это флаг `bubbles`:
 
 ```html
-<!--+ run -->
+<!--+ run  no-beautify -->
 <h1 id="elem">Привет от скрипта!</h1>
 
 <script>
@@ -179,7 +182,7 @@ var e = new MouseEvent("click", {
 });
 
 *!*
-alert(e.clientX); // 100
+alert( e.clientX ); // 100
 */!*
 ```
 
@@ -195,7 +198,7 @@ var e = new Event("click", {
 });
 
 *!*
-alert(e.clientX); // undefined, свойство не присвоено!
+alert( e.clientX ); // undefined, свойство не присвоено!
 */!*
 ```
 
@@ -275,7 +278,10 @@ event.initEvent(type, boolean bubbles, boolean cancelable);
 
 ```js
 // современный стандарт
-var event = new Event("click", { bubbles: true, cancelable: true });
+var event = new Event("click", {
+  bubbles: true,
+  cancelable: true
+});
 
 // старый стандарт
 var event = document.createEvent("Event");
@@ -291,9 +297,9 @@ event.initEvent("click", true, true);
 <h1 id="elem">Привет от скрипта!</h1>
 
 <script>
-  document.addEventListener("hello", function(event) { 
+  document.addEventListener("hello", function(event) {
-    alert("Привет");
+    alert( "Привет" );
-    event.preventDefault();  
+    event.preventDefault();
   }, false);
 
 *!*
@@ -302,9 +308,8 @@ event.initEvent("click", true, true);
 */!*
 
   if (elem.dispatchEvent(event) === false) {
-    alert('Событие было отменено preventDefault');
+    alert( 'Событие было отменено preventDefault' );
   }
-
 </script>
 ```
 
@@ -318,22 +323,22 @@ event.initEvent("click", true, true);
 Выглядят они немного страшновато, например (взято из [спецификации](http://www.w3.org/TR/DOM-Level-3-Events/#idl-interface-MouseEvent-initializers)):
 
 ```js
-void initMouseEvent ( 
+void initMouseEvent(
-  DOMString typeArg,  // тип
+  DOMString typeArg, // тип
-  boolean bubblesArg,  // всплывает?
+  boolean bubblesArg, // всплывает?
-  boolean cancelableArg,  // можно отменить?
+  boolean cancelableArg, // можно отменить?
-  AbstractView? viewArg, // объект window, null означает текущее окно
+  AbstractView ? viewArg, // объект window, null означает текущее окно
-  long detailArg,   // свойство detail и другие...
+  long detailArg, // свойство detail и другие...
-  long screenXArg,   
+  long screenXArg,
-  long screenYArg,  
+  long screenYArg,
-  long clientXArg,  
+  long clientXArg,
-  long clientYArg, 
+  long clientYArg,
-  boolean ctrlKeyArg, 
+  boolean ctrlKeyArg,
-  boolean altKeyArg, 
+  boolean altKeyArg,
-  boolean shiftKeyArg, 
+  boolean shiftKeyArg,
-  boolean metaKeyArg, 
+  boolean metaKeyArg,
-  unsigned short buttonArg, 
+  unsigned short buttonArg,
-  EventTarget? relatedTargetArg);
+  EventTarget ? relatedTargetArg);
 };
 ```
 
@@ -345,7 +350,7 @@ void initMouseEvent (
 
 <script>
   elem.onclick = function(e) {
-    alert('Клик на координатах ' + e.clientX + ':' + e.clientY);
+    alert( 'Клик на координатах ' + e.clientX + ':' + e.clientY );
   };
 
   var event = document.createEvent("MouseEvent");
@@ -371,9 +376,9 @@ try {
   window.CustomEvent = function(event, params) {
     var evt;
     params = params || {
-      bubbles:    false,
+      bubbles: false,
       cancelable: false,
-      detail:     undefined
+      detail: undefined
     };
     evt = document.createEvent("CustomEvent");
     evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
@@ -399,15 +404,15 @@ try {
 
 <script>
   document.body.onclick = function() {
-    alert("Клик, event.type=" + event.type);
+    alert( "Клик, event.type=" + event.type );
     return false;
   };
 
 *!*
   var event = document.createEventObject();
-  if( !elem.fireEvent("onclick", event) ) {
+  if (!elem.fireEvent("onclick", event)) {
-    alert('Событие было отменено');
+    alert( 'Событие было отменено' );
-  } 
+  }
 */!*
 </script>
 ```