Ответы пользователя по тегу JavaScript
  • Reactjs плагины и requirejs, как?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Не переписывать же плагины, верно? Кто как с этим борется?


    Использую TypeScript и Visual Studio. Итоговый JavaScript сам собирается в нужном виде, достаточно выбрать систему модулей в свойствах проекта.

    Но с некоторыми библиотеками React в AMD возникали проблемы. И да, единственным решением было внесение изменений в код этих компонентов, что не очень хорошо и не факт, что можно будет отделаться парой простых изменений.

    В итоге пришлось использовать Webpack. Опыт работы с RequireJS сильно усложнил миграцию и в какие-то моменты я даже пытался прикрутить RequireJS в Webpack :-) Так что про RequireJS лучше полностью забыть.

    Реализация с Webpack мне нравится больше, но настроек придется написать много и иногда все это дело глючит. С использованием загрузчиков, на выходе можно получить все что угодно из чего угодно.
    Ответ написан
    Комментировать
  • Стоит ли сразу учить TypeScript не зная javascript?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Нет, учить TypeScript до JavaScript - плохая идея. Это все равно что учить слова, не изучив алфавит.

    Лучше заняться JavaScript, чтобы иметь представление об особенностях работы этого языка, о подводных камнях, с которыми придется столкнуться.

    TypeScript облегчит процесс написания кода, позволит избежать опечаток и синтаксических ошибок, поможет лучше организовать структуру кода. Однако если не учитывать JavaScript, то на выходе может получиться большой объем кода с множеством логических ошибок.

    Впрочем, можно использовать их вместе. Но JavaScript уделять больше внимания.

    TypeScript после JavaScript в общем-то и не нужно учить, только особенности языка освоить. Любой программист JavaScript уже и так знает TypeScript, даже если не слышал о последнем. А вот в обратную сторону будет сложнее.
    Ответ написан
    Комментировать
  • Кнопка поделиться в соц сетях для каждой записи?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Share42 - неплохой готовый скрипт.

    <h2>Запись #1</h2>
    <div class="share42init" 
      data-url="http://ссылка на запись" 
      data-title="Заголовок записи" 
      data-description="Описание записи">
    </div>
    
    <h2>Запись #2</h2>
    <div class="share42init" 
      data-url="http://ссылка на запись 2"
      data-title="Заголовок записи 2">
    </div>
    
    <h2>Запись #3</h2>
    <div class="share42init" 
      data-url="http://ссылка на запись 3" 
      data-title="Заголовок записи 3">
    </div>
    
    <script type="text/javascript" src="http://site.name/share42/share42.js"></script>
    Ответ написан
    Комментировать
  • Как настроить работу linkedin api на локальном сервере?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    LinkedIn вполне нормально поддерживает работу с localhost, в том числе допустимы адреса с указанием номера порта. У себя подобных ошибок не наблюдаю, даже с OAuth 1.0a.

    OAuth v1.0 адово сложный. Ко всему прочему уже давно устаревший и скорее всего в будущем будет отключен. Лучше использовать вторую версию.

    Сообщение об ошибке странное, прям как в окне консоли браузера :-) Если проблема в работе сайта, то можно попробовать кеш обновить, антивирус пнуть или браузер поменять (отключить какие-нибудь расширения).

    Как вариант, можно использовать промежуточный сервер с нормальным доменом, который перенаправит все куда нужно. Пример можно посмотреть тут (в коде страницы).
    Ответ написан
    4 комментария
  • Как защитить HTML5 игры?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Flash можно же декомпилировать, так что уповать на то, что исходный код будет защищен, не стоит.

    Пишите код, патентуйте, отслеживайте и судитесь с нарушителями.

    Основной функционал можно вывести на сервер, чтобы клиентская часть была бесполезной.

    Клиентский код можно сделать плохочитаемым, обфусцировать.
    Ответ написан
    Комментировать
  • Почему не отображаются Я.Карты?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Переменная coord - строка:

    var coord = "<?=$data['coords'];?>";

    В center ожидается массив, но передается строка, как элемент массива:

    var myMap = new ymaps.Map('map', {
      center: [coord],
      zoom: 9,
      controls: ['zoomControl']
    });

    Можно сделать split по запятой:

    var coord = "58.6103,49.6917".split(',');
    // var coord = "<?=$data['coords'];?>".split(',');


    И передавать coord как есть:
    var myMap = new ymaps.Map('map', {
            center: coord,
            zoom: 9,
            controls: ['zoomControl']
    });

    Посмотреть пример.

    Или сразу, в скрипт передавать массив, а не строку:

    var coord = [<?=$data['coords']?>];
    Ответ написан
    1 комментарий
  • Вчера работал jQuery, cегодня нет. Поможете разобраться?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Дело в коде, размещенного в переменной $js:
    $(document).ready(function(){
      $(".debug_loginbutton").click(function(){
        $("#div_debug_loginbutton").css("display": "none");
        $("#a_load").css("display": "block");
        $("#content").load("ajax/login");
      })
    })

    Неправильный разделитель:
    $("#div_debug_loginbutton").css("display": "none");
    $("#a_load").css("display": "block");

    Запятая должна быть:

    $("#div_debug_loginbutton").css("display", "none");
    $("#a_load").css("display", "block");

    Выявил за несколько секунд методом тупого исключения, о котором писал в комментариях выше :-)

    На правах рекламы:
    Метод тупого исключения - надежный метод поиска ошибок в коде, особенно вечером, когда глаза не видят, мозг не думает, а отладчик не работает или его вообще нет. Воспользуйся методом тупого исключения сейчас и получи дополнительное время в подарок!
    Ответ написан
  • Как правильнее вставить в JS код длинный блок html кода?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Проще сделать этот блок невидимым и показывать после выполнения авторизации пользователя.
    if (answ.error == 0) {
      $('#кнопкаВхода').hide();
      $('#home-button').show();
    }

    Ну или ответом на AJAX может быть HTML :-) Но вариант с изначально существующим блоком лучше, т.к. он (блок) все равно будет на странице.
    Ответ написан
    5 комментариев
  • Как добавить контент в tbody таблицы с известным ID на JQuery?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    При условии:
    <table id="messages">
    <tbody></tbody>
    </table>

    будет:

    $('table#messages tbody').append('<tr><td>test</td></tr>');

    или

    $('table#messages>tbody').append('<tr><td>test</td></tr>');

    или

    $('tbody', 'table#messages').append('<tr><td>test</td></tr>');
    Ответ написан
    1 комментарий
  • Как отсортировать элементы по атрибуту?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Пример с использованием jQuery:
    $('li[sort]').sort(function (a, b) {
      return parseInt($(a).attr('sort'), 10) < parseInt($(b).attr('sort'), 10) ? -1: 1;
    }).appendTo('ul');

    Посмотреть результат.

    И да, для пользовательских атрибутов лучше использовать префикс data-, чтобы все соответствовало стандартам :-)

    Вот еще пример, с изменением направления сортировки.
    Ответ написан
    Комментировать
  • Как получить выполняемые запросы в браузере?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Запомнить, какие запросы были отправлены, и проверять:
    var requests = [];
    requests.push($.ajax({type: 'GET', url: '/echo/json/'}));
    requests.push($.ajax({type: 'GET', url: '/echo/json/'}));
    requests.push($.ajax({type: 'GET', url: '/echo/json/'}));
    requests.push($.ajax({type: 'GET', url: '/echo/json/'}));
    requests.push($.ajax({type: 'GET', url: '/echo/json/'}));
    
    console.log(requests);
    
    function Test(){
        $.each(requests, function(i, req){
            if(req.readyState == 0 || req.readyState == 4){
                console.log(req.status + ': ' + req.statusText);        
            }else{
                console.log(req.readyState);        
            }
        });
    }
    
    Test();
    
    window.setTimeout(Test, 3000);

    Посмотреть пример.
    Можно удалять запросы из коллекции по завершению их выполнения.
    Ответ написан
    2 комментария
  • Как сделать, чтобы внутренние страницы сайта открывались в определенной позиции?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Проще разместить якоря и переходить к ним (браузер сам переместит страницу к якорю):
    <h1 id="перейтиСюда">Заголовок</h1>
    ...
    <h1 id="илиСюда">Заголовок 2</h1>

    http://example.org/#перейтиСюда
    http://example.org/#илиСюда
    http://example.org/#idЭлементаНаСтранице
    Ответ написан
    6 комментариев
  • Какая кодировка подойдёт для get запроса (замена base64)?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    var result = encodeURIComponent('кодированный текст here');
    alert(result);
    alert(decodeURIComponent(result));

    Посмотреть пример.

    Вариант с base64:
    var result = $.base64.encode(encodeURIComponent("вот такой вот метод кодирования\nраз, два, три!"));
    result = result.replace(/[\+]{1}/g, '@').replace(/[\=]{1}/g, '~').replace(/[\/]{1}/g, '$');
    console.log(result);
    
    result = result.replace(/[\@]{1}/g, '+').replace(/[\~]{1}/g, '=').replace(/[\$]{1}/g, '/');
    console.log(result)
    console.log(decodeURIComponent($.base64.decode(result)));

    Результат:
    Измененный вид Base64:
    JUQwJUIyJUQwJUJFJUQxJTgyJTIwJUQxJTgyJUQwJUIwJUQwJUJBJUQwJUJFJUQwJUI5JTIwJUQwJUIyJUQwJUJFJUQxJTgyJTIwJUQwJUJDJUQwJUI1JUQxJTgyJUQwJUJFJUQwJUI0JTIwJUQwJUJBJUQwJUJFJUQwJUI0JUQwJUI4JUQxJTgwJUQwJUJFJUQwJUIyJUQwJUIwJUQwJUJEJUQwJUI4JUQxJThGJTBBJUQxJTgwJUQwJUIwJUQwJUI3JTJDJTIwJUQwJUI0JUQwJUIyJUQwJUIwJTJDJTIwJUQxJTgyJUQxJTgwJUQwJUI4IQ~~
    
    Возвращаем нормальный вид Base64:
    JUQwJUIyJUQwJUJFJUQxJTgyJTIwJUQxJTgyJUQwJUIwJUQwJUJBJUQwJUJFJUQwJUI5JTIwJUQwJUIyJUQwJUJFJUQxJTgyJTIwJUQwJUJDJUQwJUI1JUQxJTgyJUQwJUJFJUQwJUI0JTIwJUQwJUJBJUQwJUJFJUQwJUI0JUQwJUI4JUQxJTgwJUQwJUJFJUQwJUIyJUQwJUIwJUQwJUJEJUQwJUI4JUQxJThGJTBBJUQxJTgwJUQwJUIwJUQwJUI3JTJDJTIwJUQwJUI0JUQwJUIyJUQwJUIwJTJDJTIwJUQxJTgyJUQxJTgwJUQwJUI4IQ==
    
    Декодируем Base64:
    вот такой вот метод кодирования
    раз, два, три!

    Посмотреть пример.

    С кодировками текста не стал разбираться, просто сделал encodeURIComponent/decodeURIComponent. Проблему с кодировками, в принципе, можно решить более человеческим способом, если это необходимо и есть желание :-)
    Ответ написан
    5 комментариев
  • Как воспользоваться zeroclipboard?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Довольно капризная штука. Сколько раз сталкивался, постоянно какие-то проблемы.

    <div class="main-body">
    	<div class="result">
    		<div id="source">Скопируй меня, если не боишься!</div>
    	</div>
    	<button id="ButtonCopy">Копировать</button>
    </div>
    
    <script src="ZeroClipboard.min.js" type="text/javascript"></script>
    
    
    <script type="text/javascript">
    	var CopyText = document.getElementById('source').innerHTML;
    	var clip = new ZeroClipboard(document.getElementById('ButtonCopy'), { moviePath: 'ZeroClipboard.swf' });
    
    	clip.on('mousedown', function (client) {
    		client.setText(CopyText);
    	});
    
    	clip.on('complete', function (client, args) {
    		alert('Текст: "' + args.text + '" успешно помещен в буфер обмана!');
    	});
    
    	clip.on('noflash', function (client) {
    		alert("А <s>компот</s> Flash?");
    	});
    </script>


    Если просто в браузере открыть, может не сработать. Нужно с localhost или с сайта смотреть.

    Вот пример, у меня работает.
    Ответ написан
    1 комментарий
  • JQuery. Поиск элемента и получение данных в массиве?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    function GetCategoryByArt(art){
        var result = $.grep(arr, function(cat){
            return $.grep(cat.products, function(product){
                return product.art == art;
            }).length > 0;
        });
        return result.length > 0 ? result[0] : null;
    }
    
    function GetProductByArt(art){
        var result = null;
        $.each(arr, function(i, cat){
            $.each(cat.products, function(j, product){
                if(product.art == art)
                {
                    result = product;
                    return;
                }
            });
            if(result){ return; }
        });
        return result;
    }
    
    alert(GetCategoryByArt("3").title);
    alert(GetProductByArt("3").prodname);

    jsfiddle.net/alekseynemiro/pafthz0h
    Ответ написан
    Комментировать
  • Как сделать переход в jquery autocomplette?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Обрабатывать события change, select и close. Использовать дополнительный атрибут, который будет содержать признак выбранности значения из списка:
    $( "#tags" ).autocomplete({
          source: availableTags,
          change: function(){
            $(this).attr('data-select', $(this).val() != '');
          },
          select: function(){
            $(this).attr('data-select', true);
          },
          close: function(){
            if($(this).attr('data-select')!='true'){
              $(this).val('');
            }
          }
    });

    Посмотреть, как это работает.

    Если понадобится использование autocomplete жестко, чтобы пользователь мог выбирать только из списка, то можно добавить дополнительный обработчик change текстовому полю и удалять введенные данные, если они не были выбраны из списка:
    $( "#tags" ).change(function(){
        if($(this).attr('data-select')!='true'){
          $(this).val('');
        }
    });

    Посмотреть на работу можно тут.
    Ответ написан
    Комментировать
  • Как закреплять основы javascript на практике?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    1. Еще несколько раз пройтись по теории, а потом думать, что делать дальше.

    Если есть желание стать Доктором JavaScriptовских наук, или писать статьи по этой теме :)

    3. Выполнять практические задачи.

    Да, и только так. Без практики смысла от теоретических знаний не будет никакого. Существует множество тонкостей, которые в теории не учитываются. Тем более мир меняется не по дням, а по секундам!

    Лично я предпочитаю 3 вариант, но не знаю, где именно брать эти задачи.

    Самостоятельно ставить и решать. Например, сделать свой framework, или свой framework для другого framework :) Без шуток, будет хорошая практика, даже если ничего не выйдет.

    Игры можно попробовать делать, тоже неплохая будет практика. Начать с какой-нибудь игры типа: угадай пару, ну или мелодию, в крайнем случае слово :) Если что-то получится, можно разместить в каком-нибудь ВКонтакте, а там и более тесно интегрироваться, тоже полезное дело.

    При разработке сайтов можно поиграть с созданием всякого рода менюшек, деревьев. Поработать с асинхронными запросами.

    Главное чтобы это было самому интересно и приятно делать. Если пытаться через не хочу, то результатов придется ждать долго и не факт, что они будут.
    Ответ написан
    4 комментария
  • Как оптимизировать изменение DOM (отложенное изменение)?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    var toRemove = '';
    
    $.each(data, function (k, v) {    
       if(toRemove!='')toRemove+=',';
       toRemove += '#block_' + v;
    });
    
    $(toRemove).remove();

    Хотя внутри все равно будет примерно то, что было в исходной задаче. (это просто предположение, факты не проверял)

    Можно удалять не по id, а по class или каким-нибудь атрибутам. Будет красивее.

    $('.removeme').remove();

    или

    // удалить все div-ы из родителя
    $('div', '#родитель').remove();

    --------------------------------------------------
    Ответ написан
    2 комментария
  • Обучение по видео урокам. В чем фишка?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Вот помню, в наше время даже книжек порой не было и как-то умудрялись учиться :-)
    С интернетом тоже были проблемы. Удивительные были времена.

    Некоторые вещи лучше один раз увидеть (показать), чем сто раз услышать (рассказать).

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

    Хороший видеоурок сделать сложнее, чем написать статью или книгу. На это необходима уйма времени. Ошибки и недочеты трудно, или невозможно, исправить. Со всеми вытекающими из этого последствиями для зрителей.

    Так что учиться эффективно только на одних видео-уроках не получится.

    В видео можно показать основы. Причем чем меньше информации, тем меньше будет допущено ошибок и проще будет урок (технически реализуем и для восприятия пользователями). А все тонкости темы урока зритель должен изучать самостоятельно, читая статьи и книги.
    Ответ написан
    Комментировать
  • Как создать кнопку которая будет копировать текст с строки ввода и вставлять в много других строк?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    С использование jQuery можно вот так: jsfiddle.net/alekseynemiro/a4e522w4

    $('#btn').click(function(){
      $('[name="product_description[3][meta_keyword]"],[name="product_tag[3]"]').val($('[name="product_description[3][name]"]').val());
    });

    [name="имя элемента управления"] в данном случае указано два элемента, через запятую, у которых будет изменено значение:
    [name="product_description[3][meta_keyword]"],[name="product_tag[3]"]

    $('[name="product_description[3][name]"]').val() - из какого элемента взять значение.
    Ответ написан