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

up

Browse source
This commit is contained in:
Ilya Kantor 2017-03-05 19:49:29 +03:00
parent 7b3f4550fd
commit d85be5f17b
12 changed files with 47 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

2
2-ui/1-document/07-modifying-document/5-why-aaa/task.md
View file

@ -2,7 +2,7 @@ importance: 1
--- ---
# Why "ааа" remains? # Why "aaa" remains?
Run the example. Why `table.remove()` does not delete the text `"aaa"`? Run the example. Why `table.remove()` does not delete the text `"aaa"`?

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

@ -27,7 +27,7 @@
container.innerHTML = createTreeText(obj); container.innerHTML = createTreeText(obj);
} }
function createTreeText(obj) { // отдельная рекурсивная функция function createTreeText(obj) { // standalone recursive function
let li = ''; let li = '';
for (let key in obj) { for (let key in obj) {
li += '<li>' + key + createTreeText(obj[key]) + '</li>'; li += '<li>' + key + createTreeText(obj[key]) + '</li>';
@ -38,7 +38,6 @@
return ul || ''; return ul || '';
} }
let container = document.getElementById('container');
createTree(container, data); createTree(container, data);
</script> </script>
</body> </body>

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

@ -43,12 +43,12 @@
let lis = document.getElementsByTagName('li'); let lis = document.getElementsByTagName('li');
for (let li of lis) { for (let li of lis) {
// получить количество детей // get the count of all <li> below this <li>
let childCount = li.getElementsByTagName('li').length; let descendantsCount = li.getElementsByTagName('li').length;
if (!childCount) continue; if (!descendantsCount) continue;
// добавить кол-во детей к текстовому узлу // add directly to the text node (append to the text)
li.firstChild.data += ' [' + childCount + ']'; li.firstChild.data += ' [' + descendantsCount + ']';
} }
</script> </script>

18
2-ui/1-document/08-styles-and-classes/getiecomputedstyle.view/getiecomputedstyle.js
View file

@ -1,18 +0,0 @@
function getIEComputedStyle(elem, prop) {
var value = elem.currentStyle[prop] || 0;
// we use 'left' property as a place holder so backup values
var leftCopy = elem.style.left;
var runtimeLeftCopy = elem.runtimeStyle.left;
// assign to runtimeStyle and get pixel value
elem.runtimeStyle.left = elem.currentStyle.left;
elem.style.left = (prop === "fontSize") ? "1em" : value;
value = elem.style.pixelLeft + "px";
// restore values for left
elem.style.left = leftCopy;
elem.runtimeStyle.left = runtimeLeftCopy;
return value;
}

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

@ -1,30 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="getiecomputedstyle.js"></script>
</head>
<body>
<style>
#margin-test {
margin: 1%;
border: 1px solid black;
}
</style>
<div id="margin-test">Тестовый элемент с margin 1%</div>
<script>
var elem = document.getElementById('margin-test');
if (!window.getComputedStyle) { // старые IE
document.write(getIEComputedStyle(elem, 'marginTop'));
} else {
document.write('Пример работает только в IE8-');
}
</script>
</body>
</html>

2
2-ui/1-document/09-size-and-scroll/article.md
View file

@ -152,7 +152,7 @@ They include the content width together with paddings, but without the scrollbar
![](metric-client-width-height.png) ![](metric-client-width-height.png)
On the picture above let's first consider `clientHeight`: it's easier to evaluate. There's no horizontal scrollbar, so its exactly the sum of what's inside the borders: CSS-высота `200px` plus top and bottom paddings (`2*20px`) total `240px`. On the picture above let's first consider `clientHeight`: it's easier to evaluate. There's no horizontal scrollbar, so its exactly the sum of what's inside the borders: CSS-height `200px` plus top and bottom paddings (`2*20px`) total `240px`.
Now `clientWidth` -- here the content width is not `300px`, but `284px`, because `16px` are occupied by the scrollbbar. So the sum is `284px` plus left and right paddings, total `324px`. Now `clientWidth` -- here the content width is not `300px`, but `284px`, because `16px` are occupied by the scrollbbar. So the sum is `284px` plus left and right paddings, total `324px`.

2
2-ui/1-document/10-size-and-scroll-window/article.md
View file

@ -90,7 +90,7 @@ We can do the same for the page:
It should work. It should work.
But there's a simpler, more universal solution: special methods [window.scrollBy(x,y)](mdn:api/Window/scrollBy) и [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo). But there's a simpler, more universal solution: special methods [window.scrollBy(x,y)](mdn:api/Window/scrollBy) and [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo).
- The method `scrollBy(x,y)` scrolls the page relative to its current position. For instance, `scrollBy(0,10)` scrolls the page `10px` down. - The method `scrollBy(x,y)` scrolls the page relative to its current position. For instance, `scrollBy(0,10)` scrolls the page `10px` down.

8
2-ui/2-events/1-introduction-browser-events/01-hide-other/source.view/index.html
View file

@ -7,13 +7,13 @@
<body> <body>
<input type="button" id="hider" value="Нажмите, чтобы спрятать текст" /> <input type="button" id="hider" value="Click to hide the text" />
<div id="text">Текст</div> <div id="text">Text</div>
<script> <script>
/* ваш код */ /* your code */
</script> </script>
</body>
</body>
</html> </html>

15
2-ui/2-events/1-introduction-browser-events/06-hide-message/solution.md
View file

@ -1,10 +1,13 @@
1. Изменим HTML/CSS, чтобы кнопка была в нужном месте сообщения. Кнопка -- это тег `<button>`, поэтому понадобится несколько стилей. To add the button we can use either `position:absolute` (and make the pane `position:relative`) or `float:right`. The `float:right` has the benefit that the button never overlaps the text, but `position:absolute` gives more freedom. So the choice is yours.
Расположить кнопку справа можно при помощи `position:relative` для `pane`, а для кнопки `position:absolute + right/top`. Так как `position:absolute` вынимает элемент из потока, то кнопка может частично оказаться "сверху" текста заголовка, перекрыв его конец. Чтобы этого не произошло, можно добавить `padding-right` к заголовку. Then for each pane the code can be like:
```js
pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
```
Если использовать `float:right`, то кнопка никогда не перекроет текст. Это, пожалуй хорошо. Then the `<button>` becomes `pane.firstChild`, so we can add a handler to it like this:
С другой стороны, потенциальным преимуществом способа с `position` по сравнению с `float` в данном случае является возможность поместить элемент кнопки в HTML *после текста*, а не до него.
2. Для того, чтобы получить кнопку из контейнера, используем `querySelectorAll`. На каждую кнопку повесим обработчик, который будет убирать родителя. Найти родителя можно через `parentNode`.
```js
pane.firstChild.onclick = () => pane.remove();
```

20
2-ui/2-events/1-introduction-browser-events/07-carousel/solution.view/index.html
View file

@ -11,16 +11,16 @@
<button class="arrow prev">⇦</button> <button class="arrow prev">⇦</button>
<div class="gallery"> <div class="gallery">
<ul class="images"> <ul class="images">
<li><img src="https://js.cx/carousel/1.png"></li> <li><img src="https://en.js.cx/carousel/1.png"></li>
<li><img src="https://js.cx/carousel/2.png"></li> <li><img src="https://en.js.cx/carousel/2.png"></li>
<li><img src="https://js.cx/carousel/3.png"></li> <li><img src="https://en.js.cx/carousel/3.png"></li>
<li><img src="https://js.cx/carousel/4.png"></li> <li><img src="https://en.js.cx/carousel/4.png"></li>
<li><img src="https://js.cx/carousel/5.png"></li> <li><img src="https://en.js.cx/carousel/5.png"></li>
<li><img src="https://js.cx/carousel/6.png"></li> <li><img src="https://en.js.cx/carousel/6.png"></li>
<li><img src="https://js.cx/carousel/7.png"></li> <li><img src="https://en.js.cx/carousel/7.png"></li>
<li><img src="https://js.cx/carousel/8.png"></li> <li><img src="https://en.js.cx/carousel/8.png"></li>
<li><img src="https://js.cx/carousel/9.png"></li> <li><img src="https://en.js.cx/carousel/9.png"></li>
<li><img src="https://js.cx/carousel/10.png"></li> <li><img src="https://en.js.cx/carousel/10.png"></li>
</ul> </ul>
</div> </div>
<button class="arrow next">⇨</button> <button class="arrow next">⇨</button>

24
2-ui/2-events/1-introduction-browser-events/07-carousel/source.view/index.html
View file

@ -7,28 +7,28 @@
<body> <body>
<!-- ваша верстка виджета, ваши стили --> <!-- create your markup and styles -->
<button class="arrow">⇦</button> <button class="arrow">⇦</button>
<button class="arrow">⇨</button> <button class="arrow">⇨</button>
<ul> <ul>
<li><img src="https://js.cx/carousel/1.png"></li> <li><img src="https://en.js.cx/carousel/1.png"></li>
<li><img src="https://js.cx/carousel/2.png"></li> <li><img src="https://en.js.cx/carousel/2.png"></li>
<li><img src="https://js.cx/carousel/3.png"></li> <li><img src="https://en.js.cx/carousel/3.png"></li>
<li><img src="https://js.cx/carousel/4.png"></li> <li><img src="https://en.js.cx/carousel/4.png"></li>
<li><img src="https://js.cx/carousel/5.png"></li> <li><img src="https://en.js.cx/carousel/5.png"></li>
<li><img src="https://js.cx/carousel/6.png"></li> <li><img src="https://en.js.cx/carousel/6.png"></li>
<li><img src="https://js.cx/carousel/7.png"></li> <li><img src="https://en.js.cx/carousel/7.png"></li>
<li><img src="https://js.cx/carousel/8.png"></li> <li><img src="https://en.js.cx/carousel/8.png"></li>
<li><img src="https://js.cx/carousel/9.png"></li> <li><img src="https://en.js.cx/carousel/9.png"></li>
<li><img src="https://js.cx/carousel/10.png"></li> <li><img src="https://en.js.cx/carousel/10.png"></li>
</ul> </ul>
<script> <script>
// label the images, just for convenience, to visually track them // label the images to visually track them, just for convenience,
// this code can be removed // this code can be removed
let i = 1; let i = 1;
for(let li of carousel.querySelectorAll('li')) { for(let li of carousel.querySelectorAll('li')) {

4
2-ui/2-events/1-introduction-browser-events/article.md
View file

@ -48,7 +48,7 @@ For instance, to assign a `click` handler for an `input`, we can use `onclick`,
On mouse click, the code inside `onclick` runs. On mouse click, the code inside `onclick` runs.
Please note that inside `onclick` we use single quotes, because the attribute itself is in double quotes. If we fforget that the code is inside the attribute and use double quotes inside, like this: `onclick="alert("Клик!")"`, then it won't work right. Please note that inside `onclick` we use single quotes, because the attribute itself is in double quotes. If we fforget that the code is inside the attribute and use double quotes inside, like this: `onclick="alert("Click!")"`, then it won't work right.
An HTML-attribute is not a convenient place to write a lot of code, so we'd better create a JavaScript function and call it there. An HTML-attribute is not a convenient place to write a lot of code, so we'd better create a JavaScript function and call it there.
@ -340,7 +340,7 @@ Here's an example of getting mouse coordinates from the event object:
<script> <script>
elem.onclick = function(*!*event*/!*) { elem.onclick = function(*!*event*/!*) {
// show event type, element and coordinates of the click // show event type, element and coordinates of the click
alert(event.type + " на " + event.currentTarget); alert(event.type + " at " + event.currentTarget);
alert(event.clientX + ":" + event.clientY); alert(event.clientX + ":" + event.clientY);
}; };
</script> </script>