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

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Задача не вполне ясна. Но вот пара подсказок:

    1. делать из строки "31 января" полноценный объект даты, дописав текущий год
    2. из объекта Date легко узнать, последний ли это день месяца: прибавить 1 день и сравнить, изменился ли месяц
    Ответ написан
    Комментировать
  • Как проверить, что в массиве есть одинаковые объекты?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Пара способов:
    1. по-правильному можно сравнивать каждый-с-каждым правее, пока не найдётся первое равенство.
    2. в одну строку можно очистить от повторов, конвертировав массив в Set (и снова в массив), и сравнить длины

    спойлер №1
    const hasDuplicates = arr => {
      for (let L = 0; L < arr.length - 1; L++) {
        for (let R = L + 1; R < arr.length; R++) {
          if (arr[L] === arr[R]) return true;
        }
      }
    
      return false;
    };

    спойлер №2
    const hasDuplicates = arr => arr.length !== (new Set(arr)).size;


    P.S. за один-единственный вызов document.querySelectorAll() дубликатов точно не нахватает. Вся затея с дублями имеет смысл, только когда вызывают это дело несколько раз.
    Ответ написан
    Комментировать
  • Как правильно сортировать массив с датами и разным часовым сдвигом??

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Сортирует правильно, с учётом временных зон. Именно в таком порядке произойдут эти события.

    Если хочется проигнорировать часовые пояса и представить (зачем-то), что время у всех событий указано в одной общей временной зоне, то можно отрезать лишнее — брать часть строки до "GMT":
    test.forEach(item => item.tsNoTZ = new Date(item.dateAndTime.substring(0, 24)));
    test.sort((a, b) => b.tsNoTZ - a.tsNoTZ);
    И лучше только однажды пройти по массиву и добавить каждому объекту новое поле, по которому потом сортировать.
    Ответ написан
    Комментировать
  • Как обновлять счётчик кликов?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    1. массив не «реактивный», как в каком-нибудь React или Vue. Простой обычный массив. Поэтому чтобы отобразить изменения его длины, надо каждый раз, при изменении, вручную вызывать disp.innerHTML = arr.length;
    Поместить это и внутрь функции, и оставить на первый раз снаружи, чтобы показать исходное состояние.

    2. «источник правды» – на сервере. Например, в БД хранить значение счётчика. При запросе страницы отдавать сразу же и текущее значение счетчика. При нажатии на кнопку, тут же сообщать серверу, что, мол, «увеличили на 1». Именно так, а не «значение стало 100500» – т.к. в это время кто-то друго тоже мог кликнуть. В ответ сервер возвращает очередное актуальное значение с учётом и других кликнувших.
    Чтобы это всё работало вообще в реальном времени, можно использовать соединение WebSocket, по которому в обе стороны пересылать сообщения. От бразуера в бэк типа: "тут кликнули!". От бэка в бразуре "а вот новое значение суммы всех кликов: XXX"
    Ответ написан
    Комментировать
  • Как вывести Сумму нечетных чисел в определенном диапазоне?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно и сразу по формуле посчитать. Сумма нечетных от 1 до X равна квадрату числа нечетных:
    const getSumOfNumbers = maxNumber => Math.ceil(maxNumber / 2) ** 2;

    Проверки:
    getSumOfNumbers(4) // 4
    getSumOfNumbers(5) // 9
    getSumOfNumbers(6) // 9
    getSumOfNumbers(100) // 2500
    Ответ написан
    Комментировать
  • Как заполнить таблицу рандомными числами?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    CodePen
    Ответ написан
    Комментировать
  • Как вывести номер элемента в пагинации?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Клик может принять и ссылка и элемент списка.МОжно ловить оба варианта:

    Ссылку сбираю примитивно, как строку текста. Правильнее как предложил felony13twelve через URL.
    Ответ написан
    Комментировать
  • Как подсчитать сколько раз использовался символ?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Строку по буквам можно перебрать циклом for .. of:
    let n = 0;
    for (const c of 'Moloko') {
      if (c === 'o') n++;
    }
    n // 3


    <Offtopic> не первый раз замечаю, что русскоязычная версия документации на MDN чуть хуже англоязычной. Например, явно String упоминается в английской, но не в русской версии описания for .. of
    Теории заговора welcome в комменты : )
    Ответ написан
    1 комментарий
  • Как отписаться от события, если оно обрабатывается замыканием?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Положить итоговый обработчик в переменную, и её использовать для removeEventListener()
    Примерно так:
    document.body.addEventListener("click", clickHand("WOW!"));
    
    function clickHand(str) {
      const handler = ({ target }) => {
        console.log(target);
        console.log(str);
        document.body.removeEventListener("click", handler);
      };
    
      return handler;
    }
    Ответ написан
    Комментировать
  • Не работает remove. Как починить?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Точки уберите. Вот так работает:
    animation.classList.remove("circle");
    animation.classList.add("circle-active");
    тут уже идёт работа с именами классов.
    Ответ написан
    Комментировать
  • Нужно рандомный индекс чисел массива?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    нужно «перемешать» массив ("shuffle").

    Например:
    Взять упорядоченный [1, 2, 3, .. 10]
    и попереставлять местами пары элементов.

    1-й с каким-то от 1 до 10 поменять местами.
    2-й с каким-то от 2 до 10
    и т.д. очередной с кем-то случайным правее, начиная с себя.

    Алгоритм Фишера-Йейтса
    Ответ написан
    6 комментариев
  • Как отследить изменения полей?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    на обоих полях слушать событие "input" — когда что-то меняется.

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

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Почти правильно решили.
    В коде надо четко понимать, что есть что.

    Math.min() возвращает минимальное значение среди переданных ему.
    Т.е. надо в скобки Math.min() положить несколько значений, из которых он выберет одно, минимальное.

    В задании просят найти минимальное в каждой строке. Значит, в Math.min() надо передать все значения из очередной строки.

    Обычно Math.min() принимает варианты через запятую: Math.min(1, 3, 5), но у нас каждая строка это массив вроде [1, 3, 5] Массив удобно «распаковать» с помощью трёх точек ... (так называемый оператор расширения). Есть очередная строка в массиве arr – передать её в Math.min(...arr) – вернёт минимальное значение.

    Сейчас внешний цикл for() перебирает у вас как раз строки двумерного массива. То, что надо.
    Вложенный цикл уже и не нужен.

    P. S. минимальное значение можно искать и перебором, со вторым, вложенным циклом for() как у вас. Это длиннее, но тоже работает, особенно на больших объёмах данных. В таком варианте надо бы убрать Math.min() в конце.

    В каждой итерации инициализировать s не в 0, а в константу Number.POSITIVE_INFINITY – больше её точно ничего не будет, все значения окажутся меньше. А дальше сравнивать текущее значение s с очередным числом из строки. И если очередное оказалось меньше — переназначать s это значение, очередной найденный минимум.

    spoiler
    document.write(
      mass.map(row => Math.min(...row)).join(', ')
    ); // 2, 4, 7
    Ответ написан
    Комментировать
  • Почему выводит пустой цвет фона у элемента?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    red.style.backgroundColor – берётся элемент red,
    его свойство style содержит инлайновые стили, назначенные именно этому элементу. Напрямую.

    Не унаследованные через листы стилей, предопределённые браузером, назначенные браузерным расширением.

    Напрямую свойство в style:
    const el = document.createElement('div');
    div.style.backgroundColor = "red";
    
    div.style.backgroundColor // "red"


    Добавленный класс:
    div.classList.add("green-text"); // CSS .green-text { color: green; }
    
    div.style.color // ""

    Прямо в разметке
    <p style="font-weight: bold">Bold</p>
    document.querySelector('p').style.fontWeight // "bold"

    Унаследованный от родителя
    <p style="font-weight: bold">
      <span>Bold</span>
    </p>

    document.querySelector('span').style.fontWeight // ""
    Ответ написан
    Комментировать
  • Как выполнить код?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Обернуть в функцию:
    let retryCount = 0;
    const retryMax = 3;
    const url = 'https://example.com/api/method';
    
    const getData = () => {
      $.get(url, data => {
        // ...
      }).fail(() => {
        if (++retryCount <= retryMax) {
          setTimeout(getData, 1000); // через секунду
        } else {
          console.error('Так и не получилось');
        }
      });
    };
    
    getData();
    Ответ написан
    Комментировать
  • Как делают такие интерфейсы и навешивают события?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Два варианта, которые не видны в разметке:
    1. element.addEventListener('click', handlerFunction);

    2. делегирование событий: слушают события не на самих элементах, а выше, на общем родителе. Тоже, скорее, не через onclick="handler" в разметке, а через addEventListener()
    Ответ написан
    Комментировать
  • Как слелать функцию подсчета?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Пройтись по участникам команды, собирая объект, где ключи – названия профессий, значения – аккумулирующиеся суммы затрат на соотв. профессию. Типа, { Progger: 100, Tester: 200 }

    Затем остаётся только сложить значения всех свойств этого объекта для тотала по всей комманде, и переименовать ключи, дописав в начале им "totalBudget":
    const calculateTeamFinanceReport = (salaries, team) => {
      const bySpec = team.reduce((acc, { specialization: spec }) => {
        if (!Object.hasOwn(acc, spec)) acc[spec] = 0;
        const { salary, tax } = salaries[spec];
        const k = 1 + parseFloat(tax) / 100;
        acc[spec] += salary * k;
    
        return acc;
      }, {});
    
      const totalBudgetTeam = Object.values(bySpec).reduce((acc, c) => acc + c);
      const result = Object.fromEntries(Object.entries(bySpec).map(([key, value]) => ['totalBudget' + key, value]));
    
      return { totalBudgetTeam, ...result };
    };
    
    calculateTeamFinanceReport(salaries, team);
    // { totalBudgetTeam: 3350, totalBudgetProgger: 1150, totalBudgetTester: 2200 }
    Для разбора процентов удобна функция parseFloat() – она читает цифры с начала строки, сколько может. И игнорирует буквы после. parseFloat('15.5%') === 15.5
    Ответ написан
    Комментировать
  • Как перебрать методы объектов в массиве?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    const arrayOfObjects = [
      { student: 'Dmitriy', runLab () {return 1;}},
      { student: 'Andrew', runLab () {return 2;}},
      { student: 'Mellisa', runLab () {return 3;}},
      { student: 'Ann', XrunLab () {return 4;}},
    ];
    
    function gradeLabs(labs, expectedResult = 1) {
      labs.forEach(({ student, runLab }) => {
        try {
          const result = runLab();
          if (result === expectedResult) {
            console.log('Student %s has PASSED the test', student);
          } else {
            console.error('Student %s has FAILED the test', student);
          }
        } catch (e) {
          console.error('Student: %s has FAILED the test. Error thrown: %o', student, e);
        }
      });
    }
    
    gradeLabs(arrayOfObjects, 1);
    Ответ написан
    2 комментария
  • Как найти слова по вертикали и змейкой?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Найти первую букву (может, в нескольких местах окажется).
    Есть её X и Y.
    Для каждого варианта: проверять буквы сверху, снизу, справа, слева на предмет соответствия следующей искомой.

    Уточнить бы правила: можно ли смотреть налево от текущей буквы. Можно ли дважды проходить через одну и ту же.
    Ответ написан
    Комментировать
  • Как удалить html пробел через js и заменить на обычный?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    В консоли на этой странице можно выполнить:
    document.querySelectorAll('code.html.hljs.xml')
      .forEach(el => el.innerText = el.innerText.replaceAll(/&nbsp;/gi, ' '));
    Ответ написан