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

update

Browse source
This commit is contained in:
Ilya Kantor 2014-11-16 01:40:20 +03:00
parent 962caebbb7
commit 87bf53d076
1825 changed files with 94929 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

67
2-ui/1-document/11-modifying-document/7-create-object-tree/build-tree-dom.view/index.html Executable file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="container"></div>
<script>
var data = {
"Рыбы":{
"Форель":{},
"Щука":{}
},
"Деревья":{
"Хвойные":{
"Лиственница":{},
"Ель":{}
},
"Цветковые":{
"Берёза":{},
"Тополь":{}
}
}
};
function createTree(container, obj) {
container.appendChild( createTreeDom(obj) );
}
function createTreeDom(obj) {
// если нет детей, то рекурсивный вызов ничего не возвращает
// так что вложенный UL не будет создан
if (isObjectEmpty(obj)) return;
var ul = document.createElement('ul');
for (var key in obj) {
var li = document.createElement('li');
li.innerHTML = key;
var childrenUl = createTreeDom(obj[key]);
if (childrenUl) li.appendChild(childrenUl);
ul.appendChild(li);
}
return ul;
}
function isObjectEmpty(obj) {
for (var key in obj) {
return false;
}
return true;
}
var container = document.getElementById('container');
createTree(container, data);
</script>
</body>
</html>

6
2-ui/1-document/11-modifying-document/7-create-object-tree/solution.md Normal file
View file

@ -0,0 +1,6 @@
Решения через рекурсию.
<ol>
<li>[edit src="solution"]Через innerHTML[/edit].</li>
<li>[edit src="build-tree-dom"]Через DOM[/edit].</li>
</ol>

49
2-ui/1-document/11-modifying-document/7-create-object-tree/solution.view/index.html Executable file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="container"></div>
<script>
var data = {
"Рыбы":{
"Форель":{},
"Щука":{}
},
"Деревья":{
"Хвойные":{
"Лиственница":{},
"Ель":{}
},
"Цветковые":{
"Берёза":{},
"Тополь":{}
}
}
};
function createTree(container, obj) {
container.innerHTML = createTreeText(obj);
}
function createTreeText(obj) { // отдельная рекурсивная функция
var li = '';
for (var key in obj) {
li += '<li>' + key + createTreeText(obj[key]) + '</li>';
}
if (li) {
var ul = '<ul>' + li + '</ul>'
}
return ul || '';
}
var container = document.getElementById('container');
createTree(container, data);
</script>
</body>
</html>

64
2-ui/1-document/11-modifying-document/7-create-object-tree/source.view/index.html Executable file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="tree"></div>
<!-- Результат должен быть таким:
<div id="tree">
<ul>
<li>Рыбы
<ul>
<li>Форель</li>
<li>Щука</li>
</ul>
</li>
<li>Деревья
<ul>
<li>Хвойные
<ul>
<li>Лиственница</li>
<li>Ель</li>
</ul>
</li>
<li>Цветковые
<ul>
<li>Берёза</li>
<li>Тополь</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
-->
<script>
var data = {
"Рыбы":{
"Форель":{},
"Щука":{}
},
"Деревья":{
"Хвойные":{
"Лиственница":{},
"Ель":{}
},
"Цветковые":{
"Берёза":{},
"Тополь":{}
}
}
};
/* ваш код */
createTree(document.getElementById('tree'), data);
</script>
</body>
</html>

52
2-ui/1-document/11-modifying-document/7-create-object-tree/task.md Normal file
View file

@ -0,0 +1,52 @@
# Создайте дерево из объекта
[importance 5]
Напишите функцию, которая создаёт вложенный список `UL/LI` (дерево) из объекта.
Например:
```js
var data = {
"Рыбы":{
"Форель":{},
"Щука":{}
},
"Деревья":{
"Хвойные":{
"Лиственница":{},
"Ель":{}
},
"Цветковые":{
"Берёза":{},
"Тополь":{}
}
}
};
```
Синтаксис:
```js
var container = document.getElementById('container');
*!*
createTree(container, data); // создаёт
*/!*
```
Результат (дерево):
[iframe border=1 src="solution"]
Выберите один из двух способов решения этой задачи:
<ol>
<li>Создать строку, а затем присвоить через `container.innerHTML`.</li>
<li>Создавать узлы через методы DOM.</li>
</ol>
Если получится -- сделайте оба.
[edit src="source" task/]
P.S. Желательно, чтобы в дереве не было лишних элементов, в частности -- пустых `<ul></ul>` на нижнем уровне.