JS

Дату основания города принято считать с первого заложенного камня. Начало фронтенд проекта в 2020 можно считать с выполнения npm install. И точно так же, как и в бурно растущем городе, обрастающем как крупными проспектами, так и мелкими переулками, в проект попадают новые пакеты, за которыми следуют пакеты поновее. Вот только если местные жители знают каждую улочку рядом с домом, большинство из нас понятия не имеет, что попадает в папку node_modules/.

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

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

В этом туториале мы рассмотрим, как реализовать эффект drag & drop на ванильном JavaScript. Дословный перевод с английского — «потяни и брось» — отражает суть эффекта, это хорошо знакомое любому пользователю перетаскивание элементов интерфейса. Drag & drop может понадобиться в разных ситуациях — например, в таких:

• Простое визуальное изменение положения элемента.
• Сортировка элементов с помощью перетаскивания. Пример — сортировка карточек задач в таск-трекере.
• Изменение контекста элемента. Пример — перенос задачи в таск трекере из одного списка в другой.
• Перемещение локальных файлов в окно браузера.

Мы разберём drag & drop на примере сортировки. Для этого создадим интерактивный список задач.

Найти несколько DOM-элементов и получить к ним доступ из JavaScript можно разными способами: querySelectorAll, getElementsByTagName, children и так далее. В итоге в каждом случае будет возвращена коллекция — сущность, которая похожа на массив объектов, но при этом им не является, на самом деле это набор DOM-элементов. Стоит учесть, что фактически разные методы возвращают разные коллекции:

• HTMLCollection — коллекция непосредственно HTML-элементов.
• NodeList — коллекция узлов, более абстрактное понятие. Например, в DOM-дереве есть не только узлы-элементы, но также текстовые узлы, узлы-комментарии и другие, поэтому NodeList может содержать другие типы узлов.

При работе с DOM-элементами тип коллекции значительной роли не играет, поэтому для удобства будем рассматривать их как одну сущность — коллекцию.

Во время работы с коллекциями можно столкнуться с поведением, которое покажется странным, если не знать один нюанс — они бывают живыми (динамическими) и неживыми (статическими). То есть либо реагируют на любое изменение DOM, либо нет. Вид коллекции зависит от способа, с помощью которого она получена. Рассмотрим на примере.

Сегодня будем делать бота — это отличное (и быстрое) занятие, которое развивает уставший мозг и даёт возможность отправить друзьям ссылочку со словами «Смотри, это моё».

Вторая часть: загружаем бота на сервер и запускаем его

Возможно, вам уже когда-то встречалась в коде такая строка — evt.preventDefault(). Например, в тренажёрах по JavaScript. Давайте подробно разберём, зачем она нужна.

При разработке таких типичных элементов интерфейса, как форма или попап, часто нужно изменить поведение браузера по умолчанию. Допустим, при клике по ссылке мы хотим, чтобы открывался попап, но вместо этого браузер будет автоматически переходить по адресу, указанному в атрибуте href. Или вот другая проблема — мы хотим перед отправкой формы проверять корректность введённых данных, но после нажатия на кнопку submit форма каждый раз будет отправляться на сервер, даже если там куча ошибок. Такое поведение браузера нам не подходит, поэтому мы научимся его переопределять.

Эта статья является попыткой ответа на старый вопрос для собеседований: «Что же случается, когда вы печатаете в адресной строке google.com и нажимаете Enter?» Мы попробуем разобраться в этом максимально подробно, не пропуская ни одной детали.

Примечание: представленный контент изобилует большим количеством терминов, в переводе некоторых из них могут присутствовать различные неточности. Если вы обнаружите какую-то ошибку в нашем переводе — напишите личным сообщением, и мы всё исправим.

Мы перенесли перевод в репозиторий GitHub и отправили Pull Request автору материала — оставляйте свои правки к тексту, и вместе мы сможем значительно улучшить его.

Тернарный (или условный) оператор существует во многих языках программирования — например, в C++, Java, Python, PHP и других. Разберёмся, как он работает в JavaScript.

Все операторы различаются по количеству аргументов, к которым они применяются. Например, существует оператор «-», который меняет знак числа на противоположный. Если такой оператор применяется к одному числу, то есть у него один аргумент — он называется унарным.

let number1 = 7;
let number2 = -number1;

console.log(number2); // В консоль выведется число -7

Кроме унарных операторов, существуют операторы с двумя аргументами — бинарные. Например, бинарный «+» складывает два аргумента:

let number1 = 7;
let number2 = 3;

console.log(number1 + number2); // В консоль выведется число 10

И, наконец, тернарный оператор:

условие ? выражение1 : выражение2

Это единственный оператор с тремя аргументами, что отражено в названии. Первый аргумент — это условие. Если оно истинно (равно true), оператор вернёт второй аргумент — выражение1. В ином случае он вернёт третий аргумент — выражение2.

Что-то напоминает, да? По механике работы тернарный оператор похож на условную конструкцию if с альтернативной веткой else, но его синтаксис позволяет писать меньше строк кода. Сравним:

let booksCount = 19; // Количество книг, прочтённых за год
let result; // Сюда запишем результат сравнения booksCount с эталонным значением

// Сравним с помощью условной конструкции if
if (booksCount > 15) {
  result = 'План на год выполнен!';
} else {
  result = 'Читать и ещё раз читать';
}

// А теперь с помощью тернарного оператора
result = (booksCount > 15) ? 'План на год выполнен!' : 'Читать и ещё раз читать';

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

Это вторая часть рассказа про то, как устроены колбэки в JavaScript.

В первой части мы на примере заказа пиццы разобрались с тем, зачем нужны колбэки. Сейчас посмотрим на то, как работают запросы к серверу, как получать данные через AJAX.

Практически любое приложение на JavaScript взаимодействует с сервером. Нам постоянно приходится получать данные с помощью методологии AJAX. Попробуем запросить информацию о произвольном аккаунте с GitHub и вывести её в консоль. Такая программа может выглядеть так:

const loadData = function(url, cb) {
  const xhr = new XMLHttpRequest();
  xhr.open(`GET`, url);
  xhr.responseType = `json`;
  // После получения данных выполним cb.
  xhr.addEventListener(`load`, cb);
  xhr.send();
}

loadData(`https://api.github.com/users/AntonovIgor`, function (evt) {
  const response = evt.currentTarget.response;
  console.log(response);
});

В этом коде мы делаем запрос к серверу с помощью объекта XMLHttpRequest. Для удобства мы создали функцию loadData, которая принимает два параметра: адрес сервера, который отдаст нам набор информации, и функцию обратного вызова. Вызов этой функции произойдёт сразу после получения данных от сервера. Если вас смутило наименование параметра cb — не переживайте. Это общепринятый вариант обозначения функций обратного вызова (сокращение от callback). При виде cb становится очевидно, что в этот параметр должна передаваться ссылка на функцию.

Мы не будем детально рассматривать содержимое функции loadData, т. к. это не относится напрямую к теме статьи. Если коротко, то эта функция делает запрос к серверу и вызывает нашу функцию после получения ответа.

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

Наша функция сработает сразу после получения ответа от сервера (произойдёт событие load) и выведет ответ сервера в консоль.

При изучении программирования мы привыкаем мыслить последовательно: строки кода выполняются по порядку. Для многих языков это утверждение верно на 100%, но всё начинает меняться, когда речь заходит про асинхронное программирование.

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

У этой статьи есть продолжение — там мы рассказываем про работу с сервером и передачу параметров в коллбэк-функции