ПР / Хакова Ю. М. Отчет ПР4
.docxМИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ,
СВЯЗИ И МАССОВЫХ КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА»
(СПбГУТ)
Факультет Информационных технологий и программной инженерии
Кафедра Систем обработки данных
Направление: 09.03.02 Информационные системы и технологии
Профиль: Прикладные информационные системы и технологии
Практическое задание №4
«Работа с формами в html»
по дисциплине
«ТFeРВП»
Выполнил:
студент группы ИСТ-223
Хакова Ю. М. «____» _________ 2025 г.
Принял:
ассистент кафедры СОД
Коровкина Е.В. «____» _________ 2025 г.
СОДЕРЖАНИЕ
Y
1 ВЫПОЛНЕНИЕ ЗАДАЧИ №1 3
2 ЛИСТИНГ INDEX.HTML 3
3 ЛИСТИНГ STYLE.CSS 5
4 ЛИСТИНГ SCRIPT.JS 5
5 ВЫПОЛНЕНИЕ ЗАДАЧИ №2 6
6 ЛИСТИНГ FORUM.HTML 7
7 ЛИСТИНГ STYLE-FORUM.CSS 8
8 ЛИСТИНГ SCRIPT.JS 12
9 ЗАКЛЮЧЕНИЕ 13
1 ВЫПОЛНЕНИЕ ЗАДАЧИ №1
Создаем тестовый файл с применением технологий java script, в котором будет рассчитываться стоимость товара и обрабатываться отзыв. Результат приведен на рисунке 1.
Рисунок 1 – тестовая страница для расчета стоимости заказа и написания отзыва
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>Практическая работа 4</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Калькулятор заказа</h2>
<label>Стоимость товара №1 (руб.):</label>
<input type="text" id="price1">
<label>Количество товара №1:</label>
<input type="text" id="quantity1">
<label>Стоимость товара №2 (руб.):</label>
<input type="text" id="price2">
<label>Количество товара №2:</label>
<input type="text" id="quantity2">
<label>Стоимость всего заказа (руб.):</label>
<input type="text" id="total" disabled>
<button id="calculateButton">Рассчитать</button>
</div>
<div class="container">
<h2>Оставьте отзыв</h2>
<textarea id="review" rows="7" cols="50"></textarea>
<button id="processReviewButton">Сохранить</button>
<div id="output"></div>
</div>
<script src="script.js"></script>
</body>
</html>
3 ЛИСТИНГ STYLE.CSS
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
max-width: 500px;
margin-bottom: 40px;
}
label, input, button, textarea {
display: block;
width: 100%;
margin-bottom: 10px;
}
input:disabled {
background: #f0f0f0;
}
#output {
padding: 10px;
background: #f8f8f8;
border: 1px solid #ddd;
}
4 ЛИСТИНГ SCRIPT.JS
function calculateTotal() {
let price1 = parseFloat(document.getElementById("price1").value);
let quantity1 = parseInt(document.getElementById("quantity1").value);
let price2 = parseFloat(document.getElementById("price2").value);
let quantity2 = parseInt(document.getElementById("quantity2").value);
if (isNaN(price1) || isNaN(quantity1) || quantity1 < 0 || price1 < 0 ||
isNaN(price2) || isNaN(quantity2) || quantity2 < 0 || price1 < 0) {
alert("Введите корректные значения!");
return;
}
let total = (price1 * quantity1) + (price2 * quantity2);
document.getElementById("total").value = total.toFixed(2);
}
function processReview() {
let reviewText = document.getElementById("review").value;
let formattedText = reviewText.charAt(0).toUpperCase() + reviewText.slice(1).toLowerCase();
document.getElementById("output").innerText = formattedText;
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("calculateButton").addEventListener("click", calculateTotal);
document.getElementById("processReviewButton").addEventListener("click", processReview);
});
5 ВЫПОЛНЕНИЕ ЗАДАЧИ №2
На одной из страниц сайта, используя HTML, CSS и язык программирования JavaScript (JS), создать поле для ввода текста и реализовать предварительную проверку введенных данных. Результат приведен на рисунке 2.
Рисунок 2 – реализация текстового поля на странице форума
6 ЛИСТИНГ FORUM.HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Форум</title>
<link rel="stylesheet" href="style-forum.css">
</head>
<body>
<header>
<div class="logo">
<span class="logo-text">INTERSLAVIC</span>
</div>
<nav class="nav-menu">
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="courses.html">Курсы</a></li>
<li><a href="forum.html">Форум</a></li>
</ul>
</nav>
<button class="auth-button">ВХОД/РЕГИСТРАЦИЯ</button>
</header>
<main>
<section class="forum-container">
<h1>Оставьте отзыв</h1>
<textarea id="review-input" placeholder="Напишите ваш отзыв..."></textarea>
<button id="submit-review">Сохранить</button>
<h2>Отзывы пользователей</h2>
<ul id="reviews-list"></ul>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
7 ЛИСТИНГ STYLE-FORUM.CSS
body {
font-family: 'Work Sans', sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
background-color: white;
}
.logo-text {
font-family: 'Yaldevi Colombo', sans-serif;
font-weight: 600;
font-size: 36px;
color: #291D9A;
}
.nav-menu ul {
list-style: none;
display: flex;
gap: 40px;
margin: 0;
padding: 0;
}
.nav-menu ul li a {
text-decoration: none;
font-size: 16px;
color: #1D253C;
}
.auth-button {
font-weight: bold;
width: 207px;
height: 44px;
border: 2px solid #D2D3D8;
border-radius: 8px;
background: none;
font-size: 14px;
color: #1D253C;
cursor: pointer;
transition: 0.3s;
}
.auth-button:hover {
background: #1D253C;
color: #ffffff;
}
.forum-container {
width: 60%;
margin: 50px auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
h1, h2 {
text-align: center;
color: #1D253C;
}
textarea {
width: 100%;
height: 100px;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
resize: none;
}
button {
display: block;
width: 100%;
padding: 10px;
margin-top: 10px;
background: #291D9A;
color: white;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #1A0D75;
}
#reviews-list {
list-style: none;
padding: 0;
}
#reviews-list li {
background: #f0f0f0;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}
8 ЛИСТИНГ SCRIPT.JS
document.addEventListener("DOMContentLoaded", function () {
const reviewInput = document.getElementById("review-input");
const submitButton = document.getElementById("submit-review");
const reviewsList = document.getElementById("reviews-list");
function addReviewToPage(reviewText) {
const li = document.createElement("li");
li.textContent = reviewText;
reviewsList.appendChild(li);
}
function processReviewText(reviewText) {
reviewText = reviewText.toLowerCase();
return reviewText.charAt(0).toUpperCase() + reviewText.slice(1);
}
submitButton.addEventListener("click", function () {
let reviewText = reviewInput.value.trim();
if (reviewText === "") return;
reviewText = processReviewText(reviewText);
addReviewToPage(reviewText);
reviewInput.value = "";
});
});
9 ЗАКЛЮЧЕНИЕ
В ходе выполнения работы был создан тестовая страница для расчета стоимости заказа с применением технологий HTML, CSS и Java Script, а также создан второй уровень личного сайта, где пользователь сможет оставлять отзывы.
Санкт-Петербург
2025