jQuery, созданная Джоном Резигом (John Resig) – это свободно распространяемая библиотека Javascript, обладающая открытым исходным кодом. Библиотека позволяет упростить задачу создания быстродействующих веб-страниц, работающих во всех современных браузерах. Джон позаботился о том, чтобы библиотека jQuery свела на нет все существующие различия между браузерами. Таким образом, вы можете сосредоточиться на разработке и дизайне собственного проекта, исключив из рассмотрения всевозможные различия в интерпретации одних и тех же инструкций браузерами.

Полезные особенности jQuery

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

Процесс обучения jQuery обычно происходит довольно просто. В поисках наилучшего способа выбора элементов, Джон Ресиг сделал основную ставку на применение имеющихся знаний в области CSS. Селекторы jQuery (по аналогии с селекторами CSS) позволяют захватывать некоторый набор элементов и производить над ним определенные действия.

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

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

В jQuery огромное значение играет объект, именуемый “оберткой”, или “обертываемым набором”. Он представляет собой набор элементов, которые были выбраны для последующей обработки. Чтобы лучше понять функции обертки, необходимо несколько отдалиться от jQuery и обратиться к работе браузера.

Любой браузер обладает встроенными механизмами Javascript и CSS. Браузер может загружать, считывать и интерпретировать форматированный HTML, Javascript и CSS (безусловно, это далеко не все возможные функции браузеров). Далее будет представлен довольно поверхностный обзор работы браузеров, однако мы надеемся, что он поможет вам понять основы функционирования jQuery.

Браузер загружает HTML документ и создает своеобразную карту документа, которая называется DOM (Document Object Model). DOM, по своему существу, является деревом объектов HTML-документа. Дерево DOM отображает отношения родительских и дочерних элементов. В качестве узлов дерева могут присутствовать элементы, атрибуты, контент и т.д. Следующий рисунок иллюстрирует представление дерева DOM:

Если таблица стилей CSS присоединена к документу или вложена в него, встроенный механизм CSS браузера проходит по дереву DOM и каждому из элементов документа присваивает определенные в таблице стилевые правила. Точно также дело обстоит и с присоединенным или вложенным Javascript.

Библиотека jQuery присоединяется к вашему XHTML документу также как и любой другой Javascript файл. После того, как библиотека будет присоединена, она сможет подготовить механизм Javascript браузера к созданию объекта, обладающего полноценной функциональностью jQuery. Как только вы создадите код jQuery, вы автоматически вызовите готовый к работе объект jQuery.

Выбранные вами элементы будут “обернуты” в объект jQuery, над которым можно совершать различные действия. Функции, примененные к набору, будут циклически применяться к каждому из его элементов. Объект jQuery выполняет все инструкции, которые передаются к нему через цепочку операторов, и останавливает циклическое выполнение тогда, когда дело доходит до последнего объекта в наборе.

JavaScript, первоначально называвшийся LiveScript, был создан разработчиками компании Netscape в начале 90-х годов. К 1996 году Netscape решила сменить название LiveScript на JavaScript. Сделано это было с целью поднять популярность языка при помощи объединения его с Java (разработанным компанией Sun Microsystems отдельно от Netscape). Язык Java на тот момент уже активно использовался для создания отдельных плагинов, называемых “апплетами”. Несмотря на то, что разработчики JavaScript постарались воссоздать такой же синтаксис и набор функций, как и в Java, между двумя языками существует множество отличий. Самое главное отличие заключается в том, что Javascript – это интерпретируемый клиентский язык сценариев. Он запускается в браузере без предварительной компиляции, которая является обязательным действием для программ, написанных на Java.

Безусловно, между двумя языками имеются и более серьезные отличия, ознакомиться с которыми можно в различных книгах, посвященных Javascript. Мы же не будем акцентировать на этом внимание и пойдем дальше. Естественно, корпорация Microsoft не могла долгое время оставаться в стороне. Новая версия браузера Internet Explorer могла похвастаться поддержкой языка сценариев VBScript. VBScript был во многом похож на Visual Basic, однако, как и в случае с Javascript, являлся интерпретируемым. Когда Javascript все-таки смог завоевать большую популярность у разработчиков, нежели VBScript, Microsoft решила пойти на рискованный шаг и анонсировала JScript. Язык JScript был во многом подобен JavaScript. Целью создания языка был обход любых проблем с лицензированием для Microsoft. Невзирая на имеющиеся различия между двумя языками, разработчик на тот момент мог бы написать простенький скрипт, который одинаково выполнялся бы и как JavaScript в Netscape, и как JScript в IE 3.0.

Как бы это ни печально звучало, но Internet Explorer до сих пор работает только с VBScript и JScript! Разница состоит лишь в том, что Microsoft и Mozilla (бывшая Netscape) отправили языки JavaScript и JScript в организацию ECMA International, ответственную за создание и поддержку стандартов для информационных систем связи. Наряду с JavaScript, компания ECMA Int. выработала спецификации в области CD-ROM и DVD форматирования, а также утвердила новые стандарты Open XML, которые используются в современных офисных пакетах, таких как MSOffice и OpenOffice.

На выработку стандартов, начиная с представления языка Javascript в 1997 году, ушло приблизительно семь лет. Однако с 2010 года стандарты JavaScript и JScript стали практически эквивалентными, в результате чего технически они стали называться ECMAScript.

Термины JScript и JavaScript в последнее время стали считаться аналогичными, что, строго говоря, неверно. Различия между этими языками по-прежнему существуют. IE обрабатывает ECMAScript несколько иначе, нежели Firefox и остальные браузеры.

В данном разделе мы познакомимся с практикой использования jQuery в WordPress. Необходимо помнить, что статьи рассчитаны на подготовленного читателя, знакомого с PHP, Javascript и HTML. Вы должны обладать некоторым начальным опытом работы с WordPress: возможно, вы уже создавали собственные сайты или темы, либо занимались изменением существующих тем. В любом случае, вне зависимости от вашего опыта, вы должны быть знакомы с WordPress, иначе большая часть информации, представленной далее, покажется вам непонятной и, как следствие, неинтересной. Восполнить возникший пробел можно, прочитав курс: Энциклопедия WordPress.

Теперь скажем несколько слов о jQuery. jQuery – это библиотека, позволяющая ускорить время выполнения Javascript-сценариев и в значительной степени снизить сложность их написания. Я уверен, вы знаете о том, что Javascript очень часто применяется в веб-разработке. В частности, благодаря ему стала возможной реализация уникальных, востребованных возможностей в сфере веб-дизайна. Мы будем изучать jQuery настолько подробно, насколько это возможно, однако если вы хотите узнать абсолютно все аспекты использования указанной библиотеки, то вам лучше всего обратить свое внимание на различные книги, посвященные jQuery.

Ну что ж, вводное слово сказано. Приступаем к непосредственному изчению jQuery в WordPress.

Добро пожаловать в мир WordPress и jQuery! Популярная на сегодняшний день платформа для веб-публикаций WordPress и мощная Javascript-библиотека jQuery представляют собой отличный комплект для создания качественных, продвинутых сайтов. Я надеюсь, что вы получите удовольствие от изучения богатых возможностей jQuery и их интеграции в систему WordPress.

В данном разделе мы рассмотрим:

– основные понятия, которые необходимы веб-девелоперу для ведения полноценной разработки сайтов.
– программные компоненты, позволяющие упростить и значительно ускорить процесс разработки.
– краткое строение WordPress и jQuery.

Если что-либо в последующих статьях вызовет у вас непонимание, то я советую ознакомиться с другими рубриками, имеющимися в блоге. Это позволит вам быстрее понять материал и использовать его на практике. В качестве подробного руководства для новичков подойдет мой курс: Энциклопедия WordPress.

Если у вас есть отдельный хостинг с установленной системой WordPress, которую вы можете использовать для тестирования, то это замечательно. Однако мало кто согласится заказывать услугу хостинга только для того, чтобы проводить различные эксперименты с WordPress. Для таких случаев легче всего установить локальную сборку.

Установка и запуск миниатюрного веб сервера на вашей локальной машине или ноутбуке стали возможны благодаря выпуску WAMP (Windows, Apache, MySQL, and PHP) и MAMP (Mac, Apache, MySQL, and PHP). Локальный сервер предлагает пользователю больше удобств, нежели работа с WordPress, установленным на хостинг.

Я заметил, что когда я путешествую по миру, несмотря на все большее количество бесплатных Wi-Fi точек, очень часто я нахожусь в таком месте, где их нет. Локальная установка WordPress позволяет избежать таких проблем. Я могу разрабатывать и продумывать мой основной контент вне зависимости от Интернет-связи. К тому же, локальная установка дает возможность проводить различные эксперименты с кодом, не опасаясь, что проект будет поврежден и перестанет работать.

Если вы хотите установить локальную “песочницу”, то для этих целей я рекомендую вам скачать WAMP для Windows или MAMP для Mac.

Использование WAMP

Аббревиатура WAMP расшифровывается как “Windows, Apache, MySQL, and PHP”. Набор программ WAMP позволяет запустить легкий и быстрый локальный веб-сервер на вашем компьютере. Если вы используете операционную систему Windows (XP, Vista, Windows 7), то вам достаточно пройти по ссылке скачать WAMP 2.

Мастер настройки WAMP поможет вам установить свой собственный локальный веб-сервер. Если у вас уже есть веб сервер, запущенный как localhost, и/или установлена предыдущая версия WAMP, тщательно прочитайте инструкции мастера, связанные с отключением или удалением старого сервера, бэкапом ваших данных и установкой последней версии WAMP.

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

Использование MAMP

MAMP расшифровывается как “Mac, Apache, MySQL, and PHP”. Скачать бесплатную версию MAMP пользователи Mac могут с сайта mamp.info.

Процесс установки MAMP довольно просто: достаточно открыть ZIP архив и запустить файл .dmg. Также, как и в случае с WAMP, MAMP позволяет установить стартовую страницу для управления веб-интерфейсом phpMyAdmin.

Устанавливаем WordPress на локальный хостинг с помощью WAMP

В данном разделе мы подробно рассмотрим процесс установки WordPress на локальную машину с помощью WAMP.

1. Скачиваем WAMP по данной ссылке.
2. Запускаем инсталлятор. Настройки можно оставить по умолчанию.
3. Включаем сервер. Иконка WAMP должна появиться в системном трее. Щелкаем по ней правой кнопкой и выбираем Put Online.

WAMP установлен. Теперь нам понадобится загрузить последнюю версию WordPress с официального сайта.

Если вы зайдете на сайт jquery.com, то сможете увидеть, что загрузка библиотеки jQuery доступна в двух различных вариантах: Production и Development.

Версия Production была сжата и минимизирована c учетом особенностей использования в различных проектах, требовательных к быстроте загрузки. Ее размер составляет всего 29 Кбайт (для jQuery 1.5). Версия Development обладает гораздо большим размером – 207 Кбайт, однако ее вы всегда сможете открыть и изучить, что очень важно в ситуациях с отладкой кода.

Предполагается, что в процессе создания собственного сайта разработчик будет использовать development-версию, более простую для понимания, однако затем, как только сайт будет готов к выпуску, development-версия сменится на production-версию, обладающую более быстрой загрузкой. Несмотря на то, что многие из вас, возможно, никогда и не заглянут в код библиотеки jQuery, мы рекомендуем скачать обе ее версии. Любые ошибки, возникающие на этапе отладки, характеризуются номером строки – позиции, в которой они стоят, что позволяет быстро отыскать их в коде и исправить. Сделать это в production-версии не представляется возможным. На этот случай разработчик должен иметь под рукой development-версию библиотеки. Однако вероятность того, что в библиотеке будет содержаться ошибка, практически равна нулю. В подавляющем большинстве случаев ошибки будут содержаться в различных плагинах или сценариях jQuery, как загруженных из Интернета, так и написанных вручную разработчиком. Просмотр полной версии билиотеки даст возможность понять, почему сценарий генерирует ошибку и каким образом ее можно исправить. Никаких кардинальных различий между двумя версиями библиотек нет, они отличаются только размером исходного файла и удобочитаемостью кода.

Щелчок по кнопке Download на домашней странице jQuery приведет к тому, что вы будете перенаправлены на сайт Google Code. Там вы сможете выбрать любую необходимую вам версию библиотеки. Заметьте, что библиотека поставляется в виде отдельного .js файла, готового к дальнейшей работе. Если щелчок по кнопке Download приводит к тому, что ваш браузер открывает код библиотеки вместо того чтобы скачать ее, вернитесь назад, сделайте правый щелчок по ссылке и нажмите “Сохранить объект как” (Save Target As).

Последний инструмент, который я хотел бы упомянуть – это графический редактор. Бесспорно, мощные CSS-средства в профессиональных руках способны творить чудеса, однако, несмотря на это, вы можете столкнуться с необходимостью добавления разнообразных визуальных элементов – изображений, иконок или бэкграундов. Для достижения данных целей вам понадобится удобный графический редактор: к примеру, GIMP, Photoshop или Fireworks.

Какому из них отдать свое предпочтение – решать, конечно же, вам. Самое главное, чтобы выбранный вами редактор позволял работать со слоями: указанная возможность используется дизайнерами чаще всего. Если платные решения вас не устраивают, вы всегда можете отыскать свободно распространяемые программы для работы с графикой.

Для того чтобы начать знакомство с курсом, нужно представлять себе, что такое WordPress. Читатель должен знать основы установки и запуска WordPress на веб-сервере или на локальной машине. Чтобы упрочить и расширить свои знания, достаточно ознакомиться с другим разделом блога: Энциклопедия WordPress. Необходимо отметить, что многие провайдеры, предлагающие услуги хостинга, позволяют заказать тариф с предустановленным WordPress. В таком случае все действия по инсталляции системы сводятся к одному щелчку мыши.

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

Даже в том случае, если вы работаете в команде с более опытными, технически подкованными специалистами, вы должны представлять себе, для чего создается сайт, какие темы, плагины и виджеты он потребует. Если ваш сайт нуждается в каких-либо дополнительных темах или плагинах, вы всегда можете установить их как вручную, так и автоматически с помощью панели администратора. Полезно иметь так называемую “песочницу” (sandbox), в которой всегда можно проверить функционирование новых компонентов без нарушения работоспособности самого сайта.