Академический Документы
Профессиональный Документы
Культура Документы
Презентация по курсу
Презентация по курсу
JAVA
SCRIPT
JS c нуля до результата
Навигация
JAVA
SCRIPT
Java Script - это:
ВЫРАЖЕНИЯ
ФУНКЦИИ
ОБЪЕКТЫ
Практически всё в Java
Script это
ОБЪЕКТЫ
"ОБЪЕКТЫ" — ЭТО НАБОРЫ
"СВОЙСТВ"
КЛЮЧ: ЗНАЧЕНИЕ
ПРИМЕР ОБЪЕКТА
Что такое
Переменные
3 варианта объявления
переменных
VAR
LET
CONST
3 варианта объявления
переменных
camelCase
Типы и классы
PascalCase
Значения известны до запуска
приложения и не меняются
DB_PASSWORD
Названия переменных должны
быть самоочевидными
Не используйте:
a / b / c / xyz
Используйте:
userName /
shoppingCart
Существуют
зарезервированные слова
Например:
ВЫРАЖЕНИЯ
ФУНКЦИИ
ОБЪЕКТЫ
ВЫРАЖЕНИЯ
И
ИНСТРУКЦИИ
ВЫРАЖЕНИЕ
ВОЗВРАЩАЕТ
ЗНАЧЕНИЕ
ИНСТРУКЦИИ
НЕ
ВОЗВРАЩАЮТ
ЗНАЧЕНИЕ
ВЫРАЖЕНИЯ:
ИНСТРУКЦИИ
ТИПЫ
ДАННЫХ
Существуют всего 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
уменьшение значения переменной на
Оператор присваивания
Оператор присваивания
Не "равно",
а "присвоить"
Java Script
Операторы
часть 2
Операторы сравнения
Больше/меньше:
a>b/a<b
Больше/меньше или равно:
a >= b, a <= b
Не строгое равно:
a == b
Строгое равно:
a === b
Не равно:
a != b
Все операторы сравнения
возвращают значение
логического типа:
true – означает «да», «верно», «истина».
false – означает «нет», «неверно», «ложь».
Сравнение разных типов
При сравнении значений разных
типов JavaScript приводит каждое
из них к числу
Сравнение строк
Строки сравниваются посимвольно
Приоритет
операторов
3 вещи определяют приоритет
выполнения операторов в
выражениях
"Индекс" приоритетности
Правило последовательности
Преобразование
типов данных
Существует 3 наиболее широко
используемых преобразования
Строковое
Численное
Логическое
Для специального (директивного)
преобразования этих трех типов используют
3 функции
Number()
String()
Boolean()
Правила численного преобразования
Преобразование происходит
очевидным образом:
Происходит в логических
операциях
Подведем
итоги
Java Script — это:
ВЫРАЖЕНИЯ
и инструкции
(let; const; if...)
ФУНКЦИИ
ОБЪЕКТЫ
ОПЕРАТОРЫ
(+; -; ==; <; +=; *; typeof; и так далее)
Выражения всегда
возвращают значения
определенного типа:
Всего есть 7 примитивных и 1 ссылочный
типов данных тип данных
С помощью
операторов
Например:
"2" + 1 или "3" > 2
преобразует
данные в числа
"ОБЪЕКТЫ" — ЭТО НАБОРЫ
"СВОЙСТВ"
КЛЮЧ: ЗНАЧЕНИЕ
ПРИМЕР ОБЪЕКТА
СВОЙСТВА ОБЪЕКТА
МОЖНО УВИДЕТЬ С
ПОМОЩЬЮ:
console.dir(Object)
Java Script
Условное
ветвление:
if; Else;
Инструкция if
Инструкция:
if (условие) {
Выполни это
}
Инструкция
if (условие) {
Выполни это
} else {
Выполни это, если условие ложно}
Логические
операторы
В JS существует 4
логических оператора
|| (ИЛИ)
&& (И)
! (НЕ)
Оператор нулевого
слияния (??)
Логический оператор
|| (ИЛИ)
Она запрещает
использование
необъявленных переменных
Java Script
Функции
Функции
Позволяют записать код который мы
можем быстро переиспользовать.
Параметры
Можно сказать переменные,
которые могут использоваться в
функции
Области
видимости
Области видимости
Глобальная область
видимости
Локальная 1 уровня
область видимости
функции myFunction
Локальная 2 уровня
область видимости
функции myFunction2
Параметры
функций
Вы можете создавать
параметры по умолчанию
Функции -
«колбэки»
Функции -
«колбэки»
Это не отдельный тип функций!
Стрелочные
функции =>
Стрелочные функции =>
Это простой и лаконичный синтаксис для
создания функций, который часто лучше,
чем Function Expression
function expression
Стрелочная функция
Способ сокращения
стрелочной функции
Написание стрелочной функции можно сократить
1. Если используется только 1 параметр, то можно не
обрамлять его в круглые скобки. Если аргументов нет,
круглые скобки обязательны Параметр только 1, поэтому
нет круглых скобок
Функции-
«колбэки»
Функции, которые используются в
качестве параметров для другой функции
Ссылочный тип
Объект — Object
Объекты
Практически все сущности в
Java Script - это объекты
Объекты - это набор
свойств:
Ключ: значение
"Название объекта.свойство"
Изменение значений
свойств объекта
Вы можете изменять значения существующих
свойств объекта, используя точечную запись
с помощью знака присваивания "="
Добавление новых свойств
объекта
Вы можете добавлять новые свойства в объект
так же с помощью точечной записи:
Новое значение
новое имя свойства свойства
(ключ) Получаем объект с
тремя свойствами
Удаление свойств объекта
Вложенные свойства
Объектов
В объект можно
вложить другой объект
Доступ к вложенным свойствам
Изменять, удалять или добавлять новые свойства можно через
точку или через квадратные скобки
Какую запись использовать?
Стало
Как создавать
функции в объектах
И немного про this
Синтаксис записи
функции в объекте
Function expression
Имя функции
(ключ функции)
Функция
Вызов функции
Синтаксис записи
функции в объекте
Function declaration, которую поместили в
качестве значения свойства
Function
Declaration
Значение
— это функция которая
создана до создания
объекта
Вызов функции
Сокращенный синтаксис
записи функций
Function Function
expression Declaration
Не пишем слово
Точно так же, как
function
мы делали с
переменными
Но что будет, если мы захотим переименовать
переменную с объектом внутри?
Все сломалось...
Здесь нам приходит на помощь
метод объекта this
Заменили имя
объекта на метод
this
Использование this в функции
Второй вариант применения метода this:
Ссылочный тип
ARRAY - массив
Массив — это упорядоченная коллекция
данных
В объектах мы даем название свойства строкой
(ключ-значение)
Объект:
Массив":
Да, кстати, так же, как и в объектах, запятую после последнего элемента
можно оставлять
«Висячая запятая» упрощает процесс добавления/удаления элементов, так
как все строки становятся идентичными
Методы массива
4 метода добавления и удаления
Добавление элемента в конец массива
Начиная с Удалить
первого количество
элемента элементов
(По индексу) (По количеству)
Начиная с Какие
Удалить 0 элементы
первого
элементов добавить по
элемента
(По индексу) указанным
(По индексу)
параметрам
Метод splice возвращает массив
удаленных элементов
Начиная с Удалить
Присваиваем
первого количество
результат
элемента элементов
функции splice
(По индексу) (По количеству)
переменной
dataFromUserArr
Методы работы с данными массива
Цикл for
Циклы нужны, когда необходимо
повторить какое либо действие много раз,
если условие верно
Условие цикла.
Проверяется перед каждой
Начало цикла итерацией цикла. Шаг цикла.
(отсчётная точка). Если оно вычислится в false, цикл Выполняется после тела цикла на
Создаем переменную остановится. каждой итерации перед
i со значением 1 проверкой условия.
1 4
2
3
Цикл for
break / continue
continue
Используется при проверке условия внутри цикла.
Если условие true переходит к следующей итерации, пропуская инструкции
текущей итерации.
break
Используется при проверке условия внутри цикла.
Если условие true полностью прерывает цикл и выходит из него.
Java Script
Цикл while
do while
Синтаксис записи цикла While
VS
Цикл For
Одинаковый результат
Что использовать?
Мутация
объектов
В JS есть 2 типа данных
Примитивные типы данных Ссылочные типы данных
Введение в
D.O.M.
Окружение Java Script
Изначально JS создавался только для браузеров, но сейчас этот язык
мультиплатформенный
А так как HTML элементы — это объекты, то это значит, что мы можем
манипулировать ими с помощью JS
"Прямое"
Получение
HTML элементов
Объект document
На каждой HTML странице существует объект document, у которого есть методы
для получения доступа к элементам(тегам) html страницы
Например:
document.querySelector(".nav") Получаем первый на странице, элемент с классом
nav
document.querySelectorAll(".nav__item")
document.getElementById("id");
document.getElementsByClassName('test')
Возвращает document.getElementsByTagName("li")
элемент
Возвращают
коллекцию
Входной объект
document, в котором
содержатся методы
работы с document
С помощью свойства
объекта document.
documentElement
можно получить доступ
к тегу <HTML>
Также, в свойствах
объекта document есть
свойства head и body
Но что, если нам нужно получить доступ к более мелкой частице тега?
К какому либо из узлов. Например, к пробелу в теге h1.
Получение узлов дерева DOM
Но что, если нам нужно получить доступ к более мелкой частице тега?
К какому либо из узлов. Например к пробелу в теге h1.
Array.from()
Java Script
Циклы
for in и
for of
Помимо циклов for и do while
Есть еще 2 крайне популярных цикла
Изменение HTML
элементов
Свойства объектов HTML
Как мы знаем, каждый тег или узел — это объект в DOM
Например:
Если мы выведем в console.dir какой либо из HTML тегов, мы
увидим его свойства, которые мы можем изменять:
className
Отвечает за
название класса
childNodes
Содержит
псевдомассив
дочерних узлов
elem.innerHTML innerHTML
Отвечает за
Может получать и изменять содержимое тега содержимое тега
Свойства для получения и изменения тегов
elem.innerHTML
Может получать и изменять содержимое тега
elem.textContent
Может получать и изменять только текст внутри тегов Добавлять
теги внутрь тегов с помощью textContent нельзя
elem.outerHTML
Может получать и изменять сам тег вместе с его содержимым
elem.data
Может получать и изменять содержимое узла
Java Script
Создание и вставка
новых элементов
Создание элементов
document.createElement("h2")
document.createTextNode("Some text")
Вставка нового элемента
Для вставки нового элемента перед выбранным:
existElem.before(newElem)
Для вставки нового элемента после выбранного:
existElem.after(newElem)
Для вставки нового элемента внутрь выбранного и перед
его содержимым :
existElem.prepend(newElem)
Методы точечной
вставки элементов
Второй параметр или просто текст
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, в котором содержатся все возможные стили
элемента
Доступ к атрибутам
тегов
Атрибуты тегов
Каждый HTML тег содержит свои атрибуты
События элементов
DOM
Какие бывают события
Браузеры поддерживают очень большое количество событий
elem.AddEventListener('event', function(){})
Как работает
this
this используется только в методах и
функциях
Следовательно:
Если this вызывается в методе объекта, то this = имя этого объекта
Второе:
Так как в этом случае this будет объектом window, а у объекта window нет
свойства style.
Последнее:
Деструктуризация
массивов
Деструктуризация массивов
Часто бывает, что те или иные свойства (элементы) массива нам нужно
использовать по отдельности.
Массив
Массив
Объявляем
переменную с С помощью В каждую переменную
помощью синтаксиса вкладываем значение
const или let квадратных скобок свойств массива
через запятую в порядке очередности
создаем несколько (gервая переменная
переменных примет значение первого
элемента массива)
Как получить первый и третий элементы
Деструктуризация
объектов
Деструктуризация объектов
Часто бывает, что те или иные значения свойств объекта нам нужно
использовать по отдельности
Объект
Объект
Оператор
spread
Оператор spread
Этот оператор просто упрощает процесс использования данных итерируемых объектов
Оператор
spread
Оператор
rest
Оператор rest
spread — распаковывает
rest — наоборот,
запаковывает
Пишется оператор rest так же через три точки ...
Калькулятор сложения:
Java Script
Классы в
JS
Классы позволяют создавать шаблоны
Шаблон в свою очередь — это прототип какой-то сущности
Модифицированный экземпляр от
шаблона машины
Прототип (шаблон)
машины
Классы позволяют создавать шаблоны
Шаблон в свою очередь — это прототип какой-то сущности
Все экземпляры выглядят по разному: у них разные функции (одни грузовые, другие
легковые машины), разные свойства (скорость маневренность и т.д.)
Но (прототип) шаблон у них всех все равно один. Изменяются свойства и функции
оригинального прототипа. И даже дополняются новыми функциями.
Например, в современных авто есть камеры видео наблюдения.
Прототип (шаблон)
массива
или так
Прототип (шаблон)
массива
Прототип (шаблон)
объекта
или так
Прототип (шаблон)
объекта
Вызов
Переменная instance
унаследованного
унаследует все методы
метода render
прототипа
Java Script
Класс
Set
Что такое Set?
Помимо объектов и массивов есть и другие классы, которые работают с
данными по-своему
По сути, Set нужен только для того, чтобы иметь возможность получать и
хранить уникальные элементы. И, так как set перебираемый объект, на
нем будет работать все, что работает на перебираемых объектах.
Например, оператор Spread или цикл For of
Java Script
Класс
Map
Что такое Map?
Помимо объектов, массивов и Set есть еще одна структура
данных — это Map
Мы знаем, что у массивов есть цифровые ключи свойств, у объектов строковые ключи
свойств, set — это просто уникальные коллекции без ключей.
Но что, если нам необходимо самому решить какого типа данных будет ключ у того
или иного свойства
Получить значение
свойства по ключу
"categories"
Методы Map
Так же, как и в Set, у Map есть 2 метода:
has() — проверяет наличие свойства
delete() — удаляет свойство
has()
delete()
Обратите внимание на
структуру.
Это массивы с двумя
элементами — Ключ
ключ - значение Значение
Как конвертировать объект в массив
Чтобы конвертировать объект в массив используем Object.entries(obj):
Но массив, должен
быть таким:
В массиве, массивы -
ключ - значение.
Как конвертировать объект в Map
1 - Чтобы создать несколько свойств Mар можно использовать запись массива в
массиве, содержащую ключ - значения.
Строки ч.1
Как работают строки в JS
Из строк состоит очень большое количество данных в JS и его окружении
Поэтому необходимо знать, как их использовать и манипулировать ими
Регистр
имеет
значение
Один
аргумент:
Оставить все
после 4-го
индекса
Два
аргумента:
Оставить все
с 4-го
Зная это, мы можем получить, например, первое слово из индекса и до
7-го
текста, даже не зная какой длинны первое слово
Или последнее
Метод строк slice с отрицательными значениями
Строки ч.2
Методы регистра текста
Два метода позволяют написать и трансформировать текст в верхний и нижний
регистр
Заменяем на символ
символ рубля доллара
Строки ч.3
Метод split()
Позволяет собрать в массив строку из разный слов или символов
Каждый элемент массива будет создан путем указания в параметрах
символа, разделяющего слова в строке
Всего 4 знака
в строке
Метод padEnd()
padEnd() работает точно так же, только символы ставятся после строки
Метод repeat()
Принимает 1 параметр.
Сколько раз нужно повторить строку
Java Script
Параметры
функций
по умолчанию
Параметры функций по умолчанию
Вы можете задать параметры для функций по умолчанию
Функции
первого класса
и
высшего порядка
Функции первого класса
Функция первого класса может быть аргументом для другой функции, может быть присвоена
переменной.
В общем, с ней можно обращаться, как и с любым другим объектом.
Функции,
которые
возвращают
функции
Функция возвращает функцию
Функция может возвращать другую функцию. Работает это так:
Java Script
Метод функций
call()
Функция — это объект
А у объектов есть свои методы.
Вы знаете. что функция с использованием контекста this вне объекта, вызовет ошибку в
строгом режиме
Но, если функция будет методом объекта, то this будет ссылаться на этот объект
Одинаковый
результат
Метод функций - call()
Но что, если мы хотим использовать функцию с контекстом this,
НЕ прописывая функцию, как одно из свойств объекта
В этом нам поможет метод call()
Метод функций
bind()
Метод функций bind()
Позволяет нам "забиндить" слово this и аргументы функции
"Забиндить" — установить по умолчанию
Если вам не нужно использовать первый аргумент, который относится к слову this, то первым
аргументом передайте null
Java Script
Базовые методы
массивов
Методы массивов
Помимо методов, которые мы изучили в начале курса, есть множество полезных методов для
работы с массивами
Метод slice()
Работает точно так же, как и в строках
Не изменяет
оригинальный массив
Метод reverse()
Переворачивает массив
Метод concat()
Соединяет 2 массива. Не меняет
оригинальный массив
Метод
forEach()
Метод forEach()
Позволяет нам перебрать массив. Точно так же как и цикл for of
Set:
Java Script
Метод
map()
Метод map()
Это тоже перебор и этот перебор структурно работает так же, как
и forEach()
Метод
filter()
Метод filter()
Структурно работает так же, как forEach() и map()
Метод filter() так же, как и map(), возвращает с помощью ключевого слова
return новый отфильтрованный массив, не изменяя оригинальный
Метод
reduce()
Метод reduce()
Суммирует все элементы массива
Второй параметр
метода reduce()
Java Script
Метод
find()
Метод find()
Так же использует call-back функцию и перебирает массив
Метод
findIndex()
Метод findIndex()
Работает так же, как метод find(). Но возвращает не элемент
массива, а его индекс по указанным условиям call-back функции,
которые проходят как true
Массив с Элементы
аккаунтами массива
Методы
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
НО!
Заглавные буквы имеют больший приоритет
Метод sort()
2-Метод sort() конвертирует элементы в строку и символы цифр будут
сортироваться не по числам, а по приоритетности строковых символов
Так как для сортировки нам нужно либо отрицательное число(false), либо
положительное(true)
JS c нуля до результата
Методы
fill()
Array.from()
Метод fill()
Позволяет заполнить массив нужным количеством
одинаковых элементов в определенные места массива
Конвертация и
генерация
чисел
Конвертация чисел
Все числа в js - это числа с плавающей точкой
Number.parseFloat()
Метод Number.parseFloat(), конвертирует число вместе со стройкой в число,
но в отличие от Number.parseInt(), работает с числами с плавающей точкой.
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()
Позволяет оставить определенное количество символов после точки.
Что такое
bigInt
Тип данных bigInt
Позволяет создавать и работать с числами больше 2 ** 53 - 1
То есть больше чем это число 9007199254740991
Либо так:
bigInt не работает с методами Math
Работа с
датами
Даты - new Date
Создание и изменение дат происходит посредством объекта Date, у
которого есть свои методы и свойства
Методы setMounth/Date/Hourse...()
Позволяют установить в определенную дату, нужный год, число, час и т.д.
JS c нуля до результата
Объект
Intl-Date
Объект Intl - с датами
Позволяет нам создавать даты, нужного нам формата.
Например формат даты определенной страны.
Объект
Intl-Num
Объект Intl - с числами
Числа, как и даты, в разных странах пишутся тоже по разному.
setTimeout &
setInterval
setTimeout
Позволяет запустить какую либо функцию (какое либо действие),
через определенное количество миллисекунд
Для отмены используем метод clearTimeout(название Для отмены используем метод clearInterval(название
переменной в которой записан setTimeout) переменной в которой записан setTimeout)
JS c нуля до результата
Живые и
статичные
коллекции
querySelectorAll VS
getElementsByTagName
Есть 2 метода с помощью которых мы можем получать DOM элементы с
нашей страница. Это querySelector и getElementsBy
Живой - значит то, что когда мы создадим новый элемент в JS коде, после
получения коллекции элементов, этот элемент будет так же содержатся в
коллекции полученной через getElementsBy
То есть при добавлении\удалении узлов или элементов, коллекция будет
содержать все изменения
Координаты
элементов
Все DOM элементы имеют координаты
Получить координаты окна браузера можно в свойствах объекта window.
Каких как:
window.scrollTo()
window.scrollTo() позволяет добраться до нужного места страницы по
координатам указанным в параметре объекта.
window.scrollIntoView()
scrollIntoView() тоже самое только без формул и коротко.
JS c нуля до результата
Всплытие
событий
Всплытие событий
Важно знать, что события которые мы назначаем на элементы, всплывают и
срабатывают на всех родительских элементах.
Например:
Делегирование
событий
Делегирование событий
Intersection
Observer API
Intersection Observer API
Intersection Observer API позволяет веб-приложениям следить за изменением
пересечения элемента с его родителем или областью видимости документа
viewport.
Чтобы создать observer (отслеживатель), нужно воспользоваться
конструктором:
root: null -
отслеживание по CallBack функция, с двумя параметрами.
viewport
root: elem -
отслеживание по
элементу
defer vs
async
DOMContentLoaded
Событие DOMContentLoaded происходит когда весь HTML был полностью
загружен и пройден парсером, не дожидаясь окончания загрузки таблиц
стилей, изображений и фреймов
Парсинг - это
"Парсинг" — это процесс извлечения данных любого сайта в сети Интернет.
Есть 3 варианта подгрузки скрипта
DOMContentLoaded
Чтение JS
DOMContentLoaded
DOMContentLoaded
Итого
В head с атрибутом В head с атрибутом
В конце body defer async
Получения и выполнение скрипта
произойдет только после получения Получение скрипта произойдет Получение скрипта произойдет фоновом
всего HTML фоновом режиме, одновременно с режиме, одновременно с получение HTML
получение HTML
Выполнение скрипта произойдет до
Выполнение скрипта произойдет события DOMContentLoaded
после события DOMContentLoaded
Не гарантирует выполнение скрипта по
порядку в коде.
Скрипт выполнится в порядке
Первым выполнится скрипт который
очереди кода
загрузится первым