Работа с файлами: загрузка, чтение и запись файлов с помощью JavaScript

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

Для загрузки файла мы добавляем обработчик события change на элемент input type="file". Внутри обработчика мы получаем загруженный файл с помощью event.target.files[0] и выводим его в консоль.

Для чтения файла мы создаем объект FileReader и добавляем обработчик события load. Внутри обработчика мы получаем содержимое файла с помощью event.target.result и выводим его в консоль. Затем мы вызываем метод readAsText() объекта FileReader, чтобы начать чтение файла.

Для записи файла мы создаем текстовое содержимое с помощью переменной fileContent. Затем мы создаем объект Blob с помощью содержимого и указываем тип файла. Мы создаем URL объекта Blob с помощью URL.createObjectURL() и создаем ссылку для скачивания файла. Затем мы автоматически кликаем по ссылке с помощью link.click(), чтобы начать загрузку файла.

#полезное

React 18: что поменялось

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

#статья

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

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

Функции высшего порядка и их использование

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

В этом примере forEach - это функция высшего порядка, которая принимает массив arr и функцию обратного вызова callback. Она итерирует по элементам массива и вызывает callback для каждого элемента.

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

Затем мы создаем массив numbers и используем forEach, чтобы применить функцию printItem к каждому элементу массива. Результатом будет вывод всех элементов массива в консоль.

#полезное

Heretic: full stack фреймворк на основе Marko.js

В последнее время вышло так, что я по неведомой причине стал часто заниматься популяризацией Marko.js, декларативного и реактивного языка разметки, который разрабатывается eBay. С одной стороны, это связано с тем, что Marko незаслуженно часто обходят стороной, хотя он позволяет делать из коробки делать многое из того, что не получится сделать на мейнстримовых фреймворках. С другой стороны, это действительно классно, когда можно использовать обычный HTML, при необходимости расширяя его синтаксисом Marko (вроде условных операторов и циклов). Одним словом, если вы еще не видели, что это такое - посмотрите, возможно, вам это очень понравится.

#статья

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

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

Рекурсия и оптимизация рекурсивных функций

В первой части кода есть простая рекурсивная функция factorial, которая вычисляет факториал числа n. Она вызывает себя с аргументом n - 1, пока n не станет меньше или равно 1.

Во второй части кода представлена оптимизированная версия функции factorialMemoized, которая использует мемоизацию. Мемоизация - это техника, при которой результаты предыдущих вызовов функции сохраняются в памяти и возвращаются в случае повторного вызова с теми же аргументами. В данном случае, мы используем объект memo для хранения результатов предыдущих вызовов factorialMemoized. Если результат уже вычислен для конкретного n, мы возвращаем его из memo, иначе вычисляем и сохраняем в memo.

Таким образом, оптимизированная версия factorialMemoized более эффективна при вычислении факториала для больших чисел, так как избегает переполнения стека вызовов, и вычисляет результаты только один раз для каждого n.

#полезное

Как типизировать Vuex Store

В этой статье мы поймем, нужно ли вам типизировать Vuex Store или нет, и если вы достаточно отчаянны, поймем, как его типизировать, чтобы не погибнуть.

#статья

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

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

Стрелочные функции и их особенности

В данном примере мы создали две функции: обычнаяФункция и стрелочнаяФункция, которые выполняют сложение двух чисел x и y.

#полезное

Кулинарный гид по Vue.js: всё о props

В этой статье разберемся, как frontend-разработчику готовить на «кухне» props. Выбирайте подходящий уровень сложности: джуны-поварята смогут лучше разобраться в работе и применении props на фреймворке Vue.js, а еще мы затронем тему валидации. Для мидлов и более опытных специалистов — настоящих шеф-поваров мы приготовили продвинутые кулинарные техники props, где можно освежить в памяти некоторые детали или решить проектную проблему, если замылился глаз. 

#статья

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

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

Работа с локальным хранилищем

localStorage позволяет хранить данные на стороне клиента (в браузере). Методы setItem() используются для записи данных, getItem() для чтения данных и removeItem() для удаления данных из локального хранилища.

#полезное

Как декораторы могут упростить разработку веб-форм

В статье я буду писать о подходе, использующем библиотеку MobX. Так что если вы в своих проектах её не используете, статья может быть не так полезна. Но вы можете рассматривать её, как возможный источник вдохновения по тому, как можно разрабатывать формы.

#статья

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

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

Работа с обещаниями

Обещания (Promises) используются для работы с асинхронными операциями и управления обработкой успеха и ошибок. В этом примере мы создаем обещание, которое разрешается (resolve) через 2 секунды с успешным результатом.

#полезное

Фонетический словарь. Пет-проект в полезное приложение

У меня есть хобби — изучение английского языка, и последнее время я увлекся фонетикой британского английского языка, но почти все словари дают транскрипцию «‎Королевского английского», на котором говорят, по данным Гугла, около 3 процентов жителей Соединённого Королевства.

#статья

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

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

Работа с массивами и метод .map()

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

#полезное

Infinite scroll + Virtualization на примере ReactJS + RTK Query

На сегодняшний день любое уважающее себя предприятие, будь то магазин строительных товаров или компания по предоставлению услуг в сфере бизнеса, все они стремятся «выложить» свои товары и услуги в интернет. Это и понятно – мы живем в век бурно развивающихся технологий и доступ в интернет имеет более 65% населения мира, а к 2025 году это число увеличится до 6.54 млрд. Так, о чем я, всех их нужно обслуживать, всем им нужно предлагать услуги, товары и т.д. Как говорится: «На вкус и цвет – товарища нет» и правда сколько людей – столько мнений, а в нашем случае товаров и услуг. На фоне этого возникает резонный вопрос: «А как все это отобразить у меня на сайте, чтобы пользователь не ждал до следующего года загрузки страницы сайта, когда к тому времени успеют появиться еще товары, которые необходимо будет подгрузить?».

#статья

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

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

Асинхронные запросы с использованием fetch()

fetch() используется для отправки асинхронных HTTP-запросов. В примере мы отправляем запрос к удаленному серверу, ожидаем ответ в формате JSON и выводим данные или обрабатываем ошибку.

#полезное

8 продвинутых вопросов для собеседования по JavaScript

Хотите стать JS-специалистом? Тогда стоит детально разобрать ключевые вопросы для собеседования по JavaScript. Это поможет вам усвоить основные понятия и успешно ответить на другие вопросы.

#статья

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

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

Сортировка массивов объектов

В примере мы создаем массив объектов products, содержащий информацию о различных продуктах. Затем мы используем метод sort() для сортировки этого массива по полю price в порядке возрастания, используя функцию sortByPriceAscending в качестве функции сравнения. Вы можете создать аналогичные функции для сортировки в порядке убывания или для сортировки по другим полям объектов.

#полезное

Мои первые шаги в создании браузерных 2D игр на чистом JavaScript + Canvas

Статья представляет собой перевод одного англоязычного видеоурока. Если Вы хорошо владеете английским и Вам больше нравится видеоформат подачи материала — можете посмотреть видео. В статье же я буду вставлять участки кода и стараться также подробно как и автор видео — объяснять каждый свой шаг.

#статья

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

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

Генерация случайных чисел

В примере мы используем Math.random() для получения случайной десятичной дроби между 0 и 1. Затем мы масштабируем и округляем эту дробь, чтобы получить случайное целое число в заданном диапазоне (включая минимальное и максимальное значение).

#полезное

Сайд эффект реактивности и апдейта компонента во Vue 3

Хочу рассказать о небольшом кейсе, связанном с работой реактивности во Vue 3. Кейс касается взаимосвязи ref/reactive, v-for/v-if, :class, функций и того, что у нас находится в <template>. Сразу оговорюсь, что под капотом не смотрел, поэтому детальных объяснений не ждите. Наоборот, хотелось бы услышать ваши мнения, сталкивались ли вы с подобными сайд эффектами.

#статья

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

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