В ближайших разделах вы узнаете о таинственной структуре данных и интерфейсе программирования, известном как DOM (объектная модель документа). Вы поймете, что это такое, чем она полезна и как она связана со всем, что вам предстоит делать в будущем.
Поехали!
Что делают HTML, CSS и JavaScript
Прежде чем перейти к делу и начать обсуждать смысл жизни… гм, то есть DOM, давайте быстренько взглянем на кое-что, возможно, вам известное. Для начала скажу, что весь материал, помещаемый в HTML-документы, касается HTML, CSS и JavaScript. Мы рассматриваем эти три компонента как равных партнеров в создании того, что вы знаете как браузер (рис. 24.1).
Рис. 24.1. Типичная веб-страница состоит из HTML, CSS и JavaScript
Каждый из этих партнеров играет свою уникальную важную роль.
HTML определяет структуру
HTML определяет структуру страницы и по большей части содержит материал, который вы видите:
<!DOCTYPE html>
<html>
<head>
<meta content="sea otter, kid, stuff" name="keywords">
<meta content="Sometimes, sea otters are awesome!"
name="description">
<title>Example</title>
<link href="foo.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<img src="seaOtter.png" />
<h1>What This Sea Otter Did to This Little Kid Will Make You
LOL!</h1>
<p class="bodyText">
Nulla tristique, justo eget semper viverra,
massa arcu congue tortor, ut vehicula urna mi
in lorem. Quisque aliquam molestie dui, at tempor
turpis porttitor nec. Aenean id interdum urna.
Curabitur mi ligula, hendrerit at semper sed,
feugiat a nisi.
</p>
<div class="submitButton">
more
</div>
</div>
<script src="stuff.js"></script>
</body>
</html>
HTML — это кто-то вроде Мег Гриффин, и он весьма скучен. Если вы не знакомы с Мег Гриффин и вам лень гуглить, кто это, то рис. 24.2 приблизительно показывает, на что она похожа.
Рис. 24.2. Творческая интерпретация Мег Гриффин
В любом случае, у нас есть скучный HTML-документ, а чтобы преобразовать его содержимое из чего-то простого и однообразного, можно использовать CSS.
Приукрась мой мир, CSS!
CSS — это ваш главный язык стиля, который позволяет придавать HTML-элементам столь необходимую эстетическую и схематичную привлекательность:
body {
font-family: "Arial";
background-color: #CCCFFF;
}
#container {
margin-left: 30 %;
}
#container img {
padding: 20px;
}
#container h1 {
font-size: 56px;
font-weight: 500;
}
#container p.bodyText {
font-size: 16px;
line-height: 24px;
}
submitButton {
display: inline-block;
border: 5px solid #669900;
background-color: #7BB700;
padding: 10px;
width: 150px;
font-weight: 800;
}
На протяжении долгого времени HTML и CSS предоставляли все необходимое для создания прекрасных и функциональных страниц. Имелись и структура, и макет страницы, были навигация и даже простые взаимодействия вроде наведения мыши. Жизнь была прекрасна.
Настало время JavaScript!
Несмотря на все чудесные возможности, которые предоставляли HTML и CSS, они были ограничены в возможностях интерактивности. Люди хотели делать в веб-документе существенно больше, чем просто сидеть и наблюдать за происходящим. Они хотели и чтобы сами эти документы могли делать больше, чтобы они помогали работать с медиаматериалом, запоминали, на каком моменте происходил выход, обрабатывали клики мыши, нажатия клавиш и пальцев, использовали вычурные меню для навигации и изящные программные анимации, взаимодействовали с веб-камерами/микрофонами, не требовали перезагрузки страницы в случае каждого действия и многое-многое другое.
Конечно же, помогло то, что веб-разработчики и дизайнеры (как вы и я) также прилагали все усилия в поиске способа создания всех этих запросов.
Чтобы заполнить пробел между тем, что предлагали HTML/CSS, и тем, что требовалось пользователям, применялись сторонние компоненты вроде Java и Flash, которые благополучно развивались на протяжении многих лет. Так продолжалось до недавних пор. Это было следствием многих технических и политических причин, но одна из таких причин была в том, что JavaScript просто был не готов в течение долгих лет. Для эффективности ему не хватало либо того, что предоставляли базовые языки, либо того, что поддерживали браузеры.
Сегодня это уже не важно. Теперь JavaScript является крайне способным языком, который позволяет добавлять нужные людям виды интерактивности. Доступ же ко всем этим возможностям обеспечивает именно DOM.