Упражнения.

Строим таблицу.

Мы строили таблицы из простого текста в главе 6. HTML упрощает построение таблиц. Таблица в HTML строится при помощи следующих тегов:

<table>

<tr>

<th>name</th>

<th>height</th>

<th>country</th>

</tr>

<tr>

<td>Kilimanjaro</td>

<td>5895</td>

<td>Tanzania</td>

</tr>

</table>

Для каждой строки в теге <table> содержится тег <tr>. Внутри него мы можем размещать ячейки: либо ячейки заголовков <th>, либо обычные ячейки <td>.

Те же данные, что мы использовали в главе 6, снова доступны в переменной MOUNTAINS.

Напишите функцию buildTable, которая, принимая массив объектов с одинаковыми свойствами, строит структуру DOM, представляющую таблицу. У таблицы должна быть строка с заголовками, где имена свойств обёрнуты в элементы <th>, и должно быть по одной строчке на объект из массива, где его свойства обёрнуты в элементы <td>. Здесь пригодится функция Object.keys, возвращающая массив, содержащий имена свойств объекта.

Когда вы разберётесь с основами, выровняйте ячейки с числами по правому краю, изменив их свойство style.textAlign на "right".

<style>

/* Определяет стили для красивых таблиц */

Table { border-collapse: collapse; }.

Td, th { border: 1px solid black; padding: 3px 8px; }.

Th { text-align: left; }.

</style>

<script>

Function buildTable(data) {

// Ваш код.

}

Document.body.appendChild(buildTable(MOUNTAINS));

</script>

Элементы по имени тегов.

Метод getElementsByTagName возвращает все дочерние элементы с заданным именем тега. Сделайте свою версию этого метода в виде обычной функции, которая принимает узел и строчку (имя тега) и возвращает массив, содержащий все нисходящие узлы с заданным именем тега.

Чтобы выяснить имя тега элемента, используйте свойство tagName. Заметьте, что оно возвратит имя тега в верхнем регистре. Используйте методы строк toLowerCase или toUpperCase.

<h1>Заголовок с элементом <span>span</span> внутри.</h1>

<р>Параграф с <sраn>раз</sраn>, <sраn>два</sраn> элементами spans.</p>

<script>

Function byTagName(node, tagName) {

// Ваш код.

}

Console.log(byTagName(document.body, "h1").length);

// → 1.

Console.log(byTagName(document.body, "span").length);

// → 3.

Var para = document.querySelector("p");

Console.log(byTagName(para, "span").length);

// → 2.

</script>

Шляпа кота.

Расширьте анимацию кота, чтобы и кот и его шляпа <img src="img/hat.png"> летали по противоположным сторонам эллипса.

Или пусть шляпа летает вокруг кота. Или ещё что-нибудь интересное придумайте.

Чтобы упростить расположение множества объектов, неплохо будет переключиться на абсолютное позиционирование. Тогда top и left будут считаться относительно левого верхнего угла документа. Чтобы не использовать отрицательные координаты, вы можете добавить заданное число пикселей к значениям position.

<img src="img/cat.png" id="cat" style="position: absolute">

<img src="img/hat.png" id="hat" style="position: absolute">

<script>

Var cat = document.querySelector("#cat");

Var hat = document.querySelector("#hat");

// Your code here.

</script>