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

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

49
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,18 +139,17 @@ if( body.compareDocumentPosition(li) & 16 ) {
```js
// код с http://compatibility.shwups-cms.ch/en/polyfills/?&id=82
(function(){
(function() {
var el = document.documentElement;
if( !el.compareDocumentPosition && el.sourceIndex !== undefined ){
if (!el.compareDocumentPosition && el.sourceIndex !== undefined) {
Element.prototype.compareDocumentPosition = function(other){
Element.prototype.compareDocumentPosition = function(other) {
return (this != other && this.contains(other) && 16) +
(this != other && other.contains(this) && 8) +
(this.sourceIndex >= 0 && other.sourceIndex >= 0 ?
(this.sourceIndex < other.sourceIndex && 4) +
(this.sourceIndex > other.sourceIndex && 2)
: 1
) + 0;
(this != other && other.contains(this) && 8) +
(this.sourceIndex >= 0 && other.sourceIndex >= 0 ?
(this.sourceIndex < other.sourceIndex && 4) +
(this.sourceIndex > other.sourceIndex && 2) : 1
) + 0;
}
}
}());

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16
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>
@ -321,12 +321,12 @@ div.parentNode.insertBefore( div2, div.nextSibling );
var div = document.createElement('div');
div.className = "alert alert-success";
document.body.appendChild(div);
*!*
var text = prompt("Введите текст для сообщения", "Жили были <a> и <b>!");
// вставится именно как текст, без HTML-обработки
div.appendChild( document.createTextNode(text) );
div.appendChild(document.createTextNode(text));
*/!*
</script>
```

37
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, но в него они добавляются тем же полифиллом:
@ -181,7 +182,7 @@ for (цикл по li) {
fragment.appendChild(list[i]); // вставить каждый LI в DocumentFragment
}
ul.appendChild(fragment); // вместо фрагмента вставятся элементы списка
ul.appendChild(fragment); // вместо фрагмента вставятся элементы списка
```
В современных браузерах эффект от такой оптимизации может быть различным, а на небольших документах иногда и отрицательным.
@ -211,28 +212,30 @@ ul.appendChild(fragment); // вместо фрагмента вставятс
```html
<!--+ run autorun height=80 -->
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.mutation"></script>
</head>
<body>
<script>
// добавим элемент в конец <body>
var p = document.createElement('p');
document.body.append(p);
<script>
// добавим элемент в конец <body>
var p = document.createElement('p');
document.body.append(p);
var em = document.createElement('em');
em.append('Мир!');
var em = document.createElement('em');
em.append('Мир!');
// вставить в параграф текстовый и обычный узлы
p.append("Привет, ", em);
// вставить в параграф текстовый и обычный узлы
p.append("Привет, ", em);
// добавить элемент после <p>
p.after(document.createElement('hr'))
</script>
// добавить элемент после <p>
p.after(document.createElement('hr'))
</script>
</body>
</html>
```

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

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

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

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

29
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
@ -73,15 +74,15 @@ setTimeout(function() {
```html
<!--+ run height=100 -->
<body>
<script>
<script>
*!*
document.body.style.margin = '20px';
alert(document.body.style.marginTop); // 20px!
alert( document.body.style.marginTop ); // 20px!
*/!*
*!*
document.body.style.color = '#abc';
alert(document.body.style.color); // rgb(170, 187, 204)
alert( document.body.style.color ); // rgb(170, 187, 204)
*/!*
</script>
</body>
@ -146,7 +147,7 @@ setTimeout(function() {
Вот так `style` уже ничего не увидит:
```html
<!--+ run height=100 -->
<!--+ run height=100 no-beautify -->
<head>
<style> body { color: red; margin: 5px } </style>
</head>
@ -190,14 +191,17 @@ getComputedStyle(element[, pseudo])
```html
<!--+ run height=100 -->
<style>
body { margin: 10px }
body {
margin: 10px
}
</style>
<body>
<script>
<script>
var computedStyle = getComputedStyle(document.body);
alert(computedStyle.marginTop); // выведет отступ в пикселях
alert(computedStyle.color); // выведет цвет
alert( computedStyle.marginTop ); // выведет отступ в пикселях
alert( computedStyle.color ); // выведет цвет
</script>
</body>
@ -264,10 +268,13 @@ function getStyle(elem) {
```html
<!--+ run height=100 -->
<style>
body { margin: 10% }
body {
margin: 10%
}
</style>
<body>
<script>
<script>
var elem = document.body;
function getStyle(elem) {
@ -275,7 +282,7 @@ function getStyle(elem) {
}
var marginTop = getStyle(elem).marginTop;
alert(marginTop); // IE8-: 10%, иначе пиксели
alert( marginTop ); // IE8-: 10%, иначе пиксели
</script>
</body>
```

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

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

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

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

2
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';
```
**Внимание, подводный камень!**

5
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;
}
```
@ -265,7 +266,7 @@ alert( getComputedStyle(elem).width ); // вывести CSS-ширину для
<script>
*!*
alert( getComputedStyle(elem).width ); // auto
alert( getComputedStyle(elem).width ); // auto
*/!*
</script>
```

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>

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

@ -25,8 +25,8 @@ var coords3 = [coords.left + field.clientLeft, coords.top + field.clientTop];
```js
var coords4 = [
coords.right - parseInt(getComputedStyle(field).borderRightWidth) ,
coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
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
]
```

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

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

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

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

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

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

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

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

39
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++) {
var input = elements[i];
alert(input.value + ': ' + input.checked);
for (var i = 0; i < elements.length; i++) {
var input = elements[i];
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 );
}
```

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

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

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

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

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

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

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

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

@ -45,16 +45,16 @@ alert( document.body ); // [object HTMLBodyElement]
Вот из него выдержка:
```js
interface HTMLInputElement : HTMLElement {
attribute DOMString accept;
interface HTMLInputElement: HTMLElement {
attribute DOMString accept;
attribute DOMString alt;
attribute DOMString autocomplete;
attribute boolean autofocus;
...
attribute DOMString value;
...
void select();
...
void select();
...
}
```
@ -84,18 +84,18 @@ interface HTMLInputElement : HTMLElement {
```js
interface Node {
// NodeType
const unsigned short ELEMENT_NODE = 1;
const unsigned short ATTRIBUTE_NODE = 2;
const unsigned short TEXT_NODE = 3;
const unsigned short CDATA_SECTION_NODE = 4;
const unsigned short ENTITY_REFERENCE_NODE = 5;
const unsigned short ENTITY_NODE = 6;
const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short COMMENT_NODE = 8;
const unsigned short DOCUMENT_NODE = 9;
const unsigned short DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12;
const unsigned short ELEMENT_NODE = 1;
const unsigned short ATTRIBUTE_NODE = 2;
const unsigned short TEXT_NODE = 3;
const unsigned short CDATA_SECTION_NODE = 4;
const unsigned short ENTITY_REFERENCE_NODE = 5;
const unsigned short ENTITY_NODE = 6;
const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short COMMENT_NODE = 8;
const unsigned short DOCUMENT_NODE = 9;
const unsigned short DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12;
...
}
```
@ -112,20 +112,20 @@ interface Node {
<li>Вася</li>
<li>Петя</li>
</ul>
<!-- комментарий -->
<script>
<script>
var childNodes = document.body.childNodes;
for (var i=0; i<childNodes.length; i++) {
for (var i = 0; i < childNodes.length; i++) {
*!*
// отфильтровать не-элементы
if (childNodes[i].nodeType != 1) continue;
*/!*
alert(childNodes[i]);
alert( childNodes[i] );
}
</script>
@ -145,8 +145,8 @@ interface Node {
```js
//+ run
alert( document.body.nodeName ); // BODY
alert( document.body.tagName ); // BODY
alert( document.body.nodeName ); // BODY
alert( document.body.tagName ); // BODY
```
[smart header="В XHTML `nodeName` может быть не в верхнем регистре"]
@ -172,17 +172,18 @@ XML-режим включается, когда браузер получает
```html
<!--+ run -->
<body><!-- комментарий -->
<body>
<!-- комментарий -->
<script>
// для комментария
alert(document.body.firstChild.nodeName); // #comment
alert(document.body.firstChild.tagName); // undefined (в IE8- воскл. знак "!")
<script>
// для комментария
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>
```

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

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

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

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

18
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;
}
@ -80,7 +80,7 @@ var div = document.createElement('div');
var input = document.createElement('input');
alert( input.value ); // пустая строка, поддержка есть
alert( div.value ); // undefined, поддержки нет
alert( div.value ); // undefined, поддержки нет
```
[smart header="Поддержка значений свойств"]
@ -98,8 +98,8 @@ alert( div.value ); // undefined, поддержки нет
<input type="no-such-type">
<script>
alert(document.body.children[0].type); // radio, поддерживается
alert(document.body.children[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]
@ -146,7 +146,7 @@ document.body.sayHi(); // Привет от [object HTMLBodyElement]
```js
//+ run
Object.defineProperty(Element.prototype, 'lowerTag', {
Object.defineProperty(Element.prototype, 'lowerTag', {
get: function() {
return this.tagName.toLowerCase();
}

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

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

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

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

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

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

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

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

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

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

2
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="Нажми, чтобы меня спрятать" />
```

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

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

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

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

9
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 ';
@ -156,10 +155,10 @@
text.focus(); // сработает после onclick
}, 0);
*/!*
text.value += ' из onclick-> ';
};
text.onfocus = function() {
text.value += ' !focus! ';
};

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

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

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

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

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

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

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

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

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

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

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>

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

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

6
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,11 +34,11 @@ function showThumbnail(href, title) {
```js
var imgs = thumbs.getElementsByTagName('img');
for(var i=0; i<imgs.length; i++) {
for (var i = 0; i < imgs.length; i++) {
var url = imgs[i].parentNode.href;
*!*
var img = document.createElement('img');
var img = document.createElement('img');
img.src = url;
*/!*
}

7
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
@ -127,7 +127,7 @@ menu.onclick = function(event) {
element.onclick = function(event) {
event = event || window.event;
if (event.preventDefault) { // если метод существует
if (event.preventDefault) { // если метод существует
event.preventDefault(); // то вызвать его
} else { // иначе вариант IE8-:
event.returnValue = false;
@ -138,6 +138,7 @@ element.onclick = function(event) {
Можно записать в одну строку:
```js
//+ no-beautify
...
event.preventDefault ? event.preventDefault() : (event.returnValue=false);
...

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

12
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>
```
@ -230,7 +230,7 @@
```js
function fixWhich(e) {
if (!e.which && e.button) { // если which нет, но есть button... (IE8-)
if (e.button & 1) e.which = 1; // левая кнопка
if (e.button & 1) e.which = 1; // левая кнопка
else if (e.button & 4) e.which = 2; // средняя кнопка
else if (e.button & 2) e.which = 3; // правая кнопка
}
@ -247,13 +247,13 @@ 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;
e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
e.pageX -= html.clientLeft || 0;
e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
e.pageY -= html.clientTop || 0;
}

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

@ -33,14 +33,14 @@ 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 );
}
*!*
document.addEventListener("DOMContentLoaded", ready);
*/!*
</script>
</script>
<img id="img" src="https://js.cx/clipart/yozhik.jpg?speed=1">
```
@ -69,7 +69,7 @@ document.addEventListener("DOMContentLoaded", ready);
```html
<link type="text/css" rel="stylesheet" href="style.css">
<script>
<script>
// сработает после загрузки style.css
</script>
```
@ -99,7 +99,7 @@ Firefox/Chrome/Opera автозаполняют формы по `DOMContentLoade
<script>
*!*
window.onload = function() {
alert('Документ и все ресурсы загружены');
alert( 'Документ и все ресурсы загружены' );
};
*/!*
</script>
@ -144,9 +144,9 @@ Firefox игнорирует текст, а всегда показывает с
```html
<body>
...
<script>
init();
</script>
<script>
init();
</script>
</body>
```
@ -166,7 +166,7 @@ Firefox игнорирует текст, а всегда показывает с
<script>
*!*
$(function() {
alert("DOMContentLoaded");
alert( "DOMContentLoaded" );
});
*/!*
</script>

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

@ -11,7 +11,7 @@
```js
// go.js содержит функцию go()
addScript("go.js", function() {
go();
go();
});
```

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 */
```

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

@ -39,9 +39,9 @@ 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 };

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

2
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
View file

@ -24,7 +24,7 @@ tooltip.innerHTML = "Подсказка";
// при "наведении на элемент" показать подсказку
new HoverIntent({
elem: elem,
elem: elem,
over: function() {
tooltip.style.left = this.getBoundingClientRect().left + 'px';
tooltip.style.top = this.getBoundingClientRect().bottom + 5 + 'px';

4
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
View file

@ -161,12 +161,12 @@
```js
table.onmouseover = function(event) {
var target = event.target;
var target = event.target;
target.style.background = 'pink';
};
table.onmouseout = function(event) {
var target = event.target;
var target = event.target;
target.style.background = '';
};
```

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

@ -38,19 +38,19 @@ ball.onmousedown = function(e) { // 1. отследить нажатие*!*
// подготовить к перемещению
// 2. разместить на том же месте, но в абсолютных координатах*!*
ball.style.position = 'absolute';
ball.style.position = 'absolute';
moveAt(e);
// переместим в body, чтобы мяч был точно не внутри position:relative
document.body.appendChild(ball);
document.body.appendChild(ball);
ball.style.zIndex = 1000; // показывать мяч над другими элементами
// передвинуть мяч под координаты курсора
// и сдвинуть на половину ширины/высоты для центрирования
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, перемещать по экрану*!*
document.onmousemove = function(e) {
@ -78,8 +78,8 @@ ball.onmousedown = function(e) { // 1. отследить нажатие*!*
Его нужно отключить:
```js
ball.ondragstart = function() {
return false;
ball.ondragstart = function() {
return false;
};
```
@ -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`, то мячик прилипнет верхним-левым углом к курсору мыши. Будет некрасиво. Поэтому мы сдвигаем его на половину высоты/ширины, чтобы был центром под мышью. Уже лучше.

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

@ -60,7 +60,7 @@
Код обработчика `mousedown`:
```js
var dragObject = {};
var dragObject = {};
document.onmousedown = function(e) {
@ -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 = переносимый элемент
}
...отобразить перенос элемента...
@ -131,7 +131,7 @@ document.onmousemove = function(e) {
```js
// в начале переноса:
if (avatar.parentNode != document.body) {
if (avatar.parentNode != document.body) {
document.body.appendChild(avatar); // переместить в BODY, если надо
}
avatar.style.zIndex = 9999; // сделать, чтобы элемент был над другими
@ -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) {

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

@ -18,7 +18,7 @@
elem.onclick = function(event) {
*!*
// если IE8-, то получить объект события window.event и исправить его
event = event || fixEvent.call(this, window.event);
event = event || fixEvent.call(this, window.event);
*/!*
...
}
@ -40,11 +40,11 @@ function fixEvent(e) {
e.currentTarget = this;
e.target = e.srcElement;
if (e.type == 'mouseover' || e.type == 'mouseenter') e.relatedTarget = e.fromElement;
if (e.type == 'mouseout' || e.type == 'mouseleave') e.relatedTarget = e.toElement;
if (e.pageX == null && e.clientX != null ) {
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);

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

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

2
2-ui/3-event-details/8-onscroll/article.md
View file

@ -9,7 +9,7 @@
```js
//+ autorun
window.onscroll = function() {
window.onscroll = function() {
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
document.getElementById('showScroll').innerHTML = scrolled + 'px';
}

6
2-ui/3-event-details/9-keyboard-events/1-numeric-input/solution.md
View file

@ -17,8 +17,8 @@
```js
input.onkeypress = function(e) {
e = e || event;
if (e.ctrlKey || e.altKey || e.metaKey) return;
if (e.ctrlKey || e.altKey || e.metaKey) return;
var chr = getChar(e);
@ -26,7 +26,7 @@ input.onkeypress = function(e) {
// т.к. например null >= '0' => true
// на всякий случай лучше вынести проверку chr == null отдельно
if (chr == null) return;
if (chr < '0' || chr > '9') {
return false;
}

1
2-ui/3-event-details/9-keyboard-events/2-check-sync-keydown/task.md
View file

@ -7,6 +7,7 @@
Например, код ниже выведет `alert` при одновременном нажатии клавиш `"Q"` и `"W"` (в любом регистре, в любой раскладке)
```js
//+ no-beautify
runOnKeys(
function() { alert("Привет!") },
"Q".charCodeAt(0),

32
2-ui/3-event-details/9-keyboard-events/article.md
View file

@ -79,15 +79,15 @@
//+ autorun
// event.type должен быть keypress
function getChar(event) {
if (event.which == null) { // IE
if (event.which == null) { // IE
if (event.keyCode < 32) return null; // спец. символ
return String.fromCharCode(event.keyCode)
}
return String.fromCharCode(event.keyCode)
}
if (event.which!=0 && event.charCode!=0) { // все кроме IE
if (event.which != 0 && event.charCode != 0) { // все кроме IE
if (event.which < 32) return null; // спец. символ
return String.fromCharCode(event.which); // остальные
}
}
return null; // спец. символ
}
@ -179,18 +179,18 @@ function getChar(event) {
```html
<input id="only-upper" type="text" size="2">
<script>
document.getElementById('only-upper').onkeypress = function(e) {
// спец. сочетание - не обрабатываем
if (e.ctrlKey || e.altKey || e.metaKey) return;
var char = getChar(e);
document.getElementById('only-upper').onkeypress = function(e) {
// спец. сочетание - не обрабатываем
if (e.ctrlKey || e.altKey || e.metaKey) return;
if (!char) return; // спец. символ - не обрабатываем
this.value = char.toUpperCase();
return false;
};
var char = getChar(e);
if (!char) return; // спец. символ - не обрабатываем
this.value = char.toUpperCase();
return false;
};
</script>
```

4
2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md
View file

@ -12,12 +12,12 @@
// 1)
var selectedOption = select.options[select.selectedIndex];
alert(selectedOption.value);
alert( selectedOption.value );
// 2)
var newOption = new Option("Classic", "Классика");
select.appendChild(newOption);
// 3)
newOption.selected = true;
</script>

90
2-ui/4-forms-controls/1-form-elements/article.md
View file

@ -11,6 +11,7 @@
Например:
```js
//+ no-beautify
document.forms.my -- форма с именем 'my'
document.forms[0] -- первая форма в документе
```
@ -24,18 +25,18 @@ document.forms[0] -- первая форма в документе
```html
<!--+ run height=40 -->
<body>
<form name="my">
<input name="one" value="1">
<input name="two" value="2">
</form>
<form name="my">
<input name="one" value="1">
<input name="two" value="2">
</form>
<script>
var form = document.forms.my; // можно document.forms[0]
<script>
var form = document.forms.my; // можно document.forms[0]
var elem = form.elements.one; // можно form.elements[0]
var elem = form.elements.one; // можно form.elements[0]
alert(elem.value); // "один"
</script>
alert( elem.value ); // "один"
</script>
</body>
```
@ -67,24 +68,25 @@ alert(elems[0].value); // 10, первый input
```html
<!--+ run height=80 -->
<body>
<form>
<fieldset name="set"><legend>fieldset</legend>
<form>
<fieldset name="set">
<legend>fieldset</legend>
<input name="text" type="text">
</fieldset>
</form>
</fieldset>
</form>
<script>
var form = document.forms[0];
<script>
var form = document.forms[0];
alert( form.elements.text ); // INPUT
alert( form.elements.text ); // INPUT
*!*
alert( form.elements.set.elements.text ); // INPUT
alert( form.elements.set.elements.text ); // INPUT
*/!*
</script>
</script>
</body>
```
Спецификация: [HTML5 Forms](http://www.w3.org/TR/html5/forms.html).
Спецификация: [HTML5 Forms](https://html.spec.whatwg.org/multipage/forms.html).
[warn header="Доступ `form.name` тоже работает, но с особенностями"]
Получить доступ к элементам формы можно не только через `form.elements[name/index]`, но и проще: `form[index/name]`.
@ -95,19 +97,21 @@ alert( form.elements.set.elements.text ); // INPUT
```html
<!--+ run height=40 -->
<form name="myform"> <input name="text"> </form>
<form name="myform">
<input name="text">
</form>
<script>
var form = document.forms.myform;
var form = document.forms.myform;
alert(form.elements.text == form.text); // true, это тот самый INPUT
alert( form.elements.text == form.text ); // true, это тот самый INPUT
form.text.name = "new-name"; // меняем name ему
form.text.name = "new-name"; // меняем name ему
// нет больше элемента с таким именем
alert(form.elements.text); // undefined
// нет больше элемента с таким именем
alert( form.elements.text ); // undefined
alert(form.text); // INPUT (а должно быть undefined!)
alert( form.text ); // INPUT (а должно быть undefined!)
</script>
```
@ -138,7 +142,7 @@ alert(elem.form == form); // true
</body>
```
Познакомиться с другими свойствами элементов можно в спецификации [HTML5 Forms](http://www.w3.org/TR/html5/forms.html).
Познакомиться с другими свойствами элементов можно в спецификации [HTML5 Forms](https://html.spec.whatwg.org/multipage/forms.html).
## Элемент label
@ -157,12 +161,20 @@ alert(elem.form == form); // true
<!--+ autorun -->
<table>
<tr>
<td><label for="agree">Согласен с правилами</label></td>
<td><input id="agree" type="checkbox"></td>
<td>
<label for="agree">Согласен с правилами</label>
</td>
<td>
<input id="agree" type="checkbox">
</td>
</tr>
<tr>
<td><label for="not-a-robot">Я не робот</label></td>
<td><input id="not-a-robot" type="checkbox"></td>
<td>
<label for="not-a-robot">Я не робот</label>
</td>
<td>
<input id="not-a-robot" type="checkbox">
</td>
</tr>
</table>
```
@ -171,7 +183,7 @@ alert(elem.form == form); // true
<li>Завернуть элемент в `label`. В этом случае можно обойтись без дополнительных атрибутов:
```html
<!--+ autorun -->
<!--+ autorun no-beautify -->
<label>Кликни меня <input type="checkbox"></label>
```
@ -196,8 +208,8 @@ textarea.value = "Новый текст";
**Текущее "отмеченное" состояние для `checkbox` и `radio` находится в свойстве `checked` (`true/false`).**
```js
if (input.checked) {
alert("Чекбокс выбран");
if (input.checked) {
alert( "Чекбокс выбран" );
}
```
@ -242,13 +254,13 @@ for (var i=0; i<select.options.length; i++) {
</script>
```
Спецификация: <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980">HTMLSelectElement</a>.
Спецификация: [the select element](https://html.spec.whatwg.org/multipage/forms.html#the-select-element).
[smart header="`new Option`"]
В стандарте [the Option Element](http://dev.w3.org/html5/spec/the-option-element.html#the-option-element) есть любопытный короткий синтаксис для создания элемента с тегом `option`:
В стандарте [the option element](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) есть любопытный короткий синтаксис для создания элемента с тегом `option`:
```js
option = new Option( text, value, defaultSelected, selected);
option = new Option(text, value, defaultSelected, selected);
```
Параметры:
@ -261,7 +273,7 @@ option = new Option( text, value, defaultSelected, selected);
Его можно использовать вместо `document.createElement('option')`, например:
```js
var option = new Option("Текст", "value");
var option = new Option("Текст", "value");
// создаст <option value="value">Текст</option>
```
@ -275,7 +287,7 @@ var option = new Option("Текст", "value", true, true);
[smart header="Дополнительные свойства `option`"]
У элементов `option` также есть особые свойства, которые могут оказаться полезными (см. [The Option Element](http://dev.w3.org/html5/spec/the-option-element.html#the-option-element)):
У элементов `option` также есть особые свойства, которые могут оказаться полезными (см. [the option element](https://html.spec.whatwg.org/multipage/forms.html#the-option-element)):
<dl>
<dt>`selected`</dt>

34
2-ui/4-forms-controls/2-focus-blur/3-hotkeys/solution.md
View file

@ -5,7 +5,8 @@
Так как мы преобразуем `<div>` в `<textarea>` и обратно, нам нужно сделать их практически одинаковыми с виду:
```css
#view, #area {
#view,
#area {
height: 150px;
width: 400px;
font-family: arial;
@ -18,10 +19,11 @@
Для того, чтобы сделать размер `#area` таким же, как и `#view`, добавим поля(padding):
```css
#view {
#view {
/* padding + border = 3px */
padding: 2px;
border:1px solid black;
padding: 2px;
border: 1px solid black;
}
```
@ -29,16 +31,16 @@ CSS для `#area` заменяет поля границами:
```css
#area {
border: 3px groove blue;
border: 3px groove blue;
padding: 0px;
display:none;
display: none;
}
```
По умолчанию, текстовое поле скрыто. Кстати, этот код убирает дополнительную рамку в ряде браузеров, которая появляется вокруг поля, когда на него попадает фокус:
```css
/*+ no-beautify */
#area:focus {
outline: none; /* убирает рамку при фокусе */
}
@ -77,21 +79,21 @@ document.onkeydown = function(e) {
```js
function edit() {
view.style.display = 'none';
area.value = view.innerHTML;
area.style.display = 'block';
area.focus();
view.style.display = 'none';
area.value = view.innerHTML;
area.style.display = 'block';
area.focus();
}
function save() {
area.style.display = 'none';
view.innerHTML = area.value;
view.style.display = 'block';
area.style.display = 'none';
view.innerHTML = area.value;
view.style.display = 'block';
}
function cancel() {
area.style.display = 'none';
view.style.display = 'block';
area.style.display = 'none';
view.style.display = 'block';
}
```

18
2-ui/4-forms-controls/2-focus-blur/7-capslock-warning-field/solution.md
View file

@ -46,8 +46,8 @@ document.onkeypress = function(e) {
Например, когда пользователь открыл страницу, мы не знаем, включен ли [key CapsLock]. Затем, мы получаем событие `keydown` для [key CapsLock]. Но мы все равно не знаем его состояния, был ли [key CapsLock] *выключен* или, наоборот, включен.
```js
if (navigator.platform.substr(0,3) != 'Mac') { // событие для CapsLock глючит под Mac
document.onkeydown = function(e) {
if (navigator.platform.substr(0, 3) != 'Mac') { // событие для CapsLock глючит под Mac
document.onkeydown = function(e) {
if (e.keyCode == 20 && capsLockEnabled !== null) {
capsLockEnabled = !capsLockEnabled;
}
@ -73,18 +73,18 @@ if (navigator.platform.substr(0,3) != 'Mac') { // событие для CapsLock
Код проверки поля:
```html
<input type="text" onkeyup="checkCapsWarning(event)" onfocus="checkCapsWarning(event)" onblur="removeCapsWarning()"/>
<input type="text" onkeyup="checkCapsWarning(event)" onfocus="checkCapsWarning(event)" onblur="removeCapsWarning()" />
<div style="display:none;color:red" id="caps">Внимание: нажат CapsLock!</div>
<script>
function checkCapsWarning() {
document.getElementById('caps').style.display = capsLockEnabled ? 'block' : 'none';
}
function checkCapsWarning() {
document.getElementById('caps').style.display = capsLockEnabled ? 'block' : 'none';
}
function removeCapsWarning() {
document.getElementById('caps').style.display = 'none';
}
function removeCapsWarning() {
document.getElementById('caps').style.display = 'none';
}
</script>
```

76
2-ui/4-forms-controls/2-focus-blur/article.md
View file

@ -57,23 +57,32 @@
```html
<!--+ run autorun height=80 -->
<style> .error { background: red; } </style>
<style>
.error {
background: red;
}
</style>
<div>Возраст: <input type="text" id="age"></div>
<div>Имя: <input type="text"></div>
<div>Возраст:
<input type="text" id="age">
</div>
<div>Имя:
<input type="text">
</div>
<script>
age.onblur = function() {
if (isNaN(this.value)) { // введено не число
// показать ошибку
this.classList.add("error");
age.focus();*!*
} else {
this.classList.remove("error");
}
};
age.onblur = function() {
if (isNaN(this.value)) { // введено не число
// показать ошибку
this.classList.add("error");
*!*
age.focus();
*/!*
} else {
this.classList.remove("error");
}
};
</script>
```
@ -117,7 +126,7 @@ age.onblur = function() {
```html
<input type="text" name="search">
<script>
<script>
document.getElementsByName('search')[0].focus();
</script>
```
@ -175,7 +184,7 @@ age.onblur = function() {
В примере ниже есть список элементов. Кликните на любой из них и нажмите "tab".
```html
<!--+ autorun -->
<!--+ autorun no-beautify -->
Кликните на первый элемент списка и нажмите Tab. Внимание! Дальнейшие нажатия Tab могут вывести за границы iframe'а с примером.
<ul>
<li tabindex="1">Один</li>
@ -225,7 +234,11 @@ age.onblur = function() {
<input type="text" name="surname" value="Ваша фамилия">
</form>
<style> .focused { outline: 1px solid red; } </style>
<style>
.focused {
outline: 1px solid red;
}
</style>
<script>
*!*
@ -262,22 +275,29 @@ age.onblur = function() {
<input type="text" name="surname" value="Ваша фамилия">
</form>
<style>
.focused { outline: 1px solid red; }
.focused {
outline: 1px solid red;
}
</style>
<script>
function onFormFocus() { this.className = 'focused'; }
function onFormBlur() { this.className = ''; }
function onFormFocus() {
this.className = 'focused';
}
var form = document.forms.form;
function onFormBlur() {
this.className = '';
}
if (form.addEventListener) {
form.addEventListener('focus', onFormFocus, true);
form.addEventListener('blur', onFormBlur, true);
} else { // IE8-
form.onfocusin = onFormFocus;
form.onfocusout = onFormBlur;
}
var form = document.forms.form;
if (form.addEventListener) {
form.addEventListener('focus', onFormFocus, true);
form.addEventListener('blur', onFormBlur, true);
} else { // IE8-
form.onfocusin = onFormFocus;
form.onfocusout = onFormBlur;
}
</script>
```

91
2-ui/4-forms-controls/3-events-change/article.md
View file

@ -36,11 +36,11 @@
<!--+ autorun height=40 -->
<input type="text"> oninput: <span id="result"></span>
<script>
var input = document.body.children[0];
var input = document.body.children[0];
input.oninput = function() {
document.getElementById('result').innerHTML = input.value;
};
input.oninput = function() {
document.getElementById('result').innerHTML = input.value;
};
</script>
```
@ -58,24 +58,24 @@ input.oninput = function() {
<!--+ autorun height=40 -->
<input type="checkbox"> Чекбокс с "onchange", работающим везде одинаково
<script>
var checkbox = document.body.children[0];
var checkbox = document.body.children[0];
if("onpropertychange" in checkbox) {
// старый IE
if ("onpropertychange" in checkbox) {
// старый IE
*!*
checkbox.onpropertychange = function() {
// проверим имя изменённого свойства
if (event.propertyName == "checked") {
alert(checkbox.checked);
}
};
checkbox.onpropertychange = function() {
// проверим имя изменённого свойства
if (event.propertyName == "checked") {
alert( checkbox.checked );
}
};
*/!*
} else {
// остальные браузеры
checkbox.onchange = function() {
alert(checkbox.checked);
};
}
} else {
// остальные браузеры
checkbox.onchange = function() {
alert( checkbox.checked );
};
}
</script>
```
@ -127,18 +127,17 @@ if("onpropertychange" in checkbox) {
<!--+ autorun run height=60 -->
<input type="text" id="sms"> символов: <span id="result"></span>
<script>
function showCount() {
result.innerHTML = sms.value.length;
}
function showCount() {
result.innerHTML = sms.value.length;
}
sms.onkeyup = sms.oninput = showCount;
sms.onpropertychange = function() {
if (event.propertyName == "value") showCount();
}
sms.oncut = function() {
setTimeout(showCount, 0); // на момент oncut значение еще старое
};
sms.onkeyup = sms.oninput = showCount;
sms.onpropertychange = function() {
if (event.propertyName == "value") showCount();
}
sms.oncut = function() {
setTimeout(showCount, 0); // на момент oncut значение еще старое
};
</script>
```
@ -153,26 +152,26 @@ sms.oncut = function() {
<input type="text" id="sms"> символов: <span id="result"></span>
<script>
var timerId;
var timerId;
sms.onfocus = function() {
sms.onfocus = function() {
var lastValue = sms.value;
timerId = setInterval(function() {
if (sms.value != lastValue) {
showCount();
lastValue = sms.value;
}
}, 20);
};
var lastValue = sms.value;
timerId = setInterval(function() {
if (sms.value != lastValue) {
showCount();
lastValue = sms.value;
}
}, 20);
};
sms.onblur = function() {
clearInterval(timerId);
};
sms.onblur = function() {
clearInterval(timerId);
};
function showCount() {
result.innerHTML = sms.value.length;
}
function showCount() {
result.innerHTML = sms.value.length;
}
</script>
```

2
2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
View file

@ -22,7 +22,7 @@
```js
showPrompt("Введите что-нибудь<br>... умное :)", function(value) {
alert(value);
alert( value );
});
```

2
2-ui/4-forms-controls/4-forms-submit/article.md
View file

@ -18,7 +18,7 @@
Например, в таком HTML оба способа выведут `alert`, форма не будет отправлена:
```html
<!--+ autorun height=80 -->
<!--+ autorun height=80 no-beautify -->
<form onsubmit="alert('submit!');return false">
Первый: Enter в текстовом поле <input type="text" value="Текст"><br>
Второй: Нажать на "Отправить": <input type="submit" value="Отправить">

2
2-ui/5-widgets/2-widgets-structure/1-clock/task.md
View file

@ -12,7 +12,7 @@ var clock = new Clock({
});
clock.start(); // старт
clock.stop(); // стоп
clock.stop(); // стоп
```
Остальные методы, если нужны, должны быть приватными.

2
2-ui/5-widgets/2-widgets-structure/6-voter-add-step/task.md
View file

@ -9,7 +9,7 @@
```js
var voter = new StepVoter({
elem: document.getElementById('voter'),
step: 2 // увеличивать/уменьшать сразу на 2 пункта
step: 2 // увеличивать/уменьшать сразу на 2 пункта
});
```

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