Обучение веб-разработке на практике: пишем слайдер на JavaScript










Обучение веб-разработке на практике эффективнее голой теории: всё наглядно, а полученные в ходе разработки решения можно использовать в будущих проектах. Именно поэтому мы совместно с онлайн-школой GeekBrains подготовили туториал по созданию простого слайдера изображений с объяснением каждого шага. Вот так будет выглядеть финальная версия:

Примечание Данная статья — лишь небольшое погружение в мир фронтенд-разработки, ведь современный веб не ограничивается знанием HTML/CSS/JavaScript. Чтобы стать востребованным веб-разработчиком, необходимо осваивать дополнительные библиотеки и фреймворки, которые часто строго разделены между фронтендом и бэкендом.

Что понадобится?

Можно сразу скачать IDE вроде WebStorm, но при обучении веб-разработке с нуля можно начать и в онлайн-редакторе. Мы будем использовать CodePen — популярный онлайн-редактор для веб-разработчиков с мгновенным отображением результата. Но если вы уже начали работу в какой-либо другой среде и считаете, что она намного удобнее, просто убедитесь, что есть поддержка HTML/CSS/JavaScript.

Пишем код

На различных курсах веб-разработки знакомство с фронтендом начинается с описания основных технологий, а именно:

  • HTML — язык гипертекстовой разметки, на котором пишется «скелет» сайта. Если провести аналогию с домом, то это каркас. Грубо говоря, вы строите разметку, на которую после будет ложиться оформление.
  • CSS — каскадные таблицы стилей или то самое оформление. Вернёмся к примеру с домом: после постройки его нужно облицевать, покрасить, сделать презентабельным, и именно CSS описывает внешний вид сайта.
  • JavaScript — язык программирования, который обеспечивает функциональность. Вы можете взаимодействовать с вещами в вашем доме — включать и выключать свет, бытовую технику, воду и многое другое. Вы точно так же можете взаимодействовать с сайтом, нажимая кнопки, наводя курсор на изображения и заполняя формы. JavaScript обрабатывает все эти взаимодействия, и, как язык сценариев, он может предоставлять правила и логику для определения того, что должно произойти дальше.

HTML

Обучение веб-разработке стоит начать с HTML, так как это каркас сайта. Каждый HTML-документ имеет стандартную структуру:

<!— Указание типа текущего документа: —>
<!DOCTYPE html>
<html>

<!— Содержимое тега <head> не отображается на странице, помогает в работе с данными и хранит информацию для поисковых систем и браузеров: —>
<head>
<meta charset=»utf-8″ />
<title>Устанавливает заголовок для окна веб-страницы</title>
</head>

<!— Здесь содержится весь отображаемый контент: —>
<body>
<p>Текст</p>
<img src=»URL» alt=»Изображение»>
<a href=»URL»>Ссылка</a>
</body>
</html>

Но в нашем примере прописывать структуру всей страницы не нужно, ведь мы работаем с отдельным компонентом, который потом будет размещаться между тегами <body></body>. Здесь всё просто: у нас есть основной блок (тег <div>), который является родительским и содержит ещё три блока с разными картинками — будущими слайдами:

<!— Основной блок слайдера —>
<div class=»slider»>

<!— Первый слайд —>
<div class=»item»>
<img src=»https://s3.tproger.ru/uploads/2020/07/field.jpg»>
</div>

<!— Второй слайд —>
<div class=»item»>
<img src=»https://s3.tproger.ru/uploads/2020/07/rose.jpg»>
</div>

<!— Третий слайд —>
<div class=»item»>
<img src=»https://s3.tproger.ru/uploads/2020/07/leaf.jpg»>
</div>

<!— Кнопки-стрелочки —>
<a class=»previous» onclick=»previousSlide()»>&#10094;</a>
<a class=»next» onclick=»nextSlide()»>&#10095;</a>
</div>

Обратите внимание, что у каждого тега <div> есть свой класс. Именно по этим классам будет применяться оформление CSS. В тегах <img> мы указываем ссылки на те изображения, которые будут показываться. В атрибуте onclick мы обращаемся к конкретной функции JavaScript, привязывая к кнопке действие по клику.

CSS

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

/* Слайдер: */
.slider{
max-width: 90%;
/* Положение элемента устанавливается относительно его исходной позиции: */
position: relative;
/* Центрируем по горизонтали: */
margin: auto;
height: 300px;
}

/* Картинка масштабируется по отношению к родительскому элементу: */
.slider .item img {
/* Элемент меняет размер так, чтобы заполнить блок и сохранить пропорции: */
object-fit: cover;
width: 100%;
height: 300px;
}

/* Кнопки назад и вперёд: */
.slider .previous, .slider .next {
/* Добавляет курсору иконку, когда тот оказывается над кнопкой: */
cursor: pointer;
/* Положение элемента задаётся относительно границ браузера: */
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
/* Оформление самих кнопок: */
color: white;
font-weight: bold;
font-size: 16px;
/* Плавное появление фона при наведении курсора: */
transition: 0.6s ease;
/* Скругление границ: */
border-radius: 0 3px 3px 0;
}
.slider .next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* При наведении курсора на кнопки добавляем фон кнопок: */
.slider .previous:hover,
.slider .next:hover {
background-color: rgba(0, 0, 0, 0.2);
}

/* Анимация слайдов: */
.slider .item {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
/* Устанавливаем и изменяем степень прозрачности: */
from {
opacity: 0.4
}
to {
opacity: 1
}
}

Со всеми значениями можно поэкспериментировать в редакторе. Если есть сомнения по поводу какого-то из атрибутов, достаточно его удалить и посмотреть, что изменилось.

JavaScript

Веб-разработчик, обучение которого ограничивается HTML и CSS, — это скорее веб-дизайнер. Мы же переходим к главному языку фронтенда, который способен вдохнуть жизнь в визуальное решение:

/* Устанавливаем стартовый индекс слайда по умолчанию: */
let slideIndex = 1;
/* Вызываем функцию, которая реализована ниже: */
showSlides(slideIndex);

/* Увеличиваем индекс на 1 — показываем следующий слайд: */
function nextSlide() {
showSlides(slideIndex += 1);
}

/* Уменьшаем индекс на 1 — показываем предыдущий слайд: */
function previousSlide() {
showSlides(slideIndex -= 1);
}

/* Устанавливаем текущий слайд: */
function currentSlide(n) {
showSlides(slideIndex = n);
}

/* Функция перелистывания: */
function showSlides(n) {
/* Обращаемся к элементам с названием класса «item», то есть к картинкам: */
let slides = document.getElementsByClassName(«item»);

/* Проверяем количество слайдов: */
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}

/* Проходим по каждому слайду в цикле for: */
for (let slide of slides) {
slide.style.display = «none»;
}
/* Делаем элемент блочным: */
slides[slideIndex — 1].style.display = «block»;
}

Но не стоит забывать, что не JavaScript единым: современные библиотеки и фреймворки способны упростить разработку и улучшить функциональность веб-компонента. Например, Bootstrap позволяет верстать сайты в разы быстрее, и даже начинающий разработчик может создать рабочий макет с использованием данного фреймворка. А ещё можно написать слайдер на чистом HTML/CSS, чтобы потренировать навыки в вёрстке и каскадных таблицах стилей.

Приведённый в уроке пример довольно прост и призван показать возможности стандартного взаимодействия HTML, CSS и JavaScript.

Готовый слайдер изображений

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

Теперь вы можете попробовать другие способы реализации, перейти к использованию дополнительных инструментов, таких как Bootstrap:

Или CSS Flexbox:

Можете попрактиковаться на слайдере посложнее, с дополнительными эффектами, опираясь на код из данного проекта:

Бэкенд и дополнительные функции

А если добавить к тому, что у нас получилось, бэкенд, можно с помощью API использовать изображения из других ресурсов, например Instagram, или хранить все картинки в своей базе данных, не опасаясь, что изображение удалят и внешняя ссылка станет неактуальной.

Но не практикой единой: не забывайте учить теорию, чтобы долго не буксовать на сложных задачах. Для этого подойдут книги или видео. Также хорошим способом совместить теорию и практику станут курсы веб-разработки с нуля. Например у GeekBrains как раз открыт набор для тех, кто заинтересован в обучении веб-разработке с трудоустройством. Обещают много практики и сразу полтора года опыта, которые можно добавить в резюме.

Рубрики: Новости
×
Обсудить проект
Заполните форму и мы с Вами свяжемся
×