Задать вопрос
  • Как правильно получить элемент по классу (js)?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно через querySelectorAll()
    // внутри ul с классом list ищем все li
    var myNodeList = document.querySelectorAll('ul.list li');
    
    if( myNodeList.length) { // что-то нашлось, коллекция не пустая
      var el0 = myNodeList[0]; // первый 
    }
    Рабочий пример

    Метод querySelectorAll() есть и у документа и у элемента. Так что можно сначала получить элемент, внутри которого искать, а затем внутри него собрать коллекцию:
    var list = document.querySelectorAll('ul.list'); // все UL класса list в документе
    if( list.length) {
      var items = list[0].querySelectorAll('.list');
      // любые элементы класса list внутри первого найденного ul.list
    
      if(items.length) {
        var item = items[0]; // первый из li
      }
    }
    Ответ написан
    Комментировать
  • Как изменять размеры svg в зависимости от размеров внешнего контейнера?

    В принципе SVG вписывается в контейнер, достаточно задать тому ширину, а элементу svg указать viewbox.

    Один глюк, который не понимаю. Если viewbox задать программно, как у вас в фиддле, через .attr('viewbox', '0 0 1200 250') – svg не становится «живым». Зато если через инструменты разработчика иму изменить параметр viewbox, например, вместо 1200 поставить 1201, все оживает: график вписывается в ширину и меняется при изменении окна.

    Глюк исправляется, если не создавать программно SVG и атрибут, а прописать их сразу в HTML.
    Рабочий fiddle.
    Ответ написан
    Комментировать
  • Как это работает (алгоритм с использованием рекурсии для вычисление числа Фибоначчи)?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Числа Фибоначчи – это последовательность, начиная с 0 и 1, где каждый следующий равен сумме двух предыдущих.

    Третий равен 0 + 1 = 1 // итого первые три ряда: 0 1 1
    Четвёртый это сумма последних двух единиц = 2 // 0 1 1 2
    Пятый это 1 + 2 = 3 // 0 1 1 2 3
    И так далее. Вот начало ряда:
    значение:         0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144
    порядковый номер: 0  1  2  3  4  5  6   7   8   9  10  11  12
    Восьмой, если считать с 0, равен 21.

    Параметром в функцию getFibonachi() передаётся не значение, а порядковый номер элемента ряда Фибоначчи, а функция должна вернуть значение.

    Чтобы вычислить очередное значение, надо знать два предыдущих. Отсюда и (n-1) и (n-2)

    Поскольку любой элемент ряда считается одинаково, пишут всего одну функцию. Она сразу готова дать ответ для первых двух элементов, если n = 0 или 1. В остальных случаях ей придётся вызывать саму себя.

    Движок JavaScript'а сам позаботится о хранении промежуточных значений и цепочки кто-кого вызвал и с каким параметром.
    Ответ написан
    Комментировать
  • Бинарный поиск в координатной сетке?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    По координатам вычисляйте индекс квадрата. Что-то типа dlina_stroki * position.y + position.x
    Это точно быстрее поиска, пусть и бинарного )

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

    Допустим, там целочисленные координаты от 0 до 1800 с шагом 200. Поле 10x10 — массив длиной 100.
    0,0      200,0    400,0    ... 1800,0
    0,200    200,200  400,200  ... 1800,200
    0,400    200,400  400,400  ... 1800,400
    ...
    0,1800   200,1800 400,1800 ... 1800,1800


    Интересует индекс элемента (400,200)

    i = storona * y / shag + x / shag

    Шаг у нас shag = 200 значит, искомый индекс 10 * 200 / 200 + 400 / 200 = 12
    Ответ написан
    Комментировать
  • LocalStorage создание и получение?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно. Курить документацию по localStorage и по Storage
    const dg = document.getElementById.bind(document);
    const inKey = dg('in-key');
    const inVal = dg('in-val');
    dg('btn-to').addEventListener('click', e => {
      localStorage.setItem(inKey.value, inVal.value);
    });
    dg('btn-from').addEventListener('click', e => {
      inVal.value = localStorage.getItem(inKey);
    });
    dg('btn-list').addEventListener('click', e => {
      let list = [];
      for (let i = 0; i < localStorage.length; i++) {
        let k = localStorage.key(i);
        list.push('<dt>'+k+'</dt><dd>'+localStorage.getItem(k)+'</dd>');
        dg('list').innerHTML = list.join('\n');
      }
    });
    рабочий пример
    Ответ написан
    3 комментария
  • Как сделать такую анимацию в adobe premier или где еще?

    Adobe AfterEffects для задачи подходит гораздо лучше, чем Premier.

    Вот урок (на англ.) по анимации размера объекта уровнем звука, именно как вы хотите.
    Ответ написан
    Комментировать
  • Можно ли в Фотошопе сделать афинное преобразование по опорным точкам?

    sergiks
    @sergiks Куратор тега Алгоритмы
    ♬♬
    Vanishing Point – встроенная фишка в шопе.

    Однажды настраиваете перспективную сетку и потом просто copy-paste изображение и натаскиваете на эту сетку - оно трансформируется под заданную перспективу.
    Ответ написан
    1 комментарий
  • Несколько сообщений для ВК бота. Как отвечать на последнее?

    sergiks
    @sergiks Куратор тега ВКонтакте
    ♬♬
    Не отвечать сразу, ждать 5 минут. Если поток слов от пользователя прервался, можно неспеша ответить на последнее.
    Ответ написан
  • Как оптимизировать работу скрипта?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Надо перебирать в цикле имеющиеся значения. Удобнее держать данные (строки) в массиве массивов:
    data = [
        ["M166 E16", "A-Class", "2004", "A 160", "W168.II", "бензин"],
        ["M166 E19", "A-Class", "2004", "A 190", "W168.II", "бензин"],
        // и остальные данные. 
      ];


    Вытащить значения полей ввода лучше лишь 1 раз и запомнить в переменных:
    // вместо многократного
    ($("#class").val())
    // лучше один раз
    var _class = $("#class").val();
    // и потом использовать значение этой переменной


    Общий алгоритм: ищем, перебирая строки. Как только нашли, дальше не ищем. В конце смотрим, нашлось вообще что-то (показываем) или нет (пишем «нет результатов»).

    Поиск вызывает вопросы:
    1. точно ли ищете полное соответствие значений или достаточно подстроки;
    2. важен ли case (может, искать будут «БЕНЗИН» вместо «бензин»
    3. точно ли хотите искать каждое значение во всех полях строки? Например, год – известно же, что он в определённой колонке. Быстрее сравнивать искомый год только с одним полем.


    Сравниние с -1 короче записать так: !!~value – тоже будет false только если value == -1

    Итого
    $(document).ready(function() {
      const data = [
        ["M166 E16", "A-Class", "2004", "A 160", "W168.II", "бензин"],
        ["M166 E19", "A-Class", "2004", "A 190", "W168.II", "бензин"],
        ["M266 E15", "A-Class", "2005", "A 150", "W169.I", "бензин"],
        // и остальные данные. 
      ];
    
    
      $('.left').on('input', function() {
        const _class = $("#class").val(),
          _model = $("#model").val(),
          _god = $("#god").val(),
          _kuzov = $("#kuzov").val(),
          _tip = $("#tip").val()
        ;
        
        var index = -1; // сначала считаем, что "не найдено"
        
        for(let i = 0; i < data.length; i++) {
          let car = data[i];
          if( !!~car.indexOf(_class)
            &&  !!~car.indexOf(_model)
            &&  !!~car.indexOf(_god)
            &&  !!~car.indexOf(_kuzov)
            &&  !!~car.indexOf(_tip)
          ) {
            index = i;
            break;
          }
        }
        
        if(!!~index) {  // нашли и index стал больше -1
          $("#page-title").html( "Мотор " + data[i][0] );
        } else {        // не нашли и index === -1
          $("#page-title").html( "Нет такого" );
        }
      });
    });
    Ответ написан
    Комментировать
  • Можно ли в приложении увидеть друзей из вк?

    sergiks
    @sergiks Куратор тега ВКонтакте
    ♬♬
    Ответ написан
    Комментировать
  • Где посмотреть структуру современного приложения JS (ES6 модули)?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Ответ написан
    Комментировать
  • Как сделать одновременное редактирование документа, как в google docs?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Почитайте про шаблон проектирования «Команда».

    Понадобится слать из каждого клиента «команды» – каждый введённый символ, удалённый символ, удаление/вставка фрагмента текста, изменение форматирования. И всем редактирующим рассылать каждую полученную команду.

    Начните с простого, где редактируется только текст, без форматирования, таблиц и пр.
    Ответ написан
    Комментировать
  • Как оптимизировать код обработки одной формы для нескольких форм?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    попробуйте вместо
    if (document.form.name.value == '' || document.form.phone.value == '' ) {

    вот так:
    if (this.name.value == '' || this.phone.value == '' ) {
    Ответ написан
    Комментировать
  • Рисование 2d с помощью 3d моделей?

    SketchUp
    Ответ написан
    Комментировать
  • Как при нажатии на enter добавить?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    При копировании из HTML заменять <br> на \n.
    При копировании из textarea в div – наоборот, \n на <br>:
    document.getElementById("btn-from")
      .addEventListener('click',function(){
        elTa.value = elSrc.innerHTML
          .replace(/<br\/?>/ig, '\n')
          .replace(/\n+/g, '\n')
          .trim()
        ;
    });
    
    document.getElementById("btn-to")
      .addEventListener('click',function(){
        elSrc.innerHTML = elTa.value
          .replace(/\n/g, '<br>')
          .trim()
        ;
    });


    Рабочий пример
    Ответ написан
    Комментировать
  • Получение четного числа несколькими способами?

    sergiks
    @sergiks Куратор тега Алгоритмы
    ♬♬
    Верно. Способов несколько. Всего бесконечность минус 1:

    Берём любое случайное целое. Умножаем на 2. Это первое чётное.
    Проверяем, что результат не равен половине исходного числа – это единственное исключение.
    Второе чётное – это из исходного вычесть первое.

    Разница двух чётных – число чётное. Неравенство слагаемых мы гарантируем проверкой единственного случая выше.
    Ответ написан
  • Как с помощью циклов определить простое или составное число?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Всего два возможных исхода: «простое» или «составное».
    Случай с составным правильно определяется в варианте, где вы поставили break.

    Но там не break нужен. У вас функция, которая должна вернуть значение. Как только обнаружили, что найден делитель, всё, можно сразу возвращать результат «Составное число».

    Я бы порекомендовал такую логику: в цикле только ловите ахтунг-момент найденного делителя - и сразу возвращайте "Составное". Если же весь цикл отработал и не вылетел из функции, возвращайте "Простое". Не надо никаких «флагов» и доп. переменных. Код получается короткий и понятный.

    spoiler
    function testCycle(n) { 
      for (let i = 2; i < n / 2; i++)
        if (n % i === 0)
          return "Составное число"; 
      return "Простое число";
    }

    Примечания:
    • let – это то же, что и var, но действует не в рамках всей функции, а только в рамках блока. В данном случае, внутри цикла.
    • === – это «строгое» равенство. То же, что и ==, но ещё и проверяет, чтобы типы совпадали, т.е. не прокатит "0" === 0. Зато работает чуть быстрее.
    • проверяем не до n, а до n / 2, т. к. целые множители не могут превышать половину произведения (второй множитель не меньше 2)
    Ответ написан
    Комментировать
  • Что делать после todo?

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

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    В буфер можно записывать только по действию пользователя: в обработчике клика, например. Но никак не по асинхронному событию где-то в коде.
    You can use the "cut" and "copy" commands without any special permission if you are using them in a short-lived event handler for a user action (for example, a click handler).


    Если у вас код не на странице, а это вы пилите расширение в браузер, можно запросить доп. разрешения, и тогда всё получится.
    Ответ написан
    Комментировать
  • Как решить задачу о распределении временных интервалов?

    sergiks
    @sergiks Куратор тега Алгоритмы
    ♬♬
    Это типичная задача упаковки (packing problem).

    В «коробку» длиной 100 и шириной K надо впихнуть комплект колбас шириной 1 и разной длины.
    Ответ написан
    Комментировать