JavaScript с нуля - [53]
В случае же с фронтенд-разработкой я не представляю распространенных случаев, где запись данных JSON была бы актуальна. Если вы столкнетесь с какой-либо редкой ситуацией, в которой ваши потребности не ограничатся только чтением данных JSON, то гугл в помощь!
КОРОТКО О ГЛАВНОМ
Раньше эта глава была бы посвящена XML. Даже сегодня XML по-прежнему широко используется как формат файлов для хранения информации и ее обмена. JSON же чрезвычайно популярен только в том мире, где браузер является королем (то есть в мире, где живем мы с вами). Вне веб-сайтов, веб-приложений и веб-сервисов, основанных на REST, работа с данными в формате JSON не приветствуется. Вам следует иметь это в виду, если вы столкнетесь с более старыми, менее веб-ориентированными ситуациями.
Если у вас появились какие-либо связанные с JSON или чем-то другим вопросы, отправляйтесь за ответами на форум https://forum.kirupa.com.
24. JS, браузер и DOM
До сих пор мы изучали JavaScript обособленно. Мы многое узнали о его базовой функциональности, но все это было мало связано с реальным положением вещей в реальном мире — мире, представленном браузером и наполненном множеством мелких HTML-тегов и CSS-стилей. Эта глава послужит введением в этот мир, а последующие главы помогут погрузиться в него уже глубже.
В ближайших разделах вы узнаете о таинственной структуре данных и интерфейсе программирования, известном как DOM (объектная модель документа). Вы поймете, что это такое, чем она полезна и как она связана со всем, что вам предстоит делать в будущем.
Поехали!
Что делают HTML, CSS и JavaScript
Прежде чем перейти к делу и начать обсуждать смысл жизни… гм, то есть DOM, давайте быстренько взглянем на кое-что, возможно, вам известное. Для начала скажу, что весь материал, помещаемый в HTML-документы, касается HTML, CSS и JavaScript. Мы рассматриваем эти три компонента как равных партнеров в создании того, что вы знаете как браузер (рис. 24.1).
Рис. 24.1. Типичная веб-страница состоит из HTML, CSS и JavaScript
Каждый из этих партнеров играет свою уникальную важную роль.
HTML определяет структуру
HTML определяет структуру страницы и по большей части содержит материал, который вы видите:
name="description">
What This Sea Otter Did to This Little Kid Will Make You
LOL!
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.
more
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 просто был не готов в течение долгих лет. Для эффективности ему не хватало либо того, что предоставляли базовые языки, либо того, что поддерживали браузеры.
