Клиентское программирование
Веб-дизайн и разработка
“
В этом уроке мы рассмотрим программирование на стороне клиента. Клиентское программирование осуществляется с помощью языка JavaScript, на изучение которого требуется время, и это точно не один урок. Поэтому в этом уроке мы не будем изучать JavaScript с нуля, но посмотрим как можно использовать уже готовые решения.
Глоссарий
Для успешного освоения материала рекомендуем вам изучить следующие понятия:
GitHub
Крупнейший веб-сервис для хостинга IT-проектов и их совместной разработки
Репозиторий
Место, где хранятся и поддерживаются какие-либо данные
Плагин
Независимо компилируемый программный модуль, динамически подключаемый к основной программе и предназначенный для расширения и/или использования ее возможностей
Минифицированный файл
Сжатый файл, в котором все комментарии к коду, переносы строк, лишние табы и пробельные символы удаляются. Сделано это для увеличения скорости загрузки страницы
Скроллинг
Форма представления информации, при которой содержимое двигается в вертикальном или горизонтальном направлении. Таким образом, скроллинг не изменяет содержимое, но передвигает «камеру»
Функция
Фрагмент программного кода, к которому можно обратиться из другого места программы
Event
Сообщение, которое возникает в различных точках исполняемого кода при выполнении определенных условий
Видеолекция
Конспект
Поиск плагина
Ранее мы уже сверстали галерею, но изображения в ней слишком маленькие и неплохо было бы сделать функцию увеличения картинок при клике на них. Можно реализовать это собственными силами, а можно использовать готовое решение, что мы и сделаем.
В качестве плагина возьмем lightgallery.js.
На сайте плагина в документации указано, что галерею можно скачать с помощью Bower, Npm или с Github, после чего нужно подключить стили, скрипты и дополнительные библиотеки по необходимости. Там же приведен пример разметки.
В качестве плагина возьмем lightgallery.js.
На сайте плагина в документации указано, что галерею можно скачать с помощью Bower, Npm или с Github, после чего нужно подключить стили, скрипты и дополнительные библиотеки по необходимости. Там же приведен пример разметки.
Скачивание плагина
1. С сайта переходим на GitHub и скачиваем код с репозитория.
2. Распаковываем скачанный zip-архив.
3. В папке Dist находится все, что нам потребуется для работы.
2. Распаковываем скачанный zip-архив.
3. В папке Dist находится все, что нам потребуется для работы.
Установка плагина
1. Копируем стили и скрипты.
Первым делом копируем минифицированные файлы стилей lg-transitions.min.css и lightgallery.min.css в нашу папку со стилями. Теперь то же самое делаем со скриптом lightgallery.min.js. Скрипт необходимо скопировать в папку assets/js.
2. Копируем стили и скрипты.
Первым делом копируем минифицированные файлы стилей lg-transitions.min.css и lightgallery.min.css в нашу папку со стилями. Теперь то же самое делаем со скриптом lightgallery.min.js. Скрипт необходимо скопировать в папку assets/js.
2. Копируем стили и скрипты.
<link rel="stylesheet" href="assets/css/lightgallery.min.css">
<link rel="stylesheet" href="assets/css/lg-transitions.min.css">
Скрипт подключается с помощью тега script с указанием атрибута src, где указывается путь к файлу. Подключаем скрипт в конце страницы, перед закрывающимся тегом body.
...
<script src="assets/js/lightgallery.min.js"></script>
</body>
</html>
Делается это потому, что весь код страницы выполняется по мере ее подгрузки, и если мы подключим скрипт в начале, то есть шанс, что когда он будет исполняться, то нужного html-кода еще не будет, т.к. script выполнится до рендера html.
3. Приводим HTML к нужному виду.
К счастью структура, которая требуется в плагине, не очень отличается от нашей, поэтому мы ее копируем и заменяем ссылки картинок на наши.
3. Приводим HTML к нужному виду.
К счастью структура, которая требуется в плагине, не очень отличается от нашей, поэтому мы ее копируем и заменяем ссылки картинок на наши.
<div id="lightgallery">
<a href="assets/img/placeholder.jpg">
<img src="assets/img/placeholder.jpg" />
</a>
</div>
4. Активация плагина.
Активировать работу плагина нужно либо в отдельном js файле, либо можно написать script тег после подключения библиотеки.
Активировать работу плагина нужно либо в отдельном js файле, либо можно написать script тег после подключения библиотеки.
<script src="assets/js/lightgallery.min.js"></script>
<script>
...
</script>
Копируем сюда код из документации и смотрим что получилось.
<script>
lightGallery(document.getElementById('lightgallery'));
</script>
Галерея, конечно, по внешнему виду сломалась, но по функционалу она работает.
Видим, что кнопки не отображаются и, скорее всего, потому что нет нужных шрифтов.
5. Добавляем шрифты.
В папке Dist были эти файлы, поэтому копируем папку Fonts в наш проект и проверяем отображение плагина.
Видим, что кнопки не отображаются и, скорее всего, потому что нет нужных шрифтов.
5. Добавляем шрифты.
В папке Dist были эти файлы, поэтому копируем папку Fonts в наш проект и проверяем отображение плагина.
Теперь все кнопки корректно отображаются, и нам остается только привести галерею к прежнему виду.
6. Приведение галереи к прежнему виду.
Для этого укажем классы, которые мы использовали ранее, и продублируем картинки, чтобы их снова было 9.
6. Приведение галереи к прежнему виду.
Для этого укажем классы, которые мы использовали ранее, и продублируем картинки, чтобы их снова было 9.
<div id="lightgallery" class="gallery">
<a class="img-wrapper" href="assets/img/placeholder.jpg">
<img src="assets/img/placeholder.jpg" />
</a>
...
<a class="img-wrapper" href="assets/img/placeholder.jpg">
<img src="assets/img/placeholder.jpg" />
</a>
</div>
Галерея выглядит как и раньше, но теперь она работает как галерея.
Скролл при клике на кнопки
На нашей странице все кликабельно, кроме кнопок на первом экране. Давайте реализуем прокрутку к нужной секции при клике на соответствующую кнопку.
1. Задаем идентификаторы секциям.
Для этого нам потребуется задать идентификаторы для заголовков секций. Первому заголовку укажем идентификатор about, а второму portfolio.
1. Задаем идентификаторы секциям.
Для этого нам потребуется задать идентификаторы для заголовков секций. Первому заголовку укажем идентификатор about, а второму portfolio.
...
<h2 id="about">Обо мне</h2>
...
<h2 id="portfolio">Портфолио</h2>
...
2. Способы скролинга страницы.
Есть несколько способов для скрола. Например, window. scroll с параметрами x и y.
Есть несколько способов для скрола. Например, window. scroll с параметрами x и y.
window.scroll(0, 400)Но этот способ не дает плавной прокрутки, и нам нужно вычислить Y для каждой секции.
Будем использовать другой способ. Обратимся к соответствующему элементу с помощью функции document. querySelector, укажем селектор элемента, к которому обращаемся, и вызовем функцию scrollIntoView.
document.querySelector('#about').scrollIntoView()Теперь страница будет скролить к этому элементу.
3. Делаем прокрутку.
Чтобы прокрутка была плавной, мы должны передать объект со свойством behavior и значением smooth.
Чтобы прокрутка была плавной, мы должны передать объект со свойством behavior и значением smooth.
document.querySelector('#about').scrollIntoView({
behavior: 'smooth'
})
Теперь прокрутка будет плавная.
4. Создание функции прокрутки.
В ранее созданном скрипте создаем функцию smoothScroll и пишем там этот код.
В ранее созданном скрипте создаем функцию smoothScroll и пишем там этот код.
<script>
...
function smoothScroll() {
document.querySelector('#about').scrollIntoView({
behavior: 'smooth'
});
}
</script>
Теперь вместо конкретного селектора будем указывать аргумент selector, который будет принимать наша функция.
function smoothScroll(selector) {
document.querySelector(selector).scrollIntoView({
behavior: 'smooth'
});
}
5. Вызов функции.
Для ссылок укажем действие onclick, т.е. действие при клике. Это будет вызов нашей функции с указанием секции, к которой нужно проскролить страницу.
Для ссылок укажем действие onclick, т.е. действие при клике. Это будет вызов нашей функции с указанием секции, к которой нужно проскролить страницу.
<a class="btn btn-bg" onclick="smoothScroll('#about')" href="#">Узнать больше</a>
<a class="btn btn-outline" onclick="smoothScroll('#portfolio')" href="#">Нанять меня</a>
Поскольку клик будет по ссылке, нужно отменить стандартное поведение ссылки. Для этого будем вызывать функцию preventDefault для текущего события event.
function smoothScroll(selector) {
event.preventDefault();
document.querySelector(selector).scrollIntoView({
behavior: 'smooth'
});
}
Теперь при клике на кнопку страница будет плавно прокручиваться к нужной секции.
“
Вы узнали, как можно найти JavaScript библиотеку и использовать ее в своих проектах, но нужно обращать внимание на лицензию, с которой распространяется та или иная библиотека. Библиотека, которую мы использовали, является бесплатной для OpenSource проектов, но для коммерческих проектов ее нужно купить. Обязательно повторите этот урок, чтобы закрепить знания, и скачайте еще какие-нибудь библиотеки для практики.
Дополнительные материалы
Bower
Менеджер пакетов для Интернета
Npm
Менеджер пакетов, входящий в состав Node.js
Лицензия
Правовой инструмент, определяющий использование и распространение программного обеспечения, защищенного авторским правом
Интерактивное задание
Тест
Для закрепления полученных знаний пройдите тест
| Стартуем! |
Каким образом подключается скрипт к веб-странице?
| Дальше |
| Проверить |
| Узнать результат |
Какой атрибут указывает на файл со скриптом?
| Дальше |
| Проверить |
| Узнать результат |
С помощью какого атрибута можно задать действие при клике на элемент?
| Дальше |
| Проверить |
| Узнать результат |
С помощью какой функции можно обратиться к элементу на веб-странице?
| Дальше |
| Проверить |
| Узнать результат |
В каком месте страницы правильнее подключать скрипты?
| Дальше |
| Проверить |
| Узнать результат |
К сожалению, вы ответили неправильно
Прочитайте лекцию и посмотрите видео еще раз
| Пройти еще раз |
Неплохо!
Но можно лучше. Прочитайте лекцию и посмотрите видео еще раз
| Пройти еще раз |
Отлично!
Вы отлично справились. Теперь можете ознакомиться с другими компетенциями
| Пройти еще раз |