lectures done
This commit is contained in:
7
lectures/lec6/part1/part4.js
Normal file
7
lectures/lec6/part1/part4.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
document.getElementsByName("img").forEach((elem) => {
|
||||||
|
if (elem.hasAttribute("width") && elem.hasAttribute("height")) {
|
||||||
|
elem.removeAttribute("width");
|
||||||
|
elem.removeAttribute("height");
|
||||||
|
}
|
||||||
|
elem.classList.add("pict");
|
||||||
|
})
|
||||||
6
lectures/lec6/part1/task1.js
Normal file
6
lectures/lec6/part1/task1.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
let elemList = document.getElementsByTagName("*")
|
||||||
|
elemList.forEach(element => {
|
||||||
|
if(element.children.length==3){
|
||||||
|
console.log(element)
|
||||||
|
}
|
||||||
|
});
|
||||||
5
lectures/lec6/part1/task2.js
Normal file
5
lectures/lec6/part1/task2.js
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
let elemList = document.getElementsByTagName("ol");
|
||||||
|
|
||||||
|
elemList.forEach(olElem => {
|
||||||
|
olElem.children.forEach(child =>{child.display = "none";})
|
||||||
|
});
|
||||||
7
lectures/lec6/part1/task3.js
Normal file
7
lectures/lec6/part1/task3.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
document.getElementsByName("*").forEach((elem) => {
|
||||||
|
for (attr in ["align", "width", "height"]) {
|
||||||
|
if (elem.hasAttribute(attr)) {
|
||||||
|
elem.removeAttribute(attr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
11
lectures/lec6/part1/task5.js
Normal file
11
lectures/lec6/part1/task5.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
|
||||||
|
const paragraphs = ['C++', 'C#', 'JavaScript'];
|
||||||
|
const textDiv = document.getElementById('text');
|
||||||
|
|
||||||
|
let elemLink = textDiv.firstElementChild;
|
||||||
|
paragraphs.forEach(paragraph => {
|
||||||
|
const p = document.createElement('p');
|
||||||
|
p.innerHTML = paragraph;
|
||||||
|
textDiv.insertBefore(p, elemLink);
|
||||||
|
elemLink = elemLink.nextElementSibling;
|
||||||
|
});
|
||||||
4
lectures/lec6/part1/task6.js
Normal file
4
lectures/lec6/part1/task6.js
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
const menu = document.getElementById('menu');
|
||||||
|
while (menu.firstChild) {
|
||||||
|
menu.removeChild(menu.firstChild);
|
||||||
|
}
|
||||||
3
lectures/lec6/part2/task1.txt
Normal file
3
lectures/lec6/part2/task1.txt
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
1. юзер нажимает мышь в поле с объектами -> onmousedown
|
||||||
|
2. мышь движется куда-то зачем-то -> onmousemove
|
||||||
|
3. пользователь отпускает мышь -> onmouseup
|
||||||
10
lectures/lec6/part2/task2.txt
Normal file
10
lectures/lec6/part2/task2.txt
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
Последовательность событий, происходящих при вводе значения в текстовое поле:
|
||||||
|
1. focus текстовое поле получает фокус
|
||||||
|
--- следующие повторяются
|
||||||
|
2. onpaste ктрл в прожато
|
||||||
|
3. keydown пользователь нажимает клавишу на клавиатуре.
|
||||||
|
4. input значение текстового поля изменяется (например, при вводе символа).
|
||||||
|
5. keyup пользователь отпускает клавишу.
|
||||||
|
--- следующие не повторяются
|
||||||
|
6. change пользователь завершает ввод и текстовое поле теряет фокус, если значение было изменено.
|
||||||
|
7. blur текстовое поле теряет фокус (например, пользователь кликает вне текстового поля).
|
||||||
11
lectures/lec6/part2/task3.js
Normal file
11
lectures/lec6/part2/task3.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
document.getElementById('aboba').addEventListener('mouseover', function() {
|
||||||
|
const parent = this.parentElement;
|
||||||
|
parent.style.paddingTop = `${parseFloat(window.getComputedStyle(parent).paddingTop) * 1.1}px`;
|
||||||
|
parent.style.paddingBottom = `${parseFloat(window.getComputedStyle(parent).paddingBottom) * 1.1}px`;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('aboba').addEventListener('mouseout', function() {
|
||||||
|
const parent = this.parentElement;
|
||||||
|
parent.style.paddingTop = `${parseFloat(window.getComputedStyle(parent).paddingTop) / 1.1}px`;
|
||||||
|
parent.style.paddingBottom = `${parseFloat(window.getComputedStyle(parent).paddingBottom) / 1.1}px`;
|
||||||
|
});
|
||||||
9
lectures/lec6/part2/task4.js
Normal file
9
lectures/lec6/part2/task4.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
document.querySelectorAll('img').forEach(function(img) {
|
||||||
|
img.addEventListener('mouseover', function() {
|
||||||
|
this.classList.add('border');
|
||||||
|
});
|
||||||
|
|
||||||
|
img.addEventListener('mouseout', function() {
|
||||||
|
this.classList.remove('border');
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -137,3 +137,25 @@ id > class >tag
|
|||||||
2. обновление объекта с добавлением или увеличением значений
|
2. обновление объекта с добавлением или увеличением значений
|
||||||
3. unford вложенныз свойств
|
3. unford вложенныз свойств
|
||||||
4. сортировка объекта по значениям свойств
|
4. сортировка объекта по значениям свойств
|
||||||
|
|
||||||
|
## 6 JS (DOM, Events)
|
||||||
|
|
||||||
|
### p1 - DOM
|
||||||
|
В лекции описано взаимодействие с древом документа, методы поиска элементов (getElementsByTagName, getElementsByName, getElementById), работа с атрибутами элементов (hasAttribute, removeAttribute), манипуляция с классами (classList.add), создание и вставка новых элементов (createElement, insertBefore), удаление элементов (removeChild), навигация по DOM-дереву (children, firstElementChild, nextElementSibling).
|
||||||
|
|
||||||
|
задачи:
|
||||||
|
1. поиск элементов с определенным количеством дочерних элементов
|
||||||
|
2. скрытие элементов списка через изменение display
|
||||||
|
3. удаление устаревших атрибутов (align, width, height) у всех элементов
|
||||||
|
4. удаление размерных атрибутов у изображений и добавление CSS-класса
|
||||||
|
5. динамическое создание и вставка параграфов в документ
|
||||||
|
6. полная очистка содержимого элемента через removeChild
|
||||||
|
|
||||||
|
### p2 - Events
|
||||||
|
Изучение системы событий в JavaScript, последовательность срабатывания событий мыши и клавиатуры, работа с обработчиками событий через addEventListener. Рассматриваются события мыши (mousedown, mousemove, mouseup, mouseover, mouseout), события ввода текста (focus, keydown, input, keyup, change, blur, paste), динамическое изменение стилей элементов при взаимодействии пользователя.
|
||||||
|
|
||||||
|
задачи:
|
||||||
|
1. описание последовательности событий мыши
|
||||||
|
2. описание последовательности событий при вводе текста
|
||||||
|
3. изменение размеров родительского элемента при наведении/убирании мыши
|
||||||
|
4. добавление/удаление CSS-классов для изображений при наведении мыши
|
||||||
|
|||||||
@@ -1,17 +0,0 @@
|
|||||||
|
|
||||||
|
|
||||||
function updateDict(dict, update) {
|
|
||||||
let key, value = update.entries()[0];
|
|
||||||
dict[key] = value + (key in dict) ? dict[key] : 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
aboba={"asd":123}
|
|
||||||
upd={"asd":123}
|
|
||||||
upd1={"asd":123}
|
|
||||||
|
|
||||||
updateDict(aboba,upd1)
|
|
||||||
console.log(aboba)
|
|
||||||
updateDict(aboba,upd1)
|
|
||||||
console.log(aboba)
|
|
||||||
Reference in New Issue
Block a user