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;
-}) ); // 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:
@@ -261,7 +261,7 @@ 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 = /<(.*?)>/
 
-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).
 
 **Скобки могут быть и вложенными. В этом случае нумерация также идёт слева направо.**
 
@@ -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,7 +104,7 @@ 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) {
@@ -115,7 +115,7 @@ function setCookie(name, value, options) {
 
   var updatedCookie = name + "=" + value;
 
-  for(var propName in options) {
+  for (var propName in options) {
     updatedCookie += "; " + propName;
     var propValue = options[propName];
     if (propValue !== true) {
@@ -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` мы можем определить, какие именно части даты показывать (часы, месяц, год...) и в каком формате.
@@ -297,8 +299,8 @@ 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"
 });
 
@@ -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]
@@ -23,7 +23,7 @@ function bbtagit(text) {
 }
 
 var line = "[u]мой\n текст[/u]"
-alert( bbtagit(line) )
+alert(bbtagit(line))
 ```
 
 Попробуйте запустить. Заменяет? Как бы не так!
@@ -43,7 +43,7 @@ function bbtagit(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,21 +161,21 @@ 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
 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> используется как точка отсчета для следующего поиска:
 
@@ -184,9 +184,9 @@ for(var i=0; i<result.length; i++) alert(result[i])
 var str = "count 36-26, 18-9"
 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/8-range-textrange-selection/article.md

@@ -50,7 +50,7 @@ HTML:
 </button>
 
 <script>
-function domRangeCreate() {
+  function domRangeCreate() {
     // Найдем корневой контейнер
     var root = document.getElementById('ex2');
     // Найдем контейнеры граничных точек (в данном случае тестовые)
@@ -60,15 +60,15 @@ function domRangeCreate() {
       // Создаем Range
       var rng = root.createRange();
       // Задаем верхнюю граничную точку, передав контейнер и смещение
-    rng.setStart( start, 3 );
+      rng.setStart(start, 3);
       // Аналогично для нижней границы
-    rng.setEnd( end, 10 );
+      rng.setEnd(end, 10);
       // Теперь мы можем вернуть текст, который содержится в полученной области
       return rng.toString();
     } else {
       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 content = root.nodeValue;
     // Проверим есть ли совпадения с переданным текстом
-  if ( ~content.indexOf( text ) ) {
+    if (~content.indexOf(text)) {
-    if ( document.createRange ) {
+      if (document.createRange) {
         // Если есть совпадение, и браузер поддерживает Range, создаем объект
         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');
         highlightDiv.style.backgroundColor = 'blue';
         // Обернем наш Range в спан
-      rng.surroundContents( highlightDiv );
+        rng.surroundContents(highlightDiv);
       } else {
-      alert('Вероятно, у вас IE8-, смотрите реализацию TextRange ниже');
+        alert( 'Вероятно, у вас IE8-, смотрите реализацию TextRange ниже' );
       }
     } else {
-    alert('Совпадений не найдено');
+      alert( 'Совпадений не найдено' );
+    }
   }
-}
 </script>
 ```
 
@@ -177,11 +177,11 @@ function domRangeHighlight(text) {
 <input id="buttonId" type="button" value="Test button" onclick="alert( ieTextRangeCreate() );" />
 
 <script>
-function ieTextRangeCreate() {
+  function ieTextRangeCreate() {
     // Найдем кнопку
     var button = document.getElementById('buttonId');
     // Если мы в ИЕ
-  if ( button.createTextRange && button.createTextRange() != undefined ) {
+    if (button.createTextRange && button.createTextRange() != undefined) {
       // Создаем TextRange
       var rng = button.createTextRange();
       // И вернем текстовое содержимое полученного объекта
@@ -189,7 +189,7 @@ function ieTextRangeCreate() {
     } else {
       return 'Вероятно, у вас не IE, смотрите реализацию Range выше';
     }
-}
+  }
 </script>
 ```
 
@@ -239,30 +239,30 @@ function ieTextRangeCreate() {
 </div>
 
 <script>
-function ieTextRangeHighlight(text) {
+  function ieTextRangeHighlight(text) {
     // Получим ссылку на элемент, в котором будет происходить поиск
     var root = document.getElementById('ex4');
     // Получим значение его текстового потомка
     var content = root.firstChild.nodeValue;
     // Если есть совпадение
-  if ( ~content.indexOf(text) ) {
+    if (~content.indexOf(text)) {
       // и мы в MSIE
-    if ( document.body.createTextRange ) {
+      if (document.body.createTextRange) {
         // Создадим объект TextRange
         var rng = document.body.createTextRange();
         // Свернем его до 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 выше');
+        alert( 'Вероятно, у вас не  IE, смотрите реализацию Range выше' );
       }
     } else {
-    alert('Совпадений не найдено');
+      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 rng, sel;
-  if ( document.createRange ) {
+    if (document.createRange) {
       rng = document.createRange();
-    rng.selectNode( target )
+      rng.selectNode(target)
       sel = window.getSelection();
       sel.removeAllRanges();
-    sel.addRange( rng );
+      sel.addRange(rng);
     } else {
       var rng = document.body.createTextRange();
-    rng.moveToElementText( target );
+      rng.moveToElementText(target);
       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,17 +139,16 @@ 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.sourceIndex >= 0 && other.sourceIndex >= 0 ?
           (this.sourceIndex < other.sourceIndex && 4) +
-                   (this.sourceIndex > other.sourceIndex && 2) 
+          (this.sourceIndex > other.sourceIndex && 2) : 1
-                   : 1
         ) + 0;
     }
   }

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

@@ -21,15 +21,15 @@ function update() {
 */!*
 
   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;
 }
 ```

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

@@ -21,7 +21,6 @@
 
   // вставить elem за последним элементом
   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

@@ -14,12 +14,12 @@
 </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>
@@ -326,7 +326,7 @@ div.parentNode.insertBefore( div2, div.nextSibling );
   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, но в него они добавляются тем же полифиллом:
 
@@ -211,13 +212,14 @@ 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>
     var p = document.createElement('p');
     document.body.append(p);
@@ -230,9 +232,10 @@ ul.appendChild(fragment);   // вместо фрагмента вставятс
 
     // добавить элемент после <p>
     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);
-</script>
+  </script>
-3
+  3
 </body>
 ```
 
@@ -31,12 +31,16 @@ HTML-документ ниже будет содержать `1 2 3`.
 <!--+ run -->
 <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/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
@@ -76,12 +77,12 @@ setTimeout(function() {
   <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>
     var computedStyle = getComputedStyle(document.body);
-    alert(computedStyle.marginTop);  // выведет отступ в пикселях
+    alert( computedStyle.marginTop ); // выведет отступ в пикселях
-    alert(computedStyle.color);  // выведет цвет 
+    alert( computedStyle.color ); // выведет цвет
   </script>
 
 </body>
@@ -264,8 +268,11 @@ function getStyle(elem) {
 ```html
 <!--+ run height=100 -->
 <style>
-  body { margin: 10% }
+  body {
+    margin: 10%
+  }
 </style>
+
 <body>
   <script>
     var elem = document.body;
@@ -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/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;
 }
 ```

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,7 +25,7 @@ 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)
 ]
 ```
@@ -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

@@ -80,7 +80,10 @@ function getCoords(elem) {
   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;
   }
 
-  return {top: top, left: left};
+  return {
+    top: top,
+    left: left
+  };
 }
 ```
 
@@ -186,7 +193,7 @@ document.getElementById('getBoundingClientRectEx').onclick = function(event) {
 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>
-  </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,7 +149,8 @@ drawHtmlTree(node,  'div.domtree', 600, 200);
 ```html
 <!DOCTYPE HTML>
 <html>
-  <body>
+
+<body>
   Правда о лосях
   <ol>
     <li>Лось — животное хитрое</li>
@@ -154,7 +159,8 @@ drawHtmlTree(node,  'div.domtree', 600, 200);
 */!*
     <li>...и коварное!</li>
   </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>
+
+<head>
   <title>О лосях</title>
-  </head>
+</head>
-  <body>
+
+<body>
   Правда о лосях
-  </body>
+</body>
+
 </html>
 ```
 

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

@@ -7,8 +7,12 @@
 ```html
 <!DOCTYPE HTML>
 <html>
-  <head><meta charset="utf-8"></head>
+
-  <body>
+<head>
+  <meta charset="utf-8">
+</head>
+
+<body>
   <div>Пользователи:</div>
   <ul>
     <li>Маша</li>
@@ -21,7 +25,8 @@
     // ... ваш код
   </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>
+
+<head>
   <script>
 *!*
-      alert("Из HEAD: " + document.body); // null, body ещё нет
+    alert( "Из HEAD: " + document.body ); // null, body ещё нет
 */!*
   </script>
-  </head>
+</head>
-  <body>
+
+<body>
 
   <script>
-      alert("Из BODY: " + document.body); // body есть
+    alert( "Из BODY: " + document.body ); // body есть
   </script>
 
-  </body>
+</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>
 ```
 
@@ -148,7 +153,7 @@ var elems = document.documentElement.childNodes;
 *!*
 [].forEach.call(elems, function(elem) {
 */!*
-  alert(elem);  // HEAD, текст, BODY
+  alert( elem ); // HEAD, текст, BODY
 });
 ```
 
@@ -167,7 +172,7 @@ elems = Array.prototype.slice.call(elems); // теперь elems - массив
 */!*
 
 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];
-    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

@@ -14,7 +14,7 @@
 
   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

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

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

@@ -7,11 +7,13 @@
 ```html
 <!DOCTYPE HTML>
 <html>
+
 <body>
   <script>
-      alert(document.body.lastChild.nodeType);
+    alert( document.body.lastChild.nodeType );
   </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,7 +45,7 @@ alert( document.body ); // [object HTMLBodyElement]
 Вот из него выдержка:
 
 ```js
-interface HTMLInputElement : HTMLElement {
+interface HTMLInputElement: HTMLElement {
   attribute DOMString accept;
   attribute DOMString alt;
   attribute DOMString autocomplete;
@@ -118,14 +118,14 @@ interface Node {
   <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>
@@ -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/3-polyfill-textcontent-ie8/solution.md

@@ -14,8 +14,7 @@
       set: function(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;
     }
@@ -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]

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

@@ -15,7 +15,9 @@
 
   <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,7 +23,7 @@
 ```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];
 
@@ -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,7 +9,9 @@
 ```html
 <!--+ run -->
 <style>
-  .external { background-color: yellow }
+  .external {
+    background-color: yellow
+  }
 </style>
 
 <a name="list">список</a>

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

@@ -24,7 +24,7 @@ document.body.myData = {
   familyName: 'Петрович'
 };
 
-alert(document.body.myData.name); // Петр
+alert( document.body.myData.name ); // Петр
 ```
 
 Можно добавить и новую функцию:
@@ -32,7 +32,7 @@ alert(document.body.myData.name); // Петр
 ```js
 //+ run
 document.body.sayHi = function() {
-  alert(this.nodeName);
+  alert( this.nodeName );
 }
 
 document.body.sayHi(); // BODY, выполнилась с правильным this
@@ -96,8 +96,8 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
     alert( document.body.innerHTML ); // (3) в HTML видны все атрибуты!
 
     var attrs = elem.attributes; // (4) можно получить коллекцию атрибутов
-    for (var i=0; i<attrs.length; i++) {
+    for (var i = 0; i < attrs.length; i++) {
-      alert(attrs[i].name + " = " + attrs[i].value); 
+      alert( attrs[i].name + " = " + attrs[i].value );
     }
   </script>
 </body>
@@ -189,7 +189,7 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
 *!*
     input.value = 'new'; // поменяли свойство
 
-    alert(input.getAttribute('value')); // 'markup', не изменилось!
+    alert( input.getAttribute('value') ); // 'markup', не изменилось!
 */!*
   </script>
 </body>
@@ -235,7 +235,7 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
     alert( document.body.className ); // main page
 
     // поменять класс элемента
-    document.body.className="class1 class2"; 
+    document.body.className = "class1 class2";
   </script>
 </body>
 ```
@@ -272,8 +272,8 @@ document.body.sayHi(); // BODY, выполнилась с правильным t
     classList.remove('page'); // удалить класс
     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') ); // проверить наличие класса
@@ -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;
   }
@@ -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 }

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

@@ -6,7 +6,7 @@
 
 ```js
 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()" />
 ```
 
 Это различие просто объяснить. При создании обработчика браузером из атрибута, он автоматически создает функцию из его содержимого. Поэтому последний пример -- фактически то же самое, что:
@@ -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;
   }
@@ -368,13 +371,13 @@ input.removeEventListener( "click", handler);
 
 <script>
   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 ';
 

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

@@ -24,7 +24,10 @@
 ```html
 <!--+ run autorun -->
 <style>
-  body * { margin: 10px; border: 1px solid blue; }
+  body * {
+    margin: 10px;
+    border: 1px solid blue;
+  }
 </style>
 
 <form onclick="alert('form')">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>
       <li>Коровы</li>
       <li>Ослы</li>
       <li>Собаки</li>
       <li>Тигры</li>
     </ul>
-</li>
+  </li>
 </ul>
 ```
 
@@ -41,7 +43,7 @@ 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');
@@ -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>
       <li><span>Коровы</span></li>
       <li><span>Ослы</span></li>
       <li><span>Собаки</span></li>
       <li><span>Тигры</span></li>
     </ul>
-</li>
+  </li>
 </ul>
 ```
 

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

@@ -96,7 +96,7 @@ table.onclick = function(event) {
   var target = event.target;
 
   // цикл двигается вверх от target к родителям до table
-  while(target != table) { 
+  while (target != table) {
     if (target.tagName == 'TD') {
       // нашли элемент, который нас интересует!
       highlight(target);
@@ -115,7 +115,7 @@ table.onclick = function(event) {
 Кстати, в проверке `while` можно бы было использовать `this` вместо `table`:
 
 ```js
-while(target != this) {
+while (target != this) {
   // ...
 }
 ```
@@ -172,10 +172,16 @@ 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;
 
@@ -188,9 +194,9 @@ function Menu(elem) {
       }
 */!*
     };
-}
+  }
 
-new Menu(menu);
+  new Menu(menu);
 </script>
 ```
 

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

@@ -9,11 +9,11 @@ contents.onclick = function(evt) {
   var target = evt.target;
 
   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,7 +34,7 @@ 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;
 
 *!*

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
@@ -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,9 +74,11 @@ 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;
     }
@@ -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");
@@ -292,7 +298,7 @@ event.initEvent("click", true, true);
 
 <script>
   document.addEventListener("hello", function(event) {
-    alert("Привет");
+    alert( "Привет" );
     event.preventDefault();
   }, false);
 
@@ -302,9 +308,8 @@ event.initEvent("click", true, true);
 */!*
 
   if (elem.dispatchEvent(event) === false) {
-    alert('Событие было отменено preventDefault');
+    alert( 'Событие было отменено preventDefault' );
   }
-
 </script>
 ```
 
@@ -318,11 +323,11 @@ 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, // тип
   boolean bubblesArg, // всплывает?
   boolean cancelableArg, // можно отменить?
-  AbstractView? viewArg, // объект window, null означает текущее окно
+  AbstractView ? viewArg, // объект window, null означает текущее окно
   long detailArg, // свойство detail и другие...
   long screenXArg,
   long screenYArg,
@@ -333,7 +338,7 @@ void initMouseEvent (
   boolean shiftKeyArg,
   boolean metaKeyArg,
   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");
@@ -399,14 +404,14 @@ 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>

2-ui/3-event-details/1-mouse-clicks/article.md

@@ -77,7 +77,7 @@
 Это событие срабатывает при клике правой кнопкой мыши:
 
 ```html
-<!--+ autorun height=80 -->
+<!--+ autorun height=80  no-beautify -->
 <div>Правый клик на этой кнопке выведет "Клик".</div>
 <button oncontextmenu="alert('Клик!');">Правый клик сюда</button>
 ```
@@ -89,7 +89,7 @@
 В примере ниже встроенное меню показано не будет:
 
 ```html
-<!--+ autorun height=60 -->
+<!--+ autorun height=60  no-beautify -->
 <button oncontextmenu="alert('Клик!');return false">Правый клик сюда</button>
 ```
 
@@ -116,7 +116,7 @@
 *!*
     if (!e.altKey || !e.shiftKey) return;
 */!*
-    alert('Ура!');
+    alert( 'Ура!' );
   }
 </script>
 ```
@@ -247,7 +247,7 @@ function fixWhich(e) {
 
 ```js
 function fixPageXY(e) {
-  if (e.pageX == null && e.clientX != null ) { // если нет pageX..
+  if (e.pageX == null && e.clientX != null) { // если нет pageX..
     var html = document.documentElement;
     var body = document.body;
 

2-ui/3-event-details/10-onload-ondomcontentloaded/article.md

@@ -33,8 +33,8 @@ document.addEventListener("DOMContentLoaded", ready);
 <!--+ run height=150 -->
 <script>
   function ready() {
-    alert('DOM готов');
+    alert( 'DOM готов' );
-    alert("Размеры картинки: " + img.offsetWidth + "x" + img.offsetHeight);
+    alert( "Размеры картинки: " + img.offsetWidth + "x" + img.offsetHeight );
   }
 
 *!*
@@ -99,7 +99,7 @@ Firefox/Chrome/Opera автозаполняют формы по `DOMContentLoade
 <script>
 *!*
   window.onload = function() {
-    alert('Документ и все ресурсы загружены');
+    alert( 'Документ и все ресурсы загружены' );
   };
 */!*
 </script>
@@ -144,9 +144,9 @@ Firefox игнорирует текст, а всегда показывает с
 ```html
 <body>
   ...
-<script>
+  <script>
     init();
-</script>
+  </script>
 </body>
 ```
 
@@ -166,7 +166,7 @@ Firefox игнорирует текст, а всегда показывает с
 <script>
 *!*
   $(function() {
-    alert("DOMContentLoaded");
+    alert( "DOMContentLoaded" );
   });
 */!*
 </script>

2-ui/3-event-details/11-onload-onerror/4-scripts-callback/task.md

@@ -9,6 +9,7 @@
 Пример использования:
 
 ```js
+//+ no-beautify
 addScripts(["a.js", "b.js", "c.js"], function() { a() });
 /* функция a() описана в a.js и использует b.js,c.js */
 ```

2-ui/3-event-details/11-onload-onerror/article.md

@@ -40,8 +40,8 @@ document.body.appendChild(script);
 *!*
 script.onload = function() {
     // после выполнения скрипта становится доступна функция _
-  alert(_); // её код
+    alert( _ ); // её код
-}
+  }
 */!*
 ```
 
@@ -65,7 +65,7 @@ document.body.appendChild(script);
 
 *!*
 script.onerror = function() {
-  alert("Ошибка: " + this.src); 
+  alert( "Ошибка: " + this.src );
 };
 */!*
 ```
@@ -89,7 +89,7 @@ script.onerror = function() {
 Например, рабочий скрипт:
 
 ```js
-//+ run
+//+ run no-beautify
 var script = document.createElement('script');
 script.src = "https://code.jquery.com/jquery.js";
 document.documentElement.appendChild(script);
@@ -104,7 +104,7 @@ script.onreadystatechange = function() {
 Скрипт с ошибкой:
 
 ```js
-//+ run
+//+ run no-beautify
 var script = document.createElement('script');
 script.src = "http://ajax.googleapis.com/404.js";
 document.documentElement.appendChild(script);
@@ -132,7 +132,7 @@ script.onreadystatechange = function() {
 Пример ниже вызывает `afterLoad` после загрузки скрипта и работает только в IE:
 
 ```js
-//+ run
+//+ run no-beautify
 var script = document.createElement('script');
 script.src = "https://code.jquery.com/jquery.js";
 document.documentElement.appendChild(script);
@@ -176,7 +176,7 @@ script.src = "https://code.jquery.com/jquery.js";
 document.documentElement.appendChild(script);
 
 function afterLoad() {
-  alert("Загрузка завершена: " + typeof(jQuery));
+  alert( "Загрузка завершена: " + typeof(jQuery) );
 }
 
 script.onload = script.onerror = function() {
@@ -189,7 +189,9 @@ script.onload = script.onerror = function() {
 script.onreadystatechange = function() {
   var self = this;
   if (this.readyState == "complete" || this.readyState == "loaded") {
-    setTimeout(function() { self.onload() }, 0);// сохранить "this" для onload
+    setTimeout(function() {
+      self.onload()
+    }, 0); // сохранить "this" для onload
   }
 };
 ```
@@ -221,6 +223,7 @@ script.onreadystatechange = function() {
 <dd>Ставим обработчики на `onload` + `onerror`
 
 ```js
+//+ no-beautify
 var img = document.createElement('img');
 img.onload = function() { alert("Успех "+this.src };
 img.onerror = function() { alert("Ошибка "+this.src };

2-ui/3-event-details/2-unselectable/article.md

@@ -98,11 +98,15 @@
 ```html
 <!--+ autorun height=auto -->
 <style>
-b {
+  b {
-  -webkit-user-select: none; /* user-select -- это нестандартное свойство */
+    -webkit-user-select: none;
-  -moz-user-select: none;    /* поэтому нужны префиксы */
+    /* user-select -- это нестандартное свойство */
+    
+    -moz-user-select: none;
+    /* поэтому нужны префиксы */
+    
     -ms-user-select: none;
-}
+  }
 </style>
 
 Строка до..
@@ -171,7 +175,7 @@ elem.onmousedown = elem.onselectstart = function() {
 Если уж хочется запретить копирование -- можно использовать событие `oncopy`:
 
 ```html
-<!--+ autorun height=80 -->
+<!--+ autorun height=80  no-beautify -->
 <div oncopy="alert('Копирование запрещено');return false">
   Уважаемый копирователь, 
   почему-то автор хочет заставить вас покопаться в исходном коде этой страницы.

2-ui/3-event-details/4-drag-and-drop/article.md

@@ -48,8 +48,8 @@ ball.onmousedown = function(e) { // 1. отследить нажатие*!*
   // передвинуть мяч под координаты курсора 
   // и сдвинуть на половину ширины/высоты для центрирования
   function moveAt(e) {
-    ball.style.left = e.pageX - ball.offsetWidth/2 + 'px'; 
+    ball.style.left = e.pageX - ball.offsetWidth / 2 + 'px';
-    ball.style.top = e.pageY - ball.offsetHeight/2 + 'px'; 
+    ball.style.top = e.pageY - ball.offsetHeight / 2 + 'px';
   }
 
   // 3, перемещать по экрану*!*
@@ -106,8 +106,8 @@ ball.ondragstart = function() {
 В примерах выше мяч позиционируется в центре под курсором мыши:
 
 ```js
-self.style.left = e.pageX - ball.offsetWidth/2 + 'px';
+self.style.left = e.pageX - ball.offsetWidth / 2 + 'px';
-self.style.top = e.pageY - ball.offsetHeight/2 + 'px';
+self.style.top = e.pageY - ball.offsetHeight / 2 + 'px';
 ```
 
 Если поставить `left/top` ровно в `pageX/pageY`, то мячик прилипнет верхним-левым углом к курсору мыши. Будет некрасиво. Поэтому мы сдвигаем его на половину высоты/ширины, чтобы был центром под мышью. Уже лучше.

2-ui/3-event-details/5-drag-and-drop-objects/article.md

@@ -103,8 +103,8 @@ document.onmousedown = function(e) {
 document.onmousemove = function(e) {
   if (!dragObject.elem) return; // элемент не зажат
 
-  if ( !dragObject.avatar ) { // элемент нажат, но пока не начали его двигать
+  if (!dragObject.avatar) { // элемент нажат, но пока не начали его двигать
-    ... начать перенос, присвоить dragObject.avatar = переносимый элемент
+    ...начать перенос, присвоить dragObject.avatar = переносимый элемент
   }
 
   ...отобразить перенос элемента...
@@ -356,6 +356,7 @@ function findDroppable(event) {
 Для его создания используем не обычный синтаксис `{...}`, а вызов `new function`. Это позволит прямо при создании объявить дополнительные переменные и функции в замыкании, которыми могут пользоваться методы объекта, а также назначить обработчики:
 
 ```js
+//+ no-beautify
 var DragManager = new function() {
   
   var dragObject = {};
@@ -400,6 +401,7 @@ var DragManager = new function() {
 С использованием `DragManager` пример, с которого начиналась эта глава -- перенос иконок браузеров в компьютер, реализуется совсем просто:
 
 ```js
+//+ no-beautify
 DragManager.onDragEnd = function(dragObject, dropElem) {
 
   // скрыть/удалить переносимый объект

2-ui/3-event-details/6-mousewheel/article.md

@@ -9,7 +9,7 @@
 Несмотря на то, что колёсико мыши обычно ассоциируется с прокруткой, это совсем разные вещи.
 
 <ul>
-<li>При прокрутке срабатывает событие [onscroll](/event-onscroll) -- рассмотрим его в дальнейшем. Оно произойдёт *при любой прокрутке*, в том числе через клавиатурy, но *только на прокручиваемых элементах*. Например, элемент с `overflow:hidden` в принципе не может сгенерировать `onscroll`.</li>
+<li>При прокрутке срабатывает событие [onscroll](/onscroll) -- рассмотрим его в дальнейшем. Оно произойдёт *при любой прокрутке*, в том числе через клавиатурy, но *только на прокручиваемых элементах*. Например, элемент с `overflow:hidden` в принципе не может сгенерировать `onscroll`.</li>
 <li>А событие `wheel` является чисто "мышиным". Оно генерируется *над любым элементом* при передвижении колеса мыши. При этом не важно, прокручиваемый он или нет. В частности, `overflow:hidden` никак не препятствует обработке колеса мыши.</li>
 </ul>
 
@@ -39,16 +39,16 @@
 if (elem.addEventListener) {
   if ('onwheel' in document) {
     // IE9+, FF17+, Ch31+
-    elem.addEventListener ("wheel", onWheel);
+    elem.addEventListener("wheel", onWheel);
   } else if ('onmousewheel' in document) {
     // устаревший вариант события
-    elem.addEventListener ("mousewheel", onWheel);
+    elem.addEventListener("mousewheel", onWheel);
   } else {
     // Firefox < 17
-    elem.addEventListener ("MozMousePixelScroll", onWheel);
+    elem.addEventListener("MozMousePixelScroll", onWheel);
   }
 } else { // IE8-
-  elem.attachEvent ("onmousewheel", onWheel);
+  elem.attachEvent("onmousewheel", onWheel);
 }
 
 function onWheel(e) {

2-ui/3-event-details/7-fixevent/article.md

@@ -44,7 +44,7 @@ function fixEvent(e) {
   if (e.type == 'mouseover' || e.type == 'mouseenter') e.relatedTarget = e.fromElement;
   if (e.type == 'mouseout' || e.type == 'mouseleave') e.relatedTarget = e.toElement;
 
-  if (e.pageX == null && e.clientX != null ) {
+  if (e.pageX == null && e.clientX != null) {
     var html = document.documentElement;
     var body = document.body;
 
@@ -56,7 +56,7 @@ function fixEvent(e) {
   }
 
   if (!e.which && e.button) {
-    e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : (e.button & 4 ? 2 : 0) );
+    e.which = e.button & 1 ? 1 : (e.button & 2 ? 3 : (e.button & 4 ? 2 : 0));
   }
 
   return e;

2-ui/3-event-details/8-onscroll/2-updown-button/solution.md

@@ -47,7 +47,7 @@ window.onscroll = function() {
   var pageY = window.pageYOffset || document.documentElement.scrollTop;
   var innerHeight = document.documentElement.clientHeight;
 
-  switch(updownElem.className) {
+  switch (updownElem.className) {
     case '':
       if (pageY > innerHeight) {
         updownElem.className = 'up';
@@ -77,7 +77,7 @@ var pageYLabel = 0;
 updownElem.onclick = function() {
   var pageY = window.pageYOffset || document.documentElement.scrollTop;
 
-  switch(this.className) {
+  switch (this.className) {
     case 'up':
       pageYLabel = pageY;
       window.scrollTo(0, 0);

2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md

@@ -3,7 +3,7 @@
 Она должна срабатывать не только при прокрутке, но и при загрузке. Вполне достаточно для этого -- указать ее вызов в скрипте под страницей, вот так:
 
 ```js
-... страница ...
+...страница...
 
 function isVisible(elem) {