Всплытие и погружение
Всплытие (bubbling) и погружение (capturing) являются двумя основными механизмами обработки событий в JavaScript, определяющими порядок, в котором события должны быть обработаны. Эти механизмы позволяют определить, как событие распространяется через DOM-дерево.
Всплытие - это процесс, при котором событие начинается с самого внутреннего элемента, на котором произошло событие, и продолжает распространение вверх по DOM-дереву до его корня. Например, если пользователь кликает на кнопку, событие сначала срабатывает на кнопке, затем на её родительском элементе, и так далее вверх, до элемента <html>.
Погружение - это процесс, обратный всплытию. Событие сначала перехватывается на самом верхнем уровне (например, у элемента <html>) и затем распространяется вниз по DOM-дереву до элемента, на котором произошло событие. Для активации перехвата необходимо в третьем аргументе метода addEventListener передать значение true.
Важно понимать, что по умолчанию события в JavaScript ведут себя согласно механизму всплытия. Однако, можно управлять этим поведением, используя третий параметр addEventListener. Если передать false, обработчик будет вызван при всплытии события. Если передать true, обработчик будет вызван на этапе перехвата.
Также существует метод stopPropagation(), который можно вызвать на объекте события для предотвращения дальнейшего распространения текущего события. Это полезно, когда необходимо избежать обработки события на других элементах.
#bubbling #capturing #JavaScript #DOM
Всплытие (bubbling) и погружение (capturing) являются двумя основными механизмами обработки событий в JavaScript, определяющими порядок, в котором события должны быть обработаны. Эти механизмы позволяют определить, как событие распространяется через DOM-дерево.
Всплытие - это процесс, при котором событие начинается с самого внутреннего элемента, на котором произошло событие, и продолжает распространение вверх по DOM-дереву до его корня. Например, если пользователь кликает на кнопку, событие сначала срабатывает на кнопке, затем на её родительском элементе, и так далее вверх, до элемента <html>.
Погружение - это процесс, обратный всплытию. Событие сначала перехватывается на самом верхнем уровне (например, у элемента <html>) и затем распространяется вниз по DOM-дереву до элемента, на котором произошло событие. Для активации перехвата необходимо в третьем аргументе метода addEventListener передать значение true.
Важно понимать, что по умолчанию события в JavaScript ведут себя согласно механизму всплытия. Однако, можно управлять этим поведением, используя третий параметр addEventListener. Если передать false, обработчик будет вызван при всплытии события. Если передать true, обработчик будет вызван на этапе перехвата.
Также существует метод stopPropagation(), который можно вызвать на объекте события для предотвращения дальнейшего распространения текущего события. Это полезно, когда необходимо избежать обработки события на других элементах.
#bubbling #capturing #JavaScript #DOM
👍14
Как выжить и получить оффер фронтендеру?
Поиск работы — игра, в которой выживает сильнейший. Потраченное время, сотни откликов, десятки собеседований и зачастую никакого результата🥲
Но эту систему можно хакнуть! Главное —
1️⃣ Научиться правильно презентовать свой опыт
2️⃣ Выписать вопросы, которые чаще всего задают на собеседованиях и потренироваться отвечать на них
3️⃣ Понять, как мыслят проверяющие при оценке тестового задания, на что важно обратить внимание при его решении
4️⃣ Определить, на прокачке каких навыков нужно сфокусироваться в первую очередь.
С этими задачами помогут наши партнеры — Solvery. На следующей неделе ребята проводят Frontend Fest по трудоустройству!
📆 Расписание феста:
25.03 в 18:30 — Из чего состоит получение оффера? Необходимые скиллы, советы по резюме и воронка найма
26.03 в 19:00 — Разбор решений тестового задания
27.03 в 19:00 — Моковое собеседование по JavaScript
28.03 в 19:00 — Разбор резюме
Переходите по ссылке, чтобы зарегистрироваться на фест!
Поиск работы — игра, в которой выживает сильнейший. Потраченное время, сотни откликов, десятки собеседований и зачастую никакого результата🥲
Но эту систему можно хакнуть! Главное —
1️⃣ Научиться правильно презентовать свой опыт
2️⃣ Выписать вопросы, которые чаще всего задают на собеседованиях и потренироваться отвечать на них
3️⃣ Понять, как мыслят проверяющие при оценке тестового задания, на что важно обратить внимание при его решении
4️⃣ Определить, на прокачке каких навыков нужно сфокусироваться в первую очередь.
С этими задачами помогут наши партнеры — Solvery. На следующей неделе ребята проводят Frontend Fest по трудоустройству!
📆 Расписание феста:
25.03 в 18:30 — Из чего состоит получение оффера? Необходимые скиллы, советы по резюме и воронка найма
26.03 в 19:00 — Разбор решений тестового задания
27.03 в 19:00 — Моковое собеседование по JavaScript
28.03 в 19:00 — Разбор резюме
Переходите по ссылке, чтобы зарегистрироваться на фест!
events.solvery.io
FRONTEND FEST 2.0
Solvery организовывает бесплатные прямые эфиры с моковыми собеседованиями для Junior разработчиков! Менторы проведут интервью по Go, C++, JavaScript и Python разработке
👍8🤝4🫡1
Проверка числа на четность
Чтобы определить, является ли число четным или нечетным, можно использовать следующую простую функцию на JavaScript. Этот метод особенно полезен, когда необходимо:
- обрабатывать различные числовые данные в логических операциях,
- создавать условия для выполнения определенных задач в зависимости от четности числа,
- фильтровать массивы чисел на четные и нечетные.
#JavaScript #isEven #number
Чтобы определить, является ли число четным или нечетным, можно использовать следующую простую функцию на JavaScript. Этот метод особенно полезен, когда необходимо:
- обрабатывать различные числовые данные в логических операциях,
- создавать условия для выполнения определенных задач в зависимости от четности числа,
- фильтровать массивы чисел на четные и нечетные.
#JavaScript #isEven #number
😁9👍6🔥2🤝2
Бандл
Бандл в веб-разработке – это оптимизированный пакет файлов проекта. В него входят HTML, CSS, JavaScript, изображения и другие ресурсы. Основная цель – повысить производительность веб-приложения за счет снижения количества запросов к серверу и уменьшения размера файлов.
Процесс создания бандла называется сборкой и автоматизируется инструментами, такими как Webpack, Rollup, Parcel. Эти инструменты помогают объединить множество маленьких файлов в несколько больших, ускоряя время загрузки страницы.
Бандлинг также позволяет адаптировать новые стандарты JavaScript для старых браузеров, обеспечивая кроссбраузерность. Включает транспиляцию из TypeScript в JavaScript и предлагает дополнительные оптимизации, например, удаление неиспользуемого кода.
Использование бандлов значительно улучшает производительность, делая веб-приложения и сайты быстрее и доступнее для конечных пользователей.
#web #bundle
Бандл в веб-разработке – это оптимизированный пакет файлов проекта. В него входят HTML, CSS, JavaScript, изображения и другие ресурсы. Основная цель – повысить производительность веб-приложения за счет снижения количества запросов к серверу и уменьшения размера файлов.
Процесс создания бандла называется сборкой и автоматизируется инструментами, такими как Webpack, Rollup, Parcel. Эти инструменты помогают объединить множество маленьких файлов в несколько больших, ускоряя время загрузки страницы.
Бандлинг также позволяет адаптировать новые стандарты JavaScript для старых браузеров, обеспечивая кроссбраузерность. Включает транспиляцию из TypeScript в JavaScript и предлагает дополнительные оптимизации, например, удаление неиспользуемого кода.
Использование бандлов значительно улучшает производительность, делая веб-приложения и сайты быстрее и доступнее для конечных пользователей.
#web #bundle
👍11
Вычисление среднего значения чисел
Используйте следующий фрагмент кода для вычисления среднего значения из нескольких чисел. Этот метод особенно полезен при:
- анализе данных,
- выполнении математических расчетов,
- обработке пользовательского ввода.
#JavaScript #math #solution #average
Используйте следующий фрагмент кода для вычисления среднего значения из нескольких чисел. Этот метод особенно полезен при:
- анализе данных,
- выполнении математических расчетов,
- обработке пользовательского ввода.
#JavaScript #math #solution #average
👍13
Композиция и декомпозиция
Композиция и декомпозиция — ключевые концепции в программировании и JavaScript, облегчающие разработку модульного и переиспользуемого кода.
Композиция — это объединение функций или компонентов для создания новой функциональности. В JavaScript, это позволяет формировать сложные логические конструкции из более простых функций, способствуя читабельности кода, упрощению тестирования и соблюдению принципа DRY (Don't Repeat Yourself). Композиция уменьшает повторения и повышает гибкость кода.
Декомпозиция — разделение сложной задачи на более мелкие, управляемые части. В JavaScript, это может выражаться в разбиении комплексного компонента на меньшие функции, каждая из которых решает конкретную задачу. Это упрощает разработку, делает код более понятным и модульным, способствуя его повторному использованию.
Применяя композицию и декомпозицию, можно значительно улучшить качество кода, делая разработку более эффективной и адаптивной к изменениям. Эти концепции взаимодействуют, предоставляя разработчикам инструменты для создания оптимизированного кода.
#composition #decomposition
Композиция и декомпозиция — ключевые концепции в программировании и JavaScript, облегчающие разработку модульного и переиспользуемого кода.
Композиция — это объединение функций или компонентов для создания новой функциональности. В JavaScript, это позволяет формировать сложные логические конструкции из более простых функций, способствуя читабельности кода, упрощению тестирования и соблюдению принципа DRY (Don't Repeat Yourself). Композиция уменьшает повторения и повышает гибкость кода.
Декомпозиция — разделение сложной задачи на более мелкие, управляемые части. В JavaScript, это может выражаться в разбиении комплексного компонента на меньшие функции, каждая из которых решает конкретную задачу. Это упрощает разработку, делает код более понятным и модульным, способствуя его повторному использованию.
Применяя композицию и декомпозицию, можно значительно улучшить качество кода, делая разработку более эффективной и адаптивной к изменениям. Эти концепции взаимодействуют, предоставляя разработчикам инструменты для создания оптимизированного кода.
#composition #decomposition
👍15
Менторство
Недавно я рассказывал вам о Frontend Fest по трудоустройству от Solvery. На этой платформе множество менторов самых разных специальностей. Я считаю, что менторство — лучший способ изучения чего-либо. Я также являюсь ментором, но никак не связан с Solvery. Эта платформа по сути мой конкурент, но я конкуренции не боюсь. Мое обучение авторское, и я максимально вовлечен в процесс обучения своих учеников.
Мне часто пишут и просят прорекламировать курсы, но я отказываюсь. Я против курсов, не хочу, чтобы новички попадали в ловушку, в которой они теряют много денег и мотивацию учиться. Я за связку самостоятельного обучения + менторство. Поэтому на предложение стать партнером Solvery я не отказался. Я считаю, что у новичков должны быть варианты, какого ментора выбрать, за какую цену и какой формат обучения.
Я стараюсь дать максимально пользы своим ученикам, задействовать в активностях, проводить групповые и личные созвоны. Ищу возможности для практики и лучшего обучения. Вместе мы пробуем различные ресурсы и их связки. Я прорабатываю структуру обучения и возможности для своих учеников стать сильными разработчиками.
У меня есть еще 3 места на месячное обучение. Подробности тут: https://telegra.ph/Obuchenie-s-mentorom-02-22
Reactify🏆
Недавно я рассказывал вам о Frontend Fest по трудоустройству от Solvery. На этой платформе множество менторов самых разных специальностей. Я считаю, что менторство — лучший способ изучения чего-либо. Я также являюсь ментором, но никак не связан с Solvery. Эта платформа по сути мой конкурент, но я конкуренции не боюсь. Мое обучение авторское, и я максимально вовлечен в процесс обучения своих учеников.
Мне часто пишут и просят прорекламировать курсы, но я отказываюсь. Я против курсов, не хочу, чтобы новички попадали в ловушку, в которой они теряют много денег и мотивацию учиться. Я за связку самостоятельного обучения + менторство. Поэтому на предложение стать партнером Solvery я не отказался. Я считаю, что у новичков должны быть варианты, какого ментора выбрать, за какую цену и какой формат обучения.
Я стараюсь дать максимально пользы своим ученикам, задействовать в активностях, проводить групповые и личные созвоны. Ищу возможности для практики и лучшего обучения. Вместе мы пробуем различные ресурсы и их связки. Я прорабатываю структуру обучения и возможности для своих учеников стать сильными разработчиками.
У меня есть еще 3 места на месячное обучение. Подробности тут: https://telegra.ph/Obuchenie-s-mentorom-02-22
Reactify🏆
👍10🔥2❤1🫡1
Императивный и декларативный подходы
В контексте JavaScript, императивный и декларативный подходы отличаются способом написания кода и логикой его исполнения.
Императивный подход в JavaScript характеризуется явным указанием шагов, которые должен выполнить интерпретатор для достижения определенного результата. Примером может служить цикл for, где разработчик задает начальное состояние, условие продолжения и шаг изменения переменной цикла:
Декларативный подход, напротив, сосредотачивается на описании желаемого результата, минимизируя детали реализации. В JavaScript примером декларативного подхода может служить использование методов массивов, таких как map, filter, reduce, которые позволяют работать с данными на более высоком уровне абстракции:
В декларативном подходе код становится более читаемым и лаконичным, а также часто проще в поддержке и масштабировании. Однако, в определенных ситуациях, когда необходима высокая производительность или особые условия обработки данных, императивный подход может предоставить большую гибкость и контроль над процессом выполнения кода.
#JavaScript #imperative #declarative
В контексте JavaScript, императивный и декларативный подходы отличаются способом написания кода и логикой его исполнения.
Императивный подход в JavaScript характеризуется явным указанием шагов, которые должен выполнить интерпретатор для достижения определенного результата. Примером может служить цикл for, где разработчик задает начальное состояние, условие продолжения и шаг изменения переменной цикла:
let sum = 0;
for (let i = 0; i < array.length; i++) {
sum += array[i];
}
Декларативный подход, напротив, сосредотачивается на описании желаемого результата, минимизируя детали реализации. В JavaScript примером декларативного подхода может служить использование методов массивов, таких как map, filter, reduce, которые позволяют работать с данными на более высоком уровне абстракции:
const sum = array.reduce((acc, value) => acc + value, 0);
В декларативном подходе код становится более читаемым и лаконичным, а также часто проще в поддержке и масштабировании. Однако, в определенных ситуациях, когда необходима высокая производительность или особые условия обработки данных, императивный подход может предоставить большую гибкость и контроль над процессом выполнения кода.
#JavaScript #imperative #declarative
👍7
Автоматическая прокрутка страницы вверх
Для того чтобы добавить функционал автоматической прокрутки страницы вверх на вашем сайте или веб-приложении, используйте следующий фрагмент кода. Этот метод особенно удобен при:
- создании длинных веб-страниц, требующих удобного возвращения пользователя к началу страницы,
- улучшении пользовательского опыта на сайтах с большим количеством контента,
- разработке одностраничных приложений (SPA), где прокрутка до верха может улучшить навигацию.
#JavaScript #scroll #navigation
Для того чтобы добавить функционал автоматической прокрутки страницы вверх на вашем сайте или веб-приложении, используйте следующий фрагмент кода. Этот метод особенно удобен при:
- создании длинных веб-страниц, требующих удобного возвращения пользователя к началу страницы,
- улучшении пользовательского опыта на сайтах с большим количеством контента,
- разработке одностраничных приложений (SPA), где прокрутка до верха может улучшить навигацию.
#JavaScript #scroll #navigation
👍10🔥4
Roadmap постепенно дополняется новыми материалами. При обнаружении ценного ресурса я стараюсь сразу сохранить его для последующего включения в учебный план.
Этот план ценен как для начинающих, так и для опытных специалистов. В нем представлены ресурсы только для изучения алгоритмов, продвинутых тем, и для подготовки к собеседованиям. Рекомендуется ознакомиться всем, поскольку каждый сможет найти что-то полезное для себя.
Также предлагается просмотреть сопроводительное видео, желательно на скорости 1.5. В нем я делюсь своими размышлениями по каждому из ресурсов.
Ваше мнение важно: какие ресурсы стоит добавить? Чего, на ваш взгляд, не хватает в плане?
https://youtu.be/9Pbm_V0MM0Y?si=139xJsDahDadB5h_
Этот план ценен как для начинающих, так и для опытных специалистов. В нем представлены ресурсы только для изучения алгоритмов, продвинутых тем, и для подготовки к собеседованиям. Рекомендуется ознакомиться всем, поскольку каждый сможет найти что-то полезное для себя.
Также предлагается просмотреть сопроводительное видео, желательно на скорости 1.5. В нем я делюсь своими размышлениями по каждому из ресурсов.
Ваше мнение важно: какие ресурсы стоит добавить? Чего, на ваш взгляд, не хватает в плане?
https://youtu.be/9Pbm_V0MM0Y?si=139xJsDahDadB5h_
YouTube
Frontend Roadmap 2024. План + Ресурсы для бесплатного обучения.
Комплексный план обучения для начинающих фронтенд-разработчиков. В данном roadmap систематизированы ключевые технологии, необходимые для старта в профессии, сопровождаемые обширным перечнем бесплатных образовательных ресурсов. Для каждого направления технологий…
🔥17❤3👍2
Переворот строки в JavaScript
Чтобы перевернуть строку в JavaScript, можно воспользоваться сочетанием методов split, reverse и join. Этот подход отлично подходит для:
- решения алгоритмических задач,
- создания игр с словами,
- разработки функционала, требующего обработки строк в обратном порядке.
#JavaScript #string #split #reverse #join
Чтобы перевернуть строку в JavaScript, можно воспользоваться сочетанием методов split, reverse и join. Этот подход отлично подходит для:
- решения алгоритмических задач,
- создания игр с словами,
- разработки функционала, требующего обработки строк в обратном порядке.
#JavaScript #string #split #reverse #join
👍9🔥2😁1
Таким образом я стараюсь создать максимально благоприятную среду для обучения и развития. Это не просто обучение - это мини сообщество. В котором мы общаемся, практикуемся, созваниваемся и готовимся к собеседованиям.
Я человек идейный. У меня много мыслей и различный идей проектов, которые не просто будут пылится на полке Пет проектов, а которыми будут пользоваться другие.
Я стараюсь не просто научить ребят разрабатывать, но и полюбить это дело, замотивировать🤝
Я человек идейный. У меня много мыслей и различный идей проектов, которые не просто будут пылится на полке Пет проектов, а которыми будут пользоваться другие.
Я стараюсь не просто научить ребят разрабатывать, но и полюбить это дело, замотивировать🤝
👍18🔥4🤝1
Всем привет. Как обещал, провожу розыгрыш менторства для новичков.
Призы следующие:
- Две недели менторства бесплатно.
- Одна неделя менторства бесплатно.
- Собеседование на 40-60 минут.
- Специальное предложение: месяц обучения за 10,000 рублей вместо 15,000.
Это возможность улучшить свои навыки и ознакомиться с процессом обучения. Планирую регулярно проводить розыгрыш одной недели менторства.
Итоги подведём 5 апреля в 18:00
Желаю удачи и надеюсь, что победят те, кому это действительно необходимо.
Призы следующие:
- Две недели менторства бесплатно.
- Одна неделя менторства бесплатно.
- Собеседование на 40-60 минут.
- Специальное предложение: месяц обучения за 10,000 рублей вместо 15,000.
Это возможность улучшить свои навыки и ознакомиться с процессом обучения. Планирую регулярно проводить розыгрыш одной недели менторства.
Итоги подведём 5 апреля в 18:00
Желаю удачи и надеюсь, что победят те, кому это действительно необходимо.
❤10💯7👍4
YeaHub Разработка
Из-за ошибок в управлении проектом разработка дизайна нашего приложения застопорилась на два месяца. Фронтенд команда ожидала дизайн и не могла продолжить работу. Для решения этой проблемы я изменил стратегию управления.
Для возобновления работы и компенсации потерянного времени я нанял двух дизайнеров на неполный рабочий день. Их работа оказалась чрезвычайно эффективной: за первые две недели они разработали дизайн лендинга, несколько ключевых страниц основной платформы и комплект UI элементов. Это позволило фронтенд команде приступить к разработке.
Для улучшения работы и повышения эффективности команды фронтенд-разработчиков я провёл реструктуризацию: назначил руководителя фронтенд отдела и разделил разработчиков на малые команды, каждая из которых получила своего лидера. Это изменение позволило более чётко распределить задачи и ускорить разработку.
Лидеры команд успешно настроили свои проекты и, имея теперь в распоряжении дизайн, активно работают над реализацией интерфейса платформы. Этот период стал для нас важным уроком о значении гибкости управленческих решений и важности эффективной командной работы. Мы единодушно верим в успех нашего проекта и стремимся представить его IT-сообществу.
#yeahub
Из-за ошибок в управлении проектом разработка дизайна нашего приложения застопорилась на два месяца. Фронтенд команда ожидала дизайн и не могла продолжить работу. Для решения этой проблемы я изменил стратегию управления.
Для возобновления работы и компенсации потерянного времени я нанял двух дизайнеров на неполный рабочий день. Их работа оказалась чрезвычайно эффективной: за первые две недели они разработали дизайн лендинга, несколько ключевых страниц основной платформы и комплект UI элементов. Это позволило фронтенд команде приступить к разработке.
Для улучшения работы и повышения эффективности команды фронтенд-разработчиков я провёл реструктуризацию: назначил руководителя фронтенд отдела и разделил разработчиков на малые команды, каждая из которых получила своего лидера. Это изменение позволило более чётко распределить задачи и ускорить разработку.
Лидеры команд успешно настроили свои проекты и, имея теперь в распоряжении дизайн, активно работают над реализацией интерфейса платформы. Этот период стал для нас важным уроком о значении гибкости управленческих решений и важности эффективной командной работы. Мы единодушно верим в успех нашего проекта и стремимся представить его IT-сообществу.
#yeahub
🔥24👍8❤1
Проверка наличия элементов в массиве
Чтобы проверить, пустой ли массив или в нем есть элементы, используйте следующий фрагмент кода. Этот метод особенно полезен при:
- валидации данных перед обработкой,
- проверке входных данных в функциях,
- управлении потоками данных в приложениях.
#JavaScript #arrays
Чтобы проверить, пустой ли массив или в нем есть элементы, используйте следующий фрагмент кода. Этот метод особенно полезен при:
- валидации данных перед обработкой,
- проверке входных данных в функциях,
- управлении потоками данных в приложениях.
#JavaScript #arrays
Избегайте явного добавления лишних пропсов, если они могут быть переданы через распространение пропсов.
Когда работаете с React компонентами, особенно с такими, что оборачивают HTML элементы (например, <input>, <button>, <textarea>), придерживайтесь простоты и чистоты кода. Если ваш компонент получает пропсы, которые прямо передаются в дочерний элемент без модификаций или особой логики, предпочтительнее использовать оператор распространения пропсов (...props). Это повышает гибкость компонента и упрощает его применение.
#react #best #props
Когда работаете с React компонентами, особенно с такими, что оборачивают HTML элементы (например, <input>, <button>, <textarea>), придерживайтесь простоты и чистоты кода. Если ваш компонент получает пропсы, которые прямо передаются в дочерний элемент без модификаций или особой логики, предпочтительнее использовать оператор распространения пропсов (...props). Это повышает гибкость компонента и упрощает его применение.
#react #best #props
👍13
Получение выделенного текста пользователя
Чтобы получить текст, который пользователь выделил на веб-странице, можно использовать встроенное свойство getSelection. Этот метод особенно полезен для:
- разработки функций копирования или анализа текста,
- создания заметок или аннотаций в документах,
- улучшения взаимодействия пользователя с контентом.
#JavaScript #window #selection
Чтобы получить текст, который пользователь выделил на веб-странице, можно использовать встроенное свойство getSelection. Этот метод особенно полезен для:
- разработки функций копирования или анализа текста,
- создания заметок или аннотаций в документах,
- улучшения взаимодействия пользователя с контентом.
#JavaScript #window #selection
👍11