Lecture 7 final

Start

lab/1/index.css

@@ -167,7 +167,6 @@ body {
                 & > .task__text {
                     flex: 1;
                     text-align: left;
-                    transition: padding-right 0.3s ease;
                     overflow: hidden;
                     text-overflow: ellipsis;
                 }
@@ -176,6 +175,7 @@ body {
                     flex-direction: column;
                     align-items: center;
                     gap: 4px;
+                    opacity: 60%;
 
                     & > .icon-row {
                         display: flex;
@@ -185,11 +185,10 @@ body {
                     .icon {
                         width: clamp(16px, 1.3vw, 22px);
                         height: auto;
-                        opacity: 60%;
+                    }
 
-                        &:hover{
-                            opacity: 100%;
-                        }
+                    &:hover{
+                        opacity: 100%;
                     }
                 }
             }

lec/4-5.md

@@ -0,0 +1,260 @@
+# LEC 4-5. Java-bruh-script
+## History
+При разработке отталкивался от языков:
+- Self - диалект Small Talk (первый ООП-подобный язык)
+- Scheme - функциональное программирование
+
+## Особенности
+- Мультпарадигменность
+- Динамическая типизация
+- Автоматическая работа с памятью и сборка мусора
+
+## Лексическая структура
+- Unicode
+- Чувствительность к регистру
+- Комментарии в C++ style
+- Необязательность к ;
+
+## Типы данных
+Простейшие типы:
+- number (8 byte)
+- string
+- boolean
+
+Тривиальные типы:
+- null
+- undefined
+
+Составные типы:
+- object
+- array (type of object)
+
+Специальные типы:
+- functions
+- Стандартные классы
+    - Date
+    - RegExp
+    - Error
+    - Math
+
+## Проверка на равенство и идентичности в JS
+ === - идентичность - максимально строгое сравнение
+
+ == - равенство - допустимо приведение типов
+ 
+- null and undefined - равны
+- string -> number
+
+## Преобразование типов
+- string (String, toString, toFixed, toExponential, toPrecision)
+- number (Number, parseInt, parseFloat)
+- default
+
+## Функции
+
+```js
+function someFunc(x, y, z){
+    if (x === undefined){
+        x = 1;
+    }
+    y = y || 555;
+    var a = 25;
+    return x * y + z / a;
+}
+```
+или
+```js
+var someFunc = function(x) {return x * x;}
+```
+или
+```js
+var f = function fact(n){
+    return n > 1
+    ? n * fact(n-1)
+    : 1;
+};
+```
+или
+```js
+var arr = [1,2,3];
+
+arr.sort(function(left, right) {
+    return right - left;
+});
+```
+или если хочется взлома ~~жопы~~
+```js
+var square = new Function("x", "return x * x;");
+```
+
+## Объекты
+### Создание
+```js
+var obj1 = new Object()
+var obj = {};
+var obj3 = {a: 100;};
+```
+
+### Свойства
+- Ключ-строка
+- Значение - любой тип данных, включая объект
+- Флаги: writable, enumerable, configurable
+
+### Удаление объекта
+```js
+delete obj.prop1;
+```
+
+### Проверка существования свойства
+```js
+if ('prop1' in obj){}
+if (obj.prop1 === undefined){}
+if (obj.hasOwnProperty('prop1')){}
+```
+
+### Доступ к свойствам
+```js
+obj.prop1
+obj['prop-2']
+obj[p]
+```
+
+### Перебор свойств объекта
+```js
+for (var key in obj) {};
+Object.keys(obj);
+```
+
+## Массивы
+### Создание массива
+```js
+var a = new Array(1.2, "text", true, {x:1});
+
+var b = new Array(10); // массив из undefined
+
+var c = [];
+c[0] = 1;
+```
+
+### Fun work
+```js
+var arr = [];
+arr[10]= 'hi';
+console.log(arr.length); // 11
+```
+
+### Методы массивов
+- Добавление/удаление
+    - pop/push (конец)
+    - shift/unshift (начало)
+- Преобразование из строки в массив
+    - split
+    - join
+- slice
+- splice
+- sort
+
+## Области видимости
+Всё как в обычных ЯП
+
+## Замыкание
+Замыкание = (функция) + внешнее лексическое окружение
+
+```js
+function makecount(){
+    var cur_co = 1;
+    return function(){
+        return cur_co++;
+    };
+}
+
+var counter = makecount();
+```
+
+## Контекст-this
+```js
+var admin = {name: "PIE"}
+var user = {name : "CHOCO"}
+function func(){
+    alert(this.name)
+}
+admin.g = func;
+user.u = func;
+admin.g();  // PIE
+user.u();   // CHOCO
+func()      // undefined 
+```
+
+### Манипуляции с контекстом
+- ```func.call(context, arg1  arg2, ...);``` - вызывает функцию однократно
+- ```func.apply(context, [arg1, arg2, ...]);``` - то же самое, но с двумя аргументами
+- ```var wrapper = func.bind(context[, arg1, arg2, ...]);``` - создание копии функции, но фиксируется контекст функции и аргументы - карирование
+
+## ООП-функциональный стиль
+Задание публичного:
+- метода
+```js
+this.getVar = function(){
+    return _another;
+};
+```
+- свойства:
+```js
+    this._dem = 1;
+```
+
+Приватное свойство и/или метод задаётся так же, но без ```this```.
+
+### Наследование
+Базовый класс
+```js
+function A(){
+    this.enable = function(){
+        ...
+    }
+    ...
+}
+```
+Производный класс
+```js
+function B(){
+    Machine.call(this, [, arg1, ...]);
+    // Machine.apply(this, [, args]);
+
+    ...
+}
+```
+## Прототипный стиль ООП
+Функции остались (блень)
+
+Базовый класс
+```js
+var car {
+    fuel: 0.7;
+    fph: 9.;
+    ride: function(dist){
+        ...
+    };
+}
+```
+Производный класс:
+```js
+var truck {
+    longback: true;
+    __proto__: car;
+}
+
+truck.ride();
+```
+
+```js
+obj.hasOwnProperty()
+Object.getPrototypeOf(obj, [proto])
+obj1 instanceof obj2
+obj2.isPrototypeOf(obj1)
+```
+
+В прототипном стиле все поля пубичные
+
+## Обработка операций
+Событийно-ориентированный 

lec/6-7.md

@@ -0,0 +1,229 @@
+# LEC 6-7. Java-bruh-script, but ES6
+
+## New features
+- Строки-шаблоны
+```js
+var name = `Rk`;
+var str = `Hello, ${name}`;
+```
+- Стрелочные функции
+```js
+var f = (arg1) => {
+    ...
+    return smth;
+};
+
+arr.sort((left, right) => right - left);
+```
+- Переменные (создаются не в window-контексте) и константы
+```js
+let n = `P`
+const obj = {greet : `Oh`};
+```
+- Тип данных Symbol - уникальные идентификаторы 
+```js
+let s1 = Symbol(`123`)
+let s2 = Symbol(`123`)
+s1 === s2 // false
+```
+- Деструктуризация и spread - разбор объекта на составляющие
+```js
+let [
+    first_name,
+    last_name,
+    ...
+] = "A B C D".split(" ");
+
+let options = {title: "Menu"};
+let {
+    width = 100,
+    height = 200,
+    title
+} = options;
+```
+
+- Мапы и сеты - в качестве ключа может быть что угодно
+```js
+let map = new Map()
+map.set(key, value)
+
+let set = new Set()
+
+```
+
+## Области видимости
+```js
+// global
+let a = 'a';
+const b = 123; // ссылка на объект
+
+function someF(name){
+    // block scope
+    let a = 'asd';
+    for (let i = 0; i < 10; i++){
+        // block scope (loop)
+    }
+}
+
+// a и someF - глобальные перменные, но не свойства глобального объекта window
+
+// alert(i); не сработает
+```
+Перекрытие
+
+Поднятие (hoisting) - поднятие всех неймингов более верхнего уровня (блок -> функциональный блок -> глобально)
+
+Temporal dead zone - термин, обозначающий состояние, в котором переменные недоступны
+
+## ООП ~~(ура)~~
+```js
+class LOL [extends MEME]{
+    prop1 = 'lul' // public
+    #prop2 = 'fun' // private
+    constrictor(arg1, arg2) {
+        super(arg2); // parent's constructor
+        this.prop1 = arg1;
+        this.#prop2 = arg2;
+    }
+
+    // getters and setters
+    set prop1(value){};
+    get prop1() {return this.prop1;}
+
+    // methods
+    method1(params) {}
+    static sMethod(params){} // can be called by LOL.sMethod(params)
+}
+```
+
+```js
+class Test_1{
+    a;
+    b;
+    
+    constructor(a_){
+        this.a = a_;
+    }
+    method1() {console.log(this);}
+};
+
+class Test_2 extends Test_1 {
+    b;
+    constructor(a_, b_){
+        super(a_);
+        this.b = b_;
+    }
+    method2() {console.log(this);}
+}
+```
+
+## Окружение JS
+
+window -> DOM -> Document, ...
+
+window-> BOM -> navigator, screen, location, frames, history, XMLHttpRequest, ...
+
+window -> Javascript -> Object, Array, Function, ...
+
+### DOM
+Основные узлы:
+- Document 
+- Элементы (текст, комментарии и прочее)
+- Узлы
+
+#### Навигация по DOM
+
+По Document
+- document
+- document.documentElement (\<HTML>)
+- document.body (если внутри body)
+- documemt.header
+
+По узлам:
+- parentNode
+- childNode
+- previousSibling
+- nextSibling
+- firstChild
+- lastChild
+
+#### Поиск по DOM
+- document.getElementById(id)
+- elem.getElementsByTagName(tag)
+- document.getElementsByName(id)
+- elem.getElementsByClassName(className)
+- elem.querySelectorAll(selector)
+- elem.querySelector(selector)
+- elem.matches(selector)
+- elem.closest(selector)
+
+#### Свойства узлов в DOM
+Тип узла:
+- nodeType
+
+Тег узла:
+- NodeName/ tagName
+
+Содержимое узла:
+- innerHTML / data
+
+Видимость узла:
+- hidden
+
+![Scheme](img/Node.png)
+
+DOM-свойства:
+- Могут иметь любое значение
+- Чувстивтельны к регистру
+- Работаю за счёт того, что DOM-узлы объекты JS
+
+Атрибуты:
+- Строки
+- Пофиг на регистр
+- Видны в innerHTML
+
+Доступ к аттрибутам:
+- elem.hasAttribute(name)
+- elem.getAttribute(name)
+- elem.setAttribute(name, value)
+- elem.removeAttribute(name)
+- elem.attributes
+
+#### Добавление и удаление узлов
+Создание элемента/узла:
+- document.createElement(tag)
+- document.createTextNode(text)
+
+Клонирование элемента или узла:
+- elem.cloneNode(true/false)
+
+Добавление элемента/узла:
+- parentElem.appendChild(elem)
+- parentElem.insertBefore(elem, nextSibling)
+
+Удаление элемента:
+- parentElem.removeChild(elem)
+- parentElem.replaceChild(newElem, elem)
+- elem.remove()
+
+
+#### Браузерные события
+1. Клавиатурные события
+2. События на элементах управления
+3. События мыши
+4. События документа
+
+Назначения обработчика события:
+- Атрибут HTML
+- Свойство DOM-объекта
+
+Свойства объекта события:
+- event.type
+- event.currentTarget
+- event.clientX/clientY
+- event.message and etc.
+
+Фазы событий:
+- Погружение (capturing)
+- Цель (target)
+- Всплытие (bubbling)