Тренажер по изменению атрибута `src` у изображений! Этот раздел посвящен практике изменения источников изображений на веб-странице с использованием JavaScript. Вы начнете с простых задач, таких как изменение `src` одного изображения, и постепенно перейдете к более сложным сценариям, включая изменение `src` нескольких изображений и использование событий. Каждое упражнение разработано таким образом, чтобы помочь вам понять, как JavaScript взаимодействует с DOM для динамического обновления контента на странице. Внимательно читайте описания заданий и используйте подсказки, если потребуется.
- Модуль 1: Основы выбора элементов
- Выбор элемента по ID.
- Выбор элементов по классу.
- Выбор элементов по тегу.
- Выбор по селектору CSS.
- Выбор по атрибуту.
- Поиск элементов внутри другого элемента.
- Поиск родительского элемента.
- Поиск соседних элементов (предыдущий, следующий).
- Поиск первого и последнего дочернего элемента.
- Поиск всех дочерних элементов.
- Модуль 2: Манипуляция содержимым
- Модуль 3: Работа с атрибутами
- Модуль 4: Управление классами
- Модуль 5: Управление стилями
- Модуль 6: Создание и удаление элементов
- Создание нового элемента.
- Вставка элемента перед другим элементом.
- Вставка элемента после другого элемента.
- Добавление элемента в определенную позицию внутри списка дочерних элементов.
- Удаление элемента из DOM.
- Замена одного элемента другим.
- Перемещение существующего элемента в другое место DOM..
- Очистка содержимого элемента без его удаления.
- Модуль 7: Обработка событий
- Модуль 8: Работа с формами
- Модуль 9: Продвинутые манипуляции
- Модуль 10: Работа с размерами и прокруткой
- Получение размеров элемента.
- Получение позиции элемента относительно окна браузера.
- Получение позиции элемента относительно родительского элемента.
- Управление прокруткой страницы.
- Определение, виден ли элемент в текущей области просмотра.
- Плавная прокрутка к элементу.
- Создание элемента, который фиксируется при прокрутке.
- Модуль 11: Работа с медиа-элементами
- Модуль 12: Практические задания
Задание 1: Изменение `src` одного изображения
На странице есть одно изображение. Ваша задача - с помощью JavaScript кода изменить значение атрибута `src` этого изображения на новый URL. После выполнения кода изображение должно измениться.
<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Исходное изображение">document.input__1("myImage").input__2 = "https://naytikurs.ru/assets/uploads/2025/03/naskolko-vas-legko-obmanut-v-internete-300x300.png";Задание 2: Изменение `src` по клику на кнопку
На странице есть кнопка и изображение. Необходимо написать JavaScript код, который будет изменять атрибут `src` изображения при клике на кнопку. Изначально на странице загружено одно изображение, после клика на кнопку изображение должно измениться на другое.
<button id="changeImageButton">Изменить изображение</button>
<img id="myImage2" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Исходное изображение">document.input__1("changeImageButton").addEventListener("click", function() {
document.input__2("myImage2").input__3 = "https://naytikurs.ru/assets/uploads/2025/03/test-na-znanie-osnov-kiberbezopasnosti-300x300.png";
});Задание 3: Изменение `src` нескольких изображений
На странице есть несколько изображений с классом `gallery-image`. Ваша задача - написать JavaScript код, который изменит атрибут `src` у всех этих изображений на новый URL. Изначально загружены одни изображения, после выполнения кода все изображения с классом `gallery-image` должны измениться.
<img class="gallery-image" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Изображение 1">
<img class="gallery-image" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Изображение 2">
<img class="gallery-image" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike4-300x300.png" alt="Изображение 3">const images = document.input__1(".gallery-image");
for (let i = 0; i < input__2.length; i++) {
images[i].input__3 = "https://naytikurs.ru/assets/uploads/2025/03/naskolko-vas-legko-obmanut-v-internete-300x300.png";
}Задание 4: Изменение `src` первого изображения в группе
На странице есть несколько изображений с классом `gallery-image`. Ваша задача - изменить атрибут `src` только у первого изображения из этой группы на новый URL. Изначально загружены одни изображения, после выполнения кода только первое изображение с классом `gallery-image` должно измениться.
<img class="gallery-image" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Изображение 1">
<img class="gallery-image" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Изображение 2">const images = document.input__1(".gallery-image");
images[0].input__3 = "https://naytikurs.ru/assets/uploads/2025/03/test-na-znanie-osnov-kiberbezopasnosti-300x300.png";Задание 5: Изменение `src` при наведении мыши
На странице есть изображение. Необходимо написать JavaScript код, который будет изменять атрибут `src` изображения, когда курсор мыши наводится на изображение, и возвращать исходный `src`, когда курсор убирается с изображения. Изначально загружено одно изображение, при наведении курсора оно должно измениться, а при убирании курсора вернуться к исходному.
<img id="hoverImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike4-300x300.png" alt="Изображение для наведения">const image = document.input__1("hoverImage");
const originalSrc = image.input__2;
image.addEventListener("mouseover", function() {
image.input__3 = "https://naytikurs.ru/assets/uploads/2025/03/test-na-znanie-osnov-kiberbezopasnosti-300x300.png";
});
image.addEventListener("mouseout", function() {
image.input__4 = originalSrc;
});Задание 6: Изменение `src` с использованием `setAttribute`
На странице есть изображение. Ваша задача - изменить атрибут `src` изображения, используя метод `setAttribute`. Изображение должно изменить свой источник после выполнения кода.
<img id="attributeImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Изображение для setAttribute">document.input__1("attributeImage").input__2("src", "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike4-300x300.png");Задание 7: Изменение `src` в зависимости от data-атрибута
На странице есть изображение с data-атрибутом `data-new-src`. Ваша задача - написать JavaScript код, который прочитает значение этого data-атрибута и установит его в качестве нового `src` для изображения. Изображение должно изменить свой источник на URL, указанный в data-атрибуте.
<img id="dataImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Изображение с data-атрибутом" data-new-src="https://naytikurs.ru/assets/uploads/2025/03/test-na-znanie-osnov-kiberbezopasnosti-300x300.png">const image = document.input__1("dataImage");
const newSrc = image.dataset.input__2;
image.input__3 = newSrc;Задание 8: Изменение `src` случайного изображения из массива
На странице есть изображение. Вам дан массив URL-адресов изображений. Ваша задача - написать JavaScript код, который будет выбирать случайный URL из массива и устанавливать его в качестве нового `src` для изображения. При каждом выполнении кода изображение должно меняться на случайное из предложенных.
<img id="randomImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Случайное изображение">const image = document.input__1("randomImage");
const imageUrls = [
"https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png",
"https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png",
"https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike4-300x300.png",
"https://naytikurs.ru/assets/uploads/2025/03/naskolko-vas-legko-obmanut-v-internete-300x300.png"
];
const randomIndex = Math.floor(Math.input__2() * imageUrls.length);
const randomUrl = imageUrls[randomIndex];
image.input__3 = randomUrl;
Загрузка...