Share This
Связаться со мной
Крути в низ
Categories
//Обучение веб-разработке на практике: пишем слайдер на JavaScript

Обучение веб-разработке на практике: пишем слайдер на 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) {     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 как раз открыт набор для тех, кто заинтересован в обучении веб-разработке с трудоустройством. Обещают много практики и сразу полтора года опыта, которые можно добавить в резюме.

  • 0 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Свежие комментарии

    Рубрики

    About Author 01.

    Roman Spiridonov
    Roman Spiridonov

    Привет ! Мне 38 лет, я работаю в области информационных технологий более 4 лет. Тут собрано самое интересное.

    Our Instagram 04.

    Categories 05.

    © Speccy 2020 / All rights reserved

    Связаться со мной
    Close