мировой компьютерный бестселлер John Duckett Самый полный гид по созданию современных сайтов Interactive Front-End Web Development WILEY Джон Дакетт Самый полный гид по созданию современных сайтов Интерактивная веб-разработка МОСКВА ÓÄÊ 004.43 ÁÁÊ 32.9 .1 Ä14 Jon Duckett JAVASCRIPT & JQUERY: INTERACTIVE FRONT-END WEB DEVELOPMENT © by John Wiley & Sons, Inc., Indianapolis, Indiana. . Published Under License with the original publisher John Wiley & Sons, Inc. Ä14 Äàêåòò, Äæîí. JavaScript è jQuery. Èíòåðàêòèâíàÿ âåá-ðàçðàáîòêà / Äæîí Äàêåòò ; [ïåð. ñ àíãë. Ì.À. Ðàéòìàíà]. — Ìîñêâà : Èçäàòåëüñòâî «Ý», 2017. — 640 ñ. : èë. — (Ìèðîâîé êîìïüþòåðíûé áåñòñåëëåð). Ýòà êíèãà — ñàìûé ïðîñòîé è èíòåðåñíûé ñïîñîá èçó÷èòü JavaScript è jQuery. Íåçàâèñèìî îò ñòîÿùåé ïåðåä âàìè çàäà÷è — ñïðîåêòèðîâàòü è ðàçðàáîòàòü âåá-ñàéò ñ íóëÿ èëè ïîëó÷èòü áîëüøå êîíòðîëÿ íàä óæå ñóùåñòâóþùèì ñàéòîì — ýòà êíèãà ïîìîæåò âàì ñîçäàòü ïðèâëåêàòåëüíûé, äðóæåëþáíûé ê ïîëüçîâàòåëþ âåá-êîíòåíò. Ïðîñòîé âèçóàëüíûé ñïîñîá ïîäà÷è èíôîðìàöèè ñ ïîíÿòíûìè ïðèìåðàìè è íåáîëüøèì ôðàãìåíòîì êîäà çíàêîìèò ñ íîâîé òåìîé íà êàæäîé ñòðàíèöå. Âû íàéäåòå ïðàêòè÷åñêèå ñîâåòû î òîì, êàê îðãàíèçîâàòü è ñïðîåêòèðîâàòü ñòðàíèöû âàøåãî ñàéòà, è ïîñëå ïðî÷òåíèÿ êíèãè ñìîæåòå ðàçðàáîòàòü ñâîé âåá-ñàéò ïðîôåññèîíàëüíîãî âèäà è óäîáíûé â èñïîëüçîâàíèè. ÓÄÊ 004.43 ÁÁÊ 32.9 .1 Âñå ïðàâà çàùèùåíû. Êíèãà èëè ëþáàÿ åå ÷àñòü íå ìîæåò áûòü ñêîïèðîâàíà, âîñïðîèçâåäåíà â ýëåêòðîííîé èëè ìåõàíè÷åñêîé ôîðìå, â âèäå ôîòîêîïèè, çàïèñè â ïàìÿòü ÝÂÌ, ðåïðîäóêöèè èëè êàêèì-ëèáî èíûì ñïîñîáîì, à òàêæå èñïîëüçîâàíà â ëþáîé èíôîðìàöèîííîé ñèñòåìå áåç ïîëó÷åíèÿ ðàçðåøåíèÿ îò èçäàòåëÿ. Êîïèðîâàíèå, âîñïðîèçâåäåíèå è èíîå èñïîëüçîâàíèå êíèãè èëè åå ÷àñòè áåç ñîãëàñèÿ èçäàòåëÿ ÿâëÿåòñÿ íåçàêîííûì è âëå÷åò óãîëîâíóþ, àäìèíèñòðàòèâíóþ è ãðàæäàíñêóþ îòâåòñòâåííîñòü. Ïðîèçâîäñòâåííî-ïðàêòè÷åñêîå èçäàíèå ÌÈÐÎÂÎÉ ÊÎÌÏÜÞÒÅÐÍÛÉ ÁÅÑÒÑÅËËÅÐ Äæîí Äàêåòò JAVASCRIPT È JQUERY ÈÍÒÅÐÀÊÒÈÂÍÀß ÂÅÁ-ÐÀÇÐÀÁÎÒÊÀ Äèðåêòîð ðåäàêöèè Å. Êàïü¸â Îòâåòñòâåííûé ðåäàêòîð Å. Èñòîìèíà Õóäîæåñòâåííûé ðåäàêòîð À. Ãóñåâ Â îôîðìëåíèè ïåðåïëåòà èñïîëüçîâàíà ôîòîãðàôèÿ: -strizh- / Shutterstock.com Èñïîëüçóåòñÿ ïî ëèöåíçèè îò Shutterstock.com ООО «Издательство «Э» 123308, Москва, ул. Зорге, д. 1. Тел. 8 (495) 4 . ндіруші: «Э» АБ Баспасы, 123308, Мскеу, Ресей, Зорге к#шесі, 1 $й. Тел. 8 (495) 4 . Тауар белгісі: «Э» аза&стан Республикасында дистрибьютор жне #нім бойынша арыз-талаптарды &абылдаушыны7 #кілі «РДЦ-Алматы» ЖШС, Алматы &., Домбровский к#ш., 3«а», литер Б, офис 1. Тел.: 8 (727) 2 /90/91/92, факс: 8 (727) 251 58 12 вн. 107. німні7 жарамдылы& мерзімі шектелмеген. Сертификация туралы а&парат сайтта ндіруші «Э» Сведения о подтверждении соответствия издания согласно законодательству РФ о техническом регулировании можно получить на сайте Издательства «Э» ндірген мемлекет: Ресей Сертификация &арастырылмаHан Ïîäïèñàíî â ïå÷àòü . Ôîðìàò 70x1001/16. Ïå÷àòü îôñåòíàÿ. Óñë. ïå÷. ë. 51,85. Òèðàæ ýêç. Çàêàç © Райтман М.А.,перевод на русский язык, 2017 © Оформление. ООО «Издательство «Э», 2017 ОГЛАВЛЕНИЕ Введение Основы программирования Основные команды JavaScript Функции, методы, объекты Решения и циклы Объектная модель документа События jQuery Ajax и JSON API-интерфейсы Обработка ошибок и отладка Панели контента Фильтрация, поиск и сортировка Валидация и улучшение форм Указатель ЗАГРУЗКА КОДА Файлы примеров для этой книги вы можете загрузить на сайте Эта книга рассказывает о том, как в браузере может использоваться язык JavaScript. Код JavaScript помогает делать сайты более интерактивными, интересными и удобными для пользователя. Кроме того, вы познакомитесь с библиотекой jQuery, которая значительно упрощает программирование на JavaScript. Чтобы изучить эту книгу максимально эффективно, читатель должен уметь создавать веб-страницы и верстать их с использованием языков HTML и CSS . Никакого другого дополнительного опыта программирования не требуется. Чтобы научиться программировать на JavaScript, вам понадобится следующее. Понимать некоторые Изучить сам язык . Как Освоить применение базовые концепции программирования, а также термины, используемые в языке JavaScript. и в случае с любым языка JavaScript. Для другим языком, вы этого в книге при- должны будете освоить ведено множество «словарь» JavaScript примеров, демонстри- и научиться строить рующих, как сегодня «фразы». используется JavaScript. Для работы с книгой вам понадобится только компьютер, на котором установлен современный веб-браузер, а также ваш любимый текстовый редактор для написания кода — например, Блокнот (Notepad), TextEdit, Sublime Text или Coda. СОЗДАНИЕ ОБЪЕКТОВ И ДОСТУП К НИМ ПРИ ПОМОЩИ НОТАЦИИ КОНСТРУКТОРА СОЗДАНИЕ ОБЪЕКТОВ ПРИ ПОМОЩИ СИНТАКСИСА КОНСТРУКТОРА ОСНОВЫ ПРОГРАММИРОВАНИЯ Что такое сценарий и как его написать. Какое место компьюте- Как написать сценарий ры занимают в нашем для веб-страницы. мире. Изучив основы, вы можете переходить к следующим главам. В них будет рассмотрено, как ставить браузеру те или иные задачи с использованием языка JavaScript. В вышеприведенном коде при помощи функции конструктора создается пустой объект с именем hotel. После создания объекта ему присваиваются три свойства и метод. Если у объекта уже имелись какие-либо из этих свойств, то при применении функции конструктора значения их будут перезаписаны. Для обращения к свойству этого объекта можно использовать точечную нотацию, точно так же, как и при работе с любым объектом. Например, для получения имени отеля следует ввести: hotel.name. Аналогично для использования метода нужно записать имя объекта и через точку за ним — название метода: hotel. checkAvailability(). c3/js/object-constructor.js J AVA S C R I P T Чтобы лучше представлять, по какой причине может понадобиться создавать несколько объектов на одной странице, рассмотрим следующий пример. В нем показывается, сколько свободных номеров есть в двух отелях. Сначала функция конструктора определяет шаблон для отелей. Далее создаются два экземпляра объекта-отеля такого типа. Первый соответствует отелю «Пляж», а второй — отелю «Тула». Создав экземпляры этих объектов, можно обращаться к их свойствам и методам при помощи такой же точечной нотации, которую мы уже применяли с другими объектами. В последнем примере мы обращаемся к данным обеих гостиниц и записываем их на страницу. HTML-код для этого примера меняется в зависимости от отеля. Для каждого отеля создается переменная, где содержится название отеля, за которым следует запятая, пробел и текст свободно номеров: . В следующей строке добавляется переменная, содержащая количество номеров, доступных в конкретном отеле. Операция += применяется для добавления контента к имеющейся переменной. c03/js/multiple-objects.js J AVA S C R I P T Прежде чем вы научитесь писать код на языке JavaScript и читать его, вам необходимо познакомиться с некоторыми ключевыми концепциями программирования как такового. Они будут рассмотрены в трех разделах этой главы. function Hotel(name, rooms, booked) { this.name = name; this.rooms = rooms; this.booked = booked; this.checkAvailability = function() { return this.rooms - this.booked; var hotel = new Object(); hotel.name = 'Ïëÿæ'; hotel.rooms = 120; hotel.booked = 77; hotel.checkAvailability = function() { return this.rooms - this.booked; var quayHotel = new Hotel('Òóëà', 40, 25); var parkHotel = new Hotel('Ïëÿæ', 120, 77); var elName = document. getElementById('hotelName'); elName.textContent = hotel.name; var details1 = quayHotel.name + ', ñâîáîäíî íîìåðîâ: '; details1 += quayHotel. checkAvailability(); var elHotel1 = document. getElementById('hotel1'); elHotel1.textContent = details1; var elRooms = document. getElementById('rooms'); elRooms.textContent = hotel. checkAvailability(); var details2 = parkHotel.name + ', ñâîáîäíî íîìåðîâ: '; details2 += parkHotel. checkAvailability(); var elHotel2 = document. getElementById('hotel2'); elHotel2.textContent = details2; Р Е З УЛ ЬТАТ Р Е З УЛ ЬТАТ ФУНКЦИИ, МЕТОДЫ, ОБЪЕКТЫ ФУНКЦИИ, МЕТОДЫ, ОБЪЕКТЫ ОСНОВЫ ПРОГРАММИРОВАНИЯ Каждая глава начинается с введе- На справочных страницах представ- ния, в котором перечисляются все ее лены основные элементы JavaScript. основные темы HTML-код выделен синим цветом, CSS-код — розовым, JavaScript-код — зеленым ДОСТУП К ЭЛЕМЕНТАМ МЕТОДЫ, ВОЗВРАЩАЮЩИЕ ВСЕГО ОДИН УЗЕЛ ЭЛЕМЕНТА getElementById('èäåíòèôèêàòîð') Запрос к DOM может вернуть один элемент либо объект NodeList, представляющий собой коллекцию узлов. Иногда требуется обратиться всего к одному конкретному элементу (то есть к сохраненному в нем фрагменту страницы). В других случаях необходимо выделить группу элементов — например, все заголовки h1 на странице или все элементы li в определенном списке. Здесь в дереве DOM мы видим тело страницы из примера со списком. Сейчас нас интересует именно доступ к элементам, поэтому на данной схеме отображены только узлы элементов. Схемы на следующих страницах подсказывают, какие элементы будут возвращены в DOM-запросе. Как вы помните, узлы — это представления элементов в дереве DOM. Выделяет конкретный элемент по значению его атрибута id. У искомого HTML-контента должен быть такой идентификатор. Поддержка браузерами: Internet Explorer 5.5 или выше, Opera 7 или выше, все версии Chrome, Firefox, Safari.. getElementById('one') querySelector('css-ñåëåêòîð') Использует синтаксис CSS-селекторов, позволяющий выделить один или более элементов. Этот метод возвращает только первый из результатов, соответствующих запросу. Поддержка браузерами: Internet Explorer 8, Firefox 3.5, Safari 4, Chrome 4, Opera 10 или выше. for (var i = 0; i < 10; i++) { document.write(i); querySelector('li.hot') is 0 < 10? МЕТОДЫ, ВОЗВРАЩАЮЩИЕ ОДИН ИЛИ БОЛЕЕ ЭЛЕМЕНТОВ (В ВИДЕ ОБЪЕКТОВ NODELIST) body div script ГРУППЫ УЗЛОВ ЭЛЕМЕНТОВ КРАТЧАЙШИЙ МАРШРУТ Если метод может вернуть более одного узла, то он всегда возвращает элемент NodeList, представляющий собой коллекцию узлов (пусть даже в этой коллекции будет всего один элемент, совпадающий с запросом). Вам нужно выбрать из списка интересующий вас элемент по индексу (нумерация начинается с 0, как в массиве). Например, несколько элементов могут обладать одинаковым именем тега, поэтому метод getElementsByTagName() всегда Если вы возьмете за правило находить кратчайший путь для доступа к элементу на вашей странице, то весь сайт будет казаться более быстрым и работоспособным. Как правило, для этого требуется оценить минимальное количество узлов на пути к тому элементу, с которым вы собираетесь работать. Например, метод getElementById() быстро вернет элемент, поскольку на страница содержит максимум один элемент с конкретным значением атрибута id. Правда, этим методом можно воспользоваться лишь случае, если у интересующего вас элемента есть атрибут id. будет возвращать объект NodeList. is 1 < 10? м1к0 Начало i=0 и ба в ля ем is 8 < 10? 1к1 в ляе is 9 < 10? м1к0 i=2 i=8 и ба в ля ем 1к1 is 10 < 10? i=1 и ба getElementsByClassName('hot') getElementsByTagName('èìÿ òåãà') Выделяет на странице все элементы, обладающие указанным именем тега. Этот метод работает быстрее, чем querySelectorAll(). Поддержка браузерами: Internet Explorer 6, Firefox 3, Safari 4, Chrome 4, Opera 10 или выше (в более ранних версиях некоторых браузеров этот атрибут поддерживается частично или с ошибками). в ляе getElementsByClassName('êëàññ') Выделяет один или более элементов по значению их атрибута class. Искомый HTML-контент должен иметь атрибут class. Этот метод работает быстрее, чем querySelectorAll(). Поддержка браузерами: Internet Explorer 9, Firefox 3, Safari 4, Chrome 4, Opera 10 или выше (в более ранних версиях некоторых браузеров этот атрибут поддерживается частично или с ошибками). иба i=9 i = 10 Конец getElementsByTagName('li') querySelectorAll('èìÿ òåãà') Использует синтаксис CSS-селекторов, выделяет один или более элементов и возвращает все элементы, совпадающие с запросом. Поддержка браузерами: Internet Explorer 8, Firefox 3.5, Safari 4, Chrome 4, Opera 10 или выше. ОБЪЕКТНАЯ МОДЕЛЬ ДОКУМЕНТА querySelectorAll('li.hot') ОБЪЕКТНАЯ МОДЕЛЬ ДОКУМЕНТА 199 При первой итерации цикла переменной i (счетчику) присваивается значение 0 При каждой итерации цикла условие проверяется. Значение переменной i должно быть меньше 10 Затем выполняется код в цикле (команды, записанные в фигурных скобках) Переменная i может использоваться внутри цикла. Здесь она применяется для записи числа на странице Когда выполнение команд завершится, значение переменной i будет увеличено на 1 РЕШЕНИЯ И ЦИКЛЫ Как только условие перестает соблюдаться (являться истинным), работа цикла прекращается. Сценарий переходит к выполнению следующей строки кода РЕШЕНИЯ И ЦИКЛЫ Страницы с основной информацией Диаграммы и инфографика представ- имеют белый фон и также содержат лены на страницах с темным фоном — расширенные сведения по теме, об- это простой визуальный источник суждаемой в главе справочной информации по обсуждаемой теме ПРИМЕР AJAX И JSON В этом примере выводится информация о трех мероприятиях. Данные, которые будут использоваться, берутся из трех разных источников. 1) Места проведения мероприятий встроены в HTML-страницу, которая загружается. Пользователь щелкает мышью по одному из мероприятий в левой панели; при этом обновляется расписание в средней панели Ссылки в левой панели имеют атрибут id, чье значение — двухбуквенный идентификатор, обозначающий город и страну, где проводится мероприятие: ... Ïåêèí, Êèòàé 2) Расписания хранятся в объекте JSON. Он, в свою очередь, находится во внешнем файле, загружаемом после дерева DOM. Описание, по которому щелкают в средней панели, выводится справа. Описания сеансов, взятые из HTML-файла, размещаются справа. Каждый сеанс хранится в отдельном элементе, а его название используется в качестве значения для атрибута id (пробелы заменяются дефисами). Âçëîì öåïè ОБЗОР ФУНКЦИИ, МЕТОДЫ, ОБЪЕКТЫ Функции позволяют объединять в группы на- боры взаимосвязанных инструкций, нужных для решения конкретной задачи. Функции могут принимать параметры (ин- формацию, необходимую для выполнения задачи) и возвращать какое-либо значение. Объект — это совокупность переменных и функций, представляющих модель того или иного явления из реального мира. В объекте переменные называются свойства- ми, а функции — методами. Браузеры реализуют объекты, представляю- щие как окно приложения, так и загруженный туда документ. 3) Описания всех сеансов хранятся в одном HTMLфайле. Для выбора каждого отдельного описания используется метод .load() из библиотеки jQuery (и селектор #, показанный на с. @@@). Описания сеансов, взятые из HTML-файла, размещаются справа. Каждый сеанс хранится в отдельном элементе, а его название используется в качестве значения для атрибута id (пробелы заменяются дефисами).

Âçëîì öåïè

Îòïðàâëÿéòåñü â ýëåêòðîøàòåð…

В JavaScript есть ряд встроенных объектов, в частности, String, Number, Math и Date. Их свойства и методы предоставляют функционал, помогающий писать сценарии. Массивы и объекты можно использовать для создания сложных множеств данных (причем массив способен содержать объекты, а объ- Поскольку ссылки то добавляются, то удаляются, мы ект — массивы). используем делегирование событий. 406 AJAX И JSON AJAX И JSON 407 150 ФУНКЦИИ, МЕТОДЫ, ОБЪЕКТЫ Разделы с примерами объединяют В конце каждой главы приведен обзор, изученные темы и демонстрируют где напоминается об основных мо- практическое применение изложен- ментах рассмотренных тем ной выше информации КАК JAVASCRIPT ПОМОГАЕТ УЛУЧШИТЬ ИНТЕРАКТИВНОСТЬ ВЕБ-СТРАНИЦ ДОСТУП К КОНТЕНТУ Язык JavaScript позволяет выделить на Язык JavaScript позволяет придать веб-страницам дополнительную интерактивность, так как предоставляет доступ к их контенту и возможность изменять его, а также разметку на веб-странице, когда она открыта в браузере. HTML-странице любой элемент, атрибут или текст, например: • выделить текст во всех элементах h1, расположенных на странице; • выделить все элементы, имеющие атрибут class со значением note; • узнать, какая информация была ИЗМЕНЕНИЕ КОНТЕНТА Язык JavaScript можно использовать для введена в текстовое поле, чей атрибут добавления на страницу (или для удале- id имеет значение email. ния с нее) элементов, атрибутов и текста, например: • добавить абзац текста после первого элемента h1; • изменить значение атрибутов class, чтобы вступили в силу новые правила CSS, которые коснутся элементов с этими атрибутами; • изменить размер или положение элемента img.