Тесты СинергияАртём Хелп
Артём Help онлайнНаписать Артёму
Бесплатно оценим сроки и стоимостьОтправить задание в Telegram
Все тесты предмета

Ответы на тесты Разработка web-приложений на языке JavaScript.dor_БАК_25-233-Б

Вопросы и варианты доступны бесплатно. 30 ответов доступны бесплатно — откройте их кнопкой ниже. Полный набор — в личном кабинете на 7 дней.

100 вопросов 6 тестов в одном предмете Доступ 7 дней
Содержание предмета

Бесплатные ответы на тесты по предмету «Разработка web-приложений на языке JavaScript» — Синергия и МТИ

Вопрос 1Ответ открыт бесплатно

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

  1. elem.querySelectorAll(...)
  2. elem.getElementsByClassName(...)
  3. elem.closest(...)
  4. elem.textContent
  5. elem.innerHTML
  6. getComputedStyle(elem)
  7. возвращает статическую коллекцию (NodeList), не обновляется при изменении DOM (Document Object Model)
  8. возвращает «живую» коллекцию (HTMLCollection), автоматически отражает изменения DOM (Document Object Model)
  9. ищет ближайшего предка, соответствующего CSS-селектору
  10. читает/задаёт только текст без интерпретации HTML (HyperText Markup Language)
  11. читает/задаёт HTML-содержимое (парсит/вставляет HTML (HyperText Markup Language))
  12. возвращает вычисленные стили элемента с учётом каскада
✓ Правильный ответ

elem.querySelectorAll(...) = возвращает статическую коллекцию (NodeList), не обновляется при изменении DOM (Document Object Model) ; elem.getElementsByClassName(...) = возвращает «живую» коллекцию (HTMLCollection), автоматически отражает изменения DOM (Document Object Model) ; elem.closest(...) = ищет ближайшего предка, соответствующего CSS-селектору ; elem.textContent = читает/задаёт только текст без интерпретации HTML (HyperText Markup Language) ; elem.innerHTML = читает/задаёт HTML-содержимое (парсит/вставляет HTML (HyperText Markup Language)) ; getComputedStyle(elem) = возвращает вычисленные стили элемента с учётом каскада

Вопрос 2

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

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

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

  1. можно вызывать у любого элемента
  2. возвращает «живую» коллекцию
  3. возвращает элемент по уникальному id, вызывается у document
  4. возвращает массив только из одного элемента
  5. ищет по CSS-селектору
Вопрос 4

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

  1. статический
Вопрос 5

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

  1. node.delete()
  2. node.remove()
  3. document.remove(node)
  4. parent.eraseChild(node)
  5. element.destroy()
Вопрос 6Ответ открыт бесплатно

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

  1. return false
  2. event.stopPropagation()
  3. event.preventDefault()✓ Правильный ответ
  4. window.cancel()
  5. link.href = '#'
✓ Правильный ответ

event.preventDefault()

Вопрос 7

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

  1. elem.style
  2. getComputedStyle(elem)
  3. elem.currentStyle
  4. window.stylesOf(elem)
  5. CSS.get(elem)
Вопрос 8

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

  1. session
  2. Session
Вопрос 9

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

  1. change
  2. input
  3. submit
  4. keydown
  5. paste
Вопрос 10Ответ открыт бесплатно

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

  1. хранятся только в sessionStorage
  2. не отправляются на сервер автоматически
  3. отправляются браузером на сервер при каждом запросе к домену✓ Правильный ответ
  4. имеют минимальный объём 5 МБ
  5. не могут быть прочтены или установлены из JavaScript
✓ Правильный ответ

отправляются браузером на сервер при каждом запросе к домену

Вопрос 11

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

  1. Для каждой кнопки при создании карточки: btn.addEventListener('click', () =˃ {   btn.parentElement.removeChild(btn.closest('.order-card')); });
  2. Делегирование событий от контейнера/документа: document.addEventListener('click', (e) =˃ {   if (e.target.classList.contains('delete')) {     const card = e.target.closest('.order-card');     if (card) card.remove();   } });
  3. Один раз навесить обработчик на все текущие кнопки: container.querySelectorAll('.delete').forEach(btn =˃ {   btn.onclick = () =˃ btn.closest('.order-card').remove(); });
  4. Делегирование, но проверять currentTarget: container.addEventListener('click', (e) =˃ {   if (e.currentTarget.matches('.delete')) {     e.currentTarget.closest('.order-card').remove();   } });
  5. Делегирование на контейнер по клику на карточку, а не на кнопку: container.addEventListener('click', (e) =˃ {   if (e.target.matches('.order-card')) e.target.remove(); });
Вопрос 12

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

  1. BrowserRouter
  2. Routes
  3. Route
  4. Link
  5. оборачивает всё приложение и управляет историей браузера (HTML5 History API)
  6. контейнер для набора маршрутов (v6), выбирает подходящий Route
  7. описывает соответствие пути компоненту через path и element
  8. ссылка для SPA-навигации (Single Page Application) без полной перезагрузки страницы
Вопрос 13Ответ открыт бесплатно

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

  1. npm create vite@latest my-app -- --template react-ts✓ Правильный ответ
  2. cd my-app✓ Правильный ответ
  3. npm install✓ Правильный ответ
  4. npm run dev✓ Правильный ответ
✓ Правильный ответ

npm create vite@latest my-app -- --template react-ts ; cd my-app ; npm install ; npm run dev

Вопрос 14

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

  1. React
  2. react
Вопрос 15

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

  1. серверный рендеринг Next.js
  2. декларативное описание структуры компонентов; компилируется в React.createElement
  3. замена TypeScript
  4. описание конфигурации маршрутов
Вопрос 16Ответ открыт бесплатно

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

  1. React✓ Правильный ответ
  2. react
✓ Правильный ответ

React ; react

Вопрос 17

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

  1. использование двустороннего связывание как основы работы
  2. использование нескольких независимых хранилищ на компонент
  3. использование одного источника правды (единый store) и обновление через actions/reducers
  4. хранение состояния в SQL-таблицах (Structured Query Language)
Вопрос 18

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

  1. switch
  2. routes
  3. routerGroup
  4. stack
Вопрос 19

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

  1. полное отключение JSX (JavaScript XML)
  2. включение нового автоматического JSX-трансформа (React 17+), не требующего явного import React
  3. замена TypeScript на JavaScript
  4. включение SSR (Server-Side Rendering) по умолчанию
Вопрос 20Ответ открыт бесплатно

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

  1. корне проекта✓ Правильный ответ
  2. папке src
  3. папке public
  4. папке dist
✓ Правильный ответ

корне проекта

Вопрос 21

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

  1. ReactDOM.render
  2. hydrate
  3. createRoot
  4. mountComponent
Вопрос 22

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

  1. function Profile() {   const { id } = useParams();   const [user, setUser] = useState˂any˃(null);   useEffect(() =˃ {     fetch(`/api/users/${id}`, {       headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }     })       .then(r =˃ r.json())       .then(setUser);   }, []); // ← не реагирует на смену id, нет отмены запроса   if (!user) return ˂p˃Загрузка…˂/p˃;   return ˂h1˃{user.name}˂/h1˃; }
  2. type Profile = { id: number; name: string; email: string }; export default function ProfilePage() {   const { id } = useParams();   const [data, setData] = useState˂Profile | null˃(null);   const [loading, setLoading] = useState(false);   const [error, setError] = useState˂string | null˃(null);   useEffect(() =˃ {     const ctrl = new AbortController();     const token = localStorage.getItem('token');     setLoading(true);     setError(null);     setData(null);     fetch(`/api/users/${id}`, {       method: 'GET',       signal: ctrl.signal,       headers: { Authorization: `Bearer ${token ?? ''}` }     })       .then(r =˃ {         if (!r.ok) throw new Error(`HTTP ${r.status}`);         return r.json() as Promise˂Profile˃;       })       .then(setData)       .catch(e =˃ {         if (e.name !== 'AbortError') setError(e.message);       })       .finally(() =˃ setLoading(false));     return () =˃ ctrl.abort();   }, [id]);   if (loading) return ˂p˃Загрузка…˂/p˃;   if (error) return ˂p˃Ошибка: {error}˂/p˃;   if (!data) return null;   return ˂h1˃{data.name}˂/h1˃; }
  3. function Profile() {   const { id } = useParams();   const [user, setUser] = useState˂{ name: string } | null˃(null);   useLayoutEffect(() =˃ {     // Нет обработки токена, нет отмены, возможны гонки     fetch('/api/users/' + id)       .then(r =˃ r.json())       .then(setUser);   }, [/* пусто */]); // ← зависимостей нет   return user ? ˂h1˃{user.name}˂/h1˃ : ˂span/˃; }
  4. // Использует Redux store для хранения профиля — нарушает требование «без глобального состояния» function Profile() {   const { id } = useParams();   const dispatch = useAppDispatch();   const user = useAppSelector(s =˃ s.user.byId[id!]);   useEffect(() =˃ {     dispatch(fetchUser(id!));   }, [id]);   return user ? ˂h1˃{user.name}˂/h1˃ : ˂p˃Загрузка…˂/p˃; }
Вопрос 23Ответ открыт бесплатно

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

  1. Babel✓ Правильный ответ
  2. Webpack✓ Правильный ответ
  3. Vite✓ Правильный ответ
  4. TypeScript✓ Правильный ответ
  5. транспилирует современный JS (JavaScript) в совместимый для целевых окружений✓ Правильный ответ
  6. сборщик модулей: строит граф зависимостей и собирает бандлы✓ Правильный ответ
  7. быстрый dev-сервер с HMR (Hot Module Replacement) в разработке и прод-сборка на Rollup✓ Правильный ответ
  8. надмножество JS (JavaScript) со статической типизацией✓ Правильный ответ
✓ Правильный ответ

Babel = транспилирует современный JS (JavaScript) в совместимый для целевых окружений ; Webpack = сборщик модулей: строит граф зависимостей и собирает бандлы ; Vite = быстрый dev-сервер с HMR (Hot Module Replacement) в разработке и прод-сборка на Rollup ; TypeScript = надмножество JS (JavaScript) со статической типизацией

Вопрос 24

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

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

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

  1. npm init vite
  2. npm create vite@latest my-app
  3. npx vite init
  4. npm start vite
Вопрос 26Ответ открыт бесплатно

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

  1. устанавливает пакет глобально
  2. записывает зависимость в dependencies
  3. записывает зависимость в devDependencies✓ Правильный ответ
  4. удаляет пакет
✓ Правильный ответ

записывает зависимость в devDependencies

Вопрос 27

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

  1. устанавливает все зависимости из package.json (с учётом package-lock.json)
  2. обновляет все зависимости до последних версий
  3. удаляет неиспользуемые пакеты
  4. запускает скрипт установки из scripts
Вопрос 28

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

  1. запуск встроенного dev-сервера Webpack
  2. транспиляция JS-файлов (JavaScript) по правилам Babel во время сборки
  3. минификация CSS (Cascading Style Sheets)
  4. запуск tree-shaking модулей
Вопрос 29

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

  1. Babel
  2. babel
Вопрос 30Ответ открыт бесплатно

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

  1. package.json✓ Правильный ответ
  2. package-lock.json
  3. node_modules.json
  4. .npmrc
✓ Правильный ответ

package.json

Вопрос 31

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

  1. скачивает пакеты из npm-регистра
  2. объединяет модули по графу зависимостей в один или несколько итоговых файлов
  3. управляет версиями в package.json
  4. запускает HMR (Hot Module Replacement) без сборки
Вопрос 32

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

  1. Vite
  2. vite
Вопрос 33Ответ открыт бесплатно

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

  1. Установить webpack, webpack-dev-server, babel-loader, ts-loader, вручную настроить конфиг и запустить dev-сервер
  2. Использовать Create React App: npx create-react-app my-app и затем включить TypeScript
  3. Выполнить npm create vite@latest my-app, выбрать шаблон vanilla-ts, затем cd my-app && npm install && npm run dev; для продакшена — npm run build✓ Правильный ответ
  4. Установить только Babel CLI и транcпилировать файлы командой npx babel src --out-dir dist, затем открыть HTML (HyperText Markup Language) напрямую в браузере
✓ Правильный ответ

Выполнить npm create vite@latest my-app, выбрать шаблон vanilla-ts, затем cd my-app && npm install && npm run dev; для продакшена — npm run build

Вопрос 34

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

  1. fetch('/api/users', {   method: 'POST',   body: JSON.stringify(data) }) .then(r =˃ r.json());
  2. 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;   } }
  3. fetch('/api/users', { method: 'POST', body: data })   .then(r =˃ {     if (!r.ok) return r;     return JSON.parse(r); // парсинг не объекта Response   })   .catch(console.error);
  4. async function createUser(data) {   const res = await fetch('/api/users');   const json = await res.json();   if (!json.success) throw new Error('fail');   return json; }
Вопрос 35

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

  1. orders.reduce((s, o) =˃ s + parseInt(o.total), 0)
  2. let s = 0; for (const o of orders) s += +o.total; // NaN «заражает» сумму s;
  3. orders   .map(o =˃ Number(o.total))   .filter(n =˃ Number.isFinite(n))   .reduce((s, n) =˃ s + n, 0) // три прохода
  4. orders.reduce((s, o) =˃ {   const n = Number(o.total);   return Number.isFinite(n) ? s + n : s; }, 0)
Вопрос 36Ответ открыт бесплатно

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

  1. document.querySelectorAll('#todo .del').forEach(btn =˃ {   btn.addEventListener('click', () =˃ btn.closest('li').remove()); });
  2. const list = document.getElementById('todo'); list.addEventListener('click', (e) =˃ {   if (e.currentTarget.classList.contains('del')) {     e.currentTarget.closest('li').remove();   } });
  3. 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(); });✓ Правильный ответ
  4. const list = document.getElementById('todo'); list.onclick = (e) =˃ {   if (e.target.classList.contains('del')) e.target.parentElement.remove(); };
  5. const list = document.getElementById('todo'); list.addEventListener('click', ({ target }) =˃ {   if (target.matches('.del')) target.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(); });

Вопрос 37

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

  1. const q = document.getElementById('q'); const list = document.getElementById('catalog'); q.addEventListener('change', () =˃ filter(list, q.value)); sessionStorage.setItem('lastQuery', q.value);
  2. 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); }
  3. document.getElementById('searchForm').addEventListener('submit', (e) =˃ {   e.preventDefault();   const q = document.getElementById('q').value;   filter(document.getElementById('catalog'), q);   [removed] = 'lastQuery=' + q; });
  4. const q = document.getElementById('q'); q.addEventListener('keyup', () =˃ filter(catalog, q.value)); localStorage.setItem('lastQuery', JSON.stringify({q: q.value})); q[removed] = q.value;
  5. 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);
Вопрос 38

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

  1. npm i -g @babel/cli @babel/core @babel/preset-env echo '{ "presets": ["@babel/preset-env"] }' ˃ .babelrc npm run build package.json не меняем
  2. npm i -D typescript echo '{ "compilerOptions": { "target": "ES5", "outDir": "lib" } }' ˃ tsconfig.json npm run build Сборка через tsc
  3. 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
  4. 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
Вопрос 39

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

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

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

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

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

Вопрос 41

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

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

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

  1. JSON (JavaScript Object Notation)
  2. Fetch API (Application programming interface)
  3. Date.now()
  4. const
  5. формат обмена данными; сериализация через JSON.stringify и разбор через JSON.parse
  6. глобальная функция для выполнения HTTP-запросов (Hypertext Transfer Protocol); возвращает Promise с объектом Response
  7. статический метод, возвращающий текущий таймстамп (мс с 01.01.1970 UTC (Coordinated Universal Time))
  8. объявление константы, значение которой не должно изменяться в текущей области видимости
Вопрос 43Ответ открыт бесплатно

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

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

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

Вопрос 44

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

  1. "null"
  2. "object"
  3. "undefined"
  4. "number"
Вопрос 45

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

  1. defer
  2. Defer
Вопрос 46Ответ открыт бесплатно

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

  1. объект Date
  2. число миллисекунд с 01.01.1970 UTC (Coordinated Universal Time)✓ Правильный ответ
  3. строку в формате ISO
  4. булево значение
✓ Правильный ответ

число миллисекунд с 01.01.1970 UTC (Coordinated Universal Time)

Вопрос 47

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

  1. отклоняет промис автоматически
  2. выполняет промис, но response.ok === false
  3. синхронно бросает исключение
  4. возвращает null
Вопрос 48

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

  1. строки и числа, функции и undefined
  2. только объекты и массивы, без чисел
  3. объекты, массивы, строки, числа, true/false, null
  4. любые типы JavaScript без ограничений
Вопрос 49

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

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

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

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

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

Вопрос 51

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

  1. Date
  2. Date()
  3. date
  4. date()
Вопрос 52

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

  1. for
  2. for…in
  3. for…of
  4. while
  5. выполняет заданное количество итераций, используя счётчик
  6. перебирает индексы (или ключи) объекта (включая унаследованные)
  7. перебирает значения итерируемых объектов (массивов, строк)
  8. выполняет тело цикла, пока условие истинно, проверяя его перед каждой итерацией
Вопрос 53Ответ открыт бесплатно

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

  1. Освоить основы JavaScript✓ Правильный ответ
  2. Выбрать один инструмент в каждой категории (фреймворк, сборщик и т.д.)✓ Правильный ответ
  3. Постепенно внедрять TypeScript✓ Правильный ответ
  4. Понимать экосистему как целостную платформу✓ Правильный ответ
✓ Правильный ответ

Освоить основы JavaScript ; Выбрать один инструмент в каждой категории (фреймворк, сборщик и т.д.) ; Постепенно внедрять TypeScript ; Понимать экосистему как целостную платформу

Вопрос 54

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

  1. document.querySelector(...)
  2. element.querySelectorAll(...)
  3. element.getElementsByTagName(...)
  4. element.closest(sel)
  5. event.currentTarget
  6. element.classList.add/remove/toggle
  7. возвращает первый соответствующий элемент по CSS-селектору
  8. возвращает статическую коллекцию узлов, подобранных по CSS-селектору
  9. возвращает «живую» коллекцию элементов, подобранных по имени тега
  10. ищет ближайший предок (или сам элемент), соответствующий селектору
  11. элемент, на котором висит текущий обработчик события
  12. удобное управление CSS-классами элемента
Вопрос 55

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

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

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

  1. querySelectorAll
  2. getElementsByClassName✓ Правильный ответ
  3. querySelector
  4. getElementById
  5. matches
✓ Правильный ответ

getElementsByClassName

Вопрос 57

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

  1. elem.onclick = fn1; elem.onclick = fn2;
  2. elem.addEventListener('click', fn1); elem.addEventListener('click', fn2);
  3. использование атрибута onclick в HTML (HyperText Markup Language)
  4. создание копии элемента и навешивание на неё второго обработчика
  5. использование метода window.on('click', ...), который автоматически прокинется
Вопрос 58

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

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

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

  1. return false
  2. event.preventDefault()
  3. event.stopPropagation()
  4. location.hash = ''
  5. window.close()
Вопрос 60Ответ открыт бесплатно

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

  1. строка со всеми data-* атрибутами
  2. объект с полями для data-* атрибутов (имена в camelCase)✓ Правильный ответ
  3. массив значений data-*
  4. коллекция атрибутов DOM (NamedNodeMap)
✓ Правильный ответ

объект с полями для data-* атрибутов (имена в camelCase)

Вопрос 61

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

  1. input
  2. change
  3. DOMContentLoaded
  4. keydown
  5. paste
Вопрос 62

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

  1. local
  2. Local
Вопрос 63Ответ открыт бесплатно

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

  1. ContentLoaded✓ Правильный ответ
  2. ContentLoaded()✓ Правильный ответ
  3. contentloaded
  4. contentloaded()
✓ Правильный ответ

ContentLoaded ; ContentLoaded() ; contentloaded ; contentloaded()

Вопрос 64

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

  1. element.remove()
  2. element.insertAdjacentHTML(position, text)
  3. element.matches(selector)
  4. element.dataset
  5. element.scrollIntoView()
  6. удаляет элемент из DOM
  7. вставляет HTML в заданную позицию относительно элемента
  8. проверяет, соответствует ли элемент CSS-селектору
  9. предоставляет доступ к пользовательским data-* атрибутам
  10. прокручивает страницу так, чтобы элемент был виден
Вопрос 65

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

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

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

  1. Node.js✓ Правильный ответ
  2. npm✓ Правильный ответ
  3. Babel✓ Правильный ответ
  4. Webpack✓ Правильный ответ
  5. Vite✓ Правильный ответ
  6. среда выполнения JavaScript вне браузера✓ Правильный ответ
  7. менеджер пакетов и скриптов для проекта✓ Правильный ответ
  8. транспилирует современный JavaScript в совместимый для целевых окружений✓ Правильный ответ
  9. сборщик модулей: строит граф зависимостей и формирует бандлы✓ Правильный ответ
  10. быстрый dev-сервер (HMR (Hot Module Replacement)) и прод-сборка на базе Rollup✓ Правильный ответ
✓ Правильный ответ

Node.js = среда выполнения JavaScript вне браузера ; npm = менеджер пакетов и скриптов для проекта ; Babel = транспилирует современный JavaScript в совместимый для целевых окружений ; Webpack = сборщик модулей: строит граф зависимостей и формирует бандлы ; Vite = быстрый dev-сервер (HMR (Hot Module Replacement)) и прод-сборка на базе Rollup

Вопрос 67

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

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

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

  1. npm start ˂script˃
  2. npx ˂script˃
  3. npm run ˂script˃
  4. node ˂script˃
Вопрос 69

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

  1. fs
  2. path
  3. http
  4. url
Вопрос 70Ответ открыт бесплатно

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

  1. D✓ Правильный ответ
  2. d
✓ Правильный ответ

D ; d

Вопрос 71

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

  1. package.json
Вопрос 72

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

  1. склеивание файлов модулей в бандл
  2. удаление неиспользуемого кода (tree-shaking)
  3. транспиляция кода под целевые окружения
  4. сжимание изображения
Вопрос 73Ответ открыт бесплатно

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

  1. транспиляция кода✓ Правильный ответ
  2. бандлинг модулей✓ Правильный ответ
  3. минификация ресурсов✓ Правильный ответ
  4. исполнение кода на сервере Node.js в рантайме
  5. создание учетной записи npm
✓ Правильный ответ

транспиляция кода ; бандлинг модулей ; минификация ресурсов

Вопрос 74

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

  1. добавляет статическую типизацию к JavaScript
  2. исполняется браузером напрямую без компиляции
  3. компилируется в JavaScript
  4. полностью заменяет Node.js
  5. помогает находить ошибки на этапе компиляции
Вопрос 75

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

  1. npm
  2. NPM
Вопрос 76Ответ открыт бесплатно

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

  1. dependencies✓ Правильный ответ
  2. devDependencies✓ Правильный ответ
  3. peerDependencies✓ Правильный ответ
  4. optionalDependencies✓ Правильный ответ
  5. пакеты, необходимые для работы приложения в продакшене✓ Правильный ответ
  6. пакеты, необходимые только во время разработки✓ Правильный ответ
  7. пакеты, которые требуются хост-пакетом и должны быть установлены пользователем✓ Правильный ответ
  8. пакеты, которые не обязательны для работы приложения, их отсутствие не приведёт к ошибке✓ Правильный ответ
✓ Правильный ответ

dependencies = пакеты, необходимые для работы приложения в продакшене ; devDependencies = пакеты, необходимые только во время разработки ; peerDependencies = пакеты, которые требуются хост-пакетом и должны быть установлены пользователем ; optionalDependencies = пакеты, которые не обязательны для работы приложения, их отсутствие не приведёт к ошибке

Вопрос 77

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

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

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

  1. работа с базами данных на сервере
  2. построение пользовательских интерфейсов (UI)
  3. создание CSS-стилей для веб-страниц
  4. полная замена Node.js
Вопрос 79

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

  1. классовые компоненты с методами жизненного цикла
  2. функциональные компоненты с хуками
  3. jQuery-плагины
  4. Mixin-ы во всех компонентах
Вопрос 80Ответ открыт бесплатно

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

  1. Redux
  2. React Router✓ Правильный ответ
  3. Zustand
  4. Babel
✓ Правильный ответ

React Router

Вопрос 81

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

  1. React.buildElement()
  2. React.render()
  3. React.createElement()
  4. React.transformJSX()
Вопрос 82

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

  1. хуки
Вопрос 83Ответ открыт бесплатно

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

  1. Виртуальный DOM (Document Object Model)✓ Правильный ответ
  2. Пропсы✓ Правильный ответ
  3. Хуки✓ Правильный ответ
  4. JSX (JavaScript XML)✓ Правильный ответ
  5. упрощенная копия реального DOM (Document Object Model), используемая для эффективного обновления интерфейса✓ Правильный ответ
  6. параметры, передаваемые компоненту сверху и доступные только для чтения✓ Правильный ответ
  7. функции, позволяющие использовать состояние и эффекты в функциональных компонентах✓ Правильный ответ
  8. синтаксическое расширение, напоминающее HTML (HyperText Markup Language), которое компилируется в JavaScript✓ Правильный ответ
✓ Правильный ответ

Виртуальный DOM (Document Object Model) = упрощенная копия реального DOM (Document Object Model), используемая для эффективного обновления интерфейса ; Пропсы = параметры, передаваемые компоненту сверху и доступные только для чтения ; Хуки = функции, позволяющие использовать состояние и эффекты в функциональных компонентах ; JSX (JavaScript XML) = синтаксическое расширение, напоминающее HTML (HyperText Markup Language), которое компилируется в JavaScript

Вопрос 84

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

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

Официально рекомендуемый способ работы с Redux, упрощающий создание … и редьюсеров, называется Redux Toolkit; <i>(укажите слово на английском языке)</i>

  1. store
  2. Store
Вопрос 86Ответ открыт бесплатно

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

  1. useEffect✓ Правильный ответ
  2. useEffect()✓ Правильный ответ
✓ Правильный ответ

useEffect ; useEffect()

Вопрос 87

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

  1. React
  2. react
Вопрос 88

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

  1. useState
  2. useEffect
  3. useContext
  4. useRef
  5. useMemo
  6. позволяет использовать состояние в функциональном компоненте
  7. выполняет побочные эффекты после рендеринга компонента
  8. предоставляет доступ к значению React Context
  9. создаёт изменяемый объект, который сохраняется между рендерами
  10. мемоизирует результат вычислений, чтобы избежать повторных расчётов
Вопрос 89

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

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

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

  1. Let
  2. Const
  3. Defer
  4. For...of
  5. NaN
  6. объявление переменной с блочной областью видимости; значение можно менять, повторное объявление в той же области запрещено
  7. объявление константы; попытка переназначения вызывает ошибку
  8. атрибут тега ˂script˃, откладывающий выполнение файла до завершения разбора HTML (HyperText Markup Language)
  9. цикл для перебора значений итерируемых объектов; предпочтителен для массивов, когда индекс не нужен
  10. специальное числовое значение «не число», результат некорректной операции
✓ Правильный ответ

Let = объявление переменной с блочной областью видимости; значение можно менять, повторное объявление в той же области запрещено ; Const = объявление константы; попытка переназначения вызывает ошибку ; Defer = атрибут тега ˂script˃, откладывающий выполнение файла до завершения разбора HTML (HyperText Markup Language) ; For...of = цикл для перебора значений итерируемых объектов; предпочтителен для массивов, когда индекс не нужен ; NaN = специальное числовое значение «не число», результат некорректной операции

Вопрос 91

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

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

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

  1. ˂script src="app.js" defer˃ в ˂head˃
  2. ˂script src="app.js"˃ в ˂head˃
  3. ˂script src="app.js" async˃ в ˂head˃
  4. встроенный ˂script˃...˂/script˃ в ˂head˃
Вопрос 93Ответ открыт бесплатно

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

  1. var
  2. let
  3. const✓ Правильный ответ
  4. defer
✓ Правильный ответ

const

Вопрос 94

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

  1. NaN
  2. Nan
  3. nan
  4. NAN
Вопрос 95

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

  1. true
  2. false
  3. возврат числа 5
  4. возврат строки "5"
Вопрос 96Ответ открыт бесплатно

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

  1. объявить переменную внутри case
  2. предотвратить «проваливание» выполнения в следующий case✓ Правильный ответ
  3. сравнение было нестрогим
  4. выйти из всей программы
✓ Правильный ответ

предотвратить «проваливание» выполнения в следующий case

Вопрос 97

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

  1. for...in
  2. for...of
  3. while
  4. do...while
Вопрос 98

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

  1. Declaration
  2. declaration
Вопрос 99

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

  1. Promise.then(...)
  2. queueMicrotask(...)
  3. setTimeout(...)
  4. new Promise(...)
Вопрос 100Ответ открыт бесплатно

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

  1. Подключить ˂script src="app.js"˃ в ˂head˃, а в HTML (HyperText Markup Language) прописать onclick="handleOrder()"
  2. Подключить ˂script src="app.js" defer˃ в ˂head˃, а в app.js выполнить: document.querySelector('#orderBtn').addEventListener('click', handleOrder)✓ Правильный ответ
  3. Подключить ˂script src="app.js" async˃ в ˂head˃, а в app.js сразу выбрать элемент и навесить обработчик
  4. Подключить ˂script src="app.js"˃ сразу после тега ˂header˃, а обработчик добавить в app.js без ожидания готовности DOM (Document Object Model)
✓ Правильный ответ

Подключить ˂script src="app.js" defer˃ в ˂head˃, а в app.js выполнить: document.querySelector('#orderBtn').addEventListener('click', handleOrder)

О материалах и доступе

Что входит в набор «Разработка web-приложений на языке JavaScript.dor_БАК_25-233-Б»?

100 вопросов с вариантами из опубликованных тестов (6). Сверьте формулировки и варианты с вашим заданием перед покупкой: разные программы могут содержать разные вопросы.

Какие ответы можно посмотреть бесплатно?

Нажмите «Показать ответы бесплатно»: после завершения индикатора откроется бесплатная часть ответов. Бесплатные ответы отмечены зелёным. При нескольких правильных вариантах отмечены все варианты из ключа ответа. Остальные ответы доступны после покупки.

Как получить полный доступ?

Стоимость — 2 499 ₽. Войдите в личный кабинет и оплатите выбранный предмет. Доступ действует 7 дней; подписки и автоматических списаний нет.

Что делать, если обнаружена ошибка?

Напишите нам и пришлите номер заказа, формулировку вопроса и подтверждение ошибки. Гарантия: 1 ошибка — вернём деньги.

Связаться с АртемХелп · Условия покупки · Политика конфиденциальности