Практические работы по WEB-программирование / Лаба 3 / Web Лаб 3
.docxПрактическая работа № 3
Динамическое изменение Web-страниц
Цель работы: изучение средств языка JavaScript.
Ход работы
Вариант 5
Задание 1
От 7:00 до 9:00 выдать "Пора вставать", от 10:00 до 17:00 - "Надо
работать", от 18:00 до 21:00 - "Можешь отдохнуть".
Листинг программы:
write("</h1>");
document.write("<h2>");
document.write(dataNow.toLocaleString());
document.write("</h2>");
document.write("</center>");
Задание 2
В текстовом поле пользователь задает слово или фразу, которую необходимо найти в документе. Если оно/она найдено(а), то автоматически создается кнопка перехода на первое вхождение в текстовом поле фразы.
Листинг программы:
<!DOCTYPE html>
<html>
<head>
<title>Поиск текста в документе</title>
</head>
<body>
<input type="text" id="searchInput" placeholder="Введите текст для поиска">
<button onclick="findText()">Найти</button>
<br><br>
<div id="result"></div>
<script>
function findText() {
var searchText = document.getElementById("searchInput").value;
var content = document.body.innerText;
var index = content.indexOf(searchText);
if (index !== -1) {
var range = document.createRange();
var start = index;
var end = index + searchText.length;
Range.setStart(content, start);
Range.setEnd(content, end);
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = ""; // Очистите результаты предыдущего поиска
var button = document.createElement("button");
button.innerHTML = "Перейти к первому вхождению";
button.onclick = function() {
range.select();
window.getSelection().addRange(range);
};
resultDiv.appendChild(button);
}
else {
Document.getElementById("result").innerHTML = "Текст не найден.";
}
}
</script>
</body>
</html>
Задание 3
Разработать фреймовую структуру, которая бы демонстрировала возможности использования имен окон.
Листинг программы:
Фрейм index:
<!DOCTYPE HTML PUBLIC
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Фреймы</title>
</head>
<frameset cols="100,*">
<frame src="menu.html" name="MENU">
<frame src="content.html" name="CONTENT">
</frameset>
</html>
Фрейм menu:
<!DOCTYPE HTML PUBLIC
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Навигация по сайту</title>
</head>
<body style="background: #f0f0f0">
<p>МЕНЮ</p>
</body>
</html>
Фрейм menu:
<!DOCTYPE HTML PUBLIC
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Содержание сайта</title>
</head>
<body>
<p>СОДЕРЖАНИЕ</p>
</body>
<body>
Вятка
Это был странный мир: по утрам за окном не пели птицы, не шелестела трава,
собаки лаяли совершенно беззвучно, а мужики, то и дело ругающиеся на
улицах, широко раскрывали рты, но ни единого звука оттуда не доносилось.
В десять лет, после тяжело перенесённой скарлатины, Костя почти оглох,
и вот уже шестой год его окружал мир тишины и покоя.
</body>
</html>