Ответы пользователя по тегу JavaScript
  • Можно ли очистить данные куки на стороне клиента у стороннего сайта?

    dedalik
    @dedalik
    Веб разработчик
    Очистка данных куки у стороннего сайта с клиентской стороны невозможна из-за политики безопасности браузеров, которая не позволяет одним сайтам изменять или удалять куки другого сайта. Это сделано для защиты конфиденциальности и безопасности пользователей.

    Проверьте, предоставляет ли Telegram API или SDK, который позволяет принудительно разлогинить пользователя или сбросить сессию.
    Ответ написан
    Комментировать
  • Почему в Safari обрывается соединение с websocket'ом?

    dedalik
    @dedalik
    Веб разработчик
    Используйте автоматическое переподключение WebSocket

    function createWebSocket() {
        const ws = new WebSocket('wss://...');
    
        ws.onopen = function () {
            console.log('WebSocket connection opened');
        };
    
        ws.onmessage = function (message) {
            console.log('Received message:', message.data);
        };
    
        ws.onclose = function (event) {
            console.log('WebSocket connection closed. Reconnecting...');
            // Автоматическое переподключение через 1 секунду
            setTimeout(createWebSocket, 1000);
        };
    
        ws.onerror = function (error) {
            console.log('WebSocket error:', error);
            ws.close();
        };
    }
    
    createWebSocket();


    Так же можно ещё пинговать сервер Keep-Alive, но тут переподключения будет достаточно
    Ответ написан
  • Как удалить элемент из массива в local storage по его индексу?

    dedalik
    @dedalik
    Веб разработчик
    Сохранение данных продуктов в localStorage

    window.addEventListener('click', function(event) {
      if (event.target.classList.contains('card-btn') || event.target.classList.contains('adaptive-price')) {
        const cardHTML = event.target.closest('.card');
    
        const productInfo = {
          img: cardHTML.querySelector('.card-img').className, // Используйте className
          name: cardHTML.querySelector('.card-title').innerText,
          desc: cardHTML.querySelector('.card-desc').innerText,
          price: cardHTML.querySelector('.card-price').innerText,
        };
    
        const alreadyInStorageCart = JSON.parse(localStorage.getItem('productInfo')) || [];
        localStorage.setItem('productInfo', JSON.stringify([...alreadyInStorageCart, productInfo]));
      }
    });


    Генерация HTML из данных в localStorage

    const cartCardBox = document.querySelector('.cart-card-box');
    
    if (localStorage.length > 0) {
      const products = JSON.parse(localStorage.getItem('productInfo'));
      products.forEach((product, index) => {
        const cartCardHTML = `
          <li class="card" data-index="${index}">
            <ul class="card-box">
              <li class="${product.img}"></li>
              <li class="card-content-box">
                <ul>
                  <li class="delete-card-btn-box"><button class="delete-card-btn">Delete</button></li>
                  <li class="card-title">${product.name}</li>
                  <li class="card-desc">${product.desc}</li>
                  <li class="price">${product.price}</li>
                </ul>
              </li>
            </ul>
          </li>
        `;
        cartCardBox.insertAdjacentHTML('beforeend', cartCardHTML);
      });
    }


    Удаление элемента по индексу

    window.addEventListener('click', function(event) {
      if (event.target.classList.contains('delete-card-btn')) {
        const card = event.target.closest('.card');
        const index = parseInt(card.dataset.index, 10); // Получите индекс из атрибута data-index
    
        const products = JSON.parse(localStorage.getItem('productInfo'));
        products.splice(index, 1); // Удаляет элемент по индексу
        localStorage.setItem('productInfo', JSON.stringify(products)); // Сохраняем измененный массив обратно в localStorage
    
        card.remove(); // Удаление HTML карточки
      }
    });
    Ответ написан
    1 комментарий
  • Как сделать горизонтальный виртуальный скролл?

    dedalik
    @dedalik
    Веб разработчик
    Привет, тут нужен виртуальный горизонтальный скролл, который будет подгружать страницы, когда они становятся видимы в браузере. Не знаю на чём ты делаешь проект, если например на реакте, то библиотек очень много и сделать проще. Тут, на всякий случай хорошая библиотека для реакт https://tanstack.com/virtual/latest/docs/introduction

    Я предполагаю, что ты делаешь на чистом javascript и сделал тебе пример как это работает https://codesandbox.io/p/sandbox/virtual-scroll-ho... Твоя задача, это вставить свой контент в javascript.

    Для примера я использую готовый пример виртуального скрола, который можно найти на github https://github.com/tbranyen/hyperlist
    Ответ написан
    2 комментария
  • Как по клику подгрузить файл css в nodeJs?

    dedalik
    @dedalik
    Веб разработчик
    Чтобы файл подключился нужно этот файл вставить в дом в теге link

    // vanilla js
    document.querySelector('.elem-to-click').addEventListener('click', function() {
      var link = document.createElement( "link" );
      link.href = "style.css";
      link.type = "text/css";
      link.rel = "stylesheet";
    
      document.getElementsByTagName( "head" )[0].appendChild( link );
    });
    
    // jQuery
    $('.elem-to-click').on('click', function() {
      $('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
    });
    Ответ написан
    Комментировать
  • Как импортировать модули в Web Workers?

    dedalik
    @dedalik
    Веб разработчик
    В node.js модули импортируются с помощью require()

    const { parentPort } = require('worker_threads');
    Ответ написан
    Комментировать
  • Автокомплит, как сделать несколько value и получить второй запрос?

    dedalik
    @dedalik
    Веб разработчик
    Привет, у `easyAutocomplete` есть встроенные функции, с помощью которых можно получить дополнительные данные. В вашем случае вам подойдёт функция `getSelectedItemData()`, которая отобразит `id`. Далее этот `id` вам нужно приложить к вашему скрипту `(/price.php?city="+ id")`.

    Пример получения дополнительных данных из массива:

    <input id="function-data" />
    <input id="data-holder" />


    var options = {
    	data: [
    		{"character": "Cyclops", "realName": "Scott Summers"},
    		{"character": "Professor X", "realName": "Charles Francis Xavier"},
    		{"character": "Mystique", "realName": "Raven Darkholme"},
    		{"character": "Magneto", "realName": "Max Eisenhardt"}
    		],
    
    	getValue: "character",
    
    	list: {
    
    		onSelectItemEvent: function() {
    			var value = $("#function-data").getSelectedItemData().realName;
    
    			$("#data-holder").val(value).trigger("change");
    
                            // Тут вы можете делать манипуляции с вашим вторым скриптом
    		}
    	}
    };
    
    $("#function-data").easyAutocomplete(options);
    Ответ написан
    Комментировать
  • Slick slider как сделать чтобы листал слайд при скроле?

    dedalik
    @dedalik
    Веб разработчик
    Попробуйте так:
    .on('wheel', function (e) {
        e.preventDefault();
    
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        if(delta > 0) {
            $(this).slick('slickPrev');
        }
        else {
            $(this).slick('slickNext');
        }
        return false;
    });
    Ответ написан
    1 комментарий
  • Как добавить анимацию для раскрывающего поиска?

    dedalik
    @dedalik
    Веб разработчик
    Нужно убрать добавление свойства display: none

    let searchValid = false;
    
    $('.search__icons').click(function() {
        if(searchValid == false){
          $('.search__icons').css('background', '#F8F8F8');
          $('.search__input').css('display', 'block');
          $('.search__input').css('width', '515px');
          $('.search__icons').css('border-radius', '3px 0 0 3px');
          $('.search__input').addClass('search__input--anim');
          $('.contact__number').css('display', 'none');
          searchValid = true;
        } else {
          $('.search__icons').css('background', '#F9E8FA');
          //$('.search__input').css('display', 'none'); - из-за этого не срабатывает анимация
          $('.search__input').css('width', '0');
          $('.search__input').css('padding', '0');
          $('.search__icons').css('border-radius', '3px');
          $('.search__input').addClass('search__input--anim');
          $('.contact__number').css('display', 'block');
          searchValid = false;
        }
        
    });
    Ответ написан
    Комментировать
  • Можно ли отследить отмену загрузки страницы на жабаскрипт?

    dedalik
    @dedalik
    Веб разработчик
    Можно отследить, что пользователь закрыл окно браузера и в промежутке перед закрытием выполнить скрипт
    https://developer.mozilla.org/ru/docs/Web/API/Wind...

    window.addEventListener("beforeunload", function(event) { 
    // страница браузера закрывается
    });

    В вашем случае ещё можно использовать Document.visibilityState, в тот момент, когда пользователь возвращается на страницу с гифкой отключаем гифку
    https://developer.mozilla.org/en-US/docs/Web/API/D...

    let wasHidden = false;
    
    const onVisibilityChange = () => {
      if (wasHidden && document.visibilityState === 'visible') {
        // Тут убираем гифку
      }
      if ( document.visibilityState === 'hidden' ) {
        wasHidden = true;
      }
    };
    
    document.addEventListener('visibilitychange', onVisibilityChange);
    Ответ написан
    Комментировать
  • Как отследить ЗАЖАТИЕ кнопки javascript?

    dedalik
    @dedalik
    Веб разработчик
    Можно проверять нажатие кнопки мыши, задать промежуток времени, которое определяет, что пользователь удерживает кнопку, в примере 1 сек

    const timeout = 1000;
    let idTimeout;
    
    window.addEventListener('mousedown', function() {
      idTimeout = setTimeout(function() {
          // Кнопка нажата более 1 секунды
      }, timeout);
    });
    
    window.addEventListener('mouseup', function() {
      clearTimeout(idTimeout);
    });
    Ответ написан
  • Как передать ключ от апи на сайте что бы его не увидели?

    dedalik
    @dedalik
    Веб разработчик
    Если запросы производятся с фронтенда, то никак. Его можно просто скрыть, от глаз не профессионала. Но по факту, более менее знающий человек его найдёт.
    Если с бэкенда то можно.

    Ваш аккаунт будет привязан к домену, поэтому вам ничего беспокоится о ключе.
    Ответ написан
  • Как отследить, какой скрипт JS изменил содержимое элемента?

    dedalik
    @dedalik
    Веб разработчик
    На форуме наверное тонна кода, поэтому можно просто взять id или class контейнера, в который загружаются данные и пройтись поиском по всем файлам проекта.
    Все события на js вешаются на элементы по id, class и атрибутам
    Ответ написан
    Комментировать
  • Как воспроизвести локальный файл?

    dedalik
    @dedalik
    Веб разработчик
    Привет!

    Если не ошибаюсь, это должно выглядет так:

    var audio = new Audio(chrome.runtime.getURL('Sounds/1.mp3'));
    audio.play();


    И в manifest.json

    "web_accessible_resources": [ "*.mp3" ]
    Ответ написан
  • Как написать нормальной функцией?

    dedalik
    @dedalik
    Веб разработчик
    Привет, да с id это не правильно, так как можно забыть и про дублировать одинаковые id. Можно попробовать через loop, что-то вроде этого:

    const panels = document.getElementsByClassName("panel");
    const i;
    
    for (i = 0; i < panels.length; i++) {
      panels[i].addEventListener("click", function() {
       // тут ещё можно поставить удаление у всех акордионов класса 'active', если необходимо
        this.classList.toggle("active");
        const panel = this.nextElementSibling;
        if(this.classList.contains('active')){
             this.classList.add('changing-icon');
        } else {
           this.classList.remove('changing-icon');
        }
       if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
      });
    }


    <button class="panel">Аккордеон 1</button>
    <div class="panel-body">
      <p>текст аккордеона</p>
    </div>
    Ответ написан
    Комментировать
  • Как сделать запрос на сервер в форме которая находится в popup?

    dedalik
    @dedalik
    Веб разработчик
    Здравствуйте!

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

    const forms = document.querySelectorAll('form');
      forms.forEach(form => {
        form.addEventListener('submit', function (e) {
          e.preventDefault();
          const formData = new FormData(this);
    
          ajaxSend(formData)
            .then((response) => {
              form.reset();
            })
            .catch((err) => console.error(err))
        });
      });
    Ответ написан
    2 комментария
  • Как использовать javascript для junior backend разработчика на php?

    dedalik
    @dedalik
    Веб разработчик
    Я вас скажу, что наоборот, каши не будет, просто вы увидите, что все языки очень похожи, только отличается синтаксис. У всех есть переменные, функции, типы, классы и тд.

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

    По поводу junior fullstack, сделать можно, только проект у вас выйдет как junior. Если вы будете получать новые знания, то каждый раз, когда вы будете возвращаться в проект, вам будет казаться, что это за парень, который так написал код ))

    Если про javascript, то если у вас нет сложной логики, которая требует использовать библиотеки react, vue, angular, то писать фронтенд на чистом javascript, я бы не советовал, так как вы будете писать много лишнего кода. Лучше использовать jQuery, а дополнительный функционал можно описать в функциях с помощью js. Это облегчит разработку на стадии обучения.
    Ответ написан
    Комментировать
  • Какие есть бесплатные трекеры ошибок в JS?

    dedalik
    @dedalik
    Веб разработчик
    Попробуй это - https://sentry.io/pricing/ есть бесплатная версия
    Ответ написан
    Комментировать
  • Как скрыть сплывающее title при наведении на ссылку?

    dedalik
    @dedalik
    Веб разработчик
    Нужно убрать атрибу title=""
    <a href="">Ссылка</a>

    В fancybox можно использовать атрибут data-fancybox-title вместо title

    <a href="" data-fancybox-title="Заголовок">Ссылка</a>
    Ответ написан
    1 комментарий
  • Почему blur Срабатывает дважды?

    dedalik
    @dedalik
    Веб разработчик
    Потому что вы вызываете onblur дважды, первый раз в атрибуте onblur="", а второй раз с помощью jQuery
    Ответ написан
    Комментировать