[{"data":1,"prerenderedAt":1701},["ShallowReactive",2],{"$fc_CyEBUZCZbV_WWWrUPjUo7rJJ1SANWg_0_bhhZapto":3,"$fMMUdSFktwQFqMVGPrTtt3EC5yheBp7PzwIqznamFcMo":108,"$f1Prj1xEczHja_-L7FyIGgRHd5_cSWHo7r6AE5aheAik":111,"$fc0LoAJgqXDLbKKd2JS_NpM4SuzBK8EycUXINSg09CKU":437,"$fM3ea55k6lKMPOTM84llDB26VSQDVVbxiQuSBFQw9P_c":440,"$fI5fDmvm-5tr9wcH0eHaKZa1j3y_FQIQaHHPqbZxAHJE":684,"mdc--jtvi34-key":704,"mdc-382r39-key":716,"mdc-kpf0bd-key":734,"mdc--lhmccj-key":742,"mdc-a2jvw2-key":759,"mdc--nava02-key":767,"mdc--9zy4ab-key":791,"mdc--o9r31u-key":896,"mdc--79mrsu-key":954,"mdc--ndqpiy-key":1097,"mdc-r69cne-key":1155,"mdc-1llocs-key":1273,"mdc-ocqxrx-key":1288,"mdc-v2oc2e-key":1514,"mdc--1bnlq-key":1531,"mdc--f52noq-key":1576,"mdc-8dwhnt-key":1625,"mdc-ykx8rg-key":1664,"mdc--ax66z0-key":1672},{"content":4,"quizQuestionContent":77,"type":96,"pageMeta":97},[5,9,13,16,20,23,27,30,34,37,41,45,48,51,54,57,61,64,68,71,74],{"id":6,"value":7,"isTypeH1":8},"1902","Как найти код, меняющий фон при клике на кнопку",true,{"id":10,"value":11,"anchor":12,"isTypeH2":8},"4357","Теория и пошаговая диагностика","theory-and-step-by-step-debugging",{"id":14,"value":15,"isTypeParagraph":8},"10013","Изменение фона страницы при клике обычно происходит одним из двух путей:\n- (A) JavaScript напрямую меняет `body.style.backgroundColor` или атрибут `style`.\n- (B) JavaScript меняет класс/атрибут (например, `class=\"theme-blue\"` или `data-theme=\"blue\"`), а уже CSS по этому классу/атрибуту задает фон.\n\nНиже приведен практический алгоритм, который позволяет найти «виновника» даже при плохой читаемости кода.",{"id":17,"value":18,"anchor":19,"isTypeH3":8},"4358","Подтверждение: меняется ли именно `body`","body-check",{"id":21,"value":22,"isTypeParagraph":8},"10014","- Необходимо открыть DevTools и перейти во вкладку Elements (Inspector).\n- Необходимо выбрать узел `\u003Cbody>` и наблюдать, что изменяется при клике: `style`, `class`, `data-*` атрибуты.\n- Если у `body` ничего не меняется, возможно, меняется другой контейнер (например, основной wrapper), либо создается наложение (overlay), которое визуально выглядит как изменение фона.\n\nПрактический прием: поставить DOM breakpoint на `body`, чтобы остановиться ровно на той строке JavaScript, которая меняет DOM/атрибут.\n\n```\nElements (Inspector)\n  └─ выбрать \u003Cbody>;\n      └─ Break on...\n          ├─ Attribute modifications\n          ├─ Subtree modifications\n          └─ Node removal\n```\n\nСмысл:\n- `Attribute modifications` — остановка при изменении атрибутов (`class`, `style`, `data-*`).\n- `Subtree modifications` — остановка при изменении потомков (когда добавляются/удаляются/перестраиваются элементы внутри).\n- `Node removal` — остановка при удалении выбранного узла.",{"id":24,"value":25,"anchor":26,"isTypeH3":8},"4359","Поиск обработчика клика у кнопки","find-click-handler",{"id":28,"value":29,"isTypeParagraph":8},"10015","Чтобы понять, какой код реагирует на клик:\n- Необходимо выделить кнопку во вкладке Elements.\n- Необходимо открыть панель со слушателями событий (Event Listeners) и найти `click`.\n- Необходимо раскрыть обработчики и перейти к месту в исходниках, где они определены или где навешиваются.\n\nДополнительно полезно включить остановку на событиях:\n- В Sources (Debugger) обычно доступен раздел Event Listener Breakpoints, где можно включить паузу на `Mouse -> click`.\n- После включения паузы необходимо снова кликнуть по кнопке, отладчик остановится на коде, выполняемом в рамках обработки клика.",{"id":31,"value":32,"anchor":33,"isTypeH3":8},"4360","Сведение «эффект → причина» через Call Stack","effect-to-cause",{"id":35,"value":36,"isTypeParagraph":8},"10016","После остановки выполнения в Debugger/Sources необходимо:\n- Посмотреть Call Stack (стек вызовов) и определить ближайшую к действию функцию.\n- Перейти к строке, где меняется состояние: `style`, `classList`, `dataset`, либо вызов функции, которая это делает.\n- Определить тип изменения и выбрать корректную правку.\n\nТипичные «сигналы» в коде:\n- Прямая смена стиля: `document.body.style.backgroundColor = 'blue'`.\n- Подмена атрибута: `document.body.setAttribute('style', ...)`.\n- Переключение класса: `document.body.classList.add('is-blue')`.\n- Переключение темы: `document.body.dataset.theme = 'blue'`.\n\nУпрощенная схема действий:\n\n```\nКлик по кнопке\n   │\n   ├─(A) Остановиться на event listener breakpoint (click)  → увидеть обработчик\n   │\n   └─(B) Остановиться на DOM breakpoint (body attribute modified)\n         → увидеть строку кода, которая меняет class/style\n                 │\n                 ├─ Меняется body.style / атрибут style → причина в JS\n                 └─ Меняется class/data-атрибут         → причина в связке JS + CSS\n```",{"id":38,"description":39,"titleAlert":40,"isTypeAlertInfo":8},"633","Два наиболее сильных механизма в DevTools для таких задач — DOM breakpoints (остановка на коде, меняющем DOM) и event listener breakpoints (остановка на коде, выполняющемся после конкретного события, например `click`).",null,{"id":42,"value":43,"anchor":44,"isTypeH3":8},"4361","Проверка CSS-стороны (если меняется класс/тема)","check-css",{"id":46,"value":47,"isTypeParagraph":8},"10017","Если выяснилось, что меняется `class` или `data-theme`, значит фон рисуется CSS-правилами. Тогда необходимо:\n- В Elements открыть вкладку Styles/Computed для `body` (или для элемента, который реально окрашивает фон).\n- Найти правило, которое задает `background-color`.\n- Проверить специфичность и порядок правил, а также возможные темы, модификаторы, медиа-условия.\n\nПрактическая таблица «признак → трактовка → следующий шаг»:\n\n| Наблюдение | Что это обычно означает | Что делать дальше |\n|---|---|---|\n| У `body` появился `style=\"background-color: ...\"` | JavaScript напрямую установил стиль | Найти строку установки и заменить на корректную логику (класс/тема/переменные) |\n| У `body` изменился `class` (например, `theme-blue`) | JavaScript переключает состояние, CSS рисует | Найти место переключения класса и CSS-правило темы |\n| Фон меняется, но `body` не менялся | Меняется контейнер, псевдоэлемент, или наложение | Ставить DOM breakpoint на подозрительный контейнер, искать изменение его классов/стилей |\n| Слушатели у кнопки не видны, но клик влияет | Вероятно делегирование на `document`/`window` | Включить паузу на `click`, смотреть Call Stack и исходное место регистрации |",{"id":49,"description":50,"titleAlert":40,"isTypeAlertWarning":8},"688","Если на странице есть сторонние виджеты или минифицированные бандлы, один клик может запускать длинную цепочку вызовов. В такой ситуации основная цель — найти первую «осмысленную» функцию в Call Stack, которая меняет `class/style/dataset`, а не пытаться читать весь бандл целиком.",{"id":17,"value":52,"anchor":53,"isTypeH2":8},"Как исправить ситуацию правильно","how-to-fix-properly",{"id":55,"value":56,"isTypeParagraph":8},"10018","Цель исправления — не «перекрыть» фон, а сделать механизм изменения фона явным, предсказуемым и локализованным (один источник правды).\n\nРекомендуемые принципы исправления:\n- В CSS следует описывать темы через классы или CSS-переменные, а не через массовые `!important`.\n- В JavaScript следует переключать только состояние (класс/атрибут), а не «рисовать» стили напрямую на `body`, если в этом нет строгой необходимости.\n- Следует централизовать переключение темы: один обработчик, одна функция, одно место изменения состояния.",{"id":58,"value":59,"anchor":60,"isTypeH3":8},"4362","Пример: переключение через класс","example-toggle-by-class",{"id":62,"value":63,"isTypeParagraph":8},"10019","```\n\u003C!-- HTML -->\n\u003Cbutton id=\"toggle-theme\">Toggle theme\u003C/button>\n```\n\n```\n/* CSS */\nbody {\n  background-color: red;\n}\n\nbody.is-blue {\n  background-color: blue;\n}\n```\n\n```\n// JS\ndocument.getElementById('toggle-theme')?.addEventListener('click', () => {\n  document.body.classList.toggle('is-blue');\n});\n```\n\nПлюсы:\n- Логика темы отделена от рисования.\n- CSS остается единственным местом, где описаны цвета.",{"id":65,"value":66,"anchor":67,"isTypeH3":8},"4363","Пример: масштабируемо через CSS-переменные","example-toggle-by-css-variables",{"id":69,"value":70,"isTypeParagraph":8},"10020","```\n/* CSS */\n:root {\n  --page-bg: red;\n}\n\nbody {\n  background-color: var(--page-bg);\n}\n\nbody[data-theme=\"blue\"] {\n  --page-bg: blue;\n}\n```\n\n```\n// JS\ndocument.getElementById('toggle-theme')?.addEventListener('click', () => {\n  const next = document.body.dataset.theme === 'blue' ? 'red' : 'blue';\n  document.body.dataset.theme = next;\n});\n```\n\nПлюсы:\n- Удобно расширять на множество цветов и параметров (текст, границы, акценты).\n- Можно менять тему, не переписывая множество CSS-правил.\n",{"id":72,"description":73,"titleAlert":40,"isTypeAlertWarning":8},"689","Если фон меняется из-за расширения браузера или внешней инъекции (например, через внедренный скрипт), то «исправление в коде сайта» не даст результата. Для проверки необходимо воспроизвести проблему в чистом профиле браузера и без расширений.",{"id":75,"value":76,"isTypeParagraph":8},"10021","Итого: верным является вариант 3, потому что DevTools позволяют увидеть обработчики `click` у кнопки и остановиться на коде, который меняет `body` (DOM breakpoints) или выполняется после клика (event listener breakpoints); исправление следует делать через явную логику темы (класс/атрибут/CSS-переменные), а не через маскирующие `!important`.",{"id":78,"options":79,"hint":93,"solution":94,"description":95},"1141",[80,84,87,90],{"id":81,"label":82,"isCorrect":83},"4696","Следует сразу заменить все файлы CSS на странице, прописав глобальное правило `body { background-color: red !important; }`, чтобы перекрыть любые другие стили.",false,{"id":85,"label":86,"isCorrect":83},"4697","Нужно отключить JavaScript в браузере и проверить, сохраняется ли проблема. Если да, то искать ошибку в CSS, если нет — удалить все обработчики событий с кнопки.",{"id":88,"label":89,"isCorrect":8},"4698","Необходимо открыть DevTools, посмотреть обработчики `click` у кнопки, затем поставить точки останова (на событии или на DOM-изменении) и выйти на строку, которая меняет фон.",{"id":91,"label":92,"isCorrect":83},"4699","Требуется провести поиск по всему исходному коду страницы (Ctrl+U) по слову blue' и вручную заменить все найденные вхождения на 'red'.","Подсказка для задачи: следует начать не с «поиска по словам», а с постановки точки останова, которая гарантированно приведет к виновной строке — DOM breakpoint на `body` (Attribute modifications) и/или event listener breakpoint на `click`.","**Правильный ответ: 3** - необходимо открыть DevTools, посмотреть обработчики `click` у кнопки, затем поставить точки останова (на событии или на DOM-изменении) и выйти на строку, которая меняет фон.\n\nВ задачах «непонятный код и неизвестно, кто меняет DOM» наиболее надежная стратегия — отладка «снаружи внутрь»: сначала фиксируется наблюдаемый эффект (смена фона), затем средствами DevTools определяется конкретный обработчик/строка кода, вызывающая эффект.\n\nПочему остальные неверны?\n\n1) Принудительное `!important` скрывает причину, но не объясняет «кто виноват». Такой подход маскирует проблему, ломает каскад стилей и усложняет дальнейшую диагностику: эффект исчезнет, но источник останется, а позже проявится в другом месте.\n\n2) Отключение JavaScript может дать грубую подсказку, CSS это или JS, но шаг «удалить все обработчики событий с кнопки» не является надежным методом поиска причины. Обработчики могут быть навешаны делегированно (например, на `document`), через фреймворк, через сторонний виджет, через инъекцию, поэтому удаление «локальных» слушателей у кнопки может не убрать поведение. Гораздо точнее остановиться на реальном выполняемом коде через breakpoints.\n\n4) Поиск по `blue` в HTML-исходнике (`Ctrl+U`) часто не находит реальную причину: цвет может задаваться через класс, CSS-переменную, вычисляться в JavaScript, приходить из минифицированного бандла, либо задаваться не строкой `blue`, а, например, `#00f` или `rgb(0, 0, 255)`.","Ситуация: есть сайт, до кода нет возможности дотянуться, а когда дотянешься, то поймешь, что невозможно его читать, он непонятен. На сайте есть кнопка, при нажатии на нее меняется цвет фона с красного на синий. Какие шаги необходимо предпринять, чтобы понять, кто виновник этого действия (изменение цвета)? Как исправить данную ситуацию?","quizQuestion",{"title":98,"description":99,"ogTitle":7,"ogDescription":100,"ogImageUrl":101,"canonical":40,"ogLocale":102,"ogSiteName":103,"ogImageType":104,"ogImageWidth":105,"ogImageHeight":106,"ogType":107,"ogUrl":40},"Диагностика нежелательного изменения стилей на сайте","Пошаговый разбор DevTools: слушатели событий, DOM breakpoints и поиск места, где меняется background-color.\n","Пошаговый разбор DevTools: слушатели событий, DOM breakpoints и поиск места, где меняется background-color.","/og-image.png","ru_RU","goodwebjob.ru","image_jpeg","1200","630","article",{"siteName":109,"siteUrl":110},"GOOD WEB JOB!","https://goodwebjob.ru",{"slugs":112},[113,116,119,122,125,128,131,134,137,140,143,146,149,152,155,158,161,164,167,170,173,176,179,182,185,188,191,194,197,200,203,206,209,212,215,218,221,224,227,230,233,236,239,242,245,248,251,254,257,260,263,266,269,272,275,278,281,284,287,290,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434],{"name":114,"value":115},"Теоретические задания","theoretical-tasks",{"name":117,"value":118},"Что вернёт этот код: typeof (function(){})()","what-this-code-will-return-typeof-function",{"name":120,"value":121},"С чего начать?","where-to-begin",{"name":123,"value":124},"Почему опасно писать прямо в прототипы базовых типов?","why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":126,"value":127},"Backend","backend",{"name":129,"value":130},"Frontend","frontend",{"name":132,"value":133},"Какие логические значения в console.log будут получены?","prototype-what-logical-values-will-be-received-in-console-log",{"name":135,"value":136},"Нечётные числа должны отсортироваться по возрастанию, а чётные должны остаться на своих местах","odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":138,"value":139}," Найти в массиве неповторяющиеся числа","find-non-repeating-numbers-in-an-array",{"name":141,"value":142},"arr.push(0) повлияет на массив так же, как если бы мы выполнили...","arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":144,"value":145},"Дана строка: 'one.two.three.four.five'. Необходимо из строки сделать вложенный объект","the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":147,"value":148},"Реализовать функцию, похоже как в Jquery","implement-a-function-similar-to-jquery",{"name":150,"value":151},"Для каждого вложенного объекта нужно добавить свойство level, которое равняется числу - номер вложенности","for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":153,"value":154},"Какое значение выведет консоль с object.property?","what-value-will-the-console-output-with-object-property",{"name":156,"value":157},"Что выведется в console.log([arr[0](), arr[0]()])?","what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":159,"value":160},"Вернуть массив от 1 до n, где числа, кратные 3, заменены на 'fizz', кратные 5 - на 'buzz', а кратные и 3, и 5 одновременно - на 'fizzbuzz'","returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":162,"value":163},"Необходимо проверить, являются ли две строки анаграммами друг друга","checks-whether-two-strings-are-anagrams-of-each-other",{"name":165,"value":166},"Определить, является ли слово палиндромом","determines-whether-a-word-is-a-palindrome",{"name":168,"value":169},"Есть массив, в котором лежат объекты с датами, необходимо отсортировать даты по возрастанию","there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":171,"value":172},"Реализовать функцию, принимающую аргументы \"*\", \"1\", \"b\", \"1c\" и возвращающую строку \"1*b*1c\"","implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":174,"value":175},"Дано дерево (вложенный объект), надо найти сумму всех вершин","given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":177,"value":178},"Для каждой ветви дерева записать номер вложенности данной ветви","for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":180,"value":181},"Есть слова в массиве, необходимо определить, состоят ли они из одних и тех же букв","there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":183,"value":184},"Числа от 1 до 100 находятся в массиве, они хаотично перемешанные, но в нём не хватает одного числа из этой последовательности. Необходимо найти его","the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"name":186,"value":187},"Есть строка, состоящая из разных скобок, необходимо проверить, закрыты ли все","there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":189,"value":190},"Напишите функцию, который сделает из массива объект","write-a-function-that-will-make-an-object-out-of-an-array",{"name":192,"value":193},"Что выведет console.log в результате выполнения цикла while?","what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":195,"value":196},"Есть функция и объект. Напишите все известные вам способы, чтобы вывести в консоли значение x из объекта, используя функцию","there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":198,"value":199},"Что выведет консоль в случае присвоения свойства массиву по строковому отрицательному индексу?","what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":201,"value":202},"Что выведет консоль в случае удаления элемента массива с помощью оператора delete?","what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":204,"value":205},"Уникализация значений в массиве","unifying-values-in-an-array",{"name":207,"value":208},"«Расплющивание» массива","flattening-the-array",{"name":210,"value":211},"Что вернёт метод book.getUpperName()?","what-will-the-book-get-upper-name-method-return",{"name":213,"value":214},"Сжатие строк","string-compression",{"name":216,"value":217},"Что выведет консоль в случае присвоения свойства массиву по строковому положительному индексу?","what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":219,"value":220},"Что получится в результате передачи объекта как аргумента в функцию и выполнения кода?","what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":222,"value":223},"Как браузер после ввода домена понимает, откуда брать сайт?","how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":225,"value":226},"Как домен попадает в DNS в таблицу соответствия: домен – ip","how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":228,"value":229},"Как браузер решает, какое соединение ему открывать, TCP или UDP?","how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":231,"value":232},"Ключевые отличия TCP и UDP","key-differences-between-tcp-and-udp",{"name":234,"value":235},"\"TCP/IP\" - кем является TCP, а кем IP в данном случае?","tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":237,"value":238},"Что такое HTTP и из чего состоит?","what-is-http-and-what-does-it-consist-of",{"name":240,"value":241},"Что такое заголовки в HTTP и зачем они нужны?","what-are-http-headers-and-why-do-we-need-them",{"name":243,"value":244},"Что такое параметры в HTTP?","what-are-http-parameters",{"name":246,"value":247},"Где находится HTML-код в структуре HTTP-ответа?","where-is-the-html-code-located-in-the-http-response-structure",{"name":249,"value":250},"Что такое HTML?","what-is-html",{"name":252,"value":253},"Чем отличаются 1.0, 1.1, 2.0, 3.0 версии HTTP?","what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":255,"value":256},"Пользователь авторизован на сайте. Как сервер узнает об этом с последующими другими заходами, что «я – авторизованный пользователь»?","the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":258,"value":259},"Что такое cookie?","what-is-a-cookie",{"name":261,"value":262},"Кто является инициатором записи cookie в браузере?","who-initiates-the-cookie-recording-in-the-browser",{"name":264,"value":265},"Есть ли возможность с клиента (с браузера) управлять cookie?","is-it-possible-to-manage-cookies-from-the-client-browser",{"name":267,"value":268},"Лайвкодинг","livecoding",{"name":270,"value":271},"Что вернёт следующий код? Object.create(null).hasOwnProperty('toString')","what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":273,"value":274},"Всё, что идет по HTTPS – оно защищено?","is-everything-that-goes-through-https-secure",{"name":276,"value":277},"Все данные зашифрованы, используется https. Хакер взламывает dns и делает подмену одного ip на другой, на фишинговый сайт. В этом случае, злоумышленник может получить данные (логин \\ пароль)?","all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":279,"value":280},"Есть веб-приложение. Помимо HTTP, какие протоколы того же уровня (Application Layer) можно дополнительно использовать в веб-приложении в браузере?","there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":282,"value":283},"Как браузер парсит JavaScript и изображения при рендеринге?","how-the-browser-parses-javascript-and-images-when-rendering",{"name":285,"value":286},"Что происходит, когда HTTP прислал HTML? Что браузер дальше делает c HTML с учетом того, что она валидная?","what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":288,"value":289},"Что в браузере блокирует рендеринг страницы?","what-is-blocking-the-page-rendering-in-the-browser",{"name":291,"value":292},"Что такое DOM в браузере? Что такое CSSOM?","what-is-dom-in-a-browser-what-is-cssom",{"name":294,"value":295},"Что является узлами в DOM?","what-are-nodes-in-the-dom",{"name":297,"value":298},"Из чего состоит CSSOM?","what-does-cssom-consist-of",{"name":300,"value":301},"Дан HTML-код. Какой будет цвет у текста «Some dummy text»?","the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":303,"value":304},"Есть шаблон HTML и CSS кода. Какой будет цвет у текста «Таким образом, постоянное»?","there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":306,"value":307},"Есть шаблон вложенного HTML кода. Какой будет цвет у текста «One more dummy text»?","there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":309,"value":310},"Есть шаблон вложенного HTML кода. Будет ли display:block у body влиять на span?","there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":312,"value":313},"Есть HTML код. Будет ли font-weight на span влиять?","there-is-an-html-code-will-font-weight-affect-span",{"name":315,"value":316},"Flexbox и Grid, чем отличаются друг от друга?","what-are-the-differences-between-flexbox-and-grid",{"name":318,"value":319},"Заменяют ли Flexbox и Grid друг друга?","do-flexbox-and-grid-replace-each-other",{"name":321,"value":322},"Есть CSS и JS анимация. Какая между ними разница, что быстрее, что более удобно?","there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"name":324,"value":325},"Сборник задач","tasks",{"name":327,"value":328},"Какие способы объявления функции есть в JavaScript?","what-are-the-ways-to-declare-a-function-in-javascript",{"name":330,"value":331},"Что такое this в JavaScript?","what-is-this-in-javascript",{"name":333,"value":334},"Что такое Event Loop, как работает?","what-is-an-event-loop-and-how-does-it-work",{"name":336,"value":337},"Что будет, если вызвать typeof на необъявленной переменной?","what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":339,"value":340},"Что показывает оператор typeof в JavaScript?","what-does-the-typeof-operator-show-in-javascript",{"name":342,"value":343},"Какие типы данных существует в JavaScript?","what-types-of-data-exist-in-javascript",{"name":345,"value":346},"Какую структуру использовать для хранения упорядоченного списка строк в JavaScript?","what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":348,"value":349},"Что вернет typeof для массива?","what-will-typeof-return-for-an-array",{"name":351,"value":352},"Почему оператор typeof, применённый к массиву, возвращает объект?","why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":354,"value":355},"Если нужно хранить список уникальных строк, какую структуру данных выбрать?","if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":357,"value":358},"Что возвращает typeof для new Set в JavaScript?","what-does-typeof-return-for-new-set-in-javascript",{"name":360,"value":361},"Для чего нужен React, какие он решает проблемы?","what-is-react-used-for-and-what-problems-does-it-solve",{"name":363,"value":364},"Если убрать в React VDOM/Fiber, и вручную изменять DOM, разве это не оптимально?","if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":366,"value":367},"Есть блок кода. Что в реальном DOM изменится после нажатия на кнопку?","there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":369,"value":370},"Есть код, в котором список и кнопка. Что в реальном DOM изменится после нажатия на кнопку?","there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":372,"value":373},"Зачем нужен Redux (Mobx/Effector)? Зачем нужен менеджер состояния? Какие проблемы решает?","why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":375,"value":376},"Как диагностировать и исправить нежелательное изменение цвета фона по клику на кнопку, если исходный код сайта запутан и недоступен для прямого чтения?","how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"name":378,"value":379},"Разрабатывал, взял закоммитил, запушил. Оказалось, что запушил не в ту ветку, точнее, коммит не в ту ветку. Какие действия?","developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":381,"value":382},"В git есть несколько вариантов слияния веток, какие? Чем отличаются?","git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":384,"value":385},"Какие существуют стратегии ветвления для работы команды? Что это такое?","what-are-the-branching-strategies-for-the-team-what-is-it",{"name":387,"value":388},"По каким характеристикам, ревьюер понимает, что данный код - хороший, а этот код - плохой?","how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"name":390,"value":391},"Дан фрагмент bash-скрипта: cd ~; mkdir foo... Что в нем происходит?","here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":393,"value":394},"Дан фрагмент bash-скрипта: target=$(ps -Af | grep $1 | head -n 1)...","here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"name":396,"value":397},"Что такое алгоритмическая сложность?","what-is-algorithmic-complexity",{"name":399,"value":400},"Какая алгоритмическая сложность у \"быстрой сортировки\"?","what-is-the-algorithmic-complexity-of-quick-sort",{"name":402,"value":403},"Почему в JavaScript два объекта с одинаковым содержимым при сравнении возвращают false?","why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":405,"value":406},"Каким способом может выполняться авторизация пользователя на сайте?","how-can-a-user-be-authorized-on-a-website",{"name":408,"value":409},"В чем разница между микро- и макро-тасками в JavaScript?","what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":411,"value":412},"В комнате три человека. Какова вероятность того, что хотя бы двое из них одного пола? То есть два и более.","there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":414,"value":415},"Есть монета. Ее подбрасывают пять раз подряд. Каждый раз записывается, что выпало - орел или решка. Сколько разных последовательностей орлов и решек может при этом получиться?","there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":417,"value":418},"Как гарантированно найти лёгкую фальшивую монету среди 8 за минимальное число взвешиваний на чашечных весах?","how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"name":420,"value":421},"Подготовка к тех.интервью","technical-interview",{"name":423,"value":424},"Верно ли утверждение, что злоумышленник, контролирующий роутер и прослушивающий трафик, может получить логины и пароли от сайтов, на которые заходит клиент?","is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":426,"value":427},"Что такое DNS, как DNS находит нужный IP-адрес?","what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":429,"value":430},"Переменные объявлены следующим образом: a=3; b=«hello»;. Укажите правильное утверждение","variables-are-declared-as-follows-specify-the-correct-statement",{"name":432,"value":433},"Какой механизм лежит в основе оптимизации обновлений DOM в React?","what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":435,"value":436},"Что мешает организовать централизованное состояние без менеджера состояния? Если организовать состояние механизмами реакта: контекстом, стейтом, в чем проблема? Что менеджеры состояния привносят?","what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",[438],{"label":420,"slug":421,"to":439},"/technical-interview/where-to-begin",{"navigationList":441,"navigationSublist":447},[442,444],{"path":439,"isActive":83,"name":120,"icon":443,"isNavbarMobileDisabled":8},"material-symbols:visibility-outline-rounded",{"path":445,"isActive":8,"name":324,"icon":446,"isNavbarMobileDisabled":83},"/technical-interview/tasks","material-symbols:task-outline",[448,455,474,483,488,583,600,607,612,655,670,675],{"title":449,"list":450,"isOpened":83},"Bash",[451,453],{"name":390,"path":452,"isActive":83},"/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":393,"path":454,"isActive":83},"/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"title":456,"list":457,"isOpened":83},"CSS",[458,460,462,464,466,468,470,472],{"name":300,"path":459,"isActive":83},"/technical-interview/tasks/the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":303,"path":461,"isActive":83},"/technical-interview/tasks/there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":306,"path":463,"isActive":83},"/technical-interview/tasks/there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":309,"path":465,"isActive":83},"/technical-interview/tasks/there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":312,"path":467,"isActive":83},"/technical-interview/tasks/there-is-an-html-code-will-font-weight-affect-span",{"name":315,"path":469,"isActive":83},"/technical-interview/tasks/what-are-the-differences-between-flexbox-and-grid",{"name":318,"path":471,"isActive":83},"/technical-interview/tasks/do-flexbox-and-grid-replace-each-other",{"name":321,"path":473,"isActive":83},"/technical-interview/tasks/there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"title":475,"list":476,"isOpened":83},"Git",[477,479,481],{"name":378,"path":478,"isActive":83},"/technical-interview/tasks/developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":381,"path":480,"isActive":83},"/technical-interview/tasks/git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":384,"path":482,"isActive":83},"/technical-interview/tasks/what-are-the-branching-strategies-for-the-team-what-is-it",{"title":484,"list":485,"isOpened":83},"HTML",[486],{"name":249,"path":487,"isActive":83},"/technical-interview/tasks/what-is-html",{"title":489,"list":490,"isOpened":83},"JavaScript",[491,493,495,497,499,501,503,505,507,509,511,513,515,517,519,521,523,525,527,529,531,533,535,537,539,541,543,545,547,549,551,553,555,557,559,561,563,565,567,569,571,573,575,577,579,581],{"name":132,"path":492,"isActive":83},"/technical-interview/tasks/prototype-what-logical-values-will-be-received-in-console-log",{"name":123,"path":494,"isActive":83},"/technical-interview/tasks/why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":270,"path":496,"isActive":83},"/technical-interview/tasks/what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":153,"path":498,"isActive":83},"/technical-interview/tasks/what-value-will-the-console-output-with-object-property",{"name":156,"path":500,"isActive":83},"/technical-interview/tasks/what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":192,"path":502,"isActive":83},"/technical-interview/tasks/what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":195,"path":504,"isActive":83},"/technical-interview/tasks/there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":210,"path":506,"isActive":83},"/technical-interview/tasks/what-will-the-book-get-upper-name-method-return",{"name":429,"path":508,"isActive":83},"/technical-interview/tasks/variables-are-declared-as-follows-specify-the-correct-statement",{"name":216,"path":510,"isActive":83},"/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":198,"path":512,"isActive":83},"/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":201,"path":514,"isActive":83},"/technical-interview/tasks/what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":117,"path":516,"isActive":83},"/technical-interview/tasks/what-this-code-will-return-typeof-function",{"name":219,"path":518,"isActive":83},"/technical-interview/tasks/what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":327,"path":520,"isActive":83},"/technical-interview/tasks/what-are-the-ways-to-declare-a-function-in-javascript",{"name":330,"path":522,"isActive":83},"/technical-interview/tasks/what-is-this-in-javascript",{"name":333,"path":524,"isActive":83},"/technical-interview/tasks/what-is-an-event-loop-and-how-does-it-work",{"name":336,"path":526,"isActive":83},"/technical-interview/tasks/what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":339,"path":528,"isActive":83},"/technical-interview/tasks/what-does-the-typeof-operator-show-in-javascript",{"name":342,"path":530,"isActive":83},"/technical-interview/tasks/what-types-of-data-exist-in-javascript",{"name":345,"path":532,"isActive":83},"/technical-interview/tasks/what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":348,"path":534,"isActive":83},"/technical-interview/tasks/what-will-typeof-return-for-an-array",{"name":351,"path":536,"isActive":83},"/technical-interview/tasks/why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":354,"path":538,"isActive":83},"/technical-interview/tasks/if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":357,"path":540,"isActive":83},"/technical-interview/tasks/what-does-typeof-return-for-new-set-in-javascript",{"name":402,"path":542,"isActive":83},"/technical-interview/tasks/why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":408,"path":544,"isActive":83},"/technical-interview/tasks/what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":141,"path":546,"isActive":83},"/technical-interview/tasks/arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":159,"path":548,"isActive":83},"/technical-interview/tasks/returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":144,"path":550,"isActive":83},"/technical-interview/tasks/the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":174,"path":552,"isActive":83},"/technical-interview/tasks/given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":150,"path":554,"isActive":83},"/technical-interview/tasks/for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":177,"path":556,"isActive":83},"/technical-interview/tasks/for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":168,"path":558,"isActive":83},"/technical-interview/tasks/there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":180,"path":560,"isActive":83},"/technical-interview/tasks/there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":186,"path":562,"isActive":83},"/technical-interview/tasks/there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":138,"path":564,"isActive":83},"/technical-interview/tasks/find-non-repeating-numbers-in-an-array",{"name":189,"path":566,"isActive":83},"/technical-interview/tasks/write-a-function-that-will-make-an-object-out-of-an-array",{"name":162,"path":568,"isActive":83},"/technical-interview/tasks/checks-whether-two-strings-are-anagrams-of-each-other",{"name":135,"path":570,"isActive":83},"/technical-interview/tasks/odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":165,"path":572,"isActive":83},"/technical-interview/tasks/determines-whether-a-word-is-a-palindrome",{"name":207,"path":574,"isActive":83},"/technical-interview/tasks/flattening-the-array",{"name":171,"path":576,"isActive":83},"/technical-interview/tasks/implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":213,"path":578,"isActive":83},"/technical-interview/tasks/string-compression",{"name":204,"path":580,"isActive":83},"/technical-interview/tasks/unifying-values-in-an-array",{"name":183,"path":582,"isActive":83},"/technical-interview/tasks/the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"title":584,"list":585,"isOpened":83},"React",[586,588,590,592,594,596,598],{"name":360,"path":587,"isActive":83},"/technical-interview/tasks/what-is-react-used-for-and-what-problems-does-it-solve",{"name":432,"path":589,"isActive":83},"/technical-interview/tasks/what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":363,"path":591,"isActive":83},"/technical-interview/tasks/if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":366,"path":593,"isActive":83},"/technical-interview/tasks/there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":369,"path":595,"isActive":83},"/technical-interview/tasks/there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":372,"path":597,"isActive":83},"/technical-interview/tasks/why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":435,"path":599,"isActive":83},"/technical-interview/tasks/what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"title":601,"list":602,"isOpened":83},"Алгоритмы",[603,605],{"name":396,"path":604,"isActive":83},"/technical-interview/tasks/what-is-algorithmic-complexity",{"name":399,"path":606,"isActive":83},"/technical-interview/tasks/what-is-the-algorithmic-complexity-of-quick-sort",{"title":608,"list":609,"isOpened":83},"Дебаггинг",[610],{"name":375,"path":611,"isActive":83},"/technical-interview/tasks/how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"title":613,"list":614,"isOpened":83},"Компьютерные сети",[615,617,619,621,623,625,627,629,631,633,635,637,639,641,643,645,647,649,651,653],{"name":222,"path":616,"isActive":83},"/technical-interview/tasks/how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":426,"path":618,"isActive":83},"/technical-interview/tasks/what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":225,"path":620,"isActive":83},"/technical-interview/tasks/how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":228,"path":622,"isActive":83},"/technical-interview/tasks/how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":231,"path":624,"isActive":83},"/technical-interview/tasks/key-differences-between-tcp-and-udp",{"name":234,"path":626,"isActive":83},"/technical-interview/tasks/tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":237,"path":628,"isActive":83},"/technical-interview/tasks/what-is-http-and-what-does-it-consist-of",{"name":240,"path":630,"isActive":83},"/technical-interview/tasks/what-are-http-headers-and-why-do-we-need-them",{"name":243,"path":632,"isActive":83},"/technical-interview/tasks/what-are-http-parameters",{"name":246,"path":634,"isActive":83},"/technical-interview/tasks/where-is-the-html-code-located-in-the-http-response-structure",{"name":252,"path":636,"isActive":83},"/technical-interview/tasks/what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":255,"path":638,"isActive":83},"/technical-interview/tasks/the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":258,"path":640,"isActive":83},"/technical-interview/tasks/what-is-a-cookie",{"name":261,"path":642,"isActive":83},"/technical-interview/tasks/who-initiates-the-cookie-recording-in-the-browser",{"name":264,"path":644,"isActive":83},"/technical-interview/tasks/is-it-possible-to-manage-cookies-from-the-client-browser",{"name":423,"path":646,"isActive":83},"/technical-interview/tasks/is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":273,"path":648,"isActive":83},"/technical-interview/tasks/is-everything-that-goes-through-https-secure",{"name":276,"path":650,"isActive":83},"/technical-interview/tasks/all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":279,"path":652,"isActive":83},"/technical-interview/tasks/there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":405,"path":654,"isActive":83},"/technical-interview/tasks/how-can-a-user-be-authorized-on-a-website",{"title":656,"list":657,"isOpened":83},"Отрисовка в браузере",[658,660,662,664,666,668],{"name":285,"path":659,"isActive":83},"/technical-interview/tasks/what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":282,"path":661,"isActive":83},"/technical-interview/tasks/how-the-browser-parses-javascript-and-images-when-rendering",{"name":288,"path":663,"isActive":83},"/technical-interview/tasks/what-is-blocking-the-page-rendering-in-the-browser",{"name":291,"path":665,"isActive":83},"/technical-interview/tasks/what-is-dom-in-a-browser-what-is-cssom",{"name":294,"path":667,"isActive":83},"/technical-interview/tasks/what-are-nodes-in-the-dom",{"name":297,"path":669,"isActive":83},"/technical-interview/tasks/what-does-cssom-consist-of",{"title":671,"list":672,"isOpened":83},"Ревью кода",[673],{"name":387,"path":674,"isActive":83},"/technical-interview/tasks/how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"title":676,"list":677,"isOpened":83},"Теория вероятности",[678,680,682],{"name":411,"path":679,"isActive":83},"/technical-interview/tasks/there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":414,"path":681,"isActive":83},"/technical-interview/tasks/there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":417,"path":683,"isActive":83},"/technical-interview/tasks/how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"cooperation":685,"copyright":688,"reportError":689,"socialNetwork":691},{"link":686,"title":687},"https://t.me/baurinanton","Сотрудничество","© “GOOD WEB JOB!”",{"label":690,"link":686},"Сообщить об ошибке",{"label":692,"socialNetworkList":693},"Мы в соцсетях:",[694,697,700],{"icon":40,"link":695,"title":696},"https://max.ru/u/f9LHodD0cOKMaukdnnahTeL5pwvjrPfUaZ4S8_1rsNy9I9qsmc9Ar3kP_y8","Max",{"icon":698,"link":686,"title":699},"ic:baseline-telegram","Telegram",{"icon":701,"link":702,"title":703},"ri:vk-fill","https://vk.com/baurinanton","VK",{"data":705,"body":706},{},{"type":707,"children":708},"root",[709],{"type":710,"tag":711,"props":712,"children":713},"element","p",{},[714],{"type":715,"value":95},"text",{"data":717,"body":718},{},{"type":707,"children":719},[720],{"type":710,"tag":711,"props":721,"children":722},{},[723,725,732],{"type":715,"value":724},"Следует сразу заменить все файлы CSS на странице, прописав глобальное правило ",{"type":710,"tag":726,"props":727,"children":729},"code",{"className":728},[],[730],{"type":715,"value":731},"body { background-color: red !important; }",{"type":715,"value":733},", чтобы перекрыть любые другие стили.",{"data":735,"body":736},{},{"type":707,"children":737},[738],{"type":710,"tag":711,"props":739,"children":740},{},[741],{"type":715,"value":86},{"data":743,"body":744},{},{"type":707,"children":745},[746],{"type":710,"tag":711,"props":747,"children":748},{},[749,751,757],{"type":715,"value":750},"Необходимо открыть DevTools, посмотреть обработчики ",{"type":710,"tag":726,"props":752,"children":754},{"className":753},[],[755],{"type":715,"value":756},"click",{"type":715,"value":758}," у кнопки, затем поставить точки останова (на событии или на DOM-изменении) и выйти на строку, которая меняет фон.",{"data":760,"body":761},{},{"type":707,"children":762},[763],{"type":710,"tag":711,"props":764,"children":765},{},[766],{"type":715,"value":92},{"data":768,"body":769},{},{"type":707,"children":770},[771],{"type":710,"tag":711,"props":772,"children":773},{},[774,776,782,784,789],{"type":715,"value":775},"Подсказка для задачи: следует начать не с «поиска по словам», а с постановки точки останова, которая гарантированно приведет к виновной строке — DOM breakpoint на ",{"type":710,"tag":726,"props":777,"children":779},{"className":778},[],[780],{"type":715,"value":781},"body",{"type":715,"value":783}," (Attribute modifications) и/или event listener breakpoint на ",{"type":710,"tag":726,"props":785,"children":787},{"className":786},[],[788],{"type":715,"value":756},{"type":715,"value":790},".",{"data":792,"body":793},{},{"type":707,"children":794},[795,812,817,822],{"type":710,"tag":711,"props":796,"children":797},{},[798,804,806,811],{"type":710,"tag":799,"props":800,"children":801},"strong",{},[802],{"type":715,"value":803},"Правильный ответ: 3",{"type":715,"value":805}," - необходимо открыть DevTools, посмотреть обработчики ",{"type":710,"tag":726,"props":807,"children":809},{"className":808},[],[810],{"type":715,"value":756},{"type":715,"value":758},{"type":710,"tag":711,"props":813,"children":814},{},[815],{"type":715,"value":816},"В задачах «непонятный код и неизвестно, кто меняет DOM» наиболее надежная стратегия — отладка «снаружи внутрь»: сначала фиксируется наблюдаемый эффект (смена фона), затем средствами DevTools определяется конкретный обработчик/строка кода, вызывающая эффект.",{"type":710,"tag":711,"props":818,"children":819},{},[820],{"type":715,"value":821},"Почему остальные неверны?",{"type":710,"tag":823,"props":824,"children":825},"ol",{},[826,840,853],{"type":710,"tag":827,"props":828,"children":829},"li",{},[830,832,838],{"type":715,"value":831},"Принудительное ",{"type":710,"tag":726,"props":833,"children":835},{"className":834},[],[836],{"type":715,"value":837},"!important",{"type":715,"value":839}," скрывает причину, но не объясняет «кто виноват». Такой подход маскирует проблему, ломает каскад стилей и усложняет дальнейшую диагностику: эффект исчезнет, но источник останется, а позже проявится в другом месте.",{"type":710,"tag":827,"props":841,"children":842},{},[843,845,851],{"type":715,"value":844},"Отключение JavaScript может дать грубую подсказку, CSS это или JS, но шаг «удалить все обработчики событий с кнопки» не является надежным методом поиска причины. Обработчики могут быть навешаны делегированно (например, на ",{"type":710,"tag":726,"props":846,"children":848},{"className":847},[],[849],{"type":715,"value":850},"document",{"type":715,"value":852},"), через фреймворк, через сторонний виджет, через инъекцию, поэтому удаление «локальных» слушателей у кнопки может не убрать поведение. Гораздо точнее остановиться на реальном выполняемом коде через breakpoints.",{"type":710,"tag":827,"props":854,"children":855},{},[856,858,864,866,872,874,879,881,887,889,895],{"type":715,"value":857},"Поиск по ",{"type":710,"tag":726,"props":859,"children":861},{"className":860},[],[862],{"type":715,"value":863},"blue",{"type":715,"value":865}," в HTML-исходнике (",{"type":710,"tag":726,"props":867,"children":869},{"className":868},[],[870],{"type":715,"value":871},"Ctrl+U",{"type":715,"value":873},") часто не находит реальную причину: цвет может задаваться через класс, CSS-переменную, вычисляться в JavaScript, приходить из минифицированного бандла, либо задаваться не строкой ",{"type":710,"tag":726,"props":875,"children":877},{"className":876},[],[878],{"type":715,"value":863},{"type":715,"value":880},", а, например, ",{"type":710,"tag":726,"props":882,"children":884},{"className":883},[],[885],{"type":715,"value":886},"#00f",{"type":715,"value":888}," или ",{"type":710,"tag":726,"props":890,"children":892},{"className":891},[],[893],{"type":715,"value":894},"rgb(0, 0, 255)",{"type":715,"value":790},{"data":897,"body":898},{},{"type":707,"children":899},[900,905,949],{"type":710,"tag":711,"props":901,"children":902},{},[903],{"type":715,"value":904},"Изменение фона страницы при клике обычно происходит одним из двух путей:",{"type":710,"tag":906,"props":907,"children":908},"ul",{},[909,929],{"type":710,"tag":827,"props":910,"children":911},{},[912,914,920,922,928],{"type":715,"value":913},"(A) JavaScript напрямую меняет ",{"type":710,"tag":726,"props":915,"children":917},{"className":916},[],[918],{"type":715,"value":919},"body.style.backgroundColor",{"type":715,"value":921}," или атрибут ",{"type":710,"tag":726,"props":923,"children":925},{"className":924},[],[926],{"type":715,"value":927},"style",{"type":715,"value":790},{"type":710,"tag":827,"props":930,"children":931},{},[932,934,940,941,947],{"type":715,"value":933},"(B) JavaScript меняет класс/атрибут (например, ",{"type":710,"tag":726,"props":935,"children":937},{"className":936},[],[938],{"type":715,"value":939},"class=\"theme-blue\"",{"type":715,"value":888},{"type":710,"tag":726,"props":942,"children":944},{"className":943},[],[945],{"type":715,"value":946},"data-theme=\"blue\"",{"type":715,"value":948},"), а уже CSS по этому классу/атрибуту задает фон.",{"type":710,"tag":711,"props":950,"children":951},{},[952],{"type":715,"value":953},"Ниже приведен практический алгоритм, который позволяет найти «виновника» даже при плохой читаемости кода.",{"data":955,"body":956},{},{"type":707,"children":957},[958,1013,1025,1037,1042],{"type":710,"tag":906,"props":959,"children":960},{},[961,966,1001],{"type":710,"tag":827,"props":962,"children":963},{},[964],{"type":715,"value":965},"Необходимо открыть DevTools и перейти во вкладку Elements (Inspector).",{"type":710,"tag":827,"props":967,"children":968},{},[969,971,977,979,984,986,992,993,999],{"type":715,"value":970},"Необходимо выбрать узел ",{"type":710,"tag":726,"props":972,"children":974},{"className":973},[],[975],{"type":715,"value":976},"\u003Cbody>",{"type":715,"value":978}," и наблюдать, что изменяется при клике: ",{"type":710,"tag":726,"props":980,"children":982},{"className":981},[],[983],{"type":715,"value":927},{"type":715,"value":985},", ",{"type":710,"tag":726,"props":987,"children":989},{"className":988},[],[990],{"type":715,"value":991},"class",{"type":715,"value":985},{"type":710,"tag":726,"props":994,"children":996},{"className":995},[],[997],{"type":715,"value":998},"data-*",{"type":715,"value":1000}," атрибуты.",{"type":710,"tag":827,"props":1002,"children":1003},{},[1004,1006,1011],{"type":715,"value":1005},"Если у ",{"type":710,"tag":726,"props":1007,"children":1009},{"className":1008},[],[1010],{"type":715,"value":781},{"type":715,"value":1012}," ничего не меняется, возможно, меняется другой контейнер (например, основной wrapper), либо создается наложение (overlay), которое визуально выглядит как изменение фона.",{"type":710,"tag":711,"props":1014,"children":1015},{},[1016,1018,1023],{"type":715,"value":1017},"Практический прием: поставить DOM breakpoint на ",{"type":710,"tag":726,"props":1019,"children":1021},{"className":1020},[],[1022],{"type":715,"value":781},{"type":715,"value":1024},", чтобы остановиться ровно на той строке JavaScript, которая меняет DOM/атрибут.",{"type":710,"tag":1026,"props":1027,"children":1031},"pre",{"className":1028,"code":1030,"language":715},[1029],"language-text","Elements (Inspector)\n  └─ выбрать \u003Cbody>;\n      └─ Break on...\n          ├─ Attribute modifications\n          ├─ Subtree modifications\n          └─ Node removal\n",[1032],{"type":710,"tag":726,"props":1033,"children":1035},{"__ignoreMap":1034},"",[1036],{"type":715,"value":1030},{"type":710,"tag":711,"props":1038,"children":1039},{},[1040],{"type":715,"value":1041},"Смысл:",{"type":710,"tag":906,"props":1043,"children":1044},{},[1045,1075,1086],{"type":710,"tag":827,"props":1046,"children":1047},{},[1048,1054,1056,1061,1062,1067,1068,1073],{"type":710,"tag":726,"props":1049,"children":1051},{"className":1050},[],[1052],{"type":715,"value":1053},"Attribute modifications",{"type":715,"value":1055}," — остановка при изменении атрибутов (",{"type":710,"tag":726,"props":1057,"children":1059},{"className":1058},[],[1060],{"type":715,"value":991},{"type":715,"value":985},{"type":710,"tag":726,"props":1063,"children":1065},{"className":1064},[],[1066],{"type":715,"value":927},{"type":715,"value":985},{"type":710,"tag":726,"props":1069,"children":1071},{"className":1070},[],[1072],{"type":715,"value":998},{"type":715,"value":1074},").",{"type":710,"tag":827,"props":1076,"children":1077},{},[1078,1084],{"type":710,"tag":726,"props":1079,"children":1081},{"className":1080},[],[1082],{"type":715,"value":1083},"Subtree modifications",{"type":715,"value":1085}," — остановка при изменении потомков (когда добавляются/удаляются/перестраиваются элементы внутри).",{"type":710,"tag":827,"props":1087,"children":1088},{},[1089,1095],{"type":710,"tag":726,"props":1090,"children":1092},{"className":1091},[],[1093],{"type":715,"value":1094},"Node removal",{"type":715,"value":1096}," — остановка при удалении выбранного узла.",{"data":1098,"body":1099},{},{"type":707,"children":1100},[1101,1106,1130,1135],{"type":710,"tag":711,"props":1102,"children":1103},{},[1104],{"type":715,"value":1105},"Чтобы понять, какой код реагирует на клик:",{"type":710,"tag":906,"props":1107,"children":1108},{},[1109,1114,1125],{"type":710,"tag":827,"props":1110,"children":1111},{},[1112],{"type":715,"value":1113},"Необходимо выделить кнопку во вкладке Elements.",{"type":710,"tag":827,"props":1115,"children":1116},{},[1117,1119,1124],{"type":715,"value":1118},"Необходимо открыть панель со слушателями событий (Event Listeners) и найти ",{"type":710,"tag":726,"props":1120,"children":1122},{"className":1121},[],[1123],{"type":715,"value":756},{"type":715,"value":790},{"type":710,"tag":827,"props":1126,"children":1127},{},[1128],{"type":715,"value":1129},"Необходимо раскрыть обработчики и перейти к месту в исходниках, где они определены или где навешиваются.",{"type":710,"tag":711,"props":1131,"children":1132},{},[1133],{"type":715,"value":1134},"Дополнительно полезно включить остановку на событиях:",{"type":710,"tag":906,"props":1136,"children":1137},{},[1138,1150],{"type":710,"tag":827,"props":1139,"children":1140},{},[1141,1143,1149],{"type":715,"value":1142},"В Sources (Debugger) обычно доступен раздел Event Listener Breakpoints, где можно включить паузу на ",{"type":710,"tag":726,"props":1144,"children":1146},{"className":1145},[],[1147],{"type":715,"value":1148},"Mouse -> click",{"type":715,"value":790},{"type":710,"tag":827,"props":1151,"children":1152},{},[1153],{"type":715,"value":1154},"После включения паузы необходимо снова кликнуть по кнопке, отладчик остановится на коде, выполняемом в рамках обработки клика.",{"data":1156,"body":1157},{},{"type":707,"children":1158},[1159,1164,1203,1208,1259,1264],{"type":710,"tag":711,"props":1160,"children":1161},{},[1162],{"type":715,"value":1163},"После остановки выполнения в Debugger/Sources необходимо:",{"type":710,"tag":906,"props":1165,"children":1166},{},[1167,1172,1198],{"type":710,"tag":827,"props":1168,"children":1169},{},[1170],{"type":715,"value":1171},"Посмотреть Call Stack (стек вызовов) и определить ближайшую к действию функцию.",{"type":710,"tag":827,"props":1173,"children":1174},{},[1175,1177,1182,1183,1189,1190,1196],{"type":715,"value":1176},"Перейти к строке, где меняется состояние: ",{"type":710,"tag":726,"props":1178,"children":1180},{"className":1179},[],[1181],{"type":715,"value":927},{"type":715,"value":985},{"type":710,"tag":726,"props":1184,"children":1186},{"className":1185},[],[1187],{"type":715,"value":1188},"classList",{"type":715,"value":985},{"type":710,"tag":726,"props":1191,"children":1193},{"className":1192},[],[1194],{"type":715,"value":1195},"dataset",{"type":715,"value":1197},", либо вызов функции, которая это делает.",{"type":710,"tag":827,"props":1199,"children":1200},{},[1201],{"type":715,"value":1202},"Определить тип изменения и выбрать корректную правку.",{"type":710,"tag":711,"props":1204,"children":1205},{},[1206],{"type":715,"value":1207},"Типичные «сигналы» в коде:",{"type":710,"tag":906,"props":1209,"children":1210},{},[1211,1223,1235,1247],{"type":710,"tag":827,"props":1212,"children":1213},{},[1214,1216,1222],{"type":715,"value":1215},"Прямая смена стиля: ",{"type":710,"tag":726,"props":1217,"children":1219},{"className":1218},[],[1220],{"type":715,"value":1221},"document.body.style.backgroundColor = 'blue'",{"type":715,"value":790},{"type":710,"tag":827,"props":1224,"children":1225},{},[1226,1228,1234],{"type":715,"value":1227},"Подмена атрибута: ",{"type":710,"tag":726,"props":1229,"children":1231},{"className":1230},[],[1232],{"type":715,"value":1233},"document.body.setAttribute('style', ...)",{"type":715,"value":790},{"type":710,"tag":827,"props":1236,"children":1237},{},[1238,1240,1246],{"type":715,"value":1239},"Переключение класса: ",{"type":710,"tag":726,"props":1241,"children":1243},{"className":1242},[],[1244],{"type":715,"value":1245},"document.body.classList.add('is-blue')",{"type":715,"value":790},{"type":710,"tag":827,"props":1248,"children":1249},{},[1250,1252,1258],{"type":715,"value":1251},"Переключение темы: ",{"type":710,"tag":726,"props":1253,"children":1255},{"className":1254},[],[1256],{"type":715,"value":1257},"document.body.dataset.theme = 'blue'",{"type":715,"value":790},{"type":710,"tag":711,"props":1260,"children":1261},{},[1262],{"type":715,"value":1263},"Упрощенная схема действий:",{"type":710,"tag":1026,"props":1265,"children":1268},{"className":1266,"code":1267,"language":715},[1029],"Клик по кнопке\n   │\n   ├─(A) Остановиться на event listener breakpoint (click)  → увидеть обработчик\n   │\n   └─(B) Остановиться на DOM breakpoint (body attribute modified)\n         → увидеть строку кода, которая меняет class/style\n                 │\n                 ├─ Меняется body.style / атрибут style → причина в JS\n                 └─ Меняется class/data-атрибут         → причина в связке JS + CSS\n",[1269],{"type":710,"tag":726,"props":1270,"children":1271},{"__ignoreMap":1034},[1272],{"type":715,"value":1267},{"data":1274,"body":1275},{},{"type":707,"children":1276},[1277],{"type":710,"tag":711,"props":1278,"children":1279},{},[1280,1282,1287],{"type":715,"value":1281},"Два наиболее сильных механизма в DevTools для таких задач — DOM breakpoints (остановка на коде, меняющем DOM) и event listener breakpoints (остановка на коде, выполняющемся после конкретного события, например ",{"type":710,"tag":726,"props":1283,"children":1285},{"className":1284},[],[1286],{"type":715,"value":756},{"type":715,"value":1074},{"data":1289,"body":1290},{},{"type":707,"children":1291},[1292,1311,1343,1348],{"type":710,"tag":711,"props":1293,"children":1294},{},[1295,1297,1302,1303,1309],{"type":715,"value":1296},"Если выяснилось, что меняется ",{"type":710,"tag":726,"props":1298,"children":1300},{"className":1299},[],[1301],{"type":715,"value":991},{"type":715,"value":888},{"type":710,"tag":726,"props":1304,"children":1306},{"className":1305},[],[1307],{"type":715,"value":1308},"data-theme",{"type":715,"value":1310},", значит фон рисуется CSS-правилами. Тогда необходимо:",{"type":710,"tag":906,"props":1312,"children":1313},{},[1314,1326,1338],{"type":710,"tag":827,"props":1315,"children":1316},{},[1317,1319,1324],{"type":715,"value":1318},"В Elements открыть вкладку Styles/Computed для ",{"type":710,"tag":726,"props":1320,"children":1322},{"className":1321},[],[1323],{"type":715,"value":781},{"type":715,"value":1325}," (или для элемента, который реально окрашивает фон).",{"type":710,"tag":827,"props":1327,"children":1328},{},[1329,1331,1337],{"type":715,"value":1330},"Найти правило, которое задает ",{"type":710,"tag":726,"props":1332,"children":1334},{"className":1333},[],[1335],{"type":715,"value":1336},"background-color",{"type":715,"value":790},{"type":710,"tag":827,"props":1339,"children":1340},{},[1341],{"type":715,"value":1342},"Проверить специфичность и порядок правил, а также возможные темы, модификаторы, медиа-условия.",{"type":710,"tag":711,"props":1344,"children":1345},{},[1346],{"type":715,"value":1347},"Практическая таблица «признак → трактовка → следующий шаг»:",{"type":710,"tag":1349,"props":1350,"children":1351},"table",{},[1352,1376],{"type":710,"tag":1353,"props":1354,"children":1355},"thead",{},[1356],{"type":710,"tag":1357,"props":1358,"children":1359},"tr",{},[1360,1366,1371],{"type":710,"tag":1361,"props":1362,"children":1363},"th",{},[1364],{"type":715,"value":1365},"Наблюдение",{"type":710,"tag":1361,"props":1367,"children":1368},{},[1369],{"type":715,"value":1370},"Что это обычно означает",{"type":710,"tag":1361,"props":1372,"children":1373},{},[1374],{"type":715,"value":1375},"Что делать дальше",{"type":710,"tag":1377,"props":1378,"children":1379},"tbody",{},[1380,1412,1451,1476],{"type":710,"tag":1357,"props":1381,"children":1382},{},[1383,1402,1407],{"type":710,"tag":1384,"props":1385,"children":1386},"td",{},[1387,1389,1394,1396],{"type":715,"value":1388},"У ",{"type":710,"tag":726,"props":1390,"children":1392},{"className":1391},[],[1393],{"type":715,"value":781},{"type":715,"value":1395}," появился ",{"type":710,"tag":726,"props":1397,"children":1399},{"className":1398},[],[1400],{"type":715,"value":1401},"style=\"background-color: ...\"",{"type":710,"tag":1384,"props":1403,"children":1404},{},[1405],{"type":715,"value":1406},"JavaScript напрямую установил стиль",{"type":710,"tag":1384,"props":1408,"children":1409},{},[1410],{"type":715,"value":1411},"Найти строку установки и заменить на корректную логику (класс/тема/переменные)",{"type":710,"tag":1357,"props":1413,"children":1414},{},[1415,1441,1446],{"type":710,"tag":1384,"props":1416,"children":1417},{},[1418,1419,1424,1426,1431,1433,1439],{"type":715,"value":1388},{"type":710,"tag":726,"props":1420,"children":1422},{"className":1421},[],[1423],{"type":715,"value":781},{"type":715,"value":1425}," изменился ",{"type":710,"tag":726,"props":1427,"children":1429},{"className":1428},[],[1430],{"type":715,"value":991},{"type":715,"value":1432}," (например, ",{"type":710,"tag":726,"props":1434,"children":1436},{"className":1435},[],[1437],{"type":715,"value":1438},"theme-blue",{"type":715,"value":1440},")",{"type":710,"tag":1384,"props":1442,"children":1443},{},[1444],{"type":715,"value":1445},"JavaScript переключает состояние, CSS рисует",{"type":710,"tag":1384,"props":1447,"children":1448},{},[1449],{"type":715,"value":1450},"Найти место переключения класса и CSS-правило темы",{"type":710,"tag":1357,"props":1452,"children":1453},{},[1454,1466,1471],{"type":710,"tag":1384,"props":1455,"children":1456},{},[1457,1459,1464],{"type":715,"value":1458},"Фон меняется, но ",{"type":710,"tag":726,"props":1460,"children":1462},{"className":1461},[],[1463],{"type":715,"value":781},{"type":715,"value":1465}," не менялся",{"type":710,"tag":1384,"props":1467,"children":1468},{},[1469],{"type":715,"value":1470},"Меняется контейнер, псевдоэлемент, или наложение",{"type":710,"tag":1384,"props":1472,"children":1473},{},[1474],{"type":715,"value":1475},"Ставить DOM breakpoint на подозрительный контейнер, искать изменение его классов/стилей",{"type":710,"tag":1357,"props":1477,"children":1478},{},[1479,1484,1502],{"type":710,"tag":1384,"props":1480,"children":1481},{},[1482],{"type":715,"value":1483},"Слушатели у кнопки не видны, но клик влияет",{"type":710,"tag":1384,"props":1485,"children":1486},{},[1487,1489,1494,1496],{"type":715,"value":1488},"Вероятно делегирование на ",{"type":710,"tag":726,"props":1490,"children":1492},{"className":1491},[],[1493],{"type":715,"value":850},{"type":715,"value":1495},"/",{"type":710,"tag":726,"props":1497,"children":1499},{"className":1498},[],[1500],{"type":715,"value":1501},"window",{"type":710,"tag":1384,"props":1503,"children":1504},{},[1505,1507,1512],{"type":715,"value":1506},"Включить паузу на ",{"type":710,"tag":726,"props":1508,"children":1510},{"className":1509},[],[1511],{"type":715,"value":756},{"type":715,"value":1513},", смотреть Call Stack и исходное место регистрации",{"data":1515,"body":1516},{},{"type":707,"children":1517},[1518],{"type":710,"tag":711,"props":1519,"children":1520},{},[1521,1523,1529],{"type":715,"value":1522},"Если на странице есть сторонние виджеты или минифицированные бандлы, один клик может запускать длинную цепочку вызовов. В такой ситуации основная цель — найти первую «осмысленную» функцию в Call Stack, которая меняет ",{"type":710,"tag":726,"props":1524,"children":1526},{"className":1525},[],[1527],{"type":715,"value":1528},"class/style/dataset",{"type":715,"value":1530},", а не пытаться читать весь бандл целиком.",{"data":1532,"body":1533},{},{"type":707,"children":1534},[1535,1540,1545],{"type":710,"tag":711,"props":1536,"children":1537},{},[1538],{"type":715,"value":1539},"Цель исправления — не «перекрыть» фон, а сделать механизм изменения фона явным, предсказуемым и локализованным (один источник правды).",{"type":710,"tag":711,"props":1541,"children":1542},{},[1543],{"type":715,"value":1544},"Рекомендуемые принципы исправления:",{"type":710,"tag":906,"props":1546,"children":1547},{},[1548,1559,1571],{"type":710,"tag":827,"props":1549,"children":1550},{},[1551,1553,1558],{"type":715,"value":1552},"В CSS следует описывать темы через классы или CSS-переменные, а не через массовые ",{"type":710,"tag":726,"props":1554,"children":1556},{"className":1555},[],[1557],{"type":715,"value":837},{"type":715,"value":790},{"type":710,"tag":827,"props":1560,"children":1561},{},[1562,1564,1569],{"type":715,"value":1563},"В JavaScript следует переключать только состояние (класс/атрибут), а не «рисовать» стили напрямую на ",{"type":710,"tag":726,"props":1565,"children":1567},{"className":1566},[],[1568],{"type":715,"value":781},{"type":715,"value":1570},", если в этом нет строгой необходимости.",{"type":710,"tag":827,"props":1572,"children":1573},{},[1574],{"type":715,"value":1575},"Следует централизовать переключение темы: один обработчик, одна функция, одно место изменения состояния.",{"data":1577,"body":1578},{},{"type":707,"children":1579},[1580,1589,1598,1607,1612],{"type":710,"tag":1026,"props":1581,"children":1584},{"className":1582,"code":1583,"language":715},[1029],"\u003C!-- HTML -->\n\u003Cbutton id=\"toggle-theme\">Toggle theme\u003C/button>\n",[1585],{"type":710,"tag":726,"props":1586,"children":1587},{"__ignoreMap":1034},[1588],{"type":715,"value":1583},{"type":710,"tag":1026,"props":1590,"children":1593},{"className":1591,"code":1592,"language":715},[1029],"/* CSS */\nbody {\n  background-color: red;\n}\n\nbody.is-blue {\n  background-color: blue;\n}\n",[1594],{"type":710,"tag":726,"props":1595,"children":1596},{"__ignoreMap":1034},[1597],{"type":715,"value":1592},{"type":710,"tag":1026,"props":1599,"children":1602},{"className":1600,"code":1601,"language":715},[1029],"// JS\ndocument.getElementById('toggle-theme')?.addEventListener('click', () => {\n  document.body.classList.toggle('is-blue');\n});\n",[1603],{"type":710,"tag":726,"props":1604,"children":1605},{"__ignoreMap":1034},[1606],{"type":715,"value":1601},{"type":710,"tag":711,"props":1608,"children":1609},{},[1610],{"type":715,"value":1611},"Плюсы:",{"type":710,"tag":906,"props":1613,"children":1614},{},[1615,1620],{"type":710,"tag":827,"props":1616,"children":1617},{},[1618],{"type":715,"value":1619},"Логика темы отделена от рисования.",{"type":710,"tag":827,"props":1621,"children":1622},{},[1623],{"type":715,"value":1624},"CSS остается единственным местом, где описаны цвета.",{"data":1626,"body":1627},{},{"type":707,"children":1628},[1629,1638,1647,1651],{"type":710,"tag":1026,"props":1630,"children":1633},{"className":1631,"code":1632,"language":715},[1029],"/* CSS */\n:root {\n  --page-bg: red;\n}\n\nbody {\n  background-color: var(--page-bg);\n}\n\nbody[data-theme=\"blue\"] {\n  --page-bg: blue;\n}\n",[1634],{"type":710,"tag":726,"props":1635,"children":1636},{"__ignoreMap":1034},[1637],{"type":715,"value":1632},{"type":710,"tag":1026,"props":1639,"children":1642},{"className":1640,"code":1641,"language":715},[1029],"// JS\ndocument.getElementById('toggle-theme')?.addEventListener('click', () => {\n  const next = document.body.dataset.theme === 'blue' ? 'red' : 'blue';\n  document.body.dataset.theme = next;\n});\n",[1643],{"type":710,"tag":726,"props":1644,"children":1645},{"__ignoreMap":1034},[1646],{"type":715,"value":1641},{"type":710,"tag":711,"props":1648,"children":1649},{},[1650],{"type":715,"value":1611},{"type":710,"tag":906,"props":1652,"children":1653},{},[1654,1659],{"type":710,"tag":827,"props":1655,"children":1656},{},[1657],{"type":715,"value":1658},"Удобно расширять на множество цветов и параметров (текст, границы, акценты).",{"type":710,"tag":827,"props":1660,"children":1661},{},[1662],{"type":715,"value":1663},"Можно менять тему, не переписывая множество CSS-правил.",{"data":1665,"body":1666},{},{"type":707,"children":1667},[1668],{"type":710,"tag":711,"props":1669,"children":1670},{},[1671],{"type":715,"value":73},{"data":1673,"body":1674},{},{"type":707,"children":1675},[1676],{"type":710,"tag":711,"props":1677,"children":1678},{},[1679,1681,1686,1688,1693,1695,1700],{"type":715,"value":1680},"Итого: верным является вариант 3, потому что DevTools позволяют увидеть обработчики ",{"type":710,"tag":726,"props":1682,"children":1684},{"className":1683},[],[1685],{"type":715,"value":756},{"type":715,"value":1687}," у кнопки и остановиться на коде, который меняет ",{"type":710,"tag":726,"props":1689,"children":1691},{"className":1690},[],[1692],{"type":715,"value":781},{"type":715,"value":1694}," (DOM breakpoints) или выполняется после клика (event listener breakpoints); исправление следует делать через явную логику темы (класс/атрибут/CSS-переменные), а не через маскирующие ",{"type":710,"tag":726,"props":1696,"children":1698},{"className":1697},[],[1699],{"type":715,"value":837},{"type":715,"value":790},1775735655417]