Лабораторна робота №5

ЛАБОРАТОРНА РОБОТА № 5
Тема: JavaScript. DOM

Мета роботи: вивчити засоби по роботі з об’єктною моделлю документа;
навчитися додавати, змінювати та видаляти елементи веб-сторінки; засвоїти
принципи роботи з CSS-стилями.
Завдання на лабораторну роботу
Завдання №1
ДУ «Житомирська політехніка».20.121.07.000 – Лр5

Змн. Арк. № докум. Підпис Дата
Розроб. Полоневич Денис Літ. Арк. Аркушів
Перевір. Сергутін С.О. 1 14
Керівник
Звіт з
Н. контр. лабораторної роботи №5 ФІКТ Гр. IПЗ-19-1[2]
Зав. каф.
Лістинг:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Sample</title>
</head>
<body>
<header>
<a href="">
<img src="logo.src" alt="">
</a>
</header>
<aside>
<ul>
<li>
<a href="/">Main</a>
</li>
<li>
<a href="/history">History</a>
</li>
<li>
<a href="/about">About</a>
</li>
</ul>
</aside>
<section id="main">Main Section</section>
<footer>©AroundTheWorld</footer>
</body>
</html>
Результат роботи:
Лістинг:
<!DOCTYPE html>
<html lang="en">
<head>
Полоневич Д.В Арк.

Сергутін С.О. ДУ «Житомирська політехніка».20.121.07. – Лр5
14
<title>task2</title>
</head>
<body>
<header id="company">Cappuccino Company</header>
<footer id="f"></footer>
<script>
function getElementById(){
var elem = document.getElementById("company").innerText;
var resCompany = `© ${elem}`;
var res = document.getElementById("f");
res.innerHTML = resCompany;
}
getElementById();
</script>
</body>
</html>
Лістинг:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<form>
<input type="checkbox" id="ua" name="ua" value="Ua">
<label for="ua"> Ukrainian</label><br>
<input type="checkbox" id="eng" name="eng" value="Eng">
<label for="eng"> English</label><br>
<input type="checkbox" id="sp" name="sp" value="Sp">
<label for="sp"> Spanish</label><br><br>
<input type="button" onclick="getElementByName()" value="OK">
<br><br><div id="langs"></div>
</form>

14
<script>
function getElementByName() {
var ua = document.getElementsByName("ua");
var eng = document.getElementsByName("eng");
var sp = document.getElementsByName("sp");
var arr = [ua[0],eng[0],sp[0]];
let temp = "";
for(var i = 0; i < arr.length; i++){
if(arr[i].checked) {
if (i === arr.length - 1) {
temp += arr[i].getAttribute("name")
} else {
temp += arr[i].getAttribute("name") + ", ";
}
}
}
document.getElementById("langs").innerText = temp;
}
</script>
</body>
</html>

14
Лістинг:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<form>
<input type="checkbox" onclick="email(this)" id="mountain" name="mountain@gmail.com">
<label for="mountain"> mountain@gmail.com</label><br>
<input type="checkbox" onclick="email(this)" id="tree" name="tree@gmail.com">
<label for="tree"> tree@gmail.com</label><br>
<input type="checkbox" onclick="email(this)" id="world" name="world@gmail.com">
<label for="world"> world@gmail.com</label><br>
<input type="checkbox" onclick="email(this)" id="cloud" name="cloud@gmail.com">
<label for="cloud"> cloud@gmail.com</label><br>
<input type="checkbox" onclick="email(this)" id="river" name="river@gmail.com">
<label for="river"> river@gmail.com</label><br>
<input type="checkbox" onclick="email(this)" id="wood" name="wood@gmail.com">
<label for="wood"> wood@gmail.com</label><br>
<input type="checkbox" onclick="email(this)" id="field" name="field@gmail.com">
<label for="field"> field@gmail.com</label><br>
<input type="checkbox" onclick="email(this)" id="snow" name="snow@gmail.com">
<label for="snow"> snow@gmail.com</label><br>
<input type="checkbox" onclick="email(this)" id="rain" name="rain@gmail.com">
<label for="rain"> rain@gmail.com</label><br>
<input type="checkbox" onclick="email(this)" id="wind" name="wind@gmail.com">
<label for="wind"> wind@gmail.com</label><br>
<br><input type="text" id="emails" style="width: 400px">
</form>
<script>
function email(elem) {
var elemOut = document.getElementById("emails");
var emCheck = elem.getAttribute("name");
let outStr = "";
if(elem.checked){
outStr = elemOut.value;
outStr += emCheck + "; ";
elemOut.value = outStr;
}
else{
var emails = elemOut.value.split("; ");
elemOut.value = "";
if(emails.length >= 1)
{
for(var i = 0; i < emails.length - 1; i++)
{
if(emails[i] !== emCheck)
{
let str = emails[i] + "; ";
outStr += str;
}
}
}
elemOut.value = outStr;
}
}

14
</script>
</body>
</html>

14
Лістинг:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
td, th {
border: 1px solid #37ff43;
text-align: left;
padding: 8px;
}
tr:nth-child(n+13) {
background-color: #8fff37;
color: white;
}
.btn{
background-color: #ff3761;
border-radius: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Січень</td>
<td><input type="number" class="MonthMoney"></td>
</tr>
<tr>
<td>Лютий</td>
</tr>
<tr>
<td>Березень</td>
</tr>
<tr>
<td>Квітень</td>
</tr>
<tr>
<td>Травень</td>
</tr>
<tr>
<td>Червень</td>
</tr>
<tr>
<td>Липень</td>
</tr>
<tr>

14
<td>Серпень</td>
</tr>
<tr>
<td>Вересень</td>
</tr>
<tr>
<td>Жовтень</td>
</tr>
<tr>
<td>Листопад</td>
</tr>
<tr>
<td>Грудень</td>
</tr>
<tr>
<td>Сума</td>
<td id="sum"></td>
</tr>
<tr>
<td>Середнє</td>
<td id="av"></td>
</tr>
<tr>
<td>Мінімальне</td>
<td id="min"></td>
</tr>
<tr>
<td>Максимальне</td>
<td id="max"></td>
</tr>
</table>
<br><button class = "btn" onclick="Calculation()">Обчислити</button>
<script>
function Calculation() {
var allEl = document.getElementsByClassName("MonthMoney");
var month = [];
for(var i = 0; i < allEl.length; i++)
{
month.push(Number(allEl[i].value));
}
var sum = 0;
for(var i = 0; i < month.length; i++)
{
sum += month[i];
}
var average = sum/12;
var min = minf(month);
var max = maxf(month);
document.getElementById("sum").innerText = sum.toString();
document.getElementById("av").innerText = average.toString();
document.getElementById("min").innerText = min.toString();
document.getElementById("max").innerText = max.toString();
}
function maxf(arr) {
return Math.max.apply(null, arr);

14
}
function minf(arr) {
return Math.min.apply(null, arr);
}
</script>
</body>
</html>

14
Лістинг:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
td{
width: 50px;
height: 50px;
background-color: green;
border: 2px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>

14
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>

14
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
var arr = document.getElementsByTagName("td");
for(var i = 0; i < arr.length; i++)
{
arr[i].onmousedown = change;
}
function change() {
var elem = this;
var color = elem.style.backgroundColor;
if(color == "red")
{
elem.style.backgroundColor = "green";
}
else
{
elem.style.backgroundColor = "red";
}
}
</script>
</body>
</html>
Лістинг:

14
<!DOCTYPE html>
<html lang="en">
<head>
<style>
button{
width: 120px;
height: 40px;
background: #f3f0f1;
margin-bottom: 25px;
border-radius: 32px;
font: 20px Bahnschrift;
position: absolute;
transition: all 0.2s ease;
}
</style>
</head>
<body>
<button id="but">КНОПКА</button>
<script>
var posLeft, posTop, posmaxTop, posmaxLeft, elem;
elem = document.getElementById("but");
posmaxLeft = document.documentElement.clientWidth-elem.offsetWidth;
posmaxTop = document.documentElement.clientHeight-elem.offsetHeight;
elem.onmousemove = click;
function click() {
posLeft = Math.random() * posmaxLeft;
elem.style.left = posLeft + "px";
posTop=Math.random() * posmaxTop;
elem.style.top = posTop + "px";
}
</script>
</body>
</html>
Лістинг:
<!doctype html>
<html>
<head>
<link rel="task8" href="style.css">
</head>
<body>
<p>Это - Бутч. И он потерял часы своего отца... Пожалуйста, верните их владельцу, просто
перетащив элемент вот <span style="color: red">сюда:</span></p>
<textarea name="textarea" id="txt" cols="100" rows="20"></textarea>
<img src="../img/бутч.jpg" id="gate" class="droppable" style="width: 300px;">

14
<img src="../img/золотые%20часы.jpg" id="ball" style="width: 100px; height: 100px; align-
items: center;">
<script>
let currentDroppable = null;
ball.onmousedown = function(event) // (1) отследить нажатие
{
// (2) подготовить к перемещению:
// разместить поверх остального содержимого и в абсолютных координатах
let shiftX = event.clientX - ball.getBoundingClientRect().left;
let shiftY = event.clientY - ball.getBoundingClientRect().top;
ball.style.position = 'absolute';
ball.style.zIndex = 1000;
document.body.append(ball);
moveAt(event.pageX, event.pageY);
function moveAt(pageX, pageY) {
ball.style.left = pageX - shiftX + 'px';
ball.style.top = pageY - shiftY + 'px';
}
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
ball.hidden = true;
let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
ball.hidden = false;
if (!elemBelow) return;
let droppableBelow = elemBelow.closest('.droppable');

if (currentDroppable != droppableBelow) {
if (currentDroppable) { // null если мы были не над droppable до этого
события
// (например, над пустым пространством)
leaveDroppable(currentDroppable);
}
currentDroppable = droppableBelow;
if (currentDroppable) { // null если мы не над droppable сейчас, во время
этого события
// (например, только что покинули droppable)
enterDroppable(currentDroppable);
}
}
}
document.addEventListener('mousemove', onMouseMove);
ball.onmouseup = function() {
document.removeEventListener('mousemove', onMouseMove);
ball.onmouseup = null;
};
};
function enterDroppable(elem) {
elem.style.background = 'pink';
}
function leaveDroppable(elem) {
elem.style.background = '';
}
ball.ondragstart = function() {
return false;
};
</script>
</body>
</html>

14
14

Лабораторна робота №5

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Лабораторна робота №5

Uploaded by

Copyright:

Available Formats

ЛАБОРАТОРНА РОБОТА № 5

Тема: JavaScript. DOM

ДУ «Житомирська політехніка».20.121.07.000 – Лр5

Полоневич Д.В Арк.

Полоневич Д.В Арк.

Полоневич Д.В Арк.

Полоневич Д.В Арк.

Полоневич Д.В Арк.

Полоневич Д.В Арк.

Полоневич Д.В Арк.

Полоневич Д.В Арк.

Полоневич Д.В Арк.

Полоневич Д.В Арк.

Полоневич Д.В Арк.

<img src="../img/бутч.jpg" id="gate" class="droppable" style="width: 300px;">

Полоневич Д.В Арк.

let droppableBelow = elemBelow.closest('.droppable');

Полоневич Д.В Арк.

You might also like