Ответы пользователя по тегу JavaScript
  • Почему при присвоении значения переменной «1» переменной «2», переменная «2» заменяется на «1»?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Когда вы присваиваете объект, вы присваиваете ссылку на объект, а не делаете его копию. А потом переписываете поля самого emptyOrder, через ссылку на emptyOrder в session[ID].order. Нужно делать копию данных...

    session[ID] = session[ID] || {
    log: [PathTmpl.main_menu],
    inline_log: '',
    name: ctx.from.first_name,
    last_name: ctx.from.last_name,
    auth: 'new',
    admin: false,
    orders: [],
    phone: '',
    delivery: emptyAdress,
    order: Object.assign({}, emptyOrder)
    }

    P.S. Не забудьте подключить полифил для Object.assign или пользуйтесь аналогичным методом фреймворка.
    Ответ написан
  • Как понять замыкания, а в частности, присвоения вида fn = function()?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Все просто. В замыкании и не замыкании нет разницы для интерпретатора - это не исключительная ситуация.
    Нужно понять: замыкание это алгоритм, а не конструкция как например цикл или функция!!!

    Функция createCounter() - возвращает анонимную функцию.
    В анонимной функции используется переменная createCounter.

    При просто вызове createCounter()(); :
    createCounter() - инициализирует переменную (три раза) и возвратит анонимную функцию.
    И три раза происходит вызов анонимной функции - вторые ().
    После каждого из трех вызовов переменная numberOfCalls созданная при вызове createCounter уже не нужна.
    Анонимная функция больше не будет использована в этом контексте.
    В итоге функция и замкнутая переменная три раза попадают в уборщик мусора.

    При Сохранении анонимной функции в переменную:
    Во-первых: numberOfCalls будет инициализирована только один раз, при записи fn = createCounter().
    Где контекст анонимной функции записывается в переменную fn.
    Во-вторых: так как контекст вызова сохранен, то замкнутая переменная и анонимная функция останутся лежать в нем.
    В-третьих: при каждом вызове анонимной функции в сохраненном контексте переменная будет увеличиваться так как старое значение не инициализировано и не выброшено.

    var fn = createCounter();
    
    fn();
    fn();
    alert(fn())  // =3
    fn = createCounter();
    fn();
    alert(fn())  // =2
    Ответ написан
    1 комментарий
  • Как сделать плавное удаление класса?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    jquery UI

    $( "#effect" ).removeClass( "newClass", 1000, callback );


    Если без jQuery.
    То просто поставьте в блоке и в классе
    transion: all...
    Но тогда работать будет не все. Например display:none; сразу спрячет блок.
    Ответ написан
    Комментировать
  • Почему не коректно работает код?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    result.push(maxElement); нужно поставить после внутреннего цикла.

    У вас каждый раз когда срабатывает условие (maxElement < arr[i][j]) в результат вносится maxElement. Должно быть так:

    function largestOfFour(arr) {
        let result = [];
        for (let i = 0; i < arr.length; i++) {
            let maxElement = arr[i][0];
            for (let j = 0; j < arr[i].length; j++) {
                if (maxElement < arr[i][j]) {
                    maxElement = arr[i][j];
                }
            }
            result.push(maxElement);
        }
        return result;
    }
    Ответ написан
    Комментировать
  • Как найти символы с помощью регулярного выражения?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    /[A-Z\d]{20}/
    Ответ написан
    Комментировать
  • Кто знает плагин (желательно на ванильном JS) кастомного горизонтального скролла с функцией Drag Mouse?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Dragon

    Просто повесь на галерею class="dragon" и подключи скрипт на страницу. Правда он jQuery, а не ванильный.
    Ответ написан
  • Как реализовать Drag?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Подключаешь Dragon на страницу.
    И class="dragon" на content.
    Ответ написан
    Комментировать
  • Как убрать плавающую точку?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Используй хаккерский прием - "целые дробные".
    Возьми изначально cnt умноженное на 10000, и сохраняй все числа челыми.
    Прибавляй в целых числах, не пользуйся дробными.
    Дели обратно на 10000 только при выводе, тогда не будет разницы даже если сконвертит не правильно.
    Ну и сравнивай естественно с умноженным на 10000 целым значением.

    P.S. А ещё лучше вместо умножения сделай сдвиг "<<" на n разрядов. И вместо деления двигай обратно ">>" при выводе.

    var cnt = getCoookie('timer');
    ...
    var timer = setInterval( function() {
    cnt += 10;   // cnt += 0.0001
    ...
    if ( cnt >= 10152501 ) ...
    }
    Ответ написан
    Комментировать
  • Серверная часть под Bootstrap?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Обьясню популярно.
    Вашу ситуациию можно стравнить с рабочим строителем - он никогда не поймет архитектора.

    1-10 левел. HTML5 + CSS5 вообще не програмирование, это пасивные сущности. BOOTSTRAP это даже не сущность, это набор патернов - не более. Если вы выучили набор патернов, но не понимаете как работает HTML и CSS, вы помощник дизайнера/верстальщика. Фактически Вы чернорабочий - научились держать лопату, рыть канавы и перекидать мешки с места на место, без вреда для здоровья.

    10-30 левел. Изучив HTML и CSS на таком уровне, что понимаете как изменяя CSS придать правильный вид любой разметке. Учится здесь довольно быстро 1 годик, и 1 год опыта.
    Теперь: Вы фактически научились забивать гвозди, и выставлять доски по уровню.

    30-70 левел. JS, PHP, Node.js - уже програмирование. Там совсем другая парадигма. И начинать нужно с парадигмы програмирования. Понять что такое переменные, циклы, условия. Изучить алгоритмы, Обьектную модель, наследование, чэйнинг..., изучить серверные фреймворки Yii, Simphony, WP и т.д. Здесь быстрых результатов не ждать!!!, учится лет 5 и года 3 опыта в програмировании.
    Теперь ваш уровень соответствует специалисту по прокладке инженерных сетей - сантехнику, электрику.

    70-80 левел. Изучив сетевые протоколы, структуру серверов, архитектуру програмного обеспечения, серверные языки програмированя, взаимодействие инфраструктур и много чего ещё, вы только тогда станете Фулстак разработчиком (и в итоге архитектором програмного обеспечения 80 уровня). Но учится на рахитектора минимум 10 лет и еще 5 лет опыта в проектировании ПО.

    P.S. На вашем уровне, Вам подойдет например делать контен на готовых конструкторах WIX или CMS Wordpress. Сдесь много знаний не надо, надо научится регить домен, покупать хостинг, устанавливать в панели хостинга нужную CMS. И самое малое изучить саму CMS.
    Ответ написан
    5 комментариев
  • Почему после сохранения узла html в localStorage его невозможно вставить на страницу?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Узел это не код, это обьект.
    Исходный код в виде строки хранится в свойстве этого обьекта innerHTML.
    Сохрани свойство, и восстанавливай в свойство.

    var copydiv = document.getElementById('top-lighthouse').innerHTML;
    
        localStorage['localMem'] = copydiv;
        copydiv = localStorage['localMem'];
    
       /*  document.body.insertBefore( copydiv, document.body.firstChild ). не годится*/
        document.body.firstChild.innerHTML = copydiv;
    Ответ написан
    Комментировать
  • Как читается решение данной задачи?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Ошибка
    var loc1 - findCarInLot(fiat2) ;   // Результат SyntaxError: Unexpected token -
    var loc2 - findCarInLot(taxi) ;    // Результат SyntaxError: Unexpected token -
    var loc3 - findCarInLot(chevy) ; // Результат SyntaxError: Unexpected token -
    var loc4 - findCarInLot(fiat1) ;   // Результат SyntaxError: Unexpected token -


    Потому-что в место "-" должно стоять "=".

    А вообще функция строго сравнивает обьекты и выдает индекс Элемента в масиве. Но так делать плохо - медленно, так как сравниваются все поля обьектов.

    Потрудитесь на этапе проектирования, и поменяйте архитектуру того куска, который пользуется этой функцией, и избавитесь от перебора масива. Например: можно прописать в масиве ключи соотвествующие уникальному атрибуту обьектов, и просто выбирать из масива по этому атрибуту.
    var data = {
    'chevy' : {  id : 'id0',  make : "Chevy" ,  model : "Bel Air" },
    'taxi' : {  id : 'id1' , make : "Webville Motors" ,  model : "Taxi" },
    'fiat1' : { id : 'id2', make : "fiat" ,  model : "500" },
    'fiat2' : {  id : 'id3',  make : "fiat" ,  model : "500" }
    } ;
    var a = data['fiat1'];
    
    var lot = { 'id0':'2' , 'id1':'0' , 'id2':'1' , 'id3':'3'} ;    // здесь ключи стоответсвуют id, а значения порядку в lot.
    lot[ data['chevy'].id ];  // =>2
    lot[ a.id ]; // => 1
    lot[ data['taxi'].id ]; //=> 0
    Ответ написан
  • Как вернуться к нужной позиции на странице при нажатии кнопки Назад?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Делается просто:

    По событию onscroll пишем в localStorage.scrollTop заначение скрола.
    По событию onload читаем из localStorage.scrollTop и устанавливаем позицию scrollTop у элемента с главным скролом.

    selector = 'body';   /* <--- cюда положи селетор на элемент с основным скролом */
    $('document').on('load', function(){ $(selector).attr('scrollTop', localStorage.scrollTop); }
    $(selector).on('scroll', function(){ localStorage.scrollTop = $(selector).attr('scrollTop'); }


    P.S. Для юзабельности, обязятельно должен быть элемент перемещающий на начало страницы.
    Ответ написан
    3 комментария
  • Что лучше — общий всё-в-одном style.css или несколько файлов .css?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    С переходом на протокол HTTP2 держать файлы раздельно даже на сервере будет лучше. Не будет разницы, ибо пакетироваться они будут на уровне протокола.

    Но даже сейчас лучше разделить стили блочной разметки от украшательств и грузить их раздельно. Подключать media queries CSS, не в CSS а в HTML отдельными файлами, указанием атрибута media:
    <link rel="stylesheet" media="all and (min-color-index: 256)" href="..." />


    А ещё лучше, подключать с каждой страницей только те стили, которые на ней используются :)

    Чтобы это можно было сделать, верстальщик должен сделать раздельные сборки:
    • Стартовую таблицу стилей которая грузится на всех страницах. Сюда входят: сброс браузеров, хеадер, футер (если он fixed внизу видимого), стили видимого при загрузке домашней страницы. ТОЛЬКО то, что видно на самом большом экране без элементов которые появляются во время прокрутки.
    • Основную таблицу стилей для разметки страниц контента. То что входит во все страницы контента, без специфичности. Ну и не фиксированный футер тот, что после контента. Эти стили должны быть загружены уже после загрузки основного контента.
    • Специфичные стили для отдельных страниц. Эти грузятся отдельно на каждой странице свои стили и по надобности объединяются с Основной разметкой контента.
    • Таблица стилей форм. Все формы на сайте должны грузится с одной таблицы. А не быть специфичными для разных страниц. Формы это не контент!!! У форм ОБЯЗАТЕЛЬНО должна быть отдельная таблица стилей. Она подключается при включении формы генератором форм на бекенде. Даже строка поиска в хедере. Все элементы input, textarea, option должны быть описаны в отдельной таблице стилей. Эти стили объединяются с основной или стартовой таблицей как будет надо.


    P.S. Уточню по Основной таблице стилей фактически сборок должно быть минимум 6 (мобильная, планшетная, малая, средняя, ретина, печатная).
    Верстка ВСЕГДА должна быть мобайлфёрст. И сновная таблица должна быть на мобильной версии сайта. А потом ёё расширять и естественно подключать атрибутом media по надобности. Сборка в порядке возрастания сначала узкоспециализированная таблица для мобильников. Для планшетников подключается только отдельный файл с планшетной и мобильной таблицами стилей собранные в кучу. И так далее...

    P.P.S. Cборщики (gulp) собирающие в один файл, это посредственное решение в лоб грубой силой, дабы не заморачиваться.
    Ответ написан
    4 комментария
  • Как скрыть элемент?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    $('.bar').on('change', function () { /* биндим событие на изменение ползунка */
        $('.clouds').each( function() { /* выбираем все тучки и для каждой выполняем следующее */
          this.top = $('.bar').value() * this.top;  /* здесь изменяем координату как вам удбно */
        });
      } );
    Ответ написан
    Комментировать
  • Как реализовать вертикальный скролл?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Мож этот подойдет...

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

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    ['a','b','c'].reduceRight( function(p,c,i,a) { return (j={})[c] = p,j },'' )
    Ответ написан
    2 комментария
  • Почему не работает содержимое, загруженное методом load()?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    ajax.load( {url} ) - только подгружает html, js при этом не выполняется. Связано это с безобасностью.

    Для загрузки скриптов используй $.getScript().

    Смотри инструкцию

    id не могут быть одинаковые!!!
    <img src="01.png" id="user_new_image1" class="user_new_image arcticmodal-close">
    <img src="02.png" id="user_new_image2" class="user_new_image arcticmodal-close">


    А по событиям пробуй вешать делегированные:
    $('#user_change_image_window').on('click','.user_new_image',function() { ... });
    Ответ написан
    Комментировать
  • Не работает Handlebars. Что не так делаю?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Попробуй выложить темплейт из результирующего блока.

    <script id="objects" type="text/x-handlebars-template">
    {{#each objects}}
    <h3>{{title}}</h3>
     <p>{{description}}
    <a href="{{link}}">Ссылка</a>
    </p>
    {{/each}}
     </script>
    
    <div class="hand">
    
    </div>


    А в варианте с AJAX
    $(document).ready(function () {
        
        var hand = $('.hand');
        
    $.ajax({
        url: 'data.json' 
    }).done(function(data){
        var json = JSON.parse(data),
            source = $("#objects").html(),
            template = Handlebars.compile(source),
            html = template(json);
        
        $('.hand').append( html );             //-- было template(data)
    })
    });
    Ответ написан
    Комментировать
  • Можете посоветовать микро-шаблонизатор Javascript (client-side)?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    У меня свои написаны, работают уже лет 10 (пару раз обновлял)... Ибо ничего компактного и оптимизированного не нашел... ни в то время, ни сейчас не вижу альтернатив.

    То, что понаписывали за 10 лет, универсальное и жирное как кот на маслозаводе. Да еще написано так, что если нужно шаг в сторону сделать, то ничего не получится, только по "рельсам" или "крылья поломают и дальше только с костылями"... Или написать нужно к библиотеке в 30К еще 100К кода чтобы оно заработало. Тогда как моё умещается в 10К.

    Ну не нужно мне огород 100Га вокруг городить, пусть вольница будет.
    Ответ написан
    5 комментариев