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

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

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

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

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

#полезное

Увеличиваем свою производительность в WebStorm / PhpStorm c помощью шаблонов

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

#статья

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

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

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

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

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

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

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

#полезное

Один компонент, 20+ фич, A/B-тесты: Поможет ли машина состояний?

Сталкивались ли вы с проблемой возникновения багов из-за пересечения включенных фичей в приложении? Или, возможно, была необходимость одновременно проводить большое число A/B-экспериментов в одном компоненте? 

#статья

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

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

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

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

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

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

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

#полезное

Как мы создаём Squadus. Реализуем «прыжок к сообщению» в мобильной версии

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

#статья

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

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

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

Функции могут принимать другие функции как аргументы или возвращать их.

#функции

Ликбез по распространенным Client-Side уязвимостям

В этой статье мы покажем:
как в разных ситуациях манипулировать веб-сайтом таким образом, чтобы он передавал пользователям вредоносный JavaScript.
как скомпрометировать администратора сайта, отправив ему личное сообщение;
как атаковать разом всех пользователей при помощи комментария под статьей;
как заставить пользователя отправить запрос на действия, которые он не собирается выполнять;
как прослушивать WebSocket-соединения;

#статья

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

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

Рекурсивные функции

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

#функции

Подробная настройка Content Security Policy

Content Security Policy (CSP) - это механизм безопасности веб-приложений, который используется для сокращения рисков, связанных с атаками, такими как внедрение скриптов (XSS) и выполнение нежелательного кода (инъекция). CSP позволяет веб-разработчикам указывать браузерам, из каких источников разрешено загружать ресурсы, такие как скрипты, стили, изображения, шрифты и другие элементы.

#статья

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

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

Функции обратного вызова

Функция может принимать другую функцию в качестве аргумента и вызывать ее внутри себя.

#функции

RxJS: как операторы высшего порядка упрощают код

В этой статье я покажу, что в HOO нет ничего мифического, и расскажу в каких случаях вам нужно использовать операторы высшего порядка. Сейчас вы подумаете, что это скучный лонгрид, но не торопитесь. Мы рассмотрим всего 4 оператора: switchMap, exhaustMap, concatMap, mergeMap.

#статья

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

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

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

Стрелочные функции предоставляют сокращенный синтаксис для определения функций.

#функции

Задачи про PEG-парсеры

В итоге я сделал игру программу CrateGram

#статья

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

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

Создание функции

В этом примере функция greet принимает аргумент name и возвращает приветствие.

#функции

Под капотом анимаций в React Native

Это вторая и последняя статья из серии как работает React Native (RN) под капотом, на примере анимаций.

#статья

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

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

Использование геттеров и сеттеров

В этом примере класс Person использует геттер и сеттер для получения и установки полного имени.

#классы

Видеоредактор, работа с видео и зачем там Canvas

Одной из задач, где мы в Ozon используем Canvas, является обработка видео. Для это у нас реализован минималистичный видеоредактор.
Современные устройства и браузеры развиваются достаточно быстро, но все-равно этого бывает недостаточно для задач со сложными вычислениями. К таким задачам можно отнести обработку видео.

#статья

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

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

Использование классов как функции конструкторов

Здесь мы используем функцию конструктора Car для создания объекта. Мы добавляем метод getFullName к прототипу Car, чтобы он был доступен для всех экземпляров класса.

#классы

Kysely.js типизированный sql builder

Kysely.js – это библиотека, позволяющая писать типизированные SQL запросы. Библиотека делает работу с SQL в вашем проекте более безопасной, избавляя от таких ошибок как опечатки в названиях колонок или таблиц и неправильное использование SQL операторов в коде (код не скомпилируется). Ко всему прочему она делает работу с SQL более удобной, предоставляя при написании запросов автодополнения для таблиц, колонок, алиасов и других сущностей. Kysely имеет незначительный слой абстракции над SQL для того чтобы можно было пользоваться всей мощью SQL и при этом не изучать множество дополнительных сущностей. Библиотека поддерживает MySQL, PostgreSQL, SQLite, PlanetScale, D3, SurrealDB и другие.

#статья

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

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

Работа с классами

В этом примере мы создаем классы Animal и Dog. Dog наследует от Animal, и мы переопределяем метод makeSound для класса Dog, чтобы он вел себя по-разному. Это демонстрирует наследование и переопределение методов в классах JavaScript.

#классы