Lecture 7 final

Start

lec/4-5.md

@@ -1,4 +1,4 @@
-# LEC 4. Java-bruh-script
+# LEC 4-5. Java-bruh-script
 ## History
 При разработке отталкивался от языков:
 - Self - диалект Small Talk (первый ООП-подобный язык)
@@ -153,3 +153,108 @@ console.log(arr.length); // 11
 - 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)