- PVSM.RU - https://www.pvsm.ru -
Автор статьи, перевод которой мы сегодня публикуем, приводит 15 вопросов, которые задавали на собеседованиях ему, и которые он задавал соискателям на должности фронтенд-разработчиков сам.
DOM (Document Object Model, объектная модель документа) — это программный интерфейс к HTML-документам. Этот интерфейс позволяет воздействовать на документ из скриптов, меняя его оформление, стили, содержимое. В DOM документ представлен в виде дерева узлов.
<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>
Мета-теги — это теги, находящиеся в теге страницы <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>
Идентификаторы (id
) уникальны. У элемента может быть только один идентификатор. На странице может присутствовать лишь один элемент с конкретным идентификатором.
Имена классов (class
) не являются уникальными. Один и тот же класс можно назначать множеству элементов. Элементу может быть назначено несколько классов.
Если некий стиль нужно применить к нескольким элементам страницы — эту задачу нужно решать с использованием классов.
В медиазапросах используется правило @media
, с помощью которого можно применять CSS-стили к различным типам содержимого. Медиазапросы могут использоваться и для настройки элементов страниц с учётом характеристик среды, в которой просматривают страницы.
/* Изменить фоновый цвет любого элемента <div> на "red" в том случае, если ширина окна браузера составляет 600px или меньше */
@media only screen and (max-width: 600px) {
div {
background-color: red;
}
}
В CSS псевдоклассы используются для описания стилей элементов, находящихся в особых состояниях. Псевдоклассы можно использовать совместно с CSS-селекторами для настройки внешнего вида элементов на основе их состояний.
Вот пример:
/*
Любой элемент <a>, на который пользователь наведёт указатель мыши, будет окрашен в цвет green.
*/
a:hover {
color: green;
}
/* Выбирает все посещённые элементы <a> и окрашивает их в цвет purple.*/
a:visited {
color: purple;
}
Если вас спросят о том, можете ли вы назвать какие-нибудь псевдоклассы, то вот [2] страница с их большим списком.
PUT-запросы приводят к замене целевого ресурса на данные, передаваемые в запросе. Его можно использовать для обновления содержимого существующего ресурса или для создания нового ресурса.
POST-запросы приводят к специфической для ресурса обработке данных, передаваемых в запросе. Их можно использовать для выполнения различных действий. В том числе — для создания новых ресурсов, для выгрузки файлов на сервер, для отправки форм.
Ещё одно отличие между PUT- и POST-запросами заключается в том, что PUT-запросы являются идемпотентными, а POST-запросы — нет. То есть — если запрос, в котором передаются одни и те же данные, и который выполняется по одному и тому же URL, будет выполнен несколько раз, это равносильно однократному выполнению этого запроса. Многократное выполнение POST-запроса не эквивалентно его однократному выполнению. То есть — несколько таких запросов, например, могут привести к созданию нескольких объектов на сервере.
Локальное хранилище, как можно понять из его названия, это место, которое браузеры могут использовать для локального хранения данных. В нём может храниться до 10 Мб данных. Сессионное хранилище — это разновидность локального хранилища, которое привязано к сессии и удаляется после её завершения. В сессионном хранилище может храниться до 5 Мб данных.
Куки-файлы используются для хранения небольших объёмов данных, не превышающих 4 Кб. Ими может пользоваться браузер, их может запрашивать у браузера сервер.
CORS (Cross-Origin Resource Sharing, совместное использование ресурсов между разными источниками) — это браузерный механизм, который позволяет предоставлять страницам доступ к ресурсам, расположенным за пределами некоего домена. Это расширяет возможности страниц и добавляет гибкости политике одинакового источника (same-origin policy).
Промисы — это объекты, которые используются в JavaScript при выполнении асинхронных операций. Они упрощают работу с асинхронными операциями и дают более удобные механизмы обработки ошибок, чем коллбэки и события.
Промис может пребывать в одном из трёх состояний:
Поднятие переменных и функций (hoisting) — это перемещение их объявлений в верхнюю часть их области видимости (глобальной области видимости или области видимости функции).
В JavaScript ложными являются значения, которые, при преобразовании их к логическому типу, становятся значениями false
. Это — следующие значения:
Вопросы, которыми я с вами поделился, задавали на собеседованиях мне. Я задавал их на собеседованиях другим разработчикам. Подобные вопросы, дополненные практическими заданиями, это — хороший способ проверки знаний кандидата на должность фронтенд-программиста.
Я думаю, что для подготовки к фронтенд-собеседованию стоит разобрать гораздо больше вопросов по JavaScript [3], чем приведено в этом материале. Разбор вопросов по TypeScript [4] тоже может оказаться очень кстати.
Если вы заявляете в резюме о том, что знакомы с каким-то фронтенд-фреймворком, это значит, что вам стоит подготовиться и к тому, что вам зададут вопросы на знание этого фреймворка.
Какие вопросы на собеседованиях по фронтенду задавали вам?
Автор: ru_vds
Источник [5]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/356879
Ссылки в тексте:
[1] Image: https://habr.com/ru/company/ruvds/blog/518512/
[2] вот: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
[3] вопросов по JavaScript: https://medium.com/javascript-in-plain-english/24-quick-fire-javascript-interview-questions-a71f78d03f08
[4] вопросов по TypeScript: https://medium.com/javascript-in-plain-english/top-19-frequently-asked-typescript-interview-questions-dac4ff30c017
[5] Источник: https://habr.com/ru/post/518512/?utm_source=habrahabr&utm_medium=rss&utm_campaign=518512
Нажмите здесь для печати.