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

clock

Browse source
This commit is contained in:
Ilya Kantor 2019-03-07 10:35:58 +03:00
parent 16cfa3037b
commit cdc1693443
7 changed files with 43 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

1
1-js/09-classes/03-class-inheritance/2-clock-class-extended/solution.md
View file

@ -0,0 +1 @@
[js src="solution.view/extended-clock.js"]

12
1-js/09-classes/03-class-inheritance/2-clock-class-extended/solution.view/clock.js
View file

@ -1,9 +1,9 @@
class Clock { class Clock {
constructor({ template }) { constructor({ template }) {
this._template = template; this.template = template;
} }
_render() { render() {
let date = new Date(); let date = new Date();
let hours = date.getHours(); let hours = date.getHours();
@ -15,7 +15,7 @@ class Clock {
let secs = date.getSeconds(); let secs = date.getSeconds();
if (secs < 10) secs = '0' + secs; if (secs < 10) secs = '0' + secs;
let output = this._template let output = this.template
.replace('h', hours) .replace('h', hours)
.replace('m', mins) .replace('m', mins)
.replace('s', secs); .replace('s', secs);
@ -24,11 +24,11 @@ class Clock {
} }
stop() { stop() {
clearInterval(this._timer); clearInterval(this.timer);
} }
start() { start() {
this._render(); this.render();
this._timer = setInterval(() => this._render(), 1000); this.timer = setInterval(() => this.render(), 1000);
} }
} }

6
1-js/09-classes/03-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js
View file

@ -2,11 +2,11 @@ class ExtendedClock extends Clock {
constructor(options) { constructor(options) {
super(options); super(options);
let { precision=1000 } = options; let { precision=1000 } = options;
this._precision = precision; this.precision = precision;
} }
start() { start() {
this._render(); this.render();
this._timer = setInterval(() => this._render(), this._precision); this.timer = setInterval(() => this.render(), this.precision);
} }
}; };

11
1-js/09-classes/03-class-inheritance/2-clock-class-extended/solution.view/index.html
View file

@ -1,12 +1,4 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html>
<head>
<title>Console clock</title>
</head>
<body>
<script src="clock.js"></script> <script src="clock.js"></script>
<script src="extended-clock.js"></script> <script src="extended-clock.js"></script>
@ -18,6 +10,3 @@
lowResolutionClock.start(); lowResolutionClock.start();
</script> </script>
</body>
</html>

12
1-js/09-classes/03-class-inheritance/2-clock-class-extended/source.view/clock.js
View file

@ -1,9 +1,9 @@
class Clock { class Clock {
constructor({ template }) { constructor({ template }) {
this._template = template; this.template = template;
} }
_render() { render() {
let date = new Date(); let date = new Date();
let hours = date.getHours(); let hours = date.getHours();
@ -15,7 +15,7 @@ class Clock {
let secs = date.getSeconds(); let secs = date.getSeconds();
if (secs < 10) secs = '0' + secs; if (secs < 10) secs = '0' + secs;
let output = this._template let output = this.template
.replace('h', hours) .replace('h', hours)
.replace('m', mins) .replace('m', mins)
.replace('s', secs); .replace('s', secs);
@ -24,11 +24,11 @@ class Clock {
} }
stop() { stop() {
clearInterval(this._timer); clearInterval(this.timer);
} }
start() { start() {
this._render(); this.render();
this._timer = setInterval(() => this._render(), 1000); this.timer = setInterval(() => this.render(), 1000);
} }
} }

13
1-js/09-classes/03-class-inheritance/2-clock-class-extended/source.view/index.html
View file

@ -1,13 +1,4 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html>
<head>
<title>Console clock</title>
</head>
<body>
<!-- source clock -->
<script src="clock.js"></script> <script src="clock.js"></script>
<script> <script>
let clock = new Clock({ let clock = new Clock({
@ -28,7 +19,3 @@
lowResolutionClock.start(); lowResolutionClock.start();
*/ */
</script> </script>
</body>
</html>

3
1-js/09-classes/03-class-inheritance/2-clock-class-extended/task.md
View file

@ -6,6 +6,9 @@ importance: 5
We've got a `Clock` class. As of now, it prints the time every second. We've got a `Clock` class. As of now, it prints the time every second.
[js src="source.view/clock.js"]
Create a new class `ExtendedClock` that inherits from `Clock` and adds the parameter `precision` -- the number of `ms` between "ticks". Should be `1000` (1 second) by default. Create a new class `ExtendedClock` that inherits from `Clock` and adds the parameter `precision` -- the number of `ms` between "ticks". Should be `1000` (1 second) by default.
- Your code should be in the file `extended-clock.js` - Your code should be in the file `extended-clock.js`