Perlover's Blog » javascript

Несколько полезных jQuery модулей от Odyniec

Perlover — Tue, 27 Sep 2011 11:02:12 +0000

Сегодня посмотрел страничку одного разработчика по ник — имени Odyniec. Очень понравились его разработки. Спешу поделиться с вами

imgAreaSelect — jQuery плугин для кропинга (cropping images) картинок (точнее, выделение области — кропинг делайте сами ) — (пример)
imgZoom — Красивое листание картинок с анимацией, ротацией и приближением из далека (пример)
selectList — мультивыборочный select лист, показывающий выбранные опции отдельно с возможностью легкого их удаления (пример)

Также, автор написал несколько полезных статей по CSS (как создать «деревья», «табы»)

Также, автор написал несколько модулей на perl для Dancer (его сайт также работает под Dancer): Dancer::Plugin::DebugToolbar, Dancer::Plugin::DirectoryView

Массивы JavaScript, Internet Explorer и запятые

Perlover — Thu, 10 Feb 2011 13:53:06 +0000

Заметил такую особенность — если описывать массив как

var array = [
elem1,
elem2,
elem3,
];

То в Firefox и Google Chrome — он будет иметь 3 элемента, а в Internet Explorer (тестировалось в 8-ой версии) — 4 элемента, причем 4-ый будет null.

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

Оказывается, такой стиль имеет скрытую угрозу — ошибки, когда «прогулка» по массиву дает null элемент, тогда как такой программист предполагал, что будет три элемента и все — не null. Вообщем, программеры JavaScript — остерегайтесь

На последок — тестовый HTML файл (сохраните код и откройте в броузере) — проверьте сами, что выдают броузеры

Опять Cookies, только теперь Google Chrome

Perlover — Tue, 08 Feb 2011 18:12:03 +0000

Не успел написать программу, как опять наткнулся на неприятность, точнее, на баг. Смысл его в том, что Google Chrome некорректно ставит в JavaScript свойство document.cookie, если кука пришла от сайта с quoted path, то есть, если пришла такая:

Set-Cookie: session=session_ID; path="/"

Дело в том, что путь, заключенный в кавычки — правило, определенное самим RFC 2109 (пункт 4.1). Firefox это обрабатывает корректно, а Google Chrome — глючит. То есть, чтобы в JavaScript от Chrome считывать куки, нужно их выставлять через path без кавычек. Но в любом случае, это некорректно, поэтому отписал об этом на их форум. Посмотрим, как они исправят это

Еще немного о Roboform и LastPass

Perlover — Fri, 31 Dec 2010 15:11:57 +0000

Написал мне недавно суппорт, что они таки устранили баг, о котором я так долго писал! Надо же… Предложили мне протестировать новую версию (7.1.2). Но я так долго ждал (реально баг есть более года, но последний штурм на саппорт я осуществлял в августе 2010), что это мне надоело, терпеть, пока Firefox тормозит и зависает на сайтах с JavaScript, что удалил я этот косячный плагин, тем более, что 7-ая версия (в которой и устранен этот баг) для пользователей 6-ой версии снова стала платной (тут кстати, если помыслить, становится понятно, почему они так тянули с исправлением и исправили во вновь ставшей платной версии…). Теперь я перешел на LastPass, почти к нему привык, и даже заплатил за Premium account. И далее, я сейчас расскажу о маленьких моих открытиях о LastPass. А Робоформ, я пожалуй, тестировать уже не буду. Если бы 7-ая версия осталась бы для купивших 6-ую — бесплатной, тогда может быть я попробовал бы вернуться обратно.

Итак, LastPass точно хранит все таки свою базу в одном файле на диске. То есть, в случае недоступности сайта LastPass, или для любителей резервировать свои пароли — доступ есть. Папка — «C:\Documents and Settings\\Local Settings\Application Data\LastPass\» и там файл с расширением sxml. Также, хорошая новость еще в том, что на сайте LastPass есть программка, которая может читать этот файл локально, без работы с интернет — LastPass Pocket. Все это — очень хорошо Также, купив Премиум аккаунт, можно использовать LastPass на мобильных устройствах. Я использую под Android. Те, кто тоже юзают Android, вот наводки — LastPass можно поставить отдельно, но тогда ходить по сайтам через его же броузер, что не очень хочется (не выключить JavaScript, не понятно, как там обновляется сам броузер и т.п..), либо можно использовать стандартный броузер через букмарклеты (закладки, вместо URL-а которых — JavaScript код — вы кликаете в закладках закладки LastPass на нужном сайте для входа и он уже вставляет в страницу сайта логин-окно). Есть и еще способ — поставить броузер Delphin и к нему расширение LastPass (самый оптимальный вариант). Но повторюсь, все это платно, но не дорого — $11 в год за аккаунт (заметьте, не за комп, не за лицензию, а за аккаунт — то есть за $11 вы можете поставить на все свои компы и мобильники). Выгода от Premium на компе тоже есть — улучшенная защита — можно защитить вход кодовой таблицей (матрица букв) — тогда заход с новых компов (IP адреса точно) будет запрашивать, помимо имени и пароля, еще буквы из таблицы. Минус такого подхода — мобильные версии не поддерживают такой таблицы. Но можно включить кодовую таблицу для компов, а для мобильников составить список разрешенных устройств через тот же аккаунт в компьютере. Но при кодовой таблице LastPass Pocket будет требовать коннекта к сайту для проверки кодов.

Вот вкратце те тонкости, которые я узнал, поработав с LastPass. С Наступающим Новым 2011 годом!

Copy Clipboard в Firefox методами JavaScript

Perlover — Sat, 12 Jun 2010 15:36:17 +0000

Если вы программер под JavaScript, вы навярняка сталкивались с такой проблемой — как реализовать копирование в буфер обмена средствами JavaScript в Firefox. С Internet Explorer все понятно — Microsoft «постаралась», чтобы все, кому не лень, могли читать и писать в буфер обмена средствами JavaScript (по правильному, это конечно же, не должен делать любой сайт — мало ли что у вас в буфере обмена на тот момент, например пароль…). А вот Firefox с его сильной защитой JavaScript, не позволяет любому сайту это делать. Как быть?

Маленький экскурс — Firefox позволяет делать копирование в буфер, но разрешает это выполнять либо в chrome приложениях (то есть установленным расширениям, или Add-ons, другими словами), либо подписанным цифровой подписью приложениям в jar архивах — но при этом, у вас в броузере должен быть установлен корневой сертификат того разработчика, кому вы доверили это делать. Поэтому, обычному сайтовому программеру, как может показаться, ничего не остается, как сгенерировать свой сертификат, попросить посетителя его скачать, а свои JavaScript скрипты упаковать в Jar архив и его подписать. При этом, конечно, при любом изменении кода надо заново будет проделывать: упаковка в Jar, подпись Jar архива (ведь код изменился, а значит и подпись надо менять)… Именно, по началу, я так и думал, и даже делал (ох и муторно это!). Но есть способ попроще и лучше, но он не такой правильный с точки зрения безопасности. Но он также, как и в случае сертификата, требует определенных действий со стороны пользователя — также, однократных (сделал и забыл). То есть, как никрути, а просто сделать сайт, который бы читал/писал в буфер Clipboard своего посетителя, не получиться — все равно потребуется участие посетителя сайта (оно и правильно — нефиг делать без спросу опасные вещи!).

Итак, все что нужно сделать пользователю сайта — однократно, и не только для вашего сайта, а в общем для всех сайтов — это разрешить броузеру «спрашивать» посетителя о том, можно ли исполнять расширенные действия такому то сайту или нет (по умолчанию — ничего не спрашивается и не исполняется). Если посетитель отвечает, что можно — броузер запоминает домен, для которого это разрешили, и затем, действует в соответствии с этим разрешением всегда. Если другой сайт захочет, например, поработать с вашим буфером обмена — броузер снова спросит вас и предупредит, но однократно для этого домена и так далее.

Итак, делаем в броузере: about:config в адресной строке, соглашаемся с предупреждением, если таковое есть и там ищем параметр signed.applets.codebase_principal_support, ставим его в true. Все! Теперь осталось написать JavaScript код, например, копирование текстового значения title ссылки в буфера обмена, например:

// Общая функция копирования - копирует текст переменной maintext в clipboard, рабоает для IE и Firefox
function copy_clip(maintext)
{
 maintext = String(maintext)
 if (window.clipboardData)
   window.clipboardData.setData("Text", maintext);
 else if (window.netscape)
  {
   try
    {
     netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
     var gClipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].
     getService(Components.interfaces.nsIClipboardHelper);
     gClipboardHelper.copyString(maintext);
    }
   catch(err)
    {
     alert ("Clipboard copying error: " + err); return false
    }
  }
 return true;
}

Затем, уже используем дополнительные функции для конкретных типов структуры DOM документа HTML:

function copyObjText(obj)
{
 copy_clip(document.all ? obj.innerText : obj.textContent)
 return false
}

function copyTitleInLink(obj)
{
 copy_clip(obj.title)
 return false
}

А теперь, если нам надо скопировать в буфер значение поля title у ссылки типа , то делаем так: Функция copyObjText может копировать текстовое поле тага textarea, например. Также, можно написать другой код для копирования любой информации из вашей страницы — очень удобно для автоматизации работы с ajax приложениями.

Вот, собственно и все!

Javascript — Middle Button Click

Perlover — Sun, 14 Mar 2010 08:55:14 +0000

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

Итак, в самом JavaScript есть такое событие клика мышки — тип ‘click’. Но данное событие вырабатывается только при клике левой кнопкой мыши (исключения — IE & Safari). Стандарт W3C описывает событие click, но там не сказано про то, от какой кнопки мыши оно должно происходить. Видимо, от этого в броузерах наблюдается полная анархия с этим делом.

Зачем мне понадобилось отслеживать событие middle click? Например, в броузере Firefox (в Chrome и Internet Explorer 7.0 и выше) клик колесиком мышки по ссылке приводит к ее открытию в новом табе в фоновом режиме, и страница, на которой кликают, продолжает «висеть» перед глазами пользователя. Мне лично нравиться так «сёрфить», так как это удобно, и следовательно, подумал я, так делают многие (по моим последним данным, рассчитанным на основе 65 тыс. кликов — 2.5% из них — клик колесиком мышки). Но, к сожалению, такой удобный клик не генерирует событие ‘click’ на уровне API разработчика. Мне нужно было отслеживать клики для сбора статистики, и для полноты картины я хотел учитывать даже эти клики. Но такого типа события в броузерах нет. Что делать?

Для начала, хочу сказать, что этот дурацкий Internet Explorer (ужасный броузер, особенно для программиста JavaScript) все таки генерирует событие ‘click’ на клик колесиком (Safari также). То есть под IE можно не стараться отслеживать его, а просто отследить событие click (там также middleclick открывает ссылку в новом табе). А вот с Firefox и другими (Opera 8.x и новее, например) придется постараться. Они генерируют только события mousedown & mouseup и все. Чтобы понять событие, надо отследить оба эти и еще одно событие — не ушла ли мышка на другой объект — ведь если между нажатием и отпусканием колесика пользователь двигал мышкой — событием клика это нельзя считать.

Я написал и использую два варианта кода — один для jQuery, другой в проектах, где jQuery не используется. Вот куски кодов:

jQuery:

jQuery.event.special.middleclick = {
    setup: function(data, namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.bind('mousedown mouseup mouseout', jQuery.event.special.middleclick.handler);
    },

    teardown: function(namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.unbind('mousedown mouseup mouseout', jQuery.event.special.middleclick.handler);
    },

    handler: function(event) {
        var elem = this, $elem = jQuery(elem);
        if (event.type == 'mousedown' && event.which == 2)
          $elem.data('mouseTrigger', 1);
        else
          if (event.type == 'mouseout')
            $elem.data('mouseTrigger', 0);
          else
            if (event.type == 'mouseup')
             {
              if (event.which == 2 && $elem.data('mouseTrigger'))
               {
                event.type = "middleclick";
                jQuery.event.handle.apply(this, arguments)
               }
              $elem.data('mouseTrigger', 0);
             }
    }
};

JavaScript без jQuery:

mouseTrigger = function (elem, event)
{
 var nButton;

 if (document.all)
  {
   event = window.event;
   nButton = 4;
  }
 else
  {
   nButton = 1;
  }
 if (event.type == 'mousedown' && event.button == nButton)
   elem.mouseTrigger = 1;
 else
   if (event.type == 'mouseout')
     elem.mouseTrigger = 0;
   else
     if (event.type == 'mouseup')
      {
       if (event.button == nButton && elem.mouseTrigger)
         ourHandler(elem);
       elem.mouseTrigger = 0;
      }
 return true;
}

Оба эти способа требуют установки обработчика событий — handler в виде функции function () {}. И тут есть важный момент. Поскольку оба моих предложенных варианта работают как под IE, так и под Firefox, возникает проблема в IE — сначала происходит моё событие и дергает ваш handler, затем IE производит событие click, которые, как правило, обрабатываются тем же обработчиком (я привожу в пример вариант, когда мы хотим отслеживать все клики по линкам — и обычные, и middleclick). То есть в IE на один клик колесиком мышки дергается два раза handler. Самым простым и эффективным решением лично я нашел способ исключения второго клика путем замерения времени — если наш handler на тот же элемент DOM дергают два раза с разницой менее 500 мс, значит это IE с его вторым click:

jQuery:

Для jQuery варианта наш handler должен выглядеть и устанавливаться так (для всех линков, которые залинкованы на картинки, например):

$('a > img').bind('click middleclick', function (event)
   {
    var now = +new Date;
    if ($(this).data('lastClick') && now - $(this).data('lastClick') < 500)
      return; // Дубликат клика, например IE
    $(this).data('lastClick', now);

    // Здесь уже идет код нашего обработчика ...
   });

В этом примере, мы ищем все линки, которые линкуются на картинки, и ставим на них обработку двух событий — события ‘click’ и своего события ‘middleclick’. Последнее событие реализовано через API jQuery как свой новый тип события — ‘middleclick’.

JavaScript без jQuery:

function ourHandler(elem)
{
var now = +new Date;
if (elem.lastClick && now - elem.lastClick < 500)
return;
elem.lastClick = now;

// Здесь уже идет код нашего обработчика ...
}

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

Как избавиться от сообщения «Unresponsive script» в Firefox

Perlover — Mon, 22 Feb 2010 20:48:47 +0000

Если вы часто работаете с сайтами, где используются интенсивные JavaScript вычисления, то вы навярняка сталкивались с таким сообщением «Unresponsive script». Оно выскакивает в Firefox, когда JavaScript использует под себя долгое время все процессорное время вашего компьютера. Firefox это замечает, скрипт приостанавливает, а вас спрашивает — продолжать выполнение скрипта или нет. Это, с одной стороны, хорошая фича Файрфокса, с другой — весьма надоедливая и неприятная, когда ваша работа требует каждодневного использования скриптов с такими вычислениями (например, массивные обработки крупной статистики).

Но это сообщение можно либо отключить совсем, либо увеличить лимит срабатывания. Для этого, наберите в строке броузера «about:config«, если будет предупреждение об осторожности смены настроек, согласитесь с ним. Там в строке фильтра неберите «dom.max_», Fire Fox отфильтрует вам настройки, в том числе такую — dom.max_script_run_time. Кликнете по ней и установите значение либо в ноль — отключить предупреждение, либо более 10 — это количество секунд, сколько максимум может использовать скрипт под себя процессорного времени — в таком случае, предупреждение будет появляться реже и только в крайних случаях.

Каков % пользователей с JavaScript?

Perlover — Fri, 18 Dec 2009 08:50:55 +0000

На своих нескольких проектах уже замечал неоднократно такую статистику — по моим данным, только 70-73% рядовых пользователей интернета имеют включеную поддержку JavaScript. Сразу хочу заметить, что не Java, а JavaScript! Делаю эту поправку потому, что некоторые ошибочно думают, смотря в Google Analytics или в данные некоторых других счетчиков в колонку Java (там, как правило, цифры за 90%). А ведь счетчики сами работают на JavaScript, и визит посетителя с отключенным JavaScript они просто не зафиксируют!

Как я посчитал эти цифры? Возьмем, к примеру логи Apache сервера. Они показывают сколько реально было загрузок какой либо страницы. Берем данные о загрузке страницы из этих логов -V1, затем смотрим, сколько нам посчитал счетчик, например Google Analytics — V2 (я обсчитывал статистику даже своими JavaScript счетчиками на основе Ajax). V1 — сколько всего смотрело людей, а V2 — у скольки включен скрипт. V2 всегда будет меньше V1, и если посчитать по формуле V2/V1*100%, то получится 70-73%. Проверьте сами!

Конечно, могут возразить — боты и все такое… Но я замерял на разных проектах — на известных и нет, и из разных источников. Цифры всегда были примерно одинаковые. Не верю, что везде процент ботов одинаковый!

Так что помните об этом, когда создаете страницу, работающую только на чистом JavaScript коде!