Эта серия упражнений поможет вам отточить навыки манипулирования HTML DOM с помощью JavaScript. Вы будете работать с готовой HTML-структурой и CSS-стилями, чтобы шаг за шагом создать функциональную галерею изображений. Задания начинаются с основ выбора элементов и постепенно усложняются, включая добавление обработчиков событий и динамическое изменение атрибутов элементов. Вам нужно будет заполнить пропущенные фрагменты кода JavaScript, чтобы галерея заработала. Каждое задание фокусируется на конкретных методах и свойствах DOM, позволяя закрепить знания на практике и сразу увидеть результат своих действий.
Список тем
- Модуль 1: Основы выбора элементов
- Выбор элемента по ID.
- Выбор элементов по классу.
- Выбор элементов по тегу.
- Выбор по селектору CSS.
- Выбор по атрибуту.
- Поиск элементов внутри другого элемента.
- Поиск родительского элемента.
- Поиск соседних элементов (предыдущий, следующий).
- Поиск первого и последнего дочернего элемента.
- Поиск всех дочерних элементов.
- Модуль 2: Манипуляция содержимым
- Модуль 3: Работа с атрибутами
- Модуль 4: Управление классами
- Модуль 5: Управление стилями
- Модуль 6: Создание и удаление элементов
- Создание нового элемента.
- Вставка элемента перед другим элементом.
- Вставка элемента после другого элемента.
- Добавление элемента в определенную позицию внутри списка дочерних элементов.
- Удаление элемента из DOM.
- Замена одного элемента другим.
- Перемещение существующего элемента в другое место DOM..
- Очистка содержимого элемента без его удаления.
- Модуль 7: Обработка событий
- Модуль 8: Работа с формами
- Модуль 9: Продвинутые манипуляции
- Модуль 10: Работа с размерами и прокруткой
- Получение размеров элемента.
- Получение позиции элемента относительно окна браузера.
- Получение позиции элемента относительно родительского элемента.
- Управление прокруткой страницы.
- Определение, виден ли элемент в текущей области просмотра.
- Плавная прокрутка к элементу.
- Создание элемента, который фиксируется при прокрутке.
- Модуль 11: Работа с медиа-элементами
- Создание простой галереи изображений.
- Работа с Canvas.
- Модуль 12: Практические задания
Выбор основного изображения
В HTML-структуре галереи есть основная область для показа крупного изображения. Ваша первая задача — получить ссылку на этот элемент изображения, используя его уникальный идентификатор.
CSS
.gallery {
max-width: 370px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
.main-image-container img {
max-width: 100%;
height: auto;
display: block;
margin-bottom: 10px;
}
.thumbnails img {
width: 60px;
height: 60px;
object-fit: cover;
margin-right: 5px;
cursor: pointer;
border: 2px solid transparent;
}
.thumbnails img:hover {
border-color: #aaa;
}
.thumbnails img.active {
border-color: blue;
}HTML
Восстановить HTML
<div class="gallery">
<div class="main-image-container">
<img id="main-image" src="https://naytikurs.ru/img/1.png" alt="Selected image">
</div>
<div class="thumbnails">
<img src="https://naytikurs.ru/img/1.png" alt="Thumbnail 1">
<img src="https://naytikurs.ru/img/2.png" alt="Thumbnail 2">
<img src="https://naytikurs.ru/img/4.png" alt="Thumbnail 3">
<img src="https://naytikurs.ru/img/5.png" alt="Thumbnail 4">
</div>
</div>JavaScript
const mainImage = document.input__1("input__2");
// Для проверки, что элемент выбран, добавим ему рамку (не часть задания)
if (mainImage) {
mainImage.style.border = "2px solid red";
}
Используйте метод `document.getElementById()` для выбора элемента по его ID. ID нужного элемента — "main-image".
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Выбор всех миниатюр
Теперь нужно получить доступ ко всем изображениям-миниатюрам. Они находятся внутри контейнера с классом "thumbnails". Выберите все элементы `img` внутри этого контейнера.
CSS
.gallery {
max-width: 370px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
.main-image-container img {
max-width: 100%;
height: auto;
display: block;
margin-bottom: 10px;
}
.thumbnails img {
width: 60px;
height: 60px;
object-fit: cover;
margin-right: 5px;
cursor: pointer;
border: 2px solid transparent;
}
.thumbnails img:hover {
border-color: #aaa;
}
.thumbnails img.active {
border-color: blue;
}HTML
Восстановить HTML
<div class="gallery">
<div class="main-image-container">
<img id="main-image" src="https://naytikurs.ru/img/1.png" alt="Selected image">
</div>
<div class="thumbnails">
<img src="https://naytikurs.ru/img/1.png" alt="Thumbnail 1">
<img src="https://naytikurs.ru/img/2.png" alt="Thumbnail 2">
<img src="https://naytikurs.ru/img/4.png" alt="Thumbnail 3">
<img src="https://naytikurs.ru/img/5.png" alt="Thumbnail 4">
</div>
</div>JavaScript
const thumbnails = document.input__1("input__2");
// Для проверки добавим рамку всем миниатюрам (не часть задания)
thumbnails.forEach(thumb => {
thumb.style.border = "2px solid green";
});
Используйте метод `document.querySelectorAll()`, чтобы выбрать все элементы, соответствующие CSS-селектору. Селектор должен указывать на все `img` внутри элемента с классом `thumbnails`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Добавление обработчика клика на миниатюры
Чтобы галерея стала интерактивной, нужно реагировать на клики по миниатюрам. Добавьте обработчик событий на каждую миниатюру. Пока что внутри обработчика просто выведите в консоль `src` той миниатюры, по которой кликнули.
CSS
.gallery {
max-width: 370px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
.main-image-container img {
max-width: 100%;
height: auto;
display: block;
margin-bottom: 10px;
}
.thumbnails img {
width: 60px;
height: 60px;
object-fit: cover;
margin-right: 5px;
cursor: pointer;
border: 2px solid transparent;
}
.thumbnails img:hover {
border-color: #aaa;
}
.thumbnails img.active {
border-color: blue;
}HTML
Восстановить HTML
<div class="gallery">
<div class="main-image-container">
<img id="main-image" src="https://naytikurs.ru/img/1.png" alt="Selected image">
</div>
<div class="thumbnails">
<img src="https://naytikurs.ru/img/1.png" alt="Thumbnail 1">
<img src="https://naytikurs.ru/img/2.png" alt="Thumbnail 2">
<img src="https://naytikurs.ru/img/4.png" alt="Thumbnail 3">
<img src="https://naytikurs.ru/img/5.png" alt="Thumbnail 4">
</div>
</div>JavaScript
const mainImage = document.getElementById("main-image");
const thumbnails = document.querySelectorAll(".thumbnails img");
thumbnails.input__1(thumbnail => {
thumbnail.input__2("input__3", function(event) {
// Получаем элемент, на который кликнули
const clickedThumbnail = input__4;
// Выводим его src в консоль
console.log(clickedThumbnail.input__5);
});
});
Переберите все найденные миниатюры с помощью цикла (`for` или `forEach`). Для каждой миниатюры используйте метод `addEventListener()`, чтобы добавить обработчик события 'click'. Внутри функции-обработчика получите доступ к элементу, по которому кликнули, через `event.target` (или `this`, если используется function) и выведите его свойство `src` в консоль.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Обновление основного изображения
Теперь самое главное: при клике на миниатюру нужно обновить основное изображение. Замените вывод в консоль на код, который устанавливает `src` основного изображения равным `src` кликнутой миниатюры.
CSS
.gallery {
max-width: 370px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
.main-image-container img {
max-width: 100%;
height: auto;
display: block;
margin-bottom: 10px;
transition: opacity 0.3s ease-in-out;
}
.thumbnails img {
width: 60px;
height: 60px;
object-fit: cover;
margin-right: 5px;
cursor: pointer;
border: 2px solid transparent;
transition: border-color 0.3s ease;
}
.thumbnails img:hover {
border-color: #aaa;
}
.thumbnails img.active {
border-color: blue;
}HTML
Восстановить HTML
<div class="gallery">
<div class="main-image-container">
<img id="main-image" src="https://naytikurs.ru/img/1.png" alt="Selected image">
</div>
<div class="thumbnails">
<img src="https://naytikurs.ru/img/1.png" alt="Thumbnail 1">
<img src="https://naytikurs.ru/img/2.png" alt="Thumbnail 2">
<img src="https://naytikurs.ru/img/4.png" alt="Thumbnail 3">
<img src="https://naytikurs.ru/img/5.png" alt="Thumbnail 4">
</div>
</div>JavaScript
const mainImage = document.getElementById("main-image");
const thumbnails = document.querySelectorAll(".thumbnails img");
thumbnails.forEach(thumbnail => {
thumbnail.addEventListener("click", function(event) {
const clickedThumbnail = event.target;
// Получаем src кликнутой миниатюры
const newImageSrc = clickedThumbnail.input__1;
// Устанавливаем новый src для основного изображения
mainImage.input__2 = input__3;
// (Необязательно) Обновляем alt текст основного изображения
// mainImage.alt = clickedThumbnail.alt;
});
});
Внутри обработчика события 'click', который вы добавили на предыдущем шаге, получите `src` кликнутой миниатюры (например, через `event.target.src`). Затем установите это значение в качестве `src` для элемента основного изображения (который вы выбрали в первом задании и сохранили в переменной `mainImage`).
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Визуальное выделение активной миниатюры
Чтобы пользователь видел, какая миниатюра выбрана, добавим визуальное выделение. При клике на миниатюру нужно сначала убрать класс 'active' у всех миниатюр, а затем добавить класс 'active' только той, по которой кликнули. CSS для класса 'active' уже есть.
CSS
.gallery {
max-width: 370px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
.main-image-container img {
max-width: 100%;
height: auto;
display: block;
margin-bottom: 10px;
}
.thumbnails img {
width: 60px;
height: 60px;
object-fit: cover;
margin-right: 5px;
cursor: pointer;
border: 2px solid transparent;
transition: border-color 0.3s ease;
}
.thumbnails img:hover {
border-color: #aaa;
}
/* Стиль для активной миниатюры */
.thumbnails img.active {
border-color: blue;
}HTML
Восстановить HTML
<div class="gallery">
<div class="main-image-container">
<img id="main-image" src="https://naytikurs.ru/img/1.png" alt="Selected image">
</div>
<div class="thumbnails">
<img src="https://naytikurs.ru/img/1.png" alt="Thumbnail 1" class="active">
<img src="https://naytikurs.ru/img/2.png" alt="Thumbnail 2">
<img src="https://naytikurs.ru/img/4.png" alt="Thumbnail 3">
<img src="https://naytikurs.ru/img/5.png" alt="Thumbnail 4">
</div>
</div>JavaScript
const mainImage = document.getElementById("main-image");
const thumbnails = document.querySelectorAll(".thumbnails img");
thumbnails.forEach(thumbnail => {
thumbnail.addEventListener("click", function(event) {
const clickedThumbnail = event.target;
// 1. Убираем класс 'active' у всех миниатюр
thumbnails.forEach(thumb => {
thumb.input__1.input__2("input__3");
});
// 2. Добавляем класс 'active' кликнутой миниатюре
clickedThumbnail.input__4.input__5("input__6");
// 3. Обновляем основное изображение
mainImage.src = clickedThumbnail.src;
mainImage.alt = clickedThumbnail.alt;
});
});
Внутри обработчика клика, перед обновлением основного изображения: 1. Переберите все миниатюры (используя переменную `thumbnails`) и у каждой удалите класс 'active' с помощью `element.classList.remove('active')`. 2. После этого добавьте класс 'active' только кликнутой миниатюре (доступной через `event.target` или `this`) с помощью `element.classList.add('active')`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Загрузка...