ParkSuMin/WebBurBurBur

Fork 0

Files

ParkSuMin 3611f3fc15 Lecture 7 final

2025-11-14 12:57:45 +03:00

5.0 KiB

Raw Permalink Blame History

LEC 6-7. Java-bruh-script, but ES6

New features

Строки-шаблоны

var name = `Rk`;
var str = `Hello, ${name}`;

Стрелочные функции

var f = (arg1) => {
    ...
    return smth;
};

arr.sort((left, right) => right - left);

Переменные (создаются не в window-контексте) и константы

let n = `P`
const obj = {greet : `Oh`};

Тип данных Symbol - уникальные идентификаторы

let s1 = Symbol(`123`)
let s2 = Symbol(`123`)
s1 === s2 // false

Деструктуризация и spread - разбор объекта на составляющие

let [
    first_name,
    last_name,
    ...
] = "A B C D".split(" ");

let options = {title: "Menu"};
let {
    width = 100,
    height = 200,
    title
} = options;

Мапы и сеты - в качестве ключа может быть что угодно

let map = new Map()
map.set(key, value)

let set = new Set()

Области видимости

// 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 - термин, обозначающий состояние, в котором переменные недоступны

ООП (ура)

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)
}

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

Браузерные события

Клавиатурные события
События на элементах управления
События мыши
События документа

Назначения обработчика события:

Атрибут HTML
Свойство DOM-объекта

Свойства объекта события:

event.type
event.currentTarget
event.clientX/clientY
event.message and etc.

Фазы событий:

Погружение (capturing)
Цель (target)
Всплытие (bubbling)

5.0 KiB Raw Permalink Blame History Unescape Escape