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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
На этой странице есть скрипт с ошибкой. На этой странице есть скрипт с ошибкой.
<script> <script>
lalala lalala
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<script> <script>
@ -10,4 +12,5 @@
</script> </script>
</body> </body>
</html> </html>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,9 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <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> </head>
<body> <body>
<input type="button" id="start" value="Старт"> <input type="button" id="start" value="Старт">
@ -38,7 +46,8 @@ startButton.onclick = function() {
} }
function animateDiv(divs, i) { function animateDiv(divs, i) {
var div = divs[i], speed = div.innerHTML; var div = divs[i],
speed = div.innerHTML;
timers[i] = setInterval(function() { timers[i] = setInterval(function() {
div.style.width = (parseInt(div.style.width || 0) + 2) % 400 + 'px' div.style.width = (parseInt(div.style.width || 0) + 2) % 400 + 'px'
}, speed); }, speed);
@ -46,4 +55,5 @@ function animateDiv(divs, i) {
</script> </script>
</body> </body>
</html> </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> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </head>
<body> <body>
<script> <script>
@ -45,4 +47,5 @@ coffeeMachine.run();
</script> </script>
</body> </body>
</html> </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> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </head>
<body> <body>
<script> <script>
@ -39,4 +41,5 @@ function CoffeeMachine(power) {
</script> </script>
</body> </body>
</html> </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> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </head>
<body> <body>
<script> <script>
@ -52,4 +54,5 @@ coffeeMachine.run();
</script> </script>
</body> </body>
</html> </html>

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

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

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

@ -1,9 +1,11 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Часики в консоли</title> <title>Часики в консоли</title>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<script src="clock.js"></script> <script src="clock.js"></script>
@ -15,4 +17,5 @@
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Часики в консоли</title> <title>Часики в консоли</title>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<script src="clock.js"></script> <script src="clock.js"></script>
@ -20,4 +22,5 @@
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Часики в консоли</title> <title>Часики в консоли</title>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<!-- исходные часы, от них нужно унаследовать --> <!-- исходные часы, от них нужно унаследовать -->
@ -26,8 +28,8 @@
lowResolutionClock.start(); lowResolutionClock.start();
*/ */
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<script src="menu.js"></script> <script src="menu.js"></script>
<script> <script>
function AnimatingMenu() { function AnimatingMenu() {
Menu.apply(this, arguments); Menu.apply(this, arguments);
} }
@ -56,12 +57,8 @@
menu.close(); menu.close();
menu.showState(); // закрыто menu.showState(); // закрыто
}, 1000); }, 1000);
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<script src="menu.js"></script> <script src="menu.js"></script>
<script> <script>
var AnimatingMenu = Menu; // замените на ваш код для AnimatingMenu var AnimatingMenu = Menu; // замените на ваш код для AnimatingMenu
// использование.. // использование..
@ -25,9 +26,8 @@
menu.close(); menu.close();
menu.showState(); // закрыто (закрытие без анимации) menu.showState(); // закрыто (закрытие без анимации)
}, 1000); }, 1000);
</script> </script>
</body> </body>
</html> </html>

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

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

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

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

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

@ -1,8 +1,10 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<div id="ex3" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;"> <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> </script>
</body> </body>
</html> </html>

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

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

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

@ -1,8 +1,10 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<div id="ex4" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;"> <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> </script>
</body> </body>
</html> </html>

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

@ -1,8 +1,10 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<div id="ex5" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;"> <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> </body>
</html> </html>

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

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

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

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

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

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

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

@ -1,8 +1,10 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<h1>Создание списка</h1> <h1>Создание списка</h1>
@ -24,4 +26,5 @@
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<div id="container"></div> <div id="container"></div>
@ -64,4 +66,5 @@
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<div id="container"></div> <div id="container"></div>
@ -46,4 +48,5 @@
createTree(container, data); createTree(container, data);
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<div id="tree"></div> <div id="tree"></div>
@ -61,4 +63,5 @@
</script> </script>
</body> </body>
</html> </html>

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

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

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

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

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

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

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

@ -1,12 +1,14 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<style> <style>
table { table {
border-collapse: collapse; border-collapse: collapse;
} }
td, th { td,
th {
border: 1px solid black; border: 1px solid black;
padding: 3px; padding: 3px;
text-align: center; text-align: center;
@ -19,13 +21,13 @@ th {
</style> </style>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<div id="calendar"></div> <div id="calendar"></div>
<script> <script>
function createCalendar(id, year, month) { function createCalendar(id, year, month) {
var elem = document.getElementById(id) var elem = document.getElementById(id)
@ -33,7 +35,7 @@ function createCalendar(id, year, month) {
} }
createCalendar('calendar', 2011, 1) createCalendar('calendar', 2011, 1)
</script> </script>
</body> </body>
</html> </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> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </head>
<body> <body>
Вставляются 100 элементов LI в пустой UL. Вставляются 100 элементов LI в пустой UL.
@ -17,4 +19,5 @@
<script src="documentfragment-bench.js"></script> <script src="documentfragment-bench.js"></script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head><meta charset="utf-8"></head>
<head>
<meta charset="utf-8">
</head>
<body> <body>
<div> <div>
@ -28,10 +32,9 @@
var div = document.body.children[0]; var div = document.body.children[0];
div.appendChild(a); div.appendChild(a);
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head><meta charset="utf-8"></head>
<head>
<meta charset="utf-8">
</head>
<body> <body>
<div> <div>
@ -14,4 +18,5 @@
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
</head> </head>
<body> <body>
<h2>Уведомление</h2> <h2>Уведомление</h2>
<p> <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>
<script> <script>
@ -53,9 +57,9 @@
className: "welcome" className: "welcome"
}); });
}, 2000); }, 2000);
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
</head> </head>
<body> <body>
<h2>Уведомление</h2> <h2>Уведомление</h2>
<p> <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>
<p>В CSS есть готовый класс notification, который можно ставить уведомлению.</p> <p>В CSS есть готовый класс notification, который можно ставить уведомлению.</p>
@ -38,9 +42,9 @@
className: "welcome" className: "welcome"
}); });
}, 2000); }, 2000);
</script> </script>
</body> </body>
</html> </html>

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

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

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

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

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

@ -1,5 +1,6 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<style> <style>
#moving-div { #moving-div {
@ -10,13 +11,15 @@
} }
</style> </style>
</head> </head>
<body> <body>
Before Before Before Before Before Before
<div id="moving-div"> <div id="moving-div">
Text Text Text<br> Text Text Text
Text Text Text<br> <br> Text Text Text
<br>
</div> </div>
After After After After After After
@ -30,4 +33,5 @@ div.style.right = div.style.top = 0
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<style> <style>
#field { #field {
@ -14,12 +15,13 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div id="field"> <div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball"> <img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div> </div>
@ -31,9 +33,9 @@ var field = document.getElementById('field')
// to fix: set width // to fix: set width
ball.style.left = Math.round(field.clientWidth / 2) + 'px' ball.style.left = Math.round(field.clientWidth / 2) + 'px'
ball.style.top = Math.round(field.clientHeight / 2) + 'px' ball.style.top = Math.round(field.clientHeight / 2) + 'px'
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<style> <style>
#field { #field {
@ -14,12 +15,13 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div id="field"> <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> </div>
@ -31,9 +33,9 @@ var field = document.getElementById('field')
// to fix: set width // to fix: set width
ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px' ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px'
ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px' ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px'
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<style> <style>
#field { #field {
@ -14,14 +15,16 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div id="field"> <div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball"> <img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div> </div>
</body> </body>
</html> </html>

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

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

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

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

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

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

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

@ -1,5 +1,6 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style type="text/css"> <style type="text/css">
@ -15,6 +16,7 @@
border: 25px solid #E8C48F; border: 25px solid #E8C48F;
padding: 20px; padding: 20px;
} }
.key { .key {
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
@ -22,16 +24,21 @@
</style> </style>
</head> </head>
<body> <body>
<div id="example"> <div id="example">
<h3>Introduction</h3> <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> </div>
@ -46,12 +53,9 @@ var example = document.getElementById('example')
var info = document.getElementById('info') var info = document.getElementById('info')
var props = { var props = {
'размеры': 'размеры': ['clientLeft', 'clientTop', 'clientWidth', 'clientHeight', 'offsetWidth', 'offsetHeight', 'scrollWidth', 'scrollHeight'],
['clientLeft','clientTop', 'clientWidth','clientHeight','offsetWidth','offsetHeight','scrollWidth', 'scrollHeight'], 'прокрутка': ['scrollLeft', 'scrollTop'],
'прокрутка': 'позиционирование по рендерингу': ['offsetParent', 'offsetLeft', 'offsetTop']
['scrollLeft','scrollTop'] ,
'позиционирование по рендерингу':
['offsetParent', 'offsetLeft','offsetTop']
} }
info.innerHTML = '<h3>Нажмите для просмотра значения:</h3>'; info.innerHTML = '<h3>Нажмите для просмотра значения:</h3>';
@ -83,9 +87,8 @@ document.onclick = function(event) {
document.onmousemove = function(e) { document.onmousemove = function(e) {
document.getElementById('mouse').innerHTML = Math.round(e.clientX) + ':' + Math.round(e.clientY); document.getElementById('mouse').innerHTML = Math.round(e.clientX) + ':' + Math.round(e.clientY);
}; };
</script> </script>
</body> </body>
</html> </html>

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

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

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

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

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

@ -1,30 +1,26 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
</head> </head>
<body> <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>
- Что на завтрак, Бэрримор? - Что на завтрак, Бэрримор? - Овсянка, сэр. - А на обед? - Овсянка, сэр. - Ну а на ужин? - Котлеты, сэр. - Уррра!!! - Из овсянки, сэр!!!
- Овсянка, сэр.
- А на обед?
- Овсянка, сэр.
- Ну а на ужин?
- Котлеты, сэр.
- Уррра!!!
- Из овсянки, сэр!!!
</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> <script>
/** /**
* Позиционирует элемент elem относительно элемента anchor, как указано в * Позиционирует элемент elem относительно элемента anchor, как указано в
* в position. * в position.
@ -82,4 +78,5 @@
</body> </body>
</html> </html>

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

@ -1,30 +1,26 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
</head> </head>
<body> <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>
- Что на завтрак, Бэрримор? - Что на завтрак, Бэрримор? - Овсянка, сэр. - А на обед? - Овсянка, сэр. - Ну а на ужин? - Котлеты, сэр. - Уррра!!! - Из овсянки, сэр!!!
- Овсянка, сэр.
- А на обед?
- Овсянка, сэр.
- Ну а на ужин?
- Котлеты, сэр.
- Уррра!!!
- Из овсянки, сэр!!!
</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> <script>
/** /**
* Позиционирует элемент elem относительно элемента anchor, как указано в * Позиционирует элемент elem относительно элемента anchor, как указано в
* в position. * в position.
@ -55,4 +51,5 @@
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
</head> </head>
<body style="height:2000px"> <body style="height:2000px">
<p>Исправления два:</p> <p>Исправления два:</p>
@ -14,21 +16,14 @@
</ol> </ol>
<blockquote> <blockquote>
- Что на завтрак, Бэрримор? - Что на завтрак, Бэрримор? - Овсянка, сэр. - А на обед? - Овсянка, сэр. - Ну а на ужин? - Котлеты, сэр. - Уррра!!! - Из овсянки, сэр!!!
- Овсянка, сэр.
- А на обед?
- Овсянка, сэр.
- Ну а на ужин?
- Котлеты, сэр.
- Уррра!!!
- Из овсянки, сэр!!!
</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> <script>
/** /**
* Вспомогательная функция для координат относительно документа * Вспомогательная функция для координат относительно документа
*/ */
@ -48,7 +43,10 @@
var top = box.top + scrollTop - clientTop; var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft; var left = box.left + scrollLeft - clientLeft;
return { top: top, left: left }; return {
top: top,
left: left
};
} }
@ -98,4 +96,5 @@
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
</head> </head>
<body style="height:2000px"> <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>
- Что на завтрак, Бэрримор? - Что на завтрак, Бэрримор? - Овсянка, сэр. - А на обед? - Овсянка, сэр. - Ну а на ужин? - Котлеты, сэр. - Уррра!!! - Из овсянки, сэр!!!
- Овсянка, сэр.
- А на обед?
- Овсянка, сэр.
- Ну а на ужин?
- Котлеты, сэр.
- Уррра!!!
- Из овсянки, сэр!!!
</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> <script>
@ -39,7 +36,10 @@
var top = box.top + scrollTop - clientTop; var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft; var left = box.left + scrollLeft - clientLeft;
return { top: top, left: left }; return {
top: top,
left: left
};
} }
function showNote(anchor, position, html) { function showNote(anchor, position, html) {
@ -107,9 +107,9 @@
showNote(blockquote, "top-out", "заметка top-out"); showNote(blockquote, "top-out", "заметка top-out");
showNote(blockquote, "right-out", "заметка right-out"); showNote(blockquote, "right-out", "заметка right-out");
showNote(blockquote, "bottom-in", "заметка bottom-in"); showNote(blockquote, "bottom-in", "заметка bottom-in");
</script> </script>
</body> </body>
</html> </html>

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

@ -1,5 +1,6 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<body> <body>
Правда о лосях Правда о лосях
<ol> <ol>
@ -8,4 +9,5 @@
<li>..И коварное!</li> <li>..И коварное!</li>
</ol> </ol>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
table { border-collapse: collapse; } table {
td { border: 1px solid black; padding: 3px 5px; } border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 3px 5px;
}
</style> </style>
</head> </head>
<body> <body>
<table> <table>
<tr><td>1:1</td><td>2:1</td><td>3:1</td><td>4:1</td><td>5:1</td></tr> <tr>
<tr><td>1:2</td><td>2:2</td><td>3:2</td><td>4:2</td><td>5:2</td></tr> <td>1:1</td>
<tr><td>1:3</td><td>2:3</td><td>3:3</td><td>4:3</td><td>5:3</td></tr> <td>2:1</td>
<tr><td>1:4</td><td>2:4</td><td>3:4</td><td>4:4</td><td>5:4</td></tr> <td>3:1</td>
<tr><td>1:5</td><td>2:5</td><td>3:5</td><td>4:5</td><td>5:5</td></tr> <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> </table>
<script> <script>
var table = document.body.children[0]; var table = document.body.children[0];
@ -22,7 +60,7 @@
var row = table.rows[i]; var row = table.rows[i];
row.cells[i].style.backgroundColor = 'red'; row.cells[i].style.backgroundColor = 'red';
} }
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
table { border-collapse: collapse; } table {
td { border: 1px solid black; padding: 3px 5px; } border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 3px 5px;
}
</style> </style>
</head> </head>
<body> <body>
<table> <table>
<tr><td>1:1</td><td>2:1</td><td>3:1</td><td>4:1</td><td>5:1</td></tr> <tr>
<tr><td>1:2</td><td>2:2</td><td>3:2</td><td>4:2</td><td>5:2</td></tr> <td>1:1</td>
<tr><td>1:3</td><td>2:3</td><td>3:3</td><td>4:3</td><td>5:3</td></tr> <td>2:1</td>
<tr><td>1:4</td><td>2:4</td><td>3:4</td><td>4:4</td><td>5:4</td></tr> <td>3:1</td>
<tr><td>1:5</td><td>2:5</td><td>3:5</td><td>4:5</td><td>5:5</td></tr> <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> </table>
<script> <script>
var table = document.body.children[0]; var table = document.body.children[0];
/* ваш код */ /* ваш код */
</script> </script>
</body> </body>
</html> </html>

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

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

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

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

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

@ -1,6 +1,10 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head><meta charset="utf-8"></head>
<head>
<meta charset="utf-8">
</head>
<body> <body>
<ul> <ul>
@ -46,4 +50,5 @@
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
@ -9,25 +10,162 @@
} }
</style> </style>
</head> </head>
<body> <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>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>2</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>3</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>4</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>5</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>6</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>7</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>8</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>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>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>2</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>3</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>4</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>5</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>6</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>7</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>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>
@ -62,9 +200,8 @@ function log(msg) {
log('getElementsByTagName: ' + bench(runGetList, 10000)); log('getElementsByTagName: ' + bench(runGetList, 10000));
log('querySelectorAll: ' + bench(runQueryList, 10000)); log('querySelectorAll: ' + bench(runQueryList, 10000));
</script> </script>
</body> </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> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <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>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>2</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>3</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>4</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>5</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>6</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>7</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>8</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>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>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>2</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>3</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>4</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>5</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>6</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>7</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>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>
// ... // ...
</script> </script>
</body> </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> <!DOCTYLE HTML>
<html> <html>
<body> <body>
<div data-widget-name="menu">Выберите жанр</div> <div data-widget-name="menu">Выберите жанр</div>
@ -9,4 +10,5 @@
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
@ -8,6 +9,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
@ -23,7 +25,6 @@
<script> <script>
var css = 'a[href*="://"]:not([href^="http://internal.com"])'; var css = 'a[href*="://"]:not([href^="http://internal.com"])';
var links = document.querySelectorAll(css); var links = document.querySelectorAll(css);
@ -33,4 +34,5 @@ for(var i=0; i<links.length; i++) {
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<input type="button" id="hider" value="Нажмите, чтобы спрятать текст" /> <input type="button" id="hider" value="Нажмите, чтобы спрятать текст" />
@ -17,4 +19,5 @@
} }
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<input type="button" id="hider" value="Нажмите, чтобы спрятать текст" /> <input type="button" id="hider" value="Нажмите, чтобы спрятать текст" />
@ -13,4 +15,5 @@
/* ваш код */ /* ваш код */
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
.menu ul { .menu ul {
margin: 0; margin: 0;
list-style: none; list-style: none;
padding-left: 20px; padding-left: 20px;
display: none; display: none;
} }
@ -30,9 +29,9 @@
.menu.open ul { .menu.open ul {
display: block; display: block;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="sweeties" class="menu"> <div id="sweeties" class="menu">
@ -55,4 +54,5 @@
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
▶ ▼ Сладости (нажми меня)! ▶ ▼ Сладости (нажми меня)!
@ -14,4 +16,5 @@
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<link rel="stylesheet" href="messages.css"> <link rel="stylesheet" href="messages.css">
<meta charset="utf-8"> <meta charset="utf-8">
@ -20,7 +21,8 @@
</div> </div>
<div class="pane"> <div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3> <h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p> <p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
тёлками.</p>
<button class="remove-button">[x]</button> <button class="remove-button">[x]</button>
</div> </div>
</div> </div>
@ -28,7 +30,6 @@
<script> <script>
var buttons = document.querySelectorAll('#messages-container .remove-button'); var buttons = document.querySelectorAll('#messages-container .remove-button');
for (var i = 0; i < buttons.length; i++) { for (var i = 0; i < buttons.length; i++) {
@ -39,8 +40,7 @@
el.parentNode.removeChild(el); el.parentNode.removeChild(el);
}; };
} }
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="messages.css"> <link rel="stylesheet" type="text/css" href="messages.css">
<meta charset="utf-8"> <meta charset="utf-8">
@ -7,7 +8,8 @@
<body> <body>
Кнопка для удаления: <button class="remove-button">[x]</button> Кнопка для удаления:
<button class="remove-button">[x]</button>
<div> <div>
<div class="pane"> <div class="pane">
@ -20,9 +22,11 @@
</div> </div>
<div class="pane"> <div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3> <h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p> <p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
тёлками.</p>
</div> </div>
</div> </div>
</body> </body>
</html> </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> <!DOCTYPE html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
@ -26,7 +27,6 @@
</div> </div>
<script> <script>
/* этот код помечает картинки, для удобства разработки */ /* этот код помечает картинки, для удобства разработки */
var lis = document.getElementsByTagName('li'); var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) { 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)); position = Math.max(position - width * count, -width * (listElems.length - count));
list.style.marginLeft = position + 'px'; list.style.marginLeft = position + 'px';
}; };
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
@ -40,9 +41,8 @@ for(var i=0; i<lis.length; i++) {
</script> </script>
<script> <script>
// ваш код.. // ваш код..
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
@ -19,28 +20,27 @@
top: 0; top: 0;
width: 40px; width: 40px;
height: 40px; height: 40px;
-webkit-transition: all 1s; -webkit-transition: all 1s;
-moz-transition: all 1s; -moz-transition: all 1s;
-o-transition: all 1s; -o-transition: all 1s;
-ms-transition: all 1s; -ms-transition: all 1s;
transition: all 1s; transition: all 1s;
} }
</style> </style>
</head> </head>
<body style="height:2000px"> <body style="height:2000px">
Кликните на любое место поля, чтобы мяч перелетел туда.<br> Кликните на любое место поля, чтобы мяч перелетел туда.
<br>
<div id="field"> <div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball"> <img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div> </div>
<script> <script>
var field = document.getElementById('field'); var field = document.getElementById('field');
var ball = document.getElementById('ball'); var ball = document.getElementById('ball');
@ -85,9 +85,8 @@
ball.style.left = ballCoords.left + 'px'; ball.style.left = ballCoords.left + 'px';
ball.style.top = ballCoords.top + 'px'; ball.style.top = ballCoords.top + 'px';
} }
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
@ -21,17 +22,19 @@
} }
</style> </style>
</head> </head>
<body style="height:2000px"> <body style="height:2000px">
Кликните на любое место поля, чтобы мяч перелетел туда.<br> Кликните на любое место поля, чтобы мяч перелетел туда.
Мяч никогда не вылетит за границы поля. <br> Мяч никогда не вылетит за границы поля.
<div id="field"> <div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball"> <img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div> </div>
</body> </body>
</html> </html>

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

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

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

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

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

@ -1,5 +1,6 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<body> <body>
<link type="text/css" rel="stylesheet" href="example.css"> <link type="text/css" rel="stylesheet" href="example.css">
@ -11,4 +12,5 @@
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<link rel="stylesheet" href="messages.css"> <link rel="stylesheet" href="messages.css">
<meta charset="utf-8"> <meta charset="utf-8">
@ -20,7 +21,8 @@
</div> </div>
<div class="pane"> <div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3> <h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p> <p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
тёлками.</p>
<button class="remove-button">[x]</button> <button class="remove-button">[x]</button>
</div> </div>
</div> </div>
@ -28,7 +30,6 @@
<script> <script>
var container = document.getElementById('messages-container'); var container = document.getElementById('messages-container');
container.onclick = function(event) { container.onclick = function(event) {
@ -36,8 +37,8 @@
event.target.parentNode.hidden = !event.target.parentNode.hidden; event.target.parentNode.hidden = !event.target.parentNode.hidden;
} }
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="messages.css"> <link rel="stylesheet" type="text/css" href="messages.css">
<meta charset="utf-8"> <meta charset="utf-8">
@ -7,7 +8,8 @@
<body> <body>
Кнопка для удаления: <button class="remove-button">[x]</button> Кнопка для удаления:
<button class="remove-button">[x]</button>
<div> <div>
<div class="pane"> <div class="pane">
@ -20,9 +22,11 @@
</div> </div>
<div class="pane"> <div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3> <h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p> <p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
тёлками.</p>
</div> </div>
</div> </div>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<style> <style>
.tree span:hover { .tree span:hover {
font-weight: bold; font-weight: bold;
} }
.tree span { .tree span {
cursor: pointer; cursor: pointer;
} }
</style> </style>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<ul class="tree"> <ul class="tree">
@ -79,8 +82,8 @@ tree.onclick = function(event) {
childrenContainer.hidden = !childrenContainer.hidden; childrenContainer.hidden = !childrenContainer.hidden;
} }
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head><meta charset="utf-8"></head>
<head>
<meta charset="utf-8">
</head>
<body> <body>
<ul class="tree"> <ul class="tree">
@ -42,4 +46,5 @@
</ul> </ul>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
th { th {
cursor: pointer; cursor: pointer;
} }
th:hover { th:hover {
background: yellow; background: yellow;
} }
</style> </style>
</head> </head>
<body> <body>
<table id="grid"> <table id="grid">
@ -96,8 +99,8 @@
grid.appendChild(tbody); grid.appendChild(tbody);
} }
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
th { th {
cursor: pointer; cursor: pointer;
} }
th:hover { th:hover {
background: yellow; background: yellow;
} }
</style> </style>
</head> </head>
<body> <body>
<table id="grid"> <table id="grid">
@ -46,8 +49,8 @@
<script> <script>
/* ваш код */ /* ваш код */
</script> </script>
</body> </body>
</html> </html>

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

@ -1,5 +1,6 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<body> <body>
<link type="text/css" rel="stylesheet" href="bagua.css"> <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> <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
</tr> </tr>
<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>
<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>
<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> </td>
</tr> </tr>
<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>
<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>
<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> </td>
</tr> </tr>
<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>
<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>
<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> </td>
</tr> </tr>
@ -59,8 +87,8 @@ function highlight(node) {
selectedTd = node; selectedTd = node;
selectedTd.classList.add('highlight'); selectedTd.classList.add('highlight');
} }
</script> </script>
</body> </body>
</html> </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> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
body { body {
height: 2000px; /* подсказка должна работать независимо от прокрутки */ height: 2000px;
/* подсказка должна работать независимо от прокрутки */
} }
.tooltip { .tooltip {
position: fixed; position: fixed;
padding: 10px 20px; padding: 10px 20px;
/* красивости... */ /* красивости... */
border: 1px solid #b3c9ce; border: 1px solid #b3c9ce;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
@ -20,9 +22,9 @@
background: #fff; background: #fff;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3); box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
} }
</style> </style>
</head> </head>
<body> <body>
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p> <p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
@ -35,7 +37,6 @@
<script> <script>
var showingTooltip; var showingTooltip;
document.onmouseover = function(e) { document.onmouseover = function(e) {
@ -73,8 +74,8 @@ document.onmouseout = function(e) {
} }
}; };
</script> </script>
</body> </body>
</html> </html>

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