Ответы пользователя по тегу JavaScript
  • Поле объекта undefined?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    https://learn.javascript.ru/debugging-chrome

    Ставите точку остановки перед выводом в значение и смотрите почему так.

    В консоль выводится объект по ссылке. То есть изначально такого поля может не быть в объекте, но пока Вы раскроете объект в консоле - оно там появляется.
    Ответ написан
  • При использовании методов добавления элементов в массив он под капотом создается заново?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Т.е. операции по типу [[...arr], value] так же сработают по скорости и логике, как arr.push(value)?

    Нет. push быстрее.

    А если чуть более детально, то под капотом это выглядит примерно так:
    - Вы объявили пустой массив. Движок зарезервировал память на массив из 10ти(разные движки могут под разную длину массива резервировать место) элементов.
    - Делаете пуш. Пока элементов меньше чем зарезервировано - всё очень быстро, так как движок просто кладёт элемент в зарезервированную ячейку памяти, адрес которой известен.
    - Как только элементов стало больше, под капотом ищется новая доступная область памяти на ещё 10 элементов и далее эти области памяти линкуются между собой (первая + вторая).

    В случае же со spread [...array] каждый раз создаётся новый массив, то есть каждый раз происходит поиск доступной памяти на массив + перебор массива для того чтобы заспредить его.

    Примерно так.
    Ответ написан
    2 комментария
  • Почему календарь пролистывается один раз и всё?

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

    $("prev").addEventListener("click", prevMonth, false);
      $("next").addEventListener("click", nextMonth, false);

    $("next") - Это что такое? Если следовать правилам, то это "next" это селектор по тэгу. Такого тега не существует.

    Аааааа.... Вы решили а почему бы не сделать свою функцию, которая ищёт по id и не назвать её так же как jQuery, чтобы понятно это было только Вам...

    Короче у Вас поиск по id который должен быть уникальным на странице.
    Обработчик вешается только на первый элемент. Соответственно, работают только стрелочки первого месяца.
    Исправляйте на поиск по классу.
    Ответ написан
    6 комментариев
  • Как скрыть выбранные элементы на js?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Так у Вас если 2 приходит, то сначала отрабатывает ветка else от первого if
    if (current_tier_num === "1") {
      $('#current-lp-1').hide(); 
      $('#current-lp-3').show(); // добавил от себя, т.к. это будто бы какой то переключатель
      $('#current-lp-4').show(); // и Вы не учли что может быть переключение с 2 на 1
    } else if (current_tier_num === "2") {
      $('#current-lp-3').hide();
      $('#current-lp-4').hide();
      $('#current-lp-1').show(); // аналогично предыдущему комменатрию
    } else {
      $('#current-lp-1').show();
      $('#current-lp-2').show();
      $('#current-lp-3').show();
      $('#current-lp-4').show();
      $('#current-lp-5').show();
    }

    То что нужно?
    Ответ написан
    Комментировать
  • Почему d[0] не изменяется?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Дак а чего вдруг ему меняться то?
    Давайте по шагам:
    // В первой строчке 3 шага
    // 1) Создался новый массив
    // 2) Создался новый объект {x:1}, и ссылка на него легла в первый элемент массива из шага 1.
    // 3) В переменную "const c" положилась ссылка на массив из шага 1.
    const c = [{x:1}]
    // Вторая строчка так же содержит 3 шага
    // 4) Создаётся новый массив
    // 5) По ссылке массив "с" спрэдится. Т.о. первым элементом нового массива становится ссылка на объект из шага 2.
    // 6) Ссылка на новый массив но со "старым" объектом кладётся в переменную "d"
    const d = [...c] 
    // Третья упрощённо имеет 1 шаг
    // 7) в массив из переменной с именем "c" в первый элемент кладётся новое значение. Причём совершенно не важно какое.
    c[0]=100;

    На этом всё.
    Таким образом получаем, что в массиве c в элементе с индексом 0 у нас число, а в массиве b в элементе с индексом 0 у нас ссылка на объект созданный на втором шаге.
    Ответ написан
    Комментировать
  • Как сделать анимацию курсора под текстом?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Можно конечно отключать poiner-events, но если включать его для текста, то это всё равно приведёт к той же проблеме. Что под текстом не будет работать.

    Поковырял немного:


    Основное что изменил - отслеживание событий mousemove не на канвасе, а на всей секции и e.offsetX на e.clientX
    Ответ написан
    1 комментарий
  • В какой момент можно использовать функции из другого скрипта?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Разве мы можем использовать скрипт до того, как добавили его в HTML-документ

    Так а где там использование скрипта до того как он загрузился?

    1) функция loadScript принимает на вход 2 аргумента - адрес для скрипта(src) и функцию, которая выполнится после загрузки скрипта из указанного адреса(callback).
    2) Функция loadScript создаёт элемент скрипт, в src которого передаёт одноимённый аргумент. Таким образом, происходит загрузка скрипта браузером.
    3) Задаётся обработчик события onload - то есть когда скрипт загрузится нужно выполнить колбэк - второй аргумент функции. В данном примере это 2 алерта.
    4) т.к. событие onload неизвестно когда произойдёт (оно асинхронное) то выполняется следующая строчка - добавление скрипта в шапку.
    5) Скрипт загрузился, выполнился коллбэк. Т.к. скрипт уже в шапке - доступна функция лодаша.
    Ответ написан
    3 комментария
  • Почему теряется контекст в замыкании?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Не понятно что значит "теряется".
    Какой контекст у функции, объявленной глобально? Window или с use strict - undefined.

    А в функции которую она возвращает контекст равен элементу, потому что так работают обработчики событий. Т.к. эта функция вызывается не сразу, не в глобальном контексте, а в контексте элемента, ПОСЛЕ срабатывания клика.
    Ответ написан
    Комментировать
  • Как в тег поместить js код?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    По итогу обсуждений выяснилось что автору нужно было результат работы js обернуть в дополнительный тэг и его уже вставить в нужный block.

    Решения, отвечающие на данный запрос:
    block.innerHTML = '<span>' + this.value.slice(12) + '</span>'
    
    // Или через шаблонную строку:
    block.innerHTML =  `<span> ${ this.value.slice(12) } </span>`;
    
    // Или через создание нового html элемента явно:
    const span = document.createElement('span');
    span.textContent = this.value.slice(12);
    block.append(span);
    Ответ написан
    Комментировать
  • Как с помощью input открыть нужный элемент массива?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    1. Код стоит оформлять соответствующим образом - с помощью тэга <code> который доступен в редакторе с помощью кнопки </>.
    2. Нужно иметь знания обработки событий. Например обработка клика по кнопке.
    3. Знания вывода на экран (Вы не указываете как именно должно выводиться, поэтому в элементарном примере это alert)
    4. Знания работы с полями ввода и поиском элементов в dom. То есть нужно будет найти инпут в DOM дереве и считать его свойство value.
    5. Знания по работе с массивами. А именно .filter - для отсеивания не соответствующих элементов.
    6. Ну и скорее всего метод .includes тоже пригодится для проверки вхождения введённого текста в genre элементов массива.
    7. Ну и само собой понимание что такое объект и как считывать его свойства.

    итого на псевдокоде:
    по нажатию на кнопку --> взять значение из инпута --> прогнать исходный массив через фильтр по значению инпута и свойству genre --> вывести результат на экран
    Ответ написан
    Комментировать
  • Как привести несколько условий в тернарном операторе в базовому виду?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    https://converter.website-dev.eu/

    if (isHorizontal) {
    	if (randomStartIndex <= width * width - ship.length) {
    		randomStartIndex
    	} else {
    		width * width - ship.length
    	}
    } else {
    	if (randomStartIndex <= width * width - width * ship.length) {
    		randomStartIndex
    	} else {
    		randomStartIndex - ship.length * width + width
    	}
    }
    Ответ написан
    Комментировать
  • Как сделать чтобы меняя код js в браузере, он сохранялся в файловой системе?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    в FireFox Developer такое есть https://www.mozilla.org/ru/firefox/developer/

    А если через Chrome, то нужно дать доступ к папке в разделе Sources --> overrides --> нажать плюсик и выбрать папку. После чего ознакомиться с предупреждением, принять решением. Если нажмёте "разрешить" - то можно будет там же на вкладке sources менять данные, сохранять их через ctrl+s и они будут сохраняться при перезагрузке странице.
    Однако исходный файл изменён не будет. В папке создастся специальная диреткория, внутри которой будет изменённый файл. Можно либо его открыть в редакторе кода, либо перенести данные из него в оригинал.
    https://developer.chrome.com/blog/new-in-devtools-...

    Только не понятно зачем оно Вам надо. Запускается live server в том же VS Code и вперёд. Меняете в редакторе, нажимаете ctrl+s - применится для запущенного сервера, если стоит hot update.

    UPD: FireFox Developer судя по всему позволяет менять только CSS файлы. Chrome Override не совсем то что нужно, так как создаёт отдельные файлы.
    А вот если добавить workspace folder то можно будет редактировать через дев тулзы все файлы в директории.
    См тут: https://stackoverflow.com/questions/2558346/how-do...
    Ответ написан
  • Почему не работает JS код?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    не подключили jquery или выполняете код раньше чем он подклдючился.
    Ответ написан
    Комментировать
  • Как в JavaScript сделать так чтобы при добавлении класса к элементу начинал прогружаться какой либо скрипт?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Ну либо в том же скрипте после добавления класса запускать нужный код, либо
    https://learn.javascript.ru/mutation-observer
    Ответ написан
    1 комментарий
  • Как сделать перенос строки наверх?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    По умолчанию средствами css такого можно добиться только с помощью writing-mode: vertical-lr и transform: rotate(-90deg)
    Вариант этот так себе, поэтому лучше JS - на каждый перенос строки (он же не автоматический?) помещать весь предыдущий текст в отдельный элемент, и добавлять в блок выше, ну а там уже и делать особо ничего не надо. display:flex; flex-direction: column или просто создавать блочные элементы.

    Если перенос всё же автоматический, то только вариант на css
    Ответ написан
  • Заморозка дивов?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Комментировать
  • Как работает замыкание в js?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    function createCounter() { 
        let counter =0; 
       counter = counter - 10  
        const myFunction = function () { 
            counter = counter+1; 
            return counter 
        } 
        return myFunction 
    } 
    let z = createCounter() // Вернули в переменную z функцию "myFunction" у которой в замыкании есть counter.
    // counter внутри на данный момент равен -10.
    
    // Вызвали функцию и вывели результат в консоль.
    // Так как внутри функции counter берётся из замыкания, то при вызове функции получаем
    // -10 + 1
    console.log(z()) // -9
    
    // В данном примере - бесполезный ничего не делающий вызов.
    // То есть создаётся ещё один НОВЫЙ счётчик, со своим замыканием, но он никуда не сохраняется.
    createCounter() 
    
    // Снова вызвали функцию и вывели результат в консоль.
    // -9 + 1 
    console.log(z()) //  -8


    где я допускаю ошибку

    Судя по всему Ваша ошибка в том, что Вы считаете, раз снова вызвали функцию createCounter - то это на что-то влияет. Но нет. Это отдельный новый вызов нового счётчика, который потом в данном примере нигде не используется.

    Второй вопрос откуда берется counter при втором вызове console.log(z())

    Да всё оттуда же. Из замыкания. Когда Вы в первый раз вызвали функцию createCounter и сохранили результат её работы в переменную z - Вы в переменную z поместили функцию myFunction, у которой есть своё собственное замыкание на counter.
    При каждом вызове z() будет вызываться та созданная функция со своим замыканием и оперировать с counter из него.

    При новом вызове createCounter возвращается НОВАЯ функция myFunction у которой своё независимое от предыдущих вызовов замыкание.
    То есть createFunction это как фабрика, которая выпускает одинаковые изделия(счётчики от -10, в данном случае), но изделия не зависят друг от друга.
    Ответ написан
  • Как получить get на текущую сформированную страницу?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Звучит как дефолтный вопрос про "как поделиться ссылкой на каталог с предустановленным фильтром для интернет магазина".
    и ответ, собственно, только один: гет параметры.
    Состояние страницы должно зависеть от того, что в адресной строке. И при изменении состояния страницы через интерфейс - должно меняться и значение гет параметра.
    Если параметров много - можно закодировать их в base64 а при открытии страницы декодировать и устанавливать состояние страниы.
    Ответ написан
  • Почему Javascript срабатывает на второй клик, а на первый не срабатывает?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Ванга клуб на этой неделе объявляю открытым.

    Потому что по умолчанию в разметке(которую Вы решили любезно нам не предоставлять) у Вас у .submenu нет инлайн стилей, а скрыт он через css. Поэтому на первый клик он задаёт style.display = none, из-за того что x.style.display === "" а не 'none' то есть идёт по ветке else, а потом уже работает как "предполагалось".

    Если зададите инлайн стиль style="display: none", то будет работать с первого раза.
    То есть в разметке сразу должно быть<element style="display: none">

    Ну а лучше отказаться от diplay: none и использовать атрибут hidden или скрывать\показывать через css классы.
    Ответ написан
    1 комментарий