JavaScript *

v8cgi — обертка для JS-движка v8 от гугла. Меня попросили его поставить на сервер и он меня приятно удивил непредсказуемо малой прожорливостью и удобством эксплуатации.

Много людей знают, что такое getter'ы и setter'ы во многих языках программирования. Есть эти чудесные штуки и в JavaScript, хоть узнал я об этом совсем недавно (темень я необразованная). Речь пойдёт не только и не столько про методы getSomeProperty()/setSomeProperty(...), а про более интересную реализацию — псевдо-аттрибуты, при изменении которых будут вызываться функции-обработчики.

Преамбула

Занимаясь сейчас написанием интерфейса/middleware для одной IPTV-STB приставки, столкнулся с достаточно медленной работой javascript-парсера встроенной Оперы при вызове eval (пока встроенной была не Опера, а ANT Galio все было еще печальнее, но это тема отдельного разговора). То есть, там вообще все работает медленно, т.к. это все-таки просто приставка, но в данном конкретном случае с тормозами надо было что-то делать — через ajax грузилась программа ТВ-передач, и пока eval парсил приходящую JSON-строку, приставка на действия пользователя вообще не откликалась (причем достаточно долго). В итоге я решил вопрос использованием JSONP, который заработал на приставке в несколько раз быстрее (а заодно и решил вопрос с кросс-доменностью), но попутно задумался над производительностью парсеров в принципе. На хабре нашел только одну статью про это, но JSONP там не было… Плюс в комментах были несколько позитивных критических замечаний, поэтому решил провести свое тестирование. Используются все парсеры с JSON.org и браузеры Opera 9.64, Firefox 3.5, Internet Explorer 8, Google Chrome 2, Safari 4.

вот такой странный, но ДЕЙСТВУЮЩИЙ способ :)

function clearFileInputField(Id) {
  document.getElementById(Id).innerHTML = document.getElementById(Id).innerHTML;
}

* This source code was highlighted with Source Code Highlighter.

пример работы — designformasters.info/lab/clear-file-input/index.html (спасибо Jenek )

В последнее время во многих статьях (на Хабре и не только) я часто вижу примеры эмуляции приватных свойств объектов в JS через замыкания. Авторы обычно объясняют это своим желанием использовать такой механизм ООП, как инкапсуляция, и тем самым гарантировать работу с объектом исключительно посредством его методов, не затрагивая напрямую свойства.

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

Хочу поделиться одной полезной утилиткой, написанной на pure JavaScript, — URL. По сути это небольшой парсер URL'ов, работающий почти как window.location, но не перезагружающий страницу браузера при манипуляциях.

А заодно скажу пару слов про getters & setters в JavaScript.

UPD1: по просьбам трудящихся, вынесу сюда примеры:

// Пусть текущий URL = 'http://my.site.com/somepath/'
var u = new URL('relative/path/index.html')
u.href // my.site.com/somepath/relative/path/index.html
u.href = '/absolute/path.php?a=8#some-hash'
u.href // my.site.com/absolute/path.php?a=8#some-hash
u.hash // #some-hash
u.protocol = 'https:'
u.href // my.site.com/absolute/path.php?a=8#some-hash
u.host = 'another.site.com:8080'
u.href // another.site.com:8080/absolute/path.php?a=8#some-hash
u.port // 8080
// и так далее, и тому подобное

* This source code was highlighted with Source Code Highlighter.

Работает в FF3+ (может и в 2+, не пробовал) и в IE6+ ( и это — моё ноу-хау :-) ).
Разобрана в статье также полностью кросс-браузерная реализация, но в использовании — немного более громоздкая:

// Пусть текущий URL = 'http://my.site.com/somepath/'
var u = new URL('relative/path/index.html')
u.href() // my.site.com/somepath/relative/path/index.html
u.href('/absolute/path.php?a=8#some-hash')
u.href() // my.site.com/absolute/path.php?a=8#some-hash
// и т.д.

* This source code was highlighted with Source Code Highlighter.

Да, и я привожу свой листинг полностью, извиняйте, так надо.

Суть паттерна в том, что есть класс с фактической функциональностью (компонент) и опциональными классами-обертками, которые дополняют основной функционал (декораторы). А фишка в том, что декораторов может быть сколько угодно, совмещаться они могут в произвольном порядке и (поскольку требуют от компонента только интерфейса) — могут работать с разными компонентами.

Безусловно, реализовать что-то похожее можно даже за счет только лишь того, что функции в JS являются объектами первого уровня, но мне бы хотелось поделиться реализацией весьма близкой к ГОСТу GoF'у.

UPD: ссылка на рабочий пример, спасибо Barttos.

Перед хабракатом: в скрипте присутствует инкапсуляция, наследование (по сути) осуществляется через call, jQuery отсутствует — если Ваша идеология не позволяет принять такие ограничения, пожалуйста, не пишите об этом в комментах и, еще лучше, не читайте эту статью. Конструктивная критика и вопросы приветствуются.

С приходом 10го флеша, ФФ3.5 и ИЕ8, на многих сайтах перестала работать волшебная кнопка «Скопировать в буфер». Перестала работать из соображений безопасности (что бы когда заходишь на какой либо сайт, у тебя в буфере не появилась левая ссылка, или рекламный текст, или злоумышленники не применили это фичу в других целях).

Сегодня столкнулся с такой проблемой: нужно ввести пароль, содержащий русские символы. Но не тут-то было. Safari просто отказалась переключать язык! Простым решением было бы ввести пароль в TextEdit и скопипастить его в поле для ввода пароля, но организм требовал более элегантного решения проблемы. И вот, вспомнив приемы CSS-джитсу и Javascript-фу, превозмогая пятничное стремление пойти напиться или пройти наконец Braid, ваш покорный слуга ринулся в бой...

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

Так сложилось исторически (из-за соображений безопасности), что Javascript-обьект XMLHttpRequest, который лежит в основе AJAX, не может делать кросс-доменные вызовы. Это бесполезное ограничение: для злоумышленников не представляет особой проблемы, а для разработчиков создает некоторое неудобство. В следующих поколениях браузеров эту проблему обещали решить, но не раньше чем W3C хотя бы одобрит новые стандарты.

Есть море хаков чтобы обойти это ограничение, но самый популярный это Dynamic Script Tag Hack. Именно через этот хак организован доступ к многим API современных веб-приложений.

InfoVis Toolkit — предоставляет инструменты для создания интерактивных представлений данных в Веб с помощью JavaScript. Распространяется с открытым исходным кодом под лицензией BSD. Поддерживаются основные браузеры: IE6+, Firefox2+, Safari3+, Opera9.5+

Те из вас кто следит за автором на Github могли заметить, что недавно он добавил новый проект под названием «prettyPrint».
«prettyPrint» — браузерный дампер переменных для JavaScript аналогичный cfdump для ColdFusion. Он позволяет выводить на экран объекты любого типа в виде таблиц для просмотра во время отладки.
Посмотреть пример.

Оператор сравнения (==) в JavaScript не является транзитивным. Переводя с математического, это означает, что из того, что a==b и a==c не следует, что b==c.

Простой пример:

var a = "строка";
var b = new String(a);
var c = new String(a);

alert(a==b); // true
alert(a==c); // true
alert(b==c); // false

В чём же дело? А дело в том, что переменные b и c — это объекты (причём разные), а a — примитивное значение (строковой литерал). Две переменных-объекта считаются неравными, если они ссылаются на разные объекты. При сравнении же примитивного значения и объекта используются другие правила — всё приводится к строкам и затем сравнивается.

Чем это чревато? Чревато очень трудноуловимыми ошибками. С точки зрения программиста примитивное значение типа string и объект, созданный из строки конструктором String(), практически неотличимы, и даже во многих книгах этот момент упоминается мимоходом, без конкретных примеров.

Аналогичная ситуация и с другими примитивными типами и соответствующими объектами, например, Number.

Так что будьте осторожны при сравнивании двух переменных!

Наконец кто-либо из «библиотек-гигантов» решил внедрить корректную обработку document.write при использовании AJAX. MooTools Core Dev Thomas Aylott демонстрирует алгоритм переопределения document.write.

Использование данного алгоритма позволит в AJAX осуществлять подгрузку HTML страниц со скриптами содержащими document.write. Такими могут быть страницы с Google AddSense, страницы содержащие JavaFX, другие.

Из анализа алгоритма вытекает

jsImageBox — компактный, легкий в подключении скрипт, аналог lightbox. Позволяет показывать увеличенные изображения во всплывающем блоке.

Код скрипта занимает всего 9кб.

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

Бесплатен. (лицензия GPL)

Изначально разрабатывался для собственного использования.

Сайт проекта JSImageBox — JavaScript галерея

Я только что изучил API нового поисковика Bing от Microsoft (который фактически является ребрендингом Live Search, также с переключением на «просмотр с малой полосой пропускания», чтобы иметь возможность использовать документы более гибко), и нашёл интересный финт для защиты кода от выброса исключений.

Всем привет!

Очень часто слышу вопрос «где в интернете взять справочник по javascript»?

Большинство справочников содержат устаревшую информацию и практики программирования.
До текущего момента самое современное, чем можно было пользоваться — MDC/MSDN. А там многое только на английском.

Хочу представить новый, лично мною переведенный/написанный справочник: http://javascript.ru/manual.

Пока что основной javascript, в дальнейшем постараюсь расширить и лучше
завязать с другими тематическими статьями сайта.
Буду рад, если пригодиться.

P.S. Пожалуйста, пишите комментарии, давайте на него ссылки и рекомендуйте. Будем улучшать и дальше.

P.P.S. Оффлайн-вариант справочника также есть, в формате CHM.

Декораторы функций позволяют добавить дополнительное поведение функции, не изменяя ее. Сигнатура оригинальной и декорированной функции полностью совпадают.

Проверяет на валидность json код, строит разного вида древа элементов.

Проект парсера