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

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

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

11 вопросов Вариант 2 Доступ 7 дней

Содержание теста

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

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

Вопрос 1

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

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

Вопрос 2

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

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

Вопрос 3

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

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

Вопрос 4

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

статический

Вопрос 5

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

node.delete()
node.remove()
document.remove(node)
parent.eraseChild(node)
element.destroy()

Вопрос 6

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

return false
event.stopPropagation()
event.preventDefault()
window.cancel()
link.href = '#'

Вопрос 7

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

elem.style
getComputedStyle(elem)
elem.currentStyle
window.stylesOf(elem)
CSS.get(elem)

Вопрос 8

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

session
Session

Вопрос 9

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

change
input
submit
keydown
paste

Вопрос 10

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

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

Вопрос 11

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

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