Compare commits
5 Commits
cca7d57569
...
lectures-w
| Author | SHA1 | Date | |
|---|---|---|---|
| df21df0fff | |||
| d10f15a34a | |||
| f982d05a54 | |||
| b6776f93fd | |||
| e6806a2366 |
@@ -1,3 +1,8 @@
|
||||
div > a > img{
|
||||
width: 10vw;
|
||||
}
|
||||
|
||||
div > a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -4,5 +4,5 @@ div > a > img{
|
||||
}
|
||||
div > a {
|
||||
min-width: 170px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
2
lectures/lec5/p1/task1.js
Normal file
2
lectures/lec5/p1/task1.js
Normal file
@@ -0,0 +1,2 @@
|
||||
alert("Hello, world!");
|
||||
document.write("Hello, world!");
|
||||
6
lectures/lec5/p1/task2.js
Normal file
6
lectures/lec5/p1/task2.js
Normal file
@@ -0,0 +1,6 @@
|
||||
let _name = "Алина";
|
||||
let email = "alina@test.ru";
|
||||
|
||||
let message = `Доброго времени суток, ${_name}! Мы отправили Вам приглашение на почту ${email}.`;
|
||||
|
||||
document.write(`<h3>${message}</h3>`);
|
||||
8
lectures/lec5/p1/task3.js
Normal file
8
lectures/lec5/p1/task3.js
Normal file
@@ -0,0 +1,8 @@
|
||||
let p = prompt("Введите значение переменной p:");
|
||||
|
||||
if (isNaN(parseFloat(p)) || !isFinite(Number(p))) {
|
||||
alert("Ошибка: введено не число.");
|
||||
} else {
|
||||
p = Number(p) + 1;
|
||||
alert(`Увеличенное значение переменной p: ${p}`);
|
||||
}
|
||||
1
lectures/lec5/p1/task4.js
Normal file
1
lectures/lec5/p1/task4.js
Normal file
@@ -0,0 +1 @@
|
||||
let result = n > 0 ? 1 / n : n < 0 ? 1 / n ** 2 : 0;
|
||||
10
lectures/lec5/p1/task5.js
Normal file
10
lectures/lec5/p1/task5.js
Normal file
@@ -0,0 +1,10 @@
|
||||
let n = 81;
|
||||
let i = 1;
|
||||
|
||||
let out = "<select>";
|
||||
for (let i = 1; i ** 2 <= n; i+=2) {
|
||||
out += `<option>${i**2}</option>`
|
||||
}
|
||||
out += "</select>";
|
||||
|
||||
document.write(out);
|
||||
11
lectures/lec5/p1/task6.js
Normal file
11
lectures/lec5/p1/task6.js
Normal file
@@ -0,0 +1,11 @@
|
||||
function sum() {
|
||||
return arguments.reduce((total, num) => total + num, 0);
|
||||
}
|
||||
|
||||
function sum() {
|
||||
let total = 0;
|
||||
for (let i = 0; i < arguments.length; i++) {
|
||||
total += arguments[i];
|
||||
}
|
||||
return total;
|
||||
}
|
||||
13
lectures/lec5/p1/task7.js
Normal file
13
lectures/lec5/p1/task7.js
Normal file
@@ -0,0 +1,13 @@
|
||||
sum = function(...args) {
|
||||
return args.filter(num => num % 2 !== 0).reduce((acc, num) => acc + num, 0);
|
||||
}
|
||||
|
||||
sum = function(...args) {
|
||||
let total = 0;
|
||||
for (let num of args) {
|
||||
if (num % 2 !== 0) {
|
||||
total += num;
|
||||
}
|
||||
}
|
||||
return total;
|
||||
}
|
||||
12
lectures/lec5/p1/task8.js
Normal file
12
lectures/lec5/p1/task8.js
Normal file
@@ -0,0 +1,12 @@
|
||||
sum = (...args) => {
|
||||
return args.filter(num => num % 2 !== 0).reduce((acc, num) => acc + num, 0);
|
||||
}
|
||||
sum = (...args) => {
|
||||
let total = 0;
|
||||
for (let i = 0; i < args.length; i++) {
|
||||
if (args[i] % 2 !== 0) {
|
||||
total += args[i];
|
||||
}
|
||||
}
|
||||
return total;
|
||||
}
|
||||
4
lectures/lec5/p2/task1.js
Normal file
4
lectures/lec5/p2/task1.js
Normal file
@@ -0,0 +1,4 @@
|
||||
function sumNumbers(str){
|
||||
str=str.split(" ");
|
||||
return str.filter(substr => !isNaN(parseFloat(substr)) && isFinite(Number(substr))).reduce((acc,num) => acc+num,0);
|
||||
}
|
||||
46
lectures/lec5/p2/task2.js
Normal file
46
lectures/lec5/p2/task2.js
Normal file
@@ -0,0 +1,46 @@
|
||||
function extractText(html){
|
||||
return html.split("<p>")
|
||||
.filter(substr => substr
|
||||
.includes("</p>"))
|
||||
.map((substr) => substr.split("</p>")[0]);
|
||||
}
|
||||
|
||||
let html = `<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>task 1</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h3><i>Возможности HTML</i></h3>
|
||||
<hr width='30%' align=left>
|
||||
<ol>
|
||||
<li> Выделение текста:
|
||||
<ul type=circle>
|
||||
<li>жирным;</li>
|
||||
<li>курсивным;</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Характеристика шрифта.</li>
|
||||
<li><a href=#>Вставка рисунков. </a></li>
|
||||
<li> Оформление текста:
|
||||
<ul type=circle>
|
||||
<li>заголовки; </li>
|
||||
<li>абзацы;</li>
|
||||
<li>списки.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<hr align=left width=30%>
|
||||
<p>Средствами HTML осуществляется переход на другие страницы сети Интернет.</p>
|
||||
<p>Средствами HTML осуществляется переход на другие страницы сети Интернет.</p>
|
||||
<p>123.</p>
|
||||
</body>
|
||||
|
||||
</html>`
|
||||
|
||||
console.log(extractText(html))
|
||||
|
||||
8
lectures/lec5/p2/task3.js
Normal file
8
lectures/lec5/p2/task3.js
Normal file
@@ -0,0 +1,8 @@
|
||||
let arr = [12, 17, 12, 67, 23, 67, 8, 8, 9, 12, 8];
|
||||
|
||||
let newArr = arr.filter(function (item, index) {
|
||||
return arr.indexOf(item) === index;
|
||||
});
|
||||
|
||||
alert(newArr);
|
||||
//12,17,67,23,8,9
|
||||
8
lectures/lec5/p2/task4.js
Normal file
8
lectures/lec5/p2/task4.js
Normal file
@@ -0,0 +1,8 @@
|
||||
function sortNumbers(str){
|
||||
str=str.split(" ");
|
||||
return str.filter(substr => !isNaN(parseFloat(substr)) && isFinite(Number(substr))).map(Number).sort((a,b) => {return Number(a)-Number(b)});
|
||||
}
|
||||
|
||||
alert(sortNumbers(" 12 234 67 aboba 123 123 83 27 6"))
|
||||
|
||||
|
||||
10
lectures/lec5/p3/task1.js
Normal file
10
lectures/lec5/p3/task1.js
Normal file
@@ -0,0 +1,10 @@
|
||||
let items = {
|
||||
'ручка': 20,
|
||||
'альбом': "a16",
|
||||
'тетрадь': 10
|
||||
};
|
||||
|
||||
let entries = Object.entries(items);
|
||||
items=Object.fromEntries(entries.filter(entry =>!isNaN(parseFloat(entry[1]) && isFinite(Number(entry[1])))))
|
||||
|
||||
console.log(items);
|
||||
17
lectures/lec5/p3/task2.js
Normal file
17
lectures/lec5/p3/task2.js
Normal file
@@ -0,0 +1,17 @@
|
||||
|
||||
function updateObject(oldObject, newObject) {
|
||||
const [newKey, newValue] = Object.entries(newObject)[0];
|
||||
if (newKey in oldObject) {
|
||||
oldObject[newKey] += newValue;
|
||||
} else {
|
||||
oldObject[newKey] = newValue;
|
||||
}
|
||||
return oldObject;
|
||||
}
|
||||
|
||||
|
||||
const oldObject = { 1: 10, 2: 20, 3: 30 };
|
||||
const newObject = { 2: 15 };
|
||||
|
||||
const updatedObject = updateObject(oldObject, newObject);
|
||||
console.log(updatedObject);
|
||||
15
lectures/lec5/p3/task3.js
Normal file
15
lectures/lec5/p3/task3.js
Normal file
@@ -0,0 +1,15 @@
|
||||
let objGoods = {
|
||||
"ручка": [100, 50.60],
|
||||
"карандаш": [120, 30.00],
|
||||
"тетрадь": [200, 10.50]
|
||||
};
|
||||
|
||||
outArr = [];
|
||||
Object.entries(objGoods).forEach((entry) => {
|
||||
let name = entry[0];
|
||||
entry[1].forEach(price => {
|
||||
outArr.push({ "name": name, amount: price })
|
||||
})
|
||||
});
|
||||
|
||||
console.log(outArr);
|
||||
11
lectures/lec5/p3/task4.js
Normal file
11
lectures/lec5/p3/task4.js
Normal file
@@ -0,0 +1,11 @@
|
||||
let items = {
|
||||
'ручка': 20,
|
||||
'альбом': 16,
|
||||
'тетрадь': 10
|
||||
};
|
||||
|
||||
let entries = Object.entries(items);
|
||||
entries.sort((a,b) => Number(a[1])-Number(b[1]));
|
||||
items=Object.fromEntries(entries)
|
||||
|
||||
console.log(items);
|
||||
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');
|
||||
});
|
||||
});
|
||||
@@ -1,57 +0,0 @@
|
||||
|
||||
|
||||
|
||||
|
||||
- var tag = 'h'
|
||||
- var i = 1
|
||||
|
||||
#{tag+i} Уровень #{i}
|
||||
- i++
|
||||
#{tag+i} Уровень #{i}
|
||||
- i++
|
||||
#{tag+i} Уровень #{i}
|
||||
- i++
|
||||
#{tag+i} Уровень #{i}
|
||||
|
||||
|
||||
|
||||
|
||||
- var products ={"Товар":"Цена","ручка":30.5, "карандаш":50, "альбом":156, "тетрадь":21.5, "ластик":10.2}
|
||||
table
|
||||
each name,price in products
|
||||
tr
|
||||
td #{name}
|
||||
td #{price}
|
||||
|
||||
|
||||
|
||||
table
|
||||
- for(var i=0;i<10;i++)
|
||||
tr
|
||||
- for(var j=0;j<10;j++)
|
||||
- if((i + j) % 2 == 0)
|
||||
td.white
|
||||
- else
|
||||
td.black
|
||||
|
||||
|
||||
|
||||
mixin createList(listType, items, tag)
|
||||
- var dispListType = "ul"
|
||||
- if (listType == "ol")
|
||||
- dispListType = "ol"
|
||||
|
||||
#{dispListType}.list
|
||||
each item in items
|
||||
li
|
||||
#{tag} #{item}
|
||||
|
||||
// Вызов миксина
|
||||
+createList('ul', ['Python', 'JavaScript', 'Java'], 'strong')
|
||||
|
||||
|
||||
size=1%
|
||||
section
|
||||
box-shadow: size size (2*size) rgba(0,0,0,0.5)
|
||||
padding:size*2
|
||||
margin:size*4
|
||||
@@ -1,10 +1,9 @@
|
||||
#Сборник конспектов лекций
|
||||
## 0 История интернета и начало HTML
|
||||
в лекции описано происхождение интернета и arpanet к томук, что мы знаем
|
||||
так-же расказано про браузерные войны и про победу Chrome, WEB1.0 - WEB3.0
|
||||
В лекции подробно описано происхождение интернета, начиная от проекта ARPANET и его эволюции к современной всемирной сети, которую мы знаем сегодня. Также рассказано про знаменитые браузерные войны между различными компаниями и про окончательную победу Chrome в борьбе за доминирование на рынке браузеров. Лекция охватывает развитие веб-технологий от WEB1.0 (статичные страницы) через WEB2.0 (интерактивные социальные сети) до современного WEB3.0 (децентрализованные технологии и блокчейн).
|
||||
|
||||
## 1 HTML
|
||||
Синтаксис, правила оформления, информация по существующим тегам для html4( я не уверен), не мало было сказано про формы и лейблы привязанные к инпутам
|
||||
Лекция посвящена изучению основ языка разметки HTML, включая синтаксис, правила оформления кода и подробную информацию по существующим тегам стандарта HTML4. Особое внимание уделено работе с формами, правильному использованию лейблов и их привязке к элементам ввода (инпутам) для обеспечения доступности и удобства использования веб-страниц.
|
||||
задачи:
|
||||
1. исправить код
|
||||
2. написать свой продублировав страничку с картинки
|
||||
@@ -27,7 +26,7 @@ id > class >tag
|
||||
5. добавить меню на скопированную страницу
|
||||
|
||||
### p2
|
||||
В другом документе и этого же раздела фокус сделан на селекторе и псевдоклассах (:nth-child) и псевдоэлемтах (::first-line)
|
||||
Во второй части раздела основной фокус сделан на изучении различных типов селекторов CSS, включая сложные псевдоклассы типа :nth-child, :hover, :focus и другие. Также подробно рассматриваются псевдоэлементы (::first-line, ::before, ::after), которые позволяют стилизовать части элементов без добавления дополнительной разметки в HTML.
|
||||
|
||||
задачи:
|
||||
1. практика на селекторы, выбор элемента из кода
|
||||
@@ -35,7 +34,7 @@ id > class >tag
|
||||
3. практика на селекторы, выбор элемента из кода
|
||||
|
||||
### p3
|
||||
В третем документе рассказыается про динамическую вёрстку, vw vh vmin vmax и про атрибуты min\max-width\height. так-же затрагиваются медиа запросы
|
||||
В третьей части подробно рассказывается про адаптивную и динамическую вёрстку, включая использование viewport-единиц измерения: vw (viewport width), vh (viewport height), vmin и vmax для создания отзывчивых макетов. Также изучаются ограничивающие свойства min/max-width и min/max-height, а также основы работы с медиа-запросами для создания адаптивного дизайна под разные устройства и размеры экрана.
|
||||
|
||||
|
||||
задачи:
|
||||
@@ -44,7 +43,8 @@ id > class >tag
|
||||
3. медиазапрос
|
||||
|
||||
### p4
|
||||
В четвёртом модуле рассказыватется про flex и его исопльзование, атрибуты выравнивание внутри контейнера и внутри элементов контейнеров, перенос\запрет преноса и тд, а ну и про gap тоже разумеется row-gap , column-gap
|
||||
### p4 - Flexbox
|
||||
В четвёртом модуле рассказыватется про flex и его использование, атрибуты выравнивания внутри контейнера и внутри элементов контейнеров, перенос\запрет переноса и т.д., а ну и про gap тоже разумеется row-gap, column-gap. Также затрагиваются такие свойства, как flex-grow, flex-shrink и flex-basis, которые определяют, как элементы растягиваются, сжимаются или занимают пространство в контейнере. Рассматриваются различные значения для justify-content, align-items и align-self. Так-же упоминается order, позволяющий изменять порядок элементов в контейнере.
|
||||
|
||||
задачи:
|
||||
1. осознать что когда запрет на wrap то wrap очевидно запрещается
|
||||
@@ -52,8 +52,8 @@ id > class >tag
|
||||
3. то-же что и 2 но с другим min-width в атрибуте у одного из элементов
|
||||
|
||||
### p5
|
||||
Информация про гриды, начиная про определение и общие атрибуты
|
||||
рассказывается про еденицы размеров ячейки (fr) про repeat и про min-max, и заканчивается обзор формированием зон в таблицах и установкой позиций элементов вне зависимости от положения тэга в дереве
|
||||
Пятая часть посвящена изучению CSS Grid Layout - мощной системы двумерного макетирования, начиная с основных определений, свойств контейнера и общих атрибутов грид-системы. Подробно рассказывается про специальные единицы размеров fr (fractional unit), функции repeat() и minmax() для создания гибких сеток, а завершается изучение темой grid-areas - формированием именованных зон в таблицах и размещением элементов в произвольных позициях независимо от их расположения в HTML-дереве.
|
||||
|
||||
|
||||
## 3 Bootstrap
|
||||
Определение фреймворка, примеры того как им пользоваиться
|
||||
@@ -67,10 +67,10 @@ id > class >tag
|
||||
2. применение разных дисплеев
|
||||
3. задача на align и чекпоинты
|
||||
|
||||
## 3 Препроцессоры
|
||||
## 4 Препроцессоры
|
||||
|
||||
### p1 - Методологии вёрстки
|
||||
Лекция в основном про БЭМ (блок__элемент--модификатор), про принцип называния блоков по смыслу того что они делают. Кроме этого обозреваются другие методолгии (SMACSS\ECSS)
|
||||
Лекция посвящена изучению методологии БЭМ (Блок__Элемент--Модификатор) - популярного подхода к именованию CSS-классов, основанного на принципе называния блоков по смыслу и функциональности, которую они выполняют. Кроме БЭМ также рассматриваются альтернативные методологии организации CSS-кода, такие как SMACSS (Scalable and Modular Architecture for CSS) и ECSS (Enduring CSS), каждая из которых предлагает свой подход к структурированию и масштабированию стилей.
|
||||
|
||||
задачи:
|
||||
1. задача на вёрстку по БЭМ ( похоже тут старая версия, расходится с тем, что я писал на лекции, то что писал и показывал на лекции было утеряно в одной из веток гита ... )
|
||||
@@ -94,9 +94,66 @@ id > class >tag
|
||||
Упомянуто несолкьо препроцессоров, фокус на stylus.
|
||||
в целом содержание лекции видно в задачах
|
||||
хотя в заданиях не затрагивался момент с возвращением значениев из миксинов, но всё равно инетересно
|
||||
так-же оказалось что пробелы при написании операторов вычислений обязательны, это меня удивило конечно
|
||||
задачи:
|
||||
1. переменные
|
||||
2. вложенность
|
||||
3. опять вложенность и на осознание принципов компиляции и частичных ссылок
|
||||
4. миксины и вложенность
|
||||
5. миксины и выисление
|
||||
|
||||
## 5 JavaScript
|
||||
|
||||
### p1 - операторы языка
|
||||
Введение в основы JavaScript, синтаксис языка, базовые операторы и конструкции. Рассматриваются способы вывода информации (alert, document.write), работа с переменными и типами данных, шаблонные строки, условные операторы, циклы и функции. Особое внимание уделяется тернарному оператору, различным способам объявления функций (function declaration, function expression, arrow functions) и работе с аргументами функций.
|
||||
|
||||
задачи:
|
||||
1. вывод с помощью alert и document.write
|
||||
2. работа с переменными и шаблонными строками
|
||||
3. условные операторы и проверка чисел
|
||||
4. тернарный оператор
|
||||
5. циклы for и создание HTML-элементов
|
||||
6. объявление функций и работа с arguments
|
||||
7. function expression
|
||||
8. arrow functions
|
||||
|
||||
### p2 - структуры данных
|
||||
Лекция посвящена изучению работы с основными структурами данных в JavaScript - массивами и строками, включая освоение функциональных методов обработки массивов. Подробно рассматриваются методы высшего порядка: filter() для фильтрации элементов, map() для преобразования данных, reduce() для агрегации значений, sort() для сортировки, а также различные методы работы со строками для парсинга и обработки текстовой информации.
|
||||
|
||||
|
||||
задачи:
|
||||
1. извлечение и сумма чисел из строки
|
||||
2. извлечение текста из HTML-тегов
|
||||
3. на понимание работы оператора filter
|
||||
4. фильтрация, преобразование и сортировка чисел из строки
|
||||
|
||||
### p3 - объекты
|
||||
Лекция охватывает комплексную работу с объектами в JavaScript, включая различные способы их создания, модификации структуры и обработки содержащихся в них данных. Изучаются методы перебора свойств объектов (for...in, Object.keys(), Object.values(), Object.entries()), техники фильтрации и сортировки данных внутри объектов, а также операции с вложенными структурами и преобразование объектов.
|
||||
|
||||
задачи:
|
||||
1. фильтрация свойств объекта по типу значений
|
||||
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-классов для изображений при наведении мыши
|
||||
|
||||
@@ -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