Lecture 7 final
This commit is contained in:
179
lec/6-7.md
179
lec/6-7.md
@@ -49,4 +49,181 @@ map.set(key, value)
|
|||||||
|
|
||||||
let set = new Set()
|
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
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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)
|
||||||
BIN
lec/img/Node.png
Normal file
BIN
lec/img/Node.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Reference in New Issue
Block a user