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
Сколько элементов будет в объектах elems1 и elems2 в результате выполнения этого кода и почему?

elems1.length == 3;
elems2.length == 2;

По сути оба метода представляют собой поиск элементов в документе. В данном случае ссылок. Однако метод getElementsByTagName() возвращает так называемую "живую коллекцию" элементов, т.е. при каждом вызове он снова выполняет поиск и в коллекцию добавляются элементы, которые появились в документе уже после присвоения.
Метод querySelectorAll() выполняет поиск единожды и, на момент присвоения, находит только два элемента "а". Если же выполнить поиск этим методом после создания нового элемента, querySelectorAll() вернет соответствующую истине коллекцию с тремя элементами.

👉 @frontendInterview
Какое значение примет result?
Anonymous Quiz
53%
true
47%
false
Когда при проверке несуществующего поля в каком-либо объекте на null будет выдано сообщение true?

Результатом будет
 false
true
true
true

Так как поле wiper не объявлено в объекте window.
А оператор === проверяет более строго, учитывая тип переменной, который в данном случае undefined.

👉 @frontendInterview
Sort and Star

Вам дан массив строк. Отсортируйте их в алфавитном порядке и верните первую строку. Между каждой буквой в возвращенной строке должны быть "***"

Пример:
twoSort(["bitcoin", "take", "over", "the", "world", "maybe", "who", "knows", "perhaps"])

результат
'b***i***t***c***o***i***n'

👉 @frontendInterview
В чём различие свойств innerHTML и outerHTML?

Свойство innerHTML содержит HTML код, который находится внутри этого элемента. При установке нового значения этого свойства, внутренний HTML код рендерится браузером заново.
outerHTML почти аналогичен innerHTML, разница в том, что он возвращает полный HTML элемента.

Для кода:
 <div class='outer'> 
<p class='inner'></p>
</div>
innerHTML возвратит:
 <p class='inner'></p>
outerHTML возвратит:
<div class='outer'><p class='inner'></p></div>

👉 @frontendInterview
Зачем нужны регулярные выражения?

1. Сравнение с шаблоном: Регулярные выражения отлично помогают определять, соответствует ли строка тому или иному формату – например, телефонному номеру, адресу электронной почты или номеру кредитной карты.

2. Замена: При помощи регулярных выражений легко находить и заменять шаблоны в строке. Так, выражение text.replace(/s+/g, " ") заменяет все пробелы в text, например, " nt ", одним пробелом.

3. Извлечение: При помощи регулярных выражений легко извлекать из шаблона фрагменты информации. Например, name.matches(/^(Mr|Ms|Mrs|Dr)\.?s/i)[1] извлекает из строки обращение к человеку, например, "Mr" из "Mr. Schropp".

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

👉 @frontendInterview
Размер картинки image.png = 256x256px

Какова ширина background image элемента div?
Anonymous Quiz
13%
100px
51%
200px
34%
256px
2%
400px
Пояснение

Значения для свойства background-size можно задавать при помощи ключевых слов. В данном случае используется ключевое свойство contain.

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

👉 @frontendInterview
Что такое webpack?

Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл «index.html».

Обычно, при создании приложения на JavaScript, код разделяется на несколько частей (модулей). Затем в файле «index.html» необходимо указать ссылку на каждый скрипт.

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

Сбор модулей является лишь одним из аспектов работы вебпака. При необходимости можно заставить вебпак осуществить некоторые преобразования модулей перед их добавлением в бандл. Например, преобразование SASS/LESS в обычный CSS, или современного JavaScript в ES5 для старых браузеров.

👉 @frontendInterview
Как устроен JavaScript

Большинство языков программирования выросли из древней парадигмы, порожденной еще во времена Фортрана. Гуру Javanoscript — Дуглас Крокфорд — выкорчевывает эти засохшие корни, позволяя нам задуматься над будущим программирования, перейдя на новый уровень понимания требований к Следующему Языку (The Next Language). Автор начинает с основ: имен, чисел, логических значений, символов и другой базовой информации. Вы узнаете не только о проблемах и трудностях работы с типами в JavaScript, но и о том как их можно обойти. Затем вы приступите к знакомству со структурами данных и функции, чтобы разобраться с механизмами, лежащими в их основе, и научитесь использовать функции высшего порядка и объектно-ориентированный стиль программирования без классов.

👉 @frontendInterview
Vowel Changer

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

Примеры:
("hannah hannah bo-bannah banana fanna fo-fannah fee, fy, mo-mannah. hannah!",'i') => 'hinnih hinnih bi-binnih binini finni fi-finnih fii, fy, mi-minnih. hinnih!'

('adira wants to go to the park', 'o') =>'odoro wonts to go to tho pork'


👉 @frontendInterview
Профессиональный TypeScript

Любой программист, работающий с языком с динамической типизацией, подтвердит, что задача масштабирования кода невероятно сложна и требует большой команды инженеров. Вот почему Facebook, Google и Microsoft придумали статическую типизацию для динамически типизированного кода.
Работая с любым языком программирования, мы отслеживаем исключения и вычитываем код строку за строкой в поиске неисправности и способа ее устранения. TypeScript позволяет автоматизировать эту неприятную часть процесса разработки.
TypeScript, в отличие от множества других типизированных языков, ориентирован на прикладные задачи. Он вводит новые концепции, позволяющие выражать идеи более кратко и точно, и легко создавать масштабируемые и безопасные современные приложения.
Борис Черный помогает разобраться со всеми нюансами и возможностями TypeScript, учит устранять ошибки и масштабировать код.

👉 @frontendInterview