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

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

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

3️⃣Упрощение изменений и обновлений Изменение стилей в одном месте (CSS-файл) проще и быстрее, чем изменение атрибутов style для каждого элемента. Это особенно важно для больших проектов.

/* CSS файл */
.text-red {
  color: red;
}

HTML:

<p class="text-red">This text is red.</p>
<p class="text-red">This text is also red.</p>

Если нужно изменить цвет, достаточно поменять его в одном месте в CSS-файле. 4️⃣Улучшение производительности Браузеры кешируют CSS-файлы, что уменьшает время загрузки страницы. Инлайновые стили загружаются каждый раз, когда загружается HTML-документ, что увеличивает нагрузку на сеть. 5️⃣Семантика и поддержка инструментов разработки Стили файлах делают код более семантическим и легко анализируемым для инструментов разработки, таких как линтеры и препроцессоры. Это улучшает качество и консистентность кода. 6️⃣Поддержка медиа-запросов и адаптивного дизайна CSS-файлы позволяют легко использовать медиа-запросы для адаптивного дизайна. Это сложно и неэффективно делать с инлайновыми стилями.

/* CSS файл */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Плохо vs Хорошо Плохо (все стили в `style`):

<p style="color: red; font-size: 16px;">This is a paragraph.</p>
<p style="color: red; font-size: 16px;">This is another paragraph.</p>

Хорошо (использование CSS):

/* CSS файл */
.red-text {
  color: red;
  font-size: 16px;
}

HTML:

<p class="red-text">This is a paragraph.</p>
<p class="red-text">This is another paragraph.</p>

Мы не пишем все стили в атрибуте style, потому что это делает код сложным для чтения, поддержания и повторного использования. Вместо этого мы используем CSS-файлы для разделения структуры и стилизации, что упрощает работу с кодом и повышает производительность. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Курс графического дизайна с нуля. Бесплатное обучение! Выбери свое направление в дизайне: графический дизайн, веб-дизайн, UX/UI-дизайн. И изучи бесплатно основы дизайна с личным наставником! 3 работы в портфолио. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

Зачем необходим dom ? Спросят с вероятностью 7% DOM (Document Object Model) необходим для взаимодействия с веб-страницами и управления их содержимым, структурой и стилями программным образом. DOM представляет собой программный интерфейс для HTML и XML документов. Он описывает логическую структуру документов и позволяет языкам программирования взаимодействовать с ними. Зачем он нужен 1️⃣Доступ к элементам страницы: Позволяет программно получать доступ к элементам HTML-документа (теги, текст, атрибуты) и манипулировать ими. 2️⃣Изменение содержимого: С помощью него можно изменять содержимое страницы динамически, например, обновлять текст, менять изображения, добавлять или удалять элементы. 3️⃣Обработка событий: Позволяет обрабатывать события, такие как клики, нажатия клавиш, прокрутка и другие взаимодействия пользователя с веб-страницей. 4️⃣Динамическое изменение структуры страницы: Предоставляет методы для добавления, удаления и изменения элементов и атрибутов, что позволяет динамически изменять структуру страницы. 5️⃣Интерактивность: С помощью него можно создавать интерактивные веб-приложения, которые реагируют на действия пользователя без перезагрузки страницы. Как он работает Представляет собой древовидную структуру, где каждый элемент страницы является узлом дерева. Вершиной дерева является объект document, который представляет весь HTML-документ. Узлы могут быть элементами (<div>, <p>, <a> и т.д.), текстом, комментариями и другими типами. Пример HTML-документа:

<!DOCTYPE html>
<html>
<head>
  <title>Document Object Model</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Структура для этого документа:

document
 └── html
     ├── head
     │   └── title
     │       └── "Document Object Model"
     └── body
         ├── h1
         │   └── "Hello, world!"
         └── p
             └── "This is a paragraph."

Основные методы и свойства 1️⃣Доступ к элементам: ✅document.getElementById(id): Возвращает элемент по его id. ✅document.getElementsByClassName(className): Возвращает все элементы с указанным классом. ✅document.getElementsByTagName(tagName): Возвращает все элементы с указанным тегом. ✅document.querySelector(selector): Возвращает первый элемент, соответствующий CSS селектору. ✅document.querySelectorAll(selector): Возвращает все элементы, соответствующие CSS селектору. 2️⃣Создание и удаление элементов: ✅document.createElement(tagName): Создает новый элемент. ✅parentElement.appendChild(childElement): Добавляет элемент в конец дочерних элементов родителя. ✅parentElement.removeChild(childElement): Удаляет элемент из дочерних элементов родителя. 3️⃣Изменение содержимого и атрибутов: ✅element.innerHTML: Изменяет или получает HTML-содержимое элемента. ✅element.textContent: Изменяет или получает текстовое содержимое элемента. ✅element.setAttribute(name, value): Устанавливает значение атрибута элемента. ✅element.getAttribute(name): Получает значение атрибута элемента. Пример:

// Изменение текста заголовка
const header = document.querySelector('h1');
header.textContent = 'Hello, DOM!';

// Добавление нового параграфа
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
document.body.appendChild(newParagraph);

// Изменение атрибута
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');

DOM необходим для программного доступа и управления содержимым веб-страницы. Он позволяет изменять текст, структуру, стили и обрабатывать события на странице. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

ТОП-4 Курса по UX/UI-дизайну по версии Tutortop Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. Освойте востребованную профессию с нуля за 4-5 месяцев. Соберите портфолио из 10+ проектов. Выйдите на заработок 100 000₽+ и работайте удаленно в гибком графике. Выбрать #реклама 16+ tutortop.ru О рекламодателе

Начните обучение в магистратуре в Центральном университете уже на 3-м курсе бакалавриата! Центральный университет — современный вуз, созданный при поддержке ведущих компаний России: Т-Банка, Авито и других. Учебу реально совместить с последними курсами бакалавриата или действующей работой. Обучение занимает 20 часов в неделю в вечернее время в первый год, а занятия проводят в центре Москвы профессоры из МГУ, МФТИ, РЭШ и практики из индустрии. Обучение в университете построено по принципам ИТ-компаний, со средой, способствующей росту и развитию. У каждого студента будет: - личный ментор по траектории обучения; - доступ к карьерному центру с коучами и консультантами; - опыт работы в проектах 30+ компаний-партнеров уже во время обучения; - диплом гособразца. Участвуйте в онлайн-отборе, чтобы выиграть грант на обучение до 1,2 млн рублей. Больше подробностей про университет и конкурс грантов по ссылке! erid:2VtzqubG1Mu Реклама, АНО ВО «Центральный университет», ИНН 7743418023

Что такое функция в js ? Спросят с вероятностью 7% Функция — это блок кода, предназначенный для выполнения конкретной задачи, который может быть вызван многократно в разных местах программы. Функции позволяют структурировать код, повышать его читаемость и повторно использовать части кода. Зачем они нужны 1️⃣Повторное использование кода: Один раз написав функцию, можно вызывать её множество раз с разными аргументами, не переписывая один и тот же код. 2️⃣Упрощение и структурирование кода: Функции помогают разбивать программу на логические блоки, что делает код более понятным и поддерживаемым. 3️⃣Инкапсуляция: Функции могут скрывать внутреннюю реализацию и предоставлять только необходимый интерфейс. Как они создаются Есть несколько способов создания функций: 1️⃣Function Declaration (Объявление функции):

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('Alice')); // Hello, Alice!

Функция объявляется с помощью ключевого слова function, за которым следуют имя функции, список параметров в круглых скобках и тело функции в фигурных скобках. 2️⃣Function Expression (Функциональное выражение):

const greet = function(name) {
  return

ни нужны

1️⃣Повтор

};
console.log(greet('Bob')); // Hello, Bob!

Функция создается и присваивается переменной. Такие функции могут быть анонимными (без имени). 3️⃣Arrow Function (Стрелочная функция):

const greet = (name) => {
  return

 Hello, ${name}!;

};
console.log(greet('Carol')); // Hello, Carol!

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

function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // 5

Параметры и аргументы ✅Параметры — это переменные, которые перечислены в круглых скобках при объявлении функции. ✅Аргументы — это значения, которые передаются функции при её вызове. Возвращаемое значение Функция может возвращать значение с помощью ключевого слова return. Если return отсутствует, функция возвращает undefined.

function multiply(a, b) {
  return a * b;
}
console.log(multiply(4, 5)); // 20

Область видимости Переменные, объявленные внутри функции, имеют локальную область видимости и недоступны за её пределами:

function scopeExample() {
  let localVar = 'I am local';
  console.log(localVar); // I am local
}
scopeExample();
console.log(localVar); // ReferenceError: localVar is not defined

Замыкания (Closures) Функции имеют доступ к переменным из внешних функций благодаря замыканиям:

function outerFunction() {
  let outerVar = 'I am outside!';
  function innerFunction() {
    console.log(outerVar);
  }
  return innerFunction;
}
const inner = outerFunction();
inner(); // I am outside!

Функция — это блок кода, который можно многократно использовать. Функции помогают делать код структурированным, повторно используемым и более читаемым. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Кибербезопасность на высшем уровне для вашего бизнеса Защита мобильных устройств сотрудников от всех видов угроз. – Совместимость с iOS, Android и Avrora OS – Защита от вредоносных ПО и антифишинг – Контроль функциональности (запрет камеры, Bluetooth и т.д.) и приложений – Управление безопасностью через единую консоль Перейти на сайт #реклама 16+ go.kaspersky.com О рекламодателе

Когда используются переменные, var, let, const ? Спросят с вероятностью 7% Переменные объявляются с помощью ключевых слов var, let и const. Они имеют разные особенности и используются в разных ситуациях. var Использовался до появления ES6 (ECMAScript 2015) и обладает следующими особенностями: 1️⃣Область видимости: var имеет функциональную область видимости, то есть она видна внутри функции, где была объявлена, или в глобальной области, если объявлена вне функций. 2️⃣Поднятие (hoisting): Объявления с var поднимаются вверх своей области видимости, но присвоение значения происходит в том месте, где оно записано. Это значит, что переменную можно использовать до ее объявления. 3️⃣Повторное объявление: Переменные, объявленные с var, могут быть переобъявлены в пределах одной и той же области видимости. Пример:

function exampleVar() {
  console.log(x); // undefined
  var x = 10;
  console.log(x); // 10
}
exampleVar();

let Появился в ES6 и решает многие проблемы, связанные с var: 1️⃣Область видимости: let имеет блочную область видимости, то есть виден только внутри блока {}, в котором объявлен. 2️⃣Поднятие (hoisting): Хотя объявления с let поднимаются, доступ к ним возможен только после строки, где они объявлены (временная мертвая зона). 3️⃣Повторное объявление: Нельзя переобъявить переменную, объявленную с let, в той же области видимости. Пример:

function exampleLet() {
  console.log(y); // ReferenceError: y is not defined
  let y = 10;
  console.log(y); // 10
}
exampleLet();

const Также введённый в ES6, используется для объявления констант: 1️⃣Область видимости: Как и let, имеет блочную область видимости. 2️⃣Поднятие (hoisting): Ведет себя аналогично let в плане поднятия и временной мертвой зоны. 3️⃣Изменение значения: Переменная, объявленная с const, должна быть инициализирована при объявлении и её значение нельзя изменить после этого. Однако, если const используется для объявления объекта или массива, можно изменять их содержимое. Пример:

function exampleConst() {
  const z = 10;
  console.log(z); // 10
  z = 20; // TypeError: Assignment to constant variable.
}
exampleConst();

function exampleConstObject() {
  const obj = { key: 'value' };
  obj.key = 'new value'; // Изменение допустимо
  console.log(obj.key); // 'new value'
}
exampleConstObject();

Когда использовать ✅`var`: Обычно рекомендуется избегать, так как let и const обеспечивают лучшую управляемость кода. ✅`let`: Используется для переменных, которые могут изменяться в процессе выполнения программы. ✅`const`: Используется для значений, которые не будут переназначены. Это помогает предотвратить ошибки и делает код более предсказуемым. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Jobski - твой помощник при поиске работы в IT Сервис индивидуально подбирает вакансии, учитывая ваш опыт, навыки и стек технологий. Узнать больше #реклама jobski.ru О рекламодателе

❓React-компоненты работают медленно и требуют оптимизации? Хотите узнать, как сделать их быстрыми и эффективными? Ждем вас на открытом вебинаре «Оптимизация работы компонентов в React.js» 6 августа в 19:00 мск, где мы разберём: - как работать с оптимизацией в React.js; - особенности работы функциональных компонентов и хуков; - трюк с мемоизацией коллбеков для списка элементов. Урок будет полезен как начинающим разработчикам React, так и опытным специалистам, которые хотят глубже изучить процесс мемоизации. Встречаемся в рамках курса «React.js Developer». Все участники вебинара получат специальную цену на обучение! 👉 Регистрация открыта: https://otus.pw/sAIa/?erid=LjN8JtKYb Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

Как сравнить объекты в js ? Спросят с вероятностью 7% Сравнение объектов требует особого внимания, поскольку объекты являются ссылочными типами данных. Это значит, что при сравнении объектов вы фактически сравниваете их ссылки в памяти, а не их содержимое. Вот несколько способов сравнения объектов: 1️⃣Сравнение ссылок на объекты При сравнении объектов с использованием оператора равенства (== или ===), сравниваются их ссылки, а не содержимое.

const obj1 = { a: 1 };
const obj2 = { a: 1 };
const obj3 = obj1;

console.log(obj1 === obj2); // false
console.log(obj1 === obj3); // true

2️⃣Глубокое сравнение объектов Для сравнения содержимого объектов необходимо проверять каждое свойство. Один из способов — написать рекурсивную функцию для глубокого сравнения.

function deepEqual(obj1, obj2) {
  if (obj1 === obj2) {
    return true;
  }

  if (obj1 == null || typeof obj1 !== 'object' ||
      obj2 == null || typeof obj2 !== 'object') {
    return false;
  }

  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);

  if (keys1.length !== keys2.length) {
    return false;
  }

  for (let key of keys1) {
    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }

  return true;
}

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(deepEqual(obj1, obj2)); // true
console.log(deepEqual(obj1, obj3)); // false

3️⃣Использование библиотек Существуют библиотеки, которые предоставляют функции для глубокого сравнения объектов, например, lodash или deep-equal.

const _ = require('lodash');

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(_.isEqual(obj1, obj2)); // true
console.log(_.isEqual(obj1, obj3)); // false

4️⃣Проверка свойств с учетом порядка и типов Для простых случаев можно использовать сериализацию объектов с помощью JSON.stringify, однако этот метод имеет ограничения и может не работать с более сложными структурами (например, с функциями, undefined, или символами).

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true
console.log(JSON.stringify(obj1) === JSON.stringify(obj3)); // false

Для сравнения объектов можно использовать: ✅Сравнение ссылок с ===, если нужно проверить, указывают ли переменные на один и тот же объект. ✅Глубокое сравнение с помощью рекурсивной функции или библиотек (например, lodash), чтобы проверить равенство содержимого объектов. ✅Сериализация с JSON.stringify для простых случаев, хотя этот метод имеет ограничения и может не работать с более сложными структурами. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

🔥 Битый код - канал для настоящих кодеров! 🔴 Тебе надоело сталкиваться с багами и ошибками в коде? 🔴 Хочешь прокачать свои навыки и узнать, как эффективно решать сложные задачи? ⭐️ Тогда тебе к нам! На канале Битый код ты найдешь: 🟡 Советы по оптимизации кода 🟡 Практические примеры и решения 🧠 Развивай свои навыки программирования вместе с нами и становись настоящим профессионалом! 🔥 Присоединяйся к Битому коду и учись исправлять ошибки как настоящий мастер.

Бесплатный курс по дизайну в FIGMA Онлайн-программа с наставником и чатом. Осторожно! 80% практики. По результату обучения у вас будет портфолио из нескольких работ. Сертификат о прохождении курса. Возможность пройти полное обучение и получить гарантированное трудоустройство! Учитесь дизайну у профессионалов. Переходи по кнопки: "Узнать больше" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе