- 169
- 2 661 650
Александр Дудукало
Russia
Приєднався 9 вер 2013
Тот самый канал про IT.
05. События. JavaScript для новичков - курс
В этом видео я делюсь способами добавления и удаления обработчиков событий, а также рассказываю, как отменять стандартное поведение элементов. Вы узнаете, что такое объект события и какие типы событий существуют.
События в JavaScript играют ключевую роль в создании интерактивных интерфейсов. Они позволяют пользователю взаимодействовать с сайтом: реагировать на клики, нажатия клавиш, прокрутку, изменение размеров окна и многое другое.
Размещайте проекты в гибком облаке Selectel: slc.tl/p13a5
Реклама. АО «Селектел», ИНН: 7810962785 Erid: 2VtzquhUSNz
📝 Домашняя работа: clck.ru/3D8gDj
Запасная ссылка: cutt.ly/9eEm8iiK
👁🗨 Телеграм: t.me/frontend_du2
👁🗨 Discord: discord.gg/frontend
👁🗨 VK: frontend
👁🗨 Дзен: dzen.ru/frontend
👁🗨 Rutube: rutube.ru/u/frontend
Теперь все мои выпуски в VK Видео: trk.mail.ru/c/ve1d2u6
Тайм-коды:
00:00 - Интро
01:04 - Проект
03:28 - Удаление обработчика события
05:32 - Объект события
09:47 - target
13:12 - preventDefault()
16:09 - addEventListener()
22:23 - removeEventListener()
23:46 - CI/CD (учим слова)
25:06 - События мыши
27:52 - hidden
28:27 - mouseover
30:11 - mouseout
31:08 - mousemove
32:51 - style
34:42 - mousedown
36:02 - mouseup
39:39 - События клавиатуры
39:55 - keydown
41:18 - keyup
44:09 - change
47:57 - focus
48:36 - blur
49:06 - scroll
42:54 - scrollTo() (прокрутка вверх)
54:56 - resize
57:02 - Финал
События в JavaScript играют ключевую роль в создании интерактивных интерфейсов. Они позволяют пользователю взаимодействовать с сайтом: реагировать на клики, нажатия клавиш, прокрутку, изменение размеров окна и многое другое.
Размещайте проекты в гибком облаке Selectel: slc.tl/p13a5
Реклама. АО «Селектел», ИНН: 7810962785 Erid: 2VtzquhUSNz
📝 Домашняя работа: clck.ru/3D8gDj
Запасная ссылка: cutt.ly/9eEm8iiK
👁🗨 Телеграм: t.me/frontend_du2
👁🗨 Discord: discord.gg/frontend
👁🗨 VK: frontend
👁🗨 Дзен: dzen.ru/frontend
👁🗨 Rutube: rutube.ru/u/frontend
Теперь все мои выпуски в VK Видео: trk.mail.ru/c/ve1d2u6
Тайм-коды:
00:00 - Интро
01:04 - Проект
03:28 - Удаление обработчика события
05:32 - Объект события
09:47 - target
13:12 - preventDefault()
16:09 - addEventListener()
22:23 - removeEventListener()
23:46 - CI/CD (учим слова)
25:06 - События мыши
27:52 - hidden
28:27 - mouseover
30:11 - mouseout
31:08 - mousemove
32:51 - style
34:42 - mousedown
36:02 - mouseup
39:39 - События клавиатуры
39:55 - keydown
41:18 - keyup
44:09 - change
47:57 - focus
48:36 - blur
49:06 - scroll
42:54 - scrollTo() (прокрутка вверх)
54:56 - resize
57:02 - Финал
Переглядів: 287
Відео
04. Планировщики setTimeout и setInterval. JavaScript для новичков - курс
Переглядів 60521 день тому
В этом уроки я простыми словами рассказываю, как планировать выполнение кода в JavaScript с помощью встроенных функций setTimeout() и setInterval(). На примере простого веб-приложения с напоминаниями показываю, как их использовать. Размещайте проекты в гибком облаке Selectel: slc.tl/p13a5 Реклама. АО «Селектел», ИНН: 7810962785 Erid: 2VtzqxMVmj2 📝 Домашняя работа: clck.ru/3CqPR2 Запасная ссылка...
03. Callback-функции. JavaScript для новичков - курс
Переглядів 1,6 тис.28 днів тому
В этом видео я простыми словами рассказываю о том, что такое коллбек-функции в JavaScript, и как их применять. Знание принципов работы с callback является ключом к пониманию работы этого языка программирования. Размещайте проекты в гибком облаке Selectel: slc.tl/p13a5 Реклама. АО «Селектел», ИНН: 7810962785 Erid: 2VtzquvVTg8 📝 Домашняя работа: clck.ru/3CWBsQ Запасная ссылка: cutt.ly/BevvHNZx 👁...
Ускорение ЮТУБ и обход блокировки для Windows и macOS | Как обойти блокировку YouTube в 2024?
Переглядів 19 тис.Місяць тому
Показываю, как ускорить UA-cam и обойти блокировку на Windows и macOS с помощью GoodbyeDPI и SpoofDPI. Это улучшит качество видео и сделает просмотр быстрым. Чиним UA-cam! 🚀 Решение для macOS: 1) Переходим на сайт: github.com/xvzc/SpoofDPI 2) В терминале вводим: curl -fsSL raw.githubusercontent.com/xvzc/SpoofDPI/main/install.sh | bash -s darwin-arm64 3) И так же: export PATH=$PATH:~/.spoof-dpi/...
02. Строки. JavaScript для новичков - курс
Переглядів 1,4 тис.Місяць тому
Обработка строк в JavaScript - это часто встречающаяся задача при разработке сайтов и веб-приложений. Валидация, исправление введённых данных, проверка наличия вредоносного кода в тексте, эти и многие другие проблемы решаются с помощью встроенных методов работы со строками. А в этом видео я объясняю, как именно они работают и показываю примеры их пользования. Размещайте проекты в гибком облаке ...
Полный Курс JavaScript для новичков. Урок 1: Ссылочные типы данных
Переглядів 3,3 тис.Місяць тому
В этом видео мы разберем основы JavaScript и поговорим о ссылочных типах данных. Это важнейший аспект языка, без которого сложно двигаться дальше. Я на простых примерах объясняю, как работают объекты, массивы и функции. Самое главное, как они присваиваются и передаются. Присоединяйтесь к курсу "JavaScript для новичков" и улучшайте свои навыки программирования вместе со мной! Размещайте проекты ...
Джуниор-разработчики в 2024. Кого берут на работу? Егор Бугаенко
Переглядів 19 тис.2 місяці тому
Говорим с Егором Бугаенко о проблеме поиска и устройства на работу в IT. Что писать в резюме, какую работу искать и почему джуниоры эффективнее, чем сеньоры. 📌 Канал Егора: @yegor256 📌 Блог: www.yegor256.com/ 📌 Телеграм: t.me/yegor256news 👁🗨 Телеграм: t.me/frontend_du2 👁🗨 Discord: discord.gg/frontend 👁🗨 VK: frontend 👁🗨 Дзен: dzen.ru/frontend 👁🗨 Rutube: rutube.ru/u/frontend Тайм-коды...
Основы React простым языком для новичков
Переглядів 4 тис.2 місяці тому
Вводный урок по JavaScript-билиотеке React для новичков. В этом видео я простым доступным языком показываю, как создавать и настраивать React-элементы. Рассказываю о JSX и добавлении компонентов. 👁🗨 Телеграм с исходниками: t.me/frontend_du2 👁🗨 Discord: discord.gg/frontend 👁🗨 VK: frontend 👁🗨 Дзен: dzen.ru/frontend 👁🗨 Rutube: rutube.ru/u/frontend
Тестовое собеседование #2. Вопрос по JavaScript на техническом интервью Junior Frontend разработчика
Переглядів 3,1 тис.4 місяці тому
Тестовое собеседование #2. Вопрос по JavaScript на техническом интервью Junior Frontend разработчика
Тестовое собеседование #1. Вопрос по JavaScript на техническом интервью Junior Frontend разработчика
Переглядів 10 тис.4 місяці тому
Тестовое собеседование #1. Вопрос по JavaScript на техническом интервью Junior Frontend разработчика
Vue.js для новичков простыми словами. Пишем первое приложение.
Переглядів 3,4 тис.5 місяців тому
Vue.js для новичков простыми словами. Пишем первое приложение.
Вёрстка адаптивного сайта для новичков по БЭМ с адаптивностью
Переглядів 12 тис.7 місяців тому
Вёрстка адаптивного сайта для новичков по БЭМ с адаптивностью
Война браузеров - Microsoft против Netscape. Битва за интернет
Переглядів 1,2 тис.8 місяців тому
Война браузеров - Microsoft против Netscape. Битва за интернет
Адаптивная верстка сайта с нуля с пояснениями. Макет Photography. Часть 2. Javascript
Переглядів 4,6 тис.9 місяців тому
Адаптивная верстка сайта с нуля с пояснениями. Макет Photography. Часть 2. Javascript
Создание игр на Javascript. Видео 5 - Искусственный интеллект
Переглядів 2,7 тис.10 місяців тому
Создание игр на Javascript. Видео 5 - Искусственный интеллект
Псевдоэлементы CSS ::after и ::before. Объяснение на примерах
Переглядів 5 тис.10 місяців тому
Псевдоэлементы CSS ::after и ::before. Объяснение на примерах
Игра в пары на Javascript. Самое понятное объяснение
Переглядів 8 тис.Рік тому
Игра в пары на Javascript. Самое понятное объяснение
Фиксированная шапка сайта. HTML+CSS+JS
Переглядів 6 тис.Рік тому
Фиксированная шапка сайта. HTML CSS JS
11. Объекты. Базовый Javascript - курс
Переглядів 6 тис.Рік тому
11. Объекты. Базовый Javascript - курс
10. Циклы и массивы. Базовый Javascript - курс
Переглядів 6 тис.Рік тому
10. Циклы и массивы. Базовый Javascript - курс
09. Boolean. Базовый Javascript - курс
Переглядів 4,3 тис.Рік тому
09. Boolean. Базовый Javascript - курс
08. Конструкция if...else. Базовый Javascript - курс
Переглядів 4,6 тис.Рік тому
08. Конструкция if...else. Базовый Javascript - курс
07. Элементы веб-страницы. Базовый Javascript - курс
Переглядів 7 тис.Рік тому
07. Элементы веб-страницы. Базовый Javascript - курс
06. Возврат из функции - return. Базовый Javascript - курс
Переглядів 9 тис.Рік тому
06. Возврат из функции - return. Базовый Javascript - курс
05. Функции. Базовый Javascript - курс
Переглядів 8 тис.Рік тому
05. Функции. Базовый Javascript - курс
03. Вывод и переменные. Базовый Javascript - курс
Переглядів 8 тис.Рік тому
03. Вывод и переменные. Базовый Javascript - курс
02. Настройка рабочей среды. Базовый Javascript - курс
Переглядів 7 тис.Рік тому
02. Настройка рабочей среды. Базовый Javascript - курс
топ как всегда 👍
Спасибо за понятное объяснение, желаю успехов каналу) Ваши видео всегда доходчиво объясняют
ученик спрашиваешь учителя - учитель, а как правильно писать имена переменных? могу ли я писать btn или inputEl? ... БАХ! БАХ! (слышатся удары чем то тяжелым по ученику) - вы что, буквы, сэкономленные на сокращении имен переменных в Африку отправляете детям, у которых не хватает букв? - орёт учитель. - вы почему так ненавидите бедных детей Африки? они же будут из алфавита знать только - u, o, e, m, n, t... вы понимаете, что в Африке уже горы из букв! вы что, торопитесь куда-то, сокращая "button" до "btn"? или вы старпёры из 90 годов, которые верстали на полумёртвом бутстрапе (учитель крестится и шепчет "покойся с миром!")? куда вы тратите эти сэкономленные 0,00078 наносекунды своей жизни? копите на 1 моргание в год?
ученик спрашивает у учителя - учитель, а когда надо использовать let, а когда const? - всё очень просто, мой юный ученик! - говорит учитель. - всегда пиши const ... БАХ! (слышится удар линейкой по рукам и завывания и слезы ученика) я сказал - всегда пиши const и только если ты на 289% уверен, что значение переменной будет изменяться - пиши let ... БАХ! (слышится смачный удар по затылку - уууу - воет ученик). - хорошо! - говорит учитель. - ляпота! Александр Дудукало ты запомнил? =)
Ролик - 🔥🔥🔥 Тоже, возможно, позже посмотрю, Александр очень круто объясняет! Всем успешного обучения! 👍☮️❤️
У вас нарушена логика обработки данных, так как вы пишите: «Ролик огонь 🔥 🔥 🔥!» Однако само событие просмотра, после которого можно было бы сделать вывод об огне еще не состоялось. Пофиксить!!!
Ролик отличный. Я обязательно потом посмотрю 😇😇😇
то что надо! лайк однозначно очень информативно и понятно
Спасибо! Все очень понятно и интересно! Продолжайте также плиз Ваши собеседования по JS. Еще хотелось бы обучающих видео по React JS.
Спасибо за комментарий. Я рад, что видео вам понравилось :) Да, думаю скоро будет новое собеседование :) Так же в планах реак. Много времени уходит на работу по курсу, но про реакт тоже хочется делать видео.
Как всегда на отличном уровне ! Вы всегда выпускаете видео для новичков а когда уже будет видео уже в продвинутом js , react либо vue ??? Очень жду 🙏
Да, думаю мне стоит разбавлять контент более продвинутыми темами. Курс - это серия роликов, которую хочется скорее его завершить, что бы можно было с чистой совестью перейти к продвинутыми темам :).
на маке уже не работает, последняя команда по запуску dpi не пашет...
отличный урок по БЭМ, наконец-то стало все понятно, спасибо, Александр!
Большое спасибо за такой приятный комментарий :)
База из пайчарма
Спасибо огромное, Александр, очень полезное видео, пазл постепенно складывается :)))
спасибо тебе большое
От души
Отличные советы джунам, на мой взгляд. Я сам прошел подобный путь неосознанно и могу сказать, что это работает. Спасибо!
Видно, что человек увлеченный, рассказывает очень складно и красиво, но к сожалению оторванный от реальности мечтатель, он потенциальным учителям математики говорит, что они все должны стать Перельманом.
У меня просто не запускается. При запуске файла 1_russia_blacklist выдает ошибку и пишет:" Не удается найти goodbyedpi.exe".
Егор, такой Егор!!! "Ну соврите вы, вы же ради благого дела!"
Очень крутое видео )
Рад, что видео вам понравилось :) Спасибо за комментарий
Фигня
Эта утилита ломает интернет на MacBook , потом только заново переустанавливать систему😢
смотрю с ноута
Спасибо огромное за ваши обучающие ролики, Александр
Спасибо вам за комментарий с поддержкой :) Рад, что вы смотрите
На 7 винде сработает?
На Windows 7 протестировать пока возможности не было :(
@@alex_dudukalo не сработало, считайте, что протестировали.))
Работает. Спасибо, друг.
Я рад, что видео было полезным :)
Здравствуйте, Александр ! Смотрю вас с удовольствием. Учусь у вас. Всё просто и понятно.
Здравствуйте, большое спасибо за ваш комментарий :) Я рад, что вы смотрите ролики и что видео помогает разобраться с темой. Приятно :)
Объясните чем отличаются visual studio и visual code?
Объясните чем отличаются visual studio и visual code?
мой лайк 500
Да )) Приятное число :) Спасибо за лайк и комментарий
@@alex_dudukalo я бы если бы мог, руку тебе пожал, ты пипец как помогаешь в обучении
Потрясающе. Такого треша я еще не слышала : сначала станьте кем-то а потом пытайтесь зарабатывать. Ага, проходили, после 40 с 20-летним опытом вы уже никому не будете нужны и причина неизвестна. То ли избыточный опыт, то ли возраст. Но вот все хотят молодых и борзых и те которые мало просят😅
давненько столько воды мне не лили конечно. на 1.5 часа
Очень хорошо все разложил, приятно слушать.
только в твоем видео понял что такое await, в школе не потрудились так доходчиво объяснить, просто запомнил это слово... а щас я понял его сущьность и теперь я могу его использовать по полной в своих идеях
Спасибо. Жду с нетерпением новых уроков по JS.
Автор молодец не бросает канал и выкладывает качественный контент. Респект
Большое спасибо за такую поддержку 😇 Буду работать
Command not found что делать???
красава, с твоих слов все становится понятно с первого раза, не то что в моей онлайн школе, по 10 раз смотришь курс и в итоге взгляд на домашку как у барана на новые ворота. Щас запилю код и моя прога взлетит, наконец-то
можно 19 раз умереть пока это всё сделаешь
Спасибо огромное!!!
А что мешает простым данным быть ссылочным.
бро потратил эти секунды на саморазвитие
Оба видео супер! Посмотрел, понял)
У кого не воспроизводит звук, проблема в Политике автозапуска в Chrome. Я решил проблему записью переменных analyser и frequencyData после нажатия на кнопку play const columnGap = 10 const canvas = document.getElementById('player-fireplace') const playerBtn = document.getElementById('player-btn') const audioPlayer = document.getElementById('audio-player') audioPlayer.volume = 0.1 const ctx = canvas.getContext('2d') // Работа с аудио let arr = [333,123,30,123, 223, 333] let columnCount = 1024 //canvas window.addEventListener('resize', resizeCanvas, false) function resizeCanvas(){ canvas.width = window.innerWidth / 2 canvas.height = window.innerHeight / 2 } resizeCanvas() function drawColumn(x, width, height){ const gradient = ctx.createLinearGradient(0, canvas.height - height / 2 , 0, canvas.height) gradient.addColorStop(1, "rgb(255,255,255,1") gradient.addColorStop(0.9, "rgb(255,150,0,1") gradient.addColorStop(0, "rgb(255,0,0,1") ctx.fillStyle = gradient ctx.fillRect(x, canvas.height - height / 2, width, height) } let analyser = null let frequencyData = null function setAnalyser(){ let audioCtx = new (window.AudioContext || window.webkitAudioContext)() let source = audioCtx.createMediaElementSource(audioPlayer) analyser = audioCtx.createAnalyser() analyser.fftSize = columnCount source.connect(analyser) // Подключаем анализатор к аудио analyser.connect(audioCtx.destination) // Без этой строки нет звука но анализатор работает frequencyData = new Uint8Array(analyser.frequencyBinCount) } // Работа с плеером playerBtn.addEventListener('click', ()=>{ if(!analyser){ setAnalyser() window.requestAnimationFrame(render) } console.log(playerBtn.classList.contains('player-btn__play')) if (!playerBtn.classList.contains('player-btn__play')){ playerBtn.textContent = 'Pause' playerBtn.classList.add('player-btn__play') audioPlayer.play() }else{ playerBtn.textContent = 'Play' playerBtn.classList.remove('player-btn__play') audioPlayer.pause() } }) // render function render(){ analyser.getByteFrequencyData(frequencyData) // Записываем в массив данные уровня частот ctx.clearRect(0,0, canvas.width, canvas.height) const columnWidth = (canvas.width / frequencyData.length) - columnGap + (columnGap / frequencyData.length) const heightScale = canvas.height / 100 let xPos = 0 for (let i = 0; i < frequencyData.length; i++){ let columnHeight = frequencyData[i] * heightScale drawColumn(xPos, columnWidth, columnHeight / 2) xPos += columnWidth + columnGap } window.requestAnimationFrame(render) }
Похоже, что эта программа ускорения уже больше не работает.
Как же плохо когда ютуб тормозит😢
Говно
Я вот сейчас сижу и занимаюсь, Александр уопмянул про забытую запятую и сделал это настолько честно, мол "ой, как вышло". Не передать как открывается человек даже в таких мелочах. Про контент я вообще молчу, Вы будто интуитивно понимаете. Бывало повторяешь, сам запутался, а тут тебе объяснение "смотрите: я сделал это, чтобы то сделало так, а это все относится к этой переменной" ОГРОМНЕЙШЕЕ СПАСИБО!
OSX Run spoofdpi and it will automatically set your proxy Сейчас написано на гитхабе, но как его запусить((((((
Сначала не работало и тормозило, даже сайт ютюба грузился долго. Но спустя какое-то время таки запустилось видео