Ответы на вопросы из коллекции "💯Разработка web-приложений на языке JavaScript / Темы 1-4 / Самый полный сборник правильных ответов на отлично! 100/100"

Вы начинаете новый проект и должны выбрать между Create React App и Vite в качестве инструмента сборки. Какие ключевые факторы следует учесть при выборе между этими инструментами для проекта с React и TypeScript?

Вы разрабатываете форму регистрации. Нужно отправить данные на /api/users методом POST, корректно обработать сетевые и HTTP-ошибки (Hypertext Transfer Protocol) и получить JSON-ответ (jаvascript Object Notation). Какой фрагмент реализует требуемое поведение?

Метод, возвращающий «живую» коллекцию элементов, — это ...

Современный рекомендуемый способ описания компонентов в React — это ...

Основное назначение React — это ...

Место в браузере пользователя, которое сохраняет данные между сессиями, — это … Storage

Нужно за 5–10 минут поднять SPA (Single-Page Application) с dev-сервером (HMR (Hot Module Replacement)) и сразу иметь готовую prod-сборку. Обязательное требование — TypeScript. Какой путь верный?

Хук, который служит для выполнения побочных эффектов после рендеринга компонента, называется ...<i> (укажите слово на английском языке)</i>

Специальные функции, которые позволяют функциональным компонентам управлять состоянием и жизненным циклом, — это ... <i>(укажите слово на русском языке)</i>

Сервис получает массив заказов orders, где total приходит строкой (например, «199.90», «12.50», «abc»). Требуется вернуть сумму корректных значений за один проход по массиву, пропуская некорректные записи, не мутируя исходный массив. Какой фрагмент реализует требуемое поведение?

Основное действие Babel в процессе сборки — это ...

Встроенный объект jаvascript для работы с датой и временем называется ...

Менеджер пакетов, устанавливаемый вместе с Node.js и используемый для управления зависимостями проекта, называется ... <i>(укажите аббревиатуру на английском языке)</i>

Библиотека для маршрутизации в React-приложениях — это ...

События, подходящие для отслеживания ввода пользователя «в реальном времени» в текстовом поле, — это ... <i>(укажите три варианта ответа)</i>

На странице есть форма поиска по каталогу (см. ниже): ˂form id="searchForm"˃ ˂input id="q" name="q" autocomplete="off" /˃ ˂button˃Искать˂/button˃ ˂/form˃ ˂ul id="catalog"˃...˂/ul˃ Требования заказчика (см. ниже):
• фильтрация каталога выполняется в реальном времени по мере ввода (без перезагрузки);
• запрос нужно сохранить между сессиями и восстанавливать при следующем визите;
• недопустить вставку HTML (HyperText Markup Language) при отображении «пустого результата». Какой вариант удовлетворяет всем требованиям?

Атрибут тега ˂script˃, позволяющий отложить выполнение скрипта до построения документа, — это ...

Опция в tsconfig.json, которая включает новый автоматический JSX-трансформ (jаvascript XML) для … 17+, называется "jsx": "react-jsx" <i>(укажите слово на английском языке)</i>

Встроенный модуль Node.js для создания HTTP-сервера (Hypertext Transfer Protocol) — это ...

Способ отменить переход по ссылке в обработчике события click — это ...

Результат обращения к свойству elem.dataset — это ...

Поведение fetch при ответе сервера 404 заключается в том, что он ...

Вы реализуете список задач (˂ul id="todo"˃), элементы (˂li˃) и кнопки удаления (.del) добавляются динамически через JS (jаvascript) после загрузки страницы. Требования заказчика (см. ниже):
• удалять ровно ту задачу, по кнопке которой кликнули;
• обработчик должен работать и для задач, созданных позже;
• учесть, что внутри .del может быть иконка (˂svg˃), по которой тоже кликают.
Какой вариант соответствует требованиям?

Файл, описывающий зависимости и npm-скрипты проекта, — это ...

При установке пакета через npm флаг -… записывает зависимость в devDependencies

Команда для запуска произвольного скрипта из package.json — это ...

Событие, которое срабатывает после построения DOM-дерева (Document Object Model), но до загрузки ресурсов (изображений/стилей), называется DOM ...

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

Функция, в которую преобразуется JSX (jаvascript XML) на этапе сборки, — это ...

Результат вычисления выражения typeof null — это ...

Корректный файловый формат для обмена данными в JSON (jаvascript Object Notation) — это ...

LocalStorage сохраняет данные между сессиями, … Storage очищается при закрытии вкладки <i>(укажите слово на английском языке)</i>

Специальное значение числового типа, возникающее при некорректной математической операции, — это … <i>(укажите аббревиатуру на английском языке)</i>

Расположите в правильном порядке шаги, чтобы подключить внешний JS-файл (jаvascript) с обработчиком клика к кнопке так, чтобы скрипт не блокировал разметку:

• 1) добавить кнопку в HTML (HyperText Markup Language)
• 2) подключить ˂script src="app.js" defer˃ в ˂head˃
• 3) написать функцию-обработчик клика в app.js
• 4) назначить обработчик кнопке через addEventListener в JS (jаvascript)

Назначение оператора break в конструкции switch используется для того, чтобы ...

Метод querySelectorAll возвращает ... NodeList

Вы верстаете лендинг и добавляете кнопку «Оформить заказ» с id orderBtn. Заказчик выдвинул следующие требования: (см. ниже):
• подключение JS (jаvascript) не должно блокировать разбор HTML (HyperText Markup Language);
• обработчик клика назначается в JS (jаvascript) (без onclick в разметке);
• решение должно работать стабильно на всех современных браузерах. Какой вариант реализации нужно выбрать?

Области применения jаvascript включают ... <i>(выберите 4 варианта ответа)</i>

Установите соответствие между циклами jаvascript и их описанием:

• A. for
• B. for...in
• C. for...of
• D. while
• E. выполняет заданное количество итераций, используя счётчик
• F. перебирает индексы (или ключи) объекта (включая унаследованные)
• G. перебирает значения итерируемых объектов (массивов, строк)
• H. выполняет тело цикла, пока условие истинно, проверяя его перед каждой итерацией

Установите соответствие между понятием и его определением:

• A. JSON (jаvascript Object Notation)
• B. Fetch API (Application programming interface)
• C. Date.nowO
• D. const
• E. формат обмена данными; сериализация через JSON.stringify и разбор через JSON.parse
• F. глобальная функция для выполнения HTTP-запросов (Hypertext Transfer Protocol); возвращает Promise с объектом Response
• G. статический метод, возвращающий текущий таймстамп (мс с 01.01.1970 UTC (Coordinated Universal Time))
• H. объявление константы, значение которой не должно изменяться в текущей области видимости

Установите соответствие между основными хуками React и их описанием:

• A. useState
• B. useEffect
• C. useContext
• D. useRef
• E. useMemo
• F. позволяет использовать состояние в функциональном компоненте
• G. выполняет побочные эффекты после рендеринга компонента
• H. предоставляет доступ к значению React Context
• I. создаёт изменяемый объект, который сохраняется между рендерами
• J. мемоизирует результат вычислений, чтобы избежать повторных расчётов

Установите соответствие между методами/свойствами DOM и их предназначением:

• A. element.removeO
• B. element.insertAdjacentHTML(position, text)
• C. element.matches(selector)
• D. element.dataset
• E. element.scrolllntoViewO
• F. удаляет элемент из DOM
• G. вставляет HTML в заданную позицию относительно элемента
• H. проверяет, соответствует ли элемент CSS-селектору
• I. предоставляет доступ к пользовательским data-атрибутам
• J. прокручивает страницу так, чтобы элемент был виден

Сопоставьте инструмент и его описание:

• A. Node.js
• B. npm
• C. Babel
• D. Webpack
• E. Vite
• F. среда выполнения jаvascript вне браузера
• G. менеджер пакетов и скриптов для проекта
• H. транспилирует современный jаvascript в совместимый для целевых окружений
• I. сборщик модулей: строит граф зависимостей и формирует бандлы
• J. быстрый dev-сервер (HMR (Hot Module Replacement)) и прод-сборка на базе Rollup

Соотнесите элементы и их описание:

• A. document.querySelector(...)
• B. element.querySelectorAII(.„)
• C. element.getElementsByTagName(...)
• D. element.closest(sel)
• E. event.currentTarget
• F. element.classList.add/remove/toggle
• G. возвращает статическую коллекцию узлов, подобранных по CSS-селектору
• H. возвращает первый соответствующий элемент по CSS-селектору
• I. возвращает «живую» коллекцию элементов, подобранных по имени тега
• J. ищет ближайший предок (или сам элемент), соответствующий селектору
• K. элемент, на котором висит текущий обработчик события
• L. удобное управление CSS-классами элемента

Расположите этапы типичного процесса создания и запуска простого Node.js-сервера в правильной последовательности:

• 1) Проинициализировать проект командой npm init -у
• 2) Создать файл server.js с кодом сервера
• 3) Установить необходимые зависимости (если есть) через npm install
• 4) Запустить сервер командой node server.js
• 5) Проверить работу сервера, открыв http://localhost:3000 в браузере

Расположите шаги обработки отправки формы в правильном порядке:

• 1) отменить стандартную отправку (event.preventDefaultQ в обработчике submit)
• 2) собрать данные из полей формы
• 3) провести валидацию данных
• 4) сохранить/отправить данные (например, в localstorage или через fetch)
• 5) очистить форму и/или обновить интерфейс

Корректный способ навесить несколько обработчиков одного события на один элемент — это ...

Действие свойства textContent при записи заключается в том, что оно ...

Вы делаете небольшую JS-библиотеку (jаvascript) (код в src/ с современным ES). Её должны уметь запускать Node.js 14 и старые браузеры. Нужно быстро настроить локально Babel CLI, добавить пресет @babel/preset-env, скрипт сборки и получить выход в lib/ с sourcemaps. Какой набор действий корректен для поставленной задачи?

Установите соответствие между типами зависимостей npm и их описанием:

• A. dependencies
• B. devDependencies
• C. peerDependencies
• D. optionalDependencies
• E. пакеты, необходимые для работы приложения в продакшене
• F. пакеты, необходимые только во время разработки
• G. пакеты, которые требуются хост-пакетом и должны быть установлены пользователем
• H. пакеты, которые не обязательны для работы приложения, их отсутствие не приведёт к ошибке

Установите соответствие между концепциями React и их описаниями:

• A. Виртуальный DOM (Document Object Model)
• B. Пропсы
• C. Хуки
• D. JSX (jаvascript XML)
• E. упрощенная копия реального DOM (Document Object Model), используемая для эффективного обновления интерфейса
• F. параметры, передаваемые компоненту сверху и доступные только для чтения
• G. функции, позволяющие использовать состояние и эффекты в функциональных компонентах
• H. синтаксическое расширение, напоминающее HTML (HyperText Markup Language), которое компилируется в jаvascript

Сопоставьте элемент React Router и его назначение:

• A. BrowserRouter
• B. Routes
• C. Route
• D. Link
• E. оборачивает всё приложение и управляет историей браузера (HTML5 History API)
• F. контейнер для набора маршрутов (v6), выбирает подходящий Route
• G. описывает соответствие пути компоненту через path и element
• H. ссылка для SPA-навигации (Single Page Application) без полной перезагрузки страницы

Сопоставьте термины и их определения:

• A. Let
• B. Const
• C. Defer
• D. For...of
• E. NaN
• F. объявление переменной с блочной областью видимости; значение можно менять, повторное объявление в той же области запрещено
• G. объявление константы; попытка переназначения вызывает ошибку
• H. атрибут тега <script>, откладывающий выполнение файла до завершения разбора HTML (HyperText Markup Language)
• I. цикл для перебора значений итерируемых объектов; предпочтителен для массивов, когда индекс не нужен
• J. специальное числовое значение «не число», результат некорректной операции

Сопоставьте инструмент и его краткое описание:

• A. Babel
• B. Webpack
• C. Vite
• D. TypeScript
• E. транспилирует современный JS (jаvascript) в совместимый для целевых окружений
• F. сборщик модулей: строит граф зависимостей и собирает бандлы
• G. быстрый dev-сервер с HMR (Hot Module Replacement) в разработке и прод-сборка на Rollup
• H. надмножество JS (jаvascript) со статической типизацией

TypeScript характеризуется тем, что он ...<i> (выберите три варианта ответа)</i>

Dev-сервер, который обычно стартует по адресу http://localhost:5173, — это … <i>(укажите слово на английском языке)</i>

Файл, описывающий зависимости проекта и npm-скрипты, — это ...

Установите правильную последовательность этапов работы с состоянием в Redux:

• 1) компонент диспатчит действие
• 2) редьюсер обрабатывает действие и возвращает новое состояние
• 3) store обновляет состояние
• 4) компоненты, подписанные на store, получают обновленные данные

Тенденции/практики экосистемы jаvascript в 2025 году — это ... <i>(выберите три варианта ответа)</i>

Способ подключения внешнего скрипта, обеспечивающий его выполнение после разбора DOM и в порядке объявления, — это ...

Соотнесите метод (свойство) и его описание:

• A. elem.querySelectorAIK...)
• B. elem.getElementsByClassName(...)
• C. elem.closest(...)
• D. elem.textContent
• E. elem.innerHTML
• F. getComputedStyle(elem)
• G.возвращает статическую коллекцию (NodeList), не обновляется при изменении DOM (Document Object Model)
• H.возвращает «живую» коллекцию (HTMLCollection), автоматически отражает изменения DOM (Document Object Model)
• I. ищет ближайшего предка, соответствующего CSS-селектору
• J. читает/задаёт только текст без интерпретации HTML (HyperText Markup Language)
• K. читает/задаёт HTML-содержимое (парсит/вставляет HTML (HyperText Markup Language))
• L. возвращает вычисленные стили элемента с учётом каскада

Современный способ удалить узел из DOM (Document Object Model) — это метод ...

Современный способ монтирования корневого компонента в React 18 — это ...

Результат установки опции "jsx": "react-jsx" в tsconfig.json для React + TS (TypeScript) — это ...

Результат вычисления выражения "5" === 5 — это ...

Результат вызова Date.parse("2025-08-10") — это ...

Расположите этапы типичного процесса динамического добавления элемента на страницу в правильной последовательности:

• 1) Создать новый элемент с помощью document.createElementO
• 2) Настроить свойства элемента (текст, классы, стили)
• 3) Получить ссылку на родительский элемент, куда будет вставлен новый элемент
• 4) Вставить элемент в DOM с помощью метода вставки (например, append)

Расположите шаги типичного процесса создания и использования пользовательского хука в React в правильной последовательности:

• 1) Создать функцию, имя которой начинается с use
• 2) Внутри функции вызвать один или несколько встроенных хуков (например, useState, useEffect)
• 3) Вернуть из функции нужные значения (состояние, функции и т.д.)
• 4) Импортировать и использовать кастомный хук в компоненте
• 5) Убедиться, что хук вызывается только на верхнем уровне компонента

Расположите шаги подготовки и запуска проекта на Vite в правильном порядке:

• 1) создать проект командой: npm create vite@latest
• 2) выбрать шаблон и название проекта в мастере
• 3) перейти в каталог проекта: cd my-app
• 4) установить зависимости: npm install
• 5) запустить dev-сервер: npm run dev

Расположите шаги корректной обработки HTTP-ответа (Hypertext Transfer Protocol) при работе с fetch от запроса до использования данных:

• 1) вызвать fetch(url)
• 2) проверить response.ok / response.status в первом then
• 3) вызвать response.json() для парсинга тела ответа
• 4) использовать распарсенные данные в последующем then
• 5) обработать возможные ошибки в catch

Расположите шаги инициализации проекта React + TypeScript с Vite в корректном порядке:

• 1) npm create vite@latest my-app-------template react-ts
• 2) cd my-app
• 3) npm install
• 4) npm run dev

Расположите действия при подготовке и запуске приложения с Vite — от создания проекта до прод-сборки:

• 1) создать проект: npm create vite@latest my-app
• 2) в мастере выбрать шаблон (vanilla, vue, react и т.Д.)
• 3) запустить dev-сервер: npm run dev
• 4) собрать для продакшена: npm run build

Расположите в правильном порядке шаги добавления нового элемента на страницу с оформлением и логикой:

• 1) создать элемент (document.createElement)
• 2) настроить содержимое/атрибуты (textContent/innerHTML, setAttribute)
• 3) добавить С55-класс(ы) (classList.add)
• 4) вставить элемент в документ (например, append/prepend/before/after)
• 5) назначить обработчик события (addEventListener)

Проверку типов выполняет компилятор TypeScript; а … может убрать аннотации TS (TypeScript), но типы не проверяет <i>(укажите слово на английском языке)</i>

При установке пакета через npm флаг -D …

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

Получить вычислённые (применённые) стили элемента позволяет функция ...

По умолчанию файл index.html в проекте Vite (React + TS (TypeScript)) находится в ...

Отменить переход по ссылке в обработчике события click позволяет метод ...

Операции, относящиеся к типичному «процессу сборки» фронтенда, — это ... <i>(выберите три варианта ответа)</i>

Оператор объявления для значения, которое не должно изменяться, — это ...

Назначение JSX (jаvascript XML) в React — это ...

Назначение babel-loader в конфигурации Webpack — это ...

Компонент для группировки маршрутов в React Router v6 — это ...

Команда npm install без указания имени пакета в корне проекта ...

Команда для создания нового проекта на базе Vite — это ...

Ключевой принцип Redux в управлении состоянием — это ...

Для реакции «на каждый ввод символа» в текстовом поле наиболее подходит событие ...

Действие Webpack на этапе бандлинга заключается в том, что он ...

Говоря о Cookies, можно утверждать, что они …

Выполнение функции ... помещает в очередь макрозадач (macrotask)

Вы фронтенд-разработчик в учебном проекте. Нужно за 10–15 минут подготовить окружение для небольшого SPA (Single-Page Application) (ToDo), чтобы (см. ниже): • быстро запустить dev-сервер с HMR (Hot Module Replacement);
• писать на TypeScript;
• получить оптимизированную прод-сборку позже без ручной настройки Webpack. Какой вариант действий наиболее уместен?

Вы фронтенд-разработчик в команде, которая внедряет страницу профиля в SPA на React + TypeScript. Требования заказчика (см. ниже):
• страница доступна по маршруту /users/:id (React Router v6);
• данные профиля подтягиваются с GET /api/users/:id;
• при смене :id происходит повторная загрузка;
• предыдущий запрос корректно отменяется при размонтировании/смене :id;
• для авторизации в заголовок уходит токен из localStorage;
• без глобального состояния, только локальный useState;
• корректная типизация ответа;
• отображать «Загрузка…» во время запроса и имя пользователя после.
Какой из фрагментов компонента реализует требования наилучшим образом?

Вид объявления функции, который можно вызывать до места её определения благодаря подъёму (hoisting), — это Function … <i>(укажите слово на английском языке)</i>

Верным утверждением о document.getElementById является то, что этот метод ...

Библиотека для построения пользовательских интерфейсов (UI) — это ...<i> (укажите слово на английском языке)</i>

Актуальный подход к написанию компонентов в новом коде ... — это функциональные компоненты с хуками (useState, useEffect и др.)<i> (укажите слово на английском языке)</i>

Вы разрабатываете страницу со списком заказов. Карточки заказов (.order-card) создаются динамически (часть приходит из API (Application programming interface) после загрузки страницы). Требования заказчика (см. ниже):
• при клике по кнопке «Удалить» внутри карточки нужно удалить соответствующую карточку из DOM без перезагрузки страницы;
• обработчик должен работать и для карточек, добавленных после первоначального рендера;
• используйте современный метод удаления узла. Какое решение удовлетворяет требованиям?