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

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Так как тут отсутствуют ключевые слова для объявления переменных, типа let\const, то элементы внутри деструктуризации начинают работать как переменные текущего окружения.
    То есть [array[j], array[j+1]] = [array[j+1], array[j]]; разворачивается в
    array[j] = array[j+1]
    array[j+1] = array[j]

    как Js понял, что нужно поменять именно в массиве arr числа местами.

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

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Отменить всплытие события в обработчике клика дочернего элемента с помощью event.stopPropagation()
    document.querySelector('.close').addEventListener('click', function(e){
      e.stopPropagation()
      document.querySelector('.result').insertAdjacentHTML('beforeend', '<div>Close</div>');
    });


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

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Сделать вычисляемое свойство в компоненте, в котором нужно выводить информацию, где будет подсчитываться через reduce количество элементов.

    <span>
      {{ productsCount }}
    </span>


    computed: {
      productsCount() {
        return this.checkedInput.reduce((acc, i) => { acc+= i.products.length; return acc }, 0)
      }
    }
    Ответ написан
    Комментировать
  • Как переписать короткую функцию в нормальную на javascript?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Давайте разберём по кусочкам.
    .then(({ json }) => 
      ({ data: {id: json.json[resource].id} })
    )

    ({ json }) - Деструктуризация входных параметров, то есть в качестве аргумента поступает объект, из которого извлекается свойство json в переменную. json.

    как это переписать в обычную функцию, чтоб там можно было поставить точку останова, или вписать debugger

    С минимальными изменениями, так:
    .then(({ json }) => {
      debugger
      return { data: { id: json.json[resource].id } } // круглые скобки уже не нужны, так как используется return
    })

    зачем лишние скобки вокруг аргумента и возврата

    На счёт скобок вокруг аргумента разобрали в первом пункте - из-за деструктуризации.
    На счёт скобок для возвращаемого значения - если из стрелочной функции нужно вернуть объект без ключевого слова return, то нужно обернуть его в скобки, условно, чтобы движок понимал разницу между телом функции, которое так же открывается через {} скобки и объектом.
    То есть () => { return {} } тоже самое что () => ({})

    Ну и отвечая на Ваш основной вопрос:
    Как переписать короткую функцию в нормальную на javascript

    }).then(function(info) {
      return { data: { id: info.json.json[resource].id } }
    })
    Ответ написан
    Комментировать
  • Сделайте так, чтобы по клику на текст в конце текста добавлялся сумма его атрибутов, что я сделал не так?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    что я сделал не так

    Не изучили теорию.
    https://learn.javascript.ru/dom-attributes-and-pro...
    Что такое data... ? В приведённом коде - такой переменной не объявлено.

    function func() {
      elem.textContent += (Number(elem.dataset.productPrice) + Number(elem.dataset.productAmount))
    }
    Ответ написан
    Комментировать
  • Как в литерале объекта указать имя свойства, содержащее точку?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Точки не может быть в названии свойства объекта, если это не строка в явном виде.
    Ничего шокирующего.

    - return Promise.resolve({ user.id, user.username });
    + return Promise.resolve({ id: user.id, name: user.username });

    Ну или, если зачем то очень надо...
    - return Promise.resolve({ user.id, user.username });
    + return Promise.resolve({  "user.id": user.id, "user.username": user.username });
    Ответ написан
  • Что за библиотека для анимации на сайте?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Вот вроде основные:
    GSAP,
    TweenMax js
    ScrollMagic js
    barba js
    swiper js
    lottie

    Возможно есть аналоги на js или jquer

    Они все на js. Хотя jQuery у них к сайту тоже подключается.
    Ответ написан
    Комментировать
  • К чему относятся эти "приемы"?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    К чему относятся эти «приемы»

    К "модульной архитектуре". Правда не понятно что подразумевается под "и т.д."

    Webpack

    Лишь сборщик. Не безальтернативный. Помогает собирать проект и используемые модули в единый бандл, или на несколько чанков (пакетов), которые потом улетают в продакшен. Разделение на чанки для того, чтобы пользователь грузил только то, что нужно для текущей страницы.

    Npm

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

    что именно мне нужно учить

    Модули, в частности, es6 модули, это если хотите понимать что действительно происходит.

    Но если детали Вам не интересны, то всё очень на самом деле просто.
    Представьте что один файл вам предоставляет функции(то есть делает export из себя), а в другом файле Вы эти функции потребляете(то есть делает import в себя). А нужно это, чтобы написать какой-то модуль один раз, и потом переисползовать. А не делать постоянно ctrl+c - ctrl+v. Вот и всё.
    Ответ написан
    4 комментария
  • Base64 формат картинки, что делать на фронтенде?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    что делать на фронтенде

    Пойти к бэкендеру и сказать: ты шо, дурак, зачем нам 470киллобайт не кешируемых данных по сети каждый раз гонять?!
    И пинать чтоб присылал ссылку.
    (а на деле я так понимаю там не одна картинка такая и не кешируемых данных в разы больше гоняется, что вообще ужас)

    На серьёзном хайлоад проекте это была бы, условно, смерть серверам по трафику.
    Но клиенты с не самым хорошим интернетом отлетели бы ещё раньше. А не самый хороший это даже мобильный 4g в средних условиях приёма сигнала. 470кб это очень, очень много для всего лишь одного запроса. Тяжелее запрос - дольше время до отрисовки.
    Ну и мобильный интернет далеко не у всех безлимитный. А не в России и подавно.

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

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Внедряться в сайт оно не будет.
    Можно только локально, то есть конкретно у вас в браузере переопределить стили. Такое расширение уже есть. Вы ставите себе это расширение, пишите в нем стили и они применяются к сайту.
    Всё что нужно сделать - написать эти стили.
    Но работать это будет до ближайшего обновления сайта. Я так писал свои стили для вк, когда он на новый дизайн перешёл, чтоб старый дизайн вернуть. Держалось в среднем несколько недель. Потом что то нужно было править. А если сайт как инстаграм, например, когда имена классов генерируются, то полагаться можно только на иерархию разметки, а это адище такие стили писать.

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

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Вызвать функцию можно только 2мя способами. Один из способов из двух вариантов.

    1. Как обычно, через круглые скобки ().
    2. Через вызов метода .call или .apply

    Других вариантов вызова функции что-то не приходит в голову.

    Способов объявления функций тоже всего два:
    - function expression - expression - выражение, то есть такая строчка, у которой есть знак =
    - function declaration - классическое объявлений функций через function name() {}.
    Между этими двумя вариантами одно основное кардинальное отличие, которое запомнить очень просто. Всплытие declaration.

    Все ли они нужны? Да.
    Можно ли обойтись без expression на первых этапах обучения и будет ли достаточно declaration? Да.
    Что ещё Вы хотите запоминать?

    P.s. можно ещё создавать функцию через конструктор Function, но так никто не делает, поэтому опустим этот вариант.
    Ответ написан
    Комментировать
  • Как добавить метод и свойство массива для прототипа конструктора Array?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Array.prototype.last = function() { 
      return this[this.length-1] 
    }
    // [1,2,3].last()
    // 3

    Но модификация прототипа - плохая практика.

    метод и свойство массива

    Метод это и есть свойство. Просто это псевдоним, который говорит, что свойство хранит в себе функцию.

    Но если всё же нужно чтобы было без круглых скобок, то это через дескриптор get нужно объявлять.
    https://learn.javascript.ru/property-accessors
    Object.defineProperty(Array.prototype, 'last', {
      get: function() {
        return this[this.length-1] 
      },
      enumerable: false,
      configurable: false
    })
    
    // [1,2,3].last
    // 3
    Ответ написан
    4 комментария
  • Как сделать первую букву в каждом слове в верхнем регистре, а остальные в нижнем?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    userName.split(' ').map(word => word.substr(0,1).toUpperCase() + word.substr(1).toLowerCase()).join(' ')
    Ответ написан
  • Почему не работает всплывашка, сам скрипт подключен в html перед закрывающим body?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    const openPopUp = document.getElementById('open_pop_up');
    - id должен быть уникальным в рамках страницы. Не должно быть более одного элемента, с повторяющимся id. В итоге тут будет найден только первый в разметке элемент с таким id. То есть только первая кнопка "заказать" будет работать.

    const closePopUp = document.getElementById('pop_up_close');
    - не существует элемента с таким id. Есть с class.

    const popUp = document.getElementById('pop_up'); - аналогично предыдущему.

    <a class="table_box_button" href="#" class="open_pop_up">Заказать</a>
    Это где Вы научились два раза один и тот же атрибут объявлять на элементе? Объединить в один.
    Ответ написан
    4 комментария
  • Как найти ближайший элемент на чистом js?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Если под "ближайший" подразумевается вверх по дереву, то:
    onclick="doLoad(this.closest('form'))"
    Ответ написан
  • Как изменить дефолтное поведение инпут дате?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    он возвращает дату в формате
    MM-DD-YYYY - месяц день год

    Нет, не возвращает.
    Возвращает в формате YYYY-MM-DD.

    как-то можно без библиотек поменять на
    DD-MM-YYYY

    Можно. Все библиотеки для JS работают на JS.

    var d = document.querySelector('input[type="date"]')
    
    d.addEventListener('change', function(){
      console.log(this.value) // YYYY-MM-DD
      const [y, m, d] = this.value.split('-')
      console.log(`${d}-${m}-${y}`) // DD-MM-YYYY
    })
    Ответ написан
    Комментировать
  • Почему закрывается popup при клике по нему?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    $('.cart-arrow, main') какие по Вашему выбираются элементы в этом селекторе?

    Ответ

    элементы с классом .cart-arrow
    и элементы, представляющие тэг main.

    Так как событие клика всплывает, то когда доходит до main срабатывает обработчик.
    Поэтому где бы Вы не сделали клик, если этот элемент внутри тэга main - сработает этот обработчик.
    Из чего можно сделать вывод, что у Вас popup как раз внутри main и лежит.
    Ответ написан
    5 комментариев
  • Почему этот код не работает?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Локал стораж хранит строки. Поэтому при установке в него false, будет храниться 'false'.
    checked ожидает - boolean.
    строка 'false' - конвертируется в true, потому что любая не пустая строка конвертируется в true. Это основа языка.

    соответтсвенно:
    -themeCheckBox.checked = localStorage.getItem('themeCheckBox')
    +themeCheckBox.checked = localStorage.getItem('themeCheckBox') === 'true'
    Ответ написан
    Комментировать
  • Код должен выводить сумму элементов объекта, что не так?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    - if (typeof key == 'object') {
    + if (typeof obj[key] == 'object') {
    Ответ написан
    Комментировать
  • Как сделать превью при наведении на Jquery?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    https://learn.javascript.ru/task/image-gallery
    Дело за малым - поменять событие с клик на mouseover и.. кхе кхе... переписать на jquery
    Ответ написан