JavaScript *

В данной версии разработчики добавили очень нужную вещь: селективное отключение 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 заблокировать браузерный диалог о сохранении страницы и запустить пользовательскую функцию.

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

Понадобилась тут такая «штука», как TrackBar только с двумя ползунками, готового решения на jQuery не нашел, решил писать самостоятельно, правда не на jQuery а на чистом JS. Вроде от этого хуже не стало. «Штука» эта нужна была для выбора числовых значений в формах информационного киоска.

Если вы разработчик AJAX приложений или интерфейсов, то вам это окажется полезным. Если приходится хранить некоторые достаточно обьемные данные в структурированном виде на стороне клиента, то каким образом это оптимально сделать? Конечно, вам могут помочь обычные массивы (тип данных или, скорее, встроенный обьект Array), и он даже предоставит базовые функции для управления массивом данных и основные операции над ним, но это очень, скажем так, низкоуровневое решение, часть функционала может зависеть от реализации JS-движка в конкретном браузере. Кроме этого, что-то делать с сохраненными данными нужно писать достаточно много собственного кода, и в конце концов ваш код превращается в такое нагромождение вызовов, функций и переменных, что разобраться в этом ой как сложно.

Да, выход из этого есть. В частности, самым лучшим решением (в теории) является использовать специальных плагинов для расширения функциональности браузера, для примера, в Google Gears встроена полноценная СУБД (SQLite), и вы получаете в свое распоряжение все ее возможности прямо в JavaScript коде (самое ценное, по моему, кроме хранения большого обьема данных, является полнотекстовый поиск). Аналогичные инструменты можно встретить в спецификации HTML 5, да и в последних версиях Mozilla Firefox будет встроена база данных в качестве клиентского стораджа, в среде Adobe AIR также используется встроенная база SQLite. Но что делать, если все эти радости по какой-либо причине недоступны либо их использование ограничено, а удобное хранение и работа с данными нужно иметь уже здесь и сейчас, и без дополнительных надстроек. Выход, конечно же есть!

Prototype определённо одна из мощнейших Javascript библиотек, но у неё есть один небольшой недостаток который зачастую ошибочно принимают за большой — отсутствие родной поддержки связывания селекторов с событиями. Для сравнения — в <a href=«jquery.com» title-«jQuery»>jQuery это одна из основных фич и трудно вообще представить <a href=«jquery.com» title-«jQuery»>jQuery без этого. Для тех кто не в курсе — это возможность отделять наш Javascript от XHTML посредством CSS селекторов, большинство таких событий как onclick, onmouseover, onmouseout, onblur, onfocus и тому подобные.

Вот однако же есть умельцы. Все помнят игру детства — Super Mario. Появился очередной повод поностальгировать — умельцы сделали версию игры на Javascript(!!). Скрипт игры весит 35 kb или 14 kb в ужатом виде. Должен адекватно работать во всех браузерах.

Наслаждаемся:

Обычная версия: без музыки или с музыкой

Игровое окно x2: без музыки или с музыкой

Собственно исходник самого скрипта.

Проверьте установленную кодировку, игра может неверно отображаться, если принудительно стоит кодировка win1251.

Клип с ютуба.
Посмотреть своими глазами
via ajaxian.com

JavaScript, также известный как Mocha, или LiveScript, или JScript или ECMAScript один из самых популярных языков программирования. Фактически каждый персональный компьютер имеет его интерпретатор и активно им пользуется. JavaScript всецело обязан своей популярностью тому, что он стал основным скриптовым языком для веба.

Несмотря на его популярность, немногие знают, что JavaScript — это очень хороший объектно-ориентированный язык с множеством возможностей. Почему многие этого не понимают? Почему этот язык настолько не понят?

Несмотря на то, что работа над спецификацией JavaScript 2.0 еще не закончена, обзор новых возможностей уже доступен в формате PDF. Разработчики надеются закончить спецификацию этой осенью.

Итак, некоторые вещи, которые будут нам доступны:

Я давно читаю много английских блогов по теме, но сейчас, в связи с появлением своего standalone блога, хочу влиться в русскоязычную блогосферу. К сожалению, пока что мне не удалось её найти. Обнаруженные блоги либо только мельком затрагивают javascript, либо вообще не ссылаются на коллег, либо производят несерьёзное впечатление.

Поэтому обращаюсь к сообществу с вопросом: подскажите, какие русские блоги о javascript вы знаете или ведёте?

А для затравки — список известных мне английских блогов по теме (нарочно исключаю неспециализированные, чтобы не раздувать список чрезмерно)

Достоверно известно о работе над исполнением ECMAScript 4 нескольких компаний. Вот список реализаций:

ECMAScript 4 Reference Implementation (ES4 RI)

ES4 RI- это справочное исполнение, поддерживаемое технической группой ECMA, как информационная основа для других исполнителей.

Tamarin

Tamarin- это объединение усилий компаний Mozilla и Adobe для адаптирования Open Source Adobe Virtual Machine к языку ECMAScript 4 и запуску на следующих за Firefox 3 версия (через ActionMonkey), а также на Flash 10.

В заметке Владимира Токмакова, утверждается:

HTML-элемент в документе может быть скрыт с помощью JavaScript или CSS-свойства display. Логику, заложенную в CSS, воспроизводить в JavaScript сложно и не нужно. Проще запросить offsetHeight объекта (если 0 = элемент скрыт).

Проще-то оно, конечно, проще, вот только какой ценой?