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

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Пишите не через точку, а так примерно:
    json['1 Часть'].t13[0]

    См. доступ к свойствам объекта.
    Ответ написан
  • Получить по паре одинаковых случайных элементов массива?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Каждому четному индексу N соотв. такой же цвет с индексом N+1

    Возьмем случайное целое от 0 до половины длины, умножим на 2 и вуаля: это индекс первого. Плюс 1 это индекс второго.

    var idxA = 2 * Math.floor(Math.random() * colorsArray.length / 2);
    var idxB = idxA + 1;
    Ответ написан
    Комментировать
  • Как подсчитать кол-во единиц в числах от 0 до N?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Создавать массив длиной в N может быть «дорого» – займёт память. Поэтому для метода «в лоб» предложу простой цикл с циклом для поиска «1» в каждом кандидате:
    const sumone = n => {
      let sum = 0;
      for (let i=n; i>0; i--) {
        const numstr = i.toString(10);
        for (let j=0, len = numstr.length; j<len; j++)
          if (numstr[j] == '1') sum++;
      }
      return sum;
    }

    Но можно подумать над формулой вычисления без перебора. Или частично сократить перебор. Например, для чисел, состоящих из одних «9» искомое число единиц в ряде вычисляется как функция числа цифр: d * 10^(d-1) Вот так:
    9 .. 1 = 1 * 10^0
    99 .. 20 = 2 * 10^1
    999 .. 300 = 3 * 10^2
    9999 .. 4000 = 4 * 10^3
    99999 .. 50000 = 5 * 10^4

    Например, для числа 12345 можно мгновенно получить сумму для 9999 и начать перебирать с 10000 до 12345. Это тоже можно упростить: отбросим первую единицу, она есть каждый раз, и остаётся то же, что от 0000 до 2345 + 2346 единиц.
    0..2345 в свою очередь опять сокращается: сразу известно 0..999, остаётся от 1000 до 2345.
    1000 .. 1999 опять упрощаем отбрасыванием первой единицы: на 999 приходится 300 единиц плюс 1000 первых единиц. Остаётся 2000 .. 2345. Тут можно отбросить двойку и посчитать только 0..345. Снова уходит 0..99. и т.д

    Надо будет ещё подумать над формулой..
    Ответ написан
    Комментировать
  • Как сделать из данного времени код в формате HEX?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Для цвета нужны значения трёх компонентов от 0 до 255 в десятичной системе, или от 00 до FF в шестнадцатиричной. С 16-ричной не обязательно связываться.
    body {
      background-color: rgb(123, 45, 67);
    }

    или динамически
    var R = 123, G = 45, B = 67;
    document.body.style.backgroundColor = `rgb(${R}, ${G}, ${B})`;

    Часы меняются от 0 до 23, минуты и секунды – от 0 до 60.
    Надо «спроецировать» каждое из них на диапазон 0..255.

    Например, часы:
    var D = new Date();
    var hours = D.getHours(); // 0..23
    var RR = Math.floor(255 * hours / 23); // 0 .. 255
    
    // то же с шестнадцатиричностью
    var RR = Math.floor(255 * hours / 23).toString(16); // 0..FF
    // может быть 1 или 2 цифры, надо всегда 2
    RR = ('0' + RR).substr(-2); // дописываем в начале 0 и берем последние две цифры

    Цвет будет меняться каждую секунду. Вроде бы, цель достигнута. Но хорошо бы придумать, как это сделать интереснее. Чтобы цвет менялся по кругу плавно, без резкого скачка в полночь. И больше напоминал цвет неба в это время суток.

    Ответ написан
    6 комментариев
  • Как соеденить 2 массива?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Метод, как предлагали уже многие:
    1. склеить оба массива в один,
    2. пройтись последовательно по всем, собирая «словарь», где уникальный ключ name, а значение – весь объект с name и value. Перезаписывать предыдущий с таким же name или нет – по условию;
    3. вернуть массив значений этого «словаря» - уцелевшие уникальные объекты.


    const uniq = (a, b) => Object.values(
      a.concat(b).reduce(
        (acc, o) => {
          if (!acc[o.name]) acc[o.name] = o;
          else if (Number.isFinite(o.value)) acc[o.name].value = o.value;
          return acc;
        }, {}
      )
    );

    Для проверки, число это или нет, можно использовать метод Number.isFinite()

    Тесты
    //###########################
    const first = [{ name: 'first', value: '' }, { name: 'second', value: 10 }];
    const second = [{ name: 'first', value: 0 }, { name: 'third', value: 20 }];
    /*
    [
      {
        "name": "first",
        "value": 0
      },
      {
        "name": "second",
        "value": 10
      },
      {
        "name": "third",
        "value": 20
      }
    ]
    */
    
    //###########################
    const first = [{ name: 'first', value: 100 }, { name: 'second', value: 0 }];
    const second = [{ name: 'first', value: -111 }, { name: 'second', value: '' }];
    
    /*
    [
      {
        "name": "first",
        "value": -111
      },
      {
        "name": "second",
        "value": 0
      }
    ]
    */
    Ответ написан
    Комментировать
  • Чем заменить body onload?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    window.addEventListener('load', (event) => {
        script.sessionLoaded();
    });


    onload срабатывает, когда загрузилась страница и все её ресурсы: CSS, картинки, шрифты.
    в отличие от DOMContentLoaded, который выстреливает возможно раньше – когда только загрузился HTML и построено DOM дерево, но ещё не подгрузились внешние ресурсы.
    Ответ написан
    Комментировать
  • Хранение данных в localstorage?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Способом, как у вас 2-я строка, получите сохранённый ранее массив users, и в него пушьте.

    Рекомендации:
    1. Названия ключей LS лучше держать в константах, а не писать строкой каждый раз.
    2. Предусмотрите вариант, когда в LS ничего нет – с этим точно столкнётесь впервые с массивом users
    3. Предусмотрите вариант, что LS в принципе недоступно - например в режиме Private Browsing.
    Ответ написан
    3 комментария
  • Как с помощью jsonpath извлечь из массива объектов значение одного свойства зная значение другого?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    $[?(@.population == 2870528)].name

    Попробовать можно на jsonpath.com
    скрин
    5d2f068690488541075820.png


    См. язык запросов. Фильтр ?( условие )
    Ответ написан
    Комментировать
  • Как использовать import?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Скачал jsonpath.min.js, подключил его в index.html (нужно ли это?).

    Всё правильно сделали, так тоже можно. После этого у вас должна быть доступна глобальная переменная jsonpath – к ней и обращайтесь:
    var cities = [
      { name: "London", "population": 8615246 },
      { name: "Berlin", "population": 3517424 },
      { name: "Madrid", "population": 3165235 },
      { name: "Rome",   "population": 2870528 }
    ];
    
    var jp = jsonpath; //  для краткости
    var names = jp.query(cities, '$..name');
    console.log(names); // [ "London", "Berlin", "Madrid", "Rome" ]
    Fiddle

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

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Как сделать элементы жирными или курсивом:
    // через методы строки .bold() и .italics()
    var html = "Понедельник".italics(); // html==='<i>Понедельник</i>';
    var html = "Суббота".bold(); // html==='<b>Суббота</b>';
    
    // вручную собрать строку
    var dow = 'Понедельник';
    var html = '<i>' + dow + '</i>'; // html==='<i>Понедельник</i>';
    
    // то же самое в обратных кавычках
    var dow = 'Понедельник';
    var html = `<i>${dow}</i>`; // html==='<i>Понедельник</i>';

    Правильнее через CSS, но сейчас не об этом.

    document.write() – плохая практика, не надо его.
    Лучше собрать HTML в строку и потом присобачить куда-то:
    const week = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];
    
    for (let i = 0, len = week.length; i < len; i++) {
        let html = week[i];
        if (i === 0) html = html.italics(); // понедельник
        else if (i > 4) html = html.bold(); // выходные
    
        const div = document.createElement('div');
        div.innerHTML = html;
        document.body.appendChild(div);
    }
    Ответ написан
    1 комментарий
  • Как получить инициалы из строки с именем и фамилией?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Получить первый символ строки: substring(0, 1) – с какого (0) по какой (1).

    function initials(str) {
      return str.split(/\s+/).map((w,i) => i ? w.substring(0,1).toUpperCase() + '.' : w).join(' ');
    }
    
    initials('Невзубногой иван нилыч');  //  Невзубногой И. Н.
    initials('Держиморда Потап Игнатьич'); // Держиморда П. И.
    initials('кто есть who?'); // кто Е. W.

    Разбили строку в массив по пробелам, если первое слово (index===0) остаётся как есть, у остальных слов взяли первый символ, сделали его заглавным на всякий, приписали точку, склеили массив обратно в строку через пробел.
    Ответ написан
    2 комментария
  • Как создать морфинг svg анимацию привязанную к движению мыши в виде капли?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Морфинг это обычно плавно между фиксированными / отрисованными состояниями.

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

    Ответ написан
    3 комментария
  • Чем лучше делать информер из api?

    sergiks
    @sergiks Куратор тега PHP
    ♬♬
    Отрывок данных в вопросе – обычный JSON, стандартный формат, понятный всем. В JavaScript есть метод JSON.parse(), в PHP разбирается функцией json_decode()

    Получайте данные, фильтруйте из них интересующие рейсы.

    «Чем лучше» – стандартный ответ «тем, в чём комфортнее вам».
    Ответ написан
    1 комментарий
  • Проверка в цикле двух условий сразу?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    const winNumber = 5;
    let tryNumber;
    for (let i = 0; i < 3 && winNumber !== tryNumber; i++) {
      tryNumber = +prompt('Enter a number ');
    }


    1. tryNumber был объявлен внутри тела цикла, и поэтому был недоступен снаружи, в условии for(). Надо было его объявить снаружи.
    2. Логическое условие. Должны выполняться оба, иначе выходим: и i < 3 и введённое число пока ешё не равно winNumber.
    Ответ написан
    Комментировать
  • Проигрывание звука на javascript?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Попробуйте сохранять id проигрываемого звука.
    // сначала ваш код
    var idPlay;
    sound.onend = () => idPlay = false; // когда доиграл, сбрасываем id
    window.addEventListener("click", () => {
      if (idPlay) sound.stop(idPlay); // ещё играет - остановим
      idPlay = sound.play(); // играть сначала
    });
    Ответ написан
    6 комментариев
  • Как найти скрытую страницу на сайте?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Посмотрите site.ru/robots.txt, вдруг заботливый админ внес страницу в этот файл, в noindex?
    Ответ написан
    Комментировать
  • Объединение JS файлов, как лучше?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Использование глобальных противоречит всей идее webpack, но если уж такое тяжелое наследство, то
    см. Global Exports – используют exports-loader.

    Попробуйте добавить в webpack.config.js:
    module: {
          rules: [
           {
             test: require.resolve('qwerty.js'),
             use: 'exports-loader?qwerty'
           }

    и в основном коде
    import { qwerty } from './qwerty.js';
    Ответ написан
    Комментировать
  • Как добавить дополнительный стиль к этому js?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Попробуйте так:
    var scrollCoef = 0.0035;
    var masthead = $('#masthead');
    
    $(window).on('scroll', function() {
      var scrolltop = $(window).scrollTop();
      masthead.css({
        opacity: 1 - scrolltop * scrollCoef,
        transform: "scale(" + (1.5 - scrolltop * scrollCoef) + ")"
      })
    });
    Ответ написан
    3 комментария
  • Как складывать два числа без задействия кнопок?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    При изменении содержания текстовое поле «излучает» (emit) событие "input".
    Можно слушать это событие и по нему обновлять сумму:
    Ответ написан
    1 комментарий
  • Как уменьшать каждую минуту число?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно и чуть по-другому: при запуске определять момент «Ч», и по таймеру показывать, сколько осталось до него минут. При этом таймер можно запускать как угодно часто, например, дважды в секунду – так точность момента переключения составит пол-секунды.



    Тут практически сразу же покажет не 44 а 43, т.к. сразу же остаётся уже чуть меньше, чем 44 минуты. Если надо, чтобы 44 продержалось первую минуту, придётся чуть изменить код. Вы справитесь.
    Ответ написан
    Комментировать