JavaScript *

Когда деревья были большими, а проблемы просто громадными, существовал такой компьютер — Радио-86РК. Многие программисты на территории бывшего СССР начали свой путь с этой машины.

Но время шло, и РК плавно ушел в небытие. Но для особых фанатов существуют эмуляторы. А в современном мире Web 2.0 вообще модно, чтобы все работало прямо в браузере. А так как правильные браузеры типа Google Chrome предоставляют все возрастающую скорость JavaScript, то подобная мода весьма оправдана. А как результат, даже эмуляторы процессоров теперь можно запускать прямо в браузере (недавно на Хабре была тема про эмулятор Спектрума).

Я так вдохновился тем Спектрумовским эмулятором, что за пару дней перенес свой старый эмулятор РК на платформу JavaScript.

Идея паттерна Observer заключается в создании зависимости типа один ко многим. При изменении состояния одного объекта(субъекта), зависящие от него объекты(наблюдатели) об этом оповещаются и обновляются. Это нужно для согласования состояния взаимосвязанных объектов без их жесткой связанности.

Всем привет.

Хочу предоставить вам на суд плагин для jQuery, позволяющий реализовать трехмерный показ предметов (например, телефонов или ноутбуков в каталоге интернет-магазина).

Пожалуй, все встречали подобные инструменты основанные на технологии flash. Однако я считаю, что её использование здесь не к чему. Поэтому потратив несколько часов я реализовал подобный функционал на javascript в виде плагина к jQuery.

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

• Сортировка на стороне сервера посредством SQL или backend'а;
• Сортировка на стороне клиента.

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

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

Поздравляем Эндрю Дюпона (Andrew Dupont) и Тоби Ланжеля (Tobie Langel) (нового официального соведущего ядра Prototype) с выходом нового 1.6.1:

• Полная совместимость с новыми браузерами. Эта версия Prototype полностью поддерживает 1.0 и более крупные версии Google Chrome, и Internet Explorer 8 как в режиме совместимости, так и в суперстандартном.
• Сохранение метаданных в элементах. С лёгкостью объединяйте джаваскриптовые пары ключей и значений с элементами DOM. Поглядите блогозапись, с которой это началось.
• Новые события мыши. Собственнические события Internet Explorer — «mouseenter» и «mouseleave» — теперь доступны для всех браузеров.
• Улучшенное быстродействие и домовитость. Часто использовавшиеся методы Function#bind, String#escapeHTML и Element#down стали быстрее, и Prototype лучше прибирает за собою.
• Собрано со Sprockets. Теперь вы можете включать репозиторий исходного кода Prototype в своё приложение и использовать Sprockets для управления зависимостями и для распространения.
• Внутреннее документирование посредством PDoc. Наша документация по API теперь хранится внутри исходного кода посредством PDoc, так что проще посылать патчи или лицезреть документацию по конкретной версии.

Подробности глядите во блогозаписи о RC2, во блогозаписи о RC3, и в CHANGELOG.

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

Недавно заметил, что наткнувшись на такое

  var array = [1, 2, 3, ];


Internet Explorer создает объект массива, в котором на самом деле 3 элемента, но length == 4 (!).
Нормальные браузеры ведут себя иначе — там 3 элемента и length == 3. В какой-то степени оба поведения мне кажутся логичными, а вы как думаете?

Проверить можно тут.

Как всем известно, в нашем «дорогом» ИЕ версий ниже 8, нету поддержки Element.prototype (а также HTMLElement, Node).

При написании console-like форума был задан вопрос: «какую разметку лучше использовать?». Среди вариантов были стандартный бб-код ([b]bold[/b]), вики-разметка(*bold*), или TeX-like разметка (\b{bold}). После недолгого совещания выбор был остановлен именно на TeX-like. Была написана небольшая библиотека, которая, по моему мнению, достаточно интересна, расширяема и гибка. Желающие посмотреть пример могут перейти по ссылке freecr.ru/TeX

Иногда у веб-разработчиков возникает задача, которая требует плавного движения объекта по экрану. Это может быть строка загрузки, какой-то спрайт (например, машинки на клавогонках) или что-то ещё. Проблема возникает, когда сдвиг даже на одну точку кажется слишком резким и портит общее ощущение от происходящего. Как этого избежать? Использовать приёмы антиалиасинга.

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

Как это сделано?

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

Известно, что в IE свойство innerHTML для таблиц является свойством только для чтения. support.microsoft.com/kb/239832

В итоге для изменения содержимого таблицы, нужно бегать по DOM. Что не всегда удобно, особенно если для каждой ячейки назначено какое-то событие.
Я надеялся, что в jquery эта ситуация исправлениа. Но нет. Код
$('#id_tr').html('<td><button onclick="my_f(new_id)">new action</button></td>');
тоже не работает должным образом.

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, на многих сайтах перестала работать волшебная кнопка «Скопировать в буфер». Перестала работать из соображений безопасности (что бы когда заходишь на какой либо сайт, у тебя в буфере не появилась левая ссылка, или рекламный текст, или злоумышленники не применили это фичу в других целях).