Задать вопрос
  • Не работает 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();
    Ответ написан
    Комментировать
  • Как задать :hover для самого элемента?

    Никак.

    Только через таблицу стилей.
    Или имитировать, обрабатывая события JavaScript'ом.

    Отчего бы не назначать один из трёх классов налету:
    switch (Model[i].Type) {
      case EventType.Call:
        className = 'my-class-call';
        break;
      case EventType.Meeting:
        className = 'my-class-meeting';
        break;
      // ...
    }
    
    <a class="@className" id="user-event-@i" href="@Url.Action("Details", "Event", new { @id = @Model[i].Id })">
      <div style="width: 100%; min-height: 110px; border-top: 2px solid #CFCED1; border-left: 1px solid #CFCED1; border-right: 1px solid #CFCED1; background-color: @backgroundColor; cursor: pointer;">
      </div>
    </a>


    И определить однажды в начале стили
    .my-class-call { ... }
    .my-class-call:hover { ... }
    
    .my-class-meeting { ... }
    .my-class-meeting:hover { ... }
    Ответ написан
    4 комментария
  • Как делают такие интерфейсы и навешивают события?

    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, ' '));
    Ответ написан
  • Сайт с доступом только по https. Плюсы и минусы?

    sergiks
    @sergiks Куратор тега Веб-разработка
    ♬♬
    Chrome, начиная с версии 90, а сейчас актуальная 109, по умолчанию пробует в первую очередь протокол HTTPS (источник новости)

    В Firefox появился режим https-only, который вообще запрещает любые подключения по незащищённому HTTP, если вручную не добавили сайт в исключения.

    Так что решение админов не открывать HTTP вообще — немного радикально, игнорирует убогих с устаревшими системами-браузерами, приведёт к потере пары посетителей, но в целом, некритично.
    Ответ написан
  • С помощью чего сделать шаблон для страницы html?

    sergiks
    @sergiks Куратор тега Веб-разработка
    ♬♬
    Я бы рыл в сторону Twig темплейтов.
    Если помимо PHP запускали Composer.
    Ответ написан
    Комментировать
  • Как перевести число в hex с фиксированной длиной строки?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    см. метод строки padStart()

    dec.toString(16).padStart(64, '0')
    Ответ написан
    1 комментарий
  • Решил задачу, но вопрос насколько верное решение выбрал?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Ревью
    В вашем решении можно улучшить мелочи:
    1. переменная arr нужна только внутри цикла, лучше её туда и поместить. В большом коде проще будет разобраться, когда ограничена область видимости созданных переменных. const вместо let уместнее, т.к. внутри цикла значение key не меняется, да и arr тоже:
    for (const key in a14) {
      const arr = a14[key];
      // ...
    }


    2. т.к. просят «через пробел» – удобнее всего складывать значения в массив, а потом его .join(' ') – это избавляет от проблемы лишнего пробела, да и мухи данные отдельно, оформление отдельно.

    3. вместо innerHTML лучше innerText, т.к. выводимое не содержит разметки, и зачем заставлять браузер пытаться разбирать его как HTML.

    4. вешать слушателя события клика лучше через addEventListener:
    - document.querySelector('.b-14').onclick = f14;
    + document.querySelector('.b-14').addEventListener('click', f14);


    Альтернатива
    На какой стадии обучения выдали это задание, мне неизвестно.
    Но раз там есть и объект a14, то может, слышали про Object.values().
    А раз в задании говорят про массивы, то, может, знакомы методы map() и join()?

    Можно решить так:
    const f14 = () => document.querySelector('.out-14') // элемент для вывода результата
      .innerText = Object.values(a14) // массив массивов [ [1, 2, 23], [3, 4, 5], ... ]
        .map(arr => arr[0]) // вместо каждого под-массива, его первый элемент
        .join(' '); // склеить в строку через пробел
    Ответ написан
    1 комментарий
  • Чем можно сгенерировать множество pdf?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Puppeteer (кукловод на англ.)

    запустить «безголовый» браузер Chromium, который отрендерит страницу с данными. И забрать её в PDF.

    Пример сохранения страницы сайта в PDF.
    Ответ написан
    Комментировать
  • Как создать функцию, которая принимает текст, разделённый переносами строк и возвращает новый текст, в котором каждая строка обернута в тег?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Разбить такой текст по символу новой строки в массив.
    Каждую строку обернуть в тег.
    Снова склеить строки в одну, с помощью символа новой строки:
    text.split('\n')
      .map(row => `<p>${row}</p>`)
      .join('\n');
    Ответ написан
    Комментировать
  • Будут ли разной скорость загрузки трех изображений из одного источника и трех изображений из разных?

    HTML
    • Три тега с общим одинаковым src загрузят картинку один единственный раз и покажут в трёх местах.
    • Три тега с разными src загрузят три разные картинки.

    Второй вариант включает в себя первый плюс загружает две другие картинки. Значит, он не быстрее первого. Может оказаться так же по времени, а может, дольше.

    HTTP

    Случай трёх разных картинок ещё интересно рассмотреть с т.з. передачи от сервера в браузер.

    Если веб сервер работает по протоколу HTTP/1.1, то 3 картинки это 3 разных запроса. Для каждого устанавливается новое соединение. Скачивание идёт параллельно.
    Если по протоколу HTTP/2, то соединение одно, и 3 запроса выстроятся последовательно. Экономия на установлении новых соединений.

    В теории оба варианта используют доступный канал по максимуму, поэтому HTTP/2 должен быть быстрее за счёт экономии на времени установления новых соединений.
    Какой из двух протоколов окажется быстрее на практике, зависит ещё и от внешних факторов, поэтому сложно однозначно заявить.

    В любом случае, скачивание трёх разных картинок не быстрее скачивания одной из них.
    Ответ написан
    Комментировать