background top icon
background center wave icon
background filled rhombus icon
background two lines icon
background stroke rhombus icon
header logo icon

Скачать "#5 Аналог jQuery на чистом JavaScript - Супер JavaScript, События"

input logo icon
"videoThumbnail #5 Аналог jQuery на чистом JavaScript - Супер JavaScript, События
Похожие ролики из нашего каталога
|

Похожие ролики из нашего каталога

Теги видео
|

Теги видео

itdoctor
Аналог jQuery на чистом JavaScript
Супер JavaScript
События на JavaScript
как создать JavaScript класс
Аналог jQuery на JavaScript
Аналог jQuery JavaScript
Аналог jQuery
аналог jquery javascript
аналог jquery на javascript
аналог jquery на чистом javascript
аналог jquery
javascript jquery
javascript для начинающих
javascript уроки
javascript
js
jsevents
events
Субтитры
|

Субтитры

subtitles menu arrow
  • enАнглийский
Скачать
00:00:05
с того момента как мы изучили работу с
00:00:08
дом и
00:00:10
событиями
00:00:11
вам могло показаться что не совсем
00:00:15
удобно постоянно находить элемент с
00:00:18
помощью документ мере селектор или квари
00:00:21
селектор all в работе с событиями
00:00:24
постоянно нужно использовать цикл если у
00:00:28
нас несколько элементов на которых нужно
00:00:31
обрабатывать события мы сначала их
00:00:33
добавляем в какую-то переменную с
00:00:36
помощью клэри селектор all
00:00:38
после этого создаем цикл по всем этим
00:00:42
элементом и уже в цикле добавляем
00:00:45
обработчик события например с помощью
00:00:47
это иван глисона тем не менее эти
00:00:50
механизмы достаточно удобны и появились
00:00:53
они также относительно недавно раньше
00:00:55
все было еще хуже и вот как раз тогда и
00:00:59
придумали библиотеку джейк верю друзья
00:01:02
не забывайте подписаться на канал если
00:01:04
вы еще не сделали этого нажимайте на
00:01:07
колокольчик
00:01:08
оцениваете видео пишите комментарии это
00:01:10
очень сильно помогает мне в развитии
00:01:12
канала и мотивирует создавать больше
00:01:15
полезного материала для youtube канала
00:01:18
данная библиотека позволяло нам делать
00:01:21
практически то же самое что мы можем
00:01:23
сейчас сделать на обычном java скрипте
00:01:25
но чуть чуть более удобнее даже до сих
00:01:28
пор то есть например мы могли не писать
00:01:32
документ клэри селектор а
00:01:34
находить элемент следующим образом
00:01:37
сейчас мы не будем подключать эту
00:01:38
библиотеку я просто покажу вам примеры
00:01:41
как выглядели там некоторые записи и вы
00:01:43
посмотрите насколько они короче и
00:01:45
действительно могут быть удобнее мы
00:01:48
могли написать вместо документ квр
00:01:50
селектор доллар и в скобках сразу же
00:01:53
указать какой нибудь selector и это было
00:01:56
то же самое что сейчас сделать документ
00:01:59
к вере selector и документ к вере
00:02:01
selector и одновременно то есть здесь
00:02:04
найдется либо один элемент либо их
00:02:06
массив и в отличие от java script а если
00:02:09
здесь например какой-то массив то мы
00:02:11
могли сразу изменить его содержимое
00:02:13
например указать и на речке м.л. и какой
00:02:17
то новый текст для всех этих селекторов
00:02:21
но вот например если мы укажем таким
00:02:23
образом сейчас у нас здесь было бы три
00:02:26
input а и мы могли сразу им поменять
00:02:30
содержимое но на java скрипте мы должны
00:02:32
делать цикл for по всем этим элементом
00:02:35
сначала мы их находим с помощью к вере
00:02:36
селектор all и потом уже каждому из них
00:02:39
отдельно меняем это значение конечно на
00:02:43
джиг вере не было и нарежьте миль там
00:02:45
были немного другие свойства и методы но
00:02:48
тем не менее суть была такая что мы
00:02:50
могли работать как с одним элементом так
00:02:52
и с множеством одинаково просто и удобно
00:02:57
но на java скрипте стандартно таких
00:03:00
возможностей нету но тем не менее мы
00:03:02
можем сами их добавить и сделать очень
00:03:04
просто давайте сейчас я покажу вам на
00:03:07
примере уже что я хочу до вас донести мы
00:03:11
попробуем реализовать небольшой класс и
00:03:14
посмотрим насколько это может быть
00:03:16
удобным это необязательно если вас
00:03:19
вполне устраивает использовании
00:03:22
стандартных способов с помощью кори
00:03:25
селектор куэрри селектор all и постоянно
00:03:27
создавать циклы то в принципе это также
00:03:32
не составляет никаких проблем можно
00:03:34
писать так и дальше но
00:03:37
совсем небольшим скриптом можно
00:03:40
упростить себе жизнь
00:03:41
давайте сейчас создадим класс я назову
00:03:45
его доллар но конечно же доллар часто
00:03:49
бывает использован в каких-то
00:03:50
библиотеках в той же джейк вере и если
00:03:53
вы подключаете какие-то сторонние
00:03:55
библиотеки не обязательно это будет джек
00:03:57
веря что либо другое там также может
00:03:59
быть доллар уже занятым каким-то словом
00:04:02
его не рекомендуется использовать но так
00:04:04
как мы здесь не будем ничего подключать
00:04:07
мы будем использовать только свой
00:04:08
собственный код мы можем указать здесь
00:04:10
значок доллара это достаточно уже
00:04:14
привычно
00:04:15
особенно для старых разработчиков на
00:04:18
java script те которые когда-то давно
00:04:20
использовали джейк вере и к тому же это
00:04:23
максимально коротко всего лишь один
00:04:25
символ
00:04:26
и теперь в классе нам нужно создать
00:04:29
конструктор как вы помните из базового
00:04:32
курса по java script у мы здесь
00:04:34
указываем конструктор и давайте укажем у
00:04:37
него два параметра это селектор здесь
00:04:40
будет у нас обычный css селектор и мы
00:04:43
укажем здесь еще один параметр это где
00:04:48
мы будем выполнять поиск укажем что по
00:04:51
умолчанию это будет у нас документ то
00:04:53
есть если мы второй параметр не передаем
00:04:56
мы указали только селектор при создании
00:04:58
объекта данного класса у нас поиск будет
00:05:01
выполняться в документ то есть также как
00:05:04
мы пишем документ кайри селектор у нас
00:05:06
будет по умолчанию выполняется но как вы
00:05:08
помните мы можем искать другие элементы
00:05:11
также не в документе а например вот в
00:05:15
этом девиц с классом блог или в любом
00:05:18
другом каком-то html теги и поэтому мы
00:05:20
здесь можем передать этот так и поиск
00:05:25
уже будет выполняться не в документ а
00:05:27
внутри например вот этого элемента и
00:05:29
смотрите теперь мы создаем тело
00:05:32
конструктора
00:05:33
предлагаю здесь создать две
00:05:38
переменных это будет здесь сел и сюда мы
00:05:42
поместим следующее мы поместим это
00:05:44
значение где и укажем клэри селектор
00:05:50
скобочках селектор что мы сейчас сделали
00:05:54
такой записью такой записью мы сейчас
00:05:57
сделали тот же самый клэри селектор но
00:06:00
теперь мы можем обращаться к нему
00:06:02
следующим образом например мы хотим
00:06:05
найти какой-нибудь элемент
00:06:07
мы создаем с помощью new доллар новые
00:06:13
чмр объект с помощью этого конструктора
00:06:16
и делаем это следующим образом указываем
00:06:19
здесь в скобках
00:06:22
любой селектор например пусть это будет
00:06:25
класс блок и сейчас у нас запись такая
00:06:29
же практически как на джиг вере
00:06:31
единственная здесь слова не у нас
00:06:32
имеется спереди мы сейчас не пытаемся
00:06:35
создать полный аналог джейк мере это не
00:06:38
имеет никакого смысла
00:06:39
это библиотека намного масштабнее и
00:06:43
имеет другие удобные и отличные
00:06:47
инструменты но нас интересует сейчас
00:06:49
буквально несколько улучшений которые мы
00:06:53
могли бы внести в java script этого нам
00:06:55
будет более чем достаточно нет смысла
00:06:57
писать свою джейк вере с нуля но пару
00:07:01
механизмов упростить конечно бы не
00:07:03
мешало поэтому мы сейчас используем
00:07:06
похожий пример на синтаксис и берем
00:07:09
какие-то лучшие черты из этой библиотеки
00:07:11
и реализовываем их на чистом java
00:07:14
скрипте и такой записью мы сейчас
00:07:18
создаем сразу же объект этого класса в
00:07:22
котором будет у нас html элемент давайте
00:07:25
посмотрим в консоли сейчас если мы
00:07:26
создадим что мы увидим мы увидим вот
00:07:29
такой вот объект и у него
00:07:32
сейчас имеется
00:07:34
вот это значение сел в которой мы здесь
00:07:37
установили и она как раз таки является
00:07:40
тем самым html элементом который мы
00:07:43
искали вот здесь с помощью селектора
00:07:45
то есть теперь мы можем указать здесь
00:07:47
цэлт то есть сам элемент и изменить
00:07:51
например ему сразу emirates темы далее
00:07:54
указываем и no html или ня им его
00:07:58
значение
00:07:59
если мы сейчас закомментируем этот код
00:08:01
то мы видим этот раздел с классом текст
00:08:04
но если мы сейчас его заново добавим то
00:08:09
видим как наш текст изменился то есть
00:08:11
такой записью мы
00:08:14
заменили ту запись которому постоянно
00:08:17
использовали это мы использовали
00:08:19
документ творит селектор искали какой-то
00:08:22
селектор далее мы указывали все то же
00:08:26
самое вроде бы кажется что мы сейчас с
00:08:29
экономили буквально несколько символов
00:08:31
запись практически такой же длины но на
00:08:34
этом мы сейчас ограничиваться не будем и
00:08:36
мы добавим еще больше возможности в свой
00:08:39
класс и уже после этого вы сможете
00:08:43
сделать выводы нравится ли вам такой
00:08:46
подход или же нет если же вам покажется
00:08:48
что это дополнительное усложнение
00:08:50
собственной жизни мы сейчас добавили
00:08:52
много каких то непонятных нам способов
00:08:56
достичь того же результата который мы
00:08:59
можем достичь уже на этом этапе
00:09:01
придумали сейчас себе можно сказать
00:09:04
какую-то новую работу но тем не менее
00:09:07
преимущество сейчас будут появляться с
00:09:09
каждым разом все серьезнее и серьезнее
00:09:12
теперь давайте также добавим здесь еще
00:09:17
одну переменную
00:09:18
пусть это у нас будет зис lims то есть
00:09:23
элементы и здесь уже будет не один
00:09:26
единственный элемент а все поэтому мы
00:09:29
указываем точно такую же запись только
00:09:31
здесь указываем к мэри селектор old мы
00:09:34
могли использовать только эллипс и
00:09:37
обращаться к нему как альянс 0 и это
00:09:39
было бы тоже самое но как вы помните к
00:09:42
вере селектор работает быстрее чем клэри
00:09:44
селектор all потому что он не продолжает
00:09:47
искать все остальные элементы
00:09:48
останавливается сразу же на первым
00:09:50
поэтому мы для оптимизации сделали два
00:09:54
отдельных способа доступа к элементу
00:09:56
одному единственному
00:09:57
и к массиву этих элементов то есть таким
00:10:02
образом сейчас если мы попробуем в
00:10:04
консоли
00:10:06
ввести такой вот код только здесь
00:10:09
давайте укажем какой-нибудь селектор
00:10:12
пусть это будет просто так input
00:10:15
то мы видим следующее в с л у нас
00:10:19
помещен один единственный самый первый
00:10:21
input который был найден а в линз у нас
00:10:24
находится три этих input а то есть весь
00:10:26
not лист из элементов которые
00:10:29
удовлетворяют этому селектору
00:10:30
то есть сейчас мы уже можем здесь
00:10:35
использовать
00:10:36
и один элемент и сразу множество но
00:10:40
самое интересное у нас появится после
00:10:42
того как мы сделаем возможность
00:10:45
указывать для всех элементов в цикле
00:10:49
какое-то изменение их значение для этого
00:10:53
нам нужно создать здесь метод давайте
00:10:56
создадим метод peach похожий метод был
00:10:58
на jay fry и
00:11:00
метод этот будет у нас делать с каждым
00:11:02
элементом
00:11:03
из массива или мтс ту функцию которую мы
00:11:07
передадим мы указываем у этого метода
00:11:10
здесь параметр callback это будет
00:11:13
функция анонимная которую мы сможем
00:11:15
передавать здесь в скобках при вызове
00:11:18
этого метода
00:11:19
такие функции мы уже использовали
00:11:22
например в методе сорт для сортировки
00:11:25
массива или в методах for each у
00:11:28
массивов и
00:11:30
здесь мы сделаем собственно такой же
00:11:32
функционал
00:11:34
теперь мы напишем следующее мы здесь
00:11:37
создадим цикл он уже будет внутри классы
00:11:39
написан один раз и нам не придется его
00:11:41
постоянно здесь создавать отдельно
00:11:46
указываем здесь обычный цикл for of так
00:11:49
как мы это делаем постоянно создаём
00:11:52
переменную
00:11:53
m и
00:11:55
указываем наш альянс только здесь
00:11:58
обязательно нужно добавить зис то есть
00:12:00
чтобы мы конкретно у
00:12:02
этого объекта класса
00:12:05
проходились в цикле по всем элементам и
00:12:07
мы будем делать следующие
00:12:11
мы будем вызывать вот эту функцию
00:12:14
callback и
00:12:17
параметр будет унесет элем то есть
00:12:20
каждый наш элемент будет вызываться
00:12:22
внутри этой функции и теперь смотрите
00:12:26
что мы можем сделать с помощью этого
00:12:28
метода мы можем выбрать наши input и
00:12:33
создаем здесь сразу же объект класса
00:12:37
указываем input
00:12:41
далее мы указываем method which который
00:12:44
только что создали
00:12:46
круглые скобки и передаем сюда анонимную
00:12:50
функцию у нее будет один параметр
00:12:52
указываем ему любое название и
00:12:56
теперь вот этот параметр который мы
00:13:00
здесь передали функции мы можем
00:13:02
использовать его и это будет нашим
00:13:07
объектам каждый раз в цикле отдельном то
00:13:10
есть сначала это будет наш первый input
00:13:12
потом второй третий
00:13:13
как мы указали здесь такую запись и
00:13:16
смотрите что это будет означать если мы
00:13:18
сейчас укажем здесь изменения каких-либо
00:13:21
параметров здесь может быть абсолютно
00:13:23
что угодно можно менять и нарочь тем
00:13:25
eltex контекст вызывать любые другие
00:13:28
какие-то свойства и методы у элемента
00:13:32
главное что мы здесь уже все это делаем
00:13:34
для нашего параметра и который мы
00:13:37
передали здесь функции анонимный и это
00:13:40
будет как раз таки наш
00:13:42
html элемент и смотрите мы сейчас здесь
00:13:45
указываю например фонд says и
00:13:48
меняем его на 20 пикселей и сейчас
00:13:53
обратите внимание вот сюда я сейчас
00:13:55
сохраняю страницу и смотрим на результат
00:13:57
мы видим что шрифт у каждого input а у
00:14:01
нас изменился то есть мы в цикле
00:14:04
сейчас благодаря этому методу применили
00:14:08
для каждого нашего элемента который был
00:14:11
вот в этом массиве
00:14:13
ту функцию которую мы указали здесь в
00:14:16
скобках то есть мы для каждого элемента
00:14:19
выполнили вот это действие из этой
00:14:21
функции которую мы здесь передали и
00:14:23
таким образом мы здесь могли изменить
00:14:26
абсолютно что угодно могли также
00:14:29
например установить значение в илью
00:14:36
и как вы видите она здесь подставилась в
00:14:38
каждом элементе у нас сейчас
00:14:40
подставилась вылью то значение которое
00:14:42
мы указали и
00:14:45
таким образом
00:14:47
теперь мы можем обращаться к
00:14:50
списку элементов с помощью метода each и
00:14:53
делать с каждым из этих элементов то что
00:14:56
мы захотим и нам уже не нужно здесь
00:14:58
каждый раз создавать цикл for os снаружи
00:15:08
аракис циклов может быть много то есть в
00:15:11
зависимости от действий которые мы
00:15:13
делаем у нас код выглядит примерно таким
00:15:15
образом у нас много этих циклов и
00:15:17
постоянно что-то выполняется с набором
00:15:20
элементов но благодаря вот этому классу
00:15:22
который мы сейчас создаем мы уже можем
00:15:25
намного проще к этому всему относиться
00:15:29
находим элементы или же один элемент
00:15:32
зависимости от того как не нам требуется
00:15:33
и работаем с ними как с единым целым
00:15:37
также давайте рассмотрим сейчас
00:15:39
небольшой пример на
00:15:42
поиск элементов которые мы можем уже
00:15:45
сейчас рассмотреть пока наш класс имеет
00:15:48
еще не конечный вид мы хотим например
00:15:52
сделать следующее
00:15:54
найти
00:15:55
т.п. но найти его уже не в документ а
00:15:59
например в теги div и мы делаем это
00:16:04
таким образом мы здесь в конструкторе
00:16:06
как раз таки специально создали второй
00:16:08
параметр который по умолчанию документ и
00:16:11
когда мы его не передаем в большинстве
00:16:13
случаев как вот здесь у нас просто
00:16:15
ищется в документе этот селектор но если
00:16:19
мы хотим конкретно где то искать мы
00:16:20
специально оставили себе эту возможность
00:16:22
потому что такая необходимость тоже
00:16:25
возникает
00:16:26
поэтому мы оставили для себя эту
00:16:28
возможность в конструкторе и здесь мы
00:16:30
можем указывать какой элемент будет
00:16:33
выступать в качестве родительского для
00:16:35
поиска и мы можем здесь также сразу же
00:16:38
создать с помощью неё доллар какой-то
00:16:41
другой элемент например div и указать
00:16:44
здесь sales то есть этот единственный
00:16:47
элемент
00:16:48
не список элементов или мтс а
00:16:50
единственный который начался с помощью к
00:16:53
вере selector и когда мы здесь в скобках
00:16:55
это укажем давайте сейчас попробуем это
00:16:58
в консоли вывести мы видим что мы нашли
00:17:01
т.п. вот он и как раз таки этот а тот
00:17:04
т.п. который находится у нас в теги div
00:17:07
и с помощью такой вот запись и как вы
00:17:10
видите мы new доллар создаем внутри
00:17:13
скобок и также можем использовать это
00:17:15
становится ещё более универсальным и
00:17:17
теперь мы можем здесь например также
00:17:20
указать цел
00:17:22
. inner html и изменить этот текст на
00:17:27
другое значение если бы мы хотели найти
00:17:30
много тегов п внутри тега div например
00:17:33
здесь их будет много то мы можем здесь
00:17:36
не указывать уже сел так как мы
00:17:39
хотим иметь дело с несколькими тегами п
00:17:43
мы здесь уже можем указать например each
00:17:46
function здесь передать какой то
00:17:49
параметр повторяю что его название здесь
00:17:52
мы указываем сами и главное чтобы оно
00:17:54
совпадало у нас здесь скобках и внутри
00:17:58
функции а какой он будет это уже
00:18:01
абсолютно неважно и теперь мы можем
00:18:03
например так вот это сделать то есть вы
00:18:07
видите что сейчас там внутри много tgp
00:18:09
но мы сразу же такое вот записью
00:18:11
изменили им всем текст на какой-то
00:18:14
другой как вы видите все очень гибкая и мы
00:18:18
можем здесь работать с элементами очень
00:18:21
удобно конечно получается в некоторых
00:18:24
случаях нагромождение какие-то видео от
00:18:26
этих слов с elf иногда но если вы будете
00:18:29
писать большой какой-то фрагмент кода и
00:18:31
где вы будете постоянно работать с дом
00:18:35
элементами и тем более с событиями то у
00:18:38
вас будет кода намного больше чем с
00:18:41
помощью этого класса который мы сейчас
00:18:42
создали и буквально добавили себе
00:18:45
несколько новых возможностей
00:18:48
но если к ним привыкнуть и постоянно их
00:18:51
использовать то это будет намного
00:18:53
удобнее быстрее и короче но самое
00:18:56
интересное еще впереди
00:19:00
даже на данной стадии мы уже можем
00:19:02
работать с отдельным элементам и с
00:19:04
массивом элементов сразу же не создавая
00:19:08
отдельные циклы в коде они у нас скрыты
00:19:11
все в классе мы же просто используем
00:19:13
здесь анонимные call back функции и
00:19:16
указываем что делать с конкретным
00:19:18
элементам внутри этой функции но если мы
00:19:21
здесь пойдем дальше и создадим еще один
00:19:24
метод например метод он для того чтобы
00:19:27
назначать обработчики событий
00:19:29
для элементов и укажем здесь event то
00:19:33
есть название события и также указываем
00:19:36
здесь какой-то callback функцию то есть
00:19:39
что мы хотим сделать и внутренние
00:19:43
мы также создаём цикл for walls копируем
00:19:47
его полностью отсюда и
00:19:50
указываем здесь следующие мы для нашего
00:19:53
каждого элемента в цикле с помощью от
00:19:56
event listeners
00:20:01
добавляем обработчик события как вы
00:20:05
помните этот ивент леса мир сначала в
00:20:07
кавычках принимает название события и
00:20:09
здесь она как раз таки у нас уже
00:20:11
записывалась ней onclick например oklick
00:20:14
также не он czech а просто czech поэтому
00:20:17
мы здесь передаем вот этот параметр
00:20:19
events который мы будем передавать
00:20:23
самостоятельно при вызове этого метода
00:20:26
он и через запятую мы передаем сюда эту
00:20:29
call back функцию которую мы будем
00:20:31
указывать самостоятельно так как вы
00:20:33
помните мы таиланд листами тоже
00:20:35
принимается у нас какая-то функция
00:20:37
это будет практически тоже самое но мы
00:20:40
сможем сразу на несколько элементов
00:20:42
привязать обработчик события и
00:20:45
давайте сейчас рассмотрим пример как у
00:20:48
нас все будет работать укажем здесь
00:20:51
сначала пояс каких-то элементов
00:20:57
с помощью неё доллар
00:20:59
например найдем все элементы div
00:21:02
далее указываем метод он который мы
00:21:05
сейчас только что создали как вы видите
00:21:07
у нас в классе уже два метода each и он
00:21:10
он у нас будет для событий a и для
00:21:12
отдельных элементов чтобы работать с
00:21:16
группой каких-то элементов не по
00:21:19
отдельности а сразу применять к ним
00:21:22
какие-то действия
00:21:23
теперь мы здесь у этого метода должны
00:21:26
передать
00:21:27
два параметра первое это название
00:21:30
события мы как раз так и пишем клик
00:21:33
здесь как бы мы указывали его в этот
00:21:35
лицемер то есть мы ничего не меняем а
00:21:38
все у нас будет точно также и вот этот
00:21:40
клик который мы здесь указываем
00:21:42
передастся суда в этой винт listener и
00:21:45
подставиться а функция которую мы здесь
00:21:47
передаем подставиться вот сюда в call
00:21:49
back и
00:21:50
получится у нас
00:21:52
такая картина то что мы этот ивент
00:21:55
listener выполним с этими значениями
00:21:58
которые мы здесь передаем у метода он но
00:22:01
они выполнятся в цикле для каждого
00:22:03
элемента и таким образом когда у нас
00:22:05
здесь в выборке несколько элементов div
00:22:08
у нас их здесь 1 2 сейчас на страницы
00:22:12
для каждого из них с помощью от event
00:22:16
listener добавится обработчик события
00:22:19
клик и это очень удобно нам тебе не
00:22:22
нужно создавать здесь сначала список
00:22:24
этих элементов с помощью к вере селектор
00:22:26
all потом писать цикл for love мы сразу
00:22:29
же здесь пишем он и метод он внутри уже
00:22:32
сам выполнит цикл и смотрите что мы
00:22:36
теперь делаем здесь функции мы например
00:22:38
можем для зис то есть для текущего
00:22:42
нашего элемента на котором произошло
00:22:45
событие здесь точно так же работает и
00:22:48
тосол азиз как и она работала у нас до
00:22:51
этого
00:22:52
мы указываем для него например класс
00:22:55
лист
00:22:57
используем здесь кто был тот метод
00:22:59
который позволяет нам либо добавить
00:23:02
класс либо убрать зависимости от того
00:23:05
был он или не было и
00:23:07
смотрите что мы сейчас сделаем у нас
00:23:10
есть два т видев вот этот если мы на
00:23:13
него сейчас нажимаем у него добавляется
00:23:15
просто класс bbc у
00:23:22
данного класса просто зеленый цвет фона
00:23:25
если мы нажимаем у нас происходит как
00:23:28
раз таки вот этот угол то есть просто
00:23:29
удаляется этот классе как вы видите мы
00:23:32
сделали такой вот переключатель то же
00:23:34
самое работает с этим элементом так как
00:23:36
у нас метод он в цикле добавил
00:23:39
обработчик событий для всех элементов
00:23:41
div которые мы нашли здесь выборки у нас
00:23:44
как вы видите обработчик добавился и
00:23:45
здесь и здесь то есть на этих двух
00:23:48
элементах он сразу же появился
00:23:50
думаю сейчас уже особенно заметные
00:23:53
преимущества
00:23:55
но можно пойти еще чуть чуть дальше и
00:23:58
сделать еще более крутые возможности
00:24:01
то есть например мы бы хотели
00:24:03
использовать цепочки вызова этих методов
00:24:06
и и для такого случая мы можем
00:24:09
использовать здесь после цикла for
00:24:15
free терн зис то есть мы будем после
00:24:19
цикла возвращать сам этот элемент и
00:24:22
таким образом сейчас мы сможем
00:24:24
использовать после вызова метода он еще
00:24:28
один метод он например и
00:24:31
добавить какое-то другое событие
00:24:33
смотрите о чем идет речь давайте сейчас
00:24:36
найдем наших input и
00:24:39
укажем здесь он
00:24:41
фокус
00:24:43
то есть когда у нас будет фокус на этих
00:24:46
элементах вы знаете что есть у нас такая
00:24:49
возможность на input их это
00:24:51
сфокусироваться вот она стандартно
00:24:53
появляется такая рамочка то есть фокус
00:24:55
сейчас находится в этом им пути и
00:24:57
конечно же есть такое событие фокус то
00:25:00
есть когда у нас события фокус произошло
00:25:03
на им пути
00:25:05
мы будем создавать здесь обработчик и
00:25:10
будем делать следующие из
00:25:14
style
00:25:17
background color и
00:25:20
укажем здесь какой-то цвет
00:25:26
то есть теперь когда мы будем
00:25:28
переключаться на input у него будет
00:25:30
появляться цвет но как сделать так чтобы
00:25:33
цвет исчезал когда фокус снимается
00:25:35
существует специальное событие блюр и
00:25:39
мы бы могли сейчас написать вот так
00:25:43
указать здесь блюд и
00:25:48
пустые кавычки для backgroundcolor и в
00:25:51
таком случае как вы видите у нас когда
00:25:54
новый элемент получает фокус а
00:25:57
предыдущий теряет его у этого цвет
00:26:00
меняется на красный а у того с которого
00:26:04
фокус был снят становится таким же как
00:26:06
он был по умолчанию и мы сейчас вроде бы
00:26:09
решили эту задачу но ритер здесь мы
00:26:11
здесь добавили не для такого а чтобы
00:26:14
сделать все это еще более удобным нам не
00:26:17
нужно теперь два раза искать эти
00:26:19
элементы input мы можем просто вот здесь
00:26:22
после метода он указать еще один метод
00:26:26
он далее указываем уже его параметры
00:26:29
блюр фанкшн и что мы хотим делать и
00:26:31
теперь у нас все то же самое работает
00:26:34
как вы видите но мы для одной группы
00:26:37
элементов input сразу применили какой-то
00:26:39
набор действий это сейчас может
00:26:42
показаться довольно сложным и запутанным
00:26:44
но при большой разработки у вас конечно
00:26:48
же все это будет с каждым разом все
00:26:51
сильнее и сильнее казаться преимуществом
00:26:53
и плюсами и более удобным чем мы это
00:26:56
делали бы на стандартных возможностях
00:26:58
которые требуют большего кода и создают
00:27:04
нагромождение в виде циклов давайте
00:27:07
сейчас уберем ритер зис и увидим что у
00:27:10
нас ничего не работает и только
00:27:12
благодаря
00:27:14
возврату из этого метода он своего
00:27:17
собственного значения мы можем снова к
00:27:19
нему применить этот метод он и таким
00:27:23
образом очень удобно можно сразу же несколько
00:27:26
каких-то событий привязывать группе
00:27:28
элементов
00:27:29
давайте сейчас сделаем то же самое но с
00:27:33
помощью обычных стандартных возможностей
00:27:35
и
00:27:37
посмотрим разницу между двумя этими
00:27:39
фрагментами кода мы не будем уже
00:27:42
рассматривать вот эти предыдущие
00:27:43
маленькие примеры рассмотрим сразу вот
00:27:45
этот последний более большой пример
00:27:48
создадим переменную
00:27:50
например lims и здесь с помощью документ
00:27:53
к вере селектор all мы добавим здесь
00:27:56
input и
00:27:59
мы нашли все input и теперь мы создаем
00:28:02
цикл for
00:28:05
например ой там офф
00:28:10
сайта мтс и
00:28:13
здесь мы делаем следующее мы для наших
00:28:16
атомов указываем id event listeners
00:28:21
указываем фокус
00:28:25
также указываем функцию
00:28:31
и копируем вот отсюда код как вы видите
00:28:35
код точно такой же у нас меняется только
00:28:38
сама оболочка и теперь нам здесь нужно
00:28:41
создать еще один такой же фрагмент кода
00:28:44
здесь мы указываем уже блюр и меняем на
00:28:48
пустую закомментируем предыдущий код
00:28:52
здесь я назвал
00:28:55
переменную этом сном и ее называли
00:28:57
альянс поэтому давайте и здесь вставим
00:29:00
смотрим что мы сейчас достигли того же
00:29:02
самого результата если сравнить два этих
00:29:06
фрагмента кода конечно этот код длиннее
00:29:10
не намного длиннее но
00:29:13
достаточно ощутимо и здесь как вы видите
00:29:17
существует эти дубликаты то есть мы два
00:29:19
раза пишем вот эту строку создаем
00:29:22
отдельно переменную для этих элементов
00:29:24
указываем здесь цикл и если мы будем
00:29:28
например обрабатывать какие-то другие
00:29:29
еще элементы на странице то у нас этот
00:29:32
код может вот так вот копироваться и
00:29:34
много раз встречаться достаточно похожий
00:29:36
код но с небольшими отличиями
00:29:39
именно это и вызывает неприятные
00:29:42
ощущения при работе с java script он
00:29:45
конечно раньше все было намного хуже как
00:29:48
я и говорил потому что в браузерах не
00:29:52
поддерживался к вере селекторы к вере
00:29:54
селектор all и работа с элементами
00:29:56
вообще было намного сложной сейчас же
00:29:59
можно выбирать элементы очень удобно и
00:30:02
также появились циклы типа for love
00:30:05
который в принципе можно записать таким
00:30:07
вот образом и тем самым убрать еще одну
00:30:11
лишнюю строку здесь и как вы видите тоже
00:30:14
все достаточно удобно получается у нас и
00:30:16
в принципе с этим можно работать но если
00:30:20
вам нравится такой подход и вы хотите
00:30:23
сократить лишние код убрать постоянно
00:30:27
встречающиеся документ каире selector и
00:30:30
к вере селектор а у который нам нужно
00:30:32
писать замены всего лишь вот такой вот
00:30:34
записи на неё доллар например и указание
00:30:37
здесь селектора то можете использовать
00:30:41
эти наработки
00:30:42
можно их расширить
00:30:44
усовершенствовать добавить что-то еще в
00:30:46
зависимости от того что вам кажется
00:30:49
имеет какие-то недостатки в java скрипте
00:30:51
и сделать так чтобы это было более
00:30:54
удобно но конечно чтобы писать такие элементы
00:30:59
при этом сделать так чтобы мы не
00:31:01
затрагивали сам язык java script то есть
00:31:04
мы здесь сделали только обертку по сути
00:31:06
но в целом у нас ничего не меняется мы
00:31:09
не меняли все вот эти значения ставил
00:31:11
фон says in xml все как было на java
00:31:14
скрипте так и осталось просто мы
00:31:16
добавили себе немного другие возможности
00:31:19
для обработки элементов с помощью метода
00:31:22
each и также работу с событиями с
00:31:25
помощью метода он в таком случае если вы
00:31:27
не создаете полностью какую-то
00:31:29
библиотеку которая меняет весь смысл
00:31:32
java script аид и чтобы написать на ней
00:31:35
какой-то код вам придется переучиваться
00:31:37
и запоминать свои собственные какие-то
00:31:40
свойства и методы то конечно это смысла
00:31:42
не будет иметь но если сделать что-то на
00:31:45
подобии этого
00:31:46
где мы буквально за 2 минуты можем
00:31:49
посмотреть на этот маленький класс здесь
00:31:51
всего лишь около двадцати строк кода и
00:31:54
после этого
00:31:56
сразу же мы можем все это комфортно и
00:32:00
быстро использовать нам не придется
00:32:01
здесь переучиваться
00:32:03
изучать какие-то новые возможности все
00:32:08
будет максимально прост то в принципе
00:32:10
при желании можно и создать такой вот
00:32:13
класс как мы сейчас сделали и
00:32:16
использовать его в своей работе в этом
00:32:19
уроке я показал вам возможность как
00:32:22
можно использовать классы для того чтобы
00:32:24
не изменяя самого языка добавить
00:32:28
какие-то более удобные возможности
00:32:30
для работы например с дом и событиями
00:32:34
как мы сейчас рассмотрели
00:32:36
мы сейчас ни в коем случае не создавали
00:32:39
свою собственную джейк вере не
00:32:40
изобретали велосипед а просто немного
00:32:43
усовершенствовали некоторые механизмы на
00:32:45
java скрипте и сделали их более удобными
00:32:48
для себя чтобы не писать постоянно одни
00:32:50
и те же цикл и мы их спрятали внутри
00:32:53
класса
00:32:54
и сделали немного другой вызов этих
00:32:58
методов и работу с элементами на этом
00:33:02
примере вы просто должны увидеть
00:33:04
насколько мощные возможности у нас
00:33:06
открываются если хорошо знать язык и
00:33:09
понимать как все устроено и как все
00:33:11
происходит особенно на базовых уровнях
00:33:14
когда мы как раз таки изучали условия
00:33:17
циклы классы функции и все в этом роде
00:33:20
становится видна вся мощь языка
00:33:23
программирования и как раз таки в этом и
00:33:25
заключается вся суть а уже работаем из
00:33:29
дом элементами или просто делаем
00:33:32
какую-то программу без интерфейса но она
00:33:35
будет высчитывать сложные математические
00:33:36
задачи
00:33:38
это уже абсолютно не играет никакой роли
00:33:42
главное уметь достичь поставленной
00:33:44
задачи используя все доступные нам
00:33:47
средства языка в следующих примерах я
00:33:50
буду использовать стандартные способы
00:33:52
java script а также мы будем
00:33:54
использовать документ каире селектор
00:33:56
создавать все эти циклы как вот в этом
00:33:58
последнем примере для того чтобы не
00:34:01
вводить вас в заблуждение если вам не
00:34:03
нравится такой подход и вы хотите писать
00:34:05
только на java скрипте без каких-то
00:34:08
дополнений надстроек создавать какие-то
00:34:10
собственные классы то вы сможете также
00:34:12
продолжить это делать но при
00:34:15
необходимости как я вам уже показал в
00:34:17
этом уроке вы сможете и без проблем
00:34:20
самостоятельно переписать вот такой код
00:34:23
который я буду показывать в примере
00:34:25
подход который можно реализовать с
00:34:28
помощью данного класса и для вас это уже
00:34:30
не составит никакого труда то как вы
00:34:32
сейчас все это посмотрели разобрались на
00:34:34
конкретных примерах и я думаю для вас не
00:34:37
будет проблем написать вот эти пять
00:34:41
строк кода вместо вот этих восьми
00:34:45
надеюсь данное видео было полезно если
00:34:48
оно понравилось то обязательно оцени его
00:34:50
и напиши комментарий на этом экране ты
00:34:53
можешь перейти к другим похожим видео и
00:34:56
следующем видео из этого курса желаю
00:34:59
удачи в разработке и до скорых встреч

Описание:

В этом уроке я покажу, как можно создать свой JavaScript класс для упрощения работы с элементами DOM. С помощью этого класса мы сможем создавать объекты, которые будут являться DOM элементами и так же у этих объектов будет несколько интересных методов и свойств, которые мы реализуем в классе. ❕ Файлы к уроку: https://drive.google.com/file/d/18bV4L77XSEXb2VQEeWtcVYgB9K5L9ODd/view?usp=share_link Уроки по языку JavaScript собраны в одном плейлисте для вашего удобства. Тут вы сможете легко выучить язык JavaScript начиная с основ. 📌 Уроки по JavaScript: https://www.youtube.com/playlist?list=PLuY6eeDuleINoCQtGZsMoVVCSgEH7gKQ5 Данный плейлист включает в себя видео лекции из курса "Frontend разработчик на HTML, CSS и JavaScript". Задания, тесты и другие полезные материалы к этому курсу можно получить в курсе на Stepik. 📌 Курс "Frontend разработчик на HTML, CSS и JavaScript": https://stepik.org/course/113402/promo ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor 💡 Telegram канал - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/387773773/teach 💰 Донаты на ЮMoney - https://yoomoney.ru/get/fundraise ВКонтакте - https://vk.com/itdoctorstudio Яндекс Дзен - https://dzen.ru/itdoctor Rutube - https://rutube.ru/channel/23500045/

Готовим варианты загрузки

popular icon
Популярные
hd icon
HD видео
audio icon
Только звук
total icon
Все форматы
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

mobile menu iconКак можно скачать видео "#5 Аналог jQuery на чистом JavaScript - Супер JavaScript, События"?mobile menu icon

  • Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.

  • Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.

  • UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

mobile menu iconКакой формат видео "#5 Аналог jQuery на чистом JavaScript - Супер JavaScript, События" выбрать?mobile menu icon

  • Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

mobile menu iconПочему компьютер зависает при загрузке видео "#5 Аналог jQuery на чистом JavaScript - Супер JavaScript, События"?mobile menu icon

  • Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

mobile menu iconКак скачать видео "#5 Аналог jQuery на чистом JavaScript - Супер JavaScript, События" на телефон?mobile menu icon

  • Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

mobile menu iconКак скачать аудиодорожку (музыку) в MP3 "#5 Аналог jQuery на чистом JavaScript - Супер JavaScript, События"?mobile menu icon

  • Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

mobile menu iconКак сохранить кадр из видео "#5 Аналог jQuery на чистом JavaScript - Супер JavaScript, События"?mobile menu icon

  • Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

mobile menu iconСколько это всё стоит?mobile menu icon

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