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

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

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

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

table { border-collapse: collapse; }

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

th { text-align: left; }

function buildTable(data) {

// Ваш код

}

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

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

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

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

Параграф с раз, два элементами spans.

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

Расширьте анимацию кота, чтобы и кот и его шляпа летали по противоположным сторонам эллипса.

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

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

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

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

// Your code here.