• Как выполнить код?

    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 должен быть быстрее за счёт экономии на времени установления новых соединений.
    Какой из двух протоколов окажется быстрее на практике, зависит ещё и от внешних факторов, поэтому сложно однозначно заявить.

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

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    random(6) возвращает целое: 1, 2, 3, 4, 5 или 6 – с равной вероятностью.
    Как игральные кости (кубики).

    Чтобы reduce/length дал единицу,
    нужно, чтобы все шесть выпали именно единицы:
    (1 + 1 + 1 + 1 + 1 + 1) / 6 == 1

    Вероятность шести единиц
    1/6 * 1/6 * 1/6 * 1/6 * 1/6 * 1/6  = 1 / 6^6 = 0,00002143347051
    = 2 тысячные процента. Всего ничего.
    Ответ написан
    Комментировать
  • Как удалить все текстовые элементы со страницы через js?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    можно использовать treeWalker:

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

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    [[1, 2, 3],[4, 5, 6],[7, 8, 9]].map(arr => arr.reduce((acc, c) => acc + c)) 
    // [ 6, 15, 24 ]


    Объяснение
    Каждый элемент внешнего массива трансформируется в число:
    [
      [1, 2, 3] --> 6
      [4, 5, 6] --> 15
      [7, 8, 9] --> 24
    ]
    — это операция map(): каждый-в-каждый.

    Теперь суть каждого такого преобразования. Из массива получить единственное значение — это reduce()

    Сложить все элементы массива и вернуть сумму. Аккумулятором будет эта самая сумма. Очередное значение складывать с накопленным аккумулятором и возвращать сумму.
    reduce( (accumulator, current) => accumulator + current )
    с обычной функцией
    reduce(
      function(accumulator, current) {
        return accumulator + current;
      }
    )

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

    Надо давать элементам списка уникальный ключ – атрибут key.
    Так React поймёт, какие элементы удалены, добавлены.

    Индекс массива не подходит для значения key. Нужно что-то уникальное, характерное для каждого элемента массива, что не изменится при изменении порядка, скажем.

    В примере в вопросе, видимо, уникальны сами значения 1, 2, 3 – можно их использовать для атрибута key:
    arr.map(el => <TimerComponent name={el} key={el} />)
    Ну и массивы в стейте, помните, надо не мутировать, а заменять массив целиком на новый.

    Чтобы не перерендерился каждый раз вложенный компонент, можно его «мемоизировать»: обернуть в React.memo(), снабдив функцией, которая сравнивает предыдущее состояние и новое, и делает вывод, надо ли перерендерить. Тут, например, не надо перерендерить, если N остался тот же. Упрощённый Codepen:
    для сравнения в коде App закомментируйте-раскомментируйте соседние строки, чтобы вместо ItemMemo работал просто Item
    Ответ написан
    5 комментариев
  • Почему в python при таком арифметическим действием (3**2%7) при расчете ответ будет 2?

    гуглить "python operator precedence"

    Результат: Expressions - 6.17. Operator precedence
    Там таблица. Чем выше строка, тем выше приоритет.
    Возведение в степень ** выше остатка от деления %,
    поэтому сначала в степень 3**2 == 9, уже потом деление по модулю на 7 (остаток == 2)
    Ответ написан
    1 комментарий