1. Что такое DOM?
DOM (Document Object Model, объектная модель документа) это программный интерфейс к HTML-документам. Этот интерфейс позволяет воздействовать на документ из скриптов, меняя его оформление, стили, содержимое. В DOM документ представлен в виде дерева узлов.
2. Какая разница между элементами <span> и <div>?
-
<span>это строчный (inline) элемент. -
<div>это блочный (block) элемент.
Элементы
<div> нужно использовать для оформления
разделов документа. А элементы <span> в роли
контейнеров для небольших объёмов текста, для изображений и других
подобных элементов страниц.Надо отметить, что нельзя помещать блочные элементы в строчные. Вот пример, в котором показано, кроме прочего, неправильное размещение блочного элемента внутри строчного (это фрагмент
<div>I'm illegal</div>, размещённый внутри
элемента <span>):
<div>Hi<span>I'm the start of the span element <div>I'm illegal</div> I'm the end of the span</span> Bye I'm the end of the div</div>
3. Что такое мета-теги?
Мета-теги это теги, находящиеся в теге страницы
<head> и описывающие содержимое страницы.
Мета-теги не выводятся на странице. Они имеются лишь в её коде.Их основная задача заключается в том, чтобы кратко описывать содержимое страниц поисковым системам. Вот пример:
<head><meta charset="UTF-8"><meta name="description" content="Description search engines use"><meta name="keywords" content="Keywords, of, your, page"><meta name="author" content="Me"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
4. Какая разница между селекторами идентификаторов и классов в CSS?
Идентификаторы (
id) уникальны. У элемента может быть
только один идентификатор. На странице может присутствовать лишь
один элемент с конкретным идентификатором.Имена классов (
class) не являются уникальными. Один и
тот же класс можно назначать множеству элементов. Элементу может
быть назначено несколько классов.Если некий стиль нужно применить к нескольким элементам страницы эту задачу нужно решать с использованием классов.
5. Как пользоваться медиазапросами в CSS?
В медиазапросах используется правило
@media, с помощью
которого можно применять CSS-стили к различным типам содержимого.
Медиазапросы могут использоваться и для настройки элементов страниц
с учётом характеристик среды, в которой просматривают страницы.
/* Изменить фоновый цвет любого элемента <div> на "red" в том случае, если ширина окна браузера составляет 600px или меньше */@media only screen and (max-width: 600px) {div {background-color: red;}}
6. Что такое псевдоклассы в CSS?
В CSS псевдоклассы используются для описания стилей элементов, находящихся в особых состояниях. Псевдоклассы можно использовать совместно с CSS-селекторами для настройки внешнего вида элементов на основе их состояний.
Вот пример:
/*Любой элемент <a>, на который пользователь наведёт указатель мыши, будет окрашен в цвет green.*/a:hover {color: green;}/* Выбирает все посещённые элементы <a> и окрашивает их в цвет purple.*/a:visited {color: purple;}
Если вас спросят о том, можете ли вы назвать какие-нибудь псевдоклассы, то вот страница с их большим списком.
7. Какая разница между следующими видами позиционирования элементов: относительное, фиксированное, абсолютное, статическое?
- Относительное позиционирование это когда элемент смещается относительно его положения, задаваемого по умолчанию.
- Фиксированное позиционирование это когда настраивают положение элемента, ориентируясь на края окна браузера.
- Абсолютное позиционирование это размещение элемента относительно ближайшего позиционированного родительского элемента, причём, именно там, где указано разработчиком.
- Статическое позиционирование это режим позиционирования, применяемый по умолчанию, при использовании которого элементы выводятся в том порядке, в котором они описаны в документе.
8. Чем отличаются PUT- и POST-запросы?
PUT-запросы приводят к замене целевого ресурса на данные, передаваемые в запросе. Его можно использовать для обновления содержимого существующего ресурса или для создания нового ресурса.
POST-запросы приводят к специфической для ресурса обработке данных, передаваемых в запросе. Их можно использовать для выполнения различных действий. В том числе для создания новых ресурсов, для выгрузки файлов на сервер, для отправки форм.
Ещё одно отличие между PUT- и POST-запросами заключается в том, что PUT-запросы являются идемпотентными, а POST-запросы нет. То есть если запрос, в котором передаются одни и те же данные, и который выполняется по одному и тому же URL, будет выполнен несколько раз, это равносильно однократному выполнению этого запроса. Многократное выполнение POST-запроса не эквивалентно его однократному выполнению. То есть несколько таких запросов, например, могут привести к созданию нескольких объектов на сервере.
9. В чём отличия технологии Long Polling, протокола WebSocket и событий, генерируемых сервером?
- Технология Long Polling применяется при взаимодействии клиентских и серверных систем. Клиент отправляет серверу запрос, ответ на который поступает тогда, когда в распоряжении сервера оказываются данные, запрошенные клиентом. После этого клиент выполняет новый запрос.
- Протокол WebSocket позволяет устанавливать долгоживущие двусторонние соединения между клиентом и сервером.
- В основе событий, генерируемых сервером, лежит использование долгоживущего HTTP-соединения, которое используется для отправки клиенту новых данных по инициативе сервера.
10. Чем отличаются куки-файлы, сессионное хранилище и локальное хранилище?
Локальное хранилище, как можно понять из его названия, это место, которое браузеры могут использовать для локального хранения данных. В нём может храниться до 10 Мб данных. Сессионное хранилище это разновидность локального хранилища, которое привязано к сессии и удаляется после её завершения. В сессионном хранилище может храниться до 5 Мб данных.
Куки-файлы используются для хранения небольших объёмов данных, не превышающих 4 Кб. Ими может пользоваться браузер, их может запрашивать у браузера сервер.
11. Что такое CORS?
CORS (Cross-Origin Resource Sharing, совместное использование ресурсов между разными источниками) это браузерный механизм, который позволяет предоставлять страницам доступ к ресурсам, расположенным за пределами некоего домена. Это расширяет возможности страниц и добавляет гибкости политике одинакового источника (same-origin policy).
12. Что такое промис?
Промисы это объекты, которые используются в JavaScript при выполнении асинхронных операций. Они упрощают работу с асинхронными операциями и дают более удобные механизмы обработки ошибок, чем коллбэки и события.
13. В каких состояниях может пребывать промис?
Промис может пребывать в одном из трёх состояний:
- Исполнено (fulfilled) операция, связанная с промисом, завершена успешно.
- Отклонено (rejected) операция, связанная с промисом, завершена с ошибкой.
- Ожидание (pending) промис находится в состоянии ожидания, то есть, о нём нельзя сказать, что он завершён успешно или с ошибкой.
14. Что такое поднятие переменных и функций в JavaScript?
Поднятие переменных и функций (hoisting) это перемещение их объявлений в верхнюю часть их области видимости (глобальной области видимости или области видимости функции).
15. Какие значения в JavaScript являются ложными?
В JavaScript ложными являются значения, которые, при преобразовании их к логическому типу, становятся значениями
false.
Это следующие значения:- ''
- 0
- null
- undefined
- NaN
- false
- -0
- 0n // значения типа BigInt, при преобразовании их к логическому типу, ведут себя так же, как значения типа Number
Итоги
Вопросы, которыми я с вами поделился, задавали на собеседованиях мне. Я задавал их на собеседованиях другим разработчикам. Подобные вопросы, дополненные практическими заданиями, это хороший способ проверки знаний кандидата на должность фронтенд-программиста.
Я думаю, что для подготовки к фронтенд-собеседованию стоит разобрать гораздо больше вопросов по JavaScript, чем приведено в этом материале. Разбор вопросов по TypeScript тоже может оказаться очень кстати.
Если вы заявляете в резюме о том, что знакомы с каким-то фронтенд-фреймворком, это значит, что вам стоит подготовиться и к тому, что вам зададут вопросы на знание этого фреймворка.
Какие вопросы на собеседованиях по фронтенду задавали вам?
