JS Browser

Question 1

Что такое event.preventDefault?

Answer 1

Стандартный метод для отмены действия браузера

Question 2

Что такое всплытие события?

Answer 2

Когда событие срабатывает на элементе DOM, оно попытается обработать событие (если привязан обработчик), затем событие всплывет вверх к своему родителю и это повторится снова. Подобное всплытие проходит по всем предкам элемента вплоть до document. Всплытие событий является механизмом, на котором основано делегирование событий.

Question 3

Что такое event.stopPropagation()?

Answer 3

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

Question 4

Что такое setTimeout?

Answer 4

Вызывает функцию один раз через определённый интервал времени. Передавайте функцию, но не запускайте её.
function sayHi(phrase, who) {
alert( phrase + ‘, ‘ + who );
}

setTimeout(sayHi, 1000, “Привет”, “Джон”);

Question 5

Какие события не всплывает?

Answer 5

Почти все всплывают, кроме focus и еще некоторых

Question 6

Как прекратить всплытие?

Answer 6

event.stopPropagation()

Question 7

Опиши 3 фазы прохода события

Answer 7

Фаза погружения (capturing phase) – событие сначала идёт сверху вниз.
Фаза цели (target phase) – событие достигло целевого(исходного) элемента.
Фаза всплытия (bubbling stage) – событие начинает всплывать.

Question 8

Что такое делегирование событий?

Answer 8

Назначение одного обработчика на общего предка, вместо назначения на каждого потомка

Question 9

Отличие coockie от localstorage?

Answer 9

local - место, которое браузеры могут использовать для локального хранения данных. В нём может храниться до 10 Мб.
session - разновидность локального хранилища, которое привязано к сессии и удаляется после её завершения. В сессионном хранилище может храниться до 5 Мб
Куки-файлы используются для хранения небольших объёмов данных, не превышающих 4 Кб. Ими может пользоваться браузер, они отправляются с каждым запросом в заголовках и сервер может устанавливать их посредством заголовка “Set-Cookie”.

Если вам не нужно отправлять данные с каждым HTTP-запросом на сервер, то в этом случае лучше использовать для хранения данных LocalStorage.

Question 10

Отличие статической и динамической коллекции? Примеры

Answer 10

querySelectorAll - стат, .т.е при манипуляции с DOM не изменяется, el.children - живой

Question 11

Что такое DOM?

Answer 11

Это объектная модель документа, которая представляет все содержимое страницы в виде объектов, которые можно менять.

Question 12

Как получить url из браузерной строки?

Answer 12

window.location

Question 13

Что такое CORS?

Answer 13

Cross-Origin Resource Sharing, совместное использование ресурсов между разными источниками) — это браузерный механизм, который позволяет предоставлять страницам доступ к ресурсам, расположенным за пределами некоего домена. Это расширяет возможности страниц и добавляет гибкости политике одинакового источника (same-origin policy).

Question 14

Как получить или изменить текстовое содержимое элемента?

Answer 14

el.innerText

Question 15

Kак получить или изменить стиль элемента?

Answer 15

el.style

Question 16

Как записать несколько стилей?

Answer 16

el.style.cssText=`color: red !important;
    background-color: yellow;
    width: 100px;
    text-align: center;
  `;

Но перезапишет все стили

Question 17

Отличие className и classList?

Answer 17

Если мы присваиваем что-то elem.className, то это заменяет всю строку с классами

Question 18

Как узнать содержит ли класс?

Answer 18

elem.classList.contains(“class”) – проверка наличия класса, возвращает true/false

Question 19

В каких случаях необходимо хранить данные в браузере? Примеры.

Answer 19

• сохранение состояния клиентского приложения, такого как текущий экран, введенные данные, пользовательские настройки и т. д.
• утилиты, которые обращаются к локальным данным или файлам и имеют строгие требования к конфиденциальности
• прогрессивные веб-приложения (PWA), которые работают в автономном режиме

Question 20

Что такое coockie?

Answer 20

В отличие от других механизмов хранения, файлы cookie (обычно) передаются между браузером и сервером при каждом HTTP-запросе и ответе. Оба устройства могут проверять, изменять и удалять данные cookie.

Question 21

Как отменить setTimeout?

Answer 21

var timeoutId = setTimeout(doHomeworkAlarm, 60000);
clearTimeout(timeoutId);

Question 22

Как вызвать функцию через повторно через промежуток?

Answer 22

Функция setInterval похожа на setTimeout, однако она вызывает переданную ей функцию повторно через определенные промежутки (интервалы) времени