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

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

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

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

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

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

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; }

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

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

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

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; }

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

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; }

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; }

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

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