Задать вопрос
Ответы пользователя по тегу JavaScript
  • Что значит и как работает аргумент e в данном коде?

    @alexalexes
    У второго параметра replace, когда он используется в качестве функции есть в документации раздел по этому поводу.
    В параметр e передается результат работы регулярки.
    То же самое, что дает метод match применительно к строке.
    Ответ написан
    1 комментарий
  • Как перебирать массивы, которые находятся внутри других массивов?

    @alexalexes
    Итераторов for/foreach в JS вагон и маленькая тележка. Выбирайте, что по душе.
    Самое простое, что можно применить:
    for( let post of _data)
    {
      let body = post.body;
      // что-то сделать с body
      for(let block of body.blocks)
      {
        // что-то сделать с block
        for(let curr_data of block.data)
        {
         // что-то сделать с data в block
        }
        // что-то сделать с block
      }
      // что-то сделать с body
    }
    Ответ написан
    3 комментария
  • Как в javascript classe запустить метод в другом методе?

    @alexalexes
    Проблема классическая в отношениях разработчика и JS - смена контекста объекта класса от места вызова.
    Чтобы заставить JS использовать только контекст объекта, нужно использовать стрелочный синтаксис для методов:
    class DeviceController {
      getItems = async (query)  => {
            let { brandId, typeId, limit, page, } = req.query
            page = page || 1
            limit = limit || 9
            let offset = page * limit - limit
            let devices;
            if (!brandId && !typeId) {
                devices = await Product.findAndCountAll({ limit, offset })
            }
            return devices
        };
        
       getAllForClient = async (req,res) => {
            let newList=[]
            let devices=await this.getItems(req.query)
            for (let index = 0; index < devices.length; index++) {
              let newItem={
                  name:devices[index].name,
                  price:devices[index].price,
                  videoUrl:devices[idnex].videourl            
              }
              newList.push(newItem)        
            }
            return res.json(newList)
        }
    }

    PS: В дострелочные времена нужно было убедиться, что this это тот самый this в конструкторе класса и передавать в другую переменную класса, например в that, чтобы потом использовать во всех методах.
    Ответ написан
    Комментировать
  • Как распарсить данные из ответа JSON?

    @alexalexes
    Как-то так:
    var container = document.getElementById('какой-то-id-контейнера-куда-вывести');
    container.innerHTML = "<p style='text-align: center'>User info:</p>\
    <table>\
    <tr><td>Name:</td><td>" + response.name + "</td></tr>\
    <tr><td>Username:</td><td>" + response.username + "</td></tr>\
    <tr><td>Address:</td><td>" + response.address.city + ", " + response.address.street  + "</td></tr>\
    <!-- И дальше в таком же духе -->\
    </table>";
    Ответ написан
    Комментировать
  • Виснет страница при проигрывании аудио?

    @alexalexes
    Попробуйте вместо setinterval для отображения текущей позиции использовать подписку на специализированные события элемента audio, например, на timeupdate.
    PS: Ваш плеер на основе тэга audio, надеюсь?
    полоски прогресса и таймера в отдельный поток?

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

    @alexalexes
    Можно воздействовать на конкретный селектор в уже отрендеренных стилях CSS.
    document.styleSheets[i].rules[j].selectorText
    Но проблема в том, что нужно пробежаться по всем стилям (i - счетчик), в каждом стиле просмотреть текст у селектора (j - счетчик).
    Если такой найден, то изменить свойство.
    document.styleSheets[i].rules[j].style['имя_свойства'] = значение_свойства;

    Подробнее:
    https://www.w3.org/wiki/Dynamic_style_-_manipulati...
    Ответ написан
    Комментировать
  • Присвоение через ссылку JS?

    @alexalexes
    У ссылки на объект можно менять только скалярные значения, избегая замены всего объекта. Тогда у data будет работать эффект ссылки на this.data.htmlBlocks[elementClass].views. Для переприсваивания объектов нужно брать сам this.data.htmlBlocks[elementClass].views.
    viewsHandler(elementClass){
        let data = this.data.htmlBlocks[elementClass].views;
        let now = new Date().getTime();
        if ( data.lastView && now - data.lastView / 1000 > 15 ) {
          data.views = views.count++; // views который справа за пределами функции?
          data.lastView = now;
          }
        } else {
          data.views = 2;
          data.lastView = 1;
          }
          
        }
      }
    Ответ написан
    1 комментарий
  • Как принимать сообщения от посетителей об ошибках на сайте?

    @alexalexes
    Выделите ошибку и нажмите одновременно клавиши «Ctrl» и «Enter»

    Такой функционал был популярен в начале 2000-х, когда основное место в содержимом сайта занимал текст, а верстка была вполне примитивна.
    В сегодняшнее время проблемы на сайте могут быть не только в текстовом содержимом, но и в интерактивном функционале, а такое можно зафиксировать только скриншотом.
    Поэтому, не критично, если у вас на сайте не будет такого функционала с выделением ошибки. Главное, дать возможность отправить сообщение администрации сайта любым доступным способом. Туда хоть копируй текст, хоть делай скриншот.
    Добавлено:
    Для мобильной версии сайта единственный выход - отображать ссылку или кнопку "Сообщить об опечатке" после основного текстового содержания, нажатие на которую вызывает тот же обработчик, что и Ctrl + Enter.
    Ответ написан
  • Отправка изображения canvas на сервер PHP?

    @alexalexes
    btn_send.addEventListener('click',async() => {
        let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
        let formData = new FormData(); // Создаем объект формы для наполнения данными, словно мы работаем с тегом form в html.
        formData.append('canvas_field', blob, 'canvas.png'); // это эквивалент тому, что в нашей html форме создаем поле input type="file" name="canvas_field" value="canvas.png" и прикрепляем туда содержимое blob (метод append сам расшаривает blob, дополнительных преобразований не требуется). Естественно, на DOM-дереве это никак не отразится, это модель формы в памяти JS.
        let response = await fetch('web_tp_word.php', {
        method: 'POST',
        body: formData // для fetch не нужно дополнительных параметров, чтобы объяснить как работать с formData. Идеально, чтобы завернуть файл в форму и отправить на сервер.
        });
    });

    На стороне сервера:
    var_dump($_FILES['canvas_field']); // Сервер при вызове скрипта сложит данные файла во временный файл, а как их получить - в $_FILES. Далее можно обрабатывать всеми теми способами, предназначенные для работы с $_FILES. И после уже неважно, как их сгенерировали на клиенте.
    Ответ написан
    1 комментарий
  • Помощь с пониманием устройства debounce?

    @alexalexes
    ...args
    arguments
    Это специальные объекты JavaScript. Их заполняет сама среда интерпретарора JS, когда становится активным контекст вызываемой функции. Очень помогает обрабатывать аргументы функции, когда их количество неизвестно заранее, или нужно специально сделать такую функцию, которая обрабатывает произвольное число аргументов.
    какая из реализаций лучше?
    Если стоит задача написать полифил для поддержки старых версий браузера, то следует использовать объекты JS, которые поддерживаются как можно в ранней версии стандарта языка (смотрите таблицу совместимости браузеров с тем или иным стандартным объектом).
    Если такой задачи нет, то берем стильные, модные, молодежные языковые конструкции.
    Ответ написан
    Комментировать
  • Почему событие onchage не срабатывает для select?

    @alexalexes
    Есть события: click, change, input и т.д.
    Привязка обработчика соответствующего события с использованием атрибута тэга осуществляется с приставкой on:
    <select id="selectTheme" onchange="alert('Theme changed')">
    </select>

    Но в тоже время, привязка обработчика события с использованием addEventListener не требует указания on, берется само название события и с названием атрибута не нужно путать:
    sel.addEventListener('change', (event) => {
        	alert('Theme changed');
        })
    Ответ написан
    3 комментария
  • Как собрать в один массив несколько переменных из input с одинаковыми ID?

    @alexalexes
    Если наступить на горло веб стандарту, игнорируя условие уникальности, то к id нужно относиться как обычному атрибуту тега. Следовательно, для захвата всех элементов с одинаковым id в коллекцию нужно использовать селектор вида:
    input[id="id_imgs"]
    Ответ написан
    1 комментарий
  • Как настроить автоматический вход в личный кабинет на сайт?

    @alexalexes
    В качестве ключа для автоматического входа нужно использовать идентификатор открытой сессии.
    Ни в коем случае не хранить пароль.
    Нежелательно светить логин и id, по которому авторизовывались.
    Идеально, держать подальше идентификатор сессии от JS скрипта, сделать куку только http only и позволить проверять ее только серверу.
    Ответ написан
    2 комментария
  • Стилизация select?

    @alexalexes
    Вместо строчки 42:
    $('select').val(chooseItem).attr('selected', 'selected');

    Используйте:
    $('select option[selected]').removeAttr('selected'); // удаление ранее установленного selected атрибута у одного из option
      $('select option[value="' + chooseItem + '"]').attr('selected', 'selected'); // находим option с нужным value и устанавливаем атрибут selected
    Ответ написан
    Комментировать
  • Как реализовать прокрутку текста с помощью табов?

    @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>
    Ответ написан
    Комментировать