Embed Size (px)
Citation preview
НенавязчивыйНенавязчивый“Unobtrusive”“Unobtrusive”JavaScriptJavaScript
Сергеев АлексейСергеев Алексей«Открытые Веб-Технологии»«Открытые Веб-Технологии»[email protected]@openwebtech.ru
www.rit2007.ru
Progressive EnhancementProgressive Enhancement
Всё содержание сайта доступно в любом браузере
Вся функциональность доступна в любом браузере
Семантическая верстка Представление отделено от содержания за
счёт внешнего CSS Поведение отделено от содержания за счёт
«Unobtrusive» JavaScript
www.rit2007.ru
Ненавязчивый Ненавязчивый JavaScriptJavaScript
Главные принципы: весь JS-код находится во внешнем файле обработчики событий добавляются после
загрузки страницы с помощью специальных функций
стили добавляются за счёт атрибутов class и id, а не за счёт прямого указания значений внутри JavaScript-функций
www.rit2007.ru
Пример реализацииПример реализации
Переход по ссылке,
требующей
авторизацию
www.rit2007.ru
Поиск необходимого элементаПоиск необходимого элемента
getElementById
getElementsByTagName
button = document.getElementById('submitter');
links = document.getElementsByTagName('a');
www.rit2007.ru
Поиск необходимого элементаПоиск необходимого элемента
<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;}
www.rit2007.ru
Поиск необходимого элементаПоиск необходимого элемента
<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;}
www.rit2007.ru
Дерево элементовДерево элементов
www.rit2007.ru
Добавление обработчикаДобавление обработчика
Плохие способы
<a href="#" onclick="login();">
<a href="javascript:login();">
<a href="javascript:void(0);" id="login">
document.getElementById('login').onclick = function(){
…
}
www.rit2007.ru
Добавление обработчикаДобавление обработчика
DOM event model: addEventListener removeEventListener
MSIE: attachEvent detachEvent
www.rit2007.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; }}
www.rit2007.ru
Отмена исходного действияОтмена исходного действия
DOM event model: preventDefault stopPropagation
MSIE: window.event.returnValue window.event.cancelBubble
www.rit2007.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; }}
www.rit2007.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;}
www.rit2007.ru
AJAXAJAX
Сначала не-AJAX версия Добавьте обработчики событий, которые
вместо ссылок и кнопок будут пересылать данные на сервер через XMLHttpRequest
Используте атрибуты href и action Для простоты используйте AHAH (Asynchronous
HTML and HTTP)
www.rit2007.ru
Спасибо за внимание!Спасибо за внимание!
