Практическое программирование на JavaScript для новичков и верстальщиков
HTML-код
- Опубликовано: 3 авг 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 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 05 Августа 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 12 Августа 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
Спасибо за урок. Знаете, я много пересмотрел всяких уроков на ютубе, практически всех более-менее известных верстальщиков. У каждого есть свои особенности. Но ваш метод донесения информации мне нравится более всего. С одной стороны вы не перегружаете новичков избыточной информацией, которую сложно переварить, а с другой стороны объясняете очень просто. Вы отличный учитель. Спасибо, вам, Юрий!
Спасибо, даже мне, с моими шестидесятилетними мозгами, понятно стало настолько, что код уже самостоятельно написать смогла, а потом только проверяла по видео. Не все в точности как в видео сделала, но ведь сделала! Раньше и такого не было. Это вдохновляет!
Спасибо Юрий! Все очень добросовестно, аккуратно, доходчиво. Вы прирожденный учитель🏆
Это первое видео, которое я посмотрел и понял, зачем пишут определенные строки кода.
Я считаю - глупо переписывать строки, если ты не понимаешь, зачем они пишутся. Это первый преподаватель, который объясняет свои действия так, что понятна буквально КАЖДАЯ строка.
Тоже обратил внимание, что поясняет очень многое.
+1 ему к успеху 😁
Супер, спасибо !!!!
Невероятный урок, огромное спасибо вам. Сегодня реально на практике пригодилось. Нужно было сделать модальное окно на чистом JS и, благодаря вам, всё получилось реализовать.
Супер!!! Обаятельний дядечка 😄!! У меня все получилось!!! С Вами все понятно, СУПЕР, СПАСИБО ЧТО СОЗДАЛИ КАНАЛ!! ЛУЧШИЙ КОНТЕНТ!!!
Супер, хотим еще такие видосы на тему js!!!
Супер! Спасибо за урок!
Спасибо за урок.Интересно и понятно
Супер, все понятно объяснил!💪👍
Юрий огромное спасибо. Ваши уроки дают мне надежду изменить свою жизнь к лучшему.
Спасибо. Познавательно и интересно.
Огромное спасибо!
Почерпнул много полезного.
Продолжайте дальше в том же духе.
Юрий , спасибо Вам. Урок был интересный и полезный =) Всё не зря !
Спасибо, что всегда оставляете код в открытом доступе, это очень помогает.
От души! Ты лучший!))) Обязательно, дай Бог😇🙏, куплю у вас обучалку!
вауууууу. эмоции. только эмоции. это круто! пазлы сошлись. до этого смотрела и пыталась вникнуть в 6-часовой урок по js и не могла понять, как это применять. и вот теперь оно доходит 😆😆😆 это реально прикольно! Спасибо за Ваши уроки!
Спасибо за урок! Было очень полезно и интересно!
Добрый день! Учусь js на Я...се (платно) вот уже 6 месяцев, и многое что они не способны объяснить за 6 месяцев - вы объяснили за 2 часа. Учитель это не профессия, учитель это призвание! Вы учитель по призванию, спасибо!
Очень подробное и понятное объяснение, аналогии понятные
Огонь! Спасибо огромное за труды! Хотелось бы больше видео по JavaScript. Создание toDo-приложения, создание обычного калькулятора и т.д.
Спасибо большое за ваш контент!
спасибо за урок!
очень хорошее и подробное объяснение
Вы очень круто все разжевываете !!! Смотреть одно удовольствие)
Юрий, Вы лучший! Спасибо огромное за Ваши уроки и бесценный труд!
ОГРОМНОЕ Спасибо за годный контент!
Благодарю друг , хорошо излагаешь.
Отличный контент, спасибо за видео
Про модалку реально полезно. Зачёт!
Спасибо за урок
Спасибо за видео!!!
Огнище) мне не было еще настолько понятно все)
Осталось запомнить все это))
Хороший ролик. Очень доступный, подробный
и наглядный
Спасибо большое вам огромное спасибо что помогаете нам за безценный труд
Добрый день, огромное спасибо за такое доступное и понятное объяснение материала. Никакой воды и заумных фраз - все четко и понятно, и как результат - отлично работающий фунционал сайта. Еще раз спасибо.
Класс! То что и искал)
Лучший урок который я нашел на ютубе, спасибо Вам большое!
Отличный контент. Все доходчиво объясняете. Сразу понятно для чего какой метод и какая тут логика. Спасибо
Юрий, класс, вообще считаю без лести и преувеличения, Вас одним из лучших в инете, кто преподает и обучает Вебу. Желаю дальнейших творческих успехов и достижений, максимальной реализации всего задуманного!
Очень годный контент!!!!
Супер урок! Очень полезный!
спасибо за урок
Спасибо за уроки, все очень просто и понятно объясняете, для новичков то что нужно.
Уроки суперские. Понятно с полуслова. Разжовано предельно допустимо.
спасибо за видео
Здравствуйте! Видео урок был отличным! Хотелось бы увидеть урок про ToDoList и React JS! Спасибо! Жду новых и отличных уроков!!!
Благодарю Вас!🙏🏼💕
Жаль, что на таком хорошем канале так мало подписчиков и просмотров. Достойный материал
Отличное изложение материала! Очень рад что набрёл на это Ваше видео. С удовольствием прослушал и проработал. Подписался на канал. Большое спасибо!
спасибо отлично получилось
лучший видео урок спасибо Автору канала!!!
Я редко пишу комментарий, но для вас сделаю исключение и хочу поблагодарить вас за проделанную работу!
Рад что было полезно!)
Спасибо
от души за это
Топ контент для новичков, спасибо
спасибо)
Офигенно.
Юрка спасибо
Официально лучшее видео
спасибо!
Красавчик
Ти лучший посибо !
здравствуйте спасибо за урок. отличный урок. вам надо поработат над звуком плохо слышна
сразу подписался
спасибо за ваш труд! это очень доходчиво и интересно, где ещё можно найти подобные видео, чтобы так просто объясняли?
очень сильно,что первая что вторая часть
респект вам! после просмотра 11-ти часов теории и неудач в codewars, наконец-то хорошая практика! Не могли бы вы посоветовать, где ещё попрактиковаться можно новичку? 😉
брат, ты тоже проходил этот курс на 11ч на ютубе?😢😂 уважаю
@@mickeymr4951 ага, вот 11 месяцев прошло я уже всё, что захочу в js сделать могу, этот курс реально помог, но важно дальше двигаться, я после прохождения забыл половину, главное практиковаться
@@keepcalmandcodeon. ты огромный молодец!!! спасибо за ответ, такое очень вдохновляет :З я вот только закончила основы, сейчас в практику вкатываюсь)
@@mickeymr4951 спасибо, основа - самое сложное, дальше всё намного легче)) удачи тебе! всё получится!)
Юрий, подскажите пожалуйста , когда вы пишите блок кода, например, что за рамочка такая вокруг, неполная, как её установить в VS code?
Почему не продолжаете плейлист?хотелось бы посмотреть и повторить Ваши примеры интерактивности на верстке.
++++++
Спасибо! Очень классное видео, очень познавательно! Но слишком часто взаимодействуете с console.log - перебор! Не хватает видео про слайдер-карусель, ну только не обычный со стрелками и точками, а на основе плагина swiper (адаптивный).
Ведь начинающий разработчик должен знать как написать аккордеон, табы, селекты, модалки, слайдер.
Вообще супер подача материала!
45:03 я не пойму, если мы функцию выносим отдельно, как this понимает на что ссылаться? Или типо из-за того, что мы передали ее аргументом в item, функция понимает что this это item ?
Еще одно отличное видео ,скажите а почему в первом видео ,не рассказали про стрелочные фу-ций,везде читаю что их всегда используют.
Расскажем в серии роликов по JS.
Скажите, пожалуйста, как можно заменить "#", если указаны классы вместо id в конструкции let contentBox = document.querySelector( "#" + this.dataset.btn);
. - для CSS классов. Посмотрите ролик JS за 6 часов на канале, там в начале есть про селекторы.
Как отключить синее подчеркивание в VS Code?
Появляется под словами на русском языке или тексте с использованием lorem
Лучше делать функции открытия и закрытия модалки, а далее вешать на кнопки.
Это удобно если послед загрузки страницы надо открыть модалку спустя какое-то время, не кликая.
Ну или после успешной отправки формы открыть модалку с информацией.
Пример:
setTimeout(modalOpen(modal-id), 3000)
Да, для универсальной модалки методы открытия, закрытия будут полезны. В этом уроке базовый пример модалки и работа с DOM для верстальщика.
После успешной отправки формы лучше открывать не по таймауту, а после получение ответа от сервера о том что данные действительно получены.
пишу все по видео почему то button в консоле не выходит подскажите пожалуйста в чем проблема
чтоб HTML не растягивать пора бы уж написать функцию на JS, которая генерирует любое кол-во модалок
Спасибо за урок!
Но у меня вопрос.
Как сделать так, чтобы было сразу две одновременно модалки, но они одновременно не закрывались?
Кнопка закрытия должна закрывать только ту модалку к которой она принадлежит. Тут можно связать кнопку с модалкой через дата атрибут, или находить модалку через .closest() если кнопка внутри неё.
А что за плагин, который автоматически переводит слова, если написал не в той раскладке?
PuntoSwitcher - для Windows
Автор подскажите пожалуйста как правильно войти в бэкенд? Чтобы не сломаться невовремя, а то грузят всякой туфтой и очень сложно объясняют....
вроде как табы и аккордеон с ошибками, если удалить блок то js плодит ошибки что не есть хоршоо
2:55
Здравствуйте, Юрий. Ссылка на курс некорректная.
ruclips.net/video/UFmZaNj6wyA/видео.html Это первая часть.
Константин, благодарю!) Поправил.
webcademy.ru/jscourse/
Ты ешь свой хлеб Уважаемый не зря
Я не IT-ник( просто интересно), непонятно, зачем такое нагромождение классов в аккордеоне и не проще вместо addEventListener использовать onclick?
Каждый класс отвечает за определенное свойство.
Можно и onclick использовать.
@@WebCademy Спасибо!
Интересно, настанет ли когда-нибудь такой день, когда я буду все это понимать!? Вроде человек по русски объясняет, а я сижу и смотрю как баран на новые ворота.
Когда я только начинал, мне очень сильно помогала нейросеть. Просто закидываешь в нее непонятный кусок кода (или вообще весь код, если он короткий) и она делает детальный разбор.
без дата-атрибутов никак?
Можно и без них, на CSS классах например. С дата-атрибутами удобно.
Мы нашим родителям не сообщаем что внутри нас кто то кликал. Звучит как то не очень.
Сначала уже не понятно как стилизовать контент,а значит смотреть бред да еще 2 часа не стоит.
чел, мб тебе похрен, но у меня изза твоих уроков скоро ожог сетчатки будет. Неужели так сложно приятный для глад бэкграунд-колор прописать??? без негатива(с негативом(без негатива))
И какой цвет вызывает такую реакцию? Белый, темно синий в редакторе или зеленый который был в браузере на фоне?
Для нескольких модалок написал более короткий код с одним 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();
});
});
});
Благодарен за уроки, лайк поставил.
в 1 задание код можно сократить еще больше "content.classList.toggle('content-hidden') ? button.textContent = 'Открыть блок' : button.textContent = 'Закрыть блок';"
Uncaught TypeError: Cannot read properties of undefined (reading 'toogle')
at HTMLDivElement.
Опечатка в classList - пишется с заглавной L
@@WebCademy Не знаю что и сказать.)) Спасибо Юр. Все таки перерывы нужно делать. Глаза просто незаметно мылятся.
@@user-gz3ce1qn4j Да, бывает))
Спасибо