Рубрика «javascript» - 572

Здравствуйте, уважаемые читатели. Постов про пользовательские скрипты (userscripts) было на хабре немало, тем не менее, они только показывали, как ими пользоваться. А в работе юзерскриптов достаточно много кроссбраузерных несовместимостей (как и в любой области браузерного js). Естественно, можно установить различные дополнения для разных браузеров, однако, в случае написание скрипта для конечного пользователя, придётся сопровождать его огромным readme по установке компонент для обеспечения нормальной его работы. Что лично меня, да и вас, полагаю, тоже, не очень-то устраивает.

В данной статье речь будет вестись о трёх браузерах: Mozilla Firefox (с установленным GreaseMonkey), Google Chrome, Opera. Целью статьи является «заготовка», которая позволит пользовательскому скрипту работать одинаковым образом во всех перечисленных браузерах. Реализация GM API рассматриваться не будет, т.к. таковых уже сотни. Предполагается, что читатель уже знаком с общими правилами написания юзерскриптов (в случае, если нет, рекомендую сначала прочитать другую статью).
Читать полностью »

BrowserQuest от Mozilla — это дань классическим многопользовательским играм. Вы играете за молодого воина, который ищет приключения на свою пятую точку. Тут не нужно спасать красавицу-принцессу, но это вам с лихвой окупится опасным миром, наполненным сокровищами и корованами. И главное, все это сделано с помощью HTML5 и JavaScript!
BrowserQuest — многопользовательская игра на canvas
Проект с открытым исходным кодом и хостится на GitHub!
Читать полностью »

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

Периодически я вспоминал об этой идее, но беглый взгляд в гугл не давал ничего интересного. До недавнего времени.

Когда в январе мне снова захотелось посмотреть, а не появилось ли чего интересного на эту тему, я нашел прекрасный букмарклет Visual Event 2, написанный Allan Jardine. Букмарклет работал как часы, но нашлась и пара ложек дегтя, маленьких, но неприятных.

Я использую Оперу и все букмарклеты на панели инструментов имеют одинаковую иконку: Иконка букмарклета. Стоит добавить пару-тройку таких закладок и ориентироваться среди них становиться весьма некомфортно. Второй неприятный момент — букмарклет грузил весь свой код с сайта разработчика, что приводило пусть к небольшим, но задержкам.

Поэтому было решено оформить букмарклет в виде расширения для браузера Opera. К тому же я давно хотел познакомиться с Opera Extension API. Вот ссылка на страницу расширения для самых нетерпеливых. Остальных же прошу под кат, где описаны все этапы конвертации букмарклета в расширение для Оперы, проблемы, с которыми я столкнулся и методы их решения.
Читать полностью »

В мире IT в последнее время наметилась тенденция к стремлению максимально уменьшить количество исходного кода, не теряя при этом функциональность. Так вот некий товарищ Alokmenghrajani со своими друзьями задался целью написать игру с минимальным количеством кода. Задумка была написать игру по фильму Tron, и в итоге у них получилось 219 байт, что весьма неплохо.
image
Читать полностью »

CoffeeScript: Подробное руководство по циклам

Как известно, CoffeeScript предлагает несколько иной набор управляющих конструкциях, нежели JavaScript.

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

Читать полностью »

Несмотря на то, что в JavaScript нет встроенной работы с классами или пространствами имен, для JavaScript есть разные библиотекеи, восполняющие эти проблелы, позволяющие писать в таком стиле:

var MyClass = new Class({
    myMethod: function() { }
});

var MyNamespace = {
    myFunction : function() { return 10; }
}

MyNamespace.myFunction();

Однако такой подход имеет ряд недостатков:

  • Невозможно «ссылаться» на элемент тогоже уровня, например при наследовании классов в одном пакете, т.к. инициализация «пакетного» объекта во время конструирования класса еще не произошла и класс, от которого хочется отнаследоваться, недоступен
  • Неудобно описывать «приватные» функции и переменные — их приходится выносить за объявление пространства имен/класса, что затрудняет чтение кода

Для того, чтобы побороть оба этих недостатка, я построил библиотеку-обертку вокруг MooTools, реализующую маленький «встраевыемый язык» для описания классов/пространств имен следующим образом:
Читать полностью »

в 16:44, , рубрики: javascript

Компания MajorSecurity опубликовала описание уязвимости в браузере Safari Mobile под iOS 5.1. C помощью этой уязвимости можно подделать адрес в адресной строке.

Проблема связана с некорректной обработкой вызова javascript's window.open() в JavaScript. Баг позволяет отобразить в адресной строке URL чужого сайта, тем самым жертву можно ввести в заблуждение.

Чтобы продемонстрировать уязвимость на практике, специалисты сделали специальную тестовую страничку. Можете зайти на неё браузером Safari из-под iOS 5.1 — и нажать кнопку Demo.

http://majorsecurity.net/html5/ios51-demo.html

Баг в браузере Safari

После того как вы нажали кнопку Demo браузер Safari откроет новое окно, где в адресной строке указано www.apple.com, но на самом деле сайт apple.com открывается во фрейме на хосте majorsecurity.net, то есть фактически пользователь не покинул сайт majorsecurity.net.

Читать полностью »

HTML5 Powered with Offline & Storage
С появлением HTML5 у нас появляется много новых и интересных возможностей. Позволяющих создавать еще более качественный приложения.

Например, File API. Доступ к файлам клиента довольно удобная штука. Мы можем к примеру заполнить форму используя информацией из выбранного пользователем файла:

  • Заполнить форму об аудио-файле из тегов
  • Заполнить форму об фото из EXIF

Читать полностью »

Здравствуйте, читатели-маководы!
Картинка поста
Сегодня мы с вами попробуем разобраться в азах создания виджета для Dashboard в Mac OS X. Нам понадобится программа Dashcode, предназначенная как раз для этого.

Для начала немного теории. Виджет в Dashboard — это специально сформировання веб-страничка, упакованная в бандл вместе со всем ресурсами. Ну, и немного служебной информации в довесок. Соответственно, используемый язык программирования — JavaScript. Если Вы уже знакомы с ним, а так же с HTML/CSS (хотя это вряд ли понадобится), то Вы уже способны написать простенький виджет. Если же нет, то не стоит расстраиваться, этот язык очень прост и интуитивно понятен, разобраться с ним можно достаточно быстро. Далее я буду считать, что с JS читатель более-менее знаком. Сама же статья рассчитана на новичков, так что прошу не ругать за «слишком простое изложение и детальное разжёвывание элементарных вещей». Кроме того, за дизайн тоже прошу не пинать — ну не дизайнер я, не дизайнер! Если кто хочет помочь с этим делом — welcome =)

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

Итак, приступим. В качестве цели для экспериментов я, разумеется, выбрал наш любимый хабр. Мы будем шаг за шагом делать виджет, отображающий карму, рейтинг и позицию в рейтинге хабралюдей выбранного читателя.
Картинка для привлечения внимания
Такой виджет (ну, очень похожий) уже был создан хабратоварищем neoromantic аж в 2007 году, но ссылки на скачивание не рабочие, а кроме того, та статья не содержала практического руководства по созданию подобных виджетов.
Читать полностью »

Разработка кроссбраузерного юзерскрипта HabrAjax подошла к той стадии, что для установки его в Опере требуется отдельная обширная инструкция, шире обычной. Причина — в том, что используется работа с другим доменами, один из которых — на протоколе HTTPS (plusone.google.com — кнопки Google Plus), и проверяются обновления скрипта на другом домене — userscripts.org. Всё это требует дополнительных настроек, которые в своё время были описаны прямо в юзерскрипте (ссылка в настройках "примеч.для Оперы"), но сделаны довольно кратко и с одной иллюстацией. Здесь посмотрим на вопрос шире, чтобы пользователи Оперы и разработчики юзерскриптов для неё имели инструкции под рукой и полностью понимали широту вопроса. Заодно, описаны места установки юзерстилей. Для тех, кто всё это знает, полезно будет посмотреть абзац выводов с 2 замечаниями в самом низу.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js