Ненавязчивый JavaScript. Ajax - вводим в курс дела.

1. О технологии "Ненавязчивый JavaScript" - позволяющей полностью отделить JavaScript от HTML. Перевод первых двух глав.
2. Ajax. Вводим в курс дела. “10 мест, где необходим Ajax“. Ссылки по теме.

Текст ниже - перевод статьи "Unobtrusive Javascript", чей автор Christian Heilmann любезно дал мне согласие на перевод. Оригинальный адрес статьи http://www.onlinetools.org/articles/unobtrusivejavascript/index.html

Ненавязчивый Javascript

Javascript - великолепный инструмент для улучшения юзабилити сайта. Это дополнительный уровень поверх разметки и таблиц стилей означающих "что это за текст" и "как он должен отображаться". Javascript добавляет новое измерение: "как элемент должен себя вести"

На следующих страницах мы будем обсуждать и смотреть как мы можем использовать Javascript, при этом оставляя страницы общедоступными. Техника полного отделения Javascript от двух других уровней веб-разработки стала обыкновенно называться "ненавязчивый Javascript", так как название "общедоступный Javascript" не совсем полно. У вас может быть полностью отделённый Javascript, который будет совершенно недоступен.

Как бы то ни было, поехали дальше

Операция "Чистота" в действии.

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

Дальнейшее разделение возможно, если использовать наследование и зависящие от контекста селекторы, вместо встроенных в элемент стилей и классов. (Популярная статья про наследование и селекторы в CSS на русском: http://live.julik.nl/2005/02/cascade. Прим. переводчика.)

стало

И в конечном итоге:

Javascript может и должно ожидать такое же развитие.

Javascript: хранить отдельно

Первое правило клуба ненавязчивого Javascript это никому не говорить о клубе ненавязчивого Javascript. Нет, нет, оставайтесь с нами, первое правило это...

1. Никогда, ни при каких обстоятельствах не добавляйте Javascript прямо в документ

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

Это всё что нам когда-либо понадобится, никакого больше встроенного Javascript. Смыть шампунь и повторить.

2. Javascript - это расширение, а не основная функциональность.

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

Это не означает, что мы совсем не можем использовать Javascript, это только значит, мы можем добавлять его лишь как дополнительную возможность.

Код совершенно правильный и предохранит от попыток пользователей отправить пустую форму

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

Давайте повторим: Javascript не надёжен, не будем полагаться на него!

3. Проверяйте доступность объекта прежде чем использовать его.

Множество ошибок Javascript происходит просто потому, что программист был слишком ленив, чтобы проверить, доступен или нет данный объект или метод.

может окончиться ошибкой Javascript, если объект о не доступен.

работает всегда.

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

4. Не создавайте Javascript на браузеро-зависимых диалектах.

Если нет действительный весомой причины, мы никогда не должны использовать специфичные для браузера расширения веб-стандартов. Времена проверки document.layers (Netscape 4.x) или document.all (Internet Explorer < 5) прошли. Все современный браузеры поддерживают свойство DOM document.getElementsById и именно это мы используем для проверки.

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

5. Не похищайте чужие переменные скрипта.

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

6. Сохраняйте функциональность независимой от наличия мыши.

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

Самая большая проблема с независимостью от наличия мыши, это поля формы, чьи значения мы проверяем, или которые запускают эффект на события onchange или onblur. Не используйте их, это так просто(as simple as that).

Проверьте этот пример недоступного селекта.

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

Хотя опытные клавиатурщики могут знать, что если нажать alt+"стрелка вниз", выпадающее меню полностью развернётся и можно выбрать нужный пункт.

Проверить этот пример общедоступного селекта.

Это работает сравнительно хорошо и экономит нам один запрос севера к перенаправляющему скрипту send.php, который доступен, только когда нету Javascript.

Как насчёт onkeypress?

Когда мы читаем руководства по общедоступному веб-контенту, нас упрашивают использовать независимые от устройств обработчики событий в наших скриптах.

По-другому, если вы должны использовать независимые от устройств атрибуты, обеспечьте избыточный механизм ввода (то есть определите два обработчика для одного и того же элемента):

• Используйте "onmousedown" вместе с "onkeydown".
• Используйте "onmouseup" вместе с "onkeyup"
• Используйте "onclick" вместе с "onkeypress"

Это звучит великолепно в теории, но в реальных жизненный ситуациях, обработчик onkeypress плохо поддерживается различными браузерами. Пользователям, зависящим от клавиатурного просмотра, для имитации клика обычно даётся либо клавиша "Enter" либо пробел, либо они обе. Используя onkeypress, мы можем украсть другую клавиатурную функциональность нужную пользователю. Примеры: опережающий ввод в Мозилле, дополнительные горячие клавиши в Опере (типа 'A' для перехода к следующей ссылке) или клавиатурные средства управления в JAWS'.

Ссылки:

1. The World Wide Web Consortium: http://www.w3.org
2. The w3c Document Object Model: http://www.w3.org/DOM/
3. Web Content Accessibility Guidelines: http://www.w3.org/TR/WCAG10-HTML-TECHS/#directly-accessible-scripts
4. Mozilla's type-ahead: http://www.mozilla.org/projects/ui/accessibility/typeaheadfind.html
5. Opera's keyboard controls: http://www.opera.com/features/keyboard/complete/
6. JAWS keyboard controls: http://www.webaim.org/techniques/jaws/keyboard-shortcuts

Как постичь, что мы хотим изменить

Для неопытных Javascript-разработчиков HTML - игровая площадка.

или если они чуть более продвинутые:

В любом случае все вызовы событий находятся в HTML, и если имя функции поменяется, нам нужно будет внести изменения в каждом документе. Кроме того, каждый ролловер будет означать большее количество разметки, которая добавиться к общему весу страницы.

Изыди! Изыди! - вы одержимы встроенными в документ вызовами событий.

Давайте забудем на мгновение, что почти каждый эффект ролловера в наши дни скорее достигается с помощью CSS, чем с помощью Javascript, и допустим, что мы хотим использовать нижеследующую разметку и создать ролловер для изображения.

Итак, как сменить изображение, когда на него наводиться курсор мыши?

Карабкаемся по ветвям дерева узлов.(node tree)

Каждый XML (а также и HTML) документ - это дерево узлов. Узел - часть этого дерева(представляйте файл или папку в windows эксплорере, когда вы просматриваете ваш диск). Узел может быть двенадцатью разными вещами - в HTML только три из них действительно интересны: element, TextNode и AttributeNode.

Наше альпинистское снаряжение.

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

Функции для достижения элемента страницы

getElementById('elementID')

возвращает элемент с id elementID в виде объекта.

getElementsByTagName('tag')

возвращает все элементы с именем tag в виде массива.

Разумеется мы можем смешивать и сочетать эти два варианта. Несколько примеров:

document.getElementById('navigation').getElementsByTagName('a')[3];
 возвращает четвёртую ссылку внутри элемента который имеет ID 'navigation'
document.getElementsByTagName('div')[2].getElementsByTagName('p')[0];
 возвращает первый параграф внутри третьего div в документе.

Инструменты, чтобы переместиться к конкретному элементу

childNodes

возвращает массив узлов лежащих внутри текущего. Существуют также firstChild и lastChild, это сокращённые варианты childNodes[0] и childNodes[this.childNodes.length-1].

parentNode

Элемент содержащий данный/dd>

nextSibling

следующий элемент того же уровня в дереве документа

previousSibling

предыдущий элемент того же уровня в дереве документа

Всё это по желанию может быть смешанно так как нам нужно.

Javascript:
var other=document.getElementById('nav').childNodes[3].firstChild;
 возвращает четвёртый элемент первого подэлемента 
 внутри элемента с ID=nav
var prevlink=o.parentNode.previousSibling.firstChild.childnodes[2];
 возвращает третий узел внутри предыдущего элемента, 
 того же уровня, что и родительский элемент элемента о.

Атрибуты и функции элементов.

attributes

возвращает массив атрибутов этого элемента. Не работает с IE версией менее 6.

data

возвращает или устанавливает текстовые данные узла

nodeName

возвращает имя узла(имя HTML элемента)

nodeType

возвращает тип узла — 1, если элемент это узел, 2 если атрибут, 3 если текст.

nodeValue

возвращает или устанавливает значение узла. Это значение является текстом, если узел - текстовый, атрибутом, если это узел-атрибут, или null, если это элемент.

getAttribute(attribute)

возвращает значение атрибута attribute.

Итак, чтобы достичь изображения в нашем примере, мы будем использовать либо getElementsByTagName, либо getElementById.

Использовать getElementById гораздо проще, так как нам не нужно пробегать сквозь все элементы и искать уникальный идентификатор. В этом примере, мы проверяем, содержит ли атрибут src объекта изображения значение 'home.gif'. Более распространённый способ - проверить назначен ли элементу специальный класс.

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

Вроде бы всё хорошо, но мы забыли одну вещь: хотя то что получилось просто умилительно, ролловер должен работать и без мыши. Чтобы достигнуть этого, мы должны проверить, находиться ли фокус на ссылке вокруг изображения, так как сама картинка, если на неё поставлена ссылка, недостижима с клавиатуры.

Чтобы сделать проверку, нам надо получить элемент, который содержит изображение, в данном случае - ссылку. Мы сделаем это с помощью команды parentNode. Так как это заодно изменяет объект, которые передан как параметр функции roll(), нам надо будет найти изображение снова. Поэтому мы перебираем дочерние узлы ссылок и смотрим который из них одновременно и элемент и изображение, проверив nodeType and nodeName. Это необходимо, так как некоторые браузеры рассматривают пробелы в источнике изображения как узел, другие же нет.

Почему бы вам не попробовать?

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

1. Поменяйте цвет каждого H2 на голубой. Решение для смены цвета.
2. Обведите каждый второй параграф чёрной рамкой. Решение для обведённых параграфов.
3. Проверьте каждую ссылку в документе, является ли она внешней (проверяя, что атрибут href не содержит window.location.hostname) и добавьте href каждой ссылки в круглых скобках после ссылки. Пока вы ещё только изучаете, как это сделать правильно используйте атрибут innerHTML объекта ссылки, чтобы изменить его содержание. Решение для внешних ссылок.
4. Добавьте обработчик события onclick, который открывает всплывающее окно 400x400, к каждой ссылке с атрибутом target. Решение для всплывающих окон.

Ajax - вводим в курс дела.

Если вы занимаетесь веб-программированием, или же вам просто нравиться листать компьютерные журналы, готов поспорить вам уже попадались на глаза рассказы о технологии Ajax, которая, открывает новые горизонты в разработке веб-приложений, осуществляет концепцию Web2.0 и прочая и прочая.

Постараюсь коротко ввести в вопрос. Сперва небольшая энциклопедическая справка, пользуясь случаем передаю благодарность авторам википедии:

AJAX (Asynchronous JavaScript and XML) — подход к построению пользовательских интерфейсов веб-приложений, когда web-страница, не перезагружаясь, сама догружает нужные пользователю данные.

Ajax подход к разработке пользовательских интерфейсов базируется на двух основных принципах.

• Использование DHTML для динамичного изменения содержания страницы
• Использование XMLHttpRequest для обращения к серверу “на лету”, не перезагружая всю страницу полностью.

Продолжим. Несмотря на довольно большую шумиху круг применений Ajax довольно ограничен:

Где полезно применять Ajax:

1. Интерактивность основанная на формах
2. Навигация по большим древовидным иерархическим структурам
3. Быстрая связь между пользователями
4. Голосования, кнопки "да/нет", выставление оценок
5. Сортировка данных и все, что с ней связано
6. Подсказки при вводе текста, автозаполнение

И где вредно:

1. Простые формы
2. Поиск
3. Основная навигация
4. Подгрузка больших объемов текста
5. Управление внешним видом, дизайном
6. Малофункциональные навороты

(Цитата взята с блога http://uggallery.audiopeace.ru/2005/12/08/gde-komu-i-kak-primenyat-ajax,
адрес оригинала статьи http://www.sourcelabs.com/blogs/ajb/2005/12/10_places_you_must_use_ajax.html)

Как видите 10 пунктов, автор пока что не смог осилить. :)

На сём разрешите откланяться.
Последующие выпуски рассылки будут посвящены уже существующим Ajax библиотекам, фреймворкам и средствам разработки. Я снова выйду в эфир на следующей неделе. Чтобы вы не скучали это время, вы можете написать ваши "Hello word!" используя Ajax, а всё благодаря Юрию Артюху, который перевёл замечательную вводную статью "Аякс за 30 секунд". Для любителей английского - ссылка на оригинал http://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX-Tutorial.html.