JavaScript заметки
8.56K subscribers
2.75K photos
4 videos
1.27K links
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке.

Можно почитать пока компилируется проект :)

Сотрудничество: @noname_media

Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Download Telegram
Программирование будущего: беспилотный автомобиль, управляемый JavaScript и ИИ

Пытаетесь разгадать магию беспилотных автомобилей? Присоединяйтесь к программистам, увлекающимся автоматизированными транспортными средствами. Они помогут написать код, превращающий автомобиль в самоуправляемое чудо техники.

#статья

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

👉 Читать статью
Использование JavaScript Service Workers для создания оффлайн-приложений

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

#полезное
👍2
Event Loop. Мифы и реальность

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

#статья

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

👉 Читать статью
Использование JavaScript Intersection Observer API для отслеживания видимости элементов на странице

Intersection Observer API позволяет отслеживать, когда целевые элементы входят или выходят из видимой области окна браузера или другого элемента.

#полезное
1👍1
Переход с Vue-CLI на Vite: ускоряем разработку Vue 3

Vue.js - один из самых популярных JavaScript-фреймворков, который используется для создания динамических пользовательских интерфейсов. С появлением Vue 3, разработчики получили еще больше возможностей для создания мощных и эффективных приложений. Одним из новых инструментов в арсенале Vue 3 является Vite - быстрый и легковесный бандлер, который значительно упрощает процесс разработки и ускоряет сборку проекта. В этой статье мы рассмотрим, как перейти от стандартного подхода с использованием Vue-CLI и Webpack к более продвинутому и эффективному методу работы с помощью Vite.

#статья

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

👉 Читать статью
👍2🔥1
Использование JavaScript Service Workers для создания оффлайн-приложений

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

#полезное
👍2
Обработка событий в JavaScript: всплытие, перехват, делегирование и распространение событий

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

#статья

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

👉 Читать статью
2
Использование JavaScript Proxies для реализации наблюдаемых объектов

Здесь Proxy используется для создания наблюдаемого объекта, который вызывает определенную функцию при изменении своих свойств.

#полезное
👍1
Типы данных JavaScript

Хотите иметь четкое представление о типах данных JavaScript? Вы на правильном пути! Понимание типов данных обеспечит сбор данных в предпочтительном формате, а значение каждого свойства будет соответствовать вашим ожиданиям.

#статья

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

👉 Читать статью
👍4
Сортировка массивов объектов

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

#полезное
👍5
Программирование будущего: беспилотный автомобиль, управляемый JavaScript и ИИ

Пытаетесь разгадать магию беспилотных автомобилей? Присоединяйтесь к программистам, увлекающимся автоматизированными транспортными средствами. Они помогут написать код, превращающий автомобиль в самоуправляемое чудо техники.

#статья

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

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

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

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

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

#полезное
👍2
Искусство манипулирования массивами JavaScript: исследование метода Array.prototype.filter()

Говорят, что "дьявол кроется в деталях". Так почему бы не поискать его в недрах JavaScript? Совершите увлекательное путешествие в волшебное закулисье метода filter.

#статья

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

👉 Читать статью
Работа с локализацией: перевод и форматирование текста на разных языках

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

Для перевода текста на разные языки в JavaScript можно использовать объект Intl, который предоставляет функциональность для локализации. С помощью объекта Intl можно форматировать числа, даты, валюты и другие типы данных в соответствии с правилами языка и региона.

В данном примере мы создаем объект Intl с помощью конструктора new Intl.NumberFormat(). Мы указываем язык и регион (в данном случае 'en-US' для английского языка в США) и опции форматирования (в данном случае стиль 'currency' и валюту 'USD').

Затем мы используем метод format() объекта Intl для форматирования числа amount в соответствии с указанными опциями. В данном примере мы форматируем число в денежный формат.

#полезное
👍1
8 советов, которые сделают JavaScript-код чище

Проблемный код, даже если он более или менее работает, требует больших затрат на поддержку. Отточить навыки создания чистого кода, хорошо читаемого и легко поддерживаемого, помогут 8 простых советов.

#статья

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

👉 Читать статью
Работа с графикой: использование библиотеки Canvas для рисования и визуализации данных

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

Canvas - это элемент HTML5, который позволяет рисовать графику с помощью JavaScript. Он предоставляет API для создания и управления контекстом рисования, на котором можно рисовать линии, фигуры, текст и многое другое.

В данном примере мы получаем контекст рисования Canvas с помощью метода getContext(). Затем мы используем методы контекста, такие как fillRect() для рисования прямоугольника, stroke() для рисования линии и fillText() для рисования текста.

Мы также можем устанавливать различные свойства контекста, такие как цвет заливки (fillStyle), цвет обводки (strokeStyle), толщина линии (lineWidth) и шрифт (font).

#полезное
👍3
Современная фронтенд-разработка: мир HTML, CSS, JavaScript и популярных фреймворков

Фронтенд-разработка - постоянно развивающаяся область, требующая от разработчиков адаптации к новым технологиям, практикам и лучшим cтандартам. Сегодня рассмотрим ее базовые основы, включая HTML, СSS и JavaScript, а также поговорим о более продвинутых концепциях.

#статья

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

👉 Читать статью
Манипуляция с элементами страницы: создание, удаление и изменение HTML-элементов

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

В данном примере мы создаем новый элемент div с текстом "Новый элемент" и классом "my-class". Затем мы добавляем этот элемент в конец body документа с помощью метода appendChild(). Мы также изменяем содержимое элемента с помощью свойства textContent и стилизуем его, устанавливая значение свойства backgroundColor.

Через 3 секунды мы удаляем элемент с помощью метода remove(). Это демонстрирует возможность удаления элементов из документа.

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

#полезное
👍1
21 лайфхак для новичков в JavaScript

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

#статья

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

👉 Читать статью
👍1
Работа с графикой: использование библиотеки Canvas для рисования и визуализации данных

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

Canvas - это элемент HTML5, который позволяет рисовать графику с помощью JavaScript. Он предоставляет API для создания и управления контекстом рисования, на котором можно рисовать линии, фигуры, текст и многое другое.

В данном примере мы получаем контекст рисования Canvas с помощью метода getContext(). Затем мы используем методы контекста, такие как fillRect() для рисования прямоугольника, stroke() для рисования линии и fillText() для рисования текста.

Мы также можем устанавливать различные свойства контекста, такие как цвет заливки (fillStyle), цвет обводки (strokeStyle), толщина линии (lineWidth) и шрифт (font).

#полезное
👍1