Ответы пользователя по тегу JavaScript
  • Как грамотно и красиво сформировать вложенность функций? Структура кода?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Добавление/удаление класса по мышиному событию лучше доверить CSS и использовать псевдокласс :hover

    Вместо подобных пар
    $('.sounds-wrapper').on('mouseenter', function() {
          $(this).addClass('sounds-wrapper-active');
        });
        $('.sounds-wrapper').on('mouseleave', function() {
          $(this).removeClass('sounds-wrapper-active');
        });


    лучше назначить свойства для
    .sounds-wrapper { ... }
    .sounds-wrapper:hover { ... здесь то, что раньше было в .sounds-wrapper-active }
    Ответ написан
  • Как получить значения массива в JS?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Так же, как первые три, получаете четвёртый. Только он не строка, а массив объектов.
    var answer = data['Answer'];
    for(var i=0; i<answer.length; i++) {
      answer[i].id // 1
      answer[i].text_answer // Ответ 1.1
    }
    Ответ написан
    3 комментария
  • Как вывести имя объекта в самом объекте?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно перебрать контекст в надежде найти себя:
    var context = this;
    
    var calina = {
      write: function() {
        for(var prop in context) {
          if(context[prop] !== this) continue;
          console.log("Found self:", prop);
          return prop;
        }
      }
    }
    calina.write();  // 'calina'


    Если это в корне выполняется, в браузере, то контекст известен и можно не вводить переменную context а «искать себя» в объекте window:
    так
    var calina = {
      write: function() {
        for(var prop in window) {
          if(window[prop] !== this) continue;
          console.log("Found self:", prop);
          return prop;
        }
      }
    }
    calina.write();  // 'calina'


    В контексте вполне может присутствовать несколько переменных, ссылающихся на этот один и тот же объект. var calina2 = calina; Предусмотрите этот случай и собирайте/возвращайте массив значений в таком случае.
    Ответ написан
    3 комментария
  • Как вытащить данные из текста при помощи JS?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно создать HTML элемент из разметки, и вытащить оттуда данные:

    function getData(html) {
      var table = document.createElement('table');
      table.innerHTML = html;
      var tds = table.querySelectorAll('td');
      var values = [], i;
      for(i=0; i<tds.length; i++)
        values.push(tds[i].innerText);
    
      return values;
    }
    
    var html = [
     '<tr data-user="12345" data-start="01">'
    ,'<td class="text-truncate success" style="font-weight:600">543210</td>'
    ,'<td class="text-truncate" style="font-weight:600">350 S</td>'
    ,'<td class="text-truncate success" style="font-weight:600">352.00 S</td>'
    ,'</tr>'
    ].join('\n');
    
    var values = getData( html);
    
    var var1 = values[1]; // 350 S
    var var2 = values[2]; // 352.00 S
    Ответ написан
    7 комментариев
  • Как изменить глобальную переменную?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Костыль, комментариями ТС навеяло.
    Сделать по таймеру функцию, проверяющую постоянно состояние переменной:
    var clickCount = 0;
    
    $('.arrow').on('click', function(){console.log( ++clickCount);});
    
    function update(){
    	var previous = clickCount;
      setInterval(function(){
      	if( clickCount === previous) return;
        previous = clickCount;
        if( clickCount === 1) {
          console.log('С почином!');
        } else if( clickCount === 2) {
          console.log('Парочка!');
        } else if( clickCount === 4) {
          console.log('Квадроцикл');
        } else if( clickCount > 5) {
          console.log('Да хватит уже..');
        }
      }, 100);
    }
    
    update();


    фиддл
    Ответ написан
    Комментировать
  • Как к браузерному скрипту подключить jq?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    В контексте чужого сайта и консоли браузера можно примерно так подключить jQuery:
    var el = document.createElement("script");
    el.src = "https://code.jquery.com/jquery-3.3.1.min.js";
    el.async = true;
    el.crossorigin="anonymous";
    document.body.appendChild(el);


    Warning. Это загрузит jQuery версии 3.3.1 в контекст страницы и перезапишет имеющуюся там, возможно, ранее, версию jQuery – от этого родные скрипты страницы могут перестать работать.
    Ответ написан
  • Как получить разницу между датами в javascript?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Метод объекта Date setHours() возвращает число: миллисекунды. Поэтому вместо
    current = current.setHours(21) сделайте просто current.setHours(21)
    Ответ написан
    Комментировать
  • Как выполнить JS функцию при скроле только 1 раз?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Upd.
    Поскольку выяснилось, что для каждого элемента селектора надо вызывать ф-ю один раз, а не всего один раз глобально, понадобится книга учёта, где элементы будут отмечаться: выполнил / не выполнил ещё пока.

    Не факт, что нужно на каждый кадр отрисовки заново искать в DOM элементы по селектору - это медленно.

    Всё решение надо переписать с нуля, а тратить на это время нет желания.

    Плохой старый ответ. Игнорировать.

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

    Warning этот вариант сработает вообще всего 1 раз, даже если элементов класса несколько. Похоже, ТС хотел иного: «1 раз для каждого найденного элемента класса».

    мусорный пакет с макаронами
    (function(selector){     // ДОБАВЛЕНО
      var done = false;      // ДОБАВЛЕНО
    
      function sAnim(el, fun, offset = 0) {
        let self = document.querySelectorAll(el);
        let winScrollY = window.scrollY;
        let winHeight = window.innerHeight;
        for (var i = 0; i < self.length; i++) {
          let el = self[i];
          let pos = el.getBoundingClientRect().top;
          let top = pos.top + pageYOffset;
          if (winScrollY > top - winHeight + winHeight / 100 * offset && winScrollY - winHeight < top - winHeight) {
            //Нужно выполнить только 1 раз
            
            if(done) return; // ДОБАВЛЕНО
            fun(el);
            done = true;     // ДОБАВЛЕНО
          }
        }
      }
      
      function showHuntInSelecter(el) {
        el.classList.add('show-hint');
        setTimeout(function() {
          el.classList.remove('show-hint');
        }, 4000)
      }
      
      var scroll = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ||
      
      function(callback) {
        window.setTimeout(callback, 1000 / 60)
      };
      
      var lastPosition = -1;
      
      function loop() {
        if (lastPosition == window.pageYOffset) {
          scroll(loop);
          return false;
        } else lastPosition = window.pageYOffset;
        // Функции при скролле
        sAnim(selector, showHuntInSelecter, 30);  // РЕДАКТИРОВАНО
        // Функции при скролле
        scroll(loop);
      };
      
      loop();
    
    })('.selecter')          // ДОБАВЛЕНО
    Ответ написан
  • Как использовать облачные ресурсы пользователей, чтобы размещать там файлы приложения?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Порекомендую Google Drive. Для отдельного приложения см. REST API Google Drive. Примеры на JavaScript.

    Еще неплохой бессерверный вариант – Google Apps Script (GAS) внутри, например, Google SpreadSheet - так можно сделать, в частности, телеграм бота, в который можно загружать картинки, которые окажутся в Google Drive, а в бот придёт ссылка на загруженную картинку, доступная всем. Недавно делал такую механику.

    GAS Drive API позволяет загрузить файл, сделать его доступным «всем» и получить ссылку на него.
    Ответ написан
    Комментировать
  • VK API пустые ответы wall.search & newsfeed.search, варианты?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Может, в суточные лимиты упираетесь? Через wall.get() брать записи пробовали? Раз известны группы, лучше .get'ом, наверное.
    Ответ написан
  • Как передать бинарные данные с сервера и на сервер на js?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Комментировать
  • Как получить предыдущую дату с moment.js?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    moment не пользуюсь, поэтому на чистом JS можно создать дату на сейчас, установить ей нужные день и месяц (1 августа).
    Если дата получилась больше, чем сейчас, надо отнять 1 год:
    var D = new Date();
    D.setDate(1);
    D.setMonth(7);   // 0: Янв, 1: Фев, ... 7: Август
      D.setHours(12);  // опционально
      D.setMinutes(0); // опционально
      D.setSeconds(0); // опционально
    if(D.getTime() > new Date().getTime()) D.setFullYear( D.getFullYear() - 1);
    
    D.toString() // Tue Aug 01 2017 12:00:00 GMT+0300 (MSK)
    
    // и можно из Даты создать объект moment:
    var m = moment(D);


    Наверняка, точно такой же фокус можно провести и с объектом самого moment.
    Ответ написан
    Комментировать
  • Как сделать круговой счетчик чисел на js?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Наверное, вам понадобится имитировать движение: без этого смотреться будет как медленно щелкающие значения.
    Для имитации движения нужно создавать размытие движения (motion blur) – в любой отдельный кадр видно не четкое значение, а размытое вдоль вектора движения.

    Отображаемые на экране кадры как бы идут слишком медленно, чтобы уместить все происходящие события, поэтому на один кадр накладывается несколько событий: число появилось вверху, проехало расстояние X, исчезло внизу, появилось следующее число, успело проехать пол-экрана. Всё это "засвечивает" всего один отображаемый кадр, на котором числа выглядят размазнно. Первое просто оставляет след во всю высоту, второе в пол-высоты.

    Как я понял, вам потребуется создать серию таких состояний:
    1. все смазано
    2. смазанно, но видно более ли менее значение 1 из 3
    3. все смазано
    4. смазанно, но читается значение 2 из 3
    5. все смазано
    6. смазанно, но читается значение 3 из 3

    Кадры для "всё смазано" можно заготовить заранее. Кадры с видимостью определённых значений генерить заранее наложением на полностью смазанные нескольких близких положений видимого числа.
    Ответ написан
    Комментировать
  • Как в JS преобразовать число 9.75e-8 в нормальное 0.000000975?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Например, так:
    function noExp(n){
        var data= String(n).split(/[eE]/);
        if(data.length== 1) return data[0]; 
    
        var  z= '', sign= this<0? '-':'',
        str= data[0].replace('.', ''),
        mag= Number(data[1])+ 1;
    
        if(mag<0){
            z= sign + '0.';
            while(mag++) z += '0';
            return z + str.replace(/^\-/,'');
        }
        mag -= str.length;  
        while(mag--) z += '0';
        return str + z;
    }
    
    noExp(n) // String "0.0000000975"

    via
    Ответ написан
    Комментировать
  • Как сделать что-то типа калькулятора, только из изображений?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Дизайнер вам пусть отрисует послойные картинки, где выбираемые элементы будут PNG слоями с прозрачностью. JavaScript'ом вы просто включаете/выключаете видимость слоёв бутерброда.

    В приведённом примере так и сделано. См., например, слой с одними только воротами - с прозрачным фоном.
    Ответ написан
    5 комментариев
  • Как принудительно обновить js-скрипт у клиента?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Варианты:
    1. не париться. Посидит несколько часов с устаревшей версией - разве это критично?
    2. если изменения в новой версии идут в компании с breaking changes в backend, то есть смысл версии API закладывать в пути: скрипт версии x.y будет обращаться к бэкенду по адресу api/x.y/method Так параллельно смогут жить и работать несколько версий скрипта+API.
    3. нынешний вариант не так и плох для некоторых случаев. Особенно, если ajax запросы в меру регулярны.
    4. на таймер раз в X секунд поставить вызов серверного метода проверки версии, и при обнаружении обновления сохранять данные и перегружать страницу.
    Ответ написан
    3 комментария
  • Что я делаю не так в регулярке?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Может, не нужно проверять всю строку? Если все линки правильные-авитные, то проверять только окончание строки – можно реверснуть строку .split('').reverse().join('') и проверять только начало /^\d{4,}_/

    Вот одной регуляркой под ваше требование:
    var re = new RegExp('^https?://(\\w+\\.)?avito\\.ru/([^/]+/)+([a-z_]+(?!_\\d{4,}))$');
    
    var t1 = 'https://www.avito.ru/moskva/odezhda_obuv_aksessuary/magazin_pizham_kigurumi_na_lubyanke_56545';
    var t2 = 'https://www.avito.ru/moskva/kvartiry/snimu';
    
    re.test(t1) // false
    re.test(t2) // true
    Ответ написан
    5 комментариев
  • Почему ф-я не возвращает значение?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Уберите лишнее.
    const test = (arg) => {
      return arg
    };
    
    const final = (arg) => test(arg)
    
    final("test");
    /*
    test
    */
    Ответ написан
    Комментировать
  • Как реализовать Анимацию выделения сектора окружности (заполнение круга цветом от 0 до определённого значения)?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно делать на svg. Заливка это по сути окружность половинного радиуса супер-жирной линией, толщиной в пол-радиуса. Пример заполнения не такой толстой линией.
    Ответ написан
    Комментировать
  • Как по ссылке ВКонтакте определить, что это за объект?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Соберите ещё вариантов ссылок, и появится догадка! ; )
    Из документации к messages.send():
    photo — фотография;
    video — видеозапись;
    audio — аудиозапись;
    doc — документ;
    wall — запись на стене;
    market — товар.


    Upd. можно через регулярку:
    function parseVkLink(link) {
      var re = new RegExp('(photo|video|audio|doc|wall|market)(\\d+)_(\\d+)');
      var matches = link.match(re);
      if(matches) {
        return {
          type: matches[1],
          ownerId: matches[2],
          objectId: matches[3],
        };
      } else {
        return false;
      }
    }
    
    var test = 'https://vk.com/durov?z=photo1_456315566%2Falbum1_00%2Frev';
    JSON.stringify( parseVkLink(test) ) // {"type":"photo","ownerId":"1","objectId":"456315566"}
    Ответ написан
    7 комментариев