Ответы пользователя по тегу JavaScript
  • Как правильно позиционировать тултип?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    Ключ к эффективному алгоритму здесь – определить, достаточно ли места по каждой из четырех сторон (сверху, снизу, слева, справа) от активатора, чтобы тултип вместился без выхода за пределы экрана.

    Вот базовая идея алгоритма:

    1. Определить размеры и положение элемента-активатора, используя getBoundingClientRect.
    2. Определить размер окна браузера.
    3. Рассчитать доступное пространство в каждом из направлений: сверху, снизу, слева, и справа от элемента.
    4. Используя размеры тултипа, определить может ли он поместиться в каждом из этих направлений.
    5. Если тултип не помещается в первоначальном направлении:
    - Испытать альтернативные позиции на основе доступного пространства и размеров тултипа.
    - Выбрать позицию, которая наилучшим образом подходит и не заходит за пределы экрана.
    В реальной реализации вам нужно будет также учесть размеры самого тултипа, чтобы точно определить, поместится ли он в доступном пространстве, и возможно, предусмотреть отступы от краев экрана.

    Также важно обеспечить динамическую перепроверку позиции тултипа при событиях, которые могут изменить положение или размер активатора, например, при изменении размера окна браузера (event resize) или прокрутке страницы (event scroll).

    И наконец, поскольку это может быть ресурсоемкий процесс, обдумайте использование debounce функции для событий, вызываемых слишком часто.
    Ответ написан
    1 комментарий
  • Как показать вес ребра графа в алгоритме Дейкстры?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    Чтобы показать вес ребра графа в алгоритме Дейкстры, нам необходимо сохранять информацию о весах ребер между предыдущей вершиной в пути и текущей вершиной. Для этого мы можем вести отдельный объект, который будет хранить веса ребер для каждой вершины в path.

    Добавим новый объект edgeWeights и будем обновлять его вместе с path там, где мы уже обновляем информацию о кратчайших путях. В результате, мы сможем использовать edgeWeights для получения веса ребра для каждого шага построенного пути.

    Вот обновленная функция:
    function shortPathWithDistances(graph, start, end) {
      const distances = {};
      const visited = new Set();
      const path = {};
      const edgeWeights = {}; // Новый объект для хранения весов ребер
    
      for (const key in graph) {
        if (key !== start) {
          distances[key] = Infinity;
        } else {
          distances[start] = 0;
        }
      }
      while (!visited.has(end)) {
        let lowestDistance = Infinity;
        let node = null;
    
        for (const key in distances) {
          if (lowestDistance > distances[key] && !visited.has(key)) {
            lowestDistance = distances[key];
            node = key;
          }
        }
        const neighbors = graph[node];
        for (const key in neighbors) {
          const newDistance = distances[node] + neighbors[key];
          if (newDistance < distances[key]) {
            distances[key] = newDistance;
            path[key] = node;
            edgeWeights[key] = neighbors[key]; // Сохраняем вес ребра
          }
        }
        visited.add(node);
      }
      const shortPath = [];
      let current = end;
      while (current !== start) {
        const currentWithDistance = { node: current, edgeWeight: edgeWeights[current] };
        shortPath.unshift(currentWithDistance);
        current = path[current];
      }
      shortPath.unshift({ node: start, edgeWeight: 0 });
      return shortPath;
    }

    Теперь в построенном массиве shortPath каждый элемент будет содержать информацию о текущей вершине и весе ребра, ведущего к предыдущей вершине, сформированного наименьшего пути.
    Ответ написан
  • Почему CSSTransition не вешает стили?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    key={uniqid()}

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

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    Миллион объяснений по всему инету. Добавлю еще одно.
    1 Сначала пролетает весь цикл. Внутрь setTimeout исполнение не заходит - откладывается на "потом"
    2 Наступает "потом" - исполнение входит в первый setTimeout и вот тут проявляется разница:
    если была использована var-переменная - то она не ограничена скобками цикла for, поэтому в каждой итерации цикла она менялась в глобальной области видимости и в итоге равна 6. Т.е. все setTimeout будут искать свою переменную сначала в своей области видимости (между скобок), не найдут её там, а затем увидят ее в глобальной области, а там она одна и равна 6
    а если была использована let-переменная - то она объявляется локально и остается в каждой итерации цикла своя - т.е. внутри скобок. И когда setTimeout ищет переменную - то каждый находит своё значение локально
    Ответ написан
    1 комментарий
  • Как правильно использовать get и set в классах?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    где свойства firstName, lastName можно читать и менять.

    вы добавили методы только чтобы менять эти свойства. Добавьте геттеры тоже
    get firstName() {
       return this._firstName;
      }

    если не хотите, чтобы свойства вида _firstName светились наружу объекта - сделайте их приватными - замените все _firstName на #firstName
    Ответ написан
    Комментировать
  • Почему появляется ошибка при первом запуске React?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    npx i create-react-app

    нужно было не npm, а npx, почитайте внимательно документацию
    ну и конечно, аргументом сразу имя каталога в котором хотите реакт установить
    npx create-react-app my-app
    Ответ написан
    Комментировать
  • Как обойти ограничение в setTimeout JS?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    Берете текущее время - Date.now() к нему прибавляете время на которое выдаете бан (хоть минуту, хоть годы) и сохраняете это значение. Периодически (раз в сутки например) проверяете вышло время бана или нет, т.е. стало текущее время больше сохраненного - значит пора разбанивать. Еще можно сделать проверку разбана конкретного пользователя при его попытке зайти.
    То что вы описываете с setTimeout дичь конечно, но при желании можно и её реализовать - сделать вложенные setTimeout.
    Ответ написан
    Комментировать
  • Как получить динамически появившееся содержимое тега?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    примерно вот так
    // выберите элемент, который вы хотите отслеживать
    const targetNode = document.querySelector('.wpcf7-response-output');
    let successText;
    // создайте экземпляр MutationObserver
    const observer = new MutationObserver(function(mutationsList) {
        for(let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                // если тип мутации является childList (изменение дочерних элементов), то выполните действия
                successText = mutation.target.textContent;
                console.log(successText, 'in Observer');
            }
        }
    });
    
    // настройте параметры наблюдения
    const config = { attributes: true, childList: true, subtree: true };
    
    // начните отслеживать элемент
    observer.observe(targetNode, config);
    
    const submitBtns = document.querySelector('button');
    
    submitBtns.addEventListener('click', function() {
          // изменяем контент через 3 сек после клика
          setTimeout(function() {
              document.querySelector('.wpcf7-response-output').textContent = 'New content';
          }, 3000);
          
      });

    здесь observer это ф-я, которая будет всегда вызываться при изменении контента. Можете в нее добавить дополнительную логику (проверка клика, семафор и др..).
    Ответ написан
    Комментировать
  • Что сделать, что бы js работал на gulpe?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    Gulp не предназначен для работы в браузере и не может в нем работать, поскольку ему нужен доступ к файловой системе. Чтобы его запустить вам нужно установить Node.js, создать папку с проектом и в ней произвести установку нужных пакетов с помощью команды npm install (файл package.json должен быть в этой же папке), либо устанавливая каждый нужный пакет по отдельности. На ютубе полно роликов
    Ответ написан
    Комментировать
  • Как избавиться от кэша в Node Js?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    как то раз сталкивался с тем, что мешал кеш из expressa. Мне помогли эти строки
    const app = express()
    app.enable('view cache')
    app.set('view cache', false)

    ну а вообще, по умолчанию в экспрессе в девелопмент режиме кеш отключен, поэтому имеет смысл явно указывать process.env.NODE_ENV = 'development'
    Ответ написан
    Комментировать
  • Особенности работы функций?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    Наверное вы не сказали самое главное - что такие функции не загрязняют глобальное пространство имен(что исключает конфликты имен при использовании совместно разных библиотек) и поэтому являются прототипом для создания паттерна модуль.
    Ну, а вообще кто знает что они хотели услышать... Надо в конце все же спрашивать правильный ответ по мнению вопрошающей стороны.
    Ответ написан
    3 комментария
  • Как удалять неиспользуемые объекты из массива?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    Возможно, вам имеет смысл использовать WeakMap или WeakSet. Это хороший способ переложить уборку мусора на плечи движка. Почитайте об этом подробнее
    Ответ написан
    Комментировать
  • Объясните, чем здесь является elem.onclick?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    elem.onclick это свойство того HTML-элемента, который поступает аргументом в конструктор. И этому свойству присваивается функция onClick, которая всегда будет иметь контекстом этот элемент, независимо от того как она будет вызвана. Делается это для того, чтобы предотвратить потерю контекста при определенных манипуляциях. Например, если присвоить метод класса другой переменной и вызвать метод из этой переменной - будет потеря контекста (если не забиндить контекст как в случае с onClick). И кстати, перебиндить контекст второй раз нельзя.
    Ответ написан
    Комментировать
  • Как сделать чтобы при нажатии на объект, происходило действие?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    Почитай вот это Какие элементы HTML могут получить фокус Твой элемент li не может получить фокус.
    Можно сделать такое если добавить чекбокс (невидимый) и стилизовать соседний элемент в зависимости от его состояния.
    Иначе, придется javascript подключать.
    Ответ написан
    Комментировать
  • Uncaught TypeError: Cannot set properties of undefined (setting 'display')?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    document.querySelectorAll выдает все элементы подпадающие под селектор, поэтому надо брать или document.querySelector или document.querySelectorAll('#samoyed')[0]
    Ответ написан
    Комментировать
  • Как обернуть текст в строку?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    1 "kagura's-verity"
    2 'kagura\'s-verity'
    3 `kagura's-verity`

    3 варианта, как минимум - двойные кавычки, экранирование, обратные кавычки
    Ответ написан
    Комментировать
  • Как вернуть значение обратно в web форму из NODE?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    Если хотите получить ответ на отправленное сообщение - нужно задать ф-ю которая будет этот ответ обрабатывать. Это третий параметр метода post:
    $.post("/index", {
                        name: "ТЕСТ",
                        designation: "FN_TAST",
                    }, function( data ) { //  передаем и загружаем данные с сервера с помощью HTTP запроса методом POST
    	      $( "div" ).html( data ); // вставляем в элемент <div> данные, полученные от сервера
    	    });
    Ответ написан
    3 комментария
  • Почему один скрипт ломает другой скрипт?

    rqdkmndh
    @rqdkmndh
    Web-разработчик
    второй скрипт переписывает свойство document.onclick, которое использует первый скрипт.
    Ответ написан
    4 комментария