JavaScript *

Всем привет!

31 октября, 7 ноября и 10 ноября в Москве пройдут интереснейшие мастер-классы по javascript ;)

Материал к ним готовился более полугода.

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

По опыту предыдущих мастер-классов — получилось интересно и очень полезно.

Сегодня PsychodelEKS точно подметил по поводу API джаваскриптового сжатия файлов, недавно встроенного Yahoo в BrowserPlus:

Уж было подумал, что они портировали алгоритм сжатия на js, но оказалось, что это просто браузерный интерфейс к архиватору =)

А вот возможность сжимать большие объёмы текстовых (json) данных на стороне клиента перед отправкой на сервер, была бы удобна в современных веб-приложениях.

Конец цитаты.

На эту тему я очень рад сообщить всем вам приятную новость: в недрах W3C редактор Арун Ранганатан (Arun Ranganathan) подготавливает черновик стандарта File API, в значительной мере поддерживаемого свежими еженощными сборками Файерфокса. Этот стандарт определяет особые API, посредством которых джаваскрипт может читать файлы на машине у пользователя, затем по-разному преобразовывать их, изготавливая при необходимости URLы «data:...» или base64-кодированные строки, а затем совершать с ними что угодно желаемое (например, отсылать на сервер, или использовать в джаваскрипте, или в CSS...).

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

(Это то самое и есть, что делает новый API BrowserPlus, так что тогда он не будет для этой цели нужен, а довольно будет и одного Файерфокса.)

Пока же этого ещё не произошло, я предлагаю вам лицезреть одно зрелищное приложение, недавно упомянутое на hacks.mozilla.org — оно называется Font Dragr, навешивается на некоторый сайт и позволяет читателю сайта закинуть (drag-n-drop) на страницу этого сайта какой-нибудь файл шрифта с собственного диска, чтобы эта страница отображалась на сайте именно этим шрифтом. Отображаться начинает сразу же, так как файл не передаётся на сервер, а преобразуется и скармливается во браузер же, через CSS.

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

Артель BrowserPlus (из Yahoo) выпустила API для сжатия файлов на стороне клиента. Как объясняется в нижеследующем скринкасте, джаваскриптовый API позволяет вам упаковывать и сжимать файлы в клиенте посредством LZMA или tar.


    «Client Side Compression» выложил Lloyd Hilaiel на Vimeo

Вы можете читать далее о реализации или испытать демонстрацию живьём (потребуется BrowserPlus).


    Прилад Browser Plus для упаковки на стороне клиента

Использовать этот API нетрудно: вызываем надобный метод и посылаем ему файлы:

BrowserPlus.Tar.tar({'files':files});
BrowserPlus.LZMA.compress({'files':files});

На GitHub доступны оба эти расширения — LZMA и tar.

Нюансы перевода:  слово «прилад», давно живущее в великорусском языке (как минимум, со времён Даля), здесь служит переводом технического термина «add-on» (а не «device», как в украинском), слово же «артель» означает команду разработчиков (в оригинале — «team»).

Думаю, пост будет интересен начинающим изучать JavaScript и DOM.

Недавно я провозился больше получаса пытаясь понять, почему приведенный ниже код возвращает «undefined» во всех браузерах кроме Internet Explorer'а.

Недавно видел на хабре спор по поводу того, что нам не нужны никакие скриптовые языки, кроме javascript. Утверждение, конечно, спорное, но меня заинтересовала возможность применения 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 )