WEB Lab7

Горбань Ю. В., ст. гр.
КІ-18
Лабораторна робота №7
Тема: «JavaScript DOM»
Мета роботи: отримати навички створення сценаріїв на основі використання
об’єктної моделі документа.
1. Створити калькулятор який виконує найпростіші операції
<body>
<div class="calc">
<div class="display"><form><input id="input" type="text" readonly></form></div>
<button class="clear" id="clear">C</button>
<button class="back" id="back">←</button>
<button class="num">7</button>
<button class="opp">+</button>
<button class="opp">-</button>
<button class="opp">*</button>
<button class="equal" id="equal">=</button>
<button class="num" id="zero">0</button>
<button class="num">.</button>
<button class="opp">/</button>
</div>
<script src="script.js"></script>
</body>
Скрипт:
let input = document.getElementById('input').value;
let clearButton = document.getElementById('clear');
let equalButton = document.getElementById('equal');
let backButton = document.getElementById('back');
let numberButtons = document.querySelectorAll('.num');
let oppButtons = document.querySelectorAll('.opp');
let display = document.getElementById('input');
numberButtons.forEach(button => {
button.addEventListener('click', () => {
display.value += button.innerText;
})
})
oppButtons.forEach(button => {
button.addEventListener('click', () => {
display.value += button.innerText;
Горбань Ю. В., ст. гр. КІ-18
})
})
clearButton.addEventListener('click', () => {
display.value = "";
})
backButton.addEventListener('click', () => {
display.value = display.value.toString().slice(0, -1);
})
equalButton.addEventListener('click', () => {
display.value = eval(display.value);
})
Рисунок 7.1 – Калькулятор
2. Створити гру «Бики та корови»

<body>
<div>
<input id="userInput">
<button id="try">Try</button>
<p>Attempts left: <span id="attempts">10</span></p>
</div>
</body>
Скрипт:
let btnTry = document.getElementById('try');
function getNumberArr(){
let number = new Array();

while(number.length < 4){
let i = Math.floor(Math.random()*10);
if(number.indexOf(i) < 0){
number.push(i);
}
}
return number;
}
function convertToNumArr(userNum){
let userArr = new Array();
for(let i = 0; i < 4; i++){
let userArrElem = parseInt(userNum.substring(i, i+1));
userArr.push(userArrElem);
}
return userArr;
}
function compareArrays(array1, array2){
let bulls = 0;
let cows = 0;
let attempts = parseInt(document.getElementById('attempts').innerHTML);
for(let i = 0; i < 4; i++){

if(array1[i] == array2[i])
bulls++;
else
if(array2.includes(array1[i]))
cows++;
}
attempts--;
document.getElementById('attempts').innerHTML = attempts;
if(attempts == 0 && bulls != 4){
document.location.reload(true);
alert('You loose\n' + array2);
}
if(bulls == 4){
document.location.reload(true);
alert('Victory!!!');
}
writeAttempt(array1, bulls, cows);
console.log(bulls);
console.log(cows);
}
function writeAttempt(array, bulls, cows){

let newAttempt = document.createElement('p');
newAttempt.innerHTML = array + ' bulls: ' + bulls + ' cows: ' + cows;
document.body.appendChild(newAttempt);
}
let guessArray = getNumberArr();

btnTry.addEventListener('click', () => {
let userNum = document.getElementById('userInput').value;
let userArray = convertToNumArr(userNum);
console.log(userArray);
console.log(guessArray);
compareArrays(userArray, guessArray);
})
Рисунок 7.2 – «Бики та корови»
3. Видалити всі елементи <div> які містять більше 3 абзаців
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="script.js" defer></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-
QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="crossorigin="anonymous">
</script>
</head>
<body>
<div>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
<div>
<p>1</p>
<p>2</p>
</div>
<div>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
<div>
<p>1</p>
<p>2</p>
</div>
<div>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
</div>
</body>
</html>
Скрипт:
let count = $('body').children('div').length;
for(let i = 0; i < count; i++){
if(($('div').eq(i).children('p').length) >= 3){
$('div').eq(i).remove();
i--;
count--;
}
}
Висновок: в ході лабораторної роботи було отримано навички створення

сценаріїв на основі використання об’єктної моделі документа, виконано
завдання лабораторної роботи.

WEB Lab7

Uploaded by

Document Information

Original Title

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

WEB Lab7

Uploaded by

Copyright:

Available Formats

Горбань Ю. В., ст. гр.

1. Створити калькулятор який виконує найпростіші операції

Рисунок 7.1 – Калькулятор

2. Створити гру «Бики та корови»

let number = new Array();

function compareArrays(array1, array2){

for(let i = 0; i < 4; i++){

function writeAttempt(array, bulls, cows){

let guessArray = getNumberArr();

Рисунок 7.2 – «Бики та корови»

3. Видалити всі елементи <div> які містять більше 3 абзаців

Висновок: в ході лабораторної роботи було отримано навички створення

You might also like