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

в 9:24, , рубрики: Extensions, javascript, opera, userjs, браузеры, расширения, метки: , , , , ,

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

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

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

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

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

в 8:01, , рубрики: game development, javascript, Tron, игра, метки: , ,

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

в 20:58, , рубрики: coffeescript, javascript, Веб-разработка, руководство, метки: , ,

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

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

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

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

в 18:44, , рубрики: 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.

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

в 9:17, , рубрики: file api, html5, id3, javascript, Веб-разработка, метки: , , ,

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

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

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

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

в 9:10, , рубрики: apple, css, dashboard, html, javascript, mac os x, разработка, метки: , , , , , ,

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

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

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

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

в 5:13, , рубрики: javascript, opera, юзерскрипты, метки:

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

в 16:39, , рубрики: javascript, jquery, jquery plugins, веб-дизайн, Веб-разработка, метки: , ,

Классный jQuery плагинчик может применить blur на любой html элемент.

Работает в canvas используя алгоритм StackBlur.

Blur JS

www.blurjs.com/

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

в 16:58, , рубрики: animation, css3, flipboard, javascript, Веб-разработка, Песочница, метки: , , ,

Добрый день. Наверняка многие видели приложение для iOS под названием Flipboard. При всех его достоинствах, лично меня оно в первую очередь порадовало своими забавными анимациями перелистывания. Родилась идея реализовать нечто подобное для своего сайта исключительно на Javascript и CSS3.

В данном случае я использовал CSS3 свойство transform: rotate3d(...), которое требует поддержки аппаратного ускорения графики и адекватно работает только в Chrome 16+, поэтому все нужyые свойства я ограничил префиксами -webkit-. В продакшене для пользователей с неподходящим параметрами я заменял анимацию на более простую.

Вот так выглядит готовый результат:

Живое демо

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

1...1020...572573574...580...580
Рейтинг@Mail.ru
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js