Страницы

Поиск по вопросам

Показаны сообщения с ярлыком javascript. Показать все сообщения
Показаны сообщения с ярлыком javascript. Показать все сообщения

среда, 15 апреля 2020 г.

Как получить URL посещённых ресурсов?

#javascript #chrome_extension

                    
Всем привет.
Идея следующая: есть расширение Chrome, оно передаёт все посещённые URL на сервер,
каждый пользователь имеет свой id. Можно, конечно, использовать Историю браузера, но
этот подход не гибкий. Каким образом можно реализовать подобное? Интересует коллегиальное
решение, как общая концепция, так и технологии для реализации. Сам Java и  С++ developer,
в WEB только въезжаю, поэтому, может, вопрос глуповат-). Но прошу отнестись с пониманием.
Спасибо.
PS Это не инструмент слежки, необходимо для исследования.    


Ответы

Ответ 1



Можно, конечно, использовать Историю браузера, но этот подход не гибкий. Вполне гибкий. Хром предоставляет специальный API для работы с историей просмотров - это chrome.history. Там же есть ссылка на пример работы с API. Можно создать расширение, которое будет работать всегда, когда запущен Хром, и периодически (скажем, раз в день) в определенное время извлекать историю просмотров, прошедших с последней активации расширения, анализировать их и отсылать данные на сервер.

Ответ 2



Как вариант - опять же расширение для хрома которое будет при каждой загрузке страницы отправлять серверу текущий урл и id пользователя (id можно хранить в localStorage). На сервере анализировать урл и писать его в базу привязывая к пользователю с указанным id.

Как сделать генератор случайных чисел, выдающий одинаковые значения при нескольких запусках?

#javascript #алгоритм #случайные_числа

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


Ответы

Ответ 1



Простейший вариант: var num; // очень большое простое число. var seed; // затравка - то самое инициализирующее число. var start_number; // основа var counts = new Array(); var max_num = 10; // Инт, который не превосходит наше число. У вас 0-9 числа. for(var i=0; i<1000; i++){ counts[i] = (Math.pow(start_number+i,seed)%num)%max_num; } Механизм простой: возводим основу, изменяемую каунтером в степень затравки и берем остаток от деления на большое число. Потом берем последние несколько цифр(в нашем случае - одну). Как можно оптимизировать: бинарное возведение в степень(пользуясь тем, что у нас кольцо) Замечания: 1) num должен быть достаточно большим, чтобы обеспечить разнообразие. 2) число в степени затравки должно, тем не менее, превосходить это простое число. 3) от основы можно отказаться вовсе, если счет инкрементора начинать с 2, а seed взять, хотя бы, от ~20

Ответ 2



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

Ответ 3



Вопрос успешно обсуждался на оригинальном SO: https://stackoverflow.com/questions/424292/how-to-create-my-own-javascript-random-number-generator-that-i-can-also-set-the-s

Вставка HTML через JS

#html #javascript

                    
Доброго всем времени суток! Возник следующий вопрос: в зависимости от результата
проверки некоторого условия в JS нужно выводить на HTML определенный блок из двух.
Видимость не подходит, есть элементы, которые не могут выводиться 2 раза. Как это лучше
сделать?     


Ответы

Ответ 1



Либо подключаем Jquery, что намного удобнее, если нет маниакального стремления строить велосипеды(на что мое мнение, надо построить свою ось для начала, чтобы уже никто не подкопался), либо возможно стандартным js Доступ к элементам DOM. Вариант с Jquery до безумия прост 1.Подключаем библиотеку 2.Присваиваем элементам id к примеру div id="blockN" 3.Меняем их содержимое $("#blockN").html(Вставьте свою разметку сюда); 4.Гуглим "Jquery селекторы"

Ответ 2



document.getElementById(someid).innerHTML = somehtml;

Ответ 3



condition?document.getElementById (id).innerHTML = value; Надеюсь, разберешся :)

понедельник, 13 апреля 2020 г.

Движение объекта (HTML5 canvas)

#canvas #javascript #html5 #алгоритм

                    
Привет всем, нужна реализация следующего: анимация по рандомным координатам ходит
в произвольные стороны в рамках разрешения пользователя. Каков алгоритм сего действия?    


Ответы

Ответ 1



Генерируешь рандомный X Проверяешь, не вылазит ли он за пределы экрана Генерируешь рандомный Y Проверяешь, не вылазит ли он за пределы экрана Указываешь координаты твоему объекту Делаешь паузу Повторяешь 1-6 пункт

Правила и фильтры OpenLayers (отбор по свойствам объектов)

#c_sharp #json #javascript #openlayers #geojson

                    
Есть GeoJSON вида:

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-108.04,44.68]},"properties":{"course":184.7,"vid":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-111.04,45.68]},"properties":{"course":44.1,"vid":2}}]}


Являющийся источником слоя vectors (см. "Как послать JSON в теле HTTP-ответа?").
Нужен фильтр показывающий только точки с vid входящим массив, вида:  

var pointShow = [1,3];


Вроде бы для этого нужно использовать правила (Rule), но я с OpenLayers не особо
знаком, да и в интернете найти что-то по теме кроме описания FeatureId на сайте "OpenLayers"
не получилось.  

Пробовал сделать так:

var myStyle = new OpenLayers.Style();
var defRule = new OpenLayers.Rule({
    filter: new OpenLayers.Filter.FeatureId({fids: ["2242"]}),
    symbolizer: {
        externalGraphic: "OpenLayersRotationExample_files/marker-red.png",
        graphicWidth: 21,
        graphicHeight: 25,
        graphicXOffset: -10,
        graphicYOffset: -12
    }
});
myStyle.addRules([defRule]);

...

vectors = new OpenLayers.Layer.Vector(
   "Simple Geometry",
   {
      protocol: new OpenLayers.Protocol.Script({
        url: "http://localhost:8181/view",
        callbackKey: "format_options",
        callbackPrefix: "callback:",
        filterToParams: function(filter, params) {
          if (filter.type === OpenLayers.Filter.Spatial.BBOX) {
            params.bbox = filter.value.toArray();
            if (filter.projection) {
              params.bbox.push(filter.projection.getCode());
            }
          }
          return params;
        }
      }),
      strategies: [
        new OpenLayers.Strategy.Refresh({force: true, interval:10000}),
        new OpenLayers.Strategy.BBOX({resFactor:2})
      ],
      styleMap: new OpenLayers.StyleMap({
        "default": myStyle
      })
   }
);


Но в итоге я ничего не вижу.  

В связи с этим вопрос - как правильно писать правила и фильтры OpenLayers?
Буду признателен за полезные ссылки на примеры и примеры использования разных фиьтров,
в частности FeatureId (желательно более понятных чем тут "Filtering a WFS Layer").  

PS: Пока решил так:

var myStyle = new OpenLayers.Style();
var defRule = new OpenLayers.Rule({
  symbolizer: {
    externalGraphic: "OpenLayersRotationExample_files/marker.png",
    graphicWidth: 14,
    graphicHeight: 17,
    graphicXOffset: -7,
    graphicYOffset: -8,
    graphicOpacity: 0.9,
    rotation: "${course}",
    display: "none"
  }
});
myStyle.addRules([defRule]);
for (keyVar in arr) {
  myStyle.addRules([
    new OpenLayers.Rule({
      filters: [new OpenLayers.Filter.Comparison({
        type: OpenLayers.Filter.Comparison.EQUAL_TO,
        property: "vid",
        value: arr[keyVar]
      }),
      symbolizer: {
        externalGraphic: "OpenLayersRotationExample_files/marker-red.png",
        display: ""
      }
    })
  ])
}

//arr - список id объектов которые нужно показать
//vid, course - поля свойств объектов (properties)


Возможно не очень красиво и медленно, но работает. Кто знает как разобраться с FeatureId,
прошу подскажите - все таки, я думаю, он быстрее отработает чем куча фильтров.
    


Ответы

Ответ 1



У вас JSON не полный. У каждой feature должен быть некоторый "id", по которому фильтровать фильтром FeatureId.

Серверная обработка изменений Store ExtJS

#javascript #extjs #php

                    
Здравствуйте!
Разбираюсь с ExtJS, с переменным успехом... 
Ни как не могу принять на сервере данные отправляемые Store при изменении записей
(добавлении, изменении или удалении). Пишет что данные уходят POST-ом, но на сервере
ни $_POST, ни $_GET, ни $_REQUEST отправленные данные не показывает - как будто ничего
не отправлялось (ну кроме случайного значение в $_GET - _dc=1357565039902).

Вот что уходит на сервер (взял из консоли Хрома), соответственно, при удалении, обновлении
и добавлении:

Request URL:http://localhost/service/destroy/news.php?_dc=1357565811429
Request Method:POST
Status Code:200 OK
Query String Parameters:
  _dc:1357565811429
Request Payload:
  {"items":{"id":5}}

Request URL:http://localhost/service/update/news.php?_dc=1357566047052
Request Method:POST
Status Code:200 OK
Query String Parameters:
  _dc:1357566047052
Request Payload:
  {"items":{"datepubl":"2012-12-01T00:00:00","title":"the Update Plan","alias":"the-update-plan","new":"

small text new

","newfull":"

full text new

","id":4}} Request URL:http://localhost/service/create/news.php?_dc=1357566179903 Request Method:POST Status Code:200 OK Query String Parameters: _dc:1357566179903 Request Payload: {"items":{"id":0,"datepubl":null,"dateclose":null,"title":"the NEW new","alias":"the-new-new","new":"text the NEW new","newfull":""}} Посылает эти запросы следующий Store: var storeNews = Ext.create('Ext.data.Store', { autoLoad: true, autoSync: true, idProperty: 'id', remoteFilter: true, fields: [ { name: 'id', type: 'int' }, { name: 'datepubl', type: 'date' }, { name: 'dateclose', type: 'date' }, { name: 'title', type: 'string' }, { name: 'alias', type: 'string' }, { name: 'new', type: 'string' }, { name: 'newtext', type: 'string' } ], proxy: { type: 'ajax', api: { read: 'service/view/news.php', create: 'service/create/news.php', update: 'service/update/news.php', destroy: 'service/destroy/news.php' }, reader: { type: 'json', successProperty: 'success', root: 'data', messageProperty: 'message' }, writer: { type: 'json', writeAllFields: false, root: 'data' }, listeners: { exception: function(proxy, response, operation){ Ext.MessageBox.show({ title: 'REMOTE EXCEPTION', msg: operation.getError(), icon: Ext.MessageBox.ERROR, buttons: Ext.Msg.OK }); } } } }); Подскажите, пожалуйста, как принять переданные данные на сервера ? Или как их правильно отправить, если я делаю это не верно ?..


Ответы

Ответ 1



Все проще чем кажется: $data = json_decode(file_get_contents('php://input')); Store хочет в ответе получить готовый вид этой записи. Только тогда он будет уверен, что эта строка таблицы существует на самом деле, а не является какой то "вымышленной". У каждой записи в store есть свойство phantom. Оно означает, существует ли запись реально, или она временно появилась в store. По добавлению store будет отсылать все фантомные записи. Когда store получит в ответе данные записи, он поймет, что сервер её обработал или сохранил, и присвоит значение phantom = false, то есть запись реальная. print( json_encode( $data ) ); Если выполняется добавление записи, то ей должен быть присвоен ID, если такой имеет место быть.

Загрузчик скриптов javascript (или ресурсов вообще) на JavaScript

#javascript

                    
Здравствуйте!
Меня интересует JavaScript-загрузчик - то есть скрипт загружающий другие javascript
с сервера.
То есть что бы не прописывать все скрипты по одному в ресурсах страницы, а прописать
один и сказать ему какие ещё скрипты нужно загрузить с сервера... А после загрузки
всех скриптов сгенерировать специальное событие говорящее о полной загрузки скриптов.
Это нужно для того что бы скрипты грузились в нужном порядке, а так же для установки
факта загрузки всех скриптов.

Если есть готовое решение - отлично, а если его нет и кто-то подскажет (желательно
с наброском) как такой загрузчик написать - буду очень признателен!    


Ответы

Ответ 1



Для использования с ExtJs целесообразно использовать Ext.Loader. Раскладываете все ваши классы по файлам и потом загрузчик сам загрузит всё необходимое. Пример использования Для общего случая вам подойдёт: HeadJS - весьма удобная штука, умеет загружать и js и css LABjs JSL RequireJS и т.д. (сравнительная таблица)

Js RegExp: выбор текста между тегами

#регулярные_выражения #javascript

                    
Нужно написать скрипт который будет искать текст между  тегами ,
я не силён в регулярных выражениях, но попробовал написать выражение.


Но это не работает. Как сделать это правильно?    


Ответы

Ответ 1



Задача поставлена путано: автор просит «написать скрипт», но из дальнейшего текста вопроса следует, что необходимо обычное регулярное выражение. Также не очень понятно, нужна ли именно реализация регулярного выражения на JavaScript или же метка javascript проставлена по ошибке, только потому что операция поиска производится в содержимом скрипта. Если формулировка следующая: «найти текст между тегами с помощью регулярных выражений», то приведу шаблон для PCRE. Т. к. атрибут type в HTML5 можно опустить, в ответе он не учитывается. Регулярное выражение: (?<=<[Ss][Cc][Rr][Ii][Pp][Tt]>)([\s\S]*?)(?=<\/[Ss][Cc][Rr][Ii][Pp][Tt]>) Демонстрация: https://regex101.com/r/oO7pR0/1 Пояснения: Используются метасимволы поиска контекста, они могут поддерживаться не везде: ?= — положительный просмотр вперёд, ?<= — положительный просмотр назад. Выражение ув-мого Гены Царинного находит текст вместе с тегами, а автору, насколько понял, сами теги не нужны. Нахождение содержимого внутри них — случай применения «операций нулевой ширины» с приведёнными выше метасимволами.

Ответ 2



Ответ из комментариев /]*>([\s\S]*?)<\/script>/

Вернуть $.ajax data в return функции

#jquery #ajax #javascript

                    
Есть аякс запрос в функции
function Check_production(order_number){
var result = false;

$.ajax({
   url: "load/check_production.php",
   cache: false,
   async: false,
   data: {zakaz_number:zakaz_number}, 
   type: 'POST',
   success: function(data){
        if (data == "true"){
            result = true;
        }else {
            result = false;
        }
   }
 });

return result;

}
Можно ли сделать более красиво без отключения асинхронного запроса / локальной переменной
/ каким либо еще способом, чтобы Check_production вернула result?    


Ответы

Ответ 1



Посмотрите в сторону объекта Deferred, пример с ajax: function SomethingInit(id){ this.init = function(id) { // Загрузка с сервера информации this.load(id).done(function() { // ... здесь продолжается инициализация ... alert("продолжаем после успешного запроса"); }).fail(function(message) { alert('ошибка..') }); }; this.load=function(teamId){ var dfr = $.Deferred(); alert('посылаем запрос'); $.ajax({ url: 'load/check_production.php', success: function(response, status, jqXHR){ dfr.resolve();}, error: function(jqXHR, status, error) { dfr.reject() ; } }); return dfr; //dfr.promise(); }; this.init(); }; Также существует ряд библиотек-оберток для этого объекта, мне в свое время приглянулась JSDeferred: http://habrahabr.ru/post/108575/

Квадратные thumbnails из не квадратных изображений?

#javascript #изображения #thumbnails #php #css

                    
Уважаемое сообщество, подскажите пожалуйста куда копать? Проблема заключается вот в чем:
Есть фотографии из соц сетей (вконтакте, инстаграм например). Изображения вытаскиваются
из api, и обычно в ответе от api присутствует thumbnail фотографии (src_small к примеру).
В случае с инстаграмом всё отлично - там по дефолту квадратные изображения. В случае
с остальными соц сетями - изображения там какие попадутся. 
Так вот в чем вопрос: возможно ли средствами css отображать только квадратную область
изображения ? Просто обрезать на сервере - довольно трудозатратная операция, если фотографии
будут грузиться пачками по 20 (например). И если будет много пользователей делать это
одновременно, страшно подумать что случится с моим дешевым хостингом (а пока вообще
бесплатным) :)    


Ответы

Ответ 1



Осмелюсь как вариант предложить такой индусский код: http://jsfiddle.net/ptEy8/ Но очень хотелось бы увидеть ещё варианты! Хороший вопрос.

Изменить стиль блока при нажатии

#javascript #html #jquery #css

                    
Не знаю JavaScript вообще. Только CSS и HTML. Помогите написать код, пожалуйста.
Допустим, у меня есть блок A 
У него есть стиль #a {width:100px; height:100px; position:absolute (или relative, не суть); top:0px} При нажатии на этот блок нужно чтобы у него был top:100px; left:50px к примеру. Насколько мне известно, средствами CSS можно лишь сделать так, чтобы на время нажатия на этот блок он перемещался, а когда отпустить кнопку мыши - он встанет на свое место. Как сделать, чтобы при клике на этот блок он переместился, а при еще одном клике встал назад? Очень, очень и очень желательно без JavaScript, ибо я его пока что ВООБЩЕ не знаю, если возможно. Если невозможно, помогите написать скрипт-шаблон, и хотя бы отдаленно расскажите какая команда за что отвечает. Спасибо большое, надеюсь поможете)) UPD Возможно сделать так, чтобы при клике у него менялись свойства? Или при клике вместо id="a" у него становился id="a1" ? Это возможно?


Ответы

Ответ 1



Уже тыщу раз отвечал на подобный вопрос: HTML CSS #a { width:100px; height:100px; position:absolute; top:0; left: 0; border: 1px solid black; transition: all 0.5s; } .switchable input { display:none; } .switchable input:checked+#a { top:100px; left:50px } http://jsfiddle.net/oceog/sFEH4/ фокус в использовании :checked и следующего за ним div. ограничение способа - нельзя помещать в такой
никаких input

Ответ 2



Я бы посоветовал лучше переключать классы, а не менять конкретные свойства. Например, так jsFiddle. Я закомментировал второй вариант, который помимо того что переключает класс, меняет и id элемента.

Как на сайте по нажатию кнопки скопировать содержимое DIV в буфер обмена

#css3 #jquery #javascript #html5

                    
Собственно, есть DIV. В нем есть динамический текст. Нужно, чтобы по нажатию кнопки
содержимое копировалось в буфер обмена.
Спасибо!    


Ответы

Ответ 1



Автоматическое копирование в буфер обмена связано с дополнительными рисками, поэтому большинство нормальных браузеров блокируют эту возможность. Политика безопасности... Лично я в такой ситуации использую следующий трюк: function copyToClipboard (text) { window.prompt ("Чтобы скопировать текст в буфер обмена, нажмите Ctrl+C и Enter", text); } Пользователь получает вопросительное окно, в котором весь текст для копирования уже выделен. Осталось только нажать Ctrl+C и Enter (чтобы закрыть окно). Эта операция полностью безопасна, поскольку пользователь производит копирование в буфер самостоятельно. И, конечно, метод работает во всех браузерах.

CSS: перенос элементов

#css3 #html #javascript #css

                    
Существует решение для построения дерева с использованием HTML + CSS. Еще немного
JS используется для реализации функции свертывания узлов дерева.
Вот собственно и сам пример.
Проблема в том, что при большом количестве узлов, последние не помещаются в родительский
контейнер. Можете предложить какие-то идеи по устранению данной проблемы? Что только
не пробовал: и работал со свойством overflow и javascript задействовал - безрезультатно.
Буду рад как готовому решению, так и его словесному описанию. Заранее спасибо.
P.S.: Оригинал - CSS3 Family Tree    


Ответы

Ответ 1



Есть одна мысль. Сделать ul { white-space: nowrap; } li { display: inline-block!important; } Но надо будет тогда css крепко править, чтобы нужный вид со всеми линиями сохранился

Перемещение блока после каждого 3 элемента (jQuery)

#jquery #javascript

                    
Здравствуйте.
Есть блок с N элементами и 1 блоком, необходимо, чтобы при клике на этот элемент,
под него перемещался блок, который в данный момент имеет свойство display: none;
Мой код перемещает блок каждый раз после 6 элемента: http://jsfiddle.net/Qe9sS/1/
Нужно, чтобы при клике на первый, второй, третий элемент - блок переместился под
третий, при клике на четвертый, пятый, шестой - под шестой, и так далее.
В оригинальном варианте элементы выстроены по 3 на линию, то есть, примерно в таком виде:
элемент №1 элемент №2 элемент №3
элемент №4 элемент №5 элемент №6

Заранее спасибо.    


Ответы

Ответ 1



Если я правильно понял, то вы просто перемудрили, вот пример: var $bdetail = $(".b-detail"),$links=$(".content-item > a"); $(".content-item").on('click','> a',function (event) { event.preventDefault(); var index=parseInt($links.index(this)/3+1)*3; index=index>$links.length?$links.length:index; index--; var $that=$links.eq(index); if (!$that.next().is($bdetail)) { $bdetail.stop().slideUp('fast', function () { $bdetail.slideDown('slow').insertAfter($that); }); } }); http://jsfiddle.net/oceog/Qe9sS/8/

суббота, 11 апреля 2020 г.

При нажатии вставить HTML коды в textarea

#jquery #html #css #javascript

                    
Мучаюсь уж как 2 дня, подскажите как сделать такое: 
Есть картинки(иконки)сверху,  нужно, чтобы при нажатие на любую из них в textarea
который ниже находиться вставлялись спец коды к примеру , то есть HTML коды.
мне подсказали что это делается на jquery.    


Ответы

Ответ 1



Используй любой из WYSIWYG-редакторов. Если по-своему, то можно так: HTML:
b
JS: var ta = $('#qwe'), ico = $('.icon'); ico.on('click', function(){ switch ($(this).data('type')){ case 'b': ta.val( ta.val() + '' ); break; //можно дописать другие кейсы для новых иконок } }); Демо Можно улучшить, чтобы обрамляло выделенный текст.

JS PING серверов

#javascript

                    
Доброго всем
Пол дня мучаюсь с решением одного вопроса.
Есть список пулов для майнинга, надо определить пинг до серверов. Пинг должен быть
с IP пользователя до IP сервера, т.е. с моего сервера не пойдет, поэтому пришел к JS.
После долгих поисков соорудил такую констукцию:
      to_host ='http://5.9.6.228';
  timeStart = new Date().getTime();
  $.get(to_host).error(function (){
        ping_time = new Date().getTime() - timeStart;
        ping_time_sec = ping_time;
        document.write(''+ num +' Ping '+ to_host +' OK. Time '+ ping_time_sec +
' msec.
' ); }) Скрипт в консоли вываливает ошибку: XMLHttpRequest cannot load http://5.9.6.228/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. Но при этом получает ответ от сервера и я могу измерить это время. Можно ли считать полученное время временем PINGа в привычном понимании? Если совсем нет, подскажите решение, задолбался искать. Спасибо)


Ответы

Ответ 1



На SO предлагают использовать нативный Image для проверки связи. Кусок кода, из которого понятна идея: function Pinger_ping(ip, callback) { if(!this.inUse) { this.inUse = true; this.callback = callback this.ip = ip; var _that = this; this.img = new Image(); this.img.onload = function() {_that.good();}; this.img.onerror = function() {_that.good();}; this.start = new Date().getTime(); this.img.src = "http://" + ip; this.timer = setTimeout(function() { _that.bad();}, 1500); } } Часть времени в первый запрос уйдет на разрешение имени в ip, поэтому для имен лучше измерять повторный запрос, когда ip закэширован. fiddle

Модуль angularJS

#javascript #angularjs

                    
Создаю модуль AngularJS в файле app.js 
var todoApp = angular.module("todoApp", []);

Ошибка: 

Uncaught ReferenceError: angular is not defined
    


Ответы

Ответ 1



Как уже отметили в комментариях, похоже на то, что файл app.js подключен раньше чем angular.js. В index.html должно подключение скриптов выглядеть примерно так: