JavaScript заметки

Выполнить обработчик событий только один раз

document.getElementById("btn").addEventListener("click",
  function () {
    console.log("Button clicked!");
  },
  { once: true }
);

#полезно

👍20

1.48K views06:05

JavaScript заметки

Трекер расходов

SheetJS — это библиотека JavaScript для Excel, которая позволяет преобразовывать html-таблицу, массив или json в загружаемый xlsx-файл. Все это делается прямо в браузере. Благодаря этой статье ты узнаешь, как создать трекер расходов с помощью SheetJS.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

👍6

1.48K views12:05

JavaScript заметки

Обновить пропсы объекта с помощью оператора spread

const user = {
  name: 'David',
  age: 30,
  city: 'NY'
};

const newAge = 40;

const updatedUser = {
  ...user,
  age: newAge
};

console.log(user); // { name: 'David', age: 30, city: 'NY'}
console.log(updatedUser); // { name: 'David', age: 40, city: 'NY'}

#полезно

👍7

1.47K views06:05

JavaScript заметки

Three.js и тетрис

Three.js — это легковесная кросс-браузерная библиотека JavaScript, используемая для создания и отображения анимированной трехмерной компьютерной графики в веб-браузере. Скрипты Three.js можно использовать в сочетании с элементом холста HTML5, SVG или WebGL. В данной статье продемонстрировано, как с помощью Three.js можно создать трехмерный тетрис.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

❤4

1.54K views12:05

JavaScript заметки

Найти количество пропсов в объекте

const user = {
  name: 'David',
  age: 30, 
  city: 'NY'
};

console.log(Object.keys(user).length); // 3

#полезно

👍10

1.48K views06:05

JavaScript заметки

Internationalization API

Internationalization API — интерфейс, предоставляемый браузером. Он позволяет выполнять интернационализацию и локализацию веб-приложений. Данная статья поможет разобраться с Internationalization API.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

👍5

1.51K views12:05

JavaScript заметки

Взять последние элементы из массива

Обратите внимание: метод slice доступен для массива так же, как и для строки.

const numbers = [10, 20, 30, 40, 50];
const last = numbers.slice(-1);
console.log(last); // [50]
const secondLast = numbers.slice(-2);
console.log(secondLast); // [40, 50]

#методы

👍9

1.41K views06:05

JavaScript заметки

CORS

Совместное использование ресурсов различными источниками (CORS) — это механизм безопасности на основе HTTP, который контролируется и применяется клиентом (веб-браузером). Это позволяет службе (API) указывать любой источник, кроме своего собственного, из которого клиент может запрашивать ресурсы. Делимся статьей, где автор знакомит с CORS.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

👍7

1.52K views12:05

JavaScript заметки

Три способа проверить, является ли объект массивом

В JS массив также является объектом, так что для такой проверки вы можете использовать три способа (это часто задают на собеседованиях):

const arr = [1, 2, 3, 4];

•

arr.constructor.toString().indexOf("Array") > -1

•

arr instanceof Array

•

Array.isArray(arr)

#полезно

👍17

1.55K views06:05

JavaScript заметки

RegEx на практике

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

👍3❤1

1.55K views12:05

JavaScript заметки

Получить временную метку (timestamp)

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

const date = new Date();
console.log(date.getTime()); // 1621708197268

#функции

👍4

1.41K views06:05

JavaScript заметки

Создание пианино

В данной статьей автор демонстрирует создание пианино с помощью JavaScript. Обрати внимание, проект лучше всего работает в Chrome и других браузерах с тем же движком. Могут быть проблемы при работе с Safari.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

1.45K views12:05

JavaScript заметки

Деструктуризация объектов

const user = {
 name: 'David',
 age: 30
};

// деструктуризовать пропсы и использовать status со значением Married, если этого свойства нет
const {name, age, status = 'Married' } = user;
console.log(name, age, status) // David 30 Married

const person = {
 age: 30
};

// деструктуризуем объект person, переименуем name в username, назначим по умолчанию значение Anonymous, если такого свойства в person нет
const {name: username = 'Anonymous', age } = person;

console.log(username, age); // Anonymous 30

#полезно

👍6

1.53K views06:05

JavaScript заметки

Ошибки с промисами

В данной статье продемонстрированы самые распространенные ошибки при работе с промисами. К ним относятся: использование блока try/catch внутри промиса; неправильное использование Promise.race(); злоупотребление промисами.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

👍4

1.55K views12:05

JavaScript заметки

Деструктуризация массивов

const days = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
const [firstDay, secondDay] = days;
console.log(firstDay); // sunday
console.log(secondDay); // monday

#массивы

👍3🔥1

1.6K views06:05

JavaScript заметки

Docker

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

👍5❤3

1.63K views12:05

JavaScript заметки

Использование шаблонных литералов

const user = {
 name: 'David',
 age: 30,
 address: 'NY'
};

const { name, age, address } = user;
console.log(Hi, I'm ${name} with age ${age} and living in ${address});

#полезно

👍8❤2🔥2

1.6K views06:05

JavaScript заметки

Создание кроссбраузерного расширения

Делимся статьей, где автор рассказывает про создание кроссбраузерного расширения. Ты узнаешь про различные проблемы кроссбраузерности; из чего состоит расширение. Также ты познакомишься с фреймворком Plasmo.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

❤4

1.54K views12:05

JavaScript заметки

Передача числовых переменных в качестве аргументов в функцию

Оператор rest (версия ES6) конвертирует разделённые запятой значения в массив, таким образом параметр numbers в функции add становится массивом.

function add(...numbers) {
 return numbers.reduce((acc, value) => {
   return acc + value;
 }, 0);
}
const sum = add(1, 2, 3, 4, 5); 
console.log(sum); // 15

#функции

👍7❤2

1.56K views06:05

JavaScript заметки

XSS с мутациями

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

1.54K views12:05

About

Blog

Apps

Platform