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