Конечно, вам знакомы закладки, поскольку вы используете Web-браузеры. Но знаете ли вы, что закладка может быть чем-то большим, нежели просто статической ссылкой на другой сайт? Например, можно применить особую форму ссылки (поддерживаемую почти всеми видами Web-браузеров), используя URL-схему javascript: и помещая после нее один или более операторов ECMAScript (чаще называемого JavaScript). Так как при помощи ECMAScript выполняется широкое разнообразие операций, можно применить данный подход для разработки и настройки мощных инструментальных средств, не используя ничего сложнее закладок. Немногим более десяти лет назад (когда появилась технология Java™) был придуман термин "апплет", описывающий часть богатой функциональности, предоставляемой Java-кодом, выполняющимся в браузере. Вскоре появился термин "сервлет", описывающий такую же функциональность, обеспечиваемую на сервере. Аналогично, термин "букмарклет" предлагает расширенную функциональность, доступную в рамках закладки (или ссылки). Букмарклеты выполняются полностью в браузере, как, скажем, Java-апплеты. Они выполняются так, как будто непосредственно со страницей были загружены операторы сценария. Таким образом, букмарклеты являются мощным инструментальным средством для совершенствования практического применения Web и передачи в браузер некоторых серверных функций управления. Букмарклеты подходят для многих задач, в том числе:
- предоставление страниц в доступные через Web инструментальные средства, такие как сервисы закладок или сервисы проверки данных;
- запрос данных из страницы и отправка их Web-приложениям;
- управление содержимым, представлением или навигацией страницы;
- анализ страницы с целью отображения полезных фактов и статистики;
- управление динамическими функциями Web-страницы, такими как пуск/пауза аудио или видео.
Перечисленные задачи в основном покрывают потребности реальных сервисов Web 2.0, поэтому букмарклеты стали популярным способом использования функций браузера при взаимодействии с сайтами подобного рода. Например, существуют букмарклеты, предоставляющие страницы сайтам ссылок (link site) типа del.icio.us, Digg и Reddit. Если поместить такой букмарклет в панель закладок браузера в качестве кнопки, то можно будет, находясь на любой Web-странице, одним щелчком предоставить эту страницу сайту ссылок. Таким образом, использование букмарклетов увеличивает количество функциональных возможностей браузера при минимуме программирования или вообще без него, если кто-то уже написал букмарклет, подходящий под ваши требования.
Пример простейшего букмарклета
В этом простом примере представлена кнопка (букмарклет) "отправка на del.icio.us", размещение которой в панели закладок пользователя поощряется сайтом del.icio.us. Листинг 1 - это образец букмарклета с добавлением пробельных символов для форматирования.
Листинг 1. Букмарклет для отправки сообщений на del.icio.us
javascript:location.href = 'http://del.icio.us/post?v=4;url=' + encodeURIComponent(location.href) + ';title=' + encodeURIComponent(document.title) |
Реальный букмарклет - это содержимое листинга 1, записанное в одну строку (все пробельные символы удалены). В нем просто переназначается location.href, указывая браузеру загрузить новую страницу. Последние три строки создают новый URL согласно структуре сервиса del.icio.us, используя в качестве параметров запроса текущий адрес страницы и заголовок. Многие букмарклеты, вызывающие доступные через Web сервисы, так же просты, как этот, но лишь пока искомый сервис предлагает простые API, основанные на URL. В данном случае на del.icio.us при обращении к сервису используется "GET"-доступ путем нажатия на ссылку или ввода URL в адресной строке браузера. Иногда обращение возможно только при помощи "POST"-доступа путем отправки формы в браузере. Такие сервисы также можно вызвать при помощи букмарклетов, но сделать это значительно труднее. Обратите внимание, что листинг 1 демонстрирует, возможно, не лучшую практику кодирования, поскольку на del.icio.us должен был бы использоваться "POST". Причина этого проста - "GET" проектировался для случая, когда вызов URL, по существу, не изменяет состояние Web-ресурса. В нашем же случае состояние изменяется из-за добавления точки входа в базу данных del.icio.us. Web-эксперты в подобных случаях предпочитают использовать "POST
Букмарклет поиска на IBM developerWorks
Следующий пример - это более сложный букмарклет, который я создал для обеспечения простого доступа к механизму поиска IBM developerWorks с любой страницы. Если, скажем, вы ищете что-либо на сайте технических новостей и сталкиваетесь с упоминанием о "Dojo", то, не будучи уверенным в значении этого термина, можете выделить его и вызвать данный букмарклет, чтобы получить исчерпывающую информацию о "Dojo" на IBM developerWorks. В листинге 2 приведен код букмарклета в удобном формате.
Листинг 2. Букмарклет "поиск на developerWorks" в удобном формате
/* Получить строку запроса из выделенного текста */
/* Обеспечить кросс-браузерную совместимость */
q = '' + (
window.getSelection ? window.getSelection() : document.getSelection
? document.getSelection() : document.selection.createRange().text
);
/* Если отсутствует выделенный текст, запросить у пользователя */
if (!q)
q = prompt('Enter a search phrase on IBM developerWorks:', '');
if (q!=null){
/* Создать основную строку для поиска на IBM developerWorks */
dWsearch = 'http://www.ibm.com/developerworks/search/searchResults.jsp?'
+ 'searchType=1&'
+ 'searchSite=dW&'
+ 'searchScope=dW&'
+ 'Search.x=0&Search.y=0&'
+ 'Search=Search&';
/* Избавиться от пробелов в строке запроса и перейти на созданную страницу */
location.href = dWsearch + 'query=' + escape(q).replace(/ /g, '+');
}
void 0
|
ECMAScript-процедура, приведенная в листинге 2, - это уже не та единственная строка из листинга 1. Она станет букмарклетом, когда вы предварите ее выражением javascript: и удалите все символы перевода строки, а также прочие пробельные символы. Мне приходилось видеть букмарклеты в два раза длиннее приведенного в листинге 2, так что подобным образом можно решать сложные задачи программирования.
Поиск на developerWorks в действии
Полезно сделать чаще всего используемые букмарклеты доступными в браузере по одному щелчку мыши. В данном разделе показывается, как это осуществить в Mozilla Firefox, используя вариант букмарклета из листинга 2, который я встроил в данную ссылку: developerWorks search. В браузере Firefox щелкните правой кнопкой мыши на этой ссылке и выберите "Bookmark this link". Затем выберите "Bookmarks Toolbar" в качестве папки для создания закладки. Теперь в верхней части каждого окна браузера должна отображаться кнопка "developerWorks search". Если это не так, убедитесь что отмечен пункт "Bookmarks Toolbar" списка "Toolbars" из меню "View".
Установив букмарклет, можно перейти на произвольную страницу, выделить какой-нибудь текст и нажать кнопку в инструментальной панели. Если нажать кнопку, не выбрав никакого текста, будет выведена подсказка. Рисунок 1 - это скриншот с подсказкой. Левее диалогового окна подсказки в инструментальной панели можно увидеть данный букмарклет, а также вход в панель, в которой я размещаю другие часто используемые букмарклеты.
Рисунок 1. Букмарклет поиска на developerWorks в действии
Уче Огбуйи (Uche Ogbuji), главный консультант, Fourthought
