Ответы пользователя по тегу JavaScript
  • Как строку превратить в число, если в строке содержится математическое выражение?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    eval('6 * (5 - 4) / 3'); // = 2
    Ответ написан
    Комментировать
  • Как можно с помощью js css, сделать линии на сайте, которые будут следовать за курсором?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    на указанном сайте в отдельном js файле подключается функция "initOciliator" она и создаёт анимацию
    https://codepen.io/jrkdv/full/qBYYPyw
    изменил оригинальную функцию на 200 строке, добавил смену цвета
    Ответ написан
    7 комментариев
  • Как не позволить пользователю вставить html тег в div использую js?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    можете попробовать что-нибудь такое:
    https://codepen.io/jrkdv/pen/KKQQdEq

    но как подметили
    нужно на стороне сервера обрабатывать и чистить от не нужного
    Ответ написан
    Комментировать
  • Как работает данный код?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    предположение такое:

    цитата из доки
    Метод Window.getComputedStyle() возвращает объект, содержащий значения всех CSS-свойств элемента, полученных после применения всех активных таблиц стилей, и завершения базовых вычислений значений, которые они могут содержать. Некоторые CSS-свойства доступны через API, предоставляемые объектом, или индексацию по именам CSS-свойств.

    Предполагаю автор, вашего скрипта, при добавлении "getComputedStyle()" ориентировался на выделенную фразу из цитаты

    function closeAccordion (accordion) {
      // ... <= до вызова функции высота "auto"
      accordion.style.height = `${accordion.scrollHeight}px` // Устанавливаем высоту
      window.getComputedStyle(accordion, null).getPropertyValue('height') // Провоцируем вычисление новых изменений
      accordion.style.height = '0' // Устанавливаем высоту
      // ... => после выхода из функции рендер видит, что высота была Npx, стала 0px => запускает анимацию
    }


    Без вызова "getComputedStyle()", соответственно:
    до выполнения функции закрытия аккордиона высота была "auto"
    после завершения функции высота стала "0"
    для рендера высота изменяется из "auto" в "0" => анимация не выполняется


    1) Работает ли это во всех браузерах?
    2) Всегда ли он будет срабатывать?

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

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    похоже что нельзя

    но можно контент поместить в слой
    <dialog class="popup">
      <div class="layer">
        ...
      </div>
    <dialog>


    а у слоя останавливать всплывающие события => тогда можно отловить клики вне модалки, примерно так:
    document.querySelector('.layer').addEventListener('click', (e) => e.stopPropagation());
    document.querySelector('.popup').addEventListener('click', (e) => e.target.close());
    Ответ написан
    1 комментарий
  • Почему не работает код?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    из-за особенности значения
    можете тут прочитать про особенность и как можно проверять такие значения
    isNaN
    Ответ написан
    Комментировать
  • Как вернуть значения из вложенной функции?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    // что-нибудь такое
    const getImgDimensions = (file) => {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => {
          const img = new Image();
          img.onerror = reject;
          img.onload = () => {
            const height = img.height;
            const width = img.width;
            resolve({ height, width });
          };
          img.src = reader.result;
        };
        reader.readAsDataURL(file);
      })
    };
    
    // =>>
    getImgDimensions('https://.../image.jpg')
      .then(response => console.log(response)); // { height, width }
      .catch(err => console.log(err)); // error
    Ответ написан
  • Что надо прописать в jquery, чтобы выделялась активная ссылка?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    а если поменять местами строки?
    $('a').removeClass('active');
    $(this).addClass('active');
    Ответ написан
    Комментировать
  • Генераторы и Promise. Зачем использвовать вместе?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    Зачем это :

    для последовательного выполнения промисов

    Если можно так :

    неправильно переписали логику, у вас по веткам .then() передаются не асинхронные промисы, а просто строки.
    Для наглядности представьте, что makeProm выполняет http запрос на сервер, где параметр msg - это url адрес

    чтобы повторить одинаковую логику придётся промисы выполнять в промисах,
    тем самым запутывая ветвление then\catch и усложняя логику обработку ошибок
    это будет примерно так:
    makeProm("first")
    .then(msg => {console.log('promised'); console.log(msg); return makeProm('second')})
    // .then(/* тут Успех для промиса 'second' ... и запускаем промис 'first2.0' */)
    // .catch(/* тут Ошибка для промиса 'second' */)
    .then(msg => {console.log('promised'); console.log(msg); return makeProm('first2.0')})
    // .then(/* тут Успех для промиса 'first2.0' ... и запускаем промис 'second2.0' */)
    // .catch(/* тут Ошибка для промиса 'first2.0' */)
    .then(msg => {console.log('promised'); console.log(msg); return makeProm('second2.0')})
    // .then(/* тут Успех для промиса 'second2.0' */)
    // .catch(/* тут Ошибка для промиса 'second2.0' */)
    //
    // В следующем блоке .then() мы уже потеряли данные из предыдущих промисов (тут будет последний промис)
    // Тоже самое и с ".catch" блоками, если у каждого промиса не обработать ошибку,
    // то ошибка может произойти в первом промисе, а перехватим её уже в последнем блоке,
    // без идентификации из какого промиса мы словили ошибку
    .then(msg => { console.log(msg) })
    .catch(err => { console.log(err) })

    ну как то так...
    Ответ написан
  • Из за чего возникает ошибка при создании пользователя?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    попробуйте в постмане Text переключить на json
    это там где выбираете метод отправки параметров (body -> raw -> по правой стороне у вас на скрине "text")
    и смотрите какой Content-Type отправляется, должно быть что-нибудь похожее на "application/json"
    Ответ написан
    Комментировать
  • Создание функционала сайта с помощью cookie? Целесообразно?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    Создание функционала сайта с помощью cookie? Целесообразно?

    на сколько целесообразно - это всё индивидуально для каждого проекта.
    можно избавиться и от куков
    Для пользователя генерировать публичную ссылку с идентификатором (набором параметров), при таком подходе пользователи смогут делиться своими настройками сайта с другими участниками
    Ответ написан
    Комментировать
  • Почему undefined?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    входящий параметр: { foo: { bar: 1 } }
    console.log(foo) // {foo: {bar: 1}}
    я только разложил ваши строки в ином виде... вы видите что-нибудь?
    если не увидели, то ещё спойлер

    console.log(foo) // foo = {foo: {bar: 1}}
    Ответ написан
    Комментировать
  • Почему при изменении страны, пропадают последние символы (цифры)?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    как это исправить
    самое простое это добавить обработчик на событие "open:countrydropdown" и в нём у поля ввода удалять аттрибут "maxlength"
    $('#phone').on('open:countrydropdown', function() {
      $(this).removeAttr('maxlength');
    })

    почему так происходит
    Mask-Plugin устанавливает аттрибут maxlength, чтобы нельзя было ввести больше символов, чем длина маски.
    При смене страны плагин intl-tel-input устанавливает placeholder и обрезает его по длине maxlength

    как это происходит
    Могут быть неточности, смотрел не вчитываясь в подробности
    В процессе смены страны вызывается метод _updatePlaceholder():1017
    В этом методе, для удаления символов кода страны, вызывается метод
    placeholder = this._beforeSetNumber(placeholder); // Line: 1023


    В свою очередь метод _beforeSetNumber():1190 возвращает значение из метода
    return this._cap(number); // Line: 1207 в котором обрезается placeholder

    Именно в этом методе _cap() происходит проверка на длину maxlength и обрезание строки
    Ответ написан
    1 комментарий
  • Почему результат промиса не возвращается через return?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    асинхронная функция не блокирует поток
    вы же это по любому уже читали в той же документации.

    теперь ещё раз посмотрите, что происходит в этих строках, вызов асинхронной функции:
    let str = getResult()
    console.log(str) // Promise {status: "pending"}


    Но ведь await по идее должен тормозить выполнение кода в функции

    Всё верно и тому подтверждение, строка:
    console.log(str) // Promise {status: "pending"}
    выполняется раньше, чем строка:
    console.log(str) // успешно
    Ответ написан
    2 комментария
  • Как удалить элемент с поля?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    никак, перерисуйте канвас без камня
    Ответ написан
    Комментировать
  • Как избавиться от JsHint предупреждения?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    type = obj.budget > 0 ? 'inc' : 'exp';
    Ответ написан
    1 комментарий
  • Как работает return true в данном примере?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    почему нельзя использовать конструкцию else?

    потому что цикл прервётся на первой же итерации. Любое из условий приведёт к выполнению return
    Ответ написан
    Комментировать
  • Для чего логический оператор "!" (NOT) возле переменной с булевым значением?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    Для чего логический оператор «!» (NOT) возле переменной с булевым значением?

    не обязательно переменная может быть булевым значением.
    function example(user) {
      // Если пользователя нет, то user->undefined->false
      // Логическим оператором отрицания мы "поменяем" false на true и выйдем из функции
      if (!user) return;
      // Тут какой-то код, когда user->object (пользователь есть)
      // т.к. user->object->true, то при отрицании в условие попадёт: user->object->true->false
    }


    ещё кейс:
    поменять значение на противоположное, например, при нажатии кнопки должна сниматься или устанавливаться метка
    check = true;
    function handlerClick() {
      check = !check;
      // То есть берём текущее значение check, меняем на противоположное и присваиваем
    }


    на самом деле таких кейсов много может быть, зависит только от ваших фантазий
    Ответ написан
    Комментировать
  • Как реализованные такие переходы?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    Как и написали в комментариях, выполняются такие действия:
    1. Ждём пока страница загрузиться
    2. Вставляем загруженную страницу в конец страницы
    3. Осуществляем переход (прокрутку страницы)
    Реализация не такая и сложная, можно хорошо упростить если использовать фреймворк (react, vue и прочее)

    Понравился эффект приветствия на сайте, возможно кому ещё пригодится
    https://codepen.io/anon/pen/xoZawm
    Ответ написан
    3 комментария