Обучение веб-разработке на практике: пишем слайдер на 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 #html #javascript #веб-разработка #для начинающих #обучение программированию #партнёрский материал #фронтенд