🔹 Блок 3: JavaScript — события, ошибки, DOM и цепочки
21. 📌 Какие способы работы с асинхронным кодом вы знаете?
💬 Простыми словами:
Асинхронный код — это код, который не блокирует выполнение программы, а "ждёт" завершения операции (например, загрузки данных).
🛠 Основные способы:
- Callback — функция, переданная в другую функцию для выполнения позже.
- Promise — объект, отражающий результат асинхронной операции.
- async/await — современный синтаксис для работы с Promise.
🧪 Примеры:
// callback
setTimeout(() => console.log('через секунду'), 1000);
// promise
fetch('/api').then(res => res.json()).then(data => console.log(data));
// async/await
async function load() {
const res = await fetch('/api');
const data = await res.json();
console.log(data);
}
💡 Полезно знать:
Промисы и async/await помогают избежать "callback hell" — вложенных уровней коллбеков.
22. 📌 Что делают e.preventDefault() и e.stopPropagation()?
💬 Простыми словами:
- preventDefault() — отменяет стандартное действие браузера (например, переход по ссылке).
- stopPropagation() — останавливает распространение события вверх по DOM-дереву.
🧪 Пример:
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault(); // форма не отправляется
console.log('Форма перехвачена');
});
document.querySelector('button').addEventListener('click', (e) => {
e.stopPropagation(); // не пойдёт к родителям
});
💡 Полезно знать:
События проходят 3 фазы: погружение, таргет, всплытие.
23. 📌 Как обрабатывать ошибки в JavaScript?
💬 Простыми словами:
Ошибки можно перехватывать, чтобы приложение не падало и выдавало понятные сообщения.
🛠 Синтаксис:
try {
// потенциально опасный код
} catch (error) {
// обработка ошибки
} finally {
// выполняется всегда
}
🧪 Пример:
try {
const data = JSON.parse('не JSON');
} catch (e) {
console.error('Ошибка разбора JSON:', e.message);
} finally {
console.log('Готово');
}
💡 Полезно знать:
Ошибки в async функциях нужно ловить через try...catch.
24. 📌 Что такое DOM-дерево?
💬 Простыми словами:
DOM (Document Object Model) — это дерево всех HTML-элементов на странице. JavaScript может читать и изменять его.
🛠 В дереве:
- Каждый тег — узел
- Вложенные элементы — дети
- Текст тоже — отдельный узел
🧪 Пример:
<div>
<p>Hello</p>
</div>
→ DOM:
div
└── p
└── "Hello"
💡 Полезно знать:
DOM-дерево создаётся браузером при загрузке страницы. Его можно изменять на лету.
25. 📌 Что такое event loop?
💬 Простыми словами:
event loop — механизм, который управляет очередностью выполнения кода, колбеков, промисов и отложенных задач.
🛠 Принцип:
- Основной поток обрабатывает код
- Отложенные задачи (setTimeout, fetch) отправляются в очередь
- Когда стек вызовов пуст, event loop достаёт задачи из очереди
🧪 Схематично:
console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
Вывод:
1
4
3
2
💡 Полезно знать:
Промисы обрабатываются в микрозадачах, а таймеры — в макрозадачах.
26. 📌 Что такое прототипное наследование?
💬 Простыми словами:
В JavaScript объекты могут "наследовать" свойства и методы друг у друга через прототипы.
🛠 Как это работает:
- Каждый объект ссылается на другой объект — прототип
- Если свойство не найдено, поиск идёт вверх по цепочке прототипов
🧪 Пример:
const animal = { canMove: true };
const dog = Object.create(animal);
console.log(dog.canMove); // true — унаследовано от animal
💡 Полезно знать:
Все объекты в JS в итоге наследуются от Object.prototype.
27. 📌 Как получить значение свойства объекта?
💬 Простыми словами:
Есть два способа достать значение из объекта.
🛠 Способы:
- Через точку: obj.key
- Через скобки: obj['key'] — когда имя переменной динамическое
🧪 Пример:
const user = { name: 'Анна', age: 22 };
console.log(user.name); // Анна
console.log(user['age']); // 22
const field = 'name';
console.log(user[field]); // Анна
💡 Полезно знать:
Если использовать переменную — только скобки.
28. 📌 Что такое всплытие и погружение событий?
💬 Простыми словами:
Когда вы кликаете по элементу, событие сначала проходит вниз (погружение), затем вверх (всплытие).
🛠 Этапы события:
- Погружение (capture) — сверху вниз
- Цель (target) — сам элемент
- Всплытие (bubble) — снизу вверх
🧪 Пример:
div.addEventListener('click', () => console.log('div'), true); // capture
p.addEventListener('click', () => console.log('p')); // bubble
💡 Полезно знать:
По умолчанию события отслеживаются на фазе всплытия.
29. 📌 Что такое optional chaining (?.)?
💬 Простыми словами:
Это безопасный способ доступа к вложенным свойствам, которые могут не существовать.
🛠 Синтаксис:
obj?.prop?.subprop
🧪 Пример:
const user = { profile: null };
console.log(user.profile?.name); // undefined, ошибки нет
💡 Полезно знать:
Работает и для вызова функций:
user?.sayHi?.(); // вызов, если функция существует
30. 📌 Что такое Shadow DOM?
💬 Простыми словами:
Shadow DOM — это способ создать инкапсулированную часть DOM, скрытую от внешнего мира.
🛠 Применяется для:
- Web Components
- Защиты стилей от внешнего влияния
🧪 Пример:
const shadow = element.attachShadow({ mode: 'open' });
shadow.innerHTML = `<style>:host { color: red; }</style><p>Привет!</p>`;
💡 Полезно знать:
Стили и скрипты внутри Shadow DOM не видны извне и не влияют на внешний DOM.