Skip to content

Commit d7d25f4

Browse files
iliakaniliakan
committed
up
1 parent 5ef1b92 commit d7d25f4

File tree

36 files changed

+1239
-25
lines changed

36 files changed

+1239
-25
lines changed

‎2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/solution.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
Answer: **1 and 3**.
2+
3+
Both commands result in adding `text` "as text" into the `elem`.
4+
5+
Here's an example:
6+
7+
```html run height=80
8+
<div id="elem1"></div>
9+
<div id="elem2"></div>
10+
<div id="elem3"></div>
11+
<script>
12+
let text = '<b>text</b>';
13+
14+
elem1.append(document.createTextNode(text));
15+
elem2.textContent = text;
16+
elem3.innerHTML = text;
17+
</script>
18+
```

‎2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/task.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
importance: 5
2+
3+
---
4+
5+
# createTextNode vs innerHTML vs textContent
6+
7+
We have an empty DOM element `elem` and a string `text`.
8+
9+
Which of these 3 commands do exactly the same?
10+
11+
1. `elem.append(document.createTextNode(text))`
12+
2. `elem.innerHTML = text`
13+
3. `elem.textContent = text`

‎2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
First, let's make HTML/CSS.
2+
3+
Each component of the time would look great in its own `<span>`:
4+
5+
```html
6+
<div id="clock">
7+
<span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
8+
</div>
9+
```
10+
11+
Also we'll need CSS to color them.
12+
13+
The `update` function will refresh the clock, to be called by `setInterval` every second:
14+
15+
```js
16+
function update() {
17+
let clock = document.getElementById('clock');
18+
*!*
19+
let date = new Date(); // (*)
20+
*/!*
21+
let hours = date.getHours();
22+
if (hours < 10) hours = '0' + hours;
23+
clock.children[0].innerHTML = hours;
24+
25+
let minutes = date.getMinutes();
26+
if (minutes < 10) minutes = '0' + minutes;
27+
clock.children[1].innerHTML = minutes;
28+
29+
let seconds = date.getSeconds();
30+
if (seconds < 10) seconds = '0' + seconds;
31+
clock.children[2].innerHTML = seconds;
32+
}
33+
```
34+
35+
In the line `(*)` we every time check the current date. The calls to `setInterval` are not reliable: they may happen with delays.
36+
37+
The clock-managing functions:
38+
39+
```js
40+
let timerId;
41+
42+
function clockStart() { // run the clock
43+
timerId = setInterval(update, 1000);
44+
update(); // (*)
45+
}
46+
47+
function clockStop() {
48+
clearInterval(timerId);
49+
timerId = null;
50+
}
51+
```
52+
53+
Please note that the call to `update()` is not only scheduled in `clockStart()`, but immediately run in the line `(*)`. Otherwise the visitor would have to wait till the first execution of `setInterval`. And the clock would be empty till then.

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<style>
5+
.hour {
6+
color: red
7+
}
8+
9+
.min {
10+
color: green
11+
}
12+
13+
.sec {
14+
color: blue
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
21+
<div id="clock">
22+
<span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
23+
</div>
24+
25+
<script>
26+
let timerId;
27+
28+
function update() {
29+
let clock = document.getElementById('clock');
30+
let date = new Date();
31+
32+
let hours = date.getHours();
33+
if (hours < 10) hours = '0' + hours;
34+
clock.children[0].innerHTML = hours;
35+
36+
let minutes = date.getMinutes();
37+
if (minutes < 10) minutes = '0' + minutes;
38+
clock.children[1].innerHTML = minutes;
39+
40+
let seconds = date.getSeconds();
41+
if (seconds < 10) seconds = '0' + seconds;
42+
clock.children[2].innerHTML = seconds;
43+
}
44+
45+
function clockStart() {
46+
timerId = setInterval(update, 1000);
47+
update(); // <-- start right now, don't wait 1 second till the first setInterval works
48+
}
49+
50+
function clockStop() {
51+
clearInterval(timerId);
52+
}
53+
54+
clockStart();
55+
</script>
56+
57+
</body>
58+
</html>

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<body>
4+
5+
<!-- click on this button calls clockStart() -->
6+
<input type="button" onclick="clockStart()" value="Start">
7+
8+
<!-- click on this button calls clockStop() -->
9+
<input type="button" onclick="clockStop()" value="Stop">
10+
11+
</body>
12+
</html>

‎2-ui/1-document/11-modifying-document/10-clock-setinterval/task.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
importance: 4
2+
3+
---
4+
5+
# Colored clock with setInterval
6+
7+
Create a colored clock like here:
8+
9+
[iframe src="solution" height=100]

‎2-ui/1-document/11-modifying-document/4-clear-elem/solution.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
2+
First, let's see how not to do it:
3+
4+
```js
5+
function clear(elem) {
6+
for (let i=0; i < elem.childNodes.length; i++) {
7+
elem.childNodes[i].remove();
8+
}
9+
}
10+
```
11+
12+
That won't work, because the call to `remove()` shifts the collection `elem.childNodes` every time, so elements every time start from index `0`. So `i` should not increase in the loop at all.
13+
14+
The `for..of` loop also does the same.
15+
16+
The right variant would be:
17+
18+
```js
19+
function clear(elem) {
20+
while (elem.firstChild) {
21+
elem.firstChild.remove();
22+
}
23+
}
24+
```
25+
26+
And also there's a simpler variant:
27+
28+
```js
29+
function clear(elem) {
30+
elem.innerHTML = '';
31+
}
32+
```

‎2-ui/1-document/11-modifying-document/4-clear-elem/task.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
importance: 5
2+
3+
---
4+
5+
# clear
6+
7+
Create a function `clear(elem)` that removes everything from element.
8+
9+
```html run
10+
<ol id="elem">
11+
<li>Hello</li>
12+
<li>World</li>
13+
</ol>
14+
15+
<script>
16+
function clear(elem) { /* your code */ }
17+
18+
clear(elem); // clears the list
19+
</script>
20+
```

‎2-ui/1-document/11-modifying-document/5-why-aaa/solution.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
The HTML in the task is incorrect. That's the matter. There may be no text inside the `<table>`, only table-specific tags.
2+
3+
The question can be easily solved by exploring the DOM in the browser tools. Then we'll see that the browser placed the text `"aaa"` *before* the table.
4+
5+
The HTML standard thoroughly specifies how to process bad HTML, and the behavior of the browser here is correct.

‎2-ui/1-document/11-modifying-document/5-why-aaa/task.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
importance: 1
2+
3+
---
4+
5+
# Why "ааа" remains?
6+
7+
Run the example. Why `table.remove()` does not delete the text `"aaa"`?
8+
9+
```html height=100 run
10+
<table id="table">
11+
aaa
12+
<tr>
13+
<td>Test</td>
14+
</tr>
15+
</table>
16+
17+
<script>
18+
alert(table); // the table, as it should be
19+
20+
table.remove();
21+
// why there's still aaa in the document?
22+
</script>
23+
```

0 commit comments

Comments
 (0)