Выразительный JavaScript (Хавербеке) - страница 140
>Math.sin выдаёт координату y. Позиции (или углы) больше, чем 2π или меньше чем 0, тоже допустимы – повороты повторяются так, что a+2π означает тот же самый угол, что и a.
Использование синуса и косинуса для вычисления координат
Анимация кота хранит счётчик angle для текущего угла поворота анимации, и увеличивает его пропорционально прошедшему времени каждый раз при вызове функции >animation. Этот угол используется для подсчёта текущей позиции элемента >image. Стиль >top подсчитывается через >Math.sin и умножается на 20 – это вертикальный радиус нашего эллипса. Стиль >left считается через >Math.cos и умножается на 200, так что ширина эллипса гораздо больше высоты.
Стилям обычно требуются единицы измерения. В нашем случае приходится добавлять >"px" к числу, чтобы объяснить браузеру, что мы считаем в пикселях (а не в сантиметрах, ems или других единицах). Это легко забыть. Использование чисел без единиц измерения приведёт к игнорированию стиля, если только число не равно 0, что не зависит от единиц измерения.
Итог
Программы JavaScript могут изучать и изменять текущий отображаемый браузером документ через структуру под названием DOM. Эта структура данных представляет модель документа браузера, а программа JavaScript может изменять её для изменения видимого документа. DOM организован в виде дерева, в котором элементы расположены иерархически в соответствии со структурой документа. У объектов элементов есть свойства типа >parentNode и >childNodes, которы используются для ориентирования на дереве.
Внешний вид документа можно изменять через стили, либо добавляя стили к узлам напрямую, либо определяя правила для каких-либо узлов. У стилей есть очень много свойств, таких, как >color или >display. JavaScript может влиять на стиль элемента напрямую через его свойство >style.
Упражнения
Строим таблицу
Мы строили таблицы из простого текста в главе 6. HTML упрощает построение таблиц. Таблица в HTML строится при помощи следующих тегов:
>> > name > height > country > > > Kilimanjaro > 5895 > Tanzania > >
Для каждой строки в теге Те же данные, что мы использовали в главе 6, снова доступны в переменной Напишите функцию > содержится тег
>. Внутри него мы можем размещать ячейки: либо ячейки заголовков >, либо обычные ячейки >. >MOUNTAINS.>buildTable, которая, принимая массив объектов с одинаковыми свойствами, строит структуру DOM, представляющую таблицу. У таблицы должна быть строка с заголовками, где имена свойств обёрнуты в элементы