Frontend Interview - собеседования по Javanoscript / Html / Css – Telegram
Frontend Interview - собеседования по Javanoscript / Html / Css
11.4K subscribers
2.1K photos
118 videos
319 files
530 links
Канал для подготовки к собеседованиям по фронтенду

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

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

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
Наследуемо ли CSS свойство background?
Anonymous Quiz
41%
Да
59%
Нет
Какие преимущества и недостатки при использовании промисов вместо колбэков (callbacks)?

Преимущества
1. Помогает избежать “callback hell”, который может быть нечитаемым.
2. Упрощает написание последовательного удобочитаемого асинхронного кода с помощью .then().
3. Упрощает написание параллельного асинхронного кода с помощью Promise.all().
4. С использованием промисов можно избежать следующих проблем, которые возникают при использовании callback-функций:
a) Колбэк-функция была вызвана слишком рано
b) Колбэк-функция была вызвана слишком поздно (или вовсе не была вызвана)
c) Колбэк-функция была вызвана слишком мало или слишком много раз
d) Не удалось передать необходимую среду/параметры
e) Были пропущены ошибки/исключения

Недостатки
1) Чуть более сложный код (спорно).
2) В старых браузерах, где не поддерживается ES2015, вам нужно загрузить полифил, чтобы их использовать.

👉 @frontendInterview
Пояснение

Ключевое слово yield вызывает остановку функции-генератора и возвращает текущее значение выражения, указанного после ключевого слова yield. Его можно рассматривать как аналог ключевого слова return в функции-генераторе.

Метод next() возвращает объект с двумя свойствами done и value.

В данном примере вызов первого next возвращает значение c первой остановки в генераторе. В консоль выводится значение второго вызова next.

👉 @frontendInterview
Секреты CSS

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

👉 @frontendInterview
Расшифровка римских цифр

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

Римское число пишется так:
 1990 = "MCMXC" (1000 = M, 900 = CM, 90 = XC)
2008 = "MMVIII" (2000 = MM, 8 = VIII).

Расшифровка:
Symbol Value
I 1
V 5
X 10
L 50
C 100
D 500
M 1,000


👉 @frontendInterview
JavaScript с нуля

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

👉 @frontendInterview
В чём опасность использования for .. in для объекта или массива?

For..in итерируется по всем полям объекта и его прототипов (т.е. проходит по всей цепочке прототипов).

В приведённом в вопросе коде проблем как таковых нет, но они могут появиться при использовании библиотек/полифиллов, которые переопределяют или создают новые свойства для прототипов стандартных конструкторов (таких как Array или Object).

Пример:
 var arr = [3, 4, 5]; 
Array.prototype.each = function() {/*some fancy polyfill*/};

for (var i in arr) {
console.log(i);
}
Выведет
 0 
1
2
each
Чтобы избежать таких проблем, можно воспользоваться методом Object.prototype.hasOwnProperty.

Модифицированный пример, который работает корректно:

 var arr = [3, 4, 5]; 
Array.prototype.each = function() {/*some fancy polyfill*/};

for (var i in arr) {
if (arr.hasOwnProperty(i)){
console.log(i);
}
}

👉 @frontendInterview
Какие языковые конструкции в javanoscript создают scope? Что произойдет при выполнении куска кода с картинки?

В javanoscript только функции создают новый scope.

Код в вопросе аналогичен следующему:
 var a = 90100; 
function someFunc(){
var a;
var b;
if(false){
a = 1;
} else {
b = 2;
}
console.log(b);
console.log(a); //(1) переменную a переопределили в функции
}
someFunc();

Результат выполнения:
2
undefined


👉 @frontendInterview
Это число?

Напишите функцию, которая преобразует строку в число и вернет true, если полученный результат действительно является числом и false, если результат не валиден.

Примеры:
 isDigit("3")
isDigit(" 3 ")
isDigit("-3.23")
Вернут true

 isDigit("3-4")
isDigit(" 3 5")
isDigit("3 5")
isDigit("zero")
Вернут false

👉 @frontendInterview
Сколько значений можно передать в CSS свойство margin?
Anonymous Quiz
1%
1
1%
2
2%
3
53%
4
44%
Любое количество из перечисленных выше
Пояснение

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

👉 @frontendInterview
Что такое hoisting или "поднятие переменных"? Что произойдет при выполнении кода с картинки?

Интерпретатор JavaScript всегда перемещает («поднимает») объявления функций и переменных в начало области видимости (вверх текущего скрипта или функции). Код в вопросе аналогичен следующему:

 myname = "global"; 
function func() {
var myname;
console.log(myname); // "undefined"
myname = "local";
console.log(myname); // "local"
}
func();

В консоль будет напечатано:
undefined
local


👉 @frontendInterview
Как добавлять элементы на HTML страницу динамически ?

Создание новых элементов осуществляется с помощью document.createElement(tagName);

После создания элемента его нужно присоединить к родительскому элементу с помощью .appendChild(node);

Пример:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<noscript>Title</noscript>
<noscript type="text/javanoscript">
function addNode() {
var newP = document.createElement("p");
var textNode = document.createTextNode(" I'm a new text node");
newP.appendChild(textNode);
document.getElementById("target").appendChild(newP);
}
</noscript>
</head>
<body onload="addNode();">
<p id="target">sart here<p>
</body>
</html>


👉 @frontendInterview
Какое CSS свойство не может быть установлено с помощью сокращенного свойства background?
Anonymous Quiz
7%
background-color
71%
background-blend-mode
8%
background-size
5%
background-repeat
9%
background-position
В чем разница между Object.getOwnPropertyNames() и Object.keys()

Object.getOwnPropertyNames() возвращает перечислимые и не перечислимые свойства из объекта или массива.
Пример:
 var arr = ["a", "b", "c"]; 
print(Object.getOwnPropertyNames(arr).sort()); // prints "0,1,2,length"

// Array-like object
 var obj = { 0: "a", 1: "b", 2: "c"}; 
print(Object.getOwnPropertyNames(obj).sort()); // prints "0,1,2"

Object.keys() возвращает перечислимые свойства из объекта или массива.
Пример:
 var arr = ["a", "b", "c"]; 
alert(Object.keys(arr)); // will alert "0,1,2"

// array like object
var obj = { 0 : "a", 1 : "b", 2 : "c"};
alert(Object.keys(obj)); // will alert "0,1,2"


👉 @frontendInterview