From 78189498637411233488e1ead8522c1daf11af98 Mon Sep 17 00:00:00 2001 From: OkunElya Date: Thu, 1 Jan 2026 18:08:32 +1000 Subject: [PATCH 1/9] lec 1 added --- lectures/lec1/task1.html | 34 ++++++++++++++++++++++++ lectures/lec1/task2.html | 57 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 91 insertions(+) create mode 100644 lectures/lec1/task1.html create mode 100644 lectures/lec1/task2.html diff --git a/lectures/lec1/task1.html b/lectures/lec1/task1.html new file mode 100644 index 0000000..3917c83 --- /dev/null +++ b/lectures/lec1/task1.html @@ -0,0 +1,34 @@ + + + + + + task 1 + + + + +

Возможности HTML

+
+
    +
  1. Выделение текста: +
      +
    • жирным;
      • +
    • курсивным;
      • +
    +
    2. +
  2. Характеристика шрифта.
    3. +
  3. Вставка рисунков.
    4. +
  4. Оформление текста: +
      +
    • заголовки;
      • +
    • абзацы;
      • +
    • списки.
      • +
    +
    5. +
+
+

Средствами HTML осуществляется переход на другие страницы сети Интернет.

+ + + \ No newline at end of file diff --git a/lectures/lec1/task2.html b/lectures/lec1/task2.html new file mode 100644 index 0000000..a0f4fe5 --- /dev/null +++ b/lectures/lec1/task2.html @@ -0,0 +1,57 @@ + + + + + + Пройдите тест + + + +

Пройдите тест

+
+
    +
  1. + Что будет выведено в окно браузера после выполнения оператора:
    + document.write("<strong>a<sub>i</sub> = 2<sup>i</sup></strong>") +

    + +
    + +
    + +
    + + +
    2. +
    +
  2. + Отметьте верные названия переменных:
    + +
    + +
    + +
    + +
    + + +
    3. +
    +
  3. + Какое значение получит переменная result после выполнения следующих операторов:
    + + let a = 7;
    + let b = 4;
    + let result = a % 3 + b % 2; +     +
    + Ответ: +
    4. +
+ + +
+ + + \ No newline at end of file From b00d7fb34dafb1b8a82e554d1407e79637ca2f6a Mon Sep 17 00:00:00 2001 From: OkunElya Date: Thu, 1 Jan 2026 20:05:31 +1000 Subject: [PATCH 2/9] added readme for lectures lec2 done --- lectures/lec2/task1.css | 26 ++++++++++++ lectures/lec2/task2.html | 33 ++++++++++++++++ lectures/lec2/task3.html | 28 +++++++++++++ lectures/lec2/task4-5.html | 81 ++++++++++++++++++++++++++++++++++++++ lectures/readme.md | 25 ++++++++++++ 5 files changed, 193 insertions(+) create mode 100644 lectures/lec2/task1.css create mode 100644 lectures/lec2/task2.html create mode 100644 lectures/lec2/task3.html create mode 100644 lectures/lec2/task4-5.html create mode 100644 lectures/readme.md diff --git a/lectures/lec2/task1.css b/lectures/lec2/task1.css new file mode 100644 index 0000000..e1b075f --- /dev/null +++ b/lectures/lec2/task1.css @@ -0,0 +1,26 @@ +.menuItem { + text-align: center; +} + +#menu ul { + padding-left: 0; + margin: .5%; +} + +#menu li { + display: inline-block; + width: 16%; + background: #F00; +} + +#menu a { + text-decoration: none; + color: white; +} + +.pict { + width: 70%; + background: rgba(0, 255, 0, .5); + margin: 5px auto; + padding: 5px 0; +} \ No newline at end of file diff --git a/lectures/lec2/task2.html b/lectures/lec2/task2.html new file mode 100644 index 0000000..30830e7 --- /dev/null +++ b/lectures/lec2/task2.html @@ -0,0 +1,33 @@ + + + + + + Задание 2 + + + + +

+ Основы HTML +

+

+ Оглавление +

+ + + \ No newline at end of file diff --git a/lectures/lec2/task3.html b/lectures/lec2/task3.html new file mode 100644 index 0000000..fd08bc7 --- /dev/null +++ b/lectures/lec2/task3.html @@ -0,0 +1,28 @@ + + + + + Задание 3 + + + +

Каскадность CSS:

+ + + \ No newline at end of file diff --git a/lectures/lec2/task4-5.html b/lectures/lec2/task4-5.html new file mode 100644 index 0000000..074b38f --- /dev/null +++ b/lectures/lec2/task4-5.html @@ -0,0 +1,81 @@ + + + + + + Task 4 + + + + +
+
меню1
+
меню2
+
меню3
+
меню4
+
+
+
рисунок 1
+
рисунок 2
+
+
+
+
часть 1.1
+
часть 1.2
+
часть 1.3
+
часть 1.4
+
+
часть 2
+
+ + + \ No newline at end of file diff --git a/lectures/readme.md b/lectures/readme.md new file mode 100644 index 0000000..5ee7336 --- /dev/null +++ b/lectures/readme.md @@ -0,0 +1,25 @@ +#Сборник конспектов лекций +## 0 История интернета и начало HTML +в лекции описано происхождение интернета и arpanet к томук, что мы знаем +так-же расказано про браузерные войны и про победу Chrome, WEB1.0 - WEB3.0 + +## 1 HTML +Синтаксис, правила оформления, информация по существующим тегам для html4( я не уверен), не мало было сказано про формы +задачи: +1. исправить код +2. написать свой продублировав страничку с картинки + +## 2 CSS +Описание синтаксиса, правил форматирования, процесс применения селекторов, приоретизация стилей +id > class >tag +блочное\строчное\блочно-строчное отображение элемента +элемент и его padding border margin +обобщённые свойства (border background margin font ) +какие атрибуты применимы на блочные, а какие на строчные +задачи: +1. отформатировать код css +2. отчистить код от атрибутов внутри тегов +3. применить теги на код в нужном порядке +4. скопировать страницу +5. добавить меню на скопированную страницу + From 1c50d7ce0e83a850e4f696c7a96b5c69e732bc78 Mon Sep 17 00:00:00 2001 From: OkunElya Date: Thu, 1 Jan 2026 23:38:59 +1000 Subject: [PATCH 3/9] finished up to bootstrap --- lectures/lec2/{ => part1}/task1.css | 0 lectures/lec2/{ => part1}/task2.html | 0 lectures/lec2/{ => part1}/task3.html | 0 lectures/lec2/{ => part1}/task4-5.html | 0 lectures/lec2/part2/task1.css | 23 +++++++++++++ lectures/lec2/part2/task2.css | 24 +++++++++++++ lectures/lec2/part2/task3.css | 24 +++++++++++++ lectures/lec2/part3/task1.css | 3 ++ lectures/lec2/part3/task2.css | 8 +++++ lectures/lec2/part3/task3.css | 26 ++++++++++++++ lectures/lec2/part4/task1.html | 24 +++++++++++++ lectures/lec2/part4/task2.html | 38 +++++++++++++++++++++ lectures/lec2/part4/task3.html | 46 +++++++++++++++++++++++++ lectures/lec3/task1.html | 34 +++++++++++++++++++ lectures/lec3/task2.html | 38 +++++++++++++++++++++ lectures/lec3/task3.html | 44 ++++++++++++++++++++++++ lectures/readme.md | 47 +++++++++++++++++++++++++- 17 files changed, 378 insertions(+), 1 deletion(-) rename lectures/lec2/{ => part1}/task1.css (100%) rename lectures/lec2/{ => part1}/task2.html (100%) rename lectures/lec2/{ => part1}/task3.html (100%) rename lectures/lec2/{ => part1}/task4-5.html (100%) create mode 100644 lectures/lec2/part2/task1.css create mode 100644 lectures/lec2/part2/task2.css create mode 100644 lectures/lec2/part2/task3.css create mode 100644 lectures/lec2/part3/task1.css create mode 100644 lectures/lec2/part3/task2.css create mode 100644 lectures/lec2/part3/task3.css create mode 100644 lectures/lec2/part4/task1.html create mode 100644 lectures/lec2/part4/task2.html create mode 100644 lectures/lec2/part4/task3.html create mode 100644 lectures/lec3/task1.html create mode 100644 lectures/lec3/task2.html create mode 100644 lectures/lec3/task3.html diff --git a/lectures/lec2/task1.css b/lectures/lec2/part1/task1.css similarity index 100% rename from lectures/lec2/task1.css rename to lectures/lec2/part1/task1.css diff --git a/lectures/lec2/task2.html b/lectures/lec2/part1/task2.html similarity index 100% rename from lectures/lec2/task2.html rename to lectures/lec2/part1/task2.html diff --git a/lectures/lec2/task3.html b/lectures/lec2/part1/task3.html similarity index 100% rename from lectures/lec2/task3.html rename to lectures/lec2/part1/task3.html diff --git a/lectures/lec2/task4-5.html b/lectures/lec2/part1/task4-5.html similarity index 100% rename from lectures/lec2/task4-5.html rename to lectures/lec2/part1/task4-5.html diff --git a/lectures/lec2/part2/task1.css b/lectures/lec2/part2/task1.css new file mode 100644 index 0000000..0646e14 --- /dev/null +++ b/lectures/lec2/part2/task1.css @@ -0,0 +1,23 @@ +.main > p:last-child{ + color:green; +} + +/* +
+
    +
  1. Комбинация селекторов
    2. +
  2. Селекторы атрибутов
    3. +
+

CSS селекторы

+
+
+

Комбинация селекторов

+ +

Различают следующие виды селекторов:

+
    +
  1. вложенный селектор;
    2. +
  2. родительский селектор;
    3. +
+

Соединение селекторов

--- ВОТ ЕГО КРАСИМ!!! +
+*/ \ No newline at end of file diff --git a/lectures/lec2/part2/task2.css b/lectures/lec2/part2/task2.css new file mode 100644 index 0000000..7656e0c --- /dev/null +++ b/lectures/lec2/part2/task2.css @@ -0,0 +1,24 @@ +.main li > [href="#"] { + color:green +} + + +/* +
+ +

CSS селекторы

+
+
+

Комбинация селекторов

+ +

Различают следующие виды селекторов:

+
    +
  1. вложенный селектор;
    2. +
  2. родительский селектор;
    3. +
+

Соединение селекторов

+
+*/ \ No newline at end of file diff --git a/lectures/lec2/part2/task3.css b/lectures/lec2/part2/task3.css new file mode 100644 index 0000000..9cc2f91 --- /dev/null +++ b/lectures/lec2/part2/task3.css @@ -0,0 +1,24 @@ +h2, ol >li:nth-child(2) , ol + p{ + color: green; +} + + +/* +
+ +
+
+

Комбинация селекторов

--- + +

Различают следующие виды селекторов:

+
    +
  1. вложенный селектор;
    2. +
  2. родительский селектор;
    3. --- +
  3. соседний селектор
    4. +
+

Соединение селекторов

--- +
+*/ \ No newline at end of file diff --git a/lectures/lec2/part3/task1.css b/lectures/lec2/part3/task1.css new file mode 100644 index 0000000..4008715 --- /dev/null +++ b/lectures/lec2/part3/task1.css @@ -0,0 +1,3 @@ +div > a > img{ + width: 10vw; +} \ No newline at end of file diff --git a/lectures/lec2/part3/task2.css b/lectures/lec2/part3/task2.css new file mode 100644 index 0000000..afcac1a --- /dev/null +++ b/lectures/lec2/part3/task2.css @@ -0,0 +1,8 @@ +div > a > img{ + width: 10vw; + min-width: 170px; +} +div > a { + min-width: 170px; +} + \ No newline at end of file diff --git a/lectures/lec2/part3/task3.css b/lectures/lec2/part3/task3.css new file mode 100644 index 0000000..fb69571 --- /dev/null +++ b/lectures/lec2/part3/task3.css @@ -0,0 +1,26 @@ +div > a > img{ + width: 10vw; + min-width: 170px; +} +div > a { + min-width: 170px; +} +div { + display: flex; +} +@media (max-width: 600px) { + div { + flex-direction: column; + align-items: center; + } + div > a { + width: 80vw; + max-width: 300px; + min-width: 0; + } + div > a > img { + width: 80vw; + max-width: 300px; + min-width: 0; + } +} \ No newline at end of file diff --git a/lectures/lec2/part4/task1.html b/lectures/lec2/part4/task1.html new file mode 100644 index 0000000..a332c01 --- /dev/null +++ b/lectures/lec2/part4/task1.html @@ -0,0 +1,24 @@ +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
+ + \ No newline at end of file diff --git a/lectures/lec2/part4/task2.html b/lectures/lec2/part4/task2.html new file mode 100644 index 0000000..15defce --- /dev/null +++ b/lectures/lec2/part4/task2.html @@ -0,0 +1,38 @@ + + + +
+
+ + + + + +
+
\ No newline at end of file diff --git a/lectures/lec2/part4/task3.html b/lectures/lec2/part4/task3.html new file mode 100644 index 0000000..ce753d4 --- /dev/null +++ b/lectures/lec2/part4/task3.html @@ -0,0 +1,46 @@ + +
+
+ + + + + +
+
\ No newline at end of file diff --git a/lectures/lec3/task1.html b/lectures/lec3/task1.html new file mode 100644 index 0000000..ca43caf --- /dev/null +++ b/lectures/lec3/task1.html @@ -0,0 +1,34 @@ + + + + + + + Bootstrap Template + + + + + + +
+

aboba

+

aboba

+

aboba

+

aboba

+

aboba

+

aboba

+
+ + + + + \ No newline at end of file diff --git a/lectures/lec3/task2.html b/lectures/lec3/task2.html new file mode 100644 index 0000000..21e5e94 --- /dev/null +++ b/lectures/lec3/task2.html @@ -0,0 +1,38 @@ + + + + + + + Bootstrap Template + + + + + + + +
+
Ворота на запад
+

192-метровая арка в Сент-Луисе (штат Миссури, США)

+ +
+
+
Ворота на запад
+

192-метровая арка в Сент-Луисе (штат Миссури, США)

+ +
+ + + + + \ No newline at end of file diff --git a/lectures/lec3/task3.html b/lectures/lec3/task3.html new file mode 100644 index 0000000..64c3f00 --- /dev/null +++ b/lectures/lec3/task3.html @@ -0,0 +1,44 @@ + + + + + + + Bootstrap Template + + + + + +
+
+
+ Строка 1, столбец 1 +
+
+ Строка 1, столбец 2 +
+
+
+
+ Строка 2, столбец 1 +
+
+ Строка 2, столбец 2 +
+
+ + + + + + \ No newline at end of file diff --git a/lectures/readme.md b/lectures/readme.md index 5ee7336..218ac02 100644 --- a/lectures/readme.md +++ b/lectures/readme.md @@ -4,18 +4,20 @@ так-же расказано про браузерные войны и про победу Chrome, WEB1.0 - WEB3.0 ## 1 HTML -Синтаксис, правила оформления, информация по существующим тегам для html4( я не уверен), не мало было сказано про формы +Синтаксис, правила оформления, информация по существующим тегам для html4( я не уверен), не мало было сказано про формы и лейблы привязанные к инпутам задачи: 1. исправить код 2. написать свой продублировав страничку с картинки ## 2 CSS +### p1 Описание синтаксиса, правил форматирования, процесс применения селекторов, приоретизация стилей id > class >tag блочное\строчное\блочно-строчное отображение элемента элемент и его padding border margin обобщённые свойства (border background margin font ) какие атрибуты применимы на блочные, а какие на строчные + задачи: 1. отформатировать код css 2. отчистить код от атрибутов внутри тегов @@ -23,3 +25,46 @@ id > class >tag 4. скопировать страницу 5. добавить меню на скопированную страницу +### p2 +В другом документе и этого же раздела фокус сделан на селекторе и псевдоклассах (:nth-child) и псевдоэлемтах (::first-line) + +задачи: +1. практика на селекторы, выбор элемента из кода +2. практика на селекторы, выбор элемента из кода +3. практика на селекторы, выбор элемента из кода + +### p3 +В третем документе рассказыается про динамическую вёрстку, vw vh vmin vmax и про атрибуты min\max-width\height. так-же затрагиваются медиа запросы + + +задачи: +1. применить vh +2. ограничение max-width +3. медиазапрос + +### p4 +В четвёртом модуле рассказыватется про flex и его исопльзование, атрибуты выравнивание внутри контейнера и внутри элементов контейнеров, перенос\запрет преноса и тд, а ну и про gap тоже разумеется row-gap , column-gap + +задачи: +1. осознать что когда запрет на wrap то wrap очевидно запрещается +2. изменеие направления flex на медиазапросе, включение отключение переноса +3. то-же что и 2 но с другим min-width в атрибуте у одного из элементов + +### p5 +Информация про гриды, начиная про определение и общие атрибуты +рассказывается про еденицы размеров ячейки (fr) про repeat и про min-max, и заканчивается обзор формированием зон в таблицах и установкой позиций элементов вне зависимости от положения тэга в дереве + + +## 3 Bootstrap +Определение фреймворка, примеры того как им пользоваиться +описание 12 колоночной вёрстки и связанных с ней предварительно готовых классо, концепция контрольныз точек (sm md ls xl xxl). +так-же затронуты контейнеры, они имеют фиксированый max-width который определяется соотв. атрибутом чекпоинта. +так-же немного расказано о внутрянке самого фрейморка (контейнеры построены на flex) и опять-же про аналог алинга айтемов как в гридах или флексе. +В Bootstrap существует три уровня: базовый (контейнеры и сетка), компоненты (кнопки, формы, карточки) и утилиты (классы для быстрого изменения внешнего вида). Так-же описывается создание атомарных классов и можификаторов цветов... + + + +задачи: +1. задача на чекпоинты и их понимание +2. применение разных дисплеев +3. задача на align и чекпоинты From cca7d575695c7c6f0f9016ea6f6907b9267d0b18 Mon Sep 17 00:00:00 2001 From: OkunElya Date: Sat, 3 Jan 2026 01:21:46 +1000 Subject: [PATCH 4/9] lec 3 done --- lectures/lec4/part1/task1.html | 22 ++++++++++++++++++++ lectures/lec4/part2/task1.pug | 10 +++++++++ lectures/lec4/part2/task2.pug | 9 ++++++++ lectures/lec4/part2/task3.pug | 10 +++++++++ lectures/lec4/part2/task4.pug | 6 ++++++ lectures/lec4/part2/task5.pug | 8 +++++++ lectures/lec4/part2/task6.pug | 12 +++++++++++ lectures/lec4/part3/task1.styl | 5 +++++ lectures/lec4/part3/task2.styl | 10 +++++++++ lectures/lec4/part3/task3.css | 19 +++++++++++++++++ lectures/lec4/part3/task4.styl | 7 +++++++ lectures/lec4/part3/task5.styl | 8 +++++++ lectures/lecture3.txt | 12 ----------- lectures/readme.md | 38 +++++++++++++++++++++++++++++++--- 14 files changed, 161 insertions(+), 15 deletions(-) create mode 100644 lectures/lec4/part1/task1.html create mode 100644 lectures/lec4/part2/task1.pug create mode 100644 lectures/lec4/part2/task2.pug create mode 100644 lectures/lec4/part2/task3.pug create mode 100644 lectures/lec4/part2/task4.pug create mode 100644 lectures/lec4/part2/task5.pug create mode 100644 lectures/lec4/part2/task6.pug create mode 100644 lectures/lec4/part3/task1.styl create mode 100644 lectures/lec4/part3/task2.styl create mode 100644 lectures/lec4/part3/task3.css create mode 100644 lectures/lec4/part3/task4.styl create mode 100644 lectures/lec4/part3/task5.styl diff --git a/lectures/lec4/part1/task1.html b/lectures/lec4/part1/task1.html new file mode 100644 index 0000000..9e99317 --- /dev/null +++ b/lectures/lec4/part1/task1.html @@ -0,0 +1,22 @@ +... + + +
+
+
Заголовок
+
Рисунок
+
+
+ +
+
Заголовок
+
+
+ +
+
Рисунок
+
Заголовок
+
+
+
+ \ No newline at end of file diff --git a/lectures/lec4/part2/task1.pug b/lectures/lec4/part2/task1.pug new file mode 100644 index 0000000..fc434db --- /dev/null +++ b/lectures/lec4/part2/task1.pug @@ -0,0 +1,10 @@ +ol#list(type="I") + li Препроцессоры HTML + ul(type="disc") + li.first + a(href="#") Haml + li Pug + li Препроцессоры CSS + ul(type="circle") + li.first SAAS + li Stylus \ No newline at end of file diff --git a/lectures/lec4/part2/task2.pug b/lectures/lec4/part2/task2.pug new file mode 100644 index 0000000..b02cf32 --- /dev/null +++ b/lectures/lec4/part2/task2.pug @@ -0,0 +1,9 @@ +ol#list(type="I") + li Препроцессоры HTML + ul(type="disc") + li.first: a(href="#") Haml + li Pug + li Препроцессоры CSS + ul(type="circle") + li.first SAAS + li Stylus \ No newline at end of file diff --git a/lectures/lec4/part2/task3.pug b/lectures/lec4/part2/task3.pug new file mode 100644 index 0000000..a6619fb --- /dev/null +++ b/lectures/lec4/part2/task3.pug @@ -0,0 +1,10 @@ +- var tag = 'h' +- var i = 1 + +#{tag+i} Уровень #{i} +- i++ +#{tag+i} Уровень #{i} +- i++ +#{tag+i} Уровень #{i} +- i++ +#{tag+i} Уровень #{i} \ No newline at end of file diff --git a/lectures/lec4/part2/task4.pug b/lectures/lec4/part2/task4.pug new file mode 100644 index 0000000..80e1702 --- /dev/null +++ b/lectures/lec4/part2/task4.pug @@ -0,0 +1,6 @@ +- var products ={"Товар":"Цена","ручка":30.5, "карандаш":50, "альбом":156, "тетрадь":21.5, "ластик":10.2} +table + each name,price in products + tr + td= name + td= price diff --git a/lectures/lec4/part2/task5.pug b/lectures/lec4/part2/task5.pug new file mode 100644 index 0000000..cff3feb --- /dev/null +++ b/lectures/lec4/part2/task5.pug @@ -0,0 +1,8 @@ +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 \ No newline at end of file diff --git a/lectures/lec4/part2/task6.pug b/lectures/lec4/part2/task6.pug new file mode 100644 index 0000000..e75eb54 --- /dev/null +++ b/lectures/lec4/part2/task6.pug @@ -0,0 +1,12 @@ +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') diff --git a/lectures/lec4/part3/task1.styl b/lectures/lec4/part3/task1.styl new file mode 100644 index 0000000..37e82fa --- /dev/null +++ b/lectures/lec4/part3/task1.styl @@ -0,0 +1,5 @@ +size=1% +section + box-shadow: size size (2*size) rgba(0,0,0,0.5) + padding:size*2 + margin:size*4 \ No newline at end of file diff --git a/lectures/lec4/part3/task2.styl b/lectures/lec4/part3/task2.styl new file mode 100644 index 0000000..95caca9 --- /dev/null +++ b/lectures/lec4/part3/task2.styl @@ -0,0 +1,10 @@ +.block + display flex + flex-wrap wrap + p + display inline-block + background gray + &:hover + color green + &:hover + color red \ No newline at end of file diff --git a/lectures/lec4/part3/task3.css b/lectures/lec4/part3/task3.css new file mode 100644 index 0000000..8b22ddf --- /dev/null +++ b/lectures/lec4/part3/task3.css @@ -0,0 +1,19 @@ +.block { + color: blue; +} + +.block .menu { + color: navy; +} + +.block .menu a { + color: red; +} + +.block .menu h1 { + color: green; +} + +.block:hover { + color: white; +} \ No newline at end of file diff --git a/lectures/lec4/part3/task4.styl b/lectures/lec4/part3/task4.styl new file mode 100644 index 0000000..45816ff --- /dev/null +++ b/lectures/lec4/part3/task4.styl @@ -0,0 +1,7 @@ +style-tag(tagName, color_) + & {tagName} + color: color_ + +div + style-tag(ul,Navy) + diff --git a/lectures/lec4/part3/task5.styl b/lectures/lec4/part3/task5.styl new file mode 100644 index 0000000..093e013 --- /dev/null +++ b/lectures/lec4/part3/task5.styl @@ -0,0 +1,8 @@ +color-inv(r,g,b) + color: rgb(255 - r,255 - g ,255 - b) + + +a + color-inv(1,2,3) + +// оказывается пробелы обязательны при вычилеениях, иначе парсер ругается. неожиданно получислоь \ No newline at end of file diff --git a/lectures/lecture3.txt b/lectures/lecture3.txt index 7b88eb3..83488dc 100644 --- a/lectures/lecture3.txt +++ b/lectures/lecture3.txt @@ -1,15 +1,3 @@ -ol#list(type="I") - li Препроцессоры HTML - ul(type="disc") - li.first - a(href="#") Haml - li Pug - li Препроцессоры CSS - ul(type="circle") - li.first SAAS - li Stylus - - diff --git a/lectures/readme.md b/lectures/readme.md index 218ac02..96f53b6 100644 --- a/lectures/readme.md +++ b/lectures/readme.md @@ -10,6 +10,7 @@ 2. написать свой продублировав страничку с картинки ## 2 CSS + ### p1 Описание синтаксиса, правил форматирования, процесс применения селекторов, приоретизация стилей id > class >tag @@ -54,7 +55,6 @@ id > class >tag Информация про гриды, начиная про определение и общие атрибуты рассказывается про еденицы размеров ячейки (fr) про repeat и про min-max, и заканчивается обзор формированием зон в таблицах и установкой позиций элементов вне зависимости от положения тэга в дереве - ## 3 Bootstrap Определение фреймворка, примеры того как им пользоваиться описание 12 колоночной вёрстки и связанных с ней предварительно готовых классо, концепция контрольныз точек (sm md ls xl xxl). @@ -62,9 +62,41 @@ id > class >tag так-же немного расказано о внутрянке самого фрейморка (контейнеры построены на flex) и опять-же про аналог алинга айтемов как в гридах или флексе. В Bootstrap существует три уровня: базовый (контейнеры и сетка), компоненты (кнопки, формы, карточки) и утилиты (классы для быстрого изменения внешнего вида). Так-же описывается создание атомарных классов и можификаторов цветов... - - задачи: 1. задача на чекпоинты и их понимание 2. применение разных дисплеев 3. задача на align и чекпоинты + +## 3 Препроцессоры + +### p1 - Методологии вёрстки +Лекция в основном про БЭМ (блок__элемент--модификатор), про принцип называния блоков по смыслу того что они делают. Кроме этого обозреваются другие методолгии (SMACSS\ECSS) + +задачи: +1. задача на вёрстку по БЭМ ( похоже тут старая версия, расходится с тем, что я писал на лекции, то что писал и показывал на лекции было утеряно в одной из веток гита ... ) + +### p2 - препорцессоры HTML + +Идея препроцессоров - инструмент преобразующий код из одного вида в другой в рамках однго языка, используется для сокращения кода который пишет разработчик и для упрощения жизни в целом. +в лекции упомянуты несколько препроцессоров, но основной фокус идёт на pug (JADE), далее речь в основном о нём +Вся лекция в целом описывает работу , начиная от создания структуры и комментариями и заканчивая атрибутами и разными нюансами, далее основаня информация в названии задач. +после всех задач была рассмотрена концепция шаблонов для упрощеня создания повторяющихся страниц + +задачи: +1. базовая структура + атрибуры +2. структура атрибуты shothand для классов +3. переменные, инкрементация и подстановка текста +4. each, подстановка занчений по рано +5. циклы, вложенность? +6. mixin - местный аналог макроса из C + +### p3 - препроцессоры CSS +Упомянуто несолкьо препроцессоров, фокус на stylus. +в целом содержание лекции видно в задачах +хотя в заданиях не затрагивался момент с возвращением значениев из миксинов, но всё равно инетересно +задачи: +1. переменные +2. вложенность +3. опять вложенность и на осознание принципов компиляции и частичных ссылок +4. миксины и вложенность +5. миксины и выисление From e6806a2366f968c28946b9b09f346e76932e1796 Mon Sep 17 00:00:00 2001 From: OkunElya Date: Sat, 3 Jan 2026 13:40:15 +1000 Subject: [PATCH 5/9] js lec 1 added --- lectures/lec5/p1/task1.js | 2 ++ lectures/lec5/p1/task2.js | 6 +++++ lectures/lec5/p1/task3.js | 8 ++++++ lectures/lec5/p1/task4.js | 1 + lectures/lec5/p1/task5.js | 10 +++++++ lectures/lec5/p1/task6.js | 3 +++ lectures/lec5/p1/task7.js | 3 +++ lectures/lec5/p1/task8.js | 3 +++ lectures/lec5/p2/task1.js | 4 +++ lectures/lec5/p2/task2.js | 3 +++ lectures/lec5/p2/task3.js | 8 ++++++ lectures/lec5/p2/task4.js | 8 ++++++ lectures/lec5/p3/task1.js | 10 +++++++ lectures/lec5/p3/task2.js | 17 ++++++++++++ lectures/lec5/p3/task3.js | 15 +++++++++++ lectures/lec5/p3/task4.js | 11 ++++++++ lectures/lecture3.txt | 57 --------------------------------------- lectures/readme.md | 39 ++++++++++++++++++++++++++- 18 files changed, 150 insertions(+), 58 deletions(-) create mode 100644 lectures/lec5/p1/task1.js create mode 100644 lectures/lec5/p1/task2.js create mode 100644 lectures/lec5/p1/task3.js create mode 100644 lectures/lec5/p1/task4.js create mode 100644 lectures/lec5/p1/task5.js create mode 100644 lectures/lec5/p1/task6.js create mode 100644 lectures/lec5/p1/task7.js create mode 100644 lectures/lec5/p1/task8.js create mode 100644 lectures/lec5/p2/task1.js create mode 100644 lectures/lec5/p2/task2.js create mode 100644 lectures/lec5/p2/task3.js create mode 100644 lectures/lec5/p2/task4.js create mode 100644 lectures/lec5/p3/task1.js create mode 100644 lectures/lec5/p3/task2.js create mode 100644 lectures/lec5/p3/task3.js create mode 100644 lectures/lec5/p3/task4.js delete mode 100644 lectures/lecture3.txt diff --git a/lectures/lec5/p1/task1.js b/lectures/lec5/p1/task1.js new file mode 100644 index 0000000..3dc599d --- /dev/null +++ b/lectures/lec5/p1/task1.js @@ -0,0 +1,2 @@ +alert("Hello, world!"); +document.write("Hello, world!"); \ No newline at end of file diff --git a/lectures/lec5/p1/task2.js b/lectures/lec5/p1/task2.js new file mode 100644 index 0000000..e8b1cbf --- /dev/null +++ b/lectures/lec5/p1/task2.js @@ -0,0 +1,6 @@ +let _name = "Алина"; +let email = "alina@test.ru"; + +let message = `Доброго времени суток, ${_name}! Мы отправили Вам приглашение на почту ${email}.`; + +document.write(`

${message}

`); \ No newline at end of file diff --git a/lectures/lec5/p1/task3.js b/lectures/lec5/p1/task3.js new file mode 100644 index 0000000..4e67330 --- /dev/null +++ b/lectures/lec5/p1/task3.js @@ -0,0 +1,8 @@ +let p = prompt("Введите значение переменной p:"); + +if (isNaN(parseFloat(p)) || !isFinite(Number(p))) { + alert("Ошибка: введено не число."); +} else { + p = Number(p) + 1; + alert(`Увеличенное значение переменной p: ${p}`); +} \ No newline at end of file diff --git a/lectures/lec5/p1/task4.js b/lectures/lec5/p1/task4.js new file mode 100644 index 0000000..cc7f699 --- /dev/null +++ b/lectures/lec5/p1/task4.js @@ -0,0 +1 @@ +let result = n > 0 ? 1 / n : n < 0 ? 1 / n ** 2 : 0; \ No newline at end of file diff --git a/lectures/lec5/p1/task5.js b/lectures/lec5/p1/task5.js new file mode 100644 index 0000000..5ef3716 --- /dev/null +++ b/lectures/lec5/p1/task5.js @@ -0,0 +1,10 @@ +let n = 81; +let i = 1; + +let out = ""; + +document.write(out); \ No newline at end of file diff --git a/lectures/lec5/p1/task6.js b/lectures/lec5/p1/task6.js new file mode 100644 index 0000000..25da7ac --- /dev/null +++ b/lectures/lec5/p1/task6.js @@ -0,0 +1,3 @@ +function sum() { + return arguments.reduce((total, num) => total + num, 0); +} diff --git a/lectures/lec5/p1/task7.js b/lectures/lec5/p1/task7.js new file mode 100644 index 0000000..dc049df --- /dev/null +++ b/lectures/lec5/p1/task7.js @@ -0,0 +1,3 @@ +sum = function(...args) { + return args.filter(num => num % 2 !== 0).reduce((acc, num) => acc + num, 0); +} \ No newline at end of file diff --git a/lectures/lec5/p1/task8.js b/lectures/lec5/p1/task8.js new file mode 100644 index 0000000..79fcdad --- /dev/null +++ b/lectures/lec5/p1/task8.js @@ -0,0 +1,3 @@ +sum = (...args) => { + return args.filter(num => num % 2 !== 0).reduce((acc, num) => acc + num, 0); +} \ No newline at end of file diff --git a/lectures/lec5/p2/task1.js b/lectures/lec5/p2/task1.js new file mode 100644 index 0000000..58fa6a2 --- /dev/null +++ b/lectures/lec5/p2/task1.js @@ -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); +} \ No newline at end of file diff --git a/lectures/lec5/p2/task2.js b/lectures/lec5/p2/task2.js new file mode 100644 index 0000000..3e81292 --- /dev/null +++ b/lectures/lec5/p2/task2.js @@ -0,0 +1,3 @@ +function extractText(html){ + return html.split("

").filter(substr => substr.includes("

")).map(substr = substr.split("

")[0]); +} \ No newline at end of file diff --git a/lectures/lec5/p2/task3.js b/lectures/lec5/p2/task3.js new file mode 100644 index 0000000..879e166 --- /dev/null +++ b/lectures/lec5/p2/task3.js @@ -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 \ No newline at end of file diff --git a/lectures/lec5/p2/task4.js b/lectures/lec5/p2/task4.js new file mode 100644 index 0000000..396b4b6 --- /dev/null +++ b/lectures/lec5/p2/task4.js @@ -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")) + + diff --git a/lectures/lec5/p3/task1.js b/lectures/lec5/p3/task1.js new file mode 100644 index 0000000..c9060e5 --- /dev/null +++ b/lectures/lec5/p3/task1.js @@ -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); \ No newline at end of file diff --git a/lectures/lec5/p3/task2.js b/lectures/lec5/p3/task2.js new file mode 100644 index 0000000..d767ecc --- /dev/null +++ b/lectures/lec5/p3/task2.js @@ -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); \ No newline at end of file diff --git a/lectures/lec5/p3/task3.js b/lectures/lec5/p3/task3.js new file mode 100644 index 0000000..192812e --- /dev/null +++ b/lectures/lec5/p3/task3.js @@ -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); \ No newline at end of file diff --git a/lectures/lec5/p3/task4.js b/lectures/lec5/p3/task4.js new file mode 100644 index 0000000..55a9bc5 --- /dev/null +++ b/lectures/lec5/p3/task4.js @@ -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); \ No newline at end of file diff --git a/lectures/lecture3.txt b/lectures/lecture3.txt deleted file mode 100644 index 83488dc..0000000 --- a/lectures/lecture3.txt +++ /dev/null @@ -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 \ No newline at end of file diff --git a/lectures/readme.md b/lectures/readme.md index 96f53b6..185e075 100644 --- a/lectures/readme.md +++ b/lectures/readme.md @@ -67,7 +67,7 @@ id > class >tag 2. применение разных дисплеев 3. задача на align и чекпоинты -## 3 Препроцессоры +## 4 Препроцессоры ### p1 - Методологии вёрстки Лекция в основном про БЭМ (блок__элемент--модификатор), про принцип называния блоков по смыслу того что они делают. Кроме этого обозреваются другие методолгии (SMACSS\ECSS) @@ -94,9 +94,46 @@ 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, их создание, модификация и обработка, перебор свойств объектов, фильтрация и сортировка данных в объектах. +остальные затронутые темы видны из названия задач + +задачи: +1. фильтрация свойств объекта по типу значений +2. обновление объекта с добавлением или увеличением значений +3. unford вложенныз свойств +4. сортировка объекта по значениям свойств From b6776f93fdf340f83bd901a6b99d0cdb448cfa38 Mon Sep 17 00:00:00 2001 From: OkunElya Date: Sat, 3 Jan 2026 13:44:33 +1000 Subject: [PATCH 6/9] duplicated solutions in loops to match themes --- lectures/lec5/p1/task6.js | 8 ++++++++ lectures/lec5/p1/task7.js | 10 ++++++++++ lectures/lec5/p1/task8.js | 9 +++++++++ 3 files changed, 27 insertions(+) diff --git a/lectures/lec5/p1/task6.js b/lectures/lec5/p1/task6.js index 25da7ac..1bf9532 100644 --- a/lectures/lec5/p1/task6.js +++ b/lectures/lec5/p1/task6.js @@ -1,3 +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; +} diff --git a/lectures/lec5/p1/task7.js b/lectures/lec5/p1/task7.js index dc049df..90d7095 100644 --- a/lectures/lec5/p1/task7.js +++ b/lectures/lec5/p1/task7.js @@ -1,3 +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; } \ No newline at end of file diff --git a/lectures/lec5/p1/task8.js b/lectures/lec5/p1/task8.js index 79fcdad..7c72096 100644 --- a/lectures/lec5/p1/task8.js +++ b/lectures/lec5/p1/task8.js @@ -1,3 +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; } \ No newline at end of file From f982d05a54242015916f0575997e50f1239677e3 Mon Sep 17 00:00:00 2001 From: OkunElya Date: Sat, 3 Jan 2026 15:32:33 +1000 Subject: [PATCH 7/9] 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) From d10f15a34acffeebe3e2e18f3f313c42ba564235 Mon Sep 17 00:00:00 2001 From: OkunElya Date: Sat, 3 Jan 2026 22:59:02 +1000 Subject: [PATCH 8/9] longer lectures --- lectures/readme.md | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/lectures/readme.md b/lectures/readme.md index 53ede54..47dba38 100644 --- a/lectures/readme.md +++ b/lectures/readme.md @@ -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 Определение фреймворка, примеры того как им пользоваиться @@ -70,7 +70,7 @@ id > class >tag ## 4 Препроцессоры ### p1 - Методологии вёрстки -Лекция в основном про БЭМ (блок__элемент--модификатор), про принцип называния блоков по смыслу того что они делают. Кроме этого обозреваются другие методолгии (SMACSS\ECSS) +Лекция посвящена изучению методологии БЭМ (Блок__Элемент--Модификатор) - популярного подхода к именованию CSS-классов, основанного на принципе называния блоков по смыслу и функциональности, которую они выполняют. Кроме БЭМ также рассматриваются альтернативные методологии организации CSS-кода, такие как SMACSS (Scalable and Modular Architecture for CSS) и ECSS (Enduring CSS), каждая из которых предлагает свой подход к структурированию и масштабированию стилей. задачи: 1. задача на вёрстку по БЭМ ( похоже тут старая версия, расходится с тем, что я писал на лекции, то что писал и показывал на лекции было утеряно в одной из веток гита ... ) @@ -118,8 +118,7 @@ id > class >tag 8. arrow functions ### p2 - структуры данных -Изучение работы с массивами и строками в JavaScript. filter, map, reduce, sort, работа со строками -остальные затронутые темы видны из названия задач +Лекция посвящена изучению работы с основными структурами данных в JavaScript - массивами и строками, включая освоение функциональных методов обработки массивов. Подробно рассматриваются методы высшего порядка: filter() для фильтрации элементов, map() для преобразования данных, reduce() для агрегации значений, sort() для сортировки, а также различные методы работы со строками для парсинга и обработки текстовой информации. задачи: @@ -129,8 +128,7 @@ id > class >tag 4. фильтрация, преобразование и сортировка чисел из строки ### p3 - объекты -Работа с объектами в JavaScript, их создание, модификация и обработка, перебор свойств объектов, фильтрация и сортировка данных в объектах. -остальные затронутые темы видны из названия задач +Лекция охватывает комплексную работу с объектами в JavaScript, включая различные способы их создания, модификации структуры и обработки содержащихся в них данных. Изучаются методы перебора свойств объектов (for...in, Object.keys(), Object.values(), Object.entries()), техники фильтрации и сортировки данных внутри объектов, а также операции с вложенными структурами и преобразование объектов. задачи: 1. фильтрация свойств объекта по типу значений From df21df0fff1a45374e73343c9babf3e9ba82bac6 Mon Sep 17 00:00:00 2001 From: OkunElya Date: Fri, 9 Jan 2026 19:35:08 +1000 Subject: [PATCH 9/9] lectures fix --- lectures/lec2/part3/task1.css | 7 +++++- lectures/lec2/part3/task2.css | 4 +-- lectures/lec5/p2/task2.js | 47 +++++++++++++++++++++++++++++++++-- 3 files changed, 53 insertions(+), 5 deletions(-) diff --git a/lectures/lec2/part3/task1.css b/lectures/lec2/part3/task1.css index 4008715..837de76 100644 --- a/lectures/lec2/part3/task1.css +++ b/lectures/lec2/part3/task1.css @@ -1,3 +1,8 @@ div > a > img{ width: 10vw; -} \ No newline at end of file +} + +div > a { + display: inline-block; +} + \ No newline at end of file diff --git a/lectures/lec2/part3/task2.css b/lectures/lec2/part3/task2.css index afcac1a..57e398d 100644 --- a/lectures/lec2/part3/task2.css +++ b/lectures/lec2/part3/task2.css @@ -4,5 +4,5 @@ div > a > img{ } div > a { min-width: 170px; -} - \ No newline at end of file + display: inline-block; +} \ No newline at end of file diff --git a/lectures/lec5/p2/task2.js b/lectures/lec5/p2/task2.js index 3e81292..dc5a21b 100644 --- a/lectures/lec5/p2/task2.js +++ b/lectures/lec5/p2/task2.js @@ -1,3 +1,46 @@ function extractText(html){ - return html.split("

").filter(substr => substr.includes("

")).map(substr = substr.split("

")[0]); -} \ No newline at end of file + return html.split("

") + .filter(substr => substr + .includes("

")) + .map((substr) => substr.split("

")[0]); +} + +let html = ` + + + + + task 1 + + + + +

Возможности HTML

+
+
    +
  1. Выделение текста: +
      +
    • жирным;
      • +
    • курсивным;
      • +
    +
    2. +
  2. Характеристика шрифта.
    3. +
  3. Вставка рисунков.
    4. +
  4. Оформление текста: +
      +
    • заголовки;
      • +
    • абзацы;
      • +
    • списки.
      • +
    +
    5. +
+
+

Средствами HTML осуществляется переход на другие страницы сети Интернет.

+

Средствами HTML осуществляется переход на другие страницы сети Интернет.

+

123.

+ + +` + +console.log(extractText(html)) +