С нуля до результата

JAVA
SCRIPT
JS c нуля до результата
Навигация
01-Основы работы с DOM
1 - Что такое - переменные
2 - Что такое - выражения и инструкции
3 - Типы данных
4 - Особенности чисел и строк
5 - Математические операторы
6 - Операторы сравнения
7 - Приоритетность операторов
8 - Преобразование типов данных
9 - Итоги изученного
10 - Условное ветвление: if; Else;
11 - Логические операторы
12 - Условный оператор ?
02-Углубление в основы JS
13 - Используйте строгий режим "use strict"
14 - Введение в функции
15 - Области видимости
16 - Параметры функций
17 - Функции "Колл-бэки"
18 - Стрелочные функции
19 - Ссылочный тип Объект — Object
20 - Вложенные свойства Объектов
21 - Сокращенная запись свойств Объектов
22 - Как создавать функции в объектах. Введение в this
23 - Ссылочный тип ARRAY - массив
24 - Введение в методы массива
25 - Цикл for
26 - Цикл for break / continue
27 - Цикл while do while
28 - Мутация объектов
JS c нуля до результата
Навигация

03-Основы JS 04-Углубленная работа с данными

29 - Введение в D.O.M. 41 - Как работает контекст вызова this
30 - "Прямое" Получение HTML элементов 42 - Деструктуризация массивов
31 - Получение через наследование и родство 43 - Деструктуризация объектов
HTML элементов 44 - Оператор spread
32 - Псевдо-массив (коллекция) 45 - Оператор rest
33 - Циклы for in и for of 46 - Введение в классы JS
34 - Изменение HTML элементов 47 - Класс Set
35 - Создание и вставка новых элементов 48 - Класс Map
36 - Методы точечной вставки элементов 49 - Конвертация различных структур данных
37 - Перемещение, клонирование и удаление
элеметнов HTML 05-Работа со строками
38 - Изменение стилей элементов
50 - Методы строк ч. 1
39 - Доступ к атрибутам тегов
51 - Методы строк ч. 2
40 - События элементов DOM
52 - Методы строк ч. 3
JS c нуля до результата
Навигация
06-Углубление в работу функций 08-Работа с числами и датами
53 - Параметры функций по умолчанию 70 - Конвертация и генерациячисел
54 - Параметры функций по ссылке или по 71 - Что такое bigInt
значению 72 - Работа с датами
55 - Функции первого класса и высшего порядка 73 - Объект Intl-Date
56 - Функции, которые возвращают функции 74 - Объект Intl-Num
57 - Метод функций call() 75 - setTimeout & setInterval
58 - Метод функций bind()

07-Углубленние в работу с массивами 09-Углубление в работу с DOM

59 - Базовые методы массивов 76 - Живые и статичные коллекции
60 - Метод forEach() 77 - Координаты элементов
61 - Метод map() 78 - Всплытие событий
62 - Метод filter() 79 - Делегирование событий
63 - Метод reduce() 80 - Intersection Observer API
64 - Метод find() 81 - defer vs async
65 - Метод findIndex()
66 - Методы some & every()
67 - Метод flat()
68 - Метод sort()
69 - Методы fill() Array.from()
С нуля до результата

JAVA
SCRIPT
Java Script - это:

ВЫРАЖЕНИЯ

ФУНКЦИИ

ОБЪЕКТЫ
Практически всё в Java
Script это

ОБЪЕКТЫ
"ОБЪЕКТЫ" — ЭТО НАБОРЫ
"СВОЙСТВ"

КЛЮЧ: ЗНАЧЕНИЕ
ПРИМЕР ОБЪЕКТА
Что такое

Переменные
3 варианта объявления
переменных

VAR
LET
CONST
3 варианта объявления
переменных

VAR Старый вариант записи

LET Новый вариант записи

CONST Неизменяемая переменная

Имена переменных
очень важны
Все остальные переменные
(используются чаще всего)

camelCase
Типы и классы

PascalCase
Значения известны до запуска
приложения и не меняются

DB_PASSWORD
Названия переменных должны
быть самоочевидными
Не используйте:

a / b / c / xyz
Используйте:

userName /
shoppingCart
 Существуют
зарезервированные слова

Например:

let / const / function

и так далее
Существуют правила
написания
Регистр имеет значение
Переменные с именами apple и APPLE – это
две разные переменные

Имя переменной должно

содержать только буквы, цифры
или символы $ и _
let my-name; // дефис '-' не разрешён в имени

Первый символ не должен быть

цифрой
let 1a; // не может начинаться с цифры
Java Script - это:

ВЫРАЖЕНИЯ
ФУНКЦИИ
ОБЪЕКТЫ
ВЫРАЖЕНИЯ
И
ИНСТРУКЦИИ
ВЫРАЖЕНИЕ
ВОЗВРАЩАЕТ
ЗНАЧЕНИЕ

ИНСТРУКЦИИ
НЕ
ВОЗВРАЩАЮТ
ЗНАЧЕНИЕ
ВЫРАЖЕНИЯ:
 ИНСТРУКЦИИ

управление потоком выполнения

(if и else, switch, throw и так далее)

итерации (for, while и так далее)

объявление значений (var, let, const)

Java Script

ТИПЫ
ДАННЫХ
Существуют всего 8 типов
данных

7 примитивных типов
и 1 ссылочный тип
Ссылочный тип — это Object
7 примитивных типов это:

Число (Number)
Строка (String)
Логическое (Boolean)
Undefined
Null
Symbol
BigInt
Java Script

Особенности
Чисел и
строк
 Числа
Кроме обычных
чисел существуют:

Infinity

-Infinity

NaN
 Строки
Есть 3 вида кавычек:
Для строк

"Hello world"
Для строк

'Hello world'
Для выражений внутри строк

`Hello ${name}`
Java Script

Операторы
 Оператор — это то, что
применяется к операнду
и всегда возвращает
результат

Оператор Операнд

5+5
Операнд
 Унарный и Бинарный
Оператор
Унарный используется с одним операндом
Бинарный с двумя операндами

Унарный оператор
(используется с
Бинарный оператор переменными)

Операнд Операнд

5+5
Оператор
 В JAVA SCRIPT
очень много операторов
Математические операторы

унарный плюс + и минус -

сложение +
вычитание -
умножение *
деление /
остаток от деления %
возведение в степень **
Операторы инкремента и
декремента
Постфиксная форма

myAge++
увеличение значения переменной на

myAge--
уменьшение значения переменной на

Префиксная форма

++myAge
увеличение значения переменной на

--myAge
уменьшение значения переменной на
Оператор присваивания
Оператор присваивания

let myName = "Dima"

Не "равно",
а "присвоить"

Не "равно",
а "присвоить"
Java Script

Операторы
часть 2
Операторы сравнения
Больше/меньше:

a>b/a<b
Больше/меньше или равно:

a >= b, a <= b
Не строгое равно:

a == b
Строгое равно:

a === b
Не равно:

a != b
Все операторы сравнения
возвращают значение
логического типа:
true – означает «да», «верно», «истина».
false – означает «нет», «неверно», «ложь».
Сравнение разных типов
При сравнении значений разных
типов JavaScript приводит каждое
из них к числу
 Сравнение строк
Строки сравниваются посимвольно

Если первый символ первой строки больше (меньше), чем первый

символ второй строки, то первая строка больше (меньше) второй
строки. Сравнение завершено.

Если обе строки заканчиваются одновременно, то они равны.

Иначе, большей считается более длинная строка.

Строчныйе (маленькие) буквы имеют больший приоритет.

Сравнение с null и undefined

При строгом равенстве ===

Эти значения различны, так как различны их типы

При нестрогом равенстве ==

Эти значения равны друг другу и не равны никаким другим
значениям. Это специальное правило языка.

При использовании математических операторов и других

операторов сравнения < > <= >=
Значения null/undefined преобразуются к числам: null становится
0, а undefined – NaN
Java Script

Приоритет
операторов
3 вещи определяют приоритет
выполнения операторов в
выражениях

"Индекс" приоритетности

Правило последовательности

Круглые скобки, как прямой указатель на

то, что это выражение нужно вычислить в
первую очередь
Java Script

Преобразование
типов данных
Существует 3 наиболее широко
используемых преобразования

Строковое

Численное

Логическое
 Для специального (директивного)
преобразования этих трех типов используют
3 функции

Number()

String()

Boolean()
Правила численного преобразования

Математические и логические операторы

приводят типы в число тогда, когда в
выражениях есть числа

Например в таких выражениях:

"2" + 1 или "3" > 2

Строковое преобразование

Преобразование происходит
очевидным образом:

false становится "false",

null становится "null" ,
123 становится "123"
и т.п.
 Логическое преобразование

Происходит в логических
операциях

может быть выполнено явно с

помощью функции Boolean(value)
Некоторые методы (функции) и операторы
преобразуют один тип в другой
Унарный
оператор +

+"100" вернет Number

Метод alert(100) вернет строку

"100"
При сравнении значений все значения
преобразуются в число
Java Script

Подведем
итоги
Java Script — это:

ВЫРАЖЕНИЯ
и инструкции
(let; const; if...)

ФУНКЦИИ

ОБЪЕКТЫ

ОПЕРАТОРЫ
(+; -; ==; <; +=; *; typeof; и так далее)
 Выражения всегда
возвращают значения
определенного типа:
Всего есть 7 примитивных и 1 ссылочный
типов данных тип данных

Число (Number) Объект (Object)

Строка (String)
Логическое (Boolean)
Undefined
Null
Symbol
BigInt
Типы данных могут быть преобразованы в
другие типы данных
Преобразование
(конвертация) происходит через:
Директивные функции C помощью
встроенных методов,
String() например:
Number()
Boolean() метод alert()
преобразует данные
в строку

С помощью
операторов

Например:
"2" + 1 или "3" > 2

преобразует
данные в числа
"ОБЪЕКТЫ" — ЭТО НАБОРЫ
"СВОЙСТВ"
КЛЮЧ: ЗНАЧЕНИЕ
ПРИМЕР ОБЪЕКТА
СВОЙСТВА ОБЪЕКТА
МОЖНО УВИДЕТЬ С
ПОМОЩЬЮ:

console.dir(Object)
Java Script
Условное
ветвление:
if; Else;
 Инструкция if

Инструкция:
if (условие) {
Выполни это
}

Преобразует условие в скобках к булевому (true / false) и, если

результат true, то выполняет блок кода, если false, то не выполняет
Инструкция if с else

Инструкция
if (условие) {
Выполни это
} else {
Выполни это, если условие ложно}

Преобразует условие в скобках к булевому (true / false) и, если

результат true, то выполняет блок кода, если false, то выполнит условие
в блоке else
Инструкция if с else if
Инструкция
if (условие) {
Выполни это
} else if (другое условие) {
Выполни это, если первое ложно
}else if (другое условие){
Выполни это, если первое и второе ложно
} else if (другое условие){
и так далее
} else {
Выполни это, если все условия сверху false
}

Преобразует условие в скобках к булевому (true / false) и, если

результат true, то выполняет блок кода, если false, то выполнит
следующее условие в блоке else if, если и оно ложно выполнит
следующий else if. Если все ложно - выполнит else.
Java Script

Логические
операторы
В JS существует 4
логических оператора

|| (ИЛИ)

&& (И)

! (НЕ)

Оператор нулевого
слияния (??)
Логический оператор
|| (ИЛИ)

Вернет первое истинное

значение или последнее
ложное

Каждый операнд конвертирует в логическое значение. Если

результат true, останавливается и возвращает исходное
значение этого операнда.

Если все операнды являются ложными (false), возвращает

последний из них.
Логический оператор
&& (И)

Вернет первое ложное значение

или последнее значение, если
все значения true

Каждый операнд преобразует в логическое значение. Если

результат false, останавливается и возвращает исходное
значение этого операнда.

Если все операнды были истинными, возвращается

последний.
Логический оператор
! (НЕ)

Сначала приводит операнд к

логическому типу true или false
Затем возвращает
противоположное значение
Оператор нулевого слияния
??

Возвращает первый операнд,

если он не null/undefined, иначе
второй.
Различия ?? и ||

Важное различие между ними заключается в том, что:

|| возвращает первое истинное значение,

?? возвращает первое определённое значение.

Оператор || не различает false, 0, пустую строку "" и

null/undefined. Для него они все одинаковы, т.е.
являются ложными значениями
Использование ??
вместе с && или ||

По соображениям безопасности JavaScript запрещает

использование оператора ?? вместе с && и ||, если
приоритет явно не указан при помощи круглых скобок.
Java Script
Условный
оператор
?
 Условный оператор
?

Оператор представлен знаком вопроса ?.

Его также называют «тернарный», так как этот

оператор, единственный в своём роде, имеет
три операнда
IF else
Синтаксис:
 Условный оператор
?
Выполняет тоже самое, что и инструкция if else
Но есть 2 особенности:

1.Тернарный оператор - это выражение, которое

возвращает значение. Инструкция if else только
проверяет условия.

Например, результат выражения мы можем

присвоить переменной

2.Тернарный оператор - короче (но в свою очередь

хуже читается).
 Несколько
операторов „?“

Первый знак вопроса проверяет age < 3.

Если верно – возвращает 'Здравствуй, малыш!'. В противном случае

проверяет выражение после двоеточия „:“, вычисляет age < 18.

Если это верно – возвращает 'Привет!'. В противном случае проверяет

выражение после следующего двоеточия „:“, вычисляет age < 100.

Если это верно – возвращает 'Здравствуйте!'.

В противном случае возвращает выражение после последнего двоеточия –

'Какой необычный возраст!'.
Java Script
Используйте
строгий режим
"use strict"
"use strict"
— это инструкция интерпретатору
серьезней отслеживать ваш код

Она запрещает
использование
необъявленных переменных
Java Script
Функции
Функции
Позволяют записать код который мы
можем быстро переиспользовать.

Например, alert() — это встроенная в JS

функция

Мы можем создавать свои функции:

 Функции всегда
возвращают значения
По умолчанию, функция выполнит блок кода
в фигурных скобках и вернет undefuned

Если есть ключевое слово return, то вернет

то, что будет прописано после слова return
 Параметры функций

Параметры
Можно сказать переменные,
которые могут использоваться в
функции

Можно передавать меньше

Аргументы, для параметров, чем создано
параметров аргументов в функции (или вообще не
передавать)
Можно сказать значения
переменных, которые могут
использоваться в функции
 Зачем функция что-то
возвращает?

Мы можем записать результат любой

функции (то, что она возвращает) в
переменную
 Function Expression vs
Function Declaration
Function Declaration: функция объявляется
отдельной конструкцией «function…» в
основном потоке кода
Function Declaration
обрабатываются перед выполнением
блока кода. Они видны во всём блоке.
То есть, создай Function Declaration в
любом месте кода и используй в
любом месте.
Например, сверху кода перед
созданием функции
Function Expression: функция, созданная внутри
другого выражения. В данном случае функция
создаётся в правой части «выражения
присваивания» =
Функции, объявленные при помощи
Function Expression, создаются только
когда поток выполнения достигает
их.
То есть сверху создай Function
Expression, а после используй
Java Script

Области
видимости
 Области видимости
Глобальная область
видимости

Локальная 1 уровня
область видимости
функции myFunction

Локальная 2 уровня
область видимости
функции myFunction2

Поиск переменных происходит

изнутри (из самой глубокой области)
наружу, но не наоборот
 Поиск в разных
областях видимости

Поиск переменных происходит Метод console.log ищет переменную

изнутри (из самой глубокой области) а только в глобальной области.
наружу, но не наоборот Не находит и выдает ошибку.
 Правила работы с
переменными

1. Все переменные объявляются перед их

использованием

2. Используем const везде, где это возможно

3. Внутри функций не изменяйте переменные из

внешних областей видимости
Java Script

Параметры
функций
 Вы можете создавать
параметры по умолчанию

В параметры можно присваивать по

умолчанию выражения

Они будут использованы, если не

передать аргументы при вызове
функции
Java Script

Функции -
«колбэки»
 Функции -
«колбэки»
Это не отдельный тип функций!

Функции - «колбэки» — это просто функция,

которая вызывается в качестве аргумента для
параметра функции
Java Script

Стрелочные
функции =>
Стрелочные функции =>
Это простой и лаконичный синтаксис для
создания функций, который часто лучше,
чем Function Expression

Можно сказать, что стрелочные функции —

это просто упрощенные (в визуальном
виде) function expression

function expression

Стрелочная функция
 Способ сокращения
стрелочной функции
Написание стрелочной функции можно сократить
1. Если используется только 1 параметр, то можно не
обрамлять его в круглые скобки. Если аргументов нет,
круглые скобки обязательны Параметр только 1, поэтому
нет круглых скобок

2. Если тело функции (то что в фигурных скобках) занимает

одну строку, фигурные скобки можно не писать

3. Если тело функции в одну строку, т.е. без фигурных скобок,

инструкция return создается автоматически
 Итого:
Есть 2 вида функций:

Function Expression Function Declaration

Анонимные функции. Функции с отдельным именем, их
Можно вызвать только после можно вызывать до создания
создания функции функции (Выше по коду)

Функции-
«колбэки»
Функции, которые используются в
качестве параметров для другой функции

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

Упрощенный синтаксис Function Expression
Java Script

Ссылочный тип
Объект — Object
 Объекты
Практически все сущности в
Java Script - это объекты
Объекты - это набор
свойств:
Ключ: значение

Ключ – это строка (также называемая «именем свойства»),

а значение может быть чем угодно (числом, функцией, еще одним
объектом и т.д.)
 Объекты - синтаксис

У каждого свойства есть ключ (также называемый «имя» или

«идентификатор»)

После имени свойства следует двоеточие ":" и затем указывается

значение свойства

Если в объекте несколько свойств, то они перечисляются через

запятую
Объект — это ссылочный
тип
Это значит, что переменная user содержит
только ссылку на объект

И этот объект хранится в другом месте

памяти компьютера

Подробнее про это поговорим в теме "Мутации объектов"

 Объект — доступ к
свойствам

Доступ к свойствам можно получить через

символ точка "."

"Название объекта.свойство"
 Изменение значений
свойств объекта
Вы можете изменять значения существующих
свойств объекта, используя точечную запись
с помощью знака присваивания "="
 Добавление новых свойств
объекта
Вы можете добавлять новые свойства в объект
так же с помощью точечной записи:

Новое значение
новое имя свойства свойства
(ключ) Получаем объект с
тремя свойствами
Удаление свойств объекта

Удалять свойства в объекте Вы можете с помощью

оператора delete
Обратите внимание на const
Почему мы можем изменять объект, созданный с
помощью const?

Потому что объект — это ссылочный тип

В переменной user хранится только ссылка на объект, который

лежит в другом месте памяти компьютера

Сам объект мы можем изменять (его свойства и значения)

Но присваивать переменной user другой объект или другой тип
данных мы не можем
 Вместо точки "." Вы можете
использовать квадратные скобки "[ ]"

Синтаксис будет выглядеть следующим образом:

 Зачем использовать квадратные
скобки вместо точки?

Присваиваем переменной строку "sex"

С помощью квадратных скобок создаем свойство sex со значением "male"

Через точку так не получится

Создастся свойство с именем sexPropertyName и значением "male"
Java Script

Вложенные свойства
Объектов
 В объект можно
вложить другой объект
 Доступ к вложенным свойствам
Изменять, удалять или добавлять новые свойства можно через
точку или через квадратные скобки
Какую запись использовать?

Если нужно использовать выражение для работы со

свойством — используем запись с квадратными
скобками

Во всех остальных случаях — используем точечную

запись
Java Script
Сокращенная
запись свойств
Объектов
 Как сократить запись свойств?
Если до объекта есть переменная с данными, которые мы хотим
использовать как значения того или иного свойства в объекте
и название переменной совпадает с названием свойства,
запись можно сократить
Было

Стало

Для лучшего восприятия кода сокращенные свойства рекомендуется

размещать в начале объекта
Java Script

Как создавать
функции в объектах
И немного про this
 Синтаксис записи
функции в объекте
Function expression

Имя функции
(ключ функции)
Функция

Вызов функции
 Синтаксис записи
функции в объекте
Function declaration, которую поместили в
качестве значения свойства

Function
Declaration

Значение
— это функция которая
создана до создания
объекта

Вызов функции
Сокращенный синтаксис
записи функций
Function Function
expression Declaration

Не пишем слово
Точно так же, как
function
мы делали с
переменными
Но что будет, если мы захотим переименовать
переменную с объектом внутри?

Дали новое имя

Все сломалось...
Здесь нам приходит на помощь
метод объекта this

Слово this подставляет вместо себя название объекта

Заменили имя
объекта на метод
this
 Использование this в функции
Второй вариант применения метода this:

Одна функция со словом

this работает во
множестве объектов
Java Script

Ссылочный тип
ARRAY - массив
Массив — это упорядоченная коллекция
данных
В объектах мы даем название свойства строкой
(ключ-значение)
Объект:

В массивах мы не даем названия свойств. Названия

формируются по порядку цифрами.

Массив":

Проще говоря массив — это

объект с цифровыми именами свойств
 Элементы массива нумеруются с нуля

Общее число элементов массива содержится в его свойстве length:

 Доступ к элементам массива

Мы можем использовать отдельный элемент, получив доступ к

нему через квадратные скобки

Мы можем заменить элемент:

Или добавить новое свойство:

В массиве могут хранится любые типы
данных, в том числе и функции

Также, внутри квадратных скобок могут вычисляться

выражения или использоваться переменные
 Мы можем получить последний элемент массива
таким способом

Да, кстати, так же, как и в объектах, запятую после последнего элемента
можно оставлять
«Висячая запятая» упрощает процесс добавления/удаления элементов, так
как все строки становятся идентичными

Но есть и более современный синтаксис доступа к последнему элементу

массива через метод массива at

Результат тот же самый, но слов меньше

 Массив — это ссылочный тип

Вы знаете, что ссылочный тип всего один и это объект

Так вот, массив — это вторая разновидность объекта

Поэтому, так же как и в объектах, используя

инструкцию const, Вы можете менять элементы
массива, но не заменять массив другим типом данных
или другим массивом
Java Script

Методы массива
4 метода добавления и удаления
Добавление элемента в конец массива

Добавление элемента в начало массива

Удаление последнего элемента массива

Удаление первого элемента массива

Метод точечного добавления и удаления
Метод splice

С какого Сколько Какие

элемента элементов элементы
начать заменить добавить по
(По индексу) (По количеству) указанным
параметрам

Если просто хотите удалить элемент

Начиная с Удалить
первого количество
элемента элементов
(По индексу) (По количеству)

Если хотите добавить элементы в конкретное место массива без удаления

Начиная с Какие
Удалить 0 элементы
первого
элементов добавить по
элемента
(По индексу) указанным
(По индексу)
параметрам
 Метод splice возвращает массив
удаленных элементов

Например, нам нужно удалить часть данных из одного массива и записать

эти данные в новую переменную

Начиная с Удалить
Присваиваем
первого количество
результат
элемента элементов
функции splice
(По индексу) (По количеству)
переменной
dataFromUserArr
Методы работы с данными массива

Как узнать есть ли конкретный

элемент в массиве?
Для этого существует метод arr.includes()
Он возвращает булевое значение
Либо true либо false

Как узнать индекс определенного

элемента в массиве?
Для этого существует метод arr.indexOf()
Он возвращает число индекса, если
значение в массиве есть
Или -1, если такого значения нет
Java Script

Цикл for
 Циклы нужны, когда необходимо
повторить какое либо действие много раз,
если условие верно
Условие цикла.
Проверяется перед каждой
Начало цикла итерацией цикла. Шаг цикла.
(отсчётная точка). Если оно вычислится в false, цикл Выполняется после тела цикла на
Создаем переменную остановится. каждой итерации перед
i со значением 1 проверкой условия.

1 4
2
3

Результат выполнение цикла:

 Пропуск частей «for»
Любая часть for может быть пропущена

Мы можем пропустить начало, если нам ничего не нужно делать

перед стартом цикла:

Можно убрать и шаг:

Можно вообще убрать всё, получив бесконечный цикл:

При этом, сами точки с запятой ; обязательно должны

присутствовать, иначе будет ошибка синтаксиса
Java Script

Цикл for
break / continue
 continue
Используется при проверке условия внутри цикла.
Если условие true переходит к следующей итерации, пропуская инструкции
текущей итерации.
 break
Используется при проверке условия внутри цикла.
Если условие true полностью прерывает цикл и выходит из него.
Java Script

Цикл while
do while
 Синтаксис записи цикла While

Берет внешнюю переменную и

проверяет ее на правдивость по
условию в скобках.
Если true выполняет код в
фигурных скобках

Синтаксис записи цикла do While

Выполни действия в фигурных

скобках хотя бы раз, даже, если
условие ложно
Цикл While может добиться того же
результата, что и цикл for
Цикл While

VS

Цикл For

Одинаковый результат
 Что использовать?

Если в коде не определено количество

итераций и оно, например,
генерируется, автоматически, то
используем while, если определено, то
for

Если в цикле нужно использовать

прерывание, break или continue, то
используем for
Java Script

Мутация
объектов
 В JS есть 2 типа данных
Примитивные типы данных Ссылочные типы данных

Число (Number) Объекты

Строка (String) Массивы (Объекты)
Логическое (Boolean)
Undefined
Null
Symbol
BigInt
Копирование примитивов
Примитивные типы данных копируются
по значению
 Копирование ссылочных типов

Ссылочные типы данных

копируются по ссылке

Вроде поменяли свойство age,

только в obj, но на самом деле
поменяли его и в obj2 тоже
Как же создать независимую
копию объекта?
Есть несколько методов

Первый — это метод Object.assign()

НО! Если у объекта есть вложенные

объекты, то ссылки на них сохраняются!
Второй вариант более короткий

Оператор разделения объекта на свойства

НО! Если у объекта есть вложенные

объекты, то ссылки на них сохраняются!
Вложенные объекты не копируются
независимо
Через Object.assign Через оператор ...
Как скопировать вложенные объекты
независимо
Для этого необходимо конвертировать объект JS в объект формата JSON
и после конвертировать обратно в объект формата JS

Консоль выведет 2 разных независимых объекта

Java Script

Введение в
D.O.M.
 Окружение Java Script
Изначально JS создавался только для браузеров, но сейчас этот язык
мультиплатформенный

Это значит, что с помощью JS можно не только работать в браузере, но и

создавать игры, консольные программы, серверную часть и т.д

Окружением называется то, где используется JS

Таким окружением, например, является браузер

В свою очередь, окружение предоставляет ряд готовых объектов,

свойств и методов, которые заранее в ней созданы, в дополнении к
базовым возможностям JS
Чтобы мы их могли использовать непосредственно для работы именно в
этом окружении (В этой среде)

Можете представлять браузер, как библиотеку готовых объектов, в

которых есть методы (функции), в которых прописаны необходимые
алгоритмы для работы, например, с HTML тегами.

Например, в работе JS в браузере есть объект window, который

содержит ряд свойств и значений
Например, высота и ширина окна браузера
 «Document Object Model», коротко DOM
Объектная модель документа, которая представляет все содержимое
страницы в виде объектов, которые можно менять

1-DOM - это дерево HTML

тегов. Схема, строение,
наследование и т.д

2-DOM - это объекты этой

схемы.
Даже текст на HTML странице
- это объект

Эта страшная аббревиатура означает, что все HTML элементы — это

объекты
У всех объектов есть свойства и методы.
Например, для манипуляции с ними

А так как HTML элементы — это объекты, то это значит, что мы можем
манипулировать ими с помощью JS

Исходя из этого, нам всего лишь нужно выяснить и выучить наиболее

часто используемые объекты и их методы для манипуляций с
элементами страниц
Java Script

"Прямое"
Получение
HTML элементов
 Объект document
На каждой HTML странице существует объект document, у которого есть методы
для получения доступа к элементам(тегам) html страницы

Для доступа к конкретному элементу по его селектору используем метод объекта

document.querySelector(".nav")

document.querySelector() Работает просто

Внутрь скобок в кавычках мы прописываем тот селектор, к которому хотим

получить доступ
Точно так же, как при обращении в CSS для манипуляциями со стилями

Например:
document.querySelector(".nav") Получаем первый на странице, элемент с классом
nav

document.querySelector("#nav") Получаем первый на странице элемент с id nav

document.querySelector(".list .list__item") Получаем первый на странице дочерний

элемент, элемента под классом .list
 Получение коллекции элементов

Чтобы получить все элементы под существующем селектором, необходимо

использовать метод:

document.querySelectorAll(".nav__item")

Этот метод вернет псевдо-массив элеметов

или по-другому коллекцию элементов
(О коллекциях дальше по курсу)

В скобки метода можно указать любой селектор как в CSS

 Есть дополнительные методы
получения доступа к элементам
Я бы назвал их устаревшими и Вы можете не использовать их, но Вы можете встретить их в коде

document.getElementById("id");

document.getElementsByClassName('test')

Возвращает document.getElementsByTagName("li")
элемент

Возвращают
коллекцию

Обратите внимание на букву s во вторых двух методах.

Только так будет работать.

Пишется именно с буквой s, в отличие от первого варианта

с document.getElementById("id");
Так как очевидно, что id — это какой-то уникальный элемент
Java Script
Получение
через наследование
и родство
HTML элементов
Чем отличаются дочерние элементы,
потомки, соседи и родители?

Дочерние элементы (или дети) — элементы, которые являются

непосредственными детьми элемента.
Другими словами — элементы, которые лежат непосредственно внутри
данного.
Например, <head> и <body> являются детьми элемента <html>

Потомки — все элементы, которые лежат внутри данного, включая

детей, их детей и т.д.

Соседи — это теги, у которых один и тот же родитель.

Например, <head> и <body> соседи

Родители — это теги, в которых вложены сами теги

 Что такое HTML узел
Объектная модель документа (Document Object Model, DOM) — это
интерфейс, который рассматривает HTML-документы в виде
древовидных структур,
каждый узел которых является объектом документа

Узел — это и тег и более мелкие части, чем теги

Например, текст внутри тегов — это узел

Ниже есть тег h1

Если сравнивать теги и узлы, то:

У тега h1 всего 1 дочерний тег — это тег

span

Но дочерних узлов у h1 целых 5!

Текст после тега span Комментарий — это Пробел после

Пробел — это первый Тег спан — это второй
— это третий четвертый дочерний комментария — это
дочерний узел тега h1 дочерний узел тега h1
дочерний узел тега h1 узел тега h1 пятый дочерний узел
тега h1
 Получение узлов дерева DOM

Входной объект
document, в котором
содержатся методы
работы с document

С помощью свойства
объекта document.
documentElement
можно получить доступ
к тегу <HTML>

Также, в свойствах
объекта document есть
свойства head и body

(Они всегда есть на всех

страницах, поэтому и
свойства в объекте
document сразу
присутствуют)

Все остальное дерево создается разработчиком,

поэтому доступ к тегам мы получаем через, например,
document.querySelector(selector)

Но что, если нам нужно получить доступ к более мелкой частице тега?
К какому либо из узлов. Например, к пробелу в теге h1.
Получение узлов дерева DOM
Но что, если нам нужно получить доступ к более мелкой частице тега?
К какому либо из узлов. Например к пробелу в теге h1.

Для получения этих узлов есть 6 свойств в объекте любого тега.

(Напоминаю, что любой тег в DOM — это Объект. А раз так, то у него есть
свойства и методы)
6 свойств для получения узлов в DOM
childNodes - коллекция (псевдо-массив) содержит список
всех детей, включая текстовые узлы и комментарии

Свойства firstChild и lastChild обеспечивают доступ к

первому и последнему дочернему узлу

Следующий узел (следующий сосед) — это свойство

nextSibling,
а предыдущий — в previousSibling.

Родитель доступен через parentNode

Java Script
Псевдо
массив
(коллекция)
 Что такое псевдомассив
Псевдомассив — это объект, который структурно похож на массив. То есть у него
есть числовые свойства (индексы) и свойство length

Но это не массив. Соответсвенно, у псевдомассива нет свойств и методов,

которые можно использовать с массивом, таких как:
 Схожесть с массивом
Схожесть с массивом проявляется только в 2-х вещях

1 - У псевдомассива есть свойство lenght

2 - Доступ к значениям свойств может происходить через

индекс
Например:
Как превратить псевдомассив в
настоящий массив

Для этого в JS есть встроенный метод:

Array.from()
Java Script
Циклы
for in и
for of
 Помимо циклов for и do while
Есть еще 2 крайне популярных цикла

Цикл For of работает со значением всех свойств.

Работает в массивах и псевдомассивах

Цикл For in работает с ключами всех свойств.

Работает с объектами и массивами и псевдомассивами
(но не стоит использовать его с массивами, т.к. можно получить лишние скрытые свойства)
Java Script

Изменение HTML
элементов
 Свойства объектов HTML
Как мы знаем, каждый тег или узел — это объект в DOM

Исходя из этого, в каждом таком объекте существуют

свойства и методы, которые и "создают" этот объект

Например:
Если мы выведем в console.dir какой либо из HTML тегов, мы
увидим его свойства, которые мы можем изменять:

className
Отвечает за
название класса

childNodes
Содержит
псевдомассив
дочерних узлов

elem.innerHTML innerHTML
Отвечает за
Может получать и изменять содержимое тега содержимое тега
Свойства для получения и изменения тегов

elem.innerHTML
Может получать и изменять содержимое тега

elem.textContent
Может получать и изменять только текст внутри тегов Добавлять
теги внутрь тегов с помощью textContent нельзя

elem.outerHTML
Может получать и изменять сам тег вместе с его содержимым

elem.data
Может получать и изменять содержимое узла
Java Script

Создание и вставка
новых элементов
 Создание элементов

Для создания тега используем метод

объекта document:

document.createElement("h2")

Для создания создания текстового узла

используем метод объекта document:

document.createTextNode("Some text")
Вставка нового элемента
Для вставки нового элемента перед выбранным:
existElem.before(newElem)
Для вставки нового элемента после выбранного:
existElem.after(newElem)
Для вставки нового элемента внутрь выбранного и перед
его содержимым :
existElem.prepend(newElem)

Для вставки нового элемента внутрь выбранного и после

его содержимого :
existElem.append(newElem)
Java Script

Методы точечной
вставки элементов
Второй параметр или просто текст
existElem.before(newElem, "Some text")
existElem.after(newElem, "Some text")
existElem.prepend(newElem, "Some text")
existElem.append(newElem, "Some text")
Позволяют указать второй параметр. Это параметр текста, который будет
помещен внутрь вставляемого элемента.

Вставляемый текст — безопасен. То есть, если в текст ввести теги, то сайт отобразит теги
как текст, а не как теги.

Так же, можно указать только второй параметр с текстом, без первого параметра — элемента.
Таким образом, появляется более удобный способ вставки текста в нужное место тегов.
insertAdjacentHTML / Element / Text
Эти методы позволяют вставлять в нужные места либо HTML код, либо Eement, либо Text

Метод принимает 2 параметра в кавычках. Первый параметр — это то, куда вставляется
HTML / Element / Text, второй параметр, что вставляется — HTML / Element / Text

Первый параметр места вставки работает так:

В действительности, чтобы дополнить возможности, в дополнении ко всем предыдущим методам,

нам достаточно знать только метод:

insertAdjacentHTML
Java Script

Перемещение,
клонирование
и удаление
элеметнов HTML
Перемещение элементов
Методы:
existElem.before(Elem)
existElem.after(Elem)
existElem.prepend(Elem)
existElem.append(Elem)
Могут перемещать теги в нужное место

Было:

Стало:
Клонирование элементов
Метод:
elem.cloneNode()
Позволяет клонировать элемент

Метод:
elem.cloneNode(true)
Позволяет клонировать элемент вместе с
его содержимым.
Удаление элемента

Метод:
elem.remove()
Позволяет удалить элемент
Java Script

Изменение стилей
элементов
Перезаписывание 1 стиля напрямую
У любого HTML объекта есть свойство style, в котором содержатся все возможные стили
элемента

Пример изменения размера шрифта:

Стили из 2-х слов пишутся чере camelCase:

Перезаписывание нескольких стилей
напрямую

Чтобы прописать сразу множество стилей в привычном css виде, можно

воспользоваться свойством elem.style.cssText
Изменение стилей через классы
Предпочтительный способ

У каждого HTML объекта есть свойство classList

Оно позволяет изменять, добавлять и удалять класс в самом теге.

Тем самым, в css файле мы можем прописать стили к несуществующему классу,

а после, при необходимости, с помощью JS поместить этот класс в любой тег
Java Script

Доступ к атрибутам
тегов
 Атрибуты тегов
Каждый HTML тег содержит свои атрибуты

Например, у тега img есть атрибут

src:
Например, у тега input есть атрибут type:

Мы, конечно, можем получать и менять значение существующих

атрибутов
Методы атрибутов
Также, существует ряд методов для
манипуляций с атрибутами:
Java Script

События элементов
DOM
 Какие бывают события
Браузеры поддерживают очень большое количество событий

Ссылка на полный список Вы

найдете в материалах курса в
файле Word
 Обработчик события
Чтобы настроить поведение при срабатывании того или иного события
мы используем обработчик события:

elem.AddEventListener('event', function(){})

Элемент, полученный с помощью Название события в кавычках Функциональное выражение, в

document.querySelector('elem') котором прописано то, что должно
происходить после срабатывания
события
Java Script

Как работает
this
this используется только в методах и
функциях

this — это просто динамическая переменная

this получает значение, исходя из контекста вызова функции, в
которой this написан

Контекст вызова — это место, где написано this

Значение переменная this получает в момент вызова

функции
 Первое:
this в методе объекта = имя объекта
Два кода работают одинаково, но правый более универсальный

Следовательно:
Если this вызывается в методе объекта, то this = имя этого объекта
 Второе:

this в функции без объекта = undefined

Но только, если используется "use strict";

this в функции без объекта = window

Если не используется "use strict";
 Третье:
У стрелочных функций нет своего контекста this
Стрелочные функции берут this у своего окружения

В любом режиме (строгом или нет), если нет более глубокой

вложенности, будет window

Все равно что, если бы мы написали так:

 Четвёртое:
Если мы работает с addEventListener, то this = HTML элемент, с
которым работает обработчик события.
Так сработает

Но стрелочные функции не имеют своего контекста this

Если используем стрелочную функцию, получим ошибку:

Так как в этом случае this будет объектом window, а у объекта window нет
свойства style.
 Последнее:

Обратите внимание, что this в функции никогда не

становится функцией, в которой this используется.
this становится только объектом или элементом, в
котором this используется
Java Script

Деструктуризация
массивов
 Деструктуризация массивов
Часто бывает, что те или иные свойства (элементы) массива нам нужно
использовать по отдельности.

Например, чтобы записать их в переменную или использовать, как

аргументы в функции

Массив

Присваивание значений, выбранных

свойств массива в переменные
вручную
 Есть сокращенный синтаксис
Можно использовать следующий синтаксис для получения тех или иных
значений свойств массива:

Массив

Присваивание значений, выбранных

свойств массива в переменные с
помощью деструктуризации
Как работает деструктуризация

Объявляем
переменную с С помощью В каждую переменную
помощью синтаксиса вкладываем значение
const или let квадратных скобок свойств массива
через запятую в порядке очередности
создаем несколько (gервая переменная
переменных примет значение первого
элемента массива)
Как получить первый и третий элементы

Пропуск элемента массива

осуществляется через запятую
Если не знаем сколько элементов в массиве
Будет работать, но значение у не существующих свойств будет undefined

Но если мы не уверены, можно задать изначальное (стартовое значение)

каждой переменной
Удобно менять местами значения переменных

Так проще Чем так:

Создаем новую техническую

Просто меняем переменную и записываем в
местами значения нее значение переменной
переменных fruitOne.
Если ее не создать, значение
первой переменной
перезапишется второй
Деструктуризация массива в параметрах функций

Подставили, как аргумента,

нужные свойства массива arr

Как аргумент передали

массив
Java Script

Деструктуризация
объектов
 Деструктуризация объектов
Часто бывает, что те или иные значения свойств объекта нам нужно
использовать по отдельности

Например, чтобы записать их в переменную или использовать, как

аргументы в функции

Объект

Присваивание значений, выбранных

свойств объекта в переменные вручную
 Есть сокращенный синтаксис
Можно использовать следующий синтаксис для получения тех или иных
значений свойств объекта:

или так: ЭТА ЗАПИСЬ ПРИОРИТЕТНАЯ

Объект

Присваивание значений, выбранных

свойств объекта в переменные с
помощью деструктуризации

Обратите внимание, что получение значения свойства объекта

происходит не по порядку, а по названию свойства объекта
И название новой переменной такое же, как ключ свойства, значение
которого мы записываем в переменную
Но что, если нам необходимо другое
название переменной

Если нам нужно название переменной, которое отличается от ключа

свойства, то дополняем нашу конструкцию следующим:

Ставим двоеточие и придумываем

новое название переменной
Мы также можем задавать значения переменных
по умолчанию
Будет работать, но значение у несуществующих свойств будет undefined

Но если мы не уверены, можно задать изначальное (стартовое значение)

каждой переменной
Что, если переменная с таким именем уже
объявлена?

Ошибка. Нельзя объявить

объявленую переменную.

Но что, если мы хотим перезаписать объявленые переменные с помощью деструктуризации

Нам нужно просто обернуть в круглые скобки конструкцию с деструктуризацией

Деструктуризация объекта в параметрах функций
Java Script

Оператор
spread
 Оператор spread
Этот оператор просто упрощает процесс использования данных итерируемых объектов

Оператор spread разбивает на одиночные сущности, массивы, строки и т.д.

Пример получения каждой буквы по отдельности:

 Оператор spread
Оператор spread позволяет нам добавлять элементы из одного массива в другой

Оператор
spread

или сливать несколько массивов в один

Оператор spread ничего не делает с оригинальным массивом

Оператор spread не работает в ${}
Будет ошибка

Spread в аргументах функций:

Напоминаю, что передавать мы можем сколько угодно аргументов,

но передастся только то количество аргументов, которое
соответствует количеству параметров функции
Оператор spread не работает в ${}
Spread для копирования:
С помощью spread оператора можно копировать ссылочные типы,
такие, как массивы и объекты

newObj — это абсолютно новый, не

зависимый от старого объекта, со своей
ссылкой.

НО! Это только поверхностное клонирование!

То есть, если у объекта внутри будет другой объект, ссылка на

более глубокий объект сохранится из старого объекта
Java Script

Оператор
rest
 Оператор rest
spread — распаковывает
rest — наоборот,
запаковывает
Пишется оператор rest так же через три точки ...

spred пишется справа от оператора присваивания

rest пишется слева от оператора присваивания

Оператор rest соберет

Используем остальные элементы,
деструктуризацию которым не заданы
массива переменные в массив
others
Оператор rest должен быть последним

Работает как с массивами, так и с объектами

 Оператор rest в функциях
Если использовать оператор rest в параметре функции, этот
оператор соберет все передаваемые аргументы в массив

Калькулятор сложения:
Java Script

Классы в
JS
Классы позволяют создавать шаблоны
Шаблон в свою очередь — это прототип какой-то сущности
Модифицированный экземпляр от
шаблона машины

Прототип (шаблон)
машины
Классы позволяют создавать шаблоны
Шаблон в свою очередь — это прототип какой-то сущности

Модифицированный экземпляр от шаблона

машины

Прототип (шаблон) машины

Все экземпляры выглядят по разному: у них разные функции (одни грузовые, другие
легковые машины), разные свойства (скорость маневренность и т.д.)

Но (прототип) шаблон у них всех все равно один. Изменяются свойства и функции
оригинального прототипа. И даже дополняются новыми функциями.
Например, в современных авто есть камеры видео наблюдения.

Именно эти прототипы (шаблоны) и называются классами в JS

Одним из таких классов является массив
Экземпляр массива мы можем создать так:

Прототип (шаблон)
массива

или так

Прототип (шаблон)
массива

И каждый экземпляр будет наследовать все функции (методы) и свойства

своего прототипа.
 Или объект или число и т.д
Экземпляр массива мы можем создать так:

Прототип (шаблон)
объекта

или так

Прототип (шаблон)
объекта

Прототип (шаблон) числа

Сколько всего классов в JS?
Список всех встроенных классов Вы найдете все в той же статье в
материалах курса, которая называется "Встроенные объекты"

Можно ли добавлять свои новые

функции (методы) в существующие
классы?
Да можно. Но об этом позже по курсу.
 Как создать свой собственный класс
(прототип)
Для этого нужно использовать следующую конструкцию:

Ключевое слово class и

название класса (как в Имя класса всегда с
функции, только вместо большой буквы
слова function слово class)

Ключевое слово constructor() и

параметры, в которые будут
передаваться аргументы при
создании экземпляра
класса(шаблона\прототипа)
Запятые между свойствами НЕ
ставятся. Ставятся точки с
Свойства и их значения как в
запятой.
объекте. this указывает на
экземпляр класса

Разные методы (слово render НЕ

ключевое). Это просто Запятые между методами НЕ
название метода, который что- ставятся
то делает)
 Оператор new
Позволяет создать экземпляр класса

Аргументы, которые попадут в

параметры класса, а после
Переменная, в которую используются в конструкторе
запишется экземпляр
класса(прототип) NewCard

Вызов
Переменная instance
унаследованного
унаследует все методы
метода render
прототипа
Java Script

Класс
Set
 Что такое Set?
Помимо объектов и массивов есть и другие классы, которые работают с
данными по-своему

Set позволяет взять уникальные данные из таких перебираемых объектов, как

массив, псевдомассив, строка...

Можно сказать, что set — это просто массив уникальных элементов

 Что такое Set?
Set позволяет взять уникальные данные из таких перебираемых объектов, как
массив, псевдомассив, строка...

Из 7 букв уникальных только 5

У set прописаны индексы, НО воспользоваться ими для получения

конкретного элемента (как в массивах) мы НЕ можем
 Свойства и методы Set
У Set есть ряд свойств и методов, как и у любого класса
Их не много и все их можно увидеть в консоле с помощью метода console.dir(set)

По сути, Set нужен только для того, чтобы иметь возможность получать и
хранить уникальные элементы. И, так как set перебираемый объект, на
нем будет работать все, что работает на перебираемых объектах.
Например, оператор Spread или цикл For of
Java Script

Класс
Map
 Что такое Map?
Помимо объектов, массивов и Set есть еще одна структура
данных — это Map

Мы знаем, что у массивов есть цифровые ключи свойств, у объектов строковые ключи
свойств, set — это просто уникальные коллекции без ключей.

Но что, если нам необходимо самому решить какого типа данных будет ключ у того
или иного свойства

Для этого как раз и существует Map

В Map можно создавать свойства с ключами любого типа:

числовые, строковые, булевые и т.д.
 Как создать Map
Чтобы создать Map нужно использовать конструктор экземпляра класса Map:

У Map есть 2 метода, которые позволяют:

Метод set() позволяет создать свойство

Первый параметр — это Второй параметр

ключ свойства значение свойства

Метод get() позволяет получить значение свойства

Получить значение
свойства по ключу
"categories"
 Методы Map
Так же, как и в Set, у Map есть 2 метода:
has() — проверяет наличие свойства
delete() — удаляет свойство
has()

delete()

Так же, как и в Set, у Map есть свойство size

Java Script
Конвертация
различных
структур
данных
Как по-другому записывать данные в map
Вместо того чтобы использовать метод set(), можно создавать Map вот так:

Обратите внимание на
структуру.
Это массивы с двумя
элементами — Ключ
ключ - значение Значение
Как конвертировать объект в массив
Чтобы конвертировать объект в массив используем Object.entries(obj):

Чтобы конвертировать массив в объект используем Object.fromEntries(arr):

Но массив, должен
быть таким:
В массиве, массивы -
ключ - значение.
Как конвертировать объект в Map
1 - Чтобы создать несколько свойств Mар можно использовать запись массива в
массиве, содержащую ключ - значения.

2 - Существует метод объекта Object.entries(obj), который конвертирует объект в

запись массива в массиве в виде ключа - значения.

3 - Массив, который получается из объекта через Object.entries(obj), как раз

подходит для записи свойств в Map
Map — это тоже перебираемый
объект
Это значит, что такие вещи, как цикл for of или оператор spread или set, будут
работать на Map
Конвертация перебираемых объектов в другие
перебираемые объекты
Все перебираемые объекты (строки, массивы, псевдомассивы, Set, Map) могут
быть конвертированы друг в друга

Пример из Map в Set. Так же бы работало из Arr в Set или из

строки в Set

Пример из Map в Arr. Так же бы работало из Set в Arr или из

строки в Arr
Java Script

Строки ч.1
 Как работают строки в JS
Из строк состоит очень большое количество данных в JS и его окружении
Поэтому необходимо знать, как их использовать и манипулировать ими

Все в JS — это объекты

И у строк тоже есть свои полезные методы и свойства
Можно использовать индексы, как в
массивах, чтобы добраться до нужной У строк есть свойство lenght
буквы

Мы можем узнать конкретный индекс

Мы можем узнать конкретный индекс
последней буквы через метод
первой буквы через метод indexOf() Или
lastIndexOf()

Регистр
имеет
значение

Если буквы или слова нет

Получаем индекс вернет -1
первой буквы по слову
 Метод строк slice
Позволяет оставлять нужное из строки

Один
аргумент:
Оставить все
после 4-го
индекса

Два
аргумента:
Оставить все
с 4-го
Зная это, мы можем получить, например, первое слово из индекса и до
7-го
текста, даже не зная какой длинны первое слово

Или последнее
Метод строк slice с отрицательными значениями

Позволяет получать части строки с конца:

Java Script

Строки ч.2
 Методы регистра текста
Два метода позволяют написать и трансформировать текст в верхний и нижний
регистр

Методы удаления пробелов

Метод trim() удаляет все пробелы и переходы на следующую строку, в начале и
в конце строки
Метод замены одного символа на
другой
Метод replace() позволяет заменить один символ на другой

Заменяем на символ
символ рубля доллара

Также, можно заменить целое слово

(но только первое)

НО, с помощью replaceAll(), можно заменить все слова по

заданным параметрам
Методы проверки содержимого
includes() — проверяет наличие данных по параметру и
возвращает булевое значение

startWith() — проверяет первые символы на совпадение и

возвращает булевое значение

endWith() — проверяет последние символы на совпадение и

возвращает булевое значение
Java Script

Строки ч.3
 Метод split()
Позволяет собрать в массив строку из разный слов или символов
Каждый элемент массива будет создан путем указания в параметрах
символа, разделяющего слова в строке

В этом примере знаком разделителя

Пробел в параметрах показывает, что все символы
является плюс
перед пробелом и после пробела должны быть
Полученный массив такой же, как и в
отдельным элементом массива
первом случае
 Метод join()
Позволяет разобрать массив на одну строку из элементов массива.
В параметрах можно указать, как будет разделен каждый элемент массива.
Например, с помощью пробела. Если нет параметра, то подставяться
запятые.

В качестве параметра можно указывать любые знаки:

 Метод padStart()
Принимает два аргумента:

Первый — сколько всего знаков в строке

Второй — какой знак помесить в начале строки, исходя из оставшегося
количества неиспользуемых символов

Всего 4 знака
в строке

Хотим всего 16 Все свободные знаки в

знаков в строке будут знаками
строке *
т.е. 16 - 4 знака строки =
12 звездочек перед
строкой.

Метод padEnd()
padEnd() работает точно так же, только символы ставятся после строки
 Метод repeat()
Принимает 1 параметр.
Сколько раз нужно повторить строку
Java Script
Параметры
функций
по умолчанию
Параметры функций по умолчанию
Вы можете задать параметры для функций по умолчанию

Для этого можно присвоить значения для параметров, объявленных при

создании функции

Если нужно пропустить один из аргументов

находящихся посередине, напишите undefined
Java Script
Параметры
функций
по ссылке или
по значению
 Объект в параметрах функций
Не забывайте, что изменяя внешний объект внутри функции, даже передав его в качестве
аргумента, Вы меняете и оригинальный объект,
так как копирование происходит по ссылке, т.е. копируется не содержимое объекта, а его
ссылка
Java Script

Функции
первого класса
и
высшего порядка
 Функции первого класса
Функция первого класса может быть аргументом для другой функции, может быть присвоена
переменной.
В общем, с ней можно обращаться, как и с любым другим объектом.

Функции высшего порядка

Функции высшего порядка означают, что они могут принимать другие функции, как
аргументы, или возвращать функцию.
Функции первого класса
Пример использования функции высшего порядка:
Java Script

Функции,
которые
возвращают
функции
Функция возвращает функцию
Функция может возвращать другую функцию. Работает это так:
Java Script

Метод функций
call()
 Функция — это объект
А у объектов есть свои методы.

Вы знаете. что функция с использованием контекста this вне объекта, вызовет ошибку в
строгом режиме

Но, если функция будет методом объекта, то this будет ссылаться на этот объект

Функция в свойстве объекта Внешняя функция в свойстве объекта

Одинаковый
результат
Метод функций - call()
Но что, если мы хотим использовать функцию с контекстом this,
НЕ прописывая функцию, как одно из свойств объекта
В этом нам поможет метод call()

Метод call() в качестве первого аргумента принимает

объект, который будет подставляться как this

Мы даже можем брать метод одного объекта

и использовать его в другом
call() с доп. аргументами

Остальные аргументы мы можем передавать через запятую

Java Script

Метод функций
bind()
 Метод функций bind()
Позволяет нам "забиндить" слово this и аргументы функции
"Забиндить" — установить по умолчанию

Копируем функцию из объекта s7 в переменную bookTR и заменияем с

помощью метода bind() слово this на слово turkish
 Метод функций bind()
Помимо слова this мы можем установить по умолчанию (забиндить) любой параметр
функции

Первый аргумент — это слово, которое будет подставляться вместо

this, второй аргумент 666 будет подставляться по умолчанию вместо
flightNum
И при вызове функции нам останется
передать только параметр name

Если вам не нужно использовать первый аргумент, который относится к слову this, то первым
аргументом передайте null
Java Script

Базовые методы
массивов
 Методы массивов
Помимо методов, которые мы изучили в начале курса, есть множество полезных методов для
работы с массивами

Метод slice()
Работает точно так же, как и в строках

Возвращает элементы Второй параметр до

после указанного какого индекса
индекса

Не изменяет
оригинальный массив
Метод reverse()
Переворачивает массив

Изменяет оригинальный массив

Метод concat()
Соединяет 2 массива. Не меняет
оригинальный массив

Такого же результата можно добиться с помощью

оператора spread
Java Script

Метод
forEach()
 Метод forEach()
Позволяет нам перебрать массив. Точно так же как и цикл for of

Метод forEach() отличный пример функции высшего порядка.

 Метод forEach()
Позволяет нам перебрать массив не только по значению свойств массива, но и по ключам

Для этого в параметры кол-бэк функции нужно написать второй параметр

Можно добавить и третий аргумент, который будет самим массивом

Как получить ключи свойств
в for of
Чтобы добраться до ключей массива в цикле for of, нам необходимо
воспользоваться методом массивов entries()

entries() под "капотом" превращает каждый ключ(индекс) элемента

массива в новый элемент и добавляет этот элемент в массив

Таким образом, мы можем деструктиризовать массив в цикле for of

forEach работает с Map и Set
Map:

Set:
Java Script

Метод
map()
 Метод map()
Это тоже перебор и этот перебор структурно работает так же, как
и forEach()

Этот метод так же использует call-back функцию для каждого

значения свойства / ключа или самого массива

Метод map() позволяет модифицировать каждый элемент

массива и вернуть новый измененный массив с помощью
ключевого слова return. Оригинальный массив не изменяется
Отличие map() от forEach()
Структурно работает так же, как и forEach()
Метод forEach() позволяет выполнить какое-либо действие с
каждым элементом или индексом массива

Метод map() позволяет модифицировать каждый элемент

массива и вернуть новый измененный массив с помощью
ключевого слова return. Оригинальный массив не изменяется
Java Script

Метод
filter()
 Метод filter()
Структурно работает так же, как forEach() и map()

Метод filter() так же, как и map(), возвращает с помощью ключевого слова
return новый отфильтрованный массив, не изменяя оригинальный

Под капотом метод filter() проверяет каждый элемент массива на

true/false и оставляет только те элементы, которые выполнились в условии
функции как true
Java Script

Метод
reduce()
 Метод reduce()
Суммирует все элементы массива

В методе reduce() так же используется call-back функция, как

и в forEach() или map()

Но в отличии от стандартного набора параметров в reduce()

есть еще один параметр, который ставится первым.
Этот параметр — накопитель (в примере выше — это acc)

Метод reduce() так же обязательно возвращает значение с помощью

ключевого слово return
НО
Возвращается НЕ массив, а значение функции
Второй параметр reduce()
Помимо первого параметра (call-back функции) метода reduce()
мы можем указать второй параметр.

Это начальное состояние первого параметра call-back функции (acc)

Например, чтобы изначально параметр acc был равен 100

Второй параметр
метода reduce()
Java Script

Метод
find()
 Метод find()
Так же использует call-back функцию и перебирает массив

Метод find() похож на метод filter(). Метод find() при переборе

массива возвращяет элемент, который прошел как true

Но, в отличие от метода filter(), который возвращает

отфильтрованный массив согласно условиям функции, метод find()
вернет только один первый попавшийся элемент из массива,
согласно условиям функции.

Первый элемент массива

со значением меньше 0
Java Script

Метод
findIndex()
 Метод findIndex()
Работает так же, как метод find(). Но возвращает не элемент
массива, а его индекс по указанным условиям call-back функции,
которые проходят как true

Массив с Элементы
аккаунтами массива

Если в свойстве элемента

массива, который является
объектом, есть свойство
logIn равное строке 'af',
то верни индекс этого
элемента массива
Java Script

Методы
some & every()
 Метод some()
Так же цикл, который использует call-back функцию для проверки
условия. Возвращает true / false

Есть ли в массиве хотя бы один элемент, отвечающий требованиям

в функции:

Какой-либо элемент
массива меньше 0

Какой-либо элемент
массива больше 0
 Метод every()
Метод every() вернет true только, если все элементы массива
соответствуют указанным условиям в call-back функции

Метод includes()
Вернет true или false, если мы прямо укажем в проверку элемент

Есть ли цифра 2 в
массиве arr?
Java Script

Метод
flat()
 Метод flat()
Позволяет расформировать внутренние вложенные массивы в
один массив

Без параметров будет расформировывать только первый уровень

вложенности массива

Если нужно добраться до второго, третьего и т.д. уровня

вложенности, то нужно указать уровень вложенности в параметре
метода

Второй уровень
Первый уровень
вложенности
вложенности
Java Script

Метод
sort()
 Метод sort()
Сортирует элементы массива по порядку алфавита
Порядок сортировки по умолчанию соответствует порядку кодовых точек Unicode

1-Метод sort() изменяет оригинальный массив.

Поэтому старайтесь работать с копиями массивов.

Для массивов, содержащих строки, работает просто по алфавиту

НО!
Заглавные буквы имеют больший приоритет
 Метод sort()
2-Метод sort() конвертирует элементы в строку и символы цифр будут
сортироваться не по числам, а по приоритетности строковых символов

Поэтому, для сортировки чисел нужно использовать call-back

функцию c параметрами a и b

С помощью этих параметров сравниваются все числа массива.

Если число a больше, чем число b, то поменяй местами элементы массива

Если число a меньше, чем число b, то сохраняй порядок, как есть
 Метод sort()
Эту call-back функцию можно упростить просто написав return a - b

Так как для сортировки нам нужно либо отрицательное число(false), либо
положительное(true)
JS c нуля до результата

Методы
fill()
Array.from()
 Метод fill()
Позволяет заполнить массив нужным количеством
одинаковых элементов в определенные места массива

Первый параметр - это элемент который заполнит все доступные

ячейки

Второй и третий параметр - с какого элемента по индексу, и до

какого заполнить указанным элементом

Метод fill() изменяет оригинальный массив

 Метод Array.from()
Позволяет создать массив из любого итерируемого
объекта(Строки, псевдо массивы, Set, Map)

В метод Array.from можно написать 2 параметра

Первый параметр итерируемый объект, который хотим преобразовать в

массив

Второй параметр call-back функция, которая работает так же как метод

map. Изменяет и возвращает измененный массив.

Метод Array.from() НЕ изменяет

оригинальный массив
JS c нуля до результата

Конвертация и
генерация
чисел
 Конвертация чисел
Все числа в js - это числа с плавающей точкой

Конвертация в число из других типов данных происходит

через метод Number()

Более простой способ конвертации в число - это написать

+ перед типом данных, которые нужно конвертировать
 Number.parseInt()
Чтобы конвертировать число вместе со стройкой в число, используйте метод
Number.parseInt()

Но если строка будет перед числом, метод

Number.parseInt() не сработает

Метод Number.parseInt() работает только с целыми числами

Number.parseFloat()
Метод Number.parseFloat(), конвертирует число вместе со стройкой в число,
но в отличие от Number.parseInt(), работает с числами с плавающей точкой.
 Math.max()
Возвращает большее число

Math.min()
Возвращает меньшее число

Math.max() и Math.min(), конвертирует строковые числа в числа. Но не

конвертирует строковые числа вместе с буквами

Math.trunc()
Math.trunc() возвращает целую часть числа путём удаления всех дробных
знаков.

Math.random()
Math.random() возвращает псевдослучайное число с плавающей запятой из
диапазона [0, 1)
Рандомное число от одного значения
до другого
Такого метода нет, но мы можем создать собственную функцию и
использовать ее в коде

Math.round()
Math.round() возвращает число, округлённое к ближайшему целому.
 Math.ceil()
Math.ceil() - округление вверх. Округляет число до ближайшего большего целого.

Math.floor()
Math.ceil() - округление вверх. Округляет число до ближайшего меньшего целого.

.toFixed()
Позволяет оставить определенное количество символов после точки.

.toFixed() - Возвращает строку, а не число!

JS c нуля до результата

Что такое
bigInt
 Тип данных bigInt
Позволяет создавать и работать с числами больше 2 ** 53 - 1
То есть больше чем это число 9007199254740991

JS Работает в 64 битной системе, 53 из которых отводятся на числа,

остальные на доп возможности чисел.

Именно поэтому, JS не сможет правильно работать с числами больше

9007199254740991

Именно поэтому создали дополнительный тип данных - bigIng

Как создать bigInt

Чтобы конвертировать число в bigInt, нужно написать букву n после
последней цифры.

Либо так:
 bigInt не работает с методами Math

bigInt нельзя использовать с числами

Обычные операторы с bigInt работают нормально

JS c нуля до результата

Работа с
датами
 Даты - new Date
Создание и изменение дат происходит посредством объекта Date, у
которого есть свои методы и свойства

new Date() выведет всю информацию о дате и времени на текущий момент,

согласно вашему часовому поясу

new Date(0) вернет самую дальнюю точку, до которой есть доступ в JS

(1 января 1970 года)
 Создание конкретной даты
Чтобы создать конкретную дату можно написать в качестве аргументов в new
Date() как строку, так и числа

Создание даты с помощью строки

Создание даты с помощью чисел

Год Месяц День Час Мин Сек

Обратите внимание что месяцы считаются от 0 до 11.

То есть, чтобы получить май, нужно написать число 4 для указания месяца

Если вы укажите большее число в числах, минутах, секундах и т.д. то JS

автоматически пересчитает дату
 Методы объекта Date()
Полезные методы, которые вам пригодятся

toISOString - отображает дату в привычном формате.

Формат записи toISOString так же позволяет создать дату.

 Метод getTime()
Позволяет получить кол-во миллисекунд, прошедших от самой
дальней даты в JS

С помощью миллисекунд можно так же создавать дату.

В 1 секунде 1000 миллисекунд

Методы setMounth/Date/Hourse...()
Позволяют установить в определенную дату, нужный год, число, час и т.д.
JS c нуля до результата

Объект
Intl-Date
Объект Intl - с датами
Позволяет нам создавать даты, нужного нам формата.
Например формат даты определенной страны.

Пример записи арабского времени

Пример записи времени в Великобритании

Строка со страной. Дата которую нужно

(Список всех стран и кодов к переформатировать
ним, вы найдете в файле word, в
материалах курса)
Объект Intl - с датами
Вторым аргументом, можно указать объект options, из
которого метод будет брать нужную информацию для
форматирования.

Есть несколько варианта написания значения свойств:

Например: "numeric", "short", "long"

Сокращенное имя 12 часовое время по

месяца am/pm
 Автоматическое получение региона
для дат
Вместо того чтобы настраивать язык вручную, можно получить его из
браузера пользователя с помощью свойства глобального объекта
Window.navigator.language
JS c нуля до результата

Объект
Intl-Num
Объект Intl - с числами
Числа, как и даты, в разных странах пишутся тоже по разному.

Поэтому объект Intl мы можем использовать и для

форматирования дат
 Объект Intl - с числами
Так же как в случае с датами, возможно передать необязательный объект
options который будет содержать настройки отображения чисел

Подробнее о свойствах объекта options, вы можете ознакомится на сайте

документации (Ссылка в файле word, в материалах курса)
JS c нуля до результата

setTimeout &
setInterval
 setTimeout
Позволяет запустить какую либо функцию (какое либо действие),
через определенное количество миллисекунд

setTimeout - имеет минимум 2 параметра.

1 - call-back функция c действиями которые нужно выполнить.

2 - Количество миллисекунд, через которые call-back функция запустится.

3,4,5 и т.д. параметры могут быть заполнены аргументами, которые

передадутся в параметры самой call-back функции.
 setInterval
Позволяет запустить какую либо функцию (какое либо действие),
раз в определенное количество миллисекунд

setInterval - имеет минимум 2 параметра.

1 - call-back функция c действиями которые нужно выполнить.

2 - Количество миллисекунд, через которые call-back функция будет

запускаться повторно.

3,4,5 и т.д. параметры могут быть заполнены аргументами, которые

передадутся в параметры самой call-back функции.
 отмена setTimeout и setInterval
Мы можем настроить условие в коде, чтобы отменить setTimeout или setInterval

Создаем повторение запуска функции

Создаем отложенный запуск функции

Для отмены используем метод clearTimeout(название Для отмены используем метод clearInterval(название
переменной в которой записан setTimeout) переменной в которой записан setTimeout)
JS c нуля до результата

Живые и
статичные
коллекции
 querySelectorAll VS
getElementsByTagName
Есть 2 метода с помощью которых мы можем получать DOM элементы с
нашей страница. Это querySelector и getElementsBy

Они действуют одинаково за одним исключением.

querySelector - получает статичный список DOM элементов

getElementsBy - получает живой список DOM элементов

Живой - значит то, что когда мы создадим новый элемент в JS коде, после
получения коллекции элементов, этот элемент будет так же содержатся в
коллекции полученной через getElementsBy
То есть при добавлении\удалении узлов или элементов, коллекция будет
содержать все изменения

Статичный - значит то, что когда мы создадим новый элемент в JS коде,

после получения коллекции элементов, этот элемент НЕ будет содержатся
в коллекции полученной через querySelector
То есть при добавлении\удалении узлов или элементов, коллекция НЕ
будет содержать все изменения.
В ней будут только те элементы, которые получены при использовании
метода querySelector
 Пример:
Получаем только 3 оригинальных li. Нет нового
HTML 4го li, который поместили в код через JS.
Коллекция статичная и не меняется.

Получение ul. И получение

коллекции li элементов 2-мя
способами

Создание нового элемента

li и вставка в него текста
Получаем 4 li.
Вставка нового элемента li Коллекция живая и не меняется. В коллекцию
внутрь и в конец элемента ul попал элемент созданный после получения
элементов

Выводим каждый элемент

полученный через
querySelectorAll, в консоль
по отдельности

Выводим каждый элемент

полученный через
getElemensBy, в консоль по
отдельности
JS c нуля до результата

Координаты
элементов
 Все DOM элементы имеют координаты
Получить координаты окна браузера можно в свойствах объекта window.
Каких как:

window.pageXOffset - На сколько px вы прокрутили страницу по горизонтали

window.pageYOffset - На сколько px вы прокрутили страницу по вертикали

Получить координаты конкретного элемента, можно с помощью метода

elem.getBoundingClientRect()

Координаты считаются относительно того места, где пользователь находиться

на странице
 scrollTo() и scrollIntoView()
В объекте window есть специальные, 2 метода, которые позволяют нам
скролить до нужного места на странице:

window.scrollTo()
window.scrollTo() позволяет добраться до нужного места страницы по
координатам указанным в параметре объекта.

window.scrollIntoView()
scrollIntoView() тоже самое только без формул и коротко.
JS c нуля до результата

Всплытие
событий
 Всплытие событий
Важно знать, что события которые мы назначаем на элементы, всплывают и
срабатывают на всех родительских элементах.

Например, в коде ниже, событие назначено только для элемента div.

Но если мы нажмем на любой из дочерних элементов, то событие все равно
сработает.
 Всплытие событий

Клик по внутреннему <p> вызовет событие click:

Сначала на самом <p>.

Потом на внешнем <section>.
Затем на внешнем <div>.
И так далее вверх по цепочке до самого document.

И если на родительских элементах установлен обработчик события, то событие сработает

 Прекращение всплытия
Всплытие идёт с «целевого» элемента прямо наверх.
По умолчанию событие будет всплывать до элемента <html>, а затем до объекта
document, а иногда даже до window, вызывая все обработчики на своём пути.

Но любой промежуточный обработчик может решить, что событие полностью

обработано, и остановить всплытие.
Для этого нужно вызвать метод event.stopPropagation().
 Не прекращайте всплытия
Всплытие – это удобно. Не прекращайте его без явной нужды, очевидной и
архитектурно прозрачной.

Зачастую прекращение всплытия через event.stopPropagation() имеет свои

подводные камни, которые со временем могут стать проблемами.

Например:

Мы делаем вложенное меню. Каждое подменю обрабатывает клики на своих

элементах и делает для них stopPropagation, чтобы не срабатывало внешнее меню.

Позже мы решили отслеживать все клики в окне для какой-то своей

функциональности, к примеру, для статистики – где вообще у нас кликают люди.

Некоторые системы аналитики так делают. Обычно используют
document.addEventListener('click'…), чтобы отлавливать все клики.

Наша аналитика не будет работать над областью, где клики прекращаются

stopPropagation. Увы, получилась «мёртвая зона».
Зачастую нет никакой необходимости прекращать всплытие. Задача, которая,
казалось бы, требует этого, может быть решена иначе. Например, с помощью
создания своего уникального события, о том, как это делать, мы поговорим позже.
Также мы можем записывать какую-то служебную информацию в объект event в
одном обработчике, а читать в другом, таким образом мы можем сообщить
обработчикам на родительских элементах информацию о том, что событие уже
было как-то обработано.
JS c нуля до результата

Делегирование
событий
 Делегирование событий

Если у нас есть много элементов, события на которых нужно обрабатывать

похожим образом, то вместо того, чтобы назначать обработчик каждому, мы
ставим один обработчик на их общего предка.

Из него можно получить целевой элемент event.target, понять на каком именно

потомке произошло событие и обработать его.
JS c нуля до результата

Intersection
Observer API
 Intersection Observer API
Intersection Observer API позволяет веб-приложениям следить за изменением
пересечения элемента с его родителем или областью видимости документа
viewport.
Чтобы создать observer (отслеживатель), нужно воспользоваться
конструктором:

Назначение отслеживания на конкретный элемент страницы

При создании нужно передать 2 аргумента.

1-Функция которая будет срабатывать при определенных
условиях(callBack функция)
2-Настройка опций отслеживания
Объект с опциями - это инструкции
когда срабатывать отслеживателю

root: null -
отслеживание по CallBack функция, с двумя параметрами.
viewport

root: elem -
отслеживание по
элементу

1-Самим объектом когда происходит пересечение

treshold: значения от 0 до 1. согласно заданному treshold
Например когда viewport зайдет на 10% на отслеживаемый
2-Самим объектом observer
элемент, сработает callBack
JS c нуля до результата

defer vs
async
 DOMContentLoaded
Событие DOMContentLoaded происходит когда весь HTML был полностью
загружен и пройден парсером, не дожидаясь окончания загрузки таблиц
стилей, изображений и фреймов

Парсинг - это
"Парсинг" — это процесс извлечения данных любого сайта в сети Интернет.
Есть 3 варианта подгрузки скрипта

Перед закрывающим тегом body

Браузер замечает скрипт (и может начать загружать его) только после того, как
он полностью загрузил HTML-документ. В случае с длинными HTML-страницами
это может создать заметную задержку.

В header с атрибутом defer

Атрибут defer сообщает браузеру, что он должен продолжать обрабатывать
страницу и загружать скрипт в фоновом режиме, а затем запустить этот скрипт,
когда DOM дерево будет полностью построено.

В header с атрибутом async

Атрибут async означает, что скрипт абсолютно независим:
Страница не ждёт асинхронных скриптов, содержимое обрабатывается и
отображается.
Остальные скрипты не ждут async, и скрипты casync не ждут другие скрипты.
Есть 3 варианта подгрузки скрипта
Перед закрывающим тегом body
Чтение HTML Чтение JS Выполнение JS

DOMContentLoaded

В header с атрибутом defer

Чтение HTML Выполнение JS

Чтение JS

DOMContentLoaded

В header с атрибутом async

Чтение HTML Ожидание Завершение
чтения HTML
Чтение JS Выполнение JS

DOMContentLoaded

В конце body
Получения и выполнение скрипта
произойдет только после получения
всего HTML
Итого
В head с атрибутом
defer
Получение скрипта произойдет
фоновом режиме, одновременно с
получение HTML
Выполнение скрипта произойдет
после события DOMContentLoaded
Скрипт выполнится в порядке
очереди кода
Первым выполниться первый
скрипт. Выполнение по порядку
В head с атрибутом
async
Получение скрипта произойдет фоновом
режиме, одновременно с получение HTML
Выполнение скрипта произойдет до
события DOMContentLoaded
Не гарантирует выполнение скрипта по
порядку в коде.
Первым выполнится скрипт который
загрузится первым
Первым выполниться второй
скрипт, т.к. он меньше и
загрузится быстрее