Frontend Interview - собеседования по Javascript / Html / Css
10.2K subscribers
2.09K photos
117 videos
320 files
494 links
Канал для подготовки к собеседованиям по фронтенду

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/frontendinterview

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
Что такое data-атрибуты, и привести примеры, когда они полезны?

data - атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML
любой атрибут, чьё имя начинается с data-, является data - атрибутом
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
</article>
Чтобы получить data-атрибут можно взять свойство объекта dataset с именем, равным части имени атрибута после data- (обратите внимание, что дефисы в имени преобразуются в camelCase).
var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
Каждое свойство является строкой и может быть прочитано и записано.

Также можно использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:
 article[data-columns='3']{ width: 400px; }
article[data-columns='4']{ width: 600px; }
Напишите функцию, которая будет обрабатывать url, удаляя в нем всё после знака #

Примеры:

// returns 'www.codewars.com'
removeUrlAnchor('www.codewars.com#about')

// returns 'www.codewars.com?page=1'
removeUrlAnchor('www.codewars.com?page=1')
Какой HTML атрибут устанавливает inline стили?
Anonymous Quiz
10%
styles
2%
styleName
9%
class
76%
style
2%
className
Что такое doctype и зачем он нужен?

Элемент <!doctype> — DTD (document type definition, описание типа документа) указывает тип документа, который используется при написании html кода. Это непарный тег, который должен стоять самым первым в коде каждой страницы вашего сайта.

Директива doctype необходима, чтобы браузер понимал как обрабатывать текущую веб-страничку, так как существует несколько версий языка HTML, а еще имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), который похож на HTML, но различается с ним по синтаксису.

Поэтому если вы хотите, чтобы ваш сайт отображался одинаково красиво и ровно во всех популярных браузерах, то обязательно указывайте эту директиву с версией языка html, которую вы используете. Причем doctype следует указывать с общепринятыми правилами.
Какое значение примет result?
Anonymous Quiz
3%
2009
6%
262
87%
95
5%
TypeError
Для чего нужна директива use strict?

Режим strict (строгий режим), введенный в ECMAScript 5, позволяет использовать более строгий вариант JavaScript

Во первых, строгий режим делает невозможным случайное создание глобальных переменных.

Во-вторых, строгий режим заставляет присваивания, которые всё равно завершились бы неудачей, выбрасывать исключения.
 var undefined = 5; // выдаст TypeError

В-третьих, в строгом режиме попытки удалить неудаляемые свойства будут вызывать исключения (в то время как прежде такая попытка просто не имела бы эффекта):
 "use strict";
delete Object.prototype; // выдаст TypeError

В-четвёртых, строгий режим требует, чтобы все свойства, перечисленные в сериализованном объекте, встречались только один раз.
 "use strict"; var o = { p: 1, p: 2 }; // !!! синтаксическая ошибка

В-пятых, строгий режим требует, чтобы имена аргументов в объявлении функций встречались только один раз.
 function sum(a, a, c) { // !!! синтаксическая ошибка 
"use strict";
return a + a + c; // ошибка
Можно ли задавать отрицательные значение CSS свойству padding?
Anonymous Quiz
42%
Нет
58%
Да
Что такое тернарный оператор?

Условный (тернарный) оператор - единственный оператор в JavaScript, принимающий три операнда: условие, за которым следует знак вопроса (?), затем выражение, которое выполняется, если условие истинно, сопровождается двоеточием (:), и, наконец, выражение, которое выполняется, если условие ложно. Он часто используется в качестве укороченного варианта условного оператора if.

Синтаксис:
 let result = условие ? значение1 : значение2;
Какое значение примет result?
Anonymous Quiz
6%
97
50%
96
1%
-95
43%
95
«You Don’t Know JS» - серия из 6 книг, написанных Кайлом Симпсоном.

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

Пример:

Input:
 'alpha beta beta gamma gamma gamma delta alpha beta beta gamma gamma gamma delta'

Output:
 'alpha beta gamma delta'
«Eloquent Javascript» является одной из популярных книг в среде веб-разработчиков.

Эта книга состоит из 22 частей, раскрывающих все лучшее в JS на уровне от базового до среднего с указанием лучших приемов.

Прочтя эту книгу вы узнаете о разнообразных вещах, от базового синтаксиса и структуры данных в JavaScript до эффективности DOM и управления node.js для создания сервера.
Что делает оператор for..in? Какие имеются особенности при использовании этого оператора с массивами?

Цикл for...in проходит через перечисляемые свойства объекта. Он пройдёт по каждому отдельному элементу.

Синтаксис:
 for (variable in object) {...}

Замечание: for...in не следует использовать для массивов, где важен порядок индексов.

Индексы массива - это перечисляемые свойства с целочисленными именами, в остальном они аналогичны свойствам объектов.
Нет гарантии, что for...in будет возвращать индексы в конкретном порядке. Цикл for...in возвращает все перечисляемые свойства, включая имеющие нецелочислиненные имена и наследуемые.

Так как порядок прохода зависит от реализации, проход по массиву может не произойти в правильном порядке. Следовательно лучше с числовыми индексами использовать циклы forEach() или for...of, когда проходим по массивам, где важен порядок доступа к свойствам.
​Удаление элемента из массива (какие есть способы)

Удаление последнего элемента массива
 const fruits = ["Яблоко", "Банан", "Апельсин"]
const last = fruits.pop(); // удалим Апельсин (из конца)
// ["Яблоко", "Банан"];


Удаление первого элемента массива
const first = fruits.shift(); // удалим Яблоко (из начала)
// ["Банан"];

Удаление нескольких элементов, начиная с определённого индекса
arr.splice(str) – это универсальный «швейцарский нож» для работы с массивами. Умеет всё: добавлять, удалять и заменять элементы.
 arr.splice(index[, deleteCount, elem1, ..., elemN])
Он начинает с позиции index, удаляет deleteCount элементов и вставляет elem1, ..., elemN на их место. Возвращает массив из удалённых элементов.
 let arr = ["Я", "изучаю", "JavaScript"];
arr.splice(1, 1); // начиная с позиции 1, удалить 1 элемент
// осталось ["Я", "JavaScript"]

Метод arr.slice намного проще, чем похожий на него arr.splice.
Его синтаксис:
 arr.slice([start], [end])
Он возвращает новый массив, в который копирует элементы, начиная с индекса start и до end (не включая end). Оба индекса start и end могут быть отрицательными. В таком случае отсчёт будет осуществляться с конца массива.
 let arr = ["t", "e", "s", "t"];
alert( arr.slice(1, 3) ); // e,s (копирует с 1 до 3)
alert( arr.slice(-2) ); // s,t (копирует с -2 до конца)
Дан треугольник из последовательных нечетных чисел.

Напишите функцию, которая принимает номер строки в треугольнике и возвращает сумму элементов строки.

Пример
rowSumOddNumbers(1); // 1
rowSumOddNumbers(2); // 3 + 5 = 8