Практические работы по WEB-программирование / Лаба 4 / Web Лаб 4
.docxПрактическая работа № 4
Работа с мышью и клавиатурой
Цель работы: овладение приемами работы с мышью и клавиатурой для выполнения разнообразных манипуляций над текстом страницы.
Отображение положения указателя мыши и состояния клавиш:
Листинг программы:
<!DOCTYPE html>
<html>
<head>
<title>Mouse Position and Key State</title>
</head>
<body>
<div id="output"></div>
<script>
document.addEventListener("mousemove", function(event) {
const output = document.getElementById("output");
output.innerHTML = `X: ${event.clientX}, Y: ${event.clientY}, Клавиши: ${event.buttons}`;
});
</script>
</body>
</html>
Управляющая кнопка для выбора всех элементов страницы:
Листинг программы:
<!DOCTYPE html>
<html>
<head>
<title>Select All Button</title>
</head>
<body>
<button onclick="selectAll()">Выбрать все</button>
<script>
function selectAll() {
const elements = document.querySelectorAll("*");
elements.forEach(element => element.classList.add("selected"));
}
</script>
<style>
.selected {
background-color: yellow;
}
</style>
</body>
</html>
Увеличение размера гиперссылок при наведении:
Листинг программы:
<!DOCTYPE html>
<html>
<head>
<title>Увеличение гиперссылок</title>
<style>
A:hover {
Font-size: 150%;
}
</style>
</head>
<body>
<a href=»#»>Ссылка 1</a>
<a href=»#»>Ссылка 2</a>
<a href=»#»>Ссылка 3</a>
<a href=»#»>Ссылка 4</a>
</body>
</html>
Ввод символов с клавиатуры в edge:
Листинг программы:
<!DOCTYPE html>
<html>
<head>
<title>Ввод с клавиатуры</title>
<input type=»text» onkeypress=»myFunction(event)»>
</head>
<body>
<script>
Function myFunction(event) {
Alert(`Вы ввели: ${event.key}`);
}
</script>
</body>
</html>
Подчеркивание заголовка при наведении с использованием таблицы стилей:
Листинг программы:
<!DOCTYPE html>
<html>
<head>
<title>Подчеркивание заголовка</title>
<style>
H1:hover {
Text-decoration: underline;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
</body>
</html>
Создание собственного объекта «Circle»:
Листинг программы:
html
<!DOCTYPE html>
<html>
<head>
<title>Вычисления с объектом "Circle"</title>
</head>
<body>
<div>
<label for="radiusInput">Введите радиус круга: </label>
<input type="number" id="radiusInput">
<button onclick="calculateCircle()">Вычислить</button>
</div>
<div id="results"></div>
<script>
class Circle {
constructor(radius) {
this.radius = radius;
}
calculateCircumference() {
return 2 * Math.PI * this.radius;
}
calculateArea() {
return Math.PI * Math.pow(this.radius, 2);
}
}
function calculateCircle() {
const radiusInput = document.getElementById("radiusInput");
const radius = parseFloat(radiusInput.value);
if (!isNaN(radius)) {
const myCircle = new Circle(radius);
const circumference = myCircle.calculateCircumference();
const area = myCircle.calculateArea();
const resultsDiv = document.getElementById("results");
resultsDiv.innerHTML = `
<p>Радиус: ${radius}</p>
<p>Длина окружности: ${circumference}</p>
<p>Площадь круга: ${area}</p>
`;
} else {
alert("Пожалуйста, введите корректное значение радиуса.");
}
}
</script>
</body>
</html>