Задать вопрос
Ответы пользователя по тегу JavaScript
  • Используют ли сейчас повсеместно 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 комментария
  • Можно ли управлять громкостью Устройства / Системы через кнопку на 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 комментарий
  • На каком JS фреймворке сделан фронт wildberries.ru?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Ответ написан
    Комментировать
  • Как запустить проверку? 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);
    Ответ написан
    Комментировать
  • Как можно соединить 2 массива в 1 без 2 forEach?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Объединение на основание совпадений свойств id объектов, используя Map и reduce, при пересечение одинаковых свойств, значение свойства будет заменено на значение из массива array2 (т.к. в тз не указано условие обработки одинаковых свойств):
    const array1 = [{
        'id': 3231,
        'stage': 3,
        'sort': 999,
    }];
    
    const array2 = [{
        'id': 3231,
        'status_client': 3,
        'status_date': '2024-11-22 16:18:58',
        'sort': 999,
    }];
    
    const map = new Map(array2.map((item) => [item.id, item]));
    
    const reduced = array1.reduce((acc, item) => {
        const _item = map.get(item.id);
    
        _item
            ? acc.push({..._item, ...item})
            : acc.push(item);
    
        return acc;
    }, []);
    
    console.log(reduced);
    
    // [
    //   {
    //     id: 3231,
    //     status_client: 3,
    //     status_date: '2024-11-22 16:18:58',
    //     sort: 999,
    //     stage: 3
    //   }
    // ]
    Ответ написан
    Комментировать
  • Как перевести перевести top в translateY?

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

    Можно! Элемент с position: top вычисляет расстояние от верхнего края текущего элемента, до верхнего края ближайшего подходящего (например с position: relative) родителя, либо до viewport. А translate от фактического текущего положения элемента. Теперь включаем логику и применяем методы offsetParent(), height(), position().top итп.
    Ответ написан
    Комментировать
  • Как добавить класс элементу до нужного по списку?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    for (var i = 0; i < elements.length; i++) {
        if (i < items) {
            elements[i].classList.add("red");
        }
    }

    const items = 5;
    const elements = document.querySelectorAll(".elem");
    
    elements.forEach((el, i) => {
        if (i < items) {
            el.classList.add("red");
        }
    });
    Ответ написан
    1 комментарий
  • Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?

    1. Использовать события mousedown, mousemove итп, для момента зажатия ЛКМ.
    2. Использовать метод getBoundingClientRect(), для получения координат элементов (их пересечения), куда передвинули мышь из п1, если пересечение достигнуто, то добавляем css класс данному элементу.
    Может кто нибудь предложит решение на примере со скришота

    Что конкретно у Вас не получилось? Если всё, то на фрилансе предложат сделают все за Вас.

    Кстати, гуглежка заняла 2 минуты (быстрее, чем написать вопрос) - Выделение элементов мышкой:
    Ответ написан
    2 комментария
  • Ошибка Uncaught ReferenceError: exports is not defined?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    https://github.com/webpack/webpack/issues/12040
    https://github.com/webpack/webpack/issues/4039#iss...
    Now that Babel 7.x is out, I'll just say that this should essentially be resolved. The only time you should see this, with Babel 7.x, is if you're doing one of:

    You've actually using import and module.exports in the same file, which is not allowed by Webpack. You can sidestep this by setting "modules": "commonjs", which will make Babel compile the import to a require. This breaks tree shaking, as mentioned above though, so fixing your code would be a better idea.
    You're using useBultins: 'entry'/'usage, or @babel/plugin-transform-runtime, and you are running Babel on CommonJS files (either your own, or in random node_modules, if you're trying to compile that). Babel assumes files are ES modules by default, meaning those transforms would insert import statements into your file, triggering case 1. above. You can avoid this issue by setting sourceType: "unambiguous" in your Babel configuration, which will tell it to guess the type, like Webpack does, instead of assuming all files are modules.
    Ответ написан
    Комментировать
  • Как исправить данную ошибку?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    что тут не так? Не могу понять, что не правильно :/

    Ну там же написанно...
    Error at property 'operation': Value must be one of append, remove, set.


    // operation: "removeHeaders",
    operation: "remove",
    
    // operation: "setHeaders",
    operation: "set",
    Ответ написан
    3 комментария
  • Как перейти на другую страницу из js кода привязаного к html кнопке?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    1. What is the default button type?
    2. Почему тег form в к относительному адресу добавляет "?"
    3. Действия браузера по умолчанию.
    document.querySelector("#butlog").addEventListener('click', (e) => {
        e.preventDefault(); // <---
        window.location.assign("https://vk.com/");
    });
    Ответ написан
    Комментировать
  • Javascript не видит модуль из npm?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Насколько я знаю, Liveserver не может собирать проект, Вам нужен сборщик по типу WebPack, который соберет проект и позволит Вам использовать npm библиотеки в нем.
    Ответ написан
    3 комментария
  • Что за библиотека с подбором цветов?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    или такую тему только с нуля писать?

    Не только, но вот примеры реализации Changing SVG image color with javascript
    Ответ написан
    Комментировать
  • Какой скрипт выбора страны в input для поля телефона?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    International Telephone Input, Vanilla JS, React, Vue, 7к звиздецов и последнее обновление 3 часа назад, думаю достойный вариант.
    Ответ написан
    Комментировать