jQuery быстро становится обязательным навыком для фронтенд-разработчиков. Целью этой книги является обзор JavaScript-библиотеки jQuery. После завершения чтения вы должны уметь решать основные задачи с помощью jQuery и иметь прочную основу для продолжения обучения. Эта книга задумывалась как материал, используемый в учебном классе, но вы можете найти его полезным и для самостоятельного изучения.
Это практическое руководство. Мы потратим немного времени на описание понятий, а затем у вас будет возможность поработать с упражнением, связанным с этим понятием. Некоторые из упражнений могут показаться примитивными, другие, наоборот, совершенно пугающими. В любом случае здесь нет оценок, цель проста — чтобы вы комфортно прошли свой путь сквозь проблемы, которые обычно решаются с помощью jQuery. Пример решения всех упражнений включён в образец кода.
Получение кода
Код, который мы будем использовать в этой книге, расположен в хранилище GitHub. Вы можете скачать файл .zip или .tar, затем распаковать его, чтобы использовать на своём сервере. Если вы git-маньяк, то всегда можете клонировать или форкнуть хранилище.
Программы
Для выполнения большинства уроков вам потребуются следующие инструменты:
- Браузер Firefox
- Расширение Firebug для Firefox
- Простой текстовый редактор
- Для Ajax: локальный сервер (такой как MAMP или WAMP) или клиент FTP или SSH для доступа к удалённому серверу.
Добавление JavaScript на страницу
JavaScript может быть добавлен непосредственно в документ или как внешний файл через тег <script>. Порядок добавления JavaScript имеет важное значение: зависимости должны быть включены до скрипта, который с ними связан.
Ради производительности, JavaScript должен быть добавлен как можно ближе к концу вашего HTML, насколько это возможно. Несколько файлов JavaScript должны быть объединены на рабочем сайте.
Пример 1.1. Встроенный JavaScript
<script>
console.log('привет');
</script>
Пример 1.2. Внешний JavaScript
<script src='/js/jquery.js'></script>
Отладка JavaScript
Инструмент отладки имеет важное значение в JavaScript-разработке. Для Firefox популярным отладчиком является расширение Firebug; Safari и Chrome предоставляют встроенные консоли.
Каждая консоль предлагает:
- одно- и многострочные редакторы для экспериментов с JavaScript;
- инспектор для просмотра генерируемого исходного кода страницы;
- Вкладки Network и Resources для изучения сетевых запросов.
Когда вы пишете код на JavaScript, то можете использовать следующие методы для отправки сообщений в консоль:
- console.log() для общих сообщений;
- console.dir() для объектов браузера;
-
console.warn() для предупреждений;
- console.error() для ошибок.
Также доступны и другие методы консоли, хотя они могут отличаться в разных браузерах. Кроме того консоли предоставляют возможность установки контрольных точек и слежения за кодом в целях отладки.
Упражнения
Большинство глав в этой книге содержит одно или несколько упражнений. С некоторыми упражнениями вы сможете работать непосредственно в Firebug, для других вы должны будете включить скрипты после jQuery, как указано в отдельных упражнениях.
В некоторых случаях вам потребуется обращение к документации jQuery для завершения упражнения, поскольку не вся соответствующая информация представлена в книге. Библиотека jQuery большая и нахождение ответов в документации является важной частью процесса обучения.
Вот несколько советов для решения таких проблем:
- Для начала убедитесь, что вы полностью понимаете проблему, которую вас просят решить.
- Далее выясните, какие элементы вам требуются для решения проблемы и определите, как вы получите эти элементы. Используйте Firebug для проверки, что элементы получены.
- Наконец выясните, что вам нужно сделать с этими элементами для решения проблемы. Это может быть полезно для добавления комментариев, поясняющих, что вы собираетесь делать перед написанием кода.
Не бойтесь совершать ошибок! Не пытайтесь сделать код идеальным с первого раза! Ошибки и эксперименты с решениями является частью изучения библиотеки и вы станете лучшим разработчиком. Примеры решений этих упражнений находятся в папке /solutions.
Справочный материал
Существует много статей и блогов, в которых описан определённый взгляд на jQuery. Некоторые из них выдающиеся, некоторые ошибочны. При чтении статьи про jQuery убедитесь, что в ней говорится о той же версии, которую вы используете. Не поддавайтесь искушению просто скопировать и вставить код — потратьте время на его изучение.
Вот некоторые отличные ресурсы для ознакомления в процессе вашего обучения jQuery. Наиболее важным из них является сам сайт jQuery: он содержит в виде кода полную документацию библиотеки. Это не чёрный ящик — ваше понимание библиотеки будет расти в геометрической прогрессии, если вы потратите время, посещая его снова и снова. И я настоятельно рекомендую добавить сайт в закладки браузера и постоянно к нему обращаться.