Задать вопрос
Ответы пользователя по тегу JavaScript
  • Как вывести сумму чисел в промежутке через ф-цию?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    upd. самый лаконичный вариант без переборов:
    function rangeSum(a,b) {return (b*b-a*a+a+b)/2}
    
    console.log( rangeSum( 1, 3)); // 6
    console.log( rangeSum( 20, 220)); // 24120


    (старый ответ) Перебором всех значений подряд:
    function rangeSum( from, to) {
      var i, sum = 0;
      for( i = from; i <= to; i++) {
        sum = sum + i;
      }
      return sum;
    }
    
    console.log( rangeSum( 1, 3)); // 6
    console.log( rangeSum( 20, 220)); // 24120


    Но если подумать, сумму можно вычислять без перебора:
    function rangeSum2( from, to) {
      var m = to - from + 1;
      return from * m + ( m * m - m) / 2;
    }
    console.log( rangeSum2( 1, 3)); // 6
    console.log( rangeSum2( 20, 220)); // 24120
    Ответ написан
    1 комментарий
  • Как узнать индекс элемента с большим значением?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    var arr = [ 1, 3, 2, 3, 6, 2 ];
    var maxIndex = arr.indexOf( Math.max.apply(null, arr)); // 4, считается от 0


    1. Math.max() возвращает наибольшее значение из аргументов.
    2. чтобы передать массив вместо списка, используется apply()
    3. получив само наибольшее значение, остаётся найти его индекс в массиве через метод массива indexOf().


    Не очень эффективно, т.к. фактически массив перебирается дважды: в поиске максимума и в поиске индекса. Можно сделать за один проход, запоминая вместе с найденным максимальным значением его позицию:
    var arr = [ 1, 3, 2, 3, 6, 2 ];
    
    function index_max(arr) {
      var i, maxV, maxP;
      for( i = 0; i < arr.length; i++) {
        if( typeof maxV === "undefined" || arr[i] > maxV ) {
          maxV = arr[i];
          maxP = i;
        }
      }
      
      return maxP;
    }
    
    index_max(arr) // 4
    Ответ написан
    1 комментарий
  • Как взять элементы по парам?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Последовательно разбить в пары можно, например, так:
    var data = [{x:0,y:1}, {x:1,y:1}, {x:4,y:1}, {x:5, y:7}]
      , pairs = []
      , i
    ;
    
    for( i = 0; i < data.length; i++) { // перебираем входные элементы
      if( i % 2 === 0) pairs.push([]); // четный – добавляем новую пустую «пару»
      pairs[ pairs.length - 1].push( data[i]); // в последнюю пару добавляем элемент
    }
    
    JSON.stringify( pairs ) // [[{"x":0,"y":1},{"x":1,"y":1}],[{"x":4,"y":1},{"x":5,"y":7}]]


    Если же вы хотите разбить их в пары не по положению в исходном массиве, а в зависимости от расстояния между ними на поле, это совсем другая история. Уточните вопрос.
    Ответ написан
  • Циклы, Вынести переменную или объявлять внутри при каждой итераиции?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    var, где бы вы его ни написали, «поднимается» наверх при интерпретации кода – это называется var hoisting. Поэтому ваши варианты 1) и 2) не имеют разницы. Возможно, во 2-м варианте вы имели в виду let вместо var?

    Проверять перформанс можете и сами console.time(), и приглашать других на jsPerf. Тысячи итераций недостаточно, пробуйте миллион, миллиард.
    Ответ написан
    Комментировать
  • Высчитать сколько произошло действий за определённый участок времени?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Задача напоминает построение гистограммы. Весь интервал бьётся на отрезки по 15 минут, и считается, сколько событий «упадёт» в каждое из ведёрок.

    Я бы сделал так. На вход функции передаются данные отсчётов, время начала и время конца.

    Сначала подготовить ответ – объект, где ключи это время начала 15-минуток, а значения пока нули. Будут числа событий, попадающие в эти интервалы.

    Перебирать каждое событие. Брать его время начала. Смотреть, попадает ли вообще в исследуемый диапазон. Высчитывать начало его 15-минутки, округлив деление времени до ближайшего начала 15-минутки в меньшую сторону. Прибавлять 1 нужному «ведёрку».

    /**
     * @param array hits - массив данных об ударах. 
     * @param int start - начало интервала (включён), число миллисекунд с 1 января 1970 UTC
     * @param int finish - конец интервала (исключён), число миллисекунд с 1 января 1970 UTC
     *
     * @return возвращает объект, где ключи – моменты начала 15-минуток, а значения – число событий
     */
    function bins( hits, start, finish) {
    	var i
    		,step = 15 * 60 * 1000 // 15 минут в миллисекундах
    		,bins = {}
    	;
    	
    	// заполнить ячейки нулями
    	i = start;
    	do { bins[i] = 0 } while( i += step < finish);
    	
    	// перебрать все сэмплы
    	for(i = 0; i < hits.length; i++) {
    		hitTime = hits[i].ts; // считаем, что значение времени лежит в свойстве "ts"
    		if( hitTime < start || hitTime >= finish) continue; // вне диапазона
    		binTime = start + Math.floor( (hitTime - start) / step) * step; // в какое ведёрко попадает
    		bins[ binTime]++;
    	}
    	
    	return bins;
    }
    Ответ написан
    1 комментарий
  • Как добавить/убрать класс по местному времени?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Нужно раз в сколько-то секунд проверять текущее время браузера и ставить классы, в зависимости от часа.

    По-хорошему, не нужно при каждой проверке убирать-ставить классы, когда они и так стоят, поэтому код чуть усложняется добавлением текущего состояния state:
    (function($el) {
        
        var state, timer;
        
        function checkTime() {
            var h = (new Date).getHours(), state_prev = state;
            state = ( h >= 9 && h < 22) ? 'DAY' : 'NIGHT';
            
            if( state_prev !== state) { // только что изменился статус
                if( state === 'DAY') $el.removeClass('disable').addClass('visible');
                else if( state === 'NIGHT') $el.addClass('disable').removeClass('visible');
            }
        }
    
        checkTime(); // вызвать один раз сразу же
        
        timer = window.setInterval(checkTime, 10000); // раз в 10 секунд перепроверять
    })(
    
        $('.opened') // jQuery-выборка элементов, которым переключать класс
    
    );


    Неоптимальная плохая версия, но покороче:
    var $el = $('.opened'); // jQuery-выборка элементов, которым переключать класс
    window.setInterval( function() {
        var h = (new Date).getHours(); // текущий час по локальному времени
        if( h >= 9 && h < 22) $el.removeClass('disable').addClass('visible'); // кабак открыт
        else $el.addClass('disable').removeClass('visible'); // кабак закрыт
    }, 10000); // раз в 10 секунд перепроверять
    Ответ написан
    3 комментария
  • Как отформатировать числа в js?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Замените точку на пробел
    function changeSize(){
      option = $("#size option:selected");
      $('.price strike').text(option.attr('compare-price')
        .replace('.',' '));   
      $('.price').text(option.attr('price')
        .replace('.',' '));   
    }
    Ответ написан
  • Реализовать очередь на php?

    sergiks
    @sergiks Куратор тега PHP
    ♬♬
    • Gearman
    • Laravel и его очередь задач (Queue)
    • собственная реализация на Redis


    p.s. вставку в базу попробуйте реализовать, минуя PHP: например, модулем nginx сразу вставлять в Postgres или Redis.
    Ответ написан
    Комментировать
  • Где можно заработать на видеоуроках?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Envato Tuts+
    Ответ написан
    Комментировать
  • Какая технология (продукт) использована для этого графика?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    D3js

    (вынес в ответ из комментариев) Именно этот график построен на D3 – смотрите исходник фрейма виджета этого графика.

    D3 это библиотека, начиная с 4-й версии – набор отдельных модулей. В самих D3 нет «готовых» графиков, но есть всё для построения любого графика: красиво, с интерактивом и анимациями, загрузкой данных из внешних источников и т.п. Можно, конечно, брать чьи-то примеры графиков на D3 и модифицировать их под свои задачи.

    Стоимость разработки кастомного графика как в примере я бы очень приблизительно оценил в диапазоне от $100 до $1000.
    Ответ написан
    4 комментария
  • Что это за синтаксис в jquery?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Такая сигнатура, $( html, attributes) – создаёт новый HTML элемент. См. документацию.

    В вашем примере создаётся элемент кнопки <button>, внутри кнопки задаётся текст "Contact me". Эта кнопка вставляется в DOM-дерево после первого элемента <article> и на неё вешается слушатель события клика – метод show()
    Ответ написан
    Комментировать
  • Конвертировать строку в объект?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    JSON.parse() возвращает объект или бросает исключение SyntaxError, если не парсится.

    Попробуйте примерно так:

    var lastGood = this.currentClient.jsondata, candidate, counter = 0, found = false;
    while ( ++counter < 100) {
      try {
        candidate = JSON.parse(boo);
      } catch(e) {
        this.currentClient.jsondata = lastGood;
        found = true;
      }
      if( found) break;
      lastGood = candidate;
    }


    Не сразу назначать полученное значение, а исползовать промежуточную переменную candidate. Ограничить максимальное число итераций счётчиком. Ловить исключение.
    Ответ написан
    Комментировать
  • Как сделать такой эффект на canvas?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Просто круги: jsFiddle
    var canvas = document.getElementById("myCanvas")
      , ctx = canvas.getContext("2d")
    	, r
    ;
    ctx.translate( 500/2, 500/2); // передвинуться на центр листа
    
    ctx.font = "14px Arial";
    ctx.textAlign = "center";
    ctx.textBaseline="middle"; 
    
    ctx.fillStyle = "#999";
    for(r=100;r<=500;r+=20) circle(r);
    
    function circle(r) {
      var dist = 16
    		, n = Math.round( 2 * Math.PI * r / dist)
    		, i
    	;
    
    	for(i=0;i<n;i++) {
    		ctx.rotate( 2 * Math.PI / n); // повернуть лист
    		ctx.fillText( Math.round(100*Math.random())%2?0:1,0,-r);
    	}
    }


    35d5640debf1414581e8d3d14d596d7d.png

    Для меняющегося плавными областями цвета цифр можно задействовать шум Перлина – берутся координаты (x,y) в которые попадает очередная цифра, и через шум Перлина получается её яркость – так получаются не хаотичные, а плавными областями, как облака, яркости. Напр. реализация шума Перлина на JS.
    Ответ написан
    Комментировать
  • Как сделать, чтобы меньшие числа давали больше очков?

    sergiks
    @sergiks Куратор тега PHP
    ♬♬
    Буквально ваши правила реализуются подобным JavaScript кодом – с условиями:
    function getPostScore(time) {
      var diff = Math.floor((new Date()).getTime()/1000) - time;
      if( diff <= 3600) return 50000;
      else if( diff <= 7200) return 25000;
      else if( diff <= 10800) return 10000;
      else return 0;
    }
    
    getPostScore(1493487180); // 10000


    Но ступенчатость значений, наверное, не вполне оправдана и лучше будет какой-то гладкой функцией. Например, вида y = k / x
    af5c49df83bb430f9f7ba91b2c6bc147.png
    С коэффициентом k = 50000 * 3600 она удачно захватывает и вторую точку. Но плоха тем, что ближе к нулю зашкаливает в +бесконечность.

    Наверное, для вашей задачи уместнее S-образная кривая – сигмоида, задаваемая формулой вида y = 1 / (1 + e-x) Примерно подобрал коэффициенты:
    ecd0f96a15224fe2ac9fb125e7305b8f.png
    function getPostSigma(time){
      var diff = Math.floor((new Date()).getTime()/1000) - time;
      return Math.round( 10000 + 40000 / (1 + Math.exp((diff-6800)/700)));
    }
    
    getPostSigma(1493531780); // 49998
    getPostSigma(1493522780); // 11545
    Ответ написан
    Комментировать
  • Добавление элементов из json и последующее удаление?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Известно, сколько максимум блоков видно одновременно. Блоки держать в массиве. Вставлять и вынимать их из DOM – в странице присутствуют в любой момент только те 2 блока, что видны.

    Можно сделать на JS, но анимация дергается.

    Но лучше вариант с CSS анимацией. Тут используется две анимации – въезд в кадр, и выезд. По окончании каждой анимации вызывается событие transitionend. По завершении въезда – пора запускать выезд себя и въезд следующего.
    Ответ написан
  • Как работает именованный аргумент функции в JS?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    options, которым даёте значение в начале, и options внутри функции – это две разные штуки. Разберитесь с «областью видимости» переменных в JavaScript. Внутри функции как бы объявляется собственная версия переменной options, значение которой передаётся в функцию при её вызове.

    Для читаемости назовите аргумент функции иначе, например, opts – и всё встанет на свои места:

    options = {
        width: 10,
        height: 20,
        contents: 'some text'
    };
    
    function show(opts) {
        var width = opts.width || "";
        var height = opts.height || "";
        var contents = opts.contents || "Предупреждение";
        return width + height + contents;
    }
    
    console.log(show( options)); // 30some text
    options.contents = 'Другой текст';
    console.log(show( options)); // 30Другой текст


    p.s. почему "30", а не "1020"? Берётся число 10, к нему прибавляется число 20, результат – число. Потом к числу прибавляется строка, тут уже действует сложение строк (конкатенация). Чтобы с самого начала складывались строки начните с пустой строки: '' + width + height + contents
    Ответ написан
  • Почему при обработке файла JS-скриптом зависает браузер?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    • JS писать в файл вполне себе может – используйте вместо браузера node.js – см. fs.writeFile() и др.
    • Если так уж хотите в браузере – можете задействовать web worker – это как бы параллельный процесс, который не тормозит страницу/интерфейс.
    Ответ написан
  • Как получить доступ к данным в json файле на стороннем сервере?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно веб-серверу дать инструкцию добавлять такой заголовок. Например, для nginx:
    add_header Access-Control-Allow-Origin *;
    Ответ написан
    Комментировать
  • Почему в функции push добавляет всего один раз значение?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    когда вы меняете innerHTML, слетают все события.

    Вот так работает.
    Ответ написан
    3 комментария