Модальное окно JS. Promise, Делегирование событий. Урок 3
HTML-код
- Опубликовано: 26 фев 2020
- Получить профессию Frontend разработчика -
bit.ly/3y0G2ew
Подробнее узнать об обучении в Result School -
bit.ly/3QShRHQ
Бесплатный курс HTML & CSS - bit.ly/3u9VB2r
Сделать 5 проектов на JavaScript - bit.ly/3R0dj2m
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_school_it
VK: result.school
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
Исходный код в телеграм канале:
t.me/js_by_vladilen/143
Урок 3. Практика JavaScript. Модалка. Promise, Делегирование событий
#js #javascript
Как же удобно, оказывается, вешать события через dataset. Спасибо!
ухх, не до конца понял всё,что было в этих уроках, но много нового узнал для себя. Спасибо тебе!
Шикарные видео, Владилен! спасибо)
Владилен, контент очень качественный, спасибо. Не успеваю всё просмотреть и повторить. Спешу, но всё равно не успевааааааю)
Как всегда, прекрасно)
Спасибо очень полезный урок. Много нового интересного узнал.
После твоего контента приходит понимание и рост. Спасибо
Огромное спасибо за труд, смотрю все ролики!!! Всем рекомендую этот канал по js!!!
Большое спасибо! Курс пролетел очень быстро и легко! Классно объясняешь и просто реализовываешь!
Большое спасибо! Узнал новое про сокращённую запись стрелочной функции.
Привет и спасибо за данную серию уроков! Прям хорошее такое погружение после теории, где то уже для себя подмечаешь, какая концепция действует и т.д.)
Спасибо, очень круто) для меня как раз с таким поработать надо было))) супер, лайк.
Привет. Очень крутая серия видео, спасибо огромное!) С нетерпением жду еще чего-то подобного)
Будет продолжение)
Спасибо большое! Получилось реализовать все задания с прошлого урока самому, но твоя версия намного понятнее получилась) Учусь чему-то с каждого твоего видео :)
идеальная серия роликов, спасибо!
Очень клево получилось! Спасибо большое за ваш труд! Следующим плагином можно реализовать корзину для фруктов)))
Суперский контент, не все пока улавливаю, думаю пересмотрю несколько раз, и посмотрю другие замечательные видео на Вашем канале для лучшего освоения темы. Спасибо за Ваши труды! 🔥🔥👍
Отличная подборочка. Очень конкретное и доходчивое изложение. СПАСИБО!
Владилен, спасибо тебе огромное за этот топовый плейлист! Больше практики! Лайк на все 3 части однозначно! Много прикольных фишек подчерпнул, например: сам в ДЗ к этому уроку вместо того, чтобы на document повесить событие клика, а потом, при совпадении data атрибутов, работать дальше, я все кнопки перебирал с помощью циклов))) Это помогло оптимизировать проект, возьму эту фишку на заметку! Спасибо ещё раз тебе огромное!
Спасибо огромное за проделанную работу! Это безусловно очень ценное видео, т.к. объясняешь ты все просто и элементарно. Создаю ТоДо на JS c webSQL и по пути попал на твой канал, теперь это единственный видео материал который есть в моей библиотеке. Необходимо все пересматривать еще и еще потому что за один раз это просто не переваривается. Максимального тебе позитива и успеха!
на самом деле всё очень круто - начал смотреть курс по Ява Скрипт сначала - вот тонкостей много не хватало. Отсюда тоже взял полезное, за выходные применю в своих проектах.
Только-только "вхожу" в js и спасибо моему другу, что подсказал ваш канал. Объяснение тем, примеров, подача контента на таком уровне, когда понимаешь, что найти и смотреть курсы от других людей (если это нужно) будет архисложно. Спасибо
Подписался, пока беру теорию с бесплатных уроков. Но в скором времени куплю юдеми ваши курсы! Я в восторге! Спасибо за материал! Очень крутое преподавание материала, + очень много нюансов разных разбираем при работе! Спасибо, дружище!
Класс! Из-за ошибки новичков я не смог продвинуться дальше, хотя знал про эту особенность языка, но тут почему то про нее не вспомнил. Хорошо что ход мыслей у меня был верный. Спасибо Владилен!
Контент отличный. Для тех кому нужен прогресс - это лучшее! Селект также супер полезен. У меня на работе был таск реализовать в модалке селект в котором в качестве опций был бы дерево компонент (tree). Последний компонент должен состаять из чекбоксов, ну сосбственно вести себя по классике. Не легко было писать данный компонент) Надеюсь ,Владилен, будет что-то подобное)
Поддержу Огромное спасибо за труд
Спасибо за серию уроков с модалкой. Честно выполнял все задания, но не смог сделать через Promise, делал через callback, а когда посмотрел ролик оказалось все так легко. А события через dataset просто топ. Еще раз спасибо. И да, как уже писали следующим плагином можно слайдер:)
Крайне полезная серия видео, на примере одной модалки объяснил, как работают промисы, ассинхронность и т.п На данный момент - лучший пример, как в плане задумки, так и реализации.
Владилен Вы просто супер! Учусь у Вас, познаю по JavaScript даже больше, чем на курсах, благодарю Вас за Ваш труд, всем, кто хочет реально научиться, рекомендую Учиться у Владилена, подписывайтесь!
Но все-равно огромное спасибо, третий день штудирую эту серию роликов, очень многие вещи из базового js стали понятными которых раньше не понимал.
Контент полезен, спасибо)
Круто! Я влез как буд-то в какую-то магию! Хотя чем дальше тем было запутанней. В частности из-за того, что всё подробнейшим образом комментировал в коде, каждое действие, и получилось очень долго - 5 вечеров кажется ушло на это практическое занятие. Внутренне рад как ребёнок, что начал познавать то что откладывал долгие годы. Спасибо тебе, Владилен. И кажется, по правилам хорошего тона, после прохождения плейлистов:
- JavaScript Основы для Начинающих - Полный Курс за 6 часов
- Сложный JavaScript простым языком
- ES6, ES7, ES8 - ВСЕ НОВОВВЕДЕНИЯ В JAVASCRIPT
- и этого занятия по созданию Модальных окон
я, кажется, просто обязан купить у тебя курс, хотя-бы в базовой версии.
Хотя и осталось много непонятностей по этому уроку, но всё-же теперь я понимаю для чего всё это изучаю, что даёт мне стимул для дальнейшего изучения JS.
Мне понравилось. Спасибо!)
Привет. Следующий плагин который можно сделать - это слайдер с поддержкой свапа
Слайдер в ТОП!!!
поддерживаю!
Я бы тоже посмотрел
Spasibo tebe za vseo!
Спасибо за контент )
спасибо! интересно было бы посмотреть реализацию выпадающего меню и работу с формами :)
Вообще крутою Спасибо!
Привет, Владилен! У меня сложилось замечательное впечатление после просмотра серии по модалкам. Раньше не представлял захода в тему модальных окон через реализацию плагина. Думал, модалки - это скучная и простая тема для чайников... А тут на тебе плагин, да ещё какой!!! В твоих руках JS играет всеми красками! Вот это динамика, вот это гибкость, во это расширяемость! Надеюсь, новые учебные видео будут также преисполнены авторскими задумками, и демонстрацией best practice!
Один из самых приятных комплиментов за все время, спасибо огромное)
Ты понял почему мне JavaScript нравится)
Спасибо за интересный и полезный контент, ближе к концу видео было не понятно за onClose() и за 'лайфсайкл хуки'.
Спасибо , хороший подход))
невероятно круто!
Блин какой же ты классный, просто слов нет, все так гладко и хорошо, смотреть приятно нет никакой воды и ничего лишнего, не то что у других они много говорят и мало делают а у тебя все наоборот
Круто! Спасибо!
А я все ждал этот видос
Приятного просмотра)
Интересный подход с дата атрибутами, я до этого думал они почти бесполезны, реализовал отлов события клика по кнопке через CustomEvent, создал два события show и delete и через низ перебрасывал все данные
Круто, спасибо
Да уж конечно, вот когда понимаешь что такое ванильный JS и понимаешь все прелести фреймферков. Спасибо за уроки! Они помогают окунуться с головой в кишки.
Последняя фраза звучит маниакально :)
@@VladilenMinin Все кто изучают JS немного маниакальны))
Спасибо за серию, очень интересно было, жаль тяжело воспринимается взаимосвязь всех элементов, в определенный момент просто перестаешь понимать что с чем и как связывается. Придется пересматривать еще несколько раз, чтобы все это оцифровать. Страшно представить что творится в реальных проектах
я сам в ахуе тупо повторяю как даун и сижу молчу в тряпочку, а тут еще люди комменты пишут че сделал так а не так
Очень понравилось как сюда промисы вписались
SUPER!!!! Plagin Table bilobi Kruto, poxodu s danimi
Спасибо. Было бы интересно также увидеть реализацию виджет чата, с интеграцией в приложение ну и webSocket.
Как всегда все четко) Чет я не видел у тебя ничего на канале об MutationObserver, а штука интерестная) Прикольно было бы посмотреть на отрисовку чего то с backend, когда с сервака ajax-ом приходит дата в виде json и нужно все грамотно отрендерить на страничку. С картинками и какой то сложной структурой, когда сайт не успевает отрисовывать и начинаются карусели...
Интересно было бы посмотреть на Drag'n'Drop. Например, редактор форм: можем добавлять новые инпуты различных типов и подзаголовки, тем самым формируя форму. И перетаскиванием можем формировать структуру, т.е. какой инпут за каким идет. На выходе получаем, например json
Благодарю
Было бы интересно посмотреть создание календаря , маркерами даты и выбором промежутков времени
Контент полезен только для понимания принципов языка, прокачки скилла. В боевых проектах обычно берутся готовые решения, но не всегда. В любом случае спасибо за видео)
неймовірно!
Сделать домашнее задание так и не успел, просто нет времени и желания кодить после работы )))
Посоветовал 2 новичкам у себя пройти этот миникурс. Для них оказалось слишком сложно даже набирать код за автором.
В итоге дал задачу пройти Владилена Минина "с азов", может заодно сам допру непонятные для меня темы ).
Владилен, привет! Сразу скажу, что контент шикарный, лучший что я встречал по JS. Спасибо огромное за то, что делаешь :)
Где-то недели 2 назад решил максимально сильно начать изучать JS(до этого знал его на уровне верстальщика статичных сайтов)
Сейчас 4-5 часов в день(6 дней в неделю) уделяю JS(Практика, по твоим урокам + уроки на learn javascript + задачи так же от туда), это просто невероятный прогресс с того что было. + учу 1-2 часа английский(т.к понимаю, что контента на английском просто море, да и в будущем на собеседовании английский будет большим плюсом.) - Что еще можете посоветовать в изучении?
Думаю с нуля сделать подобное приложение, например ToDo с кучей свойств, кнопок и тд, чтоб максимально всё отложилось в голове, по этим урокам.
А так, по поводу того, нужны ли подобные видео в будущем, с практикой - это 100%. Это лучшая прокачка навыков.
Я думаю стоит добавить продвинутую практику и это будет отличным вариантом)
@@VladilenMinin Спасибо за совет, продвинутая практика - это более менее сложные задачи по js, правильно понимаю? Судя по тому что выдал гугл
@@VladilenMinin Нашел еще у тебя урок по созданию приложения где вопросы задаёшь, с авторизацией + урок по webpack. Займусь изучением этих уроков в ближайшие дни :)
ты классный
Здаров автор, круто наверное выглядит, и несомненнобез обяснений это займет намного меньше времени. но хз врядли, заказчикам будет какая либо разница.
Блять, как же все лаконично у вас получилось, не то что у меня. Я нахерачил отдельный файл под 70 строк кода. Спасибо за контент
Для этого и учимся)
аналогично, но думаю в этом и суть обучения. Мы учимся решать задачи)
Еще бы оплату яблок, манго и апельсинов сделать:) это было бы вообще бомба:)
А так ну супер супер, спасибо
Привет, очень познавательные три урока. Единственно остались один вопрос и предложение:
?. Почему на модальное окно для закрытия ставим Promise, ведь суть модального окна в том чтобы закрыть взаимодействие пользователя с остальной частью контента, кроме самого модального окна. И определенно что перед тем как взаимодействовать со страницей необходимо закрыть модальное окно, что приводит к последовательным операциям.
2. Если CONFIRM создавать по аналогии с $.MODAL, второе модальное окно, но для кнопки удалить, тогда не надо будет его постоянно удалять
Профитный материал, спасибо! Подскажи, где посмотреть юзкейсы, хорошую реализацию, чтобы изучить код, как пишут, как писать правильно)
Спасибо большое за такую крутую практику! Хотелось бы подобного контента побольше. Не планируешь сделать похоже, так же на чистом js, но с большим функционалом? Например каталог и корзина. Было бы очень здорово!
Уже очень скоро)
@@VladilenMinin Давай, бро. жду не дождусь)
@@VladilenMinin добрый день, подскажите пожалуйста, что нужно освоить для прохождения данного урока? этот уровень доступен после скольких месяцев обучения?
Кстати, к сведенью, если вырезал часть кода или ранее копировал, то в WebStorm CTRL+SHIFT+V вызовет список ранее сохраненых в буфер и кол-во так же настраивается. Может кому пригодиться
Владилен, сделай пожалуйста видео про параллакс эффекты. Лайкните чтобы увидел
Просидел 2 часа с render(); Оказывается если написать const toHTML = function(fruit){`хтмл разметка!!!!`}, то болт вам!!!! а я так и писал!!!! В общем только const toHTML = fruit => `` рулит!! Пришлось 2 часа убить на исследование этого момента!))) Зато метод map нормально так изучил))) думал в нем косяк! Отработал с ним по полной. Если не сложно, оговаривайте моменты про ES6 синтаксис. Спасибо за видео, Очень круто!
А как было решение в функции render() у меня тож такая проблема
@@boburbaxrombekov8604 Если такая же проблема, то и такое же решение) А решение я описал выше
Либо опишите ваш случай
Просто нужно было писать стандартную функцию: function toHTML(fruit) {return ``}
Тоже хочу делать сложное и говорить что это было несложно 🙂🙂
Мой отзыв наипозитивнейший! спасибки)))
интересует получение данных в реальном времени и вывод их на экран =) движение по карте н-р (получение и отображение координат) или кол-во людей что-то типо статистики. в целом работа с апи подробней =)
Вот проанализировал я каналы которые есть на youtube, да и вообще источники и чёт никто толком не рассказывает об веб-компонентах и новом стандарте (ну не совсем новом) часть идей которого реализована во vue и react... А технология весьма интересна, поскольку позволяет делать тоже самое что и vue/react. Интересно было бы послушать да и посмотреть)
Отличная рубрика, зря забросил! Может возобновишь?
Может что по уровню выше? Например socket, чатов уже сделано много, а вот например приложения для doto листов. Стек например express + react + react native
Было бы круто еще разобрать Next.js чтобы рассмотреть в чем прикол SSR. Storybook применить для структуризации кучи компонентов, спасибо)
Ssr можешь через nuxt посмотреть, я подробно рассказываю
Спасибо за видео!Жаль только что не все понимаю(
Привет, посоветуй пожалуйста какой редактор выбрать: WebStorm или VS Code, и в каких случаях?)
Спасибо, очень полезный контент! Интересно было бы посмотреть на любой плагин, но созданный с помощью концепций ООП.
А идея плагина через промисы в том, что таким образом мы делаем окно подтверждения независимым от того, где оно вызывается?
Скоро будет с продвинутым ооп )
Чювак Круто!... только мозг ломается как код то идиот верх чтобы потом идти в низ чтобы потом идти на середину и потом в другой файл и всё по новой ..))
24:30 Объясните пожалуйста, немножко не понял на счет анимации, т.е. проблема, связанная с появлением модалки без анимации. Как я понял, что при добавлении модалки в DOM дерево, стилей для нее еще нету, а после таймаута в 100 миллисекунд документ уже загрузился и стили появились? Правильно ли я понял?)
Владилен, неоднократно видел, что Вы показываете, что можно переходить от array.map(x => func(x)) к array.map(func), в лямбда-исчислении такое преобразование называется η-преобразованием (эта-преобразование/эта-редукция/эта-эквивалентность - синонимы)
Добро, благодарю за терминологию
Получилось выполнить задание к этому видео?)
В каждом уроке нахожу все больше и больше нового для себя - спасибо за твой труд Владлен !
А где задание?
Успел, но совсем не так, как ты :D Выполнял так как в голову приходило, работало, но криво)) Реализовал так же добавление карточек)
Получилось, но без промисов и хуков. Просто при нажатии кнопки удалить создаю переменную let col = tar.closest('.col'); и если юзер жмёт да уверен мол делаю col.remove
Да, можете глянуть для себя, немного по-другому реализовал проект, вроде проще и оптимизированнее получилось: github.com/davidterami/modal-window-plugin
Спасибо! Но не показал как в методе дестрой удалять обработчики событий для кнопок. Этот вопрос повис тяжким грузом...
В принципе каждый шаг понятен, но запомнить всё и использовать самостоятельно сложно. Вероятно с практикой будет легче.
бутстрап карусель было бы круто!
До появления окна confirmModal в константу fruit помещается объект со свойствами определенного фрукта const fruit = fruits.find(f => f.id === id), при нажатии на кнопку УДАЛИТЬ нужно перебрать массив fruits и сравнить каждый его элемент с константой fruit. Запомнить в дополнительной переменной индекс элемента массива fruits который идентичен константе fruit. После определения индекса удалить нужный элемент массива fruits и закрыть модальное окно. Я тут не понял про асинхронность ничего и соответственно зачем промисы. Какое значение тут имеет в какой момент будет нажата кнопка?
А как вообще предпочтительно: сделать render() или просто обертку карточки удалить (например card.parentNode.removeChild(card)) . Просто удалить мне кажется менее затратно, но может я подводных камней не вижу в таком способе?
Спасибо за уроки, все понятно и по делу. Единственное, что я так и не понял - для чего нужен beforeClose() ?
Если вернешь в нем false, то окно не будет закрываться
@@VladilenMinin а чем это отличается от closable: false ?
А чем плох вариант перед вызовом confirm.open устанавливать confirm.initiatorId = fruit.id, а затем в обработчике удалять по Id?
А почему не использовал onclick для карточек для вызова модалок?
К ответу на вопрос предыдущего комментария. Мы не знаем, когда будет нажата кнопка, потому что её обработчик находится в массиве самой кнопки. Мне кажется, что пример искусственный, потому что промис должен гарантировать, что одна операция выполнится после выполнения другой( вызов API, setTimeout), а здесь мы будто "якоря" понаставили, чтобы потом дополнить вызов кнопки. Я не хочу придраться, просто в голове немного не укладывается то, что я читал про промисы и то, как они здесь применяются.
А будут ещё какие-то практические задания? И когда их ждать?
Будут, в ближайшее время)
Спасибо, Владилен. Хочу приобрести Ваш курс по JavaScript на webformyself. В том курсе на данный момент все актуально?
Рекомендую повременить
Или напиши мне в личку
@@VladilenMinin ответил на почту.
Спасибо за видео. На сколько затратно по ресурсам каждый раз рендерить и удалять html? Почему бы не держать готовый html модального окна в body и просто подменять ему контент?
В данном случае это очень не затратно, контента мало. При этом если у тебя будет много конфирмов, то меньше будет нагружаться браузер в виду меньшего количество элементов в ДОМ
Так что такой подход лучше
не хочешь запилить какой-нибудь длительный проект на реакте по типу как ты делал crm систему на vue?
Пока другие планы
подскажите, пожалуйста, а как теперь по такому принципу что то добавлять на страничку?
Владилен, когда ожидается курс по NgRx?
Я думаю весной
Владилен, в данном случае промис используется просто для емкости кода? Я просто никак понять не могу))
Нет, потому что мы не знаем когда будет нажата кнопка. Это асинхронность
Докер плииис!!