Метод write() - Вывод текста

Метод write() - Вывод кода

Создание переменных

Присвоение значений переменным - Числа и строки

Создание нескольких переменных

Присвоение одной переменной другой

Имя переменной должно начинаться

Имя переменной может содержать

Имена переменных чувствительны к регистру

Список ключевых слов JavaScript

Рекомендации по работе с именами переменных

Сложение и умножение переменных. Работа с числами

Сложение переменных. Сложение строк

Сложение чисел и строк

Сложение переменных. Внимание!!!

Присвоение нового значения переменной

Увеличение или уменьшение значения переменной

Увеличение и уменьшение переменной на единицу

Сокращенные арифметические операции

Как создаются массивы в JavaScript?

Второй способ создания массивов. Пустой массив

Смешанный массив в JavaScript

Как вывести данные из Массива в JavaScript?

Нумерация элементов массива

Второй способ вывода данных из массива

Добавление элемента в конец массива - метод push

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

Метод pop - Удаление последнего элемента из массива

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

Метод splice - Удаление элементов из массива

Метод splice - Добавление элементов в массив

Метод splice - Замена элементов массива

Метод sort – Сортировка строк

Метод sort – Сортировка строк - Верхний регистр

Метод sort – Сортировка чисел

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

Метод concat - объединение массивов

Метод slice имеет один параметр

Метод slice имеет два параметра

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

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

Смешанные многомерные массивы

Конструкция If-Else – Примеры условий

Примеры условий If-Else - Работа с числами

Пример простого условия

Логический оператор И

Логический оператор ИЛИ

Любое число это Истина - Ноль это Ложь

Любая строка это Истина - Пустая строка это Ложь

Вывод чисел от 1 до 100

Цикл while - Вывод элементов Массива

Снова о цикле while

Цикл for

Параметры метода open

Метод open возвращает ссылку окно

Поле для ввода информации

Метод prompt возвращает информацию

Метод prompt содержит два параметра

Вызов функции - Параметры функции числа

Параметры функции переменные

Глобальные переменные в JavaScript

Локальные переменные в JavaScript

Результат работы функции

Оператор return - Возвращение значения функцией

Свойство length - число символов в строке

Метод toUpperCase в JavaScript - Верхний регистр строки

Метод toLowerCase в JavaScript - Нижний регистр строки

Метод indexOf в JavaScript - Поиск совпадения с начала строки

Метод lastIndexOf в JavaScript - Поиск совпадения с конца строки

Метод slice в JavaScript - Копирование символов из строки

Метод slice имеет 2 параметра

Метод charAt - Возвращаем символ строки

Метод charCodeAt - Возвращаем КОД символа строки

Юникод U+ и HTML-код символов - Коды букв русского алфавита

Методы charAt и charCodeAt - Рассмотрим реальный пример

Метод search - Регулярные выражения - Синтаксис

Регулярное выражение цифра - \d

Регулярное выражение - {n} - ровно n

Регулярное выражение - ^ - Начало строки

Регулярное выражение - $ - Конец строки

Метод match - Возвращаем совпадение

Метод match - Экранирование скобок в регулярных выражениях

Метод match - Возвращаем совпадения - g - Глобальный поиск

Регистронезависимый шаблон i

Диапазон [abc] (a или b или c)

Квантор {n,} (n или больше)

Ищем www. и http:// - Квантор ? - 0 или 1

Точка в регулярных выражениях экранируется

Метод substring - Содержит два параметра

Метод substring - Содержит один параметр

Метод split - Один параметр

Метод split получает два параметра

Функция parseInt - Возвращает число

Исключаем текст ПОСЛЕ числа и возвращаем ТОЛЬКО число

Функция parseInt - Возвращает NaN

Функция parseInt - Возвращает ЦЕЛОЕ число

Функция parseFloat - Возвращает дробное число

Метод toFixed - Число знаков после запятой

Метод toFixed - Добавляет НОЛЬ после запятой

toFixed - это метод!

Метод round - Округляет переданное число

Метод ceil - Округляет число в большую сторону

Метод floor - Округляет число в меньшую сторону

Метод random - Случайное число от 0 до 1

Метод random - Случайное число от 0 до 100

Скрипт для генерации чисел из ПРОИЗВОЛЬНОГО диапазона

Объект Date - Синтаксис

Метод getFullYear - Возвращает текущий год

Метод getMonth - Возвращает номер текущего месяца

Методы getDate и getDay - Число месяца и День недели

Методы getHours, getMinutes и getSeconds - Текущие ЧАС, Минута и Секунда

Объекта Date - Возвращает текущую дату

Объект Date - Для не сегодняшней даты

1-го января 1970 года - Возвращаем количество миллисекунд

1-го января 1970 года - Секунды и минуты. Часы и Дни

Метод getTime - Практический пример

Объект Date - для НЕ сегодняшней даты - Параметр в Миллисекундах

setTimeout - Однократное выполнение кода

setInterval - Многократное выполнение кода

clearInterval - Прерывает запланированное выполнение кода

Несколько условий одновременно - Конструкция if-else

Конструкция switch-case - СИНТАКСИС - Пример

Тернарный оператор - СИНТАКСИС - Три операнда

Тернарный оператор - Альтернатива

1-ый способ создания объекта - new Object

2-ой способ создания объекта - Фигурные скобки

Как обращаться к свойствам объекта - 2 Способа

Создание методов объекта

Доступ к объекту из метода - Через this

Способы обращения к свойствам объекта - Нюансы

Перебор всех свойств объекта - Конструкция for...in - СИНТАКСИС

Список свойств объекта document

Объект navigator - Информация о браузере

Объект screen - Разрешение экрана пользователя

Объект location - текущий URL-адрес

DOM-дерево или html-дерево - Структура и иерархия

Метод getElementsByTagName - Отбор элементов по имени тега

Строка вызова скрипта в конце документа

Метод getElementById - Выбор элемента по идентификатору id

Метод getElementById - Доступ к элементу как к Объекту

Свойство childNodes - Возвращает массив дочерних элементов

Инспектор DOM - Пробелы - undefined

Свойство parentNode - Родительский узел текущего элемента

Свойство nextSibling - Обращение к следующему узлу

Свойство previous - Обращение к предыдущему узлу

textContent и innerText - Доступ к тексту узла

textContent и innerText - Замена текста узла

Свойство innerHTML - Получение и замена КОДа узла

JavaScript-код в начале или в конце страницы...

Свойство onload объекта Window - Функция init

Функция обратного вызова или обработчик событий

Метод setAttribute - Добавление нового атрибута

Метод setAttribute - Изменение значения атрибута

Метод getAttribute - Возвращает значения атрибута

Метод getAttribute возвращает null

Как открыть консоль в браузере?

Метод console.log в JavaScript - Вывод информации в консоль

Преимущества console.log - Каждый раз с новой строки

Когда встречается undefined в JavaScript?

Как использовать undefined?

Где встречается значение null в JavaScript?

Как использовать значение null? Несуществующий объект

Как используется NaN в JavaScript?

Функция isNaN - Не число - это истина

Где встречается Infinity в JavaScript?

Арифметические операции с Infinity

Строки - string

Числа - number

Булевый (логический) тип данных - boolean

Оператор typeof - Соответствие типам данных

Два значения относятся к одному типу

Два значения относятся к разным типам - Число и Строка

Число и Строка - NaN

Булевы значения и числа

Булевы значения и строки

Сравнение null и undefined. Пустая строка и число

Правило использования оператора строгого равенства

Псевдоложные значения в JavaScript

Псевдоистинные значения в JavaScript

onclick - как свойство объекта - обработка событий

onclick - как атрибут тега - щелчок левой кнопкой мыши

Объект события в JavaScript - Свойство target

Свойство onmousemove - Событие перемещение мыши

Метод setTimeout - 2 параметра

Метод setTimeout - 3 параметра - Последовательность событий

Следует обратить внимание

Свойства onmouseover и onmouseout - Событие наведение мыши

1 часть - Как вывести значения всех элементов массива и соответствующие им индексы?

2 часть - Как найти максимальное число в массиве?

3 часть - Определяем индекс максимального числа массива

4 часть - Способы добавления элементов в массив

5 часть – Код для решения всей задачи

6 часть – Оптимизация кода

Использование функций в javascript - Исходный код

Первая функция

Вторая функция

Повторное использование функций

Использование функций в javascript - Тонкости и Нюансы

Параллельные массивы - Исходный код

Работа с параллельными массивами в Javascript

Параллельные массивы - Упрощаем код

Параллельные массивы - Добавляем функции

Пример передачи переменной в функцию

Функция для проверки объекта - true или false

Оптимизация кода

Оптимизация кода - Идем дальше - Добавляем функцию

Передача объектов в функцию - Немного теории

Пример передачи объекта в функцию

Добавление метода в объект

Добавляем еще методы - Переменная не определена

Свойства и методы одного объекта - Ключевое слово this

this - указывает на Объект

1-ый вариант решения - Циклы и условия

2-ой вариант решения - Извлекаем часть строки

3-ий вариант решения

Решение №1 - для 1-го варианта условия

Решение №2 - для 1-го варианта условия

Дефис может быть на любой позиции - 2-ой вариант условия

Использование регулярных выражений - Проверка цифрового номера с дефисом

Объявление функции в javascript

Функциональное выражение в javascript

Различия между объявлением функций и функциональными выражениями

Функция - это значение. Ссылка на функцию

Первоклассные значения в javascript?

Передача функции в функцию

Передача функции в функцию - Тонкости и нюансы

Как изучать JavaScript и Что делать дальше?

Игра на Морской Бой на JavaScript

НЕ Ру-нет - Учить английский?

Англоязычный курс - Введение

Редакторы Brackets и Visual Studio Code

Работа с консолью - console.log

Два способа работы с JavaScript-кодом

Переменные и типы данных

Числа в JavaScript

Строки в JavaScript

Логический тип данных

Undefined - Переменная без значения

Null

Динамическая типизация

Преобразование чисел

Преобразование логических значений

Преобразование Undefined в строку

Мутация переменных

Метод alert

Метод prompt

Подводим итог

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

Логические операторы

Оператор typeof

Таблица приоритета операторов

Оператор группировки - Скобки ( )

Одновременное присваивание

Ассоциативность

Сокращенные арифметические операции

Инкремент и Декремент

Ход решения задачи

Проверка работы кода

Ключевое слово let

Ключевое слово const

Ключевое слово var

Не используем ключевые слова

Построение комплексной строки

Шаблонные литералы

Обратный апостроф - Для всех строк

Многострочные строки

Оператор if

Оператор else

Структура управления if-else

Примеры конструкции if-else

Подводим итог

Решение задачи - Часть 1

Решение задачи - Часть 2

Преобразование типов

Вычитание - Преобразование строк в числа

Умножение и деление - Преобразование строк в числа

Логические значения - Преобразование строк в числа

Примеры приведения типов

Преобразование строки в число - Функция Number

Не число NaN - Преобразование строки в число

Приведение типов

Функция String - Преобразование чисел в строки

Сложение - Преобразование чисел в строки

Пять ложных значений в JavaScript

Функция Boolean

Логический контекст конструкции if else

Пример использования ложных и истинных значений

Оператор равенства - Три знака равно

Блок if в одну строку

Как работает тройной оператор равенства

Двойное равенство ==

Всегда строгое равенство ===

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

Несколько условий одновременно

Операторы неравенства

Логический оператор И - Таблица Истинности

Логический оператор ИЛИ

Оператор НЕ

Примеры работы с операторами И ИЛИ и НЕ

Оператор И - Два амперсанда &&

Оператор ИЛИ - Две вертикальные лини ||

Оператор НЕ - Восклицательный знак !

Составление условий и принятие решений

И и ИЛИ - Больше двух параметров

Составление условий - Больше двух параметров

Решение задачи - Проверка основного кода

Дополнительное задание №1

Дополнительное задание №2

Что понадобится для работы?

Установка плагинов для VCcode

Плагин JShint - Терминал Windows PowerShell

Подробнее о плагине JShint - Файл .jshintrc

Как подключить JavaScript к странице

Объявление переменных в ES6

Устаревший способ объявления переменной var

Второе отличие let и const от var

Поддержка в браузерах ES6

Директива use strict - Строгий режим

Стиль кода JavaScript

Точка с запятой в JavaScript

Простые типы данных в JavaScript

Числа - Infinity и NaN

Строки - Типы кавычек в JavaScript

Логический тип данных - Булевы значения

null - Не существует

Undefined - Существует, но не имеет значения

Symbol и BigInt

Классификация типов данных в JavaScript

Специальные объекты

Создание объекта

Доступ к значениям свойств объекта

Массивы - Комплексный тип данных

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

Массив - Частный случай объекта

Метод alert - Окно предупреждение

Метод confirm - Да или Нет

Метод prompt - Поле для ввода - Синтаксис

Метод prompt - Конвертация строк в числа

Метод prompt - Занесение данных в массив

Особенность методов alert, confirm и prompt

Конкатенация - объединение строк

Интерполяция - Обратные кавычки

Сложение строк и чисел - Унарный плюс

Оператор % - Остаток от деления

Оператор равенства - Присваивание

Оператор сравнения - Два знака равно

Строгое равенство - Три знака равно

Логические операторы И и ИЛИ

Оператор отрицания - НЕ !

Порядок выполнения операторов

Неравенство !=

Сравнение по типу и по значению

Инкремент и декремент

Постфиксная форма записи

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

Постфиксная форма возвращает старое значение

Что такое GIT

Что дает GIT

GIT и GitHub

Начало работы - GIT How To

Git GUI или Терминал?

Работа с терминалом

Создание репозитория - Команда git init

Настройка GIT - Локальная и глобальная конфигурация

Как работает система GIT

Статус репозитория - Команда git status

Файлы в индексе - Команда git add

Создание коммита - Команда git commit

Внесение и отмена изменений - Команда git restore

Просмотр комитов - Команда git log

Копия репозитория - git push -u origin main

Ошибка - error: failed to push some refs

1-ый способ переноса репозитория на другой компьютер

2-ой способ переноса репозитория - Команда git clone

Изменения в репозитории на 2-ом компьютере

Получение изменений из удалённого репозитория - Команда git pull

Ошибка - ! [rejected] error: failed to push some refs - Слияние репозиториев

Зачем нужен файл .gitignore?

GitKraken - графический клиент GIT

Решение №1 - Добавление свойств в объект через квадратные скобки

Решение №2 - Добавление свойств в объект через точку

Примеры условий - Оператор if

Вторая часть условий - Оператор else

Условия - true или false

Несколько условий - Вложенные условия

Тернарный оператор - Синтаксис

Конструкция switch-case - Альтернатива if-else

Цикл while

Цикл while - Вторая форма записи

Цикл for

Как прервать цикл - break

Оператор continue

Решение №1 - Цикл for

Решение №2 - Цикл for

Тонкости и нюансы

Синтаксис функций

Имена функций - Анонимные функции

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

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

Локальные и глобальные переменные

Замыкание функции

return - Функция возвращает значение

return - Пример

Классификация функций - FUNCTION DECLARATION

FUNCTION EXPRESSION

Стрелочные функции - Стандарт ES6

Свойство length

Методы строк - toUpperCase и toLowerCase

Методы indexOf и lastIndexOf, slice и substring

Метод substr()

Все методы - Команда console.dir()

Объект Math - Методы чисел

Индекс строки - str[n]

Методы округления чисел и random - случайное число

Методы parseInt() и parseFloat()

1-я часть задания - Оптимизация кода

2-я и 3-я часть задания

2-я и 3-я часть задания - Оптимизация кода

Последовательная и асинхронная работа функций

Что такое callback-функция?

callback-функции на практике

Добавление и удаление свойств из объекта

Перебор свойств объекта - Конструкция for in

Перебор свойств вложенного объекта

Все свойства и методы у объектов

Сколько в объекте содержится свойств?

Методы объектов - Метод keys()

Создание методов объекта

Деструктуризация объектов - Стандарт ES6

Методы добавления и удаления элементов из массива

Методы shift и unshift

Перебор элементов массива - Цикл for

Перебор элементов массива - Конструкция for-of

Перебор массива - Метод forEach()

Другие методы перебора - Модификация массива

Метод split - Массив из частей строки

Метод join - Объединение элементов массива в строку

Метод sort - Сортировка элементов массива

Псевдомассивы в JavaScript

Логика или Алогика

Простые типы данных - Передача по значению

Объекты - Передача по ссылке

Клонирование объекта

Поверхностное клонирование - Вложенные объекты

Метод assign() - Примеры

Копия только исходного объекта

Оператор spread - Копирование массивов

Оператор spread - На практике

Оператор spread - Копирование объекта

JavaScript - это объектно-ориентированный язык

Что является объектами в JavaScript?

Что такое прототипы?

Система прототипов

Прототипы на практике

Пример работы с прототипами

Свойства proto - устаревший способ

Метод Object.setPrototypeOf

Метод Object.create()

Исходный код - из прошлого задания

Рефакторинг кода + 2-я и 3-я часть задания

Оптимизация кода для 3-ей части задания

Вкладка Sources - breakpoints Вкладка Source позволяет дебажить код (отлаживать) Допускается устанавливать точки останова (разрыва)

Что такое динамическая типизация?

Преобразование в строку - String

Преобразование в строку - Конкатенация

Преобразование в число - Number

Преобразование в число - Унарный плюс

Методы parseInt() и parseFloat()

Преобразование в булевы значения

Команда Boolean

Два отрицания !!

Типы данных в JavaScript - Иллюстрация

1-я задача - Постфикс и Префикс

Сложение различных типов данных

DOM - Объектная модель документа

Глобальный объект document

Методы для получения элементов с веб-страницы

Метод getElementById - Выборка по id

Метод getElementsByTagName - Выборка по имени тега

Метод getElementsByClassName - Использование классов

Метод querySelectorAll - Возвращает все элементы

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

Получение элементов - Подводим итог

Доступ к элементам через родителя

Стили из JavaScript - Объект CSSStyleDeclaration console.dir() - Свойство style Свойства объекта style: CSSStyleDeclaration Формат записи CamelCase - backgroundColor Инлайн стили имеют приоритет перед классами

Свойство cssText - Несколько стилей Несколько стилей средствами JavaScript cssText - Свойства записываются как в CSS - background-color В строку со стилями можно подставлять переменные

Использование циклов и методов перебора Цикл for - Стиль нескольким элементам Метод forEach - Стиль нескольким элементам Метод forEach существует только для querySelectorAll

Метод createElement Создает новый элемент c указанным именем тега document.createElement("...")

Метод createTextNode Создает новый текстовый узел createTextNode используется редко

Свойство className и classList className устарело и не рекомендовано для использования classList более современное и используемое свойство

Метод add() - Добавление классов к элементу add – это метод свойства classList element.classList.add('class_name');

Вставка элементов на страницу

Метод append Позволяет вставить элемент в конец другого элемента

Метод prepend Позволяет вставить элемент в начало другого элемента

Методы before и after before - Вставить элемент перед другим элементом after - Вставить элемент после другого элемента

Метод remove - Удаление элементов

Метод replaceWith - Замена элементов

Метод appendChild Позволяет вставить элемент в конец другого элемента Метод appendChild аналогичен методу append

Метод insertBefore Позволяет вставить элемент перед другим элементом На замену пришли методы prepend, before и after

Метод removeChild Позволяет удалить дочерний элемент removeChild устарел - Метод remove пришел на замену

Метод replaceChild Позволяет заменить дочерний элемент на выбранный replaceChild устарел - Метод replaceWith пришел на замену

Метод innerHTML - Вставка текста

Метод innerHTML - Вставка HTML-кода

Метод textContent - Вставка текста

Метод insertAdjacentHTML

Исходные данные

Решение задачи

Оптимизация кода

Список событий и справочник по событиям

Обработчик события Обработчик события - это функция Примеры распространенных событий

Как в JavaScript назначить обработчик события

1-ый способ назначить обработчик события Использование html-атрибута

2-ой способ назначить обработчик события Использование свойства onClick Минусы использования свойства onClick

Метод addEventListener - Синтаксис Правильный способ назначения обработчика событий Название события --> Обработчик события

Метод addEventListener - Несколько событий

Событие mouseenter Указатель появляется над элементом

Обработчик события срабатывает всегда

Метод removeEventListener

Объект Event - Объект события

Свойство target объекта Event

Всплытие событий - Свойство event.target

Всплытие событий - Свойство event.currentTarget

Отмена стандартного поведения браузера

Один обработчик для нескольких элементов

Третий аргумент метода addEventListener

Доступ к DOM - Объект document

Родительские и дочерние элементы

Метод childNodes

DOM-элементы и DOM-узлы

Свойства firstChild и lastChild

Доступ к родительскому элементу - Свойство parentNode

data-атрибуты - Синтаксис

Свойства nextSibling и previousSibling

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

Свойства nextElementSibling и previousElementSibling

Метод parentElement

Методы firstElementChild и lastElementChild

Метод childNodes - Нет аналогов?

Исходные данные

Решение задачи - События на странице Рекурсия - вызов функции внутри себя

События load и DOMContentLoaded

Событие load и DOMContentLoaded - Синтаксис

Шесть событий на мобильном браузере

События touchstart, touchmove и touchend - Пример

Свойство touches объекта события - Объект TouchList

Свойства targetTouches и changedTouches

Атрибут defer - Загрузка скрипта в фоне

Атрибут defer - Порядок выполнения скриптов

Атрибут async - Асинхронные скрипты

Разместить скрипт на странице - Создать тег <script>

Объект ClassList - Свойство length Количество классов элемента

Метод item свойства ClassList Получить класс по индексу

Метод add - Добавить класс Добавление нескольких классов

Метод remove - Удалить класс

Метод toggle - Чередовать класс элемента Добавить класс если его нет и удалить если он есть

Метод contains - Наличие класса у элемента Проверка наличия класса Используется при составлении условий

Свойство ClassList - Практический пример На практике метод toggle не всегда применим Иногда лучше составить условие if-else

Свойство className - Устарело Часто не удобно и не рекомендовано

Обработчик для общего родителя На каком объекте случилось событие? 1. console.dir(event.target) 2. Проверка по тегу - свойство tagName

Пример делегирования событий Проверка на существование event.target Проверка по классу - свойство classList

Когда используется делегирование событий? 1. События на множестве элементов 2. Интерактивные элементы

Метод matches - Наличие класса у элемента Поиск по совпадению элемент.matches('селектор');

Табы - Смена контента Что такое табы? Как переключаться между контентом?

Табы - Пример скрипта 1. Скрыть содержимое всего контента 2. Показать содержимое нужного контента 3. Назначить обработчик для табов

Инлайн стили и классы - CSS-анимация Замена инлайн-стилей классами CSS-анимация при смене контента

Метод setTimeout - Синтаксис - 2 аргумента Запускает функцию один раз через заданный промежуток времени

Метод setTimeout - 3-ий аргумент 3-ий аргумент - аргумент для внутренней функции

setTimeout - Аргумент функция Метод setTimeout принимает функцию - НЕ вызывает её Функция вызывается - по истечении указанного времени

Метод clearInterval - Остановка скрипта Отменить выполнение скрипта Аргумент - идентификатор скрипа/переменная

Метод setInterval + Запуск скрипта по событию SetInterval - запускает функцию регулярно и по событию

Метод setInterval - Простая JS-анимация

Рекурсивный setTimeout Рекурсивный setTimeout лучше, чем setInterval Рекурсия - вызов функции внутри себя

Объект Date - Текущая дата now = new Date()

Передаем в объект Date любую дату now = new Date(2022, 7, 2, 19)

timestamp - 1970 - Число миллисекунд Число миллисекунд, прошедших с начала 1970 года now = new Date(0);

Методы объекта Date get - получение компонентов ДАТЫ getDay - нумерация дней недели в JS начинается с 0

Аналоги методов - UTC getHours - 20 часов; getUTCHours - 17 часов

Метод getTimezoneOffset getTimezoneOffset - разница между текущим и временем UTC

Метод getTime 1.1 timestamp - возвращает число миллисекунд. От начала 1970 года 1.2 До настоящего момента или до указанного времени 2.1 Метод getTime также возвращает Дату

set - Установка времени и Даты setHours возвращает количество миллисекунд

setHours - Второй аргумент

Авто исправление

Метод parse - Возвращает число миллисекунд parse разбирает строковое представление даты

Объект Date - Пример использования в JS Узнать время выполнения скрипта

С чего начать? Дедлайн 1. Текущая дата 2. Дедлайн - крайний срок выполнения задачи

Конвертация миллисекунд в Дни, Часы, Минуты Остаток часов, минут, секунд

JS-код для таймера. Алгоритм и Комментарии

Cвойства clientWidth и clientHeight Размер элемента внутри рамок border Размеры одержимого вместе с padding, но без прокрутки

clientWidth/Height + box-sizing

Cвойства offsetWidth и offsetHeight Полный размер - внешняя ширина и высота, включая рамки

offsetWidth/Height + box-sizing

Свойства scrollWidth и scrollHeight Аналоги clientWidth и clientHeight - но с учётом прокрутки

scrollWidth/Height + box-sizing

scrollHeight - Распахнуть элемент на всю высоту

Свойства scrollLeft и scrollTop Ширина и высота прокрученной в данный момент части элемента

document.documentElement - Ширина окна браузера

scrollLeft и scrollTop - Можно изменять

scrollBy и scrollTo - Прокрутка страницы scrollBy - прокручивает страницу относительно её текущего положения scrollTo - прокручивает страницу на абсолютные координаты

Метод getBoundingClientRect - Координаты элемента Возвращает размер элемента и его координаты относительно окна

getComputedStyle - Фактическое значение свойства Возвращает фактическое значение CSS-свойств

getComputedStyle - Стили псевдоэлементов В JS нельзя получить сам псевдоэлемент! Но есть возможность работать со стилями псевдоэлементов

Исходные данные - Модальное окно скрыто По умолчанию модальное окно скрыто - Как его увидеть?

Используем data-атрибуты Триггерам назначаются data-атрибуты - Для вызова/закрытия окна Для вызова/скрытия модального окна используются инлайн-стили Для body - overflow = 'hidden' - содержимое страницы не прокручивается Для вызова/скрытия окна - свойство classList: методы add и remove Для вызова/скрытия окна - свойство classList: метод toggle

Закрытие модального - Клик на область вне окна Используется event.target для отслеживания, куда кликнул пользователь

Закрытие модального - Клик на ESC События keydown и keyup – нажатие и отпускание клавиши Как отслеживать нажатия клавиш? У каждой клавиши есть свой код. event.code - Используется объект события и его свойство code. Обработчик события назначается для объекта document.

Открытие модального окна - Промежуток времени setTimeout - Модальное окно открывается clearInterval - Модальное окно не будет вызвано повторно

Открытие модального окна - В конце страницы 1. Событие scroll - отследить пролистывание страницы scroll "вешается" на глобальный объект window. 2. Текущая прокрутка страницы сравнивается с полным размером 3. removeEventListener - Чтобы модальное окно не появлялось каждый раз

Функции конструкторы Ключевое слово this Функции-конструкторы используются как прототип объекта

Свойство prototype Добавление в функцию-конструктор методов/свойств

Простой вызов функции Обычная функция this = window, если use strict, то undefined

Замыкание функции Замыкание функции

Вызов метода объекта this - контекст у методов объекта - сам объект.

Оператор new - Функции конструкторы this в конструкторах и классах - это новый экземпляр объекта

Методы call, apply и bind Ручное присвоение this любой функции Методы call и apply - Разница Метод bind создает новую функцию