From f982d05a54242015916f0575997e50f1239677e3 Mon Sep 17 00:00:00 2001 From: OkunElya Date: Sat, 3 Jan 2026 15:32:33 +1000 Subject: [PATCH] lectures done --- lectures/lec6/part1/part4.js | 7 +++++++ lectures/lec6/part1/task1.js | 6 ++++++ lectures/lec6/part1/task2.js | 5 +++++ lectures/lec6/part1/task3.js | 7 +++++++ lectures/lec6/part1/task5.js | 11 +++++++++++ lectures/lec6/part1/task6.js | 4 ++++ lectures/lec6/part2/task1.txt | 3 +++ lectures/lec6/part2/task2.txt | 10 ++++++++++ lectures/lec6/part2/task3.js | 11 +++++++++++ lectures/lec6/part2/task4.js | 9 +++++++++ lectures/readme.md | 22 ++++++++++++++++++++++ lectures/temp.js | 17 ----------------- 12 files changed, 95 insertions(+), 17 deletions(-) create mode 100644 lectures/lec6/part1/part4.js create mode 100644 lectures/lec6/part1/task1.js create mode 100644 lectures/lec6/part1/task2.js create mode 100644 lectures/lec6/part1/task3.js create mode 100644 lectures/lec6/part1/task5.js create mode 100644 lectures/lec6/part1/task6.js create mode 100644 lectures/lec6/part2/task1.txt create mode 100644 lectures/lec6/part2/task2.txt create mode 100644 lectures/lec6/part2/task3.js create mode 100644 lectures/lec6/part2/task4.js delete mode 100644 lectures/temp.js diff --git a/lectures/lec6/part1/part4.js b/lectures/lec6/part1/part4.js new file mode 100644 index 0000000..eedd75c --- /dev/null +++ b/lectures/lec6/part1/part4.js @@ -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"); +}) \ No newline at end of file diff --git a/lectures/lec6/part1/task1.js b/lectures/lec6/part1/task1.js new file mode 100644 index 0000000..a94f6a3 --- /dev/null +++ b/lectures/lec6/part1/task1.js @@ -0,0 +1,6 @@ +let elemList = document.getElementsByTagName("*") +elemList.forEach(element => { + if(element.children.length==3){ + console.log(element) + } +}); \ No newline at end of file diff --git a/lectures/lec6/part1/task2.js b/lectures/lec6/part1/task2.js new file mode 100644 index 0000000..9bd1f6e --- /dev/null +++ b/lectures/lec6/part1/task2.js @@ -0,0 +1,5 @@ +let elemList = document.getElementsByTagName("ol"); + +elemList.forEach(olElem => { + olElem.children.forEach(child =>{child.display = "none";}) +}); \ No newline at end of file diff --git a/lectures/lec6/part1/task3.js b/lectures/lec6/part1/task3.js new file mode 100644 index 0000000..cf367bb --- /dev/null +++ b/lectures/lec6/part1/task3.js @@ -0,0 +1,7 @@ +document.getElementsByName("*").forEach((elem) => { + for (attr in ["align", "width", "height"]) { + if (elem.hasAttribute(attr)) { + elem.removeAttribute(attr); + } + } +}) \ No newline at end of file diff --git a/lectures/lec6/part1/task5.js b/lectures/lec6/part1/task5.js new file mode 100644 index 0000000..c905aa4 --- /dev/null +++ b/lectures/lec6/part1/task5.js @@ -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; +}); \ No newline at end of file diff --git a/lectures/lec6/part1/task6.js b/lectures/lec6/part1/task6.js new file mode 100644 index 0000000..bb9ba9c --- /dev/null +++ b/lectures/lec6/part1/task6.js @@ -0,0 +1,4 @@ +const menu = document.getElementById('menu'); +while (menu.firstChild) { + menu.removeChild(menu.firstChild); +} \ No newline at end of file diff --git a/lectures/lec6/part2/task1.txt b/lectures/lec6/part2/task1.txt new file mode 100644 index 0000000..9f0ec6d --- /dev/null +++ b/lectures/lec6/part2/task1.txt @@ -0,0 +1,3 @@ +1. юзер нажимает мышь в поле с объектами -> onmousedown +2. мышь движется куда-то зачем-то -> onmousemove +3. пользователь отпускает мышь -> onmouseup \ No newline at end of file diff --git a/lectures/lec6/part2/task2.txt b/lectures/lec6/part2/task2.txt new file mode 100644 index 0000000..03b8293 --- /dev/null +++ b/lectures/lec6/part2/task2.txt @@ -0,0 +1,10 @@ +Последовательность событий, происходящих при вводе значения в текстовое поле: +1. focus текстовое поле получает фокус +--- следующие повторяются +2. onpaste ктрл в прожато +3. keydown пользователь нажимает клавишу на клавиатуре. +4. input значение текстового поля изменяется (например, при вводе символа). +5. keyup пользователь отпускает клавишу. +--- следующие не повторяются +6. change пользователь завершает ввод и текстовое поле теряет фокус, если значение было изменено. +7. blur текстовое поле теряет фокус (например, пользователь кликает вне текстового поля). \ No newline at end of file diff --git a/lectures/lec6/part2/task3.js b/lectures/lec6/part2/task3.js new file mode 100644 index 0000000..2439ad2 --- /dev/null +++ b/lectures/lec6/part2/task3.js @@ -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`; +}); \ No newline at end of file diff --git a/lectures/lec6/part2/task4.js b/lectures/lec6/part2/task4.js new file mode 100644 index 0000000..ec08e59 --- /dev/null +++ b/lectures/lec6/part2/task4.js @@ -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'); + }); +}); diff --git a/lectures/readme.md b/lectures/readme.md index 185e075..53ede54 100644 --- a/lectures/readme.md +++ b/lectures/readme.md @@ -137,3 +137,25 @@ id > class >tag 2. обновление объекта с добавлением или увеличением значений 3. unford вложенныз свойств 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-классов для изображений при наведении мыши diff --git a/lectures/temp.js b/lectures/temp.js deleted file mode 100644 index 5e93c8a..0000000 --- a/lectures/temp.js +++ /dev/null @@ -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)