Обучение веб-разработке на практике: пишем слайдер на 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()">❮</a> <a class="next" onclick="nextSlide()">❯</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) { let i; /* Обращаемся к элементам с названием класса "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 как раз открыт набор для тех, кто заинтересован в обучении веб-разработке с трудоустройством. Обещают много практики и сразу полтора года опыта, которые можно добавить в резюме.
- 13 views
- 0 Comment
