JavaScript заметки

💡Все мечтаете начать осваивать программирование? Сейчас самое время — начните с основ HTML вместе с OTUS. HTML — это база для всех, кто хочет стать веб-разработчиком. 6 июня в 20:00 приходите на открытый урок в преддверии старта онлайн-курса «Специализация Fullstack Developer». Спикером выступит Мария Коршунова, руководитель курса HTML/CSS в OTUS, работает в сфере веб-разработки с 2011 года. ✅На занятии мы: — Пройдем основы работы с HTML, начиная с самого простого. — Рассмотрим несколько типичных ошибок не только среди начинающих, но среди продолжающих и иногда даже сеньоров. — Создадим разметку страницы авторизации: разберём основы семантики и атрибуты полей формы. Вебинар подойдёт как для начинающих, так и продолжающих обучение вёрстке. Используйте эту возможность, чтобы познакомиться с преподавателем и форматом обучения. Курс можно приобрести любым удобным способом. ➡️ Регистрируйтесь на занятие и готовьте вопросы преподавателю: https://otus.pw/yJlZ/ Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963. 2RanykuZe1n

Анатомия ошибки Первый шаг к пониманию ошибок JavaScript — понять, откуда они берутся. Большинство ошибок JavaScript автоматически генерируются движком JavaScript. Делимся статьей, где автор рассказывает про различные типы ошибок. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Temporal API Temporal предоставляет отдельные классы ECMAScript для дат, времени и других вариантов использования с заданной областью. Это делает код более читабельным и предотвращает ошибки, вызванные неправильным принятием 0, UTC или местного часового пояса. Данная статья поможет разобраться с Temporal API. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Редко используемые API Делимся статьей, где автор рассказывает про 4 API. Они редко используются, однако очень полезны. К ним относятся Beacon, Clipboard, Notifications и Perfomance. Присутствует ссылка на репозиторий с примерами. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Ключевое слово this Ключевое слово "this" в JavaScript является одной из наиболее мощных и полезных функций языка. Оно позволяет ссылаться на текущий объект внутри метода объекта и обеспечивает удобный способ доступа к его свойствам и методам. Например, если у вас есть объект "person" с методом "getName", который возвращает имя объекта, вы можете вызвать этот метод, используя ключевое слово "this". Кроме того, "this" также может использоваться в функциях, которые вызываются как методы объекта. Например, если у вас есть объект "person" с методом "greet", который приветствует человека по имени, вы можете вызвать этот метод, используя ключевое слово "this" для ссылки на текущий объект. #полезно

Это свершилось! Сделали для вас самую полезную подборку каналов по программированию. В ней собраны официальные русскоязычные каналы самых популярных языков. Там только топовая информация, которая потом появляется на платных курсах. Надо подписаться: @it

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

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 15

Функция обратного вызова выполняется для каждого элемента массива, и результат сохраняется в аккумуляторе. В конце итерации reduce() возвращает окончательное значение аккумулятора #методы

Фейковый API сервер Делимся статьей, где автор рассказывает про создание гибридного фейкового API сервера с помощью json-server. Ты узнаешь, для чего он нужен и где используется. Также продемонстрированы достоинства и недостатки. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Array.filter() Метод filter() создает новый массив, в который включаются только те элементы исходного массива, которые удовлетворяют определенным условиям. Другими словами, этот метод позволяет фильтровать массив по определенным критериям. Вот пример использования метода filter() для отбора всех четных чисел из массива:

let arr = [1, 2, 3, 4, 5, 6];
let evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

В этом примере мы создали массив arr, содержащий числа от 1 до 6, и затем применили метод filter() к этому массиву. В качестве аргумента методу передали функцию обратного вызова (также называемую функцией предиката), которая возвращает true для всех четных чисел и false для всех нечетных чисел. Как результат, метод filter() создал новый массив evenNumbers, содержащий только четные числа из исходного массива. #методы

Node, Nest, Next, Express🤯 - пора бы всё объединить! Для этого мы создали отдельный уголок - Серверный JavaScript. Собрали всё, проверяй🔥

Рекурсивные функции Внутри функции можно вызывать её саму — это пример рекурсивной функции. Если разложить пример, то получится следующая цепочка: - fac(3) это 3 * fac(2); - fac(2) это 2 * fac(1); - fac(1) это 1. Получается, что fac(3) это 3 * 2 * 1, то есть 6. Такой подход часто применяется в математических операциях, но не ограничивается ими. #функции

Значение как число Вы когда-нибудь обращали внимание, что "event.target.value" всегда возвращает строковое значение, даже если для поля ввода "input" задан тип "number"? Чтобы сразу получать числовое значение, используйте "event.target.valueAsNumber". #полезно

Асинхронность в браузере Делимся статьей, в которой автор составил подробный гайд про асинхронность в браузере. Рассмотрены цикл событий, функции обратного вызова, async/await и другие темы. Благодаря данной статье у тебя сформируется полное понимание асинхронности в браузере. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Макеты для вёрстки сайтов — это канал, где собраны уникальные примеры реальных макетов в Figma, которые заказчики присылают на вёрстку. Учитесь, практикуйтесь, пополняйте свое портфолио настоящими работами вместе с @build_html

flat Это метод, который создает новый массив со всеми элементами вложенного массива, рекурсивно объединенными с вышестоящим массивом до заданной глубины.

const array = [1, 2, [3, 4]];
array.flat(); // [1, 2, 3, 4];

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

const crazyArray = [1, 2, [3, 4], [[5], [6, [7,8]]]];
crazyArray.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8];

Чем глубже вы погружаетесь в массив, тем больше вычислительного времени потребуется для его выравнивания. Обратите внимание, что IE и Edge не поддерживают эту функцию. #методы

Создание музыкального инструмента с помощью Web Audio API Web Audio API предоставляет мощную и универсальную систему управления звуком. Она позволяет выбирать источники звука, добавлять эффекты к звуку, создавать визуализацию звука, применять пространственные эффекты (например, панорамирование) и многое другое. В данной статье продемонстрировано, как был создан музыкальный инструмент с помощью API. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Забудьте о конкатенации, используйте шаблонные строки (литералы) Конкатенация строк с помощью оператора "+" – это старая школа. Более того, конкатенация строк с участием большого количества переменных (или выражений) повышает риск возникновения путаницы и ошибок. Шаблонные строки (или литералы) позволяют встраивать выражения прямо в текст. Они обладают уникальным синтаксисом, при котором строка заключается в обратные кавычки (``). Шаблонная строка может содержать места для подстановки динамических значений. Такие места отмечаются знаком доллара и фигурными скобками. Например, ${выражение}. #полезно

Лучший источник макетов для практики верстки Макеты для верстки — канал, где собраны уникальные примеры реальных макетов в Figma, которые заказчики присылают на вёрстку

Использование оператора опциональной последовательности (optional chaining operator) Раньше, чтобы получить доступ ко вложенному свойству, нужно было проверять, существует ли каждое из свойств. Прямое обращение к user.location.street.name могло выбросить исключение, что мы пытаемся обратиться к name через несуществующие ссылки к методам location или street. Но теперь, в версии ES11, код после оператора опциональной последовательности выполнится, только если обращение по предыдущей ссылке не привело к undefined или null. Так что использование этого оператора сократит ваш код и сделает его более понятным. #операторы

Логические и побитовые операторы в JavaScript В данной статье автор подробно рассказывает про логические операторы «НЕ», «ИЛИ», «И» и нулевого слияния. Дополнительно рассматриваются побитовые операторы. Они используются для криптографии. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью