JavaScript *

Привет, Хабр

В этом коротком очерке хотел бы рассказать о маленькой (по словам авторов) библиотеки на JavaScript — Raphaël. Данная библиотека использует для работы SVG и VML и служит, как не сложно догадаться для облегчения работы с векторная графикой в вебе.
Так же по утверждению создателей работает во всех актуальных на даных момент браузерах, а именно Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. К сожалению обошли создатели внимание вторую лису, хотя сюда по данным лайвинтернета на ней приходится почти 2% пользователей, что вообще немало. Да, и не смотря на то, что Хром не заявлен, в нем тоже все работает как часы.

Честно говоря, у меня, давно сложилось впечатление, что если клиент (в данном случае броузер) что-то должен с сервера забирать без перезагрузки страницы, то это обязательно должен быть AJAX XMLHttpRequest. Ткнул куда-то пользователь, сработало событие, сгенерировался AJAX XMLHttpRequest-запрос, пришел с сервера ответ, коллбэк обработал его и пользователь что-то увидел.

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

В процессе работы над интерфейсом одного продукта, появилась надобность в изготовлении собственного дизайна кнопок. За это время код, который заменяет стандартную кнопку на требуемую несколько раз переписывался и в данный момент тоже далёк от идеала. Учитывая все текущие проблемы кросс-браузерности, за это время выяснились и получилось нижеописанное.

Допустим, что она должна выглядеть примерно так:

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

После небольшого исследования выяснилось, что не всегда данный размер возможно получить обычными способами. Будь то методы jQuery, prototype или обычное обращение к параметрам DOM.

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

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

Пример, Source

Многим JavaScript-разработчикам приходилось сталкиваться с объектами, перечисленными в заголовке, например, при решении следующих задач:
— создание визуальных редакторов (wysiwyg),
— поиск в окне браузера,
— выставление BB-кода,
и т.д.

В этой статье автором предпринята попытка собрать перевод документации об этих объектах в одном месте + написать небольшие сопроводительные примеры. Перевод вольный, не дословный, так что если встретите неточность или корявую формулировку — пишите в комментариях.

В целом пост носит справочный характер, и, надеюсь, кому-то упростит разработку.

Будьте осторожны — сегодня в Сафари сломалась установка кук, видимо в связи с переходом на летнее время. Период жизни кук сокращается ровно на час, а меньше чем на час куки вообще не сохраняются.

Test case:




Проверено в Safari 4 Public Beta (528.16) под Windows.

В отличие от расширения Greasemonkey в мозилле, Опера не предоставляет аналога функции GM_xmlhttpRequest для кросс-доменных запросов (XDR). Это, понятное дело, сильно ограничивает возможности и сферу применения UserJS. Используя XDR, например, можно реализовать Last.fm-скробблер для различных онлайн-проигрывателей музыки (типа vkontakte.ru или MySpace).

Однако кросс-доменные запросы можно заставить работать в Опере с помощью трюков с iframe'ами и window.name транспортом. Под катом я покажу как это сделать и предъявлю простую библиотеку, реализующую все колдовство.

Начал замечать что на Хабре появляются статьи по программированию, может на это натолкнули фразы типа «хабр уже не тот», но это не так важно, потому как мне это нравится, всегда хотелось узнать что-то новенькое … моя первая статья привела к огромному краху, поэтому почитав людей, я повторю свои усилия и начну цикл заметок о JavaScript от самого начала и до тех пор, пока это будет востребовано =)

Мы парсим JSON-строку в JSON-объект, когда обрабатываем AJAX-ответы сервера. Обычно, для парсинга JSON-строки мы используем eval или new Function, однако IE8 и Firefox3.1 имеют встроенную поддержку JSON (встроенный парсинг работает значительно быстрее). Как определить на практике выбор между этими тремя методами? И как узнать чья производительность быстрее среди такого большого количества браузеров?

Достаточно много браузеров (Opera 9.6, Google Chrome 2, Safari 4, Firefox 3.5) обзавелись поддержкой весьма удобного интерфейса ElementTraversal, который позволяет перемещаться по DOM-дереву, игнорируя текстовые узлы. В этих браузерах для каждого элемента стал доступен следующий набор новых getter'ов:

• firstElementChild — первый дочерний элемент;
• lastElementChild — последний дочерний элемент;
• nextElementSibling — следующий соседний элемент;
• previousElementSibling — предыдущий соседний элемент;
• childElementCount — количество дочерних элементов.

Вспомнили на работе про клавогонки. Я немного поиграл, но мои навыки машинистки не дают мне особых шансов )

Зато шансы даёт мой ум — и я им воспользуюсь в полной мере.
Итак, всего-то и необходимо, что знать немного JavaScript, да представлять, как создатели могли защитить своё детище.

Защиты, из тех, что я увидел — это подсовывание левых букв при копировании и подмена русских букв английскими. Естественно я это увидел не с первого раза )

В итоге задача проста: берём слова из источника (благо они так мило выделяются), вставляем по буковке (мы же печатаем) в поле для ввода, не забывая вызывать событие нажатия кнопки (конкретнее — keyup). Не хватает, конечно, возможности ошибаться — но добавить её легко — было бы время. Также не пугает капча, вылезающая при переходе за 500 знаков в минуту — она обходится с помощью знакомых, или помощью того же JavaScript'а.

Ну и да, ещё необходимы Firefox + Firebug :)

Все мы знаем прекрасные библиотеки sIFR3 и FLIR, которые на лету помогают использовать любой шрифт на веб-страницах.
Правда, с моей точки зрения, их использование (а именно установку и настройку) нельзя считать легким трудом.

Сегодня я расскажу о библиотеке Typeface.js, которая, как видно из названия, работает на чистом JavaScript.

Совсем недавно открыл для себя интересный шаблонизатор под названием PURE.

Им удобно пользоваться, у него хороший сайт, а также поддержка самых разных JavaScript-библиотек (Prototype, jQuery, MooTools, Sizzle, скоро Dojo).

Введение

Как известно, Джон Резиг (John Resig) создал абсолютно новый движок селекторов под названием Sizzle(selector[, context]).

Его можно использовать как отдельно от jQuery (всего 4Kb в формате min/gzip), так и вместе с ним.

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

Предистория:

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

Описание скрипта:

Скрипт написан на чистом яваскрипте. Элемент меню представляет собой элемент списка li обернутый в тег a, внутри элемента могут быть любые теги. Каждое подменю является отдельным ненумерованным списком. Базовые элементы(которые мы видим в нераскрытом состоянии) являются тегом с установленным float:left и блочным режимом отображения.

Всем привет, сегодня речь пойдет про использование букмарклета, или закладки для браузера.

Кто не знает, это такая штука, которую можно добавить в закладки (да, я сегодня дебютирую в роли Капитана Очевидность :) и, при нажатии на нее, произвести какой-нибудь эффект.

Примером может служить герой сегодняшней заметки, который расположен по адресу http://ulizko. com/demo/allthat/. Инструкция по применению:

1. Перетащите ссылку «link» на панель закладок или щелкните по ней правой кнопкой мыши и выберите пункт меню «добавить в избранное».
2. Зайдите на какой-нибудь сайт, вроде http://twitter. com, и нажмите на эту закладку (ну или на избранное).

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

Но. Мы сегодня не об этом, а о том, как делать такие штуки в принципе.

Хочу рассказать про один интересный способ создания приложений на JavaScript с родным виндовым GUI.

Вообще, существует куча разных вариантов написания виндовых приложений на JavaScript:

1. HTA и WSH — HTML Applications и Windows Script Host — это, вероятно, самые известные технологии. HTA фактически представляет собой HTML страницу с расширенными правами в системе — возможностью лазить в сеть, гадить в реестр, файловую систему и подключать к этим делам ActiveX. С использованием HTA сделаны многие компоненты самой Windows.
2. .NET Framework — этому вообще по барабану, на чем вы пишете, лишь бы итогом был MSIL. Возможно, JScript.NET вместе с Windows.Forms могут вызвать у кого-то ощущение родного виндового интерфейса. Лично меня они совсем не радуют — ни визуально, ни скоростью.
3. XULRunner — framework от Mozilla предлагает Gecko вместо IE, XpCOM вместо COM/ActiveX. Это всего за 20 мегабайт оверхеда.
4. wxJavascript — известная кросс-платформенная библиотека wxWidgets теперь и для JavaScript. Все это благодаря JS-движку SpiderMonkey от Mozilla и стараниям одного бельгийца. Кстати, этот же уважаемый — автор mod_js для Apache.

Ввиду того, что все вышеописанное уныло, громоздко и требует изучения, предлагаю рассмотреть еще один вариант — WSO.

С момента первого упоминания об AJAX в статье Джесси Джеймса Гарретта «Новый подход к разработке веб- приложений» 18 февраля 2005 года прошло уже 4 года. За это время наверно каждый веб- разработчик хоть раз испробовал эту технологию, и теперь обычного пользователя интернет уже не удивить динамической валидацией форм, автодополнением запросов в строке поиска, всплывающим контекстным меню и прочими ещё недавно диковинными вебдванольными интерактивными радостями, а современные JavaScript фрэймворки делают процесс разработки таких скриптов на порядок быстрей, эффективней и приятней для программиста. Но почему до сих пор подавляющее большинство разрабатываемых веб- сайтов придерживаются стандартной модели загрузки контента и не перешли полностью на AJAX платформу? Зачем каждый раз перезагружать всю страницу при нажатии на внутреннюю ссылку, когда нужно изменить только блок контента, а JavaScript файлы, CSS и большая часть HTML разметки не требует обновления?

В связи с достаточно широким выбором неплохих отладчиков, JavaScript-программисты могут получить достаточно много пользы, изучая то как их можно использовать. Их пользовательские интерфейсы становятся все более совершенными, более стандартизированными между собой и более легкими в использовании, что делает их полезными как для экспертов так и новичков в отладке JS. В этой статье мы обсудим передовые методы отладки для диагностики и анализа ошибок, используя типичное веб-приложение.

В настоящее время средства отладки доступны для всех основных браузеров.

• Firefox имеет хорошо известное расширение Firebug
• IE8 выпускается со встроенными Developer Tools
• Опера 9.5+ поддердивает отладчик Dragonfly
• У Safari есть JS-отладчик Drosera и DOM-вьювер WebInspector. В более свежих версиях отладчик интегрирован в WebInspector.

На данный момент Firebug и Dragonfly наиболее стабильны. Утилиты IE8 иногда игнорируют контрольные точки, а во время написания этой статьи WebInspector имеет некоторые проблемы совмстимости с последними билдами Webkit.

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