Задать вопрос
Ответы пользователя по тегу JavaScript
  • Как анализировать JS и PHP ошибки на своем сайте?

    @MadridianFox
    Web-программист, многостаночник
    Есть saas сервисы мониторинга, которые дают free tier. Нужно только установить их агент на свой сервер и немного настроить.
    Примеры:
    - grafana cloud
    - newrelic
    - datadog

    Можно собрать подобную систему из opensource (или не совсем open, но бесплатных) компонентов.
    Сбор логов из файлов:
    - vector
    - fluent-bit
    - filebeat

    Хранение логов:
    - elasticsearch
    - loki
    - openobserve
    - victoria logs
    - graylog

    Визуализация:
    - kibana (только вместе с elasticsearch)
    - grafana (loki, victoria)
    - openobserve и graylog имеют свой интерфейс
    Ответ написан
    Комментировать
  • Как проверить строку на наличие капса?

    @MadridianFox
    Web-программист, многостаночник
    Можно использовать регулярное выражение

    let allCaps = !/[a-zа-я]/.test(myString);
    Ответ написан
    1 комментарий
  • Отправка почты с формы?

    @MadridianFox
    Web-программист, многостаночник
    Важно не то, где код находится, а то, в какой последовательности данные отправляются/заносятся.
    Если это на одной странице, то старайтесь сделать это одной большой формой, либо собирайте данные с форм и отправляйте потом на сервер сразу все данные.

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

    @MadridianFox
    Web-программист, многостаночник
    Понимание ООП приходит с опытом. Сначала надо написать много кода, самому заметить его недостатки и тогда перечитывая те же самые статейки вы начнёте по новому понимать, что вот конкретно эту штуку можно было бы использовать в том моём коде, и было бы лучше.

    Я разделяю ООП на аутентичное и классическое. Аутентичное, это ООП как его представлял автор - объекты обмениваются сообщениями.
    Классическое - это то как оно реализовано в Java.
    И там и там есть инкапсуляция и полиморфизм. Наследование это приятная фишка классического ООП. Так же как и все пляски с типами. Вообще строгая типизация не является частью ООП. По крайней мере не является частью аутентичного ООП.

    Поэтому переход на typescript позволит только более точно воспроизводить классическое ООП. Ну и проверку типов добавит. Это само по себе полезно, но для ООП никакого значения не имеет.

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

    Заметьте, про js я почти ничего не сказал. Потому что дело не в нём. Дело только в понимании ООП. У языков программирования, конечно, есть различные возможности и ограничения что которые позволяют использовать ту или иную парадигму. Но ООП на js можно было делать и до es6, просто потому что в js можно инкапсулировать код в объект.

    И ещё, когда мы начинаем делить код на объекты, необходим механизм разделения кода на файлы и собирания его обратно. Т.е. нужна модульность. Лучше всего, конечно, использовать webpack, но вроде как в js есть и другие системы. Не сборки, а именно подключения модулей.
    Ответ написан
    1 комментарий
  • Как убрать из js файла, всё не нужное?

    @MadridianFox
    Web-программист, многостаночник
    Вообще некоторые сборщики js кода, такие как webpack и rollup умеют делать tree shaking, т.е. по цепочке импортов и вызовов понимают какой код используется, а какой можно в итоговый бандл не собирать.

    Вот вам в эту сторону копать надо.
    Ответ написан
    Комментировать
  • Как обратиться к this конструктора?

    @MadridianFox
    Web-программист, многостаночник
    function Constr() {
        let self= this; // <<<<<<<<<<<<
        this.onStart = function () {
            console.log('start');
        };
        this.func = function () {
            navigator.getUserMedia({audio: true}, function (stream) {
                self.onStart()  // <<<<<<<<<<<
                },
                function (error) {
    
                });
        }
    }
    Ответ написан
    2 комментария
  • Как избежать удаления добавленных с помощью jQuery классов при ajax обновлении?

    @MadridianFox
    Web-программист, многостаночник
    Запоминайте какие классы куда добавили и при обновлении расставляйте их заново.
    Ответ написан
  • Почему функция возвращает данные последней итерации?

    @MadridianFox
    Web-программист, многостаночник
    Вы создаёте замыкание, которое ссылается на переменную i. Ключевое слово "ссылается", т.е. функция обработчик не запоминает значение i на момент своего создания, а просто "знает", что где-то есть i. В момент выполнения любого обработчика i равно последнему индексу.
    Ответ написан
    Комментировать
  • Как работает этот js код?

    @MadridianFox
    Web-программист, многостаночник
    Переменные создаются заново, но их содержимое перекидывается туда-сюда и в итоге сохраняется и даже "увеличивается".
    Представьте себе переливание воды из ведра в ведро. Вы берёте второе ведро, выливаете в него воду из первого ведра, а потом, добавив в пустое первое ведро кружку спирта, заливаете туда воду обратно из первого ведра.
    При этом вы можете выкидывать пустое ведро после того как вылили из него воду и каждый раз покупать новое ведро чтобы налить в него воду.
    Ответ написан
  • Как реализовать удаление элемента, по которому произошел клик?

    @MadridianFox
    Web-программист, многостаночник
    Выглядит так как будто вы вешаете обработчик, а потом добавляете элементы на страницу. В таком случае необходимо вешать обработчик на элемент-кониейнер, который с самого начала есть на странице, а уже во время клика вычислять по какому именно элементу был сделан этот клик.
    Ответ написан
  • Как убрать галочку со всех чекбоксов с одинаковыми параметрами?

    @MadridianFox
    Web-программист, многостаночник
    Это возможно?

    Да, возможно. Для этого надо написать js код.
    то успеет ли js до сабмита формы снять все чекбоксы

    Ну вы в js коде сначала делаете с чекбоксами то что вам необходимо и после этого отправляете форму.

    P.S. как уже написали в комментарии к вопросу - одинаковый id у тэгов нельзя делать. Вот вообще нельзя. Лучше давайте им одинаковый класс.
    Ответ написан
    Комментировать
  • Как добавить babel в gulp?

    @MadridianFox
    Web-программист, многостаночник
    Вот тут надо кликнуть на кнопку с надписью Gulp (в третьей строке примерно в середине) и появится код, там всё понятно.
    Ответ написан
    4 комментария
  • Почему после подгрузки полей формы через jquery load(), yii2 их не принимает в model?

    @MadridianFox
    Web-программист, многостаночник
    Вы вот говорите про jquery, но ни строчки js кода не показали.
    На всякий случай проверьте. что csrf токен отправляется.
    Ответ написан
  • Как можно оптимизировать код?

    @MadridianFox
    Web-программист, многостаночник
    Во-первых, отличия в стиле надо выносить в классы.
    .btn-change-sect {
        display: none;
        border-bottom: 2px solid #ffffff;
    }
    
    .active {
       display: block;
       border-bottom: 2px solid #ff7300;
    }

    Во-вторых, не стоит привязываться к конкретике, в вашем случае, при клике есть только текущий элемент и все остальные
    $( ".btn-change-sect" ).click(function() {
        // убираем активный стиль со всех подобных элементов
        $( ".btn-change-sect" ).removeClass("active");
        // ставим активный стиль текущему элементу
        $(this).addClass("active");
    });
    Ответ написан
  • По какому принципу определяется вектор движения курсора?

    @MadridianFox
    Web-программист, многостаночник
    Элементарно: при каждом событии движения мыши берём координаты, вычитаем из них запомненные координаты от предыдущего события и получаем вектор движения. Т.е. если сначала были координаты {50;50}, а стали {49;60}, то мышка сдвинулась в сторону {-1;10}, т.е. вниз и чуть чуть слево.
    Можно сглаживать вектор движения учитывая координаты не двух измерений, а например, последних 4-5.

    UPD: посмотрел примеры. Тут можно не привязываться к вектору движения мыши, ведь логика завязана на то - переходим ли мы с предыдущего пункта на следующий или со следующего на предыдущий.
    Т.е. при наведении мыши на пункт определяем индекс элемента на который навели. Запоминаем. Если мышь переместилась на другой пункт, то берём его индекс и сравниваем с запомненным. Если больше - то одна анимация, меньше - другая. Если нет запомненного индекса, то можно ещё и третью анимацию прикрутить.
    Ответ написан
    1 комментарий
  • Как вывести содержимое текстового файла средствами html?

    @MadridianFox
    Web-программист, многостаночник
    Можно с помощью js сделать ajax запрос, который получит содержимое файла, ну и вставить полученное содержимое на страницу.
    Ответ написан
    3 комментария
  • Как правильно прописать событие hover, чтобы не конфликтовали классы?

    @MadridianFox
    Web-программист, многостаночник
    Внутри обработчика событий можно ссылать непосредственно на элемент, который это событие произвёл через $(this). Вроде как-то этот элемент ещё можно достать из объекта события, но я постоянно забываю как)
    $(function() {
    $('a').hover(function() {
      $(this).show();
     },
     function() {
      $(this).hide();
     });
    });
    Ответ написан
  • Как задать JsDoc для анонимной функции?

    @MadridianFox
    Web-программист, многостаночник
    Попробуйте повесить док-коммент прямо на переменную
    angular.forEach(textures, function (texture) {
         /** @var texture ImageType */          
         .....
    })
    Ответ написан
    1 комментарий
  • Как удалить слова из предложения?

    @MadridianFox
    Web-программист, многостаночник
    Как вариант: разбиваем строку по точке с запятой.
    Если надо добавить слово, то кладём его в последний существующий элемент (это всегда пустая строка) и добавляем в конец массива новую пустую строку.
    Если удалить слово - то ищем индекс слова в массива, удаляем.
    В итоге джойним обратно по точке с запятой. Т.к. в конце есть пустая строка, то итоговая строка будет заканчиваться точкой с запятой.
    Ответ написан
    Комментировать