Frontend_new

Question 1

Какие есть структуры данных(7)

Answer 1

1.Массивы (Arrays)
2.Объекты (Objects)
3.Строки (Strings)
4.Списки (Linked Lists): Коллекции, состоящие из узлов, каждый из которых содержит значение и ссылку на следующий узел. Списки могут быть односвязными (ссылка только на следующий элемент) или двусвязными (ссылка на следующий и предыдущий элементы).
5.Стеки (Stacks):Last-In-First-Out, LIFO).
6.Очереди (Queues): (First-In-First-Out, FIFO). Элементы добавляются в конец очереди, а извлекаются из начала.
7.Хеш-таблицы (Hash Tables): Структуры данных, которые используют хеш-функции для быстрого поиска и вставки данных. Они обеспечивают доступ к данным через ключ.

Question 2

Различия между авторизацией и аутентификацией

Answer 2

Аутентификация - это процесс проверки подлинности учетных данных пользователя, таких как логин и пароль.
Цель аутентификации - убедиться, что пользователь является тем, кем он утверждает быть.

Авторизация - это процесс определения прав доступа пользователя к определенным ресурсам или функциям в системе.
Цель авторизации - определить, какие действия пользователь может совершать после успешной аутентификации.

Question 3

В чем раличия REST vs SOAP(4)

Answer 3

1.Архитектура:
REST использует стандартные HTTP методы (GET, POST, PUT, DELETE)
SOAP,является протоколом на основе XML и может работать поверх различных транспортных протоколов, таких как HTTP, SMTP, TCP и др.
2.Формат сообщений:
В REST данные часто передаются в формате JSON. Он более легковесен и читаем
SOAP использует XML. Он более многословен и тяжеловесен по сравнению с JSON.
3.Удобство использования:
REST более прост в использовании благодаря своей простой архитектуре и поддержке стандартных HTTP методов.
SOAP может быть более сложным в использовании из-за его большей сложности и тяжеловесности.
4.Поддержка:
REST имеет широкую поддержку и является предпочтительным выбором для большинства современных веб-сервисов.
SOAP также продолжает использоваться в некоторых корпоративных средах, где требуется высокий уровень надежности и безопасности.

Итоги:
REST обычно предпочтительнее для создания веб-сервисов из-за своей простоты, легковесности и широкой поддержки. SOAP может быть выбран в случаях, когда необходима высокая надежность и сложные функциональные возможности.

Question 4

Различия между 301 и 302 статусами http-запросов

Answer 4

Основное различие между 301 и 302 состоит в том, что 301 указывает на постоянное перемещение ресурса, в то время как 302 указывает на временное перемещение.

Question 5

Различия между http 2.0 и http 1.1(3)

Answer 5

1.Мультиплексирование
HTTP/2.0 поддерживает мультиплексирование, что позволяет отправлять несколько запросов и ответов по одному и тому же соединению в любое время, без ожидания завершения предыдущих запросов.
HTTP/1.1 отправляет запросы и ответы последовательно, что может привести к блокировке ожидания завершения предыдущих запросов
2.Сжатие заголовков
HTTP/2.0 поддерживает сжатие заголовков, что уменьшает объем передаваемых данных и улучшает производительность.
3.Server Push (серверное уведомление):
HTTP/2.0 позволяет серверу отправлять дополнительные ресурсы клиенту без запроса (Server Push), уменьшая задержку при загрузке веб-страницы.

Question 6

Различие между PUT и PATCH запросами

Answer 6

PUT - обновления целого ресурса на сервере.
PATCH - частичное обновление

Question 7

Многопоточность, многопроцессорность

Answer 7

Многопоточность - параллельное выполнению потоков в рамках одного процесса. Многопроцессорность - параллельное выполнение нескольких процессов.

Question 8

Мультизадачность

Answer 8

это способность операционной системы одновременно выполнять несколько задач. Это может включать выполнение нескольких приложений или процессов одновременно или переключение между несколькими задачами с высокой скоростью так, чтобы пользователь воспринимал, что все задачи выполняются параллельно.

Question 9

Что такое B-tree

Answer 9

структура данных в виде дерева, используемая для организации и хранения упорядоченного множества ключей. Она является одной из самых эффективных структур данных для поиска, вставки и удаления элементов в отсортированном наборе данных.
В JavaScript B-дерево может быть реализовано в виде пользовательской класса или модуля, который предоставляет методы для вставки, удаления и поиска элементов в дереве.

Question 10

Плюсы и минусы монолита и микросервисов

Answer 10

Монолит:
Плюсы:
Простота развертывания.
Проще масштабирование.
Проще тестирование.
Минусы:
Сложность поддержки.
Ограниченная гибкость развертывания.
Неэффективное использование ресурсов.
Микросервисы:
Плюсы:
Гибкость и масштабируемость.
Легкость поддержки.
Технологическая гетерогенность.
Минусы:
Сложность управления.
Сетевые задержки.
Сложность тестирования.

Question 11

Отличия распределенного монолита от микросервисов

Answer 11

Распределенный монолит:
Одно целое приложение, развернутое на нескольких узлах.
Обычно масштабируется вертикально.
Единая кодовая база и база данных для всего приложения.
Более прост в управлении и развертывании по сравнению с микросервисами.
Микросервисы:
Приложение разбито на отдельные сервисы, каждый из которых может быть развернут и масштабирован независимо.
Горизонтальное масштабирование путем добавления или уменьшения экземпляров сервисов.
Каждый сервис имеет свою собственную базу данных и кодовую базу.
Предоставляет большую гибкость и масштабируемость за счет архитектурной раздробленности.

Question 12

Что бывает, когда вводишь google.com в браузере

Answer 12

Поиск DNS-записи для google.com.( сначала ищется в локальном хранилище (localStorage) браузера, затем в куки (cookies). если отсутсвует браузер отправляет запрос к системе DNS)
Получение IP-адреса сервера, обслуживающего google.com.
Установка TCP-соединения с сервером по полученному IP-адресу и порту 80 (стандартный порт HTTP).
Отправка HTTP-запроса GET для google.com через установленное TCP-соединение.
Получение HTTP-ответа от сервера Google, содержащего HTML-код главной страницы google.com.
Браузер интерпретирует HTML-код и отображает веб-страницу на экране пользователя.

Question 13

Что такое promise

Answer 13

Promise (обещание) - это объект в JavaScript, предназначенный для работы с асинхронными операциями. Он представляет собой результат выполнения или ошибки асинхронной операции и обеспечивает удобный способ обработки этих результатов.
Promise позволяет элегантно обрабатывать результаты асинхронных операций, делая код более читаемым и управляемым. Кроме того, он предоставляет механизм для последовательного выполнения цепочек асинхронных операций через методы then и catch.

Пример использования Promise:
const myPromise = new Promise((resolve, reject) => {}

Question 14

Какие состояния есть у promise

Answer 14

Promise имеет три состояния:
Pending (ожидание): Исходное состояние, когда promise создан, но операция все еще выполняется.
Fulfilled (выполнено): Состояние, в котором операция успешно завершена. В этом случае в promise содержится результат выполнения операции.
Rejected (отклонено): Состояние, в котором операция завершается с ошибкой. В этом случае в promise содержится информация об ошибке.

Question 15

Что такое virtual dom

Answer 15

Virtual DOM (виртуальное DOM) - это концепция в React, которая помогает оптимизировать процесс обновления пользовательского интерфейса, делая его более эффективным.
Виртуальный DOM представляет собой абстракцию поверх реального DOM. Это легковесное представление текущего состояния интерфейса в виде дерева объектов JavaScript. Когда состояние приложения меняется, React (например) создает новое виртуальное дерево, представляющее обновленное состояние.
React сравнивает новое виртуальное дерево с предыдущим. Этот процесс называется “reconciliation” (согласование).
React находит минимальное количество изменений, необходимых для обновления реального DOM, чтобы отобразить новое состояние.

Question 16

какие преимущества у virtual dom

Answer 16

Поскольку манипуляции с виртуальным DOM происходят в памяти JavaScript, они обычно быстрее, чем прямые манипуляции с реальным DOM.
React минимизирует количество фактических изменений в реальном DOM, что повышает производительность приложения.
Виртуальный DOM является одной из стратегий оптимизации для более эффективного управления состоянием пользовательского интерфейса в веб-приложениях.

Question 17

Какие типы данных существуют в javascript(8)

Answer 17

Примитивные типы данных:
1.Number
2.String
3.Boolean
4.Undefined
5.Null
6.Symbol
7.BigInt
Объекты (Reference Types):
8.Object

Question 18

Чем let отличается от var

Answer 18

Область видимости:
var - функциональная область видимости. Переменные видны внутри функции видны за ее пределами.
let: блочную область видимости. Видны только внутри блока кода (например цикл)
Поднятие (Hoisting):
var: Поднимает объявление переменных на верхний уровень функции (если переменная объявлена внутри функции) или на верхний уровень глобального контекста (если переменная объявлена вне функции).
let: Также поднимается, но переменные не инициализируются (их значение остается undefined), и доступ к ним возможен только после их фактического объявления.
Ошибки времени выполнения:
var: Может использоваться до объявления, что может привести к неочевидным ошибкам.
let: Вызывает ReferenceError, если переменная используется до объявления.
Использование в циклах:
var: Не создает новую переменную для каждой итерации цикла, что может привести к непредвиденным проблемам.
let: Создает новую переменную для каждой итерации цикла, предотвращая проблемы, связанные с замыканиями.
Глобальный объект:
var: Создает свойства на глобальном объекте (в браузере - window), если объявлено в глобальном контексте.
let: Не создает свойства на глобальном объекте, если объявлено в глобальном контексте.

Question 19

Чем var отличается от const

Answer 19

Изменяемость (Mutability):
var: Можно переопределять и изменять.const: нет(да только частично массив/объект)
Область видимости:
var: функциональную область видимости. const: блочную область видимости.
Поднятие (Hoisting):
var: Можно вызвать до определения, но значение будет undefined. у const нельзя(ReferenceError)
Глобальный объект:
var: Создает свойства на глобальном объекте (в браузере - window), если объявлено в глобальном контексте.
const: Не создает свойства на глобальном объекте.
Использование в циклах:
var: Не создает новую переменную для каждой итерации цикла.
const: Создает новую переменную для каждой итерации цикла.
Обязательная инициализация:
var: Не требует обязательной инициализации при объявлении. Значение по умолчанию - undefined.
const: Требует обязательной инициализации при объявлении.

Question 20

Для чего используются call, apply и bind

Answer 20

В JavaScript методы call, apply и bind используются для управления контекстом (значением this) функции и передачи аргументов при её вызове.

Question 21

Общие черты методов и для чего они нужны.call apply bind

Answer 21

Общие черты:
Все три метода используются для управления контекстом функции.
Помогают избежать дублирования кода, связанного с передачей одних и тех же аргументов.
Позволяют использовать функции в контексте, отличном от их исходного контекста.

Question 22

Различие методов call apply bind

Answer 22

Различия:
call и apply сразу вызывают функцию, в то время как bind создает новую функцию, которую можно вызвать позже.
apply принимает аргументы в виде массива, call - в виде отдельных параметров, bind - как и call.
bind не вызывает функцию, а возвращает новую функцию, тогда как call и apply вызывают функцию сразу.
call и apply можно использовать для функций с произвольным числом аргументов, в то время как bind фиксирует аргументы при создании новой функции.

call:
Синтаксис: function.call(context, arg1, arg2, …).
apply:
Синтаксис: function.apply(context, [arg1, arg2, …]).
bind:
Синтаксис: function.bind(context, arg1, arg2, …).

Question 23

В чём разница между классической функцией и стрелочной (function expression и function declaration)

Answer 23

Синтаксис:
Классическая функция function expression:
function add(a, b) { return a + b }
Стрелочная функция function declaration:
const add = (a, b) => a + b;

Контекст (значение this):
Классическая функция:
Имеет свой собственный контекст this, который зависит от того, как она была вызвана.
Стрелочная функция:
Не имеет своего собственного контекста this; она заимствует контекст из родительского контекста в момент создания.

Связывание (bind):
Классическая функция:
Может быть привязана к определенному контексту с использованием метода bind.
Стрелочная функция:
Нельзя изменить контекст с помощью bind, так как у неё нет своего собственного this.

Аргументы arguments:
Классическая функция:
Имеет объект arguments, который содержит все переданные ей аргументы.
Стрелочная функция:
Не имеет собственного объекта arguments. Вместо этого, она использует аргументы из своего родительского контекста.

Ключевое слово new:
Классическая функция:
Может использоваться с ключевым словом new для создания экземпляра объекта.
Стрелочная функция:
Не может быть использована с ключевым словом new. Она не имеет собственного prototype, и попытка использовать new вызовет ошибку.

Длина функции (length):
Классическая функция:
Имеет свойство length, которое представляет количество параметров, объявленных в функции.
Стрелочная функция:
Не имеет собственного свойства length. Всегда возвращает 0, потому что не имеет собственных именованных аргументов.

Способ определения:
Классическая функция:
Лучше подходит для методов объектов, обработчиков событий, конструкторов и других случаев, где важен контекст this.
Стрелочная функция:
Удобна для кратких анонимных функций и в случаях, когда контекст this не является критически важным, например, для обработчиков событий или функций обратного вызова.
Выбор между классической и стрелочной функцией зависит от конкретного контекста использования и требований вашего кода.

Question 24

Какие способы изоляции стилей ты знаешь

Answer 24

Изоляция стилей является важным аспектом веб-разработки для предотвращения конфликтов и воздействия стилей одного компонента на другие.
Inline Styles (Встроенные стили): Стили задаются непосредственно внутри тега элемента с использованием атрибута style(<div style="color:red;">).
CSS Modules:Позволяют изолировать стили на уровне компонента путем создания уникальных имен классов( index.module.css).
Shadow DOM: Позволяет создавать изолированный корневой узел DOM с его собственными стилями и селекторами. Внутри html в теге style все стили
BEM (Block Element Modifier):Методология именования классов, направленная на создание модульных и изолированных компонентов.(<div class="button button--primary">)
Библиотеки, позволяющие встраивать стили в компоненты JavaScript, обеспечивая их изоляцию.</div></div>

Question 25

В чем разница == и ===

Answer 25

Двойное равенство == Сравнивает значения с приведением типов. Если типы операндов различаются, JavaScript попытается привести их к общему типу перед сравнением. 5 == "5" // true, так как "5" приводится к числу Тройное равенство ===: Сравнивает значения без приведения типов (строгое сравнение). Возвращает true только в том случае, если значения и их типы совпадают. 5 === "5" // false, так как значения различаются по типу

Question 26

Какими способами можно объявить переменные, назовите отличия

Answer 26

var,let,const,a=5

Question 27

В чём разница между foreach и map

Answer 27

forEach и Map применяет функцию обратного вызова к каждому элементу массива. forEach не создает новый массив и не возвращает результат. Map создает новый массив и возвращает результат. forEach - Может изменять элементы исходного массива(мутирует) Map - Не изменяет исходный массив. forEach Возвращает undefined. Map Возвращает новый массив.

Question 28

В чём отличие null от undefined

Answer 28

null и undefined - это два специальных значения в JavaScript, которые представляют отсутствие значения, но они имеют различия в своем использовании и семантике. undefined: Переменная, которой не было присвоено значение, по умолчанию имеет значение undefined. Если функция не возвращает явно значение, её возвращаемое значение также будет undefined. Параметры функции, которые не были переданы, имеют значение undefined. Попытка обратиться к несуществующему свойству объекта также вернет undefined. null: null - это явное значение, которое используется для представления отсутствия значения или отсутствия ссылки на объект. Если переменной присвоено значение null, это обозначает, что переменная явно не ссылается на какой-либо объект или значение. null используется программистом для явного указания на отсутствие значения. Различия: undefined обычно означает, что значение отсутствует из-за неопределенности, в то время как null явно указывает на отсутствие значения. undefined - это значение по умолчанию для неинициализированных переменных, а null - это значение, которое программист присваивает переменной. При сравнении значений, null и undefined равны друг другу, но не равны никаким другим значениям. undefined чаще возникает естественным образом в процессе выполнения кода, в то время как null обычно устанавливается программистом для явного указания на отсутствие значения.

Question 29

Что такое дженерик

Answer 29

"дженерик" (или "generic") обозначает использование обобщенных (generic) типов данных или функций, которые могут работать с различными типами данных, без фиксированного привязывания к конкретному типу. Дженерики позволяют писать более универсальный и переиспользуемый код.

Question 30

что такое utility types

Answer 30

В TypeScript существует несколько встроенных утилитных типов (utility types), которые предоставляют удобные инструменты для работы с типами данных.

Question 31

Partial T

Answer 31

Создает тип, состоящий из всех возможных(необязательных) частичных вариантов типа T. Пример: typescript interface User { name: string; age: number; } type PartialUser = Partial User; // PartialUser имеет тип { name?: string; age?: number; }

Question 32

Required T

Answer 32

Создает тип, состоящий из всех обязательных свойств типа T. interface PartialUser { name?: string; age?: number; } type RequiredUser = Required PartialUser; // RequiredUser имеет тип { name: string; age: number; }

Question 33

Readonly T

Answer 33

Создает тип, состоящий из свойств типа T только для чтения. interface User { name: string; age: number; } type ReadonlyUser = Readonly User; // ReadonlyUser имеет тип { readonly name: string; readonly age: number; }

Question 34

Record K, T

Answer 34

Создает тип объекта с ключами типа K и значениями типа T. type UserRoles = Record string, string; // UserRoles имеет тип { [key: string]: string; }

Question 35

Pick T, K

Answer 35

Создает тип, выбирая из типа T только указанные свойства с ключами типа K. interface User { name: string; age: number; address: string; } type UserInfo = Pick User, 'name' | 'age'; // UserInfo имеет тип { name: string; age: number; }

Question 36

Omit

Answer 36

Создает тип, исключая из типа T указанные свойства с ключами типа K. Пример: typescript interface User { name: string; age: number; address: string; } type WithoutAddress = Omit; // WithoutAddress имеет тип { name: string; age: number; }

Question 37

Exclude T, U

Answer 37

Создает тип, исключая из типа T все типы, которые также являются членами типа U. type Numbers = 1 | 2 | 3 | 4 | 5; type OddNumbers = Exclude Numbers, 2 | 4; // OddNumbers имеет тип 1 | 3 | 5

Question 38

Extract T, U

Answer 38

Создает тип, выбирая из типа T только те типы, которые также являются членами типа U type Numbers = 1 | 2 | 3 | 4 | 5; type EvenNumbers = ExtractNumbers, 2 | 4; // EvenNumbers имеет тип 2 | 4

Question 39

NonNullable T

Answer 39

Создает тип, исключая null и undefined из типа T type NullableString = string | null | undefined; type NonNullString = NonNullable "NullableString"; // NonNullString имеет тип string

Question 40

Что такое мемоизация

Answer 40

Мемоизация - это оптимизационная техника в программировании, которая заключается в сохранении результатов выполнения функции для заданных входных данных (аргументов), чтобы избежать повторного вычисления для одних и тех же входных данных. Это особенно полезно, когда функция является ресурсоемкой и часто вызывается с одними и теми же аргументами. Принцип мемоизации заключается в том, чтобы кэшировать результаты выполнения функции и возвращать закешированный результат, если функция вызывается с теми же аргументами, что и ранее. Это может значительно ускорить выполнение программы и снизить избыточные вычисления. В языке программирования JavaScript мемоизация часто реализуется с использованием объекта для хранения кэша. Вот пример простой функции мемоизации на JavaScript: function memoize(fn) { const cache = {}; return function (...args) { const key = JSON.stringify(args); if (cache[key] === undefined) { // Вычисление и кэширование результата, если он не найден в кэше cache[key] = fn.apply(this, args); } return cache[key]; }; } const memoizedExpensiveOperation = memoize(expensiveOperation); console.log(memoizedExpensiveOperation(5)); // Вычисление для 5 console.log(memoizedExpensiveOperation(5)); // Значение взято из кэша для 5 console.log(memoizedExpensiveOperation(10)); // Вычисление для 10 console.log(memoizedExpensiveOperation(10)); // Значение взято из кэша для 10 В этом примере, если memoizedExpensiveOperation вызывается с теми же аргументами, результат берется из кэша, что позволяет избежать повторного выполнения дорогостоящей операции.

Question 41

Можешь рассказать о семантическом вресионировании

Answer 41

Семантическое версионирование (Semantic Versioning или SemVer) - это система нумерации версий, предназначенная для упрощения понимания изменений в программном обеспечении. SemVer используется для ясного и структурированного представления версий библиотек, пакетов и приложений, а также для управления зависимостями между ними. Версии в SemVer состоят из трех чисел: MAJOR.MINOR.PATCH. Каждая из этих частей имеет свою семантику: MAJOR (главная версия): Увеличивается, когда внесены несовместимые изменения API. Это означает, что изменения в MAJOR могут привести к нарушению обратной совместимости с предыдущими версиями. MINOR (минорная версия): Увеличивается, когда добавлены новые функциональные возможности, сохраняя обратную совместимость. Новые функции в MINOR версии не должны нарушать существующее API. PATCH (патч): Увеличивается, когда внесены обратно совместимые исправления ошибок. PATCH версия не должна вносить изменений в API и предназначена для исправления ошибок. Помимо основной тройки MAJOR.MINOR.PATCH, SemVer также поддерживает дополнительные метаданные и предварительные (pre-release) версии. Например, 1.0.0-alpha.1 - это предварительная версия версии 1.0.0. Применение семантического версионирования упрощает процесс обновления и управления зависимостями, так как разработчики и системы автоматической сборки могут точно определить, какие изменения включает новая версия, и принимать решения о необходимости обновления на основе этой информации.

Question 42

Что такое this

Answer 42

this - это ключевое слово в JavaScript, которое используется для обращения к текущему контексту выполнения. Значение this зависит от того, как функция вызывается и где она вызывается. Глобальный контекст: Вне зависимости от того, где находится код, в глобальном контексте выполнения this ссылается на глобальный объект, который в браузере часто представлен как window. Когда функция вызывается в контексте объекта, this ссылается на этот объект. const obj = { name: "John", greet: function() { console.log("Hello, " + this.name); } }; Если функция вызывается как отдельная функция, вне контекста объекта, this ссылается на глобальный объект (в нестрогом режиме) или на undefined (в строгом режиме). Контекст стрелочной функции: Стрелочные функции не имеют собственного значения this; вместо этого, они заимствуют значение this из своего окружающего контекста.

Question 43

В чём отличие хранения данных в local storage от куки

Answer 43

Local Storage и куки (Cookies) - это два различных механизма хранения данных в веб-браузерах, и у них есть несколько ключевых различий: Объем данных: Local Storage: около 5-10 МБ Cookies: Куки обычно ограничены объемом до 4 КБ на домен. Срок жизни: Local Storage: могут сохраняться долгосрочно (постоянно),остаются доступными после закрытия браузера и перезапуска компьютера. Cookies: Куки могут иметь различные сроки жизни, включая временные (только для текущей сессии), постоянные (сохраняются на долгий срок), или срок действия, устанавливаемый программно. Передача данных на сервер: Local Storage: Данные не отправляются на сервер автоматически при каждом запросе к серверу. То есть не участвуют в автоматическом обмене данными между клиентом и сервером. Cookies: Куки автоматически включаются в каждый HTTP-запрос к серверу. Доступность для JavaScript: Local Storage: доступны для чтения и записи через JavaScript с использованием API localStorage. Cookies: доступны через JavaScript с использованием document.cookie, но их API менее удобен для работы. Безопасность: Local Storage: Данные доступны только для того же источника (домена), который их создал. Доступ к данным из другого домена ограничен политиками безопасности браузера (same-origin policy). Cookies: Куки также поддерживают политику same-origin, но могут быть настроены с использованием атрибутов Secure и HttpOnly для улучшения безопасности.

Question 44

Cookies что это

Answer 44

Cookies (куки) - это небольшие текстовые файлы, которые веб-сайты отправляют и хранят на компьютере пользователя через веб-браузер. Куки содержат информацию о веб-сессии, предпочтениях пользователя, состоянии аутентификации и другие данные, которые могут быть использованы сайтом при последующих посещениях. Основные характеристики куки: Хранение данных: Куки представляют собой текстовые файлы, которые содержат небольшие объемы данных, обычно в виде пар ключ-значение. Передача на сервер: Куки автоматически включаются в каждый HTTP-запрос к серверу, связанному с соответствующим доменом. Это позволяет серверу узнавать состояние пользователя и предоставлять персонализированный опыт. Срок действия: Куки могут иметь различные сроки действия, включая временные (браузерное сессия), постоянные (сохраняются на долгий срок), или срок действия, устанавливаемый программно. Безопасность: Куки поддерживают политику same-origin, что означает, что они могут быть доступны только для того же источника (домена), который их создал. Доступ через JavaScript: Куки можно читать и устанавливать через JavaScript с использованием объекта document.cookie. Однако, некоторые атрибуты кук, такие как HttpOnly, могут ограничивать доступ к кукам из JavaScript с целью повышения безопасности. // Установка куки document.cookie = "username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/"; // Чтение куки const username = document.cookie.split('; ').find(row => row.startsWith('username=')).split('=')[1]; Куки широко используются для различных целей, включая сохранение сеансов аутентификации, отслеживание пользовательских предпочтений, аналитику и т.д. Однако, из-за своей природы, куки также являются объектом внимания вопросов конфиденциальности и безопасности, и существуют механизмы управления и ограничениями их использования, такие как политики SameSite.

Question 45

Что такое localstorage + пример

Answer 45

localStorage - это API веб-браузера, предоставляющее простое хранилище данных в виде пар ключ-значение. localStorage предназначен для хранения данных на стороне клиента, и эти данные остаются доступными даже после закрытия веб-браузера или перезапуска компьютера. Это предоставляет простой способ сохранения состояния или локальных настроек веб-приложения. // Сохранение данных в localStorage localStorage.setItem('username', 'JohnDoe'); // Получение данных из localStorage const savedUsername = localStorage.getItem('username'); // Получение объекта из localStorage const storedUser = JSON.parse(localStorage.getItem('user')); console.log(storedUser); // Выводит { name: 'John Doe', age: 30 } Обратите внимание, что данные в localStorage хранятся на уровне домена, и доступ к ним осуществляется только с того же самого домена, который их создал. Кроме того, хотя localStorage обеспечивает удобство, следует быть внимательным при хранении чувствительной информации, поскольку она доступна и изменяема из JavaScript в контексте того же домена.

Question 46

Какие бывают хуки и чля чего они нужны(без примеров кода)

Answer 46

Хуки (Hooks) в React - это функции, которые позволяют вам использовать состояние и другие возможности React в функциональных компонентах. Хуки предоставляют более простой и чистый способ организации логики компонентов, делают компоненты более переиспользуемыми и обеспечивают удобное управление состоянием. Вот некоторые из основных хуков React: useState: Позволяет добавлять локальное состояние в функциональные компоненты. useEffect: Предоставляет возможность выполнять побочные эффекты в функциональных компонентах, такие как выполнение кода после отрисовки компонента или подписка на внешние события. useContext: Позволяет компонентам получать доступ к значению контекста из ближайшего провайдера контекста. useReducer: Предоставляет альтернативу useState для управления более сложными состояниями с использованием функции редуктора. useCallback: Мемоизирует функцию, предотвращая ее пересоздание при каждом рендере компонента. Это полезно, чтобы избежать ненужных ререндеров дочерних компонентов, которым передаются функции. useMemo: Мемоизирует результат вычислений, предотвращая их повторное выполнение при каждом рендере компонента. Это полезно для оптимизации производительности. useRef: Создает объект ref, который может быть использован для сохранения мутабельных данных между рендерами без вызова повторного рендера. useImperativeHandle: Позволяет настроить значение, которое передается родительскому компоненту при использовании React.forwardRef. useLayoutEffect: Похож на useEffect, но запускается синхронно после всех изменений DOM. Используется, когда требуется измерить или манипулировать DOM сразу после рендера. useDebugValue: Позволяет отображать дополнительные данные в инструментах разработчика React. Хуки в React предоставляют простой и единообразный способ управления состоянием и жизненным циклом функциональных компонентов, что делает код более читаемым, понятным и поддерживаемым.

Question 47

Расскажи про области видимости

Answer 47

Глобальная область видимости (Global scope): Переменные и функции, объявленные в глобальной области видимости, доступны из любой части кода, включая другие функции и блоки кода. Переменные и функции, объявленные без использования ключевых слов var, let, или const, автоматически становятся глобальными. Локальная область видимости (Local scope): Переменные и функции, объявленные внутри функции или блока кода (например, условного оператора if или цикла for), имеют локальную область видимости. Они доступны только внутри этой функции или блока кода и не видны извне. Область видимости блока (Block scope): Введена с появлением ES6 (ECMAScript 2015). Переменные, объявленные с использованием ключевых слов let и const, имеют область видимости блока, ограниченную фигурными скобками {}. Такие переменные доступны только внутри блока, в котором они были объявлены, и не видны вне этого блока. Область видимости функции (Function scope): Это старый подход, который применяется к переменным, объявленным с использованием ключевого слова var. Переменные, объявленные внутри функции с использованием var, имеют область видимости, ограниченную функцией, и не доступны вне ее.

Question 48

Какие бывают значения у свойства position(5)

Answer 48

Свойство position в CSS определяет метод позиционирования элемента на веб-странице. Вот основные значения для этого свойства: static: Элемент размещается в нормальном потоке документа, и его позиция определяется обычным порядком в HTML-коде. Свойства top, right, bottom, left игнорируются при использовании position: static. relative: Элемент также размещается в нормальном потоке, но его положение может быть смещено с использованием свойств top, right, bottom, left. Окружающие элементы занимают место, которое элемент занимал бы в нормальном потоке. absolute: Элемент удаляется из нормального потока, и его позиция определяется относительно ближайшего позиционированного (не static) предка. Если такого предка нет, позиция устанавливается относительно краев окна браузера. fixed: Элемент также удаляется из нормального потока, и его позиция задается относительно краев окна браузера, что делает элемент "прикрепленным" к экрану. Элемент остается на месте при прокрутке страницы. sticky: Элемент начинает вести себя как relative, когда он в пределах контейнера, и как fixed, когда он выходит за границы контейнера во время прокрутки. Это значит, что элемент "приклеивается" к верхней или нижней границе контейнера в зависимости от направления прокрутки.

Question 49

Как использовать useeffect

Answer 49

Хук useEffect в React используется для выполнения побочных эффектов в функциональных компонентах. Побочные эффекты могут быть, например, запросы к серверу, подписка на события, изменение DOM после рендера компонента и так далее. Первый аргумент useEffect - это функция, содержащая код для выполнения побочного эффекта. Второй аргумент useEffect - это массив зависимостей. Если какие-то переменные из этого массива изменяются между рендерами, эффект будет вызван снова. Если массив зависимостей пуст или отсутствует, эффект будет вызываться после каждого рендера.

Question 50

Что такое семантика

Answer 50

Семантика HTML (HyperText Markup Language) относится к использованию HTML-тегов для передачи смысла и значения структуре веб-документа. В контексте HTML семантика означает использование тегов и их атрибутов для ясного определения содержимого и его роли на веб-странице. Принципы семантики HTML включают: Ясное определение структуры документа: Использование семантических тегов, таких как , , , , , , , позволяет четко определить различные части документа. Корректное использование заголовков: Заголовки (

до

) используются для организации информации в древовидной структуре, отражая иерархию и важность контента. Описание списков и таблиц: Семантические теги, такие как

,
,
1. ,

   ,

   ,

   , а также теги для создания таблиц (, , , , , ), предоставляют ясное представление структуры списков и таблиц. Использование адекватных тегов для мультимедийных элементов: Для встраивания изображений, видео и аудио используются соответственно , , , и дополнительные атрибуты и теги, чтобы обеспечить альтернативный контент и улучшить доступность. Применение тегов форм: Семантические теги форм, такие как , , , , , , помогают создавать интерактивные формы с четко определенными элементами. Применение семантики в HTML важно для улучшения читаемости кода, поддержания доступности веб-страниц для всех пользователей, включая тех, которые используют устройства чтения с экрана, и повышения релевантности и индексации контента поисковыми системами. Это также способствует лучшему пониманию структуры документа программами и разработчиками.

Question 51

Что такое методолгия bem

Answer 51

BEM (Block, Element, Modifier) - это методология именования классов в CSS, предназначенная для организации кода веб-приложений. Она разработана и используется компанией Яндекс для упрощения разработки и обслуживания стилей в больших проектах. Блок — это абсолютно независимый компонент страницы. Он отвечает только за отображение элементов — то есть, например, у него не может быть внешних отступов margin. Блоки могут включать в себя другие блоки. Имя блока совпадает с именем селектора по классу:

Элемент — это часть блока, которая имеет смысл только внутри своего блока и отдельно от него не используется. Имя селектора включает имя класса и — через двойное подчёркивание — имя элемента.

Модификатор — это сущность, которая описывает атрибуты блока или элемента: положение, состояние, поведение. Для разделения слов в именах всех сущностей используются дефисы. Модификатор в селекторе именуется через одно подчёркивание после имени элемента или блока.

Question 52

Что такое прототипы

Answer 52

Прототипы в JavaScript - это механизм, который позволяет объектам наследовать свойства и методы других объектов. Каждый объект в JavaScript связан с другим объектом, который называется его прототипом. Прототипы создают цепочку, известную как цепь прототипов (prototype chain), по которой происходит поиск свойств и методов. Каждый объект в JavaScript, кроме корневого объекта Object, имеет свой прототип. Например, у объекта, созданного с использованием литерала объекта {}, прототипом будет объект Object.prototype. Если мы создадим функцию, у нее будет прототип, связанный с Function.prototype. Это обеспечивает наследование методов и свойств между различными типами объектов. Пример создания объекта с использованием прототипа: javascript Copy code // Создание объекта с использованием литерала объекта const myObject = {}; // Вывод прототипа объекта console.log(Object.getPrototypeOf(myObject)); // Выведет Object.prototype JavaScript предоставляет два способа работы с прототипами: __proto__: Это устаревший способ доступа и установки прототипа объекта. Лучше использовать методы, предоставляемые ECMAScript 2015 (ES6) и выше. javascript Copy code const obj = {}; const prototypeObj = { key: 'value' }; // Установка прототипа через __proto__ obj.__proto__ = prototypeObj; console.log(obj.key); // Выведет 'value' Object.create(): Этот метод создает новый объект с указанным прототипом. javascript Copy code const prototypeObj = { key: 'value' }; const obj = Object.create(prototypeObj); console.log(obj.key); // Выведет 'value' Прототипы играют важную роль в системе наследования JavaScript и являются основой для работы с объектами и создания их иерархии. Они обеспечивают механизм делегирования свойств и методов между объектами, что улучшает переиспользование кода и управление сложностью программ.

Question 53

Что такое rest api

Answer 53

REST API (Representational State Transfer Application Programming Interface) — это архитектурный стиль для построения веб-сервисов, который основан на принципах REST. REST представляет собой набор ограничений и правил для построения распределённых систем.

Question 54

основные принципы rest api(5)

Answer 54

Основные принципы REST: Ресурсы (Resources): Ресурсы представляют собой сущности или объекты, к которым можно получить доступ или с которыми можно взаимодействовать. Ресурсы идентифицируются уникальными URL-адресами. Представление (Representation): Ресурсы могут иметь различные представления, такие как JSON, XML или HTML. Клиенты могут обращаться к ресурсам, запросив нужное им представление. Стейт (Stateless): Каждый запрос от клиента к серверу должен содержать всю необходимую информацию для понимания и обработки запроса. Сервер не должен хранить состояние между запросами от клиента. Операции CRUD (Create, Read, Update, Delete): Операции, соответствующие базовым действиям с данными: создание (POST), чтение (GET), обновление (PUT или PATCH), удаление (DELETE). Унификация интерфейса (Uniform Interface): Интерфейс взаимодействия между клиентом и сервером должен быть унифицирован. Это достигается использованием стандартных методов (GET, POST, PUT, DELETE), явной передачей состояния через представления и идентификацией ресурсов.

Question 55

Что такое dom дерево

Answer 55

DOM (Document Object Model) дерево - это иерархическое представление структуры документа в виде объектов, доступных для программного взаимодействия. DOM представляет собой интерфейс для работы с HTML и XML документами, предоставляя структуру документа в виде дерева объектов. DOM предоставляет API для манипуляции содержимым и структурой документа с использованием JavaScript. Это позволяет программам и веб-браузерам взаимодействовать с веб-страницами и изменять их динамически.

Question 56

Что такое двустороннее связывание

Answer 56

Двустороннее связывание (two-way binding) - это концепция в веб-разработке, когда изменения в пользовательском интерфейсе автоматически отражаются в данных и, наоборот, изменения в данных автоматически обновляют пользовательский интерфейс. Это позволяет синхронизировать состояние пользовательского интерфейса и данных без явных действий со стороны разработчика. Примером двустороннего связывания является использование фреймворков или библиотек для разработки веб-приложений, таких как Angular, React с использованием библиотеки React, и Vue.js. Эти инструменты предоставляют механизмы для установки связи между данными и элементами интерфейса пользователя. Принцип работы двустороннего связывания: Обнаружение изменений: Фреймворк следит за изменениями в элементах пользовательского интерфейса (например, изменениями в инпутах, чекбоксах, и т.д.) и обнаруживает их. Обновление данных: После обнаружения изменений в интерфейсе, фреймворк автоматически обновляет соответствующие данные в модели (например, объекте JavaScript или переменной). Обновление интерфейса: Если данные в модели изменяются программно, например, в результате асинхронных операций или взаимодействия с сервером, фреймворк автоматически обновляет соответствующие элементы интерфейса. Хотя двустороннее связывание может упростить разработку и сделать код более декларативным, иногда оно может привести к неожиданным проблемам и затруднениям в отслеживании изменений. Некоторые разработчики предпочитают использовать одностороннее связывание (one-way binding) в определенных случаях, чтобы явно управлять потоком данных и изменениями.

Question 57

Расскажи о map и set

Answer 57

Map и Set - это структуры данных в JavaScript, введенные стандартом ECMAScript 2015 (ES6), которые предоставляют эффективные способы хранения и обработки коллекций уникальных значений. Map представляет собой коллекцию ключ-значение, где ключи и значения могут быть любого типа данных. Ключи в Map уникальны, и каждому ключу соответствует одно значение. Set представляет собой коллекцию уникальных значений любого типа. Элементы в Set уникальны, и каждый элемент может встречаться только один раз.

Question 58

В чём отличие хранения данных в local storage от сессий

Answer 58

localStorage и сессии (sessionStorage) - это два различных механизма хранения данных в веб-браузере, предоставляемых стандартом Web Storage API. Они оба предоставляют клиентскому приложению возможность сохранять данные на стороне клиента, но есть несколько ключевых различий между ними. localStorage Постоянность данных: Данные, хранящиеся в localStorage, сохраняются даже после закрытия браузера и перезапуска компьютера. Они остаются доступными для приложения на долгий срок. Доступность: Данные в localStorage доступны для всех вкладок и окон браузера с одним и тем же происхождением (origin). Объем хранения: localStorage обычно предоставляет больший объем хранения по сравнению с sessionStorage. В различных браузерах это может быть от нескольких мегабайт до 10 мегабайт или более. sessionStorage Время жизни данных: Данные, хранящиеся в sessionStorage, существуют только в течение времени жизни сессии браузера. Когда пользователь закрывает вкладку или окно браузера, данные удаляются. Доступность: Данные в sessionStorage доступны только в пределах той вкладки или окна, в которой они были установлены. Другие вкладки или окна браузера не могут получить доступ к данным из sessionStorage, установленным в другой вкладке или окне. Объем хранения: Объем хранения sessionStorage обычно меньше, чем у localStorage, и может варьироваться от нескольких мегабайт до 10 мегабайт или менее.

Question 59

Что такое псевдоэлемент

Answer 59

Псевдоэлементы в CSS представляют собой части элемента, которые не являются реальными элементами DOM, но позволяют стилизовать определенные части содержимого или элемента. Они добавляются с использованием двойного двоеточия (::) перед именем псевдоэлемента. Некоторые другие распространенные псевдоэлементы включают: ::before: добавляет контент перед содержимым элемента. ::after: добавляет контент после содержимого элемента. ::first-line: применяет стили к первой строке текста внутри элемента. ::first-letter: применяет стили к первой букве текста внутри элемента. ::selection: применяет стили к выделенному тексту пользователем. Применение псевдоэлементов позволяет вам создавать эффекты и стили, которые не требуют дополнительных элементов в HTML-коде.

Question 60

Что такое iife

Answer 60

IIFE (Immediately Invoked Function Expression) представляет собой JavaScript-функцию, которая вызывается немедленно после ее создания. Это конструкция, которая оборачивает функцию внутри группирующих скобок (обычно используется анонимная функция) и сразу же вызывает ее. Синтаксис IIFE выглядит следующим образом: (function() { // код IIFE })(); Основная идея IIFE заключается в создании локальной области видимости для предотвращения загрязнения глобальной области видимости переменными, которые используются внутри функции. Поскольку функция выполняется сразу после создания, любые переменные, объявленные внутри IIFE, не будут конфликтовать с переменными из внешнего контекста. Пример IIFE: javascript Copy code (function() { var localVar = "This is a local variable"; console.log(localVar); })(); // console.log(localVar); // Ошибка: localVar не определена в глобальной области видимости В данном примере переменная localVar существует только внутри IIFE и не доступна за его пределами. Это позволяет избежать конфликтов и улучшает управление областями видимости в JavaScript. IIFE также часто используются для создания замыканий, приватных переменных и модульного кода.

Question 61

Что такое props

Answer 61

props (сокращение от "properties") в контексте React представляют собой объект, содержащий параметры (или свойства), передаваемые компоненту от его родительского компонента. С использованием props компоненты React могут взаимодействовать друг с другом, передавая данные от родителя к потомкам.

Question 62

Какие селекторы знаешь

Answer 62

Селектор элемента (element selector): Выбирает все элементы определенного типа. Селектор идентификатора (id selector): Выбирает единственный элемент с определенным идентификатором. Селектор класса (class selector): Выбирает все элементы с определенным классом. Селектор потомка (descendant selector): Выбирает все элементы-потомки указанного элемента. Селектор дочернего элемента (child selector): Выбирает все прямые дочерние элементы указанного элемента. Селектор атрибута (attribute selector): Выбирает элементы с определенным атрибутом или атрибутом, соответствующим определенному значению. Селектор псевдокласса (pseudo-class selector): Выбирает элементы в определенном состоянии или позиции. Селектор псевдоэлемента (pseudo-element selector): Выбирает определенную часть элемента. Универсальный селектор (universal selector): Выбирает все элементы. Селектор проверки видимости (:visible, :hidden): Выбирает элементы на основе их видимости.

Question 63

Что означает слово каскад в css

Answer 63

Каскад (cascade) в CSS означает применение стилей к элементам веб-страницы в соответствии с набором правил и приоритетов, определенных в таблице стилей. Процесс применения стилей следует логике каскада, и он описывает, какие стили должны быть применены к конкретному элементу при наличии нескольких правил стилей.

Question 64

Как поменять контекст функции

Answer 64

Использование методов bind, call и apply: bind: Создает новую функцию с привязанным контекстом, но не вызывает ее. call: Вызывает функцию с указанным контекстом и передает параметры в виде отдельных аргументов. apply: Вызывает функцию с указанным контекстом и передает параметры в виде массива. Использование стрелочных функций: Стрелочные функции не имеют своего собственного контекста (this берется из окружающего контекста в момент создания функции).

Question 65

Что такое деструктуризация

Answer 65

Деструктуризация (Destructuring) в программировании - это специальный синтаксис в языках программирования, который позволяет разбирать (деструктурировать) структурированные данные, такие как массивы или объекты, на более мелкие части, присваивая их переменным в одной строке. Это удобный и краткий способ работы с данными.

Question 66

Что такое псевдоклассы

Answer 66

Псевдоклассы в CSS - это ключевые слова, которые добавляют дополнительные стили к определенным состояниям или частям элементов, которые не могут быть выбраны с использованием обычных селекторов. Псевдоклассы начинаются с двоеточия (:) и применяются к элементам в определенных условиях.

Question 67

примеры псевдоклассов в css

Answer 67

:hover: Применение стилей при наведении курсора мыши на элемент. :focus: Стилизация элемента, который в данный момент находится в фокусе (активном). :active: Применение стилей к элементу в момент его активации (нажатие и удержание). :nth-child(n): Стилизация каждого n-ного дочернего элемента. :first-child: Применение стилей к первому дочернему элементу. :last-child: Стилизация последнего дочернего элемента. :nth-of-type(n): Стилизация каждого n-ного элемента определенного типа. :not(selector): Применение стилей к элементам, не соответствующим указанному селектору. :checked: Стилизация выбранных (отмеченных) элементов формы. :disabled: Применение стилей к выключенным элементам формы. :empty: Стилизация элементов, которые не содержат дочерних элементов или текстового содержимого. :nth-last-child(n): Стилизация каждого n-ного дочернего элемента, начиная с конца. :nth-last-of-type(n): Стилизация каждого n-ного элемента определенного типа, начиная с конца. :first-of-type: Стилизация первого элемента определенного типа. :last-of-type: Стилизация последнего элемента определенного типа.

Question 68

E.Preventdefault() и e.Stopprepagination(), для чего нужны

Answer 68

e.preventDefault(): Используется для предотвращения стандартного поведения браузера в ответ на событие(пример: отмена перехода по ссылке, перезагрузке при отправке формы) e.stopPropagation():Для предотвращения дальнейшего всплытия или погружения события в DOM. Это означает, что событие не будет передаваться выше по иерархии элементов (всплытие) или вглубь иерархии элементов (погружение).

Question 69

Что ты знаешь про специфичность селекторов

Answer 69

Специфичность селекторов в CSS определяет, как браузер решает конфликты между правилами стилей, когда несколько правил применяются к одному элементу. Каждый селектор имеет свою уровень специфичности, и сумма этих уровней определяет, какое правило будет применено. В CSS специфичность обычно выражается в виде четырехразрядного числа, где каждая цифра представляет собой уровень специфичности для соответствующего компонента:

Question 70

Как отцентровать блок по горизонтали и по вертикали

Answer 70

Метод Flexbox (гибкий контейнер): css Copy code .container { display: flex; justify-content: center; /* Центрирование по горизонтали */ align-items: center; /* Центрирование по вертикали */ height: 100vh; /* Высота 100% вьюпорта (окна браузера) */ } 2. Метод Grid (решетчатый контейнер): css Copy code .container { display: grid; place-items: center; /* Краткая запись для центрирования как по горизонтали, так и по вертикали */ height: 100vh; /* Высота 100% вьюпорта (окна браузера) */ }

Question 71

Как работает settimeout

Answer 71

setTimeout в JavaScript используется для установки таймера, который вызывает функцию или выполняет указанный код один раз после указанной задержки. аргументы: function: Функция или строка кода, которую нужно выполнить по истечении времени. delay: Задержка в миллисекундах до выполнения функции. Важно отметить, что функция setTimeout добавляет задачу в конец очереди событий браузера. То есть, даже если установленная задержка составляет 0 миллисекунд, выполнение функции все равно будет отложено до следующего цикла событий.

Question 72

Что такое прототипное наследование

Answer 72

Прототипное наследование — это механизм наследования в языке программирования JavaScript, основанный на использовании объектов "прототипов". В этой модели каждый объект имеет свойство prototype (прототип), которое ссылается на другой объект. Этот прототип может также иметь свой собственный прототип, и так далее, образуя цепочку прототипов. Когда происходит обращение к свойству или методу объекта, JavaScript ищет это свойство сначала в самом объекте, а затем в его прототипе. Если свойство не найдено, поиск продолжается в прототипе прототипа и так далее, пока свойство не будет найдено или не достигнут конечный объект Object.prototype.

Question 73

Как работает наследование в css

Answer 73

В CSS наследование применяется к свойствам стилей, которые передаются от родительских элементов дочерним элементам внутри DOM-дерева. Когда свойство стиля устанавливается для родительского элемента, оно может быть унаследовано дочерним элементам, если это свойство является наследуемым. Примеры наследуемых свойств: color: Цвет текста элемента. font-family: Семейство шрифта. font-size: Размер шрифта. line-height: Высота строки. text-align: Выравнивание текста.

Question 74

Расскажи про async await

Answer 74

async/await - это синтаксический сахар в JavaScript, который упрощает асинхронное программирование и работу с Promise. Он предоставляет читаемый и более линейный код для работы с асинхронными операциями, делая его более схожим с синхронным кодом. Ключевые слова: async: Слово async используется перед функцией для обозначения того, что она возвращает Promise. Функция с async всегда возвращает Promise, даже если внутри нее нет явного возвращения Promise. await: Слово await используется внутри функций, объявленных с async, для ожидания завершения Promise. Оно приостанавливает выполнение кода внутри функции до тех пор, пока Promise не будет разрешен или отклонен.

Question 75

Какими способами можно скрыть элемент

Answer 75

display: none; - Этот стиль полностью убирает элемент из потока документа, делая его невидимым и не занимающим место на странице. visibility: hidden; также скрывает элемент, но при этом элемент продолжает занимать место на странице, сохраняя свой размер и расположение. opacity: 0; делает элемент полупрозрачным, что делает его невидимым. Однако элемент остается в потоке документа и занимает место. position: absolute; или position: fixed; с перемещением за пределы видимой области .hidden-element { position: absolute; /* или position: fixed; */ left: -9999px; /* или любое большое отрицательное значение */ top: -9999px; /* или любое большое отрицательное значение */ } Этот метод выносит элемент за пределы видимой области, делая его невидимым для пользователя.

Question 76

Что такое http

Answer 76

HTTP (HyperText Transfer Protocol) - это протокол передачи данных, используемый для обмена информацией между клиентом и сервером в сети Интернет. Он является основой для обмена данными в вебе. HTTP предоставляет стандартизированный способ отправки и получения текстовых и мультимедийных данных.

Question 77

http основные черты

Answer 77

Основные черты HTTP: Протокол запрос-ответ: Взаимодействие между клиентом и сервером происходит в виде обмена запросами (requests) и ответами (responses). Клиент отправляет HTTP-запрос, а сервер отвечает HTTP-ответом. Безсостояточность (stateless): Каждый запрос считается независимым от предыдущих запросов. Сервер не сохраняет состояние между запросами от одного клиента. Это облегчает масштабирование и управление ресурсами сервера. Текстовый протокол: HTTP-запросы и ответы часто представляют собой текстовые строки в формате ASCII. Однако, с развитием веб-технологий, также используются бинарные форматы, такие как JSON, XML, и другие. Клиент-серверная архитектура: HTTP работает на основе модели "клиент-сервер", где клиент отправляет запросы, а сервер предоставляет ответы. Состоит из методов (methods): HTTP-методы определяют тип запроса, который клиент отправляет серверу. Некоторые из распространенных методов включают GET (получение данных), POST (отправка данных на сервер), PUT (обновление данных на сервере), DELETE (удаление данных на сервере) и т. д.

Question 78

что такое cors

Answer 78

CORS (Cross-Origin Resource Sharing) - это механизм веб-безопасности, который позволяет или запрещает запросы к ресурсам на другом домене (origin) из веб-страницы. Стандарт CORS предназначен для предотвращения проблем с безопасностью, которые могут возникнуть при выполнении AJAX-запросов между разными источниками. Когда веб-страница загружается из одного домена, а JavaScript пытается выполнить запрос к ресурсам на другом домене (например, запрос к API с другого сервера), браузер блокирует такие запросы из соображений безопасности. CORS предоставляет способы для серверов сообщать браузерам, что определенные источники (origin) безопасны для выполнения запросов, и что браузер может разрешить эти запросы.

Question 79

Какие проблемы решает react

Answer 79

Обновление DOM эффективно: - (изменение DOM затратно) Virtual DOM минимизируtn количество реальных манипуляций с DOM. - (трудностям в поддержке, переиспользования и масштабировании кода, отсутствие стандарта) Компонентный подход. Изоляция и масштабирование - (Следить за состоянием тяжело) Введение однонаправленного потока данных (однонаправленного связывания данных) и использование управляемых компонентов для упрощения управления состоянием. - (Необходимость ручного обновления интерфейса при изменении данных.) Автоматический механизм обновления интерфейса - (Неоднородные инструменты и отсутствие стандартов.) Активное сообщество и экосистема инструментов,

Question 80

Что такое чистая функция

Answer 80

Чистая функция (Pure Function) - это функция, которая, при одинаковых входных данных, всегда возвращает одинаковый результат, и не имеет побочных эффектов, влияющих на состояние программы или окружающую среду. Такие функции особенно ценятся в функциональном программировании за их предсказуемость и легкость тестирования.

Question 81

Какие основные характеристики чистой функции

Answer 81

Основные характеристики чистых функций: Детерминированность: Для одних и тех же входных данных функция всегда должна возвращать один и тот же результат. Нет случайных элементов или неопределенных значений внутри функции. Отсутствие побочных эффектов: Функция не должна влиять на состояние программы или изменять внешние переменные. Она не должна выполнять запись в файлы, модифицировать глобальные переменные, отправлять запросы к серверу и так далее.

Question 82

Почему важно указывать ширину и высоту для картинок

Answer 82

1.Предотвращение мерцания (layout reflow): Если размеры изображения не указаны, браузеру приходится адаптировать макет страницы после загрузки изображения. Это может вызвать мерцание содержимого, когда браузер пересчитывает размеры элементов на странице. Указание размеров изображения позволяет браузеру зарезервировать нужное место для изображения заранее, предотвращая мерцание и улучшая визуальный опыт пользователя. 2.Оптимизация производительности: Указание размеров изображений позволяет браузеру правильно распределять место под изображение, что может ускорить отрисовку страницы. Это особенно важно при работе с большим количеством изображений на веб-странице. 3.Подгонка изображений в макете: Задавая размеры изображений, вы можете точно контролировать их отображение в макете страницы. Это важно для обеспечения правильного расположения и визуального взаимодействия с другими элементами на странице.

Question 83

Для чего нужен promiseall

Answer 83

Promise.all - это метод в JavaScript, который используется для выполнения нескольких промисов параллельно и ожидания, пока все они завершатся. Этот метод принимает массив промисов и возвращает новый промис, который разрешится, когда все переданные промисы завершат свое выполнение, или отклонится, если хотя бы один из промисов отклонится.

Question 84

Как сравнить объекты в js

Answer 84

1. Преобразовать объекты в строки с помощью JSON.stringify и затем сравнить строки. 2. Сравнить каждый ключ и значение в объектах вручную. Получить списки ключей через Object.keys и сравнивать между собой (obj1[key] === obj2[key]) 3. Сторонние библиотеки, такие как lodash с его методом isEqual, который учитывает вложенные объекты.

Question 85

Как можно оптимизировать перерисовки(10)

Answer 85

1. Использование виртуального DOM: Фреймворки, такие как React, Vue и Angular, используют виртуальный DOM для минимизации фактических манипуляций с реальным DOM. Виртуальный DOM предоставляет эффективный механизм сравнения изменений и обновления только необходимых частей интерфейса. 2 .Анимации с помощью CSS: Используйте CSS для анимаций вместо JavaScript, где это возможно. Анимации средствами CSS GPU ускоряются и могут работать вне потока событий JavaScript. 3.Использование shouldComponentUpdate (React): В React вы можете оптимизировать перерисовки компонентов, реализовав метод shouldComponentUpdate. Этот метод позволяет предотвратить лишние перерисовки, если компонент не изменил свои данные. 4. Мемоизация и использование мемоизированных селекторов (Redux, Reselect) В Redux и других подобных библиотеках можно использовать мемоизацию и мемоизированные селекторы для избежания лишних вычислений и обновлений в случае, если данные не изменились. 5. Ленивая загрузка (Lazy Loading): Загружайте компоненты, ресурсы и изображения только тогда, когда они действительно нужны, чтобы уменьшить объем данных, передаваемых по сети, и ускорить инициализацию страницы. 6. Оптимизация изображений: Используйте сжатые и форматированные изображения. Иногда, использование изображений с меньшим разрешением (для различных устройств) также может быть полезным. 7. Использование CSS-трансформаций вместо позиционирования: При анимациях предпочтительнее использовать CSS-трансформации, так как они могут быть более эффективными, чем изменения свойств позиционирования. 8. Веб-шрифты с оптимальной загрузкой: Загружайте только необходимые шрифты и используйте форматы, поддерживаемые браузерами. 9. Использование Web Workers: Выносите тяжелые вычисления и задачи в фоновые потоки с использованием Web Workers, чтобы не блокировать основной поток выполнения. 10. Оптимизация CSS и JS кода: Удаляйте неиспользуемый CSS и JS код. Минифицируйте и объединяйте файлы для уменьшения размеров файлов и ускорения загрузки.

Question 86

В чем разница uselayuouteffect и useeffect

Answer 86

useEffect вызывается после завершения текущей операции рендеринга и отрисовки на экране, то есть после того, как браузер выполнил перерасчеты макета (layout) и покрасил элементы на странице. useLayoutEffect срабатывает сразу после завершения операции рендеринга, но перед тем, как браузер выполнит перерасчеты макета (layout) и покрасит элементы на странице.

Question 87

Когда лучше использовать useEffect илил useLoyautEffect

Answer 87

seEffect: Обычно предпочтительно использовать useEffect в большинстве случаев, особенно если ваши действия не влияют на макет страницы и могут быть выполнены асинхронно после рендеринга. useLayoutEffect: Если ваши действия зависят от текущего макета страницы и требуют синхронного выполнения до перерасчетов макета, то useLayoutEffect может быть более подходящим выбором. Однако, следует использовать его с осторожностью, так как синхронные операции могут замедлить обновление интерфейса пользователя.

Question 88

С помощью чего скопировал бы объект

Answer 88

1.Поверхностное копирование: a. Спред-оператор ({...}): b. Метод Object.assign(): 2.Глубокое копирование: a. JSON.parse(JSON.stringify(originalObject)) b. Библиотеки для глубокого копирования(lodash - cloneDeep) c.(от себя). Написать функцию самому

Question 89

Что такое falsy значения

Answer 89

В JavaScript, значения, которые приводятся к логическому "false" в контексте условных выражений, называются "falsy" (ложными) значениями. Когда вы используете условие в операторе if, while, или в другом контексте, JavaScript автоматически приводит значение к логическому типу (true или false). Значения, которые приводятся к "false", считаются "falsy".

Question 90

Перечисли все falsy значения(8)

Answer 90

false: Логическое значение false. null: Представляет отсутствие значения. undefined: Обозначает неинициализированное значение. 0: Числовой литерал 0. NaN: Представляет "Not-a-Number" и является результатом некорректных математических операций. '' или "": Пустая строка. document.all: Старое свойство, которое также приводится к "false". 0n: Логический false для BigInt.

Question 91

Что такое ssr

Answer 91

SSR расшифровывается как Server-Side Rendering (Рендеринг на стороне сервера). Это подход в веб-разработке, при котором HTML-страница формируется на сервере и отправляется клиенту как готовый HTML-код. После этого браузер клиента начинает загружать и выполнять JavaScript, связанный с этой страницей.

Question 92

Какие преимущества у SSR

Answer 92

Улучшенная производительность по SEO: Поисковые системы обычно лучше индексируют контент, полученный при SSR, по сравнению с SPA (Single-Page Application), где контент формируется динамически с использованием JavaScript. Лучшая начальная загрузка: Пользователи видят начальный контент быстрее, так как он поступает от сервера. Улучшенный опыт пользователей с медленным интернет-соединением: Пользователи с медленным интернет-соединением могут увидеть контент быстрее, чем если бы они ждали загрузки всего JavaScript. Однако SSR также может повлечь за собой больше нагрузки на сервер и создание сложных архитектур для управления состоянием и поведением на клиентской и серверной сторонах.

Question 93

Как проверить, что поле является массивом

Answer 93

Оператор Array.isArray() Проверка через конструктор Array (if (myArray.constructor === Array)) Проверка с использованием instanceof (if (myArray instanceof Array))

Question 94

Что такое usecontext

Answer 94

useContext - это хук в библиотеке React, который позволяет функциональным компонентам получать значение из контекста. Контекст в React предоставляет способ передачи данных глубоко вниз по дереву компонентов без явной передачи пропсов через каждый промежуточный компонент.

Question 95

Зачем нужен redux

Answer 95

Redux - это библиотека для управления состоянием в приложениях на языке JavaScript, особенно в приложениях, построенных с использованием библиотеки React. Основной принцип Redux заключается в том, чтобы хранить все состояние приложения в одном централизованном хранилище, что облегчает управление и обновление состояния приложения.

Question 96

преимущества redux

Answer 96

Централизованное управление состоянием: Redux предлагает единственное место для хранения всего состояния вашего приложения. Это делает управление данными более прозрачным и предсказуемым. Предсказуемость и единообразие: Состояние в Redux неизменяемо. Все изменения состояния осуществляются путем создания новых объектов. Это обеспечивает предсказуемость изменений и упрощает отслеживание действий, влияющих на состояние. Легкость отслеживания изменений: Redux предоставляет мощный механизм подписки, который позволяет отслеживать изменения состояния. Это упрощает реагирование на изменения данных в приложении. Управление асинхронностью: Redux позволяет управлять сложной логикой и асинхронными операциями с использованием middleware, такого как Redux Thunk или Redux Saga. Это особенно полезно при работе с сетевыми запросами и обработкой асинхронных событий. Легкость тестирования: Одним из преимуществ Redux является легкость тестирования. Действия и редукторы могут быть протестированы независимо, что облегчает создание юнит-тестов для вашего кода. Подходит для крупных приложений: Redux предоставляет масштабируемую архитектуру для управления состоянием, что делает его подходящим для крупных и сложных приложений. Широкое сообщество и экосистема: Redux имеет большое сообщество и обширную экосистему плагинов, middleware и инструментов разработки, что упрощает использование и расширение функциональности.

Question 97

Жизненный цикл компонента React

Answer 97

Жизненный цикл компонента React - это набор методов, которые вызываются в различные моменты времени при создании, обновлении и уничтожении компонента. Эти методы предоставляют возможность выполнять определенные действия на разных этапах жизненного цикла компонента

Question 98

Основные методы жизненного цикла компонента React:

Answer 98

constructor(): Вызывается при создании экземпляра компонента. Используется для инициализации состояния и привязки методов. render(): Отвечает за возвращение элементов, которые будут отрисованы. Обязательный метод. componentDidMount(): Вызывается после вставки компонента в DOM. Используется для выполнения запросов к серверу, подписок на события и др. shouldComponentUpdate(): Определяет, следует ли компоненту обновиться. Возвращает true или false. componentDidUpdate(): Вызывается после обновления компонента. Используется для выполнения действий после обновления. componentWillUnmount(): Вызывается перед удалением компонента из DOM. Используется для очистки ресурсов. static getDerivedStateFromProps(): Вызывается перед каждым рендером при получении новых свойств. Используется для обновления состояния на основе новых свойств. getSnapshotBeforeUpdate(): Вызывается перед фактическим изменением DOM. Используется для получения информации о DOM до изменений. static getDerivedStateFromError(): Вызывается, если во время рендеринга произошла ошибка. Используется для обновления состояния компонента. componentDidCatch(): Вызывается после того, как произошла ошибка в компоненте. Используется для обработки ошибок, записи в логи и др. Эти методы предоставляют возможность выполнения различных действий на различных этапах жизненного цикла компонента в React.

Question 99

Что такое схлопывание границ

Answer 99

Схлопывание границ (Collapsing Margins) - это феномен в CSS, когда верхний и нижний внешние отступы (margins) двух соседних блочных элементов объединяются в один отступ. Этот процесс применяется только к вертикальным внешним отступам.

Question 100

Из-за чего происходит схлопывание границ

Answer 100

Вертикальное схлопывание границ у блочных элементов: Когда верхний отступ одного блочного элемента идет после нижнего отступа предыдущего блока. Высота схлопнутого отступа будет равна наибольшему из двух отступов. css Copy code /* Пример вертикального схлопывания границ */ .block1 { margin-bottom: 20px; } .block2 { margin-top: 30px; } В этом примере высота схлопнутого отступа между block1 и block2 будет 30px (максимум из 20px и 30px). Границы блока и его потомка: Если блок содержит потомка с верхним отступом, схлопывание границ также может произойти. css Copy code /* Пример схлопывания границ между блоком и его потомком */ .parent { margin-bottom: 20px; } .child { margin-top: 30px; } В этом примере высота схлопнутого отступа будет также 30px.

Question 101

Как избежать схлопывания границ.Какими свойствами(2)

Answer 101

display: inline-block display: flex; flex-direction: column;

Question 102

Что такое самовызывающаяся функция

Answer 102

Самовызывающаяся функция (Immediately Invoked Function Expression, IIFE) - это функция в JavaScript, которая вызывается немедленно после своего определения. Она обычно создается и вызывается в одном выражении, и ее целью часто является создание локальной области видимости для изоляции переменных от глобальной области видимости. (function() { // код самовызывающейся функции })();

Question 103

Что такое интерполяция

Answer 103

Интерполяция - это процесс вставки значений переменных или выражений внутри строки или текста. В контексте программирования и шаблонизации, интерполяция обеспечивает динамическое создание строк, где значения переменных подставляются в определенные места в тексте. Это позволяет создавать строки, зависящие от переменных или выражений во время выполнения программы.

Question 104

Что такое миксины

Answer 104

В контексте препроцессоров CSS, таких как Sass или Less, миксины представляют собой специальные блоки кода, которые могут быть определены один раз и затем многократно использованы в различных частях стилевого файла. Миксины позволяют создавать набор стилевых правил, который можно вставлять в другие селекторы или даже в другие миксины. Пример миксина на Sass: scss Copy code // Определение миксина @mixin border-radius($radius) { border-radius: $radius; } // Использование миксина в селекторе .button { @include border-radius(5px); } .card { @include border-radius(10px); } В этом примере border-radius - это миксин, который принимает аргумент $radius и добавляет стилевое правило border-radius с указанным радиусом. Затем миксин используется в двух разных селекторах .button и .card с различными значениями для border-radius.

Question 105

Flexbox свойство отвечающее за перенос элементов на новую строку

Answer 105

flex-wrap nowrap (по умолчанию): Флекс-элементы умещаются в одной строке. Если не хватает места, они могут быть обрезаны или уменьшены. css Copy code .flex-container { display: flex; flex-wrap: nowrap; } wrap: Флекс-элементы переносятся на новую строку, если не хватает места. css Copy code .flex-container { display: flex; flex-wrap: wrap; } wrap-reverse: То же, что и wrap, но строки переносятся в обратном порядке. css Copy code .flex-container { display: flex; flex-wrap: wrap-reverse; } Пример с использованием flex-wrap: css Copy code .flex-container { display: flex; flex-wrap: wrap; /* флекс-элементы переносятся на новую строку */ } .flex-item { flex: 1; min-width: 200px; margin: 10px; } В этом примере, если ширина .flex-container становится слишком узкой, флекс-элементы будут переноситься на новую строку.

Question 106

Как увеличить в размере при наведении элемент, не сдвигая соседние

Answer 106

Чтобы увеличить размер элемента при наведении без сдвига соседних элементов, можно использовать CSS и псевдокласс :hover. Вот пример: css Copy code .enlarge-on-hover { transition: transform 0.3s ease-in-out; } .enlarge-on-hover:hover { transform: scale(1.1); /* Увеличение в 1.1 раза */ } В этом примере: transition применяет анимацию к свойству transform, делая изменения более плавными с продолжительностью 0.3 секунды и функцией ускорения-замедления (ease-in-out). Свойство transform: scale(1.1) при наведении увеличивает элемент в 1.1 раза. Это создает визуальный эффект увеличения без сдвига соседних элементов. .enlarge-on-hover { transition: transform 0.3s ease-in-out; } .enlarge-on-hover:hover { transform: scale(1.1); /* Увеличение в 1.1 раза */ }

Question 107

Что делает box-sizing: border-box

Answer 107

Свойство box-sizing: border-box в CSS определяет, что размер элемента включает в себя ширину и высоту содержимого, а также отступы (padding) и границу (border), но не внешние отступы (margin). Таким образом, если вы добавляете паддинг, размер элемента останется постоянным, и паддинг будет "внутри" элемента, не увеличивая его общие размеры. свойство box-sizing наследуется от родительского элемента, что означает, что вы можете установить его на более общий элемент, такой как , и это будет влиять на все дочерние элементы. Это может быть удобным, если вы хотите применить одинаковую модель размеров для всего документа.

Question 108

Что такое селектор в html

Answer 108

В веб-разработке селектор - это паттерн, который используется для выбора и стилизации HTML-элементов на веб-странице. Селекторы в CSS указывают, на какие элементы должны применяться стили.(теги, классы,ид)

Question 109

Что такое адаптивная верстка

Answer 109

Адаптивная верстка (или responsive web design) — это подход к созданию веб-страниц таким образом, чтобы они эффективно адаптировались к различным размерам экранов и устройствам, начиная от маленьких мобильных телефонов и планшетов до больших настольных мониторов.

Question 110

Что такое solid

Answer 110

Принципы SOLID — это набор пяти основных принципов объектно-ориентированного программирования и проектирования, предложенных Робертом Мартином (Robert C. Martin). Эти принципы помогают создавать более гибкий, понятный и поддерживаемый код. Акроним SOLID состоит из первых букв каждого из этих принципов: Принцип единственной ответственности (Single Responsibility Principle - SRP): Каждый класс должен иметь только одну причину для изменения. То есть, класс должен быть ответственным только за одну важную часть функциональности программы. Принцип открытости/закрытости (Open/Closed Principle - OCP): Программные сущности (классы, модули, функции и т. д.) должны быть открыты для расширения, но закрыты для модификации. Это означает, что поведение сущности может быть расширено без изменения её исходного кода. Принцип подстановки Барбары Лисков (Liskov Substitution Principle - LSP): Объекты базового класса должны быть заменяемыми объектами производного класса без изменения корректности программы. Если S - это подтип T, то объекты типа T могут быть заменены объектами типа S без изменения корректности программы. Принцип разделения интерфейса (Interface Segregation Principle - ISP): Клиенты не должны зависеть от интерфейсов, которые они не используют. Это означает, что не следует насильно навязывать клиентам интерфейсы с методами, которые им не нужны. Принцип инверсии зависимостей (Dependency Inversion Principle - DIP): Высокоуровневые модули не должны зависеть от низкоуровневых модулей. Оба должны зависеть от абстракций. Более того, абстракции не должны зависеть от деталей. Детали должны зависеть от абстракций.

Question 111

Для чего служат vh, vw при указании размеров

Answer 111

vh (viewport height) и vw (viewport width) — это относительные единицы измерения, которые используются в CSS для задания размеров элементов относительно размеров видимой области (viewport) браузера. vh: Определяет высоту элемента в процентах от высоты видимой области браузера. Например, если установить height: 50vh;, это будет означать, что высота элемента составит половину высоты видимой области. vw: Определяет ширину элемента в процентах от ширины видимой области браузера. Например, если установить width: 25vw;, это будет означать, что ширина элемента составит четверть ширины видимой области. Эти единицы измерения часто используются в адаптивном дизайне для создания элементов, размеры которых зависят от размеров экрана устройства. Кроме того, существуют и другие относительные единицы измерения, такие как: em: Определяет размеры относительно размера шрифта родительского элемента. rem: Аналогичен em, но размеры определяются относительно размера шрифта корневого элемента (html). %: Определяет размеры относительно размеров родительского элемента. Комбинирование различных относительных единиц измерения позволяет более гибко настраивать размеры элементов в зависимости от различных условий и требований дизайна.

Question 112

Перечисли основные методы life cycle(5)

Answer 112

1.constructor(props): конструктор, в котором происходит начальная инициализация компонента 2.render(): рендеринг компонента 3.componentDidMount(): вызывается после рендеринга компонента. Здесь можно выполнять запросы к удаленным ресурсам 4.componentWillUnmount(): вызывается перед удалением компонента из DOM 5.componentDidUpdate(prevProps, prevState, snapshot): вызывается сразу после обновления компонента (если shouldComponentUpdate возвращает true). В качестве параметров передаются старые значения объектов props и state. Третий параметр - значение, которое возвращает метод getSnapshotBeforeUpdate

Question 113

Что такое ооп

Answer 113

ООП (Объектно-Ориентированное Программирование) — это парадигма программирования, основанная на концепциях объектов, которые представляют собой экземпляры классов, и взаимодействуют друг с другом для выполнения задач программы. ООП способствует более четкому и модульному проектированию программ, облегчает повторное использование кода, упрощает поддержку и обеспечивает лучшую организацию программных систем. JavaScript (в контексте создания объектов через прототипы), поддерживают ООП и предоставляют средства для его реализации.

Question 114

Инкапсуляция (Encapsulation):

Answer 114

Инкапсуляция (Encapsulation): Объединение данных и методов, которые работают с этими данными, внутри одного объекта. Это позволяет скрыть внутренние детали реализации и предоставить интерфейс для взаимодействия с внешним миром.

Question 115

Наследование (Inheritance):

Answer 115

Наследование (Inheritance): Механизм создания новых классов на основе существующих. Класс-наследник (подкласс) получает свойства и методы класса-родителя (суперкласса), что позволяет повторно использовать код и создавать иерархии классов.

Question 116

Полиморфизм (Polymorphism)

Answer 116

Полиморфизм (Polymorphism): Возможность использования одного и того же интерфейса для различных типов данных или объектов. Это может быть реализовано через перегрузку методов, интерфейсы, абстрактные классы и другие механизмы.

Question 117

Абстракция в ООП

Answer 117

Абстракция (Abstraction): Способность абстрагировать (упрощать) сложные системы, выделяя основные характеристики и игнорируя детали. В ООП абстракция часто реализуется с использованием абстрактных классов и интерфейсов.

Question 118

Расскажи про event loop

Answer 118

Event Loop (цикл событий) - это ключевой компонент в асинхронном программировании и веб-разработке. Он позволяет управлять порядком выполнения задач в однопоточных средах, таких как браузер или Node.js. - отдельный механизм, который позволяет использовать неблокирующую модель ввода и вывода. Не является частью движков(таких как v8), Цикл событий предоставляется средой(например браузер). **Web api** - связывает стэк с задачами. Задачи регистрируются в нем. Пример вызова функции `settimeout(() ⇒ console.log(’timeout’),3000)`. Сначала попадет в webapi и внутри него начинается отчет трёх секунд, после этого попадет в очередь задач, а уже после в стек вызовов.

Question 119

Порядок выполнения задач в Event loop

Answer 119

1. Выполняются все синхронные задачи (сразу попадают в стек вызовов) 2. Выполняются все микротаски 3. Выполняется 1 (одна) макротаска - если внутри себя она содержит микротаски, то сначала выполняется все внутри этой макротаски 4. Выполняются следующая макротаска (всегда по одной) и т.д.

Question 120

Что такое Callback Queue (Очередь обратных вызовов) в Event Loop:

Answer 120

Callback Queue (Очередь обратных вызовов): Здесь хранятся функции обратного вызова (callback), которые должны быть выполнены после завершения текущего цикла событий. Event Loop: Постоянно мониторит стек вызовов и очередь обратных вызовов. Если стек вызовов пуст, а в очереди есть функции, то они перемещаются в стек и выполняются.

Question 121

Что такое макро таски

Answer 121

**Macro tasks** или очередь событий. Создают - таймеры(settimeout) и события(addEventListener) - выполняется всегда по 1 штуке, если внутри себя содержит микротаски сначала выполняет их.

Question 122

Что такое микро таски

Answer 122

**Micro tasks** или очередь задач - Создают в большей части(98+%) промисы(promise) и queveMicrotaks (прямое создание через функцию). Новые задачи добавляются когда списко пустой. Выполняются все за раз.

Question 123

Что такое Call Stack (Стек вызовов)

Answer 123

Call Stack (Стек вызовов): Здесь сохраняются функции, которые должны быть выполнены. Когда функция вызывается, она помещается в стек. Когда функция завершает выполнение, она удаляется из стека. **Call Stack** или стэк вызовов - Обрабатывает синхронные операции. Работатет по принципу LIFO(стопка бумаг). Может переполниться.

Question 124

Основные концепции event loop(2)

Answer 124

1. Однопоточность: JavaScript выполняется в одном потоке, что означает, что он может обрабатывать только одну задачу в определенный момент времени. 2. Событийная модель: JavaScript основывается на событийной модели, где определенные действия или события приводят к выполнению соответствующих обработчиков.

Question 125

Что такое замыкание

Answer 125

Замыкание (closure) - это особенность в языках программирования, позволяющая функции сохранять доступ к переменным из внешней области видимости, даже после того, как она завершила выполнение.

Question 126

Для чего используют замыкания(2)

Answer 126

1. Инкапсуляция: Создавать приватные переменные и методы, скрывая их от внешнего доступа. 2. Функции обратного вызова: (Callback Functions): Замыкания часто используются для передачи функций в качестве параметров.

Question 127

Основные концепции замыканий

Answer 127

Основные концепции замыканий: Область видимости (Scope): В JavaScript переменные могут иметь глобальную, локальную (внутри функции) или блочную (внутри блока кода) область видимости. Внутренние и внешние переменные: Внутренние переменные: Те, которые определены внутри функции. Внешние переменные: Те, которые определены в более высокой (родительской) области видимости.

Question 128

Что такое Shadow DOM

Answer 128

Дополнительный механизм инкапсуляции стилей. Реализуется через html тег 'template' с аттрибутом 'shadowroot="open"' ВНУТРИ тега подключаются стили .css или инлайн Пример:

Question 129

Что такое grid

Answer 129

— это мощный механизм разметки, предоставляемый CSS для создания двумерных сеток (строк и колонок) на веб-странице. Он предоставляет разработчикам более гибкий и удобный способ организации элементов на странице, чем традиционные методы разметки, такие как Flexbox или float

Question 130

Что такое flex

Answer 130

это модель макета в CSS, предназначенная для создания гибких и эффективных по пространству макетов внутри контейнера. Она позволяет управлять распределением пространства между элементами внутри контейнера и выравниванием элементов по оси.

Question 131

Разница между flex и grid(3)

Answer 131

1. Flexbox ориентирован на размещение элементов в строку или колонку, Grid и там и там. 2.Flex предоставляет управление распределением пространства между элементами внутри flex-контейнера вдоль ОДНОЙ оси (строки или колонны), Grid предоставляет более сложные и гибкие возможности(позволяет создавать сложные сетки и выравнивать элементы в обеих направлениях.) 3.Flexbox хорошо подходит для создания гибких и адаптивных макетов.Grid особенно полезен для создания сеток, где каждый элемент может занимать разное количество ячеек в сетке.

Question 132

что такое data атрибуты

Answer 132

Специальные HTML атрибуты, которые позволяют разработчикам добавлять произвольные данные к элементам, не вмешиваясь в стандартные атрибуты. Начинаются с префикса "data-" и могут содержать любые пользовательские данные в виде строк.

Question 133

Для чего используются data атрибуты

Answer 133

1.Передача данных(для хранения и получения значений) 2. Конфигурация и параметры(data-theme="dark") 3.CSS и стилизация(data-status="active")

Question 134

как добавить css свойство к data атрибуту

Answer 134

Content

div[data-theme="dark"] { background-color: black; color: white; }

Question 135

как я могу получить значение из data атрибута

Answer 135

1. Найти данный елемент(getElementBy__/querrySelector) 2.Использовать dataset(value = myElement.dataset.)

Question 136

Значения свойства display(6) и их краткое описание

Answer 136

1.block - занимает всю доступную ширину контейнера 2.inline - строчный элемент, занимает только необходимую ширину 3.inline-block - отображается как строчный, но при этом обладает свойствами блочного элемента. Он не начинает новую строку, но при этом может иметь ширину и высоту 4.none - не отображается на странице. Не занимает места в макете 5.flex - ображается как блочный.элементы распределяются по главной оси и переносятся в соответствии с параметрами flex-контейнера 6.grid - тображается как блочный. rid контейнера элементы распределяются по сетке, определенной с использованием свойства grid-template

Question 137

Что делает браузер когда он получил html от сервера(10)

Answer 137

1.Парсинг HTML: Браузер разбирает HTML-код на теги и создает начальное DOM-дерево. 2.Построение DOM-дерева(cтруктура HTML документа). 3.Получение и парсинг внешних ресурсов(стили CSS, скрипты JavaScript, изображения и др). 4.Построение CSSOM. 5.Объединение DOM и CSSOM(создает Render Tree) 6.Выполнение JavaScript(JavaScript может изменять DOM, добавлять новые элементы, устанавливать обработчики событий и т.д.). 7.Расчет расположения элементов (Layout): Браузер вычисляет размеры и позиции каждого элемента в Render Tree, учитывая как стили CSS, так и изменения, внесенные JavaScript. 8.Отрисовка (Paint): Браузер рендерит каждый элемент Render Tree в пиксели на экране, учитывая их расположение и стили. 9.Финальное отображение на экране. 10.Оптимизация и перерисовка при необходимости.