‌

21. JS с нуля, ваще с нуля (Готовимся к объектам, делаем слайдер)

Оценить качество материала и подачу материала автором видео:

Front-end

Трудоустройтесь middle front-end разработчиком на React JS (TypeScript) за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс
Front-end

Back-end

Трудоустройтесь middle back-end разработчиком за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс
Back-end

Карьерный бустер

Получите коммерческий опыт на реальных стартапах, прокачайте tech & soft навыки, научитесь работать в команде, проходить собеседования и получите первую работу в IT!

Перейти на курс
Карьерный бустер

Основы Front-end

Сделайте первый шаг в IT, освоив базовые знания разработки и научившись создавать небольшие проекты на JavaScript

Перейти на курс
Основы Front-end

Основы Back-end

Сделайте первый шаг в IT, освоив базовые знания разработки. Без опыта. Без математики. Только практика: JavaScript, SQL, Node JS, база данных

Перейти на курс
Основы Back-end

Готовимся к объектам, делаем слайдер

Автор конспекта: Андрей Шамара

⚡

Этот учебный материал предназначен для закрепления понимания основ JavaScript через создание простого слайдера, а также для подготовки к изучению объектно-ориентированного программирования.

Краткое содержание источника

👉

Автор шаг за шагом демонстрирует процесс создания простого слайдера изображений.

👉

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

Основное внимание уделяется логике работы слайдера, а не созданию полноценного плагина. В процессе разработки слайдера рассматриваются следующие аспекты:

  1. HTML-структура: Создание базовой разметки для кнопок "вперед" и "назад", а также элемента <img> для отображения изображений.

  1. CSS-стилизация: Базовая стилизация для центрирования слайдера и ограничения размеров изображений, чтобы они не выходили за пределы контейнера.

  1. JavaScriptлогика:
  • Хранение URL-адресов изображений в массиве.
  • Отслеживание текущего активного изображения с помощью переменной currentImageIndex.
  • Обработка событий клика по кнопкам "вперед" и "назад" для изменения currentImageIndex и соответствующего обновления атрибута src изображения.
  • Реализация логики отключения кнопок ("disable") при достижении начала или конца массива изображений, чтобы предотвратить выход за пределы допустимых индексов.
  • Принципы рефакторинга и адаптивности кода.
  • Методология разработки: Автор постоянно акцентирует внимание на итеративном подходе, тестировании каждого шага и отладке ошибок, а также на важности именования переменных и функций для лучшей читаемости кода.
  • Введение в объекты: В конце урока автор подводит к теме объектов в JavaScript как следующему логическому шагу для улучшения и структурирования кода слайдера.

Детальное руководство по изучению

1. Концептуальные основы JavaScript и Web-разработки

Понимание JavaScript в контексте Web-страниц:

  • Как JavaScript взаимодействует с HTML и CSS для создания динамического контента.
  • Понятие "события" (events) и "слушатели событий" (event listeners).
  • Методы document.getElementById(), addEventListener() и их роль в манипуляции DOM.

Массивы в JavaScript:

  • Создание и инициализация массивов ([]).
  • Добавление элементов в массив (push()).
  • Доступ к элементам массива по индексу (array[index]).
  • Свойство length для определения длины массива.
🔗

Больше деталей о возможностях смотрите в документации. Массивы

Переменные и типы данных:

  • Объявление переменных (var).
  • Числовые значения, строки (URL-адреса) и их использование.
  • Понятие "Магических чисел" и важность использования именованных переменных.
🔗

Больше деталей о возможностях смотрите в документации. Переменные

🔗

Больше деталей о возможностях смотрите в документации. Типы данных

⚠️

Магические числа относится к числовым значениям, используемым непосредственно в коде без явного объяснения их смысла и назначения. Эти числа могут быть источником ошибок и усложнять поддержку и понимание кода разработчиками

Условные конструкции:

  • Оператор if для создания логических ветвлений.
  • Операторы сравнения (==, ===) и логические операторы.
🔗

Больше деталей о возможностях смотрите в документации. Условные ветвления

Функции в JavaScript:

  • Объявление функций (function).
  • Понимание области видимости функций.
  • Разделение кода на логические блоки с помощью функций.
🔗

Больше деталей о возможностях смотрите в документации. Функции в JavaScript

Отладка и консоль:

  • Использование console.log() для вывода информации и отладки.
  • Работа с инструментами разработчика в браузере (вкладки Console, Elements, Network, Sources).
🔗

Подробнее про console.log()

2. Практическая реализация Слайдера

HTML-структура (index.html):

  • Создание корневого элемента div для слайдера (itk-slider).
  • Размещение кнопок (<button id="show-prev-btn">, <button id="show-next-btn">) и элемента изображения (<img id="slide-img">).
  • Подключение файла CSS (<link rel="stylesheet" href="css/index.css">).
  • Подключение файла JavaScript (<script src="js/index.js"></script>) в конце <body>.
index.html
//Корневой элемент для слайдера
<div class="itk-slider">
  <button id="show-prev-btn">‹</button>
  <img class="slide-img" src="" id="slide-img" alt="Слайд" />
  <button id="show-next-btn">›</button>
</div>
 
//Подключения внешних CSS и JavaScript файлов
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="js/index.js"></script>

CSS-стилизация (css/index.css):

  • Стилизация контейнера слайдера (например, width, margin: 0 auto для центрирования).
  • Стилизация кнопок и изображения (например, max-width, height для изображений, text-align: center для центрирования содержимого).
  • Понимание display: inline-block для размещения элементов в одной строке.
index.css
.itk-slider {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
 
.itk-slider .slide-img {
  width: 80%;
  height: 200px;
}

JavaScript-логика (js/index.js):

Инициализация:

  • Получение ссылок на HTML-элементы (showPrevBtn, showNextBtn, slideImg).
  • Создание массива imagesUrls с URL-адресами изображений.
  • Инициализация currentImageIndex в 0.
  • Установка начального изображения (slideImg.src = imagesUrls[currentImageIndex]).
  • Начальное отключение кнопки "назад" (showPrevBtn.disabled = true).
index.js
// Получение ссылок на HTML-элементы
var showPrevBtn = document.getElementById("show-prev-Btn")
var showNextBtn = document.getElementById("show-next-Btn")
var slideImage = document.getElementById("slide-img")
 
// Создание массива imagesUrls с URL-адресами изображений
var imagesUrls = []
imagesUrls.push("https://www.cstatic-images.com/car-pictures/main/USC50ALC051A021001.png")
imagesUrls.push(
  "https://img.autobytel.com/2017/chevrolet/corvette/2-800-oemexteriorfront1300-80986.jpg",
)
imagesUrls.push("http://s3.caradvice.com.au/wp-content/uploads/2015/05/JAGUAR_F-TYPE.jpg")
imagesUrls.push(
  "http://monevinc.com/wp-content/uploads/2016/08/2017-Lamborghini-Aventador-750x500.jpg",
)
 
// Инициализация currentImageIndex в 0
var currentImageIndex = 0
 
// Установка начального изображения
slideImage.src = imagesUrls[currentImageIndex]
 
// Начальное отключение кнопки "назад"
showPrevBtn.disabled = true

Функции-обработчики событий: onShowPrevBtnClick

  • onShowPrevBtnClick():
  • Уменьшение currentImageIndex на 1.
  • Обновление slideImg.src.
  • Отключение showPrevBtn.disabled = true, если currentImageIndex станет 0.
  • Включение showNextBtn.disabled = false (если было отключено).
  • onShowNextBtnClick():
  • Увеличение currentImageIndex на 1.
  • Обновление slideImg.src.
  • Отключение showNextBtn.disabled = true, если currentImageIndex достигнет imagesUrls.length - 1.
  • Включение showPrevBtn.disabled = false (если было отключено).
index.js
// Определения функций
 
function onShowPrevBtnClick() {
  currentImageIndex--
  slideImage.src = imagesUnls[currentImageIndex]
  showNextBtn.disabled = false
 
  // Отключить кнопку "Назад", если нужно
  if (currentImageIndex === 0) {
    showPrevBtn.disabled = true
  }
}
 
function onShowNextBtnClick() {
  currentImageIndex++
  slideImage.src = imagesUnls[currentImageIndex]
  showPrevBtn.disabled = false
 
  // Отключить кнопку "Вперед", если нужно
  if (currentImageIndex === imagesUnls.length - 1) {
    showNextBtn.disabled = true
  }
}

Привязка слушателей событий:

index.js
showPrevBtn.addEventListener("click", onShowPrevBtnClick)
showNextBtn.addEventListener("click", onShowNextBtnClick)

3. Рекомендации по отработке

  1. Повторите код: Перепишите код слайдера самостоятельно, не заглядывая в источник.

  2. Пошаговая отладка: Используйте точки останова (breakpoints) в инструментах разработчика для пошагового выполнения кода и отслеживания значений переменных.

    🔗

    Больше деталей о возможностях пошаговой отладки смотрите в документации. Отладка в браузере

  3. Измените функциональность:

  • Добавьте индикаторы текущего изображения (точки под слайдером).
  • Реализуйте автоматическое перелистывание изображений.
  • Попробуйте добавить плавные переходы между изображениями (хотя автор от этого отказывается на этом этапе).
  • Что произойдет, если массив imagesUrls будет пустым или содержать только одно изображение? Как ваш код справится с этим?
  1. Рефакторинг: Подумайте, как можно улучшить структуру кода, сделать его более модульным и читаемым. Представьте, как можно инкапсулировать логику слайдера в один объект (подготовка к следующему уроку).

Боевой маршрут (JS Ваще с нуля)

Видеоурок - 22 видео из 29