Lecture 7 final

2025-11-14 12:57:45 +03:00
parent 184fc497e8
commit 3611f3fc15
2 changed files with 178 additions and 1 deletions
--- a/lec/6-7.md
+++ b/lec/6-7.md
@@ -49,4 +49,181 @@ 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)
--- a/lec/img/Node.png
+++ b/lec/img/Node.png