diff --git a/lec/6-7.md b/lec/6-7.md index 9ebb370..252820d 100644 --- a/lec/6-7.md +++ b/lec/6-7.md @@ -49,4 +49,181 @@ map.set(key, value) let set = new Set() -``` \ No newline at end of file +``` + +## Области видимости +```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 (\) +- 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) \ No newline at end of file diff --git a/lec/img/Node.png b/lec/img/Node.png new file mode 100644 index 0000000..24229c6 Binary files /dev/null and b/lec/img/Node.png differ