В JavaScript существуют 3 области видимости:
- Глобальная область видимости;
- Функциональная;
- Область видимости блока.
Начнем с глобальной области видимости. Переменные объявленные за пределами функции или какого-нибудь блока, т.е. вне фигурных скобок находятся в глобальной области видимости и доступны в любой части кода после их объявления. Только, как вы уже знаете, есть отличие переменной объявленной с помощью ключевого слово let и var. Когда мы объявляем переменную с помощью ключевого слова var, то она становится глобальным свойством или методом объекта window, но не переменная объявленная с помощью let. Также есть и другие отличия. Например, когда вы объявляете переменную с помощью var, то она, так же как и функция считывается в первую очередь, перед выполнением кода. Например,
Мы можем сперва вывести переменную в консоль, а затем её объявить. Здесь транслятор заранее заносит переменную i в память и задает ей значение по умолчанию, т.е. undefined. Зразу присваивать ей значение 0 он не будет, а сделает после выполнения конлоль лог. Но так как переменная уже существует перед выполнением кода, то консоль лог не выдаст ошибки.
Если мы напишем все тоже самое только с ключевым словом let, то выйдет ошибка.
Т.е. переменные созданные с помощью let и const заранее не заносятся в память транслятора, перед выполнением кода. Также с помощью var мы можете несколько раз объявлять одну и туже переменную, и она будет просто перезаписываться.
Но с let такое не пройдет.
Но пройдет в консоли, так как консоль некоторые правила игнорирует.
Так, ну с глобальной областью видимости, думаю, все понятно. Дальше переходим к функциональной области.
Переменные, объявленные внутри функции с использованием ключевого слова var имеют функциональную область, а это значит что они доступны в любой области этой функции.
Например, Создадим функцию MyFunction, внутри этой функции будет условный оператор if внутри которого объявим переменную i, далее вне оператора if обратимся к этой переменной. И код работает, т.е. переменная объявленная с помощью ключевого слова var, будет доступна в любом участке функции, но не переменная let.
Дело в том, что у переменной let и const блочная область видимости, т.е. эти переменные будут видны на уровне блока (блоком являются фигурные скобки), а также в блоках на уровнях ниже, чем эти переменные.
Т.е. в данном случае переменная i видна во внутреннем блоке if, но если как в одном из предыдущих примеров мы объявим переменную с помощью let в блоке if, то в блоке на уровень выше она будет не видна.
Из-за того что у переменной var функциональная область видимости, она будет видна в блоках на уровень выше не только в функциях, но даже в таких примерах.
Данное поведение часто вводило путаницу в коде, и поэтому придумали переменные let и конст, чтобы поведение переменных было более предсказуемым.
Двигаемся дальше. Для следующей практики нам надо будет освоить две функции – это animate и adEventListener.
Начнем с animate. Данная функция является методом DOM – элементов и позволяет создать анимацию с помощью CSS. Выглядит схематически данная функция так:
В параметре keyframes мф должны ввести массив объектов, где каждый объект определяет ключевый кадр анимации. Например, если у нас три ключевых кадра, то первый кадр это начало анимации, второй – середина, третий конец анимации. Внутри каждого объекта мы с помощью ключей и значений перечисляем css-свойства и их значения.
В параметре option мы должны написать объект, который определяет временные параметры анимации, такие как продолжительность, количество повторений, направление и т. д. В качестве ключей объекта мы можем написать:
duration (длительность анимации в миллисекундах)
iterations (количество повторений анимации; можно указать Infinity для бесконечных повторений)
direction (направление воспроизведения анимации)
и другие CSS свойства.
Теперь переходим к следующему методу – это adEventListener. Данный метод позволяет запускать любую вашу функцию в ответ на какое-либо событие происходящее на сайте, например клик по кнопке, нажатие клавиши и т.д. До этого мы использовали атрибут onclick, или href для запуска функции при клике. Но метод adEventListener является более функциональным и гибким методом для работы с различными событиями, включая клики мышкой.
Схематически функция выглядит так.
Где первый параметр event – это строка где вы должны указать какое событие вы отслеживаете (например, “click”, “mouseover”, “keydown” и т.д.),
Function – соответственно функция, которую вы хотите запустить.
Options – это необязательный параметр, здесь вы должны указать объект с дополнительными настройками для обработки события.
Настройки могут быть такие:
capture – true/false
once – true/false
passive – true/false
signal – AbortSignal
Но перед тем как изучить эти настройки нам надо понять как происходит событие в DOM. Я буду максимально упрощенно говорить, чтобы легче было понять.
Допустим у вас есть html-страница, в которой есть теги html, body, div, а внутри div содержится тег button. Вы создали метод, который среагирует тогда, когда вы кликнете по кнопке. Итак, вы кликаете по тегу button, и событие начинает двигаться к тегу button начиная с корневого тега html. Т.е. сперва событие клика зашло в тег html, и просто кликнуло по этому тегу, затем событие перешло в тег боди, кликнуло по нему, далее переместилось в тег div, кликнуло также по нему, и наконец добралось до тега баттон – данная фаза называется Фаза захвата, когда событие двигается от корневого элемента к необходимому тегу.
Затем идет фаза цели – когда событие добралось до необходимого тега, и кликнуло по нему. В этот момент запустится ваша функция.
Далее наступает фаза всплытия – когда событие двигается теперь от необходимого тега к корневому и делает все тоже самое, что и при фазе захвата.
Итак, возвращаемся к опциям, опция capture сообщает методу, когда надо обработать ваш клик, в фазе захвата – для этого надо написать true, или в фазе всплытия – false. Вы можете спросить – а зачем это вообще нужно. Допустим у меня четыре метода, которые реагируют соответственно на клик по html, по body, клик по div и по button.
А наши функции просто будут выводить в консоль информацию что клик произошел по тому или иному тегу. В опции capture я указал true, значит эти методы будут выполняться в фазе захвата. Конечной целью события является тег button, дальше тега button событие не пойдет, а начнется фаза всплытия. Так как тег button является конечной целью события, и попадает в фазу захвата цели, то ему можно не указывать в какой фазе он должен выполнится, потому что он не входит ни в фазу захвата ни в фазу всплытия. Удалим. эту опцию.
Теперь если я кликну по кнопке, то начнется фаза захвата, событие перейдет в тег html и кликнет по нему, значит сработает этот метод, так как он выполняется в фазе захвата, затем событие перейдет в боди, сработает этот метод, а затем этот и клик по батон. Давайте запустим.
Как видите сперва сработал клик по html, затем боди, див, а в конце button. А теперь поставим давайте поставим false для клипа по div. По идее он должен сработать уже во время фазы всплытия, а значит после кнопки батон. Проверяем:
Все так и есть. А что если всем удалить опцию capture.
Получается что методы, выполнились в фазе всплытия, т.е. для опции capture по умолчанию стоит значение false. Опция capture влияет на методы которые находятся в фазе захвата или всплытия, и не влияет на метод, который находится в фазе цели.
Надеюсь с опцией capture все понятно, далее идет опция once, который в случае true выполнит ваш код только один раз. Если вы второй раз кликните по кнопке, метод не обработает данное событие. По умолчанию стоит false.
Про опции passive и signal мы поговорим уже чуть позже в будущих уроках , так как там надо будет изучить еще пару тем, а я не хочу сильно загружать вас информацией в этом видео.
На этом урок заканчивается, до встречи на практике.