Задать вопрос
Ответы пользователя по тегу JavaScript
  • Как сделать переключение вкладок на нативном js?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Такой код нежизнеспособен, ибо хотя бы нет повторного использования кода и Вы будете повторять сами себя, это неизбежно... это если не касаться самого "компонента" ибо это только заготовка.
    Абстракцию все ровно придется писать, придется писать минимальный базис для работы с DOM.
    Тут у здешних две крайности на эту тему:
    1) JQuery везде, JQuery всегда, JQuery любит папа, мама и я... (с) =)
    2) Vanilla JS - так давайте же все напишем без абстракций, ядра , библиотек... чем больше сдадим-тем лучше
    Писать на "чистом" не освобождает от необходимости грамотно строить код, придерживаться ООП, модульности, юзания библиотек и любых методик позволяющих не повторяться. Да, это приведет к появлению собственных библиотечных функций, возможно микрофеймворка, если не взяли готовый перед этим, но так и должно же быть....
    Ответ написан
    Комментировать
  • Как правильно отлаживать JS?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Не знаю как Вы можете давно работать с JS и не уметь пользоваться консолью, без консоли там делать нечего, разве что дергать блоки через Jquery.
    если неправильно указан DOM-элемент, как это узнать

    $('#content').on('click' ,'#singleclick', function () {
    debugger;
    var product = $(this).parents('.product-block');
    $('#product_name').val(product.find('.product-action .name a').text());
    $('#product_price').val(product.find('.product-action .price').text());
    $('#singleclick_title').text(product.find('.product-action .name a').text());
    });

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

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Потому что attr работает только с первым элементом в коллекции.

    var links = $('.ofice a[title]').map(function(){
               return $(this).attr('title');
           });


    Для общего кругозора - на чистом тоже самое выглядело бы так
    var links = Array.prototype.map.call(document.querySelectorAll('.ofice a[title]'),function(el){
      return el.getAttribute('title');
    });
    Ответ написан
    1 комментарий
  • Как правильно выполнить mouseout в меню?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Ну так эти события ж всплывают, проверяйте event.target == sidebar ли он... тогда уж закрывайте..
    Ответ написан
  • JavaScript, уменьшение числа до 0 за промежуток времени?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Можно так:
    /**
            *
            * @param duration - продолжительность работы таймера
            * @param interval - время тика таймера
            * @param from     - начальное значение
            * @param to       - конечное значение
            * @param minStep  - минимальный шаг вызова callback
            * @param callback - обработчик
            */
    
           function timer(duration,interval,from,to,minStep,callback){
               var value=from,
                   forward=(from<to),
                   range=Math.abs(to-from),
                   steps=duration/interval,
                   step=range/steps,
                   last=from,
    
                   handle=setInterval(function(){
                       value+=step*(forward?1:-1);
    
                       if(forward?value>to:value<to){
                           value=to;
                           clearInterval(handle);
                           handle=null;
                       }
    
                       if(!minStep||!handle||Math.abs(last-value)>=minStep){
                           last=value;
                           callback(value,from,to);
                       }
                   }
               ,interval);
               
               return handle;
           }
    
    
           timer(800,20,50,0,1,function(value){
               console.warn(Math.floor(value));
           })
    Ответ написан
    Комментировать
  • Чат на сайте без JavaScript?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    И чего сегодня только не прочитаешь=)
    Функционал чата таков: текстовое и видео общение. Проблема, собственно в том, что я не знаю JavaScript, а найти и впаять хороший чат не получается.

    Звучит примерно - как построить ядерный реактор, если я не знаю таблицы умножения, а готовый найти не удается.

    Ну тут 3 выхода:
    - учить JS и явно не месяц
    - продолжать искать=)
    - нанять человека JS Developer'a + NodeJS

    Websocket это сетевой API для JS. Понимаете как звучит "Websocket без JS"? =)

    О, это я еще не прочитал :
    Пользователей будет около 5-10 миллионов

    10 млн и Вы собрались как то сделать FrontEnd'овый продукт без JS? =)) Вы хоть представляете какие это нагрузки и с чем их едят?
    Ответ написан
    8 комментариев
  • Как определить событие вызова функции?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Месье знает толк...
    Тут явно что то не то, но все же можно , но не нужно, что то наподобие этого:
    var test=function(){
    
               this.enable = false;
    
               this.protectedFunc1=function(){
                    console.warn('Protected func1 called!');
               }
    
               this.protectMethod=function(fn){
                   var self=this,
                       fn;
    
                   if(typeof fn!=='function'){
                       throw TypeError('Given thing is not a function!');
                   }
    
    
                   return function(){
    
                       console.log(self.enable);
    
                       if(!self.enable){
                           throw Error('Access to protected method not allowed');
                       }
    
                       return fn.apply(self,arguments);
                   };
               }
    
               this.protectedFunc1=this.protectMethod(this.protectedFunc1);
    
               this.protectedFunc2=this.protectMethod(function(args){
                   console.warn('Protected func1 called!');
               })
    
    
           }
    
    
           var obj=new test;
    
           obj.enable=true;
           obj.protectedFunc1(); //Protected func1 called!
    
           obj.enable=false;
           obj.protectedFunc1();// Error: Access to protected method not allowed
    Ответ написан
  • Как влияет прототип на потребление памяти в JS?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    КЭП подтверждает: хранение общих свойств в прототипе экономит память=)
    А на вопрос сколько- ответит профайлинг консоли, хотя это не важно.
    Ответ написан
    Комментировать
  • Как заставить 'reduce' изменять 'this' а не возвращать новый объект?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    var beers=[1,{locale:'domestic'},5,6,{locale:'domestic'},0,{locale:'domestic'}];
    
           beers.reduceBeers = function () {
    
               var stack=[];
    
               this.forEach(function(item,index){
                   if (item.locale === 'domestic') {
                       stack.push(item);
                   }
               });
    
               this.length = 0;//empty an Array;
    
               this.push.apply(this,stack);
    
               return this;
           };
    
           beers.reduceBeers();


    Насчет целесообразности reduce терзают смутные сомнения ... Хотя можете запихать в stack что хотите, все что в stack будет добавлено в "this". Тоже самое:
    beers.reduceBeers = function () {
    
               var stack=this.filter(function(item,index){
                    return item.locale === 'domestic';
               })
    
               this.length = 0;//empty an Array;
               this.push.apply(this,stack);
               return this;
           };
    Ответ написан
    1 комментарий
  • Как скрыть список вне блока?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Уже отвечал на такой вопрос - там было на чистом JS - так что есть желание - переделаете
    jsfiddle.net/awtb35om
    Ответ написан
    1 комментарий
  • Как сделать повторное изменение стиля при нажатии кнопки?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    В лоб:
    function myFunc(){
               var el=document.getElementById('tt2'),
                   str=el.style.transform,
                   translate=(/translate\((\S+?),\s(\S+?)\)/i.exec(str)||[0,0]),
                   translateX=parseInt(translate[1]); //-66.6%
    
               translateX+=33.3;
    
               console.log(translateX);
    
               el.style.transform = "translate(" +translateX+"%,0)";
           }


    Вообщем, пытаться с того кода что то слепить у меня выдержки не хватило :
    codepen.io/anon/pen/XbxEwX
    <div id="tt2" class="slider">
      <div><div>Digital</div><div>Brain</div><div>created</div><div>this</div></div>
    </div>
    
    
    <button onclick="slider.prev();">Prev</button>
    <button onclick="slider.next();">Next</button>


    .slider{
                width:30%;
                height:100px;
                background-color: green;
                overflow: hidden;
                position: relative;
            }
    
            .slider>div{
                display: inline-block;
                height:100%;
                white-space: nowrap;
                position: relative;
                width:100%;
                padding: 0;
                -webkit-transition: all 1s cubic-bezier(0.5, 0, 0.5, 1);
            }
    
            .slider>div>div{
                display: inline-block;
                width:100%;
                height:100%;
                text-align:center;
                margin: 0;
            }


    function Slider(el){
               var $el=(typeof el=="string")?document.getElementById(el):el,
                   content=$el.getElementsByTagName('div')[0],
                   sliders=content.getElementsByTagName('div'),
                   count=sliders.length,
                   width=content.offsetWidth,
                   step=width/count;
    
    
    
               this.index=0;
    
               function setTX(value){
                   content.style.transform = "translate(" +value+"%,0)";
               }
    
               this.showIndex=function(index){
                   console.info(index);
                   var max=count-1;
                   if(index>max){
                       index=0;
                   }else if(index<0){
                       index=max;
                   }
    
                   console.log('index=',index,max);
    
                   this.index=index;
    
                   setTX(index*(-100));
               }
    
               this.next=function(){
                   console.log('next');
                   this.showIndex(++this.index)
               }
    
               this.prev=function(){
                   console.log('prev');
                   this.showIndex(--this.index)
               }
    
           }
    
           var slider=new Slider("tt2");
    Ответ написан
    5 комментариев
  • Как избавится от такого хитрого adware?

    DIITHiTech
    @DIITHiTech Автор вопроса
    Fullstack javascript developer
    Вообщем, кажется вылечил ручками=)
    Как оказалось, этот ведет себя не так, как большинство всяких панелей "безопасного поиска". Вирус с бесплатным ПО переписывал упакованные ресурсы самого браузера, просто физически перезаписывал страницы браузера для всяких ошибок, как у меня для ошибки DNS ERR_NAME_NOT_RESOLVED. Не знаю вирус ли виноват, но с "Программы и компоненты" чудным образом делись деинсталляции браузеров. Установщики же, либо вообще не хотели ставить, либо ставили, но приблуда не исчезала. Вообщем, походил по папкам и тупо файлы браузера по удалял, кроме USER DATA в Local Settings ну и сразу установщики смогли поставить заново без ошибок. Думаю, вирус CRC подпортил - вот оно и не ставилось.
    Да я перерыл все, как всегда - от реестра до ярлыков и ничего не нашел. Думал уже что налету что то скрипт инжектит при запуске браузера, но нет же, все примитивно - перезапись встроенных ресурсов.
    Всем спасибо=)
    Ответ написан
    Комментировать
  • Почему window.location.hash роботает не коректно?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Этого куска кода недостаточно, чтобы понять что у Вас там происходит. Неясно кто такой load(), где вызывается getContent.
    Раз рекурсия появляется при window.location.hash, то может вы где то навесили обработчик на hashchange, а в нем опять присваиваете hash значение. Нужно тогда проверять перед присваиванием:
    if( window.location.hash != pages) window.location.hash = pages;
    Ответ написан
  • Как сделать XMLHttpRequest на другой домен?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Ответ написан
    Комментировать
  • Почему перегружает страницу через раз?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Особо не вникал, но что бросилось сразу в глаза - Вы везде сначала отсылаете запрос, потом вешаете обработчик, что не есть хорошо.
    xmlhttp.onreadystatechange=function(){}
            xmlhttp.send("id="+id+"&hash="+hash);


    И желательно привести все ответы к JSON- у Вас где JSON где просто число в ответе, тоже не есть хорошо.
    Хотя бы к
    {"success":"true","data":{}}//ok
    {"success:"false","error":{"code":1,"message":"bla"}//error
    //success- избыточен, но есть на него идейные любители


    Ну и если на то пошло - не "подщёта" а подсчёта=)
    Ответ написан
  • Можно ли на кнопке like в вк имитировать клик через js?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Если под "кнопкой" Вы понимаете от лица пользователя вк скрытно поставить лайк через свой сайт - то нельзя, только через вк api с авторизацией пользователя.
    Ответ написан
    Комментировать
  • Как быть, если я хочу поставить в прототип Объекта Элемент?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Можете время не терять - с DOM элементами такое наследование не будет работать. Если пытаетесь создать свой элемент на базе стандартных - то только через document.registerElement и то только в новых браузерах.
    Ответ написан
    Комментировать
  • Как с помощью JS найти подстроку в строке и обрамить ее тэгом?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    function replaceWord(str,index,tag){
           return str.substr(0,index)+str.substr(index).replace(/\w+/,"<"+tag+">$&</"+tag+">");
       }
    
           console.log(replaceWord("Hello World!",6,"strong"));

    Для поиска в русском тексте
    function replaceWord(str,index,tag){
           return str.substr(0,index)+str.substr(index).replace(/[_0-9a-zA-Zа-яёА-ЯЁ]+/,"<"+tag+">$&</"+tag+">");
       }
    
           console.log(replaceWord("Привет Мир!!",7,"strong"));
           console.log(replaceWord("Функция — это самый мощный инструмент для замены, какой только может быть.",14,"strong"));
    //Привет <strong>Мир</strong>!!
    //Функция — это <strong>самый</strong> мощный инструмент для замены, какой только может быть.
    Ответ написан
  • Каковы преимущества использования .call() при вызове [].slice.call( [1, 2, 3] )?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    через call вызывают когда надо slice вызывать на не массиве, а на том что на него по структуре похоже -перечисляемом объекте... . Вообщем методы массива можно вызвать на любом объекте, у которого есть свойство length , ну и свойства с числовыми ключами...

    var likeArrayObject = {
                       0: "a",
                       1: "b",
                       2: "c",
                       3: "d",
                       4: "e",
                       length: 5
                   },
    
                   arr = Array.prototype.slice.call(likeArrayObject, 1, 4); //теперь это массив
                   console.log(likeArrayObject);
                   console.log(arr);
    Ответ написан
    Комментировать
  • Как отследить выполнение setTimeout?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Так? Или что там надо...
    function getData(url, callback) {
               var RESPONSES = {
                   '/countries': [
                       {name: 'Cameroon', continent: 'Africa'},
                       {name :'Fiji Islands', continent: 'Oceania'},
                       {name: 'Guatemala', continent: 'North America'},
                       {name: 'Japan', continent: 'Asia'},
                       {name: 'Yugoslavia', continent: 'Europe'},
                       {name: 'Tanzania', continent: 'Africa'}
                   ],
                   '/cities': [
                       {name: 'Bamenda', country: 'Cameroon'},
                       {name: 'Suva', country: 'Fiji Islands'},
                       {name: 'Quetzaltenango', country: 'Guatemala'},
                       {name: 'Osaka', country: 'Japan'},
                       {name: 'Subotica', country: 'Yugoslavia'},
                       {name: 'Zanzibar', country: 'Tanzania'},
                   ],
                   '/populations': [
                       {count: 138000, name: 'Bamenda'},
                       {count: 77366, name: 'Suva'},
                       {count: 90801, name: 'Quetzaltenango'},
                       {count: 2595674, name: 'Osaka'},
                       {count: 100386, name: 'Subotica'},
                       {count: 157634, name: 'Zanzibar'}
                   ]
               };
    
               setTimeout(function () {
                   var result = RESPONSES[url];
                   if (!result) {
                       return callback('Unknown url');
                   }
    
                   callback(null, result);
               }, Math.round(Math.random * 1000));
           }
    
           /**
            * Ваши изменения ниже
            */
           
           var requests = ['/countries', '/cities', '/populations'];
           var responses = {}; //, counter=0;
    
           for (var i = 0; i < 3; i++) {
               var _request = requests[i];
    
               var callback = function(request){
                   return function (error, result) {
    
                       responses[request] = result;
    
                       var i, j;
    
                       if (Object.keys(responses).length == 3) { //or counter++==3
                           var c = [], cc = [], p = 0;
    
                           for (i = 0; i < responses['/countries'].length; i++) {
                               if (responses['/countries'][i].continent === 'Africa') {
                                   c.push(responses['/countries'][i].name);
                               }
                           }
    
                           for (i = 0; i < responses['/cities'].length; i++) {
                               for (j = 0; j < c.length; j++) {
                                   if (responses['/cities'][i].country === c[j]) {
                                       cc.push(responses['/cities'][i].name);
                                   }
                               }
                           }
    
                           for (i = 0; i < responses['/populations'].length; i++) {
                               for (j = 0; j < cc.length; j++) {
                                   if (responses['/populations'][i].name === cc[j]) {
                                       p += responses['/populations'][i].count;
                                   }
                               }
                           }
    
                           console.log('Total population in African cities: ' + p);
                       }
                   }
               }(_request);
    
    
               getData(_request, callback);
           }


    Вообще такие задачи красиво решаются с Promise.all - сам код подсчета не писал

    var requests = ['/countries', '/cities', '/populations'];
           var responses = {};
    
           function load(request){
               return new Promise(function(resolve,reject){
                   getData(request,function(error, result){
                        if(!error){
                            resolve(result);
                        }else{
                            reject (error);
                        }
                   })
               });
           }
    
           function getPopulation(state){
    
               return Promise.all(requests.map(function(request){
                   return load(request);
               })).then(function(data){
                   //console.log(arguments);
                   var countries=data[0],
                       cities=data[1],
                       populations=data[2],
                       result;
    
                   console.log(countries,cities,populations);
    
                   //calc here for state
    
                   return result;
    
               },function(error){
                   console.warn("Data error",error);
               });
           }
    
           getPopulation("Africa").then(console.log);
    Ответ написан