Задать вопрос
Ответы пользователя по тегу JavaScript
  • Как передать переменную из Js в python(Flask)?

    @alexalexes
    1. На JS любым способом сделать ajax запрос на сервер, передав нужный набор параметров для обработки.
    2. Обработать запрос на серверe, передать клиенту результат.
    3. На JS обработать результат в callback функции ajax.
    Примерная заготовка, как это будет на стороне JS:
    function getValue()
    {
      let xhr = new XMLHttpRequest();
      xhr.open("POST", "" /*<- тут должен быть адрес скрипта на сервере, где будет обработка запроса */, true);
      // создаем виртуальную форму, чтобы нагрузить запрос параметрами
      let t_form = new FormData();
      // нагружаем параметром форму
      t_form.append("input-id", document.getElementById('input-id').value);
      // ... еще какой-то параметр
      // t_form.append("какой-то параметр", "какое-то значение");
       // callback функция ответа
       xhr.onreadystatechange = function(e)
      {
         // состояние, когда ответ сформирован
         if(xhr.readyState === 4 && xhr.status === 200)
         {
             // что-то делаем с ответом, например выводим сообщение
              alert(xhr.responseText);
          }
       };
       // отправляем запрос на сервер, нагружаем его формой с параметрами
       xhr.send(t_form);
    }
    Ответ написан
    1 комментарий
  • Как посчитать разницу по координате х за клик мыши?

    @alexalexes
    // инициализация значений по умолчанию (тело конструктора, если использовать ООП. В классе будете использовать this контекст класса вместо window)
        window.is_mouse_catch = false; // зажата ли мышь?
        window.mouse_path = 0.0; // путь мыши
        // предыдущие координаты мыши
        window.cl_X = null;
        window.cl_Y = null;
        // конец инициализации
        // обработчик нажатия кнопки
        document.addEventListener('mousedown', function(e)
        {
          // фиксируем параметры мыши в переменных, за пределами локальной области видимости обработчика
          window.is_mouse_catch = true;
          window.mouse_path = 0.0;
          window.cl_X = e.clientX;
          window.cl_Y = e.clientY;
        });
        // обработчик отпускания кнопки
        document.addEventListener('mouseup', function(e)
        {
          // фиксируем отпускание кнопки мыши в переменной, за пределами локальной области видимости обработчика
          window.is_mouse_catch = false;
        });
        // обработчик движения мыши
        document.addEventListener('mousemove', function(e)
        {
          // если кнопку не нажимали, то прерываем обработчик
          if(window.is_mouse_catch === false)
            return;
          // определяем текущие координаты
          let currentX = +e.clientX;
          let currentY = +e.clientY;
          // считаем дельту пути
          let delta = ((currentX - window.cl_X) ** 2 + (currentY - window.cl_Y) ** 2) ** 0.5;
          // приращиваем дельту пути к общему результату
          window.mouse_path += delta;
          // переопределяем предыдущие координаты
          window.cl_X = currentX;
          window.cl_Y = currentY;
          // пишем в лог
          console.log('currentX: ' + currentX + '; currentY: ' + currentY + ' delta: ' + delta + '; total_path: ' + window.mouse_path);
        });
    Ответ написан
  • Зачем нужен блок инструкций без управляющей инструкции?

    @alexalexes
    var currentExtraStackFrame = null; // это нужно, чтобы не словить предупреждение в консоль undefined variable/property при обращении к свойству currentExtraStackFrame
    // этим методом вы задаете какое-то значение для свойства currentExtraStackFrame, если его нужно привести в какое-то не null значение (или вернуть в null - значение по умолчанию).
    function setExtraStackFrame(stack)
    {
      // if() тут может была лексема if, можно просто ее закомментить и не убирать скобки, чтобы git не анализировать их исправление, и так будет работать
      {
        currentExtraStackFrame = stack;
      }
    }
    Ответ написан
    2 комментария
  • Насколько опасно использование конструктора Function?

    @alexalexes
    такой способ представляет угрозу для безопасности

    Потому, что если злоумышленник будет иметь возможность статично внедрять HTML-фрагменты в тело документа, не имея доступа к интерпретатору JS пользователя, то с помощью атрибута data-format-value он эту возможность получит напрямую, так как может вставлять любой код JS в этот атрибут, получая доступ к локальному хранилищу, кукам. Если по кукам он не угонит сессию пользователя, то хотя бы сможет составить его фингерпринт.
    Ответ написан
    7 комментариев
  • Как импортировать данные из .docx файла в JavaScript логику?

    @alexalexes
    Из ворда же можно сохранить как HTML.
    Пересохраните в веб-формат, а уже внутри пишите наколеночный скрипт для парсинга в массив.
    Ответ написан
    Комментировать
  • Нужно ли обычную форму обратной связи лендинга защищать от спам-ботов?

    @alexalexes
    Нужно. Хотя бы вставить решение простой капчи вида:
    2 + 8 = ?

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

    @alexalexes
    В php скриптах не обязательно всегда отдавать клиенту html-текст, тем более в виде статики (за пределами тегов <? ?>).
    А если вы еще используете ajax, обращаясь к тем же скриптам, что формируют полную html страницу, то можно отдавать ответ гораздо гибче (отдавать только чистые данные, без html в случае AJAX, и в остальных случаях - html оснастку, чтобы браузер нарисовал начальное состояние страницы):
    <?php
        if(isset($_POST['checkout']))
        {
          // получили параметр, который используется в AJAX - отдаем только данные (числа, строки, или json объекты)
           echo 'posted:'.$_POST['checkout'];
        }
       else
       {
         // не получили специфичных для ajax параметров - отдаем клиенту обычный HTML
          echo '<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div><?php echo $test ?></div>    
        <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    
    </body>
    </html>';
       }
    ?>

    На этом строят API своей системы.
    Ответ написан
    Комментировать
  • Как реализовать форму?

    @alexalexes
    Эффективней всего использовать фреймворки для пользовательских интерфейсов. Например, Vue JS.
    За счет реактивности вы можете подвязаться как к элементам ввода в DOM, так и к состоянию объектов в window, и отрисовывать по собственной семантике шаблонов vue не только целые формы, но и изменять состояние отдельных тегов, по изменению состояния других объектов формы или внутренней логике JS.
    Ответ написан
    Комментировать
  • Как с помощью jQuery повторить событие oninput и вызов функции при нажатии на button?

    @alexalexes
    $('.plus').click(function(e) {
     checkNumber(
    // про this - сюда вставьте указатель на ноду HTML - конкретный экземпляр инпут с классом намбер, который будете проверять. Будьте внимательны, если на странице несколько input.number, возможно, выбранный вами способ будет захватывать первый попавшийся input.number. Добейтесь того, чтобы захватывался только тот намбер, соседом которого является плюс или минус (можно через родительский контейнер вычислить это).
    
    // про event. Возможно, возможно, внутри реализации checkNumber, допустим есть отмена действия по умолчанию, или остановка всплытия события, посмотрите, будет ли отличия от события oninput на намбере. Можно попробовать передать указатель события клика от плюса/минуса (обратите внимание на аргумент e в function(e) )
    
    // про '1' - если заглянуть в хрустальный шар - реализацию функции checkNumber, то можно предположить, что это значение по умолчанию или минимальное значение поля input.number )
    });
    Ответ написан
    Комментировать
  • Как приручить событие "keydown" в браузере?

    @alexalexes
    Чтобы вовремя удалить обработчики, нужно их методы деанонимизировать - присвоить имена или иметь где-то указатели на оригинал обработчика, чтобы внутри обработчика он смог снять сам себя с события.
    let setSpeedToUpHandler = function(e)
    {
      if(e.key === " "){
          document.removeEventListener("keydown", setSpeedToUpHandler); // удаляем текущий обработчик с этого типа события 
         setMovementSpeedToSpeedUp(); // увеличиваем скорость персонажа
      };
    };
    let setMovementSpeedToNormalHandler = function(e)
    {
      if(e.key === " "){
         document.removeEventListener("keyup", setMovementSpeedToNormalHandler); // удаляем текущий обработчик с этого типа события 
         setMovementSpeedToNormal(); // устанавливаем скорость на нормальное значение
      };
    };
    document.addEventListener("keydown", setSpeedToUpHandler);
    document.addEventListener("keyup", setMovementSpeedToNormalHandler);
    Ответ написан
    Комментировать
  • Как вставить скрипт, чтоб он не открывался на всю страницу?

    @alexalexes
    Либо обращайтесь к разработчикам виджета - help@unitiki.com
    Либо смотрите, какие ccs-селекторы воздействуют на модальное окно виджета и пытайтесь перебить их свойства своими css-стилями.
    Ответ написан
    Комментировать
  • Не видит значение input, как исправить?

    @alexalexes
    Вам нужно получить значение текстового поля так:
    var intxt = document.querySelector('input').value;
    Как раз это и будет строка, у которой можно посмотреть length.
    Ответ написан
    Комментировать
  • Выбор меню. Оставить фокус при загразки другой html?

    @alexalexes
    Вариант 1, решение на коленке, которое нужно здесь и сейчас.
    Написать костыль на JS в виде функции, которая возьмет подстроку из текущего url и произведет поиск нужной ссылки в меню с таким же href атрибутом, и поставит найденному html элементу класс активного элемента (или контейнеру ссылки - li элементу). Не забудьте прогуляться до первого уровня меню и тоже расставить классы активного элемента, если у вас меню многоуровневое.

    Вариант 2, как должно быть.
    У вас во входном скрипте index.php должен быть реализован примитивный роутинг url.
    Благодаря роутеру для каждой страницы вы точно можете получить путь из компонентов адреса.
    Например, site.com/page1/subpage2.
    От роутера вы легко можете получить путь к странице, хотя бы в таком виде:
    $page_path = ['page1', 'subpage2'];
    Также меню должно формироваться динамически, из какой-то сохраненной структуры, пусть структура будет статичной.

    $site_menu =
    [
       'page1' =>
       [
          'title' => 'Страница 1', 
          'child' => 
          [
             'subpage2' => ['title' => 'Субстраница 2', 'child' => []]
          ]
      ],
      'page2' =>
       [
          'title' => 'Страница 2', 
          'child' => []
      ],
    ];

    Примерная функция для формирования меню:
    // рекурсивная функция для получения сверстанного меню из структуры
    function get_main_menu(
       $curr_menu, //часть меню текущего уровня
       $level, // номер текущего уровня
       $menu_path, // путь к текущему уровню меню
       &$page_path // путь к текущей странице 
    )
    {  
      $out = '';
      if(count($curr_menu) > 0)
      {
        $out .= '<ul class="main-menu main-menu_level-'.$level.'">';
        foreach($curr_menu as $key_item => $menu_item)
        {
            $out .= '<li class="main-menu__item '
                     .($page_path[$level] == $key_item ? 'main-menu__curent' : '') // определяем текущий пункт меню
                   .'"><a href="'.$menu_path.'/'.$key_item.'">'.$menu_item['title'].'</a>';
            get_main_menu($curr_menu['child'], $level + 1, $menu_path.'/'.$key_item, $page_path); // рекурсивный вызов функции для прорисовки следующего уровня
            $out .= '</li>';
        }
        $out .= '</ul>';
      }
      return $out;
    }
     // получаем html-фрагмент меню по структуре
     $out_site_menu = get_main_menu($site_menu, 0, '', $page_path);
    Ответ написан
    1 комментарий
  • Как передать данные js в php?

    @alexalexes
    1) Разобраться с клиент-серверной архитектурой вашей поделки. Научиться не путать код, который выполняется на клиенте, и код, который выполняется на сервере.
    2) Передать сведения от клиентской части вашего приложения на серверную по любой технологии: ajax, websocket или банальный редирект с get/post параметрами.
    Ответ написан
    Комментировать
  • Как заблокировать возможность делать скриншоты на моем сайте или хотя бы по нажатию на PrtScn возвращать серую картинку вместо изображение сайта?

    @alexalexes
    Никак. Ценностная составляющая сайта должна быть сосредоточена на серверной стороне. Клиентская часть может быть сфотографирована, разобрана до винтиков для каких угодно целей пользователем сайта, если он имеет к ней доступ.
    Ответ написан
    Комментировать
  • Какие разделы математики знать надо в веб и в серверной части веб?

    @alexalexes
    А что вы так за математику зацепились?
    Перед вами барьер в виде понимания стека технологий - как взаимодействует клиент и сервер. Математики там примерно на 2+2.
    Это вам чтобы в вуз поступить математика нужна. Чтобы на одной из базисных дисциплин вы научились брать интегралы - чисто джентельменский навык как фехтование шпагой, а на другой, уже профильной дисциплине вам расскажут про стек технологий, чтобы получить полностью работающий сайт.
    Ответ написан
    Комментировать
  • Как добавить сумму полей только один раз при клике?

    @alexalexes
    numberStudentsPrice.innerHTML = +numberStudentsPrice.innerHTML + +numberStudentsPriceWeekend.innerHTML;

    Наверное, нужно где-то хранить исходное значение numberStudentsPrice, которое не будет зависеть от погоды. И от этого значения считать и будничный день, и выходной, не затирая исходный коэффициент.
    А так, вы инкриминируете numberStudentsPrice на шаг numberStudentsPriceWeekend при каждом выборе выходного.
    Ответ написан
  • Ошибка при JSON.parse как исправить?

    @alexalexes
    Можно сделать из буханки хлеба троллейбус, но зачем?
    var dataJSONArray = JSON.parse('<?php echo str_replace( "\'", "\\'",json_encode($u,JSON_UNESCAPED_UNICODE)); ?>');
    Ответ написан
    Комментировать
  • Как сделать таймер отсчёта как на фото?

    @alexalexes
    Нужно менять механику смещения параметра в translate3d, чтобы смещение по вертикали анимировалось между (n/2) и (n/2) + 1 высотой списка (перелистывались соседние элементы центральной части списка). Когда анимация достигнет уровня (n/2) + 1, нужно сделать два одновременных действия: 1 - переставить последний элемент списка на первое место, 2 - вернуть уровень до отметки (n/2). Тогда будет достигнут эффект замкнутости и цикличности списка и анимация не будет откатываться назад.
    Ответ написан
    1 комментарий
  • Как добавить исключение?

    @alexalexes
    Отфильтруйте по списку исключений:
    let except_id_list = ['111111', '222222', '333333'];
    let items = [...document.querySelectorAll(`div[class="name"]`)].filter(item => except_id_list.indexOf(item.id) == -1);
    ...
    Ответ написан
    3 комментария