jQuery для сайта, или как сделать его интерактивным.

jQuery представляет собой библиотеку скриптов на стороне клиента, которая сегодня используется практически в каждом сайте – она позволяет сделать страницы интерактивными. Это не единственная javascript-библстранииотека, однако она является наиболее развитой, имеет наиболее обширное сообщество и наиболее широко применима. Это один из основных аспектов в разработке современного сайта. Что же на самом деле такое jQuery? Что делает эту библиотеку такой популярной, и почему нам следует изучать ее в начале пути в роли веб-разработчика?

jquery подключение к сайту

Что такое jQuery?

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

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

интерактивные элементы на сайте

Основная функция заключается в управлении DOM (DOM – это Document Object Model), которая отвечает за внутреннюю структуру веб-страницы, на которую вы заходите. Все что вы видите на странице – а также многое, что вы не видите, — представлено в DOM.

jQuery – не единственная яваскрипт-библиотека, но она является самой популярной, — около 50% самых популярных сайтов используют ее. Среди популярных альтернативных вариантов, которые однако имеют не очень хорошую поддержку в некоторых браузерах, можно отметить Prototype.

Клиентская сторона против серверной

Многие страницы генерируются на стороне сервера – Web-profy.com использует PHP и MySQL (в виде CMS WordPress) для извлечения данных статей из базы данных и применения к ним определенного шаблона оформления. Полученная страница отправляется в браузер, интерпретируется, а затем отображается конечному пользователю. Нажатие по ссылке создает другой запрос к базе данных, и тогда уже генерируется следующая страница. Но что если вам захочется добавить на страницу немного интерактива? Например, форму, которая проверяет данные вводимые пользователем (как, например форма статуса в Twitter, которая высчитывает, сколько знаков вам осталось ввести до превышения предела), кнопка, которая запускает диалоговое окно, или возможно вам нужно подгрузить дополнительные данные без перезагрузки всей страницы?

Именно здесь нам на помощь приходит скриптинг на стороне клиента. Здесь клиент – ваш браузер – приступает к работе. Большинство сайтов, включая этот, используют оба метода понемногу.

Зачем нам использовать jQuery?

  • Визуальный эффект

jQuery позволяет вам изменять какие-либо элементы на странице в ответ на действия пользователя. В качестве примера можно привести случай, когда при нажатии по одной из ссылок на странице, все другие ссылки становятся красного цвета. Бесполезно? Возможно, но вы уловили суть. Зачастую используется для создания слайд-шоу с изображениями. Если выработать четкий баланс между бесполезными визуальными эффектами и действительно полезными функциями, вы можете создать великолепный опыт взаимодействия с пользователем.

меню

Предлагаю вашему вниманию небольшой список действительно клевых эффектов, которые вы можете достигнуть при помощи этого скрипта.

  • Простые события

Практически все ПО работает на модели событий – нажмите на что-нибудь, и будет запущен событие клика. Проведите пальцем по планшету, и будет запущено событие перетаскивания. Приложения «прослушивают» эти события и выполняют какие-то действия – jQuery позволяет вам реализовать эту модель в браузере.

  • Простая реализация AJAX

Asynchronous Javascript And XML – это способ взаимодействия с удаленным сервером без необходимости загружать еще одну страницу. Хорошим примером в данном случае будет лента новостей в Facebook. Попробуйте прокрутить все обновления в ленте до самого низа. Вы не сможете, потому что как только вы достигаете самого конца,  джиквери определяет, что вы уже близко к нему, и посылает AJAX-запрос для извлечения большего числа статусов.

Затем она выводит их на текущую страницу, а пользователи этого иногда даже не замечают. Вы можете бесконечно листать эту страницу, но ведь все эти статусы изначально не были загружены

  • Продвинутые пользовательские интерфейсы

При помощи плагина jQuery UI вы можете создавать полноценные веб-приложения, используя стандартные компоненты: строки прогресса, слайдеры, кнопки, вкладки, интерфейс перетаскивания и так далее. Простая система использования шаблонов позволяет вам редактировать внешний вид, либо вы можете воспользоваться стандартными шаблонами.

Стоит ли беспокоиться об этом?

Если вы заинтересованы в разработке веб-сайтов, то да, jQuery – это то, с чем вам определенно стоит познакомиться. Если вы когда-нибудь задавались вопросов наподобие: как я могу сделать что-то нестандартное, то он вам определенно понравится. Библиотеку невероятно использовать на собственном сайте – нужно всего лишь добавить ссылку в головной части кода, либо сообщить WordPress о необходимость подгрузить её.

Хотели бы вы познакомиться подробнее с данной библиотекой? Расскажите в комментариях, и мы будем смотреть, что здесь можно будет сделать.

15
Июл

Вверх