229 lines
5.0 KiB
Markdown
229 lines
5.0 KiB
Markdown
# 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
|
||
|
||
|
||
|
||
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) |