ББК 32.973.26-018.2.75
М62
У Д К 681.3.07
Компьютерное издательство “ Диалектика”
Главный редактор С.Н. Тригуб
Зав. редакцией В.Р. Гинзбург
Перевод с английского и редакция канд. хим. наук Л.Г. Гузикевича
По общим вопросам обращайтесь в издательство “ Диалектика” по адресу:
info@dialektika.com, http://www.dialektika.com
М и н н и к , Крис, Холланд, Ева.
М62
JavaScript для чайников. : Пер. с англ. — М . : О О О “ И.Д. Вильямс” , 2017. — 320 с.
: ил. — Парал. тит. англ.
ISBN 978-5-8459-2036-2 (рус.)
Научно-популярное издание
К р и с М и н н и к , Е в а Холланд
JavaScript для чайников
В издании использованы карикатуры Банка изображ ений Cartoonbank.ru
Литературный редактор
Верстка
Художественный редактор
Корректор
И.А. Попова
Л. В. Чернокозинскал
Е.П. Дынник
Л.А. Гордиенко
Подписано в печать 15.03.2017. Формат 70x100/16
Уел. печ. л. 25,8. Уч.-изд. л. 14,98
Доп. тираж 700 экз. Заказ № 1827.
Отпечатано в АО «Первая Образцовая типография»
Филиал «Чеховский Печатный Двор»
142300, Московская область, г. Чехов, ул. Полиграфистов, д.1
Сайт: www.chpd.ru, E-mail: salcs@chpd.ru, тел. 8(499)270-73-59
ООО “И. Д. Вильямс”, 127055, г. Москва, ул. Лесная, д. 43, стр. 1
ISBN 978-5-8459-2036-2 (рус.)
Часть I. Приступаем к программированию на JavaScript
21
Глава 1. С а м ы й неправильно п оняты й язы к програм м ирования в мире
23
Глава 2. М оя первая програм м а на Ja v aS crip t
35
Глава 3. Работа с переменны ми
55
Глава 4. М а сси в ы
69
Глава 5. О ператор ы , вы раж ения, и нстр ук ц и и
79
Глава 6. Ц и к л ы и ветвление кода
92
Часть II. Организация программ на JavaScript
105
Глава 7. Приобретаем ф ункциональность
107
Глава 8. Создание и использование объектов
124
Часть III. JavaScript в Интернете
137
Глава 9. Управление браузером с помощ ью объекта W indow
139
Глава 10. М ани п ули рован ие докум ентам и с помощ ью D O M
152
Глава 11. Использование собы тий в Ja v a S crip t
169
Глава 12. И н теграци я ввода и вывода данны х
179
Глава 13. Работа с C S S и граф икой
192
Часть IV. Дополнительные темы
207
Глава 14. П о и ск с использованием регулярны х вы раж ений
209
Глава 15. Ф у н к ц и и обратного вызова и зам ы кани я
220
Глава 16. П риветствуем A J A X и J S O N
230
Часть V. JavaScript и HTML5
245
Глава 17. П р о гр а м м н ы е интерфейсы H T M L 5
247
Глава 18. Библиотека jQ u e ry
262
Часть VI. Великолепные десятки
279
Глава 19. Д еся ть Ja v a S crip t-ф реймворков и библиотек,
которы е вам следует и зучить
281
Глава 20. Д еся ть сам ы х распространенны х ош ибок
в Ja v a S crip t-программ ах и ка к их избежать
292
Глава 21. Д еся ть онлайн-инструм ентов, которы е ул учш ат
качество создаваемых вами програм м на Ja v aS crip t
П редм етны й указатель
301
310
Содержание
Об авторах
15
Введение
17
О чем эта книга
17
Исходные предположения
18
Пиктограммы, используемые в книге
19
Дополнительные материалы
19
Что дальше
19
Ждем ваших отзывов!
20
Часть I. Приступаем к программированию на JavaScript
Глава 1. Самый неправильно понятый язык программирования в мире
Что такое JavaScript?
21
23
23
И тут пришел Эйх...
24
Сначала был Mocha
24
Даешь больше эффектов!
25
JavaScript взрослеет
26
Динамический язык сценариев
26
Что можно делать с помощью JavaScript?
28
Почему именно JavaScript?
28
Язык JavaScript легок в изучении
29
Где работает JavaScript? JavaScript работает везде!
30
JavaScript — мощный язык
33
JavaScript — востребованный язык
34
Глава 2. Моя первая программа на JavaScript
Настройка среды разработки
35
35
Загрузка и установка браузера Chrome
36
Загрузка и установка редактора исходного кода
37
Оформление JavaScript-кода
44
Выполнение JavaScript в окне браузера
45
Использование JavaScript в атрибутах событий H T M L -элементов
45
Использование JavaScript в элементе s c r i p t
46
Включение внешних JavaScript-файлов
48
Использование консоли разработчика JavaScript
Комментирование кода
51
52
Глава 3. Работа с переменными
55
Понятие переменной
55
Объявление переменных
57
Глобальные и локальные области видимости
58
Именование переменных
60
Создание констант с помощью ключевого слова c o n s t
62
Работа с типами данных
62
Числовой тип данных
62
Строковый тип данных
65
Булев тип данных
67
Тип данных N aN
68
Тип данных u n d e f i n e d
68
Глава 4. Массивы
Создание списка
Основные сведения о массивах
69
69
70
Отсчет индексов в массивах ведется от нуля
71
В массивах могут храниться данные любого типа
72
Создание массивов
72
Использование ключевого слова new
72
Литеральное определение массива
72
Заполнение массивов значениями
73
Многомерные массивы
73
Доступ к элементам массива
75
Перемещение по элементам массива в цикле
76
Свойства массивов
76
Методы для работы с массивами
77
Использование методов для работы с массивами
77
Глава 5. Операторы, выражения, инструкции
79
Выражения
79
Знакомство с операторами
79
Приоритет операторов
Типы операторов
80
83
Операторы присваивания
83
Операторы сравнения
84
Арифметические операторы
84
Строковый оператор
86
Поразрядные операторы
86
Логические операторы
88
Специальные операторы
89
Объединение операторов
90
Содержание
7
Глава 6. Ц и к л ы и ветвление кода
Ветвление кода
92
92
i f . . . e ls e
92
Инструкция s w i t c h
94
Циклы
96
fo r
96
f o r . . . in
98
Цикл w h i l e
101
Цикл d o . . . w h i l e
101
b re a k и c o n t in u e
102
Часть II. Организация программ на JavaScript
Глава 7. П риобретаем ф ункц иональность
105
107
Роль функций
107
Терминология функций
108
Определение функции
109
Заголовок функции
109
Тело функции
109
Вызов функции
109
Определение параметров и передача аргументов
109
Возврат значения
110
Преимущества использования функций
110
Написание функций
113
Возврат значений
114
Передача и использование аргументов
115
Передача аргументов по значению
116
Передача аргументов по ссылке
117
Вызов функции с неполным числом аргументов
117
Аргументы по умолчанию
117
Вызов функции с количеством аргументов,
превышающим количество параметров
118
Получение значений аргументов с помощью объекта a r g u m e n t s
118
Область видимости функции
119
Анонимные функции
120
Различия между анонимными и именованными функциями
120
Самовыполняющиеся анонимные функции
120
Сделайте это снова с помощью рекурсии
121
Функции, объявленные в других функциях
122
Глава 8. Создание и использование объектов
8
124
Объект моих желаний
124
Создание объектов
125
Содержание
Определение объектов с помощью объектных литералов
125
Определение объектов с помощью конструктора O b j e c t ()
126
Получение и установка свойств объектов
127
Точечная нотация
127
Скобочная нотация
128
Удаление свойств
129
Работа с методами
129
Использование ключевого слова t h i s
Объектно-ориентированный способ разбогатеть: наследование
131
132
Создание объектов с помощью конструкторов
133
Видоизменение объектного типа
134
Создание объектов с помощью метода O b j e c t . c r e a t e ( )
135
Часть III. JavaScript в Интернете
137
Глава 9. Управление браузером с помощ ью объекта W indow
139
Браузерная среда
139
Пользовательский интерфейс
140
Загрузчик
140
Синтаксический анализ H T M L - документа
142
Синтаксический анализ C S S -стилей
142
Синтаксический анализ JavaScript
142
Компоновка и визуализация
142
Взаимодействие с В О М
143
Объект N a v i g a t o r
143
Объект W i n d o w
145
Использование методов объекта w i n d o w
150
Глава 10. М ани п ули рован ие докум ентам и с помощ ью D O M
Что такое D O M
152
152
Отношения между узлами
154
Использование свойств и методов объекта D o c u m e n t
158
Использование свойств и методов объекта E l e m e n t
159
Работа с содержимым элементов
162
Свойство i n n e r H T M L
Установка значений атрибутов
Получение элемента по его идентификатору, имени тега или классу
163
163
164
Метод g e t E l e m e n t B y l d ()
164
Метод g e t E l e m e n t s B y T a g N a m e ()
165
Метод g e t E l e m e n t s B y C l a s s N a m e ()
165
Использование свойств объекта A t t r i b u t e
166
Создание и присоединение элементов
167
Удаление элементов
167
Содержание
9
Глава 11. Использование событий в JavaScript
169
События
169
Обработка событий
171
Встроенные обработчики событий
171
Обработка событий с использованием свойств элементов
172
Обработка событий с использованием метода a d d E v e n t L i s t e n e r ()
173
Отмена распространения событий
177
Глава 12. Интеграция ввода и вывода данных
179
H T M L -формы
179
Элемент f o r m
179
Элемент l a b e l
181
Элемент i n p u t
181
Элемент s e l e c t
183
Элемент t e x t a r e а
183
Элемент b u t t o n
184
Работа с объектом F o r m
184
Использование свойств объекта F o r m
184
Использование методов объекта F o r m
186
Доступ к элементам формы
187
Получение и установка значений элементов формы
188
Проверка пользовательского ввода
189
Глава 13. Работа с CSS и графикой
192
Использование объекта S t y l e
192
Получение текущего стиля элемента
193
Установка стилевых свойств
196
Работа с изображениями
199
Использование объекта I m a g e
200
Создание трансформируемых кнопок
200
Увеличение размеров изображения при наведении на него указателя мыши
201
Создание слайд-шоу
Использование анимационных свойств объекта S t y l e
Часть IV. Дополнительные темы
Глава 14. Поиск с использованием регулярных выражений
Поиск текста с помощью регулярных выражений
Создание регулярных выражений
10
196
Анимация элементов с помощью объекта S t y l e
202
204
207
209
209
211
Использование объекта R e g E x p
211
Литеральные регулярные выражения
213
Тестирование регулярных выражений
214
Специальные символы в регулярных выражениях
214
Содержание
Использование модификаторов
216
Использование регулярных выражений в коде
216
Глава 15. Функции обратного вызова и замыкания
Что такое функции обратного вызова
Функции в роли аргументов
220
220
220
Написание функций, использующих функции обратного вызова
221
Использование именованных функций обратного вызова
222
Замыкания
224
Использование замыканий
228
Глава 16. Приветствуем AJAX и JSON
Закулисная работа A J A X
230
230
Примеры применения A J A X
231
Детальное ознакомление с работой A J A X
232
Использование объекта X M L H t t p R e q u e s t
236
Политика одинакового источника
238
C O R S — серебряная пуля A J A X -запросов
240
Передача объектов с помощью JSO N
241
Часть V. JavaScript и HTML5
245
Глава 17. Программные интерфейсы HTML5
247
Как работают API
247
Проверка браузерной поддержки программных интерфейсов H T M L 5
248
Знакомство с программными интерфейсами H T M L 5
249
Использование H T M L 5 Geolocation API
251
Что такое геолокация
251
Как работает геолокация
251
Применение геолокации
252
Сочетание геолокации с картами Google
254
Работа со звуком и видео
258
Глава 18. Библиотека jQuery
262
Меньше кода, больше дела
262
Приступаем к работе с jQuery
262
Объект jQuery
264
Готов ли документ к работе?
265
Использование селекторов jQuery
265
Изменение документа с помощью jQuery
266
Получение и установка значений атрибутов
266
Изменение стилей C S S
266
Манипулирование элементами в D O M
События
Содержание
267
268
11
Использование метода o n () для подключения событий
268
Открепление событий с помощью метода o f f ()
270
Привязка событий к еще не существующим элементам
270
Другие методы для работы с событиями
271
Эффекты
271
Базовые эффекты
272
Эффекты затухания
272
Эффекты скольжения
272
Задание аргументов анимационных методов
273
Создание пользовательских анимационных эффектов с помощью метода
a n i m a t e ()
273
Пример выполнения анимации средствами jQuery
274
A JA X
275
Использование метода a j а х ( )
275
Сокращенные методы для работы с A J A X
276
Часть VI. Великолепные десятки
279
Глава 19. Десять JavaScript-фреймворков и библиотек,
которые вам следует изучить
281
AngularJS
281
Backbone.js
283
Ember.js
284
Famo.us
285
Knockout
285
Q U nit
286
Underscore.js
287
M odem izr
288
Handlebars.js
289
jQuery
290
Глава 20. Десять самых распространенных ошибок
в JavaScript-программах и как их избежать
Путаница с оператором сравнения
293
Избегайте неправильного использования оператора присваивания
293
Как избежать подводных рифов сравнений
293
Непарные скобки
12
292
294
Несоответствие кавычек
295
Отсутствующие скобки
295
Отсутствие точки с запятой
296
Ошибки, связанные с неправильным использованием регистра букв
296
Ссылки на код, не успевший загрузиться
296
Плохие имена переменных
298
Содержание
Ошибки, связанные с неправильным использованием
областей видимости переменных
299
Пропуск параметров при вызове функций
299
Подсчитываем ошибки: забывчивость в отношении отсчета индексов от нуля
299
Глава 21. Десять онлайн-инструментов, которые улучшат
качество создаваемых вами программ на JavaScript
301
JSLint
301
JSFiddle.net
302
JSBin
303
javascriptcompressor.com
303
jsbeautifier.org
305
Генератор регулярных выражений JavaScript RegEx
306
JSONformatter
306
jshint.com
307
Сайт M ozilla Development Network
308
Дуглас Крокфорд
309
Предметный указатель
310
Содержание
13
Od ав/по/гах
Крис Минник — писатель, преподаватель и веб-разработчик, автор книги HTM L5
и CSS3 для чайников . Прежде чем основать компанию W atzThis?, К р и с восемнадцать
лет проработал исполнительным директором компании M in n ick Web Services, где под
его руководством и с его участием были разработаны сотни проектов, выполненных
как по заказу небольших компаний, так и компаний с мировым именем. К ри с обучил
H T M L , JavaScript, C S S и мобильной разработке не одну ты сячу студентов.
Ева Холланд
—
оп ы тны й писатель, преподаватель и соучредитель компании
W hatzThis?. О н а превосходно умеет излагать самые сложные концепции на языке, по
нятном для новичков с любым уровнем подготовки. Ева занималась писательской, ди
зайнерской и преподавательской деятельностью в онлайновом режиме, персонально и
посредством видеокурсов. Е ю созданы учебные программы по веб-дизайну, м обиль
ной разработке и поисковой оптимизации (S E O ). Д о учреждения компании W atzThis?
Ева занимала долж ность операционного директора компании M W S , где зарекомендо
вала себя как умелы й руководитель, способны й видеть перспективу и обеспечивать
достижение стоящ их перед компанией задач.
Введение
JavaScript сейчас на пике популярности. Когда-то это был наскоро скроенный язык
для одного из первых браузеров, теперь же он стал самым популярным в мире языком
программирования. С п р о с на JavaScript-програм м истов как никогда высокий и про
должает неуклонно расти.
Э т а книга —
ваш ключ к овладению о сно вны м и концепциями JavaScript. Н еза
висимо от того, стрем итесь ли вы оказаться на высокооплачиваемой долж ности про
граммиста или хотите создать собственны й интерактивный сайт, смеем вас заверить,
что содержание книги и описанны е в ней методики полностью соответствую т самым
последним стандартам JavaScript и наилучшей практике программирования. Каждая
глава содержит примеры реального кода, которые вы сможете протестировать в брау
зере в домаш них условиях.
Точно так же, как для музыканта единственный способ оказаться на сцене КарнегиХ о л л а — это репетировать, репетировать и еще раз репетировать, единственный спо
соб стать лучш им программистом — кодировать, кодировать и еще раз кодировать!
О чем э/па книга
Э та книга представляет собой доступное руководство, предназначенное для тех, кто
только учится писать код на JavaScript. П о сравнению с другим и языками программи
рования JavaScript отличается простотой, и вам будет нетрудно начать его применять.
В ви д у легкости освоения этого языка многие из тех, кто начинал свою деятельность
как веб-дизайнер, вскоре обнаруживали, что в состоянии самостоятельно изменять и
писать JavaScript-код. Если вы относитесь к этой категории людей, то книга поможет
вам бы стро и без лиш них сложностей войти в курс дела.
Независим о от того, знакомы ли вы с JavaScript-кодом или никогда в жизни его не
видели, эта книга научит вас самостоятельному созданию корректного кода.
В частности, в книге рассматриваются следующие темы:
S
базовая структура JavaScript-программ;
S
интеграция JavaScript с H T M L и C S S ;
S
структурирование программ за счет использования функций;
S
работа с объектами JavaScript;
S
использование передовых методик JavaScript, таких как A J A X , функ
ции обратного вызова и замыкания;
S
основы jQuery.
О своение языка JavaScript не сводится к изучению одного только синтаксиса. Вы
также должны знать, как получить доступ к инструм ентам разработчика и присоеди
ниться к сообществу, успевш ем у сформироваться вокруг этого языка. За всю длитель
ную и увлекательную историю развития JavaScript профессиональные программисты
идеально отшлифовали инструм ентальны е средства и методики, применяемы е для
создания программ на этом языке. В книге мы постоянно обращаем ваше внимание на
наилучшие из сущ ествую щ их подходов и средств, предназначенных для тестирования
и документирования кода и повышения эффективности всего процесса разработки в
целом.
Сделаем несколько замечаний, которые облегчат вам чтение книги.
S
В есь JavaScript-код, а также разметка H T M L и C S S выделяются в тек
сте м онош иринны м шрифтом, например:
document.write("Привет!") ;
S
П оск ол ьку размеры кн и ж ны х стр ан и ц не совпадаю т с размерами
экранов компьютерных мониторов, длинные цепочки H T M L - , C S S - и
JavaScript-кода м огут продолжаться на нескольких строках. П о м н и
те, что компьютер рассматривает подобный код так, будто это одна
строка. М ы указываем на то, что код в действительности представля
ет собой одну строку, разрывая его на знаке препинания или пробеле
и располагая остальную часть на следующей строке с отступом при
мерно так, как показано ниже.
H T M L и C S S не особо чувствительны к регистру букв, чего нельзя
сказать о JavaScript, где это очень важно. Чтобы получать правильные
результаты, используйте прописны е и строчные буквы в строгом со
ответствии с текстом примеров.
Ucxoqubie п/геуположения
Ч тобы разбираться в программировании, вовсе не требуется бы ть программ ны м
экспертом или хакером. Доскональное знание работы компьютера для этого также не
требуется, и вы даже не обязаны уметь считать в двоичной системе.
И все же нам придется сделать некоторые предположения относительно вас. М ы
предполагаем, что вы умеете включать компьютер, знаете, как пользоваться мыш ью
и клавиатурой, имеете подключение к И нтернету и на вашем компьютере установлен
браузер. Если вам уже известно кое-что о том, как создавать веб-страницы (это не так
уж и сложно!), то считайте, что у вас есть небольшая фора.
В се остальные детали, которые потребуются вам для того, чтобы начать писать и
выполнять программы на JavaScript, изложены в этой книге. А внимание к деталям, в
чем вы сами убедитесь, — это непреложная истина программирования.
18
Введение
JlufcrfLoificuuibi, используемые в книге
Ниж е приведены пиктограммы, используемые в книге для выделения фрагментов,
на которые мы хотели бы особо обратить ваше внимание.
Э т а пиктограмма обозначает полезные советы, подсказки и приемы, п о
зволяющие экономить время и усилия.
Концентрируйте свое внимание всякий раз, когда вам встречается эта пик
тограмма. О н а говорит о том, что обозначенную ею информацию стоит
запомнить.
Будьте внимательны, очень внимательны! Э та пиктограмма предупрежда
ет о разного рода ловушках, которых следует избегать.
Э т а пиктограмм а обозначает инф ормацию технического характера, ко
торая может бы ть интересной для вас. М ож ете смело пропускать такую
информацию, но если хотите узнать технические подробности, то чтение
этих абзацев доставит вам удовольствие.
2)ополни&ельные
ма/пе/гиалы
Изложенный в книге основной материал дополняю т следующие информационные
ресурсы.
S
Примеры.
Коды примеров, используемых в книге, можно загрузить
по следующ ему адресу:
http://www.codingj sfordummies.com/code/
S
Упражнения.
Читателям, владеющим английским языком, будет по
лезно проделать упраж нения, подготовленны е для книги на сайте
w w w . c o d e c a d e m y . c o m . Чтобы получить доступ к упражнениям, по
сетите следующий сайт:
http://www.dummies.com/go/codingwithjavascript
4,tno уальиге
Н аписание программ на JavaScript доставляет большое удовольствие, и стои т вам
овладеть хотя бы минимальным багажом знаний в этой области, как перед вами откро
ется удивительный мир интерактивных веб-приложений. П оэто м у будьте смелее! М ы
надеемся, что книга станет хорош им подспорьем в ваших начинаниях.
Введение
19
Ж уем ваших ойгзывов!
В ы , читатель этой книги, и есть главный ее критик. М ы ценим ваше мнение и хо
тим знать, что было сделано нами правильно, что можно быдо сделать лучш е и что
еще вы хотели бы увидеть изданным нами. Н ам интересны любые ваши замечания в
наш адрес.
М ы ждем ваших комментариев и надеемся на них. В ы можете прислать нам бумаж
ное или электронное письмо либо просто посетить наш сайт и оставить свои замеча
ния там. О дним словом, любым удобным для вас способом дайте нам знать, нравится
ли вам эта книга, а также выскажите свое мнение о том, как сделать наши книги более
интересными для вас.
Отправляя письмо или сообщение, не забудьте указать название книги и ее авторов,
а также свой обратный адрес. М ы внимательно ознакомимся с вашим мнением и обя
зательно учтем его при отборе и подготовке к изданию новых книг.
Н аш и электронные адреса:
E-m ail:
i n f o @ d i a l e k t i k a . com
WWW:
www. d i a l e k t i k a . com
Н аш и почтовые адреса:
в России:
127055, г. М осква, ул. Лесная, д. 43, стр. 1
в Украине:
03150, Киев, а/я 152
20
Введение
Часть I
Приступаем
к программированию
на JavaScript
® И&АНО& ? A A ^ M M U p /^ r+ O O w l? 6 w k . r u
В э&ой час&и...
S
Написание первой программы на JavaScript
S
Работа с переменными и массивами
S
Операторы, выражения и инструкции
S
Циклы и ветвление кода в программах на JavaScript
Глава 1
Самый неправильно понятый язык
программирования в мире
3 Э1пой главе...
> Знакомство с JavaScript
> Возможности JavaScript
> Преимущества JavaScript
“Люди настолько плохо понимают меня, что даже мои переживания
по поводу того, что меня не понимают, им непонятны ” .
Серен Кьеркегор
зык программирования JavaScript не всегда пользовался такой большой популярностью , как в наши дни. О дни считали его лучш им языком програм
мирования в мире, другие — наихудшим. За последние несколько лет как в методику
программирования на JavaScript, так и в интерпретаторы этого языка были внесены
многочисленные усовершенствования. В результате современный язык JavaScript зна
чительно улучш ился по сравнению с ранними версиями.
В этой главе вы узнаете о том, что собой представляет JavaScript, и познакомитесь
с краткой историей развития и становления этого языка программирования. Кром е
того, вы получите общее представление о возможностях JavaScript и сферах его при
менения.
4tno tnatcoe JavaScript?
Н а заре И нтернета браузеры представляли собой простые программы для чтения
веб-страниц (рис. 1.1). О ни практически не располагали собственными функциональ
ными возможностями, в лучш ем случае позволяя лиш ь изменять размер шрифта ото
бражаемого текста. Как только компания M icrosoft выпустила браузер Internet Explorer,
разгорелась так называемая война б р аузеров — жесткое конкурентное сражение за го
сподство на рынке, резко ускорившее разработку новых средств. В браузерах одна за
одной стали предлагаться такие возможности, как отображение графики, использова
ние ш рифтов различных видов, мерцаю щ ий текст, бегущая строка и многие другие.
Рис. 1.1. Непритязательный внешний вид веб-страницы в окне одного из первых браузеров
П рош ло совсем немного времени, пока одного человека не осенила мысль, что бра
узер может не только бы ть программой для отображения текста в красивом виде, но и
самостоятельно выполнять массу полезных вещей.
И тут пришел Эйх...
П р о ект JavaScript стартовал в компании Netscape в далеком 1995 году. Брендан
Э й х , создатель языка JavaScript, написал его в рекордно короткие сроки (говорят, что
для этого ему понадобилось всего лиш ь десять дней!), заимствуя все лучш ее из ряда
других языков программирования. Из-за спеш ки, вызванной стремлением как можно
быстрее выйти на ры нок с готовым продуктом, в язык вкрались некоторые, скажем
так, “ стр ан н о сти ” (а если говорить без обиняков — ош ибки). Результат представлял
собой своеобразный язык наподобие эсперанто, который обманчиво воспринимался
людьми, имею щ ими опы т работы с другим и языками программирования, как язык, с
которым они уже знакомы.
Сначала был Mocha
Я зы к JavaScript первоначально назывался M ocha. С выпуском первой бета-версии
браузера Netscape N avigator он был переименован в L iveScrip t, но в версию браузера
Netscape 2, вы пущ енную в 1995 г., он был встроен уже как язык JavaScript. Оперативно
воспользовавшись методами обратного инж иниринга (обратной разработки), компания
M icro so ft встроила в свой браузер Internet Explorer точную копию JavaScript, назвав ее
Jscript, чтобы избежать проблем, связанных с незаконным использованием торговой
марки.
24
Часть /. Приступаем к программированию на JavaScript
Компания Netscape представила язык JavaScript в организацию Ecm a International,
занимающуюся стандартизацией информационных и коммуникационны х технологий,
где он был утвержден в качестве стандарта E C M A S c r ip t в 1997 г.
Брендан Эй х, создатель JavaScript, отпустил по поводу названия стандар
тизированного языка наш умевшее замечание, в котором охарактеризовал
E C M A S c r ip t как “ неудачное название торговой марки, звучащее подобно
названию кожного заболевания” .
Признавая E C M A S c r ip t неудачным названием для языка программирова
ния, можно сказать то же самое и в отнош ении названия JavaScript, которое
было дано языку компанией Netscape и используется больш инством тех,
кто с ним работает. Если вы уже знаете, как писать программы на языке
Java, или планируете этом у научиться, то должны отдавать себе отчет в
том, что, несмотря на определенное сходство между ними, в действитель
ности Java и JavaScript — это два соверш енно разных языка.
Даешь больше эффектов!
Сразу же после своего дебю та язык JavaScript бы стро приобрел популярность в
качестве средства, позволяющего делать веб-страницы более динамичны ми. О дним из
первых результатов встраивания JavaScript в браузеры стало появление так называе
мого динамического H T M L ( D H T M L ) — языка разметки веб-страниц, обеспечившего
реализацию не только всевозмож ных забавных эффектов, таких как падающие сне
жинки (рис. 1.2), всплывающие окна и фигурные уголки страниц, но и более полезных
вещей, например раскрывающихся меню и средств валидации (проверки корректности
данных) веб-страниц.
■^
..........
L is j. o f thin
c J a v a S c r i p t ! < / h l>
Н а рис. 2.6 показано, как этот файл отображается в окне Sublim e Text.
Если текущая цветовая схема вас не устраивает, то ее можно изменить, выI f b j j
брав пункты меню Preferences1
^ C o lo r Schem e (Устан овки ^ Ц ветовая схема) и задав другую схему.
П росм отрите несколько цветовых схем и выберите ту, которая вам больше всего по
душе. В этой книге используется цветовая схема M onokai Bright.
Если хотите проверить работу программы, которую только что ввели, то выполните
следующие действия.
Глава 2. Моя первая программа на JavaScript
41
1. Сохраните файл, выбрав пункты меню File^Save (Файл^Сохранить).
2. Откройте браузер Chrome и нажмите комбинацию клавиш .
О ткроется окно О т к р ы т ь .
3. Перейдите к файлу на своем компьютере и выберите его.
4. Щелкните на кнопке Open (Открыть).
Содерж имое файла отобразится в окне браузера.
<
>
< >
<
>Г1ривет, HTML!
<
>
f u n c t io n countToTen(){
van count
0;
(count
10 ) {
count ;
docum ent. getElementById("
theCount").innerHTML
count
M*';
>
}
12
13
14
onload=',countToTen();*'>
< >Посчитаем до 10 вместе с
JavaScript!
< id*"theCount">
Line 19, Column 8
Spaces; 2
HTML
Рис. 2.6. Применение цветовой подсветки кода в окне редактора Sublime Text
О кно вашего браузера должно выглядеть так, как показано на рис. 2.7. Если оно бу
дет иметь другой вид, тщательно проверьте свой код — возможно, вы где-то д о п усти
ли опечатку. П осле внесения необходимых изменений не забудьте сохранить файл!
Для сохранения файлов можно также использовать комбинации клавиш
(M ac) и (W indows). Когда вы привыкнете с ними
работать, они сэкономят вам массу времени.
Полезные комбинации клавиш в Sublime Text
Редактор кода Sublim e Text на первый взгляд кажется просты м текстовым редакто
ром, но это обманчивое впечатление. И стинны м показателем профессионализма про
грам миста является его ум ение эффективно использовать комбинации клавиш, обе
спечивающие значительную экономию времени при редактировании исходного кода.
42
Часть I. Приступаем к программированию на JavaScript
В редакторе Sublim e Text предусмотрено больш ое количество комбинаций клавиш
(так называемых “ горячих клавиш” ), частичный перечень которых приведен в табл. 2.2.
О свойте их, и вскоре вы поразите друзей и коллег тем, как бы стро вы работаете.
4г
С
: □ fiIe:///S:/Dialektika/JavaScriptFD/MyFirstJavaScriptProject/ СД *£? S
Посчитаем до 10 вместе с
JavaScript!
1
2
3
4
5
6
7
8
9
10
Рис. 2.7. Выполнение простой программы подсчета в Chrome
Таблица 2.2. Часто используемые комбинации клавиш
для работы с текстом в редакторе Sublime Text
Mac
Windows
Описание
Удалить строку
Вставить строку снизу
Вставить строку сверху
Переместить строку/выделенный объект вверх
Переместить строку/выделенные строки вниз
Выделить строку; повторить для выделения сле
дующих строк
Выделить слово; повторить для выделения дру
гих вхождений этого же слова
Перейти к закрывающей скобке; повторить для
перехода к открывающей скобке
Выделить все содержимое в текущих скобках
Удалить текст от текущей позиции курсора до
конца строки
Удалить текст от текущей позиции курсора до на
чала строки
Глава 2. Моя первая программа на JavaScript
43
Окончание табл. 2.2
Mac
Windows
Описание
Увеличить отступ текущей строки (выделенных
строк)
Закомментировать/раскомментировать блок вы
деленного текста
Повторить последнее действие
Вставить с отступом
Выбор варианта автозаполнения
"Мягкая” отмена; переход к месту внесения по
следнего изменения и отмена изменения после
повторного применения этой команды
Добавить курсор на предыдущей строке
Добавить курсор на следующей строке
Заключить выделенный текст в тег HTML
Офо/гмление Ja(saScrifit-fcoqa
Прежде чем приступить к написанию программ, вам надо узнать некоторые прави
ла оформления кода на JavaScript.
S
JavaScript чувствителен к регистру символов.
Э то напоминание
будет неоднократно встречаться вам на протяжении всей книги, по
скольку многие новички часто забывают об этом. В JavaScript слова
“ B a b y ” и “ baby” — соверш енно разные.
S
В JavaScript количество пробельных символов в коде не играет
особой роли. К числу пробельны х символов относятся пробелы, а
также символы табуляции и разрыва строки, т.е. лю бой символ, не
имею щий визуального представления. П ри написании кода JavaScript
не имеет значения, используете ли вы один пробел, два пробела или
даже (в больш инстве случаев) символ разрыва строки там, где требу
ется пробел. JavaScript игнорирует пробельные символы. Единствен
ным исклю чением являются случаи, когда вы записываете текст, ко
торый должен бы ть выведен на экран. В подобны х случаях пробелы
сказываются на конечном результате. Н аилучш ий подход заключается
в том, чтобы использовать пробелы для повышения удобочитаемости
кода, придерживаясь при этом определенной системы.
44
Часть I. Приступаем к программированию на JavaScript
S
Избегайте использования зарезервированных слов. В
JavaScript
есть список слов, имею щ их специальное значение в этом языке. С п и
сок этих слов приведен в главе 3. А на данном этапе вам надо просто
знать, что такие, например, слова, как f u n c t i o n , w h i l e , b r e a k и w i t h ,
имею т специальное значение.
В
JavaScript повсеместно используется символ
точка с запятой (;).
Код JavaScript со стои т из отдельных предложений, или инструкций.
И н струкц и и — фундаментальные строительны е блоки программ на
JavaScript, которые напоминаю т предложения в обы чном языке, яв
ляющиеся строительны ми блоками абзацев.
В JavaScript
инструкции
заканчиваются точкой с запятой.
Есл и вы не закончите и н стр ук ц и ю точкой с запятой, то JavaScript
сделает это за вас. О днако это может приводить к неожиданным ре
зультатам, поэтом у обозначение конца инструкций точкой с запятой
считается наилучшей практикой.
выполнение JavaScript в окне Ярацзера
Н есм отря на то что JavaScript может встретиться вам в самы х различных средах,
чаще всего программы на JavaScript выполняются в браузерах. Управление вводом и
выводом, манипулирование веб-страницами, обработка стандартны х собы тий браузе
ра, таки х как щелчки и прокрутка, управление различными возмож ностями браузе
ров — вот для чего был создан JavaScript.
С ущ е ств ую т три сп о соб а выполнения JavaScript в браузере, каждый из которых
рассматривается в последую щ их разделах:
S
поместить код непосредственно в атрибут события H T M L -элемента;
S
поместить код между открываю щим и закрывающим тегами s c r i p t ;
S
поместить код в отдельный документ, который включается в документ
H TM L.
В ы будете не раз использовать различные комбинации всех этих трех подходов на
одной и той же веб-странице. Однако знание того, когда именно следует применять тот
или иной подход, имеет огромное значение, и это знание приходит лиш ь с практикой.
Использование JavaScript в атрибутах
событий HTML-элементов
В H T M L предусмотрено несколько специальны х атрибутов, предназначенных для
запуска JavaScript при наступлении определенных собы тий в браузере или при выпол
нении пользователем определенных действий. В о т пример H T M L -элемента b u t t o n с
атрибутом события, обеспечиваю щим реакцию на щелчки мышью:
c b u tto n
id = " b ig B u t t o n M o n c l i c k = " a l e r t ( ' П р и в е т,
м и р ! ') ; "М Ц е л к н и т е
зд е сь < /Ь и ^ о п >
Глава 2. Моя первая программа на JavaScript
45
В данном случае, когда пользователь щелкает на кнопке, созданной этим H T M L элементом, на экране появляется всплывающее окно, в котором отображается текст
“ Привет, м и р !” .
В H T M L насчитывается около 70 различных атрибутов собы тий. Наиболее часто
используемые из них приведены в табл. 2.3.
Таблица 2.3. Часто используемые атрибуты событий элементов HTML
Атрибут
У словие запуска сценария
o n lo a d
Окончание загрузки страниц
o n fo c u s
Получение элементом фокуса ввода (например, при активизации текстового поля)
o n b lu r
Потеря элементом фокуса ввода (например, в результате выполнения пользователем
щелчка в другом текстовом поле)
onchange
Изменение значения элемента
o n s e le c t
Выделение текста
o n s u b m it
Отправка формы
onkeydow n
Нажатие клавиши
o n k e y p re ss
Нажатие и последующее отпускание клавиши
onkeyup
Отпускание клавиши
o n c lic k
Щелчок мышью на элементе
o n d ra g
Перетаскивание элемента
o n d ro p
Вставка перетаскиваемого элемента
onm ouseover
Перемещение указателя мыши над элементом
В о о б щ е говоря, н есм о тр я на п р о сто ту о п и са н н о го сп о со б а , м ноги е
JavaScript-программисты считаю т этот подход не лучш им решением. М ы
демонстрируем его применение в книге, поскольку атрибуты собы тий ш и
роко применяются и просты в изучении. Н о уже сейчас вы должны знать,
что для написания JavaScript-кода, реагирующего на события, сущ ествую т
лучш ие способы , чем использование атрибутов собы тий. Более подробно
этот вопрос рассматривается в главе 11.
Использование JavaScript в элементе script
H T M L -элемент s c r i p t позволяет внедрить код JavaScript в H T M L -документ. Эле
менты s c r i p t часто помещают в элемент h e a d , и ранее этот способ считался чуть ли
не обязательным. Однако в наши дни элементы s c r i p t использую тся как в элементе
h e a d , так и в теле веб-страниц.
Элем ент s c r i p t имеет очень простой формат.
< s c r ip t >
Сюда вставляется код Ja v a S crip t
< / s c r ip t >
46
Часть /. Приступаем к программированию на JavaScript
С примером такого сп о соб а внедрения сценариев вы уже встречались в л и сти н
ге 2 .1 . В листинге 2 .2 представлен другой пример H T M L -документа с тегом s c r i p t ,
содержащим JavaScript-код. Однако в данном случае элемент s c r i p t находится в кон
це тела документа (элемента b o d y ) .
Листинг
2.2.
Внедрение JavaScript-кода в элемент
s c r i p t ________________________
< ! D O CTYPE h t m l>
< h tm l>
< head>
npMBeT, H T M L !
< /h e a d >
< body>
< Ы > П осчи таем до
10 в м е с т е
c J a v a S c r i p t ! < / h l>
";
< /s c r ip t >
< /b o d y >
< / h t m l>
Если вы создадите новый файл в Sublim e Text, введете в него содержимое листин
га 2.2, а затем откроете его в браузере, то увидите, что этот листинг делает то же са
мое, что и листинг 2.1.
Зависимость момента запуска сценария JavaScript
отрасположения элемента s c r i p t
Как правило, выполнение сценариев браузерами происходит по мере их загрузки.
Браузер всегда читает веб-страницу сверху вниз, как это делаете и вы, читая обы чную
текстовую страницу. Н о иногда желательно, чтобы выполнение сценария начиналось
лиш ь после того, как браузер загрузит полностью всю страницу. В листинге 2.1 это
достигалось за счет использования атрибута события o n l o a d в элементе b o d y . Другой
общепринятый способ, позволяющий задержать выполнение сценария, состои т в том,
чтобы поместить подлежащий выполнению код в самом конце документа, как это сде
лано в листинге 2.2.
Ограничения JavaScript-кода, находящегося в элементах s c r i p t
Несмотря на то что внедрение сценариев JavaScript в элементы s c r i p t более пред
почтительно по сравнению со встраиванием в атрибуты собы тий, у такого подхода
имеются серьезные ограничения.
Наибольш им из них является то, что сценарии, внедренные таким способом, может
использовать лиш ь та веб-страница, в которую они помещены. И ны м и словами, если
вы помещаете свой сценарий в элемент s c r i p t , то должны скопировать этот элемент
Глава 2. Моя первая программа на JavaScript
47
и вставить его во все веб-страницы, в которых он используется. Нетрудно понять, что
сопровождение сайтов, содержащих сотни таких страниц, превращается в сплош ной
кошмар.
Когда целесообразно располагать JavaScript-код в элементах s c r i p t
Э т о т метод внедрения JavaScript-кода имеет свои области применения. В случае
небольш их сценариев, которые просто вызывают другие сценарии JavaScript и изме
няются лишь изредка, данный методвполне приемлем и даже может привести к сокра
щ ению времени загрузки и отображения веб-страниц, поскольку количество запросов
к серверу при этом уменьшается.
Одностраничны е приложения, которые (как следует из самого их названия) состоят
из единственной H T M L -страницы , также великолепно подходят для использования
данного типа внедрения сценариев, поскольку вносить изменения, если это потребу
ется, надо будет только в одном месте.
Однако, как правило, следует всегда использовать лю бую возможность м иним изи
ровать объем JavaScript-кода, внедряемого непосредственно в H T M L -документ. Э то
упрощ ает сопровождение сайта и позволяет лучш е структурировать код.
Включение внешних JavaScript-файлов
Т р е ти й и наиболее п опулярны й с п о со б вклю чения кода Ja v a S crip t в H T M L документы основан на использовании атрибута s r c элемента s c r i p t .
Элем ент s c r i p t с атрибутом s r c работает точно так же, как и элемент s c r i p t , в
котором JavaScript-код располагается между тегами, за исключением того, что в случае
использования атрибута s r c код JavaScript загружается в H T M L -докум ент из отдель
ного файла. В о т пример элемента s c r i p t с атрибутом s r c :
< s c r ip t
s r c = " m y S c r ip t . j s " x / s c r i p t >
В данном случае должен сущ ествовать отдельный файл m y S c r i p t . j s , распола
гаю щ ийся в той же папке, что и H T M L -документ. И спользование внеш них файлов
JavaScript предоставляет следующие преимущества:
S
улучш ается удобочитаемость H T M L -файлов;
S
упрощ ается сопровож дение кода, поскольку вносить изменения или
исправлять ош ибки приходится только в одном месте.
Создание . j s -файла
Создание внешнего JavaScript-файла напоминает создание H T M L -файла и вообще
файла любого другого типа. Чтобы заменить внедренный JavaScript-код в листинге 2.1
внешним JavaScript-файлом, выполните следующие действия.
1. Выберите в редакторе Sublime Text пункты меню File^New File (ФайлО
Создать).
2. Скопируйте все, что находится между тегами < s c r ip t> и < /s c r ip t> в фай
ле M yFirstProgram .html, и вставьте его во вновь созданный . j s -файл.
48
Часть I. Приступаем к программированию на JavaScript
О братите внимание на то, что во внешние файлы копируется только JavaScriptкод без элементов < s c r i p t > .
3. Сохраните новый файл с именем countToTen.js в той папке, в которой
уже находится файл MyFirstProgram.html.
4. Измените элемент в файле MyFirstProgram.html, добавив в него
атрибут arc, как показано ниже.
< s c r ip t
s r c = f,c o u n t T o T e n . j s " > < / s c r i p t
Теперь файл M y F i r s t P r o g r a m . h t m l должен содержать следую щ ий текст.
< ! D O CTYPE h t m l>
< h tm l>
< head>
npMBeT,
H T M L !
< s c r i p t s r c = n c o u n t T o T e n . j s Mx / s c r i p t >
< /h e a d >
< b o d y o n lo a d = " c o u n t T o T e n ( ) ; " >
< Ы > П о с ч и т а е м д о 10 в м е с т е
";
+=
П осле того как вы сохраните оба файла, они должны появиться в папке вашего про
екта, отображаемой в боковой панели редактора Sublim e Text (рис. 2.8).
Организация . j s - файлов проекта
Некоторые JavaScript-файлы м огут достигать очень больш их размеров. В о м ногих
случаях целесообразно разбивать их на меньшие файлы, организованные по ти п у со
держащихся в них функций. Н апример, один файл может содержать сценарии, свя
занные со входом пользователя в вашу программу, а второй — сценарии, связанные с
ведением блога.
Однако для небольших программ обы чно достаточно иметь всего лиш ь один файл,
и, как правило, такому файлу присваивают какое-либо типовое имя, например а р р . j s ,
m a i n . j s или s c r i p t s . j s .
Глава 2. Моя первая программа на JavaScript
49
Й
bXDialektikaVavBScriptFDXMyFirstiavaScriptProjectXcountToTen.js (myFirstProject) - Sublim e Text 2 (UN... i a
File
■
£drt
Selection
Find
View
£ o to
To o ls
Project
Preferences
|[ 0
Help
& | 1 Ш Н Н В Н 1
FOLDERS
V MyFirstlavaScriptProject
MyFirstProgram.html
myFirstProject,sublime-project
myFirstProject,subiime-workspace
Рис. 2.8. Просмотр файлов, находящихся в папке проекта, в редакторе Sublime Text
JavaScript-файлы не обязательно должны находиться в той же папке, что и H T M L файл, который их включает. Более того, мы рекомендуем вам создавать новую папку,
предназначенную специально для хранения внешних JavaScript-файлов. Большинство
людей, которых мы знаем, присваивают таким папкам имена наподобие j s .
Ч тобы создать папку j s в вашем проекте Sublim e Text и переместить в нее . j s файл, выполните следующие действия.
1. Щелкните правой кнопкой мыши на имени проекта в боковой панели
Sublime Text.
О ткроется подменю.
2. Выберите в подменю пункт New Folder (Создать папку).
В нижней части окна Sublim e Text появится поле F o l d e r Nam e (Имя папки).
3. Введите имя папки j s в текстовом поле и нажмите клавишу .
В боковой панели отобразится новая папка j s .
4. Откройте файл countToTen . j s , выберите пункты меню File^Save As и со
храните файл в новой папке j s .
5. Щелкните правой кнопкой мыши на версии файла countToTen.js, храня
щейся вне папки j s , и выберите в открывшемся подменю пункт Delete File
(Удалить файл).
50
Часть /. Приступаем к программированию на JavaScript
6. Откройте файл MyFirs tProgram.html и измените элемент таким
образом, чтобы он отражал новое расположение . j s -файла.
< s c r ip t
s r c = " js / c o u n t T o T e n .js " x / s c r ip t
Когда вы откроете файл M y F i r s t P r o g r a m . h t m l в браузере (или просто обновите
страницу), страница должна выглядеть точно так же, как и до перемещения JavaScriptфайла в его собственную папку.
Uc/гользование консоли
разработчика JavaScript
И н огда полезно иметь возм ож ность запускать команды JavaScript без создания
веб-страницы и последующего включения в нее кода сценариев или блоков < s c r i p t > .
В подобных ситуациях можно воспользоваться консолью JavaScript браузера Chrom e
(рис. 2.9).
|G o og le
С
х
6 https://www.google.com.ua/ .'gf
Г(НУ ::: ЩЩт
” * шимм
Google
£
Понс»; ш GOO06
Gaogte.aom
м
j Украиш
Мне псе-»де-г!
ттрадлвгается чг. / Создание и использование переменных
> Область видимости переменных
> Типы данных JavaScript
> Правила именования переменных
> Использование встроенных функций для работы с переменными
“Красота изменчива, уродство постоянно ".
Дуглас Хортон
J2
этой главе вы узнаете о том, как создавать переменные, присваивать им значения, использовать функции, позволяющие определить тип переменных, пре
образовывать данные из одного типа в другой и манипулировать данными.
JioHSunue переменной
П ерем енн ы е — это символические имена в программе. Точно так же, как х может
представлять некоторое пока еще неизвестное значение в алгебре или точку на пират
ской карте, обозначающую место, где зарыты сокровища, переменные в программиро
вании используются для представления всевозможных величин.
М ожете считать переменные контейнерами, предназначенными для хранения дан
ных. Э ти м контейнерам можно присваивать имена и впоследствии использовать их
для извлечения и изменения хранимых данных.
В отсутствие переменных любая компьютерная программа может быть предназна
чена только для чего-то одного. Например, рассмотрим следующий пример, включаю
щий всего лиш ь одну строку, в которой не используются переменные:
a l e r t (3 + 7 ) ;
Э т а программа сум м ирует числа 3 и 7 и выводит результат во всплывающем окне
браузера.
О днако от такой программы нет почти никакого толка (если только вам не прихо
дится регулярно вспоминать, чему равна сум м а чисел 3 и 7). Используя переменные,
можно создать универсальную программу, которая будет суммировать любые два чис
ла и выводить результат, как в следующем примере.
var
f ir s t N u m b e r
var
seco n dN u m b er = 7;
= 3;
var total = Number(firstNumber)
alert (total);
+ Number(secondNumber);
Сделав еще один шаг, можно расш ирить программу таким образом, чтобы пользо
ватель мог задавать числа, сум м у которых требуется найти.
var firstNumber = prompt("Введите первое число");
var secondNumber = prompt("Введите второе число");
var total = Number(firstNumber) + Number(secondNumber);
alert (total);
Проверьте сами, как работает эта программа. (О том, как работать с редактором
кода, см. в главе 2.) Для этого выполните следующие действия.
1. Откройте редактор кода и создайте базовый шаблон HTML-документа.
2. Между тегами и вставьте открывающий и закрывающий
теги сценария ( и ).
3. Введите между тегами сценария приведенный выше JavaScript-код.
Теперь ваш докум ент должен приобрести следующий вид.
< body>
< s c r ip t >
var firstNumber = prompt("Введите первое число");
var secondNumber = prompt("Введите второе число");
var total = Number(firstNumber) + Number(secondNumber);
alert (total);
< / s c r ip t >
< /b o d y >
4. Сохраните свой новый HTML-документ в файле с именем addTwo.html.
5. Откройте HTML-документ в браузере.
П рограмм а предложит вам ввести первое число (рис. 3.1).
6. Введите первое число.
П рограмм а предложит вам ввести второе число.
7. Введите второе число.
П осле того как вы предоставите второе число, результат сложения двух введен
ны х чисел отобразится на экране.
56
Часть /. Приступаем к программированию на JavaScript
Рис. 3.1. Универсальная программа, выполняющая сложение двух чисел,
предоставляемых пользователем
О
б ъ я в л ен и е п е р е м
е н н ы
х
О бъявление перем енной — это технический термин, который используется для опи
сания процесса первоначального создания переменной в программе. Вам также может
встретиться эквивалентный ему термин инициализация. Создание переменной, объ
явление переменной, инициализация переменной — все эти выражения имею т один
и тот же смысл.
В JavaScript переменные можно создавать одним из двух способов.
S
С
использованием ключевого слова
v a r.
var myName;
П ерем енной, объявляемой с помощ ью ключевого слова var, можно
присвоить начальное значение в момент ее создания (это называется
инициализацией перем енной).
var myName = "Chris"
S
Без использования ключевого слова
v a r.
myName = "Chris";
Когда “равно” не означает равенство
Инструкции наподобие этой, которые содержат
знак
обычно читаются так :“3начение пере
менной v a r равно " C h r i s " ”. Однако в про
граммировании такая буквальная интерпретация
этого выражения не совсем корректна.
Рассмотрим инструкцию v a r m y N a m e =
" C h r i s " ; более подробно.
Глава 3. Работа с переменными
Несмотря на то что символ, помещенный
между именем переменной (m yNam e) и ее зна
чением ( " C h r i s " ) , выглядит в точности как знак
равенства и даже вводится с использованием
той же клавиши, в программировании он назы
вается не знаком равенства, а оператором при
сваивания.
57
Очень важно, чтобы вы понимали смысл раз
личия между оператором присваивания и опера
тором “равно”.
/ Оператор присваивания устанавливает для
переменной, находящейся слева, значение,
* Оператор “равно” сравнивает значение, рас
положенное слева, со значением, располо
женным справа, и определяет, равны они или
не равны. В JavaScript оператор “равно” запи
сывается как === (три знака равенства).
равное значению выражения, находящегося
справа:
v a r myName = " C h r i s " ;
Переменная, созданная без использования ключевого слова v a r , становится глобаль
ной переменной. (Глобальные переменные рассматриваются в следующем разделе.)
Обратите внимание на кавычки, окружающие значение, находящееся спра
ва от оператора присваивания в предыдущих примерах. Кавычки указыва
ют на то, что это значение должно интерпретироваться как текст, а не как
число, ключевое слово JavaScript или другая переменная. Более подробно
о том, когда и при каких обстоятельствах следует использовать кавычки,
говорится в разделе, посвященном типам данных.
Глобальные и локальные области виуиимапи
Как и где объявлять переменную, зависит от того, как именно и в каких местах про
граммы эта переменная используется. Клю чевую роль здесь играет понятие област и
видим ост и переменной. В JavaScript сущ ествует два типа области видимости.
S Г лобальны е п ерем ен ны е м огут использоваться в лю бом месте про
граммы.
S Л окальн ы е п ерем ен ны е (переменные ф ункций) — это переменные,
создаваемые в защ ищ енны х программах, которые располагаю тся в
основной программе и называются функциями.
Трагическая история о недостающем ключевом слове v a r
В создании переменных без использования ключевого слова v a r нет никакой реальной необходимо
сти. Более того, во многих случаях это чревато проблемами. Если вы опускаете ключевое слово v a r ,
то это выглядит так, будто вы о нем попросту забыли, поэтому никогда так не поступайте!
Приведем пример того, какого рода проблемы могут возникать из-за пропущенного ключевого
слова v a r . В этом примере также будет продемонстрировано использование более сложных про
граммных конструкций — функций, о которых будет более подробно рассказано в главе 7. Если гово
рить коротко, то функции позволяют разбивать программы на более мелкие части.
В этом примере программист хочет создать глобальную переменную m o v ie и другую перемен
ную, которая называется так же, но действительна только в функции s h o w B a d M o v ie (). В этом
нет ничего предосудительного, и при обычных обстоятельствах переменная m o v ie , находящаяся
в функции, никоим образом не будет взаимодействовать с одноименной глобальной переменной.
58
Часть /. Приступаем к программированию на JavaScript
В то же время, если вы забудете указать ключевое слово v a r при объявлении переменной в функции,
то начнут происходить неприятные вещи.
v a r m o vie = "Крестны й о т е ц " ;
fu n c tio n
a le r t
s h o w G o o d M o v ie
()
{
( m o v ie + " - хо р о ш и й ф и л ь м ! " ) ;
}
fu n c tio n
s h o w B a d M o v ie
()
m o v ie = "З н а к о м ь т е с ь ,
a le r t
{
Джо Б л э к " ;
( m o v ie + " - п л о х о й ф и л ь м ! " ) ;
}
Обратите внимание на то, что в функции s h o w B a d M o v i e () перед переменной m o v i e отсут
ствует ключевое слово v a r . Поэтому JavaScript предполагает, что вы хотите переопределить зна
чение глобальной переменной, а не создать новую переменную. Результат этого является поистине
катастрофическим!
sh o w G o o dM o v ie ();
sh o w B a d M o v ie ();
/ * Ой!
//
вы во д и тся сообщение:
//
" К р е с т н ы й о т е ц - хо р ош и й ф и л ь м ! "
//
в ы в о д и тся сообщение:
//
"Знаком ьтесь,
Фильм " З н а к о м ь т е с ь ,
к а к плохой,
Джо Б л э к - п л о х о й ф и л ь м ! "
Джо Б л э к " был п р е д с т а в л е н
но т е п е р ь э т о н а з в а н и е п р и с в о е н о в виде зн а ч е н и я
гл об ал ьн ой переменной m o v ie .
sh o w G o o d M o v ie ();
*/
//
в ы в о д и тся сообщение:
//
"Знакомьтесь,
X
Джо Б л э к - хо р о ш и й ф и л ь м ! "
Q fi!e:///S:/Dialektika/JavaScriptFD/movies.htrnl
О п о в е щ е н и е J a v a S c rip t
х
Знакомьтесь Дж о Блэк - хорош ей фильм!
Предотвратить создание дополнительных диалоговых окон на этой странице.
Глава 3. Работа с переменными
59
Вообщ е говоря, лучш е использовать локальные переменные, а не глобаль
ные, поскольку ограничение области видимости снижает вероятность того,
что значение данной переменной будет случайно заменено значением дру
гой переменной с тем же именем.
Использование глобальных переменны х может приводить к возникновению про
блем в работе программы, которые вам будет трудно обнаруж ить и исправить. М ы ре
комендуем полностью отказаться от практики объявления переменных без использова
ния ключевого слова v a r . Если у вас возникает необходимость в создании глобальной
переменной, ее также лучш е всего объявлять с помощ ью ключевого слова v a r , и мы
советуем всегда придерживаться этого правила.
именование пе/геменннх
И м ена переменных мож гут начинаться с одного из следую щ их символов:
S
буква в верхнем или нижнем регистре;
S
символ подчеркивания (_);
S
знак доллара ($).
Н есм отря на то что использование символа подчеркивания и знака доллара в на
чале имен переменных считается допустим ы м , все же лучш е, чтобы имя переменной
начиналось с буквы. Н епривы чны е символы часто затрудняют чтение кода и делают
его менее понятным, особенно для новичков в JavaScript.
Вслед за первым символом имени переменной м огут стоять любые буквы и циф
ры, причем имя может иметь лю бую длину. И м ена переменных в JavaScript не м огут
содержать пробелы, символы операторов и знаки препинания (отличные от символа
подчеркивания).
Не забывайте о том, что язык JavaScript чувствителен к регистру. П еремен
ные с именами гп уп аш е, М у п а ш е и m yN am e — это разные переменные.
Ф актически имена переменных являются идентификаторами. Л учш е всего давать
переменным точные и осмы сленны е названия. Иногда соглашения, касающиеся име
нования переменных, м огут приводить к длинны м именам, но обы чно длинное имя,
которое точно отражает назначение переменной, более полезно, чем ничего не знача
щее короткое имя.
Разум еется, чтобы не усл ож нять себе ж изнь, не следует использовать
слишком длинные имена переменных. Если для точной передачи смысла
переменной потребуется имя длиной 20 символов, это нормально. Н о если
вы создаете переменные с таким и именами, как n a m e O f P e r s o n W h o J u s t
F i l l e d O u t T h e F o r m O n M y W e b s i t e , то, вероятно, стои т использовать более
короткие имена наподобие p e r s o n N a m e , чтобы у п р о сти ть ж изнь себе, а
также другим людям, которые, возможно, будут читать ваш код.
60
Часть /. Приступаем к программированию на JavaScript
Рекомендации по созданию хороших имен переменных
Несмотря на то что JavaScript предоставляет большую свободу при назначении имен переменным, бу
дет лучше, если вы выработаете для себя определенные правила в отношении этого еще до того, как
приступите к программированию. Например, должны ли имена переменных начинаться со строчной
или с прописной буквы? Разделять ли отдельные слова в составных именах символом подчеркивания
или писать их слитно, но использовать “верблюжий стиль”, при котором каждое слово начинается с
прописной буквы? По мере усложнения кода важность правильного выбора стратегии присвоения
имен переменных становится очевидной.
К счастью, в выработке собственного стиля оформления программ вы не остаетесь одиноки. Су
ществуют проверенные опытом правила именования перемененных, которых стараются придержи
ваться программисты на JavaScript. Вот эти правила.
/
Не используйте слишком короткие имена! Имена, состоящие из одной буквы, равно как и име
на, не несущие никакого смысла, — далеко не лучший выбор для использования в качестве имен
переменных.
/
Используйте составные имена, чтобы как можно точнее описать назначение переменных.
/
В составных именах всегда располагайте прилагательные слева, например v a r g r e e n P y t h o n ;.
Выберите определенный стилъдля составных имен и строго придерживайтесь его. Возможны два
способа объединения слов для создания имени: использование “верблюжьего” стиля или символов
подчеркивания. JavaScript— гибкий язык, и вы вправе использовать любой из этих методов, но обыч
но применяют первый из них.
Некоторые слова нельзя использовать в качестве имен переменных. Ниже приведен перечень
зарезервированных слов, которые не могут выступать в качестве названий переменных, функций,
методов, меток циклов и объектов.
abstract
else
instanceof
boolean
enum
int
synchronized
break
export
interface
this
switch
byte
extends
long
throw
case
false
native
throws
catch
final
new
transient
char
finally
null
true
class
float
package
try
const
for
private
typeof
continue
function
protected
var
debugger
goto
public
void
default
if
return
volatile
delete
implements
short
while
do
import
static
with
double
in
super
Глава 3. Работа с переменными
61
Создание KOHCtnaHtn с помощью
ключевого слова const
Иногда может возникать необходимость в переменных, значения которых не м огут
быть изменены. Подобны е переменные, которые называют конст ант ам и , объявляют
ся с использованием ключевого слова c o n s t .
const
h e ig h tO fT h e E m p ire S ta te B u ild in g
const
const
const
s p e e d O fL ig h t = 299792458;
n u m b e r O f P r o b le m s = 99;
m eanN um berofB ooksR eadIn2014
= 1454;
= 12 ;
Константы подчиняются тем же правилам, что и другие переменные, но коль скоро
вы создали переменную как константу, ее значение не может бы ть изменено на про
тяжении всей ее жизни (которая длится, пока выполняется сценарий).
Раво/Иа с вгипами данных
Тип данны х переменной указывает на то, данные какого вида м огут храниться в
переменной и какие операции м огут выполняться с использованием ее значения. Н а
пример, число 10, используемое в текстовом предложении, отличается от числа 10,
используемого в операции сравнения. Ти п ы данных — это способ, используемый в
JavaScript для проведения различий между значениями, используемыми как текст, и
значениями, которые должны обрабатываться как математические выражения.
Если вы проанализируете все типы данных, с которыми вам приходится сталкиваться
в повседневной жизни, — это и круговые диаграммы, и рецепты, и короткие рассказы,
и журнальные статьи, и многое другое, — то поймете, насколько все усложняется, когда
речь идет о данных. Великодушные создатели JavaScript решили сделать все для того, что
бы облегчить вам жизнь. О ни предусмотрели всего лишь пять основных типов данных.
Более того, JavaScript относится к категории так называемых слабо т ипизирован
ных язы ков. Э то означает, что от вас не требуется сообщ ать JavaScript или даже знать
это самому, будет ли создаваемая вами переменная содержать слово, абзац, число или
какой-либо другой тип данных.
Слабая типизация означает, что JavaScript не требует, чтобы вы сообщ али ему о
том, что есть число, а что есть слово. О н с поблажкой относится к этому и незаметно
для вас выполняет “ за кулисами” всю работу по определению типов данных, храня
щихся в переменных.
JavaScript распознает пять основны х или, как говорят, прим итивны х (эле
ментарных) типов данных. В языке программирования C++ насчитывается
по крайней мере 12 различных типов данных.
Числовой тип данных
В JavaScript числа хранятся в виде 64-разрядных значений с плавающей точкой.
В переводе на обы чны й язык это означает, что их значения м огут меняться в преде
лах от ±5*10-324 (т.е. 5 с предш ествую щ ими 323 нулями после десятичной точки) до
62
Часть /. Приступаем к программированию на JavaScript
=Ь1.7976931348623157х 10308 (переместите десятичную точку вправо на 308 позиций, и
вы увидите это гигантское число). Лю бое число может быть записано как с десятичной
точкой, так и без нее. В отличие от больш инства других языков программирования,
в JavaScript отсутств ую т отдельные типы данны х для целых чисел (полож ительных
и отрицательных чисел без дробной части) и чисел с плавающей точкой (десятичных).
Н асколько велико самое больш ое число, которое мож но использовать
в JavaScript? В о т как оно выглядит, будучи записанны м не в научном, а
в обычном формате.
17976931348623157000000000000000000000000000000000000000000000000000
00000000000000000000000000000000000000000000000000000000000000000000
00000000000000000000000000000000000000000000000000000000000000000000
00000000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000
Объявление числовой переменной состои т из следую щ их элементов:
S
ключевое слово v a r ;
S
имя, назначенное переменной;
S
оператор присваивания;
S
число (или же выражение, которое сводится к числу);
S
точка с запятой.
В о т некоторые примеры корректного объявления числовых переменных.
v a r n u m b e r O f D u c k s = 4;
v a r p o p u la t io n O f S p a in = 47200000;
var
howManyTacos
= 8;
Функция N u a ib e r ()
В JavaScript предусмотрена встроенная функция N u m b e r ( ), предназначенная для
преобразования чисел, которые могут участвовать в вычислениях. Чтобы использовать
эту функцию, просто укажите значение (или содержащую его переменную), которое
вы хотите преобразовать в число, в круглых скобках после имени N u m b e r .
Ф ункция N u m b e r () имеет четыре типа выходных значений, которые перечислены
ниже.
S
Числа, отформатированные как текстовые строки, преобразую тся в
числа, которые м огут участвовать в вычислениях:
N u m ber("42 ")
S
//
возвращает число
42
В случае строк, которые не м огут бы ть преобразованы в числа, воз
вращается значение N aN :
N u m ber(" e g g s " )
S
N u m ber(tru e)
S
//
возвращ ает
з н а ч е н и е NaN
В случае булевого значения t r u e возвращается число 1:
//
возвращ ает число
1
В случае булевого значения f a l s e возвращается число 0:
N u m b e r(fa ls e )
Глава 3 . Работа с переменными
//
возвращ ает число
0
63
Функция p a r s e l n t ()
Для JavaScript все числа являются фактически числами с плавающей точкой. О дна
ко с помощ ью функции p a r s e l n t () вы сможете взять только целую часть числа (без
дробной части), отбросив все, что находится после десятичной точки.
p a r s e l n t (1 0 0 .3 3 );
//
возвращ ает
100
Функция p a r s e F lo a t ( )
Ф ункция p a r s e F l o a t () позволяет явно указать JavaScript, что данное число долж
но трактоваться как число с плавающей точкой. Кром е того, ее можно использовать
для преобразования строки в число, например:
p a r s e F lo a t (1 0 0 .3 3 ); //возвращ ает 100.33
p a r s e F l o a t ( " 1 0 " ) ; / / в о з в р а щ а е т 10
Примеры
Теперь вы уже достаточно осведомлены для того, чтобы самостоятельно поэкспе
риментировать с числами и числовыми функциями. П опробуйте ввести приведенные
ниже выражения в консоли JavaScript браузера Chrom e и посмотрите, к каким резуль
татам они приводят.
Для открытия консоли JavaScript можно использовать комбинацию клавиш
(M ac) или (Windows).
1 + 1
3 * 3
p a r s e F lo a t ("839");
p a r s e l n t ("3 3 .3 3 3 3 3 3 ");
12 + " 12 "
"12 " + 12
"12 " * 2
Числовы е переменные долж ны объявляться без использования кавычек:
"1 0" — это не то же самое, что 10. Первое из этих значений является стро
кой (строки рассматриваю тся в следующем разделе), и если вы случайно
объявите переменную, инициализировав ее числом, заключенным в кавыч
ки, то можете получить неожиданные результаты.
Е сли вы были внимательны, то могли заметить несколько необы чное поведение
переменны х в преды дущ их примерах. Н ап р и м ер , если к " 1 2 " (строка) прибавить
12 (число), то результатом будет "1212" (строка). Н о если вы умнож ите " 1 2 м (строка)
на 2 (число), то получите 24 (число). Э то как раз тот случай, когда JavaScript анализи
рует текст программы.
В первом примере (сложение), поскольку одно из слагаемых является строкой,
JavaScript предполагает, что оба слагаемых рассматриваются вами как строки. Поэтому
число преобразуется в строку, а символ + интерпретируется как операт ор конкатенации.
64
Часть /. Приступаем к программированию на JavaScript
В о втором примере (умножение) одним из значений, участвую щ их в операции, яв
ляется число, а операция умножения двух строк не имеет смысла. П оэтом у JavaScript
преобразует строку в число, после чего выполняет операцию умножения. Н о что слу
чится, если вы попытаетесь перемножить две строки?
"sassafras" * "orange"
Результатом будет значение N a N (N ot a N u m b er —
не число). П оскольку строки
"sassafras" и "orange" не преобразую тся в числа, JavaScript проводить бессм ы с
ленное вычисление.
Строковый тип данных
С тр оки м огут состоять из следую щ их символов:
S
буквы;
S
цифры;
S
знаки пунктуации (например, запятая или точка);
S
специальные символы, которые могут быть записаны с помощью сим
вола с предш ествую щ им ему символом обратной косой черты.
Некоторы е символы , например кавычки, имею т в JavaScript особы й см ы сл или
требую т использования особы х сочетаний символов (например, символов табуляции
или разрыва строки) для представления в строках. М ы называем их специальны м и
символами. Специальны е символы, которые можно использовать в строках JavaScript,
приведены в табл. 3.1.
Таблица 3.1. Специальные символы JavaScript
Код
Описание
V
Одинарная кавычка
\"
Двойная кавычка
\\
Обратная косая черта
\п
Перевод строки
\г
Возврат каретки
\t
\ь
Табуляция
\f
Подача формы
Возврат на один символ
Строковая переменная создается путем заключения значения в одинарны е или
двойные кавычки:
var myString = "Привет, я строка.";
Не имеет никакого значения, какие кавычки вы для этого используете — одинарные
или двойные, лиш ь бы открывающая и закрывающая кавычки были одного типа.
Глава 3. Работа с переменными
65
О круж ив строку одинарными кавычками, можно беспрепятственно использовать
двойны е кавычки в составе сам ой строки. П одобны м образом, заключив строку в
двойные кавычки, вы без проблем сможете включать в нее одинарные кавычки.
Заключив строку в кавычки одного типа, вы не сможете использовать ка
вычки этого же типа в строке, поскольку парсер JavaScript, встретив пер
вую из таких внутренних кавычек, решит, что вы имели в виду закончить
ею строку, и сгенерирует ошибку.
Экранирование кавычек
П роблема включения кавычек в строку, окруж енную кавычками того же типа, ре
шается помещением символа обратной косой черты (\) перед внутренней кавычкой.
Э то называется экранированием кавычек.
Функции для работы со строками
В JavaScript имеется много полезных функций, предназначенных для обработки и
преобразования строк.
Ниж е перечислены наиболее часто используемые встроенные функции для работы
со строками.
S
charAt (). Возвращ ает символ, находящийся в указанной позиции в
строке. Обратите внимание на то, что отсчет позиций начинается с 0.
var watzThisString = 'JavaScript - это здорово!';
console.log (watzThisString.charAt(3));
// возвращает "a"
S
concat (). П рисоединяет к строке одну или несколько строк и возвра
щает объединенную строку.
var watzThisString = 'JavaScript - это здорово!';
console.log (watzThisString.concat(' Нам нравится
JavaScript!'));
// возвращает "JavaScript - это здорово! Нам нравится
JavaScript!"
S
indexOf (). Вы полняет поиск первого вхождения символа или под
строки в данной строке и возвращает номер соответствующей позиции.
var watzThisString = 'JavaScript - это здорово!';
console.log (watzThisString.indexOf('здорово'));
// возвращает 17
S
split (). Разбивает строку на массив подстрок.
var watzThisString = 'JavaScript - это здорово!';
console.log (watzThisString.split('з '));
// возвращает ["JavaScript - это ", "дорово!"]
S
substr (). Извлекает часть строки, начиная с указанной позиции, и
возвращает указанное количество символов.
var watzThisString = 'JavaScript - это здорово!';
console.log (watzThisString.substr(2,5));
// возвращает "vaScr"
66
Часть /. Приступаем к программированию на JavaScript
S
substring (). Извлекает символы строки, заключенные между ука
занными позициями (символ, соответствую щ ий концу диапазона, в
результат не включается).
var watzThisString = 'JavaScript - это здорово!';
console.log (watzThisString.substring(2,5));
// возвращает "vaS"
S
toLowerCase (). Переводит все символы строки в нижний регистр.
var watzThisString = 'JavaScript - это здорово!';
console.log (watzThisString.toLowerCase());
// возвращает "javascript - это здорово!"
S
toUpperCase (). Переводит все символы строки в верхний регистр.
var watzThisString = 'JavaScript - это здорово!';
console.log (watzThisString.toUpperCase());
// возвращает "JAVASCRIPT - ЭТО ЗДОРОВО!"
Булев тип данных
Булевы переменны е п ри н им аю т одно из двух возмож ны х значений: true или
false.
Булевы переменны е п олучили свое название по ф амилии м атематика
Джорджа Буля (1815-1864) — создателя алгебраической системы логики.
Булевы переменные часто использую т для хранения результатов сравнения. С по
мощ ью функции Boolean () можно найти булев результат сравнения или преобразо
вать любое значение JavaScript в булево значение.
var isItGreater = Boolean (3 > 20);
alert (isItGreater); // returns false
var areTheySame = Boolean ("тигр" === "Тигр");
alert (areTheySame); // returns false
Результат преобразования некоторого значения JavaScript в булево значение с и с
пользованием функции Boolean () зависит от преобразуемого значения.
S
В JavaScript следующие значения всегда дают при вычислении булево
значение false:
•
NaN;
•
undefined;
• 0 (нулевое численное значение);
•
-0 ;
• "" (пустая строка);
•
false;
Глава 3. Работа с переменными
67
S
В се остальное, что не относится к перечисленным выше значениям,
дает при вычислении булево значение true. Например:
•
74;
•
"Eva";
•
"
•
"NaN".
10" ;
Цифровой символ "0" — это не то же самое, что число 0 (нуль). Если 0 при
преобразовании в булево значение всегда дает false, то преобразование
строки "0 " всегда дает true.
Булевы значения в основном используются в условны х выражениях. Приведенная
ниже программа создает булеву переменную, а затем тестирует ее значение с исполь
зованием инструкции if /else (подробнее — в главе 6).
var b = true;
if (b == true) {
alert ("Это true!");
} else {
alert ("Это false.");
}
П ри записи булевых значений их не заключают в кавычки:
var myVar = true;
В то же время объявление var myVar = "true" создает строковую переменную.
Тип данных NaN
N a N — это сокращ ение от N o t a N u m ber (не число). Э то т результат вы будете по
лучать при попытке выполнить математические операции над строками или в тех слу
чаях, когда вычисление приводит к ошибке или не может быть выполнено. Например,
невозможно вы числить квадратный корень отрицательного числа. Результатом такой
попытки будет N a N .
Чаще всего значение N a N возвращается при попытке выполнения матема
тически х операций над строками, которые не м огут бы ть преобразованы
в числа.
Тип данных u n d e fin e d
Даже если вы создадите переменную JavaScript и не присвоите ей какое-либо зна
чение, она всегда будет иметь значение по ум олчанию . Таковы м является значение
"undefined".
68
Часть I. Приступаем к программированию на JavaScript
Глава 4
Массивы
/3stnouглаве...
> Что такое массив
> Создание массивов
> Многомерные массивы
> Работа с элементами массива
> Использование функций и свойств массивов
“Я огромен. Во мне — множества ".
Уолт Уитмен
М М
ассивы —
ф ундам ентальная часть л ю бого язы ка п рограм м и ровани я.
В этой главе вы узнаете о том, что собой представляю т массивы, как их
использую т и что отличает массивы JavaScript от массивов в других языках програм
мирования. В ы будете использовать массивы для создания и упорядочения списков,
а также для добавления и удаления их элементов.
Создание списка
П реды дущ и е главы включали прим еры работы с переменны ми, которые пред
ставляю т отдельны е единицы данны х, например: v a r
firs tN u m b e r
= "3" и v ar
howM anyTacos
m yNam e
=
" C h r is " , v a r
= 8. В программировании (как и в жизни)
часто бывает так, что родственны е данные желательно хранить под одним именем.
Например, рассмотрим следующие типы списков:
S
список лю бим ы х артистов;
S
сп и сок цитат, из которого каждый раз при запуске программы выби
рается и отображается новая цитата;
S
список лучш их музыкальных альбомов года;
S
список дней рождения членов вашей семьи и друзей;
S
список покупок;
S
список “ что сделать” ;
S
список новогодних пожеланий.
И спользуя переменные, способны е хранить только одно значение (см. главу 3),
вы должны будете создавать и по отдельности контролировать каждую из множества
переменных, образую щ их список. В о т пример списка, созданного с использованием
переменных, хранящих одиночные значения:
= "A lp h o n s e M ucha";
= " C h ia ra B a u t is t a " ;
var
a r tis tl
var
var
a r tis t2
var
var
a r tis t4
= " C la u d e M o n e t";
= "Sandro B o t t i c e l l i " ;
a r tis t5
a r tis t6
a r tis t?
= "A ndy W a rh o l";
= " W a s s ily K a d in s k i" ;
= " V in c e n t Van Gough";
var
var
a r tis t8
= " P a u l K le e " ;
= " W illia m B la k e " ;
var
a r tis tlO
var
var
a r tis tll
a r tis tl2
var
a r tis tl3
var
a r tis tl4
var
var
a r tis t3
a r tis t9
= "Egon S c h i e l e " ;
= " S a lv a d o r D a li" ;
= "P a u l Cezanne";
= "D ie g o
= "P a b lo
R iv e r a " ;
P ic a s s o ";
В краткосрочной перспективе такой подход мог бы сработать, но вы бы стро стол
кнетесь с трудностям и. Ч то если вам захочется отсортировать список в алфавитном
порядке и надо будет соответствую щ им образом переместить имена в другие перемен
ные? В этом случае вам, например, придется сначала извлечь из переменной a r t i s t l
имя M u c h a (и сохранить его во временной переменной), а затем сохранить в ней имя
B a u t i s t a . Тогда место в переменной a r t i s t 2
освободится для имени B l a k e , но не
стоит забывать о том, что имя M u c h a по-прежнему находится во временном хранили
ще! Извлечение имени B l a k e из переменной a r t i s t 9 освобождает ее для того, чтобы
ее мож но было использовать в качестве временного хранилищ а для другого имени,
и т.д. С увеличением размера списка эта задача еще более усложняется.
К счастью, JavaScript (как, впрочем, и любой другой из известных нам языков про
граммирования) поддерж ивает создание переменны х, сп о соб н ы х содержать более
одного значения. Э ти переменные называются м ассивам и. М ассивы — это способ хра
нения группы родственных данных в единственной переменной. С помощ ью массивов
можно создавать списки, содержащие смешанные строковые и числовые значения, бу
левы значения и объекты, функции и другие типы данных, даже другие массивы!
Основные сведения о массивах
М а сси в состои т из элементов. Элем ент массива записывается в виде имени масси
ва, за которым в квадратных скобках указывается индекс элемента в массиве. Каждое
отдельное значение, входящее в массив, называется элем ент ом м асси ва. Для доступа
к элементам массива используются числа — так называемые индексы. Ниже приведен
пример, дем онстрирую щ ий доступ к элементам массива по индексу.
m yA rray[0]
m y A r ra y [l]
m yA rray[2]
m yA rray[3]
70
=
=
=
=
"ж елты й ш а р и к";
"красны й ш арик";
"синий шарик";
"розовы й шарик";
Часть I. Приступаем к программированию на JavaScript
В этом примере элемент с индексом 0 имеет значение " ж е л т ы й
с индексом 3 имеет значение " р о з о в ы й
ш а р и к " . Элем ент
ш а р и к " . Как и в случае любой переменной,
массиву можно присвоить лю бое имя, совм естим ое с правилами именования пере
менных JavaScript. Благодаря индексам можно использовать одно имя переменной для
хранения почти неограниченного списка значений.
Исклю чительно для того, чтобы вы случайно не перестарались, сообщ им,
что количество элементов, которые м огут храниться в массиве, в действи
тельности ограничено, хотя и маловероятно, что вы превысите д о п усти
мый предел, который составляет 4 294 967 295 элементов.
Кроме правил именования (одинаковых для переменных любого типа; см. главу 3),
при работе с массивами следует придерживаться еще некоторых правил:
S
индексы отсчитываются от нуля;
S
в массивах м огут храниться данные любого типа.
Отсчет индексов в массивах ведется от нуля
У JavaScript нет пальцев, по которым мож но было бы вести счет. А раз так, то
нет нужды привязываться к нашей фанатичной человеческой привычке начинать счи
тать с единицы. Индексом первого элемента массива в JavaScript всегда является О
(рис. 4.1).
v o\U«"^®'
volume[2]
volume[1]
volume[0]
volume[9]
volume[ 10]
volume.length; //результат равен 11!
Рис. 4.1. При работе с массивами JavaScript ведет себя подобно регуля
тору громкости: отсчет ведется от нуля
Глава 4 . Массивы
71
Для вас это означает, что элемент ш у А г г а у [ 3 ] — это на самом деле четвертый эле
мент массива.
О тсчет индексов от нуля часто приводит к путанице и является причиной ош ибок,
допускаемы х начинающими программистами, но если к этому привыкнуть, то со вре
менем все становится на свои места.
В массивах могут храниться данные любого типа
В лю бом элементе м ассива м о гут храниться данные лю бого типа (см. главу 3),
в том числе и другие массивы. Кром е того, элементы массивов м огут содержать функ
ции и объекты JavaScript (подробнее об этом — в главах 7 и 8).
И м ея во зм о ж н ость хра н и ть в м ассиве данны е лю б ого ти п а, вы такж е м ож е
те хранить разные типы данны х в разных элементах одного и того же массива (ли
сти нг 4.1).
Листинг 4.1. Хранение данных различного типа в одном массиве___________________
ite m [ 0 ]
= " a p p le " ;
ite m [ l]
i t e m [2]
ite m [3 ]
= 4+8;
= 3;
= ite m [ 2 ]
* ite m fl] ;
Создание массивов
JavaScript предлагает два способа создания массивов:
S
ключевое слово n e w ;
S
литеральное определение массива.
Использование ключевого слова new
В способе, основанном на использовании ключевого слова n e w , массив создается и
заполняется значениями с помощ ью конструкции n e w A r r a y ( ) :
var
catN am es
= ne w A r r a y ( " L a r r y " ,
" F u z z b a ll" ,
"M r.
F u rly " ) ;
Возмож но, вы уже сталкивались с этим методом в своей карьере программиста, и
он вполне подходит для создания массивов.
Следует отметить, что многие программисты возражают против использо
вания этого метода. Самая большая проблема, связанная с использованием
ключевого слова n e w , состои т в том, что его часто забывают указать, и это
может самы м непредсказуемым образом сказаться на работе программы.
Литеральное определение массива
Гораздо более простой и безопасный сп особ создания массивов заключается в ис
пользовании так называемой литеральной нотации. Э то выглядит примерно так:
var
72
dogNames = [ " S h a g g y " ,
"Tennesee",
"D r.
Spock"];
Часть /. Приступаем к программированию на JavaScript
В о т и все, что вам нужно сделать. Больше от вас ничего не требуется. Использова
ние квадратных скобок вместо ключевых слов снижает вероятность того, что вы о чемто случайно забудете. Кром е того, литеральный метод определения массивов требует
записи меньшего количества символов, чем в случае использования ключевого слова
n e w . И если вы хотите, чтобы ваш JavaScript-код выглядел как можно более аккурат
ным, то любая мелочь важна!
Заполнение массивов значениями
М ож но либо добавить значения в массив в момент его создания, либо сначала соз
дать массив, а затем добавлять в него элементы по мере необходимости. Добавление
элементов в массив происходит точно так же, как создание или изменение переменной,
за исключением того, что необходимо указывать индекс создаваемого или изменяемого
элемента. В листинге 4.2приведен пример создания пустого массива с последую щ им
добавлением в него элементов.
Листинг 4.2. Заполнение пустого массива_______________________________________
v a r p e o p le L is t = [];
p e o p l e L i s t [0] = " C h r i s
p e o p l e L i s t [1]
p e o p l e L i s t [2]
M in n ic k " ;
= "Eva H o lla n d " ;
= "Abrah am L i n c o l n " ;
Вы не обязаны строго соблюдать последовательность заполнения массива элемен
тами. В этом примере вполне допустим ой была бы следующая инструкция:
p e o p l e L i s t [99]
= "T in a
T u rn er";
Такой способ добавления элемента в массив дополнительно сопровождается созда
нием пусты х элементов для всех индексов между p e o p l e L i s t [ 2 ] и p e o p l e L i s t [ 9 9 ] .
Следовательно, если вы проверите свойство l e n g t h массива p e o p l e L i s t после
добавления в него элемента с индексом 99, то получите следую щ ий интересны й ре
зультат:
p e o p le L is t . le n g th
//
возвращ ает
100
Н есмотря на то что вы создали всего четыре элемента, JavaScript сообщ ит вам, что
массив имеет длину 100, поскольку эта характеристика основана на самом высоком
значении индекса занятого элемента, а не на количестве фактически созданны х эле
ментов.
Многомерные массивы
Разрешается не только хранить массивы в массивах, но и помещать массивы в мас
сивы, хранящиеся в других массивах. Э то т процесс может продолжаться и далее.
М а сси в, который содерж ит другой массив, называется м н огом ерн ы м . Для записи
многомерного массива нужно просто добавить необходимое количество парных ква
дратных скобок после имени переменной, например:
var
l i s t O f L i s t s [0][0 ];
Глава 4 . Массивы
73
В озм ож но, вам будет трудно представить себе, что такое многомерны е массивы,
когда вы только начнете работать с ними. Структуру многомерного массива иллюстри
рует пример, приведенный на рис. 4.2, на котором представлено разбиение лучш и х
музыкальных альбомов по жанрам: рок, кантри, панк.
М ногом ерны й массив мож но представлять себе в виде иерархической структуры
списков, как показано ниже.
1. Country
1.1. 1. Johnny C a sh :Live at Folsom Prison
1.2. Patsy Cline:Sentim entally Yours
1.3. H ank W illia m sil’ m B lue Inside
2.
R ock
2.1. T-Rex:Slider
2.2. N irvana:Neverm ind
2.3. L o u Reed:Transformer
3.
Punk
3.1. Flipper:G eneric
3.2. The Dead M ilk m e n :B ig Lizard in m y Backyard
3.3. Patti SmithiEaster
74
Часть I. Приступаем к программированию на JavaScript
А вот как выглядит код, который создает массив, представленный на рис. 4.2.
v a r b e s tA lb u m s B y G e n re
b e s t A l b u m s B y G e n r e [0]
= [];
= "C ountry";
b e s tA lb u m s B y G e n re [0 ][0 ]
P ris o n "
b e s tA lb u m s B y G e n re [0 ][1 ]
Y o u rs";
b e s tA lb u m s B y G e n re [0 ][2 ]
= "Johnny C a s h :L iv e
= "P a tsy
at
F o ls o m
C l i n e :S e n tim e n ta lly
= "H ank W i l l i a m s r l ’ m B lu e
I n s id e " ;
b e s t A l b u m s B y G e n r e [1] = " R o c k " ;
b e s tA lb u m s B y G e n re [1 ][0 ] = "Т - R e x : S l i d e r " ;
b e s tA lb u m s B y G e n re [1 ][1 ]
b e s tA lb u m s B y G e n re [1 ][2 ]
b e s t A l b u m s B y G e n r e [2]
= " N irv a n a :N e v e rm in d " ;
= "Lou R e e d :T ra n fo rm e r";
= "Punk";
b e s tA lb u m s B y G e n re [2 ][0 ]
= " F l i p p e r :G e n e r ic " ;
b e s tA lb u m s B y G e n re [2 ][1 ]
my B a c k y a r d " ;
b e s tA lb u m s B y G e n re [2 ][2 ]
= "The
Dead M i l k m e n : B i g
= "P a tti
L iz a rd
in
S m ith :E a s te r" ;
SocffUfn к элементном массива
Д о ступ к элементам массива осущ ествляется также с использованием квадратных
скобок и индекса. Н апример, чтобы получить до ступ к третьем у элементу массива
т у А г г а у , вы должны использовать следую щ ую запись:
m y A r r a y [2] ;
Для доступа к элементам многомерного массива добавляются дополнительные ква
дратные скобки:
b e s tA lb u m s B y G e n re [ 0 ] [ 1 ] ;
/ / возвращ ает " P a t s y
C l i n e :S e n tim e n ta lly
Y ou rs";
Чтобы протестировать присвоение и получение значений элементов многомерного
массива, выполните следующие действия.
Откройте браузер Chrome и его консоль JavaScript.
Для о ткры тия консоли JavaScript мож но использовать м еню C h ro m e
либо наж ать ком би наци ю клавиш < Com m and+ O ption+ J> (M a c ) или
(Windows).
Создайте массив valuesOfNumber, введя в консоли следующую ин
струкцию и нажав клавишу или :
var
v a lu e sO fN u m b e r = [ 2 , 4 , 1 . 5 , 8 0 ] ;
3. Чтобы получить значение элемента, введите имя массива, указав
вслед за ним индекс интересующего вас элемента в квадратных скоб
ках, например:
v a lu e s O fN u m b e r[0];
v a lu e s O fN u m b e r[3];
v a lu e s O fN u m b e r[2];
Глава 4. Массивы
75
4. Попытайтесь использовать индекс несуществующего элемента массива:
v a lu e s O fN u m b e r[ 4] ;
О братите внимание на то, что значение этого элемента не определено.
5. Введите следующую команду для создания новой переменной, в которой
хранится сумма имеющихся чисел.
v a r t o t a l V a l u e = v a l u e s O f N u m b e r [0] +
v a l u e s O f N u m b e r [1] + v a l u e s O f N u m b e r [2]
+
v a lu e s O fN u m b e r[3];
6. Наконец, получите значение valuesOfNumber, введя следующую команду:
to ta lV a lu e ;
Перемещение по элементам массива в цикле
Нетрудно догадаться, что с ростом числа элементов в массиве вводить каждый раз
имя массива и индекс элемента становится все более утомительно. К счастью, для ра
боты со всеми элементами массива сущ ествую т гораздо более легкие способы. Самы й
распространенный из них — использование конструкции, которая называется циклом.
(Более подробно о циклах речь пойдет в главе 6.)
Свойства массивов
О
массивах можно получать некоторую информацию, используя свой ст ва м а с с и
вов. О дин из способов доступ а к свойствам связан с использованием так называемой
т очечной нот ации. Э т а нотация предполагает, что имя свойства указывается после
имени массива и отделяется от него точкой. (Более подробно о свойствах вы узнаете в
главе 8.) Свойства массивов JavaScript перечислены в табл. 4.1.
Таблица 4.1. Свойства массивов JavaScript
Свойство
Возвращаемое значение
p ro to ty p e
Позволяет добавлять свойства и методы в объект A r r a y
co n stru cto r
Ссылка на функцию, создавшую прототип объекта A r r a y
le n g t h
Возвращает или устанавливает количество элементов в массиве
Чащ е всего используется свойство l e n g t h . Д о этого вы уже имели возмож ность
увидеть, как оно работает. Э то свойство позволяет узнать количество элементов в мас
сиве, включая и те, которым значения еще не присвоены.
v a r m yA rray
= [];
т у А г г а у [2000] ;
m y A rra y .le n g th ;
//
возвращает
2001
Кроме того, вы можете использовать это свойство для усечения массива.
m y A rra y . le n g th ; / / возвращает
m y A r r a y . l e n g t h = 10;
m y A rra y . le n g th ; / / возвращает
76
2001
10
Часть I. Приступаем к программированию на JavaScript
Методы для работы с массивами
М етоды (также называемые ф ункциями) для работы с массивами предоставляю т
удобные способы манипулирования их элементами. Перечень этих методов вместе с
описанием их назначения или возвращаемых значений приведен в табл. 4.2.
Использование методов для работы с массивами
С и н та к си с методов для работы с массивами зависит от метода, который вы хоти
те использовать. Однако доступ к ф ункциональности каждого из них осущ ествляется
аналогично доступ у к свойствам массива — с использованием точечной нотации.
Таблица 4.2. Методы для работы с массивами в JavaScript
Метод
Возвращаемое значение
c o n c a t ()
Новый массив, содержащий текущий массив и дополненный другими массивами и
элементами
e v e r y ()
Возвращает значение t r u e , если каждый элемент массива удовлетворяет условию,
предоставляемому тестовой функцией
f i l t e r ()
Новый массив, который содержит все элементы текущего массива, удовлетворяющие
условию, предоставляемому заданной тестовой функцией
f o r E a c h ()
Выполняет заданную функцию для каждого элемента массива
i n d e x O f ()
Индекс первого вхождения заданного значения в массиве. Если значение не обнару
жено, то возвращается - 1
jo in ( )
Объединяет все элементы массива в одну строку
l a s t l n d e x O f ()
Индекс последнего вхождения заданного значения в массиве. Если значение не об
наружено, возвращается - 1
m ap()
Новый массив, полученный путем преобразования каждого элемента текущего мас
сива с помощью заданной функции
pop()
Удаляет последний элемент из массива
p u s h ()
Добавляет новые элементы в конец массива
r e d u c e ()
Сводит два значения массива в одно, применяя к обоим заданную функцию (слева
направо)
r e d u c e R i g h t ()
Сводит два значения массива в одно, применяя к обоим заданную функцию (справа
налево)
r e v e r s e (0
Обращает порядок следования элементов в массиве
s h i f t ()
Удаляет первый элемент из массива и возвращает его, изменяя длину массива
s l i c e ()
Выбирает часть массива и возвращает его в виде нового массива
s o m e ()
Возвращает значение t r u e , если один или несколько элементов массива удовлет
воряет условию, предоставляемому тестовой функцией
s o r t ()
Возвращает отсортированный массив (по умолчанию сортировка выполняется в ал
фавитном порядке и в порядке возрастания)
s p l i c e ()
Возвращает новый массив, состоящий из элементов, которые были добавлены или
удалены из данного массива
t o S t r i n g ()
Преобразует массив в строку
u n S h i f t ()
Возвращает новый массив другой длины, к которому добавлены один или несколько
элементов
Глава 4. Массивы
77
П олн ую справку по методам работы с массивами JavaScript можно найти
по такому адресу:
h t t p s : / / d o c s .w e b p la tfo r m .o fg / w ik i/ ja v a s c r ip t/ A rra y # M e th o d s
В листинге 4.3 приведены примеры использования некоторых наиболее употреби
тельных методов JavaSript.
Листинг 4.3. Пример использования наиболее употребительных методов
для работы с массивами JavaScript_____________________________________________
< h t m l>
< he ad>
< title > M e T O flb i д л я р а б о т ы с M a c c n B a M M < / t it le >
< s c rip t>
v a r a n im a ls = ["ти гр " , "м ед в е д ь"];
v a r f r u i t = ["ды ня" , " а п е л ь с и н " ];
v a r d is h e s = ["тарелка" , "бокал" ,
var
w h e re ls T h e T ig e r
var
fru its A n d A n im a ls
d o c u m e n t.w rite
"чаш ка"];
= a n i m a l s . i n d e x O f ( " т и г р " );
= fru it.c o n c a t( a n im a ls ) ;
(a n im a ls
+ "< br> ");
d o c u m e n t.w rite ("И ндекс ти гр а : "
+ w h e re ls T h e T ig e r + "< br> ");
d o c u m e n t.w rite ( fr u it s A n d A n im a ls + "< br> ");
w h e r e ls T h e T ig e r = a n i m a l s . i n d e x O f ( " т и г р " );
d o c u m e n t.w rite ("И ндекс ти гр а : "
+ w h e re ls T h e T ig e r + "< br> ");
< /s c rip t>
< /h tm l>
C
D fiie:///S:/Di3(ektika/JavaScriptFD/arrays.html
s
т н г р .м е д в е д ь
И н д е к с ти гра: О
д ы н я .а п е л ь с и н .т н г р .м е д в е д ь
И н д е к с ти гра: 2
Рис. 4.3. Пример использования наиболее употребительных методов
для работы с массивами JavaScript
78
Часть I. Приступаем к программированию на JavaScript
Изменение значений с помощью оператора присваивания
>
Логическое ветвление с помощью операторов сравнения
>
Выполнение вычислений с помощью арифметических операторов
>
Знакомство с поразрядными операторами
>
Строковые операторы
“Алло, оператор! Можете соединить меня с номером 9? ”
The White Stripes
я
я
ператоры, выражения и инструкции JavaScript — это основные строительные
кирпичики программ. С их помощ ью вы манипулируете значениями, сравни
ваете их между собой, проводите вычисления и решаете массу других важных задач.
В этой главе вы познакомитесь с тем, как работаю т операторы, выражения и ин
струкции, и узнаете о том, как использовать их с максимальной пользой для себя.
/Зи/гажения
В ы раж ени е — это часть кода, которая преобразуется в значение (может бы ть вы
числена с получением значения). Выражение может существовать само по себе, либо
его значение может присваиваться переменной. Н иж е приведен пример двух таких
выражений.
1 + 1
а = 1;
Выражения м огут быть как короткими и просты ми, так и очень сложными.
Отдельные элементы данных (1 и а в преды дущ их примерах), участвую щ ие в вы
ражениях, называются оп ерандам и .
Знаком ого с oneficunoficuiu
То, что воздействует на выражения и заставляет их работать, называется о п ерат о
ром . Воздействуя на данные, операторы производят различные результаты. В предыду
щих примерах операторами служат + и =.
Приоритет операторов
В одном выражении часто содержится несколько операторов. Рассмотрим следую
щий пример:
а = 1 + 2 * 3
/
4;
В зависимости от очередности выполнения отдельных вычислений мы можем по
лучить один из следую щ их конечных результатов.
а = 1.75;
а = 2.5;
а = 2.25;
В действительности правильным результатом является 2 .5 . Н о откуда мы это зна
ем? В ообщ е говоря, кто-то мог бы выполнить сначала деление (3/4), кто-то — сложе
ние (1+2), а кто-то — умножение (2*3).
Я сн о , что для нахождения правильного ответа должен существовать какой-то спо
соб, и такой способ действительно сущ ествует! А решает все приорит ет оп ерат оров.
П риоритет операторов определяет очередность их выполнения в выражении.
В се операторы делятся на группы с различными уровнями приоритета от 0 до 19
(табл. 5.1).
Таблица 5.1. Приоритет операторов
Оператор
(...)
•
Описание
Ассоциативность
Приоритет Пример
Группирование
Неприменимо
0 — наивыс (1 + 3)
ший приори
тет
Доступ к свойству
Слева направо
1
m y C a r .c o lo r
[...]
Доступ к массиву
Слева направо
1
th in g s T o D o [4]
new. . . ()
Создание объекта
(со списком аргу
ментов)
Неприменимо
1
new C a r ( " r e d " )
f u n c t i o n . . . ()
Вызов функции
Слева направо
2
f u n c t io n
addNum bers(1,2
n e w. . .
Создание объекта
(без списка аргу
ментов)
Справа налево
2
new C a r
. . . ++
Постфиксный
инкремент
Неприменимо
3
number++
Постфиксный
декремент
Неприменимо
3
number—
Логическое НЕ
Справа налево
4
ImyVal
! . ..
Поразрядное НЕ
Справа налево
4
~myVal
-. . .
Отрицание
Справа налево
4
-aNumber
++. . .
Префиксный
инкремент
Справа налево
4
++aNumber
Префиксный
декремент
Справа налево
4
— aNumber
80
Часть /. Приступаем к программированию на JavaScript
Продолжение табл. 5. /
Ассоциативность
Оператор
Описание
typ e o f...
Информация о типе Справа налево
Приоритет Пример
4
t y p e o f myVar
v o i d . ..
Вычисляет выра
Справа налево
жение и возвра
щает u n d e f i n e d
4
v o i d (0)
d e le te ...
Удаление
Справа налево
4
d e le te
o b je ct.p ro p e rty
= 3 * 7
= 3 / 7
*
Умножение
Слева направо
5
re s u lt
Деление
Слева направо
5
re s u lt
Остаток
Слева направо
5
re s u lt
= 7 %3
= 3 + 7
...+ ...
Сложение
Слева направо
6
re s u lt
.......
Вычитание
Слева направо
6
re s u lt
= 3 - 7
= 3 «
7
7
. . . . . . .
Поразрядный
сдвиг влево
Слева направо
7
re s u lt
. . . . . . .
Поразрядный
сдвиг вправо
Слева направо
7
re s u lt
= 3 »
. . .» > .. .
Поразрядный
сдвиг вправо
без знака
Слева направо
7
re s u lt
= 3 >>> 7
Меньше чем
Слева направо
8
a < b
Меньше чем
или равно
Слева направо
8
a b
Больше чем
или равно
Слева направо
8
a >= b
Проверка наличия
свойства
Слева направо
8
v a lu e
. . . i n s t a n c e o f . . • Проверка принад
лежности к типу
Слева направо
8
myCar i n s t a n c e o f c a r
...= = ...
Проверка равен
ства
Слева направо
9
3 == " 3 "
Проверка нера
венства
Слева направо
9
3
Проверка строгого Слева направо
равенства
9
3 ==="3"
/ / fa ls e
Проверка строгого Слева направо
неравенства
9
3
//tru e
Поразрядное И
10
re s u lt
= a & b
re s u lt
= a A b
= a
. . . i n . ..
. . . ! ==. . .
. . . I. . .
. . . I I. . .
Слева направо
v a lu e s
//tru e
!== " 3 "
!= " 3 "
Поразрядное ис
ключающее ИЛИ
Слева направо
11
Поразрядное ИЛИ
Слева направо
12
re s u lt
Логическое И
Слева направо
13
a && b
Логическое ИЛИ
Слева направо
14
a
Глава 5. Операторы, выражения, инструкции
in
/ /fa ls e
| b
|| b
81
Окончание табл. 5.1
Описание
Ассоциативность
Тернарный услов
ный оператор
Справа налево
15
а ? 3 : 7
Присваивание
Справа налево
16
а = 3
Присваивание
Справа налево
16
а += 3
Присваивание
Справа налево
16
а -= 3
Присваивание
Справа налево
16
а *= 3
Присваивание
Справа налево
16
а /= 3
о._. . .
. . . "б—
Присваивание
Справа налево
16
а %= 3
. . .« = . . .
Присваивание
Справа налево
16
а «=
. . .» = . . .
Присваивание
Справа налево
16
а »=
3
3
Оператор
9
★—
. . .» > . . .
• ••! =. . .
y i e l d . ..
Приоритет Пример
3
Присваивание
Справа налево
16
а »>
Присваивание
Справа налево
16
а &= 3
Присваивание
Справа налево
16
а
3
Присваивание
Справа налево
16
а
|= 3
[выражение ]
Остановка и
возобновление
функции-гене
ратора
Справа налево
17
уi е 1 d
Вычисляет оба
операнда и воз
вращает значе
ние второго
Слева направо
18
а + Ь,
с + d
Оператор с наименьш им значением уровня приоритета обладает наивыс
ш им приоритетом. Поначалу это может вас несколько смущ ать, но стоит
вам задуматься над тем, что первый из стоящ их в очереди (в нашем случае
ему соответствует уровень приоритета 0) будет также первым, кому доста
нется великолепный сэндвич или чашечка дымящегося кофе, то в голове у
вас сразу же сложится правильная картина.
Если выражение содержит два или несколько операторов с одинаковым приоритетом,
то очередность их выполнения определяется их ассоциат ивност ью — характеристикой
оператора, определяющей направление вычислений: слева направо или справа налево.
Использование скобок
В выражениях оператором с наивы сш им приоритетом являются круглые скобки.
В больш инстве случаев правила, определяющие приоритет операторов, можно игно
рировать, группируя операции в подвыражения с помощ ью скобок. Например, выра
жение с несколькими операторами из предыдущего примера можно было бы записать
одним из следую щ их способов, каждый из которых делает намерения программ иста
очевидными.
82
Часть /. Приступаем к программированию на JavaScript
а = (1 + 2) * (3 / 4);
а = (1 + (2 * 3 ) ) / 4;
//
результат:
2 .25
//
а = ( ( 1 + 2) * 3 )
а = 1 + ( ( 2 * 3)
//
//
результат:
результат:
1.75
2.25
результат:
2.5
/
/
4;
4);
Скобки в выражении вынуж даю т интерпретатор JavaScript вычислять сначала их
содержимое, продвигаясь от внутренних скобок к внешним, и лиш ь затем выполнять
операции вне скобок.
Сверивш ись с табл. 5.1, нетрудно заключить, что фактическая очередность выпол
нения операций в рассматриваемом примере должна быть такой:
а = 1 + ((2 * 3 )
/
4);
Инструкция в таком виде явно учитывает приоритет выполнения операций. Снача
ла выполняется умножение, затем деление и только после этого — сложение.
ЛСипы, oneftafHO/гов
Операторы JavaScript делятся на типы. В этом разделе обсуждаются наиболее часто
используемые типы операторов.
Операторы присваивания
О п ерат ор присваивания записывает значение операнда, находящегося справа от
него, в операнд, находящийся слева:
а = 5;
П осл е выполнения этого выражения переменная а будет содержать значение 5.
Операторы присваивания м огут объединяться в цепочки для того, чтобы присвоить
одно и то же значение сразу нескольким переменным:
а = b = с = 5;
П оскольку
ассоц и ативн ость
оператора
присваивания
—
справа
налево
(см. табл. 5.1), сначала значение будет присвоено переменной с , затем значение с бу
дет присвоено переменной ь, после чего значение Ь будет присвоено переменной а.
Результат выполнения этого выражения состоит в том, что каждая из переменных а, b
и с будет иметь значение 5.
Как вы думаете, какое значение будет иметь переменная а после выполнения при
веденных ниже двух выражений?
var
var
b = 1;
а = b += с = 5;
Чтобы найти ответ на этот вопрос, откройте консоль JavaScript в Chrom e и пооче
редно введите эти строки, каждый раз нажимая клавишу или . В ре
зультате вы получите 6.
Полный список операторов присваивания приведен в разделе “ Объедине
ние операторов” .
Глава 5. Операторы, выражения, инструкции
83
Операторы сравнения
О п ерат оры сравнения проверяют равенство или неравенство операндов и возвра
щают в качестве результата значение t r u e или f a l s e .
Полны й список операторов сравнения в JavaScript приведен в табл. 5.2.
Таблица 5.2. Операторы сравнения в JavaScript
Оператор
Описание
Пример
==
Равно
3 == " 3 "
=
//tru e
Не равно
3
!= " 3 "
===
Строго равно
3
=== " 3 "
/ / fa ls e
!==
!== " 3 "
//tru e
I
/ / fa ls e
Строго не равно
3
>
Больше
7 > 1 //tru e
>=
Больше или равно
7 > = 7 //tru e
<
Меньше
7 < 10
ApM
< body>
< Ь1> О тгадывание д а ты рож дения< /Ь1>
< u l>
< П > В ведите число 7 < / li>
< П > У м н о ж ь т е е г о на м е с я ц ва ш е го р о ж д е н и я < /И >
< Н>Вычтите 1< /Н >
< И > У м н о ж ьте р е з у л ь т а т на 1 3 < / Н >
Добавьте
число
ваш его дня ро ж д ен и я < /Н >
Добавьте 3< /Н >
< И > Ум нож ьте р е з у л ь т а т на 1 1< /l i >
< И > В ы ч ти те м е ся ц ваш его ро ж д ен и я < /Н >
< И> Вьгчтите ч и с л о ваш его дня р о ж д е н и я < /И >
< Н > Р а з д е л и т е р е з у л ь т а т на 1 0 < / li>
< Н> Добавьте 11< /Н >
< И > Р а з д е л и т е р е з у л ь т а т на 1 0 0 < / Н >
< /u l>
< s c rip t>
v a r num berSeven = N u m b e r(p ro m p t( 'В в е д и т е
число
v a r b ir t h M o n th = N u m b e r(p ro m p t( ' Введите месяц
v a r c a l c u l a t i o n = num berSeven * b ir t h M o n t h ;
c a l c u l a t i o n = c a l c u l a t i o n - 1;
c a lc
var
c a lc
c a lc
c a lc
u la tio n
b ir th D a y
u la tio n
u la tio n
u la tio n
= c a l c u l a t i o n * 13;
= N u m ber(p ro m pt( ' Введите число
= c a lc u la t io n + b irth D a y ;
= c a l c u l a t i o n + 3;
= c a l c u l a t i o n * 11
c a lc u la tio n
c a lc u la tio n
c a lc u la tio n
= c a lc u la tio n
= c a lc u la tio n
= c a lc u la tio n
- b ir th M o n th ;
- b irth D a y ;
/ 10;
c a lc u la tio n
= c a lc u la tio n
+ 11;
c a lc u la tio n = c a lc u la tio n /
d o c u m e n t . w r i t e ( "Вы р о д и л и с ь
7 ') ) ;
ваш его р о ж д е н и я ') ) ;
ваш его дня р о ж д е н и я ') ) ;
100;
" + c a lc u la tio n ) ;
< /s c rip t>
< /body>
< /h tm l>
Глава 5. Операторы, выражения, инструкции
85
j .£ ' i
[ j Ариф метические опера'
С
х"Т
х
D filey//S:/Dialektika/JavaScriptFD/birthday.html
(Д
Игра в угадывание дня рождения
•
•
•
•
•
•
•
•
•
•
•
•
В ведите число 7
У множьте его на месяц вашего рождения
Вычтите 1
У множьте результат на 13
Добавьте число вашего дня рождения
Добавьте 3
У множьте результат на 11
Вычтите месяц вашего рождения
Вычтите число вашего дня рождения
Разделите результат на 10
Добавьте 11
Разделите результат на 100
В ы р оди л ись 1,21
Рис. 5.1. Игра в угадывание дня рождения1
Строковый оператор
С т роковы й оп ер а т о р выполняет операции с использованием двух строк. В сл у
чае строк оператор “ +” становится оператором конкатенации, который объединяет две
строки в одну. Обратите внимание на то, что при объединении строк с помощ ью опе
ратора конкатенации никакого добавления пробелов не происходит. И м енно поэтому
нередко встречаются инструкции наподобие приведенной ниже, в которых строки, не
содержащие ничего, кроме пробела, добавляются в конце или в начале строк (но вне
их кавычек) для образования связного предложения.
var
g re e tin g
= "Привет,
" тебя
" + firs tN a m e
+ ".
Я"
+ "
" + m ood +
ви д е ть .";
Поразрядные операторы
П оразрядн ы е (побит овы е) оп ерат оры обрабатывают операнды как 32-разрядные
(32-битовые) целые двоичны е числа со знаком, представленные в дополнительном
коде (дополнение до 2). П оясним, что все это означает, начиная с термина двоичный.
Двоичны е числа — это строки, состоящ ие из нулей и единиц, в которых значение
каждой единицы определяется ее позицией в данной строке. В о т так, например, вы
глядит число 1, записанное в формате 32-разрядного целого двоичного числа:
00000000000000000000000000000001
1 Здесь дата выводитс я в формате м ес я ц .д ен ь . — П рим еч. р е д .
86
Часть I. Приступаем к программированию на JavaScript
Крайняя справа позиция имеет значение 1. Каждый сдвиг влево на одну позицию
означает удвоение значения, соответствую щ его предыдущей позиции, находящейся
справа. П оэтом у число 5 имеет следующее двоичное представление:
00000000000000000000000000000101
Термин целые числа со знаком означает, что в этой форме м огут быть представлены
как положительные, так и отрицательные целые числа.
Терм ин дополнение до 2 означает, что для получения противополож ного по знаку
числа необходимо обратить (инвертировать) значения всех битов (разрядов) данного
числа и к полученному результату прибавить 1. Таким образом, числу - 5 соответству
ет следующее двоичное представление:
11111111111111111111111111111010
Поразрядные операторы сначала преобразую т то, что мы считаем обы чны ми чис
лами, в 32-разрядные двоичные числа, а после выполнения операции соверш ают об
ратное преобразование.
Поначалу новичкам трудно разобраться в том, как работают поразрядные
операторы. О ни используются сравнительно редко, но не рассказать вам о
них было бы непростительно с нашей стороны.
Поразрядные операторы JavaScript перечислены в табл. 5.4.
Таблица 5.4. Поразрядные операторы
Оператор
Использование
Описание
Поразрядное И (AND)
а
& b
Возвращает 1 в тех позициях результата, в кото
рых биты каждого из операндов равны 1
Поразрядное ИЛИ (OR)
а
| b
Возвращает 1 в тех позициях результата, в кото
рых бит хотя бы одного из операндов равен 1
Поразрядное исключающее ИЛИ (XOR)
а А b
Возвращает 1 в тех позициях результата, в кото
рых бит только одного из операндов равен 1
Поразрядное НЕ (NOT)
~а
Заменяет каждый бит операнда на противопо
ложный
Левый сдвиг
а «
b
Сдвигает двоичное представление а на b разря
дов влево, заполняя освобождающиеся позиции
нулями
Правый сдвиг с переносом знака2
а »
b
Сдвигает двоичное представление а на b (
b
Сдвигает двоичное представление а на b (
v a r guessedW ord = p r o m p t ("Какое
w h ile
(guessedW ord
!= " с э н д в и ч " )
p r o m p t (" Н е т . Э то не о н о .
слово
{ //
//
Попробуйте
я зад ум ал?");
п о к а не н а з в а н о
"сэндвич"
еще р а з . " ) ;
слово
}
a l e r t ("П оздравляю !
Это именно
то
сл о в о !");
//
//
выполняется после
выхода и з цикла
< /s c rip t>
< /body>
< /h tm l>
Цикл do. . .while
Ц икл d o . . . w h i l e во многом работает точно так же, как и цикл w h i l e , за исклю
чением того, что в данном случае инструкции предш ествую т проверке условия. Как
следствие, данный вид цикла всегда выполняется по крайней мере один раз.
Использование цикла d o . . . w h i l e продемонстрировано в листинге 6.6.
Листинг 6.6, Использование цикла d o ... while_____________________________
< h t m l>
Давайте
noc4HTaeM
< s c rip t>
v a r i = 0;
do {
i+ + ;
d o c u m e n t.w rite ( I
} while
+ "< br> ");
(i
< /body>
< /h tm l>
Глава 6. Циклы и ветвление кода
101
break и continue
И нструкци и b r e a k и c o n t i n u e прерывают выполнение цикла. М ы уже рассматри
вали инструкцию b r e a k в контексте инструкции s w i t c h , где она использовалась для
продолжения программы после выполнения подходящего варианта.
И н струкц и я b r e a k в циклах делает то же самое. О н а приводит к немедленному
выходу из тела цикла, независимо от того, выполняются или не выполняются условия
для продолжения выполнения цикла.
Н апример, представленная в листинге 6.7 игра в слова работает так же, как и та,
которая приводилась в листинге 6.5, но работа цикла немедленно прекращается, если
значение не было введено.
Листинг 6.7. Использование инструкции break в цикле while__________________
< h t m l>
Mrpa в onoBa
< body>
< s c rip t>
v a r guessedW ord = p r o m p t ("Какое слово
w h i l e ( g u e s s e d W o r d != " с э н д в и ч " ) {
if( g u e s s w o r d
p r o m p t("Н ет.
== " "
{b reak;}
Э т о не о н о .
//
я задум ал?");
немедленно
выйти и з
/ / п о л ь з о в а т е л ь не в в е л
П о п р о б у й т е еще р а з . " ) ;
цикла,
если
значение
}
a l e r t ( "П оздравляю!
Это именно то
с л о в о !");
< /s c rip t>
< /body>
< /h tm l>
Когда встречается инструкция c o n t i n u e , выполнение текущ ей итерации прекра
щается, инструкции цикла, следую щ ие за инструкцией c o n t i n u e , игнорирую тся, и
начинается выполнение следующей итерации цикла.
В листинге 6.8 представлена программа, которая ведет счет от 1 до 20, но выводит
лиш ь четные числа. Обратите внимание на то, что для определения четности числа в
программе используется оператор деления по модулю (%).
Листинг 6.8. Счет и использование инструкции continue
для отображения четных чисел________________________________________________
C4eT
и отображение четны х ч и сел < Д 1 б 1е >
< body>
< s c rip t>
f o r ( v a r i = 0 ; i
Создание функций
>
Документирование функций
>
Передача аргументов
>
Возврат значений
>
Организация программ с помощью функций
“Для меня писать — естественная функция.
Без этого я бы заболел и умер.
Это такая же моя часть, как печень или кишечник,
и примерно столь же привлекательная ”.
Чарльз Буковеки
ун кц и и помогаю т сн изи ть повторяем ость кода за счет превращения ча-
щ
сто встречающихся участков кода в независимые единицы, допускаю щ ие
многократное использование. В этой главе вы напишете некоторые функции, которые
превратят решение трудоемких задач в настоящее развлечение.
Толь функций
Функции — это мини-программы в составе ваших программ. Ф ункции предназна
чены для выполнения тех конкретных задач в рамках основной программы, потреб
ность в которых может возникать неоднократно.
Если вы успели прочитать какую-либо из предыдущих глав, то уже видели, как ра
ботаю т функции. Ниж е приведен пример простой функции, в результате выполнения
которой к концу строки добавляется символ t .
f u n c t io n a d d t( a S trin g )
a S t r i n g += " t " ;
re tu rn a S tr in g ;
{
}
Чтобы проверить работу этой функции, выполните следующие действия.
1. Откройте консоль JavaScript в браузере Chrome.
2. Введите код функции в консоли.
М ож ете ввести весь текст в одной строке или же нажимать клавиши или для создания нескольких строк, прежде чем выпол
нить код.
3. После ввода завершающей фигурной скобки нажмите клавишу
или .
В консоли должен отобразиться текст undefined.
4. Введите следующую команду, а затем нажмите клавишу или
, чтобы выполнить функцию:
ad dt("H
п р о гр а м м и р у ю на J a v a S c r i p " ) ;
Результат выполнения этой функции представлен на рис. 7.1.
Ф ун к ц и и —
фундаментальны е элементы программ ирования на JavaScript, и их
использование реглам ентируется м нож еством правил, которые вы как JavaScriptпрограмм ист должны знать. Н е расстраивайтесь, если вам не удастся запомнить сразу
все детали работы функций. Некоторые абстрактные концепции станут для вас более
понятны ми лиш ь после того, как вы накопите практический опы т работы с функция
ми, и, возможно, вам даже понадобится еще раз прочитать эту главу. В конечном счете
для вас все прояснится, так что смело двигайтесь вперед!
< \
0
Elements
0
ТУ
Network
< io p 17a m e >
■ -m e t i e r
▼
+=
Timeline
Profiles 1Console
ф
x
P reserve lo g
ad dt(aS trin g)
aS tring
re rjrn
Sources
{
" t " ;
aString;
}
addt
'" r
m o градуирую
nunr рагглиг\--, не
Console
Search
Emulation
ча
lav'as: r i p " );
aSeript"
Rendering
Рис. 1.1. Выполнение вашей первой функции в консоли JavaScript
Т Л е /г м и я о л о г и л
ф у н к ц и й
Обсуж дая функции, программисты использую т терминологию , которую вам необ
ходимо знать для того, чтобы понимать, о чем они говорят. М ы интенсивно использу
ем эту терминологию не только в данной главе, но и на протяжении всей книги. Ниж е
кратко описаны проф ессиональны е термины , с которыми вы будете сталкиваться в
процессе работы с функциями.
108
Часть II. Организация программ на JavaScript
Определение функции
Объявление функции в коде еще не означает, что она выполняется. О н а просто соз
дается и становится доступной для выполнения в более поздний момент времени. С о з
дание функции с той целью, чтобы ее можно было использовать позднее, называется
определением функции.
Ф ун к ц и я объявляется и определяется в программе или на веб-странице
только один раз. Если же вы определите одну и ту же функцию более одно
го раза, то JavaScript не сообщ и т об ошибке. В подобны х случаях исполь
зуется та версия функция, которая была определена последней.
Примеры объявления функции:
v a r m y F u n c tio n
= ne w F u n c t i o n ()
{
};
или
fu n c tio n
m y F u n c t i o n (){
};
Заголовок функции
Заголовок ф ункции — это часть определения функции, которая содержит ключевое
слово f u n c t i o n , имя функции и круглые скобки, например:
fu n c tio n
m y F u n c t i o n ()
Тело функции
Тело функции состоит из инструкций, заключенных в фигурные скобки.
{
//
те л о функции
Вызов функции
Использование функции осущ ествляется путем ее в ы зо в а . Вызов функции приво
дит к выполнению инструкций, составляю щ их ее тело. Например:
m y F u n c t io n ();
Определение параметров и передача аргументов
П арам ет ры — это имена, которые вы присваиваете элементам данных, предостав
ляемым функции при ее вызове. А ргум ен т ы — это значения, которые вы предостав
ляете функции. Предоставление аргументов функции при ее вызове (в соответствии
с определенны ми для ф ункции параметрами) п рограм м и сты называют п ер ед а ч ей
аргум ент ов.
Глава 7. Приобретаем функциональность
109
Для определения параметров функции используется следующий синтаксис:
fu n c tio n
m y F u n c t i o n {п а р а м ет р )
{
Для вызова функции с передачей ей аргумента используется следующий синтаксис:
m y F u n c tio n (m y A rg u m e n t)
Возврат значения
Ф ункци и м огут не только принимать входные данные из внешнего мира, но и пере
давать обратно значения по завершении своего выполнения. Э то т процесс называется
возврат ом значения .
Для возврата значения используется ключевое слово r e t u r n , например:
re tu rn
m y V a lu e ;
Л^еимцщесвгва использования
< ^ ^ 1 е > П о л у ч е н и е суммы ч и с е л < А ^ 1 е >
< s c rip t>
v a r m yNum bers = [ 2 , 4 , 2 , 7 ] ;
v a r t o t a l = 0;
f o r (oneNumber i n m yN u m b e rs){
t o t a l = t o t a l + m yN um bers[oneN um ber];
}
d o c u m e n t.w rite ( to ta l) ;
< /s c rip t>
< /h tm l>
Однако, если бы у нас было несколько наборов чисел, подлежащих сложению, то
потребовалось бы написать отдельные циклы для каждого из них.
В листинге 7.2 программа, представленная в листинге 7.1, преобразуется в функ
цию, и эта функция используется впоследствии для нахождения сум м ы элементов,
относящ ихся к различным массивам.
Листинг 7.2, Функция для сложения чисел, образующих массив____________________
< h t m l>
Получение
110
суммы ч и с е л < /1 1 1 1 е >
Часть II. Организация программ на JavaScript
< /head>
< bod y>
< s c rip t>
I -k -k
^Сложение э л е м е н т о в м а с с и в а
*@ pa ra m { A r r a y . < n u m b e r > } n u m b e r s T o A d d
* @ r e t u r n {N u m b e r } sum
*/
f u n c t i o n ad dN um bers(num bersToAdd)
v a r sum = 0 ;
{
f o r (oneN um ber i n n u m bersToA d d) {
sum = sum + n u m b e r s T o A d d [ o n e N u m b e r ] ;
}
re tu rn
sum;
v a r m yNum bers = [ 2 , 4 , 2 , 7 1 ;
v a r m yNum bers2 = [ 3 3 3 3 , 2 2 2 , 1 1 1 ] ;
v a r m yN um bers3 = [ 7 7 7 , 5 5 5 , 7 7 7 , 5 5 5 ] ;
v a r sum l = addN um b ers(m yN um b ers);
v a r sum2 = a d d N u m b e r s ( m y N u m b e r s 2 ) ;
v a r sum3 = a d d N u m b e r s ( m y N u m b e r s 3 ) ;
d o c u m e n t.w rite ( s u m l
d o c u m e n t.w rite (s u m 2
+ M< b r > " ) ;
+ "< b r> ” );
d o c u m e n t.w rite (s u m 3
+ "< br> ");
< /s c rip t>
< /body>
< /h tm l>
Блочные комментарии, предш ествую щ ие функции в листинге 7.2, следу
ют формату, специф ицированном у си стем ой докум ентирования JS D o c.
Комментируя функцию с использованием этого формата, вы не только об
легчаете чтение текста программы, но и делаете возможным использова
ние этих комментариев для документирования своих программ. О системе
документирования рассказано во врезке “ Д окум ентирование JavaScript с
помощ ью J S D o c ” . Более подробно о системе JS D o c можно прочитать на
сайте h t t p : / / u s e j s d o c . o r g .
Ф ун к ц и и обеспечиваю т значительную экономию времени, усилий и объема кода
программы. Поначалу на написание полезной функции у вас может уйти больше вре
мени, чем на написание JavaScript-кода, расположенного вне функций, но в долго
срочной перспективе ваши программы будут лучш е организованы, и если написание
функций войдет у вас в привычку, то во многих случаях вы избавите себя от ненужной
головной боли.
Глава 7. Приобретаем функциональность
111
Документирование JavaScript с помощью JSDoc
Считается хорошей практикой всегда документировать JavaScript-код с помощью какой-либо стан
дартной системы. Наиболее широко используемой системой документирования JavaScript, которая
стала стандартом де-факто, является система JSDoc.
Язык JSDoc — это простой язык разметки, которая может внедряться в файлы JavaScript. Текущая,
3-я версия JSDoc основана на системе JavaDoc, применяющейся для документирования кода, на
писанного на языке Java.
Аннотировав свои JavaScript-файлы с помощью JSDoc, вы сможете использовать генератор до
кументации, например jsdoc-toolkit, для создания HTML-файлов, документирующих код.
Разметка JSDoc окружается специальными тегами блочных (многострочных) комментариев. Един
ственное различие между разметкой JSDoc и обычными блочными комментариями JavaScript состоит
в том, что в первом случае разметка начинается символами / * * и заканчивается символами * / , тогда
как в последнем случае вслед за начальной косой черты указывается лишь один символ “звездочка”.
Дополнительная “звездочка” не препятствует использованию разметки JSDoc в качестве обычного
блочного комментария, но при необходимости делает ее частью генерируемой документации.
На приведенном ниже рисунке представлена часть кода фреймворка AngularJS, аннотированного
с использованием системы JSDoc.
anguiar.js
? 1 f u n c t io n e x t e n d ( d $ f ) {
fo rF a ch (a rg u m en ts, fu n c tio n ( o b j ) {
(obj
dst) {
f o r E a c h ( o b j , fu n c tio n ( v a l u e , k ey ){
dst[key]
value;
});
}
c
C-Otwnn 4
Spates: 2
lavaSf npt
Различные части и разделы программы документируются с использованием тегов JSDoc. Ниже
перечислены наиболее популярные из них.
Описывает исключение, генерируемое методом; синоним тега @throws
112
Часть II. Организация программ на JavaScript
Окончание таблицы
TerJSDoc
Описание
@exports
Указывает член, экспортируемый модулем
@param
Описывает параметр метода
@private
Обозначает, что метод закрытый
@return
Описывает возвращаемое значение; синоним @returns
@returns
Описывает возвращаемое значение; синоним @return
@see
Описывает связь с другим объектом
@this
Задает тип объекта, на который указывает ключевое слово t h i s в функции
@throws
Описывает исключение, генерируемое методом
(Aversion
Версия библиотеки
Написание функций
Объявление функции должно записываться в определенном порядке. О н о состои т
из следую щ их элементов, указанных в порядке их следования:
S
ключевое слово f u n c t i o n ;
S
имя функции;
S
круглые скобки, в которых может бы ть указан один или несколько
параметров;
S
пара фигурных скобок, содержащих инструкции.
Иногда единственным назначением функции является вывод сообщ ения в отобра
жаемой на экране веб-странице. Х ор ош и м примером этого может служ ить функция,
отображающая текущ ую дату. Приведенная ниже функция выводит текущ ую дату в
окне браузера.
f u n c t i o n g e t T h e D a t e (){
v a r rig h tN o w = n e w D a te ();
d o c u m e n t.w rite (rig h tN o w .to D a te S trin g ());
}
Чтобы проверить работу этой функции, выполните следующие действия.
1. Откройте консоль JavaScript в браузере Chrome.
2. Введите код функции в консоли.
Для создания отдельны х стр ок кода без их выполнения наж имайте клавиши
(или ) после ввода каждой строки.
3. После ввода закрывающей фигурной скобки нажмите клавишу
(или ).
Глава 7. Приобретаем функциональность
113
О братите внимание на то, что при этом ничего не произойдет, просто в консоли
отобразится слово u n d e f i n e d , информирующее вас о том, что функция воспри
нята, но она не вернула никакого значения.
4. Вызовите функцию, введя ее имя (getTheDate), а вслед за ним — пару кру
глых скобок и точку с запятой:
g e tT h e D a te ();
Ф ункция выведет текущ ую дату и время в окне браузера, вслед за которыми на
консоли отобразится значение u n d e f i n e d , поскольку функция не имеет возвращае
мого значения и предназначена лишь для вывода даты и времени в окне браузера.
П о ум олчанию возвращаемым значением функций является u n d e f i n e d ,
поэтом у с технической точки зрения отображ аемое консолью значение
u n d e f i n e d является возвращаемым значением.
возв/гсин значений
В примере, приведенном в преды дущ ем разделе, мы создали ф ункцию , которая
всего лиш ь отображает строку в окне браузера. П осле выполнения единственной ин
струкции d o c u m e n t . w r i t e () больше нечему выполняться, поэтому программа поки
дает функцию и переходит к инструкции, следующей за вызовом функции.
Закончив свою работу, больш инство функций возвращают значение (отличное от
u n d e f i n e d ) . Э то значение можно использовать в остальной части программы. В ли
стинге 7.3 приведен пример ф ункции, возвращающей значение. Затем это значение
присваивается переменной и выводится в окне консоли.
Листинг 7.3. Возврат значения функцией________________________________________
fu n c tio n
retu rn
g e tH e llo ( ){
"П ри вет!";
v a r h e llo T e x t = g e tH e llo t) ;
c o n s o le .lo g (h e llo T e x t);
Как правило, инструкция r e t u r n является последней инструкцией функции. Ее вы
полнение означает выход из функции. В ы можете использовать эту инструкцию для
возврата функцией лю бого литерального значения (например, строки “ П р и в ет!” или
числа 3), значения переменной или выражения, а также объекта, массива и даже дру
гой функции (см. листинг 7.4).
Листинг 7,4. Возврат результата вычисления выражения__________________________
f u n c t i o n g e t C i r c u m f e r e n c e (){
v a r r a d i u s = 12;
re tu rn 2 * M a th .P I * ra d iu s ;
c o n s o le . lo g
114
( g e tC irc u m fe re n c e ());
Часть II. Организация программ на JavaScript
7tefieqa4,a и использование а^гцисен&ов
Для того чтобы функция могла вы полнять одни и те же действия с различными
входными данными, у программиста должна быть возможность передавать эти данные
функции. Такая возможность уже была продемонстрирована в листинге 7.2, где для
передачи параметров использовались скобки после имени функции в ее объявлении.
Поначалу различие между параметрами и аргументами может не бы ть для
вас очевидным. В о т в чем суть этого различия.
S
Параметры— это имена, которые вы указываете в определении функции.
S
А ргум ен ты — это значения, которые вы передаете функции.
В следующем примере мы определяем для функции m y T a c o s два параметра.
fu n c tio n
m yT a co s (m e a t,p ro d u ce ){
П ри вызове ф ункции данные (аргум енты ) указы ваю тся там, где в определении
ф ункции размещ аю тся параметры. О ч е н ь важно, чтобы аргум енты , передаваемые
функции, были указаны в том порядке, в каком соответствую щ ие им параметры сле
дую т в определении функции.
m y T a c o s (" b e e f " , " o n io n s " ) ;
Значения, переданные функции, становятся значениями локальных переменных в
функции и принимаю т имена определенных для нее параметров.
В листинге 7.5 в функцию закладывается возможность вывода значений обоих ар
гум ентов на консоль. Передача аргументов — это все равно что использование ин
струкции v a r в функции, но только значения поступаю т извне функции.
Листинг 7,5. Ссылка на аргументы в функции через имена параметров______________
fu n c tio n
m yT acos(m eat, p r o d u c e ) {
c o n s o l e . l o g ( m e a t ); / / вы в е сти " b e e f "
c o n s o le . lo g ( p r o d u c e ) ; / / вывести " o n io n s "
m y T a c o s (" b e e f " , " o n i o n s " );
В определении функции разрешается задавать до 255 параметров. Однако
вероятность того, что у кого-то возникнет реальная потребность в функ
ции с таким больш им количеством параметров, чрезвычайно мала! Если
вдруг обнаруживается, что вам нужна функция, число параметров в кото
рой очень велико, то всегда имеет смысл подыскать лучш ий способ орга
низации программы в интересах сохранения ясности и удобочитаемости
кода.
Глава 7. Приобретаем функциональность
115
Передача аргументов по значению
Если для передачи аргумента используется переменная, относящаяся к одному из
прим итивны х (элементарных) типов данных, то говорят, что аргум ент передается по
значению . Э то означает, что новая переменная, созданная для хранения значения в
функции, полностью отделена от переменной, используемой для передачи аргумента,
и что бы ни происходило с переданным значением после того, как оно окажется в
функции, переменная снаружи функции не почувствует никаких изменений.
В JavaScript элементарными считаю тся следующие типы данных: string,
number, boolean, undefined И null.
П роиллю стрируем это на конкретном примере. В листинге 7.6 создаются две пере
менные, которым присваиваю тся значения, после чего эти переменные передаются
функции. В данном случае имена параметров функции совпадают с именами перемен
ных, используемы х для передачи аргументов. Н есм отря на то что значения перемен
ных в функции подвергаются изменению, значения исходных переменных остаю тся
прежними.
Листинг 7.6. Демонстрация передачи аргументов по значению_____________________
< h t m l>
< head>
< title> nepefla4a
аргументов
по
3Ha4eHHio
< /head>
< body>
< s c rip t>
j -к•к
* И нкрементирование д в ух значений
* @par am { n u m b e r } n u m b e r l
* 0 p aram {num ber} num ber2
к/
f u n c t i o n a d d T o M y N u m b e rs (n u m b e rl,n u m b e r2){
num ber1+ + ;
n u m b e r2 + + ;
c o n s o le . l o g ("Значение
c o n s o le . l o g ("Значение
var
var
n u m berl
num ber2
number 1 в функции:
number 2 в функции:
" + n u m b e rl);
" + num ber2);
= 3;
= 12;
a d d T o M y N u m b e rs (n u m b e rl,n u m b e r2 );
c o n s o le . l o g ("Исходное
c o n s o le . l o g ("И сходное
< /s c rip t>
значение
значение
//
передача двух
n u m b e rl:
n u m b e r2:
аргументов
" + n u m b e rl);
" + num ber2);
< /body>
< /h tm l>
ив
Часть II. Организация программ на JavaScript
Н а рис. 7.2 показан результат работы этой программы в консоли JavaScript.
▼
Sources
Timeline
*
Preserve tog
Profiles
Console i»
Show all messages *
З нач ени е num ber 1 вн утр и ф ункции:
4
p a s s - b v - v a l u e , h t m l :1 5
З н а ч е н и е n u m be r 2 в н у т р и ф у н к ц и и :
13
p a s s - b v - v a l u e . h t m l :1 6
И сходн ое зн ач е н и е
n u m b e r l:
и с х о д н о е з н а ч е н и е n u m b e r2 :
Console Search
Emulation
x
3
p a s s - b v - v a lu e . h t m l: 2 4
12
p a s s - b y - v a l u e . h t m l :2 5
Rendering
Рис. 7.2. Изменение переменных в функции не сказывается на внешних переменных
Передача аргументов по ссылке
В то время как переменны е JavaScript, принадлеж ащ ие к элементарны м типам
(строки, числа, булевы значения, undefined и null), передаются функциям по значе
нию, объекты JavaScript передаются по ссы лке. Э то означает, что в тех случаях, когда
функции в качестве аргум ента передается объект, любые изменения этого объекта,
внесенные в ф ункции, влекут за собой изменения значений вне функции. В оп р осы
передачи аргументов по ссылке выходят за рамки данной главы и будут рассмотрены
в главе 8.
Вызов функции с неполным числом аргументов
Количество аргументов, задаваемых при вызове функции, не обязано совпадать с
количеством параметров, указанны х в определении этой функции. Если в определе
нии функции содержатся три параметра, но вы вызываете ее, задавая всего лиш ь два
аргумента, то третий параметр создаст в функции переменную , имею щ ую значение
undefined.
Аргументы по умолчанию
Если желательно, чтобы значения аргументов по ум олчанию были отличны ми от
undefined, то установите эти значения по своему усмотрению . Наиболее широко под
держиваемый и общ еприняты й способ реализации этого заключается в проверке зна
чений аргументов в функции и установке значений по умолчанию, если типом данных
аргумента является undefined.
Глава 7. Приобретаем функциональность
117
Например, в листинге 7.7 функция принимает один параметр. В теле функции про
веряется, равно ли значение аргумента u n d e f i n e d . Если это так, то устанавливается
значение по умолчанию.
Листинг 7.7. Задание значений по умолчанию для аргументов_____________________
f u n c t i o n w e lco m e (y o u rN a m e ){
if
( t y p e o f y o u r N a m e === ' u n d e f i n e d ' ){
yourN am e = " д р у г " ;
}
В следую щ ей версии JavaScript, которая называется E C M A S c r ip t 6, будет предо
ставлена возможность устанавливать для параметров значения по умолчанию в заго
ловке функции (листинг 7.8).
Листинг 7.8. Задание значений по умолчанию
для аргументов в заголовке функции___________________________________________
f u n c t i o n w e lco m e (y o u rN a m e = " д р у г " ) {
d o c u m e n t . w r it e ( " П р и в е т ," + yourN am e);
}
К моменту публикации книги еще не все браузеры поддерживали такую
возможность, и поэтому данный метод установки значений аргументов по
умолчанию может работать не для всех пользователей вашей программы.
Таким образом, в настоящее время лучше ограничиться методом, совмести
мым с прежними версиями JavaScript, который использован в листинге 7.7.
Вызов функции с количеством аргументов,
превышающим количество параметров
Если при вызове функции количество аргументов превышает количество ее пара
метров, то для дополнительных аргументов локальные переменные не создаются, по
скольку функции неизвестно, как к ним обращаться.
И все же сущ ествует один трю к, используя который вы сможете получить значения
аргументов даже в том случае, если соответствую щ ие им параметры отсутствуют. Это
делается с помощ ью объекта a r g u m e n t s .
Получение значений аргументов с помощью объекта a r g u m e n t s
Е сли вы не знаете заранее, сколько аргум ентов будет передано в ф ункцию , то
для получения значений аргументов воспользуйтесь объектом a r g u m e n t s , который
JavaScript автоматически встраивает в функции.
О бъект a r g u m e n t s содержит массив всех аргументов, переданных функции. О с у
щ ествив в цикле перебор всех элементов массива (с помощ ью цикла f o r или f o r . . .
i n ), вы сможете использовать все аргументы, даже если их количество может менять
ся от вызова к вызову.
118
Часть //. Организация программ на JavaScript
В листинге 7 . 9 демонстрируется применение объекта a r g u m e n t s для вывода при
ветственного сообщения, которое может адресоваться как лицам с одним вторым име
нем, так и лицам с двумя вторыми именами.
Листинг 7.9. Использование объекта arguments для определения
функции, выводящей приветственное сообщение________________________________
< h t m l>
< he ad>
npMBeTCTBeHHoe coo6meHne
< body>
< s c rip t>
*
^Гибкое
*/
fu n c tio n
приветственное
сообщение
f l e x i b l e W e l c o m e () {
v a r w e lco m e = "Д обро п о ж а л о в а т ь ," ;
f o r ( i = 0; I < a r g u m e n t s . l e n g t h ; i+ + ) {
w e lc o m e = w e lc o m e + a r g u m e n t s [ i ] + " " ;
}
re tu rn
w e lco m e ;
}
d o c u m e n t.w rite ( fle x ib le W e lc o m e (" C h r is to p h e r " ,
"Jam es" , " P h o e n ix " , " M in n ic k " ) + "< br> ");
docum ent, w r i t e ( f le x ib le W e lc o m e ("E va "
" H o l l a n d " ) + " < b r > " );
< /s c rip t>
,
"Ann"
,
< /body>
< /h tm l>
ОЗлаапь вис/ижос(пи функции
Переменные, созданные в функции путем передачи ей аргументов или использова
ния ключевого слова v a r , доступн ы только в функции. П рограм м исты называют это
свойство JavaScript област ью видим ост и функции. П осле выхода из функции создан
ные в ней переменные уничтожаю тся.
В то же время переменная, созданная в функции без использования ключевого сло
ва v a r , становится глобальной переменной. Д оступ к такой переменной и ее изменение
возможны в любом месте программы.
Случайное создание глобальной переменной является распространенны м
источником ош ибок и дефектов в JavaScript, поэтому следует всегда внима
тельно следить за ограничением области видимости переменных и не до
пускать создания глобальных переменных, если только в этом нет острой
необходимости.
Глава 7. Приобретаем функциональность
119
»Анонимные функции
В заголовке функции имя не является обязательной частью, так что вы можете соз
давать функции, не имеющие имени. Поначалу это может казаться странным, посколь
ку такая функция подобна собаке без клички, которую невозможно позвать! О днако
аноним ны е функции м огут назначаться переменным при их создании, что оставляет
вам те же возмож ности, как и в том случае, когда имя функции указывается в ее за
головке.
v a r d o T h e T h in g = f u n c t io n ( t h in g T o D o )
d o c u m e n t . w r i t e ( "С д е л ать следующее:
{
" + th in g T o D o );
Различия между анонимными и именованными функциями
М еж ду созданием именованной функции и присвоением анонимной функции пере
менной имею тся важные и иногда полезные различия. Первое из них со стои т в том,
что анонимны е функции, присвоенные переменной, сущ ествую т и м огут вызываться
лиш ь после выполнения операции присваивания. Д о ступ же к именованным функци
ям возможен в любом месте программы.
С у т ь второго различия заключается в том, что в случае аноним ны х функций зна
чение переменной может быть в любой момент изменено, и ей может быть присвоена
другая функция. Э то делает механизм аноним ны х функций более гибким по сравне
нию с именованными функциями.
Самовыполняющиеся анонимные функции
Д ругим полезным применением анонимны х функций являются сам овы полняю щ ие
ся функции. Самовы полняю щ аяся функция — это функция, которая выполняется сра
зу же после ее создания.
Чтобы превратить обы чную аноним ную функцию в самовы полняю щ ую ся, до ста
точно заключить ее в круглые скобки, а затем добавить пару круглых скобок и точку с
запятой после них.
П реимущ еством использования самовыполняю щихся анонимны х функций являет
ся то, что переменные, которые вы создаете в них, уничтожаю тся при выходе из функ
ции. Благодаря этом у вы избегаете конфликта имен переменны х и предотвращаете
утечку памяти, т.е. сохранение в памяти переменных, которые больше не использую т
ся. П рим ер определения и использования самовы полняю щ ейся аноним ной функции
приведен в листинге 7.10.
Листинг 7,10. Использование самовыполняющейся анонимной функции____________
v a r m y V a r i a b l e = "Я н а х о ж у с ь в н е ф у н к ц и и . " ;
( f u n c t i o n () {
v a r m y V a r ia b le = "Я н ах о ж у сь в э т о й анонимной ф ун к ц и и ";
d o c u m e n t.w rite ( m y V a ria b le ) ;
}) 0 ;
docum ent . w r it e ( m y V a ria b le ) ;
120
Часть //. Организация программ на JavaScript
Разработчики веб-приложений регулярно используют анонимные функции для соз
дания самы х разнообразных эффектов на веб-страницах. Более подробно об аноним
ных функциях можно прочитать в главах 15 и 16.
Суелай!пе 3tno снова с помощью fietcifficuu
Ф ункци и можно вызывать извне функций или в других функциях. Возможен даже
вызов функции из самой себя. Н а языке програм м истов такой вызов называется р е
курсией.
В о многих ситуациях рекурсия эквивалентна циклу с той лиш ь особенностью , что
повторяются инструкции, образую щ ие тело функции. В листинге 7.11 приведен при
мер простой рекурсивной функции. Однако в этой рекурсивной функции имеется одна
большая проблема. Видите ли вы ее?
Листинг 7.11, Рекурсивная функция, содержащая фатальную ошибку_______________
fu n c tio n
s q u a re ltU p (s ta rtin g N u m b e r)
v a r sq u a re = s ta rtin g N u m b e r
c o n s o l e . l o g (s q u a r e );
s q u a re ltU p (s q u a re );
{
* s ta rtin g N u m b e r;
}
В ы поняли, в чем суть проблемы? Вы полнение этой функции никогда не завершит
ся. О н а будет бесконечно долго умножать числа, пока вы ее не остановите.
Вы полнение этой функции, вероятнее всего, приведет к аварийной оста
новке браузера. Разумеется, никакой вред браузеру нанесен не будет, но
этого будет достаточно для того, чтобы вы внимательно просмотрели код и
обнаружили в нем проблему.
В листинге 7.12 представлен другой вариант функции s q u a r e l t U p (), усоверш ен
ствованны й за счет предоставления так называемого б а зо в о го случая. Базовый слу
чай — это условие, выполнение которого означает прерывание рекурсивного процесса
и прекращение работы функции. Базовый случай должен предусматриваться для каж
дой рекурсивной функции.
Листинг 7.12. Рекурсивная функция, вычисляющая квадраты
чисел до тех пор, пока число не станет большим 1 000 000_________________________
fu n c tio n
square
if
s q u a re ltU p (s ta rtin g N u m b e r)
= s ta rtin g N u m b e r
{
* s ta rtin g N u m b e r;
(sq u a re > 1000000) {
c o n s o le . lo g ( s q u a re ) ;
} e ls e {
s q u a r e ltU p ( s q u a re ) ;
В о т это уже лучш е! Н о проблемы о стались и у этой ф ункции. Ч то если кто-то
передаст функции отрицательное число, нуль или единицу? Л ю бое из этих значений
Глава 7. Приобретаем функциональность
121
породит бесконечный цикл. Чтобы обезопасить себя в подобных ситуациях, необходи
мо ввести условие прерывания рекурсии. В листинге 7.13 дополнительно введена про
верка того, что аргумент не меньше и не равен 1 и что он представляет собой число.
В любом из этих случаев выполнение функции немедленно прекращается.
Листинг 7.13. Рекурсивная функция с заданными условиями
для прекращения выполнения и базовым случаем________________________________
fu n c tio n
//
if
s q u a r e ltU p (s ta rtin g N u m b e r)
У словия прекращения
{
выполнения,
неверный ввод
( ( t y p e o f s t a r t i n g N u m b e r != ' n u m b e r ' )
( s t a r t i n g N u m b e r 1000000) {
c o n s o l e . lo g ( s q u a r e ) ; / / Вывести конечный р е з у л ь т а т
} e l s e { / / Е сл и б а з о в о е у с л о в и е не в ы п о л н я е т с я ,
/ / то
выполнить
снова
s q u a r e ltU p (s q u a re ) ;
}
Функции, объявленные в qfiyiux функциях
Ф ун к ц и и м огут объявляться в других функциях. В листинге 7.14 продем онстри
ровано, как работает эта техника и как она влияет на область видимости переменных,
созданных в функциях.
Листинг 7.14. Объявление функций в функциях__________________________________
fu n c tio n
tu rn ln to A M a rtia n (m y N a m e )
fu n c tio n
re c a llN a m e (m y N a m e )
v a r m a rtia n N a m e
{
{
= myName + " М а р с и а н и н " ;
}
re c a llN a m e (m y N a m e );
c o n s o le . lo g ( m a rtia n N a m e ) ;
//
вернуть
u n d e fin e d
П реды дущ ий пример показывает, как вложение функции в д ругую функцию соз
дает другой уровень области видимости. К переменным, созданным во внутренней
функции, невозможен непосредственны й доступ извне. Для получения их значений
требуется использование инструкции r e t u r n , как показано в листинге 7.15.
122
Часть II. Организация программ на JavaScript
Листинг 7.15. Возврат значений из внутренней функции
fu n c tio n
tu rn ln to A M a rtia n (m y N a m e )
fu n c tio n
re c a llN a m e (m y N a m e )
{
{
v a r m a r t i a n N a m e = myName + " М а р с и а н и н " ;
r e t u r n m a rtia n N a m e ;
}
v a r m a rtia n N a m e = re c a llN a m e ( m y N a m e ) ;
c o n s o le . lo g ( m a rtia n N a m e ) ;
Глава 7. Приобретаем функциональность
123
Глава 8
Создание и использование объектов
в э*пой главе...
>
Понятие объекта
>
Свойства и методы объектов
>
Создание объектов
>
Точечная нотация
>
Работа с объектами
“С вещ ью б ез имени нам н еч его дел ат ь ”.
М ори с Бланш о
этой главе показано, зачем нужны объекты, как их используют и почему их
применение способствует улучшению стиля программирования и качества
программ.
Ofoefctn моих желаний
Кроме пяти элементарных типов данных (см. главу 3), в JavaScript имеется тип
данных под названием объект. Объекты JavaScript инкапсулируют данные и функцио
нальность в повторно используемых компонентах.
Чтобы понять, что такое объекты и как они работают, полезно сравнить объекты
JavaScript с физическими объектами из реальной жизни. Возьмем, к примеру, гитару.
Мы можем описать гитару, указав, что она собой представляет и что с ее помощью
можно делать. Вот некоторые факты о гитаре, которые будут использованы в этом
примере:
S она имеет шесть струн;
S она черно-белая:
S она электрическая;
S она имеет цельный корпус.
А вот кое-что из того, что можно делать с помощью гитары:
S заставлять струны звучать;
S увеличивать громкость;
✓
уменьшать громкость;
S натягивать струны;
S регулировать тембр;
S ослаблять струны.
Если бы гитара была объектом JavaScript, а не реальным объектом, то действия,
которые с ней можно совершать, назывались бы методами, а элементы, которые об
разуют гитару, например струны или корпус, назывались бы ее свойствами.
Методы и свойства объекта записываются одним и тем же способом — в виде пар
“имя-значение”, в которых имя и значение разделены двоеточием. Если значением
свойства является функция, то оно называется методом.
В действительности все, что находится внутри объекта, является свой
ством. Просто свойство, значением которого является функция, мы назы
ваем иначе — методом.
В листинге 8.1 показано, как могла бы выглядеть гитара, представленная в виде
объекта JavaScript.
Листинг 8.1. Гитара как объект JavaScript
var
g u ita r
= {
b o d y C o lo r: " b la c k " ,
s c r a t c h P la t e C o lo r : " w h ite " ,
n u m b e r O f S t r i n g s : 6,
b ra n d : "Yam aha",
bodyType: " s o lid " ,
s t r u m : f u n c t i o n () { . . . } ,
t u n e : f u n c t i o n () { . . . }
Создание о
< t itle > 4 T O э т о ? Конф игурато р
< s c rip t>
v a r m y C h a ir = {
объекта
C h a ir< /title >
" c u s h io n M a te r ia l" : "",
"num berO fLegs" : " " ,
" le g H e ig h t" : ""
f u n c t i o n c o n f i g u r e C h a i r () {
v a r u s e rV a lu e ;
f o r ( v a r p r o p e r t y i n m y C h a ir)
if
{
(m y C h a ir.h a s O w n P ro p e r ty ( p r o p e rty ) )
u s e rV a lu e = p r o m p t("В ведите
p ro p e rty);
m y C h a ir[ p r o p e rty ]
значение
{
свойства
" +
= u s e rV a lu e ;
}
}
128
Часть II. Организация программ на JavaScript
f u n c t i o n w r i t e C h a i r R e c e i p t ()
d o c u m e n t . w r i t e ("< Ь2>0бъект
{
c h a ir
будет иметь
следующую
конф игурацию :< /h 2 > ") ;
fo r
if
(var p ro p e rty
in
m y C h a ir)
{
(m y C h a ir.h a s O w n P ro p e r ty ( p r o p e rty ) ) {
d o c u m e n t.w r ite ( p r o p e r ty + ": " + m y C h a ir[ p r o p e rty ]
+ "< br> ");
}
}
c o n f i g u r e C h a i r ();
w r i t e C h a ir R e c e i p t ();
< /s c rip t>
< /body>
< /h tm l>
Удаление свойапв
Для удаления свойств из объектов используется оператор
показано, как это работает.
d e le te .
В листинге 8.4
Листинг 8.4, Использование оператора d e l e t e __________________________________
v a r m yO b je ct = {
v a r l : "th e v a lu e " ,
var2 : "a n o th e r v a lu e " ,
v ar3 : "y e t a n o th e r"
};
/ / удалить свойство var2
d e le t e m y O b je c t.v a r2 ;
из
о б ъ е кта m yO b je ct
/ / попытка за п и си зн ачения v a r2
d o c u m e n t.w rite ( m y O b je c t.v a r2 ) ; / /
ошибка
Padotfia с методами
Методы — это свойства, значениями которых являются функции. Метод опреде
ляется точно так же, как и любая функция. Единственное различие состоит в том, что
метод присваивается свойству объекта. В листинге 8.5 продемонстрировано создание
объекта с несколькими свойствами, одним из которых является метод.
Листинг 8,5. Создание метода_________________________________________________
var
s a n d w ic h
= {
m ea t:"",
ch ee se:"",
b re a d :"",
c o n d im e n t: " " ,
m a k e S a n d w ic h :
fu n c tio n
( m e a t,c h e e s e ,b re a d ,c o n d im e n t)
Глава 8. Создание и использование объектов
{
129
sa n d w ic h .m e a t
= m eat;
s a n d w ic h .c h e e s e
= cheese;
s a n d w ic h .b re a d = b re a d ;
s a n d w ic h .c o n d im e n t = c o n d im e n t;
v a r m yS a n d w ic h = s a n d w ic h . b r e a d + ", " + s a n d w ic h .m e a t
", " + s a n d w ic h .c h e e s e + ", " + sa n d w ic h ,
c o n d im e n t;
r e t u r n m yS a n d w ic h ;
+
}}
Можно использовать метод m a k e S a n d w i c h объекта s a n d w i c h , прибегнув к точечной
нотации, как это обычно делается при доступе к свойству, предоставляя параметры в
круглых скобках, записанных после имени метода (листинг 8.6).
Листинг 8.6. Вызов метода____________________________________________________
< h t m l>
< Ь ^ 1 е> С д е л ай те мне C 3 H flB H 4 < /title >
< body>
< s c rip t>
var
s a n d w ic h
= {
meat: ,
ch e e se :"",
b r e a d : " ",
c o n d im e n t: " " ,
m a k e S a n d w ic h : f u n c t i o n ( m e a t , c h e e s e , b r e a d , c o n d im e n t )
s a n d w ic h .m e a t = m eat;
s a n d w ic h .c h e e s e = ch ee se;
s a n d w ic h .b re a d = b re a d ;
{
s a n d w ic h .c o n d im e n t = c o n d im e n t;
v a r m y S a n d w ic h = s a n d w ic h . b r e a d +
", " + s a n d w ic h .m e a t + ", " +
s a n d w ic h .c h e e s e + ", " +
s a n d w ic h . c o n d im e n t;
r e t u r n m y S a n d w ic h ;
}
var
s a n d w ic h O rd e r =
s a n d w ic h .m a k e S a n d w ic h ("h a m ","c h e d d a r","w h e a t","
s p i c y m u s t a r d " );
d o c u m e n t.w rite
( s a n d w ic h O rd e r);
< /s c rip t>
< /h tm l>
130
Часть II. Организация программ на JavaScript
Использование ключевого слова this
Ключевое слово t h i s — это краткая запись ссылки на объект, содержащий данный
метод. Например, в листинге 8.7 вместо имени объекта s a n d w i c h везде используется
ключевое слово t h i s . Когда функция m a k e S a n d w i c h () вызывается как метод объекта
s a n d w i c h , JavaScript понимает, что t h i s означает объект s a n d w i c h .
Листинг 8.7, Использование ключевого слова t h i s в методе______________________
< h t m l>
< he ad>
^ ^ 1е> Сделайте
< /head>
< s c rip t>
var
s a n d w ic h
мне
сэндвич< Д^ 1е>
= {
m e a t :" ",
ch ee se:"",
b r e a d : ,,,f,
c o n d im e n t: " " ,
m a k e S a n d w ic h : f u n c t i o n ( m e a t , c h e e s e , b r e a d , c o n d i m e n t ) {
t h i s . m e a t = m eat;
th is .c h e e s e = cheese;
t h is .b r e a d = bread;
t h i s . c o n d im e n t = c o n d im e n t;
v a r m yS a n d w ic h = t h i s . b r e a d + ", " + t h i s . m e a t
" + t h is . c h e e s e + ", " + t h is . c o n d im e n t ;
r e t u r n m y S a n d w ic h ;
+ ",
}
var
sa n d w ic h O rd e r =
s a n d w ic h .m a k e S a n d w ic h (" h a m " , " c h e d d a r " , " w h e a t " , "
s p i c y m u s t a r d " );
d o c u m e n t .w rit e ( s a n d w ic h O rd e r);
< /s c rip t>
< /h tm l>
Используя указатель t h i s вместо имени конкретного объекта, мы получим точно
тот же результат, что и прежде.
Указатель t h i s особенно полезен тогда, когда у вас есть функция, которая может
применяться множеством различных объектов. В таком случае ключевое слово t h i s
не связывается с каким-то одним объектом и будет указывать на тот объект, который
вызывает данный метод.
В следующих разделах вы познакомитесь с функциями-конструкторами и наследо
ванием, причем в обоих случаях ключевое слово t h i s играет важную роль.
Глава 8. Создание и использование объектов
131
OJbeKtnHO-ofiueHtnufioeauHbtu способ
fiaeJoiatneinb: наследование
Ваши возможности не ограничены созданием лишь конкретных объектов, которые
моделируют, например, гитару, автомобиль или сэндвич. Вся красота объектов состо
ит в том, что с их помощью можно создавать объектные типы, которые впоследствии
могут быть использованы для создания других объектов.
В предыдущих разделах объекты конструировались непосредственно на основе
объектного типа O b j e c t .
Особенно отчетливо это утверждение демонстрируется примерами в разделе “Соз
дание объектов”, в которых объекты создавались с помощью конструктора:
v a r person
= new O b j e c t ( ) ;
В этой строке создается объект типа O b j e c t . Вновь созданный объект p e r s o n со
держит все свойства и методы объектного типа O b j e c t , заданные по умолчанию, но
они связаны с новым именем. Далее вы сможете самостоятельно добавить в объект
p e r s o n методы и свойства, конкретизирующие данный объект.
v a r person
= new O b j e c t ( ) ;
p e r s o n . e y e s = 2;
p e r s o n . e a r s = 2;
p e r s o n . a r m s = 2;
p e r s o n . h a n d s = 2;
p e rso n .fe e t = 2;'
p e r s o n . l e g s = 2;
p e r s o n . s p e c i e s = "Hom o s a p i e n s " ;
Теперь объект p e r s o n обладает конкретными свойствами. Представьте, что вы хо
тите создать новый объект, описывающий конкретного человека, например кантримузыканта Вилли Нельсона. Вы могли бы просто создать новый объект w i l l i e N e l s o n
и наделить его теми же свойствами, которые имеются у объекта p e r s o n , и дополни
тельно свойствами, делающими Вилли Нельсона уникальной личностью.
v a r w i l l i e N e l s o n = ne w O b j e c t ( ) ;
w i l l i e N e l s o n . e y e s = 2;
w i l l i e N e l s o n . e a r s = 2;
w illie N e ls o n .a rm s
w
w
w
w
= 2;
i l l i e N e l s o n . h a n d s = 2;
i l l i e N e l s o n . f e e t = 2;
i l l i e N e l s o n . l e g s = 2;
i l l i e N e l s o n . s p e c i e s = "Hom o s a p i e n s " ;
w illie N e ls o n .o c c u p a tio n
= " m u s ic ia n " ;
w illie N e ls o n .h o m e to w n = " A u s t in " ;
w illie N e ls o n . h a ir = "Long";
w illie N e ls o n .g e n re
= "co u n try";
Однако такой способ определения объекта w i l l i e N e l s o n слишком расточите
лен. Он требует выполнения большого объема работы, и к тому же из этого вовсе не
132
Часть II. Организация программ на JavaScript
следует, что он связан с тем же типом объектов, что и объект p e r s o n . Можно лишь
сказать, что у них есть некоторые общие свойства.
Решение состоит в том, чтобы создать новый тип объекта под названием P e r s o n , а
затем создать объект w i l l i e N e l s o n , принадлежащий к этому типу.
Обратите внимание на то, что, говоря о типе объекта, мы всегда использу
ем прописную первую букву в имени объектного типа. Это не требование,
но почти повсеместно используемое соглашение. Поэтому, например, мы
записываем инструкции в следующем виде:
v a r person
= new O b j e c t ( ) ;
или
var w illie N e ls o n
= new P e r s o n f ) ;
Создание объектов с помощью конструкторов
Чтобы создать новый тип объекта, вы создаете новую функцию конструктора. Кон
структоры объектов создаются так же, как и любая другая функция JavaScript, но для
присвоения свойств новому объекту используется ключевое слово t h i s . Новый объект
наследует свойства объектного типа.
Вот так выглядит конструктор объектов типа P e r s o n .
fu n c tio n
P e r s o n (){
th is .e y e s
th is .e a rs
th is .a r m s
th is .h a n d s
th is .fe e t
= 2;
=2;'
= 2;
= 2;
= 2;
t h i s . l e g s = 2;
t h i s . s p e c i e s = "Hom o s a p i e n s " ;
Теперь для создания нового объекта достаточно назначить функцию новой пере
менной, например:
var w illie N e ls o n
= ne w P e r s o n O ;
Объект w i l l i e N e l s o n наследует свойства объектного типа P e r s o n . И хотя вы не
предпринимали никаких действий для создания свойств объекта w i l l i e N e l s o n , он
содержит все свойства объекта P e r s o n .
Чтобы проверить, как все это работает, выполните в браузере код, приведенный в
листинге 8.8.
Листинг 8.8. Тестирование наследования_______________________________________
< h t m l>
< title > fle M O H C T p a u H H н а с л е д о в а н и я < Д ^ 1 е >
< /head>
Глава 8. Создание и использование объектов
133
< bod y>
< s c rip t>
fu n c tio n
Pe rson (){
th is .e y e s
th is .e a r s
= 2;
= 2;
t h i s . a r m s = 2;
t h i s . h a n d s = 2;
th is .fe e t
th is .le g s
= 2;
= 2;
th is .s p e c ie s
= "Homo s a p i e n s " ;
}
v a r w i l l i e N e l s o n = new P e r s o n f ) ;
a l e r t (" W i l l i e N e ls o n has " + w i l l i e N e l s o n . f e e t
f e e t !");
+ "
< /s c rip t>
< /body>
< /h tm l>
Результат выполнения листинга 8.8 представлен на рис. 8.1.
X
Q fi 1e :///S :/D lale ktika /Ja vaS crip tFD /in h e ritan ee .htm I
О п овещ ение JavaScript
Willie Nelson has 2 feet!
C Z D
Рис. 8.1. Выполнение вашей первой функции в консоли JavaScript
Видоизменение объектного типа
Предположим, у вас есть объектный тип P e r s o n , который служит прототипом для
нескольких объектов. В один прекрасный момент вы осознаете, что объект p e r s o n , а
также все другие объекты, которые являются его потомками, нуждаются в нескольких
дополнительных свойствах.
Для изменения объектного прототипа используют свойство p r o t o t y p e , которое
наследуется каждым объектом от объекта O b j e c t . В листинге 8.9 показано, как это
работает.
134
Часть //. Организация программ на JavaScript
Листинг 8.9. Видоизменение прототипа объекта
fu n c tio n
P e r s o n (){
t h i s . e y e s = 2;
t h i s . e a r s = 2;
t h i s . a r m s = 2;
t h i s . h a n d s = 2;
th is .fe e t
= 2;
t h i s . l e g s = 2;
t h i s . s p e c i e s = "Homo s a p i e n s " ;
}
v a r w i l l i e N e l s o n = new P e r s o n O ;
v a r j o h n n y C a s h = ne w P e r s o n O ;
v a r p a ts y C lin e
= ne w P e r s o n O ;
/ / Объект P e rs o n нуж дается в дополнительны х
P e r s o n . p r o t o t y p e . k n e e s = 2;
свойствах!
P e r s o n . p r o t o t y p e . t o e s = 10;
P e r s o n . p r o t o t y p e . e l b o w s = 2;
//
Проверка
наличия новых с в о й с т в
d o c u m e n t.w rite
( p a ts y C lin e .t o e s ) ;
у сущ ествующ их о б ъ е к то в
//
выводит
10
Создание объектов с помощью метода Object.create ()
Еще один способ создания одних объектов на основе других заключается в исполь
зовании метода O b j e c t . c r e a t e (). Преимуществом такого подхода является то, что
он не требует написания функции-конструктора и лишь копирует свойства заданного
объекта в другой объект. Если один объект наследует от другого, то объект, от которого
наследуются свойства, называется прототипом.
В листинге 8.10 показано, как метод O b j e c t . c r e a t e () может быть использован
для создания объекта w i l l i e N e l s o n на основе прототипа.
Листинг 8.10. Использование метода O b j e c t . c r e a t e ()
для создания объекта на основе прототипа______________________________________
//
создать
var
Person
eyes:
arm s:
обобщенный ти п
Person
= {
2,
2,
fe e t: 2
/ / с о з д а т ь о б ъ е к т w i l l i e N e l s o n на о с н о в е P e r s o n
var w illie N e ls o n = O b je c t.c re a te (P e rso n );
/ / проверка наличия унаследованных свой ств
d o c u m e n t . w r it e ( w i l l i e N e l s o n . f e e t ); / / вы водит 2
S Управление браузером с помощью объекта Window
S Манипулирование документами посредством DOM
S Работа с событиями в JavaScript
S Интеграция ввода и вывода
S Работа с CSS и графикой
Глава 9
Управление браузером
с помощью объекта Window
/3эйгой главе...
>
Что такое BOM (Browser Object Model)
>
Открытие и закрытие окон
>
Получение свойств
>
Изменение размеров окон
“Создавая теории, всегда держите распахнутым окно, чтобы было
куда выбрасывать теории, оказавшиеся ненужными”.
Бела Лугоши
я
я бъектная модель браузера (Browser Object Model — BOM) позволяет
JavaScript взаимодействовать с функциональностью браузера. Используя
ВОМ, можно создавать окна и изменять их размеры, отображать окна сообщений и
изменять текущую веб-страницу, открытую в браузере.
В этой главе вы узнаете о том, какие операции можно выполнять с окном браузера
и как использовать эти возможности для улучшения JavaScript-программ.
7>ficu/3eliH,asi cfieqa
Браузер — это сложная совокупность программных компонентов, обеспечивающая
просмотр веб-страниц. Когда все идет нормально, браузер безукоризненно выполняет
свои функции, поддерживая комфортные рабочие условия для пользователя. Однако,
как всем нам хорошо известно, время от времени браузеры “тормозят”, а иногда их
выполнение завершается аварийной остановкой. Чтобы понимать, почему так проис
ходит, и знать, как сделать работу браузера более эффективной, важно иметь отчет
ливое представление о том, для чего предназначены те или иные его компоненты и
каковы механизмы их взаимодействия.
Пользовательский интерфейс
Та часть браузера, с которой вы взаимодействуете, когда вводите URL-адрес, щел
каете на кнопке перехода на начальную страницу, создаете и используете закладки или
изменяете настройки, называется пользовательским интерфейсом.
Пользовательский интерфейс браузера включает меню, панели инструментов, бо
ковую панель, полосы прокрутки и кнопки, расположенные снаружи основного окна
содержимого, в которое загружаются веб-страницы (рис. 9.1).
файл
Правка
вид Журнал
Зэкладвги Инструменты
ф The Future of Business and...
watithia.com
^
Интернет
Закладки
X
Р
ш
Адресная строка
*
☆
' Коллекция веб-фраг...
4
ft
Ъ w Ф
j*
I
*
•
D
=
ндущмые саЙ1
Рекомендуемые
сайты
^ Панель закладок
WatzThis?
v I; Панель закладок
i ■
ш
ПЭНвЛЬ ВКЛЭДОК
1Getting Started ^ Most Visited
Поиск:
Справка
+
Меню закладок
The Best Online Training for Beginners
Нелодшитые закладки
Боковая панель
Окно браузера
Subscribe to our newsletter
Home
Articles
Store
Wat We Do
Who We Are
Photo Gallery
Contact Us
Инструменты разработчика
Ш* ?
Консоль
Очиаить
Не очищать
HTML
7
,
' >■1
/ V ■V
л
CSS
Пр зфитирсвать
Все
Ошибки
Преду
Выполнить
Очистить
Скопировать
ч/
Красивый вывод
Рис. 9.1. Пользовательский интерфейс браузера
Загрузчик
Загрузчик — это часть браузера, которая обменивается данными с сервером и за
гружает веб-страницы, сценарии, стили C SS, графику и другие компоненты веб
страницы. Чаще всего именно стадия загрузки является основной виновницей того,
что полного открытия страницы пользователю приходится дожидаться в течение не
которого времени.
HTML-страница — это та часть веб-страницы, которая должна загружаться в пер
вую очередь, поскольку она содержит ссылки, внедренные сценарии и стили, подле
жащие обработке до отображения готовой страницы на экране.
На рис. 9.2 показана вкладка Network (Сеть) средства Инструменты разработчика
браузера Chrome. В ней отображаются все процессы, происходящие во время загрузки
140
Часть III. JavaScript в Интернете
веб-страницы, вместе с временной шкалой, позволяющей судить о том, сколько време
ни занимает загрузка каждой части.
По завершении загрузки HTML-документа браузер открывает несколько соедине
ний с сервером для загрузки остальных частей веб-страницы с максимально возмож
ной скоростью. Вообще говоря, части веб-страницы, связанные с HTML-документом
(известные под названием ресурсы), загружаются в том порядке, в каком они появля
ются в HTML-документе. Например, сценарий, подключенный в верхней части стра
ницы в элементе head, будет загружен раньше, чем сценарий, подключенный в нижней
части страницы.
#
D ev elo p er Tools •• h ttp //v t w w d u m m ies com .
•
Q
3
•
®
E le m en ts! E w w ortt t Sources TrmeHne P ro llk s
'if'
[ Name
Method
. ! Mww.dufflintes.com
; ,
,
GET
j srvlc.css
, j 1S5S46.CM
I
1 jquery mm js
1j
i satellitetib hbb44eab»972dfb
i '
i yieldbot intent js
I
GET
GET
"j efftcts.js
GET
1 resizable i>
GET
| dragdrop)%
!
GET
] bvcplpc J»
GET
I wlndow.js
GET
1 slideshow.)!
tools js
GET
GET
i w.ley master tss
GET
ga_expjs?utmxk«y «38095674
icon farebook png
m
| Twmerlcon2012 png
tq*'* Icon -gpius prig
Qjgi Icon-youtube png
304
304
304
304
304
.
304
304
304
applicati
applicati
applicati
applicati
text/css
Image/pnn
304
304
Im agt/png
JJJ£ r
Timeline
394ms
www.dummies.co
101B
210 ms
www.dummies.cg
1018
223 ms
в
264 ms
wyywdiumn:,!CSr,EB
10 1
tVww dMtmiltGEO
229 8
w m d u m m u s .tp
439 8
36 ms
870 ms
*
www.dummics.ee.
1018
www.dumnves.co
101 В
yiTv>y,dummic4>ta
101В
23S ms
www.dummics.co
101В
229m s
ftvw.riuninvtfcag
101В
634 ms
101В
663 ms
wwv/.dummies.co
1018
SfiSms
www.dumrr.ies.co...
1018
66S ms
wna/.dgmmisiitw
1018
66Sm*
v-m rium m itSiM ■
296 В
516 ms
www.dumrmcs.co.
101В
437m s
a 32 ms
applicati
applicati.
Size
8.1 кв
410В
61m s
www di;mm«es.cn
101В
7 30 ms
www.dummies.co..
101В
232 ms
101В
228 ms
101В
236 ms
te x t/ja v a .
CET
CET
applicati
applicati
applicati
GET
GET
applicati.
image* png
304
Nat Mad
304
texr/css
applicati
304
304
text/css
applicati
NotM1
GET
j q u an tjs
Ц
GET
304
Not M - t
GET
Initiator
texr/html
304
Not Mad
GET
1 loqopng
.
>з # а,.
A udits Console
Type
200
GET
GET
■ j prototypejs
!5
Resources
Disable cache
SE 1 Preserve log
lmag*/png
rrr
304
l m v M w
rtu m n w rco
152 req u e sts * 153 KB tran sferred 1 4 83 s (load 3 .66 s. D O M Contentloaded 2 .79 si
Рис. 9.2. Загрузка веб-страницы в браузер
Последовательность загрузки ресурсов критически влияет на эффек
тивность и скорость отображения веб-страниц для пользователя. Чтобы
страница отображалась корректно, должны быть загружены и проана
лизированы примененные к ней CSS-стили. Поэтому CSS-стили всегда
должны загружаться в элементе head, располагающемся в верхней части
веб-страницы.
Глава 9. Управление браузером с помощью объекта Window
141
Иногда на процесс отображения веб-страниц влияет также JavaScript, однако чаще
всего это сказывается лишь на функциональности. Если сценарий воздействует на
визуализацию веб-страницы, то он должен загружаться в заголовке документа (по
сле CSS-стилей). Сценарии, не оказывающие критического влияния на отображение
веб-страниц, должны подключаться в самом конце элемента b o d y (непосредственно
перед тегом < / b o d y > ) , чтобы загрузка их ресурсов не блокировала браузер, тем самым
задерживая отображение другой информации.
Синтаксический анализ HTML-документа
По окончании процесса загрузки веб-страницы компонент браузера, ответствен
ный за выполнение синтаксического анализа HTML-документа (синтаксический ана
лизатор, или парсер), приступает к разбору HTML-разметки и создания модели веб
страницы, получившей название DOM (Document Object Model — объектная модель
документа). Эту модель, подробному рассмотрению которой посвящена глава 10, мож
но уподобить карте веб-страницы. Программисты на JavaScript используют эту карту
для получения доступа к различным частям веб-страницы и манипулирования ими.
Завершив синтаксический анализ HTML-кода, браузер начинает загрузку осталь
ных частей веб-страницы.
Синтаксический анализ CSS-стилей
Сразу же после загрузки CSS-стилей веб-страницы браузер выполняет их синтак
сический анализ и определяет, какие из них применяются к HTML-документу. Это
сложный процесс, включающий многократные проходы по документу, целью которого
является корректное применение стилей с учетом их взаимного влияния.
Синтаксический анализ JavaScript
Следующий этап отображения веб-страницы — синтаксический анализ сценариев
JavaScript. Анализатор JavaScript компилирует и выполняет сценарии в том порядке, в
каком они появляются в документе. Если JavaScript-код добавляет или удаляет элемен
ты, текст или стили в HTML DOM, то браузер соответственно обновляет страницу.
Компоновка и визуализация
Наконец, как только все ресурсы веб-страницы загружены и проанализированы,
браузер определяет, в каком виде должна отобразиться страница, после чего отобража
ет ее. Если только вами не было задано ожидание завершения какого-либо сценария,
включенного ранее в документ, компоновка и визуализация сценариев выполняются в
том порядке, в каком они следуют в документе.
Вообще говоря, чем быстрее отобразится страница для пользователя, тем
лучше, даже если на первоначальном этапе функциональность страницы
будет неполной. Такая стратегия (носящая название отложенная загрузка)
намеренно используется в современных браузерах для улучшения пользо
вательского восприятия веб-страниц. Если вам приходилось сталкиваться
142
Часть III. JavaScript в Интернете
с ситуациями, когда веб-страница открыта, но ввод данных в форму ста
новится возможным лишь спустя некоторое время, то вы уже знаете, что
такое отложенная загрузка.
Взаимодействие с ВОМ
JavaScript-программисты могут получать информацию о браузере пользователя и
управлять различными аспектами пользовательского опыта посредством интерфейса
прикладного программирования (Application Programming Interface — API), получив
шего название объектная модель браузера (Browser Object Model — BOM).
Какого-либо утвержденного стандарта объектной модели браузера не существу
ет. В различных браузерах эта модель реализуется по-разному. Однако существуют
некоторые общепринятые стандарты того, как JavaScript может взаимодействовать с
браузерами.
Объект N avigator
Объект N a v i g a t o r предоставляет JavaScript доступ к информации о браузере поль
зователя. Свое имя он получил по названию первого браузера, в котором был реали
зован, — Netscape Navigator. Объект N a v i g a t o r не встроен в JavaScript, но доступ к
нему из JavaScript возможен как к браузерному средству. Почти все производители
браузеров, описывая этот высокоуровневый браузерный объект в документации, ис
пользуют одну и ту же терминологию.
Объект N a v i g a t o r обеспечивает доступ к следующей полезной информации:
S название браузера;
S версия браузера;
S физическое расположение компьютера, на котором установлен браузер
(если пользователь разрешил доступ к геолокационной информации);
S язык, используемый в браузере;
S тип компьютера, на котором установлен браузер.
В табл. 9.1 приведены все свойства браузерного объекта N a v i g a t o r .
Таблица 9.1. Свойства объектаNavigator
Свойство
Использование
appCodeNam e
Получает кодовое имя браузера
appNam e
Получает имя браузера
аррV e rs io n
Получает информацию о версии браузера
c o o k ie E n a b le d
Сообщает, разрешено ли использование cookie-файлов в браузере
g e o lo c a tio n
Может использоваться для определения физического местоположения компьютера
пользователя
la n g u a g e
Получает язык браузера
o n L in e
Идентифицирует состояние подключения браузера к сети
Глава 9. Управление браузером с помощью объекта Window
143
О кончание табл. 9.1
Свойство
Использование
p la tfo r m
Получает платформу, для которой скомпилирован браузер
product
Получает имя движка браузера
userA gent
Получает данные, передаваемые пользовательским агентом браузера на серверы
Для получения значений свойств браузера используется тот же синтаксис, что и для
получения значений свойств любого объекта, а именно: точечная или скобочная нота
ция. В листинге 9.1 приведен код, который, будучи открытым в браузере, отображает
текущие свойства объекта N a v i g a t o r и их значения.
Листинг 9.1. Свойства объекта N a v i g a t o r и их значения_________________________
< s ty le >
.c o lu m n s {
- w e b k i t - c o l u m n - c o u n t : 6;
- m o z - c o l u m n - c o u n t : 6;
c o l u m n - c o u n t : 6;
/*
/*
Chrom e,
F ire fo x
S a fa ri,
O pera
*/
*/
}
< /s ty le >
< body>
< d iv c la s s = " c o lu m n s " >
< s c rip t>
f o r (var prop in n a v ig a t o r ) {
d o c u m e n t.w rite
(prop
+
" + n a v ig a to r[ p r o p ]
+
"");
}
< /s c r ip t >
< /d iv>
< /body>
< /h tm l>
Результат работы этой программы в браузере Chrome представлен на рис. 9.3.
Если вы запустите код из листинга 9.1 в браузере, то заметите одну интересную
вещь: создается впечатление, будто значение свойства a p p N a m e не соответствует дей
ствительности. Например, данные, представленные на рис. 9.3, были получены с ис
пользованием браузера Google Chrome, и тем не менее для свойства a p p N a m e выведено
значение N e t s c a p e .
Это вводящее в заблуждение значение является пережитком тех давних дней, когда
свойства объекта N a v i g a t o r применялись программистами для того, чтобы опреде
лить, использует ли пользователь конкретную модель браузера, поддерживающую
определенные свойства.
Когда появились новые браузеры, такие как Chrome или Firefox, в них для свойства
a p p N a m e было сохранено значение из браузера Netscape, что должно было подтверж
дать их совместимость с сайтами, проверяющими это свойство.
144
Часть III. JavaScript в Интернете
j Navigator.html
С . D file:///S:/Dialektika/JavaScriptFD/Navigator.html
cookieEnabled:
WOW64)
true
AppleWebKit 537.3
(KHTML. like
productSub:
20030107
Gecko)
vendor: Gooele
Chrome 44.0.2403.1
Safari 537.36
Inc.
platform: Win32
vendorSub:
maxToucliPomts: product Gecko
userAgent:
0
liardwareConcurrenc Mozilla 5.0
2
(Windows NT 6 1:
appCodeNaine:
WOW64)
AppleWebKit 537.3
Mozilla
appName:
(KHTML. like
Gecko)
Netscape
appVersion: 5.0
Chrome 44.0.2403.1
(Windows NT 6.1: Safari'537.36
В наши дни проверка типа браузера не рекомендуется ввиду ее неэффек
тивности, и вместо просмотра значения свойства appName выполняется
проверка того, поддерживает ли браузер конкретную функциональную
возможность. Наиболее распространенным способом обнаружения воз
можностей браузера является поиск в DOM объектов, связанных с функ
циональностью, которую предполагается использовать. Например, если вы
хотите узнать, поддерживает ли браузер элемент HTML5 audio, то вос
пользуйтесь следующим тестом.
v a r t e s t _ a u d i o = d o c u m e n t . c r e a t e E l e m e n t (" a u d i o " );
if
( te s t_ a u d io .p la y )
{
c o n s o le .lo g
} e ls e {
("Браузер
поддерживает
элемент
c o n s o le .lo g
("Браузер
не п о д д е р ж и в а е т
HTM L5 a u d i o " ) ;
э л е м е н т HTML5 a u d i o " ) ;
}
Объект Window
Основная область браузера называется окном (window). Это та область, в которую
загружаются HTML-документы (и связанные с ними ресурсы). Каждая вкладка браузе
ра представляется в JavaScript экземпляром объекта Window. Свойства объекта Window
перечислены в табл. 9.2.
Таблица 9.2. Свойства объекта Window
Свойство
Использование
closed
Булево значение, указывающее на то, закрыто или открыто окно
defaultStatus
Получает или устанавливает текст, выводимый по умолчанию в строке состояния
Глава 9. Управление браузером с помощью объекта Window
145
О кончание табл. 9.2
Свойство
Использование
docum ent
Ссылается на объект D o c u m e n t окна
fra m e E le m e n t
Получает элемент, такой как или ,'B который внедрено окно
fra m e s
Перечисляет все вспомогательные фреймы в текущем окне
h is to ry
Получает историю просмотра для текущего окна в браузере пользователя
in n e rH e ig h t
Получает внутреннюю высоту окна
in n e rW id th
Получает внутреннюю ширину окна
le n g th
Получает количество фреймов в окне
lo c a tio n
Получает объект L o c a t i o n для окна
name
Получает или устанавливает имя окна
n a v ig a to r
Получает объект N a v i g a t o r для окна
opener
Получает объект W in d o w , создавший текущее окно
o u te rH e ig h t
Получает наружную высоту окна, включая полосы прокрутки и панели инструментов
p a g e X O ffse t
Получает количество пикселей, прокрученных в горизонтальном направлении в окне
p a g e Y O ffse t
Получает количество пикселей, прокрученных в вертикальном направлении в окне
p a re n t
Ссылается на родительский объект текущего окна
screen
Ссылается на объект S c r e e n окна
scree n Left
Получает расстояние в пикселях по горизонтали от левого края основного экрана до
левого края текущего окна
screenT op
Получает расстояние в пикселях по вертикали от верхнего края основного экрана до
верхнего края текущего окна
screenX
Получает горизонтальную координату относительно экрана
screenY
Получает вертикальную координату относительно экрана
s e lf
Ссылается на текущее окно
top
Ссылается на самое верхнее окно браузера
Вот некоторые из наиболее популярных применений свойств объекта
w in d o w :
S открытие в окне браузера страницы, расположенной в другом месте;
* определение размера окна браузера;
S возврат к ранее открывавшейся странице (например, как после щелч
ка на кнопке Назад).
Открытие веб-страницы с использованием свойства w in d o w , l o c a t i o n
Запрос значения свойства w i n d o w , l o c a t i o n возвращает URL-адрес текущей
страницы. Установка нового URL-адреса в этом свойстве приводит к загрузке веб
страницы, расположенной по указанному адресу, в то же окно.
В листинге 9.2 приведен пример веб-страницы со сценарием, который запрашивает
ввод адреса пользователем и загружает указанную страницу в текущее окно браузера.
146
Часть III. JavaScript в Интернете
Листинг 9.2. Сценарий для загрузки веб-страницы в окно браузера
с использованием свойства w in d o w . l o c a t i o n _________________________________
< h t m l>
< head>
< s c rip t>
f u n c t i o n lo a d N e w P a g e ( u r l ) {
w in d o w .lo c a tio n = u r l;
}
< /s c rip t>
< s c rip t>
v a r newURL =
p r o m p t ("П ож алуйста,
lo a d N e w P a g e (n e w U R L) ;
введите
адрес
ве б -стр а н и ц ы !");
< /s c rip t>
< /body>
< /h tm l>
Результат выполнения кода из листинга 9.2 в браузере Chrome выглядит так, как
показано на рис. 9.4.
< b od y >
var currentWidth = window.innerWidth;
if ( c u r r e ntWidth > 5 0 0 ) {
d o c u m e n t . w r i t e "Bauie окно б о л ь ш о е .");
} e lse {
d o c u m e n t . w r i t e " < Ы > В а ш е окно н е б о л ь ш о е . < / h l > " );
< / bo d y >
Чтобы протестировать пример адаптивного дизайна, приведенный в листинге 9.3,
выполните следующие действия.
1. Откройте в своем браузере HTML-документ, который содержит код, при
веденный в листинге 9.3.
Если ширина окна браузера превышает 500 пикселей, то вы увидите сообщение
о том, что ваше окно большое.
2. Перетащите нижний правый угол окна, чтобы сделать его настолько узким,
насколько это возможно, как показано на рис. 9.5.
3. Щ елкните на кнопке обновления страницы или нажмите клавиши
(Mac) или (Windows).
Обратите внимание на то, что теперь сообщение на странице говорит о том, что
окно имеет небольшой размер.
Создание кнопки Н а з а д с помощью свойств l o c a t i o n и h i s t o r y
Свойство h i s t o r y объекта w i n d o w — это предназначенная только для чтения ссылка
на объект history, который хранит информацию о страницах, ранее посещенных поль
зователем в текущем окне браузера. Обычное применение объекта h i s t o r y — активиза
ция кнопок, возвращающих пользователя к ранее просмотренным страницам.
148
Часть III. JavaScript в Интернете
Рис. 9.5. Отображение разных сообщений в зависимости от ширины окна
Листинг 9.4. Реализация кнопки Н а з а д в веб-приложении______________
Co3flaHne кнопки Ha3afl
f u n c t i o n t a k e M e B a c k () {
w i n d o w . l o c a t i o n ( w i n d o w . h i s t o r y . g o (-1));
}
f u n c t i o n g e t H i s t o r y L e n g t h () {
var 1 = w i n d o w . h i s t o r y .length;
r e t u r n 1;
}
v a r h i s t o r y L e n g t h = g e t H i s t o r y L e n g t h ();
d o c u m e n t . w r i t e ("Добро пожаловать! к о л и ч е с т в о
страниц, п о с е щ е н н ы х вами в э т о м окне: " +
h i s t o r y L e n g t h + п . ");
Назад
Глава 9. Управление браузером с помощью объекта Window
149
Чтобы использовать кнопку Назад, создаваемую кодом в листинге 9.4, выполните
следующие действия.
1. Откройте в браузере новое окно и посетите любую страницу, например
w w w .watzthis.com.
2. Находясь в том же окне, откройте HTML-документ, который содержит код,
приведенный в листинге 9.4.
3. Щелкните на кнопке Назад.
Браузер вернет вас на последнюю из страниц, посещенных до того, как вы от
крыли страницу с кнопкой Назад.
Догадайтесь, что произойдет, если вы откроете код из листинга 9.4 в новой
вкладке браузера, прежде чем посетить любую другую веб-страницу, на
ходясь на этой вкладке? Если вы подумали, что ничего не произойдет, то
вы правы! Если в окне отображалась только ОДНА (текущая) страница, то
и возвращаться некуда.
Использование методов объекта window
Кроме свойств, у объекта w i n d o w также имеются некоторые полезные методы, ко
торые программисты на JavaScript должны знать и использовать. Полный список этих
методов приведен в табл. 9.3.
Метод — это лишь другое название для функции, содержащейся в объекте.
Таблица 9.3. Методы объекта Window
Метод
Использование
a l e r t ()
Отображает окно оповещения, которое содержит текст сообщения и кнопку ОК
a t o b ()
Декодирует строку, закодированную с помощью системы шифрования base64
b l u r ()
Делает текущее окно неактивным
c l e a r l n t e r v a l ()
Отменяет повторное выполнение кода, заданного методом s e t I n t e r v a l ()
c l e a r T i m e o u t ()
Отменяет выполнение кода, заданного методом s e t T i m e o u t ()
c l o s e ()
Закрывает текущее окно
confirm()
Отображает диалоговое окно, которое содержит необязательное сообщение и две
кнопки — ОК и Cancel (Отмена)
c r e a t e P o p u p ()
Создает всплывающее окно
f o c u s ()
Делает текущее окно активным
m o v e B y ()
Перемещает текущее окно на заданную величину смещения
Изменяет размеры окна на заданное количество пикселей
r e s i z e T o ()
Изменяет размеры окна до заданных значений ширины и высоты
s c r o l l B y ()
Прокручивает документ на указанное количество пикселей
s c r o l l T o ()
Прокручивает документ до указанных координат
s e t l n t e r v a l ()
Периодически вызывает функцию или выполняет выражение через определенные
промежутки времени (заданные в миллисекундах)
s e t T i m e o u t ()
Однократно вызывает функцию или выполняет выражение по истечении определен
ного промежутка времени (заданного в миллисекундах)
s t o p ()
Прекращает загрузку текущего окна
Глава 9. Управление браузером с помощью объекта Window
151
Глава 10
Манипулирование документами
с помощью DOM
3 э/пой главе...
>
Знакомство с DOM (объектная модель документа)
>
Работа с узлами
> Перемещение по дереву узлов
>
Выбор элементов
“Загадочны не вещи. Загадка — ваши глаза”.
Элизабет Боуэн
о
нание DOM дает возможность манипулировать текстом или HTML-разметкой
на веб-странице. Используя DOM, можно создавать анимацию, обновлять дан
ные без перезагрузки веб-страниц, перемещать объекты в браузере, а также делать
много других полезных вещей.
4tno tncucoe 2)0/71
DOM (Document Object Model — объектная модель документа) — это интерфейс,
посредством которого JavaScript работает с HTML-документами в окнах браузера.
Данная модель допускает графическое представление в виде перевернутого дерева,
где каждая часть документа изображается в виде ветви, исходящей из той части до
кумента, в которой она содержится.
Пример разметки веб-страницы представлен в листинге 10.1, а ее DOM-представление — на рис. 10.1.
Листинг 10.1. HTML-документ________________________________
Bob's Appliances
< / t itle>
< / he a d >
< b ody>
< img s r c = " l o g o .g i f " w i d t h = M100" h e i g h t = " 1 0 0 "
L ogo">
alt="Site
< h l > W e l c o m e to B o b ' s < / h l >
< p > T h e home of q u a l i t y a p p l i a n c e s < / p >
Рис. 10.1. DOM -представление документа из листинга 10.1
Иерархическое дерево DOM состоит из отдельных компонентов, называемых узла
ми. Главный узел, от которого ответвляются другие узлы, называется узлом докумен
та. Непосредственно под узлом документа располагается узел корневого элемента.
Для HTML-документа корневым узлом является HTML. За корневым узлом следуют
другие элементы, атрибуты, а также элементы содержимого документа, каждый из ко
торых представлен узлом дерева, происходящим от другого узла.
В DOM имеются узлы нескольких типов.
S Узел документа. Представляет весь HTML-документ.
S Узлы элементов. HTML-элементы.
Глава 10. Манипулирование документами с помощью DOM
153
S
Узлы атрибутов. Атрибуты, ассоциированные с элементами.
S
Текстовые узлы. Текстовое содержимое элементов.
S
Узлы комментариев. Имеющиеся в документе HTML-комментарии.
Ои1наиен.ил между узлами
Иерархическая система отношений между узлами DOM-дерева напоминает от
ношения между родственниками в семье. Это сходство настолько велико, что даже
технические термины, описывающие соотношения между узлами, получили свои на
звания от отношений, существующих в семье.
S У каждого узла, за исключением корневого, имеется один родитель
ский узел.
S Каждый узел может иметь любое количество дочерних узлов.
S Узлы, имеющие общего родителя, называют сестринскими.
Поскольку HTML-документы часто содержат несколько элементов одного и того
же типа, DOM позволяет обращаться к различным элементам в узле, используя их
индексы. Например, р [0] — это первый из элементов документа, р [1] — второй
элемент и т.д.
Несмотря на то что список узлов напоминает массив, на самом деле это не
так. Действительно, для просмотра содержимого списка узлов можно ис
пользовать циклы, однако методы для работы с массивами к спискам узлов
неприменимы.
В примере, приведенном в листинге 10.2, все три элемента являются дочер
ними по отношению к элементу < s e c t i o n > . Поскольку родитель у них общий, эти
элементы являются сестринскими по отношению друг к другу.
В листинге 10.2 дочерними по отношению к элементу < s e c t i o n > являются
также комментарии. Последний комментарий, расположенный непосред
ственно перед закрывающим тегом < s e c t i o n > , называется последним до
черним элементом элемента < s e c t i o n > .
Зная отношения, существующие между узлами документа, вы сможете использо
вать DOM-дерево для нахождения любого элемента.
Листинг 10.2. Отношения между родительскими, дочерними
и сестринскими узлами в HTML-документе______________________________________
< html>
< head>
HTML-ceMeMCTBO
< body>
< р> П ер вы й < /р > < ! - 1 - й д о ч е р н и й э л е м е н т э л е м е н т а s e c t i o n ,
являю щ ийся с е с т р и н с к и м по отношению к д в у м
э л е м е н т а м р ~>
< р > В т о р о й < / р >
< р > Т р е т и й < / р >
< /s e c tio n >
< /h tm l>
В листинге 10.3 приведен H T M L -документ, который содерж ит сценарий, отобра
жающий все дочерние узлы элемента < s e c t i o n > .
Листинг 10.3. Отбражение дочерних узлов элемента s e c t i o n _____________________
< h t m l>
^^1е>НТМЬ-семейство
< bod y>
< s e c t i o n >
< р> П ер вы й < /р >
< р > В т о р о й < / р >
< р > Т р е т и й < / р >
