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

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

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

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
What is between?

Вам даны два числа: a и b, причем a < b. Создайте функцию, которая вернет массив целых чисел, находящихся в промежутке между этими числами, включая их самих.

Пример:
a = 1
b = 4
--> [1, 2, 3, 4]


👉 @frontendInterview
Как удалить элемент из массива в JavaScript?

Удаление последнего элемента массива
 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 до конца)


👉 @frontendInterview
Выведет ли TypeScript компилятор ошибку?
Anonymous Quiz
53%
Да
47%
Нет
👍2
Как работают методы push(), pop(), shift() и unshift() в JS?

Метод push() позволяет добавлять элементы в конец массива. Он модифицирует массив, и, после завершения работы, возвращает элемент, добавленный в массив.
let arr = [1, 2, 3, 4];
const pushed = arr.push(5);
console.log(arr);
// [1, 2, 3, 4, 5]
console.log(pushed);
// 5

Метод pop() удаляет из массива последний элемент. Он модифицирует массив и возвращает удалённый из него элемент.
let arr = [1, 2, 3, 4];
const popped = arr.pop();
console.log(arr);
// [1, 2, 3]
console.log(popped);
// 4

Метод shift() удаляет из массива первый элемент и возвращает его. Он тоже модифицирует массив, для которого его вызывают.
let arr = [1, 2, 3, 4];
const shifted = arr.shift();
console.log(arr);
// [2, 3, 4]
console.log(shifted);
// 1

Метод unshift() добавляет один или большее количество элементов в начало массива. Он, опять же, модифицирует массив. При этом, в отличие от трёх других рассмотренных здесь методов, он возвращает новую длину массива.
let arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);
console.log(arr);
// [5, 6, 7, 1, 2, 3, 4]
console.log(unshifted);
// 7


👉 @frontendInterview
Как работают методы find(), findIndex() и indexOf() в JS?

Метод find() возвращает первый элемент массива, соответствующий заданному критерию. Этот метод, найдя первый подходящий элемент, не продолжает поиск по массиву.
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 5);
console.log(found);
// 6

Метод findIndex() очень похож на find(), но он, вместо того, чтобы возвращать первый подходящий элемент массива, возвращает индекс такого элемента. Для того чтобы лучше понять этот метод — взгляните на следующий пример, в котором используется массив строковых значений.
const arr = ["Nick", "Frank", "Joe", "Frank"];
const foundIndex = arr.findIndex(el => el === "Frank");
console.log(foundIndex);
// 1

Метод indexOf() очень похож на метод findIndex(), но он принимает в качестве аргумента не функцию, а обычное значение. Использовать его можно в том случае, если при поиске нужного элемента массива не нужна сложная логика.
const arr = ["Nick", "Frank", "Joe", "Frank"];
const foundIndex = arr.indexOf("Frank");
console.log(foundIndex);
// 1


👉 @frontendInterview
Какое из CSS правил имеет большую специфичность?
Anonymous Quiz
14%
div p
55%
div > p
31%
У обоих одинаковая специфичность
Проектирование и разработка web-приложений. Введение в frontend и backend разработку на JavaScript
и node.js

Изложены основы работы с объектной моделью документа, положенной в основу динамического формирования и изменения содержимого HTML страниц, с помощью языка программирования JavaScript. Рассматриваются основы backend разработки web -приложений программирования на стороне сервера на платформе node.js.

👉 @frontendInterview
Reversed Words

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

Пример:
The greatest victory is that which requires no battle"
--> "battle no requires which that is victory greatest The"


👉 @frontendInterview
Что такое геттеры и сеттеры в JS?

Есть два типа свойств объекта - свойства-данные и свойства-аксессоры.
Свойства-аксессоры представлены методами: «геттер» – для чтения и «сеттер» – для записи. При литеральном объявлении объекта они обозначаются get и set:

Геттер срабатывает, когда obj.propName читается, сеттер – когда значение присваивается.

Например, у нас есть объект user со свойствами name и surname а также добавим свойство объекта fullName для полного имени, которое в нашем случае "John Smith".

let user = {
name: "John",
surname: "Smith",
get fullName() {
return ${this.name} ${this.surname};
}
};
alert(user.fullName);
// John Smith

Сеттер позволит нам изменять свойства объекта.

set fullName(value) {
[this.name, this.surname] = value.split(" ");
}

// set fullName запустится с данным значением
user.fullName = "Alice Cooper";

alert(user.name); // Alice
alert(user.surname); // Cooper


В итоге мы получили «виртуальное» свойство fullName. Его можно прочитать и изменить.
👍3
Какое значение width будет у элемента с классом .in?
Anonymous Quiz
15%
0px
5%
100px
77%
300px
3%
200px
Безопасные веб-шрифты

При создании сайта очень важно знать какие шрифты можно использовать а какие нет, это нужно знать как дизайнеру так и верстальщику.

Безопасные шрифты это шрифты которые установлены на большинство устройств, а значит достаточно прописать название шрифта чтоб браузер пользователя корректно его отобразил.

Список безопасных шрифтов:
Arial, Calibri, Helvetica, Segoe, Trebuchet MS, Georgia, Optima.
Больше безопасных шрифтов можно увидеть в Статье.

Инструменты для проверки
Если у вас возникли проблемы с выбором шрифта или вы хотите проверить, как будет выглядеть шрифт - эти ресурсы вам отлично подойдут.

fontpair - Там есть раздел, в котором можно посмотреть самые популярные шрифты, доступные в Google Fonts, и какие шрифты лучше всего сочетаются друг с другом.

Wordmark.it - дает вам мгновенный предварительный просмотр того, как ваш текст будет отображаться сразу на нескольких шрифтах.
👍1
Как работает контекст наложения в CSS?

В CSS блок имеет позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом.

Порядок, в котором дерево документа отрисовывается на экране, описывается с помощью контекста наложения.

Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде:

1. Корневой элемент <html>
2. Блочные элементы
3. float элементы
4. Строковые элементы
4. Позиционированные элементы

Свойство z-index создает новый контекст наложения. Оно изменяет порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства - opacity, filter, transform):

Корневой элемент <html>.
Позиционированные элементы с отрицательным значением z-index.
Блочные элементы, неплавающие и непозиционированные.
float элементы.
Строковые элементы.
Позиционированные элементы с z-index: 0; и z-index: auto;.
👍1