JavaScript *

Для начала я хочу поблагодарить m007, который подал идею, как можно упростить Programmer-friendly интерфейс взаимодействия Клиент(JS)-Сервер(PHP), что и поспособствовало написанию этой статьи.

Данная статья является заключительной, в которой я объединю JS-Шаблоны, PHP Model-controller, и добавлю Динамическое создание UI методов на JS (некоторые идеи которого были взяты из статьи m007). Тем самым мы получим на выходе неплохой и удобный фундамент для создания своих AJAX приложений.

Уже имеется множество javascript фреймворков, инструментов, множество обсуждалось и тут, однако один очень интересный проект мы упустили из виду. Итак, встречайте



Сам по себе это не самостоятельный фрэймворк, это набор виджетов (как их называют разработчики проекта). Сам пакет основан на MooTools. Однако имеет уже множество встроенных функций, таких как автокомплит, календари и т.п.

Все что описано ниже касается только клиентской части реализованной на JavaScript. Приветствуется критика технического характера (например, пути обхода), но не критка в стиле «нафига это нужно».

При разработке модуля подключения апплетов к некой платформе (назовем ее Hyper) появилась задача обеспечения безопасности, так как подключаемый апплет кроме пассивного блока данных (content) содержит и активный (code). А в активном блоке невнимательный разработчик (злоумышленник) может обратиться к глобальному объекту window и получить доступ к переменным или важным методам ядра и сделать подмену, что в лучшем случае просто приведет к краху платформы (в пределах браузера конечно), а в худшем установка различных хуков не влияющих на работу системы, но перехватывающих персональные данные пользователя. В дальнейшем ничего не подозревающий пользователь будет пользоваться гаджетом «Часы от Боба», который по тихому собирает о нем информацию, или рассылает спам по адресам из контакт листа.

Откопал у Kevin van Zonneveld довольно интересную библиотку php2js с кучей полезных функций типа str_replace, strip_tags, serialize-unserialize.
Рекомендую ознакомиться: kevin.vanzonneveld.net/code/php_equivalents/php.js

В текущем проекте была задача написания полуавтоматического граббера страниц. Для этого необходимо было делать инъекцию скрипта в текущую страницу. Решил таким букмарклетом:

<a href=«javascript:(function(){var d=document,s;
s=d.createElement('script');
if(typeof s!='object')s=d.standardCreateElement('script');
s.src='http://example.com/js/bookmarklet.js';
s.type='text/javascript';
d.body.appendChild(s);})();»>Do it!</a>

В более читаемом виде:

(function(){
 var d = document, s;
 s = d.createElement('script');
 if(typeof s != 'object'){
  s = d.standardCreateElement('script');
 }
 s.src = 'http://example.com/js/bookmarklet.js';
 s.type = 'text/javascript';
 d.body.appendChild(s);
})();

Оттестировано в IE6, IE7, FF2, FF3, Opera 9.2, Opera 9.5, Safari.

© shamansir.wordpress.com

Представляю вам набор функций, которые у меня лежат в отдельном файле utils.js — это функции, которые я использую чаще всего. Они стараются быть кроссбраузерными и проверены на IE6/7, FF2 и Safari 2 и на боевой, сложной системе, в XHTML документах. Должны, по идее, работать, и на других, но не очень старых версиях браузеров — проверку браузера я использовал только в исключительных случаях. Некоторая часть из них, конечно же, просто нарыта на просторах интернета (где — обычно указано) и заимствована ввиду открытости, а большая часть — сконструирована из многих ресурсов и своих идей (и советов коллег), дабы работать на ура — поскольку часто в разных скриптах не учитываются разные тонкости, которые, тем не менее — при ближайшем рассмотрении — оказываются общностями :), ну и быть довольно читабельными.

Сейчас на 99.9% сайтов используются PHP шаблоны. Во многих движках это является неотемлемой частью. Я хочу представить вам совершенно другой подход.
Недавно я разрабатывал тестовое задание и решил попробовать использовать JS шаблоны.

Заглянув в код страницы internet.yandex.ru, увидел интересную штуку:

< — NOTE: Не подключать в production -->

Сам яваскрипт в файле оказался следующим

Немного ранее я уже рассказывал о разработке компании Aptana — серверной платформы Jaxer, которая позволяет развёртывать приложения на JavaScript на стороне сервера, и объединять таким образом код клиентской и серверной стороны. Конечно, есть много спорностей в таком подходе, как и вообще применимости такого языка как JavaScript для разработки полноценных веб-приложений на сервере, но это не останавливает разработчиков — несмотря на ограничения, вполне можно разрабатывать интереснейшие приложения. Но вот уникальна ли эта платформа? Теперь нет.

Открытый проект Helma — написанная на Java платформа для исполнения серверных приложений на JavaScript. Сейчас поддерживается версия 1.7, однако с развитием движка Rhino, который отвечает во всех проектах подобного рода за интерпретацию JS, будем ожидать, что и вторая версия будет поддерживаться. Платформа обладает и встроенным веб-сервером, в качестве которого используется Jetty, и даже собственная объектно-ориентированная база данных (на основе XML), которая прозрачно интегрирована в платформу и позволяет сохранять и кешировать объекты между сессиями. Также есть встроенные средства отладки приложений, при этом все доступно через веб-интерфейс.

Заглянем в прошлое

Не так давно в статьях раздела JavaScript были представлены широкой публике трекбары:



Проект неожиданно получил продолжение. К разработке присоединились камрады abarmot и 1602, а активное обсуждение привело к улучшению текущего и реализации нового функционала. Поэтому, появилось желание сделать проекту свой собственный «дом», где он будет жить и развиваться, что было успешно реализовано на sourceforge.net. Теперь вместо того, чтобы писать статью на каждое изменение в трекбарах автор может спокойно обновлять архивы и описания, а вы самостоятельно скачивать последние версии.

Пройдясь по хабра-поиску выяснил, что готового решения для кропа-ресайза изображений, на движке JavaScript/HTML/CSS еще не предлагалось. Поэтому, позвольте представить вашему вниманию модуль для ваших сайтов, частично реализуюший функционал редактирования, распространенный на фото-хостингах.

К делу

Внешне задумка выглядит так:

В данной версии разработчики добавили очень нужную вещь: селективное отключение JavaScript debugger-a и Net мониторинга, ибо не для каждого сайта нужны эти опции, а производительность Firefox-a они кушают значительно.

Всем привет.

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

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

Совсем недавно на хабре пользователем bur был опубликован пост про приятные ползунки TrackBar. Они мне понравились своей простотой и возможностью их использования в совокупности с jQuery. Чуть позже был так же пост про слайдер, который определял диапазон времени, но его порицали за большой вес и «тяжесть». Тогда у меня и родилась идея создать на основе TrackBar ползунков для выбора произвольного диапазона времени. Придумано – сделано. И сейчас я представляю свои наработки хабраобщественности.

Итак, было:

Стало:

Цель статьи — показать, что из себя представляет «ненавязчивый JavaScript», для чего он нужен, и чем он лучше «навязчивого» JavaScript. В рунете я подобных статей не встречал (может они и есть, но мне на глаза не попадались и немного погуглив, я тоже ничего не нашел), а как показывает практика — очень многие не знают, что это такое и как этим пользоваться.

Не так давно на Хабре был опубликован сей труд: «Еще раз о трекбаре», в котором описывается простой скрипт для создания таких вот ползунков:


Благодаря откликам пользователей возможности первой версии скрипта были существенно расширены. Она выросла до v3.0, с одновременным обновлением статьи, описывающей новый функционал. Однако, некоторые изменения откладывались «на потом», т.к. требовали более серьезного вмешательства в код. И вот долгожданное «потом» настало и вышла четвертая версия JS-TrackBar.

IE8b1 представляет поддержку очень интересной спецификации — Selectors API. Пока что это W3C working draft, но бьюсь об заклад, что т.к. IE и Webkit уже реализовали спецификацию, Presto и Gecko не заставят себя ждать.
UPDATE: разработчики Firefox пояснили, что в релизе 3.0 ожидать поддержки Selectors API не приходится, однако в 3.5 оно, скорее всего, реализовано будет.
Итак, что мы имеем? Cпецификация содержит два новых метода интерфейса IHTMLElement'a — querySelector() и querySelectorAll(), которые принимают в качестве параметра строку с любым корректным CSS-селектором. querySelector возвращает ссылку на первый HTMLElement, удовлетворяющий указанному CSS-селектору; querySelectorAll возвращает StaticNodeList с элементами, удовлетворяющими указанному CSS-селектору.
Таким образом, у нас появляется новый элегантный и удобный способ поиска документов в DOM'е.
Можно будет забыть об изобретениях вроде document.getElementsByClassName — нужно всего лишь выполнить document.querySelectorAll(".myClass") и получить все элементы с данным классом.
В данный момент эти методы есть почти во всех популярных js-фреймворках, но в браузерах, не поддерживающих Selectors API работают они по одному принципу — обходят DOM и ищут элементы, соответствующие заданному CSS-селектору.
Для того, чтобы сравнить производительность библиотек и родной поддержки Selectors API авторы Webkit создали testcase. Результаты как Webkit'a, так и IE8b1 впечатляют.
Впрочем, необходимо помнить, что Selectors API ограничены уровнем поддержки браузером CSS-селекторов. Не поддерживает IE8b1 CSS3-селектор :last-child, и не вернёт document.querySelectorAll("body:last-child") ничего.
Не обошлось и без небольшой ложки дёгтя — IE8b1 поддерживает спецификацию Selectors API лишь частично, вот цитата из статьи в MSDN:

Because Internet Explorer 8 does not formally support XHTML documents, it does not support the namespace features of the W3C Selectors API specification, such as the NSResolver parameter.

Но для сайтов, где namespaces не используются, эта ложка дёгтя бочку мёда не испортит.
Также интересный факт — реализация Selectors API открывает потенциальную угрозу кражи информации о посещённых страницах в случае успешного внедрения javascript'а на страницу-жертву можно отправить href'ы всех document.querySelectorAll("a:visited") и таким образом узнать, какие ссылки на данной странице пользователь уже посещал. Спецификация оставляет разрешение этой проблемы производителю, реализующему Selectors API.
В результате IE8b1 игнорирует псевдоклассы :visited и :link в качестве параметров querySelector/querySelectorAll.
А вот и пример!

Много уже написано на тему трекбаров, но в комментариях к прошлым хабратопикам кто-то интересовался трекбаром с двумя «ползунками», чтобы можно было смещать сразу весь диапазон (а не каждые ползунки по отдельности), ну и отдельно каждый ползунок, естественно (да еще и написанный изначально для работы с датами). Я свято клялся отыскать такую знатную вещь, ибо видел ее на днях, и вот только сейчас наткнулся на нее опять.
Позвольте вас познакомить — The sliding date-picker.


Посмотреть пример работы
Посетить страницу с описанием и скачать

Могу ошибаться, но решения данной проблемы на Хабре еще не приводилось, так что позвольте поделиться с вами полезным куском кода. Задача: по нажатию Ctrl+S заблокировать браузерный диалог о сохранении страницы и запустить пользовательскую функцию.