React Frontend Developer

Question 1

Для чего нужны функции?

Accepted Answer

Функции — это блоки кода, которые выполняют определённую задачу. Они помогают избежать дублирования кода, упрощают его обслуживание и делают программу более понятной. Функция может принимать данные (параметры) и возвращать результат. Например:function greet(name) {
	return `Привет, ${name}!`;
}
console.log(greet("Иван")); // Выведет: Привет, Иван!

Question 2

Расскажите про this и контекст

Accepted Answer

this в JavaScript — это ключевое слово, которое ссылается на текущий контекст выполнения. Контекст зависит от того, где и как используется this:В методе объекта this указывает на этот объект.В функции this по умолчанию указывает на глобальный объект (в строгом режиме — undefined).В стрелочных функциях this наследуется из внешнего контекста.Пример:const obj = {
	name: "Иван",
	greet() {
		console.log(`Привет, ${this.name}!`);
	},
};
obj.greet(); // Привет, Иван!

Question 3

Для чего нужен прототип?

Accepted Answer

Прототип — это объект, от которого другой объект может наследовать свойства и методы. В JavaScript каждый объект имеет скрытое свойство [[Prototype]], которое указывает на его прототип. Это позволяет организовать наследование, чтобы не дублировать код и переиспользовать общие методы. Например, если метод не найден в объекте, JavaScript ищет его в прототипе.Пример:const animal = { eats: true };
const dog = Object.create(animal);
console.log(dog.eats); // true

Question 4

Что такое делегирование событий в JavaScript?

Accepted Answer

Делегирование событий — это подход, при котором событие обрабатывается на родительском элементе, а не на каждом дочернем элементе, к которому оно относится. Это работает благодаря всплытию событий: событие, вызванное на дочернем элементе, поднимается вверх по дереву DOM до родителя. Этот метод позволяет сократить количество обработчиков событий и упростить их управление.Пример:document.getElementById("parent").addEventListener("click", (event) => {
	if (event.target.tagName === "BUTTON") {
		console.log(`Нажата кнопка: ${event.target.textContent}`);
	}
});

Question 5

Зачем для тега <script> добавляют атрибуты async и defer?

Accepted Answer

Атрибуты async и defer у тега <script> используются для управления тем, как и когда браузер загружает и выполняет JavaScript. async загружает скрипт асинхронно и выполняет его сразу после загрузки, не дожидаясь завершения загрузки всей страницы. defer также загружает скрипт асинхронно, но откладывает его выполнение до полной загрузки HTML-документа, что предотвращает блокировку рендеринга страницы.

Question 6

Как работает Shadow DOM? Какие преимущества он дает для разработки веб-компонентов?

Accepted Answer

Shadow DOM создает изолированное дерево DOM для веб-компонента, которое скрыто от остальной части документа.Плюсы:Изолирует стили и разметку.Упрощает повторное использование.Инкапсулирует логику.

Question 7

Как работают форматы ввода и валидация данных в HTML5? В чем различие между встроенной и кастомной валидацией?

Accepted Answer

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

Question 8

Что такое

Accepted Answer

<template> — это специальный элемент HTML, который позволяет создавать фрагменты кода, которые не отображаются на странице до тех пор, пока они не будут активированы с помощью JavaScript. Элемент <slot> используется в кастомных элементах для определения места, где можно вставить содержимое, переданное элементу. Эти элементы помогают разработчикам создавать более гибкие и переиспользуемые компоненты, которые могут динамически изменять свое содержимое в зависимости от контекста.

Question 9

Как работает HTML Custom Elements API, и как можно создать и зарегистрировать собственные элементы?

Accepted Answer

HTML Custom Elements API позволяет разработчикам создавать собственные HTML-элементы, которые ведут себя как стандартные элементы, но могут иметь свою уникальную логику и стиль. Чтобы создать кастомный элемент, необходимо определить класс, который наследует от HTMLElement, и зарегистрировать его с помощью customElements.define(). Эти элементы могут быть использованы на странице так же, как и стандартные HTML-теги. Custom Elements расширяют возможности HTML, делая его более гибким для современных веб-приложений.

Question 10

Как управлять фокусом на странице с помощью атрибутов tabindex и методов, таких как focus()?

Accepted Answer

Атрибут tabindex управляет порядком, в котором элементы на странице получают фокус при навигации с клавиатуры. Элементы с положительным значением tabindex получают фокус в порядке возрастания числа, элементы с tabindex="0" — в порядке их появления, а отрицательные значения делают элемент недоступным для фокусировки с клавиатуры. Метод focus() в JavaScript позволяет программно устанавливать фокус на элементе. Это важно для обеспечения доступности и удобства управления для пользователей с особыми потребностями.

Вопросы React Frontend Developer