Frontend | Вопросы собесов

\";\ndocument.getElementById(\"content\").innerHTML = userInput;\n\n🟠Проблемы с безопасностью CSP (Content Security Policy) \nЕсли в веб-приложении включена CSP (защита от XSS), то innerHTML может нарушать политику безопасности. \n\n\n🟠Случайное удаление обработчиков событий \nЕсли заменить содержимое элемента через innerHTML, все обработчики событий внутри него удалятся. \ndocument.getElementById(\"btn\").addEventListener(\"click\", () => {\n alert(\"Нажато!\");\n});\n\ndocument.getElementById(\"container\").innerHTML = \"Клик\";\ndocument.getElementById(\"btn\").click(); // Ошибка, обработчик удален\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-04-25T09:05:41Z","dateModified":"2026-04-25T09:05:41Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1929},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2559","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2559","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2559","headline":"🤔 Что такое ES-модули? ES-модули (ECMAScript Modules) — это стандартная система модулей в JavaScript. Позволя…","articleBody":"🤔 Что такое ES-модули?\n\nES-модули (ECMAScript Modules) — это стандартная система модулей в JavaScript. Позволяют экспортировать и импортировать переменные, функции, классы между файлами с помощью export и import. Они поддерживаются нативно в современных браузерах и Node.js.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-04-24T16:10:44Z","dateModified":"2026-04-24T16:10:44Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1771},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":30},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2558","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2558","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2558","headline":"🤔 Для чего нужна методология в html? Методология в HTML (и в веб-разработке в целом) нужна для организации и…","articleBody":"🤔 Для чего нужна методология в html?\n\nМетодология в HTML (и в веб-разработке в целом) нужна для организации и структурирования кода так, чтобы он был понятным, поддерживаемым и масштабируемым. Она помогает разработчикам работать в команде, избегать хаоса в проекте и ускоряет развитие продукта, делая код простым для чтения и изменения.\n\n🚩Зачем это нужно\n\n🟠Понятность кода\nБез единого подхода код может стать \"кашей\" из классов и тегов. Методология помогает дать элементы структуры, которые легко понять не только автору кода, но и другим разработчикам.\n\n🟠Снижение ошибок\nЕсли есть четкие правила, уменьшается риск дублирования, неправильных имен или конфликтов стилей.\n\n🟠Упрощение масштабирования\nВ больших проектах количество HTML-структур растет, и без системного подхода будет сложно добавлять новые элементы, не нарушая старые.\n\n🟠Легкость сопровождения\nС методологией легко найти нужные элементы и вносить изменения.\n\n🚩Примеры популярных методологий\n🟠БЭМ (Блок, Элемент, Модификатор)\nОдна из самых популярных методологий для HTML и CSS.\n - Она предлагает структурировать классы так:\n - Блок: независимый компонент (например, menu).\n - Элемент: часть блока (например, menu__item).\n - Модификатор: вариант блока или элемента (например, menu__item--active).\nПример кода\n \n \n \n \n🟠Atomic Design\nОснована на создании интерфейсов из \"атомов\" (простейшие элементы, например, кнопки), \"молекул\" (комбинации атомов, например, форма) и \"организмов\" (сложные компоненты, например, шапка сайта).\nПример\n \n \n Клик\n \n \n \n\n🟠SMACSS (Scalable and Modular Architecture for CSS)\nДелит код на модули (например, глобальные стили, компоненты, утилиты) и предлагает поддерживать независимость и минимизацию дублирования кода.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-04-24T09:05:40Z","dateModified":"2026-04-24T09:05:40Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1901},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2557","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2557","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2557","headline":"🤔 Как строить сетку сайта? Сетку можно строить несколькими способами: 1. CSS Flexbox — для одномерной разметк…","articleBody":"🤔 Как строить сетку сайта?\n\nСетку можно строить несколькими способами:\n1. CSS Flexbox — для одномерной разметки (по строке или колонке).\n2. display: flex;\n3. flex-direction: row;\n4. justify-content: space-between;\n5. CSS Grid — для двумерных сеток (и строки, и колонки).\n6. display: grid;\n7. grid-template-columns: repeat(3, 1fr);\n8. gap: 20px;\n9. CSS-фреймворки — Bootstrap, Tailwind и др. предлагают готовые сетки и классы (col-, grid-cols- и пр.).\n10. Media Queries — адаптивные сетки с изменением структуры под разные экраны.\nСетки — основа современного responsive-дизайна. Grid используется всё чаще из-за гибкости и контроля.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-04-23T16:10:44Z","dateModified":"2026-04-23T16:10:44Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2175},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2556","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2556","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2556","headline":"🤔 Как изменить стили кнопок с атрибутом disabled? C атрибутом disabled, используя селекторы атрибутов. Селект…","articleBody":"🤔 Как изменить стили кнопок с атрибутом disabled? \n\nC атрибутом disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled.\n\n🚩Пример использования\n\n🟠Селектора [disabled]\nЭтот селектор выбирает все элементы, у которых присутствует атрибут disabled.\nbutton[disabled] {\n background-color: gray;\n color: white;\n border: 1px solid #ccc;\n cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */\n opacity: 0.6; /* Уменьшает непрозрачность */\n}\n\n🟠Псевдокласса :disabled\nЭтот селектор выбирает все элементы, которые находятся в состоянии disabled.\nbutton:disabled {\n background-color: gray;\n color: white;\n border: 1px solid #ccc;\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n🚩Полные примеры\n\nС HTML\n\n\n\n \n \n \n \n\n\n Active Button\n Disabled Button\n\n\n\nС CSS\n/* Стили для активных кнопок */\nbutton {\n background-color: blue;\n color: white;\n border: 1px solid #000;\n padding: 10px 20px;\n cursor: pointer;\n}\n\n/* Стили для кнопок с атрибутом disabled */\nbutton[disabled] {\n background-color: gray;\n color: white;\n border: 1px solid #ccc;\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* Альтернативный способ с использованием псевдокласса :disabled */\nbutton:disabled {\n background-color: gray;\n color: white;\n border: 1px solid #ccc;\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n🟠Комбинированный подход\nВы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.\n/* Стили для кнопок с классом .special, которые имеют атрибут disabled */\nbutton.special[disabled] {\n background-color: darkgray;\n color: black;\n border: 1px dashed #999;\n cursor: not-allowed;\n opacity: 0.7;\n}\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-04-23T09:05:39Z","dateModified":"2026-04-23T09:05:39Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1842},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2555","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2555","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2555","headline":"🤔 Зачем нужна семантика? Семантическая разметка улучшает: - SEO – поисковики лучше понимают контент (,

,