JavaScript. Робота з dom



Download 1,27 Mb.
Sana13.01.2023
Hajmi1,27 Mb.
#899228
TuriЛабораторна робота
Bog'liq
Лабораторна робота №6





ЛАБОРАТОРНА РОБОТА № 6
Тема: JavaScript. Робота з DOM
Мета роботи: вивчити засоби по роботі з об’єктною моделлю документа; навчитися додавати, змінювати та видаляти елементи веб-сторінки; засвоїти принципи роботи з CSS-стилями
Завдання на лабораторну роботу
Завдання №1

JS:
var arr = document.getElementsByTagName("img");
for(var i = 0; i < arr.length; i++)
{
arr[i].onmousedown = change;
}
function change(){
var elem = this;
var color = elem.style.filter;
if(color == "grayscale(0%)") {
elem.style.filter = "grayscale(100%)";
elem.style.opacity = "100%";
} else {
elem.style.filter = "grayscale(0%)";
elem.style.opacity = "100%";
}
}

Результат виконання:



Завдання №2

JS:
var arr = document.getElementsByClassName("Field");
var input = document.getElementsByClassName("Text");
for(var i = 0; i < arr.length; i++)
{
arr[i].onmouseover = arr[i].onmouseout = change;
}
function change() {
let elem = this;
if(elem.style.backgroundColor != "cornflowerblue") {
elem.style.backgroundColor = "cornflowerblue";
} else {
elem.style.backgroundColor = "white";
}
}

Результат виконання:



Завдання №3

JS:
document.querySelector('#test').onmousemove = function (event)
{
document.querySelector('#offx').innerHTML = event.offsetX;
document.querySelector('#offy').innerHTML = event.offsetY;
}

Результат виконання:



Завдання №4

JS:
let block1 = document.getElementById('block1');
let block2 = document.getElementById('block2');

let toRight = document.getElementById('toRight');


let toLeft = document.getElementById('toLeft');

let arr1 = new Array(6);


for(let i = 0; i < 6; i++) {
arr1[i] = document.querySelectorAll('#block1 label')[i];
}
let arr2= new Array(6);

toRight.addEventListener('click', function ()


{
for(let i = 0; i < arr1.length; i++) {
if (arr1[i] === undefined) {
continue;
}
arr2[i] = undefined;
if (arr1[i].children[0].checked) {
arr1[i].children[0].checked = false;
arr2[i] = arr1[i];
block1.removeChild(arr1[i]);
arr1[i] = undefined;
}
}
let childs = document.querySelectorAll('#block2 label');
let block2 = document.getElementById('block2');
for(let i = 0; i < childs.length; i++)
block2.removeChild(childs[i]);
for(let i = 0; i < arr2.length; i++) {
if(arr2[i] === undefined)
continue;
block2.appendChild(arr2[i]);
}
});

toLeft.addEventListener('click', function ()
{
for(let i = 0; i < arr2.length; i++) {
if (arr2[i] === undefined) {
continue;
}
arr1[i] = undefined;
if (arr2[i].children[0].checked) {
arr2[i].children[0].checked = false;
arr1[i] = arr2[i];
block2.removeChild(arr2[i]);
arr2[i] = undefined;
}
}
let childs = document.querySelectorAll('#block1 label');

for(let i = 0; i < childs.length; i++)


block1.removeChild(childs[i]);

for(let i = 0; i < arr1.length; i++) {


if(arr1[i] === undefined)
continue;
block1.appendChild(arr1[i]);
}
});

Результат виконання:



Download 1,27 Mb.

Do'stlaringiz bilan baham:




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©hozir.org 2024
ma'muriyatiga murojaat qiling

kiriting | ro'yxatdan o'tish
    Bosh sahifa
юртда тантана
Боғда битган
Бугун юртда
Эшитганлар жилманглар
Эшитмадим деманглар
битган бодомлар
Yangiariq tumani
qitish marakazi
Raqamli texnologiyalar
ilishida muhokamadan
tasdiqqa tavsiya
tavsiya etilgan
iqtisodiyot kafedrasi
steiermarkischen landesregierung
asarlaringizni yuboring
o'zingizning asarlaringizni
Iltimos faqat
faqat o'zingizning
steierm rkischen
landesregierung fachabteilung
rkischen landesregierung
hamshira loyihasi
loyihasi mavsum
faolyatining oqibatlari
asosiy adabiyotlar
fakulteti ahborot
ahborot havfsizligi
havfsizligi kafedrasi
fanidan bo’yicha
fakulteti iqtisodiyot
boshqaruv fakulteti
chiqarishda boshqaruv
ishlab chiqarishda
iqtisodiyot fakultet
multiservis tarmoqlari
fanidan asosiy
Uzbek fanidan
mavzulari potok
asosidagi multiservis
'aliyyil a'ziym
billahil 'aliyyil
illaa billahil
quvvata illaa
falah' deganida
Kompyuter savodxonligi
bo’yicha mustaqil
'alal falah'
Hayya 'alal
'alas soloh
Hayya 'alas
mavsum boyicha


yuklab olish