Frontend | Вопросы собесов
前往频道在 Telegram
Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads
显示更多
网络:📈 Telegram 频道 Frontend | Вопросы собесов 的分析概览
频道 Frontend | Вопросы собесов (@easy_javascript_ru) 俄语 语言赛道中的 是活跃参与者。目前社区聚集了 17 471 名订阅者，在 技术与应用 类别中位列第 7 419，并在 俄罗斯 地区排名第 37 609 位。
📊 受众指标与增长动态
自 невідомо 创建以来，项目保持高速增长，吸引了 17 471 名订阅者。
根据 25 十月, 2026 的最新数据，频道保持稳定运转。过去 30 天订阅人数变化为 -191，过去 24 小时变化为 -8，整体触达仍然可观。
- 认证状态： 未认证
- 互动率 (ER)： 平均受众互动率为 6.58%。内容发布后 24 小时内通常能获得 4.33% 的反应，占订阅者总量。
- 帖子覆盖： 每篇帖子平均可获得 1 151 次浏览，首日通常累积 757 次浏览。
- 互动与反馈： 受众积极参与，单帖平均反应数为 4。
- 主题关注点： 内容集中在 ставь, браузер, html, border, flex 等核心主题上。
📝 描述与内容策略
作者将该频道定位为表达主观观点的平台：
“Сайт: https://easyoffer.ru/
Все каналы: t.me/+xGeAw6ckJ4liYzQy
Контакт для рекламы: @sendme_ads”
凭借高频更新（最新数据采集于 26 十月, 2026），频道始终保持新鲜度与高覆盖。分析显示受众积极互动，使其成为 技术与应用 类别中的关键影响点。
17 471
订阅者
-824 小时
-577 天
-19130 天
正在加载数据
相似频道
标签云
进出提及
---
---
---
---
---
---
吸引订阅者
十月 '2610月 '26
十月 '26
+9
在0个频道中
九月 '26
+10
在0个频道中
Get PRO
八月 '26
+28
在0个频道中
Get PRO
七月 '26
+29
在0个频道中
Get PRO
六月 '26
+26
在2个频道中
Get PRO
五月 '26
+41
在0个频道中
Get PRO
四月 '26
+28
在0个频道中
Get PRO
三月 '26
+28
在0个频道中
Get PRO
二月 '26
+42
在0个频道中
Get PRO
一月 '26
+97
在1个频道中
Get PRO
十二月 '25
+15
在2个频道中
Get PRO
十一月 '25
+120
在0个频道中
Get PRO
十月 '25
+89
在0个频道中
Get PRO
九月 '25
+55
在0个频道中
Get PRO
八月 '25
+65
在0个频道中
Get PRO
七月 '25
+98
在0个频道中
Get PRO
六月 '25
+103
在2个频道中
Get PRO
五月 '25
+121
在2个频道中
Get PRO
四月 '25
+171
在0个频道中
Get PRO
三月 '25
+162
在5个频道中
Get PRO
二月 '25
+359
在5个频道中
Get PRO
一月 '25
+531
在53个频道中
Get PRO
十二月 '24
+285
在1个频道中
Get PRO
十一月 '24
+539
在0个频道中
Get PRO
十月 '24
+1 456
在46个频道中
Get PRO
九月 '24
+2 372
在275个频道中
Get PRO
八月 '24
+742
在0个频道中
Get PRO
七月 '24
+855
在54个频道中
Get PRO
六月 '24
+3 780
在245个频道中
Get PRO
五月 '24
+3 174
在224个频道中
Get PRO
四月 '24
+2 890
在69个频道中
Get PRO
三月 '24
+2 687
在48个频道中
Get PRO
二月 '24
+3 294
在32个频道中
| 日期 | 订阅者增长 | 提及 | 频道 | |
| 26 十月 | 0 | |||
| 25 十月 | 0 | |||
| 24 十月 | 0 | |||
| 23 十月 | +1 | |||
| 22 十月 | 0 | |||
| 21 十月 | 0 | |||
| 20 十月 | +1 | |||
| 19 十月 | 0 | |||
| 18 十月 | 0 | |||
| 17 十月 | 0 | |||
| 16 十月 | 0 | |||
| 15 十月 | +1 | |||
| 14 十月 | 0 | |||
| 13 十月 | 0 | |||
| 12 十月 | +3 | |||
| 11 十月 | 0 | |||
| 10 十月 | 0 | |||
| 09 十月 | +2 | |||
| 08 十月 | 0 | |||
| 07 十月 | 0 | |||
| 06 十月 | 0 | |||
| 05 十月 | 0 | |||
| 04 十月 | 0 | |||
| 03 十月 | 0 | |||
| 02 十月 | 0 | |||
| 01 十月 | +1 |
频道帖子
🤔 Зачем нужна система контроля версий?
Она отслеживает изменения в коде, позволяет откатываться, работать в команде, создавать ветки для разных задач, решать конфликты, сохранять историю и документировать прогресс.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
| 2 |  Монолит vs микросервисы: битва за ваши нервы
💻 Монолит или микросервисы? Кажется, что ответ очевиден, но почему-то одни проекты летают, а другие тонут в хаосе?
Присоединяйтесь к открытому уроку Сергея Прощаева и получите пошаговое руководство по выбору архитектуры.
📅 9 ноября в 20:00. Разберём:
- Как не попасть в ловушку «модных» микросервисов.
- Признаки, что пора выходить из монолита.
- Архитектурные паттерны перехода: Strangler Fig, BFF, Self-contained systems.
- Организационные и технические риски — что пойдёт не так.
- Роль DevOps, CI/CD и мониторинга.
Вы научитесь оценивать реальные риски и стоимость микросервисов, внедрять изменения без сбоев и хаоса и принимать взвешенные решения, сохраняя технический контроль и производительность команды.
✅ Запишитесь сейчас!
Узнать больше
#реклама 16+
otus.ru
О рекламодателе | 671 |
| 3 | 🤔 Что такое async и await?
Это синтаксический сахар для работы с асинхронными операциями, делающий код, работающий с асинхронными действиями, такими как запросы к серверу или чтение файлов, более читаемым и легким для понимания. Этот синтаксис был введен в ES2017 (ES8) и строится на промисах (Promises).
🚩Ключевое слово async
Используется перед объявлением функции. Это позволяет функции автоматически возвращать промис. Если эта функция возвращает не промис, то возвращаемое значение будет автоматически обернуто в промис.
async function fetchData() {
return 'данные';
}
fetchData().then(data => console.log(data)); // выводит "данные"
🚩Ключевое слово await
Используется для ожидания результата промиса внутри асинхронной функции async. Оно приостанавливает выполнение асинхронной функции до тех пор, пока промис не выполнится (т.е. не будет разрешен или отклонен). ЕЕ можно использовать только внутри асинхронных функций.
async function fetchData() {
let data = await fetch('https://api.example.com/data');
let json = await data.json();
return json;
}
🚩Плюсы
➕Улучшение читаемости кода
Асинхронный код, написанный с использованием async/await, выглядит более структурированным и похожим на синхронный код, что упрощает его понимание
➕Упрощение обработки ошибок
В асинхронных функциях с await можно использовать стандартный синтаксис try/catch для обработки ошибок, что делает код единообразнее.
➕Избегание "callback hell"
Использование async/await позволяет избежать сложностей с вложенными коллбэками, которые могут возникнуть при использовании промисов или старого стиля асинхронного кода с коллбэками.
Ставь 👍 и забирай 📚 Базу знаний | 720 |
| 4 |  Теорию по Python знаешь, а проекта нет?
Знакомая ситуация: конспекты есть, основы понятны, а применить язык негде. Без небольшого живого проекта знания так и остаются на уровне записей.
Отус зовет на открытый урок «Telegram-бот с нуля на Python: от теории к практике». Он для тех, кто знает основы и ищет практическую задачу: разберем, как маленький проект превращает теорию в навык.
На уроке:
- как бот получает сообщения
- как он обрабатывает команды
- как отвечает пользователю
Урок пройдет 10.11 в 20:00. Приходи, если хочешь применить Python на деле.
Зарегистрироваться
#реклама 16+
otus.ru
О рекламодателе | 830 |
| 5 | 🤔 Чем em отличается от rem?
🟠Как работает `em`?
em зависит от размера шрифта родителя (font-size).
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 1.5 * 20px = 30px */
}
Но если .child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя.
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 30px */
}
.grandchild {
font-size: 2em; /* 2 * 30px = 60px */
}
🟠Как работает `rem`?
rem всегда зависит от font-size у <html>.
html {
font-size: 16px;
}
.container {
font-size: 2rem; /* 2 * 16px = 32px */
}
🟠Когда использовать `em`, а когда `rem`?
Используйте rem, если нужно, чтобы шрифты и размеры были предсказуемыми
Используйте em, если хотите, чтобы элементы зависели от родителя
Ставь 👍 и забирай 📚 Базу знаний | 879 |
| 6 | 🤔 Как бы повернул блок на 45 градусов?
Чтобы повернуть блок на 45 градусов, используется свойство CSS transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон.
🚩Пример использования
.rotated-box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg);
}
🚩Объяснение
Основной синтаксис
🟠Угол поворота элемента. Может быть положительным или отрицательным значением в градусах (deg), радианах (rad), градусах (grad) или оборотах (turn).
transform: rotate(угол);
🟠Параметры
Угол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.rotated-box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="rotated-box"></div>
</body>
</html>
🚩Пояснение
🟠Свойство `transform`
Позволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение.
🟠Функция rotate
Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки.
🚩Использование в реальных проектах
🟠Вращение элементов
Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста.
🟠Анимация
В комбинации с анимацией (@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы.
Ставь 👍 и забирай 📚 Базу знаний | 897 |
| 7 |  Техника Braun для красоты и ухода
✅ Оригинальные бритвы, триммеры и эпиляторы
✅ Точность, комфорт и стиль — вместе с Braun
Купить
#реклама
market.yandex.ru
О рекламодателе | 760 |
| 8 | 🤔 Основные причины отказа от классовых компонентов в react?
С появлением React Hooks в версии 16.8 (2019 год) классовые компоненты стали устаревшим способом создания компонентов. Сегодня функциональные компоненты с хуками заменяют классы. Давайте разберем почему.
🟠Меньше кода → чище и понятнее
Функциональные компоненты короче, читаются легче, а код становится чище.
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<button onClick={this.increment}>
Счетчик: {this.state.count}
</button>
);
}
}
Функциональный компонент (хуки делают код проще)
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Счетчик: {count}
</button>
);
}
🟠Легче управлять жизненным циклом (useEffect vs componentDidMount)
В классах жизненный цикл* компонента состоит из нескольких методов (componentDidMount, componentDidUpdate, componentWillUnmount).
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { time: 0 };
}
componentDidMount() {
this.timer = setInterval(() => {
this.setState({ time: this.state.time + 1 });
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return <p>Время: {this.state.time} секунд</p>;
}
}
Функциональный компонент (хуки делают все проще)
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
const timer = setInterval(() => setTime(t => t + 1), 1000);
return () => clearInterval(timer);
}, []);
return <p>Время: {time} секунд</p>;
}
🟠Лучшая производительность (меньше потребления памяти)
Классовые компоненты используют экземпляры классов, а функциональные компоненты – просто функции.
Создают экземпляры this
Обрабатывают setState
Хранят лишние связи и контексты
Не создают this
Используют только нужные данные
Оптимизируются через React.memo
const Button = React.memo(({ onClick }) => {
console.log("Ререндер кнопки");
return <button onClick={onClick}>Нажми</button>;
});
function App() {
const [count, setCount] = useState(0);
const increment = useCallback(() => setCount(c => c + 1), []);
return (
<div>
<p>Счетчик: {count}</p>
<Button onClick={increment} />
</div>
);
}
🟠Легче переиспользовать логику (React Hooks vs HOC/Render Props)
Раньше в классах код переиспользовали через HOC и Render Props, но это делало код сложным.
function withLogging(WrappedComponent) {
return class extends React.Component {
componentDidMount() {
console.log("Компонент монтирован");
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}
Хуки (useEffect) делают код чище
function useLogger() {
useEffect(() => console.log("Компонент монтирован"), []);
}
function MyComponent() {
useLogger();
return <p>Привет, мир!</p>;
}
🟠Функциональные компоненты – будущее React
React официально рекомендует использовать функциональные компоненты
Dan Abramov (разработчик React)
Новые фичи React (Suspense, Server Components) создаются для функциональных компонентов
Классы не работают в React Server Components
Большинство современных библиотек (Redux Toolkit, React Query) рассчитаны на хуки
Ставь 👍 и забирай 📚 Базу знаний | 838 |
| 9 |  🚀 Мок-собеседование с Senior Frontend из бигтеха за 2000 ₽ вместо 7900 ₽
Да, это не просто еще один созвон, где тебе задают вопросы. Это возможность проверить себя до реального собеса и понять, что мешает выйти на следующий грейд 😎
Мок пригодится, если ты ищешь работу, хочешь вырасти в грейде или проверить свои знания перед техническим интервью
Что внутри:
📂 60 минут технических вопросов и задач, которые встречаются на собеседованиях
📂 Подробный фидбек: что получилось хорошо, где потерял баллы и что стоит подтянуть
После мока сможешь самостоятельно разобрать обратную связь или проработать слабые места с ментором. Так будет проще закрыть пробелы и подготовиться к следующему грейду и росту зарплаты.
Мок проходит в рамках менторской программы Шортката. У нас 150+ менторов из Авито, Сбера, VK, WB, Uber и Booking, а наши менти получили уже 500+ офферов
🔥 Открыли всего 50 мест по специальной цене 2000 ₽ вместо 7900 ₽
Для записи переходи в бота → @shortcut_front_bot
Реклама.
О рекламодателе. | 763 |
| 10 |  ОСАГО помесячно — цены без комиссий от страховых!
Оформите ОСАГО один раз и забудьте о продлении. Кешбэк 100% за первый месяц
Заказать
Финансовые услуги оказывает: ПАО СК «Росгосстрах»,СПАО «Ингосстрах» и др..
#реклама
care.yandex.ru
О рекламодателе | 835 |
| 11 | 🤔 Как достигается изоляция при использовании бэм?
БЭМ (Блок, Элемент, Модификатор) достигает изоляции стилей с помощью уникальных имен классов. Это помогает избежать конфликтов между стилями и делает код более предсказуемым.
🚩Как БЭМ предотвращает конфликты?
🟠Все стили зависят только от конкретного блока
В БЭМ нет зависимостей от родительских элементов, поэтому стили блока не сломаются, если он окажется в другом месте.
<div class="button">Кнопка</div>
.button {
background: blue;
color: white;
}
Плохой пример без БЭМ
.container .button {
background: blue;
}
🟠Элементы (`__`) зависят только от своего блока
Стили элемента никогда не зависят от родителя — только от блока.
<div class="card">
<h2 class="card__title">Заголовок</h2>
<p class="card__text">Текст карточки</p>
</div>
.card__title {
font-size: 20px;
}
.card__text {
color: gray;
}
🟠Модификаторы (`--`) изменяют только нужные стили
Модификаторы позволяют изменять внешний вид без переписывания базовых стилей.
<button class="button button--red">Кнопка</button>
<button class="button button--blue">Кнопка</button>
.button {
padding: 10px;
border-radius: 5px;
}
.button--red {
background: red;
}
.button--blue {
background: blue;
}
🟠Имена классов уникальны, нет глобальных стилей
В БЭМ не используется tag {} или id {} — только классы. Это предотвращает конфликты стилей.
h1 {
color: red;
}
БЭМ-версия
.card__title {
color: red;
}
Ставь 👍 и забирай 📚 Базу знаний | 936 |
| 12 |  Услуги дата-центра в Москве
Размещение и аренда серверного оборудования в дата-центре.
👍 4 современных дата-центра в Москве.
👍 Лицензированный оператор связи.
👍 Индивидуальные конфигурации выделенных серверов под задачи клиента.
👍 Круглосуточная техническая поддержка в Телеграм, без ботов.
Узнать цену
#реклама 16+
itsoft.ru
О рекламодателе | 878 |
| 13 | 🤔 В чем отличие атрибутов от свойств в html тегах?
Атрибуты — это то, что записано в HTML.
Свойства — это то, что появляется в JavaScript-объекте element.
Когда браузер загружает страницу, он парсит HTML и создает DOM-объекты, в которых атрибуты превращаются в свойства. Однако атрибуты и свойства не всегда совпадают!
🟠Атрибуты (`attributes`)
Хранятся в HTML.
Всегда являются строками.
Их можно получить с помощью .getAttribute() и изменить через .setAttribute().
Они не меняются динамически при изменении свойства элемента в JS.
<input id="myInput" type="text" value="Hello">
const input = document.getElementById("myInput");
console.log(input.getAttribute("value")); // "Hello"
🟠Свойства (`properties`)
Хранятся в объекте элемента (HTMLElement).
Имеют разные типы данных (строки, числа, булевые и т. д.).
Меняются динамически при взаимодействии с DOM.
console.log(input.value); // "Hello"
input.value = "New text"; // Меняем свойство
console.log(input.getAttribute("value")); // "Hello" (атрибут НЕ поменялся)
console.log(input.value); // "New text" (свойство изменилось)
Пример с checked у чекбокса
<input type="checkbox" id="myCheckbox" checked>
const checkbox = document.getElementById("myCheckbox");
console.log(checkbox.getAttribute("checked")); // "checked" (атрибут есть, значит включен)
console.log(checkbox.checked); // true (свойство JS - boolean)
checkbox.checked = false; // Меняем состояние чекбокса
console.log(checkbox.getAttribute("checked")); // "checked" (атрибут не поменялся!)
console.log(checkbox.checked); // false (свойство изменилось)
🟠Как правильно работать с атрибутами и свойствами?
Если хотите работать с DOM → используйте свойства (element.value, element.checked и т. д.).
Если хотите работать с атрибутами в HTML → используйте .getAttribute() и .setAttribute().
const img = document.querySelector("img");
// Меняем атрибут src
img.setAttribute("src", "new-image.jpg");
// Меняем свойство width
img.width = 300;
Ставь 👍 и забирай 📚 Базу знаний | 1 094 |
| 14 |  🔥 Скрытые вакансии с удаленной работой для Frontend разработчика, которые нигде больше не публикуются. Напрямую от компаний, с контактами рекрутеров.
🔹 Frontend Jobs | Вакансии
🔹 Node.js Jobs | Вакансии
🔸 Все каналы с вакансиями | 1 066 |
| 15 |  Я.Практикум: ИИ-тренинг с выездом экспертов в ваш офис
✨ Чтобы закрывать больше задач с меньшими ресурсами, нужна «суперсила». Обучайте сотрудников ИИ, чтобы автоматизировать операционные задачи и ускорить ключевые процессы.
Выберите формат, который подходит именно вашей команде:
✅ Базовый ИИ. Закладываем фундамент
✅ ИИ под роль. Навыки для конкретных функций и специалистов: руководители, продукт и аналитика, маркетинг и продажи, HR и L&D, операционные команды.
✅ ИИ-трансформация. Для компаний, которые хотят внедрять нейросети системно.
✅ ИИ-агенты. Для команд, которые хотят собирать собственных ИИ-агентов: от основ генеративного ИИ до рабочего прототипа без программирования.
Библиотека ИИ-навыков для команды — бесплатно при покупке любой программы ИИ-тренингов до конца сентября
Узнать больше
#реклама 16+
practicum.yandex.ru
О рекламодателе | 872 |
| 16 | 🤔 Какие есть альтернативы у redux?
Redux – мощный инструмент, но не всегда он необходим. Существует множество альтернатив, каждая из которых подходит для разных сценариев.
🚩React Context API + useReducer
Подходит для небольших и средних приложений
Встроено в React (не требует установки дополнительных библиотек)
useContext` позволяет передавать данные по дереву компонентов без "прокидывания" через props
useReducer работает как Redux, но проще
const AuthContext = createContext();
function authReducer(state, action) {
switch (action.type) {
case "LOGIN":
return { ...state, isAuthenticated: true, user: action.payload };
case "LOGOUT":
return { ...state, isAuthenticated: false, user: null };
default:
return state;
}
}
function AuthProvider({ children }) {
const [state, dispatch] = useReducer(authReducer, {
isAuthenticated: false,
user: null,
});
return (
<AuthContext.Provider value={{ state, dispatch }}>
{children}
</AuthContext.Provider>
);
}
function LoginButton() {
const { dispatch } = useContext(AuthContext);
return (
<button onClick={() => dispatch({ type: "LOGIN", payload: "Иван" })}>
Войти
</button>
);
}
🚩Zustand
Проще Redux, но с теми же возможностями
Нет лишних actions и reducers, только функции
import { create } from "zustand";
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
function Counter() {
const { count, increment } = useStore();
return <button onClick={increment}>Счетчик: {count}</button>;
}
🚩Recoil
Идеален для React-приложений
Гибче, чем Redux, с концепцией "атомов" (раздельные состояния)
import { atom, useRecoilState } from "recoil";
const countState = atom({
key: "count",
default: 0,
});
function Counter() {
const [count, setCount] = useRecoilState(countState);
return <button onClick={() => setCount(count + 1)}>Счетчик: {count}</button>;
}
🚩Jotai
Напоминает Recoil, но без сложных концепций
Поддерживает React Suspense и асинхронные состояния
import { atom, useAtom } from "jotai";
const countAtom = atom(0);
function Counter() {
const [count, setCount] = useAtom(countAtom);
return <button onClick={() => setCount(count + 1)}>Счетчик: {count}</button>;
}
🚩MobX
Автоматически отслеживает изменения состояния
Удобен для сложных приложений
import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";
class CounterStore {
count = 0;
constructor() {
makeAutoObservable(this);
}
increment() {
this.count++;
}
}
const store = new CounterStore();
const Counter = observer(() => (
<button onClick={() => store.increment()}>Счетчик: {store.count}</button>
));
🚩XState
Подходит для сложных логик (например, UI-анимаций, состояний формы)
Удобно описывать последовательности действий
import { createMachine, interpret } from "xstate";
const toggleMachine = createMachine({
id: "toggle",
initial: "inactive",
states: {
inactive: { on: { TOGGLE: "active" } },
active: { on: { TOGGLE: "inactive" } },
},
});
const service = interpret(toggleMachine).start();
service.send("TOGGLE"); // Меняет состояние
Ставь 👍 и забирай 📚 Базу знаний | 1 109 |
| 17 |  Ищем дилеров септиков Малахит! Высокий доход.
Стань 1-ым дилером септиков Малахит в регионе. Скидка 30% на оптовые закупки!
Узнать больше
#реклама
malahit-rf.ru
О рекламодателе | 828 |
| 18 | 🤔 Что такое делегирование?
Делегирование событий (Event Delegation) — это техника, при которой мы не навешиваем обработчик на каждый элемент, а ставим один обработчик на родителя и отслеживаем события его потомков.
🚩Как работает делегирование?
Обычный способ (без делегирования)
Если у нас есть 10 кнопок, мы можем повесить обработчик на каждую
document.querySelectorAll("button").forEach((btn) => {
btn.addEventListener("click", () => {
console.log("Кнопка нажата");
});
});
Если кнопок 1000, это создаст 1000 обработчиков, что неэффективно.
Если кнопки добавляются динамически (например, из API), обработчик на новые кнопки не сработает.
🟠Делегирование событий (оптимальный способ)
Вместо того чтобы вешать обработчик на каждую кнопку, ставим один обработчик на родительский элемент и проверяем, кто вызвал событие:
document.getElementById("container").addEventListener("click", (event) => {
if (event.target.tagName === "BUTTON") {
console.log("Кнопка нажата:", event.target.textContent);
}
});
🟠Пример с динамическими элементами
Если мы добавляем кнопки динамически, обработчик все равно будет работать
document.getElementById("container").addEventListener("click", (event) => {
if (event.target.classList.contains("btn")) {
console.log("Нажата кнопка:", event.target.textContent);
}
});
// Добавляем новую кнопку динамически
setTimeout(() => {
const newButton = document.createElement("button");
newButton.classList.add("btn");
newButton.textContent = "Новая кнопка";
document.getElementById("container").appendChild(newButton);
}, 2000);
Ставь 👍 и забирай 📚 Базу знаний | 1 305 |
| 19 | 🤔 Откуда взялся CSS?
CSS (Cascading Style Sheets) появился в 1996 году для отделения стилей от структуры HTML. Разработан Хоконом Виум Ли для упрощения управления дизайном веб-страниц и обеспечения каскадности стилей.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний | 1 316 |
| 20 | 🤔 Какие значения будут являться falsy значениями?
В JavaScript значения, которые при приведении к логическому типу (boolean) становятся false, называются "falsy" значениями. Существует всего семь таких значений:
🟠`false`
Логическое значение false.
console.log(Boolean(false)); // false
🟠`0`
Число ноль.
console.log(Boolean(0)); // false
🟠`-0`
Отрицательное число ноль (хотя это редко встречается на практике).
console.log(Boolean(-0)); // false
🟠`0n`
Число BigInt с значением ноль.
console.log(Boolean(0n)); // false
🟠`""` (пустая строка)
Строка без символов.
console.log(Boolean("")); // false
🟠`null`
Специальное значение, обозначающее отсутствие какого-либо значения.
console.log(Boolean(null)); // false
🟠`undefined`
Специальное значение, обозначающее необъявленное или неприсвоенное значение.
console.log(Boolean(undefined)); // false
🟠`NaN`
Специальное значение, обозначающее не число (Not-a-Number).
console.log(Boolean(NaN)); // false
🚩Примеры использования
🟠Проверка значений на falsy
В условиях (if statements) все falsy значения интерпретируются как false.
const values = [false, 0, -0, 0n, "", null, undefined, NaN];
values.forEach(value => {
if (!value) {
console.log(`${value} is falsy`);
}
});
Примеры в условиях
if (!false) {
console.log('false is falsy'); // выводится
}
if (!0) {
console.log('0 is falsy'); // выводится
}
if (!"") {
console.log('"" is falsy'); // выводится
}
if (!null) {
console.log('null is falsy'); // выводится
}
if (!undefined) {
console.log('undefined is falsy'); // выводится
}
if (!NaN) {
console.log('NaN is falsy'); // выводится
}
🟠Использование в логических операторах
Falsy значения также учитываются в логических операциях.
const value = null;
const result = value || 'default value';
console.log(result); // 'default value', потому что value является falsy
Ставь 👍 и забирай 📚 Базу знаний | 1 273 |
