Задать вопрос
Ответы пользователя по тегу JavaScript
  • Как сделать валидацию на нескольких инпутах, и не зависимые от модально окна?

    @alexalexes
    Чешите валидацию не по всему документу, а по форме.
    Параметр формы у вас передается внутрь функции.
    Было:
    let formReq = document.querySelectorAll('._req');
    Должно:
    let formReq = form.querySelectorAll('._req');
    Ответ написан
    1 комментарий
  • Не работает slick слайдер после того, как отображаю слайды с помощью JS с подгрузкой json данных?

    @alexalexes
    Как foreach-ем обходили контейнеры, чтобы инициализировать каждый слайдер:
    $(какой-то селектор элемента или нода).slick(какие-то свойства инициализации);

    Таким же путем нужно пробежаться по всем слайдерам и дать им команду обновить свое состояние (refresh) после того, как отработает функция renderProducts.

    $('.slider__body').each(function () {
      $('.slider', $(this)).slick('refresh')
      $('.slick__thumbs', $(this)).slick('refresh')
    })
    Ответ написан
  • Как отрисовать страницу при асинхронном POST запросе?

    @alexalexes
    Если у вас строго режим одностраничного сайта, то да, сами перелицовываете body в любой непонятной ситуации (на самом деле для такой модели подбирают подходящий клиентский фреймворк. сами вы вряд ли охватите все обработчики событий, чтобы не заботится об реактивности блоков всей страницы). При этом нужно не забывать вести url history, чтобы адрес страницы фиктивно изменялся, следуя логике посещения виртуально нарисованных разделов сайта.
    Или же у вас не строго одностраничный сайт, то...
    Если у вас только некоторые контейнеры на странице обновляют сведения по ajax, то на какие-то действия нужно вызывать перезагрузку страницы, изменяя windows.location.href / windows.location.reload.
    Ответ написан
    Комментировать
  • Как сделать динамичное извлечение из JSON?

    @alexalexes
    Перевести в массив объект -> если есть элементы, то ... отмапать элементы с нужным дополнением li -> объединить массив с пустым разделителем.
    `<div class="store__text">` + (Object.entries(item.desc[0]).length > 0 ? `<ul>` +Object.entries(item.desc[0]).map((desc_item) => `<li>` + desc_item[1] + `</li>`).join(``) + `</ul>` : ``)
          + `</div>`
    Ответ написан
    3 комментария
  • Сделать валидацию формы это задача для джуна или мидла?

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

    @alexalexes
    Возможно, если сама СУБД будет давать необходимый API для веб клиентов (который не будет работать из коробки, нужны определенные действия по настройке со стороны администратора СУБД).
    Яркий пример - Oracle REST Data Services.
    Но не каждый производитель СУБД заморачивается над разработкой подобных сервисов. Главное, чтобы самые популярные среды разработки серверных приложений имели необходимое расширение или драйвер, чтобы подключаться к СУБД на стороне сервера. Остальное - головная боль прикладных разработчиков.
    Ответ написан
    Комментировать
  • Как сделать табы с выводом из бд?

    @alexalexes
    Выводить также как из любого другого источника данных.
    1. Подготовьте источник данных.
    - Разверните службу СУБД в операционной системе сервера.
    - Выберите менеджер, чем вам будет удобно просматривать объекты СУБД.
    - Установите менеджер СУБД.
    - При помощи менеджера СУБД заведите пользователя базы данных, схему базы данных, структуру таблиц и связей, вставьте необходимые данные.
    2. Изучите способы подключения к источнику данных и взаимодействия из PHP (как делать коннект к СУБД, как подготавливать запросы и параметры к ним, как фетчить результат выборки запроса).
    3. Подключитесь к базе, выполните запрос, встройте выборку результата в ваш шаблон HTML (табы).
    Ответ написан
    3 комментария
  • Как сделать так, чтобы элемент можно было тащить влево-вправо?

    @alexalexes
    1. На десктопе рулят события мыши: mousedown - эквивалент touchstart, mousemove - эквивалент touchmove, mouseup - эквивалент touchend.
    2. Вместо множества точек касаний (пальцы) у вас одна точка - курсор мыши, поэтому свойства changedTouches в объекте события не будет.
    3. Тестировать, что окружение браузера имеет сенсорный экран, можно проверкой наличием доступного свойства любого события touch в window:
    if("touchstart" in window)
    {
      // работаем с сенсорными обработчиками
    }
    else
    {
      // работаем с мышиными обработчиками
    }

    4. Событие завершения управления элементом (touchend, mouseup) лучше вешать не на сам элемент item, а на его контейнер, который будет занимать всю ширину экрана (идеально, если это будет body). Логика обработки может застрять на обработчике move, если во время движения точка воздействия на объект убежит за пределы объекта.
    В определенных случаях могут выручить события mouseover/mouseout.
    Ответ написан
    Комментировать
  • С помощью чего сделан эффект как на сайте https://www.fromscout.com/?

    @alexalexes
    Анимация по ключевым кадрам.
    animation: main-logo-texture 10s linear infinite;
    Ключевые кадры:
    @keyframes main-logo-texture {
        0% {
            transform: translate(0)
        }
    
        to {
            transform: translate(-99px)
        }
    }
    Ответ написан
    3 комментария
  • Как кликнуть по элементу у которого один Class но элементов таких 10?

    @alexalexes
    Если не хотите forEach-ем, то переберите по старинке через for.
    let Nlist = document.querySelectorAll(".chain_cnt_head");
    for(let i = 0; i < Nlist.length; i++)
    {
       Nlist[i].click();
    }
    Ответ написан
    1 комментарий
  • Как правильно заменить текст в html?

    @alexalexes
    Функция ViewGifImage не нативная, а скорее всего ее реализация прописана в какой-то подключаемой библиотеке JS.
    Нужно погуглить спецификацию этой библиотеки, и посмотреть в доках, за что отвечает параметры в функции ViewGifImage.
    Если я предположу (я не знаю, что за библиотека и не видел ее документации!), что первый параметр отвечает за указатель на html узел, куда вывалить бинарный ресурс изображения, то нужно как-то обозначить теги, чтобы указатели на эти теги выцепить из DOM через JS. Например, я хочу им задать уникальные идентификаторы:
    <img id="image-1234" src="/какой-то путь/qa_2023-02-01-212831-1.gif">
    <img id="image-5678" src="/какой-то путь/qa_2023-02-01-212831-2.gif">

    Тогда из DOM я буду доставать указатели на эти элементы через функцию getElementById.
    <script type="text/javascript">
    let image_1234 = document.getElementById("image-1234"); // тут получаем ссылку на элемент с id="image-1234"
    // далее, используем ее вместо this
    ViewGifImage(image_1234, 'sitedb/log/QA/General/SfpBCTuningCheck/gfx/qa_2023-02-01-212831-1.gif','sitedb/log/QA/General/SfpBCTuningCheck/gfx/qa_2023-02-01-212831-1.pix','322','242','ReflectionResultPlot','Frequency in MHz','0','Reflection Factor |r|','0','1','xffffff x000000 x000000 xff0000 x0000ff x00df00 xff00ff xff7f00','2','158','1','Reflection 0 Degrees','158','1','Reflection 90 Degrees','','','','','','','','','');
    
    let image_5678 = document.getElementById("image-5678"); // тут получаем ссылку на элемент с id="image-5678"
    // далее, используем ее вместо this
    ViewGifImage(image_5678, 'sitedb/log/QA/General/SfpBCTuningCheck/gfx/qa_2023-02-01-212831-2.gif','sitedb/log/QA/General/SfpBCTuningCheck/gfx/qa_2023-02-01-212831-2.pix','322','242','TransmissionResultPlot','Frequency in MHz','0','Transmission |t| in db','0','1','xffffff x000000 x000000 xff0000 x0000ff x00df00 xff00ff xff7f00','2','158','1','Transmission 0 Degrees','158','1','Transmission 90 Degrees','','','','','','','','','')
    </script>
    Ответ написан
  • Странное поведение document.write()?

    @alexalexes
    Для записи многострочного текста в качестве параметра или переменной в JS нужно использовать обратные кавычки.
    // Как у вас:
    let a = 'Много
    строчный
    текст';
    // как корректно
    let a = `Много
    строчный
    текст`;
    // как выкрутиться, если у вас не ES6
    var a = "Много\
    строчный\
    текст";
    Ответ написан
  • Браузер блокирует скачиваение с сайта нескольких файлов подряд. Как предупредить пользователей?

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

    @alexalexes
    1. Сначала занулите свойство анимации. Потом вызовите setTimeout с нулевым временем, чтобы JS применил изменения анимации в DOM и внутри setTimeout добавьте свойство анимации. Тогда анимация перезапустится.
    nickinput.style.animation = "none";
      setTimeout(function() {
        if (validmail === false) {
            mailinput.style.animation = "blinker 0.6s linear 3";
        }
        }, 0);

    2. Задайте какой-нибудь color в ключевом кадре:
    @keyframes blinker {
      50% {
        background-color: #b11515;
        color: #aaa;
      }
    }
    Ответ написан
    3 комментария
  • CSS как сверстать вертикальное расположение? либо JS как правильно находить элемент в DOOM?

    @alexalexes
    Можно указывать нужный элемент с помощью псевдоселекторов:
    let life = lifesBlock.querySelector("span:first-child");

    или
    let life = lifesBlock.querySelector("span:last-child");
    Ответ написан
    Комментировать
  • Как сделать фото с камеры HTML js?

    Комментировать
  • Как записать данные с LocalStorage в таблицу?

    @alexalexes
    for(let i = 0;i < rows;i++){ // вы собираетесь сначала создать строку, а по кол-ву строк идут игроки, значит нужно брать число rows, а не cols
            let tr = document.createElement('tr');
      
          for(let j = 0;j < cols;j++){ // а тут cols, но тут еще нужна другая переменная для счетчика, i уже используется для индекса rows
            let td = document.createElement('td'); 
            if(j == 1) // мы ведь хотим добавить контент на вторую колонку (по индексу 1)?
            {
             td.innerHTML = localStorage.getItem(i + ""); // добавляем значение, "" - нужен, чтобы получить ключ по j в виде строки
            }
            tr.appendChild(td);
          }

    ЗЫ: Мне не нравится, что у вас некий массив очков вывален по индексам (которые 0-3) прямо в хранилище по ячейкам ключ-значение. Хорошо бы, чтобы этот массив лежал в одной ячейке хранилища под своим именем. Для этого этот массив нужно преобразовать в JSON и положить в отдельную именованную ячейку. И пользоваться значением этой ячейки нужно будет с кодированием и декорированием JSON строки.
    Ответ написан
    1 комментарий
  • Как ограничить длину массива?

    @alexalexes
    Можно старым добрым процедурным методом ограничить.
    function present () {
      if(visitinMagazine.length < 25)
        visitinMagazine.push(true);
      else
      {
       // что-то сделать при переполнении
      }
    }
    function absent() {
      if(visitinMagazine.length < 25)
        visitinMagazine.push(false);
       else
      {
       // что-то сделать при переполнении
      }
    }

    Или вам нужно чтобы сам тип данных "массив с ограничением" это делал?
    Ответ написан
    Комментировать
  • Как узнать есть ли на кнопке клас?

    @alexalexes
    1. Вставить класс.
    2. Передернуть поток выполнения JS, чтобы класс добавился в DOM, то есть вызвать вашу функцию внутри обертки setTimeout c нулевым временем ожидания.
    Ответ написан
    Комментировать
  • Возможно ли в electron-приложении защитить данные?

    @alexalexes
    Надежен до момента, пока пользователь не имеет возможность скопировать образ раздела жесткого диска с ОС и восстановить его где-нибудь на другом железе/виртуальной машине.
    От какого пользователя защищаетесь?
    От обычного пользователя, у которого нет прав на администрирование/восстановление ОС (или он это не умеет). Или от продвинутого, который за каждой мелочью правит конфиги и реестры, умеет переустанавливать ОС и делать восстановление из образа?
    Если нужно привязать софт к конкретному пользователю и к конкретному железу, то стараются собрать об окружении ОС, в которой выполняется софт, как можно больше сведений: версия ОС, какое имя текущего пользователя системы, идентификаторы процессора, материнской платы - этот набор данных представляет собой фингерпринт, который отправляется при каждом запуске софта на сервер разработчика софта и прикрепляется за учетной записью клиента софта в виде полных сведений, либо в виде хэша по значимым характеристикам (хэш получают только на стороне сервера). Если значимые параметры отличаются от того, что прислал клиентский софт, то значит есть факт изменения конфигурации оборудования и можно принять решение о блокировке софта/учетной записи (оно же лишение лицензии).
    Ответ написан