Обучение JavaScript. Урок для начинающих. Скрипты для сайта интернет магазина

  Переглядів 149,986

ВебКадеми | Юрий Ключевский

ВебКадеми | Юрий Ключевский

День тому

↓↓↓ Таймкоды, ссылки на материалы в описании под видео ↓↓↓
Обучение JavaScript на практическом примере. Пишем JS скрипты для сайта интернет магазина. Работа с DOM, поиск элементов, нажатие (клик), функции, переменные, массивы. Урок по языку программирования JavaScript от веб-разработчика.
Интенсив по JavaScript.
Паттерн MVC. JSON и LocalStorage: school.webcademy.ru/intensive...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
7 уроков по 30 мин: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
📍 Материалы к уроку:
• Стартовый шаблон урока: webcademy.ru/webinars/shop-st...
• Готовый код с урока: webcademy.ru/webinars/sushi-s...
Тайм-коды:
00:00 Знакомство с проектом
03:00 Начинаем работу. Знакомство с версткой проекта
05:03 Счетчик для одного товара на JS
28:10 Счетчики для всех товаров на JS
46:59 Добавление товара в корзину
01:07:14 Суммирование одинаковых товаров в корзине
01:18:49 Удаление товара из корзины. JavaScript
01:29:32 Скрытие надписи "Корзина пуста"
01:45:33 Показ блока "Оформить заказ"
01:48:07 Подсчет стоимости товаров в корзине
02:10:30 Блок "доставка"
02:20:16 Примечание и информация о Интенсиве JS MVC
02:22:20 Бонус. Работа с JSON на JavaScript
02:37:59 Курс по JavaScript frontend разработке
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Меня зовут Юрий Ключевский. Я занимаюсь разработкой сайтов уже много лет, специализируюсь на front-end разработке и верстке сайтов, JavaScript и PHP программировании. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, JavaScript, JQuery, PHP, MySQL, React, Gulp.
На нашем канале bit.ly/3erF41X вы найдете много полезных обучающих материалов, а так же сможете поработать со мной лично пройдя мои курсы.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Сайт школы ВебКадеми: webcademy.ru/
Наша группа Вконтакте: webcademy
Telegram канал: t.me/webcademynews

КОМЕНТАРІ: 327
@user-zd1se1ml4v
@user-zd1se1ml4v 2 роки тому
Спасибо! Понятно и доступно)
@jellybelly7373
@jellybelly7373 2 роки тому
Спасибо за видео!) Побольше бы таких практик по js))
@dabroful
@dabroful Рік тому
Спасибо! По-больше бы таких видео!
@Alex-wg8tb
@Alex-wg8tb Рік тому
Как же хорошо обьясняете. Спасибо вам.
@alexkir9312
@alexkir9312 Рік тому
Спасибо. Очень крутой материал)
@iharrwe
@iharrwe Рік тому
По-моему очень подробно и понятно получилось. Отдельное спасибо за подготовленную заготовку вёрстки. Просто топ!
@pushkareff
@pushkareff 2 роки тому
Самое понятное и адекватное объяснение JS, которое я видел в жизни. Удачи автору!
@daryaemelyanova1785
@daryaemelyanova1785 2 роки тому
Хороший урок, особое спасибо за часть "работа с JSON"
@user-lm9ee1gn5p
@user-lm9ee1gn5p Рік тому
Хочу выразить огромную благодарность за контент, все понятно без воды
@Anatoli-bq1pe
@Anatoli-bq1pe Рік тому
Благодарю за подробное объяснение
@Anahitacode
@Anahitacode 2 роки тому
Очень полезно и содержательно. Все работает! Спасибо за урок
@alexche4712
@alexche4712 Рік тому
Респект, мэн!! Очень толково все изложил без воды и без лишнего разжевывания . И за возможность скачать исходники и готовый результат отдельное спасибо.
@Nebogr
@Nebogr Рік тому
Здравствуйте, можно побольше таких уроков🙏
@user-mw6lr7hl9i
@user-mw6lr7hl9i 2 роки тому
Очень полезный ролик, всё очень доходчиво, а главное - показывает как используется JS на практике, большое спасибо☺
@kseniia_tutor
@kseniia_tutor Рік тому
Супер! Большое спасибо, ясно и крайне доходчиво.🥰
@nikita-uw7kk
@nikita-uw7kk Рік тому
Отличный видео-урок, у Вас явный талант к преподаванию ,очень доходчиво объясняете !
@user-rf3fq5if2n
@user-rf3fq5if2n 2 роки тому
Шикарное объяснение, автору спасибо!
@dinex815
@dinex815 10 місяців тому
Офигенная подача и все понятно. Большое спасибо автору за такой контент!
@dedlive51
@dedlive51 2 роки тому
Доходчивое объяснение многих вещей. Для новичков будет очень полезно.
@igr3943
@igr3943 Рік тому
Это было здорово! Моё почтение за такой урок и мастеркласс!
@user-bo2fn9ye6b
@user-bo2fn9ye6b Рік тому
на самом деле от души брат за твои грамотные уроки. Ты прямо надежда моя!
@user-bj3gc6xs9p
@user-bj3gc6xs9p Рік тому
Ну что сказать одним словом пушка!!!!Побольше бы таких видео которые уже приблежают тебе к сути из всего что ты учил.От простой верстки до того что оказываеться не нужно все делать с помощю верстки.
@Andrew_Dreamer13
@Andrew_Dreamer13 Рік тому
Спасибо за суперский урок и отдельное спасибо за приложеный готовый код.
@dmitry_beresten
@dmitry_beresten Рік тому
Классный урок. Писал код вместе с автором во время просмотра. Всё получилось! Я очень рад. Побольше бы таких уроков на вашем канале где что-то пишется на JavaScript. Хорошо, что даёте файлы со стартовым кодом и готовым кодом. Иногда из-за невнимательности что-то пропустил и всё... а тут подсмотрел - и нашел ошибку. За это отдельное спасибо! Удачи вам и мотивации записывать подобные видео :)
@ddkadaddkada4357
@ddkadaddkada4357 10 місяців тому
Спасибо большое, что на просторах ютуба попался ты. Все очень доходчиво и понятно
@user-ck6qi9qw9y
@user-ck6qi9qw9y 2 роки тому
Одно из лучших практических видео!!!
@crn05
@crn05 Рік тому
Спасибо за видео, все получилось, все понял 👍
@sanjo6465
@sanjo6465 Рік тому
Спасибо большое!
@bogdankozlovskiy715
@bogdankozlovskiy715 2 роки тому
Хотелось бы больше видео с JavaScript :)
@VideosFromNorway
@VideosFromNorway 8 місяців тому
Прошел урок )))Как всегда все круто!Отдельное спасибо и респект что оставляете в открытом доступе начальные и готовые файлы проекта в отличии от некоторых других блогеров которые даже самую простую строчку кода умудряються заливать на патреон как платный контент что напрочь отбивает любое желание смотреть их видео!Удачи вам в продвижении контента!
@rostyslavkinash5232
@rostyslavkinash5232 2 роки тому
спасибо за урок
@orginal_parfume
@orginal_parfume Рік тому
Спасибо огромное за грамотное обьяснение!!
@rollim3100
@rollim3100 4 місяці тому
Спасибо тебе за урок! Благодаря тебе вышел на фриланс!!!
@optimus839
@optimus839 Рік тому
Шикарное объяснение. Большое спасибо!
@user-tb4fz4gq9j
@user-tb4fz4gq9j 3 місяці тому
Здравствуйте. Огромное спасибо за столь внятный, интересный и познавательный урок.
@user-lv6ib2rm6g
@user-lv6ib2rm6g 10 місяців тому
Очень полезный гайд! Автор - мужик с большой буквы! Респект таким людям)
@lana240669
@lana240669 8 місяців тому
Спасибо вам огромное, уже второй день смотрю и понемногу делаю. Получается. Хоть понятно у вас - что и для чего делаем и прописываем.
@aidasabirova1315
@aidasabirova1315 Рік тому
Алла разы болсын,өте түсінікті
@nikomunikabelen8540
@nikomunikabelen8540 2 роки тому
моднейший урок конечно, уже две недели раз за разом делаю))) пока до половину могу сделать, не смотря в готовый код)) отличная практика JS!
@user-qu1he5kt8r
@user-qu1he5kt8r 2 роки тому
спасибо это очень интересно
@user-bu9hz3xs7o
@user-bu9hz3xs7o Рік тому
Ты просто лучший, всё просто и понятно, спасибо тебе за этот ролик
@chiisai-ookami8417
@chiisai-ookami8417 4 місяці тому
Вы просто боженька ) Спасибо огромное )
@user-zg7ev3ig1b
@user-zg7ev3ig1b 2 роки тому
СПАСИБО!!
@ilya5366
@ilya5366 2 роки тому
Ну это просто шедевр , понятнее уже некуда.
@MrGreenman02
@MrGreenman02 Рік тому
тот случай когда получаешь не только знания но и удовольствие от процесса!) Юра ты Красавчик!) так держать!)
@user-ky6ml4lr6i
@user-ky6ml4lr6i Рік тому
ты лучший ! развития тебе!!!!
@user-vp6bu3fg1o
@user-vp6bu3fg1o 3 місяці тому
Видео просто шик))) спасибо большое
@user-vp5hu8om9b5
@user-vp5hu8om9b5 Рік тому
Спасибо! Подписался
@alexandrgusletsov2567
@alexandrgusletsov2567 10 місяців тому
огромное спасибо!!!
@vanitas2018
@vanitas2018 2 роки тому
Мне нравиться ваши видео. Хотелось бы больше видео с JavaScript :)
@svoy4el
@svoy4el 8 місяців тому
Отличный контент,Игорь!подача, ценность материала,все супер.Нужен ещё контент относительно интернет магазинов на js
@Triceps78
@Triceps78 6 місяців тому
Спасибо большое за урок, наставник
@akust0912
@akust0912 Рік тому
Спасибо! Очень понятно, подробно объясняешь и чисто пишешь код!
@childofinfection4118
@childofinfection4118 Місяць тому
урок определённо здоровский, и для начинающих прям круто. Но сам код имеет некоторые лишние действия как я считаю. Но урок всё равно полезный)
@user-gi2bo3jq1r
@user-gi2bo3jq1r 2 роки тому
огромное спасибо
@mythl.l.l9397
@mythl.l.l9397 Рік тому
Я даже подпишусь! Очень помог, самый понятный гайд
@borislihachev8325
@borislihachev8325 Рік тому
Супер объясняешь, 👍👍👍👍
@Arkunya93
@Arkunya93 Рік тому
Очень круто объясняете! Все доходчиво. Так и аппетит просыпается идти к вам на курсы!
@ExtremelyDangerous13
@ExtremelyDangerous13 10 місяців тому
Вы сделали сайт полностью?
@qwerty10959
@qwerty10959 2 роки тому
отлично!
@sw3ptop
@sw3ptop 2 місяці тому
спасибо большое за урок, узнал много нового
@dmaberlin
@dmaberlin Рік тому
супер!
@user-jf8gq3sy2y
@user-jf8gq3sy2y 2 роки тому
Крутой чел. Разжевал конкретно
@karyazin85
@karyazin85 Рік тому
Спасибо Вам огромное за этот урок. Кладезь полезной, применимой на практике информации. Отличная, понятная подача! Так же спасибо за ссылки на материалы курса. Вообще канал -ТОП! У Вас, однозначно, огромный педагогический талант. Успехов Вам)
@ExtremelyDangerous13
@ExtremelyDangerous13 10 місяців тому
Вы сделали этот сайт полностью?
@dmitryck8721
@dmitryck8721 2 роки тому
Жаль что я не нашел этот канал раньше, у меня проблемы с Js но в этом видео шикарное объяснение, все понятно и доходчиво, спасибо !
@user-lm9ee1gn5p
@user-lm9ee1gn5p Рік тому
Полностью согласен
@maksonix
@maksonix Рік тому
привет у мнея тоыхе проблеми отзовитес как ваш прогрес?
@ExtremelyDangerous13
@ExtremelyDangerous13 10 місяців тому
У вас получилось сделать сайт полностью?
@visitingkatrin5620
@visitingkatrin5620 9 місяців тому
Аналогично
@user-ke5fn6sm8u
@user-ke5fn6sm8u 6 місяців тому
Привет, спустя год, как ваш прогрес?
@user-nt9vg1im9g
@user-nt9vg1im9g Місяць тому
Спасибо за урок
@michael3513
@michael3513 Місяць тому
Благодарю за отличное изложение материала. Все очень доходчиво. Отдельное спасибо, что без фреймворков. Пробовал освоить React - пока не получилось, вернулся к более глубокому изучению чистого JS, этот видеоролик - просто клад. Заинтересовался темой, как дальше отправлять данные заказа из корзины, их получать и обрабатывать. Насколько я понимаю, в данном примере данные о содержании заказа содержатся вне тега , внутри формы находится только поле ввода номера телефона и кнопка "Заказать"... Буду искать материалы))
@r3dkin
@r3dkin 2 роки тому
Лучшее обьяснение которое я видел! Большое спасибо за такой материал! Посмотрел и переписал весь код на одном дыхании!
@ExtremelyDangerous13
@ExtremelyDangerous13 10 місяців тому
У вас остался этот сайт?
@user-ek9mp1nw5s
@user-ek9mp1nw5s 9 місяців тому
Очень годно 👍
@---ls6st
@---ls6st Рік тому
Это дар, уметь так объяснять доходчиво.. Наконец-то блондинка начала понимать JS..😂 Респект и благодарность
@emilsarymsakov7028
@emilsarymsakov7028 Рік тому
Аналогичная история. Только я не блондин. Спасибо, автор
@jesterjester3836
@jesterjester3836 2 місяці тому
Как ваши успехи ?)
@tronget
@tronget Рік тому
Отличный урок! Спасибо)
@rustamlivaev
@rustamlivaev Рік тому
Вы правда крутой ментор. Прям хочется купить у вас курс, но понимаю что ранее купленные курсы нужно довести до конца. Жаль что вас раньше не увидел.
@jabalopa5980
@jabalopa5980 Рік тому
очень круто и понятно объясняешь, спасибо за такой контент и проделанную работу!
@ExtremelyDangerous13
@ExtremelyDangerous13 10 місяців тому
Вы сделали сайт полностью?
@sergeyastafurov7301
@sergeyastafurov7301 2 роки тому
Огромнейшее Спасибо автору ролика. Смотрим всей семьей! Ладно шутка, я один смотрю но всё очень интересно. Было бы у меня НОЛЬ опыта в ДЖ первое видео которое я бы посмотрел это было бы ваше. Жаль что вы избегаете таких терминов как Делегирование событий, всплытие и погружение объекта, DOM и т.д но за такую подробность это простительно . Подписка, лайк!
@ivanhroshev3379
@ivanhroshev3379 Рік тому
Все хорошо расписано и понятно. Качество и уровень кода проста на высоте, как и подачи материала в целом. Что сказать, ещё один фаворит в моем чемодане.
@ExtremelyDangerous13
@ExtremelyDangerous13 10 місяців тому
Вы сделали сайт полностью?
@edgarharoyan2934
@edgarharoyan2934 2 роки тому
яркий пример того, что не надо сразу бежать в каналы где сотни тысяч подписчиков, спасибо за урок , полезно и без воды.
@user-js9pd7cv6g
@user-js9pd7cv6g 2 роки тому
Вот это топ объяснения! Как 1000 лайков поставить)?
@hayk1434
@hayk1434 2 роки тому
спасибо очень доходчиво😊😊 а может есть и css который Вы написали для этого JS-а
@user-gf1jk6hb4n
@user-gf1jk6hb4n 2 роки тому
лучшее видео
@Logistar
@Logistar 10 місяців тому
я за видео узнал больше, чем на своих курсах
@alexasanchobetherestors9962
@alexasanchobetherestors9962 Рік тому
Данное видео - это золотой клад. Определенно лайк и в избранное! Вот такой контент нужен, с практикой!
@Enciiny
@Enciiny 2 роки тому
Видео попало в рекомендации только сейчас, через 4 месяца
@mythl.l.l9397
@mythl.l.l9397 Рік тому
Спасибо больше
@mythl.l.l9397
@mythl.l.l9397 Рік тому
за код в описании и понятное объяснение
@hayk1434
@hayk1434 2 роки тому
оо да нашел и это спасибо
@olddim5606
@olddim5606 10 місяців тому
спасибо за урок очень полезен☺, у меня вопрос а как подключить товары к базе с добавлением
@user-mn1so6hs8z
@user-mn1so6hs8z 2 роки тому
Неужели нашёл что-то годное
@islambiigaziev4300
@islambiigaziev4300 Рік тому
🔝🔝
@uzcover253
@uzcover253 2 роки тому
пушка
@user-jc5ck5ph5t
@user-jc5ck5ph5t 2 місяці тому
это супер, так понятно, как для детей просто! спасибо Вам большое! единственная проблема - запомнить эту логику и последовательность. наверное, надо десятки таких корзин для этого сделать...
@WebCademy
@WebCademy 2 місяці тому
Все верно, раза 4 повторите и запомните. Так и есть)
@user-wm4xh4ho2t
@user-wm4xh4ho2t 2 роки тому
Можно написать короче: count.innerText++ и count.innerText--
@Arabalifbosi
@Arabalifbosi 2 роки тому
Сохраните эфир потом посмотрю ша немогу
@juliaj1791
@juliaj1791 Рік тому
Здравствуйте, очень заинтересовали ваши уроки, но есть ли у вас урок именно по верстке этого шаблона? Хотела бы начать с этого, а то получается видео по готовом шаблону, хотелось бы тоже его сделать по вашим урокам
@AlekseyGaraev
@AlekseyGaraev 2 роки тому
Можно ли корзину на ajax разворачивающуюся сделать интересно 🤔💭
@user-ni8eb7mb3c
@user-ni8eb7mb3c Рік тому
Ваша разметка в html просто самая читабельная 👍🙏🏻
@WebCademy
@WebCademy Рік тому
Спасибо)
@user-ni8eb7mb3c
@user-ni8eb7mb3c Рік тому
@@WebCademy подскажите у меня пишет чтоб devTools не доступен в России , и не никак не проверить теперь код установил vpn ничего не изменилось как проверять написание и работу не понимаю
@WebCademy
@WebCademy Рік тому
@@user-ni8eb7mb3c Странно, не встречал такого. Попробуйте Firefox.
@ExtremelyDangerous13
@ExtremelyDangerous13 10 місяців тому
@@WebCademyУ меня ошибка в консоли почему-то. Когда я пишу counter.innerText и не появляется 1 внизу,как у вас на 17:40 минуте в видео. Ошибка такая: Uncaught ReferenceError: counter is not defined at : 1:1 и всё
@uk-lych_sveta
@uk-lych_sveta Рік тому
Верстальщик - свободная реализация творческого потенциала человека, если конечно ты в теме. Если нет, то автор данного видео Юрий Ключевский, объяснит так подробно, что поймет даже Полиграф Полиграфович Шариков. Спасибо за ваши труды и старания!!!
@_Mirage_org
@_Mirage_org Рік тому
Спасибо огромное, теперь я начал более менее понимать как это все работает. но у меня есть вопрос, какой плагин ты используешь? ибо как ты пишешь внутри JS хтмл код с пробелами и ентер? когда я просто копирую и вставляю мне приходится убирать все между ними отступы потому что js не заработает нормально и всегда светится красным. изза этого невозможно нормально воспринимать весь хтмл код который я написал.
@jonatanslapinskis1723
@jonatanslapinskis1723 Рік тому
спасибо очень познователний урок. Фигми нету?
@puchokchpok
@puchokchpok Рік тому
2:05:54 - если у вас не изменяется сумма при кликах в счётчике в корзине, то поменяйте условие: if (event.target.closest('.класс вашего элемента'))
@ExtremelyDangerous13
@ExtremelyDangerous13 10 місяців тому
Вы сделали сайт полностью?
@dennisfisher2684
@dennisfisher2684 2 роки тому
Здравствуйте! А как посмотреть продвинутый интенсив? Ссылки на него нет в описании.
@user-kh3no7nv8o
@user-kh3no7nv8o 2 роки тому
отслеживание нажатия на кнопку можно было бы реализовать через switch-case) выглядело бы красивее и меньше кода) а так урок топчик) полезный как для новичков, так и для продвинутых)
@ExtremelyDangerous13
@ExtremelyDangerous13 10 місяців тому
Вы сделали сайт полностью?
@goodcthulhu250
@goodcthulhu250 Рік тому
Ребят, а как плагин называется, который подсвечивает желтой линией одну фигурную скобку с другой? очень удобно
@mist1179
@mist1179 Рік тому
Самый лучший урок по js который я когда либо видел. в начале я отчаивался, что возможно frontend разработка это не мое, но когда увидел ваше видео, моментально понимал и даже ставил ваше видео на фон и делал самостоятельно. вы очень круто поясняете. спасибо вам огромное, в дальнейшем буду рекомендовать вас моим друзьям, которые тоже скоро встанут на путь js) хочу отметить, что вы объясняете на понятном языке, а не просто гоняете теорию java script, как это делают остальные
@WebCademy
@WebCademy Рік тому
Спасибо за комментарий!)
@mist1179
@mist1179 Рік тому
@@WebCademy вам спасибо, что делаете такой труд в бесплатном доступе
@ExtremelyDangerous13
@ExtremelyDangerous13 10 місяців тому
@@WebCademy 19:12- Я делаю как вы,но почему-то плюс не работает. Не прибавляются роллы 😢 Не подскажите,в чём дело,пожалуйста
@ExtremelyDangerous13
@ExtremelyDangerous13 10 місяців тому
@@WebCademy:01:43- у меня почему-то строки,которые я скопировал (красные) Хотя,сделал как у вас не подскажите,в чём проблема??
@ExtremelyDangerous13
@ExtremelyDangerous13 10 місяців тому
Пишу const и выдаёт ошибку. И дальше после этого когда все неправильное даже то,что скопировано
Все о Frontend-разработке за 15 минут
15:14
Merion Academy
Переглядів 80 тис.
Пескоструйный АППАРАТ! #shorts
01:00
Гараж 54
Переглядів 1,4 млн
Самые любимые проекты Javascript-разработчиков
7:40
Миша Ларченко
Переглядів 12 тис.
Разбираем основы Kafka и RabbitMQ
26:54
Digital train | Alex Babin
Переглядів 4,5 тис.
Урок 17. JavaScript. Все о LocalStorage
16:39
Владилен Минин
Переглядів 146 тис.
CSS функции min, max и clamp с примерами использования
11:42
ВебКадеми | Юрий Ключевский
Переглядів 8 тис.