JavaScript

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

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

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

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

Как сделать заполнение полей (input) через авторизацию ВКонтакте?

от
prokoding.ru > JavaScript

Чтобы осуществить заполнение полей (input) через авторизацию ВКонтакте на веб-сайте, необходимо использовать VK API и OAuth 2.0 протокол для авторизации пользователей через ВКонтакте. Ниже приведен пошаговый план того, как можно реализовать данную функциональность: 1. **Создайте приложение ВКонтакте:** - Зайдите на сайт разработчиков ВКонтакте (https://vk.com/dev) и создайте новое standalone-приложение. - Сохраните client_id вашего приложения, оно потребуется ... Читать далее

Как перевести дату в строке в формат UNIX?

от
prokoding.ru > JavaScript

Для того чтобы преобразовать дату в строковом формате в формат UNIX timestamp (количество секунд, прошедших с полуночи 1 января 1970 года по UTC времени), можно воспользоваться следующими шагами: 1. Создаем объект Date, используя строку с датой: let dateStr = "2022-04-15"; let dateObj = new Date(dateStr); 2. Получаем количество миллисекунд, прошедших с 1 января 1970 года ... Читать далее

Почему при передаче класса пропсом, к нему не применяются стили?

от
prokoding.ru > JavaScript

Когда вы передаете класс как пропс в компонент React, стили из этого класса не применяются автоматически по нескольким причинам: 1. **Безопасность**: React по умолчанию не вставляет строки, переданные через пропсы, как HTML. Это сделано для предотвращения атак XSS (межсайтового скриптинга). Если бы React автоматически применял стили из переданных классов, это могло бы создать уязвимость безопасности. ... Читать далее

VSCode как отображать открытые файлы в списке файлов слева а не сверху?

от
prokoding.ru > JavaScript

Чтобы изменить расположение открытых файлов в списке слева вместо сверху в редакторе кода Visual Studio Code (VSCode), вам необходимо выполнить следующие шаги: 1. Откройте редактор кода Visual Studio Code. 2. В правом верхнем углу окна VSCode найдите значок "Настройки" (шестеренка) или нажмите комбинацию клавиш Ctrl + , (для Windows/Linux) или Cmd + , (для MacOS), ... Читать далее

Как сделать редирект на Сontact form7 при успешной отправки сообщения если отключен JS?

от
prokoding.ru > JavaScript

Для реализации редиректа на форму Contact Form 7 при успешной отправке сообщения даже при отключенном JavaScript можно использовать методы на стороне сервера и на стороне клиента. 1. **На стороне сервера (PHP)**: В Contact Form 7 есть возможность указать URL для перенаправления после успешной отправки сообщения. Для этого можно воспользоваться хуком wpcf7_mail_sent и задать соответствующий URL ... Читать далее

Как сделать скролл на JS, чтобы блок располагался строго по центру экрана?

от
prokoding.ru > JavaScript

Для того чтобы реализовать скролл на JavaScript таким образом, чтобы блок располагался строго по центру экрана, вам потребуется применить несколько шагов. Вот примерный алгоритм действий: 1. В первую очередь, вам нужно определить блок, который вы хотите разместить по центру экрана. Допустим, это может быть блок с идентификатором "center-block". 2. Пропишите стили для этого блока, чтобы ... Читать далее

Как вынести горизонтальный скролл в родительский контейнер, оставив вертикальный скролл?

от
prokoding.ru > JavaScript

Чтобы вынести горизонтальный скролл в родительский контейнер и оставить вертикальный скролл, можно воспользоваться следующим подходом: 1. Установите для родительского контейнера CSS свойство overflow со значением auto, чтобы появились скроллы при необходимости. .parent-container { overflow: auto; } 2. Для контейнера с горизонтальным контентом установите ширину элемента на значение, превышающее ширину родительского контейнера. .horizontal-container { width: 1000px; ... Читать далее

У меня проблема с асинхроностью, как исправить?

от
prokoding.ru > JavaScript

Проблемы с асинхронным кодом в JavaScript - это довольно распространенная проблема, так как JavaScript является однопоточным и имеет асинхронную природу. Вот некоторые из наиболее распространенных проблем и способы их решения: 1. **Callback Hell**: Использование колбэков может привести к коллекции многоуровневых вложенностей, что усложняет чтение кода и отладку. Для избежания этого можно использовать промисы или асинхронные ... Читать далее

Как изменить CSS в зависимости от условия?

от
prokoding.ru > JavaScript

Для изменения CSS в зависимости от условия в JavaScript можно использовать несколько подходов. Рассмотрим два из них: добавление/удаление классов и прямое изменение стилей элемента. 1. Добавление/удаление классов: <!DOCTYPE html> <html> <head> <style> .red { color: red; } </style> </head> <body> <button onclick="changeColor()">Изменить цвет</button> <p id="text">Текст</p> <script> function changeColor() { const textElement = document.getElementById('text'); if (textElement.classList.contains('red')) ... Читать далее

Как отправить на почту JS данные Modx?

от
prokoding.ru > JavaScript

Для отправки данных на почту с использованием JavaScript в MODX (MODX Evolution или MODX Revolution) можно воспользоваться встроенными средствами PHP и AJAX. Вот примерный алгоритм действий: 1. Создайте форму на странице MODX, в которой пользователь будет вводить свои данные. Например: <form id="contact-form"> <input type="text" name="name" placeholder="Имя"> <input type="email" name="email" placeholder="Email"> <textarea name="message" placeholder="Сообщение"></textarea> <button type="button" ... Читать далее