lectures fix

longer lectures
lectures done
2026-01-09 19:35:08 +10:00 · 2026-01-03 22:59:02 +10:00 · 2026-01-03 15:32:33 +10:00 · 2026-01-03 13:44:33 +10:00 · 2026-01-03 13:40:15 +10:00 · 2026-01-03 01:21:46 +10:00
60 changed files with 1136 additions and 106 deletions
--- a/labs/lab7/lab7.html
+++ b/labs/lab7/lab7.html
@@ -1,20 +0,0 @@
 <body>
   <h3>Языки программирования</h3>
   <ul>
    <li><a href ="">Python</a></li>
    <li><a href ="">C</a></li>
    <li><a id="test" href ="">Java</a></li>
    <li><a href ="">JavaScript</a></li>
   </ul>
 </body>
 <script>
    let elem = document.getElementById("test");
    elem = elem.parentNode;
    while(elem.parentElement!==null){
        let newElem =document.createElement(elem.children[0].tagName);
        newElem.innerHTML= "Новый Элемент";
        elem.appendChild(newElem);
        elem=elem.parentNode;
    }
 </script>
--- a/lectures/lec1/task1.html
+++ b/lectures/lec1/task1.html
@@ -0,0 +1,34 @@
 <!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 align="justify">Средствами HTML осуществляется переход на другие страницы сети Интернет.</p>
 </body>
 </html>
--- a/lectures/lec1/task2.html
+++ b/lectures/lec1/task2.html
@@ -0,0 +1,57 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
    <meta charset="UTF-8">
    <title>Пройдите тест</title>
 </head>
 <body>
    <h2>Пройдите тест</h2>
    <form>
        <ol>
            <li>
                Что будет выведено в окно браузера после выполнения оператора:<br>
                <code>document.write("&lt;strong&gt;a&lt;sub&gt;i&lt;/sub&gt; = 2&lt;sup&gt;i&lt;/sup&gt;&lt;/strong&gt;")</code>
                <br><br>
                <input type="radio" name="q1" id="q1a" value="a1">
                <label for="q1a">a<sub>i</sub> = 2<sup>i</sup></label><br>
                <input type="radio" name="q1" id="q1b" value="a2">
                <label for="q1b"><strong>a<sub>i</sub> = 2<sub>i</sub></strong></label><br>
                <input type="radio" name="q1" id="q1c" value="a3">
                <label for="q1c"><strong>a<sub>i</sub> = 2i</strong></label><br>
                <input type="radio" name="q1" id="q1d" value="a4">
                <label for="q1d">a<sup>i</sup> = 2<sup>i</sup></label>
            </li>
            <br>
            <li>
                Отметьте верные названия переменных:<br>
                <input type="checkbox" id="q2a" name="q2" value="name">
                <label for="q2a">name</label><br>
                <input type="checkbox" id="q2b" name="q2" value="name+age">
                <label for="q2b">name+age</label><br>
                <input type="checkbox" id="q2c" name="q2" value="nameAge">
                <label for="q2c">nameAge</label><br>
                <input type="checkbox" id="q2d" name="q2" value="3name">
                <label for="q2d">3name</label><br>
                <input type="checkbox" id="q2e" name="q2" value="name(age)">
                <label for="q2e">name(age)</label>
            </li>
            <br>
            <li>
                Какое значение получит переменная <code>result</code> после выполнения следующих операторов:<br>
                <code>
                        let a = 7;<br>
                        let b = 4;<br>
                        let result = a % 3 + b % 2;
                </code>
                <br>
                Ответ: <input type="text" name="q3" size="5">
            </li>
        </ol>
        <button type="submit">Закончить тестирование</button>
        <button type="reset">Повторить тестирование</button>
    </form>
 </body>
 </html>
--- a/lectures/lec2/part1/task1.css
+++ b/lectures/lec2/part1/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;
 }
--- a/lectures/lec2/part1/task2.html
+++ b/lectures/lec2/part1/task2.html
@@ -0,0 +1,33 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Задание 2</title>
    <style>
        h1,
        h2 {
            text-align: center;
            color: maroon;
        }
        ins {
            text-decoration: underline;
        }
        i {
            font-style: italic;
        }
    </style>
 </head>
 <body>
    <h1>
        <ins>Основы HTML</ins>
    </h1>
    <h2>
        <i>Оглавление</i>
    </h2>
 </body>
 </html>
--- a/lectures/lec2/part1/task3.html
+++ b/lectures/lec2/part1/task3.html
@@ -0,0 +1,28 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
    <meta charset="UTF-8">
    <title>Задание 3</title>
    <style>
        .blue-bold {
            font-weight: bold;
            color: blue;
        }
        .big-font{
            font-size: 20px;
            color: green;
        }
        .center-red {
            color: red;
            text-align: center;
        }
    </style>
 </head>
 <body>
    <p class="blue-bold">Каскадность CSS:</p>
    <ul>
        <li class="center-red">расширение свойств;</li>
        <li class="big-font center-red">переопределение свойств.</li>
    </ul>
 </body>
 </html>
--- a/lectures/lec2/part1/task4-5.html
+++ b/lectures/lec2/part1/task4-5.html
@@ -0,0 +1,81 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <meta charset=utf-8">
    <title>Task 4</title>
    <style>
        div {
            box-sizing: border-box;
            background: lightblue;
            text-align: center;
            margin: 5px 5px;
        }
        .menu{
            text-align: end;
        }
        .menu > div{
            width: 100px;
            height: 50px;
            display: inline-block;
            background: violet;
        }
        .gray {
            background: gainsboro;
        }
        .w50 {
            width: 48%;
            display: inline-block;
            height: 250px;
        }
        .top {
            width: 70%;
            margin: 0 auto 20px;
        }
        .left {
            display: inline-block;
            width: 63%
        }
        .left .part {
            height: 80px;
        }
        .right {
            float: right;
            width: 35%;
            height: 340px;
        }
    </style>
 </head>
 <body>
    <div class="menu">
        <div>меню1</div>
        <div>меню2</div>
        <div>меню3</div>
        <div>меню4</div>
    </div>
    <div class="top">
        <div class="gray w50"><span>рисунок 1</span></div>
        <div class="gray w50"><span>рисунок 2</span></div>
    </div>
    <div class="main">
        <div class="left">
            <div class="gray part"><span>часть 1.1</span></div>
            <div class="gray part"><span>часть 1.2</span></div>
            <div class="gray part"><span>часть 1.3</span></div>
            <div class="gray part"><span>часть 1.4</span></div>
        </div>
        <div class="gray right"><span>часть 2</span></div>
    </div>
 </body>
 </html>
--- a/lectures/lec2/part2/task1.css
+++ b/lectures/lec2/part2/task1.css
@@ -0,0 +1,23 @@
 .main > p:last-child{
    color:green;
 }
 /* 
 <div class="menu">
    <ol>
        <li><a href="#">Комбинация селекторов</a></li>
        <li><a href="#">Селекторы атрибутов</a></li>
    </ol>
    <p>CSS селекторы</p>
 </div>
 <div class="main">
    <h2>Комбинация селекторов</h2>
    <img src="tree.png">
    <p> Различают следующие виды селекторов: </p>
    <ol>
        <li><a href="#">вложенный селектор;</a></li>
        <li><a href="#">родительский селектор;</a></li>
    </ol>
    <p> Соединение селекторов</p> --- ВОТ ЕГО КРАСИМ!!!
 </div>
 */
--- a/lectures/lec2/part2/task2.css
+++ b/lectures/lec2/part2/task2.css
@@ -0,0 +1,24 @@
 .main li > [href="#"] {
    color:green
 }
 /*
 <div class="menu">
    <ul>
        <li><a href="a1.html">Комбинация селекторов</a></li>
        <li><a href="#">Селекторы атрибутов</a></li>
    </ul>
    <p>CSS селекторы</p>
 </div>
 <div class="main">
    <h2>Комбинация селекторов</h2>
    <img src="tree.png">
    <p> Различают следующие виды селекторов: </p>
    <ol>
        <li><a href="#">вложенный селектор;</a></li>
        <li><a href="b1.html">родительский селектор;</a></li>
    </ol>
    <p> <a href="#"> Соединение селекторов </a></p>
 </div>
 */
--- a/lectures/lec2/part2/task3.css
+++ b/lectures/lec2/part2/task3.css
@@ -0,0 +1,24 @@
 h2, ol >li:nth-child(2) , ol + p{
    color: green;
 }
 /* 
 <div class="menu">
    <ul>
        <li><a href="a1.html">Комбинация селекторов</a></li>
        <li><a href="#">Селекторы атрибутов</a></li>
    </ul>
 </div>
 <div class="main">
    <h2>Комбинация селекторов</h2> ---  
    <img src="tree.png">
    <p> Различают следующие виды селекторов: </p>
    <ol>
        <li><a href="#">вложенный селектор;</a></li>
        <li><a href="#">родительский селектор;</a></li> ---  
        <li><a href="#">соседний селектор</a></li>
    </ol>
    <p> <a href="#"> Соединение селекторов </a></p> ---  
 </div>
 */
--- a/lectures/lec2/part3/task1.css
+++ b/lectures/lec2/part3/task1.css
@@ -0,0 +1,8 @@
 div > a > img{
    width: 10vw;
 }
 div > a {
    display: inline-block;
 }
--- a/lectures/lec2/part3/task2.css
+++ b/lectures/lec2/part3/task2.css
@@ -0,0 +1,8 @@
 div > a > img{
    width: 10vw;
    min-width: 170px;
 }
 div > a {
    min-width: 170px;
    display: inline-block;
 }
--- a/lectures/lec2/part3/task3.css
+++ 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;
    }
 }
--- a/lectures/lec2/part4/task1.html
+++ b/lectures/lec2/part4/task1.html
@@ -0,0 +1,24 @@
 <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
 </div>
 <style>
 .container {
    display: flex;
    flex-wrap: no-wrap;
    background: LightGreen;
 }
 .container div {
    min-width: 120px;
    height: 50px;
    margin: 5px;
    border: solid thin green;
 }
 </style>
--- a/lectures/lec2/part4/task2.html
+++ b/lectures/lec2/part4/task2.html
@@ -0,0 +1,38 @@
 <style>
 .pict {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
 }
 .pict a img {
    min-width:280px;
    min-height:280px;
 }
@media (max-width: 1000px) {
    .pict {
        flex-wrap: wrap;
    }
 }
@media (max-width: 700px) {
    .pict {
        flex-direction: column;
        align-items: center;
    }
 }
 </style>
 <hr>
 <div class="pict">
    <a href="#"><img src="images/image_1.jpg"></a>
    <a href="#"><img src="images/image_2.jpg"></a>
    <a href="#"><img src="images/image_3.jpg"></a>
    <a href="#"><img src="images/image_4.jpg"></a>
    <a href="#"><img src="images/image_5.jpg"></a>
 </div>
 <hr>
--- a/lectures/lec2/part4/task3.html
+++ b/lectures/lec2/part4/task3.html
@@ -0,0 +1,46 @@
 <style>
    .pict {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
    .pict a img {
        min-width: 280px;
        min-height: 280px;
    }
    .big {
        min-width: 330px;
        min-height: 330px;
    }
    @media (max-width: 1000px) {
        .pict {
            flex-wrap: wrap;
        }
        .big {
            min-width: 280px;
            min-height: 280px;
        }
    }
    @media (max-width: 700px) {
        .pict {
            flex-direction: column;
            align-items: center;
        }
    }
 </style>
 <hr>
 <div class="pict">
    <a href="#"><img src="images/image_1.jpg"></a>
    <a href="#"><img src="images/image_2.jpg"></a>
    <a href="#" class="big"><img src="images/image_3.jpg"></a>
    <a href="#"><img src="images/image_4.jpg"></a>
    <a href="#"><img src="images/image_5.jpg"></a>
 </div>
 <hr>
--- a/lectures/lec3/task1.html
+++ b/lectures/lec3/task1.html
@@ -0,0 +1,34 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .col{
            background: lightgray;
            border: solid thin grey;
        }
        .row{
            border: solid thin red;
        }
    </style>
 </head>
 <body class="container-fluid">
    <div class="row m-2">
        <div class="col-6 col-md-3 col-lg-2 h-2 p-3 bg-light"><h3>aboba</h3></div>
        <div class="col-6 col-md-3 col-lg-2 h-2 p-3 bg-light"><h3>aboba</h3></div>
        <div class="col-6 col-md-3 col-lg-2 h-2 p-3 bg-light"><h3>aboba</h3></div>
        <div class="col-6 col-md-3 col-lg-2 h-2 p-3 bg-light"><h3>aboba</h3></div>
        <div class="col-6 col-md-3 col-lg-2 h-2 p-3 bg-light"><h3>aboba</h3></div>
        <div class="col-6 col-md-3 col-lg-2 h-2 p-3 bg-light"><h3>aboba</h3></div>
    </div>    
 </body>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 </html>
--- a/lectures/lec3/task2.html
+++ b/lectures/lec3/task2.html
@@ -0,0 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .col {
            background: lightgray;
            border: solid thin grey;
        }
        .row {
            border: solid thin red;
        }
    </style>
 </head>
 <body>
    <div class="container d-flex align-items end">
        <h5 class="bg-light">Ворота на запад</h5>
        <p>192-метровая арка в Сент-Луисе (штат Миссури, США)</p>
        <img src="images/image1.jpg" alt="">
    </div>
     <div class="container d-grid justify-content-center">
        <h5 class="bg-light">Ворота на запад</h5>
        <p>192-метровая арка в Сент-Луисе (штат Миссури, США)</p>
        <img src="images/image1.jpg" alt="">
    </div>
 </body>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 </html>
--- a/lectures/lec3/task3.html
+++ b/lectures/lec3/task3.html
@@ -0,0 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .col {
            background: lightgray;
            border: solid thin grey;
        }
        .row {
            border: solid thin red;
        }
    </style>
 </head>
 <body>
 <div class="container"></div>
    <div class="row p-2 border justify-content-between">
        <div class="col-12 col-md-7 p-2 m-md-2 border bg-primary text-white">
            Строка 1, столбец 1
        </div>
        <div class="col-12 col-md-3 p-2 m-md-2 border">
            Строка 1, столбец 2
        </div>
    </div>
    <div class="row p-2 border justify-content-between">
        <div class="col-12 col-md-3 p-2 m-md-2 border">
            Строка 2, столбец 1
        </div>
        <div class="col-12 col-md-7 bg-primary text-white col p-2 m-md-2 border">
            Строка 2, столбец 2
        </div>
    </div>
 </div>
 </body>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 </html>
--- a/lectures/lec4/part1/task1.html
+++ b/lectures/lec4/part1/task1.html
@@ -0,0 +1,22 @@
 ...
 <body>
    <div class="main">
        <div class="main__card">
            <div class="main__card-header">Заголовок</div>
            <div class="main__card-image main__card-image--position_right">Рисунок</div>
            <div class="card__content"></div>
        </div>
        <div class="main__card">
            <div class="main__card-header">Заголовок</div>
            <div class="main__card-content"></div>
        </div>
        <div class="main__card">
            <div class="main__card-image main__card-image--position_left">Рисунок</div>
            <div class="main__card-header">Заголовок</div>
            <div class="main__card-content"></div>
        </div>
    </div>
 </body>
--- a/lectures/lec4/part2/task1.pug
+++ 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
--- a/lectures/lec4/part2/task2.pug
+++ 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
--- a/lectures/lec4/part2/task3.pug
+++ 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}
--- a/lectures/lec4/part2/task4.pug
+++ 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
--- a/lectures/lec4/part2/task5.pug
+++ 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
--- a/lectures/lec4/part2/task6.pug
+++ 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')
--- a/lectures/lec4/part3/task1.styl
+++ 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
--- a/lectures/lec4/part3/task2.styl
+++ 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
--- a/lectures/lec4/part3/task3.css
+++ 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;
 }
--- a/lectures/lec4/part3/task4.styl
+++ b/lectures/lec4/part3/task4.styl
@@ -0,0 +1,7 @@
 style-tag(tagName, color_)
    & {tagName}
        color: color_
 div
    style-tag(ul,Navy)
--- a/lectures/lec4/part3/task5.styl
+++ 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)
 // оказывается пробелы обязательны при вычилеениях, иначе парсер ругается. неожиданно получислоь
--- a/lectures/lec5/p1/task1.js
+++ b/lectures/lec5/p1/task1.js
@@ -0,0 +1,2 @@
 alert("Hello, world!");
 document.write("Hello, world!");
--- a/lectures/lec5/p1/task2.js
+++ b/lectures/lec5/p1/task2.js
@@ -0,0 +1,6 @@
 let _name = "Алина";
 let email = "alina@test.ru";
 let message = `Доброго времени суток, ${_name}! Мы отправили Вам приглашение на почту ${email}.`;
 document.write(`<h3>${message}</h3>`);
--- a/lectures/lec5/p1/task3.js
+++ 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}`);
 }
--- a/lectures/lec5/p1/task4.js
+++ b/lectures/lec5/p1/task4.js
@@ -0,0 +1 @@
 let result = n > 0 ? 1 / n : n < 0 ? 1 / n ** 2 : 0;
--- a/lectures/lec5/p1/task5.js
+++ b/lectures/lec5/p1/task5.js
@@ -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);
--- a/lectures/lec5/p1/task6.js
+++ b/lectures/lec5/p1/task6.js
@@ -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;
 }
--- a/lectures/lec5/p1/task7.js
+++ b/lectures/lec5/p1/task7.js
@@ -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;
 }
--- a/lectures/lec5/p1/task8.js
+++ b/lectures/lec5/p1/task8.js
@@ -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;
 }
--- a/lectures/lec5/p2/task1.js
+++ 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);
 }
--- a/lectures/lec5/p2/task2.js
+++ b/lectures/lec5/p2/task2.js
@@ -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))
--- a/lectures/lec5/p2/task3.js
+++ 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
--- a/lectures/lec5/p2/task4.js
+++ 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"))
--- a/lectures/lec5/p3/task1.js
+++ 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);
--- a/lectures/lec5/p3/task2.js
+++ 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);
--- a/lectures/lec5/p3/task3.js
+++ 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);
--- a/lectures/lec5/p3/task4.js
+++ 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);
--- a/lectures/lec6/part1/part4.js
+++ 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");
 })
--- a/lectures/lec6/part1/task1.js
+++ 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)
    }
 });
--- a/lectures/lec6/part1/task2.js
+++ 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";})
 });
--- a/lectures/lec6/part1/task3.js
+++ 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);
        }
    }
 })
--- a/lectures/lec6/part1/task5.js
+++ 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;
 });
--- a/lectures/lec6/part1/task6.js
+++ b/lectures/lec6/part1/task6.js
@@ -0,0 +1,4 @@
 const menu = document.getElementById('menu');
 while (menu.firstChild) {
    menu.removeChild(menu.firstChild);
 }
--- a/lectures/lec6/part2/task1.txt
+++ b/lectures/lec6/part2/task1.txt
@@ -0,0 +1,3 @@
 1. юзер нажимает мышь в поле с объектами -> onmousedown 
 2. мышь движется куда-то зачем-то -> onmousemove
 3. пользователь отпускает мышь -> onmouseup
--- a/lectures/lec6/part2/task2.txt
+++ b/lectures/lec6/part2/task2.txt
@@ -0,0 +1,10 @@
 Последовательность событий, происходящих при вводе значения в текстовое поле:
 1. focus  текстовое поле получает фокус 
 --- следующие повторяются
 2. onpaste ктрл в прожато
 3. keydown  пользователь нажимает клавишу на клавиатуре.
 4. input  значение текстового поля изменяется (например, при вводе символа).
 5. keyup  пользователь отпускает клавишу.
 --- следующие не повторяются
 6. change  пользователь завершает ввод и текстовое поле теряет фокус, если значение было изменено.
 7. blur  текстовое поле теряет фокус (например, пользователь кликает вне текстового поля).
--- a/lectures/lec6/part2/task3.js
+++ 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`;
 });
--- a/lectures/lec6/part2/task4.js
+++ 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');
    });
 });
--- a/lectures/lecture3.txt
+++ b/lectures/lecture3.txt
@@ -1,69 +0,0 @@
 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
 - 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
--- a/lectures/readme.md
+++ b/lectures/readme.md
@@ -0,0 +1,159 @@
 #Сборник конспектов лекций
 ## 0 История интернета и начало HTML
 В лекции подробно описано происхождение интернета, начиная от проекта ARPANET и его эволюции к современной всемирной сети, которую мы знаем сегодня. Также рассказано про знаменитые браузерные войны между различными компаниями и про окончательную победу Chrome в борьбе за доминирование на рынке браузеров. Лекция охватывает развитие веб-технологий от WEB1.0 (статичные страницы) через WEB2.0 (интерактивные социальные сети) до современного WEB3.0 (децентрализованные технологии и блокчейн).
 ## 1 HTML
 Лекция посвящена изучению основ языка разметки HTML, включая синтаксис, правила оформления кода и подробную информацию по существующим тегам стандарта HTML4. Особое внимание уделено работе с формами, правильному использованию лейблов и их привязке к элементам ввода (инпутам) для обеспечения доступности и удобства использования веб-страниц.
 задачи:
 1. исправить код
 2. написать свой продублировав страничку с картинки
 ## 2 CSS
 ### p1
 Описание синтаксиса, правил форматирования, процесс применения селекторов, приоретизация стилей
 id > class >tag
 блочное\строчное\блочно-строчное отображение элемента
 элемент и его padding  border  margin
 обобщённые свойства (border background margin font )
 какие атрибуты применимы на блочные, а какие на строчные
 задачи:
 1. отформатировать код css
 2. отчистить код от атрибутов внутри тегов
 3. применить теги на код в нужном порядке
 4. скопировать страницу 
 5. добавить меню на скопированную страницу
 ### p2
 Во второй части раздела основной фокус сделан на изучении различных типов селекторов CSS, включая сложные псевдоклассы типа :nth-child, :hover, :focus и другие. Также подробно рассматриваются псевдоэлементы (::first-line, ::before, ::after), которые позволяют стилизовать части элементов без добавления дополнительной разметки в HTML.
 задачи:
 1. практика на селекторы, выбор элемента из кода
 2. практика на селекторы, выбор элемента из кода
 3. практика на селекторы, выбор элемента из кода
 ### p3
 В третьей части подробно рассказывается про адаптивную и динамическую вёрстку, включая использование viewport-единиц измерения: vw (viewport width), vh (viewport height), vmin и vmax для создания отзывчивых макетов. Также изучаются ограничивающие свойства min/max-width и min/max-height, а также основы работы с медиа-запросами для создания адаптивного дизайна под разные устройства и размеры экрана.
 задачи:
 1. применить vh
 2. ограничение max-width
 3. медиазапрос
 ### p4
 ### p4 - Flexbox
 В четвёртом модуле рассказыватется про flex и его использование, атрибуты выравнивания внутри контейнера и внутри элементов контейнеров, перенос\запрет переноса и т.д., а ну и про gap тоже разумеется row-gap, column-gap. Также затрагиваются такие свойства, как flex-grow, flex-shrink и flex-basis, которые определяют, как элементы растягиваются, сжимаются или занимают пространство в контейнере. Рассматриваются различные значения для justify-content, align-items и align-self. Так-же упоминается  order, позволяющий изменять порядок элементов в контейнере.
 задачи:
 1. осознать что когда запрет на wrap то wrap очевидно запрещается
 2. изменеие направления flex на медиазапросе, включение отключение переноса
 3. то-же что и 2 но с другим min-width в атрибуте у одного из элементов
 ### p5
 Пятая часть посвящена изучению CSS Grid Layout - мощной системы двумерного макетирования, начиная с основных определений, свойств контейнера и общих атрибутов грид-системы. Подробно рассказывается про специальные единицы размеров fr (fractional unit), функции repeat() и minmax() для создания гибких сеток, а завершается изучение темой grid-areas - формированием именованных зон в таблицах и размещением элементов в произвольных позициях независимо от их расположения в HTML-дереве.
 ## 3 Bootstrap
 Определение фреймворка, примеры того как им пользоваиться
 описание 12 колоночной вёрстки и связанных с ней предварительно готовых классо, концепция контрольныз точек (sm md ls xl xxl).
 так-же затронуты контейнеры, они имеют фиксированый max-width который определяется соотв. атрибутом чекпоинта.
 так-же немного расказано о внутрянке самого фрейморка (контейнеры построены на flex) и опять-же про аналог алинга айтемов как в гридах или флексе.
 В Bootstrap существует три уровня: базовый (контейнеры и сетка), компоненты (кнопки, формы, карточки) и утилиты (классы для быстрого изменения внешнего вида). Так-же описывается создание атомарных классов и можификаторов цветов...
 задачи:
 1. задача на чекпоинты и их понимание
 2. применение разных дисплеев
 3. задача на align и чекпоинты
 ## 4 Препроцессоры
 ### p1 - Методологии вёрстки
 Лекция посвящена изучению методологии БЭМ (Блок__Элемент--Модификатор) - популярного подхода к именованию CSS-классов, основанного на принципе называния блоков по смыслу и функциональности, которую они выполняют. Кроме БЭМ также рассматриваются альтернативные методологии организации CSS-кода, такие как SMACSS (Scalable and Modular Architecture for CSS) и ECSS (Enduring CSS), каждая из которых предлагает свой подход к структурированию и масштабированию стилей.
 задачи:
 1. задача на вёрстку по БЭМ ( похоже тут старая версия, расходится с тем, что я писал на лекции, то что писал и показывал на лекции было утеряно в одной из веток гита ... )
 ### p2 - препорцессоры  HTML
 Идея препроцессоров - инструмент преобразующий код из одного вида в другой в рамках однго языка, используется для сокращения кода который пишет разработчик и для упрощения жизни в целом.
 в лекции упомянуты несколько препроцессоров, но основной фокус идёт на pug (JADE), далее речь в основном о нём
 Вся лекция в целом описывает работу , начиная от создания структуры и  комментариями и заканчивая  атрибутами  и разными нюансами, далее основаня информация в  названии задач.
 после всех задач была рассмотрена концепция шаблонов для упрощеня создания повторяющихся страниц
 задачи:
 1. базовая структура + атрибуры
 2. структура атрибуты shothand для классов
 3. переменные, инкрементация и подстановка текста
 4. each, подстановка занчений по рано
 5. циклы, вложенность?
 6. mixin - местный аналог макроса из C
 ### p3 - препроцессоры CSS
 Упомянуто несолкьо препроцессоров, фокус на 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-классов для изображений при наведении мыши 
--- a/lectures/temp.js
+++ b/lectures/temp.js
@@ -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)
Author	SHA1	Message	Date
OkunElya	df21df0fff	lectures fix	2026-01-09 19:35:08 +10:00
OkunElya	d10f15a34a	longer lectures	2026-01-03 22:59:02 +10:00
OkunElya	f982d05a54	lectures done	2026-01-03 15:32:33 +10:00
OkunElya	b6776f93fd	duplicated solutions in loops to match themes	2026-01-03 13:44:33 +10:00
OkunElya	e6806a2366	js lec 1 added	2026-01-03 13:40:15 +10:00
OkunElya	cca7d57569	lec 3 done	2026-01-03 01:21:46 +10:00
OkunElya	1c50d7ce0e	finished up to bootstrap	2026-01-01 23:38:59 +10:00
OkunElya	b00d7fb34d	added readme for lectures lec2 done	2026-01-01 20:05:31 +10:00
OkunElya	7818949863	lec 1 added	2026-01-01 18:08:32 +10:00
		`@@ -0,0 +1,2 @@`
							`alert("Hello, world!");`
							`document.write("Hello, world!");`
		`@@ -0,0 +1 @@`
							`let result = n > 0 ? 1 / n : n < 0 ? 1 / n ** 2 : 0;`