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

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Документация по fetch и Headers

    Рабочий код в браузере требует same origin
    const token = 'xxxxxx';
    var myHeaders = new Headers();
    myHeaders.append('x-access-token', token);
    
    var myInit = { method: 'GET',
                   headers: myHeaders,
                   mode: 'cors',
                   cache: 'default' };
    
    var myRequest = new Request('http://api.travelpayouts.com/v2/prices/latest', myInit);
    
    fetch(myRequest)
      .then(res => res.json())
      .then(data => console.log(data))
    Но в вашем случае ничего не получится из-за требования Same Origin: через JS в браузере что-то загружать с того сайта можно только страницам, загруженным с него же. Гуглите CORS. Или работайте через nodejs.

    Рабочий код под nodejs
    const http = require("http");
    
    const token = '321d6a221f8926b5ec41ae89a3b2ae7b';
    const url = 'http://api.travelpayouts.com/v2/prices/latest';
    
    http.get(
      url,
      {
          headers: {
          'x-access-token': token
          }
      },
      (res) => {
        const { statusCode } = res;
        const contentType = res.headers['content-type'];
      
        let error;
        if (statusCode !== 200) {
          error = new Error('Request Failed.\n' +
                            `Status Code: ${statusCode}`);
        } else if (!/^application\/json/.test(contentType)) {
          error = new Error('Invalid content-type.\n' +
                            `Expected application/json but received ${contentType}`);
        }
        if (error) {
          console.error(error.message);
          // Consume response data to free up memory
          res.resume();
          return;
        }
      
        res.setEncoding('utf8');
        let rawData = '';
        res.on('data', (chunk) => { rawData += chunk; });
        res.on('end', () => {
          try {
            console.log("raw data:", rawData);
            
            const parsedData = JSON.parse(rawData);
            console.log(parsedData);
          } catch (e) {
            console.error(e.message);
          }
        });
      }
      
    ).on('error', (e) => {
      console.error(`Got error: ${e.message}`);
    });
    Ответ написан
  • Как вывести данные из unixtime?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Unix time это целое число секунд с начала эпохи Unix, 1 января 1970.
    В JavaScript время считается не в секундах, а в миллисекундах (1/1000 секунды). Поэтому надо будет домножить на 1e3. Это время можно передать единственным параметром в конструктор объекта Date:
    var vkApiResponse = {
      "response": 1467726682
    };
    
    
    var D = new Date(vkApiResponse.response * 1000);
    D.toString() // Tue Jul 05 2016 16:51:22 GMT+0300 (Moscow Standard Time)
    Ответ написан
    Комментировать
  • Простейший калькулятор на js?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    prompt() возвращает String, который надо привести к числу.
    Условие прекращения цикла возможно, не то, что вам на деле требуется, я бы ограничил число итераций:
    var a = +prompt('summa'), i = 0;
    for ( ; ++i<5; a *= 1.012) {
      console.log(`${i}: ${a}`); // смотрим в консоль
    }
    // ввёл 200
    // получилось:
    /*
    1: 200
    2: 202.4
    3: 204.8288
    4: 207.28674560000002
    */


    Ну и вспоминаем математику. Тут идёт умножение числа a на 1.012n раз. Сразу можно посчитать как 1.012 в степени n. Обратная задача - логарифм. Например, как узнать, сколько раз надо умножить на 1.012 сумму 20, чтобы получить 30:Math.log(30/20) / Math.log(1.012) // 33.991
    Ответ написан
  • Как понять синтаксис ES6?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Стрелочные функции это лаконичная запись функций и небольшие отличия с контекстом.
    arr.filter( (num) => num > 0 && num % parseInt(num) === 0 )
    
    // то же, что
    arr.filter( function(num) { return   num > 0 && num % parseInt(num) === 0 ;}  )

    Оставляет только те элементы массива, которые больше нуля И остаток деления (%) на целое значение себя же равен нулю. Т.е. являются квадратами целого.
    Ответ написан
  • Необходим ли здесь Symbol?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Без использования символа переменная handlers имеет значение undefined, которое тоже можно использовать как свойство объекта.
    const a = {};
    let b;
    a[b] = "test";
    
    JSON.stringify(a)
    // "{\"undefined\":\"test\"}"
    
    a[undefined] // "test"
    Ответ написан
    Комментировать
  • Как вызвать код функции?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Оберните код функции и вставьте его сразу в документ, не надо AJAX:
    const mySuperAnimationFunction = () => {
    
    // тут весь "код функции"
    
    }

    И когда нужно выполнить анимацию - доскроллили до места - вызывайте её: mySuperAnimationFunction();
    Ответ написан
    Комментировать
  • Как настроить таймер на javascript - время до открытия магазина?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно всё считать в локальной временной зоне. Известно смещение от UTC времени магазина. Текущее смещение посетителя от UTC получаем через getTimezoneOffset().

    Задача получить два объекта времени: открытия и закрытия магазина, во временной зоне браузера посетителя.

    Если какой-то из двух оказался в прошлом, добавляем ему один день, чтобы оба оказались в будущем. Который из двух оказался меньше – подскажет, открыт сейчас магазин или закрыт.

    Решение
    function tillItOpens() {
      const D = new Date();
      const shopOffsetMin = 5 * 60; // GMT+5
      const myOffsetMin = D.getTimezoneOffset();
      const diffMin = shopOffsetMin + myOffsetMin;
      
    
      function futureDate(hours, fixMin) {
        const d = new Date();
        d.setHours(hours);
        d.setMinutes(0 + fixMin);
        d.setSeconds(0, 0);
        if (d < new Date()) d.setDate(d.getDate() + 1);
        return d;
      }
    
      
      const dOpens = futureDate(9, diffMin);
      const dCloses = futureDate(21, diffMin);
    
      if (dOpens < dCloses) {
        // скоро откроется
        const hours = Math.floor((dOpens - D) / 36e5);
        const minutes = Math.floor((dOpens - D) / 6e4) - 60 * hours;
        
        return `до открытия ${hours}:${minutes}`
        
      } else {
        // сейчас открыто
        return "Сейчас открыто!";
        // хорошо ещё посмотреть, сколько остаётся до закрытия - успеет ли чел.
        // ближайшее закрытие – объект dCloses
      }
    }

    Если сейчас закрыт, запускайте таймер обратного отсчёта до объекта dOpens – он означает время открытия в текущей таймзоне.
    Ответ написан
    3 комментария
  • Почему код не работает?

    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 комментарий