Двадцать девятый урок. JavaScript и jQuery. Слайдер

JavaScript (краткое сокращение — JS) — это язык программирования, который работает на странице прямо в браузере пользователя. То есть JS загружается в виде файлов и выполняется у каждого посетителя индивидуально.

С помощью JS решается много разных задач, но основное направление — это обеспечение интерактивности на странице. Например слайдер изображений, выпадающее меню, всплавающие окна (popup) — всё это реализуется с помощью JavaScript.

Сам по себе язык JS достаточно сложный со своими «заморочками». Для верстальщика достаточно знать лишь базовые основы синтаксиса, чтобы уметь подключать нужный код.

Из-за сложности JS, были придуманы многочисленные библиотеки, упрощающие его использование. Наиболее распространена jQuery, с помощью которой можно решить все основные задачи вебмастера. Но главный плюс jQuery — это её расширяемость через плагины. В данном случае jQuery — это ядро, обеспечивающе основную функциональность, а плагины решают какую-то свою задачу.

jQuery-плагинов очень много, наверное десятки или сотни тысяч. В таком многообразии довольно сложно ориентироваться, поэтому вебмастер, перед тем как использовать плагин, проверяет его работу у себя. Некоторые плагины хорошо документируются, где приводятся демо-примеры. Другие авторы не так прилежны, но именно у них наблюдается хорошая совместимость с чужим кодом. Как правило jQuery-плагины расчитаны на определенную html-разметку, а также какой-то свой css-код. И если с html-кодом проблем обычно не бывает, то css-код может конфликтовать с вашим — здесь придется его корректировать, чтобы исключить конфликты.

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

Сразу хочу особо обратить внимание, что JS — это не тоже самое, что и jQuery. jQuery написан на JS, но JS — это язык программирования (точнее ECMAScript), а jQuery — всего лишь js-библиотека. Помимо jQuery существуют множество других библиотек.

При использовании плагина следует знать на какую версию jQuery он ориентирован. В своём развитии, jQuery несколько раз серьёзно менялась из-за чего терялась совместимость со старыми наработками. Само развитие jQuery нас пока мало интересует, но просто знайте, что её новые версии использовать пока не стоит (ну разве что, если хотите потестировать). Почти все плагины ориентируются на версии 1-й ветки. Наиболее бесконфликтна версия jQuery 1.8.2, которая хорошо работает и с новыми, и старыми плагинами. Бывают плагины, которые расчитаны на более новые версии этой ветки (1.10.0 и выше). Менее распространены плагины требующие 2.x-версии и совсем экзотика — это 3-я версия.

Сложность в выборе версии jQuery в том, что на сайте обычно используются сразу несколько плагинов, которые могут работать с разными версиями jQuery. Мой совет начинать использовать 1.8.2, а если плагин не работает, то постепенно увеличить версию 1-ветки. Если требуется 2-я, то об этом будет написано на странице плагина. Разместить же две версии jQuery на одной странице нельзя (точнее — сложно), поскольку они содержат один и те же функции и такое подключение создает конфликт.

Выбрать нужную версию jQuery можно на официальном сайте. Загружать нужно минифицированную версию.

Подключение jQuery выполняется как и любого другого js-файла.

<script src="jquery.min.js"></script>

В отличие от css-стилей, js-файлы могут подключаться в любом месте страницы, а не только в секции HEAD. Но, если скрипт подключается в секции HEAD, то браузер не будет выполнять js-код до тех пор, пока этот файл не загружен. Сделано это для того, чтобы гарантировать доступность функций файла на всей странице. Иначе может получиться так, что какой-то код, например плагина, уже загружен, но основная библиотека jQuery ещё не доступна. Поэтому jQuery всегда загружают в секции HEAD.

Все остальные плагины могут загружаться не просто в теле страницы, а вообще в конце, перед закрывающим /BODY. Это т.н. ленивая (lazy) или отложенная загрузка, когда браузер вначале отрабатывает html и css-код, а уже после выполняет js. Кроме того, в js принято выполнять код только когда браузер точно загрузил страницу. Для этого используется специальная jQuery-функция.

Если используется LPF, то js-файл нужно разместить в каталоге assets/js/autoload — это обеспечит его подключение в секции HEAD. Если разместить файл в assets/js/lazy, то файл будет подключен перед /BODY.

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

Аналогично работают автоматические подключения в каждой странице. Если нужно отключить «общую» загрузку js-файлов, то в настройках страницы укажите

nojs: true

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

Для слайдера приводится информация:

Это достаточно типовое описание, поэтому расмотрим его подробней.

Для подключения приводится такой код:

<link type="text/css" rel="stylesheet" href="css/lightslider.css" />                  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/lightslider.js"></script>

Первая строчка — это подключение css-файла. То есть плагин использует свои css-стили. При использовании LPF, файл lightslider.css нужно разместить файл в каталоге css, а чтобы обеспечить его загрузку позже всех, можно добавить префикс например z- (z-lightslider.css), чтобы он оказался после основного style.css. В zip-архиве плагина готовые файлы размещаются в каталоге distr. Копируем файлы из него.

Дальше подключается jQuery. Здесь видно, что использутеся версия 1.11.0, причем с удаленного сервера (googleapis.com). Хорошей практикой будет загружать файл со своего сервера, поэтому просто скачиваем по этому адресу файл и размещаем каталоге js/autoload.

C lightslider.js поступаем точно также - размещаем в js/autoload или js/lazy.

Обновим страницу и по исходному коду проверим, что все подключения прошли успешно.

Обратите внимание, что в плагине используется каталог img с одной картинкой. Это значит, что нужно скопировать каталог на уровень css.

В будущем вы будете включать css-файлы прямо в результирующий css-файл через sass-компиляцию. Для картинок плагинов обычно создается подкаталог в images, например images/lightslider/, а в css-коде правится этот путь как нужно. Но на этапе тестирования (чтобы просто посмотреть) проще и быстрей не править код, а скопировать файлы и каталоги как есть.

Дальше на странице нужно разместить предлагаемый html-код (я добавил ещё один слайд):

<ul id="lightSlider">
	<li>
		<h3>First Slide</h3>
		<p>Lorem ipsum Cupidatat quis pariatur anim.</p>
	</li>
	<li>
		<h3>Second Slide</h3>
		<p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
	</li>
	<li>
		<h3>Еще слайд</h3>
		<p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
	</li>
</ul>

Теперь можно запустить плагин. Делается это стандартно для любого js-кода с помощью тэга SCRIPT:

<script type="text/javascript">
	$(document).ready(function() {
		$("#lightSlider").lightSlider(); 
	});
</script>

По стандарту HTML5, указывать тип (type) для js-кода не обязательно, поэтому его можно без проблем убрать.

<script>
	$(document).ready(function() {
		$("#lightSlider").lightSlider(); 
	});
</script>

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

Как правило, для jQuery-плагинов параметры задаются сразу при вызове основной функции в блоке фигурных скобок { }, вот примерно так:

$(document).ready(function() {
	$("#lightSlider").lightSlider({
		item: 1,
		auto: true,
		loop: true,
		mode: "fade"
	}); 
});

Для lightSlider это страница Settings. В сочетании с нужной html-разметкой, css-стилями, получается различное поведение и внешний вид. Он подбирается под свою задачу.

<ul id="lightSlider">
	<li class="bg-red t-white" style="padding: 20px 70px;">
		<h3>Первый слайд</h3>
		<p>Suspendisse eu tortor. Phasellus in neque.Lorem ipsum dolor sit.</p>
	</li>
	<li class="bg-green t-white" style="padding: 20px 70px;">
		<h3>Второй слайд</h3>
		<p>Cras malesuada. Donec viverra nibh et dolor. Aliquam sit.</p>
	</li>
	<li class="bg-blue t-white" style="padding: 20px 70px;">
		<h3>Третий слайд</h3>
		<p>Sed convallis turpis a ante. Quisque congue ultricies neque.</p>
	</li>
</ul>

Поскольку в этом слайдере каждый LI-элемент представляет собой отдельный слайд, то можно произвольно добавлять или менять нужные блоки и их оформление.

Вот этот код:

$(document).ready(function() {
	...
});

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

JavaScript очень чувствителен к синтаксису и любая ошибка приводит к блокировке выполнения js-кода. Если вдруг плагин не работает после внесенных изменений, то скорее всего вы где-то допустили ошибку. Нужно ещё раз внимательно посмотреть на код и исправить его. Частая проблема — незакрытые скобки и неверные кавычки.

Для отслеживания ошибок, в FireFox нажмите F12. Откроется панель вебмастера. Перейдите на вкладку Консоль. Там можно выбрать в каждом пункте какие ошибки и предупреждения отображать. Для JS выберите оба пункта, что позволит отобразить все найденные ошибки при выполнении JS. У ошибки можно выбрать отображение в Отладчике, который покажет ошибку прямо в коде исполнения.

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

В рамки нашего курса изучение JavaScript входит только на уровне подключения jQuery-плагинов. Но, если вы захотите подробней изучить возможности JS, то начните с сайта Современный учебник Javascript.

Задание

Задания доступны только после авторизации.