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

minor renovations, beautify round 2 (final)

Browse source
This commit is contained in:
Ilya Kantor 2015-03-12 10:26:02 +03:00
parent fad6615c42
commit 8410ce6421
212 changed files with 1981 additions and 1717 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

BIN
1-js/4-data-structures/7-array/9-eratosthenes-sieve/sieve.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 44 KiB

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

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

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

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

6
10-regular-expressions-javascript/10-regexp-backreferences/article.md
View file

@ -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"
```
Теперь работает верно!

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

@ -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'
```
**Альтернация имеет очень низкий приоритет.**

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

@ -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, дробь!
```

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

@ -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> -- это только начало текста.

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

@ -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>.

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

@ -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);
alert('Результат: ' + result); // Результат: ой-ой-ой
var result = "ОЙ-Ой-ой".replace(/ой/gi, replacer);
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) ) {
alert('Найдено: ' + result[0] + ' на позиции:' + result.index);
alert('Свойство lastIndex: ' + regexp.lastIndex);
while (result = regexp.exec(str)) {
alert( 'Найдено: ' + result[0] + ' на позиции:' + result.index );
alert( 'Свойство lastIndex: ' + regexp.lastIndex );
}
alert('Конечное значение lastIndex: ' + regexp.lastIndex);
alert( 'Конечное значение lastIndex: ' + regexp.lastIndex );
```
Здесь цикл продолжается до тех пор, пока `regexp.exec` не вернёт `null`, что означает "совпадений больше нет".

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

@ -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(/\\/) ); // '\'
```
## Итого

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

@ -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) ); // "@", "."
```
## Не нужно экранирование

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

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

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

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

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

@ -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>

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

@ -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>

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

@ -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[0]); // a
alert(match[1]); // undefined
alert(match[2]); // undefined
alert( match.length ); // 3
alert( match[0] ); // a
alert( match[1] ); // 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[0]); // ac, всё совпадение
alert(match[1]); // undefined, для (z)? ничего нет
alert(match[2]); // c
alert( match.length ); // 3
alert( match[0] ); // ac, всё совпадение
alert( match[1] ); // undefined, для (z)? ничего нет
alert( match[2] ); // c
```
Длина массива результатов по-прежнему `3`. Она постоянна. А вот для скобочной группы <code class="pattern">(z)?</code> в ней ничего нет.

2
10-regular-expressions-javascript/index.md
View file

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

34
12-extra/10-cookie/article.md
View file

@ -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 );
document.cookie="name=value; path=/; expires="+date.toUTCString();
var date = new Date(new Date().getTime() + 60 * 1000);
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).

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

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

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

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

24
12-extra/11-intl/article.md
View file

@ -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" ,
minute: "numeric" ,
hour: "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

26
12-extra/12-regexp-specials/article.md
View file

@ -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) {
alert("Найдено " + res[0] + ": ("+ res[1]+") и ("+res[2]+")")
alert("Дальше ищу с позиции "+re.lastIndex)
while ((res = re.exec(str)) != null) {
alert("Найдено " + res[0] + ": (" + res[1] + ") и (" + res[2] + ")")
alert("Дальше ищу с позиции " + re.lastIndex)
}
```

6
12-extra/3-templates/article.md
View file

@ -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>

2
12-extra/4-books/article.md
View file

@ -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

1
12-extra/5-setImmediate/article.md
View file

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

83
12-extra/8-range-textrange-selection/article.md
View file

@ -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 ( document.createRange ) {
if (~content.indexOf(text)) {
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) {
alert(range);
alert(range.startContainer.nodeValue);
alert(range.startOffset);
alert(range.endOffset);
if (range) {
alert( range );
alert( range.startContainer.nodeValue );
alert( range.startOffset );
alert( range.endOffset );
} else {
alert('Ничего не выделено');
alert( 'Ничего не выделено' );
}
}
}
```
В действии:

4
2-ui/1-document/1-browser-environment/article.md
View file

@ -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), хотя различные браузеры и предоставляют зачастую что-то своё, в дополнение к стандарту.

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

@ -57,21 +57,21 @@ var result = nodeA.compareDocumentPosition(nodeB);
</ul>
<script>
var p = document.body.children[0];
var ul = document.body.children[1];
var li = ul.children[0];
var p = document.body.children[0];
var ul = document.body.children[1];
var li = ul.children[0];
// 1. <ul> находится после <p>
alert( ul.compareDocumentPosition( p ) ); // 2 = 10
// 1. <ul> находится после <p>
alert( ul.compareDocumentPosition(p) ); // 2 = 10
// 2. <p> находится до <ul>
alert( p.compareDocumentPosition( ul ) ); // 4 = 100
// 2. <p> находится до <ul>
alert( p.compareDocumentPosition(ul) ); // 4 = 100
// 3. <ul> родитель <li>
alert( ul.compareDocumentPosition( li ) ); // 20 = 10100
// 3. <ul> родитель <li>
alert( ul.compareDocumentPosition(li) ); // 20 = 10100
// 4. <ul> потомок <body>
alert( ul.compareDocumentPosition( document.body ) ); // 10 = 1010
// 4. <ul> потомок <body>
alert( ul.compareDocumentPosition(document.body) ); // 10 = 1010
</script>
```
@ -111,13 +111,13 @@ alert( 20..toString(2) );
</ul>
<script>
var body = document.body;
var li = document.body.children[0].children[0];
var body = document.body;
var li = document.body.children[0].children[0];
*!*
if( body.compareDocumentPosition(li) & 16 ) {
alert( body +' содержит ' + li );
}
if (body.compareDocumentPosition(li) & 16) {
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)
: 1
(this.sourceIndex > other.sourceIndex && 2) : 1
) + 0;
}
}

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

@ -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;
}
```

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

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

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

@ -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) {
while(elem.firstChild) {
} catch (e) {
while (elem.firstChild) {
elem.removeChild(elem.firstChild);
}
}

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

@ -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>

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

@ -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>
```

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

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

14
2-ui/1-document/11-modifying-document/article.md
View file

@ -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>
```

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

@ -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 li5 = ul.children[2];
var ul = document.body.children[0];
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>
```

22
2-ui/1-document/13-document-write/article.md
View file

@ -13,11 +13,11 @@ HTML-документ ниже будет содержать `1 2 3`.
```html
<!--+ run -->
<body>
1
<script>
1
<script>
document.write(2);
</script>
3
</script>
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>`.

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

@ -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.color); // выведет цвет
alert( computedStyle.marginTop ); // выведет отступ в пикселях
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
2-ui/1-document/15-metrics/3-div-placeholder/task.md
View file

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

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

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

3
2-ui/1-document/15-metrics/article.md
View file

@ -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;
}
```

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

@ -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.pageXOffset);
alert( 'Текущая прокрутка сверху: ' + window.pageYOffset );
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>

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

@ -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
]
```

19
2-ui/1-document/18-coordinates-document/article.md
View file

@ -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>

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

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

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

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

38
2-ui/1-document/2-dom-nodes/article.md
View file

@ -13,15 +13,15 @@ DOM -- это представление документа в виде дере
Построим, для начала, дерево DOM для следующего документа.
```html
<!--+ run -->
<!--+ run no-beautify -->
<!DOCTYPE HTML>
<html>
<head>
<head>
<title>О лосях</title>
</head>
<body>
</head>
<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>
<body>
</head>
<body>
Правда о лосях
</body>
</body>
</html>
```

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

@ -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>
```

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

@ -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) { ... }

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

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

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

@ -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>
<body>
</head>
<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) {
alert(key); // 0, 1, 2, length, item
for (var key in elems) {
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
2-ui/1-document/5-searching-elements-dom/2-tree/solution.md
View file

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

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

@ -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');
alert( articles.length ); // 2, найдёт оба элемента
var articles = document.getElementsByClassName('article');
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++) {
alert(elements[i].innerHTML ); // "тест", "пройден"
for (var i = 0; i < elements.length; i++) {
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
var result = document.evaluate("//h2[contains(., 'XPath')]", document.documentElement, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
//+ run no-beautify
var result = document.evaluate("//h2[contains(., 'XPath')]", document.documentElement, null,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i=0; i<result.snapshotLength; i++) {
alert(result.snapshotItem(i).outerHTML);
for (var i = 0; i < result.snapshotLength; i++) {
alert( result.snapshotItem(i).outerHTML );
}
```

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

@ -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>
```

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

@ -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
2-ui/1-document/6-searching-elements-internals/2-compare-elements-count/task.md
View file

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

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

@ -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;
}
```

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

@ -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>
```

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

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

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

@ -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>
```

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

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

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

@ -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>
```

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

@ -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>
```

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

@ -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.tagName); // undefined (в IE8- воскл. знак "!")
alert( document.body.firstChild.nodeName ); // #comment
alert( document.body.firstChild.tagName ); // undefined (в IE8- воскл. знак "!")
// для документа
alert(document.nodeName); // #document, т.к. корень DOM -- не элемент
alert(document.tagName); // undefined
</script>
alert( document.nodeName ); // #document, т.к. корень DOM -- не элемент
alert( document.tagName ); // undefined
</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.id); // "input"
alert(input.value); // значение
alert( input.type ); // "text"
alert( input.id ); // "input"
alert( input.value ); // значение
</script>
```

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

@ -14,8 +14,7 @@
set: function(value) {
this.innerText = value;
}
}
);
});
}
})();

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

@ -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[1].type); // text, не поддерживается
alert( document.body.children[0].type ); // radio, поддерживается
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]

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

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

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

@ -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');
}
```

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

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

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

@ -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++) {
alert(attrs[i].name + " = " + attrs[i].value);
for (var i = 0; i < attrs.length; i++) {
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++) { // перечислить классы
alert(classList[i]); // main, затем post
for (var i = 0; i < classList.length; i++) { // перечислить классы
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
2-ui/2-events-and-interfaces/1-introduction-browser-events/2-hide-self-onclick/solution.md
View file

@ -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
2-ui/2-events-and-interfaces/1-introduction-browser-events/3-which-handlers-run/solution.md
View file

@ -6,7 +6,7 @@
```js
function handler() {
alert("1");
alert( "1" );
}
button.addEventListener("click", handler);

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

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

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

@ -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 {
padding-left: 16px;
font-size: 18px;
cursor: pointer;
background: url(...arrow-right.png) left center no-repeat;
.menu .title::before {
content: '▶ ';
font-size: 80%;
color: green;
}
```
Если же меню раскрыто, то есть имеет класс `.menu-open`, то стрелочка слева заголовка меняется и список детей показывается:
```css
.menu-open .title {
background: url(...arrow-down.png) left center no-repeat;
.menu.open .title::before {
content: '▼ ';
}
.menu-open ul {
.menu.open ul {
display: block;
}
```
Теперь сделайте JavaScript.
Для JavaScript остался минимум работы -- только добавить/удалить класс при клике.

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

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

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

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

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

@ -106,12 +106,12 @@
Пример установки обработчика `click`:
```html
<input id="elem" type="button" value="Нажми меня"/>
<input id="elem" type="button" value="Нажми меня" />
<script>
*!*
elem.onclick = function() {
alert('Спасибо');
};
elem.onclick = function() {
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() {
alert('Клик!');
};
button.onclick = function() {
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() { // перезапишет существующий обработчик
alert('После'); // выведется только это
};
elem.onclick = function() { // перезапишет существующий обработчик
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"); // сработает по окончании анимации
}, false);
alert( "addEventListener" ); // сработает по окончании анимации
});
*/!*
</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.detachEvent( "onclick", handler) // Удаление обработчика
button.attachEvent("onclick", handler) // Назначение обработчика
// ....
button.detachEvent("onclick", handler) // Удаление обработчика
```
Как видите, почти то же самое, только событие должно включать префикс `on`.

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

@ -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 ';

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

@ -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
2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/messages.css
View file

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

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

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

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

@ -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>
```

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

@ -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) {
this.save = function() { alert('сохраняю'); };
this.load = function() { alert('загружаю'); };
this.search = function() { alert('ищу'); };
function Menu(elem) {
this.save = 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
2-ui/2-events-and-interfaces/7-default-browser-action/1-why-return-false-fails/task.md
View file

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

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

@ -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')); // (*)

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

@ -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;
*!*

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

@ -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);
...

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

@ -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) ) {
alert('Событие было отменено');
if (!elem.fireEvent("onclick", event)) {
alert( 'Событие было отменено' );
}
*/!*
</script>

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

@ -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;

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

@ -33,8 +33,8 @@ document.addEventListener("DOMContentLoaded", ready);
<!--+ run height=150 -->
<script>
function ready() {
alert('DOM готов');
alert("Размеры картинки: " + img.offsetWidth + "x" + img.offsetHeight);
alert( 'DOM готов' );
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>

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

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

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

@ -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 };

14
2-ui/3-event-details/2-unselectable/article.md
View file

@ -98,11 +98,15 @@
```html
<!--+ autorun height=auto -->
<style>
b {
-webkit-user-select: none; /* user-select -- это нестандартное свойство */
-moz-user-select: none; /* поэтому нужны префиксы */
b {
-webkit-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">
Уважаемый копирователь,
почему-то автор хочет заставить вас покопаться в исходном коде этой страницы.

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

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

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

@ -103,8 +103,8 @@ document.onmousedown = function(e) {
document.onmousemove = function(e) {
if (!dragObject.elem) return; // элемент не зажат
if ( !dragObject.avatar ) { // элемент нажат, но пока не начали его двигать
... начать перенос, присвоить dragObject.avatar = переносимый элемент
if (!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) {
// скрыть/удалить переносимый объект

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

@ -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) {

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

@ -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;

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

@ -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
2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md
View file

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

Some files were not shown because too many files have changed in this diff Show more