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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Дешево и сердито — сохраняй значения в переменную, например строку, без пробелов (можно использовать скрытый input), а показывай в стилизованном label по шаблону, подойдут регулярки, да и вывод строки массивом (посимвольно) тоже сойдет. Останется только решить проблему выделения и удаления. В последнем случае могут помочь JS-фреймворки, которые из коробки оперируют динамическими данными.
    Ответ написан
    Комментировать
  • Как выводить контент согласно active class?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Обычно такое реализуют в рамках маршрутизации либо бэком, либо на JS, в идеале на фреймворке.

    Чтобы получить возможность во вьюхе менять контент можно использовать гриды, для обеспечения плоской структуры, будет проще управлять данными в любом исполнении, от шаблонизатора под бэком, так и на чистом JS.

    Используя ванильку (JS) можно передать в data-атрибутах ID-шники блоков, которые должны появляться снизу и справа от сайдбара и активировать их, скрывая остальные, во время нажатия. Но это на уровне костыльного решения, табуляция выглядит и реализуется проще.

    Чтобы имитировать навигацию, т.е. чтобы можно было передать кому-то URL на конкретный таб, ты можешь использовать ссылочные якоря, опираясь на которые (разбирая ссылку, историю) открывать тот или иной контент впридачу к описанному мной выше.
    Ответ написан
    1 комментарий
  • Как реализовать слайдер?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Чтобы элементы всегда были по обе стороны, их можно банально переставлять\клонировать и крутить. Дальше уже вопрос позиционирования. Так делают в принципе все карусели.
    Ответ написан
    Комментировать
  • Как правильно вызывать функцию?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Если ты пишешь на ванильке и не собираешь билды для разных страниц, либо у тебя на одной сборке может как присутствовать, так и отсутствовать нужный элемент, то подход нормальный.

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    1. Посмотри в ответе сервера, есть ли уже это значение.
    2. Если нет, то запроси бэкенда на дополнение этого значения.
    3. Если хочешь упороться, то можешь пройтись скриптом по всем страницам, чтобы получить сумму. Подойдет, если вывести значение ну очень надо, а бек добавят нескоро, но есть шанс повалить страницу запросами.
    Ответ написан
    Комментировать
  • Как сделать калькулятор дохода на сайт?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Дешево, просто и сердито — использовать библиотеки и фреймворки, например Vue или React, которые уже из коробки слушают изменяемые значения и могут рисовать новые.

    Лучше для получения понимания, как это работает — использовать слушатели с триггерами перерисовки на VanillaJS.
    Ответ написан
    Комментировать
  • Как правильно вызвать функцию в js?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Когда ты вызываешь функцию по событию, в неё «вкладывается» значение с событием. Которое ты и превентишь. Если хочешь вызывать напрямую, то либо убери отключение дефолтного экшна, либо поставь проверку на его наличие.
    Ответ написан
  • Как сохранить json в переменную?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Если речь идет о сборке проекта или работе в окружении nodejs, то хватит простого require со ссылкой и присваивании его в переменную. Если же проект реализован в формате «обычного сайта», то поможет fetch, который должен запрашивать файл по «серверной» ссылке. Скажем, файл находится в корне проекта в директории assets/json, тогда ссылка будет выглядеть примерно https://domain.name/assets/json/file.json. При условии, конечно, что сервер отдаст файл и точка входа в домен соответствует с корнем проекта, как я привел в примере.
    Ответ написан
    Комментировать
  • Как убрать выделение у нажатых элементов в CSS?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Это выделение объекта мышкой. На скрине, так полагаю, картинка, а это текстовый элемент и выделяется точно также: зажать и выделить область или двойной клик на элемент (слово, например).

    Решение — поменять мышку, если двойной клик происходит при попытке сделать один.

    Могу ошибаться, конечно же, выглядит не так очевидно из-за свойства изображений. Если бы у пикчи не было свойства vertical-align:middle, то при выделении появлялся характерный отступ снизу. Другие свойства тоже могут его убирать.
    Ответ написан
    Комментировать
  • В чем суть SSR (Server Side Rendering)?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Динамические сайты, которые все больше занимают места на рынке, в виде загруженной html страницы представляют собой обертку типа:
    <html>
       <head>...
       <body>
           <p>Сообщение, которое будет отрисовано, если у юзера выключен JS</p>
           <script src="скрипт, генерирующий внешний вид и логику">
       </body>


    Т.е. данных нет. Из минусов:
    1. Роботы, которые не ждут отрисовки страницы просто не получают никаких данных.
    2. Пользователь получает данные тогда, когда они у него будут отрисованы, что создает некоторую задержку.

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    На стилях такое можно сделать, если разделить составляющие блоков на элементы и расположить их внутри гридовой сетки на dense. Тогда заголовки по строке будут зависеть от других заголовков, текстовое описание от других и т.д. Увы этот метод сложный и попахивает бредом.

    Более разумно будет не пытаться проводить такую манипуляцию, или захардкодить высоту заголовка в две строки (лучше в одну). Или же прибегнуть к JS, который будет динамически высчитывать размер наибольшего заголовка в строке и соседним выдавать такую же фиксируя её. Вроде есть либа такая.

    Минус хардкода размера заголовка в том, что если в ряду будут все в одну строку, то появится необоснованное пространство снизу, а JS при большом числе карточек нагрузит вычислительные мощности устройства.

    Еще можно подождать, пока войдет в реализацию subgrid. Но с этим пока сложно.
    Ответ написан
    Комментировать
  • Как при помощи JS заменить строку на странице если совпадает значение?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Проверку проводить на уровне шаблонизатора.

    На JS можно, конечно, но это на уровне... На плохом уровне. Но посмотреть как, можно тут, тут и тут.
    Ответ написан
    3 комментария
  • Как сделать модальное окно на Js?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Напиши функцию, объект или класс (по сути то, что в реакте или любом другом подобном фрейме или либе), который будет принимать параметра входящие и на выходе рисовать модалку с нужным контентом.
    Ответ написан
    Комментировать
  • Как пофиксить hover?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Как вариант решения → debounce.
    Ответ написан
    Комментировать
  • Скрипт срабатывает дважды, как исправить?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Подключай скрипты в единичном количестве к странице.
    Ответ написан
  • Как сделать кастомный скроллбар, выходящий за границы прокручиваемого контента?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Готовые библиотеки тебе в помощь, но суть вообще проста: надо высчитать видимую область и соотношение ей ко всему прокручиваемому контенту, да перенести это соотношение в кастомник в виде размеров. Так как видимая область это обычно некий блок с фиксированной высотой, у которого включена прокрутка (которую надо скрыть), то внутрянки достаточно обернуть в еще один блок, чтобы получить размер.

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    То, что ты пытаешься сделать называется аккордеон, гугли, делай.

    Ну и прав комментатор, это больше похоже на заказ, чем на вопрос, а такому на сервисе не место.
    Ответ написан
  • Как реализовать такую анимацию при наведении?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    1. Вешаешь на элемент слушатель, или делегируешь. Слушать надо наведение, т.е. hover\mouseenter.
    2. Трекаешь положение мышки.
    3. Привязываешь её коры к корам элемента.
    Ответ написан
    Комментировать
  • Почему this внутри функции ведет себя неадекватно?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Ответ написан
    Комментировать
  • Сборка assets файлов из папок npm?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    В основной директории проекта создай собирающий файл, который будет импортировать зависимости из node_modules и компилить их в конечный билд. Для scss это, например @import 'node_modules/..'. Популярное решение.
    Ответ написан