Выразительный JavaScript (Хавербеке) - страница 141
>. Здесь пригодится функция >Object.keys
, возвращающая массив, содержащий имена свойств объекта.Когда вы разберётесь с основами, выровняйте ячейки с числами по правому краю, изменив их свойство >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.
>
14. Обработка событий
Вы властны над своим разумом, но не над внешними событиями. Когда вы поймёте это, вы обретёте силу.
Марк Аврелий, «Медитации»
Некоторые программы работают с вводом пользователя, мышью и клавиатурой. Время возникновения такого ввода и последовательность данных нельзя предсказать заранее. Это требует иного подхода к контролю над порядком выполнения программы, чем уже привычный нам.