Вы находитесь на странице: 1из 594

Эрик

n
Фримен
*
Элизабет
о *
Робсон
„ * V v 4\
--------------------------------------------------------------------------------------------------

Изучаем гт
программирование на

HTMlS Учебное руководство


по созданию веб-приложений
с использованием JavaScript

Раскройте
секреты гуру HTML5

«Загрузите* HTML5
Узнайте, почему все, и JavaScript
что вашим друзьям прямо в свой мозг
известно о видео,
может оказаться
ошибочным

Научитесь
избегать
досадных Изучите
проблем подводные камни,
с браузерной связанные
поддержкой I * с браузерами

О REILLY
Отзывы о книге

«HTML5 является самой актуальной технологией создания веб-сайтов. М ногие разработчики го­
р ят ж еланием воспользоваться ею для создания гибких, насы щ енны х медиа-сайтов, с которы м и
также будет удобно работать на нланш етны х комнью терах и смартфонах. К нига „Изучаем програм­
мирование на H T M L 5“ — наилучший и самый увлекательны й снособ освоить эту восхитительную
технологию . О чень рекомендую».
— М эр иэи и М арк, старш ий ви ц е-и р ези деи т ио техн ол оги я м в B lu e N ile Inc.

«Являясь н ростой, инф орм ати вн ой и увлекательной, книга „Изучаем программирование на H T M L 5 “


нредставляет собой настольное руководство для всех, кто ж елает изучить HTM L5 или нросто р е­
шил освеж ить свои знания но данной теме. С ерия „Head First“помотает мне ноддерж ивать знания
на актуальном технологическом уровне, нозволяя более эф ф екти вн о унравлять нроектам и и ока­
зы вать содействие моим разработчикам».
— Тодд Гуилл, м ен ед ж ер п р оек тов, A llR ecip es.co m

«Это вам не устареваю щ ий DHTML! „Изучаем программирование на H TM L5 “ рисует многообещ а­


ющую и онтимистичную картину будущего В сем ирной наутины через нризму HTML5, давая вам
шанс но лучить туда билет. Если вы ищ ете нодробное, нанисанное достунным язы ком и н орой до­
вольно забавное руководство но HTM L5, данная книга то, что вам нужно».
— М эиии О тто, веб-разр аботч ик и креативщ ик

«Авторы данной книги нонали в точку — навыки работы с JavaScript являю тся ключом к HTML5.
Даже если вам никогда не доводилось нисать JavaScript-HporpaMMbi, эта книга номож ет быстро
во всем разобраться благодаря наличию увлекательных и нрактичны х нримеров».
— Д эв и д П ауэрс, автор кииги «РНР. С оздан и е ди н ам и ч еск и х страниц» (РН Р Solutions:
D ynam ic Web D esig n M ade Easy)
О других книгах серии Head First

«Будьте осторож ны . Если кто-то из вас лю бит читать неред сном, то лучше отлож ите чтение книги
„Изучаем HTM L, XH TM L и CSS“ (H ead First HTM L with CSS & XHTM L) на дневное время. Эта книга
будоражит мозг».
— П оулии М акнамара, Ц ен т р н ов ы х техн ол оги й и обр азов ан и я,
Ф рибур ск и й ун и в ерси тет, Ш в ей ц ар и я

«Книга „Изучаем HTML, XH TM L и CSS“ нредставляет собой тщ ательно п роработанное соврем ен­
ное руководство но дальновидным нрактикам в области разм етки и представления веб-страниц.
А вторы нредвидят, какие моменты могут вызвать у читателя замеш ательство, и своеврем енно
разъясняю т их. И снользованны й нодход, в основе которого леж ат обилие наглядных нрим еров
и последовательность излож ения, является онтимальны м для читателя: он будет вносить неболь­
шие изм енения и наблюдать итоговы й эф ф ект в браузере, что нозволит разобраться в назначении
каждого нового элемента».
— Д эи и и Гудмеи, автор книги «Д инам ический HTML: п о д р о б н о е руководство»
(D ynam ic HTML: T h e D efin itive G uide)

«Книга „Изучаем HTM L, XH TM L и CSS“с самого начала создает у читателя ощущение, что весь нро-
цесс обучения окаж ется нросты м и увлекательным. О своение HTM L нри нравильном объяснении
не сложнее изучения основ родного язы ка, н ри этом авторы нроделали отличную работу и нриво-
дят наглядные нрим еры но каждой конценции».
— М айк Д эв и д со н , п р ези д ен т и и сп ол н и тел ьн ы й ди р ек т ор N ew svin e, Inc

«Вместо излож ения материала в стиле традиционны х учебников „Программируем для iPhone и iPad“
нредлагает читателю живую, увлекательную и даже нриятную методику обучения програм м ирова­
нию для iOS. М атериал но добран умело и качественно: в книге рассматриваю тся многие клю чевые
технологии, вклю чая Core Data, и даже такие важные аснекты , как проекти рован ие интерф ейса.
И где еще можно нрочитать, как UlWebView и UITextField беседуют у камина?»
— Ш о п М ер ф и , п р оек ти р овщ и к и р азр аботч и к п р и л ож ен и й дл я iO S

«Книга „Программируем для iPhone и iPad“ объясняет н ринцины разработки н рилож ений iOS с са­
мого начала. О сновны е и зм енения но сравнению с нервы м изданием относятся к iOS 4, Xcode 4
и нанисанием н рилож ений для iPad. Благодаря нош аговым онисаниям с визуальным стилем из­
лож ения м атериала эта книга становится отличны м средством изучения нрограм м ирования для
iP hone и iPad во всех аснектах, от нростейш их до нетривиальных».
— Ри ч Р о зе и , програм м ист и соавтор кииги Mac OS X for U n ix G eeks

«В отличие от многих невразумительных книг но программированию , насы щ енны х техническим


ж аргоном, руководства серии Head First jQuery номогаю т новичкам создавать их н ервы е страницы
jQ u ery на нростом и достунном уровне».
— Л и и дси Скурас, ю р и ст и ирограммист-самоучка
HTML5
Programming
W ouldnt it be dreamy if th ere
was an HTM L5 book th a t didn't
assume you knew what the DOM,
events, and APIs were, all by page
three? It's probably ju st a fantasy

Ryan Benedetti
Ronan Cranley

O ’REILLY
Beijing • Cambridge • Koln • Sebastopol • Tokyo
Изучаем программирование на
Создание

HTML5 Как было бы здорово, если бы


существовала книга о HTML5,
веб-приложений
с использованием
JavaScript

в которой не предполагается заранее,


что читателю знакомы такие понятия,
как объектная модель документа (DOM),
события и API-интерфейсы.
Об этом можно лишь мечтать...

Эрик Фримен
Элизабет Робсон

Москва ■Санкт-Петербург ■Нижний Новгород ■Воронеж


Ростов-на-Дону - Екатеринбург - Самара - Новосибирск
Киев ■Харьков ■Минск
2013
ББК 32.988-02-018.1
УДК 004.43
Ф88

Фримен Э., Робсон Э.


Ф88 Изучаем программирование на HTML5. — СПб.: Питер, 2013. — 640 с.: ил.
ISBN 978-5-459-00952-1
Хотите создавать динамичные, интерактивные, насыщенные данными веб-страницы? Почему бы не использовать ПТМЬ5 для
создания полнофункциональных веб-приложений? И почему бы не делать это с помощью современных методик, которые так же
легко применимы к вашему настольному браузеру, как и к мобильным устройствам? Вам, конечно же, захочется использовать такие
новейшие ПТМЬ5-технологии, как API-интерфейс Geolocation, элемент video, 2В-рисование, API-интерфейсы Web Storage и Web
Workers и т. д. Пе так ли?
С помощью данной книги вы научитесь создавать веб-нриложения с использованием современных стандартов и нередовых методик
завтрашнего дня. Вы изучите основы новых API-интерфейсов ПТМЬ5 и узнаете, как они взаимодействуют со страницами и приво­
дятся в движение JavaScript-кодом, а также как использовать их для создания веб-приложений, которые впечатлят ваше начальство
и изумят друзей.

ББК 32.988-02-018.1
УДК 004.43

Права на издание получены по соглашению с O ’Reilly. Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой
бы то ни было форме без письменного разрешения владельцев авторских прав.

Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как надежные. Тем не менее, имея в виду
возможные человеческие или технические ошибки, издательство не может гарантировать абсолютную точность и полноту приводимых сведений
и не несет ответственности за возможные ошибки, связанные с использованием книги.

© Authorized Russian translation of the English edition of Head First HTM L5 Programming,
ISBN 9781449390549 © 2011 Eric Freeman and Elisabeth Robson. This translation is published
and sold by permission of O'Reilly Media, Inc., the owner of all rights to publish and sell the same.
ISBN 978-1449390549 (англ.) © 2011 Eric Freeman and Elisabeth Robson. This translation is published and sold by permission
of O'Reilly Media, Inc., the owner of all rights to publish and sell the same.
ISBN 978-5-459-00952-1 © Перевод на русский язык О О О Издательство «Питер», 2013
© Издание на русском языке, оформление О О О Издательство «Питер», 2013
П о с в я щ а е т с я С т и в у Д ж о б с у , б л а го д а р я к о т о р о м у п о ­
п у л я р н о с т ь H T M L 5 д о с т и гл а т а к и х в ы со т, ч т о д а н н а я
к н и г а д о л ж н а р а з о й т и с ь о г р о м н ы м т и р а ж о м .. .

И ещ е раз п о св я щ а е тся С ти в у Д ж о б су, п о то м у ч т о о н


на ш ге р о й .
об авторах
Р о 5 со н

Эри к Ф р и м е н

Эрик — один из основонолож ников серии «Head Э лизабет совмещ ает деятельность п роекти ров­
First». К эти С иерра так характеризует Эрика: щ ика программного обеспечения, нисателя и
«Один из редких людей, которы е одинаково хоро­ инструктора. О на увлеклась технологиям и еще
шо владею т язы ком, практическим и навыками и во врем я учебы в Йельском университете, где
знаниям и культуры в разны х областях, будь то сфе­ нолучила стенень магистра ком пью терны х наук
ра, в которой орудует хакер-хинстер, работает кор­ и занималась разработкой язы ка нараллельного
п орати вн ы й вице-нрезидент, нроектировщ ик или визуального програм м ирования и нрограм м ной
экснерт-аналитик». архитектуры.
В п роф ессиональном нлане Эрик недавно нодош ел Элизабет увлеклась созданием веб-нрилож ений
к ночти десятилетней отметке в качестве долж­ на самом раннем этане разви тия И нтернета.
ностного лица в медиа-комнании: он занимает ноет О на участвовала в создании заслужившего нри-
главного технического д иректора Disney O nline
знание веб-сайта T he Ada Project, которы й стал
& Disney.com в Walt Disney Company. В настоящ ее
одним из нервы х ресурсов, нризванны х номочь
врем я Эрик занят W ickedlySmart — стартаном, ко­
женщ инам, заняты м в сф ере инф орм атики. О на
то р ы й он организовал совместно с Элизабет.
является одним из основателей W ickedlySmart —
По образованию Эрик —учены й в области компью­ образовательного онлайн-ресурса, носвящ енно-
терны х наук, и ему довелось заниматься научными го веб-технологиям, на котором нредставлены
исследованиями с таким светилом, как Дэвид Ге- ее книги, статьи, видео и нрочее. Ранее, когда
лерн тер, во врем я его работы в качестве доктора Элизабет была руководителем снециальны х
ф и лософ и и в Йельском университете. нроектов в O ’Reilly M edia, она лично нроводила
В свободное врем я Эрик серьезно увлекается музы­ семинары и онлайн-лекции на разны е техн и че­
кой; результат носледнего нроекта, над которы м ские темы, создавала образовательны е ресурсы.
он работал совместно с н ионером музыкального До сотрудничества с O ’Reilly M edia Элизабет
стиля «эмбиент» Стивом Роачем, им еется в элек­ довелось ноработать в Walt Disney Company, где
тронном магазине нрилож ени й для iP hone и назы ­ она отвечала за руководство исследованиями
вается Im m ersion Station. и разработкам и в сф ере ц иф рового медиа.
П иш ите Эрику но адресу eric@ w ickedlysm art.com , П иш ите Элизабет на beth@ w ickedlysm art.com ,
а также носетите его сайт h t t p : / / ericfreem an.com н осетите ее блог h t t p : / / elisabethrobson.com

8
содержание

(У д е р ж а н и е (с в о д к а )

В ведение 21
1 Знакомство с HTM L5. Добро пожаловать в Вебвилль 35
2 Знакомство с JavaScript и объектной моделью
документа (D O M ). Немного кода 69
3 События, обработчики и весь этот джаз.
Немного взаимодействия 119
4 Функции и объекты JavaScript. СерьезныйJavaScript 147
5 С оздание HTM L-страниц с поддерж кой оп р едел ения
м естополож ения. API-интерфейс Geolocation 199
6 О бщ ение с веб-службами. Приложения-экстраверты 247
7 Раскрываем в себ е художника. Элемент canvas 315
8 Т елевидение для нового поколения. Элемент video...
и наш особый гость - элемент canvas 383
9 Сохраняем данны е локально. API-интерфейс Web Storage 447
10 П рим еняем JavaScript на деле: API-интерфейс Web Workers 507
П ри лож ен ие. Десять важных тем (которые мы не рассмотрели) 565

(^ « д ер ж ан и е (н а с т о я щ е е )

Введение
Ваш мозг думает о программировании на HTML5. Вы сидите за
книгой и пытаетесь что-нибудь выучить, но ваш мозг считает, что вся
эта писанина не нужна. Ваш мозг говорит: «Выгляни в окно! На свете
есть более важные вещи, например сноуборд». Так как убедить свой
мозг в том, что знание HTML5 и JavaScript не менее важно для вас?

Для кого написана эта книга? 22


Мы знаем, о чем вы думаете 23
И мы знаем, о чем думает ваш мозг 23
М етапознание: учимся учиться 25
Технические р ецензенты 30
Б лагодарности 31
От издательства 33

9
зн аком ство с U IM L 5

Добро пожаловать в Вебвилль


HTML стремительно развивается. Да, изначально HTML представлял
собой простой язык разметки, однако с выходом новых версий он посте­
пенно наращивал мускулы. В настоящее время мы располагаем версией
HTML, заточенной под создание полноценных веб-приложений с поддерж­
кой localStorage, 20-рисования, автономного режима работы, сокетов, по­
токов и т. д. История развития HTML не всегда была радужной: она полна
драматизма (об этом мы поговорим позже), а в этой главе мы для начала
совершим увеселительный тур по Вебвиллю, чтобы вы могли разобраться
во всем, что вкладывается в понятие «HTML5». Поэтому запрыгивайте к
нам — мы отправляемся в Вебвилль, где за 3,8 страницы (ровно) пройдем
путь от исходной точки до HTML5.

П ер ехо д и те на HTML5 СЕГОДНЯ! Зачем ждать? 36


П редставляем вам наш новый Н Т М Ь б-м одернизатор.
О бновите свой HTM L прямо сейчас 38
Вы ближ е к НТМ Ьб-разметке, чем думаете! 41
В стречаем HTML5: П ризнания новой версии HTM L 45
П росим встать НАСТОЯЩ ЕГО HTM L5... 46
Как на самом деле работает HTM L5... 48
Кто и что делает? 50
Ваша первая миссия: разведка в стане браузеров 51
Ч то м ож но сделать с помощ ью JavaScript 56
Пиш ем серьезны й JavaScript 59
Пиш ем серьезны й JavaScript: проверка ваших ответов 60
Ключевые моменты 65
содержание

знаком ство с JaVa^crij=>t и объектной м°ДеЛь1° Документа (J)Q]^)

Немного кода
Благодаря JavaScript вы откроете для себя нечто новое. Вы уже все
знаете о HTML-разметке (иначе называемой структурой) и CSS-стиле (также из­
вестном как представление), однако вам недостает знаний о JavaScript (или, как
еще говорят, о поведении). Если ваш багаж знаний ограничивается лишь струк­
турой и представлением, то вы, конечно же, сможете создавать прекрасно вы­
глядящие страницы, однако они будут лишь простыми страницами. Но если вы
добавите поведение, прибегнув к JavaScript, то сможете обеспечить для своих
пользователей интерактивное взаимодействие; либо, что еще лучше, вы смо­
жете создавать роскошные веб-приложения. Добавьте в свой инструментарий
веб-разработчика наиболее интересные и универсальные знания о JavaScript
и программировании!

Как работает JavaScript 70


Ч то мож но сделать с помощью JavaScript? 71
О бъявление п ер ем ен н ой 72
Как присваивать им ена перем енны м 74
С ерьезн ое програм м ирование 74
Вы ражения 77
Н Т М ЬЪ -
М ногократное вы полнение одного и того ж е... 80
П ринятие реш ений с использованием JavaScript 83
с м а р сА>
П ринятие дополнительны х реш ений... и добавление
J a v a S c r ip t - перехваты вающ его блока 84
Как и куда добавлять JavaScript в свои х страницах 87
r В еп ери KaKjavaScript взаим одействует с вашей страницей 88
,чес коерУк° ' Рецепт приготовления со б ствен н ой объектной модели
документа (DOM ) 89
Я Р » * * * ° У**4*
яЦИИ
0ОДСТко М ^ н " Ка1 П ер вое испы тание объектной м одели документа (DOM ) 90
НИ*0 ,* е н Н«° 0т Нельзя начинать взаимодействовать с DOM ,
» * ОСГгТэфФе^ и пока веб-страница не загрузилась полностью 98
Для чего ещ е хорош о п одходи т DOM 100
в О»1*
Нельзя ли снова поговорить о JavaScript, или как
осущ ествляется сохр ан ен и е м нож ественны х
значений при использовании JavaScript 101
Как создать массив 101
Phrase-O-Matic 105
Ключевые моменты 109

11
собьшшя, обработчики и Весь эщощ джа£

Немного взаимодействия
Вам все еще не удается соприкоснуться с пользователем. Вы изу­
чили основы JavaScript, однако могут ли ваши веб-страницы взаимодей­
ствовать с пользователями? Когда страницы откликаются на вводимые
пользователем данные, они уже являются не простыми документами,
а живыми, реагирующими приложениями. Из этой главы вы узнаете, как
обрабатывать одну из форм ввода данных пользователем (извините за
каламбур) и привязывать старомодный HTML-элемент < f o r m > к совре­
менному коду. Это может показаться необычным, однако такой подход
также эффективен. Пристегните ремни, поскольку наше путешествие по
данной главе будет проходить на большой скорости: путь от простого
приложения до интерактивного мы пройдем очень быстро.

П риготовьтесь к встрече с W ebville Tunes 120


Приступаем... 121
Когда я нажимаю кнопку A dd Song (Добавить п есн ю ),
ничего не п р ои сходи т 122
О бработка собы тий 123
Составляем план... 124
П олучение доступа к кнопке A dd Song (Добавить песню ) 124
Задание обработчика собы тий click для кнопки 125
Более пристальный взгляд на происш едш ее... 126
И звлечение названия песни 128
Как добавить песню на страницу? 131
Как создать новый элем ент 133
Д обавлени е элем ента в DOM 134
С оединяем все воеди но... 135
...и проводим тест-драйв 135
О бзор того, что мы только что сделали 136
Как добавить приготовленны й код... 139
И нтегрирование пр иготовленного кода 140
Ключевые моменты 142
содержание

объекты и ^ункЦии JavaScript

Серьезный JavaScript
Можете ли вы уже назвать себя создателем сценариев? Впол­
не возможно, поскольку вы уже многое знаете о JavaScript, однако кто
захочет быть простым создателем сценариев, когда можно быть про­
граммистом? Пора проявить серьезность и поднять планку — настало
время познакомиться с функциями и объектами. Они являются клю­
чом к написанию более эффективного, хорошо организованного и лег­
кого в сопровождении кода. Функции и объекты активно используются
наряду с API-интерфейсами HTML5 JavaScript, поэтому чем лучше вы
будете в них разбираться, тем быстрее сможете освоиться с тем или
иным новым API-интерфейсом и начать его использовать. Пристегни­
тесь, поскольку эта глава потребует вашего всецелого внимания...

Расш иряем ваш словарны й запас 148


Как добавить свои собственны е функции 149
Как работает функция 150
Локальные и глобальные перем енны е 157
Функции ещ е являются и значениям и 162
Ч то м ож но сделать посредством функций как значений? 163
Как создать объект на JavaScript? 166
Ч то м ож но сделать с объектами 167
П оговорим о передаче объектов функциям 170
Наш следующ ий сеанс состоится в... 174
Объекты также могут обладать поведением ... 176
В озвращ аемся к прилож ению W ebville C inem a... 177
Д обавлени е ключевого слова this 179
Как создать конструктор 181
Воспользуемся нашим конструктором 182

Как на самом деле работает t h i s ? 183


Сразу ж е проведем тест-драйв нашего конструктора 187
Ч то такое объект window? 189
Более пристальный взгляд на w indow .onload 190
Еще один взгляд на объект d o cu m en t 191
Более пристальный взгляд на d o cu m en t.getE lem en tB yld 191
Еще один объект, о котором нужно знать: объект элем ента 192
Ключевые моменты 194

13
содержание

API-интерфейс Geolocation
Куда бы вы ни отправились, вас можно найти. Порой бывает так, что знание
того, где вы находитесь, имеет существенное значение (особенно для веб-приложений).
Из этой главы вы узнаете, как создавать веб-страницы с поддержкой определения ме­
стоположения. Иногда вы сможете определять местонахождение своих пользователей
вплоть до угла, на котором они стоят, а иногда вам будет удаваться определить лишь
район города, в котором они находятся (однако вы по-прежнему будете знать, какой это
город!). Время от времени вы вообще не сможете получить хоть какую-нибудь информа­
цию о местоположении пользователей в силу технических причин или просто потому, что
им не нравится ваше чрезмерное любопытство. Да, представьте себе! Так или иначе, но
в данной главе мы рассмотрим API-интерфейс JavaScript под названием Geolocation. Бе­
рите свое самое лучшее устройство с поддержкой определения местоположения (даже
если это будет ваш настольный компьютер), и давайте приступим к работе.

М естоп ол ож ен и е, м естоп ол ож ен и е... 200


Ш ирота и долгота... 201
Как API-ин терф ейс G eolocation опр едел яет
м естоп ол ож ен и е пользователя 202
Так где ж е вы находитесь? 206
Как все это работает 210
Раскрываем наше тайное убеж ищ е... 213

чv Н аписание кода для опр едел ения расстояния


О тобр аж ение вашего м естополож ения на карте
Как добавить карту к странице
215
216
217
Прикалываем булавку на карту... 220
П р оч ие интересны е вещ и, которы е мож но сделать
с использованием API-ин терф ейса G oogle Maps 222
f
г
М ож ем ли мы поговорить о точности? 225
“W herever you g o , there you are” 226
Приступаем к созданию прилож ения 227
Д орабаты ваем наш стары й код... 228
П ора отправляться в путь! 230
Параметр p osition O p tion s... 232
Мир парам етров tim eo u t и m axim um A ge... 233
Ш лифуем наше прилож ение! 238
И нтеграция наш ей новой функции 239
Ключевые моменты 241

14
содержание

общение с веб—сл уж б а м и

Приложения-экстраверты
Что-то вы слишком засиделись на своей странице. Настало время немного
пообщаться с веб-службами с целью сбора данных и последующего возврата этой
информации, что даст вам возможность создавать более эффективные веб-ресурсы,
которые объединяют собираемые данные. Это важный момент в написании современ­
ных НТМ1_5-приложений, и чтобы успешно им заниматься, вам необходимо знать, как
происходит общение с веб-службами. Об этом мы и поговорим, а также научимся вне­
дрять данные от веб-служб в свои страницы. Усвоив изложенный материал, вы сможе­
те обращаться и взаимодействовать с любой веб-службой по своему выбору. Мы даже
расскажем вам о новомодном жаргоне, которым следует пользоваться при общении с
веб-службами. Вы познакомитесь с некоторыми новыми API-интерфейсами — так на­
зываемыми коммуникационными API-интерфейсами..

К омпании M ighty G um ball требуется веб-прилож ение 248


П о д р о б п ее о систем е M ighty G um ball 250
Как выполпяются запросы , адресованны е веб-службам? 253
Как выполпять запросы из JavaScript 254
П одвинься, XML: встречайте JSO N 260
О тобр аж еп и е данны х об уровне продаж жвачки 264
Как установить собствепны й веб-сервер 265
Д орабаты ваем код с целью использования JSON 270
П ер еходи м к использованию действую щ его сервера 271
вас оЖиЭает Н еож иданпы й поворот собы тий! 273
hwm поворот!
П ом н ите, как мы столкпулись с пеож идапны м повор отом
собы тий? Н еполадки с прилож ением 276
Ч то за браузерная политика безопасности? 278
Какие у нас вариапты? 281
Знакомство с JSONP 286
Ч то означает буква Р в аббревиатуре JSONP? 287
О бн овление кода веб-прилож ения M ighty G um ball 290
Д орабаты ваем прил ож епи е M ighty Gum ball 298
О бн овление URL-адреса JSO N с целью включения
lastreporttim e 309
К лючевые моменты 311
Специальпое со общ ен и е из главы 7... 313
содержание

раскрываем Б се^е художника

Элемент canvas
HTML больше не является просто языком «разметки». Благодаря новому
НТМ1_5-элементу c a n v a s у вас появилась возможность собственноручно создавать
и уничтожать пикселы, а также манипулировать ими. В этой главе мы воспользу­
емся элементом c a n v a s , чтобы раскрыть таящегося в вас художника, — больше
никаких разговоров о HTML, когда речь идет чисто о семантике и отсутствуют пред­
ставления; используя c a n v a s , мы начнем раскрашивать и рисовать цветом. Теперь
все будет опираться на представления. Вы узнаете, как вставлять элемент c a n v a s
в свои страницы, как рисовать текст и графические изображения (естественно, ис­
пользуя JavaScript) и даже как поступать в случае с браузерами, не поддерживаю­
щими данный элемент. С чудесным элементом c a n v a s вы встретитесь не только
в этой, но и в других главах книги.

Наш повы й стартап: TweetShirt 316


Взгляд па «оригинал-макет» 317
биммлимя/
Как добавить canvas в свою веб-страницу 320
Как увидеть свой canvas 322
Рисование в элем енте canvas 324
Вы ходим до сто й н о из пр обл ем н ой ситуации 329
TweetShirt: общ ая картина 331
Спачала напиш ем н еобходим ы й HTM L 334
Теперь добавим <form > 335
П риш ло время добавить JavaScript для вы числений 336
Н аписапие функции drawSquare 338
Д обавлени е вызова fillB ackgroundC olor 341
Тем врем енем , возвращаясь к TweetShirt.com ... 343
Ч ер ч ен и е контуров 345
П о д р о б п о е исследование м етода arc 348
Н ебольш ой прим ер использования метода arc 350
Я говорю «градус», вы говорите «радиан» 351
Возвращ аемся к написанию TweetShirt-кода
для рисования кругов 352
Пиш ем фупкцию drawCircle... 353
И звлечение твитов 357
Заверш аем написание функции drawText 365
Ключевые моменты 372

16
содержание

телевидение для нового поколения

Элемент video... и наш особый гость — элемент canvas


Нам больше не нужны какие-либо плагины. Элемент v i d e o отныне является пол­
ноценным членом HTML-семейства — просто вставьте его в свою страницу, и вы обеспечите
прямую поддержку воспроизведения видео на большинстве устройств. Однако v i d e o —
это нечто значительно большее, чем просто элемент: это API-интерфейс JavaScript, по­
зволяющий управлять воспроизведением, создавать пользовательские видеоинтерфейсы и
интегрировать видео с остальными HTML-элементами совершенно новыми способами. Го­
воря об интеграции, следует отметить, что между v i d e o и c a n v a s существует связь, —
вы увидите, что объединение этих элементов открывает новые широкие возможности по об­
работке видео в режиме реального времени. В этой главе мы сначала научимся внедрять
элемент v i d e o в веб-страницу, а затем поговорим об использовании соответствующего
API-интерфейса JavaScript. Вы будете поражены тем, что можно сделать с помощью не­
большого количества разметки, JavaScript и элементов v i d e o и c a n v a s .

Знакомство с W ebville TV 384


Включите этот «телевизор» и протестируйте его... 385
Как работает элем ент video? 387
П ристальны й взгляд на атрибуты элем ента vid eo... 388
Ч то п еобходи м о зпать о ф орм атах видео 390
Как ж онглировать всеми этими форм атам и... 392
Я слышал, там будут API-интерфейсы ? 397
Н ем ного «программирования» содер ж им ого W ebville TV 398
Как написать обработчик «конца видео» 401
Как работает м етод canPlayType 403
Распаковка дем облока 409
Р ассм отрение остальной части «заводского» кода 410
О бработчики setEffect и setV ideo 412
Реализация элем ентов управлепия видео 418
Реализация остальны х элем ентов управления видео 419
Д орабаты ваем один нюанс... 420
Как п р ои сходи т обработка видео 426
на Webville TV
Как обрабаты вать видео с использованием
врем епного буф ера 427
Реализация врем енного буф ера в canvas 429
Займемся написапием эф ф ектов 433
Как использовать собы тия error 440
содержание

с о х р а н я е м Д анны е Л°КаЛьНо

API-интерфейс Web Storage


Устали от того, что клиентские данные приходится втискивать
в тесные шкафы файлы cookie? В 1990-е годы это не было проблемой,
однако сейчас, в случае с веб-приложениями, запросы намного возросли.
Как бы вы отнеслись к тому, если бы мы сказали, что у вас есть возмож­
ность выделять по 5 Мбайт на браузер каждого пользователя? Вы, веро­
ятно, подумали бы, что мы шутим. Однако не стоит быть скептичными,
поскольку API-интерфейс HTML5 Web Storage как раз и позволят делать
это! Из данной главы вы узнаете обо всем, что необходимо для сохране­
ния объектов локально на устройстве пользователя и использования их
в работе ваших веб-приложений.
Трудно разобраться во всех
своих делах, если после того,
как и х сделаешь, нельзя избавиться Как работает браузерпое хранилищ е (1 9 9 5 -2 0 1 0 ) 448
от клейких заметок, на которых они
были записаны. Нельзя ли снабдить
Как работает Web Storage HTM L5 451
и х функцией удаления? Заметка для себя... 452
Были ли локальное храпилищ е и массив
разделены при рож дении? 458
С оздапие и п тер ф ей са 463
Теперь добавим JavaScript 464
Заверш аем создапи е и н тер ф ей са пользователя 465
П рервем ся для небольш ого заплапированпого
м ероприятия 468
П оддерж ка типа «сделай сам» 469
Д орабаты ваем наше прил ож епи е с использованием
массива 474
В песепие изм ен еп и й в createSticky с целью
использования массива 475
Функция deleteSticky 483
Как выбрать заметку для удалепия? 484
Как извлечь заметку для удаления, используя объект event 485
Удаление заметки также из DOM 486
О бновление и н тер ф ей са пользователя для выбора
цвета зам еток 487
М етод JSO N .stringify — не только для массивов 488
И спользование нового объекта stickyObj 489
Теперь, когда вы изучили localStorage, как вы соби р аетесь
использовать его? 496

18
содержание

п о м е н я е м J a v a S c rip t н а д е л е

API-интерфейс Web Workers


Медленный сценарий — хотите продолжить его выполнение? Если вам дово­
дилось достаточно тесно работать с JavaScript или путешествовать по Интернету, то
вы, вероятно, сталкивались с диалоговым окном Slow Script (Медленный сценарий).
Но как же сейчас, когда в компьютерах устанавливаются многоядерные процессоры,
сценарии могут выполняться слишком медленно? Все потому, что JavaScript поддер­
живает выполнение только одного действия за раз. Однако с появлением HTML5 и
Web Workers все изменилось. Теперь у вас есть возможность создавать множествен­
ные JavaScript-объекты w o r k e r для одновременного выполнения нескольких дей­
ствий. Независимо от того, пытаетесь ли вы создать более отзывчивое приложение
либо просто хотите по максимуму задействовать все возможности центрального про­
цессора, API-интерфейс Web Workers придется кстати.

Устрашающее диалоговое окно Slow Script (М едлепны й


JavaS cript-n o m o k сценари й) 508
Как JavaScript проводит свое время 508
| Выполнение функции init Когда одн оп оточ п ость — это П Л О Х О 509
^ Обработка события click П оток веб-сцепария worker 510
Как работаю т веб-сценарии worker 512
IЗначение времени таймера |
истекае т _
Ваш первы й веб-сценарий worker... 517
Обработка события submit
Н аписание manager.js 518
Чух-Чух
П олучение со общ ен и й от веб-сцепария worker 519
ж -ж -ж чух-чух А теперь папиш ем worker 520
чух-чух Захват виртуальных земель 528
Как вычисляется м нож ество М андельброта 530
О бработка массива данных
Как задействовать сразу несколько веб-сценариев worker 531

чух-чух ж -ж -ж Займемся созданием прилож епия Fractal Explorer 537


С оздание веб-сценариев worker и раздача им задач... 542
ж -ж -ж чух-чух
Н аписание кода 543
Запуск веб-сцепариев worker 544
■Обработка след, события click * Реализация кода worker 545
О бновление объектной Возвращ аемся к коду: как осущ ествляется обработка
^модели документа DOM
результатов работы worker 548
Выборка данных формы _
П одгоняем canvas под размеры окна браузера 551
______________-
I Ьалидация введенных t
пользователем данных Дотош ны й-ш сф п ов ар -программист 552
Время ф ипального тест-драйва! 553
Ключевые моменты 558

19
приложение: оставш иеся т е м ы

Десять важных тем (которые мы не рассмотрели)


Мы рассмотрели массу различных тем,
и вы почти закончили читать книгу. Нам
грустно с вами расставаться, но прежде чем это
сделать, нам необходимо поведать еще кое о
чем, чтобы подготовить вас к свободному пла­
ванию. В этот сравнительно небольшой раздел
нельзя уместить все, что вам требуется знать.
Вообще-то сначала мы включили все, что чита­
телю следует знать о HTML5 (не рассмотренное
в предыдущих главах), уменьшив размер шриф­
та до 0,00004. Все поместилось, однако текст
стал слишком мелким и нечитаемым. Поэтому
мы прилично сократили приложение и оставили
только десять самых важных тем.

№ 1. M odernizr 566
№ 2. Э лем ент audio и API-ип терф ейс A udio 567
№ 3. j Q uery 568
№ 4. XHTM L мертв, да здравствует XHTM L 570
№ 5. SVG 571
№ 6. А втоном ны е веб-прилож ения 572
№ 7. API-ип терф ейс Web Sockets 573
№ 8. Д ополнительно об API-ин тер ф ейсе Canvas 574
№ 9. API-интерф ейс Selectors 576
№ 10. Однако есть даже ещ е кое-что! 577
HTM L5-pyкoвoдcтвo по новым конструкциям 579
Вебвилльское руководство по семантическим
элементам HTM L5 580
Вебвилльское руководство по CSSS-свойствам 582
введение

как пользоваться эл!°й книГой

Введение
Не могу поверить,
что они включили такое
в книгу о программирова­
нии на HTML5!

«т«к 6« -о * а " ТАКОЕ

дальше ► 21
как работать с этой книгой

Для кого написана эта книга?


Если вы ответите утвердительно на все следующие вонросы:

( l ) У вас есть компьютер с установленным веб-браузером


и текстовым редактором?

Вы хотите узнать и разобраться, как создавать веб­


приложения, руководствуясь наилучшими методиками
и самыми современными стандартами?
Вам больше по душе оживленная интересная беседа,
нежели сухие и скучные академические лекции?

т о э т а к н и г а — д л я вас.

Кому зли книга пе подойдет?

Если вы ответите ,™ «рД„тель„о на любой „ з с л е д я щ и х вонросов:

/ Ознакомьтесь с книгой « Изуча-


Вы являетесь абсолютным новичком в созда­
* ем H T M L , X H T M L u C SS» (Head
нии веб-страниц? First HTML with CSS & X H T M L ),
где вы найдете превосходное
(5 ) Вы уже заняты разработкой веб-приложений введение в мир веб-разработок,
и ищете справочник по HTML5? а зат ем возвращайтесь и п р и ­
соединяйтесь к нам .
Вы боитесь пробовать что-то новое? Вы пред­
почитаете однообразный узор цветному рисун­
ку? Вы полагаете, что техническая книга не мо­
жет считаться серьезной, если в нее включены
кадры из забавных образовательных фильмов
1950-х годов и наделенные человеческими каче-
ствами API-интерфейсы JavaScript?

т о э т а к н и г а — н е д л я вас.

[Заметка от отдела продаж:


вообще-то эта книга для любого,
у кого есть деньги.]

22 введение
введение

Мы знаем, о чем вы думаете


«Как это можно назвать серьезной книгой но програм м ированию на HTML5?»
«Почему здесь так много картинок?»
«Можно ли так чему-нибудь научиться?» М о зг
ч^ 0 Э г о ~Я СЧЫ^ е^ ,
/ U важно.
U мы знаем, о чем думает баш мозг

Ваш мозг жаждет новизны . О н ностоянно ищет, вы сматрива­


ет, ждет чего-то необы чного. Таким его создала нрирода, и это
номогает нам выжить.
Так что же ваш мозг делает со всеми рутинны ми, заурядны
ми, обычными вещами, с которы м и вы сталкиваетесь? Все,
что он может сделать, это не нозволить им номеш ать своей
истинной работе, —ф иксированию того, что имеет значение.
О н не сохраняет в намяти скучную информацию ; она никог­
да не нробьется через ф ильтр «это не является важным».
А как мозг осознает, что именно является важным? Донустим
вы выш ли на нрогулку, и вдруг неред вами выскакивает тигр.
Ч то нроисходит у вас в мозге и в теле? Замечательно.
А ктивизирую тся нейроны . Всныхиваю т эмоции. П роисходят Еще 562 сухих,
химические реакции. И тогда ваш мозг нонимает.... скучных страниц
ТЗач*
" С » это
Конечно, это важно! Следует запомнить! гае. v*
не
л л о*ко
Но нредставим, что вы находитесь дома или в библиотеке. длинам-
В безонасном, уютном месте, где не бывает никаких тигров.
Вы что-то учите. Готовитесь к экзамену. Или нытаетесь освоить
какой-то сложны й технический материал, на что, как считает
ваш босс, уйдет неделя или, самое большее, десять дней.
И тут возникает нроблема. Ваш мозг будет ны таться ока­
зать вам большую услугу. О н станет следить за тем, чтобы
явно несущ ественные сведения не засоряли ценны е ресур­
сы намяти. Эти ресурсы лучше нанравить на сохранение
действительно важ ной инф орм ации. Н анрим ер, о том, что
надо онасаться тигров, остерегаться огня или никогда боль­
ше не кататься на сноуборде в одних ш ортах.
Но нри этом нельзя нросто сказать своему мозгу: «Послу­
шай, мозг, снасибо тебе, конечно, большое, однако н е­
важно, насколько скучна книга или что она не вы зы вает
во мне сильных эм оций в данны й момент. Я в самом деле
хочу заномнить инф орм ацию из нее».

дальше ► 23
как работать с этой книгой

КнцГа ДЛЯ i» e x , К ш ° хоЧ еш учц щ ьса.

Как мы что-то узнаем? Сначала нужно это «что-то» понять, а потом не забыть. Затолкать
в голову побольше фактов недостаточно. Согласно новейшим исследованиям в области
когнитивистики, нейробиологии и психологии обучения, для усвоения мат ериала тре­
буется что-то большее, чем простой текст на странице. Мы знаем, как заставить ваш мозг
работать.

Основные принципы серии «Head First»:

Наглядность. Графика запоминается гораздо лучше, чем


обычный текст, и значительно повышает эффективность воспри­
ятия информации (до 89 % по данным исследований). Кроме того,
материал становится более понятным. Текст размещается
на рисунках, к которым он относится, а не под ними или на
соседней странице.

Разговорный стиль изложения. Недавние исследова­


ния показали, что при разговорном стиле изложения материала
(вместо формальных лекций) улучшение результатов на итоговом тести­
ровании достигает 40 %. Рассказывайте историю, вместо того чтобы читать лекцию.
Не стоит быть слишком серьезным. Что вам самим больше по душе: вести оживленный разговор
с интересным собеседником или слушать лектора?

Активное участие читателя. Пока вы не начнете напрягать


извилины, в вашей голове ничего не произойдет. Читатель должен
быть заинтересован в результате; он должен решать задачи, фор­
мулировать выводы и овладевать новыми знаниями. А для этого
необходимы упражнения и каверзные вопросы, в решении которых
задействованы оба полушария мозга и разные чувства.

Привлечение и удержание внимания читателя. Ситуация, знакомая каждому:


«Я очень хочу изучить это, но засыпаю на первой странице». Мозг обращает внимание
на интересное, странное, притягательное, неожиданное. Изучение сложной технической
темы не обязано быть скучным. Интересное узнается намного быстрее.

Обращ ение к эмоциям. Известно, что наша способность запоминать в значительной


мере зависит от эмоционального сопереживания. Мы запоминаем то, что нам небезраз­
лично. Мы запоминаем, когда что-то чувствуем. Нет, сентименты здесь ни при чем: речь
идет о таких эмоциях, как удивление, любопытство, интерес, и чувстве «Да, я крут!» при
решении задачи, которую окружающие считают сложной, — или когда вы понимаете, что
разбираетесь в теме лучше, чем всезнайка-Боб из технического отдела.

24 введение
введение

Метапознание: учимся учиться


Е сли вы действительно хотите бы стрее и глубже усваивать новы е зн а­
ния —задумайтесь над тем, как вы задумываетесь. Учитесь учиться.
Мало кто из нас изучает теорию м етанознания во время учебы. Нам
положено учиться, но нас редко этому учат.
Н о раз вы читаете эту книгу, то, вероятно, хотите научиться разраба­
ты вать нрилож ения, к нримеру, для iPhone, и но возмож ности
быстрее. Вы хотите запомнить нрочитанное, а для этого абсо­
лю тно необходимо сначала понять н рочитанное.
Ч тобы извлечь максимум нользы из учебного нроцесса, нуж­
но заставить ваш мозг восприним ать н овы й материал как Н е­
что Важное. К рити чное для вашего сущ ествования. Такое же
важное, как тигр. И наче вам нредстоит бесконечная борьба с
вашим мозгом, которы й всеми силами уклоняется от запомина­
ния н овой инф орм ации.

Как же УБЕДИТЬ мозг, что знание HTML5 (и JavaScript)


не менее важно, чем тигр?
Есть снособ медленный и скучный, а есть бы стры й и эф ф ек­
тивны й. П ервы й основан на туном новторении. Всем известно,
что даже самую скучную инф орм ацию можно заномнить, если н овторять ее
снова и снова. П ри достаточном количестве н овторен и й ваш мозг нрикиды-
вает: «Вроде бы несущ ественно, но раз одно и то же н овторяется столько раз...
Ладно, уговорил».
Б ы стры й снособ основан на повы ш еппп актпвпостп мозга и особенно на со­
четании разны х ее видов. Д оказано, что все ф акторы , перечисленны е на п ре­
дыдущей странице, номогаю т вашему мозгу работать на вас. Н анрим ер, ис­
следования ноказали, что разм ещ ение слов внутри рисунков (а не в ноднисях,
в основном тексте и т. д.) заставляет мозг анализировать связи между текстом
и граф икой, а это нриводит к активизации большего количества нейронов.
Больше н ей ронов — выше вероятность того, что инф орм ац ия будет сочтена
важ ной и достойной заноминания.
Разговорны й стиль тоже важен: обычно люди н роявляю т больше внимания,
когда они участвуют в разговоре, так как им н риходится следить за ходом бе­
седы и высказы вать свое мнение. П ричем мозг соверш енно не интересует,
что вы «разговариваете» с книгой! С другой стороны , если текст сух и ф ор­
мален, то мозг чувствует то же, что чувствуете вы на скучной лекции в роли
нассивного участника, —его клонит в сон.
Н о рисунки и разговорн ы й стиль —это только начало.

дальше ► 25
как работать с этой книгой

Вот что сделали МЫ


Мы иснользовали рпсункп, нотому что мозг лучше нриснособлен для воснри-
яти я граф ики, чем текста. С точки зрен и я мозга рисунок действительно стоит
ты сячи слов. А когда текст комбинируется с граф икой, мы внедряем текст нря-
мо в рисунки, нотому что мозг нри этом работает эф ф ективнее.
Мы иснользуем пзбы точпость: новторяем одно и то же несколько раз, нриме-
н яя разны е средства нередачи и нф орм ации, обращ аемся к разны м чувствам —
и все для новы ш ения вероятн ости того, что материал будет закодирован в не­
скольких областях вашего мозга.
Мы иснользуем конценции и рисунки несколько пеож пдаппы м образом, но­
тому что мозг лучше восприним ает новую инф орм ацию . К роме того, рисунки
и идеи обы чно имею т эмоциональное содержание, нотому что мозг обращ ает вни­
мание на биохимию эмоций. То, что заставляет нас чувствовать, лучше заноми-
,
нается, —будь то шутка удивление или интерес.
Мы иснользуем разговорный стиль, нотому что мозг лучше восприним ает ин­
формацию , когда вы участвуете в разговоре, а не нассивно слушаете лекцию.
Это нроисходит и н ри чтении.
КЛЮЧЕВЫЕ
В книгу вклю чены м ногочисленны е унраж нения, нотому что мозг лучше зано- МОМЕНТЫ ^
минает, когда вы что-то делаете. Мы ностарались сделать их ненросты ми, но
интересны м и —то, что нредночитает больш инство читателей.
Мы совместили несколько стилей обучения, нотому что одни читатели нредно-
читаю т нош аговые онисания, другие стрем ятся сначала нредставить «общую
картину», а третьи м хватает ф рагм ента кода. Н езависим о от ваших личны х
н редночтений нолезно видеть несколько вариантов нредставления одного ма­ Кроссворды
териала.
Мы ностарались задействовать оба полушария вашего мозга; это новы ш ает веро­
ятность усвоения материала. П ока одна сторона мозга работает, другая часть
им еет возмож ность отдохнуть; это новы ш ает эф ф екти вн ость обучения в тече­
ние продолж ительного времени.
А еще в книгу вклю чены истории и унраж нения, отраж аю щ ие другие точки
зрения. М озг глубже усваивает инф орм ацию , когда ему нриходится оценивать
и вы носить суждения.
В книге часто встречаю тся вопросы, на которы е не всегда можно дать н ростой
ответ, нотому что мозг бы стрее учится и заноминает, когда ему нриходится
что-то делать. Н евозм ож но накачать мышцы, наблюдая за тем, как занимаю тся
другие. Однако мы нозаботились о том, чтобы усилия читателей были нриложе-
ны в верном нанравлении. Вам не нридется ломать голову над невразумитель­
ными нрим ерам и или разбираться в сложном, неренасы щ енном техническим
ж аргоном или слишком лаконичном тексте.
В историях, нрим ерах, на картинках фигурирую т люди — нотому что вы тоже
человек. И ваш мозг обращ ает на лю дей больше внимания, чем на неодушевлен­
ные предметы.

26 введение
введение

Что моЖете сделать ВЫ, чтобы


заставить свой мозг повиноваться
Мы свое дело сделали. О стальное за вами. Эти советы станут
отнравной точкой; нрислуш айтесь к своему мозгу и опреде­
лите, что вам нодходит, а что не нодходит. Пробуйте новое.

(Т ) Не торопитесь. Чем больше вы поймете, (? ) Говорите вслух.


тем меньше придется запоминать. Речь активизирует другие участки мозга. Если
Просто читать недостаточно. Когда книга вы ны таетесь что-то нонять или нолучше за-
задает вам вонрос, не нереходите к ответу. номнить, нроизн есите вслух. А еще лучше,
П редставьте, что кто-то действительно задает нонробуйте объяснить кому-нибудь другому.
вам вонрос. Ч ем глубже ваш мозг будет мыс­ Вы будете бы стрее усваивать материал и, воз­
лить, тем скорее вы нойм ете и заномните ма­ можно, откроете для себя что-то новое.
териал.

(? ) Выполняйте упражнения, делайте заметки. (7[) Прислушивайтесь к своему мозгу.


Мы вклю чили унраж нения в книгу, но вынол- Следите за тем, когда ваш мозг начинает уста­
нять их за вас не собираемся. И не разглядывай­ вать. Если вы начинаете новерхностно вос­
те унраж нения. Б ерите карандаш и ниш ите. приним ать материал или забы ваете только
Ф изические действия во время учения новыша- что н рочи тан н ое — нора сделать нереры в.
ю т его эф ф ективность. С определенного момента ноны тки «затол­
кать» в мозг дополнительную инф орм ацию не
только не ускоряю т обучение, а скорее идут во
0 Читайте врезки.
вред ему.
Это значит: читайте все. Врезки —часть основно­
го материала! Н е нронускайте их.
(? ) Чувствуйте!
(^ Не читайте другие книги после этой Ваш мозг долж ен знать, что м атериал книги
перед сном. действительно важен. П ереж ивайте за героев
Часть обучения (особенно неренос инф орм а­ наш их историй. П ридумывайте собственные
ции в долгосрочную намять) нроисходит но- нодниси к ф отограф иям . П ом орщ иться над
сле того, как вы отклады ваете книгу. Ваш мозг неудачной шуткой все равно лучше, чем не но-
не сразу усваивает инф орм ацию . Если во вре­ чувствовать ничего.
мя обработки ностунит новая инф орм ация,
часть того, что вы узнали ранее, мож ет быть (9 ) Творите!
нотеряна.
П онробуйте нрим енить новы е знания в своей
новседневной работе. П росто сделайте хоть
(б ) Пейте воду. И побольше. что-нибудь, чтобы нриобрести практический
М озг лучше всего работает в условиях «высо­ оны т за рамками унражнений. Все, что для
кой влажности». Д егидратация (которая мо­ этого нужно, — это карандаш и нодходящ ая
ж ет настунить еще до того, как вы ночувствуе- задача... задача, в которой изучаемые методы
те жажду) сниж ает когнитивны е функции. и инструменты могут нринести нользу.

дальше ► 27
как работать с этой книгой

Примите к сведению
Это учебник, а не снравочник. Мы намеренно убрали из книги все, что могло бы номешать
изучению материала, над которым вы работаете. И нри нервом чтении книги начинать следу­
ет с самого начала, нотому что книга нреднолагает наличие у читателя определенных знаний
и оныта.
Мы предполагаем, что вы знаете HTML и CSS.
Если вы не знаете разм етки HTM L (то есть ничего о HTM L-документах, об элементах, атрибу­
тах, структуре свойств, структуре в сравнении с презен тац и ей ), то н рочи тай те книгу Э. Ф риме­
н а ^ . Ф римен «Изучаем HTM L, XHTM L и CSS» (СПб.: П итер, 2012) неред тем, как нристунить
к этой. Если же соответствующ ие знания у вас есть, то все в норядке.
От вас не требуется знание JavaScript.
Если у вас имеется какой-либо оны т нрограм м ирования или нанисания сценариев (пусть и не
на JavaScript), то это вам номожет. Однако в данной книге мы не ждем от вас знаний JavaScript;
ф актически, это издание является продолж ением книги «Изучаем HTM L, XHTM L и CSS», где
нанисание сценариев отсутствует.
Мы рекомендуем использовать разные браузеры.
Тестируйте страницы и веб-нриложения, иснользуя сразу несколько браузеров. Так вы узнае­
те, чем отличаю тся разны е браузеры, и научитесь создавать страницы , нормально работаю щ ие
в разны х браузерах. Советуем иснользовать Google C hrom e и Apple Safari, но скольку они наи­
более соответствуют соврем енны м стандартам. Также рекомендуем вам нрим енять для тести­
р ован ия и новейш ие версии других распространенны х браузеров, таких как In tern et Explorer,
Firefox и O pera, а также мобильные браузеры на устройствах с онерационны м и системами iOS
и A ndroid.
Упражнения ОБЯЗАТЕЛЬНЫ.
Н е игнорируйте унраж нения —они являю тся частью основного м атериала книги. Одни из них
номогут вам заномнить материал, другие —нонять его, а третьи —н рим енить изученное н а нрак-
тике. Н е нронускайте унраж нения. Важны даже головоломки, носкольку они номогаю т мозгу ус­
воить конценции и даю т возмож ность обдумывать изучаемые новы е слова и терм ины в разном
контексте.
Повторение применяется намеренно.
У книг этой серии есть одна нринциниальная особенность: мы хотим, чтобы вы действительно
хорош о усвоили материал. И чтобы вы зано мнили все, что узнали. Больш инство снравочников
не ставит своей целью уснеш ное заноминание, но это не снравочник, а учебник, ноэтому неко­
торы е конценции излагаю тся в книге но нескольку раз.
Упражнения «Мозговой штурм» не имеют ответов.
В некоторы х из них нравильного ответа вообщ е нет, в других вы долж ны сами реш ить, насколь­
ко нравильны ваши ответы (это является частью нроцесса обучения). В некоторы х упраж нени­
ях «М озговой штурм» нриводятся но д сказки, которы е номо гут вам найти нужное нанравление.

28 введение
введение

Системные требования
Д ля нанисания и работы с кодом на HTM L5 и JavaScript вам нонадобится текстовы й
редактор, браузер и, врем я от времени, веб-сервер (он мож ет локально располагаться
на вашем настольном ком нью тере).
В онерац и онн ой системе Windows мы рекомендуем иснользовать такие текстовы е р е­
дакторы , как PSPad, TextPad или EditPlus (но вы, если нридется, мож ете пользоваться
нрограм м ой N o tepad (Блокнот)). Для нлатф орм ы Мае советуем TextW rangler, TextMate
или TextEdit. Если вы работаете в Linux, то в вашем распоряж ении масса встроенны х
текстовы х редакторов, о которы х, как мы нолагаем, рассказывать не нужно.
Надеемся, что вы н рочи тали нункт о браузерах (см. нредыдущую страницу) и устано­
вили как минимум два из них у себя в системе. Если нет, сделайте это. Вам также стоит
уделить время и научиться работать с инструментами разработчика, встроенны м и в
браузеры; в каждом из наиболее распространенны х браузеров имеется встроен н ы й ин­
струментарий, которы й можно нрим енять для и нснекти ровани я консоли JavaScript (вы
сможете просм атривать ош ибки и вывод, генерируем ы й носредством c o n s o l e . l o g ,
что является альтернативой a l e r t ) , использования веб-хранилища, объектной модели
документа DOM, CSS-стиля, прим ененного к элементам, и многого другого. Н екоторы е
браузеры даже ноддерж иваю т нлагины , нозволяю щ ие добавлять новы е инструменты
разработчика. Ч тобы освоить книгу, эти инструменты вам не нотребую тся, однако если
у вас есть ж елание н отрати ть врем я на изучение того, как ими пользоваться, то нроцесс
разработки будет легче.
Н екоторы е н арам етры HTM L5 или API-интерф ейсы JavaScript требуют, чтобы файлы
не нросто загружались, а ностунали нри этом с реального веб-сервера (то есть URL-
адрес долж ен начинаться с h t t p : / / , а не с f i l e : / /) . В соответствующ их местах книги
мы указали, в каких случаях вам нотребуется сервер, но если у вас возникло ж елание,
рекомендуем установить веб-сервер у себя в системе нрямо сейчас. В онерационны х
системах Mac OS и Linux им еется встроен н ы й сервер A pache, ноэтому вам нужно лишь
убедиться, что вы знаете, как но лучить к нему достун и где размещ ать свои файлы , что­
бы их можно было загружать, иснользуя свой локальны й сервер. В Windows вам н отре­
буется установить A pache или IIS; если вы нредночтете A pache, то вам станет достунна
масса инструментов с откры ты м исходным кодом, нанрим ер WAMP и ХАМРР, которы е
довольно нросты в установке.
Вот и все! Удачного вам времянровож дения...

дальше ► 29
обзор команды

^ Дэвцд Пауэрс
Технические рецензенты У _____________

Пол bappu Б ернл £>эйилс

Он не просто рецензент, Наш главный технический


а о п ы т н ы й а в т о р , на с ч е т у к о т о Не только занимается
рецензент. рецензированием, но также
р о го т а к и е к н и г и , к а к « И з у ч а е м
P y th o n » (H e a d F irst P y th o n ) пишет книги! Как он только
все успевает...
и « И зуч а ем пр огр а м м и р о ва ни е» Ребекка Д а н -К эн
(H e a d F irst P r o g r a m m in g )!
Тревор Фарлоу
^ A у bapp

Наш рецензент, выложившийся


Мы пытались убедить ее, на Н О %. Он даже совершал
что нам нужна только п о ­ пробежки по ночам, тестируя
мощь с графикой, но она не Ребекка стала нашей лишней парой наш геолокационный код.
удержалась и выступила глаз; она помогала нам с кодом, вы­
также техническим рецен­ искивая в нем мелкие ошибки, кот о­
зентом. рые никто не замечал (включая нас!)

Выражаем огромную п рнзпательпость комапде паш их технических рецепзептов. С воей рабо­


той опи доказали, что мы пе смогли бы обойтись без их технических зпапий и опыта, а также
впим апия к деталям. Дэвид Пауэрс, Ребекка Дап-Кэп, Тревор Фарлоу, П ол Б арри, Луиза Барр
и Б ер т Бэйтс прилож или максимум усилий в своих рецепзиях, благодаря чему эта кпига стала
пампого-пампого лучше. Вы молодцы, ребята!

30 введение
введение

Благодарности
За прекрасное техническое рецензирование:
Э то уже превращ ается в традицию в иаш их киигах, и мы Заметка для редактора:
хотим еще раз горячо поблагодарить Дэвида Пауэрса, па- ^ м о ж н о ли застолбить
шего уважаемого технического рец еп зеп та и автора мпо- этого парня на три
гих издапий, вклю чая кпигу «РНР. Создапие дипам ических нами следующие книги?
страпиц» (РНР Solutions: Dynamic Web Design M ade Easy). Причем на эксклюзивных
Благодаря зам ечапиям Д эвида содерж имое кпиг всегда
правах!
зпачительпо улучшается, и пам крепче спится по почам от
зпапия того, что если текст прош ел ч ерез Дэвида, то в тех­
ническом плапе там все отличпо. Еще раз спасибо, Дэвид.
Группе O’Reilly:
Н а плечи К ортпи Нэш легла тяж елая обязаппость по руковод­
ству пе только проектом кпиги «Изучаем програм м ирование па
HTML5», по и пами. К ортпи расчистила все нути для пас и де-
ликатпо оказывала пе обходимое давлепие па каждого редактора,
чтобы кпига смогла вы йти в свет. Одпако глав пая заслуга К ортпи
заклю чается в том, что опа обеспечила пеоцепимую обратную
связь касаемо кпиги и ее содерж имого, в результате чего текст под­
вергся ряду серьезпы х доработок. Благодаря усилиям К ортпи эта
кпига стала пампого лучше. Выражаем ей свою призпательпость.

К ор тн и Нэщ _ У
Лу Б арр также стала неотъем ле­
м ой частью процесса работы пад
кпигой и впесла свой вклад, вы­
ступив в массе ролей: рецепзепта,
граф ического дизайпера, главпого
художпика, веб-дизайпера и масте­
ра Photoshop. Спасибо тебе, Лу,
без тебя у пас пичего бы пе полу­
чилось!

\ А у Б арр j снова! (И Тоби.)

,
И спасибо всем остальным людям благодаря труду которых эта книга
увидела свет:
Благодарим остальпых члепов комапды из O ’Reilly за их разпосто-
роппю ю поддержку. Это М ай к Х еи д ри ксои , М ай к Л уки дес, Лоу-
р е л Рума, К а р е й Ш е й и е р , С аи дерс К л я й и ф е л ь д , К р и с т е и Б о р г,
К а р е й М о н тго м ери , Р э й ч е л М оиагаи, Д ж ули Хоукс и Н эи си
Р эй и х ар д т.

дальше ► 31
благодарности

U еще благодарности*
Также спасибо всем остальным
Д ж ейм с Х еистридж паписал оригипальпы й код, легш ий в оспову
и рилож еии я Fractal Explorer из главы 10, которое мы адаптировали
в кпиге под свои нужды. И звипяемся, Джеймс, если приведеппы й в
тексте код окаж ется пе столь элегаптпы м, как в исходпом виде. Ак­
тер, художпик и исполпительпы й д иректор Star buzz Л оуреис Заи-
коивски припим ал активпое участие в создапии кпиги и помогал те­
стировать видеоприлож епие из главы 8 (пе пропустите!). Городская
ассоциация Б эйибридж Айлеид лю безпо разреш ила пам использо­
вать свой зам ечательпы й логотип, придумаппый Д эпиз Х аррис, как
символ ш таб-квартиры W ickedlySmart. Благодарим Э итоии Виззари
и А&А Studios за возможпость приводить ф отоспим ки их прекраспы х
ф отокабипок. В паш ем прим ере со стартапом TweetShirt вы увидите
красивы е икопки, предоставлеппы е C hethStudios.N et. Выражаем
п ризпательпость Internet Archive за кадры из фильмов, которы е мы
использовали для Webville TV. И спасибо Д эииелу Ш тейибергу, ко­
то р ы й там работает и всегда готов пам помочь.

К э т ц Сиерра

,
И наконец выражаем благодарность
Кэти и Берту
И последпими, по пичуть пе в мепь-
ш ей степепи, благодарим К эти Си-
ерру и Б ерта Бэйтса — участпиков
и М О ЗГО В О Й Ц ЕН ТР всей паш ей
операции, которы е к тому же являю т­
ся осповополож пикам и серии «Head
First». Надеемся, что паша кпига зай­
мет достойпое место в этой серии.

5
Усердно п р о в е р я е м на п р а к т и к е
с и с т е м у П арелли

*Так много благодарностей мы высказываем потому, что проверяем теорию о том, что каждый из
упомянутых здесь людей захочет купить минимум один ее экземпляр (возможно даже больше, например,
для своих родственников). Поэтому если вы желаете, чтобы мы упомянули вас в благодарностях
в нашей следующей книге и у вас много родственников, пишите нам.

32 введение
введение

О т издательства
Ваши зам ечапия, предлож ения и вопросы отправляйте по адресу электроп пой
почты vinitski@ m insk.piter.com (издательство «Питер», ком пью терная редакция).
Мы будем рады узпать ваше мпепие!
Н а сайте издательства h t t p : / /w w w .piter.com вы пайдете подробную ипф орм ацию
о паш их кпигах.

дальше ► 33
1 знак°сщВо с htroljj

* Добро пожаловать
в Вебвилль
Мы отправляемся в Вебвилль!
Там столько прекрасных домов в стиле
HTML5, что просто безумие жить в каком-
то другом месте! Давайте с нами, и мы
покажем вам все местные достопримеча-
V тельности. / '

HTML стремительно развивается. Да, изначально HTML представлял


Примечание: собой простой язык разметки, однако с выходом все новых версий он по­
язв!К XHTML степенно наращивал «мускулатуру». В настоящее время мы располагаем
получил
«прощ аль ~ версией HTML, заточенной под создание полноценных веб-приложений с
Иое письмо» поддержкой localStorage, 20-рисования, автономного режима работы, со­
в 2.004 году, кетов, потоков и т. д. История развития HTML не всегда была радужной:
о чем m w еще
1л.ого6ориМ- она полна драматизма (об этом мы поговорим позже), но в этой главе мы
для начала совершим увеселительную поездку по Вебвиллю, чтобы вы
могли разобраться во всем, что вкладывается в понятие «HTML5». Поэто­
му запрыгивайте к нам — мы отправляемся в Вебвилль, где за 3,8 страни­
цы (ровно) пройдем путь от исходной точки до HTML5.
Переходите на H T M L 5 СЕГОДНЯ! Зачем Ждать?
Воспользуйтесь нашим новым

НТМЫЗ-модернизатором
и сделайте зто всего за ТРИ ПРОСТЫХ ШАГА

Не раздумывайте! Акция действует в течение ограниченного вре­


мени. Мы возьмем ваши старые HTML-страницы и модернизируем
их до HTML5 за ТРИ ПРОСТЫХ ШАГА. J

/
Неужели все действительно так просто? Конечно! Мы даже под­
готовили для вас небольшую демонстрацию.
Взгляните на этот старый, потрепанный, видавший лучшие
дни HTML; мы превратим его в HTML5 прямо у вас на глазах:
< ! DOCTYPE h tm l PUBLIC " -//W 3 C //DTD HTML 4 .0 1 //E N "
т
4
" h t t p ://w w w .w3 .org/TR / h t m l 4 / s t r i c t .dtd." >
щк

<meta http-equiv="content-type"

< /h e a d >
<body>
c o n t e n t = " t e x t / h t m l ; cha r s e t = U T F - 8 ">

Clink type="text/css" rel="stylesheet" h r e f = " l o u n g e .c s s " >


<script type=" text/javascript" src="lounge .j s " X / s c r i p t >

Э т о вполне заурядны й код в е о -


^ й x
I
Л
у

(
<Ь1>Добро пожаловать в Head First Lounge</hl> с т р а н и ц ы Неа ЯлаЖ^Н
м ■ HTM L 4-.ОИ, к о т о р ы м должен
& бы т ь 6 д м знаком по к н и ^ *5,,
< im g s rc = "d r in k s .g if" a lt= " D r in k s " > цаеМ H T M L » (H e a d F ir s t H T M L )
< /p > (а если и н е т , не беспокойт есь,
3tVV0 $.$COAK}tVVHO и^ ййжно )
Каждый вечер присоединяйтесь к нам для разговора
за напитком <а href="elixirs .html" >elixirs</a>,
и, возможно, игры в two of Тар Тар Revolution.
К вашим услугам беспроводной доступ; ЗССВС (Захватите Свой Собственный Веб-Сервер).
< /р >
< /b o d y >

М 9

Ш ТУРМ
* Г 0 * 9 Й ________________________________________________________________________________________________________________________________________ __________

Вы увидите, насколько просто писать код на HTML5


!
Изучите приведенный выше пример кода, который написан на HTML 4.01 (это предыдущая вер­
сия языка). Взгляните на все строки и вспомните, что каждая из них делает. Отмечайте прямо
на странице. Далее мы с вами разберемся в том, как переделать его в HTML5-KOfl.

V
знакомство с HTML5

^ Возьми в руку карандаш

Внимательно взглянув на HTML-код на странице 36, заметили ли вы там какие-либо фраг­


менты разметки, которые могут претерпеть изменения при их переделке в HTML5? Или что
бы вы сами там изменили? Дадим вам одну подсказку: определение d o c t y p e .

Это просто озна- В этой части говорится, что


чает, что данный мы используем HTML версии 4 .0 1
d o c tu pe дляW m l - ст андарт я б д я - “ что разметка написана
ЭИД° ч т о н а м н у ж н о ' - ^ ^ т с я открытым на английском языке (EN)
то

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"


"http://www.w 3 .org/TR/html4/strict.dtd">

t
Это указание на файл , который опреде­
ляет соответствующий стандарт

Определение doctype относится к верхней части HTML-файла и сообщает браузеру, какого


типа этот документ, в данном случае — HTML 4.01. Благодаря d o c t y p e браузер более точ­
но может осуществлять интерпретацию и рендеринг страниц. Настоятельно рекомендуем
вам использовать d o c t y p e .

Итак, что подсказывают ваши дедуктивные способности в плане того, как будет выглядеть
определение d o c t y p e для HTML5? Напишите ответ здесь (вы сможете проверить его по­
сле того, как мы разберемся во всем чуть позже):

Ллихего
Зля

дальше ► 37
обнови свой html

Представляем наш новый МШ-модернимтор.


Обновите свой HTML прямо сейчас!

Шаг 1 у д и в и т вас: мы начнем с верхней части HTML-страницы Head First


Lounge и обновим определение d o c t y p e , придав ему новый блеск HTML5.
Вот как выглядела старая версия d o c ty p e в случае HTML 4.01:

< 'DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" я


"http://www.w3.org/TR/html4/strict.dtd"> ИзбмНЯб
п еред т е м м .
к т о успел
Вы, наверное, подумали, что в d o c t y p e мы собираемся заменить c3eAamt> себе
любое упоминание «4» на «5»? А вот и нет Преимущество в том, татуировку
ЧТО d o c t y p e для HTML5 ВЫГЛЯДИТ совсем просто: , doctype- 4 .< 3 i
<! doctype html> на |лЯлЛЯт17'

Вам больше не потребуется Google, чтобы узнать, как выглядит d o c t y p e


для HTML5, как и не потребуется копировать и вставлять его из другого
файла, поскольку это определение отличается крайней простотой и вам не
составит труда его запомнить.
Однако постойте, есть еще кое-что...
Данное определение d o c t y p e подходит не только для HTML5, но и для
всех будущих версий языка HTML. Другими словами, оно останется не­
изменным. Кроме того, оно будет работать и в старых версиях браузеров.

zztzz eQJ
Если вы фанат телешоу «Фабрика красоты» (Extreme Makeovers) или
«Потерявший больше всех» (The Biggest Loser), то шаг 2 вам понравится.
Здесь у нас имеется тег m e ta с атрибутом c o n t e n t . . . впрочем, взгляните
на картину «до» и «после»:
<шеta http-equiv="content-type" content="text/html; charset=UTF-8">
И д О (H T M L 4 )
<meta charset="utf-8">
П OCAB (H T M L S )

Да, новый тег m e ta значитеяы ю -похудел намного более прост При исполь­
зовании тега m e ta в HTML5 нужно лишь указать его наряду с кодировкой
символов. Верите вы или нет, но все браузеры (новых и старых версий) уже
понимают такое метаописание, поэтому его можно использовать в коде
любой страницы — и оно будет работать.

38 глава 1
знакомство с HTML5

А теперь шаг 3, заключительный. Здесь мы сосредоточим внимание на элемен­


те < h e a d > и модернизируем тег l i n k . Вот что у нас имеется на текущий момент:
тег l i n k с атрибутом t y p e со значением t e x t / c s s , указывающий на каскадную
таблицу стилей (значение s t y l e s h e e t ) :
Clink t y p e = " text/css" rel="stylesheet" href="lounge.css ">
mapoM HTML
\С.од НД С
Чтобы обновить этот код до HTML5, нужно просто убрать атрибут t y p e . По­
чему? Потому что CSS объявлен стандартным языком стилей для HTML5 по
умолчанию. Таким образом, после того как мы удалим атрибут t y p e , наш об­
новленный тег l i n k приобретет следующий вид:
< l i n k г e l = " s t y l e s h e e t " h r e f = " lo u n g e . c s s " > ^
HTMLS

Поскольку вы работали быстро, у насесть специальный бонус для вас. Мы еще


больше облегчим вам жизнь, упростив тег s c r i p t . JavaScript в случае HTML5
стал стандартным языком сценариев по умолчанию, поэтому вы можете уда­
лить атрибут t y p e также и из тегов s c r i p t . Вот каким станет наш тег s c r i p t без
атрибута t y p e . i~i& беспокойтесь, если вы
< s c r i p t s г с = пl o u n g e . j s " X / s c r i p t > i T ' не слишком много знаете о теге
script, мы еще дойдем до него...
Либо, если вы будете иметь дело со встроенным кодом, можете просто напи­
сать свой сценарий следующим образом:
< s c r ip t >

v a r youR ock = t r u e ; n
y Beet? бяид
</script> J a v a S c rip t Подробнее о JavaScript
ёудет здесь- мы поговорим позже.

Поздравляем, теперь вы сертифицированы


модернизировать любой HTML-код до HTML-5!

Как продвинутый пользователь НТМ1_5-модернизатора,


вы обладаете всем необходимым для того, чтобы обновить
любую нормальную HTML-страницу до HTML5. Дерзайте, пришло
время реализовать полученные знания на практике!

дальше ► 39
больше чем разметка

Постойте-ка, столько суеты


вокруг H TM L5, и вдруг оказы­
вается, что это все, что от меня
потребуется? О чем же тогда
оставшаяся часть книги?

Ладно, ладно, вы нас поймали. Пока мы вели


речь о модернизации кода HTM L-страниц, создан­
ных с помощью старой версии этого языка, с це­
лью паделить их всеми преимуществами, которы е
дает HTML5. И, как можно было убедиться, если
вы зпакомы с HTM L 4.01, то это просто отлично,
поскольку HTM L5 — это расш иренны й HTM L 4.01
(то есть практически все имею щ ееся в нем под­
держ ивается и в HTM L5), и вам потребуется лишь
зпать, как определять d o c ty p e и остальные теги в
элемепте < head> , чтобы начать программировать
па HTM L5.
Но вы правы в том, что мы повели себя несколько
глупо, поскольку, конечно же, язы к HTML5 —это не­
что большее, чем просто модернизация нескольких
элемептов. Разработчиков в нем привлекает воз­
мож ность создавать насы щ енны е, интерактивны е
страпицы (или даже сложные веб-приложения),
а также то, что оп вклю чает в себя целое семейство
технологий, которы е работаю т рука об руку с этим
язы ком разметки.
Одпако пе будем спеш ить. П реж де чем двинуться
дальше, сделаем еще кое-что, чтобы окопчательпо
разобраться с паш ей HTM L-разметкой.
знакомство с HTML5

Возьми в руку карандаш_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _


Вы ближе к НТМ1_5-разметке, чем думаете!
Здесь приведена разметка на старом HTML, которая нуждается в обновлении. Осуществите
НТМ1_5-модернизацию и обновите этот написанный на HTML 4.01 код до HTML5. Не бойтесь
делать пометки в книге, вычеркивайте приведенную здесь HTML-разметку и добавляйте новый
код, который вам потребуется. Мы немного помогли вам и выделили области, нуждающееся
в изменениях.

Закончив, напечатайте код (или внесите изменения в файл упражнения, если вам так больше
нравится), загрузите его в браузер и, откинувшись на спинку стула, насладитесь своим первым
творением на HTML5. Ах да, наши ответы вы найдете на следующей странице.

^ Чтобы загрузить весь код и файлы примеров для этой книги ,


посетите страницу h ttp ://w ic ke d lysm a rt.c o m /h fh tm ls.

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"


"http://www.w3.org/TR/html4/strict.dtdn>
<html>
<head>
<title>Head First Lounge</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="lounge.css">
< script type="text/javascript" src= "lounge.js"X/script>
</head>
<body>
<Ь1>Добро пожаловать в Head First Lounge</hl>
<P>
< img src="drinks .gif11 a l t = 11D r i n k s 11>
< /p >
<p>
Каждый вечер присоединяйтесь к нам для разговора
за напитком <а href="elixirs .html11>elixirs</a>,
и, возможно, игры в Тар Тар Revolution.
Всегда к вашим услугам беспроводной доступ; ЗССВС (Захватите Свой
Собственный Веб-Сервер).
< /р >
</body>
< /html>

дальше ► 41
решение упражнения

г< й Возьми в руку карандаш


Решение
Вы ближе к HTML 5-разметке, чем вы думаете!
Здесь приведена разметка на старом HTML, которая нуждается в обновлении.
Осуществите HTMLS-модернизацию и обновите этот написанный на HTML 4.01
код до HTML5. Не бойтесь делать пометки в книге, вычеркивайте приведенную
здесь HTML-разметку и добавляйте новый код, который вам потребуется. Мы не­
много помогли вам и выделили области, нуждающиеся в изменениях.

Вот наше решение.

Вот четыре строки ,


Обновленный код будет выглядеть так:
благодаря измене­
нию которых наша
yz. Определение doctype веб-страница Head
< ! d o c ty p & k t m l >
First Lounge получила
<html> официальное право
<head> называться HTMLS-
<title>Head First Lounge</title> страницей.

< m e ta c k a r s e t= " u tf- 2 " > ^ ' Тег m eta


< l i n k r e l = " s t y l e s h e e t " P \r e f= " lo u n g e .c s s " > Тег lfnk
< s c rip t s r c = " lo u n g e .js " x /s c r ip t> 2=— . Тег script
<
</head>
<body>
<Ь1>Добро пожаловать в Head First Lounge</hl>
<P>
<im g s r c = 11drinks .gif11 a l t = 11D r i n k s 11>
</ p >
<p>
Каждый вечер присоединяйтесь к нам для разговора
за напитком <а h r e f = nelixirs .html11>elixirs</a>,
и, возможно, игры в Тар Тар Revolution.
Всегда к вашим услугам беспроводной доступ; ЗССВС (Захватите Свой
Собственный Веб-Сервер).
</ р >
</body>
</html> Не в е р и т е н а м ? З а й д и т е п о
адресу
k t t p Y / v a h d a t o r . w s . o r g / , и вы у д е -

„ иС* ~ °На nP W od^ валидацию


к а к H T M L s - с т р а н и ц а . Вез ш у т о к '

42 глава 1
знакомство с HTML5
Часш°
^адаВ аеМ ы е
В опросы

А как все это работает в старых версиях браузеров? Все 0 : Да, это так, особенно пока HTML5 не обрел 100%-ную под­
эти новые doctype, meta и т. д... ведь как-то же могут старые держку всеми браузерами. Об этих аспектах мы поговорим позже.
браузеры работать с этим новым синтаксисом?
А почему вообще все это имеет значение? Я вот написал
0 : Да, могут. Взгляните на атрибуты t y p e тегов l i n k и код веб-страницы без doctype и тега meta, и она отлично рабо­
s c r i p t ; сейчас имеет смысл избавиться от них в HTML5, по­ тает. Зачем мне лишняя головная боль, если в таком подходе
скольку CSS и JavaScript теперь являются стандартами (и, конечно нет абсолютно ничего неправильного?
же, технологиями по умолчанию для работы со стилями и написания
сценариев соответственно). Как оказалось, браузерам уже заранее 0 : Да, браузеры легко пропускают мелкие ошибки в HTML-
было известно, что CSS и JavaScript являются таковыми. Так, по файлах. Однако если вы включите соответствующие d o c t y p e
стечению обстоятельств новый язык разметки HTML5 уже довольно и теги m e ta , то сможете быть уверены в том, что браузеры будут
долгое время поддерживается существующими браузерами. Тоже знать, что именно вы от них хотите, а не гадать об этом. Кроме того,
самое справедливо и в случае с d o c t y p e и тегом m e ta . в случае с людьми, пользующимися старыми версиями браузеров,
указание нового d o c t y p e означает, что они будут использовать
А как насчет нового doctype? Что-то с ним все стало слиш­ стандартный режим, что как раз вам и нужно. Стандартный режим —
ком просто; у него нет даже версии или идентификатора DTD. это режим, в котором браузер считает, что написанный вами HTML-
код соответствует стандарту, поэтому он будет пользоваться прави­
лами данного стандарта при интерпретации вашей страницы. Если
0 : Да, кажется немного необычным, что после многих лет при­
вы не укажете d o c t y p e , то некоторые браузеры могут перейти
менения комплексных d o c ty p e теперь мы можем упростить их до
в режим совместимости и посчитать, что ваша страница написана
фразы «мы используем HTML». А произошло вот что: HTML ранее
для старых версий браузеров, когда соответствующий стандарт
основывался на стандарте SGML, который требовал как комплекс­
еще не был на должной высоте, и неправильно интерпретировать
ных форм d o c ty p e , так и DTD. Новый стандарт отошел от SGML,
страницу (или решить, что она просто некорректно написана).
преследуя этим цель сделать язык HTML проще и гибче. Таким
образом, нужда в комплексных формах отпала. Здесь не обошлось
А что случилось с XHTML? Ведь еще несколько лет назад
без некоторой доли везения в том плане, что почти все браузеры
казалось, что за ним будущее.
просто ищут HTML в определении d o c t y p e , чтобы убедиться
в том, что они осуществляют разбор именно HTML-документа.
Q j Да, так оно и было. Однако потом гибкость возобладала над
строгим синтаксисом, и XHTML (XHTML 2, если быть точными) по­
Это было всерьез, когда вы говорили, что d o c t y p e
степенно стал умирать, поскольку новый HTML5 оказался более
останется неизменным? Как мне казалось, для браузеров
либеральным в плане написания людьми веб-страниц (и осущест­
важен контроль версий. Почему бы не использовать <!doctype
вления их рендеринга браузерами). Но пусть вас это не смущает,
html5>? Наверняка в будущем появится HTML6. Ведь так?
так как знание XHTML лишь сделает из вас еще более успешного
HTML5-pa3pa6oT4HKa. Кстати, если вы испытываете привязанность
0 : Подход к использованию d o c t y p e претерпевал изменения, kXML, знайте, что существует также способ написания HTML5-KOfla
и разработчики браузеров применяли его для того, чтобы дать ука­ в строгой форме. Подробнее об этом мы поговорим позже...
зание своим браузерам осуществлять рендеринг в их собственном
стандартном режиме. Теперь, когда у нас имеется намного более • Что такое UTF-8?
точный стандарт, d o c t y p e в HTML5 сообщает любому браузеру,
что конкретный документ является стандартным HTML, будь он
0 : UTF-8 — это кодировка символов, поддерживающая множе­
версии 5, б или любой другой. ство алфавитов, включая незападные. Вам, вероятно, доводилось
сталкиваться с другими наборами символов, использовавшимися
Предполагаю, что разные браузеры пользователей будут в прошлом, однако UTF-8 продвигается как новый стандарт. Она
поддерживать различающиеся наборы возможностей HTML5. также быстрее и легче запоминается, чем предшествующие коди­
Что делать в таком случае? ровки символов.

дальше ► 43
что вы должны знать

М С ЛШ ТМ )
Мы все-таки ие ож идаем, что вы зиаете HTML5.
Даже если вы пикогда рапее пе запимались HTML5,
это пе проблема, одпако у вас долж еп иметься опы т
работы с HTM L и зпапие таких базовых аспектов,
как элемепты , теги, атрибуты, влож епия, попима-
пие разп и цы между семаптической разм еткой и до­
бавлением стиля и т. д.
Если вы пе зпакомы с даппы ми аспектами, то мы
возьмем па себя смелость дать вам пеболы пой со­
вет (и бесстыдпым образом кое-что прореклам и­
ровать): есть еще одпа кпига из этой серии, назы ­
вающ аяся «Изучаем HTM L, XHTM L и CSS», и вам
следует ее прочитать. Если же вы отчасти зпакомы
с язы ками разм етки, мож ете бегло ознаком иться с
даппым издапием или использовать его как спра-
вочпик при чтеп ии даппой кпиги.

Мы также предусм от ре­


ли небольшое руководство
по размет ке HTMLS и CSS3
в приложении. Если вам
нужен краткий обзор ново­
введенийj то вы найдете его
в конце книги.

44 глава 1
знакомство с HTML5

Интервью недели:
Признания новой версии HTML

Head First: Д обро пож аловать, HTM L5. Весь Ип- пия последпих. К счастью, с людьми, работающими
терп ет просто гудит от разговоров о Вас. Как пам пад специф икациям и HTML5, мы полпостью схо­
кажется, Вы во мпогом похож и па HTM L 4. В чем димся во взглядах.
же п р ичи па всеобщ его аж иотаж а вокруг Вас?
Head First: В озвращ аясь к п реды дущ ей в ер си и
HTML5: Всеобщ ий аж иотаж объяспяется тем, что HTML, Вы отмечали, что являетесь расш ирепием
я предоставляю возмож пости по создапию совер- HTM L 4.01. То есть Вы обратпо совместимы с пей,
ш еппо пового п околеп и я веб-прилож епий и обе­ правильп о? О зп ач ает ли это, ч то Вам п р и д етс я
спечению качествеппого взаимодействия с пими. справляться с пе всегда удачпыми в плапе дизайпа
веб-страпицами из прошлого?
Head First: Согласеп, по почему HTM L 4 или казав­
шийся многообещающим XHTML пе сделали этого? HTML5: Обещаю, что приложу максимум усилий для
HTML5: XHTM L 2 оказался тупиковой ветвью эво­ того, чтобы справиться со всем, что мпе подкинут
лю ции. К аж ды й, кому д овелось п и сать код веб- из прош лого. Но отмечу, что это пе зпачит, что со
стр ап и ц п а это м язы к е , т е р п е т ь его больш е пе мпой так и нужпо обращаться. Я хочу, чтобы созда­
может. XHTML запово изобрел подход к паписапию тели веб-страпиц приобщ ались к повейш им стан­
разм етки веб-страпиц, которы й уже и так исполь­ дартам и использовали мепя паилучшим образом.
зуется, и пе привпосил в страпицы пичего пового. Благодаря этому опи смогут получить максимальную
Я сказал: «Постойте-ка, я ведь могу делать повы е отдачу от моего примепепия. Но, с другой сторопы,
вещи и п ри этом заключаю в себе все те возмож ­ я пе спасую и смогу обеспечить отображепие старой
пости , к о то р ы е сущ ествовали до мепя». Я имею веб-страпицы в силу своих возможностей, даже если
в виду, что если что-то работает, то зачем запово опа пе была м одерпизировапа до HTM L5.
и зобретать колесо. Такова моя ф илософ ия. Head First: М ой следующий вопрос звучит так...
Head First: Н о и звестп о ли вам, что п ек о то р ы е HTML5: Стойте, стойте!!! Все эти вопросы касаются
разработчи ки стандартов по-прежпему заявляют, прош лого. Мы с Вами пе говорим о том, что важпо
что И п тер п ету будет лучше, если оп стапет п р и ­ здесь и сейчас. П оскольку реч ь и дет о м оей р аз­
держ иваться их «безупречпых» стандартов? метке, хочу сказать, что моя персопальпая миссия
HTML5: Зпаете, мпе все равпо, что опи там говорят. заключается в том, чтобы охватить своими объяти­
Я прислушиваюсь к людям, которые реальпо запяты ями весь И птерпет, впедрить повы е структурпые
паписапием веб-страпиц: как опи используют мепя, элементы, облегчающие жизпь веб-разработчикам,
как я могу им помочь. Вторыми в моем списке идут и помочь всем создателям браузеров поддерживать
создатели веб-браузеров. А разработчики стандар­ согласованную семаптику вокруг разметки HTML5.
тов стоят в этом списке последними. Я стапу п ри ­ Но па самом деле я здесь для того, чтобы рассказать
слушиваться к их словам только при условии, что Вам о своем дополпительпом предпазпачепии: веб-
опи пе расходятся с мпепием пользователей. приложе...
Head First: Почему же? Head First: ...Жаль, HTML5, по паше время истекло.
Спасибо, в следующем иптервью мы обязательно
HTML5: Потому что если пользователи и создатели
поговорим обо всем, о чем Вы пож елаете.
браузеров пе согласпы с разработчикам и стандар­
тов, то это пав од ит па мысли о правильности мпе- HML5: Б-р-р -р, терпеть пе могу, когда так случается!

дальше ► 45
отзывы об html5

Просим встать НАСТОЯЩЕГО HTML5...


И так, вы терпеливо выслушали паше шуточпое повествовапие о «НТМ Ьб-модерпизаторе», и мы уве-
репы , что вы уже догадались о том, что HTM L5 представляет собой печто пампого большее, чем там
было сказало. Если поспраш ивать разпы х людей, то в ответ можпо услышать, что, по слухам, HTM L5
устрапяет необходимость в плагипах, мож ет использоваться повсюду, пачипая от просты х страпиц и
закапчивая играми типа Q uake, является кремом из взбиты х сливок па десерте. Каждый по-разпому
представляет себе, что такое HTML5...

HTM L5 — это все


о мультимедиа, о том, как
избавиться от плагинов, о воз­
можностях собственной под­
держки аудио и видео.

Вообще-то он касается создания


насыщенных клиентских интернет-приложе­
ний. Вместо того чтобы создавать их с помощью ин­
струментов вроде Flash, теперь я могу использовать
элемент canvas, трансформации и JavaScript для гене­
рирования классных интерфейсов и анимаций.

46 глава 1
знакомство с HTML5

Замечательная вещь в HTM L5 — хранение


информации на стороне клиента и кэши­
рование. Как вам возможность автономного
доступа к данным из Интернета?

Так здорово, что я могу исполь­


зовать Web W orkers для повыше­
ния эффективности моего JavaScript
и увеличения отзывчивости веб­
страниц.

В CSS также есть


масса всего нового, что
можно использовать вместе с HTML5:
продвинутые селекторы, анимации и — да,
эффект отбрасывания тени!

И не забудьте о мо­
бильных устройствах. Мне
нравится возможность создавать
страницы с поддержкой опре­
деления местоположения.

Хорош ая новость заклю чается в том, что HTML5 действительно является


всем тем, о чем сказано выше. Когда люди говорят о HTM L5, они имею т
в виду семейство технологий, которы е в сочетапии друг с другом образуют
целую повую палитру для создапия веб-страпиц и прилож епий.

дальше ► 47
как работает html5

Как на самом 9еле работает HTML5...


В приложении вы
И так, как было сказало выше, в оспове HTM L5 леж ит семейство техпологий, / • найдете замеча­
по что это зпачит? Ч то ж, как вам уже известпо, существует HTM L-разметка тельное Вебвилль­
сама по себе, которая была расш ирепа с целью вклю чепия ряда повы х эле- ское руководство
мептов. К роме того, с выходом CSS3 мпого пового появилось в каскадпых та­ по новой HTML-
блицах стилей, что откры ло еще более ш ирокие возмож пости по стилизации размет ке и свой­
веб-страпиц. Также существует турбопагпетатель под пазвапием JavaScript и ствам CSS3.
целы й повы й пабор API-иптерф ейсов JavaScript, доступпых вам.
Д авайте загляпем за кулисы и посмотрим, как все это объединяется.

Браузер загружает документ, вклю­ При загрузке страницы браузер также соз­
чающий HTML-разметку и CSS-стили. дает внутреннюю модель документа, ко­
торая будет содержать все элементы вашей
HTML-разметки.
г
т
WelcometotheHeadFirst [.nun^e- html

M body
I I I I
title script hi I h2 P
l
em
/
Для каждого элемента ...Это дерево называется объ­
в вашей HTML-размет ке ектной моделью документа
браузер создает объект,
объект, (Vocum ent object Model, РОМ),
который будет представ- g w б дете часто ст алки-
лять соответствующий ват ^ся с ней ходу кни­
элемент, и размещает ги, поскольку данная модель
его в древовидной ст р ук ­ играет важную роль в т ом ,
туре со всеми остальны­ как мы добавляем поведение
ми элементами... к веб-странии,ам с помощью
J a va S c r i p t (подробнее в главе £)■

Стиль страницы (при наличии такового) берет ­


ся из CSS3, который стал расширением CSS2
и включил в себя множество распространенных
_____ идиом, используемых в Интернете (например,
71 отбрасывание тени и закругленные углы).

Сг н и е м HTMLS р а з м е н „ р е в е л а ^

из них в * в ^ессе « «»»>■

48 глава 1
знакомство с HTML5

сЦ еной

При загрузке страницы браузер также


загружает ваш JavaScript-ко д , выполне­
ние которого обычно запускается сразу
после окончания загрузки страницы.

Применяя JavaScript, вы сможете взаимо­


действовать со своей страницей пут ем
манипулирования объектной моделью
документа (РОМ), обеспечивать реакцию
на действия пользователя или генериру­
емые браузером события либо использо­
вать весь набор новых API -интерфейсов.

JavaScript взаимодействует
с вашей страницей посред­ API -интерфейсы, также
ством объектной модели известные как интерфейсы
документа (РОМ). прикладного программирова­
ния (Application Programming
Interfaces), обеспечат для вас
набор объектов, методов и
свойств, которые вы сможе­
API-интерфейсы обеспечат вам до­ те использовать для дост у­
ступ к элементам a u d io и v id e o , па ко всей функциональности
20-рисованию с использованием этих технологий. Многие из
canvas, к lo c a lS to r a g e и прочим этих API -интерфейсов мы
замечательным технологиям, необ­ рассмот рим далее.
ходимым для создания приложений.
И не забывайте, что для использова­
ния всех этих API-интерфейсов необ­
ходим JavaScript.

Авто­ Local
номное
Знакомьтесь: кэширо­ Storage
API-интерфейсы вание
JavaScript
Web
Workers Geolocation
Forms

дальше ► 49
семейство html5

К Т 9 И НТ<

Мы с вами говорили о «семействе технологий» столько раз, что уже кажется, что мы сами одна семья. Однако мы
по-настоящему так и не разобрались в том, что конкретно они собой представляют, поэтому, наконец, сделаем
это. Ниже представлен перечень большинства членов этого семейства, посмотрите, сможете ли вы разобраться,
кто есть кто. Мы вас опередили и в качестве примера соотнесли одно из описаний с нужной позицией. Не бес­
покойтесь, мы знаем, что это ваша первая встреча с членами семейства HTML5, поэтому
ответы вы найдете в конце главы.

Используя мепя, вы мож ете рисовать прямо п а своей веб-страпице.


CSS3 Благодаря мпе можпо рисовать текст, изображ епия, липии, круги,
прямоугольпики, узоры, прим епять градиепты. Я помогу вам рас­
кры ть таящ егося в вас художпика.
М епя использовали в HTM L 4 для ввода и пф орм ации, по я стал
Web Workers
еще лучше в HTML5. Я могу требовать от вас заполпять все поля и
способеп проверять, ввели ли вы адрес электроп пой почты , URL-
адрес или пом ер телеф опа туда, куда требуется.
Forms Рапее для обеспечепия фупкциопальпости, апалогичпой пашей,
вам приходилось использовать плагипы , по теп ерь мы стали пол-
поцеппы м и члепами семейства элемептов HTML. Х отите посмо­
треть или послушать что-либо? Тогда мы нужпы вам.
Автономные веб-
Мы здесь для того, чтобы помочь вам со структурой и семаптиче-
прилоЖения
ским зпачепием ваш ей страпицы и обеспечить повы е способы соз-
дапия секций, заголовков, пиж пих колоптитулов и павигации па
ваших страпицах.
Audio и Video Я самый стильпы й во всем семействе. Зпаете ли вы, что теперь я
могу апим ировать ваши элемепты , придавать их углам закруглеп-
пость и даже обеспечивать эф ф ект отбрасы вапия тепи?

Новые элементы Используйте мепя как часть локальпого храпилищ а в браузере лю­
бого пользователя. Вам пеобходимо сохрапять устаповки, элемеп­
ражетки ты, помещ еппы е в электропную корзину, или, возмож по, даже п ри ­
п рятать больш ой кэш для увеличения производительпости? Тогда
я нужпый вам API-иптерфейс.
Local Storage
Вам требую тся прилож ения, способпые работать даже тогда, когда
отсутствует подклю чепие к Сети? Я могу вам помочь.

Canvas Я —API-иптерф ейс, которы й помож ет вам определить свое место­


полож ение, и отличпо работаю с К артами Google.

Я потребуюсь, когда вам будет пеобходимо, чтобы песколько сцена­


Geolocation риев вы полпялись параллельпо в ф оповом реж им е, благодаря чему
ваш иптерф ей с пользователя сможет оставаться отзы вчивы м.

50 глава 1
ВАШ А М и с с и я
■■■вели вы на нее со знакомство с HTML5

4% ,
%
Р СЯ'^ОСКОЛЬКу ИСТИНд
%

ВАША ПЕРВАЯ МИССИЯ:


с °1 *Ш Ч П Е 1 Щ о
РАЗВЕДКА В СТАНЕ БРАУЗЕРОВ
СЕК РЕТН О
ВАМ ПОРУЧАЕТСЯ ОПРЕДЕЛИТЬ
■ ■ И Н Н ТЕКУЩИЙ УРОВЕНЬ ПОДДЕРЖКИ ПО КАЖДОМУ ИЗ ПРИВЕДЕННЫХ
НИЖЕ БРАУЗЕРОВ (ПРИМЕЧАНИЕ: ВЫ СМОЖЕТЕ ОТЫСКАТЬ НУЖНУЮ ИНФОРМАЦИЮ ПО
АДРЕСУ H T T P ://WICKEDbYSMART.COM/HFHTML5/BROWSERSUPPORT.H T M L , Щ Щ Ш Ш Ш •
ПРИНИМАЙТЕ ВО ВНИМАНИЕ НОВЕЙШИЕ ВЕРСИИ БРАУЗЕРОВ. ПО КАЖДОМУ БРАУЗЕРУ,
ПРИВЕДЕННОМУ В СТОЛБЦЕ «БРАУЗЕР/ВОЗМОЖНОСТЬ», ОТМЕТЬТЕ ВОЗМОЖНОСТИ,
КОТОРЫЕ ОН ПОДДЕРЖИВАЕТ, А ЗАТЕМ ДАЙТЕ СВОЮ СУБЪЕКТИВНУЮ ОЦЕНКУ ТОГО,
НАСКОЛЬКО ХОРОШО ОН СОВМЕСТИМ С HTML5 Н Н Н Н В В В Н Н ’ ПО ВОЗВРАЩЕНИИ
ПРЕДСТАВЬТЕ ОТЧЕТ ДЛЯ ПОЛУЧЕНИЯ НОВОГО ЗАДАНИЯ*
Возможность

Автономные веб­
/

Storage

Geolocatoin

Workers

приложения
Canvas
Video

Audio

Web
Web
UJ

Firefox

Safari

Chrome

Устрой­ Mobile
ства под WebKit
уп р а в-
лением Opera
операци -
онны х с и ­ IE 6, 7
с т е м iO S
и A n d r o id
IE 8
(среди
прочих)
IE 9

дальш е ► 51
брэузерная разе едка

ВАША ПЕРВАЯ МИССИЯ


С О В ЕРШ ЕН Н О
%
РАЗВЕДКА В СТАНЕ
СЕКРЕТНО
БРАУЗЕРОВ Mbl немного схитрили при ответе и поставили флажки, ори -
ентируясь на ситуацию, которая сложимся к Z O I S году. Но ваши
ответы должны отражать положение вещей на момент чтения
книги. Нам кажется, вам будет интересно заглянуть в будущее.

Автономные веб­
Возможность

Storage

Geolocation

Workers

приложения
Canvas
0 0
$

Web
Web
0J
В!

i> 1

Firefox
/ / / / / !/ /
Safari
/ / / / / / /
Chrome
/ / / / / /
Mobile
WebKit / / / / / / /
Opera
/ / / / / / /
IE 6, 7

IE 8 /
IE 9 / / / / /

Поддержку, вы бу УеТСЯ Как°е-то врем я п


зоваться и м и з а д о л Шать’ Какие имепгю ^°’ ЧТобы стапдарт НТМ г к
О д ер ж и в а ю т ся сои Д° ЭТ° Г° события ф я РаузеРы Полностью ег ° брСЛ Повсеместну.«

глава 1
Г аС ™ ;“ — про.
И НС m m U ne'
знакомство с HTML5

Постойте-ка, если я начну использовать


HTM L5 прямо сейчас, разве не получится так, что я
оттолкну пользователей старых браузеров? Или мне
придется писать две варианта своих веб-страниц: один
для браузеров с поддержкой HTM L5, а другой — для
старых версий браузеров?

Притормозите, сделайте глубокий вдох.


Прежде всего HTML5 — расш ирение предыдущей вер­
сии HTML, поэтому вам придется писать только один
вариант своих веб-страниц. Вы правы в том, что возмож­
ности, поддерж иваемы е браузерами, могут отличаться
в зависимости от того, насколько новой является вер­
сия веб-обозревателя и как часто ваши пользователи об­
новляю т его. Таким образом, необходимо иметь в виду,
что некоторы е из новейш их возмож ностей HTML5
могут не поддерж иваться браузерами пользователей,
и это возвращ ает нас к вопросу о том, что делать в та­
ком случае.
Сейчас один из принципов HTM L5-дизaйнa подразу­
мевает, что своим страницам необходимо давать воз­
можность плавно деградировать, то есть если браузер
вашего пользователя не поддерж ивает какую-то новую
фупкцию, вы долж пы позаботься о достойпой альтерпа-
тиве для пего. В кпиге мы покаж ем вам, как писать свои
страпицы с учетом этого.
Х орош ая повость заклю чается в том, что все браузеры
двигаю тся по паправлепию к стапдарту HTM L5 и свя-
заппым с пим техпологиям (даже мобильпые браузеры),
в силу чего со времепем плавпая деградация стапет ско­
рее исклю чением, чем правилом (хотя вы всегда будете
хотеть сделать все возмож пое, чтобы обеспечить для
пользователей достойпое взаимодействие со своими
веб-страпицами независимо от того, какие браузеры у
пих будутустаповлепы).

дальше ► 53
общие вопросы html5
4acm°
Задаваем ы е
БоЭЭроСЬ!

»Я слышал, что стандарт HTML5 не получит статус финаль­ >Chrome, Safari, Firefox, множество мобильных браузеров...
ной [
НОИ рекомендации до 2022 года! Это правда? вам не кажется, что ситуация лишь усугубляется? Будут ли
наши страницы нормально работать во всех этих браузерах?
Q : W3C - :■это организация по разработке стандартов, которая
формально рекомендует стандарт HTML5. Входящие в W3C люди 0 : Несмотря на конкуренцию на рынке браузеров (для настольных
любят действовать осторожно, причем настолько, что предпочитают компьютеров и мобильных устройств), на самом деле большинство
дождаться, пока сменится несколько поколений НТМ1_5-браузеров, из них основано всего на нескольких общих HTML-движках. Напри­
прежде чем решиться сделать данный шаг. И это правильно, по­ мер, Chrome, Safari и мобильные браузеры для Android и iPhone
скольку со стандартом все окончательно утрясется в ближайшие базируются на Web К it, который представляет собой браузер ный
два года, а разработчики браузеров уверенно движутся по пути его движок с открытым исходным кодом. Поэтому веб-страницы, по
реализации. Так что, да, может пройти какое-то время, прежде чем большей части, смогут успешно работать в разных браузерах.
HTML5 обретет статус «финальной рекомендации». Ожидается,
что он станет стандартом уже к 2014 году, и использовать HTML5
в практических целях следует начинать уже сейчас.
В
б
А почему бы просто не использовать Flash, чтобы из­
бежать
ежа проблем с межбраузерной поддержкой?

Что произойдет, когда все окончательно решится с HTML5? Q : Flash - <- отличныи инструмент, который получил повсеместное
распространение в операционных системах и браузерах настоль­
0 : Появится HTML6? Мы понятия не имеем, но, вероятно, что бы ного сегмента. HTML5 со своим семейством технологий предлагает
там ни было, оно придет к нам вместе с летающими автомобилями, вам сделать с использованием открытых стандартов многое из того
ракетными костюмами и обедами в таблетках. Помните, что даже же, что и Flash. Что вам предпочесть? Задумайтесь о том, какой
если мы перейдем на HTML6, d o c t y p e не изменится. Если пред­ объем инвестиций в технологии HTML5 вкладывают такие компании,
полагать, что W3C сдержит свое обещание и будущие версии HTML как Google, Apple, Microsoft и др. В долгосрочной перспективе HTML5
окажутся обратно совместимыми друг с другом, то мы сможем без станет крупным игроком, а в мобильном сегменте он уже является
проблем перейти на нечто новое, что будет следующим на очереди. таковым. Выбор за вами, обе эти технологии будут в обиходе еще
долгое время, индустрия движется по направлению к открытым
стандартам.

археология
Мы провели раскопки и оьнаружили код, вложенный в HTML-страницу. Надеемся, вы
поможете нам взломать данный код и выяснить, что он означает. Мы не ожидаем от вас
толкования этого кода, а просто пытаемся разогреть ваш мозг, заставив его немного
порассуждать дедуктивным путем...

<script>
var w a l k s L i k e " d u c k 11 ;
var s o u n d s L i k e = d o c u m e n t . g e t E l e m e n t B y I d ( " s o u n d s l i k e " ) ;
i f (walksLike = = "dog") { Подсказка: docum ent пред­
s o u n d s L i k e .i n n e r H T M L = "Woof! Woo f ! " ;
ставляет целую HTML -
} e l s e if (walksLike == "duck") {
страницу , a getElem entBy Id,
s o u n d s L i k e .i n n e r H T M L = "Quack, Quack"
} else {
возможно, имеет от но­
s o u n d s L i k e .i n n e r H T M L = " C r i c k e t s . . . " ; шение к HTML-элемент ам
} и идентификаторам.
< / script>

54 глава 1
знакомство с HTML5

Я просто хочу сказать, что если


вы намерены серьезно заняться создани­
ем веб-приложений и использованием
HTM L5, то вам потребуются навыки работы
\ с JavaScript. ^

У нас к вам есть разговор.


Если вы рапее прочитали кпигу «Изучаем HTM L, XHTM L и CSS», то мы по­
лагаем, что вы, вероятпо, хорош о разбираетесь в использовапии язы ков
разм етки и таблиц стилей для создапия прекраспы х веб-страпиц. О риеп-
тируясь в обеих этих техпологиях, вы сможете преодолеть длиппы й нуть...
С появлепием HTML5 веб-страпицы превращ аю тся в пасы щ еппы е п рило­
ж ения, обладающие поведепием, обповляю тся па лету и взаимодействуют
с пользователями. Создапие страпиц подобпого рода требует изрядпого
труда программиста, и если вы собираетесь писать код, которы й будет вы­
полняться в браузере, то вам пеобходимо использовать JavaScript.
Если вам доводилось рапее запиматься програм м ировапием или папи-
&олее
сапием просты х сцепариев, то вам это пригодится: JavaScript (песм отря
увлека­
па слухи) является фаптастическим язы ком, и в этой кпиге мы поведаем тельного
вам обо всем, что пеобходимо зпать для паписапия прилож ений. Если же способа
у вас п ет опы та програм м ирования, мы сделаем все возмож пое, чтобы научиться
ввести вас в курс дела. В лю бом случае, одпим из огромпы х преимуществ програм ­
JavaScript является легкость его попим апия для программистов-повичков. мированию
Итак, что теперь? Д авайте кратко ознакомимся с JavaScript, а затем по- мы и пред­
пастоящему глубоко погрузимся в пего в главе 2. Н е старайтесь разобрать­ ставить
ся во всех деталях па п ротяж ени и пескольких следующих страпиц —здесь не можем!
вы долж пы лиш ь почувствовать, что такоеJavaScript.

дальше ► 55
что умеет javascript Взаимодействуйте со своими страницами новыми
способами, которые подходят как для настольного
сегмента, так и для портативных устройств.

Что моЖно С9елать с помощью JavaScript? * *

JavaScript открывает целый новый мир выражений


и функциональностей для ваших веб-страниц. Да­
вайте взглянем на ряд вещей, которые вы сможете
сделать с помощью JavaScript и HTML5...

£ p T » i! 7 гр» этом не потребуются никак»

Внедряйте в свои страницы под­


держку определения местополо­
жения, чтобы можно было узнать,
где находятся ваши пользователи,
показать им, что располагается
поблизости, помочь отыскать то,
что им нужно, задать им направле­
ние либо собрать людей с общими
интересами в одном месте.
Используйте Web Workers, чтобы ускорить свой
JavaScript-код и произвести важные вычисления
либо сделать свои приложения более отзывчивы­
ми. Вы даже можете еще эффективнее задейство­
j
вать потенциал многоядерных процессоров, уста­
новленных на компьютерах ваших пользователей!

Получайте доступ к любой


веб-службе и передавайте
полученные от нее данные
своему приложению почти в
режиме реального времени.

\ Кзшируйте данньые
локально, используя
исполь
Для воспроизведения
ораузерное хранилище видео больше не нужны
для ускорения работы специальные плагины.
мобильных приложений

Создавайте собственные
элементы управления вос­
Интегрируйте свои страницы
произведением, исполь­
с Картами Google и давайте
зуя HTML и JavaScript.
пользователям возможность
отслеживать их собственное
перемещение в режиме реаль­
ного времени.

56 глава 1
знакомство с HTML5

Попрощайтесь с браузер-
ными cookie-файлами и *
используйте локальное
хранилище в браузере.
Забрать ( D
вещи I Выпить Купить
из хим- ' К0Фе ехце один
чистки гаджет
Используя JavaScript, вы сможете сохра­ от ^ppie
нять множество установок и данных для
своих пользователей локально в брау­
зере и даже сделать так, чтобы к ним Слетать
на Фиджи Помыть
имелся автономный доступ. Испечь

Браузер теперь не просто


инструмент для просмотра
скучных документов. Благодаря
JavaScript вы сможете рисовать
пикселы прямо в окне браузера.

Зарядите свои формы по­


средством JavaScrip ,
бы обеспечить настоящую
эпюгп те Создавайте веб-страницы,
[ интерактивность.
повелся которые по-новому объединя­
_ яоклонник ются с видео.
Если вы ф утболк и TW
носите

Используйте мощь JavaScript


«Юtep для тщательной обработки видео
в своем браузере. Создавайте спец­
эффекты и напрямую манипулируй­
те отдельными видеопикселами.

Вы, вероятно, подумали, что мы об­


шарили весь Интернет, чтобы найти
наиболее захватывающие примеры.
На самом деле это не так. Мы просто
сделали скриншоты созданных нами
примеров, с которыми вы будете стал­
киваться в книге. Правда, они здорово
выглядят? Итак, теперь, когда вы уже
в Вебвилле, пришло время научиться
местному языку — JavaScript. Что ж,
приступим.

дальше ►
знакомство с javascript

jg ) B C "
С
Интервью недели:
Признания языка сценариев
Head First: Добро пожаловать, JavaScript. Мы рады, что Вы смогли выкроить для пас время в своем
плотпом граф ике. Позвольте сразу спросить вот о чем: HTML5 превращ ается в зпамепитость,
а как пасчет Вас??
JavaScript: Я пе стремлюсь быть в цептре впимапия, а остаюсь за кулисами. Я бы сказал, что пе-
малая часть похвалы, высказы ваем ой в адрес HTML5, долж па отпоситься ко мпе.
Head First: Почему Вы так считаете?
JavaScript: Существует целое семейство техпологий, которы е делаю т работу «HTML5», куда,
паприм ер, входят 2D canvas, localStorage, Web W orkers и др. А правда заклю чается в том, что для
того, чтобы действительно пользоваться ими, нужеп я. К опечпо, HTML5 позволяет создавать
веб-страпицы и представлять их впимапию пользователей, по без мепя у людей пе будет ипте-
респого взаимодействия с пими вообщ е. Но все пормальпо. Ж елаю успеха HTM L5, а я просто
продолжу делать свою работу дальше.
Head First: Что бы Вы посоветовали разработчикам , реш ивш им п ерей ти па HTML5?
JavaScript: Ну, здесь все просто. Если вы действительно хоти те овладеть HTM L5, п отратьте
врем я па изучепие JavaScript и всех библиотек, работаю щ их с HTML5.
Head First: Зпаете, у Вас пе всегда была хорош ая ренутация. В одпой из статей в 1998 году о Вас
высказались так: «JavaScript —это пезрелы й, вычурпый язы к сцепариев».
JavaScript: Это обидпо. Может, я и пе пачал свою ж изпь в безупречпой академической среде
мпогих язы ков програм м ировапия, по смог п реврати ться в одип из паиболее ш ироко использу­
емых язы ков всех времеп, поэтому па тот момепт я бы пе стал списывать мепя со счетов столь
опром етчиво. К роме того, в то, чтобы сделать м епя падежпым и крайпе эф ф ективпы м язы ком,
были вложепы огромпые ресурсы. Я стал быстрее по мепыней мере в 100 раз, чем был 10 лет пазад.
Head First: Это впечатляет.
JavaScript: Да, и если Вы еще пе слышали, то проипформирую Вас, что разработчики стапдартов
совсем педавпо пазвали мепя языком сцепариев по умолчапию для HTML5. Таким образом, я здесь,
чтобы остаться падолго. Замечу, что программистам больше пет нужды указывать J a v a S c r i p t
в своих тегах < s c r i p t > . Может, мепя и пазы вали вычурпым в 1998 году, по где теперь все эти
JScript, VBScript, Java-annTieTbi и проваливш иеся попы тки с браузерпыми языками?
Head First: Ч то ж, Вы действительно являетесь ключом к создапию отличпых НТМ Ьб-страпиц.
Но у Вас есть ренутация язы ка, с которы м возпикает нутапица.
JavaScript: Н есмотря па слухи, я являюсь очепь мощпым языком, и чтобы успеш по использовать
мепя, пеобходимо затратить пекоторое время п а изучепие. С другой сторопы , я понуляреп, по­
тому что мепя легко освоить. То есть я вобрал лучшее из обоих миров, как Вы считаете?
Head First: П охоже, что так опо и есть! Спасибо вам, JavaScript, заи п тервью .
JavaScript: Всегда пожалуйста.

58 глава 1
знакомство с HTML5

Пишем серьезный JavaScript


Д ерж им пари, что все эти разговоры о JavaScript разож гли в вас
ж елапие п ерейти, пакопец, пепосредствеппо к паписапию кода.
С ерия пе зря пазы вается «Изучаем...», и пиж е вас ож идает пагляд-
пое суперсерьезпое бизпес-приложепие, па котором мы скопцеп-
трируем ваше впимапие. Д ля пачала пройдитесь по коду, чтобы
прочувствовать его. Н апиш ите, что, как вам кажется, делает каж­
дая строка. Н е беспокойтесь, мы пе ожидаем, что вы с ходу во
всем разберетесь, по уверепы, что у вас будут успеш пые догадки
пасчет того, что делает этот код. Закопчив, п ереверп и те стра-
пицу и посм отрите, пасколько близко вам удалось подобраться
к правильпы м ответам...
Свои 0 №&&W\b\
N/ ил\лиШи\ЛЛ£ 3 dcct>-
о Э с ^ б ^ е с.«Ы
var drink = "Energy Drink" ; своего А
var lyrics = 6 w M 020 НЯ1Л.и^кЯ.

var cans = 99;

while (cans > 0 ) {


lyrics = lyrics + cans + " cans of "
+ drink + " on the wall <br>";
lyrics = lyrics + cans + " cans of "
+ drink + "<br>";
lyrics = lyrics + "Take one down, pass it around,<br>";

if (cans > 1 ) {
lyrics = lyrics + (cans-1 ) + " cans of "
+ drink + " on the wall <br>";
}

else {
lyrics = lyrics + "No more cans of "
+ drink + " on the wall <br>";
}
cans = cans - 1 ;

document.write(lyrics);

дальше ► 59
ваш первый javascript

Пишем серьезный JavaScript: проверка ваших ответов


Снова нройднтесь но коду и но см отрите, что нривлекло ваше внимание. Вам нужно
нросто нрочувствовать этот код; далее нош агово разберем ся во всех деталях.

var drink = "Energy Drink"; Объявляем первую переменную и п р и ­


сваиваем ей значение "Energy Prink"
var lyrics = ""; Объявляем вторую переменную и п р и ­
сваиваем ей пустое строковое значение.
v a r cans = 99; Объявляем трет ью переменную и п р и ­
сваиваем ей числовое значение <?<?.
Это цикл while. Он говорит: «Пока
количество банок превышает О, вы­
while (cans > 0 ) { полнять все, что заключено в ф игур­
ные скобки. Остановиться, когда банок
больше не останется»
/Добавляем следующую строку песни
lyrics = lyrics + cans + " cans of " в переменную lyrics с использованием
оператора конкатенации строк « + »
+ drink + " on the wall <br>"; Завершаем строку посредством разры­
ва строки HTML.
lyrics = lyrics + cans + " cans of " Повторяем снова.
+ drink + "<br>";
lyrics = lyrics + "Take one down, /Добавляем следующую строфу, снова
pass it around,<br>"; с использованием конкатенации.
if (cans > 1 ) { Если остались еще банки (то есть зна­
чение количества банок превышает 1)...
lyrics = lyrics + (cans-1) + " cans of " ...то добавить последнюю строку.
+ drink + " on the wall <br>";
}

else { в противном случае, когда банок


не осталось...
lyrics =lyrics + "No more cans of " ... добавить 11No more cans of 11 в конец
lyrics.
+ drink + " on the wall <br>";
}

cans = cans - 1; Уменьшаем количество оставшихся


банок на 1.

Мы сохранили все строки песни в пере­


менной lyrics, поэтому теперь даем
document.write(lyrics) ; веб-странице команду записать ее.
Это означает, что строка будет до­
бавлена на страницу, в результате чего
вы увидите текст песни.
60 глава 1
знакомство с HTML5

ТЕСТАРЛИ*
Вы же не думали, что, провернув всю сложную работу по выполнению упражнения, вы так и не подвергнете
практическому испытанию наш JavaScript-код? Вам необходимо взять код с предыдущей страницы и перенести
его (вместе с HTML-разметкой, приведенной ниже) в файл (например, index.html), а затем загрузить в браузере.
Результат можно увидеть внизу:

^ з а б ы в а й т е , ч т о для т о г о , ч т о б ы з а г р у з и т ь
<! doctype html> эт о№ весь к о д и ф а й л ы п р и м е р о в для к н и г и , с л е д у е т
з а й т и п о а д р е с у h t t p . / / w i c k e d ly s m a ir t . c o m / h f h t m ls .
< html>
<head>

<meta charset="utf- 8 ">

<title>MY First JavaScript</title>


</head> Теги <script> и </script> окружают JavaScript-код.
Они говорят странице, что все, что в них заклю­
чено, является JavaScript-кодом, а не HTML.

Сюда нужно вставить JavaScript-


код с предыдущей страницы.

;= s £ g = 2 -
А вот результат нашего тестового про­
**c«anоsврo5.fdP--JT,

tnin,PMi IktK
'‘rotM
und,
гона данного кода. Он генерирует текст
лирической песни о ЯЯ -бутылках банках w*i
%Scans<vfpn”tPWa
гш&а энергетического напитка на полке » «аз g**ona»'W aJ
и записывает его в документ браузера.

93fans<jf SniUod>

« с*вд^2й22?в,,,1в»«ц

tew»u

дальше ► 61
некоторые тонкости htm!5

Часш°
Задаваем ы е
В сЩ роСъх

Почему в теле приведенного ранее HTML- Вы используете термины «веб-страница»


f t
доку
документа нет ничего, кроме тегов script? и «веб-приложение»; под ними понимается
что-то разное? Что именно делает нечто веб­
приложением?
0: Мы решили начать с пустого элемента b o d y ,

0:
поскольку создали все содержимое данной страницы,
используя JavaScript-код. Да, можно было бы просто Это отличный вопрос, поскольку мы используем
внести текст лирической песни прямо в элемент b o d y эти термины в широком смысле. Технически никакой
(и при этом нам бы пришлось долго печатать на клави­ разницы между двумя этими понятиями нет; другими
атуре), либо мы могли позволить коду выполнить всю словами, вам не нужно делать что-то особенное для
тяжелую работу за нас (что мы и сделали), а затем того, чтобы превратить страницу, написанную на HTML,
дать ему команду вставить текст песни на страницу JavaScript и/или CSS, в веб-приложение. Появление
посредством d o c u m e n t . w r i t e . различий — это скорее одна из возможных перспектив.

Имейте в виду, что здесь мы пока прощупываем поч­ Когда у нас имеется страница, ведущая себя скорее
ву, а по ходу книги будем тратить намного больше как приложение, нежели как статичный документ, мы
времени, рассматривая то, как можно динамически начинаем думать о ней больше как о веб-приложении
заполнять страницу содержимым с помощью кода. и меньше как о веб-странице. Приложение мы рассма­
триваем как нечто такое, что обладает рядом особен­
ных качеств, например способностью поддерживать
Я понял, что мы сгенерировали весь текст
множество состояний, управлять более комплексными
лирической песни, но что конкретно сделал метод
взаимодействиями с пользователем, отображать
document.write и как текст попал в документ?
динамические и постоянно обновляемые данные без
необходимости в обновлении всей страницы или даже
0 : Метод d o c u m e n t. w r i t e берет строку текста выполнять более сложные задачи либо вычисления.
и вставляет ее в документ; фактически, он помещает
ее точно туда, где располагается тег s c r i p t . Та­ Весь этот JavaScript, конечно, замечательная
ким образом, в данном случае d o c u m e n t . w r it e вещь, но как насчет CSS? Мне не терпится восполь­
вставляет строку прямо в тело страницы. зоваться преимуществами CSSS-нововведений,
Вскоре вы познакомитесь с более тонкими способа­ чтобы улучшить внешний вид своих страниц.
ми изменения текста живого документа с помощью
JavaScript, а данный пример призван дать вам по­ 0 : Да, CSS прошел долгий путь, и мы с воодушев­
чувствовать, как код способен динамически вносить лением смотрим на то, насколько хорошо он работает
изменения в страницу. с HTML5. Несмотря на то что эта книга не о CSS, мы
с вами обязательно воспользуемся преимуществами
некоторых новых возможностей этого языка. Как вы,
возможно, знаете, многие из трюков, к которым мы
прибегаем для добавления закругленных углов и
теней на изображениях при использовании HTML и
создания простых анимаций на JavaScript, теперь мо­
гут быть с легкостью воспроизведены с помощью CSS.
Так что в этой книге мы воспользуемся мощью CSS
и обратим ваше внимание, когда это произойдет.

62 глава 1
знакомство с HTML5

Мы поговорили о массе вещей, включая


H TM L-разметку, A P I-интерфейсы JavaScript,
«семейство технологий» и CSS. А что именно
представляет собой HTML5? Не может же он
быть лишь простым языком разметки, кото­
рый сумел пробудить всеобщий интерес...

Дадим вам неофициальный ответ:

^ HTMLS*
Язык разметки + д
API -интерфейсы JavaScript + CSS = Пум.уим .... Щ■г

Отметим, что когда многие люди говорят о том, что такое


HTM L5, они подразумевают совокупность всех этих техно­
логий. То есть у нас есть язы к разм етки для н остроен и я ос­
н овн ой структуры страниц, JavaScript вместе со всеми сво­
ими API-интерф ейсами для добавления новедения и новой
функциональности, а также CSS для стилизации страниц —
все эти технологии мы будем иснользовать для создания
веб-нрилож ений завтраш него дня.
Но ночему же мы сказали «неофициальный»? Ч то ж, есть
люди, которы е лю бят нроводить ж есткие разграничитель­
ны е лин и и между этими технологиям и и говорить, к какому
стандарту относится каждая из них. Это в норядке вещ ей и
им еет место. Однако для нас важно вот что: какие техноло­
гии ноддерж иваю тся браузером и достаточно ли они п рора­
ботаны для того, чтобы иснользоваться для создания наших
страниц и нрилож ений? Н а наш взгляд, HTML5 —это язы к
разм етки + API-интерф ейсы JavaScript + CSS, и мы считаем,
что именно это, как нравило, имею т в виду люди, когда гово­
рят о HTML5 как о технологии.

Если вам действительно интересно , как


эти технологии объединяются в единый
набор стандартов (а интересовать это
должно каждого), то совет уем посет ит ь
ресурс w3.org для получения дополни­
тельной информации по данному вопросу .

дальше ► 63
ваш первый код на htm!5

]J°3A paBjlffeM , Б ы З а к о н ч и л и
f
и з д а т ь ГЛ аВ у Jи н а п и са Л и сВ о й

первы й Код н а 1 Л М §! ^ И свой первый код


J на JavaScript!
П режде чем н ерей ти к следующей главе,
вынолним еще одно задание на закренле-
ние изученного материала. И снользуйте
нриведенны е внизу карточки со словами
для составления формулы, реш аю щ ей
уравнение «что такое + HTML5?». Будьте внимательны , но-
скольку в эту кучу добавлены слова, которы е могут сбить вас
с толку. С нравивш ись с задачей, немного отдохните и осве­
ж итесь, а затем нристунайте к главе 2.

Г HTML5 I A P I -и н т е р ф е й с ы J a v a S c r i p t
JavaScript
CSS
XML ! Canvas I

R e d Vines M r . Pi b b
XHTML Forms
Язык
CSS3
I Geol o c a t i o n
I
<script>

64 глава 1
знакомство с HTML5

КЛЮЧЕВЫЕ
МОМЕНТЫ

■ HTML5 — это самая современная версия HTML. HTML5 включает элементы, которые привносят
Она включает новые упрощенные теги, а также новую семантику в станицы, открывая перед
семантические и медиаэлементы, полагается вами больше возможностей, связанных с соз­
на набор JavaScript-библиотек, обеспечиваю­ данием структуры веб-страниц, чем было в
щих функционирование веб-приложений. HTML 4.01. Мы не будем рассматривать их в
книге, однако в приложении вы найдете не­
■ XHTML больше не является стандартом для большое руководство по ним.
веб-страниц. Вместо него разработчики и W3C
решили продолжать расширять и совершен­ Для использования многих возможностей
ствовать HTML. HTML5 наилучшим образом вам потребуется
JavaScript.
■ Новое и более простое определение d o c ty p e
Применяя JavaScript, вы сможете взаимодей­
в HTML5 поддерживается старыми версиями
ствовать с объектной моделью документа
браузеров: когда они сталкиваются с ним, то
(Document Object Model, DOM).
переходят в стандартный режим.
Объектная модель документа (DOM) — это
■ Атрибут ty p e больше не требуется в теге
браузерное внутреннее представление веб­
< s c r i p t > или в ссылке на таблицу стилей
страницы. Используя JavaScript, вы сможете
CSS. JavaScript и CSS стали языками по умол­ получать доступ к элементам, изменять их,
чанию для HTML5. а также добавлять новые элементы в объект­
■ Тег < m eta> , используемый для указания набо­ ную модель документа.
ра символов, был упрощен и теперь включает API-интерфейсы JavaScript (Application
только кодировку символов. Programming Interface — интерфейс приклад­
ного программирования) позволяют управлять
■ UTF-8 сейчас является стандартной кодировкой
всеми аспектами HTML5 (20-рисованием, вос­
символов, используемой в Интернете.
произведением видео и др.).
■ Изменения в d o c t y p e и теге < m e ta > не ска­
JavaScript является одним из наиболее попу­
жутся отрицательно на страницах, загружаемых
лярных языков в мире. Реализации JavaScript
в старые версии браузеров.
значительно усовершенствовались за послед­
■ Совокупность новых элементов HTML5 пред­ ние годы.
ставляет собой расширенный набор элементов Вы можете выяснять, поддерживается ли та
HTML 4. Это означает, что старые страницы или иная новая функция браузером, и обе­
смогут нормально функционировать в совре­ спечивать плавную деградацию веб-страниц в
менных браузерах. случае отсутствия такой поддержки.
■ Работы над стандартом HTML5 не будут офи­ CSS — это стандартный язык стилей для
циально завершены до 2014 года, однако HTML5; многие люди вкладывают CSS в по­
большинство современных браузеров станет нятие «HTML5», когда используют его для опи­
поддерживать его задолго до этого (а многие сания семейства технологий, применяемых для
поддерживают уже сейчас!). создания веб-приложений.

дальше ► 65
кроссворд

Ц Щ 5 - К Г 0С С В 0Г Д

Н астало врем я дать отдохнуть нрав о му нолушарию вашего мозга и за­


ставить ноработать левое. В нриведенном ниж е кроссворде все слова
связаны с HTML5 и взяты из текущей главы.

По горизонтали По вертикали
3. __________ реклама, также называемая спамом. 1. Нам необходимо, чтобы деградация наших веб-страниц про­
4. Ваша миссия заключалась в том, чтобы провести___________ исходила ___________ .
в стане браузеров. 2. Новейшие____________ HTML5 привносят новую семантику
5. Инструмент, позволяющий обновить старый код до HTML5 и открывают дополнительные возможности, связанные с соз­
за три шага__________ . данием структуры веб-страниц.
9. Стандартный язык сценариев для HTML5. 6. Истинная мощь HTML5 заключается в __________ JavaScript.
10. Это определение теперь стало намного проще, чем было 7. Стандартный язык стилей для HTML5.
в версии HTML 4.01. 8. Тег <___________ > говорит браузеру, что все, что следует да­
12. Этот язык получил «прощальное письмо» в 2009 году. лее, является JavaScript-кодом, а не HTML.
14. Используйте цикл___________ для генерирования вывода 10. ___________ — это внутреннее представление веб-страницы.
строк песни. 11. Данный атрибут тегов l i n k и s c r i p t больше не требует­
15. JavaScript стал быстрее в раз, чем был 10 лет назад. ся, если вы используете HTML5.
13. Версия HTML, предшествующая HTML5.

66 глава 1
знакомство с HTML5

+
+
S f c e / * ! т?

Мы с вами говорили о «семействе технологий» столько раз, что уже кажется, что мы сами одна семья. Однако мы
по-настоящему так и не разобрались в том, что конкретно они собой представляют, поэтому, наконец, сделаем
это. Ниже представлен перечень большинства членов этого семейства, посмотрите, сможете ли вы разобраться,
кто есть кто. Не беспокойтесь, мы знаем, что это ваша первая встреча с членами семейства HTML5, поэтому
приводим решения задания.

Иснользуя меня, вы мож ете рисовать нрямо н а своей веб­


странице. Благодаря мне можно рисовать текст, изображ ения,
линии, круги, нрямоугольники, узоры, нрим енять градиенты.
Я номогу вам раскры ть таящ егося в вас художника.
М еня иснользовали в HTM L 4 для ввода и нф орм ации, но я стал
Web Workers еще лучше в HTML5. Я могу требовать от вас занолнять все
поля и снособен нроверять, ввели ли вы адрес электрон ной но-
чты, URL-адрес или ном ер телеф она туда, куда требуется.

Forms Ранее для обеснечения ф ункциональности, аналогичной на­


шей, вам нриходилось иснользовать плагины, но тен ерь мы
стали полноценны м и членами семейства элементов HTML. Хо­
Автономные веб- тите но см отреть или но слушать что-либо? Тогда мы нужны вам.
прилоЖения Мы здесь для того, чтобы номочь вам со структурой и семанти­
ческим значением ваш ей страницы и обеснечить новы е сносо-
бы создания секций, заголовков, ниж них колонтитулов и нави­
гации на ваших страницах.
Audio и Video
Я самый стильны й во всем семействе. Знаете ли вы, что тенерь
я могу аним ировать ваши элементы , нри давать их углам закру­
гленность и даже обеснечивать эф ф ект отбрасы вания тени?
Новые элементы
ражетки Иснользуйте меня как часть локального хранилищ а в браузере
лю бого пользователя. Вам необходимо сохранять установки,
элементы , помещ енны е в электронную корзину, или, возмож­
но, даже н рин рятать больш ой кэш для увеличения производи­
Local Storage
тельности? Тогда я нужный вам API-интерфейс.

Вам требую тся прилож ения, снособные работать даже тогда,


когда отсутствует подклю чение к Сети? Я могу вам номочь.
Canvas Я —API-интерф ейс, которы й номож ет вам онределить свое ме­
стополож ение, и отлично работаю с К артами Google.

Я нужен, чтобы несколько сценариев вы нолнялись нараллель-


Geolocation но в ф оновом реж име, благодаря чему ваш интерф ей с пользо­
вателя сможет оставаться отзывчивым.

дальше ► 67
I еэеиг gg

'V c fo g ^ > o c b l — ЁМН «ВР


egdosooodn епнетес!
2 Знакомство с JaVa^cript и объектной М°ДеЛь1°
Д о ку м ен та Ф о1» ) +

+ Немного кода*

Благодаря JavaScript вы откроете для себя нечто новое. Вы уже все


знаете о HTML-разметке (иначе называемой структурой) и CSS-стиле (также
известном как представление), однако вам недостает знаний о JavaScript
(или, как еще говорят, поведении). Если ваш багаж знаний ограничивается
лишь структурой и представлением, то вы, конечно же, сможете создавать
прекрасно выглядящие страницы, однако они будут лишь простыми стра­
ницами. Но если вы добавите поведение, прибегнув к JavaScript, то сможете
обеспечить для своих пользователей интерактивное взаимодействие; либо,
что даже еще лучше, вы сможете создавать роскошные веб-приложения.
Приготовьтесь добавить в свой инструментарий веб-разработчика наиболее
интересные и универсальные знания о JavaScript и программировании!
X. Ае-сли вам н у ж н а дополнительная мотивация,
то и наиболее, полезные!
как работает javascript

Как работает JavaScript


Наша цель заключается в том, чтобы написать JavaScript-код,
который будет выполняться в браузере после загрузки веб­
страницы. Данный код мог бы, например, реагировать на дей­
ствия пользователя, обновлять или изменять страницу, общаться
с веб-службами и, в целом, создавать ощущение, что ваша стра­
ница ведет себя скорее как приложение, нежели как обычный до­
кумент. Давайте посмотрим, как это все работает.

<html>
<head>
<script>

</script>
<body>
0
<hl>My first JavaScript</hl>
< p x /p > | html"
<script>
X = X + 2;
</script>
| head~ body
</body>
</html> | title | script [ | hi ^ | h2 \| p [
\~errT\

Написание Загрузка Выполнение


О
Вы пишете свою разметку Браузер извлекает и загружает JavaScript-код продолжает
на HTML и код на JavaScript, вашу страницу, осуществляя выполняться, используя DOM
а затем сохраняете их в фай­ разбор ее содержимого сверху для исследования страницы,
лах, скажем, i n d e x . h t m l вниз. ее изменения, получения от нее
и i n d e x . j s (либо и то и дру­ событий или запроса браузера
Когда браузер обнаруживает
гое в одном HTML-файле). на извлечение дополнительных
JavaScript-код, он разбирает его
данных с веб-сервера.
и проверяет на правильность,
после чего выполняет этот код.
Браузер также создает внутрен­
нюю модель HTML-страницы,
называемую объектной моде­
лью документа (DOM).

Л
70 глава 2
javascript и dom

Что моЖно сделать с помощью JavaScript?


Если у вас имеется страница с элементом < s c r i p t >
(или со ссылкой на отдельный JavaScript-файл), то вы
готовы нристунать к нанисанию кода. JavaScript явля­
ется нолноценным языком нрограммирования, с номо-
щью которого можно сделать очень многое из того, что
нредоставляют другие языки, и даже еще больше, но­
ско льку вы будете программировать внутри страницы!
JavaScript нозволяет следующее.

О Ф орм ировать операторы


Создавайте переменные и присваивайте им значения, склады­
вайте числа, производите другие вычисления, используйте
встроенную функциональность библиотек JavaScript.

var temp = 98.6;


var beanCounter = 4;
var reallyCool = true;
var motto = "I Rule";
temp = (temp - 32) * 5 / 9 ;
motto = motto + " and so do you!";
var pos = Math.random () ;

ф Д е л а т ь ч т о - т о дваЖды, неоднократно

Выполнение операторов может осуществляться снова и снова, столько раз,


сколько вам потребуется.

while (beanCounter > 0 ) {


processBeans();
beanCounter = beanCounter - 1;
}

О Принимать решения
П иш ите условный код, зависящий от состояния вашего приложения.

if (isReallyCool) {
invite = "You're invited!";
} else {
invite = "Sorry, we're at capacity.";

дальше ► 71
объявление переменных

Объявление переменной
П ерем енны е содерж ат данные. В случае с JavaScript они могут содержать
массу различны х вещей. Д авайте объявим несколько нерем енны х, содер­
жащих данные. winners
Целочисленные значения .
var winners = 2 ; Или числовые значения с плаваю - boilingPt
var boilingPt = 212.0; точкой.
var name = "Dr. Evil"; 4 Или строки символов
(кратко «строки»).
var isEligible = false;
Или логические значения
(true или false).
name
Три шага по созданию переменной
isEligible

v a r sco o p s = 1 0 ; Переменные—
П ервы й шаг заклю чается в объявлении нерем енной, в данном слу­
этоконтейнеры
чае s c o o p s . Следует отметить, что JavaScript, в отличие от неко­
торы х других язы ков, не требует указания тина нерем енной, а нро-
длязначений.
сто создает кон тей н ер общего тина, в котором мож ет содерж аться JavaScript-
масса вещей:
иеременные
неимеютстрогих
scoops
типов, поэтому
Далее нам необходимо значение, которое будет размещ аться в не­
любаяизних
рем енной. Указать значение можно несколькими снособами: можетсодержать
Значение может быть литеральным ,
например числом или строкой.
числовое,
var scoops = 10; Или значение может быть
результат ом оценки вы­
строковое
var scoops = totalScoops / people;
var scoops = Math.random () * 10;
ражения. нлнлогическое
значение.

72 глава 2
javascript и dom

<3> Н аконец, у нас имею тся нерем енная и значение (лите­


ральное значение, нанрим ер 10, или результат оценки О синтаксисе
вы раж ения (вроде totalScoops / people). И все, что
нам осталось сделать, — нрисвоить значение наш ей
нерем енной.
■ Каждый оператор должен заканчиваться
точкой с запятой.
х = х + 1;

■ Однострочный комментарий должен на­


чинаться двойным слешем. Коммента­
рии — это просто заметки о коде, пред­
scoops
назначенные для себя или для других
Создав неременную , вы, конечно же, сможете изм енить ее разработчиков. Они никак не оцениваются.
значение в лю бой момент или даже нрисвоить ей значение, / / Э то ком м ентарий
имею щее другой тин. Вот ряд нримеров:
■ Пробелы неважны (почти везде).
м ы можем присвоить переменной
£— scoops, другое целочисленное значение. х = 2233;

scoops = 5 ; Или даже использовать scoops ■ Строки символов следует заключать


в выражении, которое изменит в двойные кавычки.
scoops = scoops * 1 0 ; ее значение. В данном случае "Y o u r u l e ! 11
значение scoops будет равно 50.
■ Переменные необходимо объявлять с ука­
scoops = "Tired of being an integer"; занием v a r и имени. JavaScript не требу­
f4 Либо мы можем изменить значение ет указывать тип в отличие от некоторых
scoops = null; и тип переменной scoops, в данном других языков программирования.
случае — на строковое значение v a r w id t h ;
t
3 JavaScript даже и соответственно тип. Но будьте
■ Не заключайте в кавычки логические зна­
есть значение, кото осторожны, поскольку это может
привести к большим проблемам чения t r u e и f a l s e .
рое означает «зна­
чения нет». Оно на­ в коде, если вы ожидаете, что scoops r o c k i n = t r u e ;
зывается null. О его будет иметь числовое значение.
■ Переменным необязательно присваивать
использовании мы Подробнее об этом — чуть позже.
значения при объявлении:
поговорим позже.
Ч асцю var w id t h ;
^адаВ аеМ ы е
БоЦр»оСьх

Каким будет значение моей переменной, если я просто 1Мне доводилось иметь дело с другими языками програм­

напишу так: мирования, в которых переменные объявляются с указанием


типа. Например, i n t х или S t r i n g у. Разве в JavaScript
var w in n e r ; нет типов?

0: После выполнения данного оператора переменной winner


будет присвоено значение undefined, которое является другим
значением и типом JavaScript. О том, где и как его использовать,
0 :'! В JavaScript есть типы, однако, в отличие от других языков, он
предусматривает динамическую типизацию, которая означает, что
мы поговорим позже. интерпретатор JavaScript сам определит, какой тип использовать.

дальше ► 73
присвоение имен переменным

( ^ ь е З Н о е п р о г р а м м и р о в а н и е 1

Как присваивать имена переменным


У вас мог возникнуть вонрос: «А как вы бирать им ена для
своих неременных?». Если вам доводилось нрисваивать
им ена идентиф икаторам в случае со своими HTM L- В JavaScript n u m b e r , s t r i n g
элементами, то аналогичная нроцедура в отнош ении и B o o l e a n называются прими­
нерем енны х нокаж ется вам схожей. Есть только не­ тивными типами. В переменных
сколько нравил нри ф орм и рован ии имен неременны х. также можно сохранять объекты.
Об объектах мы поговорим до­
вольно скоро, а пока вы можете
Правило 1. Начинайте имена своих переменных с буквы, рассматривать объект как кол­
лекцию некоторых вещей, тогда
символа подчеркивания или знака доллара.
как примитив — это просто вещь,
П ри грамотном нрисваивании имен своим нерем енны м которая не может быть разделе­
необходимо не нросто нридумывать им вы разительны е на на что-либо еще.
названия, но также иснользовать букву (в ниж нем или
верхнем регистре), символ подчеркивания или знак
доллара в начале их имен. Вот ряд нримеров:

var thi s IsNo tAJoke ; Имя начинается с числа ,


var 3zip;
а это неправильно.
var _myVariable; var %entage;
var $importantVar; Имя начинается с недопу­
.var ~approx;
стимых символов (% и ~).
*
Правильно Неправильно

Правило 2 . З а т е м вы моЖете указывать любое количество букв,


цифр, символов подчеркивания или знаков доллара.
П родолж айте иснользовать буквы, знаки доллара и символы под­
черкивания н ри ф орм и рован ии имени своей нерем енной. После
нервого символа вы также н ри ж елании мож ете указывать числа:
S---
my3sons; Здесь имеется недопустимый пробел var zip code;
cost$; var first-name
Знаки « - » и «±» недопусти­
vitaminBl2; var to+do;
мы и сильно сбивают с толку
^ JavaScript.
Правильно Неправильно

74 глава 2
javascript и dom

Правило 3 . избегайте всех зарезервированных слов JavaScript.

Я зык JavaScript вклю чает ряд зарезервированны х слов, нанрим ер i f , e ls e , w h ile , f o r (это
лиш ь часть из них), и не будет слишком лю безен, если вы ноны таетесь иснользовать их в качестве имен
для своих нерем енны х. П еречень зарезервированны х слов JavaScript нриведен ниже. Н е нужно сию же
минуту заноминать их, но ходу освоения JavaScript у вас вы работается нонимание, что же они собой
нредставляю т. Но если когда-либо JavaScript станет «ругаться» н а то, как вы объявили свои нерем енны е,
то вам следует мыслить следующим образом: «Хм, а может, слово, которое я нытаю сь иснользовать,
является зарезервированны м?».

abstract delete goto null throws


as do if package transient
boolean double implements private true
break else import protected try
byte enum in public typeof
case export instanceof return use
catch extends int short var
char false interface static void
class final is super volatile
continue finally long switch while
const float nam espace synchronized with
debugger for native this
default function new throw
x* Избегайте использования этих слов
'— в качестве имен для переменных!
Часто
Задаваем ы е ........
В опросы

l b ™ — Чувствителен ли JavaScript к ре­ Как я понял, JavaScript позволяет


рованное слово как часть имени своей гистру? Другими словами, есть ли присваивать нужное значение перемен­
переменной? Могу ли я присвоить пере­ разница между написанием myvariable ной (числовое, строковое и т. д.) в любой
менной, например, имя ifOnly (то есть в и MyVariable? момент. Однако что произойдет, если я
ее имени будет содержаться зарезерви­ добавлю две переменные, одна из ко­
рованное слово if)? 0 : Если вам доводилось иметь дело в ос­ торых будет иметь числовое значение,
новном с HTML-разметкой, то, возможно, вы а другая строковое, вместе?
0 : Конечно можете, просто избегайте привыкли к нечувствительным к регистру
точного совпадения имени переменной с языкам, ведь, в конце концов, < h e a d > и 0 : JavaScript старается осуществлять
зарезервированным словом. Также целе­ < h e a d > трактуются браузером как одно и умное преобразование типов по мере не­
сообразно писать понятный код, в котором, то же. Однако в случае с JavaScript регистр обходимости. Например, если вы добавите
как правило, не используются слова вроде имеет значение, поэтому m y v a r ia b le и сразу две переменные с числовым и строко­
e lz e , которое можно перепутать с e ls e . M y v a r ia b l e будут рассматриваться как вым значениями, то он, как обычно, попы­
две разные переменные. тается преобразовать числовое значение в
строковое и конкатенировать их. Не во всех
ситуациях это нужно. Держите эту мысль
в уме, мы вернемся к ней совсем скоро.

дальше ► 75
присвоение имен переменным

Вебвилльское руководство
по вы бору оптим альны х имен
Вам предоставляется немалая свобода при выборе имен для своих переменных, поэтому
мы возьмем на себя смелость дать несколько советов, чтобы облегчить вам эту задачу.

Отдавайте предпочтение именам, которые что-то означают


Такие имена переменных, как, например, _ш, г и f о о , могут что-то означить для вас, однако в Вебвил­
ле на них, как правило, смотрят неодобрительно. Не только потому, что вы сами, скорее всего, забудете
их со временем, но и в силу того, что ваш код будет более удобочитаемым, если вы предпочтете ис­
пользовать в нем переменные с именами вроде a n g l e , c u r r e n t P r e s s u r e и p a s s e d .

При формировании имен переменных из нескольких слов используйте стиль


CamelCase
В определенный момент у вас возникнет необходимость решить, как указать имя переменной, которая
олицетворяет, скажем, огнедышащего двуглавого дракона. Просто используйте стиль CamelCase, кото­
рый подразумевает, что первая буква в каждом новом слове должна указываться в верхнем регистре
(кроме слова, идущего первым): t w o H e a d e d D r a g o n W i t h F i r e . Стиль CamelCase прост в ис­
пользовании, широко распространен в Вебвилле и обеспечивает достаточную гибкость в формировании
настолько специфических имен переменных, насколько вам потребуется. Существуют также и другие
подходы, однако этот является одним из наиболее часто используемых (даже за пределами JavaScript).

Используйте переменные, имена которых начинаются с символов _ и $, только


по очень веской причине
Переменные, имена которых начинаются с $, обычно зарезервированы для JavaScript-библиотек и, не­
смотря на то что некоторые программисты используют переменные с именами, начинающимися с сим­
вола в силу различных соглашений, они не имеют широкого хождения. Мы рекомендуем держаться
от них подальше, если только у вас не будет веской причины поступить иначе (если она появится, вы,
естественно, будете это знать).

Будьте осторожны
Проявляйте осторожность при присваивании имен переменным. Далее в книге мы дадим еще
ряд советов по этой теме, а пока знайте, что для переменных нужно выбирать понятные имена,
избегать зарезервированных слов и всегда указывать v a r при объявлении переменной.

76 глава 2
javascript и dom

ВыраЖения
Мы с вами уже видели, что представляют собой операторы JavaScript:

О п е р а т о р Ja v a S crip t

sc o o p s = sc o o p s - 1;
П еременная
—^ ]
^ '— 1/--------------
v
^
г ^ а а В ы раж ение
П рисваивание г

Однако давайте более пристально взглянем на выражения вроде того, которое приведено в дан­
ном операторе. Оказывается, выражения повсеместно встречаются в JavaScript, поэтому важно
знать, какого рода вещи вы сможете выражать. Вот ряд примеров...

Вы м о ж е т е п и с а т ь в ы р а ж е н и я ,
р е з у л ь т а т о м оцен ки к о т о р ы х
б у д у т чис ло вы е значения... Вы м о ж е т е п и -
с а т ь вы раж ения, ^
результ ат ом Логические ВыраЖения
о цен ки к о т о р ы х
Числовые Выражения б у д ут логические
2 > з
s ta r tT :ime >
nov
(9/5) * tempC + 32
зн а ч е н и я t r u e tenqpF < 7 5

и л и false (они level == 4


* - 1 соот вет ст вен­ = "Duck"

Math. random() * 10 но н а з ы в а ю т с я
логическим и вы ­
2.123 + 3.2 ра ж е н и ям и ).

...a т а к ж е п и с а т ь в ы р а ж е н и я , р е з у л ь т а
т о м о цен ки к о т о р ы х б у д у т с т р о к о в ы е
зн ачен и я.

Строковые выражения Также с у щ е с т в у ю т д р у г и е


т ипы выраж ений, о к о т о ­
"super" + "cali" + youKnowTheRest р ы х м ы п о г о в о р и м позже.

♦ -2 1 - * - f P
phoneNumber. substring (0 , 3) Прочие выражения

function ()
Внимательно отнеситесь к выражениям, представленным
document.getElementByld("pink")
на нескольких следующих страницах (не говоря уже об
оставшейся части книги), и вы поймете, как они использу­ new Array (10)
ются для проведения вычислений, многократного повто­
рения действий и принятия решений в вашем коде.

дальше ► 77
упражнение

г Возьми в руку карандаш


В ы р ази те себя!
Ранее вы познакомились с различными типами вы­
Взяв за основу свои текущие зна­
ражений, которые можно использовать в JavaScript-
ния о переменных, выражениях
коде. Теперь пора применить эти знания на практике
и операторах JavaScript, посмо­
и самим оценить несколько выражений. Свои отве­ трите, сможете ли вы сказать, ка­
ты вы сможете проверить в конце главы. кие из этих операторов являются
допустимыми, а какие приведут
(9/5) * tempC + 32 к выводу ошибки.

Каким окажется результат, если значением te m p C будет 10? В приведенном ниже перечне об­
ведите допустимые операторы.

"Number" + " " + "2м va r х = 1138;

Какова будет результирующая строка? . va r у = 3 /8 ;

va r s = "3 -8 ";

level >= 5 x = у ;

Каким окажется результат, если значением l e v e l будет 10? va r n = 3 - 11o n e " ;

va r t = "o n e " + "tw o " ;


А каким окажется результат, если значением l e v e l будет 5?
va r 3po = tru e ;

Подсказка: « / » va r le v e l_ = 11;
color != "pxnk"
% означает «не».
va r h ig h N o o n = fa ls e ;
Каким окажется результат, если значением color
будет blu e ? ______________ va r $ = 2 1 .3 0 ;

va r z = 2000;
(2 * Math.PI) * г
va r is B ig = у > z;
Каким окажется результат, если значением г будет 3?
z = z + 1;

с П одсказка: Math.Pl возвращ ает


з н а ч е н и е п и (о н о , к а к вы з н а е т е ,
z— ;

z y ;
р а в н о 3 ,П4 ...)
x = z * t;

w h ile ( h ig h N o o n ) {

z— ;

Так выражаться не стоит!

78 глава 2
javascript и dom

Похоже, что все идет как по маслу, если


я прибавляю числа к числам, а строки
к строкам, но что, если я прибавлю число
к строке или целочисленное значение
к числу с плавающей точкой?

Помните, мы говорили, что программирование на JavaScript


легко освоить? Одна из п ричин этого заклю чается в том, что
JavaScript сам преобразует одни типы в другие но мере необхо­
димости, чтобы вы раж ения имели смысл.
В качестве прим ера допустим, что у вас имеется следующее вы­
раж ение:

m essage = 2 + м if by sea";

Нам известно, что символ + мож ет как иснользоваться для


слож ения чисел, так и выступать оператором конкатенации
строк. Так какую же роль он вы полняет в данном случае? Ч то ж,
JavaScript знает, что строка " i f b y s e a " никогда не станет
похож ей на число, поэтому он решает, что перед ним строковое
вы раж ение, преобразует 2 в строку "2м и присваивает нерем ен­
ной message значение "2 i f b y s e a " .
Л ибо, если у нас будет такой онератор:

v a lu e = 2 * 3.1;

JavaScript нреобразует целочисленное значение 2 в число с нла-


ваю щ ей точкой, а результат будет равен 6.2.
Как вы уже догадались, JavaScript не всегда делает то, что вам
нужно, и в некоторы х случаях ему требуется небольш ая номощ ь
в осущ ествлении преобразований. К этой теме мы вернем ся не­
много нозже.

Ш ТУ РМ
Каков будет результат оценки следующих операторов со стороны
JavaScript?
numORStringl = 113 м + "4м

numORS tring2 = "3м * "4м

И почему?

дальше ► 79
javascript итерации

while (j u g g l i n g ) {
keepBallsInAir() ;
}

Многократное выполнение одного и того Же...


Е сли бы в JavaScript-HporpaMMe все вынолнялось лишь один раз, то она, скорее
всего, была бы довольно скучной. Вы сами неоднократно делаете массу вещей:
сноласкиваете голову водой, наносите шампунь, затем снова новторяете про­
цедуру, нока ваши волосы не станут чистыми, либо нродолжаете ехать до тех
нор, нока не достигнете места назначения, либо непрерывно чернаете моро­
женое ложкой, нока не съедите его нолностью. Для обработки нодобных ситу­
аций JavaScript предусматривает несколько снособов циклического выполне­
ния блоков кода.

Вы можете иснользовать JavaScript-цикл w h i l e для того, чтобы делать что-то


до тех нор, нока удовлетворяется соответствующее условие:

у нас имеется банка мороженого, в которой его


осталось г о ложек. Вот переменная, которую мы
объявляем и инициализируем значением ZO.
Цикл while использует логическое выражение результат ом
t i Z u к о ^ г о г о Л ж ,™ f a m e true « ш М и . В true » Э ,
расположенный далее, будет выполняться
var scoops = 10;
Пока ложек мороженого будет оставаться более нуля, мы
г- ^ продолжим выполнять все, что имеется в этом блоке кода.
while (scoops > 0) { г ч у
alert ("More icecream!11) ;

scoops = scoops - 1;
При каждом выполнении цикла while мы уведомляем
пользователя о том, что мороженое еще осталось
а затем удаляем одну ложку мороженого пут ем ее '
вычитания из общего числа ложек.
alert("life without ice cream isn't the same");

^ ■ Когда значением условия (scoops > О) становится


false, цикл завершается, а выполнение кода продол­
жается здесь, независимо от того, какова будет
следующая строка программы.

80 глава 2
javascript и dom

V
Таким образом, в нрим ере с циклом w h i 1 е мы инициализируем значение, в данном
случае —ноказатель количества оставш ихся лож ек м орож еного, которы й проверяет­
ся циклом w h i l e , и если выдается t r u e , то мы выполняем блок кода. В результате
работы этого блока кода в определенны й момент нроисходит обновление вовлечен­
ного в нр о верку условия ноказателя до такого уровня, нри котором значением условия
становится f a l s e и цикл заверш ается.
ИНИЦИАЛИЗИРОВАТЬ

var scoops = 10;

ОСУЩЕСТВЛЯТЬ ПРОВЕРКУ УСЛОВ1


while (scoops > 0 ) {
ВЫПОЛНЯТЬ ДАННЫ Й ълок
alert ("More icecream!11) КОДА, ПОКА ПРОВЕРКА
УСЛОВИЯ В Ы Д А Е Т T R U E
scoops = scoops - 1;
ОБНОВЛЯТЬ
> ПРОДО ЛЖ АТЬ ВЫПОЛНЕНИЕ К О Л А
/ ------- ЗД Е С Ь ПОСЛЕ Т О Г О , К А К П РО ВЕРКА
^ УСЛОВИЯ В Ы Д А С Т FALSE
alert("life without ice cream isn't the same");

JavaScript также предусматривает наличие цикла f o r , которы й еще больше формализует данную
структуру. Вот как будет выглядеть наш код из н рим ера с морож еным, нерен и сан н ы й с прим енени­
ем цикла f o r :
ИНИЦИАЛИЗИРОВАТЬ
ОСУЩЕСТВЛЯТЬ ПРОВЕРКУ УСЛОВИЯ
I \ ^ ------ ОБНОВЛЯТЬ

ВЫПОЛНЯТЬ ДАННЫЙ БЛОК


for (scoops = 10; scoops > 0; scoops— ) {
КОДА, ПОКА П РО В ЕРК А
alert("There 1s more ice cream!") ; ^ УСЛОВИЯ В Ы Д А Е Т TRUE

ПРОДО ЛЖ АТЬ ВЫПОЛНЕ­


НИЕ К О Д А З Д Е С Ь ПОСЛЕ
alert("life without ice cream isn't the same")
ТОГО, К А К ПРОВЕРКА
УСЛОВИЯ В Ы Д А С Т FALSE
Ч асцю

................................................... Зад аваем ы е ..............................................................


В сЩ роСъх

В • Я не вижу никакой разницы между циклами while и for. Как понять, когда следует использовать каждый из них?

0 : В целом, вы сможете выполнять одни и те же задачи, используя либо цикл f o r , либо цикл w h i l e . Однако, как вы
могли убедиться в примере с мороженым, цикл f o r обеспечивает немного большую компактность, a w h i l e делает код
более удобочитаемым. Как правило, циклы f o r чаще используются для совершения итераций по фиксированному количеству
значений (например, по элементам, помещенным в электронную корзину в интернет-магазине), a w h i 1 е чаще применяются
для циклического выполнения чего-либо до тех пор, пока удовлетворяется соответствующее условие (например, заставлять
пользователя проходить тест до тех пор, пока он не сделает все правильно).

дальше ► 81
упражнения

СТАНЬ 6раумр«м
К а ж д ы й из п о в ед ен н ы х на эт< > й с т р а н и ц е J a V a ^ c I ip t- Фрагмент 1
с^раГменшоБ представляет со£ой ©цельный £лок
var count = 0;
Т С °Д а . ^ а Ш а задач а З а к л ю ч а ется В т °М , Ч т °# ы сы ­
for (var i = 0; i < 5; i++) {
г р а т ь р °Л ь бр аузер а и оД ен и т ь В се
count = count + i;
^ р а Щ е н т ы К °Д а д л я о щ В ет а н а В о­

п росы ° р е з у л ь т а т а х . J J a n u H iu m e с В о й
alert (11count is 11 + count);
о щ В ет н а к а ж д ы й В опрос п о д с о о т в е т ­

ств ую щ и м ^ р а Щ ен т °М . Какой показатель общего


количества будет отображен
Свои ответы вы сможете в диалоговом окне alert??
ФрДГМСМП2 проверить в конце главы.

var tops = 5;
while (tops > 0 ) {
for (var spins = 0; spins < 3; spins++) {
alert("Top is spinning!");
}
tops = tops - 1;

Сколько раз на экране появится Фрагмент 3


диалоговое окно alert с сообще­
for (var berries = 5; berries > 0; berries— ) {
нием "Top is spinning!"?
alert("Eating a berry");

Сколько ягод вы съели? ^


Фрагмент 4
for (scoops = 0; scoops < 10; scoop++) {

alert("There1s more ice cream!");

}
alert("life without ice cream isn't the same");

Сколько ложек мороженого вы съели?

82 глава 2
javascript и dom

if (c a s h ln W a lle t > 5) {
o rd e r = “I'll tak e th e works: cheeseburger, frie s and a coke
} else {
o rd e r = "I'll ju s t have a glass o f water";

Принятие решений с использованием JavaScript


Мы с вами иснользовали логические вы раж ения в онераторах for и while для н роверки условий
с целью реш ить, долж но ли нродолж аться циклическое вы нолнение. Их также можно исноль­
зовать для н р и н яти я реш ений в JavaScript-коде. Рассмотрим нример:

__ Вот наше логическое выражение, используемое для проверки


количества оставшихся ---------- - • прооерки
ложек мороженого.
Когда останется менее трех ложек , мы будем
if (scoops < 3) { выполнять соответствующий блок кода.
alert (нIce cream is running low!11) ;
}
Мы также можем предусмотреть нроведение более чем одной Бы сможете добавить нужное
нроверки: количество проверок с использо­
ванием else if, каждая из которых
if (scoops < 3) {
будет ассоциирована со своим
alert("Ice cream is running low!"); блоком кода> выполняемым , когда
} else if (scoops > 9) { значением условия является true.
alert("Eat faster, the ice cream is going to melt!");
}

дальше ► 83
javascript условия

Принятие дополнительных решений... и добавление


перехватывающего блока
Вы мож ете предусмотреть нерехваты ваю щ пй блок для своих он ераторов i f — ф иналь­
н ы й e l s e , которы й будет вынолняться, если все н рочи е условия окажутся оценены как
f a l s e . Д авайте добавим еще несколько i f / e l s e , а также нерехваты ваю щ ий блок:

Обратите внимание , что мы внесли изменение


Т ~ > а к? то°Р °г0 соответствующее сообщение
if (scoo* s — з> t выведено только тогда , когда количество
if (scoops — 3 ) { ложек окажется равным именно 3.
alert("Ice cream is running low!");
} else if (scoops > 9) {
alert("Eat faster, the ice cream is going to melt!");
} else if (scoops == 2) {
alert("Going once!"); Мы добавили дополнительные
условия для того , чтобы обрат­
} else if (scoops = 1) {
ный отсчет шел до нуля ложек.
alert("Going twice!");
} else if (scoops == 0) {
alert("Gone!");
} else {
alert("Still lots of ice cream left, come and get it.");
, *
A „ „аш n e p e x f W , 1 л о к есяи ш одно т ^ т Ш ^

тся.
/
ш.

пражнение Возьмите приведенный выше код и вставьте его в цикл w h i l e внизу. Пройдитесь по цик­
лу w h i l e и напишите сообщения диалоговых окон a l e r t в той последовательности,
в которой они будут выводиться. Проверить свои ответы вы сможете в конце главы.

v a r scoops = 1 0;

w h il e (s c o o p s > = 0 ) {

Вставьте сюда код> приведенный вверху .

s c o o p s = s co o p s
T
Генерируемый вывод
напишите здесь.
a le r t( " lif e w it h o u t i c e c re a m i s n ' t th e s a m e " );

84 глава 2
javascript и dom

развлечения с м а гн и т а м и
Данный код отображает известный палиндром в диалоговом окне a l e r t . Проблема заключа­
ется в том, что часть кода находилась на магнитных табличках, прикрепленных к холодильнику,
однако они упали на пол. Ваша задача заключается в том, чтобы восстановить целостность кода
и отобразить палиндром. Будьте внимательны, поскольку на полу уже лежало несколько табличек,
не имеющих отношения к данному коду, зато некоторые из табличек вам придется использовать
более одного раза! Проверьте свои ответы в конце данной главы, прежде чем двинетесь дальше.

var wordl = "а”;


var word2 = "nam"; h ttp ://Jo Ca lh o s t

var word3 = "nal p M; a a plan a canal panama.

var word4 = "lan a c" ;


var word5 = "a man ap" ;

Палиндром — это пред­


var phrase = MM;
ложение, которое одина­
ково читается как слева
for (var i = 0; ) { направо; так и справа
if (i == 0) { налево! Бот палиндром ,
phrase = _____ который вы должны
увидеть?, если правильно
} разместите все таблички
else if (i == 1) { на магнитах по м ест ам .
phrase = _____ + word4;
}
(i == 2) {
= phrase + wordl + word3;

) {
phrase = phrase + + word2 + wordl;

}
alert(phrase);

else if (i == 0) w ord5

i++ else if
J |^^Tord2
phrase
word4 i < 3 vro£ a i 1 < 4

ГШ Л I 1 [Т Т 7 Г ) C D Г 1- I i = 3
] [ word3

дальше ► 85
как добавлять javascript в веб-страницы

Мне сказали,
что мы будем добавлять
JavaScript в свои веб-страницы.
Когда мы, наконец, займемся этим?
Или так и будем ходить вокруг да око­
ло, разбираясь в JavaScript?

Да, в ТОМ-ТО и дело. Для начала вам необ­


ходимо было изучить основы. Как раз этим
мы и занимались до сих пор: теперь вы зна­
ете, как объявлять и использовать перем ен­
ные JavaScript, а также как осущ ествляется
ф орм ирование базовых операторов и вы ра­
жений. Кроме того, вы узнали, как исполь­
зовать их все вместе для написания условно­
го кода с операторам и i f / e l s e , не говоря
уже о циклическом вы полнении с прим ене­
нием операторов w h i l e и f o r .
Вооружившись этими знаниями, теперь вы
мож ете переходить к изучению того, как
добавлять JavaScript в свои веб-страницы и,
что более важно, как JavaScript взаимодей­
ствует с ними. То есть вы узнаете, как опре­
делять, что имеется на вашей странице, как
ее изм енять и, чуть нозже, как нисать код,
реагирую щ ий на то, что нроисходит на ва­
ших страницах.
Таким образом, несм отря на то что мы еще
не закончили с JavaScript, вашему ожида­
нию нриш ел конец. Настало врем я взгля­
нуть, как разм етка и новедение работаю т
сообща...

86 глава 2
javascript и dom

Как u куда добавлять JavaScript в своих страницах


Ч тобы иснользовать JavaScript, его необходимо добавить в страницу. Но куда именно и как? Вы уже
знаете, что существует такой элемент, как < s c r i p t > , ноэтому давайте носмотрим, где мы можем ис­
нользовать его и как это влияет на вы нолнение JavaScript-кода на ваших страницах. Рассмотрим разны е
снособы добавления кода в страницу.

Разместите свой <script> как встроен­


Поместите элементы <scnpt> в <head> ный элемент в <head>.
своей HTML-страницы, чтобы их выполнение
Н аиболее расп р о стр ан ен н ы й снособ до­
осуществлялось до загрузки страницы.
бавления кода в страницу заклю чается в
номещ ении элемента < s c r i p t > в <head>
Вы можете стр ан и ц ы . Если вы д о б ави те Jav a S c rip t-
внести т р е ­ код в элемент <head>, то он будет выпол­
H T M L -файл н ять ся, как только б раузер осущ ествит
буемый код
прямо в код разбор < head> (а делает он это в нервую
| <head > очередь!), но до того, как разбору подверг­
своей веб- \
страницы <script> нется остальная часть страницы.
либо внедрить statement
Добавьте свой <script>, воспользо­
ссылку на </script>
вавшись ссылкой на отдельный
отдельный
I <script src="mycode.js"> JavaScript-файл.
JavaS cript-
файлj вос­ 1</script> Вы также можете указать ссылку на отдель­
пользовавшись ны й файл, содерж ащ ий JavaScript-код. П о­
атрибутом местите URL-ссылку на файл в атрибут s c r
scr тега script <body> откры ваю щ его тега < s c r i p t > и убеди­
тесь, что вы закры л и элем ен т s c r i p t с
номощью < / s c r i p t > . Если вы указы ваете
<script> ссылку н а файл, располож енны й в том же
Или вы м о ­
statement каталоге, то мож ете нросто иснользовать
жете п о ­
statement имя этого файла.
местить
</script>
свой код (либо Добавьте свой код в элемент <body>
ссылку на него) документа либо как встроенный, либо
в элемент посредством ссылки на отдельный
<body> Д а н ­ файл.
ный код будет
■ Чащевсего код добавляется в <Wead>
выполняться , Кроме того, вы можете номестить свой код
страницы. Добавление кода в <body> нрям о в < body> своей H TM L-страницы .
когда загру­
страницы дает небольшие пре­ Онять-таки, заключите свой JavaScript-код
зится тело имущества в плане производитель-
документа. в элем ен т < s c r i p t > (или укаж ите ссыл­
Hocmuj однако поступать так ку н а отд ел ьн ы й ф ай л в атри буте s c r ) .
следует только в т ом случае> если JavaScript в <body> вашей страницы станет
вам действительно необходимо вынолняться, когда браузер будет осущест­
сверхоптимизировать производи­
влять разбор тела страницы (обы чно он
тельность своей страницы. делает это сверху вниз).

дальше ► 87
взаимодействие со страницей

Как JavaScript Взаимодействует с вашей страницей


JavaScript и HTML— это две разные вещи. HTML представляет собой
разметку, a JavaScript — код. Так как же заставить JavaScript взаимо­
действовать с разметкой на своей странице? Для этого необходимо
воспользоваться объектной моделью документа (DOM).

Зам браузер о При загрузке страницы в браузе­


ре он осуществляет разбор HTML
и создает внутреннюю модель Это мы называем
Л документа, которая будет содер­ объектной моделью
жать все элементы вашей HTML- документа (РОМ),
разметки. посредством ко т о ­
рой можно узнать
все о структуре
и содержимом веб­
html
страницы.

head body

| title | script || [ h2

О
Сокращенно мы также
называем ее просто РОМ .

Ваш JavaScript может взаимо­


действовать с объектной моде­
лью документа с целью полу­
чения доступа к элементам и их
Когда JavaScript модифицирует содержимому. JavaScript также
© объектную модель документа использует DOM для создания
(DOM), браузер автоматически или удаления элементов (и вы­
обновляет JavaScript страницу, полнения множества других
благодаря чему на ней отобра­ манипуляций, о которых мы по­
жается новое содержимое. говорим позже).

П осредст вом счит ы вания, реагирования


и и з м е н е н и я о б ь е к т н о й м о д е л и до

2 Т Г 1 JavaScHpt мож^
веб- r ! М На.писания интеРактивных
-страниц/приложений. Из данной
книги вы узнаете, как это делается

88 глава 2
javascript и dom

Рецепт приготовления собственной объектной модели документа (D 0 M )


Д авайте возьмем разметку и создадим для нее объектную <! doctype html>
модель документа (DOM ). Рецент здесь нрост. <html lang="en">
<head>
И н гр ед и ен ты
<title>My blog</title>
О дна норм альная НТМ Ьб-страница <meta charset="utf-8">
<script src="blog. js"X/script>
О дин веб-браузер или более </head>
<body>
<hl>My blog</hl>
Порядок д е й ств и й
<div id=Mentryl">
1. Сначала создайте узел d o c u m e n t, которы й будет рас­ <h2>Great day bird watching</h2>
полагаться в самом верху. <P>
Today I saw three ducks!
document I named them
Huey, Louie, and Dewey.
2. Затем возьм ите элемент верхнего уровня вашей </p>
<P>
HTM L-страницы (в нашем случае это элемент < h tm l> ),
которы й будет именоваться текущим элементом, и до­ I took a couple of photos...
</p>
бавьте его в качестве дочернего элем ента но отнош е­
</div>
нию к d o c u m e n t. </body>
</html>
document j

1 html |

3. В случае с каждым элементом, влож енны м в текущий


элемент, добавьте соответствую щ ий элемент в качестве
дочернего но отнош ению к текущему в объектной моде­
ли документа (DOM).
Мы заранее годность» приго­
товили для вас объектную мо­
document j дель документа. Переверните
страницу - и вы увидите,
как выглядит готовая D0M.
html |

head body |

4. В ернитесь к каждому из только что добавленны х вами


элементов и н овторяйте нроцедуру (шаг 3), нока не до­
бавите все необходимы е элементы.

дальше ► 89
внедрение объектной модели документа

Первое испытание объектной модели документа (D 0 M )


Вся прелесть объектпой модели докумепта заклю чается в том, что опа обеспе­
чивает для пас согласоваппый между всеми браузерами способ получепия досту­ Мы сравнили
па к структуре и содержимому HTM L из кода. И это здорово. А через песколько данную с т р у к ­
мгповепий мы с вами посмотрим, как все это работает... т у р у с деревом,
поскольку « д е ­
Верпемся к примеру. Если вы последуете приведеппому рапее рецепту приготов­ рево» — это
лен и я объектпой модели докумепта, то в результате у вас получится структура, ст руктура
изображ еппая чуть пиж е. Каждая DOM вклю чает объект docum ent, располага­ данных, которая
ю щ ийся вверху, после чего общее дерево дополпяю т ветви и узлы-«листья» для берет свое начало
каждого элем епта в HTM L-разметке. Д авайте взгляпем па пих более пристальпо. в инф орм ат ике.

О бъект d o cu m en t — /
это словно корень
перевернутого с ног
на голову дерева.
L i= :
Z l rn d Z Цемент а.
Эти объекты подобны
^ вет вям дерева.

Эти объекты сродни л и ­


Great Today I took a
ст ьям на дереве (поскольку day bird I saw couple of
внут ри них нет элем ент о в, watching three.. photos...
а имеется только текст).
Объектная модель документа включает содержимое ^ У
страницы, а также элементы (мы не всегда показываем
текстовое содержимое, когда приводим рисунки РОМ,
однако оно т а м п р и с у т с т в у е т ) .
Теперь, когда у нас
имеется объектная модель
документа (DOM ), мы можем
исследовать и изменять ее так,
как нам потребуется.

90 глава 2
javascript и dom

’"-- -+Иhttp Сlio-UXJ9^


Movie Showtimes
Plan 9 from Outer Space
Playing и З ЛОрт. 7:00pm. Spedal Д о И л * щ Д О и midnight!

Forbidden Planet
Playingat5Л0рсп.9:00pm.

СТАНЬ браумром <! doctype html>


<h tml 1ang=11en11>
p a llia ЗаД аЧ а З а к л ю ч а е т с я Б m °M ,
<head>
Ч щ обы сы Г р а ш ь р°Л ь браузера.
<title>Movies</title>
|) а М н е о б х о д и м 0 о с у щ е с т в и ш ь
</head>
разбор -р а З М е т К и и со з­
<body>
д а ш ь Н а 00 оСНоВ0 c B o jo с ° ^ с ш Б 0 н —
<hl>Movie Showtimes</hl>
HTJIO о £ Ь 01С щ н у 1о М °Д 0 Л ь Д°КХ)М0Н—
<h2 id=Mmovieln >Plan 9 from Outer Space</h2>
т аФОМ)- П°э1Г,оМУ — вперед. <p>Playing at 3:0 Орш , 7:0 0pm.
произведите разбор шмь <span>
К о то р ы й н ах о д и тся справа,
Special showing tonight at <em>midnight</em>!
-DO M н а р и с у й т е В низу. Ц а Ч а Л о
</span>
о ^ Ь 0 К т н о й М °Д 0Л и Д о к у М 0 н т а М ы
</p>
у Ж 0 н а р и с о В а Л и , а В аМ п р 0 Д с т ° и т
<h2 id=nmovie2M>Forbidden Planet</h2>
00 з а в е р ш и т ь .
<p>Playing at 5:00pm, 9:00pm. </p>
</body>
Проверьте свои о т в е т ы , </html>
посмотрев решение этого
задания в конце главы,
прежде чем двинетесь
Д ор и су й т е здесь свою POM.
дальше. | docum ent |

1 1 i

дальше ► 91
отношения между javascript и dom

Или история о том, как две абсолютно разные


технологии смогли работать сообща.
HTML и JavaScript, несомненно, прилетели с двух
разных планет. Доказательства? ДНК HTML состоит
из декларативной разметки, позволяющей описывать
P JTM L5 - набор вложенных элементов, входящих в состав
веб-страницы. JavaScript, с другой стороны, сделан
Q из чисто алгоритмического генетического материала,
призванного описывать вычисления.
ja v a S c r ip 1 '
Настолько ли они разные, что даже не способны взаи­
, Венеры модействовать друг с другом? Конечно же, это не так,
т .1чесК ое Р Г ; поскольку у них есть кое-что общее — объектная мо­
„ о у » 4* дель документа (DOM). Посредством DOM JavaScript
воде” „v-wnr®1 может взаимодействовать с веб-страницами, и наобо­
рот. Существует несколько путей сделать так, чтобы
это произошло, однако мы пока сконцентрируемся на
одном из них— на своего рода небольшой червоточи­
не, позволяющей JavaScript получать доступ к любому
элементу, и называется она getElementByld.

Давайте посмотрим, как она работает...

92 глава 2
javascript и dom

Давайте иачием с DOM. Чуть пиж е приведеп п рим ер простой объектпой модели докумепта. Здесь
имеется песколько HTM L-параграфов (< р > ), каждый из которы х обладает i d со зпачепием соответ-
ствеппо g r e e n p l a n e t , r e d p l a n e t и b l u e p l a n e t . Все параграф ы также содерж ат текст. К опечпо,
здесь есть и элемепт < h e a d > , одпако мы отбросили детали в целях простоты .

р id = "greenplanet" j р id = "redplanet"~| p id = "blueplanet"

All is Nothing to All systems


well report A-OK

Теиерь давайте задействуем JavaScript, чтобы стало ии тересиее. Допустим, пам пеобходимо изме-
пить текст п араграф а с i d в виде g r e e n p l a n e t с " A l l i s w e l l " па " R e d A l e r t : h i t b y p h a s e r
f i r e ! " . В будущем вам мож ет потребоваться печто подобпое, в зависимости от действий, п редпри н и ­
маемых пользователем, или от даппых веб-службы. Обо всем этом мы еще поговорим, а пока обповим
текст параграф а с i d в виде g r e e n p l a n e t . Вот код, которы й позволит пам это сделать:

Как вы п о м н и т е , d ocu m ent


предст авляет всю страницу
в браузере и целиком содержит
объектную модель докум ент а,
поэт ом у мы можем « п о п р о ­ Здесь мы просим d o c u m e n t о т ы ­
с и т ь» его чт о-либо сделать: скать э л е м е н т , значение id к о т о ­
нап р и м ер , найти элем ент рого со о т вет ст в ует заданному.
с определенным значением id.

d o c u m e n t .g e t E l e m e n t B y l d (" g r e e n p l a n e t " ) ;

•..после чего
g e tE le m e n tB y ld (‘'greenplanet") возвра­
J a v a S crip t-код
сможет сде­
щ ает элем ен т <р>> значение id к о т о ­
л а т ь с ним
рого с о о т в е т с т в у е т "greenplanet11...
много чего
интересного.

дальше ► 93
использование getelementbyid

Как только getE lem entB yld возвратит требуемы й элемент, вы см ож ете сделать с ним
что-нибудь (папример, измепить его текст па "R e d A l e r t : h i t b y p h a s e r f i r e ! " ) .
Для этого обы чпо требуется присвоить элем епт п ерем еппой, благодаря чему па пего мож-
по будет ссылаться повсюду в своем коде. Д авайте сделаем это, а затем измепим текст:

З д е сь м ы в ы з ы в а е м getElementByld,
Мы присваиваем элемент который отыщет и возвратит
переменной с именем planet. f элемент "greenplanet ''.

i
var planet = docume n t . g e t E l e m e n t B y l d ( " g r e e n p l a n e t " ) ;
I
Теперь мы можем использовать
в своем коде переменную planet
для ссылки на наш элемент.

>1,
p l a n e t .innerHTML = "Red Alert: hit b y phaser fire!";

_ /
Мы^можем использовать
свойство innerHTML на­
7
Мы заменяем содержимое элемента greenplanet
шего элемента planet на наш новый текст... в результате чего объ­
для изменения содержимо­ ектная модель документа (и веб-страница) будет
го требуемого элемента. обновлена с использованием этого нового текста.

О свойствах элементов мы
вскоре погорим подробнее...

| р id =^ re e n p la n e t^ j| | р id = V e d p la n e t“ ] | р id = “blueplanet

Red Alert: hit by Nothing to All systems


phaser fire! report A-OK

г
Любые изменения в объектной модели документа отражаются
на т о м j как браузер осуществляет рендеринг страницы , п о ­
этому вы увидите , что содержимое параграфа стало другим!

94 глава 2
Возьми в руку карандаш javascript и dom

Вот объектная модель документа (DOM),


в которой скрыто тайное сообщение. Раз­
беритесь в приведенном ниже коде, чтобы
раскрыть секрет! Ответ на задание в пере­
вернутом виде вы найдете внизу страницы.

document.getElementByld (11е7" )
document.getElementByld (11е8" )
document.getElementByld ("е1б")
document.getElementByld ("e9" )
document.getElementByld (Mel8")
document.getElementByld ("el3" )
document.getElementByld ("el2 ")
document.getElementByld ("e2" )

воз-
Hп и ш и т е , какой и м ен н о э л е м е н т
1ЛЛДК~
в р а щ а е т каждая из с т р о к кода а
тобы
же со д е р ж и м о е э т о г о э л е м е н т а ,
раскрыть т а й н о е с о о б щ е н и е .1

-(„Qwixvidg xw ? d g
QWlfiHdzgOVI X£QV?H он
f F )h viH V d \M V Q VZVH
-d?g?d?v i онж о]^}„)
q.ovi j.Yiq s'dSvd yvvq
vi л щ v\vo y)o\ „ :wi?gwiQ

дальше ► 95
тестирование кода dom

Tecm-драйб планет
Рапее вы уже видели, как использовать d o c u m e n t. g e tE le m e n tB y ld
для получепия доступа к элементу, a innerHTM L —для изм епепия его
содерж имого. Теперь давайте сделаем это по-пастоящему.
Н иж е приведепа HTM L-разметка веб-страпицы Planets; здесь у пас
имеется элем епт < s c r i p t > в <head>, куда мы будем помещ ать код,
и тр и п араграф а со зпачепиям и i d соответствеппо g r e e n p l a n e t ,
r e d p l a n e t и b l u e p l a n e t . Если вы еще этого пе сделали, то добавь­
те HTM L и JavaScript для обповлепия объектпой модели докумепта
(DOM):
<! doctype html>
<html lang="en">
<head> Мы добавили JavaScript
<title>Planets</title> в <kead> страницы.
<meta charset="utf-8">
<script> Точно т ак же, как и раньше,
var planet = document.getElementByld("greenplanet") s r мы извлекаем элем ент <р>
planet.innerHTML = "Red Alert: hit by phaser fire!" с id в виде "greenplanet" и и з -
</script> ^ *меняем его содержимое.
</head>
<body>
<hl>Green Planet</hl>
Элемент <р>, содержимое
<p id="greenplanet">A11 is well</p>
которого мы изменяем
<hl>Red Planet</hl> с помощ ью JavaScript.
<p id="redplanet">Nothing to report</p>
<hl>Blue Planet</hl>
<p id="blueplanet">All systems A-OK</p>
</body>
</html> О оо ©Janets
*■ -> с л О localhost/~Beth/HTML.. |Г| ф Р , ^ ^

Добавив требуемый код, загрузите страницу в сво­ G r e e n P la n e t


ем браузере, после чего вы увидите, какие волшеб-
пы е м етам орф озы произош ли с параграф ом, имею ­ АД is weH

щим id в виде g r e e n p l a n e t , в объектной модели


докумепта (DOM). R e d P la n e t
01 Х ь ю с т о н , у нас пробле-
Nothing to report
ма: в параграфе с id в виде,
greenplanet по-преж нему
B lu e P la n e t
отображается "All is well"
3 чем дело? All systems A-OK

96 глава 2
javascript и dom

Я трижды перепроверил
[ свою разметку и код, но все равно
О V ничего не получается. Я не вижу ни­
каких изменений на своей странице

Ах да, мы забыли упомянуть об одной вещи.


Чащ е всего имеет смысл начипать вы полпепие своего
JavaScript-кода после того, как страпица полпостью за­
грузится. Почему? Если же вы пе стапете ждать, пока
закончится загрузка страницы , объектпая модель до­
кумента не успеет полностью сгеперироваться, когда
ваш код начнет выполняться. В пашем случае выпол­
нение JavaScript-кода начинается после того, как бра­
узер сначала загрузит элемент < h e a d > страпицы , по
до того, как будет загружена остальпая часть страпицы ,
поэтому объектная модель докумепта окажется еще пе
полностью сгенерированной. А если DOM пе готова,
то и элемент <р i d = " g r e e n p l a n e t 11> пе будет суще­
ствовать!

И что же тогда происходит? Вызов g e t E l e m e n t B y l d


с целью поиска элем епта с i d в виде g r e e n p l a n e t пе
приведет к возврату чего-либо, поскольку соответству­
ющ ий элемепт будет отсутствовать, из-за чего браузер
просто продолж ит двигаться дальше и так или ипаче
произведет репдерипг страпицы после того, как ваш
код выполпится. П оэтому в результате вы увидите
страпицу, прошедшую репдерипг, по текст в параграф е
с i d в виде g r e e n p l a n e t остапется прежпим.
Нам пеобходимо как-то сообщ ить браузеру следующее:
«Выполпять мой код после того, как страпица полпо­
стью загрузится и будет создала объектпая модель до­
кумепта». П осмотрим, как это сделать.

дальше ► 97
ожидание загрузки страницы

Нельзя начинать взаимодействовать с D 0M ,


пока веб-страница не загрузилась полностью
Но как приказать браузеру в ы п о л п я т ь ваш код только после того, как страпица загрузится?
Ч тобы дать указапие браузеру ожидать, преж де чем пачипать вы полпепие кода, мы восполь­
зуемся двумя JavaScript-ипструмептами, с которы м и мы вас еще пе успели позпакомить: это
объект window и фупкция. П одробпее о пих мы поговорим позже, а пока просто воспользуем­
ся ими, чтобы добиться пужпого эф ф екта.
О бповите свой JavaScript, как показало пиж е

Сначала создайте ф у н к ц и ю О б ра т ит е внимание


с именем init и п о м ест ит е на то, что ваш код
в нее уже имеющийся у вас код. должен располагаться
<script>
между открывающей
function init() {
и закрывающей ф и г у р ­
var planet = document.getElementByld ("greenplanet") ными скобками.
p l a n e t .innerHTML = "Red Alert: hit b y phaser fire!"

. я --------------------------------------------------------------------------------
Здесь мы задаем значение
window.onload = init; свойства window.onload
в виде имени нашей функции.
< /s c rip t>
Здесь говорится: «когда
страница полност ью з а ­
Перезагрузите страницу грузится, выполнить код,
располагающийся в init».
Теперь перезагрузите страпицу и посм отрите, все ли встало па свои места:

ООО PEanets
I< |► 1|+ |0 http:f/localhosl/-BethyHead- (5 ](От Google ")»
Да! Теперь в элемент е <р> с id в виде
greenplanet отобразилось новое содер­
G re e n P la n e t жимое. Здорово, не правда ли?
Red Alert: hit by phaser fire!

R e d P la n e t Что ж, на самом деле здорово ТО,


что т еперь вы знаете, как п р и к а ­
Nothing to report зат ь браузеру ждать, пока не будет
полност ью сгенерирована объектная
B lu e P la n e t модель документа, прежде чем вы­
полнят ь код, который обращается
All systems A-OK
к элементам.

98 глава 2
javascript и dom

Возьми в руку карандаш


Ниже приведена HTML-разметка веб-страницы My Playlist, на ко­
торой отображается список песен для воспроизведения (плей­
HTML для лист), однако он пока пуст. Вам нужно завершить JavaScript-
/г* веб-страницы.
<! doctype html> код, чтобы песни добавились в список. Заполните пробелы в
JavaScript-коде, который необходим для выполнения данной
<html lang=nen">
задачи. Проверьте свои ответы, посмотрев решение этого за­
<head> дания в конце главы, прежде чем двинетесь дальше.
<title>My Playlist</title>
<meta charset="utf-811> Это наш J a v a S crip t Данный код б у ­
дет обеспечивать заполнение списка
<script>
песнями, указанными внизу, в <ul>.
____________ addSongs() {
Заполнит е пробелы недоста­
var songl = document.__ ю щ им кодом, чтобы песни
<" были добавлены в список.
.getElementByld (11 ”)
J
.innerHTML "Blue Suede Strings, by Elvis Pagely";
"Great Objects on Fire, by Jerry JSON Lewis";
song3. "I Code the Line, by Johnny JavaScript";

window.
</script>
</head>
<body>
<hl>My awesome playlist</hl>
<ul id="playlist"> Пустой список песен. Приведенный чут ь
<li id=" songl"X/li> выше код должен добавлять содержимое
<li id=" song2"X/li>
в каждый <li> плейлиста.

<li id=" song3"X/li>


</ ul > —Г______MvP(aytlst____
.1--1-->' + llTtP:/i,|ocalho5t/-Beth/Head- (TL/CW1
</body>
M y awesome playlist
</html> Вели вы корректно заполнит е пробе­ * B lue Suede Strings, by E lvis Pagely
• Great Objects on Fire, by Jerry JSON Lewis
лы в Ja vaS cript-коде, то веб-страница Code the Line, by Johnny JavaScript
после загрузки будет выглядеть так.

дальше ► 99
функциональность dom

Для чего еще хорошо nogxogum D0M


О бъектпая модель докумепта (DOM) позволяет делать пампого больше, чем мы видели до сих пор,
и вы будете использовать ее фупкциопальпость далее в процессе чтеп ия кпиги, а пока давайте
просто выполпим краткий обзор, чтобы эти сведепия отложились у вас в подсозпапии.

И щ ит е и извле­ Извлекайте элементы из объектной моде­


кайте один э л е ­ ли документа.
мент или более
Конечно, вы уже знаете, что это можно делать,
из объектной м о ­
поскольку мы с вами использовали d o c u m e n t .
дели документа. fo rm
g e t E l e m e n t B y l d . Однако существуют и другие
V iV y способы извлечения элементов. Вы можете ис­
j пользовать имена тегов, имена классов и атри­
| label
lab input input
буты для извлечения не только какого-то одного
элемента, а целого набора элементов (например,
Создавайте всех элементов, имеющихся в классе " o n _ s a le " ) .
новые эле Кроме того, вы можете извлекать значения фор­
менты.. мы, введенные пользователем (например, текст
элемента ввода).
III
Создавайте и добавляйте элементы в объ­
ектную модель документа.
...и добавляйте Вы можете создавать новые элементы и добав­
их в РОМ п у ­ лять их в DOM. Естественно, любые изменения,
т е м присоеди вносимые вами в объектную модель докумен­
нения к друго­ та, будут незамедлительно проявляться по мере
м у элем ент у ^ того, как браузер будет осуществлять ее ренде­
в дереве. ринг (что просто замечательно!).
Удаляйте элементы из объектной модели
Удаляйте документа.
существу -
Вы также можете удалять элементы из DOM, для
ющие э л е ­
чего необходимо взять родительский элемент и
менты.
удалить какой-либо из его дочерних элементов.
Опять-таки, в окне браузера вы увидите, что эле­
мент удален, как только он будет убран из объ­
ектной модели документа.
Получайте до­
ст уп и н а с т р а - Извлекайте и настраивайте атрибуты эле­
иваите а т р и б у ­ ментов.
ты э л ем е н т о в, Ранее мы с вами получали доступ только к тек­
наприм ер id стовому содержимому элементов, однако вы
или class. также можете получить доступ к их атрибутам.
Например, вам может потребоваться узнать, каков
класс конкретного элемента, а затем «на лету»
изменить класс его принадлежности.

100 глава 2
javascript и dom

Нельзя ли снова поговорить о JavaScript, или как осуществляется


сохранение множественных значений при использовании JavaScript
Мы уже достаточпо поговорили о JavaScript и объектпой модели докумепта (DOM). П режде чем дать
вам пемпого отдохпуть и расслабиться, мы хотим рассказать еще об од пом JavaScript-типе, которы й вы
будете постояппо использовать. Это массив (A r r a y ). Допустим, вам пеобходимо сохрапить пазвапия
32 сортов м орож епого, или пом ера всех элемептов в электроп пой корзипе вашего пользователя, или,
возможпо, почасовы е показатели уличпой температуры. Ч тобы сделать это с использованием просты х
перем еппы х, потребуется масса времепи, особеппо если пужпо сохрапить десятки, сотпи или ты сячи
зпачепий. К счастью, существует массив, которы й пас выручит.
Вы можете добав-
Массив содержит к о л - S л ят ь значения в массив
лекцию значений. \ у /. по м ере необходимости.

Каждое значение
им е ет индексный Д ля каждого индекса
номер j при эт о м в массиве имеется
нумерация начи­ соот вет ст вую щ ее
нается с нуля. значение.

Как создать массив

Ч тобы использовать массив, его спачала пужпо создать, а также п рисвоить этот массив пере-
меппой, чтобы у пас было печто такое, посредством чего мы будем ссылаться па пего в своем
коде. Д авайте создадим массив вроде того, которы й показап выше и содерж ит почасовы е
показатели температуры (по Ф арепгейту): ^
-создание нового пустого
Наша п ер е м е н - массива
ная для массива... ^ >t
^ Мы вернемся к эт о м у синтаксису
, _ __ .
var tempByHour = new Array () ; в главе 4, а пока просто
r з н а й т е J,
что он создает новый массив.
tempByHour [0 ] = 59.2;
tempByHour [1 ] 6 0 .1 ; Д ля добавления новых значений в массив мы
tempByHour [2 ] б3. просто ссылаемся на индексный номер э л е ­
м ент а массива и присваиваем ем у значение.
tempByHour [3 ] 65;
tempByHour [4 ] 62; 4- — Как и в случае с переменными JavaScript,
* вы можете присвоить любое значение
Индекс (или т и п значения) индексу массива.

JavaScript предусматривает также более бы стры й способ создапия


и инициализации массива (мы пазы ваем его «литеральпым масси­
вом») с использованием зпачепий: Данный код создает т о т же массив,
Т
У тт гсго о сг\ л съ
var tempByHour = [59.2, 60.1, 63, 65, 62]; х ЧИЛ0 и ко^> приведенный
1 чут ь выше,
т однако им еет меньший объем.

дальше ► 101
использование массива

Добавление нового элементе в массив

Вы сможете в лю бой м омепт добавить повы й элемепт в свой массив,


просто используя следующий п езап яты й ипдекс:

tempByHour[5] = 61 ;

Используя новый
порядковый индекс,
мы добавляем новый
элем ент в массив.

использование элементов своего массива


Javascript Alert
Вы мож ете извлечь зпачепие элем епта массива путем ссылки Th« tem perature at 5 was 61

па перемеппую массива с использованием ипдекса:

var message = "The temperature at 5 was " + tempByHour[5];


alert (message) ; yj'V

Д ля доступа к значению
т е м пер ат у р ы с индексом S
мы просто ссылаемся
на массив с индексом 5.

Знайте размер своего массива, иначе...

Вы мож ете легко узпать разм ер своего массива путем ссылки


па свойство массива, пазы ваемое l e n g t h : Подробнее о свойствах мы поговорим
в следующей главе, а пока просто
var numlterns = tempByHour.length; ~ зн а й т е , Что каждый массив обладает
свойством length, которое позволяет
узнат ь количество элементов в нем .

Теперь, когда вы уже зпаете, как вы яспить длипу массива, да­


вайте посмотрим, можпо ли объедипить ваши зпапия о циклах
с массивами...

102 глава 2
javascript и dom
Возьми в руку карандаш
Внизу вы найдете веб-страницу со списком пустых элементов, готовых к тому, чтобы ваш JavaScript
заполнил их температурными показателями. Мы привели большую часть кода; вам необходимо
устранить имеющиеся в нем пробелы, чтобы он смог задать содержимое для каждого элемента
списка в виде соответствующего показателя температуры из массива (например, элемент списка
с id = "tempo" получит температурный показатель с индексом 0 в массиве и т. д.). Таким об­
разом, элемент списка с id = "temp3" будет гласить: "The t e m p e r a t u r e at 3 w a s 65".
Попробуйте сделать так, чтобы элемент списка с i d = "tempo" гласил "The t e m p e r a t u r e
at n o o n w a s 59.2" вместо "The t e m p e r a t u r e at 0 w a s 59.2".
<! doctype html>
<h tml 1ang=11en11>
<head> 4r~ 3 mo HTML-
<title>Temperatures</title>
<meta charset="utf-8">
<script>
function showTemps() {
var tempByHour = new ____
tempByHour[0] = 59.2;
tempByHour[1] = 60.1;
tempByHour[2] = 63;
Здесь мы комбинируем
tempByHour[3] = 65; циклы и массивы. Видите,
tempByHour[4] = 62; как мы получаем доступ
for (var i = 0; i < _____ ) { к каждому элем ент у
var theTemp = _______ [i] ;
массива с использованием
var id = "__________ 11 + i ;
индекса переменной?
var li = document. (id) ;
if (i == ) {
li. = "The temperature at noon was " + theTemp;
else {
l i .innerHTML "The temperature at " + ______ + " was " + ___

}
}
window.onload = showTemps;
</script>
</head> К odj приведенный оОо
<body> выше, будет з а п о л ­
<hl>Temperatures</hl> нять каждый элем ент
<ul> списка содержимым Temperatures
<li id=" tempO"X/li> в виде фразы, вклю ча ­ • The temperature at noon was 59 2
<li id=" tempi"X/li> ющей словосочетание • The temperature at 1 was 60.1
<li id=" temp2"X/li> • The temperature at 2 was 63
The tem p e ra tu re at... • The temperature at 3 was 65
<li id=" temp3"X/li>
• The temperature at 4 was 62
<li id=" temp4"X/li>
</ul>
</body>
</html>

дальше ► 103
пример приложения phrase-o-matic

Изучите данный код


новенького приложения Испробуйте наше новое
Phrase- о -Mat! с и п о ­
приложение Phrase-o-Matic,
см о т р и т е, сможете
и вы превратитесь в блестяще­
ли вы п оня т ь, что он
делает , прежде чем го оратора, как ваш босс или
двинетесь дальше... ребята из отдела маркетинга.

<! doctype html>


<html lang="en">
<head>
<title>Phrase-o-matic</title>
<meta charset=Mutf-8M>
<style>
body { Вам показалось, что наше серьезное
font-family: Verdana, Helvetica, sans-serif; бизнес-приложение из главы 1 было
недостаточно серьезным? Ладно.
Тогда воспользуйтесь тем, которое
</style>
приведено здесь, если вам нужно
<script> что-то показать боссу.
function makePhrases() {
var wordsl = ["24/7", "multi-Tier", "30,000 foot", "B-to- I" , "win-win"];
var words2 = ["empowered", "value-added", "oriented", "focused", "aligned"];
var words3 = ["process", "solution", "tipping-point", "strategy", "vision"];

var randl = Math, floor (Math, random() * wordsl.length);


var rand2 = Math, floor (Math, random() * words2 .length) ;
var rand3 = Math, floor (Math, random() * words3 .length) ;

var phrase = wordsl[randl] + " " + words2[rand2] + " " + words3[rand3];


var phraseElement = document.getElementByld("phrase");
phraseElement.innerHTML = phrase;

window.onload = makePhrases;
</script>
</head>
<body>
<hl>Phrase-o-Matic says:</hl>
<p id=" phrase " X / p >
</body>
</html>

104 глава 2
javascript и dom

Phrase-O-Matic
Надеемся, вы догадались, что данны й код нредставляет собой отличны й инструмент для
генери рован ия маркетинговы х слоганов, отображ аемы х на веб-странице. В нрош лом он
уже генерировал такие удачные ф разы , как Win-win value-added solution («Беспроигры ш ­
ное эф ф екти вн ое реш ение») и 2 4 /7 em pow ered process («Процесс, идущий 24 часа в сутки,
7 дней в неделю»), и мы очень надеемся, что и будущие слоганы окажутся не хуже. Д авайте
но смотрим, как он работает.

Сначала мы онределяем функцию makePhrases, которая будет вы нолняться носле


нолной загрузки страницы , благодаря чему мы знаем, что сможем благонолучно
но лучить достун к объектной модели документа (DOM):
Мы определяем функцию с именем makePhrases,
^ кот орую будем вызывать позже.
function makePhrases() {
? г+г Весь код для makePhrases будет размещ ат ься здесь,
} \ и до него мы дойдем через несколько мгновений...
window.onload = makePhrases; выполнять makePhrases,
как только закончится загрузка
страницы.

Вынолнив нредыдущий шаг, мы можем нристунать к нанисанию кода для функции


makePhrases. Н ачнем с создания трех массивов. Каждый из них будет содержать
слова, которы е мы станем иснользовать для ген ери рован ия фраз. Мы нрим еним
бы стры й снособ создания этих массивов:

Мы создаем переменную с именем w o r d s l, кот орую


^ с м о ж е м использовать для ссылки на первый массив■

var wordsl = ["24/7", "multi-Tier", "30,000 foot", "B-to-B", "win-win"];

^ Помещаем пят ь ст рок в массив. Но вы свободно можете


—" зам енит ь их какими-нибудь модными звучными словами.

var words2 = ["empowered", "value-added", "oriented", "focused", "aligned"]


var words3 = ["process", "solution", "tipping-point", "strategy", "vision"]

Здесь вы можете видеть два дополнительных


массива, присвоенных двум новым переменным
с именами wordsZ и words3.

дальше ► 105
как работает phrase-o-matic

( 3 ) И так, у нас есть три новы х массива, содержащ их красивы е звучные слова. Тенерь
мы будем осуществлять случайную выборку но слову из каждого массива, которы е
затем объединим в одну фразу.
Вот как п роизводится вы борка но одному слову из каждого массива:
Мы генерируем по одному случайному числу для каждого массива
и присваиваем его новой переменной ( r a n d l , r a n d z и rand3 с о о т ­
ветственно).

var randl =Math, floor (Math, random() * wordsl.length) ;


var rand2 =Math, floor (Math, random() * words2 .length) ;
var rand3 =Math, floor (Math, random() * words3 .length) ;

Данный код генерирует случайное число исходя из количества элементов


в каждом массиве (в нашем случае их п ят ь, однако вы свободно можете
добавлять элементы в любой массив, и код по-преж нему сможет генери­
роват ь числа, беря за основу уже новое количество элементов).

^ Тенерь сформируем отличны й м аркетинговы й слоган, для чего возьмем все слу­
чайно вы бранны е слова и конкатенируем их друг с другом в одну фразу, разделив
нробелами для удобочитаемости:
Каждое случайное число мы исполь-
Мы определяем еще одну переменную зуе м как индекс в массивах слов...
для размещения фразы.

var phrase = wordsl[randl] + " " + words2[rand2] + " " + words3[rand3];

Мы но чти нодош ли к финалу: у нас есть фраза, которую тенерь необходимо ото-
бразить. Вы уже знаете, как мы будем действовать: нрим еним g e tE le m e n tB y ld
для ноиска нашего элем ента <р>, а затем иснользуем его свойство innerHTM L
для того, чтобы номестить в него новую фразу

^ Извлекаем элем ент <р>


var phraseElement = document.getElementByld ( "phrase") ; с id в виде "phrase".
phraseElement.innerHTML = phrase;

З а т е м задаем нашу фразу


в качестве содержимого
элем ент а <р>.

106 глава 2
javascript и dom

Итак, напечатайте носледнюю строку кода, еще раз окиньте все взглядом и ощутите удов­
л етворен и е от того, что вы довели дело до конца, нрежде чем нерейдете к загрузке стра­
ницы в своем браузере. П роведите ее тест-драйв и нолюбуйтесь на генерируем ые фразы .

О О О Phrase-o-m atfc
д вот кдк [ МI If + 0 h ttp ://lo c a lh o 5 t/-B e th /H e a d F irs t-H T M L S /c h a p te r2 /p h rase.htm l б] 'Q,' Google
выглядит
наша фраза!
Phrase-o-Matic says:
B-to-B focused vision

t Простая перезагрузка страницы открывает перед вами возможноеv


почти бесконечного генерирования все новых фраз. Незамысловатый
код позволяет делать интересные вещи!
Част®
.................... ^аД аВ аеМ ы е ................................................................
В опросы
в myWords, а я при этом попытался
Что именно представляет собой Q ; В отличном справочнике по JavaScript бы получить доступ KmyWords[10].
Math и что делают Math.random и Math, под авторством Дэвида Флэнагана
floor? «JavaScript. Подробное руководство» 0 I Будет возвращено значение
(JavaScript: The Definitive Guide). undefined, являющееся значением пере­
0 : Ma t h — это встроенная JavaScript- менной, которой еще не было присвоено
библиотека, содержащая набор математи­ Ранее вы отмечали, что примитивы некое значение.
ческих функций. Math, random генери­ (значения number, string и boolean) можно
рует случайное число в промежутке между сохранять в переменных или объектах. Можно ли удалить элемент из мас­
О и 1. Мы умножаем его на количество Но мы сохраняем массивы в перемен­ сива? Если да, то что в таком случае про­
элементов в массиве (которое извлекаем ных. Так чем является массив: прими­ изойдет с индексами других элементов?
посредством свойства length массива), тивом или объектом?
чтобы получить число в промежутке между
Q j Удалить элемент из массива можно
О и значением length массива. В резуль­
тате, скорее всего, получится число с плава­ 0 : °'
Отличный вопрос! Массив — это
особый род объекта, который встроен в
двумя разными способами. Вы можете за­
дать значение для массива с соответству­
ющей точкой (например, 3 .2 ), поэтому мы
JavaScript. Особый он потому, что его мож­ ющим индексом в виде null (например,
применяем Math, floor, чтобы получить
но использовать для доступа к значениям, myArray [2] = null). Однако это бу­
целое число, которое сможем использовать
располагающимся в массиве, чего нельзя дет означать, что длина массива останется
в качестве индекса в массиве для выборки
сделать с помощью остальных объектов прежней. Либо вы можете удалить требуе­
случайного слова. Все, что делает M a t h .
(немассивов) или объектов, которые вы соз­ мый элемент полностью (с помощью функ­
floor, — это отбрасывает цифры, идущие
даете сами. О создании своих собственных ции splice). В данном случае индексы
после знака десятичной дроби в числах
объектов мы поговорим в главе 4. элементов, идущих после удаленного вами
с плавающей точкой. Например, Math,
floor (3.2) возвращает результат 3. элемента, сдвинутся вниз на единицу. Таким
Что будет, если я попытаюсь полу­ образом, если myArray [2 ] = "dog" и
чить доступ к индексу массива, кото­ myArray [3] = "cat", а вы удалите
Где можно найти документацию рый не существует? Например, если бы "dog", то myArray [2] = " с а ^ ’,адлина
к Math? у меня было пять сохраненных слов вашего массива станет короче на единицу.

дальше ► 107
Изучение языка является непро­
стой задачей, и важно, чтобы ваш мозг
не только трудился, но и отдыхал. Поэтому,
закончив читать данную главу, устройте себе
передышку, перекусите немного и, прежде
чем перейти к следующей главе, ознакомь­
тесь с рубрикой «Ключевые моменты» и ре­
шите кроссворд, чтобы закрепить изучен­
ный материал.
' о

'■ 3

Мы еще не научились
преобразовывать
цифровые изображе­
ния с едой в нечто
вещественное, т ак
что вам самим п р и ­
дется позаботиться
о закусках.

108 глава 2
javascript и dom

кл ю ч евы е
МОМЕНТЫ

Объявлять JavaScript-переменную необходимо с ис­ Сделать свои веб-страницы интерактивными можно


пользованием var. путем исследования и изменения DOM с использова­
нием JavaScript.
boolean, n u m b e r и s t r i n g — это примитивные
типы. Для получения доступа к требуемому элементу
на своей веб-странице необходимо воспользоваться
Логическими значениями являются tr u e и false.
d o c u m e n t .g e t E l e m entByld.
Числовыми значениями могут быть целочисленные
d o c u m e n t .g e t E l e m e n t B y l d использует зна­
величины или числа с плавающей точкой.
чение i d элемента для поиска этого элемента в объ­
Неинициализированная переменная имеет значение ектной модели документа.
undefined.
Для изменения содержимого элемента следует ис­
u n d e f i n e d и n u l l — это два разных значения. пользовать свойство i n n e r H T M L этого элемента.
Первое означает, что переменной еще не было при­
Если вы попытаетесь получить доступ или изменить
своено значение, a null — что переменная имеет зна­
элементы до того, как веб-страница полностью за­
чение, под которым подразумевается «значения нет».
грузится, появится сообщение об ошибке JavaScript
Результатом оценки числовых, логических и строковых и ваш код не сработает.
выражений будут соответственно числовые, логиче­
Присвойте функцию свойству w i n d o w , onload,
ские и строковые значения.
чтобы выполнение кода, имеющегося в этой функции,
Для повторяющегося выполнения блоков кода следует осуществлялось после того, как браузер завершит за­
использовать цикл while. грузку веб-страницы.
Циклы for и w h i l e позволяют выполнять одни и Используйте массив для сохранения более одного
те же действия; используйте тот из них, который наи­ значения.
лучшим образом подходит в вашей ситуации.
Для доступа к значению в массиве необходимо исполь­
Чтобы выполнение цикла f o r или w h i l e завер­ зовать индекс. Индекс — это целое число, означающее
шилось, проверка условия в некий момент должна позицию элемента в массиве (нумерация при этом
выдать false. начинается с нуля).
Операторы i f / e l s e могут использоваться для при­ Свойство l e n g t h массива позволяет узнать количе­
нятия решений в зависимости от результатов проверок ство элементов в массиве.
условий.
Комбинируя циклы и массивы, вы сможете последова­
Проверки условий являются логическими выражени­ тельно получать доступ к каждому элементу массива.
ями.
M a t h — это JavaScript-библиотека, включающая набор
Вы можете добавлять JavaScript-код в < h e a d > или математических функций.
< b o d y > своей веб-страницы либо размещать его в
отдельном файле, внедрив ссылку на него в страницу.
M a t h . r a n d o m возвращает число с плавающей
точкой в промежутке между 0 и 1 (но никогда ровно 1).
JavaScript-код (или ссылку на него) необходимо за­
M a t h .floor преобразует число с плавающей точкой
ключать в элемент <script>.
в целое число, отбрасывая все цифры, идущие после
Когда браузер загружает веб-страницу, он создает знака десятичной дроби.
объектную модель документа (DOM), которая является
внутренним представлением этой веб-страницы.

дальше ► 109
кроссворд

U IM L 5 -K f° < r B ° fA
Настало врем я заставить ноработать левое нолуш арие вашего
мозга нутем реш ения кроссворда. Удачи!

По горизонтали По вертикали
2. Если написать 3 + 11stooges11, то JavaScript осуществит_______ I. Объектная модель документа (DOM) — это внутреннее представление
3 в строку. веб-___________ .
4 . _________используется для извлечения значения из массива. 3. Браузер созд ает_______________________ документа при загрузке
5. 5 < 1 0 — э т о ____________ выражение. страницы.
7. Вы можете добавлять свой JavaScript-код в ____________ или body 6. Добавьте его в свои веб-страницы, чтобы сделать их интерактивными.
HTML-документа. 9. Значение id элемента <р>, содержащего текст 11Red Alert : hit
8. Количество элементов в массиве можно узнать с помощью свойства by phaser fire!11.
I I . Заключайте свой JavaScript-код в тег <___________ >, если помещае­
10. Имена переменных могут начинаться с _________ , знака $ или те его в HTML-страницу.
символа подчеркивания. 14. Если вы почти закончили, то выпейте чаю, а если, как в условии
12. Выбирайте подходящие имена для переменных и используйте стиль ___________ , конец работы еще не близок, продолжайте дальше!
для указания имен, состоящих из нескольких слов. 15. Циклы while и for используют____________выражение в качестве
_

13 . __________ — это корень дерева DOM. проверки условия.


16. Повторяйте выполнение одних и тех же блоков кода посредством 18. С ___________нельзя начинать взаимодействовать, пока страница
цикла___________ .. не загрузилась полностью.
17. В JavaScript document.____________ позволяет извлечь требуемый
элемент из объектной модели документа (DOM).
19. Сохраняйте названия сортов мороженого все вместе в одном .

110 глава 2
javascript и dom

Возьми в руку карандаш_


гпражнение
решение Выразите себя! Решение
Ранее вы познакомились с различными типа­ Взяв за основу свои текущ ие зна­
ми выражений, которые можно использовать ния о переменных, выражениях и
в JavaScript-коде. Теперь пора применить эти операторах JavaScript, посмотрите,
сможете ли вы сказать, какие из этих
знания на практике и самим оценить несколько
операторов являются допустимыми,
выражений. Приведем решение этого задания. а какие приведут к выводу ошибки.
(9/5) * tempC + 32 В приведенном ниже перечне обве­
Каким окажется результат, если значением tem pc будет ю? 5 0 ___ дите допустимые операторы.

(^var х = 1138^
"Number" + " " + "2"
(^var у = 3/8 Г)
Какова будет результирующая строка? N u w b e ir 2
var s = "3-8

level >= 5

Каким окажется результат, если значением l e v e l будет 10?


true / var п 3 - "one"

А каким окажется результат, если значением l e v e l будет ____ Технически данный оператор
является допустимым, однако
^ >= означает «больше получаемое в результате зна­
либо равно» чение нельзя использовать.
color != "pink"
"one" + 11tw o j^
Каким окажется результат, если значением c o l o r будет b lu e ? (Svar t

var Зро = t r u e ; недопусти­


^ color «не равен» pink мый!
(2 * Math.PI) * г

Каким окажется результат, если значением г будет 3? 3 - 8 . 8 4 ___

С.Приблизительно!
с Math.Pi возвращает
значение пи (оно, как вы
зна е т е, равно 3,14...)

у ; недопустимый.

Так выражаться не ст оит!

дальше ► 111
решение упражнения

СТАНЬ б р а у к р е м . Р еш ение
}(аж Д ы й u s ИриБеДенньхХ на э т о й ст р а н и ц е Фрагмент 1
J a V a ^ c r ip t—ф р а Щ е н т ° В п р е д с т а в л я е т собой о щ -

ДеЛьНый ёлок К°Да. ^аШ а заДаЧа З ак л ю ч ается var count = 0;

В т °М , Ч т °£ ы С ы Грать р»Ль браузера for (var i = 0; i < 5; i++) {


^ и оДенищь Бее ф р а г м е н т ы К°Да count = count + i ;
ДЛЯ- о т Б е т а на Вопросы о резуЛь— }
т а m ax, Ц апиШ ите сВой о т В е т alert (’’count is ” + count);
на к а ж д ы й Вопрос ц 0д с о о т в е т ­
Какой показатель общего количества бу­
ствующим ^раГМенщоМ дет отображен в диалоговом окне alert р
Фрагмент 2 го
f При каждом выполнении цикла
var tops = 5; мы добавляем значение i к п о -
с п
while (tops > 0 ) { > казат елю общего количества>
for (var spins = 0; spins < 3; spins++) {Л а значение i все время ув ел и ч и ­
вается} по эт ом у при каждом
alert("Top is spinning!”); J
выполнении цикла мы добавля­
ем к показат елю общего к о л и -
Внешний цикл while выполняется

3-5*

Сколько раз на экране появится


л
«г V /
}
п ят ь р а з, а внутренний цикл for —
т р и раза при каждом выполнении
внешнего цикла, п оэт о м у по луч а ­
&
ется 5 * Ъ, или И5!

диалоговое окно alert с сообще­ Фрагмент 3


нием "Top is spinning!"?
for (var berries = 5; berries > 0; berries-
Здесь мы начинаем с 5 и выполняем -) {
,
цикл до тех пор пока количество alert("Eating a be r r y ”);
ягод не станет равным О ведя от ­ ,
счет в убывающем порядке при каж­ Сколько ягод вы съели? $
дом заходе (а не в возрастающем).
Фрагмент 4
for (scoops = 0; scoops < 10; scoop++) {

a l e r t ("T h e r e 's more ice cream!”),

} Здесь все просто: цикл вы ­


полняется Ю р а зj поэт ом у
alert("life without ice cream i s n ’t the same"); вы съели Ю ложек!

ХО Сколько ложек мороженого вы съели?

112 глава 2
javascript и dom

Пражнение Возьмите приведенный выше код и вставьте его в цикл w h i l e внизу. Пройдитесь
решение по циклу w h i l e и напишите сообщения диалоговых окон a l e r t в той последова­
тельности, в которой они будут выводиться. Вот наше решение этого задания.

var scoops = 10;

while (scoops >= 0) { в с т а в л е н н ы й ко д


if (scoops = 3) { p Это сообщение выводится один р а з ,
л * /пт
alert("Ice л 1 ,,^
cream is running low!"); когда
K U C °значение scoops
1 равно
' 3.
,} else
n if ^ (scoops ^ ox г{
> 9) Это тоже выводится
один р а зj когда значе-
alert (--Eat faster, the ice cream is going to melt!--) ; ны£ scoops р а в т m
} else if (scoops == 2) {
alert ( "Going once!") ; %— Каждое из этиК сообщений выводится
} else if (scoops == 1) {
^ - один раз, когда значение scoops равно
с о о т в е т с т в е н н о 7-, 3- и O.
alert ("Going twice!") ;
} else if (scoops == 0) {
А это выводится всякий р а з, когда ни одно из п р о ­
alert("Gone!"); чих условий не и м е ет значения true, то есть когда
} else { значение scoops равно Я, 8, 7, (о, 5 и 4.
alert("Still lots of ice cream left, come and get it.");
}
scoops = scoops - 1; вычитаем no одной ложке
при каждом выполнении цикла.
Это сообщение выводится, когда
alert ("Life without ice cream isn't the same.") ; в„ лолнение цикла завершено.

Eat faster , the ice cream is going to melt!


I Still lots of ice cream left, come and get it
Still lots of ice cream left, come and get it
\r t\ Still lots of ice cream left, come and get it
Still lots of ice cream left, come and get it
Still lots of ice cream left, come and get it
Still lots of ice cream left, come and get it
Ice cream is running low!
Going once!
Going twice!
Gone!
Life without ice cream isn't the same.

дальше ► 113
решение упражнения

развлечения с м а гн и т а м и , реш ение

Данный код отображает известный палиндром в диалоговом окне a l e r t . Проблема заключа­


ется в том, что часть кода находилась на магнитных табличках, прикрепленных к холодильнику,
однако они упали на пол. Ваша задача заключается в том, чтобы восстановить целостность
кода и отобразить палиндром. Будьте внимательны, поскольку на полу уже лежало несколько
табличек, не имеющих отношения к данному коду, зато некоторые из табличек вам придется
использовать более одного раза! Приведем решение этого задания.
var wordl = "а";
var word2 = "nam";
Jf- h ttP ' / / b c a lh o s t
var word3 = "nal p " ;
3 man a P,an a canal panama
var word4 = "lan ac";
var word5 = "a man a p " ;

var phrase = ""; Палиндром — это предложе­

) { ( ние, которое одинаково ч и т а ­


ется как слева направо, т ак и
справа налево! Вот палиндром,
который вы должны увидеть,
если правильно р а зм е ст и т е
} все таблички на магнитах
else if (i == 1) { по м ест ам.
phrase = + word4;

J else if i --
phrase J = phrase + wordl + word3;

else if l( I i == 3
phrase = phrase + + word2 + wordl;

}
alert(phrase);

114 глава 2
javascript и dom

Movie Showtimes
Plan 9 from Outer Space
Playing « 3:00pm . 7 0 0 p m . S p e d a l (bow ing tonight и midnigtul

Forbidden Planet
Playta* « 5:0Qpm. 9:00pm.
<! doctype html>
СТАНЬ браумром. <html lang=MenM>
Решение <head>

jjaiHa ЗаДаЧа З а к л ю ч а е т ­
<title>Movies</title>
</head>
ся Б т °М , Ч т °^ ы с ы Г р а т ь
<body>
роЛь браузера. ^аМ необхо­
<hl>Movie Showtimes</hl>
димо о с у щ е с т в и т ь р азбор
<h2 id="moviel" >Plan 9 from Outer Space</h2>
ЩЩ-раЗМешКи и создать
<p>Playing at 3:0 0pm, 7:0 0pm.
на ее °сноВе сВок» собственную
<span>
объектную Модель документа
Special showing tonight at <em>midnight</em>!
ФОМ)- Поэвдому сначала про­ </span>
изведите разбор HTML’ к°щ о-
</p>
рый находится справа, а D0M
<h2 id=nmovie2M>Forbidden Planet</h2>
нарисуйте Внизу. ЦаЧаЛ©
<p>Playing at 5:00pm, 9:00pm.</p>
объектной м°дели документа
</body>
Мы уже нарисовали, а ВаМ
</html>
предстоит ее завершить.

дальше ► 115
решение упражнения

- Возьми в руку карандаш


Решение ООО My Playlist

Ниже приведена HTML-разметка веб-страницы My Playlist,


на которой отображается список песен для воспроизведе­
ния (плейлист), однако пока он пуст. Вам нужно завершить My awesome playlist
JavaScript-код, чтобы песни добавились в список. Вот наше
• Blue Suede Strings, by Elvis Pagely
решение этого задания. ♦ Great Objects on Fire, by Jerry JSON Lewis
* Code the Line, by Johnny JavaScript
<!doctype html>
<html lang="en">
<head>
<title>My Playlist</title>
г
Если вы корректно заполнит е пробелы
<meta charset=Mutf-8M> в Jav a S crip t-коде, то веб-страница после
загрузки будет выглядеть? так.
<script>
fu n c tio n addSongs() {
var songl = document. t f C t E l e w e n t S y l d (" SOnq^L ) К од, благодаря к о т о ­
р о м у будет заполнен
var s o n q Z = d o c u m e n t . q e t E l e m e n t f t c j l d (" s>ongZ
наш плейлист.
var S 0 n q 3 = d p C U l^ C n t •getElementByld (11 S0nCj3 ")

SOntj3- .innerHTML = "Blue Suede Strings, by Elvis Pagely";


SOnqZ. in n er HTML = "Great Objects on Fire, by Jerry JSON Lewis";
song3. innerH TM L = 111 Code the Line, by Johnny JavaScript";
}
Вы можете свободно под-
window, o n lo a d = addSongs ставить? сюда названия
</script> своих любимых песен!
</head>
<body>
<hl>My awesome playlist</hl>
<ul id="playlist">
Приведенный чут ь выше код зада­
<li id="songl"X/li>
ет содержимое для этих э л ем е н ­
<li id="song2"></li> тов <И> п у т е м извлечения каждого
<li id="song3"></li> элем ент а из РОМ и присваивания
свойству innerHTML значения в виде
</ ul>
названия соот вет ст вую щ ей песни.
</body>
</html>

116 глава 2
javascript и dom

^Возьми в руку карандаш


Решение Внизу вы найдете веб-страницу со списком пустых элементов, гото­
вых к тому, чтобы ваш JavaScript заполнил их температурными пока­
зателями. Мы привели большую часть кода; вам необходимо устра­
нить имеющиеся в нем пробелы, чтобы он смог задать содержимое
<! doctype html> для каждого элемента списка в виде соответствующего показателя
<html lang="en"> температуры из массива. Рассмотрим решение этого задания.
<head>
<title>Temperatures</title>
<meta charset="utf-8">
<script>
function showTentps() { Создаем новый массив для р а зм е щ е­
var tempByHour = new A rratfQ ния т ем п ера т ур ны х показателей.
tempByHour[0] = 5 9 .2 ;

tempByHour[1] = 6 0 .1 ; Комбинируем циклы и м а с ­


tempByHour[2] = 63;
сивы. О б р ат и т е внимание
на то, что мы используем
tempByHour[3] = 65;
значение i в качестве индекса
tempByHour[4] = 62;
в массиве, поэт ом у получаем
for (var i = 0; i < tempByHour.lengtW . J+ + _ ) {< доступ к каждому элем ент у
var theTenrp = t e m p B y H o u r [i] ; по мере т ого, как значение i
var id = " temp + i; увеличивается при каждом
var li = document. g e t E l e m e n t B y l d (id) ; выполнении цикла.
if (i == о ) {
li. in n e rH T M L = "The temperature at noon was + theTemp ;
} else {
li.innerHTML = "The temperature at " H I + " was " + theTemp ;
}
У Генерируем ст р о ку, к о т о ­
} рая будет использоваться,
window.onload = showTemps; для чего задействуем п е р е ­
</script> менные i и theTemp.
</head>
<body>
по о
<hl>Temperatures</hl>
<ul>
<li id="tempO"></li>
<li id="tempi"></li> Temperatures
<li id="temp2"></li> * The temperature at noon was 59.2
<li id="temp3">C/li> * The temperature at 1 was 60.1
А вот наши * The temperature at 2 was 63
<li id="temp4"></li> * The temperature at 3 was 65
</ ul>
результ ат ы ! * The temperature at 4 was 62
</body>
</html>

дальше ► 117
решение кроссворда

K M L 5 ” K F4><rBoP A’ f e ffleHue

5Л 0 г и ч Е С к

Юг

11с

13r 14г
U м N

17л

118 глава 2
3 собьипия, о б р а б о т ч и к и и Весь эггк>гп ДЖ аЗ

* -ф -

Немного взаимодействия

Человек или манекен?


решать вам.

Вам все еще не удается соприкоснуться с пользователем. Вы изучи­


ли основы JavaScript, однако могут ли ваши веб-страницы взаимодействовать
с пользователями? Когда страницы откликаются на вводимые пользователем
данные, они уже являются не простыми документами, а живыми, реагирующими
приложениями. В этой главе вы узнаете, как обрабатывать одну из форм ввода
данных пользователем (извините за каламбур) и привязывать старомодный
HTML-элемент < f o r m > к современному коду. Это может показаться необыч­
ным, однако такой подход также эффективен. Пристегните ремни, поскольку
наше путешествие по этой главе будет проходить на большой скорости: путь
от простого до интерактивного приложения мы пройдем очень быстро.
добавляем мелодию webville

Приготовьтесь к встрече с Webville Tunes


И т а к , ра не е в н р о ц е с с е ч т е н и я к н и г и в ы у зн а л и массу в с е го об о с н о в а х
Ja va S c rip t, и , н е с м о т р я н а то ч т о м ы с в а м и м н о г о го в о р и л и о с о зд а н и и
в е б -н р и л о ж е н и й , р е а л ь н ы е н р и м е р ы и х с о зд а н и я м ы ещ е н р и с т а л ь н о
н е р а ссм а тр и в а л и . П о э т о м у давайте те н е р ь н р о я в и м се р ье зн о сть (н а са­
м о м деле, н а э т о т раз без ш у т о к !) и создадим р е а л ьно е в е б -н р и л о ж е н и е .

П у с т ь э т о будет м е н е д ж е р н л е й л и с т о в . М ы д а д и м ем у ка к о е -н и б у д ь
о р и ги н а л ь н о е н а з в а н и е , н а н р и м е р ... с ка ж е м , W e b v ille Tunes.

Добавляйте новые песни в любой момент.

See ваши любимые


Blue Suede Strings, by Elvis Pagely песни будут от о­
бражаться прямо
Great Objects on Fire, by Jerry JSON Lewis л окне браузера.

I Code the Line, by Johnny JavaScript

That'll be the Data, by Buddy Bitty and the Variables

Your Random Heart, by Hank "Math" Williams

^ Приложение будет
Вот что мы будем создавать. V - полностью браузерным.
Код на стороне сервера
не потребуется.

Ш ТУ РМ
Если вам известно, для чего нужен этот код:

w in d o w .o n lo a d = i n i t ;

то что, как вам кажется, делает вот этот код?

b u tto n . o n c lic k = h a n d le B u tto n C lic k ;

120 глава 3
события и обработчики

Приступаем...
Д л я н а ча л а н е т н е о б х о д и м о с т и созд авать б о л ьш у ю , к о м п л е к с н у ю в е б -стр а н иц у.
Н а сам ом деле м ы м о ж е м н а ч а ть о ч е н ь н р о с т о . Д а в а й те со зд а д им H T M L 5 -
д о к у м е н т с ф о р м о й и э л е м е н т о м с н и с ка , где будет с о д е р ж а т ь с я н л е й л и с т :

Стандартные H T M L S -элементы head и body.


< ! d o c t y p e htm l>
<htm l lan g= " en " > Beet? JavaScript-код мы п о ­
<head> местим в файл playhst.js.

< title> W eb v ille T u n e s< /title> Мы включили таблицу стилей ,


чтобы придать красивый внеш­
<meta c h a r s e t = " u t f - 8">
ний вид нашему приложению .*
< sc r ip t s r c = " p la y lis t . js" > < /sc rip t>
< l i n k r e l = " s t y l e s h e e t " h r e f = " p l a y l i s t . c s s ">
< /h e a d > Set, 4mQ наМ Иу ЖИ0j эт0 простая форма. Вот она , с текстовым полем
<body> для ввода названий песен. Мы используем HTM LS-ат рибут placeholder , ко-
<form> торый демонстрирует пример того, что можно печатать в поле ввода.
< i n p u t t y p e = " t e x t " i d = " s o n g T e x t I n p u t " s i z e = " 4 0 " p l a c e h o l d e r = " S o n g name"> ^
< i n p u t t y p e = " b u t t o n " id = " a d d B u tto n " valu e= "A d d Song">
< /fo r m > f4 _ А вот button с id в виде
"addButton" для отправки но­
< u l i d = " p l a y l i s t ">
вых дополнений в плейлист.
Мы будем использовать список
< /u l> для размещения песен. Он пока
< /b o d y > пуст j однако скоро мы это испра­
< /h t m l> вим с помощью JavaScript-Koda...

Проведите тест-д р ай в
Н а н е ч а т а й т е н р и в е д е н н ы й вы ш е ко д , за гр у зи т е е го в своем
л ю б и м о м браузере и н о л ю б у й те с ь н а результат, н р е ж д е че м non webviiie Tunes
н е р е й д е те к сл е д ую щ е й с т р а н и ц е . Г«Т»П [+ ie http://>ocaihOSt/~Beth/HTML5/javasc еП coogie ~)
[Song ^Add Song^
Вот что вы должны увидеть.

* Не забывайтеу что использованную в этом примере таблицу стилей (и весь код) вы можете
загрузить на свой компьютеру посетив страницу kttp.//wickedlysm art.com /kfktm l5.

дальше ► 121
о событиях нажатия кнопки

Когда я наЖимаю кнопку Add Song (Добавить песню),


ничего не происходит

Ч то ж , и да, и нет. В ам к а ж е т с я , ч т о н и ч е г о н е н р о и с х о д и т , о д н а к о б раузеру с т а н о в и т ­


ся и з в е с т н о , ч т о в ы щ е л к н у л и н а к н о н к е (к р о м е т о г о , в з а в и с и м о с т и о т и с н о л ьзу е м о -
го б раузера в ы т а к ж е у в и д и те , к а к к н о н к а « о то ж м е тс я » назад но сл е ее н а ж а т и я ).

Н а са м ом деле в о н р о с за кл ю ч а е тс я в т о м , к а к за с т а в и ть к н о н к у делать ч т о -т о , к о гд а
в ы щ е л ка е те н а н е й . Т о ч н е е , в о н р о с с о с т о и т в т о м , к а к будет н р о и с х о д и т ь в ы зо в н е ­
о б х о д и м о го J a v a S c rip t-кода, к о гд а в ы н а ж и м а е те к н о н к у ?

Здесь нам потребуются две вещи:

^ JavaS cript-код, который будет оцениваться,


когда пользователь щелкнет на кнопке Add
Song (Добавить песню). Данный код (как
только мы его напишем) обеспечит добав­
ление новой песни в плейлист.

Способ «прицепить» данный код таким об­


разом, чтобы при нажатии кнопки JavaScript
знал, что необходимо добавить песню
в плейлист.

Когда пользователь щелкает на кнс


(или, к примеру, нажимает ее пальцег
сенсорном экране какого-либо уст|
ства), мы хотим узнать об этом.
Поэтому нас интересует событие, кото­
рое инициируется, когда «пользователь
только что щелкнул на кнопке».

122 глава 3
события и обработчики

ЭЙ, кнопка,
ты меня интересуешь...
Не могла ли бы ты дать
мне знать, если кто-нибудь
щелкнет на тебе?

Добавить песню

Ваша кнопка

Обработка событий
Далее в ы у зн а е те , ч т о в б раузере н р и о т о б р а ж е н и и веб-стра-
н и ц ы н р о и с х о д и т м н о ж е с т в о д е й с т в и й : п о л ь зо в а те л ь щ е л ка ­
е т н а к н о н к а х , н о с е т и м о гу т н о с т у н а т ь з а н р о ш е н н ы е в а ш и м
к о д о м д о п о л н и т е л ь н ы е д а н н ы е , з н а ч е н и я в р е м е н и та й м е р о в
м о гу т и с т е к а т ь (до э т о го м ы еще д о й д е м ). В се э т и в е щ и н р и в о -
д я т к и н и ц и и р о в а н и ю с о б ы т и й , с в и д е те л ь с тв у ю щ и х о т о м , ч т о
к н о н к а б ы ла н а ж а т а , ста л и д о с т у н н ы д о п о л н и т е л ь н ы е д а н н ы е ,
в р е м я и с т е к л о и т. д. (е сть ещ е м н о г о р а з н ы х с о б ы т и й ).

В с я к и й раз, к о гд а и н и ц и и р у е т с я с о б ы т и е , ваш ем у к о д у нр ед о -
ста в л яе тся в о з м о ж н о с т ь обработать е го ; то есть вам н е о б х о ­
д и м о п р е д у с м о тр е ть ко д , к о т о р ы й будет в ы зы в а т ь с я н р и и н и ­
Ваш код ц и и р о в а н и и о п р е д е л е н н о го с о б ы т и я . В ам н е н у ж н о с и ю ж е
м и н у т у о б е с н е ч и в а ть о б р а б о т к у к а к и х -л и б о с о б ы т и й , о д н а ко
э то н о т р е б у е т с я сделать, е сли в ы х о т и т е , ч т о б ы н р и и х и н и ц и ­
и р о в а н и и ч т о -т о н р о и с х о д и л о : н а н р и м е р , к о гд а и н и ц и и р у е т с я
с о б ы т и е н а ж а т и я к н о н к и , вам м о ж е т п о т р е б о в а т ь с я , ч т о б ы за
э т и м н о сл е д о в а л о д о б а в л е н и е н о в о й н е с н и в п л е й л и с т; ко гд а
н о с т у н а ю т д о п о л н и т е л ь н ы е д а н н ы е , в ы м о ж е т е за х о т е ть о б р а ­
б о та ть и х и о т о б р а з и т ь н а с в о е й с т р а н и ц е ; ко гд а за п у с ка е тся
т а й м е р , вам м о ж е т п о н а д о б и т ь с я с о о б щ и т ь п о л ь з о в а те л ю , ч т о
е го б р о н ь н а б и л е т ы в н е р в о м р я д у с к о р о и с т е ч е т, и т. д.

Т а к и м о б р а зо м , м ы зн а е м , ч т о н а м н е о б х о д и м о о б е с н е ч и т ь об­
ра б о тку со б ы тия , и н и ц и и р у е м о го н р и н а ж а ти и к н о н к и , н о это­
му н о с м о т р и м , к а к э то м о ж н о сделать.

дальше ► 123
код для обработчика кнопки

Составляем план...
Д а в а й те н е м н о го н р и т о р м о з и м , н р е ж д е ч е м угл у б и м с я в м и р о б р а б о т ч и к о в и с о б ы т и й . Н а ш а ц ель
се й ч а с — сделать т а к , ч т о б ы но сл е щ е л ч ка н а к н о н к е A d d S o n g (Д о б а в и т ь н е с н ю ) н р о и з о ш л о д о ­
бавлени е н е с н и в н л е й л и с т н а с т р а н и ц е . П о д о й д е м к р е ш е н и ю э т о й за д а чи н а о с н о в е с л е д у ю щ и х
э та н о в :
1 . Задание об р а б о тч и к а для о б р а б о тк и с о б ы т и й c lic k 6 о тн о ш е н и и кнопки A d d S on g ( Д о б а в и т ь п е с н ю ).

2 . Написание об р а б о тч и к а для извлечения названия песни, введ енного п ол ь з ов ател ем , после чего п о с л е д у е т ...

3 . Создание нов о го эл е м ен та для размещ ения новой песни и . . .

4 . Д обавл ение н ов ого эл е м ен та в D 0 M с т р а н и ц ы .

Н е б е с н о к о й т е с ь , е сли э т и э т а н ы н е со все м я с н ы для вас, н о с к о л ь к у н о х о д у дела м ы все вам о б ъ яс­


н и м . С е й ч а с о т вас тр е б у е тс я н р о с т о н р о ч у в с т в о в а ть и х , следуя за н а м и , н о к а м ы будем за н и м а ть с я
н а н и с а н и е м н е о б х о д и м о го о б р а б о т ч и к а . И т а к , о т к р о й т е н о в ы й ф айл p la y lis t.js , где будет р а с п о л а ­
га т ь с я весь ваш J a v a S c rip t-код .

Получение доступа к кнопке Add Song (Добавить песню)


Ч т о б ы « н о н р о с и ть » к н о н к у дать н а м зн а ть , к о гд а будет и н и ц и и р о в а н о с о б ы т и е , сви д е те л ь ств ую щ е е
о т о м , ч т о н о л ь зо в а те л ь щ е л кн у л н а н е й , сна ча ла н е о б х о д и м о н о л у ч и т ь д о с т у н к э т о й к н о н к е . К сча­
с ть ю , м ы создали д а н н у ю к н о н к у с и с н о л ь з о в а н и е м H T M L -р а з м е тки , и э то озна ча е т, ч т о ... к а к в ы у ж е
д о га д а л и сь, о н а н р е д с та в л е н а в о б ъ е к т н о й м о д е л и д о ку м е н т а ( D O M ) , а в ы у ж е зн а е те , к а к и з в л е ка ть
э л е м е н т ы оттуда. Е сл и в ы ещ е раз в згл я н е те н а H T M L -разм етку, т о за м е т и те , ч т о м ы н р и с в о и л и i d
к н о н к и з н а ч е н и е a d d B u tto n . Т а к и м о б р а зо м , м ы в о с п о л ь зу е м с я g e t E l e m e n t B y l d для и з в л е ч е н и я
ссы л ки на кн о н ку:

: v a r b u t t o n = d o c u m e n t . g e t E l e m e n t B y l d ( " a d d B u tto n " ) ;

Т е н е р ь н а м н у ж н о н р о с т о задать для к н о н к и ко д , к о т о р ы й будет в ы зы в а т ь с я н р и с о б ы т и и c l i c k .


Д л я э т о го м ы созд а д им ф у н к ц и ю с и м е н е м h a n d l e B u t t o n C l i c k , к о т о р а я за й м е тс я о б р а б о т к о й дан­
н о г о с о б ы т и я . П о д р о б н е е о ф у н к ц и я х м ы н о г о в о р и м н е м н о го н о з ж е , а н о к а н е о б х о д и м а я н а м ф у н к­
ц и я будет в ы гл я д е ть в о т та к:

ф ункция носит имя


h a n d le B u tto n C lick ; об о с о б е н - — фу н к ц и я п о з в о л я е т у п а к о в а т ь
ност ях синт аксиса мы п о го - >v код в р а м к и о т д е л ь н о г о блока.
в о р и м ч у т ь позже. X 1 Вы м о ж е т е п р и с в о и т ь е м у
) имя и повт орно использоват ь
f u n c t i o n h a n d l e B u t t o n C l i c k () { \ э т о т бл о к кода в е з д е > где в а м
a пl e 4_/ пт, 4_о_
r t ( " B u tto n was c l-Ii ■c k1 e dл !и"х) ; г\ X п о т рг е б уие т с я .

] К\ В есь к о д, к о т о р ы й д о л -
При в ы зове данной ф у н к ц и и жен в ы п о л н я т ь с я п р и
будет выводиться диалого- вы зове ф у н к ц и и , м ы з а -
вое окно a lert. к льо ча е м в скобки.

124 глава 3
1. Задание обработчика для обработки событий click
2. Написание обработчика для извлечения названия песни
3. Создание нового элемента для размещения новой песни
Задание обработчика событий click для кнопки 4 . Добавление нового элемента в D0M страницы

И т а к , т е н е р ь у нас е сть к н о н к а , а т а к ж е ф у н к ц и я h a n d l e B u t t o n C l i c k , к о т о р а я будет в ы сту-


н а т ь о б р а б о т ч и к о м , т а к ч т о д а в а й те с о е д и н и м и х вм е сте . Д л я э т о го м ы в о с п о л ьзу е м с я с в о й ­
с тв о м b u t t o n н о д и м е н е м one l i c k . С в о й с т в о o n c l i c k м ы зад адим сл е д ую щ и м о б р а зо м :

v a r b u t t o n = d o c u m e n t . g e t E l e m e n t B y l d ( " a d d B u tto n " ) ;


b u t t o n .o n c l ic k = h a n d leB u tto n C lic k ; /
Л
Имея под рукой b u tto n , после вызова getElementByld мы задаем
для свойства onclick функции?, которая будет вызываться при
наступлении события click.

К а к в ы н о м н и т е , м ы делали н е ч т о н о д о б н о е , к о гд а и с н о л ь з о в а л и с в о й с т в о w in d o w .o n lo a d
для в ы зо в а ф у н к ц и и н о с л е о к о н ч а н и я з а гр у з к и о к н а . О д н а к о в д а н н о м случае м ы в ы зы в а е м
ф у н к ц и ю но сл е н а ж а т и я к н о н к и . Т е н е р ь с о е д и н и м все:

К а к и в предыдущей главе, здесь мы используем ф унк -


цино m itj которая не будет вызываться и выполняться
w in d o w .o n lo a d = i n i t ; £ meX n0PJ пОКа с т РаниЧа полностью не загрузится.
f u n c t i o n i n i t () {
v a r b u t t o n = d o c u m e n t . g e t E l e m e n t B y l d ( " a d d B u tto n " ) ;
b u t t o n .o n c l ic k = h a n d leB u tto n C lic k ;
К. После окончания загрузки ст р а ­
ницы мы извлекаем button и за-
f u n c t i o n h a n d l e B u t t o n C l i c k () {
даем его обработчика onclick.
a l e r t ( " B u tto n was c l i c k e d ! 1 Ь
Обработчик событий click будет
выводить диалоговое окно alert
в случае щелчка на кнопке.

Проведение т е с т а .
Н а н е ч а т а й те н р и в е д е н н ы й в ы ш е ко д (в своем ф айле p l a y l i s t . j s ) , з а гр у зи те с тр а н иц у, а затем но -
щ е л ка й т е н а к н о н к е с т о л ь к о р аз, с к о л ь к о з а х о т и т е . П о с л е к а ж д о го щ е л ч ка в ы будете н а б л ю д а ть
н о я в л е н и е д и а л о го в о го о к н а a l e r t .

З а к о н ч и в т е с т и р о в а н и е с в о е го н о в о г о
о б р а бо тчика с о б ы ти й c l i c k в о тн о ш е н и и
к н о н к и , о т к и н ь т е с ь н а с н и н к у стула и и зу ­ h Mp . y / f o c a l h o s t
ч и т е к о д , нро д ум а в т о , к а к о н раб о та е т. Button wa5 clicked!

К о г д а в ы н о й м е т е , ч т о все э то у ж е у вас
в го л о в е , н е р е в е р н и т е стр а н и ц у , и м ы с
в а м и н р о й д е м с я н о д е та л я м , ч т о б ы за-
к р е н и т ь м а те р и а л .

дальше ► 125
как работает кнопка add song

Более пристальный Взгляд на происшедшее...


На нескольких носледних страницах мы нознакомили вас с м ассой
новых аснектов, ноэтому давайте ещ е раз нройдем ся но коду, чтобы
убедиться в том, что вы все четко усвоили. Итак, нристуним:

Первое, что мы сделали, — это добавили кнопку в свою


HTML-срорму. Затем нам потребовалось средство перехвата
событий click в отношении этой кнопки, чтобы в результате
был выполнен кое-какой код. Для этого мы создали обработ­
чика и присвоили его свойству onclick нашего button.
Задаем обработчика
событий click в ф унк­
function init() { ции in it (то есть
var button = document.getElementByld ("addButton") выполнение будет
button.onclick = handleButtonClick; запускаться после
} завершения загрузки
страницы).
Объект button об­
ладает свойством
onclick, для которого
мы задаем функцию
handleButtonClick.

Когда пользователь щелкает на кнопке ,


инициируется событие click и происхо­
дит вызов функции handleButtonClick.

function handleButtonClick() {
alert("Button was clicked! ') ;
}

Мы также написали простой обработчик, который выводит


диалоговое окно a l e r t с сообщением о том, что кнопка была
нажата. Чуть позже мы напишем настоящий код для обработ­
чик а, а этот отлично подходит для тестирования. I

г 'и Обработчик
в вашем коде

126 глава 3
события и обработчики

Итак, код написан, страница загружается


и отображается в окне браузера, обработ­
чик задан. Теперь все зависит от поль­
зователя...

Наконец, пользователь щелкает на на­


шей кнопке, в результате чего она акти-
визируется, замечает, что у нее имеется
обработчик, и вызывает его...

_/ Очнись, / Вижу, у меня Ч


Г пользователь щелк- \ f есть обработчик на \
N. нул на тебе. ) 1 этот случай, нужно дать
ему знать. >
О
_____ П — 0 ----------- '

Г Добавить песню
о

f u n c t i o n h a n d l e B u t t o n C l i c k () {
a l e r t ( " B u tton was c l i c k e d ! " )
}

Меня попросили
сообщить вам, что кноп­
ка была нажата... Я знаю,
что для диалогового окна
http://localhost
ale rt это не слишком впечат­
Button was clicked!
ляюще, но, как бы там ни было,
я просто делаю свою
( Q* )
работу.

дальше ► 127
извлечение названия песни из dom 1. Задание о б р а б о т ч и к а для о б р а б о т к и с о б ы т и й c lick
2. Написание обработчика для извлечения названия песни
3. Создание нового элемента для размещения новой песни
извлечение названия песни 4 . Добавление нового элемента в D0M страницы

М ы готовы н е р е й т и к о в т о р о м у э та н у р е ш е н и я н а ш е й за д а ч и — и з в л е ч е н и ю н а з в а н и я н е с н и ,
в в е д е н н о го п о л ьзо в а те л е м . Сделав э т о , м ы с м о ж е м задум аться над те м , к а к н а ш н л е й л и с т будет
о т о б р а ж а т ь с я в браузере.

О д н а к о к а к м ы и з в л е ч е м н а з в а н и е н е с н и ? Э то н е ч т о т а к о е , ч т о ввел п о л ь з о в а те л ь , ведь так?


А х да, все, ч т о п р о и с х о д и т н а в е б -с тр а н и ц е , о тр а ж а е т с я и в о б ъ е к т н о й м о д е л и д о ку м е н та (D O M ),
н о э т о м у те кс т , в в е д е н н ы й п о л ьзо в а те л е м , т о ж е д о л ж е н б ы т ь там .

Д л я и з в л е ч е н и я т е к с т а и з т е к с т о в о го э л е м е н та ввода ф о р м ы н а м сна ча ла н о т р е б у е т с я и з в л е ч ь
э т о т э л е м е н т и з D O M , и в ы у ж е зн а е те , к а к о й и н с т р у м е н т для э т о го н у ж е н — g e t E l e m e n t B y l d .
Сделав э то , м ы см о ж е м в о с п о л ь зо в а ть с я с в о й с т в о м v a l u e т е к с т о в о го э л е м е нта ввода для п о л у ч е ­
н и я д о стун а к тексту, вве д е н н о м у в но л е ф о р м ы по л ьзо ва те л е м , и в о т к а к это все будет вы гл яд е ть:

Вот элем ент j к о т о ­


рый м ы х о т и м извлечь
до к у м е н т а
из DOM. Д л я э т о ­
го м ы и с п о л ь з у е м
его id со значен и ем
".S o n g T e x tln p u t". ul id="playlis+"

\
input id^'songTextlnput” nput id="addButton" j
value="Blue Suede Strings, by Elvis Pagely"

З а т е м м ы и с п о л ь з у е м свойст во value
э л е м е н т а ввода для извлечения т е к с т а ,
С пом ощ ью мет ода набранного п о л ь з о в а т е л е м в п оле вчооа.
g e tE le m e n tB y l d м ы сможем
получит ь доступ к элем ент у
ввода s o n g T e x tln p u t в ф орм е.

^Возьми в руку карандаш


Доработайте ф ункцию h a n d l e B u t t o n C l i c k , приведенную ниже, чтобы извлечь на
звание песни, набранное пользователем в элементе ввода формы. П роверить пра
вильность своих ответов вы сможете, посмотрев реш ение д ан н ого задания на с. 130.

f u n c t i o n h a n d l e B u t t o n C l i c k () {
v a r t e x t l n p u t = d o c u m e n t . g e t E l e m e n t B y l d ("
v a r songName = . v a lu e;
alert(" A d d in g " +

128 глава 3
события и обработчики

Возьми в руку карандаш

А вдруг вам потребуется провести проверку, чтобы убедиться в том, что пользо­
ватель действительно ввел текст до того, как щелкнул на кнопке? Как это можно
будет сделать? (Решение данного задания вы также сможете отыскать на с. 130.)

Часш°

ЧаДаВаеМые
Вопросы

Каким будет значение свойства value текстового элемента Ка ки е ещ е типы с о б ы ти й м ож но о б р а б а ты в а ть


ввода, если пользователь ничего не ввел? Будет ли оно null? на JavaScript помимо click?
Или кнопка Add Song (Добавить песню) не станет вызывать
обработчик, если пользователь ничего не ввел? 0 : Существует масса прочих событий, связанных с манипу­
ляциями мышью, которые можно обрабатывать. Например, вы
0 : Кнопка Add Song (Добавить песню) не настолько умна. Если можете отслеживать и обрабатывать события, инициируемые при
вы хотите определять, ввел ли что-нибудь пользователь, для этого нажатии кнопки мыши, при наведении указателя мыши на элемент
вам потребуется соответствующий код. Чтобы узнать, является и убирании его прочь с элемента, при перетаскивании элемента с
ли текстовое поле ввода пустым (то есть пользователь ничего в помощью мыши, при нажатии и удержании кнопки мыши (они от­
нем не напечатал), можете проверить, не равно ли его значение личаются от событий click). Кроме того, существует множество
строке, в которой ничего нет, также называемой пустой строкой и иных типов событий, о которых мы уже упоминали (например, со­
помечаемой как,,м(пара двойных кавычек, между которыми ничего бытия, инициируемые, когда становятся доступны дополнительные
не стоит). Мы понимаем, почему вы решили, что значение может данные, события, связанные с таймерами и окном браузера, и т. д.).
быть равно null, поскольку ранее отмечали, что это значение В процессе чтения книги вы увидите еще довольно много других
переменной, под которым подразумевается «значения нет», однако типов событий, которые можно обрабатывать; если вы знаете,
с точки зрения текстового поля ввода оно будет содержать не ничто, как обрабатывать события одного типа, то вы с большой долей
а строку, в которой ничего нет. Представьте себе!;-). вероятности сможете обработать события любых других типов!

Я думал, что "value" текстового элемента ввода — это


атрибут. Но вы называете его свойством. Почему?
В Что делает JavaScript, пока ждет инициирования событий?

0 : Если вы не запрограммировали свой JavaScript на выполнение


0 : Вы правы, value — это атрибут текстового элемента ввода. каких-либо действий в это время, он будет бездельничать, пока
Вы можете инициализировать значение текстового элемента ввода что-нибудь не произойдет (пользователь начнет взаимодействовать
с использованием атрибута value. Однако в случае с JavaScript с интерфейсом, поступят данные из Интернета, истечет значение
для доступа к значению, введенному пользователем, вам потре­ времени таймера и т. д.). И это хорошо, поскольку вычислительная
буется использовать свойство value элемента ввода, которое мощь вашего компьютера сможет быть направлена на другие вещи,
извлекается из объектной модели документа (DOM). например на то, чтобы сделать ваш браузер более отзывчивым.
Позже мы расскажем, как создавать задачи, выполняемые в фо­
новом режиме, чтобы ваш браузер одновременно выполнял код
задачи и реагировал на события.

дальше ► 129
решение упражнения

Возьми в руку карандаш


Решение Доработайте функцию h a n d l e B u t t o n C l i c k , приведенную
ниже, чтобы извлечь название песни, набранное пользовате­
лем в элементе ввода формы. Вот наше решение этого задания.

Сначала на м необходимо извлечь ссылку на т е к -


ст овы й э л е м е н т ввода в ф о р м е. Мы пр исвои ли
id эт о го э л е м е н т а значение ".s o n g T e x tln p u t",
п о э т о м у мож ем и с п о ль з о ва т ь его в сочет ании
с ж э с g e tE le m e n tB y l d для извлечения ссылки.

f u n c t i o n h a n d l e B u t t o n C l i c k () { J
var t e x t I n p u t = docum ent. g e tE le m e n tB y ld (" so n g T ex tIn p u t"
v a r songName = t e x t I n p u t . v a l u e ;
a l e r t ( "Adding " + son gN am e);
Свойство value текстового
} элемента ввода содержит
все, что набирается в т е к -
стовом поле и представляет
Ь у д е т выводиться диалоговое окно собой строку. Здесь мы при -
alert, в к о т о р о м о т о б р а зи т с я сваиваем введенный текст
"Adding" и название песни. переменной songName.

Возьми в руку карандаш


Решение БОНУС

А вдруг вам потребуется провести проверку, чтобы убедиться в том, что


пользователь действительно ввел текст до того, как щелкнул на кнопке?
Как это можно будет сделать? Решение таково:

f u n c t i o n h a n d l e B u t t o n C l i c k () {
v a r t e x t l n p u t = docum ent. g e tE le m e n tB y ld (" so n g T e x tln p u t" );
v a r songName = t e x t l n p u t . v a l u e ; M ы мож ем и с п о ль з о ва т ь о п е р а т о р
if (songName == "") { ^ — if и ср а в н и т ь с т р о к у so n g N a m e
с п у с т о й с т р о к о й , чтобы у б е ­
a l e r t ( " P lea se e n t e r a song"),
дит ься, ч т о п о л ь з о в а т е л ь д е й ­
} else { с т в и т е л ь н о ч т о - т о напечат ал.
a l e r t ( "Adding " + songName); Если п о л ь з о в а т е л ь ничего не н а п е ­
ч а т а л , т о мы выведем диалоговое
окно a le rt и п о п р о с и м его ввест и
название песни.

130 глава 3
1. Задание о б р а б о т ч и к а для о б р а б о т к и с о б ы т и й c lick
2 . Нап и сан ие о б р а б о т ч и к а для и звлечения назВания песни
3. Создание нового элемента для размещения новой песни
Как добавить песню на страницу? 4-А»б»в».н«...вого«««м.»™вdom^«„цы
М ы с в а м и у ж е м н о г о ч е го сделали, и все р а б о та е т! В ы м о ж е т е в в е с ти назва­
н и е н е с н и в ф орму, щ е л к н у т ь н а к н о н к е A d d S o n g (Д о б а в и т ь н е с н ю ) и и з в л е ч ь
т о , ч т о в в о д и л и в ф орму, — все в рамках вашего кода . Т е н е р ь м ы о т о б р а з и м п л е й ­
л и с т н а са м о й с т р а н и ц е . В о т к а к э то будет в ы гл я д е ть.

ООО W eb ville T u n e s

[ А | ► | [ + | 0 h ttp ://lo calh o st/->B e th /H e ad -F irst-H T M <5 ] (С^т Google j

Song name Г A d d Song^)

Blue Suede Strings, by Elvis Pagely При нажатии кнопки


Add Song (Добавить
песню) ваш JavaScript
добавляет соответ­
ствующую песню
в список на странице.

Нам потребуется сделать следующее

Вы могли заметить, что мм уже добави­


© ли пустой список в HTML-разметку (пу­ Это список
стой элемент < u i > ) , когда в первый раз body в объектной
вводили данные. В результате объектная модели доку­
модель документа (DOM) сейчас будет мента. Сейчас
ul id= "p la y lis t"
выглядеть так. он пуст.

© Каждый раз, когда вводится название но­


вой песни, нам нужно добавлять новый
элемент в неупорядоченный список. Для При вводе на­
этого мы создадим новый элемент <и>, звания песни
мы создаем
в котором будет размещаться название
новый эле­
новой песни. Затем мы возьмем новый
мент списка
элемент <и> и добавим его в < u i> в объ­ (элемент <И>)
ектной модели документа. В результа­ и добавляем его
те этого, когда браузер сделает свои в список <ul>.
дела, вы увидите, что страница подвер­
глась обновлению, словно данный эле­
мент <и> был там всегда. И конечно же,
все это мы сделаем в коде.

дальше ► 131
создание нового элемента

пражненке п По

Здесь приведен плейлист, для которого вам необхо­


димо нарисовать объектную модель документа в том
виде, который он приобретет после добавления всех Blue Suede Strings, by Elvis Pagely
этих песен. Обратите внимание на порядок, в котором
песни были добавлены на страницу, и разместите Great Objects on Fire, by Jerry JSON Lewis

соответствующие элементы на своих местах в DOM. 1Code the Line, by Johnny JavaScript
Один из них мы уже расположили в нужном месте,
That'll be the Data, by Buddy Bitly and the Variables
вам остается лишь сделать то же самое в отношении
остальных элементов. Посмотрите решение данного Your Random Heart, by Hank "Math" Williams
задания в конце главы, прежде чем двинетесь дальше.

Blue Suede Strings,


by Elvis Pagely

Д о р и с у й т е зд е сь о с т а л ь н у ю
ч а с т ь РОМ д л я п л е й л и с т а ,
п р и в е д е н н о г о в в е р ху.
Придется ли вам строить какие-либо предположения насчет порядка,
в котором элементы < i i > добавляются в родительский элемент?

132 глава 3
события и обработчики

Как создать новый элемент


— Нам лучше заняться
В ы у ж е в и д е л и , к а к м о ж н о н о л у ч и т ь д о с т у н к существующим созданием этих элементов,
элементам н о с р е д с т в о м о б ъ е к т н о й м о д е л и д о ку м е н та . О д н а ко Бетти. Они снова обновляют
D O M та кж е м о ж н о и сн о л ьзо в а ть для со зд а ния н о в ы х элем ентов D ОМ.
(с н о с л е д у ю щ и м их добавлением в D O M , о ч е м м ы н о г о в о р и м
со все м с к о р о ).
Д а в а й т е н р е д с т а в и м , ч т о н а м н у ж н о с о зд а ть э л е м е н т < l i > .
В о т к а к м ы э то сделаем:

Д л я создания новых э л е м е н т о в и с п о л ь з уе т с я d o c u m e n t
c re a te E le m en t. В о звр а щ а е т с я ссылка на новый э л е м е н т .

var l i =
\
d o c u m e n t. c r e a t e E le m e n t ( " l i " ) ;

Передаем
Здесь м ы п р и с в а ­
c r e a te E le m e n t в виде
и ва ем новый э л е ­
с т р о к и т о , какой э л е ­
м е н т пер е м е н н о й И.
м е н т х о т и м создать.

С п о м о щ ь ю c r e a te E le m e n t создается совершенно
| li j новый э л е м е н т . С ледует о т м е т и т ь , ч т о он
Л пока не вс т а в л я е т с я в о б ъ е к т н у ю м о д е ль д о ­
ку м е н т а . На данный м о м е н т он п р е д с т а в л я е т
содой ли ш ь э л е м е н т , находящийся в свободном
п л а в а н и и , к о т о р о м у нужно п р и с т а н и щ е в РОМ.

И т а к , т е н е р ь у на с и м е е т с я э л е м е н т < l i > , в к о т о р о м н и ч е г о
н е т. В ы у ж е з н а е т е с н о с о б д о б а в и т ь т е к с т о в о е с о д е р ж и м о е
в эл е м е н т:
li.in n erH T M L = songN am e;

Наша п е р е м е н - ^ з а д а ш со д е р ^
ная I'- жимое в виде названия
песни для э л е м е н т а <h>.

^ Blue Suede Strings,


by Elvis Pagely

Наш новый о б ъ е кт
э л е м е н т а li, готовы
р и н у т ь с я в бой. О д н а ­
ко он еще не явля е т с я
ч а с т ь ю РОМ!

дальше ► 133
добавление нового элемента 1. Задание о б р а б о т ч и к а для о б р а б о т к и с о б ы т и й c lick
2 . Нап и сан ие о б р а б о т ч и к а для и звлечения назв ан и я песни
3 . С о здание нового э л е м е н т а для р а з м е щ е н и я новой песни

Добавление элемента В DOM 4 . Добавление нового элемента в D0M страницы

Ч т о б ы д о б а в и ть н о в ы й э л е м е н т в о б ъ е к т н у ю модель д о ку м е н та , вам
н е о б х о д и м о зн а ть , куда е го н о м е щ а ть . Ч т о ж , н а м э то у ж е и з в е с т н о :
м ы со б и р а е м ся н о м е с т и т ь э л е м е н т < l i > в э л е м е н т < u l> . Н о к а к э то
сделать? Д а в а й те еще ра з взгл я н е м н а D O M . П о м н и т е , к а к ра не е м ы
о т м е ч а л и , ч т о о н а с р о д н и дереву? М о ж е т е т а к ж е с ч и т а т ь ее че м -то
вр о д е родословного дерева.

d o c u m e n t я вля е т с я н еким ре-


подобием « м а т е р и » всего с е ­ '" Л

к
м ейного рода и р а с п о л а г а е т с я б&нкоМ» (У V ...... р 0Эителелл
б да н но м п о ко л е ни и
на с а м о м верху дерева. р
document
У h t m l и м е ю т с я два
дочерних э л е м е н т а —
с html
i hea d и body. Р о дит е ле м
~ Г ~
body явля е т с я h tm l.
head | body j * '

с title script form ul id="playlist"


h
А вот наш ul. Роди­
| input | | input ~ | телем ul я в л я е м с я
body, а у ul пока н е т
дочерних элем ент ов...
Т а к и м о б р а зо м , ч т о б ы д о б а в и т ь н а ш э л е м е н т < l i > , н е о б х о д и м о ...мы х о т и м сде­
сделать е го д о ч е р н и м н о о т н о ш е н и ю к < u l> . Д л я э т о го н а м с н а ч а ­ л а т ь наш новый
ла н у ж н о о т ы с к а т ь э л е м е н т < u l> в де р е в е (м ы н р и с в о и л и е го i d э л е м е н т <(/>
з н а ч е н и е "p la y lis t", ч т о б ы е го н р о щ е б ы л о н а й т и ) . З а те м , ч т о б ы
н р о и з о ш л о д о б а в л е н и е э л е м е н т а < l i > , м ы н р е д л а га е м э л е м е н т у
IT ) дочерним по о т ­
нош ению к <ul>.
< u l> д о б а в и т ь н о в ы й д о ч е р н и й элем ент. Все э т о будет в ы гл я д е ть
Blue Suede Strings,
сл е д ую щ и м об р а зо м :
by Elvis Pagely
И с п о л ь з у е м g e tE le m e n tB y l d для извлечения
ссылки на э л е м е н т <ul> с id -"playlist1'.
При каждом вызове

v a r u l =
2
d o c u m e n t . g e t E l e m e n t B y l d ( " p l a y l i s t 11) ;
appendC hild новый
э л е м е н т <Ц> б удет
добавлят ься в э л е ­
u l .a p p e n d C h i l d ( li) ;
м е н т <ul> после
Здесь мы п р е д ла га е м э л е м е н т у <ul> добавить <h> в качест ве любых других э л е ­
дочернего э л е м е н т а . К ак т о л ь к о э т о будет сделано, в РОМ <(/> м е н т о в <li>j ко т оры е
с т а н е т дочерним э л е м е н т о м <ul>, и браузер обновит с т р а н и ц у , уже т а м б уд у т р а с ­
чтобы в ней о т р а зи л с я новый <h>. полага т ься.

134 глава 3
события и обработчики

Соединяем все воедино...


Давайте соединим весь код и добавим его в функцию h a n d l e B u t t o n C l i c k . Наберите нриведенный ниже
код, если вы еще этого не сделали, чтобы затем можно было нровести тестирование.

f u n c t i o n h a n d l e B u t t o n C l i c k () {

v a r t e x t l n p u t = d o c u m e n t . g e t E l e m e n t B y l d ( " s o n g T e x t l n p u t " );
Сначала м ы создаем новый э л е м е н т <h>,
v a r songName = t e x t l n p u t . v a l u e ; ___ g к о т о р о м б удет р а з м е щ а т ь с я н а з в а -
tС ние новой п е с ни .
var l i = docum ent. c r ea teE le m e n t (" l i " );
З а т е м задаем содержимое в виде
li.in n erH T M L = songName; ^ названия песни для данного эл е м е н т а .
<ul> с id "playlist" я вля е т с я р о д и -
v a r u l = document . g e t E l e m e n t B y l d ( " p l a y l i s t " ) ; (г~т ельскиМ э л е м е н т о м no о т н о ш е н и ю
к н а ш е м у новом у <И>. П о эт ом у он
u l . a p p e n d C h ild ( l i ) ; -- ------------^ след у ю щ и й в очереди на извлечение.

Л Д обавляем объект II в ul с и сп о ль-


О б рат ит е вним ание , чт о мы предлага~ 30^анием appendChild.
сал р о д и т е л ь с к о м ц э л е м е н т у ul добавить
в себя Н в ка чест ве дочернего эл е м е н т а .

...и проводим тест-драйв


____ I______ -
u N d = " p la y list'^ L
Протестируйте Webville Tunes, добавляя в нлейлист
несни. Вот наши результаты.

Так б удет вы глядет ь о б ъект ная м о ­


О О О W eb v ille T u n es
дель д о к у м е н т а после добавления всех
[ < | | | + |Q h ttp ://lo c a lh o s t/-'B e th /H e a d -F irs t-H T M L 5 ; C j (O? Google
новых э л е м е н т о в <Н>.
Song name (Add Song^i

Blue Suede Strings, by Elvis Pagely Т е п е р ь , когда мы вводим название


песни и наж имаем кнопку A d d Song
Great Objects on Fire, by Jerry JSON Lewis
( Д о б а в и т ь песню ), с о о т в е т с т в у ю ­
I Code the Line, by Johnny JavaScript щая песня добавляется в РОМ, б л а го ­
даря ч ем у м ы видим , ч т о с т р а н и ц а
That'll be the Data, by Buddy Bitly and the Variables
п р е т е р п е в а е т и зм енения и в о т о -
Your Random Heart, by Hank "Math" Williams браж аемом на ней списке по я вля е т с я
новая песня.

дальше ► 135
обзор приложения playlist

Обзор того, что мы только что сделали


В э т о й главе мы с вами много чего сделали (иричем за короткий нромежуток
времени!). Иснользуя^уаБспр):, мы создали менеджер нлейлистов, который
нозволяет ввести название несни, щелкнуть на кнопке и добавить данную
несню в снисок на странице
Первое, что мы сделали, — это задали обработчик
для обработки событий c l i c k в отношении кноп­
ки Add Song (Добавить песню). Мы создали функ­
с Add Song
_J

цию h a n d l e B u t t o n C l i c k и задали ее для свой­


ства o n c l i c k кнопки Add Song (Добавить песню).
Когда п о л ь з о в а т е л ь щелкает на кнопке Add Song (Добавить
песню ), пр о и с х о д и т вызов нашего обработчика handleButtonClick.
ф Затем М Ы написали КОД ДЛЯ h a n d l e B u t t o n C l i c k ,
чтобы извлекать название песни из текстово­
го поля ввода. Мы воспользовались свойством
i n p u t . v a l u e для извлечения текстовых данных и j
# \*
даже позаботились о проведении проверки, чтобы
убедиться, что пользователь ввел название песни.
Если он этого не сделал, то мы выводим диалого­
вое окно a l e r t с соответствующим сообщением.

3 ha n d le B u tto n C lic k м ы извл е ка е м


input id=''songTextInput" input id=''addButton"
введенное п о л ь з о в а т е л е м название value="Blue Suede Strings by Elvis Pagely''
песни, и с п о ль зуя свойст во input.vatue
для извлечения т е к с т о в ы х данных
из об ъ е кт н о й м о дели д окум ент а.
Чтобы добавить песню в плейлист, далее мы
создали элемент < l i > , используя d o c u m e n t .
c r e a t e E l e m e n t , и задали содержимое в виде
названия песни для этого элемента с помощью
innerHTM L. М и С03дали новый э л е м е н т Blue Suede S trin g s ,
<li> и задали для него содерж и- -А. У v' s а9е У
м о е в виде названия песни.
Наконец, мы внедрили новый элемент < i i > в объ­
ектную модель документа, добавив его в качестве
дочернего элемента по отношению к родительско­ body
му < u l > . Мы сделали это С ПОМОЩЬЮ a p p e n d C h i l d , Д обавление
дав элементу < u l > команду «добавить < l i > в ка­ нового дочер­
честве дочернего элемента», в результате чего он него э л е м е н т а |^ u M d = ^ p la y li^ rJ |
был внедрен в объектную модель документа. При в DOM п р и в о ­
добавлении элемента в DOM браузер обновляет д и т к обновле­
страницу, которую видит пользователь, и в плей­ нию ст раницы.
листе появляется название новой песни.

136 глава 3
события и обработчики

ТТостойте-ка, я понимаю, что мы взаимодей­


ствуем с DOM и все такое, но как данный код можно
назвать реальным веб-приложением? Если я закрою
окно браузера, то все мои песни пропадут. Разве не
должны элементы моего плейлиста сохраняться,
если это действительно приложение?

Мы с вами согласны, плейлист должен сохраняться;


в к о н ц е к о н ц о в , к а к о й см ы сл д о б а в л я ть все э т и п е с н и
в п л е й л и с т, если о н и не будут с о х р а н е н ы ? К р о м е т о г о ,
сущ е ствуе т масса д р у г и х ф у н к ц и й , к о т о р ы е в ы т а к ж е
м о ж е те за х о те ть в н е д р и ть . Н а п р и м е р , вам м о ж е т п о н а ­
д о б и т ь с я д о б а в и ть а у д и о и н т е р ф е й с с и с п о л ь зо в а н и е м
A P I-и н те р ф е й с а a u d i o / v i d e o , ч т о б ы м о ж н о б ы ло п р о ­
сл у ш и в а ть п е с н и , д е л и т ь с я и м и со с в о и м и д р у з ь я м и
п о с р е д с т в о м в е б -с л у ж б (в р о д е F a c e b o o k и T w itt e r ) ,
и с к а т ь в л о к а л ь н о й с е ти л ю д е й , к о т о р ы м н р а в я т с я те
ж е и с п о л н и т е л и , ч т о и вам (и с п о л ь зу я A P I-и н те р ф е й с
G e o lo c a tio n ). К т о м у ж е м ы у в е р е н ы , ч т о у вас м о гу т
в о з н и к н у т ь и д р у ги е п о ж е л а н и я в э т о м пла не .

В о зв р а щ а я с ь к п л е й л и с т у ... М ы х о т е л и б ы с т р о п р о ­
д е м о н с т р и р о в а т ь вам п р и м е р с о з д а н и я н е б о л ь ш о го
и н те р а кт и в н о го п р и л о ж е н и я , и п лейл ист о тл и чн о п о ­
до ш е л в д а н н о м случае. К р о м е т о г о , с о х р а н е н и е н е с е н
тр е б уе т A P I-и н те р ф е й с а W eb Storage и з в е р с и и H T M L 5 ,
до р а с с м о т р е н и я к о т о р о г о — еще н е с к о л ь к о глав.

С д р у го й с т о р о н ы , м ы д е й с тв и т е л ь н о н е х о т и м , ч т о б ы
здесь оставалась ка ка я -то н е д о с ка за н н о с ть ...

Переверните страницу

дальше ► 137
J o rD o B o

К y ilo r D j> eg j i eH U Io

Мы приготовили для вас


кое-какой код, так что вам
не придется делать это
самим.

М ы за р а н е е п р и г о т о в и л и для вас ко д , п о з в о л я ­
ю щ и й с о х р а н я ть п л е й л и с ты . Вам н у ж н о н р о с т о
н а п е ч а т а ть е го , а т а к ж е в н е с т и н а р у н е б о л ь ш и х
и з м е н е н и й в уж е и м е ю щ и й с я ко д , ч т о б ы в и т о ге
получился со хр а н е н н ы й пл ейл ист H T M L 5 .

О бо всех о со б е н н о стях со хр а н е н и я д ан ны х
л о ка л ь н о в браузере м ы п о г о в о р и м в главе, но -
с в я щ е н н о й A P I-и н те р ф е й с у W e b S torage, а н о к а
ч то вы научитесь со хр а нять н л ейлисты .

Е с т е с т в е н н о , н и к о г д а н е л и ш н и м б уд е т п р о ­
с м о тр е т ь п р и г о т о в л е н н ы й н а м и ко д . Вас м о ж е т
у д и в и т ь , н а с к о л ь к о м н о г о е в ы у ж е зн а е те , не
г о в о р я у ж е о то м , н а с ко л ь ко м н о го е в ы см о ж е те
п о н я т ь , д а ж е е сли ещ е н е зн а е те э т о го .

\Lm

Приготовленный код
не будет работать
J ДЫ НС | в некоторых браузе-
о о ц о р о Ж Н з» 1. рах, если вы загру­
Приготовленный
ь код не будет ра­ жаете свои страни­
цы из file://, а не с сервера (например,
б у д ь т е ботать в Internet localhost://) или онлайн-сервера.
оС Ш ороЖ Н ы Explorer 6 и 7.
В следующих главах мы поговорим об этой
Данные версии ситуации более подробно (она довольно
браузера Internet Explorer не поддержи­ часто возникает в случае с новыми функ­
вают localStorage. Поэтому если вы циями HTML5). А пока, если вы не хотите
используете Internet Explorer, поза- запускать выполнение сервера или копиро­
ботьтесь о том, чтобы его версия вать файлы на онлайн-сервер, используйте
была 8 или выше. браузер Safari или Chrome.

138 глава 3
события и обработчики

Как ({обабить приготовленный код... j^ o rfro B o

Ч у т ь н и ж е н р и в е д е н н р и г о т о в л е н н ы й ко д , к о т о р ы й н у ж н о д о б а в и ть К JjH oriip>0gjX0H ulo


в н р и л о ж е н и е W e b v ille Tunes, ч т о б ы в ы м о гл и с о х р а н и ть с ф о р м и р о в а н ­
н ы й в а м и за м е ч а те л ь н ы й пл е й л и с т. В се, ч т о вам н у ж н о сделать, — э то
созд а ть н о в ы й ф айл с и м е н е м p l a y l i s t _ s t o r e . j s , н е р е н е с т и в н е го
н р и в е д е н н ы й в н и з у ко д , а за те м в н е с т и н а р у и з м е н е н и й в у ж е и м е ю ­
щ и й с я у вас к о д (н а сл е д ую щ е й с т р а н и ц е ).

fu n c tio n sa v e(ite m ) {
v a r p l a y l i s t A r r a y = g e t S t o r e A r r a y ( " p l a y l i s t " );
p la y lis tA r r a y .p u s h (ite m );
l o c a l S t o r a g e . s e t I t e m ( " p l a y l i s t ", J S O N . s t r i n g i f y ( p l a y l i s t A r r a y )
}

f u n c t i o n l o a d P l a y l i s t () {
var p la y lis t A r r a y = g e tS a v ed S o n g s();
v a r u l = d o c u m e n t . g e t E l e m e n t B y l d ( " p l a y l i s t ");
i f ( p l a y l i s t A r r a y != n u l l ) {
f o r (var i = 0; i < p l a y l i s t A r r a y . l e n g t h ; i+ + )
v a r l i = d o c u m e n t . c r e a t e E l e m e n t ("l i " ) ;
li.in n e rH T M L = p l a y l i s t A r r a y [ i ] ;
u l . a p p e n d C h ild (li);
Перенесите Beet? этот код
} ® файл playlist_store.js
}
}

f u n c t i o n g e t S a v e d S o n g s () {
return g e t S t o r e A r r a y (" p l a y l i s t " ) ;

fu n c tio n g etS toreA rray(k ey) {


var p la y lis tA r r a y = lo c a lS to r a g e . g e tlte m (k e y );
i f ( p l a y l i s t A r r a y == n u l l I I p l a y l i s t A r r a y == ") {
p l a y l i s t A r r a y = new A rr a y ( ) ;
}
else {
p l a y l i s t A r r a y = JSON. p a r s e ( p l a y l i s t A r r a y ) ;
}
return p la y lis tA r r a y ;

дальше ► 139
сохранение плейлиста

интегрирование приготовленного кода j^ o ip o B o

к употребл ение
Н ам необ ход им о в не сти нару неб о л ьш их и зм е н е н и й , ч т о б ы и н т е гр и ­
р о в а т ь к о д для с о х р а н е н и я н л е й л и с та . С на ча л а м ы д о б а в и м с с ы л ку
н а p l a y l i s t _ s t o r e . j s в э л е м е н т <head> в p l a y l i s t . h t m l :
Д об авьт е э т у с т р о к у , р а з -
< scr ip t s r c = " p la y lis t_ s to r e . j s " x / s c r i p t > / __ — ме с ти в ее прямо над ссылкой
„ П П у
< s c n p t s гс= " p l a y l i s t . j s " > < / s c r i p t >
^ на playlist.is.
л Она за груж а ет
приготовленный код.

Т е н е р ь н у ж н о д о б а в и ть две с т р о к и в у ж е и м е ю щ и й с я у вас ко д
в p l a y l i s t . j s , к о т о р ы е будут з а гр у ж а т ь и с о х р а н я т ь н л е й л и с т:

f u n c t i o n i n i t () {
v a r b u t t o n = d o c u m e n t . g e t E l e m e n t B y l d ( "addButton"
b u t t o n .o n c l ic k = h a n d leB u tto n C lic k ;
Д а н н а я с т р о к а загр уж а ет сохраненные
l o a d P l a y l i s t (); ^ __________
песни из localStorage, когда вы за груж ает е
} свою с т р а н и ц у , благодаря чем у они о т о ­
бразят ся на экране в п л е й л и с т е .
f u n c t i o n h a n d l e B u t t o n C l i c k () {
v a r t e x t l n p u t = d o c u m e n t . g e t E l e m e n t B y l d ( " s o n g T e x t l n p u t " );
v a r songName = t e x t l n p u t . v a l u e ;
var l i = docum ent. cr e a te E le m e n t (" l i " );
l i . innerHTML = songName;
var u l = docum ent. g e tE le m e n tB y ld (" l i s t " );
u l . a p p e n d C h i l d (l i ) А э т а ст р о к а сохр аняет каж­
save(son gN am e); дую новую п е с н ю , к о т о р у ю Мы добавили
вы добавляете в п л е й л и с т . все э т и п е с ­
ни, закры ли
окно б раузера,
зат ем сно­
ва о т к р ы л и
Тест-драйв сохраненного плейлиста его, з а г р у з и ­
° MfrbvUteTunes______ ли с т р а н и ц у ,
И т а к , п е р е з а гр у з и т е с т р а н и ц у и в в е д и те назва­ I * I I I M tpv/'lni ,|| 1ю'4/-КечhH«4ri Hr-.( HIMI Ч С
и перед нам и
н и я н е с к о л ь к и х н е се н . З а к р о й т е о к н о браузера. Song n a m e
( Add Sang-) предстал со­
С н о в а о т к р о й т е е го и о н я т ь з а гр у з и т е с т р а н и ­ Blue Suede Strings, by Elvis Pagely храненный
цу. П о с л е э т о го в ы д о л ж н ы у в и д е ть п л е й л и с т плейлист
Great Objecte on Fire, by Jarry JSON Lewis
со в се м и с в о и м и с о х р а н е н н ы м и н е с н я м и . с песнями.
I Code the Line, by Johnny JavaScript

З а м надоел в а Л л е й л и с т , и бы р е ш и ­ Tfiatll be the Data, b y B u d d y Bitly an d the V ariab les

ли у д а л и т ь его ? Тогда вам п р и д е т с я Your Random Heart, by Hank "Math” Williams

з а г л я н у т ь в гла ву , п освящ ен ную A P I -


и н т е р ф е й с у W eb Storage!

140 глава 3
события и обработчики

Классно! Мы действительно начали де­


лать так, чтобы код и веб-страница взаимо­
действовали друг с другом. Однако меня
заинтересовали функции, объекты и вещи
вроде element.appendChildQ. Нужно ли мне
знать еще что-то о них?

Подходящее время.

М ы с тр е м и л и с ь п р о д е м о н с т р и р о в а т ь вам н о д р о б ­
н ы й п р и м е р т о г о , к а к H T M L -р а зм е тка и J a v a S c rip t
в с о ч е т а н и и д р у г с д р у го м п о з в о л я ю т с о зд а в а ть
и н т е р а к т и в н ы е в е б -п р и л о ж е н и я . Е сли вдум аться,
м ы с ва м и у ж е м н о го е делали:

1) в ста в л я л и к о д на с тр а н и ц у ;

2) п о з н а к о м и л и с ь с с о б ы т и я м и c lic k , и н и ц и и р у е ­
м ы м и п р и щ е л ч ке н а к н о п к е , и н а н и с а л и к о д для
п е р е х в а та и о б р а б о т к и д а н н ы х с о б ы т и й ;

3) и з в л е ка л и и н ф о р м а ц и ю и з о б ъ е к т н о й м о д е л и
д о кум е н та ;

4 ) созд авали и д о б а в л я л и н о в ы е э л е м е н т ы в D O M .

Н е п л о х о ! А те н е р ь , к о гд а у вас с л о ж и л о с ь н е к о т о ­
р о е и н т у и т и в н о е нре д ста вле н ие о то м , к а к действу­
ет весь э т о т м е ха н и зм , давайте сделаем н е б о л ь ш о й
к р ю к н о а в е ню Ja va S crip t и н о с м о тр и м , к а к и м е н н о
р а б о т а ю т ф у н к ц и и и о б ъ е кты .

Н е т, э то н е будет за у р я д н а я н р о гу л к а , н о с к о л ь к у
м ы д а ж е за гл я н е м н о д к р ы ш к и л ю к о в н а д о р о ге
и ра зб е р е м ся в то м , к а к ф у н к ц и о н и р у е т В ебвилль.

З а и н те р е с о в а л и с ь ? Т огда п р и с о е д и н я й т е с ь к н а м
в главе 4...

дальше ► 141
обзор обработчиков событитй и dom

КЛЮЧЕВЫЕ
— МОМЕНТЫ

■ В браузере постоянно происходит масса со­ а затем добавить в качестве дочернего эле­
бытий. Если вы хотите обеспечить реакцию мента по отношению к другому элементу.
на эти события, то вам потребуется обраба­
Используйте d o c u m e n t . c r e a t e E l e m e n t
тывать их с помощью обработчиков событий.
для создания новых элементов. Передайте
■ Событие c l i c k инициируется при нажатии имя тега (например, " l i " ) в вызов функ­
кнопки на странице. ции, чтобы указать, какой элемент вы хотите
создать.
■ Для обработки событий c l i c k необходимо
зарегистрировать функцию, которая и займет­ Для добавления элемента в качестве дочер­
ся их обработкой. Для этого нужно сначала него по отношению к родительскому элементу
написать функцию, а затем присвоить ее имя в DOM необходимо извлечь ссылку на роди­
свойству КНОПКИ o n c l i c k . тельский элемент и вызвать в отношении него
ap pend C h ild , передав при этом дочерний
■ Если обработчик событий c l i c k зарегистри­
элемент, который требуется добавить.
рован, то данная функция будет вызываться,
когда пользователь щелкнет на кнопке с по­ При добавлении множественных дочерних
мощью мыши. элементов в родительский элемент с исполь­
зованием a p p e n d C h ild КЭЖДЫЙ НОВЫЙ ДО-
■ Для реагирования на события c l i c k не­
черний элемент будет добавляться после
обходимо написать соответствующий код
всех прочих уже имеющихся там дочерних
в функции обработчика. Можно выводить
элементов, в результате чего они окажутся
сообщения для пользователя в диалоговых
расположены позади или под дочерними
окнах a l e r t , обновлять страницу, а также
элементами, которые уже присутствовали на
выполнять другие действия.
странице (при условии, что вы не станете вно­
■ Для извлечения данных, введенных пользова­ сить изменения в макет посредством CSS).
телем в текстовое поле формы, необходимо
Вы можете использовать API-интерфейс Web
использовать свойство v a l u e поля ввода.
Storage ( l o c a l S t o r a g e ) ДЛЯ Сохранения
■ Если пользователь ничего не ввел в текстовое данных в браузере пользователя.
поле формы, значением данного поля будет
Мы применяли localStorage для сохранения
пустая строка ("").
плейлиста с песнями, используя при этом
■ Вы можете проводить сравнение переменной заранее приготовленный код. Подробнее
с пустой строкой при помощи оператора i f о l o c a l S t o r a g e вы узнаете в главе 9.
и ==.
В следующей главе мы еще больше расска­
■ Для добавления нового элемента в объектную жем о DOM и JavaScript-возможностях, таких
модель документа его сначала нужно создать, как функции и объекты.

142 глава 3
события и обработчики

Ц Щ 5 - К Г 0С СВ0Г Д

Д а й т е своем у м о з гу н е к о т о р о е в р е м я , ч т о б ы о н у с в о и л а с н е к т ы в за и м о ­
д е й с т в и я H T M L с J a v a S c rip t. П о р а з м ы с л и т е над те м , к а к о н и р а б о т а ю т
с о о б щ а . А н о к а в ы б удете д е л а ть э т о , р а з га д а й т е н р и в е д е н н ы й н и ж е
к р о с с в о р д для з а к р е н л е н и я м а те р и а л а . В се и с н о л ь з о в а н н ы е в н е м слова
в з я т ы и з д а н н о й гл авы .

По горизонтали По вертикали
2. Метод для создания новых элементов, внедряемых 1. Исполнитель, имя которого мы использовали в примере
в объектную модель документа (DOM). с песнями.
3. Метод для добавления новых элементов в DOM. 5. Код, который занимается обработкой событий_________ .
4. «Мать» дерева объектной модели документа. 6. В случае с кнопкой click — э т о ____________ ..
7. Объектная модель документа является чем-то вроде 7. Новый элемент добавляется в ка ч е с тв е ____________
родословного____________ . элемента.
8. Мы использовали его в заранее приготовленном коде, 10. Что мы будем рассматривать в следующей главе?
чтобы стало возможным сохранение плейлиста с пес­ Функции и ____________ .
нями.
9. В случае, если пользователь ничего не введет, значением
по умолчанию элемента ввода формы будет____________
строка.
11. Оно происходит, когда пользователь щелкает на кнопке.

дальше ► 143
решение упражнения

гр ш е н и е
решение ПОП

Здесь приведен плейлист, для которого вам необхо­


димо нарисовать объектную модель документа в том
виде, который он приобретет после добавления всех Blue Suede Strings, byElvis Pagely
этих песен. Обратите внимание на порядок, в котором
Great Objects on Fire, byJerry JSON Lewis
песни были добавлены на страницу, и разместите
соответствующие элементы на своих местах в DOM. I Code the Line, byJohnny JavaScript
Наше решение выглядит так. That'll be the Data, by Buddy Bitlyand the Variables

Your Random Heart, by Hank "Math" Williams


| document

С html

| head | body |
А вот остальная
часть POM

title | ul id= “playlist” ^

Blue Suede Strings, Your Random H e a rt, by


by Elvis Pagely Hank “Math" Williams

Great O bjects That'll be the Data, by


on Fire, by J e rry Buddy Bitly and the
J S O N Lewis Variables
I Code th e Line, by
Johnny JavaScript

Пришлось ли вам строить какие-либо предположения Д а , поскольку он влияет на п о ­


насчет порядка, в котором элементы < i i > добавляются рядок отображения песен
в родительский элемент? на странице; appendChild всегда
добавляет новый элемент после
дочернего элементаj который
уже т ам был до него.

144 глава 3
события и обработчики

Ц Щ § - к Г °с с Б о Г д . ^ ш е н и е

дальше ► 145
4 ^JJhkUuu и ойьетсщы jaVaScript

Серьезный JavaScript+

М ожете л и вы уже назвать себя создателем сценариев? Вполне


возможно, поскольку вы уже многое знаете о JavaScript, однако кто захочет
быть простым писателем сценариев, когда можно быть программистом? Пора
проявить серьезность и поднять планку, — настало время познакомиться
с функциями и объектами. Они являются ключом к написанию более эффек­
тивного, лучше организованного и легкого в сопровождении кода. Они также
активно используются наряду сАР1-интерфейсами HTML5 JavaScript, поэтому
чем лучше вы будете в них разбираться, тем быстрее сможете освоиться с тем
или иным новым API-интерфейсом и начать его использовать. Пристегнитесь,
поскольку эта глава потребует вашего всецелого внимания...
оценка своих сил

Расширяем ваш словарный запас


В ы у ж е м н о го е ум еете делать с н о м о щ ь ю Ja v a S c rip t. Д а в а й те в згл я н е м н а т о ,
ч т о вам у ж е н о силам :

Извлечение элемента из объект


ной модели документа (РОМ)

<script>
var guessInput = document.getElementByld(Mguess M);
С
var guess = guessInput.value;
Извлечение значения т е к­
var answer = null;
стового поля ввода формы.

Создание нового массива,


var answers = [ "red",
заполненного строками.
"green" ,
"blue"]; И спользование И звлечение т акого
Г библиот ек ф ункций. свойства м ассива,
V к а к len gth.
var index = Math.floor (Math, random() * answers.length);

^ ч Принятие решений на основе


if (guess = answers [index]) { результатов проверки условий.
answer = "You're right! I was thinking of " + answers[index];
} else { ^
answer = "Sorry, I was thinking of " + answers[index]; Использование
элементов
} массива.
alert(answer);
</script>

Использование браузерных
функций (например , alert).

О д нако н о ка м н о ги е ваш и зн а н и я явл яю тся неф орм альны м и. В ы , ко н е ч н о ,


зн а е те , к а к и з в л е ка т ь э л е м е н т ы и з о б ъ е к т н о й м о д е л и д о к у м е н т а ( D O M ), п р и ­
сва и ва ть н о в ы е з н а ч е н и я , н о е сли м ы н о н р о с и м вас о б ъ я с н и т ь , ч т о т а к о е
d o c u m e n t . g e t E l e m e n t B y ld в т е х н и ч е с к о м п л а н е , в е р о я т н о , у вас в о з н и к н у т
с эти м н е ко т о р ы е труд ности. Н о не с то и т б е сно ко иться , но ско л ьку к ко н ц у
гл а в ы в ы с м о ж е те без труда сделать э то .

А ч т о б ы вам э то д е й с т в и т е л ь н о удалось, м ы н е с та н е м н а ч и н а т ь с гл у б о к о го
ана л и за g e t E l e m e n t B y ld , а за й м е м ся ко е -ч е м более интересным: р а с ш и р и м ваш
с л о в а р н ы й занас в о б л а с ти J a v a S c rip t и н а у ч и м с я делать н о в ы е ве щ и .

148 глава 4
функции и объекты javascript

Как добавить свои собственные функции


Ранее мы с вами иснользовали встроенны е функции, нанример a l e r t или даж е Math, random, но вдруг
у вас возникнет необходим ость добавить свою собственную функцию? Донустим, мы захотели нанисать
код вроде следующего:
var guessInput = document.getElementByld("guess");
var guess = guess Input, value; *4^ ^ guess поль3о ват еля
т очно т а к же, как и на п р е д ы д у -
var answer = checkGuess (guess) ; щей странице...
al / a n e w p r\ • A\

^ --
ЖеА| з а м е н и т ь на и з я и ш ,, ^ д, основного кода , м ы м о -
смож ем вы зы ват ь и M m ^ J ^ deTa^m Cke° kQuess‘ ко^ о р у н >
*мо же самое.
Создание функции checkGuess
Q Для создания функции необходимо воспользоваться ключевым словом
function, после которого следует указать ИМЯ, например checkGuess.

Своей функции вы можете передавать


function checkGuess(guess) { ноль и более параметров. Используй­
var answers = [ "red" ,
те параметры для передачи значений
функции. Здесь нам требуется один
"green" ,
параметр: guess пользователя.
"blue"];

var index = Math, floor (Math, random () * answers.length);

if (guess == answers[index]) {
answer = "You're right! I was thinking of " + answers[index];
} else {
answer = "Sorry, I was thinking of " + answers[index];

}
return answer; ' *)
Задайте тело своей функции, которое
Опционально можно воз­ следует заключить в фигурные скобки.
вращать значение в качестве Тело содержит весь код, который обе­
результата вызова функции. спечивает выполнение работы функции.
Здесь мы возвращаем строку Здесь в теле мы повторно используем
с сообщением. код с предыдущей страницы.

дальше ► 149
как работают функции

Как работает функция


Т а к к а к ж е все э то р аб отает? Ч т о п р о и с х о д и т , к о гд а м ы действительно
вызываем ф у п кц и ю ? Д а в а й те в згл я п е м в о б щ и х ч е р т а х .

Итак, сначала нужно создать ф ункцию . function bark(dogName f dogWeight) {


if (dogWeight <= 10) {
Д о п усти м , м ы то л ько ч т о паписал и повую
ф у п к ц и ю b a r k , у к о т о р о й и м е е т с я два па р а м е ­ return dogName + " says Yip";
тр а : dogN am e и d o g W e i g h t , а т а к ж е весьм а за- } else {
п и м а т е л ь п ы й ф р а гм е п т ко д а , в о з в р а щ а ю щ и й return dogName + " says Woof";
к л и ч к у с о б а к и и т о , ч т о о п а лает, в за в и с и м о ­
}
с т и о т т о г о , к а к о й о п а и м е е т вес.

В о т н а ш а удобная
ф у н к ц и я bark.

Имя нашей Здесь мы переда­


Теперь давайте вызовем функцию ! функции ем два аргумента:
В ы у ж е зп а е те , к а к в ы зы в а т ь ф у п к ц и ю : п у ж п о кличку и вес.
п р о с т о в в е с ти ее и м я и п е р е д а ть е й все н е ­
о б х о д и м ы е а р гу м е п т ы . В д а п п о м случае п а м
bark("Fido", 50)
п о т р е б у е т с я п е р е д а ть два а р гу м е п та : с т р о к у
с к л и ч к о й с о б а к и и вес с о б а к и в вид е ц е л о го
чи сл а .

Д а в а й те в ы п о л п и м в ы зо в и п о с м о т р и м , к а к все
э то р а б о та е т:

При вы зо ве b a r k а р г у м е н т ы
function bark(dogName , dogWeight)
присваиваю т ся им енам п а ­
р а м е т р о в в ф у н к ц и и bark. if (dogWeight <= 10) {
return dogName + says Yip";
else {
return dogName + says Woof";
И каждый раз , когда
параметры встреча­
ются в функцииj будут
использоваться пере­
данные нами значения.

150 глава 4
функции и объекты javascript

А теперь давайте позволим телу ф унк­


ции сделать свою работу.
П осле то го ка к м ы п р и с в о и л и зпа чепие ка ж ­ function bark(dogName, dogWeight) {
д о го а р гу м е п та с о о тв е т с тв у ю щ е м у п а р а м е тр у if (dogWeight <= 10) {
в ф у п к ц и и (п а п р и м е р , "Fido" для dogN am e и
return dogName + " says Yip";
целое ч и с л о 50 для d o g W e i g h t ) , м ы г о т о в ы
п е р е х о д и т ь к о ц е п к е в се х о п е р а т о р о в в теле } else {
ф упкц ии . return dogName + " says Woof";

О п е р а то р ы о ц е пи в а ю тся сверху в п и з, к а к и }

л ю б о й д р у г о й к о д , к о т о р ы й в ы п и ш е т е . Раз-
п и ц а з а кл ю ч а е тс я в т о м , ч т о м ы будем делать
э то в среде, где и м е п а п а р а м е тр о в d ogN am e и Здесь мы оцениваем весь код
d o g W e i g h t п р и с в а и в а ю т с я а р гу м е п та м , п ере- в теле функции.
даппы м в ф упкц ию .

Помните, что функции необязательно должны


О пционально у нас могут иметься возвращать значения. Однако в данном случае
операторы return в теле ф ункции... функция bark возвращает значение.
А когда строка
... где м ы будем в о зв р а щ а ть з п а ч е п и е коду,
возвращается,
с о в е р ш и в ш е м у в ы зо в . Д а в а й те п о с м о т р и м ,
она присваива­
к а к э то р а б о та е т: Строка "Fido says Woof" ется переменной
возвращается вызывающе­ sound, которая
м у коду (то есть коду, вы­ затем переда­
К а к «кЗ ко « “„Л и ам '
звавшему функцию bark). ется alert, в р е ­
„ д „ не ровен
зультате чего
на экран выво­
дится диалоговое

function bark(dogName, dogWeight) {


"Fido says W o o f
ED окно с соот­
ветствующим
сообщением.
^ if (dogWeight <= 10) { У
var sound = bark("Fido " , 50);
( return dogName + " says Yip";
alert(sound);
} else {
V c return dogName + 11 says Woof" ;
h ttp ://lo c a lh o st
}
Fido

дальше ► 151
важность функций и объектов

Я неустанно твержу вам, что все


A P I-интерфейсы HTM L5 битком набиты
функциями, объектами и прочими продви­
нутыми JavaScript-возможностями...

Если бы у нас была лишняя минутка поговорить...


В ы дум али, ч т о в главе 4 будете а к т и в п о п о з п а в а т ь п о в о е
в H T M L 5 ? К о п е ч п о ж е , т а к и будет. О д п а к о п р е ж д е вам о б я ­
за те л ь н о п у ж п о р а зо б р а ть с я в т о м , ч т о и м е п п о я в л я е тс я
A P I-и п т е р ф е й с о в J a v a S c rip t в H T M L 5 , ч е м м ы и за й ­
м е м ся в д а п п о й главе.

Т а к ч т о ж е я в л я е тс я э т о й о с п о в о й ? С ч и т а й т е , ч т о A P I-
и п т е р ф е й с ы J a v a S c rip t в H T M L 5 с о с т о я т и з о б ъ е кт о в , м е­
т о д о в (т а к ж е п а зы в а е м ы х функциями) и с в о й с т в . Ч т о б ы
п о -п а с то я щ е м у овлад еть A P I-и п т е р ф е й с а м и J a v a S c rip t, вам
п е о б х о д и м о х о р о ш о р а зб и р а т ь с я в э т и х вещ ах. Е с те с тв е п -
п о , в ы м о ж е т е п о п ы т а т ь с я о б о й т и с ь и без з п а п и й о п и х , од­
п а к о в т а к о м случае п р и и с п о л ь з о в а п и и А Р 1 -и п те р ф е й с о в
вам п р и д е т с я п о с т о я п п о с т р о и т ь д о га д к и , ч т о п е п о з в о л и т
вам п о л п о с т ь ю за д е й с тв о в а ть и х п о т е п ц и а л (п е го в о р я уж е
о т о м , ч т о в ы будете с о в е р ш а ть м ассу о ш и б о к и п и с а т ь пе-
к а ч е с т в е п п ы й к о д ).

М ы р е ш и л и о б р а т и т ь ваш е в п и м а п и е п а д а п п ы е а с п е к т ы ,
ч т о б ы в ы зп а л и , ч т о вас о ж и д а е т в п е р е д и . С ам ое замеча-
те л ь п о е за к л ю ч а е тс я в т о м , ч т о к к о п ц у гл а в ы в ы будете
р а зб и р а т ь с я в о б ъ е кта х , ф у п к ц и я х , м е то д а х и массе п р о ч и х
с в я з а п п ы х с п и м и в е щ е й л уч ш е , ч е м п р и м е р п о 98 % л ю д е й ,
за н и м а ю щ и х с я п а п и с а п и е м с ц е п а р и е в . И э то п е ш у тка .

152 глава 4
функции и объекты javascript

« р у н к ц и ю
Интервью недели:
Вещи, о которых вы не знали

Head First: Д о б р о п о ж а л о в а ть , Ф у п к ц и я ! Н а д е ю сь, о п и исп о л ь зую т и х п о с то я п п о : a l e r t , docum ent.


с е го д п я В ы п ове д а е те п а м м п о го е о себе. g e tE le m e n tB y ld , M ath. random. О п и п р о с т о п е о п р е ­
д е л я ю т свои собственные ф у п к ц и и .
Function: Рада б ы т ь здесь.
Head First: Ч т о ж , в е р п о , в случае с a l e r t все п о п я т -
Head First: М ы за м е т и л и , ч т о в п а с то я щ е е в р е м я
п о , п о в о т д р у ги е две совсем п е п о х о ж и па ф у п кц и и .
м п о ги е п о в и ч к и в J a v a S c rip t п е с к л о п п ы с л и ш к о м
ч а с т о и с п о л ь з о в а т ь Вас. О п и п р о с т о п и ш у т с в о й Function: Э то ф у п к ц и и , в и д и т е л и ... п о с т о й т е -к а ,
ко д , с т р о к а за с т р о к о й , д в и га я с ь с в е р х у в п и з . П о ­ м и п у т о ч ку ...
ч е м у и м с то и л о б ы уделять В ам б о льш е в п и м а п и я ?
...М п е т о л ь к о ч т о с к а з а л и , ч т о ч и т а т е л и ещ е п е
Function: Д а , п е с к л о п п ы , и э то п р и с к о р б п о , п о ­ п о з п а к о м и л и с ь с э т и м и т и п а м и ф у п к ц и й , о д п а ко
с к о л ь ку я пе су в себе б о л ьш и е в о з м о ж п о с т и . Д у м а й ­ о п и сдел аю т э то ч е р е з п е с к о л ь к о с т р а п и ц . Т а к и л и
те о б о м п е т а к: я — т о , ч т о п о з в о л я е т вам п а п и с а т ь и п а ч е , след ует о т м е т и т ь , ч т о ф у п к ц и и и с п о л ь з у ­
к о д о д и п раз, а за те м п о в т о р п о и с п о л ь з о в а т ь е го . ю т с я повсю ду.

Head First: П р о с т и т е , ч т о с п р а ш и в а ю , п о е сли В ы Head First: И т а к , ф у п к ц и я в о зв р а щ а е т з п а ч е п и е ,


п р о с т о даете и м в о з м о ж п о с т ь делать о д п и и те ж е п равил ьпо? В связи с э ти м х о ч у с п р о с и ть : а ч т о ,
в е щ и с п о в а и спо ва ... э то ведь п е м п о г о с к у ч п о , п е е сли у м е п я п е т з п а ч е п и я , к о т о р о е я х о ч у верпуть?
т а к ли?
Function: М п о г и е ф у п к ц и и в о з в р а щ а ю т зп а ч е п и я ,
Function: Н е т-п е т, ф у п к ц и и я в л я ю т с я п а р а м е т р и ­ о д п а к о ф у п к ц и я во все п е о б я за те л ь п о д о л ж п а п о ­
з о в а н н ы м и . Д р у г и м и сл о в а м и , к а ж д ы й р а з, к о гд а с ту п а ть та к. Е сть п ем ало ф у п к ц и й , к о т о р ы е п р о с т о
в ы и с п о л ь зуе те ф у п к ц и ю , в ы м о ж е те п ередавать ей де л а ю т ч т о -то , п а п р и м е р о б п о в л я ю т о б ъ е к тн у ю м о­
а р гу м е п т ы , б л а го д а р я ч е м у ста п е те п о л у ч а т ь пазад дель д о ку м е п т а (D O M ) , п о с л е ч е го п е в о зв р а щ а ю т
резул ьта ты , к о т о р ы е будут о тл и ч а т ь с я д р у г о т д р уга п и к а к о г о з п а ч е п и я , и все п р е к р а с п о .
в з а в и с и м о с т и о т т о г о , ч т о в ы е й пе р е д а л и .
Head First: То есть в т а к и х ф у п к ц и я х о т с у т с т в у ю т
Head First: А п е л ь зя л и п р и в е с т и п р и м е р ? о пе р а то р ы return?

Function: Д о п у с т и м , в а м п е о б х о д и м о с о о б щ а т ь Function: Д а , и м е п п о та к.
пользователям сто и м о сть то ва р о в, ко то р ы е о п и
п о м е с ти л и в св о ю э л е к т р о п н у ю к о р з и н у в и п т е р п е т -
Head First: Ч т о ж , а к а к п а с ч е т п р и с в а и в а н и я и м е п
с в о и м ф у п кц и я м , а то м п е д о в о д ил о сь слы ш а ть, ч т о
м а га з и п е , п о э т о м у в ы р е ш и л и п а п и с а т ь ф у п к ц и ю
э то делать п е о б я за те л ь п о , е сли п е х о ч е т с я .
com puteShoppingC a r t T o t a l . Сделав э то , в ы с м о ж е ­
те п е р е д а в а ть ф у п к ц и и р а з л и ч п ы е э л е к т р о п п ы е Function : Д а в а й те п е будем и з л и ш п е п у га ть ауди то ­
к о р з и п ы , п р и н а д л е ж а щ и е р а з п ы м п о л ь зо в а те л я м , р и ю . Д а в а й те в е р п е м с я к э т о й тем е, ко гд а ч и т а т е л и
и к а ж д ы й ра з п о л у ч а т ь с о о тв е т с тв у ю щ е е з п а ч е п и е у з п а ю т о б о м п е п е м п о г о больш е?
сто и м о сти товаров в ко п к р е т п о й ко р зи п е .
Head First: О б е щ а е те м п е д ать э к с к л ю з и в п о е и п -
...К с т а т и , в о з в р а щ а я с ь к В а ш е м у з а м е ч а п и ю па-
те р в ь ю ?
счет то го , ч то п о в и ч к и пе о чепь часто использу­
ю т ф у п к ц и и ; п а с а м о м деле э то п е т а к , п о с к о л ь к у Function: М ы э то ещ е обсудим ...

дальше ► 153
параметры и аргументы

Не уверена, что понимаю разницу


между параметром и аргументом:
это случайно не одно и то же?

Нет, это разные понятия.


П р и о п р е д е л е н и и ф у н к ц и и в ы м о ж е т е определишь
ее с и с п о л ь з о в а н и е м о д н о го и л и более параметров.

Здесь мы определяем три


параметра: degrees, mode
и duration.

j
func t i o n coo k ( d e g r e e s , mode, duration) {
// здесь будет валя код

П р и в ы зо в е ф у н к ц и и в ы вызываете ее с и с п о л ь зо в а ­
н и е м аргументов:

\ т?
cook(425.0, "bake", 45);

Это аргументы. Здесь имеются три


аргумента: число с плавающей точкой
строковое значение и целое число.

cook(350.0, "broil", 10);

Т а к и м о б р а зо м , с в о и п а р а м е т р ы в ы будете о п р е д е л я ть
т о л ь к о о д и п р аз, а в ы зы в а т ь с в о и ф у п к ц и и ста п е те с и с ­
п о л ь з о в а н и е м м а ссы р а з п ы х а р гу м е н то в .
3 ас удивит, насколько много людей путается в том, где исполь­
зуются параметры, а где аргументы. 3 некоторых книгах даже
встречается неверное толкование, поэтому если вы где-то увидите,
^ что утверждается обратное, то будете знать, где правда...

Функцию определяют с использованием параметров,


а вызывают с использованием аргументов.
154 глава 4
функции и объекты javascript

Днапк>Мия «^нкДии

Т е п е р ь , ко гд а в ы зп а е те , к а к о п р е д е л я ть п в ы зы в а т ь ф у п к ц и и , давай те
уб е д и м ся , ч т о в ы х о р о ш о р а зб и р а е те с ь в с и п т а к с и с е . В о т к а к в ы гл я д я т
с о с та в п ы е ч а с т и а п а т о м и и ф у п к ц и и :
г Даже если у вашей ф унк-
Затем идут з а - ции нет параметров, вам
После ключевого слова ключенные в круглые по-прежнему необходимо
Вначале всегда function следует имя скобки и разделенные указать открывающую
должно идти ключе­ вашей функции. запятой параметры, и закрывающую скобки,
вое слово function. которых может быть
ноль и более.

к Тело функции заклю ­


чается в две фигурные
var bonus = level * score * .1; скобки и содержит
набор операторов
return score + b o n u s ; (точно так же, как
привычные для вас
операторы).

Функция может вклю ­ Оператор re tu rn включает


чать оператор с ключе­ выражение, которое возвра­
Это закрыва­
вым словом return, однако щается в качестве резуль­
ющая скобка
это вовсе не обязательно. тата вызова функции.
тела функции.

Часш°
зад аваем ы е .........
B o T L j= > o tb l

Почему перед именами параметров ] ) • Я передаю переменную своей функ­ Смогу ли я изм енять значен и я
не ставится var? Параметр — это же но­ ции; если я изменю значение соответ­ в функции?
вая переменная, ведь так? ствующего параметра в моей функции,
то приведет ли это также к изменению
0 : Вы сможете изменять только значения
0 : Да, так и есть. Функция сделает за вас моей исходной переменной?
глобальных переменных (они определяются
всю работу по созданию экземпляра пере­
вне функций) или переменных, которые вы
менной, поэтому вам не нужно указывать 0 : Нет. Когда вы передаете примитивное явно определили в своей функции. Вскоре
ключевое слово v a r перед именами своих значение, оно копируется в параметр. Мы
мы чуть подробнее затронем эту тему.
параметров. называем это «передача по значению».
Таким образом, если вы измените значение
^ 3 * Каковы правила присваивания имен параметра в теле своей функции, то это Котсутствует
- - оператор
— , *return?
™ . -
функциям? никак не повлияет на оригинальное значе­
ние вашего аргумента. Исключением здесь
0 : Они аналогичны правилам присваива­ является передача массива или объекта, но 0 : Функция без оператора r e t u r n воз­
ния имен переменным. об этом мы поговорим чуть позже. вращает значение u n d e f in e d .

дальше ► 155
упражнение

^озьлли в руку карандаш_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _


Воспользуйтесь своими знаниями о функциях и передаче аргументов параметрам для оцен­
ки приведенного ниже кода. Сделав это, напишите внизу, какое значение будет иметь каждая
из переменных. Проверьте свои ответы, посмотрев решение этого задания в конце главы,
прежде чем двинетесь дальше.

function dogsAge(age) {
return age * 7;
}

var myDogsAge = dogsAge (4) ;

function rectangleArea(width, height) {


var area = width * height;
return area;
}

var rectArea = rectangleArea(3, 4);

function addUp(numArray) {
var total = 0;
for (var i = 0; i < numArray.length; i++) {
total += numArray[i];
}
return total;
}

var theTotal = addUp([1, 5, 3, 9]);

function getAvatar(points) {
var avatar;
Напишите
здесь, какое
if (points < 100) {
значение б у ­
avatar = "Mouse"; дет и м ет ь
} else if (points > 100 && points < 1000) { каждая из
avatar = "Cat";
} else {
avatar = "Ape";
С
myDogsAge = .............
}
rectArea = .............
return avatar;
} theTotal = .............
var myAvatar = getAvatar(335); myAvatar = .............

156 глава 4
функции и объекты javascript

Налл нужно поговорить о некото­


рых особенностях использова­
ния переменных...

Локальные и глобальные переменные


НуЖно знать разницу меЖду ними

В ы у ж е зп а е те , ч т о м о ж е т е о б ъ я в л я ть п е р е м е п п ы е с и с п о л ь зо в а ­
н и е м к л ю ч е в о го слова v a r и и м е п и где у го д п о в св о е м J a v a S c rip t-
Еслииеремеииая
ко д е :

var avatar;
Это гл о б а л ь н ы е п е р е м е н н ы е j
\ С ~ они п о в с е м е с т н о д о с т у п н ы
объявлена
var levelThreshold = 1000; в в а ш е м J a v a S c r i p t -коде.
внефункции,
В ам т а к ж е и з в е с т п о , ч т о п е р е м е п п ы е
м о ж п о о б ъ я в л я ть и в п у т р и ф у п к ц и и : тооиаявляется
function getScore(points)
var score; ^
{
Переменные points>
score и i объявляются ГЛОБАЛЬНОЙ.
внутри функции.

for (var i = 0; i < levelThreshold; i++) {


Еслиже
}
//code here
Мы называем их локальны­
ми переменными, потому
иеремеииая
return score;
что они доступны только
локально в самой функции.
объявленавнутри
Даже если мы используем levelThreshold внутри
функцииj она будет глобальной переменной, п о ­
функции, тооиа—
скольку объявлена вне функции.
ЛОКАЛЬНАЯ
О д п а к о к а к о е все э то и м е е т зп а ч е п и е ? П е р е м е п п ы е есть п е р е ­
м е п п ы е , п е т а к ли? Ч т о ж , о т т о г о , гд ^ в ы о б ъ яв л яе те с в о и п е р е ­
м е п п ы е , за в и с и т, насколько о п и будут видимы для о с т а л ь п о й ч а с т и
ва ш е го код а. А п о п и м а п и е т о г о , к а к р а б о т а ю т две э т и р а зп о в и д -
п о с т и п е р е м е п п ы х , в п о с л е д с т в и и п о м о ж е т вам п и с а т ь более л е г­
к и й в с о п р о в о ж д е п и и к о д (п е г о в о р я у ж е о т о м , ч т о э то п о м о ж е т
вам р а з о б р а ть с я в ко д е , п а п и с а п п о м д р у ги м и л ю д ь м и ).

дальше ► 157
локальная и глобальная область видимости

Понятие области видимости локальных и глобальных переменных


От т о г о , где вы определяете своп перемеппые, будет зависеть их область видимости', то есть
там, где перемеппые определепы и пе определепы, опи соответствеппо будут видимы и пе-
видимы для вашего кода. Давайте взгляпем па пример, где присутствуют перемеппые как с
локальпой, так и с глобальпой областью видимости. Помпите, что перемеппые, которые вы
определяете впе фупкции, будут обладать глобальпой областью видимости, а перемеппые,
определяемые впутри фупкции, —локальпой областью видимости.
Э т и ч е т ы р е п ер ем енны е обла даю т г л о ­
бальной о б ла с т ь ю в и д и м о с т и , т о ест ь
они определены и видимы во всем п р и в е ­
var avatar = "generic"; денном ниже коде.
var skill = 1.0; С ледует о т м е т и т ь , ч т о если вы у к а ­
var pointsPerLevel = 1000; жете ссылки на д о п олни т ель ны е с ц е ­
var userPoints = 2008; нарии в своей с т р а н и ц е , т о они тоже
с м о г у т у в и д е т ь глобальные перем енны е!

function getAvatar(points) { Переменная level здесь я вля ет с я л о к а л ь -


var level = points / pointsPerLevel;\ 4 - ной и видимой т о ль к о для кода в н у т р и
ф ун кц и и g e tA v a ta r. Это о з н а ч а е т , чт о
т о ль к о данная ф у нкци я см ож ет п о л у ­
if (level = o) ( \ \ ч и т ь д о с т у п к пер ем е н н о й level.
return "Teddy bear"; \
Не будем забы ват ь о п а р а м е т р е p o in ts ,
} else if (level == 1) {
к о т оры й также обладает лок а ль
return "Cat"; \ ной о б ла с т ь ю ви д и м о с т и в ф у нкции
} else if (level > =2 ) { g e tA v a ta r.
return "Gorilla"; О б р а т и т е в н и м а н и е , чт о в случае
с g e t A v a t a r также и с п о л ь з у е т с я г л о ­
бальная пер ем е н н а я p o in ts ? e rL e v e i

8 u p d a te P o in ts у нас и м е е т с я л о к а л ь ­
function updatePoints(bonus , newPoints) ная п ер е м е н н а я L Д а н н а я п ер е м е н н а я
for (var i = 0; i < bonus; i++) { видима для всего кода в updatePoints.
newPoints += skill * bonus; bonus и n e w P o in ts также я в л я ­
} ю т с я л о к а ль н ы м и по о т н о ш е ­
return newPoints + userPoints; нию к u p d a te P o in ts , в т о вр е м я как
userPoints я вля е т с я глобальной п е р е ­
менной.

userPoints = updatePoints(2, 100) А здесь в коде м ы мож ем и с п о л ь з о в а т ь


т о л ь к о глобальные п е р е м е н н ы е , пр и
avatar = getAvatar(2112);
э т о м у нас н е т д о с т у п а к к а к и м - л и б о
п е р е м е н н ы м в н у т р и ф у н к ц и й , поскольк у
они невидимы в глобальной области.

158 глава 4
функции и объекты javascript

Готов поклясться,
что переменная была прямо
у меня за спиной, но когда
я обернулся, она уже исчезла.

Недолгая Жизнь переменных


Е сли вы — и е р е м е и и а я , т о вам п р и х о д и т с я пе-
л е гк о и ваш а ж и з п ь м о ж е т о ка за т ь с я к о р о т к о й .
Т а к и будет, е сли в ы , к о п е ч п о , п е я в л я е те сь гл о ­
б а л ь п о й п е р е м е п п о й , х о т я д а ж е в случае с п и м и
п р о д о л ж и т е л ь н о с т ь ж и з п и о гр а п и ч е п а . Н о ч т о
о п р е д е л я е т д л и т е л ь н о с т ь с у щ е с тв о в а н и я п е р е ­
м е п п о й ? Д е л о о б с т о и т сл е д у ю щ и м о б р а зо м :

Глобальные переменные существуют столько


же, сколько и соответствующая веб-страница.
Ж и з п ь гл о б а л ь п о й п е р е м е п п о й п а ч и п а е т с я ,
ко гд а ее J a v a S c rip t з а гр у ж а е тс я в стр а п и ц у . О д ­
п а к о ж и з п ь в а ш е й гл о б а л ь п о й п е р е м е п п о й за­
к о н ч и т с я , к а к т о л ь к о п о л ь зо в а те л ь п о к и п е т
ве б -стра п иц у. Д а ж е е сли о п п е р е з а гр у з и т ту ж е
сам ую стр а п и ц у , все в а ш и гл о б а л ь п ы е п е р е м е п ­
п ы е будут у п и ч т о ж е п ы , а за те м в о с с о зд а п ы в за­
по во за гр у ж е п п о й страпиц е.

Локальные переменные обычно исчезают по за­


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

Т а к ч т о ж е , п о л у ч а е тс я , «сбеж ать» о т с т р а п и ц ы
п и к а к Н Е Л Ь З Я ? Е сл и в ы — л о ка л ь п а я п е р е м е п -
п а я, т о ваш а ж и з п ь п р о л е т а е т б ы с т р о . Н о если
Присоединяйтесь к нам в главе,
вам п о в е зл о р о д и т ь с я гл о б а л ь п о й п е р е м е п п о й ,
т о в ы будете зд р а в с тв о в а ть , п о к а п о л ь зо в а те л ь посвященной A P I -инт ерф ейсу Web
п е п е р е з а гр у з и т с т р а п и ц у в б раузере. Storage, где мы помож ем ваш им
_ данным избежать «уж асаю щ их»
О д п а к о в с е -та ки должен с у щ е ств о в а ть с п о с о б
для н и х последствий перезагрузки
«сбежать» о т с т р а п и ц ы ! М ы м о ж е м е го п а й т и !
веб-странии,ы!
К а к в ы считаете?

дальше ► 159
переменные в тени

Интересно, что
будет, если я присвою
локальной переменной то же
имя, которое имеет уже суще­
ствующая глобальная пере­
ев V менная?

Помещаем «в тень» глобальную переменную.


В о т ч т о м ы и м е е м в виду. Д о п у с т и м , у вас е сть гл обал ь­
н а я п е р е м е н н а я b e a n C o u n t e r и в ы о б ъ яв л яе те ф у п к ­
ц и ю , к а к п о к а з а н о далее:

var beanCounter = 1 0 ;
Здесь у нас
имеются
function getNumberOf Items (ordertype) { и глобальная
var beanCounter = 0; Чг и локальная
if (ordertype == "order”) { переменные!
/ / сделать что-то с помощью beanCounter...
}
return beanCounter;
}

К о гд а в ы сделаете э т о , л ю б ы е с с ы л к и п а b e a n C o u n t e r
в н у т р и ф у н к ц и и будут в е с т и к л о к а л ь п о й п е р е м е п п о й ,
а не к гл о б а л ь н о й . Т а к и м о б р а зо м , м ы го в о р и м , ч т о гл о ­
бальная п е р е м е н н а я будет п а х о д и т ь с я «в те п и » л о ка л ь ­
н о й п е р е м е н н о й (д р у ги м и сл о в а м и , м ы п е с м о ж е м ее
ув и д е ть , п о с к о л ь к у па м п о м е ш а е т э то сделать л о ка л ь п а я
п е р е м е п п а я ).

б е д у е т от метит ь , что ло -
кальная и глобальная переменные
не влияют друг на друга: если и з ­
менить одну из них , то это никак
не скажется на другой. Они явля­
ются независимыми переменными.

160 глава 4
функции и объекты javascript
Част°

ЧаДаВаеМые
В опросы

создаете глобальную переменную. Следует отметить, что мы не


При отслеживании области видимости всех этих локаль­ рекомендуем прибегать к такой практике кодирования; не только
ных и глобальных перемеренных можно запутаться, так почему потому, что она потенциально способна сделать ваш код неудобо­
же не использовать только глобальные переменные? Я именно читаемым, но и потому, что, как считают некоторые люди, данное
так всегда и поступаю. поведение может однажды измениться в реализациях JavaScript
(что, возможно, приведет к нарушению вашего кода).
0 : Если вы пишете код, который является сложным или будет
нуждаться в длительном сопровождении, то нужно внимательно Нужно ли мне определять функцию, прежде чем исполь­
следить за тем, как вы распоряжаетесь своими переменными. Если зовать ее, и может ли объявление функции появиться где
вы слишком рьяно будете создавать глобальные переменные, угодно в моем сценарии?
вам станет сложно уследить за тем, где они используются (и где
вы вносите изменения в значения своих переменных), что может
0 : Объявления функций могут появляться где угодно в вашем
привести к написанию некачественного кода. Все это окажется
сценарии. Если захотите, вы можете объявить функцию ниже, там,
даже еще более важным, если вы будете писать код совместно с
где будете использовать ее. Это можно делать, поскольку когда вы
коллегами или станете использовать сторонние библиотеки (даже
загружаете свою страницу в первый раз, браузер производит разбор
если они окажутся грамотно написанными, то все равно должны
всего JavaScript, имеющегося на странице (или располагающегося
быть структурированы во избежание проблем).
во внешнем файле), и видит объявление функции до того, как
Таким образом, глобальные переменные следует использовать там, начнет выполнение кода. Вы также можете размещать объявления
где это имеет смысл, но при этом необходимо проявлять умерен­ глобальных переменных в любой части своего сценария, однако
ность, и всякий раз, когда предоставляется возможность, делать мы рекомендуем объявлять все свои глобальные переменные
свои переменные локальными. По мере увеличения опыта работы в верхней части файлов, чтобы их легче было отыскать.
с JavaScript вы будете узнавать дополнительные методики структу­
При использовании более одного внешнего JavaScript-файла
рирования кода, чтобы он оказался более легким в сопровождении.
следует учитывать, что при наличии двух функций с одинаковым
именем в разных файлах будет использоваться та, которую браузер
К — ............. ................................... увидит последней.
однако я загружаю еще и дополнительные JavaScript-файлы.
Эти файлы будут видеть отдельны е наборы глобальных
Кажется, что все жалуются на чрезмерное использование
переменных?
глобальных переменных в JavaScript. Почему так происходит?
Язык JavaScript был не слишком удачно спроектирован, или же
0 : Поскольку существует только одна глобальная область види­ люди не знают, что делают, или причина в чем-то еще? И как
мости, каждый файл, который вы загружаете, будет видеть один нам быть в данной ситуации?
и тот же набор переменных (и генерировать глобальные перемен­
ные в одном и том же пространстве). Вот почему так важно быть
0 : Глобальные переменные часто с излишком используются
внимательным при использовании переменных — это позволит
в JavaScript. Отчасти причина этого заключается в том, что язык
избежать конфликтов (кроме того, необходимо стараться снизить
JavaScript позволяет легко освоиться и начать писать код, и это
количество или вообще убрать глобальные переменные, если это
хорошо, поскольку JavaScript не навязывает вам массу всяких
представляется возможным).
структур и прочей нагрузки. Недостатки начнут проявляться при
написании серьезного кода, который будет претерпевать измене­
^ 3 * Мне доводилось видеть код, в котором не используется ния и нуждаться в сопровождении в течение длительного времени
ключевое слово var при присваивании значения имени новой (что в большой степени характеризует все веб-страницы). Следует
переменной. Как такое возможно? отметить, что JavaScript является мощным языком и включает
различные возможности, например объекты, которые вы можете
0 : Да, так можно поступать; когда вы присваиваете значение использовать для организации своего кода модульным образом.
имени переменной, которая ранее не была объявлена, она будет На эту тему написано много книг, а «попробовать на вкус» объекты
рассматриваться как новая глобальная переменная. Поэтому вы сможете во второй части этой главы (до нее осталось всего
будьте осторожны, если делаете это внутри функции, в которой несколько страниц).

дальше ► 161
функции как значения

Функции еще являются и значениями


И т а к , м ы с ва м и и с п о л ь зо в а л и п е р е м е п п ы е для р а зм е щ е п и я ч и с л о в ы х и л о г и ч е с к и х
з п а ч е п и й , с т р о к , м а сси в о в и в с е го п р о ч е г о , п о у п о м я п у л и л и м ы о т о м , ч т о в ы т а к ж е
м о ж е т е п р и с в а и в а т ь ф у п к ц и ю п е р е м е п п о й ? В з гл я п и т е п а с л е д у ю щ и й п р и м е р :

Определим простую функцию, которая


function addOne(num) 1 ^ прибавляет 1 к своему аргументу.
return num + 1;
Теперь сделаем кое-что новенькое. Мы воспользу-
}
емся именем функции addOne и присвоим addOne
Г новой переменной plusOne.
var plusOne = addOne;
Обратите внимание , что мы не вызываем
функцию посредством addOneQ, а просто
указываем имя функции.
var result = plusOne(l);

ч
После выполнения
plusOne присваивается функции , поэтому
мы сможем вызывать ее с использованием
Целочисленного аргумента в виде г
данного вызова result
будет равен 2.

Ч т о ж е , р а п е е м ы п е т о л ь к о за б ы л и у п о м я п у т ь об э т о й п е б о л ы н о й де та л и , к а с а ю щ е й ­
ся ф у п к ц и й , п о т а к ж е п е со все м б ы л и ч е с т п ы , к о гд а р а с с ка зы в а л и вам об а п а т о м и и
ф у п к ц и и , — о ка зы в а е тс я , вам даж е п е п у ж п о п р и с в а и в а т ь и м я с в о е й ф у п к ц и и . Все
в е р п о : ваш а ф у п к ц и я м о ж е т б ы ть анонимной. Ч т о ж е все э то з п а ч и т и за ч е м вам м о ­
ж е т п о т р е б о в а т ь с я п о с т у п и т ь так? Д а в а й те сп а ча л а п о с м о т р и м , к а к созд ать ф у п к ц и ю
без и м е п и :

Здесь мы создаем функцию , не указывая при этом


function (num) { ^ имени... Хм... Но как же мы тогда сможем сделать
что-нибудь при помощи нее?
return num + 1;
Давайте сделаем это снова и на этот
r ~ раз присвоим ее переменной.

var f = f u n c t io n (n u m ) {
r e t u r n num + 1 ; А затем мы сможем
•» ^ использовать нашу
* L переменную_ для
. - вызова
п .-.~

v a r r e s u lt = f (1);
функции
a le r t(r e s u lt); ^

После выполнения данного


вызова result будет равен 2.

162 глава 4
функции и объекты javascript

М 9 *Г 9 ? 9 Й
Ш ТУРМ Все это должно быть
для вас немного более
Взгляните на данный код: как вы думаете, что он делает? понятным, учит ы ­
вая то, что мы сейчас
var element = document.getElementByld ("button" ) ; с вами рассмотрели...
element.onclick = function () {
alert("clicked!"); к Не беспокойтесь, если вы так и не с м о -
} жете на ZOO % во всем здесь разобраться,
поскольку мы еще дойдем до этого...

Что моЖно сделать посредством функций как значений?


Т а к в ч е м ж е здесь в а ж п о с ть ? В ч е м польза? В а ж п о с т ь з а к л ю ч а е тс я п е с т о л ь к о в т о м , ч т о м ы м о ж е м п р и ­
сва и ва ть ф у п к ц и ю п е р е м е п п о й , с к о л ь к о в т о м , ч т о э то п а ш с п о с о б п о ка з а т ь вам, ч т о ф у п к ц и я действи­
тельно является значением. А в ы у ж е зп а е те , ч т о м о ж е т е с о х р а п я т ь з п а ч е п и я в п е р е м е п п ы х и л и м а сси ва х,
пер е д а ва ть и х в ка ч е с т в е а р гу м е п т о в ф у п к ц и я м и л и , к а к м ы в с к о р е у в и д и м , п р и с в а и в а т ь и х с в о й с т в а м
о б ъ е кт о в . О д п а к о в м е с то т о г о , ч т о б ы р а с с ка зы в а т ь ва м о п о л е з п о с т и а п о п и м п ы х ф у п к ц и й , п р о с т о
в згл я п е м п а о д и п и з м п о ж е с т в а л ю б о п ы т п ы х с п о с о б о в и с п о л ь з о в а н и я ф у п к ц и й к а к з п а ч е п и й :

Вот простая функция init


function init() {
Здесь мы присваиваем определенную нами
alert("you rule!") \load.
функцию обработчику событии onl,
}
window.onload = init; Посмотрите-ка, мы уже исполь­
зовали функции как значения!

Л и б о м ы м о ж е м п о с т у п и т ь ещ е и п т е р е с п е е :
ству window.onload.
Не беспокойтесь, если
window.onload = function() {
window.onload кажется
alert("you rule!"); вам несколько непонятным,
} ^ Красота! Разве это поскольку позже мы под-
не проще и удобнее < Q Q н ш поговорим,
для чтения?

К а к в ы уж е п а ч а л и п о п и м а т ь , ф у п к ц и и п о з в о л я ю т делать к о е -ч т о п о л е зп о е п о м и м о п р о с т о й « у п а ко в ки »
ко д а для п о в т о р п о г о и с п о л ь з о в а п и я . Ч т о б ы л у ч ш е р а з о б р а ть с я в т о м , к а к п о л п о с т ь ю за д е й с тв о в а ть все
п р е и м у щ е с тв а ф у п к ц и й , д а в а й те в згл я п е м п а о б ъ е к т ы и п о с м о т р и м , к а к о п и в п и с ы в а ю т с я в J a v a S crip t,
п о с л е ч е го о б ъ е д и п и м и х в е д и п ы й м е х а п и зм .

дальше ► 163
зажигательная речь

Эй, авторы! Еще раз привет!


Я девушка, которая купила вашу кни­
гу о программировании на HTM L5,
помните меня? Какое все это имеет
отношение к HTML5?

Мы полагали, что уже ответили на этот


вопрос... н о если вам к а ж е т с я , будто м ы
п о д о б р а л и вас и у ж е п о л д о р о г и п р о в е з л и
о к о л ь н ы м и п у т я м и п о го р о д у с в к л ю ч е н н ы м
с ч е т ч и к о м (в то в р е м я к а к м о гл и бы п о п р я ­
м о й о т в е з т и в ц е н т р го р о д а ), ч т о ж , то гд а
в с п о м н и т е о то м , ч т о в следующей главе м ы со­
б и р а е м с я н а ч а ть и з у ч е н и е A P I-и н т е р ф е й с о в ,
р а б о т а ю щ и х с H T M L 5 . А ч т о б ы сделать э то ,
вам п о т р е б у е т с я действительно хорошо разби­
раться, в ф у н к ц и я х , о б ъ е к т а х и п р о ч и х свя-
з а п п ы х с н и м и а с п е кта х .

Так ч то п о те р п и те — ф а кти ч е с ки , вы уж е
п р о ш л и п о л о в и н у п у т и ! И не за б ы в а й те , ч т о
в д а п н о й главе в ы п р е в р а т и т е с ь и з п и с а те л я
с ц е п а р и е в в п р о гр а м м и с т а , и з H T M L /C S S -
п а е з д н и к а в т о г о , к т о с п о с о б е н создавать
с е р ь е зн ы е п р и л о ж е н и я .

L А мы уже упоминали о т о м ,
что все это также может
позволить вам заработать
намного больше денег?

164 глава 4
функции и объекты javascript

Благодаря объектам N
будущие перспективы выглядят
настолько яркими, что нам действи­
тельно НЕ ОБОЙТИСЬ без солнцеза­
щитных очков...

Kmo-mo сказал «объекты»?!


О , э то н а ш а л ю б и м а я те м а ! О б ъ е к т ы н е р е н е с у т в а ш и н а в ы к и
в J a v a S c rip t-н р о гр а м м и р о в а н и и н а с л е д у ю щ и й у р о в е н ь — о н и вы -
с т у н а ю т к л ю ч о м к у н р а в л е н и ю с л о ж н ы м к о д о м , к н о н и м а н и ю об ъ ­
е к т н о й м о д е л и д о ку м е н т а (D O M ) , к о р га н и з а ц и и в а ш и х д а н н ы х и
да ж е я в л я ю т с я о с н о в н ы м с н о с о б о м « у н а ко в ки » A P I-и н т е р ф е й с о в
J a v a S c rip t в H T M L 5 (д а н н ы й с н и с о к м о ж н о н р о д о л ж а т ь !). С у ч е ­
т о м э т о го вам н о ка з а л о с ь , ч т о о б ъ е к т ы — с л о ж н а я тем а, н е т а к ли?
Х а ! М ы с в а м и н р о с т о б р о с и м с я сл о м я го л о в у в н е р е д и не за м е д л и ­
те л ь н о н е р е й д е м к и х и с н о л ь з о в а н и ю .

Раскроем вам секрет JavaScript-объектов: о н и н р е д с т а в л я ю т с о б о й все­


го л и ш ь к о л л е к ц и и с в о й с т в . Д а в а й те в ка ч е с т в е н р и м е р а в о зьм е м ,
с ка ж е м , собаку. С о б а ка обладает р я д о м с в о й с т в :

У большинства собак есть


клички (пате), как , например ,
идо (Fido) в данном случае.

£ -------- Каждая собака имеет


определенный вес (weight).

У всех собак есть набор люби­


мых занятий , например гулять
(walks) и приносить обратно
брошенный мячик (fetching balls). И относится к определен­
ной породе. В данном случае
К -
у фидо (Fido) смешанная
(mixed) порода (breed).
Собака (dog)

дальше ► 165
объекты и свойства

Размышления о свойствах...
Е с те с тв е н н о , н а ш не с F id o , е сли б ы м о г го в о р и т ь , сразу ж е о т м е т и л б ы , ч т о у н е го
и м е е т с я н а м н о го б о льш е с в о й с т в , ч е м м ы н е р е ч и с л и л и в ы ш е , о д н а ко в д а н н о м
н р и м е р е и м е н н о и х м ы и о т р а з и м в н р о г р а м м н о м ко д е . Д а в а й те в згл я н е м н а э т и
с в о й с т в а с т о ч к и з р е н и я т и н о в д а н н ы х Ja v a S c rip t:

Набор свойств Строки, представля­


ющие кличку и породу
нашей собаки.
name: "Fido"

К а к вы догадались, у нас weight: 40 <; 3 качестве значения


будет объект, пред­ веса у нас будет
ставляющий собаку. целое число.
breed: "M ixed"

loves: ["walks”, "fetching balls”]

8 массиве строк мы собираем значения


свойства loves объекта dog, при этом
значений может быть ноль и больше;
здесь у нас два значения, которые олице­
творяют любимые занятия Fido.
Как создать объект на JavaScript?
И т а к , у нас е сть о б ъ е к т с р я д о м с в о й с т в . А к а к о н со зд а е тся
с и с п о л ь з о в а н и е м JavaS cript? В о т к а к :
Обратите внимание,
Начинаться объект должен
Мы присвоим наш объ- ^ отКрывающейся фигурной скоб- что каждое свойство
ект переменной fido. ^ после которой следуют все отделяется запятой.
свойства, находящиеся внутри. НЕ точкой с запятой!

var fido = { Нам объект обладает четырьмя свой­


ствами : name, weight, breed и loves.
паше: 11Fido11,
weight: 40,
Обратите внимание, что значение
breed: "Mixed11, weight является числом ( 40 ), а зна­
чения breed и пате — строками.
loves: ["walks11 "fetching balls"]

И конечно же, у нас имеется массив для р а з ­


мещения значений свойства loves объекта dog.

166 глава 4
функции и объекты javascript

моЖно сделать с объектами


Обращение к свойствам объекта с помощью «точечной» нотации:

h ------------ И с п о л ь з у й т е т о ч ку (.)
if (fido.weight > 25)
alert ("WOOF") ;
И спользуйт е объект н а ­
I
ряду с т очко й и и м е н е м £ id o .w e ig h t ^
} else { свойст ва для п о л у ч е ­ ... а в о т и м я
ния д о с т у п а к значению В о т объект.. свойства.
alert ("yip") ;
эт ого свойства.
}

На э т о т р а з з а к л ю ­
Обращение к свойствам с использованием строки
ч и т е и м я свойст ва
и скобочной нотации: в квадрат ны е скобки.

var breed = fido ["breed" ] , И спользуйт е объ­


f id o [ " w e ig h t" ]
if (breed == "mixed")
alert("Best in show");
{ е к т наряду с и м е н е м
с в о й с т в а , за к л ю ч е н н ы м С t
В о т о б ъ е к т ............. а в о т и м я
в кавы чкиj и к в а д р а т ­
ные скобки для п о л у ­ свойст ва в к а ­
чения дос т у п а к з н а ч е ­ вычках.
нию эт ого свойства. Мы с ч и т а е м , чт о
Изменение значения свойства: т очечная нот а ц и я
более у д о б о ч и т а е м а ,
Mw и зм ен я ем значение свойст ва
чем скобочная.
fido.weight = 27; ^ w e ig h t об ъ е кт а fido...
fido.breed = "Chawalla/Great Dane mix"; ■■■ Значение его свойст ва breed...
fido. loves, push ("chewing bones") ; <£__ ••• и добавляем новый э л е м е н т в его
А м ассив loves.
^ push п р о с т о добавляет новый
э л е м е н т в конец массива.
^ — « П ер ечи сли т ь» означает п р о й -
ТТеречиспение всех свойств объекта: т и с ь по в с е м с в о й с т в а м о б ъ е к т а

Д л я перечи слени я свойст в мы и с п о л ь з у е м ц икл for in


var prop;
^ --------------------------------- При каждом вы полнении цикла
for (prop in fido) { ^
п е р е м е н н а я p rop п о л у ч а е т с т р о ­
alert ("Fido has a " + prop + property "); ковое значение следую щ его по
if (prop == "name") { очереди им ени свойства.
alert("This is " + fido[prop]);
Мы и с п о л ь з у е м скобочную н о т а ц и ю
^ О б р а т и т е в н и м а н и е '. п о р я д о к с в о й с т в для по луч ения д о с т у п а к значению
} п р о и з в о л ь н ы й , т а к ч т о не с т о и т с о о т в е т с т в у ю щ е г о свойства.
р а с с ч и т ы в а т ь на к а к у ю - т о о п р е д е ­
ленную последоват ельност ь.

дальше ► 167
что могут объекты

Q Действия в отношении массива объекта:


4 Здесь мы п р и с ва ива ем значение м ассива
var likes = fido.loves; loves о б ъ е кт а fido п е р ем енно й likes.
var likesString = "Fido likes";

for (var i = 0; i < likes.ltr^th; ± + + ) ^ 4 М О Ж е М вы п о л н и т ь цикл в о т -


ношении массива likes и создат ь
^ likesString += •• - + likes [i] ; ^ gcey л ю 6иМШ з а н я т и и fido.

alert (likesString); ^ т л к ж е мо>кем вы вест и диалоговое


окно a le rt с с о о т в е т с т в у ю щ е й ст рокой.

Передача объекта функции:


--■----------V. М ы м о ж е м п е р е д а т ь объ-
function bark (dog) { е к т функции т о ч н о т а к
же, как в случае с людои
if (dog.weight > 25) {
другой перем енной.
alert ("WOOF") ;
} else { 3 ф у нкци и м ы мож ем
alert("yip") п о л у ч и т ь д о с т у п к с во й ­
с т в а м о б ъект а как обычно,
}
и с п о л ь з уя j конечно ж е , им я
} п а р а м е т р а для объекта.

b a r k ( f i d o ) T >N^ Мы п ередаем fido в качест ве


а р г у м е н т а ф у нкции b a r k , к о ­
т о р а я ожидает о б ъ е к т dog.

Оператор «точка» (.)

Оператор «точка» (.) обеспечивает доступ к свойствам объ­


екта. В целом код получается более удобочитаемым, чем при
использовании скобочной нотации (["строка"]):

• fido . w e i g h t ЭТО вес fido.


• f i d o . b r e e d ЭТО порода fido.
• f i d o . паше ЭТО КЛИЧКЭ fido.
• f i d o . l o v e s это массив, содержащий значения, олицетво­
ряющие любимые занятия fido.

168 глава 4
функции и объекты javascript

А можно ли добавлять свой­


ства в объекты после того,
как они уже были определены?

Да, вы сможете добавлять и удалять свойства


в любой момент.
Ч т о б ы д о б а в и ть с в о й с т в о в о б ъ е кт, н у ж н о н р о с т о н р и -
с в о и т ь н о в о м у с в о й с т в у зн а ч е н и е , к а к н о к а з а н о далее:
f i d o . age = 5 ;

по сл е ч е го у fid o п о я в и т с я н о в о е с в о й с т в о : аде.

А ч т о б ы удал ить с в о й с т в о , н у ж н о в о с п о л ь з о в а ть с я к л ю ­
ч е в ы м сл о в о м delete:
d e le te f i d o . a g e ;

П р и уд а л е н и и с в о й с т в а в ы удаляете н е н р о с т о е го зн а ч е ­
н и е , а само э то с в о й с т в о . Ф а к т и ч е с к и , если в ы з а х о т и т е
в о с п о л ь з о в а ть с я f i d o . аде но сл е т о г о , к а к уд а л ил и е го ,
то о н о будет о ц е н е н о к а к u n d e fin e d .

В ы р а ж е н и е d e le t e в о зв р а щ а е т t r u e , е сли с в о й с т в о
б ы л о у с н е ш н о удалено (л и б о е сли в ы удаляете с в о й с т в о ,
к о т о р о е н е сущ ествует, л и б о если т о , ч т о в ы н ы т а е те с ь
уда л ить, н е я в л я е тс я с в о й с т в о м о б ъ е кта ).

дальше ► 169
объекты как аргументы

Поговорим о передаче объектов функциям


М ы с в а м и у ж е н е м н о го о б суж д а л и т о , к а к а р гу м е н т ы н е р е д а ю тс я ф у н к ­
ц и я м , — о н и н е р е д а ю тс я по значению , т а к ч т о е сли м ы не р е д а д и м ц елое
ч и с л о , с о о т в е т с т в у ю щ и й н а р а м е т р ф у н к ц и и н о л у ч и т копию д а н н о го
ц е л о ч и с л е н н о го значения для и с п о л ь з о в а н и я в ф у н к ц и и . А н а л о г и ч н ы е
н р а в и л а д е й с т в у ю т и в случае с о б ъ е кта м и , однако н а м н у ж н о более н р и -
ста л ь н о в згл я н у ть н а то , ч т о будет с о д е р ж а т ь с я в н е р е м е н н о й , к о гд а о н а
н р и с в а и в а е т с я объ екту, ч т о б ы в ы с м о гл и н о н я т ь , ч т о все э то о зн а ча е т.

К о гд а о б ъ е к т н р и с в а и в а е т с я н е р е м е н н о й , о н а будет с о д е р ж а т ь н е сам
э т о т о б ъ е кт, а ссылку н а н е го . С ч и т а й т е с с ы л ку у ка за те л е м н а о б ъ е кт.

fid o name: "Fido"

weight: 40

Когда объект присваивается breed: "M ixed"


переменной, она наделяется
ссылкой на этот объект. loves: ["walks", "fetching balls"]
Переменная не будет «содер­
ж а т ь » сам объект.

Т а к и м о б р а зо м , н р и в ы зо в е ф у н к ц и и и пе р ед а че е й о б ъ е кта в ы будете
н ер е д а ва ть с с ы л ку н а о б ъ е к т — не сам о б ъ е кт, а т о л ь к о ука за те л ь на не го ,
К о н и я с с ы л к и п е р е д а е тс я в н а р а м е т р , п р и э т о м у ка зы в а т ь о н а будет на
о р и г и н а л ь н ы й о б ъ е кт.

Если вы вызовем функцию


bark и передадим ей fido
в качестве аргумента ,
то получим копию ссылки
на объект dog. ?
f u n c t i o n b a r k (d o g ) {
... code here ...
}

Т а к ч т о ж е все э то о значает? П р и и з м е н е н и и с в о й с т в а о б ъ е кта в ы и з м е ­


н я е те д а н н о е с в о й с т в о в о р и г и н а л ь н о м о б ъ е кте , а н е в к о н и и , н о э т о м у
у в и д и т е все в н е с е н н ы е в а м и и з м е н е н и я в о б ъ е к т в н у т р и и в н е в а ш е й
ф у н к ц и и . Д а в а й те р а с с м о т р и м н р и м е р , где в случае с dog и с н о л ь з у е тс я
ф у н к ц и я l o s e W e i g h t .. .

170 глава 4
функции и объекты javascript

СаЖаем Fido на guemy...


Д а в а й те в згл я н е м н а т о , ч т о н р о и с х о д и т , к о гд а м ы нер е д а е м
сД еной с
f i d o ф у н к ц и и l o s e W e ig h t и и з м е н я е м с в о й с т в о d o g . w e i g h t .

Мы определили объект f i d o и передаем его


функции lo s e W e ig h t .

fido — это ссылка на объект, то есть


соответствующий объект не рас­
полагается в_ переменной fidoj однако name: "Fido"
эта переменная на него указывает.
weight: 48

— breed: "Mixed"

У loves: ["walks", "fetching balls"]


fido.weight = 48;

loseWeight(fido) При передаче fido


функции мы передаем
ссылку на объект.

( 2 \ Параметр d o g функции l o s e W e ig h t получает ко-


пию ссылки на f i d o . Таким образом, любые из­
менения в свойствах параметра будут отражаться
на переданном объекте.

Когда мы передаем fido функции


Ссылка dog
loseWeight, параметру dog п р и ­ это копия
сваивается копия ссылки, а не копия ссылки fido
объекта. Так что fido и dog будут
указывать на один и тот же объект.

function loseWeight(dog) {
dog.weight = dog.weight 10; e Такимобразом , при вычитании
НО фунтов* из dog.weight мы
изменяем значение fido.weight.

alert(fido.паше + " now weighs " + fido.weight);

10 ф у н то в ® 4,5 4 кг.

дальше ► 171
приложение webville cinema

ПРИЛОЖЕНИЕ WEBVILLE CINEMA ДЛЯ ПОКАЗА АФИШИ КИНОТЕАТРА

Здесь речь пойдет о приложении Webville Cinema и API-


интерфейсах JavaScript; вам нужно будет создать объекты
m ovie. Всего вам потребуются два таких объекта, каждый
ИЗ КОТОРЫХ будет ВКЛЮЧаТЬ название ( t i t l e ) , Жанр (genre)

и рейтинг фильма ( r a t i n g ) (выставляемый по шкале от


1 до 5 звездочек), а также время киносеансов (show tim es).
Вот образцы данных, которые вы сможете использовать
для заполнения своих объектов.

Название фильма: Plan 9 from Outer Space.


Время киносеансов: 3:00pm, 7:00pm and 11:00pm.

Жанр: Cult Classic.

Рейтинг в звездочках: 2.

Название фильма: Forbidden Planet.

Время киносеансов: 5:00pm и 9:00pm.

Жанр: Classic Sci-fi.

Рейтинг в звездочках: 5.

Г Р еш е н и е к д а н н о м у з а д а н и ю V - 8*' моЖете св°* °дН0 ^ Ц Т в а м


н а х о д и т с я на с л е д у ю щ е й с т р а - ЭГ “ Р
н и ц е , о д н а к о не з а г л я д ы в а й т е 6 о льШ е н Р а в я т с я
т у д а , п о к а не с д е л а е т е все
с а м и . С е рь езн о. Mt?/ не ш у т и м .

Код для создания ваших


об ъект ов н а п и ш и т е здесь.
■ж

172 глава 4
функции и объекты javascript

ПРИЛОЖЕНИЕ WEBYILLE CINEMA ДЛЯ ПОКАЗА АФИШИ КИНОТЕАТРА---------


РЕШЕНИЕ
Ну как у вас прошло создание объектов movie?

А вот наше решение к данному заданию:

m o v i e l обладает ч е т ы р ь м я с в о й с т в а м и :
M bi создали два
о б ъ е кт а с и м е ­ title , g e n r e , ra tin g и show tim es.
нам и moviel-
и m o vieZ для var moviel = { Значения title и g e n r e явля-
двух ф и льм ов. title: "Plan 9 from Outer Space"
ю т е я строками.

genre: "Cult Classic", Значение rating —


rating: 5, э т о число.
showtim.es: ["3:00pm", "7:00рт", "11:0 Орт"]
};
^ A s k o w tim e s п ред с т а вля е м , собой м ас с и в, содержа­
щ и й значения вр ем ени сеансов ф и л ь м а в виде ст рок.

свои -
у m o v i e z тоже и м е ю т с я ч е т ы р е
var тоvie2 = { ства: title, g e n re , rating и sho w tim es.

title: "Forbidden Planet",


genre: "Classic Sci-fi", He с л е д у е т з а б ы в а т ь ,
rating: 5, ч т о свойст ва необходимо
р а з д е л я т ь за п я т ы м и .
showtimes: ["5:00pm", "9:00pm"]
};

Мы использовали т е ж е самые
им ена с в о й с т в , как и в случае
с m o v i e l , но значения с во йст в
на э т о т раз б уд у т уже другие.

дальше ► 173
внедрение следующего сеанса

Наш следующий сеанс состоится в...


Итак, мы с вами уже немного отведали на вкус, что значит смешивать объек­
ты и функции. Давайте нойдем еще дальше и нанишем код, который станет
выводить сообщение о времени следующего сеанса фильма. Наша функция
будет нринимать movie в качестве аргумента и возвращать строку, содержа­
щую значение времени следующего сеанса фильма, отталкиваясь нри этом
от значения текущего времени. Л Л
М ы и звл е ка е м значение т е к у щ е го в р е м е н и с п о м о щ ь ю
В о т наила новая ф у н к ц и я , п р и ­
J a v a S c r i p t - о б ъ е к т а Date. Не б еспокойт есь о д е т а -
н и м а ю щ а я о б ъ е к т movie.
лях - п р о с т о з н а й т е , ч т о он в о з в р а щ а е т зн а ч е н и е
т е к у щ е г о врем ени в м и л л и с е к у н д а х .
Теп ер ь мы з а д е й с т в у е м м ассив s k o w t i m e s о б ъ -
function getNextShowing(movie)
var now = new Date().getTime();
{
j е к т а m o v ie и со ве р ш а е м и т е р а ц и и по нему.
I В случае с каждым з н а ч е н и -
▼ ем s k o w tim e s мы и звл е ка е м
for (var i = 0; i < movie.showtimes .length; i++) { Л n
^ ^ значение т е к у щ е го врем ени
var showtime = ge tTimeFromSt ring (movie.show times [i]) ; g миллисекундах, а зат ем
if ((showtime - now) > 0) { пр оводим сравнение.
return "Next showing of " + movie.title + " is " + movie.show times [i] ;

|^_ Если вр е м я еще не н а с т у п и л о , т о э т о значение в р е м е ­


}
ни следую щ его сеанса , п о э т о м у оно и возвращ ает ся.
return null;
Если сеансов больше не о с т а ­
е т с я , м ы во звр ащ а ем null.
j^oijloBo

к уно^е^леншо
function getTimeFromString( time String) {
var theTime = new D a t e ();
В о т п р и го т о вл е н н ы й
var time = timeString.match(/(\d+)(?:: (\d\d))?\s*(p?) /);
нам и кодj ко т о р ы й п р о ­
theTime.setHours( parselnt(time[1]) + (time[3] ? 12 : 0) )
ст о б е р е т с т р о к у ф о р ­
theTime.setMinutes( parseInt(time[2]) II 0 ) ; м а т а , например l a m
return theTime.getTime() ; или Ърт> и п р е о б р а з у е т
} ее в значение вр ем ени
в м и ллисекунда х.
He беспокойт есь насчет данного кода; в нем и с п о л ь з у ю т с я
р е гу ля р н ы е выражения , о ко т о р ы х вы у з н а е т е по ходу и з у ч е ­
ния Ja vaS cript. А пока п р о с т о в зг л я н и т е на них!

var nextShowing = getNext Showing (moviel) ; Г Х Здесь МЫ вызываем ф у н к ц и ю g e t N e x tS h o w in g


alert (nextshowing) ; и и с п о л ь з у е м с т р о к у , к о т о р у ю она возвраща-
next Showing = getNext Showing (movie2) ; отображения в диалоговом окне alert.
alert(nextshowing); )
И де ла ем т о же сам ое в случае с movieZ.

174 глава 4
функции и объекты javascript

К а к р а б о т а е т «объединение в д е п о чку » _________________________________

В ы о б р а т и л и в н и м а н и е н а д а н н у ю с т р о к у в н р е д ы д у щ е м коде?

movie.showtimes.length

Э та с т р о к а н е н о х о ж а н и н а ч т о и з т о г о , ч т о н а м д о в о д и л о с ь в и д е ть р а н ь ш е .
О н а нр е д с та в л я е т с о б о й с о к р а щ е н н ы й в а р и а н т с е р и и ш а го в , к о т о р ы е н а м п о ­
тр е б о в а л о с ь б ы в ы н о л н и т ь , ч т о б ы и з в л е ч ь д л и н у м а сси в а s h o w tim e s и з об ъ ­
е к т а m o v ie . В м е сто нее н а м н р и ш л о с ь б ы н а н и с а т ь следую щ ее:

— Сначала мы извлекаем
ллассив showtim es.
var showtimes Array = movie.showtimes; ^
var len = show timesArray, length; ^ ____ Затем МЫ используем его
для доступа к свойству length.
О д н а к о м ы м о ж е м делать все э то за о д и н н о д х о д н у т е м о б ъ е д и н е ­
н и я в ы р а ж е н и й в ц е н о ч к у . Д а в а й те н о с м о т р и м , к а к э то р а б о та е т:

movie.showtimes.length
А ^ t ^
ЧЭОценива - ...который и м е - ...который
ется как ет свойство имеет свой -
объект showtimes , что яв - ство с им е -
movie... ляется массивом... нем length.

Tecm-драйб
Н а н е ч а т а й т е к о д с н р е д ы д у щ е й с т р а н и ц ы и н р о в е д и т е е го те ст-д р а й в . В ы у в и д и те , ч т о ф у н к ц и я
g e tN e x tS h o w in g н р и н и м а е т о б ъ е к т m o v ie и в о зв р а щ а е т с т р о к у со з н а ч е н и е м с л е д ую щ е го сеанса
с о о т в е т с т в у ю щ е го ф ильм а. В ы т а к ж е м о ж е т е с в о б о д н о созд авать с о б с т в е н н ы е н о в ы е о б ъ е к т ы
и н р о в о д и т ь те ст-д р а й в с и х уч а с ти е м . М ы т а к и н о с т у н и л и , н р и э т о м м е с тн о е в р е м я б ы л о 12:30.

var banzaiMovie = {
h« PV/focalhost
title: "Buckaroo Banzai",
Next showing of Buckaroo в а л а ! is j
■00pm
genre: "Cult classic",
rating: 5,
showtimes: ["1:0 0pm" , "5:0 0pm" , "7:0 0pm" ]

'jV
С
Примечание: качество нашего кода явля
J ется не совсем т а к и м , как у « производ -
var next Showing = getNextShowing (banzaiMovie) ; ственного кода»; если вы выполните его
alert (nextshowing); после наступления времени последнего
киносеанса , то получите значение null.
Повторите попытку на следующий день>.\&

дальше ► 175
объекты и методы

Объекты такЖе м огут обладать поведением...


В ы ж е н е дум али, ч т о о б ъ е к т ы го д я т с я т о л ь к о для с о х р а н е н и я ч и с е л ,
с т р о к и м ассивов? О б ъ е к т ы а к т и в н ы — о н и м о гу т делать о п р е д е л е н н ы е
в е щ и . С о б а ки , к н р и м е р у , н е с и д я т н а м е сте : о н и л а ю т, б е га ю т, и г р а ю т
Когда объект
в м я ч , и н а ш о б ъ е к т d o g т о ж е д о л ж е н в е с т и себя н о д о б н ы м о б р а зо м !
П р и н и м а я во в н и м а н и е все и з у ч е н н о е в э т о й главе, в ы н о л н о с т ь ю г о т о в ы включает
к тому, ч т о б ы с н а б д и ть с в о и о б ъ е к т ы н о в е д е н и е м . В о т к а к э то делается:

var fido = { в себя


паше: "Fido11,
weight: 40, функцию,
breed: "Mixed11,
loves: ["walks", "fetching balls"] мы говорим,
bark: function() {
alert("Woof woof!") Мы м о ж е м добавить что даииый
} функцию напрямую в наш

}; i К
объект, как показано здесь. объект
Вместо того чтобы гово- Обратите внимание , что
ритъ, что это «функция “ с™ л»зуем анонимную включает
в объекте » , мы просто гово- и присваиваем ее
рым , ч т о это метод. М ежду
ними нет никакой разницы,
^ о и с ^ в у bark объекта,
в себя метод.
однако функции в объектах
все называют методами.

Д л я в ы зо в а м ето д а в о т н о ш е н и и о б ъ е кта следует у ка за ть и м я д а н н о го


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

f i d o .b a r k () ;
Мы говорим объекту сделать
чт о-т о, вызывая его методы.
3 данном случае мы вызываем
метод bark объекта fido.

176 глава 4
функции и объекты javascript

Возвращаемся к приложению Webville Cinema...


Т е н е р ь, к о гд а в а ш и з н а н и я об о б ъ е кт а х р а с ш и р и л и с ь , м ы м о ж е м в е р ­
н у т ь с я и у с о в е р ш е н с тв о в а ть к о д н а ш е го н р и л о ж е н и я W e b v ille C in e m a .
М ы у ж е н а н и с а л и ф у н к ц и ю g e t N e x t Showing, н р и н и м а ю щ у ю m ovie в к а ­
ч е ств е а р гу м е н та , о д н а к о вза м е н м о гл и б ы сделать э ту ф у н к ц и ю ч а с т ь ю
о б ъ е кта m ovie, н р е в р а т и в ее в м е то д . Д а в а й те т а к и н о с т у н и м :

var moviel = {
title: "Plan 9 from Outer Space",
M ы взяли наш код и пом ест и­
genre: "Cult Classic",
ли его в метод объекта m o v ie l
rating: 5, с использованием имени свойст\
showtimes: ["3:0 0pm" , "7:0 0pm" , "11:0 0pm" ] getNextShowing.

getNext Showing: function (movie) {


var now = new Date () .getTime () ;

for (var i = 0; i < movie.showtimes.length; i++) {


var showtime = getTimeFromString (movie.showtimes [i]) ;
if ((showtime - now) > 0 ) {
return "Next showing of " + movie.title + " is " + movie.showtimes[i];
}
}
return null;
}

Но мы знаем, что моЖем быть не совсем правы...


Н а сам ом деле м ы н е м о ж е м н р о с т о в б р о с и т ь ф у н к ц и ю в д а н н ы й о б ъ е кт, н о с ко л ь ку
g e t N e x t S h o w in g н р и н и м а е т m ovie в ка ч е с т в е а р гу м е н та . П р и э т о м н а м х о ч е т с я вы -
зы в а т ь g e t N e x t S h o w in g сл е д ую щ и м о б р а зо м : ^ ^ т р е Ш а т ь с я к а к ц е - л и 6о а р г у -
^ м е н т ы , п оско льк у б у д е м вполне ясно, вр ем я
var nextshowing = moviel.getNextShowing () ; следую щ его сеанса какого ф и л ь м а МЫ ХотиМ
и звл е ч ь j т о е с т ь т о г о , ко т о р ы й п р е д с т а в л е н
объект ом m o v ie l.
И т а к , к а к и е ж е и е н р а в л е н и я н а м н е о б х о д и м о вне сти ? Н у ж н о уд а л ить н а р а м е т р m ovie
и з о н р е д е л е н и я м е то д а g e t N e x t S h o w in g , о д н а ко то гд а н а м н р и д е т с я ч т о -т о делать со
все м и с с ы л ка м и н а m o v ie , s h o w tim e s в ко д е , н о с к о л ь к у к а к т о л ь к о м ы удалим н а р а ­
м е тр , m o v ie н е р е с т а н е т с у щ е с тв о в а ть к а к н е р е м е н н а я . Ч т о ж , д а ва й те н о с м о т р и м ...

дальше ► 177
переработка функции как метода

Давайте уберем параметр movie...


М ы н о з в о л и м себе уда л ить н а р а м е т р movie и все с с ы л к и н а н е го .
В резул ьтате у нас н о л у ч и т с я с л е д у ю щ и й ко д :

Внизу мы выделили изменения


var moviel = { n
серым цветом...
title: "Plan 9 from Outer Space", _ n
v See это выглядит вполне сносно, однако
genre: --Cult Classic--, ^ ^ иео$кодиМО пр о д ум а т ь как
rating: 5, метод getNextShowing будет использо
showtimes :["3:00pm", "7:00pm", "11:00pm"], 8amt> свойство skowtimeS--
£
getNextShowing: function () { - HaM пРи$ЫЧны либо локальные
var now = new n . .. . m. ..
Date().getTime(); переменные (но
N showtimes
r к hum
не относится), лиоо глобальные
переменные (к которым showtimes
for (var i = 0 ; i < showtimes.length; i++) { тоже не относится). Хм...
var showtime = getTimeFromString (showtimes [i]) ;
if ((showtime - now) > 0 ) {
return "Next showing of " + title + " is " + showtimes[i];

} } 1
А вот и еще одно
return null; свойство - title.
}
};

U что теперь?
И т а к , в о т в ч е м з а кл ю ч а е тс я го л о в о л о м к а : у нас и м е ю т с я с с ы л к и н а с в о й с т в а showtimes и title. О б ы ч ­
н о в ф у н к ц и и м ы ссы лаем ся н а л о к а л ь н у ю н е р е м е н н у ю , н а гл о б а л ьн у ю н е р е м е н н у ю и л и н а н а р а м е т р
ф у н к ц и и , о д н а ко showtimes и title я в л я ю т с я с в о й с т в а м и о б ъ е кта moviel. В н р о ч е м , м о ж е т все и ср а б о ­
тает... ведь Ja v a S c rip t, к а ж е т с я , д о с т а т о ч н о у м е н для т о г о , ч т о б ы с а м о с то я те л ь н о во всем р а зо б р а ться?

Н е т. Н е сраб отает. М о ж е т е н р о в е с т и те с т-д р а й в , и J a v a S c rip t с о о б щ и т вам, ч т о н е р е м е н н ы е showtimes


и title и м е ю т з н а ч е н и е undefined. К а к т а к о е в о зм о ж н о ?

Д е л о в о т в че м : э т и н е р е м е н н ы е я в л я ю т с я с в о й с т в а м и о б ъ е кта , о д н а ко м ы н е с ка за л и J a v a S c rip t, к а к о г о
и м е н н о о б ъ е кта . В ы м о ж е т е н о д ум а ть: «Ведь о ч е в и д н о ж е , ч т о м ы и м е е м в ви д у Д А Н Н Ы Й о б ъ е кт, в о т
э то т, к о т о р ы й н а х о д и т с я н р я м о здесь! Ч т о т у т м о ж е т б ы т ь н е н о н я т н о го ? » . И , да, м ы п о д р а зум е ваем
св о й с т в а и м е н н о э т о го о б ъ е кта . В J a v a S c rip t п р и с у т с т в у е т к л ю ч е в о е сл о во this, к о т о р о е н о з в о л я е т т о ч ­
н о дать н о н я т ь , ч т о в ы и м е е те в в и д у данный конкретный объект.

Н а сам о м деле с и т у а ц и я н е м н о го более с л о ж н а я , ч е м о н а к а ж е т с я здесь, и об э т о м м ы н о г о в о р и м со всем


с к о р о , а н о к а за й м е м ся д о б а в л е н и е м к л ю ч е в о го слова this, ч т о б ы н а ш к о д р а б о та л к а к надо.

178 глава 4
функции и объекты javascript

Добавление ключевого слова this


Д а в а й те д о б а в и м t h i s в ка ж д о е м е с то , где м ы у ка зы в а е м с в о й с т в о , и те м са м ы м
д а д им н о н я т ь J a v a S c rip t, ч т о и м е е м в ви д у с в о й с т в о данного к о н к р е т н о г о о б ъ е кта :

var moviel = {
title: "Plan 9 from Outer Space",
genre: "Cult Classic",
rating: 5,
showtimes: ["3:00pm", "7:00pm", "11:00pm11], 3dect> МЫ д о бавили к л ю ч е в о е слово
th is п е р е д каж ды м с в о й с т в о м ,
обо зна чив т е м с а м ы м , ч т о и м е е м
getNextShowing: function() {
w T 6 6 иду с с ы л к у на о б ъ е к т m o v i e l .
var now = new Date().getTime();

for (var i = 0; i < this.showtimes.length; i++) {


var showtime = getTimeFromString(this.showtimes[i]);
if ((showtime - now) > 0 ) {
return "Next showing of " + this.title + " is " + this.showtimes[i];
}
}
return null;

Tecm-gpau6 с участием this


Н а б е р и т е н о к а з а н н ы й в ы ш е к о д , а т а к ж е добавьте ф у н к ц и ю g e t N e x t S h o w in g
в с в о й о б ъ е кт m o v i e 2 (н р о с т о с к о н и р у й т е и вставьте ее). З а те м в н е с и т е п р и в е д е н ­
н ы е в н и з у и з м е н е н и я в с в о е й н р е д ы д у щ и й т е с т о в ы й ко д . И н р о в е д и т е те ст-д р а й в !
В о т ч т о н о л у ч и л о с ь у нас: г

httP'/Zfocalhost
Next showing of Plan 9 from Outer Space is 3:00pm

var nextShowing = moviel.getNextShowing () ;


alert(nextShowing); *■ ж )
nextShowing = movie2 .getNextShowing () ;
alert(nextShowing);

V О б р а т и т е в н и м а н и е , ч т о т е п е р ь м ы в ы з ы в а е м 3 etNe^ ho^ 3
В О Т Н О Ш Е Н И И о б ъ е к т а . Т а к более п о н я т н о , н е п р а в д а ли.

дальше ► 179
повт орное использование кода и м ет оды

Похоже, что мы
дублируем один и тот же
код всеми этими копированиями
и вставками /метода getNextShowing.
Разве нет более оптимального
пути?

Верно подмечено.
У вас отличная интуиция, если вы догада­
лись, что код дублируется, когда мы копиру­
ем g e tN e x tS h o w in g в более чем одип объект
m o vie. Одна из целей объектпо-ориептиро-
ванного програм м ирования заклю чается в
максимизации повторпого использования
кода — здесь мы не используем повторпо
код, а ф актически создаем каждый объект
как уникальный, а наши объекты movie по
соглашению (и из-за копировапия и встав­
ки!) в итоге долж ны получаться одинако­
выми. Такой подход пе только является
излиш ней тратой ресурсов, по и мож ет соз­
давать благодатную почву для ошибок.
Существует лучш ий способ сделать это, ис­
пользуя конструктор. Ч то такое копструк-
тор? Это специальпая фупкция, которую
мы с вами папиш ем и которая сможет
создавать объекты и делать их все одина­
ковыми. М ожете считать ее своего рода
пеболы ной ф абрикой, которая припим ает
зпачепия свойств, которы е вы хотите за­
дать в своем объекте, и возвращ ает повы й
объект со всеми пужпыми вам свойствами
и методами.
Д авайте создадим копструктор...

180 глава 4
ф ункции и объект ы ja v a s c rip t

Как создать конструктор


Д авайте создадим копструктор объектов d o g . Мы уже зпаем, как долж пы вы­
глядеть паш и объекты d o g : опи будут иметь свойства nam e, b r e e d и w e i g h t ,
а также вклю чать метод b a r k . Таким образом, пашему копструктору п отре­
буется п рип ять зп ачеп ия свойств в качестве парам етров и возвратить пам
объект d o g , вклю чаю щ ий метод b a r k . Вот пеобходимы й пам код:

ф у н к ц и я - к о н с т р у к т о р во м н о г о м
Параметры конст рукт ора п р и н и ­
схожа с обычной ф у н к ц и е й . О д н а к о м а ю т значения свойств, которыми
по с о г л а ш е н и ю ее и м я должно н а ­ должен обладать наш объект.
ч и н а т ь с я с п р о п и с н о й буквы.

fu n c tio n
Л D o g (п а ш е , b r e e d , w e ig h t) {
Здесь мы инициализируем
свойства объекта значениями,
t h i s , nam e = пате; ~ переданными к о н ст р ук т о р у.
t h is , b re e d = b re e d ;

Имена свойств Мы можем вклю чит ь м ет од


th is . w e ig h t = w e ig h t;
и имена п а р а ­ bark в конст руируемы й объект
м е т р о в необяза­ th is .b a r k = f u n c t i o n () { п у т е м инициализации свойства
тельно должны bark значением функции точно
i f ( th is .w e ig h t > 25) { м а к жел как делали раньше.
быть одинако­
выми, однако a l e r t ( t h i s .п а ш е + " says W o o f! " )

зачастую они } e ls e { Нам необходимо использовать


оказываются this.weight и this.name в методе
a l e r t ( t h i s . nam e + says Y ip ! ")
таковыми — для ссылки на свойства в объек­
о п я т ь -т а к и , } те т ак же, как и раньше.
по соглашению.
);
)
О бра т ит е внимание, насколько данный синтаксис
отличается о т синтаксиса объект а. Это операторы,
поэт ом у каждый из них должен заканчиваться точкой
с запят ой (как это обычно бывает в функции).

П ройдем ся по коду еще раз, чтобы убедиться в том, что вы во всем разобра­
лись. D og —это фупкция-копструктор, припимаю щ ая пабор аргумептов, ко­
торы е являю тся пачальпы ми зпачепиям и пеобходимых пам свойств: nam e,
b r e e d и w e i g h t . Получив эти зпачепия, копструктор п рисваивает свойства,
используя клю чевое слово t h i s . O n также определяет паш метод b a r k .
И каков же результат всего этого? К опструктор D og возвращ ает повы й объ­
ект. Д авайте посмотрим, как ф актически использовать копструктор.

дальш е ► 181
использование конст рукт ора

Вам не нужно бес­


покоиться о создании всех
этих объектов, поскольку мы
сделаем это за вас.

Воспользуемся нашим конструктором


Теперь, когда мы п остроили нашу «фабрику», можно
пачипать использовать ее для создания объектов d o g .
Вам потребуется вызы вать функцию-конструктор осо­
бым образом —нутем разм ещ епия ключевого слова new
перед вызовом. Вот ряд примеров:

Д ля создания объекта dog мы


используем ключевое слово new
А за т е м вызываем его подобно
в сочетании с конст руктором. любой другой функции.

var fido = new Dog("Fido", "Mixed", 38);

va r tin y = new D o g ( " T in y " , " C h a w a lla " , 8 );


Мы создаем т ри разных
va r C liffo r d = new D og ( " C lif f o r d " , " B l o o d h o u n d 11, 6 5 );
объекта dog п у т е м п е р е ­
дачи разных аргум ент ов
для конфигурирования каж­
Получив объект ы, мы м о ­
f i d o . b a r k () ; дого из этих объектов.
жем вызывать их методы
tin y .b a r k ( ) ; bark для возврата с о о т ­
вет ст вую щ и х значений.
c liffo r d .b a r k () ;

Д авайте еще раз разберемся, что здесь происходит: мы соз­


даем три разпы х объекта d o g , каждый из которы х будет об­
ладать своими свойствами, для чего используем клю чевое
слово new в сочетапии с рапее создаппым копструктором http://localhost
D og. К опструктор возвращ ает объект d o g , скопфигуриро- ijf Fido says Woof!

ваппы й в соответствии с передаппы м и пами аргументами.


Д алее мы вызы ваем метод b a r k в отпош епии каждого ht(p://laca1ho$t
объекта d o g . О братите впимапие, что мы используем Tiny s*ys V i» r
одип и тот же метод b a r k в случае со всеми объектами
d o g , а при каждом вы зове b a r k клю чевое слово t h i s бу-
дет указывать па объект d o g , в отпош епии которого был http://!ocalh ost
соверш еп вызов. Таким образом, если мы вы зовем ме­ Clifford says Woof!

тод b a r k в отпош епии fido, то в методе b a r k клю чевое


слово t h i s будет указывать па объект f i d o . Давайте
более пристальпо взгляпем па то, как все это работает.

182 глава 4
ф ункции и объект ы ja v a s c rip t

Как на самом деле работает this?


В сякий раз, когда мы помещ аем клю чевое слово t h i s в код метода, опо будет
иптерпретироваться как ссылка па объект, в отпош епии которого был вызвап
даппы й метод. Таким образом, если мы вызовем f i d o . b a r k , то t h i s будет
указывать па f i d o . Л ибо, если мы вы зовем его в отпош епии объекта t i n y ,
то t h i s будет указывать па t i n y в вы зове метода. Но откуда t h i s зпает, какой
объект опо представляет? Д авайте посмотрим.

Допустим, у нас имеется объект dog, присвоенный fid o :

fid o = new D o g ( " F id o " , " M ix e d " , 3 8 );

V xname; "Fido" Вот экземпляр нашего нового


^ _ breed: "Mixed" ^ ___ _
объекта dog с нужными значе­
— weight: 38
ниями свойств.
bark: functionQ { ... }

(2 ^ Теперь мы вызываем b a r k о в отношении fid o : При каждом вызове метода в о т но ш е­


нии объекта JavaScript делает т а к >
f i d o . b a r k () th is чтобы ключевое слово this указывало
Г name: "Fido"
на сам э т о т объект. Таким образом,
здесь this указывает на fido.
breed: "Mixed”

— weight: 38 Так что когда мы ссылаемся


bark: functionQ { ... } на this.п а т е , мы знаем, что
имя объекта будет "Fido11.

Вы можете вызывать bark


в отношении любого объ­
( 3\ Таким образом, t h i s всегда будет указывать на объект, екта dogj a this при эт ом
в отношении которого был вызван метод, независимо будет присваиваться ко н-
от того, как много объектов dog мы создадим: . к рет н о м у dog до выполне-
^ ния вашего основного кода.
f i d o . b a r k () t i n y . b a r k () c l i f f o r d . b a r k ()

th is th is th is

name: "Fido" name: "Tiny" name: "C lifford"


breed: "Mixed" breed: "Chawalla" breed: "Bloodhound"

— weight: 38 - weight: 8 — weight: 65

bark: functionQ { ... } bark: functionQ { ... } bark: functionQ { ... }

дальш е ► 183
конструктор movie

184 глава 4
ф ункции и объект ы ja v a s c rip t

Часш°
ЧаДаБаеМые
В опросы

В чем заключается истинная разница между функцией Q l Да, в теле объекта this всегда будет указывать на сам
и методом? В конце концов, если они являются одним и тем объект. Нов некоторых особых ситуациях это может быть не так;
же, почему называются по-разному? например, все окажется несколько сложнее, когда объекты будут
находиться внутри объектов, и если вы решите предпринять дан­
Q i По соглашению, если объект включает функцию, мы называем ное действие, то вам придется принимать во внимание семантику,
ее методом. Функция и метод работают одинаково, за исключени­ поскольку таково общее правило.
ем того, что вызов метода объекта осуществляется с применением
оператора «точка», при этом метод может использовать this для Мне доводилось слышать о том, что при объектно-ориен-
доступа к объекту, в отношении которого был вызван. Считайте тированном программировании у меня могут иметься классы
функцию отдельным блоком кода, который можно вызывать, а ме­ объектов, которые способны наследовать свойства и методы
тод — поведением, привязанным к определенному объекту. друг от друга по цепочке. Например, у меня мог бы быть класс
mammals, от которого наследуют свойства и методы dog и cat.
Если я с помощью конструктора создам объекты, вклю­ Возможно ли это на JavaScript?
чающие метод, то в случае со всеми этими объектами будет
совместно использоваться один и тот же код данного метода? Q i Да, возможно. В случае с JavaScript используется так назы­
ваемое прототипное наследование, которое представляет
Q i Да, все верно, причем в этом заключается одно из преиму­ собой даже более мощную модель, чем модели, основанные строго
ществ объектно-ориентированного программирования: вы можете на классах. Рассмотрение прототипного наследования немного
создать код для класса объектов (например, для всех своих объ­ выходит за рамки данной книги, хотя, может, нам и стоило бы
ектов dog) в одном месте, и он будет совместно использоваться в написать больше о нем в сфере JavaScript.
случае со всеми объектами dog. Чтобы сделать его специфичным
для каждого из объектов dog, необходимо обратиться к их свой­
ствам, для доступа к которым вам потребуется использовать this. тор, не так ли?

Могу ли я задавать для this значения по своему выбору, 0 : Да, абсолютно верно! Date — это встроенный JavaScript-
и если да, не приведет ли это к тем или иным отрицательным конструктор. Когда вы указываете new Date () в коде, то полу­
последствиям? чаете в свое распоряжение объект Date с набором полезных
методов, которые можно использовать для работы с датами.
0 : Нет, вы не сможете задать для this какие-либо значения.
Помните, что this — это ключевое слово, а не переменная! Оно В чем разница между объектами, которые мы пишем сами
выглядит и ведет себя отчасти как переменная, но не является ею. и которые создаем с помощью конструктора?

Есть ли у this значение вне метода объекта? 0 : Основное различие заключается в том, как вы их создаете.
& Объекты, которые вы пишете сами, используя фигурные скобки
0 : Нет, если вы не вызываете метод объекта, то this будет и разделенные запятыми свойства, называются литералами
undefined. объектов. Вы символ за символом вносите их в свой код! Если
вам потребуется еще один такой объект, то придется самим напи­
сать его и позаботиться о том, чтобы он располагал аналогичными
Насколько я понимаю, когда я вызываю метод в отно­
свойствами. Объекты, генерируемые конструктором, создаются с
шении объекта, этот объект задается как значение this на все
использованием new и функции-конструктора, возвращающей объ­
время, пока будет идти оценка метода. Так ли это?
ект. Вы можете использовать функцию-конструктор для создания
множества объектов с одинаковыми свойствами, но с разными
значениями свойств, если пожелаете.

дальш е ► 185
реш ение упражнения

развлечения с м а гн и т а м и , ^ е^ ен и е

Таблички с рабочим кодом функции-конструктора Movie были прикреплены к холодильнику,


однако некоторые из них упали на пол. Можете ли вы восстановить целостность данного кода?
Будьте внимательны, поскольку на полу уже лежало несколько лишних табличек, которые могут
сбить вас с толку. Приведем реш ение данного задания.

Это к о н ст р ук т о р , в качестве
имени которого мы используем
Movie.
r a tin g , s h o w t im e s ) {

Мы передаем значения свойств,


которые к о т и м сконфигурировать:
titlej gen re> rating и showtimes...
r a tin g
и инициализируем эти свойства.
t h i s . s h o w t im e s =
Д ля ссылки на свойства в объекте
t h is .g e tN e x tS h o w in g = f u n c t i o n () { мы используем ключевое слово this.

va r now = n e w D a t e ( ) . g e t T i m e ()

fo r (v a r i = 0; i < t h i s . s h o w t im e s

va r s h o w t im e = g e tT im e F r o m S tr in g ( th is . [i]) ;
i f ( ( s h o w tim e - now) > 0 ) {

re tu rn "N e x t s h o w in g o f " + th is .t it le is " + t h i s . s h o w t im e s [i]

He забудьте п ост авит ь


в конце данного опера ­
-O - тора точку с запятой!

186 глава 4
ф ункции и объект ы ja v a s c rip t

Сразу Же проведем тест-драйв нашего конструктора


Теперь, когда у пас есть копструктор M ovie, п ора запяться создаппем объектов
m ovie! Н апечатав код фупкции-копструктора M ovie, добавьте приведеппы е пиж е
строки и проведите тест-драйв даппого копструктора. Мы полагаем, вы согласи-
тесь с тем, что это намного более легкий способ создапия объектов. Сначала мы создаем объект
movie для фильма Вискагоо
va r b a n z a iM o v ie = n e w M o v ie ( " B u c k a r o o B a n z a i" , Banzai (один из наших Любимых
" C u lt C la s s ic " , представителей жанра культ о-
пбрат ит е внимание, зна- ' вой классики), а также передаем
иенше массива для showtimes ' значения для параметров.
М О Ж Н О п о м е с т и т ь прямо ["1:00pm", "5:00pm", "7:00pm", "11:00рт"]);

в вызов функции.
var plan9Movie = new Movie ("Plan 9 from Outer Space",

" C u lt C la s s ic " , д йлее следуем plan , from


2 , Outer Space...
["3:00pm" , "7:00pm", "11:00pm"]) ;

•••и, конечно же,


var forbiddenPlanetMovie = new Movie ("Forbidden Planet", ^ Forbidden Planet
"Classic Sci-fi",

5,
["5:00pm", "9:00pm"]);

Создав все необходимые объекты, мы мо~


a l e r t ( b a n z a iM o v ie . g e tN e x tS h o w in g ( ) ) ; Л - ------^ Жем вызывать м ет од getNextShow ing и
выводить для пользователя в диалоговых
alert (plan9Movie.getNextShowing () ) ;
окнах alert сообщения о времени следую -
a l e r t ( f o r b id d e n P la n e t M o v ie . g e tN e x tS h o w in g () ) ; щего сеанса соот вет ст вую щ его фильма.

http://iocalliost
Next Showing o f Forbidden Planet is 5:0flpm

http://Jocalhost
Next showing o f Plan 9 from Outer Space is 3:00pm

h ttp ://lo c a lh o s t

Next showing Of Buckaroo Banzai is n o o p m

дальш е ► 187
тур по объектам

Поздравляем! Вы справились с изуче­


нием функций и объектов! Теперь, когда
вы все знаете о них, и прежде, чем мы завершим
эту главу, потратим немного времени и взгля­
нем на Java S crip t-объекты в «дикой природе»,
то есть в их родной среде — в браузере!

Вы, возможно, уже стали замечать...


...что объекты буквально окружают вас. К прим е­
ру, docum ent и w indow — это объекты, равно как и
элементы , возвращ аемы е посредством d ocu m en t,
g e t E lem en t By Id. Но это лиш ь часть того множ е­
ства объектов, с которы м и мы будем сталкиваться
в дальнейшем, —когда дойдем до API-интерф ейсов
HTML5, вы увидите, что объекты встречаю тся
на каждом шагу!
Д авайте еще раз взглянем на некоторы е объекты,
которы е уже использовали ранее в книгет

Объекты, с к о ­ document
торы ми мы уже domain
1
сталкивались. title
movie
URL
А вот наш
объект movie. title
genre getElementByld
N— 7 rating getElementsByTagName