Разработка web-приложений на языке JavaScript - ответы на вопросы

TypeScript характеризуется тем, что он ... (выберите три варианта ответа)
_{Тип ответа: Множественный выбор ••}

• добавляет статическую типизацию к jаvascript
• исполняется браузером напрямую без компиляции
• компилируется в jаvascript
• полностью заменяет Node.js
• помогает находить ошибки на этапе компиляции

Официально рекомендуемый способ работы с Redux, упрощающий создание … и редьюсеров, называется Redux Toolkit; (укажите слово на английском языке)
_{Тип ответа: Текcтовый ответ}

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

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

• document.querySelectorAll('#todo .del').forEach(btn =˃ { btn.addEventListener('click', () =˃ btn.closest('li').remove()); });
• const list = document.getElementById('todo'); list.addEventListener('click', (e) =˃ { if (e.currentTarget.classList.contains('del')) { e.currentTarget.closest('li').remove(); } });
• document.addEventListener('click', (e) =˃ { const btn = e.target.closest('.del'); const list = document.getElementById('todo'); if (!btn || !list.contains(btn)) return; const item = btn.closest('li'); if (item) item.remove(); });
• const list = document.getElementById('todo'); list.onclick = (e) =˃ { if (e.target.classList.contains('del')) e.target.parentElement.remove(); };
• const list = document.getElementById('todo'); list.addEventListener('click', ({ target }) =˃ { if (target.matches('.del')) target.remove(); });

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

Операции, относящиеся к типичному «процессу сборки» фронтенда, — это ... <i> (выберите три варианта ответа) </i>
_{Тип ответа: Множественный выбор ••}

• транспиляция кода
• бандлинг модулей
• минификация ресурсов
• исполнение кода на сервере Node.js в рантайме
• создание учетной записи npm

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

• orders.reduce((s, o) =˃ s + parseInt(o.total), 0)
• let s = 0; for (const o of orders) s += +o.total; // NaN «заражает» сумму s;
• orders .map(o =˃ Number(o.total)) .filter(n =˃ Number.isFinite(n)) .reduce((s, n) =˃ s + n, 0) // три прохода
• orders.reduce((s, o) =˃ { const n = Number(o.total); return Number.isFinite(n) ? s + n : s; }, 0)
  

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

Области применения jаvascript включают ... (выберите 4 варианта ответа)
_{Тип ответа: Множественный выбор ••}

• одностраничные приложения (SPA (Single Page Application)) на React/Vue/Angular
• мобильные приложения (например, React Native)
• прошивки микроконтроллеров на чистом JS без вспомогательных платформ
• серверные приложения и REST API (Application programming interface) на Node.js
• дата-визуализации и интерактивные графики (D3.js, Chart.js)

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

• Создать хук useLocalStorage, который использует useState для состояния и useEffect для синхронизации с localStorage. Хук должен принимать ключ и начальное значение, возвращать текущее значение и функцию для его обновления
• Использовать только useState, так как React автоматически сохраняет состояние между сессиями
• Создать хук useCounter, который использует только useReducer без работы с localStorage
• Использовать глобальный store Redux, так как только он может сохранять данные между сессиями

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

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

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

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

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

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

• вставляет HTML (HyperText Markup Language) с парсингом тегов
• вставляет текст, экранируя/не интерпретируя HTML-теги (HyperText Markup Language)
• добавляет класс к элементу
• вычисляет применённые стили
• возвращает «живую» коллекцию дочерних узлов.

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

• строки и числа, функции и undefined
• только объекты и массивы, без чисел
• объекты, массивы, строки, числа, true/false, null
• любые типы jаvascript без ограничений

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

• npm i -g @babel/cli @babel/core @babel/preset-env echo '{ "presets": ["@babel/preset-env"] }' ˃ .babelrc npm run build package.json не меняем
• npm i -D typescript echo '{ "compilerOptions": { "target": "ES5", "outDir": "lib" } }' ˃ tsconfig.json npm run build Сборка через tsc
• npm i -D @babel/cli @babel/core @babel/preset-env core-js echo '{ "presets": [["@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3 }]] }' ˃ .babelrc package.json (фрагмент): { "scripts": { "build": "babel src --out-dir lib --source-maps" } } Далее: npm run build
• npm i @babel/cli @babel/core @babel/preset-env -S echo '{ "presets": [["@babel/preset-env", { "modules": false }]] }' ˃ .babelrc node src/index.js ˃ lib/index.js

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

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

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

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

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

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

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

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

• npx create-react-app my-app --template typescript cd my-app npm start npm run build
• npm create vite@latest my-app # в мастере: шаблон "vanilla-ts" cd my-app npm install npm run dev npm run build
• npm init vite my-app cd my-app npm run dev # TS подключим позже вручную
• npm create vite@latest my-app -- --template react cd my-app npm install npm run dev # типизацию дадим Babel'ом
  

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

… – это веб-приложения распределена между сервером и клиентом

… функции (или тело функции) – это набор инструкций, заключенный в фигурные скобки, которые необходимо выполнить при ее вызове

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

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

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

• строка со всеми data-* атрибутами
• объект с полями для data-* атрибутов (имена в camelCase)
• массив значений data-*
• коллекция атрибутов DOM (NamedNodeMap)

События, подходящие для отслеживания ввода пользователя «в реальном времени» в текстовом поле, — это ... (укажите три варианта ответа)
_{Тип ответа: Множественный выбор ••}

• input
• change
• DOMContentLoaded
• keydown
• paste

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

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

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

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

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

С точки зрения Java … представляет собой файл jar, используемый для определения бизнес-логики программы и построения интерфейсной части

Deferred приходит в состояние "error" в одном из трех случаев – в частности, если … (укажите 3 варианта ответа)

• аргумент callback или errback является instanceof Error
• из последнего обработчика выпал exception
• последний обработчик вернул значение instanceof Error
• аргумент callback или errback не является instanceof Error
• из первого обработчика выпал exception
• первый обработчик вернул значение instanceof Error

… – это единый стандарт отображения всех элементов веб-страницы

… вызовов – это средство доступа к объекту под различными именами

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

При установке пакета через npm флаг -… записывает зависимость в devDependencies
_{Тип ответа: Текcтовый ответ}

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

Тег < … > создает новый столбец в таблице

Если само слово let кажется не очень понятным, можно представить, что вместо него используется русское слово «…»

… – это процесс и искусство создания компьютерных программ и/или программного обеспечения с помощью соответствующих технических языков

… – это один из способов в jаvascript, с помощью которого можно получить аргументы функции

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

• const q = document.getElementById('q'); const list = document.getElementById('catalog'); q.addEventListener('change', () =˃ filter(list, q.value)); sessionstorage.setItem('lastQuery', q.value)
• const q = document.getElementById('q'); const list = document.getElementById('catalog'); q.addEventListener('input', () =˃ { filter(list, q.value); localStorage.setItem('lastQuery', q.value); }); document.addEventListener('DOMContentLoaded', () =˃ { const saved = localStorage.getItem('lastQuery') || ''; q.value = saved; filter(list, saved); }); function showEmpty(message) { const info = document.getElementById('empty') || document.createElement('div'); info.id = 'empty'; info.textContent = message; // безопасно: без HTML document.body.append(info); }
• document.getElementById('searchForm').addEventListener('submit', (e) =˃ { e.preventDefault(); const q = document.getElementById('q').value; filter(document.getElementById('catalog'), q); [removed] = 'lastQuery=' + q; });
• const q = document.getElementById('q'); q.addEventListener('keyup', () =˃ filter(catalog, q.value)); localStorage.setItem('lastQuery', JSON.stringify({q: q.value})); q[removed] = q.value;
• addEventListener('DOMContentLoaded', () =˃ { const q = document.getElementById('q'); const s = localStorage.getItem('lastQuery'); if (s) q.value = s; }); document.getElementById('searchForm').onsubmit = () =˃ filter(catalog, q.value);

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

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

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

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

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

… – это основная единица информации в вычислительной технике и цифровых коммуникациях, которая представляет логическое состояние с одним из двух возможных значений

… колбэки – это аргументы при вызове функции, которая начнет выполнение кода на заднем фоне

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

К классическим веб-приложениям относят … (укажите 2 варианта ответа)

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

• CRA (Create React App) предоставляет предсказуемую настройку Webpack и подходит для традиционных проектов, в то время как Vite использует нативные ES-модули для более быстрой разработки и HMR (Hot Module Replacement). Оба поддерживают TypeScript из коробки
• Vite не поддерживает TypeScript, поэтому для TypeScript-проектов можно использовать только CRA (Create React App)
• CRA (Create React App) быстрее Vite в режиме разработки, но медленнее собирает проект для продакшена
• Оба инструмента идентичны по функциональности и производительности, разница только в названии

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

• fetch('/api/users', { method: 'POST', body: JSON.stringify(data) }) .then(r =˃ r.json());
• async function createUser(data) { try { const res = await fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); if (!res.ok) throw new Error(`HTTP ${res.status}`); const json = await res.json(); return json; } catch (e) { console.error('Ошибка запроса:', e); throw e; } }
• fetch('/api/users', { method: 'POST', body: data }) .then(r =˃ { if (!r.ok) return r; return JSON.parse(r); // парсинг не объекта Response }) .catch(console.error);
• async function createUser(data) { const res = await fetch('/api/users'); const json = await res.json(); if (!json.success) throw new Error('fail'); return json; }

Регулярные выражения применяются для того, чтобы … (укажите 2 варианта ответа)

• не допустить замены
• удалить все даты
• удалить все файлы, начинающиеся на test
• найти все логи

Для хранения больших объемов информации используют особый компьютер с очень большим объемом памяти – … хранения данных

… – это язык программирования, откуда jаvascript взял свои регулярные выражения

… – это тип данных, в котором хранится упорядоченный набор однотипных элементов

… – это разновидность управляющих конструкций для организации многократного выполнения одного и того же участка кода

Изучив приведенный ниже пример работы с контейнером (в файле находится произвольное количество целых чисел, программа считывает их в вектор и выводит на экран), определите правильную последовательность кода: #inсludе < iostream > #inсludе < vector > using namespace std; int main(){ ifstream input (“inpnum.txt”); if ( !input) { cout << “Ошибка открытия входного файла”; exit(1);} vector< int > v; создание контейнера int x; while ( input >> x, !input.eof()) v.push_back(x); for ( auto temp : v) cout << temp }

1. записывается соответствующая специализация шаблона vector – vector< int >
2. для создания вектора v применяется конструктор по умолчанию
3. организуется цикл до конца файла, в котором из него считывается очередное целое число
4. с помощью метода push_back число заносится в вектор, размер которого увеличивается автоматически

Правильный способ использования оператора if в jаvascript: …

• if i = 2 then
• if i == 2 then
• if i = 2
• if (i == 2)

Правильно выведенное сообщение «Hello World!» с помощью jаvascript: …

• alert("Hello World")
• msgBox("Hello World")
• alertBox("Hello World")
• msg("Hello World")

Шаблонные … представляют собой строки, заключенные в обратные кавычки (`) и обладают некоторыми особенными свойствами – например, в них можно подставлять некие значения, являющиеся результатом вычисления jаvascript-выражений

… –параметр или свойство элемента.

Метод … ищет совпадение и возвращает true/false, в зависимости от того, находит ли он его

• regexp.test(str)
• indexOf()
• localeCompare()

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

Расположите этапы изучения jаvascript в правильной последовательности, согласно материалам курса:
_{Тип ответа: Сортировка}

• 1) Освоить основы jаvascript

---

• 2) Выбрать один инструмент в каждой категории (фреймворк, сборщик и т.д.)

---

• 3) Постепенно внедрять TypeScript

---

• 4) Понимать экосистему как целостную платформу

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

• объект Date
• число миллисекунд с 01.01.1970 UTC (Coordinated Universal Time)
• строку в формате ISO
• булево значение

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

• React.buildElement()
• React.render()
• React.createElement()
• React.transformJSX()

Тенденции/практики экосистемы jаvascript в 2025 году — это ... (выберите три варианта ответа)
_{Тип ответа: Множественный выбор ••}

• уменьшение бандлов, ускорение загрузки (SSR (Server-Side Rendering) /стримминг)
• отказ от улучшения Developer Experience
• усиление позиций TypeScript
• микрофронтенды, сервис-воркеры для PWA (Progressive Web App)
• полная отмена модулей ECMAScript

Тег < … > задает основные параметры таблицы – длину, ширину и др.

Метод … проверяет соответствие в строке, этот метод возвращает совпадающий текст, если он находит совпадение, в противном случае он возвращает null

Значение выражения должно быть указано … return

Внутренний формат для строк – всегда …, вне зависимости от кодировки страницы

Веб-приложение … работает на удаленном компьютере, который может находиться где угодно

… вызовов – это средство доступа к объекту под различными именами

… – это хранилище для данных в памяти и механизм для извлечения этих данных при обращении

… – это специальный метод, служащий для создания и инициализации объектов, созданных с использованием class

При записи строк параметры в … записи не используют символы кавычек, в то время как параметры функции-конструктора используют кавычки

Цикл … позволяет перебирать все перечислимые свойства объекта по их именам

Статический метод … возвращает строку, созданную из указанной последовательности значений единиц кода UTF-16

• String. fromCharCode()
• indexOf()
• localeCompare()

В jаvascript имеется специальное значение, которое указывает на отсутствие значения, – это …

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

… комментарий ведёт себя точно также как и однострочный () комментарий. Вместо этого, он начинается с #! и действителен только в самом начале скрипта или модуля.

… технического задания – в том, чтобы свести к минимуму разницу между представлениями двух сторон, заказчика и исполнителя

Глобальный объект … можно использовать в виде конструктора, создавая с его помощью новые числа (правда, в таком виде его практически никогда не используют), им можно пользоваться и как самостоятельной сущностью, не создавая его экземпляры (то есть – некие числа, представляемые с его помощью)

• Word
• Mood
• Number

… – это экземпляр класса.

К примитивным типам данных относятся такие, как … (укажите 2 варианта ответа)

• typeof
• symbol
• string
• table

Говоря о jаvascript-методе str.replace(), следует отметить, что когда первый аргумент replace является строкой, он заменяет только … совпадение

• Первое
• второе
• последнее

С помощью … можно узнать, насколько страница сайта адаптирована под разные размеры экраны и разрешения.

• тега <div>
• расширения Window Raizer
• HTML-редактора

Для того чтобы понять замыкания, нужно разобраться с двумя важнейшими концепциями jаvascript, такими как контекст выполнения … и

• функция квадрата
• массив данных
• лексическое окружение

В разделе технического задания «…» содержится краткий перечень того, какими техническими средствами мы хотим получить профит

Тег < … > создает новую строку в таблице