# 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 (\) - 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)