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

    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
    Ответ написан
    Комментировать
  • Как отсортировать массив массивов по вложенным элементам?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    взять из массива предпоследний элемент: arr[arr.length - 2]
    сранить две строки, содержащие числа, как числа: Number(a) - Number(b)
    Ответ написан
    Комментировать
  • Как привести элементы коллекции Map к нижнему регистру?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    1. Собрать в массив имена ключей, которые будем «переименовывать».
    2. Пройти по этому массиву:
      • брать значение из Map
      • создавать новый toLowerCase() ключ с этим значением
      • удалять исходный ключ
    решение
    const MyMap = new Map([['aAa', 'A'], ['bbb', 'B'], ['CcC', 'C']]);
    const toRename = [...MyMap.keys()].filter(key => key.toLowerCase() !== key);
    // [ "aAa", "CcC" ]
    
    toRename.forEach(key => {
      MyMap.set(key.toLowerCase(), MyMap.get(key));
      MyMap.delete(key);
    });
    // MyMap: { bbb → "B", aaa → "A", ccc → "C" }
    По-хорошему, надо проверять ещё, что ключ именно строка. А то Map дело такое, там и объект ключом может.
    Ответ написан
  • Как подключить node js библиотеку?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    План:
    1. создать пустой проект npm init Для этого понадобится сначала установить на комп node и npm
    2. установить в него этот шахматный модуль npm install ...
    3. создать файл main.js, где объединить ваш код и этот модуль
      import { Game } from 'js-chess-engine'; // 1-я строчка в файле main.js
      const game = new Game();
      // ... ваш код, взаимодействующий с game

    4. добавить в проект какой-нибудь сборщик, например, WebPack или RollupJS
    5. «собрать» этим сборщиком проект в один файл – который уже можно подключить в браузере
    Ответ написан
    Комментировать
  • Как выводить новые данные на страницу в зависимости от ответа пользователя?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    По данным из JSON ездит «курсор», указывающий на какой-то один вопрос.
    Переменная, в которой лежит ключ текущего вопроса. Сначала "1". Потом, в зависимости от ответа.
    Установили новое значение – показали новый вопрос.

    Можно заполнять массив «историей», чтобы добавить функционал шагать «назад» и потом вернуться «вперёд», или начать отвечать иначе.

    Ответ написан
    Комментировать
  • Написать функцию, принимающую массив сотрудников из объектов, и возвращающую массив строк. Какие ещё есть способы?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Adamos верно заметил, что в задании просили функцию, а вы разово получаете результат. Согласен, что это вероятная причина отказа.

    Ещё вариант в копилку, принципиально не меняющий сути мэппинга:
    Array.from(employees, ({name, age}) => `Имя: ${name}, возраст: ${age}`)
    Ответ написан
    Комментировать
  • Как работает замыкание в js?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Каждый вызов createCounter() создаёт и возвращает новую функцию. С которой в комплекте идёт свой новый «чемодан» замыкания, в котором лежит своя переменная counter.
    Каждый раз отдельная-новая.

    откуда берется counter при втором вызове console.log(z())

    Из того же «чемодана» от первого вызова createCounter()
    Ответ написан
    2 комментария
  • Как найти в одну переменную 2 класса?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    какой логической операцией хотите два класса сочетать?
    класс1 И класс2 — чтобы непременно оба были в наличии у элемента, и тогда только его брать;
    класс1 ИЛИ класс2 — достаточно любого одного из двух, ну или оба, вообще супер.

    Чтобы непременно оба класса одновременно присутствовали:
    document.querySelector('.popup__close.popup__area'); // без пробела


    Чтобы хотя бы один был:
    document.querySelector('.popup__close, .popup__area'); // через запятую


    Ну и помните, разумеется, что querySelector() выбирает первый подходящий найденный элемент. Один.
    А querySelectorAll() выберет все подходящие.
    Ответ написан
    Комментировать