Александр Дудукало
Александр Дудукало
  • 169
  • 2 661 650
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 - Финал
Переглядів: 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. Объяснение на примерах
БЭМ - простыми словами. Часть 2
Переглядів 5 тис.11 місяців тому
БЭМ - простыми словами. Часть 2
БЭМ - простыми словами. Часть 1
Переглядів 15 тис.11 місяців тому
БЭМ - простыми словами. Часть 1
Игра в пары на 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 - курс
04. Ввод. Базовый Javascript - курс
Переглядів 6 тис.Рік тому
04. Ввод. Базовый Javascript - курс
03. Вывод и переменные. Базовый Javascript - курс
Переглядів 8 тис.Рік тому
03. Вывод и переменные. Базовый Javascript - курс
02. Настройка рабочей среды. Базовый Javascript - курс
Переглядів 7 тис.Рік тому
02. Настройка рабочей среды. Базовый Javascript - курс

КОМЕНТАРІ

  • @daniil537
    @daniil537 10 годин тому

    топ как всегда 👍

  • @talkhinr
    @talkhinr 10 годин тому

    Спасибо за понятное объяснение, желаю успехов каналу) Ваши видео всегда доходчиво объясняют

  • @hjetwd
    @hjetwd 11 годин тому

    ученик спрашиваешь учителя - учитель, а как правильно писать имена переменных? могу ли я писать btn или inputEl? ... БАХ! БАХ! (слышатся удары чем то тяжелым по ученику) - вы что, буквы, сэкономленные на сокращении имен переменных в Африку отправляете детям, у которых не хватает букв? - орёт учитель. - вы почему так ненавидите бедных детей Африки? они же будут из алфавита знать только - u, o, e, m, n, t... вы понимаете, что в Африке уже горы из букв! вы что, торопитесь куда-то, сокращая "button" до "btn"? или вы старпёры из 90 годов, которые верстали на полумёртвом бутстрапе (учитель крестится и шепчет "покойся с миром!")? куда вы тратите эти сэкономленные 0,00078 наносекунды своей жизни? копите на 1 моргание в год?

  • @hjetwd
    @hjetwd 11 годин тому

    ученик спрашивает у учителя - учитель, а когда надо использовать let, а когда const? - всё очень просто, мой юный ученик! - говорит учитель. - всегда пиши const ... БАХ! (слышится удар линейкой по рукам и завывания и слезы ученика) я сказал - всегда пиши const и только если ты на 289% уверен, что значение переменной будет изменяться - пиши let ... БАХ! (слышится смачный удар по затылку - уууу - воет ученик). - хорошо! - говорит учитель. - ляпота! Александр Дудукало ты запомнил? =)

  • @952a259
    @952a259 12 годин тому

    Ролик - 🔥🔥🔥 Тоже, возможно, позже посмотрю, Александр очень круто объясняет! Всем успешного обучения! 👍☮️❤️

    • @darkmatter2075
      @darkmatter2075 11 годин тому

      У вас нарушена логика обработки данных, так как вы пишите: «Ролик огонь 🔥 🔥 🔥!» Однако само событие просмотра, после которого можно было бы сделать вывод об огне еще не состоялось. Пофиксить!!!

  • @viachslav-dev
    @viachslav-dev 12 годин тому

    Ролик отличный. Я обязательно потом посмотрю 😇😇😇

  • @user-sc1zs5mt5s
    @user-sc1zs5mt5s 12 годин тому

    то что надо! лайк однозначно очень информативно и понятно

  • @user-lc5fi3iw1k
    @user-lc5fi3iw1k 15 годин тому

    Спасибо! Все очень понятно и интересно! Продолжайте также плиз Ваши собеседования по JS. Еще хотелось бы обучающих видео по React JS.

    • @alex_dudukalo
      @alex_dudukalo 14 годин тому

      Спасибо за комментарий. Я рад, что видео вам понравилось :) Да, думаю скоро будет новое собеседование :) Так же в планах реак. Много времени уходит на работу по курсу, но про реакт тоже хочется делать видео.

  • @Se7eN_time
    @Se7eN_time 15 годин тому

    Как всегда на отличном уровне ! Вы всегда выпускаете видео для новичков а когда уже будет видео уже в продвинутом js , react либо vue ??? Очень жду 🙏

    • @alex_dudukalo
      @alex_dudukalo 14 годин тому

      Да, думаю мне стоит разбавлять контент более продвинутыми темами. Курс - это серия роликов, которую хочется скорее его завершить, что бы можно было с чистой совестью перейти к продвинутыми темам :).

  • @RaiFuL92
    @RaiFuL92 День тому

    на маке уже не работает, последняя команда по запуску dpi не пашет...

  • @kosmonavt980
    @kosmonavt980 День тому

    отличный урок по БЭМ, наконец-то стало все понятно, спасибо, Александр!

    • @alex_dudukalo
      @alex_dudukalo 14 годин тому

      Большое спасибо за такой приятный комментарий :)

  • @user-tf5xp5om1r
    @user-tf5xp5om1r День тому

    База из пайчарма

  • @kosmonavt980
    @kosmonavt980 День тому

    Спасибо огромное, Александр, очень полезное видео, пазл постепенно складывается :)))

  • @laitaichiks
    @laitaichiks 2 дні тому

    спасибо тебе большое

  • @user-ls6og7kx9w
    @user-ls6og7kx9w 2 дні тому

    От души

  • @user-gs7ro3tl9t
    @user-gs7ro3tl9t 2 дні тому

    Отличные советы джунам, на мой взгляд. Я сам прошел подобный путь неосознанно и могу сказать, что это работает. Спасибо!

  • @redgiebelofonte175
    @redgiebelofonte175 3 дні тому

    Видно, что человек увлеченный, рассказывает очень складно и красиво, но к сожалению оторванный от реальности мечтатель, он потенциальным учителям математики говорит, что они все должны стать Перельманом.

  • @Itez01
    @Itez01 3 дні тому

    У меня просто не запускается. При запуске файла 1_russia_blacklist выдает ошибку и пишет:" Не удается найти goodbyedpi.exe".

  • @mike-aaa
    @mike-aaa 3 дні тому

    Егор, такой Егор!!! "Ну соврите вы, вы же ради благого дела!"

  • @user-lf1ew8gn5p
    @user-lf1ew8gn5p 4 дні тому

    Очень крутое видео )

    • @alex_dudukalo
      @alex_dudukalo 3 дні тому

      Рад, что видео вам понравилось :) Спасибо за комментарий

  • @alexprodark9371
    @alexprodark9371 4 дні тому

    Фигня

  • @user-to8ks7nj6w
    @user-to8ks7nj6w 4 дні тому

    Эта утилита ломает интернет на MacBook , потом только заново переустанавливать систему😢

  • @kosmonavt980
    @kosmonavt980 4 дні тому

    смотрю с ноута

  • @kosmonavt980
    @kosmonavt980 4 дні тому

    Спасибо огромное за ваши обучающие ролики, Александр

    • @alex_dudukalo
      @alex_dudukalo 4 дні тому

      Спасибо вам за комментарий с поддержкой :) Рад, что вы смотрите

  • @user-hu8uw3fr6m
    @user-hu8uw3fr6m 5 днів тому

    На 7 винде сработает?

    • @alex_dudukalo
      @alex_dudukalo 4 дні тому

      На Windows 7 протестировать пока возможности не было :(

    • @user-hu8uw3fr6m
      @user-hu8uw3fr6m 4 дні тому

      @@alex_dudukalo не сработало, считайте, что протестировали.))

  • @user-hu8uw3fr6m
    @user-hu8uw3fr6m 5 днів тому

    Работает. Спасибо, друг.

    • @alex_dudukalo
      @alex_dudukalo 4 дні тому

      Я рад, что видео было полезным :)

  • @user-wh2ph2wu3p
    @user-wh2ph2wu3p 5 днів тому

    Здравствуйте, Александр ! Смотрю вас с удовольствием. Учусь у вас. Всё просто и понятно.

    • @alex_dudukalo
      @alex_dudukalo 4 дні тому

      Здравствуйте, большое спасибо за ваш комментарий :) Я рад, что вы смотрите ролики и что видео помогает разобраться с темой. Приятно :)

  • @Pomapupsik
    @Pomapupsik 5 днів тому

    Объясните чем отличаются visual studio и visual code?

  • @Pomapupsik
    @Pomapupsik 5 днів тому

    Объясните чем отличаются visual studio и visual code?

  • @valentine1408sensor
    @valentine1408sensor 5 днів тому

    мой лайк 500

    • @alex_dudukalo
      @alex_dudukalo 4 дні тому

      Да )) Приятное число :) Спасибо за лайк и комментарий

    • @valentine1408sensor
      @valentine1408sensor 3 дні тому

      @@alex_dudukalo я бы если бы мог, руку тебе пожал, ты пипец как помогаешь в обучении

  • @777camry777
    @777camry777 5 днів тому

    Потрясающе. Такого треша я еще не слышала : сначала станьте кем-то а потом пытайтесь зарабатывать. Ага, проходили, после 40 с 20-летним опытом вы уже никому не будете нужны и причина неизвестна. То ли избыточный опыт, то ли возраст. Но вот все хотят молодых и борзых и те которые мало просят😅

  • @KlnoOrange
    @KlnoOrange 5 днів тому

    давненько столько воды мне не лили конечно. на 1.5 часа

  • @ArgusCrew
    @ArgusCrew 5 днів тому

    Очень хорошо все разложил, приятно слушать.

  • @valentine1408sensor
    @valentine1408sensor 5 днів тому

    только в твоем видео понял что такое await, в школе не потрудились так доходчиво объяснить, просто запомнил это слово... а щас я понял его сущьность и теперь я могу его использовать по полной в своих идеях

  • @SandyWinman
    @SandyWinman 6 днів тому

    Спасибо. Жду с нетерпением новых уроков по JS.

  • @user-gd1rd8om4n
    @user-gd1rd8om4n 6 днів тому

    Автор молодец не бросает канал и выкладывает качественный контент. Респект

    • @alex_dudukalo
      @alex_dudukalo 6 днів тому

      Большое спасибо за такую поддержку 😇 Буду работать

  • @user-bj5wj3np7m
    @user-bj5wj3np7m 6 днів тому

    Command not found что делать???

  • @valentine1408sensor
    @valentine1408sensor 7 днів тому

    красава, с твоих слов все становится понятно с первого раза, не то что в моей онлайн школе, по 10 раз смотришь курс и в итоге взгляд на домашку как у барана на новые ворота. Щас запилю код и моя прога взлетит, наконец-то

  • @user-qh7be3mm1v
    @user-qh7be3mm1v 7 днів тому

    можно 19 раз умереть пока это всё сделаешь

  • @JamoliddinIloldinov
    @JamoliddinIloldinov 7 днів тому

    Спасибо огромное!!!

  • @user-ky7ur8ih3w
    @user-ky7ur8ih3w 7 днів тому

    А что мешает простым данным быть ссылочным.

  • @femboyPig
    @femboyPig 8 днів тому

    бро потратил эти секунды на саморазвитие

  • @trampai
    @trampai 8 днів тому

    Оба видео супер! Посмотрел, понял)

  • @AlexSell321
    @AlexSell321 9 днів тому

    У кого не воспроизводит звук, проблема в Политике автозапуска в 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) }

  • @sambream5223
    @sambream5223 10 днів тому

    Похоже, что эта программа ускорения уже больше не работает.

  • @user-vd8vv4yd9m
    @user-vd8vv4yd9m 11 днів тому

    Как же плохо когда ютуб тормозит😢

  • @user-ox8sn2ic3x
    @user-ox8sn2ic3x 11 днів тому

    Говно

  • @user-yb3xj7yh9c
    @user-yb3xj7yh9c 11 днів тому

    Я вот сейчас сижу и занимаюсь, Александр уопмянул про забытую запятую и сделал это настолько честно, мол "ой, как вышло". Не передать как открывается человек даже в таких мелочах. Про контент я вообще молчу, Вы будто интуитивно понимаете. Бывало повторяешь, сам запутался, а тут тебе объяснение "смотрите: я сделал это, чтобы то сделало так, а это все относится к этой переменной" ОГРОМНЕЙШЕЕ СПАСИБО!

  • @Shevchenkoserj
    @Shevchenkoserj 11 днів тому

    OSX Run spoofdpi and it will automatically set your proxy Сейчас написано на гитхабе, но как его запусить((((((

  • @RuslanaRovdo
    @RuslanaRovdo 11 днів тому

    Сначала не работало и тормозило, даже сайт ютюба грузился долго. Но спустя какое-то время таки запустилось видео