Ответы пользователя по тегу JavaScript
  • Остановка цикла на несколько секунд. Как?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Практиковать setInterval не стоит. Лучше сделать на цикл на setTimeout, это лучшая практику js.
    На рекурсии что-то типо этого:
    function shedule () {
        setTimeout(function(){
            //ваши действия
             console.log('interval');
              shedule(); // Рекурсивный вызов функции самой себя.
    
        }, 5000);
    }
    
    shedule ();
    Ответ написан
    2 комментария
  • Как включить выделение текста в click?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Есть свойство user-select, плагин ставит его в none и поэтому нельзя выделять текст. Но ещё тк. он отплавливает события click и mousemove то выделение не будет происходить. В настройках наврятли что-то есть вроде этого, он просто работать не будет без этих событий.
    Ответ написан
    Комментировать
  • Как сделать ajax форму?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Ну и вместо alert пропишите скрипт который удалит форму, установит фон и создаст текст.
    В callback функции для done всё делайте.
    Ответ написан
  • Как добавить дополнительное время для выполнения js скрипта?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Если тебе прям 3 секунды нужно то просто setTimeout поставь
    <script type="text/javascript">$(window).on('load', function () {
        var $preloader = $('#page-preloader'),
            $spinner   = $preloader.find('.spinner');
       setTimeout(function(){
         $spinner.fadeOut();
        $preloader.delay(500).fadeOut('slow');
       },3000);
    });</script>
    Ответ написан
  • Тема дипломной работы, связанная с Front-end?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Любую задачу можно решить с помощью SPA, а spa это жирный front-end :)
    Лучше для диплома искать тему которая будет внедрена, в вашей веб студии есть задачи? Типо месенджера для работников, хранилище знаний или ещё чего. Я вот прохожу практику в it компании, для неё требуется создать базу знаний, реализовал как виджет на сайте (очень простенький тк. ie8), а вот админ панель для неё у меня жирновата) Весь back-end будет RestAPI.
    Ответ написан
    Комментировать
  • Почему не работает событие change?

    VIKINGVyksa
    @VIKINGVyksa Автор вопроса
    front-end developer
    оооооууу всем сорян я просто опечатался) У селекта прописал класс .js-fcontol вместо .js-fcontrol. Ну как всегда...
    Ответ написан
    Комментировать
  • Как правильно организовать ajax запросы в SPA?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    На backend вам достаточно создать класс базы данных в котором будет куча методов типо getClients or getProductsAll or getProductId. Зачем создавать какие-то объекты? у вас получаеться SPA вам нужен только API а он отдаёт на запрос ответ, ответ это запись из БД.
    Ответ написан
    Комментировать
  • Выполнение js функции перед закрытием вкладки браузера?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Есть событие загрузки окна onload а есть onunload событие которое вызываеться перед закрытием браузера.
    Ответ написан
  • Как перехватить click на всех ссылках в заданом диве?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    $(document).ready(function(){
      var FullList = $('#wrapper');
      
      FullList.on('click',function(e){
        var self = $(e.target);
        
        if(self.prop("tagName")=="A"){
          e.preventDefault();
          
          var url = new URL(e.target),
              page = (url.pathname + url.search + url.hash);//надеюсь тут правильно
          
          //здесь подгружаю новый html файл и вставляю в div wrapper
         //специально упростил
         alert(self.prop("tagName"));
        }
      });
    });
    Ответ написан
  • Как извлеч и отправить текстовое содержимое checkbox на почту?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Ну вы можите когда рендерите свои боксы указать что-то типо этого
    <input type="checkbox" name="chk1" value = "4000000{//}Дом">Дом
     <input type="checkbox" name="chk1" value = "1000000{//}Авто">Авто
     <input type="checkbox" name="chk1" value = "25000{//Телефон}">Телефон

    Т.е. добавлять через уникальный разделитель в value. В php это просто добавлить ещё одну конкатенацию, думаю вы поняли. Когда будет приходить на сервер значение то вам останеться только разделить строку value по символу {//} или : как вам будет удобней. Тогда первое значение будет цифра а другое строка.

    Если вы используете AJAX то можно создать объект в котором всё будет, там не должно быть проблем)
    Ответ написан
  • Как с помощью AJAX jQuery и php сделать отправку данных(комментарии) формы в БД и вернуть их без перезагрузки страницы?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Вам нужно создать файл php который будет обрабатывать данный запрос. Например ajax-form-comment.php. В нём вы описываите на php всю логику получения данных. Просто берёте всё из массива post. С помощью AJAX вы формируете запрос, файл php получает запрос от ajax, обрабатывает там, в БД добавляет комент и с помощью echo выводит ответ, например текст "Всё круто, записали коммент!" или в формате JSON. В функцию callback success или done (смотря какую вы будите использовать) придут эти данные как раз. И в ней вы опишите логику, например отрисовку данного добавленного комента (вам нужно лишь от сервера получить подтверждение что коммент попал в базу, а данные использовать теже что и отправляли AJAX-ом ранее на сервер). Если нужен код, то могу написать js часть.

    $('form').on('submit',function(){//используйте id лучше
      e.pereventDefault();//блокируем действия по умолчанию, чтобы не перезагружать страницу
      var data;//записываем сюда данные которые хотим передать
      $.ajax({
        url:'file.php',
        data:data,//наши данные которые передадим
        method:'POST',//метод
        dataType:'text/plain',
      }).done(function(data){//допустим сервер будет возвращять JSON {isError="true",message="Всё записалось"}
        //описываем действия по получению ответа сервера
        if(data.isError==true){
          //коммент записался
          page.render(data);//отрисовываем наш комент с переданными рание данными
        }
      }).fail(function(err){
        //обрабатываем ошибку ajax
        
      });
    });


    В php всё ещё проще, просто массив разбераите, работаите с базой и echo возвращаите данные обратно)
    Ответ написан
    Комментировать
  • Как получить результат функции JS?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    calendar.selectDate = function(day,month,year) {
      calendar.selectedDate={
        'Day' : day,
        'Month' : month,
        'Year' : year
      };
      calendar.drawCalendar(month,year);
     return this.selectedDate;//что вам мешает так сделать?
    }
    //можно получиться дату так
    var date = calendar.selectDate(1,2,2015);

    Это самописный календарь?
    Вы можите передавать в функцию .selecеDate последним оргументом callback, то есть то что необходимо выполнить в конце выполнения.
    calendar.selectDate = function(day,month,year,callback) {
      calendar.selectedDate={
        'Day' : day,
        'Month' : month,
        'Year' : year
      };
      calendar.drawCalendar(month,year);
      callback();
    }
    
    //вот как использовать
    calendar.selectDate(1,2,2015,function(){document.getElementById('test_id').innerHTML='Hello World!';});

    Я вас правильно понял?
    Ответ написан
    9 комментариев
  • Какое решение лучше всего работает с SVG?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    библиотека d3.js . Считай аналог jquery, также работает с DOM,но ориентированная на визализацию данных.
    Ответ написан
    Комментировать
  • Как сделать чтобы скрипт срабатывал при обновлении страницы?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    При обновлении всей страницы браузера будут завоно подгружены все файлы и все скрипты, а когда скрипт загрузился то браузер его сразуже выполняет.
    Ответ написан
    1 комментарий
  • Как работает доступ к свойству объекта через квадратные скобки?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Если мы будем объявлять через [] то мы можем создавать типо оссациотивных массивов в js.

    var arr = ["Andrey","Petia","Gamer"];
    var obj={};
    
    for(var i =0,l=arr.length;i<l;i++){
        //мы вольны создавать произвольные свойства в объекте
       // через дот нотацию мы такое не можем позволить, для неё нам нужно реально указать имя свойства obj.Andrey ="name";
        obj[arr[i]] = "name";   
    }


    если бонально то вот разница

    var obj = {};
    //нам надо сделать свойство название которого являеться значение какой-нeто переменной
    var name="Andrey";
    
    //для этого сделаем так
    obj[name]="это имя";
    
    //для того чтобы сделать это через точку мы должны явно указать имя а не из переменной его взять
    
    var obj={};
    
    obj.Andrey="это имя";


    Где это может пригодиться? Это может пригодиться когда вы отправляите форму на сервер AJAX-ом
    Ответ написан
    Комментировать
  • Как реализовать такой фильтр?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    У вас полюбому должен быть сервер, вы же оперируите БД. Организуйте на сервере REST API которое будет отдавать вам контент. Допустим сделайте роутер host:80/api/search. К этому роутеру вы просто делаите get запрос и передаёте этому api фильтры, api делает запрос к БД и возвращает всё клиенту, а клиент отрисовывает все пришедшие данные. Лучше использовать post запрос, в нём нету ограничений на колличество данных. Это не сложная задача, я последнее время этим и занимаюсь)

    Всё очень удобно получаеться, сервер в корне отдаёт само приложение а оно делает уже запросы к api, также можно и админку запилить)

    Ну либо ищите фрейм форк для работы с local storage и сохраняйте все данные в нём, а потом синхронизируйте, но это посложнее.
    Ответ написан
    2 комментария
  • Как связать элемент select с полем input?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    ну можно так

    <form action="#">
    <select name='options'>
      <option value='option-1'>Option 1</option>
      <option value='option-2'>Option 2</option>
      <option value='option-3'>Option 3</option>
    </select>  
    <select name='options'>
      <option value='option-1'>Option 1</option>
      <option value='option-2'>Option 2</option>
      <option value='option-3'>Option 3</option>
    </select>  
    <select name='options'>
      <option value='option-1'>Option 1</option>
      <option value='option-2'>Option 2</option>
      <option value='option-3'>Option 3</option>
    </select>  
      
      <input type="text" />
    </form>


    ;(function(w,$){
      var selects =  $('form').find('select'),
          input   =  $('input');
      
      selects.bind('change',function(e){
        var string="";  
       for(var i =0,l=selects.length;i<l;i++){
         string+=selects[i].value+" ";
       }
        input.val(string);
      });
      
    })(window,$);


    Готовый результат codepen.io/anon/pen/YyRQzE
    Ответ написан
    5 комментариев
  • Закрытие выплывающей формы регистрации?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    В этом коде у вас утечка памяти будет. Вы вешаете событие когда сработало другое и не удаляете его. Вообще когда отработал метод .done у $.ajax надо закрывать. По коду вы просто информируите пользователя что всё хорошо, скрываете форму и онулируите значения в ней
    ...
    .done(function(data) {
                alert("Спасибо за заявку!");
               $("ваша форма, либо из замыкания берём").hide();//либо анимацию проиграйте .fadeout();
                setTimeout(function() {
                    $(".forms").trigger("reset");//ресет можно сделать сразу после скрытия формы, таймеры не к чему
                }, 1000);
            });
    ....
    Ответ написан
    Комментировать
  • Сборка gulp+browserify+react, как исправить ошибку?

    VIKINGVyksa
    @VIKINGVyksa Автор вопроса
    front-end developer
    Проблема исправлена, пересоздал и заработало болие мение)
    Ответ написан
    Комментировать
  • Добавить CSS-анимацию через JavaScript?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Для этого используют классы css

    Допустим у нас есть набор анимаций и классов с ними, в animation.css
    @keyframes anim {
        0% {
            background-color: yellow;
        }
        100% {
            background-color: green;
        }
    }
    .main-animation {
        animation: anim 2s ease;
    }


    в js коде нам нужно добавить или удалить класс анимации у элимента который хотим анимировать

    document.querySelector('.box').className="main-animation";
    //если надо убрать анимацию то удаляем класс и всё


    Данный способ является более практичным (не рекомендую делать по другому), так все делают. Используйте js для работы с DOM а анимацию предоставьте CSS Animations

    Если вам нужно прям чисто js сделать,то надо создавать отдельную стилевую таблицу, как тут
    Ответ написан
    4 комментария