Хотите добавить интерактивности своему интернет-сайту? Узнайте, как jQuery позволит вам создать целый набор скриптов, используя всего несколько строчек кода! С помощью этого издания вы максимально быстро научитесь работать с jQuery — этой удивительной библиотекой JavaScript, использование которой сегодня стало необходимостью для разработки современных веб-сайтов и RIA-приложений. jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, а также предоставляет богатые возможности по взаимодействию с AJAX. Особенностью данного издания является уникальный способ подачи материала, выделяющий серию «Head First» издательства O'Reilly в ряду множества скучных книг, посвященных программированию.
Название: Изучаем работу с jQuery Автор: Бенедетти Р., Крэнли Р. Издательство: Питер Год: 2012 Страниц: 508 Формат: PDF Размер: 19,1 МБ ISBN: 978-5-459-00896-8 Качество: Отличное
Содержание:
Введение Ваш мозг думает о jQuery. Вы сидите за книгой и пытаетесь что-нибудь выучить, но ваш мозг считает, что вся эта писанина не нужна. Ваш мозг говорит: «Выгляни в окно! На свете есть более важные вещи, например сноуборд». Как заставить мозг думать, что ваша жизнь действительно зависит от jQuery? Для кого написана эта книга? Метапознание: наука о мышлении Что можете сделать ВЫ, чтобы заставть свой мозг повиноваться Примите к сведению Технические рецензенты Благодарности 1. Знакомство с jQuery Живые веб-страницы Вы хотите расширить возможности своих веб-страниц. Вы уже знаете HTML и CSS и хотите включить в свой арсенал сценарное программирование, но вам совершенно не хочется проводить свою жизнь за написанием сотен строк кода. Нужна библиотека сценариев, которая позволяла бы изменять веб-страницы «на ходу». И если на то пошло, как насчет поддержки AJAX и РНР? И чтобы в трех строках кода можно было сделать то, для чего в большинстве клиентских языков потребуется 15? Пустые мечты, скажете вы… А вот и нет! На помощь приходит jQuery. Новые возможности веб-страниц HTML и CSS - это, конечно, хороню, но… … без сценариев не обойтись Знакомьтесь: jQuery (иJavaScript)! Что происходит в браузере Скрытая структура веб-страницы jQuery упрощает работу с DOM Функция j Query (и ее сокращенная запись) jQuery выбирает элементы по тем же правилам, что и CSS Селекторы: стили и сценарии Использование ceлeктopoвjQuery jQuery в переводе Ваш первый проект с jQuery Подготовка файлов HTML и CSS Поехали… Эффекты изменения прозрачности И это все? Пушистые Друзья спасены Ваш инструментарий jQuery 2. Селекторы и методы Хватай и действуй jQuery помогает выбирать элементы веб-страниц и выполнять с ними всевозможные операции. В этой главе более подробно рассмотрены селекторы и методы jQuery. Селекторы jQuery выбирают элементы страницы, а методы выполняют операции с этими элементами. Библиотека jQuery, словно сборник магических заклинаний, позволяет изменять окружающую реальность. Вы можете заставить изображение исчезнуть или появиться из ниоткуда или же выбрать фрагмент текста и анимировать изменение его размера шрифта… Но довольно разговоров - хватайте элементы веб-страниц и действуйте! Подруга просит тебя помочь оформить сайт Что требуется от проекта? Начинаем с div Событие click под увеличительным стеклом Включение метода click в страницу Выражайтесь точнее Назначение классов Идентификаторы элементов Три уровня веб-страницы Возвращаемся к списку Выделение памяти для хранения данных Конкатенация и слияние данных Возвращаемся к программному коду… Вставка сообщения Все отлично работает, но… Дайте мне $(this) Использование $(this) Скатертью дорога! Метод remove Селекторы потомков Ваша очередь прыгать от радости Ваш инструментарий jQuery 3. События и функции jQuery Страница в центре событий jQuery позволяет легко включить в любую веб-страницу поддержку действий и интерактивности. В этой главе вы узнаете, как заставить вашу страницу реагировать на действия, выполняемые пользователем. Возможность выполнения кода в ответ на действия пользователя поднимает сайт на совершенно новый уровень. Также в этой главе рассказано, как создавать функции, чтобы однократно написанный код можно было использовать много раз. Ни минуты покоя В словах бухгалтера есть резон… Реакция на события За кулисами слушателя событий Связывание события Срабатывание событий Удаление событий Перебор элементов Структура проекта Использование функций Как устроена функция Анонимная функция Именованные функции как обработчики событий Передача переменных функциям Функция также может возвращать значения Условные конструкции и принятие решений Но это еще не все Методы могут изменять CSS Добавление события hover Еще немного… Ваш инструментарий jQuery 4. Операции со структурами страниц в jQuery Изменение DOM Завершение загрузки страницы еще не означает, что ее структура останется неизменной. В главе 1 было показано, как в процессе загрузки страницы строится модель DOM, определяющая ее структуру. В этой главе вы научитесь перемещаться по дереву DOM, работать с иерархией элементов и отношениями «родитель/потомок» для изменения структуры страницы «на ходу» средствами jQuery. Интерактивное меню Вегетарианцы, вперед! Назначение классов элементам Создание кнопок Что дальше? Перемещение по дереву DOM Методы обхода дерева DOM Сцепленные вызовы методов В переменных также могут храниться элементы И снова знак $… Хранение данных в массивах Хранение элементов в массиве Изменение элементов методом replaceWith Чем поможет replaceWith? Не торопитесь с replaceWith Когда replaceWith не подходит Вставка HTML в DOM Фильтры (часть 1) Фильтры (часть 2) Верните гамбургер на место И где же мясо? Массив отсоединенных элементов Метод each и перебор массивов Вроде… все? Ваш инструментарий jQuery 5. jQuery эффекты и анимация Плавно и изящно Реализация всяких интересных возможностей - дело замечательное, но если ваша страница не будет хорошо смотреться, люди не станут приходить на сайт. И здесь на первый план выходят визуальные эффекты и анимация jQuery. Вы научитесь организовывать переходы, скрывать и отображать нужные части элементов, изменять размеры элементов на странице - и все это на глазах у ваших посетителей! Вы научитесь планировать выполнение анимаций, чтобы они происходили с различными интервалами, отчего ваша страница будет выглядеть исключительно динамично. Новый заказ Проект «Собери монстра» Макет и позиционирование Еще немного структуры и стиля Проработка интерфейса Эффект молнии Как jQuery выполняет анимацию элементов? Эффекты изменения прозрачности изменяют свойство CSS opacity Эффект скольжения Как работают эффекты изменения прозрачности Комбинированные эффекты Задержка при использовании эффектов Включение функций в сценарий Самодельные эффекты и animate Что можно анимировать? Метод animate изменяет стилевое оформление Откуда и куда? Абсолютные и относительные перемещения элементов Включение вызовов animate в сценарный код Смотри, мама! Работает без Flash! Ваш инструментарий jQuery 6. jQuery и JavaScript Люк jQuery, я твой отец! Силы jQuery небезграничны. Хотя эта библиотека написана на JavaScript, к сожалению, она позволяет сделать не все, на что способен язык-родитель. В этой главе мы рассмотрим некоторые возможности JavaScript, необходимые для создания современных сайтов, и их применение в jQuery для создания пользовательских списков и объектов, а также средства перебора списков и объектов, которые существенно упростят вашу работу. Программируем блэкджек Объекты и хранение данных Построение собственных объектов Создание объектов для повторного использования Взаимодействие с объектами Подготовка страницы И снова массивы Обращение к ячейкам массива Добавление и обновление ячеек Повторение операций Поиск иголки в стоге сена Пора принимать решение… снова! Операторы сравнения и логические операторы Стирание информации в jQuery Чтобы было красивее Ваш инструментарий j Query и JavaScript 7. Пользовательские функции доя пользовательских эффектов Что будем делать? От объединения пользовательских эффектов jQuery с функциями JavaScript ваш код (и ваши веб-приложения) становится более эффективным и более мощным. В этой главе мы займемся совершенствованием эффектов jQuery посредством обработки событий браузера, использования временных функций и улучшения общей структуры и возможностей повторного использования пользовательских функций JavaScript. Надвигается буря Мы создали монстра… функцию-монстра Управление временными эффектами Обработка событий браузера в onblur и onfocus Методы работы с таймером определяют время выполнения функций Пишем функции stopLightning и goLightning Новая просьба Случайные монстры Мы уже знаем текущую позицию… … и функция getRandom уже готова Перемещение относительно текущей позиции «Собери монстра-2» - настоящий хит! Ваш инструментарий jQuery 8. jQuery и Ajax Пожалуйста, передайте данные Использовать jQuery для всяких фокусов с CSS и DOM довольно весело, но при программировании веб-приложений необходимо получать данные с сервера и отображать их на странице. Возможно, вам даже захочется обновлять небольшие фрагменты страницы без полной перезагрузки страницы. Технология Ajax в сочетании с jQuery и JavaScript позволяет решить эту задачу. В этой главе вы узнаете, как в jQuery реализуются обращения Ajax к серверу и что можно сделать с полученной информацией. Бегом к современным технологиям Прошлогодняя страница Даешь динамику! СТАРЫЕ и НОВЫЕ веб-технологии Структура Aj ах Что такое Ajax? Фактор «X» Получение данных методом ajax Разбор данных XML Планирование событий Самоактивизируемые функции Сервер нам поможет Который час? Отключение планирования событий на странице Ваш инструментарий jQuery/Ajax 9. Данные JSON Клиент встречается с сервером Возможность чтения данных из файлов XML безусловно полезна, но иногда этого оказывается недостаточно. Другой, более эффективный формат передачи данных JSON (JavaScript Object Notation) упрощает получение данных со стороны сервера. Кроме того, данные JSON проще генерируются и читаются, чем данные XML. При помощи jQuery, PHP и SQL можно создать базу данных для хранения информации, которая позднее читается с использованием JSON и отображается на экране средствами jQuery. Вот она, истинная мощь веб-приложений! В отделе маркетинга McgaCorp никто не знает XML Ошибки bXML Ввод данных на веб-странице Что делать с данными Форматирование данных перед отправкой Отправка данных серверу Хранение информации в базе данных MySQL Создание базы данных для информации об участниках Строение команды insert Использование PIIP для работы с данными Обработка данных POST на сервере Подключение к базе данных из кода РНР Чтение из базы данных Доступ к данным в коде РНР На помощь приходит JSON! j Query + JSON = потрясающе Несколько правил РНР… Правила РНР (еще немного)… Форматирование вывода средствами РНР Работа с данными в объекте JSON Проверка и чистка данных в РНР Ваш инструментарий jQuery/Ajax/PHP/MySQL 10. jQuery UI Переработка форм Пользователи и их данные - жизнь и смерть веб-приложений. Ввод данных пользователем - серьезная задача, которая может отнять много времени у веб-разработчика. Вы уже видели, как jQuery упрощает построение веб-приложений, использующих Ajax, PHP и MySQL. Теперь давайте посмотрим, как jQuery упрощает построение пользовательского интерфейса форм для ввода данных пользователем. Заодно вы узнаете много полезного о jQuery UI - официальной библиотеке пользовательского интерфейса для jQuery. Cryptozoologists.org нуждается в переработке Новая форма HTML jQuery UI экономит время и силы Содержимое пакета jQuery UI Построение календаря Незаметное вмешательство jQuery UI Изменение параметров виджета Стильные кнопки Ограничение ввода числовых данных Создание цвета по трем составляющим Функция refreshSwatch И последнее… Ваш инструментарий jQuery 11. jQuery и APIs Объекты, сплошные объекты Даже самый талантливый разработчик не сможет сделать всю работу в одиночку… Мы уже видели, как включать расширения jQuery (такие как jQuery UI или вкладки) для повышения уровня функциональности приложения. Чтобы поднять наше приложение на следующий уровень - использовать Интернет и информацию из крупных информационных систем типа Google, Twitter или Yahoo! - понадобится… нечто большее. Эти компании предоставляют вам программные интерфейсы (API, Application Programming Interface). В этой главе мы рассмотрим основы работы с API, а также используем очень распространенный сервис Google Maps API. Где видели снежного человека? Google Maps API В API используются объекты Включение карт Google в страницу Чтение данных JSON средствами SQL и РНР Точки на карте - маркеры Список задач для отображения нескольких существ Прослушивание событий карты Получилось!!! Ваш инструментарий j Query API Пара слов на прощание… I. Остатки Десять важных вещей (которые мы не рассмотрели) Даже после всего сказанного многое осталось «за кадром». Существует масса других полезных возможностей jQuery и JavaScript, которые нам не удалось вместить в книгу. Было бы неправильно даже не упомянуть о них. Мы хотим, чтобы вы были готовы к любому аспекту jQuery, с которым вы можете столкнуться во время самостоятельных исследований. 1. Все, что есть в библиотеке jQuery 2. jQueryCDN 3. Пространство имен j Query: метод noConflict 4. Отладка кода j Query 5. Расширенная анимация и очереди 6. Проверка форм 7. Эффекты jQuery UI 8. Создание собственных модулей расширения jQuery 9. Замыкания 10. Шаблоны II. Настройка среды разработки Готовимся к великим свершениям Вам понадобится среда, в которой вы сможете потренировать свои навыки РНР, но так, чтобы ваши данные не стали уязвимыми для внешних атак. Разработку приложений РНР всегда желательно начинать с безопасной среды и только потом открывать доступ для внешнего мира. В этом приложении приведены инструкции по установке веб-сервера, MySQL и РНР. После их выполнения в вашем распоряжении появится безопасная среда для работы и экспериментов. Создание среды разработки РНР Что у вас уже есть? У вас установлен веб-сервер? У вас установлена поддержка РНР? Какая версия? У вас установлен MySQL? Какая версия? Начнем с веб-сервера Установка Apache… завершение Установка РНР Действия по установке РНР Действия по установке РНР… завершение Установка MySQL Установка MySQL в системе Windows Включение поддержки РНР в Mac OS X Установка MySQL в Mac OS X
