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

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Примерно так можно:
    - при клике передавать имя класса, и всего один общий обработчик
    - перечислить все классы, чтобы выбранный включать, а остальные выключать
    Ответ написан
    Комментировать
  • Что происходит со свойством класса при присвоении извне?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Вы почувствовали разницу между «статическими» свойствами/методами и просто свойствами/методами.

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

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    i — это индекс массива — номер позиции в нём, считая от 0.
    arr[i]значение, которое лежит в массиве arr в позиции i.
    ещё проще
    Массив представьте как ряд одинаковых коробочек, юпронумерованных от 0 до N.
    В коробочках что-то лежит. Обратиться к коробку можно по имени массива и номеру ячейки: arr[4] например – это пятая по счету коробка, т.к. счет идёт от 0.


    Последовательность получается примерно такая:
    min = 12;

    i = 0; arr[i] = 12; arr[i] меньше min? НЕТ. идём дальше
    i = i + 1
    i = 1; arr[i] = 5; arr[i] меньше min? ДА. min становится 5; идём дальше
    i = i + 1
    i = 2; arr[i] = 8; arr[i] меньше min? НЕТ. идём дальше
    i = i + 1
    ...
    i = 4; arr[i] = 3; arr[i] меньше min? ДА. min становится 3; идём дальше
    ...
    for закончил работу, min так и остался равным 3
    Ответ написан
    Комментировать
  • Объясните, почему так работает код?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    потому, что воспринимает как десятичную точку
    2000.123

    Вот так, например, сработает: 2000.0.toLocaleString() — тут уже понятно, что не десятичная точка. Но я — за скобки!
    Ответ написан
    2 комментария
  • Как в js обновить список нод в querySelectorAll и их EventListener после удаления ноды?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    слушайте событие клика как jQuery – не на каждой кнопке по отдельности, а один раз на общем родителе: на этом .show-cart

    В обработчике проверяйте, по чему именн, там, где-то в дочерних, кликнули (см. event.target). Если у кликнутого есть класс .delete-item, то действуем далее.

    Слушать на общем родителе – называется волшебным термином «делегирование событий».
    Ответ написан
    1 комментарий
  • Как подставить значение переменной в javascript?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Попробуйте так
    const centerString = '56.964949, 60.623745';
    
    // строку разбиваем в массив чисел
    const center = centerString.split(', ').map(Number);
    const zoom = 12;
    
    const params = {
      center,
      zoom,
    };
    
    const init = () => {
      const myMap = new ymaps.Map("map", params);
    }
    
    ymaps.ready(init);
    Ответ написан
    Комментировать
  • Как запустить цикл for of для длинны массива?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Обычный цикл чем не цикл?
    const chain = async times => {
      for (let n = times; n > 0; n--) {
        console.log(`${n} starting..`);
        await new Promise(resolve => setTimeout(resolve, 800));
        console.log(`${n} ..finished`);
      }
    };
    
    chain(4).then(() => console.log('Done'));
    Ответ написан
    Комментировать
  • Как заблокировать работу с окном браузера при перезагрузке страницы?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно начать перехватывать вообще все события клика по html>body на начальной стадии "capture", и дальше не пропускать. Что-то типа
    document.body.addEventListener('click', e => {
        e.stopPropagaion();
        e.stopImmediatePropagation();
        e.preventDefault();
      }, { capture: true });
    Аналогично можно и для клавиатурных событий попробовать.
    Ответ написан
    Комментировать
  • Как вывести оставшееся время до определенного часа?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно прибавлять 24 часа там, где что-то меньше чего-то..

    Примерно так, наскоро. Подробно не проверял:
    function workHours(on, off, testNow = null) {
      // TODO: validate input
      const now = testNow ?? new Date().getHours();
      const a = Number(on);
      let b = Number(off);
    
      const format = (status, nextTime) => ({ status, next_time: nextTime });
    
      if (a === b) {
        return format(true, 0);
      }
    
      if (a > b) {
        b += 24;
      }
    
      if (now >= a && now < b) {
        return format(true, 0);
      }
    
      if (now < a) {
        return format(false, a - now);
      }
    
      return format(false, a + 24 - now);
    }

    Тесты

    // Тесты тесты
    const tests = [
      [9, 17, 10, { status: true, next_time: 0 }],
      [9, 17, 8, { status: false, next_time: 1 }],
      [9, 17, 17, { status: false, next_time: 16 }],
      [19, 17, 17, { status: false, next_time: 2 }],
      [19, 19, 17, { status: true, next_time: 0 }],
    ];
    
    const eq = (a, b) => Object.entries(a).every(([k, v]) => b[k] === v);
    
    tests.forEach(test => {
      const [on, off, now, expected] = test;
      const result = workHours(on, off, now);
      const testResult = eq(result, expected);
      if (testResult) {
        console.log('Passed', {on, off, now, result});
      }
      console.assert(testResult, test);
    });
    Ответ написан
    Комментировать
  • Как объединить строки в файле gedcom?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Готовый модуль: https://www.npmjs.com/package/gedcom
    Ответ написан
    Комментировать
  • Как получить таблицу Google sheets как массив?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    вроде бы так должно получиться:

    - console.log(data.data.values)
    + console.log(data.values)

    Метод spreadsheets.values/get возвращает объект ValueRange со свойствами range, majorDimension и values. Последнее и интересует.
    Ответ написан
    Комментировать
  • Можно ли присвоить массив ключам объекта?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Завезли нечитаемые макароны!
    (arr => Object.fromEntries(['a', 'b', 'c'].map((p, i) => [p, arr[i]])))([1, 2, 3])
    // Object { a: 1, b: 2, c: 3 }
    
    // или так, что чуть короче, но такой же фарс
    (arr => Object.fromEntries(Array.from('abc', (p, i) => [p, arr[i]])))([1, 2, 3])
    Ответ написан
    1 комментарий
  • Как в массиве обозначить нескольким параметрам одно значение?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Как один из вариантов, пишите свойства как диапазоны.

    Подзадача: из массива, где могут быть и строки "20-80" найти строку, удовлетворяющую искомому значению
    const findRangeKey = (keysArray, keyString) => {
      const num = Number(keyString);
      if (keysArray.includes(keyString)) {
        // exact match
        return keyString;
      }
    
      return keysArray.find(key => {
        const [min, max] = key.split('-').map(Number);
        if (max !== undefined) {
          return num >= min && num <= max;
        }
    
        return num === min;
      });
    };
    
    findRangeKey(['10', '20-40'], 30); // "20-40"
    findRangeKey(['10', '20-40'], 20); // "20-40"
    findRangeKey(['10', '20-40'], 10); // "10"


    И теперь можно искать в словаре с диапазонами:
    const data = {
      '10': {
        '5-15': {
          title: '10-5-15',
        }
      },
      '20-60': {
        '5': { title: '20-60-5' },
        '10': { title: '20-60-10' },
        '20-40': { title: '20-60-20-40' },
      },
    };
    
    const getTitle = (data, a, b) => {
      const aKey = findRangeKey(Object.keys(data), a);
      if (!aKey) {
        return null;
      }
    
      const bKey = findRangeKey(Object.keys(data[aKey]), b);
      if (!bKey) {
        return null;
      }
    
      return data[aKey][bKey].title;
    };
    
    console.log(getTitle(data, '10', '5')); // "10-5-15"
    console.log(getTitle(data, 40, 30)); // "20-60-20-40"
    Ответ написан
  • Как создать объект из массивов разной длинны. keys = [key1, key2, key3] values = [value1, value2, value3, value4, valu5, value6]. На выходе: {}?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    const keys = ['key1', 'key2', 'key3'];
    const values = ['value1', 'value2', 'value3', 'value4', 'valu5', 'value6'];
    
    const makeGen = function*(arr) {
      let index = 0;
      const { length } = arr;
      
      while (true) {
        yield arr[index++ % length];
      }
    }
    
    const keyGen = makeGen(keys);
    const valGen = makeGen(values);
    const length = Math.max(keys.length, values.length);
    
    const result = Array.from({ length }, () => [keyGen.next().value, valGen.next().value]);
    
    console.log(JSON.stringify(result, null, 2));
    
    /*
    [
      [
        "key1",
        "value1"
      ],
      [
        "key2",
        "value2"
      ],
      [
        "key3",
        "value3"
      ],
      [
        "key1",
        "value4"
      ],
      [
        "key2",
        "valu5"
      ],
      [
        "key3",
        "value6"
      ]
    ]
    */
    Ответ написан
    Комментировать
  • Как сделать подобную анимацию?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Анимацию линий от положения курсора можно сделать гораздо «легче» без библиотек.

    Поверх картинки абсолютно позиционируется SVG с этими всеми линиями. Координаты линий динамически меняются.

    Сделал примитивный пример, линия летает поверх фотки:

    Разберитесь, как анимируется одна линия. В вашей задаче линий чуть больше, у них общие вершины.
    И анимируются они не по таймеру, а от курсора.

    Pro tip: сделайте минимальную инерционность: чтобы к курсору постоянно стремилась невидимая точка с небольшой задержкой, как на резинке, а уже от координат этой невидимой точки анимируйте линии — так будет плавнее и загадочнее. Координаты невидимой точки в любой момент приближаются к текущему положению курсора на 80%, скажем.
    X_точки = предыдущий_X_точки + (X_мышки - предыдущий_X_точки) * 0.8
    В этом ответе подробнее раскрыл тему.
    Ответ написан
    1 комментарий
  • Как создать подобную функцию в JavaScript?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Упомянутый метод fadeOut() вероятно, из jQuery?

    Там эти новые методы добавляются самим jQuery и установленными плагинами не к элементам, а к элементам-обёрнутым-в-jQuery всё-таки:
    - elem.fadeOut();
    + $('selector').fadeOut();

    Поэтому посмотрите, может, как писать плагины к jQuery. Именно своим плагином можно добавить новые «методы через точку».
    Ответ написан
    Комментировать
  • Я тут таймер сделал, но почему то когда я переключаю окно на что-то другое, таймер останавливается. В чем проблема?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Неактивные вкладки экономят ресурсы и таймеры в них срабатывают раз в 10 реже.

    Поэтому для таймера, который пытается показывать реальное время, исходить из того, что срабатывания будут нерегулярными и редкими. Сработал очередной «тик» ? — хорошо, повезло.

    Часы лучше делать вычисляемыми. Запустили — запомнили время (до которого отсчёт).
    Сработал очередной «тик» — посчитали, где мы сейчас: Date.now() и сколько сейчас времени до времени-Ч. И это отрисовали.
    Ответ написан
    Комментировать
  • Как удалить блок при клике на кнопку?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Вот пример с создавать-удалять:
    Ответ написан
    Комментировать
  • Как с помощью input открыть нужный элемент массива?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Кнопка не нужна
    Ответ написан
    Комментировать
  • Как дождаться ответа функции?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Судя по исходникам (если я нашёл достаточно старую версию, как у вас), метод get() вызывает переданную в него функцию, и первым параметром в неё – уже готовый хэш (строку). И только вторым параметром массив компонентов. Так что зря вы затеяли бездумно копировать чужой код со всяких форумов самостоятельно собирать строку.

    Попробуйте как-то так:
    Fingerprint2.get(hash => {
      $.ajax({
        type: 'post',
        url: 'https://api.example.com/log',
        dataType: 'json',
        data: { hash },
        success: res => console.log('OK!', res),
        error: console.error,
      });
    });
    Но вообще, переходите на поддерживаемую и обновляемую версию пакета @fingerprintjs/fingerprintjs
    Ответ написан
    Комментировать