Свойство display - основное значение и как оно работает ?
Спросят с вероятностью 10%

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

Основные значения свойства display:

-block: Элемент отображается как блочный. Блочные элементы занимают всю доступную ширину контейнера, независимо от своего содержимого, и начинаются с новой строки.

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

-inline-block: Элемент отображается как inline, но позволяет задавать ширину и высоту, как у block элементов.

-none: Элемент полностью убирается из потока документа, и его не видно на странице. Важно отличать от visibility: hidden, где элемент не виден, но занимает место в макете.

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

-grid: Элемент становится grid-контейнером, и его непосредственные потомки становятся grid-элементами, что позволяет создавать сложные макеты с помощью двумерной сетки размещения элементов.

Как работает свойство display:

✅ Влияет на то, как элемент взаимодействует с потоком документа (то есть, как он размещается среди других элементов) и какие CSS-свойства к нему применимы (например, ширина, высота, отступы).
✅ Изменение его значения может изменить поведение элемента от блочного к инлайновому и наоборот, что влияет на расположение соседних элементов и на возможность применения определённых свойств к элементу.
✅ Например, блочный элемент (display: block;) будет пытаться занять всю доступную ширину контейнера и вытолкнет другие элементы на новую строку, в то время как инлайновый элемент (display: inline;) расположится на той же строке с другими инлайновыми или текстовыми элементами.
✅ Значение flex или grid превращает элемент в контейнер, который использует гибкую или сеточную модель для расположения своих потомков, соответственно, предоставляя мощные инструменты для создания адаптивных макетов.

Свойство display определяет, как элемент будет отображаться в документе, влияя на его расположение и взаимодействие с другими элементами. Изменяя значение этого свойства, можно управлять макетом страницы, использовать различные модели макета (блочную, инлайновую, flex, grid и др.), а также скрывать элементы без удаления их из DOM. Это делает display одним из самых мощных и важных инструментов.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Как поменять контекст функции ?
Спросят с вероятностью 10%

Контекст выполнения функции (значение this внутри функции) может быть изменён несколькими способами. Это позволяет более гибко управлять тем, как функции вызываются, особенно в объектно-ориентированном программировании. Вот основные способы изменения контекста функции:

1️⃣ call() и apply()

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

✅ call(thisArg, arg1, arg2, ...): Вызывает функцию с указанным контекстом thisArg и аргументами arg1, arg2, ...
✅ apply(thisArg, [argsArray]): Аналогичен call, но принимает аргументы в виде массива.

function greet() {
  console.log(Привет, ${this.name});
}

const person = { name: 'Алексей' };

greet.call(person);  // Привет, Алексей
greet.apply(person); // Привет, Алексей

2️⃣ bind()

(thisArg[, arg1[, arg2[, ...]]]) создаёт новую функцию с привязанным контекстом thisArg и начальными аргументами arg1, arg2, ... function greet() { console.log(Привет, ${this.name}); } const person = { name: 'Мария' }; const greetPerson = greet.bind(person); greetPerson(); // Привет, Мария 3️⃣ Стрелочные функции (() => {}) не имеют собственного контекста this. Вместо этого они заимствуют this из окружающего лексического контекста. Это значит, что this внутри стрелочной функции будет таким же, как и в её родительском контексте, что упрощает работу с контекстом, особенно в колбэках и обработчиках событий.

const person = {   name: 'Иван',   greet: function() {     // Стрелочная функция заимствует thisиз методаgreet     window.setTimeout(() => console.log(Привет, ${this.name}`), 1000);
  }
};

person.greet(); // Привет, Иван (после задержки в 1 секунду)

Использование контекста в классах

ES6 для методов, которые вы хотите передать в качестве колбэков и при этом сохранить контекст класса, часто используется .bind(this) в конструкторе или определение метода через стрелочную функцию в свойстве класса.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое прототипы ?
Спросят с вероятностью 13%

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

Каждый объект имеет внутреннее и неизменяемое свойство, известное как [[Prototype]], которое может быть ссылкой на другой объект. Этот объект, на который он ссылается, называется "прототипом". Когда вы пытаетесь получить доступ к свойству или методу объекта, и это свойство или метод не найдены в самом объекте, JavaScript автоматически ищет это свойство или метод в его прототипе. Этот процесс продолжается рекурсивно вверх по цепочке прототипов, пока свойство или метод не будут найдены или не будет достигнут конец цепочки прототипов.

Создание и использование прототипов

Можно задать или изменить с помощью Object.create(), Object.setPrototypeOf(), или просто установив свойство proto (хотя последний способ не рекомендуется к использованию из-за вопросов производительности и совместимости).

Пример:

const animal = {
  type: 'Animal',
  describe() {
    return Это ${this.type};
  }
};

const dog = Object.create(animal);
dog.type = 'Собака';
console.log(dog.describe()); // Это Собака

В этом примере объект dog наследует метод describe от объекта animal через прототипную цепочку.

Значение this

Важно отметить, что когда метод наследуется и вызывается на объекте-потомке, ключевое слово this внутри метода ссылается на объект-потомок, а не на объект-прототип, в котором метод был определен.

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

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое тернарный оператор ?
Спросят с вероятностью 10%

Тернарный оператор — это упрощённая форма условного оператора, который позволяет выполнять выбор между двумя выражениями в зависимости от истинности или ложности заданного условия. Обычно записывается как условие ? выражение1 : выражение2.

Структура тернарного оператора:

- Условие: Любое выражение, которое оценивается как true (истина) или false (ложь).
- Выражение1: Выполняется, если условие истинно (true).
- Выражение2: Выполняется, если условие ложно (false).

Пример:

let age = 18;
let status = age >= 18 ? 'взрослый' : 'несовершеннолетний';
console.log(status); // Выведет: взрослый

В этом примере условие age >= 18 проверяет, является ли возраст человека 18 лет или более. Если условие истинно, переменной status присваивается значение 'взрослый'. В противном случае — 'несовершеннолетний'.

Преимущества:
✅ Краткость и удобство записи для простых условных конструкций.
✅ Уменьшает количество кода по сравнению с использованием стандартных условных операторов (if...else).

Недостатки:
❌ Может ухудшить читаемость кода при использовании сложных условий или вложенных тернарных операторов.
❌ Использование более одного тернарного оператора в одном выражении может сделать код трудным для понимания.

Лучшие практики:

✅ Для простых условных выражений.
✅ Избегайте вложенности тернарных операторов, так как это может сделать код менее читаемым.
✅ Рассмотрите возможность использования стандартного условного оператора if...else для более сложных условий или когда требуется выполнение блоков кода, а не просто выбор между двумя выражениями.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое псевдоэлемент ?
Спросят с вероятностью 10%

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

Синтаксис:

Начинается с двойного двоеточия (::), за которым следует название псевдоэлемента. Например, ::before или ::after.

Распространенные псевдоэлементы:

- ::before и ::after: Позволяют вставлять содержимое до или после содержимого выбранного элемента соответственно. Очень часто используются для добавления декоративных элементов.

    p::before {
    content: "«";
    color: blue;
  }
  
  p::after {
    content: "»";
    color: blue;
  }
  

-::first-line: Применяет стили к первой строке текста в блочном элементе.

    p::first-line {
    font-weight: bold;
  }
  

- ::first-letter: Применяет стили к первой букве текста в блочном элементе.

    p::first-letter {
    font-size: 200%;
  }
  

- ::selection: Применяет стили к части текста, которую пользователь выделил.

    p::selection {
    background: yellow;
  }
  

Особенности работы:

✅ Работают как часть документа, но на самом деле не существуют в DOM-дереве, а создаются стилями.
✅ Чтобы псевдоэлементы ::before и ::after отображались, необходимо задать свойство content, даже если оно пустое (content: "";).
✅ Могут быть стилизованы почти так же, как обычные элементы, но есть некоторые ограничения, например, связанные с взаимодействием с JavaScript.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое state manager и с какими приходилось работать ?
Спросят с вероятностью 13%

State manager (менеджер состояний) — это инструмент или библиотека, который помогает управлять состоянием приложения. Состояние приложения может включать различные данные: от пользовательского ввода и временных данных до кэшированных страниц и аутентифицированного пользователя. Менеджер состояний помогает централизованно управлять этими данными, облегчая их передачу между компонентами, упрощая тестирование и повышая производительность приложения.

Зачем нужен менеджер состояний?

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

Примеры:

1️⃣ Redux: Одна из самых популярных библиотек для управления состоянием в React-приложениях. Она предлагает однонаправленный поток данных, что делает изменения состояния предсказуемыми.
2️⃣ Vuex: Библиотека для управления состоянием в Vue.js. Подобно Redux, она предлагает централизованное хранилище для всех компонентов приложения.
3️⃣ MobX: Альтернатива Redux, которая использует наблюдаемые объекты для управления состоянием. Она предлагает более гибкий подход к управлению состоянием, автоматически отслеживая изменения.
4️⃣ Context API и Hooks в React: Начиная с версии 16.8, React предоставляет встроенный механизм для управления состоянием без необходимости добавления внешних библиотек. Хотя для небольших или средних проектов это может быть достаточно, в больших приложениях может потребоваться более мощное решение вроде Redux.

Менеджер состояний — это инструмент, который помогает управлять состоянием веб-приложения, обеспечивая эффективную передачу данных между компонентами, улучшая производительность и упрощая отладку и тестирование. В зависимости от технологического стека и требований проекта, разработчики могут выбирать из различных решений, таких как Redux, Vuex, MobX или использовать встроенные средства фреймворков, например, Context API.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

В чём разница между макро и микро задачами ?
Спросят с вероятностью 10%

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

Макрозадачи (Macro-tasks):

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

Примеры:
✅ setTimeout
✅ setInterval
✅ setImmediate (Node.js)
✅ Запросы к серверу через XMLHttpRequest или fetch (не сам запрос, а обработка результата)
✅ I/O операции (в Node.js)

Микрозадачи (Micro-tasks):

Также управляются циклом событий, но они имеют более высокий приоритет, чем макрозадачи. Они выполняются сразу после завершения текущей исполняемой задачи и перед тем, как Event Loop перейдет к следующей макрозадаче. Это означает, что все они в очереди будут выполнены до начала выполнения следующей макрозадачи.

Примеры:
✅ Promise.then/catch/finally
✅ queueMicrotask
✅ MutationObserver

Различия между макро и микрозадачами:

1️⃣ Приоритет: Микрозадачи имеют более высокий приоритет по сравнению с макрозадачами. Все микрозадачи в очереди будут выполнены до начала следующего цикла Event Loop и до того, как будет взята новая макрозадача.
2️⃣ Время выполнения: Микрозадачи выполняются непосредственно после текущей задачи и перед тем, как браузер получит возможность перерисовать страницу или обработать другие события, такие как ввод пользователя. Макрозадачи же разделяются циклами Event Loop.
3️⃣ Источники: Макро- и микрозадачи поступают из разных источников. Например, таймеры (setTimeout, setInterval) и I/O операции генерируют макрозадачи, в то время как обработчики промисов (then, catch, finally) создают микрозадачи.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Какие селекторы знаешь ?
Спросят с вероятностью 10%

Существует множество типов селекторов, каждый из которых предназначен для выбора элементов на странице по определённому признаку. Вот основные виды:

Универсальный селектор

- — выбирает все элементы на странице.

Селекторы типов (тегов)

- tagName — выбирает все элементы данного типа (например, div, p).

Селекторы классов

- .className — выбирает все элементы с указанным классом.

Селекторы идентификаторов

- #idName — выбирает элемент с указанным идентификатором.

Селекторы атрибутов

- [attribute] — выбирает все элементы с указанным атрибутом.
- [attribute="value"] — выбирает все элементы с указанным атрибутом и значением.
- [attribute^="value"] — выбирает все элементы, значение атрибута которых начинается с указанной строки.
- [attribute$="value"] — выбирает все элементы, значение атрибута которых заканчивается указанной строкой.
- [attribute="value"] — выбирает все элементы, значение атрибута которых содержит указанную строку.

Селекторы потомков и дочерних элементов

- parent > child — выбирает все дочерние элементы child, непосредственно находящиеся внутри parent.
- ancestor descendant — выбирает все элементы descendant, находящиеся внутри ancestor (включая вложенные).

Селекторы соседей и братьев

- prev + next — выбирает элемент next, непосредственно следующий за prev.
- prev ~ siblings — выбирает всех соседей siblings, которые следуют за prev на том же уровне вложенности.

Псевдоклассы

- :hover — выбирает элемент при наведении курсора мыши.
- :focus — выбирает элемент, когда он находится в фокусе.
- :nth-child(n) — выбирает n-ый дочерний элемент.
- :first-child и :last-child — выбирают первый и последний дочерние элементы соответственно.
- :not(selector) — выбирает элементы, которые не соответствуют указанному селектору.

Псевдоэлементы

- ::before и ::after — позволяют вставлять содержимое до или после содержимого элемента.
- ::first-letter и ::first-line — выбирают первую букву или первую строку текста элемента.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое css ?
Спросят с вероятностью 10%

CSS (Cascading Style Sheets — каскадные таблицы стилей) — это язык, используемый для описания внешнего вида и форматирования документа, написанного на языке разметки (как правило, HTML или XML, включая такие разновидности, как SVG или XHTML). Он позволяет контролировать цвет, шрифт, расстояние между элементами, размер блоков, расположение элементов и многое другое для веб-страниц и приложений.

Основные принципы CSS:

1️⃣ Разделение содержания и оформления: Позволяет отделить структуру документа от его внешнего вида. Это означает, что можно изменить внешний вид веб-сайта, не затрагивая его содержимое.
2️⃣ Каскадность: Стили применяются в определённом порядке. Если одному и тому же элементу заданы стили через разные селекторы, браузер определяет приоритет правил согласно специфичности селекторов и порядку их определения.
3️⃣ Наследование: Некоторые стили, заданные для родительского элемента, наследуются дочерними элементами, если только для дочерних элементов не заданы собственные стили.

Как работает CSS:

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

Пример:

p {
  color: red;
  font-size: 16px;
}

В этом примере выбираются все параграфы (p), текст в которых будет окрашен в красный цвет (color: red;) и иметь размер шрифта 16 пикселей (font-size: 16px;).

Использование CSS:

Может быть подключен к HTML-документу тремя способами:

1️⃣ Внешний стилевой файл: Правила хранятся в отдельном файле, который подключается к HTML-документу с помощью тега <link>.
2️⃣ Внутренний стиль: Правила находятся непосредственно в HTML-документе внутри тега <style>.
3️⃣ Инлайновые стили: Стили применяются непосредственно к HTML-элементу через атрибут style.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

В чём отличие хранения данных в local storage от сессий ?
Спросят с вероятностью 10%

Хранение данных в localStorage и sessionStorage является частью Web Storage API, предоставляемого современными веб-браузерами для сохранения данных на стороне клиента. Хотя оба механизма предназначены для хранения информации в формате ключ-значение и имеют похожий API, между ними есть ключевые отличия в поведении и области применения.

localStorage

- Долгосрочное хранение: Данные, сохранённые в нем, остаются в браузере пользователя до тех пор, пока явно не будут удалены программно с помощью JavaScript или пользователем вручную. Это означает, что информация не исчезает после закрытия браузера или перезагрузки компьютера.
- Объём данных: В нем можно сохранять до 5-10 МБ данных (в зависимости от браузера), что делает его подходящим для хранения небольших объёмов информации.
- Ограничения: Данные доступны только в пределах того же домена, что предотвращает доступ к данным для других сайтов.

sessionStorage

- Сеансовое хранение: он сохраняет данные только в течение сессии страницы — данные исчезают после закрытия вкладки или окна браузера. Это делает sessionStorage идеальным для хранения данных, актуальных в рамках одной сессии работы с веб-приложением, например, информации о состоянии интерфейса или введённых пользователями данных форм.
- Объём данных: Как и localStorage, он обычно позволяет сохранять до 5-10 МБ данных.
- Ограничения: Данные в нем доступны только в рамках одной вкладки браузера, и другие вкладки с тем же сайтом не будут иметь к ним доступ.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое деструктуризация ?
Спросят с вероятностью 10%

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

Деструктуризация объектов

Имена переменных соответствуют ключам свойств объекта. Если свойство с таким именем существует, его значение присваивается переменной.

const person = {
  name: 'Алексей',
  age: 30,
  job: 'Инженер'
};

// Деструктуризация объекта
const { name, age, job } = person;

console.log(name); // Алексей
console.log(age);  // 30
console.log(job);  // Инженер

Также можно задать переменным другие имена, отличные от ключей объекта:

const { name: personName, age: personAge } = person;

console.log(personName); // Алексей
console.log(personAge);  // 30

Деструктуризация массивов

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

const rgb = [255, 200, 0];

// Деструктуризация массива
const [red, green, blue] = rgb;

console.log(red);   // 255
console.log(green); // 200
console.log(blue);  // 0

Параметры функции

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

function introduce({ name, age }) {
  console.log(Меня зовут ${name}, мне ${age} лет.);
}

introduce(person); // Меня зовут Алексей, мне 30 лет.

Значения по умолчанию

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

const { name, hobby = 'Чтение' } = person;
console.log(hobby); // Чтение

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Для чего нужны E.Preventdefault() и e.Stopprepagination() ?
Спросят с вероятностью 10%

e.preventDefault() и e.stopPropagation() — это методы объекта события (Event), используемые для управления поведением событий в веб-приложениях. Они позволяют контролировать стандартное поведение браузера и распространение событий в DOM-дереве.

e.preventDefault()

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

Пример:

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault(); // Предотвращает отправку формы
  // Здесь может быть код для обработки данных формы
});

e.stopPropagation()

Останавливает дальнейшее распространение события по DOM-дереву. В DOM события распространяются тремя фазами: захват (capturing), достижение целевого элемента (target), и всплытие (bubbling). e.stopPropagation() предотвращает переход события к следующим обработчикам на текущей фазе и на других фазах.

Пример:

document.querySelector('#child').addEventListener('click', function(e) {
  e.stopPropagation(); // Останавливает распространение события клика дальше по DOM-дереву
  console.log('Клик по дочернему элементу');
});

document.querySelector('#parent').addEventListener('click', function() {
  console.log('Клик по родительскому элементу');
});

В этом примере, несмотря на то что клик происходит и на дочернем, и на родительском элементе, благодаря e.stopPropagation() в консоль будет выведено только сообщение от дочернего элемента.

Зачем они нужны

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

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Ребят, напоминаю, что у нашего канала есть сайт, на котором все вопросы с собесов представлены списком, вместе с видео-ответами ➡️ easyoffer.ru

Что такое прототипное наследование ?
Спросят с вероятностью 10%

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

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

Каждый объект имеет специальное скрытое свойство [[Prototype]] (как правило, доступное как proto или через Object.getPrototypeOf()), которое ссылается на другой объект — его прототип. Когда вы пытаетесь получить доступ к свойству или методу объекта, и это свойство/метод не найдено в самом объекте, поиск продолжается по цепочке прототипов, пока свойство/метод не будет найден или не будет достигнут конец цепочки прототипов (прототип null).

Пример:

let animal = {
  eats: true,
  walk() {
    console.log("Animal walk");
  }
};

let rabbit = {
  jumps: true,
  proto: animal
};

rabbit.walk(); // Animal walk
console.log(rabbit.eats); // true

В этом примере объект rabbit наследует свойство eats и метод walk от объекта animal через прототипную цепочку.

Основные принципы

1️⃣ Прототипная цепочка: Когда вы обращаетесь к свойству объекта, автоматически ищет это свойство в объекте, а затем — в его прототипах, пока не достигнет конца цепочки прототипов.
2️⃣ Object.prototype: В вершине прототипной цепочки находится Object.prototype. Он не имеет прототипа и содержит методы, доступные всем объектам, такие как toString(), hasOwnProperty() и другие.
3️⃣ Создание объектов с определённым прототипом: Для создания объектов с указанием прототипа можно использовать Object.create(proto), где proto — объект, который должен стать прототипом для нового объекта.

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

В отличие от него, прототипное наследование не использует классы как таковые (до введения class в ES6, которые являются "синтаксическим сахаром" над прототипным наследованием). Вместо этого объекты напрямую наследуют свойства и методы от других объектов.

Прототипное наследование является мощной особенностью, позволяющей объектам наследовать поведение от других объектов. Это обеспечивает гибкость и возможности для повторного использования кода без строгой иерархии классов, характерной для классических моделей наследования.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое JSX ?
Спросят с вероятностью 10%

JSX (JavaScript XML) — это расширение синтаксиса. Оно позволяет писать структуру компонентов React с использованием синтаксиса, похожего на HTML, непосредственно файлах. Этот синтаксический сахар делает код более читабельным и удобным для разработки пользовательских интерфейсов.

Основные особенности JSX:

- Сочетание HTML и JavaScript: Позволяет использовать HTML-теги и компоненты React внутри JavaScript-кода.
- Выражения JavaScript: Можно вставлять JavaScript-выражения в фигурные скобки {}. Это позволяет динамически управлять содержимым компонентов.
- Компонентный подход: Легко создавать и использовать повторно компоненты UI, что упрощает разработку сложных пользовательских интерфейсов.
- Преобразование: Не может быть выполнен напрямую браузерами и требует преобразования в обычный JavaScript. Это обычно делается с помощью транспиляторов, таких как Babel.

Пример:

const element = <h1>Привет, мир!</h1>;

Этот пример демонстрирует JSX-элемент, который представляет собой заголовок первого уровня с текстом "Привет, мир!". В реальном JavaScript этот код будет преобразован в вызов React.createElement(), который создаёт React-элемент.

Вставка выражений:

Вы можете вставлять любые допустимые JavaScript-выражения в него, обернув их в фигурные скобки. Например:

const name = 'Иван Иванов';
const element = <h1>Привет, {name}</h1>;

Преимущества использования JSX:

✅ Наглядность: Код с ним легче читать и писать, поскольку он напоминает HTML.
✅ Мощность: Сочетает в себе преимущества JavaScript, позволяя использовать всю его выразительную мощь при описании UI.
✅ Интеграция: Плотно интегрирован с React, облегчая создание интерактивных компонентов.

JSX — это расширение синтаксиса, которое делает разработку интерфейсов на React более интуитивной и выразительной за счёт смешивания HTML-подобного кода с JavaScript. Хотя использование JSX необязательно для работы с React, оно значительно упрощает процесс разработки и повышает читабельность кода.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Как работает new ?
Спросят с вероятностью 7%

new используется для создания экземпляра объекта на основе функции-конструктора или класса. Процесс его работы можно разделить на несколько шагов:

1️⃣ Создание нового объекта: Когда вы используете его, JavaScript создаёт новый пустой объект.

2️⃣ Присвоение прототипа: Прототип созданного объекта устанавливается в значение свойства prototype функции-конструктора. Это означает, что новый объект наследует свойства и методы, определённые в прототипе конструктора.

3️⃣ Вызов функции-конструктора: Функция-конструктор вызывается с аргументами, переданными в неи, и контекстом this, установленным в только что созданный объект. Это позволяет добавлять свойства и методы непосредственно к экземпляру.

4️⃣ Возврат значения: Если функция-конструктор возвращает объект, то этот объект возвращается вместо только что созданного. Если возвращается не объект (например, примитивное значение) или функция-конструктор вообще ничего не возвращает, то возвращается созданный на шаге 1 объект.

Пример:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log(Привет, меня зовут ${this.name}!);
};

// Создаём новый объект с помощью new
const person1 = new Person('Алексей', 30);

person1.greet(); // Выводит: "Привет, меня зовут Алексей!"

В этом примере new Person('Алексей', 30) создаёт новый объект, прототипом которого является Person.prototype, и вызывает функцию Person с this, указывающим на новый объект, что позволяет добавить свойства name и age к этому объекту. После этого, с новым объектом можно взаимодействовать, как с экземпляром Person, включая вызов методов, определённых в Person.prototype.

new позволяет создавать новые объекты на основе функций-конструкторов или классов, автоматически устанавливая связь между созданным объектом и прототипом конструктора, что обеспечивает наследование свойств и методов.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Как можно ускорить загрузку сайта ?
Спросят с вероятностью 7%

Ускорение загрузки сайта — крайне важный аспект веб-разработки, поскольку это напрямую влияет на пользовательский опыт и SEO. Есть множество способов оптимизации, которые могут помочь в этом:

1️⃣ Минимизация и объединение файлов: Сокращение количества файлов, которые нужно загрузить браузеру, может значительно ускорить загрузку сайта. Использование инструментов для минимизации (сжатия) этих файлов уменьшает их размер.

2️⃣ Асинхронная загрузка скриптов: Скрипты, загружаемые асинхронно, не блокируют отображение страницы. Это позволяет браузеру продолжать загрузку других элементов страницы, пока скрипт ещё загружается.

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

4️⃣ Оптимизация изображений: Изображения часто занимают большую часть размера страницы. Использование форматов, таких как WebP, которые обеспечивают меньший размер файла при сохранении качества, а также сжатие и масштабирование изображений под нужные размеры, могут значительно сократить время загрузки.

5️⃣ Использование сети доставки контента (CDN): CDN позволяет хранить копии вашего сайта на множестве серверов по всему миру, так что пользователи загружают контент с ближайшего к ним сервера.

6️⃣ Lazy loading (ленивая загрузка): Техника, при которой контент (особенно изображения и видео) на странице загружается только тогда, когда он попадает в область видимости пользователя. Это снижает начальную нагрузку на страницу.

7️⃣ Ускорение серверного ответа: Время ответа сервера может быть уменьшено за счет оптимизации сервера, использования более быстрого хостинга или оптимизации базы данных.

8️⃣ Использование HTTP/2: Протокол HTTP/2 позволяет более эффективно загружать ресурсы, благодаря мультиплексированию, сжатию заголовков и приоритизации запросов.

9️⃣ Удаление ненужных плагинов и скриптов: Ненужные плагины и скрипты могут замедлять ваш сайт, поэтому стоит регулярно пересматривать их и удалять неиспользуемые.

🔟 Использование AMP (Accelerated Mobile Pages): Если большая часть вашей аудитории использует мобильные устройства, использование AMP может ускорить загрузку страниц на этих устройствах.

Оптимизация загрузки сайта — это процесс, который требует внимания к деталям и постоянного тестирования. Использование инструментов анализа производительности, таких как Google PageSpeed Insights, помогает выявлять проблемы и предлагает конкретные рекомендации по их решению.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое props ?
Спросят с вероятностью 10%

props — это сокращение от "properties" (свойства). Это концепция, используемая для передачи данных от родительского компонента к дочернему компоненту. Они являются неизменяемыми, что означает, что дочерний компонент не может напрямую изменять полученные его; вместо этого, любые изменения в данных должны происходить на уровне родительского компонента, который затем повторно передает его дочерним компонентам.

Как они работают

Когда вы создаете компонент, вы можете передать ему props следующим образом:

const ParentComponent = () => {
  return <ChildComponent name="Иван" age={30} />;
};

В этом примере, ChildComponent получает два props: name и age. Доступ к этим props внутри ChildComponent происходит так:

const ChildComponent = (props) => {
  return <h1>Привет, мое имя {props.name}, мне {props.age} лет.</h1>;
};

Особенности props

✅ Неизменяемость: Предназначены только для чтения. Это означает, что компонент не может изменить свои props, но может либо использовать их "как есть", либо использовать их для вычисления новых значений внутри компонента.
✅ Передача данных: Позволяют компонентам получать данные от родителя, что делает компоненты более гибкими и повторно используемыми.
✅ Передача функций: Через него можно передавать не только данные, но и функции, что позволяет родительскому компоненту предоставлять обработчики событий дочерним компонентам.

Пример передачи функции

const ParentComponent = () => {
  const showAlert = () => {
    alert("Приветствие от родителя!");
  };

  return <ChildComponent showAlert={showAlert} />;
};

const ChildComponent = (props) => {
  return <button onClick={props.showAlert}>Показать приветствие</button>;
};

В этом примере, функция showAlert определена в ParentComponent и передается как props в ChildComponent, который затем использует ее как обработчик события клика для кнопки.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое react ?
Спросят с вероятностью 10%

React — это декларативная, эффективная и гибкая библиотека для создания пользовательских интерфейсов. Она позволяет строить сложные интерактивные UI из небольших и изолированных частей кода, называемых "компонентами". Он был создан инженерами Facebook и впервые представлен в 2013 году.

Основные особенности React:

1️⃣ Компонентный подход: Приложения строятся из компонентов, которые содержат свой собственный стейт (состояние) и логику отображения. Компоненты могут быть повторно использованы в разных частях приложения, что повышает удобство поддержки и разработки кода.
2️⃣ Декларативность: Позволяет описывать, как компоненты интерфейса выглядят в разных состояниях, автоматически обновляя их при изменении данных. Это делает код более читаемым и упрощает процесс разработки.
3️⃣ Виртуальный DOM (VDOM): Использует концепцию виртуального DOM для повышения производительности приложения. Виртуальный DOM — это легковесная копия реального DOM-дерева в памяти, позволяющая оптимизировать обновления интерфейса за счет минимизации взаимодействия с реальным DOM.
4️⃣ Однонаправленный поток данных: В нем данные передаются от родительских компонентов к дочерним через свойства (props), что обеспечивает предсказуемость и упрощает отладку приложений.

Использование React

Широко используется для разработки как небольших, так и крупных веб-приложений, предоставляя разработчикам мощные инструменты для создания интерактивных пользовательских интерфейсов. Он может быть использован как в одностраничных приложениях (SPA), так и в многостраничных сайтах.

Также лежит в основе таких проектов, как Gatsby (статический сайт-генератор) и Next.js (фреймворк для серверного и статического рендеринга), расширяя его возможности для разработки веб-приложений.

Экосистема

Включает в себя не только саму библиотеку, но и множество связанных инструментов и библиотек, таких как:

✅ Redux/React Context для управления глобальным состоянием приложения.
✅ React Router для навигации между страницами без перезагрузки.
✅ React Native для разработки кросс-платформенных мобильных приложений с использованием JavaScript и React.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое хук ?
Спросят с вероятностью 10%

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

- useState: Позволяет функциональным компонентам иметь состояние.

    const [count, setCount] = useState(0);
  

- useEffect: Позволяет выполнять побочные эффекты в компоненте, такие как обращения к API, подписки и т.д. Это аналог методов жизненного цикла componentDidMount, componentDidUpdate, и componentWillUnmount в классовых компонентах.

    useEffect(() => {
    document.title = Вы нажали ${count} раз;
  }, [count]); // Эффект использует переменную состояния count
  

- useContext: Позволяет получить доступ к данным из контекста. Это упрощает передачу данных через дерево компонентов без необходимости передавать props на каждом уровне.

    const value = useContext(MyContext);
  

- useReducer: Предоставляет альтернативный способ управления состоянием, основанный на паттерне редьюсер. Это особенно полезно для управления сложным состоянием.

    const [state, dispatch] = useReducer(reducer, initialState);
  

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

    const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  }, [a, b]);
  

- useMemo: Мемоизирует вычисляемое значение. Это помогает избежать ненужных вычислений при каждом рендере.

    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  

- useRef: Возвращает изменяемый ref объект, который может быть использован для хранения значения на протяжении всего жизненного цикла компонента.

    const myRef = useRef(initialValue);
  

Хуки были введены для решения нескольких проблем:
✅ Упрощение переиспользования логики состояния между компонентами без необходимости создавать высшие порядковые компоненты или рендер-пропсы.
✅ Использование состояния и других возможностей React без написания классов.
✅ Организация логики внутри компонента по принципу использования, а не жизненного цикла.

Хуки предлагают более простой и мощный способ создания компонентов, делая код более читабельным и легко поддерживаемым.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

👾 Ребят, напоминаю, у нас есть приватные группы где мы делимся реальными собеседованиями и тестовыми заданиями. Чтобы попасть в эти в группы воспользуйтесь ботами:
🤖 Доступ к базе собесов
🤖 Доступ к базе тестовых заданий