ПР / Хакова Ю. М. Отчет ПР5
.docxМИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ,
СВЯЗИ И МАССОВЫХ КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА»
(СПбГУТ)
Факультет Информационных технологий и программной инженерии
Кафедра Систем обработки данных
Направление: 09.03.02 Информационные системы и технологии
Профиль: Прикладные информационные системы и технологии
Практическое задание №5
«Работа с изображениями»
по дисциплине
«ТFeРВП»
Выполнил:
студент группы ИСТ-223
Хакова Ю. М. «____» _________ 2025 г.
Принял:
ассистент кафедры СОД
Коровкина Е.В. «____» _________ 2025 г.
СОДЕРЖАНИЕ
Y
1 ХОД РАБОТЫ 3
2 ЛИСТИНГ INDEX.HTML 4
3 ЛИСТИНГ STYLE.CSS 5
4 ЛИСТИНГ SCRIPT.JS 7
5 ЗАКЛЮЧЕНИЕ 8
1 ХОД РАБОТЫ
Создаем файловую структуру проекта (Рисунок 1).
Рисунок 1 – файловая структура проекта
Файл index.html отвечает за структуру веб-страницы. В нем происходит подключение таблицы стилей из файла style.css, а также сценария на JavaScript из файла script.js. В теле страницы размещены блоки для каждого задания и элементы интерфейса.
Файл style.css определяет оформление страницы. В нём задаются размеры, цвета, визуальные эффекты для заголовков, изображений, кнопок и других элементов.
Файл script.js реализует интерактивную часть сайта. Сценарий содержит функции, которые обрабатывают действия пользователя. Они позволяют динамически менять изображения на странице в соответствии с каждым заданием.
Файлы 1.jpeg, 2.jpeg, 3.jpeg и 4.jpeg, размещённые в папке images, используются в качестве графического материала для выполнения заданий.
2 ЛИСТИНГ INDEX.HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ПР5</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<h1>Практическая работа №5</h1>
<h2>Задание 1 Коллекция изображений</h2>
<div class="collection" id="collection"></div>
<h2>Задание 2 Замена изображения при наведении</h2>
<img id="hoverImage" src="images/1.jpeg" alt="Изображение" class="image">
<h2>Задание 3: Замена изображения при нажатии на кнопку</h2>
<div class="image-container">
<img id="clickImage" src="images/1.jpeg" alt="Изображение" class="image">
<button id="changeButton" class="btn">Сменить картинку</button>
</div>
<h2>Задание 4: Замена изображения</h2>
<div class="image-container">
<img id="cycleImage" src="images/1.jpeg" alt="Изображение" class="image">
<button id="cycleButton" class="btn">Сменить картинку</button>
</div>
</body>
</html>
3 ЛИСТИНГ STYLE.CSS
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #9da19b;
margin: 0;
padding: 20px;
}
h1, h2 {
color: #333;
}
.collection {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.collection img {
width: 300px;
height: 200px;
cursor: pointer;
border-radius: 10px;
transition: transform 0.3s ease-in-out;
}
.collection img:hover {
transform: scale(1.05);
}
.image-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.image {
width: 300px;
height: 200px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s ease-in-out;
}
.btn {
margin-top: 10px;
padding: 10px 15px;
background-color: #cea963;
color: #333;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s ease-in-out;
}
.btn:hover {
background-color: #ffd17c;
}
4 ЛИСТИНГ SCRIPT.JS
const imageArray = ["images/1.jpeg", "images/2.jpeg", "images/3.jpeg", "images/4.jpeg"];
// 1:
const collectionDiv = document.getElementById("collection");
imageArray.forEach((imgSrc) => {
const imgElement = document.createElement("img");
imgElement.src = imgSrc;
imgElement.alt = "Коллекция";
collectionDiv.appendChild(imgElement);
});
// 2:
const hoverImage = document.getElementById("hoverImage");
hoverImage.addEventListener("mouseover", () => {
hoverImage.src = "images/2.jpeg";
});
hoverImage.addEventListener("mouseout", () => {
hoverImage.src = "images/1.jpeg";
});
// 3:
const clickImage = document.getElementById("clickImage");
const changeButton = document.getElementById("changeButton");
changeButton.addEventListener("click", () => {
clickImage.src = clickImage.src.includes("1.jpeg") ? "images/2.jpeg" : "images/1.jpeg";
});
// 4:
const cycleImage = document.getElementById("cycleImage");
const cycleButton = document.getElementById("cycleButton");
let cycleIndex = 0;
cycleButton.addEventListener("click", () => {
cycleIndex = (cycleIndex + 1) % imageArray.length;
cycleImage.src = imageArray[cycleIndex];
});
5 ЗАКЛЮЧЕНИЕ
В ходе выполнения практической работы была разработана тестовая веб-страница, демонстрирующая работу с изображениями с использованием технологий HTML, CSS и JavaScript. Реализованы четыре задания: отображение коллекции изображений, замена изображения при наведении курсора, переключение при нажатии кнопки, а также циклическая смена изображений.
Санкт-Петербург
2025