Практическое программирование на JavaScript для новичков и верстальщиков
Вставка
- Опубліковано 15 чер 2024
- ↓↓↓ Материалы и тайм-коды в описании под видео ↓↓↓
Практический урок по языку программирования JavaScript. Научимся делать аккордеоны, табы, модальные окна на JavaScript. Работа с DOM элементами на странице, querySelector, nodeList, обход элементов, события по клику, addEventListener, события по клику, eventPropagation. Примеры кода и объяснения для новичков.
Первая часть. Основы JavaScript. Теория: • Основы JavaScript для ...
Настройка среды разработки VS Code: • VS Code - установка и ...
Файлы к уроку в Telegram канале: t.me/webcademynews/294
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Тайм-коды:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
00:00 Приветствие
00:48 Примеры того что сделаем на уроке
02:51 Скрыть/открыть блок
28:08 Аккордеон на JS
45:55 Табы на JavaScript
1:07:14 Модальные окна на JS
1:32:09 Универсальный код для нескольких модальных окон на JS
1:53:23 Презентация курса по JavaScript
Спасибо за урок. Знаете, я много пересмотрел всяких уроков на ютубе, практически всех более-менее известных верстальщиков. У каждого есть свои особенности. Но ваш метод донесения информации мне нравится более всего. С одной стороны вы не перегружаете новичков избыточной информацией, которую сложно переварить, а с другой стороны объясняете очень просто. Вы отличный учитель. Спасибо, вам, Юрий!
Спасибо, даже мне, с моими шестидесятилетними мозгами, понятно стало настолько, что код уже самостоятельно написать смогла, а потом только проверяла по видео. Не все в точности как в видео сделала, но ведь сделала! Раньше и такого не было. Это вдохновляет!
вауууууу. эмоции. только эмоции. это круто! пазлы сошлись. до этого смотрела и пыталась вникнуть в 6-часовой урок по js и не могла понять, как это применять. и вот теперь оно доходит 😆😆😆 это реально прикольно! Спасибо за Ваши уроки!
Невероятный урок, огромное спасибо вам. Сегодня реально на практике пригодилось. Нужно было сделать модальное окно на чистом JS и, благодаря вам, всё получилось реализовать.
Супер!!! Обаятельний дядечка 😄!! У меня все получилось!!! С Вами все понятно, СУПЕР, СПАСИБО ЧТО СОЗДАЛИ КАНАЛ!! ЛУЧШИЙ КОНТЕНТ!!!
Это первое видео, которое я посмотрел и понял, зачем пишут определенные строки кода.
Я считаю - глупо переписывать строки, если ты не понимаешь, зачем они пишутся. Это первый преподаватель, который объясняет свои действия так, что понятна буквально КАЖДАЯ строка.
Тоже обратил внимание, что поясняет очень многое.
+1 ему к успеху 😁
Юрий, класс, вообще считаю без лести и преувеличения, Вас одним из лучших в инете, кто преподает и обучает Вебу. Желаю дальнейших творческих успехов и достижений, максимальной реализации всего задуманного!
Супер! Спасибо за урок!
Жаль, что на таком хорошем канале так мало подписчиков и просмотров. Достойный материал
Добрый день, огромное спасибо за такое доступное и понятное объяснение материала. Никакой воды и заумных фраз - все четко и понятно, и как результат - отлично работающий фунционал сайта. Еще раз спасибо.
Юрий, Вы лучший! Спасибо огромное за Ваши уроки и бесценный труд!
Юрий огромное спасибо. Ваши уроки дают мне надежду изменить свою жизнь к лучшему.
Спасибо Юрий! Все очень добросовестно, аккуратно, доходчиво. Вы прирожденный учитель🏆
Добрый день! Учусь js на Я...се (платно) вот уже 6 месяцев, и многое что они не способны объяснить за 6 месяцев - вы объяснили за 2 часа. Учитель это не профессия, учитель это призвание! Вы учитель по призванию, спасибо!
Уроки суперские. Понятно с полуслова. Разжовано предельно допустимо.
Здравствуйте! Видео урок был отличным! Хотелось бы увидеть урок про ToDoList и React JS! Спасибо! Жду новых и отличных уроков!!!
спасибо за ваш труд! это очень доходчиво и интересно, где ещё можно найти подобные видео, чтобы так просто объясняли?
Спасибо большое вам огромное спасибо что помогаете нам за безценный труд
Спасибо за уроки, все очень просто и понятно объясняете, для новичков то что нужно.
Вы очень круто все разжевываете !!! Смотреть одно удовольствие)
Спасибо, что всегда оставляете код в открытом доступе, это очень помогает.
Я редко пишу комментарий, но для вас сделаю исключение и хочу поблагодарить вас за проделанную работу!
Рад что было полезно!)
Отличный контент. Все доходчиво объясняете. Сразу понятно для чего какой метод и какая тут логика. Спасибо
Огнище) мне не было еще настолько понятно все)
Осталось запомнить все это))
Огонь! Спасибо огромное за труды! Хотелось бы больше видео по JavaScript. Создание toDo-приложения, создание обычного калькулятора и т.д.
Спасибо за урок.Интересно и понятно
Супер, спасибо !!!!
Спасибо за урок! Было очень полезно и интересно!
Огромное спасибо!
Почерпнул много полезного.
Продолжайте дальше в том же духе.
Юрий , спасибо Вам. Урок был интересный и полезный =) Всё не зря !
Лучший урок который я нашел на ютубе, спасибо Вам большое!
От души! Ты лучший!))) Обязательно, дай Бог😇🙏, куплю у вас обучалку!
Спасибо. Познавательно и интересно.
Супер, все понятно объяснил!💪👍
Очень подробное и понятное объяснение, аналогии понятные
Про модалку реально полезно. Зачёт!
спасибо за урок!
очень хорошее и подробное объяснение
Хороший ролик. Очень доступный, подробный
и наглядный
Отличный контент, спасибо за видео
Благодарю друг , хорошо излагаешь.
ОГРОМНОЕ Спасибо за годный контент!
Спасибо большое за ваш контент!
Супер урок! Очень полезный!
Юрка спасибо
Спасибо за урок
Спасибо за видео!!!
Отличное изложение материала! Очень рад что набрёл на это Ваше видео. С удовольствием прослушал и проработал. Подписался на канал. Большое спасибо!
спасибо за урок
лучший видео урок спасибо Автору канала!!!
Класс! То что и искал)
Очень годный контент!!!!
здравствуйте спасибо за урок. отличный урок. вам надо поработат над звуком плохо слышна
спасибо за видео
Благодарю Вас!🙏🏼💕
спасибо)
Топ контент для новичков, спасибо
спасибо отлично получилось
Официально лучшее видео
Спасибо
очень сильно,что первая что вторая часть
от души за это
Офигенно.
спасибо!
Ти лучший посибо !
Красавчик
сразу подписался
Почему не продолжаете плейлист?хотелось бы посмотреть и повторить Ваши примеры интерактивности на верстке.
++++++
Юрий, подскажите пожалуйста , когда вы пишите блок кода, например, что за рамочка такая вокруг, неполная, как её установить в VS code?
45:03 я не пойму, если мы функцию выносим отдельно, как this понимает на что ссылаться? Или типо из-за того, что мы передали ее аргументом в item, функция понимает что this это item ?
респект вам! после просмотра 11-ти часов теории и неудач в codewars, наконец-то хорошая практика! Не могли бы вы посоветовать, где ещё попрактиковаться можно новичку? 😉
брат, ты тоже проходил этот курс на 11ч на ютубе?😢😂 уважаю
@@mickeymr4951 ага, вот 11 месяцев прошло я уже всё, что захочу в js сделать могу, этот курс реально помог, но важно дальше двигаться, я после прохождения забыл половину, главное практиковаться
@@keepcalmandcodeon. ты огромный молодец!!! спасибо за ответ, такое очень вдохновляет :З я вот только закончила основы, сейчас в практику вкатываюсь)
@@mickeymr4951 спасибо, основа - самое сложное, дальше всё намного легче)) удачи тебе! всё получится!)
пишу все по видео почему то button в консоле не выходит подскажите пожалуйста в чем проблема
Еще одно отличное видео ,скажите а почему в первом видео ,не рассказали про стрелочные фу-ций,везде читаю что их всегда используют.
Расскажем в серии роликов по JS.
Спасибо! Очень классное видео, очень познавательно! Но слишком часто взаимодействуете с console.log - перебор! Не хватает видео про слайдер-карусель, ну только не обычный со стрелками и точками, а на основе плагина swiper (адаптивный).
Ведь начинающий разработчик должен знать как написать аккордеон, табы, селекты, модалки, слайдер.
Вообще супер подача материала!
Как отключить синее подчеркивание в VS Code?
Появляется под словами на русском языке или тексте с использованием lorem
Скажите, пожалуйста, как можно заменить "#", если указаны классы вместо id в конструкции let contentBox = document.querySelector( "#" + this.dataset.btn);
. - для CSS классов. Посмотрите ролик JS за 6 часов на канале, там в начале есть про селекторы.
Лучше делать функции открытия и закрытия модалки, а далее вешать на кнопки.
Это удобно если послед загрузки страницы надо открыть модалку спустя какое-то время, не кликая.
Ну или после успешной отправки формы открыть модалку с информацией.
Пример:
setTimeout(modalOpen(modal-id), 3000)
Да, для универсальной модалки методы открытия, закрытия будут полезны. В этом уроке базовый пример модалки и работа с DOM для верстальщика.
После успешной отправки формы лучше открывать не по таймауту, а после получение ответа от сервера о том что данные действительно получены.
Спасибо за урок!
Но у меня вопрос.
Как сделать так, чтобы было сразу две одновременно модалки, но они одновременно не закрывались?
Кнопка закрытия должна закрывать только ту модалку к которой она принадлежит. Тут можно связать кнопку с модалкой через дата атрибут, или находить модалку через .closest() если кнопка внутри неё.
Автор подскажите пожалуйста как правильно войти в бэкенд? Чтобы не сломаться невовремя, а то грузят всякой туфтой и очень сложно объясняют....
А что за плагин, который автоматически переводит слова, если написал не в той раскладке?
PuntoSwitcher - для Windows
вроде как табы и аккордеон с ошибками, если удалить блок то js плодит ошибки что не есть хоршоо
чтоб HTML не растягивать пора бы уж написать функцию на JS, которая генерирует любое кол-во модалок
2:55
Здравствуйте, Юрий. Ссылка на курс некорректная.
ua-cam.com/video/UFmZaNj6wyA/v-deo.html Это первая часть.
Константин, благодарю!) Поправил.
webcademy.ru/jscourse/
Ты ешь свой хлеб Уважаемый не зря
Я не IT-ник( просто интересно), непонятно, зачем такое нагромождение классов в аккордеоне и не проще вместо addEventListener использовать onclick?
Каждый класс отвечает за определенное свойство.
Можно и onclick использовать.
@@WebCademy Спасибо!
Интересно, настанет ли когда-нибудь такой день, когда я буду все это понимать!? Вроде человек по русски объясняет, а я сижу и смотрю как баран на новые ворота.
Когда я только начинал, мне очень сильно помогала нейросеть. Просто закидываешь в нее непонятный кусок кода (или вообще весь код, если он короткий) и она делает детальный разбор.
без дата-атрибутов никак?
Можно и без них, на CSS классах например. С дата-атрибутами удобно.
Мы нашим родителям не сообщаем что внутри нас кто то кликал. Звучит как то не очень.
Сначала уже не понятно как стилизовать контент,а значит смотреть бред да еще 2 часа не стоит.
чел, мб тебе похрен, но у меня изза твоих уроков скоро ожог сетчатки будет. Неужели так сложно приятный для глад бэкграунд-колор прописать??? без негатива(с негативом(без негатива))
И какой цвет вызывает такую реакцию? Белый, темно синий в редакторе или зеленый который был в браузере на фоне?
в 1 задание код можно сократить еще больше "content.classList.toggle('content-hidden') ? button.textContent = 'Открыть блок' : button.textContent = 'Закрыть блок';"
Для нескольких модалок написал более короткий код с одним forEach
const buttons = document.querySelectorAll("[data-modal-button]");
buttons.forEach(function (item) {
item.addEventListener("click", function () {
const modal = document.querySelector("#" + this.dataset.modalButton);
const buttonClose = modal.querySelector("[data-modal-close]");
//открываем модальное окно
modal.classList.remove("hidden");
//при клике на Закрыть окно закрываем это модальное окно
buttonClose.addEventListener("click", function () {
modal.classList.add("hidden");
});
//скрываем модалку по клику по фейду
modal.addEventListener("click", function () {
modal.classList.add("hidden");
});
// останавливаем всплытие
modal
.querySelector(".modal-window")
.addEventListener("click", function (e) {
e.stopPropagation();
});
});
});
Благодарен за уроки, лайк поставил.
Uncaught TypeError: Cannot read properties of undefined (reading 'toogle')
at HTMLDivElement.
Опечатка в classList - пишется с заглавной L
@@WebCademy Не знаю что и сказать.)) Спасибо Юр. Все таки перерывы нужно делать. Глаза просто незаметно мылятся.
@@user-gz3ce1qn4j Да, бывает))
Спасибо