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

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

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

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

@ -1,13 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
alert('Я - JavaScript!');
</script>
<script>
alert('Я - JavaScript!');
</script>
</body>
</html>
</html>

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

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

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

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

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

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

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

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

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

@ -1,8 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="pow.js"></script>
@ -12,8 +14,9 @@
<script>
var fiveInCube = pow(5, 3);
alert( fiveInCube );
alert(fiveInCube);
</script>
</body>
</html>
</html>

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

@ -1,8 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="pow.js"></script>
@ -12,8 +14,9 @@
<script>
var fiveInCube = pow(5, 3);
alert( fiveInCube );
alert(fiveInCube);
</script>
</body>
</html>
</html>

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

@ -1,24 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
<!-- в этом скрипте находятся спеки -->
<!-- в этом скрипте находятся спеки -->
<script src="test.js"></script>
<!-- в элементе с id="mocha" будут результаты тестов -->
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

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

@ -1,19 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- подключаем стили Mocha, для отображения результатов -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -24,13 +29,16 @@
}
</script>
<!-- в этом скрипте находятся спеки -->
<!-- в этом скрипте находятся спеки -->
<script src="test.js"></script>
<!-- в элементе с id="mocha" будут результаты тестов -->
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

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

@ -1,19 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- подключаем стили Mocha, для отображения результатов -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -24,13 +29,16 @@
}
</script>
<!-- в этом скрипте находятся спеки -->
<!-- в этом скрипте находятся спеки -->
<script src="test.js"></script>
<!-- в элементе с id="mocha" будут результаты тестов -->
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

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

@ -1,19 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- подключаем стили Mocha, для отображения результатов -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -24,13 +29,16 @@
}
</script>
<!-- в этом скрипте находятся спеки -->
<!-- в этом скрипте находятся спеки -->
<script src="test.js"></script>
<!-- в элементе с id="mocha" будут результаты тестов -->
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

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

@ -1,19 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- подключаем стили Mocha, для отображения результатов -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -22,22 +27,24 @@
function pow(x, n) {
var result = 1;
for(var i = 0; i < n; i++) {
for (var i = 0; i < n; i++) {
result *= x;
}
return result;
}
</script>
<!-- в этом скрипте находятся спеки -->
<!-- в этом скрипте находятся спеки -->
<script src="test.js"></script>
<!-- в элементе с id="mocha" будут результаты тестов -->
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

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

@ -1,19 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- подключаем стили Mocha, для отображения результатов -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -22,22 +27,24 @@
function pow(x, n) {
var result = 1;
for(var i = 0; i < n; i++) {
for (var i = 0; i < n; i++) {
result *= x;
}
return result;
}
</script>
<!-- в этом скрипте находятся спеки -->
<!-- в этом скрипте находятся спеки -->
<script src="test.js"></script>
<!-- в элементе с id="mocha" будут результаты тестов -->
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

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

@ -1,19 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- подключаем стили Mocha, для отображения результатов -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -22,23 +27,26 @@
function pow(x, n) {
if (n < 0) return NaN;
if (Math.round(n) != n) return NaN;
if (n == 0 && x ==0) return NaN;
if (n == 0 && x == 0) return NaN;
var result = 1;
for(var i=0; i<n; i++) {
for (var i = 0; i < n; i++) {
result *= x;
}
return result;
}
</script>
<!-- в этом скрипте находятся спеки -->
<!-- в этом скрипте находятся спеки -->
<script src="test.js"></script>
<!-- в элементе с id="mocha" будут результаты тестов -->
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

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

@ -1,19 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- подключаем стили Mocha, для отображения результатов -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -24,13 +29,16 @@
}
</script>
<!-- в этом скрипте находятся спеки -->
<!-- в этом скрипте находятся спеки -->
<script src="test.js"></script>
<!-- в элементе с id="mocha" будут результаты тестов -->
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

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

@ -1,19 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- подключаем стили Mocha, для отображения результатов -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -21,20 +26,23 @@
<script>
function pow(x, n) {
var result = 1;
for(var i=0; i<n; i++) {
for (var i = 0; i < n; i++) {
result *= x;
}
return result;
}
</script>
<!-- в этом скрипте находятся спеки -->
<!-- в этом скрипте находятся спеки -->
<script src="test.js"></script>
<!-- в элементе с id="mocha" будут результаты тестов -->
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

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

@ -1,19 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- подключаем стили Mocha, для отображения результатов -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.css">
<!-- подключаем библиотеку Mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.js"></script>
<!-- настраиваем Mocha: предстоит BDD-тестирование -->
<script> mocha.setup('bdd'); </script>
<script>
mocha.setup('bdd');
</script>
<!-- подключаем chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/2.0.0/chai.js"></script>
<!-- в chai есть много всего, выносим assert в глобальную область -->
<script> var assert = chai.assert; </script>
<script>
var assert = chai.assert;
</script>
</head>
<body>
@ -21,20 +26,23 @@
<script>
function pow(x, n) {
var result = 1;
for(var i=0; i<n; i++) {
for (var i = 0; i < n; i++) {
result *= x;
}
return result;
}
</script>
<!-- в этом скрипте находятся спеки -->
<!-- в этом скрипте находятся спеки -->
<script src="test.js"></script>
<!-- в элементе с id="mocha" будут результаты тестов -->
<div id="mocha"></div>
<!-- запустить тесты! -->
<script> mocha.run(); </script>
<script>
mocha.run();
</script>
</body>
</html>

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

@ -1,5 +1,6 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script>
@ -7,14 +8,16 @@
</script>
<script src="hello.js"></script>
</head>
<body>
<button>Кнопка</button>
<button>Кнопка</button>
<script>
alert(message);
</script>
<script>
alert(message);
</script>
</body>
</html>

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

@ -1,5 +1,6 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script>
@ -7,14 +8,16 @@
</script>
<script src="hello.js"></script>
</head>
<body>
<button>Кнопка</button>
<button>Кнопка</button>
<script>
alert(message);
</script>
<script>
alert(message);
</script>
</body>
</html>

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

@ -1,49 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> div { height: 18px; margin: 1px; background-color:green; } </style>
<style>
div {
height: 18px;
margin: 1px;
background-color: green;
}
</style>
</head>
<body>
<input type="button" id="start" value="Старт">
<input type="button" id="stop" value="Стоп" disabled>
<input type="button" id="start" value="Старт">
<input type="button" id="stop" value="Стоп" disabled>
<script>
for (var i=0; i<=20; i+=2) {
document.write('<div>'+i+'</div>');
}
<script>
for (var i = 0; i <= 20; i += 2) {
document.write('<div>' + i + '</div>');
}
var startButton = document.getElementById('start');
var stopButton = document.getElementById('stop');
var startButton = document.getElementById('start');
var stopButton = document.getElementById('stop');
var timers = [];
var timers = [];
stopButton.onclick = function() {
startButton.disabled = false;
stopButton.disabled = true;
stopButton.onclick = function() {
startButton.disabled = false;
stopButton.disabled = true;
for(var i=0; i<timers.length; i++) clearInterval(timers[i]);
timers = [];
}
for (var i = 0; i < timers.length; i++) clearInterval(timers[i]);
timers = [];
}
startButton.onclick = function() {
startButton.disabled = true;
stopButton.disabled = false;
startButton.onclick = function() {
startButton.disabled = true;
stopButton.disabled = false;
var divs = document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++) {
animateDiv(divs, i);
}
}
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
animateDiv(divs, i);
}
}
function animateDiv(divs, i) {
var div = divs[i], speed = div.innerHTML;
timers[i] = setInterval(function() {
div.style.width = (parseInt(div.style.width||0) + 2) % 400 + 'px'
}, speed);
}
</script>
function animateDiv(divs, i) {
var div = divs[i],
speed = div.innerHTML;
timers[i] = setInterval(function() {
div.style.width = (parseInt(div.style.width || 0) + 2) % 400 + 'px'
}, speed);
}
</script>
</body>
</html>
</html>

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

@ -1,48 +1,51 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
function Machine(power) {
this._enabled = false;
this.enable = function() {
this._enabled = true;
};
<script>
function Machine(power) {
this._enabled = false;
this.disable = function() {
this._enabled = false;
};
}
this.enable = function() {
this._enabled = true;
};
function CoffeeMachine(power) {
Machine.apply(this, arguments);
var waterAmount = 0;
this.setWaterAmount = function(amount) {
waterAmount = amount;
};
function onReady() {
alert('Кофе готов!');
}
this.run = function() {
if (!this._enabled) {
throw new Error("Кофеварка выключена");
this.disable = function() {
this._enabled = false;
};
}
setTimeout(onReady, 1000);
};
}
function CoffeeMachine(power) {
Machine.apply(this, arguments);
var coffeeMachine = new CoffeeMachine(10000);
coffeeMachine.run();
</script>
var waterAmount = 0;
this.setWaterAmount = function(amount) {
waterAmount = amount;
};
function onReady() {
alert('Кофе готов!');
}
this.run = function() {
if (!this._enabled) {
throw new Error("Кофеварка выключена");
}
setTimeout(onReady, 1000);
};
}
var coffeeMachine = new CoffeeMachine(10000);
coffeeMachine.run();
</script>
</body>
</html>

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

@ -1,42 +1,45 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
function Machine(power) {
this._enabled = false;
this.enable = function() {
this._enabled = true;
};
<script>
function Machine(power) {
this._enabled = false;
this.disable = function() {
this._enabled = false;
};
}
this.enable = function() {
this._enabled = true;
};
function CoffeeMachine(power) {
Machine.apply(this, arguments);
this.disable = function() {
this._enabled = false;
};
}
var waterAmount = 0;
function CoffeeMachine(power) {
Machine.apply(this, arguments);
this.setWaterAmount = function(amount) {
waterAmount = amount;
};
var waterAmount = 0;
function onReady() {
alert('Кофе готово!');
}
this.setWaterAmount = function(amount) {
waterAmount = amount;
};
this.run = function() {
setTimeout(onReady, 1000);
};
function onReady() {
alert('Кофе готово!');
}
}
</script>
this.run = function() {
setTimeout(onReady, 1000);
};
}
</script>
</body>
</html>

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

@ -1,55 +1,58 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
function Machine(power) {
this._enabled = false;
this.enable = function() {
this._enabled = true;
};
<script>
function Machine(power) {
this._enabled = false;
this.disable = function() {
this._enabled = false;
};
}
this.enable = function() {
this._enabled = true;
};
function CoffeeMachine(power) {
Machine.apply(this, arguments);
var waterAmount = 0;
var timerId;
this.setWaterAmount = function(amount) {
waterAmount = amount;
};
function onReady() {
alert('Кофе готов!');
}
var parentDisable = this.disable;
this.disable = function() {
parentDisable.call(this);
clearTimeout(timerId);
}
this.run = function() {
if (!this._enabled) {
throw new Error("Кофеварка выключена");
this.disable = function() {
this._enabled = false;
};
}
timerId = setTimeout(onReady, 1000);
};
}
function CoffeeMachine(power) {
Machine.apply(this, arguments);
var coffeeMachine = new CoffeeMachine(10000);
coffeeMachine.run();
</script>
var waterAmount = 0;
var timerId;
this.setWaterAmount = function(amount) {
waterAmount = amount;
};
function onReady() {
alert('Кофе готов!');
}
var parentDisable = this.disable;
this.disable = function() {
parentDisable.call(this);
clearTimeout(timerId);
}
this.run = function() {
if (!this._enabled) {
throw new Error("Кофеварка выключена");
}
timerId = setTimeout(onReady, 1000);
};
}
var coffeeMachine = new CoffeeMachine(10000);
coffeeMachine.run();
</script>
</body>
</html>

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

@ -1,18 +1,21 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Часики в консоли</title>
<meta charset="utf-8">
<title>Часики в консоли</title>
<meta charset="utf-8">
</head>
<body>
<script src="clock.js"></script>
<script>
<script src="clock.js"></script>
<script>
var clock = new Clock({
template: 'h:m:s'
template: 'h:m:s'
});
clock.start();
</script>
</script>
</body>
</html>
</html>

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

@ -1,18 +1,21 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Часики в консоли</title>
<meta charset="utf-8">
<title>Часики в консоли</title>
<meta charset="utf-8">
</head>
<body>
<script src="clock.js"></script>
<script>
<script src="clock.js"></script>
<script>
var clock = new Clock({
template: 'h:m:s'
template: 'h:m:s'
});
clock.start();
</script>
</script>
</body>
</html>
</html>

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

@ -1,23 +1,26 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Часики в консоли</title>
<meta charset="utf-8">
<title>Часики в консоли</title>
<meta charset="utf-8">
</head>
<body>
<script src="clock.js"></script>
<script src="clock.js"></script>
<script src="extended-clock.js"></script>
<script src="extended-clock.js"></script>
<script>
<script>
var lowResolutionClock = new ExtendedClock({
template: 'h:m:s',
precision: 10000
template: 'h:m:s',
precision: 10000
});
lowResolutionClock.start();
</script>
</script>
</body>
</html>
</html>

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

@ -1,21 +1,23 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Часики в консоли</title>
<meta charset="utf-8">
<title>Часики в консоли</title>
<meta charset="utf-8">
</head>
<body>
<!-- исходные часы, от них нужно унаследовать -->
<script src="clock.js"></script>
<script>
<!-- исходные часы, от них нужно унаследовать -->
<script src="clock.js"></script>
<script>
var clock = new Clock({
template: 'h:m:s'
template: 'h:m:s'
});
clock.start();
/* ... ваш код для ExtendedClock */
/* ... ваш код для ExtendedClock */
/*
Надо: часы, которые тикают раз в 10 секунд (точность 10000)
@ -26,8 +28,8 @@
lowResolutionClock.start();
*/
</script>
</script>
</body>
</html>
</html>

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

@ -1,67 +1,64 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
</head>
<body>
<script src="menu.js"></script>
<script>
function AnimatingMenu() {
Menu.apply(this, arguments);
}
AnimatingMenu.prototype = Object.create(Menu.prototype);
AnimatingMenu.prototype.STATE_ANIMATING = 2;
AnimatingMenu.prototype.open = function() {
var self = this;
this._state = this.STATE_ANIMATING;
this._timer = setTimeout(function() {
Menu.prototype.open.call(self);
}, 1000);
};
AnimatingMenu.prototype.close = function() {
clearTimeout(this._timer);
Menu.prototype.close.apply(this);
};
AnimatingMenu.prototype._stateAsString = function() {
switch(this._state) {
case this.STATE_ANIMATING:
return 'анимация';
default:
return Menu.prototype._stateAsString.call(this);
<script src="menu.js"></script>
<script>
function AnimatingMenu() {
Menu.apply(this, arguments);
}
};
// тест, использование..
var menu = new AnimatingMenu();
AnimatingMenu.prototype = Object.create(Menu.prototype);
menu.showState(); // закрыто
AnimatingMenu.prototype.STATE_ANIMATING = 2;
menu.open();
menu.showState(); // анимация
AnimatingMenu.prototype.open = function() {
var self = this;
setTimeout(function() { // через 1 секунду
menu.showState(); // открыто
this._state = this.STATE_ANIMATING;
this._timer = setTimeout(function() {
Menu.prototype.open.call(self);
}, 1000);
};
AnimatingMenu.prototype.close = function() {
clearTimeout(this._timer);
Menu.prototype.close.apply(this);
};
AnimatingMenu.prototype._stateAsString = function() {
switch (this._state) {
case this.STATE_ANIMATING:
return 'анимация';
default:
return Menu.prototype._stateAsString.call(this);
}
};
// тест, использование..
var menu = new AnimatingMenu();
menu.close();
menu.showState(); // закрыто
}, 1000);
menu.open();
menu.showState(); // анимация
setTimeout(function() { // через 1 секунду
menu.showState(); // открыто
</script>
menu.close();
menu.showState(); // закрыто
}, 1000);
</script>
</body>
</html>
</html>

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

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