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

Тема: Робота з Document Object Model. Обробка подій

Мета роботи: вивчити засоби по роботі з об’єктною моделлю документа;
навчитися додавати, змінювати та видаляти елементи веб-сторінки; засвоїти
принципи роботи з CSS-стилями.
Хід роботи:

Завдання 1: Створити код, який за величиною температури за шкалою

Фаренгейта обчислює величину температури в градусах Цельсія і навпаки. Веб-
сторінка має два текстових поля:

· температура за Фаренгейтом

· температура за Цельсієм

які містять відповідні числа.

Лістинг:
JS:
var inputCel = document.getElementById("Cels");
var inputFar = document.getElementById("Far");;
inputFar.oninput = function () {
inputCel.value = 1.8 * (inputFar.value-32);
}
Зм Арк № докум. Підп Дат
ЖДТУ.18.121.10.000 –
н. . Любченк ис
inputCel.oninput
а ЛР5Літ.
= function () Арк.
{
Поліщук inputFar.value = inputCel.value*1.8
Аркушів
Розроб о Д.В 1 4 + 32
Переві
Н.
.Керівн
В. В. } Звіт з ФІКТ Гр. ПІ-
р.
контр. Мороз лабораторної
ик
Затверд ов А.В. 55
ив роботи №5
HTML:
<table>
<tr>
<td>Температура за Фаренгейтом:</td>
<td><input type="text" id = "Far"></td>
</tr>
<tr>
<td>Температура за Цельсієм:</td>
<td><input type="text" id = "Cels"></td>
</tr>
</table>
 Результат виконання програми:

Завдання 2: Написати код, який перевіряє знання таблиці множення. Веб-

сторінка містить текстовий напис для показу загального рахунку, кнопку
«наступне завдання», текстовий напис для показу завдання, текстове поле для
вводу відповіді, кнопку «перевірити» та текстовий напис для виводу результатів
перевірки.

Завдання повинні генеруватися випадковим чином.

Лістинг:

JS:
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
var firstM = document.getElementById("firstM");
var secondM = document.getElementById("secondM");
var Любченк
trying = 0 , numb; Ар
var оПоліщук
arr=[];
Д.В.
Зм Ар В.В. №
ЖДТУ.18.121.10.000 к.
Підп Да 4
н. firstM.innerHTML
к. докум. – ЛР5 9);
ис та = getRandomInt(1, 2
secondM.innerHTML = getRandomInt(1, 9);

function NextTask() {
trying++;

if(trying!=10) {
firstM.innerHTML = getRandomInt(1, 9);
secondM.innerHTML = getRandomInt(1, 9);
this.document.getElementById("answer").disabled = 0;
document.getElementById("check").disabled = 0;
document.getElementById("answer").value = null;
document.getElementById("helpViraz").innerHTML = "";
}
else {
document.getElementById("NextAnsw").disabled = 1;
document.getElementById("helpViraz").innerHTML = "Ви пройшли тест";
}
}
function checkIfTrue() {
if (parseInt(firstM.innerHTML * secondM.innerHTML) ==
parseInt(document.getElementById("answer").value)) {
document.getElementById("trueAns").innerHTML++;
document.getElementById("trueAnsPer").innerHTML =
parseInt(document.getElementById("trueAns").innerHTML) * 10;
document.getElementById("answer").disabled = 1;
 document.getElementById("check").disabled = 1;
document.getElementById("NextAnsw").click();
}
else {
document.getElementById("answer").disabled = 1;
document.getElementById("check").disabled = 1;
document.getElementById("helpViraz").innerHTML = "<b style='color:
red'>Помилка!</b> Правильна відповідь: " + parseInt(firstM.innerHTML *
secondM.innerHTML);
}
}

HTML:
<div class="Task2">
<p>Загальний рахунок <span id="trueAnsPer">0</span> % ( <span
id="trueAns">0</span> правильних відповідей із 10 )</p>
<button id="NextAnsw" onclick="NextTask()">Наступне завдання</button>
<div class="viraz" style=" margin-top: 20px;"><span id = "firstM"></span>
x <span id = "secondM"></span> = <input type="text" id = "answer" >
<button id="check" onclick="checkIfTrue()">Перевірити</button></div>
<span id = "helpViraz"></span>
</div>

Результат виконання програми:

Любченк Ар
оПоліщук
Д.В.
Зм Ар В.В. №
ЖДТУ.18.121.10.000 к.4
Підп Да
н. к. докум. ис та – ЛР5 2
Завдання 3 : Написати код, який перевіряє знання таблиці множення як і в
завданні 2, але для вибору правильної відповіді використайте радіокнопки. Вибір
варіанту відповіді є сигналом до початку перевірки. Для кожного завдання
користувач має лише одна спробу вибору.

Лістинг:

JS:
var radFirst = document.getElementById("firstM2");
var radSecond = document.getElementById("secondM2");
var trying2 = 0, numb;
var arr=[];

window.onload = NextTask2;
radFirst.innerHTML = getRandomInt(1, 9);
radSecond.innerHTML = getRandomInt(1, 9);
 function NextTask2() {
trying2++;

if(trying2!=11) {
for(var i = 0; i<4; i++)
inp[i].disabled =0;
radFirst.innerHTML = getRandomInt(1, 9);
radSecond.innerHTML = getRandomInt(1, 9);
document.getElementById("helpViraz2").innerHTML = "";
}
else {
for(var i = 0; i<4; i++)
inp[i].disabled =1;
document.getElementById("NextAnsw2").disabled = 1;
document.getElementById("helpViraz2").innerHTML = "Ви пройшли тест";

}
for(var i = 0; i<4; i++){
numb = getRandomInt((parseInt(radFirst.innerHTML * radSecond.innerHTML)
- getRandomInt(0,9)),(parseInt(radFirst.innerHTML * radSecond.innerHTML )+
getRandomInt(2,9)) );
if(numb != parseInt(radFirst.innerHTML * radSecond.innerHTML))
arr[i] = numb;
else
i--;
}
arr[getRandomInt(0,4)] = parseInt(radFirst.innerHTML * radSecond.innerHTML);
console.log(arr);
document.getElementById("radText1").innerHTML = arr[0];
document.getElementById("radioAnswer1").value =
document.getElementById("radText1").innerHTML;
document.getElementById("radText2").innerHTML = arr[1];
document.getElementById("radioAnswer2").value =
document.getElementById("radText2").innerHTML;
document.getElementById("radText3").innerHTML = arr[2];
document.getElementById("radioAnswer3").value =
Любченк Ар
оПоліщук
Д.В.
Зм Ар В.В. № Підп Да
ЖДТУ.18.121.10.000 к.4
document.getElementById("radText3").innerHTML;
document.getElementById("radText4").innerHTML = arr[3];
докум. ис та – ЛР5
н. к. document.getElementById("radioAnswer4").value 2 =
document.getElementById("radText4").innerHTML;
}
var inp = document.getElementsByName('radioAnsw');
for (var i = 0; i < inp.length; i++) {
inp[i].onchange = function () {
if (parseInt(radFirst.innerHTML * radSecond.innerHTML) ==
this.value) {
document.getElementById("trueAns2").innerHTML++;
document.getElementById("trueAnsPer2").innerHTML =
parseInt(document.getElementById("trueAns2").innerHTML) * 10;
document.getElementById("NextAnsw2").click();
this.checked = 0;
}
else {
this.checked = 0;
console.log(this.value);
document.getElementById("helpViraz2").innerHTML = "<b
style='color: red'>Помилка!</b> Правильна відповідь: " +
parseInt(radFirst.innerHTML * radSecond.innerHTML);
for(var i = 0; i<4; i++)
inp[i].disabled =1;
}
};
}
 HTML:
<div class="Task3">
<p>Загальний рахунок <span id="trueAnsPer2">0</span> % ( <span
id="trueAns2">0</span> правильних відповідей із 10 )</p>
<button id="NextAnsw2" onclick="NextTask2()">Наступне завдання</button>
<div class="viraz" style=" margin-top: 20px;"><span id = "firstM2"></span> x
<span id = "secondM2"></span> =
<ul style=" list-style-type: none">
<li><input type="radio" name = "radioAnsw" id="radioAnswer1"
value=""> <span id = "radText1"></span></li>
<li><input type="radio" name = "radioAnsw" id="radioAnswer2"
value=""> <span id = "radText2"></span></li>
<li><input type="radio" name = "radioAnsw" id="radioAnswer3"
value=""> <span id = "radText3"></span></li>
<li><input type="radio" name = "radioAnsw" id="radioAnswer4"
value=""> <span id = "radText4"></span></li>
<span id = "helpViraz2"></span>
</ul>
</div>
</div>

Результат виконання програми:

Любченк Ар
оПоліщук
Д.В.
Зм Ар В.В. № Підп Да
ЖДТУ.18.121.10.000 к.4
н. к. докум. ис та – ЛР5 2

Завдання 4: Створити код для перелистування зображень. Інформація про

зображення зберігається у масиві об’єкті

Лістинг:
JS:
var imagesArray = [{
path: 'images/001.jpg',
title: 'ЖДТУ, ауд. 108',
description: 'Викладацька аудиторія'
},
{
path: 'images/002.jpg',
title: 'ЖДТУ, ауд. 103-а',
description: 'Лабораторія для студентів'
},
{
 path: 'images/003.jpg',
title: 'ЖДТУ, ауд. 103-a',
description: 'Лабораторія для студентів'
}];
var rotator;
var curentIndex = 0;
var table;

function initPhotoRotator(divRotator, imageArr) {

table = document.createElement('table');
var tr = document.createElement('tr');
var td = document.createElement('td');
var td2 = document.createElement('td');
var img = document.createElement('img');
img.setAttribute('src',imagesArray[0].path);
img.style.width = '500px';
img.style.height = '300px';
table.style.border = '2px solid black';
table.style.borderCollapse = 'collapse';
td.style.border = '2px solid black';
td2.style.border = '2px solid black';
table.style.width = '500px';
table.style.height = '400px';
divRotator.appendChild(table);
table.appendChild(tr);
tr.appendChild(td);
tr.appendChild(td.cloneNode(false));
tr.appendChild(td.cloneNode(false));
table.appendChild(tr.cloneNode(false));
table.appendChild(tr.cloneNode(false));
tr.firstChild.setAttribute('rowspan', 3);
tr.lastChild.setAttribute('rowspan', 3);
tr.firstChild.innerHTML = "Назад";
tr.lastChild.innerHTML = "<a href='#' onclick='inc(table)'>Вперед</a>";
tr.firstChild.innerHTML = "<a href='#' onclick='dec(table)'>Назад</a>";
console.log(curentIndex);
Любченк Ар
оПоліщук
Д.В.
Зм Ар В.В. № Підп Да
ЖДТУ.18.121.10.000 к.4
table.children[1].appendChild(td2);
table.children[2].appendChild(td2.cloneNode(false));
– ЛР5 2
н. к. table.children[1].firstChild.appendChild(img);
докум. ис та
table.children[2].firstChild.style.textAlign = 'center';
table.children[0].children[1].style.textAlign = 'center';

function inc(table) {
curentIndex++;
if(curentIndex>=2)
table.firstChild.lastChild.firstChild.style. visibility = 'hidden';
else
table.firstChild.firstChild.firstChild.style. visibility = 'visible';

table.children[1].firstChild.firstChild.setAttribute('src',imagesArray[curentInd
ex].path);
table.children[2].firstChild.innerHTML = '<b>' +
imagesArray[curentIndex].title + '</b>';
table.children[2].firstChild.innerHTML += '<br>'+
imagesArray[curentIndex].description;
table.children[0].children[1].innerHTML = "Фотографія " + (curentIndex+1) +
" із 3";
console.log(curentIndex);
}
function dec(table) {
curentIndex--;
if(curentIndex<=0)
 table.firstChild.firstChild.firstChild.style. visibility = 'hidden';
else
table.firstChild.lastChild.firstChild.style. visibility = 'visible';

table.children[1].firstChild.firstChild.setAttribute('src',imagesArray[curentInd
ex].path);
table.children[2].firstChild.innerHTML = '<b>' +
imagesArray[curentIndex].title + '</b>';
table.children[2].firstChild.innerHTML += '<br>'+
imagesArray[curentIndex].description;
table.children[0].children[1].innerHTML = "Фотографія " + (curentIndex+1) +
" із 3";
console.log(curentIndex);
}

window.onload = function () {
rotator = document.getElementById('rotator');
initPhotoRotator(rotator, imagesArray);
table.children[0].children[1].innerHTML = "Фотографія " + 1 + " із 3";
table.children[2].firstChild.innerHTML = '<b>' +
imagesArray[curentIndex].title + '</b>';
table.children[2].firstChild.innerHTML += '<br>'+
imagesArray[curentIndex].description;

};

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Roatator</title>
<script src="lab05.js"></script>
</head>
Любченк Ар
<body>
Зм <div
оПоліщук
Д.В.
Ар В.В.id
№ = Підп Да
ЖДТУ.18.121.10.000 к.4
"rotator">
н. </div>
к. докум. ис та – ЛР5 2
<script>

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

Результат виконання програми:

 Завдання 5: Напишіть код для реалізації captcha. Алгоритм роботи капчі
наступний:

- на вхід функції ініціалізації капчі передається ціле число – кількість цифр у

капці;

- випадковим чином генерується відповідна кількість цифр;

- число відображається у вигляді «набору пікселів» (span-блоки);

- користувач вводить число у текстове поле;

- відбувається перевірка правильності введення числа і відображається відповідне

повідомлення;
Любченк Ар
оПоліщук
Д.В.
Зм Ар В.В. № Підп Да
ЖДТУ.18.121.10.000 к.4
н. Лістинг:
к. докум. ис та – ЛР5 2
JS:
var row = document.createElement('div');
row.className = 'row';
var pixel = document.createElement('span');
pixel.className = 'pixel';
var znach = []
var d = [[[1, 1, 1, 0],
[1, 0, 1, 0],
[1, 0, 1, 0],
[1, 0, 1, 0],
[1, 1, 1, 0]],
[
[0, 1, 0, 0],
[1, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0],
[1, 1, 1, 0]],
[
[1, 1, 1, 0],
[0, 0, 1, 0],
[1, 1, 0, 0],
[1, 0, 0, 0],
[1, 1, 1, 0]],
[
 [1, 1, 1, 0],
[0, 0, 1, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[1, 1, 1, 0]],
[
[1, 0, 1, 0],
[1, 0, 1, 0],
[1, 1, 1, 0],
[0, 0, 1, 0],
[0, 0, 1, 0]],
[
[1, 1, 1, 0],
[1, 0, 0, 0],
[1, 1, 1, 0],
[0, 0, 1, 0],
[1, 1, 1, 0]],
[
[1, 1, 1, 0],
[1, 0, 0, 0],
[1, 1, 1, 0],
[1, 0, 1, 0],
[1, 1, 1, 0]],
[
[1, 1, 1, 0],
[0, 0, 1, 0],
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0]],
[
[1, 1, 1, 0],
[1, 0, 1, 0],
[1, 1, 1, 0],
[1, 0, 1, 0],
[1, 1, 1, 0]],
[
Любченк Ар
оПоліщук
Д.В. [1, 1,ЖДТУ.18.121.10.000
1, 0], к.
Зм Ар В.В. № Підп Да 0, 1, 0],
[1, 4
н. к. докум. та 1, 1, 0], – ЛР5
ис[1, 2
[0, 0, 1, 0],
[1, 1, 1, 0]]];

var rows = [];

for (let i = 0; i < 5; i++) {
rows[i] = row.cloneNode(false);
}

function PrintResult() {
for (let i = 0; i < rows.length; i++) {
document.getElementById('captcha').appendChild(rows[i]);
}
}

function createNum(k) {
var rStart;
if (document.getElementById('captcha').childElementCount != 0)
rStart = document.getElementById('captcha').children[0];
var start = 0;
if (rStart) {
start = rStart.childElementCount;
}

for (let i = start; i < start + 5; i++) {

 for (let j = 0; j < 4; j++) {
var p = pixel.cloneNode(false)
if (d[k][i][j] == 1) {
p.classList.add('red');
}
rows[i].appendChild(p);
}
}

document.getElementById('inputNum').onchange = function (event) {

var enterNum = document.getElementById('inputNum').value;
enterNum = enterNum.split('');
if(znach.length != enterNum.length)
{
document.getElementById('res').innerHTML = "Помилка";
document.getElementById('res').style.color = 'red';
return;
}
for(let i = 0; i<znach.length; i++){
if(znach[i]!=enterNum[i])
{
document.getElementById('res').innerHTML = "Помилка";
document.getElementById('res').style.color = 'red';
return;
}
}
document.getElementById('res').innerHTML = "Вірно";
document.getElementById('res').style.color = 'green';
}

window.onload = function () {
var maxIndex = Math.floor(Math.random() * 4 + 2);
for (let i = 0; i < maxIndex; i++) {
Любченкlet n = Math.floor(Math.random() * 10);
Ар
оПоліщук
Зм Ар В.В. № znach[i]
ЖДТУ.18.121.10.000 к.4
Д.В. createNum(n);
Підп Да = String(n);
н. к. } докум. ис та – ЛР5 2
PrintResult();
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Captcha</title>
<script src="lab051.js" async></script>
<style>
#captcha{
border: 1px solid gray;
margin-bottom: 7px;
display: table;
}
.pixel{
height: 7px;
width: 7px;
display: table-cell;

background-color: white;
margin: 0px;
padding: 0px;
 }
.row{
display: table-row;
}
.red{
background-color: red;
}
</style>
</head>
<body>
<p>Введіть число:</p>
<div id= 'captcha'></div>
<input type="text" id = "inputNum">

<p id = 'res'></p>

</body>
</html>
Результат виконання програми:

Висновок: в ході виконання практичної роботи вивчив засоби по роботі з

об’єктною
Любченк
моделлю документа, навчився Ардодавати, змінювати та видаляти
оПоліщук
Д.В.
Зм елементи
ЖДТУ.18.121.10.000 к.4
Ар В.В. № веб-сторінки
Підп Да та засвоїв принципи роботи з CSS-стилями.
н. к. докум. ис та – ЛР5 2