Front Interview | Подготовка к собеседованию
2.01K subscribers
267 photos
2 videos
38 links
У нас ежедневно выходят разборы задач с подробным объяснением для подготовки к собеседованию


Мы поможем подготовиться к трудоустройству в компанию мечты!
Download Telegram
Объясните, что такое всплытие событий (event bubbling)

При наступлении события, обработчики сначала срабатывают на самом вложенном элементе, затем на его родителе, затем выше и так далее, вверх по цепочке вложенности.
Всплытие событий является механизмом, на котором основано делегирование событий.

#вопросы_по_javascript
👍84🔥3
Как вы обеспечиваете отображение страниц в браузерах с ограниченными возможностями? Какие приёмы/процессы вы при этом используете?

- autoprefixer
- «Graceful degradation»
- «Progressive enhancement»

#вопросы_по_css
4👍2
Какие ограничения накладываются на поток Web Worker?

Потоки web worker не могут изменять HTML элементы, глобальные переменные и некоторые свойства окон, такие как window.location. Вы можете использовать типы данных javascript, вызовы XMLHttpRequest и прочее.

#вопросы_по_html
👍51🔥1
Объясните, почему это не является IIFE: function foo(){ }();

В этом примере будет выведено исключение SyntaxError, в данном случае это объявление функции и скобки в конце не будут отнесены к функции, так как они играют роль оператора группировки. Такие скобки не могут быть пустыми, поэтому будет выброшено исключение. Для того чтобы переделать этот пример под немедленно вызываемую функцию - нужно обернуть функциональное выражение в скобки и удалить именование функции.

#вопросы_по_javascript
👍111🔥1
На что нужно обратить внимание при написании эффективного CSS?

Для написания эффективного CSS должна быть система. БЭМ, RSCSS, OOCSS - кому что больше подходит. Самая популярная методология - БЭМ. У каждого элемента уникальный класс, все элементы имеют одинаковую специфичность. Код можно переиспользовать.

#вопросы_по_css
🔥9👍31
Расскажите о концепции локального хранилища в HTML5

Часто нам нужно хранить информацию о пользователе на его локальном компьютере. Допустим, пользователь наполовину заполнил большую форму, и неожиданно пропадает интернет соединение.
Поэтому хорошо было бы хранить эту информацию локально у пользователя, а когда интернет соединение восстановится, пользователь использовал бы её и отправил на сервер.
Современные браузеры имеют хранилище, называемое «Локальным хранилищем» («Local storage»), где вы можете хранить эту информацию.

#вопросы_по_html
👍10🔥31
В чём разница между host-объектами и нативными объектами?

- Собственные объекты: Object (конструктор), Date, Math, parseInt, eval, строковые методы, такие как indexOf и replace, методы массивов и т.д. - основные предопределённые объекты, всегда доступные в JavaScript.
- Объекты хоста (при условии среды браузера): window, document, location, history, XMLHttpRequest, setTimeout, getElementsByTagName, querySelectorAll и т.д. - Они отличаются от встроенных объектов, потому что не все окружения будут иметь одни и те же объекты хоста.

#вопросы_по_javascript
👍111🔥1
В чём разница между относительным, фиксированным, абсолютным и статически позиционированным элементом?

- static
- значение по умолчанию. Свойства top, right, bottom, left и z-index не применяются.
- relative - элемент выстраивается относительно самому себе без изменения разметки.
- absolute - элемент выдёргивается из потока и выстраивается относительно ближайшего элемента-предка с position: relative. Если его нет, то относительно body. Абсолютно спозиционированные элементы могут иметь margin и padding и не схлопываются с margin и padding других элементов. Никак не влияют на другие элементы.
- fixed - элемент выдёргивается из потока и остаётся на позиции относительно окна документа и не меняет положение при скроле.
- sticky - смесь relative и fixed. Элемент ведёт себя как относительно спозиционированный, пока не достигнет заданной позиции, после которой ведёт себя как fixed элемент.

#вопросы_по_css
👍212🔥2
Что такое кэш приложения в HTML5?

Одной из наиболее востребованных функций для конечного пользователя является работа в автономном режиме. Другими словами, если соединение с интернетом недоступно, страница должна возвращаться из кэша браузера, и кэш приложения поможет вам в этом.

Кэш приложения помогает вам определить, какие файлы должны быть кэшированы, а какие нет.

#вопросы_по_html
👍5🔥21
Каким образом можно обмениваться кодом между файлами?

Это зависит от среды выполнения JavaScript. На клиенте (в среде браузера), пока переменные/функции объявлены в глобальной области видимости (window), все скрипты могут на них ссылаться. В качестве альтернативы, используйте Asynchronous Module Definition (AMD) через RequireJS для модульного подхода.

На сервере (Node.js) обычно используется CommonJS. Каждый файл считается модулем, и он может экспортировать переменные и функции, добавляя их к объекту module.exports.

ES2015 позволяет использовать модульный синтаксис, который призван заменить как AMD, так и CommonJS. В конечном итоге он будет поддерживаться как в браузере, так и в Node.

#вопросы_по_javascript
👍42🔥1
Как можно установить свойство opacity для элемента span, который следует прямо за элементом input?

Использовать смежный (+):

input + span {
opacity: 0.24;
}

#вопросы_по_css
🔥17👍31
Обязательно ли писать alt в <img>?

Да. Этого требует стандарт, да и здравый смысл, т.к. некоторые пользователи все еще отключают картинки, а некоторые используют текстовые или даже голосовые браузеры. Если картинка не несет никакой смысловой нагрузки (элемент дизайна, “распорка” и т.п.), то можно поставить в тег <img> значение alt="".

#вопросы_по_html
👍7🔥32
В чём разница между «атрибутом» (attribute) и «свойством« (property)?

Атрибуты определены в разметке HTML, а свойства определены в DOM. Большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов. Но они не идентичны.

Атрибуты:
Всегда являются строками.
Их имя нечувствительно к регистру.
Видны в innerHTML.

Свойства:
Могут иметь любое значение.
Названия свойств чувствительны к регистру.
Работают за счёт того, что DOM-узлы являются объектами JS.

#вопросы_по_javascript
👍9🔥21
Какие новые псевдоклассы добавлены в CSS3?

(1) elem: nth-child (n) выбирает n-й дочерний элемент под родительским элементом, и метка этого дочернего элемента - elem, n может принимать определенные значения или функции.
(2) elem: nth-last-child (n) выполняет ту же функцию, что и выше, но выполняет поиск сзади.
(3) elem: last-child выбирает последний дочерний элемент.
(4) elem: only-child Если elem является единственным дочерним элементом родительского элемента, выберите его.
(5) elem: nth-of-type (n) Выберите элемент n-го типа под родительским элементом. N может принимать определенные значения или функции.
(6) elem: first-of-type выбирает первый элемент типа elem под родительским элементом.
(7) elem: last-of-type выбирает последний элемент типа elem под родительским элементом.

#вопросы_по_css
👍6🔥3
Что такое entities?

Entities – это комбинации знака & и буквенного или цифрового кода после нее, предназначенные для замещения символов, которые не могут встречаться в "чистом" виде в HTML-тексте, например, символа "<".

#вопросы_по_html
👍102🔥1
Допишите функцию так, чтобы этот код работал: duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]

function duplicate(arr) {
return arr.concat(arr) // concat объединяет два массива, в данном случае объединяем один и тот же массив в один
}

duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]

#вопросы_по_javascript
👍162🔥1
Почему таблицы стилей CSS называются каскадными?

Слово "каскадные" говорит о том, что на вывод каждого тега в документе могут оказывать влияние сразу несколько стилевых спецификаций, образующих иерархическую систему. Например, поверх спецификаций, относящихся к конкретному документу, может действовать стилевой файл, общий для всех документов на сервере.

#вопросы_по_css
👍10🔥51
Что такое теги якоря?

Теги якоря используются для создания гиперссылок. Эти ссылки создают в уже существующей части контента (текста). Всего существует три типа якорей – активные, посещённые и непосещённые.

#вопросы_по_html
👍6🔥21
В чем разница между .call и .apply?

Сходство заключается в том, что и .call, и .apply используются для вызова функций, а также первый параметр будет использоваться как значение this внутри функции. А разница в том, что .call в качестве слудующих аргументов принимает аргументы, разделенные запятыми, в то время как .apply в качестве следующих аргументов принимает массив аргументов.

function add(a, b) {
return a + b;
}
console.log(
add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3

#вопросы_по_javascript
👍41🔥1
Что такое псевдокласс :root?

:root — псевдокласс, которые отбирает корневой элемент в дереве документа. В случае HTML документа это элемент html. В случае SVG документа это элемент svg.

#вопросы_по_css
👍123🔥2
Расскажите про тег IFRAME?

Тег IFRAME в основном используется для встраивания документов в HTML-документ. Однако последние разработки в HTML 5 лишили поддержки тега IFRAME, поэтому вам следует избегать его использования.

#вопросы_по_html
👍71