Основы jQuery

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: он содержит в виде кода полную документацию библиотеки. Это не чёрный ящик — ваше понимание библиотеки будет расти в геометрической прогрессии, если вы потратите время, посещая его снова и снова. И я настоятельно рекомендую добавить сайт в закладки браузера и постоянно к нему обращаться.

Ребекка Мёрфи

Ведущий программист в компании Bazaarvoice, играет ключевую роль в разработке и развитии больших веб-приложений на стороне клиента. Известна как эксперт по организации, тестированию, рефакторингу и поддержке кода на JavaScript. Живёт в Остине, штат Техас.