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

beautify html

Browse source
This commit is contained in:
Ilya Kantor 2015-03-09 19:02:13 +03:00
parent ecf1478e7e
commit 5342f628da
354 changed files with 13965 additions and 9486 deletions
Download patch file Download diff file Expand all files Collapse all files

5
1-js/1-getting-started/4-devtools/bug.html
View file

@ -1,16 +1,17 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
На этой странице есть скрипт с ошибкой.
<script>
lalala
</script>
</body>
</html>

3
1-js/2-first-steps/1-hello-world/1-hello-alert/solution.view/index.html
View file

@ -1,8 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
@ -10,4 +12,5 @@
</script>
</body>
</html>

4
1-js/2-first-steps/12-ifelse/2-check-standard/ifelse_task2/index.html
View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html>
<body>
<script>
var value = prompt('Каково "официальное" название JavaScript?', '');
if (value == 'EcmaScript') {
@ -10,9 +10,9 @@
} else {
alert('Не знаете? "EcmaScript"!');
}
</script>
</body>
</html>

4
1-js/2-first-steps/12-ifelse/2-check-standardifelse_task2/index.html
View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html>
<body>
<script>
var value = prompt('Каково "официальное" название JavaScript?', '');
if (value == 'EcmaScript') {
@ -10,9 +10,9 @@
} else {
alert('Не знаете? "EcmaScript"!');
}
</script>
</body>
</html>

5
1-js/2-first-steps/12-ifelse/3-sign/if_sign/index.html
View file

@ -1,12 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var value = prompt('Введите число', 0);
if (value > 0) {
@ -16,8 +17,8 @@
} else {
alert(0);
}
</script>
</body>
</html>

3
1-js/2-first-steps/2-external-script/1-hello-alert-ext/index.html
View file

@ -1,11 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="alert.js"></script>
</body>
</html>

3
1-js/3-writing-js/1-debugging-chrome/debugging.view/index.html
View file

@ -1,8 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="pow.js"></script>
@ -16,4 +18,5 @@
</script>
</body>
</html>

3
1-js/3-writing-js/1-debugging-chrome/error.view/index.html
View file

@ -1,8 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="pow.js"></script>
@ -16,4 +18,5 @@
</script>
</body>
</html>

14
1-js/3-writing-js/4-testing/beforeafter.view/index.html
View file

@ -1,13 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -19,6 +24,9 @@
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

14
1-js/3-writing-js/4-testing/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@ -8,12 +9,16 @@
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -31,6 +36,9 @@
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

14
1-js/3-writing-js/4-testing/pow-1.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@ -8,12 +9,16 @@
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -31,6 +36,9 @@
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

14
1-js/3-writing-js/4-testing/pow-2.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@ -8,12 +9,16 @@
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -31,6 +36,9 @@
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

15
1-js/3-writing-js/4-testing/pow-3.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@ -8,12 +9,16 @@
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -28,7 +33,6 @@
return result;
}
</script>
<!-- в этом скрипте находятся спеки -->
@ -38,6 +42,9 @@
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

15
1-js/3-writing-js/4-testing/pow-4.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@ -8,12 +9,16 @@
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -28,7 +33,6 @@
return result;
}
</script>
<!-- в этом скрипте находятся спеки -->
@ -38,6 +42,9 @@
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

14
1-js/3-writing-js/4-testing/pow-full.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@ -8,12 +9,16 @@
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -39,6 +44,9 @@
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

14
1-js/3-writing-js/4-testing/pow-min.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@ -8,12 +9,16 @@
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -31,6 +36,9 @@
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

14
1-js/3-writing-js/4-testing/pow-nan-assert.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@ -8,12 +9,16 @@
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -35,6 +40,9 @@
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

14
1-js/3-writing-js/4-testing/pow-nan.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@ -8,12 +9,16 @@
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -35,6 +40,9 @@
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

3
1-js/5-functions-closures/5-closures-module/hello-conflict.view/index.html
View file

@ -1,5 +1,6 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script>
@ -7,6 +8,7 @@
</script>
<script src="hello.js"></script>
</head>
<body>
<button>Кнопка</button>
@ -17,4 +19,5 @@
</body>
</html>

3
1-js/5-functions-closures/5-closures-module/hello-module.view/index.html
View file

@ -1,5 +1,6 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script>
@ -7,6 +8,7 @@
</script>
<script src="hello.js"></script>
</head>
<body>
<button>Кнопка</button>
@ -17,4 +19,5 @@
</body>
</html>

14
1-js/7-js-misc/3-setTimeout-setInterval/setInterval-anim.view/index.html
View file

@ -1,9 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> div { height: 18px; margin: 1px; background-color:green; } </style>
<style>
div {
height: 18px;
margin: 1px;
background-color: green;
}
</style>
</head>
<body>
<input type="button" id="start" value="Старт">
@ -38,7 +46,8 @@ startButton.onclick = function() {
}
function animateDiv(divs, i) {
var div = divs[i], speed = div.innerHTML;
var div = divs[i],
speed = div.innerHTML;
timers[i] = setInterval(function() {
div.style.width = (parseInt(div.style.width || 0) + 2) % 400 + 'px'
}, speed);
@ -46,4 +55,5 @@ function animateDiv(divs, i) {
</script>
</body>
</html>

3
1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/solution.view/index.html
View file

@ -1,8 +1,10 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
@ -45,4 +47,5 @@ coffeeMachine.run();
</script>
</body>
</html>

3
1-js/8-oop/5-functional-inheritance/1-coffeemachine-fix-run/source.view/index.html
View file

@ -1,8 +1,10 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
@ -39,4 +41,5 @@ function CoffeeMachine(power) {
</script>
</body>
</html>

3
1-js/8-oop/5-functional-inheritance/2-coffeemachine-disable-stop/solution.view/index.html
View file

@ -1,8 +1,10 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
@ -52,4 +54,5 @@ coffeeMachine.run();
</script>
</body>
</html>

3
1-js/9-prototypes/5-class-inheritance/3-clock-class/solution.view/index.html
View file

@ -1,9 +1,11 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Часики в консоли</title>
<meta charset="utf-8">
</head>
<body>
<script src="clock.js"></script>
@ -15,4 +17,5 @@
</script>
</body>
</html>

3
1-js/9-prototypes/5-class-inheritance/3-clock-class/source.view/index.html
View file

@ -1,9 +1,11 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Часики в консоли</title>
<meta charset="utf-8">
</head>
<body>
<script src="clock.js"></script>
@ -15,4 +17,5 @@
</script>
</body>
</html>

3
1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/solution.view/index.html
View file

@ -1,9 +1,11 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Часики в консоли</title>
<meta charset="utf-8">
</head>
<body>
<script src="clock.js"></script>
@ -20,4 +22,5 @@
</script>
</body>
</html>

4
1-js/9-prototypes/5-class-inheritance/4-clock-class-extended/source.view/index.html
View file

@ -1,9 +1,11 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Часики в консоли</title>
<meta charset="utf-8">
</head>
<body>
<!-- исходные часы, от них нужно унаследовать -->
@ -26,8 +28,8 @@
lowResolutionClock.start();
*/
</script>
</body>
</html>

9
1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/solution.view/index.html
View file

@ -1,13 +1,14 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="menu.js"></script>
<script>
function AnimatingMenu() {
Menu.apply(this, arguments);
}
@ -56,12 +57,8 @@
menu.close();
menu.showState(); // закрыто
}, 1000);
</script>
</body>
</html>

6
1-js/9-prototypes/5-class-inheritance/5-menu-timer-animated/source.view/index.html
View file

@ -1,13 +1,14 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="menu.js"></script>
<script>
var AnimatingMenu = Menu; // замените на ваш код для AnimatingMenu
// использование..
@ -25,9 +26,8 @@
menu.close();
menu.showState(); // закрыто (закрытие без анимации)
}, 1000);
</script>
</body>
</html>

6
12-extra/5-setImmediate/setImmediate.view/index.html
View file

@ -1,17 +1,18 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="setImmediate.js"></script>
</head>
<body>
<button onclick="testTimeout()">testTimeout</button>
<button onclick="testImmediate()">testImmediate</button>
<script>
function testTimeout() {
var start = new Date();
var i = 0;
@ -37,9 +38,8 @@
}
});
}
</script>
</body>
</html>

3
12-extra/8-range-textrange-selection/domRangeCreate.view/index.html
View file

@ -1,8 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="ex2" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
<h2 style="color:#333; margin:0; padding:0 0 7px 0; font:bold 15px Arial;">Соз|даем Range-объект</h2>
@ -34,4 +36,5 @@ function domRangeCreate() {
</script>
</body>
</html>

3
12-extra/8-range-textrange-selection/domRangeHighlight.view/index.html
View file

@ -1,8 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="ex3" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
@ -31,4 +33,5 @@ function domRangehighlight( text ) {
</script>
</body>
</html>

3
12-extra/8-range-textrange-selection/fix-ie.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="fixIERangeObject.js"></script>
@ -19,9 +20,11 @@
}
</script>
</head>
<body>
Выделите текст:
<pre>The quick brown fox jumped over the lazy dog</pre>
<input type="button" value="Вывести выделение и свойства startContainer, startOffset, endOffset" onclick="test();" />
</body>
</html>

3
12-extra/8-range-textrange-selection/ieTextRangeHighlight.view/index.html
View file

@ -1,8 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="ex4" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
@ -29,4 +31,5 @@ function ieTextRangeHighlight(text) {
</script>
</body>
</html>

3
12-extra/8-range-textrange-selection/setSelection.view/index.html
View file

@ -1,8 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="ex5" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
@ -31,4 +33,5 @@ function setSelection() {
</body>
</html>

9
12-extra/9-drag-and-drop-plus/dragTree.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="lib.js"></script>
@ -12,11 +13,12 @@
<script src="TreeDropTarget.js"></script>
<link rel="stylesheet" type="text/css" href="dragTree.css">
</head>
<body>
Возьмите за любой заголовок и поменяйте ему родителя.<br>
В собственных детей перенести нельзя.<br>
Потомки всегда отсортированы по алфавиту.
Возьмите за любой заголовок и поменяйте ему родителя.
<br> В собственных детей перенести нельзя.
<br> Потомки всегда отсортированы по алфавиту.
<ul id="tree">
<li><span>Древо жизни (сверхмалая часть)</span>
@ -67,4 +69,5 @@
</script>
</body>
</html>

23
2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.view/index.html
View file

@ -1,12 +1,23 @@
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8">
<head>
<meta charset="utf-8">
<style>
.hour { color: red }
.min { color: green }
.sec { color: blue }
.hour {
color: red
}
.min {
color: green
}
.sec {
color: blue
}
</style>
</head>
<body>
<div id="clock">
@ -14,7 +25,6 @@
</div>
<script>
var timerId;
function update() {
@ -40,9 +50,8 @@ function clockStart() {
}
clockStart();
</script>
</body>
</html>

2
2-ui/1-document/11-modifying-document/10-clock-setinterval/source.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<body>
@ -8,4 +9,5 @@
<input type="button" onclick="clockStop()" value="Stop">
</body>
</html>

3
2-ui/1-document/11-modifying-document/6-create-list/solution.view/index.html
View file

@ -1,8 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Создание списка</h1>
@ -24,4 +26,5 @@
</script>
</body>
</html>

3
2-ui/1-document/11-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
View file

@ -1,8 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="container"></div>
@ -64,4 +66,5 @@
</script>
</body>
</html>

3
2-ui/1-document/11-modifying-document/7-create-object-tree/solution.view/index.html
View file

@ -1,8 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="container"></div>
@ -46,4 +48,5 @@
createTree(container, data);
</script>
</body>
</html>

3
2-ui/1-document/11-modifying-document/7-create-object-tree/source.view/index.html
View file

@ -1,8 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="tree"></div>
@ -61,4 +63,5 @@
</script>
</body>
</html>

7
2-ui/1-document/11-modifying-document/8-tree-count/solution.view/index.html
View file

@ -1,6 +1,10 @@
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
@ -56,4 +60,5 @@ for(i=0; i<lis.length; i++) {
</script>
</body>
</html>

7
2-ui/1-document/11-modifying-document/8-tree-count/source.view/index.html
View file

@ -1,6 +1,10 @@
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
@ -46,4 +50,5 @@
</script>
</body>
</html>

6
2-ui/1-document/11-modifying-document/9-calendar-table/solution.view/index.html
View file

@ -1,12 +1,14 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td, th {
td,
th {
border: 1px solid black;
padding: 3px;
text-align: center;
@ -19,6 +21,7 @@ th {
</style>
<meta charset="utf-8">
</head>
<body>
@ -77,4 +80,5 @@ createCalendar("calendar", 2012, 9)
</script>
</body>
</html>

8
2-ui/1-document/11-modifying-document/9-calendar-table/source.view/index.html
View file

@ -1,12 +1,14 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td, th {
td,
th {
border: 1px solid black;
padding: 3px;
text-align: center;
@ -19,13 +21,13 @@ th {
</style>
<meta charset="utf-8">
</head>
<body>
<div id="calendar"></div>
<script>
function createCalendar(id, year, month) {
var elem = document.getElementById(id)
@ -33,7 +35,7 @@ function createCalendar(id, year, month) {
}
createCalendar('calendar', 2011, 1)
</script>
</body>
</html>

39
2-ui/1-document/12-multi-insert/2-sort-table-performance/solution.view/index.html
View file

File diff suppressed because one or more lines are too long

3
2-ui/1-document/12-multi-insert/benchmark.view/index.html
View file

@ -1,8 +1,10 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
Вставляются 100 элементов LI в пустой UL.
@ -17,4 +19,5 @@
<script src="documentfragment-bench.js"></script>
</body>
</html>

9
2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.view/index.html
View file

@ -1,6 +1,10 @@
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
@ -28,10 +32,9 @@
var div = document.body.children[0];
div.appendChild(a);
</script>
</body>
</html>

7
2-ui/1-document/14-styles-and-classes/1-round-button-javascript/source.view/index.html
View file

@ -1,6 +1,10 @@
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
@ -14,4 +18,5 @@
</body>
</html>

8
2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.html
View file

@ -1,15 +1,19 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<h2>Уведомление</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum
magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta
temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
</p>
<script>
@ -53,9 +57,9 @@
className: "welcome"
});
}, 2000);
</script>
</body>
</html>

8
2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.html
View file

@ -1,15 +1,19 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<h2>Уведомление</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum
magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta
temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
</p>
<p>В CSS есть готовый класс notification, который можно ставить уведомлению.</p>
@ -38,9 +42,9 @@
className: "welcome"
});
}, 2000);
</script>
</body>
</html>

8
2-ui/1-document/14-styles-and-classes/getiecomputedstyle.view/index.html
View file

@ -1,13 +1,18 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="getiecomputedstyle.js"></script>
</head>
<body>
<style>
#margin-test { margin: 1%; border: 1px solid black; }
#margin-test {
margin: 1%;
border: 1px solid black;
}
</style>
<div id="margin-test">Тестовый элемент с margin 1%</div>
@ -21,4 +26,5 @@
}
</script>
</body>
</html>

9
2-ui/1-document/15-metrics/3-div-placeholder/solution.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
#moving-div {
@ -10,13 +11,15 @@
}
</style>
</head>
<body>
Before Before Before
<div id="moving-div">
Text Text Text<br>
Text Text Text<br>
Text Text Text
<br> Text Text Text
<br>
</div>
After After After
@ -39,9 +42,9 @@ document.body.insertBefore(placeHolder, div)
div.style.position = 'absolute'
div.style.right = div.style.top = 0
</script>
</body>
</html>

8
2-ui/1-document/15-metrics/3-div-placeholder/source.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
#moving-div {
@ -10,13 +11,15 @@
}
</style>
</head>
<body>
Before Before Before
<div id="moving-div">
Text Text Text<br>
Text Text Text<br>
Text Text Text
<br> Text Text Text
<br>
</div>
After After After
@ -30,4 +33,5 @@ div.style.right = div.style.top = 0
</script>
</body>
</html>

8
2-ui/1-document/15-metrics/4-put-ball-in-center/ball-half/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
#field {
@ -14,12 +15,13 @@
}
</style>
</head>
<body>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
@ -31,9 +33,9 @@ var field = document.getElementById('field')
// to fix: set width
ball.style.left = Math.round(field.clientWidth / 2) + 'px'
ball.style.top = Math.round(field.clientHeight / 2) + 'px'
</script>
</body>
</html>

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

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
#field {
@ -14,12 +15,13 @@
}
</style>
</head>
<body>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
@ -31,9 +33,9 @@ var field = document.getElementById('field')
// to fix: set width
ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px'
ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px'
</script>
</body>
</html>

7
2-ui/1-document/15-metrics/4-put-ball-in-center/source.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
#field {
@ -14,14 +15,16 @@
}
</style>
</head>
<body>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
</body>
</html>

17
2-ui/1-document/15-metrics/5-expand-element/solution.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
@ -15,20 +16,16 @@
body {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="elem">
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст
</div>
<script>
@ -48,9 +45,9 @@
var bodyInnerWidth = bodyWidth - parseInt(style.paddingLeft) - parseInt(style.paddingRight);
elem.style.width = bodyInnerWidth + 'px';
</script>
</body>
</html>

16
2-ui/1-document/15-metrics/5-expand-element/source.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
@ -14,20 +15,16 @@
body {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="elem">
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст
</div>
<script>
@ -38,4 +35,5 @@ var elem = document.getElementById("elem");
</body>
</html>

18
2-ui/1-document/15-metrics/cssWidthScroll.view/index.html
View file

@ -1,14 +1,14 @@
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="elem" style="overflow-y:scroll;width:300px;height:200px;border:1px solid black">
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</div>
@ -16,9 +16,11 @@
// FF: 200, Ch/Sa: 184, Op: 200, IE9: 184, IE7,8:200
</script>
У элемента стоит <code>style="width:300px"</code><br>
У элемента стоит <code>style="width:300px"</code>
<br>
<button onclick="alert( getComputedStyle(elem).width )">alert( getComputedStyle(elem).width )</button>
</body>
</html>

25
2-ui/1-document/15-metrics/metric.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@ -15,6 +16,7 @@
border: 25px solid #E8C48F;
padding: 20px;
}
.key {
cursor: pointer;
text-decoration: underline;
@ -22,16 +24,21 @@
</style>
</head>
<body>
<div id="example">
<h3>Introduction</h3>
<p>This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company's Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0. The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997.</p>
<p>This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company's Navigator 2.0 browser.
It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0. The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the
Ecma General Assembly of June 1997.</p>
<p>That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.</p>
<p>That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep
it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.</p>
<p>The third edition of the Standard introduced powerful regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and minor changes in anticipation of forthcoming internationalisation facilities and future language growth. The third edition of the ECMAScript standard was adopted by the Ecma General Assembly of December 1999 and published as ISO/IEC 16262:2002 in June 2002.</p>
<p>The third edition of the Standard introduced powerful regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and minor changes in anticipation
of forthcoming internationalisation facilities and future language growth. The third edition of the ECMAScript standard was adopted by the Ecma General Assembly of December 1999 and published as ISO/IEC 16262:2002 in June 2002.</p>
</div>
@ -46,12 +53,9 @@ var example = document.getElementById('example')
var info = document.getElementById('info')
var props = {
'размеры':
['clientLeft','clientTop', 'clientWidth','clientHeight','offsetWidth','offsetHeight','scrollWidth', 'scrollHeight'],
'прокрутка':
['scrollLeft','scrollTop'] ,
'позиционирование по рендерингу':
['offsetParent', 'offsetLeft','offsetTop']
'размеры': ['clientLeft', 'clientTop', 'clientWidth', 'clientHeight', 'offsetWidth', 'offsetHeight', 'scrollWidth', 'scrollHeight'],
'прокрутка': ['scrollLeft', 'scrollTop'],
'позиционирование по рендерингу': ['offsetParent', 'offsetLeft', 'offsetTop']
}
info.innerHTML = '<h3>Нажмите для просмотра значения:</h3>';
@ -83,9 +87,8 @@ document.onclick = function(event) {
document.onmousemove = function(e) {
document.getElementById('mouse').innerHTML = Math.round(e.clientX) + ':' + Math.round(e.clientY);
};
</script>
</body>
</html>

13
2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
@ -9,15 +10,18 @@
};
</script>
</head>
<body>
Кликните на любое место, чтобы получить координаты относительно окна.<br>
Это для удобства тестирования, чтобы проверить результат, который вы получите из DOM.<br>
Кликните на любое место, чтобы получить координаты относительно окна.
<br> Это для удобства тестирования, чтобы проверить результат, который вы получите из DOM.
<br>
<div id="coords">(координаты появятся тут)</div>
<div id="field">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
@ -28,7 +32,6 @@
<script>
var field = document.getElementById('field');
// полное решение - в массиве result
@ -55,8 +58,8 @@
];
alert(result.join(' '));
</script>
</body>
</html>

13
2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
@ -9,15 +10,18 @@
};
</script>
</head>
<body>
Кликните на любое место, чтобы получить координаты относительно окна.<br>
Это для удобства тестирования, чтобы проверить результат, который вы получите из DOM.<br>
Кликните на любое место, чтобы получить координаты относительно окна.
<br> Это для удобства тестирования, чтобы проверить результат, который вы получите из DOM.
<br>
<div id="coords">(координаты появятся тут)</div>
<div id="field">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
@ -28,12 +32,11 @@
<script>
var field = document.getElementById('field');
// ваш код...
</script>
</body>
</html>

19
2-ui/1-document/17-coordinates/2-position-at/solution.view/index.html
View file

@ -1,30 +1,26 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
esse sequi officia sapiente.</p>
<blockquote>
- Что на завтрак, Бэрримор?
- Овсянка, сэр.
- А на обед?
- Овсянка, сэр.
- Ну а на ужин?
- Котлеты, сэр.
- Уррра!!!
- Из овсянки, сэр!!!
- Что на завтрак, Бэрримор? - Овсянка, сэр. - А на обед? - Овсянка, сэр. - Ну а на ужин? - Котлеты, сэр. - Уррра!!! - Из овсянки, сэр!!!
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
esse sequi officia sapiente.</p>
<script>
/**
* Позиционирует элемент elem относительно элемента anchor, как указано в
* в position.
@ -82,4 +78,5 @@
</body>
</html>

19
2-ui/1-document/17-coordinates/2-position-at/source.view/index.html
View file

@ -1,30 +1,26 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
esse sequi officia sapiente.</p>
<blockquote>
- Что на завтрак, Бэрримор?
- Овсянка, сэр.
- А на обед?
- Овсянка, сэр.
- Ну а на ужин?
- Котлеты, сэр.
- Уррра!!!
- Из овсянки, сэр!!!
- Что на завтрак, Бэрримор? - Овсянка, сэр. - А на обед? - Овсянка, сэр. - Ну а на ужин? - Котлеты, сэр. - Уррра!!! - Из овсянки, сэр!!!
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
esse sequi officia sapiente.</p>
<script>
/**
* Позиционирует элемент elem относительно элемента anchor, как указано в
* в position.
@ -55,4 +51,5 @@
</body>
</html>

21
2-ui/1-document/18-coordinates-document/2-position-at-absolute/solution.view/index.html
View file

@ -1,9 +1,11 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
</head>
<body style="height:2000px">
<p>Исправления два:</p>
@ -14,21 +16,14 @@
</ol>
<blockquote>
- Что на завтрак, Бэрримор?
- Овсянка, сэр.
- А на обед?
- Овсянка, сэр.
- Ну а на ужин?
- Котлеты, сэр.
- Уррра!!!
- Из овсянки, сэр!!!
- Что на завтрак, Бэрримор? - Овсянка, сэр. - А на обед? - Овсянка, сэр. - Ну а на ужин? - Котлеты, сэр. - Уррра!!! - Из овсянки, сэр!!!
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
esse sequi officia sapiente.</p>
<script>
/**
* Вспомогательная функция для координат относительно документа
*/
@ -48,7 +43,10 @@
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return { top: top, left: left };
return {
top: top,
left: left
};
}
@ -98,4 +96,5 @@
</body>
</html>

24
2-ui/1-document/18-coordinates-document/3-position-at-2/solution.view/index.html
View file

@ -1,26 +1,23 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
</head>
<body style="height:2000px">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
esse sequi officia sapiente.</p>
<blockquote>
- Что на завтрак, Бэрримор?
- Овсянка, сэр.
- А на обед?
- Овсянка, сэр.
- Ну а на ужин?
- Котлеты, сэр.
- Уррра!!!
- Из овсянки, сэр!!!
- Что на завтрак, Бэрримор? - Овсянка, сэр. - А на обед? - Овсянка, сэр. - Ну а на ужин? - Котлеты, сэр. - Уррра!!! - Из овсянки, сэр!!!
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae esse sequi officia sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
esse sequi officia sapiente.</p>
<script>
@ -39,7 +36,10 @@
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return { top: top, left: left };
return {
top: top,
left: left
};
}
function showNote(anchor, position, html) {
@ -107,9 +107,9 @@
showNote(blockquote, "top-out", "заметка top-out");
showNote(blockquote, "right-out", "заметка right-out");
showNote(blockquote, "bottom-in", "заметка bottom-in");
</script>
</body>
</html>

2
2-ui/1-document/3-dom-console/losi.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<body>
Правда о лосях
<ol>
@ -8,4 +9,5 @@
<li>..И коварное!</li>
</ol>
</body>
</html>

54
2-ui/1-document/4-traversing-dom/4-select-diagonal-cells/solution.view/index.html
View file

@ -1,19 +1,57 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 3px 5px; }
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 3px 5px;
}
</style>
</head>
<body>
<table>
<tr><td>1:1</td><td>2:1</td><td>3:1</td><td>4:1</td><td>5:1</td></tr>
<tr><td>1:2</td><td>2:2</td><td>3:2</td><td>4:2</td><td>5:2</td></tr>
<tr><td>1:3</td><td>2:3</td><td>3:3</td><td>4:3</td><td>5:3</td></tr>
<tr><td>1:4</td><td>2:4</td><td>3:4</td><td>4:4</td><td>5:4</td></tr>
<tr><td>1:5</td><td>2:5</td><td>3:5</td><td>4:5</td><td>5:5</td></tr>
<tr>
<td>1:1</td>
<td>2:1</td>
<td>3:1</td>
<td>4:1</td>
<td>5:1</td>
</tr>
<tr>
<td>1:2</td>
<td>2:2</td>
<td>3:2</td>
<td>4:2</td>
<td>5:2</td>
</tr>
<tr>
<td>1:3</td>
<td>2:3</td>
<td>3:3</td>
<td>4:3</td>
<td>5:3</td>
</tr>
<tr>
<td>1:4</td>
<td>2:4</td>
<td>3:4</td>
<td>4:4</td>
<td>5:4</td>
</tr>
<tr>
<td>1:5</td>
<td>2:5</td>
<td>3:5</td>
<td>4:5</td>
<td>5:5</td>
</tr>
</table>
<script>
var table = document.body.children[0];
@ -22,7 +60,7 @@
var row = table.rows[i];
row.cells[i].style.backgroundColor = 'red';
}
</script>
</body>
</html>

54
2-ui/1-document/4-traversing-dom/4-select-diagonal-cells/source.view/index.html
View file

@ -1,25 +1,63 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 3px 5px; }
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 3px 5px;
}
</style>
</head>
<body>
<table>
<tr><td>1:1</td><td>2:1</td><td>3:1</td><td>4:1</td><td>5:1</td></tr>
<tr><td>1:2</td><td>2:2</td><td>3:2</td><td>4:2</td><td>5:2</td></tr>
<tr><td>1:3</td><td>2:3</td><td>3:3</td><td>4:3</td><td>5:3</td></tr>
<tr><td>1:4</td><td>2:4</td><td>3:4</td><td>4:4</td><td>5:4</td></tr>
<tr><td>1:5</td><td>2:5</td><td>3:5</td><td>4:5</td><td>5:5</td></tr>
<tr>
<td>1:1</td>
<td>2:1</td>
<td>3:1</td>
<td>4:1</td>
<td>5:1</td>
</tr>
<tr>
<td>1:2</td>
<td>2:2</td>
<td>3:2</td>
<td>4:2</td>
<td>5:2</td>
</tr>
<tr>
<td>1:3</td>
<td>2:3</td>
<td>3:3</td>
<td>4:3</td>
<td>5:3</td>
</tr>
<tr>
<td>1:4</td>
<td>2:4</td>
<td>3:4</td>
<td>4:4</td>
<td>5:4</td>
</tr>
<tr>
<td>1:5</td>
<td>2:5</td>
<td>3:5</td>
<td>4:5</td>
<td>5:5</td>
</tr>
</table>
<script>
var table = document.body.children[0];
/* ваш код */
</script>
</body>
</html>

14
2-ui/1-document/5-searching-elements-dom/1-find-elements/table.html
View file

@ -1,12 +1,15 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form name="search">
<label>Поиск по сайту: <input type="text" name="search"></label>
<label>Поиск по сайту:
<input type="text" name="search">
</label>
<input type="submit" value="Искать!">
</form>
@ -18,9 +21,12 @@
<tr>
<td>Возраст:</td>
<td id="age-list">
<label><input type="radio" name="age" value="young">до 18</label>
<label><input type="radio" name="age" value="mature">18-50</label>
<label><input type="radio" name="age" value="senior">более 50</label>
<label>
<input type="radio" name="age" value="young">до 18</label>
<label>
<input type="radio" name="age" value="mature">18-50</label>
<label>
<input type="radio" name="age" value="senior">более 50</label>
</td>
</tr>

7
2-ui/1-document/5-searching-elements-dom/2-tree/solution.view/index.html
View file

@ -1,6 +1,10 @@
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
@ -58,4 +62,5 @@ for(i=0; i<lis.length; i++) {
</script>
</body>
</html>

7
2-ui/1-document/5-searching-elements-dom/2-tree/source.view/index.html
View file

@ -1,6 +1,10 @@
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
@ -46,4 +50,5 @@
</script>
</body>
</html>

175
2-ui/1-document/6-searching-elements-internals/3-benchmark-search-dom/solution.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@ -9,25 +10,162 @@
}
</style>
</head>
<body>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<script>
@ -62,9 +200,8 @@ function log(msg) {
log('getElementsByTagName: ' + bench(runGetList, 10000));
log('querySelectorAll: ' + bench(runQueryList, 10000));
</script>
</body>
</html>
</html>

174
2-ui/1-document/6-searching-elements-internals/3-benchmark-search-dom/source.view/index.html
View file

@ -1,32 +1,170 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<script>
// ...
</script>
</body>
</html>
</html>

2
2-ui/1-document/9-attributes-and-custom-properties/1-get-user-attribute/solution.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYLE HTML>
<html>
<body>
<div data-widget-name="menu">Выберите жанр</div>
@ -9,4 +10,5 @@
</script>
</body>
</html>

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

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
@ -8,6 +9,7 @@
}
</style>
</head>
<body>
@ -23,7 +25,6 @@
<script>
var css = 'a[href*="://"]:not([href^="http://internal.com"])';
var links = document.querySelectorAll(css);
@ -33,4 +34,5 @@ for(var i=0; i<links.length; i++) {
</script>
</body>
</html>

3
2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.view/index.html
View file

@ -1,8 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" id="hider" value="Нажмите, чтобы спрятать текст" />
@ -17,4 +19,5 @@
}
</script>
</body>
</html>

3
2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/source.view/index.html
View file

@ -1,8 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" id="hider" value="Нажмите, чтобы спрятать текст" />
@ -13,4 +15,5 @@
/* ваш код */
</script>
</body>
</html>

6
2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.view/index.html
View file

@ -1,14 +1,13 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.menu ul {
margin: 0;
list-style: none;
padding-left: 20px;
display: none;
}
@ -30,9 +29,9 @@
.menu.open ul {
display: block;
}
</style>
</head>
<body>
<div id="sweeties" class="menu">
@ -55,4 +54,5 @@
</script>
</body>
</html>

3
2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/source.view/index.html
View file

@ -1,8 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
▶ ▼ Сладости (нажми меня)!
@ -14,4 +16,5 @@
</body>
</html>

8
2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="messages.css">
<meta charset="utf-8">
@ -20,7 +21,8 @@
</div>
<div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
тёлками.</p>
<button class="remove-button">[x]</button>
</div>
</div>
@ -28,7 +30,6 @@
<script>
var buttons = document.querySelectorAll('#messages-container .remove-button');
for (var i = 0; i < buttons.length; i++) {
@ -39,8 +40,7 @@
el.parentNode.removeChild(el);
};
}
</script>
</body>
</html>

8
2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="messages.css">
<meta charset="utf-8">
@ -7,7 +8,8 @@
<body>
Кнопка для удаления: <button class="remove-button">[x]</button>
Кнопка для удаления:
<button class="remove-button">[x]</button>
<div>
<div class="pane">
@ -20,9 +22,11 @@
</div>
<div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
тёлками.</p>
</div>
</div>
</body>
</html>

4
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/index.html
View file

@ -1,4 +1,5 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
@ -26,7 +27,6 @@
</div>
<script>
/* этот код помечает картинки, для удобства разработки */
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
@ -66,7 +66,7 @@ carousel.querySelector('.next').onclick = function() {
position = Math.max(position - width * count, -width * (listElems.length - count));
list.style.marginLeft = position + 'px';
};
</script>
</body>
</html>

4
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html
View file

@ -1,4 +1,5 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
@ -40,9 +41,8 @@ for(var i=0; i<lis.length; i++) {
</script>
<script>
// ваш код..
</script>
</body>
</html>

15
2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
@ -19,28 +20,27 @@
top: 0;
width: 40px;
height: 40px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
</style>
</head>
<body style="height:2000px">
Кликните на любое место поля, чтобы мяч перелетел туда.<br>
Кликните на любое место поля, чтобы мяч перелетел туда.
<br>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
<script>
var field = document.getElementById('field');
var ball = document.getElementById('ball');
@ -85,9 +85,8 @@
ball.style.left = ballCoords.left + 'px';
ball.style.top = ballCoords.top + 'px';
}
</script>
</body>
</html>

11
2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/source.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
@ -21,17 +22,19 @@
}
</style>
</head>
<body style="height:2000px">
Кликните на любое место поля, чтобы мяч перелетел туда.<br>
Мяч никогда не вылетит за границы поля.
Кликните на любое место поля, чтобы мяч перелетел туда.
<br> Мяч никогда не вылетит за границы поля.
<div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
</body>
</html>

3
2-ui/2-events-and-interfaces/4-event-bubbling/both.view/index.html
View file

@ -1,9 +1,11 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="example.css">
</head>
<body>
<form>FORM
@ -14,4 +16,5 @@
<script src="script.js"></script>
</body>
</html>

3
2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/index.html
View file

@ -1,9 +1,11 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="example.css">
</head>
<body>
Клик выведет <code>event.target</code> и <code>this</code>:
@ -15,4 +17,5 @@
<script src="script.js"></script>
</body>
</html>

2
2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<body>
<link type="text/css" rel="stylesheet" href="example.css">
@ -11,4 +12,5 @@
<script src="script.js"></script>
</body>
</html>

7
2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="messages.css">
<meta charset="utf-8">
@ -20,7 +21,8 @@
</div>
<div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
тёлками.</p>
<button class="remove-button">[x]</button>
</div>
</div>
@ -28,7 +30,6 @@
<script>
var container = document.getElementById('messages-container');
container.onclick = function(event) {
@ -36,8 +37,8 @@
event.target.parentNode.hidden = !event.target.parentNode.hidden;
}
</script>
</body>
</html>

8
2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="messages.css">
<meta charset="utf-8">
@ -7,7 +8,8 @@
<body>
Кнопка для удаления: <button class="remove-button">[x]</button>
Кнопка для удаления:
<button class="remove-button">[x]</button>
<div>
<div class="pane">
@ -20,9 +22,11 @@
</div>
<div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
тёлками.</p>
</div>
</div>
</body>
</html>

5
2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.view/index.html
View file

@ -1,16 +1,19 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
.tree span:hover {
font-weight: bold;
}
.tree span {
cursor: pointer;
}
</style>
<meta charset="utf-8">
</head>
<body>
<ul class="tree">
@ -79,8 +82,8 @@ tree.onclick = function(event) {
childrenContainer.hidden = !childrenContainer.hidden;
}
</script>
</body>
</html>

7
2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/source.view/index.html
View file

@ -1,6 +1,10 @@
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<head>
<meta charset="utf-8">
</head>
<body>
<ul class="tree">
@ -42,4 +46,5 @@
</ul>
</body>
</html>

5
2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.view/index.html
View file

@ -1,16 +1,19 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
th {
cursor: pointer;
}
th:hover {
background: yellow;
}
</style>
</head>
<body>
<table id="grid">
@ -96,8 +99,8 @@
grid.appendChild(tbody);
}
</script>
</body>
</html>

5
2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/source.view/index.html
View file

@ -1,16 +1,19 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
th {
cursor: pointer;
}
th:hover {
background: yellow;
}
</style>
</head>
<body>
<table id="grid">
@ -46,8 +49,8 @@
<script>
/* ваш код */
</script>
</body>
</html>

48
2-ui/2-events-and-interfaces/5-event-delegation/bagua.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<body>
<link type="text/css" rel="stylesheet" href="bagua.css">
@ -9,27 +10,54 @@
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
</tr>
<tr>
<td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
<td class="nw"><strong>Northwest</strong>
<br>Metal
<br>Silver
<br>Elders
</td>
<td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
<td class="n"><strong>North</strong>
<br>Water
<br>Blue
<br>Change
</td>
<td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
<td class="ne"><strong>Northeast</strong>
<br>Earth
<br>Yellow
<br>Direction
</td>
</tr>
<tr>
<td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
<td class="w"><strong>West</strong>
<br>Metal
<br>Gold
<br>Youth
</td>
<td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
<td class="c"><strong>Center</strong>
<br>All
<br>Purple
<br>Harmony
</td>
<td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
<td class="e"><strong>East</strong>
<br>Wood
<br>Blue
<br>Future
</td>
</tr>
<tr>
<td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
<td class="sw"><strong>Southwest</strong>
<br>Earth
<br>Brown
<br>Tranquility
</td>
<td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
<td class="s"><strong>South</strong>
<br>Fire
<br>Orange
<br>Fame
</td>
<td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
<td class="se"><strong>Southeast</strong>
<br>Wood
<br>Green
<br>Romance
</td>
</tr>
@ -59,8 +87,8 @@ function highlight(node) {
selectedTd = node;
selectedTd.classList.add('highlight');
}
</script>
</body>
</html>

11
2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/solution.view/index.html
View file

@ -1,17 +1,19 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body {
height: 2000px; /* подсказка должна работать независимо от прокрутки */
height: 2000px;
/* подсказка должна работать независимо от прокрутки */
}
.tooltip {
position: fixed;
padding: 10px 20px;
/* красивости... */
border: 1px solid #b3c9ce;
border-radius: 4px;
text-align: center;
@ -20,9 +22,9 @@
background: #fff;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
@ -35,7 +37,6 @@
<script>
var showingTooltip;
document.onmouseover = function(e) {
@ -73,8 +74,8 @@ document.onmouseout = function(e) {
}
};
</script>
</body>
</html>

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