Отчеты / Web. Лабораторная работа 6
.pdfФедеральное агентство связи ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ
ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ «САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М. А. БОНЧ-БРУЕВИЧА» (СПбГУТ)
Факультет инфокоммуникационных сетей и систем Кафедра программной инженерии и вычислительной техники
ЛАБОРАТОРНАЯ РАБОТА №6 по дисциплине «Web-технологии» на тему «Объектная модель JavaScript»
Выполнил: студент 3-го курса дневного отделения группы ИКПИ-85
Коваленко Леонид Александрович Преподаватель:
профессор, к. т. н. Бузюков Лев Борисович
Санкт-Петербург
2020
Задание №1
Подготовим шаблон для нового HTML-документа bom_name.html (табл. 1). В правой части окна поместим 4 кнопки: «Window», «Navigator», «Location»,
«Screen».
Добавим в документ раздел <script> для вставки команд на JavaScript. С помощью кода на JavaScript выведем в строку состояния текст «Начало работы», поместим в документ заголовок произвольного содержания и информацию о последней модификации документа.
Подготовим обработчики сообщений кнопок «Window», «Navigator»,
«Location», «Screen».
Таблица 1 — Файл «bom_name.html»
<!DOCTYPE html>
<html>
<head> <title>BOM</title>
<style>
h2 { text-align: center; }
p { text-indent: 1.5em; text-align: justify; }
.right { float: right; }
</style>
</head>
<body>
<div class="right"> <ul type="none">
<li><button onclick="liWindow();">Window</button></li> <li><button onclick="liNavigator();">Navigator</button></li> <li><button onclick="liLocation();">Location</button></li> <li><button onclick="liScreen();">Screen</button></li>
</ul>
</div> <h2>Главное</h2> <div id="main">
<p>Текст</p>
</div>
<script language="javascript"> window.onload = function() {
window.status = "Начало работы";
}
let header2 = document.createElement('h2'); header2.innerHTML = "Lorem ipsum"; document.body.appendChild(header2);
let paragraph = document.createElement('p'); paragraph.innerHTML = "Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod\
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,\
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo\
consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse\
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
2
cupidatat non\
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
document.body.appendChild(paragraph);
let lastModified = document.createElement('p'); lastModified.innerHTML = document.lastModified; document.body.appendChild(lastModified);
function liWindow() {
let main = document.getElementById('main'); main.innerHTML = "<p>Статус: " + window.status + ".</p>"; window.status = "";
}
function liNavigator() {
let main = document.getElementById('main'); main.innerHTML = "<p>Кодовое имя браузера: " +
navigator.appCodeName + ".</p>";
main.innerHTML += "<p>Официальное имя браузера: " + navigator.appName + ".</p>";
main.innerHTML += "<p>Версия браузера: " + navigator.appVersion +
".</p>";
main.innerHTML += "<p>Платформа: " + navigator.platform +
".</p>";
main.innerHTML += "<p>User-agent: " + navigator.userAgent +
".</p>";
}
function liLocation() {
let main = document.getElementById('main'); main.innerHTML = "<p>URL: " + location.href + ".</p>";
main.innerHTML += "<p>Протокол: " + location.protocol + ".</p>"; main.innerHTML += "<p>Хост: " + location.hostname + ".</p>"; main.innerHTML += "<p>Путь: " + location.pathname + ".</p>";
}
function liScreen() {
let main = document.getElementById('main'); main.innerHTML = "<p>Ширина: " + screen.width + ".</p>"; main.innerHTML += "<p>Высота: " + screen.height + ".</p>"; main.innerHTML += "<p>Глубина цвета изображения: " +
screen.colorDepth + ".</p>";
main.innerHTML += "<p>Ширина (с учетом служебных элементов): " + screen.availWidth + ".</p>";
main.innerHTML += "<p>Высота (с учетом служебных элементов): " + screen.availHeight + ".</p>";
}
</script>
</body>
</html>
Результат выполнения задания №1 представлен на рис. 1, 2, 3, 4, 5.
3
Рисунок 1 — Отображение «bom_name.html» (изначальный вид)
Рисунок 2 — Отображение «bom_name.html» (после нажатия на «Window»)
Рисунок 3 — Отображение «bom_name.html» (после нажатия на «Navigator»)
4
Рисунок 4 — Отображение «bom_name.html» (после нажатия на «Location»)
Рисунок 5 — Отображение «bom_name.html» (после нажатия на «Screen»)
5
Задание №2
Сделаем новой HTML-документ dom_name.html (табл. 2). Добавим скрипты, выполняющие следующие действия:
1. При наведении мыши на заголовок он изменяет цвет, скрипт встроен
в тэг.
2.При наведении мыши на первый абзац он меняет шрифт. Оформляется в виде функции, при отодвигании мыши параметры абзаца восстанавливаются.
3.При нажатии на кнопку «Формат» должно выполняться форматирование второго абзаца: установка абзацного отступа 1,5 см, красной строки 2,5 см и полуторного междустрочного интервала (1,5 см). При нажатии на кнопку «Отмена» восстанавливаются первоначальные значения параметров абзаца.
4.При наведении на третий абзац мыши он меняет фон.
Таблица 2 — Файл «dom_name.html»
<!DOCTYPE html>
<html>
<head> <title>DOM</title>
<style>
h2 { text-align: center; }
p { text-indent: 1.5em; text-align: justify; }
.right { float: right; }
</style>
<script>
function updateParagraph(n, b) {
let d = document.getElementsByTagName('p')[n - 1]; if (b) {
d.style.paddingLeft = '1.5cm'; d.style.textIndent = '2.5cm'; d.style.lineHeight = '1.5cm';
}
else {
d.style.paddingLeft = ''; d.style.textIndent = ''; d.style.lineHeight = '';
}
}
</script>
</head>
<body>
<div class="right">
<button onclick="updateParagraph(2, true)">Формат</button> <button onclick="updateParagraph(2, false)">Отмена</button>
</div>
<h2 onmouseenter="this.style.color='blue'" onmouseleave="this.style.color='black'">Заголовок</h2>
<p onmouseenter="this.style.font = 'bold 103% serif'" onmouseleave="this.style.font=''">Абзац 1. Lorem ipsum dolor sit amet,
6
consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Абзац 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p onmouseenter="this.style.background = 'silver'" onmouseleave="this.style.background=''">Абзац 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Результат выполнения задания №2 представлен на рис. 6, 7, 8, 9, 10.
Рисунок 6 — Отображение «dom_name.html» (изначальный вид) Рисунок 7 — Отображение «dom_name.html» (мышь на заголовке)
7
Рисунок 8 — Отображение «dom_name.html» (мышь на первом абзаце)
Рисунок 9 — Отображение «dom_name.html» (мышь на втором абзаце)
Рисунок 10 — Отображение «dom_name.html» (мышь на третьем абзаце) Задание №3
Сделаем таблицу 3х3 произвольного содержания шахматного типа. При наведении мыши на ячейку фон будет меняться на противоположный и восстанавливаться при отодвигании мыши.
Добавим три рисунка, рисунки расположим в перекрывающихся слоях. Над рисунками расположим три кнопки, с кнопками свяжем
обработчики:
1.Делает видимым первый рисунок;
2.Делает видимым второй рисунок;
3.Делает видимым третий рисунок. Таблица 3 — Файл «z3.html»
<!DOCTYPE html> <html>
<head>
<title>Задание №3</title>
<style> table {
border-collapse: collapse; width: 15%;
text-align: center;
8
}
td {
border: 1px solid black; padding: 4px;
}
</style>
<script language="javascript">
change = elem => elem.style.background = (elem.style.background == "white") ? "silver" : "white";
</script>
</head>
<body>
<table>
<tr>
<td onmouseover="change(this)" onmouseout="change(this)">1</td> <td onmouseover="change(this)" onmouseout="change(this)">2</td> <td onmouseover="change(this)" onmouseout="change(this)">3</td>
</tr>
<tr>
<td onmouseover="change(this)" onmouseout="change(this)">4</td> <td onmouseover="change(this)" onmouseout="change(this)">5</td> <td onmouseover="change(this)" onmouseout="change(this)">6</td>
</tr>
<tr>
<td onmouseover="change(this)" onmouseout="change(this)">7</td> <td onmouseover="change(this)" onmouseout="change(this)">8</td> <td onmouseover="change(this)" onmouseout="change(this)">9</td>
</tr>
</table>
<script language="javascript">
let array = document.getElementsByTagName('td'); for (let i = 0; i < array.length; ++i)
array[i].style.background = (i % 2 == 0) ? 'silver' : 'white';
</script>
<div style="position: absolute; top: 150px; left: 100px;"><img src="image.jpg" width="200px" height="100px" /></div>
<div style="position: absolute; top: 160px; left: 120px;"><img src="image2.jpg" width="200px" height="100px" /></div>
<div style="position: absolute; top: 170px; left: 140px;"><img src="image3.jpg" width="200px" height="100px" /></div>
<script language="javascript"> function show(n) {
let array = document.getElementsByTagName('div'); if (n == 1) {
array[0].style.zIndex = 2; array[1].style.zIndex = 0; array[2].style.zIndex = 1;
}
else if (n == 2) { array[0].style.zIndex = 0; array[1].style.zIndex = 2; array[2].style.zIndex = 1;
}
else if (n == 3) { array[0].style.zIndex = 0; array[1].style.zIndex = 1; array[2].style.zIndex = 2;
}
}
</script>
<button onclick="show(1);">Показать первую картинку</button> <button onclick="show(2);">Показать вторую картинку</button> <button onclick="show(3);">Показать третью картинку</button>
</body>
9
</html>
Результат выполнения задания №3 представлен на рис. 11, 12, 13, 14, 15, 16.
Рисунок 11 — Отображение «z3.html» (изначальный вид)
Рисунок 12 — Отображение «z3.html» (при наведении мыши серый цвет меняется на белый)
Рисунок 13 — Отображение «z3.html» (при наведении мыши белый цвет меняется на серый)
Рисунок 14 — Отображение «z3.html» («показать первую картинку»)
Рисунок 15 — Отображение «z3.html» («показать вторую картинку»)
Рисунок 16 — Отображение «z3.html» («показать третью картинку») 10