Advanced JavaScript (2019)

Это практическое руководство, которое шаг за шагом проведет вас через JavaScript и его многочисленные особенности. Вы начнете с изучения того, как использовать синтаксис ES6, а затем поработаете с многими другими аспектами, которые может предложить современный JavaScript. Вы также изучите различные методы тестирования проектов JavaScript.
В заключительных главах вы познакомитесь с функциональным программированием и научитесь использовать его для создания своих приложений. Используя эту книгу в качестве руководства, вы также сможете разрабатывать API-интерфейсы с использованием Node.js и Express, создавать интерфейсы с помощью React / Redux и мобильные приложения с помощью React Native / Expo.

👉 @frontendInterview

Keypad horror

Есть два стандарта расположения цифр. 1 - Как на numpad в компьютерной клавиатуре, 2 - как в телефоне.

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

Пример:
"789" -> "123"

👉 @frontendInterview

Что такое Модуль Math в JS?

Math — это объект, хранящий в себе различные математические константы (например число π) и функции типа вычисления квадратного корня. Обычно используется для генерации случайных чисел или округления значений.

Для использования констант из объекта Math достаточно просто их указать. Таких констант куча, поэтому при необходимости их нужно поискать в документации:

 console.log(Math.PI) // 3.141592653589793

Для вызова функций из объекта Math также достаточно просто их указать:
console.log(Math.abs(-118)) // 118

👉 @frontendInterview

👉 @frontendInterview

Как убрать фокус с DOM-элемента?

Вызов метода blur на DOM-элементе снимает фокус с элемента. Порождает событие blur, которое можно обработать с помощью addEventListener.

Метод blur не принимает аргументов:
const input = document.getElementById('myInput')
input.blur()

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

👉 @frontendInterview

👉 @frontendInterview

Как программно прокрутить окно до определённого элемента вне зависимости от положения элемента в окне?

Для этого можно использовать метод scrollIntoView.

 element = document.querySelector("#about") // в element должен быть любой DOM-элемент на странице
element.scrollIntoView()

У scrollIntoView может быть аргумент типа boolean:
- Если указать true, то скролл будет перемещён чтобы верхняя граница элемента совпала с верхней границей окна.
- Если указать false, то скролл остановится так, чтобы нижняя граница элемента была вровень с нижней границей окна.

Использовать scrollIntoView наиболее полезно в случаях длинных веб-страниц, где нужен скролл к определённым частям, а использования ссылок с якорями (например, <a href="#about">О нас</a>) недостаточно.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers (2019)

Visual Studio Code, бесплатный кросс-совместимый редактор исходного кода с открытым исходным кодом, является одним из самых популярных вариантов для веб-разработчиков. Он быстрый, легкий, настраиваемый и содержит встроенную поддержку расширений JavaScript, Typenoscript и Node.js для других языков, включая C++, Python и PHP. Такие функции, как возможность отладки, встроенный элемент управления Git, выделение синтаксиса, сниппеты кода и поддержка интеллектуального автозавершения кода IntelliSense помогают сделать Visual Studio Code впечатляющим готовым решением. Данная книга поможет вам освоиться и стать наиболее продуктивным в работе с VS Code.

👉 @frontendInterview

Сумма массивов

Вам даны два массива чисел. Необходимо просуммировать все числа этих двух массивов.

Примеры:
arrayPlusArray([1, 2, 3], [4, 5, 6]) => 21
arrayPlusArray([-1, -2, -3], [-4, -5, -6]) => -21
arrayPlusArray([0, 0, 0], [4, 5, 6]) => 15
arrayPlusArray([100, 200, 300], [400, 500, 600]) => 2100

👉 @frontendInterview

Как можно скрыть элемент разметки не используя CSS и JS?

Железобетонный способ скрыть элемент в тех случаях, когда не подходят opacity или visibility. В отличие от двух других способов этот применяется прямо в HTML-разметке. Не лучшая практика: влиять на внешний вид страницы через разметку, но иногда именно это и нужно. По сути, это display: none — именно так он описан в браузерных стилях.

<p hidden>
Этот текст будет невиден на странице. Хотя элемент в разметке будет!
</p>

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

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

👉 @frontendInterview

👉 @frontendInterview

Как семантически верно сверстать навигационное меню сайта?

Вот так выглядит простой блок <nav> со ссылками на разные разделы сайта. Мы использовали его с тегом <ul>, поскольку элементы меню однотипные по смыслу и связаны между собой:
<nav class="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>

В контейнер <nav> помещаются основные ссылки, по которым пользователь сможет быстро перейти на нужный раздел сайта.

<nav> — это один из ориентиров (landmark), которые скринридеры могут использовать для навигации по странице. То есть можно перейти прямо в блок навигации по сайту, это очень удобно.

👉 @frontendInterview

👉 @frontendInterview