Ненавязчивый Unobtrusive JavaScript Сергеев Алексей «Открытые Веб-Технологии» ase@openwebtech.ru. - презентация

1 Ненавязчивый Unobtrusive JavaScript Сергеев Алексей «Открытые Веб-Технологии»

2 ru Progressive Enhancement Всё содержание сайта доступно в любом браузере Вся функциональность доступна в любом браузере Семантическая верстка Представление отделено от содержания за счёт внешнего CSS Поведение отделено от содержания за счёт «Unobtrusive» JavaScript

3 ru Ненавязчивый JavaScript Главные принципы: весь JS-код находится во внешнем файле обработчики событий добавляются после загрузки страницы с помощью специальных функций стили добавляются за счёт атрибутов class и id, а не за счёт прямого указания значений внутри JavaScript-функций

4 ru Пример реализации Переход по ссылке, требующей авторизацию

5 ru Поиск необходимого элемента getElementById getElementsByTagName button = document.getElementById('submitter'); links = document.getElementsByTagName('a');

6 ru Поиск необходимого элемента О компании Продукция Контакты function getMenuLinks(){ var parentObj = document.getElementById('menu'); var menuLinks = parentObj.getElementsByTagName('a'); return menuLinks; }

7 ru Поиск необходимого элемента function getRequired(){ var inputs = document.getElementsByTagName('input'); var requiredInputs = new Array; for ( var i = 0; i < inputs.length; i++ ) { if ( inputs[i].className.match('required) ) requiredInputs.push(inputs[i]); } return requiredInputs; }

8 ru Дерево элементов

9 ru Добавление обработчика Плохие способы document.getElementById('login').onclick = function(){ … }

10 ru Добавление обработчика DOM event model: addEventListener removeEventListener MSIE: attachEvent detachEvent

11 ru Добавление обработчика function addEvent(obj, evType, func, useCapture){ if (obj.addEventListener){ obj.addEventListener(evType, func, useCapture); return true; } else if (obj.attachEvent){ var r = obj.attachEvent('on'+evType, func); return r; } else { obj['on'+evType] = func; }

12 ru Отмена исходного действия DOM event model: preventDefault stopPropagation MSIE: window.event.returnValue window.event.cancelBubble

13 ru Отмена исходного действия function cancelDefault(e){ if ( e && e.preventDefault && e.stopPropagation() ){ e.stopPropagation(); e.preventDefault(); } if ( window.event ){ window.event.cancelBubble = true; window.event.returnValue = false; }

14 ru Источник события DOM Event Model e.target MSIE window.event.srcElement if ( window.event && window.event.srcElement ){ elem = window.event.srcElement; } else if ( e && e.target ) { elem = e.target; } else { return; }

15 ru AJAX Сначала не-AJAX версия Добавьте обработчики событий, которые вместо ссылок и кнопок будут пересылать данные на сервер через XMLHttpRequest Используте атрибуты href и action Для простоты используйте AHAH (Asynchronous HTML and HTTP)

16 ru Спасибо за внимание!