JavaScript. Дополнительные уроки для начинающих (2022)

В книге 20 иллюстрированных уроков, более 20 практических упражнений на тему программирования веб-сценариев и 18 заданий для самостоятельной работы. Простым языком, кратко, наглядно рассказано о новых программных инструмен­тах, появившихся в последние годы в языке JavaScript.

👉 @frontendInterview

Определите дату по номеру дня

Напишите функцию, которая принимает номер дня и булевый аргумент isLeap, который определяет, високосный ли год.
Функция должна вернуть дату в строковом формате

Примеры:

 getDay(41, false)   =>  "February, 10" 
 getDay(60, false)   =>  "March, 1"

👉 @frontendInterview

Протокол HTTP

HTTP был разработан как протокол обмена данными между веб-сервером и веб-браузером.

Есть три главных объекта, которые обмениваются сообщениями:

- Клиент (user agent) — программа, которая отправляет запросы, получает и обрабатывает ответы от имени пользователя на устройстве пользователя, например, браузер.
- Сервер (веб-сервер) — программа, которая работает на сервере, принимает и обрабатывает запросы от клиента, а затем отправляет ответы клиенту. Этой программой является веб-сервер.
- Прокси (прокси-сервер) — программа, которая работает на сервере, пропускает через себя запросы и ответы и выступает в роли посредника между клиентом и сервером.

👉 @frontendInterview

👉 @frontendInterview

clip

С помощью свойства clip можно обрезать элемент, оставив видимой только его часть.

Возьмём изображение симпатичного домика и при помощи свойства clip обрежем часть картинки:
img {
clip: rect(auto 220px 150px auto);
}

👉 @frontendInterview

👉 @frontendInterview

Как устроен Dockerfile

Dockerfile — это текстовый файл, в котором описан рецепт создания образа Docker.

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

Инструкции записываются построчно. На первом месте указывается команда для Docker, которую нужно выполнить, а затем — список аргументов этой команды:

# Comment
INSTRUCTION arguments

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Mark Myers «A Smarter Way to Learn JavaScript»

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

👉 @frontendInterview

Arrays Similar

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

Примеры:
const arr1 = [1, 2, 2, 3, 4],
arr2 = [2, 1, 2, 4, 3],
arr3 = [1, 2, 3, 4],
arr4 = [1, 2, 3, "4"]

arraysSimilar(arr1, arr2);
// Should equal true

arraysSimilar(arr2, arr3);
// Should equal false

arraysSimilar(arr3, arr4);
// Should equal false

👉 @frontendInterview

Как работают веб-приложения?

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

Любое веб-приложение, если оно работает в браузере, работает на 3 основных технологиях: HTML, CSS и JS. Ещё есть WASM, но о нём в этой статье мы говорить не будем.
Все приложения, которыми вы пользуетесь в браузере: GoogleDocs, Notion, Яндекс.Карты, Spotify, YouTube — сделаны с помощью этих технологий.
Но любое сложное приложение — это не только картинка в браузере, это ещё и данные, которые пользователи используют или создают. Эти данные нужно уметь хранить, обрабатывать и выводить.
Хранением и обработкой данных обычно занимается сервер или бэкенд.
Бэкенд — область веб-технологий, работающих на сервере, а также внутренняя часть серверной системы, занимается обработкой данных.
А архитектура, в которой участвуют сервер (бэкенд) и клиент (браузер, фронтенд) называется клиент-серверной.

👉 @frontendInterview

👉 @frontendInterview

Фиктивные объекты и данные, моки, стабы

Среди фиктивных объектов можно выделить две группы: моки и стабы.

Стабы (англ. stub) заменяют объекты, но сами ничего не проверяют. Их реализация простая, а зачастую — даже ничего не делает вовсе. Стабы нужны, чтобы заменить собой зависимость в системе и упростить окружение для тестов.

Моки (англ. mock) тоже заменяют зависимости, но при этом позволяют проверять предположения. Они могут следить за вызовами методов, аргументами этих вызовов и т. д. Моки удобны при тестировании функций с побочными эффектами.

Фиктивные объекты можно представить как беговые дорожки, которые заменяют собой настоящий большой парк. Только стабы — это дорожки попроще: крутящаяся лента без дисплея и настроек; а моки — дорожки, которые следят за темпом, ускорением, сердцебиением и т.д.

👉 @frontendInterview