Тесты СинергияАртём Хелп
Артём Help онлайнПолучить расчёт
Бесплатно оценим сроки и стоимостьОтправить задание в Telegram
Разработка web-приложений на языке JavaScript.dor_БАК_25-233-Б

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

Просмотрите все вопросы и варианты бесплатно. Правильные ответы скрыты и открываются только после получения доступа.

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

Вопросы и варианты

Без отметок и подсказок к правильным ответам

Вопрос 1

Вы разрабатываете форму регистрации. Нужно отправить данные на /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; }
Вопрос 2

Сервис получает массив заказов 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)
Вопрос 3

Вы реализуете список задач (˂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(); });
Вопрос 4

На странице есть форма поиска по каталогу (см. ниже): ˂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);
Вопрос 5

Вы делаете небольшую 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
Вопрос 6

Нужно за 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'ом
Вопрос 7

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

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

Вы начинаете новый проект и должны выбрать между 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. Оба инструмента идентичны по функциональности и производительности, разница только в названии