Илья Дмитриев

В ES6 появился упрощенный синтаксис функций через =>. Вместо ключевого слова function пишем => что позволяет сделать синтаксис более короче и удобнее. Функция в старом стиле: Функция в новом стиле: Если у функции несколько параметров - их надо брать в скобки: Функция в старом стиле: Функция в новом стиле: Если функция...

Что бы понять что такое замыкания в javaScript необходимо наглядно изучить пример. Создадим переменную number, снаружи функции: Если вызвать функцию func - то она сначала увеличит переменную number на единицу после чего вернет новое значение number: При вызове функции каждый раз она будет выводить на единицу больше. В нашем примере переменная number находится в глобальной области видимости. Из-за этого другая функция может случайно затереть number и функция func перестанет давать правильный результат...

Функции, не имеющие имени, называются анонимными. Такие функции необходимы тогда, когда имя функции не требуется Рассмотрим примеры. Создадим переменную element, в которую сохраним ссылку на какой-нибудь элемент и привяжем к событию onclick анонимную функцию: Допустим вам понадобилось имя функции, например для открепления через removeEventListener. Можно дать ей имя: Функции высшего порядка в JavaScript Функция высшего порядка — это функция, способная принимать другую функцию как аргумент или возвращает другую функцию как результат...

Для более четкого понимания давайте начнем сразу с примера. У вас есть несколько вложенных друг в друга блоков: При клике на самый внутренний блок, вы попадаете и на внешние блоки так как "самый внутренний блок" блок находится внутри других Событие onclick возникает сначала во внутреннем блоке, а затем срабатывает в его родителе, в родителе его родителя и так далее, пока не дойдет то тега body и далее до тега html (затем до document и до window). Давайте убедимся в этом на следующем примере:...

Объект Event (объект Событие) содержит в себе информацию о произошедшем событии. К примеру, если по элементу был сделан клик, мы можем узнать координаты этого клика, была ли нажата клавиша Ctrl, Alt или Shift в момент клика и другую информацию. Как получить объект event Пусть у нас есть элемент, по клику на который выполнится функция func: Внутри привязанной функции уже есть объект event. Чтобы его получить необходимо передать ее в функцию как параметр, причем название может быть любым, например event...

Вставка элементов осуществляется через следующие методы: Изучим эти методы более подробно. Пожалуйста, напишите в комментариях, какой информации вам не хватило в данном уроке. Метод createElement Метод createElement позволяет создать новый элемент, передав в параметре имя тега. После создания с элементом можно работать как с обычным элементом, а также его можно добавить на страницу (например методом appendChild). Если записать результат работы createElement в переменную, то в этой переменной будет такой элемент, как будто бы мы получили его через getElementById...

Свойство classList classList это псевдомассив классов элемента (который можно, к примеру, перебрать циклом) Свойство classList позволяет добавлять и удалять классы элемента, проверять наличие определенного класса среди классов элемента. Речь идет об атрибуте class, внутри которого можно писать несколько классов через пробел, например 'www ggg zzz'. С помощью classList можно удалить, к примеру, класс ggg, не затронув остальные классы. набор методов classList Пример Свойство cssText Свойство cssText позволяет задать CSS стили массово одной строкой...

В этом блоге мы рассмотрим практическую работу с addEventListener и removeEventListener. В конце теории есть задачи с помощью которых вы сможете закрепить полученную информацию. Пожалуйста, напишите в комментариях, какой информации вам не хватило в данном уроке. Метод addEventListener первым параметром принимает название события, а вторым - функцию, которую нужно привязать к этому событию. При этом имя события пишется без 'on': 'click' вместо 'onclick', 'mouseover' вместо 'onmouseover' и так далее...

Из предыдущих уроков вы уже хорошо знаете первый способ привязать событие к элементу - с помощью атрибута, например onclick: Это имеет свои недостатки: если, к примеру, необходимо ко всем input на странице привязать определенное событие - придется полазить по HTML странице, найти все input и каждому добавить атрибут с событием. Поэтому есть еще один способ привязать событие к элементу. По сути атрибут onclick является таким же атрибутом, как, к примеру, value. И, если мы могли менять атрибут value таким образом - elem...

Работа с таймерами В данном уроке мы научимся работать с таймерами в JavaScript. Разобравшись с таймерами, вы сможете автоматически выполнять на странице какие-либо операции через заданный промежуток времени. К примеру, можно будет сделать слайдер картинок, в котором картинки будут меняться каждую секунду. Пожалуйста, напишите в комментариях, какой информации вам не хватило в данном уроке. Метод setInterval Метод setInterval работает следующим образом: Вышеуказанный код будет запускать функцию timer раз в секунду...

Вы уже знаете один из способов работы с атрибутами тегов, однако есть альтернативный вариант - с помощью методов: Разберемся с ними более подробно. Пожалуйста, напишите в комментариях, какой информации вам не хватило в данном уроке. Метод getAttribute Метод getAttribute считывает значение указанного атрибута (и атрибут class тут уже не будет исключением). Получим value для input с помощью getAttribute: Метод setAttribute setAttribute - записывает новое значение в атрибут. Запишем новое значение 'www' в атрибут value: Метод removeAttribute removeAttribute удаляет атрибут совсем...

Ранее мы с вами учились считывать и записывать значения атрибутов, а теперь будем делать тоже самое, но уже со внутренним содержимым тегов. Это делается с помощью свойства innerHTML, которое можно считывать и перезаписывать, меняя тем самым содержимое тегов. Работа с innerHTML. У нас есть абзац. Давайте сменим ему текст с помощью свойства innerHTML. Для этого получим ссылку на этот абзац с помощью getElementById в переменную elem. Затем таким вот образом: запишем в него новый текст. Скрипт будет...