Ненавязчивый “Unobtrusive” JavaScript

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

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

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

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

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

6. Поиск необходимого элемента <ul id="menu"> <li><a href="/about">Окомпании</a></li> <li><a href=“/products">Продукция</a></li> <li><a href="/contacts">Контакты</a></li> </ul> function getMenuLinks(){ var parentObj = document.getElementById('menu'); var menuLinks = parentObj.getElementsByTagName('a'); return menuLinks; }

7. Поиск необходимого элемента <input class="required" name="email" /> <input class="required" name="phone" /> 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. Дерево элементов

9. Добавление обработчика Плохие способы <a href="#" onclick="login();"> <a href="javascript:login();"> <a href="javascript:void(0);" id="login"> document.getElementById('login').onclick = function(){ … }

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

11. Добавление обработчика 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. Отмена исходного действия DOM event model: • preventDefault • stopPropagation MSIE: • window.event.returnValue • window.event.cancelBubble

13. Отмена исходного действия 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. Источник события 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. AJAX • Сначала не-AJAX версия • Добавьте обработчики событий, которые вместо ссылок и кнопок будут пересылать данные на сервер через XMLHttpRequest • Используте атрибуты hrefи action • Для простоты используйте AHAH (Asynchronous HTML and HTTP)

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