Ответы пользователя по тегу JavaScript
  • Как реализовать прокрутку текста с помощью табов?

    @alexalexes
    1. Определяете список заголовков.
    2. Определяете offsetTop у каждого заголовка.
    3. Определяете scrollTop у прокручиваемого блока.
    5. Определяете по offsetTop-ам i-ый и i+1 заголовок, где находится значение scrollTop.
    6. Для стрелки вверх делаете scrollTo до i-ого заголовка.
    7. Для стрелки вниз делаете scrollTo до i+1 заголовка.
    8. Если i-ого или i+1 заголовка нет, то гасите кнопку.
    9. На событии скроллинга нужно анализировать пункты 1-8, чтобы кнопки вовремя гасились.
    Ответ написан
    Комментировать
  • Можно ли задавать кривые Безье для функций js?

    @alexalexes
    https://easings.net/ru#
    Открываете любой график.
    Внизу приведена формула математической функции.
    Ее используете для создания своего JS аналога.
    Ответ написан
    Комментировать
  • Как обрабатывать Undefinded в JSON (Ajax jquery)?

    @alexalexes
    Если у вас железобетонно всегда присутствует объект data.noticeInfo, но временами отсутствует свойство document, то можно проверять наличие так:
    if('document' in data.noticeInfo)
    {
    }

    или так, если нужно различать свойства обусловленные прототипом и доприсвоенные свойства:
    if(data.noticeInfo.hasOwnProperty('document'))
    {
    }

    Если свойство лежит глубоко, а проверять существование цепочки свойств/объектов до него лень, не схлопотав предупреждения отладчика, или запись получается слишком громоздка, то нужен аналог функции isset из PHP для JS.
    if(typeof data.noticeInfo.document != "undefined" && data.noticeInfo.document !== null)
    {
    }
    Ответ написан
    Комментировать
  • Как сортировать с приоритетом массив?

    @alexalexes
    Первым действием перетранслируйте этот массив во вспомогательную структуру:
    {
        100: // groupId
        {
           1:  [1, 3], // source: [id, id, .....]
           2: [2]
        },
       ......
    }

    Тогда вам будет проще снимать метрики для сортировки: считать какие source есть у группы (сколько, каких нет), и какие id входят в source.
    Ответ написан
  • Ошибка Uncaught TypeError: Cannot read property '2' of null?

    @alexalexes
    У вас несоответствие бизнес-логики формирования цены товара на стороне сервера (то что получаете в response.prices), и как вы ее пытаетесь обработать функцией getSapogCost() на стороне клиента. Либо у вас не обрабатываются какие-то исключительные случаи, например, когда товар отсутствует в продаже, а сервер в качестве response.prices не возвращает тот объект, который может обработать данная функция.
    Ответ написан
    Комментировать
  • Почему onClick рабоает перед submit?

    @alexalexes
    <script type="text/javascript">
    $( "form" ).submit(function( event ) {
    event.preventDefault();
    var formData = new FormData(); 
    formData.append("f1",  document.querySelector("input[name='f1']").value);
    formData.append("f2",  document.querySelector("input[name='f2']").value);
    formData.append("f3",  document.querySelector("textarea[name='f3']").value);
    var request = new XMLHttpRequest();
    request.open('POST', 'http://mydape.ru');
    request.onload = function()
    {
      window.location.href="https://google.com"; // перенаправляем на гугль.
    };
    request.send(formData);
    });
    </script>
    Ответ написан
    Комментировать
  • Как добавить текст к value при отправке?

    @alexalexes
    Добавляете еще одно скрытое поле с id="field_name_hidden", видимому полю присваиваете id="field_name_showed". Добавляете форме свой обработчик события onsubmit.
    <form .... onsubmit="my_submit(e)">
    ...
    <label>Имя</label>
    <input id="field_name_showed" type="text"  value=""> <!-- Поле, которое видит пользователь -->
    <input id="field_name_hidden" type="hidden"  value=""> <!-- Скрытое поле для отправки -->

    function my_submit(e)
    {
      e.preventDefault(); // останавливаете выполнение сабмита
      document.getElementById("field_name_hidden").value = document.getElementById("field_name_showed").value + " (добавленный текст)"; // добавляете в скрытое поле формы имя и что хотели еще.
     e.target.submit(); // перезапускаете сабмит формы
    }

    На стороне сервера перехватываете значение поля field_name_hidden.
    Ответ написан
    Комментировать
  • Как зупустить таймер по окончанию?

    @alexalexes
    Создайте функцию получения времени следующего понедельника
    function init_counter_time()
    {
    var d = new Date();
    d.setDate(d.getDate() - (d.getDay() + 6 ) % 7 + 7);
    d.setHours(0);
    d.setMinutes(d.getTimezoneOffset()); // компенсируем смещение временной зоны у пользователя.
    d.setSeconds(0);
    d.setMilliseconds(0);
    return d.getTime(); // обратите внимание, что время извлекается по таймзоне +0000!!!
    }

    И используйте при инициализации:
    // var countDownDate = new Date('10 October 2020 21:00').getTime();
    var countDownDate = init_counter_time();

    и при обнулении счетчика:
    if (distance < 0) {
           // clearInterval(x);
          countDownDate = init_counter_time();
        }
    Ответ написан
    1 комментарий
  • Почему не работает условие ИЛИ?

    @alexalexes
    То что вы пытаетесь написать:
    if (question === 1||3)
    Значит: "условие ИЛИ какое-то число, эквивалентно true". То есть 3 - это эквивалент true. Ноль будет эквивалентом false. Посмотрите, чему будут эквиваленту отрицательные числа, мне лень смотреть документацию или пробовать консоль.

    В вашем случае, решение будет выглядеть так:
    if (question === 1|| question === 3)
    Если охота использовать перечисление в надежде сократить условие, то это может выглядеть так:
    if ([1,3].indexOf(question) > -1)
    Ответ написан
    Комментировать
  • Как сосчитать повторяющиеся буквы?

    @alexalexes
    Вариант с минимальными изменениями
    function RST(str){
    let arr = str.split('');
    let num = 1;
    let result = '';
    for(let i = 1; i < arr.length; i++){
      if(arr[i] == arr[i-1]){
        num++;
      } else {
        result += arr[i-1] + num; // тут была ошибка
        num = 1;
      }
    }
    // Нужно допечатать последнее накопление num
    if(arr.length > 0)
     result += arr[arr.length-1] + num;
    return result;
    }
    Ответ написан
    Комментировать
  • Какой самый быстрый способ итерации массива в JS?

    @alexalexes
    Если заостряться в оптимизации скорости циклов, то я js/php придерживаюсь двух правил:
    1) Если количество элементов в массиве на протяжении всего цикла не предполагает изменения, то количество элементов лучше посчитать заранее. Так мы избежим обращения к length при каждой итерации, если интерпретатор совсем туп.
    2) Если к i-му элементу идет много обращений в течении одного хода цикла, то этот элемент лучше вытащить отдельным указателем на него.
    Все остальное - экономия на спичках.
    var item_count = array.length; // считаем заранее кол-во
    for(var i = 0; i < item_count; i++)
    {
      var item = array[i]; // вытаскиваем ссылку на элемент для простоты доступа
      ...
    }
    Ответ написан
    Комментировать
  • Как сделать валидацию формы на стороне клиента в реальном времени?

    @alexalexes
    Используйте событие input для вызова этого обработчика.
    Есть еще ряд событий, которые возникают в при разном характере воздействия на элемент управления. Пробуйте, экспериментируйте, выбирайте, что вам подходит (change и события нажатий клавиш уже используете, но видимо, не то).
    Ответ написан
    Комментировать
  • Как можно выводить результаты JS не через идентификатор, а классы?

    @alexalexes
    Возьмите элементы с помощью getElementsByClassName и переберите их в цикле, вставив нужные сведения.
    var elems = document.getElementsByClassName('your_class');
    var elem_count = elems.length;
    for(var i = 0; i < elem_count; i++)
    {
       elems[i].innerHTML = 'Какие-то данные';
    }
    Ответ написан
    Комментировать
  • Как перехватить защищенный JS?

    @alexalexes
    Вам поможет среда PhantomJS.
    https://github.com/diggin/php-PhantomjsRunner
    В ней подожгете событие на нужной кнопке, подождете чуть-чуть и выцепите ссылку.
    Ответ написан
  • Множественное удаление строк в таблице?

    @alexalexes
    но может быть есть уже готовая библиотека которая позволяет с выбранных строк отправить данные на сервер для их удаления,

    Как правило, библиотеки визуализации предоставляют возможность отображать данные клиенту в определенной форме по модели данных, заключенной в окружении JS. Этим и ограничивается виджет.
    Вам нужно самим взять обработчики событий, наполнить модель данных виджета при инициализации или фиксации изменений.
    То есть, дополнительно самим выбрать, каким способом вы будете общаться с сервером в обработчиках событий: нативным XMLHttpRequest, JQuery ajax или какой-нибудь axios. В вашем случае, разработчики виджета не дают такую возможность в бесплатной версии.
    Также, вам нужно выбрать, каков будет формат сообщений для сервера.
    Безусловно, он будет обернут в json. Как будут определены полезные данные, передача кодов и сообщений об ошибках - вы сами определяете.
    Как будет устроен интерфейс запросов к функциям сервера?
    Сейчас популярна REST модель, TreeQL, GraphQL, хотя вы можете придумать свою систему параметров и команд для модификации данных.
    Как переводить запрос от клиента в запросы сервера базы данных?
    Выше упомянутые REST модель, TreeQL, GraphQL могут обеспечить роутинг по выполнению функций на стороне сервера и само выполнение функции, но, как правило, вам еще нужно будет сконструировать SQL-запрос с помощью ORM или сделать свой велосипед.
    Как видите, чтобы что-то вписать в таблицы вам нужно согласовать выбор еще некоторых компонентов стека системы. Не только выбрать один компонент, который работает на фронтенде.
    P.S. еще одна проблема заключается в том что все примеры Datatables используют на стороне сервера PHP, который я не использую да и к тому же не знаю.

    JS+PHP - типичная связка стека фронтенд+бэкенд, а так же выбранным вами компонент, рассчинан именно на массового пользователя, использующего именно эту связку. Если компонент имеет строго фронтэнд реализацию, реализация кода на бэкенде лишь пример для правильного взаимодействия с фронтендом, то вам ничего не стоит переписать логику на свой бэкенд, главное соблюсти формат сообщений между ними.
    Ответ написан
  • Как сгенерировать нечётное рандомное число?

    @alexalexes
    Нечетное число n можно выразить через параметр t:
    n = 2* t - 1
    Будем рандомизировать параметр t и переводить его в n, но нужны минимальное значение и максимальное.
    min = 2 * t - 1, отсюда:
    t_min = (min + 1) / 2
    max = 2 * t - 1, отсюда:
    t_max = (max + 1) / 2
    Деление, скорее всего целочисленное.
    Получается:
    var n_random = 2 * randomEvenInt((min + 1) / 2,  (max + 1) / 2) - 1;
    Ответ написан
    Комментировать
  • Как очистить корзину после заказа?

    @alexalexes
    Посмотрите функцию showCart. При каких условиях она рисует пустую корзину, такое состояние поставьте в cart.
    function delGoods()
    {
        cart = {}; // ... я поставил пустой объект, к примеру.
        saveCart();
        showCart();
    }
    Ответ написан
    Комментировать
  • Как в js div тянуть другому div?

    @alexalexes
    Копать в математику 7 класса или в алгебру 1 курса универа, раздел "линейные функции".
    Дано:
    1. координата курсора мыши в момент захвата блока: (x1, y1);
    2. координата курсора мыши после протягивания: (x2, y2);
    3. координата центра красного блока: (x3, y3);
    4. координата центра синего блока: (x4, y4);
    Проблема 1 - как определить, можно двигать блок или нет?
    Ответ 1.
    Замечаем, что точки (x1, y1) и (x2, y2) - образуют линию L1 - это прямая траектория движения мыши.
    А точки (x3, y3) и (x4, y4) - образуют линию L2 - это прямая траектория, по которой должен двигаться один из квадратов.
    L1 имеет коэф. линейной функции k1, который вычисляется как k1 = ((y2 - y1) - b1) / (x2 - x1);
    L2 имеет коэф. линейной функции k2, который вычисляется как k2 = ((y4 - y3) - b2) / (x4 - x3);
    Но на самом деле, нас интересуют не эти коэф-ты, а дифференциалы, поэтому b1, b2 - постоянные коэф. можно откинуть:
    d1 = (y2 - y1) / (x2 - x1);
    d2 = (y4 - y3) / (x4 - x3).
    Когда можно двигать блок?
    Когда d1 ~ d2 c некоторой погрешностью r, то есть:
    |d1 - d2| <= r1
    Коэф. ошибки r1 будет больше, чем меньше (y2 - y1), (y4 - y3), (x2 - x1), (x4 - x3).
    Коэф.-ты d1, d2 имеют невычисляемые случаи, когда x2 = x1, или когда x4 = x3, но строгости равенства трудно добиться, поэтому проверяем на коэф. ошибки малой величины r2.
    (x2 - x1) <= r2 или (x4 - x3) <= r2.
    Сначала проверяется возможность вычисляемости d1 и d2.
    если они вычисляемые и критерий |d1 - d2| <= r1 выполняется, то блок двигать можно.
    Если один из диф-лов не вычисляем, а другой - вычисляем, то блок двигать нельзя.
    Если оба диф-лов невычисляемы, то если у (y2 - y1) и (y4 - y3) знак результата одинаков, то блок двигать можно.
    Это только конец первого этапа, дальше вам пригодятся d1, d2 коэф.-ты, а также нужно вычислить интервал соприкосновения блоков, но эта уже другая история.
    Ответ написан
    Комментировать
  • Как отследить появление элемента на экране и получить его id?

    @alexalexes
    Самым ленивым способом эту функцию можно переписать так:
    var block_show = []; // начальный массив, можно не инициировать null-ами
     
    function scrollTracking(){
      var wt = $(window).scrollTop();
      var wh = $(window).height();
      var elems = $();  // тут пишем селектор для выбора коллекции элементов, позиции которых нужно отследить
      var elem_count = elems.length;
     // перебираем элементы, и выводим что появилось на экране, что нет.  
      var et = null, eh = null;
    for (var i = 0; i < elem_count; i++)
      {
     et = elems[i].offset().top;  // тут уже получаем параметр от i-ого элемента
       eh = elems[i].outerHeight(); // тут уже получаем параметр от i-ого элемента
     
      if (wt + wh >= et && wt + wh - eh * 2 <= et + (wh - eh)){
        if (block_show[i] === undefined || block_show[i] === null || block_show[i] === false) { // анализ block_show тоже от i-ого элемента
          console.log('Блок ' + i + ' в области видимости');
        }
        block_show[i] = true;  // установка block_show тоже от i-ого элемента
      } else {
        if (block_show[i] === undefined || block_show[i] === null || block_show[i] === true) { // анализ block_show тоже от i-ого элемента
          console.log('Блок ' + i + ' скрыт');
        }
        block_show[i] = false; // установка block_show тоже от i-ого элемента
      }
      } // конец цикла обхода отслеживаемых элементов
    }

    Обратите внимание, что в if-ах проявилось сравнение с undefined, это позволяет не создавать первоначальный массив, наполненный null-ами, но можно наполнить по числу отслеживаемых элементов. И все сравнение идут по === это позволяет учитывать типы переменных при сравнении, оно более строгое.
    Ответ написан
  • В чем может быть ошибка Select2?

    @alexalexes
    К переменной data применяют метод работы с массивом slice(), но в этот момент data не является массивом (он же object в понимании JS).
    Такие ошибки возникают, когда перед обработкой массива забывают прописать исключительные состояния, когда объект data может быть сформирован не в виде пустого массива, а, например, может содержать в себе сведения об ошибке, переданные из слоя абстракции, который в обычной ситуации генерирует data как массив.
    Ответ написан
    Комментировать