Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: JavaScript OnMouseMove что за зверь такой  (Прочитано 26239 раз)
0 Пользователей и 4 Гостей смотрят эту тему.
perl6
Помогающий

ru
Offline Offline

« : 03-07-2013 21:24 » 

Здравствуйте. Беглым взором не нашел темы про JS, поэтому спрошу тут...
Что делает данный код.

Просьба объяснить именно с позиции программиста, а не обывателя (маусмув по анг. - движение мыши, я это и сам знаю)  :Улыбаюсь

Код: (Javascript)
 function onMouseMove(e) {
            e = e || w.event;
            mc += e.clientX.toString(16) + 'O' + e.clientY.toString(16) + 'N';
        }

P.S. Про event передачу по событию я тоже знаю, большая просьба обрисовать именно общую картину происходящего...
« Последнее редактирование: 04-07-2013 08:52 от Джон » Записан
zubr
Гость
« Ответ #1 : 04-07-2013 03:06 » 

Скрипт получает координаты курсора относительно окна элемента, которые наверно передаются на сервер через глобальную переменную mc.
Записан
Dimka
Деятель
Команда клуба

ru
Offline Offline
Пол: Мужской

« Ответ #2 : 04-07-2013 04:51 » 

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

Программировать - значит понимать (К. Нюгард)
Невывернутое лучше, чем вправленное (М. Аврелий)
Многие готовы скорее умереть, чем подумать (Б. Рассел)
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #3 : 04-07-2013 05:53 » 

perl6, а чего именно ты здесь не понял или что тебя смущает?
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
zubr
Гость
« Ответ #4 : 04-07-2013 06:19 » 

Dimka,  для примера, у яндекс-метрики есть вебвизор - видео посещения страниц пользователем.
Записан
Dimka
Деятель
Команда клуба

ru
Offline Offline
Пол: Мужской

« Ответ #5 : 04-07-2013 06:50 » 

zubr, Яндекс может себе позволить такие кластеры Улыбаюсь Чего не скажешь о простых смертных.
Записан

Программировать - значит понимать (К. Нюгард)
Невывернутое лучше, чем вправленное (М. Аврелий)
Многие готовы скорее умереть, чем подумать (Б. Рассел)
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #6 : 04-07-2013 07:01 » 

zubr, да, но не на каждый mousemove

чтобы описать код нужно еще чуть-чуть кода до..., но в принципе и этого достаточно.

e = e || w.event;
Это хитрай штука для кроссбраузерности
а затем заполняется строка mc (глобальная) с координатами X+'O'  и Y+'N'
причем координаты X и Y представлены в 16-ричном коде toString(16) - метод объекта number;

И, возможно, эта глобальная mc уже передается на сервер.
« Последнее редактирование: 04-07-2013 07:02 от Sla » Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
perl6
Помогающий

ru
Offline Offline

« Ответ #7 : 04-07-2013 10:20 » 

чтобы описать код нужно еще чуть-чуть кода до..., но в принципе и этого достаточно

Пожалуйста

Код: (Javascript)
; (function (w, d) {
    var script = new Image();
    var Base64 = {
        _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
        encode: function (input) {
            var output = "";
            var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
            var i = 0;
            input = Base64._utf8_encode(input);
            while (i < input.length) {
                chr1 = input.charCodeAt(i++);
                chr2 = input.charCodeAt(i++);
                chr3 = input.charCodeAt(i++);
                enc1 = chr1 >> 2;
                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                enc4 = chr3 & 63;
                if (isNaN(chr2)) {
                    enc3 = enc4 = 64;
                } else if (isNaN(chr3)) {
                    enc4 = 64;
                }
                output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
            }
            return output;
        },
        decode: function (input) {
            var output = "";
            var chr1, chr2, chr3;
            var enc1, enc2, enc3, enc4;
            var i = 0;
            input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
            while (i < input.length) {

                enc1 = this._keyStr.indexOf(input.charAt(i++));
                enc2 = this._keyStr.indexOf(input.charAt(i++));
                enc3 = this._keyStr.indexOf(input.charAt(i++));
                enc4 = this._keyStr.indexOf(input.charAt(i++));
                chr1 = (enc1 << 2) | (enc2 >> 4);
                chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                chr3 = ((enc3 & 3) << 6) | enc4;
                output = output + String.fromCharCode(chr1);
                if (enc3 != 64) {
                    output = output + String.fromCharCode(chr2);
                }
                if (enc4 != 64) {
                    output = output + String.fromCharCode(chr3);
                }
            }
            output = Base64._utf8_decode(output);
            return output;

        },
        _utf8_encode: function (string) {
            string = string.replace(/\r\n/g, "\n");
            var utftext = "";

            for (var n = 0; n < string.length; n++) {

                var c = string.charCodeAt(n);

                if (c < 128) {
                    utftext += String.fromCharCode(c);
                }
                else if ((c > 127) && (c < 2048)) {
                    utftext += String.fromCharCode((c >> 6) | 192);
                    utftext += String.fromCharCode((c & 63) | 128);
                }
                else {
                    utftext += String.fromCharCode((c >> 12) | 224);
                    utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                    utftext += String.fromCharCode((c & 63) | 128);
                }

            }
            return utftext;
        },
        _utf8_decode: function (utftext) {
            var string = "";
            var i = 0;
            var c = c1 = c2 = 0;

            while (i < utftext.length) {

                c = utftext.charCodeAt(i);

                if (c < 128) {
                    string += String.fromCharCode(c);
                    i++;
                }
                else if ((c > 191) && (c < 224)) {
                    c2 = utftext.charCodeAt(i + 1);
                    string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                    i += 2;
                }
                else {
                    c2 = utftext.charCodeAt(i + 1);
                    c3 = utftext.charCodeAt(i + 2);
                    string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                    i += 3;
                }

            }
            return string;
        }
    }
    function cookietime() {
        try {
            if (-[1, ]) {
                var f = 1; var s = { 4294967296: '2', s: '1', 4294967295: '4', '1': '' };
                for (var i in s) if (f) f = 0; else return s[i];
            } else return '3';
        } catch (e) {
            return '0';
        }
    }
    function setCookie(name, value, props) {
        props = props || {};
        var exp = props.expires;
        if (typeof exp == "number" && exp) {
            var date = new Date();
            date.setTime(date.getTime() + exp * 1000);
            exp = props.expires = date;
        }
        if (exp && exp.toUTCString) {
            props.expires = exp.toUTCString();
        }

        value = encodeURIComponent(value);
        var updatedCookie = name + "=" + value;
        for (var propName in props) {
            updatedCookie += "; " + propName;
            var propValue = props[propName];
            if (propValue !== true) {
                updatedCookie += "=" + propValue;
            }
        }
        d.cookie = updatedCookie;
    }
    function getCookie(name) {
        var matches = d.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
        return matches ? decodeURIComponent(matches[1]) : undefined;
    }
    function createURLBuilder(url) {
        var parts = new RegExp("^(([^:/\\?#]+):)?(//(([^:/\\?#]*)(?::([^/\\?#]*))?))?([^\\?#]*)(\\?([^#]*))?(#(.*))?$").exec(url);
        var script = new Image();
        var urlStart = parts[1] + parts[3] + "/";
        return {
            'Get': function (params) {
                var paramsStr = "";
                for (var k in params) {
                    paramsStr += '&' + k + '=' + params[k];
                }
                return urlStart + Base64.encode(Base64.decode(parts[7].substr(1)) + paramsStr);
            }
        };
    }
    (function init() {
        var mc = "";
        var vkmtimeout = 15;
        var linkURL = '';
        var uaURL = '';
        var linkURLBuilder = createURLBuilder(linkURL);
        var uaURLBuilder = createURLBuilder(uaURL);
        function onMouseMove(e) {
            e = e || w.event;
            mc += e.clientX.toString(16) + 'O' + e.clientY.toString(16) + 'N';
        }
        function onMouseUp() {
            if (!getCookie('wnd_nshw')) {
                setCookie('wnd_nshw', '1', {
                    expires: vkmtimeout
                });
                var amcu_window = w.open("about:blank", "_blank");
                if (amcu_window) {

                    amcu_window.location = linkURLBuilder.Get({ 'mc': mc, 'sr': w.screen.width + "x" + w.screen.height });
                } else {

                    script.src = uaURLBuilder.Get({ 't': cookietime() });
                }
            }
            if (d.removeEventListener) {
                d.removeEventListener('mousemove', onMouseMove, false);
                d.removeEventListener('mouseup', onMouseUp, false);
                d.removeEventListener('keydown', onMouseUp, false);
                d.removeEventListener('scroll', onMouseUp, false);
            } else if (d.detachEvent) {
                d.detachEvent('onmousemove', onMouseMove);
                d.detachEvent('onmouseup', onMouseUp);
                d.detachEvent('onkeydown', onMouseUp);
                d.detachEvent('onscroll', onMouseUp);
            }
        }
        if (d.addEventListener) {
            d.addEventListener('mousemove', onMouseMove, false);
            d.addEventListener('mouseup', onMouseUp, false);
            d.addEventListener('keydown', onMouseUp, false);
            d.addEventListener('scroll', onMouseUp, false);
        } else if(d.attachEvent){
            d.attachEvent('onmousemove', onMouseMove);
            d.attachEvent('onmouseup', onMouseUp);
            d.attachEvent('onkeydown', onMouseUp);
            d.attachEvent('onscroll', onMouseUp);
        }
    })();
})(window, document);

Переменная mc имеет вид здоровенной строки, что мне неясно, если в переменную event передали событие по клику (координаты курсора), то откуда такая здоровенная строка... Что за цикл пробегает переменная mc

Код: (Javascript)
&mc=331O307N331O308N331O309N331O30aN331O30bN331O30cN331O30dN331O30eN331O30fN330O311N330O313N32dO313N32dO306N32eO2f8N334O2e5N4e4O85N4efO85N4f8O85N505O85N510O85N518O85N51dO85N521O85N523O85N525O85N527O85N529O85N52aO85N
« Последнее редактирование: 04-07-2013 10:28 от perl6 » Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #8 : 04-07-2013 10:46 » new

perl6, шутишь? Улыбаюсь
Зачем тебе это надо?

Существует  некий сервис, в данном случае, возможно от Гугля, по отслеживанию рекламных компаний, или же анализа кликов, и движения мыши. Может быть это аналог вебвизора у Я (или наоборот - воруют идеи у друг друга).

Т.е. накопили массив перемещений и тыкнули, затем... зачем-то открыли окно, загрузили что-то с ?mc=&sr=WidthxHeight
отбиндили события... дальше... неинтересно (мне не интересно)

Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
perl6
Помогающий

ru
Offline Offline

« Ответ #9 : 04-07-2013 12:07 » 

Хочется разобраться, это раз (я настырный...).

Два - в перспективе что нибудь подобное реализовать у себя (парнерку хочу открыть).

Ну и три, разобрался со всем, кроме этой сраной переменной mc...

Пусть вас не пугает весь этот здоровенный кусище кода, если не трудно, просьба пояснить только по поводу переменной mc...
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #10 : 04-07-2013 13:06 » 

А че тут с переменной разбираться? Пусть она и бооооольшая

Вот гляди
mc = 331O 307N 331O 308N 331O 309N 331O 30aN;

а теперь смотрим как она генерится.

mc += e.clientX.toString(16) + 'O' + e.clientY.toString(16) + 'N';

Координаты курсора в объекте
331O - X    307N - Y
сдвинули мышь
331O 308N
и т.д.

Затем маусАп
и отослали накопленную
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
perl6
Помогающий

ru
Offline Offline

« Ответ #11 : 04-07-2013 20:37 » 

Теперь понятно, спасибо.
Записан
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines