Задать вопрос
Mike_Ro

Михаил Р.

Python, JS, WordPress, SEO, Bots, Adversting
Ответы пользователя по тегу JavaScript

  • Как упростить/ улучшить получение данных?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting 
    this.list = res.list
  .filter(({ delete: isDeleted }) => !isDeleted)
  .map(({ id, name }) => ({ id, name }));
    Ответ написан
    Комментировать
    Комментировать

  • Почему не работает код из js файла?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Ваш скрипт подключается в < head> и он выполнится до того, как < body> будет сформирован (т.е. body в этот момент равен null). Вам необходимо использовать скрипт после формирования dom, это можно сделать одним из следующий способов:
    - Использовать атрибут defer;
    - Дождаться загрузки страницы;
    - Подключать скрипт снизу страницы (перед закрывающим тегом body).
    Ответ написан
    3 комментария
    3 комментария

  • Как оптимально реализовать вкладки?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    я понимаю что есть более правильный подход но не могу найти

    Примеры из гугла, найти не проблема:
    Табы (вкладки) для сайта на CSS и JavaScript – 3 с...
    JS Горизонтальные вкладки
    Ответ написан
    Комментировать
    Комментировать

  • Как понимать такой синтаксис?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Деструктуризация, а в вашем случае - это деструктуризация объекта.
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно сделать запрос на страницу для получения данных не по апи?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Несколько вариантов:
    - Блок по отсутствию заголовков или общая более сложная анти-бот система.
    - Если контент на сайте подгружается динамически, то мы увидим минимальный html с js скриптом (что собственно и произошло), т.к. fetch возвращает первый ответ сервера.
    try {
  let res = await fetch(
    'https://dzen.ru/',
    {
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36',
        'Accept-Language': 'ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7',
      },
    },
  );

  if (!res.ok) {
    throw new Error(res.status);
  }

  console.log(await res.text());

} catch (err) {
  console.error(err);
}

// <body></body><script nonce='ad618779e9500fc2a7d9bed71cf12869'>var it = {"host":"https:\u002F\u002Fsso.dzen.ru\u002Finstall?uuid=ae69654d-6b40-4184-8839-82c85f5eaedf","retpath":"https:\u002F\u002Fdzen.ru\u002F?is_autologin_ya=true","dzen":"0"};(function() { var form = document.createElement('form'); var element1 = document.createElement('input'); var element2 = document.createElement('input'); var element3 = document.createElement('input'); element1.name = 'retpath'; element1.type = 'hidden'; element1.value = it.retpath; form.appendChild(element1); element2.name = 'container'; element2.type = 'hidden'; element2.value = '1770895244.11710656.qX-ymzWyuTn9gVki.A7P1RG6nGqnkgXc_G-efyrlAO8dSE3AngEeixcNpU-0n6URKhn9Rb5gv0hp5_WD2zV5swZXnt4a3Sh9suAGvZcnJGAuYivGBF_CRsY5ObL6oz18S3HCBB4AlrMUfdb2pBcr_KCnnfC4L1Xkfz8HxFxga07tg9pohOWFDVAJq1Lpmaj2vAqhuAv9bFiNd9uWlXbA8Mhkb-y8RtrmZt5UcciU5nj5RdPPJDv8chhGRcrstadDtiyuYtIklrB1JTlV7k_kUrUTnk-M2A-9Efgh2xyEjIRwNe0edwWg5hAnp76ZO2WH-qdOZxzgI6OLrS-zyD2rNVmiTUrRMXwjmY2JJUI8SdRsBH2yKnYXm_xWH-ixffOf84KLD_ZNuB1cfzA4w3nmkh6svzaipaWCfTJoV51jW7WHdONND-Ua5GxtqJXK1rYeXrl0sLI0DSI5H0tYB6SXLljc6-xZL5vrpvq5nZZuiOHgupGUbHlmpjfUe_swd61LDP15y8qVKePI-L-vievaZ9mSfTaMCn20_VD22dTvJXS6HN1P9zuhQ3Z8X-PvVCV8HNpdObX01gko6-e1ZVaCmwaq24YwoNfYoFJNqF83nMET52ps8GcveLO-Cl_RLxeIlTvlPl92uGQbLMaHuaSHAHq0JYlO1Q0SPMLQp0yGx8sxpCp7t46nLdF3Vhbu2Wq_sDYaot8stooTl4U6OHfFx3TRyBTQvQ7mWLayIwuGQLouRpKyAlMTfS11HU53EC2LEl9-L53n_3wFPhzB3lfDRU2WSaG0T0rafQ8ubquBmcRIkytdRm8qDpwzKVmmUXFHaejmAc9XIEifofDiEG96MpIx0oc77HeGEmwmIDxldOPqCupAUsRreoZssSBJYM1Xnyb4XCGH9XeFY9a0cKPzcwImtwagP1EdNP5rz-B5g0z4FNknUkdNQsq39q4BAftIDhb2KVdmGGp1NRyj0v3LUmGATZoGk3JpFZBuGV5oDCj29ZBIYDYEsKHaOKL70mOjHmLMmSlk7vOeoluAiX422wMniAgt3e-V5mo_i-jL9tOrRocbMdcizRTX8stqinOzlut5pde54XfY1b_m3lANXXNRdgZLp6cSxnNg6w1aGBB8rSx8lXtlNrwBpaPejp0b2kpCcw-6ga6c3zuzItpwZ6O3VZUyzL85c0Bf4jdtwTJ9zLm_9j7MkAIzUCT3PTbLLzcZA5_jGQMXUg3xvQI-53RzWVuj2Z7zDXmm58WUPjn5r6kUiBr0ZumpNdYwsfC83EU5eGyMPulKmS5N4gzyxi1_XVxYhrDg0OQGUHs5_0uRf-Lh5edlzoM4mzLEZiapfaqsEnme-yVkwDFgSM7-i3CsVsLKreuDcfxwdB80u-7N5OM5ppZA3XjerasaS6mA4L7CvOcspPHUMXrwi-z_jsWRnEia3z7510GCpYbml6-WY_YdQOj_Q0_HtLF7i2G3lly32ieSrzg6EvrPXPvaQfsS3eX1FTGk.XdnKkcqYYirqyGrd38wg3g'; form.appendChild(element2); element3.name = 'dzen'; element3.type = 'hidden'; element3.value = it.dzen; form.appendChild(element3); form.method = 'POST'; form.action = it.host; document.body.appendChild(form); form.submit();})();</script>

    Я хочу получать список новостей с сайта, но при фетче страницы, я ничего не получаю в ответ.

    В отладчике браузера смотрите, куда страница шлет запросы, смотрите на заголовки и прочие данные, которые она шлет, затем пытайтесь слать аналогичные запросы из под ноды.
    В примере с апи всё работает.

    Для быстрой проверки используйте терминал, например с curl (или curl.exe для винды):
    $ curl https://dzen.ru
$
$ curl https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits
[
  {
    "sha": "d78b01e9833009fab534462e05c03cffc51bf0e3",
    "node_id": "C_kwDOBY7uftoAKGQ3OGIwMWU5ODMzMDA5ZmFiNTM0NDYyZTA1YzAzY2ZmYzUxYmYwZTM",
    "commit": {
      "author": {
        "name": "Stanislav (Stanley) Modrak",
        "email": "44023416+smith558@users.noreply.github.com",
        "date": "2025-11-20T20:55:50Z"
      },
      "committer": {
        "name": "GitHub",
        "email": "noreply@github.com",
        "date": "2025-11-20T20:55:50Z"
      },
      "message": "Merge pull request #3906 from cathoderay/master\n\nMinor grammar improvement",
      "tree": {
        "sha": "e7064bb8aaef800dbe406e245bbfe0e69ec6d270",
        "url": "https://api.github.com/repos/javascript-tutorial/en.javascript.info/git/trees/e7064bb8aaef800dbe406e245bbfe0e69ec6d270"
      },
      "url": "https://api.github.com/repos/javascript-tutorial/en.javascript.info/git/commits/d78b01e9833009fab534462e05c03cffc51bf0e3",
      "comment_count": 0,
      "verification": {
        "verified": true,
        "reason": "valid",
        "signature": "-----BEGIN PGP SIGNATURE-----\n\nwsFcBAABCAAQBQJpH4BWCRC1aQ7uu5UhlAAAntUQAFeFvVv0p3ncxrNhfuVopAmE\nNmlXv+VtX2eYBLDzZn24N5fLme9wYT5sE2Ib4cyJgtNRWf+iYv66MqBoIu6oqMYE\n26y7Ylhjp3gr6/yUjfFLTvhZqOtLvddY7kH8sMH+r0T+MEvqCbwv30oKWdx39sa2\nTYvBjarpLpcdOm6k/amkDveLj148gehKZB1xeg5VgSDIdwl9cFAWLLlyf4s9dkCB\niX1+82NLR1uWT23WmflBClaP8Q+MH0dLe79KK9Aa8MV0ZuN2KQnhZ/0ICBQUAT7k\na5ks2lFJv+35S/mFjYxCIWGeHf6ntsa7NnJo/tDtSFOMVLwxZ17KeJQjBt5gvFyo\nW1xOpgCpeFL3V9fC567QZ4h2UG1pAn/3Susc6WfG7A4WsGR2La7IuzP2XbcZAN1+\nksewNCSumhWtXsmT9rdzBiDB7mchWljJKzXOAcwTL3rsenpUeLVeexU19qzdUZ4b\nLMjLbt1u+xauX85+k5OW8r/9jiz+gE3B6g3SzNY9ktAxVVQzPq83u22Z27Cm6asL\n5BnDhKIXNA+9UXCVcUWCAsSuxoV4Hgeh6htWqGBEZPWUGHUUt0l4EybnMQRtYn4P\nxTyqyIQK1rioU5Wk/4LrQ9YwPgBgNj1+FV/idunDuYcZm02N7zhCXZu9PLx2MU4u\ndwszDjfzlv5FsMNt5NRz\n=hmS8\n-----END PGP SIGNATURE-----\n",
        "payload": "tree e7064bb8aaef800dbe406e245bbfe0e69ec6d270\nparent 5e893cffce8e2346d4e50926d5148c70af172533\nparent 9ef986e9cb68073eef1c6a9ac076ec2cb3b95637\nauthor Stanislav (Stanley) Modrak <44023416+smith558@users.noreply.github.com> 1763672150 +0000\ncommitter GitHub <noreply@github.com> 1763672150 +0000\n\nMerge pull request #3906 from cathoderay/master\n\nMinor grammar improvement",
        "verified_at": "2025-11-20T20:55:50Z"
      }
...
    Ответ написан
    Комментировать
    Комментировать

  • Как получить из массива все возможные пары элементов?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Можно ли это сделать?

    Можно, законом не запрещено.
    Нужно получить все возможные пары элементов.

    В каком виде? Предположу, что в виде пары в массиве (['a', 'b'], ['a', 'c'] итп), тогда можно так:
    const arr = [ 'a', 'b', 'c', 'd', 'e' ];

const pairs = arr.flatMap((x, i) =>
  arr
    .map((y, j) => i !== j ? [ x, y ] : [])
    .filter((pair) => pair.length),
);

console.log(pairs);

/*
[
  [ 'a', 'b' ], [ 'a', 'c' ],
  [ 'a', 'd' ], [ 'a', 'e' ],
  [ 'b', 'a' ], [ 'b', 'c' ],
...
]
*/
    Ответ написан
    1 комментарий
    1 комментарий

  • Отправка формы html?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    данные формы не поступают в таблицу.

    Что значит "не поступают"? Что делаете и что при этом происходит? В консоли что? Пока придется гадать...
    const pool = mysql.createPool

    Вижу подключение к бд, но проверок успешно ли установлено соединение - нет.
    app.post("/two.html", urlencodedParser, function (req, res) {

    Вижу использование urlencodedParser для обработки данных формы, но не вижу его объявления, попробуйте так (express 4.16.0+):
    // Подключение к бд
const urlencodedParser = express.urlencoded({extended: false});
// app.post эндпоинт

    if(!req.body) return res.sendStatus(400);

    Больше инфы:
    console.log("req.body);
if (!req.body) return res.status(400).send("Данные не были отправлены");

    if(err) return console.log(err);

    Больше инфы:
    if (err) {
  console.error('Error:', err);
  return res.status(500).send('Server error');
}


    const name = req.body.name;
    const usluga = req.body.usluga;
    const tel = req.body.tel;

    Так симпатичнее:
    const {name, usluga, tel} = req.body;
    < form action="/two.html" method="post">

    Возможно, в будущем, будет лучше указать другой эндпоинт для приема данных с формы?
    <form action="/submit-form" method="post">
    Ну и на всякий, в вашем случае, two.html должен лежать рядом с server.js.
    Ответ написан
    2 комментария
    2 комментария

  • Как сделать перетаскиваемые окна?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    HTML Drag and Drop API
    Making a simple drag and drop with JS!
    Draggable JS – JavaScript drag and drop library
    Ответ написан
    Комментировать
    Комментировать

  • Только на мобильной версии сайта не работает отправка формы на почту?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Дополню ответ alexalexes
    Подключите телефон к компу в режиме отладки (нужен будет ADB драйвер), а браузер - в режиме синхронизации.
    Вот так и отлаживайте.

    Еще вариант:
    1. Подключаем андройд к компу по usb.
    2. Переход в настройки андройда -> параметры разработчика -> отладка по usb.
    3. Открываем страницу хромиум браузер на компе chrome://inspect/#devices.
    4. Жмем inspect нужной страницы.

    Теперь можно отлаживать хромиум браузер смартфона (не только смартфона, а вообще любой доступный удаленный хромиум браузер) на компе, получая все информацию от лица смартфона.
    Ответ написан
    Комментировать
    Комментировать

  • Какой посоветуете учебник/книгу JavaScript?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    learn.javascript.ru
    Ответ написан
    Комментировать
    Комментировать

  • Как настроить minimize webpack?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    По идее, первый optimization будет перезаписан вторым optimization=false. Либо удалите второй блок, либо замените его на такой:
    const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

optimization: {
    minimize: true,
    minimizer: [
        new TerserPlugin({
            terserOptions: {
                mangle: true,
                keep_classnames: true,
                keep_fnames: false,
            },
        }),
        new CssMinimizerPlugin(),
    ],
    splitChunks: {
       chunks: 'all',
    },
},

    Я ожидаю что в бандле будут переименованы хотя бы локальные переменные, чтобы как-то защитить код.

    Минимизация !== обфускация, код может быть изменен, но не с целью "защиты".
    Ответ написан
    7 комментариев
    7 комментариев

  • Используют ли сейчас повсеместно class?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Хотел узнать, для браузерного фронта( для SPA приложения на Vue3), принято ли будет создавать обьекты через классы?
    class MyClass {

    Насколько я знаю, во vue используется объектно ориентированный подход с использованием компонентов, без классов. Например в react используется композиция наследования, тоже без классов.
    Насколько в этих классах фичи поддерживаемые в браузерах, или полифиллами.

    Большинство фронта сегодня собирается различными сборщиками, по типу webpack и vite. Они самостоятельно преобразуют "современный" js в тот js, который необходим для браузеров определенной (минимальной) версии.
    p.s. без typescript

    К TS это так же относится.
    Ответ написан
    Комментировать
    Комментировать

  • Поясните мне почему код работает JS?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    почему

    Отладкой кто будет заниматься? Добавьте console.log() в нужных местах, чтобы самостоятельно выяснить, где проблема (ну или фича, это как пойдет ;))
    Ответ написан
    3 комментария
    3 комментария

  • Можно ли управлять громкостью Устройства / Системы через кнопку на HTML?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Можно, но с использованием js и доступно лишь уменьшение громкости от текущей - HTMLMediaElement: volume property.
    Можно ли как то сделать чтобы по нажатию на кнопку повышалась громкость системы?

    1. Создаем функцию с изменением HTMLMediaElement.
    2. Вешаем слушатель на кнопку, и по клику - выполняем п1.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать появление элементов при прокрутки до них окна браузера?

    Mike_Ro
    @Mike_Ro Автор вопроса, куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Решено через Intersection Observer API.
    Ответ написан
    Комментировать
    Комментировать

  • Как проверить класс у массива элементов?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Метод every() для коллекции li, внутри проверяйте наличие класса методом contains().
    Ну и fiiled слегка не равен filled.
    Ответ написан
    Комментировать
    Комментировать

  • Метод разработки и обновления сайта?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Все зависит от организации работы в конкретной конторе и конкретного разработчика, но лично у меня работает следующий подход:
    1. Пишем начальное тз, минимальный необходимый перечень.
    2. Говнокодим на основание п1 по принципу - "сделать быстро и чтобы работало по тз".
    3. Пушим п2 в гит и разворачиваем сайт (или компонент на сайте).
    4. Записываем фидбэк о компоненте, что не работает, как хотелось бы чтобы работало итп. Если это не критические замечания (безопасность или что то основное не работает), то откладываем изменения на месяц, квартал или год.
    5. При накопление критической массы замечаний в п4 (ну или у Вас просто не осталось задач на настоящий момент) - добавляем рефакторинг п3 в очередь задач.
    6. Повторяем 3-6 пункты до бесконечности.

    При данном режиме работы решается сразу 3 задачи:
    - Не требуется детальное тз на старте, в котором все равно не удастся предвидеть все наперед, соответственно сокращается общее время разработки и его стоимость.
    - Сайт или компонент сайта выпускается в релиз очень быстро, а значит решает задачу бизнеса так же быстро.
    - Прозрачный и прогнозируемый по срокам и стоимости режим релизов.

    Важное уточнение!

    Схема с минимальным ТЗ и говнокодом работает лишь с теми заказчиками, которым Вы подробно разъяснили, почему сроки и стоимость ниже, почему за каждую "хотелку" не указанную в тз придется доплачивать, и почему необходим рефакторинг.

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

  • Нужен ли JavaScript пентестеру?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Нужен ли javascript для WEB пентестера?

    Нужен, для поиска уязвимостей, анализа клиентской логики, обхода ограничений (например, формы), изучения скрытой информации в коде и манипуляций с dom. Это помогает выявлять xss, инъекции и другие проблемы безопасности.
    Нужно ли WEB пентестеру знать еще и WEB? Я имею ввиду те знания, которыми обладает стандартный WEB разработчик (помимо языков программирования).

    Базовый набор:
    - html/css для понимания структуры и стилей веб-приложений.
    - http/https, куки, заголовки, cors, rest и сокеты.
    - Основы OWASP Top 10 (XSS, CSRF, IDOR и др.).
    - Браузерные DevTools, Burp Suite, ZAP, Postman.
    - Базово популярные библиотеки и фреймворки (react, vue, angular).
    - Методы минификации и обфускации js кода, а так же способы его анализа.
    Ответ написан
    1 комментарий
    1 комментарий

  • На каком JS фреймворке сделан фронт wildberries.ru?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    React - https://www.wappalyzer.com/
    Ответ написан
    Комментировать
    Комментировать

  • Как запустить проверку? try catch?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    How to get in catch method in Fetch API when there...
    Fetch API: how to determine if an error is a netwo...
    Detect Network Failures When Using Fetch

    Исходя из Вашего вопроса, это будет выглядеть примерно так:
    let response;

async function fetchData(request) {

    try {
        response = await Promise.race([
            fetch(request),
            new Promise((_, reject) => setTimeout(
                () => reject(new Error('Timeout')), 500,  // 0.5 секунды
            )),
        ]);
    }

    catch (e) {

        // Ошибка с таймаутом
        if (e.message === 'Timeout' || e.message === 'Network request failed') {
            console.log('Проблемы с интернетом!');
        }

        // Прочие ошибки
        else {
            throw e;
        }

        return;
    }

    try {
        // Преобразуем результат запроса в json
        console.log(await response.json());
    }

    catch (e) {
        console.log('Ошибка при парсинге json');
    }
}


const request = new Request('https://jsonplaceholder.typicode.com/todos/1', {
    method: 'GET',
});

fetchData(request);
    Ответ написан
    Комментировать
    Комментировать